feat: add SignupPromo component

2024-12-03 14:56:20 +01:00
parent 963df41ed5
commit 083ba28f9e
15 changed files with 170 additions and 65 deletions
@@ -0,0 +1,43 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+import styles from "./signupPromo.module.css"
+
+import { 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 = intl.formatNumber(amount, { currency, style: "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
+}
@@ -0,0 +1,20 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import Footnote from "@/components/TempDesignSystem/Text/Footnote"
+
+import styles from "./signupPromo.module.css"
+
+export default function SignupPromoMobile() {
+  const intl = useIntl()
+  return (
+    <div className={styles.memberDiscountBannerMobile}>
+      <Footnote color="burgundy">
+        {intl.formatMessage({
+          id: "Join or log in while booking for member pricing.",
+        })}
+      </Footnote>
+    </div>
+  )
+}
@@ -0,0 +1,43 @@
+.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-xLarge) var(--Corner-radius-xLarge) 0px
+    var(--Corner-radius-xLarge);
+  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: 768px) {
+  .memberDiscountBannerMobile {
+    display: none;
+  }
+
+  .memberDiscountBannerDesktop {
+    display: flex;
+  }
+}