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

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

[Assistant]
Here's the implementation:

```typescript
type CriteoQ =
  | CriteoAccountEvent
  | CriteoSiteTypeEvent
  | CriteoEmailEvent
  | CriteoTrackTransactionEvent
  | CriteoViewHomeEvent
  | CriteoViewItemEvent
  | CriteoViewListEvent

interface CriteoEvent {
  event: string
}

interface CriteoAccountEvent extends CriteoEvent {
  event: 'setAccount'
  account: string
}

interface CriteoSiteTypeEvent extends CriteoEvent {
  event: 'setSiteType'
  type: 'm' | 't' | 'd'
}

interface CriteoEmailEvent extends CriteoEvent {
  event: 'setEmail'
  email: string[]
}

interface CriteoPixelEvent {
  tms: 'gtm-vtex'
}

interface CriteoViewHomeEvent extends CriteoEvent, CriteoPixelEvent {
  event: 'viewHome'
}

interface CriteoViewListEvent extends CriteoEvent, CriteoPixelEvent {
  event: 'viewList'
  item: string[]
}

interface CriteoViewItemEvent extends CriteoEvent, CriteoPixelEvent {
  event: 'viewItem'
  item: string
}

interface CriteoTrackTransactionEvent extends CriteoEvent, CriteoPixelEvent {
  event: 'trackTransaction'
  id: string
  item: CriteoTrackTransactionItem[]
}

interface CriteoTrackTransactionItem {
  id: string
  price: number
  quantity: number
}

```


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

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

[Assistant]
Here's the implementation:

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

```


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

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

[Assistant]
Here's the implementation:

```typescript
interface Window extends Window {
  criteo_q: CriteoQ[]
  criteo_id: 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 criteo/react/helpers/index.tsx from the criteo VTEX app.

[Assistant]
Here's the implementation:

```tsx
export async function fetchEmail(): Promise<string> {
  try {
    const { Email: email } = await (await fetch(
      '/no-cache/profileSystem/getProfile'
    )).json()
    return email
  } catch (err) {
    console.log(`Couldn't fetch logged in use email`)
    console.log(err)
  }
  return ''
}

export function getSiteType() {
  return /iPad/.test(navigator.userAgent)
    ? 't'
    : /Mobile|iP(hone|od)|Android|BlackBerry|IEMobile/.test(navigator.userAgent)
    ? 'm'
    : 'd'
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "admin/application-settings.decimals.title": "Number of decimals",
  "admin/application-settings.prices-with-tax.title": "Prices with tax",
  "admin/application-settings.decimals.description": "Set the number of decimals you want the prices to show",
  "admin/application-settings.prices-with-tax.description": "Add tax to the price shown on Google"
}

```


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

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

[Assistant]
Here's the implementation:

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

> Implements Structured Data schemas.

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

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

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="https://github.com/MatheusR42"><img src="https://avatars0.githubusercontent.com/u/16908590?v=4" width="100px;" alt=""/><br /><sub><b>Matheus Araujo</b></sub></a><br /><a href="https://github.com/vtex-apps/structured-data/commits?author=MatheusR42" title="Code">💻</a></td>
  </tr>
</table>

<!-- 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 structured-data/react/ProductList.tsx from the structured-data VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { jsonLdScriptProps } from 'react-schemaorg'
import { ItemList, WithContext, ListItem } from 'schema-dts'
import { useRuntime } from 'vtex.render-runtime'

import useAppSettings from './hooks/useAppSettings'
import { parseToJsonLD } from './Product'

interface Product {
  productName: string
  linkText: string
  link: string
  items: unknown[]
}

interface Props {
  products?: Product[]
}

export function getProductList({
  disableOffers,
  decimals,
  pricesWithTax,
  currency,
  products,
}: {
  disableOffers: boolean
  decimals: number
  pricesWithTax: boolean
  currency: string
  products?: Product[]
}) {
  if (!Array.isArray(products)) {
    return null
  }

  const productItems: ListItem[] = products.map((product, index) => {
    const [selectedItem] = product.items
    const item = parseToJsonLD({
      product,
      selectedItem,
      currency,
      disableOffers,
      decimals,
      pricesWithTax,
    })

    return {
      '@type': 'ListItem',
      position: index + 1,
      ...(item && { item }),
    }
  })

  return {
    '@context': 'https://schema.org',
    '@type': 'ItemList',
    itemListElement: productItems,
  } as WithContext<ItemList>
}

function ProductList({ products }: Props) {
  const {
    culture: { currency },
  } = useRuntime()

  const { disableOffers, decimals, pricesWithTax } = useAppSettings()
  const productListLD: WithContext<ItemList> | null = getProductList({
    disableOffers,
    decimals,
    pricesWithTax,
    currency,
    products,
  })

  if (!productListLD) {
    return null
  }

  return <script {...jsonLdScriptProps<ItemList>(productListLD)} />
}

export default ProductList

```


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

[User] Show me the implementation of structured-data/react/ProductBreadcrumb.tsx from the structured-data VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { BreadcrumbList, ListItem } from 'schema-dts'
import { jsonLdScriptProps } from 'react-schemaorg'

import { getBaseUrl } from './modules/baseUrl'

interface CategoryTreeItem {
  name: string
  href: string
}

export const getProductBreadcrumb = (
  categoryTree?: CategoryTreeItem[],
  productName?: string,
  productSlug?: string
) => {
  if (!Array.isArray(categoryTree)) {
    return null
  }

  const baseUrl = getBaseUrl()

  const categoryItems: ListItem[] = categoryTree.map((category, index) => ({
    '@type': 'ListItem',
    position: index + 1,
    name: category.name,
    item: baseUrl + category.href,
  }))

  if (productName && productSlug) {
    categoryItems.push({
      '@type': 'ListItem',
      position: categoryItems.length + 1,
      name: productName,
      item: `${baseUrl}/${productSlug}/p`,
    })
  }

  return jsonLdScriptProps<BreadcrumbList>({
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: categoryItems,
  })
}

interface Props {
  categoryTree?: CategoryTreeItem[]
  productName?: string
  productSlug?: string
}

const ProductBreadcrumbStructuredData: FC<Props> = ({
  categoryTree,
  productName,
  productSlug,
}) => {
  const breadcrumbLD = getProductBreadcrumb(
    categoryTree,
    productName,
    productSlug
  )

  if (!breadcrumbLD) {
    return null
  }

  return <script {...breadcrumbLD} />
}

export default ProductBreadcrumbStructuredData

```


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

[User] Show me the implementation of structured-data/react/SearchAction.tsx from the structured-data VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { Helmet } from 'react-helmet'
import { WebSite } from 'schema-dts'
import { helmetJsonLdProp } from 'react-schemaorg'

import { getBaseUrl } from './modules/baseUrl'

interface Props {
  searchTermPath?: string
}

function SearchAction({ searchTermPath }: Props) {
  const baseUrl = getBaseUrl()
  const path = !searchTermPath ? '/' : searchTermPath

  return (
    <Helmet
      script={[
        helmetJsonLdProp<WebSite>({
          '@context': 'https://schema.org',
          '@type': 'WebSite',
          url: baseUrl,
          potentialAction: {
            '@type': 'SearchAction',
            target: `${baseUrl}${path}{search_term_string}?map=ft`,
            // @ts-expect-error it's a valid property
            'query-input': 'required name=search_term_string',
          },
        }),
      ]}
    />
  )
}

export default SearchAction

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "structured-data",
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "apollo-client": "^2.6.8",
    "ramda": "^0.26.1",
    "react": "^16.12.0",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.12.0",
    "react-helmet": "^5.2.1",
    "react-intl": "^3.12.0",
    "react-schemaorg": "^1.3.1"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@testing-library/react-hooks": "^7.0.1",
    "@types/jest": "^25.1.4",
    "@types/node": "^13.9.8",
    "@types/ramda": "^0.26.5",
    "@types/react": "^16.9.31",
    "@types/react-helmet": "^5.0.9",
    "@vtex/test-tools": "^3.1.0",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-cache-inmemory": "^1.6.5",
    "graphql": "^14.6.0",
    "schema-dts": "^0.8.2",
    "typescript": "3.9.7",
    "vtex.apps-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.apps-graphql@3.17.4/public/@types/vtex.apps-graphql",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.134.11/public/@types/vtex.render-runtime",
    "vtex.structured-data": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.structured-data@0.12.1/public/@types/vtex.structured-data"
  },
  "version": "0.16.1"
}

```


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

[User] Show me the implementation of structured-data/react/SearchBreadcrumb.tsx from the structured-data VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { Helmet } from 'vtex.render-runtime'
import { BreadcrumbList } from 'schema-dts'
import { helmetJsonLdProp } from 'react-schemaorg'

import { getBaseUrl } from './modules/baseUrl'

interface SearchBreadcrumbItem {
  name: string
  href: string
}

const getSearchBreadcrumb = (breadcrumb?: SearchBreadcrumbItem[]) => {
  if (!Array.isArray(breadcrumb) || breadcrumb?.length === 0) {
    return {}
  }

  const baseUrl = getBaseUrl()

  return helmetJsonLdProp<BreadcrumbList>({
    '@context': 'https://schema.org',
    '@type': 'BreadcrumbList',
    itemListElement: breadcrumb.map((item, index) => ({
      '@type': 'ListItem',
      position: index + 1,
      name: item.name,
      item: baseUrl + item.href,
    })),
  })
}

interface Props {
  breadcrumb?: SearchBreadcrumbItem[]
}

const SearchBreadcrumbStructuredData: FC<Props> = ({ breadcrumb }) => {
  const breadcrumbLD = getSearchBreadcrumb(breadcrumb)

  return <Helmet script={[breadcrumbLD]} />
}

export default SearchBreadcrumbStructuredData

```


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

[User] Show me the implementation of structured-data/react/Product.d.ts from the structured-data VTEX app.

[Assistant]
Here's the implementation:

```typescript
export function parseToJsonLD({
  product,
  selectedItem,
  currency,
  disableOffers,
  decimals,
  pricesWithTax,
  userSellerDefault,
}: {
  product: unknown
  selectedItem: unknown
  currency: string
  disableOffers: boolean
  decimals: number
  pricesWithTax: boolean
  userSellerDefault?: boolean
}): {
  '@context': string
  '@type': string
  '@id': string
  name: string
  brand: {
    '@type': string
    name: string
  }
  image: string
  description: string
  gtin: string
  mpn: string
  sku: number
  category: string
  offers: {
    '@type': string
    lowPrice: number
    highPrice: number
    priceCurrency: string
    offers: Array<{
      '@type': string
      seller: {
        '@type': string
        name: string
      }
    }>
    offerCount: number
  }
}

declare const _default: import('react').MemoExoticComponent<typeof StructuredData>

export default _default

declare function StructuredData({
  product,
  selectedItem,
}: {
  product: unknown
  selectedItem: unknown
}): JSX.Element

declare namespace StructuredData {
  namespace propTypes {
    const product: unknown
    const selectedItem: unknown
  }
}

```


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

[User] Show me the implementation of structured-data/react/Product.js from the structured-data VTEX app.

[Assistant]
Here's the implementation:

```javascript
/* eslint-disable react/jsx-filename-extension */
import React, { memo } from 'react'
import { useRuntime } from 'vtex.render-runtime'
import PropTypes from 'prop-types'
// eslint-disable-next-line no-restricted-imports
import { pathOr, path, sort, last, flatten } from 'ramda'
import { jsonLdScriptProps } from 'react-schemaorg'

import useAppSettings from './hooks/useAppSettings'
import { getBaseUrl } from './modules/baseUrl'

const getSpotPrice = path(['commertialOffer', 'spotPrice'])
const getPrice = path(['commertialOffer', 'Price'])
const getTax = path(['commertialOffer', 'Tax'])
const getAvailableQuantity = pathOr(0, ['commertialOffer', 'AvailableQuantity'])

const getFinalPrice = (value, getPriceFunc, { decimals, pricesWithTax }) => {
  return pricesWithTax
    ? Math.round(
        (getPriceFunc(value) + getTax(value) + Number.EPSILON) * 10 ** decimals
      ) /
        10 ** decimals
    : getPriceFunc(value)
}

const sortByPriceAsc = sort(
  (itemA, itemB) => getSpotPrice(itemA) - getSpotPrice(itemB)
)

const sortByPriceWithTaxAsc = sort(
  (itemA, itemB) =>
    getSpotPrice(itemA) + getTax(itemA) - (getSpotPrice(itemB) + getTax(itemB))
)

const isSkuAvailable = (sku) => getAvailableQuantity(sku) > 0

const lowHighForSellers = (sellers, { pricesWithTax }) => {
  const sortedByPrice = pricesWithTax
    ? sortByPriceWithTaxAsc(sellers)
    : sortByPriceAsc(sellers)

  const withStock = sortedByPrice.filter(isSkuAvailable)

  if (withStock.length === 0) {
    return {
      low: sortedByPrice[0],
      high: last(sortedByPrice),
    }
  }

  return {
    low: withStock[0],
    high: last(withStock),
  }
}

const IN_STOCK = 'http://schema.org/InStock'
const OUT_OF_STOCK = 'http://schema.org/OutOfStock'

const getSKUAvailabilityString = (seller) =>
  isSkuAvailable(seller) ? IN_STOCK : OUT_OF_STOCK

const normalizeGTIN = (raw) => {
  if (raw === null || raw === undefined) return null
  const digits = String(raw).replace(/\D+/g, '')

  if (!digits || /^0+$/.test(digits)) return null

  const validLengths = [8, 12, 13, 14]

  if (validLengths.includes(digits.length)) return digits

  const validLengthsTarget = validLengths.find((len) => digits.length < len)

  if (validLengthsTarget) return digits.padStart(validLengthsTarget, '0')

  return null
}

const parseSKUToOffer = (
  item,
  currency,
  { decimals, pricesWithTax, useSellerDefault, gtinValue }
) => {
  const seller = useSellerDefault
    ? getSellerDefault(item.sellers)
    : lowHighForSellers(item.sellers, { pricesWithTax }).low

  const availability = getSKUAvailabilityString(seller)
  const price = getFinalPrice(seller, getSpotPrice, { decimals, pricesWithTax })

  // When a product is not available the API can't define its price and returns zero.
  // If we set structured data product price as zero, Google will show that the
  // product it's free (wrong info), but out of stock.
  // It's better just not return any offer in that case.
  if (availability === OUT_OF_STOCK && price === 0) {
    return null
  }

  const rawSkuValue = item?.[gtinValue]
  const normalizedGtin = normalizeGTIN(rawSkuValue)
  const offerSku = normalizedGtin || item.itemId

  const offer = {
    '@type': 'Offer',
    price,
    priceCurrency: currency,
    availability,
    sku: offerSku,
    itemCondition: 'http://schema.org/NewCondition',
    priceValidUntil: path(['commertialOffer', 'PriceValidUntil'], seller),
    seller: {
      '@type': 'Organization',
      name: seller ? seller.sellerName : '',
    },
  }

  return offer
}

const getAllSellers = (items) => {
  const allSellers = items.map((item) => item.sellers)
  const flat = flatten(allSellers)

  return flat
}

const getSellerDefault = (sellers) => {
  const seller = sellers.find((s) => s.sellerDefault)

  return seller
}

const composeAggregateOffer = (
  product,
  currency,
  {
    decimals,
    pricesWithTax,
    useSellerDefault,
    disableAggregateOffer,
    gtinValue,
  }
) => {
  const items = product.items || []
  const allSellers = getAllSellers(items)
  const { low, high } = lowHighForSellers(allSellers, { pricesWithTax })

  const offersList = items
    .map((element) =>
      parseSKUToOffer(element, currency, {
        decimals,
        pricesWithTax,
        useSellerDefault,
        gtinValue,
      })
    )
    .filter(Boolean)

  if (offersList.length === 0) {
    return null
  }

  if (disableAggregateOffer) {
    return offersList
  }

  const aggregateOffer = {
    '@type': 'AggregateOffer',
    lowPrice: getFinalPrice(low, getSpotPrice, { decimals, pricesWithTax }),
    highPrice: getFinalPrice(high, getPrice, { decimals, pricesWithTax }),
    priceCurrency: currency,
    offers: offersList,
    offerCount: items.length,
  }

  return aggregateOffer
}

const getCategoryName = (product) =>
  product.categoryTree &&
  product.categoryTree.length > 0 &&
  product.categoryTree[product.categoryTree.length - 1].name

function parseBrand(brand) {
  return {
    '@type': 'Brand',
    name: typeof brand === 'string' ? brand : brand.name,
  }
}

export const parseToJsonLD = ({
  product,
  selectedItem,
  currency,
  disableOffers,
  decimals,
  pricesWithTax,
  useSellerDefault,
  useImagesArray,
  disableAggregateOffer,
  gtinValue,
}) => {
  const images = selectedItem ? selectedItem.images : []
  const { brand } = product
  const name = product.productName

  const mpn =
    selectedItem?.referenceId?.[0]?.Value ||
    product?.productReference ||
    product?.productId

  const offers = composeAggregateOffer(product, currency, {
    decimals,
    pricesWithTax,
    useSellerDefault,
    disableAggregateOffer,
    gtinValue,
  })

  if (offers === null) {
    return null
  }

  const baseUrl = getBaseUrl()
  const category = getCategoryName(product)

  const rawGTIN = selectedItem?.[gtinValue]
  const gtin = normalizeGTIN(rawGTIN)

  const merchantSKU = gtin || selectedItem?.itemId || null

  const productLD = {
    '@context': 'https://schema.org/',
    '@type': 'Product',
    '@id': `${baseUrl}/${product.linkText}/p`,
    name,
    brand: parseBrand(brand),
    image: useImagesArray
      ? images.map((el) => el.imageUrl)
      : images[0]?.imageUrl || null,
    description: product.metaTagDescription || product.description,
    mpn,
    sku: merchantSKU,
    category,
    offers: disableOffers ? null : offers,
    gtin,
  }

  return productLD
}

function StructuredData({ product, selectedItem }) {
  const {
    culture: { currency },
  } = useRuntime()

  const {
    decimals,
    disableOffers,
    pricesWithTax,
    useSellerDefault,
    useImagesArray,
    disableAggregateOffer,
    gtinValue,
  } = useAppSettings()

  const productLD = parseToJsonLD({
    product,
    selectedItem,
    currency,
    disableOffers,
    decimals,
    pricesWithTax,
    useSellerDefault,
    useImagesArray,
    disableAggregateOffer,
    gtinValue,
  })

  if (!productLD) return null

  return <script {...jsonLdScriptProps(productLD)} />
}

StructuredData.propTypes = {
  product: PropTypes.object,
  selectedItem: PropTypes.object,
}

export default memo(StructuredData)

```


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

[User] Show me the implementation of structured-data/react/__fixtures__/marketplaceProductMock.js from the structured-data VTEX app.

[Assistant]
Here's the implementation:

```javascript
export const product = {
  cacheId: 'my-prod',
  productName: 'Super cellphone',
  productId: '111',
  description: 'teste',
  titleTag: 'Title',
  metaTagDescription: 'Meta',
  linkText: 'my-prod',
  productReference: '1',
  categoryId: '1',
  categories: [
    '/Tecnologia/Celulares/Smartphones/',
    '/Tecnologia/Celulares/',
    '/Tecnologia/',
  ],
  brand: 'HUAWEI',
  brandId: 1212,
  items: [
    {
      itemId: '100304479',
      name: 'Super cell item',
      nameComplete: 'super cell item complete',
      complementName: '',
      ean: '111111',
      referenceId: null,
      measurementUnit: 'un',
      unitMultiplier: 1,
      images: [
        {
          imageId: '111',
          imageLabel: null,
          imageTag: '',
          imageUrl: 'myimage.com',
          imageText: null,
        },
      ],
      videos: [],
      sellers: [
        {
          sellerId: '1',
          sellerName: 'Seller sport',
          addToCartLink: 'lala.com',
          sellerDefault: false,
          commertialOffer: {
            discountHighlights: [],
            teasers: [],
            Price: 899000,
            spotPrice: 899000,
            ListPrice: 999000,
            PriceWithoutDiscount: 899000,
            RewardValue: 0,
            PriceValidUntil: '2020-09-20T19:47:56.9849658Z',
            AvailableQuantity: 5,
            Tax: 19,
          },
        },
        {
          sellerId: '2',
          sellerName: 'seller mundo movil',
          addToCartLink: 'lala.com',
          sellerDefault: false,
          commertialOffer: {
            discountHighlights: [],
            teasers: [],
            Price: 924330,
            spotPrice: 924330,
            ListPrice: 1200000,
            PriceWithoutDiscount: 924330,
            RewardValue: 0,
            PriceValidUntil: '2020-09-20T19:47:56.9613527Z',
            AvailableQuantity: 5,
            Tax: 19,
          },
        },
        {
          sellerId: '3',
          sellerName: 'celu store',
          addToCartLink: '',
          sellerDefault: false,
          commertialOffer: {
            discountHighlights: [],
            teasers: [],
            Price: 898999,
            spotPrice: 898999,
            ListPrice: 999998,
            PriceWithoutDiscount: 898999,
            RewardValue: 0,
            PriceValidUntil: '2020-09-20T19:47:56.9593497Z',
            AvailableQuantity: 10,
            Tax: 19,
          },
        },
        {
          sellerId: '3',
          sellerName: 'fake seller',
          addToCartLink: '',
          sellerDefault: false,
          commertialOffer: {
            discountHighlights: [],
            teasers: [],
            Price: 955900,
            spotPrice: 955900,
            ListPrice: 1219900,
            PriceWithoutDiscount: 955900,
            RewardValue: 0,
            PriceValidUntil: '2020-09-20T19:47:56.9559171Z',
            AvailableQuantity: 20,
            Tax: 19,
          },
        },
        {
          sellerId: '4',
          sellerName: 'another fake seller',
          addToCartLink: 'lala.com',
          sellerDefault: true,
          commertialOffer: {
            discountHighlights: [],
            teasers: [],
            Price: 869900,
            spotPrice: 869900,
            ListPrice: 1199900,
            PriceWithoutDiscount: 869900,
            RewardValue: 0,
            PriceValidUntil: '2020-09-20T19:47:56.9502296Z',
            AvailableQuantity: 9,
            Tax: 19,
          },
        },
        {
          sellerId: '11829',
          sellerName: 'multisistemas',
          addToCartLink: '',
          sellerDefault: false,
          commertialOffer: {
            discountHighlights: [],
            teasers: [],
            Price: 899000,
            spotPrice: 899000,
            ListPrice: 1100000,
            PriceWithoutDiscount: 899000,
            RewardValue: 0,
            PriceValidUntil: '2020-09-20T19:47:56.9596485Z',
            AvailableQuantity: 9,
            Tax: 19,
          },
        },
        {
          sellerId: '1',
          sellerName: 'last seller',
          addToCartLink: '',
          sellerDefault: false,
          commertialOffer: {
            discountHighlights: [],
            teasers: [],
            Price: 0,
            spotPrice: 0,
            ListPrice: 0,
            PriceWithoutDiscount: 0,
            RewardValue: 0,
            PriceValidUntil: null,
            AvailableQuantity: 0,
            Tax: 19,
          },
        },
      ],
      variations: [],
      kitItems: [],
      attachments: [],
    },
  ],
}

```


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

[User] Show me the implementation of structured-data/react/__fixtures__/productMock.js from the structured-data VTEX app.

[Assistant]
Here's the implementation:

```javascript
export const createProduct = () => {
  return {
    cacheId: 'product-slug',
    productName: 'Product Name',
    productId: '1',
    description: 'Product Description',
    titleTag: 'Product Name',
    metaTagDescription: null,
    linkText: 'product-slug',
    categories: [
      '/Category A/',
      '/Category A/Category B/',
      '/Category A/Category B/Category C/',
    ],
    categoryId: '1',
    categoriesIds: ['/1/2/3/', '/1/2/', '/1/'],
    brand: 'Brand',
    categoryTree: [
      { id: '1', name: 'Category A', href: 'category-a' },
      { id: '2', name: 'Category B', href: 'category-a/category-b' },
      { id: '3', name: 'Category C', href: 'category-a/category-b/category-c' },
    ],
    items: [],
  }
}

export const createItem = ({
  id = '1',
  price = 90,
  spotPrice = price,
  quantity = 10,
  customFields = {},
}) => {
  return {
    itemId: id,
    name: `Item ${id}`,
    nameComplete: `Name ${id} Complete`,
    images: [
      {
        imageId: id,
        imageLabel: `${id}-Color`,
        imageTag: 'imageTag',
        imageUrl: 'imageurl.com',
        imageText: 'imageText',
      },
    ],
    sellers: [
      {
        sellerId: id,
        sellerName: 'Store Name',
        commertialOffer: {
          AvailableQuantity: quantity,
          ListPrice: price + 10,
          Price: price,
          spotPrice,
        },
      },
    ],
    ...customFields,
  }
}

```


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

[User] Show me the implementation of structured-data/react/__fixtures__/productListMock.js from the structured-data VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { createItem } from './productMock'

export const createProductList = () => {
  const item = createItem({ id: 1, price: 100, spotPrice: 100, quantity: 2 })

  return [
    {
      cacheId: 'blouse',
      productName: 'Blouse',
      productId: '1',
      description: 'Product Description',
      titleTag: 'Product Name',
      metaTagDescription: null,
      linkText: 'blouse',
      categories: [
        '/Category A/',
        '/Category A/Category B/',
        '/Category A/Category B/Category C/',
      ],
      categoryId: '1',
      categoriesIds: ['/1/2/3/', '/1/2/', '/1/'],
      brand: 'Brand',
      categoryTree: [
        { id: '1', name: 'Category A', href: 'category-a' },
        { id: '2', name: 'Category B', href: 'category-a/category-b' },
        {
          id: '3',
          name: 'Category C',
          href: 'category-a/category-b/category-c',
        },
      ],
      items: [item],
    },
    {
      cacheId: 'skirt',
      productName: 'Skirt',
      productId: '2',
      description: 'Product Description',
      titleTag: 'Product Name',
      metaTagDescription: null,
      linkText: 'skirt',
      categories: [
        '/Category A/',
        '/Category A/Category B/',
        '/Category A/Category B/Category C/',
      ],
      categoryId: '1',
      categoriesIds: ['/1/2/3/', '/1/2/', '/1/'],
      brand: 'Brand',
      categoryTree: [
        {
          id: '1',
          name: 'Category A',
          href: 'category-a',
        },
        {
          id: '2',
          name: 'Category B',
          href: 'category-a/category-b',
        },
        {
          id: '3',
          name: 'Category C',
          href: 'category-a/category-b/category-c',
        },
      ],
      items: [item],
    },
  ]
}

```


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

[User] Show me the implementation of structured-data/react/__fixtures__/unavailableProduct.js from the structured-data VTEX app.

[Assistant]
Here's the implementation:

```javascript
export const product = {
  cacheId: 'rustic-striped-vase',
  productName: 'Rustic Striped Vase',
  productId: '2000023',
  description: 'Beautiful rustic and striped vase for flowers.',
  titleTag: 'Rustic Striped Vase',
  metaTagDescription: 'Beautiful rustic and striped vase for flowers.',
  linkText: 'rustic-striped-vase',
  productReference: '999987',
  categoryId: '40',
  categories: ['/Home & Decor/'],
  brand: 'Kawasaki',
  brandId: 2000001,
  properties: [],
  specificationGroups: [
    {
      name: 'allSpecifications',
      specifications: [],
      __typename: 'SpecificationGroup',
    },
  ],
  items: [
    {
      itemId: '2000563',
      name: 'Rustic Striped Vase',
      nameComplete: 'Rustic Striped Vase',
      complementName: 'Handmade ceramic.',
      ean: '',
      referenceId: [
        {
          Key: 'RefId',
          Value: '999987',
          __typename: 'Reference',
        },
      ],
      measurementUnit: 'un',
      unitMultiplier: 1,
      images: [
        {
          imageId: '155517',
          imageLabel: 'rusticvase',
          imageTag:
            '<img src="~/arquivos/ids/155517-#width#-#height#/download--69-.png?v=636942440196570000" width="#width#" height="#height#" alt="rustic-vase" id="" />',
          imageUrl:
            'https://storecomponents.vteximg.com.br/arquivos/ids/155517/download--69-.png?v=636942440196570000',
          imageText: 'rustic-vase',
          __typename: 'Image',
        },
      ],
      videos: [],
      sellers: [
        {
          sellerId: '1',
          sellerName: 'VTEX',
          addToCartLink:
            'https://portal.vtexcommercestable.com.br/checkout/cart/add?sku=2000563&qty=1&seller=1&sc=1&price=0&cv=801c11e886cb596a5677ab2cfe4ca45a_&sc=1',
          sellerDefault: true,
          commertialOffer: {
            discountHighlights: [],
            teasers: [],
            Price: 0,
            spotPrice: 0,
            ListPrice: 0,
            PriceWithoutDiscount: 0,
            RewardValue: 0,
            PriceValidUntil: null,
            AvailableQuantity: 0,
            Tax: 0,
            CacheVersionUsedToCallCheckout: '801c11e886cb596a5677ab2cfe4ca45a_',
            Installments: [],
            __typename: 'Offer',
          },
          __typename: 'Seller',
        },
      ],
      variations: [],
      kitItems: [],
      attachments: [],
      __typename: 'SKU',
    },
  ],
  itemMetadata: null,
  productClusters: [],
  clusterHighlights: [],
  __typename: 'Product',
}

```


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

[User] Show me the implementation of structured-data/react/typings/graphql.d.ts from the structured-data VTEX app.

[Assistant]
Here's the implementation:

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

  const value: DocumentNode
  export default value
}

```


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

[User] Show me the implementation of structured-data/react/queries/getSettings.graphql from the structured-data VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getSettings {
  publicSettingsForApp(app: "vtex.structured-data", version: "0.x")
    @context(provider: "vtex.apps-graphql") {
    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 structured-data/react/__tests__/Product.test.js from the structured-data VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { clone } from 'ramda'

import { parseToJsonLD } from '../Product'
import { createProduct, createItem } from '../__fixtures__/productMock'
import { product as mktPlaceProduct } from '../__fixtures__/marketplaceProductMock'
import * as getBaseUrl from '../modules/baseUrl'

let mockDisableOffers = false
let mockDecimals = 2
let mockPricesWithTax = false
let mockUseSellerDefault = false
let mockGetBaseUrl
const mockedBaseUrl = `www.vtex.com.br`

const currency = 'BRL'

describe('Product Structured Data', () => {
  beforeAll(() => {
    mockGetBaseUrl = jest
      .spyOn(getBaseUrl, 'getBaseUrl')
      .mockReturnValue(mockedBaseUrl)
  })

  afterAll(() => {
    mockGetBaseUrl.mockRestore()
  })

  it('should fill low and high prices', () => {
    const product = createProduct()
    const cheapItem = createItem({ id: '2', price: 45, quantity: 1 })
    const expensiveItem = createItem({ id: '3', price: 60, quantity: 2 })

    mockDisableOffers = false
    mockDecimals = 2
    mockPricesWithTax = false

    product.items.push(cheapItem)
    product.items.push(expensiveItem)

    const result = parseToJsonLD({
      product,
      selectedItem: product.items[0],
      currency,
      disableOffers: mockDisableOffers,
      decimals: mockDecimals,
      pricesWithTax: mockPricesWithTax,
    })

    expect(result.offers.lowPrice).toBe(45)
    expect(result.offers.highPrice).toBe(60)
    expect(result.offers.priceCurrency).toBe(currency)
    expect(result.sku).toBe(cheapItem.itemId)
    expect(result.category).toBe('Category C')
  })

  it('should use spotPrice as lowPrice', () => {
    const product = createProduct()
    const cheapItem = createItem({
      id: '2',
      spotPrice: 40,
      price: 45,
      quantity: 1,
    })

    product.items.push(cheapItem)

    mockDisableOffers = false
    mockDecimals = 2
    mockPricesWithTax = false

    const result = parseToJsonLD({
      product,
      selectedItem: product.items[0],
      currency,
      disableOffers: mockDisableOffers,
      decimals: mockDecimals,
      pricesWithTax: mockPricesWithTax,
    })

    expect(result.offers.lowPrice).toBe(40)
    expect(result.offers.highPrice).toBe(45)
  })

  it('should handle many skus availability', () => {
    const product = createProduct()
    const unavailableItem = createItem({ id: '2', price: 0, quantity: 0 })
    const availableItem = createItem({ id: '3', price: 60, quantity: 1 })

    product.items.push(unavailableItem)
    product.items.push(availableItem)

    mockDisableOffers = false
    mockDecimals = 2
    mockPricesWithTax = false

    const result = parseToJsonLD({
      product,
      selectedItem: product.items[0],
      currency,
      disableOffers: mockDisableOffers,
      decimals: mockDecimals,
      pricesWithTax: mockPricesWithTax,
    })

    expect(result.offers.lowPrice).toBe(60)
    expect(result.offers.highPrice).toBe(60)
    expect(result.offers.priceCurrency).toBe(currency)
    expect(result.offers.offers).toHaveLength(1)
    expect(result.offers.offers[0].availability).toBe(
      'http://schema.org/InStock'
    )
  })

  it('should handle product that have only skus that are unavailable', () => {
    const productOneSku = createProduct()
    const unavailableItem = createItem({ id: '1', price: 0, quantity: 0 })

    productOneSku.items.push(unavailableItem)

    const productTwoSkus = createProduct()

    productTwoSkus.items.push(unavailableItem)
    productTwoSkus.items.push(unavailableItem)

    mockDisableOffers = false
    mockDecimals = 2
    mockPricesWithTax = false

    const resultOneSku = parseToJsonLD({
      product: productOneSku,
      selectedItem: productOneSku.items[0],
      currency,
      disableOffers: mockDisableOffers,
      decimals: mockDecimals,
      pricesWithTax: mockPricesWithTax,
    })

    const resultTwoSkus = parseToJsonLD({
      product: productTwoSkus,
      selectedItem: productTwoSkus.items[0],
      currency,
      disableOffers: mockDisableOffers,
      decimals: mockDecimals,
      pricesWithTax: mockPricesWithTax,
    })

    expect(resultOneSku).toBeNull()
    expect(resultTwoSkus).toBeNull()
  })

  it('should handle multiple sellers correctly, get correct low price and high price', () => {
    mockDisableOffers = false
    mockDecimals = 2
    mockPricesWithTax = false

    const result = parseToJsonLD({
      product: mktPlaceProduct,
      selectedItem: mktPlaceProduct.items[0],
      currency,
      disableOffers: mockDisableOffers,
      decimals: mockDecimals,
      pricesWithTax: mockPricesWithTax,
    })

    expect(result.offers.lowPrice).toBe(869900)
    expect(result.offers.highPrice).toBe(955900)
    expect(result.offers.offerCount).toBe(1)
    expect(result.offers.offers[0].price).toBe(869900)
    expect(result.offers.offers[0].seller.name).toBe('another fake seller')
  })

  it('should handle multiple sellers and multiple items correctly, get correct low price and high price', () => {
    const copyProduct = clone(mktPlaceProduct)
    const item = clone(copyProduct.items[0])

    item.sellers[2].commertialOffer.spotPrice = 1000
    copyProduct.items.push(item)

    mockDisableOffers = false
    mockDecimals = 2
    mockPricesWithTax = false

    const result = parseToJsonLD({
      product: copyProduct,
      selectedItem: copyProduct.items[0],
      currency,
      disableOffers: mockDisableOffers,
      decimals: mockDecimals,
      pricesWithTax: mockPricesWithTax,
    })

    expect(result.offers.lowPrice).toBe(1000)
    expect(result.offers.highPrice).toBe(955900)
    expect(result.offers.offerCount).toBe(2)
    expect(result.offers.offers[0].price).toBe(869900)
    expect(result.offers.offers[0].seller.name).toBe('another fake seller')
    expect(result.offers.offers[1].price).toBe(1000)
    expect(result.offers.offers[1].seller.name).toBe(item.sellers[2].sellerName)
  })

  it('should handle multiple sellers and multiple items correctly, get correct low price and high price for prices with tax', () => {
    const copyProduct = clone(mktPlaceProduct)
    const item = clone(copyProduct.items[0])

    item.sellers[2].commertialOffer.spotPrice = 1000
    copyProduct.items.push(item)

    mockDisableOffers = false
    mockDecimals = 2
    mockPricesWithTax = true

    const result = parseToJsonLD({
      product: copyProduct,
      selectedItem: copyProduct.items[0],
      currency,
      disableOffers: mockDisableOffers,
      decimals: mockDecimals,
      pricesWithTax: mockPricesWithTax,
    })

    expect(result.offers.lowPrice).toBe(1019)
    expect(result.offers.highPrice).toBe(955919)
    expect(result.offers.offerCount).toBe(2)
    expect(result.offers.offers[0].price).toBe(869919)
    expect(result.offers.offers[0].seller.name).toBe('another fake seller')
    expect(result.offers.offers[1].price).toBe(1019)
    expect(result.offers.offers[1].seller.name).toBe(item.sellers[2].sellerName)
  })

  it(`should have the product's final production URI as @id`, () => {
    const copyProduct = clone(mktPlaceProduct)

    const result = parseToJsonLD({
      product: copyProduct,
      selectedItem: copyProduct.items[0],
      currency,
    })

    expect(result['@id']).toBe(`${mockedBaseUrl}/${copyProduct.linkText}/p`)
  })

  it('should handle multiple sellers and option useSellerDefault, get correct seller name and price', () => {
    const copyProduct = clone(mktPlaceProduct)

    const [item] = copyProduct.items

    item.sellers.forEach((seller) => {
      seller.sellerDefault = seller.sellerId === '11829'
    })

    mockDecimals = 2
    mockPricesWithTax = false
    mockUseSellerDefault = true

    const result = parseToJsonLD({
      product: copyProduct,
      selectedItem: item,
      currency,
      decimals: mockDecimals,
      pricesWithTax: mockPricesWithTax,
      useSellerDefault: mockUseSellerDefault,
    })

    expect(result.offers.offers[0].seller.name).toBe('multisistemas')
    expect(result.offers.offers[0].price).toBe(899000)
  })

  it('should not fill offers if disableOffers is true', () => {
    const copyProduct = clone(mktPlaceProduct)

    mockDisableOffers = true
    mockDecimals = 2
    mockPricesWithTax = false

    const result = parseToJsonLD({
      product: copyProduct,
      selectedItem: copyProduct.items[0],
      currency,
      disableOffers: mockDisableOffers,
      decimals: mockDecimals,
      pricesWithTax: mockPricesWithTax,
    })

    expect(result.offers).toBeNull()
  })
})

```


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

[User] Show me the implementation of structured-data/react/__tests__/useAppSettings.test.jsx from the structured-data VTEX app.

[Assistant]
Here's the implementation:

```jsx
import { renderHook } from '@testing-library/react-hooks'
import { MockedProvider } from '@apollo/react-testing'
import React from 'react'

import useAppSettings from '../hooks/useAppSettings'
import GET_SETTINGS from '../queries/getSettings.graphql'

const mockQueryData = {
  request: {
    query: GET_SETTINGS,
  },
  result: {
    data: {
      publicSettingsForApp: {
        message:
          '{"decimals": 4, "disableOffers": false, "pricesWithTax": true, "useSellerDefault": true}',
      },
    },
  },
}

const mockQueryDataNull = {
  request: {
    query: GET_SETTINGS,
  },
  result: {
    data: {
      publicSettingsForApp: {
        message:
          '{"decimals": null, "disableOffers": null, "pricesWithTax": null, "useSellerDefault": null}',
      },
    },
  },
}

function getHookWrapper(mocks = []) {
  const wrapper = ({ children }) => (
    <MockedProvider addTypename={false} mocks={mocks}>
      {children}
    </MockedProvider>
  )

  const { result, waitForNextUpdate } = renderHook(() => useAppSettings(), {
    wrapper,
  })

  return { result, waitForNextUpdate }
}

test('should return object', async () => {
  const { result, waitForNextUpdate } = getHookWrapper([mockQueryData])

  await waitForNextUpdate()

  expect(result.current.disableOffers).toBe(false)
  expect(result.current.decimals).toBe(4)
  expect(result.current.pricesWithTax).toBe(true)
  expect(result.current.useSellerDefault).toBe(true)
})

test('should return default object', async () => {
  const { result, waitForNextUpdate } = getHookWrapper([mockQueryDataNull])

  await waitForNextUpdate()

  expect(result.current.disableOffers).toBe(false)
  expect(result.current.decimals).toBe(2)
  expect(result.current.pricesWithTax).toBe(false)
  expect(result.current.useSellerDefault).toBe(false)
})

```


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

[User] Show me the implementation of structured-data/react/__tests__/ProductList.test.js from the structured-data VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { getProductList } from '../ProductList'
import { createProductList } from '../__fixtures__/productListMock'

const disableOffers = false
const decimals = 2
const pricesWithTax = false
const currency = 'USD'

describe('Product List Structured Data', () => {
  beforeEach(() => {
    global.__RUNTIME__ = {}
    global.__hostname__ = 'testSuite.com'
  })

  it('Should create a list', () => {
    const products = createProductList()

    const productListLD = getProductList({
      products,
      decimals,
      disableOffers,
      pricesWithTax,
      currency,
    })

    expect(productListLD['@type']).toBe('ItemList')
    expect(productListLD.itemListElement).toHaveLength(2)
    expect(productListLD.itemListElement[0]).toEqual({
      '@type': 'ListItem',
      position: 1,
      item: {
        '@context': 'https://schema.org/',
        name: products[0].productName,
        '@id': `https://testSuite.com/${
          products[0].link || products[0].linkText
        }/p`,
        '@type': 'Product',
        brand: {
          '@type': 'Brand',
          name: products[0].brand,
        },
        description: products[0].description,
        gtin: null,
        category:
          products[0].categoryTree[products[0].categoryTree.length - 1].name,
        image: products[0].items[0].images[0].imageUrl,
        mpn: products[0].productId,
        sku: products[0].items[0].itemId,
        offers: {
          '@type': 'AggregateOffer',
          highPrice: 100,
          lowPrice: 100,
          offerCount: 1,
          offers: [
            {
              '@type': 'Offer',
              availability: 'http://schema.org/InStock',
              itemCondition: 'http://schema.org/NewCondition',
              price: 100,
              priceCurrency: currency,
              priceValidUntil: undefined,
              seller: {
                '@type': 'Organization',
                name: 'Store Name',
              },
              sku: products[0].items[0].itemId,
            },
          ],
          priceCurrency: currency,
        },
      },
    })
    expect(productListLD.itemListElement[1]).toEqual({
      '@type': 'ListItem',
      position: 2,
      item: {
        '@context': 'https://schema.org/',
        name: products[1].productName,
        '@id': `https://testSuite.com/${
          products[1].link || products[1].linkText
        }/p`,
        '@type': 'Product',
        brand: {
          '@type': 'Brand',
          name: products[1].brand,
        },
        description: products[1].description,
        gtin: null,
        category:
          products[1].categoryTree[products[1].categoryTree.length - 1].name,
        image: products[1].items[0].images[0].imageUrl,
        mpn: products[1].productId,
        sku: products[1].items[0].itemId,
        offers: {
          '@type': 'AggregateOffer',
          highPrice: 100,
          lowPrice: 100,
          offerCount: 1,
          offers: [
            {
              '@type': 'Offer',
              availability: 'http://schema.org/InStock',
              itemCondition: 'http://schema.org/NewCondition',
              price: 100,
              priceCurrency: currency,
              priceValidUntil: undefined,
              seller: {
                '@type': 'Organization',
                name: 'Store Name',
              },
              sku: products[1].items[0].itemId,
            },
          ],
          priceCurrency: currency,
        },
      },
    })
  })

  it('Handles empty case', () => {
    const products = []
    const productListLD = getProductList({
      products,
      decimals,
      disableOffers,
      pricesWithTax,
      currency,
    })

    expect(productListLD.itemListElement).toHaveLength(0)
  })

  it('Handles undefined case', () => {
    const products = undefined
    const productListLD = getProductList({
      products,
      decimals,
      disableOffers,
      pricesWithTax,
      currency,
    })

    expect(productListLD).toBeNull()
  })

  it('should not fill offers if disableOffers is true', () => {
    const products = createProductList()

    const productListLD = getProductList({
      products,
      decimals,
      disableOffers: true,
      pricesWithTax,
      currency,
    })

    expect(productListLD['@type']).toBe('ItemList')
    expect(productListLD.itemListElement).toHaveLength(2)
    expect(productListLD.itemListElement[0].item.offers).toBeNull()
  })
})

```


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

[User] Show me the implementation of structured-data/react/hooks/useAppSettings.ts from the structured-data VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { useQuery } from 'react-apollo'

import GET_SETTINGS from '../queries/getSettings.graphql'

const DEFAULT_DISABLE_OFFERS = false
const DEFAULT_DECIMALS = 2
const DEFAULT_PRICES_WITH_TAX = false
const DEFAULT_USE_SELLER_DEFAULT = false
const DEFAULT_USE_IMAGES_ARRAY = false
const DEFAULT_DISABLE_AGGREGATE_OFFER = false
const DEFAULT_GTIN_VALUE = 'itemId'

interface Settings {
  disableOffers: boolean
  decimals: number
  pricesWithTax: boolean
  useSellerDefault: boolean
  useImagesArray: boolean
  disableAggregateOffer: boolean
  gtinValue?: string
}

const useAppSettings = (): Settings => {
  const { data } = useQuery(GET_SETTINGS, { ssr: true })

  if (data?.publicSettingsForApp?.message) {
    const {
      decimals,
      disableOffers,
      pricesWithTax,
      useSellerDefault,
      useImagesArray,
      disableAggregateOffer,
      gtinValue,
    } = JSON.parse(data.publicSettingsForApp.message)

    return {
      disableOffers: disableOffers || DEFAULT_DISABLE_OFFERS,
      decimals: decimals || DEFAULT_DECIMALS,
      pricesWithTax: pricesWithTax || DEFAULT_PRICES_WITH_TAX,
      useSellerDefault: useSellerDefault || DEFAULT_USE_SELLER_DEFAULT,
      useImagesArray: useImagesArray || DEFAULT_USE_IMAGES_ARRAY,
      disableAggregateOffer:
        disableAggregateOffer || DEFAULT_DISABLE_AGGREGATE_OFFER,
      gtinValue: gtinValue || DEFAULT_GTIN_VALUE,
    }
  }

  return {
    disableOffers: DEFAULT_DISABLE_OFFERS,
    decimals: DEFAULT_DECIMALS,
    pricesWithTax: DEFAULT_PRICES_WITH_TAX,
    useSellerDefault: DEFAULT_USE_SELLER_DEFAULT,
    useImagesArray: DEFAULT_USE_IMAGES_ARRAY,
    disableAggregateOffer: DEFAULT_DISABLE_AGGREGATE_OFFER,
    gtinValue: DEFAULT_GTIN_VALUE,
  }
}

export default useAppSettings

```


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

[User] Show me the implementation of structured-data/react/modules/baseUrl.tsx from the structured-data VTEX app.

[Assistant]
Here's the implementation:

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

interface Runtime {
  rootPath?: string
}

declare let global: {
  __hostname__: string
  __protocol__: string
  __pathname__: string
  __RUNTIME__: Runtime
}

declare let window: {
  __RUNTIME__: Runtime
  location: Window['location']
}

export const getBaseUrl = () => {
  const protocol = 'https'
  const hostname = canUseDOM ? window.location.hostname : global.__hostname__
  const rootPath = canUseDOM
    ? window.__RUNTIME__.rootPath
    : global.__RUNTIME__.rootPath

  const baseUrl = `${protocol}://${hostname}${rootPath ?? ''}`

  return baseUrl
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "admin/inventory": "Gerenciar estoque futuro",
  "admin/options-true": "Sim",
  "admin/options-false": "Não",
  "admin/title-add": "Criar estoque futuro",
  "admin/title-edit": "Editar estoque futuro",
  "admin/save": "Salvar",
  "admin/cancel": "Cancelar",
  "admin/date": "Data de chegada",
  "admin/date-placeholder": "Adicionar a data da chegada do estoque futuro",
  "admin/total": "Total do lote",
  "admin/total-placeholder": "Total de itens no lote",
  "admin/keep": "Seguir vendendo?",
  "admin/keep-placeholder": "O produto deve ser vendido mesmo se a data de chegada já tiver passado?",
  "admin/delete": "Deletar",
  "admin/delete-text": "Excluir estoque futuro",
  "admin/delete-question": "Tem certeza que deseja excluir esse estoque futuro?",
  "admin/delete-reason": "(Todas as compras feitas com esses produtos serão canceladas)",
  "admin/limit": "Só é possível criar até 10 estoque futuros",
  "admin/transfer": "Transferir",
  "admin/transfer-text": "Transferir estoque futuro",
  "admin/transfer-question": "Tem certeza que deseja transferir esse estoque futuro?",
  "admin/title-product-table": "Estoque futuro",
  "admin/link": "Inventário",
  "admin/toolbar": "Criar estoque futuro",
  "admin/totalizers-sku": "SKU ID",
  "admin/totalizers-product": "Produto",
  "admin/totalizers-warehouse-id": "Estoque ID",
  "admin/totalizers-warehouse": "Nome do estoque",
  "admin/text-notice-number": "O total de lotes precisa ser maior que 0",
  "admin/text-notice": "Preencha todos os campos",
  "admin/yes": "Sim",
  "admin/no": "Não",
  "admin/regular": "Regular",
  "admin/expired": "Expirado",
  "admin/expired-yes": "Expirado e vendendo",
  "admin/expiring": "Expirando em ",
  "admin/day": " dia",
  "admin/days": " dias",
  "admin/index": "Índice",
  "admin/date-provider": "Data de chegada",
  "admin/total-provider": "Total dos lotes",
  "admin/reserved": "Reservado",
  "admin/available": "Disponível",
  "admin/keep-provider": "Seguir vendendo",
  "admin/info": "O produto deve ser vendido mesmo se a data de chegada já tiver passado?",
  "admin/status": "Status",
  "admin/actions": "Ações",
  "admin/edit": "Editar",
  "admin/delete-provider": "Excluir",
  "admin/transfer-provider": "Transferir"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "section": "storeSetup",
  "LMProductId": "55",
  "titleId": "audit.home.title",
  "path": "/admin/audit"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "admin.app.supply-lots-inventory": {
    "component": "SupplyLots",
    "path": "/admin/app/supply-lots-inventory"
  }
}

```


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

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

[Assistant]
Here's the implementation:

```markdown
# Supply Lots

The Supply Lots app is responsible for manage supply lots in the admin interface.

![page](../master/docs/images/page.png)

## How to use

1. You can save a new Supply Lot by clicking on the button "New Supply Lot". A modal box will open, where you can enter the Date of Supply, Item Quantity in the Lot and whether the Lot will still be used for reservations after the Date of Supply has expired.

![page](../master/docs/images/add.png)

2. You can edit an existing Supply Lot by clicking on the Edit button, represented by a pencil icon. A modal box will open where you can edit any of the specified fields.

![edit](../master/docs/images/edit.png)
![edit2](../master/docs/images/edit2.png)

3. You can delete a Supply Lot by clicking on the Delete button, represented by a trash can icon.
![delete](../master/docs/images/delete.png)
![delete2](../master/docs/images/delete2.png)

4. You can transfer a Supply Lot to the active inventory by clicking on the Transfer button, represented by a a box and arrow icon.
![transfer](../master/docs/images/transfer.png)
![transfer2](../master/docs/images/transfer2.png)

## Configuration

1. Using your terminal and the VTEX IO Toolbelt, log into the desired VTEX account.
2. Run vtex install vtex.supply-lots on the account you're working on.
3. Access your VTEX account's admin.
4. Access Inventory & shipping and then Inventory management.
5. Choice the warehouse and products and then click on Supply lots.
6. Make the changes on supply lot interface

```


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

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

[Assistant]
Here's the implementation:

```graphql
type Query {
  """
  Check if a SKU and a Warehouse exist by their IDs and get their names
  """
  getSkuAndWarehouseNames(
    """
    SKU ID to be checked
    """
    skuId: String!
    """
    Warehouse ID to be checked
    """
    warehouseId: String!
  ): [String]
  """
  List all Supply Lots of a SKU scheduled to arrive at a Warehouse
  """
  listSupplyLots(
    """
    SKU scheduled to arrive in the Supply Lot
    """
    skuId: ID!
    """
    Warehouse where the Supply Lot is scheduled to arrive
    """
    warehouseId: ID!
    """
    ID of the Supply Lot, in the case the Query is used to verify if a ID was already used
    """
    supplyLotId: ID
    """
    Whether to ignore Supply Lots with a totalQuantity of 0 (true by default, to ignore Deleted Supply Lots).
    """
    filterZeros: Boolean = true
  ): [SupplyLot]
}

type Mutation {
  """
  Save or update a Supply Lot of a SKU scheduled to arrive at a Warehouse
  """
  setSupplyLot(
    """
    Information necessary to save or update a Supply Lot
    """
    supplyLotData: SupplyLotInput!
    """
    Whether the Mutation will update a existing Supply Lot if the provided ID is already being used
    """
    updateExisting: Boolean
  ): Boolean
  """
  Transfer a Supply Lot of a SKU/Warehouse to the active Inventory
  """
  transferSupplyLot(
    """
    SKU scheduled to arrive in the Supply Lot
    """
    skuId: ID!
    """
    Warehouse where the Supply Lot is scheduled to arrive
    """
    warehouseId: ID!
    """
    ID of the Supply Lot which will be transfered to the active Inventory
    """
    supplyLotId: ID!
  ): Boolean
  """
  Deletes a Supply Lot of a SKU/Warehouse (the Supply Lot entity still exists, but with a Quantity set to 0).
  """
  deleteSupplyLot(
    """
    SKU scheduled to arrive in the Supply Lot
    """
    skuId: ID!
    """
    Warehouse where the Supply Lot is scheduled to arrive
    """
    warehouseId: ID!
    """
    ID of the Supply Lot which will be deleted
    """
    supplyLotId: ID!
  ): Boolean
}
```


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

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

[Assistant]
Here's the implementation:

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

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "co-body": "^6.0.0",
    "ramda": "^0.25.0",
    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@types/co-body": "^0.0.3",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.0.0",
    "@types/ramda": "types/npm-ramda#dist",
    "@types/uuid": "^8.3.0",
    "@vtex/api": "6.43.0",
    "@vtex/test-tools": "^1.0.0",
    "@vtex/tsconfig": "^0.5.6",
    "typescript": "3.9.7",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.128.4/public/@types/vtex.render-runtime",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.143.0/public/@types/vtex.styleguide"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty"
  },
  "version": "0.1.0"
}

```


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

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

[Assistant]
Here's the implementation:

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

import { clients } from './clients'
import { resolvers } from './resolvers'

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

```


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

[User] Show me the implementation of supply-lots/react/SupplyLots.tsx from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

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

import { commonMessages } from './utils/definedMessages'
import ProductsTable from './components/ProductsTable'
import WarehouseProvider from './components/Provider/Warehouse'

const SupplyLots: FC = () => (
  <Layout
    fullWidth
    pageHeader={
      <PageHeader title={<FormattedMessage {...commonMessages.inventory} />} />
    }
  >
    <WarehouseProvider>
      <ProductsTable />
    </WarehouseProvider>
  </Layout>
)

export default SupplyLots

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.admin-example",
  "version": "0.0.1",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "@types/node": "^11.12.1",
    "@types/react": "^16.8.10",
    "@types/react-intl": "^2.3.17",
    "apollo-client": "^2.4.7",
    "graphql": "^14.0.2",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.8.6",
    "react-intl": "^5.18.2",
    "typescript": "3.9.7",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.128.4/public/@types/vtex.render-runtime",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.143.0/public/@types/vtex.styleguide"
  },
  "dependencies": {
    "@types/faker": "^4.1.5",
    "faker": "^4.1.0",
    "yup": "^0.32.9"
  }
}

```


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

[User] Show me the implementation of supply-lots/react/styles.global.css from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

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

```


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

[User] Show me the implementation of supply-lots/graphql/types/entities.graphql from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

```graphql
type transfer {
  isTransfered: Boolean
  destinationItemAvailabilityId: String
  dateOfTransferUTC: String
  user: String
}

type SupplyLot {
  """
  ID of the Supply Lot in which the SKU's scheduling should be considered
  """
  supplyLotId: ID
  """
  SKU scheduled to arrive in the Supply Lot
  """
  skuId: ID
  """
  Warehouse where the Supply Lot is scheduled to arrive
  """
  warehouseId: ID
  """
  Total quantity in the Supply Lot
  """
  totalQuantity: Int
  """
  Quantity still available to be sold in the Supply Lot
  """
  availableQuantity: Int
  """
  Quantity already reserved in the Supply Lot
  """
  reservedQuantity: Int
  """
  Date to be considered in the SKU's scheduling
  """
  dateOfSupplyUtc: String
  """
  Whether to keep selling from the Supply the date expired
  """
  keepSellingAfterExpiration: Boolean
  """
  Details about a Supply Lot transfer, if it was already transfered
  """
  transfer: Boolean
  dockId: ID
  isUnlimited: Boolean
  salesChannel: [String]
  deliveryChannels: [String]
  timeToRefill: String

}

 input SupplyLotInput {
  """
  ID of the Supply Lot in which the SKU's scheduling should be considered
  """
  supplyLotId: ID
  """
  SKU which will be scheduled to arrive in the Supply Lot
  """
  skuId: ID!
  """
  Warehouse where the Supply Lot will be scheduled to arrive
  """
  warehouseId: ID!
  """
  SKU quantity in the Supply Lot
  """
  totalQuantity: Int!
  """
  Date to be considered in the SKU's scheduling
  """
  dateOfSupplyUtc: String!
  """
  Whether to keep selling from the Supply the date expired
  """
  keepSellingAfterExpiration: Boolean!
}
```


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

[User] Show me the implementation of supply-lots/node/clients/supplyLot.ts from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

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

export class SupplyLot extends JanusClient {
  protected baseURL = '/api/logistics/pvt/inventory/items'
  constructor(ctx: IOContext, options?: InstanceOptions) {
    super(ctx, {
      ...options,
      headers: {
        ...options?.headers,
        ...(ctx.adminUserAuthToken
          ? { VtexIdclientAutCookie: ctx.adminUserAuthToken }
          : null),
      },
    })
  }

  public list = (skuId: string, warehouseId: string, supplyLotId?: string) =>
    this.http.get<SupplyLotInterface[]>(
      `${this.baseURL}/${encodeURI(skuId)}/warehouses/${encodeURI(
        warehouseId
      )}/supplyLots${supplyLotId ? `/${encodeURI(supplyLotId)}` : ``}`
    )

  public set = (supplyLotData: SupplyLotInterface) =>
    this.http
      .put(
        `${this.baseURL}/${encodeURI(
          supplyLotData.skuId
        )}/warehouses/${encodeURI(
          supplyLotData.warehouseId
        )}/supplyLots/${encodeURI(supplyLotData.supplyLotId)}`,
        {
          quantity: supplyLotData.totalQuantity,
          dateOfSupplyUtc: supplyLotData.dateOfSupplyUtc,
          keepSellingAfterExpiration: supplyLotData.keepSellingAfterExpiration,
        }
      )
      .then(() => true)

  public transfer = (skuId: string, warehouseId: string, supplyLotId: string) =>
    this.http
      .post(
        `${this.baseURL}/${encodeURI(skuId)}/warehouses/${encodeURI(
          warehouseId
        )}/supplyLots/${encodeURI(supplyLotId)}/transfer`
      )
      .then(() => true)

  public delete = (skuId: string, warehouseId: string, supplyLotId: string) =>
    this.http
      .delete(
        `${this.baseURL}/${encodeURI(skuId)}/warehouses/${encodeURI(
          warehouseId
        )}/supplyLots/${encodeURI(supplyLotId)}`
      )
      .then(() => 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 supply-lots/node/clients/logistics.ts from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

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

export class Logistics extends JanusClient {
  protected baseURL = '/api/logistics/pvt'
  constructor(ctx: IOContext, options?: InstanceOptions) {
    super(ctx, {
      ...options,
      headers: {
        ...options?.headers,
        ...(ctx.adminUserAuthToken
          ? { VtexIdclientAutCookie: ctx.adminUserAuthToken }
          : null),
      },
    })
  }

  public warehouseName = (warehouseId: string) =>
     this.http.get<{ id: string, name: string }[]>(
      `${this.baseURL}/configuration/warehouses`
    ).then(data =>
      data.find((element: { id: string }) =>
        element.id === warehouseId
      )?.name
    ).catch(() => undefined)
}
```


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

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

[Assistant]
Here's the implementation:

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

import { SupplyLot } from './supplyLot'
import { Catalog } from './catalog'
import { Logistics } from './logistics'

const REQUESTS_TIMEOUT = 10000

// 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)

// Extend the default IOClients implementation with our own custom clients.
export class Clients extends IOClients {
  public get supplyLot() {
    return this.getOrSet('supplyLot', SupplyLot)
  }
  public get catalog() {
    return this.getOrSet('catalog', Catalog)
  }
  public get logistics() {
    return this.getOrSet('logistics', Logistics)
  }
}

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


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

[User] Show me the implementation of supply-lots/node/clients/catalog.ts from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

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

export class Catalog extends JanusClient {
  protected baseURL = '/api/catalog/pvt'
  constructor(ctx: IOContext, options?: InstanceOptions) {
    super(ctx, {
      ...options,
      headers: {
        ...options?.headers,
        ...(ctx.adminUserAuthToken
          ? { VtexIdclientAutCookie: ctx.adminUserAuthToken }
          : null),
      },
    })
  }

  public skuName = (skuId: string) =>
    this.http.get<{ Name: string }>(
      `${this.baseURL}/stockkeepingunit/${encodeURI(skuId)}`
    ).then(sku => sku.Name)
     .catch(() => undefined)
}

```


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

[User] Show me the implementation of supply-lots/node/typings/supplyLot.d.ts from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface SupplyLotInterface {
  supplyLotId: string
  skuId: string
  warehouseId: string
  totalQuantity: number
  dateOfSupplyUtc: string
  keepSellingAfterExpiration: boolean
  transfer: {
    isTransfered: boolean
    destinationItemAvailabilityId: string
    dateOfTransferUTC: string
    user: 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 supply-lots/node/typings/index.d.ts from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

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

import type { Clients } from '../clients'

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>
}
```


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

[User] Show me the implementation of supply-lots/node/resolvers/index.ts from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { getSkuAndWarehouseNames } from './getSkuAndWarehouseNames'
import { listSupplyLots, setSupplyLot, transferSupplyLot, deleteSupplyLot } from './supplyLots'

export const resolvers = {
  Query: {
    getSkuAndWarehouseNames,
    listSupplyLots
  },
  Mutation: {
    setSupplyLot,
    transferSupplyLot,
    deleteSupplyLot,
  },
}
```


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

[User] Show me the implementation of supply-lots/node/resolvers/getSkuAndWarehouseNames.ts from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const getSkuAndWarehouseNames = (
  _: any,
  { skuId, warehouseId }: { skuId: string, warehouseId: string },
  { clients: { catalog, logistics } }: Context
) => Promise.all([
  catalog.skuName(skuId),
  logistics.warehouseName(warehouseId)
])

```


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

[User] Show me the implementation of supply-lots/node/resolvers/supplyLots/index.ts from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { v4 } from 'uuid'

export const listSupplyLots = (
  _: any,
  {
    skuId,
    warehouseId,
    supplyLotId,
    filterZeros,
  }: {
    skuId: string
    warehouseId: string
    supplyLotId?: string
    filterZeros: boolean
  },
  { clients: { supplyLot } }: Context
) =>
  supplyLot
    .list(skuId, warehouseId, supplyLotId)
    .then((list) =>
      filterZeros ? list.filter((lot) => lot.totalQuantity > 0) : list
    )

export const setSupplyLot = (
  _: any,
  { supplyLotData }: { supplyLotData: SupplyLotInterface },
  { clients: { supplyLot } }: Context
) =>
  (supplyLotData.supplyLotId = supplyLotData.supplyLotId || v4()) &&
  supplyLot.set(supplyLotData)

export const transferSupplyLot = (
  _: any,
  {
    skuId,
    warehouseId,
    supplyLotId,
  }: { skuId: string; warehouseId: string; supplyLotId: string },
  { clients: { supplyLot } }: Context
) => supplyLot.transfer(skuId, warehouseId, supplyLotId)

export const deleteSupplyLot = (
  _: any,
  {
    skuId,
    warehouseId,
    supplyLotId,
  }: { skuId: string; warehouseId: string; supplyLotId: string },
  { clients: { supplyLot } }: Context
) => supplyLot.delete(skuId, warehouseId, supplyLotId)

```


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

[User] Show me the implementation of supply-lots/react/typings/warehouse.d.ts from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Warehouse {
  name?: string
  id?: string
  [index: string]: string
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.render-runtime'{
    export const useRuntime
}
```


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

[User] Show me the implementation of supply-lots/react/typings/supplyLot.d.ts from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface SupplyLotInput {
    supplyLotId?: string
    skuId: string
    warehouseId: string
    totalQuantity: number
    dateOfSupplyUtc: string
    keepSellingAfterExpiration: boolean
    transfer?: {
      isTransfered?: boolean
      destinationItemAvailabilityId?: string
      dateOfTransferUTC?: string
      user?: 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 supply-lots/react/typings/sku.d.ts from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Sku {
  name?: string
  id?: string
  [index: string]: string
}

```


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

[User] Show me the implementation of supply-lots/react/typings/graphql.d.ts from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

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

  const Schema: DocumentNode

  export default Schema
}

```


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

[User] Show me the implementation of supply-lots/react/typings/actions.d.ts from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface ActionsValues {
    1: boolean,
    2: boolean,
    3: boolean,
    4: boolean,
    5: boolean,
    6: boolean,
    7: boolean,
    8: boolean,
    9: boolean,
    10: boolean,
    [index: number]: boolean
}
```


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

[User] Show me the implementation of supply-lots/react/typings/vtex.styleguide.d.ts from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.styleguide' {
  export const Alert
  export const Button
  export const PageBlock
  export const Layout
  export const PageHeader
  export const Card
  export const Checkbox
  export const Tab
  export const Tabs
  export const Tag
  export const ButtonWithIcon
  export const ButtonPlain
  export const IconDownload
  export const IconDelete
  export const IconEdit
  export const IconExternalLinkMini
  export const ToastProvider
  export const withToast
  export const Box
  export const LineChart
  export const Toggle
  export const Table
  export const IconArrowUp
  export const IconArrowDown
  export const IconWarning
  export const IconClose
  export const Spinner
  export const Tooltip
  export const InputSearch
  export const Input
  export const Modal
  export const FilterBar
  export const IconClear
  export const IconSearch
  export const IconFailure
  export const IconInfo
  export const Divider
  export const DatePicker
  export const Dropdown
  export const TimePicker
  // eslint-disable-next-line @typescript-eslint/naming-convention
  export const EXPERIMENTAL_Select
  // eslint-disable-next-line @typescript-eslint/naming-convention
  export const EXPERIMENTAL_useCheckboxTree
  // eslint-disable-next-line @typescript-eslint/naming-convention
  export const EXPERIMENTAL_useTableMeasures
  // eslint-disable-next-line @typescript-eslint/naming-convention
  export const EXPERIMENTAL_useTableProportion
}

```


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

[User] Show me the implementation of supply-lots/react/queries/deleteSupplyLot.gql from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation deleteSupplyLot($skuId: ID!,$warehouseId: ID!, $supplyLotId: ID!){
    deleteSupplyLot(skuId: $skuId, warehouseId: $warehouseId, supplyLotId: $supplyLotId )
}

```


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

[User] Show me the implementation of supply-lots/react/queries/transferSupplyLot.gql from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation transferSupplyLot($skuId: ID!,$warehouseId: ID!, $supplyLotId: ID!){
    transferSupplyLot(skuId: $skuId, warehouseId: $warehouseId, supplyLotId: $supplyLotId )
}

```


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

[User] Show me the implementation of supply-lots/react/queries/listSupplyLots.gql from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

```graphql
query listSupplyLots($skuId: ID!, $warehouseId: ID!, $supplyLotId: ID) {
  listSupplyLots(skuId: $skuId, warehouseId: $warehouseId, supplyLotId: $supplyLotId) {
    supplyLotId
    skuId
    warehouseId
    totalQuantity
    dateOfSupplyUtc
    keepSellingAfterExpiration
    availableQuantity
    reservedQuantity
  }
}

```


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

[User] Show me the implementation of supply-lots/react/queries/setSupplyLot.gql from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation setSupplyLot($supplyLotData: SupplyLotInput!, $updateExisting: Boolean){
    setSupplyLot(supplyLotData: $supplyLotData, updateExisting: $updateExisting)
}

```


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

[User] Show me the implementation of supply-lots/react/queries/getSkuAndWarehouseNames.gql from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getSkuAndWarehouseNames($skuId: String!, $warehouseId: String!) {
  getSkuAndWarehouseNames(skuId: $skuId, warehouseId: $warehouseId)
}

```


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

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

[Assistant]
Here's the implementation:

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

export const commonMessages = defineMessages({
  inventory: { id: 'admin/inventory' },
  retry: { id: 'admin/inventory.commons.retry' },
  loading: {
    id: 'admin/inventory.commons.loading',
  },
  skuDoesntExist: { id: 'admin/inventory.commons.sku-doesnt-exist' },
})

export const optionModalAdd = defineMessages({
  optionsTrue: {
    id: 'admin/options-true',
  },
  optionsFalse: {
    id: 'admin/options-false',
  },
})

export const commonModal = defineMessages({
  save: {
    id: 'admin/save',
  },
  cancel: {
    id: 'admin/cancel',
  },
  delete: {
    id: 'admin/delete',
  },
})

export const modalAddTexts = defineMessages({
  titleEdit: {
    id: 'admin/title-edit',
  },
  titleAdd: {
    id: 'admin/title-add',
  },
  date: {
    id: 'admin/date',
  },
  datePlaceholder: {
    id: 'admin/date-placeholder',
  },
  total: {
    id: 'admin/total',
  },
  totalPlaceholder: {
    id: 'admin/total-placeholder',
  },
  keep: {
    id: 'admin/keep',
  },
  keepPlaceholder: {
    id: 'admin/keep-placeholder',
  },
})

export const modalDelete = defineMessages({
  deleteText: {
    id: 'admin/delete-text',
  },
  deleteQuestion: {
    id: 'admin/delete-question',
  },
  deleteReason: {
    id: 'admin/delete-reason',
  },
})

export const modalLimit = defineMessages({
  limit: {
    id: 'admin/limit',
  },
})

export const modalTransfer = defineMessages({
  transfer: {
    id: 'admin/transfer',
  },
  transferText: {
    id: 'admin/transfer-text',
  },
  transferQuestion: {
    id: 'admin/transfer-question',
  },
})

export const productTable = defineMessages({
  titleProdutctTable: {
    id: 'admin/title-product-table',
  },
  link: {
    id: 'admin/link',
  },
  toolbar: {
    id: 'admin/toolbar',
  },
  totalizersSku: {
    id: 'admin/totalizers-sku',
  },
  totalizersProduct: {
    id: 'admin/totalizers-product',
  },
  totalizersWarehouseId: {
    id: 'admin/totalizers-warehouse-id',
  },
  totalizersWarehouse: {
    id: 'admin/totalizers-warehouse',
  },
})

export const provider = defineMessages({
  textNotice: {
    id: 'admin/text-notice',
  },
  textNoticeNumber: {
    id: 'admin/text-notice-number',
  },
  yes: {
    id: 'admin/yes',
  },
  no: {
    id: 'admin/no',
  },
  regular: {
    id: 'admin/regular',
  },
  expired: {
    id: 'admin/expired',
  },
  expiredYes: {
    id: 'admin/expired-yes',
  },
  expiring: {
    id: 'admin/expiring',
  },
  day: {
    id: 'admin/day',
  },
  days: {
    id: 'admin/days',
  },
  index: {
    id: 'admin/index',
  },
  date: {
    id: 'admin/date-provider',
  },
  total: {
    id: 'admin/total-provider',
  },
  reserved: {
    id: 'admin/reserved',
  },
  available: {
    id: 'admin/available',
  },
  keep: {
    id: 'admin/keep-provider',
  },
  info: {
    id: 'admin/info',
  },
  status: {
    id: 'admin/status',
  },
  actions: {
    id: 'admin/actions',
  },
  edit: {
    id: 'admin/edit',
  },
  delete: {
    id: 'admin/delete-provider',
  },
  transfer: {
    id: 'admin/transfer-provider',
  },
})

```


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

[User] Show me the implementation of supply-lots/react/icons/IconsTransferBig.tsx from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

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

const IconTransferBig: FunctionComponent = (): ReactElement => (
  <svg
    width="70"
    height="70"
    viewBox="0 0 16 16"
    fill="rgb(237, 244, 250)"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="0" height="0" fill="rgb(237, 244, 250)" />
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M5.21689 0.0303759C5.07513 -0.0101253 4.92487 -0.0101253 4.78311 0.0303759L0.577332 1.23203C0.554477 1.2384 0.531889 1.24581 0.509639 1.25425C0.401044 1.29535 0.305097 1.35902 0.226585 1.4389C0.184751 1.48144 0.148112 1.52834 0.117178 1.5786C0.042366 1.70005 2.62722e-06 1.84239 0 1.99247V8.00751C0 8.36 0.233666 8.66978 0.572589 8.76661L4.78311 9.96962C4.92487 10.0101 5.07513 10.0101 5.21689 9.96962L9.42741 8.76661C9.76633 8.66978 10 8.36 10 8.00751V1.99248C10 1.78388 9.91755 1.58545 9.77341 1.4389C9.74638 1.41142 9.71718 1.38575 9.68594 1.36219C9.62646 1.31732 9.56167 1.28163 9.49368 1.25551C9.47035 1.24655 9.44666 1.23872 9.42266 1.23203L9.42741 1.23338C9.44998 1.23983 9.47208 1.24723 9.49368 1.25551M8.42105 3.0391L5.78947 3.79098V8.16389L8.42105 7.41201V3.0391ZM1.57895 3.03911L4.21053 3.79099V8.16389L1.57895 7.41201V3.03911Z"
      fill="rgb(61, 89, 128)"
    />
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M12.6159 11.0572L10.8035 9.33333L12.2053 8L15.7097 11.3333C16.0968 11.7015 16.0968 12.2985 15.7097 12.6667L12.2053 16L10.8035 14.6667L12.6159 12.9428H8L8 11.0572H12.6159Z"
      fill=" rgb(61, 89, 128)"
    />
  </svg>
)

export default IconTransferBig

```


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

[User] Show me the implementation of supply-lots/react/icons/IconTrashCan.tsx from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

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

const IconTrashCan: FunctionComponent = (): ReactElement => (
  <svg
    width="218"
    height="70"
    viewBox="0 0 218 70"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M100.613 7.73446V1H117.387V7.73446" fill="#EDF4FA" />
    <path
      d="M100.613 7.73446V1H117.387V7.73446"
      stroke="#3D5980"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M127.45 14.469V48.1413C127.45 50.0008 125.948 51.5085 124.095 51.5085H93.9017C92.049 51.5085 90.5469 50.0008 90.5469 48.1413V14.469"
      fill="#EDF4FA"
    />
    <path
      d="M127.45 14.469V48.1413C127.45 50.0008 125.948 51.5085 124.095 51.5085H93.9017C92.049 51.5085 90.5469 50.0008 90.5469 48.1413V14.469"
      stroke="#3D5980"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M109 25.4124V40.5649"
      stroke="#3D5980"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M100.613 25.4124V40.5649"
      stroke="#3D5980"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M117.387 25.4124V40.5649"
      stroke="#3D5980"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
    <path
      d="M132.483 7.73444H85.5156V14.4689H132.483V7.73444Z"
      fill="#EDF4FA"
      stroke="#3D5980"
      strokeWidth="2"
      strokeMiterlimit="10"
      strokeLinecap="square"
    />
  </svg>
)

export default IconTrashCan

```


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

[User] Show me the implementation of supply-lots/react/icons/IconsTransfer.tsx from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

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

const IconTransfer: FunctionComponent = (): ReactElement => (
  <svg
    width="21"
    height="21"
    viewBox="0 0 16 16"
    fill="red"
    xmlns="http://www.w3.org/2000/svg"
  >
    <rect width="0" height="0" fill="white" />
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M5.21689 0.0303759C5.07513 -0.0101253 4.92487 -0.0101253 4.78311 0.0303759L0.577332 1.23203C0.554477 1.2384 0.531889 1.24581 0.509639 1.25425C0.401044 1.29535 0.305097 1.35902 0.226585 1.4389C0.184751 1.48144 0.148112 1.52834 0.117178 1.5786C0.042366 1.70005 2.62722e-06 1.84239 0 1.99247V8.00751C0 8.36 0.233666 8.66978 0.572589 8.76661L4.78311 9.96962C4.92487 10.0101 5.07513 10.0101 5.21689 9.96962L9.42741 8.76661C9.76633 8.66978 10 8.36 10 8.00751V1.99248C10 1.78388 9.91755 1.58545 9.77341 1.4389C9.74638 1.41142 9.71718 1.38575 9.68594 1.36219C9.62646 1.31732 9.56167 1.28163 9.49368 1.25551C9.47035 1.24655 9.44666 1.23872 9.42266 1.23203L9.42741 1.23338C9.44998 1.23983 9.47208 1.24723 9.49368 1.25551M8.42105 3.0391L5.78947 3.79098V8.16389L8.42105 7.41201V3.0391ZM1.57895 3.03911L4.21053 3.79099V8.16389L1.57895 7.41201V3.03911Z"
      fill="#134cd8"
    />
    <path
      fill-rule="evenodd"
      clip-rule="evenodd"
      d="M12.6159 11.0572L10.8035 9.33333L12.2053 8L15.7097 11.3333C16.0968 11.7015 16.0968 12.2985 15.7097 12.6667L12.2053 16L10.8035 14.6667L12.6159 12.9428H8L8 11.0572H12.6159Z"
      fill="#134cd8"
    />
  </svg>
)

export default IconTransfer

```


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

[User] Show me the implementation of supply-lots/react/components/Context/WarehouseContext.tsx from the supply-lots VTEX app.

[Assistant]
Here's the implementation:

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

interface WarehouseContextType {
  warehouse: Warehouse
  sku: Sku
  newSupplyLot: () => void
  orderedItems: any
  schemaTable: any
  modal: number
  setModal: (modal: number) => void
  setDate: (date: Date) => void
  date: Date | undefined
  setKeep: (keep: boolean) => void
  keep: boolean | undefined
  updateItems: (object: number) => void
  items: number | undefined
  modalDelete: boolean | undefined
  setDelete: (modalDelete: boolean) => void
  modalTransfer: boolean | undefined
  setTransfer: (modalDelete: boolean) => void
  addSupplyLot: () => void
  editSupplyLot: () => void
  deleteSupplyLots: () => void
  transferSupplyLots: () => void
  text: string
  limit: boolean
  sortedByValue: string
  sortOrderValue: string
  sort: (sortOrder: any, sortedBy: any) => void
  setText: (text: string) => void
}
const WarehouseContext = React.createContext<WarehouseContextType>({
  warehouse: {},
  sku: {},
  newSupplyLot: () => {},
  orderedItems: {},
  schemaTable: {},
  modal: 0,
  setModal: () => {},
  setDate: () => {},
  date: new Date(),
  setKeep: () => {},
  keep: false,
  updateItems: () => {},
  items: 0,
  modalDelete: false,
  setDelete: () => {},
  modalTransfer: false,
  setTransfer: () => {},
  addSupplyLot: () => {},
  editSupplyLot: () => {},
  deleteSupplyLots: () => {},
  transferSupplyLots: () => {},
  text: '',
  limit: false,
  sortedByValue: '',
  sortOrderValue: '',
  sort: () => {},
  setText: () => {},
})

export default WarehouseContext

```