web/packages/booking-flow/lib/components/EnterDetails/Payment/TermsAndConditions/index.tsx

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 { 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"

type TermsAndConditionsProps = {
  isFlexBookingTerms: boolean
}
export default function TermsAndConditions({
  isFlexBookingTerms,
}: TermsAndConditionsProps) {
  const intl = useIntl()
  const lang = useLang()
  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>
      <Checkbox
        name="termsAndConditions"
        registerOptions={{
          required: true,
        }}
        errorCodeMessages={{
          [paymentError.TERMS_REQUIRED]: intl.formatMessage({
            id: "common.mustAcceptTermsError",
            defaultMessage: "You must accept the terms and conditions",
          }),
        }}
      >
        <Typography variant="Body/Paragraph/mdBold">
          <span>
            {intl.formatMessage({
              id: "booking.acceptBookingTerms",
              defaultMessage: "I accept the booking and cancellation terms",
            })}
          </span>
        </Typography>
      </Checkbox>
    </>
  )
}