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

[User] Show me the implementation of components-financial-commission/react/components/SellerOrders/index.tsx from the components-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React, { useEffect, useState } from 'react'
import {
  ButtonWithIcon,
  IconVisibilityOff,
  PageBlock,
  Tag,
} from 'vtex.styleguide'
import { useRuntime } from 'vtex.render-runtime'
import { FormattedMessage } from 'react-intl'
import { useQuery } from 'react-apollo'
import type { DocumentNode } from 'graphql'

import { status } from '../../constants'
import ModalConfirm from '../ModalConfirm'
import TableComponent from '../Table'
import PaginationComponent from '../Table/pagination'

interface DetailProps {
  account?: string
  ordersQuery: DocumentNode
  invoiceMutation: DocumentNode
  settingsQuery: DocumentNode
  sellerName?: string
  startDate?: string
  finalDate?: string
  statusOrders?: string
  setDataRate: (data: dateRateType[]) => void
  sellerId?: string
  setOpenModal?: (open: boolean) => void
  openModal?: boolean
  dataTableOrders: TableOrdersType[]
  setDataTableOrders: (data: TableOrdersType[]) => void
  validRange: boolean
}

const SellerOrders: FC<DetailProps> = ({
  account,
  sellerName,
  ordersQuery,
  settingsQuery,
  startDate,
  finalDate,
  statusOrders,
  setDataRate,
  sellerId,
  invoiceMutation,
  setOpenModal,
  openModal,
  dataTableOrders,
  setDataTableOrders,
  validRange,
}) => {
  const { query } = useRuntime()
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(20)
  const [itemFrom, setItemFrom] = useState(1)
  const [itemTo, setItemTo] = useState(20)
  const [totalItems, setTotalItems] = useState(0)
  const [integration, setIntegration] = useState('')

  const { data: settings } = useQuery(settingsQuery, {
    ssr: false,
    pollInterval: 0,
  })

  useEffect(() => {
    if (settings) {
      setIntegration(settings.getSettings.integration)
    }
  }, [settings])

  const { data: dataOrders, loading: loadingDataOrders } = useQuery(
    ordersQuery,
    {
      ssr: false,
      pollInterval: 0,
      variables: {
        searchOrdersParams: {
          dateStart: startDate,
          dateEnd: finalDate,
          sellerName,
          page,
          perpage: pageSize,
          status: statusOrders,
        },
      },
    }
  )

  const IDCell = (props: CellRendererProps) => {
    return (
      // eslint-disable-next-line jsx-a11y/anchor-is-valid
      <a
        href={`admin/checkout/#/orders/${props.data}`}
        style={{ color: '#0C389F' }}
        target="_blank"
        rel="noreferrer"
      >
        {props.data}
      </a>
    )
  }

  const TotalOrderCell = (props: CellRendererProps) => {
    return <span>${props.data}</span>
  }

  const TotalCommissionCell = (props: CellRendererProps) => {
    return <span>${props.data}</span>
  }

  const RateCell = (props: any) => {
    return (
      <div>
        <ButtonWithIcon
          icon={<IconVisibilityOff />}
          variation="tertiary"
          onClick={() => {
            if (setOpenModal) setOpenModal(!openModal)
            setDataRate(props.data)
          }}
        />
      </div>
    )
  }

  const StatusCell = (props: any) => {
    return (
      <Tag bgColor={props.data.bgColor} color={props.data.fontColor}>
        {props.data.status}
      </Tag>
    )
  }

  const schemaTable = [
    {
      id: 'id',
      title: <FormattedMessage id="admin/table-seller-order" />,
      cellRenderer: IDCell,
    },
    {
      id: 'creationDate',
      title: <FormattedMessage id="admin/table-creation-order" />,
    },
    {
      id: 'totalOrder',
      title: <FormattedMessage id="admin/table-total-order" />,
      cellRenderer: TotalOrderCell,
    },
    {
      id: 'totalCommission',
      title: <FormattedMessage id="admin/table-commission-order" />,
      cellRenderer: TotalCommissionCell,
    },
    {
      id: 'rate',
      title: <FormattedMessage id="admin/table-rate-order" />,
      cellRenderer: RateCell,
    },
    {
      id: 'status',
      title: <FormattedMessage id="admin/table-seller-status" />,
      cellRenderer: StatusCell,
    },
  ]

  const changeRows = (row: number) => {
    setPageSize(row)
    setItemTo(row)
    setItemFrom(1)
    setPage(1)
  }

  const onNextClick = () => {
    const nextPage = page + 1

    const currentTo = pageSize * nextPage
    const currentFrom = itemTo + 1

    setItemTo(currentTo)
    setItemFrom(currentFrom)
    setPage(nextPage)
  }

  const onPrevClick = () => {
    const previousPage = page - 1

    const currentTo = itemTo - pageSize
    const currentFrom = itemFrom - pageSize

    setItemTo(currentTo)
    setItemFrom(currentFrom)
    setPage(previousPage)
  }

  useEffect(() => {
    if (sellerName === '' && !query?.sellerName) {
      setDataTableOrders([])
      setTotalItems(0)
    }
  }, [query, sellerName, setDataTableOrders])

  useEffect(() => {
    if (dataOrders) {
      const dataTable: TableOrdersType[] = []

      dataOrders.orders.data.forEach((item: TableDataOrder) => {
        const keyColor = Object.keys(status).find(
          (itemStatus: string) => itemStatus === item.status
        )

        dataTable.push({
          id: account ? item.sellerOrderId : item.orderId,
          creationDate: item.creationDate.substring(
            0,
            item.creationDate.indexOf('T')
          ),
          totalOrder: item.totalOrderValue,
          totalCommission: item.totalComission,
          rate: item.rate,
          status: {
            status: item.status,
            bgColor: keyColor ? status[keyColor].bgColor : '',
            fontColor: keyColor ? status[keyColor].fontColor : '',
          },
        })
      })
      if (sellerName === '') setDataTableOrders([])
      else setDataTableOrders(dataTable)
      setTotalItems(dataOrders.orders.paging.total)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dataOrders, sellerName])

  return (
    <PageBlock>
      {account ? null : (
        <ModalConfirm
          integration={integration}
          invoiceMutation={invoiceMutation}
          disabled={
            !(
              statusOrders === 'invoiced' &&
              dataOrders?.orders.data.length &&
              validRange
            )
          }
          buttonMessage={
            <FormattedMessage id="admin/form-settings.button-invoice" />
          }
          messages={{
            warning: <FormattedMessage id="admin/modal-setting.warning" />,
            confirmation: (
              <FormattedMessage id="admin/modal-setting.confirmation" />
            ),
          }}
          sellerData={{
            startDate: startDate ?? '',
            finalDate: finalDate ?? '',
            sellerName: sellerName ?? '',
            id: sellerId ?? '',
          }}
        />
      )}
      <div className="mt2">
        <TableComponent
          schemaTable={schemaTable}
          items={dataTableOrders}
          loading={loadingDataOrders}
        />
        <PaginationComponent
          setPageSize={setPageSize}
          currentPage={itemFrom}
          pageSize={itemTo}
          setPage={setPage}
          totalItems={totalItems}
          onNextClick={onNextClick}
          changeRows={changeRows}
          onPrevClick={onPrevClick}
        />
      </div>
    </PageBlock>
  )
}

export default SellerOrders

```


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

[User] Show me the implementation of components-financial-commission/react/components/ModalConfirm/index.tsx from the components-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React, { useState } from 'react'
import { useMutation } from 'react-apollo'
import { FormattedMessage } from 'react-intl'
import { Alert, Button, Input, ModalDialog, Spinner } from 'vtex.styleguide'

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

const ModalConfirm: FC<ModalConfirmData> = (props) => {
  const [email, setEmail] = useState('')
  const [isModalOpen, setIsModalOpen] = useState(false)
  const [validEmail, setValidEmail] = useState(true)
  const [empty, setEmpty] = useState(true)

  const EMAIL_PATTERN = /^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/

  const checkEmail = (emailAddress: string) => {
    const valid = EMAIL_PATTERN.test(emailAddress)

    if (!emailAddress) {
      setEmpty(true)

      return
    }

    setEmpty(false)
    if (!valid) {
      setValidEmail(false)
    } else {
      setValidEmail(true)
    }
  }

  const [createInvoice, { data, loading, error }] = useMutation(
    props.invoiceMutation
  )

  const getErrorMessage = () => {
    if (empty) {
      return <FormattedMessage id="admin/modal-settings.email-empty" />
    }

    if (!validEmail) {
      return <FormattedMessage id="admin/modal-settings.email-invalid" />
    }

    return null
  }

  const handleCreateInvoice = (
    startDate: string,
    finalDate: string,
    name: string,
    id: string,
    emailAddress: string
    // eslint-disable-next-line max-params
  ) => {
    // eslint-disable-next-line @typescript-eslint/no-use-before-define
    createInvoice({
      variables: {
        invoiceData: {
          name,
          id,
          email: emailAddress,
          startDate,
          endDate: finalDate,
        },
      },
    })
  }

  if (loading) {
    return (
      <div className="mb5 flex justify-center">
        <Spinner />
      </div>
    )
  }

  if (data) {
    return (
      <Alert type="success">
        {<FormattedMessage id="admin/invoice-success" />}
      </Alert>
    )
  }

  if (error) {
    return (
      <Alert type="error">
        {<FormattedMessage id="admin/invoice-error" />}
      </Alert>
    )
  }

  return (
    <>
      <ModalDialog
        centered
        confirmation={{
          disabled: true,
          onClick: () => {
            if (empty || !validEmail) {
              return
            }

            handleCreateInvoice(
              props.sellerData.startDate,
              props.sellerData.finalDate,
              props.sellerData.sellerName,
              props.sellerData.id,
              email
            )
            setIsModalOpen(!isModalOpen)
          },
          label: 'Confirm',
        }}
        cancelation={{
          onClick: () => setIsModalOpen(!isModalOpen),
          label: 'Cancel',
        }}
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(!isModalOpen)}
      >
        <div>
          <p>{props.messages.warning}</p>
          <p>{props.messages.confirmation}</p>
          <div>
            <Input
              placeholder="e-mail"
              size="large"
              value={email}
              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                setEmail(e.target.value)
                checkEmail(e.target.value)
              }}
              errorMessage={getErrorMessage()}
            />
          </div>
        </div>
      </ModalDialog>

      {props.integration !== 'internal' ? null : (
        <div className="mb5 justify-end flex items-end items-center">
          {!props.disabled ? (
            ''
          ) : (
            <div className={`ph5 ${styles.large}`}>
              <Alert type="warning">
                <FormattedMessage id="admin/form-settings.invalid-invoice" />
              </Alert>
            </div>
          )}
          <Button
            onClick={() => {
              setIsModalOpen(!isModalOpen)
            }}
            disabled={props.disabled}
            variation="success"
          >
            {props.buttonMessage}
          </Button>
        </div>
      )}

      <div className="mb5 flex justify-end items-end" />
    </>
  )
}

export default ModalConfirm

```


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

[User] Show me the implementation of components-financial-commission/react/components/EmptyTable/index.tsx from the components-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'
import { EmptyState } from 'vtex.styleguide'
import { FormattedMessage } from 'react-intl'

const EmptyTable: FC = () => {
  return (
    <div className="mt5">
      <EmptyState title={<FormattedMessage id="admin/table.empty-state" />}>
        <p>
          <FormattedMessage id="admin/table.empty-state-title" />
        </p>
      </EmptyState>
    </div>
  )
}

export default EmptyTable

```


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

[User] Show me the implementation of components-financial-commission/react/components/Table/index.tsx from the components-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'
import {
  EXPERIMENTAL_Table as Table,
  EXPERIMENTAL_useTableMeasures as useTableMeasures,
  Spinner,
  EXPERIMENTAL_useTableSort as useTableSort,
} from 'vtex.styleguide'

import EmptyTable from '../EmptyTable'

const TableV2: FC<TableData> = (props) => {
  const measures = useTableMeasures({ size: props.items.length })
  const sorting = useTableSort()
  let hiddenColumns = [...props.schemaTable]

  if (props.hiddenColumn?.length) {
    hiddenColumns = hiddenColumns.filter(
      (val: SchemaTable) => !props.hiddenColumn?.includes(val.id)
    )
  }

  if (sorting.sorted.by && sorting.sorted.order) props.sorting(sorting.sorted)

  const ColumnsExample = () => {
    return (
      <div>
        {props.items.length > 0 ? (
          <Table
            measures={measures}
            items={props.items}
            columns={
              props.hiddenColumn?.length ? hiddenColumns : props.schemaTable
            }
            highlightOnHover
            sorting={sorting}
          />
        ) : (
          <EmptyTable />
        )}
      </div>
    )
  }

  if (props.loading) {
    return (
      <div className="tc">
        <Spinner />
      </div>
    )
  }

  return <ColumnsExample />
}

export default TableV2

```


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

[User] Show me the implementation of components-financial-commission/react/components/Table/pagination.tsx from the components-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'
import { Pagination } from 'vtex.styleguide'
import { FormattedMessage } from 'react-intl'

const PaginationComponent: FC<PaginationProps> = (props) => {
  return (
    <div>
      {props.totalItems > 0 ? (
        <Pagination
          rowsOptions={[20, 30, 40, 50]}
          currentItemFrom={props.currentPage}
          currentItemTo={props.pageSize}
          textOf={<FormattedMessage id="admin/table.pagination-textOf" />}
          textShowRows={<FormattedMessage id="admin/table.pagination-show" />}
          totalItems={props.totalItems}
          onRowsChange={(e: React.ChangeEvent<HTMLInputElement>) =>
            props.changeRows(parseInt(e.target.value, 10))
          }
          onNextClick={() => props.onNextClick()}
          onPrevClick={() => props.onPrevClick()}
        />
      ) : (
        <div />
      )}
    </div>
  )
}

export default PaginationComponent

```


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

[User] Show me the implementation of components-financial-commission/react/components/Orders/index.tsx from the components-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { DocumentNode } from 'graphql'
import type { FC } from 'react'
import React, { useEffect, useState } from 'react'
import { useLazyQuery } from 'react-apollo'
import { FormattedMessage } from 'react-intl'
import {
  ButtonWithIcon,
  IconVisibilityOff,
  PageBlock,
  Tag,
} from 'vtex.styleguide'

import { status } from '../../constants'
import ModalConfirm from '../ModalConfirm'
import TableComponent from '../Table'
import PaginationComponent from '../Table/pagination'

interface DetailProps {
  account?: string
  ordersQuery: DocumentNode
  invoiceMutation: DocumentNode
  sellerName?: string
  startDate?: string
  finalDate?: string
  statusOrders?: string
  setDataRate: (data: dateRateType[]) => void
  sellerId?: string
  setOpenModal?: (open: boolean) => void
  openModal?: boolean
  dataTableOrders: TableOrdersType[]
  setDataTableOrders: (data: TableOrdersType[]) => void
  validRange: boolean
}

const Orders: FC<DetailProps> = ({
  account,
  sellerName,
  ordersQuery,
  startDate,
  finalDate,
  statusOrders,
  setDataRate,
  sellerId,
  invoiceMutation,
  setOpenModal,
  openModal,
  dataTableOrders,
  setDataTableOrders,
  validRange,
}) => {
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(20)
  const [itemFrom, setItemFrom] = useState(1)
  const [itemTo, setItemTo] = useState(20)
  const [totalItems, setTotalItems] = useState(0)

  const [
    getDataOrders,
    { data: dataOrders, loading: loadingDataOrders },
  ] = useLazyQuery(ordersQuery, {
    ssr: false,
    pollInterval: 0,
    variables: {
      searchOrdersParams: {
        dateStart: startDate,
        dateEnd: finalDate,
        sellerName,
        page,
        perpage: pageSize,
        status: statusOrders,
      },
    },
  })

  const IDCell = (props: CellRendererProps) => {
    return (
      // eslint-disable-next-line jsx-a11y/anchor-is-valid
      <a
        href={`admin/checkout/#/orders/${props.data}`}
        style={{ color: '#0C389F' }}
        target="_blank"
        rel="noreferrer"
      >
        {props.data}
      </a>
    )
  }

  const TotalOrderCell = (props: CellRendererProps) => {
    return <span>${props.data}</span>
  }

  const TotalCommissionCell = (props: CellRendererProps) => {
    return <span>${props.data}</span>
  }

  const RateCell = (props: any) => {
    return (
      <div>
        <ButtonWithIcon
          icon={<IconVisibilityOff />}
          variation="tertiary"
          onClick={() => {
            if (setOpenModal) setOpenModal(!openModal)
            setDataRate(props.data)
          }}
        />
      </div>
    )
  }

  const StatusCell = (props: any) => {
    return (
      <Tag bgColor={props.data.bgColor} color={props.data.fontColor}>
        {props.data.status}
      </Tag>
    )
  }

  const schemaTable = [
    {
      id: 'id',
      title: <FormattedMessage id="admin/table-seller-order" />,
      cellRenderer: IDCell,
    },
    {
      id: 'creationDate',
      title: <FormattedMessage id="admin/table-creation-order" />,
    },
    {
      id: 'totalOrder',
      title: <FormattedMessage id="admin/table-total-order" />,
      cellRenderer: TotalOrderCell,
    },
    {
      id: 'totalCommission',
      title: <FormattedMessage id="admin/table-commission-order" />,
      cellRenderer: TotalCommissionCell,
    },
    {
      id: 'rate',
      title: <FormattedMessage id="admin/table-rate-order" />,
      cellRenderer: RateCell,
    },
    {
      id: 'status',
      title: <FormattedMessage id="admin/table-seller-status" />,
      cellRenderer: StatusCell,
    },
  ]

  const changeRows = (row: number) => {
    setPageSize(row)
    setItemTo(row)
    setItemFrom(1)
    setPage(1)
  }

  const onNextClick = () => {
    const nextPage = page + 1

    const currentTo = pageSize * nextPage
    const currentFrom = itemTo + 1

    setItemTo(currentTo)
    setItemFrom(currentFrom)
    setPage(nextPage)
  }

  const onPrevClick = () => {
    const previousPage = page - 1

    const currentTo = itemTo - pageSize
    const currentFrom = itemFrom - pageSize

    setItemTo(currentTo)
    setItemFrom(currentFrom)
    setPage(previousPage)
  }

  useEffect(() => {
    getDataOrders()
    // eslint-disable-next-line vtex/prefer-early-return
    if (dataOrders) {
      const dataTable: TableOrdersType[] = []

      dataOrders.orders.data.forEach((item: TableDataOrder) => {
        const keyColor = Object.keys(status).find(
          (itemStatus: string) => itemStatus === item.status
        )

        dataTable.push({
          id: account ? item.sellerOrderId : item.orderId,
          creationDate: item.creationDate.substring(
            0,
            item.creationDate.indexOf('T')
          ),
          totalOrder: item.totalOrderValue,
          totalCommission: item.totalComission,
          rate: item.rate,
          status: {
            status: item.status,
            bgColor: keyColor ? status[keyColor].bgColor : '',
            fontColor: keyColor ? status[keyColor].fontColor : '',
          },
        })
      })
      setDataTableOrders(dataTable)
      setTotalItems(dataOrders.orders.paging.total)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dataOrders, sellerName])

  return (
    <PageBlock>
      {account ? null : (
        <ModalConfirm
          invoiceMutation={invoiceMutation}
          disabled={
            !(
              statusOrders === 'invoiced' &&
              dataOrders?.orders.data.length &&
              validRange
            )
          }
          buttonMessage={
            <FormattedMessage id="admin/form-settings.button-invoice" />
          }
          messages={{
            warning: <FormattedMessage id="admin/modal-setting.warning" />,
            confirmation: (
              <FormattedMessage id="admin/modal-setting.confirmation" />
            ),
          }}
          sellerData={{
            startDate: startDate ?? '',
            finalDate: finalDate ?? '',
            sellerName: sellerName ?? '',
            id: sellerId ?? '',
          }}
        />
      )}
      <div className="mt2">
        <TableComponent
          schemaTable={schemaTable}
          items={dataTableOrders}
          loading={loadingDataOrders}
        />
        <PaginationComponent
          setPageSize={setPageSize}
          currentPage={itemFrom}
          pageSize={itemTo}
          setPage={setPage}
          totalItems={totalItems}
          onNextClick={onNextClick}
          changeRows={changeRows}
          onPrevClick={onPrevClick}
        />
      </div>
    </PageBlock>
  )
}

export default Orders

```


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

[User] Show me the implementation of components-financial-commission/react/components/Filter/index.tsx from the components-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React, { useState, useEffect } from 'react'
import {
  ButtonWithIcon,
  IconFilter,
  IconDelete,
  ButtonGroup,
} from 'vtex.styleguide'
import { useRuntime } from 'vtex.render-runtime'
import { FormattedMessage } from 'react-intl'
import { SelectComponent, DatePickerComponent } from './itemsFilter'
import { getDateString, firstDay, yesterday, today, filterEmptyObj, filterSellerValues } from '../../utils/calculateDate'

const Filter: FC<FilterProps> = (props) => {
  const { query, setQuery } = useRuntime()
  const [dataFilter, setDataFilter] = useState<DateFilter>({
    startDateFilter: firstDay,
    finalDateFilter: props.defaultDate?.today ? today : yesterday,
    dataFilter: [],
    statusFilter: []
  })

  useEffect(() => {
    if (props.optionsSelect.length > 0) {
      let filterQuery = []
      let filterQueryStatus = []
      if (query.sellerName) {
        const separateString = query.sellerName.split(",")
        filterQuery = separateString.map((seller: any) => props.optionsSelect.find((nameQuery) => nameQuery.label === seller))
      }

      if (query.status && props.optionsStatus) {
        const separateString = query.status.split(",")
        filterQueryStatus = separateString.map((seller: any) => props.optionsStatus?.find((nameQuery) => nameQuery.label === seller))
      }
      setDataFilter({ ...dataFilter, statusFilter: filterQueryStatus, dataFilter: filterQuery })
      changesValuesTable(filterQuery, filterQueryStatus)
    }

  }, [props.optionsSelect])

  const changesValuesTable = (dataFilterValues?: SellerSelect[], dataFilterStatus?: SellerSelect[]) => {
    let response: ResponseFilter = { stringId: '', sellerFilter: '', countTotalItems: 0, sellerId:''  }, stringStatus = ''
    if (dataFilterValues?.length) response = filterSellerValues(dataFilterValues, props.setStatusOrders ? true : false)
    else response = filterSellerValues(dataFilter.dataFilter, props.setStatusOrders ? true : false)

    if (dataFilterStatus?.length) {
      dataFilterStatus.forEach((status) => {
        stringStatus += `${status.label},`
      })
    } else {
      dataFilter.statusFilter.forEach((status) => {
        stringStatus += `${status.label},`
      })
    }

    props.filterDates && props.filterDates(getDateString(dataFilter.startDateFilter), getDateString(dataFilter.finalDateFilter))
    props.setSellerId(response.stringId.slice(0, -1))
    props.setId && props.setId(response.sellerId.slice(0, -1))
    props.setStatusOrders && props.setStatusOrders(stringStatus.slice(0, -1))
    props.setTotalItems && props.setTotalItems(response.countTotalItems)

    let queryObj = { sellerName: response.sellerFilter.slice(0, -1), status: stringStatus.slice(0, -1), startDate: props.defaultDate ? getDateString(dataFilter.startDateFilter) : '', finalDate: props.defaultDate ? getDateString(dataFilter.finalDateFilter) : '' }
    queryObj = filterEmptyObj(queryObj)
    setQuery(queryObj)
  }

  const modifyDataFilterSeller = (values: SellerSelect[]) => {
    setDataFilter({ ...dataFilter, dataFilter: values })
  }

  const modifyDataFilterStatus = (values: SellerSelect[]) => {
    setDataFilter({ ...dataFilter, statusFilter: values })
  }

  const changeDate = (date: Date, type: string) => {
    if (type === "start") setDataFilter({ ...dataFilter, startDateFilter: date })
    else if (type === "final") setDataFilter({ ...dataFilter, finalDateFilter: date })
  }

  const cleanFilter = () => {
    const lastDate = props.defaultDate?.today ? today : yesterday
    setDataFilter({ ...dataFilter, dataFilter: [], startDateFilter: firstDay, finalDateFilter: lastDate, statusFilter: [] })
    props.filterDates && props.filterDates(getDateString(firstDay), getDateString(lastDate))
    props.setSellerId('')
    props.setTotalItems && props.setTotalItems(0)
    setQuery({ sellerName: undefined, status: undefined, startDate: undefined, finalDate: undefined })
  }

  return (
    <div className="flex flex-wrap pa0">
      {!props.disableSelect && (
        <div className="w-100">
          <SelectComponent
            options={props.optionsSelect}
            dataFilter={dataFilter.dataFilter}
            setDataFilter={modifyDataFilterSeller}
            multi={props.multiValue}
            customLabel={
              <FormattedMessage id="admin/table.title-seller-label" />
            }
          />
        </div>
      )}
      {props.optionsStatus && (
        <div className="w-100 pt5 mb3">
          <SelectComponent
            options={props.optionsStatus}
            dataFilter={dataFilter.statusFilter}
            setDataFilter={modifyDataFilterStatus}
            multi
            customLabel={
              <FormattedMessage id="admin/table.title-status-label" />
            }
          />
        </div>
      )}
      <div className="flex-ns w-100 justify-around items-end justify-end">
        <div className="w-100-ns pt2 pr2">
          {props.defaultDate && <DatePickerComponent
            startDatePicker={dataFilter.startDateFilter}
            changeDate={changeDate}
            finalDatePicker={dataFilter.finalDateFilter}
            today={props.defaultDate ? props.defaultDate.today : false}
          />}
        </div>
        <div className="pt7 fr z-0">
          <ButtonGroup
            buttons={[
              <ButtonWithIcon
                isActiveOfGroup
                onClick={() => changesValuesTable()}
                icon={<IconFilter />}
                size="small"
              >
                {<FormattedMessage id="admin/table.title-filter" />}
              </ButtonWithIcon>,
              <ButtonWithIcon
                isActiveOfGroup={false}
                size="small"
                onClick={() => cleanFilter()}
                icon={<IconDelete />}
              />,
            ]}
          />
        </div>
      </div>
    </div>
  )
}

export default Filter

```


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

[User] Show me the implementation of components-financial-commission/react/components/Filter/itemsFilter.ts from the components-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```typescript
import SelectComponent from './select'
import DatePickerComponent from './datePicker'

export { SelectComponent, DatePickerComponent }

```


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

[User] Show me the implementation of components-financial-commission/react/components/SellerInvoices/index.tsx from the components-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable react/jsx-key */
import type { DocumentNode } from 'graphql'
import type { FC } from 'react'
import React, { useEffect, useState } from 'react'
import { useQuery } from 'react-apollo'
import { FormattedMessage } from 'react-intl'
import { useRuntime } from 'vtex.render-runtime'
import { PageBlock, Tag } from 'vtex.styleguide'

import { status } from '../../constants'
import TableComponent from '../Table'
import PaginationComponent from '../Table/pagination'

interface DetailProps {
  invoicesQuery: DocumentNode
  account?: string
  sellerName?: string
  startDate?: string
  finalDate?: string
  dataTableInvoice: Invoice[]
  setDataTableInvoice: (data: Invoice[]) => void
}

const SellerInvoices: FC<DetailProps> = ({
  sellerName,
  invoicesQuery,
  startDate,
  finalDate,
  dataTableInvoice,
  setDataTableInvoice,
}) => {
  const { query } = useRuntime()
  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(20)
  const [itemFrom, setItemFrom] = useState(1)
  const [itemTo, setItemTo] = useState(20)
  const [totalItems, setTotalItems] = useState(0)

  const { data: dataInvoices } = useQuery(invoicesQuery, {
    ssr: false,
    pollInterval: 0,
    variables: {
      sellerInvoiceParams: {
        sellerName,
        dates: {
          startDate,
          endDate: finalDate,
        },
        pagination: {
          page,
          pageSize,
        },
      },
    },
  })

  useEffect(() => {
    if (sellerName === '' && !query?.sellerName) {
      setDataTableInvoice([])
      setTotalItems(0)
    }
  }, [query, sellerName, setDataTableInvoice])

  useEffect(() => {
    if (dataInvoices) {
      setDataTableInvoice(dataInvoices.invoicesBySeller.data)
      setTotalItems(dataInvoices.invoicesBySeller.pagination.total)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dataInvoices, sellerName])

  const schemaTableInvoice = [
    {
      id: 'id',
      title: <FormattedMessage id="admin/table-seller-invoice" />,
      // eslint-disable-next-line react/display-name
      cellRenderer: (props: CellRendererProps) => {
        return (
          // eslint-disable-next-line jsx-a11y/anchor-is-valid
          <a
            href={`/admin/app/commission-report/invoice/${props.data}`}
            style={{ color: '#0C389F' }}
            target="_self"
            rel="noreferrer"
          >
            {props.data}
          </a>
        )
      },
    },
    {
      id: 'invoiceCreatedDate',
      title: <FormattedMessage id="admin/table-seller-created" />,
    },
    {
      id: 'status',
      title: <FormattedMessage id="admin/table-seller-status" />,
      cellRenderer: (props: any) => {
        // eslint-disable-next-line array-callback-return
        const getColor = Object.keys(status).find(
          (itemStatus) => itemStatus === props.data
        )

        const bgColor = getColor ? status[getColor].bgColor : ''
        const fontcolor = getColor ? status[getColor].fontColor : ''

        return (
          <Tag bgColor={bgColor} color={fontcolor}>
            {props.data}
          </Tag>
        )
      },
    },
  ]

  const changeRows = (row: number) => {
    setPageSize(row)
    setItemTo(row)
    setItemFrom(1)
    setPage(1)
  }

  const onNextClick = () => {
    const nextPage = page + 1

    const currentTo = pageSize * nextPage
    const currentFrom = itemTo + 1

    setItemTo(currentTo)
    setItemFrom(currentFrom)
    setPage(nextPage)
  }

  const onPrevClick = () => {
    const previousPage = page - 1

    const currentTo = itemTo - pageSize
    const currentFrom = itemFrom - pageSize

    setItemTo(currentTo)
    setItemFrom(currentFrom)
    setPage(previousPage)
  }

  return (
    <PageBlock>
      <div>
        <TableComponent
          schemaTable={schemaTableInvoice}
          items={dataTableInvoice}
          loading={false}
        />
        <PaginationComponent
          setPageSize={setPageSize}
          currentPage={itemFrom}
          pageSize={itemTo}
          setPage={setPage}
          totalItems={totalItems}
          onNextClick={onNextClick}
          changeRows={changeRows}
          onPrevClick={onPrevClick}
        />
      </div>
    </PageBlock>
  )
}

export default SellerInvoices

```


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

[User] Show me the implementation of components-financial-commission/react/components/Dashboard/Totalizer/index.tsx from the components-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'
import { Totalizer, Spinner } from 'vtex.styleguide'

type TotalizerProps = {
  item: StatsTotalizer[]
  loading: boolean
}

const TotalizerComponent: FC<TotalizerProps> = (props) => {
  if (props.loading) {
    return (
      <div className="tc">
        <Spinner />
      </div>
    )
  }

  return <Totalizer items={props.item} />
}

export default TotalizerComponent

```


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

[User] Show me the implementation of components-financial-commission/react/components/Filter/filterBar/index.tsx from the components-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'
import { FilterBar } from 'vtex.styleguide'

const FilterBarComponent: FC = () => {
  const getSimpleVerbs = () => {
    return [
      {
        label: 'is',
        value: '=',
        object: () => {},
      },
      {
        label: 'is not',
        value: '!=',
        object: () => {},
      },
      {
        label: 'contains',
        value: 'contains',
        object: () => {},
      },
    ]
  }

  return (
    <div>
      <FilterBar
        alwaysVisibleFilters={['totalOrders']}
        statements={[]}
        onChangeStatements={() => {}}
        clearAllFiltersButtonLabel="Clear Filters"
        options={{
          totalOrders: {
            label: 'Total Orders',
            renderFilterLabel: () => 'All',
            verbs: getSimpleVerbs(),
          },
        }}
      />
    </div>
  )
}

export default FilterBarComponent

```


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

[User] Show me the implementation of components-financial-commission/react/components/Filter/datePicker/index.tsx from the components-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'
import { FormattedMessage } from 'react-intl'
import { useRuntime } from 'vtex.render-runtime'
import { DatePicker } from 'vtex.styleguide'
import { addDays } from 'date-fns'

const DatePickerComponent: FC<DatepickerProps> = (props) => {
  const { culture } = useRuntime()
  const numDates = props.today ? 0 : -1

  return (
    <div className="flex flex-nowrap">
      <div id="datepicker-left">
        <DatePicker
          label={<FormattedMessage id="admin/table.title-datepicker-start" />}
          value={props.startDatePicker}
          maxDate={addDays(new Date(), numDates)}
          onChange={(start: Date) => {
            if (props.finalDatePicker.getTime() >= start.getTime())
              props.changeDate(start, 'start')
          }}
          locale={culture.locale}
          size="small"
        />
      </div>
      <div id="datepicker-right">
        <DatePicker
          label={<FormattedMessage id="admin/table.title-datepicker-final" />}
          value={props.finalDatePicker}
          maxDate={addDays(new Date(), numDates)}
          onChange={(final: Date) => {
            if (props.startDatePicker.getTime() <= final.getTime())
              props.changeDate(final, 'final')
          }}
          locale={culture.locale}
          size="small"
        />
      </div>
    </div>
  )
}

export default DatePickerComponent

```


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

[User] Show me the implementation of components-financial-commission/react/components/Filter/select/index.tsx from the components-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'
import { EXPERIMENTAL_Select as Select } from 'vtex.styleguide'

const SelectComponent: FC<SelectProps> = (props) => {
  return (
    <div>
      <Select
        value={props.dataFilter}
        label={props.customLabel}
        options={props.options}
        onChange={(values: SellerSelect[] | SellerSelect) => {
          if (Array.isArray(values)) props.setDataFilter(values)
          else props.setDataFilter([values])
        }}
        valuesMaxHeight={35}
        multi={props.multi}
        size="small"
      />
    </div>
  )
}

export default SelectComponent

```


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

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

[Assistant]
Here's the implementation:

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

Defines Pixel interfaces for other apps. Must be depended by every pixel app.

## Contributors ✨

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

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

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


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

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

[Assistant]
Here's the implementation:

```json
{
  "pixel": {
    "component": "*",
    "extensibility": "enterprise",
    "render": "client"
  },
  "pixels": {
    "component": "vtex.render-runtime/ExtensionContainer",
    "allowed": ["pixel"],
    "render": "client"
  }
}
```


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

[User] Show me the implementation of policies-example-3/messages/pt.json from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin.navigation.label": "Admin do aplicativo de policies"
}

```


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

[User] Show me the implementation of policies-example-3/messages/en.json from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin.navigation.label": "Admin do aplicativo de policies"
}

```


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

[User] Show me the implementation of policies-example-3/messages/es.json from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin.navigation.label": "Admin do aplicativo de policies"
}

```


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

[User] Show me the implementation of policies-example-3/admin/navigation.json from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "section": "other",
  "titleId": "admin.navigation.label",
  "icon": "extensions-ic",
  "path": "/admin/policies-example"
}

```


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

[User] Show me the implementation of policies-example-3/admin/routes.json from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin.app.example": {
    "component": "F1",
    "path": "/admin/app/policies-example"
  }
}

```


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

[User] Show me the implementation of policies-example-3/docs/README.md from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

```markdown
# [Deprecated] Admin Example

_We're working on our new design system. Please get in touch if you are interested._

An example admin app that adds a menu button to the admin sidebar and a navigation via parameter example.

### How to develop admins

1. Admins always declare routes in `/admin/app/<route>`

2. Declare the `admin` builder in your manifest

3. When installed, the user navigates to `/admin/<route>`, but your app runs in an iframe that points to `/admin/app/<route>`.

4. You can develop directly in the `/admin/app` route for convenience, but don't forget to test it inside the iframe. :)

### Quickstart

1. Clone this repo

2. `yarn --cwd react/` for code completion

3. `vtex link`

4. Navigate to `workspace--account.myvtex.com/admin/app/example`

```


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

[User] Show me the implementation of policies-example-3/graphql/schema.graphql from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

```graphql
type ReturnDrivers {
  name: String
  lastName: String
  points: Float
}

type ReturnConstructors {
  name: String
  points: Float
}

type Query {
  getDrivers: [ReturnDrivers]
  getConstructors: [ReturnConstructors]
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "memory": 256,
  "ttl": 10,
  "timeout": 2,
  "minReplicas": 2,
  "maxReplicas": 4,
  "workers": 1
}

```


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

[User] Show me the implementation of policies-example-3/node/package.json from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

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

```


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

[User] Show me the implementation of policies-example-3/node/index.ts from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

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

import type { Clients } from './clients'
import { clients } from './clients'
import { getDrivers } from './resolvers/getDrivers'
import { getConstructors } from './resolvers/getConstructors'

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

// Export a service that defines route handlers and client options.
export default new Service({
  clients,
  graphql: {
    resolvers: {
      Query: {
        getDrivers,
        getConstructors,
      },
    },
  },
})

```


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

[User] Show me the implementation of policies-example-3/react/F1.tsx from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import { useState } from 'react'
import { Layout, PageBlock, Tabs, Tab, ToastProvider } from 'vtex.styleguide'
import './styles.global.css'
import * as React from 'react'

import InfosDrivers from './InfosDrivers'
import InfosConstructors from './InfosConstructors'

const F1: FC = () => {
  const [tab, setTab] = useState({
    currentTab: 1,
  })

  return (
    <ToastProvider positioning="window">
      <Layout>
        <PageBlock title="Informações F1 2020" variation="full">
          <Tabs>
            <Tab
              label="Posição final dos pilotos da F1 2020"
              active={tab.currentTab === 1}
              onClick={() => setTab({ currentTab: 1 })}
            >
              <InfosDrivers />
            </Tab>
            <Tab
              label="Posição final das equipes da F1 2020"
              active={tab.currentTab === 2}
              onClick={() => setTab({ currentTab: 2 })}
            >
              <InfosConstructors />
            </Tab>
          </Tabs>
        </PageBlock>
      </Layout>
    </ToastProvider>
  )
}

export default F1

```


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

[User] Show me the implementation of policies-example-3/react/InfosDrivers.tsx from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import * as React from 'react'
import { Table } from 'vtex.styleguide'
import { useMemo } from 'react'
import { useQuery } from 'react-apollo'

import getDrivers from './queries/getDrivers.gql'

const InfosDrivers: FC = () => {
  const defaultSchema = {
    properties: {
      position: {
        title: 'Posição',
      },
      name: {
        title: 'Nome',
      },
      lastName: {
        title: 'Sobrenome',
      },
      points: {
        title: 'Pontos obtidos',
      },
    },
  }
  const { data: dataDrivers } = useQuery(getDrivers)

  const listDrivers = useMemo(() => {
    return dataDrivers?.getDrivers?.map(
      (
        element: { id: string; name: string; lastName: string; points: number },
        indexOf: number
      ) => {
        return {
          id: element.id,
          position: `${indexOf + 1}º`,
          name: element.name,
          lastName: element.lastName,
          points: element.points,
          index: indexOf,
        }
      }
    )
  }, [dataDrivers])

  return (
    <div className="mb5">
      <Table
        fullWidth
        schema={defaultSchema}
        items={listDrivers}
        emptyStateLabel="Não há informações para apresentar (permissão negada)"
      />
    </div>
  )
}

export default InfosDrivers

```


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

[User] Show me the implementation of policies-example-3/react/package.json from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.admin-example",
  "version": "0.0.12",
  "devDependencies": {
    "@types/node": "^11.12.1",
    "@types/react": "^16.8.10",
    "@types/react-intl": "^2.3.17",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-client": "^2.4.7",
    "graphql": "^14.0.2",
    "prop-types": "^15.7.2",
    "react": "^17.0.2",
    "react-dom": "^16.8.6",
    "react-intl": "^2.7.2",
    "typescript": "3.9.7"
  },
  "dependencies": {
    "@types/faker": "^4.1.5",
    "@types/react": "^17.0.38",
    "@vtex/api": "6.45.6",
    "faker": "^4.1.0",
    "react": "^17.0.2",
    "react-apollo": "^3.1.5",
    "typescript": "3.9.7"
  }
}

```


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

[User] Show me the implementation of policies-example-3/react/styles.global.css from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

```css
html,
body,
#render-container,
#render-provider,
.render-container,
.render-provider {
  height: 100%;
}

```


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

[User] Show me the implementation of policies-example-3/react/InfosConstructors.tsx from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { FC, useMemo } from 'react'
import * as React from 'react'
import { Table } from 'vtex.styleguide'
import { useQuery } from 'react-apollo'

import getConstructors from './queries/getConstructors.gql'

const InfosConstructor: FC = () => {
  const defaultSchema = {
    properties: {
      position: {
        title: 'Posição',
      },
      team: {
        title: 'Equipe',
      },
      points: {
        title: 'Pontos obtidos',
      },
    },
  }

  const { data: dataConstructors } = useQuery(getConstructors)

  const listConstructors = useMemo(() => {
    return dataConstructors?.getConstructors?.map(
      (
        element: { id: string; name: string; points: number },
        indexOf: number
      ) => {
        return {
          id: element.id,
          position: `${indexOf + 1}º`,
          team: element.name,
          points: element.points,
          index: indexOf,
        }
      }
    )
  }, [dataConstructors])

  return (
    <div className="mb5">
      <Table
        fullWidth
        schema={defaultSchema}
        items={listConstructors}
        emptyStateLabel="Não há informações para apresentar (permissão negada)"
      />
    </div>
  )
}

export default InfosConstructor

```


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

[User] Show me the implementation of policies-example-3/node/clients/constructors.ts from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

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

export class Constructors extends AppClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super('vtex.policies-example-2@0.x', context, {
      ...options,
      headers: {
        ...options?.headers,
        ...(context.authToken
          ? { VtexIdclientAutCookie: context.authToken }
          : null),
        'Content-Type': 'application/json',
      },
    })
  }

  public async getConstructors() {
    return this.http.get(`/_v/test-policies-route`)
  }
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
import type { ClientsConfig } from '@vtex/api'
import { IOClients, LRUCache } from '@vtex/api'

import { Drivers } from './drivers'
import { Constructors } from './constructors'

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

  public get constructors() {
    return this.getOrSet('constructors', Constructors)
  }
}

const REQUESTS_TIMEOUT = 30000

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

metrics.trackCache('status', memoryCache)

export const clients: ClientsConfig<Clients> = {
  implementation: Clients,
  options: {
    default: {
      retries: 2,
      timeout: REQUESTS_TIMEOUT,
    },
    status: {
      memoryCache,
    },
  },
}

```


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

[User] Show me the implementation of policies-example-3/node/clients/drivers.ts from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

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

export class Drivers extends AppClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super('vtex.policies-example@0.x', context, {
      ...options,
      headers: {
        ...options?.headers,
        ...(context.authToken
          ? { VtexIdclientAutCookie: context.authToken }
          : null),
        'Content-Type': 'application/json',
      },
    })
  }

  public async getDrivers() {
    return this.http.get(`/_v/test-policies-service-route`)
  }
}

```


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

[User] Show me the implementation of policies-example-3/node/resolvers/getConstructors.ts from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

```typescript
export async function getConstructors(_: unknown, __: unknown, ctx: Context) {
  const {
    clients: { constructors },
  } = ctx

  const retorno = await constructors.getConstructors()

  return retorno
}

```


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

[User] Show me the implementation of policies-example-3/node/resolvers/getDrivers.ts from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

```typescript
export async function getDrivers(_: unknown, __: unknown, ctx: Context) {
  const {
    clients: { drivers },
  } = ctx

  return drivers.getDrivers()
}

```


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

[User] Show me the implementation of policies-example-3/react/queries/getDrivers.gql from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getDrivers {
  getDrivers {
    name
    lastName
    points
  }
}

```


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

[User] Show me the implementation of policies-example-3/react/queries/getConstructors.gql from the policies-example-3 VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getConstructors {
  getConstructors {
    name
    points
  }
}

```


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

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

[Assistant]
Here's the implementation:

```markdown
# Session Client

The Session Client app provides React hooks and GraphQL queries for your components to read and update the [VTEX Session cookie](https://help.vtex.com/en/tutorial/vtex-session-sessions-system-overview--6C4Edou6bYqqEAOCAg2MQQ), responsible for saving data of a specific session of a user browsing in your store.

## Installation

In your React app's `manifest.json` file, add the Session Client app to the dependency list:

```
"dependencies": {
    "vtex.session-client": "1.x"
  }
```

> ℹ You can have full TypeScript support running `vtex setup --typings` in your CLI afterwards.

## Configuration

The Session Client's React hooks allow you to read and update the VTEX Session cookie as desired. On the other hand, the GraphQL query and mutation enable your app to fetch and change the current user session.

### React hooks

To read the VTEX Session cookie:

- [`useRenderSession`](#useRenderSession)
- [`useFullSession`](#useFullSession)
- [`useLazyFullSession`](#useLazyFullSession)

To update the VTEX Session cookie:

- [`useUpdateSession`](#useUpdateSession)
- [`useUpdateSessionInline`](#useUpdateSessionInline)

#### `useRenderSession` hook

This hook is the fastest way to access session data, using the session response from `render-session`. One caveat: the session values are limited to a [set of values](https://github.com/vtex-apps/render-session/blob/master/src/constants.ts). If you need fields that are not in this set, you can use [`useFullSession`](#useFullSession) or [`useLazyFullSession`](#useLazyFullSession).

```tsx
import React from 'react'
import { useRenderSession } from 'vtex.session-client'

function MyComponent() {
  const { loading, session, error } = useRenderSession()

  if (loading) {
    return <>Session is loading</>
  }

  if (error) {
    return <>Session has errors</>
  }

  console.log({ session })

  return <>Session is ready</>
}

export default MyComponent
```

#### `useFullSession` hook

> ⚠ It's not possible to return the session during Server Side Rendering since it is a private query.

Runs a GraphQL query on the client side to query the full user session.

Under the hood, it's a wrapper of React Apollo's `useQuery` passing the GraphQL session query. You can read more about the `useQuery` API [here](https://www.apollographql.com/docs/react/api/react/hooks/#usequery).

```tsx
import React from 'react'
import { useFullSession } from 'vtex.session-client'

function MyComponent() {
  const { loading, data, error } = useFullSession()

  if (loading) {
    return <>Session is loading</>
  }

  if (error) {
    return <>Session has errors</>
  }

  console.log({ session: data?.session })

  return <>Session is ready</>
}

export default MyComponent
```

It also accepts a GraphQL variable called `items` which is an array of strings. These strings should match attributes inside the Session object, and only those attributes will be then fetched and returned.

For example:

```tsx
useFullSession({
  variables: {
    items: ['store.channel', 'store.countryCode']
  }
})
```

#### `useLazyFullSession` hook

The same as [`useFullSession`](#useFullSession), but it uses React Apollo's `useLazyQuery` hook instead. You can read more about `useLazyQuery` API [here](https://www.apollographql.com/docs/react/api/react/hooks/#uselazyquery).

```tsx
import React from 'react'
import { useLazyFullSession } from 'vtex.session-client'

function MyComponent() {
  const [getSession, session] = useLazyFullSession()

  console.log({ session })

  return <button onClick={() => getSession()}>Get session</button>
}

export default MyComponent
```

It also accepts a GraphQL variable called `items`, which is an array of strings. These strings should match attributes inside the Session object, and only those attributes will be then fetched and returned.

For example:

```tsx
useLazyFullSession({
  variables: {
    items: ['store.channel', 'store.countryCode']
  }
})
```

#### `useUpdateSession` hook

Updates the values of a session. Under the hood, it uses React Apollo's `useMutation` hook. You can read more about `useMutation` API [here](https://www.apollographql.com/docs/react/api/react/hooks/#usemutation).

Unlike the `useMutation` hook, this one only returns the mutation function (called in the example below as `updateSession`) — it does not return the mutation result.

After calling the mutation function, the hook reloads the page, guaranteeing that the whole page data is updated to the new session parameters. This is extremely useful in pages where the content changes according to the session values, such as the search results.

```tsx
import React from 'react'
import { useUpdateSession } from 'vtex.session-client'

function MyComponent() {
  const updateSession = useUpdateSession()

  return (
    <button
      onClick={() =>
        updateSession({
          variables: {
            fields: { foo: 'bar', baz: 123 },
          },
        })
      }
    >
      Update session
    </button>
  )
}

export default MyComponent
```

#### `useUpdateSessionInline` hook

Updates the values of a session. Under the hood, it uses React Apollo's `useMutation` hook. You can read more about `useMutation` API [here](https://www.apollographql.com/docs/react/api/react/hooks/#usemutation).

Differently from the [`useUpdateSession`](#useUpdateSession), this hook will not reload the page after calling the mutation function.

```tsx
import React from 'react'
import { useUpdateSessionInline } from 'vtex.session-client'

function MyComponent() {
  const [updateSession, updatedSession] = useUpdateSessionInline()

  console.log({ updatedSession })

  return (
    <button
      onClick={() =>
        updateSession({
          variables: {
            fields: { foo: 'bar', baz: 123 },
          },
        })
      }
    >
      Update session
    </button>
  )
}

export default MyComponent
```

It also accepts a GraphQL variable called `items`, which is an array of strings. These strings should match attributes inside of the Session object, and only those attributes will be then fetched and returned.

For example:

```tsx
updateSession({
  variables: {
    fields: { foo: 'bar', baz: 123 },
    items: ['store.channel', 'store.countryCode']
  }
})
```

### GraphQL query and mutation

#### `session` query

Gets the current user session.

```graphql
query session($items: [String]) {
  session(items: $items) @context(provider: "vtex.session-client") {
    ... on SessionSuccess {
      id
      namespaces
    }
    ... on SessionError {
      type
      message
    }
  }
}
```

#### `updateSession` mutation

Changes the current user session using the following variables: `{ "fields": { "foo": 123, "baz": "abc" } }`

```graphql
mutation updateSession($fields: SessionFieldsJSONInput!, $items: [String]) {
  updateSession(fields: $fields, items: $items)
    @context(provider: "vtex.session-client") {
    ... on SessionSuccess {
      id
      namespaces
    }
    ... on SessionError {
      type
      message
    }
  }
}
```

```


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

[User] Show me the implementation of session-client/graphql/schema.graphql from the session-client VTEX app.

[Assistant]
Here's the implementation:

```graphql
type Query {
  session(items: [String]): Session @cacheControl(scope: PRIVATE, maxAge: SHORT)
}

type Mutation {
  updateSession(fields: SessionFieldsJSONInput!, items: [String]): Session
}

union Session = SessionError | SessionSuccess

scalar SessionNamespaces

type SessionSuccess {
  id: String!
  namespaces: SessionNamespaces
}

type SessionError {
  type: String
  message: String
}

scalar SessionFieldsJSONInput

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "memory": 256,
  "ttl": 10,
  "timeout": 1,
  "minReplicas": 2,
  "maxReplicas": 5
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "cookie": "^0.4.1"
  },
  "devDependencies": {
    "@types/cookie": "^0.4.0",
    "@types/node": "^12.0.0",
    "@vtex/api": "6.39.0",
    "@vtex/tsconfig": "^0.4.4",
    "typescript": "3.9.7"
  },
  "version": "1.0.5"
}

```


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

[User] Show me the implementation of session-client/node/index.ts from the session-client VTEX app.

[Assistant]
Here's the implementation:

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

import { Clients } from './clients'
import { updateSession } from './resolvers/updateSession'
import { session } from './resolvers/session'

const MEDIUM_TIMEOUT_MS = 2 * 1000

export default new Service<IOClients, RecorderState, ServiceContext<Clients>>({
  clients: {
    implementation: Clients,
    options: {
      default: {
        timeout: MEDIUM_TIMEOUT_MS,
      },
    },
  },
  graphql: {
    resolvers: {
      Session: {
        __resolveType(obj) {
          if (obj.type) {
            return 'SessionError'
          }

          return 'SessionSuccess'
        },
      },
      Mutation: {
        updateSession,
      },
      Query: {
        session,
      },
    },
  },
})

```


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

[User] Show me the implementation of session-client/react/useLazyFullSession.tsx from the session-client VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { QueryHookOptions, useLazyQuery } from 'react-apollo'

import type { Session } from './SessionTypes'
import SessionQuery from './graphql/session.graphql'

interface Data {
  session: Session
}

interface Variables {
  items?: string[]
}

function useLazyFullSession(options?: QueryHookOptions<Data, Variables>) {
  return useLazyQuery<Data>(SessionQuery, options)
}

export default useLazyFullSession

```


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

[User] Show me the implementation of session-client/react/useUpdateSessionInline.tsx from the session-client VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { QueryHookOptions, useMutation } from 'react-apollo'

import UpdateSesionMutation from './graphql/updateSession.graphql'
import type { Session } from './SessionTypes'

interface Data {
  updateSession: Session
}

interface Variables {
  fields: Record<string, string | number>
  items?: string[]
}

function useUpdateSessionInline(options?: QueryHookOptions<Data, Variables>) {
  return useMutation<Data, Variables>(UpdateSesionMutation, options)
}

export default useUpdateSessionInline

```


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

[User] Show me the implementation of session-client/react/useFullSession.tsx from the session-client VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { QueryHookOptions, useQuery } from 'react-apollo'

import type { Session } from './SessionTypes'
import SessionQuery from './graphql/session.graphql'

interface Data {
  session: Session
}

interface Variables {
  items?: string[]
}

function useFullSession(options?: Omit<QueryHookOptions<Data>, 'ssr'>) {
  return useQuery<Data, Variables>(SessionQuery, {
    ...options,
    ssr: false,
  })
}

export default useFullSession

```


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

[User] Show me the implementation of session-client/react/useUpdateSession.tsx from the session-client VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useCallback } from 'react'
import {
  MutationFunctionOptions,
  QueryHookOptions,
  useMutation,
} from 'react-apollo'

import UpdateSesionMutation from './graphql/updateSession.graphql'
import type { Session } from './SessionTypes'

interface Data {
  updateSession: Session
}

interface Variables {
  fields: Record<string, string | number>
  items?: string[]
}

function useUpdateSession(options?: QueryHookOptions<Data, Variables>) {
  const [updateSessionMutation] = useMutation<Data, Variables>(
    UpdateSesionMutation,
    options
  )

  const updateSession = useCallback(
    async (mutationOptions: MutationFunctionOptions<Data, Variables>) => {
      await updateSessionMutation(mutationOptions)
      window.location.reload()

      // Holds promise until page reload
      return new Promise(() => {})
    },
    [updateSessionMutation]
  )

  return updateSession
}

export default useUpdateSession

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "session-client",
  "version": "1.0.5",
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "apollo-client": "^2.6.8",
    "react": "^16.12.0",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.12.0",
    "react-intl": "^3.12.0"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/jest": "^25.1.4",
    "@types/node": "^13.9.8",
    "@types/react": "^16.9.31",
    "@vtex/test-tools": "^3.3.2",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-cache-inmemory": "^1.6.5",
    "graphql": "^14.6.0",
    "typescript": "3.9.7",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.7/public/@types/vtex.render-runtime"
  }
}

```


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

[User] Show me the implementation of session-client/react/useRenderSession.tsx from the session-client VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useEffect, useState } from 'react'

import { Session } from './SessionTypes'

interface SessionState {
  loading: boolean
  session: Session | undefined
  error: boolean | undefined
}

function useRenderSession() {
  const [session, setSession] = useState<SessionState>({
    loading: true,
    session: undefined,
    error: undefined,
  })

  const sessionPromise = window?.__RENDER_8_SESSION__?.sessionPromise as
    | Promise<{
        response: Session
      }>
    | undefined

  useEffect(() => {
    if (!sessionPromise) {
      return
    }

    sessionPromise.then((sessionResponse) => {
      const { response } = sessionResponse

      setSession({
        loading: false,
        session: response,
        error: 'type' in response && 'message' in response,
      })
    })
  }, [sessionPromise])

  return session
}

export default useRenderSession

```


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

[User] Show me the implementation of session-client/react/SessionTypes.ts from the session-client VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface SessionSuccess {
  id: string
  namespaces: {
    [key: string]: Record<string, unknown>
    public: Record<string, { value: string }>
  }
}

export interface SessionUnauthorized {
  type: 'Unauthorized'
  message: string
}

export interface SessionForbidden {
  type: 'Forbidden'
  message: string
}

export type Session = SessionSuccess | SessionUnauthorized | SessionForbidden

```


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

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

[Assistant]
Here's the implementation:

```typescript
import { JanusClient } from '@vtex/api'
import parseCookie from 'cookie'

const SESSION_COOKIE = 'vtex_session'

const BASE_ROUTE = '/api/sessions'

interface SessionPostResponse {
  sessionToken: string
  segmentToken: string
}

export class Session extends JanusClient {
  /**
   * Get the session data using the given token
   */
  public getSession = async (token: string, items: string[] = ['*']) => {
    const { data: sessionData, headers } = await this.http.getRaw(BASE_ROUTE, {
      headers: {
        'Content-Type': 'application/json',
        Cookie: `vtex_session=${token};`,
      },
      metric: 'session-get',
      params: {
        items: items.join(','),
      },
    })

    return {
      sessionData,
      sessionToken: extractSessionCookie(headers) ?? token,
    }
  }

  /**
   * Update the public portion of this session
   */
  public updateSession = (publicFields: Record<string, any>, token: string) => {
    const config = {
      headers: {
        'Content-Type': 'application/json',
        Cookie: `vtex_session=${token};`,
      },
      metric: 'session-update',
    }

    const fields = Object.entries(publicFields).reduce<
      Record<string, { value: string | number }>
    >((acc, [fieldName, fieldValue]) => {
      acc[fieldName] = { value: fieldValue }

      return acc
    }, {})

    const data = { public: fields }

    return this.http.patch<SessionPostResponse>(BASE_ROUTE, data, config)
  }
}

function extractSessionCookie(headers: Record<string, string>) {
  for (const setCookie of headers['set-cookie'] ?? []) {
    const parsedCookie = parseCookie.parse(setCookie)
    const sessionCookie = parsedCookie[SESSION_COOKIE]

    if (sessionCookie != null) {
      return sessionCookie
    }
  }

  return null
}

```


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

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

[Assistant]
Here's the implementation:

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

import { Session } from './session'

export class Clients extends IOClients {
  public get customSession() {
    return this.getOrSet('customSession', Session)
  }
}

```


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

[User] Show me the implementation of session-client/node/resolvers/session.ts from the session-client VTEX app.

[Assistant]
Here's the implementation:

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

import { Clients } from '../clients'
import { getSessionToken } from '../modules/sessionToken'

export const VTEX_SESSION = 'vtex_session'

interface Args {
  items?: string[]
}

export async function session(
  _: any,
  { items }: Args,
  context: ServiceContext<Clients>
) {
  const {
    clients: { customSession },
  } = context

  const sessionCookie = getSessionToken(context.cookies)

  const { sessionData } = await customSession.getSession(sessionCookie, items)

  return sessionData
}

```


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

[User] Show me the implementation of session-client/node/resolvers/updateSession.ts from the session-client VTEX app.

[Assistant]
Here's the implementation:

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

import { Clients } from '../clients'
import { getSessionToken } from '../modules/sessionToken'

interface Args {
  fields: Array<{ name: string; value: string | number }>
  items?: string[]
}

export async function updateSession(
  _: any,
  { fields, items }: Args,
  context: ServiceContext<Clients>
) {
  const {
    clients: { customSession },
  } = context

  const sessionCookie = getSessionToken(context.cookies)

  await customSession.updateSession(fields, sessionCookie)

  const { sessionData } = await customSession.getSession(sessionCookie, items)

  return sessionData
}

```


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

[User] Show me the implementation of session-client/node/modules/sessionToken.ts from the session-client VTEX app.

[Assistant]
Here's the implementation:

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

export const VTEX_SESSION = 'vtex_session'

export function getSessionToken(cookies: ServiceContext['cookies']) {
  const sessionCookie = cookies.get(VTEX_SESSION)

  if (sessionCookie === undefined)
    throw new ResolverError(
      `Invalid request for session, the ${VTEX_SESSION} wasn't provided!`
    )

  return sessionCookie
}

```


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

[User] Show me the implementation of session-client/react/typings/gql.d.ts from the session-client VTEX app.

[Assistant]
Here's the implementation:

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

  const Schema: DocumentNode

  export default Schema
}

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

  const schema: DocumentNode

  export default Schema
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
interface Window extends Window {
  __RENDER_8_SESSION__: {
    sessionPromise: Promise<{ response: SessionResponse }>
  }
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
declare module '*.css' {
  type Styles = {
    [selector: string]: string
  }

  const styles: Styles

  export default styles
}

```


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

[User] Show me the implementation of session-client/react/graphql/updateSession.graphql from the session-client VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation updateSession($fields: SessionFieldsJSONInput!, $items: [String]) {
  updateSession(fields: $fields, items: $items)
    @context(provider: "vtex.session-client") {
    ... on SessionSuccess {
      id
      namespaces
    }
    ... on SessionError {
      type
      message
    }
  }
}

```


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

[User] Show me the implementation of session-client/react/graphql/session.graphql from the session-client VTEX app.

[Assistant]
Here's the implementation:

```graphql
query session($items: [String]) {
  session(items: $items) @context(provider: "vtex.session-client") {
    ... on SessionSuccess {
      id
      namespaces
    }
    ... on SessionError {
      type
      message
    }
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "admin/b2b-quotes.navigation.label": "B2B ponudbe",
  "admin/b2b-quotes.navigation.keywords": "b2b, ponudba, ponudbe, košarica, košarice, iztek",
  "admin/b2b-quotes.settings.title": "Nastavitve ponudb B2B",
  "admin/b2b-quotes.settings.saveSettings.failure": "Shranjevanje sprememb ni uspelo",
  "admin/b2b-quotes.settings.saveSettings.success": "Nastavitve uspešno shranjene",
  "admin/b2b-quotes.settings.cartLifeSpan.label": "Privzeto obdobje poteka (v dnevih) za ponudbe in shranjene košarice",
  "admin/b2b-quotes.settings.saveSettings.management.quotes.expiration.data": "Expiration Period for Quotes and Saved Carts",
  "admin/b2b-quotes.settings.saveSettings.management.quotes.title": "Upravljanje ponudb za tržnico",
  "admin/b2b-quotes.settings.saveSettings.management.quotes.description": "Nastavite, kako se ponudbe upravljajo na tržnici.",
  "admin/b2b-quotes.settings.saveSettings.management.quotes.info": "Kdo je odgovoren za upravljanje ponudb?",
  "admin/b2b-quotes.settings.saveSettings.management.quotes.option.one": "Tržnica",
  "admin/b2b-quotes.settings.saveSettings.management.quotes.option.one.describe": "Ponudbe upravlja samo glavna tržnica.",
  "admin/b2b-quotes.settings.saveSettings.management.quotes.option.two": "Prodajalci",
  "admin/b2b-quotes.settings.saveSettings.management.quotes.option.two.describe": "Prodajalci upravljajo ponudbe za svoje izdelke in se lahko odločijo, da jih ne upoštevajo.",
  "admin/b2b-quotes.settings.saveSettings.buttonText": "Shrani nastavitve",
  "store/b2b-quotes.myAccountLink": "Ponudbe in shranjeni vozički",
  "store/b2b-quotes.create.title": "Ustvari ponudbo",
  "store/b2b-quotes.create.nameLabel": "Ime",
  "store/b2b-quotes.create.descriptionLabel": "Opombe",
  "store/b2b-quotes.create.success": "Ponudba uspešno shranjena",
  "store/b2b-quotes.create.error": "Napaka pri shranjevanju ponudbe",
  "store/b2b-quotes.create.required": "Vnesite ime za svojo ponudbo",
  "store/b2b-quotes.create.placeholder.quotationName": "Ime ponudbe",
  "store/b2b-quotes.create.empty-state-label": "Če želite ustvariti ponudbo, začnite dodajati izdelke v košarico.",
  "store/b2b-quotes.create.characterLeft": "{count, plural, =499{znakov je ostalo}=500{meja 500 znakov je dosežena reached}other{znakov je ostalo}}",
  "store/b2b-quotes.create.button.save-for-later": "Shranite za pozneje",
  "store/b2b-quotes.create.button.request-quote": "Zahtevajte ponudbo",
  "store/b2b-quotes.back": "Nazaj",
  "store/b2b-quotes.error.notAuthenticated": "Za ogled te vsebine se prijavite.",
  "store/b2b-quotes.error.notPermitted": "Nimate potrebnih dovoljenj za ogled te vsebine.",
  "store/b2b-quotes.quotes-table.title": "Moje ponudbe",
  "store/b2b-quotes.quotes-table.newLine.label": "Nova ponudba",
  "store/b2b-quotes.quotes-table.empty-state-label": "Ni najdenih ponudb.",
  "store/b2b-quotes.quotes-table.details.label": "Podrobnosti",
  "store/b2b-quotes.quotes-table.referenceName.title": "Referenčno ime",
  "store/b2b-quotes.quotes-table.subtotal.title": "Skupaj",
  "store/b2b-quotes.quotes-table.creatorEmail.title": "Ustvaril",
  "store/b2b-quotes.quotes-table.creationDate.title": "Ustvarjeno dne",
  "store/b2b-quotes.quotes-table.expirationDate.title": "Datum veljavnosti",
  "store/b2b-quotes.quotes-table.status.title": "Stanje",
  "store/b2b-quotes.quotes-table.lastUpdate.title": "Zadnja posodobitev",
  "store/b2b-quotes.quotes-table.organization.title": "Organizacija",
  "store/b2b-quotes.quotes-table.costCenter.title": "Stroškovno mesto",
  "store/b2b-quotes.quotes-table.orgAndCostCenter.title": "Org. in stroškovno mesto",
  "store/b2b-quotes.quotes-table.searchOrganization.title": "Išči organizacije...",
  "store/b2b-quotes.quotes-table.searchCostCenter.title": "Izberite stroškovna mesta...",
  "store/b2b-quotes.quotes-table.showRows": "Pokaži vrstice",
  "store/b2b-quotes.quotes-table.of": "od",
  "store/b2b-quotes.quotes-table.search.placeholder": "Najdi",
  "store/b2b-quotes.quotes-table.toggleFields.label": "Preklopi vidna polja",
  "store/b2b-quotes.quotes-table.toggleFields.showAllLabel": "Prikaži vse",
  "store/b2b-quotes.quotes-table.toggleFields.hideAllLabel": "Skrij vse",
  "store/b2b-quotes.quotes-table.clearFilters.label": "Počisti filtre",
  "store/b2b-quotes.quotes-table.statusFilter.label": "Stanje",
  "store/b2b-quotes.quotes-table.filters.all": "Vsi",
  "store/b2b-quotes.quotes-table.filters.none": "Noben",
  "store/b2b-quotes.quotes-table.filters.any": "Kateri koli",
  "store/b2b-quotes.quotes-table.filters.is": "je",
  "store/b2b-quotes.quotes-table.filters.includes": "vsebuje",
  "store/b2b-quotes.quote-details.title": "Podrobnosti ponudbe",
  "store/b2b-quotes.quote-details.decline": "Zavrni",
  "store/b2b-quotes.quote-details.save": "Shrani ponudbo",
  "store/b2b-quotes.quote-details.submit-to-sales-rep": "Predložite prodajnemu predstavniku",
  "store/b2b-quotes.quote-details.use-quote": "Uporabi ponudbo",
  "store/b2b-quotes.quote-details.subtotal.title": "Skupaj",
  "store/b2b-quotes.quote-details.expiration.title": "Datum veljavnosti",
  "store/b2b-quotes.quote-details.status.title": "Stanje",
  "store/b2b-quotes.quote-details.items.image.title": "Slika",
  "store/b2b-quotes.quote-details.items.refId.title": "Ref. koda",
  "store/b2b-quotes.quote-details.items.name.title": "Ime",
  "store/b2b-quotes.quote-details.items.quantity.title": "Količina",
  "store/b2b-quotes.quote-details.items.price.title": "Cena",
  "store/b2b-quotes.quote-details.items.total.title": "Skupaj",
  "store/b2b-quotes.quote-details.apply-discount.title": "Uporabi odstotek popusta",
  "store/b2b-quotes.quote-details.apply-discount.help-text": "Uporabite odstotek popusta na delno vsoto ponudbe. Opomba: To bo preglasilo vse spremembe posameznih cen SKU.",
  "store/b2b-quotes.quote-details.apply-discount.disabled-message": "Odstotek popusta ni na voljo, ker promocija že uporablja popust, ki je višji od največjega ročnega popusta.",
  "store/b2b-quotes.quote-details.apply-discount.maxDiscount-text": "Ročni popusti nad {maxDiscount}% bodo samodejno zavrnjeni.",
  "store/b2b-quotes.quote-details.products.title": "Artikli ({total})",
  "store/b2b-quotes.quote-details.notes-after-created.helpText": "Opombe lahko dodate, ko so ponudbe ustvarjene.",
  "store/b2b-quotes.quote-details.update-history.title": "Posodobi zgodovino",
  "store/b2b-quotes.quote-details.update-history.update-details": "{index, plural, =0{Ustvarjeno}other{Posodobljeno}} na {date} z {email} ({role}) s stanjem {status}",
  "store/b2b-quotes.quote-details.update-history.notes": "Opombe:",
  "store/b2b-quotes.quote-details.add-note.label": "Dodaj opombo",
  "store/b2b-quotes.quote-details.update-success": "Ponudba uspešno shranjena",
  "store/b2b-quotes.quote-details.update-error": "Napaka pri shranjevanju ponudbe. Za več podrobnosti glejte konzolo.",
  "store/b2b-quotes.quote-details.use-error": "Napaka pri shranjevanju ponudbe. Za več podrobnosti glejte konzolo.",
  "store/b2b-quotes.quote-details.discount-error": "Nekateri popusti so višji od dovoljenih",
  "store/b2b-quotes.quote-details.percentage-discount.title": "Odstotek popusta",
  "store/b2b-quotes.quote-details.original-subtotal.title": "Izvirni delni seštevek",
  "store/b2b-quotes.quote-details.original-price.title": "Izvorna cena",
  "store/b2b-quotes.quote-details.quote-price.title": "Navedena cena",
  "store/b2b-quotes.quote-details.quoted-subtotal.title": "Naveden vmesni seštevek",
  "store/b2b-quotes.quote-details.expiration-date-change.title": "Sprememba datuma izteka veljavnosti",
  "store/b2b-quotes.quote-locking.title": "Ponudba v uporabi",
  "store/b2b-quotes.quote-locking.message": "Vaša košarica trenutno vsebuje artikle iz ponudbe in je ni mogoče spreminjati. Za nadaljevanje brskanja se lahko vrnete na stran za dokončanje nakupa ali počistite košarico.",
  "store/b2b-quotes.quote-locking.return-to-checkout": "Nazaj na blagajno",
  "store/b2b-quotes.quote-locking.clear-cart": "Počistite košarico",
  "store/b2b-quotes.quote-status.ready": "Pripravljeno",
  "store/b2b-quotes.quote-status.placed": "Oddano",
  "store/b2b-quotes.quote-status.revised": "Pregledano",
  "store/b2b-quotes.quote-status.pending": "V čakanju",
  "store/b2b-quotes.quote-status.expired": "Poteklo",
  "store/b2b-quotes.quote-status.declined": "Zavrnjeno"
}

```