Merged in fix/SW-2991-logged-in-ui-campaign-rate-card (pull request #2394)

fix(SW-2991): new rate card for logged in users

* fix(SW-2991): new rate card for logged in users


Approved-by: Simon.Emanuelsson

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Campaign.tsx

@@ -1,4 +1,5 @@
 "use client"
+import { useSession } from "next-auth/react"
 import { useIntl } from "react-intl"
 
 import CampaignRateCard from "@scandic-hotels/design-system/CampaignRateCard"
@@ -10,6 +11,7 @@ import {
 } from "@/components/HotelReservation/utils"
 import { useRoomContext } from "@/contexts/SelectRate/Room"
 import useRateTitles from "@/hooks/booking/useRateTitles"
+import { isValidClientSession } from "@/utils/clientSession"
 
 import { isSelectedPriceProduct } from "./isSelected"
 import { calculatePricePerNightPriceProduct } from "./totalPricePerNight"
@@ -32,6 +34,8 @@ export default function Campaign({
   const { roomNr, selectedFilter, selectedPackages, selectedRate } =
     useRoomContext()
   const rateTitles = useRateTitles()
+  const { data: session } = useSession()
+  const isPrimaryRoomAndLoggedIn = isValidClientSession(session) && roomNr === 1
 
   const isCampaignRate = campaign.some(
     (c) =>
@@ -142,7 +146,9 @@ export default function Campaign({
       : undefined
 
     let approximateRatePrice = undefined
-    if (
+    if (isPrimaryRoomAndLoggedIn && pricePerNightMember) {
+      approximateRatePrice = pricePerNightMember.totalRequestedPrice
+    } else if (
       pricePerNight.totalRequestedPrice &&
       pricePerNightMember?.totalRequestedPrice
     ) {
@@ -161,7 +167,8 @@ export default function Campaign({
             unit: product.public.requestedPrice.currency,
           }
         : undefined
-
+    const campaignMemberLabel =
+      product.rateDefinitionMember?.title || memberPriceMsg
     return (
       <CampaignRateCard
         key={product.rate}
@@ -169,9 +176,11 @@ export default function Campaign({
         bannerText={bannerText}
         handleChange={() => handleSelectRate(product)}
         isSelected={isSelected}
-        isHighlightedRate={!!product.rateDefinition?.displayPriceRed}
+        isHighlightedRate={
+          !!product.rateDefinition?.displayPriceRed || isPrimaryRoomAndLoggedIn
+        }
         memberRate={
-          pricePerNightMember
+          pricePerNightMember && !isPrimaryRoomAndLoggedIn
             ? {
                 label: memberPriceMsg,
                 price: pricePerNightMember.totalPrice,
@@ -179,11 +188,24 @@ export default function Campaign({
               }
             : undefined
         }
+        comparisonRate={
+          isPrimaryRoomAndLoggedIn
+            ? {
+                price: pricePerNight.totalPrice,
+                unit: product.public.localPrice.currency,
+              }
+            : undefined
+        }
         name={`rateCode-${roomNr}-${product.public.rateCode}`}
         paymentTerm={rateTitles[product.rate].paymentTerm}
         rate={{
-          label: standardPriceMsg,
-          price: pricePerNight.totalPrice,
+          label: isPrimaryRoomAndLoggedIn
+            ? campaignMemberLabel
+            : standardPriceMsg,
+          price:
+            isPrimaryRoomAndLoggedIn && pricePerNightMember
+              ? pricePerNightMember.totalPrice
+              : pricePerNight.totalPrice,
           unit: `${product.public.localPrice.currency}/${night}`,
         }}
         rateTitle={rateTitles[product.rate].title}

packages/design-system/lib/components/RateCard/Campaign/index.tsx

@@ -142,7 +142,9 @@ export default function CampaignRateCard({
               <div className={`${styles.rateRow} ${styles.comparisonRate}`}>
                 <Typography variant="Title/Subtitle/md">
                   <p>
-                    <span className={styles.strikethrough}>{rate.price}</span>{' '}
+                    <span className={styles.strikethrough}>
+                      {comparisonRate.price}
+                    </span>{' '}
                     <Typography variant="Body/Supporting text (caption)/smBold">
                       <span className={styles.strikethrough}>
                         {comparisonRate.unit}