Merged in chore/SW-2878-extract-booking-confirmation-pag (pull request #2779)

Chore/SW-2878 extract booking confirmation pag

* chore(SW-2878): Moved booking confirmation page to booking-flow package

* chore(SW-2878): Fixed promo styles as per design

* chore(SW-2878): Kept tiny duplicate function to avoid export from booking-flow package


Approved-by: Anton Gunnarsson

packages/booking-flow/lib/components/BookingConfirmation/Rooms/LinkedReservation/index.tsx

@@ -0,0 +1,95 @@
+"use client"
+
+import { useEffect } from "react"
+import { useIntl } from "react-intl"
+
+import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
+import { trpc } from "@scandic-hotels/trpc/client"
+
+import useLang from "../../../../hooks/useLang"
+import { useBookingConfirmationStore } from "../../../../stores/booking-confirmation"
+import { mapRoomState } from "../../utils"
+import { Room } from "../Room"
+import { LinkedReservationCardSkeleton } from "./LinkedReservationCardSkeleton"
+import Retry from "./Retry"
+
+export interface LinkedReservationProps {
+  checkInTime: string
+  checkOutTime: string
+  refId: string
+  roomIndex: number
+}
+
+export function LinkedReservation({
+  checkInTime,
+  checkOutTime,
+  refId,
+  roomIndex,
+}: LinkedReservationProps) {
+  const lang = useLang()
+  const { data, refetch, isLoading } = trpc.booking.get.useQuery({
+    refId,
+    lang,
+  })
+  const {
+    setRoom,
+    setFormattedTotalCost,
+    currencyCode,
+    totalBookingPrice,
+    totalBookingCheques,
+  } = useBookingConfirmationStore((state) => ({
+    setRoom: state.actions.setRoom,
+    setFormattedTotalCost: state.actions.setFormattedTotalCost,
+    currencyCode: state.currencyCode,
+    totalBookingPrice: state.totalBookingPrice,
+    totalBookingCheques: state.totalBookingCheques,
+  }))
+  const intl = useIntl()
+
+  useEffect(() => {
+    if (data?.room) {
+      const roomData = mapRoomState(data.booking, data.room, intl)
+      setRoom(roomData, roomIndex)
+
+      const formattedTotalCost = totalBookingCheques
+        ? formatPrice(
+            intl,
+            totalBookingCheques,
+            CurrencyEnum.CC,
+            totalBookingPrice,
+            currencyCode
+          )
+        : formatPrice(intl, totalBookingPrice, currencyCode)
+
+      setFormattedTotalCost(formattedTotalCost)
+    }
+  }, [
+    data,
+    roomIndex,
+    intl,
+    setRoom,
+    totalBookingCheques,
+    totalBookingPrice,
+    currencyCode,
+    setFormattedTotalCost,
+  ])
+
+  if (isLoading) {
+    return <LinkedReservationCardSkeleton />
+  }
+
+  if (!data?.room) {
+    return <Retry handleRefetch={refetch} />
+  }
+
+  return (
+    <Room
+      booking={data.booking}
+      checkInTime={checkInTime}
+      checkOutTime={checkOutTime}
+      img={data.room.images[0]}
+      roomName={data.room.name}
+    />
+  )
+}