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

[User] Show me the implementation of admin-list/react/provider/providerUser.tsx from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC, SyntheticEvent } from 'react'
import React, { useEffect, useState, useMemo } from 'react'
import { useLazyQuery } from 'react-apollo'
import { useIntl } from 'react-intl'
import {
  Tag,
  useDataGridState,
  useDataViewState,
  IconArrowUpRight,
  useSearchState,
  Tooltip,
  Button,
  usePaginationState,
} from '@vtex/admin-ui'
import { useRuntime } from 'vtex.render-runtime'

import searchGiftCards from '../queries/searchGiftCards.gql'
import searchUser from '../queries/searchUser.gql'
import searchListUser from '../queries/searchListUser.gql'
import { ContextUser } from '../hooks/useUser'
import { columns, messages } from '../utils/definedMessages'
import { ITEMS_PER_PAGE } from '../utils/constants'
import { useInterface } from '../hooks/useInterface'

interface Props {
  children?: React.ReactNode
}

const ProviderUser: FC = (props: Props) => {
  const { culture } = useRuntime()
  const [valuesGiftCard, setValuesGiftCard] = useState<ValuesGiftCard[]>()
  const [valuesUser, setValuesUser] = useState<ValuesUser[]>()
  const [valuesListsUser, setValuesListsUser] = useState<ValuesListsUsers[]>()
  const [itemsListsUsers, setItemsListsUsers] = useState<ItemsListsUsers[]>()
  const [emailFilter, setEmailFilter] = useState<string[]>()
  const [totalPagination, setTotalPagination] = useState<number>(0)
  const [emailFilterGiftCard, setEmailFilterGiftCard] = useState<string>()
  const pagination = usePaginationState({
    pageSize: ITEMS_PER_PAGE,
    total: 0,
  })

  useEffect(() => {
    pagination.paginate({
      type: 'setTotal',
      total: totalPagination,
    })
  }, [totalPagination])

  const {
    getInputProps,
    value: search,
    debouncedValue,
    setValue,
  } = useSearchState({
    timeout: 500,
  })

  const [
    searchListUserQuery,
    { data: dataSearchListsUser, loading: loadingSearchListUser },
  ] = useLazyQuery(searchListUser, {
    fetchPolicy: 'cache-and-network',
  })

  const [
    searchGiftCardQuery,
    { data: dataSearchGiftCards, loading: loadingSearchGiftCard },
  ] = useLazyQuery(searchGiftCards, {
    fetchPolicy: 'cache-and-network',
  })

  const [
    searchUsersQuery,
    { data: dataSearchUser, loading: loadingSearchUser },
  ] = useLazyQuery(searchUser, {
    fetchPolicy: 'cache-and-network',
  })

  const view = useDataViewState()

  const { formatMessage } = useIntl()

  const { setTableLists, setSearchEmailFilter, setInfoUserList, tableLists } =
    useInterface()

  function openTableList(event: SyntheticEvent, email: any) {
    event.preventDefault()
    setTableLists(true)
    setSearchEmailFilter(email)
    const valueUser = valuesListsUser?.find(
      (element) => element.ownerEmail === email
    )

    const valueGift = valuesGiftCard?.find((element) => element.email === email)

    if (valueUser !== undefined) {
      setInfoUserList({
        ...valueUser,
        ...{ quantityAlreadyInGiftCard: valueGift?.quantityAlreadyInGiftCard },
      })
    }
  }

  const gridUsers = useDataGridState({
    view,
    columns: [
      {
        id: 'table',
        width: '2%',
        resolver: {
          type: 'plain',
          render: ({ data }) => (
            <Tooltip
              label={formatMessage(columns.tooltipUser)}
              placement="right"
            >
              <Button
                icon={<IconArrowUpRight />}
                variant="tertiary"
                onClick={(event: SyntheticEvent) => openTableList(event, data)}
              />
            </Tooltip>
          ),
        },
      },
      {
        id: 'owner',
        header: formatMessage(columns.owner),
        resolver: {
          type: 'plain',
          render: ({ data }: { data: any }) =>
            data ? (
              <>
                <b>{data.ownerName}</b>
                <p>{data.ownerEmail}</p>
              </>
            ) : undefined,
        },
      },
      {
        id: 'lists',
        header: formatMessage(columns.lists),
      },
      {
        id: 'bought',
        header: formatMessage(columns.bought),
        resolver: {
          type: 'currency',
          locale: culture.locale,
          currency: culture.currency,
        },
      },
      {
        id: 'converted',
        header: formatMessage(columns.converted),
        resolver: {
          type: 'currency',
          locale: culture.locale,
          currency: culture.currency,
        },
      },
      {
        id: 'status',
        header: formatMessage(columns.status),
        resolver: {
          type: 'plain',
          render: ({ data }) =>
            data ? (
              <Tag label={formatMessage(messages.active)} palette="green" />
            ) : (
              <Tag label={formatMessage(messages.disabled)} palette="red" />
            ),
        },
      },
    ],
    items: itemsListsUsers,
    length: ITEMS_PER_PAGE,
  })

  const loading = useMemo(() => {
    return loadingSearchGiftCard || loadingSearchUser || loadingSearchListUser
  }, [loadingSearchGiftCard, loadingSearchListUser, loadingSearchUser])

  useEffect(() => {
    if (loading && view.status !== 'loading') {
      view.setStatus({
        type: 'loading',
      })
    } else {
      view.setStatus({
        type: 'ready',
      })
    }
  }, [loading])

  useEffect(() => {
    const valuesSearchListsUser: ValuesListsUsers[] =
      dataSearchListsUser?.searchListUser

    setValuesListsUser(valuesSearchListsUser)
  }, [dataSearchListsUser])

  useEffect(() => {
    const valuesSearchGiftCards: ValuesGiftCard[] =
      dataSearchGiftCards?.searchGiftCards?.data

    setValuesGiftCard(valuesSearchGiftCards)
  }, [dataSearchGiftCards])

  useEffect(() => {
    setValuesUser(dataSearchUser?.allUsers?.data ?? undefined)

    if (
      dataSearchUser?.allUsers?.pagination?.total !== undefined &&
      pagination.total !== dataSearchUser?.allUsers?.pagination?.total
    ) {
      setTotalPagination(dataSearchUser?.allUsers?.pagination?.total)
    }
  }, [dataSearchUser])

  useEffect(() => {
    if (valuesUser !== undefined && valuesUser.length > 0) {
      const filter: string[] = []

      filter[0] = valuesUser[0].email
      let filterGift = valuesUser[0].email

      for (let index = 1; index < valuesUser.length; index++) {
        filterGift += ` OR email=${valuesUser[index].email}`
        filter[index] = valuesUser[index].email
      }

      setEmailFilter(filter)
      setEmailFilterGiftCard(filterGift)
    }
  }, [valuesUser])

  useEffect(() => {
    if (emailFilter) {
      searchListUserQuery({
        variables: {
          filter: emailFilter,
        },
      })

      searchGiftCardQuery({
        variables: {
          page: pagination.currentPage,
          pageSize: ITEMS_PER_PAGE,
          filter: { email: emailFilterGiftCard },
          sorting: { field: 'email', order: 'ASC' },
        },
      })
    }
  }, [emailFilter, emailFilterGiftCard])

  useEffect(() => {
    const valueItems = valuesListsUser?.map((item) => {
      const valueGift = valuesGiftCard?.find(
        (element) => element.email === item.ownerEmail
      )

      return {
        table: item.ownerEmail ?? '',
        id: item.id ?? '',
        owner: item?.ownerEmail
          ? { ownerEmail: item.ownerEmail, ownerName: item.ownerName }
          : '',
        lists: item.lists ?? 0,
        bought: item?.purchase ? item.purchase / 100 : 0,
        converted: valueGift ? valueGift.quantityAlreadyInGiftCard : 0,
        status: item.status ?? false,
      }
    })

    setItemsListsUsers(valueItems)
  }, [valuesListsUser, valuesGiftCard])

  useEffect(() => {
    const filter = debouncedValue ? { email: debouncedValue } : null

    setItemsListsUsers(undefined)
    searchUsersQuery({
      variables: {
        filter,
        page: pagination.currentPage,
        pageSize: ITEMS_PER_PAGE,
      },
    })
  }, [debouncedValue, pagination.currentPage])

  useEffect(() => {
    setValue('')
  }, [tableLists])

  return (
    <ContextUser.Provider
      value={{
        gridUsers,
        view,
        search,
        getInputProps,
        debouncedValue,
        pagination,
      }}
    >
      {props.children}
    </ContextUser.Provider>
  )
}

export default ProviderUser

```


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

[User] Show me the implementation of admin-list/react/utils/dictionary.ts from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const today = new Date(new Date().setHours(0, 0, 0, 0))

export const dictionaryStatus: { [key: string]: DictionaryType } = {
  '1': {
    startDate: today.toISOString(),
    endDate: '2099-01-01T00:00',
  },
  '2': {
    startDate: '2022-01-01T00:00',
    endDate: today.toISOString(),
  },
}

const todayUTC = today.valueOf()
const oneDay = 86400000

export const yesterday = new Date(todayUTC - oneDay)

export const tomorrow = new Date(todayUTC + oneDay)

function getMonday(d: Date) {
  d = new Date(d)
  const day = d.getDay()
  const diff = d.getDate() - day + (day === 0 ? -6 : 0)

  return new Date(new Date(d.setDate(diff)).setHours(0, 0, 0, 0))
}

const thisWeek = getMonday(new Date())

export const dictionaryDate: { [key: string]: DictionaryType } = {
  '1': {
    startDate: today.toISOString(),
    endDate: new Date().toISOString(),
  },
  '2': {
    startDate: yesterday.toISOString(),
    endDate: today.toISOString(),
  },
  '3': {
    startDate: thisWeek.toISOString(),
    endDate: new Date().toISOString(),
  },
  '4': {
    startDate: new Date(thisWeek.valueOf() - oneDay * 7).toISOString(),
    endDate: thisWeek.toISOString(),
  },
  '5': {
    startDate: new Date(
      today.getFullYear(),
      today.getMonth(),
      1,
      0,
      0,
      0,
      0
    ).toISOString(),
    endDate: new Date().toISOString(),
  },
  '6': {
    startDate: new Date(
      today.getFullYear(),
      today.getMonth() - 1,
      1,
      0,
      0,
      0,
      0
    ).toISOString(),
    endDate: new Date(
      today.getFullYear(),
      today.getMonth(),
      1,
      0,
      0,
      0,
      0
    ).toISOString(),
  },
  '7': {
    startDate: new Date(today.getFullYear(), 0, 1, 0, 0, 0, 0).toISOString(),
    endDate: new Date().toISOString(),
  },
  '8': {
    startDate: new Date(
      today.getFullYear() - 1,
      0,
      1,
      0,
      0,
      0,
      0
    ).toISOString(),
    endDate: new Date(
      today.getFullYear() - 1,
      11,
      31,
      0,
      0,
      0,
      0
    ).toISOString(),
  },
  '9': {
    startDate: '',
    endDate: '',
  },
}

```


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

[User] Show me the implementation of admin-list/react/utils/definedMessages.ts from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { defineMessages } from 'react-intl'

export const messages = defineMessages({
  titleUser: {
    id: 'admin/interface.title.user',
  },
  active: {
    id: 'admin/interface.active',
  },
  disabled: {
    id: 'admin/interface.disabled',
  },
})

export const columns = defineMessages({
  title: {
    id: 'admin/interface.columns.title',
  },
  user: {
    id: 'admin/interface.columns.user',
  },
  validate: {
    id: 'admin/interface.columns.validate',
  },
  bought: {
    id: 'admin/interface.columns.bought',
  },
  converted: {
    id: 'admin/interface.columns.converted',
  },
  status: {
    id: 'admin/interface.columns.status',
  },
  owner: {
    id: 'admin/interface.columns.owner',
  },
  lists: {
    id: 'admin/interface.columns.lists',
  },
  tooltipUser: {
    id: 'admin/interface.columns.tooltip.user',
  },
  tooltipList: {
    id: 'admin/interface.columns.tooltip.list',
  },
})

export const table = defineMessages({
  searchUser: {
    id: 'admin/interface.search.user',
  },
  searchList: {
    id: 'admin/interface.search.list',
  },
  paginationPreposition: {
    id: 'admin/interface.pagination.preposition',
  },
  paginationSubject: {
    id: 'admin/interface.pagination.subject',
  },
  paginationPrevious: {
    id: 'admin/interface.pagination.previous',
  },
  paginationNext: {
    id: 'admin/interface.pagination.next',
  },
  empty: {
    id: 'admin/interface.empty',
  },
})

export const totalizer = defineMessages({
  listsCreated: {
    id: 'admin/interface.totalizer.lists.created',
  },
  bought: {
    id: 'admin/interface.totalizer.bought',
  },
  converted: {
    id: 'admin/interface.totalizer.converted',
  },
  info: {
    id: 'admin/interface.totalizer.info',
  },
})

export const filterDate = defineMessages({
  date: {
    id: 'admin/interface.filter.date',
  },
  today: {
    id: 'admin/interface.filter.date.today',
  },
  yesterday: {
    id: 'admin/interface.filter.date.yesterday',
  },
  thisWeek: {
    id: 'admin/interface.filter.date.this.week',
  },
  lastWeek: {
    id: 'admin/interface.filter.date.last.week',
  },
  thisMonth: {
    id: 'admin/interface.filter.date.this.month',
  },
  lastMonth: {
    id: 'admin/interface.filter.date.last.month',
  },
  thisYear: {
    id: 'admin/interface.filter.date.this.year',
  },
  lastYear: {
    id: 'admin/interface.filter.date.last.year',
  },
  customizer: {
    id: 'admin/interface.filter.date.customizer',
  },
})

export const filterStatus = defineMessages({
  status: {
    id: 'admin/interface.filter.status',
  },
  active: {
    id: 'admin/interface.filter.status.active',
  },
  disabled: {
    id: 'admin/interface.filter.status.disabled',
  },
})

export const modal = defineMessages({
  dateInitial: {
    id: 'admin/interface.modal.date.initial',
  },
  dateFinal: {
    id: 'admin/interface.modal.date.final',
  },
  title: {
    id: 'admin/interface.modal.title',
  },
  ariaLabel: {
    id: 'admin/interface.modal.aria.label',
  },
  confirm: {
    id: 'admin/interface.modal.confirm',
  },
})

```


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

[User] Show me the implementation of admin-list/react/components/Title.tsx from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { tag } from '@vtex/admin-ui'
import type { FC } from 'react'
import React from 'react'

import { useInterface } from '../hooks/useInterface'

const TitleArea: FC = () => {
  const { infoUserList } = useInterface()

  return (
    <tag.div>
      <tag.p>
        <b>{infoUserList?.ownerName}</b>
        <br />
        {infoUserList?.ownerEmail}
      </tag.p>
    </tag.div>
  )
}

export default TitleArea

```


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

[User] Show me the implementation of admin-list/react/components/Totalizer.tsx from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```tsx
import {
  Flex,
  Text,
  Set,
  Card,
  Divider,
  Tooltip,
  IconWarningCircle,
} from '@vtex/admin-ui'
import React from 'react'
import { useIntl } from 'react-intl'
import { useRuntime } from 'vtex.render-runtime'

import { useInterface } from '../hooks/useInterface'
import { totalizer } from '../utils/definedMessages'

const TotalizerArea = () => {
  const intl = useIntl()

  const { infoUserList } = useInterface()

  const { culture } = useRuntime()

  return (
    <Card>
      <Flex justify="space-between">
        <Flex grow={1}>
          <Set orientation="vertical" spacing={3} fluid csx={{ paddingX: 4 }}>
            <Text variant="pageTitle">
              {intl.formatMessage(totalizer.listsCreated)}
            </Text>
            <Text variant="pageTitle" tone="positive">
              <b>{infoUserList?.lists}</b>
            </Text>
          </Set>
        </Flex>
        <Flex grow={1}>
          <Divider orientation="vertical" csx={{ marginX: 6, marginY: -25 }} />
          <Set orientation="vertical" spacing={3} fluid csx={{ paddingX: 4 }}>
            <Flex>
              <Text variant="pageTitle">
                {intl.formatMessage(totalizer.bought)}
              </Text>
            </Flex>
            <Text variant="pageTitle" tone="positive">
              <b>
                {infoUserList?.purchase
                  ? intl.formatNumber(infoUserList?.purchase / 100, {
                      style: 'currency',
                      currency: culture.currency,
                    })
                  : 0}
              </b>
            </Text>
          </Set>
        </Flex>
        <Flex grow={1}>
          <Divider orientation="vertical" csx={{ marginX: 6, marginY: -25 }} />
          <Set orientation="vertical" spacing={3} fluid csx={{ paddingX: 4 }}>
            <Text variant="pageTitle">
              {intl.formatMessage(totalizer.converted)}
              <Tooltip
                label={intl.formatMessage(totalizer.info)}
                placement="right"
              >
                <IconWarningCircle size="small" style={{ marginLeft: '2px' }} />
              </Tooltip>
            </Text>
            <Text variant="pageTitle" tone="positive">
              <b>
                {infoUserList?.quantityAlreadyInGiftCard
                  ? intl.formatNumber(infoUserList?.quantityAlreadyInGiftCard, {
                      style: 'currency',
                      currency: culture.currency,
                    })
                  : 0}
              </b>
            </Text>
          </Set>
        </Flex>
      </Flex>
    </Card>
  )
}

export default TotalizerArea

```


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

[User] Show me the implementation of admin-list/react/components/ChooseTable.tsx from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'

import TableUserArea from './TableUser'
import { useInterface } from '../hooks/useInterface'
import TableListArea from './TableList'

const ChooseTableArea: FC = () => {
  const { tableLists } = useInterface()

  if (tableLists) return <TableListArea />

  return <TableUserArea />
}

export default ChooseTableArea

```


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

[User] Show me the implementation of admin-list/react/components/TableUser.tsx from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'
import {
  DataGrid,
  DataView,
  DataViewControls,
  FlexSpacer,
  IconWarningCircle,
  PageHeader,
  PageTitle,
  Pagination,
  Search,
  tag,
  Tooltip,
} from '@vtex/admin-ui'
import { FormattedMessage, useIntl } from 'react-intl'

import { messages, table } from '../utils/definedMessages'
import { useUser } from '../hooks/useUser'

const TableUserArea: FC = () => {
  const { gridUsers, view, getInputProps, pagination } = useUser()

  const { formatMessage } = useIntl()

  if (Object.keys(gridUsers).length < 1 && Object.keys(view).length < 1) {
    return null
  }

  return (
    <>
      <PageHeader>
        <PageTitle style={{ padding: '0 4rem' }}>
          <FormattedMessage {...messages.titleUser} />
        </PageTitle>
      </PageHeader>
      <tag.div
        csx={{
          padding: '0 4rem',
        }}
      >
        <DataView state={view}>
          <DataViewControls>
            <tag.div
              csx={{
                display: 'flex',
                alignItems: 'center',
              }}
            >
              <Search id="search" {...getInputProps()} />
              <Tooltip
                label={formatMessage(table.searchUser)}
                placement="right"
              >
                <IconWarningCircle size="small" style={{ marginLeft: '2px' }} />
              </Tooltip>
            </tag.div>
            <FlexSpacer />
            <Pagination
              state={pagination}
              preposition={formatMessage(table.paginationPreposition)}
              subject={formatMessage(table.paginationSubject)}
              prevLabel={formatMessage(table.paginationPrevious)}
              nextLabel={formatMessage(table.paginationNext)}
            />
          </DataViewControls>
          <DataGrid state={gridUsers} />
        </DataView>
      </tag.div>
    </>
  )
}

export default TableUserArea

```


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

[User] Show me the implementation of admin-list/react/components/ModalDate.tsx from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```tsx
import {
  Button,
  experimental_DatePickerCalendar,
  experimental_DatePickerField,
  experimental_I18nProvider,
  Modal,
  ModalContent,
  ModalFooter,
  ModalHeader,
  tag,
} from '@vtex/admin-ui'
import type { FC } from 'react'
import React from 'react'
import { useIntl } from 'react-intl'
import { useRuntime } from 'vtex.render-runtime'

import { useLists } from '../hooks/useLists'
import { modal } from '../utils/definedMessages'

const ModalDateArea: FC = () => {
  const {
    modalState,
    datePersonalizeInitial,
    datePersonalizeFinal,
    salveDatePersonalizate,
  } = useLists()

  const { formatMessage } = useIntl()

  const DatePickerField = experimental_DatePickerField
  const DatePickerCalendar = experimental_DatePickerCalendar
  const I18nProvider = experimental_I18nProvider

  const { culture } = useRuntime()

  return (
    <Modal
      aria-label={formatMessage(modal.ariaLabel)}
      state={modalState}
      size="small"
    >
      <ModalHeader title={formatMessage(modal.title)} />
      <ModalContent>
        <I18nProvider locale={culture.locale}>
          <tag.div
            csx={{
              paddingBottom: '15px',
            }}
          >
            <DatePickerField
              label={formatMessage(modal.dateInitial)}
              state={datePersonalizeInitial}
            />
            <DatePickerCalendar
              state={datePersonalizeInitial}
              csx={{ zIndex: 100000 }}
            />
          </tag.div>
          <DatePickerField
            label={formatMessage(modal.dateFinal)}
            state={datePersonalizeFinal}
          />
          <DatePickerCalendar
            state={datePersonalizeFinal}
            csx={{ zIndex: 100000 }}
          />
        </I18nProvider>
      </ModalContent>
      <ModalFooter>
        <Button
          onClick={(e: { preventDefault: () => void }) => {
            e.preventDefault()
            salveDatePersonalizate()
          }}
        >
          {formatMessage(modal.confirm)}
        </Button>
      </ModalFooter>
    </Modal>
  )
}

export default ModalDateArea

```


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

[User] Show me the implementation of admin-list/react/components/TableList.tsx from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'
import {
  DataGrid,
  DataView,
  DataViewControls,
  FlexSpacer,
  Pagination,
  Search,
  PageHeader,
  PageTitle,
  Toolbar,
  ToolbarItem,
  useToolbarState,
  experimental_Filter,
  tag,
  Tooltip,
  IconWarningCircle,
} from '@vtex/admin-ui'
import { useIntl } from 'react-intl'

import { useLists } from '../hooks/useLists'
import { table } from '../utils/definedMessages'
import { useInterface } from '../hooks/useInterface'
import TitleArea from './Title'
import TotalizerArea from './Totalizer'
import ModalDateArea from './ModalDate'

const TableListArea: FC = () => {
  const { gridLists, view, dateState, statusState, getInputProps, pagination } =
    useLists()

  const Filter = experimental_Filter

  const { setTableLists } = useInterface()
  const toolbar = useToolbarState()

  const { formatMessage } = useIntl()

  if (Object.keys(gridLists).length < 1 && Object.keys(view).length < 1) {
    return null
  }

  return (
    <>
      <PageHeader onPopNavigation={() => setTableLists(false)}>
        <PageTitle style={{ padding: '0 4rem' }}>
          <TitleArea />
        </PageTitle>
      </PageHeader>
      <tag.div
        csx={{
          padding: '0 4rem',
        }}
      >
        <DataView state={view}>
          <DataViewControls>
            <tag.div
              csx={{
                display: 'flex',
                alignItems: 'center',
                marginTop: '-4px',
              }}
            >
              <Search id="search" {...getInputProps()} />
              <Tooltip
                label={formatMessage(table.searchList)}
                placement="right"
              >
                <IconWarningCircle size="small" style={{ marginLeft: '2px' }} />
              </Tooltip>
            </tag.div>

            <Toolbar
              state={toolbar}
              aria-label="Toolbar Render Props"
              style={{ marginTop: '-10px' }}
            >
              <ToolbarItem>{() => <Filter state={dateState} />}</ToolbarItem>
              <ToolbarItem>{() => <Filter state={statusState} />}</ToolbarItem>
            </Toolbar>

            <FlexSpacer />
            <Pagination
              state={pagination}
              preposition={formatMessage(table.paginationPreposition)}
              subject={formatMessage(table.paginationSubject)}
              prevLabel={formatMessage(table.paginationPrevious)}
              nextLabel={formatMessage(table.paginationNext)}
            />
          </DataViewControls>
          <TotalizerArea />
          <DataGrid state={gridLists} style={{ marginTop: '24px' }} />
        </DataView>
      </tag.div>

      <ModalDateArea />
    </>
  )
}

export default TableListArea

```


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

[User] Show me the implementation of admin-list/react/hooks/useUser.tsx from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type {
  UsePaginationReturn,
  DataGridState,
  DataViewState,
  GetInputPropsReturn,
} from '@vtex/admin-ui'
import React, { useContext } from 'react'

interface ContextUser {
  gridUsers: DataGridState<ItemsListsUsers>
  view: DataViewState
  search: string
  getInputProps: () => GetInputPropsReturn
  debouncedValue: string
  pagination: UsePaginationReturn
}

export const ContextUser = React.createContext<ContextUser>({
  gridUsers: {} as DataGridState<ItemsListsUsers>,
  view: {} as DataViewState,
  search: '',
  getInputProps: () => ({} as GetInputPropsReturn),
  debouncedValue: '',
  pagination: {} as UsePaginationReturn,
})

export function useUser() {
  return useContext(ContextUser)
}

```


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

[User] Show me the implementation of admin-list/react/hooks/useLists.tsx from the admin-list VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type {
  UsePaginationReturn,
  DataGridState,
  DataViewState,
  GetInputPropsReturn,
  ModalStateReturn,
} from '@vtex/admin-ui'
import type { DatePickerStateReturn } from '@vtex/admin-ui/dist/declarations/src/date-picker'
import type { UseFilterStateReturn } from '@vtex/admin-ui/dist/declarations/src/filters'
import React, { useContext } from 'react'

interface ContextLists {
  gridLists: DataGridState<ItemsLists>
  view: DataViewState
  dateState: UseFilterStateReturn<{
    id: string
    label: string
    value: number
  }>
  statusState: UseFilterStateReturn<{
    id: string
    label: string
    value: number
  }>
  search: string
  getInputProps: () => GetInputPropsReturn
  debouncedValue: string
  modalState: ModalStateReturn
  datePersonalizeInitial: DatePickerStateReturn
  datePersonalizeFinal: DatePickerStateReturn
  salveDatePersonalizate: () => void
  pagination: UsePaginationReturn
}

export const ContextLists = React.createContext<ContextLists>({
  gridLists: {} as DataGridState<ItemsLists>,
  view: {} as DataViewState,
  dateState: {} as UseFilterStateReturn<{
    id: string
    label: string
    value: number
  }>,
  statusState: {} as UseFilterStateReturn<{
    id: string
    label: string
    value: number
  }>,
  search: '',
  getInputProps: () => ({} as GetInputPropsReturn),
  debouncedValue: '',
  modalState: {} as ModalStateReturn,
  datePersonalizeInitial: {} as DatePickerStateReturn,
  datePersonalizeFinal: {} as DatePickerStateReturn,
  salveDatePersonalizate: () => {},
  pagination: {} as UsePaginationReturn,
})

export function useLists() {
  return useContext(ContextLists)
}

```


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

[User] Show me the implementation of admin-list/react/hooks/useInterface.tsx from the admin-list VTEX app.

[Assistant]
Here's the implementation:

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

interface ContextInterface {
  searchEmailFilter: string | undefined
  setSearchEmailFilter: (searchEmailFilter: string) => void
  tableLists: boolean
  setTableLists: (tableLists: boolean) => void
  infoUserList: TotalizerListsUsers | undefined
  setInfoUserList: (infoUserList: TotalizerListsUsers) => void
}

export const ContextInterface = React.createContext<ContextInterface>({
  searchEmailFilter: '',
  setSearchEmailFilter: () => {},
  tableLists: false,
  setTableLists: () => {},
  infoUserList: undefined,
  setInfoUserList: () => {},
})

export function useInterface() {
  return useContext(ContextInterface)
}

```


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

[User] Show me the implementation of massive-collection-update/docs/README.md from the massive-collection-update VTEX app.

[Assistant]
Here's the implementation:

```markdown
#  ⚠ Maintenance ⚠
*This application is not maintained by VTEX. This was developed as community gift by community members of VTEX. Feel free to use it at your own risk. This APP is a BETA, hence the 0.x version.*

# ---

# MASSIVE COLLECTION UPDATE

This application exposes an endpoint of massive collection updates. To add items or to remove items from subcollections. In order to get the subCollectionId from a Collection, you can refer to this endpoint.
[link](https://developers.vtex.com/docs/api-reference/catalog-api#get-/api/catalog/pvt/collection/-collectionId-/subcollection)

---

```shell
POST https://{{workspace}}--{{accountName}}.myvtex.com/_v/massive/collection/add

POST https://{{workspace}}--{{accountName}}.myvtex.com/_v/massive/collection/remove

```

## Curl

```shell
curl --location --request PUT 'https://{{workspace}}--{{accountName}}.myvtex.com/_v/massive/collection/add' \
--header 'VtexIdClientAutCookie: "" \
--header 'Content-Type: application/json' \
--data-raw '[
    {
        "sku": 1,
        "subCollectionId": 1
    }
]'
```

## Specification

### Headers

- Required
  - Accept : application/json
  - Content-Type : application/json; charset=utf-8
  - VtexIdclientAutCookie : `eyJhbGciOi...`
  OR
  - X-VTEX-API-AppKey : `app key`
  - X-VTEX-API-AppToken : `app token`

### Path params

- Required
  - sku [int32]
  - subCollectionId [int32] || [string]

> Read the API information for more information [link](https://developers.vtex.com/docs/api-reference/catalog-api#post-/api/catalog/pvt/subcollection/-subCollectionId-/stockkeepingunit)

### Request body example

```json
[
  {
    "sku": 12,
    "subCollectionId": 47
  }
]
```

### Success Response body example

```json
{
  "successfulResponses": {
    "elements": [
      {
        "sku": 12,
        "success": true,
        "subCollectionId": 47
      }
    ],
    "quantity": 1
  },
  "failedResponses": {
    "elements": [],
    "quantity": 0
  },
  "total": 1
}
```

### Error Response body example

```json
{
  "failedResponses": {
    "elements": [
      [
        {
          "sku": 145,
          "success": "false",
          "error": 400,
          "errorMessage": "The request is invalid: The 'subCollectionId' field is required."
        }
      ]
    ],
    "quantity": 1
  }
}
```

---

## Credentials

### What Header to use?

You can use the following headers:

- X-VTEX-API-AppKey
- X-VTEX-API-AppToken

Or

- VtexIdClientAutCookie

### Create appKey y appToken

To generate app keys in your account, you should follow the instructions seen in the [Application Keys](https://help.vtex.com/en/tutorial/application-keys--2iffYzlvvz4BDMr6WGUtet) article in our Help Center.

### Create role

[Create a role](https://help.vtex.com/en/tutorial/perfiles-de-acceso--7HKK5Uau2H6wxE1rH5oRbc) with the following resources and add your user to that role

- Catalog / Catalog access / Catalog full access

### Convert to JWT

Make a call with the credentials created. The result, if the credentials are valid, will return a token that will be used as the value in the header 'VtexIdclientAutCookie' requested by the massive-stock-update component.

```shell
>>>>>>> 91953ff0fc5154ad45335f9f2a8dbc6141fadf81
curl --location --request POST 'https://vtexid.vtexcommercestable.com.br/api/vtexid/apptoken/login' \
--header 'Content-Type: application/json' \
--data-raw '{
    "appkey": "...",
    "apptoken": "..."
}'
```

## Contributors

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

@Fbenitez97
@Edyespinal

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 massive-collection-update/node/service.json from the massive-collection-update VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "memory": 256,
  "ttl": 10,
  "timeout": 60,
  "minReplicas": 10,
  "maxReplicas": 20,
  "workers": 2,
  "routes": {
    "addItem": {
      "path": "/_v/massive/collection/add",
      "public": true
    },
    "removeItem": {
      "path": "/_v/massive/collection/remove",
      "public": true
    }
  }
}

```


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

[User] Show me the implementation of massive-collection-update/node/utils.ts from the massive-collection-update VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { AuthenticationError, ForbiddenError, UserInputError } from '@vtex/api'
import type { AxiosError } from 'axios'

export const BUCKET_NAME = 'product-translation'
export const ALL_TRANSLATIONS_FILES = 'all-translations'

export const statusToError = (e: AxiosError) => {
  if (!e.response) {
    throw e
  }

  const {
    response: { status },
  } = e

  switch (status) {
    case 401: {
      throw new AuthenticationError(e)
    }

    case 403: {
      throw new ForbiddenError(e)
    }

    case 400: {
      throw new UserInputError(e)
    }

    default:
      throw new TypeError(e.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 massive-collection-update/node/package.json from the massive-collection-update VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "license": "MIT",
  "dependencies": {
    "co-body": "^6.0.0",
    "ramda": "^0.25.0",
    "graphql": "^14.5.8"
  },
  "devDependencies": {
    "@types/co-body": "^0.0.3",
    "@types/graphql": "^14.5.0",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.0.0",
    "@types/ramda": "types/npm-ramda#dist",
    "@vtex/api": "6.46.0",
    "@vtex/test-tools": "^1.0.0",
    "@vtex/tsconfig": "^0.5.6",
    "typescript": "3.9.7",
    "vtex.massive-collection-update": "https://colec--vtexspain.myvtex.com/_v/private/typings/linked/v1/vtex.massive-collection-update@0.0.1+build1703003843/public/_types/react"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty"
  },
  "version": "3.1.11"
}

```


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

[User] Show me the implementation of massive-collection-update/node/index.ts from the massive-collection-update VTEX app.

[Assistant]
Here's the implementation:

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

import { Clients } from './clients'
import { addItemMiddleware } from './middlewares/addItemMiddleware'
import { removeItemMiddleware } from './middlewares/removeItemMiddleware'
import { auth } from './middlewares/validateMiddleware'

const TIMEOUT_MS = 600000

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

metrics.trackCache('status', memoryCache)

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

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

  // The shape of our State object found in `ctx.state`. This is used as state bag to communicate between middlewares.
  interface State extends RecorderState {
    validatedBody: UpdateRequest[],
    userProfile?: UserProfile,
    // Added in the state via auth middleware when request has appkey and apptoken.
    appkey?: string
  }
}

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

```


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

[User] Show me the implementation of massive-collection-update/node/clients/collectionClient.ts from the massive-collection-update VTEX app.

[Assistant]
Here's the implementation:

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

export default class collectionClient extends JanusClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super(context, {
      ...options,
      headers: {
        'Content-Type': 'application/json; charset=utf-8',
        Accept: 'application/json',
        VtexIdClientAutCookie: context.authToken
          },
    })
  }

  // eslint-disable-next-line max-params
  public async addItem(
    subCollectionId?: number | string,
    body?: any
  ): Promise<IOResponse<string>> {

    const url = `http://${this.context.account}.vtexcommercestable.com.br/api/catalog/pvt/subcollection/${subCollectionId}/stockkeepingunit`

    return this.http.post(url, body)
  }

  public async removeItem(
    subCollectionId?: number | string,
    skuId?: number | string,
  ): Promise<IOResponse<string>> {
    const url = `http://${this.context.account}.vtexcommercestable.com.br/api/catalog/pvt/subcollection/${subCollectionId}/stockkeepingunit/${skuId}`

    return this.http.delete(url)
  }
}

```


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

[User] Show me the implementation of massive-collection-update/node/clients/vtexId.ts from the massive-collection-update VTEX app.

[Assistant]
Here's the implementation:

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

interface VtexIdLoginResponse {
  authStatus: string
  token: string
  expires: number
}

interface AuthenticatedUser {
  userId: string
  user: string
  userType: string
}

export class VtexId extends JanusClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super(context, {
      ...options,
      headers: {
        ...options?.headers,
        'x-vtex-user-agent': context.userAgent,
      },
    })
  }

  public login({
    appkey,
    apptoken,
  }: {
    appkey: string
    apptoken: string
  }): Promise<VtexIdLoginResponse> {
    return this.http.post(
      '/api/vtexid/apptoken/login',
      {
        appkey,
        apptoken,
      },
      {
        metric: 'vtexid-login',
      }
    )
  }

  public getAuthenticatedUser(
    authToken: string
  ): Promise<AuthenticatedUser | null> {
    return this.http.get('/api/vtexid/pub/authenticated/user/', {
      metric: 'vtexid-get-authenticated-user',
      params: {
        authToken,
      },
    })
  }
}
```


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

[User] Show me the implementation of massive-collection-update/node/clients/index.ts from the massive-collection-update VTEX app.

[Assistant]
Here's the implementation:

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

import collectionClient from './collectionClient'
import { VtexId } from './vtexId'

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

  public get vtexId() {
    return this.getOrSet('vtexId', VtexId)
  }

  public get sphinx() {
    return this.getOrSet('sphinx', Sphinx)
  }
}

```


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

[User] Show me the implementation of massive-collection-update/node/typings/authentication.d.ts from the massive-collection-update VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface AuthValidationResponse {
  authStatus: string
  token: string
  expires: number
}

interface UserProfile {
  email: string
  userId: string
  firstName?: string
  lastName?: string
  role: 'admin' | 'store-user'
}
```


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

[User] Show me the implementation of massive-collection-update/node/typings/collection.d.ts from the massive-collection-update VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface UpdateRequest {
    sku: number
    subCollectionId?: number | string
  }

  interface UpdateResponse {
    sku: number
    subCollectionId?: number | string
    success: string
    error?: number | string
    errorMessage?: string
  }

```


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

[User] Show me the implementation of massive-collection-update/node/middlewares/addItemMiddleware.ts from the massive-collection-update VTEX app.

[Assistant]
Here's the implementation:

```typescript
export async function addItemMiddleware(
    ctx: Context,
    next: () => Promise<any>
  ) {
    const {
      clients: { collectionClient },
      state: { validatedBody },
    } = ctx

    const responseList: UpdateResponse[] = []

    try {
      const expected = await operationRetry(
        await Promise.all(
          validatedBody.map(async (item) => {
            return addItem(item)
          })
        )
      )

      if (expected) {
        const successfulResponses: UpdateResponse[] = responseList.filter((e) => {
          return e.success !== 'false'
        })

        const failedResponses: UpdateResponse[] = responseList.filter((e) => {
          return e.success === 'false'
        })

        ctx.status = 200
        ctx.body = {
          successfulResponses: {
            elements: successfulResponses,
            quantity: successfulResponses.length,
          },
          failedResponses: {
            elements: failedResponses,
            quantity: failedResponses.length,
          },
          total: responseList.length,
        }

        await next()
      }
    } catch (error) {
        console.log("500 error pako", error)
      ctx.status = 500
      ctx.body = error
      await next()
    }

    async function addItem(
      updateRequest: UpdateRequest
    ): Promise<UpdateResponse> {
      const {
        subCollectionId
      } = updateRequest

      try {
        //const vtexIdToken = ctx.get('VtexIdclientAutCookie') ?? ''
        //const appKey = ctx.get('X-VTEX-API-AppKey') ?? ''
        //const appToken = ctx.get('X-VTEX-API-AppToken') ?? ''

        const updateCollectionClientResponse = await collectionClient.addItem(
          subCollectionId,
          {"SkuId": updateRequest.sku}
        )

        const addItemMiddlewareResponse: UpdateResponse = {
          sku: updateRequest.sku,
          success: updateCollectionClientResponse.data,
          subCollectionId: updateRequest.subCollectionId
        }

        return addItemMiddlewareResponse
      } catch (error)

      { console.log("paco:", error)
        const data = error.response ? error.response.data : ''
        const updateCollectionClientErrorResponse = {
          sku: updateRequest.sku,
          success: 'false',
          subCollectionId: updateRequest.subCollectionId,
          error: error.response ? error.response.status : 500,
          errorMessage: data.error ? data.error.message : data,
        }

        if (error.response && error.response.status === 429) {
            updateCollectionClientErrorResponse.errorMessage = error.response
            ? error.response.headers['ratelimit-reset']
            : '0'
        }

        return updateCollectionClientErrorResponse
      }
    }

    async function operationRetry(
      updateResponseList: UpdateResponse[]
    ): Promise<any> {
      addResponsesSuccessfulUpdates(updateResponseList)

      const response = await findStoppedRequests(updateResponseList)

      return response
    }

    async function findStoppedRequests(
      // eslint-disable-next-line @typescript-eslint/no-shadow
      responseList: UpdateResponse[]
    ): Promise<any> {
      const retryList: UpdateRequest[] = []
      let value = '0'

      if (responseList.length >= 1) {
        for (const index in responseList) {
          const response = responseList[index]

          if (response.error && response.error === 429) {
            if (response.errorMessage && response.errorMessage > value) {
              value = response.errorMessage
            }

            if (value === '0') {
              value = '20'
            }

            retryList.push({
              sku: response.sku,
              subCollectionId: response.subCollectionId
            })
          }
        }
      }

      if (retryList.length >= 1) {
        let retryOperation: UpdateResponse[] = []

        const awaitTimeout = (delay: string) =>
          new Promise((resolve) => setTimeout(resolve, parseFloat(delay) * 1000))

        await awaitTimeout(value)

        retryOperation = await Promise.all(
          retryList.map(async (item) => {
            return addItem(item)
          })
        )

        return operationRetry(retryOperation)
      }

      return true
    }

    function addResponsesSuccessfulUpdates(
      updateResponseList: UpdateResponse[]
    ): void {
      for (const index in updateResponseList) {
        const updateResponse = updateResponseList[index]

        if (updateResponse.error !== 429) {
          responseList.push(updateResponse)
        }
      }
    }
  }
```


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

[User] Show me the implementation of massive-collection-update/node/middlewares/validateMiddleware.ts from the massive-collection-update VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { AuthenticationError, UserInputError } from '@vtex/api'
import { json } from 'co-body'

export async function auth(ctx: Context, next: () => Promise<void>) {
  const {
    header,
    clients: { vtexId, sphinx },
    state,
  } = ctx

  const appkey = header['x-vtex-api-appkey'] as string | undefined
  const apptoken = header['x-vtex-api-apptoken'] as string | undefined
  const authCookie = header.vtexidclientautcookie as string | undefined

  const requestList = await json(ctx.req)
  const errorList: any[] = []

  function requestValidator(request: UpdateRequest): void {
    const requestErrorList: UpdateResponse[] = []

    const {
      sku,
      subCollectionId
    } = request

    if (typeof sku !== 'number') {
      requestErrorList.push(errorResponseGenerator('sku'))
    }

    if (typeof subCollectionId !== 'string' && typeof subCollectionId !== 'number') {
      requestErrorList.push(errorResponseGenerator('subCollectionId'))
    }

    if (requestErrorList.length >= 1) {
      errorList.push(requestErrorList)
    }

    function errorResponseGenerator(field: string): UpdateResponse {
      return {
        sku,
        subCollectionId,
        success: 'false',
        error: 400,
        errorMessage: `The request is invalid: The '${field}' field is required.`,
      }
    }
  }

  try {
    for (const request of requestList) {
      requestValidator(request)
    }
  } catch (error) {
    throw new UserInputError(error)
  }

  if (errorList.length >= 1) {
    ctx.status = 400
    ctx.body = {
      failedResponses: {
        elements: errorList,
        quantity: errorList.length,
      },
    }

    return
  }

  ctx.state.validatedBody = requestList

  if (authCookie) {
    const authenticatedUser = await vtexId.getAuthenticatedUser(authCookie)

    // When the auth cookie is invalid, the API returns null
    if (authenticatedUser) {
      const isAdmin = await sphinx.isAdmin(authenticatedUser.user)

      const { user, userId } = authenticatedUser

      state.userProfile = {
        userId,
        email: user,
        role: isAdmin ? 'admin' : 'store-user',
      }

      if (isAdmin) {
        ctx.vtex.adminUserAuthToken = authCookie
      }
    }
  }

  if (appkey && apptoken) {
    // If appkey and apptoken are not valid, the method throws a 401 error
    const { token } = await vtexId.login({ appkey, apptoken })

    state.appkey = appkey
    ctx.vtex.adminUserAuthToken = token
  }

  const { userProfile, appkey: appKeyState } = state

  // Either userProfile or appKeyState must be on state to continue
  if (!userProfile && !appKeyState) {
    throw new AuthenticationError('Request failed with status code 401')
  }
  await next()
}
```


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

[User] Show me the implementation of massive-collection-update/node/middlewares/removeItemMiddleware.ts from the massive-collection-update VTEX app.

[Assistant]
Here's the implementation:

```typescript
export async function removeItemMiddleware(
    ctx: Context,
    next: () => Promise<any>
  ) {
    const {
      clients: { collectionClient },
      state: { validatedBody },
    } = ctx

    const responseList: UpdateResponse[] = []

    try {
      const expected = await operationRetry(
        await Promise.all(
          validatedBody.map(async (item) => {
            return removeItem(item)
          })
        )
      )

      if (expected) {
        const successfulResponses: UpdateResponse[] = responseList.filter((e) => {
          return e.success !== 'false'
        })

        const failedResponses: UpdateResponse[] = responseList.filter((e) => {
          return e.success === 'false'
        })

        ctx.status = 200
        ctx.body = {
          successfulResponses: {
            elements: successfulResponses,
            quantity: successfulResponses.length,
          },
          failedResponses: {
            elements: failedResponses,
            quantity: failedResponses.length,
          },
          total: responseList.length,
        }

        await next()
      }
    } catch (error) {
      ctx.status = 500
      ctx.body = error
      await next()
    }

    async function removeItem(
      updateRequest: UpdateRequest
    ): Promise<UpdateResponse> {
      const {
        subCollectionId,
        sku
      } = updateRequest

      try {

        const updateCollectionClientResponse = await collectionClient.removeItem(
          subCollectionId,
          sku
        )

        const removeItemMiddlewareResponse: UpdateResponse = {
          sku: updateRequest.sku,
          success: updateCollectionClientResponse.data,
          subCollectionId: updateRequest.subCollectionId
        }

        return removeItemMiddlewareResponse
      } catch (error) {
        const data = error.response ? error.response.data : ''
        const updateCollectionClientErrorResponse = {
          sku: updateRequest.sku,
          success: 'false',
          subCollectionId: updateRequest.subCollectionId,
          error: error.response ? error.response.status : 500,
          errorMessage: data.error ? data.error.message : data,
        }

        if (error.response && error.response.status === 429) {
            updateCollectionClientErrorResponse.errorMessage = error.response
            ? error.response.headers['ratelimit-reset']
            : '0'
        }

        return updateCollectionClientErrorResponse
      }
    }

    async function operationRetry(
      updateResponseList: UpdateResponse[]
    ): Promise<any> {
      addResponsesSuccessfulUpdates(updateResponseList)

      const response = await findStoppedRequests(updateResponseList)

      return response
    }

    async function findStoppedRequests(
      // eslint-disable-next-line @typescript-eslint/no-shadow
      responseList: UpdateResponse[]
    ): Promise<any> {
      const retryList: UpdateRequest[] = []
      let value = '0'

      if (responseList.length >= 1) {
        for (const index in responseList) {
          const response = responseList[index]

          if (response.error && response.error === 429) {
            if (response.errorMessage && response.errorMessage > value) {
              value = response.errorMessage
            }

            if (value === '0') {
              value = '20'
            }

            retryList.push({
              sku: response.sku,
              subCollectionId: response.subCollectionId
            })
          }
        }
      }

      if (retryList.length >= 1) {
        let retryOperation: UpdateResponse[] = []

        const awaitTimeout = (delay: string) =>
          new Promise((resolve) => setTimeout(resolve, parseFloat(delay) * 1000))

        await awaitTimeout(value)

        retryOperation = await Promise.all(
          retryList.map(async (item) => {
            return removeItem(item)
          })
        )

        return operationRetry(retryOperation)
      }

      return true
    }

    function addResponsesSuccessfulUpdates(
      updateResponseList: UpdateResponse[]
    ): void {
      for (const index in updateResponseList) {
        const updateResponse = updateResponseList[index]

        if (updateResponse.error !== 429) {
          responseList.push(updateResponse)
        }
      }
    }
  }
```


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

[User] Show me the implementation of sku-list/messages/th-TH.json from the sku-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-quantity.quantity": "จำนวน",
  "store/specifications.title": "ข้อกำหนดคุณลักษณะ",
  "store/add-to-cart.success": "เพิ่มสินค้าลงในรถเข็นของคุณแล้ว",
  "store/add-to-cart.duplicate": "สินค้าอยู่ในรถเข็นของคุณแล้ว",
  "store/add-to-cart.failure": "มีบางอย่างผิดพลาดและเพิ่มสินค้าลงในรถเข็นของคุณไม่ได้!",
  "store/add-to-cart.see-cart": "ดูรถเข็น",
  "store/add-to-cart.add-to-cart": "เพิ่มลงในรถเข็น",
  "store/add-to-cart.select-sku-variations": "กรุณาเลือกตัวเลือกของแต่ละรุ่นสินค่า",
  "store/sku-list.inventory.title": "สินค้าคงคลัง",
  "store/sku-list.seller.name.title": "ผู้ขาย",
  "store/sku-list.sku.name.title": "ชื่อสินค้า",
  "store/sku-list.sku.price.title": "ราคา",
  "store/sku-list.sku.quantity-selector.title": "เลือกจำนวน",
  "store/sku-list.seller.price.title": "ราคาผู้ขาย",
  "admin/editor.sku-list.highlights.title": "ไฮไลต์ของสินค้า",
  "admin/editor.sku-list.highlights.description": "คอมโพเนนต์ไฮไลต์ของสินค้า",
  "admin/editor.sku-list.highlights.default": "เลือกไฮไลต์เริ่มต้น",
  "admin/editor.sku-list.highlights.allSpecifications": "ข้อกำหนดคุณลักษณะทั้งหมด",
  "admin/editor.sku-list.highlights.chooseDefaultSpecification": "ข้อกำหนดคุณลักษณะฟิลด์",
  "admin/editor.sku-list.highlights.typeSpecifications.title": "พิมพ์ข้อกำหนดคุณลักษณะด้านล่าง",
  "admin/editor.sku-list.highlights.showHighlight.title": "แสดงไฮไลต์",
  "admin/editor.sku-list.highlights.showLabel.title": "แสดงป้ายข้อความ",
  "admin/editor.sku-list.inventory.title": "สินค้า SKU คงคลัง",
  "admin/editor.sku-list.inventory.description": "คอมโพเนนต์สินค้า SKU คงคลัง",
  "admin/editor.sku-list.inventory.showLabel.title": "แสดงป้ายข้อความ",
  "admin/editor.sku-list.item-quantity.title": "จำนวน SKU",
  "admin/editor.sku-list.item-quantity.description": "คอมโพเนนต์จำนวน SKU",
  "admin/editor.sku-list.item-quantity.inputType.title": "ประเภทตัวเลือกจำนวน",
  "admin/editor.sku-list.item-quantity.inputType.stepper": "การป้อนตัวเลข",
  "admin/editor.sku-list.item-quantity.inputType.number": "การป้อนตัวเลข",
  "admin/editor.sku-list.item-quantity.showLabel.title": "แสดงป้ายข้อความ",
  "admin/test": "ทดสอบ",
  "store/test": "ทดสอบ"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/product-quantity.quantity": "Quantidade",
  "store/specifications.title": "Especificações",
  "store/add-to-cart.success": "Item adicionado ao seu carrinho",
  "store/add-to-cart.duplicate": "Item já no seu carrinho",
  "store/add-to-cart.failure": "Algo deu errado e o item não pôde ser adicionado ao seu carrinho!",
  "store/add-to-cart.see-cart": "Ver carrinho",
  "store/add-to-cart.add-to-cart": "Adicionar ao carrinho",
  "store/add-to-cart.select-sku-variations": "Por favor selecione uma opção de cada variação",
  "store/sku-list.inventory.title": "Inventário",
  "store/sku-list.seller.name.title": "Vendedor",
  "store/sku-list.sku.name.title": "Nome do item",
  "store/sku-list.sku.price.title": "Preço",
  "store/sku-list.sku.quantity-selector.title": "Selecione a quantidade",
  "store/sku-list.seller.price.title": "Preço do Vendedor",
  "admin/editor.sku-list.highlights.title": "Destaques do item",
  "admin/editor.sku-list.highlights.description": "Componente Destaques do Item",
  "admin/editor.sku-list.highlights.default": "Escolha o destaque padrão",
  "admin/editor.sku-list.highlights.allSpecifications": "Todas as especificações",
  "admin/editor.sku-list.highlights.chooseDefaultSpecification": "Especificações personalizadas",
  "admin/editor.sku-list.highlights.typeSpecifications.title": "Escreve as especificações abaixo",
  "admin/editor.sku-list.highlights.showHighlight.title": "Mostrar destaques",
  "admin/editor.sku-list.highlights.showLabel.title": "Mostrar marcador",
  "admin/editor.sku-list.inventory.title": "Inventário de SKU",
  "admin/editor.sku-list.inventory.description": "Componente de inventário de SKU",
  "admin/editor.sku-list.inventory.showLabel.title": "Mostrar marcador",
  "admin/editor.sku-list.item-quantity.title": "Quantidade de SKU",
  "admin/editor.sku-list.item-quantity.description": "Componente de quantidade do SKU",
  "admin/editor.sku-list.item-quantity.inputType.title": "Tipo de seletor de quantidade",
  "admin/editor.sku-list.item-quantity.inputType.stepper": "Stepper numérico",
  "admin/editor.sku-list.item-quantity.inputType.number": "Entrada de número",
  "admin/editor.sku-list.item-quantity.showLabel.title": "Mostrar marcador",
  "admin/test": "teste",
  "store/test": "teste"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/product-quantity.quantity": "Quantity",
  "store/specifications.title": "Specifications",
  "store/add-to-cart.success": "Item added to your cart",
  "store/add-to-cart.duplicate": "Item already in your cart",
  "store/add-to-cart.failure": "Something went wrong and the item was not added to your cart!",
  "store/add-to-cart.see-cart": "View cart",
  "store/add-to-cart.add-to-cart": "Add to cart",
  "store/add-to-cart.select-sku-variations": "Please select an option of each variation",
  "store/sku-list.inventory.title": "Inventory",
  "store/sku-list.seller.name.title": "Seller",
  "store/sku-list.sku.name.title": "Item Name",
  "store/sku-list.sku.price.title": "Price",
  "store/sku-list.sku.quantity-selector.title": "Select Quantity",
  "store/sku-list.seller.price.title": "Seller Price",
  "admin/editor.sku-list.highlights.title": "Item Highlights",
  "admin/editor.sku-list.highlights.description": "Item Highlights Component",
  "admin/editor.sku-list.highlights.default": "Choose Default Highlight",
  "admin/editor.sku-list.highlights.allSpecifications": "All Specifications",
  "admin/editor.sku-list.highlights.chooseDefaultSpecification": "Fields Specifications",
  "admin/editor.sku-list.highlights.typeSpecifications.title": "Type specifications below",
  "admin/editor.sku-list.highlights.showHighlight.title": "Show highlights",
  "admin/editor.sku-list.highlights.showLabel.title": "Show label",
  "admin/editor.sku-list.inventory.title": "SKU Inventory",
  "admin/editor.sku-list.inventory.description": "SKU inventory component",
  "admin/editor.sku-list.inventory.showLabel.title": "Show label",
  "admin/editor.sku-list.item-quantity.title": "SKU Quantity",
  "admin/editor.sku-list.item-quantity.description": "SKU quantity component",
  "admin/editor.sku-list.item-quantity.inputType.title": "Quantity selector type",
  "admin/editor.sku-list.item-quantity.inputType.stepper": "Numeric stepper",
  "admin/editor.sku-list.item-quantity.inputType.number": "Number input",
  "admin/editor.sku-list.item-quantity.showLabel.title": "Show label",
  "admin/test": "test",
  "store/test": "test"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/product-quantity.quantity": "Quantity",
  "store/specifications.title": "Specifications",
  "store/add-to-cart.success": "Item added to your cart",
  "store/add-to-cart.duplicate": "Item already in your cart",
  "store/add-to-cart.failure": "Something went wrong and the item was not added to your cart!",
  "store/add-to-cart.see-cart": "View cart",
  "store/add-to-cart.add-to-cart": "Add to cart",
  "store/add-to-cart.select-sku-variations": "Please select an option of each variation",
  "store/sku-list.inventory.title": "Inventory",
  "store/sku-list.seller.name.title": "Seller",
  "store/sku-list.sku.name.title": "Item Name",
  "store/sku-list.sku.price.title": "Price",
  "store/sku-list.sku.quantity-selector.title": "Select Quantity",
  "store/sku-list.seller.price.title": "Seller Price",
  "admin/editor.sku-list.highlights.title": "Sku Highlights",
  "admin/editor.sku-list.highlights.description": "Sku Highlights Component",
  "admin/editor.sku-list.highlights.default": "Choose Default Highlight",
  "admin/editor.sku-list.highlights.allSpecifications": "All Specifications",
  "admin/editor.sku-list.highlights.chooseDefaultSpecification": "Fields Specifications",
  "admin/editor.sku-list.highlights.typeSpecifications.title": "Type specifications below",
  "admin/editor.sku-list.highlights.showHighlight.title": "Show highlights",
  "admin/editor.sku-list.highlights.showLabel.title": "Show label",
  "admin/editor.sku-list.inventory.title": "SKU Inventory",
  "admin/editor.sku-list.inventory.description": "SKU inventory component",
  "admin/editor.sku-list.inventory.showLabel.title": "Show label",
  "admin/editor.sku-list.item-quantity.title": "SKU Quantity",
  "admin/editor.sku-list.item-quantity.description": "SKU quantity component",
  "admin/editor.sku-list.item-quantity.inputType.title": "Quantity selector type",
  "admin/editor.sku-list.item-quantity.inputType.stepper": "Numeric stepper",
  "admin/editor.sku-list.item-quantity.inputType.number": "Number input",
  "admin/editor.sku-list.item-quantity.showLabel.title": "Show label"
}

```


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

[User] Show me the implementation of sku-list/messages/fr-FR.json from the sku-list VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/product-quantity.quantity": "Quantité",
  "store/specifications.title": "Caractéristiques",
  "store/add-to-cart.success": "Article ajouté à votre panier",
  "store/add-to-cart.duplicate": "Article déjà dans votre panier",
  "store/add-to-cart.failure": "Un problème est survenu et l’article n’a pas été ajouté à votre panier !",
  "store/add-to-cart.see-cart": "Voir le panier",
  "store/add-to-cart.add-to-cart": "Ajouter au panier",
  "store/add-to-cart.select-sku-variations": "Veuillez sélectionner une option de chaque variante",
  "store/sku-list.inventory.title": "Stock",
  "store/sku-list.seller.name.title": "Vendeur",
  "store/sku-list.sku.name.title": "Nom de l’article",
  "store/sku-list.sku.price.title": "Prix",
  "store/sku-list.sku.quantity-selector.title": "Sélectionner la quantité",
  "store/sku-list.seller.price.title": "Prix du vendeur",
  "admin/editor.sku-list.highlights.title": "Points forts de l’article",
  "admin/editor.sku-list.highlights.description": "Composant des points forts de l’article",
  "admin/editor.sku-list.highlights.default": "Choisir le point fort par défaut",
  "admin/editor.sku-list.highlights.allSpecifications": "Toutes les caractéristiques",
  "admin/editor.sku-list.highlights.chooseDefaultSpecification": "Caractéristiques des champs",
  "admin/editor.sku-list.highlights.typeSpecifications.title": "Caractéristiques de type ci-dessous",
  "admin/editor.sku-list.highlights.showHighlight.title": "Afficher les points forts",
  "admin/editor.sku-list.highlights.showLabel.title": "Afficher l’étiquette",
  "admin/editor.sku-list.inventory.title": "Stock de SKU",
  "admin/editor.sku-list.inventory.description": "Composant de stock de SKU",
  "admin/editor.sku-list.inventory.showLabel.title": "Afficher l’étiquette",
  "admin/editor.sku-list.item-quantity.title": "Quantité de SKU",
  "admin/editor.sku-list.item-quantity.description": "Composant quantité de SKU",
  "admin/editor.sku-list.item-quantity.inputType.title": "Type de sélecteur de quantité",
  "admin/editor.sku-list.item-quantity.inputType.stepper": "Pas à pas du numérique",
  "admin/editor.sku-list.item-quantity.inputType.number": "Saisie du numéro",
  "admin/editor.sku-list.item-quantity.showLabel.title": "Afficher l’étiquette",
  "admin/test": "test",
  "store/test": "test"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/product-quantity.quantity": "Cantidad",
  "store/specifications.title": "Especificaciones",
  "store/add-to-cart.success": "Ítem agregado a su carrito",
  "store/add-to-cart.duplicate": "Ítem ya en tu carrito",
  "store/add-to-cart.failure": "¡Algo salió mal y el artículo no se agregó a tu carrito!",
  "store/add-to-cart.see-cart": "Ver carrito",
  "store/add-to-cart.add-to-cart": "Agregar a su carrito",
  "store/add-to-cart.select-sku-variations": "Por favor seleccione una opción de cada variación",
  "store/sku-list.inventory.title": "Inventario",
  "store/sku-list.seller.name.title": "Vendedor",
  "store/sku-list.sku.name.title": "Nombre del árticulo",
  "store/sku-list.sku.price.title": "Precio",
  "store/sku-list.sku.quantity-selector.title": "Selecciona la cantidad",
  "store/sku-list.seller.price.title": "Precio del vendedor",
  "admin/editor.sku-list.highlights.title": "Puntos destacados del artículo",
  "admin/editor.sku-list.highlights.description": "Elemento de elementos destacados",
  "admin/editor.sku-list.highlights.default": "Elegir destaque predeterminado",
  "admin/editor.sku-list.highlights.allSpecifications": "Todas las especificaciones",
  "admin/editor.sku-list.highlights.chooseDefaultSpecification": "Especificaciones personalizadas",
  "admin/editor.sku-list.highlights.typeSpecifications.title": "Escriva las especificaciones abajo",
  "admin/editor.sku-list.highlights.showHighlight.title": "Mostrar lo más destacados",
  "admin/editor.sku-list.highlights.showLabel.title": "Mostrar etiqueta",
  "admin/editor.sku-list.inventory.title": "Inventario de SKU",
  "admin/editor.sku-list.inventory.description": "Componente de inventario de SKU",
  "admin/editor.sku-list.inventory.showLabel.title": "Mostrar etiqueta",
  "admin/editor.sku-list.item-quantity.title": "Cantidad de SKU",
  "admin/editor.sku-list.item-quantity.description": "Componente de cantidad de SKU",
  "admin/editor.sku-list.item-quantity.inputType.title": "Tipo de selector de cantidad",
  "admin/editor.sku-list.item-quantity.inputType.stepper": "Paso a paso numérico",
  "admin/editor.sku-list.item-quantity.inputType.number": "Entrada de número",
  "admin/editor.sku-list.item-quantity.showLabel.title": "Mostrar etiqueta",
  "admin/test": "teste",
  "store/test": "teste"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/product-quantity.quantity": "الكمية",
  "store/specifications.title": "المواصفات",
  "store/add-to-cart.success": "تمت إضافة المنتج إلى السلة بنجاح",
  "store/add-to-cart.duplicate": "عنصر موجود مسبقًا في عربتك",
  "store/add-to-cart.failure": "حدث خطأ ولم تتم إضافة العنصر إلى عربة التسوق الخاصة بك!",
  "store/add-to-cart.see-cart": "عرض عربة التسوق",
  "store/add-to-cart.add-to-cart": "إضافة إلى العربة",
  "store/add-to-cart.select-sku-variations": "الرجاء تحديد خيار من كل متغير",
  "store/sku-list.inventory.title": "المخزون",
  "store/sku-list.seller.name.title": "البائع",
  "store/sku-list.sku.name.title": "إسم الصنف",
  "store/sku-list.sku.price.title": "السعر",
  "store/sku-list.sku.quantity-selector.title": "تحديد الكمية",
  "store/sku-list.seller.price.title": "سعر البائع",
  "admin/editor.sku-list.highlights.title": "نقاط العنصر الرئيسية",
  "admin/editor.sku-list.highlights.description": "النقاط البارزة للعنصر",
  "admin/editor.sku-list.highlights.default": "اختر الملامح الافتراضية",
  "admin/editor.sku-list.highlights.allSpecifications": "كل المواصفات",
  "admin/editor.sku-list.highlights.chooseDefaultSpecification": "مواصفات الحقول",
  "admin/editor.sku-list.highlights.typeSpecifications.title": "نوع المواصفات أدناه",
  "admin/editor.sku-list.highlights.showHighlight.title": "عرض المواصفات",
  "admin/editor.sku-list.highlights.showLabel.title": "عرض التسمية",
  "admin/editor.sku-list.inventory.title": "مخزون SKU",
  "admin/editor.sku-list.inventory.description": "مكون مخزون SKU",
  "admin/editor.sku-list.inventory.showLabel.title": "عرض التسمية",
  "admin/editor.sku-list.item-quantity.title": "كمية SKU",
  "admin/editor.sku-list.item-quantity.description": "مكون كمية SKU",
  "admin/editor.sku-list.item-quantity.inputType.title": "نوع محدد الكمية",
  "admin/editor.sku-list.item-quantity.inputType.stepper": "خطوة رقمية",
  "admin/editor.sku-list.item-quantity.inputType.number": "إدخال الرقم",
  "admin/editor.sku-list.item-quantity.showLabel.title": "عرض التسمية",
  "admin/test": "الاختبار",
  "store/test": "الاختبار"
}
```


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

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

[Assistant]
Here's the implementation:

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

# SKU List

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

The SKU List app is an essential B2B feature responsible for rendering a SKU list in the product details page.

![sku-list](https://user-images.githubusercontent.com/52087100/85888338-c762d100-b7bf-11ea-9ca0-c808ef9641ea.png)

## Configuration

1. Add the `vtex.sku-list` app to your theme's dependencies in the `manifest.json`, for example:

```diff
  "dependencies": {
+   "vtex.sku-list": "1.x"
  }
```

Now, you are able to use all blocks exported by the `sku-list` app. Check out the full list below:

| Block name     | Description                                     |
| -------------- | ----------------------------------------------- |
| `sku-list` | Top level block in which you will declare as `children` the SKU List layout blocks according to devices (`sku-content.desktop` and the `sku-content.mobile` blocks).   |
| `sku-content.desktop` | Defines the SKU List layout for desktop devices. |
| `sku-content.mobile` | Defines the SKU List layout for mobile devices. |
| `sku-name`  | Renders the SKU name. |
| `sku-image` | Renders the SKU image. |
| `sku-seller` | Renders the SKU sellers (if it has any). It uses the `seller-name`, `seller-inventory` and `seller-price` blocks as children in order to display seller data. |
| `seller-name` | Renders the SKU seller name. |
| `seller-inventory` | Renders the SKU inventory per seller. |
| `seller-price` | Renders the SKU price per seller. |
| `sku-price` | Renders the SKU price. |
| `sku-inventory` | Renders the SKU inventory. |
| `sku-quantity-selector` | Renders a quantity selector. |
| `item-quantity` | Renders the SKU inventory. |
| `sku-buy-button` | Renders a Buy Button to add a given SKU to the minicart. |
| `item-buy-button` | Renders a Buy Button to add a given Product to the minicart. |
| `sku-specifications` | Renders the SKU specifications. |
| `sku-highlights` | Renders a highlight disclaimer for a specific SKU. |

2. In the product template (`store.product`), use the following block structure in order to rebuild the Product Details Page now including the `sku-list` blocks:

```diff
{
   "store.product": {
     "children": [
       "flex-layout.row#product-breadcrumb",
-      "flex-layout.row#product-main",
+      "flex-layout.row#images-and-items",
+      "flex-layout.row#buy-button",
       "flex-layout.row#description",
       "shelf.relatedProducts",
       "product-reviews",
       "product-questions-and-answers"
     ]
   },
+  "flex-layout.row#images-and-items": {
+    "children": [
+      "product-images",
+      "flex-layout.col#sku-list"
+    ],
+    "props": {
+      "preventHorizontalStretch": false
+    }
+  },
+  "flex-layout.col#sku-list": {
+    "children": [
+      "flex-layout.row#sku-list-header",
+      "sku-list"
+    ],
+    "props": {
+      "preventVerticalStretch": true,
+      "width": "60%",
+      "blockClass": "skuList"
+    }
+  },
+  "flex-layout.row#sku-list-header": {
+    "props": {
+      "preventHorizontalStretch": false,
+      "blockClass": "skuListHeader"
+    },
+    "children": [
+      "rich-text#certificates",
+      "rich-text#expiry-date",
+      "rich-text#inventory",
+      "rich-text#price",
+      "rich-text#quantity-selector"
+    ]
+  },
+  "rich-text#certificates": {
+    "props": {
+      "text": "**Has Certificates?**",
+      "blockClass": "skuList",
+      "width": "20%"
+    }
+  },
+  "rich-text#expiry-date": {
+    "props": {
+      "text": "**Expires at**",
+      "blockClass": "skuList",
+      "width": "20%"
+    }
+  },
+  "rich-text#inventory": {
+    "props": {
+      "text": "**Stock**",
+      "blockClass": "skuList",
+      "width": "20%"
+    }
+  },
+  "rich-text#price": {
+    "props": {
+      "text": "**Price**",
+      "blockClass": "skuList",
+      "width": "20%"
+    }
+  },
+  "rich-text#quantity-selector": {
+    "props": {
+      "text": "**Quantity**",
+      "blockClass": "skuList",
+      "width": "20%"
+    }
+  },
+  "sku-list": {
+    "blocks": [
+      "sku-content.desktop",
+      "sku-content.mobile"
+    ]
+  },
+  "sku-content.desktop": {
+    "children": [
+      "flex-layout.row#item-main-desktop"
+    ]
+  },
+  "flex-layout.row#item-main-desktop": {
+    "props": {
+      "preventHorizontalStretch": false
+    },
+    "children": [
+      "flex-layout.col#sku-highlight-certificates",
+      "flex-layout.col#sku-highlight-expiry-date",
+      "flex-layout.col#sku-inventory",
+      "flex-layout.col#sku-price",
+      "flex-layout.col#sku-quantity-selector"
+    ]
+  },
+  "flex-layout.col#sku-highlight-certificates": {
+    "props": {
+      "width": "20%"
+    },
+    "children": [
+      "sku-highlights#certificates"
+    ]
+  },
+  "sku-highlights#certificates": {
+    "props": {
+      "conditional": {
+        "highlight": "admin/editor.sku-list.highlights.chooseDefaultSpecification",
+        "typeSpecifications": "Has Certificates"
+      },
+      "showLabel": false
+    }
+  },
+  "flex-layout.col#sku-highlight-expiry-date": {
+    "props": {
+      "width": "20%"
+    },
+    "children": [
+      "sku-highlights#expiry-date"
+    ]
+  },
+  "sku-highlights#expiry-date": {
+    "props": {
+      "conditional": {
+        "highlight": "admin/editor.sku-list.highlights.chooseDefaultSpecification",
+        "typeSpecifications": "Expiry Date"
+      },
+      "showLabel": false
+    }
+  },
+  "flex-layout.col#sku-inventory": {
+    "props": {
+      "width": "20%"
+    },
+    "children": [
+      "sku-inventory#default"
+    ]
+  },
+  "sku-inventory#default": {
+    "props": {
+      "showLabel": false
+    }
+  },
+  "sku-seller#inventory": {
+    "children": [
+      "seller-inventory"
+    ]
+  },
+  "flex-layout.col#sku-price": {
+    "props": {
+      "width": "20%"
+    },
+    "children": [
+      "sku-price"
+    ]
+  },
+  "flex-layout.col#sku-quantity-selector": {
+    "props": {
+      "width": "20%"
+    },
+    "children": [
+      "sku-quantity-selector"
+    ]
+  },
+  "sku-content.mobile": {
+    "children": [
+      "flex-layout.row#item-main-mobile"
+    ]
+  },
+  "flex-layout.row#item-main-mobile": {
+    "props": {
+      "preventHorizontalStretch": false
+    },
+    "children": [
+      "flex-layout.col#sku-highlight-certificates-mobile",
+      "flex-layout.col#sku-highlight-expiry-date-mobile",
+      "flex-layout.col#sku-inventory-mobile",
+      "flex-layout.col#sku-price-mobile",
+      "flex-layout.col#sku-quantity-selector-mobile"
+    ]
+  },
+  "flex-layout.col#sku-highlight-certificates-mobile": {
+    "props": {
+      "width": "20%"
+    },
+    "children": [
+      "sku-highlights#certificates-mobile"
+    ]
+  },
+  "sku-highlights#certificates-mobile": {
+    "props": {
+      "conditional": {
+        "highlight": "admin/editor.sku-list.highlights.chooseDefaultSpecification",
+        "typeSpecifications": "Has Certificates"
+      },
+      "showLabel": true
+    }
+  },
+  "flex-layout.col#sku-highlight-expiry-date-mobile": {
+    "props": {
+      "width": "20%"
+    },
+    "children": [
+      "sku-highlights#expiry-date-mobile"
+    ]
+  },
+  "sku-highlights#expiry-date-mobile": {
+    "props": {
+      "conditional": {
+        "highlight": "admin/editor.sku-list.highlights.chooseDefaultSpecification",
+        "typeSpecifications": "Expiry Date"
+      },
+      "showLabel": true
+    }
+  },
+  "flex-layout.col#sku-inventory-mobile": {
+    "props": {
+      "width": "20%"
+    },
+    "children": [
+      "sku-inventory#default-mobile"
+    ]
+  },
+  "sku-inventory#default-mobile": {
+    "props": {
+      "showLabel": true
+    }
+  },
+  "sku-seller#inventory-mobile": {
+    "children": [
+      "seller-inventory#mobile"
+    ]
+  },
+  "seller-inventory#mobile": {
+    "props": {
+      "showLabel": true
+    }
+  },
+  "flex-layout.col#sku-price-mobile": {
+    "props": {
+      "width": "20%"
+    },
+    "children": [
+      "sku-price#mobile"
+    ]
+  },
+  "sku-price#mobile": {
+    "props": {
+      "showLabel": true
+    }
+  },
+  "flex-layout.col#sku-quantity-selector-mobile": {
+    "props": {
+      "width": "20%"
+    },
+    "children": [
+      "sku-quantity-selector"
+    ]
+  },
+  "sku-quantity-selector#mobile": {
+    "props": {
+      "showLabel": true
+    }
+  },
```

## Customization

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

| CSS Handles |
| ----------------------------------------- |
| `availableQuantityContainer`              |
| `buttonDataContainer`                     |
| `buttonItemsPrice`                        |
| `buyButtonContainer`                      |
| `buyButtonText`                           |
| `buyButtonText`                           |
| `colGroupLeadTime`                        |
| `colGroupQuantityBreak`                   |
| `colGroupUnitPrice`                       |
| `highlightContent`                        |
| `highlightTitle`                          |
| `highlightValue`                          |
| `inventory`                               |
| `inventoryContainer`                      |
| `itemHighlight`                           |
| `priceContainer`                          |
| `productPriceBreaksContainer`             |
| `productPriceBreaksContainer`             |
| `productPriceQuantityDataColumn`          |
| `productPriceTable`                       |
| `productPriceTableFooterMultipleColumn`   |
| `productPriceTableFooterRow`              |
| `productPriceTableHeader`                 |
| `productPriceTableHeaderRow`              |
| `productPriceTableHeaderRowData`          |
| `productPriceTableLeadTimeColumn`         |
| `productPriceTableMainHeader`             |
| `productPriceTablePriceColumn`            |
| `productPriceTableQuantities`             |
| `productPriceTableRow`                    |
| `productPricingTableTitle`                |
| `quantitySelectorContainer`               |
| `quantitySelectorStepper`                 |
| `quantitySelectorTitle`                   |
| `selectedSkuContentWrapper`               |
| `sellerInventory`                         |
| `sellerInventoryWrapper`                  |
| `sellerName`                              |
| `sellerPriceContainer`                    |
| `skuContentWrapper`                       |
| `skuImage`                                |
| `skuName`                                 |
| `specificationItemProperty`               |
| `specificationItemSpecifications`         |
| `specificationsTable`                     |
| `specificationsTableContainer`            |
| `specificationsTablePropertyHeading`      |
| `specificationsTableSpecificationHeading` |
| `specificationsTabsContainer`             |
| `specificationsTitle`                     |

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

## Contributors ✨

Thanks goes to these wonderful people:

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

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

<!-- DOCS-IGNORE:end -->

```


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

[User] Show me the implementation of sku-list/react/SkuContent.ts from the sku-list VTEX app.

[Assistant]
Here's the implementation:

```typescript
import SkuContent from './components/SkuContent'

export default SkuContent

```


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

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

[Assistant]
Here's the implementation:

```css
.skuVideo {
}

.skuImage {
}

.carouselGaleryCursor {
  cursor: url('./components/SkuImages/Carousel/cursor.svg') 8 8, default;
}

.carouselGaleryThumbs :global(.swiper-slide) {
  height: auto;
}

.carouselGaleryThumbs
:global(.swiper-slide):not(:global(.swiper-slide-thumb-active))
.carouselThumbBorder {
  border-width: 0px;
}

.carouselIconCaretRight,
.carouselIconCaretLeft {
  stroke: white;
  stroke-width: 0.5px;
  -webkit-filter: drop-shadow(0px 1px 1px #cacbcc);
  filter: drop-shadow(0px 1px 1px #cacbcc);
}

.carouselCursorDefault:hover {
  cursor: default;
}

.carouselImagePlaceholder {
}

/** Overrides figure css declaration from vtex-tachyons, which
 * for some reason adds margin to all figure elements */
.figure {
  margin: 0;
}

.gradientBaseBottom {
  /** TODO: use the actual bg-base token instead of a hardcoded color */
  background: linear-gradient(transparent, white);
}

.gradientBaseTop {
  /** TODO: use the actual bg-base token instead of a hardcoded color */
  background: linear-gradient(white, transparent);
}

.gradientBaseRight {
  /** TODO: use the actual bg-base token instead of a hardcoded color */
  background: linear-gradient(90deg, transparent, white);
}

.gradientBaseLeft {
  /** TODO: use the actual bg-base token instead of a hardcoded color */
  background: linear-gradient(90deg, white, transparent);
}

```


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

[User] Show me the implementation of sku-list/react/SellerName.ts from the sku-list VTEX app.

[Assistant]
Here's the implementation:

```typescript
import SellerName from './components/SellerName'

export default SellerName

```


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

[User] Show me the implementation of sku-list/react/SkuInventory.ts from the sku-list VTEX app.

[Assistant]
Here's the implementation:

```typescript
import SkuInventory from './components/SkuInventory'

export default SkuInventory

```


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

[User] Show me the implementation of sku-list/react/SkuList.ts from the sku-list VTEX app.

[Assistant]
Here's the implementation:

```typescript
import SkuList from './components/SkuList'

export default SkuList

```


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

[User] Show me the implementation of sku-list/react/ItemQuantity.ts from the sku-list VTEX app.

[Assistant]
Here's the implementation:

```typescript
import ItemQuantity from './components/ItemQuantity/ItemQuantity'

export default ItemQuantity

```


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

[User] Show me the implementation of sku-list/react/SkuName.ts from the sku-list VTEX app.

[Assistant]
Here's the implementation:

```typescript
import SkuName from './components/SkuName'

export default SkuName

```


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

[User] Show me the implementation of sku-list/react/BuyButton.ts from the sku-list VTEX app.

[Assistant]
Here's the implementation:

```typescript
import BuyButton from './components/BuyButton/Wrapper'

export default BuyButton

```


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

[User] Show me the implementation of sku-list/react/SkuSeller.ts from the sku-list VTEX app.

[Assistant]
Here's the implementation:

```typescript
import SkuSeller from './components/SkuSeller'

export default SkuSeller

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "lint": "tsc --noEmit && eslint --quiet --fix --ext ts,tsx .",
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "apollo-client": "^2.6.3",
    "classnames": "^2.2.6",
    "debounce": "^1.2.0",
    "graphql": "^14.5.8",
    "ramda": "^0.26.1",
    "react": "^16.8.6",
    "react-apollo": "^3.1.3",
    "react-content-loader": "^4.3.3",
    "react-dom": "^16.8.6",
    "react-html-parser": "^2.0.2",
    "react-id-swiper": "2.3.2",
    "react-intl": "^2.9.0",
    "react-resize-detector": "^4.2.1",
    "swiper": "github:vtex/swiper#4.5.1"
  },
  "devDependencies": {
    "@types/classnames": "^2.2.9",
    "@types/debounce": "^1.2.0",
    "@types/graphql": "^14.5.0",
    "@types/jest": "^24.0.21",
    "@types/node": "^12.12.3",
    "@types/ramda": "^0.26.33",
    "@types/react": "^16.8.22",
    "@types/react-html-parser": "^2.0.1",
    "@types/react-intl": "^2.3.18",
    "@types/react-resize-detector": "^4.2.0",
    "@vtex/test-tools": "^0.3.2",
    "@vtex/tsconfig": "^0.2.0",
    "eslint": "5.x",
    "eslint-config-vtex-react": "^5.0.1",
    "prettier": "^1.18.2",
    "prop-types": "^15.7.2",
    "typescript": "3.8.3"
  },
  "version": "1.3.0"
}

```