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/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);
 }