91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
import { useFormContext } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { ErrorCircleIcon, InfoCircleIcon } from "@/components/Icons"
|
|
import Modal from "@/components/Modal"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
|
|
import Input from "../Input"
|
|
|
|
import styles from "./booking-code.module.css"
|
|
|
|
import type {
|
|
BookingCodeSchema,
|
|
BookingWidgetSchema,
|
|
} from "@/types/components/bookingWidget"
|
|
|
|
export default function BookingCode() {
|
|
const intl = useIntl()
|
|
const {
|
|
setValue,
|
|
formState: { errors },
|
|
getValues,
|
|
} = useFormContext<BookingWidgetSchema>()
|
|
const codeError = errors["bookingCode"]?.value
|
|
|
|
const codeVoucher = intl.formatMessage({ id: "Code / Voucher" })
|
|
const addCode = intl.formatMessage({ id: "Add code" })
|
|
const bookingCodeTooltipText = intl.formatMessage({
|
|
id: "booking.codes.information",
|
|
})
|
|
const bookingCode: BookingCodeSchema = getValues("bookingCode")
|
|
|
|
function updateBookingCodeFormValue(value: string) {
|
|
setValue("bookingCode.value", value, { shouldValidate: true })
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<label htmlFor="booking-code">
|
|
<div className={styles.bookingCodeLabel}>
|
|
<Caption color="uiTextMediumContrast" type="bold" asChild>
|
|
<span>{codeVoucher}</span>
|
|
</Caption>
|
|
<Modal
|
|
trigger={
|
|
<Button intent="text">
|
|
<InfoCircleIcon
|
|
color="uiTextPlaceholder"
|
|
height={20}
|
|
width={20}
|
|
/>
|
|
</Button>
|
|
}
|
|
title={codeVoucher}
|
|
>
|
|
<Body color="uiTextHighContrast">{bookingCodeTooltipText}</Body>
|
|
</Modal>
|
|
</div>
|
|
<Input
|
|
type="text"
|
|
placeholder={addCode}
|
|
name="bookingCode"
|
|
id="booking-code"
|
|
onChange={(event) => updateBookingCodeFormValue(event.target.value)}
|
|
defaultValue={bookingCode?.value}
|
|
/>
|
|
</label>
|
|
{codeError && codeError.message ? (
|
|
<Caption color="red" className={styles.error}>
|
|
<ErrorCircleIcon color="red" className={styles.errorIcon} />
|
|
{intl.formatMessage({ id: codeError.message })}
|
|
</Caption>
|
|
) : null}
|
|
{/* ToDo: Update styles once designs are ready */}
|
|
<div className={styles.bookingCodeRemember}>
|
|
<Checkbox name="bookingCode.remember">
|
|
<Caption asChild>
|
|
<span>{intl.formatMessage({ id: "Remember code" })}</span>
|
|
</Caption>
|
|
</Checkbox>
|
|
<Button size="small" intent="primary" type="button">
|
|
{intl.formatMessage({ id: "Apply" })}
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|