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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "places-graphql",
  "version": "0.4.1",
  "title": "Places GraphQL",
  "description": "Service related to address geolocation",
  "builders": {
    "docs": "0.x",
    "graphql": "1.x",
    "node": "6.x"
  },
  "settingsSchema": {
    "title": "Places GraphQL",
    "description": "Service related to address geolocation",
    "type": "object",
    "properties": {
      "apiKey": {
        "title": "API Key",
        "description": "API key used to access external geocoding service",
        "type": "string",
        "default": "API KEY"
      }
    }
  },
  "policies": [
    {
      "name": "outbound-access",
      "attrs": {
        "host": "maps.googleapis.com",
        "path": "/maps/api/*"
      }
    },
    {
      "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 encryption-service/dangerfile.js from the encryption-service 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 encryption-service/README.md from the encryption-service VTEX app.

[Assistant]
Here's the implementation:

```markdown
# encryption-service
An encryption service for the Profitshare pixel application

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "service-example",
  "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/danger": "^0.2.7",
    "@vtex/prettier-config": "^0.3.6",
    "eslint": "^7.16.0",
    "eslint-config-vtex": "^12.9.3",
    "husky": "^4.3.6",
    "lint-staged": "^10.5.3",
    "prettier": "^2.5.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 encryption-service/manifest.json from the encryption-service VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "profitshare-encryption",
  "vendor": "vtex",
  "version": "0.1.0",
  "title": "Profitshare Encryption",
  "description": "Reference app for VTEX IO Services",
  "mustUpdateAt": "2018-01-04",
  "categories": [],
  "dependencies": {},
  "builders": {
    "node": "6.x",
    "docs": "0.x"
  },
  "scripts": {
    "prereleasy": "bash lint.sh"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "outbound-access",
      "attrs": {
        "host": "httpstat.us",
        "path": "*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "profitshare.ro",
        "path": "*"
      }
    },
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    }
  ],
  "$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 pixel-app-template/package.json from the pixel-app-template 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"
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "YOURAPPNAME",
  "vendor": "vtex",
  "version": "0.0.1",
  "title": "CHANGEME",
  "description": "CHANGEME",
  "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": "YOUR APP NAME",
    "type": "object",
    "properties": {
      "gtmId": {
        "title": "SAMPLE FIELD",
        "description": "Enter the ID (GTM-XXXX) from your Google Tag Manager",
        "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 hardsport-theme/manifest.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "partnerchallenge29",
  "name": "hardsport-theme",
  "version": "0.0.3",
  "builders": {
    "styles": "1.x",
    "store": "0.x",
    "docs": "0.x"
  },
  "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"
  },
  "$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-availability/README.md from the product-availability VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Product Availability

## Description

The Product Availability component shows different messages set by the user, depending on the available quantity of the product.

It is only available to be used on the `store.product` block, in your product page.

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

## Table of Contents

- [Usage](#usage)
  - [Blocks API](#blocks-api)
    - [Configuration](#configuration)
  - [Styles API](#styles-api)
    - [CSS Namespaces](#css-namespaces)
- [Troubleshooting](#troubleshooting)
- [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 or override the default CSS you need import it in your dependencies on `manifest.json` file.

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

Then, add `product-availability` block to your `blocks.json`

Now, you can change the behavior of the `product-availability` block that is in the minicart. See an example of how to configure **without** showing availability:

```json
  "product-availability": {
    "props": {
      "threshold":"10",
      "lowStockMessage":"Only {quantity} left!",
      "highStockMessage":"Item in stock!"
    }
  }
```

See an example of how to configure **showing availability**:

```json
  "product-availability": {
    "props": {
      "showAvailability": "stock",
      "showAvailabilityMessage": "There are {quantity} available!"
    }
  }
```

### Blocks API

When implementing this app as a block, various inner blocks may be available. The following interface lists the available blocks within product-availability and describes if they are required or optional.

```json
{
  "product-availability": {
    "component": "ProductAvailability"
  }
}
```

For now this block does not have any required or optional blocks.

#### Configuration

Through the Storefront, you can change the product-availability's behavior and interface. However, you also can make in your theme app, as Store theme does.

| Prop name           | Type      | Description                                                                                |
| ------------------- | --------- | ------------------------------------------------------------------------------------------- |
| `threshold`     | `Number` | DefineMinimum quantity that makes low stock message appear (if message is set). Default: 0    |
| `lowStockMessage`        | `String` | String to be shown to user when stock is lower than threshold. Should have {quantity} inside the given string, to be replaced for the threshold property. Example: \"Only {quantity} left!\". Leave empty to not show. Default: ""              |
| `highStockMessage`  | `String` | String to be shown when stock is higher or equal than threshold. If left empty, won\'t show. Default: ""                                                              |
| `showAvailability`  | `'disabled' \ 'stock'` | Enables the possibility to show the available items instead of lowStockMessage or highStockMessage. Default `'disabled'`. To enable it, string should be `'stock'`                                                     |
| `showAvailabilityMessage`  | `String` | String to be shown when show available option is true. Should have {quantity} inside the given string, to be replaced for the available property. Example: \"There are {quantity} available!\". Leave empty to not show. Default: ""                                                              |

### 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.product-availability.css` inside the `styles/css` folder. Add your custom styles:

```css
.container {
  margin-top: 10px;
}
```

#### CSS Namespaces

Below, we describe the namespaces that are defined in the product-availability.

| Token name                 | Component                                                                                | Description                                                   |
| -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
| `container`                | [index](https://github.com/vtex-apps/product-availability/blob/master/react/components/ProductAvailability.tsx) | The main container of `ProductAvailability`                      |
| `lowStockText`          | [index](https://github.com/vtex-apps/product-availability/blob/master/react/components/LowStock.tsx)    |  Normal text for the low stock message.
| `lowStockHighlight`           | [index](https://github.com/vtex-apps/product-availability/blob/master/react/components/LowStock.tsx)   |  Number of the low stock message that is supposed to be highlighted.  |
| `highStockText`           | [index](https://github.com/vtex-apps/product-availability/blob/master/react/components/HighStock.tsx)   | Text of the hight stock message.    |
| `showAvailableText`           | [index](https://github.com/vtex-apps/product-availability/blob/master/react/components/ShowAvailable.tsx)   | Text of the show available message.    |
| `showAvailableTextHighlight`           | [index](https://github.com/vtex-apps/product-availability/blob/master/react/components/ShowAvailable.tsx)   | Number of the available items that is supposed to be highlighted.

## Troubleshooting

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

## Tests

To execute our tests go to `react/` folder and run `yarn test`

### Travis CI

[![Build Status](https://travis-ci.org/vtex-apps/product-availability.svg?branch=master)](https://travis-ci.org/vtex-apps/product-availability)
[![Coverage Status](https://coveralls.io/repos/github/vtex-apps/product-availability/badge.svg?branch=master)](https://coveralls.io/github/vtex-apps/product-availability?branch=master)

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "product-availability",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "test": "cd ./react && yarn test",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
    "postinstall": "husky install"
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@vtex/prettier-config": "^0.1.4",
    "eslint": "^7.12.1",
    "eslint-config-vtex": "^12.3.2",
    "eslint-config-vtex-react": "^6.3.2",
    "husky": "^5.0.9",
    "lint-staged": "^10.1.1",
    "prettier": "^2.0.2",
    "typescript": "^3.8.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 product-availability/manifest.json from the product-availability VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "product-availability",
  "version": "0.3.2",
  "title": "Product Availability",
  "description": "Show different messages depending on your product available quantity",
  "defaultLocale": "en-US",
  "builders": {
    "store": "0.x",
    "react": "3.x",
    "docs": "0.x",
    "messages": "1.x"
  },
  "mustUpdateAt": "2019-04-02",
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {
    "vtex.product-context": "0.x",
    "vtex.css-handles": "1.x",
    "vtex.native-types": "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 favourite-colors/dangerfile.js from the favourite-colors 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 favourite-colors/package.json from the favourite-colors VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "favourite-colors",
  "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 favourite-colors/manifest.json from the favourite-colors VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "favourite-colors",
  "vendor": "vtexarg",
  "version": "0.0.3",
  "title": "Service Example",
  "description": "Reference app for VTEX IO Services",
  "mustUpdateAt": "2018-01-04",
  "categories": [],
  "dependencies": {
    "vtex.styleguide": "9.x",
    "vtex.css-handles": "0.x"
  },
  "builders": {
    "node": "6.x",
    "docs": "0.x",
    "graphql": "1.x",
    "store": "0.x",
    "react": "3.x"
  },
  "scripts": {
    "prereleasy": "bash lint.sh"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "outbound-access",
      "attrs": {
        "host": "*.vtexcommercestable.com.br",
        "path": "/api/dataentities/*"
      }
    },
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    },
    {
      "name": "ADMIN_DS"
    },
    {
      "name": "POWER_USER_DS"
    }
  ],
  "$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 return-app/package.json from the return-app VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "return-app",
  "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": "^1.0.0",
    "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.2",
    "prettier": "^2.0.5",
    "typescript": "^3.9.6"
  },
  "dependencies": {
    "@typescript-eslint/eslint-plugin": "^4.14.1",
    "@typescript-eslint/parser": "^4.14.1",
    "axios": "^0.20.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 return-app/manifest.json from the return-app VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "return-app",
  "version": "3.11.0",
  "title": "Return app",
  "description": "Return app",
  "dependencies": {
    "vtex.styleguide": "9.x",
    "vtex.format-currency": "0.x",
    "vtex.my-account": "1.x",
    "vtex.my-account-commons": "1.x",
    "vtex.render-runtime": "8.x",
    "vtex.css-handles": "0.x",
    "vtex.easypost": "0.x",
    "vtex.tenant-graphql": "0.x",
    "vtex.catalog-graphql": "1.x"
  },
  "builders": {
    "admin": "0.x",
    "react": "3.x",
    "messages": "1.x",
    "docs": "0.x",
    "store": "0.x",
    "node": "6.x",
    "graphql": "1.x",
    "masterdata": "1.x"
  },
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "outbound-access",
      "attrs": {
        "host": "{{account}}.vtexcommercestable.com.br",
        "path": "/api/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/oms/pvt/orders/*"
      }
    },
    {
      "name": "vbase-read-write"
    },
    {
      "name": "ADMIN_DS"
    },
    {
      "name": "POWER_USER_DS"
    },
    {
      "name": "OMSViewer"
    },
    {
      "name": "ListOrders"
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "api.vtex.com",
        "path": "/dataentities/*"
      }
    },
    {
      "name": "sphinx-is-admin"
    },
    {
      "name": "vtex.catalog-graphql:resolve-graphql"
    }
  ],
  "billingOptions": {
    "termsURL": "https://compliance.vtex.com/gdpr/policies/vtex-privacy-policy",
    "support": {
      "url": "https://support.vtex.com/hc/requests"
    },
    "free": true
  },
  "$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 render-guide/README.md from the render-guide VTEX app.

[Assistant]
Here's the implementation:

```markdown
  # VTEX IO Web Framework Best-Practices

  ## Welcome
  While coding apps, developers face common problems and patterns that are not strictly related to their business logic, like pagination and editing entities. To help you focuss more on your business logic, and less on reinventing the wheel, this repo was created aimming to contain all common patterns, all while respecting **Web Framework's** best practices and performance.

  ## What can I learn in this code base?
  In this repo you will learn how to:

  - Use [VTEX Styleguide](https://styleguide.vtex.com/)
  - Internationalize your app
  - GraphQL (Back-End):
    - Architecture a GraphQL Schema
    - Create resolvers
    - Use Datasources
  - Front-End
    - Use extension points
    - Automatic cache updates
    - Preview with GraphQL cache
    - Pagination

  ## Can I use this repo in my projects ?
  Sure! this repository was designed with this goal in mind. If you are not able to easily port this code into your app, feel free to make a PR and start [contributing](https://github.com/vtex-apps/awesome-io#contributing).

  ## Getting Started
  This repo is an IO app like any other, so getting started is easy, just clone it, open your terminal, and type:

  \`\`\`sh
  vtex link
  \`\`\`

  just enter the \`/guide\` route and play a little

  ## How to read this repo
  An antipattern present in this repo is that the front and back-end code are in the same app. Usually they are split into different apps, given their differences in development cycle. Also, if your project is big enought, it's suggested you split your front-end app into a components app and a **Pages** app (app that places and instanciates these components). For the sake of simplicity and example efficiency, all these apps are joined into this one

  ### Basic architecture
  Since *web-framework-guide* is a VTEX IO app like any other, its folder structure is well known. In the root folder you can find a \`manifest.json\`, containing all of the app's metadata, like name, vendor, version etc. Also, you will find the following folders, each one matching it's corresponding builder

  - node - *where you actually implement your back-end app*
  - graphql - *where you define your graphql schema*
  - react - *where you write your react components*
  - pages - *where you place and instanciate the components*

  ### What if I didn't understand something ?
  If you didn't understand something or if you think this doc is incomplete, please open an issue in GitHub!

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "web-framework-guide",
  "vendor": "vtex",
  "version": "0.0.0",
  "title": "VTEX IO Web Framework Guide",
  "description": "A sample app for introducing some VTEX IO Web Framework concepts and best practices",
  "scripts": {
    "prereleasy": "bash pre.sh"
  },
  "builders": {
    "pages": "1.x",
    "react": "3.x"
  },
  "dependencies": {
    "vtex.graphql-example": "0.x",
    "vtex.styleguide": "9.x"
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "order-placed",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
    "test": "yarn --cwd react test",
    "locales:lint": "intl-equalizer",
    "locales:fix": "intl-equalizer --fix",
    "verify": "yarn lint && yarn locales:lint && yarn test"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged && yarn locales:lint && yarn locales:fix"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@types/node": "^14.0.13",
    "@vtex/intl-equalizer": "^2.4.2",
    "@vtex/prettier-config": "^0.3.1",
    "eslint": "^7.3.0",
    "eslint-config-vtex": "^12.5.1",
    "eslint-config-vtex-react": "^6.5.1",
    "husky": "^4.2.5",
    "lint-staged": "^10.2.11",
    "prettier": "^2.0.5",
    "typescript": "^3.9.5"
  },
  "version": "1.3.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 order-placed/manifest.json from the order-placed VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "order-placed",
  "version": "2.19.0",
  "title": "Order Placed",
  "description": "",
  "registries": [
    "smartcheckout"
  ],
  "scripts": {
    "postreleasy": "vtex publish --public"
  },
  "builders": {
    "react": "3.x",
    "store": "0.x",
    "messages": "1.x",
    "docs": "0.x"
  },
  "dependencies": {
    "vtex.order-placed-graphql": "1.x",
    "vtex.styleguide": "9.x",
    "vtex.order-details": "1.x",
    "vtex.shipping-estimate-translator": "2.x",
    "vtex.address-form": "4.x",
    "vtex.profile-form": "3.x",
    "vtex.pixel-manager": "1.x",
    "vtex.pwa-components": "0.x",
    "vtex.store-resources": "0.x",
    "vtex.totalizer-translator": "2.x",
    "vtex.flex-layout": "0.x",
    "vtex.responsive-layout": "0.x",
    "vtex.css-handles": "0.x",
    "vtex.responsive-values": "0.x"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "outbound-access",
      "attrs": {
        "host": "{{account}}.vtexcommercestable.com.br",
        "path": "/api/checkout/pub/orders/*"
      }
    }
  ],
  "$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 speedy/nodemon.json from the speedy VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "watch": ["src/"],
  "ext": "js,json",
  "exec": "yarn build"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "speedy",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ignore-pattern pixel --ext js,jsx,ts,tsx .",
    "build": "webpack",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
    "dev": "nodemon"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "src*.{json,graphql,gql}": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.23.9",
    "@babel/preset-env": "^7.23.9",
    "@vtex/prettier-config": "^0.1.3",
    "babel-loader": "^9.1.3",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.2.1",
    "eslint-config-vtex-react": "^6.2.1",
    "html-webpack-inline-source-plugin": "^1.0.0-beta.2",
    "html-webpack-plugin": "^5.6.0",
    "husky": "^4.2.0",
    "inline-chunk-html-plugin": "^1.1.1",
    "lint-staged": "^10.0.2",
    "nodemon": "^3.1.0",
    "prettier": "^1.19.1",
    "pug": "^2.0.2",
    "pug-loader": "^2.4.0",
    "terser-webpack-plugin": "^5.3.10",
    "typescript": "^3.7.5",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4"
  },
  "dependencies": {
    "@builder.io/partytown": "^0.10.1",
    "copy-webpack-plugin": "^12.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 speedy/manifest.json from the speedy VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "speedy",
  "vendor": "vtex",
  "version": "0.7.2",
  "title": "Speedy",
  "description": "Speedy is a VTEX IO app that improves the performance of your store by optimizing the loading of third-party scripts, prefetching data. It will allow you to improve the TBT and INP metrics",
  "scripts": {
    "postreleasy": "npm run build && git add . && git commit -m 'build' && git push && vtex publish --verbose"
  },
  "billingOptions": {
    "type": "free",
    "support": {
      "url": "https://support.vtex.com/hc/requests"
    },
    "availableCountries": [
      "*"
    ]
  },
  "builders": {
    "pixel": "0.x",
    "docs": "0.x"
  },
  "dependencies": {
    "vtex.pixel-interfaces": "1.x",
    "vtex.pixel-server": "0.x",
    "vtex.pixel-server-ui": "0.x"
  },
  "policies": [
    {
      "name": "pixel"
    }
  ],
  "settingsSchema": {
    "title": "VTEX Speedy",
    "type": "object",
    "bindingBounded": true,
    "properties": {
      "timeToPush3rdParty": {
        "title": "Time in seconds to push the 3rd party",
        "description": "Time in seconds ex: 5s (default is 10s)",
        "type": "string"
      },
      "block3rdParty": {
        "title": "Block all 3rd party",
        "description": "Block all 3rd party",
        "type": "boolean"
      },
      "customTimeToPush": {
        "title": "[CUSTOM] - List of 3rd party to push",
        "description": "Pattern: domain,seconds;domain,seconds;",
        "type": "string",
        "default": "googletagmanager,0;"
      },
      "preconnect": {
        "title": "[PRECONNECT] - List of domains to preconnect",
        "description": "Pattern: domain;domain;domain...",
        "type": "string",
        "default": "www.googletagmanager.com;fonts.googleapis.com;fonts.gstatic.com"
      },
      "blacklist": {
        "title": "[BLACKLIST] - List of domains to block",
        "description": "Pattern: domain;domain;domain...",
        "type": "string"
      },
      "enablePartytown": {
        "title": "Enable Partytown integration ",
        "description": "Use with caution and enable the scripts on the on Pixel UI",
        "type": "boolean",
        "default": false
      },
      "partytownForward": {
        "title": "Partytown Forward",
        "description": "Visit the Partytown documentation to get more details, separated by comma",
        "type": "string",
        "default": "dataLayer.push,fbq,gtag"
      },
      "prefetchAnchors": {
        "title": "Prefetch Anchors",
        "description": "Prefetch anchors on the page",
        "type": "boolean",
        "default": true
      },
      "prefetchAnchorsDesktop": {
        "title": "Prefetch Anchors Desktop",
        "description": "Prefetch anchors on the page for desktop",
        "type": "boolean",
        "default": false
      },
      "prefetchAnchorsMobile": {
        "title": "Prefetch Anchors Mobile",
        "description": "Prefetch anchors on the page for mobile",
        "type": "boolean",
        "default": true
      },
      "queueDelay": {
        "title": "Queue Delay",
        "description": "Delay in seconds to load each item of the queue",
        "type": "string",
        "default": "1.5"
      },
      "prefetchRule": {
        "title": "Prefetch Anchors Rule",
        "description": "Put the classNames anchors that should be prefetched separated by comma (You can add manually 'speedy')",
        "type": "string",
        "default": "product-summary"
      }
    }
  },
  "$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-review-interfaces/README.md from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Product Review Interfaces

> Interfaces for a product review app.

This app provides extensible interfaces that can be used by the `vtex.store` and a theme app. A review app would depend on this app and extend the interfaces provided to become available in the store.

You can see an example of a review app [here](/example).

```


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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "product-review-interfaces",
  "version": "1.0.2",
  "title": "Product Review Interfaces",
  "description": "Interfaces for a product review app",
  "builders": {
    "messages": "1.x",
    "store": "0.x",
    "react": "3.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2019-04-02",
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {},
  "$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 icommkt/package.json from the icommkt 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"
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "icommkt",
  "vendor": "vtex",
  "version": "0.0.1",
  "title": "Icommkt",
  "description": "",
  "billingOptions": {
    "termsURL": "",
    "support": {
      "url": "https://support.vtex.com/hc/requests"
    },
    "free": true
  },
  "builders": {
    "react": "3.x",
    "store": "0.x",
    "pixel": "0.x",
    "docs": "0.x"
  },
  "dependencies": {
    "vtex.pixel-interfaces": "1.x"
  },
  "settingsSchema": {
    "title": "Icommkt",
    "type": "object",
    "properties": {
      "url": {
        "title": "Public domain",
        "description": "Enter the domain of the store. Example: www.store.com",
        "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 checkout-summary/package.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "checkout-summary",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,js,json}\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.json": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@types/node": "^12.12.21",
    "@vtex/prettier-config": "^0.3.1",
    "eslint": "^7.4.0",
    "eslint-config-vtex": "^12.7.0",
    "eslint-config-vtex-react": "^6.7.0",
    "husky": "^4.2.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 checkout-summary/manifest.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "checkout-summary",
  "version": "0.23.0",
  "title": "IO Summary Component",
  "description": "IO summary component to checkout",
  "defaultLocale": "pt-BR",
  "builders": {
    "messages": "1.x",
    "store": "0.x",
    "react": "3.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2019-04-02",
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {
    "vtex.styleguide": "9.x",
    "vtex.coupon": "0.x",
    "vtex.format-currency": "0.x",
    "vtex.order-coupon": "0.x",
    "vtex.formatted-price": "0.x",
    "vtex.flex-layout": "0.x",
    "vtex.css-handles": "0.x",
    "vtex.store-drawer": "0.x",
    "vtex.native-types": "0.x",
    "vtex.checkout-graphql": "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 salesforce-connector/dangerfile.js from the salesforce-connector 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 salesforce-connector/package.json from the salesforce-connector VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "service-example",
  "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"
    ],
    "messages/*.json": [
      "yarn lint:locales"
    ]
  },
  "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",
    "eslint-config-vtex-react": "^6.8.3",
    "husky": "^4.3.6",
    "lint-staged": "^10.5.3",
    "prettier": "^2.2.1",
    "typescript": "^3.7.5"
  },
  "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 salesforce-connector/manifest.json from the salesforce-connector VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "salesforce-connector",
  "vendor": "vtex",
  "version": "3.0.5",
  "title": "Salesforce Connector",
  "description": "Reference app for VTEX IO Services",
  "mustUpdateAt": "2018-01-04",
  "categories": [],
  "billingOptions": {
    "type": "free",
    "support": {
      "email": "vtex-apps-support@titamedia.com"
    },
    "availableCountries": ["*"]
  },
  "dependencies": {
    "vtex.styleguide": "9.x"
  },
  "builders": {
    "node": "6.x",
    "docs": "0.x",
    "react": "3.x",
    "admin": "0.x",
    "messages": "1.x"
  },
  "scripts": {},
  "credentialType": "absolute",
  "policies": [
    {
      "name": "outbound-access",
      "attrs": {
        "host": "*",
        "path": "*"
      }
    },
    {
      "name": "OMSViewer"
    },
    {
      "name": "ADMIN_DS"
    },
    {
      "name": "POWER_USER_DS"
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "httpstat.us",
        "path": "*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "{{account}}.vtexcommercestable.com.br",
        "path": "/api/*"
      }
    },
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    },
    {
      "name": "read-workspace-apps-assets"
    },
    {
      "name": "update-app-settings"
    },
    {
      "name": "install-apps"
    }
  ],
  "resolutions": {
    "graphql": "14.2.1",
    "expect": "28.1.3",
    "pretty-format": "28.1.3"
  },
  "$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 sandbox/README.md from the sandbox VTEX app.

[Assistant]
Here's the implementation:

```markdown
# VTEX IO Sandbox Component

Allows mounting arbitrary HTML content in extension points from the comfort and safety of an iframe.

## Usage

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

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

### Example block

```
  "sandbox.product": {
    "props": {
      "width": "200px",
      "height": "60px",
      "initialContent": "
initial
",
      "allowCookies": true
    }
  },
  "sandbox.order": {
    "props": {
      "width": "200px",
      "height": "60px",
      "initialContent": "",
      "allowCookies": true
    }
  },
  "sandbox#home": {
    "props": {
      "width": "200px",
      "height": "60px",
      "initialContent": "
home
",
      "allowCookies": true
    }
  },
  "store.home": {
    "blocks": ["carousel#home", "shelf#home", "sandbox#home"]
  },
  "store.product": {
    "blocks": [
      "product-details#default",
      "sandbox#product"
    ]
  },
```

```


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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "sandbox",
  "version": "0.5.1",
  "title": "IO Sandbox Component",
  "description": "IO Sandbox component",
  "defaultLocale": "pt-BR",
  "builders": {
    "messages": "1.x",
    "store": "0.x",
    "react": "3.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2019-04-02",
  "dependencies": {
    "vtex.product-context": "0.x",
    "vtex.store-resources": "0.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 adyen-platforms/package.json from the adyen-platforms VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "adyen-platforms",
  "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.1.4",
    "eslint": "^7.12.1",
    "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"
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "adyen-platforms",
  "vendor": "vtex",
  "version": "0.4.1",
  "title": "Adyen-platforms",
  "description": "Integration with Adyen for Platforms",
  "mustUpdateAt": "2022-01-04",
  "categories": [],
  "dependencies": {
    "vtex.styleguide": "9.x",
    "vtex.apps-graphql": "2.x",
    "vtex.store": "2.x",
    "vtex.flex-layout": "0.x",
    "vtex.rich-text": "0.x",
    "vtex.store-graphql": "2.x",
    "vtex.render-runtime": "8.x",
    "vtex.css-handles": "0.x",
    "vtex.store-sitemap": "2.x"
  },
  "builders": {
    "docs": "0.x",
    "graphql": "1.x",
    "node": "6.x",
    "react": "3.x",
    "admin": "0.x",
    "store": "0.x",
    "messages": "1.x"
  },
  "scripts": {
    "prereleasy": "bash lint.sh"
  },
  "credentialType": "absolute",
  "billingOptions": {
    "termsURL": "https://compliance.vtex.com/gdpr/policies/vtex-privacy-policy",
    "support": {
      "url": "https://support.vtex.com/hc/requests"
    },
    "free": true
  },
  "policies": [
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    },
    {
      "name": "graphql-query"
    },
    {
      "name": "view-seller"
    },
    {
      "name": "MarketplaceNetwork"
    },
    {
      "name": "ADMIN_CRM"
    },
    {
      "name": "POWER_USER_CRM"
    },
    {
      "name": "save-seller"
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "cal-test.adyen.com",
        "path": "/cal/services/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "cal-live.adyen.com",
        "path": "/cal/services/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "api.vtex.com",
        "path": "/dataentities/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "{{account}}.vtexpayments.com.br",
        "path": "/*"
      }
    },
    {
      "name": "ViewPayments"
    },
    {
      "name": "ManageStore"
    },
    {
      "name": "ADMIN_DS"
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "{{account}}.vtexcommercestable.com.br",
        "path": "/api/*"
      }
    },
    {
      "name": "vbase-read-write"
    },
    {
      "name": "OMSViewer"
    },
    {
      "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 twitter-meta-tags/package.json from the twitter-meta-tags VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "twitter-meta-tags",
  "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.3",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.2.1",
    "eslint-config-vtex-react": "^6.2.1",
    "husky": "^4.2.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 twitter-meta-tags/manifest.json from the twitter-meta-tags VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "twitter-meta-tags",
  "version": "0.0.1",
  "title": "Twitter Meta Tags",
  "description": "Add Twitter meta tags to a store's product page.",
  "builders": {
    "react": "3.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2019-04-02",
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {
    "vtex.product-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 connector-adyen/package.json from the connector-adyen VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "connector-adyen",
  "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.1",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.2.1",
    "eslint-config-vtex-react": "^6.3.2",
    "husky": "^4.2.0",
    "lint-staged": "^10.0.2",
    "prettier": "^2.0.5",
    "typescript": "^3.7.5"
  },
  "dependencies": {}
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "connector-adyen",
  "vendor": "vtex",
  "version": "0.2.0",
  "title": "Adyen",
  "description": "Payment Provider integration for Adyen",
  "dependencies": {
    "vtex.styleguide": "9.x",
    "vtex.apps-graphql": "2.x"
  },
  "builders": {
    "paymentProvider": "1.x",
    "node": "6.x",
    "docs": "0.x",
    "admin": "0.x",
    "react": "3.x",
    "graphql": "1.x",
    "messages": "1.x"
  },
  "policies": [
    {
      "name": "vbase-read-write"
    },
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    },
    {
      "name": "ViewPayments"
    },
    {
      "name": "MakePayments"
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "{{account}}.myvtex.com/_v/api/adyen-platforms",
        "path": "/v0/hook"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "checkout-test.adyen.com",
        "path": "/checkout/v67/payments"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "heimdall.vtexpayments.com.br",
        "path": "/api/payment-provider/callback/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "{{account}}.vtexpayments.com.br",
        "path": "/*"
      }
    }
  ],
  "$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 components-financial-commission/dangerfile.js from the components-financial-commission 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 components-financial-commission/package.json from the components-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "components-financial-commission",
  "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": {
    "@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",
    "@vtex/danger": "^0.2.7"
  },
  "version": "0.0.0",
  "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 components-financial-commission/manifest.json from the components-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "components-financial-commission",
  "version": "0.0.13",
  "title": "Frontend components for financial commission app",
  "description": "Frontend components for financial commission app",
  "builders": {
    "react": "3.x",
    "messages": "1.x",
    "docs": "0.x"
  },
  "dependencies": {
    "vtex.styleguide": "9.x",
    "vtex.render-runtime": "8.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 pixel-interfaces/manifest.json from the pixel-interfaces VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "pixel-interfaces",
  "version": "1.1.1",
  "title": "Pixel Interfaces",
  "description": "Pixel Interfaces",
  "builders": {
    "store": "0.x",
    "docs": "0.x"
  },
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  }
}

```


[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 policies-example-3/package.json from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "admin-example",
  "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.2.0",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.4.0",
    "eslint-config-vtex-react": "^6.4.0",
    "husky": "^4.2.5",
    "lint-staged": "^10.2.2",
    "prettier": "^2.0.5",
    "typescript": "^3.8.3",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.131.0/public/@types/vtex.render-runtime"
  },
  "dependencies": {
    "@types/jest": "^27.0.2",
    "@types/mocha": "^9.0.0",
    "@vtex/clients": "^2.15.2",
    "babel-plugin-react-intl": "^8.2.25",
    "react-apollo": "^3.1.5",
    "react-intl": "^5.20.7",
    "z": "1.0.9"
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "policies-example-3",
  "vendor": "vtex",
  "version": "0.0.13",
  "title": "Example using policies",
  "description": "",
  "mustUpdateAt": "2022-08-28",
  "scripts": {
    "postreleasy": "vtex publish"
  },
  "dependencies": {
    "vtex.styleguide": "9.x",
    "vtex.policies-example": "0.x",
    "vtex.policies-example-2": "0.x"
  },
  "policies": [
    {
      "name": "vtex.policies-example-2:constructor-policie"
    }
  ],
  "builders": {
    "react": "3.x",
    "admin": "0.x",
    "messages": "1.x",
    "docs": "0.x",
    "node": "6.x",
    "graphql": "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 session-client/package.json from the session-client VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "version": "0.0.0",
  "name": "session-client",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
    "test": "cd ./react && yarn test"
  },
  "intl-equalizer": {
    "referenceLocale": "en",
    "localeDirectory": "messages"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.json": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@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"
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "session-client",
  "vendor": "vtex",
  "version": "1.0.5",
  "title": "Session Client",
  "description": "",
  "categories": [],
  "dependencies": {},
  "builders": {
    "docs": "0.x",
    "graphql": "1.x",
    "node": "6.x",
    "react": "3.x"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "outbound-access",
      "attrs": {
        "host": "{{account}}.vtexcommercestable.com.br",
        "path": "/api/sessions/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/segments/*"
      }
    },
    {
      "name": "Get_Account_By_Identifier"
    }
  ],
  "$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-quotes/package.json from the b2b-quotes VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.b2b-quotes",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
    "cy-r": "cd ./cy-runner && node cy-runner"
  },
  "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.1",
    "eslint": "^7.4.0",
    "eslint-config-vtex": "^12.7.0",
    "eslint-config-vtex-react": "^6.7.0",
    "husky": "4.2.3",
    "lint-staged": "10.1.1",
    "prettier": "2.0.2",
    "typescript": "3.8.3"
  },
  "version": "1.0.0",
  "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 b2b-quotes/manifest.json from the b2b-quotes VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "b2b-quotes",
  "version": "3.0.3",
  "title": "B2B Quotes & Carts",
  "description": "Allows B2B Customers to request quotes from their sales reps and/or save carts for future use",
  "builders": {
    "admin": "0.x",
    "react": "3.x",
    "store": "0.x",
    "messages": "1.x",
    "docs": "0.x",
    "vtex.storefront-permissions": "3.x"
  },
  "dependencies": {
    "vtex.storefront-permissions": "3.x",
    "vtex.b2b-organizations-graphql": "2.x",
    "vtex.b2b-quotes-graphql": "4.x",
    "vtex.checkout-graphql": "0.x",
    "vtex.order-manager": "0.x",
    "vtex.store": "2.x",
    "vtex.styleguide": "9.x",
    "vtex.render-runtime": "8.x",
    "vtex.checkout-resources": "0.x",
    "vtex.order-auth-graphql": "0.x",
    "vtex.store-graphql": "2.x",
    "vtex.css-handles": "0.x",
    "vtex.format-currency": "0.x",
    "vtex.my-account": "1.x",
    "vtex.my-account-commons": "1.x"
  },
  "registries": [
    "smartcheckout"
  ],
  "policies": [
    {
      "name": "buyer_organization_view"
    },
    {
      "name": "buyer_organization_edit"
    }
  ],
  "$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 seller-financial-commission/dangerfile.js from the seller-financial-commission 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 seller-financial-commission/package.json from the seller-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "seller-financial-commission",
  "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": "^1.0.0",
    "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.0",
  "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 seller-financial-commission/manifest.json from the seller-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "seller-financial-commission",
  "version": "0.1.3",
  "title": "Financial commission for sellers",
  "description": "",
  "builders": {
    "react": "3.x",
    "docs": "0.x",
    "admin": "0.x",
    "node": "6.x",
    "messages": "1.x",
    "graphql": "1.x"
  },
  "dependencies": {
    "vtex.components-financial-commission": "0.x"
  },
  "registries": [
    "smartcheckout"
  ],
  "policies": [
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/fulfillment/pvt/affiliates"
      }
    }
  ],
  "billingOptions": {
    "support": {
      "url": "https://support.vtex.com/hc/requests"
    },
    "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 seller-selector/package.json from the seller-selector VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "seller-selector",
  "version": "0.0.0",
  "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.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"
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "seller-selector",
  "version": "0.6.0",
  "title": "Seller Selector",
  "description": "Seller Selector on Products",
  "builders": {
    "react": "3.x",
    "messages": "1.x",
    "docs": "0.x",
    "store": "0.x"
  },
  "dependencies": {
    "vtex.native-types": "0.x",
    "vtex.styleguide": "9.x",
    "vtex.css-handles": "0.x",
    "vtex.product-context": "0.x",
    "vtex.store": "2.x",
    "vtex.store-components": "3.x",
    "vtex.store-graphql": "2.x",
    "vtex.shipping-estimate-translator": "2.x",
    "vtex.render-runtime": "8.x",
    "vtex.flex-layout": "0.x",
    "vtex.format-currency": "0.x",
    "vtex.address-form": "4.x",
    "vtex.add-to-cart-button": "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 orders-feed-example/package.json from the orders-feed-example VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "orders-feed-example",
  "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.1.3",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.2.1",
    "husky": "^4.2.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 orders-feed-example/manifest.json from the orders-feed-example VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "orders-feed-example",
  "vendor": "vtex",
  "version": "0.2.2",
  "title": "Orders Feed Example",
  "description": "Boilerplate app for receving order status events",
  "categories": [],
  "dependencies": {},
  "builders": {
    "node": "6.x",
    "docs": "0.x"
  },
  "scripts": {
    "prereleasy": "bash lint.sh"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    }
  ],
  "$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 email-checkout-conflict/manifest.json from the email-checkout-conflict VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "email-checkout-conflict",
  "vendor": "vtex",
  "version": "0.3.0",
  "title": "Emails conflicts in checkout",
  "description": "Compares identified user with the email used to login",
  "builders": {
    "docs": "0.x",
    "checkout-ui-custom": "0.x"
  },
  "scripts": {
    "prereleasy": "bash lint.sh"
  },
  "credentialType": "absolute",
  "$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 bonytos-de-tema/README.md from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Hackatheme project
This is a project developed in an internal hackathon focused on developing store theme boilerplates.

This store theme is for Beauty Stores segment.

The final product for this experiemnt can be found here:
https://github.com/vtex/storetheme-natural-beauty

Made with love and 🥑 by:
## Bonytos de Tema
The best team.

```


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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "bonytosdethema",
  "version": "0.1.1",
  "builders": {
    "styles": "1.x",
    "store": "0.x",
    "sitemap": "0.x"
  },
  "mustUpdateAt": "2020-10-31",
  "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"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema",
  "title": "Bonytos de Tema",
  "description": "The best store ever",
  "registries": [
    "smartcheckout"
  ]
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "baseUrl": "https://<workspace>--<account>.myvtex.com",
  "specCallback": true,
  "completeCallback": true,
  "viewportWidth": 1920,
  "viewportHeight": 1080,
  "pluginsFile": "cypress/plugins/index.js",
  "supportFile": "cypress/support/index.ts"
}

```


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

[Assistant]
Here's the implementation:

```markdown
<!-- omit in toc -->
# Cypress Example
A reference app showcasing how to declare Cypress end-to-end tests and run them on IO's Test Architecture.

- [Getting started](#getting-started)
- [Configuration](#configuration)
  - [Basic](#basic)
  - [Advanced](#advanced)
- [Authenticating to *.myvtex.com](#authenticating-to-myvtexcom)
- [Notes on using TypeScript](#notes-on-using-typescript)
- [Test callbacks](#test-callbacks)
- [Running Cypress locally](#running-cypress-locally)

## Getting started
First of all, you should have a working Cypress test suite. If you do, skip to [Basic Configuration](#basic).

Otherwise, to get the basic Cypress structure:

- Make sure you have `cypress` (and, optionally, `typescript`) as a dev dependency:
  - `$ yarn add cypress@4.5.0 typescript -D`
  - **Note**: `4.5.0` is the Cypress version IO runs your tests on, so we recommend you write and debug your tests using this version.
- Fire up Cypress once and it will scaffold some directories and sample integration tests for you:
  - `$ npx cypress open`

## Configuration
### Basic
Declare that your app wants to use the `cypress@0.x` builder in its [manifest.json](manifest.json) file and add `vtex.tester-hub@0.x` as one of its dependencies:
```console
$ vtex add vtex.tester-hub@0.x
```
Then *link* or *install* your app. From now on you can use the `test e2e` command to run your tests:
```console
$ vtex test e2e
```

### Advanced
To make your test suite reusable across *accounts* and *workspaces*, you can take advantage of the `<account>` and `<workspace>` placeholders in your [cypress.json "baseUrl"](cypress.json):
```jsonc
// cypress.json
{
  "baseUrl": "https://<workspace>--<account>.myvtex.com",
  ...
}
```
Then make sure to use relative paths in your `cy.visit()` calls.

Note, however, that this isn't a valid *URL* and your tests won't work when you use `cypress open` or `cypress run`. Refer to the [Running Cypress locally](#running-cypress-locally) section for a work around.

## Authenticating to *.myvtex.com
Since `myvtex.com` is an authenticated domain, tests against it need to set the `VtexIdclientAutCookie` cookie, otherwise they will land on the login page.

The test framework will make a *token* available - should one be provided - through the `authToken` environment variable. Test code can then access this *token* using `Cypress.env('authToken')`.

To provide your local user *token*, pass the `--token` command line argument to the *test* command:
```console
$ vtex test e2e --token
```

When running Cypress locally, you must provide the *token* yourself through the `CYPRESS_authToken` environment variable. Refer to the [Running Cypress locally](#running-cypress-locally) section for more information.

We provide a sample custom Cypress command to set the required cookie in this [file](cypress/support/vtex.ts). Tests must then call this command before attempting to visit a `*.myvtex.com` page.

## Notes on using TypeScript
If you wish to write your integration tests in TypeScript, you will need a `tsconfig.json` file. This file **must** be inside the `cypress` folder. We provide a sample TypeScript configuration [here](cypress/tsconfig.json).

Note that a `.ts` `pluginsFile` is **not currently supported** and, if you need a `pluginsFile`, you should use JavaScript. Additionally, don't forget to update your `supportFile` path in your [cypress.json](cypress.json) file if you choose to write it in TypeScript, e.g.:
```jsonc
// cypress.json
{
  ...
  "supportFile": "cypress/support/index.ts",
  ...
}
```

## Test callbacks
Your app may choose to be notified whenever its tests are run. You can choose *spec completion callbacks* and/or *test completion callbacks* through the following properties in your [cypress.json](cypress.json) file:
```jsonc
// cypress.json
{
  ...
  "specCallback": true,
  "completeCallback": true,
  ...
}
```
`tester-hub` will then `POST` the *JSON* report payload on the following routes:
- `/_v/e2e_spec_callback/*spec`
  - where `*spec` is the full path to the spec, i.e. `cypress/integration/basic.spec.ts`
- `/_v/e2e_complete_callback/:testId`
  - where `:testId` is the *test request id* assigned by `tester-hub`

For more information on the payload format, refer to these files: [node/middlewares/e2e.ts](node/middlewares/e2e.ts) and [node/typings/e2e.d.ts](node/typings/e2e.d.ts).

Additionally, you will need to declare that your app now uses the `node@6.x` builder in your [manifest.json](manifest.json) file and configure a service, allowing `tester-hub` to call your app. Refer to these files: [node/service.json](node/service.json) and [node/index.ts](node/index.ts).

## Running Cypress locally
*\~\~ Linux/MacOs only \~\~*

To make using *dynamic* `baseUrl` and `*.myvtex.com` authentication painless when running Cypress locally, we provide the [cypress-local.sh](cypress-local.sh) script.

This script will resolve the `baseUrl` configured in your [cypress.json](cypress.json) file using the currently logged-in *account* and *workspace*, and also expose the user's local token through the `CYPRESS_authToken` environment variable.

- Download the file and make sure it's executable:
  ```console
  $ sudo chmod +x cypress-local.sh
  ```
- Use it as a drop-in replacement for `cypress`:
  - `./cypress-local.sh open`
  - `./cypress-local.sh run --headless --config pageLoadTimeout=100000,watchForFileChanges=false`
- *(Optional)* set up [package.json](package.json) scripts:
  ```jsonc
  // package.json
  {
    ...
    "scripts": {
      "cypress:open": "./cypress-local.sh open",
      "cypress:run": "./cypress-local.sh run"
    },
    ...
  }
  ```

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "cypress-example",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "cypress:open": "./cypress-local.sh open",
    "cypress:run": "./cypress-local.sh run"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "cypress": "4.5.0",
    "typescript": "3.8.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 cypress-example/manifest.json from the cypress-example VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "cypress-example",
  "vendor": "vtexeurope",
  "version": "0.0.4",
  "title": "Cypress Example",
  "description": "Reference app for writing end to end tests",
  "dependencies": {
    "vtex.tester-hub": "0.x"
  },
  "builders": {
    "node": "6.x",
    "cypress": "0.x"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "outbound-access",
      "attrs": {
        "host": "kubernetes.default.svc.cluster.local",
        "path": "*"
      }
    }
  ],
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```