feat(SW-66, SW-348): search functionality and ui

components/Blocks/DynamicContent/Stays/Previous/Client.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import { trpc } from "@/lib/trpc/client"
+
+import LoadingSpinner from "@/components/LoadingSpinner"
+import Grids from "@/components/TempDesignSystem/Grids"
+
+import ListContainer from "../ListContainer"
+import ShowMoreButton from "../ShowMoreButton"
+import StayCard from "../StayCard"
+
+import type {
+  PreviousStaysClientProps,
+  PreviousStaysNonNullResponseObject,
+} from "@/types/components/myPages/stays/previous"
+
+export default function ClientPreviousStays({
+  initialPreviousStays,
+}: PreviousStaysClientProps) {
+  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
+    trpc.user.stays.previous.useInfiniteQuery(
+      {
+        limit: 6,
+      },
+      {
+        getNextPageParam: (lastPage) => {
+          return lastPage?.nextCursor
+        },
+        initialData: {
+          pageParams: [undefined, 1],
+          pages: [initialPreviousStays],
+        },
+      }
+    )
+
+  function loadMoreData() {
+    if (hasNextPage) {
+      fetchNextPage()
+    }
+  }
+
+  // TS having a hard time with the filtered type.
+  // This is only temporary as we will not return null
+  // later on when we handle errors appropriately.
+  const filteredStays = (data?.pages.filter((page) => page?.data) ??
+    []) as unknown as PreviousStaysNonNullResponseObject[]
+  const stays = filteredStays.flatMap((page) => page.data)
+
+  return isLoading ? (
+    <LoadingSpinner />
+  ) : (
+    <ListContainer>
+      <Grids.Stackable>
+        {stays.map((stay) => (
+          <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
+        ))}
+      </Grids.Stackable>
+      {hasNextPage ? (
+        <ShowMoreButton disabled={isFetching} loadMoreData={loadMoreData} />
+      ) : null}
+    </ListContainer>
+  )
+}

components/Blocks/DynamicContent/Stays/Previous/EmptyPreviousStays/emptyPreviousStays.module.css

@@ -0,0 +1,10 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--Scandic-Brand-Pale-Peach);
+  border-radius: var(--Corner-radius-Medium);
+  margin-bottom: var(--Spacing-x-half);
+  height: 200px;
+}

components/Blocks/DynamicContent/Stays/Previous/EmptyPreviousStays/index.tsx

@@ -0,0 +1,17 @@
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import styles from "./emptyPreviousStays.module.css"
+
+export default async function EmptyPreviousStaysBlock() {
+  const { formatMessage } = await getIntl()
+  return (
+    <section className={styles.container}>
+      <Title as="h5" level="h3" color="red" textAlign="center">
+        {formatMessage({
+          id: "You have no previous stays.",
+        })}
+      </Title>
+    </section>
+  )
+}

components/Blocks/DynamicContent/Stays/Previous/index.tsx

@@ -0,0 +1,31 @@
+import { serverClient } from "@/lib/trpc/server"
+
+import SectionContainer from "@/components/Section/Container"
+import SectionHeader from "@/components/Section/Header"
+import SectionLink from "@/components/Section/Link"
+
+import ClientPreviousStays from "./Client"
+
+import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
+
+export default async function PreviousStays({
+  title,
+  subtitle,
+  link,
+}: AccountPageComponentProps) {
+  const initialPreviousStays = await serverClient().user.stays.previous({
+    limit: 6,
+  })
+
+  if (!initialPreviousStays?.data.length) {
+    return null
+  }
+
+  return (
+    <SectionContainer>
+      <SectionHeader title={title} preamble={subtitle} link={link} />
+      <ClientPreviousStays initialPreviousStays={initialPreviousStays} />
+      <SectionLink link={link} variant="mobile" />
+    </SectionContainer>
+  )
+}