react/ProductContext.tsx

@@ -0,0 +1,3 @@
+import ProductContext from "./components/ProductContext/ProductContext";
+
+export default ProductContext;

react/components/Html/styles.css

@@ -1,15 +1,123 @@
 [class*="productImageTag--main"] {
-  max-width: 80.25%;
+  object-fit: contain !important;
-  object-fit: none;
+  width: 98.225% !important;
+  height: 100% !important;
+  max-height: 664px !important;
+}
+
+[class*="subscriberContainer"] {
+  position: relative;
+  bottom: 20px;
+}
+
+@media (max-width: 639px) {
+  [class*="subscriberContainer"] :global(.vtex-store-components-3-x-form) {
+    display: flex;
+    flex-direction: row;
+  }
+}
+
+[class*="subscriberContainer"] :global(.vtex-button__label) {
+  font-size: 0;
+}
+
+[class*="subscriberContainer"] :global(.vtex-button__label)::after {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 25px;
+  content: "AVISE-ME";
+}
+
+[class*="subscriberContainer"] :global(.vtex-store-components-3-x-form) {
+  width: 100%;
+}
+
+[class*="subscriberContainer"] :global(.vtex-input-prefix__group) {
+  width: 195.5px;
+}
+
+[class*="subscriberContainer"] :global(.vtex-store-components-3-x-submit) {
+  position: relative;
+  top: 35px;
+  right: 422px;
+  margin-top: 15px;
+}
+
+[class*="subscriberContainer"] :global(.vtex-button) {
+  width: 399px;
+  height: 49px;
+  background: black;
+  color: white;
+}
+
+[class*="arrow--1"] {
+  display: none;
+}
+
+[class*="link--1"] {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+
+[class*="link--2"] {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 0;
+  line-height: 19px;
+  color: #929292;
+}
+
+[class*="link--2"]::after {
+  font-size: 14px;
+  content: "Sapatos";
+}
+
+[class*="homeLink"] {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+
+[class*="term"] {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+}
+
+[class*="vtex-store-components-3-x-caretIcon"] {
+  display: none;
 }
 
 [class*="flexRow--button-cart"] :global(.vtex-button) {
   background-color: black;
   border-color: black;
-  width: 97.952%;
   height: 49px;
 }
 
+[class*="flexRow--button-cart"] {
+  background-color: black;
+  border-color: black;
+  width: 73.464%;
+  height: 49px;
+  position: relative;
+  bottom: 72px;
+  left: 148px;
+  margin-left: 5px;
+}
+
 [class*="numeric-stepper__minus-button__text"] {
   position: absolute !important;
   left: 50%;
@@ -39,6 +147,23 @@
   position: relative;
 }
 
+[class*="buttonText--button-add"] {
+  font-size: 0;
+}
+
+[class*="buttonText--button-add"]::after {
+  content: "ADICIONAR À SACOLA";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  color: #ffffff;
+}
+
 [class*="skuSelectorInternalBox"] {
   border-radius: 24px;
   position: relative;
@@ -46,13 +171,68 @@
   height: 46px;
 }
 
-[class*="frameAround"] {
+[class*="skuSelectorContainer"] {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
+[class*="skuSelectorSubcontainer--cor"]
+  :global(.vtex-store-components-3-x-skuSelectorName) {
+  font-size: 0;
+}
+
+[class*="skuSelectorSubcontainer--cor"]
+  :global(.vtex-store-components-3-x-skuSelectorName)::after {
+  font-size: 12px;
+  content: "OUTRAS CORES";
+}
+
+[class*="skuSelectorSubcontainer--cor"]
+  :global(.vtex-store-components-3-x-skuSelectorSelectorImageValue) {
+  font-size: 0;
+}
+
+[class*="skuSelectorSubcontainer--tamanho"]
+  :global(.vtex-store-components-3-x-skuSelectorName) {
+  font-size: 0;
+}
+
+[class*="skuSelectorSubcontainer--tamanho"]
+  :global(.vtex-store-components-3-x-skuSelectorName)::after {
+  font-size: 12px;
+  content: "OUTROS TAMANHOS:";
+}
+
+[class*="skuSelectorSubcontainer--cor"]
+  :global(.vtex-store-components-3-x-frameAround) {
   border-radius: 24px;
   width: 48px;
   height: 48px;
   border-color: black;
 }
 
+[class*="vtex-product-price-1-x-sellingPriceValue--summary"] {
+  font-size: 0 !important;
+}
+
+[class*="skuSelectorSubcontainer--tamanho"]
+  :global(.vtex-store-components-3-x-frameAround) {
+  border-radius: 24px;
+  width: 40px;
+  height: 40px;
+  border-color: black;
+  left: 0.5px;
+  top: -1.8px;
+}
+
+[class*="skuSelectorSubcontainer--tamanho"]
+  :global(.vtex-store-components-3-x-skuSelectorInternalBox) {
+  border-radius: 24px;
+  width: 40px;
+  height: 40px;
+  border-color: black;
+}
+
 [class*="skuSelectorItemTextValue"] {
   position: absolute;
   top: 50%;
@@ -69,6 +249,10 @@
   color: #929292;
 }
 
+[class*="vtex-input__error"] {
+  display: none;
+}
+
 [class*="productNameContainer"] {
   text-align: end;
 }
@@ -117,6 +301,25 @@
   margin-left: 32px;
 }
 
+[class*="vtex-address-form__postalCode"] :global(.vtex-input__label) {
+  font-size: 0;
+}
+
+[class*="vtex-address-form__postalCode"] :global(.vtex-input__label)::after {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #929292;
+  content: "CALCULAR FRETE:";
+}
+
+[class*="vtex-address-form__postalCode-forgottenURL"] :global(.pointer) {
+  color: black;
+  text-decoration: underline;
+}
+
 [class*="productDescriptionTitle"] {
   font-family: "Open Sans";
   font-style: normal;
@@ -141,7 +344,7 @@
 }
 
 [class*="listContainer"] {
-  justify-content: space-between;
+  justify-content: space-around;
   color: black;
   background-color: transparent;
   border-bottom: 1px solid #bfbfbf;
@@ -204,9 +407,9 @@
   border: none;
 }
 
-[class*="imageNormal"] {
+[class*="vtex-product-summary-2-x-imageNormal"] {
-  max-width: 434.4px;
+  width: 434.4px;
-  max-height: 434.4px;
+  height: 434.4px;
 }
 
 [class*="newsletter"] {
@@ -255,3 +458,455 @@
   position: relative;
   right: 12px;
 }
+
+[class*="vtex-store-components-3-x-shippingTableRadioBtn"] {
+  display: none;
+}
+
+[class*="vtex-store-components-3-x-shippingTableRow"]:nth-child(1)::after {
+  content: "ENTREGA";
+  position: relative;
+  right: 500%;
+  top: -23px;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+}
+
+[class*="vtex-store-components-3-x-shippingTableRow"]:nth-child(2)::after {
+  content: "FRETE";
+  position: relative;
+  right: 329%;
+  top: -45px;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+}
+
+[class*="vtex-store-components-3-x-shippingTableRow"]:nth-child(3)::after {
+  content: "PRAZO";
+  position: relative;
+  right: 108%;
+  top: -67px;
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  color: #202020;
+}
+
+[class*="vtex-store-components-3-x-shippingTable"] {
+  border: none;
+  margin-top: -76px;
+}
+
+[class*="discountInsideContainer"] {
+  display: none;
+}
+
+[class*="vtex-slider-layout-0-x-slide--shelf "]
+  :global(.vtex-product-summary-2-x-productBrand) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 18px;
+  line-height: 25px;
+  text-align: center;
+  color: #000000;
+}
+
+[class*="vtex-slider-layout-0-x-slide--shelf "]
+  :global(.vtex-product-summary-2-x-productNameContainer) {
+  width: 282.4px;
+  height: 50px;
+  text-align: center;
+}
+
+[class*="vtex-slider-layout-0-x-slide--shelf "]
+  :global(.vtex-store-components-3-x-sellingPrice) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 24px;
+  line-height: 33px;
+  text-align: center;
+  color: #000000;
+}
+
+[class*="vtex-slider-layout-0-x-slide--shelf "]
+  :global(.vtex-store-components-3-x-listPrice) {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  text-align: center;
+  text-decoration-line: line-through;
+}
+
+[class*="vtex-slider-layout-0-x-slide--shelf "]
+  :global(.vtex-store-components-3-x-installmentsPrice) {
+  font-size: 0;
+}
+
+[class*="paginationDotsContainer"]
+  :global(.vtex-slider-layout-0-x-paginationDot--isActive) {
+  background: white !important;
+  border: 0.5px solid #000000;
+}
+
+[class*="paginationDotsContainer"]
+  :global(.vtex-slider-layout-0-x-paginationDot) {
+  background: black;
+}
+
+[class*="paragraph"] {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 24px;
+  line-height: 38px;
+  text-align: center;
+  color: #575757;
+}
+
+[class*="subscriberContainer"] :global(.vtex-store-components-3-x-title) {
+  font-size: 0;
+}
+
+[class*="subscriberContainer"]
+  :global(.vtex-store-components-3-x-title)::after {
+  content: "Produto Indisponível";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+  color: #868686;
+}
+
+@media (min-width: 2500px) {
+  [class*="subscriberContainer"]
+    :global(.vtex-store-components-3-x-title)::after {
+  }
+}
+
+[class*="subscriberContainer"]
+  :global(.vtex-store-components-3-x-subscribeLabel) {
+  font-size: 0;
+}
+[class*="subscriberContainer"]
+  :global(.vtex-store-components-3-x-subscribeLabel)::after {
+  content: "Deseja saber quando estiver disponível?";
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 14px;
+  line-height: 19px;
+  display: flex;
+  align-items: center;
+  color: #868686;
+}
+
+[class*="container--home"] {
+  margin: 0 40px;
+}
+
+[class*="agenciamagma-store-theme-5-x-html--shipping"] {
+  position: relative;
+  bottom: 77px;
+  margin-top: 16px;
+}
+
+[class*="thumbImg--product-images"] {
+  width: 90px;
+  height: 90px;
+  gap: 16px;
+  display: flex;
+}
+
+[class*="productDescriptionText"]
+  :global(.vtex-store-components-3-x-container) {
+  margin: 0 !important;
+}
+
+[class*="vtex-store-components-3-x-container"] {
+  margin: 0 40px;
+}
+
+[class="vtex-store-components-3-x-newsletter"] :global(.vtex-input) {
+  border: none !important;
+  border-bottom: 1px solid white !important;
+  border-radius: 0 !important;
+}
+
+@media (max-width: 1024px) {
+  [class*="listContainer"] {
+    flex-direction: column;
+  }
+
+  [class*="vtex-store-components-3-x-container"]
+    :global(.vtex-flex-layout-0-x-flexRowContent) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  [class*="vtex-flex-layout-0-x-stretchChildrenWidth"] {
+    width: 100% !important;
+  }
+
+  [class*="productNameContainer"] {
+    text-align: start !important;
+  }
+
+  [class*="product-identifier__value"] {
+    text-align: start !important;
+    position: unset !important;
+  }
+
+  [class*="productImageTag"] {
+    max-height: none !important;
+    width: 100% !important;
+    margin: auto !important;
+  }
+
+  [class*="ph5-m"] {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+  [class*="vtex-store-components-3-x-container"] {
+    margin: 0 40px;
+  }
+
+  [class*="flexRow--button-cart"] {
+    width: 85.382%;
+  }
+
+  [class*="productDescriptionContainer"] {
+    margin-left: 0px;
+  }
+
+  [class*="agenciamagma-store-theme-5-x-html--shipping"] {
+    position: relative !important;
+    bottom: 75.5px !important;
+    margin-top: 16px !important;
+  }
+
+  [class*="agenciamagma-store-theme-5-x-html--shipping"] {
+    position: relative !important;
+    bottom: 75.5px !important;
+    margin-top: 16px !important;
+  }
+
+  [class*="productDescriptionText"]
+    :global(.vtex-store-components-3-x-container) {
+    margin: 0 !important;
+  }
+
+  [class*="listContainer"] {
+    border-top: 1px solid #bfbfbf;
+  }
+  [class*="listItemActive"] :global(.vtex-button) {
+    border-bottom: none;
+  }
+  [class*="vtex-product-summary-2-x-imageNormalageNormal"] {
+    width: 291.4px;
+    height: 291.4px;
+  }
+
+  [class*="listItem"] :global(.vtex-button):hover {
+    border-bottom: none;
+  }
+
+  [data-testid="product-description"] {
+    position: relative;
+    bottom: 24px;
+  }
+
+  [class*="thumbImg--product-images"] {
+    gap: 0px;
+  }
+}
+
+@media (min-width: 2500px) {
+  [class*="listItem"] :global(.vtex-button) {
+    color: #bfbfbf;
+    border-radius: 0;
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 24px;
+    line-height: 38px;
+  }
+
+  [class*="listContainer"] {
+    width: 75%;
+    margin: auto;
+  }
+
+  [data-testid="product-description"]
+    :global(.vtex-store-components-3-x-container) {
+    margin-top: 64px !important;
+  }
+
+  [class="product-identifier__value"] {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+  }
+
+  [class*="productDescriptionText"]
+    :global(.vtex-store-components-3-x-container) {
+    margin: 0 !important;
+    width: 632px;
+    height: 66px;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 22px;
+  }
+  [class*="vtex-store-components-3-x-container"] {
+    width: 75%;
+    margin: auto !important;
+  }
+
+  [class="vtex-product-price-1-x-sellingPrice"] {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 700;
+    font-size: 25px;
+    line-height: 38px;
+    color: #000000;
+    width: 116px;
+    height: 38px;
+  }
+
+  [class="installments--m3-custom-installments"] {
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 22px;
+    color: #929292;
+  }
+
+  [class*="skuSelectorSubcontainer--tamanho"]
+    :global(.vtex-store-components-3-x-skuSelectorName)::after {
+    width: 904px;
+    height: 19px;
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: #929292;
+  }
+
+  [class*="skuSelectorSubcontainer--cor"]
+    :global(.vtex-store-components-3-x-skuSelectorName)::after {
+    width: 904px;
+    height: 19px;
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: #929292;
+  }
+
+  [class*="vtex-address-form__postalCode"] :global(.vtex-input__label)::after {
+    width: 116px;
+    height: 19px;
+    font-family: "Open Sans";
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 19px;
+    color: #929292;
+  }
+
+  [class*="flexRow--button-cart"] {
+    width: 100%;
+  }
+}
+
+@media (max-width: 639px) {
+  [class*="vtex-product-summary-2-x-imageNormal"] {
+    width: 124.8px;
+    height: 124.8px;
+  }
+  [class*="shippingTable"] {
+    display: none;
+  }
+  [class*="vtex-store-components-3-x-carouselContainer"] :global(.dn) {
+    display: block;
+  }
+
+  [class*="vtex-store-components-3-x-caretIcon"] {
+    display: none;
+  }
+
+  [class*="flexRow--button-cart"] {
+    width: 100% !important;
+  }
+}
+
+@media (max-width: 800px) {
+  [class*="shippingTable"] {
+    display: none;
+  }
+
+  [class*="flexRow--button-cart"] {
+    background-color: black;
+    border-color: black;
+    width: 73.464%;
+    height: 49px;
+    position: relative;
+    bottom: 14px;
+    left: -4px;
+    margin-left: 5px;
+  }
+  [class*="agenciamagma-store-theme-5-x-html--shipping"] {
+    position: relative !important;
+    bottom: 18.5px !important;
+    margin-top: 16px !important;
+  }
+}
+
+@media (max-width: 376px) {
+  [class*="vtex-store-components-3-x-imageElement"] {
+    max-width: 296px;
+  }
+
+  [class*="vtex-address-form__postalCode-forgottenURL"] {
+    bottom: 7px;
+    left: 57%;
+    margin-left: 0;
+  }
+
+  [class*="shippingContainer"] :global(.vtex-input-prefix__group) {
+    width: 83.532%;
+    height: 49px;
+  }
+
+  [class*="shippingContainer"] :global(.vtex-button) {
+    height: 49px;
+    left: 83.5%;
+    bottom: 110px;
+  }
+
+  [class*="flexRow--button-cart"] {
+    width: 100%;
+  }
+}

react/components/ProductContext/ProductContext.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from "react";
+import { useProduct } from "vtex.product-context";
+import styles from "./styles.css";
+
+const ProductContext = () => {
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      const cepInput = document.querySelector(".vtex-address-form-4-x-input");
+      if (cepInput) {
+        cepInput.setAttribute("placeholder", "Digite seu CEP");
+        console.log(cepInput);
+        clearInterval(intervalId);
+      }
+    }, 50);
+  }, []);
+
+  const productContextValue = useProduct();
+
+  return (
+    <div className={styles.pixWrapper}>
+      <div className={styles.imagePix}>
+        <img
+          src="https://agenciamagma.vtexassets.com/arquivos/pix-leo.svg"
+          alt="pix"
+        />
+      </div>
+      <div className={styles.textBox}>
+        <p className={styles.textPrice}>
+          {productContextValue?.product?.priceRange?.sellingPrice?.highPrice}
+        </p>
+        <p className={styles.textDescount}>10 % de desconto</p>
+      </div>
+    </div>
+  );
+};
+
+export default ProductContext;

react/components/ProductContext/styles.css

@@ -0,0 +1,36 @@
+.pixWrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 26px;
+  position: relative;
+}
+
+.textPrice {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 700;
+  font-size: 18px;
+  line-height: 25px;
+  color: black;
+  margin: 0;
+}
+
+.textDescount {
+  font-family: "Open Sans";
+  font-style: normal;
+  font-weight: 300;
+  font-size: 13px;
+  line-height: 18px;
+  color: #929292;
+  margin: 0;
+}
+
+.textBox {
+  display: flex;
+  flex-direction: column;
+}
+
+.imagePix {
+  display: flex;
+  align-items: center;
+}

react/typings/css.d.ts

@@ -0,0 +1,4 @@
+declare module "*.css" {
+    const css: any;
+    export default css;
+}

react/typings/global.d.ts

@@ -0,0 +1,7 @@
+export interface TimeSplit {
+    hours: string
+    minutes: string
+    seconds: string
+}
+
+type GenericObject = Record<string, any>

react/typings/graphql.d.ts

@@ -0,0 +1,6 @@
+declare module "*.graphql" {
+    import { DocumentNode } from "graphql";
+
+    const value: DocumentNode;
+    export default value;
+}

react/typings/storefront.d.ts

@@ -0,0 +1,15 @@
+import { FunctionComponent } from "react";
+
+declare global {
+  interface StorefrontFunctionComponent<P = GenericObject>
+    extends FunctionComponent<P> {
+    getSchema?(props: P): GenericObject
+    schema?: GenericObject
+  }
+
+  interface StorefrontComponent<P = GenericObject, S = GenericObject>
+    extends Component<P, S> {
+    getSchema?(props: P): GenericObject
+    schema: GenericObject
+  }
+}

react/typings/vtex.css-handles.ts

@@ -0,0 +1 @@
+declare module "vtex.css-handles"

react/typings/vtex.order-manager.d.ts

@@ -0,0 +1,103 @@
+/* eslint-disable no-inner-declarations */
+declare module "vtex.order-manager/OrderQueue" {
+    export * from "vtex.order-manager/react/OrderQueue";
+    export { default } from "vtex.order-manager/react/OrderQueue";
+
+    export const QueueStatus = {
+        PENDING: "Pending",
+        FULFILLED: "Fulfilled",
+    } as const;
+}
+
+declare module "vtex.order-manager/OrderForm" {
+    import { createContext, useContext } from "react";
+    import type { DEFAULT_ORDER_FORM } from "@vtex/order-manager/src/constants";
+    import type { Context, OrderForm } from "@vtex/order-manager/src/typings";
+
+    type DefaultOrderForm = typeof DEFAULT_ORDER_FORM;
+    type DefaultOrderFormOmited = Omit<DefaultOrderForm, "items">;
+    type DefaultOrderFormUpdated = DefaultOrderFormOmited & {
+        items: OrderFormItem[] | null;
+    };
+
+    export const OrderFormContext = createContext<Context<OrderForm>>({
+        orderForm: DefaultOrderFormUpdated,
+        setOrderForm: noop,
+        error: undefined,
+        loading: false,
+    });
+
+    function useOrderForm<O extends OrderForm = DefaultOrderFormUpdated>() {
+        const context = useContext(OrderFormContext);
+
+        if (context === undefined) {
+            throw new Error(
+                "useOrderForm must be used within a OrderFormProvider"
+            );
+        }
+        return context as Context<O>;
+    }
+
+    export type OrderFormItem = {
+        additionalInfo: {
+            brandName: string;
+            __typename: string;
+        };
+        attachments: Array<any>;
+        attachmentOfferings: Array<any>;
+        bundleItems: Array<any>;
+        parentAssemblyBinding: any;
+        parentItemIndex: any;
+        sellingPriceWithAssemblies: any;
+        options: any;
+        availability: string;
+        detailUrl: string;
+        id: string;
+        imageUrls: Record<string, string>;
+        listPrice: number;
+        manualPrice: any;
+        measurementUnit: string;
+        modalType: any;
+        name: string;
+        offerings: Array<any>;
+        price: number;
+        priceTags: Array<any>;
+        productCategories: Record<string, string>;
+        productCategoryIds: string;
+        productRefId: string;
+        productId: string;
+        quantity: number;
+        seller: string;
+        sellingPrice: number;
+        skuName: string;
+        skuSpecifications: Array<any>;
+        unitMultiplier: number;
+        uniqueId: string;
+        refId: string;
+        isGift: boolean;
+        priceDefinition: {
+            calculatedSellingPrice: number;
+            total: number;
+            sellingPrices: Array<{
+                quantity: number;
+                value: number;
+                __typename: string;
+            }>;
+            __typename: string;
+        };
+        __typename: string;
+    };
+
+    export { OrderFormProvider, useOrderForm };
+    declare const _default: {
+        OrderFormProvider: import("react").FC<Record<string, never>>;
+        useOrderForm: typeof useOrderForm;
+    };
+    export default _default;
+}
+
+declare module "vtex.order-manager/constants" {
+    export * from "vtex.order-manager/react/constants";
+}
+
+

react/typings/vtex.render-runtime.d.ts

@@ -0,0 +1,38 @@
+/* Typings for `render-runtime` */
+declare module "vtex.render-runtime" {
+    import { ComponentType, ReactElement, ReactType } from "react";
+
+    export interface NavigationOptions {
+        page: string
+        params?: any
+    }
+
+    export interface RenderContextProps {
+        runtime: {
+            navigate: (options: NavigationOptions) => void
+        }
+    }
+
+    interface ExtensionPointProps {
+        id: string
+        [key: string]: any
+    }
+
+    export const ExtensionPoint: ComponentType<ExtensionPointProps>;
+
+    interface ChildBlockProps {
+        id: string
+    }
+
+    export const ChildBlock: ComponentType<ChildBlockProps>;
+    export const useChildBlock = () => GenericObject;
+
+    export const Helmet: ReactElement;
+    export const Link: ReactType;
+    export const NoSSR: ReactElement;
+    export const RenderContextConsumer: ReactElement;
+    export const canUseDOM: boolean;
+    export const withRuntimeContext: <TOriginalProps extends GenericObject>(
+        Component: ComponentType<TOriginalProps & RenderContextProps>
+    ) => ComponentType<TOriginalProps>;
+}

react/typings/vtex.styleguide.d.ts

@@ -0,0 +1,9 @@
+declare module "vtex.styleguide" {
+    import { ComponentType } from "react";
+
+    export const Input: ComponentType<InputProps>;
+
+    interface InputProps {
+        [key: string]: any
+    }
+}

store/blocks/home/home.jsonc

@@ -66,7 +66,7 @@
       "itemsPerPage": {
         "desktop": 4,
         "tablet": 3,
-        "phone": 1
+        "phone": 2
       },
       "infinite": true,
       "fullWidth": false,

store/blocks/pdp/product.jsonc

@@ -3,15 +3,17 @@
     "children": [
       "html#breadcrumb",
       "condition-layout.product#availability",
-      "tab-layout#home",
+      "html#product-description",
       "rich-text#textproducts",
-      "list-context.product-list#demo1",
+      "list-context.product-list#produtos",
-      "rich-text#textnewsletter",
-      "newsletter",
       "product-questions-and-answers"
     ]
   },
 
+  "ProductContext": {
+    "props": {}
+  },
+
   "newsletter": {
     "props": {
       "text": "Você também pode gostar:"
@@ -36,15 +38,28 @@
     }
   },
 
-  "product-summary.shelf#demo1": {
+  "html#prateleira": {
+    "props": { "testId": "vtex-product-summary" },
     "children": [
       "product-summary-image",
       "product-summary-name",
-      "product-summary-price"
+      "product-summary-price",
+      "product-list-price#summary",
+      "product-selling-price#summary"
     ]
   },
-  "list-context.product-list#demo1": {
+
+  "product-summary.shelf#demo1": {
+    "props": {},
+    "children": ["html#prateleira"]
+  },
+  "list-context.product-list#produtos": {
     "blocks": ["product-summary.shelf#demo1"],
+    "children": ["html#slider"]
+  },
+
+  "html#slider": {
+    "props": { "testId": "product-summary-list" },
     "children": ["slider-layout#demo-products"]
   },
 
@@ -66,12 +81,17 @@
   },
   "flex-layout.row#description": {
     "props": {
+      "width": {
+        "tablet": "100%"
+      },
       "marginBottom": 7
     },
     "children": ["image#tab", "product-description"]
   },
   "condition-layout.product#availability": {
     "props": {
+      "blockClass": "produtoHome",
+      "id": "produtoHome",
       "conditions": [
         {
           "subject": "isProductAvailable"
@@ -118,31 +138,35 @@
     }
   },
   "flex-layout.row#product-image": {
-    "props": {},
+    "props": { "blockClass": "product-images" },
     "children": ["html#product-images"]
   },
   "product-images": {
     "props": {
-      "width": "40%",
+      "blockClass": "product-images",
       "contentType": "images",
       "showNavigationArrows": false,
       "showPaginationDots": false,
       "thumbnailsOrientation": "horizontal",
       "aspectRatio": {
         "desktop": "auto",
-        "phone": "16:9"
+        "phone": "auto"
       },
       "displayThumbnailsArrows": true
     }
   },
 
+  "html#shipping-simulator": {
+    "props": {
+      "blockClass": "shipping",
+      "testId": "shipping-simulator"
+    },
+    "children": ["shipping-simulator"]
+  },
+
   "html#product-images": {
     "props": {
-      "thumbnailsOrientation": "horizontal",
+      "blockClass": "product-images",
-      "tag": "section",
-      "infinite": "true",
-      "preventHorizontalStretch": "true",
-      "verticalAlign": "bottom",
       "testId": "product-images"
     },
     "children": ["product-images"]
@@ -150,38 +174,65 @@
 
   "flex-layout.col#right-col": {
     "props": {
-      "width": "60%",
       "preventVerticalStretch": true,
       "rowGap": 0
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-identifier.product",
+      "html#codigo",
       "product-rating-summary",
       "flex-layout.row#list-price-savings",
-      "flex-layout.row#selling-price",
+      "html#selling-price",
-      "product-installments#m3-academy",
+      "html#product-installments",
-      "sku-selector",
+      "html#pix",
+      "html#sku-selector",
+      "html#product-quantity",
       "product-gifts",
       "flex-layout.row#buy-button",
       "availability-subscriber",
-      "shipping-simulator"
+      "html#shipping-simulator"
     ]
   },
 
+  "html#selling-price": {
+    "props": { "testId": "product-price" },
+    "children": ["flex-layout.row#selling-price"]
+  },
+
+  "html#sku-selector": {
+    "props": { "testId": "sku-selector" },
+    "children": ["sku-selector"]
+  },
+
+  "html#pix": {
+    "props": { "testId": "pix-price", "blockClass": "pix" },
+    "children": ["ProductContext"]
+  },
+
+  "html#product-installments": {
+    "props": { "testId": "product-installments" },
+    "children": ["product-installments"]
+  },
+
   "image#tab": {
     "props": {
       "src": "assets/img-sapato.png"
     }
   },
 
-  "tab-layout#home": {
+  "tab-layout": {
     "children": ["tab-list#home", "tab-content#home"],
     "props": {
       "blockClass": "home",
       "defaultActiveTabId": "home1"
     }
   },
+
+  "html#product-description": {
+    "props": { "testId": "product-description" },
+    "children": ["tab-layout"]
+  },
+
   "tab-list#home": {
     "children": [
       "tab-list.item#home1",
@@ -267,7 +318,7 @@
     }
   },
 
-  "product-installments#m3-academy": {
+  "product-installments": {
     "props": {
       "installmentsCriteria": "max-quantity-without-interest",
       "markers": ["discount", "vezes"],
@@ -280,6 +331,11 @@
     "props": {
       "marginBottom": 3
     },
+    "children": ["html#product-name"]
+  },
+
+  "html#product-name": {
+    "props": { "testId": "product-name" },
     "children": ["vtex.store-components:product-name"]
   },
 
@@ -297,11 +353,15 @@
       "marginBottom": 7,
       "blockClass": "button-cart"
     },
-    "children": ["product-quantity", "html#add-to-cart-button"]
+    "children": ["html#add-to-cart-button"]
   },
 
   "product-quantity": {
-    "props": { "width": "25%" }
+    "props": {}
+  },
+  "html#product-quantity": {
+    "props": { "testId": "product-quantity" },
+    "children": ["product-quantity"]
   },
 
   "html#add-to-cart-button": {
@@ -331,11 +391,17 @@
     },
     "children": [
       "flex-layout.row#product-name",
-      "product-identifier.product",
+      "html#codigo",
-      "sku-selector",
+      "flex-layout.row#availability",
-      "flex-layout.row#availability"
+      "sku-selector"
     ]
   },
+
+  "html#codigo": {
+    "props": { "blockClass": "codigo", "testId": "product-code" },
+    "children": ["product-identifier.product"]
+  },
+
   "flex-layout.row#availability": {
     "props": {
       "blockClass": "message-availability"

store/interfaces.json

@@ -5,5 +5,8 @@
   "html": {
     "component": "html",
     "composition": "children"
+  },
+  "ProductContext": {
+    "component": "ProductContext"
   }
 }

styles/configs/font-faces.css

@@ -0,0 +1,4 @@
+@font-face {
+  font-family: "Open Sans", sans-serif;
+  src: url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap');
+}

styles/configs/style.json

@@ -1,26 +1,28 @@
 {
-    "typeScale": [
+  "typeScale": [3, 2.25, 1.5, 1.25, 1, 0.875, 0.75],
-        3, 2.25, 1.5, 1.25, 1, 0.875, 0.75
-      ],
   "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16],
   "customMedia": [
     { "s": 20 },
-        { "ns": {
+    {
+      "ns": {
         "value": 40,
         "minWidth": true
       }
     },
-        { "m": {
+    {
+      "m": {
         "value": 40,
         "minWidth": true
       }
     },
-        { "l": {
+    {
+      "l": {
         "value": 64,
         "minWidth": true
       }
     },
-        { "xl": {
+    {
+      "xl": {
         "value": 80,
         "minWidth": true
       }
@@ -245,92 +247,92 @@
   "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96],
   "heights": [1, 2, 4, 8, 16],
   "sizes": [
-        {"name": "small", "value": 2},
+    { "name": "small", "value": 2 },
-        {"name": "regular", "value": 2.5},
+    { "name": "regular", "value": 2.5 },
-        {"name": "large", "value": 3}
+    { "name": "large", "value": 3 }
   ],
-      "typography":{
+  "typography": {
     "measure": [30, 34, 20],
     "styles": {
       "heading-1": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "700",
         "fontSize": "3rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-2": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "700",
         "fontSize": "2.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-3": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "700",
         "fontSize": "1.75rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-4": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.5rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-5": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "heading-6": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1.25rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "body": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "1rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "0.875rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "mini": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "normal",
         "fontSize": "0.75rem",
         "textTransform": "initial",
         "letterSpacing": "0"
       },
       "action": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "500",
         "fontSize": "1rem",
         "textTransform": "uppercase",
         "letterSpacing": "0"
       },
       "action--small": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "500",
         "fontSize": "0.875rem",
         "textTransform": "uppercase",
         "letterSpacing": "0"
       },
       "action--large": {
-            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
+        "fontFamily": "Open Sans, San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
         "fontWeight": "500",
         "fontSize": "1.25rem",
         "textTransform": "uppercase",

styles/css/vtex.breadcrumb.css

@@ -1,52 +1,25 @@
 .homeIcon {
-  visibility: hidden;
+  display: none;
 }
-
+.homeLink::after {
-.arrow--1 {
-  visibility: hidden;
-  content: "";
-}
-
-.arrow--1::after {
-  visibility: visible;
   content: "Home";
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 19px;
-  color: #929292;
-}
-
-.link--2 {
-  visibility: hidden;
-  content: "";
-}
-
-.link--2::after {
-  visibility: visible;
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 19px;
-  color: #929292;
-  content: "Sapatos";
-}
-
-.term {
-  visibility: hidden;
-}
-
-.term::after {
-  visibility: visible;
-  content: "Sandálias";
-  font-family: "Open Sans";
-  font-style: normal;
-  font-weight: 400;
-  font-size: 14px;
-  line-height: 19px;
-  color: #929292;
   position: relative;
-  right: 230px;
+  bottom: 1px;
+}
+
+.container {
+  margin: 0 40px;
+  position: relative;
+  top: 48px;
+}
+
+[data-testid="product-price"] {
+  height: 38px;
+}
+
+@media (min-width: 2500px) {
+  .container {
+    width: 75%;
+    margin: auto;
+  }
 }

styles/css/vtex.condition-layout.css

@@ -0,0 +1,2 @@
+
+

styles/css/vtex.flex-layout.css

@@ -3,6 +3,7 @@
   padding: 0 0.5rem;
 }
 
+
 @media screen and (min-width: 40em) {
   .flexRowContent--menu-link,
   .flexRowContent--main-header {

styles/css/vtex.product-identifier.css

@@ -11,7 +11,6 @@
   text-align: right;
   position: absolute;
   right: 0;
-  margin-right: 40px;
 }
 
 .product-identifier--productReference {