[VA-IIR 1426] set up initial form app for new version of 28-1900 form

src/applications/new-28-1900/app-entry.jsx

@@ -0,0 +1,15 @@
+import '@department-of-veterans-affairs/platform-polyfills';
+import './sass/new-28-1900-chapter-31.scss';
+
+import { startAppFromIndex } from '@department-of-veterans-affairs/platform-startup/exports';
+
+import routes from './routes';
+import reducer from './reducers';
+import manifest from './manifest.json';
+
+startAppFromIndex({
+  entryName: manifest.entryName,
+  url: manifest.rootUrl,
+  reducer,
+  routes,
+});

src/applications/new-28-1900/config/form.js

@@ -0,0 +1,158 @@
+import footerContent from 'platform/forms/components/FormFooter';
+import { VA_FORM_IDS } from 'platform/forms/constants';
+import { TITLE, SUBTITLE } from '../constants';
+import manifest from '../manifest.json';
+import IntroductionPage from '../containers/IntroductionPage';
+import ConfirmationPage from '../containers/ConfirmationPage';
+
+// TODO: We want to source these from current, common definitions
+import nameAndDateOfBirth from '../pages/nameAndDateOfBirth';
+import identificationInformation from '../pages/identificationInformation';
+import mailingAddress from '../pages/mailingAddress';
+import phoneAndEmailAddress from '../pages/phoneAndEmailAddress';
+
+/** @type {FormConfig} */
+const formConfig = {
+  rootUrl: manifest.rootUrl,
+  urlPrefix: '/',
+  // TODO: Figure out actual API and structure, create submit function, create any transformers, vets-json schema
+  submitUrl: '/v0/api',
+  submit: () =>
+    Promise.resolve({ attributes: { confirmationNumber: '123123123' } }),
+  trackingPrefix: 'new-careers-employment-28-1900-',
+  introduction: IntroductionPage,
+  confirmation: ConfirmationPage,
+  dev: {
+    showNavLinks: true,
+    collapsibleNavLinks: true,
+  },
+  formId: VA_FORM_IDS.FORM_28_1900,
+  // TODO: Set up save in progress/prefill
+  saveInProgress: {
+    // messages: {
+    //   inProgress: 'Your VR&E Chapter 31 benefits application application (28-1900) is in progress.',
+    //   expired: 'Your saved VR&E Chapter 31 benefits application application (28-1900) has expired. If you want to apply for VR&E Chapter 31 benefits application, please start a new application.',
+    //   saved: 'Your VR&E Chapter 31 benefits application application has been saved.',
+    // },
+  },
+  version: 0,
+  prefillEnabled: true,
+  savedFormMessages: {
+    notFound:
+      'Please start over to apply for VR&E Chapter 31 benefits application.',
+    noAuth:
+      'Please sign in again to continue your application for VR&E Chapter 31 benefits application.',
+  },
+  title: TITLE,
+  subTitle: SUBTITLE,
+  defaultDefinitions: {},
+  chapters: {
+    personalInformationChapter: {
+      title: 'Your personal information',
+      pages: {
+        nameAndDateOfBirth: {
+          path: 'name-and-date-of-birth',
+          title: 'Name and date of birth',
+          uiSchema: nameAndDateOfBirth.uiSchema,
+          schema: nameAndDateOfBirth.schema,
+        },
+        identificationInformation: {
+          path: 'identification-information',
+          title: 'Identification information',
+          uiSchema: identificationInformation.uiSchema,
+          schema: identificationInformation.schema,
+        },
+      },
+    },
+    mailingAddressChapter: {
+      title: 'Mailing address',
+      pages: {
+        mailingAddress: {
+          path: 'mailing-address',
+          title: 'Mailing address',
+          uiSchema: mailingAddress.uiSchema,
+          schema: mailingAddress.schema,
+        },
+      },
+    },
+    contactInformationChapter: {
+      title: 'Contact information',
+      pages: {
+        phoneAndEmailAddress: {
+          path: 'phone-and-email-address',
+          title: 'Phone and email address',
+          uiSchema: phoneAndEmailAddress.uiSchema,
+          schema: phoneAndEmailAddress.schema,
+        },
+      },
+    },
+
+    // TODO: Common definitions needed
+    // veteranInformationChapter: {
+    //   title: 'Your Information',
+    //   pages: {
+    //     personalInformation: {
+    //       path: 'personal-information',
+    //       title: 'Personal Information',
+    //       schema: {
+    //         type: 'object',
+    //         required: ['firstName', 'lastName', 'dateOfBirth'],
+    //         properties: {
+    //           firstName: { type: 'string' },
+    //           middleName: { type: 'string' },
+    //           lastName: { type: 'string' },
+    //           suffix: {
+    //             type: 'string',
+    //             enum: ['Jr.', 'Sr.', 'II', 'III', 'IV', ''],
+    //           },
+    //           dateOfBirth: { type: 'string', format: 'date' },
+    //         },
+    //       },
+    // uiSchema: {
+    //         firstName: {
+    //           'ui:title': 'First name',
+    //           'ui:required': () => true,
+    //           'ui:errorMessages': {
+    //             required: 'Please enter your first name.',
+    //           },
+    //         },
+    //         middleName: {
+    //           'ui:title': 'Middle name',
+    //         },
+    //         lastName: {
+    //           'ui:title': 'Last name',
+    //           'ui:required': () => true,
+    //           'ui:errorMessages': {
+    //             required: 'Please enter your last name.',
+    //           },
+    //         },
+    //         suffix: {
+    //           'ui:title': 'Suffix',
+    //           'ui:options': {
+    //             labels: {
+    //               'Jr.': 'Jr.',
+    //               'Sr.': 'Sr.',
+    //               'II': 'II',
+    //               'III': 'III',
+    //               'IV': 'IV',
+    //             },
+    //           },
+    //         },
+    //         dateOfBirth: {
+    //           'ui:title': 'Date of birth',
+    //           'ui:widget': 'date',
+    //           'ui:required': () => true,
+    //           'ui:errorMessages': {
+    //             required: 'Please provide your date of birth.',
+    //           },
+    //         },
+    //       },
+    //     },
+    //   },
+    // },
+  },
+  // getHelp,
+  footerContent,
+};
+
+export default formConfig;

src/applications/new-28-1900/constants.js

@@ -0,0 +1,3 @@
+export const TITLE = '28-1900 Veteran Readiness';
+export const SUBTITLE =
+  'VR&E Chapter 31 benefits application (VA Form 28-1900)';

src/applications/new-28-1900/containers/App.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import RoutedSavableApp from 'platform/forms/save-in-progress/RoutedSavableApp';
+import formConfig from '../config/form';
+
+export default function App({ location, children }) {
+  return (
+    <RoutedSavableApp formConfig={formConfig} currentLocation={location}>
+      {children}
+    </RoutedSavableApp>
+  );
+}

src/applications/new-28-1900/containers/ConfirmationPage.jsx

@@ -0,0 +1,100 @@
+import React, { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import { format, isValid } from 'date-fns';
+import { useSelector } from 'react-redux';
+import { scrollTo, waitForRenderThenFocus } from 'platform/utilities/ui';
+
+export const ConfirmationPage = () => {
+  const alertRef = useRef(null);
+  const form = useSelector(state => state.form || {});
+  const { submission, formId, data = {} } = form;
+  const { fullName } = data;
+  const submitDate = submission?.timestamp;
+  const confirmationNumber = submission?.response?.confirmationNumber;
+
+  useEffect(
+    () => {
+      if (alertRef?.current) {
+        scrollTo('topScrollElement');
+        waitForRenderThenFocus('h2', alertRef.current);
+      }
+    },
+    [alertRef],
+  );
+
+  return (
+    <div>
+      <div className="print-only">
+        <img
+          src="https://www.va.gov/img/design/logo/logo-black-and-white.png"
+          alt="VA logo"
+          width="300"
+        />
+      </div>
+
+      <va-alert status="success" ref={alertRef}>
+        <h2 slot="headline">Your application has been submitted</h2>
+      </va-alert>
+
+      <p>We may contact you for more information or documents.</p>
+      <p className="screen-only">Please print this page for your records.</p>
+      <div className="inset">
+        <h3 className="vads-u-margin-top--0 vads-u-font-size--h4">
+          28-1900 Veteran Readiness Claim{' '}
+          <span className="vads-u-font-weight--normal">(Form {formId})</span>
+        </h3>
+        {fullName ? (
+          <span>
+            for {fullName.first} {fullName.middle} {fullName.last}
+            {fullName.suffix ? `, ${fullName.suffix}` : null}
+          </span>
+        ) : null}
+
+        {confirmationNumber ? (
+          <>
+            <h4>Confirmation number</h4>
+            <p>{confirmationNumber}</p>
+          </>
+        ) : null}
+
+        {isValid(submitDate) ? (
+          <p>
+            <strong>Date submitted</strong>
+            <br />
+            <span>{format(submitDate, 'MMMM d, yyyy')}</span>
+          </p>
+        ) : null}
+
+        <va-button onClick={window.print} text="Print this for your records" />
+      </div>
+      <a className="vads-c-action-link--green vads-u-margin-bottom--4" href="/">
+        Go back to VA.gov
+      </a>
+
+      {/* <div className="help-footer-box">
+        <h2 className="help-heading">Need help?</h2>
+        <GetFormHelp />
+      </div> */}
+    </div>
+  );
+};
+
+ConfirmationPage.propTypes = {
+  form: PropTypes.shape({
+    data: PropTypes.shape({
+      fullName: {
+        first: PropTypes.string,
+        middle: PropTypes.string,
+        last: PropTypes.string,
+        suffix: PropTypes.string,
+      },
+    }),
+    formId: PropTypes.string,
+    submission: PropTypes.shape({
+      timestamp: PropTypes.string,
+    }),
+  }),
+  name: PropTypes.string,
+};
+
+export default ConfirmationPage;