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

[Assistant]
Here's the implementation:

```markdown
# Profile Form

> A React component for rendering and managing user profile forms

## Setup

Through **NPM**:

```sh
$ npm install @vtexlab/instore-profile
```

```js
import ProfileContainer from '@vtexlab/instore-profile/ProfileContainer'
```

## API

### Base Components

- [ProfileContainer](#profilecontainer)
- [ProfileRules](#profilerules)
- [ProfileSummary](#profilesummary)

### Helper Functions

- [addValidation](#addvalidation)
- [removeValidation](#removevalidation)

### Public Modules

- [locales/](#locales)
- [rules/](#rules)
- [inputs/](#inputs)

### Types

- [ProfileShape](#profileshape)
- [ProfileFieldShape](#profilefieldshape)
- [ProfileWithValidationShape](#profilewithvalidationshape)
- [RuleFieldShape](#rulefieldshape)
- [RuleShape](#ruleshape)

---

## Base Components

### ProfileContainer

This is the main component of `instore-profile`. It will render inputs based on the rules provided, and fill them with data from the profile object passed to it. It also spawns internal child components that perform validation on such inputs, also based on the rules.

`ProfileContainer` keeps the current profile being managed in its internal state; the `defaultProfile` prop is only accessed at mount time. If you need to update the prop at some other time, use the special `key` prop to force the recreation of the whole container with the new profile. It provides an `onSubmit()` function to call a function in the host component when the user submits the form.

Inputs and buttons inside `ProfileContainer` can be customized to fit the style of different host applications. You can also pass in children components and they will be displayed right before the business toggle button, but they won't receive validation, submission or state management - you must do that yourself.

#### Props

- **rules**: (default: the default rules) Set of rules for this form
- **defaultProfile**: Initial data for the profile object
- **onSubmit**: Function to be called upon form submission. Receives as argument an object containing a `valid` boolean representing the state of the profile object, and a clean profile (shape: `ProfileShape`)
- **Input**: (default: `StyleguideInput`) Component to be used as input for the form fields
- **ToggleBusinessButton**: Component to be used as a button for toggling business fields
- **SubmitButton**: Component to be used as a submit button
- **shouldShowExtendedGenders**: (default: `false`) Whether the gender input should display a wide list of genders or just male/female
- **children**: Custom components to be added right before the business toggle button
- **intl**: `react-intl` automatically injected util

```js
ProfileContainer.propTypes = {
  rules: RuleShape.isRequired,
  defaultProfile: ProfileShape,
  onSubmit: PropTypes.func.isRequired,
  Input: PropTypes.func,
  ToggleBusinessButton: PropTypes.element,
  SubmitButton: PropTypes.element,
  shouldShowExtendedGenders: PropTypes.bool,
  children: PropTypes.node,
  intl: intlShape.isRequired,
}
```

#### Example

```js
<ProfileContainer
  profile={profile}
  rules={brRules}
  onSubmit={this.handleSubmit}
/>
```

An example with customized buttons:

```js
<ProfileContainer
  profile={profile}
  rules={brRules}
  onSubmit={this.handleSubmit}
  Input={StyleguideInput}
  SubmitButton={
    <Button block size="small">
      Save profile
    </Button>
  }
  ToggleBusinessButton={<Button size="small" block />}
/>
```

Note that the `onClick` hook for both buttons is automatically injected by the container. Also, the text for the `ToggleBusinessButton` is standardized; you don't need to pass any text inside your button (and if you do, it will be overwritten).

### ProfileRules

This component contains functionality for easily fetching the profile rules for any country and providing them to its direct children (usually a `ProfileContainer` component).

#### Props

- **`children`**: The component which will be rendered inside this component and, therefore, receive the provided rules (you probably want this to be a `ProfileContainer` instance)
- **`country`**: The string identifier for the country which rules are to be provided, must use `ISO Alpha3` standard (e.g. `BRA`, `USA`, etc.)
- **`shouldUseIOFetching`**: Whether to use built-in dynamic file fetching for the rules. Should be used if the project is an IO app
- **`fetch`**: Functionality for fetching the rule files. Outside of IO, it **must** receive the function `{country => import('@vtex/instore-profile/lib/rules/' + country)}` as its value. In IO, this prop **must not** be set

```js
ProfileRules.propTypes = {
  children: PropTypes.element.isRequired,
  locale: PropTypes.string.isRequired,
  shouldUseIOFetching: PropTypes.bool,
  fetch: PropTypes.func,
}
```

#### Example

Here, `ProfileContainer` will be injected with the fetched rules:

```js
<ProfileRules
  locale={'pt-BR'}
  fetch={locale => import('../../src/rules/' + locale)}
>
  <ProfileContainer profile={profile} onSubmit={this.handleSubmit} />
</ProfileRules>
```

### ProfileSummary

This component takes in a profile object and a set of rules and prepares the data for displaying. Its main advantages are handling the translation of the labels and informing which fields should be hidden, but it also does some parsing logic such as translating gender and masking phone.

`ProfileSummary` renders nothing by itself. The data is served as a render prop, and the host app must display it as desired. An object is passed with three properties: `isCorporate`, a boolean value indicating if the profile represents a corporation, and `personalData` and `businessData`, where each of these is an object with the keys being the field names (such as `firstName` or `homePhone` for `personalData`) and the value being an object containing useful information for displaying each field:

- `label`: the field label, already translated.
- `value`: the value obtained from the `profile` prop, masked if necessary
- `hidden`: whether this field should be hidden or not

#### Props

- **`profile`**: The profile object whose data will be served
- **`rules`**: The set of rules to apply over the profile. Works best if injected by a `ProfileRules` component
- **`children`**: The render prop function, serving the data in the structure explained above
- **`intl`**: `react-intl` internal utility

```js
ProfileSummary.propTypes = {
  profile: ProfileShape.isRequired,
  rules: RuleShape.isRequired,
  children: PropTypes.func.isRequired,
  intl: intlShape.isRequired,
}
```

#### Example

```js
<ProfileSummary profile={profile}>
  {({ personalData, businessData, isCorporate }) => (

Personal Data:

      {Object.keys(personalData).map(fieldName =>

          {!personalData[fieldName].hidden &&
            {personalData[fieldName].label}}
          {!personalData[fieldName].hidden &&
            {personalData[fieldName].value}}

      )}
      {isCorporate && (

Business Data:

        {/* [...] */}
      )}

  )}
</ProfileSummary>
```

## Helper Functions

### addValidation

This function takes in a clean profile and a set of rules, and generates another profile object with validation metadata (following `ProfileWithValidationShape`). Besides just wrapping each property, it checks each rule for a `display` transform function, and applies it to the value before returning. This is specially useful when editing dates, as they usually come from the API as a `YYYY-MM-DD` string and you may want to change the format to something more localized before displaying it inside the text input.

#### Params

- **`profile`**: A profile in the shape of [`ProfileShape`](#profileshape)
- **`rules`**: A set of rules in the shape of [`RuleShape`](#ruleshape)

#### Returns

- A profile in the shape of [`ProfileWithValidationShape`](#profilewithvalidationshape)

### removeValidation

This is the inverse to the `addValidation` function above. As such, besides stripping validation metadata it also checks the rules for `submit` transformations and applies it to the proper fields. Again, this is useful to transform dates from the user's localized format to the international format required by the API.

#### Params

- **`profile`**: A profile in the shape of [`ProfileWithValidationShape`](#profilewithvalidationshape)
- **`rules`**: A set of rules in the shape of [`RuleShape`](#ruleshape)

#### Returns

- A profile in the shape of [`ProfileShape`](#profileshape)

## Public Modules

### locales/

This folder contains JSON localized files providing translations for every text used inside the `instore-profile`. The correct files must be imported and provided by the host app at their own charge.

### rules/

This folder provides files for each supported country, containing the rules used to manage the form. There are also default rules, which are used when an unsupported country is provided to the `ProfileRules` component.

Such rules provide information on how each field of the form should be rendered. Functionality for masking and validating inputs is also provided inside the rules and isolated by field - there are no built-in validators in `instore-profile` (except for checking mandatory fields).

### inputs/

This folder provides inputs to be used as building blocks for the profile form. Currently, only `StyleguideInput`, an input which follows the [VTEX Styleguide](https://vtex.github.io/styleguide/#input), is provided.

## Types

### ProfileShape

This is the shape of a clean profile object, as if it had just been retrieved from a server.

```js
PropTypes.shape({
  /** Date of the user's birth */
  birthDate: PropTypes.string,
  /** User's business phone */
  businessPhone: PropTypes.string,
  /** User's corporate document */
  corporateDocument: PropTypes.string,
  /** User's corporate name */
  corporateName: PropTypes.string,
  /** User's personal document */
  document: PropTypes.string,
  /** User's email */
  email: PropTypes.string,
  /** User's personal name */
  firstName: PropTypes.string,
  /** User's gender */
  gender: PropTypes.string,
  /** User's personal phone */
  homePhone: PropTypes.string,
  /** User's surname */
  lastName: PropTypes.string,
  /** User's corporate state registration */
  stateRegistration: PropTypes.string,
  /** User's corporate trade name */
  tradeName: PropTypes.string,
  /** Whether the user is a corporation or not */
  isCorporate: PropTypes.bool,
})
```

### ProfileFieldShape

When the profile object is passed to `ProfileContainer`, validation data is added to each field. Thus, every field is now an object with the following shape:

```js
PropTypes.shape({
  /** The value for that field */
  value: PropTypes.any,
  /** i18n code for the error this value is presenting */
  error: PropTypes.string,
  /** Whether the input should receive focus */
  focus: PropTypes.bool,
  /** Whether the input has already been touched by the user */
  touched: PropTypes.bool,
})
```

### ProfileWithValidationField

The whole validated profile object simply maintains the same structure as in `ProfileShape`, but now each field is of type `ProfileFieldShape`.

### RuleShape

Every rule inside the `rules/` folder contains the structure below. The fields are divided between `personal` and `business` fields, in order to be able to alternate visibility between them.

```js
PropTypes.shape({
  /** The country this rule refers to */
  country: PropTypes.string,
  /** Configuration for the personal fields */
  personalFields: PropTypes.arrayOf(RuleFieldShape).isRequired,
  /** Configuration for the business fields */
  businessFields: PropTypes.arrayOf(RuleFieldShape).isRequired,
})
```

### RuleShape

Inside each `fields` array of a rules object, every object represents one field of `instore-profile`. These objects take on the shape below. Inside these rule-shaped objects, validation and masking functionality is provided.

```js
PropTypes.shape({
  /** Name for both the field and the profile object property */
  name: PropTypes.string.isRequired,
  /** Maximum length of the field */
  maxLength: PropTypes.number,
  /** i18n code for the label to be displayed over the field */
  label: PropTypes.string.isRequired,
  /** Whether the field is required or not */
  required: PropTypes.bool,
  /** Whether the field should be hidden or not */
  hidden: PropTypes.bool,
  /** Function returning a mask to be applied on the value */
  mask: PropTypes.func,
  /** A function to evaluate if the value is valid */
  validate: PropTypes.func,
  /** A function to transform received data before displaying */
  display: PropTypes.func,
  /** A function to transform input data before submitting */
  submit: PropTypes.func,
})
```

---

Author: **Gustavo Silva** (@akaFTS)

This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "@vtexlab/instore-profile",
  "license": "AGPL-3.0-only",
  "version": "2.9.6",
  "description": "React component for managing user profiles",
  "main": "lib/index.js",
  "files": [
    "lib"
  ],
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
    "build": "npm run symlinks && nwb build-react-component --no-demo && npm run removeMocks && npm run addLocales",
    "build:link": "npm link && watch 'npm run build' src",
    "removeMocks": "rm -rf lib/**/__mocks__ && rm -rf lib/__mocks__",
    "addLocales": "cp -R -f messages/ lib/locales/",
    "clean": "nwb clean-module && nwb clean-demo",
    "start": "npm run symlinks && nwb serve-react-demo",
    "symlinks": "rm -rf react/node_modules && rm -rf src && ln -sf react src",
    "test": "jest --env=jsdom",
    "test:coverage": "jest --env=jsdom --coverage",
    "test:watch": "jest --env=jsdom --watch",
    "vtex:link": "npm run symlinks && vtex link",
    "prepublishOnly": "npm run build",
    "locales:lint": "intl-equalizer",
    "locales:fix": "intl-equalizer --fix"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "yarn locales:lint && yarn test"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@vtex/intl-equalizer": "^2.4.2",
    "@vtex/prettier-config": "^0.1.3",
    "babel-jest": "^23.6.0",
    "babel-plugin-add-react-displayname": "0.0.5",
    "babel-preset-react-app": "^3.1.2",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-react-intl": "^2.0.0",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.2.1",
    "eslint-config-vtex-react": "^6.2.1",
    "husky": "^4.2.0",
    "jest": "^22.4.4",
    "jest-enzyme": "^6.0.2",
    "lint-staged": "^10.0.2",
    "nwb": "^0.21.5",
    "prettier": "^1.19.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-intl": "^2.4.0",
    "react-hot-loader": "^4.3.4",
    "react-test-renderer": "^16.4.1",
    "typescript": "^3.7.5"
  },
  "dependencies": {
    "@vtex/phone": "^4.8.0",
    "@vtex/styleguide": "^5.4.4",
    "downshift": "^2.0.20",
    "match-sorter": "^2.2.3",
    "moment": "^2.22.2",
    "msk": "^1.0.3"
  },
  "peerDependencies": {
    "react": "^16.4.1 || ^17.0.2",
    "react-intl": "^2.4.0 || ^5.15.8",
    "vtex-tachyons": "^2.5.0"
  },
  "repository": "https://github.com/vtex/instore-profile",
  "author": "Gustavo Silva (@akafts)",
  "homepage": "https://github.com/vtex/instore-profile",
  "keywords": [
    "react-component",
    "vtex",
    "profile",
    "instore"
  ],
  "jest": {
    "setupTestFrameworkScriptFile": "<rootDir>/react/__tests__/setupTests.js",
    "testURL": "http://localhost",
    "testPathIgnorePatterns": [
      "/node_modules/",
      "<rootDir>/es/",
      "<rootDir>/lib/",
      "<rootDir>/umd/",
      "<rootDir>/src/",
      "setupTests"
    ],
    "modulePathIgnorePatterns": [
      "<rootDir>/es/",
      "<rootDir>/lib/",
      "<rootDir>/umd/",
      "<rootDir>/src/"
    ],
    "transformIgnorePatterns": [
      "[/\\\\]lib[/\\\\].+\\.(js|jsx)$",
      "[/\\\\]umd[/\\\\].+\\.(js|jsx)$",
      "[/\\\\]es[/\\\\].+\\.(js|jsx)$",
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"
    ],
    "moduleNameMapper": {
      "\\.(css|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)(\\?.*)?$": "identity-obj-proxy"
    },
    "transform": {
      "^.+\\.js$": "<rootDir>/jest.transform.js"
    }
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "profile-form",
  "version": "2.9.6",
  "title": "VTEX Profile-form",
  "description": "React component for managing user profiles",
  "builders": {
    "react": "2.x",
    "messages": "1.x"
  },
  "scripts": {
    "prereleasy": "npm run symlinks",
    "postreleasy": "vtex publish --verbose"
  },
  "mustUpdateAt": "2019-08-09",
  "categories": [],
  "registries": [
    "smartcheckout"
  ],
  "$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 drawer/package.json from the drawer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "store-drawer",
  "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": {
    "@vtex/prettier-config": "^0.1.3",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.0.3",
    "eslint-config-vtex-react": "^6.0.3",
    "husky": "^4.2.0",
    "lint-staged": "^10.0.2",
    "prettier": "2.3.2",
    "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 drawer/manifest.json from the drawer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "store-drawer",
  "vendor": "vtex",
  "version": "0.18.3",
  "title": "Store Drawer",
  "description": "The VTEX Drawer",
  "builders": {
    "messages": "1.x",
    "react": "3.x",
    "store": "0.x",
    "docs": "0.x"
  },
  "dependencies": {
    "vtex.store-icons": "0.x",
    "vtex.css-handles": "0.x",
    "vtex.responsive-values": "0.x",
    "vtex.pixel-manager": "1.x"
  },
  "mustUpdateAt": "2020-03-28",
  "registries": [
    "smartcheckout"
  ],
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "shopper-location-availability-qa-theme",
  "version": "0.0.1",
  "builders": {
    "styles": "2.x",
    "store": "0.x",
    "sitemap": "0.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2018-09-05",
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {
    "vtex.store": "2.x",
    "vtex.store-header": "2.x",
    "vtex.product-summary": "2.x",
    "vtex.store-footer": "2.x",
    "vtex.store-components": "3.x",
    "vtex.styleguide": "9.x",
    "vtex.slider": "0.x",
    "vtex.carousel": "2.x",
    "vtex.shelf": "1.x",
    "vtex.menu": "2.x",
    "vtex.minicart": "2.x",
    "vtex.product-details": "1.x",
    "vtex.product-kit": "1.x",
    "vtex.search-result": "3.x",
    "vtex.login": "2.x",
    "vtex.my-account": "1.x",
    "vtex.flex-layout": "0.x",
    "vtex.rich-text": "0.x",
    "vtex.store-drawer": "0.x",
    "vtex.locale-switcher": "0.x",
    "vtex.product-quantity": "1.x",
    "vtex.product-identifier": "0.x",
    "vtex.breadcrumb": "1.x",
    "vtex.sticky-layout": "0.x",
    "vtex.product-customizer": "2.x",
    "vtex.stack-layout": "0.x",
    "vtex.product-specification-badges": "0.x",
    "vtex.product-review-interfaces": "1.x",
    "vtex.telemarketing": "2.x",
    "vtex.order-placed": "2.x",
    "vtex.checkout-summary": "0.x",
    "vtex.product-list": "0.x",
    "vtex.add-to-cart-button": "0.x",
    "vtex.product-bookmark-interfaces": "1.x",
    "vtex.responsive-layout": "0.x",
    "vtex.slider-layout": "0.x",
    "vtex.store-image": "0.x",
    "vtex.store-icons": "0.x",
    "vtex.modal-layout": "0.x",
    "vtex.store-link": "0.x",
    "vtex.store-video": "1.x",
    "vtex.product-gifts": "0.x",
    "vtex.product-price": "1.x",
    "vtex.disclosure-layout": "1.x",
    "vtex.store-form": "0.x",
    "vtex.product-highlights": "2.x",
    "vtex.product-specifications": "1.x",
    "vtex.tab-layout": "0.x",
    "vtex.condition-layout": "2.x",
    "vtex.css-handles": "1.x"
  },
  "peerDependencies": {
    "vtex.shopper-location": "1.x",
    "vtex.location-availability": "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 mega-menu/README.md from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```markdown
### 📢 **Don't fork this project. Use, contribute, or open issues through [Store Discussion](https://github.com/vtex-apps/store-discussion)**.

# Mega menu

<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

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

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

##  ⚠ Maintenance ⚠
*Starting June 1st 2023, this application will no longer be maintained by VTEX.*

---

VTEX Mega Menu provides a form to create and manage the custom menu until three levels in the category tree. The stores can use this app as the main navigation menu.

![mega-menu-app](https://user-images.githubusercontent.com/12108601/121273428-e140db00-c88d-11eb-850c-02399b803d18.png)

## Configuration

### Step 1 - Installing the Mega Menu app

Using your terminal, log in to the desired VTEX account and run the following command:

`vtex install vtex.mega-menu@2.x`

### Step 2 - Define the category tree to be used as a menu in the admin

In the account's admin dashboard, access `STORE SETUP > Mega Menu` and using the available options configure the category tree according to your needs:

![mega-menu-admin-app](https://user-images.githubusercontent.com/8409481/185652487-8ca70f56-59f8-440c-b173-ad65a1763686.png)

### Step 3 - Implementing the app's blocks in your store theme

**IMPORTANT: If you have installed this app previously, please validate with your block settings and add the new components to modify the orientation Menu.
No change the option to vertical Menu if you haven't yet this configuration in your store.**

---

Once the app is configured, it is time to place the following blocks in your Store Theme app.

Import the mega menu app to your dependencies as `manifest.json`, for example:

```json
"peerDependencies": {
	"vtex.mega-menu": "2.x"
}
```

### `mega-menu`

This block is responsible for querying the previously built category tree and displaying it in the store.

| Prop name               | Type     | Description                                                                                | Default value                                                                                |
| ----------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| title                   | `String` | Title for the first level elements (departments) used in the mobile version or when the `orientation` is `vertical`.                                                  | Departments                                                                                |
| `orientation`           | `String` | Type of menu to be built. Possible values are horizontal and `vertical`                                                                                | A value is determined depending on the resolution of the device, if it is a mobile (phone and tablet) it is used `vertical` and for the rest `horizontal`. |
| defaultDepartmentActive | `String` | You can use this property to determine a department that will be shown when first displaying the menu, this is useful if you want to highlight a specific department. | 🚫                                                                                |
| openOnly                | `String` | Define the orientation of the menu. You can choose between vertical or horizontal. | `vertical`or `horizontal`                                                                                |

### `mega-menu-trigger-btn`

This block renders an icon that will be used as a trigger to open the **desktop** menu or when the `orientation` is `horizontal` or `vertical`.

_Note: Currently, this block receives the same props as an VTEX Store [Icon](https://github.com/vtex-apps/store-icons#props)._

### `mega-menu-go-back-btn`

This block can go back to the list of items in the first level of the menu (departments) only works when it is a **mobile device** or the `orientation` is `vertical`.

_To configure the desktop version:_

```json
{
  // ...

  "sticky-layout#4-desktop": {
    "children": ["flex-layout.row#4-desktop", "flex-layout.row#mega-menu"]
  },
  "flex-layout.row#4-desktop": {
    "children": [
      "flex-layout.col#trigger-mega-menu"
      // ...
    ]
  },

  "flex-layout.row#mega-menu": {
    "children": ["mega-menu#desktop"]
  },
  "mega-menu#desktop": {
    "props": {
      "openOnly": "horizontal"
    }
  },
  "flex-layout.col#trigger-mega-menu": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": ["mega-menu-trigger-btn"]
  },
  "mega-menu-trigger-btn": {
    "props": {
      "Drawer": "drawer"
    }
  }
}
```

_To configure the mobile version:_

```json
{
  // ...
  "flex-layout.row#1-mobile": {
    "children": [
      "flex-layout.col#trigger-mega-menu"
      // ...
    ],
    "props": {
      // ...
    }
  },

  "drawer": {
    "children": ["mega-menu#mobile"],
    "blocks": ["drawer-header#my-drawer"]
  },
  "mega-menu#mobile": {
    "props": {
      "defaultDepartmentActive": "...",
      "orientation": "vertical",
      "openOnly": "vertical"
    }
  },
  "drawer-header#my-drawer": {
    "children": ["flex-layout.row#drawer-header"]
  },
  "flex-layout.row#drawer-header": {
    "children": [
      "flex-layout.col#mega-menu-go-back-btn",
      "flex-layout.col#spacer",
      "flex-layout.col#drawer-close-button"
    ],
    "props": {
      "blockClass": "drawer-header",
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true,
      "preserveLayoutOnMobile": true,
      "fullWidth": true
    }
  },
  "flex-layout.col#drawer-close-button": {
    "children": ["drawer-close-button"],
    "props": {
      "verticalAlign": "middle",
      "horizontalAlign": "right"
    }
  },
  "flex-layout.col#mega-menu-go-back-btn": {
    "children": ["mega-menu-go-back-btn"],
    "props": {
      "verticalAlign": "middle",
      "horizontalAlign": "left",
      "paddingLeft": 4
    }
  }
}
```

## Notes

### Icons for menu items

In the form of creation and edition of a menu item it is possible to add an icon, currently you can select any of the [ICONPACK](https://github.com/vtex-apps/store-icons/blob/master/styles/iconpacks/iconpack.svg) that comes default with your store, but if you have customized (for more information read the following [guide](https://github.com/vtex-apps/store-icons/blob/master/docs/ICONPACK.md)) that file the modifications will not be visible in the select, therefore you must write the id of the icon manually.

![icon-selector](https://user-images.githubusercontent.com/12108601/122150424-5595f400-ce23-11eb-9f1e-c52c668c35f4.png)

### Styles for menu items

You can customize an element in a basic way using **comma (,)** separated CSS properties, for example:

⚠ _It is important not to abuse this functionality, for complex persoanlizations use [CSS Handle](#customization)._

```
padding-top:5px,
padding-left:20px,
padding-right:20px,
padding-bottom:5px,
font-size:20px,
font-weight:bold,
background-color:yellow,
color:red
```

![custom-item-using-css](https://user-images.githubusercontent.com/12108601/122150523-8118de80-ce23-11eb-80af-182be8348db5.png)

## Customization

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

| CSS Handle                        |
| --------------------------------- |
| `goBackContainer`                 |
| `goBackButton`                    |
| `goBackButtonIcon`                |
| `goBackButtonText`                |
| `menuContainer`                   |
| `menuContainerNav`                |
| `menuItem`                        |
| `submenuContainer`                |
| `styledLink`                      |
| `styledLinkIcon`                  |
| `styledLinkContainer`             |
| `styledLinkContent`               |
| `accordionIconContainer`          |
| `accordionIconContainer—isOpen`   |
| `accordionIconContainer—isClosed` |
| `accordionIcon`                   |
| `submenuContainer`                |
| `submenuList`                     |
| `submenuListVertical`             |
| `submenuItem`                     |
| `submenuItem—isOpen`              |
| `submenuItem—isClosed`            |
| `submenuItemVertical`             |
| `collapsibleContent`              |
| `collapsibleHeaderText`           |
| `seeAllLinkContainer`             |
| `seeAllLink`                      |
| `triggerContainer`                |
| `triggerButtonIcon`               |
| `triggerButtonIcon—active`        |
| `triggerButtonIcon—muted`         |
| `menuContainerVertical`           |
| `departmentsContainer`            |
| `menuContainerNavVertical`        |
| `menuItemVertical`                |
| `submenuContainerVertical`        |

### Upload mega menu data from CSV file

To upload data from a CSV file, You should create an import file with the following structure. The data will then be stored in the VBASE successfully.

![11](https://user-images.githubusercontent.com/8409481/152260407-8f5220d3-9522-41a9-b974-08915240985e.png)

The field `subMenus` is a String with the following structure:

`[{ "id":"submenu1383316", "name":"submenu1", "icon":"","slug":"Menu1/submenu1", "styles":"","display":true, "enableSty":true,"order":1, "slugRoot":"submenu1", "slugRelative":"Menu1", "menu":[{ "id":"sub-tercernivel-menu12121", "name":"sub-tercernivel-menu1-3", "icon":"", "slug":"Menu1/submenu1/menu1-3", "styles":"", "display":true, "enableSty":true, "order":1, "slugRoot":"menu1-3", "slugRelative":"Menu1/submenu1"}] }]`

The file should have the field like to show below:

![12](https://user-images.githubusercontent.com/8409481/152260595-0ba50600-52f3-42db-b754-85b794c4e567.png)

You can add the rows quantity that you want. Remember to keep the structure defined previously in all data.

![13](https://user-images.githubusercontent.com/8409481/152260652-732fbeda-1d61-49ce-afa1-6a19b8d9b05c.png)

Save the file. You can choose any name for the file. Then go to the admin and select the option “upload data”

![14](https://user-images.githubusercontent.com/8409481/152260742-6ee24d1f-48ae-4383-ab02-b3d921a283e4.png)

To generate backup data, download the information from the button “Download CSV”

![15](https://user-images.githubusercontent.com/8409481/152260800-7ecc499a-ba39-4168-8dcd-c0b225f610db.png)

![16](https://user-images.githubusercontent.com/8409481/152260876-07321655-a4ca-43eb-9c92-974ff8f9b12b.png)

This button only is available if the mega menu has data to save. The download file has the same structure defined at the begging of this step.

## NEW FUNCTIONALITY: Choose the orientation of the Mega Menu on the Desktop

In this release, Mega Menu App has new functionality that allows you to choose the orientation. You can choose between Horizontal o Vertical.

**IMPORTANT: before choosing the vertical option to desktop, configure the blocks in your store. Go to step 3 of this guide to configure the blocks**

When you guarantee the configuration of blocks in the store, go to the new button to settings of Mega Menu and change the orientation.

![image](https://user-images.githubusercontent.com/8409481/185653890-f6c423bd-8d32-404e-a416-141820f73112.png)

![image](https://user-images.githubusercontent.com/8409481/185654543-a245860e-d661-4011-a89a-7b3db33b3cd3.png)

Press the `Confirm`button to save the configuration of orientation menu.

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "mega-menu",
  "private": true,
  "license": "MIT",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
    "lint:locales": "intl-equalizer",
    "test": "cd ./react && yarn test"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged && intl-equalizer && intl-equalizer --fix"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ]
  },
  "intl-equalizer": {
    "referenceLocale": "en",
    "localeDirectory": "messages"
  },
  "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": {
    "@types/react": "^18.0.17"
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "mega-menu",
  "vendor": "vtex",
  "version": "2.10.1",
  "title": "Mega Menu",
  "description": "Create, personalize and manage the category tree. It's can be used in the shop as main menu",
  "mustUpdateAt": "2022-08-28",
  "scripts": {
    "postreleasy": "vtex publish"
  },
  "builders": {
    "docs": "0.x",
    "messages": "1.x",
    "store": "0.x",
    "admin": "0.x",
    "react": "3.x",
    "graphql": "1.x",
    "node": "6.x"
  },
  "dependencies": {
    "vtex.styleguide": "9.x",
    "vtex.css-handles": "1.x",
    "vtex.store-icons": "0.x",
    "vtex.device-detector": "0.x",
    "vtex.native-types": "0.x",
    "vtex.store-drawer": "0.x"
  },
  "billingOptions": {
    "type": "free",
    "support": {
      "url": "https://support.vtex.com/hc/requests"
    },
    "availableCountries": [
      "*"
    ]
  },
  "policies": [
    {
      "name": "graphql-query"
    },
    {
      "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 google-customer-reviews/manifest.json from the google-customer-reviews VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "google-customer-reviews",
  "vendor": "vtex",
  "version": "1.1.1",
  "title": "Google Customer Reviews",
  "description": "This application allows Google to collect and post comments from customers who have made a purchase on your website.",
  "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",
    "vtex.css-handles": "1.x"
  },
  "settingsSchema": {
    "title": "Google Customer Reviews",
    "type": "object",
    "properties": {
      "merchantId": {
        "title": "Merchant ID",
        "type": "string"
      },
      "passGtin": {
        "title": "Pass GTINs",
        "type": "boolean",
        "default": true
      },
      "optInStyle": {
        "title": "Opt-in style",
        "description": "Specifies how the opt-in module's dialog box is displayed",
        "type": "string",
        "default": "CENTER_DIALOG",
        "enum": [
          "CENTER_DIALOG",
          "BOTTOM_RIGHT_DIALOG",
          "BOTTOM_LEFT_DIALOG",
          "TOP_RIGHT_DIALOG",
          "TOP_LEFT_DIALOG",
          "BOTTOM_TRAY"
        ],
        "enumNames": [
          "Center",
          "Bottom right",
          "Bottom left",
          "Top right",
          "Top left",
          "Bottom"
        ]
      },
      "showBadge": {
        "title": "Show badge",
        "type": "boolean",
        "default": true
      },
      "badgePosition": {
        "title": "Badge position",
        "description": "Renders the badge in one of the following locations",
        "type": "string",
        "default": "BOTTOM_RIGHT",
        "enum": [
          "BOTTOM_RIGHT",
          "BOTTOM_LEFT",
          "INLINE"
        ],
        "enumNames": [
          "Float in the bottom right",
          "Float in the bottom left",
          "Block position"
        ]
      }
    }
  },
  "$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 order-payment/package.json from the order-payment VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "order-payment",
  "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": {
    "@apollo/react-testing": "3",
    "@types/node": "^12.12.21",
    "@vtex/checkout-types": "^0.1.2",
    "@vtex/prettier-config": "^0.1.3",
    "@vtex/test-tools": "^3.4.3",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.0.3",
    "eslint-config-vtex-react": "^5.1.0",
    "husky": "^4.2.0",
    "lint-staged": "^10.0.2",
    "prettier": "^1.19.1",
    "react-intl": "3",
    "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 order-payment/manifest.json from the order-payment VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "order-payment",
  "version": "0.9.0",
  "title": "Order Payment",
  "description": "Order Payment component",
  "defaultLocale": "pt-BR",
  "builders": {
    "store": "0.x",
    "react": "3.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2019-04-02",
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {
    "vtex.checkout-resources": "0.x",
    "vtex.checkout-graphql": "0.x",
    "vtex.order-manager": "0.x"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "store-header",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,js,json}\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.json": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@vtex/prettier-config": "^0.3.6",
    "eslint": "^7.15.0",
    "eslint-config-vtex": "^12.9.1",
    "eslint-config-vtex-react": "^6.9.1",
    "husky": "^4.3.5",
    "lint-staged": "^10.5.3",
    "prettier": "^2.2.1",
    "react": "^17.0.1",
    "typescript": "^3.7.5"
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "store-header",
  "version": "2.29.2",
  "title": "VTEX Store Header",
  "defaultLocale": "pt-BR",
  "description": "The VTEX Store Header component",
  "builders": {
    "react": "3.x",
    "store": "0.x",
    "messages": "1.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2019-04-02",
  "categories": [],
  "registries": [
    "smartcheckout"
  ],
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {
    "vtex.styleguide": "9.x",
    "vtex.telemarketing": "2.x",
    "vtex.minicart": "2.x",
    "vtex.login": "2.x",
    "vtex.menu": "2.x",
    "vtex.category-menu": "2.x",
    "vtex.store-components": "3.x",
    "vtex.store-icons": "0.x",
    "vtex.rich-text": "0.x",
    "vtex.store-drawer": "0.x",
    "vtex.locale-switcher": "0.x",
    "vtex.device-detector": "0.x",
    "vtex.css-handles": "1.x",
    "vtex.sandbox": "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 spreadsheet-event-broadcaster/dangerfile.js from the spreadsheet-event-broadcaster 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 spreadsheet-event-broadcaster/package.json from the spreadsheet-event-broadcaster VTEX app.

[Assistant]
Here's the implementation:

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

```


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

[User] Show me the implementation of spreadsheet-event-broadcaster/manifest.json from the spreadsheet-event-broadcaster VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "spreadsheet-event-broadcaster",
  "vendor": "vtex",
  "version": "0.2.3",
  "title": "Spreadsheet Event Broadcaster",
  "description": "This service reads a spreadsheet from a file (.csv, .xls, .xlsx) and broadcasts an event for each row in the sheet.",
  "mustUpdateAt": "2018-01-04",
  "categories": [],
  "dependencies": {},
  "builders": {
    "node": "6.x",
    "masterdata": "1.x",
    "docs": "0.x"
  },
  "scripts": {
    "prereleasy": "bash lint.sh"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "ADMIN_DS"
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "api.vtex.com",
        "path": "/api/dataentities/*"
      }
    },
    {
      "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 tab-layout/manifest.json from the tab-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "tab-layout",
  "version": "0.4.6",
  "title": "Tab Layout",
  "description": "",
  "defaultLocale": "en-US",
  "builders": {
    "docs": "0.x",
    "messages": "1.x",
    "store": "0.x",
    "react": "3.x"
  },
  "mustUpdateAt": "2019-04-02",
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {
    "vtex.styleguide": "9.x",
    "vtex.css-handles": "0.x",
    "vtex.native-types": "0.x"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "shopback",
  "version": "0.0.2",
  "title": "Shopback",
  "description": "Shopback pixel app",
  "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": "Shopback",
    "type": "object",
    "properties": {
      "shopbackId": {
        "title": "Shopback Id",
        "description": "Enter your Shopback Id",
        "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 paginated-table/manifest.json from the paginated-table VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "paginated-table",
  "vendor": "vtex",
  "version": "0.14.0",
  "title": "Paginated Table",
  "description": "Paginated table based on styleguide's table",
  "scripts": {
    "prereleasy": "bash pre.sh"
  },
  "builders": {
    "react": "3.x",
    "messages": "1.x",
    "docs": "0.x"
  },
  "dependencies": {
    "vtex.styleguide": "9.x"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "version": "0.0.0",
  "name": "store-media",
  "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,graphql,gql}": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@vtex/intl-equalizer": "^2.5.0",
    "@vtex/prettier-config": "^0.3.5",
    "eslint": "^7.14.0",
    "eslint-config-vtex": "^12.8.11",
    "eslint-config-vtex-react": "^6.8.3",
    "husky": "^4.3.0",
    "lint-staged": "^10.5.1",
    "prettier": "^2.2.0",
    "typescript": "^3.9.6"
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "store-media",
  "version": "0.3.0",
  "title": "Media",
  "description": "Store component to handle media (image and video)",
  "builders": {
    "react": "3.x",
    "messages": "1.x",
    "docs": "0.x",
    "store": "0.x"
  },
  "dependencies": {
    "vtex.store-image": "0.x",
    "vtex.store-video": "1.x",
    "vtex.css-handles": "1.x",
    "vtex.device-detector": "0.x",
    "vtex.list-context": "0.x"
  },
  "registries": [
    "smartcheckout"
  ],
  "policies": [],
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "external-seller-example",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\""
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@types/node": "^12.12.21",
    "@vtex/prettier-config": "^0.3.1",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.2.1",
    "lint-staged": "^10.0.2",
    "typescript": "^3.7.5"
  },
  "dependencies": {
    "prettier": "^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 external-seller-example/manifest.json from the external-seller-example VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "external-seller-example",
  "vendor": "vtex",
  "version": "0.1.1",
  "title": "External Seller Example",
  "description": "Reference app for External Seller integration",
  "mustUpdateAt": "2018-01-04",
  "categories": [],
  "dependencies": {},
  "builders": {
    "node": "6.x",
    "docs": "0.x",
    "graphql": "1.x"
  },
  "scripts": {
    "prereleasy": "bash lint.sh"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/catalog/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/catalog_system/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/oms/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "api.vtex.com",
        "path": "/*"
      }
    },
    {
      "name": "ShippingAction"
    },
    {
      "name": "suggestions"
    },
    {
      "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 releases/manifest.json from the releases VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "releases",
  "vendor": "vtex",
  "version": "1.0.4",
  "title": "Releases",
  "description": "Notification central for apps release notes",
  "mustUpdateAt": "2019-08-02",
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {
    "vtex.releases-graphql": "0.x",
    "vtex.styleguide": "9.x"
  },
  "builders": {
    "pages": "1.x",
    "react": "3.x",
    "messages": "1.x",
    "docs": "0.x"
  }
}

```


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

[User] Show me the implementation of google-geolocation-resolver/package.json from the google-geolocation-resolver VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "google-geolocation-resolver",
  "version": "0.0.1",
  "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"
    ]
  },
  "devDependencies": {
    "@types/node": "^14.6.2",
    "@vtex/prettier-config": "^0.3.1",
    "@vtex/tsconfig": "^0.5.0",
    "eslint": "^7.8.1",
    "eslint-config-vtex": "^12.8.6",
    "husky": "^4.2.5",
    "lint-staged": "^10.2.13",
    "prettier": "^2.1.1",
    "typescript": "^4.0.2"
  }
}

```


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

[User] Show me the implementation of google-geolocation-resolver/manifest.json from the google-geolocation-resolver VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "google-geolocation-resolver",
  "version": "0.4.0",
  "title": "Google Geolocation Resolver",
  "description": "Implements the Geolocation GraphQL interface with the Google Maps API",
  "credentialType": "absolute",
  "builders": {
    "node": "6.x",
    "docs": "0.x"
  },
  "settingsSchema": {
    "title": "Google Geolocation Resolver",
    "description": "Implements the Geolocation GraphQL interface with the Google Maps API",
    "type": "object",
    "properties": {
      "apiKey": {
        "title": "API Key",
        "description": "API key used to access Google Maps API",
        "type": "string"
      }
    }
  },
  "dependencies": {
    "vtex.geolocation-graphql-interface": "0.x",
    "vtex.messages": "1.x"
  },
  "policies": [
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    },
    {
      "name": "graphql-query"
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "maps.googleapis.com",
        "path": "/maps/api/*"
      }
    }
  ],
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of is-api-middleware-resolver/policies.json from the is-api-middleware-resolver 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.is-api-middleware-resolver:{{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 is-api-middleware-resolver/package.json from the is-api-middleware-resolver VTEX app.

[Assistant]
Here's the implementation:

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


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

[User] Show me the implementation of is-api-middleware-resolver/manifest.json from the is-api-middleware-resolver VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "is-api-middleware-resolver",
  "version": "0.0.1",
  "title": "Intelligent Search API middleware resolver",
  "description": "Implementation of the GraphQL schema for the intelligent search middleware.",
  "builders": {
    "docs": "0.x",
    "node": "6.x"
  },
  "dependencies": {
    "vtex.is-api-middleware-graphql": "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 quickorder/package.json from the quickorder VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "quickorder",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,js,json}\"",
    "test": "cd ./node && yarn test",
    "lint:locales": "intl-equalizer",
    "locales:fix": "intl-equalizer --fix",
    "verify": "yarn lint && yarn lint:locales && yarn test"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged && yarn lint:locales && yarn locales:fix"
    }
  },
  "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/intl-equalizer": "^2.5.0",
    "@vtex/prettier-config": "0.1.4",
    "eslint": "7.12.1",
    "eslint-config-vtex": "^14.1.1",
    "eslint-config-vtex-react": "^6.8.3",
    "husky": "4.2.3",
    "lint-staged": "10.1.1",
    "prettier": "2.0.2",
    "jest": "^27.3.1",
    "typescript": "3.8.3"
  },
  "version": "0.5.7",
  "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 quickorder/manifest.json from the quickorder VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "quickorder",
  "version": "3.16.3",
  "title": "Quickorder",
  "description": "Allow users to add multiple products to the cart at once",
  "defaultLocale": "en-US",
  "builders": {
    "messages": "1.x",
    "store": "0.x",
    "react": "3.x",
    "graphql": "1.x",
    "node": "6.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2019-04-02",
  "scripts": {
    "postreleasy": "bash lint.sh && vtex publish --verbose"
  },
  "credentialType": "absolute",
  "dependencies": {
    "vtex.flex-layout": "0.x",
    "vtex.rich-text": "0.x",
    "vtex.checkout": "0.x",
    "vtex.store": "2.x",
    "vtex.styleguide": "9.x",
    "vtex.store-graphql": "2.x",
    "vtex.search-graphql": "0.x",
    "vtex.checkout-graphql": "0.x",
    "vtex.apps-graphql": "2.x",
    "vtex.checkout-resources": "0.x",
    "vtex.order-manager": "0.x",
    "vtex.order-items": "0.x",
    "vtex.pixel-manager": "1.x",
    "vtex.store-resources": "0.x",
    "vtex.css-handles": "0.x",
    "vtex.store-icons": "0.x",
    "vtex.render-runtime": "8.x"
  },
  "policies": [
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    },
    {
      "name": "graphql-query"
    },
    {
      "name": "AcessaTodosCarrinhos"
    },
    {
      "name": "view-seller"
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/seller-register/pvt/sellers"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/catalog_system/pvt/sku/stockkeepingunitbyid/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/checkout/pub/orderForm/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/catalog_system/pub/sku/stockkeepingunitidsbyrefids"
      }
    }
  ],
  "settingsSchema": {
    "title": "Quickorder settings",
    "type": "object",
    "access": "public",
    "properties": {
      "checkoutUrl": {
        "title": "URL",
        "type": "string",
        "description": "Checkout redirect href",
        "default": "/checkout#/cart"
      }
    }
  },
  "billingOptions": {
    "termsURL": "https://compliance.vtex.com/gdpr/policies/vtex-privacy-policy",
    "support": {
      "url": "https://support.vtex.com/hc/requests"
    },
    "free": true,
    "type": "free",
    "availableCountries": [
      "*"
    ]
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of skip-link/package.json from the skip-link 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}\"",
    "lint:locales": "intl-equalizer",
    "test": "cd ./react && yarn test"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ],
    "*.json": [
      "prettier --write"
    ],
    "messages/*.json": [
      "yarn lint:locales"
    ]
  },
  "devDependencies": {
    "@vtex/intl-equalizer": "^2.5.0",
    "@vtex/prettier-config": "^0.3.5",
    "eslint": "^7.14.0",
    "eslint-config-vtex": "^12.8.11",
    "eslint-config-vtex-react": "^6.8.3",
    "husky": "^4.3.0",
    "lint-staged": "^10.5.1",
    "prettier": "^2.2.0",
    "typescript": "^3.9.6"
  },
  "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 skip-link/manifest.json from the skip-link VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "skip-link",
  "version": "0.0.4",
  "title": "Skip Link App",
  "description": "Implements skip link element",
  "builders": {
    "react": "3.x",
    "messages": "1.x",
    "docs": "0.x",
    "store": "0.x"
  },
  "dependencies": {
    "vtex.css-handles": "1.x"
  },
  "registries": [
    "smartcheckout"
  ],
  "policies": [],
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of search-resolver/policies.json from the search-resolver 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.search-resolver:{{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 search-resolver/dangerfile.js from the search-resolver 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 search-resolver/package.json from the search-resolver VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "search-resolver",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "cd ./node && yarn lint",
    "format": "prettier --write \"**/*.{ts,js,json}\"",
    "test": "cd ./node && yarn test",
    "verify": "yarn lint && yarn test"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "yarn verify"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ],
    "*.json": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@types/node": "^20.0.0",
    "@vtex/danger": "^0.2.7",
    "@vtex/prettier-config": "^0.3.6",
    "eslint": "^7.16.0",
    "eslint-config-vtex": "^15.1.0",
    "husky": "^4.3.6",
    "lint-staged": "^10.5.3",
    "prettier": "^2.2.1",
    "typescript": "5.1.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 search-resolver/manifest.json from the search-resolver VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "search-resolver",
  "version": "1.91.0",
  "title": "GraphQL resolver for the VTEX store APIs",
  "description": "GraphQL resolvers for the VTEX API for the catalog and orders.",
  "credentialType": "absolute",
  "builders": {
    "node": "7.x",
    "docs": "0.x"
  },
  "dependencies": {
    "vtex.messages": "1.x",
    "vtex.catalog-api-proxy": "0.x",
    "vtex.search-graphql": "0.x",
    "vtex.rewriter": "1.x",
    "vtex.sae-analytics": "2.x",
    "vtex.intelligent-search-api": "0.x"
  },
  "settingsSchema": {
    "title": "Intelligent Search Resolver",
    "type": "object",
    "properties": {
      "slugifyLinks": {
        "title": "Set to slugify links. Uses default catalog slug instead",
        "type": "boolean",
        "default": false
      },
      "shouldUseNewPDPEndpoint": {
        "title": "Feature flag to use the new PDP endpoint",
        "type": "boolean",
        "default": false
      },
      "shouldUseNewPLPEndpoint": {
        "title": "Feature flag to use the new PLP endpoint",
        "type": "boolean",
        "default": false
      }
    }
  },
  "policies": [
    {
      "name": "vtex.messages:translate-messages"
    },
    {
      "name": "vtex.catalog-api-proxy:catalog-proxy"
    },
    {
      "name": "vtex.catalog-api-proxy:authenticated-catalog-proxy"
    },
    {
      "name": "vtex.rewriter:resolve-graphql"
    },
    {
      "name": "vbase-read-write"
    },
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "vtex.intelligent-search-api:intelligent-search"
    },
    {
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/segments/*"
      },
      "name": "outbound-access"
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "search.biggylabs.com.br",
        "path": "/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/intelligent-search"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercebeta.com.br",
        "path": "/api/intelligent-search"
      }
    },
    {
      "name": "vtex.messages:graphql-translate-messages"
    }
  ],
  "$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 trusted/README.md from the trusted VTEX app.

[Assistant]
Here's the implementation:

```markdown
## trusted

This app and all affiliated services are provided “as is”, without warranty of any kind, either express or implied. Neither the publisher nor its partners, affiliates, employees, or contractors guarantee that this app will meet your requirements, provide uninterrupted use, or operate without delay or without error. Neither the publisher nor its partners, affiliates, employees, or contractors assume any responsibility for any errors and malfunctions within the app and will not provide support or maintenance of any kind.

All provisions and warranties of any kind, express or implied, including but not limited to any guarantees of performance, process integrity, or particular functionalities, are hereby disclaimed and excluded unless otherwise prohibited or restricted by applicable law.

_Developed under EE FPA._
```


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

[Assistant]
Here's the implementation:

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

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "trusted-pixel",
  "vendor": "vtexeurope",
  "version": "0.1.0",
  "title": "Trusted",
  "description": "",
  "builders": {
    "react": "3.x",
    "store": "0.x",
    "pixel": "0.x",
    "docs": "0.x"
  },
  "dependencies": {
    "vtex.pixel-interfaces": "1.x"
  },
  "settingsSchema": {
    "title": "Trusted Settings",
    "type": "object",
    "properties": {
      "appKey": {
        "title": "AppKey",
        "description": "Trusted's appKey",
        "type": "string"
      },
      "days": {
        "title": "Days",
        "description": "The days after you should receive the email",
        "type": "string"
      },
      "defaultAddressState": {
        "title": "Default Address State",
        "description": "If an order is to be picked from a store point, it's county state will be this value",
        "type": "string"
      }
    }
  },
  "billingOptions": {
    "support": {
      "url": "https://help-tickets.vtex.com/en/support?app=vtex.trusted-pixel"
    },
    "type": "free",
    "availableCountries": [
      "*"
    ]
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "jivochat",
  "version": "1.0.4",
  "title": "JivoChat",
  "description": "JivoChat is a free communication app for chatting and monitoring visitors via online chat, Facebook messenger, phone and real-time email.",
  "builders": {
    "pixel": "0.x",
    "docs": "0.x"
  },
  "billingOptions": {
    "termsURL": "https://compliance.vtex.com/gdpr/policies/vtex-privacy-policy",
    "support": {
      "url": "https://support.vtex.com/hc/requests"
    },
    "free": true,
    "type": "free",
    "availableCountries": [
      "*"
    ]
  },
  "dependencies": {},
  "settingsSchema": {
    "title": "JivoChat",
    "type": "object",
    "properties": {
      "widgetId": {
        "title": "Widget ID",
        "description": "Enter the Widget ID for your account in JivoChat",
        "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 ebit/package.json from the ebit 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 .",
    "lint:locales": "intl-equalizer",
    "format": "prettier --write \"**/*.{ts,js,json}\"",
    "test": "cd ./react && yarn test"
  },
  "intl-equalizer": {
    "referenceLocale": "en",
    "localeDirectory": "messages"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged && intl-equalizer && intl-equalizer --fix",
      "pre-push": "yarn test"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.json": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@vtex/intl-equalizer": "^2.4.2",
    "@vtex/prettier-config": "^0.1.4",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.3.2",
    "eslint-config-vtex-react": "^6.3.2",
    "husky": "^4.2.3",
    "lint-staged": "^10.1.1",
    "prettier": "^2.0.2",
    "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 ebit/manifest.json from the ebit VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "CHANGE_ME",
  "name": "CHANGE_ME",
  "version": "0.0.0",
  "title": "CHANGE_ME",
  "description": "CHANGE_ME",
  "builders": {
    "react": "3.x",
    "messages": "1.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 KI-442772/README.md from the KI-442772 VTEX app.

[Assistant]
Here's the implementation:

```markdown
# [KI-3442772] Invalid fields: Card security code. SecurityCodeLength: 0 SecurityCodeIsNumeric: true

This script solves the KI https://vtexhelp.zendesk.com/agent/tickets/442772.

You need to add the script to the checkout at the `checkout6-custom.js`.

## Contributors ✨

Thanks goes to these wonderful people:

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://github.com/germanBonacchi"><img src="https://avatars.githubusercontent.com/u/55905671?v=4" width="100px;" alt=""/><br /><sub><b>Germán Bonacchi</b></sub></a><br /><a href="https://github.com/vtex-apps/KI-442772/commits?author=germanBonacchi" title="Code">💻</a></td>
    <td align="center"><a href="https://github.com/ximenacharrasreartes"><img src="https://avatars.githubusercontent.com/u/75796284?v=4" width="100px;" alt=""/><br /><sub><b>Ximena Charras Reartes</b></sub></a><br /><a href="https://github.com/vtex-apps/KI-442772/commits?author=ximenacharrasreartes" title="Code">💻</a></td>
    </tr>
</table>

```


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

[User] Show me the implementation of KI-442772/KI-442772.js from the KI-442772 VTEX app.

[Assistant]
Here's the implementation:

```javascript
$(document).ready(function () {
  let listenerCreated = false;

  const observerPaymentsGroup = new MutationObserver((mutations, obsP) => {
    const paymentGroup = document.querySelector(".payment-group");
    if (document.contains(paymentGroup)) {
      if ($(".payment-group").is(":visible")) {
        //console.log("es visible");
        if (!listenerCreated) {
          listenerCreated = true;
          const actualActive = document.querySelector(
            ".payment-group-item.active"
          );
          createListenerPayments(actualActive.id, listenerCreated);
        }
      } else {
        //console.log("no es visible");
        listenerCreated = false;
      }
    }
  });

  observerPaymentsGroup.observe(document, {
    childList: true,
    subtree: true,
  });
});

function clearData() {
  console.log("clearData");
  const iframePlaceholder = document.querySelector(
    "#iframe-placeholder-creditCardPaymentGroup"
  );
  const iframe = iframePlaceholder.querySelector("iframe");
  iframe.src = iframe.src;
}

function createListenerPayments(actualActiveId, listenerFlag) {
  if (listenerFlag) {
    let id = actualActiveId;
    document
      .querySelector(".payment-group")
      .addEventListener("click", (event) => {
        const newActualActive = document.querySelector(
          ".payment-group-item.active"
        );
        const newActualActiveId = newActualActive.id;
        //console.log("actualActiveId", id);
        //console.log("newActualActiveId", newActualActiveId);

        if (newActualActiveId !== id) {
          console.log("SI cambio el medio de pago");
          id = newActualActiveId;
          clearData();
        } else {
          console.log("NO cambio el medio de pago");
        }
      });
  }
}

```


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

[Assistant]
Here's the implementation:

```markdown
# [KI-293784] Delivery method selector does not appear in some scenarios
This script solves the KI https://vtexhelp.zendesk.com/agent/tickets/293784

You need to add the script to the checkout at the `checkout6-custom.js`.

## Contributors ✨

Thanks goes to these wonderful people:

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://github.com/germanBonacchi"><img src="https://avatars.githubusercontent.com/u/55905671?v=4" width="100px;" alt=""/><br /><sub><b>Germán Bonacchi</b></sub></a><br /><a href="https://github.com/vtex-apps/vtex-logger-react/commits?author=germanBonacchi" title="Code">💻</a></td>
</tr>
</table>

```


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

[User] Show me the implementation of KI-293784/KI-293784.js from the KI-293784 VTEX app.

[Assistant]
Here's the implementation:

```javascript
$(document).ready(function () {
  function setLoadingStyles() {
    const style = document.createElement("style");
    style.innerHTML = `
  #containerSpinner {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #spinner {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #09f;

    animation: spin 1s ease infinite;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
  `;
    document.head.appendChild(style);
  }

  function addLoadingApagar() {
    const scheduledDeliveryList = document.querySelector(
      ".vtex-omnishipping-1-x-scheduledDeliveryList"
    );
    scheduledDeliveryList.classList.add("vtex-omnishipping-1-x-hide");
    const spinner = document.createElement("div");
    spinner.setAttribute("id", "spinner");
    scheduledDeliveryList.parentElement.append(spinner);
  }

  function removeLoadingApagar() {
    const scheduledDeliveryList = document.querySelector(
      ".vtex-omnishipping-1-x-scheduledDeliveryList"
    );
    scheduledDeliveryList.classList.remove("vtex-omnishipping-1-x-hide");
    const spinnerElement = document.querySelectorAll("#spinner");
    spinnerElement.forEach((e) => e.remove());
  }

  function addLoadingPrender() {
    //console.log("addLoadingPrender");
    setTimeout(() => {
      const titles = [
        ...document.querySelectorAll(
          ".vtex-omnishipping-1-x-shippingSectionTitle"
        ),
      ];
      if (titles.length > 3) {
        const titlesToHide = titles.splice(titles.length - 2, titles.length);

        titlesToHide.forEach((title) => {
          title.classList.add("vtex-omnishipping-1-x-hide");
        });
        const glideContainer = document.querySelector(".glide-container");

        if (document.contains(glideContainer)) {
          glideContainer.classList.add("vtex-omnishipping-1-x-hide");
        }

        const deliveryPackagesOptions = document.querySelector(
          "#delivery-packages-options"
        );

        if (document.contains(deliveryPackagesOptions)) {
          deliveryPackagesOptions.classList.add("vtex-omnishipping-1-x-hide");
        }

        const shpAlert = document.querySelector(
          ".shp-alert.vtex-omnishipping-1-x-alert.shp-alert-delivery.shp-alert-schedule-unavailable"
        );
        if (document.contains(shpAlert)) {
          shpAlert.classList.add("vtex-omnishipping-1-x-hide");
        }

        const scheduledDelivery = document.querySelector(
          ".vtex-omnishipping-1-x-scheduledDelivery"
        );

        const containerSpinner = document.createElement("div");
        containerSpinner.setAttribute("id", "containerSpinner");
        const spinner = document.createElement("div");
        spinner.setAttribute("id", "spinner");
        containerSpinner.append(spinner);
        scheduledDelivery.parentElement.append(containerSpinner);
      }
    }, 100);
  }

  function removeLoadingPrender() {
    //console.log("removeLoadingPrender");
    const titles = [
      ...document.querySelectorAll(
        ".vtex-omnishipping-1-x-shippingSectionTitle"
      ),
    ];

    titles.forEach((title) => {
      if (title.classList.contains("vtex-omnishipping-1-x-hide")) {
        title.classList.remove("vtex-omnishipping-1-x-hide");
      }
    });
    const glideContainer = document.querySelector(".glide-container");

    if (
      document.contains(glideContainer) &&
      glideContainer.classList.contains("vtex-omnishipping-1-x-hide")
    ) {
      glideContainer.classList.add("vtex-omnishipping-1-x-hide");
    }

    const deliveryPackagesOptions = document.querySelector(
      "#delivery-packages-options"
    );

    if (
      document.contains(deliveryPackagesOptions) &&
      deliveryPackagesOptions.classList.contains("vtex-omnishipping-1-x-hide")
    ) {
      deliveryPackagesOptions.classList.add("vtex-omnishipping-1-x-hide");
    }

    const shpAlert = document.querySelector(
      ".shp-alert.vtex-omnishipping-1-x-alert.shp-alert-delivery.shp-alert-schedule-unavailable"
    );
    if (
      document.contains(shpAlert) &&
      shpAlert.classList.contains("vtex-omnishipping-1-x-hide")
    ) {
      shpAlert.classList.add("vtex-omnishipping-1-x-hide");
    }

    const spinnerElement = document.querySelectorAll("#spinner");
    spinnerElement.forEach((e) => e.remove());
  }

  function changeDeliveryWindow() {
    //console.log("changeDeliveryWindow()");
    vtexjs.checkout
      .getOrderForm()
      .then((orderForm) => {
        var shippingData = orderForm.shippingData;
        var hasDeliveryWindow = false;
        shippingData.logisticsInfo.forEach((logisticsInfo) => {
          //console.log("logisticsInfo", logisticsInfo);
          const selectedSla = logisticsInfo.selectedSla;
          logisticsInfo.slas.forEach((sla) => {
            //console.log("sla.deliveryWindow ", sla.deliveryWindow );
            if (sla.id === selectedSla) {
              if (sla.deliveryWindow) {
                sla.deliveryWindow = null;
                hasDeliveryWindow = true;
              }
            }
          });
        });

        if (hasDeliveryWindow) {
          //console.log("hasDeliveryWindow");
          addLoadingApagar();
          shippingData.logisticsInfo = shippingData.logisticsInfo.map(
            (logisticsInfo) => {
              return {
                ...logisticsInfo,
                selectedSla: null,
              };
            }
          );

          return vtexjs.checkout.sendAttachment("shippingData", shippingData);
        }
        return null;
      })
      .done(function (orderForm) {
        const schedulerTongle = document.querySelector(
          "#scheduled-delivery-delivery"
        );
        if (
          schedulerTongle.classList.contains(
            "vtex-omnishipping-1-x-scheduleActive"
          )
        ) {
          setTimeout(() => {
            schedulerTongle.click();
            removeLoadingApagar();
          }, 1500);
        } else {
          removeLoadingApagar();
        }
      });
  }

  function addFakeDeliveyWindow() {
    //console.log("addFakeDeliveyWindow()");
    vtexjs.checkout
      .getOrderForm()
      .then((orderForm) => {
        var shippingData = orderForm.shippingData;
        if (shippingData.logisticsInfo.length > 1) {
          shippingData.logisticsInfo.forEach((logisticsInfo) => {
            const selectedSla = logisticsInfo.selectedSla;
            logisticsInfo.slas.forEach((sla) => {
              if (sla.id === selectedSla) {
                if (!sla.deliveryWindow) {
                  const deliveryTest = {
                    courierId: null,
                    courierName: null,
                    dockId: null,
                    kitItemDetails: [],
                    quantity: 0,
                    warehouseId: null,
                  };

                  sla.deliveryWindow = [deliveryTest];
                  hasDeliveryWindow = true;
                }
              }
            });
          });

          return vtexjs.checkout.sendAttachment("shippingData", shippingData);
        }
        return null;
      })
      .done(function () {
        removeLoadingPrender();
      });
  }

  function removeFakeDeliveyWindow() {
    vtexjs.checkout
      .getOrderForm()
      .then((orderForm) => {
        var shippingData = orderForm.shippingData;
        if (shippingData.logisticsInfo.length > 1) {
          shippingData.logisticsInfo.forEach((logisticsInfo) => {
            const selectedSla = logisticsInfo.selectedSla;
            logisticsInfo.slas.forEach((sla) => {
              if (sla.id === selectedSla) {
                sla.deliveryWindow = null;
                hasDeliveryWindow = true;
              }
            });
          });

          return vtexjs.checkout.sendAttachment("shippingData", shippingData);
        }
        return null;
      })
      .done(function () {
        removeLoadingPrender();
      });
  }

  function addSchedulerObserver() {
    const observerScheduler = new MutationObserver((mutations, obsS) => {
      const schedulerTongle = document.querySelector(
        "#scheduled-delivery-delivery"
      );

      if (document.contains(schedulerTongle)) {
        schedulerTongle.addEventListener("mousedown", function () {
          if (
            schedulerTongle.classList.contains(
              "vtex-omnishipping-1-x-scheduleActive"
            )
          ) {
            //console.log("Apagar");
            changeDeliveryWindow();
          } else {
            //console.log("Prender");
            addLoadingPrender();
            addFakeDeliveyWindow();
            removeFakeDeliveyWindow();
          }
        });

        obsS.disconnect();

        return;
      }
    });

    observerScheduler.observe(document, {
      childList: true,
      subtree: true,
    });
  }

  /*
  function addDeliveryObserver() {
    let isActiveObserverScheduler = false;

    const observerDelivery = new MutationObserver((mutations, obsD) => {
      const deliveryOption = document.querySelectorAll(
        "#shipping-option-delivery"
      )[0];
      if (document.contains(deliveryOption)) {
        if (
          deliveryOption.classList.contains(
            "vtex-omnishipping-1-x-deliveryOptionActive"
          )
        ) {
          if (!isActiveObserverScheduler) {
            isActiveObserverScheduler = true;
            addSchedulerObserver();
          }
        } else {
          isActiveObserverScheduler = false;
        }
      } else {
        isActiveObserverScheduler = false;
      }
    });
    observerDelivery.observe(document, {
      childList: true,
      subtree: true,
    });
  }*/

  setLoadingStyles();
  //addDeliveryObserver();
  addSchedulerObserver();
});

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "epica-pixel",
  "vendor": "vtex",
  "version": "0.1.1",
  "title": "Epica Pixel",
  "description": "Epica Pixel",
  "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": "Epica Pixel",
    "type": "object",
    "properties": {
      "epicaId": {
        "title": "Epica Pixel",
        "description": "Enter your Epica app ID",
        "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 Indexer-listener/README.md from the Indexer-listener VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Broadcaster-listener

App in VTEXIO designed to listen to catalog changes from Search indexer.

```


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

[Assistant]
Here's the implementation:

```json
{
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema",
  "name": "indexer-listener",
  "vendor": "vtex",
  "version": "0.0.1",
  "title": "Indexer listener",
  "description": "Reference app for VTEX IO Services",
  "mustUpdateAt": "2018-01-04",
  "categories": [],
  "dependencies": {
    "vtex.catalog-api-proxy": "0.x"
  },
  "builders": {
    "node": "4.x"
  },
  "scripts": {
    "prereleasy": "bash lint.sh"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "outbound-access",
      "attrs": {
        "host": "httpstat.us",
        "path": "*"
      }
    },
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    },
    {
      "name": "vbase-read-write"
    },
    {
      "name": "vtex.catalog-api-proxy:catalog-proxy"
    }
  ],
  "settingsSchema": {
    "title": "VTEX Search Indexer Listener",
    "type": "object",
    "properties": {
      "enabled": {
        "title": "Enable listening to SKU and product modifications from search indexer.",
        "type": "boolean",
        "default": true,
        "description": "Enables listening to the Search Indexer events related to modifications in the catalog."
      }
    }
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "lucky-orange",
  "version": "1.0.1",
  "title": "Lucky Orange",
  "description": "Lucky Orange",
  "builders": {
    "pixel": "0.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2019-10-01",
  "billingOptions": {
    "termsURL": "",
    "support": {
      "url": "https://support.vtex.com/hc/requests"
    },
    "free": true
  },
  "settingsSchema": {
    "title": "Lucky Orange",
    "type": "object",
    "properties": {
      "siteId": {
        "title": "Site ID",
        "description": "Enter your Site ID",
        "type": "string"
      }
    }
  },
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```