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

[User] Show me the implementation of external-promotions-example/node/clients/index.ts from the external-promotions-example VTEX app.

[Assistant]
Here's the implementation:

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

import { Provider } from './provider'
import { VTEXExternalPromotionsApp } from './vtex-external-promotions-app'

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

  // this may change when we implment the app on VTEX's side
  public get vtexExternalPromotionsApp() {
    return this.getOrSet('vtexExternalPromotionsApp', VTEXExternalPromotionsApp)
  }
}

```


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

[User] Show me the implementation of external-promotions-example/node/clients/provider.ts from the external-promotions-example VTEX app.

[Assistant]
Here's the implementation:

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

import type { Promotion } from './vtex-external-promotions-app'

export interface ExternalPromotionsProviderRequest {
  items: Item[]
}

interface Item {
  sku: string
  price: number
}

export interface ExternalPromotionsProviderResponse {
  promotions: Promotion[]
}

export class Provider extends ExternalClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super(
      `http://${context.workspace}--${context.account}.myvtex.com`,
      context,
      options
    )
  }

  public calculateExternalPromotions(data: ExternalPromotionsProviderRequest) {
    return this.http.post<ExternalPromotionsProviderResponse>(
      '/_v/promotions/calculate',
      data,
      {
        metric: 'calculate-promotions-external-provider',
      }
    )
  }
}

```


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

[User] Show me the implementation of external-promotions-example/node/__tests__/simple.test.ts from the external-promotions-example 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 external-promotions-example/node/middlewares/promotions/external/calculate.ts from the external-promotions-example VTEX app.

[Assistant]
Here's the implementation:

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

import type {
  ExternalPromotionsProviderRequest,
  ExternalPromotionsProviderResponse,
} from '../../../clients/provider'
import type {
  ApplyPromotionsResponse,
  VTEXExternalPromotionsDataContract,
} from '../../../clients/vtex-external-promotions-app'
import {
  DataContractType,
  DataContractVersion,
} from '../../../clients/vtex-external-promotions-app'

interface CalculateExternalPromotionsRequest {
  sessionId: string
  promotionalContext: PromotionalContext
}

interface PromotionalContext {
  items: Item[]
}

interface Item {
  id: string
  quantity: number
  seller: string
  sellingPrice: number
}

export async function calculate(
  ctx: Context,
  next: () => Promise<ApplyPromotionsResponse>
) {
  const {
    sessionId,
    promotionalContext,
  }: CalculateExternalPromotionsRequest = await json(ctx.req)

  const {
    clients: { provider, vtexExternalPromotionsApp },
  } = ctx

  const data: ExternalPromotionsProviderRequest = {
    items: promotionalContext.items.map((item) => ({
      sku: item.id,
      price: item.sellingPrice,
    })),
  }

  return provider
    .calculateExternalPromotions(data)
    .then((externalPromotionsDataResult) => {
      return vtexExternalPromotionsApp
        .applyExternalPromotions(
          transformToVTEXExternalPromotionsDataContract(
            promotionalContext,
            sessionId,
            externalPromotionsDataResult
          )
        )
        .then((applyExternalPromotionsResult) => {
          // this may change when we implment the app on VTEX's side
          ctx.status = 200
          ctx.body = applyExternalPromotionsResult

          return next()
        })
        .catch((error) => {
          const msg =
            'an unexpected error occurred while applying external promotions'

          console.error(msg, { data: externalPromotionsDataResult, error })
          ctx.status = 500
          ctx.body = msg

          return next()
        })
    })
    .catch((error) => {
      const msg =
        'an unexpected error occurred while calling the external provider to calculate promotions'

      console.error(msg, { data, error })
      ctx.status = 500
      ctx.body = msg

      return next()
    })
}

function transformToVTEXExternalPromotionsDataContract(
  promotionalContext: PromotionalContext,
  sessionId: string,
  externalPromotions: ExternalPromotionsProviderResponse
): VTEXExternalPromotionsDataContract {
  const now = new Date()

  return {
    items: promotionalContext.items.map((item) => ({
      id: item.id,
      quantity: item.quantity,
      seller: item.seller,
    })),
    sessionId: sessionId,
    externalPromotions: [
      {
        version: DataContractVersion.v1,
        type: DataContractType.page,
        exp: now.setHours(now.getHours() + 1), // this should be the unix time when the promotion becomes invalid,
        promotions: externalPromotions.promotions,
      },
    ],
  }
}

```


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

[User] Show me the implementation of experimental__visibility-layout/messages/pt.json from the experimental__visibility-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.visibilityLayout.title": "Controle de Visibilidade",
  "admin/editor.visibilityLayout.visible.title": "Visível"
}
```


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

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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.visibilityLayout.title": "Visibility Control",
  "admin/editor.visibilityLayout.visible.title": "Visible"
}
```


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

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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.visibilityLayout.title": "Visibility Control",
  "admin/editor.visibilityLayout.visible.title": "Visible"
}
```


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

[User] Show me the implementation of experimental__visibility-layout/messages/es.json from the experimental__visibility-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.visibilityLayout.title": "Control de visibilidad",
  "admin/editor.visibilityLayout.visible.title": "Visible"
}
```


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

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

[Assistant]
Here's the implementation:

```markdown
# EXPERIMENTAL Visibility Layout
<!-- 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 -->

🚧 Under Construction 🚧

This app might have breaking changes at any moment.

## 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 welcome!
```


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

[User] Show me the implementation of experimental__visibility-layout/react/Experimental__VisibilityLayout.tsx from the experimental__visibility-layout VTEX app.

[Assistant]
Here's the implementation:

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

const Experimental__VisibilityLayout: StorefrontFunctionComponent<VisibilityLayoutProps> = ({
  visible = true,
  children
}) => {
  if (visible === false) {
    return null
  }

  return <Fragment>{children}</Fragment>
}

interface VisibilityLayoutProps {
  visible: boolean
}

Experimental__VisibilityLayout.schema = {
  title: 'admin/editor.visibilityLayout.title'
}

export default Experimental__VisibilityLayout

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test",
    "lint": "tsc --noEmit && eslint --ext ts,tsx ."
  },
  "dependencies": {
    "@vtex/css-handles": "^1.0.0",
    "classnames": "^2.2.6",
    "ramda": "^0.26.1",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-intl": "^2.7.2"
  },
  "devDependencies": {
    "@types/classnames": "^2.2.7",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.7.5",
    "@types/prop-types": "^15.7.0",
    "@types/ramda": "^0.26.5",
    "@types/react": "^16.9.2",
    "@vtex/test-tools": "^1.1.0",
    "apollo-client": "^2.5.1",
    "eslint": "^5.16.0",
    "eslint-config-vtex-react": "^4.1.0",
    "prettier": "^1.18.2",
    "tslint-eslint-rules": "^5.4.0",
    "typescript": "3.5.2"
  },
  "version": "0.2.1"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "experimental__visibility-layout": {
    "allowed": "*",
    "composition": "children",
    "component": "Experimental__VisibilityLayout",
    "content": {
      "properties": {
        "visible": {
          "title": "admin/editor.visibilityLayout.visible.title",
          "type": "boolean",
          "default": 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 experimental__visibility-layout/react/typings/storefront.d.ts from the experimental__visibility-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { FunctionComponent } from 'react'

declare global {
  interface StorefrontFunctionComponent<P = {}> extends FunctionComponent<P> {
    getSchema?(props: P): object
    schema?: object
  }

  interface StorefrontComponent<P = {}, S = {}> extends Component<P, S> {
    getSchema?(props: P): object
    schema: object
  }
}

```


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

[User] Show me the implementation of experimental__visibility-layout/react/typings/vtex.render-runtime.d.ts from the experimental__visibility-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* Typings for `render-runtime` */
declare module 'vtex.render-runtime' {
  import { Component, ComponentType, ReactElement, ReactType } from 'react'

  export interface NavigationOptions {
    page: string
    params?: any
  }

  export interface RenderContextProps {
    runtime: {
      navigate: (options: NavigationOptions) => void
    }
  }

  interface ExtensionPointProps {
    id: string
    [key: string]: any
  }

  export const ExtensionPoint: ComponentType<ExtensionPointProps>

  interface ChildBlockProps {
    id: string
  }

  export const ChildBlock: ComponentType<ChildBlockProps>
  export const useChildBlock = function({ id: string }): object {}

  export const Helmet: ReactElement
  export const Link: ReactType
  export const NoSSR: ReactElement
  export const RenderContextConsumer: ReactElement
  export const canUseDOM: boolean
  export const withRuntimeContext: <TOriginalProps extends {}>(
    Component: ComponentType<TOriginalProps & RenderContextProps>
  ) => ComponentType<TOriginalProps>
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
declare module '*.css' {
  const css: any
  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 experimental__visibility-layout/react/typings/graphql.d.ts from the experimental__visibility-layout VTEX app.

[Assistant]
Here's the implementation:

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

  const value: DocumentNode
  export default value
}

```


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

[User] Show me the implementation of experimental__visibility-layout/react/typings/vtex.styleguide.d.ts from the experimental__visibility-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.styleguide' {
  import { ComponentType } from 'react'

  export const Input: ComponentType<InputProps>

  interface InputProps {
    [key: string]: 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 experimental__visibility-layout/react/__tests__/index.test.tsx from the experimental__visibility-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { render } from '@vtex/test-tools/react'
import VisibilityLayout from '../Experimental__VisibilityLayout'

describe('VisibilityLayout', () => {
  it('should show children if visible is true', () => {
    const { queryByText } = render(
      <VisibilityLayout visible={true}>
        Foo
      </VisibilityLayout>
    )

    const children = queryByText(/Foo/)

    expect(children).toBeTruthy()
  })

  it('should not show children if visible is false', () => {
    const { queryByText } = render(
      <VisibilityLayout visible={false}>
        Foo
      </VisibilityLayout>
    )

    const children = queryByText(/Foo/)

    expect(children).toBeFalsy()
  })
})

```


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

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

[Assistant]
Here's the implementation:

```markdown
> ↪ **CONTENT MIGRATION NOTE**
>
> The content of this repository has been **migrated to [dev-portal-content](https://github.com/vtexdocs/dev-portal-content).**
>
> We apologize for any inconvenience this may cause and thank you for your understanding.

```


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

[User] Show me the implementation of io-documentation/docs/pt/Components/componentList.json from the io-documentation VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "general": [
        {
            "appName": "vtex.carousel",
            "title": "Carousel",
            "description": "VTEX Carousel component",
            "url": "https://github.com/vtex-apps/carousel"
        },
        {
            "appName": "vtex.store-components",
            "file": "InfoCard.md",
            "title": "Info Card",
            "description": "VTEX Info Card component",
            "url": "https://github.com/vtex-apps/store-components"
        },
        {
            "appName": "vtex.rich-text",
            "title": "Rich Text",
            "description": "VTEX Rich text component",
            "url": "https://github.com/vtex-apps/rich-text"
        },
        {
            "appName": "vtex.store-components",
            "file": "Image.md",
            "title": "Image",
            "description": "VTEX Image component",
            "url": "https://github.com/vtex-apps/store-components"
        },
        {
            "appName": "vtex.store-components",
            "file": "Notification.md",
            "title": "Notification Message",
            "description": "VTEX Notifications component",
            "url": "https://github.com/vtex-apps/store-components"
        },
        {
            "appName": "vtex.store-components",
            "file": "Newsletter.md",
            "title": "Newsletter",
            "description": "VTEX Newsletter component",
            "url": "https://github.com/vtex-apps/store-components"
        },
        {
            "appName": "vtex.store-components",
            "file": "Logo.md",
            "title": "Store Logo",
            "description": "VTEX Store Logo component",
            "url": "https://github.com/vtex-apps/store-components"
        },
        {
            "appName": "vtex.store-header",
            "title": "Store Header",
            "description": "VTEX Header component for IO Stores",
            "url": "https://github.com/vtex-apps/store-header"
        },
        {
            "appName": "vtex.store-footer",
            "title": "Store Footer",
            "description": "VTEX Footer component for IO Stores",
            "url": "https://github.com/vtex-apps/store-footer"
        },
        {
            "appName": "vtex.minicart",
            "title": "Minicart",
            "description": "VTEX Minicart component for IO Stores",
            "url": "https://github.com/vtex-apps/minicart"
        },
        {
            "appName": "vtex.shelf",
            "title": "Shelf",
            "description": "VTEX Shelf component for IO Stores",
            "url": "https://github.com/vtex-apps/shelf"
        }
    ],
    "navigation": [],
    "product-related": [],
    "search-related": [],
    "all": []
}
```


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

[User] Show me the implementation of io-documentation/docs/es/Components/componentList.json from the io-documentation VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "general": [
        {
            "appName": "vtex.carousel",
            "title": "Carousel",
            "description": "VTEX Carousel component",
            "url": "https://github.com/vtex-apps/carousel"
        },
        {
            "appName": "vtex.store-components",
            "file": "InfoCard.md",
            "title": "Info Card",
            "description": "VTEX Info Card component",
            "url": "https://github.com/vtex-apps/store-components"
        },
        {
            "appName": "vtex.rich-text",
            "title": "Rich Text",
            "description": "VTEX Rich text component",
            "url": "https://github.com/vtex-apps/rich-text"
        },
        {
            "appName": "vtex.store-components",
            "file": "Image.md",
            "title": "Image",
            "description": "VTEX Image component",
            "url": "https://github.com/vtex-apps/store-components"
        },
        {
            "appName": "vtex.store-components",
            "file": "Notification.md",
            "title": "Notification Message",
            "description": "VTEX Notifications component",
            "url": "https://github.com/vtex-apps/store-components"
        },
        {
            "appName": "vtex.store-components",
            "file": "Newsletter.md",
            "title": "Newsletter",
            "description": "VTEX Newsletter component",
            "url": "https://github.com/vtex-apps/store-components"
        },
        {
            "appName": "vtex.store-components",
            "file": "Logo.md",
            "title": "Store Logo",
            "description": "VTEX Store Logo component",
            "url": "https://github.com/vtex-apps/store-components"
        },
        {
            "appName": "vtex.store-header",
            "title": "Store Header",
            "description": "VTEX Header component for IO Stores",
            "url": "https://github.com/vtex-apps/store-header"
        },
        {
            "appName": "vtex.store-footer",
            "title": "Store Footer",
            "description": "VTEX Footer component for IO Stores",
            "url": "https://github.com/vtex-apps/store-footer"
        },
        {
            "appName": "vtex.minicart",
            "title": "Minicart",
            "description": "VTEX Minicart component for IO Stores",
            "url": "https://github.com/vtex-apps/minicart"
        },
        {
            "appName": "vtex.shelf",
            "title": "Shelf",
            "description": "VTEX Shelf component for IO Stores",
            "url": "https://github.com/vtex-apps/shelf"
        }
    ],
    "navigation": [],
    "product-related": [],
    "search-related": [],
    "all": []
}
```


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

[User] Show me the implementation of io-documentation/docs/en/Components/componentList.json from the io-documentation VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "layout": [
    {
      "appName": "vtex.flex-layout",
      "title": "Flex Layout",
      "description": "VTEX Flex Layout component",
      "url": "https://github.com/vtex-apps/flex-layout"
    },
    {
      "appName": "vtex.disclosure-layout",
      "title": "Disclosure Layout",
      "description": "VTEX Disclosure Layout component.",
      "url": "https://github.com/vtex-apps/disclosure-layout"
    },
    {
      "appName": "vtex.modal-layout",
      "title": "Modal Layout",
      "description": "VTEX Modal Layout component",
      "url": "https://github.com/vtex-apps/modal-layout"
    },
    {
      "appName": "vtex.responsive-layout",
      "title": "Responsive Layout",
      "description": "VTEX Responsive Layout",
      "url": "https://github.com/vtex-apps/responsive-layout"
    },
    {
      "appName": "vtex.slider-layout",
      "title": "Slider Layout",
      "description": "VTEX Slider Wrapper",
      "url": "https://github.com/vtex-apps/slider-layout"
    },
    {
      "appName": "vtex.stack-layout",
      "title": "Stack Layout",
      "description": "VTEX Stack Layout",
      "url": "https://github.com/vtex-apps/stack-layout"
    },
    {
      "appName": "vtex.sticky-layout",
      "title": "Sticky Layout",
      "description": "VTEX Sticky Layout",
      "url": "https://github.com/vtex-apps/sticky-layout"
    },
    {
      "appName": "vtex.tab-layout",
      "title": "Tab Layout",
      "description": "VTEX Tabs Layout",
      "url": "https://github.com/vtex-apps/tab-layout"
    }
  ],
  "general": [
    {
      "appName": "vtex.address-locator",
      "title": "Address Locator",
      "description": "VTEX Address Locator component",
      "url": "https://github.com/vtex-apps/address-locator"
    },
    {
      "appName": "vtex.carousel",
      "title": "Carousel",
      "description": "VTEX Carousel component",
      "url": "https://github.com/vtex-apps/carousel"
    },
    {
      "appName": "vtex.challenge-tp-condition",
      "title": "Challenge Trade Policy Condition",
      "description": "Challenge that checks if an user can access the current Trade Policy based on a specified condition rule.",
      "url": "https://github.com/vtex-apps/challenge-tp-condition"
    },
    {
      "appName": "vtex.store-image",
      "title": "Image List",
      "description": "VTEX Image List",
      "url": "https://github.com/vtex-apps/store-image"
    },
    {
      "appName": "vtex.device-detector",
      "title": "Device Detector",
      "description": "VTEX Device Detector component",
      "url": "https://github.com/vtex-apps/device-detector"
    },
    {
      "appName": "vtex.iframe",
      "title": "Iframe",
      "description": "An app for using iframe in stores",
      "url": "https://github.com/vtex-apps/iframe"
    },
    {
      "appName": "vtex.store-components",
      "file": "image.md",
      "title": "Image",
      "description": "VTEX Image component",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.store-components",
      "file": "info-card.md",
      "title": "InfoCard",
      "description": "VTEX InfoCard component",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.login",
      "title": "Login",
      "description": "VTEX Login component",
      "url": "https://github.com/vtex-apps/login"
    },

    {
      "appName": "vtex.modal",
      "title": "Modal",
      "description": "VTEX Modal component",
      "url": "https://github.com/vtex-apps/modal"
    },
    {
      "appName": "vtex.store-components",
      "file": "newsletter.md",
      "title": "Newsletter",
      "description": "VTEX Newsletter component",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.store-components",
      "file": "notification.md",
      "title": "Notification",
      "description": "VTEX Notification component",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.reviews-and-ratings",
      "title": "Reviews and Ratings",
      "description": "VTEX native reviews and ratings solution",
      "url": "https://github.com/vtex/ReviewsRatings"
    },
    {
      "appName": "vtex.rich-text",
      "title": "Rich Text",
      "description": "VTEX Rich text component",
      "url": "https://github.com/vtex-apps/rich-text"
    },
    {
      "appName": "vtex.sandbox",
      "title": "Sandbox",
      "description": "VTEX Sandbox component",
      "url": "https://github.com/vtex-apps/sandbox"
    },
    {
      "appName": "vtex.store-components",
      "file": "share.md",
      "title": "Share",
      "description": "VTEX Share component",
      "url": "https://github.com/vtex-apps/store-components"
    },

    {
      "appName": "vtex.store-icons",
      "title": "Store Icons",
      "description": "VTEX Store Icons component",
      "url": "https://github.com/vtex-apps/store-icons"
    },
    {
      "appName": "vtex.store-link",
      "title": "VTEX Store Link",
      "description": "VTEX Store Link app",
      "url": "https://github.com/vtex-apps/store-link"
    },
    {
      "appName": "vtex.store-components",
      "file": "user-address.md",
      "title": "UserAddress",
      "description": "VTEX UserAddress component",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.wordpress-integration",
      "title": "Wordpress Integration",
      "description": "VTEX Wordpres Integration",
      "url": "https://github.com/vtex-apps/wordpress-integration"
    }
  ],
  "navigation": [
    {
      "appName": "vtex.breadcrumb",
      "title": "Breadcrumb",
      "description": "VTEX Breadcrumb component",
      "url": "https://github.com/vtex-apps/breadcrumb"
    },
    {
      "appName": "vtex.category-menu",
      "title": "Category Menu",
      "description": "VTEX Category Menu component",
      "url": "https://github.com/vtex-apps/category-menu"
    },
    {
      "appName": "vtex.store-drawer",
      "title": "Drawer",
      "description": "VTEX Drawer component",
      "url": "https://github.com/vtex-apps/drawer"
    },
    {
      "appName": "vtex.locale-switcher",
      "title": "Locale Switcher",
      "description": "VTEX Locale Switcher component",
      "url": "https://github.com/vtex-apps/locale-switcher"
    },
    {
      "appName": "vtex.menu",
      "title": "Menu",
      "description": "VTEX Menu component",
      "url": "https://github.com/vtex-apps/menu"
    },
    {
      "appName": "vtex.store-footer",
      "title": "Store Footer",
      "description": "VTEX Footer component for IO Stores",
      "url": "https://github.com/vtex-apps/store-footer"
    },
    {
      "appName": "vtex.store-header",
      "title": "Store Header",
      "description": "VTEX Header component for IO Stores",
      "url": "https://github.com/vtex-apps/store-header"
    },
    {
      "appName": "vtex.telemarketing",
      "title": "Telemarketing",
      "description": "VTEX Telemarketing component",
      "url": "https://github.com/vtex-apps/telemarketing"
    }
  ],
  "pixel": [
    {
      "appName": "vtex.accessibe",
      "title": "Accessibe",
      "description": "VTEX Accessibe native integration",
      "url": "https://github.com/vtex-apps/accessibe"
    },
    {
      "appName": "vtex.audara",
      "title": "Audara",
      "description": "VTEX Audara native integration",
      "url": "https://github.com/vtex-apps/audara"
    },
    {
      "appName": "vtex.avantlink",
      "title": "Avantlink",
      "description": "VTEX Avantlink native integration",
      "url": "https://github.com/vtex-apps/avantlink"
    },
    {
      "appName": "vtex.bazaarvoice",
      "title": "Bazaarvoice",
      "description": "VTEX Bazaarvoice native integration",
      "url": "https://github.com/vtex-apps/bazaarvoice"
    },
    {
      "appName": "vtex.bluecore",
      "title": "Bluecore",
      "description": "VTEX Bluecore native integration",
      "url": "https://github.com/vtex-apps/bluecore"
    },
    {
      "appName": "vtex.btg360",
      "title": "Btg360",
      "description": "VTEX Btg360 native integration",
      "url": "https://github.com/vtex-apps/btg360"
    },
    {
      "appName": "vtex.criteo",
      "title": "Criteo",
      "description": "VTEX Criteo native integration",
      "url": "https://github.com/vtex-apps/criteo"
    },
    {
      "appName": "vtex.facebook-pixel",
      "title": "Facebook Pixel",
      "description": "VTEX Facebook Pixel native integration",
      "url": "https://github.com/vtex-apps/facebook-pixel"
    },
    {
      "appName": "vtex.flixmedia",
      "title": "Flixmedia",
      "description": "VTEX Flixmedia native integration",
      "url": "https://github.com/vtex-apps/flixmedia"
    },
    {
      "appName": "vtex.google-adwords",
      "title": "Google Adwords",
      "description": "VTEX Google Adwords native integration",
      "url": "https://github.com/vtex-apps/google-adwords"
    },
    {
      "appName": "vtex.google-search-console",
      "title": "Google Search Console",
      "description": "VTEX Google Search Console native integration",
      "url": "https://github.com/vtex-apps/google-search-console"
    },
    {
      "appName": "vtex.google-tag-manager",
      "title": "Google Tag Manager",
      "description": "VTEX Google Tag Manager native integration",
      "url": "https://github.com/vtex-apps/google-tag-manager"
    },
    {
      "appName": "vtex.hotjar",
      "title": "Hotjar",
      "description": "VTEX Hotjar native integration",
      "url": "https://github.com/vtex-apps/hotjar"
    },
    {
      "appName": "vtex.ideacrm",
      "title": "Ideacrm",
      "description": "VTEX Ideacrm native integration",
      "url": "https://github.com/vtex-apps/ideacrm"
    },
    {
      "appName": "vtex.jivochat",
      "title": "JivoChat",
      "description": "VTEX JivoChat native integration",
      "url": "https://github.com/vtex-apps/jivochat"
    },
    {
      "appName": "vtex.konduto-antifraud",
      "title": "Konduto Antifraud",
      "description": "VTEX Konduto Antifraud  native integration",
      "url": "https://github.com/vtex-apps/konduto-antifraud"
    },
    {
      "appName": "vtex.listrak-pixel",
      "title": "Listrak",
      "description": "VTEX Listrak native integration",
      "url": "https://github.com/vtex-apps/listrak-pixel"
    },
    {
      "appName": "vtex.logrocket",
      "title": "Logrocket",
      "description": "VTEX Logrocket native integration",
      "url": "https://github.com/vtex-apps/logrocket"
    },
    {
      "appName": "vtex.lomadee",
      "title": "Lomadee",
      "description": "VTEX Lomadee native integration",
      "url": "https://github.com/vtex-apps/lomadee"
    },
    {
      "appName": "vtex.lucky-orange",
      "title": "Lucky Orange",
      "description": "VTEX Lucky Orange native integration",
      "url": "https://github.com/vtex-apps/lucky-orange"
    },
    {
      "appName": "vtex.order-sms-notification",
      "title": "Order Sms Notification",
      "description": "VTEX Order Sms Notification native integration",
      "url": "https://github.com/vtex-apps/order-sms-notification"
    },
    {
      "appName": "vtex.powerreviews",
      "title": "Powerreviews",
      "description": "VTEX Powerreviews native integration",
      "url": "https://github.com/vtex-apps/powerreviews"
    },
    {
      "appName": "vtex.shareasale",
      "title": "Shareasale",
      "description": "VTEX Shareasale native integration",
      "url": "https://github.com/vtex-apps/shareasale"
    },
    {
      "appName": "vtex.sidecar-pixel",
      "title": "Sidecar Pixel",
      "description": "VTEX Sidecar Pixel native integration",
      "url": "https://github.com/vtex-apps/sidecar-pixel"
    },
    {
      "appName": "vtex.smarthint",
      "title": "Smarthint",
      "description": "VTEX Smarthint native integration",
      "url": "https://github.com/vtex-apps/smarthint"
    },
    {
      "appName": "vtex.tradetracker",
      "title": "Tradetracker",
      "description": "VTEX Tradetracker native integration",
      "url": "https://github.com/vtex-apps/tradetracker"
    },
    {
      "appName": "vtex.yotpo",
      "title": "Yotpo",
      "description": "VTEX Yotpo native integration",
      "url": "https://github.com/vtex-apps/yotpo"
    },
    {
      "appName": "vtex.zendesk-chat",
      "title": "Zendesk Chat",
      "description": "VTEX Zendesk Chat native integration",
      "url": "https://github.com/vtex-apps/zendesk-chat"
    },
    {
      "appName": "vtex.zopim",
      "title": "Zopim",
      "description": "VTEX Zopim native integration",
      "url": "https://github.com/vtex-apps/zopim"
    }
  ],
  "product-related": [
    {
      "appName": "vtex.add-to-cart-button",
      "title": "Add to Cart Button",
      "description": "VTEX Add To Cart Button component",
      "url": "https://github.com/vtex-apps/add-to-cart-button"
    },
    {
      "appName": "vtex.store-components",
      "file": "availability-subscriber.md",
      "title": "Availability Subscriber",
      "description": "VTEX AvailabilitySubscriber component",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.store-components",
      "file": "buy-button.md",
      "title": "BuyButton",
      "description": "VTEX BuyButton component",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.store-components",
      "file": "discount-badge.md",
      "title": "DiscountBadge",
      "description": "VTEX DiscountBadge component",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.minicart",
      "title": "Minicart",
      "description": "VTEX Minicart component for IO Stores",
      "url": "https://github.com/vtex-apps/minicart"
    },
    {
      "appName": "vtex.pickup-availability",
      "title": "Pickup Availability",
      "description": "VTEX Pickupt Availability component",
      "url": "https://github.com/vtex-apps/pickup-availability"
    },
    {
      "appName": "vtex.product-availability",
      "title": "Product Availability",
      "description": "VTEX Product Availability component",
      "url": "https://github.com/vtex-apps/product-availability"
    },
    {
      "appName": "vtex.product-customizer",
      "title": "Product Customizer",
      "description": "VTEX Product Customizer component",
      "url": "https://github.com/vtex-apps/product-customizer"
    },
    {
      "appName": "vtex.product-details",
      "title": "Product Details",
      "description": "VTEX Product Details component",
      "url": "https://github.com/vtex-apps/product-details"
    },
    {
      "appName": "vtex.product-identifier",
      "title": "Product Identifier",
      "description": "VTEX Product Identifier component",
      "url": "https://github.com/vtex-apps/product-identifier"
    },
    {
      "appName": "vtex.product-quantity",
      "title": "Product Quantity",
      "description": "VTEX Product Quantity component",
      "url": "https://github.com/vtex-apps/product-quantity"
    },
    {
      "appName": "vtex.product-details",
      "file": "product-quantity-selector.md",
      "title": "Product Quantity Selector",
      "description": "VTEX Product Quantity Selector component",
      "url": "https://github.com/vtex-apps/product-details"
    },
    {
      "appName": "vtex.product-review-interfaces",
      "title": "Product Review Interfaces",
      "description": "VTEX Product Review Interfaces component",
      "url": "https://github.com/vtex-apps/product-review-interfaces"
    },
    {
      "appName": "vtex.product-specifications",
      "title": "Product Specifications",
      "description": "Shows the product specifications.",
      "url": "https://github.com/vtex-apps/product-specifications"
    },
    {
      "appName": "vtex.product-highlights",
      "title": "Product Highlights",
      "description": "Shows the product highlights.",
      "url": "https://github.com/vtex-apps/product-highlights"
    },
    {
      "appName": "vtex.product-summary",
      "title": "Product Summary",
      "description": "VTEX Product Summary component",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.product-summary",
      "file": "product-summary-attachmentList.md",
      "title": "Product Summary Attachment List",
      "description": "VTEX Product Summary Attachment List component",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.product-summary",
      "file": "product-summary-brand.md",
      "title": "Product Summary Brand",
      "description": "VTEX Product Summary Brand component",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.product-summary",
      "file": "product-summary-buy-button.md",
      "title": "Product Summary Buy Button",
      "description": "VTEX Product Summary Buy Button component",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.product-summary",
      "file": "product-summary-description.md",
      "title": "Product Summary Description",
      "description": "VTEX Product Summary Description component",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.product-summary",
      "file": "product-summary-image.md",
      "title": "Product Summary Image",
      "description": "VTEX Product Summary Image component",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.product-summary",
      "file": "product-summary-name.md",
      "title": "Product Summary Name",
      "description": "VTEX Product Summary Name component",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.product-summary",
      "file": "product-summary-price.md",
      "title": "Product Summary Price",
      "description": "VTEX Product Summary Price component",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.product-summary",
      "file": "product-summary-sku-selector.md",
      "title": "Product Summary SKU Selector",
      "description": "VTEX Product Summary SKU Selector component",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.product-summary",
      "file": "product-summary-specification-badges.md",
      "title": "Product Summary Specification Badges",
      "description": "VTEX Product Summary Specification Badges component",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.product-teaser-interfaces",
      "title": "Product Teaser Interfaces",
      "description": "VTEX Product Teaser Interfaces component",
      "url": "https://github.com/vtex-apps/product-teaser-interfaces"
    },
    {
      "appName": "vtex.store-components",
      "file": "product-brand.md",
      "title": "ProductBrand",
      "description": "VTEX ProductBrand component",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.store-components",
      "file": "product-description.md",
      "title": "ProductDescription",
      "description": "VTEX ProductDescription component",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.store-components",
      "file": "product-images.md",
      "title": "ProductImages",
      "description": "VTEX ProductImages component",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.store-components",
      "file": "product-name.md",
      "title": "ProductName",
      "description": "VTEX ProductName component",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.store-components",
      "file": "product-price.md",
      "title": "ProductPrice",
      "description": "VTEX ProductPrice component",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.store-components",
      "file": "product-specifications.md",
      "title": "ProductSpecifications",
      "description": "VTEX ProductSpecifications component",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.shelf",
      "title": "Shelf",
      "description": "VTEX Shelf component for IO Stores",
      "url": "https://github.com/vtex-apps/shelf"
    },
    {
      "appName": "vtex.store-components",
      "file": "shipping-simulator.md",
      "title": "ShippingSimulator",
      "description": "VTEX ShippingSimulator component",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.store-components",
      "file": "sku-selector.md",
      "title": "SKUSelector",
      "description": "VTEX SKUSelector component",
      "url": "https://github.com/vtex-apps/store-components"
    }
  ],
  "search-related": [
    {
      "appName": "vtex.search-result",
      "title": "Search Result",
      "description": "VTEX Search Result component",
      "url": "https://github.com/vtex-apps/search-result"
    },
    {
      "appName": "vtex.store-components",
      "file": "search-bar.md",
      "title": "SearchBar",
      "description": "VTEX SearchBar component",
      "url": "https://github.com/vtex-apps/store-components"
    }
  ]
}

```


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

[User] Show me the implementation of io-documentation/docs/en/Apps/componentList.json from the io-documentation VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "content": [
    {
      "appName": "vtex.add-to-cart-button",
      "title": "Add to Cart Button",
      "description": "A button for adding items into the shopping cart.",
      "url": "https://github.com/vtex-apps/add-to-cart-button"
    },
    {
      "appName": "vtex.store-components",
      "file": "AvailabilitySubscriber.md",
      "title": "Availability Subscriber",
      "description": "Shows the availability subscriber form when a product isn't available.",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.store-components",
      "file": "BackToTopButton.md",
      "title": "Back To Top Button",
      "description": "Store component's block that redirects users to the top of the page when clicked on.",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.breadcrumb",
      "title": "Breadcrumb",
      "description": "Navigation scheme that shows a user's browsing history up to their current location in your store.",
      "url": "https://github.com/vtex-apps/breadcrumb"
    },
    {
      "appName": "vtex.store-components",
      "file": "BuyButton.md",
      "title": "Buy Button",
      "description": "Button responsible for adding products in the minicart.",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.category-menu",
      "title": "Category Menu",
      "description": "Shows the store's department list on an customizable menu.",
      "url": "https://github.com/vtex-apps/category-menu"
    },
    {
      "appName": "vtex.store-drawer",
      "title": "Drawer",
      "description": "Designed for Mobile devices, this app renders a sliding drawer for the store's menu.",
      "url": "https://github.com/vtex-apps/drawer"
    },
    {
      "appName": "vtex.iframe",
      "title": "Iframe",
      "description": "Renders external iframes on your store.",
      "url": "https://github.com/vtex-apps/iframe"
    },
    {
      "appName": "vtex.store-image",
      "title": "Image",
      "description": "Render an pre-defined image on the UI.",
      "url": "https://github.com/vtex-apps/store-image"
    },
    {
      "appName": "vtex.store-components",
      "file": "InfoCard.md",
      "title": "InfoCard",
      "description": "Store component's block that displays content combining image and a markdown text.",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.locale-switcher",
      "title": "Locale Switcher",
      "description": "Component responsible for changing the current language of the store.",
      "url": "https://github.com/vtex-apps/locale-switcher"
    },
    {
      "appName": "vtex.login",
      "title": "Login",
      "description": "Handles every functionality related to user login.",
      "url": "https://github.com/vtex-apps/login"
    },
    {
      "appName": "vtex.store-components",
      "file": "Logo.md",
      "title": "Logo",
      "description": "Store component's block that displays an image logo for the store's header.",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.menu",
      "title": "Menu",
      "description": "Renders the Menu component, displaying a bar containing links and drop-down sub-menus.",
      "url": "https://github.com/vtex-apps/menu"
    },
    {
      "appName": "vtex.minicart",
      "title": "Minicart",
      "description": "Fetching data from the Checkout OrderForm API, the Minicart component displays a summary list of all items added by customers in their shopping cart.",
      "url": "https://github.com/vtex-apps/minicart"
    },
    {
      "appName": "vtex.store-newsletter",
      "title": "Newsletter",
      "description": "Provides a set of blocks that you can use to create a newsletter subscription form.",
      "url": "https://github.com/vtex-apps/store-newsletter"
    },
    {
      "appName": "vtex.store-components",
      "file": "notification.md",
      "title": "Notification",
      "description": "VTEX Notification component",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.order-configuration",
      "file": "README.md",
      "title": "Order Configuration",
      "description": "Designed for **B2B scenarios**, the Order Configuration app displays a form responsible for collecting order data in a modal.",
      "url": "https://github.com/vtex-apps/order-configuration"
    },
    {
      "appName": "vtex.order-placed",
      "file": "README.md",
      "title": "Order Placed",
      "description": "Renders the the orderPlaced page with all order data.",
      "url": "https://github.com/vtex-apps/order-placed"
    },
    {
      "appName": "vtex.order-quote",
      "title": "Order Quote",
      "description": "Provides B2B capabilities to save a cart (its items, quantities and price) for further use.",
      "url": "https://github.com/vtex-apps/order-quote"
    },
    {
      "appName": "vtex.pickup-availability",
      "title": "Pickup Availability",
      "description": "Enables users to verify the availability for in-store pickup regarding the selected SKU",
      "url": "https://github.com/vtex-apps/pickup-availability"
    },
    {
      "appName": "vtex.product-availability",
      "title": "Product Availability",
      "description": "Store component's block that that display messages for users regarding the product availability in the inventory.",
      "url": "https://github.com/vtex-apps/product-availability"
    },
        {
      "appName": "vtex.store-components",
      "file": "ProductBrand.md",
      "title": "Product Brand",
      "description": "Store component's block that displays either the name or the logo of a product's brand.",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.product-comparison",
      "title": "Product Comparison",
      "description": "Displays a component that compares specifications of pre-selected SKUs.",
      "url": "https://github.com/vtex-apps/product-comparison"
    },
    {
      "appName": "vtex.product-customizer",
      "title": "Product Customizer",
      "description": "Allows a product's attachments to be made available and ready to be chosen by users from the product page.",
      "url": "https://github.com/vtex-apps/product-customizer"
    },
    {
      "appName": "vtex.store-components",
      "file": "ProductDescription.md",
      "title": "Product Description",
      "description": "Store component's block that displays the product's description.",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.product-gifts",
      "title": "Product Gifts",
      "description": "This app's blocks are responsible for displaying, in the Product Description block, all gifts available for a given product.",
      "url": "https://github.com/vtex-apps/product-gifts"
    },
    {
      "appName": "vtex.product-highlights",
      "title": "Product Highlights",
      "description": "Shows the product highlights.",
      "url": "https://github.com/vtex-apps/product-highlights"
    },
    {
      "appName": "vtex.product-identifier",
      "title": "Product Identifier",
      "description": "Shows a product identifier, such as the product reference, product ID, sku EAN or sku reference.",
      "url": "https://github.com/vtex-apps/product-identifier"
    },
    {
      "appName": "vtex.store-components",
      "file": "ProductImages.md",
      "title": "Product Images",
      "description": "Store component's block that renders the product's image.",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.product-kit",
      "title": "Product Kit",
      "description": "Displays a list of product kits.",
      "url": "https://github.com/vtex-apps/product-kit"
    },
    {
      "appName": "vtex.product-list",
      "title": "Product List",
      "description": "Works with Minicar to display all items in the user's cart, informing when some of them are unavailable.",
      "url": "https://github.com/vtex-apps/product-list"
    },
    {
      "appName": "vtex.store-components",
      "file": "ProductName.md",
      "title": "Product Name",
      "description": "Store component's block that renders the product's name.",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.product-price",
      "title": "Product Price",
      "description": "The app exports blocks related to the product's price, such as list price, selling price and savings.",
      "url": "https://github.com/vtex-apps/product-price"
    },
    {
      "appName": "vtex.product-quantity",
      "title": "Product Quantity",
      "description": "Allows users to a add a chosen amount of the displayed product in their cart.",
      "url": "https://github.com/vtex-apps/product-quantity"
    },
    {
      "appName": "vtex.store-components",
      "file": "ProductSKUAttributes.md",
      "title": "Product SKU Attributes",
      "description": "This block is exported by the Store Components app and it is responsible for displaying a list of the currrent SKU variations** for the product.",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.product-specifications",
      "title": "Product Specifications",
      "description": "Displays the product specifications.",
      "url": "https://github.com/vtex-apps/product-specifications"
    },
    {
      "appName": "vtex.product-summary",
      "title": "Product Summary",
      "description": "App responsible for summarizing product information (such as name, price and image) in other store blocks, such as the Shelf and the Minicart.",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.product-summary",
      "file": "product-summary-attachmentList.md",
      "title": "Product Summary Attachment List",
      "description": "This block is exported by the Product Summary app and it is responsible for displaying the product's attachments in other store blocks.",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.product-summary",
      "file": "product-summary-brand.md",
      "title": "Product Summary Brand",
      "description": "This block is exported by the Product Summary app and it is responsible for displaying the product's brand in other store blocks.",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.product-summary",
      "file": "product-summary-buy-button.md",
      "title": "Product Summary Buy Button",
      "description": "This block is exported by the Product Summary app and it is responsible for displaying a Buy Button block in other store blocks.",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.product-summary",
      "file": "product-summary-description.md",
      "title": "Product Summary Description",
      "description": "This block is exported by the Product Summary app and it is responsible for displaying the product's description in other store blocks.",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.product-summary",
      "file": "product-summary-image.md",
      "title": "Product Summary Image",
      "description": "This block is exported by the Product Summary app and it is responsible for displaying the product's image in other store blocks.",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.product-summary",
      "file": "product-summary-list.md",
      "title": "Product Summary List",
      "description": "This block is exported by the Product Summary app and it is responsible for displaying a products list in other store blocks.",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.product-summary",
      "file": "product-summary-name.md",
      "title": "Product Summary Name",
      "description": "This block is exported by the Product Summary app and it is responsible for displaying the product's name in other store blocks.",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.product-summary",
      "file": "product-summary-sku-selector.md",
      "title": "Product Summary SKU Selector",
      "description": "This block is exported by the Product Summary app and it is responsible for displaying the SKU Selector block in other store blocks.",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.product-summary",
      "file": "product-summary-specification-badges.md",
      "title": "Product Summary Specification Badges",
      "description": "This block is exported by the Product Summary app and it is responsible for displaying badges with the product's specifications in other store blocks.",
      "url": "https://github.com/vtex-apps/product-summary"
    },
    {
      "appName": "vtex.quickorder",
      "title": "Quickorder",
      "description": "Designed for B2B scenarios, it allows users to add multiple products to the cart at once.",
      "url": "https://github.com/vtex-apps/quickorder"
    },
    {
      "appName": "vtex.reviews-and-ratings",
      "title": "Reviews and Ratings",
      "description": "VTEX native solution for product review and rating.",
      "url": "https://github.com/vtex/ReviewsRatings"
    },
    {
      "appName": "vtex.rich-text",
      "title": "Rich Text",
      "description": "The Rich Text brings texts to your store and everything else that Markdown language is able to. It converts texts written in Markdown language and displays its content as HTML elements.",
      "url": "https://github.com/vtex-apps/rich-text"
    },
    {
      "appName": "vtex.sandbox",
      "title": "Sandbox",
      "description": "Allows building an arbitrary HTML content in extension points from an Iframe.",
      "url": "https://github.com/vtex-apps/sandbox"
    },
    {
      "appName": "vtex.store-components",
      "file": "SearchBar.md",
      "title": "Search Bar",
      "description": "Store component's block that shows a search bar with autocomplete options and displays the matching products as well.",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.search-result",
      "title": "Search Result",
      "description": "Handles the result fetched by the VTEX Search API and displaying it to users. The app exports all store blocks expected in a search results page, such as the filters and the product gallery.",
      "url": "https://github.com/vtex-apps/search-result"
    },
    {
      "appName": "vtex.seller-selector",
      "title": "Seller Selector",
      "description": "Displays the number of sellers your marketplace has for each product, enabling users to compare prices from each one.",
      "url": "https://github.com/vtex-apps/seller-selector"
    },
    {
      "appName": "vtex.store-components",
      "file": "Share.md",
      "title": "Share",
      "description": "Store component's block that allows to share a product URL via social medias.",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.shelf",
      "title": "Shelf",
      "description": "Displays a list of products in the store home page.",
      "url": "https://github.com/vtex-apps/shelf"
    },
    {
      "appName": "vtex.store-components",
      "file": "ShippingSimulator.md",
      "title": "Shipping Simulator",
      "description": "Store component's block that estimates the shipping fee based on a zip code input.",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.sku-list",
      "title": "SKU List",
      "description": "B2B component responsible for rendering a SKU list in the product details page.",
      "url": "https://github.com/vtex-apps/sku-list"
    },
    {
      "appName": "vtex.store-components",
      "file": "SkuSelector.md",
      "title": "SKU Selector",
      "description": "Store component's block that renders every SKU available for a given product.",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.store-components",
      "title": "Store Components",
      "description": "App responsible for providing main block themes, such as the SKU Selector and the Logo.",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.store-footer",
      "title": "Store Footer",
      "description": "Displays your store's Footer.",
      "url": "https://github.com/vtex-apps/store-footer"
    },
    {
      "appName": "vtex.store-form",
      "title": "Store Form",
      "description": "Provides blocks responsible for displaying an user form connected to Master Data through a JSON Schema.",
      "url": "https://github.com/vtex-apps/store-form"
    },
    {
      "appName": "vtex.store-header",
      "title": "Store Header",
      "description": "Displays your store's Header.",
      "url": "https://github.com/vtex-apps/store-header"
    },
    {
      "appName": "vtex.store-link",
      "title": "Store Link",
      "description": "Provides blocks responsible for displaying links in other theme blocks, such as the Product Summary.",
      "url": "https://github.com/vtex-apps/store-link"
    },
    {
      "appName": "vtex.store-locator",
      "title": "Store Locator",
      "description": "Uses the Pickup points information to add the Store Locator functionality to the Store.",
      "url": "https://github.com/vtex-apps/store-locator"
    },
    {
      "appName": "vtex.store-video",
      "title": "Store Video",
      "description": "Provides blocks to display video assets on your store pages.",
      "url": "https://github.com/vtex-apps/store-video"
    },
    {
      "appName": "vtex.store-components",
      "file": "user-address.md",
      "title": "User Address",
      "description": "VTEX UserAddress component",
      "url": "https://github.com/vtex-apps/store-components"
    },
    {
      "appName": "vtex.wish-list",
      "title": "Wish List",
      "description": "Adds a heart icon to shelves and product detail pages, so users can add the desired products to a Wishlist. Besides that, it also creates a page responsible for listing all wishlisted items for your users.",
      "url": "https://github.com/vtex-apps/wish-list"
    }
  ],
  "functional": [
    {
      "appName": "vtex.challenge-tp-condition",
      "title": "Challenge Trade Policy Condition",
      "description": "Challenge that checks if an user can access the current Trade Policy based on a specified condition rule.",
      "url": "https://github.com/vtex-apps/challenge-tp-condition"
    },
    {
      "appName": "vtex.checkout-ui-custom",
      "title": "Checkout UI Custom",
      "description": "Customizes your store's Checkout UI through the admin's interface.",
      "url": "https://github.com/vtex-apps/checkout-ui-custom"
    },
    {
      "appName": "vtex.checkout-ui-settings",
      "title": "Checkout UI Settings",
      "description": "App responsible for exporting scripts to build a custom Checkout UI.",
      "url": "https://github.com/vtex-apps/checkout-ui-settings"
    },
    {
      "appName": "vtex.product-context",
      "title": "Product Context",
      "description": "Provides data regarding a certain product to all of its children blocks.",
      "url": "https://github.com/vtex-apps/product-context"
    },
    {
      "appName": "vtex.store-sitemap",
      "title": "Store Sitemap",
      "description": "App responsible for automatically generating a `sitemap.xml` file of your VTEX IO Store.",
      "url": "https://github.com/vtex-apps/store-sitemap"
    },
    {
      "appName": "vtex.store-icons",
      "title": "Store Icons",
      "description": "Exports all icons used by the store's components.",
      "url": "https://github.com/vtex-apps/store-icons"
    },
    {
      "appName": "vtex.telemarketing",
      "title": "Telemarketing",
      "description": "Enables a call center operator impersonate a costumer in the store, and this app is used by store theme.",
      "url": "https://github.com/vtex-apps/telemarketing"
    }
  ],
  "pixel": [
    {
      "appName": "vtex.accessibe",
      "title": "Accessibe",
      "description": "VTEX Accessibe native integration",
      "url": "https://github.com/vtex-apps/accessibe"
    },
    {
      "appName": "vtex.alexa-certify-code",
      "title": "Alexa Certify Code",
      "description": "VTEX Alexa Certify Code native integration",
      "url": "https://github.com/vtex-apps/alexa-certify-code"
    },
    {
      "appName": "vtex.audara",
      "title": "Audara",
      "description": "VTEX Audara native integration",
      "url": "https://github.com/vtex-apps/audara"
    },
    {
      "appName": "vtex.avantlink",
      "title": "Avantlink",
      "description": "VTEX Avantlink native integration",
      "url": "https://github.com/vtex-apps/avantlink"
    },
    {
      "appName": "vtex.bazaarvoice",
      "title": "Bazaarvoice",
      "description": "VTEX Bazaarvoice native integration",
      "url": "https://github.com/vtex-apps/bazaarvoice"
    },
    {
      "appName": "vtex.bluecore",
      "title": "Bluecore",
      "description": "VTEX Bluecore native integration",
      "url": "https://github.com/vtex-apps/bluecore"
    },
    {
      "appName": "vtex.blueknow",
      "title": "Blueknow",
      "description": "VTEX Blueknow native integration",
      "url": "https://github.com/vtex-apps/blueknow"
    },
    {
      "appName": "vtex.btg360",
      "title": "Btg360",
      "description": "VTEX Btg360 native integration",
      "url": "https://github.com/vtex-apps/btg360"
    },
    {
      "appName": "vtex.cookiebot",
      "title": "Cookiebot",
      "description": "VTEX Cookiebot native integration",
      "url": "https://github.com/vtex-apps/cookiebot"
    },
    {
      "appName": "vtex.cookie-script",
      "title": "Cookie Script",
      "description": "VTEX Cookie Script native integration",
      "url": "https://github.com/vtex-apps/cookie-script"
    },
    {
      "appName": "vtex.criteo",
      "title": "Criteo",
      "description": "VTEX Criteo native integration",
      "url": "https://github.com/vtex-apps/criteo"
    },
    {
      "appName": "vtex.curbside-pickup",
      "title": "Curbside Pickup",
      "description": "VTEX Curbside Pickup native integration",
      "url": "https://github.com/vtex-apps/curbside-pickup"
    },
    {
      "appName": "vtex.cybersource-fingerprint",
      "title": "CyberSource Fingerprint ",
      "description": "VTEX CyberSource Fingerprint native integration",
      "url": "https://github.com/vtex-apps/cybersource-fingerprint"
    },
    {
      "appName": "vtex.elfsight",
      "title": "Elfsight",
      "description": "VTEX Elfsight native integration",
      "url": "https://github.com/vtex-apps/elfsight"
    },
    {
      "appName": "vtex.facebook-domain-verification",
      "title": "Facebook Domain Verification",
      "description": "Adds into the head section of your website's homepage the meta-tag containing the Facebook verification code.",
      "url": "https://github.com/vtex-apps/facebook-domain-verification"
    },
    {
      "appName": "vtex.facebook-pixel",
      "title": "Facebook Pixel",
      "description": "VTEX Facebook Pixel native integration",
      "url": "https://github.com/vtex-apps/facebook-pixel"
    },
    {
      "appName": "vtex.flixmedia",
      "title": "Flixmedia",
      "description": "VTEX Flixmedia native integration",
      "url": "https://github.com/vtex-apps/flixmedia"
    },
    {
      "appName": "vtex.google-adwords",
      "title": "Google Adwords",
      "description": "VTEX Google Adwords native integration",
      "url": "https://github.com/vtex-apps/google-adwords"
    },
    {
      "appName": "vtex.google-customer-reviews",
      "title": "Google Customer Reviews",
      "description": "VTEX Google Customer Reviews native integration",
      "url": "https://github.com/vtex-apps/google-customer-reviews"
    },
    {
      "appName": "vtex.google-search-console",
      "title": "Google Search Console",
      "description": "VTEX Google Search Console native integration",
      "url": "https://github.com/vtex-apps/google-search-console"
    },
    {
      "appName": "vtex.google-tag-manager",
      "title": "Google Tag Manager",
      "description": "VTEX Google Tag Manager native integration",
      "url": "https://github.com/vtex-apps/google-tag-manager"
    },
    {
      "appName": "vtex.hotjar",
      "title": "Hotjar",
      "description": "VTEX Hotjar native integration",
      "url": "https://github.com/vtex-apps/hotjar"
    },
    {
      "appName": "vtex.ideacrm",
      "title": "Ideacrm",
      "description": "VTEX Ideacrm native integration",
      "url": "https://github.com/vtex-apps/ideacrm"
    },
    {
      "appName": "vtex.iubenda",
      "title": "Iubenda",
      "description": "VTEX Iubenda native integration",
      "url": "https://github.com/vtex-apps/iubenda"
    },
    {
      "appName": "vtex.jivochat",
      "title": "JivoChat",
      "description": "VTEX JivoChat native integration",
      "url": "https://github.com/vtex-apps/jivochat"
    },
    {
      "appName": "vtex.kelkoo",
      "title": "Kelkoo",
      "description": "VTEX Kelkoo native integration",
      "url": "https://github.com/vtex-apps/kelkoo"
    },
    {
      "appName": "vtex.konduto-antifraud",
      "title": "Konduto Antifraud",
      "description": "VTEX Konduto Antifraud  native integration",
      "url": "https://github.com/vtex-apps/konduto-antifraud"
    },
    {
      "appName": "vtex.listrak-pixel",
      "title": "Listrak",
      "description": "VTEX Listrak native integration",
      "url": "https://github.com/vtex-apps/listrak-pixel"
    },
    {
      "appName": "vtex.logrocket",
      "title": "Logrocket",
      "description": "VTEX Logrocket native integration",
      "url": "https://github.com/vtex-apps/logrocket"
    },
    {
      "appName": "vtex.lomadee",
      "title": "Lomadee",
      "description": "VTEX Lomadee native integration",
      "url": "https://github.com/vtex-apps/lomadee"
    },
    {
      "appName": "vtex.lucky-orange",
      "title": "Lucky Orange",
      "description": "VTEX Lucky Orange native integration",
      "url": "https://github.com/vtex-apps/lucky-orange"
    },
    {
      "appName": "vtex.onesignal",
      "title": "OneSignal",
      "description": "VTEX OneSignal native integration",
      "url": "https://github.com/vtex-apps/onesignal"
    },
    {
      "appName": "vtex.order-sms-notification",
      "title": "Order Sms Notification",
      "description": "VTEX Order Sms Notification native integration",
      "url": "https://github.com/vtex-apps/order-sms-notification"
    },
    {
      "appName": "vtex.powerreviews",
      "title": "Powerreviews",
      "description": "VTEX Powerreviews native integration",
      "url": "https://github.com/vtex-apps/powerreviews"
    },
    {
      "appName": "vtex.shareasale",
      "title": "Shareasale",
      "description": "VTEX Shareasale native integration",
      "url": "https://github.com/vtex-apps/shareasale"
    },
    {
      "appName": "vtex.sidecar-pixel",
      "title": "Sidecar Pixel",
      "description": "VTEX Sidecar Pixel native integration",
      "url": "https://github.com/vtex-apps/sidecar-pixel"
    },
    {
      "appName": "vtex.smarthint",
      "title": "Smarthint",
      "description": "VTEX Smarthint native integration",
      "url": "https://github.com/vtex-apps/smarthint"
    },
    {
      "appName": "vtex.tawk-to",
      "title": "Tawk.to",
      "description": "VTEX Tawk.to native integration",
      "url": "https://github.com/vtex-apps/tawk-to"
    },
    {
      "appName": "vtex.tradetracker",
      "title": "Tradetracker",
      "description": "VTEX Tradetracker native integration",
      "url": "https://github.com/vtex-apps/tradetracker"
    },
    {
      "appName": "vtex.trustpilot",
      "title": "Trustpilot",
      "description": "VTEX Trustpilot native integration",
      "url": "https://github.com/vtex-apps/trustpilot"
    },
    {
      "appName": "vtex.wordpress-integration",
      "title": "Wordpress Integration",
      "description": "VTEX Wordpress native integration",
      "url": "https://github.com/vtex-apps/wordpress-integration"
    },
    {
      "appName": "vtex.yotpo",
      "title": "Yotpo",
      "description": "VTEX Yotpo native integration",
      "url": "https://github.com/vtex-apps/yotpo"
    },
    {
      "appName": "vtex.zendesk-chat",
      "title": "Zendesk Chat",
      "description": "VTEX Zendesk Chat native integration",
      "url": "https://github.com/vtex-apps/zendesk-chat"
    },
    {
      "appName": "vtex.zopim",
      "title": "Zopim",
      "description": "VTEX Zopim native integration",
      "url": "https://github.com/vtex-apps/zopim"
    }
  ],
  "layout": [
    {
      "appName": "vtex.condition-layout",
      "title": "Condition Layout",
      "description": "Allows a block rendering under pre-defined conditions.",
      "url": "https://github.com/vtex-apps/condition-layout"
    },
    {
      "appName": "vtex.flex-layout",
      "title": "Flex Layout",
      "description": "Builds a complex custom layout using the concept of rows and columns, setting the desired structure and positioning of blocks in a given page.",
      "url": "https://github.com/vtex-apps/flex-layout"
    },
    {
      "appName": "vtex.disclosure-layout",
      "title": "Disclosure Layout",
      "description": "Builds an accordion or any component that controls visibility of a section of content.",
      "url": "https://github.com/vtex-apps/disclosure-layout"
    },
    {
      "appName": "vtex.modal-layout",
      "title": "Modal Layout",
      "description": "Provides blocks that help you create modals in your store.",
      "url": "https://github.com/vtex-apps/modal-layout"
    },
    {
      "appName": "vtex.responsive-layout",
      "title": "Responsive Layout",
      "description": "Declares layout structures that will only be rendered in a specific screen-size breakpoint.",
      "url": "https://github.com/vtex-apps/responsive-layout"
    },
    {
      "appName": "vtex.overlay-layout",
      "title": "Overlay Layout",
      "description": "Helps you create a Dropdown, Select or a Tooltip component.",
      "url": "https://github.com/vtex-apps/overlay-layout"
    },
    {
      "appName": "vtex.slider-layout",
      "title": "Slider Layout",
      "description": "Flexible solution for building sliders of blocks within your store theme.",
      "url": "https://github.com/vtex-apps/slider-layout"
    },
    {
      "appName": "vtex.stack-layout",
      "title": "Stack Layout",
      "description": "Renders blocks on top of other blocks.",
      "url": "https://github.com/vtex-apps/stack-layout"
    },
    {
      "appName": "vtex.sticky-layout",
      "title": "Sticky Layout",
      "description": "Provides layout structures to help building elements that should be fixed positioned.",
      "url": "https://github.com/vtex-apps/sticky-layout"
    },
    {
      "appName": "vtex.tab-layout",
      "title": "Tab Layout",
      "description": "Builds custom tabbed layouts. In other words, it allows you to build the store layout using tabs.",
      "url": "https://github.com/vtex-apps/tab-layout"
    }
  ]
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/pickup-availability.available-header": "Disponível em:",
  "store/pickup-availability.input-form-header": "Escolha um endereço para encontrar uma loja:",
  "store/pickup-availability.error-position-message": "Se produjo un error al intentar obtener la posición del dispositivo",
  "store/pickup-availability.availability-header": "Disponibilidade",
  "store/pickup-availability.select-sku": "Selecione algum SKU acima para checar sua disponibilidade",
  "store/pickup-availability.select-store": "Escolha uma loja para retirar seu produto",
  "store/pickup-availability.input-placeholder": "Busque um endereço",
  "store/pickup-availability.empty-list": "Não foi possível achar um locais de retirada próximos ao endereço buscado",
  "store/pickup-availability.pickup-estimate": "Disponível: {estimate}",
  "store/pickup-availability.pickup-unavailable": "Indisponível para retirada",
  "store/pickup-availability.choose-different": "Escolher outra loja",
  "store/pickup-availability.available-for-pickup": "Esse SKU está disponível para retirada",
  "store/pickup-availability.choose-store": "Escolher uma loja",
  "store/pickup-availability.see-all": "Ver todas as lojas"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/pickup-availability.available-header": "Available at:",
  "store/pickup-availability.input-form-header": "Choose an address to find a store",
  "store/pickup-availability.error-position-message": "An error occurred when trying to get the device position",
  "store/pickup-availability.availability-header": "Availability",
  "store/pickup-availability.select-sku": "Select SKUs above to check availability for pickup",
  "store/pickup-availability.select-store": "Select a store to pickup your product",
  "store/pickup-availability.input-placeholder": "Search for an address",
  "store/pickup-availability.empty-list": "Could not find pickup locations near specified address",
  "store/pickup-availability.pickup-estimate": "Available: {estimate}",
  "store/pickup-availability.pickup-unavailable": "Unavailable for pickup",
  "store/pickup-availability.choose-different": "Choose a different store",
  "store/pickup-availability.available-for-pickup": "This product is available for pickup.",
  "store/pickup-availability.choose-store": "Choose store",
  "store/pickup-availability.see-all": "See all stores"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/pickup-availability.available-header": "Displayed above pickup list",
  "store/pickup-availability.input-form-header": "Displayed above address input form",
  "store/pickup-availability.error-position-message": "Error message displayed when failed to get user position",
  "store/pickup-availability.availability-header": "Used as header",
  "store/pickup-availability.select-sku": "Warn user to select a valid SKU to see component correctly",
  "store/pickup-availability.select-store": "Header for modal with store list",
  "store/pickup-availability.input-placeholder": "Placeholder used in address input",
  "store/pickup-availability.empty-list": "Message to be showed when no pickup was found after address search",
  "store/pickup-availability.pickup-estimate": "Used to display the estimate time for user to item be available to pickup",
  "store/pickup-availability.pickup-unavailable": "Used to display that pickup is not available for this item in the selected store",
  "store/pickup-availability.choose-different": "Used in button to select a different store and show address form",
  "store/pickup-availability.available-for-pickup": "Showed to displayed that product is available for pickup in the start of the flow",
  "store/pickup-availability.choose-store": "Used in button to select a store and show address form in the start of the flow",
  "store/pickup-availability.see-all": "Used in button to display modal with all stores"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/pickup-availability.available-header": "Disponible en:",
  "store/pickup-availability.input-form-header": "Elija una dirección para encontrar una tienda:",
  "store/pickup-availability.error-position-message": "Error message displayed when failed to get user position",
  "store/pickup-availability.availability-header": "Disponibilidad",
  "store/pickup-availability.select-sku": "Seleccione cualquier SKU arriba para verificar disponibilidad",
  "store/pickup-availability.select-store": "Elija una tienda para recoger su producto",
  "store/pickup-availability.input-placeholder": "Buscar una dirección",
  "store/pickup-availability.empty-list": "No se encontraron ubicaciones de recogida cerca de la dirección que buscó",
  "store/pickup-availability.pickup-estimate": "Disponible: {estimate}",
  "store/pickup-availability.pickup-unavailable": "No disponible para retiro",
  "store/pickup-availability.choose-different": "Elija otra tienda",
  "store/pickup-availability.available-for-pickup": "Este SKU está disponible para recoger",
  "store/pickup-availability.choose-store": "Elija una tienda",
  "store/pickup-availability.see-all": "Ver todas las tiendas"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/pickup-availability.available-header": "متاح في:",
  "store/pickup-availability.input-form-header": "اختر عنوانا للعثور على متجر",
  "store/pickup-availability.error-position-message": "حدث خطأ عند محاولة الحصول على موضع الجهاز",
  "store/pickup-availability.availability-header": "التوافر",
  "store/pickup-availability.select-sku": "حدد SKUs أعلاه للتحقق من التوافر للاستلام",
  "store/pickup-availability.select-store": "حدد متجر للحصول على المنتج الخاص بك",
  "store/pickup-availability.input-placeholder": "بحث عن عنوان",
  "store/pickup-availability.empty-list": "تعذر العثور على مواقع الاستلام بالقرب من عنوان محدد",
  "store/pickup-availability.pickup-estimate": "متوفر: {estimate}",
  "store/pickup-availability.pickup-unavailable": "غير متوفر للاستلام",
  "store/pickup-availability.choose-different": "اختر متجرًا مختلفًا",
  "store/pickup-availability.available-for-pickup": "هذا المنتج متوفر لأخذ العروض.",
  "store/pickup-availability.choose-store": "اختيار المتجر",
  "store/pickup-availability.see-all": "مشاهدة جميع المتاجر"
}

```


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

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

[Assistant]
Here's the implementation:

```markdown
# Pickup Availability

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

[<i class="fa-brands fa-github"></i> Source code](https://github.com/vtex-apps/pickup-availability)

The Pickup Availability app allows you to add a component to your store's product pages that displays in-store pickup availability for a selected SKU. This allows customers to check whether the item can be collected at a physical store.

>ℹ This component uses the [`ProductContext`](https://developers.vtex.com/docs/apps/vtex.product-context) app and should be implemented inside the `store.product` block.

## Before you begin

Make sure you have configured in-store pickup for your store, including pickup points and shipping policies.

## Installation

1. Open your [Store theme](https://developers.vtex.com/docs/guides/vtex-io-documentation-store-theme) project in a code editor.
2. In the terminal, [install](https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-an-app) the `pickup-availability` app in your account by running the `vtex install vtex.pickup-availability` command.
3. Add the `pickup-availability` app to your theme's `manifest.json` file under `peerDependencies`:

  ```json
  "peerDependencies": {
    	"vtex.pickup-availability": "0.x"
  }
  ```
## Configuration

Declare the `pickup-availability` block in the desired product template, such as `store.product`. For example:

```json
"store.product": {
  "children": [
      "flex-layout.row#product-main",
      "flex-layout.row#description",
      "shelf.relatedProducts",
      "pickup-availability"
    ]
 },
```

## Customization

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

| CSS Handles                         |
| ------------------------------------|
| `availabilityAction`                |
| `availabilityButtonContainer`       |
| `availabilityHeader`                |
| `availabilityMessage`               |
| `container`                         |
| `innerContainer`                    |
| `shippingEstimate[--]{timeModifier}`|

## Contributors

Thanks 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 -->
<table>
  <tr>
    <td align="center"><a href="https://www.linkedin.com/in/brunormoreira/"><img src="https://avatars2.githubusercontent.com/u/27451066?v=4" width="100px;" alt=""/><br /><sub><b>Bruno Moreira</b></sub></a><br /><a href="https://github.com/vtex-apps/pickup-availability/commits?author=brunorodmoreira" title="Code">💻</a></td>
  </tr>
</table>

<!-- 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 welcome!

```


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

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

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { graphql, DataValue } from 'react-apollo'
import useProduct from 'vtex.product-context/useProduct'
import { useCssHandles } from 'vtex.css-handles'

import logisticsQuery from './queries/logistics.gql'
import ContainerStateSelector from './components/ContainerStateSelector'

const CSS_HANDLES = ['container'] as const

type LogisticsResponse = { logistics: { googleMapsKey: string } }

type LogisticsQuery = DataValue<LogisticsResponse>

interface InjectedProps {
  logisticsQuery: LogisticsQuery
}

const StorePickup: FC<{} & InjectedProps> = ({ logisticsQuery }) => {
  const { skuSelector } = useProduct()
  const handles = useCssHandles(CSS_HANDLES)

  if (logisticsQuery.loading) {
    return null
  }

  return (
    <div className={handles.container}>
      <ContainerStateSelector
        showSelectSkuMessage={skuSelector.isVisible && !skuSelector.areAllVariationsSelected}
        googleMapsKey={logisticsQuery.logistics && logisticsQuery.logistics.googleMapsKey}
      />
    </div>
  )
}

export default graphql<any>(logisticsQuery, { name: 'logisticsQuery', options: { ssr: false } })(StorePickup)

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test",
    "pretest": "yarn",
    "lint": "tsc --noEmit && eslint --ext ts,tsx ."
  },
  "dependencies": {
    "@vtex/css-handles": "^1.0.0",
    "classnames": "^2.2.6",
    "graphql": "^14.0.2",
    "ramda": "^0.26.1",
    "react": "^16.8.3",
    "react-apollo": "3.1.3",
    "react-dom": "^16.8.3",
    "react-google-maps": "^9.4.5",
    "react-intl": "^2.7.2",
    "react-placeholder": "^3.0.2"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/classnames": "^2.2.7",
    "@types/googlemaps": "^3.37.4",
    "@types/graphql": "^14.5.0",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.7.5",
    "@types/prop-types": "^15.7.0",
    "@types/ramda": "^0.26.5",
    "@types/react": "^16.8.10",
    "@vtex/test-tools": "^2.1.1",
    "@vtex/tsconfig": "^0.2.0",
    "apollo-cache-inmemory": "^1.6.3",
    "apollo-client": "^2.6.4",
    "eslint": "5.16.0",
    "eslint-config-vtex": "^10.0.0",
    "eslint-config-vtex-react": "^4.0.1",
    "prettier": "^1.18.2",
    "tslint-eslint-rules": "^5.4.0",
    "typescript": "3.8.3"
  },
  "vtexTestTools": {
    "defaultLocale": "pt-BR"
  },
  "version": "0.3.1"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "pickup-availability": {
    "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 pickup-availability/react/mutations/savePickupInSession.gql from the pickup-availability VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation SavePickupInSession($name: String, $address: OrderFormAddressInput) {
  savePickupInSession(address: $address, name: $name) {
    cacheId
    favoritePickup {
      cacheId
      name
      address {
        street
        number
        cacheId
        addressId
        complement
        neighborhood
        country
        state
        geoCoordinates
        postalCode
        city
      }
    }
  }
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
import { FunctionComponent } from 'react'

declare global {
  interface StorefrontFunctionComponent<P = {}> extends FunctionComponent<P> {
    getSchema?(props: P): object
    schema?: object
  }

  interface StorefrontComponent<P = {}, S = {}> extends Component<P, S> {
    getSchema?(props: P): object
    schema: object
  }
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
interface SessionPickup {
  name: string
  address: SessionAddress
}

interface SessionData {
  error?: any
  response: {
    id: string
    namespaces: {
      public?: {
        favoritePickup?: {
          value: {
            name: string
            address: SessionAddress
          }
        }
      }
    }
  } | undefined
}

```


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

[User] Show me the implementation of pickup-availability/react/typings/vtex.react-portal.d.ts from the pickup-availability VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.react-portal' {
  import { ComponentType } from 'react'
  export const Overlay: ComponentType<{}>
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.css-handles' {
  type CssHandlesInput = readonly string[]
  type ValueOf<T extends readonly any[]> = T[number]
  type CssHandles<T extends CssHandlesInput> = Record<ValueOf<T>, string>
  interface CssHandlesOptions {
    migrationFrom?: string | string[]
  }

  export const useCssHandles: <T extends CssHandlesInput>(
    handles: T,
    options: CssHandlesOptions = {}
  ) => CssHandles<T>
  export const applyModifiers: (
    handles: string,
    modifier: string | string[]
  ) => string
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
interface SelectedItem {
  itemId: string
  sellers: {
    sellerId: string
    commertialOffer: {
      AvailableQuantity: number
    }
  }[]
}

interface Product {
  itemMetadata: ItemMetadata
}

declare module 'vtex.product-context/useProduct' {
  const useProduct: () => ProductContext
  export default useProduct

  interface ProductContext {
    selectedQuantity: number
    product: Product | null
    selectedItem: SelectedItem | null
    skuSelector: {
      areAllVariationsSelected: boolean
      isVisible: boolean
    }
  }
}

declare module 'vtex.product-context/ProductDispatchContext' {
  type DispatchFunction = (payload: { type: string; args?: any }) => void
  export const useProductDispatch: () => DispatchFunction
}

```


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

[User] Show me the implementation of pickup-availability/react/typings/vtex.render-runtime.d.ts from the pickup-availability VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* Typings for `render-runtime` */
declare module 'vtex.render-runtime' {
  import { Component, ComponentType, ReactElement, ReactType } from 'react'

  interface Runtime {
    navigate: (options: NavigationOptions) => void
    culture: {
      country: string
    }
  }

  export interface NavigationOptions {
    page: string
    params?: any
  }

  export interface RenderContextProps {
    runtime: Runtime
  }

  interface ExtensionPointProps {
    id: string
    [key: string]: any
  }

  export const ExtensionPoint: ComponentType<ExtensionPointProps>

  interface ChildBlockProps {
    id: string
  }

  export const ChildBlock: ComponentType<ChildBlockProps>
  export const useChildBlock = function({ id: string }): object {}

  export const Helmet: ReactElement
  export const Link: ReactType
  export const NoSSR: ReactElement
  export const RenderContextConsumer: ReactElement
  export const canUseDOM: boolean
  export const withRuntimeContext: <TOriginalProps extends object>(
    Component: ComponentType<TOriginalProps & RenderContextProps>
  ) => ComponentType<TOriginalProps>

  export const useRuntime: () => 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 pickup-availability/react/typings/vtex.device-detector.d.ts from the pickup-availability VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.device-detector' {
  interface DeviceType {
    isMobile: boolean
  }
  export const useDevice: () => DeviceType
}

```


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

[User] Show me the implementation of pickup-availability/react/typings/vtex.store-icons.d.ts from the pickup-availability VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.store-icons' {
  import { ComponentType } from 'react'
  interface Props {
    size: number
    viewBox?: string
  }

  export const IconLocationInput: ComponentType<Props>
  export const IconClose: ComponentType<Props & { type: string }>
}

```