{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 Image from "@/components/Image" 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 styles from "./current.module.css" import type { Redeem, RedeemModalState, RedeemStep, } from "@/types/components/myPages/myPage/accountPage" const MotionOverlay = motion(ModalOverlay) const MotionModal = motion(Modal) export default function Redeem({ reward }: Redeem) { 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" }, }, }, }