[Art/96894] - poa search tabs (#33602)

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 }) {