web/components/Forms/BookingWidget/FormContent/Voucher/index.tsx

"use client"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"

import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { Tooltip } from "@/components/TempDesignSystem/Tooltip"

import Input from "../Input"

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

export default function Voucher() {
  const intl = useIntl()

  const vouchers = intl.formatMessage({ id: "Code / Voucher" })
  const useVouchers = intl.formatMessage({ id: "Use code/voucher" })
  const addVouchers = intl.formatMessage({ id: "Add code" })
  const bonus = intl.formatMessage({ id: "Use bonus cheque" })
  const reward = intl.formatMessage({ id: "Book reward night" })
  const disabledBookingOptionsHeader = intl.formatMessage({
    id: "We're sorry",
  })
  const disabledBookingOptionsText = intl.formatMessage({
    id: "Codes, cheques and reward nights aren't available on the new website yet.",
  })

  return (
    <div className={styles.optionsContainer}>
      <Tooltip
        heading={disabledBookingOptionsHeader}
        text={disabledBookingOptionsText}
        position="bottom"
        arrow="left"
      >
        <div className={styles.vouchers}>
          <label>
            <Caption color="disabled" type="bold" asChild>
              <span>{vouchers}</span>
            </Caption>
            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
          </label>
          <Input type="text" placeholder={addVouchers} disabled />
        </div>
      </Tooltip>
      <Tooltip
        heading={disabledBookingOptionsHeader}
        text={disabledBookingOptionsText}
        position="bottom"
        arrow="left"
      >
        <div className={styles.options}>
          <div className={`${styles.option} ${styles.checkboxVoucher}`}>
            <Checkbox name="useVouchers" registerOptions={{ disabled: true }}>
              <Caption color="disabled" asChild>
                <span>{useVouchers}</span>
              </Caption>
            </Checkbox>
            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
          </div>
          <div className={styles.option}>
            <Checkbox name="useBonus" registerOptions={{ disabled: true }}>
              <Caption color="disabled" asChild>
                <span>{bonus}</span>
              </Caption>
            </Checkbox>
            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
          </div>
          <div className={styles.option}>
            <Checkbox name="useReward" registerOptions={{ disabled: true }}>
              <Caption color="disabled" asChild>
                <span>{reward}</span>
              </Caption>
            </Checkbox>
            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
          </div>
        </div>
      </Tooltip>
    </div>
  )
}

export function VoucherSkeleton() {
  const intl = useIntl()

  const vouchers = intl.formatMessage({ id: "Code / Voucher" })
  const useVouchers = intl.formatMessage({ id: "Use code/voucher" })
  const addVouchers = intl.formatMessage({ id: "Add code" })
  const bonus = intl.formatMessage({ id: "Use bonus cheque" })
  const reward = intl.formatMessage({ id: "Book reward night" })

  const form = useForm()

  return (
    <FormProvider {...form}>
      <div className={styles.optionsContainer}>
        <div className={styles.vouchers}>
          <label>
            <Caption color="disabled" type="bold" asChild>
              <span>{vouchers}</span>
            </Caption>
            {/* <InfoCircleIcon color="white" className={styles.infoIcon} /> Out of scope for this release */}
          </label>
          <Input type="text" placeholder={addVouchers} disabled />
        </div>
        <div className={styles.options}>
          <div className={`${styles.option} ${styles.checkboxVoucher}`}>
            <Checkbox name="useVouchers" registerOptions={{ disabled: true }}>
              <Caption color="disabled" asChild>
                <span>{useVouchers}</span>
              </Caption>
            </Checkbox>
          </div>
          <div className={styles.option}>
            <Checkbox name="useBonus" registerOptions={{ disabled: true }}>
              <Caption color="disabled" asChild>
                <span>{bonus}</span>
              </Caption>
            </Checkbox>
          </div>
          <div className={styles.option}>
            <Checkbox name="useReward" registerOptions={{ disabled: true }}>
              <Caption color="disabled" asChild>
                <span>{reward}</span>
              </Caption>
            </Checkbox>
          </div>
        </div>
      </div>
    </FormProvider>
  )
}