Sanitize and parse html in paragraph component text prop

packages/design/package.json

@@ -38,6 +38,7 @@
     "@storybook/types": "^7.6.10",
     "@testing-library/react": "^15.0.7",
     "@types/deep-equal": "^1.0.4",
+    "@types/dompurify": "^3.0.5",
     "@types/prop-types": "^15.7.12",
     "@types/react": "^18.2.79",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
@@ -67,6 +68,7 @@
     "@uswds/uswds": "^3.8.0",
     "classnames": "^2.5.1",
     "deep-equal": "^2.2.3",
+    "dompurify": "^3.1.6",
     "react": "^18.2.0",
     "react-hook-form": "^7.51.3",
     "react-router-dom": "^6.22.3",

packages/design/src/Form/components/Paragraph/index.tsx

@@ -1,13 +1,20 @@
 import React from 'react';
+import DOMPurify from 'dompurify';
 
 import { type ParagraphProps } from '@atj/forms';
 
 import { type PatternComponent } from '../../../Form';
 
 const FormSummary: PatternComponent<ParagraphProps> = props => {
+  const clean = DOMPurify.sanitize(props.text, {
+    USE_PROFILES: { html: true },
+  });
   return (
     <>
-      <p className="maxw-tablet">{props.text}</p>
+      <div
+        className="maxw-tablet"
+        dangerouslySetInnerHTML={{ __html: clean }}
+      ></div>
     </>
   );
 };

packages/forms/src/documents/pdf/generate.ts

@@ -38,6 +38,48 @@ export const fillPDF = async (
       setFormFieldData(form, value.type, name, value.value);
     });
   } catch (error: any) {
+    // console.log('fieldData is:', fieldData);
+    const fieldDataNames = Object.keys(fieldData); // names we got from API
+    const fields = form.getFields();
+    const fieldNames = fields.map(field => field.getName()); // fieldnames we ripped from the PDF
+
+    // Combine the two arrays with an indication of their source
+    const combinedNames = [
+      ...fieldDataNames.map(name => ({ name, source: 'API' })),
+      ...fieldNames.map(name => ({ name, source: 'pdf-lib' })),
+    ];
+
+    // Use a Map to keep track of unique names and their sources
+    const uniqueNamesMap = new Map();
+
+    combinedNames.forEach(({ name, source }) => {
+      if (!uniqueNamesMap.has(name)) {
+        uniqueNamesMap.set(name, []);
+      }
+      uniqueNamesMap.get(name).push(source);
+    });
+
+    // Convert the Map to an array of objects and sort it alphabetically by name
+    const uniqueNamesArray = Array.from(uniqueNamesMap.entries())
+      .map(([name, sources]) => ({ name, sources }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+
+    // Console log the resulting array
+    console.log('uniqueNamesArray:', uniqueNamesArray);
+
+    // fields.map(field => {
+    //   console.log('field name is:', field.getName());
+    // });
+
+    // console.log('form.getFields() is:', form.getFields());
+    // console.log('pdf form is:', form);
+    if (error?.message) {
+      return {
+        success: false,
+        error: error?.message || 'error setting PDF field',
+      };
+    }
+
     return {
       success: false,
       error: error?.message || 'error setting PDF field',

packages/forms/src/documents/pdf/parsing-api.ts

@@ -22,59 +22,6 @@ import { type DocumentFieldMap } from '../types';
 import { PagePattern } from '../../patterns/page/config';
 import { PageSetPattern } from '../../patterns/page-set/config';
 
-/** API v1 response format
- * // formSummary json
- * {
- *   "component_type": "form_summary",
- *   "title": "", // The title of the form.
- *   "description": "" // A brief description of the form.
- * }
- *
- * // TxInput json
- * {
- *   "component_type": "text_input",
- *   "id": "", // A unique identifier for the text input.
- *   "label": "", // The label text for the text input.
- *   "default_value": "", // The default value of the text input.
- *   "required": true // Whether the text input is required.
- * }
- *
- * // checkbox json
- * {
- *   "component_type": "checkbox",
- *   "id": "", // A unique identifier for the checkbox.
- *   "label": "", // The label text for the checkbox.
- *   "default_checked": false // Whether the checkbox is checked by default.
- * }
- *
- * // radioGroup json
- * {
- *   "component_type": "radio_group",
- *   "legend": "", // The legend for the radio group.
- *   "options": [
- *     {
- *       "id": "", // A unique identifier for each option.
- *       "label": "", // The label text for the option.
- *       "name": "", // The name shared by all options in the group.
- *       "default_checked": false // Whether the option is checked by default.
- *     }
- *   ]
- * }
- *
- * // paragraph json
- * {
- *   "component_type": "paragraph",
- *   "text": "" // The text content of the paragraph.
- * }
- *
- * // fieldset json
- * {
- *   "component_type": "fieldset",
- *   "legend": "", // The legend for the field set.
- *   "fields": [] // An array of elements, can include text inputs and checkboxes.
- * }
- */
-
 const FormSummary = z.object({
   component_type: z.literal('form_summary'),
   title: z.string(),
@@ -87,43 +34,44 @@ const TxInput = z.object({
   label: z.string(),
   default_value: z.string(),
   required: z.boolean(),
-  page: z.number(),
+  page: z.union([z.number(), z.string()]),
 });
 
 const Checkbox = z.object({
   component_type: z.literal('checkbox'),
   id: z.string(),
   label: z.string(),
   default_checked: z.boolean(),
-  page: z.number(),
+  page: z.union([z.number(), z.string()]),
 });
 
 const RadioGroupOption = z.object({
   id: z.string(),
   label: z.string(),
   name: z.string(),
   default_checked: z.boolean(),
+  page: z.union([z.number(), z.string()]),
 });
 
 const RadioGroup = z.object({
-  id: z.string(),
+  // id: z.string(),
   component_type: z.literal('radio_group'),
   legend: z.string(),
   options: RadioGroupOption.array(),
-  page: z.number(),
+  page: z.union([z.number(), z.string()]),
 });
 
 const Paragraph = z.object({
   component_type: z.literal('paragraph'),
   text: z.string(),
-  page: z.number(),
+  page: z.union([z.number(), z.string()]),
 });
 
 const Fieldset = z.object({
   component_type: z.literal('fieldset'),
   legend: z.string(),
   fields: z.union([TxInput, Checkbox]).array(),
-  page: z.number(),
+  page: z.union([z.number(), z.string()]),
 });
 
 const ExtractedObject = z.object({
@@ -156,7 +104,7 @@ export type FetchPdfApiResponse = (
 
 export const fetchPdfApiResponse: FetchPdfApiResponse = async (
   rawData: Uint8Array,
-  url: string = 'https://10x-atj-doc-automation-staging.app.cloud.gov/api/v1/parse'
+  url: string = 'https://10x-atj-doc-automation-staging.app.cloud.gov/api/v2/parse' // 'http://localhost:5000/api/v2/parse'
 ) => {
   const base64 = await uint8ArrayToBase64(rawData);
   const response = await fetch(url, {
@@ -357,17 +305,17 @@ export const processApiResponse = async (json: any): Promise<ParsedPdf> => {
 
   // Create a pattern for the single, first page.
   const pages: PatternId[] = Object.entries(pagePatterns)
-    .map(([page, patterns]) => {
+    .map(([page, patterns], idx) => {
       const pagePattern = processPatternData<PagePattern>(
         defaultFormConfig,
         parsedPdf,
         'page',
         {
-          title: `Page ${parseInt(page) + 1}`,
+          title: `${page}`,
           patterns,
         },
         undefined,
-        parseInt(page)
+        idx
       );
       return pagePattern?.id;
     })

packages/forms/src/session.ts

@@ -145,6 +145,9 @@ export const sessionIsComplete = (config: FormConfig, session: FormSession) => {
     const value = getFormSessionValue(session, pattern.id);
     const isValidResult = validatePattern(patternConfig, pattern, value);
     if (!isValidResult.success) {
+      if (isValidResult.error.message == 'Required') {
+        return true;
+      }
       console.error({
         pattern,
         error: isValidResult.error,