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

[User] Show me the implementation of collections/pages/pages.json from the collections VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "pages": {
    "admin-collections": {
      "path": "/admin/collections",
      "auth": true,
      "theme": "theme"
    },
    "admin-collections-collection": {
      "path": "/admin/collections/new/",
      "auth": true,
      "theme": "theme"
    },
    "admin-collections-collection-edit": {
      "path": "/admin/collections/:id/",
      "auth": true,
      "theme": "theme"
    }
  },
  "extensions": {
    "admin-collections": {
      "component": "ListPage"
    },
    "admin-collections-collection": {
      "component": "Collection"
    },
    "admin-collections-collection-edit": {
      "component": "Collection"
    }
  }
}

```


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

[User] Show me the implementation of collections/react/theme.css from the collections VTEX app.

[Assistant]
Here's the implementation:

```css
@import "./components/DatePicker/react-dates.css";
@import "./components/DatePicker/custom.css";
@import "./components/TimePicker/rc-time-picker.css";
@import "./components/TimePicker/custom.css";

body {
  background-color: #f7f9fa;
  height: 100%;
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.collections",
  "version": "0.0.0",
  "dependencies": {
    "@vtex/styleguide": "^2.0.0-rc.32",
    "debounce": "^1.1.0",
    "downshift": "^1.30.0",
    "lodash": "^4.17.5",
    "moment": "^2.21.0",
    "rc-time-picker": "^3.3.1",
    "react": "^16.2.0",
    "react-autocomplete-tags": "^1.0.13-alpha",
    "react-dates": "^16.3.6",
    "react-dom": "^16.2.0"
  }
}

```


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

[User] Show me the implementation of collections/react/ListPage.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { FormattedDate } from 'react-intl'
import { graphql, compose } from 'react-apollo'
import withNavigate from './components/withNavigate'

import SearchCollections from './graphql/SearchCollections.gql'

import Button from '@vtex/styleguide/lib/Button'
import Input from '@vtex/styleguide/lib/Input'

import Pagination from './components/Pagination/index'
import Badge from './components/Badge'
import Card from './components/Card'
import Status from './components/Status'
import Loading from './components/Loading'
import EmptyCollectionSearch
  from './components/EmptyStates/EmptyCollectionSearch'

class ListPage extends Component {
  handleChangePage = page => {
    this.props.navigate({
      to: '/admin/collections',
      query: `?q=${this.props.query.q || ''}&page=${page}`,
    })
  };

  handleChangeSearchKey = e => {
    const value = e.target.value
    this.props.navigate({
      to: '/admin/collections',
      query: `?q=${value}&page=1`,
    })
  };

  handleOpenCollection = id => {
    this.props.navigate({ to: `/admin/collections/${id}` })
  };

  handleClickNewCollection = () => {
    this.props.navigate({ to: '/admin/collections/new' })
  };

  render() {
    return (
      <div className="pv8 ph3 near-black bg-near-white w-100 h-100">
        <div className="w-90 center">
          <div
            className="flex justify-between items-center bb b--light-gray pb6"
          >
            <div className="fw7 f2">
              Collections
            </div>
            <div>
              <Button primary onClick={this.handleClickNewCollection}>
                New collection
              </Button>
            </div>
          </div>
          <div className="flex justify-between pt6 w-100 mb7 items-center">
            <div className="w-80">
              <Input
                type="search"
                placeholder="Search by collection's name or ID…"
                value={this.props.query.q}
                onChange={this.handleChangeSearchKey}
              />
            </div>
            <Pagination
              onChange={this.handleChangePage}
              currentPage={parseInt(this.props.query.page, 10) || 1}
              pages={
                this.props.data.collections &&
                  this.props.data.collections.paging
                  ? parseInt(this.props.data.collections.paging.pages, 10)
                  : Infinity
              }
            />
          </div>
          {this.props.data.loading
            ? <Card>
              <div className="flex flex-column items-center pa10">
                <Loading />
              </div>
            </Card>
            : this.props.data.collections &&
                this.props.data.collections.items.length === 0
              ? <Card><EmptyCollectionSearch /></Card>
              : <Card>
                <table className="tl pt4 w-90 center" cellSpacing="0">
                  <thead className="">
                    <tr>
                      <th
                        className="fw3 gray pb4 ttu f7 w-40-l w-30-ns mt6 pl6"
                      >
                            Name
                      </th>
                      <th className="fw3 gray pb4 ttu f7 w-20 mt6">
                            Start
                      </th>
                      <th className="fw3 gray pb4 ttu f7 w-20 mt6">
                            End
                      </th>
                      <th className="fw3 gray pb4 ttu f7 w-10 mt6">
                            Highlight
                      </th>
                      <th className="fw3 gray pb4 ttu f7 w-10 mt6">
                            Searchable
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    {this.props.data.collections &&
                          this.props.data.collections.items.length > 0 &&
                          this.props.data.collections.items.map(collection => {
                            return (
                              <tr
                                key={collection.id}
                                className="pointer hover-bg-near-white"
                                onClick={() =>
                                  this.handleOpenCollection(collection.id)}
                              >
                                <td className="fw7 pv6 bt b--light-gray pl4">
                                  <div className="flex items-center">
                                    <div>
                                      <Status type="active" />
                                    </div>
                                    <div className="pl3">
                                      {collection.name}
                                    </div>
                                  </div>
                                </td>
                                <td className="fw4 pv6 bt b--light-gray">
                                  <FormattedDate
                                    value={new Date(collection.dateFrom)}
                                    day="2-digit"
                                    month="2-digit"
                                    year="2-digit"
                                    hour="2-digit"
                                    minute="2-digit"
                                  />
                                </td>
                                <td className="fw4 pv6 bt b--light-gray">
                                  <FormattedDate
                                    value={new Date(collection.dateTo)}
                                    day="2-digit"
                                    month="2-digit"
                                    year="2-digit"
                                    hour="2-digit"
                                    minute="2-digit"
                                  />
                                </td>
                                <td className="fw4 pv6 bt b--light-gray">
                                  <Badge
                                    type={
                                      collection.highlight
                                        ? 'active'
                                        : 'inactive'
                                    }
                                  >
                                    {collection.highlight
                                      ? 'Active'
                                      : 'Inactive'}
                                  </Badge>
                                </td>
                                <td className="fw4 pv6 bt b--light-gray">
                                  <Badge
                                    type={
                                      collection.searchable
                                        ? 'active'
                                        : 'inactive'
                                    }
                                  >
                                    {collection.searchable
                                      ? 'Active'
                                      : 'Inactive'}
                                  </Badge>
                                </td>
                              </tr>
                            )
                          })}
                  </tbody>
                </table>
              </Card>}
        </div>
      </div>
    )
  }
}

ListPage.propTypes = {
  query: PropTypes.object,
  data: PropTypes.object,
  navigate: PropTypes.func.isRequired,
}

const options = {
  options: ({ query }) => ({
    variables: {
      searchKey: query.q,
      page: parseInt(query.page, 10),
      pageSize: 10,
    },
  }),
}

export default compose(graphql(SearchCollections, options), withNavigate())(
  ListPage
)

```


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

[User] Show me the implementation of collections/react/Collection.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { compose, graphql } from 'react-apollo'

import CreateCollection from './graphql/CreateCollection.gql'
import GetCollection from './graphql/GetCollection.gql'
import UpdateGroup from './graphql/UpdateGroup.gql'

import Button from '@vtex/styleguide/lib/Button'
import Config from './components/Config'
import withNavigate from './components/withNavigate'
import Alert from '@vtex/styleguide/lib/Alert'
import Loading from './components/Loading'
import Group from './components/Group'
import NewGroupButton from './components/NewGroupButton'

class Collection extends Component {
  constructor(props) {
    super(props)

    this.state = {
      currentPage: 1,
      searchQuery: props.searchQuery,
      selections: { product: {} },
      groups: this.getGroups(props),
      config: this.mapCollectionConfig(props),
    }
  }

  getGroups(props) {
    return !props.collectionData.loading && props.collectionData.collection && props.collectionData.collection.id
      ? props.collectionData.collection.groups
      : { items: [{
        name: '',
        type: 'I',
        preSale: false,
        release: false,
        brands: [],
        categories: [],
        skus: [],
      }] }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      config: this.mapCollectionConfig(nextProps),
      groups: this.getGroups(nextProps),
    })
  }

  mapCollectionConfig(props) {
    const collection = props.collectionData && !props.collectionData.loading
      ? props.collectionData.collection || {}
      : {}

    return {
      name: collection.name || '',
      dateFrom: collection.dateFrom || new Date().toISOString(),
      dateTo: collection.dateTo || new Date().toISOString(),
      highlight: collection.highlight !== undefined && collection.highlight !== null
        ? collection.highlight
        : false,
      searchable: collection.searchable !== undefined && collection.searchable !== null
        ? collection.searchable
        : false,
    }
  }

  handleChangeConfig = ({ field, value }) => {
    this.setState(prevState => ({
      config: {
        ...prevState.config,
        [field]: value,
      },
    }))
  };

  handleCancel = () => {
    this.props.navigate({ to: '/admin/collections' })
  };

  handleSave = () => {
    if (!this.props.params.id) {
      this.props
        .createCollection({
          variables: {
            ...this.state.config,
            groups: this.state.groups.items,
          },
        })
        .then(() => {
          this.props.navigate({ to: '/admin/collections/' })
        })
    } else {
      // TODO update
      this.props.navigate({ to: '/admin/collections' })
    }
  };

  hasNoGroup = () => {
    return !(this.props.collectionData && this.props.collectionData.collection && this.props.collectionData.collection.groups && this.props.collectionData.collection.groups.items.length > 0)
  }

  handleChangeGroup = (groupIndex, data) => {
    this.setState(prevState => ({
      groups: {
        ...prevState.groups,
        items: prevState.groups.items.map((group, index) => {
          if (index === groupIndex) {
            return data
          }
          return group
        }),
      },
    }), () => {
      const group = this.state.groups.items.find((group, index) => {
        if (index === groupIndex) return group
      })

      if (!group || !this.props.params.id) {
        console.log('Opa')
        return
      }

      this.props
        .updateGroup({
          variables: {
            collectionId: this.props.params.id,
            ...group,
          },
        })
        .then(() => {
          this.props.navigate({ to: '/admin/collections' })
        })
    })
  }

  render() {
    return (
      <div className="pv8 ph3 near-black bg-near-white w-100 h-100">
        <div className="w-90 center">
          <div
            className="flex justify-between items-center bb b--light-gray pb6 mb6"
          >
            <div className="fw7 f2">
              Collections
            </div>
            <div>
              <div className="pr5 dib">
                <Button onClick={this.handleCancel}>
                  cancel
                </Button>
              </div>
              <Button primary onClick={this.handleSave}>
                save collection
              </Button>
            </div>
          </div>

          <div className="flex justify-between">
            <div className="w-25">
              {this.props.collectionData.loading
                ? null
                : <Config
                  collection={this.state.config}
                  onChange={this.handleChangeConfig}
                />}
            </div>
            <div className="w-75 ml5 mb5">
              {this.props.collectionData.loading
                ? <div className="flex flex-column items-center pa10">
                  <Loading />
                </div>
                : <div>
                  {this.hasNoGroup() && <div className="mb5 ba b--blue br2">
                    <Alert>
                      Products are added to a collection by groups of conditions.
                    </Alert>
                  </div>}
                  {this.state.groups.items.map(
                    (group, index) => (
                      <Group
                        key={group.id || index}
                        index={index}
                        data={group}
                        collectionId={
                          this.props.collectionData.collection && this.props.collectionData.collection.id || null
                        }
                        onChange={this.handleChangeGroup}
                      />
                    )
                  )}
                  <NewGroupButton onClick={() => {}} />
                </div>}
            </div>
          </div>
        </div>
      </div>
    )
  }
}

Collection.propTypes = {
  searchQuery: PropTypes.string,
  collectionData: PropTypes.object,
  products: PropTypes.object,
  params: PropTypes.object.isRequired,
  navigate: PropTypes.func.isRequired,
  createCollection: PropTypes.func.isRequired,
}

const CollectionContainer = compose(
  graphql(GetCollection, {
    name: 'collectionData',
    options({ params }) {
      return {
        errorPolicy: params.id ? 'all' : 'none',
        variables: {
          id: parseInt(params.id, 10),
          page: 1,
          pageSize: 10,
        },
      }
    },
  }),
  graphql(CreateCollection, { name: 'createCollection' }),
  graphql(UpdateGroup, { name: 'updateGroup' }),
  withNavigate()
)(Collection)

CollectionContainer.defaultProps = {
  collectionFrom: 0,
  collectionTo: 9,
  searchQuery: '',
  queryFrom: 0,
  queryTo: 9,
}

export default CollectionContainer

```


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

[User] Show me the implementation of collections/graphql/types/Groups.graphql from the collections VTEX app.

[Assistant]
Here's the implementation:

```graphql
type GroupsList {
  paging: Paging!,
  items: [Group]!
}

type Group {
  id: ID
  collectionId: Int
  name: String
  type: String
  preSale: Boolean
  release: Boolean
  brands: [Int]
  categories: [Int]
  skus: [Int]
}

input GroupInput {
  collectionId: Int,
  name: String
  type: String
  preSale: Boolean
  release: Boolean
  brands: [Int]
  categories: [Int]
  skus: [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 collections/graphql/types/Paging.graphql from the collections VTEX app.

[Assistant]
Here's the implementation:

```graphql
type Paging {
  page: Int
  perPage: Int
  total: Int
  pages: Int
  _from: Int
  _to: 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 collections/graphql/types/ProductResult.graphql from the collections VTEX app.

[Assistant]
Here's the implementation:

```graphql
type ProductResult {
  paging: Paging
  items: [Product]
}

```


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

[User] Show me the implementation of collections/graphql/types/Contains.graphql from the collections VTEX app.

[Assistant]
Here's the implementation:

```graphql
type ContainsResult {
  skus: [SkuContains]
}

type SkuContains {
  id: Int
  contains: Boolean
}

input SkuContainsInput {
  id: 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 collections/graphql/types/Product.graphql from the collections VTEX app.

[Assistant]
Here's the implementation:

```graphql
type Product {
  brand: String
  categoryId: ID
  categories: [String]
  categoriesIds: [String]
  clusterHighlights: [ClusterHighlight]
  description: String
  items: [SKU]
  link: String
  linkText: String
  productId: ID
  productName: String
  properties: [Property]
  propertyGroups: [PropertyGroup]
  productReference: String
  recommendations: Recommendation
}

type ClusterHighlight {
  id: ID
  name: String
}

type Seller {
  sellerId: ID
  sellerName: String
  addToCartLink: String
  sellerDefault: Boolean
  commertialOffer: Offer
}

type Recommendation {
  buy: [Product]
  view: [Product]
}

type SKU {
  itemId: ID
  name: String
  nameComplete: String
  complementName: String
  ean: String
  referenceId: [Reference]
  measurementUnit: String
  unitMultiplier: Float
  images: [Image]
  sellers: [Seller]
  variations: [Property]
  attachments: [Attachment]
}

type Attachment {
  id: ID
  name: String
  required: Boolean
  domainValues: [DomainValues]
}

type DomainValues {
  FieldName: String
  MaxCaracters: String
  DomainValues: String
}

type Offer {
  Installments: [Installment]
  Price: Float
  ListPrice: Float
  PriceWithoutDiscount: Float
  RewardValue: Float
  PriceValidUntil: String
  AvailableQuantity: Float
  Tax: Float
  CacheVersionUsedToCallCheckout: String
  DeliverySlaSamples: [DeliverySlaSamples]
}

type DeliverySlaSamples {
  DeliverySlaPerTypes: [DeliverySlaPerTypes]
  Region: Region
}

type DeliverySlaPerTypes {
  TypeName: String
  Price: Float
  EstimatedTimeSpanToDelivery: String
}

type Region {
  IsPersisted: Boolean
  IsRemoved: Boolean
  Id: ID
  Name: String
  CountryCode: String
  ZipCode: String
  CultureInfoName: String
}

type Image {
  imageId: ID
  imageLabel: String
  imageTag: String
  imageUrl: String
  imageText: String
}

type Property {
  name: String
  values: [String]
}

type PropertyGroup {
  name: String
  properties: [String]
}

type Installment {
  Value: Float
  InterestRate: Float
  TotalValuePlusInterestRate: Float
  NumberOfInstallments: Int
  PaymentSystemName: String
  PaymentSystemGroupName: String
  Name: String
}

type Reference {
  Key: String
  Value: 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 collections/graphql/types/Collection.graphql from the collections VTEX app.

[Assistant]
Here's the implementation:

```graphql
type CollectionsList {
  paging: Paging!
  items: [Collection]!
}

type Collection {
  id: ID
  name: String
  searchable: Boolean
  highlight: Boolean
  dateFrom: String
  dateTo: String
  groups: GroupsList
}

```


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

[User] Show me the implementation of collections/node/typings/colossus.d.ts from the collections VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'colossus' {
  import {Context as KoaContext} from 'koa'

  export interface IOContext {
    account: string
    workspace: string
    authToken: string
    params: {
      [param: string]: string
    }
    region: string
    route: string
  }

  export interface ColossusContext extends KoaContext {
    vtex: IOContext
  }
}

```


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

[User] Show me the implementation of collections/node/graphql/axios.ts from the collections VTEX app.

[Assistant]
Here's the implementation:

```typescript
import axios from 'axios'

class ResolverError extends Error {
  public statusCode: number

  constructor (message: string, statusCode: number = 500) {
    super(message)
    this.name = 'ResolverError'
    this.statusCode = statusCode
  }
}

const instance = axios.create()

instance.interceptors.response.use(
  response => response,
  error => {
    if (!error.response) {
      throw error
    }

    const {config: { method, url }, status, data} = error.response
    const message = JSON.stringify({ method, status, url, data }, null, 2)
    throw new ResolverError(message, status)
  },
)

export default instance

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "axios": "^0.17.1",
    "lodash": "^4.17.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 collections/node/graphql/index.ts from the collections VTEX app.

[Assistant]
Here's the implementation:

```typescript
import {
  Query as CollectionsQuery,
  Mutation as CollectionsMutation,
} from './collections';
import { Query as CatalogQuery } from './catalog';

export const resolvers = {
  Query: {
    ...CollectionsQuery,
    ...CatalogQuery,
  },
  Mutation: {
    ...CollectionsMutation,
  },
};

```


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

[User] Show me the implementation of collections/node/graphql/catalog/index.ts from the collections VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { ColossusContext } from 'colossus';
import {
  getCategoryByName,
  getBrandByName,
  getProducts,
  getProductsBySku,
  getBrand,
  getCategory,
} from './api';

export const Query = {
  categoriesAutocomplete: async function(
    _,
    data,
    { vtex: ioContext }: ColossusContext
  ) {
    const categories = await getCategoryByName({
      ioContext,
      name: data.name || '',
    });

    return categories;
  },

  brandsAutocomplete: async function(
    _,
    data,
    { vtex: ioContext }: ColossusContext
  ) {
    const brands = await getBrandByName({
      ioContext,
      name: data.name || '',
    });

    return brands;
  },

  getCategories: async (_, data, { vtex: ioContext }: ColossusContext) => {
    const resolvedCategories = await Promise.all(
      data.ids.map(id => getCategory({
        ioContext,
        id,
      }))
    );

    return resolvedCategories;
  },

  getBrands: async (
    _,
    data,
    { vtex: ioContext, request: { headers: { cookie } } }: ColossusContext
  ) => {
    try {
      const resolvedBrands = await Promise.all(
        data.ids.map(id => getBrand({
          ioContext,
          cookie,
          id,
        }))
      );

      return resolvedBrands;
    } catch (e) {
      console.log(e);
    }
  },

  getProductsBySku: async (_, data, { vtex: ioContext }: ColossusContext) => {
    const response = await getProductsBySku({
      ioContext,
      ids: data.ids,
      from: data.from,
      to: data.to,
    });

    return response;
  },

  getProducts: async (_, data, { vtex: ioContext }: ColossusContext) => {
    const response = await getProducts({
      ioContext,
      query: data.query,
      category: data.category,
      specificationFilters: data.specificationFilters,
      priceRange: data.priceRange,
      collection: data.collection,
      salesChannel: data.salesChannel,
      orderBy: data.orderBy,
      from: data.from,
      to: data.to,
    });

    return response;
  },
};

```


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

[User] Show me the implementation of collections/node/graphql/catalog/api.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { parse as parseCookie } from 'cookie'
import axios from '../axios'

export function getCategoryByName({ ioContext, name }) {
  return axios({
    url: `http://${ioContext.account}.vtexcommercebeta.com.br/api/catalog_system/pub/category/list?filter=${encodeURIComponent(name)}&parent=`,
    method: 'get',
    headers: {
      Authorization: ioContext.authToken,
    },
  }).then(({ data }) => data)
}

export function getCategory({ ioContext, id }) {
  return axios({
    url: `http://${ioContext.account}.vtexcommercestable.com.br/api/catalog_system/pub/category/${id}`,
    method: 'get',
    headers: {
      Authorization: ioContext.authToken,
    },
  }).then(({ data }) => data)
}

export function getBrandByName({ ioContext, name }) {
  return axios({
    url: `http://${ioContext.account}.vtexcommercebeta.com.br/api/catalog_system/pvt/brand/list/${encodeURIComponent(name)}`,
    method: 'get',
    headers: {
      Authorization: ioContext.authToken,
    },
  }).then(({ data }) => data)
}

export function getBrand({ ioContext, cookie, id }) {
  const parsedCookie = parseCookie(cookie)

  return axios({
    url: `http://${ioContext.account}.vtexcommercebeta.com.br/api/catalog_system/pvt/brand/${id}`,
    method: 'get',
    headers: {
      Authorization: ioContext.authToken,
      'Proxy-Authorization': ioContext.authToken,
      VtexIdclientAutCookie: parsedCookie.VtexIdclientAutCookie,
    },
  }).then(({ data }) => data)
}

export function getProductsBySku({ ioContext, ids, from, to }) {
  const idsQuery = ids
    ? ids.reduce((acc, id) => `${acc ? '&' : ''}fq=skuId:${id}`, '')
    : ''
  const fromQuery = from > -1 ? `&_from=${from}` : ''
  const toQuery = to > -1 ? `&_to=${to}` : ''

  return axios({
    url: `http://${ioContext.account}.vtexcommercestable.com.br/api/catalog_system/pub/products/search?${idsQuery}${fromQuery}${toQuery}`,
    method: 'get',
    headers: {
      Authorization: ioContext.authToken,
    },
  }).then(response => {
    return {
      items: response.data,
      paging: getPaging(from, to, response),
    }
  })
}

export function getProducts(
  {
    ioContext,
    query = '',
    category = '',
    specificationFilters,
    priceRange = '',
    collection = '',
    salesChannel = '',
    orderBy = '',
    from = 0,
    to = 9,
  }
) {
  const categoryQuery = category ? `&fq=C:/${category}/` : ''
  const specificationFiltersQuery = specificationFilters
    ? `&${specificationFilters}`
    : ''
  const priceRangeQuery = priceRange ? `&fq=P:[${priceRange}]` : ''
  const collectionQuery = collection
    ? `&fq=productClusterIds:${collection}`
    : ''
  const salesChannelQuery = salesChannel
    ? `&fq=isAvailablePerSalesChannel_${salesChannel}:1`
    : ''
  const orderByQuery = orderBy ? `&O=${orderBy}` : ''
  const fromQuery = from > -1 ? `&_from=${from}` : ''
  const toQuery = to > -1 ? `&_to=${to}` : ''

  return axios({
    url: `http://${ioContext.account}.vtexcommercestable.com.br/api/catalog_system/pub/products/search/${encodeURIComponent(query)}?${categoryQuery}${specificationFiltersQuery}${priceRangeQuery}${collectionQuery}${salesChannelQuery}${orderByQuery}${fromQuery}${toQuery}`,
    method: 'get',
    headers: {
      Authorization: ioContext.authToken,
      'Proxy-Authorization': ioContext.authToken,
    },
  }).then(response => {
    return {
      items: response.data,
      paging: getPaging(from, to, response),
    }
  })
}

function getPaging(from, to, response) {
  const resources = response.headers.resources.split('/')
  const total = resources[1]
  const perPage = to - from + 1

  return {
    total,
    perPage,
    pages: Math.ceil(total / perPage),
    page: Math.ceil(from / perPage) + 1,
    _from: from,
    _to: to,
  }
}

```


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

[User] Show me the implementation of collections/node/graphql/collections/index.ts from the collections VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { ColossusContext } from 'colossus'
import {
  getCollection,
  getGroups,
  getCollections,
  collectionContains,
  createCollection,
  createGroup,
  updateGroup,
} from './api'

export const Query = {
  collection: async function(_, data, { vtex: ioContext }: ColossusContext) {
    if (!data.id) return {}

    const collection = await getCollection({ ioContext, id: data.id })
    const groups = await getGroups({
      ioContext,
      collectionId: data.id,
      page: data.page,
      pageSize: data.pageSize,
    })

    return {
      ...collection,
      groups,
    }
  },

  collections: async function(
    _,
    info,
    { vtex: ioContext }: ColossusContext,
    query
  ) {
    let collections
    try {
      collections = await getCollections({
        ioContext,
        searchKey: query.variableValues.searchKey,
        page: query.variableValues.page,
        pageSize: query.variableValues.pageSize,
      })
    } catch (e) {
      console.log({
        statusText: e.response.statusText,
        headers: e.response.headers,
        request: {
          method: e.request.method,
          path: e.request.path,
        },
      })
      return e
    }

    return collections
  },

  collectionContains: async function(
    _,
    data,
    { vtex: ioContext }: ColossusContext
  ) {
    if (!data.collectionId) return {}

    const result = await collectionContains({
      ioContext,
      collectionId: data.collectionId,
      skus: data.skus,
    })

    return result
  },
}

export const Mutation = {
  createCollection: async function(
    _,
    data,
    { vtex: ioContext }: ColossusContext
  ) {
    const collectionId = await createCollection({
      ioContext,
      name: data.name,
      searchable: data.searchable,
      highlight: data.searchable,
      dateFrom: data.dateFrom,
      dateTo: data.dateTo,
    })

    await Promise.all(
      data.groups.map(group => createGroup({
        ioContext,
        collectionId: collectionId,
        name: group.name,
        type: group.type,
        preSale: group.preSale,
        release: group.release,
        brands: group.brands,
        categories: group.categories,
        skus: group.skus,
      }))
    )

    return collectionId
  },

  updateGroup: async function(_, data, { vtex: ioContext }: ColossusContext) {
    const groupId = await updateGroup({
      ioContext,
      collectionId: data.collectionId,
      name: data.name,
      type: data.type,
      preSale: data.preSale,
      release: data.release,
      brands: data.brands,
      categories: data.categories,
      skus: data.skus,
    })

    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 collections/node/graphql/collections/api.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import axios from '../axios'

export function getCollection({ ioContext, id }) {
  return axios({
    url: `http://${ioContext.account}.vtexcommercebeta.com.br/api/catalog_system/pvt/collection/${id}`,
    method: 'get',
    headers: {
      Authorization: `${ioContext.authToken}`,
    },
  }).then(({ data }) => data)
}

export function getGroups({ ioContext, collectionId, page, pageSize }) {
  return axios({
    url: `http://${ioContext.account}.vtexcommercebeta.com.br/api/catalog_system/pvt/collection/${collectionId}/groups`,
    method: 'get',
    headers: {
      Authorization: `${ioContext.authToken}`,
    },
    params: {
      page: page == null ? 1 : page,
      pageSize: pageSize == null ? 20 : pageSize,
    },
  }).then(({ data }) => data)
}

export function getCollections({ ioContext, searchKey = '', page, pageSize }) {
  return axios({
    url: `http://${ioContext.account}.vtexcommercebeta.com.br/api/catalog_system/pvt/collection/search/${searchKey}`,
    method: 'get',
    headers: {
      Authorization: ioContext.authToken,
    },
    params: {
      page: page == null ? 1 : page,
      pageSize: pageSize == null ? 20 : pageSize,
    },
  }).then(({ data }) => data)
}

export function createCollection(
  { ioContext, name, searchable, highlight, dateFrom, dateTo }
) {
  return axios({
    url: `http://${ioContext.account}.vtexcommercebeta.com.br/api/catalog_system/pvt/collection/`,
    method: 'post',
    headers: {
      Authorization: ioContext.authToken,
    },
    data: {
      name,
      searchable,
      highlight,
      dateFrom,
      dateTo,
    },
  }).then(({ data }) => data)
}

export function createGroup(
  {
    ioContext,
    collectionId,
    name,
    type,
    preSale,
    release,
    brands,
    categories,
    skus,
  }
) {
  return axios({
    url: `http://${ioContext.account}.vtexcommercebeta.com.br/api/catalog_system/pvt/collection/group`,
    method: 'post',
    headers: {
      Authorization: ioContext.authToken,
    },
    data: {
      collectionId,
      name,
      type,
      preSale,
      release,
      brands,
      categories,
      skus,
    },
  }).then(({ data }) => data)
}

export function updateGroup(
  {
    ioContext,
    collectionId,
    name,
    type,
    preSale,
    release,
    brands,
    categories,
    skus,
  }
) {
  return axios({
    url: `http://${ioContext.account}.vtexcommercebeta.com.br/api/catalog_system/pvt/collection/group`,
    method: 'put',
    headers: {
      Authorization: ioContext.authToken,
    },
    data: {
      collectionId,
      name,
      type,
      preSale,
      release,
      brands,
      categories,
      skus,
    },
  }).then(({ data }) => data)
}

export function collectionContains({ ioContext, collectionId, skus }) {
  return axios({
    url: `http://${ioContext.account}.vtexcommercebeta.com.br/api/catalog_system/pvt/collection/${collectionId}/contains`,
    method: 'post',
    headers: {
      Authorization: ioContext.authToken,
    },
    data: {
      skus,
    },
  }).then(({ data }) => 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 collections/react/locales/es-AR.json from the collections VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "getting-started.greeting": "Bienvenido al Primero Tutorial del VTEX Render!",
  "getting-started.description": "Ese es un tutorial interactivo. La idea es descubrir las features del Render editando una app.",
  "getting-started.first-steps-header": "Primeros pasos",
  "getting-started.toolbelt": "Instale el toolbelt, nuestra herramienta de línea de comando para desarrollar la plataforma VTEX",
  "getting-started.workspace-creation": "Ahora vamos hacer login en su cuenta y crear un workspace, que es su personal area de trabajo.",
  "getting-started.workspace-description": "Un workspace sirve para que vos pueda hacer cambios aislado en su tienda. Nada que haga en un workspaces publicado hasta que promova su workspace. Mientra tanto, no se preocupe con eso.",
  "getting-started.clone": "Ahora, haga un clon del repositorio de esa app:",
  "getting-started.synchronize": "Por fin, para alterar una app y mirar sus cambios necesitamos sincronizar los archivos locales con la plataforma. Así, todos nuestras ediciones quedarán reflejadas en tiempo real.",
  "getting-started.watch": "Para hacer esto, instalamos el builder-hub e utilizamos el comando <i>link</i>",
  "getting-started.online": "Cool! Después de unos segundos, los archivos ya están sincronizados y puede hacer clic en la URL que aparece en su terminal para ver el su workspace en línea!",
  "getting-started.edit-file": "Ahora, abra su editor de texto preferido para editar el archivo {fileName}",
  "getting-started.change-css": "Busque el seguinte trecho de código y cambie la classe “dn” para “green”:",
  "getting-started.save": "Ahora grabe su archivo. Si todo estuviera correcto, el cambio se exhibirá acá abajo!",
  "getting-started.congrats": "Que bueno! Su primer modificación en una app!",
  "getting-started.mobile": "(Ei 📱! Es mejor acceder a este tutorial directo de su entorno de desarrollo, pero bienvenido. 😊)"
}

```


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

[User] Show me the implementation of collections/react/locales/pt-BR.json from the collections VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "getting-started.greeting": "Bem-vindo ao Primeiro Tutorial do VTEX Render!",
  "getting-started.description": "Esse é um tutorial interativo. A idéia é você descobrir as funcionalidades do Render editando uma app.",
  "getting-started.first-steps-header": "Primeiros passos",
  "getting-started.toolbelt": "Primeiro, instale o <strong>toolbelt</strong>, nossa ferramenta de linha de comando para desenvolver na plataforma VTEX:",
  "getting-started.workspace-creation": "Agora vamos fazer <i>login</i> na sua conta e criar um <strong>workspace</strong>, que é a sua área de trabalho pessoal.",
  "getting-started.workspace-description": "Um workspace serve para que você possa fazer mudanças isoladas na sua loja. Nada que você faz em um workspace é publicado até que você <strong>promova</strong> seu workspace. Por enquanto, não se preocupe com isso.",
  "getting-started.clone": "Agora, clone o repositório dessa app:",
  "getting-started.synchronize": "Finalmente, para podermos alterar uma app e ver suas mudanças precisamos sincronizar os arquivos locais com a plataforma. Assim, todas as nossas edições serão refletidas em tempo real!",
  "getting-started.watch": "Pra fazer isso, vamos instalar o builder-hub e usar o comando <i>link</i>",
  "getting-started.online": "Legal! Após alguns segundos, seus arquivos já estão sendo sincronizados e você pode clicar na URL que apareceu no seu terminal para ver o <i>seu workspace online!</i>",
  "getting-started.edit-file": "Agora, abra seu editor de texto preferido para editar o arquivo {fileName}.",
  "getting-started.change-css": "Procure o seguinte trecho de código e troque a classe 'dn' por 'green':",
  "getting-started.save": "Agora <strong>salve</strong> o arquivo. Se tudo der certo, a mudança vai aparecer aqui embaixo!",
  "getting-started.congrats": "Woohoo! Você fez sua primeira mudança numa app!",
  "getting-started.mobile": "(Ei 📱! É melhor acessar esse tutorial direto do seu ambiente de desenvolvimento, mas bem-vindo mesmo assim. 😊)"
}

```


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

[User] Show me the implementation of collections/react/locales/en-US.json from the collections VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "getting-started.greeting": "Bem-vindo ao Primeiro Tutorial do VTEX Render!",
  "getting-started.description": "Esse é um tutorial interativo. A idéia é você descobrir as funcionalidades do Render editando uma app.",
  "getting-started.first-steps-header": "Primeiros passos",
  "getting-started.toolbelt": "Primeiro, instale o <strong>toolbelt</strong>, nossa ferramenta de linha de comando para desenvolver na plataforma VTEX:",
  "getting-started.workspace-creation": "Agora vamos fazer <i>login</i> na sua conta e criar um <strong>workspace</strong>, que é a sua área de trabalho pessoal.",
  "getting-started.workspace-description": "Um workspace serve para que você possa fazer mudanças isoladas na sua loja. Nada que você faz em um workspace é publicado até que você <strong>promova</strong> seu workspace. Por enquanto, não se preocupe com isso.",
  "getting-started.clone": "Agora, clone o repositório dessa app:",
  "getting-started.synchronize": "Finalmente, para podermos alterar uma app e ver suas mudanças precisamos sincronizar os arquivos locais com a plataforma. Assim, todas as nossas edições serão refletidas em tempo real!",
  "getting-started.watch": "Pra fazer isso, vamos usar o comando <i>link</i>",
  "getting-started.online": "Legal! Após alguns segundos, seus arquivos já estão sendo sincronizados e você pode clicar na URL que apareceu no seu terminal para ver o <i>seu workspace online!</i>",
  "getting-started.edit-file": "Agora, abra seu editor de texto preferido para editar o arquivo {fileName}.",
  "getting-started.change-css": "Procure o seguinte trecho de código e troque a classe 'dn' por 'green':",
  "getting-started.save": "Agora <strong>salve</strong> o arquivo. Se tudo der certo, a mudança vai aparecer aqui embaixo!",
  "getting-started.congrats": "Woohoo! Você fez sua primeira mudança numa app!",
  "getting-started.mobile": "(Ei 📱! É melhor acessar esse tutorial direto do seu ambiente de desenvolvimento, mas bem-vindo mesmo assim. 😊)"
}

```


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

[User] Show me the implementation of collections/react/components/Badge.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

const types = {
  active: 'bg-washed-blue blue',
  inactive: 'bg-near-white mid-gray',
}

class Badge extends PureComponent {
  render() {
    return (
      <div className={`br-pill ${types[this.props.type]} f6 pv2 ph3 dib fw5`}>
        {this.props.children}
      </div>
    )
  }
}

Badge.propTypes = {
  type: 'active',
}

Badge.propTypes = {
  children: PropTypes.node.isRequired,
  type: PropTypes.oneOf(['active', 'inactive']),
}

export default Badge

```


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

[User] Show me the implementation of collections/react/components/Config.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import 'react-dates/initialize'
import moment from 'moment'

import Toggle from './Toggle/index'
import DatePicker from './DatePicker/index'
import TimePicker from './TimePicker/index'
import Card from './Card'

class Config extends Component {
  handleChangeName = e => {
    this.props.onChange({ field: 'name', value: e.target.value })
  };

  handleChangeDateFrom = date => {
    const dateFrom = moment(new Date(date))
    const timeFrom = moment(new Date(this.props.collection.dateFrom))

    const newDate = dateFrom
      .hour(timeFrom.hour())
      .minute(timeFrom.minute())
      .toDate()
      .toISOString()

    this.props.onChange({ field: 'dateFrom', value: newDate })
  };

  handleChangeDateTo = date => {
    const dateTo = moment(new Date(date))
    const timeTo = moment(new Date(this.props.collection.dateTo))

    const newDate = dateTo
      .hour(timeTo.hour())
      .minute(timeTo.minute())
      .toDate()
      .toISOString()

    this.props.onChange({ field: 'dateTo', value: newDate })
  };

  handleChangeTimeFrom = time => {
    const dateFrom = moment(new Date(this.props.collection.dateFrom))
    const timeFrom = moment(new Date(time))

    const newDate = dateFrom
      .hour(timeFrom.hour())
      .minute(timeFrom.minute())
      .toDate()
      .toISOString()

    this.props.onChange({ field: 'dateFrom', value: newDate })
  };

  handleChangeTimeTo = time => {
    const dateTo = moment(new Date(this.props.collection.dateTo))
    const timeTo = moment(new Date(time))

    const newDate = dateTo
      .hour(timeTo.hour())
      .minute(timeTo.minute())
      .toDate()
      .toISOString()

    this.props.onChange({ field: 'dateTo', value: newDate })
  };

  handleChangeActive = () => {
    this.props.onChange({
      field: 'active',
      value: !this.props.collection.active,
    })
  };

  handleChangeHighlight = () => {
    this.props.onChange({
      field: 'highlight',
      value: !this.props.collection.highlight,
    })
  };

  handleChangeSearchable = () => {
    this.props.onChange({
      field: 'searchable',
      value: !this.props.collection.searchable,
    })
  };

  render() {
    const collection = this.props.collection || {}

    return (
      <Card>
        <div className="center">
          <div className="mb6">
            <div>
              <input
                className="w-auto bn f3 fw7 near-black"
                type="text"
                placeholder="Name your collection"
                defaultValue={collection.name}
                style={{ width: '10em' }}
                onChange={this.handleChangeName}
              />
            </div>
          </div>
          <div>
            <div>
              <span className="f6 fw7 near-black">Start</span>
              <div className="pt2 pb3">
                <DatePicker
                  value={collection.dateFrom}
                  onChange={this.handleChangeDateFrom}
                />
                <TimePicker
                  value={collection.dateFrom}
                  onChange={this.handleChangeTimeFrom}
                />
              </div>
              <div>
                <span className="f6 fw7 near-black pr5 ">End</span>
                <div className="pt2">
                  <DatePicker
                    value={collection.dateTo}
                    onChange={this.handleChangeDateTo}
                  />
                  <TimePicker
                    value={collection.dateTo}
                    onChange={this.handleChangeTimeTo}
                  />
                </div>
              </div>
            </div>
            <div className="flex pt6 pb4">
              <Toggle
                secondary
                id="active-toggle"
                onClick={this.handleChangeActive}
                checked={collection.active}
              />
              <span className="pl3 f6">Active</span>
            </div>
            <div className="flex dib pb4">
              <Toggle
                secondary
                id="hightlight-toggle"
                onClick={this.handleChangeHighlight}
                checked={collection.highlight}
              />
              <span className="pl3 f6 pr6">Highlight</span>
            </div>
            <div className="flex dib">
              <Toggle
                secondary
                id="searchable-toggle"
                onClick={this.handleChangeSearchable}
                checked={collection.searchable}
              />
              <span className="pl3 f6">Searchable</span>
            </div>
          </div>
        </div>
      </Card>
    )
  }
}

Config.propTypes = {
  collection: PropTypes.object.isRequired,
  onChange: PropTypes.func.isRequired,
}

export default Config

```


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

[User] Show me the implementation of collections/react/components/BaseGroup.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Card from './Card'
import Button from '@vtex/styleguide/lib/Button'

class BaseGroup extends Component {
  render() {
    return (
      <Card>
        <div className="w-100 center">
          <div>
            <div className="f3 fw7 w-50">
              <input
                className="w-auto bn f3 fw7 near-black"
                type="text"
                placeholder="Name this group"
                value={this.props.name}
                style={{ width: '10em' }}
                onChange={this.props.onChangeName}
              />
            </div>
          </div>
          {this.props.children}
          <div className="pt6 nl5">
            <div>
              <Button onClick={this.props.onSave}>Save group</Button>
              <Button onClick={this.props.onCancel}>Cancel</Button>
            </div>
          </div>
        </div>
      </Card>
    )
  }
}

BaseGroup.propTypes = {
  name: PropTypes.string,
  children: PropTypes.node.isRequired,
  onChangeName: PropTypes.func.isRequired,
  onSave: PropTypes.func.isRequired,
  onCancel: PropTypes.func.isRequired,
}

export default BaseGroup

```


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

[User] Show me the implementation of collections/react/components/Status.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

const types = {
  active: 'bg-green',
  inactive: 'bg-silver',
  error: 'bg-red',
}

class Status extends PureComponent {
  render() {
    return <div className={`${types[this.props.type]} dib pa2 br-100`} />
  }
}

Status.defaultProps = {
  type: 'active',
}

Status.propTypes = {
  type: PropTypes.oneOf(['active', 'inactive', 'error']),
}

export default Status

```


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

[User] Show me the implementation of collections/react/components/Card.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'

class Card extends PureComponent {
  render() {
    return (
      <div
        className="w-100 bg-white pa6 br2"
        style={{ boxShadow: '0 3px 9px 0 rgba(61, 62, 64, 0.2)' }}
      >
        {this.props.children}
      </div>
    )
  }
}

Card.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Card

```


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

[User] Show me the implementation of collections/react/components/withNavigate.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'

export default function withNavigate() {
  return WrappedComponent => {
    class WithNavigateWrapper extends Component {
      render() {
        return (
          <WrappedComponent {...this.props} navigate={this.context.navigate} />
        )
      }
    }

    WithNavigateWrapper.contextTypes = {
      navigate: PropTypes.func,
    }

    return WithNavigateWrapper
  }
}

```


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

[User] Show me the implementation of collections/react/graphql/CreateCollection.gql from the collections VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation CreateCollection(
  $name: String
  $searchable: Boolean
  $highlight: Boolean
  $dateFrom: String
  $dateTo: String
  $groups: [GroupInput]
) {
  createCollection(
    name: $name
    searchable: $searchable
    highlight: $highlight
    dateFrom: $dateFrom
    dateTo: $dateTo
    groups: $groups
  )
}

```


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

[User] Show me the implementation of collections/react/graphql/UpdateGroup.gql from the collections VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation UpdateGroup(
  $collectionId: Int
  $name: String
  $type: String
  $preSale: Boolean
  $release: Boolean
  $brands: [Int]
  $categories: [Int]
  $skus: [Int]
) {
  updateGroup(
    collectionId: $collectionId
    name: $name
    type: $type
    preSale: $preSale
    release: $release
    brands: $brands
    categories: $categories
    skus: $skus
  )
}

```


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

[User] Show me the implementation of collections/react/graphql/GetCollection.gql from the collections VTEX app.

[Assistant]
Here's the implementation:

```graphql
query Collection(
  $id: Int,
  $page: Int,
  $pageSize: Int,
) {
  collection(
    id: $id,
    page: $page,
    pageSize: $pageSize,
  ) {
    id
    name
    searchable
    highlight
    dateFrom
    dateTo
    groups {
      paging {
        page
        perPage
        total
        pages
      }
      items {
        id
        name
        type
        preSale
        release
        brands
        categories
        skus
      }
    }
  }
}

```


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

[User] Show me the implementation of collections/react/graphql/SearchCollections.gql from the collections VTEX app.

[Assistant]
Here's the implementation:

```graphql
query Collections(
  $searchKey: String
  $page: Int
  $pageSize: Int
) {
  collections(
    searchKey: $searchKey
    page: $page
    pageSize: $pageSize
  ) {
    paging {
      page
      perPage
      total
      pages
    }
    items {
      id,
      name,
      searchable,
      highlight,
      dateFrom,
      dateTo,
    }
  }
}

```


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

[User] Show me the implementation of collections/react/components/Pagination/IconArrowLeft.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import config from 'vtex-tachyons/config.json'

class IconArrowLeft extends Component {
  render() {
    return (
      <svg
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        x="0px"
        y="0px"
        viewBox="0 0 16 16"
        xmlSpace="preserve"
        width="16"
        height="16"
      >
        <g className="nc-icon-wrapper" fill="#368df7">
          <polygon
            fill={this.props.fill}
            points="10,13.4 4.6,8 10,2.6 11.4,4 7.4,8 11.4,12 "
          />
        </g>
      </svg>
    )
  }
}

IconArrowLeft.defaultProps = {
  fill: config.colors.blue,
}

IconArrowLeft.propTypes = {
  fill: PropTypes.string,
}

export default IconArrowLeft

```


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

[User] Show me the implementation of collections/react/components/Pagination/IconArrowRight.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import config from 'vtex-tachyons/config.json'

class IconArrowLeft extends Component {
  render() {
    return (
      <svg
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        x="0px"
        y="0px"
        viewBox="0 0 16 16"
        xmlSpace="preserve"
        width="16"
        height="16"
      >
        <g className="nc-icon-wrapper" fill={this.props.fill}>
          <polygon
            fill={this.props.fill}
            points="6,13.4 4.6,12 8.6,8 4.6,4 6,2.6 11.4,8 "
          />
        </g>
      </svg>
    )
  }
}

IconArrowLeft.defaultProps = {
  fill: config.colors.blue,
}

IconArrowLeft.propTypes = {
  fill: PropTypes.string,
}

export default IconArrowLeft

```


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

[User] Show me the implementation of collections/react/components/Pagination/index.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import IconArrowLeft from './IconArrowLeft'
import IconArrowRight from './IconArrowRight'
import config from 'vtex-tachyons/config.json'

class Pagination extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      currentPage: props.currentPage,
      error: props.pages < props.currentPage || props.currentPage < 1,
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      currentPage: nextProps.currentPage,
      error: nextProps.pages < nextProps.currentPage ||
        nextProps.currentPage < 1,
    })
  }

  handlePreviousPage = () => {
    const newValue = this.props.currentPage - 1
    this.props.onChange.apply(this, this.getNewState(newValue))
    this.setState({ currentPage: newValue })
  };

  handleNextPage = () => {
    const newValue = this.props.currentPage + 1
    this.props.onChange.apply(this, this.getNewState(newValue))
    this.setState({ currentPage: newValue })
  };

  getNewState = newCurrentPage => {
    if (this.props.from !== null && this.props.to !== null) {
      const pageSize = this.props.to - this.props.from + 1
      const from = (newCurrentPage - 1) * pageSize
      const to = from + pageSize - 1
      return [newCurrentPage, from, to]
    }
    return [newCurrentPage]
  };

  handleInputChange = e => {
    const value = e.target.value.replace(/[^0-9]/gi, '')

    this.setState({
      currentPage: value,
      error: this.props.pages < value || value < 1,
    })
  };

  handleBlur = () => {
    this.setState({ currentPage: this.props.currentPage, error: false })
  };

  handleKeyDown = ({ key }) => {
    if (key === 'Enter' && !this.state.error) {
      this.props.onChange.apply(this, this.getNewState(this.state.currentPage))
    }
  };

  render() {
    const { currentPage, pages } = this.props
    const previousDisabled = parseInt(currentPage, 10) === 1
    const nextDisabled = parseInt(pages, 10) === parseInt(currentPage, 10)

    return (
      <div className="flex">
        <div className="flex bt bl bb b--light-gray bw1 br2 br--left">
          <button
            onClick={this.handlePreviousPage}
            disabled={previousDisabled}
            className={
              `bn f6 pv4 ph4 flex items-center ${previousDisabled ? '' : 'pointer hover-bg-washed-blue'}`
            }
          >
            <IconArrowLeft
              fill={previousDisabled ? config.colors.silver : undefined}
            />
          </button>
        </div>
        <div className="dib">
          <input
            className={
              `ba ${this.state.error ? 'b--washed-red' : 'b--light-gray'} f6 pa4 bw1 dib w2 tc`
            }
            value={this.state.currentPage}
            onBlur={this.handleBlur}
            onKeyDown={this.handleKeyDown}
            onChange={this.handleInputChange}
          />
        </div>
        <div className="flex bt br bb b--light-gray bw1 br2 br--right">
          <button
            onClick={this.handleNextPage}
            disabled={nextDisabled}
            className={
              `bn f6 pv4 ph4 flex items-center ${nextDisabled ? '' : 'pointer hover-bg-washed-blue'}`
            }
          >
            <IconArrowRight
              fill={nextDisabled ? config.colors.silver : undefined}
            />
          </button>
        </div>
      </div>
    )
  }
}

Pagination.defaultProps = {
  currentPage: 1,
  pages: Infinity,
}

Pagination.propTypes = {
  from: PropTypes.number,
  to: PropTypes.number,
  currentPage: PropTypes.number.isRequired,
  pages: PropTypes.number.isRequired,
  onChange: PropTypes.func.isRequired,
}

export default Pagination

```


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

[User] Show me the implementation of collections/react/components/TimePicker/index.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import RcTimePicker from 'rc-time-picker'
import moment from 'moment'

class TimePicker extends Component {
  constructor(props) {
    super(props)

    this.state = {
      focused: false,
      value: props.value
        ? moment(moment.utc(props.value).local().format())
        : moment(),
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      value: nextProps.value
        ? moment(moment.utc(nextProps.value).local().format())
        : moment(),
    })
  }

  handleChange = date => {
    this.props.onChange(date.toISOString())
  };

  render() {
    return (
      <RcTimePicker
        showSecond={false}
        minuteStep={10}
        value={this.state.value}
        onChange={this.handleChange}
      />
    )
  }
}

TimePicker.propTypes = {
  value: PropTypes.string,
  onChange: PropTypes.func.isRequired,
}

export default TimePicker

```


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

[User] Show me the implementation of collections/react/components/TimePicker/custom.css from the collections VTEX app.

[Assistant]
Here's the implementation:

```css
.rc-time-picker input[type=text] {
  padding: 8px;
  font-size: 14px;
  top: 2px;
  height: 38px;
  border: 2px solid #e3e4e6;
  letter-spacing: -0.4px;
}

.rc-time-picker .rc-time-picker-panel-inner {
  width: 10em;
  display: inline-block;
  top: 55px;
  position: relative;
  outline: none;
  list-style: none;
  font-size: 12px;
  text-align: left;
  background-color: #fff;
  border-radius: 4px;
  background-clip: padding-box;
  border: 1px solid #e3e4e6;
  line-height: 1.5;
  box-shadow: none;
}

.rc-time-picker-input {
  width: 5em;
  text-align: center;
}

.rc-time-picker .rc-time-picker-panel-input-wrap {
  box-sizing: border-box;
  position: relative;
  padding: 8px;
  border-bottom: 1px solid #e3e4e6;
}

```


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

[User] Show me the implementation of collections/react/components/TimePicker/rc-time-picker.css from the collections VTEX app.

[Assistant]
Here's the implementation:

```css
.rc-time-picker {
  display: inline-block;
  box-sizing: border-box;
}
.rc-time-picker * {
  box-sizing: border-box;
}
.rc-time-picker-input {
  width: 100%;
  position: relative;
  display: inline-block;
  padding: 4px 7px;
  height: 28px;
  cursor: text;
  font-size: 12px;
  line-height: 1.5;
  color: #666;
  background-color: #fff;
  background-image: none;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  transition: border 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), background 0.2s cubic-bezier(0.645, 0.045, 0.355, 1), box-shadow 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.rc-time-picker-input[disabled] {
  color: #ccc;
  background: #f7f7f7;
  cursor: not-allowed;
}
.rc-time-picker-panel {
  z-index: 1070;
  width: 170px;
  position: absolute;
  box-sizing: border-box;
}
.rc-time-picker-panel * {
  box-sizing: border-box;
}
.rc-time-picker-panel-inner {
  display: inline-block;
  position: relative;
  outline: none;
  list-style: none;
  font-size: 12px;
  text-align: left;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 5px #ccc;
  background-clip: padding-box;
  border: 1px solid #ccc;
  line-height: 1.5;
}
.rc-time-picker-panel-narrow {
  max-width: 113px;
}
.rc-time-picker-panel-input {
  margin: 0;
  padding: 0;
  width: 100%;
  cursor: auto;
  line-height: 1.5;
  outline: 0;
  border: 1px solid transparent;
}
.rc-time-picker-panel-input-wrap {
  box-sizing: border-box;
  position: relative;
  padding: 6px;
  border-bottom: 1px solid #e9e9e9;
}
.rc-time-picker-panel-input-invalid {
  border-color: red;
}
.rc-time-picker-panel-clear-btn {
  position: absolute;
  right: 6px;
  cursor: pointer;
  overflow: hidden;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  top: 6px;
  margin: 0;
}
.rc-time-picker-panel-clear-btn:after {
  content: "x";
  font-size: 12px;
  color: #aaa;
  display: inline-block;
  line-height: 1;
  width: 20px;
  transition: color 0.3s ease;
}
.rc-time-picker-panel-clear-btn:hover:after {
  color: #666;
}
.rc-time-picker-panel-select {
  float: left;
  font-size: 12px;
  border: 1px solid #e9e9e9;
  border-width: 0 1px;
  margin-left: -1px;
  box-sizing: border-box;
  width: 56px;
  max-height: 144px;
  overflow-y: auto;
  position: relative;
}
.rc-time-picker-panel-select-active {
  overflow-y: auto;
}
.rc-time-picker-panel-select:first-child {
  border-left: 0;
  margin-left: 0;
}
.rc-time-picker-panel-select:last-child {
  border-right: 0;
}
.rc-time-picker-panel-select ul {
  list-style: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 100%;
}
.rc-time-picker-panel-select li {
  list-style: none;
  box-sizing: content-box;
  margin: 0;
  padding: 0 0 0 16px;
  width: 100%;
  height: 24px;
  line-height: 24px;
  text-align: left;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.rc-time-picker-panel-select li:hover {
  background: #edfaff;
}
li.rc-time-picker-panel-select-option-selected {
  background: #f7f7f7;
  font-weight: bold;
}
li.rc-time-picker-panel-select-option-disabled {
  color: #ccc;
}
li.rc-time-picker-panel-select-option-disabled:hover {
  background: transparent;
  cursor: not-allowed;
}

```


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

[User] Show me the implementation of collections/react/components/Loading/index.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import config from 'vtex-tachyons/config.json'
import style from './style.css'

class Loading extends Component {
  render() {
    return (
      <svg
        className={style.spinner}
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        x="0px"
        y="0px"
        viewBox="0 0 64 64"
        xmlSpace="preserve"
        width={this.props.width}
        height={this.props.height}
      >
        <g fill={this.props.fill}>
          <g transform="rotate(43.102857129914426 32 32)">
            <path
              className={style.path}
              opacity="0.4"
              fill={this.props.fill}
              d="M32,64C14.35498,64,0,49.64453,0,32C0,14.35498,14.35498,0,32,0s32,14.35498,32,32 C64,49.64453,49.64502,64,32,64z M32,6C17.66357,6,6,17.66357,6,32c0,14.33691,11.66357,26,26,26s26-11.66309,26-26 C58,17.66357,46.33643,6,32,6z"
            />
            <path
              className={style.path}
              data-color="color-2"
              fill={this.props.fill}
              d="M64,32h-6C58,17.66357,46.33643,6,32,6V0C49.64502,0,64,14.35498,64,32z"
            />
          </g>
        </g>
      </svg>
    )
  }
}

Loading.defaultProps = {
  fill: config.colors.blue,
  width: 64,
  height: 64,
}

Loading.propTypes = {
  fill: PropTypes.string.isRequired,
  width: PropTypes.number.isRequired,
  height: PropTypes.number.isRequired,
}

export default Loading

```


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

[User] Show me the implementation of collections/react/components/Loading/style.css from the collections VTEX app.

[Assistant]
Here's the implementation:

```css
.spinner {
  animation: rotator 1.4s linear infinite;
}

@keyframes rotator {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(270deg);
  }
}

.path {
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  transform-origin: center;
  animation: dash 1.4s ease-in-out infinite;
}

@keyframes dash {
  0% {
    stroke-dashoffset: 187;
  }
  50% {
    stroke-dashoffset: 47.75;
    transform: rotate(135deg);
  }
  100% {
    stroke-dashoffset: 187;
    transform: rotate(450deg);
  }
}

```


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

[User] Show me the implementation of collections/react/components/Autocomplete/Badge.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Deny from '@vtex/styleguide/lib/icon/Deny'
import config from 'vtex-tachyons/config.json'

class Badge extends PureComponent {
  constructor(props) {
    super(props)
    this.state = { hover: false }
  }

  handleMouseEnter = () => this.setState({ hover: true });
  handleMouseLeave = () => this.setState({ hover: false });

  render() {
    return (
      <span
        className="dib bg-washed-blue blue br-pill pv3 ph4 hover-bg-light-silver pointer"
        onMouseEnter={this.handleMouseEnter}
        onMouseLeave={this.handleMouseLeave}
        onClick={this.props.onClick}
      >
        {this.props.children}
        {' '}
        <span className="pt2">
          <Deny
            color={this.state.hover ? config.colors.red : config.colors.blue}
          />
        </span>
      </span>
    )
  }
}

Badge.propTypes = {
  children: PropTypes.node.isRequired,
  onClick: PropTypes.func,
}

export default Badge

```


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

[User] Show me the implementation of collections/react/components/Autocomplete/index.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import AutocompleteSuggestion from './AutocompleteSuggestion'
import Autocomplete from './Autocomplete'

function createAutocomplete({ graphql: { suggestion, name } }) {
  const AutocompleteSugestionContainer = suggestion(AutocompleteSuggestion)
  const AutocompleteContainer = name(Autocomplete)

  class AutocompleteWrapper extends Component {
    render() {
      return (
        <AutocompleteContainer
          values={this.props.values}
          DataSource={AutocompleteSugestionContainer}
          onChange={this.props.onChange}
        />
      )
    }
  }

  AutocompleteWrapper.propTypes = {
    values: PropTypes.array,
    onChange: PropTypes.func,
  }

  return AutocompleteWrapper
}

export default createAutocomplete

```


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

[User] Show me the implementation of collections/react/components/Autocomplete/AutocompleteSuggestion.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'

class AutocompleteSuggestion extends Component {
  render() {
    const { data: { suggestions = [], loading } } = this.props
    const { highlightedIndex, getItemProps } = this.props

    const optionsClasses = 'absolute bl br bb bw1 br2 br--bottom bg-white flex-column z-max overflow-y-auto b--light-gray '
    const optionClasses = 'w-100 pointer flex near-black tl bb-0 bl-0 br-0 bt b--near-white b--silver pv4 ph3 '

    return (
      <div className={optionsClasses} style={{ width: '100%' }}>
        {loading
          ? <div className={`${optionClasses} i-s`}>Loading...</div>
          : suggestions.length === 0
            ? <div className={optionClasses}>
                  No results for "{this.props.inputValue}".
            </div>
            : suggestions.map((suggestion, index) => {
              const isActive = highlightedIndex === index
              const selected = this.props.values.find(
                c => parseInt(suggestion.id) === c
              )

              const props = selected
                ? {}
                : getItemProps({
                  index,
                  item: suggestion.id,
                })

              return (
                <div
                  key={suggestion.id}
                  {...props}
                  className={
                    `${optionClasses} ${isActive ? 'bg-near-white' : 'bg-white'} ${selected ? 'fwb' : ''}`
                  }
                >
                  {selected && 'OK - '}{suggestion.name}
                </div>
              )
            })}
      </div>
    )
  }
}

AutocompleteSuggestion.propTypes = {
  values: PropTypes.array,
  data: PropTypes.object,
  inputValue: PropTypes.string,
  selectedItem: PropTypes.any,
  highlightedIndex: PropTypes.number,
  getItemProps: PropTypes.func,
}

export default AutocompleteSuggestion

```


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

[User] Show me the implementation of collections/react/components/Autocomplete/Autocomplete.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Downshift from 'downshift'
import AutocompleteInput from './AutocompleteInput'

class Autocomplete extends Component {
  constructor(props) {
    super(props)

    this.state = { value: '', isMenuOpen: false }
  }

  handleChangeValue = e => {
    const value = e.target.value
    this.setState({ value, isMenuOpen: value.length >= 3 })
  };

  handleOuterClick = () => {
    this.setState({ isMenuOpen: false })
  };

  handleKeyDown = e => {
    const { values } = this.props
    if (
      values.length && this.state.value.length === 0 && e.key === 'Backspace'
    ) {
      this.props.onChange(values.slice(0, values.length - 1))
    }
  };

  handleChange = item => {
    this.setState({ value: '', isMenuOpen: false })
    this.props.onChange([...this.props.values, parseInt(item)])
  };

  render() {
    const { DataSource, values, data: { loading, names } } = this.props

    if (loading) return null

    return (
      <Downshift
        selectedItem={values}
        inputValue={this.state.value}
        onChange={this.handleChange}
        onOuterClick={this.handleOuterClick}
        isOpen={this.state.isMenuOpen}
        render={(
          {
            getInputProps,
            getItemProps,
            inputValue,
            selectedItem,
            highlightedIndex,
            isOpen,
          }
        ) => (
          <div className="relative">
            <AutocompleteInput
              {...getInputProps({
                id: 'autocomplete-category',
                value: this.state.value,
                onChange: this.handleChangeValue,
                onKeyDown: this.handleKeyDown,
              })}
              block
              open={isOpen}
              values={names}
            />
            {isOpen
              ? <DataSource
                {...{
                  values,
                  inputValue,
                  getItemProps,
                  selectedItem,
                  highlightedIndex,
                }}
              />
              : null}
          </div>
        )}
      />
    )
  }
}

Autocomplete.propTypes = {
  values: PropTypes.array,
  data: PropTypes.object,
  DataSource: PropTypes.any.isRequired,
  onChange: PropTypes.func.isRequired,
}

export default Autocomplete

```


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

[User] Show me the implementation of collections/react/components/Autocomplete/AutocompleteInput.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import Badge from './Badge'

class AutocompleteInput extends Component {
  constructor(props) {
    super(props)

    this.state = {
      active: false,
    }
  }

  handleFocus = event => {
    this.setState({ active: true })
    this.props.onFocus && this.props.onFocus(event)
  };

  handleBlur = event => {
    this.setState({ active: false })
    this.props.onBlur && this.props.onBlur(event)
  };

  render() {
    const {
      error,
      block,
      large,
      xLarge,
      short,
      long,
      token,
      disabled,
      open,
    } = this.props
    const { active } = this.state

    const size = 'w-100'
    const box = 'ma0 border-box'
    const border = `bw1 br2 ${open ? 'br--top bb-0' : ''}  b--solid outline-0`
    const typography = 'near-black'
    let classes = `${size} ${box} ${border} ${typography} `

    if (token) {
      classes += 'code '
    }

    if (active) {
      classes += 'b--gray '
    } else {
      classes += 'b--light-gray '
      if (!disabled) {
        classes += 'hover-b--silver '
      }
    }

    if (error) {
      classes += 'b--red hover-b--red '
    }

    if (disabled) {
      classes += 'bg-light-gray bg-light-silver b--light-silver silver '
    } else {
      classes += 'bg-white '
    }

    let width = '100%'

    if (large) {
      classes += 'f5 pv4 ph6 '
      // iconSize = 18
      if (!block) {
        if (short) {
          width = '130px'
        } else if (long) {
          width = '420px'
        } else {
          width = '250px'
        }
      }
    } else if (xLarge) {
      classes += 'f4 pv5 ph7 '
      // iconSize = 22
      if (!block) {
        if (short) {
          width = '180px'
        } else if (long) {
          width = '520px'
        } else {
          width = '320px'
        }
      }
    } else {
      classes += 'f6 pv3 ph5 '
      // iconSize = 16
      if (!block) {
        if (short) {
          width = '110px'
        } else if (long) {
          width = '350px'
        } else {
          width = '200px'
        }
      }
    }

    const style = { width: width }

    return (
      <div style={style} className={classes}>
        {this.props.values.map(value => (
          <Badge key={value.id}>{value.name}</Badge>
        ))}
        <input
          className="ml3 bw0 dib outline-transparent"
          disabled={this.props.disabled}
          id={this.props.id}
          name={this.props.name}
          placeholder={this.props.placeholder}
          tabIndex={this.props.tabIndex}
          type={this.props.type}
          value={this.props.value}
          onBlur={this.handleBlur}
          onChange={this.props.onChange}
          onFocus={this.handleFocus}
          onKeyDown={this.props.onKeyDown}
        />
      </div>
    )
  }
}

AutocompleteInput.defaultProps = {
  type: 'text',
}

AutocompleteInput.propTypes = {
  disabled: PropTypes.bool,
  id: PropTypes.string,
  name: PropTypes.string,
  placeholder: PropTypes.string,
  tabIndex: PropTypes.number,
  type: PropTypes.string.isRequired,
  value: PropTypes.string,

  values: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.any,
      name: PropTypes.string,
    })
  ),

  block: PropTypes.bool,
  error: PropTypes.bool,
  large: PropTypes.bool,
  long: PropTypes.bool,
  open: PropTypes.bool.isRequired,
  short: PropTypes.bool,
  token: PropTypes.bool,
  xLarge: PropTypes.bool,

  onBlur: PropTypes.func,
  onChange: PropTypes.func.isRequired,
  onFocus: PropTypes.func,
  onKeyDown: PropTypes.func,
}

export default AutocompleteInput

```


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

[User] Show me the implementation of collections/react/components/Group/index.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import ManualGroup from '../ManualGroup'
import DynamicGroup from '../DynamicGroup'

class Group extends Component {
  handleSave = data => {
    this.props.onChange(this.props.index, data)
  };

  render() {
    const { data, collectionId } = this.props

    return data.skus.length > 0
      ? <ManualGroup
        collectionId={collectionId}
        name={data.name}
        skus={data.skus}
        onSave={this.handleSave}
      />
      : <DynamicGroup
        collectionId={collectionId}
        name={data.name}
        categories={data.categories}
        brands={data.brands}
        onSave={this.handleSave}
      />
  }
}

Group.propTypes = {
  index: PropTypes.number.isRequired,
  data: PropTypes.object,
  collectionId: PropTypes.string,
  onChange: PropTypes.func.isRequired,
}

export default Group

```


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

[User] Show me the implementation of collections/react/components/DatePicker/index.js from the collections VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import moment from 'moment'
import { SingleDatePicker } from 'react-dates'

class DatePicker extends Component {
  constructor(props) {
    super(props)

    this.state = {
      focused: false,
      value: moment(props.value || new Date()),
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      value: moment(nextProps.value || new Date()),
    })
  }

  handleFocusChange = ({ focused }) => {
    this.setState({ focused })
  };

  handleChange = date => {
    this.props.onChange(date.toISOString())
  };

  render() {
    return (
      <SingleDatePicker
        showDefaultInputIcon
        numberOfMonths={1}
        date={this.state.value}
        focused={this.state.focused}
        onDateChange={this.handleChange}
        onFocusChange={this.handleFocusChange}
      />
    )
  }
}

DatePicker.propTypes = {
  value: PropTypes.string,
  onChange: PropTypes.func.isRequired,
}

export default DatePicker

```


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

[User] Show me the implementation of collections/react/components/DatePicker/custom.css from the collections VTEX app.

[Assistant]
Here's the implementation:

```css
.SingleDatePicker {
  padding-right: 16px;
}

.SingleDatePicker_picker__directionLeft {
  top: 50px !important;
}

.SingleDatePickerInput_calendarIcon {
  padding: 0 0 6px 5px;
}

.SingleDatePickerInput{
  border-radius: 4px;
  border: 2px solid #e3e4e6;
}

.DateInput {
  width: 100px;
}

.DateInput_input {
  border-bottom: 0;
}

.DateInput input[type=text] {
  font-size: 14px;
  letter-spacing: -0.4px;
  font-weight: 400;
  padding: 5px 8px;
}

.CalendarDay__selected, .CalendarDay__selected:active, .CalendarDay__selected:hover {
  background: #3193F5;
  border: 1px solid #3193F5;
  color: #fff;
}

.DayPickerKeyboardShortcuts_show__bottomRight {
  border-right: none;
}

.DateInput_fang{
  display: none;
}

```