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
2025-12-09 10:54:57 +00:00
parent 8764945b2f
commit f40035baa9
35 changed files with 527 additions and 272 deletions
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/index.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Carousel/index.tsx
@@ -0,0 +1,89 @@
+"use client"
+
+import { useState } from "react"
+
+import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
+import { trpc } from "@scandic-hotels/trpc/client"
+
+import { Carousel } from "@/components/Carousel"
+import useLang from "@/hooks/useLang"
+
+import { UpcomingStaysSidePeek } from "../SidePeek"
+import CarouselCard from "./CarouselCard"
+import { SeeAllCard } from "./SeeAllCard"
+
+import styles from "../upcoming.module.css"
+
+import type {
+  UpcomingStaysClientProps,
+  UpcomingStaysNonNullResponseObject,
+} from "@/types/components/myPages/stays/upcoming"
+
+const MAX_VISIBLE_STAYS = 5
+
+export default function UpcomingStaysCarousel({
+  initialUpcomingStays,
+}: UpcomingStaysClientProps) {
+  const lang = useLang()
+  const [isSidePeekOpen, setIsSidePeekOpen] = useState(false)
+
+  const { data, isLoading } = trpc.user.stays.upcoming.useInfiniteQuery(
+    {
+      limit: 6,
+      lang,
+    },
+    {
+      getNextPageParam: (lastPage) => {
+        return lastPage?.nextCursor
+      },
+      initialData: {
+        pageParams: [undefined, 1],
+        pages: [initialUpcomingStays],
+      },
+    }
+  )
+
+  if (isLoading) {
+    return <LoadingSpinner />
+  }
+
+  const stays = data.pages
+    .filter((page): page is UpcomingStaysNonNullResponseObject => !!page?.data)
+    .flatMap((page) => page.data)
+
+  if (!stays.length) {
+    return null
+  }
+
+  const visibleStays = stays.slice(0, MAX_VISIBLE_STAYS)
+  const hasMoreStays = stays.length >= MAX_VISIBLE_STAYS
+
+  return (
+    <>
+      <Carousel className={styles.carousel}>
+        <Carousel.Content>
+          {visibleStays.map((stay) => (
+            <Carousel.Item
+              key={stay.attributes.confirmationNumber}
+              className={styles.carouselItem}
+            >
+              <CarouselCard stay={stay} />
+            </Carousel.Item>
+          ))}
+          {hasMoreStays && (
+            <Carousel.Item className={styles.carouselItem}>
+              <SeeAllCard onPress={() => setIsSidePeekOpen(true)} />
+            </Carousel.Item>
+          )}
+        </Carousel.Content>
+        <Carousel.Previous className={styles.navigationButton} />
+        <Carousel.Next className={styles.navigationButton} />
+        <Carousel.Dots />
+      </Carousel>
+      <UpcomingStaysSidePeek
+        isOpen={isSidePeekOpen}
+        onClose={() => setIsSidePeekOpen(false)}
+      />
+    </>
+  )
+}