Merged in LOY-493/Sidepeek-upcoming-stays (pull request #3315)

LOY-493/Sidepeek upcoming stays

* chore(LOY-493): Add icon to next stay card cta

* chore(LOY-493): better folder org for stays

* chore(LOY-494): more folder reorg

* feat(LOY-493): Implement Sidepeek for Upcoming Stays


Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/emptyUpcomingStays.module.css

@@ -0,0 +1,49 @@
+.container {
+  display: grid;
+  grid-template-rows: 1fr min(50px);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-md);
+  min-height: 250px;
+  margin-bottom: var(--Space-x05);
+  overflow: hidden;
+}
+
+.titleContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--Scandic-Brand-Pale-Peach);
+}
+
+.title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.burgundyTitle {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Styles for new empty upcoming stays design */
+.emptyUpcomingStaysContainer {
+  display: flex;
+  padding: var(--Space-x6);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: var(--Space-x3);
+  border-radius: var(--Corner-radius-lg);
+  background: var(--Surface-Brand-Primary-1-Default);
+}
+
+.heading {
+  color: var(--Text-Heading);
+  text-align: center;
+}

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/EmptyUpcomingStays/index.tsx

@@ -0,0 +1,76 @@
+import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import Link from "@scandic-hotels/design-system/OldDSLink"
+import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { env } from "@/env/server"
+
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./emptyUpcomingStays.module.css"
+
+export default async function EmptyUpcomingStays() {
+  const intl = await getIntl()
+  const lang = await getLang()
+
+  const href = `/${lang}`
+
+  if (!env.NEW_STAYS_ON_MY_PAGES) {
+    return (
+      <section className={styles.container}>
+        <div className={styles.titleContainer}>
+          <Title
+            as="h4"
+            level="h3"
+            color="red"
+            className={styles.title}
+            textAlign="center"
+          >
+            {intl.formatMessage({
+              id: "stays.noUpcomingStays",
+              defaultMessage: "You have no upcoming stays.",
+            })}
+            <span className={styles.burgundyTitle}>
+              {intl.formatMessage({
+                id: "stays.whereToGoNext",
+                defaultMessage: "Where should you go next?",
+              })}
+            </span>
+          </Title>
+        </div>
+        <Link
+          href={href}
+          className={styles.link}
+          color="Text/Interactive/Secondary"
+        >
+          {intl.formatMessage({
+            id: "stays.getInspired",
+            defaultMessage: "Get inspired",
+          })}
+          <MaterialIcon icon="arrow_forward" color="CurrentColor" />
+        </Link>
+      </section>
+    )
+  }
+
+  return (
+    <section className={styles.emptyUpcomingStaysContainer}>
+      <Typography variant="Title/Subtitle/md">
+        <p className={styles.heading}>
+          {intl.formatMessage({
+            id: "stays.noUpcomingStaysAtTheMoment",
+            defaultMessage: "You have no upcoming stays at the moment",
+          })}
+        </p>
+      </Typography>
+      <ButtonLink href={href} variant="Tertiary" color="Primary" size="Small">
+        {intl.formatMessage({
+          id: "stays.findDestinationOrHotel",
+          defaultMessage: "Find hotel or destination",
+        })}
+      </ButtonLink>
+    </section>
+  )
+}