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