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

2024-08-28 10:47:57 +02:00
parent b9dbcf7d90
commit af850c90e7
437 changed files with 7663 additions and 9881 deletions
@@ -0,0 +1,4 @@
+.container {
+  display: grid;
+  gap: var(--Spacing-x2);
+}
@@ -0,0 +1,5 @@
+import styles from "./container.module.css"
+
+export default function ListContainer({ children }: React.PropsWithChildren) {
+  return <section className={styles.container}>{children}</section>
+}
@@ -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>
+  )
+}
@@ -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;
+}
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -0,0 +1,4 @@
+.container {
+  display: flex;
+  justify-content: center;
+}
@@ -0,0 +1,32 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import { ChevronDownIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+
+import styles from "./button.module.css"
+
+import type { ShowMoreButtonParams } from "@/types/components/myPages/stays/button"
+
+export default function ShowMoreButton({
+  disabled,
+  loadMoreData,
+}: ShowMoreButtonParams) {
+  const { formatMessage } = useIntl()
+  return (
+    <div className={styles.container}>
+      <Button
+        disabled={disabled}
+        onClick={loadMoreData}
+        variant="icon"
+        type="button"
+        theme="base"
+        intent="text"
+      >
+        <ChevronDownIcon />
+        {formatMessage({ id: "Show more" })}
+      </Button>
+    </div>
+  )
+}
@@ -0,0 +1,32 @@
+.container {
+  display: grid;
+  grid-template-rows: 1fr min(50px);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  min-height: 250px;
+  margin-bottom: var(--Spacing-x-half);
+  overflow: hidden;
+}
+
+.titleContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--Scandic-Brand-Pale-Peach);
+}
+
+.title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.burgundyTitle {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
@@ -0,0 +1,34 @@
+import { homeHrefs } from "@/constants/homeHrefs"
+import { env } from "@/env/server"
+
+import { ArrowRightIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./emptyUpcomingStays.module.css"
+
+export default async function EmptyUpcomingStaysBlock() {
+  const { formatMessage } = await getIntl()
+  return (
+    <section className={styles.container}>
+      <div className={styles.titleContainer}>
+        <Title as="h5" level="h3" color="red" className={styles.title}>
+          {formatMessage({ id: "You have no upcoming stays." })}
+          <span className={styles.burgundyTitle}>
+            {formatMessage({ id: "Where should you go next?" })}
+          </span>
+        </Title>
+      </div>
+      <Link
+        href={homeHrefs[env.NODE_ENV][getLang()]}
+        className={styles.link}
+        color="peach80"
+      >
+        {formatMessage({ id: "Get inspired" })}
+        <ArrowRightIcon color="peach80" />
+      </Link>
+    </section>
+  )
+}
@@ -0,0 +1,38 @@
+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 Grids from "@/components/TempDesignSystem/Grids"
+
+import StayCard from "../StayCard"
+import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
+
+import { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
+
+export default async function SoonestStays({
+  title,
+  subtitle,
+  link,
+}: AccountPageComponentProps) {
+  const upcomingStays = await serverClient().user.stays.upcoming({ limit: 3 })
+  if (!upcomingStays?.data) {
+    return null
+  }
+
+  return (
+    <SectionContainer>
+      <SectionHeader title={title} preamble={subtitle} link={link} />
+      {upcomingStays.data.length ? (
+        <Grids.Stackable>
+          {upcomingStays.data.map((stay) => (
+            <StayCard key={stay.attributes.confirmationNumber} stay={stay} />
+          ))}
+        </Grids.Stackable>
+      ) : (
+        <EmptyUpcomingStaysBlock />
+      )}
+      <SectionLink link={link} variant="mobile" />
+    </SectionContainer>
+  )
+}
@@ -0,0 +1,55 @@
+"use client"
+import { dt } from "@/lib/dt"
+
+import { CalendarIcon } from "@/components/Icons"
+import Image from "@/components/Image"
+import Link from "@/components/TempDesignSystem/Link"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import useLang from "@/hooks/useLang"
+
+import styles from "./stay.module.css"
+
+import type { StayCardProps } from "@/types/components/myPages/stays/stayCard"
+
+export default function StayCard({ stay }: StayCardProps) {
+  const lang = useLang()
+  const { checkinDate, checkoutDate, hotelInformation, bookingUrl } =
+    stay.attributes
+
+  const arrival = dt(checkinDate).locale(lang)
+  const arrivalDate = arrival.format("DD MMM")
+  const arrivalDateTime = arrival.format("YYYY-MM-DD")
+  const depart = dt(checkoutDate).locale(lang)
+  const departDate = depart.format("DD MMM YYYY")
+  const departDateTime = depart.format("YYYY-MM-DD")
+
+  return (
+    <Link href={bookingUrl}>
+      <article className={styles.stay}>
+        <Image
+          className={styles.image}
+          alt={hotelInformation.hotelContent.images.metaData.altText}
+          src={hotelInformation.hotelContent.images.imageSizes.small}
+          width={420}
+          height={240}
+        />
+        <footer className={styles.footer}>
+          <Title as="h5" className={styles.hotel} level="h3">
+            {hotelInformation.hotelName}
+          </Title>
+          <div className={styles.date}>
+            <CalendarIcon color="burgundy" height={24} width={24} />
+            <Caption asChild>
+              <time dateTime={arrivalDateTime}>{arrivalDate}</time>
+            </Caption>
+            {" - "}
+            <Caption asChild>
+              <time dateTime={departDateTime}>{departDate}</time>
+            </Caption>
+          </div>
+        </footer>
+      </article>
+    </Link>
+  )
+}
@@ -0,0 +1,43 @@
+.stay {
+  background-color: var(--Main-Grey-White);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Medium);
+  display: grid;
+  overflow: hidden;
+}
+
+.stay:hover {
+  border: 1.5px solid var(--Base-Border-Hover);
+}
+
+.image {
+  height: auto;
+  min-height: 220px;
+  object-fit: cover;
+  overflow: hidden;
+  width: 100%;
+}
+
+.footer {
+  color: var(--Scandic-Brand-Burgundy);
+  display: grid;
+  gap: var(--Spacing-x2);
+  margin-top: auto;
+  overflow: hidden;
+  padding: var(--Spacing-x2);
+  width: 100%;
+}
+
+.hotel {
+  margin: 0;
+  overflow: hidden;
+  padding: 0;
+  text-overflow: ellipsis;
+  text-wrap: nowrap;
+}
+
+.date {
+  align-items: center;
+  display: flex;
+  gap: var(--Spacing-x-half);
+}
@@ -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 {
+  UpcomingStaysClientProps,
+  UpcomingStaysNonNullResponseObject,
+} from "@/types/components/myPages/stays/upcoming"
+
+export default function ClientUpcomingStays({
+  initialUpcomingStays,
+}: UpcomingStaysClientProps) {
+  const { data, isFetching, fetchNextPage, hasNextPage, isLoading } =
+    trpc.user.stays.upcoming.useInfiniteQuery(
+      {
+        limit: 6,
+      },
+      {
+        getNextPageParam: (lastPage) => {
+          return lastPage?.nextCursor
+        },
+        initialData: {
+          pageParams: [undefined, 1],
+          pages: [initialUpcomingStays],
+        },
+      }
+    )
+
+  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 && page.data) ??
+    []) as unknown as UpcomingStaysNonNullResponseObject[]
+  const stays = filteredStays.flatMap((page) => page.data)
+
+  return isLoading ? (
+    <LoadingSpinner />
+  ) : 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
+}
@@ -0,0 +1,32 @@
+.container {
+  display: grid;
+  grid-template-rows: 1fr min(50px);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  min-height: 250px;
+  margin-bottom: var(--Spacing-x-half);
+  overflow: hidden;
+}
+
+.titleContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--Scandic-Brand-Pale-Peach);
+}
+
+.title {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.burgundyTitle {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.link {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
@@ -0,0 +1,34 @@
+import { homeHrefs } from "@/constants/homeHrefs"
+import { env } from "@/env/server"
+
+import { ArrowRightIcon } from "@/components/Icons"
+import Link from "@/components/TempDesignSystem/Link"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./emptyUpcomingStays.module.css"
+
+export default async function EmptyUpcomingStaysBlock() {
+  const { formatMessage } = await getIntl()
+  return (
+    <section className={styles.container}>
+      <div className={styles.titleContainer}>
+        <Title as="h5" level="h3" color="red" className={styles.title}>
+          {formatMessage({ id: "You have no upcoming stays." })}
+          <span className={styles.burgundyTitle}>
+            {formatMessage({ id: "Where should you go next?" })}
+          </span>
+        </Title>
+      </div>
+      <Link
+        href={homeHrefs[env.NODE_ENV][getLang()]}
+        className={styles.link}
+        color="peach80"
+      >
+        {formatMessage({ id: "Get inspired" })}
+        <ArrowRightIcon color="peach80" />
+      </Link>
+    </section>
+  )
+}
@@ -0,0 +1,34 @@
+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 ClientUpcomingStays from "./Client"
+import EmptyUpcomingStaysBlock from "./EmptyUpcomingStays"
+
+import styles from "./upcoming.module.css"
+
+import type { AccountPageComponentProps } from "@/types/components/myPages/myPage/accountPage"
+
+export default async function UpcomingStays({
+  title,
+  subtitle,
+  link,
+}: AccountPageComponentProps) {
+  const initialUpcomingStays = await serverClient().user.stays.upcoming({
+    limit: 6,
+  })
+
+  return (
+    <SectionContainer className={styles.container}>
+      <SectionHeader title={title} preamble={subtitle} link={link} />
+      {initialUpcomingStays?.data.length ? (
+        <ClientUpcomingStays initialUpcomingStays={initialUpcomingStays} />
+      ) : (
+        <EmptyUpcomingStaysBlock />
+      )}
+      <SectionLink link={link} variant="mobile" />
+    </SectionContainer>
+  )
+}
@@ -0,0 +1,3 @@
+.container {
+  display: inline-grid;
+}