feat(LOY-63): redeem campaign

components/Blocks/DynamicContent/Rewards/Redeem/index.tsx

@@ -0,0 +1,133 @@
+"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 { CloseLargeIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+
+import Campaign from "./Campaign"
+import Tier from "./Tier"
+import { RedeemContext } from "./useRedeemFlow"
+
+import styles from "./redeem.module.css"
+
+import type {
+  RedeemModalState,
+  RedeemProps,
+  RedeemStep,
+} from "@/types/components/myPages/myPage/accountPage"
+import type { RewardWithRedeem } 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 [redeemStep, setRedeemStep] = useState<RedeemStep>("initial")
+
+  function modalStateHandler(newAnimationState: RedeemModalState) {
+    setAnimation((currentAnimationState) =>
+      newAnimationState === "hidden" && currentAnimationState === "hidden"
+        ? "unmounted"
+        : currentAnimationState
+    )
+    if (newAnimationState === "unmounted") {
+      setRedeemStep("initial")
+    }
+  }
+
+  return (
+    <RedeemContext.Provider value={{ redeemStep, setRedeemStep }}>
+      <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>
+
+                  {getRedeemFlow(reward, membershipNumber || "")}
+                </>
+              )}
+            </Dialog>
+          </MotionModal>
+        </MotionOverlay>
+      </DialogTrigger>
+    </RedeemContext.Provider>
+  )
+}
+
+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 getRedeemFlow(reward: RewardWithRedeem, membershipNumber: string) {
+  switch (reward.rewardType) {
+    case "Campaign":
+      return <Campaign reward={reward} membershipNumber={membershipNumber} />
+    case "Surprise":
+    case "Tier":
+      return <Tier reward={reward} membershipNumber={membershipNumber} />
+    default:
+      console.warn("Unsupported reward type for redeem:", reward.rewardType)
+      return null
+  }
+}