Merge branch 'main' into tk/edm-455

babel.config.json

@@ -316,6 +316,7 @@
     "test": {
       "presets": ["@babel/env", "@babel/preset-react"],
       "plugins": [
+        ["babel-plugin-transform-import-ignore", { "patterns": [".scss", ".css", ".sass"] }],
         ["istanbul", { "exclude": ["**/tests/**/*", "**/mocks/**/*"] }],
         "transform-class-properties",
         "dynamic-import-node",

package.json

@@ -151,6 +151,7 @@
     "babel-plugin-lodash": "^3.2.8",
     "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-import-ignore": "^1.1.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "babel-polyfill": "^6.26.0",
     "browserify-zlib": "^0.2.0",

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

@@ -1,47 +1,66 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import RoutedSavableApp from 'platform/forms/save-in-progress/RoutedSavableApp';
-import { VA_FORM_IDS } from '@department-of-veterans-affairs/platform-forms/constants';
-// import manifest from '../manifest.json';
 import { useBrowserMonitoring } from '~/platform/utilities/real-user-monitoring';
 import { useFeatureToggle } from '~/platform/utilities/feature-toggles';
+import manifest from '../manifest.json';
 import formConfig from '../config/form';
 import { DOC_TITLE } from '../config/constants';
 
-function App({ location, children, isLoading, featureToggles, savedForms }) {
+function App({
+  location,
+  children,
+  isLoggedIn,
+  isLoading,
+  vaFileNumber,
+  featureToggles,
+}) {
   const { TOGGLE_NAMES } = useFeatureToggle();
   useBrowserMonitoring({
     location,
     toggleName: TOGGLE_NAMES.disablityBenefitsBrowserMonitoringEnabled,
   });
+
   // Must match the H1
   document.title = DOC_TITLE;
+
   // Handle loading
   if (isLoading || !featureToggles || featureToggles.loading) {
     return <va-loading-indicator message="Loading your information..." />;
   }
 
-  const flipperV2 = featureToggles.vaDependentsV2;
-  const hasV1Form = savedForms.some(
-    form => form.form === VA_FORM_IDS.FORM_21_686C,
-  );
-  const hasV2Form = savedForms.some(
-    form => form.form === VA_FORM_IDS.FORM_21_686CV2,
-  );
-
-  const shouldUseV2 = hasV2Form || (flipperV2 && !hasV1Form);
-  if (!shouldUseV2) {
+  if (!featureToggles.vaDependentsV2) {
     window.location.href = '/view-change-dependents/add-remove-form-21-686c/';
     return <></>;
   }
 
-  return (
+  const content = (
     <article id="form-686c" data-location={`${location?.pathname?.slice(1)}`}>
       <RoutedSavableApp formConfig={formConfig} currentLocation={location}>
         {children}
       </RoutedSavableApp>
     </article>
   );
+
+  // If on intro page, just return
+  if (location.pathname === '/introduction') {
+    return content;
+  }
+
+  // If a user is not logged in OR
+  // a user is logged in, but hasn't gone through va file number validation
+  // redirect them to the introduction page.
+  if (
+    !isLoggedIn ||
+    (isLoggedIn && !vaFileNumber?.hasVaFileNumber?.VALIDVAFILENUMBER)
+  ) {
+    document.location.replace(`${manifest.rootUrl}`);
+    return (
+      <va-loading-indicator message="Redirecting to introduction page..." />
+    );
+  }
+
+  return content;
 }
 
 const mapStateToProps = state => {

src/applications/accredited-representative-portal/app-entry.jsx

@@ -8,7 +8,7 @@ import startReactApp from '@department-of-veterans-affairs/platform-startup/reac
 import { connectFeatureToggle } from 'platform/utilities/feature-toggles';
 
 import './sass/accredited-representative-portal.scss';
-import './sass/POARequestsCard.scss';
+import './sass/POARequestCard.scss';
 import './sass/POARequestDetails.scss';
 
 import manifest from './manifest.json';

src/applications/accredited-representative-portal/components/POARequestCard/POARequestCard.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { differenceInDays } from 'date-fns';
+
+import {
+  formatDateParsedZoneLong,
+  timeFromNow,
+} from 'platform/utilities/date/index';
+
+const expiresSoon = expDate => {
+  const EXPIRES_SOON_THRESHOLD_DURATION = 7 * 24 * 60 * 60 * 1000;
+  const now = new Date();
+  const expiresAt = new Date(expDate);
+  const daysLeft = timeFromNow(expiresAt, now);
+  if (
+    differenceInDays(expiresAt, now) > 0 &&
+    differenceInDays(expiresAt, now) < EXPIRES_SOON_THRESHOLD_DURATION
+  ) {
+    return `(in ${daysLeft})`;
+  }
+  return null;
+};
+
+const POARequestCard = ({ poaRequest, id }) => {
+  return (
+    <li>
+      <va-card class="poa-request__card">
+        <span
+          data-testid={`poa-request-card-${id}-status`}
+          className="usa-label poa-request__card-field poa-request__card-field--status"
+        >
+          {poaRequest.status}
+        </span>
+        <Link to={id}>
+          <span className="sr-only">View details for </span>
+          <h3
+            data-testid={`poa-request-card-${id}-name`}
+            className="poa-request__card-title vads-u-font-size--h4"
+          >
+            {`${poaRequest.claimant.lastName}, ${
+              poaRequest.claimant.firstName
+            }`}
+          </h3>
+        </Link>
+
+        <p className="poa-request__card-field poa-request__card-field--location">
+          <span data-testid={`poa-request-card-${id}-city`}>
+            {poaRequest.claimantAddress.city}
+          </span>
+          {', '}
+          <span data-testid={`poa-request-card-${id}-state`}>
+            {poaRequest.claimantAddress.state}
+          </span>
+          {', '}
+          <span data-testid={`poa-request-card-${id}-zip`}>
+            {poaRequest.claimantAddress.zip}
+          </span>
+        </p>
+
+        <p
+          data-testid="poa-request-card-field-received"
+          className="poa-request__card-field poa-request__card-field--request"
+        >
+          {poaRequest.status === 'Declined' && (
+            <>
+              <span className="poa-request__card-field--label">
+                POA request declined on:
+              </span>
+              <span data-testid={`poa-request-card-${id}-declined`}>
+                {formatDateParsedZoneLong(poaRequest.acceptedOrDeclinedAt)}
+              </span>
+            </>
+          )}
+          {poaRequest.status === 'Accepted' && (
+            <>
+              <span className="poa-request__card-field--label">
+                POA request accepted on:
+              </span>
+              <span data-testid={`poa-request-card-${id}-accepted`}>
+                {formatDateParsedZoneLong(poaRequest.acceptedOrDeclinedAt)}
+              </span>
+            </>
+          )}
+
+          {poaRequest.status === 'Pending' && (
+            <>
+              {expiresSoon(poaRequest.expiresAt) && (
+                <va-icon
+                  class="poa-request__card-icon"
+                  icon="warning"
+                  size={2}
+                  srtext="warning"
+                  aria-hidden="true"
+                />
+              )}
+              <span className="poa-request__card-field--label">
+                POA request expires on:
+              </span>
+              <span data-testid={`poa-request-card-${id}-received`}>
+                {formatDateParsedZoneLong(poaRequest.expiresAt)}
+              </span>
+              <span className="poa-request__card-field--expiry">
+                {expiresSoon(poaRequest.expiresAt)}
+              </span>
+            </>
+          )}
+        </p>
+      </va-card>
+    </li>
+  );
+};
+
+POARequestCard.propTypes = {
+  cssClass: PropTypes.string,
+};
+
+export default POARequestCard;

src/applications/accredited-representative-portal/containers/POARequestDetailsPage.jsx

@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { apiRequest } from '@department-of-veterans-affairs/platform-utilities/api';
 import { Link, useLoaderData } from 'react-router-dom';
@@ -242,10 +241,6 @@ const POARequestDetailsPage = () => {
   );
 };
 
-POARequestDetailsPage.propTypes = {
-  usePOARequests: PropTypes.func.isRequired,
-};
-
 export default POARequestDetailsPage;
 
 export async function poaRequestLoader({ params }) {