86764 - Signer info section - form 10-7959a (#30729)

* added page configs

* added form config

* required phone

src/applications/ivc-champva/10-7959a/chapters/signerInformation.js

@@ -0,0 +1,138 @@
+import { cloneDeep } from 'lodash';
+import { VaTextInputField } from 'platform/forms-system/src/js/web-component-fields';
+import {
+  addressUI,
+  addressSchema,
+  fullNameUI,
+  fullNameSchema,
+  titleUI,
+  titleSchema,
+  radioUI,
+  radioSchema,
+  phoneUI,
+  phoneSchema,
+} from 'platform/forms-system/src/js/web-component-patterns';
+
+const fullNameMiddleInitialUI = cloneDeep(fullNameUI());
+fullNameMiddleInitialUI.middle['ui:title'] = 'Middle initial';
+
+export const certifierRoleSchema = {
+  uiSchema: {
+    ...titleUI('Your information'),
+    certifierRole: radioUI({
+      title: 'Which of these best describes you?',
+      required: () => true,
+      labels: {
+        applicant: 'I’m the beneficiary submitting a claim for myself',
+        other:
+          'I’m a representative submitting a claim on behalf of the beneficiary',
+      },
+    }),
+  },
+  schema: {
+    type: 'object',
+    properties: {
+      titleSchema,
+      certifierRole: radioSchema(['applicant', 'other']),
+    },
+  },
+};
+
+export const certifierNameSchema = {
+  uiSchema: {
+    ...titleUI('Your name'),
+    certifierName: fullNameMiddleInitialUI,
+  },
+  schema: {
+    type: 'object',
+    properties: {
+      titleSchema,
+      certifierName: fullNameSchema,
+    },
+  },
+};
+
+export const certifierAddressSchema = {
+  uiSchema: {
+    ...titleUI(
+      'Your mailing address',
+      'We’ll send any important information about this form to this address',
+    ),
+    certifierAddress: addressUI(),
+  },
+  schema: {
+    type: 'object',
+    required: ['certifierAddress'],
+    properties: {
+      titleSchema,
+      certifierAddress: addressSchema(),
+    },
+  },
+};
+
+export const certifierPhoneSchema = {
+  uiSchema: {
+    ...titleUI(
+      'Your contact information',
+      'We’ll use this information to contact you if we have more questions.',
+    ),
+    certifierPhone: phoneUI(),
+  },
+  schema: {
+    type: 'object',
+    required: ['certifierPhone'],
+    properties: {
+      titleSchema,
+      certifierPhone: phoneSchema,
+    },
+  },
+};
+
+export const certifierRelationshipSchema = {
+  uiSchema: {
+    ...titleUI('Your relationship to the beneficiary'),
+    certifierRelationship: radioUI({
+      title: 'Which of these best describes you?',
+      required: () => true,
+      labels: {
+        spouse: 'I’m the beneficiary’s spouse',
+        parent: 'I’m the beneficiary’s parent',
+        other: 'Relationship not listed',
+      },
+    }),
+    certifierOtherRelationship: {
+      'ui:title': `Describe your relationship to the beneficiary`,
+      'ui:webComponentField': VaTextInputField,
+      'ui:options': {
+        expandUnder: 'certifierRelationship',
+        expandUnderCondition: 'other',
+        expandedContentFocus: true,
+      },
+      'ui:errorMessages': {
+        required: `Please enter your relationship to the beneficiary`,
+      },
+    },
+    'ui:options': {
+      updateSchema: (formData, formSchema) => {
+        if (formSchema.properties.certifierOtherRelationship['ui:collapsed']) {
+          return { ...formSchema, required: ['certifierRelationship'] };
+        }
+        return {
+          ...formSchema,
+          required: ['certifierRelationship', 'certifierOtherRelationship'],
+        };
+      },
+    },
+  },
+  schema: {
+    type: 'object',
+    required: ['certifierRelationship'],
+    properties: {
+      titleSchema,
+      certifierRelationship: radioSchema(['spouse', 'parent', 'other']),
+      certifierOtherRelationship: {
+        type: 'string',
+      },
+    },
+  },
+};

src/applications/ivc-champva/10-7959a/config/form.js

@@ -4,6 +4,13 @@ import manifest from '../manifest.json';
 import IntroductionPage from '../containers/IntroductionPage';
 import ConfirmationPage from '../containers/ConfirmationPage';
 import { nameWording } from '../../shared/utilities';
+import {
+  certifierRoleSchema,
+  certifierNameSchema,
+  certifierAddressSchema,
+  certifierPhoneSchema,
+  certifierRelationshipSchema,
+} from '../chapters/signerInformation';
 import {
   insuranceStatusSchema,
   insurancePages,
@@ -60,15 +67,35 @@ const formConfig = {
       title: 'Signer information',
       pages: {
         page1: {
-          path: 'first-page',
-          title: 'First Page',
+          path: 'signer-type',
+          title: 'Your information',
           // Placeholder data so that we display "beneficiary" in title when `fnp` is used
-          // initialData: mockData.data,
-          uiSchema: {},
-          schema: {
-            type: 'object',
-            properties: {},
-          },
+          initialData: { applicantName: { first: 'Beneficiary' } },
+          ...certifierRoleSchema,
+        },
+        page1a: {
+          path: 'signer-info',
+          title: 'Your name',
+          depends: formData => get('certifierRole', formData) === 'other',
+          ...certifierNameSchema,
+        },
+        page1b: {
+          path: 'signer-mailing-address',
+          title: 'Your mailing address',
+          depends: formData => get('certifierRole', formData) === 'other',
+          ...certifierAddressSchema,
+        },
+        page1c: {
+          path: 'signer-contact-info',
+          title: 'Your contact information',
+          depends: formData => get('certifierRole', formData) === 'other',
+          ...certifierPhoneSchema,
+        },
+        page1d: {
+          path: 'signer-relationship',
+          title: 'Your relationship to the beneficiary',
+          depends: formData => get('certifierRole', formData) === 'other',
+          ...certifierRelationshipSchema,
         },
       },
     },