feat: add edit mode for changing exception status and remove unused (#1475)

Author: chrimesdev

application/CohortManager/src/Web/app/components/participantInformationPanel.tsx

@@ -3,27 +3,28 @@ import {
   formatDate,
   formatCompactDate,
   formatNhsNumber,
-  formatPhoneNumber,
   formatGenderValue,
 } from "@/app/lib/utils";
 
 interface ParticipantInformationPanelProps {
   readonly exceptionDetails: ExceptionDetails;
+  readonly isEditMode: boolean;
 }
 
 export default function ParticipantInformationPanel({
   exceptionDetails,
+  isEditMode,
 }: Readonly<ParticipantInformationPanelProps>) {
   return (
     <>
       <div
         className={
-          !exceptionDetails.serviceNowId
+          !exceptionDetails.serviceNowId || isEditMode
             ? "nhsuk-card nhsuk-do-dont-list nhsuk-u-margin-bottom-4"
             : "nhsuk-card app-card nhsuk-u-margin-bottom-4"
         }
       >
-        {!exceptionDetails.serviceNowId && (
+        {(!exceptionDetails.serviceNowId || isEditMode) && (
           <span className="nhsuk-do-dont-list__label nhsuk-u-font-weight-bold">
             Portal form: Request to amend incorrect patient PDS record data
           </span>
@@ -80,17 +81,6 @@ export default function ParticipantInformationPanel({
               {exceptionDetails.address}
             </dd>
           </div>
-          <div className="nhsuk-summary-list__row">
-            <dt className="nhsuk-summary-list__key">Contact details</dt>
-            <dd className="nhsuk-summary-list__value">
-              <p>
-                {formatPhoneNumber(
-                  exceptionDetails.contactDetails?.phoneNumber ?? ""
-                )}
-              </p>
-              <p>{exceptionDetails.contactDetails?.email}</p>
-            </dd>
-          </div>
           <div className="nhsuk-summary-list__row">
             <dt className="nhsuk-summary-list__key">
               Registered practice code
@@ -135,10 +125,10 @@ export default function ParticipantInformationPanel({
           </dl>
         </div>
       </div>
-      {exceptionDetails.serviceNowId ? null : (
+      {!isEditMode ? null : (
         <div className="nhsuk-card nhsuk-u-margin-bottom-4">
           <div className="nhsuk-card__content">
-            <h2>Exception status</h2>
+            <h2 id="exception-status">Exception status</h2>
             <p>
               Entering a ServiceNow case ID will change the status of the
               exception to “Raised”. <br />

application/CohortManager/src/Web/app/lib/utils.test.ts

@@ -2,7 +2,6 @@ import {
   formatNhsNumber,
   formatDate,
   formatCompactDate,
-  formatPhoneNumber,
   getCurrentDate,
   formatGenderValue,
 } from "@/app/lib/utils";
@@ -37,20 +36,6 @@ describe("formatCompactDate", () => {
   });
 });
 
-describe("formatPhoneNumber", () => {
-  it("should format the phone number as XXXXX XXX XXX", () => {
-    const input = "01619999999";
-    const expectedOutput = "01619 999 999";
-    expect(formatPhoneNumber(input)).toBe(expectedOutput);
-  });
-
-  it("should return the input if it is not a valid phone number", () => {
-    const input = "12345";
-    const expectedOutput = "12345";
-    expect(formatPhoneNumber(input)).toBe(expectedOutput);
-  });
-});
-
 describe("getCurrentDate", () => {
   it("should return the current date in the format YYYY-MM-DD", () => {
     const date = new Date();

application/CohortManager/src/Web/app/lib/utils.ts

@@ -25,10 +25,6 @@ export const formatCompactDate = (dateString: string): string => {
   return date.toLocaleDateString("en-GB", options);
 };
 
-export const formatPhoneNumber = (phoneNumber: string): string => {
-  return phoneNumber.replace(/(\d{5})(\d{3})(\d{3})/, "$1 $2 $3");
-};
-
 export function getCurrentDate(): string {
   const date = new Date();
   const year = date.getFullYear();

application/CohortManager/src/Web/app/participant-information/[exceptionId]/page.tsx

@@ -17,6 +17,7 @@ export default async function Page(props: {
   readonly params: Promise<{
     readonly exceptionId: string;
   }>;
+  readonly searchParams?: Promise<{ readonly edit?: string }>;
 }) {
   const session = await auth();
   const isCohortManager = await canAccessCohortManager(session);
@@ -27,6 +28,10 @@ export default async function Page(props: {
 
   const params = await props.params;
   const exceptionId = Number(params.exceptionId);
+  const resolvedSearchParams = props.searchParams
+    ? await props.searchParams
+    : {};
+  const isEditMode = resolvedSearchParams.edit === "true";
 
   try {
     const exception = await fetchExceptions(exceptionId);
@@ -58,10 +63,6 @@ export default async function Page(props: {
           ? `, ${exception.ExceptionDetails.ParticipantAddressLine5}`
           : ""
       }, ${exception.ExceptionDetails.ParticipantPostCode}`,
-      contactDetails: {
-        phoneNumber: exception.ExceptionDetails.TelephoneNumberHome,
-        email: exception.ExceptionDetails.EmailAddressHome,
-      },
       primaryCareProvider: exception.ExceptionDetails.PrimaryCareProvider,
       serviceNowId: exception.ServiceNowId ?? "",
       serviceNowCreatedDate: exception.ServiceNowCreatedDate,
@@ -94,7 +95,7 @@ export default async function Page(props: {
                   Local reference (exception ID): {exceptionDetails.exceptionId}
                 </span>
               </h1>
-              {exceptionDetails.serviceNowId && (
+              {exceptionDetails.serviceNowId && !isEditMode && (
                 <dl
                   className="nhsuk-summary-list"
                   data-testid="exception-details-labels"
@@ -148,10 +149,11 @@ export default async function Page(props: {
                       className="nhsuk-summary-list__actions"
                       data-testid="change-link"
                     >
-                      <a href="#">
+                      <a href="?edit=true#exception-status">
                         Change{" "}
                         <span className="nhsuk-u-visually-hidden">
                           ServiceNow Case ID
+                          {isEditMode}
                         </span>
                       </a>
                     </dd>
@@ -160,6 +162,7 @@ export default async function Page(props: {
               )}
               <ParticipantInformationPanel
                 exceptionDetails={exceptionDetails}
+                isEditMode={isEditMode}
               />
             </div>
           </div>