121 lines
4.5 KiB
TypeScript
121 lines
4.5 KiB
TypeScript
import { useFormContext } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import Checkbox from "@scandic-hotels/design-system/Form/Checkbox"
|
|
import { ErrorMessage } from "@scandic-hotels/design-system/Form/ErrorMessage"
|
|
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 styles from "./termsAndConditions.module.css"
|
|
|
|
type TermsAndConditionsProps = {
|
|
isFlexBookingTerms: boolean
|
|
}
|
|
export default function TermsAndConditions({
|
|
isFlexBookingTerms,
|
|
}: TermsAndConditionsProps) {
|
|
const intl = useIntl()
|
|
const lang = useLang()
|
|
const { routes } = useBookingFlowConfig()
|
|
const {
|
|
formState: { errors },
|
|
} = useFormContext()
|
|
|
|
return (
|
|
<div className={styles.termsAndConditions}>
|
|
<Checkbox
|
|
name="termsAndConditions"
|
|
registerOptions={{ required: true }}
|
|
hideError
|
|
>
|
|
<Typography variant="Body/Supporting text (caption)/smBold">
|
|
<span>
|
|
{intl.formatMessage({
|
|
id: "booking.acceptBookingTerms",
|
|
defaultMessage: "I accept the booking and cancellation terms",
|
|
})}
|
|
</span>
|
|
</Typography>
|
|
</Checkbox>
|
|
<Typography variant="Body/Supporting text (caption)/smRegular">
|
|
<p>
|
|
{isFlexBookingTerms
|
|
? intl.formatMessage(
|
|
{
|
|
id: "enterDetails.paymentStep.flexBookingTermsAndConditions",
|
|
defaultMessage:
|
|
"To complete your booking, please accept the general <termsAndConditionsLink>Booking & Cancellation Terms</termsAndConditionsLink>, and acknowledge that your data will be processed in accordance with Scandic's <privacyPolicyLink>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>
|
|
<ErrorMessage
|
|
name="termsAndConditions"
|
|
errors={errors}
|
|
messageLabel={intl.formatMessage({
|
|
id: "common.mustAcceptTermsError",
|
|
defaultMessage: "You must accept the terms and conditions",
|
|
})}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|