feat: select bed type

components/HotelReservation/EnterDetails/BedType/bedOptions.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/BedType/index.tsx

@@ -0,0 +1,75 @@
+"use client"
+
+import { zodResolver } from "@hookform/resolvers/zod"
+import { FormProvider, useForm } from "react-hook-form"
+import { useIntl } from "react-intl"
+
+import { KingBedIcon } from "@/components/Icons"
+import RadioCard from "@/components/TempDesignSystem/Form/Card/Radio"
+
+import { bedTypeSchema } from "./schema"
+
+import styles from "./bedOptions.module.css"
+
+import type { BedTypeSchema } from "@/types/components/enterDetails/bedType"
+import { bedTypeEnum } from "@/types/enums/bedType"
+
+export default function BedType() {
+  const intl = useIntl()
+
+  const methods = useForm<BedTypeSchema>({
+    defaultValues: {
+      bed: bedTypeEnum.KING,
+    },
+    criteriaMode: "all",
+    mode: "all",
+    resolver: zodResolver(bedTypeSchema),
+    reValidateMode: "onChange",
+  })
+
+  // @ts-expect-error - Types mismatch docs as this is
+  // a pattern that is allowed https://formatjs.io/docs/react-intl/api#usage
+  const text = intl.formatMessage(
+    { id: "<b>Included</b> (based on availability)" },
+    { b: (str) => <b>{str}</b> }
+  )
+
+  return (
+    <FormProvider {...methods}>
+      <form className={styles.form}>
+        <RadioCard
+          Icon={KingBedIcon}
+          iconWidth={46}
+          id={bedTypeEnum.KING}
+          name="bed"
+          subtitle={intl.formatMessage(
+            { id: "{width} cm × {length} cm" },
+            {
+              length: "210",
+              width: "180",
+            }
+          )}
+          text={text}
+          title={intl.formatMessage({ id: "King bed" })}
+          value={bedTypeEnum.KING}
+        />
+        <RadioCard
+          Icon={KingBedIcon}
+          iconWidth={46}
+          id={bedTypeEnum.QUEEN}
+          name="bed"
+          subtitle={intl.formatMessage(
+            { id: "{width} cm × {length} cm" },
+            {
+              length: "200",
+              width: "160",
+            }
+          )}
+          text={text}
+          title={intl.formatMessage({ id: "Queen bed" })}
+          value={bedTypeEnum.QUEEN}
+        />
+      </form>
+    </FormProvider>
+  )
+}

components/HotelReservation/EnterDetails/BedType/schema.ts

@@ -0,0 +1,7 @@
+import { z } from "zod"
+
+import { bedTypeEnum } from "@/types/enums/bedType"
+
+export const bedTypeSchema = z.object({
+  bed: z.nativeEnum(bedTypeEnum),
+})

components/HotelReservation/EnterDetails/Details/index.tsx

@@ -4,7 +4,7 @@ import { FormProvider, useForm } from "react-hook-form"
 import { useIntl } from "react-intl"
 
 import Button from "@/components/TempDesignSystem/Button"
-import CheckboxCard from "@/components/TempDesignSystem/Form/Checkbox/Card"
+import CheckboxCard from "@/components/TempDesignSystem/Form/Card/Checkbox"
 import CountrySelect from "@/components/TempDesignSystem/Form/Country"
 import Input from "@/components/TempDesignSystem/Form/Input"
 import Phone from "@/components/TempDesignSystem/Form/Phone"
@@ -36,6 +36,7 @@ export default function Details({ user }: DetailsProps) {
       lastname: user?.lastName ?? "",
       phoneNumber: user?.phoneNumber ?? "",
     },
+    criteriaMode: "all",
     mode: "all",
     resolver: zodResolver(user ? signedInDetailsSchema : detailsSchema),
     reValidateMode: "onChange",