src/applications/verify-your-enrollment/components/addressSchema.js
import React from 'react';
import constants from 'vets-json-schema/dist/constants.json';
import ADDRESS_DATA from 'platform/forms/address/data';
import countries from 'platform/user/profile/vap-svc/constants/countries.json';
import { validateAsciiCharacters } from 'platform/user/profile/vap-svc/util';
import {
VaSelectField,
VaTextInputField,
VaCheckboxField,
} from 'platform/forms-system/src/js/web-component-fields';
import { blockURLsRegEx } from '../constants';
import { splitAddressLine } from '../helpers';
const initializeAddressLine1 = formData => {
return formData?.addressLine1 !== undefined
? splitAddressLine(formData?.addressLine1, 20).line1
: splitAddressLine(formData?.street?.trim(), 20).line1;
};
const initializeAddressLine2 = formData => {
const address1 =
formData?.street?.length > 20
? splitAddressLine(formData?.addressLine1, 20).line2
: splitAddressLine(formData?.addressLine2, 20).line1;
const address2 =
formData?.street?.length > 20
? splitAddressLine(formData?.street?.trim(), 20).line2
: splitAddressLine(formData?.street2?.trim(), 20).line1;
if (formData?.addressLine2 === undefined && address2 === '') {
return undefined;
}
return formData?.addressLine2 !== undefined ? address1 : address2;
};
const cleanZipCode = zipcode => {
return zipcode?.substring(0, 5);
};
const MILITARY_STATES = new Set(ADDRESS_DATA.militaryStates);
const ADDRESS_FORM_VALUES = {
STATES: constants.states.USA.map(state => state.value),
COUNTRIES: countries.map(country => country.countryName),
COUNTRY_ISO3_CODES: countries.map(country => country.countryCodeISO3),
MILITARY_STATES,
};
const STREET_LINE_MAX_LENGTH = 20;
export const getFormSchema = (formData = {}) => {
const defaultCountry =
countries.find(
country => country.countryCodeISO3 === formData?.countryCodeIso3,
)?.countryCodeISO3 || 'USA';
return {
type: 'object',
properties: {
'view:livesOnMilitaryBase': {
type: 'boolean',
},
'view:livesOnMilitaryBaseInfo': {
type: 'object',
properties: {},
default: !formData['view:livesOnMilitaryBase'],
},
countryCodeIso3: {
type: 'string',
enum: ADDRESS_FORM_VALUES.COUNTRY_ISO3_CODES,
enumNames: ADDRESS_FORM_VALUES.COUNTRIES,
default: defaultCountry,
},
addressLine1: {
type: 'string',
minLength: 1,
maxLength: STREET_LINE_MAX_LENGTH,
pattern: blockURLsRegEx,
default: initializeAddressLine1(formData),
},
addressLine2: {
type: 'string',
minLength: 1,
maxLength: STREET_LINE_MAX_LENGTH,
pattern: blockURLsRegEx,
default: initializeAddressLine2(formData),
},
addressLine3: {
type: 'string',
minLength: 1,
maxLength: STREET_LINE_MAX_LENGTH,
pattern: blockURLsRegEx,
default: formData?.addressLine3,
},
addressLine4: {
type: 'string',
minLength: 1,
maxLength: STREET_LINE_MAX_LENGTH,
pattern: blockURLsRegEx,
default: formData?.addressLine4,
},
city: {
type: 'string',
pattern: blockURLsRegEx,
default: formData?.city,
},
stateCode: {
type: 'string',
enum: Object.keys(ADDRESS_DATA.states),
enumNames: Object.values(ADDRESS_DATA.states),
default: formData?.stateCode,
},
zipCode: {
type: 'string',
pattern: '^\\d{5}$',
default: cleanZipCode(formData?.zipCode),
},
},
required: ['addressLine1', 'city'],
};
};
export const getUiSchema = () => {
return {
'view:livesOnMilitaryBase': {
'ui:title': 'I live on a United States military base outside of the U.S.',
'ui:webComponentField': VaCheckboxField,
'ui:options': {
hideEmptyValueInReview: true,
},
},
'view:livesOnMilitaryBaseInfo': {
'ui:description': () => (
<va-additional-info trigger="Learn more about military base addresses">
<p>
We automatically enter the United States as your country if you live
on a military base outside of the country.
</p>
</va-additional-info>
),
},
countryCodeIso3: {
'ui:title': 'Country',
'ui:autocomplete': 'country',
'ui:webComponentField': VaSelectField,
'ui:options': {
inert: true,
},
},
addressLine1: {
'ui:title': `Street address (${STREET_LINE_MAX_LENGTH} characters maximum)`,
'ui:autocomplete': 'address-line1',
'ui:webComponentField': VaTextInputField,
'ui:errorMessages': {
required: 'Street address is required',
pattern: `Please enter a valid street address under ${STREET_LINE_MAX_LENGTH} characters`,
},
'ui:validations': [validateAsciiCharacters],
},
addressLine2: {
'ui:title': `Street address line 2 (${STREET_LINE_MAX_LENGTH} characters maximum)`,
'ui:autocomplete': 'address-line2',
'ui:webComponentField': VaTextInputField,
'ui:errorMessages': {
pattern: `Please enter a valid street address under ${STREET_LINE_MAX_LENGTH} characters`,
},
'ui:validations': [validateAsciiCharacters],
},
addressLine3: {
'ui:title': `Street address line 3 (${STREET_LINE_MAX_LENGTH} characters maximum)`,
'ui:autocomplete': 'address-line3',
'ui:webComponentField': VaTextInputField,
'ui:errorMessages': {
pattern: `Please enter a valid street address under ${STREET_LINE_MAX_LENGTH} characters`,
},
'ui:validations': [validateAsciiCharacters],
},
addressLine4: {
'ui:title': `Street address line 4 (${STREET_LINE_MAX_LENGTH} characters maximum)`,
'ui:webComponentField': VaTextInputField,
// 'ui:autocomplete': 'address-line4',
'ui:errorMessages': {
pattern: `Please enter a valid street address under ${STREET_LINE_MAX_LENGTH} characters`,
},
'ui:validations': [validateAsciiCharacters],
},
city: {
'ui:autocomplete': 'address-level2',
'ui:errorMessages': {
required: 'City is required',
pattern: `Please enter a valid city under 100 characters`,
},
'ui:validations': [validateAsciiCharacters],
},
stateCode: {
'ui:title': 'State',
'ui:autocomplete': 'address-level1',
'ui:errorMessages': {
required: 'State is required',
},
'ui:webComponentField': VaSelectField,
},
zipCode: {
'ui:title': 'Zip code',
'ui:autocomplete': 'postal-code',
'ui:webComponentField': VaTextInputField,
'ui:errorMessages': {
required: 'Zip code is required',
pattern: 'Zip code must be 5 digits',
},
},
};
};