From 72eca90d1b2edadd774db7367e19af7fff94735f Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Mon, 14 Oct 2024 16:45:09 +0200
Subject: [PATCH 1/3] feat(SW-589): Room selection summary

---
 .../hotelreservation/select-rate/page.tsx     | 29 +++++-----
 .../RoomSelection/FlexibilityOption/index.tsx | 19 +++++-
 .../RoomSelection/RoomCard/index.tsx          |  8 +++
 .../SelectRate/RoomSelection/index.tsx        | 58 +++++++++++++++++--
 .../RoomSelection/roomSelection.module.css    | 11 +++-
 .../selectRate/flexibilityOption.ts           |  4 ++
 .../hotelReservation/selectRate/roomCard.ts   |  3 +
 .../selectRate/roomSelection.ts               |  2 +
 .../hotelReservation/selectRate/selectRate.ts | 18 ++++++
 9 files changed, 131 insertions(+), 21 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
index 6c3a45365..fdd5436f3 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/select-rate/page.tsx
+++ b/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({
-    hotelId: searchParams.hotel,
-    language: params.lang,
-    include: ["RoomCategories"],
-  })
-
-  const roomConfigurations = await serverClient().hotel.availability.rooms({
-    hotelId: parseInt(searchParams.hotel, 10),
-    roomStayStartDate: "2024-11-02",
-    roomStayEndDate: "2024-11-03",
-    adults: 1,
-  })
+  const [hotelData, roomConfigurations, user] = await Promise.all([
+    serverClient().hotel.hotelData.get({
+      hotelId: searchParams.hotel,
+      language: params.lang,
+      include: ["RoomCategories"],
+    }),
+    serverClient().hotel.availability.rooms({
+      hotelId: parseInt(searchParams.hotel, 10),
+      roomStayStartDate: "2024-11-02",
+      roomStayEndDate: "2024-11-03",
+      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>
diff --git a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
index 481b79e98..519eef78c 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/index.tsx
+++ b/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>
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
index ff6358c16..1397068e1 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/RoomCard/index.tsx
+++ b/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>
diff --git a/components/HotelReservation/SelectRate/RoomSelection/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
index 1f5ad91d3..d958d223d 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/index.tsx
+++ b/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>
   )
diff --git a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css b/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
index a5176f517..a26767556 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
+++ b/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) {
diff --git a/types/components/hotelReservation/selectRate/flexibilityOption.ts b/types/components/hotelReservation/selectRate/flexibilityOption.ts
index 58112ac16..473de563b 100644
--- a/types/components/hotelReservation/selectRate/flexibilityOption.ts
+++ b/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 {
diff --git a/types/components/hotelReservation/selectRate/roomCard.ts b/types/components/hotelReservation/selectRate/roomCard.ts
index 834c9dea3..a6ed91ac1 100644
--- a/types/components/hotelReservation/selectRate/roomCard.ts
+++ b/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
 }
diff --git a/types/components/hotelReservation/selectRate/roomSelection.ts b/types/components/hotelReservation/selectRate/roomSelection.ts
index 16c26fd90..02dd897ac 100644
--- a/types/components/hotelReservation/selectRate/roomSelection.ts
+++ b/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
 }
diff --git a/types/components/hotelReservation/selectRate/selectRate.ts b/types/components/hotelReservation/selectRate/selectRate.ts
index bc325bbf2..e22a5d7f2 100644
--- a/types/components/hotelReservation/selectRate/selectRate.ts
+++ b/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
+}

From 0f27d3b2b59319f3f50deb0d70e7d21dd58c06a6 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Tue, 15 Oct 2024 09:52:50 +0200
Subject: [PATCH 2/3] feat(SW-589): break out RateSummary

---
 .../RoomSelection/RateSummary/index.tsx       | 53 +++++++++++++++++++
 .../RateSummary/rateSummary.module.css        | 17 ++++++
 .../SelectRate/RoomSelection/index.tsx        | 48 +----------------
 .../RoomSelection/roomSelection.module.css    | 18 -------
 .../selectRate/rateSummary.ts                 |  8 +++
 .../hotelReservation/selectRate/selectRate.ts |  9 ----
 6 files changed, 80 insertions(+), 73 deletions(-)
 create mode 100644 components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
 create mode 100644 components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css
 create mode 100644 types/components/hotelReservation/selectRate/rateSummary.ts

diff --git a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
new file mode 100644
index 000000000..1680cb848
--- /dev/null
+++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
@@ -0,0 +1,53 @@
+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 styles from "./rateSummary.module.css"
+
+import { RateSummaryProps } from "@/types/components/hotelReservation/selectRate/rateSummary"
+
+export default function RateSummary({ rateSummary, user }: RateSummaryProps) {
+  const intl = useIntl()
+  return (
+    <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>
+  )
+}
diff --git a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css
new file mode 100644
index 000000000..c8352efb1
--- /dev/null
+++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css
@@ -0,0 +1,17 @@
+.summary {
+  position: fixed;
+  z-index: 10;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  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);
+}
diff --git a/components/HotelReservation/SelectRate/RoomSelection/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
index d958d223d..e8c4edbc4 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
@@ -1,12 +1,8 @@
 "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 RateSummary from "./RateSummary"
 import RoomCard from "./RoomCard"
 
 import styles from "./roomSelection.module.css"
@@ -23,7 +19,6 @@ export default function RoomSelection({
 
   const router = useRouter()
   const searchParams = useSearchParams()
-  const intl = useIntl()
 
   function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault()
@@ -52,46 +47,7 @@ export default function RoomSelection({
             </li>
           ))}
         </ul>
-        {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>
-        )}
+        {rateSummary && <RateSummary rateSummary={rateSummary} user={user} />}
       </form>
     </div>
   )
diff --git a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css b/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
index a26767556..66a27302e 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/roomSelection.module.css
@@ -20,24 +20,6 @@
   width: 0;
 }
 
-.summary {
-  position: fixed;
-  z-index: 10;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  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) {
   .roomList {
     grid-template-columns: repeat(3, minmax(240px, 1fr));
diff --git a/types/components/hotelReservation/selectRate/rateSummary.ts b/types/components/hotelReservation/selectRate/rateSummary.ts
new file mode 100644
index 000000000..888b86148
--- /dev/null
+++ b/types/components/hotelReservation/selectRate/rateSummary.ts
@@ -0,0 +1,8 @@
+import { Rate } from "./selectRate"
+
+import { User } from "@/types/user"
+
+export interface RateSummaryProps {
+  rateSummary: Rate
+  user: User | null
+}
diff --git a/types/components/hotelReservation/selectRate/selectRate.ts b/types/components/hotelReservation/selectRate/selectRate.ts
index e22a5d7f2..43152f11b 100644
--- a/types/components/hotelReservation/selectRate/selectRate.ts
+++ b/types/components/hotelReservation/selectRate/selectRate.ts
@@ -12,12 +12,3 @@ export interface Rate {
   public: Product["productType"]["public"]
   member: Product["productType"]["member"]
 }
-
-export interface State {
-  selectedRate: Rate | null
-}
-
-export type SetSelectedRateAction = {
-  type: "SET_SELECTED_RATE"
-  payload: Rate
-}

From cd5b9e7648b8c7ca04a53c96810e530dc9ee1b5e Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Tue, 15 Oct 2024 10:28:32 +0200
Subject: [PATCH 3/3] feat(sw-589): cleanups and PR comment fixes

---
 .../RoomSelection/RateSummary/index.tsx       | 48 ++++++++-----------
 .../SelectRate/RoomSelection/index.tsx        |  4 +-
 .../Text/Body/body.module.css                 |  4 ++
 .../TempDesignSystem/Text/Body/variants.ts    |  1 +
 .../selectRate/rateSummary.ts                 |  4 +-
 5 files changed, 29 insertions(+), 32 deletions(-)

diff --git a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
index 1680cb848..29d4b0740 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
@@ -8,41 +8,33 @@ import styles from "./rateSummary.module.css"
 
 import { RateSummaryProps } from "@/types/components/hotelReservation/selectRate/rateSummary"
 
-export default function RateSummary({ rateSummary, user }: RateSummaryProps) {
+export default function RateSummary({
+  rateSummary,
+  isUserLoggedIn,
+}: RateSummaryProps) {
   const intl = useIntl()
+
+  const priceToShow = isUserLoggedIn ? rateSummary.member : rateSummary.public
+
   return (
     <div className={styles.summary}>
       <div className={styles.summaryText}>
-        <Subtitle>{rateSummary.roomType}</Subtitle>
-        <Body>{rateSummary.priceName}</Body>
+        <Subtitle color="uiTextHighContrast">{rateSummary.roomType}</Subtitle>
+        <Body color="uiTextMediumContrast">{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>
-            </>
-          )}
+          <>
+            <Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
+              {priceToShow?.localPrice.pricePerStay}{" "}
+              {priceToShow?.localPrice.currency}
+            </Subtitle>
+            <Body color="uiTextMediumContrast">
+              {intl.formatMessage({ id: "Approx." })}{" "}
+              {priceToShow?.requestedPrice?.pricePerStay}{" "}
+              {priceToShow?.requestedPrice?.currency}
+            </Body>
+          </>
         </div>
         <Button type="submit" theme="base">
           {intl.formatMessage({ id: "Continue" })}
diff --git a/components/HotelReservation/SelectRate/RoomSelection/index.tsx b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
index e8c4edbc4..7d1c15d6d 100644
--- a/components/HotelReservation/SelectRate/RoomSelection/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/index.tsx
@@ -47,7 +47,9 @@ export default function RoomSelection({
             </li>
           ))}
         </ul>
-        {rateSummary && <RateSummary rateSummary={rateSummary} user={user} />}
+        {rateSummary && (
+          <RateSummary rateSummary={rateSummary} isUserLoggedIn={!!user} />
+        )}
       </form>
     </div>
   )
diff --git a/components/TempDesignSystem/Text/Body/body.module.css b/components/TempDesignSystem/Text/Body/body.module.css
index 4243eb690..dd9b85156 100644
--- a/components/TempDesignSystem/Text/Body/body.module.css
+++ b/components/TempDesignSystem/Text/Body/body.module.css
@@ -96,6 +96,10 @@
   color: var(--UI-Text-High-contrast);
 }
 
+.uiTextMediumContrast {
+  color: var(--UI-Text-Medium-contrast);
+}
+
 .uiTextPlaceholder {
   color: var(--UI-Text-Placeholder);
 }
diff --git a/components/TempDesignSystem/Text/Body/variants.ts b/components/TempDesignSystem/Text/Body/variants.ts
index 5c23fe506..1663e21f0 100644
--- a/components/TempDesignSystem/Text/Body/variants.ts
+++ b/components/TempDesignSystem/Text/Body/variants.ts
@@ -17,6 +17,7 @@ const config = {
       peach50: styles.peach50,
       peach80: styles.peach80,
       uiTextHighContrast: styles.uiTextHighContrast,
+      uiTextMediumContrast: styles.uiTextMediumContrast,
       uiTextPlaceholder: styles.uiTextPlaceholder,
     },
     textAlign: {
diff --git a/types/components/hotelReservation/selectRate/rateSummary.ts b/types/components/hotelReservation/selectRate/rateSummary.ts
index 888b86148..672df21dd 100644
--- a/types/components/hotelReservation/selectRate/rateSummary.ts
+++ b/types/components/hotelReservation/selectRate/rateSummary.ts
@@ -1,8 +1,6 @@
 import { Rate } from "./selectRate"
 
-import { User } from "@/types/user"
-
 export interface RateSummaryProps {
   rateSummary: Rate
-  user: User | null
+  isUserLoggedIn: boolean
 }