fixed if trade deselected resets all values of trade before pulling a…

…nohter payoff request

src/components/sections/TradeInfo/index.tsx

@@ -7,18 +7,22 @@ import usePayoffQuery from '@/hooks/usePayoffQuery'
 import useTradeQuery from '@/hooks/useTradeQuery'
 import { formatMoney, vinChecksum } from '@/utils'
 import { cn } from '@drivly/ui'
+import { useState } from 'react'
 import { FieldErrors, useFormContext } from 'react-hook-form'
 
 type TradeInfoProps = {
   errors: FieldErrors
 }
 
 const TradeInfo = ({ errors }: TradeInfoProps) => {
+  const [payload, setPayload] = useState<any>({})
   const { lenders, lenderCats, isTrade, setTrade } = usePayoffLenders()
-  const { watchTradeInVin } = useTradeQuery()
+  const { watchTradeInVin } = useTradeQuery(setPayload)
   const { tradeRef, isLienOther, isLoading } = usePayoffQuery({
     watchTradeInVin,
     lenders,
+    payload,
+    setPayload,
   })
   const customer = useCustomer((s) => s.customer)
   const methods = useFormContext()

src/hooks/usePayoffLenders.tsx

@@ -14,17 +14,18 @@ const usePayoffLenders = () => {
 
   useEffect(() => {
     if (!isTrade) {
-      setValue('tradeInAllowance', '')
       setValue('tradeInVin', '')
+      setValue('tradeInAllowance', '')
       setValue('tradeInYear', '')
       setValue('tradeInMake', '')
       setValue('tradeInModel', '')
-      setValue('tradeInMileage', '')
       setValue('tradeInLienIndicator', '')
       setValue('tradeInLienHoldername', '')
       setValue('tradeInGrossPayOffAmount', '')
+      setValue('tradeInOtherLienHoldername', '')
     }
   }, [isTrade, setValue])
+
   useEffect(() => {
     const getPayoffLenders = async () => {
       const { data } = await fetch('https://credit.api.driv.ly/fields').then((res) => res.json())
@@ -36,6 +37,7 @@ const usePayoffLenders = () => {
       getPayoffLenders()
     }
   }, [isTrade])
+
   const lenderCats = [
     { value: '', optionName: 'Select' },
     { value: 'idk', optionName: "I don't know" },

src/hooks/usePayoffQuery.tsx

@@ -2,26 +2,31 @@
 
 import useCustomer from '@/app/store'
 import { getPayoffQuote } from '@/app/utils/getPayoffQuote'
-import React, { useEffect } from 'react'
+import React, { Dispatch, useEffect, useState } from 'react'
 import { useFormContext } from 'react-hook-form'
 import toast from 'react-hot-toast'
 
 const usePayoffQuery = ({
   watchTradeInVin,
   lenders,
+  payload,
+  setPayload,
 }: {
   watchTradeInVin: string
   lenders: Record<string, any>[]
+  payload: any
+  setPayload: Dispatch<any>
 }) => {
   const [customer, setCustomer] = useCustomer((s) => [s.customer, s.setCustomer])
   const { setValue, setFocus, watch } = useFormContext()
-  const [isReady, setReady] = React.useState(false)
-  const [isLoading, setLoading] = React.useState(false)
-  const [payload, setPayload] = React.useState<any>({})
+  const [isReady, setReady] = useState(false)
+  const [isLoading, setLoading] = useState(false)
+
   const tradeRef = React.useRef<HTMLDivElement>(null)
   const watchLienName = watch('tradeInLienHoldername')
   const isLienOther = watchLienName === 'other' || watchLienName === 'idk'
   const ssn = watch('ssn')
+  const isTrade = watch('tradeInVehicleIndicator')
 
   useEffect(() => {
     if (watchLienName && !isLienOther) {
@@ -49,10 +54,10 @@ const usePayoffQuery = ({
         setPayload(payoffRequest)
       }
     }
-  }, [isLienOther, lenders, setFocus, ssn, watchLienName, watchTradeInVin])
+  }, [isLienOther, lenders, setFocus, setPayload, ssn, watchLienName, watchTradeInVin])
 
   useEffect(() => {
-    if (isReady && payload) {
+    if (isReady && isTrade && Object.keys(payload)?.length > 0) {
       const getPayoff = async () => {
         const toastId = toast.loading('Getting payoff quote')
         setLoading(true)

src/hooks/useTradeQuery.tsx

@@ -3,11 +3,11 @@
 import useCustomer from '@/app/store'
 import { getBuild } from '@/app/utils/getBuild'
 import { useQuery } from '@tanstack/react-query'
-import { useEffect } from 'react'
+import { Dispatch, useEffect } from 'react'
 import { useFormContext } from 'react-hook-form'
 import toast from 'react-hot-toast'
 
-const useTradeQuery = () => {
+const useTradeQuery = (setPayload: Dispatch<any>) => {
   const { watch, setValue } = useFormContext()
   const [customer, setCustomer] = useCustomer((s) => [s.customer, s.setCustomer])
   const watchTradeInVin = watch('tradeInVin')
@@ -46,13 +46,16 @@ const useTradeQuery = () => {
 
   useEffect(() => {
     if (!watchTradeInVin) {
+      setValue('tradeInVin', '')
+      setValue('tradeInAllowance', '')
       setValue('tradeInYear', '')
       setValue('tradeInMake', '')
       setValue('tradeInModel', '')
-      setValue('tradeInAllowance', '')
       setValue('tradeInLienIndicator', '')
       setValue('tradeInLienHoldername', '')
       setValue('tradeInGrossPayOffAmount', '')
+      setValue('tradeInOtherLienHoldername', '')
+      setPayload({})
       setCustomer({
         tradeInfo: {
           vin: '',
@@ -62,7 +65,7 @@ const useTradeQuery = () => {
         },
       })
     }
-  }, [setCustomer, setValue, watchTradeInVin])
+  }, [setCustomer, setPayload, setValue, watchTradeInVin])
 
   return { watchTradeInVin }
 }