From fda17c947a84cdc66abf358a65bbb597f798c52a Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Wed, 10 Jul 2024 07:55:54 +0200
Subject: [PATCH] fix: empty previous stays design

---
 components/MyPages/Blocks/Stays/Previous/Client.tsx |  5 +----
 .../emptyPreviousStays.module.css                   | 10 ++++++----
 .../Stays/Previous/EmptyPreviousStays/index.tsx     | 13 +++++++------
 components/MyPages/Blocks/Stays/Previous/index.tsx  | 13 +++++++++----
 .../Stays/Upcoming/EmptyUpcomingStays/index.tsx     |  2 +-
 5 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/components/MyPages/Blocks/Stays/Previous/Client.tsx b/components/MyPages/Blocks/Stays/Previous/Client.tsx
index 11f919fcd..a514f438e 100644
--- a/components/MyPages/Blocks/Stays/Previous/Client.tsx
+++ b/components/MyPages/Blocks/Stays/Previous/Client.tsx
@@ -8,7 +8,6 @@ import Grids from "@/components/TempDesignSystem/Grids"
 import ListContainer from "../ListContainer"
 import ShowMoreButton from "../ShowMoreButton"
 import StayCard from "../StayCard"
-import EmptyPreviousStaysBlock from "./EmptyPreviousStays"
 
 import type {
   PreviousStaysClientProps,
@@ -46,7 +45,7 @@ export default function ClientPreviousStays({
 
   return isLoading ? (
     <LoadingSpinner />
-  ) : stays.length ? (
+  ) : (
     <ListContainer>
       <Grids.Stackable>
         {stays.map((stay) => (
@@ -61,7 +60,5 @@ export default function ClientPreviousStays({
         <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
       ) : null}
     </ListContainer>
-  ) : (
-    <EmptyPreviousStaysBlock />
   )
 }
diff --git a/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/emptyPreviousStays.module.css b/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/emptyPreviousStays.module.css
index 783a610fa..3f4e2c305 100644
--- a/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/emptyPreviousStays.module.css
+++ b/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/emptyPreviousStays.module.css
@@ -1,8 +1,10 @@
 .container {
-  align-items: center;
-  background-color: var(--some-grey-color, #f2f2f2);
-  border-radius: var(--Corner-radius-Medium);
   display: flex;
+  flex-direction: column;
   justify-content: center;
-  min-height: 25rem;
+  align-items: center;
+  background-color: var(--Scandic-Brand-Pale-Peach);
+  border-radius: var(--Corner-radius-Medium);
+  margin-bottom: var(--Spacing-x-half);
+  height: 200px;
 }
diff --git a/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx b/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx
index 438920771..e80cab97c 100644
--- a/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx
+++ b/components/MyPages/Blocks/Stays/Previous/EmptyPreviousStays/index.tsx
@@ -1,15 +1,16 @@
-import { useIntl } from "react-intl"
-
 import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
 
 import styles from "./emptyPreviousStays.module.css"
 
-export default function EmptyPreviousStaysBlock() {
-  const { formatMessage } = useIntl()
+export default async function EmptyPreviousStaysBlock() {
+  const { formatMessage } = await getIntl()
   return (
     <section className={styles.container}>
-      <Title as="h5" level="h3">
-        {formatMessage({ id: "You have no previous stays." })}
+      <Title as="h5" level="h3" color="red" textAlign="center">
+        {formatMessage({
+          id: "You have no previous stays.",
+        })}
       </Title>
     </section>
   )
diff --git a/components/MyPages/Blocks/Stays/Previous/index.tsx b/components/MyPages/Blocks/Stays/Previous/index.tsx
index cfd06f831..571d56bde 100644
--- a/components/MyPages/Blocks/Stays/Previous/index.tsx
+++ b/components/MyPages/Blocks/Stays/Previous/index.tsx
@@ -5,6 +5,7 @@ import SectionHeader from "@/components/Section/Header"
 import SectionLink from "@/components/Section/Link"
 
 import ClientPreviousStays from "./Client"
+import EmptyPreviousStaysBlock from "./EmptyPreviousStays"
 
 import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
 
@@ -21,10 +22,14 @@ export default async function PreviousStays({
   return (
     <SectionContainer>
       <SectionHeader title={title} subtitle={subtitle} link={link} />
-      <ClientPreviousStays
-        initialPreviousStays={initialPreviousStays}
-        lang={lang}
-      />
+      {initialPreviousStays.data.length ? (
+        <ClientPreviousStays
+          initialPreviousStays={initialPreviousStays}
+          lang={lang}
+        />
+      ) : (
+        <EmptyPreviousStaysBlock />
+      )}
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>
   )
diff --git a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
index 4e1e5d6e8..43f3b73c1 100644
--- a/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
+++ b/components/MyPages/Blocks/Stays/Upcoming/EmptyUpcomingStays/index.tsx
@@ -18,7 +18,7 @@ export default async function EmptyUpcomingStaysBlock({ lang }: LangParams) {
         <Title as="h5" level="h3" color="red" className={styles.title}>
           {formatMessage({ id: "You have no upcoming stays." })}
           <span className={styles.burgundyTitle}>
-            {formatMessage({ id: "Where will you go next?" })}
+            {formatMessage({ id: "Where should you go next?" })}
           </span>
         </Title>
       </div>