Merged in feat/SW-1762 (pull request #2050)

feat: make enter details bottom sheet pixed, and add spacing at the bottom of page

* feat: make enter details bottom sheet pixed, and add spacing at the bottom of page


Approved-by: Arvid Norlin

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/details/page.module.css

@@ -16,7 +16,7 @@
 }
 
 .summary {
-  position: sticky;
+  position: fixed;
   bottom: 0;
   left: 0;
   right: 0;

apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/details/page.tsx

@@ -126,7 +126,11 @@ export default async function DetailsPage({
     }
   }
 
+  // attribute data-footer-spacing used to add spacing
+  // beneath footer to be able to show entire footer upon
+  // scrolling down to the bottom of the page
   return (
+    <main data-footer-spacing>
       <EnterDetailsProvider
         booking={booking}
         breakfastPackages={breakfastPackages}
@@ -135,7 +139,6 @@ export default async function DetailsPage({
         user={user}
         vat={hotel.vat}
       >
-      <main>
         <HotelHeader hotelData={hotelData} />
         <div className={styles.container}>
           <div className={styles.content}>
@@ -163,7 +166,6 @@ export default async function DetailsPage({
             <DesktopSummary isMember={!!user} />
           </aside>
         </div>
-      </main>
         <EnterDetailsTrackingWrapper
           booking={booking}
           hotel={hotel}
@@ -172,5 +174,6 @@ export default async function DetailsPage({
           rooms={rooms}
         />
       </EnterDetailsProvider>
+    </main>
   )
 }

apps/scandic-web/components/Footer/Navigation/MainNav/index.tsx

@@ -12,6 +12,9 @@ import styles from "./mainnav.module.css"
 import type { FooterMainNavProps } from "@/types/components/footer/navigation"
 
 export default function FooterMainNav({ mainLinks }: FooterMainNavProps) {
+  if (!mainLinks.length) {
+    return null
+  }
   return (
     <nav className={styles.mainNavigation}>
       <ul className={styles.mainNavigationList}>

apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx

@@ -29,6 +29,7 @@ export default function FooterSecondaryNav({
           >
             {appDownloads.title}
           </Caption>
+          {appDownloads.links.length ? (
             <ul className={styles.secondaryNavigationList}>
               {appDownloads.links.map(
                 ({ href, type }) =>
@@ -55,6 +56,7 @@ export default function FooterSecondaryNav({
                   )
               )}
             </ul>
+          ) : null}
         </nav>
       )}
       {secondaryLinks.map((group) => (
@@ -66,8 +68,9 @@ export default function FooterSecondaryNav({
           >
             {group.title}
           </Caption>
+          {group?.links.length ? (
             <ul className={styles.secondaryNavigationList}>
-            {group?.links?.map((link) => (
+              {group.links.map((link) => (
                 <li key={link.title} className={styles.secondaryNavigationItem}>
                   <Link
                     href={link.url}
@@ -80,6 +83,7 @@ export default function FooterSecondaryNav({
                 </li>
               ))}
             </ul>
+          ) : null}
         </nav>
       ))}
     </div>

apps/scandic-web/components/Footer/Navigation/SecondaryNav/secondarynav.module.css

@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: column-reverse;
   gap: var(--Spacing-x6);
-  margin-top: var(--Spacing-x6);
 }
 
 .secondaryNavigationList {
@@ -35,14 +34,15 @@
 
 @media screen and (min-width: 768px) {
   .secondaryNavigation {
-    margin-top: var(--Spacing-x4);
     gap: 120px;
     flex-direction: row;
   }
 }
+
 @media screen and (min-width: 1367px) {
   .secondaryNavigation {
-    margin-top: 0;
     gap: 80px;
+    grid-column: 2;
+    justify-self: flex-end;
   }
 }

apps/scandic-web/components/Footer/Navigation/navigation.module.css

@@ -4,10 +4,9 @@
 }
 
 .maxWidth {
+  display: grid;
+  gap: var(--Spacing-x6);
   margin: 0 auto;
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
   max-width: var(--max-width-page);
 }
 
@@ -15,13 +14,15 @@
   .section {
     padding: var(--Spacing-x9) 0;
   }
+
+  .maxWidth {
+    gap: var(--Spacing-x4);
+  }
 }
 
 @media screen and (min-width: 1367px) {
-  .section {
-    padding: var(--Spacing-x9) 0;
-  }
   .maxWidth {
-    flex-direction: row;
+    gap: var(--Spacing-x2);
+    grid-template-columns: 1fr 1fr;
   }
 }

apps/scandic-web/components/Footer/footer.module.css

@@ -1,3 +1,18 @@
 .footer {
+  --bottom-sheet-height: 7.5em;
+  --promo-height: 50px;
+
   margin-top: auto;
 }
+
+@media screen and (max-width: 1366px) {
+  :has([data-footer-spacing]) ~ .footer {
+    background: var(--Base-Text-High-contrast);
+    padding-bottom: var(--bottom-sheet-height);
+  }
+
+  :has([data-footer-spacing-signup]) ~ .footer {
+    background: var(--Base-Text-High-contrast);
+    padding-bottom: calc(var(--bottom-sheet-height) + var(--promo-height));
+  }
+}

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx

@@ -191,8 +191,16 @@ export default function RateSummary() {
     mainRoomCurrency = rateProduct.public.localPrice.currency
   }
 
+  // attribute data-footer-spacing used to add spacing
+  // beneath footer to be able to show entire footer upon
+  // scrolling down to the bottom of the page
   return (
-    <form action={`details?${params}`} method="GET" onSubmit={handleSubmit}>
+    <form
+      data-footer-spacing
+      action={`details?${params}`}
+      method="GET"
+      onSubmit={handleSubmit}
+    >
       <div className={styles.summary}>
         <div className={styles.content}>
           <div className={styles.summaryText}>

apps/scandic-web/components/HotelReservation/SignupPromo/Mobile.tsx

@@ -9,7 +9,10 @@ import styles from "./signupPromo.module.css"
 export default function SignupPromoMobile() {
   const intl = useIntl()
   return (
-    <div className={styles.memberDiscountBannerMobile}>
+    <div
+      data-footer-spacing-signup
+      className={styles.memberDiscountBannerMobile}
+    >
       <Footnote color="burgundy">
         {intl.formatMessage({
           defaultMessage: "Join or log in while booking for member pricing.",

apps/scandic-web/components/HotelReservation/SignupPromo/signupPromo.module.css

@@ -6,6 +6,7 @@
   align-items: center;
   justify-content: center;
 }
+
 .memberDiscountBannerDesktop {
   display: none;
   background: var(--Primary-Light-Surface-Normal);
@@ -32,7 +33,7 @@
   overflow: hidden;
 }
 
-@media (min-width: 768px) {
+@media (min-width: 1367px) {
   .memberDiscountBannerMobile {
     display: none;
   }