Files
web/packages/booking-flow/lib/components/EnterDetails/Payment/TermsAndConditions/index.tsx
Joakim Jäderberg 7dee6d5083 Merged in chore/move-enter-details (pull request #2778)
Chore/move enter details

Approved-by: Anton Gunnarsson
2025-09-11 07:16:24 +00:00

104 lines
3.8 KiB
TypeScript

import { useIntl } from "react-intl"
import { bookingTermsAndConditionsRoutes } from "@scandic-hotels/common/constants/routes/bookingTermsAndConditionsRoutes"
import { privacyPolicyRoutes } from "@scandic-hotels/common/constants/routes/privacyPolicyRoutes"
import Caption from "@scandic-hotels/design-system/Caption"
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
import Link from "@scandic-hotels/design-system/Link"
import { Typography } from "@scandic-hotels/design-system/Typography"
import useLang from "../../../../hooks/useLang"
import styles from "../payment.module.css"
type TermsAndConditionsProps = {
isFlexBookingTerms: boolean
}
export default function TermsAndConditions({
isFlexBookingTerms,
}: TermsAndConditionsProps) {
const intl = useIntl()
const lang = useLang()
return (
<>
<Caption>
{isFlexBookingTerms
? intl.formatMessage(
{
defaultMessage:
"I accept the terms for this booking and the general <termsAndConditionsLink>Terms & Conditions</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={bookingTermsAndConditionsRoutes[lang]}
target="_blank"
weight="bold"
size="small"
>
{str}
</Link>
),
privacyPolicyLink: (str) => (
<Link
className={styles.link}
textDecoration="underline"
href={privacyPolicyRoutes[lang]}
target="_blank"
weight="bold"
size="small"
>
{str}
</Link>
),
}
)
: intl.formatMessage(
{
defaultMessage:
"By paying with any of the payment methods available, I accept the terms for this booking and the general <termsAndConditionsLink>Terms & Conditions</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={bookingTermsAndConditionsRoutes[lang]}
target="_blank"
weight="bold"
size="small"
>
{str}
</Link>
),
privacyPolicyLink: (str) => (
<Link
className={styles.link}
textDecoration="underline"
href={privacyPolicyRoutes[lang]}
target="_blank"
weight="bold"
size="small"
>
{str}
</Link>
),
}
)}
</Caption>
<Checkbox name="termsAndConditions">
<Typography variant="Body/Paragraph/mdBold">
<span>
{intl.formatMessage({
defaultMessage: "I accept the terms and conditions",
})}
</span>
</Typography>
</Checkbox>
</>
)
}