feat(LOY-63): redeem campaign

2024-12-20 16:56:33 +01:00
parent 29d1721a8a
commit 9584478b34
17 changed files with 552 additions and 391 deletions
--- a/components/Blocks/DynamicContent/Rewards/Redeem/Campaign.tsx
+++ b/components/Blocks/DynamicContent/Rewards/Redeem/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>
+    </>
+  )
+}