diff --git a/src/applications/ivc-champva/10-7959a/chapters/signerInformation.js b/src/applications/ivc-champva/10-7959a/chapters/signerInformation.js new file mode 100644 index 000000000000..889eadc8ae17 --- /dev/null +++ b/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', + }, + }, + }, +}; diff --git a/src/applications/ivc-champva/10-7959a/config/form.js b/src/applications/ivc-champva/10-7959a/config/form.js index 9c5209a29dce..a58e69ac992a 100644 --- a/src/applications/ivc-champva/10-7959a/config/form.js +++ b/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, }, }, },