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

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/Client.tsx

@@ -1,65 +0,0 @@
-"use client"
-
-import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
-import { trpc } from "@scandic-hotels/trpc/client"
-
-import Grids from "@/components/TempDesignSystem/Grids"
-import useLang from "@/hooks/useLang"
-
-import ListContainer from "../ListContainer"
-import ShowMoreButton from "../ShowMoreButton"
-import StayCard from "../StayCard"
-
-import type {
-  UpcomingStaysClientProps,
-  UpcomingStaysNonNullResponseObject,
-} from "@/types/components/myPages/stays/upcoming"
-
-export default function ClientUpcomingStays({
-  initialUpcomingStays,
-}: UpcomingStaysClientProps) {
-  const lang = useLang()
-  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
-    trpc.user.stays.upcoming.useInfiniteQuery(
-      {
-        limit: 6,
-        lang,
-      },
-      {
-        getNextPageParam: (lastPage) => {
-          return lastPage?.nextCursor
-        },
-        initialData: {
-          pageParams: [undefined, 1],
-          pages: [initialUpcomingStays],
-        },
-      }
-    )
-
-  if (isLoading) {
-    return <LoadingSpinner />
-  }
-
-  function loadMoreData() {
-    if (hasNextPage) {
-      fetchNextPage()
-    }
-  }
-
-  const stays = data.pages
-    .filter((page): page is UpcomingStaysNonNullResponseObject => !!page?.data)
-    .flatMap((page) => page.data)
-
-  return stays.length ? (
-    <ListContainer>
-      <Grids.Stackable>
-        {stays.map((stay) => (
-          <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
-        ))}
-      </Grids.Stackable>
-      {hasNextPage ? (
-        <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
-      ) : null}
-    </ListContainer>
-  ) : null
-}

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

@@ -1,34 +0,0 @@
-import { serverClient } from "@/lib/trpc/server"
-
-import { Section } from "@/components/Section"
-import SectionHeader from "@/components/Section/Header/Deprecated"
-import SectionLink from "@/components/Section/Link"
-
-import EmptyUpcomingStaysBlock from "../EmptyUpcomingStays"
-import ClientUpcomingStays from "./Client"
-
-import styles from "./upcoming.module.css"
-
-import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
-
-export default async function UpcomingStays({
-  title,
-  link,
-}: AccountPageComponentProps) {
-  const caller = await serverClient()
-  const initialUpcomingStays = await caller.user.stays.upcoming({
-    limit: 6,
-  })
-
-  return (
-    <Section className={styles.container}>
-      <SectionHeader title={title} link={link} />
-      {initialUpcomingStays?.data.length ? (
-        <ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
-      ) : (
-        <EmptyUpcomingStaysBlock />
-      )}
-      <SectionLink link={link} variant="mobile" />
-    </Section>
-  )
-}

apps/scandic-web/components/Blocks/DynamicContent/Stays/Upcoming/upcoming.module.css

@@ -1,3 +0,0 @@
-.container {
-  display: inline-grid;
-}