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

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

* Update texts for SAS variant


Approved-by: Hrishikesh Vaipurkar

packages/booking-flow/lib/components/SignupPromo/Desktop.tsx

@@ -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
+        <Message price={price} isEnterDetailsPage={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,
-              }
-            )}
       </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,
+    }
+  )
+}

packages/booking-flow/lib/components/SignupPromo/Mobile.tsx

@@ -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({
+        <Message />
-          id: "signup.joinOrLoginForMemberPricing",
-          defaultMessage: "Join or log in while booking for member pricing.",
-        })}
       </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.",
+  })
+}