71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import { zodResolver } from "@hookform/resolvers/zod"
|
|
import { FormProvider, useForm } from "react-hook-form"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { BreakfastIcon, NoBreakfastIcon } from "@/components/Icons"
|
|
import RadioCard from "@/components/TempDesignSystem/Form/Card/Radio"
|
|
|
|
import { breakfastSchema } from "./schema"
|
|
|
|
import styles from "./breakfast.module.css"
|
|
|
|
import type { BreakfastSchema } from "@/types/components/enterDetails/breakfast"
|
|
import { breakfastEnum } from "@/types/enums/breakfast"
|
|
|
|
export default function Breakfast() {
|
|
const intl = useIntl()
|
|
|
|
const methods = useForm<BreakfastSchema>({
|
|
criteriaMode: "all",
|
|
mode: "all",
|
|
resolver: zodResolver(breakfastSchema),
|
|
reValidateMode: "onChange",
|
|
})
|
|
|
|
return (
|
|
<FormProvider {...methods}>
|
|
<form className={styles.form}>
|
|
<RadioCard
|
|
Icon={BreakfastIcon}
|
|
id={breakfastEnum.BREAKFAST}
|
|
name="breakfast"
|
|
// @ts-expect-error - Types mismatch docs as this is
|
|
// a pattern that is allowed https://formatjs.io/docs/react-intl/api#usage
|
|
subtitle={intl.formatMessage(
|
|
{ id: "<b>{amount} {currency}</b>/night per adult" },
|
|
{
|
|
amount: "150",
|
|
b: (str) => <b>{str}</b>,
|
|
currency: "SEK",
|
|
}
|
|
)}
|
|
text={intl.formatMessage({
|
|
id: "All our breakfast buffets offer gluten free, vegan, and allergy-friendly options.",
|
|
})}
|
|
title={intl.formatMessage({ id: "Breakfast buffet" })}
|
|
value={breakfastEnum.BREAKFAST}
|
|
/>
|
|
<RadioCard
|
|
Icon={NoBreakfastIcon}
|
|
id={breakfastEnum.NO_BREAKFAST}
|
|
name="breakfast"
|
|
subtitle={intl.formatMessage(
|
|
{ id: "{amount} {currency}" },
|
|
{
|
|
amount: "0",
|
|
currency: "SEK",
|
|
}
|
|
)}
|
|
text={intl.formatMessage({
|
|
id: "You can always change your mind later and add breakfast at the hotel.",
|
|
})}
|
|
title={intl.formatMessage({ id: "No breakfast" })}
|
|
value={breakfastEnum.NO_BREAKFAST}
|
|
/>
|
|
</form>
|
|
</FormProvider>
|
|
)
|
|
}
|