Merged in feat/SW-682-hotel-page-update-navigation-headers (pull request #1193)

feat/SW-682-hotel-page-update-navigation-headers

* feat(SW-682): fetch tab values

* feat(SW-682): change key name


Approved-by: Erik Tiekstra
Approved-by: Matilda Landström

components/ContentType/HotelPage/TabNavigation/index.tsx

@@ -23,6 +23,7 @@ export default function TabNavigation({
   restaurantTitle,
   hasActivities,
   hasFAQ,
+  tabValues,
 }: TabNavigationProps) {
   const hash = useHash()
   const intl = useIntl()
@@ -37,29 +38,36 @@ export default function TabNavigation({
   const tabLinks: { hash: HotelHashValues; text: string }[] = [
     {
       hash: HotelHashValues.overview,
-      text: intl.formatMessage({ id: "Overview" }),
+      text: tabValues?.overview || intl.formatMessage({ id: "Overview" }),
     },
     {
       hash: HotelHashValues.rooms,
-      text: intl.formatMessage({ id: "Rooms" }),
+      text: tabValues?.rooms || intl.formatMessage({ id: "Rooms" }),
     },
     {
       hash: HotelHashValues.restaurant,
-      text: intl.formatMessage({ id: restaurantTitle }, { count: 1 }),
+      text:
+        tabValues?.restaurant_bar ||
+        intl.formatMessage({ id: restaurantTitle }, { count: 1 }),
     },
     {
       hash: HotelHashValues.meetings,
-      text: intl.formatMessage({ id: "Meetings & Conferences" }),
+      text:
+        tabValues?.conferences_meetings ||
+        intl.formatMessage({ id: "Meetings & Conferences" }),
     },
     {
       hash: HotelHashValues.wellness,
-      text: intl.formatMessage({ id: "Wellness & Exercise" }),
+      text:
+        tabValues?.health_wellness ||
+        intl.formatMessage({ id: "Wellness & Exercise" }),
     },
     ...(hasActivities
       ? [
           {
             hash: HotelHashValues.activities,
-            text: intl.formatMessage({ id: "Activities" }),
+            text:
+              tabValues?.activities || intl.formatMessage({ id: "Activities" }),
           },
         ]
       : []),
@@ -67,7 +75,7 @@ export default function TabNavigation({
       ? [
           {
             hash: HotelHashValues.faq,
-            text: intl.formatMessage({ id: "FAQ" }),
+            text: tabValues?.faq || intl.formatMessage({ id: "FAQ" }),
           },
         ]
       : []),

components/ContentType/HotelPage/index.tsx

@@ -58,7 +58,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
   }
 
   const jsonSchema = generateHotelSchema(hotelData.data.attributes)
-  const { faq, content } = hotelPageData
+  const { faq, content, tabValues } = hotelPageData
   const {
     name,
     address,
@@ -142,6 +142,7 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
         restaurantTitle={getRestaurantHeading(detailedFacilities)}
         hasActivities={activitiesCards.length > 0}
         hasFAQ={!!faq.accordions.length}
+        tabValues={tabValues}
       />
 
       <main className={styles.mainSection}>

lib/graphql/Query/HotelPage/HotelPage.graphql

@@ -19,6 +19,16 @@ query GetHotelPage($locale: String!, $uid: String!) {
     hotel_page_id
     title
     url
+    hotel_navigation {
+      overview
+      rooms
+      restaurant_bar
+      conferences_meetings
+      health_wellness
+      activities
+      offers
+      faq
+    }
     faq {
       __typename
       title

server/routers/contentstack/hotelPage/output.ts

@@ -36,38 +36,55 @@ export const contentBlock = z.discriminatedUnion("__typename", [
 ])
 
 export const hotelPageSchema = z.object({
-  hotel_page: z.object({
-    content: discriminatedUnionArray(contentBlock.options)
-      .nullable()
-      .transform((data) => {
-        let spaPage: SpaPage | undefined
-        let activitiesCards: ActivitiesCard[] = []
-
-        data?.map((block) => {
-          switch (block.typename) {
-            case HotelPageEnum.ContentStack.blocks.ActivitiesCard:
-              activitiesCards.push(block)
-              break
-            case HotelPageEnum.ContentStack.blocks.SpaPage:
-              spaPage = block
-              break
-            default:
-              break
-          }
+  hotel_page: z
+    .object({
+      hotel_navigation: z
+        .object({
+          overview: z.string().optional(),
+          rooms: z.string().optional(),
+          restaurant_bar: z.string().optional(),
+          conferences_meetings: z.string().optional(),
+          health_wellness: z.string().optional(),
+          activities: z.string().optional(),
+          offers: z.string().optional(),
+          faq: z.string().optional(),
         })
-        return { spaPage, activitiesCards }
-      }),
-    faq: hotelFaqSchema,
-    hotel_page_id: z.string(),
-    title: z.string(),
-    url: z.string(),
-    system: systemSchema.merge(
-      z.object({
-        created_at: z.string(),
-        updated_at: z.string(),
-      })
-    ),
-  }),
+        .nullable(),
+      content: discriminatedUnionArray(contentBlock.options)
+        .nullable()
+        .transform((data) => {
+          let spaPage: SpaPage | undefined
+          let activitiesCards: ActivitiesCard[] = []
+
+          data?.map((block) => {
+            switch (block.typename) {
+              case HotelPageEnum.ContentStack.blocks.ActivitiesCard:
+                activitiesCards.push(block)
+                break
+              case HotelPageEnum.ContentStack.blocks.SpaPage:
+                spaPage = block
+                break
+              default:
+                break
+            }
+          })
+          return { spaPage, activitiesCards }
+        }),
+      faq: hotelFaqSchema,
+      hotel_page_id: z.string(),
+      title: z.string(),
+      url: z.string(),
+      system: systemSchema.merge(
+        z.object({
+          created_at: z.string(),
+          updated_at: z.string(),
+        })
+      ),
+    })
+    .transform(({ hotel_navigation, ...rest }) => ({
+      tabValues: hotel_navigation,
+      ...rest,
+    })),
 })
 
 /** REFS */

types/components/hotelPage/tabNavigation.ts

@@ -8,8 +8,20 @@ export enum HotelHashValues {
   faq = "faq",
 }
 
+type Tabs = {
+  overview?: string
+  rooms?: string
+  restaurant_bar?: string
+  conferences_meetings?: string
+  health_wellness?: string
+  activities?: string
+  offers?: string
+  faq?: string
+}
+
 export type TabNavigationProps = {
   restaurantTitle: string
   hasActivities: boolean
   hasFAQ: boolean
+  tabValues?: Tabs | null
 }