From 674c22c9aa678a9816d17ec1f538eb1423b9d6ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Thu, 5 Dec 2024 16:13:05 +0100
Subject: [PATCH 1/3] chore(SW-872): add breadcrumbs to hotel pages

---
 .../Fragments/Breadcrumbs/Breadcrumbs.graphql |  3 ++
 .../Fragments/Breadcrumbs/HotelPage.graphql   | 24 ++++++++++++++++
 .../Query/Breadcrumbs/HotelPage.graphql       | 28 +++++++++++++++++++
 .../routers/contentstack/breadcrumbs/query.ts | 15 ++++++++++
 4 files changed, 70 insertions(+)
 create mode 100644 lib/graphql/Fragments/Breadcrumbs/HotelPage.graphql
 create mode 100644 lib/graphql/Query/Breadcrumbs/HotelPage.graphql

diff --git a/lib/graphql/Fragments/Breadcrumbs/Breadcrumbs.graphql b/lib/graphql/Fragments/Breadcrumbs/Breadcrumbs.graphql
index 26efd5704..fdc5d2730 100644
--- a/lib/graphql/Fragments/Breadcrumbs/Breadcrumbs.graphql
+++ b/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
       }
     }
diff --git a/lib/graphql/Fragments/Breadcrumbs/HotelPage.graphql b/lib/graphql/Fragments/Breadcrumbs/HotelPage.graphql
new file mode 100644
index 000000000..1e20f3513
--- /dev/null
+++ b/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
+  }
+}
diff --git a/lib/graphql/Query/Breadcrumbs/HotelPage.graphql b/lib/graphql/Query/Breadcrumbs/HotelPage.graphql
new file mode 100644
index 000000000..14e53309b
--- /dev/null
+++ b/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
+    }
+  }
+}
diff --git a/server/routers/contentstack/breadcrumbs/query.ts b/server/routers/contentstack/breadcrumbs/query.ts
index 4d6e24a0c..3315eea91 100644
--- a/server/routers/contentstack/breadcrumbs/query.ts
+++ b/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

From 65e457d57a488b8e4a926f2c947ba1d18d0edc21 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Wed, 11 Dec 2024 08:36:40 +0100
Subject: [PATCH 2/3] fix(SW-872): update border radius

---
 .../HotelPage/PreviewImages/previewImages.module.css            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/ContentType/HotelPage/PreviewImages/previewImages.module.css b/components/ContentType/HotelPage/PreviewImages/previewImages.module.css
index edbf90ca7..b97213583 100644
--- a/components/ContentType/HotelPage/PreviewImages/previewImages.module.css
+++ b/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;

From e1b20a4a0bf9b3fa46303b657fd6988bd62555e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Matilda=20Landstr=C3=B6m?=
 <matilda.landstrom@scandichotels.com>
Date: Wed, 11 Dec 2024 12:54:30 +0100
Subject: [PATCH 3/3] fix(SW-872): refactor to align design

---
 .../[contentType]/[uid]/@breadcrumbs/page.tsx         |  9 +++++++--
 components/ContentType/HotelPage/hotelPage.module.css |  8 ++++----
 components/ContentType/HotelPage/index.tsx            | 11 +++++++++--
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx b/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx
index 587268de3..3fd70362d 100644
--- a/app/[lang]/(live)/(public)/[contentType]/[uid]/@breadcrumbs/page.tsx
+++ b/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 />
diff --git a/components/ContentType/HotelPage/hotelPage.module.css b/components/ContentType/HotelPage/hotelPage.module.css
index 4ca65b167..fd47cf7ea 100644
--- a/components/ContentType/HotelPage/hotelPage.module.css
+++ b/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 {
-  grid-area: hotelImages;
+.header {
   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);
diff --git a/components/ContentType/HotelPage/index.tsx b/components/ContentType/HotelPage/index.tsx
index 13030f130..a80662003 100644
--- a/components/ContentType/HotelPage/index.tsx
+++ b/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}>