web/apps/scandic-web/components/HotelReservation/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 { Typography } from "@scandic-hotels/design-system/Typography"

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

import Link from "@/components/TempDesignSystem/Link"
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}
                    textDecoration="underline"
                    href={bookingTermsAndConditions[lang]}
                    target="_blank"
                    weight="bold"
                    size="small"
                  >
                    {str}
                  </Link>
                ),
                privacyPolicyLink: (str) => (
                  <Link
                    className={styles.link}
                    textDecoration="underline"
                    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}
                    textDecoration="underline"
                    href={bookingTermsAndConditions[lang]}
                    target="_blank"
                    weight="bold"
                    size="small"
                  >
                    {str}
                  </Link>
                ),
                privacyPolicyLink: (str) => (
                  <Link
                    className={styles.link}
                    textDecoration="underline"
                    href={privacyPolicy[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>
    </>
  )
}