fix(DynamicPointsAmountForm): disable save btn if provider req is not…

… selected
guildxyz · Jun 24, 2024 · b0e6523 · b0e6523
1 parent 52d9292
commit b0e6523
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
diff --git a/...mponents/AddPointsPanel/components/SetPointsAmount/components/DynamicPointsAmountForm.tsx b/...mponents/AddPointsPanel/components/SetPointsAmount/components/DynamicPointsAmountForm.tsx
@@ -1,9 +1,11 @@
 import { Icon, Text, useColorModeValue, useDisclosure } from "@chakra-ui/react"
 import DynamicRewardSetup from "components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/DynamicSetup/DynamicRewardSetup"
+import { useEditRolePlatformContext } from "components/[guild]/RolePlatforms/components/EditRolePlatformModal"
 import Button from "components/common/Button"
 import OptionImage from "components/common/StyledSelect/components/CustomSelectOption/components/OptionImage"
 import { ArrowSquareOut, Star } from "phosphor-react"
-import type { ReactNode } from "react"
+import { useEffect, type ReactNode } from "react"
+import { useWatch } from "react-hook-form"
 import InformationModal from "../../../../DynamicSetup/InformationModal"
 
 const DynamicPointsAmountForm = ({ imageUrl, baseFieldPath }) => {
@@ -16,6 +18,21 @@ const DynamicPointsAmountForm = ({ imageUrl, baseFieldPath }) => {
     <Icon as={Star} />
   )
 
+  const requirementId = useWatch({
+    name: `${
+      baseFieldPath ? baseFieldPath + "." : ""
+    }dynamicAmount.operation.input.requirementId`,
+  })
+
+  const { setIsSubmitDisabled = null } = useEditRolePlatformContext() || {}
+
+  useEffect(() => {
+    setIsSubmitDisabled?.(!requirementId)
+    return () => {
+      setIsSubmitDisabled?.(false)
+    }
+  }, [requirementId])
+
   return (
     <>
       <Text fontWeight="medium" colorScheme="gray" mt="-1" mb="5">

diff --git a/src/components/[guild]/RolePlatforms/components/EditRolePlatformModal.tsx b/src/components/[guild]/RolePlatforms/components/EditRolePlatformModal.tsx
@@ -9,7 +9,7 @@ import {
 import Button from "components/common/Button"
 import { Modal } from "components/common/Modal"
 import rewards from "platforms/rewards"
-import { useRef } from "react"
+import { createContext, useContext, useRef, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 import { PlatformType, RoleFormType, RolePlatform } from "types"
 import { RolePlatformProvider } from "./RolePlatformProvider"
@@ -21,14 +21,21 @@ type Props = {
   isOpen: boolean
 }
 
+const EditRolePlatformContext = createContext<{
+  isSubmitDisabled: boolean
+  setIsSubmitDisabled: (value: boolean) => void
+}>(undefined)
+
+export const useEditRolePlatformContext = () => useContext(EditRolePlatformContext)
+
 const EditRolePlatformModal = ({
   rolePlatform,
   onClose,
   isOpen,
   onSubmit,
 }: Props) => {
+  const [isSubmitDisabled, setIsSubmitDisabled] = useState(false)
   const methods = useForm()
-
   const modalContentRef = useRef()
 
   const rewardName =
@@ -53,15 +60,23 @@ const EditRolePlatformModal = ({
         <ModalBody>
           <VStack spacing={8} alignItems="start">
             <FormProvider {...methods}>
-              <RolePlatformProvider rolePlatform={rolePlatform}>
-                <SettingsComponent />
-              </RolePlatformProvider>
+              <EditRolePlatformContext.Provider
+                value={{ isSubmitDisabled, setIsSubmitDisabled }}
+              >
+                <RolePlatformProvider rolePlatform={rolePlatform}>
+                  <SettingsComponent />
+                </RolePlatformProvider>
+              </EditRolePlatformContext.Provider>
             </FormProvider>
           </VStack>
         </ModalBody>
 
         <ModalFooter>
-          <Button colorScheme="green" onClick={methods.handleSubmit(onSubmit)}>
+          <Button
+            colorScheme="green"
+            isDisabled={isSubmitDisabled}
+            onClick={methods.handleSubmit(onSubmit)}
+          >
             Done
           </Button>
         </ModalFooter>