Merged in feat/SW-829-rate-summary-UI (pull request #886)

Feat/SW-829 rate summary UI Approved-by: Niclas Edenvin
2024-11-13 14:38:08 +00:00
parent 7c2facab40 80377f4e4e
commit 92b8603ec0
12 changed files with 168 additions and 61 deletions
--- a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
+++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx
@@ -52,69 +52,116 @@ export default function RateSummary({
  const checkOutDate = new Date(roomsAvailability.checkOutDate)
  const nights = dt(checkOutDate).diff(dt(checkInDate), "days")

+  const showMemberDiscountBanner = member && !isUserLoggedIn
+
+  const summaryPriceTex = `${intl.formatMessage(
+    { id: "booking.nights" },
+    { totalNights: nights }
+  )}, ${intl.formatMessage(
+    { id: "booking.adults" },
+    { totalAdults: roomsAvailability.occupancy?.adults }
+  )}${
+    roomsAvailability.occupancy?.children?.length
+      ? `, ${intl.formatMessage(
+          { id: "booking.children" },
+          { totalChildren: roomsAvailability.occupancy.children.length }
+        )}`
+      : ""
+  }`
+
  return (
    <div className={styles.summary} data-visible={isVisible}>
+      {showMemberDiscountBanner && (
+        <div className={styles.memberDiscountBannerMobile}>
+          <Footnote color="burgundy">
+            {intl.formatMessage({
+              id: "Join or log in while booking for member pricing.",
+            })}
+          </Footnote>
+        </div>
+      )}
      <div className={styles.summaryText}>
        <Subtitle color="uiTextHighContrast">{roomType}</Subtitle>
        <Body color="uiTextMediumContrast">{priceName}</Body>
      </div>
-      <div className={styles.summaryPrice}>
-        <div className={styles.summaryPriceTextDesktop}>
-          <Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
-            {priceToShow?.localPrice.pricePerStay}{" "}
-            {priceToShow?.localPrice.currency}
-          </Subtitle>
-          <Body color="uiTextMediumContrast">
-            {intl.formatMessage({ id: "Approx." })}{" "}
-            {priceToShow?.requestedPrice?.pricePerStay}{" "}
-            {priceToShow?.requestedPrice?.currency}
-          </Body>
-        </div>
-        <div className={styles.summaryPriceTextMobile}>
-          <Caption color="uiTextHighContrast">
-            {intl.formatMessage({ id: "Total price" })}
-          </Caption>
-          <Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
-            {priceToShow?.localPrice.pricePerStay}{" "}
-            {priceToShow?.localPrice.currency}
-          </Subtitle>
-          <Footnote
-            color="uiTextMediumContrast"
-            className={styles.summaryPriceTextMobile}
-          >
-            {intl.formatMessage(
-              { id: "booking.nights" },
-              { totalNights: nights }
-            )}
-            ,{" "}
-            {intl.formatMessage(
-              { id: "booking.adults" },
-              { totalAdults: roomsAvailability.occupancy?.adults }
-            )}
-            {roomsAvailability.occupancy?.children?.length && (
-              <>
-                ,{" "}
-                {intl.formatMessage(
-                  { id: "booking.children" },
-                  { totalChildren: roomsAvailability.occupancy.children.length }
-                )}
-              </>
-            )}
-          </Footnote>
-        </div>
-        {isPetRoomSelected && (
-          <div className={styles.petInfo}>
-            <Body color="uiTextHighContrast" textTransform="bold">
-              + {petRoomPrice} {petRoomCurrency}
-            </Body>
-            <Body color="uiTextMediumContrast">
-              {intl.formatMessage({ id: "Pet charge" })}
-            </Body>
+      <div className={styles.summaryPriceContainer}>
+        {showMemberDiscountBanner && (
+          <div className={styles.memberDiscountBannerDesktop}>
+            <Footnote color="burgundy">
+              {intl.formatMessage<React.ReactNode>(
+                {
+                  id: "To get the member price <span>{amount} {currency}</span>, log in or join when completing the booking.",
+                },
+                {
+                  span: (str) => (
+                    <Caption color="red" type="bold" asChild>
+                      <span>{str}</span>
+                    </Caption>
+                  ),
+                  amount: member.localPrice.pricePerStay,
+                  currency: member.localPrice.currency,
+                }
+              )}
+            </Footnote>
          </div>
        )}
-        <Button type="submit" theme="base" className={styles.continueButton}>
-          {intl.formatMessage({ id: "Continue" })}
-        </Button>
+        <div className={styles.summaryPriceTextDesktop}>
+          <Body>
+            {intl.formatMessage<React.ReactNode>(
+              { id: "<b>Total price</b> (incl VAT)" },
+              { b: (str) => <b>{str}</b> }
+            )}
+          </Body>
+          <Caption color="uiTextMediumContrast">{summaryPriceTex}</Caption>
+        </div>
+        <div className={styles.summaryPrice}>
+          <div className={styles.summaryPriceTextDesktop}>
+            <Subtitle
+              color={isUserLoggedIn ? "red" : "uiTextHighContrast"}
+              textAlign="right"
+            >
+              {priceToShow?.localPrice.pricePerStay}{" "}
+              {priceToShow?.localPrice.currency}
+            </Subtitle>
+            <Body color="uiTextMediumContrast">
+              {intl.formatMessage({ id: "Approx." })}{" "}
+              {priceToShow?.requestedPrice?.pricePerStay}{" "}
+              {priceToShow?.requestedPrice?.currency}
+            </Body>
+          </div>
+          <div className={styles.summaryPriceTextMobile}>
+            <Caption color="uiTextHighContrast">
+              {intl.formatMessage({ id: "Total price" })}
+            </Caption>
+            <Subtitle color={isUserLoggedIn ? "red" : "uiTextHighContrast"}>
+              {priceToShow?.localPrice.pricePerStay}{" "}
+              {priceToShow?.localPrice.currency}
+            </Subtitle>
+            <Footnote
+              color="uiTextMediumContrast"
+              className={styles.summaryPriceTextMobile}
+            >
+              {summaryPriceTex}
+            </Footnote>
+          </div>
+          {isPetRoomSelected && (
+            <div className={styles.petInfo}>
+              <Body
+                color="uiTextHighContrast"
+                textTransform="bold"
+                textAlign="right"
+              >
+                + {petRoomPrice} {petRoomCurrency}
+              </Body>
+              <Body color="uiTextMediumContrast" textAlign="right">
+                {intl.formatMessage({ id: "Pet charge" })}
+              </Body>
+            </div>
+          )}
+          <Button type="submit" theme="base" className={styles.continueButton}>
+            {intl.formatMessage({ id: "Continue" })}
+          </Button>
+        </div>
      </div>
    </div>
  )
--- a/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css
+++ b/components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css
@@ -5,8 +5,9 @@
  left: 0;
  right: 0;
  background-color: var(--Base-Surface-Primary-light-Normal);
-  padding: var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x5);
+  padding: 0 0 var(--Spacing-x5);
  display: flex;
+  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--Base-Border-Subtle);
@@ -17,6 +18,14 @@
  bottom: 0;
 }

+.summaryPriceContainer {
+  display: flex;
+  flex-direction: row;
+  gap: var(--Spacing-x4);
+  padding: var(--Spacing-x2) var(--Spacing-x3) 0;
+  width: 100%;
+}
+
 .summaryPrice {
  display: flex;
  width: 100%;
@@ -48,22 +57,50 @@
  white-space: nowrap;
 }

+.memberDiscountBannerDesktop {
+  display: none;
+  background: var(--Primary-Light-Surface-Normal);
+  border-radius: var(--Corner-radius-xLarge) var(--Corner-radius-xLarge) 0px
+    var(--Corner-radius-xLarge);
+  flex-direction: row;
+  align-items: center;
+  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  gap: var(--Spacing-x2);
+  max-width: 264px;
+}
+
+.memberDiscountBannerMobile {
+  width: 100%;
+  background: var(--Primary-Light-Surface-Normal);
+  padding: var(--Spacing-x-one-and-half);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
@media (min-width: 768px) {
  .summary {
-    padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
+    padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x5);
+    flex-direction: row;
  }
  .petInfo,
  .summaryText,
  .summaryPriceTextDesktop {
    display: block;
  }
-  .summaryPriceTextMobile {
+  .memberDiscountBannerDesktop {
+    display: flex;
+  }
+  .summaryPriceTextMobile,
+  .memberDiscountBannerMobile {
    display: none;
  }
-  .summaryPrice {
-    width: auto;
-  }
+  .summaryPrice,
  .continueButton {
    width: auto;
  }
+  .summaryPriceContainer {
+    width: auto;
+    padding: 0;
+  }
 }
--- a/components/TempDesignSystem/Text/Body/body.module.css
+++ b/components/TempDesignSystem/Text/Body/body.module.css
@@ -52,6 +52,10 @@
  text-align: left;
 }

+.textAlignRight {
+  text-align: right;
+}
+
 .black {
  color: var(--Main-Grey-100);
 }
--- a/components/TempDesignSystem/Text/Body/variants.ts
+++ b/components/TempDesignSystem/Text/Body/variants.ts
@@ -30,6 +30,7 @@ const config = {
    textAlign: {
      center: styles.textAlignCenter,
      left: styles.textAlignLeft,
+      right: styles.textAlignRight,
    },
    textTransform: {
      bold: styles.bold,
@@ -52,6 +53,7 @@ const fontOnlyconfig = {
    textAlign: {
      center: styles.textAlignCenter,
      left: styles.textAlignLeft,
+      right: styles.textAlignRight,
    },
    textTransform: {
      bold: styles.bold,
--- a/components/TempDesignSystem/Text/Subtitle/subtitle.module.css
+++ b/components/TempDesignSystem/Text/Subtitle/subtitle.module.css
@@ -47,6 +47,10 @@
  text-align: left;
 }

+.right {
+  text-align: right;
+}
+
 .black {
  color: var(--Main-Grey-100);
 }
--- a/components/TempDesignSystem/Text/Subtitle/variants.ts
+++ b/components/TempDesignSystem/Text/Subtitle/variants.ts
@@ -18,6 +18,7 @@ const config = {
    textAlign: {
      center: styles.center,
      left: styles.left,
+      right: styles.right,
    },
    textTransform: {
      regular: styles.regular,