263 lines
7.1 KiB
TypeScript
263 lines
7.1 KiB
TypeScript
"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<RedeemModalState>("unmounted")
|
|
const intl = useIntl()
|
|
const update = trpc.contentstack.rewards.redeem.useMutation()
|
|
const [redeemStep, setRedeemStep] = useState<RedeemStep>("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 (
|
|
<DialogTrigger
|
|
onOpenChange={(isOpen) => setAnimation(isOpen ? "visible" : "hidden")}
|
|
>
|
|
<Button intent="primary" fullWidth>
|
|
{intl.formatMessage({ id: "Open" })}
|
|
</Button>
|
|
<MotionOverlay
|
|
className={styles.overlay}
|
|
isExiting={animation === "hidden"}
|
|
onAnimationComplete={modalStateHandler}
|
|
variants={variants.fade}
|
|
initial="hidden"
|
|
animate={animation}
|
|
>
|
|
<MotionModal
|
|
className={styles.modal}
|
|
variants={variants.slideInOut}
|
|
initial="hidden"
|
|
animate={animation}
|
|
>
|
|
<Dialog className={styles.dialog} aria-label={reward.label}>
|
|
{({ close }) => (
|
|
<>
|
|
<header className={styles.modalHeader}>
|
|
<button
|
|
onClick={close}
|
|
type="button"
|
|
className={styles.modalClose}
|
|
>
|
|
<CloseLargeIcon />
|
|
</button>
|
|
</header>
|
|
<div className={styles.modalContent}>
|
|
{redeemStep === "redeemed" && (
|
|
<ConfirmationBadge reward={reward} />
|
|
)}
|
|
<RewardIcon rewardId={reward.reward_id} />
|
|
<Title level="h3" textAlign="center" textTransform="regular">
|
|
{reward.label}
|
|
</Title>
|
|
|
|
{redeemStep === "initial" && (
|
|
<Body textAlign="center">{reward.description}</Body>
|
|
)}
|
|
|
|
{redeemStep === "confirmation" &&
|
|
"redeem_description" in reward && (
|
|
<Body textAlign="center">
|
|
{reward.redeem_description}
|
|
</Body>
|
|
)}
|
|
{redeemStep === "redeemed" &&
|
|
isRestaurantOnSiteTierReward(reward) &&
|
|
membershipNumber && (
|
|
<MembershipNumberBadge
|
|
membershipNumber={membershipNumber}
|
|
/>
|
|
)}
|
|
</div>
|
|
{redeemStep === "initial" && (
|
|
<footer className={styles.modalFooter}>
|
|
<Button
|
|
onClick={() => setRedeemStep("confirmation")}
|
|
intent="primary"
|
|
theme="base"
|
|
>
|
|
{intl.formatMessage({ id: "Redeem benefit" })}
|
|
</Button>
|
|
</footer>
|
|
)}
|
|
|
|
{redeemStep === "confirmation" && (
|
|
<footer className={styles.modalFooter}>
|
|
<Button
|
|
onClick={onProceed}
|
|
disabled={update.isPending}
|
|
intent="primary"
|
|
theme="base"
|
|
>
|
|
{intl.formatMessage({ id: "Yes, redeem" })}
|
|
</Button>
|
|
<Button onClick={close} intent="secondary" theme="base">
|
|
{intl.formatMessage({ id: "Go back" })}
|
|
</Button>
|
|
</footer>
|
|
)}
|
|
</>
|
|
)}
|
|
</Dialog>
|
|
</MotionModal>
|
|
</MotionOverlay>
|
|
</DialogTrigger>
|
|
)
|
|
}
|
|
|
|
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 (
|
|
<div className={styles.badge}>
|
|
{isRestaurantOnSiteTierReward(reward) ? (
|
|
<ActiveRedeemedBadge />
|
|
) : (
|
|
<TimedRedeemedBadge />
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ActiveRedeemedBadge() {
|
|
const intl = useIntl()
|
|
|
|
return (
|
|
<div className={styles.redeemed}>
|
|
<motion.div
|
|
animate={{
|
|
opacity: [1, 0.4, 1],
|
|
}}
|
|
transition={{
|
|
duration: 2,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
}}
|
|
>
|
|
<CheckCircleIcon color="uiSemanticSuccess" />
|
|
</motion.div>
|
|
<Caption>{intl.formatMessage({ id: "Active" })}</Caption>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function TimedRedeemedBadge() {
|
|
const intl = useIntl()
|
|
|
|
return (
|
|
<>
|
|
<div className={styles.redeemed}>
|
|
<CheckCircleIcon color="uiSemanticSuccess" />
|
|
<Caption>
|
|
{intl.formatMessage({
|
|
id: "Redeemed & valid through:",
|
|
})}
|
|
</Caption>
|
|
</div>
|
|
<Countdown />
|
|
</>
|
|
)
|
|
}
|
|
|
|
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>
|
|
)
|
|
}
|