Merged in feat/sw-1688-list-breakfast (pull request #1615)

Feat/sw-1688 list breakfast

Approved-by: Pontus Dreij

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/index.tsx

@@ -1,4 +1,5 @@
 "use client"
+import { useMemo } from "react"
 import { useIntl } from "react-intl"
 
 import { Carousel } from "@/components/Carousel"
@@ -17,46 +18,145 @@ import type {
   Ancillaries,
   AncillariesProps,
   Ancillary,
+  SelectedAncillary,
 } from "@/types/components/myPages/myStay/ancillaries"
+import { BreakfastPackageEnum } from "@/types/enums/breakfast"
+import type { User } from "@/types/user"
+
+function filterPoints(ancillaries: Ancillaries, user: User | null) {
+  return ancillaries.map((ancillary) => {
+    return {
+      ...ancillary,
+      ancillaryContent: ancillary.ancillaryContent.map(
+        ({ points, ...ancillary }) => ({
+          ...ancillary,
+          points: user ? points : undefined,
+        })
+      ),
+    }
+  })
+}
+
+function generateUniqueAncillaries(
+  ancillaries: Ancillaries
+): Ancillary["ancillaryContent"] {
+  const uniqueAncillaries = new Map(
+    ancillaries.flatMap((a) => {
+      return a.ancillaryContent.map((ancillary) => [ancillary.id, ancillary])
+    })
+  )
+  return [...uniqueAncillaries.values()]
+}
+
+/**
+ * Adds the breakfast package to the ancillaries
+ *
+ * Returns the ancillaries array with the breakfast package added to the
+ * specified category. If the category doesn't exist it's created.
+ */
+function addBreakfastPackage(
+  ancillaries: Ancillaries,
+  breakfast: SelectedAncillary | undefined,
+  categoryName: string
+): Ancillaries {
+  if (!breakfast) return ancillaries
+
+  const category = ancillaries.find((a) => a.categoryName === categoryName)
+
+  if (category) {
+    const newCategory = {
+      ...category,
+      ancillaryContent: [breakfast, ...category.ancillaryContent],
+    }
+
+    return ancillaries.map((ancillary) =>
+      ancillary.categoryName === categoryName ? newCategory : ancillary
+    )
+  }
+
+  return [{ categoryName, ancillaryContent: [breakfast] }, ...ancillaries]
+}
 
 export function Ancillaries({
   ancillaries,
   booking,
+  packages,
   user,
   savedCreditCards,
   refId,
 }: AncillariesProps) {
   const intl = useIntl()
 
+  /**
+   * A constructed ancillary for breakfast
+   *
+   * This is a "fake" ancillary for breakfast, since breakfast isn't really an
+   * ancillary in the system. This makes it play nicely with the add ancillary
+   * flow. If the user shouldn't be able to add breakfast this will be `undefined`.
+   */
+  const breakfastAncillary = useMemo(() => {
+    // This is the logic deciding if breakfast should be addable or not
+    if (
+      booking.rateDefinition.breakfastIncluded ||
+      booking.packages.some((p) =>
+        Object.values(BreakfastPackageEnum).includes(
+          p.code as unknown as BreakfastPackageEnum
+        )
+      )
+    ) {
+      return undefined
+    }
+
+    const breakfastPackage = packages?.find(
+      (p) => p.code === BreakfastPackageEnum.ANCILLARY_REGULAR_BREAKFAST
+    )
+
+    const breakfastAncillary: SelectedAncillary | undefined = breakfastPackage
+      ? {
+          description: intl.formatMessage({ id: "Buffet" }),
+          id: breakfastPackage.code,
+          title: intl.formatMessage({ id: "Breakfast" }),
+          price: breakfastPackage.localPrice,
+          // TODO: Change this to the correct URL, whatever that is
+          imageUrl:
+            "https://images-test.scandichotels.com/publishedmedia/hcf9hchiad7zrvlkc2pt/Breakfast_-_Scandic_Sweden_-_Free_to_use.jpg",
+          requiresDeliveryTime: false,
+          loyaltyCode: undefined,
+          points: undefined,
+        }
+      : undefined
+
+    return breakfastAncillary
+  }, [
+    booking.packages,
+    booking.rateDefinition.breakfastIncluded,
+    intl,
+    packages,
+  ])
+
+  const allAncillaries = useMemo(() => {
+    if (!ancillaries?.length) {
+      return []
+    }
+
+    const withBreakfastPopular = addBreakfastPackage(
+      ancillaries,
+      breakfastAncillary,
+      "Popular"
+    )
+    const withBreakfastFood = addBreakfastPackage(
+      withBreakfastPopular,
+      breakfastAncillary,
+      "Food"
+    )
+    const filtered = filterPoints(withBreakfastFood, user)
+    return filtered
+  }, [ancillaries, breakfastAncillary, user])
+
   if (!ancillaries?.length) {
     return null
   }
 
-  function filterPoints(ancillaries: Ancillaries) {
-    return ancillaries.map((ancillary) => {
-      return {
-        ...ancillary,
-        ancillaryContent: ancillary.ancillaryContent.map(
-          ({ points, ...ancillary }) => ({
-            ...ancillary,
-            points: user ? points : undefined,
-          })
-        ),
-      }
-    })
-  }
-
-  function generateUniqueAncillaries(
-    ancillaries: Ancillaries
-  ): Ancillary["ancillaryContent"] {
-    const uniqueAncillaries = new Map(
-      ancillaries.flatMap((a) =>
-        a.ancillaryContent.map((ancillary) => [ancillary.id, ancillary])
-      )
-    )
-    return [...uniqueAncillaries.values()]
-  }
-  const allAncillaries = filterPoints(ancillaries)
   const uniqueAncillaries = generateUniqueAncillaries(allAncillaries)
 
   return (
@@ -77,7 +177,7 @@ export function Ancillaries({
 
         <div className={styles.mobileAncillaries}>
           <Carousel>
-            <Carousel.Content className={styles.carouselContainer}>
+            <Carousel.Content>
               {uniqueAncillaries.map((ancillary) => {
                 return (
                   <Carousel.Item key={ancillary.id}>
@@ -86,8 +186,8 @@ export function Ancillaries({
                 )
               })}
             </Carousel.Content>
-            <Carousel.Previous className={styles.navigationButton} />
-            <Carousel.Next className={styles.navigationButton} />
+            <Carousel.Previous />
+            <Carousel.Next />
             <Carousel.Dots />
           </Carousel>
         </div>