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,16 +126,19 @@ 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 (
-    <EnterDetailsProvider
-      booking={booking}
-      breakfastPackages={breakfastPackages}
-      rooms={rooms}
-      searchParamsStr={selectRoomParams.toString()}
-      user={user}
-      vat={hotel.vat}
-    >
-      <main>
+    <main data-footer-spacing>
+      <EnterDetailsProvider
+        booking={booking}
+        breakfastPackages={breakfastPackages}
+        rooms={rooms}
+        searchParamsStr={selectRoomParams.toString()}
+        user={user}
+        vat={hotel.vat}
+      >
         <HotelHeader hotelData={hotelData} />
         <div className={styles.container}>
           <div className={styles.content}>
@@ -163,14 +166,14 @@ export default async function DetailsPage({
             <DesktopSummary isMember={!!user} />
           </aside>
         </div>
-      </main>
-      <EnterDetailsTrackingWrapper
-        booking={booking}
-        hotel={hotel}
-        isMember={!!user}
-        lang={lang}
-        rooms={rooms}
-      />
-    </EnterDetailsProvider>
+        <EnterDetailsTrackingWrapper
+          booking={booking}
+          hotel={hotel}
+          isMember={!!user}
+          lang={lang}
+          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,32 +29,34 @@ export default function FooterSecondaryNav({
           >
             {appDownloads.title}
           </Caption>
-          <ul className={styles.secondaryNavigationList}>
-            {appDownloads.links.map(
-              ({ href, type }) =>
-                href && (
-                  <li key={type} className={styles.appDownloadItem}>
-                    <a
-                      href={href.href}
-                      target="_blank"
-                      aria-label={href.title}
-                      onClick={() => trackSocialMediaClick(href.title)}
-                    >
-                      <Image
-                        src={
-                          AppDownLoadLinks[
-                            `${type}_${lang}` as keyof typeof AppDownLoadLinks
-                          ]
-                        }
-                        alt=""
-                        width={125}
-                        height={40}
-                      />
-                    </a>
-                  </li>
-                )
-            )}
-          </ul>
+          {appDownloads.links.length ? (
+            <ul className={styles.secondaryNavigationList}>
+              {appDownloads.links.map(
+                ({ href, type }) =>
+                  href && (
+                    <li key={type} className={styles.appDownloadItem}>
+                      <a
+                        href={href.href}
+                        target="_blank"
+                        aria-label={href.title}
+                        onClick={() => trackSocialMediaClick(href.title)}
+                      >
+                        <Image
+                          src={
+                            AppDownLoadLinks[
+                              `${type}_${lang}` as keyof typeof AppDownLoadLinks
+                            ]
+                          }
+                          alt=""
+                          width={125}
+                          height={40}
+                        />
+                      </a>
+                    </li>
+                  )
+              )}
+            </ul>
+          ) : null}
         </nav>
       )}
       {secondaryLinks.map((group) => (
@@ -66,20 +68,22 @@ export default function FooterSecondaryNav({
           >
             {group.title}
           </Caption>
-          <ul className={styles.secondaryNavigationList}>
-            {group?.links?.map((link) => (
-              <li key={link.title} className={styles.secondaryNavigationItem}>
-                <Link
-                  href={link.url}
-                  target={link.openInNewTab ? "_blank" : undefined}
-                  color="burgundy"
-                  onClick={() => trackFooterClick(group.title, link.title)}
-                >
-                  {link.title}
-                </Link>
-              </li>
-            ))}
-          </ul>
+          {group?.links.length ? (
+            <ul className={styles.secondaryNavigationList}>
+              {group.links.map((link) => (
+                <li key={link.title} className={styles.secondaryNavigationItem}>
+                  <Link
+                    href={link.url}
+                    target={link.openInNewTab ? "_blank" : undefined}
+                    color="burgundy"
+                    onClick={() => trackFooterClick(group.title, link.title)}
+                  >
+                    {link.title}
+                  </Link>
+                </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;
   }