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

[Assistant]
Here's the implementation:

```markdown
# Payment app

The *Payment* app adds a verification step to the checkout process, responsible for allowing or forbidding an order placement.

To implement this feature in your store, you'll need to develop your own *Payment app*, but don't worry! This repository provides the necessary structure for that, and the following step by step will guide you.

## Step by step

> ℹ Please, keep in mind that in this step by step you'll be using the [VTEX IO](https://developers.vtex.com/vtex-developer-docs/docs/what-is-vtex-io) development platform.

### Step 1: Setting up the basic development environment

1. Using the terminal, [install the VTEX IO CLI](https://vtex.io/docs/recipes/development/vtex-io-cli-installation-and-command-reference/) (Command Line Interface) known as **Toolbelt** .
2. Using the terminal and the Toolbelt, log in to your VTEX account by running the following command:

```shell
vtex login {account}
```

> ⚠ Remember to replace the values between the curly brackets according to your scenario

Once you run this command, a window will open in your browser asking for your credentials.

3. Once you provide your credentials, run the following command in the terminal to create a [Development workspace](https://vtex.io/docs/recipes/development/creating-a-development-workspace/) and to start developing your *Payment* app.

```shell
vtex use {examplename}
```

> ⚠ Replace `{examplename}` with a name of your choosing. This name will be given to the workspace in which you will develop.

> ℹ If you're used to working with GitHub, think of workspaces as branches.

### Step 2: Editing the Payment app

> ⚠ This app is deprecated, step 2 should only be taken in case of deploying the app in a production environment.

1. Using your terminal, clone the *Payment* app boilerplate repository to your local files by running:

```shell
git clone https://github.com/vtex-apps/example-payment-authorization-app
```

2. Then, using any code editor of your choice, open the boilerplate repository's directory.
3. Open the `manifest.json` file and update its metadata, according to your scenario. It's essential that you update the following fields:

- `vendor` - The app owner. That is, the VTEX account responsible for the app development, maintenance, and distribution.
- `name` - The app name. It should concisely express the app's purpose. They must be comprised of lowercase letters separated by hyphens. Special characters, such as `*` and `@`, and numbers at the beginning of the name are not recommended.

4. Open the `pages/pages.json` file and replace `{example-payment-auth-app}` with the app `name` set in step 3.
5. Using your terminal, go to the app's directory and run the following command:

```shell
vtex link
```

> ℹ Once you [link the app](https://vtex.io/docs/recipes/development/linking-an-app/), your computer's local files will sync to our cloud development environment. This means that any change done locally in the code you are working on will be sent to the cloud and then reflected in the workspace in which you are working.

### Step 3: Running the *Payment* app

> ⚠ When testing in a workspace do not change the app name and vendor. You must keep all params in the boilerplate unchanged

1. Using your browser, go to `http://{workspace}--{account}.myvtex.com/checkout?workspace={workspace}`.

> ⚠ Remember to replace the values between the curly brackets according to your scenario

2. Open the *browser Developer tools* and run the following command:

```javascript
window.transactionAppName = '{app-name}'
```
* When testing in your workspace:
```
window.transactionAppName = 'example-payment-auth-app'
```

Now, if you go through the *checkout process*, you'll notice an additional verification step (set in our *Payment* app) after the *Order confirmation*.

3. Testing a Payment app flow:

By following the next steps, a Payment app will appear on the checkout screen allowing you to test the Payment app general flow.

> ℹ Proceed with the following steps only with you want to test a Payment app flow, otherwise, skip to [Step 4: Deploying the Payment app](#step-4-deploying-the-payment-app).

    3.1. Make sure you have the Test Connector with the VTEX Example Payment app configured in your account. If you do not have it yet, contact the [VTEX Support Team](https://help.vtex.com/en/tutorial/opening-tickets-to-vtex-support) to help you with the installation process.

    3.2. Fill in the last name of the personal information with the word "Application".

    3.3. Select the payment condition associated with the Test Connector and finish the purchase in order to test the flow.

> ⚠ It is not possible to test the specific flow of each Payment app built.

### Step 4: Deploying the *Payment* app

> ℹ Before deploying your app, we recommend that you perform tests and check if everything is as expected. For that, go to `http://{workspace}--{store}.myvtex.com`. Add products to your store's cart and go to the shopping cart page. Open your browser DevTools and run the following command to get the `orderFormId` value: `vtexjs.checkout.orderFormId`. Now, inject the `orderFormId` value in `vtexcommercestable`, using:
`http://{workspace}--{account}.myvtex.com/checkout?workspace={workspace}&orderFormId={orderFormId}`.

Once you're happy with the changes, follow our documentation on [making your new app version publicly available](https://vtex.io/docs/recipes/development/making-your-new-app-version-publicly-available/) to run your app on master.

## Modus Operandi

After developing and implementing the *Payment* app, your store will profit from having an additional verification step in its checkout process.

To make the best use of the *Payment* app, this section discusses the following topics:

- Understanding the checkout response.
- Handling the order payload.
- Injecting external scripts.

### Understanding the checkout response

After the order placement, there's a validation step to check whether the transaction is approved or not.

If the transaction is approved, the checkout UI redirects to the *Order Placed* page. Otherwise, it shows a warning pop-up.

In our *Payment* app, this validation is performed through the `transactionValidation.vtex` event, which, when triggered, sends the payment status to the checkout UI according to the following [method](https://github.com/vtex-apps/payment-authorization-app-example/blob/3e5742c87a2771998009cff4fecacb092bb3362b/react/index.js#L22):

```javascript
respondTransaction = (status) => {
    window.$(window).trigger('transactionValidation.vtex', [status])
}
```

Notice that the `respondTransaction` function receives the `status` boolean value, which resolves (`status == true`) or rejects (`status == false`) an order placement.

Hence, whenever the `transactionValidation.vtex` event occurs, the Checkout UI checks the payment status and is redirected according to the `status` value provided to the `respondTransaction` function

### Handling the order payload

The `appPayload` is what the *Payment* app receives as `props` and it consists of a serialized JSON of the order payload.

Thus, to access this information, just run the following command:

```javascript
const { appPayload } = this.props // This appPayload is a serialized JSON (as string).
```

The expected response is a JSON object consisting of the data needed for the Payment app to allow or deny an order placement. Thus, depending on the payment processes implemented in your store, the `appPayload` fields may vary.

Take the following example:

```json
{
    "timeToCancel": 300,
    "transactionApproveLink": "https://..."
}
```

### Injecting external scripts

To run external scripts on your *Payment* app, you need to inject the following script on the head of the checkout `html`.

To do so, you have to do a DOM injection. For that, you should do:

```javascript
const head = document.getElementsByTagName('head')[0]

const js = document.createElement('script')
js.id = {{script-id}}
js.src = {{script-src}}
js.async = true;
js.defer = true;
js.onload = {{callback-onload}}

head.appendChild(js)
```

There is an example for the script injection [here](https://github.com/vtex-apps/payment-authorization-app-example/blob/3e5742c87a2771998009cff4fecacb092bb3362b/react/index.js#L41)

> ℹ Keep in mind that if the external `js` script handles DOM manipulation, then you should use React's [`ref`](https://reactjs.org/docs/refs-and-the-dom.html) to create a `div` container and hand it over to the library. There's also an [example](https://github.com/vtex-apps/payment-authorization-app-example/blob/3e5742c87a2771998009cff4fecacb092bb3362b/react/index.js#L11) for doing so in this repo.

```


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

[Assistant]
Here's the implementation:

```json
{
  "version": "1.0.7",
  "devDependencies": {
    "@types/node": "12.6.2",
    "@vtex/prettier-config": "^1.0.0",
    "typescript": "3.9.7"
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "example-payment-auth-app",
  "vendor": "example-vendor",
  "version": "1.1.0",
  "title": "Example Payment Authentication App",
  "description": "Example Payment Authentication App",
  "defaultLocale": "en",
  "mustUpdateAt": "2019-01-08",
  "dependencies": {},
  "builders": {
    "react": "2.x",
    "pages": "0.x",
    "messages": "0.x",
    "docs": "0.x"
  },
  "scripts": {
    "postreleasy": "vtex publish --public"
  },
  "$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 device-detector/README.md from the device-detector VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Device Detector

Use this app's HOC or hook to find out current device's viewport size.

### Usage

#### useDevice

Returns an object with the format of `DeviceInfo` defined as:
```js
interface DeviceInfo {
  device: Device
  isMobile: boolean
}

enum Device {
  phone = 'phone',
  tablet = 'tablet',
  desktop = 'desktop',
}
```

```js
import { useDevice } from 'vtex.device-detector'
const MyComponent = props => {
  const { isMobile } = useDevice()
  if (isMobile) {
    // is phone or tablet!
  }
  return ...
}
```

or

```js
import { useDevice } from 'vtex.device-detector'
const MyComponent = props => {
  const { device } = useDevice()
  if (device === 'tablet') {
    //is tablet!
  }
  return ...
}
```

#### withDevice

It is a HOC, it injects two props (`isMobile` and `device`) into your component's props:

```js
type WithDeviceProps = Props & {
  isMobile: boolean
  device: Device
}
enum Device {
  phone = 'phone',
  tablet = 'tablet',
  desktop = 'desktop',
}
```

```js
import { withDevice } from 'vtex.device-detector'
const MyComponent = props => {
  if (props.isMobile) {
    // is phone or tablet!
  }
  return ...
}

export default withDevice(MyComponent)
```

or

```js
import { useDevice } from 'vtex.device-detector'
const MyComponent = props => {
  if (props.device === 'tablet') {
    //is tablet!
  }
  return ...
}

export default withDevice(MyComponent)
```

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "device-detector",
  "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": "^7.15.0",
    "eslint-config-vtex": "^12.2.1",
    "eslint-config-vtex-react": "^6.9.1",
    "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 device-detector/manifest.json from the device-detector VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "device-detector",
  "version": "0.2.6",
  "title": "Device Detector",
  "description": "Consistent device detection across SSR and CSR",
  "defaultLocale": "pt-BR",
  "builders": {
    "react": "3.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2019-04-02",
  "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 partytown/package.json from the partytown VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "partytown",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
    "build": "partytown copylib public/~partytown && node utils/build.js"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.json": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@builder.io/partytown": "^0.7.4",
    "@vtex/prettier-config": "^0.1.4",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.3.2",
    "eslint-config-vtex-react": "^6.3.2",
    "html-minifier": "^4.0.0",
    "husky": "^4.2.3",
    "lint-staged": "^10.1.1",
    "mustache": "^4.2.0",
    "prettier": "^2.0.2",
    "typescript": "^3.8.3"
  },
  "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 partytown/manifest.json from the partytown VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "partytown",
  "vendor": "vtex",
  "version": "1.0.1-beta.0",
  "title": "Partytown",
  "description": "Partytown",
  "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": "Partytown",
    "type": "object",
    "properties": {
      "forward": {
        "title": "Forward",
        "description": "Forwarding events and triggers separated by `,`.",
        "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 css-handles/package.json from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "css-handles",
  "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.3",
    "eslint": "^7.13.0",
    "eslint-config-vtex": "^12.8.8",
    "eslint-config-vtex-react": "^6.7.10",
    "husky": "^4.3.0",
    "lint-staged": "^10.5.1",
    "prettier": "^2.1.2",
    "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 css-handles/manifest.json from the css-handles VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "css-handles",
  "version": "1.0.1",
  "title": "CSS Handles",
  "description": "Utility for creating CSS Handles on store components",
  "builders": {
    "react": "3.x",
    "docs": "0.x"
  },
  "dependencies": {},
  "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 minicart/package.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "minicart",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext 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"
    ],
    "*.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 minicart/manifest.json from the minicart VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "minicart",
  "title": "Mini Cart",
  "version": "2.68.0",
  "builders": {
    "messages": "1.x",
    "store": "0.x",
    "react": "3.x",
    "docs": "0.x",
    "styles": "2.x"
  },
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {
    "vtex.product-summary": "2.x",
    "vtex.store-resources": "0.x",
    "vtex.store-components": "3.x",
    "vtex.styleguide": "9.x",
    "vtex.store-icons": "0.x",
    "vtex.pixel-manager": "1.x",
    "vtex.react-portal": "0.x",
    "vtex.store-graphql": "2.x",
    "vtex.sandbox": "0.x",
    "vtex.css-handles": "1.x",
    "vtex.order-manager": "0.x",
    "vtex.order-items": "0.x",
    "vtex.product-list": "0.x",
    "vtex.device-detector": "0.x",
    "vtex.store-drawer": "0.x",
    "vtex.checkout-summary": "0.x",
    "vtex.checkout-resources": "0.x",
    "vtex.flex-layout": "0.x",
    "vtex.rich-text": "0.x",
    "vtex.responsive-values": "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 instore-stone-fields/manifest.json from the instore-stone-fields VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "instore-stone-fields",
  "version": "0.1.5",
  "title": "Instore extra customer fields",
  "description": "",
  "defaultLocale": "pt-BR",
  "builders": {
    "pages": "0.x",
    "react": "2.x",
    "messages": "0.x",
    "docs": "0.x"
  },
  "dependencies": {
    "vtex.instore-form-fields": "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 external-prices-node-template/package.json from the external-prices-node-template VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "external-prices-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": "^0.3.6",
    "@vtex/tsconfig": "^0.6.0",
    "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"
  },
  "dependencies": {
    "@vtex/api": "^6.45.19"
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "external-prices-node",
  "vendor": "vtex",
  "version": "0.3.2",
  "title": "External Prices Node App",
  "description": "A reference app for consulting external prices.",
  "categories": [],
  "dependencies": {},
  "builders": {
    "node": "6.x",
    "docs": "0.x"
  },
  "scripts": {
    "prereleasy": "bash lint.sh"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "outbound-access",
      "attrs": {
        "host": "YOUR_SERVICE_DOMAIN",
        "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 store-sitemap/policies.json from the store-sitemap VTEX app.

[Assistant]
Here's the implementation:

```json
[
  {
    "name": "resolve-graphql",
    "description": "Allows access to resolve a graphql request",
    "statements": [
      {
        "actions": ["post", "get"],
        "effect": "allow",
        "resources": [
          "vrn:vtex.store-sitemap:{{region}}:{{account}}:{{workspace}}:/_v/graphql"
        ]
      }
    ]
  }
]

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "store-sitemap",
  "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,graphql,gql}": [
      "prettier --write"
    ],
    "*.json": [
      "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"
  },
  "dependencies": {
    "@types/route-parser": "^0.1.3",
    "route-parser": "^0.0.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-sitemap/manifest.json from the store-sitemap VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema",
  "name": "store-sitemap",
  "vendor": "vtex",
  "version": "2.18.3",
  "title": "Sitemap",
  "description": "Sitemap for vtex.store",
  "mustUpdateAt": "2019-08-01",
  "builders": {
    "node": "6.x",
    "graphql": "1.x",
    "docs": "0.x"
  },
  "dependencies": {
    "vtex.messages": "1.x",
    "gocommerce.sitemap-app": "1.x",
    "vtex.catalog-api-proxy": "0.x",
    "vtex.rewriter": "1.x",
    "vtex.catalog-graphql": "1.x",
    "vtex.routes-bootstrap": "0.x",
    "vtex.graphql-server": "1.x"
  },
  "policies": [
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/tenant/tenants"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "{{account}}.vtexcommercestable.com.br",
        "path": "/api/catalog_system/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "{{account}}.vtexcommercestable.com.br",
        "path": "/sitemap.xml"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "{{account}}.vtexcommercestable.com.br",
        "path": "/sitemap/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "janus-edge.vtex.com.br",
        "path": "/robots.txt"
      }
    },
    {
      "name": "vtex.catalog-graphql:resolve-graphql"
    },
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    },
    {
      "name": "read-workspace-apps"
    },
    {
      "name": "read-write-user-routes"
    },
    {
      "name": "vbase-read-write"
    },
    {
      "name": "read-public-registry-assets"
    },
    {
      "name": "read-private-registry-assets"
    },
    {
      "name": "gocommerce.sitemap-app:sitemap-read"
    },
    {
      "name": "vtex.catalog-api-proxy:catalog-proxy"
    },
    {
      "name": "vtex.rewriter:resolve-graphql"
    },
    {
      "name": "vtex.messages:graphql-save-translation-messages"
    },
    {
      "name": "vtex.graphql-server:resolve-graphql"
    },
    {
      "name": "sphinx-is-admin"
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "vtexid.vtex.com.br",
        "path": "/api/vtexid/pub/authenticated/user"
      }
    }
  ],
  "credentialType": "absolute",
  "scripts": {
    "prereleasy": "bash lint.sh"
  },
  "settingsSchema": {
    "title": "VTEX Store sitemap",
    "type": "object",
    "properties": {
      "enableProductRoutes": {
        "title": "Enable product routes source",
        "description": "This will enable the product routes source, generating product routes for the final sitemap.",
        "type": "boolean",
        "default": true
      },
      "enableNavigationRoutes": {
        "title": "Enable navigation routes source",
        "description": "This will enable the navigation routes source, generating navigation routes for the final sitemap.",
        "type": "boolean",
        "default": true
      },
      "enableAppsRoutes": {
        "title": "Enable apps routes source",
        "description": "This will enable the app routes source, adding to the final sitemap routes defined and exported by the routes.json files from apps built by the store@0.x builder.",
        "type": "boolean",
        "default": true
      },
      "disableRoutesTerm": {
        "title": "Disable routes from userRoutes with the following string",
        "description": "Routes that include the string below will be excluded from the sitemap. Useful for selecting which pages will be in that folder.",
        "default": "",
        "type": "string"
      },
      "ignoreBindings": {
        "title": "Ignore bindings",
        "description": "Generate a single sitemap even if store has multiple bindings - for example if bindings are in the process of being set up",
        "type": "boolean",
        "default": false
      }
    }
  }
}

```


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

[User] Show me the implementation of events-example/dangerfile.js from the events-example 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 events-example/package.json from the events-example VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "CHANGE_ME",
  "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",
    "@vtex/danger": "^0.2.7",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.7.0",
    "husky": "^4.2.0",
    "lint-staged": "^10.0.2",
    "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 events-example/manifest.json from the events-example VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "events-example",
  "vendor": "vtex",
  "version": "0.0.1",
  "title": "Events Example",
  "description": "Reference app for VTEX IO Services",
  "dependencies": {},
  "builders": {
    "node": "6.x",
    "docs": "0.x"
  },
  "scripts": {
    "prereleasy": "bash lint.sh"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    },
    {
      "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 product-bookmark-interfaces/manifest.json from the product-bookmark-interfaces VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "product-bookmark-interfaces",
  "version": "1.0.1",
  "title": "Product Bookmark Interfaces",
  "description": "Interfaces for a wishlist or list app",
  "builders": {
    "store": "0.x",
    "react": "3.x",
    "docs": "0.x"
  },
  "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 native-types/package.json from the native-types VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "native-types",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,js,json}\"",
    "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"
    ]
  },
  "devDependencies": {
    "@vtex/prettier-config": "^0.3.3",
    "eslint": "^7.13.0",
    "eslint-config-vtex": "^12.8.8",
    "eslint-config-vtex-react": "^6.7.10",
    "husky": "^4.3.0",
    "lint-staged": "^10.5.1",
    "prettier": "^2.1.2",
    "typescript": "^4.0.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 native-types/manifest.json from the native-types VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "native-types",
  "version": "0.10.1",
  "builders": {
    "messages": "1.x",
    "pages": "1.x",
    "react": "3.x",
    "docs": "0.x"
  },
  "dependencies": {
    "vtex.css-handles": "0.x"
  },
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "title": "Native Types",
  "description": "Native types",
  "$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 splunk-log-forwarder/README.md from the splunk-log-forwarder VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Logs Stream Client Example

Basic implementation that consumed VTEX IO Logs Stream to foward for Splunk.

## Architecture Overview

![Overview](https://github.com/vtex-apps/splunk-log-forwarder/blob/main/docs/architecture-overview.png?raw=true "High level architecture")

VTEX IO Logs API is implemented using [Server-sent events](https://en.wikipedia.org/wiki/Server-sent_events). It enables servers to stream messages to clients through HTTP.

This is a simple client implementation that receives VTEX Logs in a stream through server-sent events, bulk them, to send to a Splunk HTTP Event Collector.

## Implementation details

This example is implemented using [Koa Web Framework](https://koajs.com/).

There are 3 Koa middlewares registered at Koa server, those middleware define the basic pipeline for the application `[setup, fetchAppToken, logsForwarder]`.

1. `setup` Reads required envvars to create a context that will be used by the application. Env vars could be defined by creating a `.env` file at the src directory.

    -- Example:
    ```.env
        VTEX_ACCOUNT=<account>
        VTEX_WORKSPACE=<workspace>
        VTEX_APP_KEY=<app-key>
        VTEX_APP_TOKEN=<app-token>
        SPLUNK_HOST=<splunk-http-event-host>
        SPLUNK_PORT=<splunk-http-event-port>
        SPLUNK_TOKEN=<splunk-token>
    ```
2. `fetchAppToken` Makes the authentication request and adds the auth token to the context.

3. `logsForwarder` Reads the logs from VTEX IO Logs Stream and forwards them to Splunk

#### Usage:

1. `yarn watch` This will start the server at localhost
2. `curl -X POST http://localhost:8080/forwarder/start`. This will start the pipeline described above.

## VTEX Logs Stream API

### Authorization

Authorization is needed, for a client to call Logs Stream API

First thing required is to have Application Credentials that allow logs to be consumed from stream.

To make this, go to your VTEX Account admin, at the Roles panel and create a new Role for Logs consumption. This role should have `Application Logs Stream` as product added, with `Read logs stream` permission.

![new role panel](https://github.com/vtex-apps/splunk-log-forwarder/blob/main/docs/VTEX%20new%20roles%20panel.png?raw=true "New role panel")

With the new role created, an application key could be created using the given role as following.

![add app key](https://github.com/vtex-apps/splunk-log-forwarder/blob/main/docs/VTEX%20add%20aplication%20key%20panel.png?raw=true "Add Applicaton Key")

Application Key and Token generated previously, can now be used to authenticate your client, so requests to the Logs Stream API is authorized.

To authenticate your client the following API could be used.

```
curl --location --request POST 'https://api.vtexcommercestable.com.br/api/vtexid/apptoken/login?an={{account}}' \
--header 'Content-Type: application/json' \
--data-raw '{
    "appkey": "<appKey>",
    "apptoken": "<appToken>"
}'
```

This call will return a similar payload. Where the token value is the one needed to for this API to work.

```
{
    "authStatus": "Success",
    "token": <token>
    "expires": 1666838733
}
```

### Requests to the Logs stream

With the proper Auth token set `TOKEN=<token>`. API calls could be made as following.

```
curl http://infra.io.vtex.com/skidder/v1/{{account}}/{{workspace}}/logs/stream -H "Authorization: $TOKEN" -H 'User-Agent: test' -H 'Accept: text/event-stream'
```

Returing data example

```
event:message
data:{"level":"warn","app":"<app-vendor>.<app-name>@<app-version>","account":"<account>","workspace":"<workspace>","production":true,"data":{"signal":"SIGTERM"},"operationId":"","requestId":""}
```

Server will keep sending those events to the client as long as logs are available at the stream.
If connection is aborted by the client, the server will stop sending the data.

Clients could resume the stream at the point they stopped consuming. The server keep this state reading the `User-Agent` header. User-Agent could be changed to get all events from the begin.

Logs have different log levels, that could be defined by the application developer, as described [here](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-managing-application-logs#implementing-the-vtex-io-logging-service).

## Scripts

Following scripts are available to be used with [yarn](https://classic.yarnpkg.com/en/docs/install/):

- `yarn build` - Builds the service generating final files in the `dist` folder. This will use `tsc` to convert the `TypeScript` files to pure `JavaScript`
- `yarn start` - Builds the service and start it on `localhost` in `prodution` mode
- `yarn dev` - Builds the service and start it service on `localhost` in `development` mode
- `yarn watch` - Starts the service on `localhost` with [nodemon](https://github.com/remy/nodemon) and [ts-node](https://typestrong.org/ts-node/), and automatically restarts the server when `src` files are changed
- `yarn debug` - Starts the service on `localhost` ready for debugging the execution
- `yarn lint` - Lints and formats the code

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex-app-node-server-template",
  "version": "0.0.17",
  "scripts": {
    "start": "tsc && NODE_ENV=production node dist/index.js",
    "build": "tsc",
    "dev": "tsc && NODE_ENV=development nodemon dist/index.js",
    "watch": "NODE_ENV=development nodemon --watch 'src/**/*' -e ts,tsx --exec 'ts-node' src/index.ts",
    "debug": "tsc && NODE_ENV=development nodemon --inspect dist/index.js",
    "lint": "eslint --fix src && prettier --write 'src/**/*.ts'"
  },
  "dependencies": {
    "eventsource": "^2.0.2",
    "dotenv": "^14.3.2",
    "axios": "^1.1.3",
    "koa": "^2.13.4",
    "koa-bodyparser": "^4.3.0",
    "koa-router": "^12.0.0"
  },
  "devDependencies": {
    "@types/koa": "^2.13.5",
    "@types/koa-bodyparser": "^4.3.8",
    "@types/koa-router": "^7.4.4",
    "@types/node": "^16.4.13",
    "@types/eventsource":"^1.1.10",
    "@vtex/prettier-config": "^0.3.6",
    "eslint": "7.32.0",
    "eslint-config-vtex": "^14.1.0",
    "lint-staged": ">=10",
    "nodemon": "^2.0.12",
    "prettier": "^2.3.2",
    "ts-node": "^10.9.1",
    "typescript": "^4.8.4"
  },
  "prettier": "@vtex/prettier-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 reskyt-pixel/package.json from the reskyt-pixel VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "reskyt-pixel",
  "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.3.6",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.9.4",
    "eslint-config-vtex-react": "^6.9.4",
    "husky": "^4.2.3",
    "lint-staged": "^10.1.1",
    "prettier": "^2.2.1",
    "typescript": "^3.8.3"
  },
  "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 reskyt-pixel/manifest.json from the reskyt-pixel VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "reskyt-pixel",
  "vendor": "vtex",
  "version": "0.0.2",
  "title": "Reskyt Pixel",
  "description": "Reskyt Pixel creates a banner with a link to the app store",
  "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": "Reskyt Pixel",
    "bindingBounded": true,
    "type": "object",
    "properties": {
      "htmlTitle": {
        "title": "HTML title name",
        "description": "The HTML title for the pixel",
        "type": "string"
      },
      "appName": {
        "title": "App Name",
        "description": "Name of the app that the user will download",
        "type": "string"
      },
      "fabName": {
        "title": "Developer name",
        "description": "Name of the developer of the app",
        "type": "string"
      },
      "downloadLink": {
        "title": "App download link",
        "description": "Link to store where the app is hosted",
        "type": "string"
      },
      "appImage": {
        "title": "App image",
        "description": "Image of the app that will be shown in the banner",
        "type": "string"
      },
      "appImageAlt": {
        "title": "Image alt",
        "description": "Image alternative text, for accesibility purposes",
        "type": "string"
      },
      "storePrefix": {
        "title": "Store name prefix",
        "description": "A prefix to the store where the application is hosted. i.e 'Free on'",
        "type": "string"
      },
      "downloadCTA": {
        "title": "Download CTA",
        "description": "Download link call to action",
        "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 rfcs/README.md from the rfcs VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Store Framework RFCs

Many changes, including bug fixes and documentation improvements can be implemented and reviewed via the normal GitHub pull request workflow.

Some changes though are "substantial", and we ask that these be put through a bit of a design process and produce a consensus among the Store Framework core team.

The "RFC" (request for comments) process is intended to provide a consistent and controlled path for new features to enter the project.

[Active RFC List](https://github.com/vtex-apps/rfcs/pulls)

Store Framework is still **actively developing** this process, and it will still change as more features are implemented and the community settles on specific approaches to feature development.

## When to follow this process

You should consider using this process if you intend to make "substantial" changes to Store Framework or its documentation. Some examples that would benefit from an RFC are:

- A new feature that creates new API surface area, and would require a feature flag if introduced.
- The removal of features that already shipped as part of the release channel.
- The introduction of new idiomatic usage or conventions, even if they do not include code changes to Store Framework itself.

The RFC process is a great opportunity to get more eyeballs on your proposal before it becomes a part of the Store Framework. Quite often, even proposals that seem "obvious" can be significantly improved once a wider group of interested people have a chance to weigh in.

The RFC process can also be helpful to encourage discussions about a proposed feature as it is being designed, and incorporate important constraints into the design while it's easier to change, before the design has been fully implemented.

Some changes do not require an RFC:

- Rephrasing, reorganizing or refactoring
- Addition or removal of warnings
- Additions that strictly improve objective, numerical quality criteria (speedup, better browser support)
- Additions only likely to be _noticed by_ other implementors-of-Store Framework, invisible to users-of-Store Framework.

## What the process is

In short, to get a major feature added to Store Framework, one usually first gets the RFC merged into the RFC repo as a markdown file. At that point the RFC is 'active' and may be implemented with the goal of eventual inclusion into Store Framework.

* Fork the RFC repo http://github.com/vtex-apps/rfcs
* Copy `0000-template.md` to `text/0000-my-feature.md` (where 'my-feature' is descriptive. Don't assign an RFC number yet).
* Fill in the RFC. Put care into the details: **RFCs that do not present convincing motivation, demonstrate understanding of the impact of the design, or are disingenuous about the drawbacks or alternatives tend to be poorly-received**.
* Submit a pull request. As a pull request the RFC will receive design feedback from the larger community, and the author should be prepared to revise it in response.
* Build consensus and integrate feedback. RFCs that have broad support are much more likely to make progress than those that don't receive any comments.
* Eventually, the team will decide whether the RFC is a candidate for inclusion in Store Framework.
* RFCs that are candidates for inclusion in Store Framework will enter a "final comment period" lasting 3 calendar days. The beginning of this period will be signaled with a comment and tag on the RFCs pull request.
* An RFC can be modified based upon feedback from the team and community. Significant modifications may trigger a new final comment period.
* An RFC may be rejected by the team after public discussion has settled and comments have been made summarizing the rationale for rejection. A member of the team should then close the RFCs associated pull request.
* An RFC may be accepted at the close of its final comment period. A team member will merge the RFCs associated pull request, at which point the RFC will become 'active'.

## The RFC life-cycle

Once an RFC becomes active, then authors may implement it and submit the feature as a pull request to the respective Store Framework repo. Becoming 'active' is not a rubber stamp, and in particular still does not mean the feature will ultimately be merged; it does mean that the core team has agreed to it in principle and are amenable to merging it.

Furthermore, the fact that a given RFC has been accepted and is 'active' implies nothing about what priority is assigned to its implementation, nor whether anybody is currently working on it.

Modifications to active RFCs can be done in followup PRs. We strive to write each RFC in a manner that it will reflect the final design of the feature; but the nature of the process means that we cannot expect every merged RFC to actually reflect what the end result will be at the time of the next major release; therefore we try to keep each RFC document somewhat in sync with the language feature as planned, tracking such changes via followup pull requests to the document.

## Implementing an RFC

The author of an RFC is not obligated to implement it. Of course, the RFC author (like any other developer) is welcome to post an implementation for review after the RFC has been accepted.

If you are interested in working on the implementation for an 'active 'RFC, but cannot determine if someone else is already working on it, feel free to ask (e.g. by leaving a comment on the associated issue).

## Reviewing RFCs

Each week the team will attempt to review some set of open RFC pull requests.

We try to make sure that any RFC that we accept is accepted at the weekly team meeting. Every accepted feature should have a core team champion, who will represent the feature and its progress.

**Store Framework's RFC process owes its inspiration to the [React RFC process], [Yarn RFC process], [Rust RFC process], and [Ember RFC process]**

[React RFC process]: https://github.com/reactjs/rfcs
[Yarn RFC process]: https://github.com/yarnpkg/rfcs
[Rust RFC process]: https://github.com/rust-lang/rfcs
[Ember RFC process]: https://github.com/emberjs/rfcs

```


[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 shopify/next.config.js from the shopify VTEX app.

[Assistant]
Here's the implementation:

```javascript
const { parsed: localEnv } = require("dotenv").config();

const webpack = require("webpack");
const apiKey = JSON.stringify(process.env.SHOPIFY_API_KEY);

module.exports = {
  webpack: (config) => {
    const env = { API_KEY: apiKey };
    config.plugins.push(new webpack.DefinePlugin(env));

    // Add ESM support for .mjs files in webpack 4
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto",
    });

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

[Assistant]
Here's the implementation:

```markdown
# Shopify VTEX seller connector App

Using this custom connector will allow VTEX stores to become marketplaces themselves and sell products from an external shopify seller.

## Installation Guide

### 1. Shopify configuration

1) Install the app. This is a private app, so you will need to manually install it by following these steps:
* download the project in a local folder
* install `shopify-cli` by following the instructions https://shopify.dev/apps/tools/cli/installation
* login to your store `shopify login {{storename}}`
* install the app with `shopify node serve` and follow the onscreen instructions to complete the installation.

2) In the shopify admin section we navigate to `Apps`, find and click the `VTEX Seller Connector` app in the `Installed apps` section.
   Here we fill out and save:
* `Marketplace account` (required) - represents the VTEX marketplace account name
* `App key` and `App token` (required) - required for the API calls made to the marketplace
* `Seller ID` (required) - used when configuring the seller in the marketplace
* `Fulfillment API Access Token` (required) - this will be your `FULFILLMENT_API_KEY` used by the marketplace to access the app.

### 2. VTEX configuration

Then we need to set up a new seller in the VTEX marketplace admin section.<br>
We navigate to `Marketplace -> Sellers -> Management` and click de `New seller` button.<br>
When prompted `Choose the type of Seller you want to register`, choose `Others`, fill out the form and save:
* `Seller ID` - is the `Seller ID` configured in shopify
* `Other Name` - desired name
* `Admin Email` - an email address
* `Fulfillment EndPoint` - represents the seller endpoint (see bellow)
* make sure `Active?` is checked

The `Fulfillment EndPoint` should be `https://{shopifyBaseURl}/api/fulfillment?token=FULFILLMENT_API_KEY`<br>

#### <u>Marketplace trade policies</u>
In the VTEX marketplace got to `Store Setup -> Trade policies`, edit a desired policy, and next to `Sellers` check the newly created seller so that the policy will also apply to them.<br>
Here you can also set the currency to match the seller store, or change it in the seller store to match the policy.

#### <u>Shipping Rates</u>

Shipping rates are configured in Shopify under `Settings > Shipping and delivery > Shipping (panel) > Manage rates`.

#### <u>Products specifications</u>

In order to correctly retrieve product specifications from Shopify into VTEX, the following conditions must be met before approving new products:
* in VTEX, under `MARKETPLACE -> Sellers -> Categories and Brands` the `Specifications mapping` needs to be filled out.<br>
  On the `Seller` side will be the specification's label from Shopify and on the `Marketplace` side will be the specification's VTEX name.<br>
* When you approve a new product with specifications from Shopify, you need to make sure that those specifications exists on the VTEX category where you approve the product.<br>
* In VTEX, category specifications can be found under `PRODUCTS -> Catalog -> Categories`, select the category in question
  and from the `ACTIONS` tab select `Field (Sku)`.<br>
  Here you can edit or add a new specification.<br>
  Always make sure `Active` is checked, even after editing/creating a specification.
* The specification name is used in the `Marketplace` side when doing `Specifications mapping`.

<hr>

## How does it work?

Following the [external seller connector](https://developers.vtex.com/vtex-rest-api/docs/external-seller-integration-connector) documentation, there are nine different API requests. Five of these are calls that the seller should make to the marketplace. The other four are requests that the marketplace will need to make to the seller.

### 1. Catalog notification, registration, update

The seller, in this case shopify, is responsible for suggesting new SKUs to be sold in the marketplace and also for informing the marketplace about changes in their SKUs that already exist in the marketplace.

When changing product information, in shopify, the `PRODUCTS_UPDATE` webhook is called.<br>

Here the first step is to check if the sku exists in the marketplace by calling the [Change Notification endpoint](https://developers.vtex.com/vtex-rest-api/reference/catalog-api-sku-seller#catalog-api-get-seller-sku-notification) with two possible responses:
* Status 404, means that the SKU does not yet exist in the marketplace. The seller will push the SKU offer to the marketplace using [Send SKU Suggestion](https://developers.vtex.com/vtex-rest-api/reference/manage-suggestions-1)
* Status 200, means that the SKU exist in the marketplace. The marketplace will make a request to the seller to get updated sku information using [Fulfillment Simulation](https://developers.vtex.com/vtex-rest-api/reference/external-seller#fulfillment-simulation)

All SKUs provided by the [Send SKU Suggestion](https://developers.vtex.com/vtex-rest-api/reference/manage-suggestions-1) endpoint can be found in the store admin area under `Marketplace -> Sellers -> Received SKUs`.<br>
Once approved, the SKUs will become available in the `Products -> Catalog` section and from here on out only price and inventory will be updated via [Fulfillment Simulation](https://developers.vtex.com/vtex-rest-api/reference/external-seller#fulfillment-simulation).

During the order flow, the marketplace storefront needs to be constantly fetching the updated price and inventory of each SKU in the cart. This is essential to guarantee that the customer will always be presented with the most updated information possible.
This information is provided by the seller through the [Fulfillment Simulation](https://developers.vtex.com/vtex-rest-api/reference/external-seller#fulfillment-simulation) endpoint.

### 2. Order placement and dispatching

Once the customer finishes their checkout, the marketplace needs to let the seller know there is a newly placed order through the [Order Placement](https://developers.vtex.com/vtex-rest-api/reference/external-seller#order-placement) endpoint. The marketplace will send all data required for the seller to be able to create the order in their own store.

After payment is approved, the marketplace sends a request to the seller through the [Ready For Handling](https://developers.vtex.com/vtex-rest-api/reference/external-seller#order-dispatching) endpoint, to notify it that the fulfillment process can be started.

### 3. Order invoicing

Shopify does not support natively invoicing.
In this case, when capturing/approving payments, the invoice data must be sent to the marketplace.
The seller sends this information through the [Order Invoice Notification](https://developers.vtex.com/vtex-rest-api/reference/invoice#invoicenotification) request.<br>
In shopify, the `ORDERS_PAID` webhook is called.

### 4. Order cancellation

The order can be cancelled by either the seller or the marketplace.

When the marketplace cancels an order, a request is made to the seller through the [Marketplace Order Cancellation](https://developers.vtex.com/vtex-rest-api/reference/external-seller#mkp-order-cancellation) endpoint.

When the seller (shopify) cancels an order, the `ORDERS_CANCELLED` webhook is called.<br>
If the order state is `canceled`, the seller makes a request to the seller through the [Cancel Order](https://developers.vtex.com/vtex-rest-api/reference/orders#cancelorder) endpoint.

### 5. Fulfillment EndPoints

The shopify default endpoint is `https://{shopifyBaseURl}`.<br>
The following endpoints where added to shopify in order to accept request from the marketplace:
* `/api/fulfillment/pvt/orderForms/simulation` - [Fulfillment Simulation](https://developers.vtex.com/vtex-rest-api/reference/external-seller#fulfillment-simulation)
* `/api//fulfillment/pvt/orders` - [Order Placement](https://developers.vtex.com/vtex-rest-api/reference/external-seller#order-placement)
* `/api//fulfillment/pvt/orders/:orderId/fulfill` -  [Ready For Handling](https://developers.vtex.com/vtex-rest-api/reference/external-seller#order-dispatching)
* `/api//fulfillment/pvt/orders/:orderId/cancel` - [Cancel Order](https://developers.vtex.com/vtex-rest-api/reference/orders#cancelorder)

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "shopify-app-node",
  "version": "1.0.0",
  "description": "Shopify's node app for CLI tool",
  "scripts": {
    "test": "jest",
    "dev": "cross-env NODE_ENV=development nodemon ./server/index.js --watch ./server/index.js",
    "build": "NEXT_TELEMETRY_DISABLED=1 next build",
    "start": "cross-env NODE_ENV=production node ./server/index.js"
  },
  "browser": {
    "fs": false,
    "path": false,
    "os": false
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Shopify/shopify-app-node.git"
  },
  "author": "Shopify Inc.",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/shopify/shopify-app-node/issues"
  },
  "dependencies": {
    "@apollo/client": "^3.4.1",
    "@babel/core": "7.12.10",
    "@babel/polyfill": "^7.6.0",
    "@babel/preset-env": "^7.12.11",
    "@babel/register": "^7.12.10",
    "@shopify/app-bridge-react": "^2.0.2",
    "@shopify/app-bridge-utils": "^2.0.2",
    "@shopify/koa-shopify-auth": "^4.1.2",
    "@shopify/polaris": "^6.2.0",
    "apollo-boost": "^0.4.9",
    "cross-env": "^7.0.3",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "graphql": "^14.5.8",
    "isomorphic-fetch": "^3.0.0",
    "koa": "^2.13.1",
    "koa-body": "^4.2.0",
    "koa-logger": "^3.2.1",
    "koa-router": "^10.0.0",
    "koa-session": "^6.1.0",
    "next": "^10.0.4",
    "next-env": "^1.1.0",
    "node-fetch": "^2.6.1",
    "pg": "^8.6.0",
    "pg-hstore": "^2.3.4",
    "react": "^16.10.1",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.14.0",
    "sequelize": "^6.6.5",
    "shopify-token": "^4.0.4",
    "sqlite3": "^5.0.2",
    "webpack": "^4.44.1"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.12.10",
    "@babel/preset-stage-3": "^7.0.0",
    "babel-jest": "26.6.3",
    "babel-register": "^6.26.0",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.5",
    "husky": "^4.3.6",
    "jest": "26.6.3",
    "lint-staged": "^10.5.3",
    "nodemon": "^2.0.0",
    "prettier": "2.2.1",
    "react-addons-test-utils": "^15.6.2",
    "react-test-renderer": "16.14.0"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,css,json,md}": [
      "prettier --write"
    ]
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "bing",
  "vendor": "vtex",
  "version": "1.1.0",
  "title": "bing",
  "description": "bing",
  "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": "Bing uet Options",
    "type": "object",
    "bindingBounded": true,
    "properties": {
      "bingId": {
        "title": "Bing Key",
        "description": "Enter your 7 digits key Bing",
        "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 buyer-org-supplier/package.json from the buyer-org-supplier VTEX app.

[Assistant]
Here's the implementation:

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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "buyer-org-supplier",
  "version": "0.6.0",
  "title": "Buyer Organization Supplier",
  "description": "A app for handle buyer organizations feature for suppliers",
  "builders": {
    "docs": "0.x",
    "node": "6.x"
  },
  "dependencies": {},
  "registries": [
    "smartcheckout"
  ],
  "credentialType": "absolute",
  "policies": [
    {
      "name": "ADMIN_DS"
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "kubernetes.default.svc.cluster.local",
        "path": "*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/profile-system/*"
      }
    }
  ],
  "$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 rebuy/manifest.json from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "rebuy",
  "vendor": "vtex",
  "version": "1.7.0",
  "title": "Rebuy",
  "description": "VTEX Rebuy app",
  "mustUpdateAt": "2019-10-26",
  "categories": [],
  "registries": [
    "smartcheckout"
  ],
  "builders": {
    "store": "0.x",
    "react": "3.x",
    "messages": "1.x",
    "docs": "0.x"
  },
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {
    "vtex.styleguide": "9.x",
    "vtex.store-components": "3.x",
    "vtex.store-graphql": "2.x",
    "vtex.store-resources": "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 shareasale/manifest.json from the shareasale VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "shareasale",
  "version": "1.0.3",
  "title": "Shareasale",
  "description": "Shareasale",
  "builders": {
    "react": "3.x",
    "store": "0.x",
    "pixel": "0.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2019-10-01",
  "billingOptions": {
    "termsURL": "",
    "support": {
      "url": "https://support.vtex.com/hc/requests"
    },
    "free": true
  },
  "dependencies": {
    "vtex.pixel-interfaces": "1.x"
  },
  "settingsSchema": {
    "title": "Shareasale",
    "type": "object",
    "properties": {
      "merchantId": {
        "title": "Merchant ID",
        "description": "Enter your Merchant ID",
        "type": "string"
      },
      "transtype": {
        "title": "Type of Transaction",
        "type": "string",
        "enum": [
          "sale",
          "lead"
        ]
      }
    }
  },
  "$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 iodas-bookstore-theme/README.md from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Store theme
Our boilerplate theme to create stores in the VTEX IO platform.

## Preview
![](https://user-images.githubusercontent.com/1354492/63937047-e8d81c80-ca37-11e9-86fc-61e88847bbfb.png)

## Tutorial
To understand how things work check our tutorial [Build a store using VTEX IO](https://help.vtex.com/en/tracks/build-a-store-using-vtex-io)

## Dependencies
All store components that you see on this document are open source too. Production ready, you can found those apps in this GitHub organization.

Store framework is the baseline to create any store using _VTEX IO Web Framework_.
- [Store](https://github.com/vtex-apps/store/blob/master/README.md)

Store GraphQL is a middleware to access all VTEX APIs.
- [Store GraphQL](https://github.com/vtex-apps/store-graphql/blob/master/README.md)

### Store Component Apps
- [Header](https://github.com/vtex-apps/store-header/blob/master/README.md)
- [Footer](https://github.com/vtex-apps/store-footer/blob/master/README.md)
- [Carousel](https://github.com/vtex-apps/carousel/blob/master/README.md)
- [Shelf](https://github.com/vtex-apps/shelf/blob/master/README.md)
- [Telemarketing](https://github.com/vtex-apps/telemarketing/blob/master/README.md)
- [Menu](https://github.com/vtex-apps/menu/blob/master/README.md)
- [Login](https://github.com/vtex-apps/login/blob/master/README.md)
- [Minicart](https://github.com/vtex-apps/minicart/blob/master/README.md)
- [Category Menu](https://github.com/vtex-apps/category-menu/blob/master/README.md)
- [Product Summary](https://github.com/vtex-apps/product-summary/blob/master/README.md)
- [Breadcrumb](https://github.com/vtex-apps/breadcrumb/blob/master/README.md)
- [Search Result](https://github.com/vtex-apps/search-result/blob/master/README.md)
- [Product Details](https://github.com/vtex-apps/product-details/blob/master/README.md)
- [Storecomponents](https://github.com/vtex-apps/store-components/blob/master/README.md)
- [Product Kit](https://github.com/vtex-apps/product-kit/blob/master/README.md) :construction: under construction
- [WishList](https://github.com/vtex-apps/wishlist/blob/master/README.md)  :construction: under construction
- [Order Placed](https://github.com/vtex-apps/order-placed/blob/master/README.md) :construction: under construction

### Store Pixel Apps

 - [Facebook Pixel](https://github.com/vtex-apps/facebook-pixel/blob/master/README.md)
 - [Google Analytics](https://github.com/vtex-apps/google-analytics/blob/master/README.md)
 - [Google Tag Manager](https://github.com/vtex-apps/google-tag-manager/blob/master/README.md)

## Contributing

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

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "bookstoretheme",
  "name": "iodas-bookstore-theme",
  "version": "0.1.0",
  "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",
    "vtex.slider-layout": "0.x",
    "vtex.store-image": "0.x"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema",
  "title": "Store Theme",
  "description": "VTEX IO Store Theme",
  "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 kelkoo/package.json from the kelkoo VTEX app.

[Assistant]
Here's the implementation:

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

[Assistant]
Here's the implementation:

```json
{
  "name": "kelkoo",
  "vendor": "vtex",
  "version": "1.0.0",
  "title": "Kelkoo first party integration",
  "description": "",
  "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": "Kelkoo",
    "type": "object",
    "properties": {
      "merchantId": {
        "title": "Shop ID",
        "description": "Enter the unique ID representing your shop within the Kelkoo system (COMID_VALUE)",
        "type": "string"
      },
      "countryCode": {
        "title": "Product country identifier",
        "description": "Enter the 2-letter country code (lower case) for the country on which your products are listed on Kelkoo (COUNTRY_CODE)",
        "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 konduto-antifraud/manifest.json from the konduto-antifraud VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "antifraud-pixel",
  "vendor": "konduto",
  "version": "0.4.2",
  "title": "Konduto Antifraud Pixel",
  "description": "Konduto Antifraud Pixel",
  "mustUpdateAt": "2019-04-03",
  "builders": {
    "pixel": "0.x",
    "react": "3.x",
    "store": "0.x"
  },
  "dependencies": {
    "vtex.pixel-interfaces": "1.x"
  },
  "policies": [
    {
      "name": "pixel"
    }
  ],
  "billingOptions": {
    "free": true
  },
  "settingsSchema": {
    "title": "Konduto Antifraud Pixel",
    "type": "object",
    "properties": {
      "kondutoId": {
        "title": "Konduto ID",
        "description": "Enter the public_key informed by Konduto",
        "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 onesignal/package.json from the onesignal 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/prettier-config": "^0.3.1",
    "eslint": "^7.4.0",
    "eslint-config-vtex": "^12.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 onesignal/manifest.json from the onesignal VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "onesignal",
  "vendor": "vtex",
  "version": "1.1.0",
  "title": "OneSignal",
  "description": "",
  "categories": [],
  "dependencies": {},
  "builders": {
    "node": "6.x",
    "docs": "0.x",
    "pixel": "0.x",
    "service-worker": "0.x"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    }
  ],
  "settingsSchema": {
    "title": "OneSignal",
    "type": "object",
    "properties": {
      "appId": {
        "title": "App ID",
        "type": "string",
        "default": "",
        "description": "Enter the App ID (xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx)"
      }
    }
  },
  "$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 overlay-layout/package.json from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "version": "0.0.0",
  "devDependencies": {
    "@types/node": "^13.1.8",
    "@vtex/intl-equalizer": "^2.3.0",
    "@vtex/prettier-config": "^0.0.1",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^11.2.1",
    "eslint-config-vtex-react": "^5.1.0",
    "husky": "^2.4.1",
    "prettier": "^1.19.1",
    "typescript": "^3.7.5"
  },
  "scripts": {
    "lint": "eslint --quiet --fix --ext ts,tsx ./react",
    "test": "cd ./react && yarn test",
    "verify": "yarn lint && yarn test"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn lint",
      "pre-push": "yarn verify"
    }
  },
  "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 overlay-layout/manifest.json from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "overlay-layout",
  "version": "0.1.3",
  "title": "VTEX Overlay Layout",
  "description": "A React Overlay component.",
  "builders": {
    "react": "3.x",
    "store": "0.x",
    "docs": "0.x"
  },
  "dependencies": {
    "vtex.css-handles": "0.x",
    "vtex.responsive-values": "0.x"
  },
  "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 product-highlight-by-vtex-segment/package.json from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "product-highligh-by-vtex-segment",
  "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"
    ]
  },
  "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"
  },
  "dependencies": {
    "@vtex/api": "^6.45.0",
    "@vtex/clients": "^2.13.0",
    "atob": "^2.1.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 product-highlight-by-vtex-segment/manifest.json from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtexarg",
  "name": "product-highlight-by-vtex-segment",
  "version": "0.3.2",
  "title": "Product Highlight by Vtex Segment",
  "description": "A component that gives a highlights solution for WL Architecture for the new law Ley de Gondolas",
  "builders": {
    "store": "0.x",
    "react": "3.x",
    "docs": "0.x",
    "node": "6.x",
    "graphql": "1.x"
  },
  "billingOptions": {
    "support": {
      "url": "https://support.vtex.com/hc/requests"
    },
    "type": "free",
    "availableCountries": ["*"]
  },
  "dependencies": {
    "vtex.css-handles": "0.x",
    "vtex.product-context": "0.x",
    "vtex.render-runtime": "8.x"
  },
  "settingsSchema": {
    "title": "ProductHighlight",
    "type": "object",
    "properties": {
      "defaultSellerId": {
        "title": "Default Seller Id",
        "type": "string",
        "description": "Enter the default seller id. For example: jumboargentinav692lanus692"
      },
      "defaultNameCollection": {
        "title": "Default Collection Name",
        "type": "string",
        "description": "Enter the default name of the collection. For example: leyDeGondolas"
      },
      "imageUrlOfHighlight": {
        "title": "Image Url of Highlight",
        "type": "string",
        "description": "Enter the url of the image that you want to show like Highlight."
      }
    }
  },
  "$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 avatax-br-admin/package.json from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "version": "0.0.0",
  "name": "CHANGE_ME",
  "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",
    "@vtex/tsconfig": "^0.5.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.9.6"
  },
  "dependencies": {
    "git": "^0.1.5",
    "git-gui": "^0.0.7",
    "yup": "^0.32.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 avatax-br-admin/manifest.json from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "avatax-br",
  "version": "2.2.0",
  "title": "Avatax Admin",
  "description": "Admin part of avatax app",
  "builders": {
    "react": "3.x",
    "messages": "1.x",
    "docs": "0.x",
    "admin": "0.x"
  },
  "dependencies": {
    "vtex.styleguide": "9.x",
    "vtex.avatax-br-service": "1.x",
    "vtex.avatax-br-tax-protocol": "1.x"
  },
  "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 awin/manifest.json from the awin VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "CHANGEME",
  "vendor": "vtex",
  "version": "0.0.1",
  "title": "CHANGEME",
  "description": "CHANGEME",
  "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": "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 slider/README.md from the slider VTEX app.

[Assistant]
Here's the implementation:

```markdown
# VTEX Slider

## Description

The VTEX Slider is a slider that aims a good support for SSR and can display one or more slides per page.

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

## Table of Contents
- [Usage](#usage)
  - [Configuration](#configuration)
    - [Slider](#slider)
    - [Slide](#slide)
    - [SliderContainer](#slidercontainer)
    - [Dots](#dots)
  - [Styles API](#styles-api)
    - [CSS namespaces](#css-namespaces)
- [Tests](#tests)

## Usage

To import it you can add to you `manifest.json` the following:

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

And then in your component you can import the components exported from the slider:

```javascript
import { Slider, Slide } from 'vtex.slider'
```

You can use it in your code like a React component with the jsx tags:

```javascript

handleChangeSlide = i => {
  this.setState({ currentSlide: i })
}

render() {
  const { currentSlide } = this.state
  // ...

  const { myProducts } = this.props

  return (
    <Slider currentSlide={currentSlide} onChangeSlide={this.handleChangeSlide}>
      {myProducts.map(product => (
        <Slide key={product.id}>
          <DisplayProductComponent product={product} />
        </Slide>
      ))}
    </Slider>
  )
}

```

If you want to show multiple items in the same page at the same time you can use the prop `perPage`:

```javascript
render() {
  const { currentSlide } = this.state
  const { myProducts } = this.props

  // The keys of the object represent the size of the window in px.
  // In this case if the window is 1300px large or bigger it will show 5 items,
  // If it has 900px or any size until 1299px it will show 4 items
  const perPage = {
    1300: 5,
    900: 4,
    700: 2,
    600: 1,
  }

  return (
    <Slider
      currentSlide={currentSlide}
      onChangeSlide={this.handleChangeSlide}
      perPage={perPage}
    >
      {myProducts.map(product => (
        <Slide key={product.id}>
          <DisplayProductComponent product={product} />
        </Slide>
      ))}
    </Slider>
  )
}
```

Bellow is an example with all the components together:

```javascript
arrowRender = ({ orientation, onClick }) => {
  return (
    <div className="arrow-container-class" onClick={onClick}>
      <MyArrowComponent orientation={orientation} />
    </div>
  )
}

arrowContainerRender = ({ children }) => {
  return (
    <MyContainerComponent>
      {children}
    </MyContainerComponent>
  )
}

render() {
  const { currentSlide } = this.state
  const { myProducts } = this.props

  const perPage = {
    1300: 5,
    1100: 4,
    900: 3,
    700: 2,
    300: 1
  }

  return (
    <SliderContainer className="mw9">
      <Slider
        loop
        easing="ease"
        duration={500}
        perPage={perPage}
        currentSlide={currentSlide}
        arrowRender={this.arrowRender}
        onChangeSlide={this.handleChangeSlide}
        arrowsContainerComponent={this.arrowContainerRender}
      >
        {myProducts.map(product => (
          <Slide
            className="slide-css-class"
            sliderTransitionDuration={500}
            key={product.id}
            defaultWidth={280}
          >
            <ProductComponent product={product} />
          </Slide>
        ))}
      </Slider>
      <Dots
        loop
        showDotsPerPage
        perPage={this.perPage}
        currentSlide={currentSlide}
        totalSlides={myProducts.length}
        onChangeSlide={this.handleChangeSlide}
        classes={{
          root: 'pv4',
          notActiveDot: 'bg-muted-3',
          dot: 'dot pointer br-100',
          activeDot: 'bg-emphasis'
        }}
      />
    </SliderContainer>
  )
}
```

### Configuration

#### Slider

| Prop name | Type | isRequired | defaultValue | Description |
| --- | --- | --- | --- | -- |
| `arrowRender` | `func` | :no_entry_sign: | :no_entry_sign: | A render function that will receive as props an orientation prop and an onClick callback |
| `arrowsContainerComponent` | `func/string` | :no_entry_sign: | :no_entry_sign: | The component used to contain both arrows. Either a string to use a DOM element or a component |
| `children` | `element/array` | :heavy_check_mark: | :no_entry_sign: | The slides to render |
| `classes` | `object` | :no_entry_sign: | No extra classes applied to any element | Classes to apply to the Slider elements |
| `currentSlide` | `number` | :no_entry_sign: | `0` | Current slide on the screen, if you have perPage > 1, then the current slide is the most left slide on the screen (You should not use this variable to display the index of the slide on the screen if you're using `loop={true}`). |
| `cursor` | `string` | :no_entry_sign: | `'-webkit-grab'` | Css value of cursor when mouse is hovering the slider frame |
| `cursorOnMouseDown` | `string` | :no_entry_sign: | `'-webkit-grabbing'` | Css value of cursor when mouse is down |
| `duration` | `number` | :no_entry_sign: | `250` | Duration of transitions |
| `easing` | `string` | :no_entry_sign: | `'ease-out'` | Transition function |
| `loop` | `bool` | :no_entry_sign: | `false` | If the slides should be looping |
| `onChangeSlide` | `func` | :heavy_check_mark: | :no_entry_sign: | Function to change the value of currentSlide. The function should expect a `number` as it's only parameter |
| `perPage` | `number/object` | :no_entry_sign: | `1` | Amount of slides to be on the screen, if a number is passed, then that's the number of slides that will be shown, if an object with breakpoints is passed, then the component will check the size of the screen to see how many slides will be on the screen at the same time |
| `minPerPage` | `number` | :no_entry_sign: | `1` | Minimum amount of slides to be on the screen, can be used to control how many itens will be displayed in the smallest screen size |
| `resizeDebounce` | `number` | :no_entry_sign: | `250` | Resize debounce timer in milliseconds |
| `rootTag` | `string` | :no_entry_sign: | `'div'` | Tag to be rendered in the root of the slider |
| `sliderFrameTag` | `string` | :no_entry_sign: | `'ul'` | Tag to be rendered in the slider frame element |
| `threshold` | `number` | :no_entry_sign: | `50` | Minimum of pixels to drag until the slider change the `currentSlide` |

#### Slide

| Prop name | Type | isRequired | defaultValue | Description |
| --- | --- | --- | --- | --- |
| `children` | `node` | :heavy_check_mark: | :no_entry_sign: | Node to render |
| `className` | `string` | :no_entry_sign: | :no_entry_sign: | Classes to pass to the root element of the Slide |
| `defaultWidth` | `number` | :no_entry_sign: | :no_entry_sign: | Default width of the slide (only applied in the first render) |
| `tag` | `string` | :no_entry_sign: | `li` | Tag to be rendered in the root element |
| `fitImg` | `bool` | :no_entry_sign: | `true` | If the slide component should try to fit the `img` (only works if children is an `img` element) |
| `resizeDebounce` | `number` | :no_entry_sign: | `250` | Time of debounce of resize event listener |
| `sliderTransitionDuration` | `number` | :no_entry_sign: | `250` | Duration of transition passed to Slider (must be the same), if nothing is passed to any of the components it will apply the same default value |

#### SliderContainer

| Prop name | Type | isRequired | defaultValue | Description |
| --- | --- | --- | --- | --- |
| `autoplay` | `bool` | :no_entry_sign: | `false` | If the slider should be passing automatically |
| `autoplayInterval` | `number` | :no_entry_sign: | `5000` | Time in milliseconds of the interval to change the currentSlider |
| `children` | `node` | :heavy_check_mark: | :no_entry_sign: | Children of the component to render |
| `className` | `string` | :no_entry_sign: | :no_entry_sign: | Classes to be applied to the root element |
| `onNextSlide` | `func` | :no_entry_sign: | :no_entry_sign: | Function to be called if `autoplay={true}` |
| `pauseOnHover` | `bool` | :no_entry_sign: | `true` | If the interval should not be executed when the mouse is hovering the component |
| `tag` | `string` | :no_entry_sign: | `'div'` | Tag to render the component |

#### Dots

| Prop name | Type | isRequired | defaultValue | Description |
| --- | --- | --- | --- | --- |
| `classes` | `object` | :no_entry_sign: | No extra classes applied to any element | Classes to style the elements of the component |
| `dotProps` | `object` | :no_entry_sign: | :no_entry_sign: | Extra props to be applied to the dot element |
| `dotSize` | `number/string` | :no_entry_sign: | :no_entry_sign: | The size of the dots, can be a number (in this case it will use px unit), or a string (you have to pass the number with the unit e.g `'3rem'`) |
| `dotTag` | `string` | :no_entry_sign: | `'li'` | Tag to be rendered in the dot element |
| `loop` | `bool` | :no_entry_sign: | `false` | If the slides should be looping |
| `onChangeSlide` | `func` | :heavy_check_mark: | :no_entry_sign: | Function to change the currentSlide |
| `perPage` | `number/object` | :no_entry_sign: | `1` | This prop works the same way the `perPage` of `Slider` and this component should receive the same value of `Slider` |
| `resizeDebounce` | `number` | :no_entry_sign: | `250` | Debounce time in milliseconds |
| `rootTag` | `string` | :no_entry_sign: | `'ul'` | Tag to be rendered as the root element of the component |
| `totalSlides` | `number` | :heavy_check_mark: | :no_entry_sign: | Total value of sliders that will be rendered |
| `minPerPage` | `number` | :no_entry_sign: | `1` | This prop works the same way the `minPerPage` of `Slider` and this component should receive the same value of `Slider` |
| `showDotsPerPage` | `bool` | :no_entry_sign: | `false` | If this frag is true, then every dot represent a page of slides (e.g. if `perPage = 2` and you have 4 elements, then you have 2 dots), if false, then it will render one dot to each slide |

## Styles API

You can style this app by using the props `classeName` and `classes` of the components. But if you want to style every slider of your app you need to use the [CSS namespaces](#css-namespaces) to do it.

### CSS namespaces

:construction: :construction: :construction:

## Tests

[![Coverage Status](https://coveralls.io/repos/github/vtex-apps/slider/badge.svg?branch=master)](https://coveralls.io/github/vtex-apps/slider?branch=master)

## Travis CI

[![Build Status](https://travis-ci.org/vtex-apps/slider.svg?branch=master)](https://travis-ci.org/vtex-apps/slider)

```