feat(SW-441): Added dynamic values for activities and faq to tabNavigation

components/ContentType/HotelPage/TabNavigation/index.tsx

@@ -1,4 +1,5 @@
 "use client"
+
 import { useRouter } from "next/navigation"
 import { useEffect } from "react"
 import { useIntl } from "react-intl"
@@ -14,13 +15,16 @@ import {
   type TabNavigationProps,
 } from "@/types/components/hotelPage/tabNavigation"
 
-export default function TabNavigation({ restaurantTitle }: TabNavigationProps) {
+export default function TabNavigation({
+  restaurantTitle,
+  hasActivities,
+  hasFAQ,
+}: TabNavigationProps) {
   const hash = useHash()
   const intl = useIntl()
   const router = useRouter()
-  // const [isObserverActive, setIsObserverActive] = useState<boolean>(true)
 
-  const hotelTabLinks: { hash: HotelHashValues | string; text: string }[] = [
+  const tabLinks: { hash: HotelHashValues; text: string }[] = [
     {
       hash: HotelHashValues.overview,
       text: intl.formatMessage({ id: "Overview" }),
@@ -38,15 +42,26 @@ export default function TabNavigation({ restaurantTitle }: TabNavigationProps) {
       hash: HotelHashValues.wellness,
       text: intl.formatMessage({ id: "Wellness & Exercise" }),
     },
-    {
+    ...(hasActivities
-      hash: HotelHashValues.activities,
+      ? [
-      text: intl.formatMessage({ id: "Activities" }),
+          {
-    },
+            hash: HotelHashValues.activities,
-    { hash: HotelHashValues.faq, text: intl.formatMessage({ id: "FAQ" }) },
+            text: intl.formatMessage({ id: "Activities" }),
+          },
+        ]
+      : []),
+    ...(hasFAQ
+      ? [
+          {
+            hash: HotelHashValues.faq,
+            text: intl.formatMessage({ id: "FAQ" }),
+          },
+        ]
+      : []),
   ]
 
   const { activeSectionId, pauseScrollSpy } = useScrollSpy(
-    hotelTabLinks.map(({ hash }) => hash)
+    tabLinks.map(({ hash }) => hash)
   )
 
   useEffect(() => {
@@ -58,7 +73,7 @@ export default function TabNavigation({ restaurantTitle }: TabNavigationProps) {
   return (
     <div className={styles.stickyWrapper}>
       <nav className={styles.tabsContainer}>
-        {hotelTabLinks.map((link) => {
+        {tabLinks.map((link) => {
           const isActive =
             hash === link.hash ||
             (!hash && link.hash === HotelHashValues.overview)

components/ContentType/HotelPage/index.tsx

@@ -63,6 +63,8 @@ export default async function HotelPage() {
       </div>
       <TabNavigation
         restaurantTitle={getRestaurantHeading(hotelDetailedFacilities)}
+        hasActivities={!!activitiesCard}
+        hasFAQ={false}
       />
       <main className={styles.mainSection}>
         <div id={HotelHashValues.overview} className={styles.introContainer}>

types/components/hotelPage/tabNavigation.ts

@@ -10,4 +10,6 @@ export enum HotelHashValues {
 
 export type TabNavigationProps = {
   restaurantTitle: string
+  hasActivities: boolean
+  hasFAQ: boolean
 }