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)

apps/scandic-web/stores/my-stay/add-ancillary-flow.ts

@@ -46,7 +46,7 @@ interface AddAncillaryState {
   steps: Steps
   booking: Room
   ancillaries: Ancillaries
-  categories: Ancillary["categoryName"][]
+  categories: Ancillary["translatedCategoryName"][]
   selectedCategory: string
   selectCategory: (category: string) => void
   ancillariesBySelectedCategory: Ancillary["ancillaryContent"]
@@ -70,8 +70,9 @@ function findAncillaryByCategory(
   selectedCategory: string
 ) {
   return (
-    ancillaries.find((ancillary) => ancillary.categoryName === selectedCategory)
-      ?.ancillaryContent ?? []
+    ancillaries.find(
+      (ancillary) => ancillary.translatedCategoryName === selectedCategory
+    )?.ancillaryContent ?? []
   )
 }
 
@@ -79,12 +80,14 @@ export const createAddAncillaryStore = (
   booking: Room,
   ancillaries: Ancillaries
 ) => {
-  const selectedCategory = ancillaries[0].categoryName
+  const selectedCategory = ancillaries[0].translatedCategoryName
   const ancillariesBySelectedCategory = findAncillaryByCategory(
     ancillaries,
     selectedCategory
   )
-  const categories = ancillaries.map((ancillary) => ancillary.categoryName)
+  const categories = ancillaries.map(
+    (ancillary) => ancillary.translatedCategoryName
+  )
   const steps = {
     [AncillaryStepEnum.selectAncillary]: {
       step: AncillaryStepEnum.selectAncillary,

apps/scandic-web/utils/tracking/myStay.ts

@@ -56,7 +56,7 @@ export function buildAncillariesTracking(
       productUnits: pkg.quantity,
       productDeliveryTime: ancillaryDeliveryTime,
       productName: selectedAncillary?.title,
-      productCategory: selectedAncillary?.categoryName,
+      productCategory: selectedAncillary?.translatedCategoryName,
       ...(payedWithCard && {
         productPrice: (selectedAncillary?.price.total ?? 0) * pkg.quantity,
         currency: selectedAncillary?.price.currency,
@@ -194,7 +194,7 @@ export function trackViewAncillary(
   ancillary: SelectedAncillary,
   booking: Room
 ) {
-  const { hotelId, id, title, categoryName } = ancillary
+  const { hotelId, id, title, translatedCategoryName } = ancillary
   const isBreakfast = id === BreakfastPackageEnum.ANCILLARY_REGULAR_BREAKFAST
   const hasPayingChildren = booking.childrenAges.some((age) => age >= 4)
 
@@ -203,7 +203,7 @@ export function trackViewAncillary(
       hotelId,
       productId: id,
       productName: title,
-      productCategory: categoryName,
+      productCategory: translatedCategoryName,
     },
   ]
 
@@ -212,7 +212,7 @@ export function trackViewAncillary(
       hotelId,
       productId: BreakfastPackageEnum.ANCILLARY_CHILD_PAYING_BREAKFAST,
       productName: title,
-      productCategory: categoryName,
+      productCategory: translatedCategoryName,
     })
   }
 
@@ -283,7 +283,7 @@ export function trackAddAncillary(
       productUnits: quantityWithCard,
       productPrice: (ancillary?.price.total ?? 0) * (quantityWithCard ?? 0),
       currency: ancillary?.price.currency,
-      productCategory: ancillary?.categoryName,
+      productCategory: ancillary?.translatedCategoryName,
     })
   }
 
@@ -294,7 +294,7 @@ export function trackAddAncillary(
       productName: ancillary?.title,
       productUnits: quantityWithPoints,
       productPoints: (ancillary?.points ?? 0) * (quantityWithPoints ?? 0),
-      productCategory: ancillary?.categoryName,
+      productCategory: ancillary?.translatedCategoryName,
     })
   }
   trackEvent({

packages/trpc/lib/routers/hotels/output.ts

@@ -517,7 +517,8 @@ export const ancillaryPackagesSchema = z
   .transform(({ data }) =>
     data.attributes.ancillaries
       .map((ancillary) => ({
-        categoryName: ancillary.categoryName,
+        translatedCategoryName: ancillary.categoryName,
+        internalCategoryName: ancillary.internalCategoryName,
         ancillaryContent: ancillary.ancillaryContent
           .filter((item) => item.status === "Available")
           .map((item) => ({
@@ -533,7 +534,8 @@ export const ancillaryPackagesSchema = z
             points: item.variants.ancillaryLoyalty?.points,
             loyaltyCode: item.variants.ancillaryLoyalty?.code,
             requiresDeliveryTime: item.requiresDeliveryTime,
-            categoryName: ancillary.categoryName,
+            translatedCategoryName: ancillary.categoryName,
+            internalCategoryName: ancillary.internalCategoryName,
           })),
       }))
       .filter((ancillary) => ancillary.ancillaryContent.length > 0)

packages/trpc/lib/routers/hotels/schemas/packages.ts

@@ -65,5 +65,6 @@ export const breakfastPackageSchema = z.object({
 
 export const ancillaryPackageSchema = z.object({
   categoryName: z.string(),
+  internalCategoryName: z.string(),
   ancillaryContent: z.array(ancillaryContentSchema),
 })