feat: create field checkout cep customization

manifest.json

@@ -12,7 +12,8 @@
   },
   "builders": {
     "react": "2.x",
-    "pages": "0.x"
+    "pages": "0.x",
+    "styles": "2.x"
   },
   "scripts": {
     "postreleasy": "vtex publish"

package.json

@@ -33,4 +33,4 @@
     "prettier": "^2.0.2",
     "typescript": "^3.8.3"
   }
-}
+}

react/components/CheckoutCustomCep/index.tsx

@@ -0,0 +1,118 @@
+import React, { FC, useEffect } from 'react';
+
+const CheckoutCustomCep: FC = () => {
+  const [postalCode, setPostalCode] = React.useState('');
+
+  const resetShippingData = (orderFormId: string | undefined) => {
+
+    if (!orderFormId) {
+      console.error('OrderFormId não encontrado.');
+      return;
+    }
+
+    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<HTMLFormElement>) => {
+
+  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))
+  .catch((error) => console.error(error));
+
+  //@ts-ignore
+  vtexjs.checkout.getOrderForm()
+  .done(function(orderForm: any) { });
+
+  window?.localStorage?.setItem('userEnteredZipCode', 'true');
+
+  }
+
+  useEffect(() => {
+   const userEnteredZipCode = window?.localStorage?.getItem('userEnteredZipCode') == "true"
+
+   if (!userEnteredZipCode) {
+    //@ts-ignore
+    const orderFormId = window?.vtexjs?.checkout?.orderFormId;
+    resetShippingData(orderFormId);
+   }
+  }, []);
+
+
+  return (
+    <div className="custom-cep-container">
+      <form className="custom-cep-form" onSubmit={updateShippingData}>
+        <label htmlFor="custom-ship-postalCode" className="custom-cep-label">
+        Digite o CEP para finalizar a compra*
+        </label>
+        <div className="custom-cep-container-input">
+          <input
+          type="text"
+          className="custom-ship-postal-code"
+          required
+          placeholder="Digite seu CEP"
+          onChange={(e) => setPostalCode(e.target.value)}
+          />
+          <button className="custom-cep-submit" type="submit">
+           <span className="custom-cep-span">Calcular</span>
+          </button>
+        </div>
+        <p className="custom-cep-alert">*Preenchimento obrigatório</p>
+        <a
+        className="custom-search-cep"
+        href="https://buscacepinter.correios.com.br/app/endereco/index.php?t"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Não sei meu CEP
+      </a>
+    </form>
+  </div>
+  );
+}
+
+export default CheckoutCustomCep;

react/components/CheckoutCustomCep/styles.css

@@ -0,0 +1,134 @@
+.custom-cep-container {
+  margin-top: 12px;
+  padding: 32px;
+  background-color: #FAFAF9;
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid  #e4e4e7;
+}
+
+.custom-cep-container .custom-cep-container-input  {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+
+.custom-cep-container .custom-cep-form .custom-cep-label {
+  color:  #3F3F46;
+  font-family: Karla;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: -0.14px;
+  margin-bottom: 16px;
+}
+
+.custom-cep-container .custom-cep-container-input .custom-ship-postalCode {
+  max-width: 209px;
+  width: 100%;
+  height: 48px;
+  padding: 12px 16px;
+  border-radius:  8px;
+  border: 1px solid  #D4D4D8;
+  background-color: #FFF;
+
+  color: #71717A;
+  font-family: Karla;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: -0.16px;
+}
+
+.custom-cep-container .custom-cep-container-input .custom-ship-postalCode:focus {
+  box-shadow: none;
+}
+
+.custom-cep-container .custom-cep-container-input .custom-cep-submit {
+  max-width: 131px;
+  width: 100%;
+  height: 48px;
+  border-radius:8px;
+  background:  #111116;
+  border: none;
+}
+
+.custom-cep-container .custom-cep-container-input .custom-cep-submit .custom-cep-span {
+  color: #FFF;
+  font-family: Karla;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: -0.16px;
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+}
+
+.custom-cep-container .custom-cep-container-input .custom-cep-submit .custom-cep-span::after {
+  content: "";
+  display: block;
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIiBmaWxsPSJub25lIj4KICA8cGF0aCBkPSJNNC4xNjY2NiAxMEgxNS44MzMzTTE1LjgzMzMgMTBMOS45OTk5OSA0LjE2NjY2TTE1LjgzMzMgMTBMOS45OTk5OSAxNS44MzMzIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+Cjwvc3ZnPg==");
+  width: 20px;
+  height: 20px;
+}
+
+
+.custom-cep-container .custom-cep-form .custom-cep-alert {
+  color:  #3F3F46;
+
+  font-family: Karla;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 16px;
+  letter-spacing: -0.12px;
+
+  margin-bottom: 12px;
+}
+
+.custom-cep-container .custom-cep-form .custom-search-cep {
+  color:  #947C4E;
+  font-family: Karla;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: -0.12px;
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: auto;
+  text-underline-offset: auto;
+  text-underline-position: from-font;
+}
+
+@media screen and (max-width: 575px) {
+  .custom-cep-container {
+    padding: 12px;
+  }
+
+  .custom-cep-container .custom-cep-container-input {
+    flex-direction: column;
+  }
+
+  .custom-cep-container .custom-cep-container-input .custom-ship-postalCode,
+  .custom-cep-container .custom-cep-container-input .custom-cep-submit  {
+    max-width: 100%;
+  }
+
+  .custom-cep-container .custom-cep-container-input .custom-cep-submit {
+    padding: 0 20px;
+  }
+
+  .custom-cep-container .custom-cep-container-input .custom-cep-submit .custom-cep-span {
+    justify-content: flex-start;
+  }
+}

react/index.tsx

@@ -1,38 +1,11 @@
-import { Component } from 'react'
+import React, { FC } from 'react';
 
-import { Logger } from './utils/loggerDataDog'
+import CheckoutCustomCep from './components/CheckoutCustomCep';
 
-const logger = new Logger()
-
-class CheckoutCheckingInformations extends Component<{}, CheckoutCheckingInformationsState> {
-  constructor(props: any) {
-    super(props)
-    this.state = {
-      orderForm: null,
-    }
-  }
-
-  setOrderForm = (_: any, orderForm: OrderForm) => {
-    this.setState({ orderForm })
-    const postalCode = orderForm.shippingData.address.postalCode
-    console.log(postalCode, orderForm)
-    logger.info(`CHECKOUT_DATA_INFORMATION ${postalCode}`, JSON.stringify(orderForm))
-  }
-
-  componentDidMount() {
-    $(window).on('orderFormUpdated.vtex', this.setOrderForm)
-  }
-
-  componentWillUnmount() {
-    $(window).off('orderFormUpdated.vtex', this.setOrderForm)
-  }
-  render() {
-    return null
-  }
-}
-
-interface CheckoutCheckingInformationsState {
-  orderForm: OrderForm | null
+const UniversalRenderProvider: FC = () => {
+  return (
+    <CheckoutCustomCep />
+  );
 }
 
-export default CheckoutCheckingInformations
+export default UniversalRenderProvider;

react/package.json

@@ -16,7 +16,7 @@
     "@types/react-dom": "^16.0.5",
     "@types/react-helmet": "^5.0.5",
     "@types/react-intl": "^2.3.5",
-    "carapreta.checkout-customizations": "https://sel2669--carapreta.myvtex.com/_v/private/typings/linked/v1/carapreta.checkout-customizations@0.0.3+build1723475448/public/@types/carapreta.checkout-customizations",
+    "carapreta.checkout-customizations": "https://sel3064--carapreta.myvtex.com/_v/private/typings/linked/v1/carapreta.checkout-customizations@0.0.4+build1734113698/public/@types/carapreta.checkout-customizations",
     "eslint": "^6.4.0",
     "eslint-config-vtex": "^11.0.0",
     "eslint-config-vtex-react": "^5.0.1",
@@ -29,6 +29,6 @@
     "typescript": "3.9.7",
     "vtex.checkout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout@0.6.0/public/_types/react",
     "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@7.45.0/public/@types/vtex.render-runtime",
-    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.9/public/@types/vtex.styleguide"
+    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.13/public/@types/vtex.styleguide"
   }
 }

react/typings/global.d.ts

@@ -72,3 +72,4 @@ interface Message {
   status: string
   text: string
 }
+