Merge branch 'main' into EDM-493-521-finalize-lacs-ui

.github/CODEOWNERS

@@ -43,6 +43,7 @@ src/applications/proxy-rewrite @department-of-veterans-affairs/platform-design-s
 src/applications/auth @department-of-veterans-affairs/octo-identity @department-of-veterans-affairs/va-platform-cop-frontend
 src/applications/login @department-of-veterans-affairs/octo-identity @department-of-veterans-affairs/va-platform-cop-frontend
 src/applications/sign-in-changes @department-of-veterans-affairs/octo-identity @department-of-veterans-affairs/va-platform-cop-frontend
+src/applications/static-pages/cta-widget @department-of-veterans-affairs/octo-identity @department-of-veterans-affairs/va-platform-cop-frontend
 src/applications/terms-of-use @department-of-veterans-affairs/octo-identity @department-of-veterans-affairs/va-platform-cop-frontend
 src/applications/verify @department-of-veterans-affairs/octo-identity @department-of-veterans-affairs/va-platform-cop-frontend
 src/platform/site-wide/ebenefits/ @department-of-veterans-affairs/octo-identity @department-of-veterans-affairs/va-platform-cop-frontend
@@ -136,7 +137,6 @@ src/applications/income-limits @department-of-veterans-affairs/vfs-public-websit
 src/applications/public-outreach-materials @department-of-veterans-affairs/vfs-public-websites-frontend @department-of-veterans-affairs/va-platform-cop-frontend
 src/applications/search @department-of-veterans-affairs/vfs-public-websites-frontend @department-of-veterans-affairs/va-platform-cop-frontend
 src/applications/static-pages/BTSSS-login @department-of-veterans-affairs/vfs-public-websites-frontend @department-of-veterans-affairs/va-platform-cop-frontend
-src/applications/static-pages/cta-widget @department-of-veterans-affairs/vfs-public-websites-frontend @department-of-veterans-affairs/va-platform-cop-frontend
 src/applications/static-pages/events @department-of-veterans-affairs/vfs-public-websites-frontend @department-of-veterans-affairs/vfs-facilities-frontend @department-of-veterans-affairs/va-platform-cop-frontend
 src/applications/static-pages/homepage @department-of-veterans-affairs/vfs-public-websites-frontend @department-of-veterans-affairs/va-platform-cop-frontend
 src/applications/static-pages/homepage-veteran-banner @department-of-veterans-affairs/vfs-public-websites-frontend @department-of-veterans-affairs/va-platform-cop-frontend

package.json

@@ -262,8 +262,8 @@
     "@babel/runtime": "^7.15.4",
     "@datadog/browser-logs": "^5.8.0",
     "@datadog/browser-rum": "^4.49.0",
-    "@department-of-veterans-affairs/component-library": "^48.3.0",
-    "@department-of-veterans-affairs/css-library": "^0.16.1",
+    "@department-of-veterans-affairs/component-library": "^48.4.0",
+    "@department-of-veterans-affairs/css-library": "^0.17.0",
     "@department-of-veterans-affairs/react-jsonschema-form": "^1.2.5",
     "@department-of-veterans-affairs/va-forms-system-core": "1.6.1",
     "@department-of-veterans-affairs/vagov-platform": "^0.0.1",

src/applications/686c-674/components/IntroductionPageHeader.jsx

@@ -5,7 +5,7 @@ import { PAGE_TITLE } from '../config/constants';
 export const IntroductionPageHeader = () => (
   <>
     <FormTitle title={PAGE_TITLE} />
-    <p className="vads-u-font-size--h3 vads-u-margin-bottom--0 vads-u-margin-top--neg3">
+    <p className="vads-u-font-size--h3 vads-u-margin-top--neg1">
       VA Form 21-686c and 21-674
     </p>
   </>

src/applications/686c-674/config/constants.js

@@ -31,3 +31,5 @@ export const NETWORTH_VALUE = '159,240';
 export const FORMAT_YMD_DATE_FNS = 'yyyy-MM-dd';
 export const FORMAT_COMPACT_DATE_FNS = 'MMM d, yyyy';
 export const FORMAT_READABLE_DATE_FNS = 'MMMM d, yyyy';
+
+export const V2_LAUNCH_DATE = 'March 27th, 2025'; // TBD - update after launch

src/applications/686c-674/containers/ConfirmationPage.jsx

@@ -13,7 +13,8 @@ export default function ConfirmationPage() {
   const form = useSelector(state => state?.form);
 
   const { submission, data } = form;
-  const formSubmissionId = submission?.response?.formSubmissionId;
+  const response = submission?.response ?? {};
+  const confirmationNumber = response?.attributes?.confirmationNumber;
   const veteranFirstName = data?.veteranInformation?.fullName?.first || '';
   const veteranLastName = data?.veteranInformation?.fullName?.last || '';
 
@@ -29,11 +30,11 @@ export default function ConfirmationPage() {
   return (
     <>
       <va-alert status="success" class="vads-u-margin-bottom--4" uswds>
-        <h3>Form submission started on August 15, 2024</h3>
+        <h3>Form submission started on {dateSubmitted}</h3>
         <p className="vads-u-margin-y--0">Your submission is in progress.</p>
         <p>
           It can take up to 10 days for us to receive your form. Your
-          confirmation number is {formSubmissionId}.
+          confirmation number is {confirmationNumber}.
         </p>
         <va-link-action
           href="/my-va/"

src/applications/686c-674/containers/IntroductionPage.jsx

@@ -11,6 +11,7 @@ import {
   VaFileNumberMissingAlert,
   ServerErrorAlert,
 } from '../config/helpers';
+import { V2_LAUNCH_DATE } from '../config/constants';
 
 const IntroductionPage = props => {
   const dispatch = useDispatch();
@@ -62,7 +63,6 @@ const IntroductionPage = props => {
   ) : (
     <div className="schemaform-intro">
       <IntroductionPageHeader />
-      <IntroductionPageFormProcess />
       <SaveInProgressIntro
         {...props}
         hideUnauthedStartLink
@@ -73,12 +73,22 @@ const IntroductionPage = props => {
         pageList={props.route.pageList}
         startText="Add or remove a dependent"
         headingLevel={2}
-      />
+      >
+        <p className="vads-u-margin-bottom--4">
+          You should also know that we updated our online form.{' '}
+          <strong>
+            If you started applying online before {V2_LAUNCH_DATE},
+          </strong>{' '}
+          you’ll need to review the information in your application.Select
+          Continue your application to use our updated form.
+        </p>
+      </SaveInProgressIntro>
+      <IntroductionPageFormProcess />
       <div className="omb-info--container vads-u-padding-left--0 vads-u-margin-top--2">
         <va-omb-info
           res-burden={30}
-          omb-number="2900-0043"
-          exp-date="09/30/2021"
+          omb-number="2900-0009"
+          exp-date="08/31/2025"
         />
       </div>
     </div>

src/applications/_mock-form-ae-design-patterns/hooks/useLocalStorage.js

@@ -3,17 +3,18 @@ import { useState, useEffect } from 'react';
  * useLocalStorage is a hook that provides a way to store and retrieve values from localStorage
  * @param {string} key - The key to store the value under
  * @param {any} defaultValue - The default value to use if the key does not exist
+ * @param {boolean} json - Whether to parse the value as JSON, this way a stringified object can be stored and retrieved as an object
  * @returns {array} An array with [value, setValue, clearValue]
  */
-export const useLocalStorage = (key, defaultValue) => {
+export const useLocalStorage = (key, defaultValue, json = false) => {
   const [value, setValue] = useState(() => {
     let currentValue;
 
     try {
       const item = localStorage.getItem(key);
       if (item === null) {
         currentValue = defaultValue;
-      } else if (item.startsWith('{') || item.startsWith('[')) {
+      } else if (json && (item.startsWith('{') || item.startsWith('['))) {
         currentValue = JSON.parse(item);
       } else {
         currentValue = item;
@@ -29,14 +30,21 @@ export const useLocalStorage = (key, defaultValue) => {
 
   useEffect(
     () => {
-      localStorage.setItem(key, JSON.stringify(value));
+      if (value === null) {
+        localStorage.removeItem(key);
+        return;
+      }
+      if (json) {
+        localStorage.setItem(key, JSON.stringify(value));
+        return;
+      }
+      localStorage.setItem(key, value);
     },
-    [value, key],
+    [value, key, json],
   );
 
   const clearValue = () => {
-    localStorage.removeItem(key);
-    setValue(defaultValue);
+    setValue(null);
   };
 
   return [value, setValue, clearValue];

src/applications/_mock-form-ae-design-patterns/hooks/useMockedLogin.js

@@ -2,31 +2,41 @@ import { useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { teardownProfileSession } from 'platform/user/profile/utilities';
 import { updateLoggedInStatus } from 'platform/user/authentication/actions';
+import { refreshProfile } from 'platform/user/exportsFile';
 import { initializeProfile } from 'platform/user/profile/actions';
 
 import { useLocalStorage } from './useLocalStorage';
 
+// useMockedLogin is a hook that provides a way to log in and out of the application
+// it also provides a way to check if the user is logged in
+// used for local development
 export const useMockedLogin = () => {
   const [
     localHasSession,
     setLocalHasSession,
     clearLocalHasSession,
-  ] = useLocalStorage('hasSession', '');
+  ] = useLocalStorage('hasSession', null);
 
   const loggedInFromState = useSelector(
     state => state?.user?.login?.currentlyLoggedIn,
   );
 
+  /**
+   * memoized value that is true if the local storage has a session or the redux store has a logged in status
+   * @returns {boolean}
+   */
   const loggedIn = useMemo(
-    () => localHasSession === 'true' || loggedInFromState,
+    () => localHasSession === 'true' && loggedInFromState,
     [localHasSession, loggedInFromState],
   );
 
   const dispatch = useDispatch();
 
   const logIn = () => {
     setLocalHasSession('true');
-    dispatch(initializeProfile());
+    dispatch(updateLoggedInStatus(true));
+    // get the profile right away, so that user state is updated in the redux store
+    dispatch(refreshProfile());
   };
 
   const logOut = () => {
@@ -35,6 +45,12 @@ export const useMockedLogin = () => {
     clearLocalHasSession();
   };
 
+  /**
+   * useLoggedInQuery is a hook that checks the url query params for loggedIn=true or loggedIn=false
+   * and sets the local storage and redux store accordingly
+   * @param {*} location - the location object from react router
+   * @returns {void}
+   */
   const useLoggedInQuery = location => {
     useEffect(
       () => {

src/applications/_mock-form-ae-design-patterns/mocks/script/drupal-vamc-data/mockLocalDSOT.js

@@ -4,13 +4,30 @@ const dfns = require('date-fns');
 const fetch = require('node-fetch');
 const { warn, error, success, debug } = require('../utils');
 
-const cwd = process.cwd();
+const findBuildRoot = startDir => {
+  let currentDir = startDir;
 
-const buildLocalhostPath = './build/localhost/data/cms/vamc-ehr.json';
+  // Walk up until we find .build or hit the root
+  while (currentDir !== path.parse(currentDir).root) {
+    const buildPath = path.join(currentDir, 'build');
 
-const urlForStagingVamcDSOT = 'https://staging.va.gov/data/cms/vamc-ehr.json';
-const pathToSaveData = path.join(cwd, buildLocalhostPath);
+    if (fs.existsSync(buildPath)) {
+      return currentDir;
+    }
+
+    currentDir = path.dirname(currentDir);
+  }
 
+  throw new Error('Could not find .build directory in parent directories');
+};
+
+const buildRoot = findBuildRoot(__dirname);
+const pathToSaveData = path.join(
+  buildRoot,
+  'build/localhost/data/cms/vamc-ehr.json',
+);
+
+const urlForStagingVamcDSOT = 'https://staging.va.gov/data/cms/vamc-ehr.json';
 const amount = 14;
 const twoWeeksAgo = dfns.subDays(new Date(), amount);
 

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

@@ -48,8 +48,8 @@ const responses = {
           generateFeatureToggles({
             aedpVADX: true,
             aedpPrefill: true,
-            coeAccess: false,
-            profileUseExperimental: false,
+            coeAccess: true,
+            profileUseExperimental: true,
           }),
         ),
       secondsOfDelay,

src/applications/_mock-form-ae-design-patterns/nodemon.json

@@ -0,0 +1,9 @@
+{
+  "watch": [
+    "src/applications/_mock-form-ae-design-patterns/vadx/server/**/*.js",
+    "src/applications/_mock-form-ae-design-patterns/mocks/**/*.js"
+  ],
+  "ignore": ["*.spec.js"],
+  "ext": "js,json",
+  "delay": "1000"
+}

src/applications/_mock-form-ae-design-patterns/package.json

@@ -2,7 +2,9 @@
     "name": "@department-of-veterans-affairs/applications-mock-form-ae-design-patterns",
     "version": "1.0.0",
     "scripts": {
-        "demo": "echo DEMOING $npm_package_name v $npm_package_version with WORKSPACES"
+        "demo": "echo DEMOING $npm_package_name v $npm_package_version with WORKSPACES",
+        "vadx": "node vadx/server/index.js --entry='mock-form-ae-design-patterns'",
+        "vadx:dev": "nodemon vadx/server/index.js"
     },
     "licence": "MIT",
     "dependencies": {},

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

@@ -15,13 +15,12 @@ import { VIEW_FIELD_SCHEMA } from 'applications/_mock-form-ae-design-patterns/ut
 import { ContactInformationInfoSection } from '../components/ContactInfo';
 import VeteranProfileInformation from '../components/VeteranProfileInformation';
 import IntroductionPage from '../containers/IntroductionPage';
-import manifest from '../manifest.json';
 import { definitions } from './schemaImports';
 import profileContactInfo from './profileContactInfo';
 import ReviewPage from '../../pages/ReviewPage';
 
 const formConfig = {
-  rootUrl: manifest.rootUrl,
+  rootUrl: '/mock-form-ae-design-patterns',
   urlPrefix: '/2/task-gray/',
   // submitUrl: `${environment.API_URL}/v0/coe/submit_coe_claim`,
   // transformForSubmit: customCOEsubmit,

src/applications/_mock-form-ae-design-patterns/routes.jsx

@@ -28,9 +28,11 @@ const Form1990Entry = lazy(() =>
 
 import { plugin } from './shared/components/VADXPlugin';
 
-const DevPanel = lazy(() => import('./vadx/app/pages/DevPanel'));
-
 import { VADX } from './vadx';
+import { Debug } from './vadx/app/pages/debug/Debug';
+import { withLayout } from './vadx/app/layout/withLayout';
+import { Servers } from './vadx/app/pages/servers/Servers';
+import { FeatureToggles } from './vadx/app/pages/feature-toggles/FeatureToggles';
 
 // Higher order component to wrap routes in the PatternConfigProvider and other common components
 const routeHoc = Component => props => (
@@ -118,8 +120,16 @@ const routes = [
   ...pattern1Routes,
   ...pattern2Routes,
   {
-    path: '/dev',
-    component: routeHoc(DevPanel),
+    path: '/vadx',
+    component: routeHoc(withLayout(Servers)),
+  },
+  {
+    path: '/vadx/debug',
+    component: routeHoc(withLayout(Debug)),
+  },
+  {
+    path: '/vadx/feature-toggles',
+    component: routeHoc(withLayout(FeatureToggles)),
   },
   {
     path: '*',