Merged in feat/LOY-422-new-upcoming-stays (pull request #3121)

feat(LOY-422): Upcoming Stays Redesign * feat(LOY-422): Upcoming Stays Redesign * feat(LOY-422): Carousel next/previous arrows * chore(LOY-422): add new material icon * refactor(LOY-422): restructure new and old upcoming stays * fix(LOY-422): handle less than 1 case * chore(LOY-422): remove uneeded id * chore(LOY-422): remove intl label for date edge case Approved-by: Matilda Landström
2025-11-13 13:05:24 +00:00
parent 66fd7696f7
commit 0b28893e71
25 changed files with 687 additions and 344 deletions
--- a/apps/scandic-web/components/Blocks/DynamicContent/Stays/UpcomingStays/Carousel.tsx
+++ b/apps/scandic-web/components/Blocks/DynamicContent/Stays/UpcomingStays/Carousel.tsx
@@ -0,0 +1,67 @@
+"use client"
+
+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 CarouselCard from "./CarouselCard"
+
+import styles from "./upcoming.module.css"
+
+import type {
+  UpcomingStaysClientProps,
+  UpcomingStaysNonNullResponseObject,
+} from "@/types/components/myPages/stays/upcoming"
+
+export default function UpcomingStaysCarousel({
+  initialUpcomingStays,
+}: UpcomingStaysClientProps) {
+  const lang = useLang()
+  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
+  }
+
+  return (
+    <Carousel className={styles.carousel}>
+      <Carousel.Content>
+        {stays.map((stay) => (
+          <Carousel.Item
+            key={stay.attributes.confirmationNumber}
+            className={styles.carouselItem}
+          >
+            <CarouselCard stay={stay} />
+          </Carousel.Item>
+        ))}
+      </Carousel.Content>
+      <Carousel.Previous className={styles.navigationButton} />
+      <Carousel.Next className={styles.navigationButton} />
+      <Carousel.Dots />
+    </Carousel>
+  )
+}