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

[User] Show me the implementation of docs-live/README.md from the docs-live VTEX app.

[Assistant]
Here's the implementation:

```markdown
# docs-live
Documentation repository for VTEX's Live Shopping and Personal Shopper applications.

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "service-course",
  "vendor": "vtex",
  "version": "0.3.0",
  "title": "Service Course",
  "description": "Course aproaching VTEX Backend Services",
  "dependencies": {},
  "builders": {
    "docs": "0.x",
    "course": "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 payment-provider-example/package.json from the payment-provider-example VTEX app.

[Assistant]
Here's the implementation:

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


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "payment-provider-example",
  "vendor": "vtex",
  "version": "1.2.0",
  "title": "Payment Provider Example",
  "description": "Reference app for Payment-Provider protocol implementers",
  "builders": {
    "paymentProvider": "1.x",
    "node": "6.x",
    "docs": "0.x"
  },
  "policies": [
    {
      "name": "vbase-read-write"
    },
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "heimdall.vtexpayments.com.br",
        "path": "/api/payment-provider/callback/*"
      }
    }
  ],
  "billingOptions": {
    "type": "free"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "product-specification-badges",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@vtex/prettier-config": "^0.3.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.8.3"
  }
}

```


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

[User] Show me the implementation of product-specification-badges/manifest.json from the product-specification-badges VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "product-specification-badges",
  "version": "0.4.1",
  "title": "Product Specification Badges",
  "description": "Display Product Specification Badges",
  "defaultLocale": "pt-BR",
  "builders": {
    "store": "0.x",
    "react": "3.x",
    "docs": "0.x",
    "messages": "1.x"
  },
  "mustUpdateAt": "2019-04-02",
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {
    "vtex.product-context": "0.x",
    "vtex.css-handles": "0.x"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema",
  "name": "admin-messages",
  "vendor": "vtex",
  "version": "0.8.1",
  "title": "Admin Messages",
  "description": "Translation functionalities inside the Store Admin",
  "mustUpdateAt": "2020-06-25",
  "categories": [],
  "dependencies": {
    "vtex.admin-graphql": "1.x",
    "vtex.styleguide": "9.x",
    "vtex.catalog-graphql": "1.x",
    "vtex.messages": "1.x"
  },
  "builders": {
    "admin": "0.x",
    "graphql": "1.x",
    "messages": "1.x",
    "node": "4.x",
    "react": "3.x",
    "docs": "0.x"
  },
  "scripts": {
    "prereleasy": "bash lint.sh"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    },
    {
      "name": "vtex.catalog-graphql:resolve-graphql"
    },
    {
      "name": "vtex.messages:graphql-save-translation-messages"
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "{{account}}.vtexcommercestable.com.br",
        "path": "/api/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/*"
      }
    }
  ]
}

```


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

[User] Show me the implementation of address-locator/README.md from the address-locator VTEX app.

[Assistant]
Here's the implementation:

```markdown
# address-locator
VTEX address locator app to delivery store

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "version": "2.3.0",
  "scripts": {
    "lint:locales": "intl-equalizer"
  },
  "devDependencies": {
    "@vtex/intl-equalizer": "^2.2.1"
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "address-locator",
  "version": "2.4.1",
  "builders": {
    "store": "0.x",
    "messages": "1.x",
    "react": "3.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2019-04-02",
  "dependencies": {
    "vtex.styleguide": "9.x",
    "vtex.store-resources": "0.x",
    "vtex.store-graphql": "2.x",
    "vtex.store-components": "3.x",
    "vtex.profile-form": "3.x",
    "vtex.address-form": "4.x",
    "vtex.pickup-points-selector": "0.x",
    "vtex.store": "2.x",
    "vtex.store-header": "2.x",
    "vtex.modal": "0.x",
    "vtex.store-icons": "0.x"
  },
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "expertsender",
  "vendor": "vtex",
  "version": "1.0.1",
  "title": "ExpertSender",
  "description": "",
  "billingOptions": {
    "termsURL": "",
    "support": {
      "url": "https://support.vtex.com/hc/requests"
    },
    "free": true
  },
  "builders": {
    "pixel": "0.x",
    "docs": "0.x"
  },
  "dependencies": {
    "vtex.pixel-interfaces": "1.x"
  },
  "settingsSchema": {
    "title": "ExpertSender",
    "type": "object",
    "properties": {
      "clickDomain": {
        "title": "Click Domain",
        "type": "string"
      },
      "aid": {
        "title": "aid",
        "type": "string"
      },
      "wid": {
        "title": "wid",
        "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 search-graphql/policies.json from the search-graphql 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-graphql:{{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-graphql/package.json from the search-graphql VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "search-graphql",
  "version": "1.0.0",
  "main": "index.js",
  "repository": "git@github.com:vtex-apps/search-graphql.git",
  "license": "MIT",
  "devDependencies": {
    "@graphql-tools/load-files": "^6.5.3",
    "@graphql-tools/merge": "^8.2.10",
    "graphql": "15",
    "graphql-markdown": "^6.0.0"
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "search-graphql",
  "version": "0.69.4",
  "title": "GraphQL API for the VTEX store APIs",
  "description": "GraphQL schema and resolvers for the VTEX API for the catalog and orders.",
  "credentialType": "absolute",
  "builders": {
    "graphql": "1.x",
    "docs": "0.x"
  },
  "dependencies": {
    "vtex.messages": "1.x",
    "vtex.catalog-api-proxy": "0.x"
  },
  "policies": [
    {
      "name": "vtex.messages:translate-messages"
    },
    {
      "name": "vtex.catalog-api-proxy:catalog-proxy"
    },
    {
      "name": "vbase-read-write"
    },
    {
      "name": "colossus-fire-event"
    }
  ],
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "salesforce-chat",
  "version": "2.0.1",
  "title": "Salesforce Chat",
  "description": "Salesforce Chat",
  "builders": {
    "pixel": "0.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2019-10-01",
  "billingOptions": {
    "termsURL": "",
    "support": {
      "url": "https://support.vtex.com/hc/requests"
    },
    "free": true
  },
  "dependencies": {
    "vtex.pixel-interfaces": "1.x"
  },
  "settingsSchema": {
    "title": "Salesforce chat",
    "description": "Enter the Salesforce chat configuration",
    "type": "object",
    "properties": {
      "extraPrechatFormDetails": {
        "title": "extraPrechatFormDetails",
        "type": "array",
        "items": {
          "type": "object",
          "properties": {
            "label": {
              "title": "Label",
              "type": "string"
            },
            "value": {
              "title": "Value",
              "type": "string"
            },
            "displayToAgent": {
              "title": "Display To Agent",
              "type": "boolean"
            },
            "transcriptFields": {
              "type": "array",
              "title": "transcriptFields",
              "items": {
                "type": "string"
              }
            }
          }
        }
      },
      "extraPrechatInfo": {
        "title": "extraPrechatInfo",
        "type": "array",
        "items": {
          "type": "object",
          "properties": {
            "entityName": {
              "type": "string",
              "title": "entityName"
            },
            "showOnCreate": {
              "type": "boolean",
              "title": "showOnCreate"
            },
            "saveToTranscript": {
              "type": "string",
              "title": "saveToTranscript"
            },
            "entityFieldMaps": {
              "type": "array",
              "title": "entityFieldMaps",
              "items": {
                "type": "object",
                "properties": {
                  "isExactMatch": {
                    "type": "boolean",
                    "title": "isExactMatch"
                  },
                  "fieldName": {
                    "type": "string",
                    "title": "fieldName"
                  },
                  "doCreate": {
                    "type": "boolean",
                    "title": "doCreate"
                  },
                  "doFind": {
                    "type": "boolean",
                    "title": "doFind"
                  },
                  "label": {
                    "type": "string",
                    "title": "label"
                  }
                }
              }
            }
          }
        }
      },
      "enabledFeatures": {
        "title": "enabledFeatures",
        "type": "array",
        "items": {
          "type": "string"
        }
      },
      "entryFeature": {
        "type": "string",
        "title": "entryFeature"
      },
      "baseLiveAgentContentURL": {
        "type": "string",
        "title": "baseLiveAgentContentUrl"
      },
      "baseLiveAgentURL": {
        "type": "string",
        "title": "baseLiveAgentURL"
      },
      "baseCoreURL": {
        "type": "string",
        "title": "baseCoreURL"
      },
      "communityEndpointURL": {
        "type": "string",
        "title": "communityEndpointURL"
      },
      "organizationId": {
        "type": "string",
        "title": "Organization ID"
      },
      "accountName": {
        "type": "string",
        "title": "Account Name"
      },
      "deploymentId": {
        "type": "string",
        "title": "Deployment ID"
      },
      "buttonId": {
        "type": "string",
        "title": "Button ID"
      },
      "eswLiveAgentDevName": {
        "type": "string",
        "title": "eswLiveAgentDevName"
      },
      "isOfflineSupportEnabled": {
        "type": "boolean",
        "title": "isOfflineSupportEnabled"
      },
      "language": {
        "type": "string",
        "title": "Language"
      },
      "defaultMinimizedText": {
        "type": "string",
        "title": "Default Minimized Text"
      },
      "disabledMinimizedText": {
        "type": "string",
        "title": "Disabled Minimized Text"
      },
      "loadingText": {
        "type": "string",
        "title": "Loading Text"
      }
    }
  },
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of graphql-gateway/README.md from the graphql-gateway VTEX app.

[Assistant]
Here's the implementation:

```markdown
# GraphQL Gateway

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

## Description

The GraphQL Gateway app provides a centralized interface for exposing internal GraphQL applications and their queries to the external world, offering a unified entry point for external users, and streamlining the process of authentication and authorization.

```


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

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

[Assistant]
Here's the implementation:

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

[Assistant]
Here's the implementation:

```json
{
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema",
  "vendor": "vtex",
  "name": "graphql-gateway",
  "version": "1.0.1",
  "title": "GraphQL Gateway for VTEX APIs",
  "description": "A Graph containing all VTEX's commerce APIs",
  "builders": {
    "node": "6.x"
  },
  "dependencies": {
    "vtex.search-resolver": "1.x",
    "vtex.checkout-graphql": "0.x"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "POWER_USER_DS"
    },
    {
      "name": "vbase-read-write"
    },
    {
      "name": "graphql-query"
    },
    {
      "attrs": {
        "host": "*",
        "path": "*"
      },
      "name": "outbound-access"
    }
  ]
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "giftcard",
  "vendor": "vtex",
  "version": "0.1.0",
  "title": "Giftcard",
  "description": "",
  "mustUpdateAt": "2019-08-16",
  "categories": [],
  "registries": ["smartcheckout"],
  "settingsSchema": {},
  "dependencies": {
    "vtex.admin": "1.x",
    "vtex.styleguide": "7.x",
    "vtex.vtex-giftcard-v2": "1.x"
  },
  "credentialType": "relative",
  "builders": {
    "pages": "0.x",
    "react": "2.x",
    "node": "3.x"
  },
  "scripts": {
    "postreleasy": "vtex publish --public"
  },
  "policies": [
    {
      "name": "vtex.vtex-giftcard-v2:admin"
    }
  ]
}

```


[System] You are an expert VTEX IO developer. You specialize 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-form-fields/manifest.json from the instore-form-fields VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "instore-form-fields",
  "version": "1.0.0",
  "title": "Instore Form Addon",
  "description": "Insert new fields in the user registration form",
  "defaultLocale": "pt-BR",
  "builders": {
    "react": "3.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2019-09-24",
  "categories": [],
  "registries": [
    "smartcheckout"
  ],
  "settingsSchema": {},
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  }
}
```


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

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

[Assistant]
Here's the implementation:

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

[Assistant]
Here's the implementation:

```json
{
  "name": "cybersource-ui",
  "vendor": "vtex",
  "version": "0.8.0",
  "title": "Cybersource",
  "description": "Cybersource Payment UI",
  "categories": [],
  "registries": [
    "smartcheckout"
  ],
  "builders": {
    "messages": "1.x",
    "admin": "0.x",
    "react": "3.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2018-09-05",
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {
    "vtex.styleguide": "9.x",
    "vtex.apps-graphql": "3.x",
    "vtex.cybersource": "1.x",
    "vtex.cybersource-payer-auth": "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": [
      "*"
    ]
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "b2b-orders-history",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "cd ./react && yarn lint",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\"",
    "test": "cd ./react && yarn test",
    "locales:lint": "intl-equalizer",
    "locales:fix": "intl-equalizer --fix",
    "verify": "yarn lint && yarn locales:lint && yarn test"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn lint && yarn locales:lint && yarn locales:fix",
      "pre-push": "yarn verify"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@types/node": "^12.7.12",
    "@vtex/intl-equalizer": "^2.4.2",
    "@vtex/prettier-config": "^0.1.3",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.2.1",
    "eslint-config-vtex-react": "^5.0.1",
    "husky": "^4.2.0",
    "lint-staged": "^10.0.2",
    "prettier": "^1.19.1",
    "typescript": "^3.7.5"
  },
  "version": "3.3.20",
  "dependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "b2b-orders-history",
  "version": "2.0.3",
  "title": "B2B Orders History",
  "description": "B2B My orders page",
  "builders": {
    "react": "3.x",
    "store": "0.x",
    "messages": "1.x",
    "docs": "0.x",
    "vtex.storefront-permissions": "3.x"
  },
  "dependencies": {
    "vtex.my-account": "1.x",
    "vtex.styleguide": "9.x",
    "vtex.my-account-commons": "1.x",
    "vtex.address-form": "4.x",
    "vtex.totalizer-translator": "2.x",
    "vtex.css-handles": "0.x",
    "vtex.search-graphql": "0.x",
    "vtex.subscriptions-commons": "1.x"
  },
  "registries": [
    "smartcheckout"
  ],
  "policies": [
    {
      "name": "buyer_organization_view"
    },
    {
      "name": "buyer_organization_edit"
    }
  ],
  "scripts": {
    "postreleasy": "vtex publish -p"
  },
  "$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 wish-list-v2/dangerfile.js from the wish-list-v2 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 wish-list-v2/package.json from the wish-list-v2 VTEX app.

[Assistant]
Here's the implementation:

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

```


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

[User] Show me the implementation of wish-list-v2/manifest.json from the wish-list-v2 VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "my-wishlists",
  "version": "2.3.12",
  "title": "My Wish Lists",
  "description": "Custom app for managing users' wishlists on the My Account Dashboard",
  "builders": {
    "react": "3.x",
    "messages": "1.x",
    "docs": "0.x",
    "store": "0.x",
    "masterdata": "1.x",
    "graphql": "1.x",
    "node": "6.x"
  },
  "dependencies": {
    "vtex.css-handles": "1.x",
    "vtex.product-context": "0.x",
    "vtex.order-manager": "0.x",
    "vtex.render-runtime": "8.x",
    "vtex.store-graphql": "2.x",
    "vtex.my-account": "1.x",
    "vtex.styleguide": "9.x",
    "vtex.my-account-commons": "1.x",
    "vtex.pixel-manager": "1.x",
    "vtex.order-items": "0.x",
    "vtex.store-resources": "0.x",
    "vtex.checkout-resources": "0.x",
    "vtex.store": "2.x",
    "vtex.search-graphql": "0.x",
    "vtex.checkout-graphql": "0.x",
    "vtex.apps-graphql": "3.x",
    "vtex.store-icons": "0.x"
  },
  "peerDependencies": {
    "vtex.quickorder": "3.x"
  },
  "registries": [
    "smartcheckout"
  ],
  "settingsSchema": {
    "title": "Wishlist Columns",
    "type": "object",
    "access": "public",
    "properties": {
      "defaultTitleText": {
        "title": "Title",
        "type": "string",
        "description": "Text to display on share page title",
        "default": "Favorites Lists"
      },
      "imageName": {
        "title": "Image Title",
        "type": "string",
        "description": "image column title",
        "default": "Image"
      },
      "image": {
        "title": "image",
        "type": "boolean",
        "description": "active",
        "default": true
      },
      "imageRowWidth": {
        "title": "Image row width",
        "type": "number",
        "description": "image column title",
        "default": 100
      },
      "skuNameTitle": {
        "title": "skuName column title",
        "type": "string",
        "description": "skuName column title",
        "default": "Name"
      },
      "skuName": {
        "title": "Sku name field",
        "type": "boolean",
        "description": "active",
        "default": true
      },
      "skuNameRowWidthAccount": {
        "title": "Sku Name row width *on account page*",
        "type": "number",
        "description": "Sku Name row width",
        "default": 300
      },
      "skuNameRowWidthShare": {
        "title": "Sku Name row width *on shared page*",
        "type": "number",
        "description": "Sku Name row width",
        "default": 300
      },
      "departmentTitle": {
        "title": "department column title",
        "type": "string",
        "description": "department column title",
        "default": "Department"
      },
      "department": {
        "title": "Department field",
        "type": "boolean",
        "description": "active",
        "default": true
      },
      "departmentRowWidth": {
        "title": "Department row width",
        "type": "number",
        "description": "Department row width",
        "default": 190
      },
      "skuReferenceCodeTitle": {
        "title": "skuReferenceCode Column title",
        "type": "string",
        "description": "skuReferenceCode",
        "default": "Part #"
      },
      "skuReferenceCode": {
        "title": "Sku Reference Code field",
        "type": "boolean",
        "description": "active",
        "default": true
      },
      "skuReferenceCodeRowWidth": {
        "title": "Sku Reference Code row width",
        "type": "number",
        "description": "Sku Reference Code row width",
        "default": 130
      },
      "quantityTitle": {
        "title": "quantity column title",
        "type": "string",
        "description": "quantity",
        "default": "Qty"
      },
      "quantity": {
        "title": "Quantity field",
        "type": "boolean",
        "description": "active",
        "default": true
      },
      "quantityRowWidth": {
        "title": "Quantity row width",
        "type": "number",
        "description": "Quantity row width",
        "default": 130
      },
      "unitValueTitle": {
        "title": "unitValue column title",
        "type": "string",
        "description": "unitValue",
        "default": "Unit Value"
      },
      "unitValue": {
        "title": "Unit Value field",
        "type": "boolean",
        "description": "active",
        "default": true
      },
      "unitValueRowWidth": {
        "title": "Unit Value row width",
        "type": "number",
        "description": "Unit Value row width",
        "default": 145
      },
      "totalValueTitle": {
        "title": "totalValue column title",
        "type": "string",
        "description": "totalValue",
        "default": "Price"
      },
      "totalValue": {
        "title": "Total Value field",
        "type": "boolean",
        "description": "active",
        "default": true
      },
      "totalValueRowWidth": {
        "title": "Total Value row width",
        "type": "number",
        "description": "Total Value row width",
        "default": 120
      },
      "notes": {
        "title": "notes",
        "type": "boolean",
        "description": "notes",
        "default": true
      },
      "addTitle": {
        "title": "add column title",
        "type": "string",
        "description": "add",
        "default": "Add"
      },
      "add": {
        "title": "Add field",
        "type": "boolean",
        "description": "active",
        "default": true
      },
      "addRowWidth": {
        "title": "Add row width",
        "type": "number",
        "description": "Add row width",
        "default": 100
      },
      "removeTitle": {
        "title": "remove column title",
        "type": "string",
        "description": "remove",
        "default": "Remove"
      },
      "remove": {
        "title": "remove",
        "type": "boolean",
        "description": "active",
        "default": true
      }
    }
  },
  "policies": [
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    },
    {
      "name": "graphql-query"
    },
    {
      "name": "ADMIN_DS"
    },
    {
      "name": "POWER_USER_DS"
    },
    {
      "name": "vbase-read-write"
    },
    {
      "name": "update-app-settings"
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "api.vtex.com",
        "path": "/dataentities/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/dataentities/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "{{account}}.vtexcommercestable.com.br",
        "path": "/api/dataentities/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "api.vtex.com",
        "path": "/*"
      }
    }
  ],
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "version": "0.0.2",
  "devDependencies": {
    "@vtex/intl-equalizer": "^2.4.2",
    "husky": "^2.4.1"
  },
  "scripts": {
    "lint": "cd ./react && yarn lint",
    "test": "cd ./react && yarn test",
    "lint:locales": "intl-equalizer",
    "locales:fix": "intl-equalizer --fix",
    "verify": "yarn lint && yarn lint:locales && yarn test"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn lint && yarn lint:locales && yarn locales:fix",
      "pre-push": "yarn verify"
    }
  },
  "intl-equalizer": {
    "referenceLocale": "en",
    "localeDirectory": "messages"
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "organizations",
  "version": "1.10.0",
  "title": "VTEX Organizations App",
  "description": "",
  "builders": {
    "react": "3.x",
    "messages": "1.x",
    "docs": "0.x",
    "store": "0.x"
  },
  "dependencies": {
    "vtex.store": "2.x",
    "vtex.my-account": "1.x",
    "vtex.css-handles": "0.x",
    "vtex.styleguide": "9.x",
    "vtex.organizations-graphql": "1.x",
    "vtex.store-graphql": "2.x",
    "vtex.my-account-commons": "1.x"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

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

[Assistant]
Here's the implementation:

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

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "product-comparison",
  "version": "0.20.0",
  "title": "Product Comparison",
  "description": "Product Comparison",
  "defaultLocale": "pt-BR",
  "builders": {
    "styles": "2.x",
    "messages": "1.x",
    "store": "0.x",
    "react": "3.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2019-04-02",
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {
    "vtex.styleguide": "9.x",
    "vtex.css-handles": "0.x",
    "vtex.store-graphql": "2.x",
    "vtex.product-summary-context": "0.x",
    "vtex.product-summary": "2.x",
    "vtex.store-resources": "0.x",
    "vtex.store-icons": "0.x",
    "vtex.slider-layout": "0.x",
    "vtex.list-context": "0.x",
    "vtex.product-list-context": "0.x",
    "vtex.flex-layout": "0.x",
    "vtex.pixel-manager": "1.x",
    "vtex.apps-graphql": "3.x",
    "vtex.product-context": "0.x"
  },
  "settingsSchema": {
    "access": "public",
    "title": "Product comparison",
    "type": "object",
    "properties": {
      "maxNumberOfItemsToCompare": {
        "title": "Comparison bucket upper limit",
        "description": "Maximum number of items to compare. Default value is 10",
        "type": "number"
      }
    }
  },
  "$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 ffm-segment-prices-node-template/package.json from the ffm-segment-prices-node-template VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "external-prices-app",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@types/node": "^12.12.21",
    "@vtex/prettier-config": "^0.3.6",
    "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 ffm-segment-prices-node-template/manifest.json from the ffm-segment-prices-node-template VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "external-prices-node",
  "vendor": "vtex",
  "version": "0.3.1",
  "title": "External Prices Node App",
  "description": "A reference app for consulting external prices.",
  "categories": [],
  "dependencies": {},
  "builders": {
    "node": "6.x",
    "docs": "0.x"
  },
  "scripts": {
    "prereleasy": "bash lint.sh"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "api.vtex.com",
        "path": "/{{account}}/pricing/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/profile-system/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "kubernetes.default.svc.cluster.local",
        "path": "*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "YOUR_EXTENAL_SERVICE_URL",
        "path": "*"
      }
    },
    {
      "name": "read_prices"
    },
    {
      "name": "POWER_USER_DS"
    },
    {
      "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 KI-360097/README.md from the KI-360097 VTEX app.

[Assistant]
Here's the implementation:

```markdown
# [KI-360097] The seller selection algorithm considers the stock from the items in order to select the best whitelabel seller for a given context.

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

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-360097/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-360097/KI-360097.js from the KI-360097 VTEX app.

[Assistant]
Here's the implementation:

```javascript
async function findBestSeler() {
  function ArmarItemsDelCart(sellerItemName) {
    const itemsArray = [];
    const skusID = vtexjs.checkout.orderForm.items;
    for (const skuID of skusID) {
      var itemCart = {
        id: skuID.id,
        quantity: skuID.quantity,
        seller: sellerItemName,
      };
      itemsArray.push(itemCart);
    }

    return itemsArray;
  }

  function selectBestSellerPerItem(slasSimulationList) {
    const ids = vtexjs.checkout.orderForm.items.map((item) => item.id);
    const bestSellerPerItem = ids.map((id) => {
      return { id: id, seller: "", bestSellerPrice: 0, bestSellerShipping: 0 };
    });
    // por cada id busco el seller
    ids.forEach((id) => {
      const slas = slasSimulationList.filter((s) => s.itemId === id);
      if (slas.length > 0) {
        if (slas.length === 1) {
          // si solo hay un sla
          const bestSeller = bestSellerPerItem.find((b) => b.id === id);
          slas[0].slas.forEach((slaItem) => {
            if (
              bestSeller.bestSellerPrice === 0 ||
              slaItem.price < bestSeller.bestSellerPrice
            ) {
              bestSeller.seller = slas[0].seller;
              bestSeller.bestSellerPrice = slaItem.price;
              bestSeller.bestSellerShipping = parseInt(
                slaItem.shippingEstimate.split("bd")[0]
              );
            } else if (slaItem.price === bestSeller.bestSellerPrice) {
              if (
                parseInt(slaItem.shippingEstimate.split("bd")[0]) <
                bestSeller.bestSellerShipping
              ) {
                bestSeller.seller = slas[0].seller;
                bestSeller.bestSellerPrice = slaItem.price;
                bestSellerShipping = parseInt(
                  slaItem.shippingEstimate.split("bd")[0]
                );
              }
            }
          });
        } else {
          // si hay mas de un sla
          slas.forEach((sla) => {
            sla.slas.forEach((slaItem) => {
              const bestSeller = bestSellerPerItem.find((b) => b.id === id);
              if (
                bestSeller.bestSellerPrice === 0 ||
                slaItem.price < bestSeller.bestSellerPrice
              ) {
                bestSeller.seller = sla.seller;
                bestSeller.bestSellerPrice = slaItem.price;
                bestSeller.bestSellerShipping = parseInt(
                  slaItem.shippingEstimate.split("bd")[0]
                );
              } else if (slaItem.price === bestSeller.bestSellerPrice) {
                if (
                  parseInt(slaItem.shippingEstimate.split("bd")[0]) <
                  bestSeller.bestSellerShipping
                ) {
                  bestSeller.seller = sla.seller;
                  bestSeller.bestSellerPrice = slaItem.price;
                  bestSellerShipping = parseInt(
                    slaItem.shippingEstimate.split("bd")[0]
                  );
                }
              }
            });
          });
        }
      }
    });

    return bestSellerPerItem;
  }

  function changeCartItemsSeller(bestSellerPerItem) {
    vtexjs.checkout.getOrderForm().then((orderForm) => {
      const itemsToAdd = [];
      const itemsToRemove = [];

      const orderFormItems = orderForm.items;
      if (orderFormItems.length > 0) {
        orderFormItems.forEach((it, index) => {
          const bestSeller = bestSellerPerItem.find((b) => b.id === it.id);
          if (bestSeller) {
            if (it.seller !== bestSeller.seller) {
              itemsToAdd.push({
                id: it.id,
                quantity: it.quantity,
                seller: bestSeller.seller,
              });
              itemsToRemove.push({ index: index, quantity: 0 });
            }
          }
        });

        if (itemsToAdd.length > 0) {
          vtexjs.checkout.removeItems(itemsToRemove);
          const itemsAux = [];
          itemsToAdd.forEach((item) => {
            var includes = false;
            itemsAux.forEach((itemAux) => {
              if (item.id == itemAux.id) {
                includes = true;
              }
            });
            if (includes) {
              itemsAux.forEach((itemAux) => {
                if (itemAux.id == item.id) {
                  itemAux.quantity = itemAux.quantity + item.quantity;
                }
              });
            } else {
              itemsAux.push(item);
            }
          });
          vtexjs.checkout.addToCart(itemsAux);
        }
      }
    });
  }

  function getCartSellers(usualSellersList) {
    const items = vtexjs.checkout.orderForm.items;
    const cartSellers = [];

    items.forEach((item) => {
      let seller = "";
      if (item.seller === "1") {
        if (item.sellerChain.length > 1) {
          seller = item.sellerChain[1];
        } else {
          seller = item.sellerChain[0];
        }
      } else {
        seller = item.seller;
      }
      if (seller !== "1") {
        if (
          !cartSellers.includes(seller) &&
          !usualSellersList.includes(seller)
        ) {
          cartSellers.push(seller);
        }
      }
    });
    return cartSellers;
  }
  const geoCoordinates =
    vtexjs.checkout.orderForm.shippingData.selectedAddresses[0].geoCoordinates;
  const country =
    vtexjs.checkout.orderForm.shippingData.selectedAddresses[0].country;
  const slaList = [];
  const usualSellers = ["easycle5990001", "easycle5990003"];

  //obtener los sellers del carrito
  usualSellers.push(...getCartSellers(usualSellers));

  async function simulationPerSeller() {
    for (const seller of usualSellers) {
      const itemsArray = ArmarItemsDelCart(seller);
      await fetch("/api/checkout/pub/orderForms/simulation?sc=1", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          accept: "application/json",
        },
        body: JSON.stringify({
          items: itemsArray,
          geoCoordinates: geoCoordinates,
          country: country,
        }),
      })
        .then((response) => response.json())
        .then(function (json) {
          const itemPurchaseConditions =
            json.purchaseConditions.itemPurchaseConditions;
          if (itemPurchaseConditions.length > 0) {
            itemPurchaseConditions.forEach((item) => {
              const slas = item.slas;
              if (slas.length > 0) {
                const slasDelivery = slas.filter(
                  (s) => s.deliveryChannel === "delivery"
                );
                slaList.push({
                  itemId: item.id,
                  seller: item.seller,
                  slas: slasDelivery,
                });
              }
            });
          }
        });
    }
  }

  //ejecuto la simulación en cada seller
  await simulationPerSeller();

  //busco al mejor seller por item
  const bestSellerPerItem = selectBestSellerPerItem(slaList);
  console.log("bestSellerPerItem", bestSellerPerItem);
  changeCartItemsSeller(bestSellerPerItem);
}

$(document).ready(function () {
  let previusSelectedAddress =
    vtexjs.checkout.orderForm.shippingData.selectedAddresses[0];
  $(window).on("orderFormUpdated.vtex", async function (_evt, orderForm) {
    const selectedAddresses = orderForm.shippingData.selectedAddresses[0];
    if (!previusSelectedAddress && selectedAddresses) {
      console.log("coloco direccion por primera vez");
      await findBestSeler();

      previusSelectedAddress = selectedAddresses;
    } else if (
      selectedAddresses.addressId !== previusSelectedAddress.addressId ||
      selectedAddresses.addressType !== previusSelectedAddress.addressType ||
      selectedAddresses.city !== previusSelectedAddress.city ||
      selectedAddresses.complement !== previusSelectedAddress.complement ||
      selectedAddresses.country !== previusSelectedAddress.country ||
      JSON.stringify(selectedAddresses.geoCoordinates) !==
        JSON.stringify(previusSelectedAddress.geoCoordinates) ||
      selectedAddresses.isDisposable !== previusSelectedAddress.isDisposable ||
      selectedAddresses.neighborhood !== previusSelectedAddress.neighborhood ||
      selectedAddresses.number !== previusSelectedAddress.number ||
      selectedAddresses.postalCode !== previusSelectedAddress.postalCode ||
      selectedAddresses.receiverName !== previusSelectedAddress.receiverName ||
      selectedAddresses.reference !== previusSelectedAddress.reference ||
      selectedAddresses.state !== previusSelectedAddress.state ||
      selectedAddresses.street !== previusSelectedAddress.street
    ) {
      console.log("cambio la direcciones");
      await findBestSeler();

      previusSelectedAddress = selectedAddresses;
    } else {
      console.log("no cambio la direcciones");
    }
  });
});

```


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

[User] Show me the implementation of my-account-commons/README.md from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```markdown
# My Account Commons

My Account Commons is a bundle of canonical components that can be used to create new tabs to be inserted on the `vtex.my-account` app.

DISCLAIMER: In order to this components work, they need to be children of `vtex.my-account` app.

To import it into your code:

```js
import {
  ContentWrapper,
  BaseLoading,
  GenericError,
} from 'vtex.my-account-commons'
```

## Usages

### ContentWrapper

You can use it in your code like a React component with the jsx tag: `<ContentWrapper>`.

```jsx
<ContentWrapper
  namespace="my-custom-page"
  title={`${orderTitle} ${orderNumber}`}
  backButton={backButton}>
  {({ handleError }) => children}
</ContentWrapper>
```

| Prop name            | Type      | Description                                                                  |
| -------------------- | --------- | ---------------------------------------------------------------------------- |
| `title`              | `String`  | The string that will appear on the page title.                               |
| `titleId`            | `String`  | Intl message id that will be translated and inserted on the page title.      |
| `backbutton.title`   | `String`  | The string that will appear as a message on the backbutton.                  |
| `backbutton.titleId` | `String`  | Intl message id that will be translated and inserted as the go back message. |
| `backbutton.path`    | `String!` | Location which the user will be lead to when hit the backbutton.             |
| `headerContent`      | `node`    | JSX that wil be inserted as children of the `vtex.style-guide/PageHeader`.   |
| `namespace`          | `String!` | Css namespace that will be added to the page body.                           |

The `ContentWrapper` uses the render prop pattern and returns to its children an object with the following props:

#### Render prop

| Prop name    | Type       | Description                                                             |
| ------------ | ---------- | ----------------------------------------------------------------------- |
| `handlError` | `Function` | Function that will be called when the user dismisses the error message. |

### BaseLoading

This component should be used to implement your own Loader, it analyses the result of a graphql query and displays
the loader Skeleton or an error message if any error occurs with retry option to call refetch on the query.

```jsx
<BaseLoading queryData={data} headerConfig={object}>
  {children}
</BaseLoading>
```

| Prop name      | Type            | Description                                                                                |
| -------------- | --------------- | ----------------------------------------------------------------------------------------------------------------- |
| `queryData`    | `QueryResult`   | Apollo Graphql query result.                                                                                |
| `headerConfig` | `ContentWProps` | The props that will be passed to the `ContentWrapper`.                                                            |
| `nameSpace`    | `String`        | The name space prop that will be passed to the `ContentWrapper`. `vtex-base-loading` is applied if none is passed |
| `parseError`   | `Function`      | Function that parses the graphql error and returns a messageId.                                                   |

### GenericError

A wrapper for the `vtex.styleguide/Alert` component.

```jsx
<GenericError onDismiss={handleError} errorId={error} />
```

| Prop name   | Type       | Description                                                          |
| ----------- | ---------- | -------------------------------------------------------------------- |
| `error`     | `String`   | The error message that will be displayed on the `Alert`.             |
| `errorId`   | `String`   | Intl message id that will be translated and inserted on the `Alert`. |
| `onDismiss` | `Function` | Function that will be called when the user hits the close button.    |

### Disclaimer about react/Router.js file

Read carefully the instructions within the file before editing it.

```


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

[User] Show me the implementation of my-account-commons/package.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "version": "0.10.0",
  "devDependencies": {
    "@vtex/intl-equalizer": "^2.4.2",
    "eslint": "5.16.0",
    "eslint-config-vtex-react": "4.0.0",
    "husky": "^3.0.9",
    "prettier": "1.19.1"
  },
  "scripts": {
    "verify": "yarn messages && cd ./react && yarn lint && yarn test",
    "messages": "intl-equalizer && intl-equalizer --fix"
  },
  "husky": {
    "hooks": {
      "pre-commit": "yarn messages && cd ./react && yarn lint",
      "pre-push": "yarn verify"
    }
  },
  "dependencies": {}
}

```


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

[User] Show me the implementation of my-account-commons/manifest.json from the my-account-commons VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "my-account-commons",
  "version": "0.16.1",
  "title": "MyAccount Commons",
  "defaultLocale": "pt-BR",
  "description": "Shared components used to build ne MyAccounts pages",
  "builders": {
    "react": "2.x",
    "messages": "0.x",
    "docs": "0.x"
  },
  "registries": [
    "smartcheckout"
  ],
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {
    "vtex.styleguide": "8.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 glovo-integration/package.json from the glovo-integration VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "glovo-integration",
  "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",
    "eslint": "^7.16.0",
    "eslint-config-vtex": "^12.9.3",
    "eslint-config-vtex-react": "^6.3.2",
    "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 glovo-integration/manifest.json from the glovo-integration VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "glovo-integration",
  "vendor": "vtex",
  "version": "3.5.3",
  "title": "Glovo Integration",
  "description": "Glovo Integration",
  "dependencies": {
    "vtex.styleguide": "9.x",
    "vtex.native-types": "0.x",
    "vtex.sellers-graphql": "7.x"
  },
  "builders": {
    "node": "6.x",
    "docs": "0.x",
    "admin": "0.x",
    "react": "3.x",
    "messages": "1.x",
    "graphql": "1.x"
  },
  "billingOptions": {
    "support": {
      "url": "https://support.vtex.com/hc/requests"
    },
    "type": "free",
    "availableCountries": [
      "*"
    ]
  },
  "scripts": {
    "prereleasy": "bash lint.sh"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "outbound-access",
      "attrs": {
        "host": "stageapi.glovoapp.com",
        "path": "*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "api.glovoapp.com",
        "path": "*"
      }
    },
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    },
    {
      "name": "ViewPayments"
    },
    {
      "name": "MakePayments"
    },
    {
      "name": "Changes"
    },
    {
      "name": "AcessaTodosPedidos"
    },
    {
      "name": "AcessaTodosCarrinhos"
    },
    {
      "name": "graphql-query"
    },
    {
      "name": "OMSViewer"
    },
    {
      "name": "vbase-read-write"
    },
    {
      "name": "ADMIN_DS"
    },
    {
      "name": "update-app-settings"
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/*"
      }
    }
  ],
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of alexa-certify-code/manifest.json from the alexa-certify-code VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "alexa-certify-code",
  "vendor": "vtex",
  "version": "1.0.0",
  "title": "Alexa Certify Code",
  "description": "",
  "billingOptions": {
    "termsURL": "",
    "support": {
      "url": "https://support.vtex.com/hc/requests"
    },
    "free": true
  },
  "builders": {
    "pixel": "0.x",
    "docs": "0.x"
  },
  "settingsSchema": {
    "title": "Alexa Certify Code",
    "type": "object",
    "properties": {
      "account": {
        "title": "Alexa's account id",
        "type": "string"
      },
      "domain": {
        "title": "Site domain",
        "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 order-places/manifest.json from the order-places VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "base-store-component",
  "version": "0.2.2",
  "title": "IO Base Component",
  "description": "IO Base component",
  "defaultLocale": "pt-BR",
  "builders": {
    "messages": "1.x",
    "store": "0.x",
    "react": "3.x",
    "docs": "0.x"
  },
  "mustUpdateAt": "2019-04-02",
  "scripts": {
    "postreleasy": "vtex publish --verbose"
  },
  "dependencies": {
    "vtex.styleguide": "9.x"
  },
  "$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 helloworld/manifest.json from the helloworld VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "render-guide",
  "vendor": "storecomponents",
  "version": "0.1.0",
  "title": "Render Guide",
  "description": "VTEX IO Render Guide",
  "scripts": {
    "prereleasy": "bash pre.sh"
  },
  "builders": {
    "pages": "1.x",
    "react": "3.x"
  },
  "dependencies": {
    "vtex.styleguide": "9.x"
  },
  "mustUpdateAt": "2020-07-02",
  "$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 yourviews-graphql/manifest.json from the yourviews-graphql VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtex",
  "name": "yourviews-graphql",
  "version": "1.0.0",
  "builders": {
    "graphql": "1.x",
    "node": "4.x",
    "docs": "0.x"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "vbase-read-write",
      "attrs": {
        "bucket": "secret_keys"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "service.yourviews.com.br",
        "path": "/api/*"
      }
    }
  ],
  "mustUpdateAt": "2018-09-05",
  "categories": [],
  "settingsSchema": {},
  "scripts": {
    "postreleasy": "bash publish.sh"
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "admin-example",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@vtex/prettier-config": "^0.2.0",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.4.0",
    "eslint-config-vtex-react": "^6.4.0",
    "husky": "^4.2.5",
    "lint-staged": "^10.2.2",
    "prettier": "^2.0.5",
    "typescript": "^3.8.3",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.131.0/public/@types/vtex.render-runtime"
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "admin-example",
  "vendor": "vtex",
  "version": "0.0.12",
  "title": "Example Admin App",
  "description": "",
  "mustUpdateAt": "2022-08-28",
  "scripts": {
    "postreleasy": "vtex publish"
  },
  "dependencies": {
    "vtex.styleguide": "9.x"
  },
  "builders": {
    "react": "3.x",
    "admin": "0.x",
    "messages": "1.x",
    "docs": "0.x"
  },
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
}

```


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

[User] Show me the implementation of micro/README.md from the micro VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Micro
A Micro FrontEnd Framework built around extensibility and multi tenancy.

This Repo was moved [here](https://github.com/vtex/micro)

## Core Principles
Micro is built with the following philosophy

### Extensibility
The front-end world evolves rapidly, and thus, Micro is not attached to an specific technology or stack. It is built around a plugin based structure where even core features, like React, routing or GraphQL, are not part of the core framework.

### Performance
Performance should always be a limiting factor. If a plugin is not performatic by nature, it should not take the `micro` name on it

### Micro FrontEnd
Teams should be able to develop components independently and then assemble it into a final product with `no-costs` abstractions

### Multi Tenancy
A Micro rendering server should be able to deliver multiple different Micro Projects in the same instance performatically and securely.

## Why building another framework ?
We started developing a Low Code React+GraphQL framework back in 2017. Many of the tools and concepts available today were only a dream back them. This made us invent the wheel and make some good and bad choices on all Micro's core principles. This lead us want to leverage all we've learned and reboot our Store Framework using modern tools. However, after an extensive research we've find out none of the available open source tools fit our needs. Below are the reasons why

### Gastby
At a first glance, Gastby was perfect for us. It had the performance minded way we needed. However, at VTEX we deal with thousands of merchants, each merchant having up to millions SKUs and building all those pages statically is a no go. Perhaps if Gatsby finds a way of dynamically generting pages we can move to it

### NextJS
NextJS was really similiar to what we needed. It had dynamically page generation via SSR (Server Side Rendering). However we could not find a way to serve multiple NextJS project's (with SSR) in the same server, breaking our multi tenancy principle

### Pika
Pika has the `deno` minded way we like. However, performance is REALLY important to us and we think es6 still have a long way to go before being usable in production. However, their development experience was what we needed and we are currently using their amazing services in development

After seen no solution was a perfect fit for us, we've decided to build our own, based on great ideas from
- Gatsby (Performance optimization and plugins)
- NextJS (Dynamicity, SSR and Static Pages Generation)
- Pika (Development experience and fast build times)
- Webpack (Bundling with performance budgets, tree shaking)
- @loadable/component (Future of react code splitting)
- React Router (Dynamic routing)
- Relay GraphQL (Cascading fetching and data masking problems)
- i18next (split translation files and fetch them as you go)

## What we've came out with
After many discussions, we've decided all our framework has to do is to opinionate your project's lifecycle and which build tools should be used in each lifecycle. The configuration of such tools (webpack/babel) is done via plugins and all the core Micro framework knows is how to look after these plugins in your package.json's dependencies and run them.

For instance. If you want to make a React app using Micro, you will need, at least, the `@vtex/micro-react` plugin. This plugin will actually fill the webpack/babel configuration with usable stuff for transpiling your code and putting it in a page. Using only the `@vtex/micro` won't make your React app renderable.

With this architecture, we hope to make a plugin based framework where new technology can be adopted incrementally. If you don't use a feature, say i18n, you don't get the bloatware that comes with it because, by desing, not even your build system knows about it.

### Lifecycles
The development of a front-end application usually happens in three steps.

1. Build and development
In this phase you are not concerned with load times/lighthouse score. Your project just needs to have a great development experience. This is achieved by
  - Transpiling fast
  - Having an HMR ready environment
  - Unminified Assets
  - Source Maps
  - Community tools integration (like react/apollo developer tools)

2. Assemble and verify
Now that you know your feature works, you need to know if it's performatic so you never slow down your code. This is achived by
  - Gathering all micro front-end code into a single monolith so our compilers can optimize
  - Code splitting techniques. (Currently we use the one entrypoint per page, but a plugin can change it)
  - Minimizing CSS and JS
  - Extracting and split CSS code as well (CSS may really harm the performance)
  - Using performance budgets
  - Analysing the [webpack stats](http://webpack.github.io/analyse)

3. Serve Requests
Now that your project was assembled from many different micro front-end apps, we need to serve the requests in a multi tenant way with SSR.
This still is a work in progress on how we can achieve multi-tenancy, however we are working in a `deno` server.

We've build these three steps into Micro's core. They are called `OnBuild`, `OnAssemble` and `OnRequest` respectively.

There is a build stack attached to each cycle.
`OnBuild` runs Babel and transpiles all project's code to `commonjs`. Also, if there is a `/components` or `/pages` folders, these are transpiled to `es6`. Plugins usually add configurations to the base Babel config so transpilations, like React, work

`OnAssemble` runs Webpack and bundles all code with one entrypoint per file in the `/pages` folder, that's why only projects with `/pages` folder can be assembled. Also, Micro traverses the dependency tree searching for Micro Packages and adds their `/components/**/*.ts(x)?` files to the compilation, so webpack has the impression we are in a monolitical app

`OnRequest` opens the generated artifacts in the `OnAssemble` phase and creates a multi-tenant/production ready server.

> Note: `OnRequest` phase is still not working well. We are working on it 💻

### How it Works
The core of the Micro framework is the `@vtex/micro` package. This package defines a Micro Project. Any Micro Project is composed of a `package.json` file containing the project's name, version, dependencies etc.

There are four different types of Micro Projects:
1. Components
  - A project that contains a `/components` folder with `.tsx` files in it. This folder should be used for sharing front-end components across other Micro Projects
2. Pages
  - A project that contains a `/pages` folder with `.tsx` files in it. Files in this folder are *NOT* shareable across micro projects. Also, files in this folder main be served to the browser
3. Lib
  - A project that contains a `/lib` folder with `.ts` files in it. This should be used for sharing common logic across Micro Projects and front/back ends
4. Plugin
  - A project that contains a `/plugins` folder with `.ts` files in it. This folder allows you to hook up into the a Micro Project's lifecycle. Keep reading to understand what a Micro Project lifecycle is

To operate a Micro Project, you need the `@vtex/micro-cli`. This cli gives you functionalities like packing Components, serving Pages, or adding Plugins

## Getting started
Micro is built around common tools like Webpack 4, Babel 7 and Yarn 2, so using packages from npm should not be a problem at all. Actually, if you use only packages from npm, Micro will behave similarly to a multi tenant ready NextJS/Gatsby.

To start a Micro project, just [start your usual yarn project](https://yarnpkg.com/cli/init)
```sh
yarn init
```

Add packages as usual (with `yarn add` etc etc). Also, add Micro's CLI so managing your project becomes easier

```sh
yarn add @vtex/micro-cli
```

Now, let's make this Project a little more Micro friendly. In your project's root folder, run

```sh
yarn micro setup
```

> Tip: You can run this command with a `--dry` option so the cli only prints the changes it will make to your project, instead of writting them

This command will setup your Project to behave like a Micro Project.

That's all for now.

### Sharing Components
Sharing components across Micro projects is really easy. Any file created on `/components` folder is automatically available to packages depending on your. Just make sure there is an `index.ts` re-exporing the desired components on your project's root folder

To use a component exported from another Micro Project, say `packageA@1.x`, just `yarn add componentsA@1.x` this package and use es6-like syntax to import it
```ts
import { AwesomeComponent } from 'packageA'
```

To understand more on how this magic is done, please read the Micro Internals section

#### Serving Pages
Currently, there is a simple server in the `micro-server` package that is used for development. This server does not serves requests in a multi tenant way yet. We plan to release our production ready server called Render very soon. However, in the meanwhile using our toy server should be just fine. To serve a page, create a file inside the `/pages` folder and

```sh
yarn micro link
```

This should open a dev server with your page on it. To understand more about how pages are built, read Micro Internals section

#### Plugins
Plugins are a core concept in Micro. If you want to develop a plugin, keep reading. If you want to use a plugin, this is the right place.
First of all, choose a plugin. For example purposes, I will use a routing plugin called `@vtex/micro-react-router`. Plugins are a normal npm package, so let's add it to our project. On your project root's folder run
```sh
yarn add @vtex/micro-react-router
```

Now, we need to tell Micro that we want to use this plugin for certain lifecycles. To do so, open your project's package.json. Under the `micro` section (if there is no micro section run `yarn micro setup` in your project) add the following in plugins

```package.json
...
"micro": {
  "plugins": {
    "onRequest": [
      "@vtex/micro-react-router"
    ],
    "onAssemble": [
      "@vtex/micro-react-router"
    ]
  }
}
```

This tells Micro to use the `@vtex/micro-react-router` plugin on these lifecycles. Read more about lifecycles in their section

#### Libs
Sometimes we just want to have a folder to write and share pices of delightful functional code. Libs are for that.

Other Micro projects can import your lib's folder code if you export it in your toplevel `index.ts`, but be carefull. You should only use lib-related code in either `/plugins` or `/lib` folder, using it on `/components` may harm your site's performance.

One cool fact about libs is that the framework of Micro is actually defined in a lib. Check out `@vtex/micro/lib` to see how Micro implements itself

## Developing a plugin
Plugin development is based on lifecycles. Each lifecycle has plugins hooks. To implement a plugin hook, you just need to extend the lifecycle's base class, implement their methods and `export default` this class. The structure of the `/plugins` folder should be:
```
| plugins
  | onBuild
    | index.ts
  | onAssemble
    | index.ts
  | onRequest
    | index.ts
```

> Note: remember to `export default` your plugin class inside each `index.ts`.
> Tip: A simple plugin to start getting examples is the `@vtex/micro-react-router`.

### OnBuild
The `OnBuild` plugin currently accepts adding to babel's config only. Your plugin may be asked to generate babel configs for `commonjs` or `es6` targets

### OnAssemble
The `OnAssemble` plugin currently only generates a WebPack config.
Generating and merging webpack configs can be trubblesome. That's why we use the great `webpack-blocks` project.

### OnRequest
This is the most complex plugin. This plugin allows you to add any tag to the final html generated by a Micro Server, like script tags, link tags, style tags and so on.
Also, you have access to the request's data and the class is instantiated on each request, so we don't mix data from two different requests.

You can use OnRequest plugins to add meta tags to your html or wrap components for Server Side Rendering. There are many more reasons of why you'd want to create a plugin for this lifecycle and I'm curious to see what the community will come up with

## Repo Structure
This repo uses (lerna)[https://github.com/lerna/lerna] for mono repo managment.
All micro-related code is in the workspace (yarn)[https://classic.yarnpkg.com/en/docs/workspaces/] `./packages` repo. Some cool feature are shown in `./examples` folder.

In `./packages` you can find `micro-cli`. This is a `Next.JS` like cli that provides a webpack builder along with a server for SSR. Also, this CLI allow you to develop Plugins and Pack your Micro Components

Also, inside `./packages` folder you can find `./micro`, a part of the framework containing some root packages.
Having these packages comming from a single dependency makes that all micro components use the same react/loadable versions generating homogeneous code

## Running Examples
### Installing Dependencies
We use yarn2. Please install yarn 2 with
```
yarn global add yarn@2.x
```

If you want to go back using yarn@1.x, in macOS, run
```
brew unlink yarn && brew link --overwrite yarn
```

### Building
Since this is a lerna managed monorepo we can run
```
lerna exec yarn build
```

This should build everything. Now, go to your favorite example in `./examples` folder and run
```sh
yarn micro link
```

This should generate the following terminal output

```
$ yarn micro link
🦄 Welcome to Micro
🦄 Starting Micro onBuild:development
🦄 Resolving dependencies
📦 Micro package found: simple@1.x
📦 Micro package found: @vtex/micro@1.x
📦 Micro package found: @vtex/micro-react@1.x
📦 Micro package found: @vtex/micro-react-router@1.x
🦄 [onBuild]: Resolving plugins
🔌 [onBuild]: Plugin found @vtex/micro
🔌 [onBuild]: Plugin found @vtex/micro-react
🎯 [onBuild]: Creating dist folder in .micro/onBuild
🦄 [onBuild]: Starting the build
🦄 [onBuild]: The build of 26 files finished in: 1.717s
🦄 [onBuild]: Starting DevServer
🦄 [onRequest]: Resolving plugins
🔌 [onRequest]: Plugin found @vtex/micro
🔌 [onRequest]: Plugin found @vtex/micro-react
🔌 [onRequest]: Plugin found @vtex/micro-react-router
🐙 [router]: Found router config
🦄 DevServer is UP on http://localhost:3000
```

Just click on the url and check out the features

## Developing Micro
Currently, there is a problem when building `@vtex/micro`. Since micro builds itself, it requires to be built to allow it building. To achieve this, the yarn build performs 2 builds. However, for developing, you need to perform 2 watches.

First, run `yarn watch`. This will trigger `tsc`. Then, run `yarn micro link` so we build `/components` into an es6 module.

This is a hack and I don't really know how to solve this problem now. We'll survive 🎵🎵🎵

## Features Checklist
- [x] Plugins Support
- [x] Official React Support
- [ ] Official Preact Support

### Oficial Plugins Features Checklist
1. `@vtex/micro`
  - [x] Preloaded Data Fetching
  - [ ] CSS

2. `@vtex/micro-react`
  - [x] Code Splitting
  - [x] Dinamic Chunk Loading
  - [x] Preload/Prefetch Scripts
  - [x] Server Side Rendering
  - [x] React Strict
  - [ ] Preloaded Data Fetching with Cuncurrent mode

3. `@vtex/micro-react-router`
  - [x] Dynamic Routing
  - [x] Link Prefetching via Props
  - [x] Asset Prefetching
  - [x] Preload `onMouseEnter`
  - [x] Prefetch when entering the viewport on Mobile
  - [ ] Transitions
  - [ ] Transitions with Cuncurrent mode
  - [ ] Fetch over Prefetch Priority
  - [ ] Prefetch Budget

4. `@vtex/micro-react-i18n` [comming...]
5. `@vtex/micro-react-images` [comming...]
6. `@vtex/micro-react-graphql` [comming...]
7. `@vtex/micro-react-storybook` [comming...]

## Specifics
Below are some specific docs of each plugin

### Micro React Router
The current implementation of Micro React Router is the following:
- Link and NavLink accept a `prefetch` option. If you pass this option, the component will prefetch the route route in any device type
- Link and NavLink will `preload` a page if `onMouseEnter` is triggered by your browser
- On Mobile devices, is the element enters on the viewport, it will trigger a prefetch on Link and NavLink components

Happy Coding ✨

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "micro.js",
  "version": "1.0.0",
  "description": "A Micro FrontEnd Framework",
  "license": "MIT",
  "private": true,
  "workspaces": [
    "packages/*",
    "examples/*"
  ],
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.31.0",
    "@typescript-eslint/parser": "^2.31.0",
    "@yarnpkg/pnpify": "^2.0.0-rc.22",
    "eslint-config-standard": "^14.1.1",
    "eslint-import-resolver-node": "^0.3.3",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-standard": "^4.0.1",
    "typescript": "^3.8.3"
  },
  "dependencies": {
    "eslint": "<7.0.0"
  }
}

```


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

[User] Show me the implementation of micro/lerna.json from the micro VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "version": "1.1.1-alpha.17",
  "npmClient": "yarn",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "message": "Release: %v"
    }
  },
  "packages": [
    "packages/*"
  ]
}

```


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

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

[Assistant]
Here's the implementation:

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

```


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

[User] Show me the implementation of instore-profile/nwb.config.js from the instore-profile VTEX app.

[Assistant]
Here's the implementation:

```javascript
module.exports = {
  type: 'react-component',
  babel: {
    plugins: ['add-react-displayname'],
  },
  npm: {
    esModules: false,
  },
}

```


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

[User] Show me the implementation of instore-profile/jest.transform.js from the instore-profile VTEX app.

[Assistant]
Here's the implementation:

```javascript
module.exports = require('babel-jest').createTransformer({
  presets: ['env','react-app'],
})

```