feat(SW-589): Room selection summary

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}>
-          This is summary
-          <Button type="submit" size="small" theme="primaryDark">
-            {intl.formatMessage({ id: "Choose room" })}
-          </Button>
-        </div> */}
+        {rateSummary && (
+          <div className={styles.summary}>
+            <div className={styles.summaryText}>
+              <Subtitle>{rateSummary.roomType}</Subtitle>
+              <Body>{rateSummary.priceName}</Body>
+            </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) {