109 lines
3.5 KiB
TypeScript
109 lines
3.5 KiB
TypeScript
"use client"
|
|
import { FormProvider, useForm } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import SkeletonShimmer from "@/components/SkeletonShimmer"
|
|
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
|
|
|
|
import BookingCode from "../BookingCode"
|
|
|
|
import styles from "./voucher.module.css"
|
|
|
|
export default function Voucher() {
|
|
const intl = useIntl()
|
|
|
|
const bonus = intl.formatMessage({ id: "Use Bonus Cheque" })
|
|
const reward = intl.formatMessage({ id: "Book Reward Night" })
|
|
|
|
// ToDo: Remove this when all three options are enabled
|
|
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}>
|
|
<div className={styles.vouchers}>
|
|
<BookingCode />
|
|
</div>
|
|
<div className={styles.options}>
|
|
<div className={styles.option}>
|
|
<Tooltip
|
|
heading={disabledBookingOptionsHeader}
|
|
text={disabledBookingOptionsText}
|
|
position="bottom"
|
|
arrow="left"
|
|
>
|
|
<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 */}
|
|
</Tooltip>
|
|
</div>
|
|
<div className={styles.option}>
|
|
<Tooltip
|
|
heading={disabledBookingOptionsHeader}
|
|
text={disabledBookingOptionsText}
|
|
position="bottom"
|
|
arrow="left"
|
|
>
|
|
<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 */}
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export function VoucherSkeleton() {
|
|
const intl = useIntl()
|
|
|
|
const vouchers = intl.formatMessage({ id: "Code / Voucher" })
|
|
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 type="bold" color="red" asChild>
|
|
<span>{vouchers}</span>
|
|
</Caption>
|
|
</label>
|
|
<SkeletonShimmer width={"100%"} />
|
|
</div>
|
|
<div className={styles.options}>
|
|
<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>
|
|
)
|
|
}
|