Merged in fix/SW-3091-the-strikethrough-price- (pull request #2562)

fix(SW-3091): Fixed strike through price shown same as original price

* fix(SW-3091): Fixed strike through price shown same as original price

* fix(SW-3091): Optimized code

* fix(3091): Strikethrough visibility on mobile booking code


Approved-by: Erik Tiekstra

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/summaryContent.module.css

@@ -49,7 +49,7 @@
   }
 }
 
-.strikeThroughRate {
+.prices .strikeThroughRate {
   text-decoration: line-through;
   color: var(--Text-Secondary);
 }

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/index.tsx

@@ -7,10 +7,16 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
 
+import { getRoomPrice } from "@/stores/enter-details/helpers"
+
 import Modal from "@/components/Modal"
 import { formatPrice } from "@/utils/numberFormatting"
 
-import { getMemberPrice, isBookingCodeRate } from "../utils"
+import {
+  getMemberPrice,
+  getNonDiscountedRate,
+  isBookingCodeRate,
+} from "../utils"
 
 import styles from "./room.module.css"
 
@@ -70,6 +76,7 @@ export default function Room({
   const memberPrice = getMemberPrice(room.roomRate)
   const showMemberPrice = !!(isMember && memberPrice && roomNumber === 1)
   const showDiscounted = isBookingCodeRate(room.roomRate) || showMemberPrice
+  const regularRate = getRoomPrice(room.roomRate, showMemberPrice)
 
   const adultsMsg = intl.formatMessage(
     {
@@ -143,12 +150,13 @@ export default function Room({
                         room.roomPrice.perStay.local.additionalPriceCurrency
                       )}
                 </p>
-                {showDiscounted && room.roomPrice.perStay.local.price ? (
+                {/* Show the price on which discount applies as Striked when discounted price is available */}
+                {showDiscounted ? (
                   <s className={styles.strikeThroughRate}>
-                    {formatPrice(
+                    {getNonDiscountedRate(
                       intl,
-                      room.roomPrice.perStay.local.price,
-                      room.roomPrice.perStay.local.currency
+                      showMemberPrice,
+                      regularRate.perStay
                     )}
                   </s>
                 ) : null}

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/room.module.css

@@ -47,7 +47,7 @@
   }
 }
 
-.strikeThroughRate {
+.prices .strikeThroughRate {
   text-decoration: line-through;
   color: var(--Text-Secondary);
 }

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/mobileSummary.module.css

@@ -88,7 +88,7 @@
   }
 }
 
-.strikeThroughRate {
+.priceDetailsButton .strikeThroughRate {
   text-decoration: line-through;
   color: var(--Text-Secondary);
 }

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/utils.ts

@@ -1,8 +1,12 @@
 import { RateTypeEnum } from "@scandic-hotels/trpc/enums/rateType"
 
+import { formatPrice } from "@/utils/numberFormatting"
+
 import type { Product } from "@scandic-hotels/trpc/types/roomAvailability"
+import type { IntlShape } from "react-intl"
 
 import type { RoomRate } from "@/types/components/hotelReservation/enterDetails/details"
+import type { Price } from "@/types/components/hotelReservation/price"
 
 export function getMemberPrice(roomRate: RoomRate) {
   if ("member" in roomRate && roomRate.member) {
@@ -33,3 +37,19 @@ export function isBookingCodeRate(product: Product) {
     return false
   }
 }
+
+export function getNonDiscountedRate(
+  intl: IntlShape,
+  isMemberRate: boolean,
+  rate: Price
+) {
+  if (isMemberRate) {
+    return rate.local.price
+      ? formatPrice(intl, rate.local.price, rate.local.currency)
+      : null
+  } else {
+    return rate.local.regularPrice
+      ? formatPrice(intl, rate.local.regularPrice, rate.local.currency)
+      : null
+  }
+}