From 11081055808faeb22aac6e2e05c07df1539c9360 Mon Sep 17 00:00:00 2001
From: "Simon.Emanuelsson" <simon.emanuelsson@scandichotels.com>
Date: Mon, 12 May 2025 10:19:39 +0000
Subject: [PATCH] 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
---
 .../(standard)/details/page.module.css        |  2 +-
 .../(standard)/details/page.tsx               | 39 +++++----
 .../Footer/Navigation/MainNav/index.tsx       |  3 +
 .../Footer/Navigation/SecondaryNav/index.tsx  | 84 ++++++++++---------
 .../SecondaryNav/secondarynav.module.css      |  6 +-
 .../Footer/Navigation/navigation.module.css   | 15 ++--
 .../components/Footer/footer.module.css       | 15 ++++
 .../RoomsContainer/RateSummary/index.tsx      | 10 ++-
 .../HotelReservation/SignupPromo/Mobile.tsx   |  5 +-
 .../SignupPromo/signupPromo.module.css        |  3 +-
 10 files changed, 110 insertions(+), 72 deletions(-)

diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/details/page.module.css b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/details/page.module.css
index 9d3decbfb..d3b72a1ad 100644
--- a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/details/page.module.css
+++ b/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;
diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/details/page.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/details/page.tsx
index 5d45cedc6..52f298ae6 100644
--- a/apps/scandic-web/app/[lang]/(live)/(public)/hotelreservation/(standard)/details/page.tsx
+++ b/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>
   )
 }
diff --git a/apps/scandic-web/components/Footer/Navigation/MainNav/index.tsx b/apps/scandic-web/components/Footer/Navigation/MainNav/index.tsx
index 69d99dcca..43fdb1872 100644
--- a/apps/scandic-web/components/Footer/Navigation/MainNav/index.tsx
+++ b/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}>
diff --git a/apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx b/apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx
index e65a34c53..f4e694ec7 100644
--- a/apps/scandic-web/components/Footer/Navigation/SecondaryNav/index.tsx
+++ b/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>
diff --git a/apps/scandic-web/components/Footer/Navigation/SecondaryNav/secondarynav.module.css b/apps/scandic-web/components/Footer/Navigation/SecondaryNav/secondarynav.module.css
index 9533041a3..d7ec7aee9 100644
--- a/apps/scandic-web/components/Footer/Navigation/SecondaryNav/secondarynav.module.css
+++ b/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;
   }
 }
diff --git a/apps/scandic-web/components/Footer/Navigation/navigation.module.css b/apps/scandic-web/components/Footer/Navigation/navigation.module.css
index 34d324246..2065f6c4d 100644
--- a/apps/scandic-web/components/Footer/Navigation/navigation.module.css
+++ b/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;
   }
 }
diff --git a/apps/scandic-web/components/Footer/footer.module.css b/apps/scandic-web/components/Footer/footer.module.css
index 951b03e23..1b753fe59 100644
--- a/apps/scandic-web/components/Footer/footer.module.css
+++ b/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));
+  }
+}
diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
index e853f1ecd..347a05fdf 100644
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
+++ b/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}>
diff --git a/apps/scandic-web/components/HotelReservation/SignupPromo/Mobile.tsx b/apps/scandic-web/components/HotelReservation/SignupPromo/Mobile.tsx
index 938883255..b92b5e029 100644
--- a/apps/scandic-web/components/HotelReservation/SignupPromo/Mobile.tsx
+++ b/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.",
diff --git a/apps/scandic-web/components/HotelReservation/SignupPromo/signupPromo.module.css b/apps/scandic-web/components/HotelReservation/SignupPromo/signupPromo.module.css
index 84013ce67..745275bcb 100644
--- a/apps/scandic-web/components/HotelReservation/SignupPromo/signupPromo.module.css
+++ b/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;
   }