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
+}

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

@@ -0,0 +1,23 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import Footnote from "@scandic-hotels/design-system/Footnote"
+
+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({
+          defaultMessage: "Join or log in while booking for member pricing.",
+        })}
+      </Footnote>
+    </div>
+  )
+}

packages/booking-flow/lib/components/SignupPromo/signupPromo.module.css

@@ -0,0 +1,44 @@
+.memberDiscountBannerMobile {
+  width: 100%;
+  background: var(--Primary-Light-Surface-Normal);
+  padding: var(--Spacing-x-one-and-half);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.memberDiscountBannerDesktop {
+  display: none;
+  background: var(--Primary-Light-Surface-Normal);
+  border-radius: var(--Corner-radius-xl) var(--Corner-radius-xl) 0px
+    var(--Corner-radius-xl);
+  align-items: center;
+  padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
+  gap: var(--Spacing-x2);
+  position: relative;
+}
+
+.badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: -12px;
+  left: -12px;
+  height: 30px;
+  width: 30px;
+  background-color: var(--Main-Grey-White);
+  border-radius: 50%;
+  font-size: 24px;
+  overflow: hidden;
+}
+
+@media (min-width: 1367px) {
+  .memberDiscountBannerMobile {
+    display: none;
+  }
+
+  .memberDiscountBannerDesktop {
+    display: flex;
+  }
+}