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:
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user