Merged in fix/SW-2535-remove-breadcrumbs-select-hotel (pull request #1968)

fix(SW-2535): remove breadcrumbs on select hotel page

* fix(SW-2535): remove breadcrumbs on select hotel page


Approved-by: Niclas Edenvin

apps/scandic-web/components/HotelReservation/SelectHotel/SelectHotelSkeleton.tsx

@@ -13,10 +13,6 @@ export function SelectHotelSkeleton({ count = 4 }: Props) {
     <div className={styles.skeletonContainer}>
       <header className={styles.header}>
         <div className={styles.headerContent}>
-          <div className={styles.breadcrumbs}>
-            <SkeletonShimmer height={"25px"} width={"300px"} />
-          </div>
-
           <div className={styles.title}>
             <div className={styles.cityInformation}>
               <SkeletonShimmer height={"25px"} width={"200px"} />

apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx

@@ -7,21 +7,17 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { FamilyAndFriendsCodes } from "@/constants/booking"
 import {
-  alternativeHotels,
   alternativeHotelsMap,
-  selectHotel,
   selectHotelMap,
 } from "@/constants/routes/hotelReservation"
 
 import StaticMap from "@/components/Maps/StaticMap"
-import Breadcrumbs from "@/components/TempDesignSystem/Breadcrumbs"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import TrackingSDK from "@/components/TrackingSDK"
 import { getIntl } from "@/i18n"
 import { getHotelSearchDetails } from "@/utils/hotelSearchDetails"
-import { convertObjToSearchParams } from "@/utils/url"
 
 import FnFNotAllowedAlert from "../FnFNotAllowedAlert/FnFNotAllowedAlert"
 import HotelCardListing from "../HotelCardListing"
@@ -94,48 +90,6 @@ export default async function SelectHotel({
     "country" in city
   const filterList = getFiltersFromHotels(hotels)
 
-  const convertedSearchParams = convertObjToSearchParams(selectHotelParams)
-  const breadcrumbs = [
-    {
-      title: intl.formatMessage({
-        defaultMessage: "Home",
-      }),
-      href: `/${params.lang}`,
-      uid: "home-page",
-    },
-    {
-      title: intl.formatMessage({
-        defaultMessage: "Hotel reservation",
-      }),
-      href: `/${params.lang}/hotelreservation`,
-      uid: "hotel-reservation",
-    },
-    isAlternativeFor
-      ? {
-          title: intl.formatMessage({
-            defaultMessage: "Alternative hotels",
-          }),
-          href: `${alternativeHotels(params.lang)}/?${convertedSearchParams}`,
-          uid: "alternative-hotels",
-        }
-      : {
-          title: intl.formatMessage({
-            defaultMessage: "Select hotel",
-          }),
-          href: `${selectHotel(params.lang)}/?${convertedSearchParams}`,
-          uid: "select-hotel",
-        },
-    isAlternativeFor
-      ? {
-          title: isAlternativeFor.name,
-          uid: isAlternativeFor.id,
-        }
-      : {
-          title: city.name,
-          uid: city.id,
-        },
-  ]
-
   const isAllUnavailable = !hotels.length
   const isRedemptionAvailability = redemption
     ? hotels.some(
@@ -191,7 +145,6 @@ export default async function SelectHotel({
     <>
       <header className={styles.header}>
         <div className={styles.headerContent}>
-          <Breadcrumbs breadcrumbs={breadcrumbs} />
           <div className={styles.title}>
             <div className={styles.cityInformation}>
               <Subtitle>

apps/scandic-web/components/HotelReservation/SelectHotel/selectHotel.module.css

@@ -19,10 +19,6 @@
   gap: var(--Spacing-x2);
 }
 
-.headerContent nav {
-  display: none;
-}
-
 .cityInformation {
   display: flex;
   flex-wrap: wrap;
@@ -88,19 +84,13 @@
     padding: var(--Spacing-x4) 0 var(--Spacing-x3);
   }
 
-  .headerContent nav {
-    display: block;
-    max-width: var(--max-width-navigation);
-    padding: 0;
-  }
-
   .sorter {
     display: block;
     width: 339px;
   }
 
   .title {
-    margin: var(--Spacing-x3) auto 0;
+    margin: 0 auto;
     display: flex;
     max-width: var(--max-width-navigation);
     align-items: center;
@@ -137,8 +127,4 @@
   .skeletonContainer .sideBar {
     gap: var(--Spacing-x3);
   }
-  .skeletonContainer .breadcrumbs {
-    margin: 0 auto;
-    max-width: var(--max-width-navigation);
-  }
 }