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

@@ -0,0 +1,30 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import styles from "./seeAllCard.module.css"
+
+interface SeeAllCardProps {
+  onPress: () => void
+}
+
+export function SeeAllCard({ onPress }: SeeAllCardProps) {
+  const intl = useIntl()
+
+  return (
+    <div className={styles.card}>
+      <Button
+        variant="Secondary"
+        size="Medium"
+        typography="Body/Paragraph/mdBold"
+        onPress={onPress}
+      >
+        {intl.formatMessage({ id: "common.seeAll", defaultMessage: "See all" })}
+        <MaterialIcon icon="chevron_right" color="CurrentColor" />
+      </Button>
+    </div>
+  )
+}

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Cards/SeeAllCard/seeAllCard.module.css

@@ -0,0 +1,12 @@
+.card {
+  border-radius: var(--Corner-radius-lg);
+  border: 1px solid var(--Border-Default);
+  background: var(--Surface-Secondary-Default);
+  display: flex;
+  padding: var(--Space-x15);
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  height: 100%;
+  min-height: 134px;
+}

apps/scandic-web/components/Blocks/DynamicContent/Stays/Previous/Cards/cards.module.css

@@ -0,0 +1,18 @@
+.grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+
+@media (min-width: 768px) {
+  .grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1367px) {
+  .grid {
+    grid-template-columns: repeat(3, 1fr);
+    align-items: stretch;
+  }
+}

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>
+  )
+}