feat(SW-589): Room selection summary

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

@@ -1,5 +1,5 @@
+import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
-import tempHotelData from "@/server/routers/hotels/tempHotelData.json"
 
 import RoomSelection from "@/components/HotelReservation/SelectRate/RoomSelection"
 import { setLang } from "@/i18n/serverContext"
@@ -15,18 +15,20 @@ export default async function SelectRatePage({
 }: PageArgs<LangParams & { section: string }, SelectRateSearchParams>) {
   setLang(params.lang)
 
-  const hotelData = await serverClient().hotel.hotelData.get({
+  const [hotelData, roomConfigurations, user] = await Promise.all([
-    hotelId: searchParams.hotel,
+    serverClient().hotel.hotelData.get({
-    language: params.lang,
+      hotelId: searchParams.hotel,
-    include: ["RoomCategories"],
+      language: params.lang,
-  })
+      include: ["RoomCategories"],
-
+    }),
-  const roomConfigurations = await serverClient().hotel.availability.rooms({
+    serverClient().hotel.availability.rooms({
-    hotelId: parseInt(searchParams.hotel, 10),
+      hotelId: parseInt(searchParams.hotel, 10),
-    roomStayStartDate: "2024-11-02",
+      roomStayStartDate: "2024-11-02",
-    roomStayEndDate: "2024-11-03",
+      roomStayEndDate: "2024-11-03",
-    adults: 1,
+      adults: 1,
-  })
+    }),
+    getProfileSafely(),
+  ])
 
   if (!roomConfigurations) {
     return "No rooms found" // TODO: Add a proper error message
@@ -47,6 +49,7 @@ export default async function SelectRatePage({
           <RoomSelection
             roomConfigurations={roomConfigurations}
             roomCategories={roomCategories ?? []}
+            user={user}
           />
         </div>
       </div>

components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx

@@ -17,6 +17,8 @@ export default function FlexibilityOption({
   name,
   paymentTerm,
   priceInformation,
+  roomType,
+  handleSelectRate,
 }: FlexibilityOptionProps) {
   const [rootDiv, setRootDiv] = useState<Element | undefined>(undefined)
   const [isPopoverOpen, setIsPopoverOpen] = useState(false)
@@ -42,9 +44,24 @@ export default function FlexibilityOption({
 
   const { public: publicPrice, member: memberPrice } = product.productType
 
+  function onChange() {
+    const rate = {
+      roomType: roomType,
+      priceName: name,
+      public: publicPrice,
+      member: memberPrice,
+    }
+    handleSelectRate(rate)
+  }
+
   return (
     <label>
-      <input type="radio" name="rateCode" value={publicPrice?.rateCode} />
+      <input
+        type="radio"
+        name="rateCode"
+        value={publicPrice?.rateCode}
+        onChange={onChange}
+      />
       <div className={styles.card}>
         <div className={styles.header} ref={setRef}>
           <DialogTrigger>

components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx

@@ -1,4 +1,5 @@
 "use client"
+
 import { useIntl } from "react-intl"
 
 import { RateDefinition } from "@/server/routers/hotels/output"
@@ -21,6 +22,7 @@ export default function RoomCard({
   rateDefinitions,
   roomConfiguration,
   roomCategories,
+  handleSelectRate,
 }: RoomCardProps) {
   const intl = useIntl()
 
@@ -112,6 +114,8 @@ export default function RoomCard({
               paymentTerm={intl.formatMessage({ id: "Pay now" })}
               product={findProductForRate(saveRate)}
               priceInformation={getPriceForRate(saveRate)}
+              handleSelectRate={handleSelectRate}
+              roomType={roomConfiguration.roomType}
             />
             <FlexibilityOption
               name={intl.formatMessage({ id: "Free rebooking" })}
@@ -119,6 +123,8 @@ export default function RoomCard({
               paymentTerm={intl.formatMessage({ id: "Pay now" })}
               product={findProductForRate(changeRate)}
               priceInformation={getPriceForRate(changeRate)}
+              handleSelectRate={handleSelectRate}
+              roomType={roomConfiguration.roomType}
             />
             <FlexibilityOption
               name={intl.formatMessage({ id: "Free cancellation" })}
@@ -126,6 +132,8 @@ export default function RoomCard({
               paymentTerm={intl.formatMessage({ id: "Pay later" })}
               product={findProductForRate(flexRate)}
               priceInformation={getPriceForRate(flexRate)}
+              handleSelectRate={handleSelectRate}
+              roomType={roomConfiguration.roomType}
             />
           </div>
         </div>

components/HotelReservation/SelectRate/RoomSelection/index.tsx

@@ -1,18 +1,29 @@
 "use client"
 import { useRouter, useSearchParams } from "next/navigation"
+import { useState } from "react"
+import { useIntl } from "react-intl"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import RoomCard from "./RoomCard"
 
 import styles from "./roomSelection.module.css"
 
 import { RoomSelectionProps } from "@/types/components/hotelReservation/selectRate/roomSelection"
+import { Rate } from "@/types/components/hotelReservation/selectRate/selectRate"
 
 export default function RoomSelection({
   roomConfigurations,
   roomCategories,
+  user,
 }: RoomSelectionProps) {
+  const [rateSummary, setRateSummary] = useState<Rate | null>(null)
+
   const router = useRouter()
   const searchParams = useSearchParams()
+  const intl = useIntl()
 
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault()
@@ -36,16 +47,51 @@ export default function RoomSelection({
                 rateDefinitions={roomConfigurations.rateDefinitions}
                 roomConfiguration={roomConfiguration}
                 roomCategories={roomCategories}
+                handleSelectRate={setRateSummary}
               />
             </li>
           ))}
         </ul>
-        {/*         <div className={styles.summary}>
+        {rateSummary && (
-          This is summary
+          <div className={styles.summary}>
-          <Button type="submit" size="small" theme="primaryDark">
+            <div className={styles.summaryText}>
-            {intl.formatMessage({ id: "Choose room" })}
+              <Subtitle>{rateSummary.roomType}</Subtitle>
-          </Button>
+              <Body>{rateSummary.priceName}</Body>
-        </div> */}
+            </div>
+            <div className={styles.summaryPrice}>
+              <div className={styles.summaryPriceText}>
+                {user ? (
+                  <>
+                    <Subtitle color="red">
+                      {rateSummary.member?.localPrice.pricePerStay}{" "}
+                      {rateSummary.member?.localPrice.currency}
+                    </Subtitle>
+                    <Body>
+                      {intl.formatMessage({ id: "Approx." })}{" "}
+                      {rateSummary.member?.requestedPrice?.pricePerStay}{" "}
+                      {rateSummary.member?.requestedPrice?.currency}
+                    </Body>
+                  </>
+                ) : (
+                  <>
+                    <Subtitle>
+                      {rateSummary.public?.localPrice.pricePerStay}{" "}
+                      {rateSummary.public?.localPrice.currency}
+                    </Subtitle>
+                    <Body>
+                      {intl.formatMessage({ id: "Approx." })}{" "}
+                      {rateSummary.public?.requestedPrice?.pricePerStay}{" "}
+                      {rateSummary.public?.requestedPrice?.currency}
+                    </Body>
+                  </>
+                )}
+              </div>
+              <Button type="submit" theme="base">
+                {intl.formatMessage({ id: "Continue" })}
+              </Button>
+            </div>
+          </div>
+        )}
       </form>
     </div>
   )

components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css

@@ -22,11 +22,20 @@
 
 .summary {
   position: fixed;
+  z-index: 10;
   bottom: 0;
   left: 0;
   right: 0;
-  background-color: white;
+  background-color: var(--Base-Surface-Primary-light-Normal);
   padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.summaryPrice {
+  display: flex;
+  gap: var(--Spacing-x4);
 }
 
 @media (min-width: 767px) {

types/components/hotelReservation/selectRate/flexibilityOption.ts

@@ -2,6 +2,8 @@ import { z } from "zod"
 
 import { Product, productTypePriceSchema } from "@/server/routers/hotels/output"
 
+import { Rate } from "./selectRate"
+
 type ProductPrice = z.output<typeof productTypePriceSchema>
 
 export type FlexibilityOptionProps = {
@@ -10,6 +12,8 @@ export type FlexibilityOptionProps = {
   value: string
   paymentTerm: string
   priceInformation?: Array<string>
+  roomType: string
+  handleSelectRate: (rate: Rate) => void
 }
 
 export interface PriceListProps {

types/components/hotelReservation/selectRate/roomCard.ts

@@ -3,10 +3,13 @@ import {
   RoomConfiguration,
 } from "@/server/routers/hotels/output"
 
+import { Rate } from "./selectRate"
+
 import { RoomData } from "@/types/hotel"
 
 export type RoomCardProps = {
   roomConfiguration: RoomConfiguration
   rateDefinitions: RateDefinition[]
   roomCategories: RoomData[]
+  handleSelectRate: (rate: Rate) => void
 }

types/components/hotelReservation/selectRate/roomSelection.ts

@@ -1,8 +1,10 @@
 import { RoomsAvailability } from "@/server/routers/hotels/output"
 
 import { RoomData } from "@/types/hotel"
+import { User } from "@/types/user"
 
 export interface RoomSelectionProps {
   roomConfigurations: RoomsAvailability
   roomCategories: RoomData[]
+  user: User | null
 }

types/components/hotelReservation/selectRate/selectRate.ts

@@ -1,5 +1,23 @@
+import { Product } from "@/server/routers/hotels/output"
+
 export interface SelectRateSearchParams {
   fromDate: string
   toDate: string
   hotel: string
 }
+
+export interface Rate {
+  roomType: string
+  priceName: string
+  public: Product["productType"]["public"]
+  member: Product["productType"]["member"]
+}
+
+export interface State {
+  selectedRate: Rate | null
+}
+
+export type SetSelectedRateAction = {
+  type: "SET_SELECTED_RATE"
+  payload: Rate
+}