feat: breakfast choice

components/HotelReservation/EnterDetails/BedType/index.tsx

@@ -18,9 +18,6 @@ export default function BedType() {
   const intl = useIntl()
 
   const methods = useForm<BedTypeSchema>({
-    defaultValues: {
-      bed: bedTypeEnum.KING,
-    },
     criteriaMode: "all",
     mode: "all",
     resolver: zodResolver(bedTypeSchema),

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),
+})

components/Icons/Breakfast.tsx

@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function BreakfastIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      fill="none"
+      height="33"
+      viewBox="0 0 32 33"
+      width="32"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask
+        height="33"
+        id="mask0_5171_13483"
+        maskUnits="userSpaceOnUse"
+        style={{ maskType: "alpha" }}
+        width="32"
+        x="0"
+        y="0"
+      >
+        <rect y="0.5" width="32" height="32" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_5171_13483)">
+        <path
+          d="M3 27H21.2167V28.25C21.2167 28.5944 21.0944 28.8889 20.85 29.1333C20.6056 29.3778 20.3111 29.5 19.9667 29.5H4.25C3.90556 29.5 3.61111 29.3778 3.36667 29.1333C3.12222 28.8889 3 28.5944 3 28.25V27ZM3 24.4333V23.1833C3 22.8389 3.12222 22.5444 3.36667 22.3C3.61111 22.0556 3.90556 21.9333 4.25 21.9333H9.53333V20.75C9.53333 20.4056 9.65556 20.1111 9.9 19.8667C10.1444 19.6222 10.4389 19.5 10.7833 19.5H13.4333C13.7778 19.5 14.0722 19.6222 14.3167 19.8667C14.5611 20.1111 14.6833 20.4056 14.6833 20.75V21.9333H19.9667C20.3111 21.9333 20.6056 22.0556 20.85 22.3C21.0944 22.5444 21.2167 22.8389 21.2167 23.1833V24.4333H3ZM23.9167 21.4667C23.15 20.6444 22.5278 19.7889 22.05 18.9C21.5722 18.0111 21.3333 16.9556 21.3333 15.7333V4.75C21.3333 4.40556 21.4556 4.11111 21.7 3.86667C21.9444 3.62222 22.2389 3.5 22.5833 3.5H27.75C28.0944 3.5 28.3889 3.62222 28.6333 3.86667C28.8778 4.11111 29 4.40556 29 4.75V15.7333C29 16.9556 28.7639 18.0139 28.2917 18.9083C27.8194 19.8028 27.1944 20.6556 26.4167 21.4667V27H27.7167C28.0611 27 28.3556 27.1222 28.6 27.3667C28.8444 27.6111 28.9667 27.9056 28.9667 28.25C28.9667 28.5944 28.8444 28.8889 28.6 29.1333C28.3556 29.3778 28.0611 29.5 27.7167 29.5H25.1667C24.8222 29.5 24.5278 29.3778 24.2833 29.1333C24.0389 28.8889 23.9167 28.5944 23.9167 28.25V21.4667ZM23.8333 11.3H26.5V6H23.8333V11.3ZM25.1667 19.1667C25.5667 18.7111 25.8889 18.1806 26.1333 17.575C26.3778 16.9694 26.5 16.3556 26.5 15.7333V13.8H23.8333V15.7333C23.8333 16.3556 23.95 16.9694 24.1833 17.575C24.4167 18.1806 24.7444 18.7111 25.1667 19.1667Z"
+          fill="#26201E"
+        />
+      </g>
+    </svg>
+  )
+}

components/Icons/NoBreakfast.tsx

@@ -0,0 +1,40 @@
+import { iconVariants } from "./variants"
+
+import type { IconProps } from "@/types/components/icon"
+
+export default function NoBreakfastIcon({
+  className,
+  color,
+  ...props
+}: IconProps) {
+  const classNames = iconVariants({ className, color })
+  return (
+    <svg
+      className={classNames}
+      fill="none"
+      height="33"
+      viewBox="0 0 32 33"
+      width="32"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <mask
+        id="mask0_5171_21315"
+        style={{ maskType: "alpha" }}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="0"
+        width="32"
+        height="33"
+      >
+        <rect y="0.5" width="32" height="32" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_5171_21315)">
+        <path
+          d="M28.4824 25.3833L26.1824 23.0833L27.4991 10H15.0324L14.8991 8.9C14.8546 8.52223 14.9546 8.19445 15.1991 7.91667C15.4435 7.63889 15.7546 7.5 16.1324 7.5H21.2324V3.48334C21.2324 3.13889 21.3546 2.84445 21.5991 2.6C21.8435 2.35556 22.138 2.23334 22.4824 2.23334C22.8269 2.23334 23.1213 2.35556 23.3658 2.6C23.6102 2.84445 23.7324 3.13889 23.7324 3.48334V7.5H28.8824C29.2602 7.5 29.5741 7.63334 29.8241 7.9C30.0741 8.16667 30.1769 8.48889 30.1324 8.86667L28.4824 25.3833ZM26.3324 30.35L2.18242 6.21667C1.92687 5.96111 1.79909 5.66389 1.79909 5.325C1.79909 4.98612 1.92687 4.68889 2.18242 4.43334C2.43798 4.17778 2.7352 4.05 3.07409 4.05C3.41298 4.05 3.7102 4.17778 3.96576 4.43334L28.1158 28.5833C28.3713 28.8389 28.4991 29.1333 28.4991 29.4667C28.4991 29.8 28.3713 30.0944 28.1158 30.35C27.8602 30.6056 27.563 30.7333 27.2241 30.7333C26.8852 30.7333 26.588 30.6056 26.3324 30.35ZM2.98242 25.75C2.63798 25.75 2.34353 25.6278 2.09909 25.3833C1.85464 25.1389 1.73242 24.8444 1.73242 24.5C1.73242 24.1556 1.85464 23.8611 2.09909 23.6167C2.34353 23.3722 2.63798 23.25 2.98242 23.25H19.9491C20.2935 23.25 20.588 23.3722 20.8324 23.6167C21.0769 23.8611 21.1991 24.1556 21.1991 24.5C21.1991 24.8444 21.0769 25.1389 20.8324 25.3833C20.588 25.6278 20.2935 25.75 19.9491 25.75H2.98242ZM2.98242 30.8333C2.63798 30.8333 2.34353 30.7111 2.09909 30.4667C1.85464 30.2222 1.73242 29.9278 1.73242 29.5833C1.73242 29.2389 1.85464 28.9444 2.09909 28.7C2.34353 28.4556 2.63798 28.3333 2.98242 28.3333H19.9491C20.2935 28.3333 20.588 28.4556 20.8324 28.7C21.0769 28.9444 21.1991 29.2389 21.1991 29.5833C21.1991 29.9278 21.0769 30.2222 20.8324 30.4667C20.588 30.7111 20.2935 30.8333 19.9491 30.8333H2.98242ZM12.7491 13.2167V15.7167C12.538 15.6944 12.3241 15.675 12.1074 15.6583C11.8908 15.6417 11.6769 15.6333 11.4658 15.6333C10.1546 15.6333 8.91853 15.8444 7.75742 16.2667C6.59631 16.6889 5.69909 17.3333 5.06575 18.2H17.7324L20.2324 20.7H3.26576C2.86576 20.7 2.54076 20.55 2.29076 20.25C2.04076 19.95 1.95464 19.6 2.03242 19.2C2.25464 18.1111 2.68242 17.1806 3.31576 16.4083C3.94909 15.6361 4.69909 15.0056 5.56575 14.5167C6.43242 14.0278 7.37964 13.675 8.40742 13.4583C9.4352 13.2417 10.4546 13.1333 11.4658 13.1333C11.6769 13.1333 11.8908 13.1417 12.1074 13.1583C12.3241 13.175 12.538 13.1944 12.7491 13.2167Z"
+          fill="#787472"
+        />
+      </g>
+    </svg>
+  )
+}

components/Icons/index.tsx

@@ -4,6 +4,7 @@ export { default as AirplaneIcon } from "./Airplane"
 export { default as ArrowRightIcon } from "./ArrowRight"
 export { default as BarIcon } from "./Bar"
 export { default as BikingIcon } from "./Biking"
+export { default as BreakfastIcon } from "./Breakfast"
 export { default as BusinessIcon } from "./Business"
 export { default as CalendarIcon } from "./Calendar"
 export { default as CameraIcon } from "./Camera"
@@ -40,6 +41,7 @@ export { default as LockIcon } from "./Lock"
 export { default as MapIcon } from "./Map"
 export { default as MinusIcon } from "./Minus"
 export { default as MuseumIcon } from "./Museum"
+export { default as NoBreakfastIcon } from "./NoBreakfast"
 export { default as ParkingIcon } from "./Parking"
 export { default as People2Icon } from "./People2"
 export { default as PersonIcon } from "./Person"