Merge branch 'VACMS-20241-autosuggest-valid-address-mapbox' of github…

….com:department-of-veterans-affairs/vets-website into VACMS-20241-autosuggest-valid-address-mapbox
department-of-veterans-affairs · Jan 31, 2025 · 6f54195 · 6f54195
2 parents 2a41ec9 + 6c42a7d
commit 6f54195
Show file tree

Hide file tree

Showing 84 changed files with 4,024 additions and 1,111 deletions.
diff --git a/package.json b/package.json
@@ -127,7 +127,7 @@
     "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
     "@cypress/code-coverage": "^3.13.9",
     "@department-of-veterans-affairs/eslint-plugin": "^1.18.2",
-    "@department-of-veterans-affairs/generator-vets-website": "^3.12.1",
+    "@department-of-veterans-affairs/generator-vets-website": "^3.12.2",
     "@octokit/rest": "^18.11.0",
     "@sentry/browser": "^6.13.2",
     "@testing-library/dom": "^7.26.6",

diff --git a/src/applications/accredited-representative-portal/components/POARequestCard.jsx b/src/applications/accredited-representative-portal/components/POARequestCard.jsx
@@ -20,8 +20,8 @@ const POARequestCard = ({ poaRequest, id }) => {
     <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"
+          data-testid={`poa-request-card-${poaRequest.id}-status`}
+          className={`usa-label poa-request__card-field poa-request__card-field--status status status--${poaStatus}`}
         >
           {formatStatus(poaStatus)}
         </span>

diff --git a/src/applications/accredited-representative-portal/components/SortForm.jsx b/src/applications/accredited-representative-portal/components/SortForm.jsx
@@ -47,7 +47,7 @@ const SortForm = ({ asc, desc, ascOption, descOption }) => {
         className="usa-button-secondary poa-request__apply"
         onClick={handleSorting}
       >
-        Apply
+        Sort
       </button>
     </Form>
   );

diff --git a/src/applications/accredited-representative-portal/containers/POARequestDetailsPage.jsx b/src/applications/accredited-representative-portal/containers/POARequestDetailsPage.jsx
@@ -114,16 +114,17 @@ const POARequestDetailsPage = () => {
   };
 
   const poaStatus =
-    poaRequest.resolution?.decision_type ||
+    poaRequest.resolution?.decisionType ||
     poaRequest.resolution?.type ||
     'Pending';
 
-  const relationship = poaRequest?.powerOfAttorneyForm.claimant.relationship;
+  const relationship =
+    poaRequest?.powerOfAttorneyForm.claimant.relationship || 'Self';
   const city = poaRequest?.powerOfAttorneyForm.claimant.address.city;
   const state = poaRequest?.powerOfAttorneyForm.claimant.address.stateCode;
   const zipCode = poaRequest?.powerOfAttorneyForm.claimant.address.zipCode;
   const phone = poaRequest?.powerOfAttorneyForm.claimant.phone;
-  const email = poaRequest.powerOfAttorneyForm.claimant.emaill;
+  const email = poaRequest?.powerOfAttorneyForm.claimant.email;
   const claimantFirstName = poaRequest?.powerOfAttorneyForm.claimant.name.first;
   const claimantLastName = poaRequest?.powerOfAttorneyForm.claimant.name.last;
   const {
@@ -141,7 +142,7 @@ const POARequestDetailsPage = () => {
         {claimantLastName}, {claimantFirstName}
         {poaStatus !== 'expired' && (
           <span
-            className={`usa-label vads-u-font-family--sans poa-request-details__status ${poaStatus}`}
+            className={`usa-label vads-u-font-family--sans poa-request-details__status status status--${poaStatus}`}
           >
             {formatStatus(poaStatus)}
           </span>
@@ -167,7 +168,7 @@ const POARequestDetailsPage = () => {
           {poaStatus === 'declination' && (
             <>
               <p className="poa-request-details__title">Request declined on</p>
-              {resolutionDate(poaRequest.resolution?.created_at, poaStatus.id)}
+              {resolutionDate(poaRequest.resolution?.createdAt, poaStatus.id)}
             </>
           )}
           {poaStatus === 'acceptance' && (
@@ -184,13 +185,7 @@ const POARequestDetailsPage = () => {
           )}
           {poaStatus === 'expiration' && (
             <>
-              <p className="poa-request-details__title">
-                <va-icon
-                  icon="warning"
-                  class="vads-u-color--warning-dark poa-request__card-icon"
-                />{' '}
-                Request expired on
-              </p>
+              <p className="poa-request-details__title">Request expired on</p>
               {resolutionDate(poaRequest.resolution?.createdAt, poaStatus.id)}
             </>
           )}
@@ -245,13 +240,11 @@ const POARequestDetailsPage = () => {
             <>
               <li>
                 <p>Social Security number</p>
-                <p>{poaRequest?.power_of_attorney_form?.claimant?.ssn}</p>
+                <p>{poaRequest?.powerOfAttorneyForm?.claimant?.ssn}</p>
               </li>
               <li>
                 <p>VA file number</p>
-                <p>
-                  {poaRequest?.power_of_attorney_form?.claimant?.va_file_number}
-                </p>
+                <p>{poaRequest?.powerOfAttorneyForm?.claimant?.vaFileNumber}</p>
               </li>
             </>
           )}
@@ -277,7 +270,7 @@ const POARequestDetailsPage = () => {
               <li>
                 <p>VA file number</p>
                 <p>
-                  {poaRequest?.power_of_attorney_form?.veteran?.va_file_number}
+                  {poaRequest?.power_of_attorney_form?.veteran?.vaFileNumber}
                 </p>
               </li>
             </ul>
@@ -290,17 +283,17 @@ const POARequestDetailsPage = () => {
             <p>Change of address</p>
             <p>
               {checkAuthorizations(
-                poaRequest?.powerOfAttorneyForm.authorizations.address_change,
+                poaRequest?.powerOfAttorneyForm.authorizations.addressChange,
               )}
             </p>
           </li>
           <li>
             <p>Protected medical records</p>
             <p>
-              {recordDisclosureLimitations.lengp === 0 && <NoAccess />}
-              {recordDisclosureLimitations.lengp < 4 &&
-                recordDisclosureLimitations.lengp > 0 && <AccessToSome />}
-              {recordDisclosureLimitations.lengp === 4 && <Authorized />}
+              {recordDisclosureLimitations.length === 0 && <NoAccess />}
+              {recordDisclosureLimitations.length < 4 &&
+                recordDisclosureLimitations.length > 0 && <AccessToSome />}
+              {recordDisclosureLimitations.length === 4 && <Authorized />}
             </p>
           </li>
           <li>

diff --git a/src/applications/accredited-representative-portal/containers/POARequestSearchPage.jsx b/src/applications/accredited-representative-portal/containers/POARequestSearchPage.jsx
@@ -26,14 +26,14 @@ const PENDING = {
   DESC_OPTION: 'Expiration date (farthest)',
 };
 
-const COMPLETED = {
+const PROCESSED = {
   ASC_OPTION: 'Processed date (nearest)',
   DESC_OPTION: 'Processed date (farthest)',
 };
 
 const STATUSES = {
   PENDING: 'pending',
-  COMPLETED: 'completed',
+  PROCESSED: 'processed',
 };
 
 const SearchResults = ({ poaRequests }) => {
@@ -73,38 +73,31 @@ const StatusTabLink = ({ tabStatus, searchStatus, tabSort, children }) => {
   );
 };
 
-const DigitalSubmissionAlert = () => (
-  <va-alert data-testid="digital-submission-alert" status="info" visible>
-    <h2 data-testid="digital-submission-alert-heading" slot="headline">
-      Veterans can now digitally submit form 21-22 from VA.gov
-    </h2>
-    <p
-      data-testid="digital-submission-alert-description"
-      className="vads-u-margin-y--0"
-    >
-      Veterans can now{' '}
-      <a href="https://www.va.gov/get-help-from-accredited-representative/find-rep/">
-        find a VSO
-      </a>{' '}
-      and{' '}
-      <a href="https://www.va.gov/find-forms/about-form-21-22a/">
-        sign and submit
-      </a>{' '}
-      a digital version of form 21-22. Digital submissions will immediately
-      populate in the table below.
-    </p>
-  </va-alert>
-);
-
 const POARequestSearchPage = () => {
   const poaRequests = useLoaderData();
   const searchStatus = useSearchParams()[0].get('status');
 
   return (
-    <>
-      <h1 data-testid="poa-requests-heading">Power of attorney requests</h1>
-      <DigitalSubmissionAlert />
-
+    <section className="poa-request">
+      <h1
+        data-testid="poa-requests-heading"
+        className="poa-request__search-header"
+      >
+        Power of attorney requests
+      </h1>
+      <p className="poa-request__copy">
+        You can accept or decline power of attorney (POA) requests in the
+        Accredited Representative Portal. Requests will expire and be removed
+        from the portal after 60 days.
+        <br />
+        <br />
+        <strong>Note:</strong> requests need to be submitted using the digital
+        VA Form 21-22 on VA.gov.
+      </p>
+      <br />
+      <Link to="/get-help-from-accredited-representative/appoint-rep/introduction">
+        VA Form 21-22 (on VA.gov)
+      </Link>
       <div className="poa-requests-page-table-container">
         <div role="tablist" className="poa-request__tabs">
           <StatusTabLink
@@ -115,11 +108,11 @@ const POARequestSearchPage = () => {
             Pending
           </StatusTabLink>
           <StatusTabLink
-            tabStatus={STATUSES.COMPLETED}
+            tabStatus={STATUSES.PROCESSED}
             searchStatus={searchStatus}
             tabSort={SORT_BY.RESOLVED_DESC}
           >
-            Completed
+            Processed
           </StatusTabLink>
         </div>
 
@@ -134,7 +127,12 @@ const POARequestSearchPage = () => {
               case STATUSES.PENDING:
                 return (
                   <>
-                    <h2 data-testid="poa-requests-table-heading">Pending</h2>
+                    <h2
+                      data-testid="poa-requests-table-heading"
+                      className="poa-request__tab-heading"
+                    >
+                      Pending POA requests
+                    </h2>
                     <SortForm
                       asc={SORT_BY.CREATED_ASC}
                       desc={SORT_BY.CREATED_DESC}
@@ -143,15 +141,20 @@ const POARequestSearchPage = () => {
                     />
                   </>
                 );
-              case STATUSES.COMPLETED:
+              case STATUSES.PROCESSED:
                 return (
                   <>
-                    <h2 data-testid="poa-requests-table-heading">Completed</h2>
+                    <h2
+                      data-testid="poa-requests-table-heading"
+                      className="poa-request__tab-heading"
+                    >
+                      Processed POA requests
+                    </h2>
                     <SortForm
                       asc={SORT_BY.RESOLVED_ASC}
                       desc={SORT_BY.RESOLVED_DESC}
-                      ascOption={COMPLETED.ASC_OPTION}
-                      descOption={COMPLETED.DESC_OPTION}
+                      ascOption={PROCESSED.ASC_OPTION}
+                      descOption={PROCESSED.DESC_OPTION}
                     />
                   </>
                 );
@@ -163,7 +166,7 @@ const POARequestSearchPage = () => {
           <SearchResults poaRequests={poaRequests} />
         </div>
       </div>
-    </>
+    </section>
   );
 };
 

diff --git a/src/applications/accredited-representative-portal/containers/SignedInLayout.jsx b/src/applications/accredited-representative-portal/containers/SignedInLayout.jsx
@@ -122,7 +122,7 @@ const SignedInLayout = () => {
   }
 
   return (
-    <div className="vads-u-margin-y--5 vads-l-grid-container large-screen:vads-u-padding-x--0">
+    <div className="arp-container">
       <div data-testid="signed-in-layout-content" className="vads-l-row">
         <Outlet />
       </div>

diff --git a/src/applications/accredited-representative-portal/sass/POARequestCard.scss b/src/applications/accredited-representative-portal/sass/POARequestCard.scss
@@ -1,21 +1,31 @@
 @import "~@department-of-veterans-affairs/css-library/dist/tokens/scss/variables";
 
 .poa-request {
+  max-width: 660px;
+
   &__search-header {
     margin: 0 0 24px;
   }
+  &__copy {
+    margin: 0;
+  }
   &__tabs {
     margin: 60px 0 24px;
     background-color: $uswds-system-color-gray-cool-10;
     border: 2px solid $uswds-system-color-gray-cool-10;
     border-radius: 6px;
     display: flex;
+    max-width: 320px;
 
     @media (min-width: $small-desktop-screen) {
       margin: 24px 0;
-      max-width: 320px;
     }
   }
+
+  &__tab-heading {
+    margin: 0;
+  }
+
   &__tab-link {
     font-size: 20px;
     flex: 1;
@@ -69,7 +79,7 @@
   &__card {
     margin-bottom: 20px;
 
-    >a {
+    > a {
       display: flex;
     }
 

diff --git a/src/applications/accredited-representative-portal/sass/POARequestDetails.scss b/src/applications/accredited-representative-portal/sass/POARequestDetails.scss
@@ -141,25 +141,6 @@
 
   &__status {
     margin-left: 15px;
-    color: $vads-color-base;
-
-    &.pending {
-      background-color: $vads-color-warning-lighter;
-      border: 1px solid $vads-color-warning-darker;
-    }
-    &.acceptance {
-      background-color: $vads-color-success-lighter;
-      border: 1px solid $vads-color-success;
-    }
-    &.declination,
-    &.expiration {
-      background-color: $uswds-system-color-red-warm-10;
-      border: 1px solid $uswds-system-color-red-warm-vivid-50;
-    }
-    &.processing {
-      background-color: $uswds-system-color-gray-5;
-      border: 1px solid $uswds-system-color-gray-cool-60;
-    }
   }
 
   &__table {

diff --git a/src/applications/accredited-representative-portal/sass/accredited-representative-portal.scss b/src/applications/accredited-representative-portal/sass/accredited-representative-portal.scss
@@ -1,5 +1,37 @@
 @import "~@department-of-veterans-affairs/css-library/dist/tokens/scss/variables";
 
+.arp-container {
+  max-width: 1000px;
+  width: 100%;
+  margin: $units-5 auto;
+  padding: 0 10px;
+
+  @media (min-width: $small-desktop-screen) {
+    padding: 0;
+  }
+}
+
+.status {
+  color: $vads-color-base;
+
+  &--processing {
+    background-color: $uswds-system-color-gray-5;
+    border: 1px solid $uswds-system-color-gray-cool-60;
+  }
+  &--declination,
+  &--expiration {
+    background-color: $uswds-system-color-red-warm-10;
+    border: 1px solid $uswds-system-color-red-warm-vivid-50;
+  }
+  &--pending {
+    background-color: $vads-color-warning-lighter;
+    border: 1px solid $vads-color-warning-darker;
+  }
+  &--acceptance {
+    background-color: $vads-color-success-lighter;
+    border: 1px solid $vads-color-success;
+  }
+}
 .container {
   display: flex;
   flex-direction: column;
@@ -25,7 +57,7 @@
   &__look-and-feel {
     background: linear-gradient(
       to left,
-      var(--vads-color-primary-alt)10%,
+      var(--vads-color-primary-alt) 10%,
       var(--vads-color-primary-alt-dark) 40%,
       var(--vads-color-primary-alt-darkest)
     );
-Original file line number
+Diff line change
@@ Expand Up / @@ -47,7 +47,7 @@ const SortForm = ({ asc, desc, ascOption, descOption }) => { @@
             className="usa-button-secondary poa-request__apply"
             onClick={handleSorting}
           >
-            Apply
+            Sort
           </button>
         </Form>
       );
@@ Expand Down @@