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

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