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

[User] Show me the implementation of console/react/components/Metrics/DataAnalysis/index.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { map, reject } from 'ramda'
import React from 'react'
import { PageBlock } from 'vtex.styleguide'

import { getRangeStep, isNilOrEmpty } from '../../../common/dataAnalysis'
import { AppContext } from '../Contexts/AppContext'
import { TimeContext } from '../Contexts/TimeContext'

interface Props {
  layout: any[]
}

const DataAnalysis: React.SFC<Props> = (props) => {
  const setAppParams = (metricParams: object, appControllers: AppController) => {
    return reject(isNilOrEmpty, {
      ...metricParams,
      appName: appControllers.appName,
      appVersion: appControllers.appVersion,
      production: appControllers.production,
      region: appControllers.region,
    })
  }

  const setTimeRange = (metricParams: object, timeControllers: TimeController, chartType: string) => {
    return reject(isNilOrEmpty, {
      ...metricParams,
      from: timeControllers.startDate,
      interval: (chartType === 'BarChart') ? '' : getRangeStep(timeControllers.startDate!, timeControllers.endDate!),
      to: timeControllers.endDate,
    })
  }

  const { layout } = props

  return (
    <AppContext.Consumer>
      {({ appControllers }) => (
        <TimeContext.Consumer>
          {({ timeControllers }) => (
            <div className="flex flex-wrap mt5 w-100" >
              {
                map(
                  (chartDescription) => {
                    const {
                      ChartComponent,
                      chartType,
                      id,
                      storedash: {
                        name,
                      },
                    } = chartDescription
                    let {
                      storedash: {
                        metricParams,
                      },
                    } = chartDescription

                    metricParams = setAppParams(metricParams, appControllers)
                    metricParams = setTimeRange(metricParams, timeControllers, chartType)

                    return (
                      <div className="w-33 pa4">
                        <PageBlock key={id} variation="full">
                          <ChartComponent name={name} metricParams={metricParams} />
                        </PageBlock>
                      </div>
                    )
                  }, layout)
              }
            </div>
          )}
        </TimeContext.Consumer>
      )}
    </AppContext.Consumer>
  )
}

export default DataAnalysis

```


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

[User] Show me the implementation of console/react/components/Metrics/Controllers/index.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { Button, PageBlock } from 'vtex.styleguide'

import { FormattedMessage, InjectedIntlProps, injectIntl } from 'react-intl'
import { TimeContext } from '../Contexts/TimeContext'
import AppControllers from './AppControllers'
import TimeControllers from './TimeControllers'

const Controllers: React.SFC<InjectedIntlProps> = (props) => {
  const { intl } = props

  return (
    <PageBlock
      title={intl.formatMessage({ id: 'console.context' })}
      variation="half"
    >
      <AppControllers />
      <TimeContext.Consumer>
        {({ timeControllers, setTimeControllers }) => (
          <TimeControllers
            timeControllers={timeControllers}
            setTimeControllers={setTimeControllers}
          />
        )}
      </TimeContext.Consumer>
    </PageBlock>
  )
}

export default injectIntl(Controllers)

```


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

[User] Show me the implementation of console/react/components/Metrics/DataAnalysis/Charts/CpuUsageLineChart.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment } from 'react'
import { Query } from 'react-apollo'
import { InjectedIntlProps, injectIntl } from 'react-intl'
import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
import { withRuntimeContext } from 'render'
import { Spinner } from 'vtex.styleguide'

import { CHART_PROPERTIES } from '../../../../common/constants'
import { getFormattedTime, getStepModifier } from '../../../../common/dataAnalysis'
import dataQuery from '../../../../graphql/data.graphql'
import BlockTitle from '../CustomElements/BlockTitle'
import CustomTooltip from '../CustomElements/CustomTooltip'
import CustomYAxisTick from '../CustomElements/CustomYAxisTick'

interface Props extends InjectedIntlProps {
  name: string
  metricParams: any
}

const CpuUsageLineChart: React.SFC<Props> = (props) => {
  const { name, metricParams, intl } = props

  return (
    <Fragment>
      <BlockTitle title={intl.formatMessage({ id: 'console.cpuUsage.lineChart' })} />

      <Query query={dataQuery} ssr={false} variables={{ name, params: metricParams }} >
        {({ loading, error, data: { data: rawChartData } }) => {
          let chartData: any
          const stepModifier = getStepModifier(metricParams)

          if (!loading) {
            chartData = JSON.parse(rawChartData)
            console.log({chartData})
          }

          return (
            loading ? (
              <Spinner />
            ) : (
                <ResponsiveContainer
                  width={CHART_PROPERTIES.width}
                  height={CHART_PROPERTIES.height}
                >
                  <LineChart data={chartData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis
                      dataKey="date"
                      tickFormatter={(rawDate: string) => getFormattedTime(rawDate, intl, stepModifier) }
                    />
                    <YAxis
                      type="number"
                      tick={<CustomYAxisTick name="cpuUsageLineChart" />}
                    />
                    <Legend />
                    <Tooltip content={<CustomTooltip name="cpuUsageLineChart" stepModifier={stepModifier} />} />
                    <Line name="system" type="monotone" dataKey="summary.system" stroke="Green" />
                    <Line name="user" type="monotone" dataKey="summary.user" stroke="Navy" />
                  </LineChart>
                </ResponsiveContainer>
              )
          )
        }}
      </Query>
    </Fragment>
  )
}

export default withRuntimeContext(injectIntl(CpuUsageLineChart))

```


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

[User] Show me the implementation of console/react/components/Metrics/DataAnalysis/Charts/LatencyLineChart.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment } from 'react'
import { Query } from 'react-apollo'
import { InjectedIntlProps, injectIntl } from 'react-intl'
import { CartesianGrid, Legend, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
import { Spinner } from 'vtex.styleguide'

import { CHART_PROPERTIES } from '../../../../common/constants'
import { getFormattedTime, getStepModifier } from '../../../../common/dataAnalysis'
import dataQuery from '../../../../graphql/data.graphql'
import BlockTitle from '../CustomElements/BlockTitle'
import CustomTooltip from '../CustomElements/CustomTooltip'
import CustomYAxisTick from '../CustomElements/CustomYAxisTick'

interface Props extends InjectedIntlProps {
  name: string
  metricParams: any
}

const LatencyLineChart: React.SFC<Props> = (props) => {
  const { name, metricParams, intl } = props

  return (
    <Fragment>
      <BlockTitle title={intl.formatMessage({ id: 'console.latency.lineChart' })} />

      <Query query={dataQuery} ssr={false} variables={{ name, params: metricParams }} >
        {({ loading, data: { data: rawChartData } }) => {
          let chartData: any
          const stepModifier = getStepModifier(metricParams)

          if (!loading) {
            chartData = JSON.parse(rawChartData)
          }

          return (
            loading ? (
              <Spinner />
            ) : (
                <ResponsiveContainer
                  width={CHART_PROPERTIES.width}
                  height={CHART_PROPERTIES.height}
                >
                  <LineChart data={chartData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis
                      dataKey="date"
                      tickFormatter={(rawDate: string) => getFormattedTime(rawDate, intl, stepModifier) }
                    />
                    <YAxis
                      type="number"
                      tick={<CustomYAxisTick name="latencyLineChart" />}
                    />
                    <Legend />
                    <Tooltip content={<CustomTooltip name="latencyLineChart" stepModifier={stepModifier} />} />
                    {/* { this.drawLatencyLine() } */}
                  </LineChart>
                </ResponsiveContainer>
              )
          )
        }}
      </Query>
    </Fragment>
  )
}

export default injectIntl(LatencyLineChart)

```


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

[User] Show me the implementation of console/react/components/Metrics/DataAnalysis/Charts/MemoryUsageLineChart.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment } from 'react'
import { Query } from 'react-apollo'
import { InjectedIntlProps, injectIntl } from 'react-intl'
import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
import { Spinner } from 'vtex.styleguide'

import { CHART_PROPERTIES } from '../../../../common/constants'
import { getFormattedTime, getStepModifier } from '../../../../common/dataAnalysis'
import dataQuery from '../../../../graphql/data.graphql'
import BlockTitle from '../CustomElements/BlockTitle'
import CustomTooltip from '../CustomElements/CustomTooltip'
import CustomYAxisTick from '../CustomElements/CustomYAxisTick'

interface Props extends InjectedIntlProps {
  name: string
  metricParams: any
}

const MemoryUsageLineChart: React.SFC<Props> = (props) => {
  const { name, metricParams, intl } = props

  return (
    <Fragment>
      <BlockTitle title={intl.formatMessage({ id: 'console.memoryUsage.lineChart' })} />

      <Query query={dataQuery} ssr={false} variables={{ name, params: metricParams }} >
        {({ loading, data: { data: rawChartData } }) => {
          let chartData: any
          const stepModifier = getStepModifier(metricParams)

          if (!loading) {
            chartData = JSON.parse(rawChartData)
            console.log({chartData})
          }

          return (
            loading ? (
              <Spinner />
            ) : (
                <ResponsiveContainer
                  width={CHART_PROPERTIES.width}
                  height={CHART_PROPERTIES.height}
                >
                  <LineChart data={chartData}>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis
                      dataKey="date"
                      tickFormatter={(rawDate: string) => getFormattedTime(rawDate, intl, stepModifier) }
                    />
                    <YAxis
                      type="number"
                      tick={<CustomYAxisTick name="memoryUsageLineChart" />}
                    />
                    <Legend />
                    <Tooltip content={<CustomTooltip name="memoryUsageLineChart" stepModifier={stepModifier} />} />
                    <Line name="external" type="monotone" dataKey="summary.external" stroke="Green" />
                    <Line name="heapUsed" type="monotone" dataKey="summary.heapUsed" stroke="Navy" />
                    <Line name="heapTotal" type="monotone" dataKey="summary.heapTotal" stroke="Maroon" />
                    <Line name="rss" type="monotone" dataKey="summary.rss" stroke="Orange" />
                  </LineChart>
                </ResponsiveContainer>
              )
          )
        }}
      </Query>
    </Fragment>
  )
}

export default injectIntl(MemoryUsageLineChart)

```


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

[User] Show me the implementation of console/react/components/Metrics/DataAnalysis/Charts/StatusCodeBarChart.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment } from 'react'
import { Query } from 'react-apollo'
import { InjectedIntlProps, injectIntl } from 'react-intl'
import { Bar, BarChart, CartesianGrid, Cell, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
import { Spinner } from 'vtex.styleguide'

import { CHART_PROPERTIES, colors } from '../../../../common/constants'
import { getStepModifier } from '../../../../common/dataAnalysis'
import dataQuery from '../../../../graphql/data.graphql'
import BlockTitle from '../CustomElements/BlockTitle'
import CustomTooltip from '../CustomElements/CustomTooltip'
import CustomYAxisTick from '../CustomElements/CustomYAxisTick'

interface DataStatusCode {
  httpStatus: number
  count: number
}

interface Props extends InjectedIntlProps {
  name: string
  metricParams: any
}

const StatusCodeBarChart: React.SFC<Props> = (props) => {
  const { name, metricParams, intl } = props

  return (
    <Fragment>
      <BlockTitle title={intl.formatMessage({ id: 'console.statusCode.barChart' })} />

      <Query query={dataQuery} ssr={false} variables={{ name, params: metricParams }} >
        {({ loading, data: { data: rawChartData } }) => {
          let chartData: any
          const stepModifier = getStepModifier(metricParams)

          if (!loading) {
            chartData = JSON.parse(rawChartData)
            console.log({chartData})
          }

          return (
            loading ? (
              <Spinner />
            ) : (
                <ResponsiveContainer
                  width={CHART_PROPERTIES.width}
                  height={CHART_PROPERTIES.height}
                >
                  <BarChart data={chartData} >
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis dataKey="key.httpStatus" />
                    <YAxis
                      type="number"
                      tick={<CustomYAxisTick name="statusCodeBarChart" />}
                    />
                    <Tooltip content={<CustomTooltip name="statusCodeBarChart" stepModifier={stepModifier} />} />
                    <Bar name="count" dataKey="summary.count" >
                      {
                        chartData.map((entry: DataStatusCode, index: number) => (
                          <Cell key={`cell-${index}`} fill={colors[index % 20]}  />
                        ))
                      }
                    </Bar>
                  </BarChart>
                </ResponsiveContainer>
              )
          )
        }}
      </Query>
    </Fragment>
  )
}

export default injectIntl(StatusCodeBarChart)

```


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

[User] Show me the implementation of console/react/components/Metrics/DataAnalysis/Charts/StatusCodeLineChart.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment } from 'react'
import { Query } from 'react-apollo'
import { InjectedIntlProps, injectIntl } from 'react-intl'
import { CartesianGrid, Legend, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
import { withRuntimeContext } from 'render'
import { Spinner } from 'vtex.styleguide'

import { CHART_PROPERTIES, colors } from '../../../../common/constants'
import { getFormattedTime, getStepModifier, mapIndexed } from '../../../../common/dataAnalysis'
import dataQuery from '../../../../graphql/data.graphql'
import BlockTitle from '../CustomElements/BlockTitle'
import CustomTooltip from '../CustomElements/CustomTooltip'
import CustomYAxisTick from '../CustomElements/CustomYAxisTick'

interface Props extends InjectedIntlProps {
  name: string
  metricParams: any
}

const StatusCodeLineChart: React.SFC<Props> = (props) => {
  const { name, metricParams, intl } = props

  return (
    <Fragment>
      <BlockTitle title={intl.formatMessage({ id: 'console.statusCode.lineChart' })} />

      <Query query={dataQuery} ssr={false} variables={{ name, params: metricParams }} >
        {({ loading, error, data: { data: rawChartData } }) => {
          let chartData: any
          const stepModifier = getStepModifier(metricParams)

          if (!loading) {
            chartData = JSON.parse(rawChartData)
          }

          return (
            loading ? (
              <Spinner />
            ) : (
                <ResponsiveContainer
                  width={CHART_PROPERTIES.width}
                  height={CHART_PROPERTIES.height}
                >
                  <LineChart>
                    <CartesianGrid strokeDasharray="3 3" />
                    <XAxis
                      dataKey="label"
                      allowDuplicatedCategory={false}
                      tickFormatter={(rawDate: string) => getFormattedTime(rawDate, intl, stepModifier)}
                    />
                    <YAxis
                      type="number"
                      dataKey="value"
                      tick={<CustomYAxisTick name="statusCodeLineChart" />}
                    />
                    <Legend />
                    <Tooltip
                      content={<CustomTooltip name="statusCodeLineChart" stepModifier={stepModifier} />}
                    />
                    {
                      mapIndexed(
                        (chartLine: any, index: number) => (
                          <Line
                            isAnimationActive={false}
                            dataKey="value"
                            data={chartLine.data}
                            name={chartLine.name}
                            key={chartLine.name}
                            stroke={colors[index % 20]}
                          />
                        ), chartData)
                    }
                  </LineChart>
                </ResponsiveContainer>
              )
          )
        }}
      </Query>
    </Fragment>
  )
}

export default withRuntimeContext(injectIntl(StatusCodeLineChart))

```


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

[User] Show me the implementation of console/react/components/Metrics/DataAnalysis/CustomElements/CustomYAxisTick.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { InjectedIntlProps, injectIntl } from 'react-intl'

import { abbrNum, abbrPerc } from '../../../../common/dataAnalysis'
import RenderYAxisTick from './RenderYAxisTick'

interface Props extends InjectedIntlProps {
  name: string
  x?: number
  y?: number
  payload?: any
  toFixed?: number
  textAnchor?: string
}

const CustomYAxisTick: React.SFC<Props> = (props) => {
  const { name, intl, x, y, payload, toFixed, textAnchor = 'middle' } = props
  let tickValue: string

  if (name === 'cpuUsageLineChart' || name === 'statusCodeLineChart') {
    tickValue = abbrPerc(payload.value, intl)
  } else {
    tickValue = abbrNum(toFixed ? payload.value.toFixed(toFixed) : payload.value, 0)
  }

  return (
    <RenderYAxisTick
      tickValue={tickValue}
      x={x}
      y={y}
      textAnchor={textAnchor}
    />
  )
}

export default injectIntl(CustomYAxisTick)

```


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

[User] Show me the implementation of console/react/components/Metrics/DataAnalysis/CustomElements/RenderTooltip.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { InjectedIntlProps, injectIntl } from 'react-intl'

interface Props extends InjectedIntlProps {
  label: string
  labelColor: string
  value: string
}

const RenderTooltip: React.SFC<Props> = (props) => {
  const { label, labelColor, value } = props

  return (
    <div className="flex justify-between" >
      <div className="pa2" style={{ color: labelColor }} >
        {`${label}:  `}
      </div>
      <div className="pa2" >
        {value}
      </div>
    </div>
  )
}

export default injectIntl(RenderTooltip)

```


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

[User] Show me the implementation of console/react/components/Metrics/DataAnalysis/CustomElements/RenderYAxisTick.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

interface Props {
  tickValue: string
  x?: number
  y?: number
  textAnchor?: string
}

const RenderYAxisTick: React.SFC<Props> = (props) => {
  const { tickValue, x, y, textAnchor } = props
  return (
    <g transform={`translate(${x},${y})`}>
      <text x={0} y={0} dy={5} textAnchor={textAnchor} fill="#666" className="f6">
        {tickValue}
      </text>
    </g>
  )
}

export default RenderYAxisTick

```


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

[User] Show me the implementation of console/react/components/Metrics/DataAnalysis/CustomElements/CustomTooltip.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { map } from 'ramda'
import React from 'react'
import { InjectedIntl, InjectedIntlProps, injectIntl } from 'react-intl'
import { TooltipPayload, TooltipProps } from 'recharts'
import { PageBlock } from 'vtex.styleguide'

import { abbrPerc, getFormattedTime } from '../../../../common/dataAnalysis'
import RenderTooltip from './RenderTooltip'

type Props = InjectedIntlProps & TooltipProps & {
  name: string
  stepModifier: string
}

const getLabel = (label: string | number, name: string, intl: InjectedIntl, stepModifier: string) => {
  if (name !== 'statusCodeBarChart') {
    return getFormattedTime(label, intl, stepModifier)
  }
  return label
}

const getColor = (dataPoint: TooltipPayload) => {
  if (dataPoint.color === undefined) {
    return dataPoint.fill
  }
  return dataPoint.color
}

const CustomTooltip: React.SFC<Props> = (props) => {
  const { active, intl, name, payload, label, stepModifier } = props

  return active
    ? (
      <PageBlock>
        <div className="t-small">
          <div className="pa2">
            {getLabel(label!, name, intl, stepModifier)}
          </div>
          {
            map((item) => {
              const itemLabelColor: string = getColor(item) || ''
              const itemLabel: string = String(item.name)
              let itemValue: string
              if (name === 'cpuUsageLineChart' || name === 'statusCodeLineChart') {
                itemValue = abbrPerc(item.value, intl)
              } else {
                itemValue = intl.formatNumber(Number(item.value))
              }
              return (
                <RenderTooltip
                  key={itemLabel}
                  label={itemLabel}
                  labelColor={itemLabelColor}
                  value={itemValue}
                />
              )
            }, payload || [])
          }
        </div>
      </PageBlock>
    ) : null
}

export default injectIntl(CustomTooltip)

```


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

[User] Show me the implementation of console/react/components/Metrics/DataAnalysis/CustomElements/CustomXAxisTick.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

interface Props {
  x?: number
  y?: number
  payload?: any
}

const CustomXAxisTick: React.SFC<Props> = (props) => {
  const { x, y, payload } = props
  return (
    <g transform={`translate(${x},${y})`}>
      <text x={0} y={0} dy={5} textAnchor="middle" fill="#666" className="f6">
        {payload.value}
      </text>
    </g>
  )
}

export default CustomXAxisTick

```


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

[User] Show me the implementation of console/react/components/Metrics/DataAnalysis/CustomElements/BlockTitle.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

interface Props {
  title: string
}

const BlockTitle: React.SFC<Props> = ({ title }) => {
  return (<h3 className="block__title mt0">{title}</h3>)
}

export default BlockTitle

```


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

[User] Show me the implementation of console/react/components/Metrics/Controllers/TimeControllers/index.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Component, Fragment } from 'react'
import { FormattedMessage, InjectedIntlProps, injectIntl } from 'react-intl'
import { Button, EmptyState, RadioGroup } from 'vtex.styleguide'

import { adjustEndDate, adjustStartDateHour, formattedDropdownOptions } from '../../../../common/utils'
import Absolute from './Absolute'
import Relative from './Relative'
import { timeControllerOptions } from './utils'

interface Props extends InjectedIntlProps {
  timeControllers: TimeController
  setTimeControllers: SetTimeControllers
}

interface State {
  locale: string
  startDate: Date
  endDate: Date
}

class TimeControllers extends Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = {
      endDate: this.props.timeControllers.endDate || new Date(),
      locale: 'pt-BR',
      startDate: this.props.timeControllers.startDate || adjustStartDateHour(),
    }
  }

  public render() {
    const { intl, timeControllers } = this.props
    const { locale, startDate, endDate } = this.state

    return (
      !timeControllers.mode
        ? (
          <Fragment>
            <EmptyState title={intl.formatMessage({ id: 'console.empty.time.range.headline' })}>
              <FormattedMessage id="console.empty.time.range.explanation" />
            </EmptyState>
            <div className="pa4 mh2 flex justify-end">
              <Button
                variation="primary"
                size="small"
                onClick={this.handleOnClickMode}
              >
                <FormattedMessage id="console.button.set.time.range" />
              </Button>
            </div>
          </Fragment>
        ) : (
          <div className="flex flex-row">
            <div className="pa1 mr6">
              <RadioGroup
                name="timeController"
                options={formattedDropdownOptions(timeControllerOptions, intl)}
                value={timeControllers.mode}
                onChange={this.handleOnChangeMode}
              />
            </div>
            <div className="flex items-center flex-wrap w-100">
              {timeControllers.mode === 'absolute'
                ? (
                  <Absolute
                    startDate={startDate}
                    endDate={endDate}
                    handleStartDate={this.setStartDate}
                    handleEndDate={this.setEndDate}
                    locale={locale}
                  />
                ) : (
                  <Relative
                    startDate={startDate}
                    endDate={endDate}
                    handleStartDate={this.setStartDate}
                    handleEndDate={this.setEndDate}
                  />
                )
              }
              <div className="content-end pa4 pt7 mr1 mh4">
                <Button
                  variation="primary"
                  size="small"
                  disabled={!this.isButtonActive}
                  onClick={this.handleOnClickTimeControllers}
                >
                  <FormattedMessage id="console.button.apply.time.range" />
                </Button>
              </div>
            </div>
          </div>
        )
    )
  }

  private setStartDate = (startDate: Date) => {
    this.setState({ startDate })
  }

  private setEndDate = (endDate: Date) => {
    this.setState({ endDate: adjustEndDate(endDate) })
  }

  private handleOnClickMode = () => {
    this.props.setTimeControllers({
      ...this.props.timeControllers,
      mode: 'absolute',
    })
  }

  private handleOnChangeMode = (e: React.ChangeEvent<HTMLInputElement>) => {
    this.props.setTimeControllers({
      ...this.props.timeControllers,
      mode: e.currentTarget
        ? e.currentTarget.value as TimeRange
        : 'absolute',
    })
  }

  private handleOnClickTimeControllers = () => {
    this.props.setTimeControllers({
      ...this.props.timeControllers,
      endDate: this.state.endDate,
      startDate: this.state.startDate,
    })
  }

  private isButtonActive = () => {
    const startDate = this.state.startDate
    const endDate = this.state.endDate
    const currentTime = new Date()
    return (startDate && endDate &&
      startDate <= endDate &&
      endDate <= currentTime)
  }
}

export default injectIntl(TimeControllers)

```


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

[User] Show me the implementation of console/react/components/Metrics/Controllers/TimeControllers/utils.ts from the console VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { Option } from '../../../../common/utils'

export const timeControllerOptions: Option[] = [
  { value: 'absolute', label: 'console.time.controller.absolute' },
  { value: 'relative', label: 'console.time.controller.relative' },
]

```


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

[User] Show me the implementation of console/react/components/Metrics/Controllers/AppControllers/index.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import AppNamePicker from './AppNamePicker'
import EnvPicker from './EnvPicker'
import RegionPicker from './RegionPicker'
import VersionInput from './VersionInput'

const AppControllers = () => {
  return (
    <div className="flex br4 bg-base flex-wrap w-100 pa2">
      <div className="pa4">
        <AppNamePicker />
      </div>
      <div className="pa4">
        <VersionInput />
      </div>
      <div className="pa4">
        <RegionPicker />
      </div>
      <div className="pa4">
        <EnvPicker />
      </div>
    </div>
  )
}

export default AppControllers

```


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

[User] Show me the implementation of console/react/components/Metrics/Controllers/AppControllers/EnvPicker.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { map } from 'ramda'
import React from 'react'
import { InjectedIntlProps, injectIntl } from 'react-intl'
import { Dropdown } from 'vtex.styleguide'

import { formattedDropdownOptions } from '../../../../common/utils'
import { AppContext } from '../../Contexts/AppContext'

const options = [
  {
    label: 'console.any',
    value: '',
  },
  {
    label: 'console.envPicker.production',
    value: 'true',
  },
  {
    label: 'console.envPicker.development',
    value: 'false',
  },
]

const EnvPicker: React.SFC<InjectedIntlProps> = ({ intl }) => {
  return (
    <AppContext.Consumer>
      {({ appControllers, setAppControllers }) => (
        <Dropdown
          value={appControllers.production}
          label={intl.formatMessage({ id: 'console.app.environment' })}
          options={formattedDropdownOptions(options, intl)}
          onChange={(_: Event, isProduction: string) => setAppControllers({
            ...appControllers,
            production: isProduction,
          })}
        />
      )}
    </AppContext.Consumer>
  )
}

export default injectIntl(EnvPicker)

```


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

[User] Show me the implementation of console/react/components/Metrics/Controllers/AppControllers/VersionInput.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { any } from 'ramda'
import React, { Component } from 'react'
import { InjectedIntlProps, injectIntl } from 'react-intl'
import * as semver from 'semver'
import { Input } from 'vtex.styleguide'

import { getAppVersion } from '../../../../common/utils'
import { AppContext } from '../../Contexts/AppContext'

interface State {
  inputIsNotSemver: boolean
}

const semverRangesRegex = [
  /([0-9])+\.x/,
  /([0-9])+\.([0-9])+\.x/,
  /\bv?(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)\.(?:0|[1-9]\d*)(?:-[\da-z-]+(?:\.[\da-z-]+)*)?(?:\+[\da-z-]+(?:\.[\da-z-]+)*)?\b/,
]

const isValidVersion = (version: string) => any((regex: RegExp) => regex.test(version), semverRangesRegex)

class VersionInput extends Component<InjectedIntlProps, State> {
  constructor(props: InjectedIntlProps) {
    super(props)
    this.state = {
      inputIsNotSemver: false,
    }
  }

  public setStateAsync(state: State) {
    return new Promise((resolve) => {
      this.setState(state, resolve)
    })
  }

  public render() {
    return (
      <AppContext.Consumer>
        {({ appControllers, setAppControllers }) => (
          <Input
            placeholder={appControllers.appVersion || 'Ex: 1.0.x'}
            label={this.props.intl.formatMessage({ id: 'console.app.version' })}
            onChange={(event: any) => this.parseInputAndSetState(event.target.value, appControllers, setAppControllers)}
            errorMessage={this.state.inputIsNotSemver ? 'Version is not in the SemVer spec' : ''}
          />
        )}
      </AppContext.Consumer>
    )
  }

  private parseInputAndSetState = (version: string, appControllers: AppController, setAppControllers: SetAppControllers) => {
    const isValid = version.length === 0 || isValidVersion(version)
    if (!isValid) {
      this.setState({ inputIsNotSemver: true })
    } else {
      this.setState(
        { inputIsNotSemver: false },
        () => this.updateAppControllers(version, appControllers, setAppControllers)
      )
    }
  }

  private updateAppControllers = (version: string, appControllers: AppController, setAppControllers: SetAppControllers) => {
    let chosenMajor = ''
    let chosenMinor = ''
    let chosenPatch = ''
    try {
      const { major, minor, patch } = semver.parse(version) as any
      chosenMajor = major
      chosenMinor = minor
      chosenPatch = patch
    } catch (err) {
      const [major, minor, patch] = version.replace('x', '').split('.')
      chosenMajor = major
      chosenMinor = minor
      chosenPatch = patch
    }

    const appVersion = getAppVersion(String(chosenMajor), String(chosenMinor), String(chosenPatch))
    setAppControllers({
      ...appControllers,
      appVersion,
    })
  }
}

export default injectIntl(VersionInput)

```


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

[User] Show me the implementation of console/react/components/Metrics/Controllers/AppControllers/AppNamePicker.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { Query } from 'react-apollo'
import { InjectedIntlProps, injectIntl } from 'react-intl'
import { Dropdown } from 'vtex.styleguide'

import { dropdownOptions } from '../../../../common/utils'
import appsQuery from '../../../../graphql/apps.graphql'
import { AppContext } from '../../Contexts/AppContext'

const AppNamePicker: React.SFC<InjectedIntlProps> = ({ intl }) => {
  return (
    <AppContext.Consumer>
      {({ appControllers, setAppControllers }) => (
        <Query query={appsQuery} ssr={false}>
          {({ loading, data: { appsWithStats } }) => !loading && appsWithStats &&
            <Dropdown
              value={appControllers.appName}
              label={intl.formatMessage({ id: 'console.available.apps' })}
              options={dropdownOptions(appsWithStats)}
              onChange={(_: Event, appName: string) => setAppControllers({
                ...appControllers,
                appName,
              })}
            />
          }
        </Query>
      )}
    </AppContext.Consumer>
  )
}

export default injectIntl(AppNamePicker)

```


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

[User] Show me the implementation of console/react/components/Metrics/Controllers/AppControllers/RegionPicker.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { map } from 'ramda'
import React from 'react'
import { InjectedIntlProps, injectIntl } from 'react-intl'
import { Dropdown } from 'vtex.styleguide'

import { formattedDropdownOptions } from '../../../../common/utils'
import { AppContext } from '../../Contexts/AppContext'

const options = [
  {
    label: 'console.any',
    value: '',
  },
  {
    label: 'East-1',
    value: 'aws-us-east-1',
  },
  {
    label: 'East-2',
    value: 'aws-us-east-2',
  },
]

const RegionPicker: React.SFC<InjectedIntlProps> = ({ intl }) => {
  return (
    <AppContext.Consumer>
      {({ appControllers, setAppControllers }) => (
        <Dropdown
          value={appControllers.region}
          label={intl.formatMessage({ id: 'console.app.region' })}
          options={formattedDropdownOptions(options, intl)}
          onChange={(_: Event, region: string) => setAppControllers({
            ...appControllers,
            region,
          })}
        />
      )}
    </AppContext.Consumer>
  )
}

export default injectIntl(RegionPicker)

```


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

[User] Show me the implementation of console/react/components/Metrics/Controllers/TimeControllers/Relative/index.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Component } from 'react'
import { InjectedIntlProps, injectIntl } from 'react-intl'
import { Dropdown, NumericStepper } from 'vtex.styleguide'

import { adjustStartDate, formattedDropdownOptions } from '../../../../../common/utils'
import { EventWithValue } from '../../../../../typings/events'
import { earliestModifierOptions } from './utils'

type EarliestModifier = 'Seconds Ago' | 'Minutes Ago' | 'Hours Ago' | 'Days Ago' | 'Months Ago' | 'Years Ago'

interface Props extends InjectedIntlProps {
  startDate: Date
  endDate: Date
  handleStartDate: (date: Date) => void
  handleEndDate: (date: Date) => void
}

interface State {
  earliestSize: number
  earliestModifier: EarliestModifier
}

class Relative extends Component<Props, State> {
  constructor(props: Props) {
    super(props)
    this.state = {
      earliestModifier: 'Days Ago',
      earliestSize: 1,
    }
    this.constructTimeRange()
  }

  public componentDidUpdate(_: Props, prevState: State) {
    if ((this.state.earliestSize !== prevState.earliestSize) || (this.state.earliestModifier !== prevState.earliestModifier)) {
      this.constructTimeRange()
    }
  }

  public render() {
    const { intl } = this.props

    return (
      <div className="flex flex-colunm items-end pa4 mh0">
        <NumericStepper
          label={this.props.intl.formatMessage({ id: 'console.time.controller.relative.earliest' })}
          size="small"
          value={this.state.earliestSize}
          onChange={this.handleEarliestSize}
        />
        <Dropdown
          size="small"
          options={formattedDropdownOptions(earliestModifierOptions, intl)}
          value={this.state.earliestModifier}
          onChange={this.handleEarliestModifier}
        />
      </div>
    )
  }

  private handleEarliestSize = (e: EventWithValue) => {
    this.setState({ earliestSize: e.value })
  }

  private handleEarliestModifier = (e: Event, earliestModifier: EarliestModifier) => {
    this.setState({ earliestModifier })
  }

  private constructTimeRange = () => {
    const startDate: Date = adjustStartDate(this.state.earliestSize, this.state.earliestModifier)
    const endDate: Date = new Date()

    this.props.handleStartDate(startDate)
    this.props.handleEndDate(endDate)
  }
}

export default injectIntl(Relative)

```


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

[User] Show me the implementation of console/react/components/Metrics/Controllers/TimeControllers/Relative/utils.ts from the console VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { Option } from '../../../../../common/utils'

export const earliestModifierOptions: Option[] =[
  { value: 'Seconds Ago', label: 'console.time.controller.relative.earliestModifier.seconds.ago' },
  { value: 'Minutes Ago', label: 'console.time.controller.relative.earliestModifier.minutes.ago' },
  { value: 'Hours Ago', label: 'console.time.controller.relative.earliestModifier.hours.ago' },
  { value: 'Days Ago', label: 'console.time.controller.relative.earliestModifier.days.ago' },
  { value: 'Months Ago', label: 'console.time.controller.relative.earliestModifier.months.ago' },
  { value: 'Years Ago', label: 'console.time.controller.relative.earliestModifier.years.ago' },
]

```


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

[User] Show me the implementation of console/react/components/Metrics/Controllers/TimeControllers/Absolute/index.tsx from the console VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment } from 'react'
import { InjectedIntlProps, injectIntl } from 'react-intl'
import { DatePicker } from 'vtex.styleguide'

interface Props extends InjectedIntlProps {
  locale: string
  startDate: Date
  endDate: Date
  handleStartDate: (date: Date) => void
  handleEndDate: (date: Date) => void
}

const Absolute: React.SFC<Props> = (props) => {
  return (
    <div className="flex flex-wrap">
      <Fragment>
        <div className="pa4 mh2">
          <DatePicker
            name={'startDate'}
            label={props.intl.formatMessage({ id: 'console.date.picker.from' })}
            locale={props.locale}
            useTime={true}
            value={props.startDate}
            onChange={props.handleStartDate}
          />
        </div>
        <div className="pa4 mh2">
          <DatePicker
            name={'endDate'}
            label={props.intl.formatMessage({ id: 'console.date.picker.to' })}
            locale={props.locale}
            useTime={true}
            value={props.endDate}
            onChange={props.handleEndDate}
          />
        </div>
      </Fragment>
    </div>

  )
}

export default injectIntl(Absolute)

```


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

[User] Show me the implementation of facebook-domain-verification/docs/README.md from the facebook-domain-verification VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Facebook Domain Verification

The **Facebook Domain Verification** app sets the meta-tag containing the verification code into the `<head>` section of your website's homepage.

![facebook-domain](https://user-images.githubusercontent.com/284515/93783246-dc55d180-fc01-11ea-83a9-73916e3e3b5a.png)

## Before you begin

Access the [Facebook Business Settings](https://business.facebook.com/settings/owned-domains/) and log in to your account to check your domain verification code. Click the `Meta-tag Verification` tag and copy the code inside the content attribute.

## Configuration

You can install the **Facebook Domain Verification** app in your account either via the App Store or the VTEX IO CLI.

### Using VTEX App Store

1. Access the **Apps** section in your account's Admin page and look for the Facebook Domain Verification box.
2. Click the `Install` button. You should see a warning message requiring the necessary configurations. Scroll down and type in your verification code.
4. Click `Save`.

### Using VTEX IO CLI

1. [Install](https://developers.vtex.com/docs/guides/vtex-io-documentation-installing-an-app) the `vtex.facebook-domain-verification@1.x` app.
2. Access the **Apps** section in your account's admin page and look for the `Facebook Domain Verification` box. Once you find it, click on the box.
3. Fill in the domain verification code.
4. Click `Save`.

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "/ {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# termék érhető el} other {# termék érhető el}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# termék nem érhető el} other {# termék nem érhető el}}",
  "store/product-list.message.cantBeDelivered": "Ez a termék nem kézbesíthető a megadott címre.",
  "store/product-list.message.noLongerAvailable": "Ez a termék már nem érhető el.",
  "store/product-list.message.remove": "eltávolítás",
  "store/product-list.quantity-selector.remove": "Eltávolítás",
  "store/product-list.quantity-label": "{quantity} egység",
  "store/product-list.delete-button.default-label": "Termék eltávolítása",
  "store/product-list.priceChanged": "Módosítva",
  "store/product-list.priceOptions": "Árlehetőségek",
  "store/product-list.changePrice": "Ár módosítása",
  "store/product-list.revertToOriginal": "Visszaállítás ez eredetire",
  "store/product-list.originalPrice": "Eredeti ár",
  "store/product-list.changeTo": "Módosítás a következőre:",
  "store/product-list.manualPricePlaceholder": "Írja be a pénzbeli értéket",
  "store/product-list.applyManualPrice": "rendben",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Ezt a terméket {unitMultiplier}{measurementUnit} kiadásokban értékesítik. Ezért a megadott mennyiség kerekítésre került: {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Termékmennyiség",
  "store/product-list.quantityStepper.increaseQuantity": "Mennyiség növelése",
  "store/product-list.quantityStepper.decreaseQuantity": "Mennyiség csökkentése"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "ανά {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# διαθέσιμο προϊόν} other {# διαθέσιμα προϊόντα}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# μη διαθέσιμο προϊόν} other {# μη διαθέσιμα προϊόντα}}",
  "store/product-list.message.cantBeDelivered": "Αυτό το προϊόν δεν μπορεί να παραδοθεί στην παρεχόμενη διεύθυνση.",
  "store/product-list.message.noLongerAvailable": "Αυτό το προϊόν δεν είναι πλέον διαθέσιμο.",
  "store/product-list.message.remove": "αφαίρεση",
  "store/product-list.quantity-selector.remove": "Αφαιρώ",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Αφαίρεση προϊόντος",
  "store/product-list.priceChanged": "Άλλαξε",
  "store/product-list.priceOptions": "Επιλογές τιμής",
  "store/product-list.changePrice": "Αλλαγή τιμής",
  "store/product-list.revertToOriginal": "Επιστροφή στο αρχικό",
  "store/product-list.originalPrice": "Αρχική τιμή",
  "store/product-list.changeTo": "Άλλαξε σε",
  "store/product-list.manualPricePlaceholder": "Πληκτρολογήστε μια χρηματική αξία",
  "store/product-list.applyManualPrice": "οκ",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Αυτό το προϊόν πωλείται με κλάσματα του {unitMultiplier}{measurementUnit}. Δεδομένου αυτού, η εισαγόμενη ποσότητα έχει στρογγυλοποιηθεί σε {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Ποιότητα προϊόντος",
  "store/product-list.quantityStepper.increaseQuantity": "Αύξηση ποσότητας",
  "store/product-list.quantityStepper.decreaseQuantity": "Μείωση ποσότητας"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# beschikbaar product} other {# beschikbare producten}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# niet beschikbaar product} other {# niet beschikbare producten}}",
  "store/product-list.message.cantBeDelivered": "Dit product kan niet worden geleverd op het opgegeven adres.",
  "store/product-list.message.noLongerAvailable": "Dit product is niet langer verkrijgbaar.",
  "store/product-list.message.remove": "verwijder",
  "store/product-list.quantity-selector.remove": "Verwijder",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Product verwijderen",
  "store/product-list.priceChanged": "Veranderd",
  "store/product-list.priceOptions": "Prijsopties",
  "store/product-list.changePrice": "Prijs wijzigen",
  "store/product-list.revertToOriginal": "Ga terug naar het origineel",
  "store/product-list.originalPrice": "Originele prijs",
  "store/product-list.changeTo": "Wijzigen naar",
  "store/product-list.manualPricePlaceholder": "Typ een monetaire waarde",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Dit product wordt verkocht met een fractie van {unitMultiplier}{measurementUnit}. Gegeven dat, de ingevoegde hoeveelheid is afgerond op {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Productaantal",
  "store/product-list.quantityStepper.increaseQuantity": "Aantal verhogen",
  "store/product-list.quantityStepper.decreaseQuantity": "Aantal verlagen"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# prodotto disponibile} other {# prodotti disponibili}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# prodotto non disponibile} other {# prodotti non disponibili}}",
  "store/product-list.message.cantBeDelivered": "Questo prodotto non può essere consegnalo presso l'indirizzo indicato.",
  "store/product-list.message.noLongerAvailable": "Questo prodotto non è più disponibile.",
  "store/product-list.message.remove": "rimuovi",
  "store/product-list.quantity-selector.remove": "Rimuovi",
  "store/product-list.quantity-label": "{quantity}.",
  "store/product-list.delete-button.default-label": "Rimuovi prodotto",
  "store/product-list.priceChanged": "Modificato",
  "store/product-list.priceOptions": "Opzioni di prezzo",
  "store/product-list.changePrice": "Modifica il prezzo",
  "store/product-list.revertToOriginal": "Ripristina l'originale",
  "store/product-list.originalPrice": "Prezzo originale",
  "store/product-list.changeTo": "Modifica in",
  "store/product-list.manualPricePlaceholder": "Inserisci una valuta",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Questo prodotto è venduto per frazioni di {unitMultiplier}{measurementUnit}. Per questo motivo, la quantità inserita è stata arrotondata a {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Quantità del prodotto",
  "store/product-list.quantityStepper.increaseQuantity": "Aumenta la quantità",
  "store/product-list.quantityStepper.decreaseQuantity": "Riduci la quantità"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "ต่อ {unitMultiplier} {measurementUnit}",
  "store/product-list.availableItems": "ผลิตภัณฑ์ที่พร้อม {quantity, plural, one {# รายการ} other {# รายการ}}",
  "store/product-list.unavailableItems": "ผลิตภัณฑ์ที่ไม่พร้อม {quantity, plural, one {# รายการ} other {# รายการ}}",
  "store/product-list.message.cantBeDelivered": "ไม่สามารถจัดส่งผลิตภัณฑ์นี้ไปยังที่อยู่ที่ให้มา",
  "store/product-list.message.noLongerAvailable": "ผลิตภัณฑ์นี้ไม่มีจำหน่ายแล้ว",
  "store/product-list.message.remove": "ลบออก",
  "store/product-list.quantity-selector.remove": "ลบออก",
  "store/product-list.quantity-label": "{quantity} หน่วย",
  "store/product-list.delete-button.default-label": "ลบผลิตภัณฑ์ออก",
  "store/product-list.priceChanged": "เปลี่ยนแปลงแล้ว",
  "store/product-list.priceOptions": "ตัวเลือกราคา",
  "store/product-list.changePrice": "เปลี่ยนราคา",
  "store/product-list.revertToOriginal": "เปลี่ยนกลับเป็นค่าเดิม",
  "store/product-list.originalPrice": "ราคาเดิม",
  "store/product-list.changeTo": "เปลี่ยนเป็น",
  "store/product-list.manualPricePlaceholder": "พิมพ์จำนวนเงิน",
  "store/product-list.applyManualPrice": "ตกลง",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "ผลิตภัณฑ์นี้ขายทีละ {unitMultiplier} {measurementUnit} ดังนั้นจำนวนที่ใส่จะถูกปัดเป็น {roundedValue} {measurementUnit}",
  "store/product-list.quantityStepper.label": "จำนวนผลิตภัณฑ์",
  "store/product-list.quantityStepper.increaseQuantity": "จำนวนเพิ่ม",
  "store/product-list.quantityStepper.decreaseQuantity": "จำนวนลด"
}

```


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

[Assistant]
Here's the implementation:

```json
{
    "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
    "store/product-list.pricePerUnit.measurementUnit": "{unitMultiplier} {measurementUnit} あたり。",
    "store/product-list.availableItems": "{quantity, plural, one {# 個の製品が在庫あり} other {# 個の製品が在庫あり}}",
    "store/product-list.unavailableItems": "{quantity, plural, one {# 個の製品が在庫切れ} other {# 個の製品が在庫切れ}}",
    "store/product-list.message.cantBeDelivered": "この製品は入力された住所に配送できません。",
    "store/product-list.message.noLongerAvailable": "この製品はもう在庫がありません。",
    "store/product-list.message.remove": "削除",
    "store/product-list.quantity-selector.remove": "削除",
    "store/product-list.quantity-label": "{quantity} un.",
    "store/product-list.delete-button.default-label": "製品を削除",
    "store/product-list.priceChanged": "変更済み",
    "store/product-list.priceOptions": "価格オプション",
    "store/product-list.changePrice": "価格を変更",
    "store/product-list.revertToOriginal": "元に戻す",
    "store/product-list.originalPrice": "元の価格",
    "store/product-list.changeTo": "変更",
    "store/product-list.manualPricePlaceholder": "金額を入力",
    "store/product-list.applyManualPrice": "oK",
    "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
    "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
    "store/product-list.quantityUnitMultiplierMismatch": "この製品は {unitMultiplier}{measurementUnit} に分けて販売されます。その場合、挿入された数量は {roundedValue}{measurementUnit} に丸められています。",
    "store/product-list.quantityStepper.label": "製品の数量",
    "store/product-list.quantityStepper.increaseQuantity": "数量を増やす",
    "store/product-list.quantityStepper.decreaseQuantity": "数量を減らす"
}
```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# verfügbares Produkt} other {# verfügbare Produkte}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# nicht verfügbares Produkt} other {# nicht verfügbare Produkte}}",
  "store/product-list.message.cantBeDelivered": "Dieses Produkt kann nicht an die angegebene Adresse geliefert werden.",
  "store/product-list.message.noLongerAvailable": "Dieses Produkt ist nicht mehr erhältlich.",
  "store/product-list.message.remove": "entfernen",
  "store/product-list.quantity-selector.remove": "Entfernen",
  "store/product-list.quantity-label": "{quantity} Un.",
  "store/product-list.delete-button.default-label": "Produkt entfernen",
  "store/product-list.priceChanged": "Geändert",
  "store/product-list.priceOptions": "Preisoptionen",
  "store/product-list.changePrice": "Preis ändern",
  "store/product-list.revertToOriginal": "Zurück zum Original",
  "store/product-list.originalPrice": "Originalpreis",
  "store/product-list.changeTo": "Wechseln zu",
  "store/product-list.manualPricePlaceholder": "Geben Sie einen Geldwert ein",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Dieses Produkt wird in Bruchteilen von {unitMultiplier}{measurementUnit} verkauft. Daher wurde die eingesetzte Menge auf {roundedValue}{measurementUnit} gerundet.",
  "store/product-list.quantityStepper.label": "Produktmenge",
  "store/product-list.quantityStepper.increaseQuantity": "Menge erhöhen",
  "store/product-list.quantityStepper.decreaseQuantity": "Menge verringern"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "за {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# доступный товар} few {# доступных товара} many {# доступных товаров} other {# доступных товаров}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# недоступный товар} few {# недоступных товара} many {# недоступных товаров} other {# недоступных товаров}}",
  "store/product-list.message.cantBeDelivered": "Данный товар нельзя доставить по указанному адресу.",
  "store/product-list.message.noLongerAvailable": "Товар больше недоступен.",
  "store/product-list.message.remove": "удалить",
  "store/product-list.quantity-selector.remove": "Удалить",
  "store/product-list.quantity-label": "{quantity} шт.",
  "store/product-list.delete-button.default-label": "Удалить товар",
  "store/product-list.priceChanged": "Изменено",
  "store/product-list.priceOptions": "Варианты цены",
  "store/product-list.changePrice": "Изменить цену",
  "store/product-list.revertToOriginal": "Вернуться к начальной",
  "store/product-list.originalPrice": "Начальная цена",
  "store/product-list.changeTo": "Изменить на",
  "store/product-list.manualPricePlaceholder": "Введите цену",
  "store/product-list.applyManualPrice": "хорошо",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Этот товар продается по {unitMultiplier} {measurementUnit}. В связи с этим указанное количество было округлено до {roundedValue} {measurementUnit}.",
  "store/product-list.quantityStepper.label": "Количество товара",
  "store/product-list.quantityStepper.increaseQuantity": "Увеличить количество",
  "store/product-list.quantityStepper.decreaseQuantity": "Уменьшить количество"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "za {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# dostępny produkt} few {# dostępne produkty} other {# dostępne produkty}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# niedostępny produkt} other {# niedostępne produkty}}",
  "store/product-list.message.cantBeDelivered": "Tego produktu nie można dostarczyć pod podany adres.",
  "store/product-list.message.noLongerAvailable": "Ten produkt nie jest już dostępny.",
  "store/product-list.message.remove": "usuń",
  "store/product-list.quantity-selector.remove": "Usuń",
  "store/product-list.quantity-label": "{quantity} nied.",
  "store/product-list.delete-button.default-label": "Usuń produkt",
  "store/product-list.priceChanged": "Zmieniono",
  "store/product-list.priceOptions": "Opcje cenowe",
  "store/product-list.changePrice": "Zmień cenę",
  "store/product-list.revertToOriginal": "Przywróć oryginalne",
  "store/product-list.originalPrice": "Oryginalna cena",
  "store/product-list.changeTo": "Zmień na",
  "store/product-list.manualPricePlaceholder": "Wpisz wartość pieniężną",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Ten produkt jest sprzedawany według ułamków {unitMultiplier}{measurementUnit}. Biorąc to pod uwagę, wstawiona ilość została zaokrąglona do {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Ilość produktu",
  "store/product-list.quantityStepper.increaseQuantity": "Zwiększ ilość",
  "store/product-list.quantityStepper.decreaseQuantity": "Zmniejsz ilość"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "за {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# наявний товар} few {# наявні товари} many {# наявних товарів} other {# наявних товарів}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# товар недоступний} few {# товари недоступні} many {# товарів недоступні} other {# товарів недоступні}}",
  "store/product-list.message.cantBeDelivered": "Цей товар не можна доставити за вказаною адресою.",
  "store/product-list.message.noLongerAvailable": "Товар більше не доступний.",
  "store/product-list.message.remove": "прибрати",
  "store/product-list.quantity-selector.remove": "Видалити",
  "store/product-list.quantity-label": "{quantity} шт.",
  "store/product-list.delete-button.default-label": "Видалити товар",
  "store/product-list.priceChanged": "Змінено",
  "store/product-list.priceOptions": "Варіанти вартості",
  "store/product-list.changePrice": "Змінити ціну",
  "store/product-list.revertToOriginal": "Повернутися до початкової",
  "store/product-list.originalPrice": "Початкова ціна",
  "store/product-list.changeTo": "Змінити на",
  "store/product-list.manualPricePlaceholder": "Введіть ціну",
  "store/product-list.applyManualPrice": "добре",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Цей товар продається по {unitMultiplier} {measurementUnit}. Через це введена кількість була округлена до {roundedValue} {measurementUnit}.",
  "store/product-list.quantityStepper.label": "Кількість товару",
  "store/product-list.quantityStepper.increaseQuantity": "Збільшити кількість",
  "store/product-list.quantityStepper.decreaseQuantity": "Зменшити кількість"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "{unitMultiplier} {measurementUnit}당.",
  "store/product-list.availableItems": "{quantity, plural, one {#가능한 제품} other {#개의 가능한 제품}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# 불가한 제품} other {#개의 불가한 제품}}",
  "store/product-list.message.cantBeDelivered": "이 제품은 제공된 주소로 배송할 수 없습니다.",
  "store/product-list.message.noLongerAvailable": "이 제품은 더 이상 사용할 수 없습니다.",
  "store/product-list.message.remove": "제거",
  "store/product-list.quantity-selector.remove": "제거",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "제품 제거",
  "store/product-list.priceChanged": "변경됨",
  "store/product-list.priceOptions": "가격 옵션",
  "store/product-list.changePrice": "가격 변경",
  "store/product-list.revertToOriginal": "본래대로 되돌리기",
  "store/product-list.originalPrice": "정가",
  "store/product-list.changeTo": "변경",
  "store/product-list.manualPricePlaceholder": "통화 값 입력",
  "store/product-list.applyManualPrice": "확인",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "이 제품은 {unitMultiplier}{measurementUnit}의 일부로 판매됩니다. 따라서 삽입된 수량은 {roundedValue}{measurementUnit}로 반올림되었습니다.",
  "store/product-list.quantityStepper.label": "제품 수량",
  "store/product-list.quantityStepper.increaseQuantity": "수량 올리기",
  "store/product-list.quantityStepper.decreaseQuantity": "수량 내리기"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# saatavilla oleva tuote} other {# saatavilla olevaa tuotetta}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# tuote ei saatavilla} other {# tuotetta ei saatavilla}}",
  "store/product-list.message.cantBeDelivered": "Tätä tuotetta ei voida toimittaa antamaasi osoitteeseen.",
  "store/product-list.message.noLongerAvailable": "Tätä tuotetta ei ole enää saatavilla.",
  "store/product-list.message.remove": "poista",
  "store/product-list.quantity-selector.remove": "Poista",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Poista tuote",
  "store/product-list.priceChanged": "Muutettu",
  "store/product-list.priceOptions": "Hinta-asetukset",
  "store/product-list.changePrice": "Muuta hintaa",
  "store/product-list.revertToOriginal": "Palauta alkuperäiseen",
  "store/product-list.originalPrice": "Alkuperäinen hinta",
  "store/product-list.changeTo": "Muuta täksi",
  "store/product-list.manualPricePlaceholder": "Kirjoita rahallinen arvo",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Tätä tuotetta myydään {unitMultiplier}{measurementUnit} murto-osissa. Tämän vuoksi syötetty määrä on pyöristetty summaan {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Tuotemäärä",
  "store/product-list.quantityStepper.increaseQuantity": "Lisää määrää",
  "store/product-list.quantityStepper.decreaseQuantity": "Vähennä määrää"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "на {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# наличен продукт} other {# налични продукта}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# неналичен продукт} other {# неналични продукта}}",
  "store/product-list.message.cantBeDelivered": "Този продукт не може да бъде доставен до предоставения адрес.",
  "store/product-list.message.noLongerAvailable": "Продуктът вече не е наличен.",
  "store/product-list.message.remove": "премахване",
  "store/product-list.quantity-selector.remove": "Премахване",
  "store/product-list.quantity-label": "{quantity} ед.",
  "store/product-list.delete-button.default-label": "Премахване на продукт",
  "store/product-list.priceChanged": "Променено",
  "store/product-list.priceOptions": "Ценови опции",
  "store/product-list.changePrice": "Промяна на цената",
  "store/product-list.revertToOriginal": "Връщане към първоначалното състояние",
  "store/product-list.originalPrice": "Първоначална цена",
  "store/product-list.changeTo": "Промяна на",
  "store/product-list.manualPricePlaceholder": "Вид парична стойност",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Този продукт се продава на части от {unitMultiplier}{measurementUnit}. Предвид това вмъкнатото количество е закръглено на {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Количество продукт",
  "store/product-list.quantityStepper.increaseQuantity": "Увеличаване на количеството",
  "store/product-list.quantityStepper.decreaseQuantity": "Намаляване на количеството"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "za {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# dostupný produkt} few {# dostupné produkty} many {# dostupných produktov} other {# dostupných produktov}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# nedostupný produkt} few {# nedostupné produkty} many {# nedostupných produktov} other {# nedostupných produktov}}",
  "store/product-list.message.cantBeDelivered": "Tento produkt nie je možné doručiť na uvedenú adresu.",
  "store/product-list.message.noLongerAvailable": "Tento produkt už nie je dostupný.",
  "store/product-list.message.remove": "odstrániť",
  "store/product-list.quantity-selector.remove": "Odstrániť",
  "store/product-list.quantity-label": "{quantity} kus.",
  "store/product-list.delete-button.default-label": "Odstrániť produkt",
  "store/product-list.priceChanged": "Zmenené",
  "store/product-list.priceOptions": "Možnosti ceny",
  "store/product-list.changePrice": "Zmeniť cenu",
  "store/product-list.revertToOriginal": "Vrátiť sa k pôvodnej možnosti",
  "store/product-list.originalPrice": "Pôvodná cena",
  "store/product-list.changeTo": "Zmeniť na",
  "store/product-list.manualPricePlaceholder": "Zadajte peňažnú hodnotu",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Tento produkt sa predáva v násobkoch {unitMultiplier}{measurementUnit}. Vzhľadom na to bolo vložené množstvo zaokrúhlené na {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Množstvo produktu",
  "store/product-list.quantityStepper.increaseQuantity": "Zvýšiť množstvo",
  "store/product-list.quantityStepper.decreaseQuantity": "Znížiť množstvo"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# produk tersedia} other {# produk tersedia}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# produk tersedia} other {# produk tersedia}}",
  "store/product-list.message.cantBeDelivered": "Produk ini tidak dapat dikirim ke alamat yang diberikan.",
  "store/product-list.message.noLongerAvailable": "Produk ini tidak tersedia lagi.",
  "store/product-list.message.remove": "hapus",
  "store/product-list.quantity-selector.remove": "Hapus",
  "store/product-list.quantity-label": "{quantity} unit",
  "store/product-list.delete-button.default-label": "Hapus Produk",
  "store/product-list.priceChanged": "Berubah",
  "store/product-list.priceOptions": "Opsi harga",
  "store/product-list.changePrice": "Ubah harga",
  "store/product-list.revertToOriginal": "Kembalikan ke aslinya",
  "store/product-list.originalPrice": "Harga asli",
  "store/product-list.changeTo": "Ubah ke",
  "store/product-list.manualPricePlaceholder": "Ketik nilai uang",
  "store/product-list.applyManualPrice": "oke",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Produk ini dijual berdasarkan pecahan {unitMultiplier}{measurementUnit}. Karenanya, jumlah yang dimasukkan telah dibulatkan ke {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Jumlah produk",
  "store/product-list.quantityStepper.increaseQuantity": "Naikkan jumlah",
  "store/product-list.quantityStepper.decreaseQuantity": "Turunkan jumlah"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "por {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# produto disponível} other {# produtos disponíveis}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# produto indisponível} other {# produtos indisponíveis}}",
  "store/product-list.message.cantBeDelivered": "Este produto não pode ser entregue no endereço fornecido.",
  "store/product-list.message.noLongerAvailable": "Este produto não está mais disponível.",
  "store/product-list.message.remove": "remover",
  "store/product-list.quantity-selector.remove": "Remover",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Remover Produto",
  "store/product-list.priceChanged": "Alterado",
  "store/product-list.priceOptions": "Opções de preço",
  "store/product-list.changePrice": "Alterar preço",
  "store/product-list.revertToOriginal": "Reverter preço",
  "store/product-list.originalPrice": "Preço original",
  "store/product-list.changeTo": "Alterar para",
  "store/product-list.manualPricePlaceholder": "Digite um valor",
  "store/product-list.applyManualPrice": "Aplicar",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Esse produto é vendido por frações de {unitMultiplier}{measurementUnit}. Por isso, a quantidade inserida foi arredondada para {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Quantidade do produto",
  "store/product-list.quantityStepper.increaseQuantity": "Aumentar quantidade",
  "store/product-list.quantityStepper.decreaseQuantity": "Decrementar quantidade"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "لكل {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# منتج متاح} other {# منتجات متاحة}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# منتج غير متاح} other {# منتجات غير متاحة}}",
  "store/product-list.message.cantBeDelivered": "لا يمكن توصيل هذا المنتج إلى العنوان المقدم.",
  "store/product-list.message.noLongerAvailable": "هذا المنتج لم يعد متاحًا.",
  "store/product-list.message.remove": "حذف",
  "store/product-list.quantity-selector.remove": "حذف",
  "store/product-list.quantity-label": "{quantity}.",
  "store/product-list.delete-button.default-label": "حذف منتج",
  "store/product-list.priceChanged": "تبديل",
  "store/product-list.priceOptions": "خيارات السعر",
  "store/product-list.changePrice": "تغيير السعر",
  "store/product-list.revertToOriginal": "تحويل إلى الأصلي",
  "store/product-list.originalPrice": "السعر الأصلي",
  "store/product-list.changeTo": "تغيير إلى",
  "store/product-list.manualPricePlaceholder": "اكتب قيمة نقدية",
  "store/product-list.applyManualPrice": "موافق",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "يُباع هذا المنتج بأجزاء من {unitMultiplier}{measurementUnit}. بالنظر إلى ذلك، تم تقريب الكمية المدرجة إلى {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "كمية المنتج",
  "store/product-list.quantityStepper.increaseQuantity": "زيادة الكمية",
  "store/product-list.quantityStepper.decreaseQuantity": "إنقاص الكمية"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# available product} other {# available products}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# unavailable product} other {# unavailable products}}",
  "store/product-list.message.cantBeDelivered": "This product cannot be delivered to the address provided.",
  "store/product-list.message.noLongerAvailable": "This product is no longer available.",
  "store/product-list.message.remove": "remove",
  "store/product-list.quantity-selector.remove": "Remove",
  "store/product-list.quantity-label": "{quantity} unit(s)",
  "store/product-list.delete-button.default-label": "Remove Product",
  "store/product-list.priceChanged": "Changed",
  "store/product-list.priceOptions": "Price options",
  "store/product-list.changePrice": "Change Price",
  "store/product-list.revertToOriginal": "Revert to Original",
  "store/product-list.originalPrice": "Original price",
  "store/product-list.changeTo": "Change to",
  "store/product-list.manualPricePlaceholder": "Enter an amount",
  "store/product-list.applyManualPrice": "OK",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "This product is sold by fractions of {unitMultiplier}{measurementUnit}. That is why the entered quantity has been rounded to {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Product quantity",
  "store/product-list.quantityStepper.increaseQuantity": "Increase quantity",
  "store/product-list.quantityStepper.decreaseQuantity": "Decrease quantity"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "/ {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# termék érhető el} other {# termék érhető el}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# termék nem érhető el} other {# termék nem érhető el}}",
  "store/product-list.message.cantBeDelivered": "Ez a termék nem kézbesíthető a megadott címre.",
  "store/product-list.message.noLongerAvailable": "Ez a termék már nem érhető el.",
  "store/product-list.message.remove": "eltávolítás",
  "store/product-list.quantity-selector.remove": "Eltávolítás",
  "store/product-list.quantity-label": "{quantity} egység",
  "store/product-list.delete-button.default-label": "Termék eltávolítása",
  "store/product-list.priceChanged": "Módosítva",
  "store/product-list.priceOptions": "Árlehetőségek",
  "store/product-list.changePrice": "Ár módosítása",
  "store/product-list.revertToOriginal": "Visszaállítás ez eredetire",
  "store/product-list.originalPrice": "Eredeti ár",
  "store/product-list.changeTo": "Módosítás a következőre:",
  "store/product-list.manualPricePlaceholder": "Írja be a pénzbeli értéket",
  "store/product-list.applyManualPrice": "rendben",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Ezt a terméket {unitMultiplier}{measurementUnit} kiadásokban értékesítik. Ezért a megadott mennyiség kerekítésre került: {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Termékmennyiség",
  "store/product-list.quantityStepper.increaseQuantity": "Mennyiség növelése",
  "store/product-list.quantityStepper.decreaseQuantity": "Mennyiség csökkentése"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# prodotto disponibile} other {# prodotti disponibili}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# prodotto non disponibile} other {# prodotti non disponibili}}",
  "store/product-list.message.cantBeDelivered": "Questo prodotto non può essere consegnalo presso l'indirizzo indicato.",
  "store/product-list.message.noLongerAvailable": "Questo prodotto non è più disponibile.",
  "store/product-list.message.remove": "rimuovi",
  "store/product-list.quantity-selector.remove": "Rimuovi",
  "store/product-list.quantity-label": "{quantity}.",
  "store/product-list.delete-button.default-label": "Rimuovi prodotto",
  "store/product-list.priceChanged": "Modificato",
  "store/product-list.priceOptions": "Opzioni di prezzo",
  "store/product-list.changePrice": "Modifica il prezzo",
  "store/product-list.revertToOriginal": "Ripristina l'originale",
  "store/product-list.originalPrice": "Prezzo originale",
  "store/product-list.changeTo": "Modifica in",
  "store/product-list.manualPricePlaceholder": "Inserisci una valuta",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Questo prodotto è venduto per frazioni di {unitMultiplier}{measurementUnit}. Per questo motivo, la quantità inserita è stata arrotondata a {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Quantità del prodotto",
  "store/product-list.quantityStepper.increaseQuantity": "Aumenta la quantità",
  "store/product-list.quantityStepper.decreaseQuantity": "Riduci la quantità"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# tilgjengelig produkt} other {# tilgjengelige produkter}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# tilgjengelig produkt} other {# tilgjengelige produkter}}",
  "store/product-list.message.cantBeDelivered": "Dette produktet kan ikke leveres til den oppgitte adressen.",
  "store/product-list.message.noLongerAvailable": "Produktet er ikke lenger tilgjengelig.",
  "store/product-list.message.remove": "fjern",
  "store/product-list.quantity-selector.remove": "Fjern",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Fjern produkt",
  "store/product-list.priceChanged": "Endret",
  "store/product-list.priceOptions": "Prisalternativer",
  "store/product-list.changePrice": "Endre pris",
  "store/product-list.revertToOriginal": "Gå tilbake til originalen",
  "store/product-list.originalPrice": "Opprinnelig pris",
  "store/product-list.changeTo": "Endre til",
  "store/product-list.manualPricePlaceholder": "Skriv inn en pengeverdi",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Dette produktet selges i brøkdeler av {unitMultiplier}{measurementUnit}. Gitt at det innsatte antallet har blitt avrundet til {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Produktantall",
  "store/product-list.quantityStepper.increaseQuantity": "Øk antall",
  "store/product-list.quantityStepper.decreaseQuantity": "Reduser antall"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# tillgänglig produkt} other {# tillgängliga produkter}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# otillgänglig produkt} other {# otillgängliga produkter}}",
  "store/product-list.message.cantBeDelivered": "Denna produkt kan inte levereras till den angivna adressen.",
  "store/product-list.message.noLongerAvailable": "Produkten är inte längre tillgänglig.",
  "store/product-list.message.remove": "ta bort",
  "store/product-list.quantity-selector.remove": "Ta bort",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Ta bort produkten",
  "store/product-list.priceChanged": "Förändrad",
  "store/product-list.priceOptions": "Prisalternativ",
  "store/product-list.changePrice": "Ändra priset",
  "store/product-list.revertToOriginal": "Återställ till original",
  "store/product-list.originalPrice": "Ordinarie pris",
  "store/product-list.changeTo": "Byt till",
  "store/product-list.manualPricePlaceholder": "Skriv in ett monetärt värde",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Denna produkt säljs med bråkdelar av {unitMultiplier}{measurementUnit}. Eftersom den insatta kvantiteten har avrundats till {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Produktkvantitet",
  "store/product-list.quantityStepper.increaseQuantity": "Öka kvantiteten",
  "store/product-list.quantityStepper.decreaseQuantity": "Minska kvantiteten"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "store/product-list.pricePerUnit": "{price} {perMeasurementUnit}",
  "store/product-list.pricePerUnit.measurementUnit": "per {unitMultiplier} {measurementUnit}.",
  "store/product-list.availableItems": "{quantity, plural, one {# produs disponibil} other {# produse disponibile}}",
  "store/product-list.unavailableItems": "{quantity, plural, one {# produs indisponibil} other {# produse indisponibile}}",
  "store/product-list.message.cantBeDelivered": "Acest produs nu poate fi livrat la adresa furnizată.",
  "store/product-list.message.noLongerAvailable": "Acest produs nu este mai este disponibil.",
  "store/product-list.message.remove": "înlătură",
  "store/product-list.quantity-selector.remove": "Șterge",
  "store/product-list.quantity-label": "{quantity} un.",
  "store/product-list.delete-button.default-label": "Șterge produsul",
  "store/product-list.priceChanged": "Modificat",
  "store/product-list.priceOptions": "Opțiuni preț",
  "store/product-list.changePrice": "Modifică prețul",
  "store/product-list.revertToOriginal": "Revino la original",
  "store/product-list.originalPrice": "Preț original",
  "store/product-list.changeTo": "Schimbă în",
  "store/product-list.manualPricePlaceholder": "Introdu o valoare monetară",
  "store/product-list.applyManualPrice": "ok",
  "store/product-list.quantitySelector.label": "{quantity} {measurementUnit}",
  "store/product-list.quantitySelector.maxValueLabel": "{quantity} {measurementUnit} +",
  "store/product-list.quantityUnitMultiplierMismatch": "Produsul este vândut prin fracțiuni de {unitMultiplier}{measurementUnit}. În aceste condiții, cantitatea introdusă a fost rotunjită la {roundedValue}{measurementUnit}.",
  "store/product-list.quantityStepper.label": "Cantitate produs",
  "store/product-list.quantityStepper.increaseQuantity": "Crește cantitatea",
  "store/product-list.quantityStepper.decreaseQuantity": "Scade cantitatea"
}

```