From d9ec1b1f2dc87292cafcd44643932b6e911d4b72 Mon Sep 17 00:00:00 2001 From: Bianca Widstam Date: Wed, 14 Jan 2026 09:33:27 +0000 Subject: [PATCH] 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 --- .../JobylonFeed/JobylonCard/index.tsx | 22 +-- .../JobylonCard/jobylonCard.module.css | 4 + .../DynamicContent/LoyaltyLevels/index.tsx | 32 ++--- .../LoyaltyLevels/loyaltyLevels.module.css | 1 + .../Rewards/Redeem/ActiveRedeemedBadge.tsx | 16 ++- .../Rewards/Redeem/Flows/Campaign.tsx | 21 +-- .../Rewards/Redeem/MembershipNumberBadge.tsx | 10 +- .../Rewards/Redeem/TimedRedeemedBadge.tsx | 16 ++- .../Rewards/Redeem/redeem.module.css | 1 + .../Stays/OldStayCard/index.tsx | 17 ++- .../components/DatePicker/Single/Desktop.tsx | 21 ++- .../ReferenceCard/PriceContainer/index.tsx | 21 +-- .../components/SasTierComparison/index.tsx | 7 +- .../sasTierComparison.module.css | 9 +- .../TempDesignSystem/AncillaryCard/index.tsx | 5 +- .../ClearSearchButton/button.module.css | 1 + .../SearchList/ClearSearchButton/index.tsx | 15 +-- .../FormContent/Search/SearchList/index.tsx | 14 +- .../Search/SearchList/searchList.module.css | 1 + .../FormContent/Voucher/index.tsx | 35 +++-- .../FormContent/Voucher/voucher.module.css | 2 + .../AdultSelector/adult-selector.module.css | 4 + .../GuestsRoomsPicker/AdultSelector/index.tsx | 11 +- .../ChildSelector/child-selector.module.css | 4 +- .../GuestsRoomsPicker/ChildSelector/index.tsx | 5 +- .../guests-rooms-picker.module.css | 1 + .../Details/RoomOne/Signup/index.tsx | 6 +- .../MixedRatePaymentBreakdown/index.tsx | 39 +++--- .../mixedRatePaymentBreakdown.module.css | 8 +- .../PriceChangeSummary/index.tsx | 116 +++++++++------- .../priceChangeSummary.module.css | 4 + .../EnterDetails/PriceChangeDialog/index.tsx | 10 +- .../priceChangeDialog.module.css | 4 + .../ListingHotelCardDialog/index.tsx | 80 ++++------- .../listingHotelCardDialog.module.css | 3 + .../RateSummary/DesktopSummary.tsx | 74 ++++------ .../RateSummary/rateSummary.module.css | 18 ++- .../SelectedRoomPanel/index.tsx | 15 ++- .../RoomListItem/RoomNotAvailable/index.tsx | 16 ++- .../RoomNotAvailable/notAvailable.module.css | 1 + .../lib/components/SignupPromo/Desktop.tsx | 23 +++- .../SignupPromo/signupPromo.module.css | 4 + .../lib/components/Caption/caption.module.css | 127 ------------------ .../lib/components/Caption/index.tsx | 48 ------- .../lib/components/Caption/variants.ts | 80 ----------- .../hotelChequeCard.module.css | 4 + .../HotelCard/HotelChequeCard/index.tsx | 67 +++++---- .../StandaloneHotelCardDialog/index.tsx | 15 ++- .../HotelCard/HotelVoucherCard/index.tsx | 42 +++--- .../lib/components/HotelCard/index.tsx | 15 ++- .../lib/components/ImageContainer/index.tsx | 10 +- .../lib/components/Switch/index.tsx | 12 +- packages/design-system/package.json | 1 - 53 files changed, 465 insertions(+), 673 deletions(-) delete mode 100644 packages/design-system/lib/components/Caption/caption.module.css delete mode 100644 packages/design-system/lib/components/Caption/index.tsx delete mode 100644 packages/design-system/lib/components/Caption/variants.ts diff --git a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx index 9c127663a..ce816befe 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx @@ -3,7 +3,6 @@ import { useIntl } from "react-intl" import { dt } from "@scandic-hotels/common/dt" -import Caption from "@scandic-hotels/design-system/Caption" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" @@ -41,15 +40,18 @@ export default function JobylonCard({ job }: JobylonCardProps) {
-
- {job.categories.map((cat) => cat.text).join(", ")} - - {job.locations - .map((loc) => `${loc.city}, ${loc.country}`) - .join(" | ")} - - {deadlineText} -
+ +
+

{job.categories.map((cat) => cat.text).join(", ")}

+

+ {job.locations + .map((loc) => `${loc.city}, ${loc.country}`) + .join(" | ")} +

+

{deadlineText}

+
+ +
) } diff --git a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx index 71731d8e4..57f937524 100644 --- a/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx +++ b/apps/scandic-web/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx @@ -2,7 +2,6 @@ import { useIntl } from "react-intl" -import Caption from "@scandic-hotels/design-system/Caption" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { toast } from "@scandic-hotels/design-system/Toast" @@ -31,15 +30,17 @@ export default function Campaign({ reward }: { reward: Campaign }) {

{reward.description}

- - {intl.formatMessage({ - id: "redeemFlow.promoCode", - defaultMessage: "Promo code", - })} - - - {reward.operaRewardId} - + +

+ {intl.formatMessage({ + id: "redeemFlow.promoCode", + defaultMessage: "Promo code", + })} +

+ + +

{reward.operaRewardId}

+
diff --git a/apps/scandic-web/components/DatePicker/Single/Desktop.tsx b/apps/scandic-web/components/DatePicker/Single/Desktop.tsx index 3cd04f42f..483f4039c 100644 --- a/apps/scandic-web/components/DatePicker/Single/Desktop.tsx +++ b/apps/scandic-web/components/DatePicker/Single/Desktop.tsx @@ -6,10 +6,9 @@ import { useIntl } from "react-intl" import { Lang } from "@scandic-hotels/common/constants/language" import { dt } from "@scandic-hotels/common/dt" -import Caption from "@scandic-hotels/design-system/Caption" +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 { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" import useLang from "@/hooks/useLang" @@ -115,19 +114,15 @@ export default function DatePickerSingleDesktop({ /> diff --git a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/index.tsx b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/index.tsx index c729fb08d..cacd1e9de 100644 --- a/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/index.tsx +++ b/apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/PriceContainer/index.tsx @@ -1,4 +1,3 @@ -import Caption from "@scandic-hotels/design-system/Caption" import { Typography } from "@scandic-hotels/design-system/Typography" import styles from "./priceContainer.module.css" @@ -23,15 +22,17 @@ export default function PriceContainer({ return (
- - {text} - - - {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} - {nightsText}, {adultsText} - {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} - {totalChildren > 0 ? `, ${childrenText}` : ""} - + +

{text}

+ + +

+ {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} + {nightsText}, {adultsText} + {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} + {totalChildren > 0 ? `, ${childrenText}` : ""} +

+
diff --git a/apps/scandic-web/components/SasTierComparison/index.tsx b/apps/scandic-web/components/SasTierComparison/index.tsx index 7729afa29..e7790dc29 100644 --- a/apps/scandic-web/components/SasTierComparison/index.tsx +++ b/apps/scandic-web/components/SasTierComparison/index.tsx @@ -1,7 +1,6 @@ "use client" import Image from "next/image" -import Caption from "@scandic-hotels/design-system/Caption" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" @@ -129,7 +128,7 @@ function TierDetails({
-

{tierMatch.title}

+

{tierMatch.title}
{children}
@@ -162,9 +161,9 @@ function ReadMoreLink({ function ColumnTitle({ children }: { children?: ReactNode }) { return (
- + {children} - +
) } diff --git a/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css b/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css index c4811f3f7..4da42892f 100644 --- a/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css +++ b/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css @@ -36,10 +36,6 @@ flex-direction: column; } -.title { - color: var(--Text-Heading); -} - .tierDetails { overflow: hidden; background-color: var(--Base-Surface-Primary-light-Normal); @@ -114,6 +110,11 @@ width: 100%; } +.tierMatch { + text-align: left; + color: var(--Text-Heading); +} + .tierTitles { cursor: pointer; padding: var(--Space-x05); diff --git a/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx b/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx index 68d28b62f..94cdaceda 100644 --- a/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/AncillaryCard/index.tsx @@ -1,7 +1,6 @@ import { useIntl } from "react-intl" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" -import Caption from "@scandic-hotels/design-system/Caption" import { Divider } from "@scandic-hotels/design-system/Divider" import Image from "@scandic-hotels/design-system/Image" import { Typography } from "@scandic-hotels/design-system/Typography" @@ -76,9 +75,9 @@ export function AncillaryCard({ ancillary }: AncillaryCardProps) {
{ancillary.description && ( - +
- + )}
diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/button.module.css b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/button.module.css index c235ef703..b2666efdf 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/button.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/button.module.css @@ -1,5 +1,6 @@ .button { align-items: center; + color: var(--Component-Button-Brand-Secondary-On-fill-Default); border: none; border-radius: var(--Corner-radius-md); cursor: pointer; diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/index.tsx b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/index.tsx index cb80e1364..99ff133f1 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/index.tsx +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/ClearSearchButton/index.tsx @@ -1,18 +1,17 @@ "use client" import { useIntl } from "react-intl" -import Caption from "@scandic-hotels/design-system/Caption" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" +import { Typography } from "@scandic-hotels/design-system/Typography" import { buttonVariants } from "./variants" import type { SearchListProps } from ".." -interface ClearSearchButtonProps - extends Pick< - SearchListProps, - "getItemProps" | "handleClearSearchHistory" | "highlightedIndex" - > { +interface ClearSearchButtonProps extends Pick< + SearchListProps, + "getItemProps" | "handleClearSearchHistory" | "highlightedIndex" +> { index: number } @@ -41,14 +40,14 @@ export default function ClearSearchButton({ type="button" > - + {intl.formatMessage({ id: "bookingWidget.search.clearSearches", defaultMessage: "Clear searches", })} - + ) } diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx index ab16e3c6d..de7dfd28e 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/index.tsx @@ -5,7 +5,6 @@ import { useFormContext } from "react-hook-form" import { useIntl } from "react-intl" import { useDebounceValue } from "usehooks-ts" -import Caption from "@scandic-hotels/design-system/Caption" import { Divider } from "@scandic-hotels/design-system/Divider" import Footnote from "@scandic-hotels/design-system/Footnote" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" @@ -306,10 +305,15 @@ function SearchListError({ getMenuProps={getMenuProps} variant="error" > - - - {caption} - + +

+ + {caption} +

+ {config.bookingCodeEnabled && (
- + + +
)} + +
+
+ + {vouchers} +
-
-
- - - {vouchers} - +
+ + {reward} +
- -
- - - {reward} - -
-
+
) } diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css index 9b851a779..8c5ffdd23 100644 --- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Voucher/voucher.module.css @@ -10,6 +10,7 @@ gap: var(--Space-x2); margin-top: var(--Space-x2); align-items: center; + color: var(--Text-Secondary); } .optionsContainer { @@ -18,6 +19,7 @@ } .voucherSkeletonContainer { padding: var(--Space-x1) var(--Space-x15); + color: var(--Text-Secondary); } .checkbox { diff --git a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/adult-selector.module.css b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/adult-selector.module.css index 60c4c8711..4951f5010 100644 --- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/adult-selector.module.css +++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/adult-selector.module.css @@ -3,3 +3,7 @@ justify-content: space-between; align-items: center; } + +.label { + color: var(--Text-Default); +} diff --git a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/index.tsx b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/index.tsx index fbf84beb4..21f14313f 100644 --- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/index.tsx +++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/AdultSelector/index.tsx @@ -3,8 +3,8 @@ import { useFormContext } from "react-hook-form" import { useIntl } from "react-intl" -import Caption from "@scandic-hotels/design-system/Caption" import Stepper from "@scandic-hotels/design-system/Stepper" +import { Typography } from "@scandic-hotels/design-system/Typography" import styles from "./adult-selector.module.css" @@ -38,9 +38,12 @@ export default function AdultSelector({ return (
- - {adultsLabel} - + +

{adultsLabel}

+
- +

{childrenLabel}
- + {intl.formatMessage({ id: "common.birthDate", defaultMessage: "Birth date", })} - +
- - {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} - {title}{" "} - + +

{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} - {"/ "} - {intl.formatMessage( - { - id: "booking.roomIndex", - defaultMessage: "Room {roomIndex}", - }, - { - roomIndex: roomIndexes.map((idx) => idx + 1).join(" & "), - } - )} - - + {title}{" "} + + {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} + {"/ "} + {intl.formatMessage( + { + id: "booking.roomIndex", + defaultMessage: "Room {roomIndex}", + }, + { + roomIndex: roomIndexes.map((idx) => idx + 1).join(" & "), + } + )} + +

+

{formatPrice(intl, price, currency)} diff --git a/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css b/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css index 45f7b7c56..452a8103b 100644 --- a/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/Payment/MixedRatePaymentBreakdown/mixedRatePaymentBreakdown.module.css @@ -13,12 +13,8 @@ border-radius: var(--Corner-radius-md); } -.cardTitle { - text-transform: uppercase; -} - -.cardTitle > span { - color: var(--UI-Text-Placeholder); +.roomInfo { + color: var(--Text-Tertiary); } .card.inactive { diff --git a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx index 966428cd0..d6ef474c7 100644 --- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx @@ -10,7 +10,6 @@ import { import { useIntl } from "react-intl" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" -import Caption from "@scandic-hotels/design-system/Caption" import { Divider } from "@scandic-hotels/design-system/Divider" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" @@ -107,21 +106,28 @@ export default function PriceChangeSummary({

{room.roomType}
- - {intl.formatMessage({ - id: "priceDetails.roomCharge", - defaultMessage: "Room charge", - })} - + +

+ {intl.formatMessage({ + id: "priceDetails.roomCharge", + defaultMessage: "Room charge", + })} +

+ {newPrice ? (
- - {formatPrice( - intl, - room.roomPrice.perStay.local.price, - room.roomPrice.perStay.local.currency - )} - + +

+ {formatPrice( + intl, + room.roomPrice.perStay.local.price, + room.roomPrice.perStay.local.currency + )} +

+

{formatPrice( @@ -133,32 +139,38 @@ export default function PriceChangeSummary({

) : ( - - {formatPrice( - intl, - room.roomPrice.perStay.local.price, - room.roomPrice.perStay.local.currency - )} - + +

+ {formatPrice( + intl, + room.roomPrice.perStay.local.price, + room.roomPrice.perStay.local.currency + )} +

+ )}
{room.breakfast && (
- - {intl.formatMessage({ - id: "enterDetails.priceChangeDialog.breakfastCharge", - defaultMessage: "Breakfast charge", - })} - - - {formatPrice( - intl, - Number( - room.breakfast.localPrice.totalPrice - ), - room.breakfast.localPrice.currency - )} - + +

+ {intl.formatMessage({ + id: "enterDetails.priceChangeDialog.breakfastCharge", + defaultMessage: "Breakfast charge", + })} +

+ + +

+ {formatPrice( + intl, + Number( + room.breakfast.localPrice.totalPrice + ), + room.breakfast.localPrice.currency + )} +

+
)} {room.roomFeatures?.map((feature) => ( @@ -166,20 +178,24 @@ export default function PriceChangeSummary({ className={styles.priceRow} key={feature.itemCode} > - - {getRoomFeatureDescription( - feature.code, - feature.description, - intl - )} - - - {formatPrice( - intl, - Number(feature.localPrice.totalPrice), - feature.localPrice.currency - )} - + +

+ {getRoomFeatureDescription( + feature.code, + feature.description, + intl + )} +

+ + +

+ {formatPrice( + intl, + Number(feature.localPrice.totalPrice), + feature.localPrice.currency + )} +

+
))} diff --git a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css index 878c903b3..945d35ce3 100644 --- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css @@ -59,6 +59,10 @@ color: var(--UI-Text-Medium-contrast); } +.prevPrice { + text-decoration: line-through; +} + .updatedPrice { display: flex; align-items: center; diff --git a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx index 5ddfad135..f22f6cba7 100644 --- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx +++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx @@ -2,7 +2,6 @@ import { Dialog, Modal, ModalOverlay } from "react-aria-components" import { useIntl } from "react-intl" import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting" -import Caption from "@scandic-hotels/design-system/Caption" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton" import { Typography } from "@scandic-hotels/design-system/Typography" @@ -131,9 +130,12 @@ export default function PriceChangeDialog({

- - {formatPrice(intl, prevTotalPrice, currency)} - + +

{formatPrice(intl, prevTotalPrice, currency)}

+

{formatPrice(intl, newTotalPrice, currency)} diff --git a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css index 85fae4b2d..ba67a3ce1 100644 --- a/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css +++ b/packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css @@ -63,6 +63,10 @@ width: 100dvw; } +.prevPrice { + text-decoration: line-through; +} + .header { display: flex; flex-direction: column; diff --git a/packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx b/packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx index 7b1f66c79..b13513719 100644 --- a/packages/booking-flow/lib/components/ListingHotelCardDialog/index.tsx +++ b/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 (

@@ -112,21 +126,10 @@ export default function ListingHotelCardDialog({ chequePrice ? (
- {redemptionPrice ? ( - - {intl.formatMessage({ - id: "hotelCard.availableRates", - defaultMessage: "Available rates", - })} - - ) : ( - - {intl.formatMessage({ - id: "listingHotelCardDialog.perNightFrom", - defaultMessage: "Per night from", - })} - - )} + +

{label}

+ +
{publicPrice && !isUserLoggedIn ? ( <> @@ -135,8 +138,15 @@ export default function ListingHotelCardDialog({ {publicPrice} {currency}

- {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} - {memberPrice && /} + {memberPrice && ( + + {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} +

/

+ + )} ) : ( bookingCode && @@ -206,44 +216,12 @@ export default function ListingHotelCardDialog({ : null} - - - {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} - - / - {intl.formatMessage({ - id: "common.night", - defaultMessage: "night", - })} - - )} {voucherPrice && ( <> -

- {intl.formatMessage( - { - id: "common.priceCurrency", - defaultMessage: "{price} {currency}", - }, - { - price: voucherPrice, - currency, - } - )} -

- - - {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */} - - / - {intl.formatMessage({ - id: "common.night", - defaultMessage: "night", - })} - +

{formatPrice(intl, voucherPrice, currency)}

 )} diff --git a/packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css b/packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css index ac4dca6cf..9bdc7e0c2 100644 --- a/packages/booking-flow/lib/components/ListingHotelCardDialog/listingHotelCardDialog.module.css +++ b/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); } diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx index bfebf6031..88482daac 100644 --- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx +++ b/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({ )}

- {summaryPriceText} + +

{summaryPriceText}

+
@@ -169,17 +172,18 @@ export function DesktopSummary({

{showDiscounted && selectedRates.totalPrice.local.regularPrice && ( - - {formatPrice( - intl, - selectedRates.totalPrice.local.regularPrice, - selectedRates.totalPrice.local.currency - )} - +

+ {formatPrice( + intl, + selectedRates.totalPrice.local.regularPrice, + selectedRates.totalPrice.local.currency + )} +

+ )} {!!selectedRates.totalPrice.requested && ( )}
-
- - {intl.formatMessage({ - id: "common.totalPrice", - defaultMessage: "Total price", - })} - - -

- {formatPrice( - intl, - selectedRates.totalPrice.local.price, - selectedRates.totalPrice.local.currency, - selectedRates.totalPrice.local.additionalPrice, - selectedRates.totalPrice.local.additionalPriceCurrency - )} -

- - - {summaryPriceText} - -