feat: get breakfast package from API

components/HotelReservation/EnterDetails/BedType/index.tsx

@@ -15,7 +15,7 @@ import { bedTypeSchema } from "./schema"
 import styles from "./bedOptions.module.css"
 
 import type { BedTypeSchema } from "@/types/components/enterDetails/bedType"
-import { bedTypeEnum } from "@/types/enums/bedType"
+import { BedTypeEnum } from "@/types/enums/bedType"
 
 export default function BedType() {
   const intl = useIntl()
@@ -61,7 +61,7 @@ export default function BedType() {
         <RadioCard
           Icon={KingBedIcon}
           iconWidth={46}
-          id={bedTypeEnum.KING}
+          id={BedTypeEnum.KING}
           name="bedType"
           subtitle={intl.formatMessage(
             { id: "{width} cm × {length} cm" },
@@ -72,12 +72,12 @@ export default function BedType() {
           )}
           text={text}
           title={intl.formatMessage({ id: "King bed" })}
-          value={bedTypeEnum.KING}
+          value={BedTypeEnum.KING}
         />
         <RadioCard
           Icon={KingBedIcon}
           iconWidth={46}
-          id={bedTypeEnum.QUEEN}
+          id={BedTypeEnum.QUEEN}
           name="bedType"
           subtitle={intl.formatMessage(
             { id: "{width} cm × {length} cm" },
@@ -88,7 +88,7 @@ export default function BedType() {
           )}
           text={text}
           title={intl.formatMessage({ id: "Queen bed" })}
-          value={bedTypeEnum.QUEEN}
+          value={BedTypeEnum.QUEEN}
         />
       </form>
     </FormProvider>

components/HotelReservation/EnterDetails/BedType/schema.ts

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

components/HotelReservation/EnterDetails/Breakfast/index.tsx

@@ -7,36 +7,50 @@ import { useIntl } from "react-intl"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
-import { BreakfastIcon, NoBreakfastIcon } from "@/components/Icons"
+import { Highlight } from "@/components/TempDesignSystem/Form/ChoiceCard/_Card"
 import RadioCard from "@/components/TempDesignSystem/Form/ChoiceCard/Radio"
 
-import { breakfastSchema } from "./schema"
+import { breakfastFormSchema } from "./schema"
 
 import styles from "./breakfast.module.css"
 
-import type { BreakfastSchema } from "@/types/components/enterDetails/breakfast"
-import { breakfastEnum } from "@/types/enums/breakfast"
+import type {
+  BreakfastFormSchema,
+  BreakfastProps,
+} from "@/types/components/enterDetails/breakfast"
+import { BreakfastPackageEnum } from "@/types/enums/breakfast"
 
-export default function Breakfast() {
+export default function Breakfast({ packages }: BreakfastProps) {
   const intl = useIntl()
 
   const breakfast = useEnterDetailsStore((state) => state.data.breakfast)
 
-  const methods = useForm<BreakfastSchema>({
-    defaultValues: breakfast ? { breakfast } : undefined,
+  let defaultValues = undefined
+  if (breakfast === BreakfastPackageEnum.NO_BREAKFAST) {
+    defaultValues = { breakfast: BreakfastPackageEnum.NO_BREAKFAST }
+  } else if (breakfast?.code) {
+    defaultValues = { breakfast: breakfast.code }
+  }
+  const methods = useForm<BreakfastFormSchema>({
+    defaultValues,
     criteriaMode: "all",
     mode: "all",
-    resolver: zodResolver(breakfastSchema),
+    resolver: zodResolver(breakfastFormSchema),
     reValidateMode: "onChange",
   })
 
   const completeStep = useEnterDetailsStore((state) => state.completeStep)
 
   const onSubmit = useCallback(
-    (values: BreakfastSchema) => {
-      completeStep(values)
+    (values: BreakfastFormSchema) => {
+      const pkg = packages?.find((p) => p.code === values.breakfast)
+      if (pkg) {
+        completeStep({ breakfast: pkg })
+      } else {
+        completeStep({ breakfast: BreakfastPackageEnum.NO_BREAKFAST })
+      }
     },
-    [completeStep]
+    [completeStep, packages]
   )
 
   useEffect(() => {
@@ -47,30 +61,46 @@ export default function Breakfast() {
     return () => subscription.unsubscribe()
   }, [methods, onSubmit])
 
+  if (!packages) {
+    return null
+  }
+
   return (
     <FormProvider {...methods}>
       <form className={styles.form} onSubmit={methods.handleSubmit(onSubmit)}>
-        <RadioCard
-          Icon={BreakfastIcon}
-          id={breakfastEnum.BREAKFAST}
-          name="breakfast"
-          subtitle={intl.formatMessage<React.ReactNode>(
-            { id: "<b>{amount} {currency}</b>/night per adult" },
-            {
-              amount: "150",
-              b: (str) => <b>{str}</b>,
-              currency: "SEK",
+        {packages.map((pkg) => (
+          <RadioCard
+            key={pkg.code}
+            id={pkg.code}
+            name="breakfast"
+            subtitle={
+              pkg.code === BreakfastPackageEnum.FREE_MEMBER_BREAKFAST
+                ? intl.formatMessage<React.ReactNode>(
+                    { id: "breakfast.price.free" },
+                    {
+                      amount: pkg.originalPrice,
+                      currency: pkg.currency,
+                      free: (str) => <Highlight>{str}</Highlight>,
+                      strikethrough: (str) => <s>{str}</s>,
+                    }
+                  )
+                : intl.formatMessage(
+                    { id: "breakfast.price" },
+                    {
+                      amount: pkg.packagePrice,
+                      currency: pkg.currency,
+                    }
+                  )
             }
-          )}
-          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}
-        />
+            text={intl.formatMessage({
+              id: "All our breakfast buffets offer gluten free, vegan, and allergy-friendly options.",
+            })}
+            title={intl.formatMessage({ id: "Breakfast buffet" })}
+            value={pkg.code}
+          />
+        ))}
         <RadioCard
-          Icon={NoBreakfastIcon}
-          id={breakfastEnum.NO_BREAKFAST}
+          id={BreakfastPackageEnum.NO_BREAKFAST}
           name="breakfast"
           subtitle={intl.formatMessage(
             { id: "{amount} {currency}" },
@@ -83,7 +113,7 @@ export default function Breakfast() {
             id: "You can always change your mind later and add breakfast at the hotel.",
           })}
           title={intl.formatMessage({ id: "No breakfast" })}
-          value={breakfastEnum.NO_BREAKFAST}
+          value={BreakfastPackageEnum.NO_BREAKFAST}
         />
       </form>
     </FormProvider>

components/HotelReservation/EnterDetails/Breakfast/schema.ts

@@ -1,7 +1,15 @@
 import { z } from "zod"
 
-import { breakfastEnum } from "@/types/enums/breakfast"
+import { breakfastPackageSchema } from "@/server/routers/hotels/output"
 
-export const breakfastSchema = z.object({
-  breakfast: z.nativeEnum(breakfastEnum),
+import { BreakfastPackageEnum } from "@/types/enums/breakfast"
+
+export const breakfastStoreSchema = z.object({
+  breakfast: breakfastPackageSchema.or(
+    z.literal(BreakfastPackageEnum.NO_BREAKFAST)
+  ),
+})
+
+export const breakfastFormSchema = z.object({
+  breakfast: z.string().or(z.literal(BreakfastPackageEnum.NO_BREAKFAST)),
 })