web/apps/scandic-web/components/HotelReservation/EnterDetails/Payment/TermsAndConditions/index.tsx

import { useIntl } from "react-intl"

import { bookingTermsAndConditions, privacyPolicy } from "@/constants/webHrefs"

import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import useLang from "@/hooks/useLang"

import styles from "../payment.module.css"

import type { TermsAndConditionsProps } from "@/types/components/hotelReservation/enterDetails/payment"

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}
                    variant="underscored"
                    href={bookingTermsAndConditions[lang]}
                    target="_blank"
                    weight="bold"
                    size="small"
                  >
                    {str}
                  </Link>
                ),
                privacyPolicyLink: (str) => (
                  <Link
                    className={styles.link}
                    variant="underscored"
                    href={privacyPolicy[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}
                    variant="underscored"
                    href={bookingTermsAndConditions[lang]}
                    target="_blank"
                    weight="bold"
                    size="small"
                  >
                    {str}
                  </Link>
                ),
                privacyPolicyLink: (str) => (
                  <Link
                    className={styles.link}
                    variant="underscored"
                    href={privacyPolicy[lang]}
                    target="_blank"
                    weight="bold"
                    size="small"
                  >
                    {str}
                  </Link>
                ),
              }
            )}
      </Caption>
      <Checkbox name="termsAndConditions">
        <Caption>
          {intl.formatMessage({
            defaultMessage: "I accept the terms and conditions",
          })}
        </Caption>
      </Checkbox>
      <Checkbox name="smsConfirmation">
        <Caption>
          {intl.formatMessage({
            defaultMessage:
              "I would like to get my booking confirmation via sms",
          })}
        </Caption>
      </Checkbox>
    </>
  )
}