Merged in chore/replace-deprecated-body (pull request #3300)
Replace deprecated <Body> with <Typography> * chore: replace deprecated body component * refactor: replace Body component with Typography across various components * merge Approved-by: Bianca Widstam Approved-by: Matilda Landström
This commit is contained in:
Joakim Jäderberg
@@ -6,11 +6,11 @@ import { FormProvider, useForm } from "react-hook-form"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
|
||||
import Body from "@scandic-hotels/design-system/Body"
|
||||
import RadioCard from "@scandic-hotels/design-system/Form/RadioCard"
|
||||
import BreakfastBuffetIcon from "@scandic-hotels/design-system/Icons/BreakfastBuffetIcon"
|
||||
import NoBreakfastBuffetIcon from "@scandic-hotels/design-system/Icons/NoBreakfastBuffetIcon"
|
||||
import { MessageBanner } from "@scandic-hotels/design-system/MessageBanner"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
import { trackBreakfastSelection } from "@scandic-hotels/tracking/booking"
|
||||
import { BreakfastPackageEnum } from "@scandic-hotels/trpc/enums/breakfast"
|
||||
|
||||
@@ -95,15 +95,17 @@ export default function Breakfast() {
|
||||
return (
|
||||
<FormProvider {...methods}>
|
||||
<div className={styles.container} ref={formRef}>
|
||||
{hasChildrenInRoom ? (
|
||||
<Body>
|
||||
{intl.formatMessage({
|
||||
id: "enterDetails.breakfast.childrenFreeInfo",
|
||||
defaultMessage:
|
||||
"Children's breakfast is always free as part of the adult's breakfast.",
|
||||
})}
|
||||
</Body>
|
||||
) : null}
|
||||
{hasChildrenInRoom && (
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
id: "enterDetails.breakfast.childrenFreeInfo",
|
||||
defaultMessage:
|
||||
"Children's breakfast is always free as part of the adult's breakfast.",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
)}
|
||||
{methods.formState.errors.breakfast && (
|
||||
<div className={styles.errorContainer}>
|
||||
<MessageBanner
|
||||
|
||||
@@ -6,7 +6,6 @@ import { useIntl } from "react-intl"
|
||||
|
||||
import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
|
||||
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
|
||||
import Body from "@scandic-hotels/design-system/Body"
|
||||
import MagicWandIcon from "@scandic-hotels/design-system/Icons/MagicWandIcon"
|
||||
import Modal from "@scandic-hotels/design-system/Modal"
|
||||
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
|
||||
@@ -67,12 +66,14 @@ export default function MemberPriceModal() {
|
||||
|
||||
{memberPrice && (
|
||||
<span className={styles.newPrice}>
|
||||
<Body>
|
||||
{intl.formatMessage({
|
||||
id: "enterDetails.memberPriceModal.newPriceLabel",
|
||||
defaultMessage: "The new price is",
|
||||
})}
|
||||
</Body>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
id: "enterDetails.memberPriceModal.newPriceLabel",
|
||||
defaultMessage: "The new price is",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
<Subtitle type="two" color="red">
|
||||
{formatPrice(
|
||||
intl,
|
||||
|
||||
@@ -2,8 +2,8 @@ import React from "react"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
|
||||
import Body from "@scandic-hotels/design-system/Body"
|
||||
import Caption from "@scandic-hotels/design-system/Caption"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import {
|
||||
calculateTotalRoomPrice,
|
||||
@@ -136,12 +136,14 @@ function PaymentCard({
|
||||
)}
|
||||
</span>
|
||||
</Caption>
|
||||
<Body textTransform="bold" className={styles.priceItem}>
|
||||
{formatPrice(intl, price, currency)}
|
||||
{isMemberRateApplied && comparisonPrice ? (
|
||||
<span>{formatPrice(intl, comparisonPrice, currency)}</span>
|
||||
) : null}
|
||||
</Body>
|
||||
<Typography variant="Body/Paragraph/mdBold" className={styles.priceItem}>
|
||||
<p>
|
||||
{formatPrice(intl, price, currency)}
|
||||
{isMemberRateApplied && comparisonPrice && (
|
||||
<span>{formatPrice(intl, comparisonPrice, currency)}</span>
|
||||
)}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -2,10 +2,10 @@
|
||||
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import Body from "@scandic-hotels/design-system/Body"
|
||||
import { LoadingSpinner } from "@scandic-hotels/design-system/LoadingSpinner"
|
||||
import Link from "@scandic-hotels/design-system/OldDSLink"
|
||||
import Subtitle from "@scandic-hotels/design-system/Subtitle"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { useBookingFlowConfig } from "../../../../../bookingFlowConfig/bookingFlowConfigContext"
|
||||
import useLang from "../../../../../hooks/useLang"
|
||||
@@ -26,26 +26,31 @@ export default function TimeoutSpinner() {
|
||||
defaultMessage: "Taking longer than usual",
|
||||
})}
|
||||
</Subtitle>
|
||||
<Body textAlign="center" className={styles.messageContainer}>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "enterDetails.payment.loadingMessage",
|
||||
defaultMessage:
|
||||
"We are still confirming your booking. This is usually a matter of minutes and we do apologise for the wait. Please check your inbox for a booking confirmation email and if you still haven't received it by end of day, please contact our <link>customer support</link>.",
|
||||
},
|
||||
{
|
||||
link: (text) => (
|
||||
<Link
|
||||
href={routes.customerService[lang]}
|
||||
textDecoration="underline"
|
||||
target="_blank"
|
||||
>
|
||||
{text}
|
||||
</Link>
|
||||
),
|
||||
}
|
||||
)}
|
||||
</Body>
|
||||
<Typography
|
||||
variant="Body/Paragraph/mdRegular"
|
||||
className={styles.messageContainer}
|
||||
>
|
||||
<p>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "enterDetails.payment.loadingMessage",
|
||||
defaultMessage:
|
||||
"We are still confirming your booking. This is usually a matter of minutes and we do apologise for the wait. Please check your inbox for a booking confirmation email and if you still haven't received it by end of day, please contact our <link>customer support</link>.",
|
||||
},
|
||||
{
|
||||
link: (text) => (
|
||||
<Link
|
||||
href={routes.customerService[lang]}
|
||||
textDecoration="underline"
|
||||
target="_blank"
|
||||
>
|
||||
{text}
|
||||
</Link>
|
||||
),
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -10,12 +10,12 @@ import {
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
|
||||
import Body from "@scandic-hotels/design-system/Body"
|
||||
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"
|
||||
import Subtitle from "@scandic-hotels/design-system/Subtitle"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { getRoomFeatureDescription } from "../../../../utils/getRoomFeatureDescription"
|
||||
|
||||
@@ -86,21 +86,25 @@ export default function PriceChangeSummary({
|
||||
return (
|
||||
<Fragment key={idx}>
|
||||
<div className={styles.rowContainer}>
|
||||
<Body textTransform="bold">
|
||||
{rooms.length > 1
|
||||
? intl.formatMessage(
|
||||
{
|
||||
id: "booking.roomIndex",
|
||||
defaultMessage: "Room {roomIndex}",
|
||||
},
|
||||
{ roomIndex: roomNumber }
|
||||
)
|
||||
: intl.formatMessage({
|
||||
id: "common.room",
|
||||
defaultMessage: "Room",
|
||||
})}
|
||||
</Body>
|
||||
<Body>{room.roomType}</Body>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p>
|
||||
{rooms.length > 1
|
||||
? intl.formatMessage(
|
||||
{
|
||||
id: "booking.roomIndex",
|
||||
defaultMessage: "Room {roomIndex}",
|
||||
},
|
||||
{ roomIndex: roomNumber }
|
||||
)
|
||||
: intl.formatMessage({
|
||||
id: "common.room",
|
||||
defaultMessage: "Room",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p>{room.roomType}</p>
|
||||
</Typography>
|
||||
<div className={styles.priceRow}>
|
||||
<Caption color="uiTextMediumContrast">
|
||||
{intl.formatMessage({
|
||||
@@ -117,16 +121,15 @@ export default function PriceChangeSummary({
|
||||
room.roomPrice.perStay.local.currency
|
||||
)}
|
||||
</Caption>
|
||||
<Body
|
||||
color="uiTextMediumContrast"
|
||||
textTransform="bold"
|
||||
>
|
||||
{formatPrice(
|
||||
intl,
|
||||
newPrice,
|
||||
room.roomPrice.perStay.local.currency
|
||||
)}
|
||||
</Body>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p>
|
||||
{formatPrice(
|
||||
intl,
|
||||
newPrice,
|
||||
room.roomPrice.perStay.local.currency
|
||||
)}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
) : (
|
||||
<Caption color="uiTextMediumContrast">
|
||||
@@ -185,26 +188,32 @@ export default function PriceChangeSummary({
|
||||
})}
|
||||
</div>
|
||||
<div className={styles.rowContainer}>
|
||||
<Body>
|
||||
{intl.formatMessage({
|
||||
id: "common.total",
|
||||
defaultMessage: "Total",
|
||||
})}
|
||||
</Body>
|
||||
<div className={styles.priceRow}>
|
||||
<Body textTransform="bold">
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
id: "booking.priceIncludingVat",
|
||||
defaultMessage: "Price including VAT",
|
||||
id: "common.total",
|
||||
defaultMessage: "Total",
|
||||
})}
|
||||
</Body>
|
||||
<Body textTransform="bold">
|
||||
{formatPrice(
|
||||
intl,
|
||||
newTotalPrice.price,
|
||||
newTotalPrice.currency
|
||||
)}
|
||||
</Body>
|
||||
</p>
|
||||
</Typography>
|
||||
<div className={styles.priceRow}>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p>
|
||||
{intl.formatMessage({
|
||||
id: "booking.priceIncludingVat",
|
||||
defaultMessage: "Price including VAT",
|
||||
})}
|
||||
</p>
|
||||
</Typography>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p>
|
||||
{formatPrice(
|
||||
intl,
|
||||
newTotalPrice.price,
|
||||
newTotalPrice.currency
|
||||
)}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -56,6 +56,7 @@
|
||||
.priceRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: var(--UI-Text-Medium-contrast);
|
||||
}
|
||||
|
||||
.updatedPrice {
|
||||
|
||||
@@ -2,12 +2,12 @@ import { Dialog, Modal, ModalOverlay } from "react-aria-components"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
|
||||
import Body from "@scandic-hotels/design-system/Body"
|
||||
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 Subtitle from "@scandic-hotels/design-system/Subtitle"
|
||||
import Title from "@scandic-hotels/design-system/Title"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { useEnterDetailsStore } from "../../../stores/enter-details"
|
||||
import { calculateTotalRoomPrice } from "../Payment/helpers"
|
||||
@@ -112,20 +112,22 @@ export default function PriceChangeDialog({
|
||||
{title}
|
||||
</Title>
|
||||
</div>
|
||||
<Body textAlign="center">
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "enterDetails.priceChangeDialog.description",
|
||||
defaultMessage:
|
||||
"Prices have increased since you selected your {roomSelection}.{linebreak} To continue your booking, accept the updated price,{linebreak} or go back to select {newRoomSelection}.",
|
||||
},
|
||||
{
|
||||
roomSelection: roomSelectionMsg,
|
||||
newRoomSelection: newRoomSelectionMsg,
|
||||
linebreak: <br />,
|
||||
}
|
||||
)}
|
||||
</Body>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<p style={{ textAlign: "center" }}>
|
||||
{intl.formatMessage(
|
||||
{
|
||||
id: "enterDetails.priceChangeDialog.description",
|
||||
defaultMessage:
|
||||
"Prices have increased since you selected your {roomSelection}.{linebreak} To continue your booking, accept the updated price,{linebreak} or go back to select {newRoomSelection}.",
|
||||
},
|
||||
{
|
||||
roomSelection: roomSelectionMsg,
|
||||
newRoomSelection: newRoomSelectionMsg,
|
||||
linebreak: <br />,
|
||||
}
|
||||
)}
|
||||
</p>
|
||||
</Typography>
|
||||
<div>
|
||||
<Subtitle textAlign="center" color="burgundy">
|
||||
{intl.formatMessage({
|
||||
@@ -137,9 +139,11 @@ export default function PriceChangeDialog({
|
||||
<Caption striked>
|
||||
{formatPrice(intl, prevTotalPrice, currency)}
|
||||
</Caption>
|
||||
<Body textAlign="center" textTransform="bold">
|
||||
{formatPrice(intl, newTotalPrice, currency)}
|
||||
</Body>
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p style={{ textAlign: "center" }}>
|
||||
{formatPrice(intl, newTotalPrice, currency)}
|
||||
</p>
|
||||
</Typography>
|
||||
</div>
|
||||
</div>
|
||||
<PriceChangeSummary
|
||||
|
||||
@@ -8,7 +8,6 @@ import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
|
||||
import { longDateFormat } from "@scandic-hotels/common/constants/dateFormats"
|
||||
import { dt } from "@scandic-hotels/common/dt"
|
||||
import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
|
||||
import Body from "@scandic-hotels/design-system/Body"
|
||||
import { BookingCodeChip } from "@scandic-hotels/design-system/BookingCodeChip"
|
||||
import { Divider } from "@scandic-hotels/design-system/Divider"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
@@ -108,18 +107,20 @@ export default function SummaryUI({
|
||||
defaultMessage: "Booking summary",
|
||||
})}
|
||||
</Subtitle>
|
||||
<Body className={styles.date} color="baseTextMediumContrast">
|
||||
{dt(booking.fromDate).locale(lang).format(longDateFormat[lang])}
|
||||
<MaterialIcon
|
||||
icon="arrow_right"
|
||||
color="Icon/Interactive/Secondary"
|
||||
size={15}
|
||||
/>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{dt(booking.toDate).locale(lang).format(longDateFormat[lang])} (
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{nightsMsg})
|
||||
</Body>
|
||||
<Typography variant="Body/Paragraph/mdRegular" className={styles.date}>
|
||||
<p>
|
||||
{dt(booking.fromDate).locale(lang).format(longDateFormat[lang])}
|
||||
<MaterialIcon
|
||||
icon="arrow_right"
|
||||
color="Icon/Interactive/Secondary"
|
||||
size={15}
|
||||
/>
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{dt(booking.toDate).locale(lang).format(longDateFormat[lang])} (
|
||||
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
|
||||
{nightsMsg})
|
||||
</p>
|
||||
</Typography>
|
||||
<MaterialIcon
|
||||
className={styles.chevronIcon}
|
||||
icon="keyboard_arrow_down"
|
||||
|
||||
@@ -28,6 +28,7 @@
|
||||
gap: var(--Space-x1);
|
||||
justify-content: flex-start;
|
||||
grid-area: date;
|
||||
color: var(--Base-Text-Medium-contrast);
|
||||
}
|
||||
|
||||
.link {
|
||||
|
||||
Reference in New Issue
Block a user