scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-614): Add mustBeGuaranteed flag and update content based on this

Browse Source
This commit is contained in:
Tobias Johansson
2024-10-23 13:22:49 +02:00
parent 6523e2329b
commit a690750c36
12 changed files with 144 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
components/HotelReservation/EnterDetails/Payment/GuaranteeDetails/guaranteeDetails.module.css Normal file
View File

@@ -0,0 +1,26 @@
.content {
display: flex;
flex-direction: column;
gap: var(--Spacing-x1);
padding-top: var(--Spacing-x2);
}
.content ol {
margin: 0;
}
.summary {
list-style: none;
display: flex;
align-items: center;
gap: var(--Spacing-x-half);
}
.summary::-webkit-details-marker,
.summary::marker {
display: none;
}
.summary .icon {
height: 16px;
}

50
components/HotelReservation/EnterDetails/Payment/GuaranteeDetails/index.tsx Normal file
View File

@@ -0,0 +1,50 @@
import { useIntl } from "react-intl"
import ChevronDown from "@/components/Icons/ChevronDown"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import styles from "./guaranteeDetails.module.css"
export default function GuaranteeDetails() {
const intl = useIntl()
return (
<details>
<Caption color="burgundy" type="bold" asChild>
<summary className={styles.summary}>
{intl.formatMessage({ id: "How it works" })}
<ChevronDown color="burgundy" className={styles.icon} />
</summary>
</Caption>
<section className={styles.content}>
<Body>
{intl.formatMessage({
id: "When guaranteeing your booking, we will hold the booking until 07:00 until the day after check-in. This will provide you as a guest with added flexibility for check-in times.",
})}
</Body>
<Body>
{intl.formatMessage({
id: "What you have to do to guarantee booking:",
})}
</Body>
<ol>
<Body asChild>
<li>{intl.formatMessage({ id: "Complete the booking" })}</li>
</Body>
<Body asChild>
<li>
{intl.formatMessage({
id: "Provide a payment card in the next step",
})}
</li>
</Body>
</ol>
<Body>
{intl.formatMessage({
id: "Please note that this is mandatory, and that your card will only be charged in the event of a no-show.",
})}
</Body>
</section>
</details>
)
}

17
components/HotelReservation/EnterDetails/Payment/index.tsx
View File

@@ -30,6 +30,7 @@ import { toast } from "@/components/TempDesignSystem/Toasts"
import { useHandleBookingStatus } from "@/hooks/booking/useHandleBookingStatus"
import useLang from "@/hooks/useLang"
import GuaranteeDetails from "./GuaranteeDetails"
import PaymentOption from "./PaymentOption"
import { PaymentFormData, paymentSchema } from "./schema"
@@ -48,6 +49,7 @@ export default function Payment({
hotelId,
otherPaymentOptions,
savedCreditCards,
mustBeGuaranteed,
}: PaymentProps) {
const router = useRouter()
const lang = useLang()
@@ -169,12 +171,26 @@ export default function Payment({
return <LoadingSpinner />
}
const paymentVerb = mustBeGuaranteed
? intl.formatMessage({ id: "guaranteeing" })
: intl.formatMessage({ id: "paying" })
return (
<FormProvider {...methods}>
<form
className={styles.paymentContainer}
onSubmit={methods.handleSubmit(handleSubmit)}
>
{mustBeGuaranteed ? (
<section className={styles.section}>
<Body>
{intl.formatMessage({
id: "To secure your reservation, we kindly ask you to provide your payment card details. Rest assured, no charges will be made at this time.",
})}
</Body>
<GuaranteeDetails />
</section>
) : null}
{savedCreditCards?.length ? (
<section className={styles.section}>
<Body color="uiTextHighContrast" textTransform="bold">
@@ -238,6 +254,7 @@ export default function Payment({
id: "booking.terms",
},
{
paymentVerb,
termsLink: (str) => (
<Link
className={styles.link}