Merged in feat/SW-1719-strikethrough-rates (pull request #2266)

Feat/SW-1719 strikethrough rates

* feat(SW-1719): Strikethrough rate if logged in on regular rate cards

* feat(SW-1719): Strikethrough rate if logged in on rate summary

* feat(SW-1719): Strikethrough rate if logged in on mobile rate summary

* feat(SW-1719): Strikethrough rate if logged in on enter details

* feat(SW-1719): Strikethrough rate support for multiple rooms

* feat(SW-1719): booking receipt fixes on confirmation page

* feat(SW-1719): improve initial total price calculation

* feat: harmonize enter details total price to use one and the same function


Approved-by: Michael Zetterberg

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/Room/index.tsx

@@ -0,0 +1,305 @@
+import { cx } from "class-variance-authority"
+import { useIntl } from "react-intl"
+
+import { Button } from "@scandic-hotels/design-system/Button"
+import { Divider } from "@scandic-hotels/design-system/Divider"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import Modal from "@/components/Modal"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import { getMemberPrice, getPublicPrice } from "../utils"
+import Breakfast from "./Breakfast"
+
+import styles from "./room.module.css"
+
+import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
+import type { CurrencyEnum } from "@/types/enums/currency"
+import type { Room as RoomType } from "@/types/stores/enter-details"
+
+interface RoomProps {
+  room: RoomType
+  roomNumber: number
+  roomCount: number
+  isMember: boolean
+  isSpecialRate: boolean
+  nightsCount: number
+  defaultCurrency: CurrencyEnum
+}
+
+export default function Room({
+  room,
+  roomNumber,
+  roomCount,
+  isMember,
+  isSpecialRate,
+  nightsCount,
+  defaultCurrency,
+}: RoomProps) {
+  const intl = useIntl()
+  const adults = room.adults
+  const childrenInRoom = room.childrenInRoom
+
+  const childrenBeds = childrenInRoom?.reduce(
+    (acc, value) => {
+      const bedType = Number(value.bed)
+      if (bedType === ChildBedMapEnum.IN_ADULTS_BED) {
+        return acc
+      }
+      const count = acc.get(bedType) ?? 0
+      acc.set(bedType, count + 1)
+      return acc
+    },
+    new Map<ChildBedMapEnum, number>([
+      [ChildBedMapEnum.IN_CRIB, 0],
+      [ChildBedMapEnum.IN_EXTRA_BED, 0],
+    ])
+  )
+
+  const childBedCrib = childrenBeds?.get(ChildBedMapEnum.IN_CRIB)
+  const childBedExtraBed = childrenBeds?.get(ChildBedMapEnum.IN_EXTRA_BED)
+
+  const memberPrice = getMemberPrice(room.roomRate)
+  const publicPrice = getPublicPrice(room.roomRate)
+
+  const isFirstRoomMember = roomNumber === 1 && isMember
+  const isOrWillBecomeMember = !!(
+    room.guest.join ||
+    room.guest.membershipNo ||
+    isFirstRoomMember
+  )
+  const showMemberPrice = !!(isOrWillBecomeMember && memberPrice)
+  const showDiscounted = isSpecialRate || showMemberPrice
+
+  const adultsMsg = intl.formatMessage(
+    {
+      defaultMessage: "{totalAdults, plural, one {# adult} other {# adults}}",
+    },
+    { totalAdults: adults }
+  )
+
+  const guestsParts = [adultsMsg]
+  if (childrenInRoom?.length) {
+    const childrenMsg = intl.formatMessage(
+      {
+        defaultMessage:
+          "{totalChildren, plural, one {# child} other {# children}}",
+      },
+      { totalChildren: childrenInRoom.length }
+    )
+    guestsParts.push(childrenMsg)
+  }
+
+  let rateDetails = room.rateDetails
+  if (room.memberRateDetails) {
+    if (isMember || room.guest.join) {
+      rateDetails = room.memberRateDetails
+    }
+  }
+
+  const guests = guestsParts.join(", ")
+  const zeroPrice = formatPrice(intl, 0, defaultCurrency)
+
+  return (
+    <>
+      <div className={styles.room} data-testid={`summary-room-${roomNumber}`}>
+        <div>
+          {roomCount > 1 ? (
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <p className={styles.roomTitle}>
+                {intl.formatMessage(
+                  {
+                    defaultMessage: "Room {roomIndex}",
+                  },
+                  {
+                    roomIndex: roomNumber,
+                  }
+                )}
+              </p>
+            </Typography>
+          ) : null}
+          <div className={styles.entry}>
+            <div>
+              <Typography variant="Body/Paragraph/mdBold">
+                <p>{room.roomType}</p>
+              </Typography>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <div className={styles.additionalInformation}>
+                  <p>{guests}</p>
+                  <p>{room.cancellationText}</p>
+                </div>
+              </Typography>
+            </div>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <div className={styles.prices}>
+                <p
+                  className={cx(styles.price, {
+                    [styles.discounted]: showDiscounted,
+                  })}
+                >
+                  {showMemberPrice
+                    ? formatPrice(
+                        intl,
+                        memberPrice.amount,
+                        memberPrice.currency
+                      )
+                    : formatPrice(
+                        intl,
+                        room.roomPrice.perStay.local.price,
+                        room.roomPrice.perStay.local.currency,
+                        room.roomPrice.perStay.local.additionalPrice,
+                        room.roomPrice.perStay.local.additionalPriceCurrency
+                      )}
+                </p>
+                {showDiscounted && publicPrice ? (
+                  <s className={styles.strikeThroughRate}>
+                    {formatPrice(
+                      intl,
+                      publicPrice.amount,
+                      publicPrice.currency
+                    )}
+                  </s>
+                ) : null}
+              </div>
+            </Typography>
+          </div>
+
+          {rateDetails?.length ? (
+            <div className={styles.ctaWrapper}>
+              <Modal
+                trigger={
+                  <Button
+                    className={styles.termsButton}
+                    variant="Text"
+                    typography="Body/Supporting text (caption)/smBold"
+                    wrapping={false}
+                  >
+                    {intl.formatMessage({
+                      defaultMessage: "Rate details",
+                    })}
+                    <MaterialIcon
+                      icon="chevron_right"
+                      size={20}
+                      color="CurrentColor"
+                    />
+                  </Button>
+                }
+                title={room.cancellationText}
+              >
+                <div className={styles.terms}>
+                  {rateDetails.map((info) => (
+                    <Typography key={info} variant="Body/Paragraph/mdRegular">
+                      <p className={styles.termsText}>
+                        <MaterialIcon
+                          icon="check"
+                          color="Icon/Feedback/Success"
+                          size={20}
+                          className={styles.termsIcon}
+                        />
+                        {info}
+                      </p>
+                    </Typography>
+                  ))}
+                </div>
+              </Modal>
+            </div>
+          ) : null}
+        </div>
+
+        {room.roomFeatures
+          ? room.roomFeatures.map((feature) => (
+              <Typography key={feature.code} variant="Body/Paragraph/mdRegular">
+                <div className={styles.entry}>
+                  <p>{feature.description}</p>
+
+                  <div className={styles.prices}>
+                    <span className={styles.price}>
+                      {formatPrice(
+                        intl,
+                        feature.localPrice.price,
+                        feature.localPrice.currency
+                      )}
+                    </span>
+                  </div>
+                </div>
+              </Typography>
+            ))
+          : null}
+
+        {room.bedType ? (
+          <Typography variant="Body/Paragraph/mdRegular">
+            <div className={styles.entry}>
+              <p>{room.bedType.description}</p>
+
+              <div className={styles.prices}>
+                <span className={styles.price}>{zeroPrice}</span>
+              </div>
+            </div>
+          </Typography>
+        ) : null}
+
+        {childBedCrib ? (
+          <Typography variant="Body/Paragraph/mdRegular">
+            <div className={styles.entry}>
+              <div>
+                <p>
+                  {intl.formatMessage(
+                    {
+                      defaultMessage: "Crib (child) × {count}",
+                    },
+                    { count: childBedCrib }
+                  )}
+                </p>
+                <Typography variant="Body/Supporting text (caption)/smRegular">
+                  <p>
+                    {intl.formatMessage({
+                      defaultMessage: "Based on availability",
+                    })}
+                  </p>
+                </Typography>
+              </div>
+              <div className={styles.prices}>
+                <span className={styles.price}>
+                  {formatPrice(intl, 0, room.roomPrice.perStay.local.currency)}
+                </span>
+              </div>
+            </div>
+          </Typography>
+        ) : null}
+
+        {childBedExtraBed ? (
+          <Typography variant="Body/Paragraph/mdRegular">
+            <div className={styles.entry}>
+              <p>
+                {intl.formatMessage(
+                  {
+                    defaultMessage: "Extra bed (child) × {count}",
+                  },
+                  {
+                    count: childBedExtraBed,
+                  }
+                )}
+              </p>
+              <div className={styles.prices}>
+                <span className={styles.price}>
+                  {formatPrice(intl, 0, room.roomPrice.perStay.local.currency)}
+                </span>
+              </div>
+            </div>
+          </Typography>
+        ) : null}
+
+        <Breakfast
+          adults={room.adults}
+          breakfast={room.breakfast}
+          breakfastIncluded={room.breakfastIncluded}
+          guests={guests}
+          nights={nightsCount}
+        />
+      </div>
+
+      <Divider color="Border/Divider/Subtle" />
+    </>
+  )
+}

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/Room/room.module.css

@@ -0,0 +1,57 @@
+.room {
+  display: flex;
+  flex-direction: column;
+  gap: var(--Space-x15);
+  overflow-y: auto;
+  color: var(--Text-Default);
+}
+
+.roomTitle,
+.additionalInformation {
+  color: var(--Text-Secondary);
+}
+
+.terms {
+  margin-top: var(--Space-x3);
+  margin-bottom: var(--Space-x3);
+}
+
+.termsText:nth-child(n) {
+  display: flex;
+  align-items: center;
+  margin-bottom: var(--Space-x1);
+}
+
+.terms .termsIcon {
+  margin-right: var(--Space-x1);
+}
+
+.entry {
+  display: flex;
+  gap: var(--Space-x05);
+  justify-content: space-between;
+}
+
+.prices {
+  justify-items: flex-end;
+  flex-shrink: 0;
+  display: grid;
+  align-content: start;
+}
+
+.price {
+  color: var(--Text-Default);
+
+  &.discounted {
+    color: var(--Text-Accent-Primary);
+  }
+}
+
+.strikeThroughRate {
+  text-decoration: line-through;
+  color: var(--Text-Secondary);
+}
+
+.ctaWrapper {
+  margin-top: var(--Space-x15);
+}

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx

@@ -1,32 +1,30 @@
 "use client"
 
-import { Fragment } from "react"
+import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 import { useMediaQuery } from "usehooks-ts"
 
-import { Button } from "@scandic-hotels/design-system/Button"
 import { Divider } from "@scandic-hotels/design-system/Divider"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { dt } from "@/lib/dt"
 
 import BookingCodeChip from "@/components/BookingCodeChip"
 import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
+import { isBookingCodeRate } from "@/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/utils"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
-import Modal from "@/components/Modal"
 import Body from "@/components/TempDesignSystem/Text/Body"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"
 
-import Breakfast from "./Breakfast"
 import { mapToPrice } from "./mapToPrice"
+import Room from "./Room"
+import { getMemberPrice } from "./utils"
 
 import styles from "./ui.module.css"
 
-import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
-import type { RoomRate } from "@/types/components/hotelReservation/enterDetails/details"
 import type { EnterDetailsSummaryProps } from "@/types/components/hotelReservation/summary"
 
 export default function SummaryUI({
@@ -57,18 +55,6 @@ export default function SummaryUI({
     }
   }
 
-  function getMemberPrice(roomRate: RoomRate) {
-    if ("member" in roomRate && roomRate.member) {
-      return {
-        amount: roomRate.member.localPrice.pricePerStay,
-        currency: roomRate.member.localPrice.currency,
-        pricePerNight: roomRate.member.localPrice.pricePerNight,
-      }
-    }
-
-    return null
-  }
-
   const roomOneGuest = rooms[0].room.guest
   const showSignupPromo =
     rooms.length === 1 &&
@@ -85,10 +71,6 @@ export default function SummaryUI({
     "redemption" in roomOneRoomRate ||
     "voucher" in roomOneRoomRate
 
-  const isSameCurrency = totalPrice.requested
-    ? totalPrice.requested.currency === totalPrice.local.currency
-    : false
-
   const priceDetailsRooms = mapToPrice(rooms, isMember)
   const isAllCampaignRate = rooms.every(
     (room) => room.room.roomRate.rateDefinition.isCampaignRate
@@ -96,6 +78,10 @@ export default function SummaryUI({
   const isAllBreakfastIncluded = rooms.every(
     (room) => room.room.roomRate.rateDefinition.breakfastIncluded
   )
+  const containsBookingCodeRate = rooms.find(
+    (r) => r && isBookingCodeRate(r.room.roomRate)
+  )
+  const showDiscounted = containsBookingCodeRate || isMember
 
   return (
     <section className={styles.summary}>
@@ -127,306 +113,109 @@ export default function SummaryUI({
         />
       </header>
       <Divider color="Border/Divider/Subtle" />
-      {rooms.map(({ room }, idx) => {
-        const roomNumber = idx + 1
-        const adults = room.adults
-        const childrenInRoom = room.childrenInRoom
+      {rooms.map(({ room }, idx) => (
+        <Room
+          key={idx}
+          defaultCurrency={defaultCurrency}
+          room={room}
+          roomNumber={idx + 1}
+          roomCount={rooms.length}
+          isMember={isMember}
+          isSpecialRate={isSpecialRate}
+          nightsCount={nights}
+        />
+      ))}
 
-        const childrenBeds = childrenInRoom?.reduce(
-          (acc, value) => {
-            const bedType = Number(value.bed)
-            if (bedType === ChildBedMapEnum.IN_ADULTS_BED) {
-              return acc
-            }
-            const count = acc.get(bedType) ?? 0
-            acc.set(bedType, count + 1)
-            return acc
-          },
-          new Map<ChildBedMapEnum, number>([
-            [ChildBedMapEnum.IN_CRIB, 0],
-            [ChildBedMapEnum.IN_EXTRA_BED, 0],
-          ])
-        )
-
-        const childBedCrib = childrenBeds?.get(ChildBedMapEnum.IN_CRIB)
-        const childBedExtraBed = childrenBeds?.get(ChildBedMapEnum.IN_EXTRA_BED)
-
-        const memberPrice = getMemberPrice(room.roomRate)
-
-        const isFirstRoomMember = roomNumber === 1 && isMember
-        const isOrWillBecomeMember = !!(
-          room.guest.join ||
-          room.guest.membershipNo ||
-          isFirstRoomMember
-        )
-        const showMemberPrice = !!(isOrWillBecomeMember && memberPrice)
-
-        const adultsMsg = intl.formatMessage(
-          {
-            defaultMessage:
-              "{totalAdults, plural, one {# adult} other {# adults}}",
-          },
-          { totalAdults: adults }
-        )
-
-        const guestsParts = [adultsMsg]
-        if (childrenInRoom?.length) {
-          const childrenMsg = intl.formatMessage(
-            {
-              defaultMessage:
-                "{totalChildren, plural, one {# child} other {# children}}",
-            },
-            { totalChildren: childrenInRoom.length }
-          )
-          guestsParts.push(childrenMsg)
-        }
-
-        const guests = guestsParts.join(", ")
-
-        let rateDetails = room.rateDetails
-        if (room.memberRateDetails) {
-          if (isMember || room.guest.join) {
-            rateDetails = room.memberRateDetails
-          }
-        }
-
-        const zeroPrice = formatPrice(intl, 0, defaultCurrency)
-
-        return (
-          <Fragment key={idx}>
-            <div
-              className={styles.addOns}
-              data-testid={`summary-room-${roomNumber}`}
-            >
-              <div>
-                {rooms.length > 1 ? (
-                  <Body textTransform="bold">
-                    {intl.formatMessage(
-                      {
-                        defaultMessage: "Room {roomIndex}",
-                      },
-                      {
-                        roomIndex: roomNumber,
-                      }
-                    )}
-                  </Body>
-                ) : null}
-                <div className={styles.entry}>
-                  <Body color="uiTextHighContrast">{room.roomType}</Body>
-                  <Body color={showMemberPrice ? "red" : "uiTextHighContrast"}>
-                    {showMemberPrice
-                      ? formatPrice(
-                          intl,
-                          memberPrice.amount,
-                          memberPrice.currency
-                        )
-                      : formatPrice(
-                          intl,
-                          room.roomPrice.perStay.local.price,
-                          room.roomPrice.perStay.local.currency,
-                          room.roomPrice.perStay.local.additionalPrice,
-                          room.roomPrice.perStay.local.additionalPriceCurrency
-                        )}
-                  </Body>
-                </div>
-                <Caption color="uiTextMediumContrast">{guests}</Caption>
-                <Caption color="uiTextMediumContrast">
-                  {room.cancellationText}
-                </Caption>
-                {rateDetails ? (
-                  <Modal
-                    trigger={
-                      <Button
-                        variant="Text"
-                        typography="Body/Supporting text (caption)/smBold"
-                        wrapping={false}
-                      >
-                        {intl.formatMessage({
-                          defaultMessage: "Rate details",
-                        })}
-                        <MaterialIcon
-                          icon="chevron_right"
-                          size={20}
-                          color="CurrentColor"
-                        />
-                      </Button>
-                    }
-                    title={
-                      room.rateTitle ? room.rateTitle : room.cancellationText
-                    }
-                    subtitle={
-                      room.rateTitle ? room.cancellationText : undefined
-                    }
-                  >
-                    <div className={styles.terms}>
-                      {rateDetails.map((info) => {
-                        return (
-                          <Body
-                            key={info}
-                            color="uiTextHighContrast"
-                            className={styles.termsText}
-                          >
-                            <MaterialIcon
-                              icon="check"
-                              color="Icon/Feedback/Success"
-                              size={20}
-                              className={styles.termsIcon}
-                            />
-                            {info}
-                          </Body>
-                        )
-                      })}
-                    </div>
-                  </Modal>
-                ) : null}
-              </div>
-              {room.roomFeatures
-                ? room.roomFeatures.map((feature) => (
-                    <div className={styles.entry} key={feature.code}>
-                      <div>
-                        <Body color="uiTextHighContrast">
-                          {feature.description}
-                        </Body>
-                      </div>
-
-                      <Body color="uiTextHighContrast">
-                        {formatPrice(
-                          intl,
-                          feature.localPrice.price,
-                          feature.localPrice.currency
-                        )}
-                      </Body>
-                    </div>
-                  ))
-                : null}
-              {room.bedType ? (
-                <div className={styles.entry}>
-                  <Body color="uiTextHighContrast">
-                    {room.bedType.description}
-                  </Body>
-
-                  <Body color="uiTextHighContrast">{zeroPrice}</Body>
-                </div>
-              ) : null}
-              {childBedCrib ? (
-                <div className={styles.entry}>
-                  <div>
-                    <Body color="uiTextHighContrast">
-                      {intl.formatMessage(
-                        {
-                          defaultMessage: "Crib (child) × {count}",
-                        },
-                        { count: childBedCrib }
-                      )}
-                    </Body>
-                    <Caption color="uiTextMediumContrast">
-                      {intl.formatMessage({
-                        defaultMessage: "Based on availability",
-                      })}
-                    </Caption>
-                  </div>
-                  <Body color="uiTextHighContrast">{zeroPrice}</Body>
-                </div>
-              ) : null}
-              {childBedExtraBed ? (
-                <div className={styles.entry}>
-                  <div>
-                    <Body color="uiTextHighContrast">
-                      {intl.formatMessage(
-                        {
-                          defaultMessage: "Extra bed (child) × {count}",
-                        },
-                        {
-                          count: childBedExtraBed,
-                        }
-                      )}
-                    </Body>
-                  </div>
-                  <Body color="uiTextHighContrast">{zeroPrice}</Body>
-                </div>
-              ) : null}
-              <Breakfast
-                adults={room.adults}
-                breakfast={room.breakfast}
-                breakfastIncluded={room.breakfastIncluded}
-                guests={guests}
-                nights={nights}
-              />
-            </div>
-            <Divider color="Border/Divider/Subtle" />
-          </Fragment>
-        )
-      })}
-      <div className={styles.total}>
+      <div>
         <div className={styles.entry}>
           <div>
-            <Body>
-              {intl.formatMessage(
-                {
-                  defaultMessage: "<b>Total price</b> (incl VAT)",
-                },
-                { b: (str) => <b>{str}</b> }
-              )}
-            </Body>
-            <PriceDetailsModal
-              bookingCode={booking.bookingCode}
-              fromDate={booking.fromDate}
-              isCampaignRate={isAllCampaignRate}
-              rooms={priceDetailsRooms}
-              toDate={booking.toDate}
-              totalPrice={totalPrice}
-              vat={vat}
-              defaultCurrency={defaultCurrency}
-            />
-          </div>
-          <div>
-            <Body textTransform="bold" data-testid="total-price">
-              {formatPrice(
-                intl,
-                totalPrice.local.price,
-                totalPrice.local.currency,
-                totalPrice.local.additionalPrice,
-                totalPrice.local.additionalPriceCurrency
-              )}
-            </Body>
-            {totalPrice.local.regularPrice ? (
-              <Caption color="uiTextMediumContrast" striked={true}>
-                {formatPrice(
-                  intl,
-                  totalPrice.local.regularPrice,
-                  totalPrice.local.currency
-                )}
-              </Caption>
-            ) : null}
-            {totalPrice.requested && !isSpecialRate && !isSameCurrency && (
-              <Caption color="uiTextMediumContrast">
+            <Typography variant="Body/Paragraph/mdRegular">
+              <p>
                 {intl.formatMessage(
                   {
-                    defaultMessage: "Approx. {value}",
+                    defaultMessage: "<b>Total price</b> (incl VAT)",
                   },
                   {
-                    value: formatPrice(
-                      intl,
-                      totalPrice.requested.price,
-                      totalPrice.requested.currency
+                    b: (str) => (
+                      <Typography variant="Body/Paragraph/mdBold">
+                        <span>{str}</span>
+                      </Typography>
                     ),
                   }
                 )}
-              </Caption>
-            )}
+              </p>
+            </Typography>
+            {totalPrice.requested ? (
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p className={styles.approxPrice}>
+                  {intl.formatMessage(
+                    {
+                      defaultMessage: "Approx. {value}",
+                    },
+                    {
+                      value: formatPrice(
+                        intl,
+                        totalPrice.requested.price,
+                        totalPrice.requested.currency,
+                        totalPrice.requested.additionalPrice,
+                        totalPrice.requested.additionalPriceCurrency
+                      ),
+                    }
+                  )}
+                </p>
+              </Typography>
+            ) : null}
+          </div>
+          <div className={styles.prices}>
+            <Typography variant="Body/Paragraph/mdBold">
+              <span
+                className={cx(styles.price, {
+                  [styles.discounted]: showDiscounted,
+                })}
+                data-testid="total-price"
+              >
+                {formatPrice(
+                  intl,
+                  totalPrice.local.price,
+                  totalPrice.local.currency,
+                  totalPrice.local.additionalPrice,
+                  totalPrice.local.additionalPriceCurrency
+                )}
+              </span>
+            </Typography>
+            {showDiscounted && totalPrice.local.regularPrice ? (
+              <Typography variant="Body/Paragraph/mdRegular">
+                <s className={styles.strikeThroughRate}>
+                  {formatPrice(
+                    intl,
+                    totalPrice.local.regularPrice,
+                    totalPrice.local.currency
+                  )}
+                </s>
+              </Typography>
+            ) : null}
           </div>
         </div>
-        <BookingCodeChip
-          isCampaign={isAllCampaignRate}
-          bookingCode={booking.bookingCode}
-          isBreakfastIncluded={isAllBreakfastIncluded}
-          alignCenter
-        />
-        <Divider
-          className={styles.bottomDivider}
-          color="Border/Divider/Subtle"
-        />
+
+        <div className={styles.ctaWrapper}>
+          <PriceDetailsModal
+            bookingCode={booking.bookingCode}
+            defaultCurrency={defaultCurrency}
+            fromDate={booking.fromDate}
+            rooms={priceDetailsRooms}
+            toDate={booking.toDate}
+            totalPrice={totalPrice}
+            vat={vat}
+          />
+        </div>
       </div>
+      <BookingCodeChip
+        isCampaign={isAllCampaignRate}
+        bookingCode={booking.bookingCode}
+        isBreakfastIncluded={isAllBreakfastIncluded}
+        alignCenter
+      />
+      <Divider className={styles.bottomDivider} color="Border/Divider/Subtle" />
       {showSignupPromo && roomOneMemberPrice && !isMember ? (
         <SignupPromoDesktop
           memberPrice={roomOneMemberPrice}

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/mapToPrice.ts

@@ -10,14 +10,21 @@ export function mapToPrice(rooms: RoomState[], isMember: boolean) {
 
       const pkgsSum = sumPackages(room.roomFeatures)
 
+      const roomWithoutPrice = {
+        ...room,
+        packages: room.roomFeatures,
+        rateDefinition: {
+          isMemberRate: false,
+        },
+      }
+
       if ("corporateCheque" in room.roomRate) {
         if (
           room.roomRate.corporateCheque.localPrice.additionalPricePerStay ||
           pkgsSum.price
         ) {
           return {
-            ...room,
-            packages: room.roomFeatures,
+            ...roomWithoutPrice,
             price: {
               corporateCheque: {
                 ...room.roomRate.corporateCheque.localPrice,
@@ -29,8 +36,7 @@ export function mapToPrice(rooms: RoomState[], isMember: boolean) {
           }
         }
         return {
-          ...room,
-          packages: room.roomFeatures,
+          ...roomWithoutPrice,
           price: {
             corporateCheque: room.roomRate.corporateCheque.localPrice,
           },
@@ -43,8 +49,7 @@ export function mapToPrice(rooms: RoomState[], isMember: boolean) {
           pkgsSum.price
         ) {
           return {
-            ...room,
-            packages: room.roomFeatures,
+            ...roomWithoutPrice,
             price: {
               redemption: {
                 ...room.roomRate.redemption.localPrice,
@@ -56,8 +61,7 @@ export function mapToPrice(rooms: RoomState[], isMember: boolean) {
           }
         }
         return {
-          ...room,
-          packages: room.roomFeatures,
+          ...roomWithoutPrice,
           price: {
             redemption: room.roomRate.redemption.localPrice,
           },
@@ -66,8 +70,7 @@ export function mapToPrice(rooms: RoomState[], isMember: boolean) {
 
       if ("voucher" in room.roomRate) {
         return {
-          ...room,
-          packages: room.roomFeatures,
+          ...roomWithoutPrice,
           price: {
             voucher: room.roomRate.voucher,
           },
@@ -79,22 +82,35 @@ export function mapToPrice(rooms: RoomState[], isMember: boolean) {
         if ("member" in room.roomRate && room.roomRate.member) {
           if (pkgsSum.price) {
             return {
-              ...room,
-              packages: room.roomFeatures,
+              ...roomWithoutPrice,
+              rateDefinition: {
+                isMemberRate: true,
+              },
               price: {
                 regular: {
                   ...room.roomRate.member.localPrice,
                   pricePerNight: room.roomRate.member.localPrice.pricePerNight,
                   pricePerStay: room.roomRate.member.localPrice.pricePerStay,
+                  regularPricePerStay:
+                    (room.roomRate.public?.localPrice.pricePerStay ||
+                      room.roomRate.member.localPrice.pricePerStay) +
+                    pkgsSum.price,
                 },
               },
             }
           }
           return {
-            ...room,
-            packages: room.roomFeatures,
+            ...roomWithoutPrice,
+            rateDefinition: {
+              isMemberRate: true,
+            },
             price: {
-              regular: room.roomRate.member.localPrice,
+              regular: {
+                ...room.roomRate.member.localPrice,
+                regularPricePerStay:
+                  room.roomRate.public?.localPrice.pricePerStay ||
+                  room.roomRate.member.localPrice.pricePerStay,
+              },
             },
           }
         }
@@ -103,20 +119,14 @@ export function mapToPrice(rooms: RoomState[], isMember: boolean) {
       if ("public" in room.roomRate && room.roomRate.public) {
         if (pkgsSum.price) {
           return {
-            ...room,
-            packages: room.roomFeatures,
+            ...roomWithoutPrice,
             price: {
-              regular: {
-                ...room.roomRate.public.localPrice,
-                pricePerNight: room.roomRate.public.localPrice.pricePerNight,
-                pricePerStay: room.roomRate.public.localPrice.pricePerStay,
-              },
+              regular: room.roomRate.public.localPrice,
             },
           }
         }
         return {
-          ...room,
-          packages: room.roomFeatures,
+          ...roomWithoutPrice,
           price: {
             regular: room.roomRate.public.localPrice,
           },

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/ui.module.css

@@ -53,9 +53,32 @@
   gap: var(--Spacing-x-half);
   justify-content: space-between;
 }
-
-.entry > :last-child {
+.prices {
   justify-items: flex-end;
+  flex-shrink: 0;
+  display: grid;
+  align-content: start;
+}
+
+.price {
+  color: var(--Text-Default);
+
+  &.discounted {
+    color: var(--Text-Accent-Primary);
+  }
+}
+
+.strikeThroughRate {
+  text-decoration: line-through !important;
+  color: var(--Text-Secondary);
+}
+
+.approxPrice {
+  color: var(--Text-Secondary);
+}
+
+.ctaWrapper {
+  margin-top: var(--Space-x15);
 }
 
 .total {

apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/utils.ts

@@ -0,0 +1,25 @@
+import type { RoomRate } from "@/types/components/hotelReservation/enterDetails/details"
+
+export function getMemberPrice(roomRate: RoomRate) {
+  if ("member" in roomRate && roomRate.member) {
+    return {
+      amount: roomRate.member.localPrice.pricePerStay,
+      currency: roomRate.member.localPrice.currency,
+      pricePerNight: roomRate.member.localPrice.pricePerNight,
+    }
+  }
+
+  return null
+}
+
+export function getPublicPrice(roomRate: RoomRate) {
+  if ("public" in roomRate && roomRate.public) {
+    return {
+      amount: roomRate.public.localPrice.pricePerStay,
+      currency: roomRate.public.localPrice.currency,
+      pricePerNight: roomRate.public.localPrice.pricePerNight,
+    }
+  }
+
+  return null
+}