feat: add SignupPromo component

components/HotelReservation/SignupPromo/Desktop.tsx

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