diff --git a/src/applications/accredited-representative-portal/containers/POARequestDetailsPage.jsx b/src/applications/accredited-representative-portal/containers/POARequestDetailsPage.jsx index 1962910231e5..dea08ebbab95 100644 --- a/src/applications/accredited-representative-portal/containers/POARequestDetailsPage.jsx +++ b/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,14 +27,22 @@ 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 (

POA request: {poaRequest?.claimant?.firstName} {poaRequest?.claimant?.lastName}

-
); }; diff --git a/src/applications/accredited-representative-portal/sass/POARequestDetails.scss b/src/applications/accredited-representative-portal/sass/POARequestDetails.scss index 2ef53dc76ddc..2463f2c6c0ee 100644 --- a/src/applications/accredited-representative-portal/sass/POARequestDetails.scss +++ b/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%;