Adds initial mhv-supply-reordering application

src/applications/mhv-supply-reordering/README.md

@@ -0,0 +1,106 @@
+# mhv-supply-reordering
+
+## Background Info
+
+About: This app provides an interface to re-order Hearing Aid and Sleep Apnea accessories
+Slack Channel: [#va-cto-supply-reordering](https://dsva.slack.com/archives/C05DFSM57FW/p1689711688225089)
+
+## App
+
+Form app generated with `yarn app:new`. Changes to the following files were reverted, since `VA_FORM_IDS.FORM_VA_2346A` already exists.
+
+- `src/platform/forms/constants.js`
+- `src/platform/forms/tests/forms.unit.spec.js`
+
+## Quick start to get running locally
+
+Before you get started check [this page](https://depo-platform-documentation.scrollhelp.site/developer-docs/setting-up-your-local-frontend-environment) first to make sure you are setup to use the correct version of Node and Yarn.
+
+- clone vets-website repo `git clone [email protected]:department-of-veterans-affairs/vets-website.git`
+- run `yarn install`
+- turn on local mocks `yarn mock-api --responses src/applications/mhv-supply-reordering/mocks/index.js`
+- start app `yarn watch --env entry=mhv-supply-reordering`
+- Run this in your browser console to simulate being logged in `localStorage.setItem('hasSession', true);`
+- visit the app: `http://localhost:3001/my-health/order-supplies`
+
+Note: The application fetches supply data from `/v0/in_progress_forms/mdot`. This endpoint is mocked in the local development environment.
+
+## Running tests
+
+Unit tests can be run using this command: `yarn test:unit --app-folder mhv-supply-reordering`. To get detailed errors, run this command with `--log-level=error`. To get coverage reports run this command `yarn test:unit --app-folder mhv-supply-reordering --coverage --coverage-html`. View the report at `/coverage/index.html`
+
+Cypress tests can be run with the GUI using this command: `yarn cy:open`. From there you can filter by `mhv-supply-reordering` to run end to end tests for this app.
+
+Run Cypress from command line:
+
+- Run all `yarn cy:run --spec "src/applications/mhv-supply-reordering/**/**/*"`
+- Specify browser `-b electron`
+
+## VA Forms - Web Component Fields and Patterns
+
+[[docs](https://depo-platform-documentation.scrollhelp.site/developer-docs/va-forms-library-web-component-fields-and-patterns)]
+
+[[examples](https://staging.va.gov/mock-form-patterns/introduction)]
+
+A web-component-field is a design system web component for use in forms. These can be found at `src/platform/forms-system/src/js/web-component-fields`.
+
+A web-component-pattern is a group of web-component-fields that can span one or more pages (e.g. - a multi-page form). These can be found at `src/platform/forms-system/src/js/web-component-patterns`.
+
+## Form Flow
+
+- IntroductionPage
+- SelectSupplies
+- ContactInformation (optionally: EditEmail, EditAddress)
+- ReviewPage
+- ConfirmationPage
+
+## API Responses
+
+[[mocker-api](https://github.com/jaywcjlove/mocker-api/tree/v2.9.0?tab=readme-ov-file#usage)]
+
+[[vets-api OpenAPI documentation](https://department-of-veterans-affairs.github.io/va-digital-services-platform-docs/api-reference/#/in_progress_forms)]
+
+`GET /v0/in_progress_forms/MDOT` returns the following... (note the lack of a `data` property)
+
+```json
+{
+  "formData": {
+    "fullName": {},
+    "permanentAddress": {},
+    "temporaryAddress": {},
+    "ssnLastFour": "",
+    "gender": "",
+    "vetEmail": "",
+    "dateOfBirth": "",
+    "eligibility": {},
+    "supplies": []
+  },
+  "metadata": {
+    "version": 0,
+    "prefill": true,
+    "returnUrl": ""
+  }
+}
+```
+
+When requesting `GET /v0/in_progress_forms/MDOT`, the MDOT client in vets-api will make a request to the system of record for veteran details and supplies available to the veteran. See `V0::InProgressFormsController.camelized_prefill_for_user` and `FormProfiles::MDOT#prefill`. On the front-end, test against the possible responses for `MDOT::Client.new(user).get_supplies` which are mapped to `mdot.exceptions` values in `vets-api/config/locales/exceptions.en.yml` and then passed along in the response. Also, see `vets-api/spec/support/vcr_cassettes/mdot/get_supplies*.yml`.
+
+## Dynamic Forms
+
+[[using update and replace schema funcs](https://depo-platform-documentation.scrollhelp.site/developer-docs/va-forms-library-how-to-use-updateschema-and-repla)]
+
+see `src/applications/disability-benefits/all-claims/pages/toxicExposure/toxicExposureConditions.js` for an example.
+
+## Device Types
+
+How do we access other device types? (e.g. - assistive devices, nebulizers)... It sounds like these are included in the request for supplies.
+
+(I believe) The `productGroup` property of a supply can be one of the following values: `['accessories', 'batteries', 'apnea']`.
+
+## Thoughts & Improvements
+
+Should there be a `GET /v0/mdot/supplies` endpoint that returns available supplies? Current implementation of fetching supplies from `/v0/in_progres_forms/MDOT` feels strange.
+
+Need to understand the relationship between backend forms and frontend forms.
+
+Just build the frontend.

src/applications/mhv-supply-reordering/actions/index.js

@@ -0,0 +1,13 @@
+import {
+  GET_MDOT_IN_PROGRESS_FORM_STARTED,
+  GET_MDOT_IN_PROGRESS_FORM_SUCCEEDED,
+  GET_MDOT_IN_PROGRESS_FORM_FAILED,
+  getMdotInProgressForm,
+} from './mdotInProgressForm';
+
+export {
+  GET_MDOT_IN_PROGRESS_FORM_STARTED,
+  GET_MDOT_IN_PROGRESS_FORM_SUCCEEDED,
+  GET_MDOT_IN_PROGRESS_FORM_FAILED,
+  getMdotInProgressForm,
+};

src/applications/mhv-supply-reordering/actions/mdotInProgressForm.js

@@ -0,0 +1,35 @@
+import { apiRequest } from 'platform/utilities/api';
+
+export const GET_MDOT_IN_PROGRESS_FORM_STARTED =
+  'GET_MDOT_IN_PROGRESS_FORM_STARTED';
+export const GET_MDOT_IN_PROGRESS_FORM_SUCCEEDED =
+  'GET_MDOT_IN_PROGRESS_FORM_SUCCEEDED';
+export const GET_MDOT_IN_PROGRESS_FORM_FAILED =
+  'GET_MDOT_IN_PROGRESS_FORM_FAILED';
+
+const getMdotInProgressFormStarted = () => ({
+  type: GET_MDOT_IN_PROGRESS_FORM_STARTED,
+});
+
+const getMdotInProgressFormSucceeded = payload => ({
+  type: GET_MDOT_IN_PROGRESS_FORM_SUCCEEDED,
+  payload,
+});
+
+const getMdotInProgressFormFailed = payload => ({
+  type: GET_MDOT_IN_PROGRESS_FORM_FAILED,
+  payload,
+});
+
+const MDOT_IN_PROGRESS_FORM_PATH = '/in_progress_forms/MDOT';
+
+export const getMdotInProgressForm = () => async dispatch => {
+  await dispatch(getMdotInProgressFormStarted());
+  return apiRequest(MDOT_IN_PROGRESS_FORM_PATH)
+    .then(payload => {
+      return dispatch(getMdotInProgressFormSucceeded(payload));
+    })
+    .catch(err => {
+      return dispatch(getMdotInProgressFormFailed(err));
+    });
+};

src/applications/mhv-supply-reordering/app-entry.jsx

@@ -0,0 +1,15 @@
+import '@department-of-veterans-affairs/platform-polyfills';
+import './sass/mhv-supply-reordering.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/mhv-supply-reordering/components/Breadcrumbs.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { VaBreadcrumbs } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
+import manifest from '../manifest.json';
+
+const breadcrumbList = [
+  {
+    href: '/',
+    label: 'VA.gov Home',
+  },
+  {
+    href: '/my-health',
+    label: 'Health care',
+  },
+  {
+    href: manifest.rootUrl,
+    label: manifest.appName,
+  },
+];
+
+const Breadcrumbs = () => <VaBreadcrumbs breadcrumbList={breadcrumbList} />;
+
+export default Breadcrumbs;

src/applications/mhv-supply-reordering/components/DlcEmailLink.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { DLC_EMAIL } from '../constants';
+
+const DlcEmailLink = () => <a href={`mailto:${DLC_EMAIL}`}>{DLC_EMAIL}</a>;
+
+export default DlcEmailLink;

src/applications/mhv-supply-reordering/components/DlcTelephoneLink.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { CONTACTS } from '@department-of-veterans-affairs/component-library/contacts';
+import { DLC_TELEPHONE } from '../constants';
+
+const DlcTelephoneLink = () => (
+  <>
+    <va-telephone contact={DLC_TELEPHONE} /> (
+    <va-telephone contact={CONTACTS['711']} tty />)
+  </>
+);
+
+export default DlcTelephoneLink;