web/packages/booking-flow/lib/components/EnterDetails/Payment/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 { 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>
  )
}