feat: make steps of enter details flow dynamic depending on data

2024-11-18 09:13:23 +01:00
parent 3c4907efce
commit 94f693c4f0
62 changed files with 959 additions and 659 deletions
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/@hotelHeader/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/@hotelHeader/page.tsx
@@ -0,0 +1,66 @@
+import { redirect } from "next/navigation"
+
+import { getHotelData } from "@/lib/trpc/memoizedRequests"
+
+import Divider from "@/components/TempDesignSystem/Divider"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { getIntl } from "@/i18n"
+
+import styles from "./page.module.css"
+
+import type { LangParams, PageArgs } from "@/types/params"
+
+export default async function HotelHeader({
+  params,
+  searchParams,
+}: PageArgs<LangParams, { hotel: string }>) {
+  const home = `/${params.lang}`
+  if (!searchParams.hotel) {
+    redirect(home)
+  }
+  const hotelData = await getHotelData({
+    hotelId: searchParams.hotel,
+    language: params.lang,
+  })
+  if (!hotelData?.data) {
+    redirect(home)
+  }
+
+  const intl = await getIntl()
+  const hotel = hotelData.data.attributes
+  return (
+    <header className={styles.header}>
+      <div className={styles.wrapper}>
+        <div className={styles.titleContainer}>
+          <Title as="h3" level="h1">
+            {hotel.name}
+          </Title>
+          <address className={styles.address}>
+            <Caption color="textMediumContrast">
+              {hotel.address.streetAddress}, {hotel.address.city}
+            </Caption>
+            <div>
+              <Divider variant="vertical" color="subtle" />
+            </div>
+            <Caption color="textMediumContrast">
+              {intl.formatMessage(
+                { id: "Distance in km to city centre" },
+                { number: hotel.location.distanceToCentre }
+              )}
+            </Caption>
+          </address>
+        </div>
+        <div className={styles.dividerContainer}>
+          <Divider variant="vertical" color="subtle" />
+        </div>
+        <div className={styles.descriptionContainer}>
+          <Body color="baseTextHighContrast">
+            {hotel.hotelContent.texts.descriptions.short}
+          </Body>
+        </div>
+      </div>
+    </header>
+  )
+}