Travel Pay / flesh out SMOC introduction page

src/applications/travel-pay/README.md

@@ -0,0 +1,67 @@
+# Travel Pay
+
+<!-- TOC -->
+
+- [Travel Pay](#travel-pay)
+  - [Test Users](#test-users)
+  - [Local FE development only](#local-fe-development-only)
+    - [Start mock API](#start-mock-api)
+      - [Start the API](#start-the-api)
+      - [Test it](#test-it)
+    - [Start the website](#start-the-website)
+      - [Build](#build)
+      - [Run](#run)
+      - [Trick user session](#trick-user-session)
+      - [Things of note](#things-of-note)
+
+<!-- /TOC -->
+
+## Test users
+
+Users should have a contact in Dynamics and travel related claims already in BTSSS in order to show their statuses.
+
+Staging test users are laid out in [this spreadsheet](https://docs.google.com/spreadsheets/d/1hpFNNk1Iv4X1W8C9dc13KA73V1mhI1zZ).
+
+## Local FE development (non-api)
+
+### Start mock API
+
+#### Start the API
+
+Open a terminal and start the the mock api
+
+```bash
+yarn mock-api --responses src/applications/travel-pay/services/mocks/index.js
+```
+
+#### Test it
+
+Open the mock api url, and visit `/v0/user` to test it. You should see a JSON response of the user object.
+
+### Start the website
+
+#### Build
+
+Since we are running the site as a static site, build the app in localhost mode. We need build for the locally environment so we can change the API url to the mock api we are running in this instance
+
+```bash
+yarn build:webpack:local --env api="http://localhost:3000"
+```
+
+#### Run
+
+We are going to serve the built website through a static server, defining the PORT as `3001`
+
+```bash
+WEB_PORT=3001 node src/platform/testing/e2e/test-server.js --buildtype=localhost
+```
+
+#### Trick user session
+
+- Force the user to have a session by opening your console and typing `localStorage.setItem('hasSession', true)` into the dev console
+
+#### Things of note
+
+- The main content will never load, that is static content. That is outside the scope of this setup.
+- Sometimes its a refresh or two to get things going
+- If you make changes, you will have to re-build and re-start the server

src/applications/travel-pay/components/Breadcrumbs.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { VaBreadcrumbs } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
-import { useLocation, useHistory, Link } from 'react-router-dom';
+import { useLocation, useHistory, useParams } from 'react-router-dom';
 
 export default function BreadCrumbs() {
   const { pathname } = useLocation();
@@ -9,6 +9,12 @@ export default function BreadCrumbs() {
   const isDetailsPage = pathname.match(uuidPathRegex);
   const isStatusExplainer = pathname.includes('/help');
 
+  const { apptId } = useParams();
+
+  // TODO: this needs work
+  const isSubmitWrapper = pathname.includes(`/file-new-claim/${apptId}`);
+  const isFileClaimExplainerPage = pathname.includes('/file-new-claim');
+
   const breadcrumbList = [
     {
       href: '/',
@@ -35,17 +41,45 @@ export default function BreadCrumbs() {
     });
   }
 
+  if (isFileClaimExplainerPage) {
+    breadcrumbList.push({
+      href: '/file-new-claim',
+      label: 'How to file a travel reimbursement claim',
+      isRouterLink: true,
+    });
+  }
+
+  if (isSubmitWrapper) {
+    breadcrumbList.push({
+      href: `/file-new-claim/${apptId}`,
+      label: 'File a new travel claim',
+      isRouterLink: true,
+    });
+  }
+
   const handleRouteChange = ({ detail }) => {
     const { href } = detail;
     history.push(href);
   };
 
-  return isDetailsPage ? (
-    <div className="travel-pay-breadcrumb-wrapper">
-      {isDetailsPage && <va-icon class="back-arrow" icon="arrow_back" />}
-      <Link className="go-back-link" to="/claims/">
-        Back to your travel reimbursement claims
-      </Link>
+  return isDetailsPage || isSubmitWrapper ? (
+    <div className="vads-u-padding-top--2p5 vads-u-padding-bottom--4">
+      {isDetailsPage && (
+        <va-link
+          data-testid="details-back-link"
+          back
+          href="/my-health/travel-pay/claims/"
+          text="Back to your travel reimbursement claims"
+        />
+      )}
+      {isSubmitWrapper && (
+        <va-link
+          data-testid="submit-back-link"
+          back
+          href={`/my-health/appointments/past/${apptId}`}
+          text="Back to your appointment"
+        />
+      )}
     </div>
   ) : (
     <VaBreadcrumbs

src/applications/travel-pay/components/HelpText.jsx

@@ -1,9 +1,12 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
 
-export default function HelpTextContent() {
-  const BTSSS_PORTAL_URL = 'https://dvagov-btsss.dynamics365portals.us/';
+import {
+  BTSSS_PORTAL_URL,
+  FORM_103542_LINK,
+  FIND_FACILITY_TP_CONTACT_LINK,
+} from '../constants';
 
+export const HelpTextManage = () => {
   return (
     <div>
       <p>
@@ -20,17 +23,57 @@ export default function HelpTextContent() {
         Monday through Friday. Have your claim number ready to share when you
         call.
       </p>
-      <p className="vads-u-margin-top--2">
-        <Link
-          data-testid="status-explainer-link"
-          to={{
-            pathname: '/help',
-          }}
-          className="vads-u-display--flex vads-u-align-items--center"
-        >
-          What does my claim status mean?
-        </Link>
+    </div>
+  );
+};
+
+export const HelpTextGeneral = () => {
+  return (
+    <div>
+      <p>
+        Call the BTSSS call center at <va-telephone contact="8555747292" />.
+        We’re here Monday through Friday, 8:00 a.m. to 8:00 p.m. ET.
+      </p>
+      <p className="vads-u-margin-y--2">
+        Or call your VA health facility’s Beneficiary Travel contact.
+      </p>
+      <va-link
+        href={FIND_FACILITY_TP_CONTACT_LINK}
+        text="Find the travel contact for your facility"
+      />
+    </div>
+  );
+};
+
+export const HelpTextModalities = () => {
+  return (
+    <div>
+      <p>
+        You can still file a claim within 30 days of this appointment these
+        other ways:
       </p>
+      <ul>
+        <li>
+          <p className="vads-u-margin-y--2">
+            Online 24/7 through the Beneficiary Travel Self Service System
+            (BTSSS)
+          </p>
+          <va-link
+            external
+            href={BTSSS_PORTAL_URL}
+            text="File a travel claim online"
+          />
+        </li>
+        <li>
+          <p className="vads-u-margin-y--2">
+            VA Form 10-3542 by mail, fax, email, or in person
+          </p>
+          <va-link
+            href={FORM_103542_LINK}
+            text="Learn more about VA Form 10-3542"
+          />
+        </li>
+      </ul>
     </div>
   );
-}
+};

src/applications/travel-pay/components/TravelClaimDetails.jsx

@@ -9,7 +9,7 @@ import { Element } from 'platform/utilities/scroll';
 import { apiRequest } from '@department-of-veterans-affairs/platform-utilities/api';
 import environment from '@department-of-veterans-affairs/platform-utilities/environment';
 
-import HelpTextContent from './HelpText';
+import { HelpTextManage } from './HelpText';
 import BreadCrumbs from './Breadcrumbs';
 import ClaimDetailsContent from './ClaimDetailsContent';
 
@@ -116,7 +116,7 @@ export default function TravelClaimDetails() {
         </a>
         <va-need-help>
           <div slot="content">
-            <HelpTextContent />
+            <HelpTextManage />
           </div>
         </va-need-help>
       </article>

src/applications/travel-pay/components/submit-flow/pages/AddressPage.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { VaButtonPair } from '@department-of-veterans-affairs/component-library/dist/react-bindings';
+
+const AddressPage = props => {
+  const { handlers } = props;
+  return (
+    <div>
+      <h1>Address page</h1>
+
+      <VaButtonPair
+        class="vads-u-margin-y--2"
+        continue
+        onPrimaryClick={e => handlers.onNext(e)}
+        onSecondaryClick={e => handlers.onBack(e)}
+      />
+    </div>
+  );
+};
+
+export default AddressPage;

src/applications/travel-pay/components/submit-flow/pages/CantFilePage.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+const CantFilePage = props => {
+  const { pageIndex, setPageIndex, setCantFile } = props;
+  const onBack = e => {
+    e.preventDefault();
+    setCantFile(false);
+    setPageIndex(pageIndex);
+  };
+
+  return (
+    <div>
+      <h1 tabIndex="-1">
+        We can’t file this type of travel reimbursement claim
+      </h1>
+      <va-button
+        class="vads-u-margin-y--2"
+        text="Back"
+        onClick={e => onBack(e)}
+      />
+    </div>
+  );
+};
+
+export default CantFilePage;

src/applications/travel-pay/components/submit-flow/pages/ConfirmationPage.jsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const ConfirmationPage = () => {
+  return (
+    <div className="vads-u-margin-bottom--3">
+      <h1 tabIndex="-1">We’re processing your travel reimbursement claim</h1>
+    </div>
+  );
+};
+
+export default ConfirmationPage;

src/applications/travel-pay/components/submit-flow/pages/IntroductionPage.jsx

@@ -0,0 +1,96 @@
+import React from 'react';
+
+import { HelpTextManage } from '../../HelpText';
+import { formatDateTime, getDaysLeft } from '../../../util/dates';
+
+const IntroductionPage = props => {
+  const { appointment, onNext } = props;
+
+  const [formattedDate] = formatDateTime(appointment.vaos.apiData.start);
+  const daysLeft = getDaysLeft(appointment.vaos.apiData.start);
+
+  return (
+    <div>
+      <h1 tabIndex="-1">File a travel reimbursement claim</h1>
+      <p>
+        You have{' '}
+        <strong>{`${daysLeft} ${daysLeft === 1 ? 'day' : 'days'}`}</strong> left
+        to file for your appointment on{' '}
+        <strong>
+          {formattedDate} at {appointment.vaos.apiData.location.attributes.name}
+        </strong>
+        .
+      </p>
+
+      <h2 className="vads-u-font-size--h3 vad-u-margin-top--0">
+        Follow the steps below to apply for beneficiary travel claim.
+      </h2>
+      <va-process-list>
+        <va-process-list-item header="Check your travel reimbursement eligibility">
+          <p>
+            If you’re eligible for health care travel reimbursement and you have
+            your direct deposit set up, you can file a reimbursement claim now.
+          </p>
+          <va-link
+            href="https://www.va.gov/health-care/get-reimbursed-for-travel-pay/#eligibility-for-general-health"
+            text="Travel reimbursement eligibility"
+          />
+        </va-process-list-item>
+        <va-process-list-item header="File your claim">
+          <p>
+            If you’re only claiming mileage, you can file online right now.
+            We’ll just ask you a few questions—you won’t need receipts.
+          </p>
+          <va-link-action
+            onClick={e => onNext(e)}
+            href="javascript0:void"
+            text="File a mileage only claim"
+          />
+
+          <p>
+            If you’re claiming other expenses, like lodging, meals, or tolls,
+            you will need receipts for these expenses. You can file online
+            through the Beneficiary Travel Self Service System (BTSSS), by mail,
+            or in person.
+          </p>
+          <va-link
+            href="https://www.va.gov/health-care/get-reimbursed-for-travel-pay/"
+            text="Learn how to file claims for other expenses"
+          />
+        </va-process-list-item>
+      </va-process-list>
+      <va-alert status="info" visible>
+        <h3 id="set-up-direct-deposit" slot="headline">
+          Set up direct deposit
+        </h3>
+        <p className="vads-u-margin-y--0">
+          You have to set up direct deposit to receive travel reimbursement. If
+          you’ve already done this, no additional steps are needed.
+        </p>
+        <va-link
+          external
+          href="https://www.cep.fsc.va.gov/"
+          text="Set up direct deposit"
+        />
+      </va-alert>
+      <div
+        className="omb-info--container vads-u-margin-y--3"
+        style={{ paddingLeft: '0px' }}
+      >
+        <va-omb-info
+          res-burden={10}
+          omb-number="2900-0798"
+          exp-date="11/30/2027"
+        />
+      </div>
+
+      <va-need-help>
+        <div slot="content">
+          <HelpTextManage />
+        </div>
+      </va-need-help>
+    </div>
+  );
+};
+
+export default IntroductionPage;