diff --git a/src/components/sections/TradeInfo/index.tsx b/src/components/sections/TradeInfo/index.tsx index 02c76b9..923fbcc 100644 --- a/src/components/sections/TradeInfo/index.tsx +++ b/src/components/sections/TradeInfo/index.tsx @@ -7,6 +7,7 @@ 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 = { @@ -14,11 +15,14 @@ type TradeInfoProps = { } const TradeInfo = ({ errors }: TradeInfoProps) => { + const [payload, setPayload] = useState({}) 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() diff --git a/src/hooks/usePayoffLenders.tsx b/src/hooks/usePayoffLenders.tsx index a175a05..5f472c0 100644 --- a/src/hooks/usePayoffLenders.tsx +++ b/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" }, diff --git a/src/hooks/usePayoffQuery.tsx b/src/hooks/usePayoffQuery.tsx index c4a7f28..0a9f626 100644 --- a/src/hooks/usePayoffQuery.tsx +++ b/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[] + payload: any + setPayload: Dispatch }) => { 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({}) + const [isReady, setReady] = useState(false) + const [isLoading, setLoading] = useState(false) + const tradeRef = React.useRef(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) diff --git a/src/hooks/useTradeQuery.tsx b/src/hooks/useTradeQuery.tsx index e7bfdb1..9d1aa44 100644 --- a/src/hooks/useTradeQuery.tsx +++ b/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) => { 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 } }