fix(BOOK-412): Using internalCategoryName to map ancillaries and show translated categoryName only

Approved-by: Linus Flood

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

@@ -74,11 +74,19 @@ export function Ancillaries({
           loyaltyCode: undefined,
           points: undefined,
           hotelId: Number(bookedRoom.hotelId),
-          categoryName: "Food",
+          internalCategoryName: "Food",
+          translatedCategoryName: intl.formatMessage({
+            defaultMessage: "Food",
+          }),
         }
       : undefined
 
-  const allAncillaries = mapAncillaries(ancillaries, breakfastAncillary, user)
+  const allAncillaries = mapAncillaries(
+    intl,
+    ancillaries,
+    breakfastAncillary,
+    user
+  )
 
   if (!allAncillaries.length) {
     return null

apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/utils.ts

@@ -1,4 +1,5 @@
 import type { User } from "@scandic-hotels/trpc/types/user"
+import type { IntlShape } from "react-intl"
 
 import type {
   Ancillaries,
@@ -40,12 +41,14 @@ export function generateUniqueAncillaries(
 function addBreakfastPackage(
   ancillaries: Ancillaries,
   breakfast: SelectedAncillary | undefined,
-  categoryName: string
+  internalCategoryName: string,
+  translatedCategoryName: string
 ): Ancillaries {
   if (!breakfast) return ancillaries
 
-  const category = ancillaries.find((a) => a.categoryName === categoryName)
-
+  const category = ancillaries.find(
+    (a) => a.internalCategoryName === internalCategoryName
+  )
   if (category) {
     const newCategory = {
       ...category,
@@ -53,14 +56,24 @@ function addBreakfastPackage(
     }
 
     return ancillaries.map((ancillary) =>
-      ancillary.categoryName === categoryName ? newCategory : ancillary
+      ancillary.internalCategoryName === internalCategoryName
+        ? newCategory
+        : ancillary
     )
   }
 
-  return [{ categoryName, ancillaryContent: [breakfast] }, ...ancillaries]
+  return [
+    {
+      internalCategoryName,
+      translatedCategoryName,
+      ancillaryContent: [breakfast],
+    },
+    ...ancillaries,
+  ]
 }
 
 export function mapAncillaries(
+  intl: IntlShape,
   ancillaries: Ancillaries | null,
   breakfastAncillary: SelectedAncillary | undefined,
   user: User | null
@@ -68,12 +81,14 @@ export function mapAncillaries(
   const withBreakfastPopular = addBreakfastPackage(
     ancillaries ?? [],
     breakfastAncillary,
-    "Popular"
+    "Popular",
+    intl.formatMessage({ defaultMessage: "Popular" })
   )
   const withBreakfastFood = addBreakfastPackage(
     withBreakfastPopular,
     breakfastAncillary,
-    "Food"
+    "Food",
+    intl.formatMessage({ defaultMessage: "Food" })
   )
 
   return filterPoints(withBreakfastFood, user)