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

feat(BOOK-469): Enter details design changes with guarantee/non-guarantee flow

Browse Source 
Approved-by: Bianca Widstam
This commit is contained in:
Erik Tiekstra
2025-11-24 07:24:52 +00:00
parent ea30e59ab7
commit 02aac9006e
18 changed files with 646 additions and 569 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/index.tsx
View File

@@ -1,21 +1,13 @@
"use client"
import { useLayoutEffect } from "react"
import {
Dialog,
DialogTrigger,
Modal,
ModalOverlay,
} from "react-aria-components"
import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl"
import useSetOverflowVisibleOnRA from "@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA"
import { Button } from "@scandic-hotels/design-system/Button"
import { Divider } from "@scandic-hotels/design-system/Divider"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import { SelectPaymentMethod } from "@scandic-hotels/design-system/Form/SelectPaymentMethod"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trackUpdatePaymentMethod } from "@scandic-hotels/tracking/payment"
import { GuaranteeInfo } from "../../Payment/GuaranteeInfo"
import { ConfirmBookingPaymentOptions } from "../PaymentOptions"
import styles from "./guarantee.module.css"
@@ -23,114 +15,89 @@ import type { PaymentMethodEnum } from "@scandic-hotels/common/constants/payment
import type { CreditCard } from "@scandic-hotels/trpc/types/user"
interface GuaranteeProps {
mustBeGuaranteed: boolean
savedCreditCards: CreditCard[] | null
otherPaymentOptions: PaymentMethodEnum[]
}
export default function Guarantee({ savedCreditCards }: GuaranteeProps) {
export function Guarantee({
mustBeGuaranteed,
savedCreditCards,
otherPaymentOptions,
}: GuaranteeProps) {
const intl = useIntl()
const guarantee = useWatch({ name: "guarantee" })
return (
<div className={styles.guarantee}>
<Checkbox name="guarantee">
<div className={styles.checkboxContainer}>
<Typography variant="Body/Supporting text (caption)/smRegular">
<span>
{intl.formatMessage({
id: "enterDetails.confirmBooking.guaranteeLabel",
defaultMessage:
"I may arrive later than 18:00 and want to guarantee my booking.",
})}
</span>
</Typography>
<DialogTrigger>
<Button
className={styles.infoButton}
size="Small"
typography="Body/Supporting text (caption)/smBold"
variant="Text"
>
<MaterialIcon icon="info" size={20} color="CurrentColor" />
<span className={styles.btnText}>
{intl.formatMessage({
id: "common.howItWorks",
defaultMessage: "How it works",
})}
</span>
</Button>
<ModalOverlay className={styles.overlay} isDismissable>
<Modal className={styles.modal}>
<Dialog>
{({ close }) => (
<div className={styles.container}>
<Typography variant="Title/Subtitle/lg">
<h3>
{intl.formatMessage({
id: "enterDetails.confirmBooking.guaranteeInfoModalTitle",
defaultMessage: "Guarantee for late arrival",
})}
</h3>
</Typography>
<Typography variant="Body/Lead text">
<p className={styles.text}>
{intl.formatMessage({
id: "enterDetails.confirmBooking.guaranteeInfoModalDescription",
defaultMessage:
"When guaranteeing your booking with a credit card, we will hold the booking until 07:00 the day after check-in.",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.text}>
{intl.formatMessage({
id: "enterDetails.confirmBooking.guaranteeInfoModalNoShowInfo",
defaultMessage:
"In case of a no-show, your credit card will be charged for the first night.",
})}
</p>
</Typography>
<Button
className={styles.closeButton}
onPress={close}
size="Small"
typography="Body/Paragraph/mdBold"
variant="Secondary"
>
{intl.formatMessage({
id: "common.close",
defaultMessage: "Close",
})}
</Button>
<RestoreOverflow />
</div>
)}
</Dialog>
</Modal>
</ModalOverlay>
</DialogTrigger>
</div>
</Checkbox>
{!mustBeGuaranteed ? (
<>
<div className={styles.guaranteeQuestion}>
<Checkbox name="guarantee" topAlign className={styles.checkbox}>
<div className={styles.textWrapper}>
<Typography variant="Body/Supporting text (caption)/smBold">
<p>
{intl.formatMessage({
id: "enterDetails.guarantee.guaranteeLabel",
defaultMessage: "Guarantee for late arrival",
})}
</p>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{intl.formatMessage({
id: "enterDetails.guarantee.guaranteeInfo",
defaultMessage:
"I may arrive later than 18:00 and want the hotel to hold my booking.",
})}
</p>
</Typography>
</div>
</Checkbox>
<GuaranteeInfo buttonClassName={styles.guaranteeInfoButton} />
</div>
{guarantee ? <Divider color="Border/Divider/Default" /> : null}
</>
) : null}
{guarantee && (
<SelectPaymentMethod
paymentMethods={(savedCreditCards ?? []).map((card) => ({
...card,
cardType: card.cardType as PaymentMethodEnum,
}))}
onChange={(method) => {
trackUpdatePaymentMethod({ method })
}}
formName={"paymentMethod"}
/>
)}
{mustBeGuaranteed || guarantee ? (
<>
<div className={styles.paymentRequired}>
<MaterialIcon icon="credit_card" size={24} color="CurrentColor" />
<div className={styles.textWrapper}>
<Typography variant="Body/Supporting text (caption)/smBold">
<p>
{intl.formatMessage({
id: "enterDetails.guarantee.paymentCardRequiredLabel",
defaultMessage:
"Payment card required to hold your booking",
})}
</p>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{intl.formatMessage({
id: "enterDetails.guarantee.paymentCardRequiredInfo",
defaultMessage:
"Complete the booking and provide your payment card details in the next step.",
})}
</p>
</Typography>
</div>
</div>
{savedCreditCards && savedCreditCards.length ? (
<>
<Divider color="Border/Divider/Default" />
<ConfirmBookingPaymentOptions
savedCreditCards={savedCreditCards}
hasMixedRates={false}
otherPaymentOptions={otherPaymentOptions}
/>
</>
) : null}
</>
) : null}
</div>
)
}
function RestoreOverflow() {
const setOverflowVisible = useSetOverflowVisibleOnRA()
useLayoutEffect(() => {
setOverflowVisible(true)
}, [setOverflowVisible])
return null
}