72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
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 styles from "./signupPromo.module.css"
|
|
|
|
type SignupPromoProps = {
|
|
memberPrice: {
|
|
amount: number
|
|
currency: string
|
|
}
|
|
badgeContent?: string
|
|
isEnterDetailsPage?: boolean
|
|
}
|
|
|
|
export default function SignupPromoDesktop({
|
|
memberPrice,
|
|
badgeContent,
|
|
isEnterDetailsPage = false,
|
|
}: SignupPromoProps) {
|
|
const intl = useIntl()
|
|
if (!memberPrice) {
|
|
return null
|
|
}
|
|
const { amount, currency } = memberPrice
|
|
const price = formatPrice(intl, amount, currency)
|
|
|
|
return memberPrice ? (
|
|
<div
|
|
className={styles.memberDiscountBannerDesktop}
|
|
data-testid="signup-promo-desktop"
|
|
>
|
|
{badgeContent && <span className={styles.badge}>{badgeContent}</span>}
|
|
<Footnote color="burgundy">
|
|
{isEnterDetailsPage
|
|
? intl.formatMessage(
|
|
{
|
|
defaultMessage:
|
|
"To get the member room price <span>{price}</span>, log in or join when completing the booking.",
|
|
},
|
|
{
|
|
span: (str) => (
|
|
<Caption color="red" type="bold" asChild>
|
|
<span>{str}</span>
|
|
</Caption>
|
|
),
|
|
price,
|
|
}
|
|
)
|
|
: intl.formatMessage(
|
|
{
|
|
defaultMessage:
|
|
"To get the member price <span>{price}</span>, log in or join when completing the booking.",
|
|
},
|
|
{
|
|
span: (str) => (
|
|
<Caption color="red" type="bold" asChild>
|
|
<span>{str}</span>
|
|
</Caption>
|
|
),
|
|
price,
|
|
}
|
|
)}
|
|
</Footnote>
|
|
</div>
|
|
) : null
|
|
}
|