scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Bianca Widstam
2026-01-14 09:33:27 +00:00
parent d284e82828
commit d9ec1b1f2d
53 changed files with 465 additions and 673 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
View File

@@ -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({
<p>{room.roomType}</p>
</Typography>
<div className={styles.priceRow}>
<Caption color="uiTextMediumContrast">
{intl.formatMessage({
id: "priceDetails.roomCharge",
defaultMessage: "Room charge",
})}
</Caption>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{intl.formatMessage({
id: "priceDetails.roomCharge",
defaultMessage: "Room charge",
})}
</p>
</Typography>
{newPrice ? (
<div className={styles.updatedPrice}>
<Caption color="uiTextMediumContrast" striked>
{formatPrice(
intl,
room.roomPrice.perStay.local.price,
room.roomPrice.perStay.local.currency
)}
</Caption>
<Typography
variant="Body/Supporting text (caption)/smRegular"
className={styles.prevPrice}
>
<p>
{formatPrice(
intl,
room.roomPrice.perStay.local.price,
room.roomPrice.perStay.local.currency
)}
</p>
</Typography>
<Typography variant="Body/Paragraph/mdBold">
<p>
{formatPrice(
@@ -133,32 +139,38 @@ export default function PriceChangeSummary({
</Typography>
</div>
) : (
<Caption color="uiTextMediumContrast">
{formatPrice(
intl,
room.roomPrice.perStay.local.price,
room.roomPrice.perStay.local.currency
)}
</Caption>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{formatPrice(
intl,
room.roomPrice.perStay.local.price,
room.roomPrice.perStay.local.currency
)}
</p>
</Typography>
)}
</div>
{room.breakfast && (
<div className={styles.priceRow}>
<Caption color="uiTextMediumContrast">
{intl.formatMessage({
id: "enterDetails.priceChangeDialog.breakfastCharge",
defaultMessage: "Breakfast charge",
})}
</Caption>
<Caption color="uiTextMediumContrast">
{formatPrice(
intl,
Number(
room.breakfast.localPrice.totalPrice
),
room.breakfast.localPrice.currency
)}
</Caption>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{intl.formatMessage({
id: "enterDetails.priceChangeDialog.breakfastCharge",
defaultMessage: "Breakfast charge",
})}
</p>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{formatPrice(
intl,
Number(
room.breakfast.localPrice.totalPrice
),
room.breakfast.localPrice.currency
)}
</p>
</Typography>
</div>
)}
{room.roomFeatures?.map((feature) => (
@@ -166,20 +178,24 @@ export default function PriceChangeSummary({
className={styles.priceRow}
key={feature.itemCode}
>
<Caption color="uiTextMediumContrast">
{getRoomFeatureDescription(
feature.code,
feature.description,
intl
)}
</Caption>
<Caption color="uiTextMediumContrast">
{formatPrice(
intl,
Number(feature.localPrice.totalPrice),
feature.localPrice.currency
)}
</Caption>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{getRoomFeatureDescription(
feature.code,
feature.description,
intl
)}
</p>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{formatPrice(
intl,
Number(feature.localPrice.totalPrice),
feature.localPrice.currency
)}
</p>
</Typography>
</div>
))}
</div>

4
packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/PriceChangeSummary/priceChangeSummary.module.css
View File

@@ -59,6 +59,10 @@
color: var(--UI-Text-Medium-contrast);
}
.prevPrice {
text-decoration: line-through;
}
.updatedPrice {
display: flex;
align-items: center;

10
packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/index.tsx
View File

@@ -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({
</p>
</Typography>
<div className={styles.prices}>
<Caption striked>
{formatPrice(intl, prevTotalPrice, currency)}
</Caption>
<Typography
variant="Body/Supporting text (caption)/smRegular"
className={styles.prevPrice}
>
<p>{formatPrice(intl, prevTotalPrice, currency)}</p>
</Typography>
<Typography variant="Body/Paragraph/mdBold">
<p style={{ textAlign: "center" }}>
{formatPrice(intl, newTotalPrice, currency)}

4
packages/booking-flow/lib/components/EnterDetails/PriceChangeDialog/priceChangeDialog.module.css
View File

@@ -63,6 +63,10 @@
width: 100dvw;
}
.prevPrice {
text-decoration: line-through;
}
.header {
display: flex;
flex-direction: column;