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