Merge pull request #2201 from wondrous-dev/add-pokt-pda-edit

feat: edit pda reward
wondrous-dev · Jan 30, 2024 · 342b5b3 · 342b5b3
2 parents febe04a + c7546da
commit 342b5b3
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 32 deletions.
diff --git a/wondrous-bot-admin/src/components/Rewards/QuestRewardComponent/index.tsx b/wondrous-bot-admin/src/components/Rewards/QuestRewardComponent/index.tsx
@@ -12,6 +12,7 @@ import {
   handleStoreItemRewardRemove,
   handleOnRewardAdd,
   handlePDARewardRemove,
+  handlePDARewardUpdate,
 } from "./questUtils";
 import { useAddRewardModalState } from "components/Rewards/utils";
 import { PAYMENT_OPTIONS } from "../constants";
@@ -28,7 +29,8 @@ const QuestRewardComponent = ({
   hasReferralStep: boolean;
 }) => {
   const rewardModalState = useAddRewardModalState();
-  const { setIsRewardModalOpen, resetStates } = rewardModalState;
+  const { setIsRewardModalOpen, setRewardType, setPdaPoints, setPdaSubtype, setIsUpdate, resetStates } =
+    rewardModalState;
 
   const { isOpen: isTourOpen, setCurrentStep, setSteps, steps } = useTour();
 
@@ -93,7 +95,18 @@ const QuestRewardComponent = ({
       return true;
     });
   };
-
+  const handleOpenRewardModal = () => {
+    if (isTourOpen) {
+      setCurrentStep((prev) => prev + 1);
+    }
+    setIsRewardModalOpen(true);
+  };
+  const handlePdaOpen = (reward) => {
+    setRewardType(PAYMENT_OPTIONS.PDA);
+    setPdaPoints(reward?.pdaPoints || reward?.pdaRewardData?.pdaPoints);
+    setPdaSubtype(reward?.pdaSubtype || reward?.pdaRewardData?.pdaSubtype);
+    setIsUpdate(true);
+  };
   const rewardComponents = {
     [PAYMENT_OPTIONS.DISCORD_ROLE]: {
       Component: ({ reward }) => (
@@ -160,12 +173,16 @@ const QuestRewardComponent = ({
     [PAYMENT_OPTIONS.PDA]: {
       Component: ({ reward }) => {
         return (
-          <RewardWrapper
-            Icon={GatewayPDAIcon}
-            text={`${reward?.pdaSubtype || reward?.pdaRewardData?.pdaSubtype} - ${
-              reward?.pdaRewardData?.pdaPoints
-            } pts`}
-          />
+          <>
+            <RewardWrapper
+              onClick={() => {
+                handleOpenRewardModal();
+                handlePdaOpen(reward);
+              }}
+              Icon={GatewayPDAIcon}
+              text={`Citizen PDA - click to edit`}
+            />
+          </>
         );
       },
       handleOnRemove: (reward) => handlePDARewardRemove({ reward, setQuestSettings }),
@@ -174,20 +191,14 @@ const QuestRewardComponent = ({
   const pointReward = rewards.filter((reward) => reward?.type === "points")[0];
   const otherRewards = rewards.filter((reward) => reward?.type !== "points");
 
-  const handleOpenRewardModal = () => {
-    if (isTourOpen) {
-      setCurrentStep((prev) => prev + 1);
-    }
-    setIsRewardModalOpen(true);
-  };
-
   return (
     <>
       <RewardModal
         rewardModalState={rewardModalState}
         handleRewardModalToggle={handleToggleModal}
         handleOnRewardAdd={(reward) => handleOnRewardAdd({ reward, setQuestSettings })}
         rewards={rewards}
+        handlePDARewardUpdate={(reward) => handlePDARewardUpdate({ reward, setQuestSettings })}
       />
 
       <Grid container flexWrap="nowrap" maxWidth="inherit">

diff --git a/wondrous-bot-admin/src/components/Rewards/QuestRewardComponent/questUtils.ts b/wondrous-bot-admin/src/components/Rewards/QuestRewardComponent/questUtils.ts
@@ -15,6 +15,21 @@ export const handlePDARewardRemove = ({ reward, setQuestSettings }) => {
     };
   });
 };
+
+export const handlePDARewardUpdate = ({ reward, setQuestSettings }) => {
+  setQuestSettings((prev) => {
+    const newRewards = prev.rewards.map((r) => {
+      if (r.type === PAYMENT_OPTIONS.PDA) {
+        return reward;
+      }
+      return r;
+    });
+    return {
+      ...prev,
+      rewards: newRewards,
+    };
+  });
+};
 export const handleDiscordRoleRewardRemove = ({ reward, setQuestSettings }) => {
   setQuestSettings((prev) => {
     const newRewards = prev.rewards.filter((r) => {

diff --git a/wondrous-bot-admin/src/components/Rewards/RewardModal.tsx b/wondrous-bot-admin/src/components/Rewards/RewardModal.tsx
@@ -10,7 +10,7 @@ import {
 } from "components/Icons/Rewards";
 import { PricingOptionsTitle } from "components/Pricing/PricingOptionsListItem";
 import Modal from "components/Shared/Modal";
-import { useContext, useMemo, useState } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import GlobalContext from "utils/context/GlobalContext";
 import { usePaywall, useSubscription, useSubscriptionPaywall } from "utils/hooks";
 import { Label } from "../CreateTemplate/styles";
@@ -41,6 +41,7 @@ const RewardModal = ({
     PAYMENT_OPTIONS.PDA,
   ],
   title = "Add reward to quest",
+  handlePDARewardUpdate = null,
 }) => {
   const { activeOrg } = useContext(GlobalContext);
   const { isEcosystemPlan, isPremiumPlan, plan, setPaywall, setPaywallMessage, setOnCancel, setCanBeClosed } =
@@ -72,8 +73,9 @@ const RewardModal = ({
     setPdaSubtype,
     pdaPoints,
     pdaSubtype,
+    isUpdate,
+    setIsUpdate,
   } = rewardModalState;
-
   const handleAddRewardOnModal = () => {
     setErrors(null);
     switch (rewardType) {
@@ -128,17 +130,28 @@ const RewardModal = ({
         });
         break;
       case PAYMENT_OPTIONS.PDA:
-        const hasPDARewardAlready = rewards.some((reward) => reward.type === PAYMENT_OPTIONS.PDA);
-        if (hasPDARewardAlready) {
-          setErrors({ ...errors, pda: "You can only add one PDA reward per quest" });
+        if (isUpdate) {
+          if (handlePDARewardUpdate) {
+            handlePDARewardUpdate({
+              type: rewardType,
+              pdaPoints,
+              pdaSubtype,
+            });
+            handleRewardModalToggle();
+          }
         } else {
-          handleaddPDAItem({
-            type: rewardType,
-            handleOnRewardAdd,
-            handleToggle: handleRewardModalToggle,
-            pdaPoints,
-            pdaSubtype,
-          });
+          const hasPDARewardAlready = rewards.some((reward) => reward.type === PAYMENT_OPTIONS.PDA);
+          if (hasPDARewardAlready) {
+            setErrors({ ...errors, pda: "You can only add one PDA reward per quest" });
+          } else {
+            handleaddPDAItem({
+              type: rewardType,
+              handleOnRewardAdd,
+              handleToggle: handleRewardModalToggle,
+              pdaPoints,
+              pdaSubtype,
+            });
+          }
         }
       default:
         console.warn("Unknown reward type:", rewardType);
@@ -229,6 +242,7 @@ const RewardModal = ({
           setAddPaymentMethod={setAddPaymentMethod}
           editPaymentMethod={editPaymentMethod}
           setEditPaymentMethod={setEditPaymentMethod}
+          isUpdate={isUpdate}
         />
       }
       footerRight={undefined}

diff --git a/wondrous-bot-admin/src/components/Rewards/RewardUtils.tsx b/wondrous-bot-admin/src/components/Rewards/RewardUtils.tsx
@@ -31,6 +31,7 @@ import useAlerts from "utils/hooks";
 import ContextMenu from "components/ContextMenu";
 import { ContextMenuButtonStyle } from "components/ContextMenu/styles";
 import ConfirmActionModal from "components/ConfirmActionModal";
+import { useAddRewardModalState } from "./utils";
 
 export const TokenComponent = ({
   paymentMethod = null,
@@ -650,7 +651,6 @@ export const RewardMethod = ({
 
 export const RewardMethodOptionButton = ({ paymentOption, rewardType, onClick, Icon, text, isUnavailable = false }) => {
   const isActive = paymentOption === rewardType;
-  console.log("rfeward", rewardType);
   const buttonStyle = getRewardMethodOptionButtonStyle(isActive, isUnavailable);
 
   return (
@@ -670,6 +670,7 @@ export const RewardModalFooterLeftComponent = ({
   editPaymentMethod,
   setEditPaymentMethod,
   errors,
+  isUpdate = null,
 }) => {
   const [updateCmtyPaymentMethod] = useMutation(UPDATE_CMTY_PAYMENT_METHOD, {
     refetchQueries: ["getCmtyPaymentMethodsForOrg"],
@@ -726,7 +727,7 @@ export const RewardModalFooterLeftComponent = ({
     rewardType !== PAYMENT_OPTIONS.DISCORD_ROLE &&
     rewardType !== PAYMENT_OPTIONS.CMTY_STORE_ITEM &&
     rewardType !== PAYMENT_OPTIONS.COMMUNITY_BADGE;
-
+  const rewardText = isUpdate ? "Update Reward" : "Add Reward";
   const renderAddRewardButtons = () => (
     <>
       {isRewardTypeSelectable ? (
@@ -745,7 +746,7 @@ export const RewardModalFooterLeftComponent = ({
         </ButtonBase>
       ) : null}
       <SharedSecondaryButton onClick={handleReward}>
-        {addPaymentMethod && rewardType === PAYMENT_OPTIONS.TOKEN ? "Add New Payment Method" : "Add Reward"}
+        {addPaymentMethod && rewardType === PAYMENT_OPTIONS.TOKEN ? "Add New Payment Method" : rewardText}
       </SharedSecondaryButton>
       {errors &&
         Object.keys(errors)?.map((key) => {
@@ -854,8 +855,8 @@ export const ExistingDiscordRewardSelectComponent = ({ options, initialReward, o
   );
 };
 
-export const RewardWrapper = ({ Icon, text }) => (
-  <Grid container item gap="8px" bgcolor="#E8E8E8" padding="8px" borderRadius="6px" alignItems="center">
+export const RewardWrapper = ({ Icon, text, ...props }) => (
+  <Grid container item gap="8px" bgcolor="#E8E8E8" padding="8px" borderRadius="6px" alignItems="center" {...props}>
     <Icon />
     <Typography color="#000000" fontWeight="500" fontFamily="Poppins">
       {text}

diff --git a/wondrous-bot-admin/src/components/Rewards/utils.tsx b/wondrous-bot-admin/src/components/Rewards/utils.tsx
@@ -264,6 +264,7 @@ export const useAddRewardModalState = (defaultRewardType = PAYMENT_OPTIONS.DISCO
   const [discordRoleReward, setDiscordRoleReward] = useState(null);
   const [paymentMethod, setPaymentMethod] = useState(null);
   const [cmtyStoreItemReward, setCmtyStoreItemReward] = useState(null);
+  const [isUpdate, setIsUpdate] = useState(false);
   const [pdaSubtype, setPdaSubtype] = useState("");
   const [pdaPoints, setPdaPoints] = useState(null);
   const [tokenReward, setTokenReward] = useState({
@@ -347,6 +348,8 @@ export const useAddRewardModalState = (defaultRewardType = PAYMENT_OPTIONS.DISCO
     setPdaSubtype,
     pdaPoints,
     pdaSubtype,
+    isUpdate,
+    setIsUpdate,
     ...tokenRewardData,
   };
 };