Merged in feat/LOY-428-previous-stay-redesign (pull request #3142)

Feat(LOY-428): Previous Stays Redesign

* feat(LOY-428): Previous stays WIP

* fix(LOY-428): fix alignment issue

* fix(LOY-428): css fixes & imagefallback prop value

* fix(LOY-428): use css vars

* fix(LOY-428): add unit test for relative time text

* chore(LOY-428): remove else if conditions

* fix(LOY-428): named exports & remove duplicate width/height setting

* fix(LOY-428): better formatting of upcoming stays months text

* fix(LOY-428): fewer typography wrappers


Approved-by: Matilda Landström

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

@@ -1,3 +1,4 @@
+import { env } from "@/env/server"
 import { serverClient } from "@/lib/trpc/server"
 
 import ClaimPoints from "@/components/Blocks/DynamicContent/Points/ClaimPoints"
@@ -5,7 +6,8 @@ import { Section } from "@/components/Section"
 import SectionHeader from "@/components/Section/Header/Deprecated"
 import SectionLink from "@/components/Section/Link"
 
-import ClientPreviousStays from "./Client"
+import { Cards } from "./Cards"
+import { ClientPreviousStays } from "./Client"
 
 import styles from "./previous.module.css"
 
@@ -24,14 +26,15 @@ export default async function PreviousStays({
     return null
   }
 
+  const StaysComponent = env.NEW_STAYS_ON_MY_PAGES ? Cards : ClientPreviousStays
+
   return (
     <Section>
       <div className={styles.header}>
         <SectionHeader title={title} link={link} />
-
         <ClaimPoints />
       </div>
-      <ClientPreviousStays initialPreviousStays={initialPreviousStays} />
+      <StaysComponent initialPreviousStays={initialPreviousStays} />
       <SectionLink link={link} variant="mobile" />
     </Section>
   )