[PRMP-1483] Implement view specific patient restrictions page

app/src/components/blocks/_userPatientRestrictions/userPatientRestrictionsCompleteStage/UserPatientRestrictionsCompleteStage.tsx

@@ -0,0 +1,72 @@
+import { useNavigate } from 'react-router-dom';
+import useTitle from '../../../../helpers/hooks/useTitle';
+import { UserPatientRestrictionsSubRoute } from '../../../../types/generic/userPatientRestriction';
+import usePatient from '../../../../helpers/hooks/usePatient';
+import { getFormattedPatientFullName } from '../../../../helpers/utils/formatPatientFullName';
+import { formatNhsNumber } from '../../../../helpers/utils/formatNhsNumber';
+import { getFormattedDateFromString } from '../../../../helpers/utils/formatDate';
+import { Button } from 'nhsuk-react-components';
+import { routes } from '../../../../types/generic/routes';
+
+type Props = {
+    route: UserPatientRestrictionsSubRoute;
+};
+
+const UserPatientRestrictionsCompleteStage = ({ route }: Props): React.JSX.Element => {
+    const navigate = useNavigate();
+    const patientDetails = usePatient();
+
+    const pageTitle =
+        route === UserPatientRestrictionsSubRoute.ADD
+            ? 'A restriction has been added to this patient record:'
+            : 'A restriction on accessing this patient record has been removed:';
+    useTitle({ pageTitle });
+
+    return (
+        <>
+            <div className="nhsuk-panel" data-testid="action-complete-card">
+                <h1 data-testid="page-title" className="nhsuk-panel__title">
+                    {pageTitle}
+                </h1>
+                <br />
+                <div className="nhsuk-panel__body">
+                    <strong data-testid="patient-name">
+                        Patient name: {getFormattedPatientFullName(patientDetails)}
+                    </strong>
+                    <br />
+                    <span data-testid="nhs-number">
+                        NHS number: {formatNhsNumber(patientDetails!.nhsNumber)}
+                    </span>
+                    <br />
+                    <span data-testid="dob">
+                        Date of birth: {getFormattedDateFromString(patientDetails!.birthDate)}
+                    </span>
+                </div>
+            </div>
+
+            {route === UserPatientRestrictionsSubRoute.ADD ? (
+                <p>
+                    When you add a restriction, it will stay with this patient's record until it's
+                    removed. If the patient moves practice, the new practice will see the name and
+                    NHS smartcard number of the staff member you've restricted.
+                </p>
+            ) : (
+                <p>The staff member can now access this patient's record.</p>
+            )}
+
+            <h3>What happens next</h3>
+            <p>You can add, view and make changes to restrictions by going to the admin hub.</p>
+
+            <Button
+                data-testid="view-restrictions-button"
+                onClick={(): void => {
+                    navigate(routes.USER_PATIENT_RESTRICTIONS);
+                }}
+            >
+                Go to view restrictions
+            </Button>
+        </>
+    );
+};
+
+export default UserPatientRestrictionsCompleteStage;

app/src/components/blocks/_userPatientRestrictions/userPatientRestrictionsListStage/UserPatientRestrictionsListStage.tsx

@@ -5,9 +5,12 @@
 import { Button, ErrorMessage, Fieldset, Radios, Table, TextInput } from 'nhsuk-react-components';
 import { useForm } from 'react-hook-form';
 import { InputRef } from '../../../../types/generic/inputRef';
-import { useEffect, useRef, useState } from 'react';
+import React, { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
 import SpinnerButton from '../../../generic/spinnerButton/SpinnerButton';
-import { UserPatientRestriction } from '../../../../types/generic/userPatientRestriction';
+import {
+    UserPatientRestriction,
+    UserPatientRestrictionsSubRoute,
+} from '../../../../types/generic/userPatientRestriction';
 import { Pagination } from '../../../generic/paginationV2/Pagination';
 import SpinnerV2 from '../../../generic/spinnerV2/SpinnerV2';
 import { formatNhsNumber } from '../../../../helpers/utils/formatNhsNumber';
@@ -20,10 +23,12 @@
 import validateNhsNumber from '../../../../helpers/utils/nhsNumberValidator';
 import { isMock } from '../../../../helpers/utils/isLocal';
 import { AxiosError } from 'axios';
-import { buildUserRestrictions } from '../../../../helpers/test/testBuilders';
-import { getFormattedPatientFullName } from '../../../../helpers/utils/formatPatientFullName';
+import { buildPatientDetails, buildUserRestrictions } from '../../../../helpers/test/testBuilders';
+import getPatientDetails from '../../../../helpers/requests/getPatientDetails';
+import { usePatientDetailsContext } from '../../../../providers/patientProvider/PatientProvider';
 import { PatientDetails } from '../../../../types/generic/patientDetails';
 import formatSmartcardNumber from '../../../../helpers/utils/formatSmartcardNumber';
+import { getFormattedPatientFullName } from '../../../../helpers/utils/formatPatientFullName';
 
 enum Fields {
     searchType = 'searchType',
@@ -40,7 +45,11 @@
     [Fields.searchText]: string;
 };
 
-const UserPatientRestrictionsListStage = (): React.JSX.Element => {
+type Props = {
+    setSubRoute: Dispatch<SetStateAction<UserPatientRestrictionsSubRoute | null>>;
+};
+
+const UserPatientRestrictionsListStage = ({ setSubRoute }: Props): React.JSX.Element => {
     const navigate = useNavigate();
     const pageTitle = 'Manage restrictions on access to patient records';
     useTitle({ pageTitle });
@@ -244,6 +253,7 @@
                             restrictions={restrictions}
                             isLoading={isLoading}
                             failedLoading={failedLoading}
+                            setSubRoute={setSubRoute}
                         />
                     </Table.Body>
                 </Table>
@@ -299,13 +309,53 @@
     restrictions: UserPatientRestriction[];
     isLoading: boolean;
     failedLoading: boolean;
+    setSubRoute: Dispatch<SetStateAction<UserPatientRestrictionsSubRoute | null>>;
 };
 const TableRows = ({
     restrictions,
     isLoading,
     failedLoading,
+    setSubRoute,
 }: TableRowsProps): React.JSX.Element => {
+    const [, setPatientDetails] = usePatientDetailsContext();
     const navigate = useNavigate();
+    const baseUrl = useBaseAPIUrl();
+    const baseHeaders = useBaseAPIHeaders();
+
+    const [loadingPatient, setLoadingPatient] = useState(false);
+
+    const onViewClicked = async (nhsNumber: string): Promise<void> => {
+        setLoadingPatient(true);
+        try {
+            const patientDetails = await getPatientDetails({
+                nhsNumber,
+                baseUrl,
+                baseHeaders,
+            });
+
+            handleSuccess(patientDetails);
+        } catch (e) {
+            const error = e as AxiosError;
+            if (isMock(error)) {
+                handleSuccess(
+                    buildPatientDetails({
+                        nhsNumber,
+                        active: true,
+                    }),
+                );
+            } else {
+                navigate(routeChildren.USER_PATIENT_RESTRICTIONS_RESTRICTED);
+            }
+        } finally {
+            setLoadingPatient(false);
+        }
+    };
+
+    const handleSuccess = (patientDetails: PatientDetails): void => {
+        setSubRoute(UserPatientRestrictionsSubRoute.VIEW);
+        setPatientDetails(patientDetails);
+        navigate(routeChildren.USER_PATIENT_RESTRICTIONS_VERIFY_PATIENT);
+    };
 
     if (failedLoading) {
         return (
@@ -340,21 +390,20 @@
                                 {getFormattedDateFromString(`${restriction.created}`)}
                             </Table.Cell>
                             <Table.Cell className="nowrap">
-                                <Link
-                                    to="#"
-                                    data-testid={`view-record-link-${restriction.id}`}
-                                    onClick={(e): void => {
-                                        e.preventDefault();
-                                        navigate(
-                                            routeChildren.USER_PATIENT_RESTRICTIONS_VIEW.replace(
-                                                ':restrictionId',
-                                                restriction.id,
-                                            ),
-                                        );
-                                    }}
-                                >
-                                    View
-                                </Link>
+                                {loadingPatient ? (
+                                    <SpinnerV2 status="Loading..." />
+                                ) : (
+                                    <Link
+                                        to="#"
+                                        data-testid={`view-record-link-${restriction.id}`}
+                                        onClick={(e): void => {
+                                            e.preventDefault();
+                                            onViewClicked(restriction.nhsNumber);
+                                        }}
+                                    >
+                                        View
+                                    </Link>
+                                )}
                             </Table.Cell>
                         </Table.Row>
                     );

app/src/components/blocks/_userPatientRestrictions/userPatientRestrictionsRemoveConfirmStage/UserPatientRestrictionsRemoveConfirmStage.tsx

@@ -0,0 +1,114 @@
+import { Button, Table } from 'nhsuk-react-components';
+import useTitle from '../../../../helpers/hooks/useTitle';
+import { UserPatientRestriction } from '../../../../types/generic/userPatientRestriction';
+import BackButton from '../../../generic/backButton/BackButton';
+import { getFormattedDateFromString } from '../../../../helpers/utils/formatDate';
+import { Link, useNavigate } from 'react-router-dom';
+import deleteUserPatientRestriction from '../../../../helpers/requests/userPatientRestrictions/deleteUserPatientRestriction';
+import useBaseAPIUrl from '../../../../helpers/hooks/useBaseAPIUrl';
+import useBaseAPIHeaders from '../../../../helpers/hooks/useBaseAPIHeaders';
+import { routeChildren, routes } from '../../../../types/generic/routes';
+import { useState } from 'react';
+import SpinnerButton from '../../../generic/spinnerButton/SpinnerButton';
+import { AxiosError } from 'axios';
+import { isMock } from '../../../../helpers/utils/isLocal';
+import { errorToParams } from '../../../../helpers/utils/errorToParams';
+import formatSmartcardNumber from '../../../../helpers/utils/formatSmartcardNumber';
+
+type Props = {
+    restriction: UserPatientRestriction;
+};
+
+const UserPatientRestrictionsRemoveConfirmStage = ({ restriction }: Props): React.JSX.Element => {
+    const navigate = useNavigate();
+    const baseUrl = useBaseAPIUrl();
+    const baseAPIHeaders = useBaseAPIHeaders();
+
+    const [removing, setRemoving] = useState(false);
+
+    const pageTitle = 'Are you sure you want to remove this restriction?';
+    useTitle({ pageTitle });
+
+    const confirmRemove = async (): Promise<void> => {
+        setRemoving(true);
+
+        try {
+            await deleteUserPatientRestriction({
+                restrictionId: restriction.id,
+                nhsNumber: restriction.nhsNumber,
+                baseUrl,
+                baseAPIHeaders,
+            });
+        } catch (e) {
+            const error = e as AxiosError;
+            if (!isMock(error)) {
+                if (error.response?.status === 403) {
+                    navigate(routes.SESSION_EXPIRED);
+                } else {
+                    navigate(routes.SERVER_ERROR + errorToParams(error));
+                }
+                return;
+            }
+        }
+
+        navigate(routeChildren.USER_PATIENT_RESTRICTIONS_REMOVE_COMPLETE);
+    };
+
+    return (
+        <>
+            <BackButton />
+
+            <h1>{pageTitle}</h1>
+
+            <p>
+                If you remove this restriction, staff that were restricted will be able to access
+                this patient's record again.
+            </p>
+
+            <p>You are removing the restriction for this staff member:</p>
+
+            <Table responsive>
+                <Table.Head>
+                    <Table.Row>
+                        <Table.Cell>Staff member</Table.Cell>
+                        <Table.Cell>NHS smartcard number</Table.Cell>
+                        <Table.Cell>Date restriction added</Table.Cell>
+                    </Table.Row>
+                </Table.Head>
+
+                <Table.Body>
+                    <Table.Row>
+                        <Table.Cell>
+                            {restriction.restrictedUserFirstName}{' '}
+                            {restriction.restrictedUserLastName}
+                        </Table.Cell>
+                        <Table.Cell>{formatSmartcardNumber(restriction.restrictedUser)}</Table.Cell>
+                        <Table.Cell>{getFormattedDateFromString(restriction.created)}</Table.Cell>
+                    </Table.Row>
+                </Table.Body>
+            </Table>
+
+            {removing ? (
+                <SpinnerButton id="removing-spinner" status="Removing..." />
+            ) : (
+                <div className="action-button-group">
+                    <Button data-testid="confirm-remove-restriction-button" onClick={confirmRemove}>
+                        Remove this restriction
+                    </Button>
+                    <Link
+                        to={''}
+                        onClick={(e): void => {
+                            e.preventDefault();
+                            navigate(routeChildren.USER_PATIENT_RESTRICTIONS_LIST);
+                        }}
+                        className="ml-4"
+                    >
+                        Cancel
+                    </Link>
+                </div>
+            )}
+        </>
+    );
+};
+
+export default UserPatientRestrictionsRemoveConfirmStage;

app/src/components/blocks/_userPatientRestrictions/userPatientRestrictionsVerifyPatientStage/UserPatientRestrictionsVerifyPatientStage.tsx

@@ -0,0 +1,52 @@
+import { Button } from 'nhsuk-react-components';
+import useTitle from '../../../../helpers/hooks/useTitle';
+import { UserPatientRestrictionsSubRoute } from '../../../../types/generic/userPatientRestriction';
+import BackButton from '../../../generic/backButton/BackButton';
+import PatientSummary, { PatientInfo } from '../../../generic/patientSummary/PatientSummary';
+
+type Props = {
+    route: UserPatientRestrictionsSubRoute;
+    confirmClicked: () => void;
+};
+
+const UserPatientRestrictionsVerifyPatientStage = ({
+    route,
+    confirmClicked,
+}: Props): React.JSX.Element => {
+    const pageTitle =
+        route === UserPatientRestrictionsSubRoute.ADD
+            ? 'Patient details'
+            : 'Verify patient details to view restrictions';
+    useTitle({ pageTitle });
+
+    return (
+        <>
+            <BackButton />
+
+            <h1>{pageTitle}</h1>
+
+            <PatientSummary>
+                <PatientSummary.Child item={PatientInfo.NHS_NUMBER} />
+                <PatientSummary.Child item={PatientInfo.FAMILY_NAME} />
+                <PatientSummary.Child item={PatientInfo.GIVEN_NAME} />
+                {route === UserPatientRestrictionsSubRoute.ADD && (
+                    <>
+                        <PatientSummary.Child item={PatientInfo.BIRTH_DATE} />
+                        <PatientSummary.Child item={PatientInfo.POSTAL_CODE} />
+                    </>
+                )}
+            </PatientSummary>
+
+            <p>
+                This page displays the current data recorded in the Personal Demographics Service
+                for this patient.
+            </p>
+
+            <Button data-testid="confirm-patient-details" onClick={confirmClicked}>
+                Confirm patient details and continue
+            </Button>
+        </>
+    );
+};
+
+export default UserPatientRestrictionsVerifyPatientStage;