feat(LOY-23): redeem benefit modal

components/Blocks/DynamicContent/Rewards/CurrentLevel/Client.tsx

@@ -3,17 +3,19 @@
 import { trpc } from "@/lib/trpc/client"
 import { Reward } from "@/server/routers/contentstack/reward/output"
 
+import Image from "@/components/Image"
 import LoadingSpinner from "@/components/LoadingSpinner"
 import Grids from "@/components/TempDesignSystem/Grids"
 import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
 import Title from "@/components/TempDesignSystem/Text/Title"
 import useLang from "@/hooks/useLang"
 
+import Redeem from "./Redeem"
+
 import styles from "./current.module.css"
 
-type CurrentRewardsClientProps = {
-  initialCurrentRewards: { rewards: Reward[]; nextCursor: number | undefined }
-}
+import type { CurrentRewardsClientProps } from "@/types/components/myPages/myPage/accountPage"
+
 export default function ClientCurrentRewards({
   initialCurrentRewards,
 }: CurrentRewardsClientProps) {
@@ -37,9 +39,10 @@ export default function ClientCurrentRewards({
       fetchNextPage()
     }
   }
-  const filteredRewards =
-    data?.pages.filter((page) => page && page.rewards) ?? []
-  const rewards = filteredRewards.flatMap((page) => page?.rewards) as Reward[]
+  const filteredRewards = data?.pages.filter((page) => page?.rewards) ?? []
+  const rewards = filteredRewards
+    .flatMap((page) => page?.rewards)
+    .filter((reward): reward is Reward => !!reward)
 
   if (isLoading) {
     return <LoadingSpinner />
@@ -54,14 +57,25 @@ export default function ClientCurrentRewards({
       <Grids.Stackable>
         {rewards.map((reward, idx) => (
           <article className={styles.card} key={`${reward.reward_id}-${idx}`}>
-            <Title
-              as="h4"
-              level="h3"
-              textAlign="center"
-              textTransform="regular"
-            >
-              {reward.label}
-            </Title>
+            <div className={styles.content}>
+              <Image
+                src="/_static/img/loyalty-award.png"
+                width={113}
+                height={125}
+                alt={reward.label || ""}
+              />
+              <Title
+                as="h4"
+                level="h3"
+                textAlign="center"
+                textTransform="regular"
+              >
+                {reward.label}
+              </Title>
+            </div>
+            <div className={styles.btnContainer}>
+              <Redeem reward={reward} />
+            </div>
           </article>
         ))}
       </Grids.Stackable>

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

@@ -0,0 +1,192 @@
+"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" },
+    },
+  },
+}

components/Blocks/DynamicContent/Rewards/CurrentLevel/current.module.css

@@ -1,12 +1,125 @@
 .card {
-  align-items: center;
   background-color: var(--UI-Opacity-White-100);
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Medium);
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x1);
-  justify-content: center;
-  min-height: 280px;
-  padding: var(--Spacing-x7) var(--Spacing-x3);
+}
+
+.content {
+  flex: 1;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  align-items: center;
+  justify-content: center;
+  padding: var(--Spacing-x3);
+}
+
+.btnContainer {
+  padding: 0 var(--Spacing-x3) var(--Spacing-x3);
+}
+
+.badge {
+  border-radius: var(--Small, 4px);
+  border: 1px solid var(--Base-Border-Subtle);
+  display: flex;
+  padding: var(--Spacing-x1) var(--Spacing-x2);
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.redeemed {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--Spacing-x-half);
+  align-self: stretch;
+}
+
+.overlay {
+  background: rgba(0, 0, 0, 0.5);
+  height: var(--visual-viewport-height);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  z-index: 100;
+}
+
+@media screen and (min-width: 768px) {
+  .overlay {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+}
+
+.modal {
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border-radius: var(--Corner-radius-Medium);
+  box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
+  width: 100%;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 101;
+}
+
+@media screen and (min-width: 768px) {
+  .modal {
+    left: auto;
+    bottom: auto;
+    width: 400px;
+  }
+}
+
+.dialog {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: var(--Spacing-x3);
+}
+
+.modalHeader {
+  --button-height: 32px;
+  box-sizing: content-box;
+  display: flex;
+  align-items: center;
+  height: var(--button-height);
+  position: relative;
+  justify-content: center;
+  padding: var(--Spacing-x3) var(--Spacing-x2) 0;
+}
+
+.modalContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--Spacing-x2);
+  padding: 0 var(--Spacing-x3) var(--Spacing-x3);
+}
+
+.modalFooter {
+  display: flex;
+  flex-direction: column;
+  padding: 0 var(--Spacing-x3) var(--Spacing-x1);
+  gap: var(--Spacing-x-one-and-half);
+}
+
+.modalFooter > button {
+  flex: 1 0 100%;
+}
+
+.modalClose {
+  background: none;
+  border: none;
+  cursor: pointer;
+  position: absolute;
+  right: var(--Spacing-x2);
+  width: 32px;
+  height: var(--button-height);
+  display: flex;
+  align-items: center;
 }