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

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