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

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

[Assistant]
Here's the implementation:

```markdown
# Product Review Interfaces

> Interfaces for a product review app.

This app provides extensible interfaces that can be used by the `vtex.store` and a theme app. A review app would depend on this app and extend the interfaces provided to become available in the store.

You can see an example of a review app [here](/example).

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "lint": "tsc --noEmit && eslint --ext ts ."
  },
  "dependencies": {
    "react": "^16.8.3",
    "react-dom": "^16.8.3"
  },
  "devDependencies": {
    "@types/graphql": "^14.2.0",
    "@types/jest": "^24.0.11",
    "@types/node": "^11.13.0",
    "@types/prop-types": "^15.7.0",
    "@types/react": "^16.8.10",
    "apollo-client": "^2.5.1",
    "eslint": "^5.16.0",
    "eslint-config-vtex": "^10.1.0",
    "prettier": "^1.16.4",
    "tslint-eslint-rules": "^5.4.0",
    "typescript": "3.3.4000"
  }
}

```


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

[User] Show me the implementation of product-review-interfaces/react/Noop.tsx from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

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

const Noop: FunctionComponent = () => <></>

export default Noop

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "product-review-form": {
    "component": "Noop",
    "extensible": "public"
  },
  "product-reviews": {
    "component": "Noop",
    "extensible": "public"
  },
  "product-questions-and-answers": {
    "component": "Noop",
    "extensible": "public"
  },
  "product-rating-summary": {
    "component": "Noop",
    "extensible": "public"
  },
  "product-rating-inline": {
    "component": "Noop",
    "extensible": "public"
  }
}
```


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

[User] Show me the implementation of product-review-interfaces/example/messages/pt.json from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "qna": "Perguntas e respostas para {name}",
  "stars": "Estrelas para {name}",
  "rating-summary": "Resumo das avaliações para {name}",
  "review-form": "Formulário de avaliação",
  "reviews": "Mostre as avaliações de {name} aqui"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "qna": "Questions and answers for {name}",
  "stars": "Stars rating for {name}",
  "rating-summary": "Rating summary for {name}",
  "review-form": "Review form",
  "reviews": "Show {name} reviews here"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "qna": "Questions and answers",
  "stars": "Stars",
  "rating-summary": "Rating summary",
  "review-form": "Review form",
  "reviews": "Reviews"
}

```


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

[User] Show me the implementation of product-review-interfaces/example/messages/es.json from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "qna": "Preguntas y respuestas para {name}",
  "stars": "Estrellas para {name}",
  "rating-summary": "Resumen de las valoraciones para {name}",
  "review-form": "Formulario de evaluación",
  "reviews": "Mostrar las evaluaciones de {name} aquí"
}

```


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

[User] Show me the implementation of product-review-interfaces/example/graphql/schema.graphql from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

```graphql
type Query {
  appSettings: Settings @cacheControl(scope: PUBLIC, maxAge: MEDIUM)
}

type Settings {
  storeId: String
  productBinding: 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 product-review-interfaces/example/node/package.json from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "ramda": "^0.25.0"
  },
  "devDependencies": {
    "@types/node": "8.x",
    "@types/ramda": "types/npm-ramda#dist",
    "@vtex/api": "3.8.1",
    "eslint": "^5.16.0",
    "eslint-config-vtex": "^10.1.0",
    "prettier": "^1.18.2",
    "typescript": "3.5.2"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty && tslint -c tslint.json --fix './**/*.ts'"
  }
}

```


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

[User] Show me the implementation of product-review-interfaces/example/node/index.ts from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { ClientsConfig, LRUCache, Service, IOClients, ServiceContext } from '@vtex/api'
import { Clients } from './clients'

import settingsResolver from './resolvers/settings'

const TIMEOUT_MS = 800

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

// This is the configuration for clients available in `ctx.clients`.
const clients: ClientsConfig<Clients> = {
  // We pass our custom implementation of the clients bag, containing the Status client.
  implementation: Clients,
  options: {
    // All IO Clients will be initialized with these options, unless otherwise specified.
    default: {
      retries: 2,
      timeout: TIMEOUT_MS,
    },
    // This key will be merged with the default options and add this cache to our Status client.
    status: {
      memoryCache,
    },
  },
}

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

// Export a service that defines route handlers and client options.
export default new Service<IOClients>({
  clients,
  graphql: {
    resolvers: {
      Query: {
        appSettings: settingsResolver,
      }
    },
  },
})
```


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

[User] Show me the implementation of product-review-interfaces/example/react/styles.css from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

```css
.stars {}

.star {}
.star--filled {}
.star--empty {}
```


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

[User] Show me the implementation of product-review-interfaces/example/react/RatingSummary.tsx from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent, useContext } from 'react'
import { FormattedMessage } from 'react-intl'
import { ProductContext } from 'vtex.product-context'
import Stars from './components/Stars'

const RatingSummary: FunctionComponent = () => {
  const { product } = useContext(ProductContext)

  if (!product) {
    return null
  }

  return (
    <div title={name}>
      <Stars rating={4} />
      <FormattedMessage
        id="rating-summary"
        values={{
          name: product.productName,
        }}
      />
    </div>
  )
}

export default RatingSummary

```


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

[User] Show me the implementation of product-review-interfaces/example/react/ReviewForm.tsx from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { FormattedMessage } from 'react-intl'

const ReviewForm: FunctionComponent = () => {
  return (
    <div>
      <FormattedMessage id="review-form" />
    </div>
  )
}

export default ReviewForm

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test",
    "lint": "tsc --noEmit && eslint --ext ts,tsx . --fix"
  },
  "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/graphql": "^14.2.0",
    "@types/jest": "^24.0.11",
    "@types/node": "^11.13.0",
    "@types/prop-types": "^15.7.0",
    "@types/ramda": "^0.26.5",
    "@types/react": "^16.8.10",
    "@types/react-intl": "^2.3.17",
    "@vtex/test-tools": "^0.2.0",
    "apollo-client": "^2.5.1",
    "eslint": "^5.16.0",
    "eslint-config-vtex-react": "^4.1.0",
    "prettier": "^1.18.2",
    "typescript": "3.5.2"
  }
}

```


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

[User] Show me the implementation of product-review-interfaces/example/react/QnA.tsx from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent, useContext } from 'react'
import { FormattedMessage } from 'react-intl'
import { ProductContext } from 'vtex.product-context'

const QnA: FunctionComponent<QnAProps> = () => {
  const { product } = useContext(ProductContext)

  if (!product) {
    return null
  }

  return (
    <div>
      <FormattedMessage
        id="qna"
        values={{
          name: product.productName,
        }}
      />
    </div>
  )
}

interface QnAProps {
  productQuery: any
}

export default QnA

```


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

[User] Show me the implementation of product-review-interfaces/example/react/Reviews.tsx from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent, useContext } from 'react'
import { FormattedMessage } from 'react-intl'
import { ProductContext } from 'vtex.product-context'
import withSettings, { Settings } from './components/withSettings'
import { DataProps } from 'react-apollo'

const Reviews: FunctionComponent<Partial<DataProps<Settings>>> = () => {
  const { product } = useContext(ProductContext)

  if (!product) {
    return null
  }

  return (
    <div>
      <FormattedMessage
        id="reviews"
        values={{
          name: product.productName,
        }}
      />
    </div>
  )
}

export default withSettings(Reviews)

```


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

[User] Show me the implementation of product-review-interfaces/example/react/RatingInline.tsx from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useContext, FunctionComponent } from 'react'
import { ProductSummaryContext } from 'vtex.product-summary'
import Stars from './components/Stars'

const RatingInline: FunctionComponent = () => {
  const { product } = useContext(ProductSummaryContext)

  return (
    <div title={product.name}>
      <Stars rating={4} />
    </div>
  )
}

export default RatingInline

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store.product-review-form": {
    "blocks": ["product-review-form.example-review"]
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "product-review-form.example-review": {
    "component": "ReviewForm"
  },
  "product-reviews.example-review": {
    "component": "Reviews"
  },
  "product-questions-and-answers.example-review": {
    "component": "QnA"
  },
  "product-rating-summary.example-review": {
    "component": "RatingSummary"
  },
  "product-rating-inline.example-review": {
    "component": "RatingInline"
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store.product-review-form": {
    "path": "/new-review"
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "product-rating-summary": "product-rating-summary.example-review",
  "product-reviews": "product-reviews.example-review",
  "product-questions-and-answers": "product-questions-and-answers.example-review",
  "product-rating-inline": "product-rating-inline.example-review",
  "product-review-form": "product-review-form.example-review"
}

```


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

[User] Show me the implementation of product-review-interfaces/example/node/clients/productReview.ts from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

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

export default class ProductReview extends ExternalClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super('http://httpstat.us', context, options)
  }

  public async getStatus (status: number): Promise<string> {
    return this.http.get(status.toString(), {
      metric: 'status-get',
    })
  }

  public async getStatusWithHeaders (status: number): Promise<IOResponse<string>> {
    return this.http.getRaw(status.toString(), {
      metric: 'status-get-raw',
    })
  }
}
```


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

[User] Show me the implementation of product-review-interfaces/example/node/clients/index.ts from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

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

import ProductReview from './productReview'

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


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

[User] Show me the implementation of product-review-interfaces/example/node/resolvers/settings.ts from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { ServiceContext } from "@vtex/api";

declare var process : {
  env: {
    VTEX_APP_ID: string
  }
}

const appId = process.env.VTEX_APP_ID

export default async function settings(_root: any, _args: {}, ctx: ServiceContext) {
  const settings = await ctx.clients.apps.getAppSettings(appId)

  return settings
}
```


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

[User] Show me the implementation of product-review-interfaces/example/react/typings/storefront.d.ts from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

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

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

  interface StorefrontComponent<P = {}, S = {}> extends Component<P, S> {
    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 product-review-interfaces/example/react/typings/vtex.product-context.d.ts from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.product-context' {
  import { Context } from 'react'

  interface ProductContext {
    product: any
  }

  export const ProductContext = Context
}

```


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

[User] Show me the implementation of product-review-interfaces/example/react/typings/css.d.ts from the product-review-interfaces 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 product-review-interfaces/example/react/typings/graphql.d.ts from the product-review-interfaces 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 product-review-interfaces/example/react/typings/vtex.product-summary.d.ts from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.product-summary' {
  import { Context } from 'react'

  interface ProductSummary {
    product: any
  }

  export const ProductSummaryContext = Context
}

```


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

[User] Show me the implementation of product-review-interfaces/example/react/components/withSettings.tsx from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

```tsx
import settings from '../graphql/appSettings.graphql'
import { graphql } from 'react-apollo'

export interface Settings {
  storeId: string
  productBinding: string
}

const withSettings = graphql<{}, Settings>(settings)

export default withSettings

```


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

[User] Show me the implementation of product-review-interfaces/example/react/components/Stars.tsx from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent, useMemo } from 'react'
import Star from './Star'
import styles from '../styles.css'

const Stars: FunctionComponent<StarsProps> = ({ rating }) => {
  const stars = useMemo(
    () => [null, null, null, null, null].map((_, index) => index < rating),
    [rating]
  )

  return (
    <div className={`${styles.stars} c-on-base`}>
      {stars.map((value, index) => (
        <Star key={index} filled={value} />
      ))}
    </div>
  )
}

interface StarsProps {
  rating: number
}

export default Stars

```


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

[User] Show me the implementation of product-review-interfaces/example/react/components/Star.tsx from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import styles from '../styles.css'

const Star: FunctionComponent<StarProps> = ({ filled }) => {
  const style = filled ? styles['star--filled'] : styles['star--empty']
  const content = filled ? '★' : '☆'

  return <span className={`${styles.star} ${style}`}>{content}</span>
}

interface StarProps {
  filled: boolean
}

export default Star

```


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

[User] Show me the implementation of product-review-interfaces/example/react/graphql/appSettings.graphql from the product-review-interfaces VTEX app.

[Assistant]
Here's the implementation:

```graphql
query appSettings {
  appSettings {
    storeId
    productBinding
  }
}
```


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

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

[Assistant]
Here's the implementation:

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

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

Email & Marketing Automation Platform. Boost your business with high performance campaigns

## Configuration

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

### Using VTEX App Store

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

### Using VTEX IO Toolbelt

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

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

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

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

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

```


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

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

[Assistant]
Here's the implementation:

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

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

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

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

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/graphql": "^14.5.0",
    "@types/jest": "^25.1.5",
    "@types/node": "^13.11.0",
    "@types/react": "^16.9.31",
    "@types/react-intl": "^3.0.0",
    "@vtex/test-tools": "^3.1.0",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.6.8",
    "graphql": "^14.5.4",
    "react-intl": "^3.11.0",
    "typescript": "3.8.3"
  }
}

```


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

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

[Assistant]
Here's the implementation:

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


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

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

[Assistant]
Here's the implementation:

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

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

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

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

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

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

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

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

interface CategoryMetaData {
  id: string
  name: string
}

interface DepartmentMetaData {
  id: string
  name: string
}

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

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

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

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

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

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

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

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

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

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

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

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

export interface Impression {
  product: ProductSummary
  position: number
}

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

export interface ShippingMethod {
  itemId: string
  selectedSla: string
}

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

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

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

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

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

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

export interface Seller {
  commertialOffer: CommertialOffer
  sellerId: string
}

export interface CommertialOffer {
  Price: number
  ListPrice: number
  AvailableQuantity: number
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.render-runtime' {
  export const canUseDOM: boolean
}

```


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

[User] Show me the implementation of icommkt/react/typings/global.d.ts from the icommkt VTEX app.

[Assistant]
Here's the implementation:

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

```


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

[User] Show me the implementation of checkout-summary/messages/sl.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Popusti",
  "store/checkout-summary.Tax": "Davki",
  "store/checkout-summary.Items": "Skupaj",
  "store/checkout-summary.Shipping": "Dobava",
  "store/checkout-summary.Summary": "Povzetek",
  "store/checkout-summary.Total": "Skupaj",
  "store/checkout-summary.disclaimer": "Dostava in davki, izračunani v košarici.",
  "admin/editor.checkout-summary.label": "Povzetek",
  "admin/editor.checkout-summary.title": "Naziv"
}

```


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

[User] Show me the implementation of checkout-summary/messages/hu.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Kedvezmények",
  "store/checkout-summary.Tax": "Adók",
  "store/checkout-summary.Items": "Részösszeg",
  "store/checkout-summary.Shipping": "Kézbesítés",
  "store/checkout-summary.Summary": "Összegzés",
  "store/checkout-summary.Total": "Összesen",
  "store/checkout-summary.disclaimer": "A szállítás és adók a kosárban kerülnek kiszámításra.",
  "admin/editor.checkout-summary.label": "Összegzés",
  "admin/editor.checkout-summary.title": "Cím"
}

```


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

[User] Show me the implementation of checkout-summary/messages/nl.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Kortingen",
  "store/checkout-summary.Tax": "Belastingen",
  "store/checkout-summary.Items": "Subtotaal",
  "store/checkout-summary.Shipping": "Levering",
  "store/checkout-summary.Summary": "Overzicht",
  "store/checkout-summary.Total": "Totaal",
  "store/checkout-summary.disclaimer": "Verzendings- en belastingkosten worden in de winkelwagen berekend.",
  "admin/editor.checkout-summary.label": "Overzicht",
  "admin/editor.checkout-summary.title": "Titel"
}

```


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

[User] Show me the implementation of checkout-summary/messages/ja.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "ディスカウント",
  "store/checkout-summary.Tax": "税金",
  "store/checkout-summary.Items": "小計",
  "store/checkout-summary.Shipping": "配送",
  "store/checkout-summary.Summary": "サマリ",
  "store/checkout-summary.Total": "合計",
  "store/checkout-summary.disclaimer": "送料と税金はカートで計算されます。",
  "admin/editor.checkout-summary.label": "サマリ",
  "admin/editor.checkout-summary.title": "タイトル"
}

```


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

[User] Show me the implementation of checkout-summary/messages/de.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Rabatt",
  "store/checkout-summary.Tax": "Steuern",
  "store/checkout-summary.Items": "Zwischensumme",
  "store/checkout-summary.Shipping": "Lieferung",
  "store/checkout-summary.Summary": "Zusammenfassung",
  "store/checkout-summary.Total": "Gesamt",
  "store/checkout-summary.disclaimer": "Versandkosten und Steuern werden im Warenkorb berechnet.",
  "admin/editor.checkout-summary.label": "Zusammenfassung",
  "admin/editor.checkout-summary.title": "Titel"
}

```


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

[User] Show me the implementation of checkout-summary/messages/ru.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Скидки",
  "store/checkout-summary.Tax": "Налоги",
  "store/checkout-summary.Items": "Промежуточный итог",
  "store/checkout-summary.Shipping": "Доставка",
  "store/checkout-summary.Summary": "Содержание",
  "store/checkout-summary.Total": "Всего",
  "store/checkout-summary.disclaimer": "Стоимость доставки и налоги рассчитываются в корзине.",
  "admin/editor.checkout-summary.label": "Содержание",
  "admin/editor.checkout-summary.title": "Название"
}

```


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

[User] Show me the implementation of checkout-summary/messages/pl.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Zniżki",
  "store/checkout-summary.Tax": "Podatki",
  "store/checkout-summary.Items": "Podsuma",
  "store/checkout-summary.Shipping": "Dostawa",
  "store/checkout-summary.Summary": "Podsumowanie",
  "store/checkout-summary.Total": "Suma",
  "store/checkout-summary.disclaimer": "Wysyłka i podatki obliczone w Koszyku.",
  "admin/editor.checkout-summary.label": "Podsumowanie",
  "admin/editor.checkout-summary.title": "Tytuł"
}

```


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

[User] Show me the implementation of checkout-summary/messages/uk.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Знижки",
  "store/checkout-summary.Tax": "Податки",
  "store/checkout-summary.Items": "Проміжний підсумок",
  "store/checkout-summary.Shipping": "Доставка",
  "store/checkout-summary.Summary": "Підсумок",
  "store/checkout-summary.Total": "Разом",
  "store/checkout-summary.disclaimer": "Вартість доставлення й податки розраховуються в кошику.",
  "admin/editor.checkout-summary.label": "Підсумок",
  "admin/editor.checkout-summary.title": "Назва"
}

```


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

[User] Show me the implementation of checkout-summary/messages/fi.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Alennukset",
  "store/checkout-summary.Tax": "Verot",
  "store/checkout-summary.Items": "Välisumma",
  "store/checkout-summary.Shipping": "Toimitus",
  "store/checkout-summary.Summary": "Yhteenveto",
  "store/checkout-summary.Total": "Yhteensä",
  "store/checkout-summary.disclaimer": "Toimituskulut ja verot lasketaan ostoskorissa.",
  "admin/editor.checkout-summary.label": "Yhteenveto",
  "admin/editor.checkout-summary.title": "Nimi"
}

```


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

[User] Show me the implementation of checkout-summary/messages/sk.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Zľavy",
  "store/checkout-summary.Tax": "Daň",
  "store/checkout-summary.Items": "Medzisúčet",
  "store/checkout-summary.Shipping": "Dodanie",
  "store/checkout-summary.Summary": "Zhrnutie",
  "store/checkout-summary.Total": "Celkom",
  "store/checkout-summary.disclaimer": "Poštovné a dane sa počítajú v košíku.",
  "admin/editor.checkout-summary.label": "Zhrnutie",
  "admin/editor.checkout-summary.title": "Názov"
}

```


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

[User] Show me the implementation of checkout-summary/messages/id-ID.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Diskon",
  "store/checkout-summary.Tax": "Pajak",
  "store/checkout-summary.Items": "Subtotal",
  "store/checkout-summary.Shipping": "Pengiriman",
  "store/checkout-summary.Summary": "Ringkasan",
  "store/checkout-summary.Total": "Total",
  "store/checkout-summary.disclaimer": "Pengiriman dan pajak dihitung di Troli.",
  "admin/editor.checkout-summary.label": "Ringkasan",
  "admin/editor.checkout-summary.title": "Judul",
  "store/checkout-summary.installments.default": "Hingga {installmentsNumber}x {installmentValue}{hasInterest, select, true {, {interestRate} bunga} false { interest-free}}",
  "admin/editor.checkout-summary.installments.description": "Nilai tersedia untuk interpolasi: '{installmentsNumber}, {installmentValue}, {installmentsTotalValue}, {interestRate}, {hasInterest}, {paymentSystemName}'",
  "admin/editor.checkout-summary.installments.title": "Cicilan"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Descontos",
  "store/checkout-summary.Tax": "Impostos",
  "store/checkout-summary.Items": "Subtotal",
  "store/checkout-summary.Summary": "Resumo",
  "store/checkout-summary.Shipping": "Entrega",
  "store/checkout-summary.Total": "Total",
  "store/checkout-summary.disclaimer": "Taxas e frete calculados no Carrinho",
  "admin/editor.checkout-summary.label": "Resumo",
  "admin/editor.checkout-summary.title": "Título",
  "store/checkout-summary.installments.default": "Em até {installmentsNumber}x {installmentValue}{hasInterest, select, true {, {interestRate} de juros} false { sem juros}}",
  "admin/editor.checkout-summary.installments.description": "Valores disponiveis para interpolação: '{installmentsNumber}, {installmentValue}, {installmentsTotalValue}, {interestRate}, {hasInterest}, {paymentSystemName}'",
  "admin/editor.checkout-summary.installments.title": "Parcelamento"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Discounts",
  "store/checkout-summary.Tax": "Taxes",
  "store/checkout-summary.Items": "Subtotal",
  "store/checkout-summary.Shipping": "Delivery",
  "store/checkout-summary.Summary": "Summary",
  "store/checkout-summary.Total": "Total",
  "store/checkout-summary.disclaimer": "Shipping and taxes calculated in the Cart.",
  "admin/editor.checkout-summary.label": "Summary",
  "admin/editor.checkout-summary.title": "Title",
  "store/checkout-summary.installments.default": "Up to {installmentsNumber}x {installmentValue}{hasInterest, select, true {, {interestRate} of interest} false { interest-free}}",
  "admin/editor.checkout-summary.installments.description": "Values available for interpolation: '{installmentsNumber}, {installmentValue}, {installmentsTotalValue}, {interestRate}, {hasInterest}, {paymentSystemName}'",
  "admin/editor.checkout-summary.installments.title": "Installments"
}

```


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

[User] Show me the implementation of checkout-summary/messages/it.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Sconti",
  "store/checkout-summary.Tax": "Imposte",
  "store/checkout-summary.Items": "Subtotale",
  "store/checkout-summary.Shipping": "Spedizione",
  "store/checkout-summary.Summary": "Riepilogo",
  "store/checkout-summary.Total": "Totale",
  "store/checkout-summary.disclaimer": "Tasse e spese di spedizione calcolate nel carrello.",
  "admin/editor.checkout-summary.label": "Riepilogo",
  "admin/editor.checkout-summary.title": "Titolo"
}

```


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

[User] Show me the implementation of checkout-summary/messages/fr.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Réductions",
  "store/checkout-summary.Tax": "Taxes",
  "store/checkout-summary.Items": "Sous-total",
  "store/checkout-summary.Shipping": "Livraison",
  "store/checkout-summary.Summary": "Résumé",
  "store/checkout-summary.Total": "Total",
  "store/checkout-summary.disclaimer": "Les frais d’expédition et les taxes sont calculés au niveau du panier.",
  "admin/editor.checkout-summary.label": "Résumé",
  "admin/editor.checkout-summary.title": "Titre"
}

```


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

[User] Show me the implementation of checkout-summary/messages/el.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Εκπτώσεις",
  "store/checkout-summary.Tax": "Φόροι",
  "store/checkout-summary.Items": "Υποσύνολο",
  "store/checkout-summary.Shipping": "Παράδοση",
  "store/checkout-summary.Summary": "Περίληψη",
  "store/checkout-summary.Total": "Σύνολο",
  "store/checkout-summary.disclaimer": "Μεταφορικά και φόροι υπολογίστηκαν στο Καρότσι.",
  "admin/editor.checkout-summary.label": "Περίληψη",
  "admin/editor.checkout-summary.title": "Τίτλος"
}

```


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

[User] Show me the implementation of checkout-summary/messages/ro.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Discounturi",
  "store/checkout-summary.Tax": "Taxe",
  "store/checkout-summary.Items": "Subtotal",
  "store/checkout-summary.Shipping": "Livrare",
  "store/checkout-summary.Summary": "Sumar",
  "store/checkout-summary.Total": "Total",
  "store/checkout-summary.disclaimer": "Costurile de transport și taxele sunt calculate la Coș.",
  "admin/editor.checkout-summary.label": "Sumar",
  "admin/editor.checkout-summary.title": "Titlu"
}

```


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

[User] Show me the implementation of checkout-summary/messages/ca.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Descomptes",
  "store/checkout-summary.Tax": "Impostos",
  "store/checkout-summary.Items": "Subtotal",
  "store/checkout-summary.Shipping": "Lliurament",
  "store/checkout-summary.Summary": "Resum",
  "store/checkout-summary.Total": "Total",
  "store/checkout-summary.disclaimer": "Les despeses de lliurament i els impostos es calculen al carretó.",
  "admin/editor.checkout-summary.label": "Resum",
  "admin/editor.checkout-summary.title": "Títol"
}

```


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

[User] Show me the implementation of checkout-summary/messages/ko.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "할인",
  "store/checkout-summary.Tax": "세금",
  "store/checkout-summary.Items": "소계",
  "store/checkout-summary.Shipping": "배달",
  "store/checkout-summary.Summary": "요약",
  "store/checkout-summary.Total": "총액",
  "store/checkout-summary.disclaimer": "장바구니에서 계산되는 배송 및 세금입니다.",
  "admin/editor.checkout-summary.label": "요약",
  "admin/editor.checkout-summary.title": "제목"
}

```


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

[User] Show me the implementation of checkout-summary/messages/cs.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Slevy",
  "store/checkout-summary.Tax": "Daně",
  "store/checkout-summary.Items": "Mezisoučet",
  "store/checkout-summary.Shipping": "Doručení",
  "store/checkout-summary.Summary": "Souhrn",
  "store/checkout-summary.Total": "Celkem",
  "store/checkout-summary.disclaimer": "Poštovné a daně vypočtené v košíku.",
  "admin/editor.checkout-summary.label": "Souhrn",
  "admin/editor.checkout-summary.title": "Název"
}

```


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

[User] Show me the implementation of checkout-summary/messages/no.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Rabatter",
  "store/checkout-summary.Tax": "Skatter",
  "store/checkout-summary.Items": "Delsum",
  "store/checkout-summary.Shipping": "Levering",
  "store/checkout-summary.Summary": "Sammendrag",
  "store/checkout-summary.Total": "Total",
  "store/checkout-summary.disclaimer": "Frakt og avgifter beregnes i handlekurven.",
  "admin/editor.checkout-summary.label": "Sammendrag",
  "admin/editor.checkout-summary.title": "Tittel"
}

```


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

[User] Show me the implementation of checkout-summary/messages/da.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Rabatter",
  "store/checkout-summary.Tax": "Moms",
  "store/checkout-summary.Items": "Subtotal",
  "store/checkout-summary.Shipping": "Levering",
  "store/checkout-summary.Summary": "Opsummering",
  "store/checkout-summary.Total": "I alt",
  "store/checkout-summary.disclaimer": "Forsendelse og afgifter beregnet i indkøbskurven.",
  "admin/editor.checkout-summary.label": "Opsummering",
  "admin/editor.checkout-summary.title": "Titel"
}

```


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

[User] Show me the implementation of checkout-summary/messages/th.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "ส่วนลด",
  "store/checkout-summary.Tax": "ภาษี",
  "store/checkout-summary.Items": "ยอดรวม",
  "store/checkout-summary.Shipping": "การจัดส่ง",
  "store/checkout-summary.Summary": "ภาพรวม",
  "store/checkout-summary.Total": "รวมทั้งหมด",
  "store/checkout-summary.disclaimer": "ค่าจัดส่งและภาษีที่คำนวณได้ในรถเข็น",
  "admin/editor.checkout-summary.label": "ภาพรวม",
  "admin/editor.checkout-summary.title": "ชื่อหัวข้อ",
  "store/checkout-summary.installments.default": "นานสูงสุด {installmentsNumber}x {installmentValue}{hasInterest, select, true {, {interestRate} ของดอกเบี้ย} false { interest-free}}",
  "admin/editor.checkout-summary.installments.description": "ค่าที่มีสำหรับการประมาณค่าในช่วง: '{installmentsNumber}, {installmentValue}, {installmentsTotalValue}, {interestRate}, {hasInterest}, {paymentSystemName}'",
  "admin/editor.checkout-summary.installments.title": "การผ่อนชำระ"
}

```


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

[User] Show me the implementation of checkout-summary/messages/sv.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Rabatter",
  "store/checkout-summary.Tax": "Skatter",
  "store/checkout-summary.Items": "Delbelopp",
  "store/checkout-summary.Shipping": "Leverans",
  "store/checkout-summary.Summary": "Summering",
  "store/checkout-summary.Total": "Totalt",
  "store/checkout-summary.disclaimer": "Frakt och moms beräknas i kundvagnen.",
  "admin/editor.checkout-summary.label": "Summering",
  "admin/editor.checkout-summary.title": "Rubrik"
}

```


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

[User] Show me the implementation of checkout-summary/messages/nn.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Rabatter",
  "store/checkout-summary.Tax": "Skatter",
  "store/checkout-summary.Items": "Delsum",
  "store/checkout-summary.Shipping": "Levering",
  "store/checkout-summary.Summary": "Sammendrag",
  "store/checkout-summary.Total": "Total",
  "store/checkout-summary.disclaimer": "Frakt og avgifter beregnes i handlekurven.",
  "admin/editor.checkout-summary.label": "Sammendrag",
  "admin/editor.checkout-summary.title": "Tittel"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "Descuentos",
  "store/checkout-summary.Tax": "Impuestos",
  "store/checkout-summary.Items": "Subtotal",
  "store/checkout-summary.Shipping": "Entrega",
  "store/checkout-summary.Summary": "Resumen",
  "store/checkout-summary.Total": "Total",
  "store/checkout-summary.disclaimer": "Tasas y fletes calculados en el carrito",
  "admin/editor.checkout-summary.label": "Resumen",
  "admin/editor.checkout-summary.title": "Título",
  "store/checkout-summary.installments.default": "Hasta {installmentsNumber}x {installmentValue}{hasInterest, select, true {, {interestRate} de interés} false { sin interés}}",
  "admin/editor.checkout-summary.installments.description": "Valores disponibles para interpolación: '{installmentsNumber}, {installmentValue}, {installmentsTotalValue}, {interestRate}, {hasInterest}, {paymentSystemName}'",
  "admin/editor.checkout-summary.installments.title": "Cuotas"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/checkout-summary.Discounts": "الخصم",
  "store/checkout-summary.Tax": "الضرائب",
  "store/checkout-summary.Items": "تكلفة الطلب",
  "store/checkout-summary.Shipping": "تكلفة التوصيل",
  "store/checkout-summary.Summary": "الملخص",
  "store/checkout-summary.Total": "المجموع",
  "store/checkout-summary.disclaimer": "الشحن والضرائب المحسوبة في سلة التسوق.",
  "admin/editor.checkout-summary.label": "الملخص",
  "admin/editor.checkout-summary.title": "العنوان",
  "store/checkout-summary.installments.default": "لغاية {installmentsNumber}x {installmentValue}{hasInterest, select, true {, {interestRate} من الفوائد} false { interest-free}}",
  "admin/editor.checkout-summary.installments.description": "القيم المتاحة للاستيفاء: '{installmentsNumber}, {installmentValue}, {installmentsTotalValue}, {interestRate}, {hasInterest}, {paymentSystemName}'",
  "admin/editor.checkout-summary.installments.title": "الدفعات"
}

```


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

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

[Assistant]
Here's the implementation:

```markdown
# Summary

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

The Summary block displays the order totalizers and allows the user to add coupon codes. Currently, the Summary block only works out of the box within the [Minicart](https://github.com/vtex-apps/minicart) and the [Checkout Cart](https://github.com/vtex-apps/checkout-cart).

![image](https://user-images.githubusercontent.com/8902498/71037159-eb04da80-20fd-11ea-983e-ce49d2ca27c9.png)

Compact version:

![image](https://user-images.githubusercontent.com/8902498/71039765-b7c54a00-2103-11ea-9e38-32fc9eb174ba.png)

## Configuration

1. Add the Summary app to your theme's dependencies in `manifest.json`. For example:

```json
{
  "dependencies": {
    "vtex.checkout-summary": "0.x"
  }
}
```

2. Add the `checkout-summary.compact` block to the `minicart-summary` block of the Minicart or the `checkout-summary` block to the `summary-wrapper` block of the Checkout Cart. For example:

```json
{
  "minicart-summary#example": {
    "blocks": ["checkout-summary.compact"]
  }
}
```

### Advanced Customization

The `checkout-summary` block is made up of other smaller blocks. Currently, its default implementation is as follows:

```json
{
  "checkout-summary": {
    "children": ["flex-layout.row#summary-coupon", "summary-totalizers"]
  },
  "flex-layout.row#summary-coupon": {
    "children": ["summary-coupon"],
    "props": {
      "marginBottom": 6
    }
  },
  "summary-coupon": {
    "blocks": ["coupon"]
  }
}
```

By default implementation we mean that whenever you use `checkout-summary` in your store you're actually using the `json` above behind the scenes.

Therefore, in order to customize the Checkout Summary configuration, you can simply use the default implementation in your code and change it as you wish.
For more information on which props you need to pass to the Summary component, [see below](#components).

This app exports all of the following blocks. You can see more detailed information of the
`checkout-summary`, `checkout-summary.compact`, and `summary-totalizers` blocks in the [Components](#components) section.

```jsonc
{
  "checkout-summary": {
    "props": {
      "title": "Order Summary"
    }
  },
  "checkout-summary.compact": {
    "props": {
      "totalizersToShow": ["Items"]
    }
  },
  "summary-totalizers": {
    "props": {
      "showTotal": true,
      "showDeliveryTotal": true,
      "showOriginalTotal": false
    }
  },
  "summary-coupon": {
    // this block doesn't have any props
  },
  "summary-installments": {
    "props": {
      "message": "Up to {installmentsNumber}x {installmentValue}",
      "markers": []
    }
  }
}
```

Additionally, you can also include a [Drawer](https://vtex.io/docs/components/content-blocks/vtex.store-drawer) inside the `checkout-summary`.

Notice the following: the block declared as children of the `drawer-trigger` block will appear alongside the Summary title.

```jsonc
{
  "checkout-summary": {
    "blocks": ["drawer#my-drawer"],
    "children": ["flex-layout.row#summary-coupon", "summary-totalizers"]
  },
  "drawer#my-drawer": {
    "blocks": ["drawer-trigger#my-trigger"]
  },
  "drawer-trigger#my-trigger": {
    "children": [
      // whatever you put inside here will
      // appear alongside the summary title
    ]
  }
}
```

## Components

### SummaryTotalizers

The component rendered when the `summary-totalizers` block is used.

#### Props

| Prop name           | Type      | Default | Description                                                                                |
| ------------------- | --------- | ------- | ------------------------------------------------------------------------------------------------ |
| `showTotal`         | `boolean` | `true`  | Whether to display the overall order total                                                       |
| `showDeliveryTotal` | `boolean` | `true`  | Whether to display the shipping/delivery total                                                   |
| `showOriginalTotal` | `boolean` | `false` | Whether to display the original items value (sum of item list prices) next to the items subtotal |

### SummarySmall

The component rendered when used the `checkout-summary.compact` block.

#### Props

| Prop name                                            | Type     | Default             |
| ---------------------------------------------------- | -------- | ------------------- |
| [`totalizers`](#summarysmall-totalizers)             | `array`  | `undefined`         |
| [`totalizersToShow`](#summarysmall-totalizersToShow) | `array`  | `['Items']`         |
| [`total`](#summarysmall-total)                       | `number` | `undefined`         |
| [`totalCalculation`](#summarysmall-totalCalculation) | `enum`   | `visibleTotalizers` |

##### SummarySmall totalizers

`Array<{ id: string; value: number | null; name: string }>`

Same as the [Summary totalizers](#summary-totalizers) prop.

##### SummarySmall total

Same as the [Summary total](#summary-total) prop.

##### SummarySmall totalCalculation

Controls how the `Total` shown in the bottom of the summary is calculated. Possible values are: `visibleTotalizers`, which means that the `Total` shown will only take into account visible totalizers (the ones included in the `totalizersToShow` array), and `allTotalizers`, which will take into account all totalizers from `orderForm`, even if they're not being displayed.

##### SummarySmall totalizersToShow

`string[]`

Id of the totalizers that should be displayed inside this component, e.g.:

```js
;[
  // Value of the subtotal
  'Items',
  // Delivery value
  'Shipping',
]
```

### SummaryInstallments

The component rendered when used the `summary-installments` block. Renders the product installments. If more than one option is available, the one with the biggest number of installments will be displayed.

#### Props

| Prop name    | Type       | Description                                                                                | Default value |
| ------------ | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `markers`    | `[string]` | IDs of your choosing to identify the block's rendered message and customize it using the admin's Site Editor. Learn how to use them accessing the documentation on [Using the Markers prop to customize a block's message](https://vtex.io/docs/recipes/style/using-the-markers-prop-to-customize-a-blocks-message). Notice the following: a block's message can also be customized in the Store Theme source code using the `message` prop. | `[]`          |
| `blockClass` | `string`   | Block ID of your choosing to be used in [CSS customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization#using-the-blockclass-property).                                                                                | `undefined`   |
| `message`    | `string`   | Defines the block's default text i.e. the block message. You can also define which text message a block will render on the UI using the admin's Site Editor.                                                                                | `undefined`   |

#### Message variables

| Message variables        | Type      | Description                                                       |
| ------------------------ | --------- | ----------------------------------------------------------------- |
| `installmentsNumber`     | `string`  | Number of installments.                                           |
| `installmentValue`       | `string`  | Value of each installment.                                        |
| `installmentsTotalValue` | `string`  | Total value of installments.                                      |
| `interestRate`           | `string`  | Interest rate.                                                    |
| `paymentSystemName`      | `string`  | Payment System of the installments.                               |
| `hasInterest`            | `boolean` | Whether the installments have interest (`true`) or not (`false`). |

## Customization

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

| CSS Handles                |
| -------------------------- |
| `installments`             |
| `installmentsNumber`       |
| `installmentValue`         |
| `installmentsTotalValue`   |
| `interestRate`             |
| `paymentSystemName`        |
| `summaryTitle`             |
| `summaryContent`           |
| `summarySmallContent`      |
| `summarySmallDisclaimer`   |
| `summaryItemContainer`     |
| `summaryItemLabel`         |
| `summaryItemPrice`         |
| `summaryItemOriginalPrice` |

## Contributors ✨

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

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

<!-- ALL-CONTRIBUTORS-LIST:END -->

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

```


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

[User] Show me the implementation of checkout-summary/react/SummaryContext.tsx from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { createContext, useContext, PropsWithChildren } from 'react'

import { SummaryProps } from './Summary'

const SummaryContext = createContext<SummaryProps | undefined>(undefined)

export function useSummary() {
  const context = useContext(SummaryContext)

  if (context === undefined) {
    throw new Error('useSummary must be used within a SummaryProvider')
  }

  return context
}

function SummaryContextProvider({
  coupon,
  insertCoupon,
  loading,
  totalizers,
  total,
  originalTotal,
  children,
  paymentData,
}: PropsWithChildren<SummaryProps>) {
  return (
    <SummaryContext.Provider
      value={{
        coupon,
        insertCoupon,
        loading,
        totalizers,
        total,
        originalTotal,
        paymentData,
      }}
    >
      {children}
    </SummaryContext.Provider>
  )
}

export default SummaryContextProvider

```


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

[User] Show me the implementation of checkout-summary/react/SummarySmall.tsx from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { PropsWithChildren } from 'react'
import { FormattedMessage } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'
import { PaymentData } from 'vtex.checkout-graphql'

import { Totalizer } from './modules/types'
import SummaryContextProvider from './SummaryContext'

interface Props {
  totalizers: Totalizer[]
  total: number
  originalTotal?: number
  totalizersToShow?: string[]
  totalCalculation?: 'visibleTotalizers' | 'allTotalizers'
  paymentData: PaymentData
}

const CSS_HANDLES = ['summarySmallContent', 'summarySmallDisclaimer'] as const

function SummarySmall({
  total,
  originalTotal = 0,
  children,
  totalizers,
  totalizersToShow = ['Items'],
  totalCalculation = 'visibleTotalizers',
  paymentData,
}: PropsWithChildren<Props>) {
  const handles = useCssHandles(CSS_HANDLES)

  const filteredTotalizers = totalizers.filter((totalizer) =>
    totalizersToShow.includes(totalizer.id)
  )

  const totalToDisplay =
    totalCalculation === 'visibleTotalizers'
      ? filteredTotalizers.reduce((acc, totalizer) => {
          return (acc += totalizer.value ?? 0)
        }, 0)
      : total

  const shouldDisplayShippingDisclaimer = !totalizersToShow.includes('Shipping')

  return (
    <SummaryContextProvider
      totalizers={filteredTotalizers}
      total={totalToDisplay}
      originalTotal={originalTotal}
      paymentData={paymentData}
    >
      <div className={`${handles.summarySmallContent} c-on-base`}>
        {children}
      </div>
      {shouldDisplayShippingDisclaimer && (
        <span className={`${handles.summarySmallDisclaimer} t-small db mv4`}>
          <FormattedMessage id="store/checkout-summary.disclaimer" />
        </span>
      )}
    </SummaryContextProvider>
  )
}

export default SummarySmall

```


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

[User] Show me the implementation of checkout-summary/react/SummaryTotalizers.tsx from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment } from 'react'
import { Loading } from 'vtex.render-runtime'

import SummaryItem from './components/SummaryItem'
import { Totalizer } from './modules/types'
import { useSummary } from './SummaryContext'

const minTotalizerValue = 0
const tba = null
const shippingData = {
  id: 'Shipping',
  name: '',
  value: tba,
  __typename: 'Totalizer',
}

const isShippingPresent = (totalizers: Totalizer[]) => {
  return totalizers.some((t) => t.id === 'Shipping')
}

interface Props {
  showTotal?: boolean
  showDeliveryTotal?: boolean
  showOriginalTotal?: boolean
}

function SummaryTotalizers({
  showTotal = true,
  showDeliveryTotal = true,
  showOriginalTotal = false,
}: Props) {
  const { loading, totalizers, total, originalTotal } = useSummary()

  if (loading) {
    return <Loading />
  }

  if (!isShippingPresent(totalizers) && showDeliveryTotal) {
    totalizers.push(shippingData)
  }

  const orderHasNoValue = totalizers.length === 0

  return (
    <Fragment>
      {totalizers.map((totalizer) => (
        <SummaryItem
          key={totalizer.id}
          label={totalizer.id}
          name={totalizer.id === 'CustomTax' ? totalizer.name : ''}
          value={totalizer.value}
          originalValue={showOriginalTotal ? originalTotal : 0}
          large={false}
        />
      ))}

      {showTotal && (
        <SummaryItem
          label="Total"
          value={orderHasNoValue ? null : total || minTotalizerValue}
          large
        />
      )}
    </Fragment>
  )
}

export default SummaryTotalizers

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "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": "3"
  },
  "devDependencies": {
    "@apollo/react-testing": "3",
    "@types/classnames": "^2.2.7",
    "@types/graphql": "^14.2.0",
    "@types/jest": "^25.1.4",
    "@types/node": "^13.9.8",
    "@types/prop-types": "^15.7.0",
    "@types/ramda": "^0.26.5",
    "@types/react": "^16.9.31",
    "@types/react-intl": "^2.3.17",
    "@vtex/test-tools": "^3.3.2",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.5.1",
    "graphql": "^14.6.0",
    "typescript": "3.9.7",
    "vtex.checkout-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-graphql@0.56.1/public/@types/vtex.checkout-graphql",
    "vtex.coupon": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.coupon@0.10.3/public/@types/vtex.coupon",
    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.4/public/@types/vtex.css-handles",
    "vtex.flex-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.flex-layout@0.15.2/public/@types/vtex.flex-layout",
    "vtex.format-currency": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.format-currency@0.3.0/public/@types/vtex.format-currency",
    "vtex.formatted-price": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.formatted-price@0.4.0/public/@types/vtex.formatted-price",
    "vtex.order-coupon": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-coupon@0.7.1/public/@types/vtex.order-coupon",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.11/public/@types/vtex.render-runtime",
    "vtex.store-drawer": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-drawer@0.15.0/public/@types/vtex.store-drawer",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.135.3/public/@types/vtex.styleguide"
  },
  "version": "0.23.0"
}

```


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

[User] Show me the implementation of checkout-summary/react/SummaryCoupon.tsx from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { ExtensionPoint, Loading } from 'vtex.render-runtime'
import { OrderCoupon } from 'vtex.order-coupon'

import { useSummary } from './SummaryContext'

function SummaryCoupon() {
  const { coupon, insertCoupon, loading } = useSummary()

  if (loading) {
    return <Loading />
  }

  return (
    <OrderCoupon.OrderCouponProvider>
      <ExtensionPoint id="coupon" coupon={coupon} insertCoupon={insertCoupon} />
    </OrderCoupon.OrderCouponProvider>
  )
}

export default SummaryCoupon

```


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

[User] Show me the implementation of checkout-summary/react/SummaryInstallments.tsx from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { defineMessages, FormattedNumber } from 'react-intl'
import { InstallmentOption } from 'vtex.checkout-graphql'
import { useCssHandles } from 'vtex.css-handles'
import { FormattedCurrency } from 'vtex.format-currency'
import { IOMessageWithMarkers } from 'vtex.native-types'
import { Loading } from 'vtex.render-runtime'

import { useSummary } from './SummaryContext'

const CSS_HANDLES = [
  'installments',
  'installmentsNumber',
  'installmentValue',
  'installmentsTotalValue',
  'interestRate',
  'paymentSystemName',
] as const

interface SummaryInstallmentsProps {
  message: string
  markers: string[]
}

function SummaryInstallments(props: SummaryInstallmentsProps) {
  const { loading, paymentData } = useSummary()
  const { message, markers } = props
  const handles = useCssHandles(CSS_HANDLES)

  const { installmentOptions, paymentSystems } = paymentData

  if (loading) {
    return <Loading />
  }

  if (!installmentOptions) {
    return null
  }

  let maxInstallments: InstallmentOption | undefined

  installmentOptions.forEach((installmentOption) => {
    const currentValueIsEmpty =
      !maxInstallments || Object.keys(maxInstallments).length === 0

    if (
      currentValueIsEmpty ||
      installmentOption.installments.length >
        (maxInstallments?.installments.length ?? 0)
    ) {
      maxInstallments = installmentOption
    }
  })

  const maxInstallment: any =
    maxInstallments?.installments[maxInstallments?.installments.length - 1]

  const paymentSystemName = paymentSystems.filter(
    (paymentSystem) => paymentSystem.id === maxInstallments?.paymentSystem
  )

  const { count, value, total, interestRate, hasInterestRate } = maxInstallment

  return (
    <span className={handles.installments}>
      <IOMessageWithMarkers
        message={message}
        markers={markers}
        handleBase="installments"
        values={{
          installmentsNumber: (
            <span
              key="installmentsNumber"
              className={handles.installmentsNumber}
            >
              {count && <FormattedNumber value={count} />}
            </span>
          ),
          installmentValue: (
            <span key="installmentValue" className={handles.installmentValue}>
              {value && <FormattedCurrency value={value / 100} />}
            </span>
          ),
          installmentsTotalValue: (
            <span
              key="installmentsTotalValue"
              className={handles.installmentsTotalValue}
            >
              {total && <FormattedCurrency value={total / 100} />}
            </span>
          ),
          interestRate: (
            <span key="interestRate" className={handles.interestRate}>
              {interestRate && (
                <FormattedNumber value={interestRate} style="percent" />
              )}
            </span>
          ),
          paymentSystemName: (
            <span key="paymentSystemName" className={handles.paymentSystemName}>
              {paymentSystemName[0]?.name}
            </span>
          ),
          hasInterest: hasInterestRate,
        }}
      />
    </span>
  )
}

const messages = defineMessages({
  title: {
    id: 'admin/editor.checkout-summary.installments.title',
  },
  description: {
    id: 'admin/editor.checkout-summary.installments.description',
  },
  default: {
    id: 'store/checkout-summary.installments.default',
  },
})

SummaryInstallments.schema = {
  title: messages.title.id,
}

export default SummaryInstallments

```


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

[User] Show me the implementation of checkout-summary/react/SummarySmall.test.tsx from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

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

import SummarySmall from './SummarySmall'

const totalizers = [
  {
    id: 'Items',
    name: 'Total dos Itens',
    value: 32999,
  },
]

test('should render shipping disclaimer if shipping totalizer is not shown', () => {
  const { queryByText } = render(
    <SummarySmall total={32999} totalizers={totalizers} />
  )

  const disclaimer = queryByText('Shipping and taxes calculated in the Cart.')

  expect(disclaimer).toBeInTheDocument()
})

test('should not render shipping disclaimer if shipping totalizer is shown', () => {
  const { queryByText } = render(
    <SummarySmall
      total={32999}
      totalizers={totalizers}
      totalizersToShow={['Shipping']}
    />
  )

  const disclaimer = queryByText('Shipping and taxes calculated at the Cart.')

  expect(disclaimer).not.toBeInTheDocument()
})

```


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

[User] Show me the implementation of checkout-summary/react/Summary.tsx from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { PropsWithChildren } from 'react'
import { defineMessages, FormattedMessage } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'
import { ExtensionPoint } from 'vtex.render-runtime'
import { PaymentData } from 'vtex.checkout-graphql'

import { Totalizer } from './modules/types'
import SummaryContextProvider from './SummaryContext'

const messages = defineMessages({
  label: {
    id: 'admin/editor.checkout-summary.label',
  },
  title: {
    id: 'store/checkout-summary.Summary',
  },
})

const CSS_HANDLES = ['summaryTitle', 'summaryContent'] as const

interface InsertCouponResult {
  success: boolean
  errorKey: string
}

interface SiteEditorSummaryProps {
  title: string
}

export interface SummaryProps {
  coupon?: string
  insertCoupon?: (coupon: string) => Promise<InsertCouponResult>
  loading?: boolean
  totalizers: Totalizer[]
  paymentData: PaymentData
  total: number
  originalTotal?: number
}

type Props = PropsWithChildren<SummaryProps & SiteEditorSummaryProps>

function Summary({
  children,
  loading,
  totalizers,
  total,
  originalTotal = 0,
  coupon,
  insertCoupon,
  title,
  paymentData,
}: Props) {
  const handles = useCssHandles(CSS_HANDLES)

  return (
    <SummaryContextProvider
      coupon={coupon}
      insertCoupon={insertCoupon}
      loading={loading}
      totalizers={totalizers}
      total={total}
      originalTotal={originalTotal}
      paymentData={paymentData}
    >
      {/* Removing the div below may break the layout. See PR #25 */}
      <div>
        <h5
          className={`${handles.summaryTitle} t-heading-5 mt0 mb5 flex justify-between items-center`}
        >
          <FormattedMessage id={title} />
          <ExtensionPoint id="drawer" />
        </h5>
        <div className={`${handles.summaryContent} c-on-base`}>{children}</div>
      </div>
    </SummaryContextProvider>
  )
}

Summary.schema = {
  title: messages.label.id,
}

export default Summary

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "definitions": {
    "Summary": {
      "properties": {
        "title": {
          "$ref": "app:vtex.native-types#/definitions/text",
          "default": "store/checkout-summary.Summary"
        }
      }
    },
    "SummaryInstallments": {
      "type": "object",
      "properties": {
        "message": {
          "title": "admin/editor.checkout-summary.installments.title",
          "description": "admin/editor.checkout-summary.installments.description",
          "$ref": "app:vtex.native-types#/definitions/text",
          "default": "store/checkout-summary.installments.default"
        }
      }
    }
  }
}

```


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

[User] Show me the implementation of checkout-summary/store/blocks.json from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "checkout-summary": {
    "children": ["flex-layout.row#summary-coupon", "summary-totalizers"]
  },

  "flex-layout.row#summary-coupon": {
    "children": ["summary-coupon"],
    "props": {
      "marginBottom": 6
    }
  },

  "summary-coupon": {
    "blocks": ["coupon"]
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "checkout-summary": {
    "component": "Summary",
    "allowed": [
      "drawer"
    ],
    "composition": "children",
    "content": {
      "$ref": "#/definitions/Summary"
    }
  },
  "checkout-summary.compact": {
    "component": "SummarySmall",
    "allowed": [
      "summary-totalizers"
    ],
    "composition": "children"
  },
  "summary-coupon": {
    "component": "SummaryCoupon",
    "allowed": [
      "coupon"
    ],
    "preview": {
      "type": "box",
      "height": 32,
      "width": 240,
      "options": {
        "padding": 0
      }
    }
  },
  "summary-totalizers": {
    "component": "SummaryTotalizers",
    "preview": {
      "type": "text",
      "height": 108,
      "fullWidth": true,
      "options": {
        "padding": 0,
        "fontSize": 24,
        "paragraph": false
      }
    }
  },
  "summary-installments": {
    "component": "SummaryInstallments",
    "content": {
      "$ref": "app:vtex.checkout-summary#/definitions/SummaryInstallments"
    }
  }
}
```


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

[User] Show me the implementation of checkout-summary/react/typings/css.d.ts from the checkout-summary 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 checkout-summary/react/typings/graphql.d.ts from the checkout-summary 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 checkout-summary/react/typings/vtex.styleguide.d.ts from the checkout-summary 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 checkout-summary/react/components/SummaryItem.tsx from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { defineMessages, FormattedMessage } from 'react-intl'
import { FormattedPrice } from 'vtex.formatted-price'
import { useCssHandles } from 'vtex.css-handles'

import { slugify } from '../modules/slugify'

defineMessages({
  Shipping: {
    id: 'store/checkout-summary.Shipping',
    defaultMessage: 'Delivery',
  },
  Items: {
    id: 'store/checkout-summary.Items',
    defaultMessage: 'Subtotal',
  },
  Total: {
    id: 'store/checkout-summary.Total',
    defaultMessage: 'Total',
  },
  Discounts: {
    id: 'store/checkout-summary.Discounts',
    defaultMessage: 'Discounts',
  },
  Tax: {
    id: 'store/checkout-summary.Tax',
    defaultMessage: 'Taxes',
  },
})

interface Props {
  label: string
  name?: string
  large: boolean
  value: number | null
  originalValue?: number
}

const CSS_HANDLES = [
  'summaryItemContainer',
  'summaryItemLabel',
  'summaryItemPrice',
  'summaryItemOriginalPrice',
] as const

function SummaryItem({ label, name, large, value, originalValue = 0 }: Props) {
  const handles = useCssHandles(CSS_HANDLES)
  const itemId = slugify(label)

  return (
    <div
      className={`flex w-100 c-on-base lh-copy items-center ${
        handles.summaryItemContainer
      } ${large ? 'f4 mt4 pb5' : 'mt3'}`}
    >
      <div
        id={itemId}
        className={`${handles.summaryItemLabel} flex-none fw6 fw5-l`}
      >
        {name ||
          (label && (
            <FormattedMessage id={`store/checkout-summary.${label}`} />
          ))}
      </div>
      {itemId === 'items' && value && originalValue > value && (
        <div
          id="original-items-price"
          className={`flex-auto tr c-danger strike ${
            handles.summaryItemOriginalPrice
          } ${large ? 'fw6 fw5-l' : ''}`}
        >
          <FormattedPrice value={originalValue / 100} />
        </div>
      )}
      <div
        id={`${itemId}-price`}
        className={`flex-auto tr ${handles.summaryItemPrice} ${
          large ? 'fw6 fw5-l' : ''
        }`}
      >
        <FormattedPrice value={value ? value / 100 : value} />
      </div>
    </div>
  )
}

export default SummaryItem

```


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

[User] Show me the implementation of checkout-summary/react/modules/types.ts from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface Totalizer {
  id: string
  value: number | null
  name: string
}

```


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

[User] Show me the implementation of checkout-summary/react/modules/slugify.ts from the checkout-summary VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const slugify = (text: string) => {
  return text.toLowerCase().replace(/\s+/g, '-')
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "admin-salesforce-settings.keywords": "settings, app, salesforce",
  "admin-salesforce-settings.label-group": "Salesforce Settings",
  "admin-salesforce-settings.title": "Salesforce Settings"
}

```


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

[User] Show me the implementation of salesforce-connector/admin/navigation.json from the salesforce-connector VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "section": "accountSettings",
  "titleId": "admin-salesforce-settings.label-group",
  "subSection": "Salesforce Settings",
  "searchKeyWordsHelpers": "admin-salesforce-settings.keywords",
  "subSectionItems": [
    {
      "labelId": "admin-salesforce-settings.label-group",
      "path": "/admin/salesforce-settings"
    }
  ]
}

```


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

[User] Show me the implementation of salesforce-connector/admin/routes.json from the salesforce-connector VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin.app.frontbasecomponent": {
    "path": "/admin/app/salesforce-settings",
    "component": "SalesforceSettings"
  }
}

```