From c7546da23ba4c6a44cf1c0825a0af77b200d899b Mon Sep 17 00:00:00 2001 From: Andros Date: Tue, 30 Jan 2024 13:14:43 -0800 Subject: [PATCH] feat: edit pda reward --- .../Rewards/QuestRewardComponent/index.tsx | 41 ++++++++++++------- .../QuestRewardComponent/questUtils.ts | 15 +++++++ .../src/components/Rewards/RewardModal.tsx | 38 +++++++++++------ .../src/components/Rewards/RewardUtils.tsx | 11 ++--- .../src/components/Rewards/utils.tsx | 3 ++ 5 files changed, 76 insertions(+), 32 deletions(-) diff --git a/wondrous-bot-admin/src/components/Rewards/QuestRewardComponent/index.tsx b/wondrous-bot-admin/src/components/Rewards/QuestRewardComponent/index.tsx index 8981fe42c..f12c916b6 100644 --- 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 ( - + <> + { + handleOpenRewardModal(); + handlePdaOpen(reward); + }} + Icon={GatewayPDAIcon} + text={`Citizen PDA - click to edit`} + /> + ); }, handleOnRemove: (reward) => handlePDARewardRemove({ reward, setQuestSettings }), @@ -174,13 +191,6 @@ 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 ( <> handleOnRewardAdd({ reward, setQuestSettings })} rewards={rewards} + handlePDARewardUpdate={(reward) => handlePDARewardUpdate({ reward, setQuestSettings })} /> diff --git a/wondrous-bot-admin/src/components/Rewards/QuestRewardComponent/questUtils.ts b/wondrous-bot-admin/src/components/Rewards/QuestRewardComponent/questUtils.ts index d3003d81b..d7aeeb7cb 100644 --- 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 index c609797cb..242e31926 100644 --- 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 index a486eceb3..ff15e78c3 100644 --- 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 = ({ ) : null} - {addPaymentMethod && rewardType === PAYMENT_OPTIONS.TOKEN ? "Add New Payment Method" : "Add Reward"} + {addPaymentMethod && rewardType === PAYMENT_OPTIONS.TOKEN ? "Add New Payment Method" : rewardText} {errors && Object.keys(errors)?.map((key) => { @@ -854,8 +855,8 @@ export const ExistingDiscordRewardSelectComponent = ({ options, initialReward, o ); }; -export const RewardWrapper = ({ Icon, text }) => ( - +export const RewardWrapper = ({ Icon, text, ...props }) => ( + {text} diff --git a/wondrous-bot-admin/src/components/Rewards/utils.tsx b/wondrous-bot-admin/src/components/Rewards/utils.tsx index a20136458..a013153a3 100644 --- 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, }; };