[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 iodas-bookstore-theme/store/blocks/custom-page/black-friday.json from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#black-friday": {
    "blocks": [
      "flex-layout.row#bf-banner",
      "flex-layout.row#bf-shelf",
      "flex-layout.row#bf-search"
    ]
  },

  "flex-layout.row#bf-banner": {
    "children": [
      "flex-layout.col#image-bf",
      "flex-layout.col#text-bf"
    ],
    "props": {
      "blockClass": "bf-lp-banner",
      "paddingTop": 7,
      "paddingBottom": 7
    }
  },

  "flex-layout.col#text-bf": {
    "children": [
      "rich-text#bf-title",
      "rich-text#bf-text"
    ],
    "props": {
      "blockclass": "textColumn",
      "horizontalAlign": "center"
    }
  },

  "rich-text#bf-title": {
    "props": {
      "text": "# A BLACK VEM AÍ",
      "blockClass": "bf-lp-text"
    }
  },

  "rich-text#bf-text": {
    "props": {
      "text": "**O que é?** \n Black Friday é o dia que inaugura a temporada de compras natalícias com significativas promoções em muitas lojas retalhistas e grandes armazéns.",
      "blockClass": "bf-lp-text"
    }
  },

  "flex-layout.col#image-bf": {
    "props": {
      "verticalAlign": "middle",
      "horizontalAlign": "center"
    },
    "children": [
      "image#bf-counter"
    ]
  },

  "image#bf-counter": {
    "props": {
      "src": "https://gen.sendtric.com/countdown/wch3xdgn75"
    }
  },

  "flex-layout.row#bf-shelf": {
    "children": [
      "flex-layout.col#bf-shelf"
    ]
  },

  "flex-layout.col#bf-shelf": {
    "children": [
      "rich-text#bf-shelf"
    ],
    "props": {
      "horizontalAlign": "center"
    }
  },

  "rich-text#bf-shelf": {
    "props": {
      "text": "### Confira algumas promoções que antecipamos pra você",
      "horizontalAlign": "center"
    }
  },

  "flex-layout.row#bf-search": {
    "children": [
      "search-result"
    ],
    "props": {
      "blockClass": "bf-lp-search"
    }
  }
}
```


[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 iodas-bookstore-theme/store/blocks/category/search.json from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.search#category": {
    "blocks": ["carousel#store-search", "search-result-layout"]
  },
  "store.search#subcategory": {
    "blocks": ["carousel#store-search", "search-result-layout"]
  }
}

```


[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 iodas-bookstore-theme/store/blocks/department/search.json from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.search#department": {
    "blocks": ["carousel#store-search", "search-result-layout"]
  }
}

```


[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 iodas-bookstore-theme/store/blocks/product/product-assembly.jsonc from the iodas-bookstore-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"
    ]
  },
  "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 iodas-bookstore-theme/store/blocks/product/product-description.jsonc from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "flex-layout.row#product-description": {
        "children": [

        ]
    }
}
```


[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 iodas-bookstore-theme/store/blocks/product/product.json from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.product": {
    "children": [
      "stack-layout#product-outdoor",
      "flex-layout.row#product-main",
      "flex-layout.row#product-outdoor-shelf"
    ]
  },

  "flex-layout.row#product-outdoor-shelf": {
    "children": [
      "shelf#product-outdoor"
    ],
    "props": {
      "fullWidth": true,
      "marginBottom": 0
    }
  },

  "shelf#product-outdoor": {
    "blocks": [
      "product-summary.shelf"
    ],
    "props": {
      "titleText": "QUEM VIU, VIU TAMBÉM",
      "maxItems": "4",
      "paginationDotsVisibility": "hidden",
      "collection": "137",
      "showTitle": true
    }
  },

  "stack-layout#product-outdoor": {
    "children": [
      "flex-layout.row#product-logo",
      "flex-layout.row#product-first-layer",
      "flex-layout.row#product-second-layer"
    ],
    "props": {
      "fullWidth": true,
      "blockClass": "product-outdoor"
    }
  },

  "flex-layout.row#product-logo": {
    "children": [
      "flex-layout.col#product-logo"
    ],
    "props": {
      "fullWidth": true,
      "blockClass": "product-outdoor-relative"
    }
  },

  "flex-layout.col#product-logo": {
    "children": [
      "image#product-logo"
    ],
    "props": {
      "horizontalAlign": "center",
      "verticalAlign": "top"
    }
  },

  "image#product-logo": {
    "props": {
      "src": "https://uploaddeimagens.com.br/images/002/472/113/original/LOGO_BVRANCO_GRANDE_STAGE.png?1572618601",
      "blockClass": "product-logo",
      "maxWidth": "100%"
    }
  },

  "flex-layout.row#product-first-layer": {
    "children": [
      "flex-layout.col#product-first-layer"
    ],
    "props": {
      "fullWidth": true
    }
  },

  "flex-layout.col#product-first-layer": {
    "children": [
      "image#product-first-layer"
    ],
    "props": {
      "horizontalAlign": "center",
      "verticalAlign": "bottom",
      "width": "100%"
    }
  },

  "image#product-first-layer": {
    "props": {
      "src": "https://uploaddeimagens.com.br/images/002/471/981/original/montanhas002.png?1572616488",
      "blockClass": "product-first-layer",
      "maxWidth": "100%"
    }
  },

  "flex-layout.row#product-second-layer": {
    "children": [
      "flex-layout.col#product-second-layer"
    ],
    "props": {
      "fullWidth": true
    }
  },

  "flex-layout.col#product-second-layer": {
    "children": [
      "image#product-second-layer"
    ],
    "props": {
      "horizontalAlign": "center",
      "verticalAlign": "bottom",
      "width": "100%"
    }
  },

  "image#product-second-layer": {
    "props": {
      "src": "https://uploaddeimagens.com.br/images/002/471/980/original/cavaleiro002.png?1572616466",
      "blockClass": "product-first-layer",
      "maxWidth": "100%"
    }
  },

  "flex-layout.row#product-main": {
    "props": {
      "colGap": 7,
      "rowGap": 7,
      "blockClass": "product-main",
      "marginBottom": 7,
      "paddingTop": 7,
      "paddingBottom": 9
    },
    "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
  },

  "stack-layout": {
    "children": [
      "flex-layout.row#product-image",
      "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": {
      "displayThumbnailsArrows": true
    }
  },
  "flex-layout.col#right-col": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0
    },
    "children": [
      "product-name",
      "product-description",
      "product-rating-summary",
      "product-identifier.product",
      "sku-selector",
      "product-assembly-options",
      "product-price#product-details",
      "flex-layout.row#buy-button",
      "availability-subscriber",
      "product-separator",
      "share#default"
    ]
  },

  "product-price#product-details": {
    "props": {
      "showInstallments": true,
      "showSavings": true
    }
  },

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

  "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 iodas-bookstore-theme/store/blocks/header/header.json from the iodas-bookstore-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": [
      "header-row#1-desktop",
      "header-row#2-desktop",
      "header-row#3-desktop"
    ]
  },

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

  "header-row#2-desktop": {
    "children": [
      "notification.bar#home"
    ],
    "props": {
      "fullWidth": "true"
    }
  },
  "notification.bar#home": {
    "props": {
      "content": "<strong>FRETE GRÁTIS</strong> para compras a partir de R$ 99,90"
    }
  },
  "header-row#3-desktop": {
    "children": [
      "logo#desktop",
      "menu#header-main2",
      "header-spacer",
      "search-bar",
      "login",
      "minicart"
    ],
    "props": {
      "blockClass": "main-header",
      "inverted": "true",
      "sticky": true
    }
  },
  "logo#desktop": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/LOGO_THEBOOKSTORE___fc0ce51f3ffa0ffc16f9d4e5402096e5.png",
      "width": "180"
    }
  },

  "minicart": {
    "blocks": [
      "product-summary"
    ],
    "props": {
      "type": "popup",
      "showRemoveButton": true,
      "showDiscount": true,
      "showSku": true,
      "labelMiniCartEmpty": "",
      "labelButtonFinishShopping": "Go to checkout",
      "enableQuantitySelector": true,
      "maxQuantity": 10,
      "labelClasses": "gray"
    }
  },

  "login": {
    "props": {
      "emailAndPasswordTitle": "LOG-IN",
      "accessCodeTitle": "Acess Code LOG-IN",
      "emailPraceholder": "e-mail",
      "passwordPlaceholder": "password",
      "showPasswordVerificationIntoTooltip": true
    }
  },

  "header-layout.mobile": {
    "children": [
      "header-row#1-mobile",
      "header-row#2-mobile"
    ]
  },
  "header-row#1-mobile": {
    "children": [
      "drawer",
      "logo#mobile",
      "header-spacer",
      "login",
      "minicart"
    ],
    "props": {
      "sticky": true,
      "blockClass": "main-header-mobile"
    }
  },
  "drawer": {
    "children": [
      "menu#drawer"
    ]
  },

  "menu#drawer": {
    "children": [
      "menu-item#livros-mobile",
      "menu-item#papelaria-mobile",
      "menu-item#ebooks-mobile",
      "menu-item#eletronicos-mobile",
      "menu-item#blog",
      "menu-item#black-friday"
    ],
    "props": {
      "orientation": "vertical"
    }
  },

  "logo#mobile": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/LOGO_THEBOOKSTORE___fc0ce51f3ffa0ffc16f9d4e5402096e5.png",
      "width": "180"
    }
  },
  "header-row#2-mobile": {
    "children": [
      "search-bar"
    ]
  }
}

```


[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 iodas-bookstore-theme/store/blocks/header/category-menu.json from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "menu-item#livros-mobile": {
    "blocks": [
      "submenu.accordion#livros"
    ],
    "props": {
      "type": "custom",
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/books/d",
        "tagTitle": "Livros",
        "text": "Livros"
      }
    }
  },
  "menu-item#papelaria-mobile": {
    "blocks": [
      "submenu.accordion#papelaria"
    ],
    "props": {
      "type": "custom",
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/office-supplies/d",
        "tagTitle": "Papelaria",
        "text": "Papelaria"
      }
    }
  },
  "menu-item#ebooks-mobile": {
    "blocks": [
      "submenu.accordion#ebooks"
    ],
    "props": {
      "type": "custom",
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/ebooks/d",
        "tagTitle": "Ebooks",
        "text": "Ebooks"
      }
    }
  },
  "menu-item#eletronicos-mobile": {
    "blocks": [
      "submenu.accordion#eletronicos"
    ],
    "props": {
      "type": "custom",
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/notebooks---pens/d",
        "tagTitle": "Eletrônicos",
        "text": "Eletrônicos"
      }
    }
  },
  "submenu.accordion#livros": {
    "children": [
      "menu#sub-livros-mobile"
    ]
  },
  "menu#sub-livros-mobile": {
    "children": [
      "menu-item#comics",
      "menu-item#travel",
      "menu-item#fiction"
    ],
    "props": {
      "orientation": "vertical"
    }
  },
  "menu-item#comics": {
    "props": {
      "type": "custom",
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/livros/comics",
        "tagTitle": "Quadrinhos",
        "text": "Quadrinhos"
      }
    }
  },
  "menu-item#travel": {
    "props": {
      "type": "custom",
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/livros/travel",
        "tagTitle": "Viagem",
        "text": "Viagem"
      }
    }
  },
  "menu-item#fiction": {
    "props": {
      "type": "custom",
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/livros/fiction",
        "tagTitle": "Ficção",
        "text": "Ficção"
      }
    }
  },
  "submenu.accordion#papelaria": {
    "children": [
      "menu#sub-papelaria-mobile"
    ]
  },
  "menu#sub-papelaria-mobile": {
    "children": [
      "menu-item#staplers",
      "menu-item#papers",
      "menu-item#clips"
    ],
    "props": {
      "orientation": "vertical"
    }
  },
  "menu-item#staplers": {
    "props": {
      "type": "custom",
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/office-supplies/fiction",
        "tagTitle": "Materias de Escritório",
        "text": "Materias de Escritório"
      }
    }
  },
  "menu-item#papers": {
    "props": {
      "type": "custom",
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/office-supplies/papers",
        "tagTitle": "Papéis",
        "text": "Papéis"
      }
    }
  },
  "menu-item#clips": {
    "props": {
      "type": "custom",
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/office-supplies/clips---fasteners",
        "tagTitle": "Materias de Escola",
        "text": "Materias de Escola"
      }
    }
  },
  "submenu.accordion#ebooks": {
    "children": [
      "menu#sub-ebooks-mobile"
    ]
  },
  "menu#sub-ebooks-mobile": {
    "children": [
      "menu-item#see-more"
    ],
    "props": {
      "orientation": "vertical"
    }
  },
  "menu-item#see-more": {
    "props": {
      "type": "custom",
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "tagTitle": "Ver todos",
        "text": "Ver todos"
      }
    }
  },
  "submenu.accordion#eletronicos": {
    "children": [
      "menu#sub-eletronicos-mobile"
    ]
  },
  "menu#sub-eletronicos-mobile": {
    "children": [
      "menu-item#notebooks",
      "menu-item#pencil",
      "menu-item#pens"
    ],
    "props": {
      "orientation": "vertical"
    }
  },
  "menu-item#notebooks": {
    "props": {
      "type": "custom",
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/notebooks--pens/notebooks",
        "tagTitle": "Notebooks",
        "text": "Notebooks"
      }
    }
  },
  "menu-item#pencil": {
    "props": {
      "type": "custom",
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/notebooks--pens/pencil-cases",
        "tagTitle": "Estojos",
        "text": "Estojos"
      }
    }
  },
  "menu-item#pens": {
    "props": {
      "type": "custom",
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/notebooks--pens/pens",
        "tagTitle": "Canetas",
        "text": "Canetas"
      }
    }
  }
}

```


[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 iodas-bookstore-theme/store/blocks/header/main-menu.json from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "menu#header-main2": {
    "children": [
      "menu-item#livros",
      "menu-item#papelaria",
      "menu-item#ebooks",
      "menu-item#eletronicos",
      "menu-item#blog",
      "menu-item#black-friday"
    ]
  },
  "menu-item#livros": {
    "blocks": [
      "submenu#livros"
    ],
    "props": {
      "id": "menu-item-livros",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/books/d",
        "noFollow": false,
        "tagTitle": "Livros",
        "text": "Livros"
      }
    }
  },
  "submenu#livros": {
    "children": [
      "flex-layout.row#submenu-livros"
    ],
    "props": {
      "width": "auto"
    }
  },
  "flex-layout.row#submenu-livros": {
    "children": [
      "flex-layout.col#submenu-menu-livros",
      "flex-layout.col#submenu-image-livros"
    ]
  },
  "flex-layout.col#submenu-menu-livros": {
    "children": [
      "menu#sub-livros-mobile"
    ]
  },
  "flex-layout.col#submenu-image-livros": {
    "children": [
      "image#submenu-image-livros"
    ],
    "props": {
      "horizontalAlign": "right"
    }
  },
  "image#submenu-image-livros": {
    "props": {
      "maxWidth": "300px",
      "src": "https://i.pinimg.com/originals/2c/fc/93/2cfc93d7665f5d7728782700e50596e3.png"
    }
  },

  "submenu#papelaria": {
    "children": [
      "flex-layout.row#submenu-papelaria"
    ]
  },
  "flex-layout.row#submenu-papelaria": {
    "children": [
      "flex-layout.col#submenu-menu-papelaria",
      "flex-layout.col#submenu-image-papelaria"
    ]
  },
  "flex-layout.col#submenu-menu-papelaria": {
    "children": [
      "menu#sub-papelaria-mobile"
    ]
  },
  "flex-layout.col#submenu-image-papelaria": {
    "children": [
      "image#submenu-image-papelaria"
    ],
    "props": {
      "horizontalAlign": "right"
    }
  },
  "image#submenu-image-papelaria": {
    "props": {
      "maxWidth": "300px",
      "src": "https://uploaddeimagens.com.br/images/002/472/310/full/papelaria.png?1572621942"
    }
  },

  "submenu#ebooks": {
    "children": [
      "flex-layout.row#submenu-ebooks"
    ]
  },
  "flex-layout.row#submenu-ebooks": {
    "children": [
      "flex-layout.col#submenu-menu-ebooks",
      "flex-layout.col#submenu-image-ebooks"
    ]
  },
  "flex-layout.col#submenu-menu-ebooks": {
    "children": [
      "menu#sub-ebooks-mobile"
    ]
  },
  "flex-layout.col#submenu-image-ebooks": {
    "children": [
      "image#submenu-image-ebooks"
    ],
    "props": {
      "horizontalAlign": "right"
    }
  },
  "image#submenu-image-ebooks": {
    "props": {
      "maxWidth": "300px",
      "src": "https://uploaddeimagens.com.br/images/002/472/318/full/ebook.png?1572622144"
    }
  },

  "submenu#eletronicos": {
    "children": [
      "flex-layout.row#submenu-eletronicos"
    ]
  },
  "flex-layout.row#submenu-eletronicos": {
    "children": [
      "flex-layout.col#submenu-menu-eletronicos",
      "flex-layout.col#submenu-image-eletronicos"
    ]
  },
  "flex-layout.col#submenu-menu-eletronicos": {
    "children": [
      "menu#sub-eletronicos-mobile"
    ]
  },
  "flex-layout.col#submenu-image-eletronicos": {
    "children": [
      "image#submenu-image-eletronicos"
    ],
    "props": {
      "horizontalAlign": "right"
    }
  },
  "image#submenu-image-eletronicos": {
    "props": {
      "maxWidth": "300px",
      "src": "https://uploaddeimagens.com.br/images/002/472/347/original/icon_game_video.png?1572622753"
    }
  },

  "menu#livros-categorias": {
    "props": {
      "orientation": "vertical"
    }
  },
  "menu-item#papelaria": {
    "blocks": [
      "submenu#papelaria"
    ],
    "props": {
      "id": "menu-item-papelaria",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/office-supplies/d",
        "noFollow": false,
        "tagTitle": "Papelaria",
        "text": "Papelaria"
      }
    }
  },
  "menu-item#ebooks": {
    "blocks": [
      "submenu#ebooks"
    ],
    "props": {
      "id": "menu-item-ebooks",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/ebooks/d",
        "noFollow": false,
        "tagTitle": "Ebooks",
        "text": "Ebooks"
      }
    }
  },
  "menu-item#eletronicos": {
    "blocks": [
      "submenu#eletronicos"
    ],
    "props": {
      "id": "menu-item-eletronicos",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/notebooks---pens/d",
        "noFollow": false,
        "tagTitle": "Eletrônicos",
        "text": "Eletrônicos"
      }
    }
  },
  "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#black-friday": {
    "props": {
      "id": "menu-item-black-friday",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/blackfriday",
        "noFollow": false,
        "tagTitle": "Black Friday",
        "text": "Black Friday"
      }
    }
  }
}

```


[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 iodas-bookstore-theme/store/blocks/header/top-menu.json from the iodas-bookstore-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"
      }
    }
  },
  "menu-item#about-us": {
    "props": {
      "id": "menu-item-about-us",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/about-us",
        "noFollow": false,
        "tagTitle": "about-us",
        "text": "About Us"
      }
    }
  },
  "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 iodas-bookstore-theme/store/blocks/search-result/search.jsonc from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.search": {
    "blocks": ["search-result-layout"]
  },

  "store.search#brand": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "orderByField": "OrderByReleaseDateDESC",
        "hideUnavailableItems": true,
        "maxItemsPerPage": 10
      }
    }
  },

  "search-result-layout": {
    "blocks": [
      "search-result-layout.desktop",
      "search-result-layout.mobile",
      "search-not-found-layout"
    ]
  },

  "search-result-layout.desktop": {
    "children": [
      "flex-layout.row#searchbread",
      "flex-layout.row#searchtitle",
      "flex-layout.row#result"
    ],
    "props": {
      "pagination": "show-more",
      "mobileLayout": {
        "mode1": "small",
        "mode2": "normal"
      }
    }
  },
  "flex-layout.row#searchbread": {
    "children": ["breadcrumb.search"],
    "props": {
      "preserveLayoutOnMobile": true,
      "fullWidth": true
    }
  },
  "flex-layout.row#searchtitle": {
    "children": ["search-title.v2"]
  },
  "flex-layout.row#result": {
    "children": ["flex-layout.col#filter", "flex-layout.col#content"],
    "props": {
      "preventHorizontalStretch": true,
      "fullWidth": true
    }
  },
  "flex-layout.col#filter": {
    "children": ["filter-navigator.v3"],
    "props": {
      "blockClass": "filterCol"
    }
  },
  "flex-layout.col#content": {
    "children": [
      "flex-layout.row#searchinfo",
      "flex-layout.row#fetchprevious",
      "flex-layout.row#products",
      "flex-layout.row#fetchmore"
    ],
    "props": {
      "width": "grow"
    }
  },
  "flex-layout.row#searchinfo": {
    "children": ["flex-layout.col#productCount", "flex-layout.col#orderby"]
  },
  "flex-layout.col#productCount": {
    "children": ["total-products.v2"],
    "props": {
      "blockClass": "productCountCol"
    }
  },
  "flex-layout.col#orderby": {
    "children": ["order-by.v2"],
    "props": {
      "blockClass": "orderByCol"
    }
  },
  "flex-layout.row#fetchprevious": {
    "props": {
      "marginBottom": 3
    },
    "children": ["search-fetch-previous"]
  },
  "flex-layout.row#fetchmore": {
    "props": {
      "marginTop": 3
    },
    "children": ["search-fetch-more"]
  },
  "flex-layout.row#products": {
    "children": ["search-content"]
  },
  "search-content": {
    "blocks": ["gallery", "not-found"]
  },

  "search-result-layout.mobile": {
    "children": [
      "flex-layout.row#searchinfomobile",
      "flex-layout.row#searchbread",
      "flex-layout.row#productCountMobile",
      "flex-layout.row#contentmobile"
    ],
    "props": {
      "pagination": "show-more",
      "mobileLayout": {
        "mode1": "small",
        "mode2": "normal"
      }
    }
  },
  "flex-layout.row#contentmobile": {
    "children": ["search-content"],
    "props": {
      "preserveLayoutOnMobile": true
    }
  },

  "flex-layout.row#searchinfomobile": {
    "children": [
      "flex-layout.col#orderByMobile",
      "flex-layout.col#filterMobile",
      "flex-layout.col#switcherMobile"
    ],
    "props": {
      "preserveLayoutOnMobile": true,
      "colSizing": "auto",
      "colJustify": "around"
    }
  },

  "flex-layout.col#orderByMobile": {
    "children": ["order-by.v2"],
    "props": {
      "blockClass": "orderByMobileCol"
    }
  },

  "flex-layout.row#productCountMobile": {
    "children": ["total-products.v2"],
    "props": {
      "blockClass": "productCountMobileRow"
    }
  },

  "flex-layout.col#filterMobile": {
    "children": ["filter-navigator.v3"],
    "props": {
      "blockClass": "filterMobileCol"
    }
  },
  "flex-layout.col#switcherMobile": {
    "children": ["search-layout-switcher"],
    "props": {
      "blockClass": "switcherMobileCol"
    }
  },
  "search-not-found-layout": {
    "children": ["flex-layout.row#searchbread", "flex-layout.row#notfound"]
  },

  "flex-layout.row#notfound": {
    "children": ["not-found"],
    "props": {
      "fullWidth": true
    }
  },

  "breadcrumb": {
    "props": {
      "showOnMobile": true
    }
  },

  "gallery": {
    "blocks": ["product-summary.shelf"]
  },

  "carousel#store-search": {
      "props": {
        "autoplaySpeed": 5,
        "autoplay": true,
        "banners": [
            {
                "image": "https://files.slack.com/files-pri/T02BCPD0X-FPPLM59QS/banner_departamento_livro.png"
            }
        ],
        "height": 480,
        "showArrows": false,
        "showDots": false
      }
    }
}

```


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

[Assistant]
Here's the implementation:

```markdown
📢 Use this project, [contribute](https://github.com/vtex-apps/CHANGEME) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

# Kelkoo app

<!-- DOCS-IGNORE:start -->
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->
<!-- DOCS-IGNORE:end -->

Kelkoo first party app

## Configuration

It is possible to install in your store either by using App Store or the VTEX IO Toolbelt.

### Using VTEX App Store

1. Access the **Apps** section in your account's admin page and look for the Kelkoo box;
2. Then, click on the **Install** button;
3. You'll see a warning message about needing to enter the necessary configurations. Scroll down and type in your Kelkoo Shop ID and Kelkoo product country identifier in the `Kelkoo` field.
4. Click on **Save**.

### Using VTEX IO Toolbelt

1. [Install](https://vtex.io/docs/recipes/development/installing-an-app/) the `vtex.kelkoo@1.x` app. You can confirm that the app has now been installed by running `vtex ls` again.
2. Access the **Apps** section in your account's admin page and look for the Kelkoo box. Once you find it, click on the box.
3. Fill in the `Kelkoo` field with your Kelkoo Shop ID and Kelkoo product country identifier.
4. Click on **Save**.

<!-- DOCS-IGNORE:start -->
## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!
<!-- DOCS-IGNORE:end -->

```


[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 kelkoo/react/index.tsx from the kelkoo VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { canUseDOM } from 'vtex.render-runtime'

import { PixelMessage } from './typings/events'

export function handleEvents(e: PixelMessage) {
  switch (e.data.eventName) {
    case 'vtex:orderPlaced': {
      const { transactionId: orderId, transactionTotal: orderValue } = e.data

      window._kkstrack = {
        ...window._kkstrack,
        orderValue: orderValue.toString(),
        orderId,
      }

      const s = document.createElement('script')

      s.type = 'text/javascript'
      s.async = true
      s.src = 'https://s.kk-resources.com/ks.js'

      // eslint-disable-next-line prefer-destructuring
      const x = document.getElementsByTagName('script')[0]

      x.parentNode?.insertBefore(s, x)

      break
    }

    default: {
      break
    }
  }
}

if (canUseDOM) {
  window.addEventListener('message', handleEvents)
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/graphql": "^14.5.0",
    "@types/jest": "^25.1.5",
    "@types/node": "^13.11.0",
    "@types/react": "^16.9.31",
    "@types/react-intl": "^3.0.0",
    "@vtex/test-tools": "^3.1.0",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.6.8",
    "graphql": "^14.5.4",
    "react-intl": "^3.11.0",
    "typescript": "3.8.3"
  },
  "version": "1.0.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 kelkoo/store/interfaces.json from the kelkoo VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "pixel.kelkoo": {
    "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 kelkoo/react/typings/events.d.ts from the kelkoo VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface PixelMessage extends MessageEvent {
  data:
    | ProductViewData
    | ProductClickData
    | OrderPlacedData
    | OrderPlacedTrackedData
    | PageViewData
    | ProductImpressionData
    | AddToCartData
    | RemoveToCartData
    | CartChangedData
    | HomePageInfo
    | ProductPageInfoData
    | SearchPageInfoData
    | UserData
    | CartIdData
}

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

export interface PageInfoData extends EventData {
  event: 'pageInfo'
  eventName: 'vtex:pageInfo'
  accountName: string
  pageTitle: string
  pageUrl: string
}

export interface UserData extends PageInfoData {
  eventType: 'userData'
  eventName: 'vtex:userData'
  firstName?: string
  lastName?: string
  document?: string
  id?: string
  email?: string
  phone?: string
  isAuthenticated: boolean
}

export interface CartIdData extends PageInfoData {
  eventType: 'cartId'
  eventName: 'vtex:cartId'
  cartId: string
}

export interface HomePageInfo extends PageInfoData {
  eventType: 'homeView'
}

export interface ProductPageInfoData extends PageInfoData {
  eventType: 'productPageInfo'
}

export interface SearchPageInfoData extends PageInfoData {
  eventType:
    | 'internalSiteSearchView'
    | 'categoryView'
    | 'departmentView'
    | 'emptySearchView'
  category?: CategoryMetaData
  department?: DepartmentMetaData
  search?: SearchMetaData
}

interface CategoryMetaData {
  id: string
  name: string
}

interface DepartmentMetaData {
  id: string
  name: string
}

interface SearchMetaData {
  term: string
  category: CategoryMetaData
  results: number
}

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 CartChangedData extends EventData {
  event: 'cartChanged'
  eventName: 'vtex:cartChanged'
  items: CartItem[]
}

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

export interface OrderPlacedTrackedData extends Order, EventData {
  event: 'orderPlacedTracked'
  eventName: 'vtex:orderPlacedTracked'
}

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

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

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

export interface CartData extends EventData {
  event: 'cart'
  eventName: 'vtex:cart'
  orderForm: OrderForm
}

interface CartItem {
  brand: string
  ean: string
  category: string
  detailUrl: string
  imageUrl: string
  name: string
  price: number
  productId: string
  productRefId: string
  quantity: number
  seller: string
  sellerName: string
  skuId: string
  variant: string
}

export interface OrderForm {
  id: string
  items: CartItem[]
}

export interface Order {
  accountName: string
  corporateName: string
  coupon: string
  currency: string
  openTextField: string
  orderGroup: string
  salesChannel: string
  visitorAddressCity: string
  visitorAddressComplement: string
  visitorAddressCountry: string
  visitorAddressNeighborhood: string
  visitorAddressNumber: string
  visitorAddressPostalCode: string
  visitorAddressState: string
  visitorAddressStreet: string
  visitorContactInfo: string[]
  visitorContactPhone: string
  visitorType: string
  transactionId: string
  transactionDate: string
  transactionAffiliation: string
  transactionTotal: number
  transactionShipping: number
  transactionSubtotal: number
  transactionDiscounts: number
  transactionTax: number
  transactionCurrency: string
  transactionPaymentType: PaymentType[]
  transactionShippingMethod: ShippingMethod[]
  transactionLatestShippingEstimate: Date
  transactionProducts: ProductOrder[]
  transactionPayment: {
    id: string
  }
}

export interface Impression {
  product: ProductSummary
  position: number
}

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

export interface ShippingMethod {
  itemId: string
  selectedSla: string
}

export 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
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  components: any[]
  measurementUnit: string
  unitMultiplier: number
}

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

export interface Product {
  brand: string
  brandId: string
  categories: string[]
  categoryId: string
  categoryTree: Array<{ id: string; name: string }>
  detailUrl: string
  items: Item[]
  linkText: string
  productId: string
  productName: string
  productReference: string
  selectedSku: Item
}

export interface Item {
  itemId: string
  name: string
  ean: string
  referenceId: { Key: string; Value: string }
  imageUrl: string
  sellers: Seller[]
}

export interface ProductSummary {
  brand: string
  brandId: string
  categories: string[]
  items: ItemSummary[]
  linkText: string
  productId: string
  productName: string
  productReference: string
  sku: ItemSummary
}

interface ItemSummary {
  itemId: string
  ean: string
  name: string
  referenceId: { Key: string; Value: string }
  seller: Seller
  sellers: Seller[]
}

export interface Seller {
  commertialOffer: CommertialOffer
  sellerId: string
  sellerName: string
}

export interface CommertialOffer {
  Price: number
  ListPrice: number
  AvailableQuantity: 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 kelkoo/react/typings/vtex.render-runtime.d.ts from the kelkoo 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 kelkoo/react/typings/global.d.ts from the kelkoo VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Window extends Window {
  _kkstrack: {
    merchantInfo: Array<{ country: string; merchantId: string }>
    orderValue: string
    orderId: 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 konduto-antifraud/react/package.json from the konduto-antifraud VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "author": "VTEX",
  "license": "ISC",
  "devDependencies": {
    "@types/jest": "^24.0.12",
    "@types/node": "^12.0.0",
    "@types/react": "^16.8.16",
    "@types/react-intl": "^2.3.17",
    "@vtex/test-tools": "^0.3.2",
    "apollo-client": "^2.5.1",
    "eslint": "^5.16.0",
    "eslint-config-vtex": "^10.1.0",
    "prettier": "^1.17.1",
    "typescript": "3.5.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 konduto-antifraud/react/index.ts from the konduto-antifraud VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { canUseDOM } from 'vtex.render-runtime'
import { PixelMessage } from './typings/events'

function setKondutoFingerPrint(category_page: string) {
  var kdtFP = Konduto.getVisitorID()
  if (vtex) {
    vtex.deviceFingerprint = kdtFP
    Konduto.sendEvent('page', category_page)
  }
}

function handlePageEvent(eventType: string) {
  switch (eventType) {
    case 'homeView': {
      setKondutoFingerPrint('home')
      break
    }
    case 'productView': {
      setKondutoFingerPrint('product')
      break
    }
    case 'departmentView':
    case 'categoryView': {
      setKondutoFingerPrint('category')
      break
    }
    case 'accountView': {
      setKondutoFingerPrint('account')
      break
    }
    case 'internalSiteSearchView': {
      setKondutoFingerPrint('search')
      break
    }
  }
}

function handleAccountEvent(eventName: string) {
  switch (eventName) {
    case 'accountCreation': {
      setKondutoFingerPrint('account_creation')
      break
    }
    case 'passwordReset': {
      setKondutoFingerPrint('password_reset')
      break
    }
  }
}

export function handleEvents(e: PixelMessage) {
  const {
    data: { eventName, eventType },
  } = e
  var period = 300
  var limit = 20 * 1e3
  var nTry = 0
  var intervalID = setInterval(function() {
    var clear = limit / period <= ++nTry
    if (typeof Konduto !== 'undefined' && Konduto.sendEvent) {
      handlePageEvent(eventType)
      handleAccountEvent(eventName)
      clear = true
    }
    if (clear) {
      clearInterval(intervalID)
    }
  }, period)
}

if (canUseDOM) window.addEventListener('message', handleEvents)

```


[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 konduto-antifraud/store/interfaces.json from the konduto-antifraud VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "pixel.konduto": {
    "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 konduto-antifraud/react/typings/events.d.ts from the konduto-antifraud VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface PixelMessage {
  data: EventData
}
export interface EventData {
  event: string
  eventName: string
  eventType: string
  currency: 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 konduto-antifraud/react/typings/vtex.render-runtime.d.ts from the konduto-antifraud VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* Typings for `render-runtime` */
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 konduto-antifraud/react/typings/global.d.ts from the konduto-antifraud VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* Typings for `Konduto` */
export interface Konduto {
  sendEvent: Function
  getVisitorID: Function
}
export interface VTEX {
  deviceFingerprint: string
}

declare global {
  const Konduto: Konduto
  const vtex: VTEX
}

```


[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 onesignal/node/service.json from the onesignal VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "memory": 256,
  "ttl": 10,
  "timeout": 2,
  "minReplicas": 2,
  "maxReplicas": 4,
  "workers": 1,
  "routes": {
    "oneSignalSDKWorker": {
      "path": "/OneSignalSDKWorker.js",
      "public": true
    },
    "oneSignalSDKUpdaterWorker": {
      "path": "/OneSignalSDKUpdaterWorker.js",
      "public": 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 onesignal/node/package.json from the onesignal VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "co-body": "^6.0.0",
    "ramda": "^0.25.0"
  },
  "devDependencies": {
    "@types/co-body": "^0.0.3",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.0.0",
    "@types/ramda": "^0.27.12",
    "@vtex/api": "6.41.0",
    "@vtex/test-tools": "^3.0.0",
    "@vtex/tsconfig": "^0.4.4",
    "typescript": "3.9.7"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty"
  },
  "version": "1.1.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 onesignal/node/index.ts from the onesignal VTEX app.

[Assistant]
Here's the implementation:

```typescript
import {
  ClientsConfig,
  LRUCache,
  method,
  Service,
  ServiceContext,
  Cached,
} from '@vtex/api'

const TIMEOUT_MS = 800

// Create a LRU memory cache for the Status client.
// The @vtex/api HttpClient respects Cache-Control headers and uses the provided cache.
const memoryCache = new LRUCache<string, Cached>({ max: 5000 })

metrics.trackCache('status', memoryCache)

// This is the configuration for clients available in `ctx.clients`.
const clients: ClientsConfig = {
  // We pass our custom implementation of the clients bag, containing the Status client.
  options: {
    // All IO Clients will be initialized with these options, unless otherwise specified.
    default: {
      retries: 2,
      timeout: TIMEOUT_MS,
    },
    // This key will be merged with the default options and add this cache to our Status client.
    oneSignalSDKWorker: {
      memoryCache,
    },
    oneSignalSDKUpdaterWorker: {
      memoryCache,
    },
  },
}

async function worker(ctx: ServiceContext, next: () => Promise<unknown>) {
  ctx.status = 200
  ctx.set('content-type', 'application/javascript; charset=utf-8')
  ctx.set('cache-control', 'public, max-age=7200')
  ctx.body = `importScripts('https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js');`
  await next()
}

// Export a service that defines route handlers and client options.
export default new Service({
  clients,
  routes: {
    oneSignalSDKWorker: method({
      GET: [worker],
    }),
    oneSignalSDKUpdaterWorker: method({
      GET: [worker],
    }),
  },
})

```


[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 onesignal/service-workers/header.js from the onesignal VTEX app.

[Assistant]
Here's the implementation:

```javascript
function oneSignalSWHeader() {
  // eslint-disable-next-line no-undef
  importScripts(`https://cdn.onesignal.com/sdks/OneSignalSDKWorker.js`)
}

export default oneSignalSWHeader

```


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

[Assistant]
Here's the implementation:

```markdown
📢 Use this project, [contribute](https://github.com/vtex-apps/overlay-layout) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

# Overlay Layout

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->

The Overlay Layout app provides blocks that help you create a Dropdown, Select or a Tooltip component.

![overlay-layout](https://user-images.githubusercontent.com/52087100/78159134-881f2100-7418-11ea-94e1-d70343cd021f.gif)

*Example of a [Locale Switcher](https://vtex.io/docs/components/all/vtex.locale-switcher@0.5.5) using the Overlay Layout*.

## Configuration

1. Add the Overlay Layout app to your theme's dependencies in the `manifest.json`, for example:

```jsonc
{
  "dependencies": {
    "vtex.overlay-layout": "0.x"
  }
}
```

Now you can use the two blocks exported by the app:

Block name | Description |
| --------------------| -------- |
| `overlay-trigger` | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) Declares a renderable children block responsible for triggering the `overlay-layout` content. |
| `overlay-layout` | ![https://img.shields.io/badge/-Mandatory-red](https://img.shields.io/badge/-Mandatory-red) Declares a renderable children block responsible for building the   |

2.  In any desired theme template, add the `overlay-trigger` and then declare it using a block of your choosing and the `overlay-layout`:

```jsonc
{
  "overlay-trigger": {
    "children": [
      "rich-text#question",
      "overlay-layout"
    ]
  },
```

*Notice that the* `overlay-trigger` i*s not rendered. Following the example stated above, the* `rich-text` *block will be the one rendered and responsible for effectively triggering the Overlay Layout content (defined by the children block of* `overlay-layout`*).*

### `overlay-trigger` props

| Prop name | Type | Description | Default value |
| --- | --- | --- | --- |
| `trigger` | `Enum` | Defines whether the `popover-layout` will be opened by click (`click`) or hover (`hover`).| `click` |

3. Configure the chosen trigger [block](https://vtex.io/docs/apps/all) and declare the `overlay-layout` using its props. For example:

```jsonc
  "rich-text#question": {
    "props": {
      "text": "**Click to open the Overlay Layout**",
      "blockClass": "question"
    }
  },
  "overlay-layout": {
    "props": {
      "placement": "left"
    },
    "children": [
      "rich-text#link"
    ]
  },
  "rich-text#link": {
    "props": {
      "text": "\n**Reach us at**\nwww.vtex.com.br",
      "blockClass": "link"
    }
  }
}
```

*The* `overlay-layout` *defines which block will be rendered in order to build the Overlay Layout content. This means that you will have to pass to it a children block to be rendered.*

### `overlay-layout` props

| Prop name | Type | Description | Default value |
| --- | --- | --- | --- |
| `placement` | `Enum` | Defines the Overlay Layout content placement when it is triggered according to the Trigger component positioning. Possible values are: `bottom`, `left`, `right` or `top`.  If there is no page space in the placement that you choose, it will fit in a fallback position. | `bottom` |
| `scrollBehavior` | `Enum` | Defines the Overlay Layout content behavior when users try to scroll the page. Possible values are: `lock-page-scroll` (in which users can't scroll), `close-on-scroll` (the block is closed when users start scrolling) or `default` (Scroll does not affect the Overlay Layout content). | `default` |
| `backdrop` | `Enum` | Once the Overlay Layout content is rendered, it defines whether a backdrop overlay will be displayed (`visible`) or not (`none`). When set as `visible`, the backdrop will close Overlay Layout content when clicked on. Otherwise, the content will be closed only if any component from the page is clicked on. | `none` |
| `showArrow`  | `Boolean` | Whether an arrow pointing to the `overlay-trigger` component should be displayed on UI(`true`) or not (`false`). | `false` |
| `offsets` | `Object` | Defines the `overlay-layout` component positioning when compared to the `overlay-trigger` (unit used is `px`). For more details, check out the `offsets` object table stated below. | `{ skidding: 0, distance: 0 }` |

- **`offsets` object:**

| Prop | Type | Description |
| --- | --- | --- |
| `skidding` | `Number` | Defines the `overlay-layout` component positioning side by side with the `overlay-trigger`. |
| `distance` | `Number` | Defines the distance between the `overlay-layout` and the `overlay-trigger` components in the UI. A positive number places the `overlay-layout` component farther, while a negative number lets it overlap the `overlay-trigger`. |

## Customization

In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).

| CSS Handles |
| --- |
| `arrow` |
| `container` |
| `outsideClickHandler` |
| `paper` |
| `popper` |
| `popperArrow` |
| `trigger` |

## Contributors ✨

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!

```


[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 overlay-layout/react/styles.css from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```css
.backdropContainer {
  top: 0;
  left: 0;
  z-index: -1;
  width: 300vw;
  height: 300vh;
  position: fixed;
  touch-action: none;
  transform: translate(-100vw, -100vh);
}

.backdrop {
  opacity: 0.5;
  height: 100%;
}

.dropdown {
  z-index: 900;
}

.arrow {
  border-width: 1em;
  border-style: solid;
  position: absolute;
  box-sizing: border-box;
  font-size: 10px;
}

.popperArrow[data-popper-placement="bottom"] .arrow {
  border-color: transparent transparent currentColor transparent;
  top: -1.7em;
}

.popperArrow[data-popper-placement="top"] .arrow {
  border-color: currentColor transparent transparent transparent;
  bottom: -1.7em;
}

.popperArrow[data-popper-placement="right"] .arrow {
  border-color: transparent currentColor transparent transparent;
  left: -1.7em;
}

.popperArrow[data-popper-placement="left"] .arrow {
  border-color: transparent transparent transparent currentColor;
  right: -1.7em;
}

```


[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 overlay-layout/react/OverlayContext.tsx from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { createContext, useReducer, useContext } from 'react'

import { TriggerMode } from './OverlayTrigger'

interface State {
  open: boolean
  containerRef?: React.RefObject<HTMLElement> | null
  triggerMode: TriggerMode
  exited: boolean
}

const DEFAULT_STATE: State = {
  open: false,
  exited: false,
  containerRef: null,
  triggerMode: 'click',
}

interface OpenAction {
  type: 'OPEN_OVERLAY'
}

interface CloseAction {
  type: 'CLOSE_OVERLAY'
}

interface SetExitedAction {
  type: 'SET_EXITED'
  payload: { exited: boolean }
}

interface SetContainerRefAction {
  type: 'SET_CONTAINER_REF'
  payload: { containerRef: React.RefObject<HTMLElement> }
}

interface SetTriggerModeAction {
  type: 'SET_TRIGGER_MODE'
  payload: { triggerMode: TriggerMode }
}

type Action =
  | OpenAction
  | CloseAction
  | SetExitedAction
  | SetTriggerModeAction
  | SetContainerRefAction
type Dispatch = (action: Action) => void

// eslint-disable-next-line @typescript-eslint/no-empty-function
const noop = () => {}
const OverlayStateContext = createContext<State>(DEFAULT_STATE)
const OverlayDispatchContext = createContext<Dispatch>(noop)

function overlayContextReducer(state: State = DEFAULT_STATE, action: Action) {
  switch (action.type) {
    case 'OPEN_OVERLAY':
      return {
        ...state,
        open: true,
      }
    case 'CLOSE_OVERLAY':
      return {
        ...state,
        open: false,
      }
    case 'SET_CONTAINER_REF':
      return {
        ...state,
        containerRef: action.payload.containerRef,
      }
    case 'SET_TRIGGER_MODE':
      return {
        ...state,
        triggerMode: action.payload.triggerMode,
      }
    case 'SET_EXITED': {
      return {
        ...state,
        exited: action.payload.exited,
      }
    }
    default:
      return state
  }
}

export const OverlayContextProvider: React.FC = ({ children }) => {
  const [state, dispatch] = useReducer(overlayContextReducer, DEFAULT_STATE)

  return (
    <OverlayStateContext.Provider value={state}>
      <OverlayDispatchContext.Provider value={dispatch}>
        {children}
      </OverlayDispatchContext.Provider>
    </OverlayStateContext.Provider>
  )
}

export function useOverlayDispatch() {
  return useContext(OverlayDispatchContext)
}

export function useOverlayState() {
  const context = useContext(OverlayStateContext)
  if (typeof context === 'undefined') {
    throw Error('useOverlayState must be used within a OverlayStateContext')
  }

  return context
}

export default {
  useOverlayState,
  useOverlayDispatch,
}

```


[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 overlay-layout/react/Backdrop.tsx from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useEffect, useRef } from 'react'
import classnames from 'classnames'
import { useCssHandles } from 'vtex.css-handles'
import { TransitionProps } from 'react-transition-group/Transition'

import styles from './styles.css'
import Fade from './components/Animations/Fade'
import ownerDocument from './modules/ownerDocument'

export type BackdropMode = 'display' | 'clickable' | 'none'

interface Classes {
  backdropContainer: string
  backdrop: string
}

interface Props {
  open: boolean
  exited: boolean
  classes?: Partial<Classes>
  transitionDuration?: TransitionProps['timeout']
  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
}

function restoreOverflowX(
  valueRef: React.MutableRefObject<string | undefined>,
  body: HTMLElement
) {
  if (valueRef.current) {
    body.style.overflowX = valueRef.current
    valueRef.current = undefined
  } else {
    body.style.removeProperty('overflow-x')
  }
}

const CSS_HANDLES = ['backdrop', 'backdropContainer'] as const

const Backdrop: React.FC<Props> = props => {
  const {
    open,
    exited,
    onClick,
    children,
    classes = {},
    transitionDuration,
  } = props
  const rootRef = useRef(null)
  const overflowX = useRef<string>()
  const handles = useCssHandles(CSS_HANDLES)

  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
    if (onClick) {
      onClick(e)
    }
  }

  useEffect(() => {
    let body: HTMLElement
    if (rootRef.current) {
      body = ownerDocument(rootRef.current).body
      if (open) {
        if (body.style.overflowX) {
          overflowX.current = body.style.overflowX
        }
        body.style.overflowX = 'hidden'
      } else if (exited) {
        restoreOverflowX(overflowX, body)
      }
    }

    return () => {
      if (!open && body) {
        restoreOverflowX(overflowX, body)
      }
    }
  }, [open, exited])

  if (!open && exited) {
    return null
  }

  const containerClasses = classnames(
    handles.backdropContainer,
    classes.backdropContainer,
    styles.backdropContainer
  )

  const backdropClasses = classnames(
    handles.backdrop,
    classes.backdrop,
    styles.backdrop
  )

  return (
    <Fade in={open} timeout={transitionDuration}>
      <div className={containerClasses} ref={rootRef}>
        <div
          role="presentation"
          onClick={handleClick}
          className={backdropClasses}
        >
          {children}
        </div>
      </div>
    </Fade>
  )
}

export default React.memo(Backdrop)

```


[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 overlay-layout/react/BaseOverlay.tsx from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useCallback, useMemo, useEffect, useState } from 'react'
import classnames from 'classnames'
import { useCssHandles } from 'vtex.css-handles'
import { Placement as PopperPlacement } from '@popperjs/core'

import styles from './styles.css'
import Popper from './components/Popper'
import TrapFocus from './components/TrapFocus'
import Fade from './components/Animations/Fade'
import useEventCallback from './modules/useEventCallback'
import OutsideClickHandler from './components/OutsideClickHandler'
import { useOverlayState, useOverlayDispatch } from './OverlayContext'
import handleContainerStyle, { RestoreFn } from './modules/handleContainerStyle'

type TransitionComponentType = 'fade'

interface Offsets {
  distance: number
  skidding: number
}

interface Classes {
  arrow: string
  popper: string
  backdrop: string
  container: string
  popperArrow: string
  backdropContainer: string
  outsideClickHandler: string
}

interface Props
  extends React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
  > {
  showArrow?: boolean
  children: React.ReactNode
  classes?: Partial<Classes>
  offsets?: Partial<Offsets>
  placement?: PopperPlacement
  backdrop?: 'visible' | 'none'
  scrollBehavior?: 'lock-page-scroll' | 'close-on-scroll' | 'default'
  transitionComponent?: TransitionComponentType
}

function useTransition(option: TransitionComponentType) {
  return useMemo(() => {
    const lowerCaseOption = option.toLowerCase() as TransitionComponentType
    switch (lowerCaseOption) {
      case 'fade':
        return Fade
      default:
        return Fade
    }
  }, [option])
}

const CSS_HANDLES = [
  'arrow',
  'popper',
  'backdrop',
  'container',
  'popperArrow',
  'backdropContainer',
  'outsideClickHandler',
] as const

export default function BaseOverlay(props: Props) {
  const {
    ref,
    role,
    offsets,
    onClick,
    children,
    classes = {},
    backdrop = 'none',
    showArrow = false,
    placement = 'bottom',
    className: classNameProp,
    scrollBehavior = 'default',
    transitionComponent = 'fade',
    ...rest
  } = props
  const { open, containerRef, triggerMode } = useOverlayState()
  const dispatch = useOverlayDispatch()
  const handles = useCssHandles(CSS_HANDLES)
  const [arrowRef, setArrowRef] = useState<HTMLSpanElement | null>(null)
  const TransitionComponent = useTransition(transitionComponent)

  const handleClose = useCallback(
    (e: Event) => {
      const triggerClicked = containerRef?.current?.contains(
        e.target as Node | null
      )
      if (!triggerClicked) {
        dispatch({ type: 'CLOSE_OVERLAY' })
      }
    },
    [containerRef, dispatch]
  )

  const handleKeydown = useCallback(
    (e: React.KeyboardEvent<HTMLDivElement>) => {
      if (e.key !== 'Escape' || triggerMode !== 'click') {
        return
      }
      dispatch({ type: 'CLOSE_OVERLAY' })
    },
    [dispatch, triggerMode]
  )

  const closeOnScroll = useEventCallback((e: any) => {
    e.preventDefault()
    dispatch({ type: 'CLOSE_OVERLAY' })
  })

  useEffect(() => {
    let restore: RestoreFn | null = null
    if (open) {
      if (scrollBehavior === 'close-on-scroll') {
        window.addEventListener('scroll', closeOnScroll)
      } else if (scrollBehavior === 'lock-page-scroll') {
        restore = handleContainerStyle(window?.document.body)
      }
    }

    return () => {
      window.removeEventListener('scroll', closeOnScroll)
      if (restore) {
        restore()
      }
    }
  }, [closeOnScroll, scrollBehavior, open])

  const handleClick: React.MouseEventHandler<HTMLDivElement> = useCallback(
    e => {
      if (triggerMode === 'click') {
        // The Trigger works as a toggle, so if this event
        // go up to the Trigger it will close the Overlay
        e.stopPropagation()
      }

      if (onClick) {
        onClick(e)
      }
    },
    [onClick, triggerMode]
  )

  const popperClasses = useMemo(
    () => ({
      container: classes.popper,
      backdrop: classes.backdrop,
      popperArrow: classes.popperArrow,
      backdropContainer: classes.backdropContainer,
    }),
    [classes]
  )

  const containerClasses = classnames(
    handles.container,
    classNameProp,
    classes.container
  )
  const arrowClasses = classnames(handles.arrow, classes.arrow, styles.arrow)

  return (
    <Popper
      transition
      open={open}
      offsets={offsets}
      arrowEl={arrowRef}
      placement={placement}
      classes={popperClasses}
      anchorEl={containerRef?.current}
      backdrop={backdrop !== 'none' ? 'clickable' : 'none'}
    >
      {({ TransitionProps }: any) => (
        <OutsideClickHandler
          onOutsideClick={handleClose}
          className={classes.outsideClickHandler}
        >
          <TrapFocus open={open}>
            <TransitionComponent {...TransitionProps}>
              <div
                role={role}
                tabIndex={-1}
                onClick={handleClick}
                onKeyDown={handleKeydown}
                className={containerClasses}
                {...rest}
              >
                {showArrow && (
                  <span className={arrowClasses} ref={setArrowRef} />
                )}
                {children}
              </div>
            </TransitionComponent>
          </TrapFocus>
        </OutsideClickHandler>
      )}
    </Popper>
  )
}

```


[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 overlay-layout/react/OverlayLayout.tsx from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useMemo } from 'react'
import { Placement as PopperPlacement } from '@popperjs/core'

import BaseOverlay from './BaseOverlay'

type TransitionComponentType = 'fade'

interface Offsets {
  distance: number
  skidding: number
}

interface Props {
  role?: string
  showArrow?: boolean
  children: React.ReactNode
  offsets?: Partial<Offsets>
  placement?: PopperPlacement
  backdrop?: 'visible' | 'none'
  scrollBehavior?: 'lock-page-scroll' | 'close-on-scroll' | 'default'
  transitionComponent?: TransitionComponentType
}

export default function OverlayLayout(props: Props) {
  const classes = useMemo(
    () => ({
      arrow: 'c-on-base--inverted',
      backdrop: 'bg-base--inverted',
      container: 'outline-0 pv2 bg-base br bl bb bt b--muted-4 br2 w-100',
    }),
    []
  )
  return <BaseOverlay {...props} classes={classes} />
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "lint": "tsc --noEmit && eslint --quiet --fix --ext ts,tsx .",
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "@popperjs/core": "^2.0.5",
    "classnames": "^2.2.6",
    "consolidated-events": "^2.0.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-transition-group": "^4.3.0"
  },
  "devDependencies": {
    "@types/classnames": "^2.2.9",
    "@types/jest": "^25.1.4",
    "@types/react": "^16.8.22",
    "@types/react-transition-group": "^4.2.3",
    "@vtex/test-tools": "^3.0.0",
    "@vtex/tsconfig": "^0.3.0",
    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.2/public/@types/vtex.css-handles",
    "typescript": "3.8.3"
  },
  "version": "0.1.3"
}

```


[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 overlay-layout/react/OverlayTrigger.tsx from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import classnames from 'classnames'
import {
  useResponsiveValue,
  MaybeResponsiveInput,
} from 'vtex.responsive-values'

import BaseTrigger from './BaseTrigger'

export type TriggerMode = 'click' | 'hover' | 'none'

interface Props {
  children: React.ReactNode
  backdrop?: 'visible' | 'none'
  trigger: MaybeResponsiveInput<TriggerMode>
}

export default function OverlayTrigger(props: Props) {
  const { children, trigger: triggerProp = 'click' } = props
  const trigger = useResponsiveValue(triggerProp)
  const role = trigger === 'click' ? 'button' : undefined
  const containerClasses = classnames(
    'outline-0 bg-transparent bn pa0 dib bg-red',
    {
      pointer: trigger === 'click',
    }
  )

  return (
    <BaseTrigger
      role={role}
      tabIndex={0}
      style={{ zIndex: 2000 }}
      trigger={trigger}
      className={containerClasses}
    >
      {children}
    </BaseTrigger>
  )
}

```


[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 overlay-layout/react/BaseTrigger.tsx from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useEffect, useRef } from 'react'
import {
  useResponsiveValue,
  MaybeResponsiveInput,
} from 'vtex.responsive-values'
import classnames from 'classnames'
import { useCssHandles } from 'vtex.css-handles'

import {
  useOverlayState,
  useOverlayDispatch,
  OverlayContextProvider,
} from './OverlayContext'
import useForkRef from './modules/useForkRef'

export type TriggerMode = 'click' | 'hover' | 'none'

type TriggerElement = HTMLDivElement & HTMLLIElement

interface Props
  extends React.DetailedHTMLProps<
    React.HTMLAttributes<TriggerElement>,
    TriggerElement
  > {
  children: React.ReactNode
  tag?: 'div' | 'li'
  trigger?: MaybeResponsiveInput<TriggerMode>
}

const CSS_HANDLES = ['trigger'] as const

const BaseTrigger = React.forwardRef(function BaseTrigger(
  props: Props,
  ref: React.Ref<TriggerElement>
) {
  const {
    onClick,
    children,
    onMouseEnter,
    onMouseLeave,
    tag: Tag = 'div',
    className: classNameProp,
    trigger: triggerProp = 'click',
    ...rest
  } = props
  const trigger = useResponsiveValue(triggerProp)
  const dispatch = useOverlayDispatch()
  const { open } = useOverlayState()
  const handles = useCssHandles(CSS_HANDLES)
  const containerRef = useRef<TriggerElement>(null)
  const handleRef = useForkRef(containerRef, ref)
  const role = trigger === 'click' ? 'button' : undefined

  useEffect(() => {
    dispatch({
      type: 'SET_CONTAINER_REF',
      payload: { containerRef },
    })
  }, [dispatch, containerRef])

  useEffect(() => {
    dispatch({
      type: 'SET_TRIGGER_MODE',
      payload: { triggerMode: trigger },
    })
  }, [dispatch, trigger])

  const handleKeydown = (e: React.KeyboardEvent<TriggerElement>) => {
    if (e.key !== 'Enter' || trigger !== 'click') {
      return
    }

    e.stopPropagation()
    dispatch({ type: 'OPEN_OVERLAY' })
  }

  const handleClick: React.MouseEventHandler<TriggerElement> = e => {
    if (trigger === 'click') {
      // This is needed to block some parent element to use this event
      // to do some action (like open a Modal or change the url).
      // If you click in the Trigger you want to open the trigger only
      // nothing else.
      e.stopPropagation()
      e.preventDefault()

      if (open) {
        dispatch({ type: 'CLOSE_OVERLAY' })
      } else {
        dispatch({ type: 'OPEN_OVERLAY' })
      }
    }

    if (onClick) {
      onClick(e)
    }
  }
  const handleMouseEnter: React.MouseEventHandler<TriggerElement> = e => {
    if (trigger === 'hover') {
      dispatch({ type: 'OPEN_OVERLAY' })
    }

    if (onMouseEnter) {
      onMouseEnter(e)
    }
  }

  const handleMouseLeave: React.MouseEventHandler<TriggerElement> = e => {
    if (trigger === 'hover') {
      dispatch({ type: 'CLOSE_OVERLAY' })
    }

    if (onMouseLeave) {
      onMouseLeave(e)
    }
  }

  const className = classnames(handles.trigger, classNameProp)

  return (
    <Tag
      role={role}
      ref={handleRef}
      className={className}
      onClick={handleClick}
      onKeyDown={handleKeydown}
      onMouseEnter={handleMouseEnter}
      onMouseLeave={handleMouseLeave}
      {...rest}
    >
      {children}
    </Tag>
  )
})

const EnhancedTrigger = React.forwardRef(function EnhancedTrigger(
  props: Props,
  ref: React.Ref<TriggerElement>
) {
  return (
    <OverlayContextProvider>
      <BaseTrigger {...props} ref={ref} />
    </OverlayContextProvider>
  )
})

export default EnhancedTrigger

```


[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 overlay-layout/store/interfaces.json from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "overlay-trigger": {
    "component": "OverlayTrigger",
    "composition": "children"
  },
  "overlay-layout": {
    "component": "OverlayLayout",
    "composition": "children"
  }
}

```


[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 overlay-layout/react/typings/vtex.responsive-values.d.ts from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.responsive-values' {
  export type MaybeResponsiveInput<T> = T | ResponsiveInput<T>

  export const useResponsiveValue: <T>(prop: ResponsiveInput<T> | T) => T
  export const useResponsiveValues: (
    props: Record<string, MaybeResponsiveInput<any>>
  ) => Record<string, any>

  export interface ResponsiveInput<T> {
    mobile: T
    desktop: T
    tablet: T
  }
}

```


[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 overlay-layout/react/typings/vtex.render-runtime.d.ts from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.render-runtime' {
  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 overlay-layout/react/typings/consolidated-events.d.ts from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'consolidated-events' {
  export const addEventListener: <K extends keyof DocumentEventMap>(
    element: HTMLElement | Document | Window,
    type: K,
    listener: EventListenerOrEventListenerObject,
    options?: boolean | EventListenerOptions
  ) => () => void
}

```


[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 overlay-layout/react/typings/css.d.ts from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.css' {
  type CssFiles = Record<string, string | undefined>
  const CssObj: CssFiles
  export default CssObj
}

```


[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 overlay-layout/react/components/Portal.tsx from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
import ReactDOM from 'react-dom'
import React, { useState, forwardRef } from 'react'

import setRef from '../modules/setRef'
import useEnhancedEffect from '../modules/useEnhancedEffect'

export type ContainerType =
  | React.ReactInstance
  | (() => React.ReactInstance | null)
  | null

interface Props {
  children: React.ReactNode
  container?: ContainerType
}

export function getContainer(container?: ContainerType) {
  container = typeof container === 'function' ? container() : container
  // eslint-disable-next-line react/no-find-dom-node
  return ReactDOM.findDOMNode(container) as Element | null
}

const Portal = forwardRef(function Portal(props: Props, ref) {
  const { children, container } = props
  const [mountNode, setMountNode] = useState<Element | null>(null)

  useEnhancedEffect(() => {
    setMountNode(getContainer(container) || document.body)
  }, [container])

  useEnhancedEffect(() => {
    if (mountNode) {
      setRef(ref, mountNode)

      return () => {
        setRef(ref, null)
      }
    }

    return undefined
  }, [ref, mountNode])

  return mountNode ? ReactDOM.createPortal(children, mountNode) : mountNode
})

export default Portal

```


[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 overlay-layout/react/components/Popper.tsx from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, {
  useRef,
  useMemo,
  useState,
  useEffect,
  forwardRef,
  useCallback,
  MutableRefObject,
} from 'react'
import {
  createPopper,
  VirtualElement,
  ModifierArguments,
  State as PopperState,
  Instance as PopperInstance,
  Modifier as PopperModifier,
  Placement as PopperPlacementType,
} from '@popperjs/core'
import classnames from 'classnames'
import { useCssHandles } from 'vtex.css-handles'

import styles from '../styles.css'
import setRef from '../modules/setRef'
import useForkRef from '../modules/useForkRef'
import { useOverlayDispatch } from '../OverlayContext'
import Backdrop, { BackdropMode } from '../Backdrop'

interface Offsets {
  distance: number
  skidding: number
}

type AnchorElType =
  | null
  | VirtualElement
  | (() => VirtualElement)
  | React.RefObject<HTMLElement>

interface Classes {
  container: string
  popperArrow: string
  backdrop: string
  backdropContainer: string
}

interface Props
  extends React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
  > {
  role?: string
  open?: boolean
  transition?: boolean
  backdrop?: BackdropMode
  anchorEl?: AnchorElType
  children: React.ReactNode
  classes?: Partial<Classes>
  offsets?: Partial<Offsets>
  arrowEl?: HTMLElement | null
  placement?: PopperPlacementType
}

function getAnchorEl(anchorEl: React.ReactNode) {
  return typeof anchorEl === 'function' ? anchorEl() : anchorEl
}

const defaultOffsets: Offsets = {
  distance: 0,
  skidding: 0,
}

const CSS_HANDLES = ['popper', 'popperArrow'] as const

const Popper = forwardRef(function Popper(props: Props, ref) {
  const {
    arrowEl,
    anchorEl,
    children,
    open = false,
    classes = {},
    backdrop = 'none',
    transition = false,
    role = 'presentation',
    className: classNameProp,
    offsets: offsetsProp = defaultOffsets,
    placement: initialPlacement = 'bottom',
    ...rest
  } = props

  const tooltipRef = useRef<HTMLElement>(null)
  const ownRef = useForkRef(tooltipRef, ref)
  const dispatch = useOverlayDispatch()
  const handles = useCssHandles(CSS_HANDLES)
  const popperRef: MutableRefObject<PopperInstance | null> = useRef<
    PopperInstance
  >(null)
  const [placement, setPlacement] = useState(initialPlacement)
  const [exited, setExited] = useState(true)

  // It doesn't have a dependency array because it should update
  // after every render of react
  useEffect(() => {
    if (popperRef.current) {
      popperRef.current.update()
    }
  })

  const popperModifiers = useMemo(() => {
    const handlePopperUpdate = (data: ModifierArguments<{}>) => {
      setPlacement(data.state.placement)
    }

    const { distance, skidding } = {
      ...defaultOffsets,
      ...offsetsProp,
    }

    const modifiers: Partial<PopperModifier<unknown>>[] = [
      {
        name: 'afterWrite',
        enabled: true,
        phase: 'afterWrite',
        fn: handlePopperUpdate,
      },
      {
        name: 'preventOverflow',
        options: {
          mainAxis: true,
          altAxis: false,
          ...(window && { boundary: window }),
        },
      },
      {
        name: 'offset',
        options: {
          offset: [skidding, distance],
        },
      },
    ]

    if (arrowEl) {
      modifiers.push({
        name: 'arrow',
        options: {
          element: arrowEl,
        },
      })
    }

    return modifiers
  }, [arrowEl, offsetsProp])

  const handleOpen = useCallback(() => {
    if (!tooltipRef.current || !open) {
      return
    }

    if (popperRef.current) {
      popperRef.current.destroy()
    }

    const handlePopperFirstUpdate = (data: Partial<PopperState>) => {
      if (data.placement) {
        setPlacement(data.placement)
      }
    }

    const popper = createPopper(getAnchorEl(anchorEl), tooltipRef.current, {
      modifiers: popperModifiers,
      placement: initialPlacement,
      onFirstUpdate: handlePopperFirstUpdate,
    })
    popperRef.current = popper
  }, [open, anchorEl, initialPlacement, popperModifiers])

  const handleRef = useCallback(
    node => {
      setRef(ownRef, node)
      handleOpen()
    },
    [ownRef, handleOpen]
  )

  const handleEnter = () => {
    setExited(false)
    dispatch({ type: 'SET_EXITED', payload: { exited: false } })
  }

  const handleClose = () => {
    if (!popperRef.current) {
      return
    }

    popperRef.current.destroy()
  }

  const handleExited = () => {
    setExited(true)
    dispatch({ type: 'SET_EXITED', payload: { exited: true } })
    handleClose()
  }

  useEffect(() => {
    handleOpen()
  }, [handleOpen])

  useEffect(() => {
    return () => {
      handleClose()
    }
  }, [])

  useEffect(() => {
    if (!open && !transition) {
      handleClose()
    }
  }, [open, transition])

  const backdropClasses = useMemo(
    () => ({
      backdrop: classes.backdrop,
      backdropContainer: classes.backdropContainer,
    }),
    [classes]
  )

  if (!open && (!transition || exited)) {
    return null
  }

  const childProps: any = { placement }

  if (transition) {
    childProps.TransitionProps = {
      in: open,
      onEnter: handleEnter,
      onExited: handleExited,
    }
  }

  const popperArrowClasses = classnames(
    handles.popperArrow,
    classes.popperArrow,
    styles.popperArrow
  )

  const containerClasses = classnames(
    handles.popper,
    classNameProp,
    classes.container,
    styles.dropdown,
    {
      [popperArrowClasses]: Boolean(arrowEl),
    }
  )

  return (
    <div className={containerClasses} role={role} ref={handleRef} {...rest}>
      {typeof children === 'function' ? children(childProps) : children}
      {backdrop !== 'none' && (
        <Backdrop
          open={open}
          classes={backdropClasses}
          exited={!transition || exited}
        />
      )}
    </div>
  )
})

export default Popper

```


[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 overlay-layout/react/components/OutsideClickHandler.tsx from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useCallback, useRef, forwardRef, useEffect } from 'react'
import classnames from 'classnames'
import { useCssHandles } from 'vtex.css-handles'
import { addEventListener } from 'consolidated-events'

import setRef from '../modules/setRef'
import useForkRef from '../modules/useForkRef'

interface Props
  extends React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
  > {
  children: React.ReactNode
  disabled?: boolean
  useCapture?: boolean
  onOutsideClick?: EventListener
}

const CSS_HANDLES = ['outsideClickHandler'] as const

const OutsideClickHandler = forwardRef(function OutsideClickHandler(
  props: Props,
  ref
) {
  const {
    children,
    disabled = false,
    useCapture = true,
    onOutsideClick,
    className: classNameProp,
    ...rest
  } = props
  const rootRef = useRef<HTMLDivElement>(null)
  const ownRef = useForkRef(rootRef, ref)
  const handles = useCssHandles(CSS_HANDLES)
  const removeMouseUpRef = useRef<Function | null>()
  const removeMouseDownRef = useRef<Function | null>()
  const handleRef = useCallback(
    node => {
      setRef(ownRef, node)
    },
    [ownRef]
  )

  const handleMouseUp = useCallback(
    e => {
      const isDescendantOfRoot = rootRef.current?.contains(e.target)
      if (removeMouseUpRef.current) {
        removeMouseUpRef.current()
        removeMouseUpRef.current = null
      }

      if (!isDescendantOfRoot && onOutsideClick) {
        onOutsideClick(e)
      }
    },
    [onOutsideClick]
  )

  const handleMouseDown = useCallback(
    e => {
      const isDescendantOfRoot = rootRef.current?.contains(e.target)
      if (!isDescendantOfRoot) {
        if (removeMouseUpRef.current) {
          removeMouseUpRef.current()
          removeMouseDownRef.current = null
        }

        removeMouseUpRef.current = addEventListener(
          window?.document,
          'mouseup',
          handleMouseUp,
          { capture: useCapture }
        )
      }
    },
    [handleMouseUp, useCapture]
  )

  const addMouseDownEventListener = useCallback(
    (useCapture: boolean) => {
      removeMouseDownRef.current = addEventListener(
        window?.document,
        'mousedown',
        handleMouseDown,
        {
          capture: useCapture,
        }
      )
    },
    [handleMouseDown]
  )

  const removeEventListeners = () => {
    if (removeMouseUpRef.current) {
      removeMouseUpRef.current()
      removeMouseUpRef.current = null
    }

    if (removeMouseDownRef.current) {
      removeMouseDownRef.current()
      removeMouseDownRef.current = null
    }
  }

  useEffect(() => {
    if (disabled) {
      removeEventListeners()
    } else {
      if (removeMouseUpRef.current) {
        removeMouseUpRef.current()
        removeMouseUpRef.current = null
      }
      addMouseDownEventListener(useCapture)
    }

    return () => removeEventListeners()
  }, [addMouseDownEventListener, disabled, useCapture])

  const className = classnames(handles.outsideClickHandler, classNameProp)

  return (
    <div className={className} {...rest} ref={handleRef}>
      {children}
    </div>
  )
})

export default OutsideClickHandler

```


[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 overlay-layout/react/components/TrapFocus.tsx from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useEffect, useRef } from 'react'

import useForkRef from '../modules/useForkRef'
import ownerDocument from '../modules/ownerDocument'

interface Props {
  children: React.ReactElement
  open: boolean
}

const TrapFocus = function TrapFocus(props: Props) {
  const { children, open } = props
  const rootRef: React.MutableRefObject<HTMLElement | null> = useRef(null)
  /*
   * I'm just passing rootRef here because I know this will not receive
   * non class components as children that don't have fowardedRef
   */
  const handleRef = useForkRef(rootRef, (children as any)?.ref)

  useEffect(() => {
    if (!open) {
      return
    }

    /*
     * Popperjs probably always starts the element at the top of the screen.
     * So if I try to focus after it positions the element in the right place
     * the scroll will go to the top of the page. That's why I have to use
     * the requestAnimationFrame
     * */
    requestAnimationFrame(() => {
      // And we need two because of IE11
      requestAnimationFrame(() => {
        const doc = ownerDocument(rootRef.current)
        /*
         * We should only try to focus if no element that is inside of
         * rootRef is not the current focused element
         */
        if (!rootRef.current?.contains(doc.activeElement)) {
          if (!rootRef.current?.hasAttribute('tabIndex')) {
            ;(rootRef.current as any).setAttribute('tabIndex', -1)
          }
          rootRef.current?.focus()
        }
      })
    })
  }, [open])

  return <>{React.cloneElement(children, { ref: handleRef })}</>
}

export default TrapFocus

```


[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 overlay-layout/react/__tests__/index.test.tsx from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
describe('Orders List Scenarios', () => {
  it('should work', () => {
    expect(1).toBe(1)
  })
})

```


[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 overlay-layout/react/modules/getPaddingRight.ts from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
export default function getPaddingRight(node: HTMLElement) {
  return parseInt(window.getComputedStyle(node).paddingRight, 10) || 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 overlay-layout/react/modules/useEventCallback.ts from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { useRef, useCallback } from 'react'

import useEnhancedEffect from './useEnhancedEffect'

// https://github.com/facebook/react/issues/14099#issuecomment-440013892
export default function useEventCallback(fn: Function) {
  const ref = useRef(fn)

  useEnhancedEffect(() => {
    ref.current = fn
  })

  return useCallback((...args) => ref.current(...args), [])
}

```


[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 overlay-layout/react/modules/handleContainerStyle.ts from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
import isOverflowing from './isOverflowing'
import getScrollbarSize from './getScrollbarSize'
import getPaddingRight from './getPaddingRight'

interface RestoreStyle {
  value: string
  el: HTMLElement
  key: string
}

export type RestoreFn = () => void

export default function handleContainerStyle(
  container: HTMLElement
): RestoreFn {
  const restoreStyle: RestoreStyle[] = []

  if (isOverflowing(container)) {
    const scrollbarSize = getScrollbarSize()

    restoreStyle.push({
      value: container.style.paddingRight,
      key: 'padding-right',
      el: container,
    })

    container.style.paddingRight = `${getPaddingRight(container) +
      scrollbarSize}px`
  }

  // https://css-tricks.com/snippets/css/force-vertical-scrollbar/
  const parent = container.parentElement
  const scrollContainer =
    parent?.nodeName === 'HTML' &&
    window.getComputedStyle(parent).overflowY === 'scroll'
      ? parent
      : container
  restoreStyle.push({
    value: scrollContainer.style.overflow,
    key: 'overflow',
    el: scrollContainer,
  })
  scrollContainer.style.overflow = 'hidden'

  const restore = () => {
    restoreStyle.forEach(({ value, el, key }) => {
      if (!el) {
        return
      }

      if (value) {
        el.style.setProperty(key, value)
      } else {
        el.style.removeProperty(key)
      }
    })
  }

  return restore
}

```


[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 overlay-layout/react/modules/onwerWindow.ts from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
import ownerDocument from './ownerDocument'

type NodeType = HTMLElement | Document | null | undefined
export default function ownerWindow(node: NodeType) {
  const doc = ownerDocument(node as HTMLElement)
  return doc.defaultView || window
}

```