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

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

[Assistant]
Here's the implementation:

```markdown
# Order Shipping

> Centralizes all shipping related requests to the Checkout API.

Any kind of shipping query or manipulation should be made through this component. This ensures that each interaction with the Checkout API happens in succession, avoiding concurrency issues.

## Usage

Use the hook `useOrderShipping` to get access to the API methods. Your component must be contained in a `OrderShippingProvider`, which in turn must be contained in a `OrderFormProvider` inside a `OrderQueueProvider`.

```tsx
import { OrderFormProvider } from 'vtex.order-manager/OrderForm'
import { OrderQueueProvider } from 'vtex.order-manager/OrderQueue'
import {
  OrderShippingProvider,
  useOrderShipping,
} from 'vtex.order-shipping/OrderShipping'

const MainComponent: FunctionComponent = () => (
  <OrderQueueProvider>
    <OrderFormProvider>
      <OrderShippingProvider>
        <MyComponent />
      </OrderShippingProvider>
    </OrderFormProvider>
  </OrderQueueProvider>
)

const MyComponent: FunctionComponent = () => {
  const { insertAddress, selectDeliveryOption } = useOrderShipping()
  // ...
}
```

## API

### `insertAddress: (props: { addressId: string, addressType: string, city: string, country: string, state: string, street: string, postalCode: string, neighborhood: string, geocoordinates: number[], number: string, complement: string, receiverName: string, reference: string, addressQuery: string}) => void`

Sets the `selectedAddress` inside `shipping` property of the `orderForm`.

#### Example

```tsx
insertAddress({
  addressId: '1569522356557',
  addressType: 'residential',
  city: 'Rio de Janeiro',
  country: 'BRA',
  state: 'RJ',
  street: 'Rua General Polidoro',
  postalCode: '22230-060',
  neighborhood: 'Botafogo',
  geocoordinates: [],
  complement: '',
  number: '',
  receiverName: '',
  reference: '',
  addressQuery: '',
})
```

### `selectDeliveryOption: ( deliveryOptionId: string ) => void`

Changes the selected delivery option to be the one which has the given `deliveryOptionId`.

#### Example

```tsx
selectDeliveryOption('PAC')
```

```


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

[User] Show me the implementation of order-shipping/react/OrderShipping.tsx from the order-shipping VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useCallback } from 'react'
import { useMutation } from 'react-apollo'
import { OrderQueue, OrderForm } from 'vtex.order-manager'
import { Address as CheckoutAddress } from '@vtex/checkout-types'
import EstimateShippingMutation from 'vtex.checkout-resources/MutationEstimateShipping'
import SelectDeliveryOptionMutation from 'vtex.checkout-resources/MutationSelectDeliveryOption'
import SelectPickupOptionMutation from 'vtex.checkout-resources/MutationSelectPickupOption'
import UpdateSelectedAddressMutation from 'vtex.checkout-resources/MutationUpdateSelectedAddress'

import { useLogger } from './utils/logger'
import {
  createOrderShippingProvider,
  useOrderShipping,
} from './components/createOrderShippingProvider'

const { useOrderQueue, useQueueStatus } = OrderQueue

const { useOrderForm } = OrderForm

function useEstimateShipping() {
  const [estimateShipping] = useMutation(EstimateShippingMutation)

  return {
    estimateShipping: useCallback(
      async (address: CheckoutAddress) => {
        const {
          data: { estimateShipping: newOrderForm },
        } = await estimateShipping({
          variables: { addressInput: address },
        })

        return newOrderForm
      },
      [estimateShipping]
    ),
  }
}

function useSelectDeliveryOption() {
  const [selectDeliveryOption] = useMutation(SelectDeliveryOptionMutation)
  return {
    selectDeliveryOption: useCallback(
      async (deliveryOptionId: string) => {
        const {
          data: { selectDeliveryOption: newOrderForm },
        } = await selectDeliveryOption({
          variables: {
            deliveryOptionId,
          },
        })

        return newOrderForm
      },
      [selectDeliveryOption]
    ),
  }
}

function useSelectPickupOption() {
  const [selectPickupOption] = useMutation(SelectPickupOptionMutation)
  return {
    selectPickupOption: useCallback(
      async (pickupOptionId: string) => {
        const {
          data: { selectPickupOption: newOrderForm },
        } = await selectPickupOption({
          variables: {
            pickupOptionId,
          },
        })

        return newOrderForm
      },
      [selectPickupOption]
    ),
  }
}

function useUpdateSelectedAddress() {
  const [updateSelectedAddress] = useMutation(UpdateSelectedAddressMutation)
  return {
    updateSelectedAddress: useCallback(
      async (address: CheckoutAddress) => {
        const {
          data: { updateSelectedAddress: newOrderForm },
        } = await updateSelectedAddress({
          variables: {
            address,
          },
        })

        return newOrderForm
      },
      [updateSelectedAddress]
    ),
  }
}

const { OrderShippingProvider } = createOrderShippingProvider({
  useOrderForm,
  useOrderQueue,
  useQueueStatus,
  useSelectPickupOption,
  useEstimateShipping,
  useSelectDeliveryOption,
  useLogger,
  useUpdateSelectedAddress,
})

export { OrderShippingProvider, useOrderShipping }
export default { OrderShippingProvider, useOrderShipping }

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test",
    "lint": "tsc --noEmit && eslint --ext ts,tsx ."
  },
  "dependencies": {
    "@vtex/css-handles": "^1.0.0",
    "classnames": "^2.2.6",
    "ramda": "^0.26.1",
    "react": "^16.8.3",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.8.3"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@testing-library/react-hooks": "^7.0.2",
    "@types/classnames": "^2.2.7",
    "@types/graphql": "^14.2.0",
    "@types/jest": "^24.0.11",
    "@types/node": "^11.13.0",
    "@types/prop-types": "^15.7.0",
    "@types/ramda": "^0.26.5",
    "@types/react": "^16.8.10",
    "@vtex/checkout-types": "^0.1.2",
    "@vtex/order-manager": "^0.5.4-beta.0",
    "@vtex/test-tools": "^3.1.0",
    "react-intl": "^4.3.1",
    "typescript": "3.9.7",
    "vtex.checkout-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-graphql@0.55.1/public/@types/vtex.checkout-graphql",
    "vtex.checkout-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.41.0/public/@types/vtex.checkout-resources",
    "vtex.order-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-manager@0.9.0/public/@types/vtex.order-manager",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.5/public/@types/vtex.render-runtime"
  },
  "version": "0.8.0"
}

```


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

[User] Show me the implementation of order-shipping/react/__fixtures__/OrderFormProvider.tsx from the order-shipping VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { createOrderFormProvider } from '@vtex/order-manager'

import { mockOrderForm } from './orderForm'

function useToast() {
  return {
    showToast: () => {},
    toastState: {
      isToastVisible: false,
    },
  }
}

function useClearOrderFormMessages() {
  return () =>
    new Promise(resolve => {
      resolve(true)
    })
}

function useGetOrderForm(args: any): any {
  return new Promise(resolve => {
    resolve({
      ...args,
    })
  })
}

const { OrderFormProvider } = createOrderFormProvider({
  useToast,
  useClearOrderFormMessages,
  useGetOrderForm,
  defaultOrderForm: mockOrderForm,
})

export { OrderFormProvider }

```


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

[User] Show me the implementation of order-shipping/react/__fixtures__/orderForm.ts from the order-shipping VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const mockOrderForm = {
  id: '123',
  loggedIn: false,
  paymentData: {
    installmentOptions: [
      {
        value: 100,
        paymentSystem: '1',
        installments: [],
      },
    ],
    isValid: true,
    payments: [],
    paymentSystems: [],
    availableAccounts: [],
  },
  items: [
    {
      additionalInfo: {
        brandName: 'Test Brand 0',
      },
      id: '1',
      uniqueId: '1',
      detailUrl: '/work-shirt/p',
      imageUrls: {
        at1x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155476-55-55/Frame-4.jpg?v=636793808441900000',
        at2x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155476-55-55/Frame-4.jpg?v=636793808441900000',
        at3x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155476-55-55/Frame-4.jpg?v=636793808441900000',
      },
      listPrice: 2800000,
      measurementUnit: 'un',
      name: 'قميص العمل الأعلى',
      price: 2400000,
      productId: '1',
      quantity: 3,
      sellingPrice: 2400000,
      skuName: 'Test SKU 0',
      skuSpecifications: [],
      attachmentOfferings: [],
      bundleItems: [],

      attachments: [],
      offerings: [],
      priceTags: [],
    },
    {
      additionalInfo: {
        brandName: 'Test Brand 1',
      },
      id: '30',
      uniqueId: '30',
      detailUrl: '/long-sleeve-shirt/p',
      imageUrls: {
        at1x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155487-55-55/Frame-7.jpg?v=636793837686400000',
        at2x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155487-55-55/Frame-7.jpg?v=636793837686400000',
        at3x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155487-55-55/Frame-7.jpg?v=636793837686400000',
      },
      listPrice: 945000,
      measurementUnit: 'un',
      name: '上品なサングラス',
      price: 945000,
      productId: '2000005',
      quantity: 1,
      sellingPrice: 945000,
      skuName: 'Test SKU 1',
      skuSpecifications: [],
      attachmentOfferings: [],
      bundleItems: [],
      isGift: false,
      attachments: [],
      offerings: [],
      priceTags: [],
    },
    {
      additionalInfo: {
        brandName: 'Test Brand 2',
      },
      id: '2000535',
      uniqueId: '2000535',
      detailUrl: '/classy--sunglasses/p',
      imageUrls: {
        at1x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155469-55-55/Frame-8.jpg?v=636793757498800000',
        at2x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155469-55-55/Frame-8.jpg?v=636793757498800000',
        at3x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155469-55-55/Frame-8.jpg?v=636793757498800000',
      },
      listPrice: 400000,
      measurementUnit: 'un',
      name: 'กางเกงขาสั้น St Tropez',
      price: 360000,
      productId: '13',
      quantity: 4,
      sellingPrice: 360000,
      skuName: 'Test SKU 2',
      skuSpecifications: [],
      attachmentOfferings: [],
      bundleItems: [],
      isGift: false,
      attachments: [],
      offerings: [],
      priceTags: [],
    },
  ],
  marketingData: {},
  totalizers: [
    {
      id: 'Items',
      name: 'Items Total',
      value: 9585000,
    },
  ],
  shipping: {
    countries: ['BRA'],
    deliveryOptions: [
      { id: 'Motoboy', price: 500, estimate: '8d', isSelected: false },
      { id: 'PAC', price: 1000, estimate: '5d', isSelected: false },
      { id: 'Expressa', price: 1000, estimate: '7d', isSelected: true },
    ],
    selectedAddress: {
      addressId: '1569522356557',
      addressType: 'residential',
      city: 'Rio de Janeiro',
      complement: '',
      country: 'BRA',
      neighborhood: 'Flamengo',
      number: '',
      postalCode: '22280-001',
      receiverName: '',
      reference: '',
      state: 'RJ',
      street: '',
      geoCoordinates: [],
    },
  },
  messages: {
    couponMessages: [],
    generalMessages: [],
  },
  clientProfileData: {
    email: 'fulanodetal@vtex.com',
    firstName: 'Fulano',
    lastName: 'Di Tal',
    isValid: true,
  },
  canEditData: false,
  value: 9585000,
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
import { FunctionComponent } from 'react'

declare global {
  interface StorefrontFunctionComponent<P = {}> extends FunctionComponent<P> {
    getSchema?(props: P): object
    schema?: object
  }

  interface StorefrontComponent<P = {}, S = {}> extends Component<P, S> {
    getSchema?(props: P): object
    schema: object
  }
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.checkout-resources/MutationEstimateShipping' {
  export { default } from 'vtex.checkout-resources/react/MutationEstimateShipping'
}

declare module 'vtex.checkout-resources/MutationSelectDeliveryOption' {
  export { default } from 'vtex.checkout-resources/react/MutationSelectDeliveryOption'
}

declare module 'vtex.checkout-resources/MutationUpdateSelectedAddress' {
  export { default } from 'vtex.checkout-resources/react/MutationUpdateSelectedAddress'
}

declare module 'vtex.checkout-resources/MutationSelectPickupOption' {
  export { default } from 'vtex.checkout-resources/MutationSelectPickupOption'
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
/* Typings for `render-runtime` */
declare module 'vtex.render-runtime' {
  import { Component, ComponentType, ReactElement, ReactType } from 'react'

  export interface NavigationOptions {
    page: string
    params?: any
  }

  export interface RenderContextProps {
    runtime: {
      navigate: (options: NavigationOptions) => void
    }
  }

  interface ExtensionPointProps {
    id: string
    [key: string]: any
  }

  export const ExtensionPoint: ComponentType<ExtensionPointProps>

  interface ChildBlockProps {
    id: string
  }

  export const ChildBlock: ComponentType<ChildBlockProps>
  export const useChildBlock = function({ id: string }): object {}

  export const Helmet: ReactElement
  export const Link: ReactType
  export const NoSSR: ReactElement
  export const RenderContextConsumer: ReactElement
  export const canUseDOM: boolean
  export const withRuntimeContext: <TOriginalProps extends {}>(
    Component: ComponentType<TOriginalProps & RenderContextProps>
  ) => ComponentType<TOriginalProps>
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
declare module '*.css' {
  const css: any
  export default css
}

```


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

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

[Assistant]
Here's the implementation:

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

  const value: DocumentNode
  export default value
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.styleguide' {
  import { ComponentType } from 'react'

  export const Input: ComponentType<InputProps>

  interface InputProps {
    [key: string]: any
  }
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
export interface LogParams {
  type: 'Error'
  level: 'Critical'
  event: unknown
  workflowType?: 'OrderShipping'
  workflowInstance: string
}

export type LogFn = (params: LogParams) => void

export type UseLogger = () => { log: LogFn }

const log = ({
  type,
  level,
  event,
  workflowType,
  workflowInstance,
}: LogParams) => {
  // eslint-disable-next-line no-console
  console.log({
    type,
    level,
    event,
    workflowInstance,
    workflowType: workflowType ?? 'OrderShipping',
  })
}

export function useLogger() {
  return { log }
}

```


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

[User] Show me the implementation of order-shipping/react/components/createOrderShippingProvider.tsx from the order-shipping VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, {
  createContext,
  useContext,
  useCallback,
  useMemo,
  useState,
  FC,
} from 'react'
import { OrderQueueContext } from '@vtex/order-manager'
import {
  OrderForm as CheckoutOrderForm,
  Address as CheckoutAddress,
  DeliveryOption,
  PickupOption,
} from '@vtex/checkout-types'

import { UseLogger } from '../utils/logger'

export const QueueStatus = {
  PENDING: 'Pending',
  FULFILLED: 'Fulfilled',
} as const

interface InsertAddressResult {
  success: boolean
  orderForm?: CheckoutOrderForm
}

interface SelectShippingOptionResult {
  success: boolean
  orderForm?: CheckoutOrderForm
}

interface SelectAddressResult {
  success: boolean
}

interface ShippingContext {
  searchedAddress: CheckoutAddress | null
  countries: string[]
  canEditData: boolean
  selectedAddress?: CheckoutAddress
  updateSelectedAddress: (
    address: CheckoutAddress
  ) => Promise<SelectAddressResult>
  insertAddress: (address: CheckoutAddress) => Promise<InsertAddressResult>
  deliveryOptions: DeliveryOption[]
  pickupOptions: PickupOption[]
  selectDeliveryOption: (option: string) => Promise<SelectShippingOptionResult>
  selectPickupOption: (option: string) => Promise<SelectShippingOptionResult>
}

const OrderShippingContext = createContext<ShippingContext | undefined>(
  undefined
)

const TASK_CANCELLED = 'TASK_CANCELLED'

type ListenFunction = (event: any, callback: () => void) => () => void
interface QueueContext {
  enqueue: (task: () => Promise<CheckoutOrderForm>, id?: string) => any
  listen: ListenFunction
  isWaiting: (id: string) => boolean
}
declare type OrderFormUpdate<O> =
  | Partial<O>
  | ((prevOrderForm: O) => Partial<O>)

interface OrderContext<O extends CheckoutOrderForm> {
  loading: boolean
  setOrderForm: (nextValue: OrderFormUpdate<O>) => void
  error: any | undefined
  orderForm: O
}

type UseEstimateShipping = () => {
  estimateShipping: (
    address: CheckoutAddress,
    orderFormId?: string
  ) => Promise<CheckoutOrderForm>
}

type UseSelectDeliveryOption = () => {
  selectDeliveryOption: (
    deliveryOptionId: string,
    orderFormId?: string
  ) => Promise<CheckoutOrderForm>
}

type UseSelectPickupOption = () => {
  selectPickupOption: (
    pickupOptionId: string,
    orderFormId?: string
  ) => Promise<CheckoutOrderForm>
}

type UseUpdateSelectedAddress = () => {
  updateSelectedAddress: (
    address: CheckoutAddress,
    orderFormId?: string
  ) => Promise<CheckoutOrderForm>
}

interface CreateOrderShippingProvider<O extends CheckoutOrderForm> {
  useLogger: UseLogger
  useOrderQueue: () => QueueContext
  useOrderForm: () => OrderContext<O>
  useQueueStatus: (listen: OrderQueueContext<O>['listen']) => any
  useEstimateShipping: UseEstimateShipping
  useSelectDeliveryOption: UseSelectDeliveryOption
  useSelectPickupOption: UseSelectPickupOption
  useUpdateSelectedAddress: UseUpdateSelectedAddress
}

export function createOrderShippingProvider({
  useLogger,
  useOrderQueue,
  useOrderForm,
  useQueueStatus,
  useEstimateShipping,
  useSelectDeliveryOption,
  useSelectPickupOption,
  useUpdateSelectedAddress,
}: CreateOrderShippingProvider<CheckoutOrderForm>) {
  const OrderShippingProvider: FC = ({ children }) => {
    const { enqueue, listen } = useOrderQueue()
    const { orderForm, setOrderForm } = useOrderForm()
    const { estimateShipping } = useEstimateShipping()
    const { selectDeliveryOption } = useSelectDeliveryOption()
    const { selectPickupOption } = useSelectPickupOption()
    const { updateSelectedAddress } = useUpdateSelectedAddress()
    const { log } = useLogger()
    const queueStatusRef = useQueueStatus(listen)
    const {
      canEditData,
      id,
      shipping: { countries, selectedAddress, deliveryOptions, pickupOptions },
    } = orderForm

    const [
      searchedAddress,
      setSearchedAddress,
    ] = useState<CheckoutAddress | null>(null)

    const handleInsertAddress = useCallback(
      async (address: CheckoutAddress) => {
        const task = async () => {
          const orderFormUpdate = await estimateShipping(address, id)

          return orderFormUpdate
        }

        try {
          const newOrderForm = await enqueue(task, 'insertAddress')

          if (queueStatusRef.current === QueueStatus.FULFILLED) {
            setOrderForm(newOrderForm)
          }

          setSearchedAddress(address)

          return { success: true, orderForm: newOrderForm as CheckoutOrderForm }
        } catch (error) {
          log({
            type: 'Error',
            level: 'Critical',
            event: {
              error,
              orderFormId: id,
            },
            workflowInstance: 'insert-address-error',
          })
          if (!error || error.code !== TASK_CANCELLED) {
            throw error
          }
          return { success: false }
        }
      },
      [estimateShipping, enqueue, queueStatusRef, setOrderForm, id, log]
    )

    const handleSelectDeliveryOption = useCallback(
      async (deliveryOptionId: string) => {
        const task = async () => {
          const updatedOrderForm = await selectDeliveryOption(
            deliveryOptionId,
            id
          )

          return updatedOrderForm
        }

        setOrderForm(prevOrderForm => ({
          ...prevOrderForm,
          shipping: {
            ...prevOrderForm.shipping,
            deliveryOptions: prevOrderForm.shipping.deliveryOptions?.map(
              deliveryOption => ({
                ...deliveryOption,
                isSelected: deliveryOption?.id === deliveryOptionId,
              })
            ),
          },
        }))

        enqueue(task, 'selectDeliveryOption').then(
          (newOrderForm: CheckoutOrderForm) => {
            if (queueStatusRef.current === QueueStatus.FULFILLED) {
              setOrderForm(newOrderForm)
            }
          }
        )

        return { success: true }
      },
      [queueStatusRef, selectDeliveryOption, enqueue, setOrderForm, id]
    )

    const handleSelectPickupOption = useCallback(
      async (pickupOptionId: string) => {
        const task = async () => {
          const updatedOrderForm = await selectPickupOption(pickupOptionId, id)

          return updatedOrderForm
        }

        setOrderForm(prevOrderForm => ({
          ...prevOrderForm,
          shipping: {
            ...prevOrderForm.shipping,
            pickupOptions: prevOrderForm.shipping.pickupOptions?.map(
              pickupOption => ({
                ...pickupOption,
                isSelected: pickupOption?.id === pickupOptionId,
              })
            ),
          },
        }))

        enqueue(task, 'selectPickupOption').then(
          (newOrderForm: CheckoutOrderForm) => {
            if (queueStatusRef.current === QueueStatus.FULFILLED) {
              setOrderForm(newOrderForm)
            }
          }
        )

        return { success: true }
      },
      [queueStatusRef, selectPickupOption, enqueue, setOrderForm, id]
    )

    const handleSelectAddress = useCallback(
      async (address: CheckoutAddress) => {
        const task = async () => {
          const newOrderForm = await updateSelectedAddress(address, id)

          return newOrderForm
        }

        try {
          const newOrderForm = await enqueue(task, 'selectAddress')

          if (queueStatusRef.current === QueueStatus.FULFILLED) {
            setOrderForm(newOrderForm)
          }

          return { success: true, orderForm: newOrderForm as CheckoutOrderForm }
        } catch (error) {
          log({
            type: 'Error',
            level: 'Critical',
            event: {
              error,
              orderFormId: id,
            },
            workflowInstance: 'selected-address-not-update',
          })
          if (!error || error.code !== TASK_CANCELLED) {
            throw error
          }
          return { success: false }
        }
      },
      [enqueue, queueStatusRef, updateSelectedAddress, setOrderForm, id, log]
    )

    const contextValue = useMemo(
      () => ({
        searchedAddress,
        canEditData,
        countries: countries as string[],
        selectedAddress: selectedAddress!,
        updateSelectedAddress: handleSelectAddress,
        insertAddress: handleInsertAddress,
        deliveryOptions: deliveryOptions as DeliveryOption[],
        pickupOptions: pickupOptions as PickupOption[],
        selectDeliveryOption: handleSelectDeliveryOption,
        selectPickupOption: handleSelectPickupOption,
      }),
      [
        searchedAddress,
        canEditData,
        countries,
        selectedAddress,
        handleSelectAddress,
        handleInsertAddress,
        deliveryOptions,
        pickupOptions,
        handleSelectDeliveryOption,
        handleSelectPickupOption,
      ]
    )

    return (
      <OrderShippingContext.Provider value={contextValue}>
        {children}
      </OrderShippingContext.Provider>
    )
  }

  return { OrderShippingProvider }
}

export const useOrderShipping = () => {
  const context = useContext(OrderShippingContext)
  if (context === undefined) {
    throw new Error(
      'useOrderShipping must be used within a OrderShippingProvider'
    )
  }

  return context
}

export default { createOrderShippingProvider, useOrderShipping }

```


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

[User] Show me the implementation of order-shipping/react/__tests__/createOrderShippingProvider.test.tsx from the order-shipping VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import {
  useOrderForm,
  useOrderQueue,
  useQueueStatus,
  OrderQueueProvider,
} from '@vtex/order-manager'
import { renderHook, act } from '@testing-library/react-hooks'

import {
  createOrderShippingProvider,
  useOrderShipping,
} from '../components/createOrderShippingProvider'
import { LogParams } from '../utils/logger'
import { OrderFormProvider } from '../__fixtures__/OrderFormProvider'
import { mockOrderForm } from '../__fixtures__/orderForm'

const mockLog = jest.fn()

function useLogger() {
  const log = ({
    type,
    level,
    event,
    workflowType,
    workflowInstance,
  }: LogParams) => {
    mockLog({
      type,
      level,
      event,
      workflowType: workflowType ?? 'OrderProfileTest',
      workflowInstance,
    })
  }

  return { log }
}

const mockUseSelectPickupOption = jest.fn().mockResolvedValue(true)
const mockUseEstimateShipping = jest.fn().mockResolvedValue(true)
const mockUseSelectDeliveryOption = jest.fn().mockResolvedValue(true)
const mockUseUpdateSelectedAddress = jest.fn().mockResolvedValue(true)

const createWrapperOrderProviders = () => {
  const useSelectPickupOption = () => ({
    selectPickupOption: mockUseSelectPickupOption,
  })

  const useEstimateShipping = () => ({
    estimateShipping: mockUseEstimateShipping,
  })

  const useUpdateSelectedAddress = () => ({
    updateSelectedAddress: mockUseUpdateSelectedAddress,
  })
  const useSelectDeliveryOption = () => ({
    selectDeliveryOption: mockUseSelectDeliveryOption,
  })

  const { OrderShippingProvider } = createOrderShippingProvider({
    useLogger,
    useOrderQueue,
    useOrderForm,
    useQueueStatus,
    useSelectPickupOption,
    useEstimateShipping,
    useUpdateSelectedAddress,
    useSelectDeliveryOption,
  })

  const Wrapper: FC = ({ children }) => {
    return (
      <OrderQueueProvider>
        <OrderFormProvider>
          <OrderShippingProvider>{children}</OrderShippingProvider>
        </OrderFormProvider>
      </OrderQueueProvider>
    )
  }

  return { Wrapper }
}

const mockAddress = {
  addressId: '1569522356557',
  addressType: 'residential',
  city: 'Rio de Janeiro',
  complement: '',
  country: 'BRA',
  neighborhood: 'Flamengo',
  number: '',
  postalCode: '22250-040',
  receiverName: '',
  reference: '',
  state: 'RJ',
  street: '',
  geoCoordinates: [],
}

describe('OrderProfile', () => {
  it('should throw an error if theres no OrderShippingProvider on the tree', () => {
    const {
      result: { error },
    } = renderHook(() => useOrderShipping())

    expect(error).not.toBeNull()
    expect(error?.message).toEqual(
      'useOrderShipping must be used within a OrderShippingProvider'
    )
  })

  it('should get the right values from the orderForm', () => {
    const { Wrapper } = createWrapperOrderProviders()

    const {
      result: { error, current },
    } = renderHook(() => useOrderShipping(), { wrapper: Wrapper })

    expect(error).toBeUndefined()
    expect(current.selectedAddress).toEqual(
      mockOrderForm.shipping.selectedAddress
    )
    expect(current.countries).toEqual(mockOrderForm.shipping.countries)
    expect(current.deliveryOptions).toEqual(
      mockOrderForm.shipping.deliveryOptions
    )
  })

  it('should call estimateShipping if insertAddress was executed', async () => {
    const { Wrapper } = createWrapperOrderProviders()

    const {
      result: {
        current: { insertAddress },
      },
    } = renderHook(() => useOrderShipping(), { wrapper: Wrapper })

    await act(async () => {
      const { success } = await insertAddress(mockAddress)

      expect(success).toBeTruthy()
    })
    expect(mockUseEstimateShipping).toHaveBeenCalledWith(
      mockAddress,
      mockOrderForm.id
    )
    expect(mockLog).not.toHaveBeenCalled()
  })

  it('should call selectedDeliveryOption query if selectDeliveryOption was executed', async () => {
    const { Wrapper } = createWrapperOrderProviders()

    const {
      result: {
        current: { selectDeliveryOption },
      },
    } = renderHook(() => useOrderShipping(), { wrapper: Wrapper })

    await act(async () => {
      const { success } = await selectDeliveryOption(
        mockOrderForm.shipping.deliveryOptions[1].id
      )

      expect(success).toBeTruthy()
    })
    expect(mockUseSelectDeliveryOption).toHaveBeenCalledWith(
      mockOrderForm.shipping.deliveryOptions[1].id,
      mockOrderForm.id
    )
    expect(mockLog).not.toHaveBeenCalled()
  })

  it('should call selectedPickupOption query if selectedPickupOption was executed', async () => {
    const { Wrapper } = createWrapperOrderProviders()

    const {
      result: {
        current: { selectPickupOption },
      },
    } = renderHook(() => useOrderShipping(), { wrapper: Wrapper })

    await act(async () => {
      const { success } = await selectPickupOption(
        mockOrderForm.shipping.deliveryOptions[1].id
      )

      expect(success).toBeTruthy()
    })
    expect(mockUseSelectPickupOption).toHaveBeenCalledWith(
      mockOrderForm.shipping.deliveryOptions[1].id,
      mockOrderForm.id
    )
    expect(mockLog).not.toHaveBeenCalled()
  })

  it('should call updateSelectedAddress if selectAddress was executed', async () => {
    const { Wrapper } = createWrapperOrderProviders()

    const {
      result: {
        current: { updateSelectedAddress },
      },
    } = renderHook(() => useOrderShipping(), { wrapper: Wrapper })

    await act(async () => {
      const { success } = await updateSelectedAddress(mockAddress)

      expect(success).toBeTruthy()
    })
    expect(mockUseUpdateSelectedAddress).toHaveBeenCalledWith(
      mockAddress,
      mockOrderForm.id
    )
    expect(mockLog).not.toHaveBeenCalled()
  })
})

```


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

[User] Show me the implementation of order-shipping/react/__tests__/OrderShipping.test.tsx from the order-shipping VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { act, render, fireEvent } from '@vtex/test-tools/react'
import EstimateShipping from 'vtex.checkout-resources/MutationEstimateShipping'
import SelectDeliveryOption from 'vtex.checkout-resources/MutationSelectDeliveryOption'
import { OrderForm, OrderQueue } from 'vtex.order-manager'

import { mockOrderForm } from '../__fixtures__/orderForm'
import { OrderShippingProvider, useOrderShipping } from '../OrderShipping'

const { OrderFormProvider, useOrderForm } = OrderForm
const { OrderQueueProvider } = OrderQueue

const mockedAddress = {
  addressId: '1569522356558',
  addressType: 'residential',
  city: 'Rio de Janeiro',
  complement: '',
  country: 'BRA',
  neighborhood: 'Botafogo',
  number: '',
  postalCode: '22230-005',
  receiverName: '',
  reference: '',
  state: 'RJ',
  street: '',
  geoCoordinates: [],
}

const mockedDeliveryOptions = [
  { id: 'Motoboy', price: 500, estimate: '8d', isSelected: false },
  { id: 'PAC', price: 1000, estimate: '5d', isSelected: true },
  { id: 'Expressa', price: 1000, estimate: '7d', isSelected: false },
]

const mockInsertAddressMutation = (
  args: CheckoutAddress,
  result: CheckoutAddress
) => ({
  request: {
    query: EstimateShipping,
    variables: {
      addressInput: args,
    },
  },
  result: {
    data: {
      estimateShipping: {
        ...mockOrderForm,
        shipping: {
          selectedAddress: result,
        },
      },
    },
  },
})

const mockSelectDeliveryOptionMutation = (
  args: string,
  result: DeliveryOption[]
) => ({
  request: {
    query: SelectDeliveryOption,
    variables: {
      deliveryOptionId: args,
    },
  },
  result: {
    data: {
      selectDeliveryOption: {
        ...mockOrderForm,
        shipping: {
          deliveryOptions: result,
        },
      },
    },
  },
})

describe('OrderShipping', () => {
  it('should throw when useOrderShipping is used outside a OrderShippingProvider', () => {
    const oldConsoleError = console.error
    console.error = () => {}

    const Component: FunctionComponent = () => {
      useOrderShipping()
      return <div>foo</div>
    }

    expect(() => render(<Component />)).toThrow(
      'useOrderShipping must be used within a OrderShippingProvider'
    )

    console.error = oldConsoleError
  })

  it('should change selectedAddress', async () => {
    const Component: FunctionComponent = () => {
      const {
        orderForm: {
          shipping: {
            selectedAddress: { postalCode },
          },
        },
      } = useOrderForm()
      const { insertAddress } = useOrderShipping()

      return (
        <div>
          {postalCode}
          <button onClick={() => insertAddress(mockedAddress)}>mutate</button>
        </div>
      )
    }

    const mockInsertAddress = mockInsertAddressMutation(
      mockedAddress,
      mockedAddress
    )

    const { getByText } = render(
      <OrderQueueProvider>
        <OrderFormProvider>
          <OrderShippingProvider>
            <Component />
          </OrderShippingProvider>
        </OrderFormProvider>
      </OrderQueueProvider>,
      { graphql: { mocks: [mockInsertAddress] } }
    )

    const button = getByText('mutate')

    expect(getByText('22280-001')).toBeTruthy()
    act(() => {
      fireEvent.click(button)
    })

    await act(() => new Promise(resolve => setTimeout(() => resolve())))

    expect(getByText('22230-005')).toBeTruthy()
  })

  it('should change the selected delivery option', async () => {
    const Component: FunctionComponent = () => {
      const {
        orderForm: {
          shipping: { deliveryOptions },
        },
      } = useOrderForm()
      const { selectDeliveryOption } = useOrderShipping()

      const { id } = deliveryOptions.find((option: DeliveryOption) => {
        return option.isSelected
      })

      return (
        <div>
          {id}
          <button onClick={() => selectDeliveryOption('PAC')}>mutate</button>
        </div>
      )
    }

    const mockSelectDeliveryOptions = mockSelectDeliveryOptionMutation(
      'PAC',
      mockedDeliveryOptions
    )

    const { getByText } = render(
      <OrderQueueProvider>
        <OrderFormProvider>
          <OrderShippingProvider>
            <Component />
          </OrderShippingProvider>
        </OrderFormProvider>
      </OrderQueueProvider>,
      { graphql: { mocks: [mockSelectDeliveryOptions] } }
    )

    expect(getByText('Expressa')).toBeTruthy()

    const button = getByText('mutate')

    act(() => {
      fireEvent.click(button)
    })

    await act(() => new Promise(resolve => setTimeout(() => resolve())))

    expect(getByText('PAC')).toBeTruthy()
  })
})

```


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

[User] Show me the implementation of vtex-scripts/bin/vtex-scripts.js from the vtex-scripts VTEX app.

[Assistant]
Here's the implementation:

```javascript
#!/usr/bin/env node
'use strict'

const args = process.argv.slice(2)

if (args.length === 0) {
  process.exit(1)
}

const script = args[0]

switch (script) {
  case 'test':
  case 'build': {
    const executeScript = require(`../scripts/${script}`)

    try {
      executeScript(...args.slice(1))
    } catch (e) {
      console.log(`An error occurred while running the script "${script}".\n`)
      console.log(
        'If you think this is a bug in our tools, feel free to file a bug report at',
        'https://www.github.com/vtex-apps/npm-storecomponents/issues\n'
      )
      process.exit(1)
    }
    break
  }
  default:
    console.log(`Unknown script "${script}".`)
    break
}

```


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

[User] Show me the implementation of vtex-scripts/config/createJestConfig.js from the vtex-scripts VTEX app.

[Assistant]
Here's the implementation:

```javascript
'use strict'

const fs = require('fs')
const path = require('path')
const paths = require('../utils/paths')
const overrides = require('../utils/overrides')

module.exports = (resolve, rootDir, srcDirs) => {
  const setupTestsFile = fs.existsSync(paths.testsSetup)
    ? `<rootDir>/${paths.rawTestsSetup}`
    : undefined

  let config = {
    roots: srcDirs.map(d => `<rootDir>/${path.relative(rootDir || '', d)}`),
    setupTestFrameworkScriptFile: setupTestsFile,
    testEnvironment: 'node',
    testURL: 'http://localhost',
    transform: {
      '^.+\\.(js|jsx|mjs)$': resolve('config/jest/babelTransform.js'),
      '^.+\\.css$': resolve('config/jest/cssTransform.js'),
      '^.+\\.(graphql|gql)$': resolve('config/jest/graphqlTransform.js'),
      '^(?!.*\\.(js|jsx|mjs|css|json|graphql|gql)$)': resolve(
        'config/jest/fileTransform.js'
      ),
    },
    // Consider the node_modules installed in `vtex-scripts`, on the rootPath
    // and inside every source directory folder
    moduleDirectories: [
      '<rootDir>/node_modules',
      ...srcDirs.map(
        d =>
          `<rootDir>/${path.relative(
            rootDir || '',
            path.join(d, 'node_modules')
          )}`
      ),
      path.join(__dirname, '..', 'node_modules'),
    ],
    transformIgnorePatterns: ['[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$'],
    testPathIgnorePatterns: [
      '[/\\\\]node_modules[/\\\\]',
      '(.*)[/\\\\]helpers[/\\\\](.*)',
    ],
    snapshotSerializers: [require.resolve('enzyme-to-json/serializer')],
  }

  if (rootDir) config.rootDir = rootDir

  if (overrides.jest) {
    config = {
      ...config,
      ...overrides.jest,
    }
  }

  return config
}

```


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

[User] Show me the implementation of vtex-scripts/utils/overrides.js from the vtex-scripts VTEX app.

[Assistant]
Here's the implementation:

```javascript
'use strict'

const paths = require('./paths')

const packageJson = require(paths.packageJsonPath)

let vtexScriptsOverrides = {}

if (packageJson.vtexScriptsOverrides) {
  vtexScriptsOverrides = packageJson.vtexScriptsOverrides
}

module.exports = vtexScriptsOverrides

```


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

[User] Show me the implementation of vtex-scripts/utils/paths.js from the vtex-scripts VTEX app.

[Assistant]
Here's the implementation:

```javascript
'use strict'

const fs = require('fs')
const path = require('path')

const appDirectory = fs.realpathSync(process.cwd())
const resolveAppPath = relative => path.resolve(appDirectory, relative)

const packageJsonPath = resolveAppPath('package.json')

const { vtexScriptsOverride } = require(packageJsonPath)

module.exports = {
  appPath: resolveAppPath('.'),
  entryPath: resolveAppPath('src/index.js'),
  srcPath: resolveAppPath('src'),
  distPath: resolveAppPath('dist'),
  rawTestsSetup: 'src/setupTests.js',
  testsSetup: resolveAppPath('src/setupTests.js'),
}

if (vtexScriptsOverride) {
  const srcPath = vtexScriptsOverride.srcPath || 'src'
  const distPath = vtexScriptsOverride.distPath || 'dist'
  const setupTestsFilename =
    vtexScriptsOverride.setupTestsFilename || 'setupTests.js'

  module.exports = {
    appPath: resolveAppPath('.'),
    entryPath: resolveAppPath(path.join(srcPath, 'index.js')),
    srcPath: resolveAppPath(srcPath),
    distPath: resolveAppPath(distPath),
    rawTestsSetup: path.join(srcPath, setupTestsFilename),
    testsSetup: resolveAppPath(path.join(srcPath, setupTestsFilename)),
  }
}

module.exports.packageJsonPath = packageJsonPath
module.exports.moduleName = path.basename(process.cwd())
module.exports.srcDirs = [module.exports.srcPath]

```


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

[User] Show me the implementation of vtex-scripts/scripts/test.js from the vtex-scripts VTEX app.

[Assistant]
Here's the implementation:

```javascript
#!/usr/bin/env node
'use strict'

process.env.BABEL_ENV = 'test'
process.env.NODE_ENV = 'test'

process.on('unhandledRejection', err => {
  throw err
})

const jest = require('jest')
const path = require('path')
const paths = require('../utils/paths')
const createJestConfig = require('../config/createJestConfig')

function startTest(...processArgs) {
  const args = processArgs ? processArgs.slice(0) : []

  const config = createJestConfig(
    relativePath => path.resolve(__dirname, '..', relativePath),
    paths.appPath,
    paths.srcDirs
  )

  args.push('--config', JSON.stringify(config))

  jest.run(args)
}

module.exports = startTest

```


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

[User] Show me the implementation of vtex-scripts/scripts/build.js from the vtex-scripts VTEX app.

[Assistant]
Here's the implementation:

```javascript
#!/usr/bin/env node
'use strict'

process.env.BABEL_ENV = 'production'
process.env.NODE_ENV = 'production'

process.on('unhandledRejection', err => {
  throw err
})

const printBuildError = require('react-dev-utils/printBuildError')
const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages')
const chalk = require('chalk')
const fs = require('fs-extra')
const webpack = require('webpack')
const paths = require('../utils/paths')
const config = require('../config/webpack.config')

function build() {
  console.log('Creating production build...\n')

  const compiler = webpack(config)

  return new Promise((res, rej) => {
    compiler.run((err, stat) => {
      if (err) {
        return rej(err)
      }

      const messages = formatWebpackMessages(stat.toJson({}, true))

      if (messages.errors.length) {
        if (messages.errors.length > 1) {
          messages.errors.length = 1
        }
        return rej(new Error(messages.errors.join('\n\n')))
      }

      return res({
        stat,
        warnings: messages.warnings,
      })
    })
  })
}

function startBuild() {
  return new Promise(res => {
    res(fs.emptyDir(paths.distPath))
  })
    .then(() => build())
    .then(
      ({ warnings }) => {
        if (warnings.length) {
          console.log(chalk.yellow('Compiled with warnings'))
          console.log(warnings.join('\n\n'))
        } else {
          console.log(chalk.green('Compiled successfully.'))
        }
      },
      errors => {
        console.log(chalk.red('Failed to compile.\n'))
        printBuildError(errors)
        process.exit(1)
      }
    )
    .catch(err => {
      if (err && err.message) {
        console.log(err.message)
      }
      process.exit(1)
    })
}

module.exports = startBuild

```


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

[User] Show me the implementation of vtex-scripts/config/jest/fileTransform.js from the vtex-scripts VTEX app.

[Assistant]
Here's the implementation:

```javascript
'use strict'

const path = require('path')

module.exports = {
  process(src, filename) {
    const assetFilename = JSON.stringify(path.basename(filename))

    if (filename.match(/\.svg$/)) {
      return `module.exports = {
        __esModule: true,
        default: ${assetFilename},
        ReactComponent: () => ${assetFilename},
      };`
    }

    return `module.exports = ${assetFilename};`
  },
}

```


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

[User] Show me the implementation of vtex-scripts/config/jest/cssTransform.js from the vtex-scripts VTEX app.

[Assistant]
Here's the implementation:

```javascript
'use strict'

module.exports = {
  process() {
    return 'module.exports = {};'
  },
  getCacheKey() {
    return 'cssTransform'
  },
}

```


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

[User] Show me the implementation of vtex-scripts/config/jest/graphqlTransform.js from the vtex-scripts VTEX app.

[Assistant]
Here's the implementation:

```javascript
'use strict'

const loader = require('graphql-tag/loader')

module.exports = {
  process(src) {
    return loader.call({ cacheable() {} }, src)
  },
}

```


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

[User] Show me the implementation of vtex-scripts/config/jest/babelTransform.js from the vtex-scripts VTEX app.

[Assistant]
Here's the implementation:

```javascript
'use strict'

const babelJest = require('babel-jest')

module.exports = babelJest.createTransformer({
  babelrc: false,
  presets: ['react', 'es2015'].map(preset =>
    require.resolve(`babel-preset-${preset}`)
  ),
  plugins: [
    'transform-es2015-modules-commonjs',
    'dynamic-import-node',
    'transform-class-properties',
  ].map(plugin => require.resolve(`babel-plugin-${plugin}`)),
})

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/package.json from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "custom-stock-export",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ]
  },
  "dependencies": {
    "@vtex/api": "^6.45.0",
    "@vtex/clients": "^2.13.0"
  },
  "devDependencies": {
    "@vtex/prettier-config": "^0.2.0",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.4.0",
    "eslint-config-vtex-react": "^6.4.0",
    "husky": "^4.2.5",
    "lint-staged": "^10.2.2",
    "prettier": "^2.0.5",
    "typescript": "^3.8.3"
  }
}

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/manifest.json from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vendor": "vtexarg",
  "name": "custom-stock-export",
  "version": "0.0.1",
  "title": "Custom Stock Export",
  "description": "Custom Stock Export",
  "builders": {
    "messages": "1.x",
    "admin": "0.x",
    "react": "3.x",
    "docs": "0.x"
  },
  "dependencies": {
    "vtex.styleguide": "9.x",
    "vtex.catalog-graphql": "1.x",
    "vtex.inventory-graphql": "0.x",
    "vtex.logistics-carrier-commons": "0.x",
    "vtex.logistics-carrier-graphql": "0.x"
  },
  "billingOptions": {
    "support": {
      "url": "https://support.vtex.com/hc/requests"
    },
    "type": "free",
    "availableCountries": ["*"]
  },
  "policies": [
    {
      "name": "outbound-access",
      "attrs": {
        "host": "{{account}}.myvtex.com",
        "path": "/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "/api/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercebeta.com.br",
        "path": "/api/*"
      }
    },
    {
      "name": "outbound-access",
      "attrs": {
        "host": "{{account}}.vtexcommercestable.com.br",
        "path": "/api/*"
      }
    },
    {
      "name": "Get_Account_By_Identifier"
    },
    {
      "name": "ADMIN_DS"
    },
    {
      "name": "POWER_USER_DS"
    },
    {
      "name": "AdminPortal"
    },
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    }
  ],
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.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 custom-stock-export/custom-stock-export-back/package.json from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "custom-stock-export-back",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "eslint --ext js,jsx,ts,tsx .",
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json}\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,js,tsx,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,graphql,gql}": [
      "prettier --write"
    ]
  },
  "devDependencies": {
    "@types/node": "^12.12.21",
    "@vtex/prettier-config": "^0.3.6",
    "eslint": "^7.16.0",
    "eslint-config-vtex": "^12.9.3",
    "husky": "^4.3.6",
    "lint-staged": "^10.5.3",
    "prettier": "^2.2.1",
    "typescript": "^3.7.5"
  }
}

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export-back/manifest.json from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "custom-stock-export-back",
  "vendor": "vtexarg",
  "version": "0.0.1",
  "title": "Custom Stock Export Back",
  "description": "Custom Stock Export Back",
  "dependencies": {},
  "builders": {
    "node": "6.x",
    "docs": "0.x"
  },
  "billingOptions": {
    "support": {
      "url": "https://support.vtex.com/hc/requests"
    },
    "type": "free",
    "availableCountries": [
      "*"
    ]
  },
  "scripts": {
    "prereleasy": "bash lint.sh"
  },
  "credentialType": "absolute",
  "policies": [
    {
      "name": "outbound-access",
      "attrs": {
        "host": "portal.vtexcommercestable.com.br",
        "path": "api/logistics/pvt/inventory/skus/*"
      }
    },
    {
      "name": "LogisticsAdmin"
    },
    {
      "name": "colossus-fire-event"
    },
    {
      "name": "colossus-write-logs"
    }
  ],
  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.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 custom-stock-export/custom-stock-export/messages/pt.json from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/admin.app.navigation.title": "Exportação de estoque personalizado",
  "admin/admin.app.navigation.search.kws": "personalizado, custom, estoque, exportação, export",
  "admin/admin.app.custom-stock-export.pageTitle": "Exportação de estoque personalizado",
  "admin/admin.app.custom-stock-export.exportButton": "Exportar",
  "admin/admin.app.custom-stock-export.columns.last-update": "Última atualização",
  "admin/admin.app.custom-stock-export.columns.reserved": "Reservados",
  "admin/admin.app.custom-stock-export.columns.available": "Disponível",
  "admin/admin.app.custom-stock-export.columns.warehouse": "Estoque",
  "admin/admin.app.custom-stock-export.commons.loading": "Carregando...",
  "admin/admin.app.custom-stock-export.filters.noOptionsFound": "Nenhum resultado encontrado",
  "admin/admin.app.custom-stock-export.filters.tryAgain": "Tente Novamente",
  "admin/admin.app.custom-stock-export.filters.category.loading": "Carregando…",
  "admin/admin.app.custom-stock-export.filters.category.placeholder": "Digite uma categoria…",
  "admin/admin.app.custom-stock-export.filters.category.error": "Algo deu errado ao tentar carregar as categorias",
  "admin/admin.app.custom-stock-export.filters.clear": "Filtros Claros",
  "admin/admin.app.custom-stock-export.filters.all": "Tudo",
  "admin/admin.app.custom-stock-export.filters.none": "Nenhum",
  "admin/admin.app.custom-stock-export.filters.any": "Algum",
  "admin/admin.app.custom-stock-export.filters.is": "igual",
  "admin/admin.app.custom-stock-export.filters.isNot": "não igual",
  "admin/admin.app.custom-stock-export.filters.contains": "contém",
  "admin/admin.app.custom-stock-export.filters.apply": "Aplique",
  "admin/admin.app.custom-stock-export.filters.and": "e",
  "admin/admin.app.custom-stock-export.filters.dropdown.between": "Entre",
  "admin/admin.app.custom-stock-export.filters.dropdown.greater-or-equal": "Maior que, ou igual a",
  "admin/admin.app.custom-stock-export.filters.dropdown.less-or-equal": "Menor que, ou igual a",
  "admin/admin.app.custom-stock-export.filters.label.between-values": "Entre {min} e {max}",
  "admin/admin.app.custom-stock-export.filters.label.greater-or-equal-value": "Maior que, ou igual a {value}",
  "admin/admin.app.custom-stock-export.filters.label.less-or-equal-value": "Menor que, ou igual a {value}",
  "admin/admin.app.custom-stock-export.filters.ok": "OK",
  "admin/admin.app.custom-stock-export.filters.search": "Buscar",
  "admin/admin.app.custom-stock-export.filters.warehouses-names-query-error": "Houve um erro ao carregar os estoques selecionados. Por favor, tente novamente.",
  "admin/admin.app.custom-stock-export.filters.warehouses-query-error": "Houve um erro ao carregar as opções restantes. Tentando novamente.",
  "admin/admin.app.custom-stock-export.filters.error.between": "Insira um valor máximo maior que o valor mínimo.",
  "admin/admin.app.custom-stock-export.filters.placeholder.maximum": "Máximo",
  "admin/admin.app.custom-stock-export.filters.placeholder.minimum": "Mínimo"
}

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/messages/en.json from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/admin.app.navigation.title": "Custom Stock Export",
  "admin/admin.app.navigation.search.kws": "custom, stock, export",
  "admin/admin.app.custom-stock-export.pageTitle": "Custom Stock Export",
  "admin/admin.app.custom-stock-export.exportButton": "Export",
  "admin/admin.app.custom-stock-export.columns.last-update": "Last update",
  "admin/admin.app.custom-stock-export.columns.reserved": "Reserved",
  "admin/admin.app.custom-stock-export.columns.available": "Available",
  "admin/admin.app.custom-stock-export.columns.warehouse": "Warehouse",
  "admin/admin.app.custom-stock-export.commons.loading": "Loading...",
  "admin/admin.app.custom-stock-export.filters.noOptionsFound": "No results found",
  "admin/admin.app.custom-stock-export.filters.tryAgain": "Try Again",
  "admin/admin.app.custom-stock-export.filters.category.loading": "Loading…",
  "admin/admin.app.custom-stock-export.filters.category.placeholder": "Type a category…",
  "admin/admin.app.custom-stock-export.filters.category.error": "Something went wrong while trying to load categories",
  "admin/admin.app.custom-stock-export.filters.clear": "Clear Filters",
  "admin/admin.app.custom-stock-export.filters.all": "All",
  "admin/admin.app.custom-stock-export.filters.none": "None",
  "admin/admin.app.custom-stock-export.filters.any": "Any",
  "admin/admin.app.custom-stock-export.filters.is": "is",
  "admin/admin.app.custom-stock-export.filters.isNot": "is not",
  "admin/admin.app.custom-stock-export.filters.contains": "contains",
  "admin/admin.app.custom-stock-export.filters.apply": "Apply",
  "admin/admin.app.custom-stock-export.filters.and": "and",
  "admin/admin.app.custom-stock-export.filters.dropdown.between": "Between",
  "admin/admin.app.custom-stock-export.filters.dropdown.greater-or-equal": "Greater than, or equal to",
  "admin/admin.app.custom-stock-export.filters.dropdown.less-or-equal": "Less than, or equal to",
  "admin/admin.app.custom-stock-export.filters.label.between-values": "Between {min} and {max}",
  "admin/admin.app.custom-stock-export.filters.label.greater-or-equal-value": "Greater than, or equal to {value}",
  "admin/admin.app.custom-stock-export.filters.label.less-or-equal-value": "Less than, or equal to {value}",
  "admin/admin.app.custom-stock-export.filters.ok": "OK",
  "admin/admin.app.custom-stock-export.filters.search": "Search",
  "admin/admin.app.custom-stock-export.filters.warehouses-names-query-error": "There was an error loading selected warehouses. Please try again.",
  "admin/admin.app.custom-stock-export.filters.warehouses-query-error": "There was an error loading more options. Retrying.",
  "admin/admin.app.custom-stock-export.filters.error.between": "Insert a maximum value that is greater than the minimum value",
  "admin/admin.app.custom-stock-export.filters.placeholder.maximum": "Maximum",
  "admin/admin.app.custom-stock-export.filters.placeholder.minimum": "Minimum"
}

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/messages/es.json from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/admin.app.navigation.title": "Custom Stock Export",
  "admin/admin.app.navigation.search.kws": "personalizado, custom, stock, exportación, export",
  "admin/admin.app.custom-stock-export.pageTitle": "Custom Stock Export",
  "admin/admin.app.custom-stock-export.exportButton": "Exportar",
  "admin/admin.app.custom-stock-export.columns.last-update": "Última actualización",
  "admin/admin.app.custom-stock-export.columns.reserved": "Reservado",
  "admin/admin.app.custom-stock-export.columns.available": "Disponible",
  "admin/admin.app.custom-stock-export.columns.warehouse": "Almacén",
  "admin/admin.app.custom-stock-export.commons.loading": "Cargando...",
  "admin/admin.app.custom-stock-export.filters.noOptionsFound": "No se encontró ningún resultado",
  "admin/admin.app.custom-stock-export.filters.tryAgain": "Inténtelo nuevamente",
  "admin/admin.app.custom-stock-export.filters.category.loading": "Cargando…",
  "admin/admin.app.custom-stock-export.filters.category.placeholder": "Digite una categoría…",
  "admin/admin.app.custom-stock-export.filters.category.error": "Algo salió mal al intentar cargar las categorías",
  "admin/admin.app.custom-stock-export.filters.clear": "Limpiar Filtros",
  "admin/admin.app.custom-stock-export.filters.all": "Todos",
  "admin/admin.app.custom-stock-export.filters.none": "Ninguno",
  "admin/admin.app.custom-stock-export.filters.any": "Cualquiera",
  "admin/admin.app.custom-stock-export.filters.is": "igual",
  "admin/admin.app.custom-stock-export.filters.isNot": "no igual",
  "admin/admin.app.custom-stock-export.filters.contains": "contiene",
  "admin/admin.app.custom-stock-export.filters.apply": "Aplicar",
  "admin/admin.app.custom-stock-export.filters.and": "y",
  "admin/admin.app.custom-stock-export.filters.dropdown.between": "Entre",
  "admin/admin.app.custom-stock-export.filters.dropdown.greater-or-equal": "Mayor o igual que",
  "admin/admin.app.custom-stock-export.filters.dropdown.less-or-equal": "Menor o igual que",
  "admin/admin.app.custom-stock-export.filters.label.between-values": "Entre {min} y {max}",
  "admin/admin.app.custom-stock-export.filters.label.greater-or-equal-value": "Mayor o igual que {value}",
  "admin/admin.app.custom-stock-export.filters.label.less-or-equal-value": "Menor o igual que {value}",
  "admin/admin.app.custom-stock-export.filters.ok": "OK",
  "admin/admin.app.custom-stock-export.filters.search": "Buscar",
  "admin/admin.app.custom-stock-export.filters.warehouses-names-query-error": "Se produjo un error al cargar los almacenes seleccionados. Por favor, intente de nuevo.",
  "admin/admin.app.custom-stock-export.filters.warehouses-query-error": "Se produjo un error al cargar más opciones. Intentando de nuevo.",
  "admin/admin.app.custom-stock-export.filters.error.between": "Ingrese un valor máximo que sea superior al valor mínimo",
  "admin/admin.app.custom-stock-export.filters.placeholder.maximum": "Máximo",
  "admin/admin.app.custom-stock-export.filters.placeholder.minimum": "Mínimo"
}

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/admin/navigation.json from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "section": "orders",
  "subSection": "inventoryAndShipping",
  "subSectionItems": [
    {
      "isNew": true,
      "labelId": "admin/admin.app.navigation.title",
      "path": "/admin/custom-stock-export"
    }
  ],
  "searchKeyWordsHelpers": "admin/admin.app.navigation.search.kws"
}

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/admin/routes.json from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin.app.custom-stock-export": {
    "component": "CustomStockExport",
    "path": "/admin/app/custom-stock-export"
  }
}

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/docs/README.md from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

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

# Qr & Barcode Reader

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

Scan Qr codes and Barcodes with the Ean of a product embedded and do action with it.

![Media Placeholder](https://user-images.githubusercontent.com/55905671/131380395-e39ce499-2efa-4aaa-9506-f934fe9af8cf.gif)

:warning: **Supported Barcodes:**
- Ean 13
- Ean 14
- Ean 8
- UPC-A
---
## Configuration

### Step 1 - Adding the Qr & Barcode Reader app to your theme's dependencies

1. Using your terminal and the [VTEX IO Toolbelt](https://vtex.io/docs/recipes/development/vtex-io-cli-installment-and-command-reference), log into the desired VTEX account.
2. Run `vtex install vtexarg.qr-barcode-reader` on the account you're working on.
3. Add the app as a theme peerDependency in the `manifest.json` file;
```json
"peerDependencies": {
  "vtexarg.qr-barcode-reader": "0.x"
}
```
Now, you are able to use all blocks exported by the `qr-barcode-reader` app. Check out the full list below:

| Block name     | Description |
| -------------- | ----------- |
| `qr-reader` | Renders a button that allows you to scan a qr code. |
| `barcode-reader` | Renders a button that allows you to scan a barcode. |

### Step 2 - Adding the Qr & Barcode Reader's blocks to your theme's templates

To add the Qr & Barcode Reader's blocks in your theme, you just need to declare them as block of any component, this is because all exported blocks are thinking to be added anywhere in the store.

```json
  "store.home": {
      "blocks": [
        "qr-reader",
        "barcode-reader"
      ]
    },
```

The `qr-reader` block in this app has two props:

| Prop name          | Type      |  Description | Default value |
| --------------------| ----------|--------------|---------------|
| `separator` | `string` | The `separator` is a pattern that describes where each division of the qr code should occur. |`X`|
| `eanIndex` | `number` | The `eanIndex` is the index of the division made by the `separator` in which the Ean will be within the qr code. |  `0`  |

For example:

```json
"qr-reader":{
  "props":{
    "separator": "X",
    "eanIndex": 3
  }
},
```

If the qr code have this code embeded: `division0Xdivision1Xdivision2X33675134Xdivision4`, we will split by the `separator` in 5 division (0 to 4), and with the `eanIndex` we will get the division number 3 that in this case contains the Ean.

Every block in this app only has three props in common:

| Prop name          | Type      |  Description | Default value |
| --------------------| ----------|--------------|---------------|
|  `action`  |  `string`  |  The `action` that will do after the scan. Possible values are: `go-to-pdp` and `add-to-cart` | `go-to-pdp` |
|  `mode`  |  `string`  |  The `mode` indicates if we will have 1 Ean for 1 Sku or Many Eans for 1 Sku. Possible values are: `singleEan` and `multipleEan` | `singleEan` |
|  `blockClass`  |  `string`  |  Block  ID  of your choosing to  be  used  in [CSS  customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization#using-the-blockclass-property). |

---

## Multiple Ean

> ℹ _You need to do this configuration **only** if you want to use the `mode` `multipleEan`_

1. Go _Catalog -> Categories_ and in the Category father of alls, create a new `Product Field`
![Media Placeholder](https://user-images.githubusercontent.com/55905671/134919291-f4131fc6-2721-49c3-b4ef-9973a7394861.gif)

2. Set it up like this
- Name = `MultipleEan`
- Text = `MultipleEan`
- Type = `Text`
- Group = `Multiple Ean Group`
- Filter = ✅
- Active = ✅
![Media Placeholder](https://user-images.githubusercontent.com/55905671/134919558-8a56b9d7-6588-4200-b8cd-dd8ee75797de.png)

3. Copy the `id` of the created field
![Media Placeholder](https://user-images.githubusercontent.com/55905671/134921342-73a630cb-61dc-4fab-83b8-9e334b3f4a0c.png)

4. Go to the setup of the `Qr & Barcode Reader` component in
<https://{workspace}--{account}.myvtex.com/admin/apps/vtexarg.qr-barcode-reader@{version}/setup>
![Media Placeholder](https://user-images.githubusercontent.com/55905671/134928031-687c9beb-0b21-4dde-bed0-60193ee95309.png)

5. Complete the `Id of Product Field MultipleEan` with the `id` copied before
![Media Placeholder](https://user-images.githubusercontent.com/55905671/134928287-3ca3df2f-066b-4f09-86bc-5ef3bc259900.png)

6. Edit `MultipleEan` field of the products that you want to have it multiples Ean.
![Media Placeholder](https://user-images.githubusercontent.com/55905671/134929068-9b42913a-aaee-4b5a-9821-c05cb1ba43b4.png)
For the app to correctly identify which SKU of a product corresponds to which EAN, you need to ingress like this:
`--SKU:EAN-SKU:EAN-SKU:EAN-SKU:EAN--`
> ℹ _It is important that start and end with `--`_

### Clarifications

* If an EAN corresponds to two products, a modal will be displayed listing them and suggesting that the catalog be reviewed. None will be added to the cart.

* If an EAN corresponds to a SKU but that SKU does not exist in the product in which that product field is loaded, a modal will be displayed commenting on it. None will be added to the cart.

* If an EAN corresponds to 2 SKUs of the same product, the first one loaded in the product field will be added.
---
## Customization

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

| CSS Handles |
| ----------- |
| `qrReaderWrapper` |
| `qrContainer` |
| `barcodeReaderWrapper` |
| `barcodeContainer` |
| `modalReaderMessagesSucces` |
| `modalReaderMessagesSuccesText` |
| `modalReaderMessagesError` |
| `modalReaderMessagesErrorText` |
| `listErrorMutipleProductText` |

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

## Contributors ✨

Thanks goes to these wonderful people:
<table>
  <tr>
    <td align="center"><a href="https://github.com/germanBonacchi"><img src="https://avatars.githubusercontent.com/u/55905671?v=4" width="100px;" alt=""/><br /><sub><b>Germán Bonacchi</b></sub></a><br /><a href="https://github.com/vtex-apps/quantity-on-cart/commits?author=germanBonacchi" title="Code">💻</a></td>
  </tr>
</table>
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

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

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


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/react/types.ts from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { QueryResult } from 'react-apollo'
import type {
  InventoryProduct,
  Paging,
  InventoryProductQuantityUpdateInput,
  InventoryProductQuantityUpdateOutput,
} from 'vtex.inventory-graphql'
import type {
  Warehouse,
  Paging as LogisticsPaging,
} from 'vtex.logistics-carrier-graphql'
import type Maybe from 'graphql/tsutils/Maybe'

export type QueriedInventoryProduct = Pick<
  InventoryProduct,
  | 'id'
  | 'sku'
  | 'warehouseId'
  | 'cacheId'
  | 'name'
  | 'warehouseName'
  | 'quantity'
  | 'reservedQuantity'
  | 'availableQuantity'
  | 'unlimited'
>

export interface QueriedInventoryProductsPage {
  products: QueriedInventoryProduct[]
  paging: Pick<Paging, 'total' | 'pages'>
}

export type QueriedChangelog = Pick<
  InventoryProduct,
  'name' | 'warehouseName' | 'changelog'
>

export type QueriedWarehouse = Pick<Warehouse, 'id' | 'name'>

export type QueriedWarehousesNames = Array<Pick<QueriedWarehouse, 'name'>>

export interface QueriedWarehousesPage {
  items: QueriedWarehouse[]
  paging: Pick<LogisticsPaging, 'page' | 'pages'>
}

export type InventoryProductIds = Pick<InventoryProduct, 'sku' | 'warehouseId'>

export type QueriedInventoryProductData = Pick<
  InventoryProduct,
  | 'quantity'
  | 'availableQuantity'
  | 'reservedQuantity'
  | 'dispatchedReservations'
  | 'unlimited'
> & {
  catalogProduct: Pick<InventoryProduct['catalogProduct'], 'id'>
}

export type InventoryProductUpdateData = Pick<
  InventoryProductQuantityUpdateInput,
  'quantity' | 'unlimited'
> &
  Partial<
    Pick<InventoryProductQuantityUpdateOutput, 'errorCode' | 'errorMessage'>
  >

export type RowStatus = Pick<QueryResult, 'loading' | 'refetch'> & {
  loadingError: QueryResult['error']
  savingErrorCode: InventoryProductQuantityUpdateOutput['errorCode']
  savingErrorMessage: InventoryProductQuantityUpdateOutput['errorMessage']
  available: boolean
}

export interface LoadingInventoryProductRow {
  loading: true
  id: string
}

export type InventoryProductRow = QueriedInventoryProduct &
  Omit<QueriedInventoryProductData, 'catalogProduct'> & {
    loading: false
    updatedQuantity: InventoryProductQuantityUpdateInput['quantity']
    updatedUnlimited?: Maybe<InventoryProductQuantityUpdateInput['unlimited']>
    status: RowStatus
    catalogProduct: Maybe<QueriedInventoryProductData['catalogProduct']>
  }

export interface Motion {
  willChange: string
  transition: string
}

export interface RowRendererArgs<TData = unknown> {
  index: number
  key: string
  props: {
    data: TData
    motion: Motion
    height: React.HTMLProps<HTMLTableRowElement>['height']
  }
}

export interface RowProps {
  height: React.HTMLProps<HTMLTableRowElement>['height']
  motion: Motion
}

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/react/package.json from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "custom-stock-export",
  "version": "0.0.12",
  "devDependencies": {
    "@types/node": "^11.12.1",
    "@types/ramda": "^0.27.57",
    "@types/react": "^16.8.10",
    "@types/react-intl": "^3.0.0",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-client": "^2.4.7",
    "graphql": "^14.0.2",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-intl": "^5.20.10",
    "typescript": "3.9.7",
    "@types/lodash.debounce": "^4.0.6",
    "vtex.admin-inventory": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.admin-inventory@0.46.0/public/@types/vtex.admin-inventory",
    "vtex.inventory-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.inventory-graphql@0.18.2/public/@types/vtex.inventory-graphql",
    "vtex.logistics-carrier-commons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.logistics-carrier-commons@0.66.0/public/@types/vtex.logistics-carrier-commons",
    "vtex.logistics-carrier-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.logistics-carrier-graphql@0.41.0/public/@types/vtex.logistics-carrier-graphql",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.3/public/@types/vtex.render-runtime",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.145.2/public/@types/vtex.styleguide"
  },
  "dependencies": {
    "@types/faker": "^4.1.5",
    "@vtex/styleguide": "^9.145.1",
    "faker": "^4.1.0",
    "fix": "0.0.6",
    "ramda": "^0.27.1",
    "react-apollo": "^3.1.5",
    "react-collapsed": "^3.2.2",
    "lodash.debounce": "^4.0.8"
  }
}

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/react/CustomStockExport.tsx from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { Layout, PageHeader, PageBlock } from 'vtex.styleguide'
import { useIntl } from 'react-intl'

import { appMessages } from './utils/intl'
import Filters from './components/Filters'

export default function CustomStockExport() {
  const intl = useIntl()

  return (
    <Layout
      fullWidth
      pageHeader={
        <PageHeader title={intl.formatMessage(appMessages.pageTitle)} />
      }
    >
      <PageBlock variation="full">
        <Filters />
      </PageBlock>
    </Layout>
  )
}

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/public/metadata/messages/es-AR.json from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "QR & Barcode Reader",
  "headline": "Escanee Qr y código de barras y haga lo que quiera con ellos!",
  "overview": "La aplicación QR & Barcode Reader le permite escanear códigos con un EAN de un sku embebido , ¡luego puede ir a la PDP o agregarlo a su carrito!",
  "features": [
    "Escanear códigos Qr",
    "Escanear códigos de barras",
    "Redirigir a la PDP de los productos escaneados",
    "Integración con minicart para agregar productos rápidamente"
  ],
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/public/metadata/messages/pt-BR.json from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "QR & Barcode Reader",
  "headline": "Digitalize Qr e código de barras e faça o que quiser com eles!",
  "overview": "O aplicativo QR & Barcode Reader permite que você escaneie códigos com um EAN sku embutido, então você pode ir para o PDP ou adicioná-lo ao seu carrinho!",
  "features": [
    "Ler códigos Qr",
    "Scan Barcodes",
    "Redirecionar para o PDP dos produtos que você digitaliza",
    "Integração com minicart para adicionar produtos rapidamente"
  ],
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/public/metadata/messages/en-US.json from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "QR & Barcode Reader",
  "headline": "Scan Qr and Barcode and do whatever you want with them!",
  "overview": "The QR & Barcode Reader app allows you to scan codes with an embedded sku EAN, then you can go to the PDP or add it to your cart!",
  "features": [
    "Scan Qr codes",
    "Scan Barcodes",
    "Redirect to the PDP of the products that you scan",
    "Integration with minicart for add products quickly"
  ],
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
import 'vtex.render-runtime'

// FIXME: remove uncessary typings declarations when vtex.render-runtime exports them properly.
// Since we're using `import type`, these import statements are clear for now
declare module 'vtex.render-runtime' {
  import type {
    RenderContext as _RenderContext,
    withRuntimeContext as _withRuntimeContext,
  } from 'vtex.render-runtime/react/components/RenderContext'

  export type RenderContext = _RenderContext

  export const withRuntimeContext: _withRuntimeContext
}

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/react/typings/gql.d.ts from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

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

  const Schema: DocumentNode

  export default Schema
}

declare module '*.graphql' {
  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 custom-stock-export/custom-stock-export/react/typings/vtex.styleguide.icons.d.ts from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.store-icons'

declare module '@vtex/styleguide/lib/*' {
  const Component: ComponentType<unknown>
  export default Component
}

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/react/typings/styleguide.d.ts from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable @typescript-eslint/naming-convention */
declare module 'vtex.styleguide' {
  export const Alert
  export const Layout
  export const PageBlock
  export const PageHeader
  export const Table
  export const Input
  export const Spinner
  export const Button
  export const ButtonPlain
  export const ButtonWithIcon
  export const Collapsible
  export const Dropdown
  export const Toggle
  export const Modal
  export const NumericStepper
  export const ModalDialog
  export const ActionMenu
  export const EXPERIMENTAL_Select
  export const IconCheck
  export const IconOptionsDots
  export const IconSuccess
  export const IconClear
  export const IconArrowBack
  export const IconCaretLeft
  export const IconCaretRight
  export const IconCaretDown
  export const IconDelete
  export const IconGrid
  export const IconInlineGrid
  export const IconInfo
  export const IconSearch
  export const IconWarning
  export const IconFailure
  export const IconClose
  export const IconPlus
  export const IconExternalLink
  export const InputSearch
  export const Textarea
  export const DatePicker
  export const Checkbox
  export const ToastContext
  export const ToastProvider
  export const FloatingActionBar
  export const EmptyState
  export const Tooltip
  export const EXPERIMENTAL_Table
  export const EXPERIMENTAL_useTableMeasures
  export const EXPERIMENTAL_useTableProportion
  export interface CheckboxTree<T> {
    checkedItems: T[]
    disabledItems: T[]
    uncheck: (item: T | Tree<T>) => void
    isChecked: (item: T | Tree<T>) => boolean
    isPartiallyChecked: (item: T | Tree<T>) => boolean
    isDisabled: (item: T | Tree<T>) => boolean
    toggle: (item: T | Tree<T>) => boolean
    allChecked: boolean
    someChecked: boolean
    toggleAll: () => void
    uncheckAll: () => void
  }
  export const EXPERIMENTAL_useCheckboxTree: <T>(options: {
    items: T[] | Array<{ id: string; children: T[] }>
    comparator: (item: T) => (candidate: T) => boolean
  }) => CheckboxTree<T>
  export const EXPERIMENTAL_useTableVisibility
  export const EXPERIMENTAL_useTableSort
  export const RadioGroup
  export const Dropzone
  export const Progress
  export const AutocompleteOption
  export const Tab
  export const Tabs
  export const FilterBar

  export interface CellData<C> {
    rowHeight: number
    data: C
    motion: {
      transition?: string
      willChange?: string
    }
    density: Density
  }
}

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/react/typings/filters.d.ts from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface SelectOption<T = string | Specification> {
  value: T
  label: string
}

interface Specification {
  category: SelectOption
  specificationField: SelectOption
  specification: string
}

interface Statement {
  error?: ApolloError
  object: SelectOption
  subject: string
  verb: string
}

interface StatementOption {
  value: string
  label: string
}

interface FilterProps {
  statements: Statement[]
  setStatements: (s: Statement[]) => void
  filteredByIsInCollection: boolean
  filterByIsInCollection: (id?: string) => void
}

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/react/typings/css.d.ts from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

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

  const styles: Styles

  export default styles
}

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/react/typings/index.d.ts from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```typescript
type AutocompleteOption = string | StructuredAutocompleteOption

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/react/utils/autocomplete.ts from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const MAX_ITEMS_AUTOCOMPLETE = 10
export const getTermFromOption = (option: AutocompleteOption): string =>
  typeof option === 'string' ? option : option.label

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/react/utils/pagination.ts from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable vtex/prefer-early-return */
import { useState, useEffect } from 'react'
import { uniq, path } from 'ramda'

import { getTermFromOption } from './autocomplete'

export interface PaginatedData<T> {
  items: T[]
  paging: Paging
}

export interface Paging {
  page: number
  perPage: number
  pages: number
  total: number
}

export interface Pagination {
  page: number
  pageSize: number
  searchKey: string
}

export type SetPagination = (pagination: Partial<Pagination>) => void

export const usePagination = (
  initialState: Pagination = { page: 1, pageSize: 5, searchKey: '' }
): [Pagination, SetPagination] => {
  const [state, setState] = useState(initialState)

  return [
    state,
    (partialState: Partial<Pagination>) =>
      setState({ ...state, ...partialState }),
  ]
}

interface UpdatePageArgs {
  oldPageSize: number
  pageSize: number
  from: number
  to: number
}

export const newPage = ({
  oldPageSize,
  pageSize,
  from,
  to,
}: UpdatePageArgs) => {
  return pageSize < oldPageSize
    ? Math.ceil(Math.max(from / pageSize, 1))
    : Math.ceil(Math.max(to / pageSize, 1))
}

/**
 * This function takes the Autocomplete options and only the unique options
 * will be structured. The options that appears multiple times will be turned into
 * a simple string so the term can be searched before going into the Collection page.
 */
const processAutocompleteOptions = (options: AutocompleteOption[]) => {
  const occurrences = options.reduce<{ [k: string]: number }>(
    (acc, option) => ({
      ...acc,
      [getTermFromOption(option)]: (acc[getTermFromOption(option)] || 0) + 1,
    }),
    {}
  )

  return options.map((option) =>
    occurrences[getTermFromOption(option)] > 1
      ? getTermFromOption(option)
      : option
  )
}

export interface OptionsFetchMore {
  options: AutocompleteOption[]
  canFetchMore: boolean
}

export interface Data {
  items: Item[]
  paging: Paging
}

interface Item {
  id: Record<string, unknown>
  name: string
}

export interface OptionsSource {
  data: Data
  pagination: Pagination
  loading: boolean
}
export type SetOptions = (options: AutocompleteOption[]) => void
export type SetCanFetchMore = (canFetch: boolean) => void

export interface PaginatedOptions {
  options: AutocompleteOption[]
  setOptions: SetOptions
  canFetchMore: boolean
  setCanFetchMore: SetCanFetchMore
}

export const usePaginatedOptions = (
  sourceState: OptionsSource,
  initialState: OptionsFetchMore = { options: [], canFetchMore: false }
): PaginatedOptions => {
  const { pagination, data, loading } = sourceState
  const [options, setOptions] = useState(initialState.options)
  const [canFetchMore, setCanFetchMore] = useState(initialState.canFetchMore)

  useEffect(() => {
    if (!loading && path(['items'], data)) {
      const fetchedOptions = data.items.map(
        ({ id, name }: Item): AutocompleteOption => ({
          label: name,
          value: id,
        })
      )

      if (pagination.page === 1) {
        setOptions(uniq(processAutocompleteOptions(fetchedOptions)))
      } else {
        setOptions(
          uniq(processAutocompleteOptions(options.concat(fetchedOptions)))
        )
      }

      setCanFetchMore(data.paging?.pages > pagination.page)
    }
  }, [loading, data, pagination.searchKey, pagination.page])

  return {
    options,
    setOptions,
    canFetchMore,
    setCanFetchMore,
  }
}

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/react/utils/inputs.ts from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```typescript
/**
 * Useful to avoid having to having to create another state for the input string,
 * because using type="number" gives an empty ChangeEvent value when the
 * number is invalid, and it would clear the quantity variable as a consequence.
 */
export function isInteger(value: string) {
  return value.match(/^-?[0-9]*$/) != null
}

/**
 * Converts NaN to null, to make checks for invalid values easier.
 */
export function convertInteger(value: string) {
  return value === '' || Number.isNaN(+value) ? null : +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 custom-stock-export/custom-stock-export/react/utils/intl.ts from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

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

const prefix = 'admin/admin.app.custom-stock-export.'
const prefixFilters = 'admin/admin.app.custom-stock-export.filters.'

export const appMessages = defineMessages({
  pageTitle: { id: `${prefix}pageTitle` },
  exportButton: { id: `${prefix}exportButton` },
})

export const filtersMessages = defineMessages({
  clear: { id: `${prefixFilters}clear` },
  all: { id: `${prefixFilters}all` },
  none: { id: `${prefixFilters}none` },
  any: { id: `${prefixFilters}any` },
  is: { id: `${prefixFilters}is` },
  isNot: { id: `${prefixFilters}isNot` },
  contains: { id: `${prefixFilters}contains` },
  apply: { id: `${prefixFilters}apply` },
  loading: { id: `${prefixFilters}category.loading` },
  placeholder: { id: `${prefixFilters}category.placeholder` },
  error: { id: `${prefixFilters}category.error` },
  ok: { id: `${prefixFilters}ok` },
  and: { id: `${prefixFilters}and` },
  noOptionsFound: { id: `${prefixFilters}noOptionsFound` },
  tryAgain: { id: `${prefixFilters}tryAgain` },
  greaterOrEqualDropdown: { id: `${prefixFilters}dropdown.greater-or-equal` },
  greaterOrEqualLabel: { id: `${prefixFilters}label.greater-or-equal-value` },
  lessOrEqualDropdown: { id: `${prefixFilters}dropdown.less-or-equal` },
  lessOrEqualLabel: { id: `${prefixFilters}label.less-or-equal-value` },
  betweenDropdown: { id: `${prefixFilters}dropdown.between` },
  betweenLabel: { id: `${prefixFilters}label.between-values` },
  betweenInvalid: { id: `${prefixFilters}error.between` },
  maximumPlaceholder: { id: `${prefixFilters}placeholder.maximum` },
  minimumPlaceholder: { id: `${prefixFilters}placeholder.minimum` },
  search: { id: `${prefixFilters}search` },
  warehousesQueryError: { id: `${prefixFilters}warehouses-query-error` },
  warehousesNamesQueryError: {
    id: `${prefixFilters}warehouses-names-query-error`,
  },
})

export const commonMessages = defineMessages({
  loading: { id: `${prefix}commons.loading` },
})

export const columnsMessages = defineMessages({
  lastUpdate: { id: `${prefix}columns.last-update` },
  reserved: { id: `${prefix}columns.reserved` },
  available: { id: `${prefix}columns.available` },
  warehouse: { id: `${prefix}columns.warehouse` },
})

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/react/style/Loading.global.css from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```css
.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 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 custom-stock-export/custom-stock-export/react/components/LoadingSpinner.tsx from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { Spinner } from 'vtex.styleguide'
import React from 'react'
import '../style/Loading.global.css'

export default function LoadingSpinner() {
  return (
    <div className="loading-container">
      <Spinner />
    </div>
  )
}

```


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

[User] Show me the implementation of custom-stock-export/custom-stock-export/react/graphql/warehouses.graphql from the custom-stock-export VTEX app.

[Assistant]
Here's the implementation:

```graphql
query warehouses($page: Int!, $perPage: Int!, $keyword: String) {
  warehouses(page: $page, perPage: $perPage, keyword: $keyword)
    @context(provider: "vtex.logistics-carrier-graphql") {
    items {
      id
      name
    }
    paging {
      page
      pages
    }
  }
}

```