scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(BOOK-469): Enter details design changes with guarantee/non-guarantee flow

Browse Source 
Approved-by: Bianca Widstam
This commit is contained in:
Erik Tiekstra
2025-11-24 07:24:52 +00:00
parent ea30e59ab7
commit 02aac9006e
18 changed files with 646 additions and 569 deletions
Download Patch File Download Diff File Expand all files Collapse all files

128
packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/guarantee.module.css
View File

@@ -1,102 +1,46 @@
@keyframes overlay-fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes modal-anim {
from {
transform: translateY(100%);
}
to {
transform: translateY(0);
}
}
.guarantee {
display: flex;
flex-direction: column;
gap: var(--Space-x1);
}
.checkboxContainer {
align-items: center;
display: flex;
flex: 1;
gap: var(--Space-x1);
justify-content: space-between;
}
.infoButton {
display: flex;
gap: var(--Space-x05);
justify-self: flex-end;
outline: none;
}
.infoButton:focus-visible {
outline: 2px auto -webkit-focus-ring-color;
outline-offset: 1px;
}
.overlay {
align-items: center;
background-color: var(--Overlay-40);
display: flex;
inset: 0;
justify-content: center;
position: fixed;
z-index: var(--default-modal-overlay-z-index);
&[data-entering] {
animation: overlay-fade 200ms;
}
&[data-exiting] {
animation: overlay-fade 150ms reverse ease-in;
}
}
.modal {
background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-lg);
box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
overflow: hidden;
padding: var(--Space-x5) var(--Space-x3);
width: min(90dvw, 560px);
&[data-entering] {
animation: modal-anim 200ms;
}
&[data-exiting] {
animation: modal-anim 150ms reverse ease-in;
}
}
.container {
align-items: center;
display: flex;
flex-direction: column;
display: grid;
gap: var(--Space-x2);
background-color: var(--Surface-Secondary-Default);
border-radius: var(--Corner-radius-lg);
padding: var(--Space-x2);
}
.text {
text-align: center;
.paymentRequired {
display: flex;
gap: var(--Space-x15);
align-items: flex-start;
}
.closeButton {
margin-top: var(--Space-x15);
outline: none;
width: min(164px, 100%);
.guaranteeQuestion {
display: grid;
gap: var(--Space-x1);
justify-items: start;
}
@media screen and (max-width: 767px) {
.btnText {
display: none;
.textWrapper {
display: grid;
gap: var(--Space-x025);
flex-grow: 1;
}
.checkbox {
flex-grow: 1;
}
.guaranteeInfoButton {
flex-shrink: 0;
margin-left: calc(var(--Space-x3) + var(--Space-x15)); /* Align with checkbox */
}
@media screen and (min-width: 768px) {
.guaranteeQuestion {
display: flex;
gap: var(--Space-x15);
align-items: center;
}
.guaranteeInfoButton {
margin-left: 0;
}
}

189
packages/booking-flow/lib/components/EnterDetails/Confirm/Guarantee/index.tsx
View File

@@ -1,21 +1,13 @@
"use client"
import { useLayoutEffect } from "react"
import {
Dialog,
DialogTrigger,
Modal,
ModalOverlay,
} from "react-aria-components"
import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl"
import useSetOverflowVisibleOnRA from "@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA"
import { Button } from "@scandic-hotels/design-system/Button"
import { Divider } from "@scandic-hotels/design-system/Divider"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import { SelectPaymentMethod } from "@scandic-hotels/design-system/Form/SelectPaymentMethod"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trackUpdatePaymentMethod } from "@scandic-hotels/tracking/payment"
import { GuaranteeInfo } from "../../Payment/GuaranteeInfo"
import { ConfirmBookingPaymentOptions } from "../PaymentOptions"
import styles from "./guarantee.module.css"
@@ -23,114 +15,89 @@ import type { PaymentMethodEnum } from "@scandic-hotels/common/constants/payment
import type { CreditCard } from "@scandic-hotels/trpc/types/user"
interface GuaranteeProps {
mustBeGuaranteed: boolean
savedCreditCards: CreditCard[] | null
otherPaymentOptions: PaymentMethodEnum[]
}
export default function Guarantee({ savedCreditCards }: GuaranteeProps) {
export function Guarantee({
mustBeGuaranteed,
savedCreditCards,
otherPaymentOptions,
}: GuaranteeProps) {
const intl = useIntl()
const guarantee = useWatch({ name: "guarantee" })
return (
<div className={styles.guarantee}>
<Checkbox name="guarantee">
<div className={styles.checkboxContainer}>
<Typography variant="Body/Supporting text (caption)/smRegular">
<span>
{intl.formatMessage({
id: "enterDetails.confirmBooking.guaranteeLabel",
defaultMessage:
"I may arrive later than 18:00 and want to guarantee my booking.",
})}
</span>
</Typography>
<DialogTrigger>
<Button
className={styles.infoButton}
size="Small"
typography="Body/Supporting text (caption)/smBold"
variant="Text"
>
<MaterialIcon icon="info" size={20} color="CurrentColor" />
<span className={styles.btnText}>
{intl.formatMessage({
id: "common.howItWorks",
defaultMessage: "How it works",
})}
</span>
</Button>
<ModalOverlay className={styles.overlay} isDismissable>
<Modal className={styles.modal}>
<Dialog>
{({ close }) => (
<div className={styles.container}>
<Typography variant="Title/Subtitle/lg">
<h3>
{intl.formatMessage({
id: "enterDetails.confirmBooking.guaranteeInfoModalTitle",
defaultMessage: "Guarantee for late arrival",
})}
</h3>
</Typography>
<Typography variant="Body/Lead text">
<p className={styles.text}>
{intl.formatMessage({
id: "enterDetails.confirmBooking.guaranteeInfoModalDescription",
defaultMessage:
"When guaranteeing your booking with a credit card, we will hold the booking until 07:00 the day after check-in.",
})}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p className={styles.text}>
{intl.formatMessage({
id: "enterDetails.confirmBooking.guaranteeInfoModalNoShowInfo",
defaultMessage:
"In case of a no-show, your credit card will be charged for the first night.",
})}
</p>
</Typography>
<Button
className={styles.closeButton}
onPress={close}
size="Small"
typography="Body/Paragraph/mdBold"
variant="Secondary"
>
{intl.formatMessage({
id: "common.close",
defaultMessage: "Close",
})}
</Button>
<RestoreOverflow />
</div>
)}
</Dialog>
</Modal>
</ModalOverlay>
</DialogTrigger>
</div>
</Checkbox>
{!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}
{guarantee && (
<SelectPaymentMethod
paymentMethods={(savedCreditCards ?? []).map((card) => ({
...card,
cardType: card.cardType as PaymentMethodEnum,
}))}
onChange={(method) => {
trackUpdatePaymentMethod({ method })
}}
formName={"paymentMethod"}
/>
)}
{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>
)
}
function RestoreOverflow() {
const setOverflowVisible = useSetOverflowVisibleOnRA()
useLayoutEffect(() => {
setOverflowVisible(true)
}, [setOverflowVisible])
return null
}

112
packages/booking-flow/lib/components/EnterDetails/Confirm/PaymentOptions/index.tsx Normal file
View File

@@ -0,0 +1,112 @@
"use client"
import { Label } from "react-aria-components"
import { useIntl } from "react-intl"
import {
PAYMENT_METHOD_TITLES,
PaymentMethodEnum,
} from "@scandic-hotels/common/constants/paymentMethod"
import { PaymentOption } from "@scandic-hotels/design-system/Form/PaymentOption"
import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentOptionsGroup"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useAvailablePaymentOptions } from "../../../../hooks/useAvailablePaymentOptions"
import { useEnterDetailsStore } from "../../../../stores/enter-details"
import MixedRatePaymentBreakdown from "../../Payment/MixedRatePaymentBreakdown"
import styles from "./paymentOptions.module.css"
import type { CreditCard } from "@scandic-hotels/trpc/types/user"
interface ConfirmBookingPaymentOptionsProps {
savedCreditCards: CreditCard[] | null
hasMixedRates: boolean
otherPaymentOptions: PaymentMethodEnum[]
}
export function ConfirmBookingPaymentOptions({
savedCreditCards,
hasMixedRates,
otherPaymentOptions,
}: ConfirmBookingPaymentOptionsProps) {
const intl = useIntl()
const { rooms, currency } = useEnterDetailsStore((state) => ({
rooms: state.rooms,
currency: state.totalPrice.local.currency,
}))
const availablePaymentOptions =
useAvailablePaymentOptions(otherPaymentOptions)
return (
<>
<PaymentOptionsGroup
name="paymentMethod"
className={styles.paymentOptions}
>
<Label className="sr-only">
{intl.formatMessage({
id: "enterDetails.payment.paymentMethods",
defaultMessage: "Payment methods",
})}
</Label>
{savedCreditCards?.length ? (
<>
<Typography variant="Title/Overline/sm">
<span>
{intl.formatMessage({
id: "payment.mySavedCards",
defaultMessage: "My saved cards",
})}
</span>
</Typography>
{savedCreditCards.map((savedCreditCard) => (
<PaymentOption
key={savedCreditCard.id}
value={savedCreditCard.id as PaymentMethodEnum}
label={
PAYMENT_METHOD_TITLES[
savedCreditCard.cardType as PaymentMethodEnum
]
}
cardNumber={savedCreditCard.truncatedNumber}
/>
))}
<Typography variant="Title/Overline/sm">
<span>
{intl.formatMessage({
id: "enterDetails.payment.otherPaymentMethods",
defaultMessage: "Other payment methods",
})}
</span>
</Typography>
</>
) : null}
<PaymentOption
value={PaymentMethodEnum.card}
label={intl.formatMessage({
id: "common.creditCard",
defaultMessage: "Credit card",
})}
/>
{!hasMixedRates
? availablePaymentOptions.map((paymentMethod) => (
<PaymentOption
key={paymentMethod}
value={paymentMethod}
label={PAYMENT_METHOD_TITLES[paymentMethod]}
/>
))
: null}
</PaymentOptionsGroup>
{hasMixedRates ? (
<MixedRatePaymentBreakdown rooms={rooms} currency={currency} />
) : null}
</>
)
}

4
packages/booking-flow/lib/components/EnterDetails/Confirm/PaymentOptions/paymentOptions.module.css Normal file
View File

@@ -0,0 +1,4 @@
.paymentOptions {
display: grid;
gap: var(--Space-x15);
}

21
packages/booking-flow/lib/components/EnterDetails/Confirm/SmsConfirmation.tsx Normal file
View File

@@ -0,0 +1,21 @@
import { useIntl } from "react-intl"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import { Typography } from "@scandic-hotels/design-system/Typography"
export default function SmsConfirmation() {
const intl = useIntl()
return (
<Checkbox name="smsConfirmation">
<Typography variant="Body/Supporting text (caption)/smRegular">
<span>
{intl.formatMessage({
id: "booking.smsConfirmationLabel",
defaultMessage:
"I would like to get my booking confirmation via sms",
})}
</span>
</Typography>
</Checkbox>
)
}

7
packages/booking-flow/lib/components/EnterDetails/Confirm/confirm.module.css
View File

@@ -1,12 +1,11 @@
.container {
display: flex;
flex-direction: column;
.confirmBooking {
display: grid;
gap: var(--Space-x3);
}
.selections {
background-color: var(--Surface-Secondary-Default);
border-radius: var(--Corner-radius-Large);
border-radius: var(--Corner-radius-lg);
display: flex;
flex-direction: column;
gap: var(--Space-x2);

105
packages/booking-flow/lib/components/EnterDetails/Confirm/index.tsx
View File

@@ -2,67 +2,41 @@
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import { Typography } from "@scandic-hotels/design-system/Typography"
import TermsAndConditions from "../Payment/TermsAndConditions"
import Guarantee from "./Guarantee"
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()
return (
<div className={styles.container}>
<div className={styles.selections}>
<Guarantee savedCreditCards={savedCreditCards} />
<Divider color="Border/Divider/Default" />
<Checkbox name="smsConfirmation">
<Typography variant="Body/Supporting text (caption)/smRegular">
<span>
{intl.formatMessage({
id: "booking.smsConfirmationLabel",
defaultMessage:
"I would like to get my booking confirmation via sms",
})}
</span>
</Typography>
</Checkbox>
</div>
<div className={styles.checkboxContainer}>
<TermsAndConditions isFlexBookingTerms />
</div>
</div>
)
}
export function ConfirmBookingRedemption() {
const intl = useIntl()
return (
<div className={styles.container}>
<div className={styles.selections}>
<Checkbox name="smsConfirmation">
<Typography variant="Body/Supporting text (caption)/smRegular">
<span>
{intl.formatMessage({
id: "booking.smsConfirmationLabel",
defaultMessage:
"I would like to get my booking confirmation via sms",
})}
</span>
</Typography>
</Checkbox>
</div>
<div className={styles.guaranteeContainer}>
<Typography variant="Body/Supporting text (caption)/smRegular">
if (isRedemptionBooking) {
return (
<div className={styles.confirmBooking}>
<Typography variant="Body/Paragraph/mdRegular">
<p>
{intl.formatMessage({
id: "enterDetails.confirmBooking.redemptionGuaranteeInfo",
@@ -71,10 +45,49 @@ export function ConfirmBookingRedemption() {
})}
</p>
</Typography>
</div>
<div className={styles.checkboxContainer}>
<TermsAndConditions isFlexBookingTerms />
<SmsConfirmation />
</div>
)
}
if (hasOnlyFlexRates) {
return (
<div className={styles.confirmBooking}>
<Guarantee
mustBeGuaranteed={bookingMustBeGuaranteed}
savedCreditCards={savedCreditCards}
otherPaymentOptions={otherPaymentOptions}
/>
<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>
)
}

21
packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeInfo/guaranteeInfo.module.css Normal file
View File

@@ -0,0 +1,21 @@
.content {
display: grid;
gap: var(--Space-x3);
align-content: start;
margin-top: var(--Space-x2);
}
.closeButton {
justify-self: stretch;
}
@media screen and (min-width: 768px) {
.dialog {
width: 560px;
}
.closeButton {
justify-self: end;
min-width: 150px;
}
}

75
packages/booking-flow/lib/components/EnterDetails/Payment/GuaranteeInfo/index.tsx Normal file
View File

@@ -0,0 +1,75 @@
"use client"
import { useState } from "react"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Modal from "@scandic-hotels/design-system/Modal"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./guaranteeInfo.module.css"
interface GuaranteeInfoProps {
buttonClassName?: string
}
export function GuaranteeInfo({ buttonClassName }: GuaranteeInfoProps) {
const [isOpen, setIsOpen] = useState(false)
const intl = useIntl()
return (
<>
<Button
variant="Text"
color="Primary"
size="Small"
type="button"
typography="Body/Supporting text (caption)/smBold"
wrapping={false}
className={buttonClassName}
onPress={() => setIsOpen(true)}
>
<MaterialIcon icon="info" size={20} color="CurrentColor" />
{intl.formatMessage({
id: "common.learnMore",
defaultMessage: "Learn more",
})}
</Button>
<Modal
title={intl.formatMessage({
id: "enterDetails.guaranteeInfo.heading",
defaultMessage: "Guarantee room for late arrival",
})}
isOpen={isOpen}
onToggle={setIsOpen}
className={styles.dialog}
>
<div className={styles.content}>
<Typography variant="Body/Lead text">
<p>
{intl.formatMessage({
id: "enterDetails.guaranteeInfo.description",
defaultMessage:
"The hotel will hold your booking, even if you arrive after 18:00. In case of a no-show, your credit card will be charged for the first night.",
})}
</p>
</Typography>
<Button
className={styles.closeButton}
variant="Secondary"
color="Primary"
size="Medium"
typography="Body/Paragraph/mdBold"
onPress={() => setIsOpen(false)}
>
{intl.formatMessage({
id: "common.close",
defaultMessage: "Close",
})}
</Button>
</div>
</Modal>
</>
)
}

215
packages/booking-flow/lib/components/EnterDetails/Payment/PaymentClient.tsx
View File

@@ -4,14 +4,10 @@ import { zodResolver } from "@hookform/resolvers/zod"
import { cx } from "class-variance-authority"
import { usePathname, useRouter, useSearchParams } from "next/navigation"
import { useCallback, useEffect, useState } from "react"
import { Label } from "react-aria-components"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import {
PAYMENT_METHOD_TITLES,
PaymentMethodEnum,
} from "@scandic-hotels/common/constants/paymentMethod"
import { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
import {
bookingConfirmation,
selectRate,
@@ -19,11 +15,7 @@ import {
import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
import { logger } from "@scandic-hotels/common/logger"
import { formatPhoneNumber } from "@scandic-hotels/common/utils/phone"
import Body from "@scandic-hotels/design-system/Body"
import { Button } from "@scandic-hotels/design-system/Button"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import { PaymentOption } from "@scandic-hotels/design-system/Form/PaymentOption"
import { PaymentOptionsGroup } from "@scandic-hotels/design-system/Form/PaymentOptionsGroup"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trackEvent } from "@scandic-hotels/tracking/base"
import {
@@ -37,27 +29,25 @@ import { BookingStatusEnum } from "@scandic-hotels/trpc/enums/bookingStatus"
import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
import { env } from "../../../../env/client"
import { useAvailablePaymentOptions } from "../../../hooks/useAvailablePaymentOptions"
import { useBookingFlowContext } from "../../../hooks/useBookingFlowContext"
import { clearBookingWidgetState } from "../../../hooks/useBookingWidgetState"
import { useHandleBookingStatus } from "../../../hooks/useHandleBookingStatus"
import { useIsLoggedIn } from "../../../hooks/useIsLoggedIn"
import useLang from "../../../hooks/useLang"
import { useEnterDetailsStore } from "../../../stores/enter-details"
import ConfirmBooking, { ConfirmBookingRedemption } from "../Confirm"
import ConfirmBooking from "../Confirm"
import PriceChangeDialog from "../PriceChangeDialog"
import { writeGlaToSessionStorage } from "./PaymentCallback/helpers"
import BookingAlert from "./BookingAlert"
import GuaranteeDetails from "./GuaranteeDetails"
import { GuaranteeInfo } from "./GuaranteeInfo"
import {
hasFlexibleRate,
hasPrepaidRate,
isPaymentMethodEnum,
writePaymentInfoToSessionStorage,
} from "./helpers"
import MixedRatePaymentBreakdown from "./MixedRatePaymentBreakdown"
import { type PaymentFormData, paymentSchema } from "./schema"
import TermsAndConditions from "./TermsAndConditions"
import { getPaymentHeadingConfig } from "./utils"
import styles from "./payment.module.css"
@@ -125,8 +115,6 @@ export default function PaymentClient({
const [isPollingForBookingStatus, setIsPollingForBookingStatus] =
useState(false)
const availablePaymentOptions =
useAvailablePaymentOptions(otherPaymentOptions)
const [priceChangeData, setPriceChangeData] =
useState<PriceChangeData | null>(null)
@@ -136,6 +124,7 @@ export default function PaymentClient({
const hasFlexRates = rooms.some(hasFlexibleRate)
const hasOnlyFlexRates = rooms.every(hasFlexibleRate)
const hasMixedRates = hasPrepaidRates && hasFlexRates
const isRedemptionBooking = booking.searchType === SEARCH_TYPE_REDEMPTION
const methods = useForm<PaymentFormData>({
defaultValues: {
@@ -527,15 +516,6 @@ export default function PaymentClient({
]
)
const finalStep = intl.formatMessage({
id: "enterDetails.payment.onlyFlexRatesTitle",
defaultMessage: "Final step",
})
const selectPayment = intl.formatMessage({
id: "enterDetails.payment.title",
defaultMessage: "Select payment method",
})
const handleInvalidSubmit = async () => {
const valid = await methods.trigger()
if (!valid) {
@@ -543,159 +523,62 @@ export default function PaymentClient({
}
}
const { preHeading, heading, subHeading, showLearnMore } =
getPaymentHeadingConfig(intl, bookingMustBeGuaranteed, hasOnlyFlexRates)
return (
<section
className={cx(styles.paymentSection, {
[styles.disabled]: isSubmitting,
[styles.isSubmitting]: isSubmitting,
})}
>
<header>
<Typography variant="Title/Subtitle/md">
<span>{hasOnlyFlexRates ? finalStep : selectPayment}</span>
</Typography>
<BookingAlert isVisible={showBookingAlert} />
<header className={styles.header}>
<div>
{preHeading ? (
<Typography variant="Title/Overline/sm">
<p>{preHeading}</p>
</Typography>
) : null}
<Typography variant="Title/Subtitle/md">
<h2>{heading}</h2>
</Typography>
{subHeading ? (
<Typography variant="Body/Paragraph/mdBold">
<p>{subHeading}</p>
</Typography>
) : null}
</div>
{showLearnMore ? <GuaranteeInfo /> : null}
</header>
<BookingAlert isVisible={showBookingAlert} />
<FormProvider {...methods}>
<form
className={styles.paymentContainer}
className={styles.paymentForm}
onSubmit={methods.handleSubmit(handleSubmit, handleInvalidSubmit)}
id={formId}
>
{booking.searchType === SEARCH_TYPE_REDEMPTION ? (
<ConfirmBookingRedemption />
) : hasOnlyFlexRates && !bookingMustBeGuaranteed ? (
<ConfirmBooking savedCreditCards={savedCreditCards} />
) : (
<>
{hasOnlyFlexRates && bookingMustBeGuaranteed ? (
<section className={styles.section}>
<Body>
{intl.formatMessage({
id: "enterDetails.payment.guaranteeInfo",
defaultMessage:
"To secure your reservation, we kindly ask you to provide your payment card details. Rest assured, no charges will be made at this time.",
})}
</Body>
<GuaranteeDetails />
</section>
) : null}
<ConfirmBooking
savedCreditCards={savedCreditCards}
otherPaymentOptions={otherPaymentOptions}
hasOnlyFlexRates={hasOnlyFlexRates}
hasMixedRates={hasMixedRates}
isRedemptionBooking={isRedemptionBooking}
bookingMustBeGuaranteed={bookingMustBeGuaranteed}
/>
{hasMixedRates ? (
<Body>
{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.",
})}
</Body>
) : null}
<section className={styles.section}>
<PaymentOptionsGroup
name="paymentMethod"
className={styles.paymentOptionContainer}
>
<Label className="sr-only">
{intl.formatMessage({
id: "enterDetails.payment.paymentMethods",
defaultMessage: "Payment methods",
})}
</Label>
{savedCreditCards?.length ? (
<>
<Typography variant="Title/Overline/sm">
<span>
{intl.formatMessage({
id: "payment.mySavedCards",
defaultMessage: "My saved cards",
})}
</span>
</Typography>
{savedCreditCards.map((savedCreditCard) => (
<PaymentOption
key={savedCreditCard.id}
value={savedCreditCard.id as PaymentMethodEnum}
label={
PAYMENT_METHOD_TITLES[
savedCreditCard.cardType as PaymentMethodEnum
]
}
cardNumber={savedCreditCard.truncatedNumber}
/>
))}
<Typography variant="Title/Overline/sm">
<span>
{intl.formatMessage({
id: "enterDetails.payment.otherPaymentMethods",
defaultMessage: "Other payment methods",
})}
</span>
</Typography>
</>
) : null}
<PaymentOption
value={PaymentMethodEnum.card}
label={intl.formatMessage({
id: "common.creditCard",
defaultMessage: "Credit card",
})}
/>
{!hasMixedRates &&
availablePaymentOptions.map((paymentMethod) => (
<PaymentOption
key={paymentMethod}
value={paymentMethod}
label={
PAYMENT_METHOD_TITLES[
paymentMethod as PaymentMethodEnum
]
}
/>
))}
</PaymentOptionsGroup>
{hasMixedRates ? (
<MixedRatePaymentBreakdown
rooms={rooms}
currency={totalPrice.local.currency}
/>
) : null}
</section>
<div className={styles.checkboxContainer}>
<Checkbox name="smsConfirmation">
<Typography variant="Body/Supporting text (caption)/smRegular">
<span>
{intl.formatMessage({
id: "booking.smsConfirmationLabel",
defaultMessage:
"I would like to get my booking confirmation via sms",
})}
</span>
</Typography>
</Checkbox>
</div>
<section className={styles.section}>
<TermsAndConditions isFlexBookingTerms={hasOnlyFlexRates} />
</section>
</>
)}
<div className={styles.submitButton}>
<Button
type="submit"
isDisabled={isSubmitting}
isPending={isSubmitting}
typography="Body/Supporting text (caption)/smBold"
>
{intl.formatMessage({
id: "enterDetails.completeBooking",
defaultMessage: "Complete booking",
})}
</Button>
</div>
<Button
className={styles.submitButton}
type="submit"
isDisabled={isSubmitting}
isPending={isSubmitting}
size="Medium"
typography="Body/Paragraph/mdBold"
>
{intl.formatMessage({
id: "enterDetails.completeBooking",
defaultMessage: "Complete booking",
})}
</Button>
</form>
</FormProvider>
{priceChangeData ? (

151
packages/booking-flow/lib/components/EnterDetails/Payment/TermsAndConditions/index.tsx
View File

@@ -1,15 +1,14 @@
import { useIntl } from "react-intl"
import Caption from "@scandic-hotels/design-system/Caption"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { TextLink } from "@scandic-hotels/design-system/TextLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useBookingFlowConfig } from "../../../../bookingFlowConfig/bookingFlowConfigContext"
import useLang from "../../../../hooks/useLang"
import { paymentError } from "../schema"
import styles from "../payment.module.css"
import styles from "./termsAndConditions.module.css"
type TermsAndConditionsProps = {
isFlexBookingTerms: boolean
@@ -22,81 +21,10 @@ export default function TermsAndConditions({
const { routes } = useBookingFlowConfig()
return (
<>
<Caption>
{isFlexBookingTerms
? intl.formatMessage(
{
id: "enterDetails.payment.flexBookingTermsAndConditions",
defaultMessage:
"I accept the terms for this booking and the general <termsAndConditionsLink>Booking & Cancellation Terms</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>.",
},
{
termsAndConditionsLink: (str) => (
<Link
className={styles.link}
textDecoration="underline"
href={routes.bookingTermsAndConditions[lang]}
target="_blank"
weight="bold"
size="small"
>
{str}
</Link>
),
privacyPolicyLink: (str) => (
<Link
className={styles.link}
textDecoration="underline"
href={routes.privacyPolicy[lang]}
target="_blank"
weight="bold"
size="small"
>
{str}
</Link>
),
}
)
: intl.formatMessage(
{
id: "enterDetails.payment.termsAndConditions",
defaultMessage:
"By paying with any of the payment methods available, I accept the terms for this booking and the general <termsAndConditionsLink>Booking & Cancellation Terms</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. I also accept that Scandic requires a valid payment card during my visit in case anything is left unpaid.",
},
{
termsAndConditionsLink: (str) => (
<Link
className={styles.link}
textDecoration="underline"
href={routes.bookingTermsAndConditions[lang]}
target="_blank"
weight="bold"
size="small"
>
{str}
</Link>
),
privacyPolicyLink: (str) => (
<Link
className={styles.link}
textDecoration="underline"
href={routes.privacyPolicy[lang]}
target="_blank"
weight="bold"
size="small"
>
{str}
</Link>
),
}
)}
</Caption>
<div className={styles.termsAndConditions}>
<Checkbox
name="termsAndConditions"
registerOptions={{
required: true,
}}
registerOptions={{ required: true }}
errorCodeMessages={{
[paymentError.TERMS_REQUIRED]: intl.formatMessage({
id: "common.mustAcceptTermsError",
@@ -104,7 +32,7 @@ export default function TermsAndConditions({
}),
}}
>
<Typography variant="Body/Paragraph/mdBold">
<Typography variant="Body/Supporting text (caption)/smBold">
<span>
{intl.formatMessage({
id: "booking.acceptBookingTerms",
@@ -113,6 +41,73 @@ export default function TermsAndConditions({
</span>
</Typography>
</Checkbox>
</>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{isFlexBookingTerms
? intl.formatMessage(
{
id: "enterDetails.payment.flexBookingTermsAndConditions",
defaultMessage:
"I accept the terms for this booking and the general <termsAndConditionsLink>Booking & Cancellation Terms</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>.",
},
{
termsAndConditionsLink: (str) => (
<TextLink
href={routes.bookingTermsAndConditions[lang]}
theme="InteractiveDefault"
typography="Link/sm"
target="_blank"
isInline
>
{str}
</TextLink>
),
privacyPolicyLink: (str) => (
<TextLink
href={routes.privacyPolicy[lang]}
theme="InteractiveDefault"
typography="Link/sm"
target="_blank"
isInline
>
{str}
</TextLink>
),
}
)
: intl.formatMessage(
{
id: "enterDetails.payment.termsAndConditions",
defaultMessage:
"By paying with any of the payment methods available, I accept the terms for this booking and the general <termsAndConditionsLink>Booking & Cancellation Terms</termsAndConditionsLink>, and understand that Scandic will process my personal data for this booking in accordance with <privacyPolicyLink>Scandic's Privacy policy</privacyPolicyLink>. I also accept that Scandic requires a valid payment card during my visit in case anything is left unpaid.",
},
{
termsAndConditionsLink: (str) => (
<TextLink
href={routes.bookingTermsAndConditions[lang]}
theme="InteractiveDefault"
typography="Link/sm"
target="_blank"
isInline
>
{str}
</TextLink>
),
privacyPolicyLink: (str) => (
<TextLink
href={routes.privacyPolicy[lang]}
theme="InteractiveDefault"
typography="Link/sm"
target="_blank"
isInline
>
{str}
</TextLink>
),
}
)}
</p>
</Typography>
</div>
)
}

5
packages/booking-flow/lib/components/EnterDetails/Payment/TermsAndConditions/termsAndConditions.module.css Normal file
View File

@@ -0,0 +1,5 @@
.termsAndConditions {
display: grid;
gap: var(--Space-x1);
justify-items: start;
}

78
packages/booking-flow/lib/components/EnterDetails/Payment/payment.module.css
View File

@@ -1,63 +1,51 @@
.paymentSection {
display: flex;
flex-direction: column;
gap: var(--Space-x4);
display: grid;
gap: var(--Space-x2);
width: min(100%, 696px);
&.isSubmitting {
opacity: 0.5;
pointer-events: none;
}
}
.disabled {
opacity: 0.5;
pointer-events: none;
.header {
display: flex;
gap: var(--Space-x1);
align-items: flex-start;
}
.paymentContainer {
display: flex;
flex-direction: column;
.paymentForm {
display: grid;
gap: var(--Space-x4);
max-width: 696px;
}
.section {
display: flex;
flex-direction: column;
gap: var(--Space-x2);
@media screen and (max-width: 767px) {
.header {
flex-direction: column;
}
}
.paymentOptionContainer {
display: flex;
flex-direction: column;
gap: var(--Space-x15);
}
.submitButton {
display: none;
}
.paymentContainer .link {
font-weight: 500;
font-size: var(--Typography-Caption-Regular-fontSize);
}
.terms {
display: flex;
flex-direction: row;
gap: var(--Space-x15);
}
.checkboxContainer {
background-color: var(--Surface-Secondary-Default);
border-radius: var(--Corner-radius-Large);
padding: var(--Space-x2);
}
@media screen and (min-width: 1367px) {
.submitButton {
display: flex;
align-self: flex-start;
@media screen and (min-width: 768px) {
.header {
justify-content: space-between;
}
}
@media screen and (max-width: 1366px) {
.paymentContainer {
.paymentForm {
margin-bottom: 200px;
}
.submitButton {
display: none;
}
}
@media screen and (min-width: 1367px) {
.submitButton {
justify-self: start;
}
}

41
packages/booking-flow/lib/components/EnterDetails/Payment/utils.ts Normal file
View File

@@ -0,0 +1,41 @@
import type { IntlShape } from "react-intl"
export function getPaymentHeadingConfig(
intl: IntlShape,
bookingMustBeGuaranteed: boolean,
hasOnlyFlexRates: boolean
) {
if (hasOnlyFlexRates) {
return bookingMustBeGuaranteed
? {
heading: intl.formatMessage({
id: "enterDetails.payment.guaranteePaymentHeading",
defaultMessage: "Guarantee with card",
}),
subHeading: intl.formatMessage({
id: "enterDetails.payment.guaranteePaymentSubheading",
defaultMessage: "(your card won't be charged now)",
}),
showLearnMore: true,
}
: {
heading: intl.formatMessage({
id: "enterDetails.payment.onlyFlexRatesTitle",
defaultMessage: "Final step",
}),
showLearnMore: false,
}
}
return {
preHeading: intl.formatMessage({
id: "enterDetails.payment.label",
defaultMessage: "Payment",
}),
heading: intl.formatMessage({
id: "enterDetails.payment.title",
defaultMessage: "Select payment method",
}),
showLearnMore: false,
}
}

38
packages/design-system/lib/components/Modal/index.tsx
View File

@@ -4,15 +4,14 @@ import { cx } from 'class-variance-authority'
import { AnimatePresence, motion } from 'motion/react'
import { type PropsWithChildren, useEffect, useState } from 'react'
import {
Modal as AriaModal,
Dialog,
DialogTrigger,
Modal as AriaModal,
ModalOverlay,
} from 'react-aria-components'
import { useIntl } from 'react-intl'
import { MaterialIcon } from '../Icons/MaterialIcon'
import Subtitle from '../Subtitle'
import {
type AnimationState,
@@ -23,8 +22,9 @@ import {
import { fade, slideInOut } from './motionVariants'
import { modalContentVariants } from './variants'
import styles from './modal.module.css'
import { IconButton } from '../IconButton'
import { Typography } from '../Typography'
import styles from './modal.module.css'
const MotionOverlay = motion.create(ModalOverlay)
const MotionModal = motion.create(AriaModal)
@@ -45,7 +45,7 @@ function InnerModal({
const intl = useIntl()
const contentClassNames = modalContentVariants({
withActions: withActions,
withActions,
})
function modalStateHandler(newAnimationState: AnimationState) {
@@ -97,13 +97,15 @@ function InnerModal({
<>
{!hideHeader && (
<header
className={`${styles.header} ${!subtitle ? styles.verticalCenter : ''}`}
className={cx(styles.header, {
[styles.verticalCenter]: !subtitle,
})}
>
<div>
{title && (
<Subtitle type="one" color="uiTextHighContrast">
{title}
</Subtitle>
<Typography variant="Title/Subtitle/lg">
<h3>{title}</h3>
</Typography>
)}
{subtitle && (
<Typography variant="Body/Lead text">
@@ -112,13 +114,23 @@ function InnerModal({
)}
</div>
<button
onClick={close}
type="button"
<IconButton
onPress={close}
className={styles.close}
type="button"
aria-label={intl.formatMessage({
id: 'common.close',
defaultMessage: 'Close',
})}
theme="Black"
style="Muted"
>
<MaterialIcon icon="close" color="Icon/Feedback/Neutral" />
</button>
<MaterialIcon
icon="close"
color="Icon/Feedback/Neutral"
size={24}
/>
</IconButton>
</header>
)}

16
packages/design-system/lib/components/Modal/modal.module.css
View File

@@ -30,14 +30,10 @@
}
.header {
--button-dimension: 32px;
box-sizing: content-box;
display: flex;
align-items: flex-start;
min-height: var(--button-dimension);
position: relative;
padding: var(--Space-x3) var(--Space-x3) 0;
padding: var(--Space-x3) var(--Space-x7) 0 var(--Space-x3);
}
.content {
@@ -57,17 +53,9 @@
}
.close {
background: none;
border: none;
cursor: pointer;
position: absolute;
top: var(--Space-x2);
right: var(--Space-x2);
width: var(--button-dimension);
height: var(--button-dimension);
display: flex;
align-items: center;
padding: 0;
justify-content: center;
}
.verticalCenter {

8
packages/design-system/lib/components/TextLink/textLink.module.css
View File

@@ -32,3 +32,11 @@
opacity: 0.7;
}
}
.theme-interactive-default:not(.disabled) {
color: var(--Text-Interactive-Default);
&:hover {
color: var(--Text-Interactive-Default-Hover);
}
}

1
packages/design-system/lib/components/TextLink/variants.ts
View File

@@ -13,6 +13,7 @@ export const config = {
theme: {
Primary: styles['theme-primary'],
Inverted: styles['theme-inverted'],
InteractiveDefault: styles['theme-interactive-default'],
},
},
defaultVariants: {