From 4894319f4aaedabbd87d84431652fd802ad989b5 Mon Sep 17 00:00:00 2001
From: Jun Tao Luo <john.luo@agile6.com>
Date: Fri, 4 Oct 2024 22:28:39 -0400
Subject: [PATCH] Update cancel request confirmation

---
 .../cancel/CancelPageLayoutRequest.jsx        | 142 +++++++++---------
 .../components/layout/CCRequestLayout.jsx     |   2 +-
 .../components/layout/DetailPageLayout.jsx    |   6 +-
 .../components/layout/VARequestLayout.jsx     |   2 +-
 4 files changed, 77 insertions(+), 75 deletions(-)

diff --git a/src/applications/vaos/appointment-list/components/cancel/CancelPageLayoutRequest.jsx b/src/applications/vaos/appointment-list/components/cancel/CancelPageLayoutRequest.jsx
index 83dbfc50204b..26c0a4374980 100644
--- a/src/applications/vaos/appointment-list/components/cancel/CancelPageLayoutRequest.jsx
+++ b/src/applications/vaos/appointment-list/components/cancel/CancelPageLayoutRequest.jsx
@@ -7,6 +7,8 @@ import FacilityPhone from '../../../components/FacilityPhone';
 import VAFacilityLocation from '../../../components/VAFacilityLocation';
 import { selectRequestedAppointmentDetails } from '../../redux/selectors';
 import ListBestTimeToCall from '../ListBestTimeToCall';
+import { Details, Section } from '../../../components/layout/DetailPageLayout';
+import { APPOINTMENT_STATUS } from '../../../utils/constants';
 
 export default function CancelPageLayoutRequest() {
   const { id } = useParams();
@@ -22,8 +24,10 @@ export default function CancelPageLayoutRequest() {
     preferredLanguage,
     preferredTimesForPhoneCall,
     provider: preferredProvider,
+    providerAddress,
     typeOfCareName,
     preferredModality,
+    status,
   } = useSelector(
     state => selectRequestedAppointmentDetails(state, id),
     shallowEqual,
@@ -33,90 +37,88 @@ export default function CancelPageLayoutRequest() {
     reason = null;
     otherDetails = bookingNotes;
   }
+  const { providerName, treatmentSpecialty } = preferredProvider || {};
 
   return (
     <>
       <h2 className="vads-u-font-size--h3 vads-u-margin-y--0">
         {`Request for ${isCC ? 'community care appointment' : 'appointment'}`}
       </h2>
-      <h3 className="vads-u-font-size--h5 vads-u-margin-bottom--0">
-        Preferred date and time
-      </h3>
-      <ul className="usa-unstyled-list">
-        {preferredDates.map((date, index) => (
-          <li key={`${id}-option-${index}`}>{date}</li>
-        ))}
-      </ul>
-      <h3 className="vads-u-font-size--h5 vads-u-margin-bottom--0">
-        Type of care
-      </h3>
-      {typeOfCareName}
+      <Section heading="Preferred date and time" level={3}>
+        <ul className="usa-unstyled-list">
+          {preferredDates.map((date, index) => (
+            <li key={`${id}-option-${index}`}>{date}</li>
+          ))}
+        </ul>
+      </Section>
+      <Section heading="Type of care" level={3}>
+        {typeOfCareName || 'Type of care not noted'}
+      </Section>
       {isCC && (
         <>
-          <h3 className="vads-u-font-size--h5 vads-u-margin-bottom--0">
-            Scheduling facility
-          </h3>
-          <span>{facility?.name}</span>
-          <h3 className="vads-u-font-size--h5 vads-u-margin-bottom--0">
-            Preferred community care provider
-          </h3>
-          {preferredProvider?.providerName ||
-            'Provider information not available'}
-          <h3 className="vads-u-font-size--h5 vads-u-margin-bottom--0">
-            Language you’d prefer the provider speak
-          </h3>
-          {preferredLanguage}
+          <Section heading="Scheduling facility" level={3}>
+            {APPOINTMENT_STATUS.cancelled !== status && (
+              <span>
+                This facility will contact you if we need more information about
+                your request.
+                <br />
+                <br />
+              </span>
+            )}
+            {facility?.name}
+          </Section>
+          <Section heading="Preferred community care provider" level={3}>
+            <span>{`${providerName || 'Provider name not available'}`}</span>
+            <br />
+            <span>
+              {`${treatmentSpecialty || 'Treatment specialty not available'}`}
+            </span>
+            <br />
+            {providerAddress && <span>{providerAddress.line[0]}</span>}
+            {!providerAddress && <span>Address not available</span>}
+            <br />
+          </Section>
+          <Section heading="Language you’d prefer the provider speak" level={3}>
+            {preferredLanguage}
+          </Section>
         </>
       )}
       {!isCC && (
         <>
-          <h3 className="vads-u-font-size--h5 vads-u-margin-bottom--0">
-            How you prefer to attend
-          </h3>
-          {preferredModality}
-          <h3 className="vads-u-font-size--h5 vads-u-margin-bottom--0">
-            Facility
-          </h3>
-          <VAFacilityLocation
-            facility={facility}
-            facilityName={facility?.name}
-            facilityId={facilityId}
-            isPhone={false}
-            showPhone={false}
-            showDirectionsLink={false}
-          />
-          <h3 className="vads-u-font-size--h5 vads-u-margin-bottom--0">
-            Phone
-          </h3>
-          <FacilityPhone contact={facilityPhone} icon />
+          <Section heading="How you prefer to attend" level={3}>
+            <span>{preferredModality}</span>
+          </Section>
+          <Section heading="Facility" level={3}>
+            <VAFacilityLocation
+              facility={facility}
+              facilityName={facility?.name}
+              facilityId={facilityId}
+              isPhone={false}
+              showPhone={false}
+              showDirectionsLink={false}
+            />
+          </Section>
+          <Section heading="Phone" level={3}>
+            <FacilityPhone contact={facilityPhone} icon />
+          </Section>
         </>
       )}
-
-      <h3 className="vads-u-font-size--h5 vads-u-margin-bottom--0">
-        Details you’d like to share with your provider
-      </h3>
-      <span>
-        Reason: {`${reason && reason !== 'none' ? reason : 'Not available'}`}
-      </span>
-      <br />
-      <span className="vaos-u-word-break--break-word">
-        Other details: {`${otherDetails || 'Not available'}`}
-      </span>
-      <h3 className="vads-u-font-size--h5 vads-u-margin-bottom--0">
-        Your contact details
-      </h3>
-      <span>Email: </span>
-      <span data-dd-privacy="mask">{email}</span>
-      <br />
-      <span>Phone number: </span>
-      <VaTelephone
-        data-dd-privacy="mask"
-        notClickable
-        contact={phone}
-        data-testid="patient-telephone"
-      />
-      <br />
-      {isCC && <ListBestTimeToCall timesToCall={preferredTimesForPhoneCall} />}
+      <Details reason={reason} otherDetails={otherDetails} request level={3} />
+      <Section heading="Your contact details" level={3}>
+        <span data-dd-privacy="mask">Email: {email}</span>
+        <br />
+        <span>Phone number: </span>
+        <VaTelephone
+          data-dd-privacy="mask"
+          notClickable
+          contact={phone}
+          data-testid="patient-telephone"
+        />
+        <br />
+        {isCC && (
+          <ListBestTimeToCall timesToCall={preferredTimesForPhoneCall} />
+        )}
+      </Section>
     </>
   );
 }
diff --git a/src/applications/vaos/components/layout/CCRequestLayout.jsx b/src/applications/vaos/components/layout/CCRequestLayout.jsx
index 9c69f1b499dd..380fa6b52783 100644
--- a/src/applications/vaos/components/layout/CCRequestLayout.jsx
+++ b/src/applications/vaos/components/layout/CCRequestLayout.jsx
@@ -83,7 +83,7 @@ export default function CCRequestLayout({ data: appointment }) {
         <Section heading="Language you’d prefer the provider speak">
           {preferredLanguage}
         </Section>
-        <Details reason={reason} otherDetails={otherDetails} isRequest />
+        <Details reason={reason} otherDetails={otherDetails} request />
         <Section heading="Your contact details">
           <span data-dd-privacy="mask">Email: {email}</span>
           <br />
diff --git a/src/applications/vaos/components/layout/DetailPageLayout.jsx b/src/applications/vaos/components/layout/DetailPageLayout.jsx
index 9b2d1d77bd67..bc1bf843cb24 100644
--- a/src/applications/vaos/components/layout/DetailPageLayout.jsx
+++ b/src/applications/vaos/components/layout/DetailPageLayout.jsx
@@ -99,8 +99,8 @@ Prepare.propTypes = {
   children: PropTypes.node,
 };
 
-export function Details({ reason, otherDetails, isRequest, level = 2 }) {
-  const heading = isRequest
+export function Details({ reason, otherDetails, request, level = 2 }) {
+  const heading = request
     ? 'Details you’d like to share with your provider'
     : 'Details you shared with your provider';
   return (
@@ -116,10 +116,10 @@ export function Details({ reason, otherDetails, isRequest, level = 2 }) {
   );
 }
 Details.propTypes = {
-  isRequest: PropTypes.bool,
   level: PropTypes.number,
   otherDetails: PropTypes.string,
   reason: PropTypes.string,
+  request: PropTypes.bool,
 };
 
 export function ClinicOrFacilityPhone({
diff --git a/src/applications/vaos/components/layout/VARequestLayout.jsx b/src/applications/vaos/components/layout/VARequestLayout.jsx
index 6a6411a70c2f..cff37a9bcfd0 100644
--- a/src/applications/vaos/components/layout/VARequestLayout.jsx
+++ b/src/applications/vaos/components/layout/VARequestLayout.jsx
@@ -75,7 +75,7 @@ export default function VARequestLayout({ data: appointment }) {
             {!facilityPhone && <>Not available</>}
           </div>
         </Section>
-        <Details reason={reason} otherDetails={otherDetails} isRequest />
+        <Details reason={reason} otherDetails={otherDetails} request />
         <Section heading="Your contact details">
           <span data-dd-privacy="mask">Email: {email}</span>
           <br />