Merged in feat/sw-2874-move-select-rate (pull request #2750)

Approved-by: Joakim Jäderberg

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

@@ -0,0 +1,71 @@
+"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
+}