Skip to content

Commit

Permalink
Update cancel request confirmation
Browse files Browse the repository at this point in the history
  • Loading branch information
@JunTaoLuo
JunTaoLuo committed Oct 5, 2024
1 parent af584b7 commit 4894319
Show file tree
Hide file tree
Showing 4 changed files with 77 additions and 75 deletions.
142 changes: 72 additions & 70 deletions src/applications/vaos/appointment-list/components/cancel/CancelPageLayoutRequest.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -22,8 +24,10 @@ export default function CancelPageLayoutRequest() {
preferredLanguage,
preferredTimesForPhoneCall,
provider: preferredProvider,
providerAddress,
typeOfCareName,
preferredModality,
status,
} = useSelector(
state => selectRequestedAppointmentDetails(state, id),
shallowEqual,
Expand All @@ -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>
</>
);
}
2 changes: 1 addition & 1 deletion src/applications/vaos/components/layout/CCRequestLayout.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
6 changes: 3 additions & 3 deletions src/applications/vaos/components/layout/DetailPageLayout.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand All @@ -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({
Expand Down
2 changes: 1 addition & 1 deletion src/applications/vaos/components/layout/VARequestLayout.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down

0 comments on commit 4894319

Please sign in to comment.