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
2025-06-13 12:01:16 +00:00
parent e1ede52014
commit 85acd3453d
52 changed files with 2403 additions and 1380 deletions
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/index.tsx
@@ -0,0 +1,193 @@
+"use client"
+import { cx } from "class-variance-authority"
+import { useIntl } from "react-intl"
+
+import { Divider } from "@scandic-hotels/design-system/Divider"
+import { IconButton } from "@scandic-hotels/design-system/IconButton"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { dt } from "@/lib/dt"
+import { useRatesStore } from "@/stores/select-rate"
+
+import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
+import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
+import useLang from "@/hooks/useLang"
+import { formatPrice } from "@/utils/numberFormatting"
+
+import { mapToPrice } from "../mapToPrice"
+import Room from "../Room"
+import { getMemberPrice, isBookingCodeRate } from "../utils"
+
+import styles from "./summaryContent.module.css"
+
+import type { SelectRateSummaryProps } from "@/types/components/hotelReservation/summary"
+
+export default function SummaryContent({
+  booking,
+  rooms,
+  totalPrice,
+  isMember,
+  vat,
+  toggleSummaryOpen,
+}: SelectRateSummaryProps) {
+  const { rateSummary, defaultCurrency } = useRatesStore((state) => ({
+    rateSummary: state.rateSummary,
+    defaultCurrency: state.defaultCurrency,
+  }))
+  const intl = useIntl()
+  const lang = useLang()
+
+  const diff = dt(booking.toDate).diff(booking.fromDate, "days")
+
+  const nights = intl.formatMessage(
+    {
+      defaultMessage: "{totalNights, plural, one {# night} other {# nights}}",
+    },
+    { totalNights: diff }
+  )
+
+  const filteredRooms = rooms.filter(
+    (room): room is NonNullable<typeof room> => !!room
+  )
+  const memberPrice =
+    rooms.length === 1 && rooms[0] ? getMemberPrice(rooms[0].roomRate) : null
+  const containsBookingCodeRate = rooms.find(
+    (r) => r && isBookingCodeRate(r.roomRate)
+  )
+  const showDiscounted = containsBookingCodeRate || isMember
+  const priceDetailsRooms = mapToPrice(rateSummary, booking.rooms, isMember)
+
+  return (
+    <section className={styles.summary}>
+      <header>
+        <div className={styles.headingWrapper}>
+          <Typography variant="Title/Subtitle/md">
+            <h3 className={styles.heading}>
+              {intl.formatMessage({
+                defaultMessage: "Booking summary",
+              })}
+            </h3>
+          </Typography>
+          <IconButton
+            className={styles.closeButton}
+            onPress={toggleSummaryOpen}
+            theme="Black"
+            style="Muted"
+          >
+            <MaterialIcon
+              icon="keyboard_arrow_down"
+              size={20}
+              color="CurrentColor"
+            />
+          </IconButton>
+        </div>
+        <Typography variant="Body/Paragraph/mdBold">
+          <p className={styles.dates}>
+            {dt(booking.fromDate).locale(lang).format("ddd, D MMM")}
+            <MaterialIcon icon="arrow_forward" size={15} color="CurrentColor" />
+            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+            {dt(booking.toDate).locale(lang).format("ddd, D MMM")} ({nights})
+          </p>
+        </Typography>
+      </header>
+
+      <Divider color="Border/Divider/Subtle" />
+
+      {filteredRooms.map((room, idx) => (
+        <Room
+          key={idx}
+          room={room}
+          roomNumber={idx + 1}
+          roomCount={rooms.length}
+          isMember={isMember}
+        />
+      ))}
+
+      <div>
+        <div className={styles.entry}>
+          <div>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <p>
+                {intl.formatMessage(
+                  {
+                    defaultMessage: "<b>Total price</b> (incl VAT)",
+                  },
+                  {
+                    b: (str) => (
+                      <Typography variant="Body/Paragraph/mdBold">
+                        <span>{str}</span>
+                      </Typography>
+                    ),
+                  }
+                )}
+              </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>
+
+        <PriceDetailsModal
+          bookingCode={booking.bookingCode}
+          defaultCurrency={defaultCurrency}
+          fromDate={booking.fromDate}
+          rooms={priceDetailsRooms}
+          toDate={booking.toDate}
+          totalPrice={totalPrice}
+          vat={vat}
+        />
+      </div>
+      {!isMember && memberPrice ? (
+        <SignupPromoDesktop memberPrice={memberPrice} badgeContent={"✌️"} />
+      ) : null}
+    </section>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/summaryContent.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Content/summaryContent.module.css
@@ -0,0 +1,59 @@
+.summary {
+  border-radius: var(--Corner-radius-lg);
+  display: grid;
+  gap: var(--Space-x2);
+  padding: var(--Space-x3);
+}
+
+.headingWrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+}
+
+.heading {
+  color: var(--Text-Default);
+}
+
+.closeButton {
+  margin-top: -10px; /* Compensate for padding of the button */
+  margin-right: -10px; /* Compensate for padding of the button */
+}
+
+.dates {
+  display: flex;
+  align-items: center;
+  gap: var(--Space-x1);
+  justify-content: flex-start;
+  color: var(--Text-Accent-Secondary);
+}
+
+.entry {
+  display: flex;
+  gap: var(--Space-x05);
+  justify-content: space-between;
+  margin-bottom: var(--Space-x15);
+}
+
+.prices {
+  justify-items: flex-end;
+  flex-shrink: 0;
+  display: grid;
+}
+
+.price {
+  color: var(--Text-Default);
+
+  &.discounted {
+    color: var(--Text-Accent-Primary);
+  }
+}
+
+.strikeThroughRate {
+  text-decoration: line-through;
+  color: var(--Text-Secondary);
+}
+
+.approxPrice {
+  color: var(--Text-Secondary);
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/index.tsx
@@ -0,0 +1,277 @@
+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, isBookingCodeRate } from "../utils"
+
+import styles from "./room.module.css"
+
+import { ChildBedMapEnum } from "@/types/components/bookingWidget/enums"
+import type {
+  RoomPrice,
+  RoomRate,
+} from "@/types/components/hotelReservation/enterDetails/details"
+import type { Child } from "@/types/components/hotelReservation/selectRate/selectRate"
+import type { Packages } from "@/types/requests/packages"
+
+interface RoomProps {
+  room: {
+    adults: number
+    childrenInRoom: Child[] | undefined
+    roomType: string
+    roomPrice: RoomPrice
+    roomRate: RoomRate
+    rateDetails: string[] | undefined
+    cancellationText: string
+    packages?: Packages
+  }
+  roomNumber: number
+  roomCount: number
+  isMember: boolean
+}
+
+export default function Room({
+  room,
+  roomNumber,
+  roomCount,
+  isMember,
+}: 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 showMemberPrice = !!(isMember && memberPrice && roomNumber === 1)
+  const showDiscounted = isBookingCodeRate(room.roomRate) || 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)
+  }
+
+  const roomPackages = room.packages
+
+  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>{guestsParts.join(", ")}</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 && room.roomPrice.perStay.local.price ? (
+                  <s className={styles.strikeThroughRate}>
+                    {formatPrice(
+                      intl,
+                      room.roomPrice.perStay.local.price,
+                      room.roomPrice.perStay.local.currency
+                    )}
+                  </s>
+                ) : null}
+              </div>
+            </Typography>
+          </div>
+          {room.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}>
+                  {room.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>
+
+        {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}>
+              <div>
+                <p>
+                  {intl.formatMessage(
+                    {
+                      defaultMessage: "Extra bed (child) × {count}",
+                    },
+                    {
+                      count: childBedExtraBed,
+                    }
+                  )}
+                </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}
+        {roomPackages?.map((pkg) => (
+          <Typography key={pkg.code} variant="Body/Paragraph/mdRegular">
+            <div className={styles.entry}>
+              <p>{pkg.description}</p>
+              <div className={styles.prices}>
+                <span className={styles.price}>
+                  {formatPrice(
+                    intl,
+                    pkg.localPrice.price,
+                    pkg.localPrice.currency
+                  )}
+                </span>
+              </div>
+            </div>
+          </Typography>
+        ))}
+      </div>
+      <Divider color="Border/Divider/Subtle" />
+    </>
+  )
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Room/room.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/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);
+}
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
@@ -19,8 +19,8 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import useLang from "@/hooks/useLang"
 import { formatPrice } from "@/utils/numberFormatting"

-import { isBookingCodeRate } from "./isBookingCodeRate"
 import { mapToPrice } from "./mapToPrice"
+import { isBookingCodeRate } from "./utils"

 import styles from "./summary.module.css"

--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/index.tsx
@@ -1,18 +1,20 @@
 "use client"
+import { cx } from "class-variance-authority"
 import { useEffect, useRef, useState } from "react"
+import { Button as ButtonRAC } from "react-aria-components"
 import { useIntl } from "react-intl"

+import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { useRatesStore } from "@/stores/select-rate"

-import SignupPromoMobile from "@/components/HotelReservation/SignupPromo/Mobile"
-import Button from "@/components/TempDesignSystem/Button"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { formatPrice } from "@/utils/numberFormatting"

-import { isBookingCodeRate } from "./isBookingCodeRate"
+import SummaryContent from "./Content"
 import { mapRate } from "./mapRate"
-import Summary from "./Summary"
+import { isBookingCodeRate } from "./utils"

 import styles from "./mobileSummary.module.css"

@@ -23,7 +25,6 @@ export default function MobileSummary({
  isAllRoomsSelected,
  isUserLoggedIn,
  totalPriceToShow,
-  showMemberDiscountBanner,
 }: MobileSummaryProps) {
  const intl = useIntl()
  const scrollY = useRef(0)
@@ -62,6 +63,7 @@ export default function MobileSummary({
    return () => {
      document.body.style.position = ""
      document.body.style.top = ""
+      document.body.style.width = ""
    }
  }, [isSummaryOpen])

@@ -82,50 +84,37 @@ export default function MobileSummary({
  const showDiscounted = containsBookingCodeRate || isUserLoggedIn

  return (
-    <>
-      {isSummaryOpen && (
-        <div
-          className={styles.overlay}
-          role="presentation"
-          aria-hidden="true"
-          onClick={toggleSummaryOpen}
-        />
-      )}
-      {showMemberDiscountBanner ? (
-        <div className={styles.signupPromoWrapper}>
-          <SignupPromoMobile />
+    <div className={styles.wrapper} data-open={isSummaryOpen}>
+      <div className={styles.content}>
+        <div className={styles.summaryAccordion}>
+          <SummaryContent
+            booking={booking}
+            rooms={rooms}
+            isMember={isUserLoggedIn}
+            totalPrice={totalPriceToShow}
+            vat={vat}
+            toggleSummaryOpen={toggleSummaryOpen}
+          />
        </div>
-      ) : null}
-      <div className={styles.wrapper} data-open={isSummaryOpen}>
-        <div className={styles.content}>
-          <div className={styles.summaryAccordion}>
-            <Summary
-              booking={booking}
-              rooms={rooms}
-              isMember={isUserLoggedIn}
-              totalPrice={totalPriceToShow}
-              vat={vat}
-              toggleSummaryOpen={toggleSummaryOpen}
-            />
-          </div>
-        </div>
-        <div className={styles.bottomSheet}>
-          <button
-            data-open={isSummaryOpen}
-            onClick={(e) => {
-              e.preventDefault()
-              toggleSummaryOpen()
-            }}
-            className={styles.priceDetailsButton}
-          >
-            <Caption>
+      </div>
+      <div className={styles.bottomSheet}>
+        <ButtonRAC
+          data-open={isSummaryOpen}
+          onPress={toggleSummaryOpen}
+          className={styles.priceDetailsButton}
+        >
+          <Typography variant="Body/Supporting text (caption)/smRegular">
+            <span className={styles.priceLabel}>
              {intl.formatMessage({
                defaultMessage: "Total price",
              })}
-            </Caption>
-            <Subtitle
-              color={showDiscounted ? "red" : "uiTextHighContrast"}
-              className={styles.wrappedText}
+            </span>
+          </Typography>
+          <Typography variant="Title/Subtitle/lg">
+            <span
+              className={cx(styles.price, {
+                [styles.discounted]: showDiscounted,
+              })}
            >
              {formatPrice(
                intl,
@@ -134,27 +123,48 @@ export default function MobileSummary({
                totalPriceToShow.local.additionalPrice,
                totalPriceToShow.local.additionalPriceCurrency
              )}
-            </Subtitle>
-            <Caption color="baseTextHighContrast" type="underline">
-              {intl.formatMessage({
-                defaultMessage: "See details",
-              })}
-            </Caption>
-          </button>
-          <Button
-            intent="primary"
-            theme="base"
-            size="large"
-            type="submit"
-            fullWidth
-            disabled={!isAllRoomsSelected}
-          >
-            {intl.formatMessage({
-              defaultMessage: "Continue",
-            })}
-          </Button>
-        </div>
+            </span>
+          </Typography>
+          {showDiscounted && totalPriceToShow.local.regularPrice ? (
+            <Typography variant="Body/Paragraph/mdRegular">
+              <s className={styles.strikeThroughRate}>
+                {formatPrice(
+                  intl,
+                  totalPriceToShow.local.regularPrice,
+                  totalPriceToShow.local.currency
+                )}
+              </s>
+            </Typography>
+          ) : null}
+
+          <Typography variant="Body/Supporting text (caption)/smBold">
+            <span className={styles.seeDetails}>
+              <span>
+                {intl.formatMessage({
+                  defaultMessage: "See details",
+                })}
+              </span>
+              <MaterialIcon
+                icon="chevron_right"
+                color="CurrentColor"
+                size={20}
+              />
+            </span>
+          </Typography>
+        </ButtonRAC>
+        <Button
+          variant="Primary"
+          color="Primary"
+          size="Large"
+          type="submit"
+          typography="Body/Paragraph/mdBold"
+          isDisabled={!isAllRoomsSelected}
+        >
+          {intl.formatMessage({
+            defaultMessage: "Continue",
+          })}
+        </Button>
      </div>
-    </>
+    </div>
  )
 }
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/mapToPrice.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/mapToPrice.ts
@@ -34,7 +34,12 @@ export function mapToPrice(
        const onlyMemberRate = !room.product.public && memberRate
        if ((isUserLoggedIn && isMainRoom && memberRate) || onlyMemberRate) {
          price = {
-            regular: memberRate.localPrice,
+            regular: {
+              ...memberRate.localPrice,
+              regularPricePerStay:
+                room.product.public?.localPrice.pricePerStay ||
+                memberRate.localPrice.pricePerStay,
+            },
          }
        } else if (room.product.public) {
          price = {
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/mobileSummary.module.css
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/mobileSummary.module.css
@@ -1,13 +1,30 @@
 .wrapper {
  position: relative;
  display: grid;
-  grid-template-rows: 0fr 7.5em;
-
-  transition: 0.5s ease-in-out;
+  grid-template-rows: 0fr auto;
+  transition: all 0.5s ease-in-out;
  border-top: 1px solid var(--Base-Border-Subtle);
  background: var(--Base-Surface-Primary-light-Normal);
  align-content: end;
  z-index: var(--default-modal-z-index);
+
+  &[data-open="true"] {
+    grid-template-rows: 1fr auto;
+
+    .bottomSheet {
+      grid-template-columns: 0fr auto;
+    }
+
+    .priceDetailsButton {
+      opacity: 0;
+      height: 0;
+    }
+  }
+
+  &[data-open="false"] .priceDetailsButton {
+    opacity: 1;
+    height: auto;
+  }
 }

 .signupPromoWrapper {
@@ -28,46 +45,21 @@
 .bottomSheet {
  display: grid;
  grid-template-columns: 1fr 1fr;
-  padding: var(--Spacing-x2) 0 var(--Spacing-x5);
+  padding: var(--Space-x2) var(--Space-x3) var(--Space-x5);
  align-items: flex-start;
-  transition: 0.5s ease-in-out;
-  max-width: var(--max-width-page);
-  width: 100%;
-  margin: 0 auto;
+  transition: all 0.5s ease-in-out;
+  width: 100vw;
 }

 .priceDetailsButton {
-  display: block;
-  border: none;
-  background: none;
+  border-width: 0;
+  background-color: transparent;
  text-align: start;
-  transition: padding 0.5s ease-in-out;
  cursor: pointer;
-  white-space: nowrap;
  padding: 0;
-}
-
-.wrapper[data-open="true"] {
-  grid-template-rows: 1fr 7.5em;
-}
-
-.wrapper[data-open="true"] .bottomSheet {
-  grid-template-columns: 0fr auto;
-}
-
-.wrapper[data-open="true"] .priceDetailsButton {
-  animation: fadeOut 0.3s ease-out;
-  opacity: 0;
-  padding: 0;
-}
-
-.wrapper[data-open="false"] .priceDetailsButton {
-  animation: fadeIn 0.8s ease-in;
-  opacity: 1;
-}
-
-.priceDetailsButton {
+  display: grid;
  overflow: hidden;
+  transition: all 0.3s ease-in-out;
 }

 .content {
@@ -84,30 +76,33 @@
  z-index: 10;
 }

-.wrappedText {
-  white-space: normal;
+.priceLabel {
+  color: var(--Text-Default);
+}
+
+.price {
+  color: var(--Text-Default);
+
+  &.discounted {
+    color: var(--Text-Accent-Primary);
+  }
+}
+
+.strikeThroughRate {
+  text-decoration: line-through;
+  color: var(--Text-Secondary);
+}
+
+.seeDetails {
+  margin-top: var(--Space-x15);
+  display: flex;
+  gap: var(--Space-x1);
+  align-items: center;
+  color: var(--Component-Button-Brand-Secondary-On-fill-Default);
 }

@media screen and (min-width: 768px) {
  .bottomSheet {
-    padding: var(--Spacing-x2) 0 var(--Spacing-x7);
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
+    padding: var(--Space-x2) 0 var(--Space-x7);
  }
 }
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/isBookingCodeRate.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/isBookingCodeRate.ts
@@ -1,6 +1,19 @@
+import type { RoomRate } from "@/types/components/hotelReservation/enterDetails/details"
 import { RateTypeEnum } from "@/types/enums/rateType"
 import type { Product } from "@/types/trpc/routers/hotel/roomAvailability"

+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 isBookingCodeRate(product: Product) {
  if (
    "corporateCheque" in product ||
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/index.tsx
@@ -188,6 +188,8 @@ export default function RateSummary() {
    mainRoomCurrency = rateProduct.public.localPrice.currency
  }

+  const showStrikedThroughPrice = bookingCode || isUserLoggedIn
+
  // attribute data-footer-spacing used to add spacing
  // beneath footer to be able to show entire footer upon
  // scrolling down to the bottom of the page
@@ -338,7 +340,8 @@ export default function RateSummary() {
                    totalPriceToShow.local.additionalPriceCurrency
                  )}
                </Subtitle>
-                {bookingCode && totalPriceToShow.local.regularPrice && (
+                {showStrikedThroughPrice &&
+                  totalPriceToShow.local.regularPrice ? (
                  <Caption
                    textAlign="right"
                    color="uiTextMediumContrast"
@@ -350,7 +353,7 @@ export default function RateSummary() {
                      totalPriceToShow.local.currency
                    )}
                  </Caption>
-                )}
+                ) : null}
                {totalPriceToShow.requested ? (
                  <Body color="uiTextMediumContrast">
                    {intl.formatMessage(
@@ -410,7 +413,6 @@ export default function RateSummary() {
            isAllRoomsSelected={isAllRoomsSelected}
            isUserLoggedIn={isUserLoggedIn}
            totalPriceToShow={totalPriceToShow}
-            showMemberDiscountBanner={showMemberDiscountBanner}
          />
        </div>
      </div>
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/utils.ts
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/utils.ts
@@ -3,6 +3,7 @@ import { sumPackages } from "@/components/HotelReservation/utils"
 import type { Price } from "@/types/components/hotelReservation/price"
 import type { Rate } from "@/types/components/hotelReservation/selectRate/selectRate"
 import { CurrencyEnum } from "@/types/enums/currency"
+import { RateTypeEnum } from "@/types/enums/rateType"
 import type { Packages } from "@/types/requests/packages"
 import type { RedemptionProduct } from "@/types/trpc/routers/hotel/roomAvailability"

@@ -19,8 +20,10 @@ export function calculateTotalPrice(
      const roomNr = idx + 1
      const isMainRoom = roomNr === 1
      let rate
+      let publicRate
      if (isUserLoggedIn && isMainRoom && room.product.member) {
        rate = room.product.member
+        publicRate = room.product.public
      } else if (room.product.public) {
        rate = room.product.public
      }
@@ -44,10 +47,16 @@ export function calculateTotalPrice(
      total.local.price =
        total.local.price + rate.localPrice.pricePerStay + packagesPrice.local

-      if (rate.localPrice.regularPricePerStay) {
+      if (rate.rateType === RateTypeEnum.Regular && publicRate) {
        total.local.regularPrice =
          (total.local.regularPrice || 0) +
-          rate.localPrice.regularPricePerStay +
+          publicRate.localPrice.pricePerStay +
+          packagesPrice.local
+      } else {
+        total.local.regularPrice =
+          (total.local.regularPrice || 0) +
+          (rate.localPrice.regularPricePerStay ||
+            rate.localPrice.pricePerStay) +
          packagesPrice.local
      }

--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/SelectedRoomPanel/index.tsx
@@ -87,7 +87,9 @@ export default function SelectedRoomPanel() {
    (total, pkg) => total + pkg.localPrice.totalPrice,
    0
  )
-  const selectedPackagesPricePerNight = selectedPackagesPrice / nights
+  const selectedPackagesPricePerNight = Math.ceil(
+    selectedPackagesPrice / nights
+  )

  const night = intl.formatMessage({
    defaultMessage: "night",
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/index.tsx
@@ -5,13 +5,12 @@ import { Typography } from "@scandic-hotels/design-system/Typography"

 import { useRoomContext } from "@/contexts/SelectRate/Room"

-import BookingCodeFilter from "./BookingCodeFilter"
+import { RemoveBookingCodeButton } from "./RemoveBookingCodeButton/RemoveBookingCodeButton"
 import RoomPackageFilter from "./RoomPackageFilter"

 import styles from "./roomsHeader.module.css"

 import { AvailabilityEnum } from "@/types/components/hotelReservation/selectHotel/selectHotel"
-import { RemoveBookingCodeButton } from "./RemoveBookingCodeButton/RemoveBookingCodeButton"

 export default function RoomsHeader() {
  const { isFetchingPackages, rooms, totalRooms } = useRoomContext()
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Regular.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/Regular.tsx
@@ -78,9 +78,9 @@ export default function Regular({
    const isMainRoomLoggedInWithoutMember =
      isMainRoomAndLoggedIn && !product.member
    const noRateAvailable = !product.member && !product.public
-    const hideStandardPrice = isMainRoomAndLoggedIn && !!member
+    const isMemberRateActive = isMainRoomAndLoggedIn && !!member
    const isNotLoggedInAndOnlyMemberRate = !isUserLoggedIn && !standard
-    const rateCode = hideStandardPrice ? member.rateCode : standard?.rateCode
+    const rateCode = isMemberRateActive ? member.rateCode : standard?.rateCode
    if (
      noRateAvailable ||
      isMainRoomLoggedInWithoutMember ||
@@ -133,10 +133,13 @@ export default function Regular({

    let approximateStandardRatePrice = null
    if (standardPricePerNight) {
+      const standardPriceUnit = isMemberRateActive
+        ? standard!.localPrice.currency
+        : `${standard!.localPrice.currency}/${night}`
      rates.rate = {
        label: standardPriceMsg,
        price: standardPricePerNight.totalPrice,
-        unit: `${standard!.localPrice.currency}/${night}`,
+        unit: standardPriceUnit,
      }

      if (standardPricePerNight.totalRequestedPrice && !isUserLoggedIn) {
@@ -194,7 +197,7 @@ export default function Regular({
        key={product.rate}
        approximateRate={approximateRate}
        handleChange={() => handleSelectRate(product)}
-        hidePublicRate={hideStandardPrice}
+        isMemberRateActive={isMemberRateActive}
        isSelected={isSelected}
        name={`rateCode-${roomNr}-${rateCode}`}
        paymentTerm={rateTitles[product.rate].paymentTerm}