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

[Assistant]
Here's the implementation:

```markdown
# Deprecated - VTEX Wishlist app

:warning: This app is no longer maintained and shouldn't be used by any store.

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)

## Description

The Wishlist is a native app that any VTEX store can use. This app is responsible for managing the customer's lists of products.

:loudspeaker: **Disclaimer:** Don't fork this project; use, contribute, or open issue with your feature request.

## Release schedule

| Release |       Status        | Initial Release | Maintenance LTS Start | End-of-life | Store Compatibility |
| :-----: | :-----------------: | :-------------: | :-------------------: | :---------: | :-----------------: |
|  [0.x]  | **Current Release** |   2019-04-03    |                       |             |         2.x         |

See our [LTS policy](https://github.com/vtex-apps/awesome-io#lts-policy) for more information.

## Table of Contents

- [Usage](#usage)
  - [Blocks API](#blocks-api)
    - [Configuration](#configuration)
  - [Styles API](#styles-api)
- [Troubleshooting](#troubleshooting)
- [Contributing](#contributing)
- [Tests](#tests)

## Usage

This app uses our store builder with the blocks architecture. To know more about Store Builder [click here.](https://help.vtex.com/en/tutorial/understanding-storebuilder-and-stylesbuilder#structuring-and-configuring-our-store-with-object-object)

To use this app, you need to add it in your `dependencies` in the `manifest.json` file.

```json
  dependencies: {
    "vtex.wishlist": "0.x"
  }
```

Then, if you want to add the _Add to List_ button in your app, you just need to add the `add-to-list-btn` block into our app theme. You also can add a menu item with a link to redirect to the lists page. To do that, you should use the [Menu Builder](/) by including list item block, as the example bellow.

```
"unstable--menu-item#lists": {
    "props": {
      "id": "unstable--menu-item-lists",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "store/lists",
        "noFollow": true,
        "tagTitle": "lists",
        "text": "My Lists"
      }
    }
  },
```

In order to use this app, you should follow the steps bellow.

#### 1. Create Master Data's Entities:

The lists' information are submitted to Master Data on two entities. One entity with the acronym `WL` to store list's basic informations and another, acronym `LP`, to store the lists' items. Bellow we have the configuration that these entetities should follow.

**Acronym name:** `WL`

| Field  | Type | Configuration | Description    |
| --------- | -------------- | ---- | ------------- |
| name      |  `Varchar 50` | Public to read and public to write | List's name    |
| owner     |  `Varchar 50` |  Allow null, public to read, public to write, public to filter and searchable | The e-mail of the list's owner |
| isPublic  |  `Boolean` |  Allow null, public to read and public to write | Flag to indicate the list visibility |
| isEditable|  `Boolean` | Allow null, public to read and public to write | Flag to indicate if the list's basic information |
| items     |  `Text` | Allow null, public to read and public to write  | Set of the DocumentId of the items added to the list |

**Acronym name:** `LP`

| Field | Type | Configuration | Description |
| ----- | ---- | ------------- | ----------- |
| productId | `Varchar 50`     | Public to read and public to write | Id of the product |
| skuId		| `Varchar 50`     | Public to read and public to write | SKU id of the product |
| quantity  | `Integer`        |  Public to read and public to write | Quantity of the product |

#### 2. Install the WishList app in your store:

Use this command to install this app: `vtex install vtex.wishlist`.

After that, Wishlist's _Add to List_ button will be displayed on `ProductSummary` and `ProductDetails`.

### Blocks API

This app has an interface that describes what rules must be implemented by a block when you want to use the WishList app.

```json
{
  "addon-summary-btn.add-to-list": {
    "component": "AddProductBtn",
    "required": ["lists", "product-summary"]
  },
  "addon-details-btn.add-to-list": {
    "component": "AddProductBtn",
    "required": ["lists", "product-summary"]
  },
  "add-to-list-btn": {
    "component": "AddProductBtn",
    "required": ["lists", "product-summary"]
  },
  "lists": {
    "component": "ListsPage",
    "required": ["product-summary"]
  },
  "store.lists": {
    "component": "ContainerWrapper",
    "required": [
      "lists"
    ],
    "before": [
      "header.full"
    ],
    "after": [
      "footer"
    ]
  }
}

```

#### Configuration

`AddProductBtn`

| Prop name               | Type      | Description                                                       | Default Value |
| ----------------------- | --------- | ----------------------------------------------------------------- | ------------- |
| `product`                 | `Product`  | Informations about the product that will be added to lists | `undefined`         |
| `large`                  | `Boolean`  | Flag that indicates if the should be large or not  | false         |
| `icon`     | `ReactChild` | The icon that should appear in the _Add to List_ button  | [`IconHeart`](https://github.com/vtex-apps/store-icons)         |

`Product`

| Prop name               | Type      | Description                                                       | Default Value |
| ----------------------- | --------- | ----------------------------------------------------------------- | ------------- |
| `productId`                 | `String`  | Id of the product | `undefined`         |
| `skuId`                  | `String`  | SKU id of the product  | `undefined`         |
| `quantity`     | `Number` | Quantity of the product  | `undefined`         |

### Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the `styles` builder and create an app styling CSS file.

1. Add the `styles` builder to your `manifest.json`:

```json
  "builders": {
    "styles": "1.x"
  }
```

2. Create a file called `vtex.wishList.css` inside the `styles/css` folder. Add your custom styles:

```css
.container {
  margin-top: 1rem;
}
```

#### CSS namespaces

| Class name                 | Description                          | Component Source                                                                                |
| -------------------------- | ------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `listPageItemsContainer`                | List page's container of the products                | [ListsPage/Content](/react/components/ListsPage/Content.tsx)                                                                                |
| `listPage`                | List page's main container                | [ListsPage/Content](/react/components/ListsPage/Content.tsx)                                                                                |
| `confirmSelectedListsBtn`                | Container of the button to confirm selected lists to add a product in the mobile mode           | [AddToList/Footer](/react/components/AddToList/Footer.tsx)                                                                                |
| `contentContainer`                | Container of the `AddToList`'s content           | [AddToList/Content](/react/components/AddToList/Content.tsx)                                                                                |
| `popover`                | Container of the `Popover` component           | [Popover](/react/components/Popover.tsx)                                                                                |
| `formViewDialog`                | Dialog content of the FormView component in the desktop mode           | [FormView](/react/components/Form/FormView.tsx)                                                                                |
| `summaryContainer`                | Container of the `ProductSummary` in the list item details           | [ListDetails/ItemDetails](/react/components/ListDetails/ItemDetails.tsx)                                                                                |
| `summaryContainerLarge`                | Container of the `ProductSummary` in the list item details in desktop mode          | [ListDetails/ItemDetails](/react/components/ListDetails/ItemDetails.tsx)                                                                                |
| `addToListContent`                | Main container of the `AddToList` component          | [AddToList/Content](/react/components/AddToList/Content.tsx)                                                                                |
| `addToListListsToSwitch`                | Container of the lists to be selected in the `AddToList` component          | [AddToList/Content](/react/components/AddToList/Content.tsx)                                                                                |
| `createList`                | Container of the `CreateList`          | [CreateList](/react/components/Form/CreateList.tsx)                                                                                |
| `createListButtonContainer`                | Container of the button to create a new list          | [ListForm](/react/components/Form/ListForm.tsx)                                                                                |
| `isPublicLabel`                | Label for show the privacy message in the `ListForm`          | [ListForm](react/components/Form/ListForm.tsx)                                                                                |
| `isPublicHint`                | Label for show the privacy hint in the `ListForm`          | [ListForm](/react/components/Form/ListForm.tsx)                                                                                |
| `isPublicContainer`                | Container of the privacy information in the `ListForm`          | [ListForm](/react/components/Form/ListForm.tsx)                                                                                |
| `nameInputContainer`                | Container of the list's name input          | [ListForm](/react/components/Form/ListForm.tsx)                                                                                |
| `form`                | Main container of the `ListForm`          | [ListForm](/react/components/Form/ListForm.tsx)                                                                                |
| `updateList`                | Main container of the update list form          | [UpdateList](/react/components/Form/UpdateList.tsx)                                                                                |
| `listEmptyContainer`                | Container of the empty list message in in the list details          | [ListDetails/Content](/react/components/ListDetails/Content.tsx)                                                                                |
| `listEmptyLabel`                | Container of the empty message label  when a list does not have products added to it         | [ListDetails/Content](/react/components/ListDetails/Content.tsx)                                                                                |
| `goToAddProductsButtonContainer`                | Container of the button that redirect to the `Galery`         | [ListDetails/Content](/react/components/ListDetails/Content.tsx)                                                                                |
| `listDetailsContent`                | Main container of the list details         | [ListDetails/Content](/react/components/ListDetails/Content.tsx)                                                                                |
| `buySelectedItemsBtnContainer`                | Container of the `BuyButton` that add to the cart the selected products of a list         | [ListDetails/Footer](/react/components/ListDetails/Footer.tsx)                                                                                |
| `totalPriceLabel`                | Label of the quantity of products in a list         | [ListDetails/Footer](/react/components/ListDetails/Footer.tsx)                                                                                |
| `pricesContainer`                | Label of the total price of the selected items from a list         | [ListDetails/Footer](/react/components/ListDetails/Footer.tsx)                                                                                |
| `quantityOfSelectedItemsLabel`                | Label for the quantity of selected items in a list         | [ListDetails/Footer](/react/components/ListDetails/Footer.tsx)                                                                                |
| `ListDetailsFooter`                | Container of the list details' footer         | [ListDetails/Footer](/react/components/ListDetails/Footer.tsx)                                                                                |

## Troubleshooting

You can check if others are passing through similar issues [here](https://github.com/vtex-apps/wishlist/issues). Also feel free to [open issues](https://github.com/vtex-apps/wishlist/issues/new) or contribute with pull requests.

## Contributing

Check it out [how to contribute](https://github.com/vtex-apps/awesome-io#contributing) with this project.

## Tests

:construction: :construction:  Not implemented yet :construction: :construction:

## 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 -->
<table>
  <tr>
    <td align="center"><a href="https://github.com/MatheusR42"><img src="https://avatars0.githubusercontent.com/u/16908590?v=4" width="100px;" alt="Matheus Araujo"/><br /><sub><b>Matheus Araujo</b></sub></a><br /><a href="https://github.com/vtex-apps/wishlist/commits?author=MatheusR42" title="Documentation">📖</a></td>
  </tr>
</table>

<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind 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 wishlist/manifest.json from the wishlist VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "wishlist",
  "title": "Wishlist",
  "version": "0.3.1",
  "defaultLocale": "pt-BR",
  "builders": {
    "react": "3.x",
    "messages": "1.x",
    "store": "0.x",
    "node": "4.x",
    "graphql": "1.x"
  },
  "mustUpdateAt": "2019-04-20",
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {
    "vtex.store-components": "3.x",
    "vtex.styleguide": "9.x",
    "vtex.store-graphql": "2.x",
    "vtex.store-resources": "0.x",
    "vtex.store-icons": "0.x",
    "vtex.product-summary": "2.x",
    "vtex.product-details": "1.x",
    "vtex.store": "2.x",
    "vtex.store-footer": "2.x",
    "vtex.store-header": "2.x"
  },
  "settingsSchema": {
    "title": "Wish List",
    "type": "object",
    "properties": {
      "enableMultipleLists": {
        "title": "Enable creating custom lists",
        "type": "boolean",
        "default": false
      },
      "defaultListName": {
        "title": "Default list name",
        "type": "string"
      }
    }
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of bitcot-qa-theme/manifest.json from the bitcot-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "bitcot-qa-theme",
  "version": "0.0.1",
  "builders": {
    "styles": "2.x",
    "store": "0.x",
    "sitemap": "0.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2018-09-05",
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {
    "vtex.store": "2.x",
    "vtex.store-header": "2.x",
    "vtex.product-summary": "2.x",
    "vtex.store-footer": "2.x",
    "vtex.store-components": "3.x",
    "vtex.styleguide": "9.x",
    "vtex.slider": "0.x",
    "vtex.carousel": "2.x",
    "vtex.shelf": "1.x",
    "vtex.menu": "2.x",
    "vtex.minicart": "2.x",
    "vtex.product-details": "1.x",
    "vtex.product-kit": "1.x",
    "vtex.search-result": "3.x",
    "vtex.login": "2.x",
    "vtex.my-account": "1.x",
    "vtex.flex-layout": "0.x",
    "vtex.rich-text": "0.x",
    "vtex.store-drawer": "0.x",
    "vtex.locale-switcher": "0.x",
    "vtex.product-quantity": "1.x",
    "vtex.product-identifier": "0.x",
    "vtex.breadcrumb": "1.x",
    "vtex.sticky-layout": "0.x",
    "vtex.product-customizer": "2.x",
    "vtex.stack-layout": "0.x",
    "vtex.product-specification-badges": "0.x",
    "vtex.product-review-interfaces": "1.x",
    "vtex.telemarketing": "2.x",
    "vtex.order-placed": "2.x",
    "vtex.checkout-summary": "0.x",
    "vtex.product-list": "0.x",
    "vtex.add-to-cart-button": "0.x",
    "vtex.product-bookmark-interfaces": "1.x",
    "vtex.responsive-layout": "0.x",
    "vtex.slider-layout": "0.x",
    "vtex.store-image": "0.x",
    "vtex.store-icons": "0.x",
    "vtex.modal-layout": "0.x",
    "vtex.store-link": "0.x",
    "vtex.store-video": "1.x",
    "vtex.product-gifts": "0.x",
    "vtex.product-price": "1.x",
    "vtex.disclosure-layout": "1.x",
    "vtex.store-form": "0.x",
    "vtex.product-highlights": "2.x",
    "vtex.product-specifications": "1.x",
    "vtex.tab-layout": "0.x",
    "vtex.condition-layout": "2.x",
    "vtex.css-handles": "1.x",
    "vtex.affirm-components": "0.x"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of shopper-location-theme/manifest.json from the shopper-location-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "shopper-location-qa-theme",
  "version": "0.0.1",
  "builders": {
    "styles": "2.x",
    "store": "0.x",
    "sitemap": "0.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2018-09-05",
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {
    "vtex.store": "2.x",
    "vtex.store-header": "2.x",
    "vtex.product-summary": "2.x",
    "vtex.store-footer": "2.x",
    "vtex.store-components": "3.x",
    "vtex.styleguide": "9.x",
    "vtex.slider": "0.x",
    "vtex.carousel": "2.x",
    "vtex.shelf": "1.x",
    "vtex.menu": "2.x",
    "vtex.minicart": "2.x",
    "vtex.product-details": "1.x",
    "vtex.product-kit": "1.x",
    "vtex.search-result": "3.x",
    "vtex.login": "2.x",
    "vtex.my-account": "1.x",
    "vtex.flex-layout": "0.x",
    "vtex.rich-text": "0.x",
    "vtex.store-drawer": "0.x",
    "vtex.locale-switcher": "0.x",
    "vtex.product-quantity": "1.x",
    "vtex.product-identifier": "0.x",
    "vtex.breadcrumb": "1.x",
    "vtex.sticky-layout": "0.x",
    "vtex.product-customizer": "2.x",
    "vtex.stack-layout": "0.x",
    "vtex.product-specification-badges": "0.x",
    "vtex.product-review-interfaces": "1.x",
    "vtex.telemarketing": "2.x",
    "vtex.order-placed": "2.x",
    "vtex.checkout-summary": "0.x",
    "vtex.product-list": "0.x",
    "vtex.add-to-cart-button": "0.x",
    "vtex.product-bookmark-interfaces": "1.x",
    "vtex.responsive-layout": "0.x",
    "vtex.slider-layout": "0.x",
    "vtex.store-image": "0.x",
    "vtex.store-icons": "0.x",
    "vtex.modal-layout": "0.x",
    "vtex.store-link": "0.x",
    "vtex.store-video": "1.x",
    "vtex.product-gifts": "0.x",
    "vtex.product-price": "1.x",
    "vtex.disclosure-layout": "1.x",
    "vtex.store-form": "0.x",
    "vtex.product-highlights": "2.x",
    "vtex.product-specifications": "1.x",
    "vtex.tab-layout": "0.x",
    "vtex.condition-layout": "2.x",
    "vtex.css-handles": "1.x"
  },
  "peerDependencies": {
    "vtex.shopper-location": "1.x"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of b2b-suite/package.json from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "b2b-suite",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@vtex/prettier-config": "0.1.4",
    "@vtex/tsconfig": "^0.6.0",
    "eslint": "7.12.1",
    "eslint-config-vtex": "^14.1.1",
    "eslint-config-vtex-react": "^6.8.3",
    "husky": "4.2.3",
    "lint-staged": "10.1.1",
    "prettier": "2.0.2",
    "typescript": "3.8.3"
  },
  "dependencies": {
    "react": "^17.0.2"
  }
}

```


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

[User] Show me the implementation of b2b-suite/manifest.json from the b2b-suite VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "b2b-suite",
  "vendor": "vtex",
  "version": "2.0.0",
  "title": "B2B Suite",
  "description": "Suite of apps to add various essential B2B functionalities to your VTEX store",
  "mustUpdateAt": "2022-08-28",
  "scripts": {
    "postreleasy": "vtex publish"
  },
  "dependencies": {
    "vtex.b2b-admin-customers": "2.x",
    "vtex.b2b-checkout-settings": "3.x",
    "vtex.b2b-orders-history": "2.x",
    "vtex.b2b-organizations": "3.x",
    "vtex.b2b-quotes": "3.x",
    "vtex.store": "2.x",
    "vtex.storefront-permissions-ui": "3.x"
  },
  "builders": {
    "admin": "0.x",
    "docs": "0.x",
    "react": "3.x",
    "store": "0.x"
  },
  "billingOptions": {
    "support": {
      "url": "https://help-tickets.vtex.com/en/support?app=vtex.b2b-suite"
    },
    "type": "free",
    "availableCountries": [
      "*"
    ]
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of adobe-launch-pixel/package.json from the adobe-launch-pixel VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "YOURAPPNAME",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.json": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@vtex/prettier-config": "^0.1.4",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.3.2",
    "eslint-config-vtex-react": "^6.3.2",
    "husky": "^4.2.3",
    "lint-staged": "^10.1.1",
    "prettier": "^2.0.2",
    "typescript": "^3.8.3"
  },
  "dependencies": {
    "@adobe/adobe-client-data-layer": "^2.0.2",
    "yarn": "^1.22.17"
  }
}

```


[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 adobe-launch-pixel/manifest.json from the adobe-launch-pixel VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "adobe-launch-pixel",
  "vendor": "vtexasia",
  "version": "0.0.5",
  "title": "adobe launch pixel",
  "description": "adobe launch pixel app",
  "billingOptions": {
    "termsURL": "https://compliance.vtex.com/gdpr/policies/vtex-privacy-policy",
    "support": {
      "url": "https://support.vtex.com/hc/requests"
    },
    "free": true,
    "type": "free",
    "availableCountries": [
      "*"
    ]
  },
  "builders": {
    "react": "3.x",
    "store": "0.x",
    "pixel": "0.x",
    "docs": "0.x"
  },
  "dependencies": {
    "vtex.pixel-interfaces": "1.x"
  },
  "settingsSchema": {
    "title": "adobe-launch-pixel",
    "type": "object",
    "properties": {
      "adobeId_1": {
        "title": "Adobe Experience Platform ID-1",
        "description": "Enter the First ID from your Adobe Experience Platform. eg, if your script is 'https://assets.adobedtm.com/8s8wwe70yyu7/hui6t3fe6y9o/launch-er45i4b9pp90-development.min.js', then the First ID should be '8s8wwe70yyu7/hui6t3fe6y9o' ",
        "type": "string"
      },
      "adobeId_2": {
        "title": "Adobe Experience Platform ID-2",
        "description": "Enter the Second ID from your Adobe Experience Platform. eg, if your script is 'https://assets.adobedtm.com/8s8wwe70yyu7/hui6t3fe6y9o/launch-er45i4b9pp90-development.min.js', then the Second ID should be 'launch-er45i4b9pp90-development.min.js' ",
        "type": "string"
      }
    }
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "store",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.json": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@types/node": "^12.7.12",
    "@vtex/prettier-config": "^0.1.3",
    "eslint": "^7.0.0",
    "eslint-config-vtex": "^12.2.1",
    "eslint-config-vtex-react": "^6.2.1",
    "husky": "^8.0.0",
    "lint-staged": "^10.0.2",
    "prettier": "^1.19.1",
    "typescript": "^3.7.5"
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "store",
  "version": "2.145.0",
  "title": "VTEX Store",
  "description": "The VTEX basic store.",
  "builders": {
    "store": "0.x",
    "messages": "1.x",
    "react": "3.x",
    "docs": "0.x"
  },
  "dependencies": {
    "vtex.store-indexer": "0.x",
    "vtex.store-resources": "0.x",
    "vtex.store-graphql": "2.x",
    "vtex.store-header": "2.x",
    "vtex.store-footer": "2.x",
    "vtex.pwa-graphql": "1.x",
    "vtex.styleguide": "9.x",
    "vtex.pixel-interfaces": "1.x",
    "vtex.search-result": "3.x",
    "vtex.login": "2.x",
    "vtex.my-account": "1.x",
    "vtex.pixel-manager": "1.x",
    "vtex.product-context": "0.x",
    "vtex.blog-interfaces": "0.x",
    "vtex.open-graph": "1.x",
    "vtex.structured-data": "0.x",
    "vtex.pwa-components": "0.x",
    "vtex.order-manager": "0.x",
    "vtex.order-items": "0.x",
    "vtex.product-specification-badges": "0.x",
    "vtex.product-review-interfaces": "1.x",
    "vtex.rich-text": "0.x",
    "vtex.native-types": "0.x",
    "vtex.telemarketing": "2.x",
    "vtex.shipping-option-components": "1.x"
  },
  "settingsSchema": {
    "title": "admin/store.title",
    "type": "object",
    "bindingBounded": true,
    "properties": {
      "storeName": {
        "title": "admin/store.storeName.title",
        "type": "string"
      },
      "requiresAuthorization": {
        "title": "admin/store.requiresAuthorization.title",
        "type": "boolean"
      },
      "titleTag": {
        "title": "admin/store.titleTag.title",
        "type": "string"
      },
      "metaTagDescription": {
        "title": "admin/store.metaTagDescription.title",
        "type": "string"
      },
      "metaTagRobots": {
        "title": "admin/store.metaTagRobots.title",
        "type": "string",
        "description": "admin/store.metaTagRobots.description"
      },
      "faviconLinks": {
        "title": "admin/store.faviconLinks.title",
        "type": "array",
        "items": {
          "type": "object",
          "properties": {
            "rel": {
              "title": "admin/store.faviconLinks.rel.title",
              "type": "string",
              "description": "admin/store.faviconLinks.rel.description"
            },
            "type": {
              "title": "admin/store.faviconLinks.type.title",
              "type": "string",
              "description": "admin/store.faviconLinks.type.description"
            },
            "sizes": {
              "title": "admin/store.faviconLinks.sizes.title",
              "type": "string",
              "pattern": "^[0-9]+x[0-9]+$",
              "description": "admin/store.faviconLinks.sizes.description"
            },
            "href": {
              "title": "admin/store.faviconLinks.href.title",
              "type": "string"
            }
          },
          "required": [
            "rel",
            "href"
          ]
        },
        "description": "admin/store.faviconLinks.description"
      },
      "advancedSettings": {
        "title": "admin/store.advancedSettings.title",
        "type": "object",
        "properties": {
          "enableOrderFormOptimization": {
            "title": "admin/store.advancedSettings.enableOrderFormOptimization.title",
            "type": "boolean",
            "default": false,
            "description": "admin/store.advancedSettings.enableOrderFormOptimization.description"
          },
          "enableServiceWorker": {
            "title": "admin/store.advancedSettings.enableServiceWorker.title",
            "type": "boolean",
            "default": true,
            "description": "admin/store.advancedSettings.enableServiceWorker.description"
          },
          "enableCriticalCSS": {
            "title": "admin/store.advancedSettings.enableCriticalCSS.title",
            "type": "boolean",
            "default": false,
            "description": "admin/store.advancedSettings.enableCriticalCSS.description"
          },
          "enableCriticalCSSOnSearch": {
            "title": "admin/store.advancedSettings.enableCriticalCSSOnSearch.title",
            "type": "boolean",
            "default": false,
            "description": "admin/store.advancedSettings.enableCriticalCSSOnSearch.description"
          },
          "enableCriticalCSSOnCustom": {
            "title": "admin/store.advancedSettings.enableCriticalCSSOnCustom.title",
            "type": "boolean",
            "default": false,
            "description": "admin/store.advancedSettings.enableCriticalCSSOnCustom.description"
          },
          "enableCriticalCSSOnProduct": {
            "title": "admin/store.advancedSettings.enableCriticalCSSOnProduct.title",
            "type": "boolean",
            "default": false,
            "description": "admin/store.advancedSettings.enableCriticalCSSOnProduct.description"
          },
          "enableCSSConcatenation": {
            "title": "admin/store.advancedSettings.enableCSSConcatenation.title",
            "description": "admin/store.advancedSettings.enableCSSConcatenation.description",
            "type": "boolean",
            "default": true
          },
          "enablePrefetch": {
            "title": "admin/store.advancedSettings.enablePrefetch.title",
            "description": "admin/store.advancedSettings.enablePrefetch.description",
            "type": "boolean",
            "default": true
          },
          "enableLazyRuntime": {
            "title": "admin/store.advancedSettings.enableLazyRuntime.title",
            "description": "admin/store.advancedSettings.enableLazyRuntime.description",
            "type": "boolean",
            "default": true
          },
          "enableMenuRenderingOptimization": {
            "title": "admin/store.advancedSettings.enableMenuRenderingOptimization.title",
            "description": "admin/store.advancedSettings.enableMenuRenderingOptimization.description",
            "type": "boolean",
            "default": true
          },
          "enableSearchRenderingOptimization": {
            "title": "admin/store.advancedSettings.enableSearchRenderingOptimization.title",
            "description": "admin/store.advancedSettings.enableSearchRenderingOptimization.description",
            "type": "boolean",
            "default": true
          },
          "enableAsyncScripts": {
            "title": "admin/store.advancedSettings.enableAsyncScripts.title",
            "description": "admin/store.advancedSettings.enableAsyncScripts.description",
            "type": "boolean",
            "default": true
          },
          "enableConcurrentMode": {
            "title": "admin/store.advancedSettings.enableConcurrentMode.title",
            "description": "admin/store.advancedSettings.enableConcurrentMode.description",
            "type": "boolean",
            "default": true
          },
          "enableFiltersFetchOptimization": {
            "title": "admin/store.advancedSettings.enableFiltersFetchOptimization.title",
            "description": "admin/store.advancedSettings.enableFiltersFetchOptimization.description",
            "type": "boolean",
            "default": false
          },
          "enableFullSSROnProduct": {
            "title": "admin/store.advancedSettings.enableFullSSROnProduct.title",
            "description": "admin/store.advancedSettings.enableFullSSROnProduct.description",
            "type": "boolean",
            "default": false
          },
          "enableLazyFooter": {
            "title": "admin/store.advancedSettings.enableLazyFooter.title",
            "description": "admin/store.advancedSettings.enableLazyFooter.description",
            "type": "boolean",
            "default": false
          },
          "enableLazyFold": {
            "title": "admin/store.advancedSettings.enableLazyFold.title",
            "description": "admin/store.advancedSettings.enableLazyFold.description",
            "type": "boolean",
            "default": false
          },
          "enablePageNumberTitle": {
            "title": "admin/store.advancedSettings.enablePageNumberTitle.title",
            "description": "admin/store.advancedSettings.enablePageNumberTitle.description",
            "type": "boolean",
            "default": false
          },
          "canonicalWithoutUrlParams": {
            "title": "admin/store.advancedSettings.canonicalWithoutUrlParams.title",
            "description": "admin/store.advancedSettings.canonicalWithoutUrlParams.description",
            "type": "boolean",
            "default": false
          },
          "removeStoreNameTitle": {
            "title": "admin/store.advancedSettings.removeStoreNameTitle.title",
            "description": "admin/store.advancedSettings.removeStoreNameTitle.description",
            "type": "boolean",
            "default": false
          },
          "enableCustomCurrencySymbol": {
            "title": "admin/store.advancedSettings.enableCustomCurrencySymbol.title",
            "description": "admin/store.advancedSettings.enableCustomCurrencySymbol.description",
            "type": "boolean",
            "default": false
          },
          "publisherId": {
            "title": "admin/store.advancedSettings.publisherId.title",
            "description": "admin/store.advancedSettings.publisherId.description",
            "type": "string",
            "default": ""
          },
          "a11ySemanticHtmlMigration": {
            "title": "admin/store.advancedSettings.a11ySemanticHtmlMigration.title",
            "type": "boolean",
            "default": false,
            "description": "admin/store.advancedSettings.a11ySemanticHtmlMigration.description"
          },
          "customHeader": {
            "title": "admin/store.advancedSettings.customHeader.title",
            "type": "array",
            "items": {
              "type": "object",
              "properties": {
                "__editorItemTitle": {
                  "type": "string",
                  "title": "admin/store.advancedSettings.customHeader.__editorItemTitle.title",
                  "description": "admin/store.advancedSettings.customHeader.__editorItemTitle.description"
                },
                "key": {
                  "type": "string",
                  "title": "admin/store.advancedSettings.customHeader.key.title",
                  "description": "admin/store.advancedSettings.customHeader.key.description"
                },
                "value": {
                  "type": "string",
                  "title": "admin/store.advancedSettings.customHeader.value.title",
                  "description": "admin/store.advancedSettings.customHeader.value.description"
                }
              },
              "required": [
                "key",
                "value"
              ]
            }
          },
          "useDefaultBrowserNavigation": {
            "title": "admin/store.advancedSettings.useDefaultBrowserNavigation.title",
            "description": "admin/store.advancedSettings.useDefaultBrowserNavigation.description",
            "type": "boolean",
            "default": false
          }
        }
      }
    },
    "dependencies": {
      "requiresAuthorization": {
        "oneOf": [
          {
            "properties": {
              "requiresAuthorization": {
                "enum": [
                  false
                ]
              }
            }
          },
          {
            "properties": {
              "requiresAuthorization": {
                "enum": [
                  true
                ]
              },
              "b2bEnabled": {
                "title": "admin/store.b2benabled.title",
                "type": "string",
                "format": "read-only",
                "default": "true"
              }
            }
          }
        ]
      }
    }
  },
  "settingsUiSchema": {
    "requiresAuthorization": {
      "ui:widget": "hidden"
    },
    "b2bEnabled": {
      "ui:disabled": "true"
    },
    "ui:order": [
      "storeName",
      "requiresAuthorization",
      "b2bEnabled",
      "*"
    ]
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of console/manifest.json from the console VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "console",
  "vendor": "vtex",
  "version": "0.6.1",
  "title": "IO Console",
  "description": "VTEX developer console",
  "mustUpdateAt": "2019-10-16",
  "dependencies": {
    "vtex.admin": "1.x",
    "vtex.console-graphql": "0.x",
    "vtex.render-runtime": "7.x",
    "vtex.styleguide": "8.x",
    "vtex.builder-log": "0.x"
  },
  "scripts": {},
  "builders": {
    "react": "2.x",
    "pages": "0.x",
    "messages": "1.x",
    "docs": "0.x"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of facebook-domain-verification/manifest.json from the facebook-domain-verification VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "facebook-domain-verification",
  "version": "1.0.2",
  "title": "Facebook Domain Verification",
  "description": "Verify your domain ownership.",
  "builders": {
    "pixel": "0.x",
    "docs": "0.x"
  },
  "billingOptions": {
    "termsURL": "",
    "support": {
      "url": "https://support.vtex.com/hc/requests"
    },
    "free": true
  },
  "settingsSchema": {
    "title": "Facebook Domain Verification",
    "description": "Enter the content provided by Facebook Business Settings",
    "type": "object",
    "properties": {
      "content": {
        "title": "Domain verification code",
        "type": "string"
      }
    }
  },
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of product-list/package.json from the product-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "product-list",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@types/node": "^12.7.12",
    "@vtex/prettier-config": "^0.3.5",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.2.1",
    "eslint-config-vtex-react": "^6.7.8",
    "husky": "~4.2.0",
    "lint-staged": "^10.0.2",
    "prettier": "^2.2.1",
    "typescript": "^3.7.5"
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "product-list",
  "version": "0.37.4",
  "title": "Product List",
  "description": "Product List",
  "defaultLocale": "pt-BR",
  "builders": {
    "messages": "1.x",
    "styles": "2.x",
    "store": "0.x",
    "react": "3.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2019-04-02",
  "dependencies": {
    "vtex.checkout-graphql": "0.x",
    "vtex.css-handles": "0.x",
    "vtex.device-detector": "0.x",
    "vtex.flex-layout": "0.x",
    "vtex.format-currency": "0.x",
    "vtex.formatted-price": "0.x",
    "vtex.order-manager": "0.x",
    "vtex.store-icons": "0.x",
    "vtex.styleguide": "9.x",
    "vtex.on-view": "1.x"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of vtex-ads/dangerfile.js from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```javascript
// dangerfile.js
const { verify } = require('@vtex/danger')

const config = {
  // Set to true to enforce keepachangelog rules.
  keepachangelog: {
    changeVersion: false,
  },
  rules: {
    description: ['fail', { minLength: 20 }],
    assignee: 'fail',
    reviewers: 'fail',
    pr_size: ['warn', { additionLimit: 800, deletionLimit: -1 }],
    lock_file: 'warn',
    no_ignored_test: ['fail', { pattern: /test|spec/i }],
    no_debugger: ['fail', { pattern: /\.[tj]sx?$/i }],
    enforce_graphql_provider: 'off',
  },
}

verify(config)

```


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

[Assistant]
Here's the implementation:

```markdown
# VTEX Ads APP

Este é um **Storefront app** que permite exibir anúncios em lojas VTEX de forma simples e configurável. Ele oferece componentes prontos para uso que renderizam banners, carrosséis de produtos patrocinados e posicionamentos de marcas patrocinadas em áreas estratégicas da sua loja.

> 📚 **Documentação VTEX IO**: Para mais informações sobre desenvolvimento de Storefront apps, consulte a [documentação oficial da VTEX](https://developers.vtex.com/docs/guides/vtex-io-documentation-1-developing-storefront-apps-using-react-and-vtex-io).

Embora este app seja projetado para funcionar perfeitamente com o VTEX Site Editor (CMS), a configuração inicial requer um desenvolvedor. Os blocos de anúncios devem primeiro ser declarados no código do tema da loja antes de ficarem disponíveis no Site Editor, onde as configurações visuais e comportamentais podem então ser ajustadas conforme necessário.

## Pré-requisitos

Antes de começar a implementação, certifique-se de ter:

- **VTEX CLI** instalado e configurado
- **Acesso ao store-theme** da loja (código do tema)
- **Permissões de desenvolvedor** na conta VTEX

> 📚 Para mais informações sobre o VTEX CLI, consulte a [documentação oficial da VTEX](https://developers.vtex.com/docs/guides/vtex-io-documentation-vtex-io-cli-installation-and-command-reference).

## Modo de desenvolvimento

> 🚧 `vtex use vtexads`

Toda implementação deve ser feita no ambiente de desenvolvimento. [Use o workspace](https://developers.vtex.com/docs/guides/vtex-io-documentation-workspace) vtexads para o desenvolvimento. Após validação, publique no ambiente master da loja.

## Instalação

A instalação envolve os seguintes passos:
1. Instalar o App via VTEX CLI
2. Declarar a dependência no manifest.json no store-theme
3. Linkar o tema
4. Configurar o app
5. Exibir anúncios

### 1. Instalar o App via VTEX CLI

```bash
vtex install vtex.vtex-ads
```

### 2. Declarar a dependência no manifest.json
Adicione o app VTEX ADS como dependência do store-theme no arquivo `manifest.json`.

```json
{
  "dependencies": {
    "vtex.vtex-ads": "0.x"
  }
}
```

### 3. Linkar o tema
Linke o tema para ver as mudanças no ambiente de desenvolvimento. `vtex link`

### 4. Configurar o app

Neste momento, temos um passo importante para exibirmos anúncios. Acesse o painel administrativo da sua loja e configure:
- Publisher ID (obrigatório)
- Brand ID (opcional para publishers multi-marca)

Você pode acessar a configuração manualmente pelo VTEX Admin:

1. Vá ao menu lateral e clique em **Apps**.
2. Em seguida, selecione **Meus Apps**.
3. Procure por **VTEX Ads**.
4. Clique no app para acessar sua página de configuração.

> ⚙ A configuração também pode ser feita via link direto:
> `https://{{workspace}}--{{account}}.myvtex.com/admin/apps/vtex.vtex-ads@0.0.1/setup`
>
> ⚠ Este link pode variar dependendo do **workspace** ou **versão do app**.

### 5. Lidando com os componentes
Agora você precisa declarar os componentes nas páginas do seu tema. Os componentes são dividos em 2 classes: exibição de anúncios e notificação de eventos.

⚠ Para mais detalhes, consulte a seção de exemplos.

#### Componentes Disponíveis (exibição e notificação de eventos)

1. Exibição
    1. `vtex-ads-banner`
    Exibe banners patrocinados no local configurado. Este componente funciona de forma autônoma e não requer filhos.

    2. `vtex-ads-shelf`
    Exibe produtos patrocinados em formato de prateleira. Para funcionar corretamente, é necessário receber os blocos `list-context.product-list-static`, `slider-layout` e o card de produto do tema (`product-summary.shelf`).
    > Essa estrutura garante liberdade para reaproveitar estilos e regras de negócio já aplicados no tema.

    3. `vtex-ads-sponsored-brands`
    Exibe marcas patrocinadas em carrossel. Também requer os blocos `list-context.product-list-static`, `slider-layout` e o card de produto do tema (ex: `product-summary.shelf`).

2. Notificação de eventos
    1. `vtex-ads-pixel-event`
    Este componente deve ser usado dentro dos cards de produto para escutar eventos de produto (cliques, impressões, etc.).
    2. `vtex-ads-conversion`
    Este componente é responsável por gerenciar eventos de conversão.
    **⚠ Por favor, consulte o suporte técnico antes de implementar este componente.**

### Exibindo Anúncios

**⚠ É essencial ter pelo menos um entendimento básico da declaração de blocos VTEX.**

> 📁 **Exemplos Completos**: Verifique a pasta `examples/` para exemplos de implementação padronizados, mais robustos e completos que cobrem diferentes cenários e casos de uso.

Adicione os componentes correspondentes às páginas que exibirão os anúncios e faça os ajustes visuais necessários.

#### 📄 Exemplos de Uso
Use a página de busca como exemplo.
`store/blocks/search/`
> Lembre-se, o nome do arquivo pode variar dependendo do tema se ele foi personalizado.

1. Banner
    ```json
        {
          "vtex-ads-banner#search-top": {
              "title": "VTEX Ads - Banner top PDP",
              "props": {
              "placementName": "site_search_top_banner", // {canal}_{contexto}_{posição}_{tipo}
              "size": "1280x176", // Mesmo tamanho cadastrado no admin de ads
              "sizeMobile": "634x300" // Mesmo tamanho cadastrado no admin de ads
              }
          },
          "store.search": {
              "blocks": [
              "vtex-ads-banner#search-top",
              "search-result-layout"
              ]
          }
        }
    ```

2. Produtos patrocinados
> Para mantermos a originalidade e regras de negócio do tema, as shelfs recebem alguns componentes adicionais: `list-context.product-list-static`, `slider-layout` e `product-summary.shelf`.
    ```json
        {
          "list-context.product-list-static#vtex-ads": {
            "blocks": ["product-summary.shelf#product-custom-ads"],
            "children": ["slider-layout#vtex-ads"],
            "title": "VTEX Ads - Product shelf - Wrapper context"
          },
          "vtex-ads-shelf#pdp-middle": {
            "title": "VTEX Ads - Product shelf middle PDP",
            "blocks": [
              "rich-text#vtex-ads-sponsored-title", // Optional
              "list-context.product-list-static#vtex-ads"
            ],
            "props": {
              "placementName": "site_search_topproduct", // {channel}_{context}_ {position}_{type}
              "quantity": 10 // Optional, default is 20
            }
          },
          "store.search": {
              "blocks": [
              "vtex-ads-shelf#pdp-middle",
              "search-result-layout"
              ]
          }
        }
    ```

3. Marcas patrocinadas (sponsored brands)
> Para mantermos a originalidade e regras de negócio do tema, as shelfs recebem alguns componentes adicionais: `list-context.product-list-static`, `slider-layout` e `product-summary.shelf`.
    ```json
        {
          "list-context.product-list-static#vtex-ads": {
            "blocks": ["product-summary.shelf#product-custom-ads"],
            "children": ["slider-layout#vtex-ads"],
            "title": "VTEX Ads - Product shelf - Wrapper context"
          },
          "vtex-ads-sponsored-brands#search-top": {
            "title": "VTEX Ads - Sponsored brand",
            "blocks": ["list-context.product-list-static#vtex-ads"],
            "props": {
              "placementName": "site_search_top_sb", // {channel}_{context}_ {position}_{type}
              "sizeMobile": "450x150", // Same size registered in the ad platform
              "size": "450x225", // Same size registered in the ad platform
              "hideHeader": true // Optional
            }
          },
          "store.search": {
              "blocks": [
              "vtex-ads-sponsored-brands#search-top",
              "search-result-layout"
              ]
          }
        }
    ```

### Notificando Eventos

Para rastrear eventos de produto (cliques, impressões, etc.), adicione o componente `vtex-ads-pixel-event` dentro dos seus cards de produto.

```json
{
  "product-summary.shelf": {
    "children": [
      "vtex-ads-pixel-event",
      "product-summary-image",
      "product-summary-name",
      "product-summary-price"
    ]
  }
}
```

> O componente `vtex-ads-pixel-event` deve ser posicionado como filho do componente de card de produto para rastrear adequadamente as interações do usuário.

### Notificando Conversão

> ⚠ **Importante**: Antes de implementar o componente de conversão, por favor consulte o suporte técnico para determinar se é necessário para o seu caso de uso específico.

Você também precisará adicionar um componente à página `OrderPlaced` para rastrear eventos de conversão.

1. Adicione o `vtex-ads-conversion` ao arquivo de configuração da página Order Placed `store/blocks/orderplaced.jsonc`.

> O nome do arquivo pode variar dependendo do tema se ele foi personalizado.

```json
{
  "store.orderplaced": {
    "blocks": ["order-placed", "vtex-ads-conversion"]
  }
}
```

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.ads",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
    "lint:locales": "intl-equalizer",
    "test": "cd ./react && yarn test"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ],
    "*.json": [
      "prettier --write"
    ],
    "messages/*.json": [
      "yarn lint:locales"
    ]
  },
  "devDependencies": {
    "@types/node": "^12.12.21",
    "@vtex/danger": "^0.2.7",
    "@vtex/intl-equalizer": "^2.5.0",
    "@vtex/prettier-config": "^0.3.5",
    "eslint": "^7.14.0",
    "eslint-config-vtex": "^12.8.11",
    "eslint-config-vtex-react": "^6.8.3",
    "husky": "^4.3.0",
    "lint-staged": "^10.5.1",
    "prettier": "^2.2.0",
    "typescript": "^3.9.6"
  },
  "version": "2.0.16",
  "intl-equalizer": {
    "referenceLocale": "en",
    "localeDirectory": "messages"
  }
}
```


[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 vtex-ads/manifest.json from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "vtex-ads",
  "version": "0.0.1",
  "title": "VTEX Ads",
  "description": "Storefront app de integração com o sistema de anúncios VTEX Ads para Store Framework.",
  "builders": {
    "docs": "0.x",
    "messages": "1.x",
    "react": "3.x",
    "store": "0.x",
    "styles": "2.x",
    "pixel": "0.x"
  },
  "dependencies": {
    "vtex.device-detector": "0.x",
    "vtex.product-summary": "2.x",
    "vtex.slider-layout": "0.x",
    "vtex.search-graphql": "0.x",
    "vtex.session-client": "1.x",
    "vtex.product-list-context": "0.x",
    "vtex.search-page-context": "0.x",
    "vtex.product-highlights": "2.x",
    "vtex.flex-layout": "0.x",
    "vtex.rich-text": "0.x",
    "vtex.product-price": "1.x",
    "vtex.product-context": "0.x",
    "vtex.pixel-interfaces": "1.x",
    "vtex.pixel-manager": "1.x",
    "vtex.styleguide": "9.x",
    "vtex.order-manager": "0.x",
    "vtex.order-items": "0.x",
    "vtex.css-handles": "1.x",
    "vtex.product-summary-context": "0.x"
  },
  "registries": [
    "smartcheckout"
  ],
  "policies": [
    {
      "name": "read-write-apps-settings"
    }
  ],
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema",
  "settingsSchema": {
    "title": "VTEX Ads",
    "type": "object",
    "properties": {
      "publisherId": {
        "title": "Publisher ID",
        "description": "Insira seu publisher ID. Caso não saiba, entre em contato.",
        "type": "string"
      },
      "brandCode": {
        "title": "Código da marca",
        "description": "Se houver, insira o código da marca. Caso não saiba, entre em contato.",
        "type": "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 shelf-components/package.json from the shelf-components VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "shelf-components",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
    "lint:locales": "intl-equalizer",
    "test": "cd ./react && yarn test"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged && intl-equalizer && intl-equalizer --fix"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ],
    "*.{json}": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@vtex/intl-equalizer": "^2.4.2",
    "@vtex/prettier-config": "^0.1.4",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.3.2",
    "eslint-config-vtex-react": "^6.3.2",
    "husky": "^4.2.3",
    "lint-staged": "^10.1.1",
    "prettier": "^2.0.2",
    "react-intersection-observer": "^8.30.3",
    "typescript": "^3.8.3"
  },
  "version": "0.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 shelf-components/manifest.json from the shelf-components VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "shelf-components",
  "version": "0.10.1",
  "title": "Shelf components",
  "description": "Components of the new shelves",
  "builders": {
    "docs": "0.x",
    "messages": "1.x",
    "react": "3.x",
    "store": "0.x",
    "styles": "2.x"
  },
  "dependencies": {
    "vtex.add-to-cart-button": "0.x",
    "vtex.css-handles": "0.x",
    "vtex.device-detector": "0.x",
    "vtex.flex-layout": "0.x",
    "vtex.format-currency": "0.x",
    "vtex.messages": "1.x",
    "vtex.pixel-manager": "1.x",
    "vtex.product-context": "0.x",
    "vtex.product-group-context": "0.x",
    "vtex.product-list-context": "0.x",
    "vtex.product-price": "1.x",
    "vtex.product-summary": "2.x",
    "vtex.responsive-layout": "0.x",
    "vtex.store-components": "3.x",
    "vtex.styleguide": "9.x",
    "vtex.slider-layout": "0.x",
    "vtex.store-resources": "0.x",
    "vtex.search-graphql": "0.x",
    "vtex.recommendation-context": "0.x"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of store-video/package.json from the store-video VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "video",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
    "lint:locales": "intl-equalizer",
    "test": "cd ./react && yarn test"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged && intl-equalizer && intl-equalizer --fix"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ],
    "*.json": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@vtex/intl-equalizer": "^2.5.0",
    "@vtex/prettier-config": "^0.3.5",
    "eslint": "^7.14.0",
    "eslint-config-vtex": "^12.8.11",
    "eslint-config-vtex-react": "^6.8.3",
    "husky": "^4.3.0",
    "lint-staged": "^10.5.1",
    "prettier": "^2.2.0",
    "typescript": "^3.9.6"
  },
  "version": "0.0.1",
  "intl-equalizer": {
    "referenceLocale": "en",
    "localeDirectory": "messages"
  }
}

```


[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 store-video/manifest.json from the store-video VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "store-video",
  "version": "1.4.3",
  "title": "Video",
  "description": "Store component to handle video",
  "builders": {
    "react": "3.x",
    "store": "0.x",
    "messages": "1.x",
    "docs": "0.x"
  },
  "dependencies": {
    "vtex.native-types": "0.x",
    "vtex.css-handles": "1.x",
    "vtex.styleguide": "9.x",
    "vtex.store-icons": "0.x"
  },
  "registries": [
    "smartcheckout"
  ],
  "policies": [],
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of pwa-components/package.json from the pwa-components VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.pwa-components",
  "version": "0.1.0",
  "description": "Components related to PWA features",
  "scripts": {
    "lint": "tsc --noEmit -p react && eslint --ext ts,tsx react",
    "lint:fix": "tsc --noEmit -p react && eslint --ext ts,tsx react --fix"
  },
  "devDependencies": {
    "@types/node": "^12.7.7",
    "@vtex/tsconfig": "^0.3.0",
    "eslint": "^6.4.0",
    "eslint-config-vtex": "^11.1.0",
    "eslint-config-vtex-react": "^5.0.1",
    "prettier": "^1.18.2",
    "typescript": "^3.6.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 pwa-components/manifest.json from the pwa-components VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "pwa-components",
  "title": "PWA Components",
  "vendor": "vtex",
  "version": "0.4.2",
  "description": "Components related to PWA features",
  "dependencies": {
    "vtex.pwa-graphql": "1.x",
    "vtex.styleguide": "9.x",
    "vtex.store-resources": "0.x"
  },
  "builders": {
    "react": "3.x",
    "docs": "0.x",
    "store": "0.x",
    "messages": "1.x"
  },
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of octopia-scheduler/dangerfile.js from the octopia-scheduler VTEX app.

[Assistant]
Here's the implementation:

```javascript
// dangerfile.js
const { verify } = require('@vtex/danger')

const config = {
  // Set to true to enforce keepachangelog rules.
  keepachangelog: {
    changeVersion: false,
  },
  rules: {
    description: ['fail', { minLength: 20 }],
    assignee: 'fail',
    reviewers: 'fail',
    pr_size: ['warn', { additionLimit: 800, deletionLimit: -1 }],
    lock_file: 'warn',
    no_ignored_test: ['fail', { pattern: /test|spec/i }],
    no_debugger: ['fail', { pattern: /\.[tj]sx?$/i }],
    enforce_graphql_provider: 'off',
  },
}

verify(config)

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "octopia-scheduler",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@types/node": "^12.12.21",
    "@vtex/prettier-config": "^0.3.6",
    "@vtex/danger": "^0.2.7",
    "eslint": "^7.16.0",
    "eslint-config-vtex": "^12.9.3",
    "husky": "^4.3.6",
    "lint-staged": "^10.5.3",
    "prettier": "^2.2.1",
    "typescript": "^3.7.5"
  }
}

```


[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 octopia-scheduler/manifest.json from the octopia-scheduler VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "octopia-scheduler",
  "vendor": "vtex",
  "version": "0.0.1",
  "title": "Octopia scheduler",
  "description": "Scheduler service for Octopia integration",
  "mustUpdateAt": "2018-01-04",
  "categories": [],
  "dependencies": {},
  "builders": {
    "node": "6.x",
    "docs": "0.x",
    "graphql": "1.x"
  },
  "scripts": {
    "prereleasy": "bash lint.sh"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "ADMIN_DS"
    },
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/*"
      }
    }
  ],
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of product-context/package.json from the product-context VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "product-context",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@vtex/prettier-config": "^0.3.6",
    "eslint": "^7.14.0",
    "eslint-config-vtex": "^12.8.11",
    "eslint-config-vtex-react": "^6.8.3",
    "husky": "^4.3.0",
    "lint-staged": "^10.5.1",
    "prettier": "^2.2.0",
    "typescript": "^3.7.5"
  }
}

```


[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 product-context/manifest.json from the product-context VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "product-context",
  "vendor": "vtex",
  "version": "0.10.1",
  "title": "VTEX Product Context",
  "description": "",
  "settingsSchema": {},
  "dependencies": {},
  "builders": {
    "react": "3.x",
    "docs": "0.x"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of admin-vbase-example/package.json from the admin-vbase-example VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "version": "0.0.0",
  "name": "admin-example",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
    "lint:locales": "intl-equalizer",
    "test": "cd ./react && yarn test"
  },
  "intl-equalizer": {
    "referenceLocale": "en",
    "localeDirectory": "messages"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged && intl-equalizer && intl-equalizer --fix"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.json": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@vtex/intl-equalizer": "^2.4.2",
    "@vtex/prettier-config": "^0.3.3",
    "eslint": "^7.4.0",
    "eslint-config-vtex": "^12.7.0",
    "eslint-config-vtex-react": "^6.7.0",
    "husky": "^4.2.5",
    "lint-staged": "^10.2.11",
    "prettier": "^2.0.5",
    "typescript": "^3.9.6"
  }
}

```


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

[User] Show me the implementation of admin-vbase-example/manifest.json from the admin-vbase-example VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "admin-vbase-example",
  "version": "0.0.2",
  "title": "Admin Example - VBase",
  "description": "Admin Example - VBase",
  "builders": {
    "react": "3.x",
    "messages": "1.x",
    "node": "6.x",
    "docs": "0.x",
    "admin": "0.x",
    "graphql": "1.x"
  },
  "dependencies": {
    "vtex.styleguide": "9.x"
  },
  "registries": [
    "smartcheckout"
  ],
  "policies": [
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "*"
      }
    },
    {
      "name": "vbase-read-write"
    }
  ],
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of service-course/course/config.json from the service-course VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "title": "VTEX IO Service Course",
  "tagline": "Building backend applications with VTEX IO",
  "description": "In this course, learn about the main possibilities of backend applications in VTEX IO. Export routes, handle events and connect with external and internal apps, to make your VTEX IO app even better and take the best out of VTEX infrastructure.",
  "languages": [
    "en"
  ],
  "steps": [
    {
      "folder": "00-services",
      "title": {
        "en": "Services in VTEX IO"
      },
      "description": {
        "en": "On this step, we have an overview of services in VTEX IO and brief explanation of backend possibilities"
      },
      "challenge": "none"
    }
  ]
}

```


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

[Assistant]
Here's the implementation:

```markdown
# Service Course

> **This content was moved to another place. We no longer support these courses and learning portal.**

To check out this course in our new platform, you can click [here](https://developers.vtex.com/learning/docs/course-service-course-lang-en). You can also have a look at [our new landing page](https://developers.vtex.com/learning), where you can find interesing content for you!

```


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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "build": "tsc",
    "test": "yarn jest"
  },
  "dependencies": {
    "postcss": "^7.0.27",
    "ramda": "^0.27.0",
    "typescript": "3.7.3"
  },
  "devDependencies": {
    "@types/ramda": "^0.26.43"
  }
}

```


[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 service-course/course/global.d.ts from the service-course VTEX app.

[Assistant]
Here's the implementation:

```typescript
import * as ramda from 'ramda'

export {}

declare global {
  interface TestContext {
    getFile: (path: string) => Promise<string>
    parseCss: (content: string) => object
    parseJsonc: (content: string) => object
    ramda: typeof ramda
    [key: string]: any
  }

  interface TestFunctionParameters {
    ctx: TestContext
  }

  interface TestCase {
    tests: {
      description: string
      failMsg: string
      test: (param: TestFunctionParameters) => Promise<boolean> | 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 service-course/docs/README.md from the service-course VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Service Course

**Upcoming documentation:**

 - [Steps and Boilerplate](https://github.com/vtex-apps/service-course/pull/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 service-course/course/template/package.json from the service-course VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "backend-course",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\""
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@types/node": "^12.12.21",
    "@vtex/prettier-config": "^0.1.3",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.2.1",
    "lint-staged": "^10.0.2",
    "prettier": "^1.19.1",
    "typescript": "^3.7.5"
  }
}

```


[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 service-course/course/template/manifest.json from the service-course VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "backend-course",
  "vendor": "vtex",
  "version": "0.0.2",
  "title": "Backend Course",
  "description": "Reference app for the Backend Course",
  "builders": {
    "node": "6.x"
  },
  "scripts": {
    "prereleasy": "bash lint.sh"
  },
  "credentialType": "absolute",
  "policies": [],
  "dependencies": {
    "vtex.events-example": "0.x"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of service-course/course/template/node/service.json from the service-course VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "memory": 128,
  "ttl": 10,
  "timeout": 10,
  "minReplicas": 2,
  "maxReplicas": 10,
  "workers": 4,
  "routes": {
    "analytics": {
      "path": "/_v/app/analytics/realTime",
      "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 service-course/course/template/node/package.json from the service-course VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "co-body": "^6.0.0"
  },
  "devDependencies": {
    "@types/co-body": "^0.0.3",
    "@types/node": "12.x",
    "@vtex/api": "6.30.1",
    "eslint": "^6.3.0",
    "eslint-config-vtex": "^11.0.0",
    "prettier": "^1.18.2",
    "typescript": "3.8.3"
  },
  "resolutions": {
    "**/**/lodash": "^4.17.19"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty && eslint -c .eslintrc.json --fix './**/*.ts'"
  },
  "version": "0.7.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 service-course/course/template/node/index.ts from the service-course VTEX app.

[Assistant]
Here's the implementation:

```typescript
import {
  LRUCache,
  Service,
  ServiceContext,
  ParamsContext,
  RecorderState,
  method,
} from '@vtex/api'
import { Clients } from './clients'
import { analytics } from './handlers/analytics'

// 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, any>({ max: 5000 })
metrics.trackCache('status', memoryCache)

declare global {
  type Context = ServiceContext<Clients, State>

  interface State extends RecorderState {
    code: number
  }
}

export default new Service<Clients, State, ParamsContext>({
  clients: {
    implementation: Clients,
    options: {
      default: {
        retries: 2,
        timeout: 10000,
      },
    },
  },
  routes: {
    analytics: method({
      GET: [analytics],
    }),
  },
})

```


[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 service-course/course/template/node/clients/analytics.ts from the service-course VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { AppClient } from '@vtex/api'

export default class Analytics extends AppClient {}

```


[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 service-course/course/template/node/clients/index.ts from the service-course VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { IOClients } from '@vtex/api'

// Extend the default IOClients implementation with our own custom clients.
export class Clients extends IOClients {

}

```


[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 service-course/course/template/node/utils/constants.ts from the service-course VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const COURSE_ENTITY = 'course_backend_product_list'

```


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

[User] Show me the implementation of service-course/course/template/node/handlers/analytics.ts from the service-course VTEX app.

[Assistant]
Here's the implementation:

```typescript
export async function analytics(ctx: Context, next: () => Promise<any>) {
  ctx.status = 200
  ctx.body = 'OK'
  ctx.set('cache-control', 'no-cache')

  await next()
}

```


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

[Assistant]
Here's the implementation:

```markdown
# Payment Provider Framework (IO)

## ⚠ Disclaimer

This is a feature in BETA stage, which means it's on a testing phase. In case there is a new scenario that PPF is not ready, our team will take some time to perform an investigation. If it's a case that need the development of anything new, this will enter the process of prioritization of the product team. This can take some time, so we don't recommend the use of this Beta version of PPF for connectors related to stores with rollout date close (less than 3 months).

## 🐣 Getting Started

### ⬇ Cloning base repository

If you're starting a brand new project, we recommend you clone [the example repository](https://github.com/vtex-apps/payment-provider-example), as it already has all the basic configuration setup.

### 🆕 Updating project

Your first step should be to run the following command on your node folder:

```
yarn add @vtex/payment-provider
```

Afterwards, go to your ***package.json*** and make sure it has been added as a dependency with the correct version:

```
"@vtex/payment-provider": "1.x",
```

Also check in the ***package.json*** is the version of vtex/api, which should be listed in the *devDependencies* as follows:

```
"@vtex/api": "6.x",
```

(When linking your app, this version might get updated to a **later 6.x** version, which is fine.)

In case it's not listed as a **devDependency**, run the following command on your node folder:

```
yarn add -D @vtex/api
```

> ℹ **Info**: If you get any type errors or conflicts in your project related to @vtex/api, follow these steps to resolve the problem: delete the **node_modules** folder and the **yarn.lock** file from both your project root and your project's **node** folder, then run the command **yarn install -f** in both folders.

Lastly, in your ***manifest.json,*** you should check the ***builders*** section, in which you must include the ***paymentProvider*** in it's current version:

```json
"builders": {
  "node": "6.x",
  "paymentProvider": "1.x"
}
```

> ℹ **Info**: This will add policies to callback the Payment Gateway APIs and also expose Payment Provider protocol routes.

Now, in order to create your service, you must implement your payment provider connector and the service itself. To help you with them, keep reading the next sections.

## 💳 Payment Provider

This is an abstract class with the signatures of the routes functions required in your connector, according to the [protocol](https://help.vtex.com/en/tutorial/payment-provider-protocol).

You must create a new class extending the `PaymentProvider`, which must implement a function for each route. The functions will receive the request body (when there is one) as a parameter and the response must be returned as an object, such as the example shown below:

```tsx
import {
	PaymentProvider,
	// ...
} from '@vtex/payment-provider'

class YourPaymentConnector extends PaymentProvider {

	// ... implementation of the other routes functions
}
```

Typescript should automatically check for typing errors, but if you need, you can check the requests and responses signatures [here](https://developers.vtex.com/vtex-developer-docs/reference/payment-flow).

### 🏗 Payment Provider Builder

In order to specify which payment methods the connector will accept to process, you need to create a folder named ***paymentProvider*** using the following folder structure

```markdown
node
paymentProvider
manifest.json
```

Then, inside **_paymentProvider_** folder you must create a file named ***configuration.json***

```markdown
node
paymentProvider
   |--configuration.json
manifest.json
```

Next, declare the accepted payment methods, for instance:

```json
{
  "name": "MyConnector",
  "paymentMethods": [
    {
      "name": "Visa",
      "allowsSplit": "onCapture"
    },
    {
      "name": "American Express",
      "allowsSplit": "onCapture"
    },
    {
      "name": "Diners",
      "allowsSplit": "onCapture"
    },
    {
      "name": "Elo",
      "allowsSplit": "onCapture"
    },
    {
      "name": "Hipercard",
      "allowsSplit": "onCapture"
    },
    {
      "name": "Mastercard",
      "allowsSplit": "onCapture"
    },
    {
      "name": "BankInvoice",
      "allowsSplit": "onAuthorize"
    }
  ]
}
```

By doing this you don't need to declare **_/manifest_** or **_/payment-methods_** route, it will be implemented automatically by the builder.

### ⚙ Overriding Default Routes

You can also override the default generated routes by redeclaring it on ***service.json***

```json
{
  "memory": 256,
  "ttl": 10,
  "timeout": 10,
  "minReplicas": 2,
  "maxReplicas": 3,
  "routes": {
    "authorize": {
      "path": "/_v/api/my-connector/payments",
      "public": true
    },
    "cancel": {
      "path": "/_v/api/my-connector/payments/:paymentId/cancellations",
      "public": true
    },
    "settle": {
      "path": "/_v/api/my-connector/payments/:paymentId/settlements",
      "public": true
    },
    "refund": {
      "path": "/_v/api/my-connector/payments/:paymentId/refunds",
      "public": true
    },
    "inbound": {
      "path": "/_v/api/my-connector/payments/:paymentId/inbound/hooks",
      "public": true
    }
  }
}
```

Then you must specify which is the new `serviceUrl` on **_paymentProvider/configuration.json_**

```json
{
  "name": "MyConnector",
  "serviceUrl": "/_v/api/my-connector",
  "paymentMethods": [
    {
      "name": "Visa",
      "allowsSplit": "onCapture"
    },
    {
      "name": "American Express",
      "allowsSplit": "onCapture"
    },
    {
      "name": "Diners",
      "allowsSplit": "onCapture"
    },
    {
      "name": "Elo",
      "allowsSplit": "onCapture"
    },
    {
      "name": "Hipercard",
      "allowsSplit": "onCapture"
    },
    {
      "name": "Mastercard",
      "allowsSplit": "onCapture"
    },
    {
      "name": "BankInvoice",
      "allowsSplit": "onAuthorize"
    }
  ]
}
```
> ⚠ **Important**: Prefer using default generated routes!

### ⚙ Overriding the Manifest Route

The manifest route is special, it is automatically generated by the builder, our payment gateway exposes it as a proxy of your app.

Generally speaking, the manifest route makes no difference at runtime, and if you have a use case to override the default route tell us.

But, if you want to override it anyway you have to add special parameters on it:

```json
{
  "memory": 256,
  "ttl": 10,
  "timeout": 10,
  "minReplicas": 2,
  "maxReplicas": 3,
  "routes": {
    "manifest": {
        "path": "/_v/api/my-connector/manifest",
        "handler": "vtex.payment-gateway@1.x/providerManifest",
        "headers": {
          "x-provider-app": "$appVendor.$appName@$appVersion"
        },
        "public": true
      }
  }
}
```

Pay attention on `x-provider-app`. It should be updated every time that your major changes. Example:

- `vtex.payment-provider-example@1.2.3` should be `vtex.payment-provider-example@1.2.3`

The same applies to payment-methods route.

You can also omit the `handler` and `headers` parameters, by doing it you will need to implement it by your own

### ⚙ Available Configurable Options

Along with manifest fields (`paymentMethods` and `customFields`) there are another configurable options:

- `serviceUrl` _(required, default: auto-generated for IO Connectors)_
    - A valid url (can include relative paths)
- `implementsOAuth` _(default: **false**)_
    - ***true*** - The provider implements the configuration flow supporting OAuth.
    - ***false*** - The provider dosnt implements the configuration flow
- `implementsSplit` _(default: **false**)_
    - ***true*** - The provider implements can receive recipients on payment flow (capture or authorization)
    - ***false*** - The provider doesn't implements the split flow
- `usesProviderHeadersName` _(default: ***true***, for IOConnectors it should be true)_
    - ***true*** - The provider will reiceve appKey and appToken headers as ```"x-provider-api-appKey"``` & `"x-provider-api-appToken"`
    - ***false*** - The provider will reiceve appKey and appToken headers as `"x-vtex-api-appKey"` & `"x-vtex-api-appToken"`
- `usesAntifraud` _(default: **false**)_
    - ***true*** - The provider can be used along antifrauds.
    - ***false*** - The provider can't be used along antifrauds
- `usesBankInvoiceEnglishName` _(**default**: false)_
- `name` (required)
    - The connector name
- `usesSecureProxy` _(**default**: true)_
    - ***true*** - The provider can process payment without being PCI-Certified, the connector will receive a secureProxyUrl on createPayment flow, and the card encrypted data.
    - ***false*** - The provider MUST be a PCI-Certified entity, and we should receive the AoC containing the provided serviceUrl. Apps implemented within VTEX IO cannot have the secureProxy disabled, this option only works for a configuration app.
- `requiresDocument` _(**default**: false)_
    - ***true*** - The customer must include the card holder document on checkout. A new field will appear on checkout form.
    - ***false*** - The customer doesn't need to include card holder document.
- `acceptSplitPartialRefund` _(**default**: false)_
    - ***true*** - Partial refund will be sent when payment split occurs.
    - ***false*** - The connector couldn't process partial refund when payment split occurs.
- `usesAutoSettleOptions` _(**default**: false)_
    - ***true*** - The client will be able to choose the behaviour of the auto settlement in the VTEX admin configurations of the provider. The options available are the following: Use behavior recommended by the payment processor, Automatic capture immediately after payment authorization, Automatic capture immediately after anti-fraud analysis, Deactivated: Not automatically captured.
    - ***false*** - The connector won't have this dropdown configuration field for auto settlement.

### 🔁 Request a retry from Payment Gateway

A retry is required in order to develop your connector according to the [protocol](https://help.vtex.com/en/tutorial/payment-provider-protocol), so we built a function, which can be invoked like shown below:

```tsx
this.retry(request)
```

Callback flow is replaced by retry flow. Payment Providers implemented using VTEX IO are not able to callback the Payment Gateway with the Payment status updated. Instead, the retry flow allow the connector to ask the Payment Gateway to call create payment route again.
The connector should be able to respond approved/denied consistently.

![image](https://user-images.githubusercontent.com/5839364/138521406-fe3875c1-92ae-4064-aafe-c4c5de56427e.png)

### 💵 Payment Provider Service

This is a class that extends the Service from `@vtex/api`. You must invoke it passing the developed connector as a property of the first parameter and it will automatically setup the required routes for you.

```tsx
import {
	PaymentProviderService,
} from '@vtex/payment-provider'

new PaymentProviderService({
	connector: YourPaymentConnector,
})
```

By default, the Payment Provider Service declares the following routes:

- /payment-methods
- /manifest
- /payments
- /settlements
- /refunds
- /cancellations
- /inbounds

If your service requires any extra routes, you must declare them separately and use them as parameters:

```tsx
new PaymentProviderService({
	routes: newRoutes,
	connector: YourPaymentConnector,
})
```

If your connector requires any extra clients, you must also pass them in the parameters along with the connector:

```tsx
new PaymentProviderService({
	clients: NewClients,
	connector: YourPaymentConnector,
})
```

### 🔒 Using Secure Proxy

Those who aren't PCI-certified, could use Secure Proxy to make calls to a PCI-Certified endpoint.

> ⚠ **Important**: The endpoint must be allowed by VTEX Secure Proxy by sending the AOC with the wanted endpoint.

> ⚠ **Important**: Currently we only accept two Content-Types: `application/json` or `application/x-www-form-urlencoded`. Any other Content-Type will not be supported by the Secure Proxy.

In order to make calls over our Secure Proxy, you must:

1. Extend `SecureExternalClient` abstract class. In the code example below, it means that VTEX allows `http://my-pci-certified-domain.com` as one of the trusted destinations by receiving its AOC.

    ```tsx
    import { SecureExternalClient } from '@vtex/payment-provider'
    import type {
      InstanceOptions,
      IOContext
    } from '@vtex/api'
    export class MyPCICertifiedClient extends SecureExternalClient {
      constructor(protected context: IOContext, options?: InstanceOptions) {
        super('http://my-pci-certified-domain.com', context, options)
      }
      // ...
    }
    ```

2. Set secure proxy URL on the request that you want to be proxied:

    ```tsx
    import { SecureExternalClient, CardAuthorization } from '@vtex/payment-provider'
    import type {
      InstanceOptions,
      IOContext,
      RequestConfig,
    } from '@vtex/api'

    export class MyPCICertifiedClient extends SecureExternalClient {
      constructor(protected context: IOContext, options?: InstanceOptions) {
        super('http://my-pci-certified-domain.com', context, options)
      }

      public myPCIEndpoint = (cardRequest: CardAuthorization) => {
            return this.http.post(
                'my-pci-endpoint',
          {
                    holder: cardRequest.holderToken,
                    number: cardRequest.numberToken,
                  expiration: cardRequest.expiration,
                csc: cardRequest.cscToken
          },
          {
                    headers: {
                Authorization: 'my-pci-endpoint-authorization',
            },
                    secureProxy: cardRequest.secureProxyUrl,
          } as RequestConfig
        )
      }
    }
    ```

    > ℹ **Info**: SecureProxyURL is received on createPayment flow

## 🛍 Placing an Order with your new Connector

Now that we have a new connector ready to be use, we can test it entirely in the production flow
using your store's checkout. To submit a request to add an account to test IO connectors, you can use the workflow "**_Allow Account to test_**"
in the `#provider-review` slack channel.

> ❗**Attention**: The account **MUST BE ALLOWED** to use IO Connectors!

> ❗**Attention**: For processing NEW payment methods, their creation must be requested!

A prerequisite for this step is to have products for sale at your store for testing

1. Launch a beta version of your connector, e.g. `vtex.payment-provider-test@0.1.0-beta`
2. Install the beta version on `master` workspace (wait ~1 hour)
3. Go to `https://${account}.myvtex.com/admin/pci-gateway/#/affiliations/vtex-payment-provider-test-v0/`

    The format is: `${vendor}-${appName}-${appMajor}`

    ![new-configuration-production](https://user-images.githubusercontent.com/27698855/116406925-91d7ab80-a807-11eb-9a26-44e2f418df9d.png)

4. Change the toggle configuration to `Test`

5. Click save and refresh page

6. Enter again in the saved configuration and you will notice that a new field appears, called `workspace`

7. Set the `workspace` as you wish (you can leave it as `master`)

    ![new-configuration-test](https://user-images.githubusercontent.com/27698855/116406935-94d29c00-a807-11eb-80c6-190e8fd6d373.png)

8. Configure a payment condition with your newly created connector and wait 10 minutes to appear on checkout!

## 📖 Making your connector available to everyone

> ⚠ **Important**: If you want to make your connector available to all accounts, make sure to have the billing options field in your manifest

The publication process is made via app store, more info on how to do that here:

[Submitting your app in the VTEX app store](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-submitting-your-app-in-the-vtex-app-store)

After the homolog step is complete, your app needs to be installed in the account that wants to use it, and after that, a new affiliation will be available to configure it.

The app should be available at `apps.vtex.com`.

## 📄Upcoming documentation

 - [Add vbase client to persist responses](https://github.com/vtex-apps/payment-provider-example/pull/30)

```


[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 payment-provider-example/paymentProvider/configuration.json from the payment-provider-example VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "TestSuitApprover",
  "paymentMethods": [
    {
      "name": "Visa",
      "allowsSplit": "onCapture"
    },
    {
      "name": "American Express",
      "allowsSplit": "onCapture"
    },
    {
      "name": "Diners",
      "allowsSplit": "onCapture"
    },
    {
      "name": "Elo",
      "allowsSplit": "onCapture"
    },
    {
      "name": "Hipercard",
      "allowsSplit": "onCapture"
    },
    {
      "name": "Mastercard",
      "allowsSplit": "onCapture"
    },
    {
      "name": "BankInvoice",
      "allowsSplit": "onAuthorize"
    }
  ],
  "customFields": [
    {
      "name": "Client ID",
      "type": "text"
    },
    {
      "name": "Secret Token",
      "type": "password"
    },
    {
      "name": "Currency",
      "type": "select",
      "options": [
        {
          "text": "BRL",
          "value": "1"
        },
        {
          "text": "USD",
          "value": "2"
        }
      ]
    }
  ]
}

```