Authed patterns/aw/159/update prefill add 22 1990 form task gray

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

@@ -7,7 +7,7 @@ import routes from './routes';
 import reducer from './reducers';
 import manifest from './manifest.json';
 
-import coeReducer from './patterns/pattern2/TaskRed/shared/reducers';
+import coeReducer from './patterns/pattern2/TaskGray/shared/reducers';
 
 const combinedReducers = {
   ...reducer,

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

@@ -5,6 +5,13 @@ const { snakeCase } = require('lodash');
 const profileToggles = {
   profileUseExperimental: true,
   coeAccess: true,
+  showEduBenefits1990Wizard: true,
+  showEduBenefits0994Wizard: true,
+  showEduBenefits1995Wizard: true,
+  showEduBenefits5495Wizard: true,
+  showEduBenefits1990nWizard: true,
+  showEduBenefits5490Wizard: true,
+  showEduBenefits1990eWizard: true,
 };
 
 const makeAllTogglesTrue = toggles => {

src/applications/_mock-form-ae-design-patterns/mocks/endpoints/in-progress-forms/22-1990.js

@@ -0,0 +1,41 @@
+const responses = {
+  FORM_22_1990: {
+    minimal: {
+      formData: {
+        veteranFullName: {
+          first: 'Mitchell',
+          middle: 'George',
+          last: 'Jenkins',
+        },
+        gender: 'M',
+        veteranDateOfBirth: '1956-07-10',
+        veteranSocialSecurityNumber: '796123607',
+        homePhone: '8015551217',
+        mobilePhone: '6493315849',
+        veteranAddress: {
+          street: '419 LaPorte Ave',
+          street2: 'Apt C',
+          city: 'Fort Collins',
+          state: 'CO',
+          country: 'USA',
+          postalCode: '80521',
+        },
+        toursOfDuty: [
+          {
+            serviceBranch: 'Space Force',
+            dateRange: {
+              from: '2021-01-01',
+              to: '2023-01-01',
+            },
+          },
+        ],
+      },
+      metadata: {
+        version: 0,
+        prefill: true,
+        returnUrl: '/applicant/information',
+      },
+    },
+  },
+};
+module.exports = responses;

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

@@ -28,6 +28,7 @@ const baseUserResponses = {
           'form-save-in-progress',
           'form-prefill',
           'form526',
+          'evss-claims',
           'user-profile',
           'appeals-status',
           'id-card',
@@ -55,22 +56,22 @@ const baseUserResponses = {
           verified: true,
           signIn: {
             serviceName: 'idme',
-            accountType: 'N/A',
+            authBroker: 'sis',
+            clientId: 'vaweb',
           },
           authnContext: 'http://idmanagement.gov/ns/assurance/loa/3',
           claims: {
+            appeals: true,
             ch33BankAccounts: true,
+            coe: true,
             communicationPreferences: true,
             connectedApps: true,
+            medicalCopays: true,
             militaryHistory: true,
             paymentHistory: true,
             personalInformation: true,
             ratingInfo: true,
-            appeals: true,
-            medicalCopays: true,
-            coe: true,
           },
-          edipi: 3332224445,
         },
         vaProfile: {
           status: 'OK',
@@ -103,9 +104,39 @@ const baseUserResponses = {
         },
         inProgressForms: [],
         prefillsAvailable: [
-          '21-686C',
           'FORM-MOCK-AE-DESIGN-PATTERNS',
+          '21-686C',
+          '40-10007',
+          '0873',
+          '22-1990',
+          '22-1990N',
+          '22-1990E',
+          '22-1990EMEB',
+          '22-1995',
+          '22-5490',
+          '22-5490E',
+          '22-5495',
+          '22-0993',
+          '22-0994',
+          'FEEDBACK-TOOL',
+          '22-10203',
+          '22-1990S',
+          '22-1990EZ',
+          '21-526EZ',
+          '1010ez',
+          '10-10EZR',
+          '21P-530',
+          '21P-527EZ',
+          '686C-674',
+          '20-0995',
+          '20-0996',
+          '10182',
+          'MDOT',
+          '5655',
+          '28-8832',
+          '28-1900',
           '26-1880',
+          '26-4555',
         ],
         vet360ContactInformation: {
           email: {

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

@@ -19,6 +19,7 @@ const {
 const mockFormAeDesignPatterns = require('./endpoints/in-progress-forms/mock-form-ae-design-patterns');
 
 const prefill261880 = require('./endpoints/in-progress-forms/26-1880');
+const { FORM_22_1990 } = require('./endpoints/in-progress-forms/22-1990');
 
 // transaction status that is used for address, email, phone number update flows
 const {
@@ -70,6 +71,11 @@ const responses = {
     delaySingleResponse(() => res.json(prefill261880.response), secondsOfDelay);
   },
 
+  'GET /v0/in_progress_forms/22-1990': (_req, res) => {
+    const secondsOfDelay = 1;
+    delaySingleResponse(() => res.json(FORM_22_1990.minimal), secondsOfDelay);
+  },
+
   'PUT /v0/in_progress_forms/:id': (req, res) => {
     const secondsOfDelay = 1;
     delaySingleResponse(

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

@@ -29,7 +29,7 @@ import { fileUpload } from './chapters/documents';
 
 const formConfig = {
   rootUrl: manifest.rootUrl,
-  urlPrefix: '/2/task-red/',
+  urlPrefix: '/2/task-gray/',
   submitUrl: `${environment.API_URL}/v0/coe/submit_coe_claim`,
   transformForSubmit: customCOEsubmit,
   trackingPrefix: '26-1880-',

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/Form1990App.jsx

@@ -0,0 +1,36 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import RoutedSavableApp from 'platform/forms/save-in-progress/RoutedSavableApp';
+import formConfig from './config/form';
+
+export default function Form1990Entry({ location, children }) {
+  /* This useEffect is to add custom class to remove the extra margin-top for radio buttons
+   in benefits-selection and review-and-submit pages. */
+  useEffect(
+    () => {
+      const fieldset = document.querySelector('body');
+      if (
+        location.pathname.includes('benefits-selection') ||
+        location.pathname === '/review-and-submit'
+      ) {
+        fieldset.classList.add('fieldset-wrapper');
+      } else {
+        fieldset.classList.remove('fieldset-wrapper');
+      }
+    },
+    [location.pathname],
+  );
+  return (
+    <RoutedSavableApp formConfig={formConfig} currentLocation={location}>
+      {children}
+    </RoutedSavableApp>
+  );
+}
+
+Form1990Entry.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+  location: PropTypes.object,
+};

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/components/ConfirmationPageContent.jsx

@@ -0,0 +1,168 @@
+import React, { useState } from 'react';
+import moment from 'moment';
+
+export function ConfirmationPageContent({
+  additionalGuidance,
+  afterTitleContent,
+  claimInfoListItems,
+  displayDefaultClaimList = true,
+  docExplanation,
+  docExplanationHeader,
+  formId,
+  formName = 'Education benefit application',
+  guidance = (
+    <>
+      <h3 className="confirmation-guidance-heading vads-u-font-size--h4">
+        What happens after I apply?
+      </h3>
+      <p className="confirmation-guidance-message">
+        We usually decide on applications within 30 days.
+      </p>
+      <p className="confirmation-guidance-message">
+        You’ll get a Certificate of Eligibility (COE) or decision letter in the
+        mail. If we’ve approved your application, you can bring the COE to the
+        VA certifying official at your school.
+      </p>
+      <p>
+        <a href="/education/after-you-apply/">
+          Learn more about what happens after you apply
+        </a>
+      </p>
+    </>
+  ),
+  name,
+  printHeader = 'Update your education benefits',
+  submission,
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+  const response = submission.response ? submission.response.attributes : {};
+  const displayFormId = formId[0] === '2' ? `Form ${formId}` : formId;
+
+  const claimList = () => {
+    return [
+      <li key="confirmation-number">
+        <strong>Confirmation number</strong>
+        <br />
+        <span>{response.confirmationNumber}</span>
+      </li>,
+      <li key="date-received">
+        <strong>Date received</strong>
+        <br />
+        <span>{moment(submission.submittedAt).format('MMM D, YYYY')}</span>
+      </li>,
+      <li key="regional-office">
+        <strong>Your claim was sent to</strong>
+        <br />
+        <address className="schemaform-address-view">
+          {response.regionalOffice}
+        </address>
+      </li>,
+    ];
+  };
+
+  return (
+    <div>
+      <>
+        <div className="print-only">
+          <img src="/img/design/logo/va-logo.png" alt="VA logo" width="300" />
+          <h1 className="vads-u-font-size--h3 vads-u-margin-top--3">
+            {printHeader}
+          </h1>
+          <span>{displayFormId}</span>
+        </div>
+        <h2 className="confirmation-page-title screen-only vads-u-font-size--h3">
+          We've received your application.
+        </h2>
+        <h4 className="print-only">We've received your application.</h4>
+        <p>
+          We usually process claims within <strong>30 days</strong>.<br />
+          We may contact you if we need more information or documents.
+        </p>
+        <p>
+          <button
+            className="usa-button-primary screen-only"
+            onClick={() => window.print()}
+          >
+            Print this page
+          </button>
+        </p>
+      </>
+
+      {afterTitleContent}
+
+      <div className="inset">
+        <h3 className="vads-u-margin-top--0 confirmation-header vads-u-font-size--h4">
+          {formName}{' '}
+          <span className="vads-u-margin--0 vads-u-display--inline-block">
+            ({displayFormId})
+          </span>
+        </h3>
+        {name && (
+          <span className="applicant-name">
+            for {name.first}
+            {name.middle && ` ${name.middle}`}
+            {name.last && ` ${name.last}`}
+            {name.suffix && ` ${name.suffix}`}
+          </span>
+        )}
+
+        <ul className="claim-list">
+          {claimInfoListItems}
+          {displayDefaultClaimList && claimList()}
+        </ul>
+      </div>
+
+      {docExplanation &&
+        docExplanationHeader && (
+          <div
+            id="collapsiblePanel"
+            className="usa-accordion-bordered screen-only"
+          >
+            {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
+            <ul className="usa-unstyled-list" role="list">
+              <li>
+                <div className="accordion-header clearfix">
+                  <button
+                    className="usa-button-unstyled doc-explanation"
+                    aria-expanded={isExpanded ? 'true' : 'false'}
+                    aria-controls="collapsible-document-explanation"
+                    onClick={() => setIsExpanded(!isExpanded)}
+                  >
+                    {docExplanationHeader}
+                  </button>
+                </div>
+
+                {isExpanded && (
+                  <div id="collapsible-document-explanation">
+                    <div className="usa-accordion-content" aria-hidden="false">
+                      {docExplanation}
+                    </div>
+                  </div>
+                )}
+              </li>
+            </ul>
+          </div>
+        )}
+      <div className="confirmation-guidance-container">
+        {additionalGuidance}
+        {guidance}
+        <h3 className="confirmation-guidance-heading vads-u-border-bottom--3px vads-u-border-color--primary vads-u-line-height--4 vads-u-font-size--h4">
+          Need help?
+        </h3>
+
+        <p className="confirmation-guidance-message">
+          If you have questions, call 1-888-GI-BILL-1 (
+          <va-telephone contact="8884424551" />
+          ), Monday &#8211; Friday, 8:00 a.m. &#8211; 7:00 p.m. ET.
+        </p>
+      </div>
+      <div className="form-progress-buttons schemaform-back-buttons">
+        <a href="/">
+          <button type="button" className="usa-button-primary">
+            Go back to VA.gov
+          </button>
+        </a>
+      </div>
+    </div>
+  );
+}

src/applications/_mock-form-ae-design-patterns/patterns/pattern2/TaskOrange/components/EducationView.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { formatReviewDate } from 'platform/forms-system/src/js/helpers';
+
+export default function EducationView({ formData }) {
+  let from = '';
+  let to = '';
+  if (formData.dateRange) {
+    from = formatReviewDate(formData.dateRange.from);
+    to = formatReviewDate(formData.dateRange.to);
+  }
+
+  return (
+    <div>
+      <strong>{formData.name}</strong>
+      <br />
+      {from} &mdash; {to}
+    </div>
+  );
+}