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

[User] Show me the implementation of admin-messages/messages/th/vtex.store-components@3.x.json from the admin-messages VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.blockClass.description": "เพิ่มชื่อคลาสพิเศษเพื่อทำให้จัดรูปแบบงายมากขึ้น",
  "admin/editor.blockClass.title": "คลาสบล็อก CSS",
  "admin/editor.categoriesHighlighted.cardShape": "รูปร่างกล่อง",
  "admin/editor.categoriesHighlighted.cardShape.rectangular": "สี่เหลี่ยมผืนผ้า",
  "admin/editor.categoriesHighlighted.cardShape.squared": "สี่เหลี่ยม",
  "admin/editor.categoriesHighlighted.categoriesHighlighted": "หมวดหมู่ที่เน้น",
  "admin/editor.categoriesHighlighted.category": "หมวดหมู่",
  "admin/editor.categoriesHighlighted.description": "หมวดหมู่ของแผนกที่เน้น",
  "admin/editor.categoriesHighlighted.item.categoryImage": "รูปภาพของหมวดหมู่",
  "admin/editor.categoriesHighlighted.item.categoryName": "รูปภาพของหมวดหมู่",
  "admin/editor.categoriesHighlighted.quantityOfItems": "จำนวนสินค้า",
  "admin/editor.categoriesHighlighted.showCategoriesHighlighted": "แสดงหมวดหมู่ที่เน้น",
  "admin/editor.categoriesHighlighted.title": "หมวดหมู่ที่เน้น",
  "admin/editor.image.alt.title": "ข้อความแสดงแทน",
  "admin/editor.image.description": "แสดงรูปภาพใดก็ได้",
  "admin/editor.image.src.title": "รูปภาพ",
  "admin/editor.image.title": "รูปภาพ",
  "admin/editor.image.title.title": "ชื่อเรื่องของรูปภาพ",
  "admin/editor.image.title.description": "ชื่อเรื่องจะแสดงเมื่อนำเมาส์ไปชี้",
  "admin/editor.info-card.callAction.button": "ปุ่ม",
  "admin/editor.info-card.callAction.link": "ลิงก์",
  "admin/editor.info-card.callAction.none": "ไม่มี",
  "admin/editor.info-card.callToActionMode.description": "ควบคุมว่าจะให้การกระตุ้นให้ดำเนินการของคุณแสดงอย่างไร",
  "admin/editor.info-card.callToActionMode.title": "โหมดกระตุ้นให้ดำเนินการ",
  "admin/editor.info-card.callToActionText.description": "ข้อความจะแสดงภายในคอมโพเนนต์การกระตุ้นให้ดำเนินการ",
  "admin/editor.info-card.callToActionText.title": "ข้อความกระตุ้นให้ดำเนินการ",
  "admin/editor.info-card.callToActionUrl.description": "URL จะเปลี่ยนเส้นทางเมื่อมีการคลิกปุ่มกระตุ้นให้ดำเนินการ",
  "admin/editor.info-card.callToActionUrl.title": "URL การกระตุ้นให้ดำเนินการ",
  "admin/editor.info-card.description": "คอมโพเนนต์ที่มีรูปภาพและข้อความที่คุณสามารถเลือกได้ว่าจะให้แสดงผลรูปภาพและข้อความอย่างไร",
  "admin/editor.info-card.headline.description": "ข้อความจะแสดงเป็นหัวเรื่องภายในคอมโพเนนต์",
  "admin/editor.info-card.headline.title": "หัวเรื่อง",
  "admin/editor.info-card.imageActionUrl.description": "ผ่าน URL เพื่อทำให้รูปภาพเป็นลิงก์เพื่อเปลี่ยนเส้นทางผู้ใช้",
  "admin/editor.info-card.imageActionUrl.title": "Image Action URL",
  "admin/editor.info-card.imageUrl.description": "รูปภาพจะถูกใช้บนเดสก์ท็อป",
  "admin/editor.info-card.imageUrl.title": "รูปภาพ",
  "admin/editor.info-card.isFullModeStyle.description": "หากเป็น Trie จะใช้รูปภาพที่จัดเตรียมไว้เป็นรูปภาพพื้นหลังและจะแสดงข้อความเหนือรูปภาพ",
  "admin/editor.info-card.isFullModeStyle.title": "รูปภาพเป็นพื้นหลัง",
  "admin/editor.info-card.mobileImageUrl.description": "รูปภาพจะถูกใช้บนมือถือ",
  "admin/editor.info-card.mobileImageUrl.title": "รูปภาพสำหรับมือถือ",
  "admin/editor.info-card.subhead.description": "ข้อความจะแสดงใต้หัวเรื่องภายในคอมโพเนนต์",
  "admin/editor.info-card.subhead.title": "หัวเรื่องย่อย",
  "admin/editor.info-card.textAlignment.center": "ตรงกลาง",
  "admin/editor.info-card.textAlignment.description": "ควบคุมการวางตำแหน่งข้อความภายในคอมโพเนนต์",
  "admin/editor.info-card.textAlignment.left": "ซ้าย",
  "admin/editor.info-card.textAlignment.right": "ขวา",
  "admin/editor.info-card.textAlignment.title": "การวางตำแหน่งข้อความ",
  "admin/editor.info-card.textPosition.center": "ตรงกลาง",
  "admin/editor.info-card.textPosition.description": "เลือกว่าจะแสดงข้อความของคอมโพเนนต์ในตำแหน่งใด ซ้าย ตรงกลาง หรือขวา",
  "admin/editor.info-card.textPosition.left": "ซ้าย",
  "admin/editor.info-card.textPosition.right": "ขวา",
  "admin/editor.info-card.textPosition.title": "ตำแหน่งข้อความ",
  "admin/editor.info-card.title": "InfoCard",
  "admin/editor.logo.description": "คอมโพเนนต์จะแสดงโลโก้ร้านค้าของคุณ",
  "admin/editor.logo.height.description": "ความสูงที่จะใช้สำหรับโลโก้",
  "admin/editor.logo.height.title": "ความสูง",
  "admin/editor.logo.href.description": "ลิงก์จะเปลี่ยนเส้นทางเมื่อคลิกที่โลโก้ ปล่อยว่างไว้เพื่อทำให้ไม่สามารถคลิกได้",
  "admin/editor.logo.href.title": "ลิงก์เพื่อเปลี่ยนเส้นทาง",
  "admin/editor.logo.mobileHeight.description": "ความสูงจะถูกใช้บนมือถือ หากมีค่าว่าง จะใช้ค่าความสูงที่จัดเตรียมไว้",
  "admin/editor.logo.mobileHeight.title": "ความสูงของมือถิอ",
  "admin/editor.logo.mobileWidth.description": "ความกว้างจะถูกใช้บนมือถือ หากมีค่าว่าง จะใช้ค่าความกว้างที่จัดเตรียมไว้",
  "admin/editor.logo.mobileWidth.title": "ความกว้างมือถือ",
  "admin/editor.logo.title": "โลโก้",
  "admin/editor.logo.title.description": "ข้อความแสดงแทนจะถูกจัดเตรียมไว้ให้สำหรับรูปภาพโลโก้",
  "admin/editor.logo.title.title": "ข้อความแสดงแทน",
  "admin/editor.logo.url.description": "รุปภาพที่จะใช้",
  "admin/editor.logo.url.title": "รูปภาพ",
  "admin/editor.logo.width.description": "ความกว้างที่จะใช้สำหรับโลโก้",
  "admin/editor.logo.width.title": "ความกว้าง",
  "admin/editor.newsletter.description": "จดหมายข่าวจาก",
  "admin/editor.newsletter.hideLabel": "ซ่อนป้ายข้อความ",
  "admin/editor.newsletter.label": "ป้ายข้อความของแบบฟอร์มที่คอมโพเนนต์ใช้",
  "admin/editor.newsletter.placeholder": "ข้อความตัวอย่างหรือคำอธิบายสำหรับการป้อนอีเมล",
  "admin/editor.newsletter.submit": "ป้ายข้อความของปุ่มส่ง",
  "admin/editor.newsletter.title": "จดหมายข่าว",
  "admin/editor.notification-bar.content.description": "ข้อความของแถบ",
  "admin/editor.notification-bar.content.title": "เนื้อหา",
  "admin/editor.notification-bar.description": "คอมโพเนนต์ที่แสดงข้อความใด ๆ ใน Bar Style",
  "admin/editor.notification-bar.title": "แถบแจ้งเตือน",
  "admin/editor.product-description.title": "คำอธิบายผลิตภัณฑ์",
  "admin/editor.product-description.title-prop.title": "ชื่อเรื่อง",
  "admin/editor.product-images.bgopacity.title": "ความทึบแสงของพื้นหลัง",
  "admin/editor.product-images.description": "คอมโพเนนต์รูปภาพผลิตภัณฑ์ทำให้คุณสามารถกำหนดรูปภาพผลิตภัณฑ์ได้เอง",
  "admin/editor.product-images.displayThumbnailsArrows.title": "แสดงลูกศรในภาพตัวอย่างขนาดเล็ก",
  "admin/editor.product-images.gallery": "ในแกลลอรี่",
  "admin/editor.product-images.horizontal": "แนวนอน",
  "admin/editor.product-images.in-page": "ในหน้า",
  "admin/editor.product-images.left": "ซ้าย",
  "admin/editor.product-images.no-zoom": "ไม่มีซูม",
  "admin/editor.product-images.position.description": "ใช้เฉพาะเมื่อมีการวางเป็นแนวตั้ง",
  "admin/editor.product-images.position.title": "ตำแหน่งภาพตัวอย่างขนาดเล็ก",
  "admin/editor.product-images.right": "ขวา",
  "admin/editor.product-images.thumbnailsOrientation.title": "การวางแนวภาพตัวอย่างขนาดเล็ก",
  "admin/editor.product-images.title": "รูปภาพผลิตภัณฑ์",
  "admin/editor.product-images.vertical": "แนวตั้ง",
  "admin/editor.product-images.zoomOptions.title": "ตัวเลือกซูม",
  "admin/editor.product-images.zoomType.title": "ประเภทซูม",
  "admin/editor.product-specifications.hidden-specifications.description": "ชื่อประเภทข้อกำหนดคุณลักษณะที่คุณต้องการซ่อน",
  "admin/editor.product-specifications.hidden-specifications.title": "ซ่อนข้อกำหนดคุณลักษณะแล้ว",
  "admin/editor.product-specifications.items.title": "ข้อกำหนดคุณลักษณะ",
  "admin/editor.product-specifications.title": "ข้อกำหนดคุณลักษณะผลิตถัณฑ์",
  "admin/editor.product-specifications.visible-specifications.description": "ชื่อประเภทข้อกำหนดคุณลักษณะที่คุณต้องการให้ปรากฏ ให้เพียงหนึ่งข้อกำหนดคุณลักษณะที่ซ่อนอยู่หรือเห็นได้เท่านั้น",
  "admin/editor.product-specifications.visible-specifications.title": "ข้อกำหนดคุณลักษณะที่มองเห็นได้",
  "admin/editor.productName.description": "คอมโพเนนต์ของชื่อผลิตภัณฑ์",
  "admin/editor.productName.showBrandName.title": "แสดงชื่อแบรนด์",
  "admin/editor.productName.showProductReference.title": "แสดงข้อมูลอ้างอิงผลิตภัณฑ์",
  "admin/editor.productName.showSku.title": "แสดง SKU",
  "admin/editor.productName.title": "ชื่อผลิตภัณฑ์",
  "admin/editor.productPrice.description": "คอมโพเนนต์ของราคาสินค้า",
  "admin/editor.productPrice.labelListPrice": "ป้ายข้อความของราคาตามบัญชีราคา",
  "admin/editor.productPrice.labelSellingPrice": "ป้ายข้อความของราคาขาย",
  "admin/editor.productPrice.showInstallments": "แสดงการผ่อนชำระของผลิตภัณฑ์",
  "admin/editor.productPrice.showLabels": "แสดงป้ายข้อความราคาของผลิตภัณฑ์",
  "admin/editor.productPrice.showListPrice": "แสดงราคาตามบัญขีราคาของผลิตภัณฑ์",
  "admin/editor.productPrice.showListPriceRange": "แสดงช่วงราคาตามบัญขีราคาของผลิตภัณฑ์",
  "admin/editor.productPrice.showSavings": "แสดงราความแตกต่างระหว่างราคาตามบัญชีราคาและราคาขายของผลิตภัณฑ์",
  "admin/editor.productPrice.showSellingPriceRange": "แสดงช่วงราคาขายของผลิตภัณฑ์",
  "admin/editor.productPrice.title": "ราคาผลิตภัณฑ์",
  "admin/editor.search-bar.placeholder.title": "ข้อความตัวอย่างหรือคำอธิบาย",
  "admin/editor.search-bar.title": "แถบค้นหา",
  "admin/editor.share.description": "รายการปุ่มแชร์",
  "admin/editor.share.social.title": "เครือข่ายทางสังคม",
  "admin/editor.share.title": "แชร์",
  "admin/editor.skuSelector.description": "คอมโพเนนต์ที่แสดงรุ่นต่าง ๆ ของสินค้า ที่กำหนดไว้เพื่อให้ผู้ใช้เลือก",
  "admin/editor.skuSelector.seeMoreLabel.description": "ป้ายข้อความของปุ่มดูเพิ่มเติม สตริงต้องมี {quantity} ข้อความตัวอย่างหรือคำอธิบายเพื่อแสดงสินค้าพร้อมจำหน่ายที่เหลืออยู่อย่างเหมาะสม ตัวอย่าง: \"ดู {quantity} เพิ่มเติม\"",
  "admin/editor.skuSelector.seeMoreLabel.title": "ดูป้ายข้อความเพิ่มเติม",
  "admin/editor.skuSelector.title": "ตัวเลือก SKU"
}
```


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

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

[Assistant]
Here's the implementation:

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


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

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

[Assistant]
Here's the implementation:

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

```


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

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

[Assistant]
Here's the implementation:

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


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

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

[Assistant]
Here's the implementation:

```markdown
# VTEX React App Template

Our guide repository to structure for react apps, that should be used as a template.

We use `yarn` as our default package manager, before coding make sure to run yarn on: `root` and `react` folders.

## Some features:

### Tests

For testing we use `@vtex/test-tools`, our own testing framework based on `react-testing-library`, the tests should be located on the `react/__tests__` folder. For references, visit our [repository](https://github.com/vtex/test-tools).

### Hooks

Husky hooks tha runs on every `pre-commit` and `pre-push`.

### Intl Equalizer

Tool for equalizing the messages located on the `messages` folder/builder. It's configured to use the **en.json** as the default file for comparison. For references, visit our [repository](https://github.com/vtex/intl-equalizer).

### Lint + Formatting

TS lint configured with Prettier and .Config.

### Available Scripts

```json
{
  "lint": "cd ./react && yarn lint",
  "test": "cd ./react && yarn test",
  "lint:locales": "intl-equalizer",
  "locales:fix": "intl-equalizer --fix",
  "verify": "yarn lint && yarn lint:locales && yarn test"
}
```

### Ci

#### Install:

```yml
install:
  commands:
    - echo Installing Packages...
    - cd react
    - npm install
    - echo Packages installed!
```

#### Pre-build:

```yml
pre_build:
  commands:
    - echo Running tests...
    - npm run verify
    - echo Lint and tests finished!
```

```


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

[User] Show me the implementation of hermes/graphql/schema.graphql from the hermes VTEX app.

[Assistant]
Here's the implementation:

```graphql
# some fun types here

type StatusContent {
  status: StatusDescriptionInfo
}

type StatusDescriptionInfo {
  indicator: String
  description: String
}

type Query {
  getGitHubStatus: StatusContent @cacheControl(scope: PRIVATE, maxAge: SHORT)
}

# type Mutation {
#   # You should always return the whole object in a mutation, not only a boolean. This will help in browser caching
# }

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "ramda": "^0.26.1"
  },
  "devDependencies": {
    "@types/bluebird": "^3.5.25",
    "@types/node": "^10.12.17",
    "@types/ramda": "types/npm-ramda#dist",
    "@vtex/api": "^3.8.1",
    "prettier": "^1.16.4",
    "tslint": "^5.12.0",
    "tslint-config-vtex": "^2.1.0",
    "typescript": "3.5.2"
  },
  "scripts": {
    "lint": "tsc --noEmit && tslint -c tslint.json './**/*.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 hermes/node/index.ts from the hermes VTEX app.

[Assistant]
Here's the implementation:

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

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

const MEDIUM_TIMEOUT_MS = 30 * 1000

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

// Export a service that defines resolvers and clients' options
export default new Service<Clients>({
  clients: {
    implementation: Clients,
    options: {
      default: {
        retries: 5,
        timeout: MEDIUM_TIMEOUT_MS,
      },
    },
  },
  graphql: {
    resolvers: {
      // Mutation: {},
      Query: {
        getGitHubStatus,
      },
    },
  },
})

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "app": {
    "component": "*",
    "render": "client"
  },
  "app.hermes": {
    "component": "index",
    "render": "client"
  }
}

```


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

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

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable no-console */
import React from 'react'
import { PageBlock, Alert } from 'vtex.styleguide'

import Logo from './components/Logo'
import Speedometer from './components/Speedometer'

export default class App extends React.Component {
  public state: {
    wifiStatus: boolean
    slackStatus: boolean
  }
  public constructor(props: any) {
    super(props)
    this.state = {
      wifiStatus: true,
      slackStatus: true,
    }
  }

  public async componentDidMount() {
    window.addEventListener('online', () => this.setState({ wifiStatus: true }))
    window.addEventListener('offline', () =>
      this.setState({ wifiStatus: false })
    )
  }

  public componentWillUnmount() {
    window.removeEventListener('online', () => {})
    window.removeEventListener('offline', () => {})
  }

  public render() {
    const { wifiStatus } = this.state
    return (
      <div
        className="flex justify-center pb7 bg-muted-5 min-vh-100"
        style={{ backgroundColor: '#333' }}>
        <div className="w-100 ph10 pv5">
          <div className="flex flex-row items-center">
            <Logo />
            <h2 className="ml3 c-muted-5">H E R M E S</h2>
          </div>
          <PageBlock variation="aside">
            <div>
              <Alert type={wifiStatus ? 'success' : 'error'}>{`wifi is ${
                wifiStatus ? 'online' : 'offline'
              }`}</Alert>
            </div>
            <Speedometer />
          </PageBlock>
        </div>
      </div>
    )
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "lint": "tsc --noEmit && eslint --quiet --fix --ext ts,tsx .",
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "apollo-client": "^2.6.3",
    "react": "^16.8.6",
    "react-apollo": "^2.5.8",
    "react-d3-speedometer": "^0.7.0",
    "react-dom": "^16.8.6",
    "react-intl": "^2.9.0"
  },
  "devDependencies": {
    "@types/graphql": "^14.2.2",
    "@types/react": "^16.8.22",
    "@types/react-intl": "^2.3.18",
    "@vtex/test-tools": "^0.3.2",
    "eslint": "5.x",
    "eslint-config-vtex-react": "^5.0.1",
    "prettier": "^1.18.2",
    "prop-types": "^15.7.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 hermes/node/clients/index.ts from the hermes VTEX app.

[Assistant]
Here's the implementation:

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

import GitHubStatusClient from './status'

export class Clients extends IOClients {
  get status() {
    return this.getOrSet('status', GitHubStatusClient)
  }
}

```


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

[User] Show me the implementation of hermes/node/resolvers/status.ts from the hermes VTEX app.

[Assistant]
Here's the implementation:

```typescript
async function getGitHubStatus(_: string, __: any, ctx: Context) {
  const deliveryApps = await ctx.clients.status.getStatus()
  return deliveryApps
}

export default getGitHubStatus

```


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

[User] Show me the implementation of hermes/node/clients/status/index.ts from the hermes VTEX app.

[Assistant]
Here's the implementation:

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

export default class GitHubStatusClient extends ExternalClient {
  public constructor(context: IOContext, options?: InstanceOptions) {
    super('https://kctbh9vrtdwd.statuspage.io', context, {
      ...options,
      retries: 3,
      timeout: 25000,
    })
  }

  public getStatus = () => {
    return this.http.get<string>('api/v2/status.json')
  }
}

```


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

[User] Show me the implementation of hermes/node/clients/github/index.ts from the hermes VTEX app.

[Assistant]
Here's the implementation:

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

export default class GitHubStatusClient extends ExternalClient {
  public constructor(context: IOContext, options?: InstanceOptions) {
    super('https://kctbh9vrtdwd.statuspage.io', context, {
      ...options,
      retries: 3,
      timeout: 25000,
    })
  }

  public getStatus = () => {
    return this.http.get<string>('api/v2/status.json')
  }
}

```


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

[User] Show me the implementation of hermes/react/components/Speedometer.tsx from the hermes VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable no-console */
import React from 'react'
import ReactSpeedometer from 'react-d3-speedometer'
import { Tag } from 'vtex.styleguide'

import Logo from './components/Logo'

export default class App extends React.Component {
  public state: {
    wifiSpeed: number
  }
  public constructor(props: any) {
    super(props)
    this.state = {
      wifiSpeed: 420,
    }
  }

  public async componentDidMount() {
    const getRandomInt = (min: number, max: number) => {
      min = Math.ceil(min)
      max = Math.floor(max)
      return Math.floor(Math.random() * (max - min)) + min
    }
    const loop: any = () =>
      setTimeout(() => {
        const { wifiSpeed } = this.state
        this.setState({
          wifiSpeed:
            wifiSpeed > 440
              ? wifiSpeed - getRandomInt(5, 10)
              : wifiSpeed < 400
              ? wifiSpeed + getRandomInt(5, 10)
              : wifiSpeed - getRandomInt(5, 10),
        })
        loop()
      }, getRandomInt(420, 840))

    loop()
  }

  public render() {
    const { wifiSpeed } = this.state
    return (
        <div className="flex flex-column">
            <div className="center" style={{ width: 300, height: 170 }}>
            <ReactSpeedometer
                maxValue={500}
                value={wifiSpeed}
                needleColor="black"
                startColor="red"
                segments={10}
                endColor="green"
            />
            </div>
            <span className="mt4 tc">
            WiFi Speed
            <span className="ml4">
                <Tag
                type={wifiSpeed > 400 ? 'success' : 'warning'}
                variation="low">
                {`ping ${Math.floor(wifiSpeed / 10)}`}
                </Tag>
            </span>
            </span>
        </div>
    )
  }
}

```


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

[User] Show me the implementation of hermes/react/components/Logo.tsx from the hermes VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

interface Props {
  color?: string
  height?: string
  width?: string
}

const Logo: React.FC<Props> = ({
  color = "#fff",
  height = '32pt',
  width = '32pt',
}) => {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" height={height} viewBox="0 -88 512.00006 512" width={width}>
      <path fill={color} d="m88.660156 120.785156c1.753906 1.257813 3.777344 1.863282 5.78125 1.863282 3.089844 0 6.136719-1.4375 8.074219-4.136719l.164063-.226563c3.1875-4.460937 2.152343-10.664062-2.308594-13.851562-4.464844-3.1875-10.664063-2.152344-13.851563 2.308594l-.132812.183593c-3.199219 4.453125-2.179688 10.660157 2.273437 13.859375zm0 0"/>
      <path fill={color} d="m511.34375 8.578125c-.5625-4.097656-3.609375-7.417969-7.644531-8.332031-4.035157-.914063-8.214844.773437-10.484375 4.230468-25.773438 39.203126-88.96875 32.328126-114.945313 27.554688-3.617187-.667969-7.304687-1.601562-11.210937-2.59375-14.09375-3.574219-30.0625-7.628906-46.3125.980469-3.683594 1.949219-9.066406 5.714843-12.773438 12.210937-22.242187-9.09375-45.792968-13.707031-70.171875-13.707031-46.296875 0-90.660156 17.125-124.917969 48.214844-4.058593 3.6875-4.363281 9.964843-.675781 14.027343 1.957031 2.160157 4.648438 3.253907 7.351563 3.253907 2.378906 0 4.769531-.847657 6.671875-2.574219 30.59375-27.769531 70.21875-43.0625 111.570312-43.0625 23.042969 0 45.25 4.613281 66.113281 13.691406.480469 7.09375 2.648438 15.558594 7.398438 25.667969 3.890625 8.277344 2.964844 17.089844-2.753906 26.191406-9.980469 15.882813-32.308594 28.347657-44.757813 28.46875-7.53125 0-14.613281 2.933594-19.9375 8.257813-5.324219 5.324218-8.257812 12.40625-8.257812 19.933594 0 16.105468 15.980469 28.875 42.746093 34.15625 13.757813 2.714843 38.238282 4.257812 52.328126-4.078126 5.207031 4.46875 12.277343 8.953126 20.0625 8.949219 2.261718 0 4.585937-.378906 6.941406-1.246093 8.535156-3.144532 14.464844-11.847657 17.617187-25.867188.390625-1.730469.710938-3.433594.980469-5.054688 8.722656 1.5625 16.507812 1.371094 23.304688-.554687 2.265624 9.804687 3.652343 19.816406 4.109374 29.933594-54.179687 13.84375-109.949218 20.859375-165.894531 20.859375-55.945312 0-111.714843-7.015625-165.898437-20.859375 1-22.519531 6.453125-44.167969 16.242187-64.460938 2.382813-4.9375.3125-10.875-4.625-13.253906-4.9375-2.386719-10.875-.3125-13.257812 4.625-11.59375 24.023437-17.742188 49.738281-18.328125 76.492187l-48.972656 48.238282c-2.207032 2.175781-3.273438 5.257812-2.8789068 8.332031.3906248 3.074219 2.1953128 5.789063 4.8828128 7.339844 70.691406 40.816406 151.207031 62.386719 232.835937 62.386719 81.632813 0 162.144531-21.570313 232.835938-62.386719 2.6875-1.550781 4.492187-4.265625 4.886719-7.339844.394531-3.074219-.675782-6.15625-2.882813-8.332031l-48.96875-48.230469c-.339844-15.179687-2.507813-30.179687-6.46875-44.730469 4.921875-5.933594 7.394531-12.789062 8.632813-18.257812 12.902343-.9375 22.265624-5.546875 27.890624-13.757813 6.375-9.296875 5.902344-20.503906 4.21875-28.644531 25.210938-8.53125 42.375-26.941406 49.9375-53.765625 6.21875-22.066406 3.578126-42.066406 3.460938-42.90625zm-273.542969 308.496094c-73.78125 0-146.609375-18.410157-211.46875-53.347657l38.429688-37.855468c56.488281 14.636718 114.667969 22.078125 173.039062 22.078125 58.371094 0 116.550781-7.441407 173.039063-22.078125l38.433594 37.855468c-64.863282 34.9375-137.691407 53.347657-211.472657 53.347657zm205.769531-228.421875c-.175781.035156-.355468.078125-.535156.121094-11 2.578124-23.464844 3.164062-36.054687 1.699218-5.433594-.628906-10.378907 3.265625-11.011719 8.710938-.636719 5.449218 3.265625 10.378906 8.710938 11.011718 11.566406 1.347657 23.113281 1.207032 33.902343-.382812.839844 4.507812.957031 9.664062-1.234375 12.859375-3.570312 5.210937-13.890625 5.511719-19.722656 5.226563-2.746094-.128907-5.382812.863281-7.351562 2.75-1.96875 1.890624-3.078126 4.503906-3.058594 7.230468 0 .121094-.265625 12.226563-7.921875 17.84375-7.402344 5.441406-19.65625 3.148438-28.636719.269532-2.964844-.953126-6.203125-.449219-8.75 1.339843-2.546875 1.796875-4.105469 4.683594-4.207031 7.796875-.398438 12.003906-4.121094 23.789063-6.835938 25.003906-.035156-.015624-3.984375.046876-12.804687-9.675781-1.898438-2.09375-4.578125-3.257812-7.351563-3.257812-.570312 0-1.140625.050781-1.714843.148437-3.300782.578125-6.085938 2.785156-7.40625 5.859375-.730469.84375-5.398438 3.714844-17.207032 4.230469-10.492187.464844-22.507812-1.167969-32.144531-4.355469-11.585937-3.832031-16.773437-8.832031-16.773437-12.089843 0-2.226563.867187-4.316407 2.441406-5.890626 1.574218-1.574218 3.667968-2.441406 5.992187-2.441406 18.339844-.179687 47.421875-15.394531 61.476563-37.765625 9.410156-14.980469 10.765625-30.609375 3.910156-45.195312-7.820312-16.648438-7.566406-27.324219.757812-31.730469 9.484376-5.027344 19.984376-2.367188 32.136719.71875 4.046875 1.027344 8.234375 2.089844 12.503907 2.871094 25.007812 4.601562 80.246093 10.582031 116.511718-16.453125-2.902344 19.871093-13.402344 46.050781-47.621094 53.546875zm0 0"/>
      <path fill={color} d="m379.015625 83.34375-.519531-.230469c-5.007813-2.238281-10.878906.003907-13.117188 5.011719-2.238281 5.003906.007813 10.878906 5.011719 13.117188l.699219.308593c1.289062.5625 2.632812.828125 3.957031.828125 3.832031 0 7.480469-2.230468 9.109375-5.964844 2.191406-5.027343-.109375-10.878906-5.140625-13.070312zm0 0"/>
    </svg>
  )
}

export default Logo
```


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

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

[Assistant]
Here's the implementation:

```tsx
describe('Orders List Scenarios', () => {
  it('should work', () => {
    expect(1).toBe(1)
  })
})

```


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

[User] Show me the implementation of rewriter-pages-draft/docs/README.md from the rewriter-pages-draft VTEX app.

[Assistant]
Here's the implementation:

```markdown
## 🚨 Disclaimer - Template Application
>:warning: **This project is not maintained by VTEX, and this app is provided as a working example on how this feature can be implemented. Improvements and fixes will be on the implementation team side.**
>
>All template applications provided are developed by the VTEX community, you can use them freely.

# Rewriter Page Draft
This app blocks any request made to `/_draft/` folder from public access. The app is a template for building applications that block public access to specific routes, while mantaining all these routes accesible from myvtex.com domain.

# Usage
For testing it you can install the app via VTEX Toolbelt.

```bash
    vtex install vtex.rewriter-pages-draft@0.x
```

## How it works?
After installing the app, all request to URLs starting with `/_draft/` will return a 404 error if navigated from the public domain. These routes will still be available from the yvtex.com domain.

From a CMS perspective, this feature allows the user to create draft pages and work on them, while not making them public. Creating a page with a URL starting with `/_draft/` will make the trick. The page content will be available from the site editor in order to work on it, and a preview can be navigated using the myvtex domain.

Once the content is finished, the page can be **published** just removing the `/_draft/` segment from the page URL.

## Possible Uses
This app can be used for blocking any public access while mainting the autenticated access using myvtex.com domain. Also can be used to restric access based on other conditions. Basically, this app allows to rewrite the request internally based on specific conditions.

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

# Contributors ✨

Thanks goes to these wonderful people:

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

This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind 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 rewriter-pages-draft/node/service.json from the rewriter-pages-draft VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "memory": 256,
  "ttl": 10,
  "timeout": 2,
  "minReplicas": 2,
  "maxReplicas": 4,
  "workers": 1,
  "routes": {
    "routing": {
      "path": "/_draft/*path",
      "public": true,
      "smartcache": true,
      "rootOnly": true
    }
  }
}

```


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

[User] Show me the implementation of rewriter-pages-draft/node/package.json from the rewriter-pages-draft VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "co-body": "^6.0.0",
    "ramda": "^0.25.0"
  },
  "devDependencies": {
    "@types/co-body": "^0.0.3",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.0.0",
    "@types/ramda": "types/npm-ramda#dist",
    "@vtex/api": "6.45.12",
    "@vtex/test-tools": "^1.0.0",
    "@vtex/tsconfig": "^0.5.6",
    "typescript": "3.9.7"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty"
  },
  "version": "0.2.0"
}

```


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

[User] Show me the implementation of rewriter-pages-draft/node/index.ts from the rewriter-pages-draft VTEX app.

[Assistant]
Here's the implementation:

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

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

const TIMEOUT_MS = 800

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

//metrics.trackCache('status', 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 Proxy client.
    proxy: {
      memoryCache,
    },
  },
}

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

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

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

```


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

[User] Show me the implementation of rewriter-pages-draft/node/clients/proxy.ts from the rewriter-pages-draft VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable @typescript-eslint/no-explicit-any */
import { ExternalClient, InstanceOptions, IOContext } from '@vtex/api'
import { AxiosResponse } from 'axios'

const baseURL = ({ workspace, account }: IOContext) => {
  return `http://${workspace}--${account}.myvtex.com`
}

export class IOInternalProxy extends ExternalClient {
  constructor(ctx: IOContext, opts?: InstanceOptions) {
    super(baseURL(ctx), ctx, opts)
  }

  // TODO: Add Inflight to this call
  public getStream = (path: string, headers: Record<string, string>) =>
    (this.http as any).request({
      headers,
      responseType: 'stream',
      transformResponse: (x: any) => x,
      url: path,
      validateStatus: (_: any) => true,
    }) as Promise<AxiosResponse>

  public evaluate = (path: string) => {
    //console.log("storeUserAuthToken",this.context.storeUserAuthToken)
    //console.log("adminUserAuthToken",this.context.adminUserAuthToken)
    //console.log("authToken",this.context.authToken)

    return this.http.get(
      `http://app.io.vtex.com/vtex.rewriter/v1/${this.context.account}/${this.context.workspace}/evaluate${path}`,
      {
        headers: {VtexIdclientAutCookie: this.context.authToken}
      }
    )
  }

}
```


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

[User] Show me the implementation of rewriter-pages-draft/node/clients/index.ts from the rewriter-pages-draft VTEX app.

[Assistant]
Here's the implementation:

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

import {IOInternalProxy} from './proxy'

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

```


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

[User] Show me the implementation of rewriter-pages-draft/node/middlewares/proxy.ts from the rewriter-pages-draft VTEX app.

[Assistant]
Here's the implementation:

```typescript

import { forEachObjIndexed, pick, endsWith } from 'ramda'

const HEADERS_TO_SEND = [
  'accept',
  'accept-language',
  'content-length',
  'content-type',
  'rest-range',
  'x-forwarded-host',
  'x-forwarded-path',
  'x-vtex-root-path',
  'cloudfront-is-mobile-viewer',
  'cloudfront-is-tablet-viewer',
  'cloudfront-viewer-country',
  'vtex-io-device-type',
  'vtex-io-viewer-country',
]

const HEADERS_TO_RESPOND = [
  'content-type',
  'cache-control',
  'access-control-allow-origin',
  'access-control-allow-credentials',
  'access-control-allow-headers',
  'x-frame-options',
  'x-vtex-etag-control',
]

const ORIGINAL_PATH_HEADER = 'x-vtex-original-path'
const FORWARDED_PATH_HEADER = 'x-forwarded-path'

const isReestrictedHost = (host: string) => endsWith('myvtex.com', host)

const proxyCall = async function(ctx: Context, evaluate: boolean) {
  const {
    clients: { proxy }
  } = ctx

  let href: string

  if (evaluate) {
    const reponse_eval = await proxy.evaluate(ctx.url)
    href = reponse_eval.href
  }
  else {
    href = ctx.url
  }
  const segmentToken = ctx.cookies.get('vtex_segment')
  const sessionToken = ctx.cookies.get('vtex_session')
  const bindingAddress = ctx.cookies.get('vtex_binding_address')
  const segmentCookie = segmentToken ? `vtex_segment=${segmentToken};` : ''
  const sessionCookie = sessionToken ? `vtex_session=${sessionToken};` : ''
  const bindingAddressCookie = bindingAddress
    ? `vtex_binding_address=${bindingAddress}`
    : ''
  const cookie = `VtexIdclientAutCookie=${ctx.vtex.authToken};${segmentCookie};${sessionCookie};${bindingAddressCookie}`

  const forwardedPath = ctx.get(FORWARDED_PATH_HEADER)

  const originalPathHeader = forwardedPath
    ? { [ORIGINAL_PATH_HEADER]: encodeURI(forwardedPath) }
    : null

  const canonicalPathHeader = forwardedPath
    ? { [ORIGINAL_PATH_HEADER]: encodeURI(forwardedPath) }
    : null

  const response = await proxy.getStream(href, {
    ...pick(HEADERS_TO_SEND, ctx.request.headers),
    cookie,
    ...originalPathHeader,
    ...canonicalPathHeader,
  })

  ctx.status = response.status || 500

  ctx.body = response.data

  // Set response headers based on service's response headers
  if (response.headers.vary) {
    ctx.vary(response.headers.vary)
  }

  const headersToRespond = pick(HEADERS_TO_RESPOND, response.headers)
  forEachObjIndexed(
    (value:string, header) => value && ctx.set(header, value),
    headersToRespond
  )

  if (response.headers['content-encoding']) {
    ctx.set(
      'Content-Encoding', response.headers['content-encoding']
    )
  }
}

export async function proxy(ctx: Context, next: () => Promise<any>) {
  if (isReestrictedHost(ctx.host)) {
    await proxyCall(ctx, true)
  }
  else {
    ctx.path = '/_v/segment/routing/vtex.store@2.x/notFoundSearch/search' + ctx.path
    await proxyCall(ctx, false)
  }
  await next()
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.productKitList.title": "Kit de Produtos",
  "admin/editor.productKitList.description": "O componente de kit de produtos exibe uma lista horizontal de produtos que pertencem ao kit",
  "admin/editor.productKitList.allowSwap": "Permitir Troca",
  "admin/editor.productKitList.allowRemoval": "Permitir Remoção",
  "admin/editor.productKitList.showArrows": "Mostrar Setas",
  "admin/editor.productKitList.nextArrow": "Seta Direita",
  "admin/editor.productKitList.prevArrow": "Seta Esquerda",
  "admin/editor.productKitList.showDots": "Mostrar Pontos",
  "admin/editor.productKitList.dot": "Ponto",
  "admin/editor.productKitList.showListPrice": "Mostrar lista de preços",
  "admin/editor.productKitList.showLabels": "Mostrar rótulos",
  "admin/editor.productKitList.showInstallments": "Mostrar parcelamentos",
  "admin/editor.productKitList.showBadge": "Mostrar badge",
  "admin/editor.productKitList.badgeText": "Texto da badge",
  "store/productKitList.takeAll": "Leve os {numberOfItems} produtos",
  "store/productKitList.buildYourBundle": "Monte seu Kit",
  "store/productKitList.swapItem": "Trocar",
  "store/productKitList.buyKit": "Comprar Kit"
}

```


[System] You are an expert VTEX IO developer. You specialize 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-kit/messages/en.json from the product-kit VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.productKitList.title": "Product Kit",
  "admin/editor.productKitList.description": "The Product Kit component display a horizontal list of products to buy together",
  "admin/editor.productKitList.allowSwap": "Allow Swap",
  "admin/editor.productKitList.allowRemoval": "Allow Removal",
  "admin/editor.productKitList.showArrows": "Show Arrows",
  "admin/editor.productKitList.nextArrow": "Next Arrow",
  "admin/editor.productKitList.prevArrow": "Prev Arrow",
  "admin/editor.productKitList.showDots": "Show Dots",
  "admin/editor.productKitList.dot": "Dot",
  "admin/editor.productKitList.showListPrice": "Show list price",
  "admin/editor.productKitList.showLabels": "Show labels",
  "admin/editor.productKitList.showInstallments": "Show installments",
  "admin/editor.productKitList.showBadge": "Show badge",
  "admin/editor.productKitList.badgeText": "Badge Text",
  "store/productKitList.takeAll": "Take all {numberOfItems} products",
  "store/productKitList.buildYourBundle": "Build your bundle",
  "store/productKitList.swapItem": "Swap",
  "store/productKitList.buyKit": "Buy Kit"
}

```


[System] You are an expert VTEX IO developer. You specialize 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-kit/messages/context.json from the product-kit VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.productKitList.title": "admin/editor.productKitList.title",
  "admin/editor.productKitList.allowSwap": "admin/editor.productKitList.allowSwap",
  "admin/editor.productKitList.allowRemoval": "admin/editor.productKitList.allowRemoval",
  "admin/editor.productKitList.showArrows": "admin/editor.productKitList.showArrows",
  "admin/editor.productKitList.nextArrow": "admin/editor.productKitList.nextArrow",
  "admin/editor.productKitList.prevArrow": "admin/editor.productKitList.prevArrow",
  "admin/editor.productKitList.showDots": "admin/editor.productKitList.showDots",
  "admin/editor.productKitList.dot": "admin/editor.productKitList.dot",
  "admin/editor.productKitList.description": "admin/editor.productKitList.description",
  "admin/editor.productKitList.showListPrice": "admin/editor.productKitList.showListPrice",
  "admin/editor.productKitList.showLabels": "admin/editor.productKitList.showLabels",
  "admin/editor.productKitList.showInstallments": "admin/editor.productKitList.showInstallments",
  "admin/editor.productKitList.showBadge": "admin/editor.productKitList.showBadge",
  "admin/editor.productKitList.badgeText": "admin/editor.productKitList.badgeText",
  "store/productKitList.takeAll": "store/productKitList.takeAll",
  "store/productKitList.buildYourBundle": "store/productKitList.buildYourBundle",
  "store/productKitList.swapItem": "store/productKitList.swapItem",
  "store/productKitList.buyKit": "store/productKitList.buyKit"
}

```


[System] You are an expert VTEX IO developer. You specialize 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-kit/messages/es.json from the product-kit VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.productKitList.title": "Kit de Productos",
  "admin/editor.productKitList.allowSwap": "Pemitir Permuta",
  "admin/editor.productKitList.allowRemoval": "Pemitir Remoción",
  "admin/editor.productKitList.showArrows": "Mostrar Flechas",
  "admin/editor.productKitList.nextArrow": "Flecha Siguiente",
  "admin/editor.productKitList.prevArrow": "Flecha Anterior",
  "admin/editor.productKitList.showDots": "Mostrar Puntos",
  "admin/editor.productKitList.dot": "Punto",
  "admin/editor.productKitList.description": "El component de kit de productos muestra una lista horizontal de productos que pertenecen al kit",
  "admin/editor.productKitList.showListPrice": "Mostrar lista de precios",
  "admin/editor.productKitList.showLabels": "Mostrar las etiquetas",
  "admin/editor.productKitList.showInstallments": "Mostrar parcelas",
  "admin/editor.productKitList.showBadge": "Mostrar badge",
  "admin/editor.productKitList.badgeText": "Texto de badge",
  "store/productKitList.takeAll": "Ileve los {numberOfItems} productos",
  "store/productKitList.buildYourBundle": "Monte su Kit",
  "store/productKitList.swapItem": "Intercambiar",
  "store/productKitList.buyKit": "Comprar Kit"
}

```


[System] You are an expert VTEX IO developer. You specialize 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-kit/docs/README.md from the product-kit VTEX app.

[Assistant]
Here's the implementation:

```markdown
# VTEX Product Kit

![https://img.shields.io/badge/-Deprecated-red](https://img.shields.io/badge/-Deprecated-red)

> ⚠ ***The Product Kit app has been deprecated.** Although support for this app is still granted by VTEX, we strongly recommend you to update your store theme in order to keep up with the framework's evolution!*

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

## Description

The VTEX product kit app shows two or more products as a kit. Usually these products are sold together and offer a discount. This app is used by store theme.

:loudspeaker: **Disclaimer:** Don't fork this project, use, contribute, or open issue with your feature request.

## Release schedule

| Release |       Status        | Initial Release | Maintenance LTS Start | End-of-life | Store Compatibility |
| :-----: | :-----------------: | :-------------: | :-------------------: | :---------: | :-----------------: |
|  [1.x]  | **Current Release** |   2018-11-05    |                       |             |         2.x         |
|  [0.x]  | **Maintenance LTS** |   2018-07-06    |      2018-11-05       | March 2019  |         1.x         |

See our [LTS policy](https://github.com/vtex-apps/awesome-io#lts-policy) for more information.

## Table of Contents

- [Usage](#usage)
  - [Blocks API](#blocks-api)
    - [Configuration](#configuration)
  - [Styles API](#styles-api)
    - [CSS namespaces](#css-namespaces)
- [Troubleshooting](#troubleshooting)
- [Contributing](#contributing)
- [Tests](#tests)

## Usage

This app uses our store builder with the blocks architecture. To know more about Store Builder [click here.](https://help.vtex.com/en/tutorial/understanding-storebuilder-and-stylesbuilder#structuring-and-configuring-our-store-with-object-object)

We add the product-kit as a block in our [Store](https://github.com/vtex-apps/store/blob/master/store/interfaces.json).

To configure or customize this app, you need to import it in your dependencies in `manifest.json`.

```json
  dependencies: {
    "vtex.product-kit": "1.x"
  }
```

Then, add `product-kit` block into our app theme as we do in our [Store theme app](https://github.com/vtex-apps/store-theme/blob/master/store/blocks.json).

Now, you can change the behavior of the `product-kit` block. See an example of how to configure:

```json
"product-kit": {
    "blocks": [
      "product-summary"
    ],
    "props":{
      "showArrows": true,
      "nextArrow": "next",
      "prevArrow": "prev",
      "showDots": true,
      "dots": "dots",
      "showListPrice": true,
      "showLabel": true,
      "showInstallments": true,
      "showBadge": true,
      "badgeText": "badge",
      "showCollections": true,
      "allowSwap": true,
      "allowRemoval": true,
    }
  }
```

### Blocks API

This app has an interface that describes what rules must be implemented by a block when you want to use the product kit.

```json
  "product-kit": {
    "required": [
      "product-summary"
    ],
    "component": "index"
  }
}
```

The product kit has as a required block the `product-summary`. So, any product kit block implementation created must add a product-summary as a block that is inside of product kit. (Similarly, `product-summary` has its own inner block structure that can be configured. There is a link to its API in the next section.)

### Configuration

Through the Storefront you can change the behavior and interface of `ProductKit`. But, you can also make adjusts in your theme app, like Store does.

| Prop name          | Type      | Description                            | Default Value                              |
| ------------------ | --------- | -------------------------------------- | ------------------------------------------ |
| `showArrows`       | `Boolean` | Show or not the arrows                 | true                                       |
| `nextArrow`        | `String`  | Next arrow icon                        | `''`                                       |
| `prevArrow`        | `String`  | Previous arrow icon                    | `''`                                       |
| `showDots`         | `Boolean` | Show or not the slider dots            | true                                       |
| `dots`             | `String`  | Slider dots icon                       | `''`                                       |
| `showListPrice`    | `Boolean` | Show or not the list price             | true                                       |
| `showLabels`       | `Boolean` | Show or not the labels "from" and "to" | false                                      |
| `showInstallments` | `Boolean` | Show or not the installments           | false                                      |
| `showBadge`        | `Boolean` | Show or not the discount badge         | false                                      |
| `badgeText`        | `String`  | Text of the discount badge             | `Badge Text/Texto de badge/Texto da badge` |
| `showCollections`  | `Boolean` | Show or not the collections badges     | true                                       |
| `allowSwap`        | `Boolean` | Allow or not the item swap             | true                                       |
| `allowRemoval`     | `Boolean` | Allow or not the item removal          | true                                       |

Also, you can configure the product summary that is defined on product-kit. See [here](https://github.com/vtex-apps/product-summary/blob/master/README.md#configuration) the Product Summary API.

### Styles API

This app provides some CSS classes as an API for style customization.

To use this CSS API, you must add the `styles` builder and create an app styling CSS file.

1. Add the `styles` builder to your `manifest.json`:

```json
  "builders": {
    "styles": "1.x"
  }
```

2. Create a file called `vtex.product-kit.css` inside the `styles/css` folder. Add your custom styles:

```css
.container {
  margin-top: 10px;
}
```

#### CSS namespaces

Below, we describe the namespaces that are define in the `ProductKit`.

| Class name      | Description                                                                                | Component Source                                            |
| --------------- | ---------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- |
| `container`     | A wrapper that envolves all the elements of the product kit, responsible for the main margins and paddings | [ProductKitContent](/react/components/ProductKitContent.js) |
| `listContainer` | The container for the products and final prices                                                            | [index](/react/index.js)                                    |
| `listDetails`   | The container for the total price of the kit                                                               | [ListDetails](/react/components/ProductKitDetails.js)       |
| `item`          | The container of one product                                                                               | [ProductKitItem](/react/components/ProductKitItem.js)       |

## Troubleshooting

You can check if others are passing through similar issues [here](https://github.com/vtex-apps/product-kit/issues). Also feel free to [open issues](https://github.com/vtex-apps/product-kit/issues/new) or contribute with pull requests.

## Contributing

Check it out [how to contribute](https://github.com/vtex-apps/awesome-io#contributing) with this project.

## Tests

To execute our tests go to `react/` folder and run `yarn test`

### Travis CI

[![Build Status](https://travis-ci.org/vtex-apps/product-kit.svg?branch=master)](https://travis-ci.org/vtex-apps/product-kit)
[![Coverage Status](https://coveralls.io/repos/github/vtex-apps/product-kit/badge.svg?branch=master)](https://coveralls.io/github/vtex-apps/product-kit?branch=master)

## Contributors ✨

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

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

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

```


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

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

[Assistant]
Here's the implementation:

```css
.listDetails {
  width: 15rem;
}

.container {}

.item {}

.listContainer {}
```


[System] You are an expert VTEX IO developer. You specialize 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-kit/react/global.css from the product-kit VTEX app.

[Assistant]
Here's the implementation:

```css
.vtex-product-kit-1-x-listContainer .vtex-store-components-3-x-dots li button:before {
  font-size: 1vw;
}
```


[System] You are an expert VTEX IO developer. You specialize 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-kit/react/index.js from the product-kit VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import { Slider, Container } from 'vtex.store-components'
import { FormattedMessage } from 'react-intl'
import { path } from 'ramda'

import ProductKitContent from './components/ProductKitContent'
import { schema } from './schema/index'
import { propTypes, defaultProps } from './props/index'

import styles from './styles.css'
import './global.css'

/** Slick slider should display at most one Product Kit per time */
const KITS_PER_TIME = 1

/**
 * ProductKit component.
 * Display a list of Kits of Products inside a Slick Slider component.
 */
export default class ProductKit extends Component {
  static getSchema = schema

  static propTypes = propTypes

  static defaultProps = defaultProps

  render() {
    const {
      showArrows,
      prevArrow,
      nextArrow,
      showDots,
      dots,
      showListPrice,
      showLabel,
      showInstallments,
      showBadge,
      badgeText,
      showCollections,
      allowSwap,
      allowRemoval,
      productQuery,
    } = this.props
    const { product, loading } = productQuery || {}
    const productKitList = path(['benefits'], product)

    /** The product does not have any kit of products associated with it,
     * in this case the component should not be rendered */
    if (loading || (!productKitList || !productKitList.length)) {
      return null
    }

    /** The component should be displayed only in large screens for a while */
    return (
      <Container className={`${styles.listContainer} dn db-ns flex-column`}>
        <div className="t-heading-3 c-muted-1 fw3 mv4 flex items-center justify-center">
          <FormattedMessage id="store/productKitList.buildYourBundle" />
        </div>
        <Slider
          leftArrowClasses="z-2"
          dotsClasses="top-0 relative f6"
          sliderSettings={{
            arrows: showArrows,
            prevArrow,
            nextArrow,
            dots: showDots,
            appendDots: dots,
            slidesToShow: KITS_PER_TIME,
          }}
        >
          {productKitList.map((productKit, index) => (
            <ProductKitContent
              key={index}
              baseProduct={product}
              productKit={productKit}
              allowSwap={allowSwap}
              allowRemoval={allowRemoval}
              summaryProps={{
                showListPrice,
                showLabel,
                showInstallments,
                showBadge,
                badgeText,
                showCollections,
              }}
            />
          ))}
        </Slider>
      </Container>
    )
  }
}

```


[System] You are an expert VTEX IO developer. You specialize 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-kit/react/package.json from the product-kit VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "product-kit",
  "version": "1.10.2",
  "description": "A Product kit component.",
  "scripts": {
    "pretest": "yarn",
    "test": "vtex-test-tools test",
    "test:coverage": "vtex-test-tools test --collectCoverage",
    "gen:coveralls": "yarn test:coverage  && cat ./coverage/lcov.info | coveralls"
  },
  "author": "VTEX",
  "license": "ISC",
  "dependencies": {
    "ramda": "^0.26.1",
    "react-intl": "^2.7.2"
  },
  "devDependencies": {
    "@types/node": "^10.12.21",
    "@types/prop-types": "^15.5.8",
    "@types/react": "^16.8.1",
    "@vtex/test-tools": "^0.1.3",
    "coveralls": "^3.0.3"
  },
  "resolutions": {
    "babel-core": "^7.0.0-bridge.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 product-kit/store/interfaces.json from the product-kit VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-kit": {
    "required": ["product-summary"],
    "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 product-kit/react/props/index.js from the product-kit VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'

export const summaryShape = PropTypes.shape({
  /** Show or not the list price */
  showListPrice: PropTypes.bool,
  /** Show or not the labels "from" and "to" */
  showLabel: PropTypes.bool,
  /** Show or not the installments */
  showInstallments: PropTypes.bool,
  /** Show or not the discount badge */
  showBadge: PropTypes.bool,
  /** Text of the discount badge */
  badgeText: PropTypes.string,
  /** Show or not the collections badges */
  showCollections: PropTypes.bool,
  /** Display mode of summary */
  displayMode: PropTypes.string,
})

export const productShape = PropTypes.shape({
  /** Product's link text */
  linkText: PropTypes.string.isRequired,
  /** Product's name */
  productName: PropTypes.string.isRequired,
  /** Product's brand */
  brand: PropTypes.string.isRequired,
  /** Product's SKU */
  sku: PropTypes.shape({
    /** SKU name */
    name: PropTypes.string.isRequired,
    /** SKU id */
    itemId: PropTypes.string.isRequired,
    /** SKU Image to be shown */
    image: PropTypes.shape({
      /** Image URL */
      imageUrl: PropTypes.string.isRequired,
      /** Image tag as string */
      imageTag: PropTypes.string.isRequired,
    }).isRequired,
    /** SKU seller */
    seller: PropTypes.shape({
      /** Seller comertial offer */
      commertialOffer: PropTypes.shape({
        /** SKU installments */
        Installments: PropTypes.arrayOf(
          PropTypes.shape({
            /** Installment value */
            Value: PropTypes.number.isRequired,
            /** Interest rate (zero if interest-free) */
            InterestRate: PropTypes.number.isRequired,
            /** Calculated total value */
            TotalValuePlusInterestRate: PropTypes.number,
            /** Number of installments */
            NumberOfInstallments: PropTypes.number.isRequired,
            /** Installments offer name */
            Name: PropTypes.string,
          })
        ),
        /** Selling Price */
        Price: PropTypes.number.isRequired,
        /** List Price */
        ListPrice: PropTypes.number.isRequired,
      }).isRequired,
    }).isRequired,
  }).isRequired,
  /** Product's collections */
  productClusters: PropTypes.arrayOf(PropTypes.shape({
    name: PropTypes.string.isRequired,
  })),
})

export const benefitShape = PropTypes.shape({
  items: PropTypes.arrayOf(PropTypes.shape({
    /** Benefit Product */
    benefitProduct: PropTypes.shape({
      /** SKU's id */
      skuId: PropTypes.string,
      /** Product slug */
      slug: PropTypes.string.isRequired,
      /** Product Query from the graphql */
      productQuery: PropTypes.shape({
        /** Product that owns the informations */
        product: PropTypes.shape({
          /** Product's id */
          productId: PropTypes.string.isRequired,
          /** Product's name */
          productName: PropTypes.string.isRequired,
          /** Product reference */
          productReference: PropTypes.string,
          /** Product's brand */
          brand: PropTypes.string,
          /** Product's SKUs */
          items: PropTypes.arrayOf(
            PropTypes.shape({
              /** SKU id */
              itemId: PropTypes.string.isRequired,
              /** SKU name */
              name: PropTypes.string.isRequired,
              /** SKU Images to be shown */
              images: PropTypes.arrayOf(
                PropTypes.shape({
                  /** Image id */
                  imageId: PropTypes.string.isRequired,
                  /** Image label */
                  imageLabel: PropTypes.string,
                  /** Image tag as string */
                  imageTag: PropTypes.string,
                  /** Image URL */
                  imageUrl: PropTypes.string.isRequired,
                  /** Image text */
                  imageText: PropTypes.string.isRequired,
                })
              ).isRequired,
              /** SKU sellers */
              sellers: PropTypes.arrayOf(
                PropTypes.shape({
                  /** Seller id */
                  sellerId: PropTypes.string.isRequired,
                  /** Seller comertial offer */
                  commertialOffer: PropTypes.shape({
                    /** SKU installments */
                    Installments: PropTypes.arrayOf(
                      PropTypes.shape({
                        /** Installment value */
                        Value: PropTypes.number.isRequired,
                        /** Interest rate (zero if interest-free) */
                        InterestRate: PropTypes.number.isRequired,
                        /** Calculated total value */
                        TotalValuePlusInterestRate: PropTypes.number,
                        /** Number of installments */
                        NumberOfInstallments: PropTypes.number.isRequired,
                        /** Installments offer name */
                        Name: PropTypes.string,
                      })
                    ),
                    /** Selling Price */
                    Price: PropTypes.number.isRequired,
                    /** List Price */
                    ListPrice: PropTypes.number.isRequired,
                  }).isRequired,
                })
              ).isRequired,
            })
          ).isRequired,
        }),
        /** Loading info */
        loading: PropTypes.bool.isRequired,
      }),
      /** Share Schema properties */
      share: PropTypes.shape({
        /** Social Networks configuration */
        social: PropTypes.object.isRequired,
      }),
    }),
    /** List of SKUS of the above product which belongs to the benefit */
    benefitSKUIds: PropTypes.arrayOf(
      PropTypes.string,
    ).isRequired,
    /** Discount of the product according to the benefit */
    discount: PropTypes.number.isRequired,
    /** Minimum quantity of the product to validate the benefit */
    minQuantity: PropTypes.number.isRequired,
  })).isRequired,
})

export const propTypes = {
  /** Show or not the arrows */
  showArrows: PropTypes.bool,
  /** Show or not the dots */
  showDots: PropTypes.bool,
  /** Next arrow icon */
  nextArrow: PropTypes.any,
  /** Previous arrow icon */
  prevArrow: PropTypes.any,
  /** Dots icon */
  dots: PropTypes.any,
  /** Show or not the list price */
  showListPrice: PropTypes.bool,
  /** Show or not the labels "from" and "to" */
  showLabel: PropTypes.bool,
  /** Show or not the installments */
  showInstallments: PropTypes.bool,
  /** Show or not the discount badge */
  showBadge: PropTypes.bool,
  /** Text of the discount badge */
  badgeText: PropTypes.string,
  /** Show or not the collections badges */
  showCollections: PropTypes.bool,
  /** Allow or not the item swap */
  allowSwap: PropTypes.bool,
  /** Allow or not the item removal */
  allowRemoval: PropTypes.bool,
  /** Product Query */
  productQuery: PropTypes.shape({
    /** Query is loading or not */
    loading: PropTypes.bool.isRequired,
    /** Product */
    product: PropTypes.shape({
      /** Product ID */
      productId: PropTypes.string.isRequired,
      /** Benefits associated with the product */
      benefits: PropTypes.arrayOf(
        benefitShape
      ),
    }).isRequired,
  }).isRequired,
}

export const defaultProps = {
  showArrows: true,
  showDots: true,
  showListPrice: true,
  showLabel: false,
  showInstallments: false,
  showBadge: true,
  showCollections: true,
  allowSwap: true,
  allowRemoval: true,
}

```


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

[User] Show me the implementation of product-kit/react/schema/index.js from the product-kit VTEX app.

[Assistant]
Here's the implementation:

```javascript
export const schema = ({ showArrows, showDots, showBadge }) => {
  return {
    title: 'admin/editor.productKitList.title',
    description: 'admin/editor.productKitList.description',
    type: 'object',
    properties: {
      allowSwap: {
        type: 'boolean',
        title: 'admin/editor.productKitList.allowSwap',
        default: true,
        isLayout: false,
      },
      allowRemoval: {
        type: 'boolean',
        title: 'admin/editor.productKitList.allowRemoval',
        default: true,
        isLayout: false,
      },
      showArrows: {
        type: 'boolean',
        title: 'admin/editor.productKitList.showArrows',
        default: true,
        isLayout: true,
      },
      nextArrow: showArrows ? {
        type: 'string',
        title: 'admin/editor.productKitList.nextArrow',
        default: '',
        isLayout: false,
        widget: {
          'ui:widget': 'image-uploader',
        },
      } : {},
      prevArrow: showArrows ? {
        type: 'string',
        title: 'admin/editor.productKitList.prevArrow',
        default: '',
        isLayout: false,
        widget: {
          'ui:widget': 'image-uploader',
        },
      } : {},
      showDots: {
        type: 'boolean',
        title: 'admin/editor.productKitList.showDots',
        default: true,
        isLayout: true,
      },
      dots: showDots ? {
        type: 'string',
        title: 'admin/editor.productKitList.dot',
        default: '',
        isLayout: false,
        widget: {
          'ui:widget': 'image-uploader',
        },
      } : {},
      showListPrice: {
        type: 'boolean',
        title: 'admin/editor.productKitList.showListPrice',
        default: true,
        isLayout: true,
      },
      showLabels: {
        type: 'boolean',
        title: 'admin/editor.productKitList.showLabels',
        default: false,
        isLayout: true,
      },
      showInstallments: {
        type: 'boolean',
        title: 'admin/editor.productKitList.showInstallments',
        default: false,
        isLayout: true,
      },
      showBadge: {
        type: 'boolean',
        title: 'admin/editor.productKitList.showBadge',
        default: false,
        isLayout: true,
      },
      badgeText: showBadge
        ? {
          type: 'string',
          title: 'admin/editor.productKitList.badgeText',
          isLayout: false,
        }
        : {},
    },
  }
}

```


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

[User] Show me the implementation of product-kit/react/components/ProductKitContent.js from the product-kit VTEX app.

[Assistant]
Here's the implementation:

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

import { IconPlus, IconEquals } from 'vtex.store-icons'

import ProductKitItem from './ProductKitItem'
import ProductKitDetails from './ProductKitDetails'
import { extractItemsKit } from '../helpers/index'
import { benefitShape, summaryShape } from '../props/index'
import styles from '../styles.css'

const DEFAULT_VISIBLE_ITEMS = 3

/**
 * ProductKitContent component.
 * Manages the operations over the items of a ProductKit.
 */
export default class ProductKitContent extends Component {
  static propTypes = {
    /** Product kit */
    productKit: benefitShape,
    /** Base product of the kit */
    baseProduct: PropTypes.shape({
      /** Id of the product */
      productId: PropTypes.string.isRequired,
    }),
    /** Product Summary Props */
    summaryProps: summaryShape,
    /** Allow or not the item swap */
    allowSwap: PropTypes.bool,
    /** Allow or not the item removal */
    allowRemoval: PropTypes.bool,
  }

  state = {
    shownItems: [],
    hiddenItems: [],
    numberOfVisibleItems: DEFAULT_VISIBLE_ITEMS,
  }

  /**
   * Updates the shown and hidden items arrays with the content of the
   * items array passed as an argument. This function uses the helper
   * function to extract the items kit from the items data.
   */
  updateComponentState = items => {
    const itemsKit = extractItemsKit(items, this.props.baseProduct)
    const { numberOfVisibleItems } = this.state

    this.setState({
      shownItems: itemsKit.slice(0, numberOfVisibleItems),
      hiddenItems: itemsKit.slice(numberOfVisibleItems),
    })
  }

  /**
   * When the component mounts it must update the shown and hidden items.
   */
  componentDidMount() {
    this.updateComponentState(this.props.productKit.items)
  }

  /**
   * Checks if the items data has changed since the last update of the props.
   */
  componentDidUpdate(prevProps) {
    const {
      productKit: { items: curItems },
    } = this.props
    const {
      productKit: { items: prevItems },
    } = prevProps

    if (!this.state.shownItems.length || !equals(curItems, prevItems)) {
      this.updateComponentState(curItems)
    }
  }

  /**
   * Receives the index of the item of the shownItems array and swap it by the
   * first item of the hiddenItems array, the swapped item will be pushed at the end
   * of the hiddenItems.
   */
  handleItemSwap = index => {
    const { shownItems, hiddenItems } = this.state
    const item = shownItems[index]

    shownItems[index] = hiddenItems.shift()
    hiddenItems.push(item)

    this.setState({
      shownItems,
      hiddenItems,
    })
  }

  /**
   * Receives the index of the item and handles the removal of it ProductKitItem wrapper component.
   * An important observation here is that the item kit itself is not removed from the kit,
   * it is just putted at the end of the hiddenItems array.
   */
  handleItemRemoval = index => {
    const { shownItems, hiddenItems, numberOfVisibleItems } = this.state

    hiddenItems.push(shownItems.splice(index, 1)[0])

    this.setState({
      shownItems,
      hiddenItems,
      numberOfVisibleItems: numberOfVisibleItems - 1,
    })
  }

  render() {
    const { summaryProps } = this.props

    const { shownItems, hiddenItems, numberOfVisibleItems } = this.state

    /** Allow swap operation if and only if there is hidden items */
    const allowSwap = this.props.allowSwap && hiddenItems.length > 0

    /** Allow removal operation if and only if the kit has more than two visible items */
    const allowRemoval = this.props.allowRemoval && numberOfVisibleItems > 2

    return (
      <div
        className={`${
          styles.container
        } flex flex-row items-center justify-center b--muted-5 pv3 w-100`}
      >
        {shownItems.map((item, index) => (
          <div
            className="flex flex-row items-center justify-center c-muted-1"
            key={index}
          >
            {index > 0 && <IconPlus size={45} className="w2" />}
            <ProductKitItem
              key={index}
              item={item}
              index={index}
              summaryProps={summaryProps}
              onItemSwap={this.handleItemSwap}
              onItemRemoval={this.handleItemRemoval}
              allowSwap={index > 0 && allowSwap}
              allowRemoval={index > 0 && allowRemoval}
            />
          </div>
        ))}
        <span className="c-muted-1">
          <IconEquals size={44} viewBox="0 0 44 22" className="w2" />
        </span>
        <ProductKitDetails items={shownItems} />
      </div>
    )
  }
}

```


[System] You are an expert VTEX IO developer. You specialize 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-kit/react/components/ProductKitDetails.js from the product-kit VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { path } from 'ramda'
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { FormattedMessage } from 'react-intl'
import { BuyButton, ProductPrice } from 'vtex.store-components'

import { productShape } from '../props'
import styles from '../styles.css'

/**
 * ProductKitDetails component.
 *
 * Show the details (price and number of items) of the Kit.
 */
export default class ProductKitDetails extends Component {
  static propTypes = {
    /** Array of items */
    items: PropTypes.arrayOf(
      productShape,
    ),
  }

  getPrice = item => {
    return item.sku.seller.commertialOffer.Price
  }

  calculateListPrice = items => {
    return items.reduce((price, item) => {
      return price + this.getPrice(item)
    }, 0)
  }

  /**
   * Calculates the Kit Price according to the products that are being displayed.
   * The price itself is calculated based on the discount that each product have separately.
   */
  calculateSellingPrice = items => {
    return items.reduce((price, item) => {
      return (
        price + (this.getPrice(item) * (100 - item.discount)) / 100
      )
    }, 0)
  }

  /**
   * Extract the information required of the item to be passed to the BuyButton
   * component.
   */
  getSkuItems = items => {
    return items.map(item => ({
      skuId: String(item.sku.itemId),
      quantity: item.minQuantity,
      seller: parseInt(item.sku.seller.sellerId),
      name: item.productName,
      price: path(['sku', 'seller', 'commertialOffer', 'Price'], item),
      variant: item.sku.name,
      brand: item.brand,
      detailUrl: `/${item.linkText}/p`,
      imageUrl: path(['sku', 'image', 'imageUrl'], item),
      listPrice: path(['sku', 'seller', 'commertialOffer', 'ListPrice'], item),
    }))
  }

  render() {
    const { items } = this.props

    return (
      <div className={`${styles.listDetails} flex flex-column items-center justify-center tc ph7`}>
        <div className="t-body c-muted-1 mv3">
          <FormattedMessage
            id="store/productKitList.takeAll"
            values={{ numberOfItems: items.length }}
          />
        </div>
        <div className="pv4">
          <ProductPrice
            sellingPrice={this.calculateSellingPrice(items)}
            listPrice={this.calculateListPrice(items)}
            listPriceClass="t-heading-5--small strike"
            sellingPriceClass="t-heading-5"
            showInstallments={false}
            showLabels={false}
          />
        </div>
        <BuyButton skuItems={this.getSkuItems(items)}>
          <FormattedMessage id="store/productKitList.buyKit" />
        </BuyButton>
      </div>
    )
  }
}

```


[System] You are an expert VTEX IO developer. You specialize 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-kit/react/components/ProductKitItem.js from the product-kit VTEX app.

[Assistant]
Here's the implementation:

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

import { ExtensionPoint } from 'vtex.render-runtime'
import { IconRemove, IconSwap } from 'vtex.store-icons'

import { productShape, summaryShape } from '../props'
import styles from '../styles.css'

/**
 * ProductKitItem component.
 *
 * Displays a product as an item of a kit of products and provides
 * the buttons to trigger the swap and removal item operations.
 */
export default class ProductKitItem extends Component {
  static propTypes = {
    /** Product item */
    item: productShape,
    /** Index of the item */
    index: PropTypes.number,
    /** Function that is called to handle the item swap operation */
    onItemSwap: PropTypes.func,
    /** Function that is called to handle the item removal operation */
    onItemRemoval: PropTypes.func,
    /** Allow or not the item swap */
    allowSwap: PropTypes.bool,
    /** Allow or not the item removal */
    allowRemoval: PropTypes.bool,
    /** Product Summary Props */
    summaryProps: summaryShape,
  }

  render() {
    const {
      item,
      index,
      allowSwap,
      allowRemoval,
      onItemSwap,
      onItemRemoval,
      summaryProps,
    } = this.props

    return (
      <div className={styles.item}>
        <div className="flex flex-row">
          <div className="pl4">
            <ExtensionPoint
              id="product-summary"
              product={item}
              {...summaryProps}
              hideBuyButton
            />
          </div>
          <div className="flex flex-column items-center w2">
            {allowRemoval && (
              <div
                className="pointer flex items-center mh3 mv3 c-on-base"
                onClick={() => onItemRemoval(index)}
              >
                <IconRemove size={21} viewBox="0 0 21 21" className="w1 h1" />
              </div>
            )}
            {allowSwap && (
              <div
                className="pointer flex items-center mh3 mv3 c-on-base"
                onClick={() => onItemSwap(index)}
              >
                <IconSwap size={21} viewBox="0 0 21 21" className="w1 h1" />
              </div>
            )}
          </div>
        </div>
      </div>
    )
  }
}

```


[System] You are an expert VTEX IO developer. You specialize 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-kit/react/__tests__/productKit.test.js from the product-kit VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import { render, fireEvent, act } from '@vtex/test-tools/react'
import { productMock } from '../__mocks__/productMock'
import ProductKit from '../index'

describe('<ProductSummary /> component', () => {
  function renderComponent(customProps, itemNumber = 1) {
    return render(<ProductKit {...productMock(itemNumber)} {...customProps} />)
  }

  it('should be rendered', () => {
    expect(renderComponent()).toBeDefined()
  })

  it('should match the snapshot with no removal and swap', () => {
    const { asFragment } = renderComponent({
      allowSwap: false,
      allowRemoval: false,
    })
    expect(asFragment()).toMatchSnapshot()
  })

  it('should match the snapshot with removal and swap', () => {
    const { asFragment } = renderComponent(
      {
        allowSwap: true,
        allowRemoval: true,
      },
      5
    )
    expect(asFragment()).toMatchSnapshot()
  })

  it('should render 3 products', () => {
    const { getByText } = renderComponent({}, 4)
    expect(getByText(/Take all 3 products/)).toBeTruthy()
  })

  it('should remove an item from the kit', () => {
    const { getByText, container } = renderComponent({ allowRemoval: true }, 2)
    expect(getByText(/Take all 2 products/)).toBeTruthy()

    act(() => {
      fireEvent.click(container.querySelector('.IconRemove'))
    })

    expect(getByText(/Take all 1 products/)).toBeTruthy()
  })

  /** It will swap the first swapable (name-2) for the one left over (name-4).
   * If swapped again, it should retrieve the previous one. */
  it('should swap an item from the kit', () => {
    const { getByText, container, queryByText } = renderComponent(
      { allowSwap: true },
      4
    )
    expect(getByText('name-2')).toBeTruthy()

    act(() => {
      fireEvent.click(container.querySelector('.IconSwap'))
    })

    expect(getByText('name-4')).toBeTruthy()
    expect(queryByText('name-2')).toBeNull()

    act(() => {
      fireEvent.click(container.querySelector('.IconSwap'))
    })

    expect(getByText('name-2')).toBeTruthy()
  })
})

```


[System] You are an expert VTEX IO developer. You specialize 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-kit/react/helpers/index.js from the product-kit VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { propEq, findIndex } from 'ramda'

/**
 * Helper functions to extract the Kit Items of a Product Kit and sets the first
 * item as the main item according to the mainProductId passed as an argument.
 */
export const extractItemsKit = (productsKit, mainProduct) => {
  const itemsKit = []
  let indexOfMainProduct = -1

  if (productsKit) {
    productsKit.forEach((productKit, index) => {
      const {
        benefitProduct,
        benefitSKUIds,
        discount,
        minQuantity,
      } = productKit

      if (
        benefitProduct.productId === mainProduct.productId &&
        indexOfMainProduct === -1
      ) {
        indexOfMainProduct = index
      }

      benefitSKUIds.forEach(skuId => {
        const indexOfItem = findIndex(propEq('itemId', skuId))(
          benefitProduct.items
        )

        if (indexOfItem !== -1) {
          itemsKit.push(
            extractKitItem({
              discount,
              minQuantity,
              product: {
                ...benefitProduct,
                items: [benefitProduct.items[indexOfItem]],
              },
            })
          )
        }
      })
    })
  }

  if (indexOfMainProduct !== -1) {
    const mainItem = itemsKit[indexOfMainProduct]
    itemsKit[indexOfMainProduct] = itemsKit[0]
    itemsKit[0] = mainItem
  }

  return itemsKit
}

/**
 * Extract the required information of a Product to be used into the
 * ProductKitItem component.
 */
export const extractKitItem = productKit => {
  const { discount, minQuantity, product } = productKit
  const kitItem = { ...product }

  if (kitItem.items && kitItem.items.length) {
    kitItem.sku = { ...kitItem.items[0] }
    kitItem.productName = kitItem.sku.nameComplete

    if (kitItem.sku.sellers && kitItem.sku.sellers.length) {
      kitItem.sku.seller = kitItem.sku.sellers[0]
    } else {
      kitItem.sku.seller = {
        commertialOffer: {
          Price: 0,
          ListPrice: 0,
        },
      }
    }

    if (kitItem.sku.images && kitItem.sku.images.length) {
      kitItem.sku.image = { ...kitItem.sku.images[0] }
      kitItem.sku.image.imageUrl = kitItem.sku.image.imageUrl.replace(
        /^https?:/,
        ''
      )
    }

    kitItem.sku.referenceId = (kitItem.sku.referenceId &&
      kitItem.sku.referenceId[0]) || {
      Value: '',
    }
  }

  return { ...kitItem, discount, minQuantity }
}

```


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

[User] Show me the implementation of order-items/react/utils.ts from the order-items VTEX app.

[Assistant]
Here's the implementation:

```typescript
export {
  AVAILABLE,
  adjustForItemInput,
  mapToOrderFormItem,
  filterUndefined,
} from '@vtex/order-items'

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.order-items",
  "version": "0.14.0",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "test": "vtex-test-tools test --passWithNoTests"
  },
  "dependencies": {
    "@vtex/css-handles": "^1.1.3",
    "@vtex/order-items": "^0.7.0",
    "classnames": "^2.2.6",
    "debounce": "^1.2.0",
    "react": "^16.8.3",
    "react-dom": "^16.9.0",
    "react-intl": "3.9.1",
    "uuid": "^3.3.3"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/classnames": "^2.2.7",
    "@types/debounce": "^1.2.0",
    "@types/graphql": "^14.2.0",
    "@types/jest": "^28.1.6",
    "@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",
    "@types/uuid": "^3.4.6",
    "@vtex/test-tools": "^3.4.3",
    "apollo-client": "^2.5.1",
    "graphql-tag": "^2.11.0",
    "ramda": "^0.26.1",
    "react-apollo": "^3.1.3",
    "typescript": "3.9.7",
    "vtex.checkout-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-graphql@0.60.0/public/@types/vtex.checkout-graphql",
    "vtex.checkout-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.46.0/public/@types/vtex.checkout-resources",
    "vtex.checkout-splunk": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-splunk@0.1.0/public/@types/vtex.checkout-splunk",
    "vtex.order-items": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-items@0.12.0/public/@types/vtex.order-items",
    "vtex.order-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-manager@0.11.0/public/@types/vtex.order-manager",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.128.4/public/@types/vtex.render-runtime"
  },
  "resolutions": {
    "json-schema": "^0.4.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 order-items/react/OrderItems.tsx from the order-items VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useCallback } from 'react'
import { useMutation } from 'react-apollo'
import UpdateItems from 'vtex.checkout-resources/MutationUpdateItems'
import AddToCart from 'vtex.checkout-resources/MutationAddToCart'
import SetManualPrice from 'vtex.checkout-resources/MutationSetManualPrice'
import {
  UpdateItemsMutationVariables,
  SetManualPriceMutationVariables,
  AddToCartMutationVariables,
} from 'vtex.checkout-resources'
import type { OrderForm } from 'vtex.checkout-graphql'
import { OrderForm as OrderManager, OrderQueue } from 'vtex.order-manager'
import { useSplunk } from 'vtex.checkout-splunk'
import { useOrderItems, createOrderItemsProvider } from '@vtex/order-items'

const { useOrderForm } = OrderManager
const { useOrderQueue, useQueueStatus } = OrderQueue

function useLogger() {
  const { logSplunk } = useSplunk()

  const log = useCallback(
    ({ type, level, event, workflowType, workflowInstance }) => {
      logSplunk({ type, level, event, workflowType, workflowInstance })
    },
    [logSplunk]
  )

  return { log }
}

interface SetManualPrice {
  setManualPrice: OrderForm
}

interface UpdateItemsMutation {
  updateItems: OrderForm
}

function useMutateAddItems() {
  const [mutateAddItem] = useMutation<
    { addToCart: OrderForm },
    AddToCartMutationVariables
  >(AddToCart)

  return useCallback(
    (variables: AddToCartMutationVariables) => {
      return mutateAddItem({ variables }).then(({ data, errors }) => {
        return { data: data?.addToCart, errors }
      })
    },
    [mutateAddItem]
  )
}

function useMutateUpdateQuantity() {
  const [mutateUpdateQuantity] = useMutation<
    UpdateItemsMutation,
    UpdateItemsMutationVariables
  >(UpdateItems)

  return useCallback(
    (variables: UpdateItemsMutationVariables) => {
      return mutateUpdateQuantity({ variables }).then(({ data, errors }) => {
        return { data: data?.updateItems, errors }
      })
    },
    [mutateUpdateQuantity]
  )
}

function useMutateSetManualPrice() {
  const [mutateSetManualPrice] = useMutation<
    SetManualPrice,
    SetManualPriceMutationVariables
  >(SetManualPrice)

  return useCallback(
    ({ itemIndex, price }: { itemIndex: number; price: number }) => {
      return mutateSetManualPrice({
        variables: { manualPriceInput: { price, itemIndex } },
      }).then(({ data, errors }) => {
        return { data: data?.setManualPrice, errors }
      })
    },
    [mutateSetManualPrice]
  )
}

const { OrderItemsProvider } = createOrderItemsProvider<OrderForm>({
  useOrderForm,
  useOrderQueue,
  useQueueStatus,
  useLogger,
  useMutateAddItems,
  useMutateSetManualPrice,
  useMutateUpdateQuantity,
})

export { useOrderItems, OrderItemsProvider }
export default { useOrderItems, OrderItemsProvider }

```


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

[User] Show me the implementation of order-items/react/typings/globals.d.ts from the order-items VTEX app.

[Assistant]
Here's the implementation:

```typescript
import {
  OrderForm as GraphqlOrderForm,
  AssemblyOptionInput,
} from 'vtex.checkout-graphql'

declare global {
  type OrderForm = GraphqlOrderForm

  type Maybe<T> = T | undefined | null

  interface OrderFormItemInput {
    id?: number
    index?: number
    quantity?: number
    seller?: string
    uniqueId?: string
    options?: AssemblyOptionInput[]
  }

  interface CatalogItem {
    additionalInfo: ItemAdditionalInfo
    availability: string
    detailUrl: string
    id: string
    imageUrl: string
    index?: number
    listPrice: number
    measurementUnit: string
    name: string
    price: number
    productId: string
    quantity: number
    sellingPrice: number
    seller: string
    skuName: string
    skuSpecifications: SKUSpecification[]
    options?: AssemblyOptionInput[]
    uniqueId?: string
  }

  interface ItemAdditionalInfo {
    brandName: string
  }

  interface MarketingData {
    coupon: Maybe<string>
  }

  interface SKUSpecification {
    fieldName: string
    fieldValues: string[]
  }

  interface Totalizer {
    id: string
    name: string
    value: number
  }

  interface UpdateItemsMutation {
    updateItems: OrderForm
  }

  interface FakeUniqueIdMap {
    [fakeUniqueId: string]: string
  }
}

```


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

[User] Show me the implementation of order-items/react/typings/vtex.checkout-resources.d.ts from the order-items VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.checkout-resources/*' {
  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 order-items/react/typings/css.d.ts from the order-items 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 order-items/react/typings/graphql.d.ts from the order-items 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 order-items/react/typings/vtex.styleguide.d.ts from the order-items 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-shipping/messages/sl.json from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/checkout.shipping.informAddress": "Prosimo, sporočite svoj naslov",
  "store/checkout.shipping.chooseAddress": "Izberite naslov",
  "store/checkout.shipping.selectedDeliveryOptionsLabel": "Izbrali ste",
  "store/checkout.shipping.newAddressLabel": "Nov naslov…",
  "store/checkout.shipping.shippingOptionLabel": "Način odpošiljanja",
  "store/checkout.shipping.completeAddressLabel": "Izpolnite naslov za dostavo",
  "store/checkout.shipping.receiverNameLabel": "Ime in priimek",
  "store/checkout.shipping.receiverLabel": "Prejemnik",
  "store/checkout.shipping.shippingOptionsForAddressLabel": "Možnosti odpošiljanja za",
  "store/checkout.shipping.emptyDeliveryOptionsAlert": "Za vašo lokacijo ni na voljo nobenih možnosti dostave.",
  "store/checkout.shipping.changeAddressLabel": "spremeni",
  "store/checkout.shipping.changeReceiverLabel": "spremeni",
  "store/checkout.shipping.seeDetails": "Oglej si podrobnosti",
  "store/checkout.shipping.distance": "{distanceValue}km stran",
  "store/checkout.shipping.pickupPointsModal.details": "Podrobnosti",
  "store/checkout.shipping.pickupPointsModal.weekDay0": "Nedelja",
  "store/checkout.shipping.pickupPointsModal.weekDay1": "Ponedeljek",
  "store/checkout.shipping.pickupPointsModal.weekDay2": "Torek",
  "store/checkout.shipping.pickupPointsModal.weekDay3": "Sreda",
  "store/checkout.shipping.pickupPointsModal.weekDay4": "Četrtek",
  "store/checkout.shipping.pickupPointsModal.weekDay5": "Petek",
  "store/checkout.shipping.pickupPointsModal.weekDay6": "Sobota",
  "store/checkout.shipping.pickupPointsModal.weekDay1to5": "Ponedeljek do Petka",
  "store/checkout.shipping.pickupPointsModal.closed": "Zaprto",
  "store/checkout.shipping.pickupPointsModal.hourFromTo": "{openingTime}h - {closingTime}h",
  "store/checkout.shipping.pickupPointsModal.businessHours": "Delovni čas",
  "store/checkout.shipping.pickupPointsModal.allItemsAvailable": "Vsi elementi so na voljo.",
  "store/checkout.shipping.pickupPointsModal.availableItems": "Elementi, ki so na voljo",
  "store/checkout.shipping.pickupPointsModal.address": "Naslov",
  "store/checkout.shipping.goToPayment": "Pojdite na plačilo",
  "store/checkout.shipping.goToAddress": "Pojdite na naslov",
  "store/checkout.shipping.tryAgainButton": "Poskusite znova",
  "store/checkout.shipping.unknownErrorMessage": "Pri poskusu vložitve zahteve je prišlo do napake.",
  "store/checkout.shipping.backToAddressList": "Ali, <a>pojdite nazaj na seznam naslovov</a>."
}

```