feat(LOY-61): add confirmation box to close when redeemed a reward

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

@@ -18,6 +18,7 @@ import useLang from "@/hooks/useLang"
 
 import Campaign from "./Flows/Campaign"
 import Tier from "./Flows/Tier"
+import { ConfirmClose } from "./ConfirmClose"
 import { RedeemContext } from "./useRedeemFlow"
 
 import styles from "./redeem.module.css"
@@ -32,12 +33,15 @@ import type { RewardWithRedeem } from "@/server/routers/contentstack/reward/outp
 const MotionOverlay = motion(ModalOverlay)
 const MotionModal = motion(Modal)
 
+const thirtyMinutesInMs = 1000 * 60 * 30
+
 export default function Redeem({ reward, membershipNumber }: RedeemProps) {
   const [animation, setAnimation] = useState<RedeemModalState>("unmounted")
   const intl = useIntl()
   const lang = useLang()
   const utils = trpc.useUtils()
   const [redeemStep, setRedeemStep] = useState<RedeemStep>("initial")
+  const [timeRemaining, setTimeRemaining] = useState(thirtyMinutesInMs)
 
   function modalStateHandler(newAnimationState: RedeemModalState) {
     setAnimation((currentAnimationState) =>
@@ -51,7 +55,16 @@ export default function Redeem({ reward, membershipNumber }: RedeemProps) {
   }
 
   return (
-    <RedeemContext.Provider value={{ redeemStep, setRedeemStep }}>
+    <RedeemContext.Provider
+      value={{
+        reward,
+        redeemStep,
+        setRedeemStep,
+        defaultTimeRemaining: thirtyMinutesInMs,
+        timeRemaining,
+        setTimeRemaining,
+      }}
+    >
       <DialogTrigger
         onOpenChange={(isOpen) => setAnimation(isOpen ? "visible" : "hidden")}
       >
@@ -75,24 +88,39 @@ export default function Redeem({ reward, membershipNumber }: RedeemProps) {
             animate={animation}
           >
             <Dialog className={styles.dialog} aria-label={reward.label}>
-              {({ close }) => (
-                <>
-                  <header className={styles.modalHeader}>
-                    <button
-                      onClick={() => {
-                        utils.contentstack.rewards.current.invalidate({ lang })
-                        close()
-                      }}
-                      type="button"
-                      className={styles.modalClose}
-                    >
-                      <CloseLargeIcon />
-                    </button>
-                  </header>
+              {({ close }) => {
+                function closeModal() {
+                  utils.contentstack.rewards.current.invalidate({
+                    lang,
+                  })
+                  close()
+                }
+                return (
+                  <>
+                    <header className={styles.modalHeader}>
+                      <button
+                        onClick={() => {
+                          if (redeemStep === "redeemed") {
+                            setRedeemStep("confirm-close")
+                          } else {
+                            closeModal()
+                          }
+                        }}
+                        type="button"
+                        className={styles.modalClose}
+                      >
+                        <CloseLargeIcon />
+                      </button>
+                    </header>
 
-                  {getRedeemFlow(reward, membershipNumber || "")}
-                </>
-              )}
+                    {redeemStep === "confirm-close" ? (
+                      <ConfirmClose close={closeModal} />
+                    ) : (
+                      getRedeemFlow(reward, membershipNumber || "")
+                    )}
+                  </>
+                )
+              }}
             </Dialog>
           </MotionModal>
         </MotionOverlay>
@@ -130,10 +158,10 @@ const variants = {
 function getRedeemFlow(reward: RewardWithRedeem, membershipNumber: string) {
   switch (reward.rewardType) {
     case "Campaign":
-      return <Campaign reward={reward} />
+      return <Campaign />
     case "Surprise":
     case "Tier":
-      return <Tier reward={reward} membershipNumber={membershipNumber} />
+      return <Tier membershipNumber={membershipNumber} />
     default:
       console.warn("Unsupported reward type for redeem:", reward.rewardType)
       return null