fix(LOY-64): abstract membershipbadge to its own component

components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx

@@ -17,7 +17,7 @@ export default function ClientCurrentRewards({
   rewards,
   pageSize,
   showRedeem,
-  memberId,
+  membershipNumber,
 }: CurrentRewardsClientProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const [currentPage, setCurrentPage] = useState(1)
@@ -56,7 +56,7 @@ export default function ClientCurrentRewards({
             </div>
             {showRedeem && "redeem_description" in reward && (
               <div className={styles.btnContainer}>
-                <Redeem reward={reward} memberId={memberId} />
+                <Redeem reward={reward} membershipNumber={membershipNumber} />
               </div>
             )}
           </article>

components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx

@@ -11,7 +11,6 @@ import {
 import { useIntl } from "react-intl"
 
 import { trpc } from "@/lib/trpc/client"
-import { Reward } from "@/server/routers/contentstack/reward/output"
 
 import Countdown from "@/components/Countdown"
 import { CheckCircleIcon, CloseLargeIcon } from "@/components/Icons"
@@ -30,11 +29,12 @@ import type {
   RedeemProps,
   RedeemStep,
 } from "@/types/components/myPages/myPage/accountPage"
+import type { Reward } from "@/server/routers/contentstack/reward/output"
 
 const MotionOverlay = motion(ModalOverlay)
 const MotionModal = motion(Modal)
 
-export default function Redeem({ reward, memberId }: RedeemProps) {
+export default function Redeem({ reward, membershipNumber }: RedeemProps) {
   const [animation, setAnimation] = useState<RedeemModalState>("unmounted")
   const intl = useIntl()
   const update = trpc.contentstack.rewards.redeem.useMutation()
@@ -121,16 +121,10 @@ export default function Redeem({ reward, memberId }: RedeemProps) {
                     )}
                   {redeemStep === "redeemed" &&
                     isRestaurantOnSiteTierReward(reward) &&
-                    memberId && (
-                      <div className={styles.memberIdBadge}>
-                        <Caption
-                          textTransform="uppercase"
-                          textAlign="center"
-                          color="uiTextHighContrast"
-                        >
-                          {intl.formatMessage({ id: "Member ID:" })} {memberId}
-                        </Caption>
-                      </div>
+                    membershipNumber && (
+                      <MemberShipNumberBadge
+                        membershipNumber={membershipNumber}
+                      />
                     )}
                 </div>
                 {redeemStep === "initial" && (
@@ -246,3 +240,23 @@ function TimedRedeemedBadge() {
     </>
   )
 }
+
+function MemberShipNumberBadge({
+  membershipNumber,
+}: {
+  membershipNumber: string
+}) {
+  const intl = useIntl()
+
+  return (
+    <div className={styles.memberShipNumberBadge}>
+      <Caption
+        textTransform="uppercase"
+        textAlign="center"
+        color="uiTextHighContrast"
+      >
+        {intl.formatMessage({ id: "Membership ID:" })} {membershipNumber}
+      </Caption>
+    </div>
+  )
+}

components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css

@@ -138,8 +138,8 @@
   color: var(--UI-Semantic-Success);
 }
 
-.memberIdBadge {
+.memberShipNumberBadge {
   border-radius: var(--Small);
   padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
   background: var(--Base-Surface-Secondary-light-Normal);
-}
+}

components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx

@@ -31,7 +31,7 @@ export default async function CurrentRewardsBlock({
         rewards={rewardsResponse.rewards}
         pageSize={6}
         showRedeem={env.USE_NEW_REWARDS_ENDPOINT && env.USE_NEW_REWARD_MODEL}
-        memberId={membershipLevel?.membershipNumber}
+        membershipNumber={membershipLevel?.membershipNumber}
       />
       <SectionLink link={link} variant="mobile" />
     </SectionContainer>