{reward.label}

"use client" import { motion } from "framer-motion" import { useState } from "react" import { Dialog, DialogTrigger, Modal, ModalOverlay, } from "react-aria-components" import { useIntl } from "react-intl" import { trpc } from "@/lib/trpc/client" import Countdown from "@/components/Countdown" import { CheckCircleIcon, CloseLargeIcon } from "@/components/Icons" import Button from "@/components/TempDesignSystem/Button" import Body from "@/components/TempDesignSystem/Text/Body" import Caption from "@/components/TempDesignSystem/Text/Caption" import Title from "@/components/TempDesignSystem/Text/Title" import { isRestaurantOnSiteTierReward } from "@/utils/rewards" import { RewardIcon } from "../RewardIcon" import styles from "./current.module.css" import type { RedeemModalState, 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, membershipNumber }: RedeemProps) { const [animation, setAnimation] = useState("unmounted") const intl = useIntl() const update = trpc.contentstack.rewards.redeem.useMutation() const [redeemStep, setRedeemStep] = useState("initial") function onProceed() { if (reward.id) { update.mutate( { rewardId: reward.id }, { onSuccess() { setRedeemStep("redeemed") }, onError(error) { console.error("Failed to redeem", error) }, } ) } } function modalStateHandler(newAnimationState: RedeemModalState) { setAnimation((currentAnimationState) => newAnimationState === "hidden" && currentAnimationState === "hidden" ? "unmounted" : currentAnimationState ) if (newAnimationState === "unmounted") { setRedeemStep("initial") } } return ( setAnimation(isOpen ? "visible" : "hidden")} > ) } const variants = { fade: { hidden: { opacity: 0, transition: { duration: 0.4, ease: "easeInOut" }, }, visible: { opacity: 1, transition: { duration: 0.4, ease: "easeInOut" }, }, }, slideInOut: { hidden: { opacity: 0, y: 32, transition: { duration: 0.4, ease: "easeInOut" }, }, visible: { opacity: 1, y: 0, transition: { duration: 0.4, ease: "easeInOut" }, }, }, } function ConfirmationBadge({ reward }: { reward: Reward }) { return (

{isRestaurantOnSiteTierReward(reward) ? ( ) : ( )}

) } function ActiveRedeemedBadge() { const intl = useIntl() return (

{intl.formatMessage({ id: "Active" })}

) } function TimedRedeemedBadge() { const intl = useIntl() return ( <>

{intl.formatMessage({ id: "Redeemed & valid through:", })}

) } function MembershipNumberBadge({ membershipNumber, }: { membershipNumber: string }) { const intl = useIntl() return (

{intl.formatMessage({ id: "Membership ID:" })} {membershipNumber}

) }