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

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

[Assistant]
Here's the implementation:

```markdown

# Service Example

A reference app implementing a VTEX IO service with HTTP route handlers.

![Service Example Architecture](https://user-images.githubusercontent.com/18706156/77381360-72489680-6d5c-11ea-9da8-f4f03b6c5f4c.jpg)

We use [**KoaJS**](https://koajs.com/) as the web framework, so you might want to get into that

We also 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 `node/index.ts` and follow the comments and imports :)

## Recipes

### Defining routes on _service.json_
```json
{
  "memory": 256,
  "ttl": 10,
  "timeout": 2,
  "minReplicas": 2,
  "maxReplicas": 4,
  "routes": {
    "status": {
      "path": "/_v/status/:code",
      "public": true
    }
  }
}
```

The `service.json` file that sits on the root of the `node` folder holds informations about this service, like the maximum timeout and number of replicas, what might be discontinued on the future, but also **sets its routes**.

Koa uses the [path-to-regexp](https://github.com/pillarjs/path-to-regexp) format for defining routes and, as seen on the example, we use the `:code` notation for declaring a **route param** named code, in this case. A HTTP request for `https://{{workspace}}--{{account}}.myvtex.com/_v/status/500` will match the route we've defined.

For cach _key_ on the `routes` object, there should be a **corresponding entry** on the exported Service object on `node/index.ts`, this will hook your code to a specific route.

### Access Control
You can also provide a `public` option for each route. If `true`, that resource will be reachable for everyone on the internet. If `false`, VTEX credentials will be requested as well.

Another way of controlling access to specific routes is using **ReBACs (Resource-based access)**, that supports more robust configuration. You can read more [on this document](https://docs.google.com/document/d/1ZxNHMFIXfXz3BgTN9xyrHL3V5dYz14wivYgQjRBZ6J8/edit#heading=h.z7pad3qd2qw7) (VTEX only).

#### Query String
For `?accepting=query-string`, you **don't need to declare anything**, as any query provided to the URL will already be available for you to use on the code as `ctx.query`, already parsed as an object, or `ctx.queryString`, taken directly from the URL as a string.

#### Route Params
Route Params will be available for you to use on the code as `ctx.vtex.params`, already parsed as an object.
For a path like `/_v/status/:code`, if you receive the request `/_v/status/200`, `ctx.vtex.params` will return `{ code: '200' }`

#### HTTP methods
When you define a route on the `service.json`, your NodeJS handlers for that route will be triggered  **on every HTTP method** (GET, POST, PUT...), so, if you need to handle them separately you need to implement a "sub-router". Fortunately, the _node-vtex-api_ provides a helper function `method`, exported from `@vtex/api`, to accomplish that behaviour. Instead of passing your handlers directly to the corresponding route on `index.ts`, you pass a `method` call passing **an object with the desired method as key and one handler as its corresponding value**. Check this example:
```typescript
import { method } from '@vtex/api'
...

export default new Service<Clients, State>({
  clients,
  routes: {
    status: method({
      GET: statusGetHandler,
      POST: statusPostHandler,
    }),
  },
})
```

### Throwing errors

When building a HTTP service, we should follow HTTP rules regarding data types, cache, authorization, and status code. Our example app sets a `ctx.status` value that will be used as a HTTP status code return value, but often we also want to give proper information about errors as well.

The **node-vtex-api** already exports a handful of **custom error classes** that can be used for that purpose, like the `NotFoundError`. You just need to throw them inside one of the the route handlers that the appropriate response will be sent to the server.

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

export async function validate(ctx: Context, next: () => Promise<any>) {
  const { code } = ctx.vtex.route.params
  if (isNaN(code) || code < 100 || code > 600) {
    throw new UserInputError('Code must be a number between 100 and 600')
  }
...
```

You can check all the available errors [here](https://github.com/vtex/node-vtex-api/tree/fd6139349de4e68825b1074f1959dd8d0c8f4d5b/src/errors), but some are not useful for just-HTTP services. Check the most useful ones:

|Error Class | HTTP Code |
|--|:--:|
| `UserInputError` | 400 |
| `AuthenticationError` | 401 |
| `ForbiddenError` | 403 |
| `NotFoundError` | 404 |

You can also **create your custom error**, just see how it's done above ;)

### Reading a JSON body

When writing POST or PUT handlers, for example, often you need to have access to the **request body** that comes as a JSON format, which is not provided directly by the handler function.

For this, you have to use the [co-body](https://www.npmjs.com/package/co-body) package that will parse the request into a readable JSON object, used as below:
```typescript
import { json } from 'co-body'
export async function method(ctx: Context, next: () => Promise<any>) {
    const body = await json(ctx.req)
```

### Other example apps

We use Node services across all VTEX, and there are a lot inspiring examples. If you want to dive deeper on learning about this subject, don't miss those internal apps: [builder-hub](https://github.com/vtex/builder-hub) or [store-sitemap](https://github.com/vtex-apps/store-sitemap)

## Testing

`@vtex/test-tools` and `@types/jest` should be installed on `./node` package as `devDependencies`.

Run `vtex test` and [Jest](https://jestjs.io/) will do its thing.

Check the `node/__tests__/simple.test.ts` test case and also [Jest's Documentation](https://jestjs.io/docs/en/getting-started).

## Splunk Dashboard

We have an (for now, VTEX-only, internal) Splunk dashboard to show all metrics related to your app. You can find it [here](https://splunk7.vtex.com/en-US/app/vtex_colossus/node_app_metrics).

After linking this app and making some requests, you can select `vtex.service-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**.

For convenience, the link for the current version: https://splunk7.vtex.com/en-US/app/vtex_colossus/node_app_metrics?form.time.earliest=-30m%40m&form.time.latest=%40m&form.picked_context=false&form.picked_region=aws-us-east-*&form.picked_service=vtex.service-example

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "memory": 256,
  "ttl": 10,
  "timeout": 2,
  "minReplicas": 2,
  "maxReplicas": 4,
  "workers": 1,
  "routes": {
    "encryption": {
      "path": "/_v/encryption",
      "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 encryption-service/node/package.json from the encryption-service VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "axios": "^0.24.0",
    "co-body": "^6.0.0",
    "crypto-js": "^4.1.1",
    "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.6",
    "@vtex/test-tools": "^1.0.0",
    "@vtex/tsconfig": "^0.5.6",
    "typescript": "3.9.7"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty"
  },
  "version": "0.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 encryption-service/node/index.ts from the encryption-service VTEX app.

[Assistant]
Here's the implementation:

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

import { Clients } from './clients'
import { encryption } from './middlewares/encryption'

const TIMEOUT_MS = 800

// Create a LRU memory cache for the Status client.
// The @vtex/api HttpClient respects Cache-Control headers and uses the provided cache.
const memoryCache = new LRUCache<string, any>({ max: 5000 })

metrics.trackCache('encryption', memoryCache)

// This is the configuration for clients available in `ctx.clients`.
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,
    },
    // This key will be merged with the default options and add this cache to our Status client.
    encryption: {
      memoryCache,
    },
  },
}

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, State>

  // The shape of our State object found in `ctx.state`. This is used as state bag to communicate between middlewares.
  interface State extends RecorderState {
    plaintext: any,
    key: string
  }
}

// Export a service that defines route handlers and client options.
export default new Service({
  clients,
  routes: {
    // `status` is the route ID from service.json. It maps to an array of middlewares (or a single handler).
    encryption: method({
      GET: [encryption]
    }),
  },
})

```


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

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

[Assistant]
Here's the implementation:

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

// Extend the default IOClients implementation with our own custom clients.
export class Clients extends IOClients {
  public get encryption() {
    return this.getOrSet('encryption', Encryption)
  }
}

```


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

[User] Show me the implementation of encryption-service/node/clients/encryption.ts from the encryption-service VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { InstanceOptions, IOContext } from '@vtex/api'
import { ExternalClient } from '@vtex/api'
var CryptoJS = require('crypto-js')

export default class Encryption extends ExternalClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super('', context, {
      ...options,
      headers: {
        ...options?.headers,
        'X-Vtex-Use-Https': 'true'
      },
    })
  }

  profitshareBin2hex(s: any){
    var i, f = 0, a = [];
    s += '';
    f = s.length;

    for (i = 0; i<f; i++) {
        a[i] = s.charCodeAt(i).toString(16).replace(/^([\da-f])$/,"0$1");
    }

    return a.join('');
}
//decode
atob = function(str:any){ return Buffer.from(str, 'base64').toString('binary'); }
//encode
btoa = function(str:any){ return Buffer.from(str, 'binary').toString('base64'); };

  public getEncryption(plaintext: any, key: any): string {
    const encodedPlainText = encodeURIComponent(plaintext).toString()
    let iv = CryptoJS.enc.Utf8.parse(Math.round((Math.pow(36, 16 + 1) - Math.random() * Math.pow(36, 16))).toString(36).slice(1));

    let subKey = CryptoJS.enc.Utf8.parse(key.substring(0, 16));
    key = CryptoJS.enc.Utf8.parse(key);

    let chiperData = CryptoJS.AES.encrypt(encodedPlainText, subKey, {
        iv: iv,
        mode: CryptoJS.mode.CBC,
    });

    let hash = CryptoJS.HmacSHA256(chiperData.ciphertext, key);
    let hmac = this.atob(hash.toString(CryptoJS.enc.Base64));

    iv = this.atob(iv.toString(CryptoJS.enc.Base64));
    let chiperRaw = this.atob(chiperData.toString());

    let data = this.profitshareBin2hex(this.btoa(iv + hmac + chiperRaw));
    console.log('Plain text: ', encodedPlainText);
    console.log('Data: ', data)

    return 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 encryption-service/node/middleware/validate.ts from the encryption-service VTEX app.

[Assistant]
Here's the implementation:

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

export async function validate(ctx: Context, next: () => Promise<any>) {
  const {
    vtex: {
      route: { params },
    },
  } = ctx

  console.info('Received params:', params)

  const { plaintext, key } = params
  console.log('Params: ', params)
  if (!plaintext || !key) {
    throw new UserInputError('Plaintext and key are required') // Wrapper for a Bad Request (400) HTTP Error. Check others in https://github.com/vtex/node-vtex-api/blob/fd6139349de4e68825b1074f1959dd8d0c8f4d5b/src/errors/index.ts
  }

  ctx.state.plaintext = plaintext

  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 encryption-service/node/middleware/encryption.ts from the encryption-service VTEX app.

[Assistant]
Here's the implementation:

```typescript
export async function encryption(ctx: Context, next: () => Promise<any>) {
  const {
    clients: { encryption}
  } = ctx

  try {
    const data = encryption.getEncryption(ctx.request.query.plaintext, ctx.request.query.key)
    console.log('data: ', data);
    ctx.status = 201
    ctx.body = data
  } catch (error) {
    ctx.status = 502;
    console.log(JSON.stringify(error));
  }

  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 encryption-service/node/_tests_/simple.test.ts from the encryption-service VTEX app.

[Assistant]
Here's the implementation:

```typescript
// You can import your files here for testing them
//
// More info: https://github.com/sapegin/jest-cheat-sheet

describe('simpleTest', () => {
  it('one test case', async () => {
    expect(0.2 + 0.1).not.toBe(0.3)
  })
})

```


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

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

[Assistant]
Here's the implementation:

```markdown
📢 Use this project, [contribute](https://github.com/vtex-apps/CHANGEME) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

# APP NAME

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

Under the app's name, you should explain the topic, giving a **brief description** of the **app's functionality** (what is it for?) in a store.

Next, you can **add media** (either an image of a GIF) if possible, so that users can better understand how the app works in practice.

![Media Placeholder](https://user-images.githubusercontent.com/52087100/71204177-42ca4f80-227e-11ea-89e6-e92e65370c69.png)

## Configuration

It is possible to install in your store either by using App Store or the VTEX IO Toolbelt.

### Using VTEX App Store

1. Access the **Apps** section in your account's admin page and look for the Icommkt box;
2. Then, click on the **Install** button;
3. You'll see a warning message about needing to enter the necessary configurations. Scroll down and type in your **NAME OF A SETTINGS FIELD** in the `NAME OF THE APP` field.
4. Click on **Save**.

### Using VTEX IO Toolbelt

1. [Install](https://vtex.io/docs/recipes/development/installing-an-app/) the `vtex.icommkt@0.x` app. You can confirm that the app has now been installed by running `vtex ls` again.
2. Access the **Apps** section in your account's admin page and look for the NAME OF THE APP box. Once you find it, click on the box.
3. Fill in the `NAME OF THE APP` field with your **NAME OF THE SETTINGS FIELD**.
4. Click on **Save**.

<!-- Remember to also **showcase any necessary disclaimer** related to the app in this section, such as the different behavior it may display during its configuration. -->

## Modus Operandi *(not mandatory)*

There are scenarios in which an app can behave differently in a store, according to its configuration. It's crucial then to go through these **behavioral changes** in this section, allowing users to fully understand the **practical application** of the app in their store.

If you feel compelled to give further details, such as the app's **relationship with others**, don't hesitate to use this section.

<!-- DOCS-IGNORE:start -->
## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!
<!-- DOCS-IGNORE:end -->

```


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

[User] Show me the implementation of pixel-app-template/react/index.tsx from the pixel-app-template VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { canUseDOM } from 'vtex.render-runtime'

import type { PixelMessage } from './typings/events'

export function handleEvents(e: PixelMessage) {
  switch (e.data.eventName) {
    case 'vtex:pageView': {
      break
    }

    default: {
      break
    }
  }
}

if (canUseDOM) {
  window.addEventListener('message', handleEvents)
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/graphql": "^14.5.0",
    "@types/jest": "^25.1.5",
    "@types/node": "^13.11.0",
    "@types/react": "^16.9.31",
    "@types/react-intl": "^3.0.0",
    "@vtex/test-tools": "^3.1.0",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.6.8",
    "graphql": "^14.5.4",
    "react-intl": "^3.11.0",
    "typescript": "3.8.3",
    "vtex.pixel-interfaces": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pixel-interfaces@1.1.1/public/_types/react",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.124.3/public/@types/vtex.render-runtime"
  }
}
```


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

[User] Show me the implementation of pixel-app-template/store/interfaces.json from the pixel-app-template VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "pixel.APPNAME": {
    "component": "index"
  }
}
```


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

[User] Show me the implementation of pixel-app-template/public/metadata/messages/es-AR.json from the pixel-app-template VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "",
  "headline": "",
  "overview": "",
  "features": [],
  "additionalInformation": "",
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


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

[User] Show me the implementation of pixel-app-template/public/metadata/messages/pt-BR.json from the pixel-app-template VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "",
  "headline": "",
  "overview": "",
  "features": [],
  "additionalInformation": "",
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


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

[User] Show me the implementation of pixel-app-template/public/metadata/messages/en-US.json from the pixel-app-template VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "",
  "headline": "",
  "overview": "",
  "features": [],
  "additionalInformation": "",
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


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

[User] Show me the implementation of pixel-app-template/react/typings/events.d.ts from the pixel-app-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface PixelMessage extends MessageEvent {
  data:
    | ProductViewData
    | ProductClickData
    | OrderPlacedData
    | OrderPlacedTrackedData
    | PageViewData
    | ProductImpressionData
    | AddToCartData
    | RemoveToCartData
    | CartChangedData
    | HomePageInfo
    | ProductPageInfoData
    | SearchPageInfoData
    | UserData
    | CartIdData
    | PromoViewData
    | PromotionClickData
    | NewsletterSubscriptionData
}

export interface EventData {
  event: string
  eventName: string
  currency: string
}

export interface PageInfoData extends EventData {
  event: 'pageInfo'
  eventName: 'vtex:pageInfo'
  accountName: string
  pageTitle: string
  pageUrl: string
}

export interface UserData extends PageInfoData {
  eventType: 'userData'
  eventName: 'vtex:userData'
  firstName?: string
  lastName?: string
  document?: string
  id?: string
  email?: string
  phone?: string
  isAuthenticated: boolean
}

export interface CartIdData extends PageInfoData {
  eventType: 'cartId'
  eventName: 'vtex:cartId'
  cartId: string
}

export interface HomePageInfo extends PageInfoData {
  eventType: 'homeView'
}

export interface ProductPageInfoData extends PageInfoData {
  eventType: 'productPageInfo'
}

export interface SearchPageInfoData extends PageInfoData {
  eventType:
    | 'internalSiteSearchView'
    | 'categoryView'
    | 'departmentView'
    | 'emptySearchView'
  category?: CategoryMetaData
  department?: DepartmentMetaData
  search?: SearchMetaData
}

interface CategoryMetaData {
  id: string
  name: string
}

interface DepartmentMetaData {
  id: string
  name: string
}

interface SearchMetaData {
  term: string
  category: CategoryMetaData
  results: number
}

export interface PageViewData extends EventData {
  event: 'pageView'
  eventName: 'vtex:pageView'
  pageTitle: string
  pageUrl: string
  referrer: string
}

export interface AddToCartData extends EventData {
  event: 'addToCart'
  eventName: 'vtex:addToCart'
  items: CartItem[]
}

export interface RemoveToCartData extends EventData {
  event: 'removeFromCart'
  eventName: 'vtex:removeFromCart'
  items: CartItem[]
}

export interface CartChangedData extends EventData {
  event: 'cartChanged'
  eventName: 'vtex:cartChanged'
  items: CartItem[]
}

export interface OrderPlacedData extends Order, EventData {
  event: 'orderPlaced'
  eventName: 'vtex:orderPlaced'
}

export interface OrderPlacedTrackedData extends Order, EventData {
  event: 'orderPlacedTracked'
  eventName: 'vtex:orderPlacedTracked'
}

export interface ProductViewData extends EventData {
  event: 'productView'
  eventName: 'vtex:productView'
  product: Product
}

export interface ProductClickData extends EventData {
  event: 'productClick'
  eventName: 'vtex:productClick'
  product: ProductSummary
  list?: string
}

export interface ProductImpressionData extends EventData {
  event: 'productImpression'
  eventName: 'vtex:productImpression'
  impressions: Impression[]
  product?: ProductSummary // deprecated, use impressions list!
  position?: number // deprecated, use impressions list!
  list: string
}

export interface CartData extends EventData {
  event: 'cart'
  eventName: 'vtex:cart'
  orderForm: OrderForm
}

export interface PromoViewData extends EventData {
  event: 'promoView'
  eventName: 'vtex:promoView'
  promotions: Promotion[]
}

export interface PromotionClickData extends EventData {
  event: 'promotionClick'
  eventName: 'vtex:promotionClick'
  promotions: Promotion[]
}

export interface NewsletterSubscriptionData extends EventData {
  event: 'newsletterSubscription'
  eventName: 'vtex:newsletterSubscription'
  name: string
  email: string
  phone: string
}

interface Promotion {
  id?: string
  name?: string
  creative?: string
  position?: string
}

interface CartItem {
  brand: string
  ean: string
  category: string
  detailUrl: string
  imageUrl: string
  name: string
  price: number
  productId: string
  productRefId: string
  quantity: number
  seller: string
  sellerName: string
  skuId: string
  variant: string
}

export interface OrderForm {
  id: string
  items: CartItem[]
}

export interface Order {
  accountName: string
  corporateName: string
  coupon: string
  currency: string
  openTextField: string
  orderGroup: string
  salesChannel: string
  visitorAddressCity: string
  visitorAddressComplement: string
  visitorAddressCountry: string
  visitorAddressNeighborhood: string
  visitorAddressNumber: string
  visitorAddressPostalCode: string
  visitorAddressState: string
  visitorAddressStreet: string
  visitorContactInfo: string[]
  visitorContactPhone: string
  visitorType: string
  transactionId: string
  transactionDate: string
  transactionAffiliation: string
  transactionTotal: number
  transactionShipping: number
  transactionSubtotal: number
  transactionDiscounts: number
  transactionTax: number
  transactionCurrency: string
  transactionPaymentType: PaymentType[]
  transactionShippingMethod: ShippingMethod[]
  transactionLatestShippingEstimate: Date
  transactionProducts: ProductOrder[]
  transactionPayment: {
    id: string
  }
}

export interface Impression {
  product: ProductSummary
  position: number
}

export interface PaymentType {
  group: string
  paymentSystemName: string
  installments: number
  value: number
}

export interface ShippingMethod {
  itemId: string
  selectedSla: string
}

export interface ProductOrder {
  id: string
  name: string
  sku: string
  skuRefId: string
  skuName: string
  productRefId: string
  ean: string
  slug: string
  brand: string
  brandId: string
  seller: string
  sellerId: string
  category: string
  categoryId: string
  categoryTree: string[]
  categoryIdTree: string[]
  priceTags: PriceTag[]
  originalPrice: number
  price: number
  sellingPrice: number
  tax: number
  quantity: number
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  components: any[]
  measurementUnit: string
  unitMultiplier: number
}

export interface PriceTag {
  identifier: string
  isPercentual: boolean
  value: number
}

export interface Product {
  brand: string
  brandId: string
  categories: string[]
  categoryId: string
  categoryTree: Array<{ id: string; name: string }>
  detailUrl: string
  items: Item[]
  linkText: string
  productId: string
  productName: string
  productReference: string
  selectedSku: Item
}

export interface Item {
  itemId: string
  name: string
  ean: string
  referenceId: { Key: string; Value: string }
  imageUrl: string
  sellers: Seller[]
}

export interface ProductSummary {
  brand: string
  brandId: string
  categories: string[]
  items: ItemSummary[]
  linkText: string
  productId: string
  productName: string
  productReference: string
  sku: ItemSummary
}

interface ItemSummary {
  itemId: string
  ean: string
  name: string
  referenceId: { Key: string; Value: string }
  seller: Seller
  sellers: Seller[]
}

export interface Seller {
  commertialOffer: CommertialOffer
  sellerId: string
  sellerName: string
}

export interface CommertialOffer {
  Price: number
  ListPrice: number
  AvailableQuantity: 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 pixel-app-template/react/typings/global.d.ts from the pixel-app-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Window extends Window {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  dataLayer: any[]
}

```


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

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

[Assistant]
Here's the implementation:

```markdown
# Hardsport Theme
A simple example store implemented in Store Framework

## Preview
![](https://user-images.githubusercontent.com/1354492/64078988-a3258900-ccaf-11e9-9cec-0b7f48a5830f.png)

```


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

[User] Show me the implementation of hardsport-theme/styles/css/vtex.store-header.css from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.headerRow--logo-bar .headerRowContainer {
  min-height: 120px;
}

.headerRow--logo-bar :global(.vtex-button):hover,
.headerRow--logo-bar :global(.vtex-button):focus,
.headerRow--logo-bar :global(.vtex-button):active {
  background: #273b58;
}

.headerRowBackground--promo-bar {
  background-color: #FFF;
}

```


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

[User] Show me the implementation of hardsport-theme/styles/css/vtex.store-components.css from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.infoCardContainer--full-banner,
.infoCardContainer--full-banner-centered {
  height: 370px;
  background-position: bottom;
  margin: 0 auto;
  max-width: 1920px;
  border: none;
}

.infoCardContainer--full-banner .infoCardHeadline,
.infoCardContainer--full-banner-centered .infoCardHeadline {
  color: #FFF;
  font-size: 70px;
  line-height: 70px;
}

.infoCardContainer--display {
  height: 100%;
  min-height: 295px;
}

.infoCardContainer--display .infoCardHeadline {
  color: #FFF;
  font-size: 50px;
  line-height: 50px;
}

.infoCardContainer--display .infoCardTextContainer {
  width: 70%;
}

.infoCardContainer--full-banner-centered .infoCardTextContainer {
  width: 100%;
}

.infoCardContainer--full-banner-centered .infoCardHeadline {
  width: 100%;
  text-align: center;
}

.infoCardContainer--categories {
  min-height: 180px;
}

.infoCardContainer--categories .infoCardHeadline {
  color: #FFF;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
}

.infoCardContainer--display .infoCardCallActionContainer,
.infoCardContainer--categories .infoCardCallActionContainer,
.infoCardContainer--full-banner .infoCardCallActionContainer,
.infoCardContainer--full-banner-centered .infoCardCallActionContainer,
.infoCardContainer--display .infoCardHeadline,
.infoCardContainer--categories .infoCardHeadline,
.infoCardContainer--full-banner .infoCardHeadline,
.infoCardContainer--full-banner-centered .infoCardHeadline {
  z-index: 1;
}

.infoCardContainer--categories .infoCardTextContainer {
  width: 70%;
}

.infoCardContainer--display::after,
.infoCardContainer--categories::after,
.infoCardContainer--full-banner::after,
.infoCardContainer--full-banner-centered::after {
  content: "";
  width: 100%;
  height: 100%;
  max-width: 1920px;
  margin: 0 auto;
  display: inline-block;
  position: absolute;
  z-index: 0;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  /* http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+50,0.5+100 */
  background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.5) 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  opacity: 0;
  transition: opacity 0.3s ease;
}

.infoCardContainer--display:hover::after,
.infoCardContainer--categories:hover::after,
.infoCardContainer--full-banner:hover::after,
.infoCardContainer--full-banner-centered:hover::after {
  opacity: 1;
}

.notificationBarContainer {
  background-color: #FFF;
}

.notificationBarInner {
  min-height: 2.3em;
  font-size: .875rem;
}

.logoContainer.sizeDesktop {
  min-width: 200px;
}

.searchBarContainer {
  width: auto;
}

.notificationBarContainer {
  background-color: #FFF;
}

.notificationBarContainer .notificationContent {
  color: #222435;
}

.newsletter {
  background: inherit;
}

.newsletter .confirmationTitle,
.newsletter .confirmationText {
  text-align: inherit;
}

.newsletter .container {
  padding: 0;
}

.inputGroup {
  border: none;
}

.newsletter .label {
  font-size: inherit;
  font-weight: inherit;
}

.newsletter .form {
  text-align: left;
}

.discountInsideContainer {
  z-index: 20;
}

```


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

[User] Show me the implementation of hardsport-theme/styles/css/vtex.store-footer.css from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.row--vertical-menu .rowContainer {
  flex-direction: column;
  align-items: baseline;
}

.row--vertical-menu :global(.vtex-menu-2-x-styledLinkContainer) {
  margin: 0;
}

.row--menu {
  padding: 3em 0 4em;
}

.row--menu .rowContainer {
  align-items: baseline;
}

```


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

[User] Show me the implementation of hardsport-theme/styles/css/vtex.flex-layout.css from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.flexCol--infocard, .flexRow--infocard {
  position: relative;
}

.flexCol--brand {
  justify-content: center;
}

.flexRow--brand-bar {
  background: #FFF;
  text-align: center;
  padding: .75em 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 hardsport-theme/styles/css/vtex.shelf.css from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.container .title {
  color: inherit;
  font-weight: inherit;
}

```


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

[User] Show me the implementation of hardsport-theme/styles/configs/style.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "typeScale": [
    3,
    2.25,
    1.5,
    1.25,
    1,
    0.875,
    0.75
  ],
  "spacing": [
    0.125,
    0.25,
    0.5,
    0.75,
    1,
    1.5,
    2,
    3,
    4,
    8,
    16
  ],
  "customMedia": [
    {
      "s": 20
    },
    {
      "ns": {
        "value": 40,
        "minWidth": true
      }
    },
    {
      "m": {
        "value": 40,
        "minWidth": true
      }
    },
    {
      "l": {
        "value": 64,
        "minWidth": true
      }
    },
    {
      "xl": {
        "value": 80,
        "minWidth": true
      }
    }
  ],
  "colors": {
    "black-90": "rgba(0,0,0,.9)",
    "black-80": "rgba(0,0,0,.8)",
    "black-70": "rgba(0,0,0,.7)",
    "black-60": "rgba(0,0,0,.6)",
    "black-50": "rgba(0,0,0,.5)",
    "black-40": "rgba(0,0,0,.4)",
    "black-30": "rgba(0,0,0,.3)",
    "black-20": "rgba(0,0,0,.2)",
    "black-10": "rgba(0,0,0,.1)",
    "black-05": "rgba(0,0,0,.05)",
    "black-025": "rgba(0,0,0,.025)",
    "black-0125": "rgba(0,0,0,.0125)",
    "white-90": "rgba(255,255,255,.9)",
    "white-80": "rgba(255,255,255,.8)",
    "white-70": "rgba(255,255,255,.7)",
    "white-60": "rgba(255,255,255,.6)",
    "white-50": "rgba(255,255,255,.5)",
    "white-40": "rgba(255,255,255,.4)",
    "white-30": "rgba(255,255,255,.3)",
    "white-20": "rgba(255,255,255,.2)",
    "white-10": "rgba(255,255,255,.1)",
    "white-05": "rgba(255,255,255,.05)",
    "white-025": "rgba(255,255,255,.025)",
    "white-0125": "rgba(255,255,255,.0125)"
  },
  "semanticColors": {
    "background": {
      "base": "#F7F9FA",
      "base--inverted": "#142032",
      "action-primary": "#FA7C60",
      "action-secondary": "#eef3f7",
      "emphasis": "#f71963",
      "disabled": "#f2f4f5",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#ff4c4c",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "hover-background": {
      "action-primary": "#de6145",
      "action-secondary": "#dbe9fd",
      "emphasis": "#dd1659",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#e13232",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "active-background": {
      "action-primary": "#0c389f",
      "action-secondary": "#dbe9fd",
      "emphasis": "#dd1659",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#ff4c4c",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "text": {
      "action-primary": "#FA7C60",
      "action-secondary": "#eef3f7",
      "link": "#FA7C60",
      "emphasis": "#f71963",
      "disabled": "#979899",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#ff4c4c",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "visited-text": {
      "link": "#0c389f"
    },
    "hover-text": {
      "action-primary": "#de6145",
      "action-secondary": "#dbe9fd",
      "link": "#0c389f",
      "emphasis": "#dd1659",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#e13232",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0"
    },
    "active-text": {
      "link": "#0c389f",
      "emphasis": "#dd1659",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#ff4c4c",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0"
    },
    "border": {
      "action-primary": "#FA7C60",
      "action-secondary": "#eef3f7",
      "emphasis": "#f71963",
      "disabled": "#e3e4e6",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#ff4c4c",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "hover-border": {
      "action-primary": "#de6145",
      "action-secondary": "#dbe9fd",
      "emphasis": "#dd1659",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#e13232",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "active-border": {
      "action-primary": "#0c389f",
      "action-secondary": "#dbe9fd",
      "emphasis": "#dd1659",
      "success": "#8bc34a",
      "success--faded": "#eafce3",
      "danger": "#ff4c4c",
      "danger--faded": "#ffe6e6",
      "warning": "#ffb100",
      "warning--faded": "#fff6e0",
      "muted-1": "#727273",
      "muted-2": "#979899",
      "muted-3": "#cacbcc",
      "muted-4": "#e3e4e6",
      "muted-5": "#f2f4f5"
    },
    "on": {
      "base": "#3f3f40",
      "base--inverted": "#ffffff",
      "action-primary": "#ffffff",
      "action-secondary": "#FA7C60",
      "emphasis": "#ffffff",
      "disabled": "#979899",
      "success": "#ffffff",
      "success--faded": "#3f3f40",
      "danger": "#ffffff",
      "danger--faded": "#3f3f40",
      "warning": "#ffffff",
      "warning--faded": "#1a1a1a",
      "muted-1": "#ffffff",
      "muted-2": "#ffffff",
      "muted-3": "#3f3f40",
      "muted-4": "#3f3f40",
      "muted-5": "#3f3f40"
    },
    "hover-on": {
      "action-primary": "#ffffff",
      "action-secondary": "#FA7C60",
      "emphasis": "#ffffff",
      "success": "#ffffff",
      "success--faded": "#3f3f40",
      "danger": "#ffffff",
      "danger--faded": "#3f3f40",
      "warning": "#ffffff",
      "warning--faded": "#1a1a1a"
    },
    "active-on": {
      "action-primary": "#ffffff",
      "action-secondary": "#FA7C60",
      "emphasis": "#ffffff",
      "success": "#ffffff",
      "success--faded": "#3f3f40",
      "danger": "#ffffff",
      "danger--faded": "#3f3f40",
      "warning": "#ffffff",
      "warning--faded": "#1a1a1a"
    }
  },
  "borderWidths": [
    0,
    0.125,
    0.25,
    0.5,
    1,
    2
  ],
  "borderRadius": [
    0,
    0.125,
    0.25,
    0.5,
    1
  ],
  "widths": [
    1,
    2,
    4,
    8,
    16
  ],
  "maxWidths": [
    1,
    2,
    4,
    8,
    16,
    32,
    48,
    64,
    96
  ],
  "heights": [
    1,
    2,
    4,
    8,
    16
  ],
  "sizes": [
    {
      "name": "small",
      "value": 2
    },
    {
      "name": "regular",
      "value": 2.5
    },
    {
      "name": "large",
      "value": 3
    }
  ],
  "typography": {
    "measure": [
      30,
      34,
      20
    ],
    "styles": {
      "heading-1": {
        "fontFamily": "Fabriga, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "700",
        "fontSize": "3rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "heading-2": {
        "fontFamily": "Fabriga, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "700",
        "fontSize": "2.25rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "heading-3": {
        "fontFamily": "Fabriga, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "700",
        "fontSize": "1.75rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "heading-4": {
        "fontFamily": "Fabriga, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "normal",
        "fontSize": "1.5rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "heading-5": {
        "fontFamily": "Fabriga, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "normal",
        "fontSize": "1.25rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "heading-6": {
        "fontFamily": "Fabriga, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "normal",
        "fontSize": "1.25rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "body": {
        "fontFamily": "Fabriga, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "normal",
        "fontSize": "1rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "small": {
        "fontFamily": "Fabriga, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "normal",
        "fontSize": "0.875rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "mini": {
        "fontFamily": "Fabriga, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "normal",
        "fontSize": "0.75rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      },
      "action": {
        "fontFamily": "Fabriga, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "500",
        "fontSize": "1rem",
        "textTransform": "uppercase",
        "letterSpacing": "0"
      },
      "action--small": {
        "fontFamily": "Fabriga, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "500",
        "fontSize": "0.875rem",
        "textTransform": "uppercase",
        "letterSpacing": "0"
      },
      "action--large": {
        "fontFamily": "Fabriga, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
        "fontWeight": "500",
        "fontSize": "1.25rem",
        "textTransform": "uppercase",
        "letterSpacing": "0"
      },
      "code": {
        "fontFamily": "Consolas, monaco, monospace",
        "fontWeight": "normal",
        "fontSize": "1rem",
        "textTransform": "initial",
        "letterSpacing": "0"
      }
    }
  },
  "opacity": [
    1,
    0.9,
    0.8,
    0.7,
    0.6,
    0.5,
    0.4,
    0.3,
    0.2,
    0.1,
    0.05,
    0.025,
    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 hardsport-theme/store/blocks/home.carousel.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "carousel#home": {
    "props": {
      "autoplay": false,
      "banners": [
        {
          "image": "https://partnerchallenge29.vteximg.com.br/arquivos/preparate-invierno-81671.png",
          "page": "/"
        },
        {
          "image": "https://partnerchallenge29.vteximg.com.br/arquivos/best-shoes-81812.png",
          "page": "/"
        }
      ],
      "height": 370,
      "showArrows": true,
      "showDots": false
    }
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "header.full": {
    "blocks": [
      "header-layout.desktop"
    ]
  },
  "header-layout.desktop": {
    "children": [
      "header-row#promo-bar",
      "header-row#logo-bar",
      "header-row#menu"
    ]
  }
}

```


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

[User] Show me the implementation of hardsport-theme/store/blocks/home.bottom-banner.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#bottom-banner": {
    "title": "Bottom",
    "props": {
      "blockClass": "infocard",
      "fullWidth": true
    },
    "children": [
      "info-card#bottom-banner"
    ]
  },
  "info-card#bottom-banner": {
    "title": "Banner",
    "props": {
      "blockClass": "full-banner-centered",
      "isFullModeStyle": true,
      "textPosition": "left",
      "imageUrl": "https://partnerchallenge29.vteximg.com.br/arquivos/mountain-182181.png",
      "mobileImageUrl": "https://partnerchallenge29.vteximg.com.br/arquivos/mountain-182181.png",
      "headline": "Cada deporte. Cada temporada.",
      "subhead": "",
      "callToActionMode": "none",
      "imageActionUrl": "#",
      "textAlignment": "left"
    }
  }
}

```


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

[User] Show me the implementation of hardsport-theme/store/blocks/footer.menu.col-4.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "footer-row#menu-col-4": {
    "title": "Ofertas Semanales",
    "props": {
      "inverted": true,
      "blockClass": "vertical-menu"
    },
    "children": [
      "rich-text#footer-weekly-deals",
      "newsletter#footer"
    ]
  },
  "rich-text#footer-weekly-deals": {
    "props": {
      "textAlignment": "LEFT",
      "textPosition": "LEFT",
      "text": "Ofertas Semanales",
      "textColor": "c-action-primary",
      "font": "t-heading-5"
    }
  },
  "newsletter#footer": {
    "props": {
      "label": "¿Quieres ofertas exclusivas y acceso a productos? Regístrate para recibir alertas.",
      "placeholder": "Tu dirección de correo eletrónico",
      "submit": "OK"
    }
  }
}

```


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

[User] Show me the implementation of hardsport-theme/store/blocks/home.categories.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#categories": {
    "title": "Banners de categorías",
    "props": {
      "colGap": 8,
      "marginBottom": 8
    },
    "children": [
      "flex-layout.col#categories1",
      "flex-layout.col#categories2",
      "flex-layout.col#categories3"
    ]
  },
  "rich-text#categories-title": {
    "title": "Título de categorías",
    "props": {
      "blockClass": "slim-title",
      "textAlignment": "CENTER",
      "textPosition": "CENTER",
      "text": "Top Categorías",
      "textColor": "c-on-base",
      "font": "t-heading-2"
    }
  },
  "flex-layout.col#categories1": {
    "props": {
      "blockClass": "infocard"
    },
    "children": [
      "info-card#categories1"
    ]
  },
  "flex-layout.col#categories2": {
    "props": {
      "blockClass": "infocard"
    },
    "children": [
      "info-card#categories2"
    ]
  },
  "flex-layout.col#categories3": {
    "props": {
      "blockClass": "infocard"
    },
    "children": [
      "info-card#categories3"
    ]
  },
  "info-card#categories1": {
    "title": "banner 1",
    "props": {
      "blockClass": "categories",
      "isFullModeStyle": true,
      "textPosition": "center",
      "imageUrl": "https://partnerchallenge29.vteximg.com.br/arquivos/bike-infocard-1891b3d.png",
      "headline": "Bikes",
      "subhead": "",
      "callToActionMode": "none",
      "imageActionUrl": "#",
      "textAlignment": "center"
    }
  },
  "info-card#categories2": {
    "title": "banner 2",
    "props": {
      "blockClass": "categories",
      "isFullModeStyle": true,
      "textPosition": "center",
      "imageUrl": "https://partnerchallenge29.vteximg.com.br/arquivos/sky-infocard-08138n1.png",
      "headline": "Camping",
      "subhead": "",
      "callToActionMode": "none",
      "imageActionUrl": "#",
      "textAlignment": "center"
    }
  },
  "info-card#categories3": {
    "title": "banner 3",
    "props": {
      "blockClass": "categories",
      "isFullModeStyle": true,
      "textPosition": "center",
      "imageUrl": "https://partnerchallenge29.vteximg.com.br/arquivos/stepping-up-infocard-1823918.png",
      "headline": "Calzado",
      "subhead": "",
      "callToActionMode": "none",
      "imageActionUrl": "#",
      "textAlignment": "center"
    }
  }
}

```


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

[User] Show me the implementation of hardsport-theme/store/blocks/footer.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "footer": {
    "blocks": [
      "footer-layout.desktop"
    ]
  },
  "footer-layout.desktop": {
    "children": [
      "footer-row#menu",
      "footer-row#copyright"
    ]
  }
}

```


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

[User] Show me the implementation of hardsport-theme/store/blocks/footer.menu.col-3.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "footer-row#menu-col-3": {
    "title": "Redes sociales",
    "props": {
      "inverted": true,
      "blockClass": "vertical-menu"
    },
    "children": [
      "rich-text#footer-get-connected",
      "menu#footer-get-connected"
    ]
  },
  "rich-text#footer-get-connected": {
    "props": {
      "textAlignment": "LEFT",
      "textPosition": "LEFT",
      "text": "Redes sociales",
      "textColor": "c-action-primary",
      "font": "t-heading-5"
    }
  },
  "menu#footer-get-connected": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#footer-col-3-menu1",
      "menu-item#footer-col-3-menu2",
      "menu-item#footer-col-3-menu3"
    ]
  },
  "menu-item#footer-col-3-menu1": {
    "props": {
      "type": "custom",
      "itemProps": {
	"href": "#",
	"text": "Facebook"
      }
    }
  },
  "menu-item#footer-col-3-menu2": {
    "props": {
      "type": "custom",
      "itemProps": {
	"href": "#",
	"text": "Twitter"
      }
    }
  },
  "menu-item#footer-col-3-menu3": {
    "props": {
      "type": "custom",
      "itemProps": {
	"href": "#",
	"text": "Instagram"
      }
    }
  }
}

```


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

[User] Show me the implementation of hardsport-theme/store/blocks/footer.copyright.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "footer-row#copyright": {
    "title": "Derechos",
    "props": {
      "inverted": true,
      "fullWidth": false
    },
    "children": [
      "rich-text#footer-copyright",
      "footer-spacer",
      "powered-by"
    ]
  },
  "rich-text#footer-copyright": {
    "props": {
      "textAlignment": "LEFT",
      "textPosition": "LEFT",
      "text": "©2019  HardSport Artículos Deportivos. Todos los derechos reservados.",
      "textColor": "c-on-base--inverted",
      "font": "t-mini"
    }
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "header-row#menu": {
    "props": {
      "inverted": true
    },
    "children": [
      "header-spacer",
      "vtex.menu@2.x:menu#header",
      "header-spacer"
    ]
  },
  "vtex.menu@2.x:menu#header": {
    "children": [
      "menu-item#header-menu1",
      "menu-item#header-menu2",
      "menu-item#header-menu3",
      "menu-item#header-menu4",
      "menu-item#header-menu5",
      "menu-item#header-menu6"
    ]
  },
  "menu-item#header-menu1": {
    "props": {
      "type": "custom",
      "itemProps": {
	"href": "#",
	"text": "HOMBRE"
      }
    }
  },
  "menu-item#header-menu2": {
    "props": {
      "type": "custom",
      "itemProps": {
	"href": "#",
	"text": "MUJER"
      }
    }
  },
  "menu-item#header-menu3": {
    "props": {
      "type": "custom",
      "itemProps": {
	"href": "#",
	"text": "NIÑOS"
      }
    }
  },
  "menu-item#header-menu4": {
    "props": {
      "type": "custom",
      "itemProps": {
	"href": "#",
	"text": "EQUIPAMENTO"
      }
    }
  },
  "menu-item#header-menu5": {
    "props": {
      "type": "custom",
      "itemProps": {
	"href": "#",
	"text": "ACCESORIOS"
      }
    }
  },
  "menu-item#header-menu6": {
    "props": {
      "type": "custom",
      "itemProps": {
	"href": "#",
	"text": "SALE"
      }
    }
  }
}

```


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

[User] Show me the implementation of hardsport-theme/store/blocks/home.display.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#display": {
    "title": "Destacados",
    "props": {
      "marginTop": 8,
      "marginBottom": 6,
      "colGap": 8,
      "rowGap": 8,
      "fullWidth": false
    },
    "children": [
      "flex-layout.col#display1",
      "flex-layout.col#display2",
      "flex-layout.col#display3"
    ]
  },
  "flex-layout.col#display1": {
    "props": {
      "blockClass": "infocard"
    },
    "children": [
      "info-card#display1"
    ]
  },
  "flex-layout.col#display2": {
    "props": {
      "blockClass": "infocard"
    },
    "children": [
      "info-card#display2"
    ]
  },
  "flex-layout.col#display3": {
    "props": {
      "blockClass": "infocard"
    },
    "children": [
      "info-card#display3"
    ]
  },
  "info-card#display1": {
    "title": "Destado 1",
    "props": {
      "blockClass": "display",
      "isFullModeStyle": true,
      "textPosition": "center",
      "imageUrl": "https://partnerchallenge29.vteximg.com.br/arquivos/stepping-up-infocard-1823918.png",
      "headline": "Nueva temporada.",
      "subhead": "",
      "callToActionText": "Shop Now",
      "callToActionUrl": "#",
      "imageActionUrl": "#",
      "textAlignment": "center"
    }
  },
  "info-card#display2": {
    "title": "Destado 2",
    "props": {
      "blockClass": "display",
      "isFullModeStyle": true,
      "textPosition": "center",
      "imageUrl": "https://partnerchallenge29.vteximg.com.br/arquivos/man-lifiting.png",
      "headline": "Zapatillas favoritas.",
      "subhead": "",
      "callToActionText": "Shop Now",
      "callToActionUrl": "#",
      "imageActionUrl": "#",
      "textAlignment": "center"
    }
  },
  "info-card#display3": {
    "title": "Destado 3",
    "props": {
      "blockClass": "display",
      "isFullModeStyle": true,
      "textPosition": "center",
      "imageUrl": "https://partnerchallenge29.vteximg.com.br/arquivos/winter-boots-2811.png",
      "headline": "Moda de invierno.",
      "subhead": "",
      "callToActionText": "Shop Now",
      "callToActionUrl": "#",
      "imageActionUrl": "#",
      "textAlignment": "center"
    }
  }
}

```


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

[User] Show me the implementation of hardsport-theme/store/blocks/footer.menu.col-2.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "footer-row#menu-col-2": {
    "title": "Acerca de nosotros",
    "props": {
      "inverted": true,
      "blockClass": "vertical-menu"
    },
    "children": [
      "rich-text#footer-about-us",
      "menu#footer-about-us"
    ]
  },
  "rich-text#footer-about-us": {
    "props": {
      "textAlignment": "LEFT",
      "textPosition": "LEFT",
      "text": "Acerca de nosotros",
      "textColor": "c-action-primary",
      "font": "t-heading-5"
    }
  },
  "menu#footer-about-us": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#footer-col-2-menu1",
      "menu-item#footer-col-2-menu2",
      "menu-item#footer-col-2-menu3",
      "menu-item#footer-col-2-menu4",
      "menu-item#footer-col-2-menu5",
      "menu-item#footer-col-2-menu6"
    ]
  },
  "menu-item#footer-col-2-menu1": {
    "props": {
      "type": "custom",
      "itemProps": {
	"href": "#",
	"text": "Acerca de nosotros"
      }
    }
  },
  "menu-item#footer-col-2-menu2": {
    "props": {
      "type": "custom",
      "itemProps": {
	"href": "#",
	"text": "Oportunidades de trabajo"
      }
    }
  },
  "menu-item#footer-col-2-menu3": {
    "props": {
      "type": "custom",
      "itemProps": {
	"href": "#",
	"text": "Historia"
      }
    }
  },
  "menu-item#footer-col-2-menu4": {
    "props": {
      "type": "custom",
      "itemProps": {
	"href": "#",
	"text": "Servicios de tienda"
      }
    }
  },
  "menu-item#footer-col-2-menu5": {
    "props": {
      "type": "custom",
      "itemProps": {
	"href": "#",
	"text": "Términos y condiciones"
      }
    }
  },
  "menu-item#footer-col-2-menu6": {
    "props": {
      "type": "custom",
      "itemProps": {
	"href": "#",
	"text": "Opciones de pago"
      }
    }
  }
}

```


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

[User] Show me the implementation of hardsport-theme/store/blocks/footer.menu.col-1.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "footer-row#menu-col-1": {
    "title": "Servicio al cliente",
    "props": {
      "inverted": true,
      "blockClass": "vertical-menu"
    },
    "children": [
      "rich-text#footer-services",
      "menu#footer-services"
    ]
  },
  "rich-text#footer-services": {
    "props": {
      "textAlignment": "LEFT",
      "textPosition": "LEFT",
      "text": "Servicio al cliente",
      "textColor": "c-action-primary",
      "font": "t-heading-5"
    }
  },
  "menu#footer-services": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#footer-col-1-menu1",
      "menu-item#footer-col-1-menu2",
      "menu-item#footer-col-1-menu3",
      "menu-item#footer-col-1-menu4"
    ]
  },
  "menu-item#footer-col-1-menu1": {
    "props": {
      "type": "custom",
      "itemProps": {
	"href": "#",
	"text": "Estatus de la orden"
      }
    }
  },
  "menu-item#footer-col-1-menu2": {
    "props": {
      "type": "custom",
      "itemProps": {
	"href": "#",
	"text": "Devoluciones"
      }
    }
  },
  "menu-item#footer-col-1-menu3": {
    "props": {
      "type": "custom",
      "itemProps": {
	"href": "#",
	"text": "Envío"
      }
    }
  },
  "menu-item#footer-col-1-menu4": {
    "props": {
      "type": "custom",
      "itemProps": {
	"href": "#",
	"text": "Contáctenos"
      }
    }
  }
}

```


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

[User] Show me the implementation of hardsport-theme/store/blocks/home.brand-bar.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#brand-bar": {
    "title": "Barra de marcas",
    "props": {
      "blockClass": "brand-bar",
      "colGap": 5
    },
    "children": [
      "flex-layout.col#brand1",
      "flex-layout.col#brand2",
      "flex-layout.col#brand3",
      "flex-layout.col#brand4",
      "flex-layout.col#brand5",
      "flex-layout.col#brand6"
    ]
  },
  "flex-layout.col#brand1": {
    "props": {
      "blockClass": "brand",
      "preventVerticalStretch": true
    },
    "children": [
      "image#brand1"
    ]
  },
  "flex-layout.col#brand2": {
    "props": {
      "blockClass": "brand",
      "preventVerticalStretch": true
    },
    "children": [
      "image#brand2"
    ]
  },
  "flex-layout.col#brand3": {
    "props": {
      "blockClass": "brand",
      "preventVerticalStretch": true
    },
    "children": [
      "image#brand3"
    ]
  },
  "flex-layout.col#brand4": {
    "props": {
      "blockClass": "brand",
      "preventVerticalStretch": true
    },
    "children": [
      "image#brand4"
    ]
  },
  "flex-layout.col#brand5": {
    "props": {
      "blockClass": "brand",
      "preventVerticalStretch": true
    },
    "children": [
      "image#brand5"
    ]
  },
  "flex-layout.col#brand6": {
    "props": {
      "blockClass": "brand",
      "preventVerticalStretch": true
    },
    "children": [
      "image#brand6"
    ]
  },
  "image#brand1": {
    "title": "brand 1",
    "props": {
      "src": "https://partnerchallenge29.vteximg.com.br/arquivos/brand-adidas-1238108.png"
    }
  },
  "image#brand2": {
    "title": "brand 2",
    "props": {
      "src": "https://partnerchallenge29.vteximg.com.br/arquivos/brand-mizuno-398108.png"
    }
  },
  "image#brand3": {
    "title": "brand 3",
    "props": {
      "src": "https://partnerchallenge29.vteximg.com.br/arquivos/brand-nike-191.png"
    }
  },
  "image#brand4": {
    "title": "brand 4",
    "props": {
      "src": "https://partnerchallenge29.vteximg.com.br/arquivos/brand-puma-12891371.png"
    }
  },
  "image#brand5": {
    "title": "brand 5",
    "props": {
      "src": "https://partnerchallenge29.vteximg.com.br/arquivos/brand-tnf-89231978.png"
    }
  },
  "image#brand6": {
    "title": "brand 6",
    "props": {
      "src": "https://partnerchallenge29.vteximg.com.br/arquivos/brand-under-amour-12818.png"
    }
  }
}

```


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

[User] Show me the implementation of hardsport-theme/store/blocks/home.custom.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#custom-landing-page": {
    "blocks": [
      "flex-layout.row#custom-landing-page"
    ]
  },

  "flex-layout.row#custom-landing-page": {
    "title": "Contenido",
    "props": {
      "marginLeft": 5,
      "marginRight": 5
    },
    "children": [
      "flex-layout.col#image-custom-landing-page",
      "flex-layout.col#text-custom-landing-page"
    ]
  },

  "flex-layout.col#image-custom-landing-page": {
    "children": [
      "image#custom-landing-page"
    ],
    "props": {
      "preventVerticalStretch": true,
      "width": "30%"
    }
  },
  "flex-layout.col#text-custom-landing-page": {
    "children": [
      "rich-text#about-title",
      "rich-text#about-content"
    ],
    "props": {
      "preventVerticalStretch": true,
      "width": "70%"
    }
  },

  "rich-text#about-title": {
    "title": "Título",
    "props": {
      "text":
      "# Título"
										   }
  },

  "rich-text#about-content": {
    "title": "Texto",
    "props": {
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pretium odio vitae vulputate efficitur. \n\n Morbi porta, ligula a sodales sagittis, ex metus molestie nisl, eu efficitur dolor ligula a sapien. Nullam et luctus arcu, nec fringilla tellus. Cras pellentesque leo vitae leo condimentum, in lacinia velit pharetra. Donec vitae velit in dolor ornare hendrerit sit amet at ex. \n\n Integer pulvinar sodales justo, eu malesuada diam lacinia ac. Curabitur aliquam, lorem et semper imperdiet, ipsum est dapibus massa, sed consequat dui diam ut arcu. Vestibulum eget massa ligula. Cras ultricies quis nibh vel molestie. Morbi eleifend magna eu diam eleifend commodo. Aenean lobortis urna vel sodales placerat. Proin sed faucibus magna. Quisque in felis eget lacus mattis tempus consequat quis ipsum. Morbi semper risus in tortor aliquet sagittis."
    }
  },

  "image#custom-landing-page": {
    "title": "Imagen",
    "props": {
      "src": "https://partnerchallenge29.vteximg.com.br/arquivos/chile-f81bd.png",
      "maxHeight": "600px"
    }
  }
}

```


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

[User] Show me the implementation of hardsport-theme/store/blocks/home.shelf.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "shelf#home": {
    "blocks": ["product-summary.shelf"],
    "props": {
      "orderBy": "OrderByTopSaleDESC",
      "paginationDotsVisibility": "desktopOnly",
      "productList": {
        "maxItems": 10,
        "itemsPerPage": 4,
        "minItemsPerPage": 1.5,
        "scroll": "BY_PAGE",
        "arrows": true,
        "titleText": "Los Más Vendidos"
      }
    }
  },
  "product-summary.shelf": {
    "children": [
      "product-summary-image",
      "product-summary-name",
      "product-summary-space",
      "product-summary-price",
      "product-summary-buy-button"
    ]
  },
  "product-summary-buy-button": {
    "props": {
      "buyButtonText": "Comprar"
    }
  },
  "product-summary-image": {
    "props": {
      "showBadge": false,
      "badgeText": ""
    }
  }
}

```


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

[User] Show me the implementation of hardsport-theme/store/blocks/header.promo-bar.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "header-row#promo-bar": {
    "props": {
      "blockClass": "promo-bar"
    },
    "children": [
      "notification.bar"
    ]
  },
  "notification.bar": {
    "title": "Barra de Promoción",
    "props": {
      "content": "25% DE DESCUENTO USANDO EL CÓDIGO: FIESTASPATRIAS"
    }
  }
}

```


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

[User] Show me the implementation of hardsport-theme/store/blocks/product.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.product": {
    "children": [
      "flex-layout.row#product-breadcrumb",
      "flex-layout.row#product-main",
      "shelf.relatedProducts",
      "product-reviews",
      "product-questions-and-answers"
    ]
  },
  "flex-layout.row#product-breadcrumb": {
    "props": {
      "marginTop": 4
    },
    "children": ["breadcrumb"]
  },
  "flex-layout.row#product-main": {
    "props": {
      "colGap": 7,
      "rowGap": 7,
      "marginTop": 4,
      "marginBottom": 7,
      "paddingTop": 7,
      "paddingBottom": 7
    },
    "children": [
      "flex-layout.col#product-image",
      "flex-layout.col#product-price"
    ]
  },
  "flex-layout.col#product-image": {
    "props": {
      "width": "60%",
      "rowGap": 0
    },
    "children": ["product-images"]
  },
  "product-images": {
    "props": {
      "displayThumbnailsArrows": true
    }
  },
  "flex-layout.col#product-price": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0
    },
    "children": [
      "product-name",
      "product-price#product-details",
      "product-separator",
      "product-quantity",
      "product-identifier.product",
      "sku-selector",
      "flex-layout.row#buy-button",
      "availability-subscriber",
      "share#default"
    ]
  },
  "product-price#product-details": {
    "props": {
      "showInstallments": true,
      "showSavings": true
    }
  },
  "flex-layout.row#buy-button": {
    "props": {
      "marginTop": 4,
      "marginBottom": 7
    },
    "children": ["buy-button"]
  },
  "share#default": {
    "props": {
      "social": {
        "Facebook": true,
        "WhatsApp": true,
        "Twitter": false,
        "Pinterest": true
      }
    }
  },
  "product-price#default": {
    "props": {
      "labelListPrice": "From",
      "labelSellingPrice": "To",
      "showListPrice": true,
      "showLabels": true,
      "showInstallments": true,
      "showSavings": true
    }
  },
  "product-name#default": {
    "props": {
      "showBrandName": true,
      "showSku": false,
      "showProductReference": false
    }
  }
}

```


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

[User] Show me the implementation of hardsport-theme/store/blocks/footer.menu.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "footer-row#menu": {
    "title": "Menú",
    "props": {
      "blockClass": "menu",
      "inverted": true
    },
    "children": [
      "footer-row#menu-col-1",
      "footer-row#menu-col-2",
      "footer-row#menu-col-3",
      "footer-row#menu-col-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 hardsport-theme/store/blocks/home.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.home": {
    "blocks": [
      "carousel#home",
      "flex-layout.row#brand-bar",
      "flex-layout.row#display",
      "shelf#home",
      "rich-text#categories-title",
      "flex-layout.row#categories",
      "flex-layout.row#bottom-banner"
    ]
  }
}

```


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

[User] Show me the implementation of hardsport-theme/store/blocks/header.logo-bar.json from the hardsport-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "header-row#logo-bar": {
     "props": {
       "blockClass": "logo-bar",
       "inverted": true
     },
    "children": [
      "logo",
      "header-spacer",
      "search-bar",
      "login",
      "minicart"
    ]
  },
  "logo": {
    "props": {
      "href": "/",
      "url": "https://partnerchallenge29.vteximg.com.br/arquivos/logo-81n3981n.png"
    }
  }
}

```


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

[User] Show me the implementation of product-availability/messages/en.json from the product-availability VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.product-availability.title": "Product Availability",
  "admin/editor.product-availability.threshold.title": "Threshold quantity",
  "admin/editor.product-availability.threshold.description": "Minimum quantity that makes low stock message appear (if message is set)",
  "admin/editor.product-availability.lowStockMessage.title": "Low stock message",
  "admin/editor.product-availability.lowStockMessage.description": "Text to be shown to user when stock is lower than threshold. Should have {quantity} inside the given string, to be replaced for the threshold property. Example: \"Only {quantity} left!\". Leave empty to not show.",
  "admin/editor.product-availability.highStockMessage.title": "High stock message",
  "admin/editor.product-availability.highStockMessage.description": "Text to be shown when stock is higher or equal than threshold. If left empty, won't show",
  "admin/editor.product-availability.showAvailability.title": "Enable availability message",
  "admin/editor.product-availability.showAvailability.description": "Option to show availability",
  "admin/editor.product-availability.showAvailabilityMessage.title": "Availability message",
  "admin/editor.product-availability.showAvailabilityMessage.description": "Text to be shown when \"Enable availability message\" option is set to \"stock\"",
  "store/product-availability.container.aria-label": "Product availability"
}

```


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

[User] Show me the implementation of product-availability/messages/context.json from the product-availability VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.product-availability.title": "Product Availability",
  "admin/editor.product-availability.description": "Component that shows the remaining available quantity",
  "admin/editor.product-availability.threshold.title": "Threshold quantity",
  "admin/editor.product-availability.threshold.description": "Minimum quantity that makes low stock message appear (if message is set)",
  "admin/editor.product-availability.lowStockMessage.title": "Low stock message",
  "admin/editor.product-availability.lowStockMessage.description": "Text to be shown to user when stock is lower than threshold. Should have {quantity} inside the given string, to be replaced for the threshold property. Example: \"Only {quantity} left!\". Leave empty to not show.",
  "admin/editor.product-availability.highStockMessage.title": "High stock message",
  "admin/editor.product-availability.highStockMessage.description": "Text to be shown when stock is higher or equal than threshold. If left empty, won't show",
  "admin/editor.product-availability.showAvailability.title": "Enable availability message",
  "admin/editor.product-availability.showAvailability.description": "Option to show availability",
  "admin/editor.product-availability.showAvailabilityMessage.title": "Availability message",
  "admin/editor.product-availability.showAvailabilityMessage.description": "Text to be shown when \"Enable availability message\" option is set to \"stock\"",
  "store/product-availability.container.aria-label": "Product availability"
}

```


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

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

[Assistant]
Here's the implementation:

```markdown
> 📢 Use this project, [contribute](https://github.com/vtex-apps/product-availability) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

# Product Availability

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

The Product Availability app displays text messages regarding the in-stock quantity for products.

![product-availability](https://user-images.githubusercontent.com/52087100/99307082-c8f76900-2834-11eb-96f2-df5e9d2bc49a.png)

## Configuration

1. Add the Product Availability app to your theme's dependencies in the `manifest.json` file:

```diff
 "dependencies": {
+  "vtex.product-availability": "0.x"
 }
```

2. Add the `product-availability` block to the desired theme block whose data is fetched from the [Product Context](https://developers.vtex.com/vtex-developer-docs/docs/vtex-product-context), such as the [Minicart](https://developers.vtex.com/vtex-developer-docs/docs/vtex-minicart). For example:

```json
"product-availability": {
  "props": {
    "threshold": "10",
    "lowStockMessage": "Only {quantity} left!",
    "highStockMessage": "Item in stock!"
  }
}
```

| Prop name           | Type      | Description                                                 | Default value |
| ------------------- | --------- | ----------------------------------------------------------- | ------------- |
| `threshold`     | `number` | Minimum product quantity that makes the low stock message to be displayed (if any message is set in the `lowStockMessage` prop).   | `0` |
| `lowStockMessage` | `string` | Message text to be displayed when the in-stock quantity is lower than the quantity defined in the `threshold` prop. This prop value must have `{quantity}` inside the string text in order to properly display the stock quantity according to the threshold. For example: `"Only {quantity} left!`. Notice: if this prop's value is left empty, no message will be shown. | `""` |
| `highStockMessage`  | `string` | Message text to be displayed when the in-stock quantity is higher or equal than the quantity defined in the `threshold` prop. Notice: if this prop's value is left empty, no message will be shown. | `""` |

## Customization

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

| CSS Handles |
| ----------- |
| `container` |
| `highStockText` |
| `lowStockHighlight` |
| `lowStockText` |

<!-- DOCS-IGNORE:start -->

## Contributors ✨

Thanks goes to these wonderful people:

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind are welcome!

<!-- DOCS-IGNORE:end -->

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-intl": "^5.12.3"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.4",
    "@vtex/test-tools": "^3.1.0",
    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles",
    "vtex.native-types": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.native-types@0.7.5/public/@types/vtex.native-types",
    "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.3/public/@types/vtex.render-runtime"
  },
  "version": "0.3.2"
}

```


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

[User] Show me the implementation of product-availability/react/ProductAvailability.tsx from the product-availability VTEX app.

[Assistant]
Here's the implementation:

```tsx
import ProductAvailabilityWrapper from './components/ProductAvailabilityWrapper'

export default ProductAvailabilityWrapper

```


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

[User] Show me the implementation of product-availability/store/contentSchemas.json from the product-availability VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "definitions": {
    "ProductAvailability": {
      "properties": {
        "lowStockMessage": {
          "title": "admin/editor.product-availability.lowStockMessage.title",
          "description": "admin/editor.product-availability.lowStockMessage.description",
          "default": "",
          "$ref": "app:vtex.native-types#/definitions/text"
        },
        "highStockMessage": {
          "title": "admin/editor.product-availability.highStockMessage.title",
          "description": "admin/editor.product-availability.highStockMessage.description",
          "default": "",
          "$ref": "app:vtex.native-types#/definitions/text"
        },
        "showAvailabilityMessage": {
          "title": "admin/editor.product-availability.showAvailabilityMessage.title",
          "description": "admin/editor.product-availability.showAvailabilityMessage.description",
          "default": "",
          "$ref": "app:vtex.native-types#/definitions/text"
        },
        "threshold": {
          "title": "admin/editor.product-availability.threshold.title",
          "description": "admin/editor.product-availability.threshold.description",
          "type": "number",
          "default": 0
        },
        "showAvailability": {
          "title": "admin/editor.product-availability.showAvailability.title",
          "description": "admin/editor.product-availability.showAvailability.description",
          "default": "disabled",
          "enum": ["disabled", "stock"]
        }
      }
    }
  }
}

```


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

[User] Show me the implementation of product-availability/store/interfaces.json from the product-availability VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-availability": {
    "component": "ProductAvailability",
    "content": {
      "$ref": "app:vtex.product-availability#/definitions/ProductAvailability"
    }
  }
}

```


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

[User] Show me the implementation of product-availability/react/__test__/ProductAvailability.test.tsx from the product-availability VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-env jest */
import React from 'react'
import { render } from '@vtex/test-tools/react'

import ProductAvailability from '../components/ProductAvailability'

describe('Product Availability component', () => {
  it('should not render with availability 0 or null', () => {
    const { queryByText } = render(
      <ProductAvailability
        availableQuantity={0}
        lowStockMessage="Only {quantity} left!"
        highStockMessage="High stock"
        threshold={0}
      />
    )

    expect(queryByText('Only')).toBeNull()
    expect(queryByText('left!')).toBeNull()
    expect(queryByText('High stock')).toBeNull()
  })

  it('should not render with low stock message', () => {
    const { getByText, queryByText } = render(
      <ProductAvailability
        availableQuantity={10}
        lowStockMessage="Only {quantity} left!"
        highStockMessage="High stock"
        threshold={100}
      />
    )

    expect(getByText('Only')).toBeDefined()
    expect(getByText('left!')).toBeDefined()
    expect(getByText('10')).toBeDefined()

    // High stock message should not be visible
    expect(queryByText('High stock')).toBeNull()
  })

  it('should not render with high stock message', () => {
    const { getByText, queryByText } = render(
      <ProductAvailability
        availableQuantity={105}
        lowStockMessage="Only {quantity} left!"
        highStockMessage="In stock!"
        threshold={100}
      />
    )

    expect(getByText('In stock!')).toBeDefined()

    // low stock message should not be visible
    expect(queryByText('Only')).toBeNull()
  })

  it('should render available quantity without a message', () => {
    const { getByText } = render(
      <ProductAvailability
        threshold={0}
        availableQuantity={10}
        showAvailability="stock"
        showAvailabilityMessage="{quantity}"
      />
    )

    expect(getByText('10')).toBeDefined()
  })

  it('should render available quantity with a message', () => {
    const { getByText } = render(
      <ProductAvailability
        threshold={0}
        availableQuantity={50}
        showAvailability="stock"
        showAvailabilityMessage="Items in stock:{quantity}"
      />
    )

    expect(getByText('Items in stock:')).toBeDefined()
    expect(getByText('50')).toBeDefined()
  })
})

```


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

[User] Show me the implementation of product-availability/react/typings/css.d.ts from the product-availability VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.css' {
  const css: Record<string, string>
  export default css
}

```


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

[User] Show me the implementation of product-availability/react/components/ProductAvailabilityWrapper.tsx from the product-availability VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useMemo } from 'react'
import { useProduct } from 'vtex.product-context'
import type { ProductTypes } from 'vtex.product-context'
import { useCssHandles } from 'vtex.css-handles'
import type { CssHandlesTypes } from 'vtex.css-handles'
import { formatIOMessage } from 'vtex.native-types'
import { useIntl, defineMessages } from 'react-intl'

import ProductAvailability from './ProductAvailability'
import { CssHandlesProvider } from './CssHandlesContext'

const CONTAINER_CSS_HANDLES = ['container'] as const
const LOW_STOCK_CSS_HANDLES = ['lowStockText', 'lowStockHighlight'] as const
const HIGH_STOCK_CSS_HANDLES = ['highStockText'] as const
const SHOW_AVAILABLE_CSS_HANDLES = [
  'showAvailableText',
  'showAvailableTextHighlight',
] as const

export const CSS_HANDLES = [
  ...CONTAINER_CSS_HANDLES,
  ...LOW_STOCK_CSS_HANDLES,
  ...HIGH_STOCK_CSS_HANDLES,
  ...SHOW_AVAILABLE_CSS_HANDLES,
] as const

export function getFirstAvailableSeller(sellers?: ProductTypes.Seller[]) {
  if (!sellers || sellers.length === 0) {
    return
  }

  const availableSeller = sellers.find(
    seller => seller.commertialOffer.AvailableQuantity !== 0
  )

  return availableSeller
}

interface Props {
  threshold: number
  lowStockMessage?: string
  highStockMessage?: string
  showAvailability?: 'stock' | 'disabled'
  showAvailabilityMessage?: string
  classes?: CssHandlesTypes.CustomClasses<
    typeof CONTAINER_CSS_HANDLES &
      (
        | typeof LOW_STOCK_CSS_HANDLES
        | typeof HIGH_STOCK_CSS_HANDLES
        | typeof SHOW_AVAILABLE_CSS_HANDLES
      )
  >
}

function ProductAvailabilityWrapper({
  threshold = 0,
  lowStockMessage,
  highStockMessage,
  showAvailability,
  showAvailabilityMessage,
  classes,
}: Props) {
  const { handles, withModifiers } = useCssHandles(CSS_HANDLES, { classes })
  const productContextValue = useProduct()
  const intl = useIntl()

  const formattedLowStockMessage = useMemo(
    () =>
      formatIOMessage({
        id: lowStockMessage,
        intl,
      }),
    [lowStockMessage, intl]
  ) as string

  const formattedHighStockMessage = useMemo(
    () =>
      formatIOMessage({
        id: highStockMessage,
        intl,
      }),
    [highStockMessage, intl]
  ) as string

  const formattedShowAvailabilityMessage = useMemo(
    () =>
      formatIOMessage({
        id: showAvailabilityMessage,
        intl,
      }),
    [showAvailabilityMessage, intl]
  ) as string

  if (!productContextValue) {
    return null
  }

  const seller = getFirstAvailableSeller(
    productContextValue.selectedItem?.sellers
  )

  const availableQuantity = seller?.commertialOffer.AvailableQuantity

  return (
    <CssHandlesProvider handles={handles} withModifiers={withModifiers}>
      <ProductAvailability
        threshold={threshold}
        lowStockMessage={formattedLowStockMessage}
        highStockMessage={formattedHighStockMessage}
        showAvailability={showAvailability}
        showAvailabilityMessage={formattedShowAvailabilityMessage}
        availableQuantity={availableQuantity}
      />
    </CssHandlesProvider>
  )
}

defineMessages({
  title: {
    defaultMessage: 'Product Availability',
    id: 'admin/editor.product-availability.title',
  },
  lowStockMessageTitle: {
    defaultMessage: 'Low stock message',
    id: 'admin/editor.product-availability.lowStockMessage.title',
  },
  lowStockMessageDescription: {
    defaultMessage:
      'Text to be shown to user when stock is lower than threshold. Should have {quantity} inside the given string, to be replaced for the threshold property. Example: "Only {quantity} left!". Leave empty to not show.',
    id: 'admin/editor.product-availability.lowStockMessage.description',
  },
  highStockMessageTitle: {
    defaultMessage: 'High stock message',
    id: 'admin/editor.product-availability.highStockMessage.title',
  },
  highStockMessageDescription: {
    defaultMessage:
      "Text to be shown when stock is higher or equal than threshold. If left empty, won't show",
    id: 'admin/editor.product-availability.highStockMessage.description',
  },
  showAvailabilityMessageTitle: {
    defaultMessage: 'Availability message',
    id: 'admin/editor.product-availability.showAvailabilityMessage.title',
  },
  showAvailabilityMessageDescription: {
    defaultMessage:
      'Text to be shown when "Enable availability message" option is set to "stock"',
    id: 'admin/editor.product-availability.showAvailabilityMessage.description',
  },
  thresholdTitle: {
    defaultMessage: 'Threshold quantity',
    id: 'admin/editor.product-availability.threshold.title',
  },
  thresholdDescription: {
    defaultMessage:
      'Minimum quantity that makes low stock message appear (if message is set)',
    id: 'admin/editor.product-availability.threshold.description',
  },
  showAvailabilityTitle: {
    defaultMessage: 'Enable availability message',
    id: 'admin/editor.product-availability.showAvailability.title',
  },
  showAvailabilityDescription: {
    defaultMessage: 'Option to show availability',
    id: 'admin/editor.product-availability.showAvailability.description',
  },
})

ProductAvailabilityWrapper.schema = {
  title: 'admin/editor.product-availability.title',
}

export default ProductAvailabilityWrapper

```


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

[User] Show me the implementation of product-availability/react/components/LowStock.tsx from the product-availability VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment } from 'react'

import { useContextCssHandles } from './CssHandlesContext'

interface Props {
  text: string
  availableQuantity: number
}

function LowStock({ text, availableQuantity }: Props) {
  const { handles } = useContextCssHandles()
  const [before, after] = text.split('{quantity}')

  return (
    <Fragment>
      {before && (
        <span className={`${handles.lowStockText} c-muted-2 t-body`}>
          {before}
        </span>
      )}
      {availableQuantity && (
        <span className={`${handles.lowStockHighlight} c-muted-2 t-body b mh1`}>
          {availableQuantity}
        </span>
      )}
      {after && (
        <span className={`${handles.lowStockText} c-muted-2 t-body`}>
          {after}
        </span>
      )}
    </Fragment>
  )
}

export default LowStock

```


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

[User] Show me the implementation of product-availability/react/components/CssHandlesContext.tsx from the product-availability VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { createCssHandlesContext } from 'vtex.css-handles'

import { CSS_HANDLES } from './ProductAvailabilityWrapper'

const { CssHandlesProvider, useContextCssHandles } = createCssHandlesContext(
  CSS_HANDLES
)

export { CssHandlesProvider, useContextCssHandles }

```