193 lines
5.7 KiB
TypeScript
193 lines
5.7 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 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<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" && (
|
|
<div className={styles.badge}>
|
|
<div className={styles.redeemed}>
|
|
<CheckCircleIcon color="uiSemanticSuccess" />
|
|
<Caption>
|
|
{intl.formatMessage({
|
|
id: "Redeemed & valid through:",
|
|
})}
|
|
</Caption>
|
|
</div>
|
|
<Countdown />
|
|
</div>
|
|
)}
|
|
<Image
|
|
src="/_static/img/loyalty-award.png"
|
|
width={113}
|
|
height={125}
|
|
alt={reward.label || ""}
|
|
/>
|
|
<Title level="h3" textAlign="center" textTransform="regular">
|
|
{reward.label}
|
|
</Title>
|
|
|
|
{redeemStep === "initial" && (
|
|
<Body textAlign="center">{reward.description}</Body>
|
|
)}
|
|
|
|
{redeemStep === "confirmation" && (
|
|
<Body textAlign="center">{reward.redeem_description}</Body>
|
|
)}
|
|
</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" },
|
|
},
|
|
},
|
|
}
|