update to stop the payoffRequest from being submitted after the form …

…is submitted

src/components/Form.tsx

@@ -187,7 +187,7 @@ export default function Form({ vdp }: Props) {
             }
           })}
           <Vehicle errors={errors} watchJoint={watchJoint} />
-          <TradeInfo errors={errors} />
+          <TradeInfo errors={errors} isSubmitting={isSubmitting} />
           <Agreement isError={isError} onClick={() => setError(false)} />
           <div className='mt-8 grid grid-cols-1 px-5 pt-10 md:ml-3 md:grid-cols-3'>
             <button

src/components/sections/TradeInfo/index.tsx

@@ -12,9 +12,10 @@ import { FieldErrors, useFormContext } from 'react-hook-form'
 
 type TradeInfoProps = {
   errors: FieldErrors
+  isSubmitting: boolean
 }
 
-const TradeInfo = ({ errors }: TradeInfoProps) => {
+const TradeInfo = ({ errors, isSubmitting }: TradeInfoProps) => {
   const [payload, setPayload] = useState<any>({})
   const { lenders, lenderCats, isTrade, setTrade } = usePayoffLenders()
   const { watchTradeInVin } = useTradeQuery(setPayload)
@@ -23,6 +24,7 @@ const TradeInfo = ({ errors }: TradeInfoProps) => {
     lenders,
     payload,
     setPayload,
+    isSubmitting,
   })
   const customer = useCustomer((s) => s.customer)
   const methods = useFormContext()

src/hooks/usePayoffQuery.tsx

@@ -11,11 +11,13 @@ const usePayoffQuery = ({
   lenders,
   payload,
   setPayload,
+  isSubmitting,
 }: {
   watchTradeInVin: string
   lenders: Record<string, any>[]
   payload: any
   setPayload: Dispatch<any>
+  isSubmitting: boolean
 }) => {
   const [customer, setCustomer] = useCustomer((s) => [s.customer, s.setCustomer])
   const { setValue, setFocus, watch } = useFormContext()
@@ -56,6 +58,12 @@ const usePayoffQuery = ({
     }
   }, [isLienOther, lenders, setFocus, setPayload, ssn, watchLienName, watchTradeInVin])
 
+  useEffect(() => {
+    if(isSubmitting) {
+      setReady(false)
+    }
+  },[isReady, isSubmitting, setReady])
+
   useEffect(() => {
     if (isReady && isTrade && Object.keys(payload)?.length > 0) {
       const getPayoff = async () => {