Merged master into feat/SW-888-skeleton-loaders

app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx

@@ -1,5 +1,7 @@
+import { headers } from "next/headers"
 import { notFound } from "next/navigation"
 
+import { isSignupPage } from "@/constants/routes/signup"
 import { env } from "@/env/server"
 
 import HotelPage from "@/components/ContentType/HotelPage"
@@ -22,17 +24,33 @@ export default function ContentTypePage({
 }: PageArgs<LangParams & ContentTypeParams & UIDParams, {}>) {
   setLang(params.lang)
 
+  const pathname = headers().get("x-pathname") || ""
+
   switch (params.contentType) {
     case "collection-page":
       if (env.HIDE_FOR_NEXT_RELEASE) {
         return notFound()
       }
       return <CollectionPage />
-    case "content-page":
+    case "content-page": {
+      const isSignupRoute = isSignupPage(pathname)
+
       if (env.HIDE_FOR_NEXT_RELEASE) {
-        return notFound()
+        // Hide content pages for next release for non-signup routes.
+        if (!isSignupRoute) {
+          return notFound()
+        }
       }
+
+      if (!env.SHOW_SIGNUP_FLOW) {
+        // Hide content pages for signup routes when signup flow is disabled.
+        if (isSignupRoute) {
+          return notFound()
+        }
+      }
+
       return <ContentPage />
+    }
     case "loyalty-page":
       return <LoyaltyPage />
     case "hotel-page":

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css

@@ -1,21 +1,23 @@
 .main {
   display: flex;
-  gap: var(--Spacing-x3);
-  padding: var(--Spacing-x4) var(--Spacing-x4) 0 var(--Spacing-x4);
+  padding: 0 var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x2);
   background-color: var(--Scandic-Brand-Warm-White);
   min-height: 100dvh;
   flex-direction: column;
   max-width: var(--max-width);
   margin: 0 auto;
 }
-
 .header {
   display: flex;
-  margin: 0 auto;
-  padding: var(--Spacing-x4) var(--Spacing-x5) var(--Spacing-x3)
-    var(--Spacing-x5);
-  justify-content: space-between;
-  max-width: var(--max-width);
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x3) var(--Spacing-x2) 0 var(--Spacing-x2);
+}
+
+.cityInformation {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--Spacing-x1);
 }
 
 .sideBar {
@@ -46,6 +48,23 @@
 }
 
 @media (min-width: 768px) {
+  .main {
+    padding: var(--Spacing-x5);
+  }
+  .header {
+    display: block;
+    background-color: var(--Base-Surface-Subtle-Normal);
+    padding: var(--Spacing-x4) var(--Spacing-x5) var(--Spacing-x3)
+      var(--Spacing-x5);
+  }
+
+  .title {
+    margin: 0 auto;
+    display: flex;
+    max-width: var(--max-width-navigation);
+    align-items: center;
+    justify-content: space-between;
+  }
   .link {
     display: flex;
     padding-bottom: var(--Spacing-x6);
@@ -57,13 +76,6 @@
     border-radius: var(--Corner-radius-Medium);
     border: 1px solid var(--Base-Border-Subtle);
   }
-  .mapLinkText {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--Spacing-x-half);
-    padding: var(--Spacing-x-one-and-half) var(--Spacing-x0);
-  }
   .main {
     flex-direction: row;
     gap: var(--Spacing-x5);

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx

@@ -18,7 +18,10 @@ import {
 import { ChevronRightIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
 import Alert from "@/components/TempDesignSystem/Alert"
+import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
+import Preamble from "@/components/TempDesignSystem/Text/Preamble"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
 import { setLang } from "@/i18n/serverContext"
 
@@ -66,8 +69,14 @@ export default async function SelectHotelPage({
   return (
     <>
       <header className={styles.header}>
-        <div>{city.name}</div>
-        <HotelSorter />
+        <div className={styles.title}>
+          <div className={styles.cityInformation}>
+            <Subtitle>{city.name}</Subtitle>
+            <Preamble>{hotels.length} hotels</Preamble>
+          </div>
+          <HotelSorter />
+        </div>
+        <MobileMapButtonContainer city={searchParams.city} />
       </header>
       <main className={styles.main}>
         <div className={styles.sideBar}>
@@ -87,10 +96,14 @@ export default async function SelectHotelPage({
                   mapType="roadmap"
                   altText={`Map of ${searchParams.city} city center`}
                 />
-                <div className={styles.mapLinkText}>
-                  {intl.formatMessage({ id: "Show map" })}
-                  <ChevronRightIcon color="burgundy" width={20} height={20} />
-                </div>
+                <Button wrapping size="medium" intent="text" theme="base">
+                  {intl.formatMessage({ id: "See map" })}
+                  <ChevronRightIcon
+                    color="baseButtonTextOnFillNormal"
+                    width={20}
+                    height={20}
+                  />
+                </Button>
               </div>
             </Link>
           ) : (
@@ -105,7 +118,6 @@ export default async function SelectHotelPage({
               />
             </div>
           )}
-          <MobileMapButtonContainer city={searchParams.city} />
           <HotelFilter filters={filterList} />
         </div>
         <div className={styles.hotelList}>