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/Previous/Cards/index.tsx

@@ -0,0 +1,38 @@
+"use client"
+
+import { useState } from "react"
+
+import ListContainer from "../../ListContainer"
+import { StayCard } from "../../StayCard"
+import { INITIAL_STAYS_FETCH_LIMIT } from "../data"
+import { PreviousStaysSidePeek } from "../SidePeek"
+import { SeeAllCard } from "./SeeAllCard"
+
+import styles from "./cards.module.css"
+
+import type { PreviousStaysClientProps } from "@/types/components/myPages/stays/previous"
+
+const MAX_VISIBLE_STAYS = 5
+
+export function Cards({ initialPreviousStays }: PreviousStaysClientProps) {
+  const [isSidePeekOpen, setIsSidePeekOpen] = useState(false)
+
+  const stays = initialPreviousStays.data
+  const visibleStays = stays.slice(0, MAX_VISIBLE_STAYS)
+  const hasMoreStays = stays.length >= INITIAL_STAYS_FETCH_LIMIT
+
+  return (
+    <ListContainer>
+      <div className={styles.grid}>
+        {visibleStays.map((stay) => (
+          <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
+        ))}
+        {hasMoreStays && <SeeAllCard onPress={() => setIsSidePeekOpen(true)} />}
+      </div>
+      <PreviousStaysSidePeek
+        isOpen={isSidePeekOpen}
+        onClose={() => setIsSidePeekOpen(false)}
+      />
+    </ListContainer>
+  )
+}