Merged in feat/SW-1199-subpage-breadcrumbs (pull request #1254)

feat(SW-1199): Added breadcrumbs to subpages

* feat(SW-1199): Added breadcrumbs to subpages


Approved-by: Fredrik Thorsson
Approved-by: Matilda Landström

components/Breadcrumbs/index.tsx

@@ -7,12 +7,17 @@ import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs
 
 export default async function Breadcrumbs({
   variant,
-}: Pick<BreadcrumbsProps, "variant">) {
+  subpageTitle,
+}: Pick<BreadcrumbsProps, "variant" | "subpageTitle">) {
   const breadcrumbs = await serverClient().contentstack.breadcrumbs.get()
-
   if (!breadcrumbs?.length) {
     return null
   }
+
+  if (subpageTitle) {
+    breadcrumbs.push({ title: subpageTitle, uid: subpageTitle, href: "" })
+  }
+
   const jsonSchema = generateBreadcrumbsSchema(breadcrumbs)
 
   return (

components/ContentType/HotelSubpage/index.tsx

@@ -48,7 +48,10 @@ export default async function HotelSubpage({
       <section className={styles.hotelSubpage}>
         <div className={styles.header}>
           <Suspense fallback={<BreadcrumbsSkeleton />}>
-            <Breadcrumbs variant="hotelSubpage" />
+            <Breadcrumbs
+              variant="hotelSubpage"
+              subpageTitle={pageData.heading}
+            />
           </Suspense>
           {pageData.heroImage && (
             <div className={styles.heroWrapper}>

components/TempDesignSystem/Breadcrumbs/breadcrumbs.ts

@@ -10,5 +10,6 @@ type Breadcrumb = {
 
 export interface BreadcrumbsProps
   extends VariantProps<typeof breadcrumbsVariants> {
+  subpageTitle?: string
   breadcrumbs: Breadcrumb[]
 }

components/TempDesignSystem/Breadcrumbs/index.tsx

@@ -40,8 +40,8 @@ export default function Breadcrumbs({
           </li>
         ) : null}
 
-        {breadcrumbs.map((breadcrumb) => {
+        {breadcrumbs.map((breadcrumb, index) => {
-          if (breadcrumb.href) {
+          if (breadcrumb.href && index < breadcrumbs.length - 1) {
             return (
               <li key={breadcrumb.uid} className={styles.listItem}>
                 <Link

lib/graphql/Query/Breadcrumbs/AccountPage.graphql

@@ -3,6 +3,7 @@
 
 query GetMyPagesBreadcrumbs($locale: String!, $uid: String!) {
   account_page(locale: $locale, uid: $uid) {
+    url
     web {
       breadcrumbs {
         ...Breadcrumbs

lib/graphql/Query/Breadcrumbs/CollectionPage.graphql

@@ -3,6 +3,7 @@
 
 query GetCollectionPageBreadcrumbs($locale: String!, $uid: String!) {
   collection_page(locale: $locale, uid: $uid) {
+    url
     web {
       breadcrumbs {
         ...Breadcrumbs

lib/graphql/Query/Breadcrumbs/ContentPage.graphql

@@ -3,6 +3,7 @@
 
 query GetContentPageBreadcrumbs($locale: String!, $uid: String!) {
   content_page(locale: $locale, uid: $uid) {
+    url
     web {
       breadcrumbs {
         ...Breadcrumbs

lib/graphql/Query/Breadcrumbs/DestinationCityPage.graphql

@@ -3,6 +3,7 @@
 
 query GetDestinationCityPageBreadcrumbs($locale: String!, $uid: String!) {
   destination_city_page(locale: $locale, uid: $uid) {
+    url
     web {
       breadcrumbs {
         ...Breadcrumbs

lib/graphql/Query/Breadcrumbs/DestinationCountryPage.graphql

@@ -3,6 +3,7 @@
 
 query GetDestinationCountryPageBreadcrumbs($locale: String!, $uid: String!) {
   destination_country_page(locale: $locale, uid: $uid) {
+    url
     web {
       breadcrumbs {
         ...Breadcrumbs

lib/graphql/Query/Breadcrumbs/DestinationOverviewPage.graphql

@@ -3,6 +3,7 @@
 
 query GetDestinationOverviewPageBreadcrumbs($locale: String!, $uid: String!) {
   destination_overview_page(locale: $locale, uid: $uid) {
+    url
     web {
       breadcrumbs {
         ...Breadcrumbs

lib/graphql/Query/Breadcrumbs/HotelPage.graphql

@@ -3,6 +3,7 @@
 
 query GetHotelPageBreadcrumbs($locale: String!, $uid: String!) {
   hotel_page(locale: $locale, uid: $uid) {
+    url
     web {
       breadcrumbs {
         ...Breadcrumbs

lib/graphql/Query/Breadcrumbs/LoyaltyPage.graphql

@@ -3,6 +3,7 @@
 
 query GetLoyaltyPageBreadcrumbs($locale: String!, $uid: String!) {
   loyalty_page(locale: $locale, uid: $uid) {
+    url
     web {
       breadcrumbs {
         ...Breadcrumbs

server/routers/contentstack/breadcrumbs/output.ts

@@ -28,6 +28,7 @@ export const breadcrumbsRefsSchema = z.object({
 })
 
 export const rawBreadcrumbsDataSchema = z.object({
+  url: z.string(),
   web: z.object({
     breadcrumbs: z.object({
       title: z.string(),
@@ -66,7 +67,7 @@ export const breadcrumbsSchema = rawBreadcrumbsDataSchema.transform((data) => {
   const pageBreadcrumb = {
     title,
     uid: data.system.uid,
-    href: undefined,
+    href: removeMultipleSlashes(`/${data.system.locale}/${data.url}`),
   }
   const homeBreadcrumb = homeBreadcrumbs[data.system.locale]