Build MVP for reworked navigation of ContactInfo update prefilled pat…

…tern pages - PT 1 (#34026)

* add toggle for prefill forms-system work

* set up folder for contact info work

* feat: mvp of contact info reroute overhaul, add mock data, hooks, and refactor ContactInfo and Edit comps

* feat: start compound state for contact updates in session storage

* adjust mock server for user with no contact info

* remove compound session state for now, since its not used yet

* spacing adjustment

* working on fixing e2e tests

* test: fix e2e test

* update title for pattern page, adjust order of alert and styling

* fix warning from dispatch in PatternConfigContext

* linting updates, prop types

src/applications/_mock-form-ae-design-patterns/app-entry.jsx

@@ -1,21 +1,31 @@
 import 'platform/polyfills';
 import './sass/_mock-form-ae-design-patterns.scss';
 
-import startApp from 'platform/startup';
 import routes from './routes';
 import reducer from './reducers';
 import manifest from './manifest.json';
 
 import coeReducer from './patterns/pattern2/TaskGray/shared/reducers';
+import { asyncStartApp } from './utils/asyncStartApp';
 
 const combinedReducers = {
   ...reducer,
   certificateOfEligibility: coeReducer.certificateOfEligibility,
 };
 
-startApp({
+const createRoutes = initialRoutes => {
+  // here we can do some async stuff
+  // maybe we change the routes based on the state or other api call responses?
+  // this could be where we add or remove routes for the contact info that is missing for a user
+  // replace () with (store) to access the store and use it to determine the routes
+  return () => {
+    return initialRoutes;
+  };
+};
+
+asyncStartApp({
   entryName: manifest.entryName,
   url: manifest.rootUrl,
   reducer: combinedReducers,
-  routes,
+  createAsyncRoutesWithStore: createRoutes(routes),
 });

src/applications/_mock-form-ae-design-patterns/mocks/endpoints/user/index.js

@@ -275,13 +275,73 @@ const loa3UserWithUpdatedHomePhoneTimeStamp = set(
 );
 
 const loa3UserWithUpdatedMailingAddress = set(
+  set(
+    cloneDeep(loa3User),
+    'data.attributes.vet360ContactInformation.mailingAddress.addressLine1',
+    '345 Mailing Address St.',
+  ),
+  'data.attributes.vet360ContactInformation.mailingAddress.updatedAt',
+  new Date().toISOString(),
+);
+
+const loa3UserWithNoEmail = set(
+  cloneDeep(loa3User),
+  'data.attributes.vet360ContactInformation.email',
+  {},
+);
+
+const loa3UserWithNoContactInfo = set(
   cloneDeep(loa3User),
-  'data.attributes.vet360ContactInformation.mailingAddress.addressLine1',
-  '345 Mailing Address St.',
+  'data.attributes.vet360ContactInformation',
+  {
+    email: {
+      ...loa3User.data.attributes.vet360ContactInformation.email,
+      emailAddress: '',
+    },
+    homePhone: {
+      ...loa3User.data.attributes.vet360ContactInformation.homePhone,
+      phoneNumber: '',
+      areaCode: '',
+      countryCode: '',
+      phoneType: '',
+    },
+    mobilePhone: {
+      ...loa3User.data.attributes.vet360ContactInformation.mobilePhone,
+      phoneNumber: '',
+      areaCode: '',
+      countryCode: '',
+      phoneType: '',
+    },
+    mailingAddress: {
+      ...loa3User.data.attributes.vet360ContactInformation.mailingAddress,
+      addressLine1: '',
+      addressLine2: '',
+      addressLine3: '',
+      city: '',
+      stateCode: '',
+      zipCode: '',
+      countryCodeIso2: '',
+      countryCodeIso3: '',
+      countryCodeFips: '',
+      countyCode: '',
+      countyName: '',
+      createdAt: '',
+      effectiveEndDate: '',
+      effectiveStartDate: '',
+      geocodeDate: '',
+      geocodePrecision: '',
+      id: '',
+      internationalPostalCode: '',
+      latitude: '',
+      longitude: '',
+    },
+  },
 );
 
 module.exports = {
   loa3User,
   loa3UserWithUpdatedHomePhoneTimeStamp,
   loa3UserWithUpdatedMailingAddress,
+  loa3UserWithNoEmail,
+  loa3UserWithNoContactInfo,
 };

src/applications/_mock-form-ae-design-patterns/mocks/script/mem-db.js

@@ -1,10 +1,15 @@
 const _ = require('lodash');
 
-const { loa3User } = require('../endpoints/user');
+const { loa3UserWithNoContactInfo, loa3User } = require('../endpoints/user');
+
+const possibleUsers = {
+  loa3UserWithNoContactInfo,
+  loa3User,
+};
 
 // in memory db
 const memDb = {
-  user: loa3User,
+  user: possibleUsers.loa3UserWithNoContactInfo,
 };
 
 // sanitize user input
@@ -28,7 +33,11 @@ const updateFields = (target, source, fields) => {
       }
       return updatedTarget;
     },
-    { ...target, updatedAt: new Date().toISOString() },
+    {
+      ...target,
+      updatedAt: new Date().toISOString(),
+      createdAt: new Date().toISOString(),
+    },
   );
 };
 
@@ -42,6 +51,12 @@ const updateConfig = {
       'city',
       'stateCode',
       'zipCode',
+      'countryCodeIso2',
+      'countryCodeIso3',
+      'countryCodeFips',
+      'countyCode',
+      'countyName',
+      'addressPou',
     ],
     transactionId: 'mock-update-mailing-address-success-transaction-id',
     type: 'AsyncTransaction::VAProfile::AddressTransaction',
@@ -55,6 +70,12 @@ const updateConfig = {
       'city',
       'stateCode',
       'zipCode',
+      'countryCodeIso2',
+      'countryCodeIso3',
+      'countryCodeFips',
+      'countyCode',
+      'countyName',
+      'addressPou',
     ],
     transactionId: 'mock-update-residential-address-success-transaction-id',
     type: 'AsyncTransaction::VAProfile::AddressTransaction',
@@ -114,7 +135,10 @@ const updateMemDb = (req, res = null) => {
     throw new Error('Invalid phone type sent to PUT telephones');
   }
 
-  if (key === 'PUT /v0/profile/addresses') {
+  if (
+    key === 'PUT /v0/profile/addresses' ||
+    key === 'POST /v0/profile/addresses'
+  ) {
     const addressType = body.addressPou?.toLowerCase();
     if (
       addressType === 'correspondence' ||

src/applications/_mock-form-ae-design-patterns/mocks/server.js

@@ -129,7 +129,7 @@ const responses = {
     );
   },
   'POST /v0/profile/addresses': (req, res) => {
-    return res.json(updateMemDb(req, address.homeAddressUpdateReceived));
+    return res.json(updateMemDb(req));
   },
   'DELETE /v0/profile/addresses': (_req, res) => {
     const secondsOfDelay = 1;

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskBlue/config/contactInfo.js

@@ -0,0 +1,24 @@
+import profileContactInfo from 'applications/_mock-form-ae-design-patterns/shared/components/ContactInfo/profileContactInfo';
+
+import { getContent } from 'platform/forms-system/src/js/utilities/data/profile';
+
+const content = {
+  ...getContent('application'),
+  description: null,
+  title: 'Confirm the contact information we have on file for you',
+};
+
+export const contactInfo = profileContactInfo({
+  content,
+  contactInfoPageKey: 'confirmContactInfo3',
+  contactPath: 'veteran-information',
+  contactInfoRequiredKeys: [
+    'mailingAddress',
+    'email',
+    'homePhone',
+    'mobilePhone',
+  ],
+  included: ['homePhone', 'mailingAddress', 'email', 'mobilePhone'],
+  disableMockContactInfo: true,
+  prefillPatternEnabled: true,
+});

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskBlue/config/form.js

@@ -8,8 +8,8 @@ import { taskCompletePagePattern2 } from 'applications/_mock-form-ae-design-patt
 
 // page level imports
 import IntroductionPage from '../IntroductionPage';
-import profileContactInfo from './profileContactInfo';
 import veteranInfo from './veteranInfo';
+import { contactInfo } from './contactInfo';
 
 const formConfig = {
   rootUrl: manifest.rootUrl,
@@ -65,17 +65,7 @@ const formConfig = {
           uiSchema: veteranInfo.uiSchema,
           schema: veteranInfo.schema,
         },
-        ...profileContactInfo({
-          contactInfoPageKey: 'confirmContactInfo3',
-          contactPath: 'veteran-information',
-          contactInfoRequiredKeys: [
-            'mailingAddress',
-            'email',
-            'homePhone',
-            'mobilePhone',
-          ],
-          included: ['homePhone', 'mailingAddress', 'email', 'mobilePhone'],
-        }),
+        ...contactInfo,
         taskCompletePagePattern2,
       },
     },