import { useFormContext } from "react-hook-form" import { useIntl } from "react-intl" import { bookingTermsAndConditions, privacyPolicy, } from "@/constants/currentWebHrefs" import { useAddAncillaryStore } from "@/stores/my-stay/add-ancillary-flow" import { CreditCard } from "@/components/Icons" import Divider from "@/components/TempDesignSystem/Divider" import Checkbox from "@/components/TempDesignSystem/Form/Checkbox" import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import useLang from "@/hooks/useLang" import { formatPrice } from "@/utils/numberFormatting" import styles from "./confirmationStep.module.css" export default function ConfirmationStep() { const { watch } = useFormContext() const { selectedAncillary } = useAddAncillaryStore() const intl = useIntl() const lang = useLang() const quantityWithPoints = watch("quantityWithPoints") const quantityWithCard = watch("quantityWithCard") if (!selectedAncillary) { return null } const totalPrice = quantityWithCard ? selectedAncillary.price.total * quantityWithCard : null const totalPoints = quantityWithPoints && selectedAncillary.points ? selectedAncillary.points * quantityWithPoints : null return (
{intl.formatMessage({ id: "Reserve with Card", })}
{intl.formatMessage({ id: "Payment will be made on check-in. The card will be only used to guarantee the ancillary in case of no-show.", })}
{"MasterCard"} {"**** 1234"}
{intl.formatMessage( { id: "Yes, I accept the general Terms & Conditions, and understand that Scandic will process my personal data in accordance with Scandic's Privacy policy. There you can learn more about what data we process, your rights and where to turn if you have questions.", }, { termsAndConditionsLink: (str) => ( {str} ), privacyPolicyLink: (str) => ( {str} ), } )}
{intl.formatMessage( { id: "Total price (incl VAT)" }, { b: (str) => {str} } )} {totalPrice !== null && ( {formatPrice(intl, totalPrice, selectedAncillary.price.currency)} )} {totalPoints !== null && (
{totalPoints} {intl.formatMessage({ id: "points" })}
)}
) }