feat: add SignupPromo component

components/HotelReservation/SelectRate/RoomSelection/RateSummary/index.tsx

@@ -3,6 +3,8 @@ import { useIntl } from "react-intl"
 
 import { dt } from "@/lib/dt"
 
+import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
+import SignupPromoMobile from "@/components/HotelReservation/SignupPromo/Mobile"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -72,15 +74,7 @@ export default function RateSummary({
 
   return (
     <div className={styles.summary} data-visible={isVisible}>
-      {showMemberDiscountBanner && (
-        <div className={styles.memberDiscountBannerMobile}>
-          <Footnote color="burgundy">
-            {intl.formatMessage({
-              id: "Join or log in while booking for member pricing.",
-            })}
-          </Footnote>
-        </div>
-      )}
+      {showMemberDiscountBanner && <SignupPromoMobile />}
       <div className={styles.content}>
         <div className={styles.summaryText}>
           <Subtitle color="uiTextHighContrast">{roomType}</Subtitle>
@@ -88,23 +82,13 @@ export default function RateSummary({
         </div>
         <div className={styles.summaryPriceContainer}>
           {showMemberDiscountBanner && (
-            <div className={styles.memberDiscountBannerDesktop}>
-              <Footnote color="burgundy">
-                {intl.formatMessage<React.ReactNode>(
-                  {
-                    id: "To get the member price <span>{amount} {currency}</span>, log in or join when completing the booking.",
-                  },
-                  {
-                    span: (str) => (
-                      <Caption color="red" type="bold" asChild>
-                        <span>{str}</span>
-                      </Caption>
-                    ),
-                    amount: member.localPrice.pricePerStay,
-                    currency: member.localPrice.currency,
-                  }
-                )}
-              </Footnote>
+            <div className={styles.promoContainer}>
+              <SignupPromoDesktop
+                memberPrice={{
+                  amount: member.localPrice.pricePerStay,
+                  currency: member.localPrice.currency,
+                }}
+              />
             </div>
           )}
           <div className={styles.summaryPriceTextDesktop}>

components/HotelReservation/SelectRate/RoomSelection/RateSummary/rateSummary.module.css

@@ -33,7 +33,12 @@
   width: 100%;
 }
 
+.promoContainer {
+  display: none;
+  max-width: 264px;
+}
 .summaryPrice {
+  align-self: center;
   display: flex;
   width: 100%;
   gap: var(--Spacing-x4);
@@ -50,6 +55,7 @@
 }
 
 .summaryPriceTextDesktop {
+  align-self: center;
   display: none;
 }
 
@@ -64,27 +70,6 @@
   white-space: nowrap;
 }
 
-.memberDiscountBannerDesktop {
-  display: none;
-  background: var(--Primary-Light-Surface-Normal);
-  border-radius: var(--Corner-radius-xLarge) var(--Corner-radius-xLarge) 0px
-    var(--Corner-radius-xLarge);
-  flex-direction: row;
-  align-items: center;
-  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
-  gap: var(--Spacing-x2);
-  max-width: 264px;
-}
-
-.memberDiscountBannerMobile {
-  width: 100%;
-  background: var(--Primary-Light-Surface-Normal);
-  padding: var(--Spacing-x-one-and-half);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
 @media (min-width: 768px) {
   .summary {
     padding: var(--Spacing-x3) var(--Spacing-x7) var(--Spacing-x5);
@@ -93,15 +78,12 @@
     flex-direction: row;
   }
   .petInfo,
+  .promoContainer,
   .summaryText,
   .summaryPriceTextDesktop {
     display: block;
   }
-  .memberDiscountBannerDesktop {
-    display: flex;
-  }
-  .summaryPriceTextMobile,
-  .memberDiscountBannerMobile {
+  .summaryPriceTextMobile {
     display: none;
   }
   .summaryPrice,