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/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx

@@ -3,8 +3,6 @@ import { useIntl } from "react-intl"
 
 import { RateEnum } from "@scandic-hotels/common/constants/rate"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-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 { Typography } from "@scandic-hotels/design-system/Typography"
 
@@ -148,7 +146,12 @@ export function DesktopSummary({
               )}
             </p>
           </Typography>
-          <Caption color="uiTextMediumContrast">{summaryPriceText}</Caption>
+          <Typography
+            variant="Body/Supporting text (caption)/smRegular"
+            className={styles.secondaryText}
+          >
+            <p>{summaryPriceText}</p>
+          </Typography>
         </div>
         <div className={styles.summaryPrice}>
           <div className={styles.summaryPriceTextDesktop}>
@@ -169,17 +172,18 @@ export function DesktopSummary({
               </p>
             </Typography>
             {showDiscounted && selectedRates.totalPrice.local.regularPrice && (
-              <Caption
-                textAlign="right"
-                color="uiTextMediumContrast"
-                striked={true}
+              <Typography
+                variant="Body/Supporting text (caption)/smRegular"
+                className={styles.regularPrice}
               >
-                {formatPrice(
-                  intl,
-                  selectedRates.totalPrice.local.regularPrice,
-                  selectedRates.totalPrice.local.currency
-                )}
-              </Caption>
+                <p>
+                  {formatPrice(
+                    intl,
+                    selectedRates.totalPrice.local.regularPrice,
+                    selectedRates.totalPrice.local.currency
+                  )}
+                </p>
+              </Typography>
             )}
             {!!selectedRates.totalPrice.requested && (
               <Typography
@@ -207,34 +211,6 @@ export function DesktopSummary({
               </Typography>
             )}
           </div>
-          <div className={styles.summaryPriceTextMobile}>
-            <Caption color="uiTextHighContrast">
-              {intl.formatMessage({
-                id: "common.totalPrice",
-                defaultMessage: "Total price",
-              })}
-            </Caption>
-            <Typography
-              variant="Title/Subtitle/md"
-              className={cx({ [styles.red]: showDiscounted })}
-            >
-              <p>
-                {formatPrice(
-                  intl,
-                  selectedRates.totalPrice.local.price,
-                  selectedRates.totalPrice.local.currency,
-                  selectedRates.totalPrice.local.additionalPrice,
-                  selectedRates.totalPrice.local.additionalPriceCurrency
-                )}
-              </p>
-            </Typography>
-            <Footnote
-              color="uiTextMediumContrast"
-              className={styles.summaryPriceTextMobile}
-            >
-              {summaryPriceText}
-            </Footnote>
-          </div>
           <Button
             className={styles.continueButton}
             disabled={!isAllRoomsSelected || isSubmitting}
@@ -308,15 +284,15 @@ function RateSummary({
               )}
             </p>
           </Typography>
-          <Typography
-            variant="Body/Paragraph/mdRegular"
-            className={styles.uiTextMediumContrast}
-          >
+          <Typography variant="Body/Paragraph/mdRegular">
             <p>{room.roomInfo.roomType}</p>
           </Typography>
-          <Caption color="uiTextMediumContrast">
-            {getRateDetails(room.rate)}
-          </Caption>
+          <Typography
+            variant="Body/Paragraph/mdRegular"
+            className={styles.secondaryText}
+          >
+            <p>{getRateDetails(room.rate)}</p>
+          </Typography>
         </>
       ) : (
         <>
@@ -325,7 +301,7 @@ function RateSummary({
           </Typography>
           <Typography
             variant="Body/Paragraph/mdRegular"
-            className={styles.uiTextMediumContrast}
+            className={styles.secondaryText}
           >
             <p>{getRateDetails(room.rate)}</p>
           </Typography>