541b91e34c
Feat/SW-1281 ancillaries add flow * feat(SW-1546): update design * feat(SW-1546): show points only if logged in * feat(SW-1546): always show points * feat(SW-1281): ancillary add flow initial * feat(SW-1546): add api call * feat(SW-1281): refactor naming and break out components * feat(SW-1281): handle back button * feat(SW-1281): make mobile cards clickable * feat(SW-1281): refactor spread ancillaries * feat(SW-1281): add deliverytimes * feat(SW-1281): rebase master * feat(SW-1281): add design for logged in or not * feat(SW-1281): add design * feat(SW-1281): add mobile design * feat(SW-1281): fix carousel * feat(SW-1281): show deliverytime only if ancillary has not been added * feat(SW-1281): add design * feat(SW-1281): add translations * feat(SW-1281): add translations * feat(SW-1281): add translations * feat(SW-1281): base dates on check in date only * feat(SW-1281): fix show correct toast when no valid data * feat(SW-1281): hande logic if deliverytime is not required * feat(SW-1281): fix max width for mobile * feat(SW-1281): refactor after pr comment Approved-by: Niclas Edenvin Approved-by: Linus Flood
121 lines
4.0 KiB
TypeScript
121 lines
4.0 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 }}>
|
|
<Caption>
|
|
{intl.formatMessage<React.ReactNode>(
|
|
{
|
|
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<React.ReactNode>(
|
|
{ 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">
|
|
{totalPoints} {intl.formatMessage({ id: "points" })}
|
|
</Body>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|