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

Merged in chore/move-enter-details (pull request #2778)

Browse Source 
Chore/move enter details

Approved-by: Anton Gunnarsson
This commit is contained in:
Joakim Jäderberg
2025-09-11 07:16:24 +00:00
parent 15711cb3a4
commit 7dee6d5083
238 changed files with 1656 additions and 1602 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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;
}
}

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

@@ -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
}