Merge branch 'main' into 98828-monitoring-rum-dashboard-setup

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

@@ -1,9 +1,12 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import { Link, useLoaderData } from 'react-router-dom';
-
+import React, { useState } from 'react';
 import { apiRequest } from '@department-of-veterans-affairs/platform-utilities/api';
+import { Link, useLoaderData } from 'react-router-dom';
 import { formatDateShort } from 'platform/utilities/date/index';
+import {
+  VaRadio,
+  VaRadioOption,
+} from '@department-of-veterans-affairs/component-library/dist/react-bindings';
 import mockPOARequestsResponse from '../mocks/mockPOARequestsResponse.json';
 
 const checkAuthorizations = (
@@ -24,22 +27,29 @@ const checkAuthorizations = (
 
 const POARequestDetailsPage = () => {
   const poaRequest = useLoaderData();
-
+  const [error, setError] = useState(false);
+  const handleChange = e => {
+    e.preventDefault();
+    const radioValue = e.detail?.value;
+    if (radioValue) {
+      setError(false);
+    } else {
+      setError(true);
+    }
+  };
   return (
     <section className="poa-request-details">
       <h1>
         <span data-testid="poa-request-details-header">POA request:</span>
         {poaRequest?.claimant?.firstName} {poaRequest?.claimant?.lastName}
       </h1>
-
       <span
         className="poa-request-details__divider"
         aria-hidden="true"
         tabIndex={-1}
       />
 
       <h2>Veteran information</h2>
-
       <ul className="poa-request-details__list">
         <li className="poa-request-details__list-item">
           <p className="poa-request-details__title">Name</p>
@@ -59,7 +69,6 @@ const POARequestDetailsPage = () => {
       </ul>
 
       <h2>POA request information</h2>
-
       <ul className="poa-request-details__list">
         <li className="poa-request-details__list-item">
           <p className="poa-request-details__title">POA submission date</p>
@@ -162,6 +171,73 @@ const POARequestDetailsPage = () => {
         </li>
       </ul>
       <Link to="/poa-requests/">Back to power of attorney list</Link>
+
+      <form
+        method="post"
+        className={
+          error
+            ? `poa-request-details__form poa-request-details__form--error`
+            : `poa-request-details__form`
+        }
+        onSubmit={handleChange}
+      >
+        <VaRadio
+          header-aria-describedby={null}
+          hint=""
+          label="Do you accept or decline this POA request?"
+          label-header-level="4"
+          class="poa-request-details__form-label"
+          onVaValueChange={handleChange}
+          required
+        >
+          <VaRadioOption label="I accept the request" name="group" value="1" />
+          <VaRadioOption
+            label="I decline the request, because the claimant didn't provide access to health records"
+            name="group"
+            value="2"
+          />
+          <VaRadioOption
+            label="I decline the request, because the claimant didn't allow me to change their address"
+            name="group"
+            value="3"
+          />
+          <VaRadioOption
+            label="I decline the request, because the claimant did not provide access to change address and to health records"
+            name="group"
+            value="4"
+          />
+          <VaRadioOption
+            label="I decline the request, because the VSO is not currently accepting new clients"
+            name="group"
+            value="5"
+          />
+          <VaRadioOption
+            label="I decline for another reason"
+            name="group"
+            value="6"
+            onVaValueChange={handleChange}
+          />
+        </VaRadio>
+
+        <va-alert
+          status="info"
+          class="poa-request-details__form-alert"
+          visible
+          aria-live="polite"
+          slim
+        >
+          <p className="vads-u-margin-y--0">
+            We will send the claimant an email letting them know your decision.
+          </p>
+        </va-alert>
+        {/* eslint-disable-next-line @department-of-veterans-affairs/prefer-button-component */}
+        <button
+          type="submit"
+          className="usa-button poa-request-details__form-submit"
+        >
+          Submit Decision
+        </button>
+      </form>
     </section>
   );
 };

src/applications/accredited-representative-portal/sass/POARequestDetails.scss

@@ -5,6 +5,46 @@
     width: 968px;
   }
 
+  &__form {
+    padding: 35px 14px;
+    background-color: $vads-color-base-lightest;
+    margin-top: 35px;
+
+    h4 {
+      font-family: var(--font-source-sans);
+    }
+
+    @media (min-width: $small-desktop-screen) {
+      max-width: 654px;
+      padding: 52px 38px;
+      margin-top: 88px;
+    }
+
+    &-label {
+      margin: 0;
+
+      .poa-request-details__form--error & {
+        border-left: 0.25rem solid $vads-color-error;
+        padding-left: 1rem;
+        position: relative;
+      }
+    }
+
+    &-alert {
+      margin: 35px 0;
+      max-width: 521px;
+
+      @media (min-width: $small-desktop-screen) {
+        margin: 24px 0;
+      }
+    }
+
+    &-submit {
+      margin: 0;
+      width: auto !important;
+    }
+  }
+
   &__divider {
     border-bottom: 1px solid $vads-color-base-light;
     width: 100%;