web/apps/scandic-web/components/HotelReservation/MyStay/TermsAndConditions/index.tsx

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 useLang from "@/hooks/useLang"
import { getErrorMessage } from "@/utils/getErrorMessage"

import styles from "./termsAndConditions.module.css"
import {
  bookingTerms,
  privacy,
} from "@scandic-hotels/common/constants/routes/customerService"

export default function TermsAndConditions() {
  const intl = useIntl()
  const lang = useLang()
  const {
    formState: { errors },
  } = useFormContext()
  const termsAndConditionsMsg = intl.formatMessage(
    {
      id: "myStay.guarantee.termsAndConditions",
      defaultMessage:
        "Please accept the general <termsAndConditionsLink>Booking & Cancellation Terms </termsAndConditionsLink> and acknowledge that your data will be processed in accordance with <privacyPolicyLink> Scandic's Privacy policy </privacyPolicyLink>.",
    },
    {
      termsAndConditionsLink: (str) => (
        <TextLink
          href={bookingTerms[lang]}
          theme="InteractiveDefault"
          typography="Link/sm"
          target="_blank"
          isInline
        >
          {str}
        </TextLink>
      ),
      privacyPolicyLink: (str) => (
        <TextLink
          href={privacy[lang]}
          theme="InteractiveDefault"
          typography="Link/sm"
          target="_blank"
          isInline
        >
          {str}
        </TextLink>
      ),
    }
  )
  return (
    <div className={styles.termsAndConditions}>
      <Checkbox
        name="termsAndConditions"
        registerOptions={{ required: true }}
        hideError
      >
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <span>
            {intl.formatMessage({
              id: "booking.acceptBookingTerms",
              defaultMessage: "I accept the booking and cancellation terms",
            })}
          </span>
        </Typography>
      </Checkbox>
      <span>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p>{termsAndConditionsMsg}</p>
        </Typography>
        <ErrorMessage
          name="termsAndConditions"
          errors={errors}
          messageLabel={getErrorMessage(
            intl,
            errors["termsAndConditions"]?.message?.toString()
          )}
        />
      </span>
    </div>
  )
}