diff --git a/react/components/CheckoutCustomCep/index.tsx b/react/components/CheckoutCustomCep/index.tsx index ff17cf8..c47afd8 100644 --- a/react/components/CheckoutCustomCep/index.tsx +++ b/react/components/CheckoutCustomCep/index.tsx @@ -1,141 +1,174 @@ -import React, { FC, useEffect } from 'react'; +import React, { FC, useEffect } from 'react' const CheckoutCustomCep: FC = () => { - const [postalCode, setPostalCode] = React.useState(''); + const [postalCode, setPostalCode] = React.useState('') + const [postalCodeFilled, setPostalCodeFilled] = React.useState(false) const handleInputCep = (e: React.ChangeEvent) => { - let value = e.target.value; + let value = e.target.value - value = value.replace(/\D/g, ""); + value = value.replace(/\D/g, '') if (value.length > 5) { - value = value.replace(/^(\d{5})(\d)/, "$1-$2"); + value = value.replace(/^(\d{5})(\d)/, '$1-$2') } if (value.length > 9) { - value = value.slice(0, 9); + value = value.slice(0, 9) } - setPostalCode(value); - }; + setPostalCode(value) + } const resetShippingData = (orderFormId: string | undefined) => { - if (!orderFormId) { - console.error('OrderFormId não encontrado.'); - return; + console.error('OrderFormId não encontrado.') + return } - const headers = new Headers(); - headers.append('Content-Type', 'application/json'); + const headers = new Headers() + headers.append('Content-Type', 'application/json') const body = JSON.stringify({ clearAddressIfPostalCodeNotFound: true, - }); + }) const requestOptions: RequestInit = { method: 'POST', headers, body, redirect: 'follow' as RequestRedirect, - }; - - fetch(`/api/checkout/pub/orderForm/${orderFormId}/attachments/shippingData`, requestOptions) - .then((response) => response.json()) - .then((data) => console.log('Resposta do servidor:', data)) - .catch((error) => console.error('Erro ao atualizar shippingData:', error)); - }; - - const updateShippingData = async (e: React.FormEvent) => { - - e.preventDefault(); - - //@ts-ignore - const orderFormId = window?.vtexjs?.checkout?.orderFormId; - - const myHeaders = new Headers(); - myHeaders.append("Content-Type", "application/json"); - - const raw = JSON.stringify({ - selectedAddresses: [ - { - addressType: 'residential', - country: 'BRA', - postalCode: postalCode, - }, - ], - clearAddressIfPostalCodeNotFound: true, - logisticsInfo: [{itemIndex: 0, selectedDeliveryChannel: 'delivery', selectedSla: 'ENTREGA CARAPRETA'}] - }); - - const requestOptions = { - method: "POST", - headers: myHeaders, - body: raw, - redirect: "follow" as RequestRedirect - }; - - await fetch(`/api/checkout/pub/orderForm/${orderFormId}/attachments/shippingData`, requestOptions) - .then((response) => response.text()) - .then((result) => { - console.log(result) - - //@ts-ignore - vtexjs.checkout.getOrderForm() - .done(function(orderForm: any) { }); - - window?.localStorage?.setItem('userEnteredZipCode', 'true'); - - const bodyElement = document.querySelector('body') - bodyElement?.classList.remove('zip-code-not-entered') - - }) - .catch((error) => console.error("erro no cep", error)); + } + + fetch( + `/api/checkout/pub/orderForm/${orderFormId}/attachments/shippingData`, + requestOptions + ) + .then(response => response.json()) + .then(data => console.log('Resposta do servidor:', data)) + .catch(error => console.error('Erro ao atualizar shippingData:', error)) } + const updateShippingData = async (e: React.FormEvent) => { + e.preventDefault() - useEffect(() => { - const userEnteredZipCode = window?.localStorage?.getItem('userEnteredZipCode') == "true" + //@ts-ignore + const orderFormId = window?.vtexjs?.checkout?.orderFormId + + const myHeaders = new Headers() + myHeaders.append('Content-Type', 'application/json') + + const raw = JSON.stringify({ + selectedAddresses: [ + { + addressType: 'residential', + country: 'BRA', + postalCode: postalCode, + }, + ], + clearAddressIfPostalCodeNotFound: true, + logisticsInfo: [ + { + itemIndex: 0, + selectedDeliveryChannel: 'delivery', + selectedSla: 'ENTREGA CARAPRETA', + }, + ], + }) + + const requestOptions = { + method: 'POST', + headers: myHeaders, + body: raw, + redirect: 'follow' as RequestRedirect, + } - if (!userEnteredZipCode) { + await fetch( + `/api/checkout/pub/orderForm/${orderFormId}/attachments/shippingData`, + requestOptions + ) + .then(response => response.text()) + .then(result => { + console.log(result) + + //@ts-ignore + vtexjs.checkout.getOrderForm().done(function(orderForm: any) {}) + + window?.localStorage?.setItem('userEnteredZipCode', 'true') + + const bodyElement = document.querySelector('body') + bodyElement?.classList.remove('zip-code-not-entered') + setPostalCodeFilled(true) + }) + .catch(error => console.error('erro no cep', error)) + } + + const resetPostalCode = () => { //@ts-ignore - const orderFormId = window?.vtexjs?.checkout?.orderFormId; - resetShippingData(orderFormId); - } - }, []); + resetShippingData(window?.vtexjs?.checkout?.orderFormId) + window?.localStorage?.setItem('userEnteredZipCode', 'false') + const bodyElement = document.querySelector('body') + bodyElement?.classList.add('zip-code-not-entered') + setPostalCodeFilled(false) + setPostalCode('') + } + + useEffect(() => { + const userEnteredZipCode = + window?.localStorage?.getItem('userEnteredZipCode') == 'true' + if (!userEnteredZipCode) { + //@ts-ignore + const orderFormId = window?.vtexjs?.checkout?.orderFormId + resetShippingData(orderFormId) + } + }, []) return (
-
- -
- - + {postalCodeFilled ? ( +
+

+ Digite o CEP para finalizar a compra* +

+
+ {postalCode} + +
-

*Preenchimento obrigatório

- - Não sei meu CEP - - -
- ); + ) : ( +
+ +
+ + +
+

*Preenchimento obrigatório

+ + Não sei meu CEP + +
+ )} +
+ ) } -export default CheckoutCustomCep; +export default CheckoutCustomCep