Merged master into feat/membership-cards-improvements

app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx

@@ -4,11 +4,16 @@ import Breadcrumbs from "@/components/Breadcrumbs"
 import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import { setLang } from "@/i18n/serverContext"
 
-import type { LangParams, PageArgs } from "@/types/params"
+import type { ContentTypeParams, LangParams, PageArgs } from "@/types/params"
 
-export default function PageBreadcrumbs({ params }: PageArgs<LangParams>) {
+export default function PageBreadcrumbs({
+  params,
+}: PageArgs<LangParams & ContentTypeParams>) {
   setLang(params.lang)
 
+  if (params.contentType === "hotel-page") {
+    return null
+  }
   return (
     <Suspense fallback={<BreadcrumbsSkeleton />}>
       <Breadcrumbs />

components/ContentType/HotelPage/PreviewImages/previewImages.module.css

@@ -9,7 +9,7 @@
 
 .image {
   object-fit: cover;
-  border-radius: var(--Corner-radius-Medium);
+  border-radius: var(--Corner-radius-Small);
   width: 100%;
   height: 100%;
   max-height: 30vh;

components/ContentType/HotelPage/hotelPage.module.css

@@ -9,7 +9,7 @@
   );
   display: grid;
   grid-template-areas:
-    "hotelImages"
+    "header"
     "tabNavigation"
     "mainSection"
     "mapContainer";
@@ -17,9 +17,9 @@
   max-width: var(--max-width);
 }
 
-.hotelImages {
+.header {
-  grid-area: hotelImages;
   background-color: var(--Base-Surface-Subtle-Normal);
+  grid-area: header;
 }
 
 .mainSection {
@@ -54,7 +54,7 @@
 @media screen and (min-width: 1367px) {
   .pageContainer {
     grid-template-areas:
-      "hotelImages mapContainer"
+      "header mapContainer"
       "tabNavigation mapContainer"
       "mainSection mapContainer";
     grid-template-columns: 1fr var(--hotel-page-map-desktop-width);

components/ContentType/HotelPage/index.tsx

@@ -1,12 +1,15 @@
 import { notFound } from "next/navigation"
+import { Suspense } from "react"
 
 import { restaurantAndBar } from "@/constants/routes/hotelPageParams"
 import { env } from "@/env/server"
 import { getHotelData, getHotelPage } from "@/lib/trpc/memoizedRequests"
 
 import AccordionSection from "@/components/Blocks/Accordion"
+import Breadcrumbs from "@/components/Breadcrumbs"
 import SidePeekProvider from "@/components/SidePeeks/SidePeekProvider"
 import Alert from "@/components/TempDesignSystem/Alert"
+import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import SidePeek from "@/components/TempDesignSystem/SidePeek"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
@@ -117,14 +120,18 @@ export default async function HotelPage({ hotelId }: HotelPageProps) {
           __html: JSON.stringify(jsonSchema.jsonLd),
         }}
       />
-      <div className={styles.hotelImages}>
+      <header className={styles.header}>
+        <Suspense fallback={<BreadcrumbsSkeleton />}>
+          <Breadcrumbs />
+        </Suspense>
         {images?.length && <PreviewImages images={images} hotelName={name} />}
-      </div>
+      </header>
       <TabNavigation
         restaurantTitle={getRestaurantHeading(detailedFacilities)}
         hasActivities={!!activitiesCard}
         hasFAQ={!!faq.accordions.length}
       />
+
       <main className={styles.mainSection}>
         <div id={HotelHashValues.overview} className={styles.overview}>
           <div className={styles.introContainer}>

lib/graphql/Fragments/Breadcrumbs/Breadcrumbs.graphql

@@ -1,6 +1,7 @@
 #import "./AccountPage.graphql"
 #import "./CollectionPage.graphql"
 #import "./ContentPage.graphql"
+#import "./HotelPage.graphql"
 #import "./LoyaltyPage.graphql"
 
 fragment Breadcrumbs on Breadcrumbs {
@@ -12,6 +13,7 @@ fragment Breadcrumbs on Breadcrumbs {
         ...AccountPageBreadcrumb
         ...CollectionPageBreadcrumb
         ...ContentPageBreadcrumb
+        ...HotelPageBreadcrumb
         ...LoyaltyPageBreadcrumb
       }
     }
@@ -27,6 +29,7 @@ fragment BreadcrumbsRefs on Breadcrumbs {
         ...AccountPageBreadcrumbRef
         ...CollectionPageBreadcrumbRef
         ...ContentPageBreadcrumbRef
+        ...HotelPageBreadcrumbRef
         ...LoyaltyPageBreadcrumbRef
       }
     }

lib/graphql/Fragments/Breadcrumbs/HotelPage.graphql

@@ -0,0 +1,24 @@
+#import "../System.graphql"
+
+fragment HotelPageBreadcrumb on HotelPage {
+  web {
+    breadcrumbs {
+      title
+    }
+  }
+  system {
+    ...System
+  }
+  url
+}
+
+fragment HotelPageBreadcrumbRef on HotelPage {
+  web {
+    breadcrumbs {
+      title
+    }
+  }
+  system {
+    ...System
+  }
+}

lib/graphql/Query/Breadcrumbs/HotelPage.graphql

@@ -0,0 +1,28 @@
+#import "../../Fragments/Breadcrumbs/Breadcrumbs.graphql"
+#import "../../Fragments/System.graphql"
+
+query GetHotelPageBreadcrumbs($locale: String!, $uid: String!) {
+  hotel_page(locale: $locale, uid: $uid) {
+    web {
+      breadcrumbs {
+        ...Breadcrumbs
+      }
+    }
+    system {
+      ...System
+    }
+  }
+}
+
+query GetHotelPageBreadcrumbsRefs($locale: String!, $uid: String!) {
+  hotel_page(locale: $locale, uid: $uid) {
+    web {
+      breadcrumbs {
+        ...BreadcrumbsRefs
+      }
+    }
+    system {
+      ...System
+    }
+  }
+}

server/routers/contentstack/breadcrumbs/query.ts

@@ -13,6 +13,10 @@ import {
   GetContentPageBreadcrumbs,
   GetContentPageBreadcrumbsRefs,
 } from "@/lib/graphql/Query/Breadcrumbs/ContentPage.graphql"
+import {
+  GetHotelPageBreadcrumbs,
+  GetHotelPageBreadcrumbsRefs,
+} from "@/lib/graphql/Query/Breadcrumbs/HotelPage.graphql"
 import {
   GetLoyaltyPageBreadcrumbs,
   GetLoyaltyPageBreadcrumbsRefs,
@@ -199,6 +203,17 @@ export const breadcrumbsQueryRouter = router({
           },
           variables
         )
+      case PageTypeEnum.hotelPage:
+        return await getBreadcrumbs<{
+          hotel_page: RawBreadcrumbsSchema
+        }>(
+          {
+            dataKey: "hotel_page",
+            refQuery: GetHotelPageBreadcrumbsRefs,
+            query: GetHotelPageBreadcrumbs,
+          },
+          variables
+        )
       case PageTypeEnum.loyaltyPage:
         return await getBreadcrumbs<{
           loyalty_page: RawBreadcrumbsSchema