45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
|
|
import { formatPrice } from "@/utils/numberFormatting"
|
|
|
|
import styles from "./signupPromo.module.css"
|
|
|
|
import type { SignupPromoProps } from "@/types/components/hotelReservation/signupPromo"
|
|
|
|
export default function SignupPromoDesktop({
|
|
memberPrice,
|
|
badgeContent,
|
|
}: SignupPromoProps) {
|
|
const intl = useIntl()
|
|
if (!memberPrice) {
|
|
return null
|
|
}
|
|
const { amount, currency } = memberPrice
|
|
const price = formatPrice(intl, amount, currency)
|
|
|
|
return memberPrice ? (
|
|
<div className={styles.memberDiscountBannerDesktop}>
|
|
{badgeContent && <span className={styles.badge}>{badgeContent}</span>}
|
|
<Footnote color="burgundy">
|
|
{intl.formatMessage<React.ReactNode>(
|
|
{
|
|
id: "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
|
|
}
|