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

Feat/SW-1719 strikethrough rates

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

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

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

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

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

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

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

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


Approved-by: Michael Zetterberg

apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/index.tsx

@@ -1,7 +1,10 @@
 "use client"
 
+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"
 
@@ -9,8 +12,6 @@ import { CancellationRuleEnum, ChildBedTypeEnum } from "@/constants/booking"
 import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
 
 import Modal from "@/components/Modal"
-import Button from "@/components/TempDesignSystem/Button"
-import Link from "@/components/TempDesignSystem/Link"
 import { formatPrice } from "@/utils/numberFormatting"
 
 import Breakfast from "./Breakfast"
@@ -21,12 +22,13 @@ import styles from "./room.module.css"
 import type { BookingConfirmationReceiptRoomProps } from "@/types/components/hotelReservation/bookingConfirmation/receipt"
 
 export default function ReceiptRoom({
-  roomIndex,
+  room,
+  roomNumber,
+  roomCount,
 }: BookingConfirmationReceiptRoomProps) {
   const intl = useIntl()
-  const { room, currencyCode, isVatCurrency } = useBookingConfirmationStore(
+  const { currencyCode, isVatCurrency } = useBookingConfirmationStore(
     (state) => ({
-      room: state.rooms[roomIndex],
       currencyCode: state.currencyCode,
       isVatCurrency: state.isVatCurrency,
     })
@@ -64,173 +66,199 @@ export default function ReceiptRoom({
   }
 
   const guests = guestsParts.join(", ")
+  const showDiscounted = room.rateDefinition.isMemberRate
 
   return (
-    <article className={styles.room}>
-      <header className={styles.roomHeader}>
-        <Typography variant="Body/Paragraph/mdRegular">
-          <p className={styles.uiTextHighContrast}>{room.name}</p>
-        </Typography>
-        {room.rateDefinition.isMemberRate ? (
-          <div className={styles.memberPrice}>
-            <Typography variant="Body/Paragraph/mdRegular">
-              <p className={styles.red}>{room.formattedRoomCost}</p>
-            </Typography>
-          </div>
-        ) : (
-          <Typography variant="Body/Paragraph/mdRegular">
-            <p className={styles.uiTextHighContrast}>
-              {room.formattedRoomCost}
-            </p>
-          </Typography>
-        )}
-        <Typography variant="Body/Paragraph/mdRegular">
-          <p className={styles.uiTextMediumContrast}>{guests}</p>
-        </Typography>
-        <Typography variant="Body/Paragraph/mdRegular">
-          <p className={styles.uiTextMediumContrast}>
-            {room.rateDefinition.cancellationText}
-          </p>
-        </Typography>
-        <Modal
-          trigger={
-            <Button intent="text" className={styles.termsLink}>
-              <Link
-                color="Text/Interactive/Secondary"
-                href=""
-                size="small"
-                textDecoration="underline"
-                variant="icon"
-              >
-                {intl.formatMessage({
-                  defaultMessage: "Reservation policy",
-                })}
-                <MaterialIcon icon="info" color="CurrentColor" />
-              </Link>
-            </Button>
-          }
-          title={
-            (isVatCurrency
-              ? room.rateDefinition.cancellationText
-              : room.rateDefinition.title) || ""
-          }
-          subtitle={
-            room.rateDefinition.cancellationRule ===
-            CancellationRuleEnum.CancellableBefore6PM
-              ? intl.formatMessage({
-                  defaultMessage: "Pay later",
-                })
-              : intl.formatMessage({
-                  defaultMessage: "Pay now",
-                })
-          }
-        >
-          <div className={styles.terms}>
-            {room.rateDefinition.generalTerms?.map((info) => (
-              <Typography
-                key={info}
-                className={styles.termsText}
-                variant="Body/Paragraph/mdRegular"
-              >
-                <span>
-                  <MaterialIcon
-                    icon="check"
-                    color="Icon/Feedback/Success"
-                    size={20}
-                    className={styles.termsIcon}
-                  />
-                  {info}
-                </span>
-              </Typography>
-            ))}
-          </div>
-        </Modal>
-      </header>
-      {room.roomFeatures
-        ? room.roomFeatures.map((feature) => (
-            <div className={styles.entry} key={feature.code}>
-              <div>
-                <Typography variant="Body/Paragraph/mdRegular">
-                  <p className={styles.uiTextHighContrast}>
-                    {feature.description}
-                  </p>
-                </Typography>
-              </div>
-
-              <Typography variant="Body/Paragraph/mdRegular">
-                <p className={styles.uiTextHighContrast}>
-                  {formatPrice(intl, feature.totalPrice, feature.currency)}
-                </p>
-              </Typography>
-            </div>
-          ))
-        : null}
-      <div className={styles.entry}>
-        <Typography variant="Body/Paragraph/mdRegular">
-          <p className={styles.uiTextHighContrast}>{room.bedDescription}</p>
-        </Typography>
-        <Typography variant="Body/Paragraph/mdRegular">
-          <p className={styles.uiTextHighContrast}>
-            {formatPrice(intl, 0, currencyCode)}
-          </p>
-        </Typography>
-      </div>
-      {childBedCrib ? (
-        <div className={styles.entry}>
-          <div>
-            <Typography variant="Body/Paragraph/mdRegular">
-              <p className={styles.uiTextHighContrast}>
+    <>
+      <div className={styles.room}>
+        <div>
+          {roomCount > 1 ? (
+            <Typography variant="Body/Supporting text (caption)/smBold">
+              <p className={styles.roomTitle}>
                 {intl.formatMessage(
                   {
-                    defaultMessage: "Crib (child) × {count}",
-                  },
-                  { count: childBedCrib.quantity }
-                )}
-              </p>
-            </Typography>
-            <Typography variant="Body/Supporting text (caption)/smRegular">
-              <p className={styles.uiTextHighContrast}>
-                {intl.formatMessage({
-                  defaultMessage: "Based on availability",
-                })}
-              </p>
-            </Typography>
-          </div>
-          <Typography variant="Body/Paragraph/mdRegular">
-            <p className={styles.uiTextHighContrast}>
-              {formatPrice(intl, 0, currencyCode)}
-            </p>
-          </Typography>
-        </div>
-      ) : null}
-      {childBedExtraBed ? (
-        <div className={styles.entry}>
-          <div>
-            <Typography variant="Body/Paragraph/mdRegular">
-              <p className={styles.uiTextHighContrast}>
-                {intl.formatMessage(
-                  {
-                    defaultMessage: "Extra bed (child) × {count}",
+                    defaultMessage: "Room {roomIndex}",
                   },
                   {
-                    count: childBedExtraBed.quantity,
+                    roomIndex: roomNumber,
                   }
                 )}
               </p>
             </Typography>
+          ) : null}
+          <div className={styles.entry}>
+            <div>
+              <Typography variant="Body/Paragraph/mdBold">
+                <p>{room.name}</p>
+              </Typography>
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <div className={styles.additionalInformation}>
+                  <p>{guestsParts.join(", ")}</p>
+                  <p>{room.rateDefinition.cancellationText}</p>
+                </div>
+              </Typography>
+            </div>
+            <Typography variant="Body/Paragraph/mdRegular">
+              <div className={styles.prices}>
+                <p
+                  className={cx(styles.price, {
+                    [styles.discounted]: showDiscounted,
+                  })}
+                >
+                  {room.formattedRoomCost}
+                </p>
+                {/* TODO: add original price, we're currently not receiving this value from API */}
+              </div>
+            </Typography>
           </div>
+          {room.rateDefinition.generalTerms ? (
+            <div className={styles.ctaWrapper}>
+              <Modal
+                trigger={
+                  <Button
+                    className={styles.termsButton}
+                    variant="Text"
+                    typography="Body/Supporting text (caption)/smBold"
+                    wrapping={false}
+                  >
+                    {intl.formatMessage({
+                      defaultMessage: "Reservation policy",
+                    })}
+                    <MaterialIcon
+                      icon="chevron_right"
+                      size={20}
+                      color="CurrentColor"
+                    />
+                  </Button>
+                }
+                title={
+                  (isVatCurrency
+                    ? room.rateDefinition.cancellationText
+                    : room.rateDefinition.title) || ""
+                }
+                subtitle={
+                  room.rateDefinition.cancellationRule ===
+                  CancellationRuleEnum.CancellableBefore6PM
+                    ? intl.formatMessage({
+                        defaultMessage: "Pay later",
+                      })
+                    : intl.formatMessage({
+                        defaultMessage: "Pay now",
+                      })
+                }
+              >
+                <div className={styles.terms}>
+                  {room.rateDefinition.generalTerms?.map((info) => (
+                    <Typography
+                      key={info}
+                      className={styles.termsText}
+                      variant="Body/Paragraph/mdRegular"
+                    >
+                      <span>
+                        <MaterialIcon
+                          icon="check"
+                          color="Icon/Feedback/Success"
+                          size={20}
+                          className={styles.termsIcon}
+                        />
+                        {info}
+                      </span>
+                    </Typography>
+                  ))}
+                </div>
+              </Modal>
+            </div>
+          ) : null}
+        </div>
+
+        {room.roomFeatures
+          ? room.roomFeatures.map((feature) => (
+              <div className={styles.entry} key={feature.code}>
+                <div>
+                  <Typography variant="Body/Paragraph/mdRegular">
+                    <p className={styles.uiTextHighContrast}>
+                      {feature.description}
+                    </p>
+                  </Typography>
+                </div>
+
+                <Typography variant="Body/Paragraph/mdRegular">
+                  <p className={styles.uiTextHighContrast}>
+                    {formatPrice(intl, feature.totalPrice, feature.currency)}
+                  </p>
+                </Typography>
+              </div>
+            ))
+          : null}
+        <div className={styles.entry}>
+          <Typography variant="Body/Paragraph/mdRegular">
+            <p className={styles.uiTextHighContrast}>{room.bedDescription}</p>
+          </Typography>
           <Typography variant="Body/Paragraph/mdRegular">
             <p className={styles.uiTextHighContrast}>
               {formatPrice(intl, 0, currencyCode)}
             </p>
           </Typography>
         </div>
-      ) : null}
-      <Breakfast
-        breakfast={room.breakfast}
-        breakfastIncluded={room.breakfastIncluded}
-        guests={guests}
-      />
-    </article>
+
+        {childBedCrib ? (
+          <Typography variant="Body/Paragraph/mdRegular">
+            <div className={styles.entry}>
+              <div>
+                <p>
+                  {intl.formatMessage(
+                    {
+                      defaultMessage: "Crib (child) × {count}",
+                    },
+                    { count: childBedCrib.quantity }
+                  )}
+                </p>
+                <Typography variant="Body/Supporting text (caption)/smRegular">
+                  <p className={styles.uiTextHighContrast}>
+                    {intl.formatMessage({
+                      defaultMessage: "Based on availability",
+                    })}
+                  </p>
+                </Typography>
+              </div>
+              <div className={styles.prices}>
+                <span className={styles.price}>
+                  {formatPrice(intl, 0, currencyCode)}
+                </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.quantity,
+                    }
+                  )}
+                </p>
+              </div>
+              <div className={styles.prices}>
+                <span className={styles.price}>
+                  {formatPrice(intl, 0, currencyCode)}
+                </span>
+              </div>
+            </div>
+          </Typography>
+        ) : null}
+        <Breakfast
+          breakfast={room.breakfast}
+          breakfastIncluded={room.breakfastIncluded}
+          guests={guests}
+        />
+      </div>
+      <Divider color="Border/Divider/Subtle" />
+    </>
   )
 }

apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/Room/room.module.css

@@ -1,54 +1,56 @@
 .room {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x-one-and-half);
+  gap: var(--Space-x15);
+  overflow-y: auto;
+  color: var(--Text-Default);
 }
 
-.roomHeader {
-  display: grid;
-  grid-template-columns: 1fr auto;
+.roomTitle,
+.additionalInformation {
+  color: var(--Text-Secondary);
 }
 
-.roomHeader :nth-child(n + 3) {
-  grid-column: 1/-1;
+.terms {
+  margin-top: var(--Space-x3);
+  margin-bottom: var(--Space-x3);
 }
-
-.memberPrice {
+.termsText:nth-child(n) {
   display: flex;
-  gap: var(--Spacing-x1);
+  align-items: center;
+  margin-bottom: var(--Space-x1);
+}
+
+.terms .termsIcon {
+  margin-right: var(--Space-x1);
 }
 
 .entry {
   display: flex;
+  gap: var(--Spacing-x-half);
   justify-content: space-between;
 }
 
-.termsLink {
-  justify-self: flex-start;
+.prices {
+  justify-items: flex-end;
+  flex-shrink: 0;
+  display: grid;
+  align-content: start;
 }
 
-.terms {
-  padding-top: var(--Spacing-x3);
+.price {
+  color: var(--Text-Default);
+
+  &.discounted {
+    color: var(--Text-Accent-Primary);
+  }
 }
 
-.termsText:nth-child(n) {
-  display: flex;
-  align-items: center;
-  padding-bottom: var(--Spacing-x1);
+.strikeThroughRate {
+  text-decoration: line-through;
+  color: var(--Text-Secondary);
 }
 
-.terms .termsIcon {
-  padding-right: var(--Spacing-x1);
-}
-
-.red {
-  color: var(--Scandic-Brand-Scandic-Red);
-}
-
-.uiTextHighContrast {
-  color: var(--UI-Text-High-contrast);
-}
-
-.uiTextMediumContrast {
-  color: var(--UI-Text-Medium-contrast);
+.ctaWrapper {
+  margin-top: var(--Space-x15);
 }

apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/TotalPrice/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { cx } from "class-variance-authority"
 import { useIntl } from "react-intl"
 
 import { Divider } from "@scandic-hotels/design-system/Divider"
@@ -18,6 +19,7 @@ export default function TotalPrice() {
   const intl = useIntl()
   const { rooms, formattedTotalCost } = useBookingConfirmationStore(
     (state) => ({
+      bookingCode: state.bookingCode,
       rooms: state.rooms,
       formattedTotalCost: state.formattedTotalCost,
     })
@@ -25,35 +27,58 @@ export default function TotalPrice() {
 
   const hasAllRoomsLoaded = rooms.every((room) => room)
   const bookingCode = rooms.find((room) => room?.bookingCode)?.bookingCode
+  const isMemberRate = rooms.some((room) => room?.rateDefinition.isMemberRate)
+  const showDiscounted = bookingCode || isMemberRate
 
   return (
     <>
       <Divider color="Border/Divider/Subtle" />
       <div className={styles.price}>
         <div className={styles.entry}>
-          <Typography variant="Body/Paragraph/mdBold">
-            <p>
-              {intl.formatMessage({
-                defaultMessage: "Total price",
-              })}
-            </p>
-          </Typography>
-          {hasAllRoomsLoaded ? (
-            <Typography variant="Body/Paragraph/mdBold">
-              <p>{formattedTotalCost}</p>
+          <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>
-          ) : (
-            <SkeletonShimmer width={"25%"} />
-          )}
+            {/* TODO: Add approx price, we're currently not receiving this value from API  */}
+          </div>
+          <div className={styles.prices}>
+            {hasAllRoomsLoaded ? (
+              <Typography variant="Body/Paragraph/mdBold">
+                <span
+                  className={cx(styles.price, {
+                    [styles.discounted]: showDiscounted,
+                  })}
+                >
+                  {formattedTotalCost}
+                </span>
+              </Typography>
+            ) : (
+              <SkeletonShimmer width={"25%"} />
+            )}
+          </div>
         </div>
+      </div>
+      <div className={styles.ctaWrapper}>
         {hasAllRoomsLoaded ? (
           <PriceDetails />
         ) : (
-          <div className={styles.priceDetailsLoader}>
-            <SkeletonShimmer width={"100%"} />
-          </div>
+          <SkeletonShimmer width={"100%"} />
         )}
       </div>
+
       {bookingCode && <BookingCodeChip bookingCode={bookingCode} alignCenter />}
     </>
   )

apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/TotalPrice/totalPrice.module.css

@@ -1,12 +1,33 @@
 .entry {
   display: flex;
+  gap: var(--Space-x05);
   justify-content: space-between;
+  margin-bottom: var(--Space-x15);
 }
 
-.price button.btn {
-  padding: 0;
+.prices {
+  justify-items: flex-end;
+  flex-shrink: 0;
+  display: grid;
 }
 
-.priceDetailsLoader {
-  padding-top: var(--Spacing-x1);
+.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);
+}
+
+.ctaWrapper {
+  margin-top: var(--Space-x15);
 }

apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/index.tsx

@@ -2,10 +2,14 @@
 
 import { useIntl } from "react-intl"
 
+import { Divider } from "@scandic-hotels/design-system/Divider"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
+import { dt } from "@/lib/dt"
 import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
 
-import Body from "@/components/TempDesignSystem/Text/Body"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import useLang from "@/hooks/useLang"
 
 import Room from "./Room"
 import TotalPrice from "./TotalPrice"
@@ -13,31 +17,56 @@ import TotalPrice from "./TotalPrice"
 import styles from "./receipt.module.css"
 
 export default function Receipt() {
+  const lang = useLang()
   const intl = useIntl()
-  const rooms = useBookingConfirmationStore((state) => state.rooms)
+  const { rooms, fromDate, toDate } = useBookingConfirmationStore((state) => ({
+    rooms: state.rooms,
+    fromDate: state.fromDate,
+    toDate: state.toDate,
+  }))
+
+  const totalNights = dt(toDate).diff(fromDate, "days")
+
+  const nights = intl.formatMessage(
+    {
+      defaultMessage: "{totalNights, plural, one {# night} other {# nights}}",
+    },
+    { totalNights }
+  )
+
+  const filteredRooms = rooms.filter(
+    (room): room is NonNullable<typeof room> => !!room
+  )
 
   return (
     <section className={styles.receipt}>
-      <Subtitle type="two">
-        {intl.formatMessage({
-          defaultMessage: "Booking summary",
-        })}
-      </Subtitle>
+      <header>
+        <Typography variant="Title/Subtitle/md">
+          <h3 className={styles.heading}>
+            {intl.formatMessage({
+              defaultMessage: "Booking summary",
+            })}
+          </h3>
+        </Typography>
+        <Typography variant="Body/Paragraph/mdBold">
+          <p className={styles.dates}>
+            {dt(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(toDate).locale(lang).format("ddd, D MMM")} ({nights})
+          </p>
+        </Typography>
+      </header>
 
-      {rooms.map((room, idx) => (
-        <div key={room ? room.confirmationNumber : `loader-${idx}`}>
-          {rooms.length > 1 ? (
-            <Body color="uiTextHighContrast" textTransform={"bold"}>
-              {intl.formatMessage(
-                {
-                  defaultMessage: "Room {roomIndex}",
-                },
-                { roomIndex: idx + 1 }
-              )}
-            </Body>
-          ) : null}
-          <Room roomIndex={idx} />
-        </div>
+      <Divider color="Border/Divider/Subtle" />
+
+      {filteredRooms.map((room, idx) => (
+        <Room
+          key={room ? room.confirmationNumber : `loader-${idx}`}
+          room={room}
+          roomNumber={idx + 1}
+          roomCount={rooms.length}
+        />
       ))}
 
       <TotalPrice />

apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/receipt.module.css

@@ -1,11 +1,22 @@
 .receipt {
+  display: grid;
+  gap: var(--Space-x2);
+}
+
+.heading {
+  color: var(--Text-Default);
+}
+
+.dates {
   display: flex;
-  flex-direction: column;
-  gap: var(--Spacing-x-one-and-half);
+  align-items: center;
+  gap: var(--Space-x1);
+  justify-content: flex-start;
+  color: var(--Text-Accent-Secondary);
 }
 
 @media screen and (min-width: 1367px) {
   .receipt {
-    padding: var(--Spacing-x3);
+    padding: var(--Space-x3);
   }
 }