Merged in chore/BOOK-739-replace-caption (pull request #3428)

chore(BOOK-739): replace caption with typography

* chore(BOOK-739): replace caption with typography

* chore(BOOK-739): refactor div

* chore(BOOK-739): refactor badge

* chore(BOOK-739): remove span

* chore(BOOK-739): skeleton update

* chore(BOOK-739): update

* chore(BOOK-739): update reward

* chore(BOOK-739): update voucher currency


Approved-by: Erik Tiekstra

packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx

@@ -4,7 +4,7 @@ import { useState } from "react"
 import { useIntl } from "react-intl"
 
 import { selectRate } from "@scandic-hotels/common/constants/routes/hotelReservation"
-import Caption from "@scandic-hotels/design-system/Caption"
+import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
 import { FacilityToIcon } from "@scandic-hotels/design-system/FacilityToIcon"
 import { HotelCardDialogImage } from "@scandic-hotels/design-system/HotelCard/HotelCardDialogImage"
 import { HotelPointsRow } from "@scandic-hotels/design-system/HotelCard/HotelPointsRow"
@@ -61,6 +61,20 @@ export default function ListingHotelCardDialog({
     defaultMessage: "Not enough points",
   })
   const shouldShowNotEnoughPoints = redemptionPrice && !hasEnoughPoints
+  const label = redemptionPrice
+    ? intl.formatMessage({
+        id: "hotelCard.availableRates",
+        defaultMessage: "Available rates",
+      })
+    : chequePrice || voucherPrice
+      ? intl.formatMessage({
+          id: "common.from",
+          defaultMessage: "From",
+        })
+      : intl.formatMessage({
+          id: "listingHotelCardDialog.perNightFrom",
+          defaultMessage: "Per night from",
+        })
 
   return (
     <div className={styles.container}>
@@ -112,21 +126,10 @@ export default function ListingHotelCardDialog({
         chequePrice ? (
           <div className={styles.bottomContainer}>
             <div className={styles.pricesContainer}>
-              {redemptionPrice ? (
-                <Caption color="uiTextHighContrast">
-                  {intl.formatMessage({
-                    id: "hotelCard.availableRates",
-                    defaultMessage: "Available rates",
-                  })}
-                </Caption>
-              ) : (
-                <Caption color="uiTextHighContrast">
-                  {intl.formatMessage({
-                    id: "listingHotelCardDialog.perNightFrom",
-                    defaultMessage: "Per night from",
-                  })}
-                </Caption>
-              )}
+              <Typography variant="Body/Supporting text (caption)/smRegular">
+                <p>{label}</p>
+              </Typography>
+
               <div className={styles.listingPrices}>
                 {publicPrice && !isUserLoggedIn ? (
                   <>
@@ -135,8 +138,15 @@ export default function ListingHotelCardDialog({
                         {publicPrice} {currency}
                       </p>
                     </Typography>
-                    {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                    {memberPrice && <Caption>/</Caption>}
+                    {memberPrice && (
+                      <Typography
+                        variant="Body/Supporting text (caption)/smRegular"
+                        className={styles.divider}
+                      >
+                        {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
+                        <p>/</p>
+                      </Typography>
+                    )}
                   </>
                 ) : (
                   bookingCode &&
@@ -206,44 +216,12 @@ export default function ListingHotelCardDialog({
                           : null}
                       </span>
                     </Typography>
-
-                    <Typography variant="Body/Paragraph/mdRegular">
-                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                      <span>
-                        /
-                        {intl.formatMessage({
-                          id: "common.night",
-                          defaultMessage: "night",
-                        })}
-                      </span>
-                    </Typography>
                   </>
                 )}
                 {voucherPrice && (
                   <>
                     <Typography variant="Title/Subtitle/md">
-                      <p>
-                        {intl.formatMessage(
-                          {
-                            id: "common.priceCurrency",
-                            defaultMessage: "{price} {currency}",
-                          },
-                          {
-                            price: voucherPrice,
-                            currency,
-                          }
-                        )}
-                      </p>
-                    </Typography>
-                    <Typography variant="Body/Paragraph/mdRegular">
-                      {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
-                      <span>
-                        /
-                        {intl.formatMessage({
-                          id: "common.night",
-                          defaultMessage: "night",
-                        })}
-                      </span>
+                      <p>{formatPrice(intl, voucherPrice, currency)}</p>
                     </Typography>
                   </>
                 )}

packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css

@@ -19,6 +19,9 @@
   gap: var(--Space-x15);
 }
 
+.divider {
+  color: var(--Text-Tertiary);
+}
 .red {
   color: var(--Text-Accent-Primary);
 }