feat(SW-66, SW-348): search functionality and ui

components/Blocks/DynamicContent/Stays/Soonest/EmptyUpcomingStays/emptyUpcomingStays.module.css

@@ -0,0 +1,32 @@
+.container {
+  display: grid;
+  grid-template-rows: 1fr min(50px);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  min-height: 250px;
+  margin-bottom: var(--Spacing-x-half);
+  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;
+}

components/Blocks/DynamicContent/Stays/Soonest/EmptyUpcomingStays/index.tsx

@@ -0,0 +1,34 @@
+import { homeHrefs } from "@/constants/homeHrefs"
+import { env } from "@/env/server"
+
+import { ArrowRightIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./emptyUpcomingStays.module.css"
+
+export default async function EmptyUpcomingStaysBlock() {
+  const { formatMessage } = await getIntl()
+  return (
+    <section className={styles.container}>
+      <div className={styles.titleContainer}>
+        <Title as="h5" level="h3" color="red" className={styles.title}>
+          {formatMessage({ id: "You have no upcoming stays." })}
+          <span className={styles.burgundyTitle}>
+            {formatMessage({ id: "Where should you go next?" })}
+          </span>
+        </Title>
+      </div>
+      <Link
+        href={homeHrefs[env.NODE_ENV][getLang()]}
+        className={styles.link}
+        color="peach80"
+      >
+        {formatMessage({ id: "Get inspired" })}
+        <ArrowRightIcon color="peach80" />
+      </Link>
+    </section>
+  )
+}

components/Blocks/DynamicContent/Stays/Soonest/index.tsx

@@ -0,0 +1,38 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
+import Grids from "@/components/TempDesignSystem/Grids"
+
+import StayCard from "../StayCard"
+import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
+
+import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
+
+export default async function SoonestStays({
+  title,
+  subtitle,
+  link,
+}: AccountPageComponentProps) {
+  const upcomingStays = await serverClient().user.stays.upcoming({ limit: 3 })
+  if (!upcomingStays?.data) {
+    return null
+  }
+
+  return (
+    <SectionContainer>
+      <SectionHeader title={title} preamble={subtitle} link={link} />
+      {upcomingStays.data.length ? (
+        <Grids.Stackable>
+          {upcomingStays.data.map((stay) => (
+            <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
+          ))}
+        </Grids.Stackable>
+      ) : (
+        <EmptyUpcomingStaysBlock />
+      )}
+      <SectionLink link={link} variant="mobile" />
+    </SectionContainer>
+  )
+}