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

Merged in feat/sw-3547-update-member-rate-alert-text (pull request #2992)

Browse Source 
feat(SW-3547): Update texts for SAS variant member rate alert

* Update texts for SAS variant


Approved-by: Hrishikesh Vaipurkar
This commit is contained in:
Anton Gunnarsson
2025-10-22 12:33:13 +00:00
parent d6941042de
commit 03f17acbbe
2 changed files with 86 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
packages/booking-flow/lib/components/SignupPromo/Desktop.tsx
View File

@@ -6,6 +6,8 @@ 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 { useBookingFlowConfig } from "../../bookingFlowConfig/bookingFlowConfigContext"
import styles from "./signupPromo.module.css"
type SignupPromoProps = {
@@ -36,38 +38,71 @@ export default function SignupPromoDesktop({
>
{badgeContent && <span className={styles.badge}>{badgeContent}</span>}
<Footnote color="burgundy">
{isEnterDetailsPage
? intl.formatMessage(
{
id: "signup.toGetTheMemberRoomPrice",
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(
{
id: "signup.toGetTheMemberPrice",
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,
}
)}
<Message price={price} isEnterDetailsPage={isEnterDetailsPage} />
</Footnote>
</div>
) : null
}
function Message({
price,
isEnterDetailsPage,
}: {
price: string
isEnterDetailsPage: boolean
}) {
const intl = useIntl()
const config = useBookingFlowConfig()
if (config.variant === "partner-sas") {
return intl.formatMessage(
{
id: "signup.toGetTheScandicMemberPrice",
defaultMessage:
"To get the Scandic member price <span>{price}</span>, enter your ID or join while booking.",
},
{
span: (str) => (
<Caption color="red" type="bold" asChild>
<span>{str}</span>
</Caption>
),
price,
}
)
}
if (isEnterDetailsPage) {
return intl.formatMessage(
{
id: "signup.toGetTheMemberRoomPrice",
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,
}
)
}
return intl.formatMessage(
{
id: "signup.toGetTheMemberPrice",
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,
}
)
}

25
packages/booking-flow/lib/components/SignupPromo/Mobile.tsx
View File

@@ -4,21 +4,36 @@ import { useIntl } from "react-intl"
import Footnote from "@scandic-hotels/design-system/Footnote"
import { useBookingFlowConfig } from "../../bookingFlowConfig/bookingFlowConfigContext"
import styles from "./signupPromo.module.css"
export default function SignupPromoMobile() {
const intl = useIntl()
return (
<div
data-footer-spacing-signup
className={styles.memberDiscountBannerMobile}
>
<Footnote color="burgundy">
{intl.formatMessage({
id: "signup.joinOrLoginForMemberPricing",
defaultMessage: "Join or log in while booking for member pricing.",
})}
<Message />
</Footnote>
</div>
)
}
function Message() {
const intl = useIntl()
const config = useBookingFlowConfig()
if (config.variant === "partner-sas") {
return intl.formatMessage({
id: "signup.toGetTheScandicMemberPrice",
defaultMessage: "Enter ID or join to get the Scandic member price.",
})
}
return intl.formatMessage({
id: "signup.joinOrLoginForMemberPricing",
defaultMessage: "Join or log in while booking for member pricing.",
})
}