Merged in chore/move-enter-details (pull request #2778)
Chore/move enter details Approved-by: Anton Gunnarsson
This commit is contained in:
Joakim Jäderberg
@@ -0,0 +1,98 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
.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(--Spacing-x5) var(--Spacing-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;
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
margin-top: var(--Space-x15);
|
||||
outline: none;
|
||||
width: min(164px, 100%);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.btnText {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,150 @@
|
||||
"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 { PaymentMethodEnum } from "@scandic-hotels/common/constants/paymentMethod"
|
||||
import useSetOverflowVisibleOnRA from "@scandic-hotels/common/hooks/useSetOverflowVisibleOnRA"
|
||||
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 { 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 { useTrackingContext } from "../../../../trackingContext"
|
||||
|
||||
import styles from "./guarantee.module.css"
|
||||
|
||||
import type { CreditCard } from "@scandic-hotels/trpc/types/user"
|
||||
|
||||
interface GuaranteeProps {
|
||||
savedCreditCards: CreditCard[] | null
|
||||
}
|
||||
|
||||
export default function Guarantee({ savedCreditCards }: GuaranteeProps) {
|
||||
const intl = useIntl()
|
||||
const guarantee = useWatch({ name: "guarantee" })
|
||||
const { trackUpdatePaymentMethod } = useTrackingContext()
|
||||
|
||||
return (
|
||||
<div className={styles.guarantee}>
|
||||
<Checkbox name="guarantee">
|
||||
<div className={styles.checkboxContainer}>
|
||||
<Typography variant="Body/Supporting text (caption)/smRegular">
|
||||
<span>
|
||||
{intl.formatMessage({
|
||||
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({ 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({
|
||||
defaultMessage: "Guarantee for late arrival",
|
||||
})}
|
||||
</h3>
|
||||
</Typography>
|
||||
<Typography variant="Body/Lead text">
|
||||
<p className={styles.text}>
|
||||
{intl.formatMessage({
|
||||
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({
|
||||
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({
|
||||
defaultMessage: "Close",
|
||||
})}
|
||||
</Button>
|
||||
<RestoreOverflow />
|
||||
</div>
|
||||
)}
|
||||
</Dialog>
|
||||
</Modal>
|
||||
</ModalOverlay>
|
||||
</DialogTrigger>
|
||||
</div>
|
||||
</Checkbox>
|
||||
{savedCreditCards?.length && guarantee ? (
|
||||
<SelectPaymentMethod
|
||||
paymentMethods={savedCreditCards.map((card) => ({
|
||||
...card,
|
||||
cardType: card.cardType as PaymentMethodEnum,
|
||||
}))}
|
||||
onChange={(method) => {
|
||||
trackUpdatePaymentMethod({ method })
|
||||
}}
|
||||
formName={"paymentMethod"}
|
||||
/>
|
||||
) : null}
|
||||
{guarantee ? (
|
||||
<PaymentOptionsGroup
|
||||
name="paymentMethod"
|
||||
label={
|
||||
savedCreditCards?.length
|
||||
? intl.formatMessage({
|
||||
defaultMessage: "OTHER",
|
||||
})
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<PaymentOption
|
||||
value={PaymentMethodEnum.card}
|
||||
label={intl.formatMessage({
|
||||
defaultMessage: "Credit card",
|
||||
})}
|
||||
/>
|
||||
</PaymentOptionsGroup>
|
||||
) : null}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function RestoreOverflow() {
|
||||
const setOverflowVisible = useSetOverflowVisibleOnRA()
|
||||
useLayoutEffect(() => {
|
||||
setOverflowVisible(true)
|
||||
}, [setOverflowVisible])
|
||||
return null
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x3);
|
||||
}
|
||||
|
||||
.selections {
|
||||
background-color: var(--Surface-Secondary-Default);
|
||||
border-radius: var(--Corner-radius-Large);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
padding: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.checkboxContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--Spacing-x2);
|
||||
width: min(800px, 100%);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
"use client"
|
||||
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 styles from "./confirm.module.css"
|
||||
|
||||
import type { CreditCard } from "@scandic-hotels/trpc/types/user"
|
||||
|
||||
interface ConfirmBookingProps {
|
||||
savedCreditCards: CreditCard[] | null
|
||||
}
|
||||
|
||||
export default function ConfirmBooking({
|
||||
savedCreditCards,
|
||||
}: 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({
|
||||
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({
|
||||
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">
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
defaultMessage:
|
||||
"When you confirm the booking the room will be guaranteed for late arrival. If you fail to arrive without cancelling in advance or if you cancel after 18:00 local time, you will be charged for one reward night.",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={styles.checkboxContainer}>
|
||||
<TermsAndConditions isFlexBookingTerms />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user