Merged in fix/remove-old-select-rate (pull request #2647)

Fix/remove old select rate

* remove old select-rate

* Fix imports

* renamed SelectRate2 -> SelectRate

apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx

@@ -0,0 +1,347 @@
+import { useIntl } from "react-intl"
+
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
+import Body from "@scandic-hotels/design-system/Body"
+import Caption from "@scandic-hotels/design-system/Caption"
+import Footnote from "@scandic-hotels/design-system/Footnote"
+import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import Subtitle from "@scandic-hotels/design-system/Subtitle"
+import { RateEnum } from "@scandic-hotels/trpc/enums/rate"
+
+import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
+import { useIsUserLoggedIn } from "@/hooks/useIsUserLoggedIn"
+
+import { isBookingCodeRate } from "./utils"
+
+import styles from "./rateSummary.module.css"
+
+import type { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+import type { SelectedRate } from "@/contexts/SelectRate/types"
+
+export function DesktopSummary({
+  input,
+  selectedRates,
+  isSubmitting,
+  bookingCode,
+}: {
+  selectedRates: ReturnType<typeof useSelectRateContext>["selectedRates"]
+  isSubmitting: boolean
+  input: ReturnType<typeof useSelectRateContext>["input"]
+  bookingCode: string
+}) {
+  const intl = useIntl()
+  const isUserLoggedIn = useIsUserLoggedIn()
+
+  if (!selectedRates.totalPrice) {
+    return null
+  }
+
+  const hasMemberRates = selectedRates.rates.some(
+    (rate) => rate && "member" in rate && rate.member
+  )
+  const showMemberDiscountBanner = hasMemberRates && !isUserLoggedIn
+
+  const totalNights = intl.formatMessage(
+    {
+      defaultMessage: "{totalNights, plural, one {# night} other {# nights}}",
+    },
+    { totalNights: input.nights }
+  )
+  const totalAdults = intl.formatMessage(
+    {
+      defaultMessage: "{totalAdults, plural, one {# adult} other {# adults}}",
+    },
+    {
+      totalAdults:
+        input.data?.booking.rooms.reduce((acc, room) => acc + room.adults, 0) ??
+        0,
+    }
+  )
+  const childrenInOneOrMoreRooms = input.data?.booking.rooms.some(
+    (room) => room.childrenInRoom?.length
+  )
+  const childrenInroom = intl.formatMessage(
+    {
+      defaultMessage:
+        "{totalChildren, plural, one {# child} other {# children}}",
+    },
+    {
+      totalChildren: input.data?.booking.rooms.reduce(
+        (acc, room) => acc + (room.childrenInRoom?.length ?? 0),
+        0
+      ),
+    }
+  )
+
+  const totalChildren = childrenInOneOrMoreRooms ? `, ${childrenInroom}` : ""
+  const totalRooms = intl.formatMessage(
+    {
+      defaultMessage: "{totalRooms, plural, one {# room} other {# rooms}}",
+    },
+    { totalRooms: input.roomCount }
+  )
+  const summaryPriceText = `${totalNights}, ${totalAdults}${totalChildren}, ${totalRooms}`
+  const isAllRoomsSelected = selectedRates.state === "ALL_SELECTED"
+
+  const showDiscounted =
+    isUserLoggedIn || selectedRates.rates.some(isBookingCodeRate)
+
+  const mainRoomRate = selectedRates.rates.at(0)
+  let mainRoomCurrency = getRoomCurrency(mainRoomRate)
+
+  const totalRegularPrice = selectedRates.totalPrice.local?.regularPrice
+    ? selectedRates.totalPrice.local.regularPrice
+    : 0
+  const isTotalRegularPriceGreaterThanPrice =
+    totalRegularPrice > selectedRates.totalPrice.local.price
+  const showStrikedThroughPrice =
+    (!!bookingCode || isUserLoggedIn) && isTotalRegularPriceGreaterThanPrice
+
+  return (
+    <>
+      <div className={styles.summaryText}>
+        {selectedRates.rates.map((room, index) => {
+          return (
+            <RateSummary
+              key={index}
+              room={room}
+              roomIndex={index}
+              isMultiRoom={selectedRates.rates.length > 1}
+            />
+          )
+        })}
+      </div>
+      <div className={styles.summaryPriceContainer}>
+        {showMemberDiscountBanner && (
+          <div className={styles.promoContainer}>
+            <SignupPromoDesktop
+              memberPrice={{
+                amount: selectedRates.rates.reduce((total, rate) => {
+                  if (!rate) {
+                    return total
+                  }
+
+                  const memberExists = "member" in rate && rate.member
+                  const publicExists = "public" in rate && rate.public
+                  if (!memberExists && !publicExists) {
+                    return total
+                  }
+                  const price =
+                    rate.member?.localPrice.pricePerStay ||
+                    rate.public?.localPrice.pricePerStay
+                  if (!price) {
+                    return total
+                  }
+                  const selectedPackagesPrice =
+                    rate.roomInfo.selectedPackages.reduce(
+                      (acc, pkg) => acc + pkg.localPrice.totalPrice,
+                      0
+                    )
+                  return total + price + selectedPackagesPrice
+                }, 0),
+                currency: mainRoomCurrency ?? "",
+              }}
+            />
+          </div>
+        )}
+        <div className={styles.summaryPriceTextDesktop}>
+          <Body>
+            {intl.formatMessage(
+              {
+                defaultMessage: "<b>Total price</b> (incl VAT)",
+              },
+              { b: (str) => <b>{str}</b> }
+            )}
+          </Body>
+          <Caption color="uiTextMediumContrast">{summaryPriceText}</Caption>
+        </div>
+        <div className={styles.summaryPrice}>
+          <div className={styles.summaryPriceTextDesktop}>
+            <Subtitle
+              color={showDiscounted ? "red" : "uiTextHighContrast"}
+              textAlign="right"
+            >
+              {formatPrice(
+                intl,
+                selectedRates.totalPrice.local.price,
+                selectedRates.totalPrice.local.currency,
+                selectedRates.totalPrice.local.additionalPrice,
+                selectedRates.totalPrice.local.additionalPriceCurrency
+              )}
+            </Subtitle>
+            {showStrikedThroughPrice &&
+              selectedRates.totalPrice.local.regularPrice && (
+                <Caption
+                  textAlign="right"
+                  color="uiTextMediumContrast"
+                  striked={true}
+                >
+                  {formatPrice(
+                    intl,
+                    selectedRates.totalPrice.local.regularPrice,
+                    selectedRates.totalPrice.local.currency
+                  )}
+                </Caption>
+              )}
+            {selectedRates.totalPrice.requested ? (
+              <Body color="uiTextMediumContrast">
+                {intl.formatMessage(
+                  {
+                    defaultMessage: "Approx. {value}",
+                  },
+                  {
+                    value: formatPrice(
+                      intl,
+                      selectedRates.totalPrice.requested.price,
+                      selectedRates.totalPrice.requested.currency,
+                      selectedRates.totalPrice.requested.additionalPrice,
+                      selectedRates.totalPrice.requested.additionalPriceCurrency
+                    ),
+                  }
+                )}
+              </Body>
+            ) : null}
+          </div>
+          <div className={styles.summaryPriceTextMobile}>
+            <Caption color="uiTextHighContrast">
+              {intl.formatMessage({
+                defaultMessage: "Total price",
+              })}
+            </Caption>
+            <Subtitle color={showDiscounted ? "red" : "uiTextHighContrast"}>
+              {formatPrice(
+                intl,
+                selectedRates.totalPrice.local.price,
+                selectedRates.totalPrice.local.currency,
+                selectedRates.totalPrice.local.additionalPrice,
+                selectedRates.totalPrice.local.additionalPriceCurrency
+              )}
+            </Subtitle>
+            <Footnote
+              color="uiTextMediumContrast"
+              className={styles.summaryPriceTextMobile}
+            >
+              {summaryPriceText}
+            </Footnote>
+          </div>
+          <Button
+            className={styles.continueButton}
+            disabled={!isAllRoomsSelected || isSubmitting}
+            theme="base"
+            type="submit"
+          >
+            {intl.formatMessage({
+              defaultMessage: "Continue",
+            })}
+          </Button>
+        </div>
+      </div>
+    </>
+  )
+}
+
+function RateSummary({
+  roomIndex,
+  room,
+  isMultiRoom,
+}: {
+  room: SelectedRate | undefined
+  roomIndex: number
+  isMultiRoom: boolean
+}) {
+  const intl = useIntl()
+  const getRateDetails = useRateDetails()
+
+  if (!room || !room.isSelected) {
+    return (
+      <div key={`unselected-${roomIndex}`}>
+        <Subtitle color="uiTextPlaceholder">
+          {intl.formatMessage(
+            {
+              defaultMessage: "Room {roomIndex}",
+            },
+            { roomIndex: roomIndex + 1 }
+          )}
+        </Subtitle>
+        <Body color="uiTextPlaceholder">
+          {intl.formatMessage({
+            defaultMessage: "Select room",
+          })}
+        </Body>
+      </div>
+    )
+  }
+
+  return (
+    <div key={roomIndex}>
+      {isMultiRoom ? (
+        <>
+          <Subtitle color="uiTextHighContrast">
+            {intl.formatMessage(
+              {
+                defaultMessage: "Room {roomIndex}",
+              },
+              { roomIndex: roomIndex + 1 }
+            )}
+          </Subtitle>
+          <Body color="uiTextMediumContrast">{room.roomInfo.roomType}</Body>
+          <Caption color="uiTextMediumContrast">
+            {getRateDetails(room.rate)}
+          </Caption>
+        </>
+      ) : (
+        <>
+          <Subtitle color="uiTextHighContrast">
+            {room.roomInfo.roomType}
+          </Subtitle>
+          <Body color="uiTextMediumContrast">{getRateDetails(room.rate)}</Body>
+        </>
+      )}
+    </div>
+  )
+}
+
+function useRateDetails() {
+  const intl = useIntl()
+  const freeCancelation = intl.formatMessage({
+    defaultMessage: "Free cancellation",
+  })
+  const nonRefundable = intl.formatMessage({
+    defaultMessage: "Non-refundable",
+  })
+  const freeBooking = intl.formatMessage({
+    defaultMessage: "Free rebooking",
+  })
+  const payLater = intl.formatMessage({
+    defaultMessage: "Pay later",
+  })
+  const payNow = intl.formatMessage({
+    defaultMessage: "Pay now",
+  })
+
+  return (rate: RateEnum) => {
+    switch (rate) {
+      case RateEnum.change:
+        return `${freeBooking}, ${payNow}`
+      case RateEnum.flex:
+        return `${freeCancelation}, ${payLater}`
+      case RateEnum.save:
+      default:
+        return `${nonRefundable}, ${payNow}`
+    }
+  }
+}
+
+function getRoomCurrency(rate: SelectedRate | undefined) {
+  if (!rate) {
+    return null
+  }
+
+  if ("member" in rate && rate.member?.localPrice) {
+    return rate.member.localPrice.currency
+  }
+
+  if ("public" in rate && rate.public?.localPrice) {
+    return rate.public.localPrice.currency
+  }
+}

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

@@ -2,6 +2,7 @@
 import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
+import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
 import { longDateFormat } from "@scandic-hotels/common/constants/dateFormats"
 import { dt } from "@scandic-hotels/common/dt"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
@@ -10,59 +11,64 @@ 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 { useRatesStore } from "@/stores/select-rate"
-
 import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
 import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+import useRateTitles from "@/hooks/booking/useRateTitles"
 import useLang from "@/hooks/useLang"
 
-import { mapToPrice } from "../mapToPrice"
+import { isBookingCodeRate } from "../../utils"
 import Room from "../Room"
-import { getMemberPrice, isBookingCodeRate } from "../utils"
 
 import styles from "./summaryContent.module.css"
 
-import type { SelectRateSummaryProps } from "@/types/components/hotelReservation/summary"
+import type { Price } from "@/contexts/SelectRate/getTotalPrice"
+
+export type SelectRateSummaryProps = {
+  isMember: boolean
+  bookingCode?: string
+  toggleSummaryOpen: () => void
+}
 
 export default function SummaryContent({
-  booking,
-  rooms,
-  totalPrice,
   isMember,
-  vat,
   toggleSummaryOpen,
 }: SelectRateSummaryProps) {
-  const { rateSummary, defaultCurrency } = useRatesStore((state) => ({
-    rateSummary: state.rateSummary,
-    defaultCurrency: state.defaultCurrency,
-  }))
+  const { selectedRates, input } = useSelectRateContext()
+
   const intl = useIntl()
   const lang = useLang()
+  const rateTitles = useRateTitles()
 
-  const diff = dt(booking.toDate).diff(booking.fromDate, "days")
-
-  const nights = intl.formatMessage(
+  const nightsLabel = intl.formatMessage(
     {
       defaultMessage: "{totalNights, plural, one {# night} other {# nights}}",
     },
-    { totalNights: diff }
+    { totalNights: input.nights }
   )
 
-  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)
+    selectedRates.rates.length === 1 &&
+    selectedRates.rates[0] &&
+    "member" in selectedRates.rates[0]
+      ? selectedRates.rates[0].member
+      : null
+
+  const containsBookingCodeRate = selectedRates.rates.find(
+    (r) => r && isBookingCodeRate(r)
   )
+
+  if (!selectedRates?.totalPrice) {
+    return null
+  }
+
   const showDiscounted = containsBookingCodeRate || isMember
-  const totalRegularPrice = totalPrice.local?.regularPrice
-    ? totalPrice.local.regularPrice
+  const totalRegularPrice = selectedRates?.totalPrice?.local?.regularPrice
+    ? selectedRates.totalPrice.local.regularPrice
     : 0
 
-  const showStrikeThroughPrice = totalRegularPrice > totalPrice.local.price
-  const priceDetailsRooms = mapToPrice(rateSummary, booking.rooms, isMember)
+  const showStrikeThroughPrice =
+    totalRegularPrice > selectedRates?.totalPrice?.local?.price
 
   return (
     <section className={styles.summary}>
@@ -90,26 +96,44 @@ export default function SummaryContent({
         </div>
         <Typography variant="Body/Paragraph/mdBold">
           <p className={styles.dates}>
-            {dt(booking.fromDate).locale(lang).format(longDateFormat[lang])}
+            {dt(input.data?.booking.fromDate)
+              .locale(lang)
+              .format(longDateFormat[lang])}
             <MaterialIcon icon="arrow_forward" size={15} color="CurrentColor" />
             {/* eslint-disable formatjs/no-literal-string-in-jsx */}
-            {dt(booking.toDate).locale(lang).format(longDateFormat[lang])} (
-            {nights}){/* eslint-enable formatjs/no-literal-string-in-jsx */}
+            {dt(input.data?.booking.toDate)
+              .locale(lang)
+              .format(longDateFormat[lang])}{" "}
+            ({nightsLabel})
+            {/* eslint-enable formatjs/no-literal-string-in-jsx */}
           </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}
-        />
-      ))}
+      {selectedRates.rates.map((room, idx) => {
+        if (!room) {
+          return null
+        }
+
+        return (
+          <Room
+            key={idx}
+            room={mapToRoom({
+              isMember,
+              rate: room,
+              input,
+              idx,
+              getPriceForRoom: selectedRates.getPriceForRoom,
+              rateTitles,
+            })}
+            roomNumber={idx + 1}
+            roomCount={selectedRates.rates.length}
+            isMember={isMember}
+          />
+        )
+      })}
 
       <div>
         <div className={styles.entry}>
@@ -130,7 +154,7 @@ export default function SummaryContent({
                 )}
               </p>
             </Typography>
-            {totalPrice.requested ? (
+            {selectedRates.totalPrice.requested ? (
               <Typography variant="Body/Supporting text (caption)/smRegular">
                 <p className={styles.approxPrice}>
                   {intl.formatMessage(
@@ -140,10 +164,11 @@ export default function SummaryContent({
                     {
                       value: formatPrice(
                         intl,
-                        totalPrice.requested.price,
-                        totalPrice.requested.currency,
-                        totalPrice.requested.additionalPrice,
-                        totalPrice.requested.additionalPriceCurrency
+                        selectedRates.totalPrice.requested.price,
+                        selectedRates.totalPrice.requested.currency,
+                        selectedRates.totalPrice.requested.additionalPrice,
+                        selectedRates.totalPrice.requested
+                          .additionalPriceCurrency
                       ),
                     }
                   )}
@@ -161,22 +186,22 @@ export default function SummaryContent({
               >
                 {formatPrice(
                   intl,
-                  totalPrice.local.price,
-                  totalPrice.local.currency,
-                  totalPrice.local.additionalPrice,
-                  totalPrice.local.additionalPriceCurrency
+                  selectedRates.totalPrice.local.price,
+                  selectedRates.totalPrice.local.currency,
+                  selectedRates.totalPrice.local.additionalPrice,
+                  selectedRates.totalPrice.local.additionalPriceCurrency
                 )}
               </span>
             </Typography>
             {showDiscounted &&
             showStrikeThroughPrice &&
-            totalPrice.local.regularPrice ? (
+            selectedRates.totalPrice.local.regularPrice ? (
               <Typography variant="Body/Paragraph/mdRegular">
                 <s className={styles.strikeThroughRate}>
                   {formatPrice(
                     intl,
-                    totalPrice.local.regularPrice,
-                    totalPrice.local.currency
+                    selectedRates.totalPrice.local.regularPrice,
+                    selectedRates.totalPrice.local.currency
                   )}
                 </s>
               </Typography>
@@ -185,18 +210,140 @@ export default function SummaryContent({
         </div>
 
         <PriceDetailsModal
-          bookingCode={booking.bookingCode}
-          defaultCurrency={defaultCurrency}
-          fromDate={booking.fromDate}
-          rooms={priceDetailsRooms}
-          toDate={booking.toDate}
-          totalPrice={totalPrice}
-          vat={vat}
+          bookingCode={input.bookingCode}
+          defaultCurrency={
+            selectedRates.totalPrice.requested?.currency ??
+            selectedRates.totalPrice.local.currency
+          }
+          rooms={selectedRates.rates
+            .map((room, idx) => {
+              if (!room) {
+                return null
+              }
+
+              const mapped = mapToRoom({
+                isMember,
+                rate: room,
+                input,
+                idx,
+                getPriceForRoom: selectedRates.getPriceForRoom,
+                rateTitles,
+              })
+
+              function getPrice(
+                room: NonNullable<(typeof selectedRates.rates)[number]>,
+                isMember: boolean
+              ) {
+                switch (room.type) {
+                  case "regular":
+                    return {
+                      regular: isMember
+                        ? (room.member?.localPrice ?? room.public?.localPrice)
+                        : room.public?.localPrice,
+                    }
+                  case "campaign":
+                    return {
+                      campaign: isMember
+                        ? (room.member ?? room.public)
+                        : room.public,
+                    }
+                  case "redemption":
+                    return {
+                      redemption: room.redemption,
+                    }
+                  case "code": {
+                    if ("corporateCheque" in room) {
+                      return {
+                        corporateCheque: room.corporateCheque,
+                      }
+                    }
+
+                    if ("voucher" in room) {
+                      return {
+                        voucher: room.voucher,
+                      }
+                    }
+                    if ("public" in room) {
+                      return {
+                        regular: isMember
+                          ? (room.member?.localPrice ?? room.public?.localPrice)
+                          : room.public?.localPrice,
+                      }
+                    }
+                  }
+                  default:
+                    throw new Error("Unknown price type")
+                }
+              }
+
+              const p = getPrice(room!, isMember)
+
+              return {
+                ...mapped,
+                idx,
+                getPriceForRoom: selectedRates.getPriceForRoom,
+                rateTitles,
+                price: p,
+                bedType: undefined,
+                breakfast: undefined,
+                breakfastIncluded:
+                  room?.rateDefinition.breakfastIncluded ?? false,
+                rateDefinition: room.rateDefinition,
+              }
+            })
+            .filter((x) => !!x)}
+          fromDate={input.data?.booking.fromDate ?? ""}
+          toDate={input.data?.booking.toDate ?? ""}
+          totalPrice={selectedRates.totalPrice}
+          vat={selectedRates.vat}
         />
       </div>
       {!isMember && memberPrice ? (
-        <SignupPromoDesktop memberPrice={memberPrice} badgeContent={"✌️"} />
+        <SignupPromoDesktop
+          memberPrice={{
+            amount: memberPrice.localPrice.pricePerStay,
+            currency: memberPrice.localPrice.currency,
+          }}
+          badgeContent={"✌️"}
+        />
       ) : null}
     </section>
   )
 }
+
+function mapToRoom({
+  isMember,
+  rate,
+  input,
+  idx,
+  getPriceForRoom,
+  rateTitles,
+}: {
+  isMember: boolean
+  rate: NonNullable<
+    ReturnType<typeof useSelectRateContext>["selectedRates"]["rates"][number]
+  >
+  input: ReturnType<typeof useSelectRateContext>["input"]
+  idx: number
+  getPriceForRoom: (roomIndex: number) => Price | null
+  rateTitles: ReturnType<typeof useRateTitles>
+}) {
+  return {
+    adults: input.data?.booking.rooms[idx].adults || 0,
+    childrenInRoom: input.data?.booking.rooms[idx].childrenInRoom,
+    roomType: rate.roomInfo.roomType,
+    roomRate: rate,
+    cancellationText: rateTitles[rate.rate].title,
+    roomPrice: {
+      perNight: { local: { price: -1, currency: CurrencyEnum.SEK } },
+      perStay: getPriceForRoom(idx) ?? {
+        local: { price: -1, currency: CurrencyEnum.Unknown },
+      },
+    },
+    rateDetails: isMember
+      ? (rate.rateDefinitionMember?.generalTerms ??
+        rate.rateDefinition.generalTerms)
+      : rate.rateDefinition.generalTerms,
+    packages: rate.roomInfo.selectedPackages,
+  }
+}

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

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

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

@@ -8,11 +8,10 @@ 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 { getMemberPrice, isBookingCodeRate } from "../utils"
+import { isBookingCodeRate } from "../../utils"
+import { getMemberPrice } from "../utils"
 
 import styles from "./room.module.css"
 
@@ -72,7 +71,6 @@ 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(
     {
@@ -146,13 +144,12 @@ export default function Room({
                         room.roomPrice.perStay.local.additionalPriceCurrency
                       )}
                 </p>
-                {/* Show the price on which discount applies as Striked when discounted price is available */}
-                {showDiscounted && regularRate.perStay.local.regularPrice ? (
+                {showDiscounted && room.roomPrice.perStay.local.price ? (
                   <s className={styles.strikeThroughRate}>
                     {formatPrice(
                       intl,
-                      regularRate.perStay.local.regularPrice,
-                      regularRate.perStay.local.currency
+                      room.roomPrice.perStay.local.price,
+                      room.roomPrice.perStay.local.currency
                     )}
                   </s>
                 ) : null}

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

@@ -18,6 +18,7 @@
 
 .termsText:nth-child(n) {
   display: flex;
+  align-items: center;
   margin-bottom: var(--Space-x1);
 }
 
@@ -46,7 +47,7 @@
   }
 }
 
-.prices .strikeThroughRate {
+.strikeThroughRate {
   text-decoration: line-through;
   color: var(--Text-Secondary);
 }

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

@@ -1,370 +0,0 @@
-"use client"
-import { Fragment } from "react"
-import { Button as ButtonRAC } from "react-aria-components"
-import { useIntl } from "react-intl"
-
-import { longDateFormat } from "@scandic-hotels/common/constants/dateFormats"
-import { dt } from "@scandic-hotels/common/dt"
-import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Body from "@scandic-hotels/design-system/Body"
-import { Button } from "@scandic-hotels/design-system/Button"
-import Caption from "@scandic-hotels/design-system/Caption"
-import { Divider } from "@scandic-hotels/design-system/Divider"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
-import { ChildBedMapEnum } from "@scandic-hotels/trpc/enums/childBedMapEnum"
-
-import { useRatesStore } from "@/stores/select-rate"
-
-import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
-import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
-import Modal from "@/components/Modal"
-import useLang from "@/hooks/useLang"
-
-import { mapToPrice } from "./mapToPrice"
-import { isBookingCodeRate } from "./utils"
-
-import styles from "./summary.module.css"
-
-import type { RoomRate } from "@/types/components/hotelReservation/enterDetails/details"
-import type { SelectRateSummaryProps } from "@/types/components/hotelReservation/summary"
-
-export default function Summary({
-  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 }
-  )
-
-  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 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 className={styles.header}>
-        <ButtonRAC onPress={toggleSummaryOpen}>
-          <Subtitle className={styles.title} type="two">
-            {intl.formatMessage({
-              defaultMessage: "Booking summary",
-            })}
-          </Subtitle>
-          <Body className={styles.date} color="baseTextMediumContrast">
-            {dt(booking.fromDate).locale(lang).format(longDateFormat[lang])}
-            <MaterialIcon
-              icon="arrow_forward"
-              size={15}
-              color="Icon/Interactive/Secondary"
-            />
-            {/* eslint-disable formatjs/no-literal-string-in-jsx */}
-            {dt(booking.toDate).locale(lang).format(longDateFormat[lang])} (
-            {nights}){/* eslint-enable formatjs/no-literal-string-in-jsx */}
-          </Body>
-          <MaterialIcon
-            className={styles.chevronIcon}
-            icon="keyboard_arrow_down"
-            size={30}
-            color="CurrentColor"
-          />
-        </ButtonRAC>
-      </header>
-      <Divider color="Border/Divider/Subtle" />
-      {rooms.map((room, idx) => {
-        if (!room) {
-          return null
-        }
-
-        const roomNumber = idx + 1
-        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
-        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={showDiscounted ? "red" : "uiTextHighContrast"}>
-                    {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">
-                  {guestsParts.join(", ")}
-                </Caption>
-                <Caption color="uiTextMediumContrast">
-                  {room.cancellationText}
-                </Caption>
-                <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.cancellationText}
-                >
-                  <div className={styles.terms}>
-                    {room.rateDetails?.map((info) => (
-                      <Body
-                        key={info}
-                        color="uiTextHighContrast"
-                        className={styles.termsText}
-                      >
-                        <MaterialIcon
-                          icon="check"
-                          color="Icon/Feedback/Success"
-                          size={20}
-                          className={styles.termsIcon}
-                        />
-                        {info}
-                      </Body>
-                    ))}
-                  </div>
-                </Modal>
-              </div>
-
-              {childBedCrib ? (
-                <div className={styles.entry}>
-                  <div>
-                    <Body color="uiTextHighContrast">
-                      {intl.formatMessage(
-                        {
-                          defaultMessage: "Crib (child) × {count}",
-                        },
-                        { count: childBedCrib }
-                      )}
-                    </Body>
-                    <Caption color="uiTextMediumContrast">
-                      {intl.formatMessage({
-                        defaultMessage: "Subject to 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}
-              {roomPackages?.map((pkg) => (
-                <div className={styles.entry} key={pkg.code}>
-                  <div>
-                    <Body color="uiTextHighContrast">{pkg.description}</Body>
-                  </div>
-
-                  <Body color="uiTextHighContrast">
-                    {formatPrice(
-                      intl,
-                      pkg.localPrice.price,
-                      pkg.localPrice.currency
-                    )}
-                  </Body>
-                </div>
-              ))}
-            </div>
-            <Divider color="Border/Divider/Subtle" />
-          </Fragment>
-        )
-      })}
-      <div className={styles.total}>
-        <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}
-              rooms={priceDetailsRooms}
-              toDate={booking.toDate}
-              totalPrice={totalPrice}
-              vat={vat}
-              defaultCurrency={defaultCurrency}
-            />
-          </div>
-          <div>
-            <Body
-              color={showDiscounted ? "red" : "uiTextHighContrast"}
-              textTransform="bold"
-              data-testid="total-price"
-            >
-              {formatPrice(
-                intl,
-                totalPrice.local.price,
-                totalPrice.local.currency,
-                totalPrice.local.additionalPrice,
-                totalPrice.local.additionalPriceCurrency
-              )}
-            </Body>
-            {booking.bookingCode && totalPrice.local.regularPrice && (
-              <Caption color="uiTextMediumContrast" striked={true}>
-                {formatPrice(
-                  intl,
-                  totalPrice.local.regularPrice,
-                  totalPrice.local.currency
-                )}
-              </Caption>
-            )}
-            {totalPrice.requested && (
-              <Caption color="uiTextMediumContrast">
-                {intl.formatMessage(
-                  {
-                    defaultMessage: "Approx. {value}",
-                  },
-                  {
-                    value: formatPrice(
-                      intl,
-                      totalPrice.requested.price,
-                      totalPrice.requested.currency,
-                      totalPrice.requested.additionalPrice,
-                      totalPrice.requested.additionalPriceCurrency
-                    ),
-                  }
-                )}
-              </Caption>
-            )}
-          </div>
-        </div>
-        <Divider
-          className={styles.bottomDivider}
-          color="Border/Divider/Subtle"
-        />
-      </div>
-      {!isMember && memberPrice ? (
-        <SignupPromoDesktop memberPrice={memberPrice} badgeContent={"✌️"} />
-      ) : null}
-    </section>
-  )
-}

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

@@ -9,35 +9,21 @@ 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 { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
+import { useIsUserLoggedIn } from "@/hooks/useIsUserLoggedIn"
 
+import { isBookingCodeRate } from "../utils"
 import SummaryContent from "./Content"
-import { mapRate } from "./mapRate"
-import { isBookingCodeRate } from "./utils"
 
 import styles from "./mobileSummary.module.css"
 
-import type { RoomsAvailability } from "@scandic-hotels/trpc/types/roomAvailability"
-
-import type { MobileSummaryProps } from "@/types/components/hotelReservation/selectRate/rateSummary"
-
-export default function MobileSummary({
-  isAllRoomsSelected,
-  isUserLoggedIn,
-  totalPriceToShow,
-}: MobileSummaryProps) {
+export function MobileSummary() {
   const intl = useIntl()
   const scrollY = useRef(0)
   const [isSummaryOpen, setIsSummaryOpen] = useState(false)
+  const isUserLoggedIn = useIsUserLoggedIn()
 
-  const { booking, bookingRooms, roomsAvailability, rateSummary, vat } =
-    useRatesStore((state) => ({
-      booking: state.booking,
-      bookingRooms: state.booking.rooms,
-      roomsAvailability: state.roomsAvailability,
-      rateSummary: state.rateSummary,
-      vat: state.vat,
-    }))
+  const { selectedRates } = useSelectRateContext()
 
   function toggleSummaryOpen() {
     setIsSummaryOpen(!isSummaryOpen)
@@ -67,38 +53,28 @@ export default function MobileSummary({
     }
   }, [isSummaryOpen])
 
-  const roomRateDefinitions = roomsAvailability?.find(
-    (ra): ra is RoomsAvailability => "rateDefinitions" in ra
+  const containsBookingCodeRate = selectedRates.rates.find(
+    (r) => r && isBookingCodeRate(r)
   )
-  if (!roomRateDefinitions) {
+  const showDiscounted = containsBookingCodeRate || isUserLoggedIn
+
+  if (!selectedRates.totalPrice) {
     return null
   }
 
-  const rooms = rateSummary.map((room, index) =>
-    room ? mapRate(room, index, bookingRooms, room.packages) : null
-  )
-
-  const containsBookingCodeRate = rateSummary.find(
-    (r) => r && isBookingCodeRate(r.product)
-  )
-  const showDiscounted = containsBookingCodeRate || isUserLoggedIn
-  const totalRegularPrice = totalPriceToShow.local?.regularPrice
-    ? totalPriceToShow.local.regularPrice
+  const totalRegularPrice = selectedRates.totalPrice.local?.regularPrice
+    ? selectedRates.totalPrice.local.regularPrice
     : 0
 
   const showStrikeThroughPrice =
-    totalRegularPrice > totalPriceToShow.local.price
+    totalRegularPrice > selectedRates.totalPrice.local?.price
 
   return (
     <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>
@@ -124,22 +100,22 @@ export default function MobileSummary({
             >
               {formatPrice(
                 intl,
-                totalPriceToShow.local.price,
-                totalPriceToShow.local.currency,
-                totalPriceToShow.local.additionalPrice,
-                totalPriceToShow.local.additionalPriceCurrency
+                selectedRates.totalPrice.local.price,
+                selectedRates.totalPrice.local.currency,
+                selectedRates.totalPrice.local.additionalPrice,
+                selectedRates.totalPrice.local.additionalPriceCurrency
               )}
             </span>
           </Typography>
           {showDiscounted &&
           showStrikeThroughPrice &&
-          totalPriceToShow.local.regularPrice ? (
+          selectedRates.totalPrice.local.regularPrice ? (
             <Typography variant="Body/Paragraph/mdRegular">
               <s className={styles.strikeThroughRate}>
                 {formatPrice(
                   intl,
-                  totalPriceToShow.local.regularPrice,
-                  totalPriceToShow.local.currency
+                  selectedRates.totalPrice.local.regularPrice,
+                  selectedRates.totalPrice.local.currency
                 )}
               </s>
             </Typography>
@@ -166,7 +142,7 @@ export default function MobileSummary({
           size="Large"
           type="submit"
           typography="Body/Paragraph/mdBold"
-          isDisabled={!isAllRoomsSelected}
+          isDisabled={selectedRates.state !== "ALL_SELECTED"}
         >
           {intl.formatMessage({
             defaultMessage: "Continue",

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

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

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

@@ -2,8 +2,8 @@
   border-radius: var(--Corner-radius-lg);
   display: flex;
   flex-direction: column;
-  gap: var(--Space-x2);
-  padding: var(--Space-x3);
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x3);
   height: 100%;
 }
 
@@ -31,32 +31,32 @@
 .date {
   align-items: center;
   display: flex;
-  gap: var(--Space-x1);
+  gap: var(--Spacing-x1);
   justify-content: flex-start;
   grid-area: date;
 }
 
 .link {
-  margin-top: var(--Space-x1);
+  margin-top: var(--Spacing-x1);
 }
 
 .addOns {
   display: flex;
   flex-direction: column;
-  gap: var(--Space-x15);
+  gap: var(--Spacing-x-one-and-half);
   overflow-y: auto;
 }
 
 .rateDetailsPopover {
   display: flex;
   flex-direction: column;
-  gap: var(--Space-x05);
+  gap: var(--Spacing-x-half);
   max-width: 360px;
 }
 
 .entry {
   display: flex;
-  gap: var(--Space-x05);
+  gap: var(--Spacing-x-half);
   justify-content: space-between;
 }
 
@@ -67,7 +67,7 @@
 .total {
   display: flex;
   flex-direction: column;
-  gap: var(--Space-x2);
+  gap: var(--Spacing-x2);
 }
 
 .bottomDivider {
@@ -79,15 +79,16 @@
 }
 
 .terms {
-  margin-top: var(--Space-x3);
-  margin-bottom: var(--Space-x3);
+  margin-top: var(--Spacing-x3);
+  margin-bottom: var(--Spacing-x3);
 }
 .termsText:nth-child(n) {
   display: flex;
-  margin-bottom: var(--Space-x1);
+  align-items: center;
+  margin-bottom: var(--Spacing-x1);
 }
 .terms .termsIcon {
-  margin-right: var(--Space-x1);
+  margin-right: var(--Spacing-x1);
 }
 
 @media screen and (min-width: 1367px) {

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

@@ -1,7 +1,3 @@
-import { RateTypeEnum } from "@scandic-hotels/trpc/enums/rateType"
-
-import type { Product } from "@scandic-hotels/trpc/types/roomAvailability"
-
 import type { RoomRate } from "@/types/components/hotelReservation/enterDetails/details"
 
 export function getMemberPrice(roomRate: RoomRate) {
@@ -15,21 +11,3 @@ export function getMemberPrice(roomRate: RoomRate) {
 
   return null
 }
-
-export function isBookingCodeRate(product: Product) {
-  if (
-    "corporateCheque" in product ||
-    "redemption" in product ||
-    "voucher" in product
-  ) {
-    return true
-  } else {
-    if (product.public) {
-      return product.public.rateType !== RateTypeEnum.Regular
-    }
-    if (product.member) {
-      return product.member.rateType !== RateTypeEnum.Regular
-    }
-    return false
-  }
-}

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

@@ -1,138 +1,37 @@
 "use client"
+
 import { useRouter, useSearchParams } from "next/navigation"
-import { useSession } from "next-auth/react"
 import { useState, useTransition } from "react"
-import { useIntl } from "react-intl"
 
-import { dt } from "@scandic-hotels/common/dt"
-import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import Body from "@scandic-hotels/design-system/Body"
-import Caption from "@scandic-hotels/design-system/Caption"
-import Footnote from "@scandic-hotels/design-system/Footnote"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
-import Subtitle from "@scandic-hotels/design-system/Subtitle"
-import { RateEnum } from "@scandic-hotels/trpc/enums/rate"
-import { RateTypeEnum } from "@scandic-hotels/trpc/enums/rateType"
+import { ErrorBoundary } from "@/components/ErrorBoundary/ErrorBoundary"
+import { useSelectRateContext } from "@/contexts/SelectRate/SelectRateContext"
 
-import { useRatesStore } from "@/stores/select-rate"
-
-import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
-import { isValidClientSession } from "@/utils/clientSession"
-
-import MobileSummary from "./MobileSummary"
-import { getTotalPrice } from "./utils"
+import { DesktopSummary } from "./DesktopSummary"
+import { MobileSummary } from "./MobileSummary"
 
 import styles from "./rateSummary.module.css"
 
-export default function RateSummary() {
-  const {
-    bookingCode,
-    bookingRooms,
-    dates,
-    isFetchingPackages,
-    rateSummary,
-    roomsAvailability,
-  } = useRatesStore((state) => ({
-    bookingCode: state.booking.bookingCode,
-    bookingRooms: state.booking.rooms,
-    dates: {
-      checkInDate: state.booking.fromDate,
-      checkOutDate: state.booking.toDate,
-    },
-    isFetchingPackages: state.rooms.some((room) => room.isFetchingPackages),
-    rateSummary: state.rateSummary,
-    roomsAvailability: state.roomsAvailability,
-  }))
-  const { data: session } = useSession()
-  const isUserLoggedIn = isValidClientSession(session)
+export function RateSummary() {
+  return (
+    // eslint-disable-next-line formatjs/no-literal-string-in-jsx
+    <ErrorBoundary fallback={<div>Unable to render summary</div>}>
+      <InnerRateSummary />
+    </ErrorBoundary>
+  )
+}
+
+function InnerRateSummary() {
+  const { selectedRates, input } = useSelectRateContext()
 
   const [isSubmitting, setIsSubmitting] = useState(false)
-  const intl = useIntl()
   const router = useRouter()
   const params = useSearchParams()
   const [_, startTransition] = useTransition()
 
-  if (!roomsAvailability) {
+  if (selectedRates.state === "NONE_SELECTED") {
     return null
   }
 
-  const checkInDate = new Date(dates.checkInDate)
-  const checkOutDate = new Date(dates.checkOutDate)
-  const nights = dt(checkOutDate).diff(dt(checkInDate), "days")
-
-  const totalNights = intl.formatMessage(
-    {
-      defaultMessage: "{totalNights, plural, one {# night} other {# nights}}",
-    },
-    { totalNights: nights }
-  )
-  const totalAdults = intl.formatMessage(
-    {
-      defaultMessage: "{totalAdults, plural, one {# adult} other {# adults}}",
-    },
-    { totalAdults: bookingRooms.reduce((acc, room) => acc + room.adults, 0) }
-  )
-  const childrenInOneOrMoreRooms = bookingRooms.some(
-    (room) => room.childrenInRoom?.length
-  )
-  const childrenInroom = intl.formatMessage(
-    {
-      defaultMessage:
-        "{totalChildren, plural, one {# child} other {# children}}",
-    },
-    {
-      totalChildren: bookingRooms.reduce(
-        (acc, room) => acc + (room.childrenInRoom?.length ?? 0),
-        0
-      ),
-    }
-  )
-  const totalChildren = childrenInOneOrMoreRooms ? `, ${childrenInroom}` : ""
-  const totalRooms = intl.formatMessage(
-    {
-      defaultMessage: "{totalRooms, plural, one {# room} other {# rooms}}",
-    },
-    { totalRooms: bookingRooms.length }
-  )
-
-  const summaryPriceText = `${totalNights}, ${totalAdults}${totalChildren}, ${totalRooms}`
-
-  const totalRoomsRequired = bookingRooms.length
-  const isAllRoomsSelected =
-    rateSummary.filter((rate) => rate !== null).length === totalRoomsRequired
-  const hasMemberRates = rateSummary.some(
-    (room) => room && "member" in room.product && room.product.member
-  )
-  const showMemberDiscountBanner = hasMemberRates && !isUserLoggedIn
-
-  const freeCancelation = intl.formatMessage({
-    defaultMessage: "Free cancellation",
-  })
-  const nonRefundable = intl.formatMessage({
-    defaultMessage: "Non-refundable",
-  })
-  const freeBooking = intl.formatMessage({
-    defaultMessage: "Free rebooking",
-  })
-  const payLater = intl.formatMessage({
-    defaultMessage: "Pay later",
-  })
-  const payNow = intl.formatMessage({
-    defaultMessage: "Pay now",
-  })
-
-  function getRateDetails(rate: RateEnum) {
-    switch (rate) {
-      case RateEnum.change:
-        return `${freeBooking}, ${payNow}`
-      case RateEnum.flex:
-        return `${freeCancelation}, ${payLater}`
-      case RateEnum.save:
-      default:
-        return `${nonRefundable}, ${payNow}`
-    }
-  }
-
   function handleSubmit(e: React.FormEvent) {
     e.preventDefault()
     setIsSubmitting(true)
@@ -141,62 +40,15 @@ export default function RateSummary() {
     })
   }
 
-  if (!rateSummary.length || isFetchingPackages) {
-    return null
-  }
+  const totalPriceToShow = selectedRates.totalPrice
 
-  const isBookingCodeRate = rateSummary.some(
-    (rate) =>
-      rate &&
-      "public" in rate.product &&
-      rate.product.public?.rateType !== RateTypeEnum.Regular
-  )
-  const isVoucherRate = rateSummary.some(
-    (rate) => rate && "voucher" in rate.product
-  )
-  const isCorporateChequeRate = rateSummary.some(
-    (rate) => rate && "corporateCheque" in rate.product
-  )
-  const showDiscounted =
-    isUserLoggedIn ||
-    isBookingCodeRate ||
-    isVoucherRate ||
-    isCorporateChequeRate
-
-  const mainRoomProduct = rateSummary[0]
-  const totalPriceToShow = getTotalPrice(
-    mainRoomProduct,
-    rateSummary,
-    isUserLoggedIn,
-    intl
-  )
-
-  const rateProduct = rateSummary.find((rate) => rate?.product)?.product
-
-  if (!totalPriceToShow || !rateProduct) {
-    return null
-  }
-
-  let mainRoomCurrency = ""
-  if ("member" in rateProduct && rateProduct.member?.localPrice) {
-    mainRoomCurrency = rateProduct.member.localPrice.currency
-  }
   if (
-    !mainRoomCurrency &&
-    "public" in rateProduct &&
-    rateProduct.public?.localPrice
+    !totalPriceToShow ||
+    !selectedRates.rates.some((room) => room?.isSelected ?? false)
   ) {
-    mainRoomCurrency = rateProduct.public.localPrice.currency
+    return null
   }
 
-  const totalRegularPrice = totalPriceToShow.local?.regularPrice
-    ? totalPriceToShow.local.regularPrice
-    : 0
-  const isTotalRegularPriceGreaterThanPrice =
-    totalRegularPrice > totalPriceToShow.local.price
-  const showStrikedThroughPrice =
-    (!!bookingCode || isUserLoggedIn) && isTotalRegularPriceGreaterThanPrice
-
   // 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
@@ -209,218 +61,21 @@ export default function RateSummary() {
     >
       <div className={styles.summary}>
         <div className={styles.content}>
-          <div className={styles.summaryText}>
-            {rateSummary.map((room, index) => {
-              if (!room) {
-                return (
-                  <div key={`unselected-${index}`}>
-                    <Subtitle color="uiTextPlaceholder">
-                      {intl.formatMessage(
-                        {
-                          defaultMessage: "Room {roomIndex}",
-                        },
-                        { roomIndex: index + 1 }
-                      )}
-                    </Subtitle>
-                    <Body color="uiTextPlaceholder">
-                      {intl.formatMessage({
-                        defaultMessage: "Select room",
-                      })}
-                    </Body>
-                  </div>
-                )
-              }
-
-              return (
-                <div key={index}>
-                  {rateSummary.length > 1 ? (
-                    <>
-                      <Subtitle color="uiTextHighContrast">
-                        {intl.formatMessage(
-                          {
-                            defaultMessage: "Room {roomIndex}",
-                          },
-                          { roomIndex: index + 1 }
-                        )}
-                      </Subtitle>
-                      <Body color="uiTextMediumContrast">{room.roomType}</Body>
-                      <Caption color="uiTextMediumContrast">
-                        {getRateDetails(room.rate)}
-                      </Caption>
-                    </>
-                  ) : (
-                    <>
-                      <Subtitle color="uiTextHighContrast">
-                        {room.roomType}
-                      </Subtitle>
-                      <Body color="uiTextMediumContrast">
-                        {getRateDetails(room.rate)}
-                      </Body>
-                    </>
-                  )}
-                </div>
-              )
-            })}
-            {/* Render unselected rooms */}
-            {Array.from({
-              length: totalRoomsRequired - rateSummary.length,
-            }).map((_, index) => (
-              <div key={`unselected-${index}`}>
-                <Subtitle color="uiTextPlaceholder">
-                  {intl.formatMessage(
-                    {
-                      defaultMessage: "Room {roomIndex}",
-                    },
-                    { roomIndex: rateSummary.length + index + 1 }
-                  )}
-                </Subtitle>
-                <Body color="uiTextPlaceholder">
-                  {intl.formatMessage({
-                    defaultMessage: "Select room",
-                  })}
-                </Body>
-              </div>
-            ))}
-          </div>
-          <div className={styles.summaryPriceContainer}>
-            {showMemberDiscountBanner && (
-              <div className={styles.promoContainer}>
-                <SignupPromoDesktop
-                  memberPrice={{
-                    amount: rateSummary.reduce((total, rate) => {
-                      if (!rate) {
-                        return total
-                      }
-
-                      const { packages: roomPackages, product } = rate
-
-                      const memberExists = "member" in product && product.member
-                      const publicExists = "public" in product && product.public
-                      if (!memberExists) {
-                        if (!publicExists) {
-                          return total
-                        }
-                      }
-
-                      const price =
-                        product.member?.localPrice.pricePerStay ||
-                        product.public?.localPrice.pricePerStay
-
-                      if (!price) {
-                        return total
-                      }
-
-                      const selectedPackagesPrice = roomPackages.reduce(
-                        (acc, pkg) => acc + pkg.localPrice.totalPrice,
-                        0
-                      )
-
-                      return total + price + selectedPackagesPrice
-                    }, 0),
-                    currency: mainRoomCurrency,
-                  }}
-                />
-              </div>
-            )}
-            <div className={styles.summaryPriceTextDesktop}>
-              <Body>
-                {intl.formatMessage(
-                  {
-                    defaultMessage: "<b>Total price</b> (incl VAT)",
-                  },
-                  { b: (str) => <b>{str}</b> }
-                )}
-              </Body>
-              <Caption color="uiTextMediumContrast">{summaryPriceText}</Caption>
-            </div>
-            <div className={styles.summaryPrice}>
-              <div className={styles.summaryPriceTextDesktop}>
-                <Subtitle
-                  color={showDiscounted ? "red" : "uiTextHighContrast"}
-                  textAlign="right"
-                >
-                  {formatPrice(
-                    intl,
-                    totalPriceToShow.local.price,
-                    totalPriceToShow.local.currency,
-                    totalPriceToShow.local.additionalPrice,
-                    totalPriceToShow.local.additionalPriceCurrency
-                  )}
-                </Subtitle>
-                {showStrikedThroughPrice &&
-                totalPriceToShow.local.regularPrice ? (
-                  <Caption
-                    textAlign="right"
-                    color="uiTextMediumContrast"
-                    striked={true}
-                  >
-                    {formatPrice(
-                      intl,
-                      totalPriceToShow.local.regularPrice,
-                      totalPriceToShow.local.currency
-                    )}
-                  </Caption>
-                ) : null}
-                {totalPriceToShow.requested ? (
-                  <Body color="uiTextMediumContrast">
-                    {intl.formatMessage(
-                      {
-                        defaultMessage: "Approx. {value}",
-                      },
-                      {
-                        value: formatPrice(
-                          intl,
-                          totalPriceToShow.requested.price,
-                          totalPriceToShow.requested.currency,
-                          totalPriceToShow.requested.additionalPrice,
-                          totalPriceToShow.requested.additionalPriceCurrency
-                        ),
-                      }
-                    )}
-                  </Body>
-                ) : null}
-              </div>
-              <div className={styles.summaryPriceTextMobile}>
-                <Caption color="uiTextHighContrast">
-                  {intl.formatMessage({
-                    defaultMessage: "Total price",
-                  })}
-                </Caption>
-                <Subtitle color={showDiscounted ? "red" : "uiTextHighContrast"}>
-                  {formatPrice(
-                    intl,
-                    totalPriceToShow.local.price,
-                    totalPriceToShow.local.currency,
-                    totalPriceToShow.local.additionalPrice,
-                    totalPriceToShow.local.additionalPriceCurrency
-                  )}
-                </Subtitle>
-                <Footnote
-                  color="uiTextMediumContrast"
-                  className={styles.summaryPriceTextMobile}
-                >
-                  {summaryPriceText}
-                </Footnote>
-              </div>
-              <Button
-                className={styles.continueButton}
-                disabled={!isAllRoomsSelected || isSubmitting}
-                theme="base"
-                type="submit"
-              >
-                {intl.formatMessage({
-                  defaultMessage: "Continue",
-                })}
-              </Button>
-            </div>
-          </div>
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+          <ErrorBoundary fallback={<div>Unable to render desktop summary</div>}>
+            <DesktopSummary
+              isSubmitting={isSubmitting}
+              input={input}
+              selectedRates={selectedRates}
+              bookingCode={input.data?.booking.bookingCode || ""}
+            />
+          </ErrorBoundary>
         </div>
         <div className={styles.mobileSummary}>
-          <MobileSummary
-            isAllRoomsSelected={isAllRoomsSelected}
-            isUserLoggedIn={isUserLoggedIn}
-            totalPriceToShow={totalPriceToShow}
-          />
+          {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+          <ErrorBoundary fallback={<div>Unable to render mobile summary</div>}>
+            <MobileSummary />
+          </ErrorBoundary>
         </div>
       </div>
     </form>

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

@@ -4,7 +4,10 @@ import { RateTypeEnum } from "@scandic-hotels/trpc/enums/rateType"
 import { sumPackages } from "@/components/HotelReservation/utils"
 
 import type { Packages } from "@scandic-hotels/trpc/types/packages"
-import type { RedemptionProduct } from "@scandic-hotels/trpc/types/roomAvailability"
+import type {
+  Product,
+  RedemptionProduct,
+} from "@scandic-hotels/trpc/types/roomAvailability"
 import type { IntlShape } from "react-intl"
 
 import type { Price } from "@/types/components/hotelReservation/price"
@@ -23,10 +26,8 @@ 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
       }
@@ -50,16 +51,10 @@ export function calculateTotalPrice(
       total.local.price =
         total.local.price + rate.localPrice.pricePerStay + packagesPrice.local
 
-      if (rate.rateType === RateTypeEnum.Regular && publicRate) {
+      if (rate.localPrice.regularPricePerStay) {
         total.local.regularPrice =
           (total.local.regularPrice || 0) +
-          publicRate.localPrice.pricePerStay +
-          packagesPrice.local
-      } else {
-        total.local.regularPrice =
-          (total.local.regularPrice || 0) +
-          (rate.localPrice.regularPricePerStay ||
-            rate.localPrice.pricePerStay) +
+          rate.localPrice.regularPricePerStay +
           packagesPrice.local
       }
 
@@ -248,3 +243,23 @@ export function getTotalPrice(
 
   return calculateTotalPrice(summaryArray, isUserLoggedIn)
 }
+
+export function isBookingCodeRate(product: Product | undefined | null) {
+  if (!product) return false
+
+  if (
+    "corporateCheque" in product ||
+    "redemption" in product ||
+    "voucher" in product
+  ) {
+    return true
+  } else {
+    if (product.public) {
+      return product.public.rateType !== RateTypeEnum.Regular
+    }
+    if (product.member) {
+      return product.member.rateType !== RateTypeEnum.Regular
+    }
+    return false
+  }
+}