fix(LOY-63): move redeem flows to separate folder

add use client directive
2025-01-08 14:20:48 +01:00
parent 9584478b34
commit 6941c1d006
5 changed files with 15 additions and 13 deletions
--- a/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx
+++ b/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Campaign.tsx
@@ -0,0 +1,59 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import CopyIcon from "@/components/Icons/Copy"
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { toast } from "@/components/TempDesignSystem/Toasts"
+
+import { RewardIcon } from "../../RewardIcon"
+import MembershipNumberBadge from "../MembershipNumberBadge"
+
+import styles from "../redeem.module.css"
+
+import type { RewardWithRedeem } from "@/server/routers/contentstack/reward/output"
+
+export default function Campaign({
+  reward,
+  membershipNumber,
+}: {
+  reward: RewardWithRedeem
+  membershipNumber: string
+}) {
+  const intl = useIntl()
+
+  function handleCopy() {
+    navigator.clipboard.writeText(reward.operaRewardId)
+    toast.success(intl.formatMessage({ id: "Copied to clipboard" }))
+  }
+
+  return (
+    <>
+      <div className={styles.modalContent}>
+        <RewardIcon rewardId={reward.reward_id} />
+        <Title level="h3" textAlign="center" textTransform="regular">
+          {reward.label}
+        </Title>
+        <Body textAlign="center">{reward.description}</Body>
+        {membershipNumber && (
+          <MembershipNumberBadge membershipNumber={membershipNumber} />
+        )}
+      </div>
+      <footer className={styles.modalFooter}>
+        <Button
+          onClick={handleCopy}
+          type="button"
+          variant="icon"
+          size="small"
+          theme="base"
+          intent="primary"
+        >
+          {reward.operaRewardId}
+          <CopyIcon color="pale" />
+        </Button>
+      </footer>
+    </>
+  )
+}
--- a/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx
+++ b/components/Blocks/DynamicContent/Rewards/Redeem/Flows/Tier.tsx
@@ -0,0 +1,92 @@
+"use client"
+
+import { useIntl } from "react-intl"
+
+import Button from "@/components/TempDesignSystem/Button"
+import Body from "@/components/TempDesignSystem/Text/Body"
+import Title from "@/components/TempDesignSystem/Text/Title"
+import { isRestaurantOnSiteTierReward } from "@/utils/rewards"
+
+import { RewardIcon } from "../../RewardIcon"
+import ActiveRedeemedBadge from "../ActiveRedeemedBadge"
+import MembershipNumberBadge from "../MembershipNumberBadge"
+import TimedRedeemedBadge from "../TimedRedeemedBadge"
+import useRedeemFlow from "../useRedeemFlow"
+
+import styles from "../redeem.module.css"
+
+import type { RewardWithRedeem } from "@/server/routers/contentstack/reward/output"
+
+export default function Tier({
+  reward,
+  membershipNumber,
+}: {
+  reward: RewardWithRedeem
+  membershipNumber: string
+}) {
+  const { onRedeem, redeemStep, setRedeemStep, isRedeeming } =
+    useRedeemFlow(reward)
+  const intl = useIntl()
+
+  return (
+    <>
+      <div className={styles.modalContent}>
+        {redeemStep === "redeemed" && (
+          <div className={styles.badge}>
+            {isRestaurantOnSiteTierReward(reward) ? (
+              <ActiveRedeemedBadge />
+            ) : (
+              <TimedRedeemedBadge />
+            )}
+          </div>
+        )}
+        <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" && (
+          <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={onRedeem}
+            disabled={isRedeeming}
+            intent="primary"
+            theme="base"
+          >
+            {intl.formatMessage({ id: "Yes, redeem" })}
+          </Button>
+          <Button onClick={close} intent="secondary" theme="base">
+            {intl.formatMessage({ id: "Go back" })}
+          </Button>
+        </footer>
+      )}
+    </>
+  )
+}