feat: add SignupPromo component

components/HotelReservation/EnterDetails/Summary/Mobile/index.tsx

@@ -1,13 +1,30 @@
+"use client"
+
+import { useEnterDetailsStore } from "@/stores/enter-details"
+
+import SignupPromoMobile from "@/components/HotelReservation/SignupPromo/Mobile"
+
 import SummaryUI from "../UI"
 import SummaryBottomSheet from "./BottomSheet"
 
 import styles from "./mobile.module.css"
 
 import type { SummaryProps } from "@/types/components/hotelReservation/summary"
+import { DetailsState } from "@/types/stores/enter-details"
+
+function storeSelector(state: DetailsState) {
+  return {
+    join: state.guest.join,
+    membershipNo: state.guest.membershipNo,
+  }
+}
 
 export default function MobileSummary(props: SummaryProps) {
+  const { join, membershipNo } = useEnterDetailsStore(storeSelector)
+  const showPromo = !props.isMember && !join && !membershipNo
   return (
     <div className={styles.mobileSummary}>
+      {showPromo ? <SignupPromoMobile /> : null}
       <SummaryBottomSheet>
         <div className={styles.wrapper}>
           <SummaryUI {...props} />

components/HotelReservation/EnterDetails/Summary/UI/index.tsx

@@ -4,6 +4,7 @@ import { useIntl } from "react-intl"
 import { dt } from "@/lib/dt"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
+import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
 import { ArrowRightIcon, ChevronDownSmallIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
@@ -17,7 +18,6 @@ import useLang from "@/hooks/useLang"
 import styles from "./ui.module.css"
 
 import type { SummaryProps } from "@/types/components/hotelReservation/summary"
-import { CurrencyEnum } from "@/types/enums/currency"
 import type { DetailsState } from "@/types/stores/enter-details"
 
 export function storeSelector(state: DetailsState) {
@@ -60,10 +60,14 @@ export default function SummaryUI({
   const adults = booking.rooms[0].adults
   const children = booking.rooms[0].children
 
-  const showMemberPrice = !!(
-    (isMember || join || membershipNo) &&
-    roomRate.memberRate
-  )
+  const memberPrice = roomRate.memberRate
+    ? {
+        currency: roomRate.memberRate.localPrice.currency,
+        amount: roomRate.memberRate.localPrice.pricePerStay,
+      }
+    : null
+
+  const showMemberPrice = !!(isMember || join || membershipNo)
 
   const diff = dt(booking.toDate).diff(booking.fromDate, "days")
 
@@ -240,6 +244,9 @@ export default function SummaryUI({
         </div>
         <Divider className={styles.bottomDivider} color="primaryLightSubtle" />
       </div>
+      {!showMemberPrice && memberPrice ? (
+        <SignupPromoDesktop memberPrice={memberPrice} badgeContent={"✌️"} />
+      ) : null}
     </section>
   )
 }

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,

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

components/HotelReservation/SignupPromo/Mobile.tsx

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

components/HotelReservation/SignupPromo/signupPromo.module.css

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