Merged in feat/SW-1652-confirmation-page (pull request #1483)

Feat/SW-1652 confirmation page

* feat(SW-1652): handle linkedReservations fetching

* fix: add missing translations

* feat: add linkedReservation retry functionality

* chore: align naming


Approved-by: Simon.Emanuelsson

apps/scandic-web/components/HotelReservation/BookingConfirmation/Rooms/LinkedReservation/index.tsx

@@ -1,22 +1,50 @@
-import { serverClient } from "@/lib/trpc/server"
+"use client"
 
+import { useEffect } from "react"
+
+import { trpc } from "@/lib/trpc/client"
+import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
+
+import useLang from "@/hooks/useLang"
+
+import { mapRoomState } from "../../utils"
 import Room from "../Room"
+import { LinkedReservationCardSkeleton } from "./LinkedReservationCardSkeleton"
+import Retry from "./Retry"
 
-export async function LinkedReservation({
+import type { LinkedReservationProps } from "@/types/components/hotelReservation/bookingConfirmation/rooms/linkedReservation"
+
+export function LinkedReservation({
   confirmationNumber,
-}: {
-  confirmationNumber: string
-}) {
-  const confirmation = await serverClient().booking.confirmation({
+  roomIndex,
+}: LinkedReservationProps) {
+  const lang = useLang()
+  const { data, refetch, isLoading } = trpc.booking.confirmation.useQuery({
     confirmationNumber,
+    lang,
   })
+  const setRoom = useBookingConfirmationStore((state) => state.actions.setRoom)
 
-  const room = confirmation?.room
-  const booking = confirmation?.booking
+  useEffect(() => {
+    if (data?.room) {
+      const roomData = mapRoomState(data.booking, data.room)
+      setRoom(roomData, roomIndex)
+    }
+  }, [data, roomIndex, setRoom])
 
-  if (!booking || !room) {
-    return <div>Something went wrong, try again</div>
+  if (isLoading) {
+    return <LinkedReservationCardSkeleton />
   }
 
-  return <Room booking={booking} img={room.images[0]} roomName={room.name} />
+  if (!data?.room) {
+    return <Retry handleRefetch={refetch} />
+  }
+
+  return (
+    <Room
+      img={data.room.images[0]}
+      booking={data.booking}
+      roomName={data.room.name}
+    />
+  )
 }