diff --git a/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx b/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx index ac42942e0..693b8a409 100644 --- a/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx +++ b/components/Blocks/DynamicContent/Rewards/CurrentRewards/Client.tsx @@ -17,7 +17,7 @@ export default function ClientCurrentRewards({ rewards, pageSize, showRedeem, - memberId, + membershipNumber, }: CurrentRewardsClientProps) { const containerRef = useRef(null) const [currentPage, setCurrentPage] = useState(1) @@ -56,7 +56,7 @@ export default function ClientCurrentRewards({ {showRedeem && "redeem_description" in reward && (
- +
)} diff --git a/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx b/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx index f113c3901..8b02f4ea1 100644 --- a/components/Blocks/DynamicContent/Rewards/CurrentRewards/Redeem.tsx +++ b/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("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 && ( -
- - {intl.formatMessage({ id: "Member ID:" })} {memberId} - -
+ membershipNumber && ( + )} {redeemStep === "initial" && ( @@ -246,3 +240,23 @@ function TimedRedeemedBadge() { ) } + +function MemberShipNumberBadge({ + membershipNumber, +}: { + membershipNumber: string +}) { + const intl = useIntl() + + return ( +
+ + {intl.formatMessage({ id: "Membership ID:" })} {membershipNumber} + +
+ ) +} diff --git a/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css b/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css index e15dc6e13..d96064ddb 100644 --- a/components/Blocks/DynamicContent/Rewards/CurrentRewards/current.module.css +++ b/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); -} \ No newline at end of file +} diff --git a/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx b/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx index b78d940fc..b957d31c2 100644 --- a/components/Blocks/DynamicContent/Rewards/CurrentRewards/index.tsx +++ b/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} /> diff --git a/types/components/myPages/myPage/accountPage.ts b/types/components/myPages/myPage/accountPage.ts index c1992b187..e5133c758 100644 --- a/types/components/myPages/myPage/accountPage.ts +++ b/types/components/myPages/myPage/accountPage.ts @@ -1,13 +1,12 @@ -import { z } from "zod" +import type { z } from "zod" -import { blocksSchema } from "@/server/routers/contentstack/accountPage/output" -import { +import type { DynamicContent } from "@/types/trpc/routers/contentstack/blocks" +import type { blocksSchema } from "@/server/routers/contentstack/accountPage/output" +import type { Reward, RewardWithRedeem, } from "@/server/routers/contentstack/reward/output" -import { DynamicContent } from "@/types/trpc/routers/contentstack/blocks" - export interface AccountPageContentProps extends Pick {} @@ -27,12 +26,12 @@ export interface CurrentRewardsClientProps { rewards: (Reward | RewardWithRedeem)[] pageSize: number showRedeem: boolean - memberId?: string | null + membershipNumber?: string | null } export interface RedeemProps { reward: RewardWithRedeem - memberId?: string | null + membershipNumber?: string | null } export type RedeemModalState = "unmounted" | "hidden" | "visible"