93 lines
2.8 KiB
TypeScript
93 lines
2.8 KiB
TypeScript
"use client"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { Divider } from "@scandic-hotels/design-system/Divider"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import TermsAndConditions from "../Payment/TermsAndConditions"
|
|
import { Guarantee } from "./Guarantee"
|
|
import { ConfirmBookingPaymentOptions } from "./PaymentOptions"
|
|
import SmsConfirmation from "./SmsConfirmation"
|
|
|
|
import styles from "./confirm.module.css"
|
|
|
|
import type { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
|
|
import type { CreditCard } from "@scandic-hotels/trpc/types/user"
|
|
|
|
interface ConfirmBookingProps {
|
|
savedCreditCards: CreditCard[] | null
|
|
otherPaymentOptions: PaymentMethodEnum[]
|
|
hasOnlyFlexRates: boolean
|
|
hasMixedRates: boolean
|
|
isRedemptionBooking: boolean
|
|
bookingMustBeGuaranteed: boolean
|
|
}
|
|
|
|
export default function ConfirmBooking({
|
|
savedCreditCards,
|
|
otherPaymentOptions,
|
|
hasOnlyFlexRates,
|
|
hasMixedRates,
|
|
isRedemptionBooking,
|
|
bookingMustBeGuaranteed,
|
|
}: ConfirmBookingProps) {
|
|
const intl = useIntl()
|
|
|
|
if (isRedemptionBooking) {
|
|
return (
|
|
<div className={styles.confirmBooking}>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p>
|
|
{intl.formatMessage({
|
|
id: "enterDetails.confirmBooking.redemptionGuaranteeInfo",
|
|
defaultMessage:
|
|
"When you confirm the booking the room will be guaranteed for late arrival. If you fail to arrive without cancelling in advance or if you cancel after 18:00 local time, you will be charged for one reward night.",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
<TermsAndConditions isFlexBookingTerms />
|
|
<SmsConfirmation />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
if (hasOnlyFlexRates) {
|
|
return (
|
|
<div className={styles.confirmBooking}>
|
|
<Guarantee
|
|
mustBeGuaranteed={bookingMustBeGuaranteed}
|
|
savedCreditCards={savedCreditCards}
|
|
/>
|
|
<Divider color="Border/Divider/Subtle" />
|
|
<TermsAndConditions isFlexBookingTerms />
|
|
<SmsConfirmation />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className={styles.confirmBooking}>
|
|
{hasMixedRates ? (
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<p>
|
|
{intl.formatMessage({
|
|
id: "enterDetails.payment.mixedRatesInfo",
|
|
defaultMessage:
|
|
"As your booking includes rooms with different terms, we will be charging part of the booking now and the remainder will be collected by the reception at check-in.",
|
|
})}
|
|
</p>
|
|
</Typography>
|
|
) : null}
|
|
|
|
<ConfirmBookingPaymentOptions
|
|
savedCreditCards={savedCreditCards}
|
|
hasMixedRates={hasMixedRates}
|
|
otherPaymentOptions={otherPaymentOptions}
|
|
/>
|
|
|
|
<TermsAndConditions isFlexBookingTerms={hasOnlyFlexRates} />
|
|
<SmsConfirmation />
|
|
</div>
|
|
)
|
|
}
|