feat(BOOK-469): Enter details design changes with guarantee/non-guarantee flow
Approved-by: Bianca Widstam
This commit is contained in:
Erik Tiekstra
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user