diff --git a/src/components/clientes/ClienteModal.tsx b/src/components/clientes/ClienteModal.tsx index d8d5e22..d0488a3 100644 --- a/src/components/clientes/ClienteModal.tsx +++ b/src/components/clientes/ClienteModal.tsx @@ -175,6 +175,7 @@ export const ClienteModal: React.FC = ({ initialTab = 0, }) => { const [activeTab, setActiveTab] = useState(initialTab); + const [isLoadingCep, setIsLoadingCep] = useState(false); const { register, handleSubmit, @@ -186,6 +187,51 @@ export const ClienteModal: React.FC = ({ const { createCliente, updateCliente } = useClientes(); const formPopulated = useRef(false); + // Monitorar o valor do CEP para autopreenchimento + const cepValue = watch("cep"); + + // Função para buscar dados do CEP + const fetchAddressByCep = useCallback(async (cep: string) => { + if (!cep || cep.length !== 8) return; + + try { + setIsLoadingCep(true); + const formattedCep = cep.replace(/\D/g, ""); // Remove caracteres não numéricos + const response = await axios.get( + `https://viacep.com.br/ws/${formattedCep}/json/`, + ); + + if (response.data && !response.data.erro) { + // Preencher os campos do formulário com os dados retornados + setValue("endereco", response.data.logradouro); + setValue("bairro", response.data.bairro); + setValue("cidade", response.data.localidade); + setValue("estado", response.data.uf); + + // Focar no campo número após o preenchimento automático + const numeroInput = document.querySelector( + 'input[name="numero"]', + ) as HTMLInputElement; + if (numeroInput) numeroInput.focus(); + } else { + console.error("CEP não encontrado"); + } + } catch (error) { + console.error("Erro ao buscar CEP:", error); + } finally { + setIsLoadingCep(false); + } + }, [setValue]); + + // Efeito para monitorar mudanças no CEP + useEffect(() => { + // Verificar se o CEP tem 8 dígitos (sem formatação) + const cleanCep = cepValue?.replace(/\D/g, ""); + if (cleanCep && cleanCep.length === 8) { + fetchAddressByCep(cleanCep); + } + }, [cepValue, fetchAddressByCep]); + // Função para preencher o formulário com os dados do cliente const populateForm = useCallback( (clienteData: Cliente) => { @@ -372,7 +418,10 @@ export const ClienteModal: React.FC = ({ {/* Formulário */} -
+
{/* Conteúdo das abas */} {activeTab === 0 && ( @@ -459,13 +508,56 @@ export const ClienteModal: React.FC = ({ {activeTab === 1 && (
- +
+ { + // Formatação automática do CEP (00000-000) + let value = e.target.value.replace(/\D/g, ""); + if (value.length > 5) { + value = + value.substring(0, 5) + + "-" + + value.substring(5, 8); + } + e.target.value = value; + }} + /> + {isLoadingCep && ( +
+ + + + +
+ )} +