feat: use getHotel data

app/[lang]/(live)/(public)/hotelreservation/select-hotel/page.tsx

@@ -1,67 +1,26 @@
+import { serverClient } from "@/lib/trpc/server"
+
 import HotelCard from "@/components/HotelReservation/SelectHotel/HotelCard"
-import { HotelCardData } from "@/components/HotelReservation/SelectHotel/HotelCard/data"
 
-import styles from "./layout.module.css"
+import styles from "./page.module.css"
 
-export default function SelectHotelPage() {
-  const hotelData: HotelCardData[] = [
-    {
-      hotel: {
-        name: "Helsinki Hub",
-        address: "Kaisaniemenkatu 7, Helsinki",
-        description:
-          "Modern urban hotel in a impressive 1920s printing house in Helsinki city centre.",
-        rooms: "Only 4 rooms left",
-        button: "Book from 1549 SEK/night",
-        label: [
-          "Free cancellation until 18:00",
-          "Breakfast included",
-          "Free WiFi",
-          "Pay at the hotel",
-        ],
-      },
-    },
-    {
-      hotel: {
-        name: "Stockholm Serenity",
-        address: "Drottninggatan 99, Stockholm",
-        description:
-          "Charming boutique hotel located in the heart of Stockholm with scenic city views.",
-        rooms: "Only 2 rooms left",
-        button: "Book from 1899 SEK/night",
-        label: [
-          "Free cancellation until 18:00",
-          "Breakfast included",
-          "Free WiFi",
-          "Fitness center",
-          "Pet friendly",
-        ],
-      },
-    },
-    {
-      hotel: {
-        name: "Copenhagen Comfort",
-        address: "Vesterbrogade 23, Copenhagen",
-        description:
-          "Elegant hotel offering modern amenities and quick access to Copenhagen's main attractions.",
-        rooms: "Only 3 rooms left",
-        button: "Book from 1725 SEK/night",
-        label: [
-          "Free cancellation until 18:00",
-          "Breakfast included",
-          "Free WiFi",
-          "24-hour front desk",
-          "Airport shuttle",
-        ],
-      },
-    },
-  ]
+import { LangParams, PageArgs } from "@/types/params"
+
+export default async function SelectHotelPage({
+  params,
+}: PageArgs<LangParams>) {
+  const hotel = await serverClient().hotel.getHotel({
+    hotelId: "Stockholm",
+    language: params.lang,
+  })
+
+  const hotels = [hotel]
 
   return (
     <main>
       <section className={styles.section}>
-        {hotelData.map((data) => (
-          <HotelCard key={data.hotel.name} hotel={data.hotel} />
+        {hotels.map((hotel) => (
+          <HotelCard key={hotel.name} hotel={hotel} />
         ))}
       </section>
     </main>

components/HotelReservation/SelectHotel/HotelCard/index.tsx

@@ -4,12 +4,14 @@ import Button from "@/components/TempDesignSystem/Button"
 import Chip from "@/components/TempDesignSystem/Chip"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Title from "@/components/TempDesignSystem/Text/Title"
-
-import { HotelCardData } from "./data"
+import { getIntl } from "@/i18n"
 
 import styles from "./hotelCard.module.css"
 
-export default function HotelCard({ hotel }: HotelCardData) {
+import { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
+
+export default async function HotelCard({ hotel }: HotelCardProps) {
+  const { formatMessage } = await getIntl()
   return (
     <article className={styles.card}>
       <Image src="" alt="hotel image" className={styles.image} />
@@ -19,12 +21,12 @@ export default function HotelCard({ hotel }: HotelCardData) {
           <Title as="h4">{hotel.name}</Title>
         </header>
         <div className={styles.description}>
-          <span>{hotel.address}</span>
-          <span>{hotel.description}</span>
+          <span>{`${hotel.address.streetAddress}, ${hotel.address.city}`}</span>
+          <span>{hotel.hotelContent.texts.descriptions.short}</span>
         </div>
         <div className={styles.chips}>
-          {hotel.label.map((chip, index) => (
-            <Chip key={`chip-${index}`}>{chip}</Chip>
+          {hotel.detailedFacilities.slice(0, 6).map((chip, index) => (
+            <Chip key={`chip-${index}`}>{chip.name}</Chip>
           ))}
         </div>
         <footer className={styles.booking}>
@@ -34,11 +36,8 @@ export default function HotelCard({ hotel }: HotelCardData) {
             size="small"
             className={styles.button}
           >
-            {hotel.button}
+            {formatMessage({ id: "Book" })}
           </Button>
-          <Body color="burgundy">
-            <span>{hotel.rooms}</span>
-          </Body>
         </footer>
       </div>
     </article>

constants/routes/hotelReservation.js

@@ -8,16 +8,4 @@ export const hotelReservation = {
   de: "/de/hotelreservierung",
 }
 
-export const selectHotel = {
-  en: `${hotelReservation.en}/select-hotel`,
-  sv: `${hotelReservation.sv}/välj-hotell`,
-  no: `${hotelReservation.no}/velg-hotell`,
-  fi: `${hotelReservation.fi}/valitse-hotelli`,
-  da: `${hotelReservation.da}/vælg-hotel`,
-  de: `${hotelReservation.de}/wähle-hotel`,
-}
-
-export const bookingFlow = [
-  ...Object.values(hotelReservation),
-  ...Object.values(selectHotel),
-]
+export const bookingFlow = [...Object.values(hotelReservation)]

types/components/hotelReservation/selectHotel/hotelCardProps.ts

@@ -0,0 +1,3 @@
+import { Hotel } from "@/types/hotel"
+
+export type HotelCardProps = { hotel: Hotel }

types/hotel.ts

@@ -4,6 +4,7 @@ import { getHotelDataSchema } from "@/server/routers/hotels/output"
 
 export type HotelData = z.infer<typeof getHotelDataSchema>
 
+export type Hotel = HotelData["data"]["attributes"]
 export type HotelAddress = HotelData["data"]["attributes"]["address"]
 export type HotelLocation = HotelData["data"]["attributes"]["location"]
 export type HotelTripAdvisor =