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

[User] Show me the implementation of training-week-demo/store-theme/store/blocks/header/category-menu.json from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#category-menu": {
    "props": {
      "experimentalOptimizeRendering": true
    },
    "children": [
      "menu-item#category-apparel",
      "menu-item#category-home",
      "menu-item#more"
    ]
  },
  "menu-item#category-apparel": {
    "props": {
      "id": "menu-item-category-apparel",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/",
        "noFollow": false,
        "tagTitle": "Apparel & Accessories",
        "text": "Apparel & Accessories"
      }
    },
    "blocks": [
      "vtex.menu@2.x:submenu#category-apparel"
    ]
  },
  "vtex.menu@2.x:submenu#category-apparel": {
    "props": {
      "width": "auto"
    },
    "children": [
      "vtex.menu@2.x:menu#category-apparel"
    ]
  },
  "vtex.menu@2.x:menu#category-apparel": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#category-apparel-clothing",
      "menu-item#category-apparel-accessories",
      "menu-item#category-apparel-eyeglasses"
    ]
  },
  "menu-item#category-apparel-clothing": {
    "props": {
      "id": "menu-item-category-apparel-clothing",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/clothing/",
        "noFollow": false,
        "tagTitle": "Clothing",
        "text": "Clothing"
      }
    }
  },
  "menu-item#category-apparel-accessories": {
    "props": {
      "id": "menu-item-category-apparel-accessories",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/accessories/",
        "noFollow": false,
        "tagTitle": "Accessories",
        "text": "Accessories"
      }
    }
  },
  "menu-item#category-apparel-eyeglasses": {
    "props": {
      "id": "menu-item-category-apparel-eyeglasses",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/eyeglasses/",
        "noFollow": false,
        "tagTitle": "Eyeglasses",
        "text": "Eyeglasses"
      }
    }
  },
  "menu-item#category-home": {
    "props": {
      "id": "menu-item-category-home",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/home---decor/",
        "noFollow": false,
        "tagTitle": "Home & Decor",
        "text": "Home & Decor"
      }
    }
  },
  "menu-item#more": {
    "props": {
      "id": "menu-item-custom-sale",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": true,
        "tagTitle": "More",
        "text": "More"
      }
    },
    "blocks": [
      "vtex.menu@2.x:submenu#more"
    ]
  },
  "vtex.menu@2.x:submenu#more": {
    "props": {
      "width": "100%"
    },
    "children": [
      "flex-layout.row#menu-more"
    ]
  },
  "flex-layout.row#menu-more": {
    "children": [
      "flex-layout.col#menu-more-1",
      "flex-layout.col#menu-more-2"
    ]
  },
  "flex-layout.col#menu-more-1": {
    "children": [
      "vtex.menu@2.x:menu#more"
    ]
  },
  "flex-layout.col#menu-more-2": {
    "children": [
      "info-card#home"
    ]
  },
  "vtex.menu@2.x:menu#more": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#about-us",
      "menu-item#faq"
    ]
  },
  "menu-item#about-us": {
    "props": {
      "id": "menu-item-about-us",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/about-us",
        "noFollow": true,
        "tagTitle": "About us",
        "text": "About us"
      }
    }
  },
  "menu-item#faq": {
    "props": {
      "id": "menu-item-faq",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/faq",
        "noFollow": true,
        "tagTitle": "FAQ",
        "text": "FAQ"
      }
    }
  },
  "menu-item#contact-us": {
    "props": {
      "id": "menu-item-contact-us",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/contact-us",
        "noFollow": true,
        "tagTitle": "Contact Us",
        "text": "Contact Us"
      }
    }
  }
}

```


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

[User] Show me the implementation of training-week-demo/store-theme/store/blocks/header/header.jsonc from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "header": {
    "blocks": ["header-layout.desktop", "header-layout.mobile"]
  },
  "header.full": {
    "blocks": ["header-layout.desktop", "header-layout.mobile"]
  },
  "header-layout.desktop": {
    "children": [
      "flex-layout.row#1-desktop",
      "flex-layout.row#2-desktop",
      "flex-layout.row#3-desktop",
      "sticky-layout#4-desktop"
    ]
  },

  "flex-layout.row#1-desktop": {
    "children": ["telemarketing"],
    "props": {
      "fullWidth": true
    }
  },

  "flex-layout.row#2-desktop": {
    "children": ["notification.bar#home"],
    "props": {
      "fullWidth": "true"
    }
  },
  "notification.bar#home": {
    "props": {
      "content": "SELECTED ITEMS ON SALE! CHECK IT OUT!"
    }
  },
  "flex-layout.row#3-desktop": {
    "props": {
      "blockClass": "menu-link",
      "horizontalAlign": "center",
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true,
      "fullWidth": true
    },
    "children": [
      "vtex.menu@2.x:menu#websites",
      "flex-layout.col#spacer",
      "vtex.menu@2.x:menu#institutional"
    ]
  },
  "flex-layout.col#spacer": {
    "props": {
      "width": "grow"
    }
  },
  "sticky-layout#4-desktop": {
    "props": {
      "blockClass": "sticky-header"
    },
    "children": ["flex-layout.row#4-desktop"]
  },
  "flex-layout.row#4-desktop": {
    "props": {
      "blockClass": "main-header",
      "horizontalAlign": "center",
      "verticalAlign": "center",
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true,
      "fullWidth": true
    },
    "children": [
      "flex-layout.col#logo-desktop",
      "flex-layout.col#category-menu",
      "flex-layout.col#spacer",
      "search-bar",
      "locale-switcher",
      "login",
      "minicart.v2"
    ]
  },
  "flex-layout.col#logo-desktop": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": ["logo#desktop"]
  },
  "flex-layout.col#category-menu": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": ["vtex.menu@2.x:menu#category-menu"]
  },
  "logo#desktop": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo.png",
      "width": "180"
    }
  },
  "header-layout.mobile": {
    "children": ["sticky-layout#1-mobile"]
  },
  "sticky-layout#1-mobile": {
    "children": ["flex-layout.row#1-mobile"]
  },
  "flex-layout.row#1-mobile": {
    "children": [
      "drawer",
      "logo#mobile",
      "flex-layout.col#spacer",
      "login",
      "minicart.v2"
    ],
    "props": {
      "blockClass": "main-header-mobile",
      "preventHorizontalStretch": true,
      "preserveLayoutOnMobile": true,
      "fullWidth": true
    }
  },
  "drawer": {
    "children": ["menu#drawer"]
  },

  "menu#drawer": {
    "children": [
      "menu-item#category-apparel",
      "menu-item#category-home",
      "menu-item#more"
    ],
    "props": {
      "orientation": "vertical"
    }
  },

  "logo#mobile": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://storecomponents.vteximg.com.br/arquivos/store-theme-logo-mobile.png",
      "width": "70"
    }
  }
}

```


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

[User] Show me the implementation of training-week-demo/store-theme/store/blocks/header/top-menu.json from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#websites": {
    "children": [
      "menu-item#shop",
      "menu-item#about-us"
    ]
  },
  "menu-item#shop": {
    "props": {
      "id": "menu-item-shop",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Shop",
        "text": "Shop"
      }
    }
  },
  "vtex.menu@2.x:menu#institutional": {
    "children": [
      "menu-item#vtex-website"
    ]
  },
  "menu-item#vtex-website": {
    "props": {
      "id": "menu-item-vtex-website",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "external",
        "href": "http://vtex.com",
        "noFollow": false,
        "tagTitle": "visit vtex.com",
        "text": "visit vtex.com"
      }
    }
  }
}

```


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

[User] Show me the implementation of training-week-demo/storefront-app/messages/pt.json from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/test": "teste",
  "store/test": "teste"
}
```


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

[User] Show me the implementation of training-week-demo/storefront-app/messages/en.json from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/test": "test",
  "store/test": "test"
}

```


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

[User] Show me the implementation of training-week-demo/storefront-app/messages/es.json from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/test": "teste",
  "store/test": "teste"
}
```


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

[User] Show me the implementation of training-week-demo/storefront-app/react/package.json from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "CHANGE_ME",
  "version": "0.0.0",
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "apollo-client": "^2.6.8",
    "react": "^16.12.0",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.12.0",
    "react-intl": "^3.12.0"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/jest": "^25.1.4",
    "@types/node": "^13.9.8",
    "@types/react": "^16.9.31",
    "@vtex/test-tools": "^3.3.2",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-cache-inmemory": "^1.6.5",
    "graphql": "^14.6.0",
    "trainingweekdev21.storefront-app": "https://demo--trainingweekdev21.myvtex.com/_v/private/typings/linked/v1/trainingweekdev21.storefront-app@0.1.0+build1632970466/public/@types/trainingweekdev21.storefront-app",
    "typescript": "3.9.7",
    "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.2/public/@types/vtex.render-runtime",
    "vtex.search-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.47.0/public/@types/vtex.search-graphql",
    "vtex.store-image": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-image@0.14.0/public/@types/vtex.store-image"
  }
}
```


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

[User] Show me the implementation of training-week-demo/storefront-app/react/DrawnBadge.tsx from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
// import { useProduct } from 'vtex.product-context'
// import { canUseDOM } from 'vtex.render-runtime'

type Props = {
  label?: string
}

const DrawnBadge = ({ label }: Props) => {
  // const product = useProduct()

  return (
    <div className="pa3">
      <span>
        {label ?? 'It should be a nice message 🤔'}
      </span>
    </div>
    )
}

export default DrawnBadge

```


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

[User] Show me the implementation of training-week-demo/storefront-app/react/ProductDrawner.tsx from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
// import { useLazyQuery } from 'react-apollo'
// import { Link } from 'vtex.render-runtime'
// import { Image } from 'vtex.store-image'

// import GET_PRODUCT from './graphql/getProduct.graphql'

const ProductDraw = (/** { productIds } */) => {
  // const [getProduct, { data, loading, called }] = useLazyQuery(GET_PRODUCT)

  return (
    <div className="flex flex-column items-center ma3">
      <div>
        Where is the data?
      </div>
      <div>
        <button onClick={() => alert('clicked')}>Search new product</button>
      </div>
    </div>
  )
}

ProductDraw.schema = {
  title: 'My component',
  type: 'object',
  properties: {},
}

export default ProductDraw

```


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

[User] Show me the implementation of training-week-demo/storefront-app/store/interfaces.json from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-draw": {
    "component": "ProductDraw"
  },
  "drawn-badge": {
    "component": "DrawnBadge"
  }
}

```


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

[User] Show me the implementation of training-week-demo/storefront-app/react/typings/gql.d.ts from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.gql' {
  import { DocumentNode } from 'graphql'

  const Schema: DocumentNode

  export default Schema
}

declare module '*.graphql' {
  import { DocumentNode } from 'graphql'

  const schema: DocumentNode

  export default 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 training-week-demo/storefront-app/react/typings/css.d.ts from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.css' {
  type Styles = {
    [selector: string]: string
  }

  const styles: Styles

  export default styles
}

```


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

[User] Show me the implementation of training-week-demo/storefront-app/react/graphql/getProduct.graphql from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```graphql
query MyProductQuery($id: ID!) {
  product(identifier: { field: id, value: $id }) {
    productId
    productName
    linkText
    items(filter: FIRST_AVAILABLE) {
      images {
        imageUrl
      }
    }
  }
}

```


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

[User] Show me the implementation of training-week-demo/service-app/docs/README.md from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```markdown
# GraphQL Example

A reference app implementing a VTEX IO service with GraphQL resolvers.

![GraphQL Server Architecture](https://user-images.githubusercontent.com/18706156/77382285-bf2d6c80-6d5e-11ea-9f39-2c30b3ec3672.jpg)

We use [**Apollo Server**](https://www.apollographql.com/docs/apollo-server/) as the underlying framework along with some tweaks for our platform.

For communicating with external services or other VTEX IO apps, we use the [**node-vtex-api**](https://github.com/vtex/node-vtex-api), a VTEX set of utilities for Node services. You can import this package using NPM from `@vtex/api` (already imported on this project)

**Start from `graphq/schema.graphql` and `node/index.ts` and follow the comments and imports!**

When _linking_ a GraphQL app, our CLI will automatically provide you a **[GraphiQL](https://github.com/graphql/graphiql) endpoint**, for you to test the functionalities. You can also access a specific app's GraphiQL through the **GraphQL IDE** section on the admin site (as long as the [admin-graphql-ide](https://github.com/vtex-apps/admin-graphql-ide) app is installed on that account).

Queries, mutations and types defined on the `schema.graphql` will have theirs implementation on the `Service` object exported on `node/index.ts`.

> For more information about our GraphQL services, check [**graphql-server**](https://github.com/vtex/graphql-server) and its _Wiki_ (VTEX internal only).

## About GraphQL

It's important to  understand what GraphQL is and how it compares with other popular API standards, such as REST.

There are many resources out there that can help understand the basics, so let's list a few of them here:

-   [GraphQL website](http://graphql.org/learn/)
-   [How to GraphQL](https://www.howtographql.com/basics/1-graphql-is-the-better-rest/)

## Recipes

### Configuring cache for specific queries
Caching is one of the most important strategies for making applications **fast and responsive**. This is achieved by setting **cache control hints** in the GraphQL schema. Our GraphQL Server computes a cache expiration date by combining `@cacheControl` declarations from the fields returned by a specific request, whereas the props `maxAge` and `scope` can be defined. It errs on the safe side for requests with multiple `@cacheControl` declarations, so shorter `maxAge` results override longer, and `PRIVATE` scope overrides `PUBLIC`.

- There are currently tree possible `maxAge`s _(LONG, MEDIUM and SHORT)_ and two possible `scope`s _(PRIVATE and PUBLIC)_.

Suppose that we want to create a simple catalog app that has two types, `type Product` and `type Order`. Since products don't change quickly throughout the day and anyone can see them, they can be cached with a maxAge `LONG` in a `PUBLIC` scope. Order, on the other hand, is a per user entity and should have a PRIVATE scope. To achieve this behavior, the following annotations must be included to the schema

```graphql
type Product @cacheControl(maxAge: LONG, scope: PUBLIC) {
  id: ID!
  name: String
  description: String
}

type Order @cacheControl(scope: PRIVATE) {
  id: ID!
  statusDescription: String
  description: String
}

type Query {
  listOrders: [Order]
  listProducts: [Product]
}
```

> **Note** to know more on how these cache hints work, take a look at the [Apollo Server docs for caching](https://www.apollographql.com/docs/apollo-server/performance/caching/)

Since our GraphQL implementation uses a CDN (Cloud-Front) to cache query responses, `PRIVATE` queries should land in a different endpoint from `PUBLIC` ones. Each endpoint have some configurations tweaks in the CDN and may lead to different behaviors. For example, to receive cookies in the backend, you need to be in a private route.

### Caching requests when using public endpoint

Requests to `graphql-server` using public endpoints are not cacheable, so they are given `cache-control` with `no-cache`. The way to override this behavior is to send the header `'x-vtex-cacheable': 'true'` on request.

### Resolving conflicts (`@context` directive)

Let's say that another app called `rewards-graphql` also defines a field named `products` inside the `Query` type. If both apps live on the same workspace/account it will cause some requests to fail, since our GraphQL server won't be able to automatically figure out which app should resolve that query.

For this use case we support a special directive called `@context`, which GraphQL clients can use to provide additional information to resolve these kind of conflicts.

#### Specifying provider

If the client knows about a conflict (or in any case, for precaution), it can specify which app defined the field it's requesting. In the example we've mentioned above, with that new `rewards-graphql` app, the client could send the query like this:

```graphql
query getProducts {
  products @context(provider: "vtex.products-graphql") {
    name
  }
}
```

This declares that we want to use the definition of `products` from `products-graphql`, not from `rewards-graphql`, so that it can properly rename and execute it.

#### Specifying sender

In some cases it might be hard for a client to know that a conflict can happen, since an app doesn't know about all other apps that may be running on a workspace, it only knows about its own direct dependencies. At the same time, we'd like to restrict apps so that they can only access types/fields defined by apps they directly depend on.

Both these problems can be solved by using the `@context` directive again, but this time using the `sender` argument. Basically, apps sending requests to `graphql-server` should include this directive announcing their names, so that it can restrict which parts of the schema can be accessed. Note that restricting the access also makes it easier for apps to know exactly when they'd need to specify a `provider`, since conflicts with apps they don't know about will never happen.

So, let's say that an app called `client-app`, that depends only on `products-graphql` is sending a GraphQL request. Even if `rewards-graphql` is running in the current workspace it won't need to specify the provider anymore, just set the `sender`.

```graphql
{
  products @context(sender: "vtex.client-app@1.2.3") {
    name
  }
}
```

**Note:** If you are requesting GraphQL data from React apps that uses the `react` builder the `sender` argument **is already baked** into every request it makes.

## Splunk Dashboard

We have an (for now, VTEX-only, internal) Splunk dashboard to show all metrics related to your app. You can find it at:

https://splunk72.vtex.com/en-US/app/vtex_io_apps/node_app_metrics

After linking this app and making some requests, you can select `vtex.graphql-example` and see the metrics for your app. **Don't forget to check the box Development, as you are linking your app in a development workspace**.

```


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

[User] Show me the implementation of training-week-demo/service-app/graphql/schema.graphql from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```graphql
type OtherType {
  message: String
}

type Query {
  # You can place comments here
  queryOne(argOne: String, argTwo: Int!): OtherType
}

```


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

[User] Show me the implementation of training-week-demo/service-app/node/service.json from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "memory": 256,
  "ttl": 10,
  "timeout": 1,
  "minReplicas": 2,
  "maxReplicas": 5,
  "routes": {
    "changeMe": {
      "path": "/_v/change-me",
      "public": true
    }
  }
}

```


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

[User] Show me the implementation of training-week-demo/service-app/node/package.json from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "co-body": "^6.1.0",
    "ramda": "^0.27.1"
  },
  "devDependencies": {
    "@types/co-body": "^6.1.0",
    "@types/node": "^12.0.0",
    "@types/ramda": "types/npm-ramda#dist",
    "@vtex/api": "6.45.4",
    "@vtex/tsconfig": "^0.5.6",
    "typescript": "3.9.7"
  },
  "scripts": {
    "lint": "tsc --noEmit && tslint -c tslint.json './**/*.ts'"
  },
  "version": "0.2.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 training-week-demo/service-app/node/index.ts from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { method, ParamsContext, RecorderState, ServiceContext } from '@vtex/api'
import { Service } from '@vtex/api'

import { Clients } from './clients'
import { changeMeMiddleware } from './middlewares/changeMeMiddleware'
import { changeMeResolver } from './resolvers/changeMeResolver'

const MEDIUM_TIMEOUT_MS = 2 * 1000

declare global {
  // We declare a global Context type just to avoid re-writing ServiceContext<Clients, State> in every handler and resolver
  type Context = ServiceContext<Clients>
}

// Export a service that defines resolvers and clients' options
export default new Service<Clients, RecorderState, ParamsContext>({
  clients: {
    implementation: Clients,
    options: {
      default: {
        timeout: MEDIUM_TIMEOUT_MS,
      },
    },
  },
  routes: {
    changeMe: method({
      GET: [changeMeMiddleware]
    }),
    // otherRoute: method({
    //   POST: [otherMiddleware, anotherMiddleware]
    // })
  },
  graphql: {
    // Field resolvers usually go here
    resolvers: {
      Query: {
        // Change the names
        queryOne: changeMeResolver
      },
      Mutation: {
        // Do you have mutation resolvers?
      },
    },
  },
})

```


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

[User] Show me the implementation of training-week-demo/service-app/node/clients/index.ts from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

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

export class Clients extends IOClients {
  // public get jsonPlaceholder() {
  //   return this.getOrSet('jsonPlaceholder', JsonPlaceholderClient)
  // }

  // public get externalMasterdata() {
  //   return this.getOrSet('externalMasterdata', ExternalMasterdata)
  // }
}

```


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

[User] Show me the implementation of training-week-demo/service-app/node/typings/global.d.ts from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface UsersArgs {
  filter: string
  perPage: number
  pageNumber: number
}

```


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

[User] Show me the implementation of training-week-demo/service-app/node/middlewares/changeMeMiddleware.ts from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```typescript
// import { json } from 'co-body'

export async function changeMeMiddleware(ctx: Context, next: () => Promise<any>) {
  const {  } = ctx

  // ctx.vtex.route.params

  // json(ctx.req)

  ctx.body = {
    message: 'I think you have to change me'
  }

  await next()
}

```


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

[User] Show me the implementation of training-week-demo/service-app/node/resolvers/changeMeResolver.ts from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const changeMeResolver =  (
  _: unknown,
  _args: any /** the props that you defined in query arguments */,
  ctx: Context
  ) => {
  const {} = ctx

  return {
    message: 'I am almost sure that you have to change me'
  }
}

```


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

[User] Show me the implementation of training-week-demo/service-app/node/clients/externalMasterdata/index.ts from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { ExternalClient, InstanceOptions, IOContext } from '@vtex/api'

export class ExternalMasterdata extends ExternalClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super(`http://${context.account}.vtexcommercestable.com.br`, context, {
      ...options,
      headers: {
        ...options?.headers,
        ...(context.authToken
          ? { VtexIdclientAutCookie: context.authToken }
          : null),
        'Content-Type': 'application/json',
      },
    })
  }

  public getCustomers = () => {
    return this.http.get(''/** what resource? */)
  }
}

```


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

[User] Show me the implementation of training-week-demo/service-app/node/clients/jsonPlaceholder/index.ts from the training-week-demo VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { InstanceOptions, IOContext } from '@vtex/api'
import { ExternalClient } from '@vtex/api'

export class JsonPlaceholderClient extends ExternalClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super('' /** Base URL goes here */, context, options)
  }

  public getUsers = () => {
    // Implement a method to get users, you can use this.http.get (or other methods)
  }
}

```


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

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

[Assistant]
Here's the implementation:

```markdown
# Inactive SKU

App in VTEX that receives a notification when a SKU is changed or created, if the Sku doesnt have Image this in going to be inactive

## How to install

⚠ First, make sure the broadcaster app is installed.
![my-apps](images/apps.png)

Run command: `vtex install vtex.inactive-sku`

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "memory": 128,
  "ttl": 10,
  "timeout": 2,
  "minReplicas": 2,
  "maxReplicas": 10,
  "workers": 4,
  "events": {
    "skuChange": {
      "keys": ["broadcaster.notification"]
    }
  }
}

```


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

[User] Show me the implementation of inactive-sku/node/package.json from the inactive-sku VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "co-body": "^6.0.0"
  },
  "devDependencies": {
    "@types/co-body": "^0.0.3",
    "@types/node": "12.x",
    "@vtex/api": "6.45.24",
    "@vtex/tsconfig": "^0.5.6",
    "typescript": "3.9.7"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty && eslint -c .eslintrc.json --fix './**/*.ts'"
  },
  "version": "0.7.2"
}

```


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

[User] Show me the implementation of inactive-sku/node/index.ts from the inactive-sku VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type {
  IOClients,
  ParamsContext,
  ServiceContext,
  RecorderState,
  ClientsConfig,
} from '@vtex/api'
import { Service } from '@vtex/api'

import { skuChange } from './events/skuChange'
import { Clients } from './clients'

const TIMEOUT_MS = 10000
const CONCURRENCY = 10

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

  interface State extends RecorderState {
    code: number
  }
}

const clients: ClientsConfig<Clients> = {
  // We pass our custom implementation of the clients bag, containing the Status client.
  implementation: Clients,
  options: {
    // All IO Clients will be initialized with these options, unless otherwise specified.
    default: {
      retries: 2,
      timeout: TIMEOUT_MS,
    },
    events: {
      exponentialTimeoutCoefficient: 2,
      exponentialBackoffCoefficient: 2,
      initialBackoffDelay: 50,
      retries: 1,
      timeout: TIMEOUT_MS,
      concurrency: CONCURRENCY,
    },
  },
}

export default new Service<Clients, State, ParamsContext>({
  clients,
  events: {
    skuChange,
  },
})

```


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

[User] Show me the implementation of inactive-sku/node/clients/index.ts from the inactive-sku VTEX app.

[Assistant]
Here's the implementation:

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

import Catalog from './catalog'

// Extend the default IOClients implementation with our own custom clients.
export class Clients extends IOClients {
  public get catalog() {
    return this.getOrSet('catalog', 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 inactive-sku/node/clients/catalog.ts from the inactive-sku VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { InstanceOptions, IOContext } from '@vtex/api'
import { ExternalClient } from '@vtex/api'

interface UpdateBody {
  ProductId: number,
  Name: string,
  PackagedHeight: number,
  PackagedLength: number,
  PackagedWidth: number,
  PackagedWeightKg: number,
  IsActive: boolean,
  ActivateIfPossible: boolean,
}

const PRODUCT_URL = '/catalog/pvt/product/'
const SKU_URL = '/catalog/pvt/stockkeepingunit/'
const SKU_URL_image = "/catalog_system/pvt/sku/stockkeepingunitbyid/"
// https://{accountName}.{environment}.com.br/api/catalog/pvt/stockkeepingunit/{skuId}

export default class Catalog extends ExternalClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super(`http://${context.account}.myvtex.com/api`, context, {
      ...options,
      headers: {
        ...options?.headers,
        VtexIdclientAutCookie:
          context.adminUserAuthToken ?? context.authToken ?? '',
        'X-Vtex-Use-Https': 'true',
      },
    })
  }

  public async getSku(skuId: string) {
    return this.http.get(`${SKU_URL}${skuId}`, {
      metric: 'get-product-by-sku-id',
    })
  }

  public async getSkuImage(skuId: string) {
    return this.http.get(`${SKU_URL_image}${skuId}`, {
      metric: 'get-product-by-sku-id',
    })
  }

  public async getProduct(productId: string) {
    return this.http.get(`${PRODUCT_URL}${productId}`, {
      metric: 'get-product-by-product-id',
    })
  }

  public async updateSku(data: UpdateBody, skuId: string) {
    return this.http.put(`${SKU_URL}${skuId}`, data, {
      metric: 'update-sku-by-sku-id',
    })
  }

  public async updateProduct(data: UpdateBody, productId: string) {
    return this.http.put(`${PRODUCT_URL}${productId}`, data, {
      metric: 'update-product-by-product-id',
    })
  }
}

```


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

[User] Show me the implementation of inactive-sku/node/events/skuChange.ts from the inactive-sku VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { EventContext } from '@vtex/api'
import { LogLevel, NotFoundError, ResolverError } from '@vtex/api'

import type { Clients } from '../clients'

export async function skuChange(ctx: EventContext<Clients>) {
  const {
    clients: { catalog: catalogClient },
  } = ctx

  const { IdSku, HasStockKeepingUnitModified, IsActive } = ctx.body

  if (!HasStockKeepingUnitModified && !IsActive) return false

  let sku
  let skuImages

  try {
    sku = await catalogClient.getSku(IdSku)
  } catch (error) {
    const erroMessage = `SKU ${IdSku} not found.`
    const splunkError = {
      error: erroMessage,
      detail: error,
    }

    ctx.vtex.logger.log(splunkError, LogLevel.Error)
    throw new NotFoundError(erroMessage)
  }

  try {
    skuImages = await catalogClient.getSkuImage(IdSku)
  } catch (error) {
    const erroMessage = `SKU IMAGES ${IdSku} not found.`
    const splunkError = {
      error: erroMessage,
      detail: error,
    }

    ctx.vtex.logger.log(splunkError, LogLevel.Error)
    throw new NotFoundError(erroMessage)
  }

  if (skuImages.Images.length > 0) return false

  try {
    const bodyPayload = {
      ProductId: sku.ProductId,
      Name: sku.Name,
      PackagedHeight: sku.PackagedHeight,
      PackagedLength: sku.PackagedLength,
      PackagedWidth: sku.PackagedWidth,
      PackagedWeightKg: sku.PackagedWeightKg,
      IsActive: false,
      ActivateIfPossible: false
    }

    await catalogClient.updateSku(bodyPayload, sku.Id)
  } catch (error) {
    const erroMessage = `SKU ${sku.Id} cannot be updated.`
    const splunkError = {
      error: erroMessage,
      detail: error,
    }

    console.log('error', error)

    ctx.vtex.logger.log(splunkError, LogLevel.Error)
    throw new ResolverError(erroMessage)
  }

  return true
}

```


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

[User] Show me the implementation of easy-shipping-setup/messages/en.json from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/delivery-settings.navigation.label": "Delivery Settings",
  "admin/delivery-settings.navigation.search.kws": "delivery, settings",
  "admin/shipping-policy.title": "Delivery settings",
  "admin/shipping-policy.name": "Delivery:",
  "admin/shipping-policy.label.holiday": "Holiday",
  "admin/shipping-policy.label.saturday": "Saturday",
  "admin/shipping-policy.label.sunday": "Sunday",
  "admin/shipping-policy.button.update": "Update",
  "admin/shipping-policy.toast.failure": "Delivery settings failed to update",
  "admin/shipping-policy.toast.success": "Delivery settings successfully updated",
  "admin/shipping-rate.delivery-cost": "Delivery cost",
  "admin/shipping-rate.delivery-time": "Delivery time (days)",
  "admin/promotion.label.free-delivery-threshold": "Free delivery threshold (e.g. 100)",
  "admin/promotion.label.isActive": "Free shipping",
  "admin/dock.name": "Dock:",
  "admin/warehouse.name": "Warehouse:"
}
```


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

[User] Show me the implementation of easy-shipping-setup/messages/ro.json from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/delivery-settings.navigation.label": "Setari livrare",
  "admin/delivery-settings.navigation.search.kws": "setari, livrare, setari livrare",
  "admin/shipping-policy.title": "Setari livrare",
  "admin/shipping-policy.name": "Livrare:",
  "admin/shipping-policy.label.holiday": "Sarbatoare",
  "admin/shipping-policy.label.saturday": "Sambata",
  "admin/shipping-policy.label.sunday": "Duminica",
  "admin/shipping-policy.button.update": "Modifica",
  "admin/shipping-policy.toast.failure": "Actualizare setari livrare esuata",
  "admin/shipping-policy.toast.success": "Actualizare setari livrare reusita",
  "admin/shipping-rate.delivery-cost": "Cost livrare",
  "admin/shipping-rate.delivery-time": "Timp de livrare (zile)",
  "admin/promotion.label.free-delivery-threshold": "Limita livrare gratuita (e.g. 100)",
  "admin/promotion.label.isActive": "Transport gratuit",
  "admin/dock.name": "Incarcare:",
  "admin/warehouse.name": "Depozit:"
}
```


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

[User] Show me the implementation of easy-shipping-setup/admin/navigation.json from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "section": "orders",
  "titleId": "admin/delivery-settings.navigation.label",
  "searchKeyWordsHelpers": "admin/delivery-settings.navigation.search.kws",
  "path": "/admin/delivery-settings"
}
```


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

[User] Show me the implementation of easy-shipping-setup/admin/routes.json from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin.app.delivery-settings": {
    "component": "DeliverySettings",
    "path": "/admin/app/delivery-settings"
  }
}
```


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

[User] Show me the implementation of easy-shipping-setup/graphql/shippingRate.graphql from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```graphql
type ShippingRate {
  zipCodeStart: String
  zipCodeEnd: String
  weightStart: Int
  weightEnd: Int
  absoluteMoneyCost: String
  pricePercent: Int
  pricePercentByWeight: Int
  maxVolume: Int
  timeCost: String
  country: String
  operationType: Int
  polygon: String
  minimumValueInsurance: Int
}
```


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

[User] Show me the implementation of easy-shipping-setup/graphql/schema.graphql from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```graphql
type Query {
  listAllShippingPolicies: ShippingPolicyResponse
  listAllWarehouses: [WarehouseResponse]
  listAllDocks: [DockResponse]
  listShippingRate(carrierId: String, zipCode: String): [ShippingRate]
  listPromotionById(promotionId: String): Promotion
  listAllPromotions: PromotionResponse
}

type Mutation {
  updateShippingPolicy(input: ShippingPolicyInput!): ShippingPolicy
  updateShippingRate(carrierId: String, searchZipCode: String, input: [ShippingRateInput]): ShippingRate
  createDock: Boolean
  createWarehouse: Boolean
  createOrUpdatePromotion(
    newTotalValueFloor: Float,
    promotionId: String,
    beginDateUtc: String,
    endDateUtc: String,
    isActive: Boolean
  ): Promotion
}

input ShippingPolicyInput {
  id: String
  name: String
  shippingMethod: String
  isHolidayActive: Boolean
  isSaturdayActive: Boolean
  isSundayActive: Boolean
  largestMeasure: Float
  maxMeasureSum: Float
  isActive: Boolean
}

input ShippingRateInput {
  zipCodeStart: String
  zipCodeEnd: String
  weightStart: Int
  weightEnd: Int
  absoluteMoneyCost: String
  pricePercent: Int
  pricePercentByWeight: Int
  maxVolume: Int
  timeCost: String
  timeCostToDisplay: String
  country: String
  operationType: Int
  polygon: String
  minimumValueInsurance: Int
}

```


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

[User] Show me the implementation of easy-shipping-setup/graphql/shippingPolicy.graphql from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```graphql
type ShippingPolicyResponse {
  items: [ShippingPolicy]
}

type ShippingPolicy {
  id: String
  name: String
  shippingMethod: String
  weekendAndHolidays: WeekendAndHolidaysSettings
  maxDimension: MaxDimensionSettings
  isActive: Boolean
}

type WeekendAndHolidaysSettings {
  saturday: Boolean
  sunday: Boolean
  holiday: Boolean
}

type MaxDimensionSettings {
  largestMeasure: Float
  maxMeasureSum: Float
}
```


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

[User] Show me the implementation of easy-shipping-setup/graphql/promotion.graphql from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```graphql
type PromotionResponse {
  limitConfiguration: LimitConfiguration
  limitConfigurationMaxPrice: LimitConfigurationMaxPrice
  items: [PromotionItem]
  disabledItems: [String]
  archivedItems: [String]
}

type LimitConfigurationMaxPrice {
  activesCount: Int
  limit: Int
}

type LimitConfiguration {
  activesCount: Int
  limit: Int
}

type PromotionItem {
  idCalculatorConfiguration: String
  name: String
  isActive: Boolean
}

type Promotion {
  idCalculatorConfiguration: String
  name: String
  description: String
  beginDateUtc: String
  endDateUtc: String
  lastModified: String
  daysAgoOfPurchases: Int
  isActive: Boolean
  isArchived: Boolean
  isFeatured: Boolean
  activeDaysOfWeek: [String]
  offset: Int
  activateGiftsMultiplier: Boolean
  newOffset: Float
  cumulative: Boolean
  nominalShippingDiscountValue: Float
  absoluteShippingDiscountValue: Float
  nominalDiscountValue: Float
  maximumUnitPriceDiscount: Float
  percentualDiscountValue: Float
  rebatePercentualDiscountValue: Float
  percentualShippingDiscountValue: Float
  percentualTax: Float
  shippingPercentualTax: Float
  percentualDiscountValueList1: Float
  percentualDiscountValueList2: Float
  skusGift: SkuGift
  nominalRewardValue: Float
  percentualRewardValue: Float
  orderStatusRewardValue: String
  maxNumberOfAffectedItems: Int
  maxNumberOfAffectedItemsGroupKey: String
  applyToAllShippings: Boolean
  nominalTax: Float
  origin: String
  idSellerIsInclusive: Boolean
  idsSalesChannel: [String]
  areSalesChannelIdsExclusive: Boolean
  marketingTags: [String]
  marketingTagsAreNotInclusive: Boolean
  paymentsMethods: [String]
  campaigns: [String]
  categories: [String]
  categoriesAreInclusive: Boolean
  brands: [String]
  brandsAreInclusive: Boolean
  products: [String]
  productsAreInclusive: Boolean
  skus: [String]
  skusAreInclusive: Boolean
  collections1BuyTogether: [String]
  minimumQuantityBuyTogether: Int
  quantityToAffectBuyTogether: Int
  enableBuyTogetherPerSku: Boolean
  listSku1BuyTogether: [String]
  listSku2BuyTogether: [String]
  totalValueFloor: Float
  totalValueCeling: Float
  totalValueMode: String
  collections: [String]
  collectionsIsInclusive: Boolean
  restrictionsBins: [String]
  totalValuePurchase: Float
  slasIds: [String]
  isSlaSelected: Boolean
  isFirstBuy: Boolean
  firstBuyIsProfileOptimistic: Boolean
  compareListPriceAndPrice: Boolean
  isDifferentListPriceAndPrice: Boolean
  zipCodeRanges: [String]
  itemMaxPrice: Float
  itemMinPrice: Float
  isMinMaxInstallments: Boolean
  minInstallment: Int
  maxInstallment: Int
  clusterExpressions: [String]
  clusterOperator: String
  giftListTypes: [String]
  affiliates: [String]
  maxUsage: Int
  maxUsagePerClient: Int
  multipleUsePerClient: Boolean
  type: String
  useNewProgressiveAlgorithm: Boolean
}

type SkuGift {
  quantitySelectable: Int
  gifts: [Gift]
}

type Gift {
  id: String
  name: String
  quantity: Int
  sellers: [Seller]
}

type Seller {
  id: String
  name: String
}

```


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

[User] Show me the implementation of easy-shipping-setup/graphql/warehouse.graphql from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```graphql
type WarehouseResponse {
  id: String
  name: String
  warehouseDocks: [Dock]
  isActive: Boolean
}

type Dock {
  dockId: String
}
```


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

[User] Show me the implementation of easy-shipping-setup/graphql/dock.graphql from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```graphql
type DockResponse {
  id: String
  name: String
  isActive: Boolean
}
```


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

[User] Show me the implementation of easy-shipping-setup/node/service.json from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "memory": 128,
  "ttl": 10,
  "timeout": 10,
  "minReplicas": 2,
  "maxReplicas": 10,
  "workers": 4
}
```


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

[User] Show me the implementation of easy-shipping-setup/node/package.json from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "co-body": "^6.0.0",
    "ramda": "^0.25.0"
  },
  "devDependencies": {
    "@types/co-body": "^0.0.3",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.0.0",
    "@types/ramda": "types/npm-ramda#dist",
    "@vtex/api": "6.45.12",
    "@vtex/test-tools": "^1.0.0",
    "tslint": "^5.14.0",
    "tslint-config-vtex": "^2.1.0",
    "typescript": "3.9.7"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty && tslint -c tslint.json --fix './**/*.ts'"
  },
  "version": "1.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 easy-shipping-setup/node/index.ts from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type {
  ClientsConfig,
  ServiceContext,
  ParamsContext,
  RecorderState,
} from '@vtex/api'
import { LRUCache, Service } from '@vtex/api'

import { Clients } from './clients'
import { resolvers } from './resolvers'

const TIMEOUT_MS = 800

const memoryCache = new LRUCache<string, any>({ max: 5000 })

metrics.trackCache('status', memoryCache)

const clients: ClientsConfig<Clients> = {
  implementation: Clients,
  options: {
    default: {
      retries: 2,
      timeout: TIMEOUT_MS,
    }
  },
}

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

  interface State extends RecorderState {
    code: number
    payload: any
  }
}

export default new Service<Clients, State, ParamsContext>({
  clients,
  graphql: {
    resolvers
  },
})
```


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

[User] Show me the implementation of easy-shipping-setup/react/DeliverySettings.tsx from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, useEffect, useState } from 'react'
import { useQuery, useLazyQuery, useMutation } from 'react-apollo'
import { useIntl } from 'react-intl'

import GET_SHIPPING_POLICIES from './graphql/shipping.graphql'
import GET_WAREHOUSES from './graphql/warehouse.graphql'
import GET_DOCKS from './graphql/dock.graphql'
import GET_SHIPPING_RATES from './graphql/freight.graphql'
import GET_PROMOTIONS from './graphql/allPromotions.graphql'
import GET_PROMOTION_BY_ID from './graphql/promotion.graphql'
import UPDATE_SHIPPING_RATE from './graphql/updateShippingRate.graphql'
import UPDATE_SHIPPING_POLICY from './graphql/updateShippingPolicy.graphql'
import CREATE_OR_UPDATE_PROMOTION from './graphql/createOrUpdatePromotion.graphql'
import CREATE_DOCK from './graphql/createDock.graphql'
import CREATE_WAREHOUSE from './graphql/createWarehouse.graphql'

import {
  Layout,
  PageBlock,
  PageHeader,
  ToastProvider,
  ToastConsumer,
  Input,
  Divider,
  Toggle,
  Button,
  Spinner,
} from 'vtex.styleguide'

interface ShippingRateInput {
  carrierId: string
  searchZipCode: string
  input: [ShippingRateInputData]
}

interface ShippingRateInputData {
  zipCodeStart: string
  zipCodeEnd: string
  weightStart: number
  weightEnd: number
  absoluteMoneyCost: string
  pricePercent: number
  pricePercentByWeight: number
  maxVolume: number
  timeCost: string
  timeCostToDisplay: string
  country: string
  operationType: number
  polygon: string
  minimumValueInsurance: number
}

interface ShippingPolicyInput {
  id: String
  name: String
  shippingMethod: String
  isSaturdayActive: Boolean
  isSundayActive: Boolean
  isHolidayActive: Boolean
  largestMeasure: Number
  maxMeasureSum: Number
  isActive: Boolean
}

const DeliverySettings: FC = () => {
  const intl = useIntl()

  const [idCalculatorConfiguration, setIdCalculatorConfiguration] = useState('')
  const [shippingRate, setShippingRate] = useState<ShippingRateInput>({
    carrierId: '1',
    searchZipCode: '0',
    input: [{} as ShippingRateInputData],
  })

  const [shippingPolicy, setShippingPolicy] = useState<ShippingPolicyInput>(
    {} as ShippingPolicyInput
  )
  const [promotion, setPromotion] = useState({} as any)
  const [isActive, setIsActive] = useState(false)
  const [freeDeliveryThreshold, setFreeDeliveryThreshold] = useState(0)
  const [isLoading, setIsLoading] = useState(true)

  const [updateShippingRate] = useMutation(UPDATE_SHIPPING_RATE, {
    refetchQueries: [
      {
        query: GET_SHIPPING_RATES,
        variables: { carrierId: shippingRate.carrierId, zipCode: '0' },
      },
    ],
  })

  const [createDock] = useMutation(CREATE_DOCK, {
    refetchQueries: [{ query: GET_DOCKS }],
  })

  const [createWarehouse] = useMutation(CREATE_WAREHOUSE, {
    refetchQueries: [{ query: GET_WAREHOUSES }],
  })

  const [updateShippingPolicy] = useMutation(UPDATE_SHIPPING_POLICY, {
    refetchQueries: [{ query: GET_SHIPPING_POLICIES }],
  })

  const [createOrUpdatePromotion] = useMutation(CREATE_OR_UPDATE_PROMOTION, {
    refetchQueries: [{ query: GET_PROMOTIONS }],
  })

  const { data: warehouseData, loading: warehouseLoading } = useQuery(
    GET_WAREHOUSES,
    { ssr: false }
  )
  const { data: dockData, loading: dockLoading } = useQuery(GET_DOCKS, {
    ssr: false,
  })
  const {
    data: shippingPolicyData,
    error,
    loading: shippingPolicyLoading,
  } = useQuery(GET_SHIPPING_POLICIES, { ssr: false })
  const { data: allPromotionsData, loading: allPromotionsLoading } = useQuery(
    GET_PROMOTIONS,
    { ssr: false }
  )

  const [
    getShippingRates,
    { data: shippingRateData, loading: shippingRateLoading },
  ] = useLazyQuery(GET_SHIPPING_RATES)
  const [getPromotionData, { data: promotionData, loading: promotionLoading }] =
    useLazyQuery(GET_PROMOTION_BY_ID)

  useEffect(() => {
    if (!dockLoading && dockData.listAllDocks.length === 0) {
      createDock().then((result) => {
        if (result.data?.createDock === true) {
          if (
            !warehouseLoading &&
            warehouseData?.listAllWarehouses?.length === 0
          )
            createWarehouse()
        }
      })
    }
  }, [warehouseData, dockData])

  useEffect(() => {
    if (
      !shippingRateLoading &&
      !allPromotionsLoading &&
      !shippingRateLoading &&
      !promotionLoading &&
      !dockLoading &&
      !warehouseLoading
    )
      setIsLoading(false)
  }, [
    shippingPolicyLoading,
    allPromotionsLoading,
    shippingRateLoading,
    promotionLoading,
    warehouseLoading,
    dockLoading,
  ])

  let filteredPromotion: any = []
  useEffect(() => {
    if (allPromotionsData?.listAllPromotions?.items?.length) {
      filteredPromotion = allPromotionsData.listAllPromotions.items.filter(
        (item: any) => item.name === 'Free delivery'
      )
      setIdCalculatorConfiguration(
        filteredPromotion[0].idCalculatorConfiguration
      )
    }
  }, [allPromotionsData])

  useEffect(() => {
    if (idCalculatorConfiguration.length === 0) return

    getPromotionData({
      variables: {
        promotionId: idCalculatorConfiguration,
      },
    })
  }, [idCalculatorConfiguration])

  useEffect(() => {
    if (!shippingPolicyData?.listAllShippingPolicies?.items.length || error)
      return

    let policy = shippingPolicyData.listAllShippingPolicies.items[0]

    setShippingPolicy({
      id: policy.id,
      name: policy.name !== 'Standard' ? 'Standard' : policy.name,
      shippingMethod:
        policy.shippingMethod !== 'Standard'
          ? 'Standard'
          : policy.shippingMethod,
      isSaturdayActive: policy.weekendAndHolidays.saturday,
      isSundayActive: policy.weekendAndHolidays.sunday,
      isHolidayActive: policy.weekendAndHolidays.holiday,
      largestMeasure: policy.maxDimension.largestMeasure,
      maxMeasureSum: policy.maxDimension.maxMeasureSum,
      isActive: policy.isActive,
    })

    getShippingRates({
      variables: {
        carrierId: policy.id,
        zipCode: '0',
      },
    })
  }, [shippingPolicyData])

  useEffect(() => {
    if (!shippingRateData) return

    setShippingRate({
      carrierId: shippingPolicyData.listAllShippingPolicies.items[0].id,
      searchZipCode: '0',
      input: shippingRateData.listShippingRate.map(
        (rate: ShippingRateInputData) => ({
          zipCodeStart: rate.zipCodeStart,
          zipCodeEnd: rate.zipCodeEnd,
          weightStart: rate.weightStart,
          weightEnd: rate.weightEnd,
          absoluteMoneyCost: rate.absoluteMoneyCost,
          pricePercent: rate.pricePercent,
          pricePercentByWeight: rate.pricePercentByWeight,
          maxVolume: rate.maxVolume,
          timeCost: rate.timeCost,
          timeCostToDisplay: rate.timeCost.split('.')[0],
          country: rate.country,
          operationType: 2,
          polygon: rate.polygon,
          minimumValueInsurance: rate.minimumValueInsurance,
        })
      ),
    })
  }, [shippingRateData])

  useEffect(() => {
    if (!promotionData) return

    setPromotion(promotionData)
    setIsActive(promotionData.listPromotionById.isActive)
    setFreeDeliveryThreshold(promotionData.listPromotionById.totalValueFloor)
  }, [promotionData])

  const handleChangeRate = (e: any) => {
    shippingRate.input[0].absoluteMoneyCost = e.target.value
    setShippingRate({
      ...shippingRate,
      input: shippingRate.input,
    })
  }

  const handleChangeDelivery = (e: any) => {
    shippingRate.input[0].timeCost =
      e.target.value.length <= 4 ? e.target.value + '.00:00:00' : e.target.value
    shippingRate.input[0].timeCostToDisplay = e.target.value
    setShippingRate({
      ...shippingRate,
      input: shippingRate.input,
    })
  }

  const handlePromotionChange = (e: any) => {
    const threshold = e.target.value
    setFreeDeliveryThreshold(threshold)
  }

  const handleToggleChange = () => {
    setIsActive(!isActive)
  }

  const handleSubmit = async (showToast: any) => {
    try {
      setIsLoading(true)
      if (freeDeliveryThreshold !== 0) {
        handlePromotionSubmit()
      }

      await updateShippingRate({
        variables: {
          ...shippingRate,
        },
      })

      await updateShippingPolicy({
        variables: {
          ...shippingPolicy,
        },
      }).catch((err) => {
        setIsLoading(false)
        console.error(err)
        showToast({
          message: intl.formatMessage({
            id: 'admin/shipping-policy.toast.failure',
          }),
          duration: 5000,
        })
      })
    } catch (err) {
      console.error(err)
    } finally {
      setIsLoading(false)
      showToast({
        message: intl.formatMessage({
          id: 'admin/shipping-policy.toast.success',
        }),
        duration: 5000,
      })
    }
  }

  const handlePromotionSubmit = () => {
    createOrUpdatePromotion({
      variables: {
        newTotalValueFloor: Number(freeDeliveryThreshold),
        promotionId: idCalculatorConfiguration,
        beginDateUtc: promotion?.listPromotionById?.beginDateUtc,
        endDateUtc: promotion?.listPromotionById?.endDateUtc,
        isActive: isActive,
      },
    })
  }

  return (
    <ToastProvider>
      <Layout
        pageHeader={
          <PageHeader
            title={intl.formatMessage({
              id: 'admin/delivery-settings.navigation.label',
            })}
          />
        }
      >
        <PageBlock variation="full">
          {isLoading ? (
            <div
              style={{
                height: '500px',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              <Spinner />
            </div>
          ) : (
            <div>
              <div className={`flex justify-between`}>
                {Object.keys(shippingRate.input[0]).length !== 0 && (
                  <div className={`w-20`}>
                    <div className={`mb4`}>
                      <Input
                        type="number"
                        value={shippingRate.input[0].absoluteMoneyCost}
                        onChange={(e: any) => handleChangeRate(e)}
                        label={intl.formatMessage({
                          id: 'admin/shipping-rate.delivery-cost',
                        })}
                      />
                    </div>
                    <div className={`mb4`}>
                      <Input
                        value={shippingRate.input[0].timeCostToDisplay}
                        onChange={(e: any) => handleChangeDelivery(e)}
                        label={intl.formatMessage({
                          id: 'admin/shipping-rate.delivery-time',
                        })}
                      />
                    </div>
                  </div>
                )}

                <div
                  style={{ borderRadius: '8px', backgroundColor: '#f3f4f6' }}
                  className={`w-40`}
                >
                  <div style={{ lineHeight: 2 }} className={`pa7`}>
                    <div>
                      {intl.formatMessage({ id: 'admin/shipping-policy.name' })}{' '}
                      <strong>{shippingPolicy.name}</strong>
                    </div>
                    <div>
                      {intl.formatMessage({ id: 'admin/dock.name' })}
                      <strong>
                        {dockData.listAllDocks.length !== 0
                          ? dockData.listAllDocks[0].name
                          : ''}
                      </strong>
                    </div>
                    <div>
                      {intl.formatMessage({ id: 'admin/warehouse.name' })}
                      <strong>
                        {warehouseData.listAllWarehouses.length !== 0
                          ? warehouseData.listAllWarehouses[0].name
                          : ''}
                      </strong>
                    </div>
                  </div>
                </div>
              </div>
              <div className="mv6">
                <Divider orientation="horizontal" />
              </div>
              {Object.keys(shippingPolicy).length !== 0 && (
                <div>
                  <div style={{ fontWeight: 'bold' }} className={`flex mb6`}>
                    {intl.formatMessage({ id: 'admin/shipping-policy.title' })}
                  </div>
                  <div className={`flex mb4`}>
                    <Toggle
                      label={intl.formatMessage({
                        id: 'admin/shipping-policy.label.holiday',
                      })}
                      checked={shippingPolicy.isHolidayActive}
                      onChange={() => {
                        setShippingPolicy({
                          ...shippingPolicy,
                          isHolidayActive: !shippingPolicy.isHolidayActive,
                        })
                      }}
                    />
                  </div>
                  <div className={`flex mb4`}>
                    <Toggle
                      label={intl.formatMessage({
                        id: 'admin/shipping-policy.label.saturday',
                      })}
                      checked={shippingPolicy.isSaturdayActive}
                      onChange={() => {
                        setShippingPolicy({
                          ...shippingPolicy,
                          isSaturdayActive: !shippingPolicy.isSaturdayActive,
                        })
                      }}
                    />
                  </div>
                  <div className={`flex mb4`}>
                    <Toggle
                      label={intl.formatMessage({
                        id: 'admin/shipping-policy.label.sunday',
                      })}
                      checked={shippingPolicy.isSundayActive}
                      onChange={() => {
                        setShippingPolicy({
                          ...shippingPolicy,
                          isSundayActive: !shippingPolicy.isSundayActive,
                        })
                      }}
                    />
                  </div>
                </div>
              )}
              <div className="mv6">
                <Divider orientation="horizontal" />
              </div>
              <div className={`flex mb6`}>
                <Toggle
                  label={intl.formatMessage({
                    id: 'admin/promotion.label.isActive',
                  })}
                  checked={isActive}
                  onChange={() => handleToggleChange()}
                />
              </div>
              {isActive && (
                <div className={`w-40`}>
                  <Input
                    type="number"
                    value={freeDeliveryThreshold}
                    label={intl.formatMessage({
                      id: 'admin/promotion.label.free-delivery-threshold',
                    })}
                    onChange={(e: any) => handlePromotionChange(e)}
                  />
                </div>
              )}
              <ToastConsumer>
                {({ showToast }: { showToast: any }) => (
                  <div className={`pt6`}>
                    <Button
                      variation={'primary'}
                      onClick={() => handleSubmit(showToast)}
                    >
                      {intl.formatMessage({
                        id: 'admin/shipping-policy.button.update',
                      })}
                    </Button>
                  </div>
                )}
              </ToastConsumer>
            </div>
          )}
        </PageBlock>
      </Layout>
    </ToastProvider>
  )
}

export default DeliverySettings

```


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

[User] Show me the implementation of easy-shipping-setup/react/package.json from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "shipping-strategy",
  "version": "1.0.2",
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "@vtex/styleguide": "^9.142.0",
    "@types/react-router-dom": "^5.1.7",
    "apollo-client": "^2.6.8",
    "react": "^16.12.0",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.12.0",
    "react-intl": "^3.12.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^4.3.1"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/jest": "^25.1.4",
    "@types/node": "^13.9.8",
    "@types/react": "^16.9.31",
    "@vtex/test-tools": "^3.3.2",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-cache-inmemory": "^1.6.5",
    "graphql": "^14.6.0",
    "typescript": "3.9.7"
  }
}

```


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

[User] Show me the implementation of easy-shipping-setup/node/clients/shipping.ts from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```typescript
import {
  InstanceOptions,
  IOContext,
  JanusClient,
  RequestConfig
} from '@vtex/api'
import { pipe } from 'ramda'
import { statusToError } from '../utils'

const TWO_SECONDS = 2 * 1000

const withCookieAsHeader =
  (context: IOContext) =>
    (options: InstanceOptions): InstanceOptions => ({
      ...options,
      headers: {
        VtexIdclientAutCookie: context.adminUserAuthToken ?? '',
        ...(options?.headers ?? {}),
      },
      timeout: TWO_SECONDS
    })

export default class ShippingPolicies extends JanusClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super(context, options && pipe(withCookieAsHeader(context))(options))
  }

  public async listAllShippingPolicies(): Promise<string> {
    return this.get(this.routes.shippingPolicies)
  }

  public updateShippingPolicy = (policyId: string, data: any): any => {
    this.put(this.routes.updateShippingPolicy(policyId), data)
  }

  protected get = <T>(url: string, config?: RequestConfig) =>
    this.http.get<T>(url, config).catch(statusToError) as Promise<T>

  protected post = <T>(url: string, data?: any, config?: RequestConfig) =>
    this.http.post<T>(url, data, config).catch<any>(statusToError)

  protected put = <T>(url: string, data?: any, config?: RequestConfig) =>
    this.http.put<T>(url, data, config).catch<any>(statusToError)

  private get routes() {
    const basePVT = '/api/logistics'

    return {
      shippingPolicies: `${basePVT}/pvt/shipping-policies?page=1&perPage=100`,
      updateShippingPolicy: (policyId: string) => `${basePVT}/pvt/shipping-policies/${policyId}`
    }
  }
}
```


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

[User] Show me the implementation of easy-shipping-setup/node/clients/freight.ts from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```typescript
import {
  InstanceOptions,
  IOContext,
  RequestConfig,
  JanusClient
} from '@vtex/api'
import { pipe } from 'ramda'
import { statusToError } from '../utils'

const TWO_SECONDS = 2 * 1000

const withCookieAsHeader =
  (context: IOContext) =>
  (options: InstanceOptions): InstanceOptions => ({
    ...options,
    headers: {
      Accept: 'application/json',
      'Cache-Control': 'no-cache',
      'Content-Type': 'application/json',
      VtexIdclientAutcookie: context?.adminUserAuthToken ?? '',
      'X-Vtex-Use-Https': 'true',
      ...(options?.headers ?? {}),
    },
    timeout: TWO_SECONDS
  })

export default class ShippingRates extends JanusClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super(context, options && pipe(withCookieAsHeader(context))(options))
  }

  public async listShippingRate(carrierId: string, zipCode: string): Promise<string> {
    return this.get(this.routes.shippingRates(carrierId, zipCode))
  }

  public updateShippingRate = (carrierId: string, data: any): any => {
    this.post(this.routes.updateShippingRate(carrierId), data)
  }

  protected get = <T>(url: string, config?: RequestConfig) =>
    this.http.get<T>(url, config).catch(statusToError) as Promise<T>

  protected post = <T>(url: string, data?: any, config?: RequestConfig) =>
    this.http.post<T>(url, data, config).catch<any>(statusToError) as Promise<T>

  private get routes() {
    const basePVT = `/api/logistics`

    return {
      shippingRates: (carrierId: string, zipCode: string) => `${basePVT}/pvt/configuration/freights/${carrierId}/${zipCode}/values`,
      updateShippingRate: (carrierId: string) => `${basePVT}/pvt/configuration/freights/${carrierId}/values/update`
    }
  }
}
```


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

[User] Show me the implementation of easy-shipping-setup/node/clients/dock.ts from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```typescript
import {
  InstanceOptions,
  IOContext,
  JanusClient,
  RequestConfig
} from '@vtex/api'
import { pipe } from 'ramda'
import { statusToError } from '../utils'
import { CREATE_DOCK_OBJECT } from '../utils/constants'

const TWO_SECONDS = 2 * 1000

const withCookieAsHeader =
  (context: IOContext) =>
  (options: InstanceOptions): InstanceOptions => ({
    ...options,
    headers: {
      VtexIdclientAutCookie: context.adminUserAuthToken ?? '',
      ...(options?.headers ?? {}),
    },
    timeout: TWO_SECONDS
  })

export default class Docks extends JanusClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super(context, options && pipe(withCookieAsHeader(context))(options))
  }

  public async listAllDocks(): Promise<string> {
    return this.get(this.routes.docks)
  }

  public createDock = (): Promise<string> => {
    const defaultDock = CREATE_DOCK_OBJECT
    return this.post(this.routes.createDock, defaultDock)
  }

  public activateDock = (dockId: string): Promise<string> => {
    return this.post(this.routes.activateDock(dockId))
  }

  protected get = <T>(url: string, config?: RequestConfig) =>
    this.http.get<T>(url, config).catch(statusToError) as Promise<T>

  protected post = <T>(url: string, data?: any, config?: RequestConfig) =>
    this.http.post<T>(url, data, config).catch<any>(statusToError)

  private get routes() {
    const basePVT = '/api/logistics'

    return {
      docks: `${basePVT}/pvt/configuration/docks`,
      createDock: `${basePVT}/pvt/configuration/docks`,
      activateDock: (dockId: string) => `${basePVT}/pvt/configuration/docks/${dockId}/activation`
    }
  }
}
```


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

[User] Show me the implementation of easy-shipping-setup/node/clients/ExternalAppClient.ts from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { AuthType, InstanceOptions, IOClient, IOContext } from '@vtex/api'

const useHttps = !process.env.VTEX_IO

/**
 * Used to perform calls on private routes in another account
 * Custom implementation of the AppClient: https://github.com/vtex/node-vtex-api/blob/master/src/clients/apps/AppClient.ts
 */
export class ExternalAppClient extends IOClient {
  constructor(app: string, context: IOContext, options?: InstanceOptions) {
    const [appName, appVersion] = app.split('@')
    const [vendor, name] = appName.split('.') // vtex.messages
    const protocol = useHttps ? 'https' : 'http'

    let baseURL: string
    if (appVersion) {
      const [major] = appVersion.split('.')
      baseURL = formatPrivateRoute({ vendor, name, major, protocol })
    } else {
      throw new Error(`Using old routing for ${app}. Please change vendor.app to vendor.app@major in client ${(options && options.name) || ''}`)
    }

    super(
      context,
      {
        ...options,
        authType: AuthType.bearer,
        baseURL,
        name,
      }
    )
  }
}

interface PrivateRouteInfo {
  protocol?: 'http' | 'https'
  vendor: string,
  name: string,
  major: string | number,
}

export const formatPrivateRoute = ({ protocol = 'https', vendor, name, major }: PrivateRouteInfo) =>
  `${protocol}://app.io.vtex.com/${vendor}.${name}/v${major}`

```


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

[User] Show me the implementation of easy-shipping-setup/node/clients/promotion.ts from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```typescript
import {
  InstanceOptions,
  IOContext,
  JanusClient,
  RequestConfig,
} from '@vtex/api'
import { pipe } from 'ramda'
import { statusToError } from '../utils'
import { CREATE_PROMOTION_OBJECT } from '../utils/constants'

const TWO_SECONDS = 2 * 1000

const withCookieAsHeader =
  (context: IOContext) =>
  (options: InstanceOptions): InstanceOptions => ({
    ...options,
    headers: {
      Accept: 'application/vnd.vtex.pricing.v3+json',
      'Cache-Control': 'no-cache',
      'Content-Type': 'application/json',
      'X-Vtex-Use-Https': 'true',
      VtexIdclientAutCookie: context.adminUserAuthToken ?? '',
      ...(options?.headers ?? {}),
    },
    timeout: TWO_SECONDS,
  })

export default class Promotions extends JanusClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super(context, options && pipe(withCookieAsHeader(context))(options))
  }

  public async listPromotionById(promotionId: string): Promise<string> {
    return this.get(this.routes.promotionById(promotionId))
  }

  public async listAllPromotions(): Promise<string> {
    return this.get(this.routes.allPromotions)
  }

  public createOrUpdatePromotion = (
    newTotalValueFloor: number,
    promotionId: string,
    beginDateUtc: string,
    endDateUtc: string,
    isActive: boolean
  ): Promise<string> => {
    const defaultPromotion = CREATE_PROMOTION_OBJECT
    defaultPromotion.totalValueFloor = newTotalValueFloor
    defaultPromotion.idCalculatorConfiguration = promotionId
    defaultPromotion.beginDateUtc = beginDateUtc
    defaultPromotion.endDateUtc = endDateUtc
    defaultPromotion.isActive = isActive

    if (!promotionId.length) {
      const date = new Date()
      defaultPromotion.beginDateUtc = date.toISOString()

      date.setFullYear(date.getFullYear() + 3)
      defaultPromotion.endDateUtc = date.toISOString()
    }

    return this.post(this.routes.createOrUpdatePromotion, defaultPromotion)
  }

  protected get = <T>(url: string, config?: RequestConfig) =>
    this.http.get<T>(url, config).catch(statusToError) as Promise<T>

  protected post = <T>(url: string, data?: any, config?: RequestConfig) =>
    this.http.post<T>(url, data, config).catch<any>(statusToError)

  private get routes() {
    const basePVT = '/api/rnb'

    return {
      promotionById: (promotionId: string) =>
        `${basePVT}/pvt/calculatorconfiguration/${promotionId}`,
      allPromotions: `${basePVT}/pvt/benefits/calculatorconfiguration`,
      createOrUpdatePromotion: `${basePVT}/pvt/calculatorconfiguration`,
    }
  }
}

```


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

[User] Show me the implementation of easy-shipping-setup/node/clients/index.ts from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

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

import ShippingPolicies from './shipping'
import Warehouses from './warehouse'
import Docks from './dock'
import ShippingRates from './freight'
import Promotions from './promotion'

export class Clients extends IOClients {
  public get shippingPolicy() {
    return this.getOrSet('shippingPolicy', ShippingPolicies)
  }

  public get warehouse() {
    return this.getOrSet('warehouse', Warehouses)
  }

  public get dock() {
    return this.getOrSet('dock', Docks)
  }

  public get shippingRate() {
    return this.getOrSet('shippingRate', ShippingRates)
  }

  public get promotion() {
    return this.getOrSet('promotion', Promotions)
  }
}

```


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

[User] Show me the implementation of easy-shipping-setup/node/clients/warehouse.ts from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```typescript
import {
  InstanceOptions,
  IOContext,
  JanusClient,
  RequestConfig
} from '@vtex/api'
import { pipe } from 'ramda'
import { statusToError } from '../utils'
import { CREATE_WAREHOUSE_OBJECT } from '../utils/constants'

const TWO_SECONDS = 2 * 1000

const withCookieAsHeader =
  (context: IOContext) =>
  (options: InstanceOptions): InstanceOptions => ({
    ...options,
    headers: {
      VtexIdclientAutCookie: context.adminUserAuthToken ?? '',
      ...(options?.headers ?? {}),
    },
    timeout: TWO_SECONDS
  })

export default class Warehouses extends JanusClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super(context, options && pipe(withCookieAsHeader(context))(options))
  }

  public async listAllWarehouses(): Promise<string> {
    return this.get(this.routes.warehouses)
  }

  public createWarehouse = (): Promise<string> => {
    const defaultWarehouse = CREATE_WAREHOUSE_OBJECT
    return this.post(this.routes.createWarehouse, defaultWarehouse)
  }

  protected get = <T>(url: string, config?: RequestConfig) =>
    this.http.get<T>(url, config).catch(statusToError) as Promise<T>

  protected post = <T>(url: string, data?: any, config?: RequestConfig) =>
    this.http.post<T>(url, data, config).catch<any>(statusToError)

  private get routes() {
    const basePVT = '/api/logistics'

    return {
      warehouses: `${basePVT}/pvt/configuration/warehouses`,
      createWarehouse: `${basePVT}/pvt/configuration/warehouses`
    }
  }
}
```


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

[User] Show me the implementation of easy-shipping-setup/node/utils/constants.ts from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const CREATE_PROMOTION_OBJECT = {
  idCalculatorConfiguration: '',
  skusGift: {
    quantitySelectable: 1,
  },
  name: 'Free delivery',
  beginDateUtc: '',
  endDateUtc: '',
  daysAgoOfPurchases: 0,
  isActive: true,
  isFeatured: false,
  offset: 3,
  newOffset: 3,
  cumulative: true,
  nominalShippingDiscountValue: 0,
  absoluteShippingDiscountValue: 0,
  nominalDiscountValue: 0,
  maximumUnitPriceDiscount: 0,
  percentualDiscountValue: 0,
  percentualShippingDiscountValue: 100,
  percentualTax: 0,
  shippingPercentualTax: 0,
  percentualDiscountValueList1: 0,
  percentualDiscountValueList2: 0,
  nominalRewardValue: 0,
  percentualRewardValue: 0,
  orderStatusRewardValue: 'invoiced',
  maxNumberOfAffectedItems: 0,
  origin: 'Fulfillment',
  idSellerIsInclusive: true,
  categoriesAreInclusive: true,
  brandsAreInclusive: true,
  productsAreInclusive: true,
  minimumQuantityBuyTogether: 0,
  quantityToAffectBuyTogether: 0,
  enableBuyTogetherPerSku: false,
  totalValueFloor: 0,
  totalValueCeling: 0,
  totalValueMode: 'IncludeMatchedItems',
  collectionsIsInclusive: true,
  totalValuePurchase: 0,
  isSlaSelected: false,
  isFirstBuy: false,
  firstBuyIsProfileOptimistic: true,
  compareListPriceAndPrice: false,
  isDifferentListPriceAndPrice: false,
  itemMaxPrice: 0,
  itemMinPrice: 0,
  isMinMaxInstallments: false,
  minInstallment: 0,
  maxInstallment: 0,
  maxUsage: 0,
  maxUsagePerClient: 0,
  multipleUsePerClient: false,
  type: 'regular',
  applyToAllShippings: true,
  idsSalesChannel: ['1'],
}

export const CREATE_DOCK_OBJECT = {
  pickupStoreInfo: {
    isPickupStore: false,
    storeId: null,
    friendlyName: null,
    address: null,
    additionalInfo: null,
    dockId: null,
    distance: null,
    businessHours: null,
    pickupHolidays: null,
    sellerId: null,
    isThirdPartyPickup: false,
  },
  storeId: null,
  pickupInStoreInfo: {
    isActice: false,
    additionalInfo: null,
  },
  deliveryFromStoreInfo: {
    isActice: false,
    deliveryRadius: 0.0,
    deliveryFee: 0.0,
    deliveryTime: '00:00:00',
    maximumWeight: 0.0,
  },
  address: null,
  location: null,
  id: '1',
  name: 'Standard',
  priority: 0,
  dockTimeFake: '1.00:00:00',
  timeFakeOverhead: '00:00:00',
  salesChannels: ['1'],
  freightTableIds: ['1'],
  wmsEndPoint: '',
  isActive: true,
}

export const CREATE_WAREHOUSE_OBJECT = {
  id: '1',
  name: 'Standard',
  warehouseDocks: [
    {
      dockId: '1',
      time: '1.00:00:00',
      cost: 0.0,
    },
  ],
  pickupPointIds: [],
  priority: 0,
  isActive: true,
}

```


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

[User] Show me the implementation of easy-shipping-setup/node/utils/index.ts from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { AxiosError } from 'axios'
import { AuthenticationError, ForbiddenError, UserInputError } from '@vtex/api'

export function statusToError(e: any) {
  if (!e.response) {
    throw e
  }

  const { response } = e as AxiosError
  const { status } = response!

  if (status === 401) {
    throw new AuthenticationError(e)
  }

  if (status === 403) {
    throw new ForbiddenError(e)
  }

  if (status === 400) {
    throw new UserInputError(e)
  }

  throw e
}
```


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

[User] Show me the implementation of easy-shipping-setup/node/resolvers/shipping.ts from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const queries = {
  listAllShippingPolicies: (
    _: any,
    __: any,
    { clients: { shippingPolicy } }: Context
  ) => shippingPolicy.listAllShippingPolicies(),
}

export const mutations = {
  updateShippingPolicy: async (
    _: any,
    args: any,
    { clients: { shippingPolicy } }: Context
  ) => {
    const data = {
      name: args.input.name,
      shippingMethod: args.input.shippingMethod,
      weekendAndHolidays: {
        saturday: args.input.isSaturdayActive,
        sunday: args.input.isSundayActive,
        holiday: args.input.isHolidayActive,
      },
      numberOfItemsPerShipment: 1,
      maxDimension: {
        largestMeasure: args.input.largestMeasure,
        maxMeasureSum: args.input.maxMeasureSum,
      },
      isActive: args.input.isActive,
    }

    return shippingPolicy.updateShippingPolicy(args.input.id, data)
  },
}

```


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

[User] Show me the implementation of easy-shipping-setup/node/resolvers/freight.ts from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const queries = {
  listShippingRate: (_: any, { carrierId, zipCode }: any, { clients: { shippingRate } }: Context) => shippingRate.listShippingRate(carrierId, zipCode),
}

export const mutations = {
  updateShippingRate: async (_: any, args: any, { clients: { shippingRate } }: Context) => {
    const data = args.input
    return shippingRate.updateShippingRate(args.carrierId, data)
  }
}
```


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

[User] Show me the implementation of easy-shipping-setup/node/resolvers/dock.ts from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const queries = {
  listAllDocks: (_: any, __: any, { clients: { dock } }: Context) => dock.listAllDocks()
}

export const mutations = {
  createDock: async (_: any, __: any, { clients: { dock } }: Context) => {
    return dock.createDock()
  }
}
```


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

[User] Show me the implementation of easy-shipping-setup/node/resolvers/promotion.ts from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const queries = {
  listPromotionById: (_: any, { promotionId }: any, { clients: { promotion } }: Context) => promotion.listPromotionById(promotionId),
  listAllPromotions: (_: any, __: any, { clients: { promotion } }: Context) => promotion.listAllPromotions()
}

export const mutations = {
  createOrUpdatePromotion: async (_: any, args: any, { clients: { promotion } }: Context) => {
    return promotion.createOrUpdatePromotion(
      args.newTotalValueFloor,
      args.promotionId,
      args.beginDateUtc,
      args.endDateUtc,
      args.isActive
    )
  }
}
```


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

[User] Show me the implementation of easy-shipping-setup/node/resolvers/index.ts from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```typescript
import {
  queries as shippingQueries,
  mutations as shippingMutations,
} from './shipping'
import {
  queries as warehouseQueries,
  mutations as warehouseMutations,
} from './warehouse'
import { queries as dockQueries, mutations as dockMutations } from './dock'
import {
  queries as freightQueries,
  mutations as freightMutations,
} from './freight'
import {
  queries as promotionQueries,
  mutations as promotionMutations,
} from './promotion'

export const resolvers = {
  Query: {
    ...shippingQueries,
    ...warehouseQueries,
    ...dockQueries,
    ...freightQueries,
    ...promotionQueries,
  },
  Mutation: {
    ...shippingMutations,
    ...freightMutations,
    ...promotionMutations,
    ...warehouseMutations,
    ...dockMutations,
  },
}

```


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

[User] Show me the implementation of easy-shipping-setup/node/resolvers/warehouse.ts from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const queries = {
  listAllWarehouses: (_: any, __: any, { clients: { warehouse } }: Context) => warehouse.listAllWarehouses()
}

export const mutations = {
  createWarehouse: async (_: any, __: any, { clients: { warehouse } }: Context) => {
    return warehouse.createWarehouse()
  }
}
```


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

[User] Show me the implementation of easy-shipping-setup/react/typings/gql.d.ts from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.gql' {
  import { DocumentNode } from 'graphql'

  const Schema: DocumentNode

  export default Schema
}

declare module '*.graphql' {
  import { DocumentNode } from 'graphql'

  const schema: DocumentNode

  export default 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 easy-shipping-setup/react/typings/vtex.styleguide.d.ts from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.styleguide' {
  export const PageHeader
  export const Alert
  export const Modal
  export const Box
  export const Card
  export const Dropdown
  export const Spinner
  export const Table
  export const Button
  export const ButtonPlain
  export const IconWarning
  export const IconCheck
  export const Input
  export const InputCurrency
  export const InputSearch
  export const IconCaretDown
  export const IconCaretUp
  export const IconArrowDown
  export const IconArrowBack
  export const IconArrowUp
  export const IconClose
  export const IconExternalLink
  export const IconSearch
  export const IconSuccess
  export const IconCopy
  export const IconCog
  export const IconVisibilityOn
  export const Toggle
  export const Tooltip
  export const ToastConsumer
  export const ToastProvider
  export const withToast
  export const ButtonWithIcon
  export const Pagination
  export const Collapsible
  export const Textarea
  export const NumericStepper
  export const EmptyState
  export const Tab
  export const IconPlus
  export const IconEdit
  export const Tag
  export const Layout
  export const Tabs
  export const Divider
  export const PageBlock
  export const Progress
  export const InputButton
}
```


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

[User] Show me the implementation of easy-shipping-setup/react/graphql/allPromotions.graphql from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getAllPromotions {
  listAllPromotions {
    limitConfiguration {
      activesCount,
      limit
    },
    limitConfigurationMaxPrice {
      activesCount
      limit
    }
    disabledItems,
    archivedItems,
    items {
      idCalculatorConfiguration,
      name,
      isActive
    }
  }
}
```


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

[User] Show me the implementation of easy-shipping-setup/react/graphql/updateShippingRate.graphql from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation updateShippingRate(
  $carrierId: String
  $searchZipCode: String
  $input: [ShippingRateInput]
) {
  updateShippingRate(
    carrierId: $carrierId,
    searchZipCode: $searchZipCode,
    input: $input
  ) {
    zipCodeStart
    zipCodeEnd
    weightStart
    weightEnd
    absoluteMoneyCost
    pricePercent
    pricePercentByWeight
    maxVolume
    timeCost
    country
    operationType
    polygon
    minimumValueInsurance
  }
}

```


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

[User] Show me the implementation of easy-shipping-setup/react/graphql/promotion.graphql from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getPromotionById($promotionId: String!) {
  listPromotionById(promotionId: $promotionId) {
    idCalculatorConfiguration,
    name,
    description,
    beginDateUtc,
    endDateUtc,
    lastModified,
    daysAgoOfPurchases,
    isActive,
    isArchived,
    isFeatured,
    activeDaysOfWeek,
    offset,
    activateGiftsMultiplier,
    newOffset,
    cumulative,
    nominalShippingDiscountValue,
    absoluteShippingDiscountValue,
    nominalDiscountValue,
    maximumUnitPriceDiscount,
    percentualDiscountValue,
    rebatePercentualDiscountValue,
    percentualShippingDiscountValue,
    percentualTax,
    shippingPercentualTax,
    percentualDiscountValueList1,
    percentualDiscountValueList2,
    skusGift {
      quantitySelectable,
      gifts {
        id,
        name,
        quantity,
        sellers {
          id,
          name,
        }
      }
    },
    nominalRewardValue,
    percentualRewardValue,
    orderStatusRewardValue,
    maxNumberOfAffectedItems,
    maxNumberOfAffectedItemsGroupKey,
    applyToAllShippings,
    nominalTax,
    origin,
    idSellerIsInclusive,
    idsSalesChannel,
    areSalesChannelIdsExclusive,
    marketingTags,
    marketingTagsAreNotInclusive,
    paymentsMethods,
    campaigns,
    categories,
    categoriesAreInclusive,
    brands,
    brandsAreInclusive,
    products,
    productsAreInclusive,
    skus,
    skusAreInclusive,
    collections1BuyTogether,
    minimumQuantityBuyTogether,
    quantityToAffectBuyTogether,
    enableBuyTogetherPerSku,
    listSku1BuyTogether,
    listSku2BuyTogether,
    totalValueFloor,
    totalValueCeling,
    totalValueMode,
    collections,
    collectionsIsInclusive,
    restrictionsBins,
    totalValuePurchase,
    slasIds,
    isSlaSelected,
    isFirstBuy,
    firstBuyIsProfileOptimistic,
    compareListPriceAndPrice,
    isDifferentListPriceAndPrice,
    zipCodeRanges,
    itemMaxPrice,
    itemMinPrice,
    isMinMaxInstallments,
    minInstallment,
    maxInstallment,
    clusterExpressions,
    clusterOperator,
    giftListTypes,
    affiliates,
    maxUsage,
    maxUsagePerClient,
    multipleUsePerClient,
    type,
    useNewProgressiveAlgorithm
  }
}
```


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

[User] Show me the implementation of easy-shipping-setup/react/graphql/warehouse.graphql from the easy-shipping-setup VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getAllWarehouses {
  listAllWarehouses {
    id,
    name,
    warehouseDocks {
      dockId
    },
    isActive
  }
}
```