feat: breakfast choice

components/HotelReservation/EnterDetails/Breakfast/breakfast.module.css

@@ -0,0 +1,7 @@
+.form {
+  display: grid;
+  gap: var(--Spacing-x2);
+  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
+  padding-bottom: var(--Spacing-x3);
+  width: min(600px, 100%);
+}

components/HotelReservation/EnterDetails/Breakfast/index.tsx

@@ -0,0 +1,70 @@
+"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>
+  )
+}

components/HotelReservation/EnterDetails/Breakfast/schema.ts

@@ -0,0 +1,7 @@
+import { z } from "zod"
+
+import { breakfastEnum } from "@/types/enums/breakfast"
+
+export const breakfastSchema = z.object({
+  breakfast: z.nativeEnum(breakfastEnum),
+})