From b0e6523c0c556cb3e3b593e1752ca67781bd4e09 Mon Sep 17 00:00:00 2001
From: FBalint <balint@zgen.hu>
Date: Mon, 24 Jun 2024 18:22:05 +0200
Subject: [PATCH] fix(DynamicPointsAmountForm): disable save btn if provider
 req is not selected

---
 .../components/DynamicPointsAmountForm.tsx    | 19 ++++++++++++-
 .../components/EditRolePlatformModal.tsx      | 27 ++++++++++++++-----
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/AddPointsPanel/components/SetPointsAmount/components/DynamicPointsAmountForm.tsx b/src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/AddPointsPanel/components/SetPointsAmount/components/DynamicPointsAmountForm.tsx
index 15a029d8c5..07e8b6d373 100644
--- a/src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/AddPointsPanel/components/SetPointsAmount/components/DynamicPointsAmountForm.tsx
+++ b/src/components/[guild]/RolePlatforms/components/AddRoleRewardModal/components/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
index c318c80e23..bf3503b98b 100644
--- 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>