[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/faq/vtex.disclosure-layout.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.trigger--question {
  display: flex;
  align-items: center;
  cursor: pointer;
  outline: none;
}

.trigger--question :global(.vtex-rich-text-0-x-paragraph) {
  font-weight: bold;
}

.trigger--question:focus,
.trigger--question:focus :global(.vtex-rich-text-0-x-paragraph) {
  color: #0F3E99;
}

.trigger :global(.vtex-store-icons-0-x-caretIcon) {
  margin-right: 1rem;
}

.content--answer {
  transition: opacity 250ms ease-in-out, height 250ms ease-in-out, transform 250ms ease-in-out;
  opacity: 0;
  height: 0;
  transform: translate3d(0, -10%, 0);
}

.content--answer[data-enter] {
  opacity: 1;
  height: fit-content;
  transform: translate3d(0, 0, 0);
}

.content--answer[data-leave] {
  height: 0;
  overflow: hidden;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/search/vtex.rich-text.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.container--layout-option {
  margin-left: 0.3em;
}

.paragraph--layout-option {
  margin: 0;
}

.paragraph--summarySpecificationBullet {
  margin: 0;
  line-height: initial;
  font-size: 1.25rem;
  line-height: 1.15rem;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/search/vtex.product-summary.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.nameContainer--summaryListDesktop {
  padding-top: 0.25rem;
  padding-bottom: 0.75rem;
  justify-content: start;
}

.nameContainer--summaryListMobile {
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
  justify-content: start;
}

.brandName--summaryListMobile {
  font-weight: 400;
  font-size: 0.875rem;
  color: black;
}

.container--listLayout {
  max-width: none !important;
}

.image--summaryListDesktop {
  width: 180px !important;
}

.image--summaryListMobile {
  width: 140px !important;
  min-width: 140px;
  height: inherit !important;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/search/vtex.store-components.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.productBrandName--summaryListDesktop {
  text-decoration: none;
  font-weight: 500;
  color: #0067C7;
  font-size: .875rem;
}

.productBrandName--summaryListMobile {
  text-decoration: none;
  color: #0067C7;
  font-size: .875rem;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/search/vtex.flex-layout.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.flexRow--orderByAndSwitcher {
  padding-right: 1.5em;
}

.flexRowContent--savingsSummaryListDesktop {
  justify-content: flex-start;
}

.flexCol--summaryRightListDesktop {
  justify-content: space-around;
}

.flexRow--buyNowButton :global(.vtex-button) {
  background: #eef3f7;
  border-color:#eef3f7;
  color: #0f3e99;
}

.flexRow--buyNowButton:hover :global(.vtex-button) {
  background: #dbe9fd;
  border-color:#dbe9fd;
}

.flexCol--productRating {
  margin-bottom: 3rem;
}

.flexCol--summaryDetailsListMobile {
  justify-content: space-between;
}

.flexCol--summaryUpDetailsListMobile {
  margin-bottom: 0.25rem
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/product-specification-table/vtex.flex-layout.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.flexRow--productSpecificationGroup:not(:first-child) {
  margin-top: 1.5rem;
}

.flexRow--productSpecificationGroupName {
  background-color: #eaeaea;
  padding: 0.5rem 1rem;
}

.flexCol--productSpecificationName {
  padding: 1rem;
}

.flexCol--productSpecificationValue {
  padding: 1rem 1rem 1rem 0;
}

.flexRow--productSpecification:nth-child(even) {
  background-color: #f9f9f9;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/styles/css/product-specification-table/vtex.product-specifications.css from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.groupName {
  font-size: 1.25rem;
}

.specificationName {
  font-weight: bold;
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/about-us.json from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#about-us": {
    "blocks": ["flex-layout.row#about-us", "video#about-us"]
  },

  "flex-layout.row#about-us": {
    "children": ["image#mobile-phone", "flex-layout.col#text-about-us"]
  },

  "flex-layout.col#text-about-us": {
    "children": ["rich-text#title-about-us", "rich-text#about-us"],
    "props": {
      "blockclass": "textColumn",
      "preventVerticalStretch": true
    }
  },

  "rich-text#title-about-us": {
    "props": {
      "text": "# Create meaningful and relevant experiences.",
      "blockClass": "title"
    }
  },

  "image#mobile-phone": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/mobile-phone.png",
      "maxHeight": "",
      "maxWidth": "",
      "blockClass": "storePrint"
    }
  },
  "video#about-us": {
    "props": {
      "src": "https://www.youtube.com/embed/JgkrlaF52WQ",
      "width": "100%",
      "height": "100%"
    }
  },
  "rich-text#about-us": {
    "props": {
      "text": "**Optimized store framework** \n Free your front-end with our React + Node store framework. Improve usability and SEO, while driving more conversion with modular components, single page applications, and a ready-for-PWA structure. \n **Multi-currency and language** \n Go international with multiple storefronts to support different languages and easily manage local currencies and payment conditions. \n **Serverless development platform** \n Reduce loading time, improve usability, and make the best out of SEO. Developing scalable components with a comprehensive, easy-to-use toolset, you can build stores faster than ever.",
      "blockClass": "about"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/product-price.jsonc from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#selling-price": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "preventHorizontalStretch": true,
      "marginBottom": 4
    },
    "children": [
      "product-selling-price"
    ]
  },

  "flex-layout.row#list-price-savings": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "preventHorizontalStretch": true,
      "marginBottom": 2,
      "marginTop": 5
    },
    "children": [
      "product-list-price",
      "product-price-savings"
    ]
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/minicart.jsonc from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "add-to-cart-button": {
    "props": {
      "addToCartFeedback": "customEvent",
      "customPixelEventId": "add-to-cart-button"
    }
  },

  "minicart.v2": {
    "props": {
      "customPixelEventId": "add-to-cart-button"
    },
    "children": ["minicart-base-content"]
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/search.jsonc from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.search": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "maxItemsPerPage": 25,
        "facetsBehavior": "Dynamic"
      }
    }
  },
  "store.search#brand": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "maxItemsPerPage": 25,
        "facetsBehavior": "Dynamic"
      }
    }
  },
  "store.search#department": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "maxItemsPerPage": 25,
        "facetsBehavior": "Dynamic"
      }
    }
  },
  "store.search#category": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "maxItemsPerPage": 25,
        "facetsBehavior": "Dynamic"
      }
    }
  },
  "store.search#subcategory": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "maxItemsPerPage": 25,
        "facetsBehavior": "Dynamic"
      }
    }
  },
  "search-result-layout": {
    "blocks": [
      "search-result-layout.desktop",
      "search-result-layout.mobile",
      "search-not-found-layout"
    ]
  },
  "flex-layout.row#banner-one": {
		"children": [],
		"props": {
			"fullWidth": true,
			"blockClass": "banner-one"
		}
	},
  "search-not-found-layout": {
    "children": [
      "info-card#not-found-banner",
      "flex-layout.row#continue-shopping",
      "flex-layout.row#shopByCategory"
    ]
  },
  "flex-layout.row#continue-shopping": {
    "children": ["flex-layout.col#continue-shopping-col"]
  },
  "flex-layout.col#continue-shopping-col": {
    "children": ["rich-text#continue-shopping-button"]
  },
  "rich-text#continue-shopping-button": {
    "props": {
      "text": "[Continue Shopping](/)",
      "textAlignment": "CENTER",
      "textPosition": "CENTER",
      "blockClass": "continueShoppingButton"
    }
  },
  "rich-text#emptySearch": {
    "title": "Text - Empty search",
    "props": {
      "textAlignment": "CENTER",
      "textPosition": "LEFT",
      "text": "<span></span><p class='emptySearchText'>The page you were looking for doesn't exist. <br> Return to homepage to get back to the action.</p><a class='emptySearchButton' href='/'>Go to the homepage</a>",
      "textColor": "c-on-base",
      "blockClass": "emptySearch",
      "font": "t-mini"
    }
  },
  "image#banner-collection": {
    "title": "banner-collection",
    "props": {
      "src": ""
    }
  },
  "image#banner-collection-mobile": {
    "title": "banner-collection-mobile",
    "props": {
      "src": ""
    }
  },
  "flex-layout.row#banner-collection": {
    "children": ["image#banner-collection"],
    "props": {
      "fullWidth": true,
      "blockClass": "banner-one"
    }
  },
  "flex-layout.row#banner-collection-mobile": {
    "children": ["image#banner-collection-mobile"],
    "props": {
      "fullWidth": true,
      "blockClass": "banner-one"
    }
  },
  "search-result-layout.desktop": {
    "children": [
      "flex-layout.row#banner-collection",
      "flex-layout.row#banner-one",
      "flex-layout.row#search-result-breadcrumb",
      "flex-layout.row#search-result-header-row",
      "tab-layout#search-result"
    ],
    "props": {
      "thresholdForFacetSearch": 10,
      "preventRouteChange": true,
      "showProductsCount": true,
      "showFacetQuantity": true,
      "hiddenFacets": {
        "layoutMode1": "normal",
        "layoutMode2": "small",
        "specificationFilters": {
          "hiddenFilters": [
            {
              "__editorItemTitle": "editor.search-result.hiddenFacets.specificationFilters.hiddenFilter"
            }
          ]
        }
      },
      "summary": {
        "isOneClickBuy": false,
        "showBadge": true,
        "displayBuyButton": "displayButtonAlways",
        "showCollections": false,
        "labelListPrice": null,
        "labelSellingPrice": null,
        "showListPrice": true,
        "showLabels": true,
        "showInstallments": false,
        "showDiscountValue": false,
        "name": {
          "showBrandName": false,
          "showSku": false,
          "showProductReference": false
        }
      },
      "pagination": "show-more"
    }
  },
  "search-result-layout.mobile": {
    "children": [
      "flex-layout.row#search-header-mobile",
      "flex-layout.row#banner-collection-mobile",
      "tab-layout.search-mobile#search-result-mobile"
    ],
    "props": {
      "preventRouteChange": true,
      "thresholdForFacetSearch": 10,
      "showProductsCount": true,
      "showFacetQuantity": true,
      "hiddenFacets": {
        "layoutMode1": "normal",
        "layoutMode2": "small",
        "specificationFilters": {
          "hiddenFilters": [
            {
              "__editorItemTitle": "editor.search-result.hiddenFacets.specificationFilters.hiddenFilter"
            }
          ]
        }
      },
      "summary": {
        "isOneClickBuy": false,
        "showBadge": true,
        "displayBuyButton": "displayButtonAlways",
        "showCollections": false,
        "labelListPrice": null,
        "labelSellingPrice": null,
        "showListPrice": true,
        "showLabels": true,
        "showInstallments": false,
        "showDiscountValue": false,
        "name": {
          "showBrandName": false,
          "showSku": false,
          "showProductReference": false
        }
      },
      "pagination": "show-more"
    }
  },
  "flex-layout.row#search-header-mobile": {
    "children": ["total-products.v2", "search-title.v2"],
    "props": {
      "blockClass": "search-header-mobile"
    }
  },
  "filter-navigator.v3": {
    "blocks": ["sidebar-close-button"],
    "props": {
      "initiallyCollapsed": true,
      "truncateFilters": true,
      "showClearByFilter": true,
      "fullWidthOnMobile": true,
      "navigationTypeOnMobile": "collapsible",
      "appliedFiltersOverview": "show",
      "totalProductsOnMobile": "show",
      "updateOnFilterSelectionOnMobile": true,
      "priceRangeLayout": "inputAndSlider",
      "scrollToTop": "smooth",
      "facetOrdering": [
        {
          "key": "brand",
          "orderBy": "name",
          "order": "ASC"
        },
        {
          "key": "team",
          "orderBy": "name",
          "order": "ASC"
        }
      ]
    }
  },
  "flex-layout.row#filter-row-mobile": {
    "children": ["filter-navigator.v3"],
    "props": {
      "blockClass": "search-result-filter-mobile"
    }
  },
  "flex-layout.row#search-result-breadcrumb": {
    "children": ["breadcrumb.search"],
    "props": {
      "blockClass": "search-result-breadcrumb"
    }
  },
  "flex-layout.row#search-result-header-row": {
    "children": ["total-products.v2", "search-title.v2", "order-by.v2"],
    "props": {
      "blockClass": "search-result-header-row"
    }
  },
  "flex-layout.row#search-result-row": {
    "children": [
      "flex-layout.col.search#side-bar",
      "flex-layout.col.search-content#main-content"
    ],
    "props": {
      "blockClass": "search-result-row",
      "colSizing": "auto"
    }
  },
  "flex-layout.col.search#side-bar": {
    "children": ["flex-layout.row#talkToExpertBanner", "filter-navigator.v3"],
    "props": {
      "blockClass": "sidebar-col",
      "preventVerticalStretch": true
    }
  },
  "flex-layout.row#talkToExpertBanner": {
    "children": ["flex-layout.col#talkToExpertBanner"]
  },
  "flex-layout.col#talkToExpertBanner": {
    "children": [
      "flex-layout.row#talkToExpertBanner__top",
      "flex-layout.row#talkToExpertBanner__links"
    ]
  },
  "flex-layout.row#talkToExpertBanner__top": {
    "children": [
      "image#talkToExpertBanner__img",
      "rich-text#talkToExpertBanner__text"
    ],
    "props": {
      "blockClass": "talkToExpertBanner__top"
    }
  },
  "image#talkToExpertBanner__img": {
    "props": {
      "src": "/arquivos/expert-img.png",
      "maxHeight": "56px",
      "alt": "Talk to an Expert"
    }
  },
  "rich-text#talkToExpertBanner__text": {
    "props": {
      "blockClass": "talkToExpertBanner__text",
      "text": "### Talk to an Expert\nAsk Us Anything, Anytime."
    }
  },
  "flex-layout.row#talkToExpertBanner__links": {
    "children": ["rich-text#talkToExpertBanner__links"]
  },
  "rich-text#talkToExpertBanner__links": {
    "props": {
      "blockClass": "talkToExpertBanner__links",
      "text": "[Email](mailto:support@rdgolf.com) [1-888-216-5252](tel:+18882165252)"
    }
  },
  "flex-layout.col.search-content#main-content": {
    "children": [
      "search-fetch-previous",
      "search-content",
      "search-fetch-more",
      "search-products-count-per-page"
    ],
    "props": {
      "blockClass": "main-content-col"
    }
  },
  "gallery": {
    "props": {
      "mobileLayoutMode": "small"
    },
    "blocks": ["product-summary.shelf#search"]
  },
  "product-summary.shelf#search": {
    "children": [
      "product-summary-add-to-list-button",
      "stack-layout#Product-summary",
      "product-summary-sku-selector#search",
      "product-summary-name#search",
      "product-summary-buy-button"
    ],
    "props": {
      "blockClass": "search"
    }
  },
  "product-summary-name#search": {
    "props": {
      "blockClass": "search",
      "tag": "h2"
    }
  },
  "product-summary-sku-selector#search": {
    "props": {
      "initialSelection": "empty",
      "visibleVariations": ["color"],
      "displayMode": "slider",
      "visibility": "more-than-one",
      "sliderItemsPerPage": {
        "desktop": 3,
        "phone": 3
      }
    }
  },
  "vtex.product-highlights:product-highlights#greyProdMsg": {
    "props": {
      "showHighlight": true,
      "blockClass": "greyProdMessage",
      "conditional": {
        "highlight": "admin/editor.product-details.highlights.chooseDefaultSpecification",
        "typeSpecifications": "grey_prod_msg"
      }
    }
  },
  "product-summary-price#search": {
    "props": {
      "blockClass": "search",
      "showSavings": true,
      "showListPrice": true,
      "labelListPrice": "",
      "labelSellingPrice": false,
      "showSellingPriceRange": true,
      "showListPriceRange": true,
      "showLabels": false,
      "showInstallments": true
    }
  },
  "stack-layout#Product-summary": {
    "children": [
      "product-summary-image"
    ],
    "props": {
      "blockClass": "search-badges"
    }
  },
  "product-summary-image": {
    "props": {
      "mainImageLabel": "hero"
    }
  },
  "tab-layout#search-result": {
    "children": [
      "tab-list.tabContainer#search-result",
      "tab-content.search-result#search-result"
    ],
    "props": {
      "blockClass": "search-tabs"
    }
  },
  "tab-list.tabContainer#search-result": {
    "children": ["flex-layout.row#tabContainer"]
  },
  "tab-list.item#products": {
    "title": "Tab item - Products",
    "props": {
      "tabId": "search-products",
      "label": "Products",
      "defaultActiveTab": true
    }
  },
  "tab-list.item#articles": {
    "title": "Tab item - Articles",
    "props": {
      "tabId": "search-articles",
      "label": "Articles"
    }
  },
  "tab-content.search-result#search-result": {
    "children": ["tab-content.item.products", "tab-content.item.article"]
  },
  "tab-content.item.products": {
    "children": ["flex-layout.row#search-result-row"],
    "props": {
      "tabId": "search-products"
    }
  },
  "tab-content.item.article": {
    "children": ["search-blog-articles-list.wordpress"],
    "props": {
      "tabId": "search-articles"
    }
  },
  "flex-layout.row#tabContainer": {
    "children": ["tab-list.item#products", "tab-list.item#articles"],
    "props": {
      "blockClass": "tabContainer"
    }
  },
  "flex-layout.row#tabContainerMobile": {
    "children": ["tab-list.item#products", "tab-list.item#articles"],
    "props": {
      "colSizing": "auto",
      "blockClass": "tabContainerMobile"
    }
  },
  "tab-layout.search-mobile#search-result-mobile": {
    "children": [
      "tab-list.tabContainer#search-result-mobile",
      "tab-content.search-result#search-result-mobile"
    ],
    "props": {
      "blockClass": "search-tabs-mobile"
    }
  },
  "tab-content.search-result#search-result-mobile": {
    "children": ["tab-content.item.products#mobile", "tab-content.item.article"]
  },
  "tab-list.tabContainer#search-result-mobile": {
    "children": ["flex-layout.row#tabContainerMobile"]
  },
  "tab-content.item.products#mobile": {
    "children": [
      "order-by.v2",
      "filter-navigator.v3",
      "search-content",
      "search-fetch-more",
      "search-products-count-per-page"
    ],
    "props": {
      "tabId": "search-products"
    }
  },
  "order-by.v2": {
    "props": {
      "hiddenOptions": ["OrderByBestDiscountDESC"]
    }
  },
  "flex-layout.row#search-result-mobile": {
    "children": [
      "filter-navigator.v3",
      "search-content",
      "search-fetch-more",
      "search-products-count-per-page"
    ],
    "props": {
      "blockClass": "search-result-row-mobile",
      "colSizing": "auto"
    }
  },
  "search-fetch-more": {
    "props": {
      "htmlElementForButton": "a"
    }
  },
  "search-fetch-previous": {
    "props": {
      "htmlElementForButton": "a"
    }
  },
  "search-content": {
    "blocks": ["gallery", "not-found"]
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/contact.jsonc from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#contact-us": {
    "children": [
      "flex-layout.row#contact-us"
    ]
  },

  "flex-layout.row#contact-us": {
    "props": {
      "blockClass": "contact"
    },
    "children": [
      "flex-layout.col#contact-us"
    ]
  },

  "flex-layout.col#contact-us": {
    "children": [
      "rich-text#contact-us",
      "form#contact-us"
    ]
  },
  "rich-text#contact-us": {
    "props": {
      "text": "## Contact Us"
    }
  },

  "form#contact-us": {
    "props": {
      "entity": "contact",
      "schema": "site-contact"
    },
    "blocks": [
      "form-success#contact-us"
    ],
    "children": [
      "form-input.text#title",
      "form-input.text#name",
      "form-input.text#email",
      "form-input.textarea#message",
      "form-submit#contact"
    ]
  },

  "form-success#contact-us": {
    "children": [
      "rich-text#success-submit"
    ]
  },
  "rich-text#success-submit": {
    "props": {
      "text": "Thanks for reaching out! We will come back shortly.",
      "textAlignment": "CENTER",
      "textPosition": "CENTER"
    }
  },

  "form-input.text#title": {
    "props": {
      "pointer": "#/properties/title"
    }
  },
  "form-input.text#name": {
    "props": {
      "pointer": "#/properties/name"
    }
  },
  "form-input.text#email": {
    "props": {
      "pointer": "#/properties/email"
    }
  },
  "form-input.textarea#message": {
    "props": {
      "pointer": "#/properties/message"
    }
  },

  "form-submit#contact": {
    "props": {
      "label": "Submit"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/orderplaced.jsonc from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "order-placed": {
    "blocks": ["op-header", "op-order"]
  },
  "op-header": {
    "children": [
      "op-section#confirmation",
      "op-section#notices",
      "op-summary-section",
      "op-bank-invoice-section"
    ]
  },
  "op-section#confirmation": {
    "props": {
      "name": "confirmation",
      "marginBottom": 9,
      "borderless": true
    },
    "children": [
      "op-confirmation-icon",
      "op-confirmation-title",
      "op-confirmation-message",
      "flex-layout.row#confirmation-buttons"
    ]
  },
  "flex-layout.row#confirmation-buttons": {
    "props": {
      "blockClass": "confirmationButtons",
      "marginTop": 8,
      "marginBottom": 8,
      "horizontalAlign": "center",
      "preventHorizontalStretch": true,
      "preserveLayoutOnMobile": true
    },
    "children": ["flex-layout.col#confirmation-buttons"]
  },
  "flex-layout.col#confirmation-buttons": {
    "children": ["op-print-button"]
  },
  "op-section#notices": {
    "props": {
      "name": "notices",
      "marginBottom": 9,
      "borderless": true
    },
    "children": ["op-notices"]
  },
  // each order section
  "op-order": {
    "children": [
      "flex-layout.row#order-header",
      "op-order-split-notice",
      "op-order-customer",
      "op-section#payments",
      "op-section#pickup-packages",
      "op-section#delivery-packages",
      "op-order-takeaway-packages",
      "op-order-total"
    ]
  },
  // each order header
  "flex-layout.row#order-header": {
    "props": {
      "fullWidth": true,
      "colSizing": "auto",
      "colGap": 5,
      "marginBottom": 5
    },
    "children": [
      "flex-layout.col#order-header-info",
      "flex-layout.col#order-header-options"
    ]
  },
  "flex-layout.col#order-header-info": {
    "children": ["op-order-number", "op-order-datetime", "op-order-seller"]
  },
  "flex-layout.col#order-header-options": {
    "children": ["responsive-layout.desktop#order-options-desktop"]
  },
  "responsive-layout.desktop#order-options-desktop": {
    "children": ["op-order-options"]
  },
  // payment section
  "op-section#payments": {
    "props": {
      "name": "paymentMethods"
    },
    "children": [
      "op-order-payment",
      "responsive-layout.mobile#order-options-mobile"
    ]
  },
  // bottom of top section of order header
  "responsive-layout.mobile#order-options-mobile": {
    "children": ["op-order-options#mobile"]
  },
  "op-order-options#mobile": {
    "props": {
      "blockClass": "mobile",
      "fullWidth": true
    }
  },
  "op-section#pickup-packages": {
    "props": {
      "name": "pickupPackages"
    },
    "children": ["op-order-pickup-packages"]
  },
  "op-section#delivery-packages": {
    "props": {
      "name": "deliveryPackages"
    },
    "children": ["op-order-delivery-packages"]
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/faq.jsonc from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#faq": {
    "children": [
      "flex-layout.row#faq"
    ]
  },

  "flex-layout.row#faq": {
    "props": {
      "blockClass": "faq"
    },
    "children": [
      "flex-layout.col#faq"
    ]
  },

  "flex-layout.col#faq": {
    "children": [
      "rich-text#faq",
      "disclosure-layout-group#group"
    ]
  },
  "rich-text#faq": {
    "props": {
      "text": "## FAQ"
    }
  },

  "disclosure-layout-group#group": {
    "children": [
      "disclosure-layout#first",
      "disclosure-layout#second",
      "disclosure-layout#third",
      "disclosure-layout#fourth"
    ]
  },

  "disclosure-layout#first": {
    "props": {
      "animated": true
    },
    "children": ["disclosure-trigger#first", "disclosure-content#first"]
  },
  "disclosure-trigger#first": {
    "props": {
      "blockClass": "question",
      "as": "div"
    },
    "children": ["disclosure-state-indicator", "rich-text#question1"]
  },
  "disclosure-content#first": {
    "props": {
      "blockClass": "answer"
    },
    "children": ["rich-text#answer1"]
  },
  "rich-text#question1": {
    "props": {
      "text": "How can I change my shipping address?"
    }
  },
  "rich-text#answer1": {
    "props": {
      "text": "Call us at the number (212) 1234-1234."
    }
  },

  "disclosure-layout#second": {
    "props": {
      "animated": true
    },
    "children": ["disclosure-trigger#second", "disclosure-content#second"]
  },
  "disclosure-trigger#second": {
    "props": {
      "blockClass": "question",
      "as": "div"
    },
    "children": ["disclosure-state-indicator", "rich-text#question2"]
  },
  "disclosure-content#second": {
    "props": {
      "blockClass": "answer"
    },
    "children": ["rich-text#answer2"]
  },
  "rich-text#question2": {
    "props": {
      "text": "How can I track my order?"
    }
  },
  "rich-text#answer2": {
    "props": {
      "text": "After logging into your account, you can find this info at the link Orders."
    }
  },

  "disclosure-layout#third": {
    "props": {
      "animated": true
    },
    "children": ["disclosure-trigger#third", "disclosure-content#third"]
  },
  "disclosure-trigger#third": {
    "props": {
      "blockClass": "question",
      "as": "div"
    },
    "children": ["disclosure-state-indicator", "rich-text#question3"]
  },
  "disclosure-content#third": {
    "props": {
      "blockClass": "answer"
    },
    "children": ["rich-text#answer3"]
  },
  "rich-text#question3": {
    "props": {
      "text": "How can I change my shipping address?"
    }
  },
  "rich-text#answer3": {
    "props": {
      "text": "Call us at the number (212) 1234-1234."
    }
  },

  "disclosure-layout#fourth": {
    "props": {
      "animated": true
    },
    "children": ["disclosure-trigger#fourth", "disclosure-content#fourth"]
  },
  "disclosure-trigger#fourth": {
    "props": {
      "blockClass": "question",
      "as": "div"
    },
    "children": ["disclosure-state-indicator", "rich-text#question4"]
  },
  "disclosure-content#fourth": {
    "props": {
      "blockClass": "answer"
    },
    "children": ["rich-text#answer2"]
  },
  "rich-text#question4": {
    "props": {
      "text": "How can I track my order?"
    }
  },
  "rich-text#answer4": {
    "props": {
      "text": "After logging into your account, you can find this info at the link Orders."
    }
  },

  "disclosure-state-indicator": {
    "props": {
      "Show": "icon-caret#down",
      "Hide": "icon-caret#up"
    }
  },
  "icon-caret#down": {
    "props": {
      "orientation": "down"
    }
  },
  "icon-caret#up": {
    "props": {
      "orientation": "up"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/home/home.jsonc from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.home": {
    "blocks": [
      "list-context.image-list#demo",
      /* You can make references to blocks defined in other files.
       * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
      "__fold__.experimentalLazyAssets",
      "flex-layout.row#deals",
      "rich-text#shelf-title",
      "flex-layout.row#shelf",
      "info-card#home",
      "rich-text#question",
      "rich-text#link",
      "newsletter"
    ]
  },

  "list-context.image-list#demo": {
    "children": ["slider-layout#demo-images"],
    "props": {
      "height": 720,
      "images": [
        {
          "image": "https://storecomponents.vteximg.com.br/arquivos/banner-principal.png",
          "mobileImage": "https://storecomponents.vteximg.com.br/arquivos/banner-principal-mobile.jpg"
        },
        {
          "image": "https://storecomponents.vteximg.com.br/arquivos/banner.jpg",
          "mobileImage": "https://storecomponents.vteximg.com.br/arquivos/banner-principal-mobile.jpg"
        }
      ]
    }
  },
  "slider-layout#demo-images": {
    "props": {
      "itemsPerPage": {
        "desktop": 1,
        "tablet": 1,
        "phone": 1
      },
      "infinite": true,
      "showNavigationArrows": "desktopOnly",
      "blockClass": "carousel"
    }
  },

  "rich-text#shelf-title": {
    "props": {
      "text": "## Summer",
      "blockClass": "shelfTitle"
    }
  },
  "flex-layout.row#shelf": {
    "children": ["list-context.product-list#demo1"]
  },
  "list-context.product-list#demo1": {
    "blocks": ["product-summary.shelf"],
    "children": ["slider-layout#demo-products"],
    "props": {
      "orderBy": "OrderByTopSaleDESC"
    }
  },
  "slider-layout#demo-products": {
    "props": {
      "itemsPerPage": {
        "desktop": 5,
        "tablet": 3,
        "phone": 1
      },
      "infinite": true,
      "fullWidth": false,
      "blockClass": "shelf"
    }
  },

  "info-card#home": {
    "props": {
      "id": "info-card-home",
      "isFullModeStyle": false,
      "textPosition": "left",
      "imageUrl": "https://storecomponents.vteximg.com.br/arquivos/banner-infocard2.png",
      "headline": "Clearance Sale",
      "callToActionText": "DISCOVER",
      "callToActionUrl": "/sale/d",
      "blockClass": "info-card-home",
      "textAlignment": "center"
    }
  },

  "rich-text#question": {
    "props": {
      "text": "**This is an example store built using the VTEX platform.\nWant to know more?**",
      "blockClass": "question"
    }
  },

  "rich-text#link": {
    "props": {
      "text": "\n**Reach us at**\nwww.vtex.com.br",
      "blockClass": "link"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/home/deals.json from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#deals": {
    "children": [
      "flex-layout.col#deals1",
      "flex-layout.col#deals2",
      "flex-layout.col#deals3",
      "flex-layout.col#deals4"
    ],
    "props": {
      "blockClass": "deals"
    }
  },

  "flex-layout.col#deals1": {
    "children": [
      "image#deal1",
      "rich-text#deal1"
    ]
  },
  "image#deal1": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/box.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal1": {
    "props": {
      "text": "Free shipping",
      "blockClass": "deals"
    }
  },
  "flex-layout.col#deals2": {
    "children": [
      "image#deal2",
      "rich-text#deal2"
    ]
  },
  "image#deal2": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/delivery-fast.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal2": {
    "props": {
      "text": "One day delivery",
      "blockClass": "deals"
    }
  },
  "flex-layout.col#deals3": {
    "children": [
      "image#deal3",
      "rich-text#deal3"
    ]
  },
  "image#deal3": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/store.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal3": {
    "props": {
      "text": "Pick up in store",
      "blockClass": "deals"
    }
  },
  "flex-layout.col#deals4": {
    "children": [
      "image#deal4",
      "rich-text#deal4"
    ]
  },
  "image#deal4": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/coupon.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal4": {
    "props": {
      "text": "Exclusive deals",
      "blockClass": "deals"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/footer/footer.json from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "footer": {
    "blocks": ["footer-layout.desktop", "footer-layout.mobile"]
  },
  "footer-layout.desktop": {
    "children": [
      "flex-layout.row#footer-1-desktop",
      "flex-layout.row#footer-2-desktop",
      "flex-layout.row#footer-3-desktop"
    ]
  },
  "flex-layout.row#footer-1-desktop": {
    "children": [
      "vtex.menu@2.x:menu#Products",
      "vtex.menu@2.x:menu#footer-clothing",
      "vtex.menu@2.x:menu#footer-decoration",
      "vtex.menu@2.x:menu#footer-bags",
      "footer-spacer",
      "social-networks"
    ],
    "props": {
      "blockClass": "menu-row",
      "paddingTop": 6,
      "paddingBottom": 3
    }
  },

  "social-networks": {
    "props": {
      "socialNetworks": [
        {
          "name": "Facebook",
          "url": "https://www.facebook.com/vtexonline/"
        },
        {
          "name": "Instagram",
          "url": "https://www.instagram.com/vtextruecloud/"
        },
        {
          "name": "Twitter",
          "url": "https://twitter.com/vtexonline"
        },
        {
          "name": "Youtube",
          "url": "https://www.youtube.com/user/VTEXTV"
        }
      ]
    }
  },

  "flex-layout.row#footer-2-desktop": {
    "children": ["accepted-payment-methods"],
    "props": {
      "blockClass": "payment-methods"
    }
  },
  "accepted-payment-methods": {
    "props": {
      "paymentMethods": ["MasterCard", "Visa", "Diners Club"]
    }
  },

  "flex-layout.row#footer-3-desktop": {
    "children": ["rich-text#footer"],
    "props": {
      "blockClass": "credits"
    }
  },
  "rich-text#footer": {
    "props": {
      "text": "All stock and product photos are from photos.icons8.com",
      "blockClass": "footer"
    }
  },

  "footer-layout.mobile": {
    "children": [
      "flex-layout.row#1-footer-mobile",
      "flex-layout.row#2-footer-mobile"
    ]
  },
  "flex-layout.row#2-footer-mobile": {
    "children": ["flex-layout.col#footer-1-mobile"],
    "props": {
      "blockClass": "payment-methods",
      "paddingTop": 4,
      "paddingBottom": 4
    }
  },
  "flex-layout.col#footer-1-mobile": {
    "children": [
      "accepted-payment-methods",
      "social-networks",
      "rich-text#footer-mobile"
    ],
    "props": {
      "blockClass": "payment-methods",
      "paddingTop": 4,
      "paddingBottom": 4,
      "rowGap": 4
    }
  },
  "flex-layout.row#1-footer-mobile": {
    "props": {
      "paddingTop": 4,
      "paddingBottom": 4
    },
    "children": ["vtex.menu@2.x:menu#footer-mobile"]
  },
  "rich-text#footer-mobile": {
    "props": {
      "text": "All stock and product photos are from photos.icons8.com",
      "blockClass": "footer"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/footer/menu.json from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#Products": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#news",
      "menu-item#blackfriday",
      "menu-item#sale",
      "menu-item#personalization"
    ]
  },
  "menu-item#news": {
    "props": {
      "id": "menu-item-news",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "News",
        "text": "News"
      }
    }
  },
  "menu-item#blackfriday": {
    "props": {
      "id": "menu-item-black-friday",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "BlackFriday",
        "text": "Black Friday"
      }
    }
  },
  "menu-item#sale": {
    "props": {
      "id": "menu-item-sale",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Sale",
        "text": "Sale"
      }
    }
  },
  "menu-item#personalization": {
    "props": {
      "id": "menu-item-personalization",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Personalization",
        "text": "Personalization"
      }
    }
  },

  "vtex.menu@2.x:menu#footer-decoration": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#smartphones",
      "menu-item#videogames",
      "menu-item#tvs"
    ]
  },

  "menu-item#smartphones": {
    "props": {
      "id": "menu-item-smartphones",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/decoration/smartphones",
        "noFollow": true,
        "tagTitle": "Smartphones",
        "text": "Smartphones"
      }
    }
  },

  "menu-item#videogames": {
    "props": {
      "id": "menu-item-videogames",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/decoration/videogames",
        "noFollow": true,
        "tagTitle": "Videogames",
        "text": "Videogames"
      }
    }
  },

  "menu-item#tvs": {
    "props": {
      "id": "menu-item-tvs",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/decoration/tvs",
        "noFollow": true,
        "tagTitle": "TVs",
        "text": "TVs"
      }
    }
  },

  "vtex.menu@2.x:menu#footer-bags": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#bags",
      "menu-item#backpacks",
      "menu-item#necessaire"
    ]
  },

  "menu-item#bags": {
    "props": {
      "id": "menu-item-bags",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/bags/d",
        "noFollow": true,
        "tagTitle": "Bags",
        "text": "Bags"
      }
    }
  },

  "menu-item#backpacks": {
    "props": {
      "id": "menu-item-backpacks",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/bags/backpacks",
        "noFollow": true,
        "tagTitle": "Backpacks",
        "text": "Backpacks"
      }
    }
  },

  "menu-item#necessaire": {
    "props": {
      "id": "menu-item-necessaire",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/bags/necessaire",
        "noFollow": true,
        "tagTitle": "Necessaire",
        "text": "Necessaire"
      }
    }
  },

  "vtex.menu@2.x:menu#footer-clothing": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#clothing",
      "menu-item#shorts",
      "menu-item#tank-tops",
      "menu-item#shirts",
      "menu-item#sweatshirt",
      "menu-item#cropped"
    ]
  },

  "vtex.menu@2.x:menu#footer-mobile": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#clothing-mobile",
      "menu-item#decoration-mobile",
      "menu-item#sale-mobile"
    ]
  },

  "menu-item#clothing-mobile": {
    "props": {
      "id": "menu-item-category-clothing",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/d",
        "noFollow": true,
        "tagTitle": "Clothing",
        "text": "Clothing"
      }
    },
    "blocks": ["vtex.menu@2.x:submenu.accordion#clothing"]
  },
  "vtex.menu@2.x:submenu.accordion#clothing": {
    "children": ["vtex.menu@2.x:menu#clothing-accordion"]
  },

  "vtex.menu@2.x:menu#clothing-accordion": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#shorts",
      "menu-item#tank-tops",
      "menu-item#shirts",
      "menu-item#sweatshirt",
      "menu-item#cropped"
    ]
  },

  "menu-item#decoration-mobile": {
    "props": {
      "itemProps": {
        "tagTitle": "Decoration",
        "text": "Decoration"
      }
    },
    "blocks": ["vtex.menu@2.x:submenu.accordion#decoration"]
  },
  "vtex.menu@2.x:submenu.accordion#decoration": {
    "children": ["vtex.menu@2.x:menu#footer-decoration-mobile"]
  },

  "vtex.menu@2.x:menu#footer-decoration-mobile": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#smartphones",
      "menu-item#videogames",
      "menu-item#tvs"
    ]
  },

  "menu-item#sale-mobile": {
    "props": {
      "itemProps": {
        "tagTitle": "Sale",
        "text": "Sale"
      }
    },
    "blocks": ["vtex.menu@2.x:submenu.accordion#sale"]
  },
  "vtex.menu@2.x:submenu.accordion#sale": {
    "children": ["vtex.menu@2.x:menu#footer-sale-mobile"]
  },

  "vtex.menu@2.x:menu#footer-sale-mobile": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#smartphones",
      "menu-item#videogames",
      "menu-item#tvs"
    ]
  },

  "menu-item#clothing": {
    "props": {
      "id": "menu-item-category-clothing",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/d",
        "noFollow": true,
        "tagTitle": "Clothing",
        "text": "Clothing"
      }
    }
  },

  "menu-item#shorts": {
    "props": {
      "id": "menu-item-shorts",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/shorts",
        "noFollow": false,
        "tagTitle": "Shorts",
        "text": "Shorts"
      }
    }
  },

  "menu-item#tank-tops": {
    "props": {
      "id": "menu-item-tank-tops",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/tank-tops",
        "noFollow": false,
        "tagTitle": "Tank tops",
        "text": "Tank tops"
      }
    }
  },

  "menu-item#shirts": {
    "props": {
      "id": "menu-item-shirts",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/shirts",
        "noFollow": false,
        "tagTitle": "Shirts",
        "text": "Shirts"
      }
    }
  },

  "menu-item#sweatshirt": {
    "props": {
      "id": "menu-item-sweat-shirts",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/sweatshirt",
        "noFollow": false,
        "tagTitle": "Sweatshirt",
        "text": "Sweatshirt"
      }
    }
  },

  "menu-item#cropped": {
    "props": {
      "id": "menu-item-cropped",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/cropped",
        "noFollow": false,
        "tagTitle": "Cropped",
        "text": "Cropped"
      }
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/product-summary/product-summary.jsonc from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-summary.shelf": {
    "children": [
      "stack-layout#prodsum",
      "product-summary-name",
      "flex-layout.col#productRating",
      "product-summary-space",
      "product-list-price#summary",
      "flex-layout.row#selling-price-savings",
      "product-installments#summary",
      "add-to-cart-button"
    ]
  },
  "flex-layout.col#productRating": {
    "props": {
      "blockClass": "productRating"
    },
    "children": ["product-rating-inline"]
  },

  "stack-layout#prodsum": {
    "children": [
      "product-summary-image#shelf",
      "vtex.product-highlights:product-highlights#collection",
      "modal-trigger#quickview" // Check quickview.jsonc
    ]
  },

  "product-summary-image#shelf": {
    "props": {
      "showBadge": false,
      "aspectRatio": "1:1",
      "maxHeight": 300
    }
  },

  "vtex.product-highlights:product-highlights#collection": {
    "props": {
      "type": "collection"
    },
    "children": ["product-highlight-wrapper"]
  },
  "product-highlight-wrapper": {
    "props": {
      "blockClass": "collection"
    },
    "children": ["product-highlight-text"]
  },
  "product-highlight-text": {
    "props": {
      "message": "{highlightName}"
    }
  },

  "product-list-price#summary": {
    "props": {
      "blockClass": "summary"
    }
  },
  "flex-layout.row#selling-price-savings": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "preventHorizontalStretch": true,
      "marginBottom": 4
    },
    "children": [
      "product-selling-price#summary",
      "product-price-savings#summary"
    ]
  },
  "product-installments#summary": {
    "props": {
      "blockClass": "summary"
    }
  },
  "product-selling-price#summary": {
    "props": {
      "blockClass": "summary"
    }
  },
  "product-price-savings#summary": {
    "props": {
      "markers": [
        "discount"
      ],
      "blockClass": "summary"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/product-summary/quickview.json from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "modal-trigger#quickview": {
    "children": [
      "icon-expand",
      "modal-layout#quickview"
    ],
    "props": {
      "blockClass": "quickview"
    }
  },

  "modal-layout#quickview": {
    "children": [
      "modal-header#quickview",
      "flex-layout.row#quickview-main-row"
    ],
    "props": {
      "blockClass": "quickview"
    }
  },
  "modal-header#quickview": {
    "props": {
      "blockClass": "quickview"
    }
  },

  "modal-content#quickview": {
    "children": [
      "vtex.store-components:product-name",
      "flex-layout.col#quickviewPrice",
      "product-summary-sku-selector#quickview"
    ],
    "props": {
      "blockClass": "quickviewContent"
    }
  },
  "flex-layout.col#quickviewPrice": {
    "children": [
      "flex-layout.row#list-price-savings",
      "flex-layout.row#selling-price",
      "product-installments"
    ]
  },
  "modal-actions#quickview": {
    "props": {
      "blockClass": "quickview"
    },
    "children": [
      "flex-layout.row#quickview-actions-1",
      "flex-layout.row#quickview-actions-2"
    ]
  },
  "flex-layout.row#quickview-actions-1": {
    "children": [
      "flex-layout.col#quickview-product-quantity",
      "flex-layout.col#quickview-add-to-card-button"
    ],
    "props": {
      "colSizing": "auto",
      "colGap": 6,
      "blockClass": "addToCartRow"
    }
  },

  "flex-layout.col#quickview-product-quantity": {
    "children": [
      "product-summary-quantity#quickview"
    ]
  },
  "product-summary-quantity#quickview": {
    "props": {
      "showLabel": false,
      "size": "regular"
    }
  },
  "flex-layout.col#quickview-add-to-card-button": {
    "children": [
      "add-to-cart-button"
    ],
    "props": {
      "width": "grow"
    }
  },

  "flex-layout.row#quickview-actions-2": {
    "children": [
      "link.product#button-pdp"
    ]
  },
  "link.product#button-pdp": {
    "props": {
      "buttonProps": {
        "variant": "secondary"
      },
      "displayMode": "button",
      "label": "View details",
      "href": "/{slug}/p"
    }
  },
  "flex-layout.row#quickview-main-row": {
    "children": [
      "flex-layout.col#quickview-images",
      "flex-layout.col#quickview-product-details"
    ],
    "props": {
      "blockClass": "quickviewMainRow"
    }
  },
  "flex-layout.col#quickview-images": {
    "children": [
      "product-images#quickview"
    ]
  },
  "flex-layout.col#quickview-product-details": {
    "children": [
      "modal-content#quickview",
      "modal-actions#quickview"
    ],
    "props": {
      "preventVerticalStretch": true,
      "blockClass": "quickviewDetails"
    }
  },
  "product-summary-sku-selector#quickview": {
    "props": {
      "thumbnailImage": "skuvariation",
      "imageHeight": 28,
      "blockClass": "quickview",
      "visibility": "more-than-one"
    }
  },
  "vtex.store-components:product-name": {
    "props": {
      "blockClass": "quickview"
    }
  },
  "product-images#quickview" : {
    "props": {
      "blockClass": "quickview",
      "showNavigationArrows": true
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/product-summary/product-summary-list.jsonc from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-summary.shelf#listLayout": {
    "props": {
      "blockClass": "listLayout"
    },
    "children": [
      "responsive-layout.desktop#productSummaryList",
      "responsive-layout.mobile#productSummaryList"
    ]
  },
  "responsive-layout.desktop#productSummaryList": {
    "children": [
      "flex-layout.row#summaryListDesktop"
    ]
  },
  "responsive-layout.mobile#productSummaryList": {
    "children": [
      "flex-layout.row#summaryListMobile"
    ]
  },
  "product-price-savings#summaryPercentage": {
    "props": {
      "message": "{savingsPercentage}",
      "blockClass": "summaryPercentage"
    }
  },
  "flex-layout.row#savingsSummaryListDesktop": {
    "props": {
      "colSizing": "auto",
      "colGap": 3,
      "blockClass": "savingsSummaryListDesktop"
    },
    "children": [
      "product-price-savings#summaryPercentage",
      "product-price-savings#summary"
    ]
  },
  "flex-layout.row#summaryListDesktop": {
    "props":{
      "fullWidth": true,
      "colSizing": "auto",
      "blockClass": "summaryListDesktop"
    },
    "children": [
      "flex-layout.row#summaryLeftListDesktop",
      "flex-layout.col#summaryRightListDesktop"
    ]
  },
  "flex-layout.row#summaryLeftListDesktop": {
    "props": {
      "blockClass": "summaryLeftListDesktop",
      "colSizing": "auto",
      "colGap": 7
    },
    "children": [
      "stack-layout#summaryListDesktop",
      "flex-layout.col#summaryDetailsListDesktop"
    ]
  },
  "flex-layout.col#summaryDetailsListDesktop": {
    "props": {
      "preventVerticalStretch": true
    },
    "children": [
      "vtex.store-components:product-brand#summaryListDesktop",
      "product-summary-name#summaryListDesktop",
      "flex-layout.col#productRating",
      "flex-layout.row#productSpecifications"
    ]
  },
  "flex-layout.row#productSpecifications": {
    "children": [
      "product-specification-group#summary"
    ]
  },
  "product-summary-name#summaryListDesktop": {
    "props": {
      "blockClass": "summaryListDesktop"
    }
  },
  "vtex.store-components:product-brand#summaryListDesktop": {
    "props": {
      "displayMode": "text",
      "blockClass": "summaryListDesktop"
    }
  },
  "flex-layout.col#summaryRightListDesktop": {
    "props": {
      "blockClass": "summaryRightListDesktop",
      "preventVerticalStretch": true
    },
    "children": [
      "flex-layout.row#savingsSummaryListDesktop",
      "flex-layout.col#priceSummaryListDesktop",
      "flex-layout.row#buyButtonsSummaryListDesktop"
    ]
  },
  "flex-layout.row#buyButtonsSummaryListDesktop": {
    "props": {
      "colSizing": "auto",
      "colGap": 5
    },
    "children": [
      "add-to-cart-button",
      "flex-layout.row#buyNowButton"
    ]
  },
  "flex-layout.row#buyNowButton": {
    "props": {
      "blockClass": "buyNowButton"
    },
    "children": [
      "add-to-cart-button#buyNow"
    ]
  },

  "add-to-cart-button#buyNow": {
    "props": {
      "text": "BUY NOW",
      "isOneClickBuy": true,
      "onClickEventPropagation": "enabled",
      "blockClass": "buyNow"
    }
  },
  "flex-layout.col#priceSummaryListDesktop": {
    "children": [
      "product-selling-price#summary",
      "product-list-price#summary"
    ]
  },
  "stack-layout#summaryListDesktop": {
    "children": [
      "product-summary-image#summaryListDesktop",
      "vtex.product-highlights:product-highlights#collection",
      "modal-trigger#quickview" // Check quickview.jsonc
    ]
  },
  "product-summary-image#summaryListDesktop": {
    "props": {
      "showBadge": false,
      "aspectRatio": "1:1",
      "maxHeight": 180,
      "blockClass": "summaryListDesktop"
    }
  },
  "flex-layout.row#summaryListMobile": {
    "props":{
      "preserveLayoutOnMobile": true,
      "colSizing": "auto",
      "blockClass": "summaryListMobile",
      "colGap": 5
    },
    "children": [
      "stack-layout#summaryListMobile",
      "flex-layout.col#summaryDetailsListMobile"
    ]
  },
  "stack-layout#summaryListMobile": {
    "children": [
      "product-summary-image#summaryListMobile",
      "vtex.product-highlights:product-highlights#collection",
      "modal-trigger#quickview" // Check quickview.jsonc
    ]
  },
  "product-summary-image#summaryListMobile": {
    "props": {
      "showBadge": false,
      "aspectRatio": "1:1",
      "maxHeight": 220,
      "blockClass": "summaryListMobile"
    }
  },
  "flex-layout.col#summaryDetailsListMobile": {
    "props": {
      "preventVerticalStretch": true,
      "width": "grow",
      "blockClass": "summaryDetailsListMobile"
    },
    "children": [
      "flex-layout.col#summaryUpDetailsListMobile",
      "flex-layout.col#summaryDownDetailsListMobile"
    ]
  },
  "flex-layout.col#summaryUpDetailsListMobile": {
    "props": {
      "preventVerticalStretch": true,
      "blockClass": "summaryUpDetailsListMobile"
    },
    "children": [
      "vtex.store-components:product-brand#summaryListMobile",
      "product-summary-name#summaryListMobile",
      "product-rating-inline"
    ]
  },
  "flex-layout.col#summaryDownDetailsListMobile": {
    "props": {
      "preventVerticalStretch": true
    },
    "children": [
      "product-selling-price#summary",
      "product-installments#summary"
    ]
  },
  "vtex.store-components:product-brand#summaryListMobile": {
    "props": {
      "displayMode": "text",
      "blockClass": "summaryListMobile"
    }
  },
  "product-summary-name#summaryListMobile": {
    "props": {
      "tag": "div",
      "blockClass": "summaryListMobile"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/product-summary/product-specification-list.jsonc from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-specification-group#summary": {
    "children": [
      "product-specification#summary"
    ]
  },
  "product-specification#summary": {
    "children": [
      "flex-layout.row#summarySpecificationValues"
    ]
  },
  "flex-layout.row#summarySpecificationValues": {
    "props": {
      "preventHorizontalStretch": true,
      "colGap": 3
    },
    "children": [
      "rich-text#summarySpecificationBullet",
      "product-specification-values"
    ]
  },
  "rich-text#summarySpecificationBullet": {
    "props": {
      "text": "•",
      "textColor": "c-action-primary",
      "blockClass": "summarySpecificationBullet"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/product-page/product-page.jsonc from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
	"store.not-found#product": {
    "blocks": [
      "info-card#not-found-banner",
      "flex-layout.row#continue-shopping",
      "flex-layout.row#shopByCategory"
    ]
  },
  "info-card#not-found-banner": {
    "props": {
      "id": "info-card-not-found-banner",
      "isFullModeStyle": true,
      "textPosition": "center",
      "imageUrl": "https://worldwidegolf.vteximg.com.br/arquivos/404-correct.jpg",
      "headline": "Oops! You've landed in the bunker.",
      "subhead": "The page you were looking for does not exist.",
      "callToActionMode": "none",
      "blockClass": "notFoundInfoCard"
    }
  },
  "flex-layout.row#shopByCategory": {
		"title": "Row - Shop by category",
		"children": [
			"flex-layout.col#shopByCategory__card1",
			"flex-layout.col#shopByCategory__card2",
			"flex-layout.col#shopByCategory__card3",
			"flex-layout.col#shopByCategory__card4",
			"flex-layout.col#shopByCategory__card5",
			"flex-layout.col#shopByCategory__card6",
			"flex-layout.col#shopByCategory__card7",
			"flex-layout.col#shopByCategory__card8"
		],
		"props": {
			"blockClass": "linksCategoryContainer",
			"marginTop": 2
		}
	},

	//? Card1
	"flex-layout.col#shopByCategory__card1": {
		"children": ["image#card1", "rich-text#shopByCategory__text1"],
		"props": {
			"blockClass": ["shopByCategory__card"],
			"preventVerticalStretch": true
		}
	},
	"image#card1": {
		"props": {
			"blockClass": "shopByCategory__image",
			"link": { "url": "/golf-clubs" },
			"src": "/arquivos/1-chubs.jpg",
			"maxWidth": "88px"
		}
	},
	"rich-text#shopByCategory__text1": {
		"props": {
			"blockClass": "shopByCategory__text",
			"text": "[Clubs](/golf-clubs)",
			"textPosition": "CENTER"
		}
	},
	//? Card2
	"flex-layout.col#shopByCategory__card2": {
		"children": ["image#card2", "rich-text#shopByCategory__text2"],
		"props": {
			"blockClass": ["shopByCategory__card"],
			"preventVerticalStretch": true
		}
	},
	"image#card2": {
		"props": {
			"blockClass": "shopByCategory__image",
			"link": { "url": "/shoes" },
			"src": "/arquivos/2-shoes.jpg",
			"maxWidth": "88px"
		}
	},

	"rich-text#shopByCategory__text2": {
		"props": {
			"blockClass": "shopByCategory__text",
			"text": "[Shoes](/shoes)",
			"textPosition": "CENTER"
		}
	},
	//? Card3
	"flex-layout.col#shopByCategory__card3": {
		"children": ["image#card3", "rich-text#shopByCategory__text3"],
		"props": {
			"blockClass": ["shopByCategory__card"],
			"preventVerticalStretch": true
		}
	},
	"image#card3": {
		"props": {
			"blockClass": "shopByCategory__image",
			"link": { "url": "/apparel" },
			"src": "/arquivos/3-apparel.jpg",
			"maxWidth": "88px"
		}
	},

	"rich-text#shopByCategory__text3": {
		"props": {
			"blockClass": "shopByCategory__text",
			"text": "[Apparel](/apparel)",
			"textPosition": "CENTER"
		}
	},
	//? Card4
	"flex-layout.col#shopByCategory__card4": {
		"children": ["image#card4", "rich-text#shopByCategory__text4"],
		"props": {
			"blockClass": ["shopByCategory__card"],
			"preventVerticalStretch": true
		}
	},
	"image#card4": {
		"props": {
			"blockClass": "shopByCategory__image",
			"link": { "url": "/gps---tech" },
			"src": "/arquivos/4-gpsTech.jpg",
			"maxWidth": "88px"
		}
	},

	"rich-text#shopByCategory__text4": {
		"props": {
			"blockClass": "shopByCategory__text",
			"text": "[GPS & Tech](/gps---tech)",
			"textPosition": "CENTER"
		}
	},
	//? Card5
	"flex-layout.col#shopByCategory__card5": {
		"children": ["image#card5", "rich-text#shopByCategory__text5"],
		"props": {
			"blockClass": ["shopByCategory__card"],
			"preventVerticalStretch": true
		}
	},
	"image#card5": {
		"props": {
			"blockClass": "shopByCategory__image",
			"link": { "url": "/golf-balls" },
			"src": "/arquivos/5-balls.jpg",
			"maxWidth": "88px"
		}
	},

	"rich-text#shopByCategory__text5": {
		"props": {
			"blockClass": "shopByCategory__text",
			"text": "[Balls](/golf-balls)",
			"textPosition": "CENTER"
		}
	},
	//? Card6
	"flex-layout.col#shopByCategory__card6": {
		"children": ["image#card6", "rich-text#shopByCategory__text6"],
		"props": {
			"blockClass": ["shopByCategory__card"],
			"preventVerticalStretch": true
		}
	},
	"image#card6": {
		"props": {
			"blockClass": "shopByCategory__image",
			"link": { "url": "/bags-carts-travel" },
			"src": "/arquivos/6-bagsCarts.jpg",
			"maxWidth": "88px"
		}
	},

	"rich-text#shopByCategory__text6": {
		"props": {
			"blockClass": "shopByCategory__text",
			"text": "[Bags & Carts](/bags-carts-travel)",
			"textPosition": "CENTER"
		}
	},
	//? Card7
	"flex-layout.col#shopByCategory__card7": {
		"children": ["image#card7", "rich-text#shopByCategory__text7"],
		"props": {
			"blockClass": ["shopByCategory__card"],
			"preventVerticalStretch": true
		}
	},
	"image#card7": {
		"props": {
			"blockClass": "shopByCategory__image",
			"link": { "url": "/accessories" },
			"src": "/arquivos/7-accessories.jpg",
			"maxWidth": "88px"
		}
	},

	"rich-text#shopByCategory__text7": {
		"props": {
			"blockClass": "shopByCategory__text",
			"text": "[Accesories](/accessories)",
			"textPosition": "CENTER"
		}
	},
	//? Card8
	"flex-layout.col#shopByCategory__card8": {
		"children": ["image#card8", "rich-text#shopByCategory__text8"],
		"props": {
			"blockClass": [
				"shopByCategory__card",
				"shopByCategory__card--highlighted"
			],
			"preventVerticalStretch": true
		}
	},
	"image#card8": {
		"props": {
			"blockClass": "shopByCategory__image",
			"link": { "url": "/yes/?map=promotion" },
			"src": "/arquivos/8-sale.png",
			"maxWidth": "88px"
		}
	},

	"rich-text#shopByCategory__text8": {
		"props": {
			"blockClass": [
				"shopByCategory__text",
				"shopByCategory__text--highlighted"
			],
			"text": "[Sale](/yes/?map=promotion)",
			"textPosition": "CENTER"
		}
	}
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/pdp/product-assembly.jsonc from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "sticky-layout#buy-button": {
    "props": {
      "position": "bottom"
    },
    "children": ["flex-layout.row#buy-button"]
  },
  "product-assembly-options": {
    "children": [
      "flex-layout.row#product-assembly-options",
      "assembly-option-input-values"
    ]
  },
  "assembly-option-input-values": {
    "props": {
      "optionsDisplay": "box"
    }
  },
  "flex-layout.row#product-assembly-options": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "colSizing": "auto"
    },
    "children": [
      "flex-layout.col#product-assembly-image",
      "flex-layout.col#product-assembly-middle",
      "flex-layout.col#product-assembly-quantity"
    ]
  },
  "flex-layout.col#product-assembly-quantity": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": [
      "assembly-option-item-quantity-selector"
    ]
  },
  "flex-layout.col#product-assembly-image": {
    "props": {
      "marginRight": 4
    },
    "children": [
      "assembly-option-item-image"
    ]
  },
  "flex-layout.col#product-assembly-middle": {
    "props": {
      "width": "grow",
      "verticalAlignment": "middle"
    },
    "children": [
      "assembly-option-item-name",
      "assembly-option-item-price",
      "assembly-option-item-children-description",
      "assembly-option-item-customize#first-level"
    ]
  },
  "assembly-option-item-customize#first-level": {
    "props": {
      "buttonProps": {
        "collapse": "left"
      }
    },
    "children": [
      "flex-layout.row#item-customize",
      "assembly-option-input-values"
    ]
  },
  "flex-layout.row#item-customize": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "colSizing": "auto"
    },
    "children": [
      "flex-layout.col#product-assembly-image",
      "flex-layout.col#item-customize-middle",
      "flex-layout.col#item-customize-quantity"
    ]
  },
  "flex-layout.col#item-customize-middle": {
    "props": {
      "width": "grow",
      "verticalAlignment": "middle"
    },
    "children": [
      "assembly-option-item-name",
      "assembly-option-item-price",
      "assembly-option-item-children-description",
      "assembly-option-item-customize#sec-level"
    ]
  },
  "flex-layout.col#item-customize-quantity": {
    "props": {
      "horizontalAlign": "right",
      "verticalAlign": "middle"
    },
    "children": [
      "assembly-option-item-quantity-selector"
    ]
  },
  "assembly-option-item-customize#sec-level": {
    "props": {
      "buttonProps": {
        "collapse": "left"
      }
    },
    "children": [
      "assembly-option-item-image",
      "assembly-option-item-name",
      "assembly-option-item-price",
      "assembly-option-item-quantity-selector"
    ]
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/pdp/product-gifts.jsonc from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-gifts": {
    "props": {
      "maxVisibleItems": {
        "desktop": 1,
        "mobile": 1
      }
    },
    "children": ["flex-layout.row#product-gifts-text", "product-gift-list"]
  },

  "flex-layout.row#product-gifts-text": {
    "props": {
      "verticalAlign": "middle",
      "colSizing": "auto",
      "preserveLayoutOnMobile": true
    },
    "children": [
      "rich-text#product-gifts",
      "flex-layout.col#product-gifts-text"
    ]
  },
  "flex-layout.col#product-gifts-text": {
    "children": ["modal-trigger#product-gifts"],
    "props": {
      "verticalAlign": "middle"
    }
  },
  "rich-text#product-gifts": {
    "props": {
      "text": "**+ GIFT**"
    }
  },
  "gift-text": {
    "props": {
      "blockClass": "default",
      "text": "{exceedingItems, plural, =0{} one {+ # gift} other {+ # gifts}}"
    }
  },
  "product-gift-list": {
    "children": ["flex-layout.row#gift"]
  },
  "flex-layout.row#gift": {
    "props": {
      "fullWidth": true
    },
    "children": ["flex-layout.col#gift-name-description", "gift-image"]
  },
  "flex-layout.col#gift-name-description": {
    "props": {
      "verticalAlign": "middle",
      "rowGap": 3
    },
    "children": ["gift-name", "gift-description"]
  },

  "modal-trigger#product-gifts": {
    "children": ["modal-layout#product-gifts", "gift-text"],
    "props": {
      "blockClass": "product-gifts"
    }
  },
  "modal-layout#product-gifts": {
    "props": {
      "blockClass": "product-gifts",
      "fullScreen": {
        "phone": true,
        "desktop": false,
        "tablet": false
      }
    },
    "children": ["product-gifts#modal"]
  },

  "product-gifts#modal": {
    "children": ["product-gift-list"]
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/pdp/product.jsonc from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.product": {
    "children": [
      "flex-layout.row#product-breadcrumb",
      "condition-layout.product#availability",
      "flex-layout.row#description",
      "flex-layout.row#specifications-title",
      "product-specification-group#table",
      "shelf.relatedProducts",
      "product-reviews",
      "product-questions-and-answers"
    ]
  },
  "flex-layout.row#specifications-title": {
    "children": ["rich-text#specifications"]
  },
  "rich-text#specifications": {
    "props": {
      "text": "##### Product Specifications"
    }
  },
  "flex-layout.row#product-breadcrumb": {
    "props": {
      "marginTop": 4
    },
    "children": ["breadcrumb"]
  },
  "flex-layout.row#description": {
    "props": {
      "marginBottom": 7
    },
    "children": ["product-description"]
  },
  "condition-layout.product#availability": {
    "props": {
      "conditions": [
        {
          "subject": "isProductAvailable"
        }
      ],
      "Then": "flex-layout.row#product-main",
      "Else": "flex-layout.row#product-availability"
    }
  },
  "flex-layout.row#product-main": {
    "props": {
      "colGap": 7,
      "rowGap": 7,
      "marginTop": 4,
      "marginBottom": 7,
      "paddingTop": 7,
      "paddingBottom": 7
    },
    "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
  },

  "stack-layout": {
    "props": {
      "blockClass": "product"
    },
    "children": [
      "flex-layout.row#product-image",
      "product-bookmark",
      "product-specification-badges"
    ]
  },

  "product-specification-badges": {
    "props": {
      "specificationGroupName": "Group",
      "specificationName": "On Sale",
      "visibleWhen": "True",
      "displayValue": "SPECIFICATION_NAME"
    }
  },

  "flex-layout.col#stack": {
    "children": ["stack-layout"],
    "props": {
      "width": "60%",
      "rowGap": 0
    }
  },
  "flex-layout.row#product-image": {
    "children": ["product-images"]
  },
  "product-images": {
    "props": {
      "aspectRatio": {
        "desktop": "auto",
        "phone": "16:9"
      },
      "displayThumbnailsArrows": true
    }
  },
  "flex-layout.col#right-col": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0
    },
    "children": [
      "flex-layout.row#product-name",
      "product-rating-summary",
      "flex-layout.row#list-price-savings",
      "flex-layout.row#selling-price",
      "product-installments",
      "product-separator",
      "product-identifier.product",
      "sku-selector",
      "product-quantity",
      "product-assembly-options",
      "product-gifts",
      "flex-layout.row#buy-button",
      "shipping-simulator",
      "share#default"
    ]
  },

  "flex-layout.row#product-name": {
    "props": {
      "marginBottom": 3
    },
    "children": ["vtex.store-components:product-name"]
  },

  "sku-selector": {
    "props": {
      "variationsSpacing": 3,
      "showValueNameForImageVariation": true
    }
  },

  "flex-layout.row#buy-button": {
    "props": {
      "marginTop": 4,
      "marginBottom": 7
    },
    "children": ["add-to-cart-button"]
  },

  "flex-layout.row#product-availability": {
    "props": {
      "colGap": 7,
      "marginTop": 4,
      "marginBottom": 7,
      "paddingTop": 7
    },
    "children": [
      "flex-layout.col#stack",
      "flex-layout.col#right-col-availability"
    ]
  },
  "flex-layout.col#right-col-availability": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0,
      "blockClass": "info-availability"
    },
    "children": [
      "flex-layout.row#product-name",
      "product-identifier.product",
      "sku-selector",
      "flex-layout.row#availability"
    ]
  },
  "flex-layout.row#availability": {
    "props": {
      "blockClass": "message-availability"
    }
  },

  "share#default": {
    "props": {
      "social": {
        "Facebook": true,
        "WhatsApp": true,
        "Twitter": false,
        "Pinterest": true
      }
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/pdp/product-specifications-table.jsonc from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-specification-group#table": {
    "children": [
      "flex-layout.row#spec-group"
    ]
  },
  "flex-layout.row#spec-group": {
    "props": {
      "blockClass": "productSpecificationGroup"
    },
    "children": [
      "flex-layout.col#spec-group"
    ]
  },
  "flex-layout.col#spec-group": {
    "children": [
      "flex-layout.row#spec-group-name",
      "product-specification"
    ]
  },
  "flex-layout.row#spec-group-name": {
    "props": {
      "blockClass": "productSpecificationGroupName"
    },
    "children": [
      "product-specification-text#group"
    ]
  },
  "product-specification": {
    "children": [
      "flex-layout.row#spec-item"
    ]
  },
  "flex-layout.row#spec-item": {
    "props": {
      "blockClass": "productSpecification"
    },
    "children": [
      "flex-layout.col#spec-name",
      "flex-layout.col#spec-value"
    ]
  },
  "flex-layout.col#spec-name": {
    "props": {
      "blockClass": "productSpecificationName",
      "width": {
        "mobile": "50%",
        "desktop": "25%"
      }
    },
    "children": [
      "product-specification-text#specification"
    ]
  },
  "flex-layout.col#spec-value": {
    "props": {
      "blockClass": "productSpecificationValue"
    },
    "children": [
      "product-specification-values"
    ]
  },
  "product-specification-values": {
    "children": [
      "product-specification-text#value"
    ]
  },
  "product-specification-text#group": {
    "props": {
      "message": "{groupName}"
    }
  },
  "product-specification-text#specification": {
    "props": {
      "message": "{specificationName}"
    }
  },
  "product-specification-text#value": {
    "props": {
      "message": "{specificationValue}"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/header/category-menu.json from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#category-menu": {
    "props": {
      "experimentalOptimizeRendering": true
    },
    "children": [
      "menu-item#category-apparel",
      "menu-item#category-home",
      "menu-item#more",
      "menu-item#blog"
    ]
  },
  "menu-item#category-apparel": {
    "props": {
      "id": "menu-item-category-apparel",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/",
        "noFollow": false,
        "tagTitle": "Apparel & Accessories",
        "text": "Apparel & Accessories"
      }
    },
    "blocks": ["vtex.menu@2.x:submenu#category-apparel"]
  },
  "vtex.menu@2.x:submenu#category-apparel": {
    "props": {
      "width": "auto"
    },
    "children": ["vtex.menu@2.x:menu#category-apparel"]
  },
  "vtex.menu@2.x:menu#category-apparel": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#category-apparel-clothing",
      "menu-item#category-apparel-accessories",
      "menu-item#category-apparel-eyeglasses"
    ]
  },
  "menu-item#category-apparel-clothing": {
    "props": {
      "id": "menu-item-category-apparel-clothing",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/clothing/",
        "noFollow": false,
        "tagTitle": "Clothing",
        "text": "Clothing"
      }
    }
  },
  "menu-item#category-apparel-accessories": {
    "props": {
      "id": "menu-item-category-apparel-accessories",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/accessories/",
        "noFollow": false,
        "tagTitle": "Accessories",
        "text": "Accessories"
      }
    }
  },
  "menu-item#category-apparel-eyeglasses": {
    "props": {
      "id": "menu-item-category-apparel-eyeglasses",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/eyeglasses/",
        "noFollow": false,
        "tagTitle": "Eyeglasses",
        "text": "Eyeglasses"
      }
    }
  },
  "menu-item#category-home": {
    "props": {
      "id": "menu-item-category-home",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/home---decor/",
        "noFollow": false,
        "tagTitle": "Home & Decor",
        "text": "Home & Decor"
      }
    }
  },
  "menu-item#blog": {
    "props": {
      "id": "menu-item-blog",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/blog/",
        "noFollow": false,
        "tagTitle": "Blog",
        "text": "Blog"
      }
    }
  },
  "menu-item#more": {
    "props": {
      "id": "menu-item-custom-sale",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": true,
        "tagTitle": "More",
        "text": "More"
      }
    },
    "blocks": ["vtex.menu@2.x:submenu#more"]
  },
  "vtex.menu@2.x:submenu#more": {
    "props": {
      "width": "100%"
    },
    "children": ["flex-layout.row#menu-more"]
  },
  "flex-layout.row#menu-more": {
    "children": ["flex-layout.col#menu-more-1", "flex-layout.col#menu-more-2"]
  },
  "flex-layout.col#menu-more-1": {
    "children": ["vtex.menu@2.x:menu#more"]
  },
  "flex-layout.col#menu-more-2": {
    "children": ["info-card#home"]
  },
  "vtex.menu@2.x:menu#more": {
    "props": {
      "orientation": "vertical"
    },
    "children": ["menu-item#about-us", "menu-item#faq"]
  },
  "menu-item#about-us": {
    "props": {
      "id": "menu-item-about-us",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/about-us",
        "noFollow": true,
        "tagTitle": "About us",
        "text": "About us"
      }
    }
  },
  "menu-item#faq": {
    "props": {
      "id": "menu-item-faq",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/faq",
        "noFollow": true,
        "tagTitle": "FAQ",
        "text": "FAQ"
      }
    }
  },
  "menu-item#contact-us": {
    "props": {
      "id": "menu-item-contact-us",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/contact-us",
        "noFollow": true,
        "tagTitle": "Contact Us",
        "text": "Contact Us"
      }
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/header/header.jsonc from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "header": {
    "blocks": ["header-layout.desktop", "header-layout.mobile"]
  },
  "header.full": {
    "blocks": ["header-layout.desktop", "header-layout.mobile"]
  },
  "header-layout.desktop": {
    "children": [
      "flex-layout.row#1-desktop",
      "flex-layout.row#2-desktop",
      "flex-layout.row#3-desktop",
      "sticky-layout#4-desktop"
    ]
  },

  "flex-layout.row#1-desktop": {
    "children": ["telemarketing"],
    "props": {
      "fullWidth": true
    }
  },

  "flex-layout.row#2-desktop": {
    "children": ["notification.bar#home"],
    "props": {
      "fullWidth": "true"
    }
  },
  "notification.bar#home": {
    "props": {
      "content": "SELECTED ITEMS ON SALE! CHECK IT OUT!"
    }
  },
  "flex-layout.row#3-desktop": {
    "props": {
      "blockClass": "menu-link",
      "horizontalAlign": "center",
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true,
      "fullWidth": true
    },
    "children": [
      "vtex.menu@2.x:menu#websites",
      "flex-layout.col#spacer",
      "vtex.menu@2.x:menu#institutional"
    ]
  },
  "flex-layout.col#spacer": {
    "props": {
      "width": "grow"
    }
  },
  "sticky-layout#4-desktop": {
    "props": {
      "blockClass": "sticky-header"
    },
    "children": ["flex-layout.row#4-desktop"]
  },
  "flex-layout.row#4-desktop": {
    "props": {
      "blockClass": "main-header",
      "horizontalAlign": "center",
      "verticalAlign": "center",
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true,
      "fullWidth": true
    },
    "children": [
      "flex-layout.col#logo-desktop",
      "flex-layout.col#category-menu",
      "flex-layout.col#spacer",
      "search-bar",
      "locale-switcher",
      "login",
      "minicart.v2"
    ]
  },
  "flex-layout.col#logo-desktop": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": ["logo#desktop"]
  },
  "flex-layout.col#category-menu": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": ["vtex.menu@2.x:menu#category-menu"]
  },
  "logo#desktop": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo.png",
      "width": "180"
    }
  },
  "header-layout.mobile": {
    "children": ["sticky-layout#1-mobile"]
  },
  "sticky-layout#1-mobile": {
    "children": ["flex-layout.row#1-mobile"]
  },
  "flex-layout.row#1-mobile": {
    "children": [
      "drawer",
      "logo#mobile",
      "flex-layout.col#spacer",
      "login",
      "minicart.v2"
    ],
    "props": {
      "blockClass": "main-header-mobile",
      "preventHorizontalStretch": true,
      "preserveLayoutOnMobile": true,
      "fullWidth": true
    }
  },
  "drawer": {
    "children": ["menu#drawer"]
  },

  "menu#drawer": {
    "children": [
      "menu-item#category-apparel",
      "menu-item#category-home",
      "menu-item#more"
    ],
    "props": {
      "orientation": "vertical"
    }
  },

  "logo#mobile": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo-mobile.png",
      "width": "70"
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of wordpress-integration-qa-theme/store/blocks/header/top-menu.json from the wordpress-integration-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#websites": {
    "children": [
      "menu-item#shop",
      "menu-item#about-us"
    ]
  },
  "menu-item#shop": {
    "props": {
      "id": "menu-item-shop",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Shop",
        "text": "Shop"
      }
    }
  },
  "vtex.menu@2.x:menu#institutional": {
    "children": [
      "menu-item#vtex-website"
    ]
  },
  "menu-item#vtex-website": {
    "props": {
      "id": "menu-item-vtex-website",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "external",
        "href": "http://vtex.com",
        "noFollow": false,
        "tagTitle": "visit vtex.com",
        "text": "visit vtex.com"
      }
    }
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of percycle/docs/README.md from the percycle VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Percycle

**We convert experiences into results**
Our intelligence creates relevant shopping experiences for every consumer throughout their brand interaction journey. You will be able to attract, engage and reengage customers in a manner consistent with each other's goals, offering what they want when they need it.
For more information please visit, [Percycle](https://www.linx.com.br/) website.

## App Installation
Open the VTEX APP Store and install the Percycle app on your store.

or

Run the following command:

```sh
vtex install vtex.percycle@0.x
```

Next, open the app settings on your admin and fill the form with your Percycle information.
```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of percycle/react/index.tsx from the percycle VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { PixelMessage } from "./typings/events";
import { canUseDOM } from "vtex.render-runtime";

function handleMessages(e: PixelMessage) {
  const { storeName } = window

  if (e.data.eventName === 'vtex:orderPlaced') {
    const percycleScript = document.createElement('script');
    percycleScript.setAttribute('src', `//static.percycle.com/${storeName}/c.js`);
    percycleScript.setAttribute('async', 'async');
    percycleScript.setAttribute('defer', 'defer');
    document.getElementsByTagName('body')[0].appendChild(percycleScript);
  }
}

if (canUseDOM) {
  window.addEventListener("message", handleMessages);
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of percycle/react/package.json from the percycle VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "ramda": "^0.26.1"
  },
  "devDependencies": {
    "@types/graphql": "^14.2.0",
    "@types/jest": "^24.0.11",
    "@types/node": "^11.13.0",
    "@types/ramda": "^0.26.5",
    "@vtex/test-tools": "^1.1.0",
    "eslint": "^5.16.0",
    "eslint-config-vtex-react": "^4.1.0",
    "prettier": "^1.18.2",
    "tslint-eslint-rules": "^5.4.0",
    "typescript": "3.5.2"
  },
  "version": "0.0.2"
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of percycle/store/interfaces.json from the percycle VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "pixel.percycle": {
    "component": "index"
  }
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of percycle/react/typings/events.d.ts from the percycle VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface PixelMessage extends MessageEvent {
  data:
    | ProductViewData
    | ProductClickData
    | OrderPlacedData
    | PageViewData
    | ProductImpressionData
    | AddToCartData
    | RemoveToCartData
}

export interface EventData {
  event: string
  eventName: string
  currency: string
}

export interface PageViewData extends EventData {
  event: 'pageView'
  eventName: 'vtex:pageView'
  pageTitle: string
  pageUrl: string
  referrer: string
}

export interface AddToCartData extends EventData {
  event: 'addToCart'
  eventName: 'vtex:addToCart'
  items: CartItem[]
}

export interface RemoveToCartData extends EventData {
  event: 'removeFromCart'
  eventName: 'vtex:removeFromCart'
  items: CartItem[]
}

export interface OrderPlacedData extends Order, EventData {
  event: 'orderPlaced'
  eventName: 'vtex:orderPlaced'
}

export interface ProductViewData extends EventData {
  event: 'productView'
  eventName: 'vtex:productView'
  product: Product
}

export interface ProductClickData extends EventData {
  event: 'productClick'
  eventName: 'vtex:productClick'
  product: Product
}

export interface ProductImpressionData extends EventData {
  event: 'productImpression'
  eventName: 'vtex:productImpression'
  impressions: Impression[]
  product?: Product // deprecated, use impressions list!
  position?: number // deprecated, use impressions list!
  list: string
}

interface CartItem {
  skuId: string
  variant: string
  price: number
  name: string
  quantity: number
  productRefId: string
  brand: string
  category: string
}

export interface Order {
  currency: string
  accountName: string
  orderGroup: string
  salesChannel: string
  coupon: string
  visitorType: string
  visitorContactInfo: string[]
  visitorAddressState: string
  visitorAddressCountry: string
  visitorAddressPostalCode: string
  transactionId: string
  transactionDate: string
  transactionAffiliation: string
  transactionTotal: number
  transactionShipping: number
  transactionSubtotal: number
  transactionDiscounts: number
  transactionTax: number
  transactionCurrency: string
  transactionPaymentType: PaymentType[]
  transactionShippingMethod: ShippingMethod[]
  transactionProducts: ProductOrder[]
  transactionPayment: {
    id: string
  }
}

export interface Impression {
  product: Product
  position: number
}

interface PaymentType {
  group: string
  paymentSystemName: string
  installments: number
  value: number
}

interface ShippingMethod {
  itemId: string
  selectedSla: string
}

interface ProductOrder {
  id: string
  name: string
  sku: string
  skuRefId: string
  skuName: string
  productRefId: string
  ean: string
  slug: string
  brand: string
  brandId: string
  seller: string
  sellerId: string
  category: string
  categoryId: string
  categoryTree: string[]
  categoryIdTree: string[]
  priceTags: PriceTag[]
  originalPrice: number
  price: number
  sellingPrice: number
  tax: number
  quantity: number
  components: any[]
  measurementUnit: string
  unitMultiplier: number
}

interface PriceTag {
  identifier: string
  isPercentual: boolean
  value: number
}

interface Product {
  brand: string
  categoryId?: string // inconsistency
  categories: string[]
  productId: string
  productName: string
  selectedSku?: string // inconsistency
  items: Item[]
  sku: Item
  [key: string]: any
}

interface Item {
  itemId: string
  name: string
  seller?: Seller
  [key: string]: any
}

interface Seller {
  commertialOffer: CommertialOffer
  [key: string]: any
}

interface CommertialOffer {
  Price: number
  [key: string]: any
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of percycle/react/typings/vtex.render-runtime.d.ts from the percycle VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.render-runtime' {
  export const canUseDOM: boolean
}

```


[System] You are an expert VTEX IO developer. You specialize in building VTEX Store Framework apps, React components, GraphQL APIs, and Node.js services for e-commerce platforms.

[User] Show me the implementation of percycle/react/typings/global.d.ts from the percycle VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Window extends Window {
  storeName:any
}

```