104 lines
3.7 KiB
TypeScript
104 lines
3.7 KiB
TypeScript
import { useWatch } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { Divider } from "@scandic-hotels/design-system/Divider"
|
|
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import { GuaranteeInfo } from "../../Payment/GuaranteeInfo"
|
|
import { ConfirmBookingPaymentOptions } from "../PaymentOptions"
|
|
|
|
import styles from "./guarantee.module.css"
|
|
|
|
import type { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
|
|
import type { CreditCard } from "@scandic-hotels/trpc/types/user"
|
|
|
|
interface GuaranteeProps {
|
|
mustBeGuaranteed: boolean
|
|
savedCreditCards: CreditCard[] | null
|
|
otherPaymentOptions?: PaymentMethodEnum[]
|
|
}
|
|
|
|
export function Guarantee({
|
|
mustBeGuaranteed,
|
|
savedCreditCards,
|
|
otherPaymentOptions,
|
|
}: GuaranteeProps) {
|
|
const intl = useIntl()
|
|
const guarantee = useWatch({ name: "guarantee" })
|
|
|
|
return (
|
|
<div className={styles.guarantee}>
|
|
{!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}
|
|
|
|
{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>
|
|
)
|
|
}
|