diff --git a/src/applications/686c-674/containers/App.jsx b/src/applications/686c-674/containers/App.jsx
index b08dad696912..57df90a3be7d 100644
--- a/src/applications/686c-674/containers/App.jsx
+++ b/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 ;
}
- 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 = (
{children}
);
+
+ // 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 (
+
+ );
+ }
+
+ return content;
}
const mapStateToProps = state => {
diff --git a/src/applications/accredited-representative-portal/app-entry.jsx b/src/applications/accredited-representative-portal/app-entry.jsx
index 581ed7e0c404..38bff1b0c0ef 100644
--- a/src/applications/accredited-representative-portal/app-entry.jsx
+++ b/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 './sass/Header.scss';
diff --git a/src/applications/accredited-representative-portal/components/POARequestCard/POARequestCard.jsx b/src/applications/accredited-representative-portal/components/POARequestCard/POARequestCard.jsx
new file mode 100644
index 000000000000..406c7f7656fa
--- /dev/null
+++ b/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 (
+
+
+
+ {poaRequest.status}
+
+
+ View details for
+
+ {`${poaRequest.claimant.lastName}, ${
+ poaRequest.claimant.firstName
+ }`}
+
+
+
+
+
+ {poaRequest.claimantAddress.city}
+
+ {', '}
+
+ {poaRequest.claimantAddress.state}
+
+ {', '}
+
+ {poaRequest.claimantAddress.zip}
+
+
+
+
+ {poaRequest.status === 'Declined' && (
+ <>
+
+ POA request declined on:
+
+
+ {formatDateParsedZoneLong(poaRequest.acceptedOrDeclinedAt)}
+
+
+ )}
+ {poaRequest.status === 'Accepted' && (
+ <>
+
+ POA request accepted on:
+
+
+ {formatDateParsedZoneLong(poaRequest.acceptedOrDeclinedAt)}
+
+
+ )}
+
+ {poaRequest.status === 'Pending' && (
+ <>
+ {expiresSoon(poaRequest.expiresAt) && (
+
+ )}
+
+ POA request expires on:
+
+
+ {formatDateParsedZoneLong(poaRequest.expiresAt)}
+
+
+ {expiresSoon(poaRequest.expiresAt)}
+
+
+ )}
+
+
+
+ );
+};
+
+POARequestCard.propTypes = {
+ cssClass: PropTypes.string,
+};
+
+export default POARequestCard;
diff --git a/src/applications/accredited-representative-portal/components/POARequestsCard/POARequestsCard.jsx b/src/applications/accredited-representative-portal/components/POARequestsCard/POARequestsCard.jsx
deleted file mode 100644
index 43df18de8eda..000000000000
--- a/src/applications/accredited-representative-portal/components/POARequestsCard/POARequestsCard.jsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Link } from 'react-router-dom';
-import {
- formatDateParsedZoneLong,
- timeFromNow,
-} from 'platform/utilities/date/index';
-import { differenceInDays } from 'date-fns';
-
-export const createLimitationsCell = (
- isTreatmentDisclosureAuthorized,
- isAddressChangingAuthorized,
-) => {
- const limitations = [];
-
- // If do not authorize sharing health info or authorize change of address then we label it as a limitation of consent
- if (!isTreatmentDisclosureAuthorized) limitations.push('Health');
- if (!isAddressChangingAuthorized) limitations.push('Address');
-
- return limitations.length > 0 ? limitations.join(', ') : 'None';
-};
-
-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 POARequestsCard = ({ poaRequests }) => {
- return (
-
- {poaRequests.map(({ id, attributes: poaRequest }) => (
- -
-
-
- {poaRequest.status}
-
-
- View details for
-
- {`${poaRequest.claimant.lastName}, ${
- poaRequest.claimant.firstName
- }`}
-
-
-
-
-
- {poaRequest.claimantAddress.city}
-
- {', '}
-
- {poaRequest.claimantAddress.state}
-
- {', '}
-
- {poaRequest.claimantAddress.zip}
-
-
-
-
- {poaRequest.status === 'Declined' && (
- <>
-
- POA request declined on:
-
-
- {formatDateParsedZoneLong(poaRequest.acceptedOrDeclinedAt)}
-
-
- )}
- {poaRequest.status === 'Accepted' && (
- <>
-
- POA request accepted on:
-
-
- {formatDateParsedZoneLong(poaRequest.acceptedOrDeclinedAt)}
-
-
- )}
-
- {poaRequest.status === 'Pending' && (
- <>
- {expiresSoon(poaRequest.expiresAt) && (
-
- )}
-
- POA request expires on:
-
-
- {formatDateParsedZoneLong(poaRequest.expiresAt)}
-
-
- {expiresSoon(poaRequest.expiresAt)}
-
-
- )}
-
-
-
- ))}
-
- );
-};
-
-POARequestsCard.propTypes = {
- poaRequests: PropTypes.array.isRequired,
-};
-
-export default POARequestsCard;
diff --git a/src/applications/accredited-representative-portal/containers/POARequestSearchPage.jsx b/src/applications/accredited-representative-portal/containers/POARequestSearchPage.jsx
new file mode 100644
index 000000000000..26d3c931845c
--- /dev/null
+++ b/src/applications/accredited-representative-portal/containers/POARequestSearchPage.jsx
@@ -0,0 +1,130 @@
+import React from 'react';
+import {
+ useLoaderData,
+ useSearchParams,
+ redirect,
+ Link,
+} from 'react-router-dom';
+
+import { apiRequest } from '@department-of-veterans-affairs/platform-utilities/api';
+
+import mockPOARequestsResponse from '../mocks/mockPOARequestsResponse.json';
+import POARequestCard from '../components/POARequestCard/POARequestCard';
+import DigitalSubmissionAlert from '../components/DigitalSubmissionAlert/DigitalSubmissionAlert';
+
+const STATUSES = {
+ PENDING: 'pending',
+ COMPLETED: 'completed',
+};
+
+const SearchResults = ({ poaRequests }) => {
+ if (poaRequests.length === 0) {
+ return (
+
+ No POA requests found
+
+ );
+ }
+
+ return (
+
+ {poaRequests.map(({ id, attributes: poaRequest }) => {
+ return ;
+ })}
+
+ );
+};
+
+const StatusTabLink = ({ status, searchStatus, children }) => {
+ const active = status === searchStatus;
+ const classNames = ['poa-request__tab-link'];
+ if (active) classNames.push('active');
+
+ return (
+
+ {children}
+
+ );
+};
+
+const POARequestSearchPage = () => {
+ const poaRequests = useLoaderData();
+ const searchStatus = useSearchParams()[0].get('status');
+
+ return (
+ <>
+ Power of attorney requests
+
+
+
+
+
+ Pending requests
+
+
+ Completed requests
+
+
+
+
+
+ {(() => {
+ switch (searchStatus) {
+ case STATUSES.PENDING:
+ return 'Pending requests';
+ case STATUSES.COMPLETED:
+ return 'Completed requests';
+ default:
+ throw new Error(`Unexpected status: ${searchStatus}`);
+ }
+ })()}
+
+
+
+
+
Power of attorney requests
-
-
-
Requests
- {poaRequests.length === 0 ? (
-
- No POA requests found
-
- ) : (
-
- )}
-