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

feat(SW-1652): Fetching additional rooms on confirmation page

* feat(SW-1652): Fetching additional rooms on confirmation page


Approved-by: Tobias Johansson

apps/scandic-web/components/HotelReservation/BookingConfirmation/PaymentDetails/index.tsx

@@ -1,24 +1,36 @@
-"use client"
-import { useIntl } from "react-intl"
-
 import { dt } from "@/lib/dt"
+import { serverClient } from "@/lib/trpc/server"
 
 import { CreditCardAddIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
-import useLang from "@/hooks/useLang"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
 import { formatPrice } from "@/utils/numberFormatting"
 
 import styles from "./paymentDetails.module.css"
 
 import type { BookingConfirmationPaymentDetailsProps } from "@/types/components/hotelReservation/bookingConfirmation/paymentDetails"
 
-export default function PaymentDetails({
+export default async function PaymentDetails({
   booking,
 }: BookingConfirmationPaymentDetailsProps) {
-  const intl = useIntl()
-  const lang = useLang()
+  const intl = await getIntl()
+  const lang = getLang()
+
+  const linkedReservations = await Promise.all(
+    //  TODO: How to handle partial failure (e.g. one booking can't be fetched)? Need UX/UI
+    booking.linkedReservations.map(async (res) => {
+      const confirmation = await serverClient().booking.confirmation({
+        confirmationNumber: res.confirmationNumber,
+      })
+      return confirmation
+    })
+  )
+  const grandTotal = linkedReservations.reduce((acc, res) => {
+    return res ? acc + res.booking.totalPrice : acc
+  }, booking.totalPrice)
   return (
     <div className={styles.details}>
       <Subtitle color="uiTextHighContrast" type="two">
@@ -29,11 +41,7 @@ export default function PaymentDetails({
           {intl.formatMessage(
             { id: "{amount} has been paid" },
             {
-              amount: formatPrice(
-                intl,
-                booking.totalPrice,
-                booking.currencyCode
-              ),
+              amount: formatPrice(intl, grandTotal, booking.currencyCode),
             }
           )}
         </Body>