abd401c4f4
Feat/SW-1368 1369 Guarantee late arrival * feat(SW-1368-SW-1369): guarantee late arrival for confirmation page and my stay * feat(SW-1368-SW-1369): guarantee late arrival updated design * feat(SW-1368-SW-1369): add translations * feat(SW-1368-SW-1369): add translations * feat(SW-1368-SW-1369): fix merge with master * feat(SW-1368-SW-1369): add translations * feat(SW-1368-SW-1369): add redirect with refId * feat(SW-1368-SW-1369): if booking completed redirect to confirmation page * feat(SW-1368-SW-1369): fix comments pr * feat(SW-1368-SW-1369): fix comments pr * feat(SW-1368-SW-1369): fix rebase master * feat(SW-1368-SW-1369): fix duplicate flex rate check * feat(SW-1368-SW-1369): if any room is flex, card must be used * feat(SW-1368-SW-1369): move callback route * feat(SW-1368-SW-1369): top align checkbox * feat(SW-1368-SW-1369): top align checkbox Approved-by: Tobias Johansson Approved-by: Niclas Edenvin
128 lines
4.1 KiB
TypeScript
128 lines
4.1 KiB
TypeScript
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 (
|
|
<div className={styles.modalContent}>
|
|
<header>
|
|
<Subtitle type="two">
|
|
{intl.formatMessage({
|
|
id: "Reserve with Card",
|
|
})}
|
|
</Subtitle>
|
|
</header>
|
|
<Body>
|
|
{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.",
|
|
})}
|
|
</Body>
|
|
<div className={styles.card}>
|
|
<CreditCard color="black" />
|
|
<Body textTransform="bold">{"MasterCard"}</Body>
|
|
<Body color="uiTextMediumContrast">{"**** 1234"}</Body>
|
|
</div>
|
|
<Checkbox
|
|
name="termsAndConditions"
|
|
registerOptions={{ required: true }}
|
|
topAlign
|
|
>
|
|
<Caption>
|
|
{intl.formatMessage(
|
|
{
|
|
id: "Yes, I accept the general <termsAndConditionsLink>Terms & Conditions</termsAndConditionsLink>, and understand that Scandic will process my personal data in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. There you can learn more about what data we process, your rights and where to turn if you have questions.",
|
|
},
|
|
{
|
|
termsAndConditionsLink: (str) => (
|
|
<Link
|
|
className={styles.link}
|
|
variant="underscored"
|
|
href={bookingTermsAndConditions[lang]}
|
|
target="_blank"
|
|
>
|
|
{str}
|
|
</Link>
|
|
),
|
|
privacyPolicyLink: (str) => (
|
|
<Link
|
|
className={styles.link}
|
|
variant="underscored"
|
|
href={privacyPolicy[lang]}
|
|
target="_blank"
|
|
>
|
|
{str}
|
|
</Link>
|
|
),
|
|
}
|
|
)}
|
|
</Caption>
|
|
</Checkbox>
|
|
|
|
<div className={styles.price}>
|
|
<Caption>
|
|
{intl.formatMessage(
|
|
{ id: "<b>Total price</b> (incl VAT)" },
|
|
{ b: (str) => <b>{str}</b> }
|
|
)}
|
|
</Caption>
|
|
{totalPrice !== null && (
|
|
<Body textTransform="bold" color="uiTextHighContrast">
|
|
{formatPrice(intl, totalPrice, selectedAncillary.price.currency)}
|
|
</Body>
|
|
)}
|
|
{totalPoints !== null && (
|
|
<div>
|
|
<div>
|
|
<Divider variant="vertical" color="subtle" />
|
|
</div>
|
|
<Body textTransform="bold" color="uiTextHighContrast">
|
|
{intl.formatMessage(
|
|
{ id: "{value} points" },
|
|
{ value: totalPoints }
|
|
)}
|
|
</Body>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|