[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 search-demo-theme/store/blocks/footer/menu.json from the search-demo-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 search-demo-theme/store/blocks/product-summary/product-summary.jsonc from the search-demo-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@2.x:product-highlights#collection",
      "modal-trigger#quickview" // Check quickview.jsonc
    ]
  },

  "product-summary-image#shelf": {
    "props": {
      "showBadge": false,
      "aspectRatio": "1:1",
      "maxHeight": 300,
      "hoverImageLabel": "hover",
      "fetchpriority": "high",
      "hoverImage": {
        "index": 2
      }
    }
  },

  "vtex.product-highlights@2.x: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 search-demo-theme/store/blocks/product-summary/quickview.json from the search-demo-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 search-demo-theme/store/blocks/product-summary/product-summary-list.jsonc from the search-demo-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": {
      "isOneClickBuy": true,
      "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@2.x: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@2.x: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 search-demo-theme/store/blocks/product-summary/product-specification-list.jsonc from the search-demo-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 search-demo-theme/store/blocks/pdp/product-assembly.jsonc from the search-demo-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 search-demo-theme/store/blocks/pdp/product-gifts.jsonc from the search-demo-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 search-demo-theme/store/blocks/pdp/product.jsonc from the search-demo-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.product": {
    "children": [
      "flex-layout.row#product-breadcrumb",
      "condition-layout.product#availability",
      "flex-layout.row#recommendation-cross-sell",
      "flex-layout.row#recommendation-similar-items",
      "flex-layout.row#description",
      "flex-layout.row#specifications-title",
      "product-specification-group#table",
      "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",
      "availability-subscriber",
      "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"
    },
    "children": ["availability-subscriber"]
  },

  "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 search-demo-theme/store/blocks/pdp/product-specifications-table.jsonc from the search-demo-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 search-demo-theme/store/blocks/header/category-menu.json from the search-demo-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#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#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 search-demo-theme/store/blocks/header/header.jsonc from the search-demo-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#3-desktop",
      "sticky-layout#4-desktop"
    ]
  },

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

  "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",
      "height": "12"
    }
  },
  "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": "77.5",
      "height": "27.5"
    }
  },

  // Custom

  "search-bar": {
    "blocks": ["autocomplete-result-list.v2"],
    "props": {
      "openAutocompleteOnFocus": 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 search-demo-theme/store/blocks/header/top-menu.json from the search-demo-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 admin-list/messages/nl.json from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/section.name": "Cadeaulijst",
  "admin/subsection.name": "Lijstbeheer",
  "admin/interface.name": "Cadeaulijst app-beheer",
  "admin/interface.title.user": "Alle eigenaren",
  "admin/interface.columns.title": "Titel",
  "admin/interface.columns.user": "Gebruiker",
  "admin/interface.columns.validate": "Datum evenement",
  "admin/interface.columns.bought": "Totaal krediet",
  "admin/interface.columns.converted": "Gegenereerd in cadeaubon",
  "admin/interface.columns.status": "Status",
  "admin/interface.columns.owner": "Eigenaar",
  "admin/interface.columns.lists": "Lijsten",
  "admin/interface.active": "Ingeschakeld",
  "admin/interface.disabled": "Uitgeschakeld",
  "admin/interface.search.user": "Zoeken op e-mail",
  "admin/interface.search.list": "Zoeken op titel",
  "admin/interface.pagination.preposition": "van",
  "admin/interface.pagination.subject": "resultaten",
  "admin/interface.pagination.previous": "Vorige",
  "admin/interface.pagination.next": "Volgende",
  "admin/interface.totalizer.lists.created": "Lijsten",
  "admin/interface.totalizer.bought": "Totaal krediet",
  "admin/interface.totalizer.converted": "Gegenereerd in cadeaubon",
  "admin/interface.totalizer.info": "Dit veld verandert niet wanneer een filter wordt toegepast",
  "admin/interface.filter.date": "Lijst aanmaakdatum",
  "admin/interface.filter.date.today": "Vandaag",
  "admin/interface.filter.date.yesterday": "Gisteren",
  "admin/interface.filter.date.this.week": "Deze week",
  "admin/interface.filter.date.last.week": "Vorige week",
  "admin/interface.filter.date.this.month": "Deze maand",
  "admin/interface.filter.date.last.month": "Vorige maand",
  "admin/interface.filter.date.this.year": "Dit jaar",
  "admin/interface.filter.date.last.year": "Afgelopen jaar",
  "admin/interface.filter.date.customizer": "Aangepast",
  "admin/interface.filter.status": "Status",
  "admin/interface.filter.status.active": "Ingeschakeld",
  "admin/interface.filter.status.disabled": "Uitgeschakeld",
  "admin/interface.modal.date.initial": "Startdatum",
  "admin/interface.modal.date.final": "Einddatum",
  "admin/interface.modal.title": "Zoekopdracht op datum aanpassen",
  "admin/interface.modal.aria.label": "Datum aanpassing modus",
  "admin/interface.modal.confirm": "Bevestig",
  "admin/interface.columns.tooltip.user": "Alle lijsten van deze gebruiker bekijken",
  "admin/interface.columns.tooltip.list": "Lijstpagina bekijken",
  "admin/interface.empty": "Tabel leegmaken"
}

```


[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 admin-list/messages/pt.json from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/section.name": "Lista de presentes",
  "admin/subsection.name": "Gerenciamento de listas",
  "admin/interface.name": "Gerenciamento do app Lista de presentes",
  "admin/interface.title.user": "Todos os proprietários",
  "admin/interface.columns.title": "Título",
  "admin/interface.columns.user": "Usuário",
  "admin/interface.columns.validate": "Data do evento",
  "admin/interface.columns.bought": "Total de créditos",
  "admin/interface.columns.converted": "Gerados em vale-presente",
  "admin/interface.columns.status": "Status",
  "admin/interface.columns.owner": "Proprietário",
  "admin/interface.columns.lists": "Listas",
  "admin/interface.active": "Ativa",
  "admin/interface.disabled": "Desativada",
  "admin/interface.search.user": "Buscar por email",
  "admin/interface.search.list": "Buscar por título",
  "admin/interface.pagination.preposition": "de",
  "admin/interface.pagination.subject": "resultados",
  "admin/interface.pagination.previous": "Anterior",
  "admin/interface.pagination.next": "Próxima",
  "admin/interface.totalizer.lists.created": "Listas",
  "admin/interface.totalizer.bought": "Total de créditos",
  "admin/interface.totalizer.converted": "Gerados em vale-presente",
  "admin/interface.totalizer.info": "Esse campo não é alterado ao aplicar filtros",
  "admin/interface.filter.date": "Data da criação da lista",
  "admin/interface.filter.date.today": "Hoje",
  "admin/interface.filter.date.yesterday": "Ontem",
  "admin/interface.filter.date.this.week": "Esta semana",
  "admin/interface.filter.date.last.week": "Semana passada",
  "admin/interface.filter.date.this.month": "Este mês",
  "admin/interface.filter.date.last.month": "Mês passado",
  "admin/interface.filter.date.this.year": "Este ano",
  "admin/interface.filter.date.last.year": "Ano passado",
  "admin/interface.filter.date.customizer": "Personalizado",
  "admin/interface.filter.status": "Status",
  "admin/interface.filter.status.active": "Ativada",
  "admin/interface.filter.status.disabled": "Expirada",
  "admin/interface.modal.date.initial": "Data inicial",
  "admin/interface.modal.date.final": "Data final",
  "admin/interface.modal.title": "Personalizar busca por data",
  "admin/interface.modal.aria.label": "Modal de personalizaçao da data",
  "admin/interface.modal.confirm": "Confirmar",
  "admin/interface.columns.tooltip.user": "Ver todas as listas desse usuário",
  "admin/interface.columns.tooltip.list": "Ver página da lista",
  "admin/interface.empty": "Tabela vazia"
}

```


[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 admin-list/messages/en.json from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/section.name": "Gift List",
  "admin/subsection.name": "List management",
  "admin/interface.name": "Gift List App Management",
  "admin/interface.title.user": "All owners",
  "admin/interface.columns.title": "Title",
  "admin/interface.columns.user": "User",
  "admin/interface.columns.validate": "Event Date",
  "admin/interface.columns.bought": "Total Credit",
  "admin/interface.columns.converted": "Generated in Gift Card",
  "admin/interface.columns.status": "Status",
  "admin/interface.columns.owner": "Owner",
  "admin/interface.columns.lists": "Lists",
  "admin/interface.active": "Enabled",
  "admin/interface.disabled": "Disabled",
  "admin/interface.search.user": "Search by email",
  "admin/interface.search.list": "Search by title",
  "admin/interface.pagination.preposition": "of",
  "admin/interface.pagination.subject": "results",
  "admin/interface.pagination.previous": "Previous",
  "admin/interface.pagination.next": "Next",
  "admin/interface.totalizer.lists.created": "Lists",
  "admin/interface.totalizer.bought": "Total credit",
  "admin/interface.totalizer.converted": "Generated in gift card",
  "admin/interface.totalizer.info": "This field does not change when a filter is applied",
  "admin/interface.filter.date": "List creation date",
  "admin/interface.filter.date.today": "Today",
  "admin/interface.filter.date.yesterday": "Yesterday",
  "admin/interface.filter.date.this.week": "This week",
  "admin/interface.filter.date.last.week": "Last week",
  "admin/interface.filter.date.this.month": "This month",
  "admin/interface.filter.date.last.month": "Last month",
  "admin/interface.filter.date.this.year": "This year",
  "admin/interface.filter.date.last.year": "Last year",
  "admin/interface.filter.date.customizer": "Customized",
  "admin/interface.filter.status": "Status",
  "admin/interface.filter.status.active": "Enabled",
  "admin/interface.filter.status.disabled": "Disabled",
  "admin/interface.modal.date.initial": "Start date",
  "admin/interface.modal.date.final": "End date",
  "admin/interface.modal.title": "Customize search by date",
  "admin/interface.modal.aria.label": "Date customization modal",
  "admin/interface.modal.confirm": "Confirm",
  "admin/interface.columns.tooltip.user": "View all lists for this user",
  "admin/interface.columns.tooltip.list": "View list page",
  "admin/interface.empty": "Empty table"
}

```


[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 admin-list/messages/it.json from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/section.name": "Liste regali",
  "admin/subsection.name": "Gestione delle liste",
  "admin/interface.name": "Gestione dell'app \"Liste regali\"",
  "admin/interface.title.user": "Tutti i proprietari",
  "admin/interface.columns.title": "Titolo",
  "admin/interface.columns.user": "Utente",
  "admin/interface.columns.validate": "Data dell'evento",
  "admin/interface.columns.bought": "Crediti totali",
  "admin/interface.columns.converted": "Generati in buoni regalo",
  "admin/interface.columns.status": "Stato",
  "admin/interface.columns.owner": "Proprietario",
  "admin/interface.columns.lists": "Liste",
  "admin/interface.active": "Attiva",
  "admin/interface.disabled": "Inattiva",
  "admin/interface.search.user": "Cerca per email",
  "admin/interface.search.list": "Cerca per titolo",
  "admin/interface.pagination.preposition": "di",
  "admin/interface.pagination.subject": "risultati",
  "admin/interface.pagination.previous": "Indietro",
  "admin/interface.pagination.next": "Avanti",
  "admin/interface.totalizer.lists.created": "Liste",
  "admin/interface.totalizer.bought": "Crediti totali",
  "admin/interface.totalizer.converted": "Generati in buoni regalo",
  "admin/interface.totalizer.info": "Questo campo non cambia quando viene applicato un filtro",
  "admin/interface.filter.date": "Data di creazione della lista",
  "admin/interface.filter.date.today": "Oggi",
  "admin/interface.filter.date.yesterday": "Ieri",
  "admin/interface.filter.date.this.week": "Questa settimana",
  "admin/interface.filter.date.last.week": "Ultima settimana",
  "admin/interface.filter.date.this.month": "Questo mese",
  "admin/interface.filter.date.last.month": "Ultimo mese",
  "admin/interface.filter.date.this.year": "Quest'anno",
  "admin/interface.filter.date.last.year": "Ultimo anno",
  "admin/interface.filter.date.customizer": "Personalizzato",
  "admin/interface.filter.status": "Stato",
  "admin/interface.filter.status.active": "Attivo",
  "admin/interface.filter.status.disabled": "Inattivo",
  "admin/interface.modal.date.initial": "Data di inizio",
  "admin/interface.modal.date.final": "Data di fine",
  "admin/interface.modal.title": "Personalizza ricerca per data",
  "admin/interface.modal.aria.label": "Modale di personalizzazione della data",
  "admin/interface.modal.confirm": "Conferma",
  "admin/interface.columns.tooltip.user": "Visualizza tutte le liste di questo utente",
  "admin/interface.columns.tooltip.list": "Visualizza pagina della lista",
  "admin/interface.empty": "Tabella vuota"
}

```


[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 admin-list/messages/fr.json from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/section.name": "Liste de cadeau",
  "admin/subsection.name": "Gestion des listes",
  "admin/interface.name": "Gestion de l'appli pour la liste des cadeaux",
  "admin/interface.title.user": "Tous les propriétaires",
  "admin/interface.columns.title": "Titre",
  "admin/interface.columns.user": "Utilisateur",
  "admin/interface.columns.validate": "Date de l’évènement",
  "admin/interface.columns.bought": "Crédit total",
  "admin/interface.columns.converted": "Généré en carte cadeau",
  "admin/interface.columns.status": "Statut",
  "admin/interface.columns.owner": "Propriétaire",
  "admin/interface.columns.lists": "Listes",
  "admin/interface.active": "Activé",
  "admin/interface.disabled": "Désactivé",
  "admin/interface.search.user": "Recherche par adresse email",
  "admin/interface.search.list": "Recherche par titre",
  "admin/interface.pagination.preposition": "le",
  "admin/interface.pagination.subject": "résultats",
  "admin/interface.pagination.previous": "Précédent",
  "admin/interface.pagination.next": "Suivant",
  "admin/interface.totalizer.lists.created": "Listes",
  "admin/interface.totalizer.bought": "Crédit total",
  "admin/interface.totalizer.converted": "Généré en carte cadeau",
  "admin/interface.totalizer.info": "Ce champ ne change pas quand un filtre est appliqué",
  "admin/interface.filter.date": "Date de création de la liste",
  "admin/interface.filter.date.today": "Aujourd’hui",
  "admin/interface.filter.date.yesterday": "Hier",
  "admin/interface.filter.date.this.week": "Cette semaine",
  "admin/interface.filter.date.last.week": "La semaine dernière",
  "admin/interface.filter.date.this.month": "Ce mois-ci",
  "admin/interface.filter.date.last.month": "Le mois dernier",
  "admin/interface.filter.date.this.year": "Cette année",
  "admin/interface.filter.date.last.year": "L'an dernier",
  "admin/interface.filter.date.customizer": "Personnalisé",
  "admin/interface.filter.status": "Statut",
  "admin/interface.filter.status.active": "Activé",
  "admin/interface.filter.status.disabled": "Désactivé",
  "admin/interface.modal.date.initial": "Date de début",
  "admin/interface.modal.date.final": "Date de fin",
  "admin/interface.modal.title": "Personnaliser la recherche par date",
  "admin/interface.modal.aria.label": "Modal de personnalisation de la date",
  "admin/interface.modal.confirm": "Confirmer",
  "admin/interface.columns.tooltip.user": "Afficher toutes les listes pour cet utilisateur",
  "admin/interface.columns.tooltip.list": "Voir la page de la liste",
  "admin/interface.empty": "Tableau vide"
}

```


[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 admin-list/messages/bg.json from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/section.name": "Списък с подаръци",
  "admin/subsection.name": "Управление на списък",
  "admin/interface.name": "Управление на приложение за списъци с подаръци",
  "admin/interface.title.user": "Всички собственици",
  "admin/interface.columns.title": "Заглавие",
  "admin/interface.columns.user": "Потребител",
  "admin/interface.columns.validate": "Дата на събитието",
  "admin/interface.columns.bought": "Общо кредит",
  "admin/interface.columns.converted": "Генерирано в подаръчна карта",
  "admin/interface.columns.status": "Статус",
  "admin/interface.columns.owner": "Собственик",
  "admin/interface.columns.lists": "Списъци",
  "admin/interface.active": "Активирано",
  "admin/interface.disabled": "Деактивирано",
  "admin/interface.search.user": "Търсене по имейл",
  "admin/interface.search.list": "Търсене по заглавие",
  "admin/interface.pagination.preposition": "от",
  "admin/interface.pagination.subject": "резултата",
  "admin/interface.pagination.previous": "Назад",
  "admin/interface.pagination.next": "Следващ",
  "admin/interface.totalizer.lists.created": "Списъци",
  "admin/interface.totalizer.bought": "Общо кредит",
  "admin/interface.totalizer.converted": "Генерирано в подаръчна карта",
  "admin/interface.totalizer.info": "Това поле не се променя, когато бъде приложен филтър",
  "admin/interface.filter.date": "Дата на създаване на списъка",
  "admin/interface.filter.date.today": "Днес",
  "admin/interface.filter.date.yesterday": "Вчера",
  "admin/interface.filter.date.this.week": "Тази седмица",
  "admin/interface.filter.date.last.week": "Миналата седмица",
  "admin/interface.filter.date.this.month": "Този месец",
  "admin/interface.filter.date.last.month": "Последния месец",
  "admin/interface.filter.date.this.year": "Тази година",
  "admin/interface.filter.date.last.year": "Миналата година",
  "admin/interface.filter.date.customizer": "Персонализирано",
  "admin/interface.filter.status": "Статус",
  "admin/interface.filter.status.active": "Активирано",
  "admin/interface.filter.status.disabled": "Деактивирано",
  "admin/interface.modal.date.initial": "Начална дата",
  "admin/interface.modal.date.final": "Крайна дата",
  "admin/interface.modal.title": "Персонализиране на търсенето по дата",
  "admin/interface.modal.aria.label": "Модален прозорец за персонализиране на дата",
  "admin/interface.modal.confirm": "Потвърждаване",
  "admin/interface.columns.tooltip.user": "Преглед на всички списъци за този потребител",
  "admin/interface.columns.tooltip.list": "Преглед на страницата със списъка",
  "admin/interface.empty": "Празна таблица"
}

```


[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 admin-list/messages/ro.json from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/section.name": "Listă de cadouri",
  "admin/subsection.name": "Gestionare liste",
  "admin/interface.name": "Gestionare Gift List App (aplicație listă de cadouri)",
  "admin/interface.title.user": "Toți proprietarii",
  "admin/interface.columns.title": "Titlu",
  "admin/interface.columns.user": "Utilizator",
  "admin/interface.columns.validate": "Dată eveniment",
  "admin/interface.columns.bought": "Credit total",
  "admin/interface.columns.converted": "Generat în card cadou",
  "admin/interface.columns.status": "Status",
  "admin/interface.columns.owner": "Proprietar",
  "admin/interface.columns.lists": "Liste",
  "admin/interface.active": "Activat",
  "admin/interface.disabled": "Dezactivat",
  "admin/interface.search.user": "Caută după e-mail",
  "admin/interface.search.list": "Caută după titlu",
  "admin/interface.pagination.preposition": "din",
  "admin/interface.pagination.subject": "rezultate",
  "admin/interface.pagination.previous": "Anterioară",
  "admin/interface.pagination.next": "Următoarea",
  "admin/interface.totalizer.lists.created": "Liste",
  "admin/interface.totalizer.bought": "Credit total",
  "admin/interface.totalizer.converted": "Generat în card cadou",
  "admin/interface.totalizer.info": "Acest câmp nu se modifică atunci când se aplică un filtru",
  "admin/interface.filter.date": "Data creării listei",
  "admin/interface.filter.date.today": "Azi",
  "admin/interface.filter.date.yesterday": "Ieri",
  "admin/interface.filter.date.this.week": "Săptămâna asta",
  "admin/interface.filter.date.last.week": "Săptămâna trecută",
  "admin/interface.filter.date.this.month": "Luna asta",
  "admin/interface.filter.date.last.month": "Luna trecută",
  "admin/interface.filter.date.this.year": "Anul ăsta",
  "admin/interface.filter.date.last.year": "Ultimul an",
  "admin/interface.filter.date.customizer": "Personalizat",
  "admin/interface.filter.status": "Stare",
  "admin/interface.filter.status.active": "Activat",
  "admin/interface.filter.status.disabled": "Dezactivat",
  "admin/interface.modal.date.initial": "Data de început",
  "admin/interface.modal.date.final": "Data de sfârșit",
  "admin/interface.modal.title": "Personalizează căutarea după dată",
  "admin/interface.modal.aria.label": "Modal personalizare dată",
  "admin/interface.modal.confirm": "Confirmă",
  "admin/interface.columns.tooltip.user": "Vezi toate listele pentru acest utilizator",
  "admin/interface.columns.tooltip.list": "Vezi pagina listei",
  "admin/interface.empty": "Tabel gol"
}

```


[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 admin-list/messages/ko.json from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/section.name": "선물 목록",
  "admin/subsection.name": "목록 관리",
  "admin/interface.name": "선물 목록 앱 관리",
  "admin/interface.title.user": "모든 소유자",
  "admin/interface.columns.title": "제목",
  "admin/interface.columns.user": "사용자",
  "admin/interface.columns.validate": "이벤트 날짜",
  "admin/interface.columns.bought": "총 크레딧",
  "admin/interface.columns.converted": "기프트 카드에서 생성됨",
  "admin/interface.columns.status": "상태",
  "admin/interface.columns.owner": "소유자",
  "admin/interface.columns.lists": "목록",
  "admin/interface.active": "활성화됨",
  "admin/interface.disabled": "비활성화됨",
  "admin/interface.search.user": "이메일로 검색",
  "admin/interface.search.list": "제목으로 검색",
  "admin/interface.pagination.preposition": "/",
  "admin/interface.pagination.subject": "결과",
  "admin/interface.pagination.previous": "이전",
  "admin/interface.pagination.next": "다음",
  "admin/interface.totalizer.lists.created": "목록",
  "admin/interface.totalizer.bought": "총 크레딧",
  "admin/interface.totalizer.converted": "기프트 카드에서 생성됨",
  "admin/interface.totalizer.info": "이 필드는 필터가 적용될 때 변경되지 않습니다.",
  "admin/interface.filter.date": "목록 생성 날짜",
  "admin/interface.filter.date.today": "오늘",
  "admin/interface.filter.date.yesterday": "어제",
  "admin/interface.filter.date.this.week": "이번주",
  "admin/interface.filter.date.last.week": "지난 주",
  "admin/interface.filter.date.this.month": "이번 달",
  "admin/interface.filter.date.last.month": "지난 달",
  "admin/interface.filter.date.this.year": "올해",
  "admin/interface.filter.date.last.year": "작년",
  "admin/interface.filter.date.customizer": "맞춤형",
  "admin/interface.filter.status": "상태",
  "admin/interface.filter.status.active": "활성화됨",
  "admin/interface.filter.status.disabled": "비활성화됨",
  "admin/interface.modal.date.initial": "시작 날짜",
  "admin/interface.modal.date.final": "종료 날짜",
  "admin/interface.modal.title": "날짜별 검색 사용자 지정",
  "admin/interface.modal.aria.label": "날짜 사용자 정의 모달",
  "admin/interface.modal.confirm": "확인",
  "admin/interface.columns.tooltip.user": "이 사용자의 모든 목록 보기",
  "admin/interface.columns.tooltip.list": "목록 페이지 보기",
  "admin/interface.empty": "빈 테이블"
}

```


[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 admin-list/messages/th.json from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/section.name": "รายการของกำนัล",
  "admin/subsection.name": "การบริหารจัดการรายการ",
  "admin/interface.name": "การบริหารจัดการแอปรายการของกำนัล",
  "admin/interface.title.user": "เจ้าของทั้งหมด",
  "admin/interface.columns.title": "คำเรียก",
  "admin/interface.columns.user": "ผู้ใช้",
  "admin/interface.columns.validate": "วันที่ของอีเวนต์",
  "admin/interface.columns.bought": "ยอดรวมเครดิต",
  "admin/interface.columns.converted": "สร้างในบัตรกำนัลแล้ว",
  "admin/interface.columns.status": "สถานะ",
  "admin/interface.columns.owner": "เจ้าของ",
  "admin/interface.columns.lists": "รายการ",
  "admin/interface.active": "เปิดใช้งานแล้ว",
  "admin/interface.disabled": "ปิดการใช้งานแล้ว",
  "admin/interface.search.user": "ค้นหาด้วยอีเมล",
  "admin/interface.search.list": "ค้นหาด้วยชื่อเรื่อง",
  "admin/interface.pagination.preposition": "ของ",
  "admin/interface.pagination.subject": "ผลลัพธ์",
  "admin/interface.pagination.previous": "ก่อนหน้า",
  "admin/interface.pagination.next": "ถัดไป",
  "admin/interface.totalizer.lists.created": "รายการ",
  "admin/interface.totalizer.bought": "ยอดรวมเครดิต",
  "admin/interface.totalizer.converted": "สร้างในบัตรกำนัลแล้ว",
  "admin/interface.totalizer.info": "ฟิลด์นี้จะไม่เปลี่ยนเมื่อใช้ตัวกรอง",
  "admin/interface.filter.date": "แสดงรายการวันที่สร้าง",
  "admin/interface.filter.date.today": "วันนี้",
  "admin/interface.filter.date.yesterday": "เมื่อวานนี้",
  "admin/interface.filter.date.this.week": "สัปดาห์นี้",
  "admin/interface.filter.date.last.week": "สัปดาห์ที่แล้ว",
  "admin/interface.filter.date.this.month": "เดือนนี้",
  "admin/interface.filter.date.last.month": "เดือนที่แล้ว",
  "admin/interface.filter.date.this.year": "ปีนี้",
  "admin/interface.filter.date.last.year": "ปีที่แล้ว",
  "admin/interface.filter.date.customizer": "กำหนดเอง",
  "admin/interface.filter.status": "สถานะ",
  "admin/interface.filter.status.active": "เปิดใช้งานแล้ว",
  "admin/interface.filter.status.disabled": "ปิดการใช้งานแล้ว",
  "admin/interface.modal.date.initial": "วันที่เริ่มต้น",
  "admin/interface.modal.date.final": "วันที่สิ้นสุด",
  "admin/interface.modal.title": "ปรับใช้การค้นหาตามวันที่",
  "admin/interface.modal.aria.label": "Modal การปรับใช้วันที่",
  "admin/interface.modal.confirm": "ยืนยัน",
  "admin/interface.columns.tooltip.user": "ดูลิสต์ทั้งหมดสำหรับผู้ใช้นี้",
  "admin/interface.columns.tooltip.list": "ดูหน้าแสดงรายการ",
  "admin/interface.empty": "ตารางว่าง"
}

```


[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 admin-list/messages/es.json from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/interface.name": "Gestión de la aplicación Lista de regalos",
  "admin/interface.title.user": "Todos los propietarios",
  "admin/interface.columns.title": "Título",
  "admin/interface.columns.user": "Usuario",
  "admin/interface.columns.validate": "Fecha del evento",
  "admin/interface.columns.bought": "Total de créditos",
  "admin/interface.columns.converted": "Generado en tarjeta de regalo",
  "admin/interface.columns.status": "Status",
  "admin/interface.columns.owner": "Propietario",
  "admin/interface.columns.lists": "Listas",
  "admin/interface.active": "Activa",
  "admin/interface.disabled": "Inactiva",
  "admin/interface.search.user": "Buscar por email",
  "admin/interface.search.list": "Buscar por título",
  "admin/interface.pagination.preposition": "de",
  "admin/interface.pagination.subject": "resultados",
  "admin/interface.pagination.previous": "Anterior",
  "admin/interface.pagination.next": "Siguiente",
  "admin/interface.totalizer.lists.created": "Listas",
  "admin/interface.totalizer.bought": "Total de créditos",
  "admin/interface.totalizer.converted": "Generado en tarjeta de regalo",
  "admin/interface.totalizer.info": "Este campo no cambia cuando se aplican filtros",
  "admin/interface.filter.date": "Fecha de creación de la lista",
  "admin/interface.filter.date.today": "Hoy",
  "admin/interface.filter.date.yesterday": "Ayer",
  "admin/interface.filter.date.this.week": "Esta semana",
  "admin/interface.filter.date.last.week": "Semana pasada",
  "admin/interface.filter.date.this.month": "Este mes",
  "admin/interface.filter.date.last.month": "Este mes",
  "admin/interface.filter.date.this.year": "Este año",
  "admin/interface.filter.date.last.year": "Año pasado",
  "admin/interface.filter.date.customizer": "Personalizado",
  "admin/interface.filter.status": "Status",
  "admin/interface.filter.status.active": "Activo",
  "admin/interface.filter.status.disabled": "Inactivo",
  "admin/interface.modal.date.initial": "Fecha de inicio",
  "admin/interface.modal.date.final": "Fecha de fin",
  "admin/interface.modal.title": "Personalizar búsqueda por fecha",
  "admin/interface.modal.aria.label": "Modal de personalización de fecha",
  "admin/interface.modal.confirm": "Confirmar",
  "admin/interface.columns.tooltip.user": "Ver todas las listas de este usuario",
  "admin/interface.columns.tooltip.list": "Ver página de la lista",
  "admin/interface.empty": "Tabla vacía"
}

```


[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 admin-list/admin/navigation.json from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "section": "other",
  "subSection": "giftListSection",
  "titleId": "admin/section.name",
  "icon": "extensions-ic",
  "subSectionItems": [
    {
      "labelId": "admin/subsection.name",
      "path": "/admin/interface"
    }
  ]
}

```


[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 admin-list/admin/routes.json from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin.app.example": {
    "component": "Interface",
    "path": "/admin/app/interface"
  }
}

```


[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 admin-list/docs/README.md from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Admin List Interface

This application is a dependency of the [`vtex.list`](https://github.com/vtex/list) application. Its purpose is to create an interface in the admin where the shopkeepers can manage all the information coming from the gift list application.

In this interface we will have a list of all users that contain a gift list, with their respective amounts of lists, the value they have already won in gifts, the value converted into gift vouchers and whether or not there is already an active list at the moment, respectively. There is also the possibility of having more information about a specific user, with the information of each list of this user.

This app depends on `vtex.list-graphql` and `vtex.gift-card-list` configuration to work properly.

```


[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 admin-list/react/Interface.tsx from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { createSystem } from '@vtex/admin-ui'

import ChooseTableArea from './components/ChooseTable'
import ProviderLists from './provider/providerLists'
import ProviderUser from './provider/providerUser'
import ProviderInterface from './provider/providerInterface'

const [ThemeProvider] = createSystem({
  key: 'admin-interface-shopkeeper',
})

function Interface() {
  return (
    <ProviderInterface>
      <ProviderLists>
        <ProviderUser>
          <ThemeProvider>
            <ChooseTableArea />
          </ThemeProvider>
        </ProviderUser>
      </ProviderLists>
    </ProviderInterface>
  )
}

export default Interface

```


[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 admin-list/react/package.json from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.admin-ui-example",
  "version": "0.18.0",
  "devDependencies": {
    "@types/faker": "^5.5.9",
    "@types/node": "^11.12.1",
    "@types/react": "^16.8.10",
    "@vtex/tsconfig": "^0.4.4",
    "graphql": "^14.6.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "typescript": "3.9.7",
    "vtex.admin-interface": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.admin-interface@0.9.0/public/@types/vtex.admin-interface",
    "vtex.gift-card-list": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.gift-card-list@1.14.0/public/@types/vtex.gift-card-list",
    "vtex.list-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.list-graphql@3.3.0/public/@types/vtex.list-graphql",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime"
  },
  "dependencies": {
    "@vtex/admin-ui": "^0.131.2",
    "admin-ui": "^3.3.13",
    "faker": "^5.5.3",
    "react-apollo": "^3.1.5",
    "react-intl": "^5.21.0"
  }
}

```


[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 admin-list/react/typings/dictionary.d.ts from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface DictionaryType {
  startDate: string
  endDate: string
}

```


[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 admin-list/react/typings/valuesLists.d.ts from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface ValuesLists {
  id: string
  listType: string
  name: string
  active: boolean
  public: boolean
  otherName: string
  ownerName: string
  ownerEmail: string
  image: string
  backgroundImage: string
  quantityPurchased: number
  valuePurchased: number
  eventDate: string
  createdIn: string
}

interface ItemsLists {
  id: string
  list: string
  title: string
  validate: number
  bought: number
  status: boolean
}

interface TotalizerListsUsers {
  ownerName: string
  ownerEmail: string
  lists: number
  purchase: number
  quantityAlreadyInGiftCard: number | undefined
  status: boolean
  id: string
}

```


[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 admin-list/react/typings/gql.d.ts from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.gql' {
  import { DocumentNode } from 'graphql'

  const Schema: DocumentNode

  export default Schema
}

declare module '*.graphql' {
  import { DocumentNode } from 'graphql'

  const schema: DocumentNode

  export default Schema
}

```


[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 admin-list/react/typings/valuesListsUser.d.ts from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface ValuesListsUsers {
  id: string
  ownerName: string
  ownerEmail: string
  purchase: number
  lists: number
  status: boolean
}

interface Owner {
  ownerEmail: string
  ownerName: string
}

interface ItemsListsUsers {
  table: string
  id: string
  owner: Owner | string
  lists: number
  bought: number
  converted: number
  status: 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 admin-list/react/typings/valuesGiftCard.d.ts from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface ValuesGiftCard {
  giftCardId: string
  email: string
  profileId: string
  redemptionCode: string
  quantityAlreadyInGiftCard: number
}

```


[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 admin-list/react/queries/searchListUser.gql from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```graphql
query searchListUser($filter: [String]) {
  searchListUser(filters: $filter) {
    ownerEmail
    ownerName
    lists
    purchase
    status
  }
}

```


[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 admin-list/react/queries/searchGiftCards.gql from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```graphql
query searchGiftCards(
  $page: Int!
  $pageSize: Int!
  $filter: GiftCardFiltersInput
  $sorting: GiftCardSortingInput
) {
  searchGiftCards(
    page: $page
    pageSize: $pageSize
    filters: $filter
    sorting: $sorting
  ) {
    data {
      giftCardId
      email
      profileId
      redemptionCode
      quantityAlreadyInGiftCard
    }
  }
}

```


[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 admin-list/react/queries/searchUser.gql from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```graphql
query searchUser($page: Int!, $pageSize: Int!, $filter: UsersFiltersInput) {
  allUsers(page: $page, pageSize: $pageSize, filter: $filter) {
    data {
      email
    }
    pagination {
      page
      pageSize
      total
    }
  }
}

```


[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 admin-list/react/queries/searchListsRaw.gql from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```graphql
query searchListsRaw(
  $page: Int!
  $pageSize: Int!
  $filter: ListsFiltersInput
  $sorting: ListsSortingInput
) {
  searchListsRaw(
    page: $page
    pageSize: $pageSize
    filters: $filter
    sorting: $sorting
  ) {
    data {
      id
      listType
      name
      active
      public
      otherName
      ownerName
      ownerEmail
      image
      backgroundImage
      quantityPurchased
      valuePurchased
      eventDate
      createdIn
    }
    pagination {
      page
      pageSize
      total
    }
    totalizer {
      lists
      purchase
    }
  }
}

```


[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 admin-list/react/provider/providerInterface.tsx from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React, { useState } from 'react'

import { ContextInterface } from '../hooks/useInterface'

const ProviderInterface: FC = (props) => {
  const [searchEmailFilter, setSearchEmailFilter] = useState<string>()
  const [tableLists, setTableLists] = useState(false)
  const [infoUserList, setInfoUserList] = useState<TotalizerListsUsers>()

  return (
    <ContextInterface.Provider
      value={{
        searchEmailFilter,
        setSearchEmailFilter,
        tableLists,
        setTableLists,
        infoUserList,
        setInfoUserList,
      }}
    >
      {props.children}
    </ContextInterface.Provider>
  )
}

export default ProviderInterface

```


[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 admin-list/react/provider/providerLists.tsx from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React, { useEffect, useState } from 'react'
import { useLazyQuery } from 'react-apollo'
import { useIntl } from 'react-intl'
import {
  Button,
  experimental_useDatePickerState,
  experimental_useFilterState,
  IconEye,
  Tag,
  Tooltip,
  useDataGridState,
  useDataViewState,
  useModalState,
  usePaginationState,
  useSearchState,
} from '@vtex/admin-ui'
import { useRuntime } from 'vtex.render-runtime'

import searchListsRaw from '../queries/searchListsRaw.gql'
import { ContextLists } from '../hooks/useLists'
import {
  columns,
  messages,
  filterDate,
  filterStatus,
} from '../utils/definedMessages'
import { ITEMS_PER_PAGE } from '../utils/constants'
import { useInterface } from '../hooks/useInterface'
import {
  dictionaryDate,
  dictionaryStatus,
  today,
  tomorrow,
} from '../utils/dictionary'

const ProviderLists: FC = (props) => {
  const { culture } = useRuntime()
  const useFilterState = experimental_useFilterState
  const useDatePickerState = experimental_useDatePickerState
  const { formatMessage } = useIntl()
  const [valuesLists, setValuesLists] = useState<ValuesLists[]>()
  const [itemsLists, setItemsLists] = useState<ItemsLists[]>()
  const [totalPagination, setTotalPagination] = useState<number>(0)
  const [selectedDate, setSelectedDate] = useState<string | null>()
  const [selectedStatus, setSelectedStatus] = useState<string | null>()
  const [minimunDate, setMinimunDate] = useState(new Date())
  const [searchListRawQuery, { data: dataSearchListsRaw, loading }] =
    useLazyQuery(searchListsRaw, {
      fetchPolicy: 'cache-and-network',
    })

  const pagination = usePaginationState({
    pageSize: ITEMS_PER_PAGE,
  })

  const {
    getInputProps,
    value: search,
    debouncedValue,
    setValue,
  } = useSearchState({
    timeout: 500,
  })

  useEffect(() => {
    pagination.paginate({
      type: 'setTotal',
      total: totalPagination,
    })
  }, [totalPagination])

  const modalState = useModalState({ visible: false })

  const { searchEmailFilter, infoUserList, setInfoUserList, tableLists } =
    useInterface()

  const datePersonalizeInitial = useDatePickerState({
    minValue: {
      year: 2022,
      month: 0,
      day: 1,
    },
    maxValue: {
      year: tomorrow.getFullYear(),
      month: tomorrow.getMonth(),
      day: tomorrow.getDate(),
    },
  })

  const datePersonalizeFinal = useDatePickerState({
    minValue: {
      year: minimunDate.getFullYear(),
      month: minimunDate.getMonth(),
      day: minimunDate.getDate(),
    },
    maxValue: {
      year: tomorrow.getFullYear(),
      month: tomorrow.getMonth(),
      day: tomorrow.getDate(),
    },
  })

  useEffect(() => {
    setMinimunDate(new Date(datePersonalizeInitial.calendarState.dateValue))
  }, [datePersonalizeInitial.calendarState.dateValue])

  const dateOptions = [
    { id: '1', label: formatMessage(filterDate.today), value: 1 },
    { id: '2', label: formatMessage(filterDate.yesterday), value: 2 },
    { id: '3', label: formatMessage(filterDate.thisWeek), value: 3 },
    { id: '4', label: formatMessage(filterDate.lastWeek), value: 4 },
    { id: '5', label: formatMessage(filterDate.thisMonth), value: 5 },
    { id: '6', label: formatMessage(filterDate.lastMonth), value: 6 },
    { id: '7', label: formatMessage(filterDate.thisYear), value: 7 },
    { id: '8', label: formatMessage(filterDate.lastYear), value: 8 },
    { id: '9', label: formatMessage(filterDate.customizer), value: 9 },
  ]

  const dateState = useFilterState({
    items: dateOptions,
    onChange: ({ selected }) => setSelectedDate(selected),
    label: formatMessage(filterDate.date),
  })

  const statusOptions = [
    { id: '1', label: formatMessage(filterStatus.active), value: 1 },
    { id: '2', label: formatMessage(filterStatus.disabled), value: 2 },
  ]

  const statusState = useFilterState({
    items: statusOptions,
    onChange: ({ selected }) => setSelectedStatus(selected),
    label: formatMessage(filterStatus.status),
  })

  useEffect(() => {
    dateState.onClear()
    statusState.onClear()
    setValue('')
  }, [tableLists])

  useEffect(() => {
    if (selectedDate === '9') {
      modalState.setVisible(true)
    }
  }, [selectedDate])

  useEffect(() => {
    const filter = {
      name: debouncedValue ?? null,
      ownerEmail: searchEmailFilter ?? null,
      eventDateRange: selectedStatus ? dictionaryStatus[selectedStatus] : null,
      createdDateRange: selectedDate ? dictionaryDate[selectedDate] : null,
    }

    searchListRawQuery({
      variables: {
        filter,
        page: pagination.currentPage,
        pageSize: ITEMS_PER_PAGE,
      },
    })
  }, [
    debouncedValue,
    selectedDate,
    pagination.currentPage,
    selectedStatus,
    infoUserList?.ownerEmail,
    searchEmailFilter,
  ])

  function salveDatePersonalizate() {
    dictionaryDate[9] = {
      startDate: new Date(
        datePersonalizeInitial.calendarState.dateValue
      ).toISOString(),
      endDate: new Date(
        datePersonalizeFinal.calendarState.dateValue
      ).toISOString(),
    }
    modalState.setVisible(false)
  }

  const view = useDataViewState()

  const gridLists = useDataGridState({
    view,
    columns: [
      {
        id: 'list',
        width: '2%',
        resolver: {
          type: 'plain',
          render: ({ data }) => (
            <Tooltip
              label={formatMessage(columns.tooltipList)}
              placement="right"
            >
              <Button
                icon={<IconEye />}
                variant="tertiary"
                onClick={() =>
                  window.open(`${window.location.origin}/lists/${data}/guest`)
                }
              />
            </Tooltip>
          ),
        },
      },
      {
        id: 'title',
        header: formatMessage(columns.title),
        sortable: true,
        width: '50%',
        resolver: {
          type: 'plain',
          render: ({ data }) => <b>{data}</b>,
        },
        compare: (a, b) => b.title.localeCompare(a.title),
      },
      {
        id: 'bought',
        header: formatMessage(columns.bought),
        resolver: {
          type: 'currency',
          locale: culture.locale,
          currency: culture.currency,
        },
      },
      {
        id: 'validate',
        header: formatMessage(columns.validate),
        resolver: {
          type: 'date',
          locale: culture.locale,
          options: {
            day: 'numeric',
            month: 'long',
            year: 'numeric',
          },
        },
      },
      {
        id: 'status',
        header: formatMessage(columns.status),
        resolver: {
          type: 'plain',
          render: ({ data }) =>
            data ? (
              <Tag label={formatMessage(messages.active)} palette="green" />
            ) : (
              <Tag label={formatMessage(messages.disabled)} palette="red" />
            ),
        },
        sortable: true,
        compare: (a, b) => (b.status === a.status ? 0 : a.status ? -1 : 1),
      },
    ],
    items: itemsLists,
    length: ITEMS_PER_PAGE,
  })

  useEffect(() => {
    const valuesSearchListsRaw: ValuesLists[] =
      dataSearchListsRaw?.searchListsRaw?.data

    setValuesLists(valuesSearchListsRaw)

    if (
      dataSearchListsRaw?.searchListsRaw?.pagination?.total !== undefined &&
      pagination.total !== dataSearchListsRaw?.searchListsRaw?.pagination?.total
    ) {
      setTotalPagination(dataSearchListsRaw?.searchListsRaw?.pagination?.total)
    }

    const totalizer = dataSearchListsRaw?.searchListsRaw?.totalizer

    setInfoUserList({ ...infoUserList, ...totalizer })
  }, [dataSearchListsRaw])

  useEffect(() => {
    const valueItems = valuesLists?.map((item) => {
      return {
        id: item.id ?? '',
        list: item.id ?? '',
        title: item.name ?? '',
        validate: item?.eventDate
          ? new Date(item.eventDate).valueOf()
          : new Date(2000, 1, 1).valueOf(),
        bought: item?.valuePurchased ? item.valuePurchased / 100 : 0,
        status: item?.eventDate ? new Date(item.eventDate) >= today : false,
      }
    })

    setItemsLists(valueItems)
  }, [valuesLists])

  useEffect(() => {
    if (loading && view.status !== 'loading') {
      view.setStatus({
        type: 'loading',
      })
    } else {
      view.setStatus({
        type: 'ready',
      })
    }
  }, [loading])

  return (
    <ContextLists.Provider
      value={{
        gridLists,
        view,
        dateState,
        statusState,
        search,
        getInputProps,
        debouncedValue,
        modalState,
        datePersonalizeInitial,
        datePersonalizeFinal,
        salveDatePersonalizate,
        pagination,
      }}
    >
      {props.children}
    </ContextLists.Provider>
  )
}

export default ProviderLists

```