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

[User] Show me the implementation of overlay-layout/react/modules/transitionsConstants.ts from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const duration = {
  enteringScreen: 250,
  leavingScreen: 218,
  standard: 300,
}

export const easing = {
  easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
  easeOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
  easeIn: 'cubic-bezier(0.4, 0, 1, 1)',
  sharp: 'cubic-bezier(0.4, 0, 0.6, 1)',
}

```


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

[User] Show me the implementation of overlay-layout/react/modules/getTransitionProps.ts from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
import {
  TransitionActions,
  TransitionProps as _TransitionProps,
} from 'react-transition-group/Transition'

export type TransitionHandlerKeys = 'onEnter' | 'onExit'
export type TransitionKeys = 'in' | 'timeout' | TransitionHandlerKeys
export type TransitionProps = TransitionActions &
  Partial<Pick<_TransitionProps, TransitionKeys>>

export interface TransitionPropsOptions {
  mode: 'enter' | 'exit' | 'appear'
}

export default function getTransitionProps(
  props: TransitionProps,
  options?: TransitionPropsOptions
) {
  const { timeout } = props

  let duration: number | string | undefined = 0
  if (typeof timeout === 'number') {
    duration = timeout
  } else if (typeof timeout === 'object' && options && timeout[options.mode]) {
    duration = timeout[options.mode]
  }

  return {
    duration,
  }
}

```


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

[User] Show me the implementation of overlay-layout/react/modules/ownerDocument.ts from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
export default function ownerDocument(node: HTMLElement | null | undefined) {
  return (node && node.ownerDocument) || window.document
}

```


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

[User] Show me the implementation of overlay-layout/react/modules/useForkRef.ts from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

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

import setRef from './setRef'

export default function useForkRef<T>(
  refA: React.Ref<T> | ((instance: T | null) => void) | null | undefined,
  refB: React.Ref<T> | ((instance: T | null) => void) | null | undefined
): React.Ref<T> {
  return useMemo(() => {
    if (!refA && !refB) {
      return null
    }

    return refValue => {
      setRef(refA, refValue)
      setRef(refB, refValue)
    }
  }, [refA, refB])
}

```


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

[User] Show me the implementation of overlay-layout/react/modules/setRef.ts from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
export default function setRef<T>(
  ref: React.Ref<T> | ((instance: T | null) => void) | null | undefined,
  value: T | null
) {
  if (typeof ref === 'function') {
    ref(value)
  } else if (ref) {
    ;(ref as any).current = 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 overlay-layout/react/modules/getScrollbarSize.ts from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
export default function getScrollbarSize() {
  const scrollDiv = document.createElement('div')
  scrollDiv.style.width = '99px'
  scrollDiv.style.height = '99px'
  scrollDiv.style.position = 'absolute'
  scrollDiv.style.top = '-9999px'
  scrollDiv.style.overflow = 'scroll'

  document.body.appendChild(scrollDiv)
  const scrollbarSize = scrollDiv.offsetWidth - scrollDiv.clientWidth
  document.body.removeChild(scrollDiv)

  return scrollbarSize
}

```


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

[User] Show me the implementation of overlay-layout/react/modules/useEnhancedEffect.ts from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { useLayoutEffect, useEffect } from 'react'
import { canUseDOM } from 'vtex.render-runtime'

const useEnhancedEffect = canUseDOM ? useLayoutEffect : useEffect

export default useEnhancedEffect

```


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

[User] Show me the implementation of overlay-layout/react/modules/isOverflowing.ts from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
import ownerWindow from './onwerWindow'
import ownerDocument from './ownerDocument'

export default function isOverflowing(container: HTMLElement) {
  const doc = ownerDocument(container)

  if (doc.body === container) {
    return ownerWindow(doc).innerWidth > doc.documentElement.clientWidth
  }

  return container.scrollHeight > container.clientHeight
}

```


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

[User] Show me the implementation of overlay-layout/react/modules/createTransition.ts from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
import {
  easing as easingFunctions,
  duration as transitionDuration,
} from './transitionsConstants'

export interface TransitionCreationOptions {
  duration: number | string
  easing: string
  delay: number | string
}

const formatMs = (milliseconds: number) => `${Math.round(milliseconds)}ms`

export default function createTransition(
  props: string | string[] = ['all'],
  options: Partial<TransitionCreationOptions> = {}
) {
  const {
    delay = 0,
    easing = easingFunctions.easeInOut,
    duration = transitionDuration.standard,
  } = options

  return (Array.isArray(props) ? props : [props])
    .map(
      animatedProp =>
        `${animatedProp} ${
          typeof duration === 'string' ? duration : formatMs(duration)
        } ${easing} ${typeof delay === 'string' ? delay : formatMs(delay)}`
    )
    .join(',')
}

```


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

[User] Show me the implementation of overlay-layout/react/components/Animations/Fade.tsx from the overlay-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { Transition } from 'react-transition-group'
import {
  ENTERED,
  ENTERING,
  ExitHandler,
  EnterHandler,
  TransitionProps,
  TransitionStatus,
} from 'react-transition-group/Transition'

import { duration } from '../../modules/transitionsConstants'
import createTransition from '../../modules/createTransition'
import getTransitionProps from '../../modules/getTransitionProps'
import useForkRef from '../../modules/useForkRef'

interface Props {
  in?: boolean
  children: React.ReactElement
  timeout?: TransitionProps['timeout']
  onEnter?: EnterHandler
  onExit?: ExitHandler
}

function getOpacity(state: TransitionStatus) {
  switch (state) {
    case ENTERING:
      return 1
    case ENTERED:
      return 1
    default:
      return 0
  }
}

const defaultTimeout = {
  enter: duration.enteringScreen,
  exit: duration.leavingScreen,
}

const Fade = React.forwardRef(function Fade(
  props: Props,
  ref: React.Ref<unknown>
) {
  const {
    onExit,
    onEnter,
    children,
    in: inProp = false,
    timeout = defaultTimeout,
    ...other
  } = props

  const handleRef = useForkRef(ref, (children as any).ref)
  const handleEnter: EnterHandler = (node, isAppearing) => {
    const transitionProps = getTransitionProps({ timeout }, { mode: 'enter' })
    // support for older versions of android browser and safari
    // https://caniuse.com/#feat=css-transitions
    node.style.webkitTransition = createTransition('opacity', transitionProps)
    node.style.transition = createTransition('opacity', transitionProps)

    if (onEnter) {
      onEnter(node, isAppearing)
    }
  }

  const handleExit: ExitHandler = node => {
    const transitionProps = getTransitionProps({ timeout }, { mode: 'exit' })
    node.style.webkitTransition = createTransition('opacity', transitionProps)
    node.style.transition = createTransition('opacity', transitionProps)

    if (onExit) {
      onExit(node)
    }
  }

  return (
    <Transition
      appear
      in={inProp}
      timeout={timeout}
      onExit={handleExit}
      onEnter={handleEnter}
      {...other}
    >
      {(state: TransitionStatus) => {
        return React.cloneElement(children, {
          ref: handleRef,
          style: {
            opacity: getOpacity(state),
            visibility: state === 'exited' && !inProp ? 'hidden' : undefined,
            ...children.props.style,
          },
        })
      }}
    </Transition>
  )
})

export default Fade

```


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

[User] Show me the implementation of product-highlight-by-vtex-segment/docs/README.md from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

```markdown
##  ⚠ Maintenance ⚠
*Starting September 1st 2022, this application will no longer be maintained by VTEX. Code is released for free under the GNU/PL Agreement for you to use and modify at your convenience. The VTEX repository shall remain unchanged with the original version.*

---

> 📢 Use this project, [contribute](https://github.com/vtex-apps/product-highlight-by-vtex-segment) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

# Product Highlight by VTEX Segment

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

The **Product Highlight by VTEX Segment** app allows shoppers to select a Whitelabel Seller available in their region, and it filters the product listing results accordingly. The app also uses a badge to highlight products of Whitelabel Sellers that are available in the shopper's region.

![Media Placeholder](https://user-images.githubusercontent.com/55905671/143295939-7d1b5625-5c57-46ad-a197-ef959db268de.gif)

---

## Before you start

Before configuring the **Product Highlight by VTEX Segment** app, make sure to create a collection for each Whitelabel Seller of your store (*See [Creating Collections Beta](https://help.vtex.com/en/tutorial/creating-collections-beta) for more information).* When naming your collection, make sure to use the following naming structure: `{sellerId}-{defaultCollectionName}`, where the `{sellerId}` is the `sellerId` of the Whitelabel Seller and `{defaultCollectionName}` is the name of the Collection.

![Colection Name](https://user-images.githubusercontent.com/55905671/143301880-ee440d48-eced-4750-9cd2-ae3f3588a8e4.png)

---

## Configuration

To configure the **Product Highlight by VTEX Segment** app, you'll need to:
1. Set up the default configurations of the **Product Highlight by VTEX Segment** app via the VTEX Admin.
2. Add the **Product Highlight by VTEX Segment** to the store theme.

By the end of these steps, you'll have your store products highlighted according to the Whitelabel Seller selected.

## Setting up the Product Highlights app

1. Open the terminal and log in to the desired VTEX account using the [VTEX IO CLI](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-vtex-io-cli-installation-and-command-reference).
2. Install the `vtexarg.product-highlight-by-vtex-segment` app on your account.
   ```sh
   vtex install vtexarg.product-highlight-by-vtex-segment
   ```
3. Open the VTEX Admin.
4. Go to **Account Settings > Apps > My apps**.
5. Look for the **Product Highlight by VTEX Segment** app and click on **Settings**.

   ![Product Highlight by VTEX Segment](https://user-images.githubusercontent.com/55905671/143299640-21b00a57-64bc-467c-917b-34a16d44bc51.png)

6. Fill in the presented fields as in the following:
   - **Default Seller Id** - Enter the default seller ID to use in cases the shopper's region is not detected (e.g., `jumboargentinav692lanus692`).
   - **Default Collection Name** - Enter the name of the collection corresponding to the default seller ID (e.g., `leyDeGondolas`). This is the `{defaultCollectionName}` part of the **Collection Name** (*See [Before you start](#before-you-start) for more information*).
   - **Image Url of Highlight** - Enter the URL of the ximage badge that will highlight the products. For example: ![Image Url of Highlight](https://user-images.githubusercontent.com/60782333/152064990-8990c5a7-3549-49c9-91b0-3bc3ad7604fb.png)
7. Click on **Save**.

### Adding the Product Highlights component to your store theme

1. Open your store theme in any code editor of your choice.
2. Open the `manifest.json` file and add the `vtexarg.product-highlight-by-vtex-segment` app as a peer dependency of your theme:
    ```diff
    "peerDependencies": {
       ...
    +  "vtexarg.product-highlight-by-vtex-segment": "0.x"
       ...
    }
    ```
3. Add the `product-highlight-by-vtex-segment` block to any child of the `store.product` template (Product Details Page template). For example:

    ```diff
    "store.product": {
        "children": [
        "flex-layout.row#product-main",
        ]
    },
    "flex-layout.row#product-main": {
        "children": [
        "flex-layout.col#right-col"
        ]
    },
    "flex-layout.col#right-col": {
        "children": [
    +     "product-highlight-by-vtex-segment"
        ]
    }
    ```

Now, see the [Customization](#customization) section to add custom styles to your component.

After [linking your store theme app](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-linking-an-app) in a development workspace, you'll be able to select a Whitelabel Seller available in your region from a dropdown menu list.

![Select Whitelabel Seller](https://user-images.githubusercontent.com/55905671/143302341-6ba9d940-185f-4c9a-98c5-cb158f285d03.png)

You'll then be able to see the chosen badge in the product cards of the selected Whitelabel Seller's collection.

![Image Url of Highlight](https://user-images.githubusercontent.com/55905671/143302850-e8d39857-ffb6-49fc-b1cf-a7496733ac4c.png)

## Customization

To apply CSS customizations in this and other blocks, follow the [Using CSS Handles for store customization](https://developers.vtex.com/vtex-developer-docs/docs/vtex-io-documentation-using-css-handles-for-store-customization) guide.

| CSS Handles |
| ----------- |
| `productHighlightByVtexSegmentContainer` |
| `imageOfHighlight` |

---
<!-- 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/product-highlight-by-vtex-segment/commits?author=germanBonacchi" title="Code">💻</a></td>
    <td align="center"><a href="https://github.com/arielabaruffaldi"><img src="https://avatars.githubusercontent.com/u/36748003?v=4" width="100px;" alt=""/><br /><sub><b>Ariela Baruffaldi</b></sub></a><br /><a href="https://github.com/vtex-apps/product-highlight-by-vtex-segment/commits?author=arielabaruffaldi" title="Code">💻</a></td>
    <td align="center"><a href="https://github.com/GuidoSdo"><img src="https://avatars.githubusercontent.com/u/33711188?v=4" width="100px;" alt=""/><br /><sub><b>Guido Salcedo</b></sub></a><br /><a href="https://github.com/vtex-apps/product-highlight-by-vtex-segment/commits?author=GuidoSdo" 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 product-highlight-by-vtex-segment/node/service.json from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

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

```


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

[User] Show me the implementation of product-highlight-by-vtex-segment/node/package.json from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "@vtex/api": "6.45.6",
    "@vtex/clients": "^2.13.0"
  },
  "devDependencies": {
    "@types/node": "^12.0.0",
    "@vtex/api": "6.45.6",
    "typescript": "3.9.7"
  },
  "resolutions": {
    "**/**/minimist": "^0.2.1",
    "**/**/lodash": "^4.17.17"
  },
  "version": "0.4.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 product-highlight-by-vtex-segment/node/globals.ts from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type {
  IOContext,
  ParamsContext,
  RecorderState,
  SegmentData,
  ServiceContext,
  MessagesLoaderV2,
} from '@vtex/api'

import type { Clients } from './clients'

declare global {
  type Context = ServiceContext<Clients, State>

  interface State extends RecorderState {
    messagesTenantLanguage?: MessagesLoaderV2
    messagesBindingLanguage?: MessagesLoaderV2
  }

  interface StaleRevalidateData<T> {
    ttl: Date
    data: T
  }

  interface CustomContext extends ParamsContext {
    cookie: string
    originalPath: string
    vtex: CustomIOContext
  }

  interface CustomIOContext extends IOContext {
    segment?: SegmentData
  }

  interface Property {
    name: string
    values: [string]
  }

  interface TranslatableMessage {
    content: string
    from: string
    id: string
  }

  interface Reference {
    Key: string
    Value: string
  }
}

```


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

[User] Show me the implementation of product-highlight-by-vtex-segment/node/index.ts from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

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

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

const TIMEOUT_MS = 800

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const memoryCache = new LRUCache<string, any>({ max: 20 })

metrics.trackCache('status', memoryCache)

export default new Service<Clients, RecorderState, Context>({
  clients: {
    implementation: Clients,
    options: {
      default: {
        retries: 2,
        timeout: TIMEOUT_MS,
      },
      status: {
        memoryCache,
      },
    },
  },
  graphql: {
    resolvers,
  },
})

```


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

[User] Show me the implementation of product-highlight-by-vtex-segment/react/package.json from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "@vtex/css-handles": "^1.0.0",
    "atob": "^2.1.2",
    "react": "^16.12.0",
    "react-intl": "^3.12.0",
    "react-apollo": "^3.1.5"
  },
  "devDependencies": {
    "@types/jest": "^24.0.18",
    "@types/prop-types": "^15.7.0",
    "@types/react": "^16.9.31",
    "@vtex/test-tools": "^3.3.2",
    "@vtex/tsconfig": "^0.4.4",
    "typescript": "3.9.7",
    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.4/public/@types/vtex.css-handles"
  },
  "version": "0.2.1"
}

```


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

[User] Show me the implementation of product-highlight-by-vtex-segment/react/ProductHighlight.tsx from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { useProduct } from 'vtex.product-context'
import { useCssHandles } from 'vtex.css-handles'
import atob from 'atob'

import useAppSettings from './hooks/useAppSettings'
import type { Collection, Runtime } from './typings/global'

declare let window: {
  __RUNTIME__: Runtime
}

const ProductHighligh: StorefrontFunctionComponent = () => {
  const { product } = useProduct()

  if (!product) {
    return null
  }

  const { appSettings: appInfo } = useAppSettings()

  const collections: Collection[] = product.productClusters

  const segmentToken = window?.__RUNTIME__?.segmentToken
  const segmentTokenInfo = JSON.parse(atob(segmentToken))
  const { regionId } = segmentTokenInfo
  let sellerIds: string[]

  if (regionId) {
    const regionIdInfo = atob(regionId)

    sellerIds = regionIdInfo.split('SW#')[1].split(';')
  } else {
    sellerIds = appInfo?.defaultSellerId ? [appInfo?.defaultSellerId] : []
  }

  const defaultNameCollection = appInfo?.defaultNameCollection
    ? appInfo?.defaultNameCollection
    : ''

  const productFromCollection: boolean[] = []

  sellerIds?.forEach((seller: string) => {
    productFromCollection.push(
      collections.some(
        (collection: Collection) =>
          collection.name.trim() === `${seller}-${defaultNameCollection}`
      )
    )
  })

  const imageUrlOfHighlight = appInfo?.imageUrlOfHighlight
    ? [appInfo?.imageUrlOfHighlight]
    : ''

  const CSS_HANDLES = [
    'productHighlightByVtexSegmentContainer',
    'imageOfHighlight',
  ]

  const handles = useCssHandles(CSS_HANDLES)

  if (productFromCollection.some((p) => p === true)) {
    const keyDiv = `${product.productId}-productHighlightByVtexSegment`

    return (
      <div
        key={keyDiv}
        id={keyDiv}
        className={`${handles.productHighlightByVtexSegmentContainer} t-body mh1 mv2`}
      >
        <img
          className={`${handles.imageOfHighlight}`}
          src={`${imageUrlOfHighlight}`}
          alt="imageUrlOfHighlight"
        />
      </div>
    )
  }

  return null
}

export default ProductHighligh

```


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

[User] Show me the implementation of product-highlight-by-vtex-segment/store/interfaces.json from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "product-highlight-by-vtex-segment": {
    "component": "ProductHighlight"
  }
}

```


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

[User] Show me the implementation of product-highlight-by-vtex-segment/public/metadata/messages/es-AR.json from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Product Highlight by Vtex Segment",
  "headline": "¡Vea highlights por cada Whitelabel Seller!",
  "overview": "La aplicación de Product Highlight en arquitectura Whitelabel dependiendo de la región seleccionada y de colecciones creadas por cada seller, te permitirá colocar un Highlight a cada producto de la colección.",
  "features": [
    "Highlights en la Página de Producto (PDP) para cada producto en una colleción",
    "Highlights en la Página de Listado de Producto (PLP) para cada producto en una colleción",
    "Arquitectura Whitelabel Seller"
  ],
  "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 product-highlight-by-vtex-segment/public/metadata/messages/pt-BR.json from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Product Highlight by Vtex Segment",
  "headline": "Veja os destaques de cada Whitelabel Seller!",
  "overview": "O aplicativo Product Highlight na arquitetura Whitelabel permite, dependendo da região e das coleções criadas para cada vendedor, mostrar um Highlight em cada produto da coleção.",
  "features": [
    "Destaques na Página do Produto (PDP) para cada produto em uma coleção",
    "Destaques na Página de Listagem de Produtos (PLP) para cada produto em uma coleção",
    "Arquitetura Whitelabel Seller"
  ],
  "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 product-highlight-by-vtex-segment/public/metadata/messages/en-US.json from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Product Highlight by Vtex Segment",
  "headline": "See highlights for each Whitelabel Seller!",
  "overview": "The Product Highlight app in Whitelabel architecture allows depending on the region and collections created for each sellers show a Highlight on each product in the collection.",
  "features": [
    "Highlights on Product Page (PDP) for each product in a collection",
    "Highlights on Product Listing Page (PLP) for each product in a collection",
    "Whitelabel Seller architecture"
  ],
  "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 product-highlight-by-vtex-segment/graphql/types/appSettings.graphql from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

```graphql
type AppSettingsResponse {
  defaultSellerId: String
  defaultNameCollection: String
  imageUrlOfHighlight: String
}

```


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

[User] Show me the implementation of product-highlight-by-vtex-segment/node/clients/index.ts from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

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

// Extend the default IOClients implementation with our own custom clients.
export class Clients extends IOClients {}

```


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

[User] Show me the implementation of product-highlight-by-vtex-segment/node/resolvers/index.ts from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { queries as appSettingsQueries } from './appSettings'

export const resolvers = {
  Query: {
    ...appSettingsQueries,
  },
}

```


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

[User] Show me the implementation of product-highlight-by-vtex-segment/node/resolvers/appSettings/index.ts from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const queries = {
  appSettings: async (_: unknown, __: unknown, ctx: Context) => {
    const appId = process.env.VTEX_APP_ID ? process.env.VTEX_APP_ID : ''
    const { defaultSellerId, defaultNameCollection, imageUrlOfHighlight } =
      await ctx.clients.apps.getAppSettings(appId)

    return { defaultSellerId, defaultNameCollection, imageUrlOfHighlight }
  },
}

```


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

[User] Show me the implementation of product-highlight-by-vtex-segment/react/typings/storefront.d.ts from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

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

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

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

```


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

[User] Show me the implementation of product-highlight-by-vtex-segment/react/typings/gql.d.ts from the product-highlight-by-vtex-segment 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 product-highlight-by-vtex-segment/react/typings/global.d.ts from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface Runtime {
  segmentToken: string
}

export interface Collection {
  id: string
  name: string
}

export interface AppInfo {
  defaultSellerId: string
  defaultNameCollection: string
  imageUrlOfHighlight: string
}

```


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

[User] Show me the implementation of product-highlight-by-vtex-segment/react/typings/css.d.ts from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable @typescript-eslint/no-explicit-any */
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 product-highlight-by-vtex-segment/react/graphql/appSettings.gql from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

```graphql
query appSettings{
  appSettings{
    defaultSellerId
    defaultNameCollection
    imageUrlOfHighlight
  }
}

```


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

[User] Show me the implementation of product-highlight-by-vtex-segment/react/hooks/useAppSettings.tsx from the product-highlight-by-vtex-segment VTEX app.

[Assistant]
Here's the implementation:

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

import GetAppSettings from '../graphql/appSettings.gql'
import type { AppInfo } from '../typings/global'

const useAppSettings = () => {
  const [appSettings, setAppSettings] = useState<AppInfo>()

  const [getContent, { data, loading, error }] = useLazyQuery(GetAppSettings, {
    notifyOnNetworkStatusChange: true,
    ssr: false,
  })

  useEffect(() => {
    getContent()
  }, [])

  useEffect(() => {
    if (!loading && !error && data) {
      setAppSettings(data.appSettings)
    }
  }, [data, loading, error])

  return { appSettings, loading, error }
}

export default useAppSettings

```


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

[User] Show me the implementation of avatax-br-admin/messages/pt.json from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "avatax-admin.navigation.label": "Avatax Br",
  "avatax-admin.info": "Informações",
  "avatax-admin.place": "Localidade",
  "avatax-admin.authentication": "Parâmetros de autenticação:",
  "avatax-admin.client.id": "Insira seu Client ID",
  "avatax-admin.client.secret": "Insira seu Client Secret",
  "avatax-admin.change": "Alterar valores",
  "avatax-admin.save": "Salvar",
  "avatax-admin.id": "ID",
  "avatax-admin.dock.name": "Estoque",
  "avatax-admin.edit": "Editar",
  "avatax-admin.delete": "Deletar",
  "avatax-admin.loading": "Carregando...",
  "avatax-admin.data": "Dados salvos",
  "avatax-admin.cancel": "Cancelar",
  "avatax-admin.edit.stock": "Editar Estoque",
  "avatax-admin.verify": "Verificar Ping: ",
  "avatax-admin.verify.true": "Verificado",
  "avatax-admin.verify.false": "Falhou",
  "avatax-admin.verify.button": "Verificar Ping",
  "avatax-admin.environment": "Ambiente: ",
  "avatax-admin.sandbox": "Sandbox",
  "avatax-admin.production": "Produção",
  "avatax-admin.use.sandbox": "Usar ambiente sandbox",
  "avatax-admin.status": "Status do conector da Avalara: ",
  "avatax-admin.activate": "Ativado",
  "avatax-admin.deactivate": "Desativado",
  "avatax-admin.add": "Adicionar",
  "avatax-admin.data.save": "Dados salvos!",
  "avatax-admin.number": "Deve conter somente números",
  "avatax-admin.cnpj": "CNPJ inválido",
  "avatax-admin.zipcode": "CEP deve conter 8 caracteres",
  "avatax-admin.cnpj.length": "CNPJ deve conter 14 caracteres",
  "avatax-admin.empty": "Preencha o campo obrigatório",
  "avatax-admin.avatax": "Avatax",
  "avatax-admin.avalara": "Configuração Avalara",
  "avatax-admin.configuration": "Configuração",
  "avatax-admin.add.stock": "Adicionar estoque",
  "avatax-admin.fields": "campos obrigatórios*",
  "avatax-admin.current.stock": "Estoques atuais",
  "avatax-admin.dock.id.placeholder": "Inserir ID da doca",
  "avatax-admin.dock.id.label": "Doca ID",
  "avatax-admin.dock.name.placeholder": "Inserir nome da doca",
  "avatax-admin.dock.name.label": "Nome da doca",
  "avatax-admin.icms.label": "Contribuinte de ICMS",
  "avatax-admin.icms.option.true": "Sim",
  "avatax-admin.icms.option.false": "Não",
  "avatax-admin.activity.label": "Setor de atividade",
  "avatax-admin.activity.security": "Agência Pública de Segurança Brasileira",
  "avatax-admin.activity.wholesale": "Atacado",
  "avatax-admin.activity.warehouse.general": "Armazem Geral",
  "avatax-admin.activity.audiovisual": "Audiovisual",
  "avatax-admin.activity.distribution": "Centro de Distribuição",
  "avatax-admin.activity.construction": "Construção Civil",
  "avatax-admin.activity.consumer": "Consumidor Final",
  "avatax-admin.activity.coops": "Cooperativa",
  "avatax-admin.activity.farm.coop": "Cooperativa de Produtores",
  "avatax-admin.activity.warehouse.bonded": "Depósito Alfandegado",
  "avatax-admin.activity.warehouse.stock": "Depósito Fechado",
  "avatax-admin.activity.distributor": "Distribuidor",
  "avatax-admin.activity.distributor.water": "Distribuidor de Água",
  "avatax-admin.activity.distributor.fuel": "Distribuidor de Combustível",
  "avatax-admin.activity.distributor.eletricity": "Distribuidor de Energia Elétrica",
  "avatax-admin.activity.distributor.pharma": "Distribuidor de Medicamento",
  "avatax-admin.activity.entity": "Entidades sem Fins Lucrativos",
  "avatax-admin.activity.extractor": "Extrator",
  "avatax-admin.activity.armed": "Forças Armadas",
  "avatax-admin.activity.meal": "Fornecedor de Refeição",
  "avatax-admin.activity.generation": "Gerador e Produtor De Energia Elétrica",
  "avatax-admin.activity.importer": "Importadora",
  "avatax-admin.activity.industry": "Industria",
  "avatax-admin.activity.film": "Indústria Cinematográfica",
  "avatax-admin.activity.itaipu": "Itaipu Binacional",
  "avatax-admin.activity.auctioneer": "Leiloeiro",
  "avatax-admin.activity.agency": "Orgão Publico",
  "avatax-admin.activity.rural": "Produtor Rural",
  "avatax-admin.activity.broadcasting": "Radiodifusão",
  "avatax-admin.activity.service": "Serviço",
  "avatax-admin.activity.telco": "Serviço de Comunicação",
  "avatax-admin.activity.maritime": "Serviço Marítimo",
  "avatax-admin.activity.religious": "Templos de Qualquer Culto",
  "avatax-admin.activity.transporter": "Transportador/Serviço de Transportadora",
  "avatax-admin.activity.retail": "Varejo",
  "avatax-admin.tax.regime.label": "Regime de Tributação",
  "avatax-admin.tax.regime.individual": "Indivíduo",
  "avatax-admin.tax.regime.profit.estimated": "Lucro Presumido",
  "avatax-admin.tax.regime.profit.real": "Lucro Real",
  "avatax-admin.tax.regime.simplified": "Optante do SIMPLES",
  "avatax-admin.tax.regime.simplified.grossthreshold": "Optante do SIMPLES com limite de faturamento bruto",
  "avatax-admin.tax.regime.simplified.entrepreneur": "Micro Empreendedor Individual",
  "avatax-admin.tax.regime.not.applicable": "Não Aplicável",
  "avatax-admin.entity.type.label": "Tipo de entidade",
  "avatax-admin.entity.type.mixed.capital": "Capital misto",
  "avatax-admin.entity.type.government": "Estado Governamental",
  "avatax-admin.entity.type.foreign": "Estrangeiro",
  "avatax-admin.entity.type.federal": "Governo Federal",
  "avatax-admin.entity.type.individual": "Individual",
  "avatax-admin.entity.type.city": "Prefeitura",
  "avatax-admin.entity.type.business": "Negócio",
  "avatax-admin.state.tax.id.placeholder": "Inserir Identificação fiscal estadual",
  "avatax-admin.state.tax.id.label": "Inscrição Estadual",
  "avatax-admin.street.placeholder": "Inserir rua",
  "avatax-admin.street.label": "Rua",
  "avatax-admin.neighborhood.placeholder": "Inserir bairro",
  "avatax-admin.neighborhood.label": "Bairro",
  "avatax-admin.zipCode.placeholder": "Inserir CEP",
  "avatax-admin.zipCode.label": "CEP",
  "avatax-admin.city.placeholder": "Inserir cidade",
  "avatax-admin.city.label": "Cidade",
  "avatax-admin.state.placeholder": "Inserir estado",
  "avatax-admin.state.label": "Estado",
  "avatax-admin.street.number.placeholder": "Inserir número",
  "avatax-admin.street.number.label": "Número",
  "avatax-admin.complement.placeholder": "Inserir complemento",
  "avatax-admin.complement.label": "Complemento",
  "avatax-admin.phone.placeholder": "Inserir telefone",
  "avatax-admin.phone.label": "Telefone",
  "avatax-admin.cnpj.placeholder": "Inserir CNPJ",
  "avatax-admin.cnpj.label": "CNPJ",
  "avatax-admin.suframa.placeholder": "Inserir código suframa (Se existir)",
  "avatax-admin.suframa.label": "Suframa",
  "avatax-admin.logs-caption": "Aqui você encontra todos os resultados dos cálculos de impostos efetuados",
  "avatax-admin.logs-details-caption": "Resultado do Cálculo:",
  "avatax-admin.logs-refresh-button": "Atualizar",
  "avatax-admin.logs-no-result": "Nenhum resultado encontrado.",
  "avatax-admin.logs-order-input-placeholder": "Número do Pedido...",
  "avatax-admin.logs-table-fields-caption": "Alterar colunas visíveis",
  "avatax-admin.logs-table-show-all": "Exibir tudo",
  "avatax-admin.logs-table-hide-all": "Ocultar tudo",
  "avatax-admin.logs-download-button": "Exportar Logs",
  "avatax-admin.logs-details-button": "Mais Detalhes",
  "avatax-admin.logs-download-request-button": "Baixar Request",
  "avatax-admin.logs-table-show-rows": "Mostrar linhas",
  "avatax-admin.logs-table-rows-of": "de",
  "avatax-admin.logs-schema-details": "Detalhes",
  "avatax-admin.logs-schema-createdIn": "Data/Hora ↓",
  "avatax-admin.logs-schema-client": "Cliente",
  "avatax-admin.logs-schema-dockName": "Doca",
  "avatax-admin.logs-schema-city": "Cidade",
  "avatax-admin.logs-schema-state": "Estado",
  "avatax-admin.logs-schema-activitySector": "Setor de Atividade",
  "avatax-admin.logs-schema-numberOfProducts": "Produtos",
  "avatax-admin.logs-schema-productsTotal": "Valor Prod.",
  "avatax-admin.logs-schema-freightTotal": "Valor Frete",
  "avatax-admin.logs-schema-includedTaxes": "Impostos Inclusos",
  "avatax-admin.logs-schema-includedTaxesTotal": "Total Inclusos",
  "avatax-admin.logs-schema-addedTaxes": "Impostos Destacados",
  "avatax-admin.logs-schema-addedTaxesTotal": "Total Destacados"
}

```


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

[User] Show me the implementation of avatax-br-admin/messages/en.json from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "avatax-admin.navigation.label": "Avatax Br",
  "avatax-admin.info": "Informações",
  "avatax-admin.place": "Localidade",
  "avatax-admin.authentication": "Parâmetros de autenticação:",
  "avatax-admin.client.id": "Insira seu Client ID",
  "avatax-admin.client.secret": "Insira seu Client Secret",
  "avatax-admin.change": "Alterar valores",
  "avatax-admin.save": "Salvar",
  "avatax-admin.id": "ID",
  "avatax-admin.dock.name": "Estoque",
  "avatax-admin.edit": "Editar",
  "avatax-admin.delete": "Deletar",
  "avatax-admin.loading": "Carregando...",
  "avatax-admin.data": "Dados salvos",
  "avatax-admin.cancel": "Cancelar",
  "avatax-admin.edit.stock": "Editar Estoque",
  "avatax-admin.verify": "Verificar Ping: ",
  "avatax-admin.verify.true": "Verificado",
  "avatax-admin.verify.false": "Falhou",
  "avatax-admin.verify.button": "Verificar Ping",
  "avatax-admin.environment": "Ambiente: ",
  "avatax-admin.sandbox": "Sandbox",
  "avatax-admin.production": "Produção",
  "avatax-admin.use.sandbox": "Usar ambiente sandbox",
  "avatax-admin.status": "Status do conector da Avalara: ",
  "avatax-admin.activate": "Ativado",
  "avatax-admin.deactivate": "Desativado",
  "avatax-admin.add": "Adicionar",
  "avatax-admin.data.save": "Dados salvos!",
  "avatax-admin.number": "Deve conter somente números",
  "avatax-admin.cnpj": "CNPJ inválido",
  "avatax-admin.zipcode": "CEP deve conter 8 caracteres",
  "avatax-admin.cnpj.length": "CNPJ deve conter 14 caracteres",
  "avatax-admin.empty": "Preencha o campo obrigatório",
  "avatax-admin.avatax": "Avatax",
  "avatax-admin.avalara": "Configuração Avalara",
  "avatax-admin.configuration": "Configuração",
  "avatax-admin.add.stock": "Adicionar estoque",
  "avatax-admin.fields": "campos obrigatórios*",
  "avatax-admin.current.stock": "Estoques atuais",
  "avatax-admin.dock.id.placeholder": "Inserir ID da doca",
  "avatax-admin.dock.id.label": "Doca ID",
  "avatax-admin.dock.name.placeholder": "Inserir nome da doca",
  "avatax-admin.dock.name.label": "Nome da doca",
  "avatax-admin.icms.label": "Contribuinte de ICMS",
  "avatax-admin.icms.option.true": "Sim",
  "avatax-admin.icms.option.false": "Não",
  "avatax-admin.activity.label": "Setor de atividade",
  "avatax-admin.activity.security": "Agência Pública de Segurança Brasileira",
  "avatax-admin.activity.wholesale": "Atacado",
  "avatax-admin.activity.warehouse.general": "Armazem Geral",
  "avatax-admin.activity.audiovisual": "Audiovisual",
  "avatax-admin.activity.distribution": "Centro de Distribuição",
  "avatax-admin.activity.construction": "Construção Civil",
  "avatax-admin.activity.consumer": "Consumidor Final",
  "avatax-admin.activity.coops": "Cooperativa",
  "avatax-admin.activity.farm.coop": "Cooperativa de Produtores",
  "avatax-admin.activity.warehouse.bonded": "Depósito Alfandegado",
  "avatax-admin.activity.warehouse.stock": "Depósito Fechado",
  "avatax-admin.activity.distributor": "Distribuidor",
  "avatax-admin.activity.distributor.water": "Distribuidor de Água",
  "avatax-admin.activity.distributor.fuel": "Distribuidor de Combustível",
  "avatax-admin.activity.distributor.eletricity": "Distribuidor de Energia Elétrica",
  "avatax-admin.activity.distributor.pharma": "Distribuidor de Medicamento",
  "avatax-admin.activity.entity": "Entidades sem Fins Lucrativos",
  "avatax-admin.activity.extractor": "Extrator",
  "avatax-admin.activity.armed": "Forças Armadas",
  "avatax-admin.activity.meal": "Fornecedor de Refeição",
  "avatax-admin.activity.generation": "Gerador e Produtor De Energia Elétrica",
  "avatax-admin.activity.importer": "Importadora",
  "avatax-admin.activity.industry": "Industria",
  "avatax-admin.activity.film": "Indústria Cinematográfica",
  "avatax-admin.activity.itaipu": "Itaipu Binacional",
  "avatax-admin.activity.auctioneer": "Leiloeiro",
  "avatax-admin.activity.agency": "Orgão Publico",
  "avatax-admin.activity.rural": "Produtor Rural",
  "avatax-admin.activity.broadcasting": "Radiodifusão",
  "avatax-admin.activity.service": "Serviço",
  "avatax-admin.activity.telco": "Serviço de Comunicação",
  "avatax-admin.activity.maritime": "Serviço Marítimo",
  "avatax-admin.activity.religious": "Templos de Qualquer Culto",
  "avatax-admin.activity.transporter": "Transportador/Serviço de Transportadora",
  "avatax-admin.activity.retail": "Varejo",
  "avatax-admin.tax.regime.label": "Regime Tributário Federal",
  "avatax-admin.tax.regime.individual": "Indivíduo",
  "avatax-admin.tax.regime.profit.estimated": "Lucro Presumido",
  "avatax-admin.tax.regime.profit.real": "Lucro Real",
  "avatax-admin.tax.regime.simplified": "Optante do SIMPLES",
  "avatax-admin.tax.regime.simplified.grossthreshold": "Optante do SIMPLES com limite de faturamento bruto",
  "avatax-admin.tax.regime.simplified.entrepreneur": "Micro Empreendedor Individual",
  "avatax-admin.tax.regime.not.applicable": "Não Aplicável",
  "avatax-admin.entity.type.label": "Tipo de entidade",
  "avatax-admin.entity.type.mixed.capital": "Capital misto",
  "avatax-admin.entity.type.government": "Estado Governamental",
  "avatax-admin.entity.type.foreign": "Estrangeiro",
  "avatax-admin.entity.type.federal": "Governo Federal",
  "avatax-admin.entity.type.individual": "Individual",
  "avatax-admin.entity.type.city": "Prefeitura",
  "avatax-admin.entity.type.business": "Negócio",
  "avatax-admin.state.tax.id.placeholder": "Inserir Identificação fiscal estadual",
  "avatax-admin.state.tax.id.label": "Inscrição Estadual",
  "avatax-admin.street.placeholder": "Inserir rua",
  "avatax-admin.street.label": "Rua",
  "avatax-admin.neighborhood.placeholder": "Inserir bairro",
  "avatax-admin.neighborhood.label": "Bairro",
  "avatax-admin.zipCode.placeholder": "Inserir CEP",
  "avatax-admin.zipCode.label": "CEP",
  "avatax-admin.city.placeholder": "Inserir cidade",
  "avatax-admin.city.label": "Cidade",
  "avatax-admin.state.placeholder": "Inserir estado",
  "avatax-admin.state.label": "Estado",
  "avatax-admin.street.number.placeholder": "Inserir número",
  "avatax-admin.street.number.label": "Número",
  "avatax-admin.complement.placeholder": "Inserir complemento",
  "avatax-admin.complement.label": "Complemento",
  "avatax-admin.phone.placeholder": "Inserir telefone",
  "avatax-admin.phone.label": "Telefone",
  "avatax-admin.cnpj.placeholder": "Inserir CNPJ",
  "avatax-admin.cnpj.label": "CNPJ",
  "avatax-admin.suframa.placeholder": "Inserir código suframa (Se existir)",
  "avatax-admin.suframa.label": "Suframa",
  "avatax-admin.logs-caption": "Aqui você encontra todos os resultados dos cálculos de impostos efetuados",
  "avatax-admin.logs-details-caption": "Resultado do Cálculo:",
  "avatax-admin.logs-refresh-button": "Atualizar",
  "avatax-admin.logs-no-result": "Nenhum resultado encontrado.",
  "avatax-admin.logs-order-input-placeholder": "Número do Pedido...",
  "avatax-admin.logs-table-fields-caption": "Alterar colunas visíveis",
  "avatax-admin.logs-table-show-all": "Exibir tudo",
  "avatax-admin.logs-table-hide-all": "Ocultar tudo",
  "avatax-admin.logs-download-button": "Exportar Logs",
  "avatax-admin.logs-details-button": "Mais Detalhes",
  "avatax-admin.logs-download-request-button": "Baixar Request",
  "avatax-admin.logs-table-show-rows": "Mostrar linhas",
  "avatax-admin.logs-table-rows-of": "de",
  "avatax-admin.logs-schema-details": "Detalhes",
  "avatax-admin.logs-schema-createdIn": "Data/Hora ↓",
  "avatax-admin.logs-schema-client": "Cliente",
  "avatax-admin.logs-schema-dockName": "Doca",
  "avatax-admin.logs-schema-city": "Cidade",
  "avatax-admin.logs-schema-state": "Estado",
  "avatax-admin.logs-schema-activitySector": "Setor de Atividade",
  "avatax-admin.logs-schema-numberOfProducts": "Produtos",
  "avatax-admin.logs-schema-productsTotal": "Valor Prod.",
  "avatax-admin.logs-schema-freightTotal": "Valor Frete",
  "avatax-admin.logs-schema-includedTaxes": "Impostos Inclusos",
  "avatax-admin.logs-schema-includedTaxesTotal": "Total Inclusos",
  "avatax-admin.logs-schema-addedTaxes": "Impostos Destacados",
  "avatax-admin.logs-schema-addedTaxesTotal": "Total Destacados"
}

```


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

[User] Show me the implementation of avatax-br-admin/messages/es.json from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "avatax-admin.navigation.label": "Avatax Br",
  "avatax-admin.info": "Informações",
  "avatax-admin.place": "Localidade",
  "avatax-admin.authentication": "Parâmetros de autenticação:",
  "avatax-admin.client.id": "Insira seu Client ID",
  "avatax-admin.client.secret": "Insira seu Client Secret",
  "avatax-admin.change": "Alterar valores",
  "avatax-admin.save": "Salvar",
  "avatax-admin.id": "ID",
  "avatax-admin.dock.name": "Estoque",
  "avatax-admin.edit": "Editar",
  "avatax-admin.delete": "Deletar",
  "avatax-admin.loading": "Carregando...",
  "avatax-admin.data": "Dados salvos",
  "avatax-admin.cancel": "Cancelar",
  "avatax-admin.edit.stock": "Editar Estoque",
  "avatax-admin.verify": "Verificar Ping: ",
  "avatax-admin.verify.true": "Verificado",
  "avatax-admin.verify.false": "Falhou",
  "avatax-admin.verify.button": "Verificar Ping",
  "avatax-admin.environment": "Ambiente: ",
  "avatax-admin.sandbox": "Sandbox",
  "avatax-admin.production": "Produção",
  "avatax-admin.use.sandbox": "Usar ambiente sandbox",
  "avatax-admin.status": "Status do conector da Avalara: ",
  "avatax-admin.activate": "Ativado",
  "avatax-admin.deactivate": "Desativado",
  "avatax-admin.add": "Adicionar",
  "avatax-admin.data.save": "Dados salvos!",
  "avatax-admin.number": "Deve conter somente números",
  "avatax-admin.cnpj": "CNPJ inválido",
  "avatax-admin.zipcode": "CEP deve conter 8 caracteres",
  "avatax-admin.cnpj.length": "CNPJ deve conter 14 caracteres",
  "avatax-admin.empty": "Preencha o campo obrigatório",
  "avatax-admin.avatax": "Avatax",
  "avatax-admin.avalara": "Configuração Avalara",
  "avatax-admin.configuration": "Configuração",
  "avatax-admin.add.stock": "Adicionar estoque",
  "avatax-admin.fields": "campos obrigatórios*",
  "avatax-admin.current.stock": "Estoques atuais",
  "avatax-admin.dock.id.placeholder": "Inserir ID da doca",
  "avatax-admin.dock.id.label": "Doca ID",
  "avatax-admin.dock.name.placeholder": "Inserir nome da doca",
  "avatax-admin.dock.name.label": "Nome da doca",
  "avatax-admin.icms.label": "Contribuinte de ICMS",
  "avatax-admin.icms.option.true": "Sim",
  "avatax-admin.icms.option.false": "Não",
  "avatax-admin.activity.label": "Setor de atividade",
  "avatax-admin.activity.security": "Agência Pública de Segurança Brasileira",
  "avatax-admin.activity.wholesale": "Atacado",
  "avatax-admin.activity.warehouse.general": "Armazem Geral",
  "avatax-admin.activity.audiovisual": "Audiovisual",
  "avatax-admin.activity.distribution": "Centro de Distribuição",
  "avatax-admin.activity.construction": "Construção Civil",
  "avatax-admin.activity.consumer": "Consumidor Final",
  "avatax-admin.activity.coops": "Cooperativa",
  "avatax-admin.activity.farm.coop": "Cooperativa de Produtores",
  "avatax-admin.activity.warehouse.bonded": "Depósito Alfandegado",
  "avatax-admin.activity.warehouse.stock": "Depósito Fechado",
  "avatax-admin.activity.distributor": "Distribuidor",
  "avatax-admin.activity.distributor.water": "Distribuidor de Água",
  "avatax-admin.activity.distributor.fuel": "Distribuidor de Combustível",
  "avatax-admin.activity.distributor.eletricity": "Distribuidor de Energia Elétrica",
  "avatax-admin.activity.distributor.pharma": "Distribuidor de Medicamento",
  "avatax-admin.activity.entity": "Entidades sem Fins Lucrativos",
  "avatax-admin.activity.extractor": "Extrator",
  "avatax-admin.activity.armed": "Forças Armadas",
  "avatax-admin.activity.meal": "Fornecedor de Refeição",
  "avatax-admin.activity.generation": "Gerador e Produtor De Energia Elétrica",
  "avatax-admin.activity.importer": "Importadora",
  "avatax-admin.activity.industry": "Industria",
  "avatax-admin.activity.film": "Indústria Cinematográfica",
  "avatax-admin.activity.itaipu": "Itaipu Binacional",
  "avatax-admin.activity.auctioneer": "Leiloeiro",
  "avatax-admin.activity.agency": "Orgão Publico",
  "avatax-admin.activity.rural": "Produtor Rural",
  "avatax-admin.activity.broadcasting": "Radiodifusão",
  "avatax-admin.activity.service": "Serviço",
  "avatax-admin.activity.telco": "Serviço de Comunicação",
  "avatax-admin.activity.maritime": "Serviço Marítimo",
  "avatax-admin.activity.religious": "Templos de Qualquer Culto",
  "avatax-admin.activity.transporter": "Transportador/Serviço de Transportadora",
  "avatax-admin.activity.retail": "Varejo",
  "avatax-admin.tax.regime.label": "Regime Tributário Federal",
  "avatax-admin.tax.regime.individual": "Indivíduo",
  "avatax-admin.tax.regime.profit.estimated": "Lucro Presumido",
  "avatax-admin.tax.regime.profit.real": "Lucro Real",
  "avatax-admin.tax.regime.simplified": "Optante do SIMPLES",
  "avatax-admin.tax.regime.simplified.grossthreshold": "Optante do SIMPLES com limite de faturamento bruto",
  "avatax-admin.tax.regime.simplified.entrepreneur": "Micro Empreendedor Individual",
  "avatax-admin.tax.regime.not.applicable": "Não Aplicável",
  "avatax-admin.entity.type.label": "Tipo de entidade",
  "avatax-admin.entity.type.mixed.capital": "Capital misto",
  "avatax-admin.entity.type.government": "Estado Governamental",
  "avatax-admin.entity.type.foreign": "Estrangeiro",
  "avatax-admin.entity.type.federal": "Governo Federal",
  "avatax-admin.entity.type.individual": "Individual",
  "avatax-admin.entity.type.city": "Prefeitura",
  "avatax-admin.entity.type.business": "Negócio",
  "avatax-admin.state.tax.id.placeholder": "Inserir Identificação fiscal estadual",
  "avatax-admin.state.tax.id.label": "Inscrição Estadual",
  "avatax-admin.street.placeholder": "Inserir rua",
  "avatax-admin.street.label": "Rua",
  "avatax-admin.neighborhood.placeholder": "Inserir bairro",
  "avatax-admin.neighborhood.label": "Bairro",
  "avatax-admin.zipCode.placeholder": "Inserir CEP",
  "avatax-admin.zipCode.label": "CEP",
  "avatax-admin.city.placeholder": "Inserir cidade",
  "avatax-admin.city.label": "Cidade",
  "avatax-admin.state.placeholder": "Inserir estado",
  "avatax-admin.state.label": "Estado",
  "avatax-admin.street.number.placeholder": "Inserir número",
  "avatax-admin.street.number.label": "Número",
  "avatax-admin.complement.placeholder": "Inserir complemento",
  "avatax-admin.complement.label": "Complemento",
  "avatax-admin.phone.placeholder": "Inserir telefone",
  "avatax-admin.phone.label": "Telefone",
  "avatax-admin.cnpj.placeholder": "Inserir CNPJ",
  "avatax-admin.cnpj.label": "CNPJ",
  "avatax-admin.suframa.placeholder": "Inserir código suframa (Se existir)",
  "avatax-admin.suframa.label": "Suframa",
  "avatax-admin.logs-caption": "Aqui você encontra todos os resultados dos cálculos de impostos efetuados",
  "avatax-admin.logs-details-caption": "Resultado do Cálculo:",
  "avatax-admin.logs-refresh-button": "Atualizar",
  "avatax-admin.logs-no-result": "Nenhum resultado encontrado.",
  "avatax-admin.logs-order-input-placeholder": "Número do Pedido...",
  "avatax-admin.logs-table-fields-caption": "Alterar colunas visíveis",
  "avatax-admin.logs-table-show-all": "Exibir tudo",
  "avatax-admin.logs-table-hide-all": "Ocultar tudo",
  "avatax-admin.logs-download-button": "Exportar Logs",
  "avatax-admin.logs-details-button": "Mais Detalhes",
  "avatax-admin.logs-download-request-button": "Baixar Request",
  "avatax-admin.logs-table-show-rows": "Mostrar linhas",
  "avatax-admin.logs-table-rows-of": "de",
  "avatax-admin.logs-schema-details": "Detalhes",
  "avatax-admin.logs-schema-createdIn": "Data/Hora ↓",
  "avatax-admin.logs-schema-client": "Cliente",
  "avatax-admin.logs-schema-dockName": "Doca",
  "avatax-admin.logs-schema-city": "Cidade",
  "avatax-admin.logs-schema-state": "Estado",
  "avatax-admin.logs-schema-activitySector": "Setor de Atividade",
  "avatax-admin.logs-schema-numberOfProducts": "Produtos",
  "avatax-admin.logs-schema-productsTotal": "Valor Prod.",
  "avatax-admin.logs-schema-freightTotal": "Valor Frete",
  "avatax-admin.logs-schema-includedTaxes": "Impostos Inclusos",
  "avatax-admin.logs-schema-includedTaxesTotal": "Total Inclusos",
  "avatax-admin.logs-schema-addedTaxes": "Impostos Destacados",
  "avatax-admin.logs-schema-addedTaxesTotal": "Total Destacados"
}

```


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

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

[Assistant]
Here's the implementation:

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

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "admin.app.example": {
    "component": "AvataxAdmin",
    "path": "/admin/app/avatax-br"
  }
}

```


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

[User] Show me the implementation of avatax-br-admin/docs/README.md from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```markdown
## Avatax-BR

This app enables tax calculations using AvaTax-Brazil V3 api services from Avalara.

> This app requires external subscription to Avalara.

The Avatax-BR conector is an app which connects to VTEX Tax Hub allowing Avalara to calculate taxes in various B2B (or B2C) scenarios.

This app is only compatible with Brazil stores.

#### Installation

You can install this app through VTEX App Store or by command-line using `VTEX Toolbelt`:

```
vtex install vtex.avatax-br@2.x
```

After installation, this app requires additional configurations in your store account, which will be described as following. **Don't worry**: The app will only be activated through a on/off switch in the Avatax Br admin page.

#### Initial Setup

The following steps must be followed:
- MasterData configuration (AS, AE, AL and CL entities)
- Establishment configuration through the admin app
- SKU Integration (must be custom-built)
- Client registration form (must be custom-built)

#### MasterData Configuration

First, go to MasterData on the Admin sidebar, and click on the "Advanced Settings" button. In the configurations panel, click on "Data structures". There you'll be able to edit and create MasterData structures. For this app, you need to create three new entities: AS (skus), AE (establishments) and AL (logs), and edit an existent one CL (clients).

![](https://user-images.githubusercontent.com/1629129/125787544-95a06cfc-e6f3-4697-8c07-8bf589bdf891.png)

##### 1 - Avatax SKUs
Contains relevant product data required by Avalara.
**Acronym**: AS
**Name**: Avatax SKUs

| Name    | Display Name | Data Type    | Nullable | Searchable | Filterable |
|---------|----------|---------|---------|----------|-----------|
| skuId   | SKU ID   | Integer | Yes     | Yes      | Yes       |
| skuInfo | SKU Info | Text    | Yes     |          |           |
|         |          |         |         |          |           |

**skuId**: The id of the SKU in VTEX.
**skuInfo**: A string in JSON format which should contain all needed properties to perform tax calculation. These properties will be described in a later topic (SKU integration)

![](https://user-images.githubusercontent.com/1629129/125787730-39825489-97ae-414b-80f7-c7303c5d7119.png)

##### 2 - Avatax Establishments
To Avalara, the establishments represent the source (dock) of the products being sold. There should be as many establishments as there are docks.

**Acronym**: AE
**Name**: Avatax Establishments

| Name           	| Display Name             	| Data Type        	| Nullable 	| Searchable 	| Filterable 	|
|----------------	|----------------------	|-------------	|---------	|----------	|-----------	|
| activitySector 	| Activity Sector   	| Text        	| Yes     	|          	|           	|
| city           	| City               	| Varchar 750 	| Yes     	|          	|           	|
| cnpj           	| CNPJ                 	| CPF / CNPJ  	| Yes     	|          	|           	|
| complement     	| Complement          	| Text        	| Yes     	|          	|           	|
| dockId         	| Dock Id           	| Varchar 100 	| Yes     	| Yes      	| Yes       	|
| dockName       	| Dock Name         	| Text        	| Yes     	|          	|           	|
| entityType     	| Entity Type     	| Text        	| Yes     	|          	|           	|
| icmsTaxPayer   	| Is ICMS Tax Payer  	| Boolean     	| Yes     	|          	|           	|
| pCredSN        	| ICMS Tax Rate     	| Integer     	| Yes     	|          	|           	|
| phone          	| Phone Number             	| Phone   	| Yes     	|          	|           	|
| neighborhood   	| Neighborhood               	| Varchar 750 	| Yes     	|          	|           	|
| state          	| State               	| Varchar 100 	| Yes     	|          	|           	|
| stateTaxId     	| State Tax Id   	| Text        	| Yes     	|          	|           	|
| street         	| Street           	| Varchar 750 	| Yes     	|          	|           	|
| streetNumber   	| Street Number               	| Integer     	| Yes     	|          	|           	|
| suframa        	| Suframa              	| Text        	| Yes     	|          	|           	|
| taxRegime      	| Tax Regime 	| Text        	| Yes     	|          	|           	|
| zipCode        	| Postal Code        	| CEP         	| Yes     	|          	|           	|

**activitySector**: The company's activity sector.
**city**: City where the establishment is located.
**cnpj**: Corporate document of the establishment.
**complement**: Complement of the establishment's address.
**dockId**: Id of the VTEX dock.
**dockName**: Name of the VTEX dock.
**entityType**: Entity Type (Company, Individual, Government, etc)
**icmsTaxPayer**: Defines if the entity is an ICMS taxpayer.
**pCredSN**: Rate for calculating the use of ICMS credit.
**neighborhood**: Neighborhood of the establishment's address.
**state**: State of the establishment's address.
**stateTaxId**: State registration of the company, if it is an ICMS tax payer.
**street**: Street address of the establishment.
**streetNumber**: Address number of the establishment.
**suframa**: Suframa number ("Superintendencia da Zona Franca de Manaus").
**taxRegime**: Company's tax regime (simplified, real profit, estimated profit, and so on).
**zipCode**: Postal code of the establishment's address.

##### 3 - Avatax Logs
Every tax calculation is saved in this entity for later queries.
**Acronym**: AL
**Name**: Avatax Logs

| Name              	| Display Name                     	| Data Type        	| Nullable 	| Searchable 	| Filterable 	|
|-------------------	|------------------------------	|-------------	|---------	|----------	|-----------	|
| avalaraReturn     	| Avalara Response             	| Text        	| Sim     	|          	|           	|
| client            	| Client                      	| Text        	| Sim     	|          	|           	|
| email             	| Client Email     	| Varchar 100 	| Sim     	|          	|           	|
| establishment     	| Establishment              	| Text        	| Sim     	|          	|           	|
| freightSimulation 	| Freight Simulation           	| Currency    	| Sim     	|          	|           	|
| orderId           	| Checkout/Order ID        	| Varchar 100 	| Sim     	| Sim      	| Sim       	|
| payLoad           	| Avalara Request                   	| Text        	| Sim     	|          	|           	|
| type              	| Log Type 	| Text        	| Sim     	|          	|           	|

**avalaraReturn**: The response from Avalara's APIs.
**client**: Object containing client data.
**email**: The email of the client.
**establishment**: Object containing establishment data.
**freightSimulation**: Freight simulation value total.
**orderId**: Unique session id for the checkout step, or orderId in case the purchase has been completed.
**payLoad**: The request sent to Avalara's APIs.
**type**: PDP/Checkout. Specifies where exactly the calculation process was called. PDP means the "productTax" endpoint, checkout means it was called on the checkout steps.

##### Client Entity Changes
The following fields must be added to the client (CL) entity:

| Name           	| Display Name             	| Data Type        	| Nullable 	| Searchable 	| Filterable 	|
|----------------	|----------------------	|-------------	|---------	|----------	|-----------	|
| activitySector 	| Activity Sector   	| Text        	| Sim     	|          	|           	|
| entityType     	| Entity Type     	| Text        	| Sim     	|          	|           	|
| icmsTaxPayer   	| Is ICMS Tax Payer 	| Boolean     	| Sim     	|          	|           	|
| pCredSN        	| ICMS Tax Rate     	| Integer     	| Sim     	|          	|           	|
| stateTaxId     	| State Tax Id   	| Varchar 750 	| Sim     	|          	|           	|
| taxRegime      	| Tax Regime 	| Text        	| Sim     	|          	|           	|
| useType        	| Use Type          	| Varchar 100 	| Sim     	|          	|           	|
| usagePurpose   	| Usage Purpose     	| Varchar 100 	| Sim     	|          	|           	|

**activitySector**: The entity's activity sector. Allowed values:
> **armedForces**
> **auctioneer**
> **audiovisualIndustry**
> **bondedWarehouse**
> **broadcastingIndustry**
> **construction**
> **coops**
> **distributor**
> **distributionCenter**
> **electricityDistributor**
> **energyGeneration**
> **extractor**
> **farmCoop**
> **filmIndustry**
> **finalConsumer**
> **fuelDistributor**
> **generalWarehouse**
> **importer**
> **industry**
> **itaipubiNacional**
> **maritimeService**
> **mealSupplier**
> **nonProfitEntity**
> **pharmaDistributor**
> **publicAgency**
> **religiousEstablishment**
> **retail**
> **ruralProducer**
> **securityPublicAgency**
> **service**
> **stockWarehouse**
> **telco**
> **transporter**
> **waterDistributor**
> **wholesale**

**entityType**: Entity type. Allowed values:
> **business**
> **individual**
> **federalGovernment**
> **stateGovernment**
> **cityGovernment**
> **foreign**
> **mixedCapital**
> **coops**

**icmsTaxPayer**: true if the entity is an ICMS tax payer.
**pCredSN**: ICMS tax rate.
**stateTaxId**: State tax id. Mandatory is the entity is an ICMS tax payer.

**taxRegime**: The entity's tax regime. Allowed values:
> **realProfit**
> **estimatedProfit**
> **simplified**
> **simplifiedOverGrossthreshold**
> **simplifiedEntrepeneur**
> **individual**

**useType**: Type of "use" for which the customer's purchases are intended. Allowed values:
> **use or consumption**
> **resale**
> **agricultural production**
> **production**
> **fixed assets**

**usagePurpose**: Optional free text which describes the useType field in detail.

#### Application Configuration
After configuring MasterData, access the application through the VTEX Admin menu and click on *Others -> Avatax Br*:

On the main tab we have the application's settings area, where you can turn the connector on/off and enable the sandbox environment (that makes so the app requests reach Avalara's sandbox servers instead of production).

You also need to fill in the **clientId** and **clientSecret** parameters. Those are provided by Avalara (or generated through their platform). After filling them in, click on  "Verify Ping" to ensure the connection is operational.

![](https://user-images.githubusercontent.com/1629129/125787878-dcb9379a-8a24-40e6-bf56-0162685f3bbb.png)

#### Establishment Configuration

You can see that there are two stock related tabs: "Add stock" and "Current stocks". The configuration of stocks, which are equivalent to the establishment at Avalara (represented by the entity AE of MasterData), is one of the necessary steps for the adequate operation of the connector. To get started, go to the second tab, "Add Stock" and register all the establishments.

Keep in mind that the connector works only for docks that have an associated establishment, so make sure that the establishments are properly registered.

![](https://user-images.githubusercontent.com/1629129/125788018-0d0bb86e-5e9f-43b2-be37-ea953abc9c24.png)

#### Sku Integration

In addition to the establishments, SKUs need to be properly entered in MasterData, based on information coming from the ERP. The sku structure contains two fields, skuId which corresponds to the SKU ID in VTEX, and skuInfo, which contains the additional data we send during tax calculation. The skuInfo field is a text field which must be in a JSON format, respecting the following structure:

**itemCode**: Code of the item in the ERP. *Type: string*.
**itemDescriptor.taxCode**: Auxiliary code for determining the legal basis of the item, registered in Avalara's system, used mainly to promote disambiguation in some cases of conflicts between tax rules. *Type: string*.
**itemDescriptor.hsCode**: NCM (Mercosul Common Nomenclature) code of the product. *Type: string.*
**itemDescriptor.ex**: Tax exception code, linked to IPI. *Type: string*.
**itemDescriptor.cean**: Item bar code (EAN). *Type: string*.
**itemDescriptor.source**: Code which defines the origin of the item. *Type: string*. Allowed values:
> **0**: Domestic goods, except those treated in codes 3,4,5 and 8.
> **1**: Foreign goods imported directly by the seller, except those treated in code 6.
> **2**: Foreign goods acquired in the domestic market (within Brazil), except those treated in code 7.
> **3**: Domestic goods with imported content above 40% and of value less than or equal to 70%.
> **4**: Domestic goods produced following "standard basic processes", as established by legislation (standard basic processes are designed to separate simple assembly from manufacturing processes)
> **5**: Domestic goods with imported content less than or equal to 40%.
> **6**: Foreign goods imported directly by the seller without national equivalent as listed by Comex and natural gas.
> **7**: Foreign goods purchased in the domestic market (within Brazil) without national equivalent as listed by Comex and natural gas.
> **8**: National goods with imported content above 70%.
itemDescriptor.

**productType**: Fiscal type of the product according to SPED table. *Type: string*. Allowed values:
> **FOR PRODUCT**: Finished product
> **FOR MERCHANDISE**: Goods for resale
> **SERVICE**: Services
> **FEEDSTOCK**: Raw materials
> **FIXED ASSETS**: Fixed Assets
> **PACKAGING**: Packaging
> **PRODUCT IN PROCESS**: Product in process
> **SUBPRODUCT**: By-product
> **INTERMEDIATE PRODUCT**: Intermediate product
> **MATERIAL FOR USAGE AND CONSUMPTION**: Material for Use and Consumption
> **OTHER INPUTS**: Other inputs
> **NO RESTRICTION**: Other

**itemDescriptor.manufacturerEquivalent**: Item is a commodity, but will be considered as a product. *Type: boolean*.

**JSON Example**:
```
{
    "itemCode": "12345",
    "itemDescriptor": {
        "taxCode": "",
        "hsCode": "85171231"
        "ex": "",
        "cest": "2105301"
        "cean": "",
        "source": "4", "source": "4",
        "productType": "FOR MERCHANDISE",
        "manufacturerEquivalent": true
    }
}
```

This json **must** be converted to text and inserted from an integration between ERP and VTEX MasterData. It is worth noting that the skuInfo is a **string** and not an object, so all its content must be enclosed in quotes ("").

Below is an example of a request (cURL) to insert a sku:
```
curl --location --request POST 'http://{{account}}.myvtex.com/api/dataentities/AS/documents' \
--header 'Content-Type: application/json' \
--data-raw '{
    "skuId": 1,
    "skuInfo": "{\"itemCode\":\"12345\",\"itemDescriptor\":{\"taxCode\":\"\",\"hsCode\":\"85171231\",\"ex\":\"\",\"cest\":\"2105301\",\"cean\":\"\",\"source\":\"4\",\"productType\":\"FOR MERCHANDISE\",\"manufacturerEquivalent\":true}}"
}'
```

Since these are private entities, it is also necessary to have authorization to add this information to MasterData, so authorization parameters must be placed in the header:

**VtexIdclientAutCookie**: To obtain this value you must open the Developer Tools on your browser, on the Applications tab, while inside the VTEX Admin. Then look for Cookie values and copy the value of the VtexIdclientAutCookie cookie value.

**AppKey/AppToken**: To get the AppKey and AppToken, log into the admin and go to the "Account Management" tab and then click on "Account". You can see all registered tokens in the security area. You can create one by clicking on "Generate appKey and appToken", then fill in the request information and click on "Generate new tokens".

#### Using Avatax BR
After finishing the setup and activating the connector your store will be able to calculate and display taxes and fees through Avalara.

In summary, the steps for configuring and using the connector are:
* MasterData Structure
* Application Settings
* Customer Master Data Customization
* Establishment registration
* SKU Integration
* Connector activation through the Settings screen

To see everything working just enter your store, login and add the product to the cart. When you enter the cart, the taxes calculated by Avalara will automatically appear and the final amount will be calculated with the addition of taxes. Each operation during the checkout process, from the cart to the checkout, such as change of address, change of quantity and inclusion / removal of products, causes a new calculation and the information is automatically updated.

![](https://user-images.githubusercontent.com/1629129/125788192-7fd8fa6e-584f-448f-839f-d5dc02d0b7da.png)

#### Viewing the Logs
You can view all tax and fee calculations performed by the connector through the Logs tab.

In this table you can view all the calculations performed and their city/state of origin and destination, and included/highlighted taxes. The "Refresh" button reloads the logs, and you can filter the view of the columns and display more or fewer rows through the table buttons.

![](https://user-images.githubusercontent.com/1629129/125788247-0b1b4826-5d47-445c-8032-f14ecebaad88.png)

If you want to view the entire contents of a calculation, simply click the icon in the "Details" column.

Besides being able to analyze Avalara's answer in full, it is also possible to download just the request object (for further simulations and/or questions with Avalara).

![](https://user-images.githubusercontent.com/1629129/125788312-325b2edd-4b78-4aae-8783-295a35dc5809.png)

The logs screen also allows you to export the log files and filter by order number, to investigate which tax calculation was performed for a specific purchase.

```


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

[User] Show me the implementation of avatax-br-admin/react/AvataxAdmin.tsx from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC, useState } from 'react'
import { Layout, PageBlock, Tabs, Tab } from 'vtex.styleguide'
import { useIntl } from 'react-intl'

import AddStock from './components/Common/AddStock'
import CurrentStock from './components/Common/CurrentStock'
import EditArea from './components/Common/editArea'
import ModalArea from './components/Common/modal'
import EstablishmentProvider from './components/Establishment/EstablishmentProvider'
import { LogForm } from './components/Logs/LogForm'
import LogProvider from './components/Logs/LogProvider'
import Settings from './components/Common/settings'
import { avatax } from './utils/definedMessages'

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

  const intl = useIntl()

  return (
    <>
      <Layout>
        <PageBlock
          title={intl.formatMessage(avatax.avatax)}
          subtitle={intl.formatMessage(avatax.avalara)}
          variation="full"
        >
          <Tabs>
            <Tab
              label={intl.formatMessage(avatax.configuration)}
              active={tab.currentTab === 1}
              onClick={() => setTab({ currentTab: 1 })}
            >
              <EstablishmentProvider>
                <Settings />
              </EstablishmentProvider>
            </Tab>
            <Tab
              label={intl.formatMessage(avatax.addStock)}
              active={tab.currentTab === 2}
              onClick={() => setTab({ currentTab: 2 })}
            >
              <p>{intl.formatMessage(avatax.fields)}</p>
              <EstablishmentProvider>
                <AddStock />
              </EstablishmentProvider>
            </Tab>

            <Tab
              label={intl.formatMessage(avatax.currentStock)}
              active={tab.currentTab === 3}
              onClick={() => setTab({ currentTab: 3 })}
            >
              <EstablishmentProvider>
                <CurrentStock />
                <ModalArea>
                  <EditArea />
                </ModalArea>
              </EstablishmentProvider>
            </Tab>
            <Tab
              label="Logs"
              active={tab.currentTab === 4}
              onClick={() => setTab({ currentTab: 4 })}
            >
              <LogProvider page={1} pageSize={5}>
                <LogForm />
              </LogProvider>
            </Tab>
          </Tabs>
        </PageBlock>
      </Layout>
    </>
  )
}

export default AvataxAdmin

```


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

[User] Show me the implementation of avatax-br-admin/react/package.json from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "CHANGE_ME",
  "version": "2.2.0",
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "apollo-client": "^2.6.8",
    "file-saver": "^2.0.5",
    "react": "^16.12.0",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.12.0",
    "react-intl": "^3.12.0",
    "react-json-view": "^1.21.3",
    "yup": "^0.32.9"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/file-saver": "^2.0.2",
    "@types/jest": "^25.1.4",
    "@types/node": "^13.9.8",
    "@types/react": "^16.9.31",
    "@vtex/test-tools": "^3.3.2",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-cache-inmemory": "^1.6.5",
    "graphql": "^14.6.0",
    "typescript": "3.9.7"
  }
}

```


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

[User] Show me the implementation of avatax-br-admin/public/metadata/messages/pt-BR.json from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Avalara Brasil",
  "headline": "Calcule os impostos e tributos sobre vendas através do conector Avalara",
  "overview": "O App Avalara Brasil é integrado com o checkout da VTEX e permite o cálculo e exibição de taxas e impostos na loja.",
  "features": [""],
  "additionalInformation": "",
  "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 avatax-br-admin/react/context/LogContext.tsx from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

interface LogContextType {
  loading: boolean
  reloading: boolean
  logs?: CalculationLog[]
  pagination?: Pagination
  searchTerm?: string
  setSearchTerm: (term: string, callback?: () => void) => void
  setPage: (page: number, pageSize: number) => void
  refetch: (searchTerm?: string) => void
}
const LogContext = React.createContext<LogContextType>({
  loading: true,
  reloading: false,
  setSearchTerm: () => {},
  setPage: () => {},
  refetch: () => {},
})

export default LogContext

```


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

[User] Show me the implementation of avatax-br-admin/react/context/EstablishmentContext.tsx from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

interface EstablishmentContextType {
  establishment: Establishment
  setEstablishment: (establishment: Establishment) => void
  edit: boolean
  setEdit: (edit: boolean) => void
  loading: boolean
  establishmentList?: Establishment[]
  update: (establishment: Establishment) => void
  deleteEstablishments: (documentId: string | boolean) => void
  saveConfigurations: () => Promise<boolean>
  showAlert: boolean
  setShowAlert: (showAlert: boolean) => void
  handleCloseAlert: () => void
  docks: Docks[] | undefined
  validationValues: EstablishmentValidation
  zip: boolean
  validationFuntion: (object: Establishment) => Promise<string>
  showAlertUpdate: boolean
  setShowAlertUpdate: (showAlert: boolean) => void
  settings: Settings
  changeSettings: () => void
  updateSettings: (object: Settings) => void
  change: boolean
  ping: number
  verifyPing: () => void
  updateSettingsSandbox: (object: Settings) => void
}
const EstablishmentContext = React.createContext<EstablishmentContextType>({
  establishment: {},
  setEstablishment: () => {},
  edit: false,
  setEdit: () => {},
  loading: true,
  establishmentList: [],
  update: () => {},
  deleteEstablishments: () => {},
  saveConfigurations: async () => false,
  showAlert: false,
  setShowAlert: () => {},
  handleCloseAlert: () => {},
  docks: [{ name: '', id: '' }],
  validationValues: {},
  zip: false,
  validationFuntion: async () => '',
  showAlertUpdate: false,
  setShowAlertUpdate: () => {},
  settings: {},
  changeSettings: () => {},
  updateSettings: () => {},
  change: false,
  ping: 0,
  verifyPing: () => {},
  updateSettingsSandbox: () => {},
})

export default EstablishmentContext

```


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

[User] Show me the implementation of avatax-br-admin/react/typings/settings.d.ts from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Settings {
  sandbox?: boolean | undefined
  clientId?: string | undefined
  clientSecret?: string | undefined
  [index: string]: string | boolean | undefined
}

interface GetSettings {
  getSettings: {
    useAvalaraSandboxEnv: boolean
    clientIdValue: string
    clientSecretValue: string
  }
}

```


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

[User] Show me the implementation of avatax-br-admin/react/typings/calculationLog.d.ts from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface CalculationLog {
  avalaraReturn: [
    {
      skuId: string
      lineAmount: number
      numberOfItems: number
      freightAmount: number
      lineUnitPrice: number
      useType: string
      itemDescriptor: {
        taxCode: string
        hsCode: string
        ex: string
        cest: string
        productType: string
      }
      taxDetails: [
        {
          taxImpact: {
            impactOnFinalPrice: string
          }
          taxType: string
          citation: string
          subtotalTaxable: number
          rate: number
          tax: number
        }
      ]
    }
  ]
  client: {
    activitySector: string
    icmsTaxPayer: boolean
    taxRegime: string
    stateTaxId: string
    useType: string
    cnpj: string
    suframa: string
    city: string
    state: string
  }
  establishment: {
    dockId: string
    dockName: string
    activitySector: string
    taxRegime: string
    entityType: string
    stateTaxId: string
    street: string
    neighborhood: string
    zipCode: string
    city: string
    state: string
    streetNumber: number
    complement: string
    phone: string
    cnpj: string
    suframa: string
  }
  email: string
  createdIn: string
  payload: string
  orderId: string
}

interface CalculationLogQueryResult {
  getLogs: CalculationLogData
}

interface CalculationLogData {
  pagination: Pagination
  data: CalculationLog[]
}

```


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

[User] Show me the implementation of avatax-br-admin/react/typings/gql.d.ts from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

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

  const Schema: DocumentNode

  export default Schema
}

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

  const schema: DocumentNode

  export default Schema
}

```


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

[User] Show me the implementation of avatax-br-admin/react/typings/address.d.ts from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Address {
  postalCode: string
  city: string
  state: string
  street: string
  number: string
  neighborhood: string
  complement: string
  reference: string
  geoCoordinates: string[]
}

```


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

[User] Show me the implementation of avatax-br-admin/react/typings/taxConfiguration.d.ts from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface TaxConfiguration {
  allowExecutionAfterErrors: boolean
  authorizationHeader: string
  integratedAuthentication: boolean
  url: string
}

interface GetTaxConfiguration {
  getTaxConfiguration: TaxConfiguration
}

interface SetTaxConfiguration {
  paymentConfiguration?: PaymentConfiguration
  taxConfiguration?: TaxConfiguration
  minimumQuantityAccumulatedForItems?: number
  decimalDigitsPrecision?: number
  minimumValueAccumulated?: number
  apps?: [App]
  allowMultipleDeliveries?: boolean
  allowManualPrice?: boolean
  maxIntOfWhiteLabelSellers?: number
  maskFirstPurchaseData?: boolean
  recaptchaValidation?: boolean
}

interface SettingsInput {
  operation: string
}

```


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

[User] Show me the implementation of avatax-br-admin/react/typings/global.d.ts from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.styleguide'
declare module '*.png'

```


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

[User] Show me the implementation of avatax-br-admin/react/typings/css.d.ts from the avatax-br-admin 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 avatax-br-admin/react/typings/docks.d.ts from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Docks {
  name: string
  id: string
}

interface GetDocks {
  getDocks: Docks[]
}

```


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

[User] Show me the implementation of avatax-br-admin/react/typings/establishment.d.ts from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Establishment {
  activitySector?: string
  icmsTaxPayer?: boolean
  taxRegime?: string
  entityType?: string
  stateTaxId?: string
  street?: string
  neighborhood?: string
  zipCode?: string
  city?: string
  state?: string
  streetNumber?: string
  complement?: string
  phone?: string
  cnpj?: string
  suframa?: string
  dockId?: string
  dockName?: string
  [index: string]: string | boolean
}

interface GetEstablishment {
  establishments: Establishment[]
}

interface EstablishmentValidation {
  activitySector?: boolean
  icmsTaxPayer?: boolean
  taxRegime?: boolean
  entityType?: boolean
  stateTaxId?: boolean
  street?: boolean
  neighborhood?: boolean
  zipCode?: boolean
  city?: boolean
  state?: boolean
  streetNumber?: boolean
  complement?: boolean
  cnpj?: boolean
  suframa?: boolean
  dockId?: boolean
  dockName?: boolean
  [index: string]: boolean
}

```


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

[User] Show me the implementation of avatax-br-admin/react/typings/pagination.d.ts from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Pagination {
  total: number
  page: number
  pageSize: number
}

interface PaginationContext {
  pagination?: Pagination
  setPage: (
    page: number,
    pageSize: number
  ) => Promise<{ pagination: Pagination }> | 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 avatax-br-admin/react/typings/values.d.ts from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Values {
  dockId: {
    name: string
    placeholder: string
    label: string
  }
  dockName: {
    name: string
    placeholder: string
    label: string
    options: Array<{ value: string; label: string }>
  }
  icmsTaxPayer: {
    name: string
    label: string
    options: Array<{ value: boolean; label: string }>
  }
  activitySector: {
    name: string
    label: string
    options: Array<{ value: string; label: string }>
  }
  taxRegime: {
    name: string
    label: string
    options: Array<{ value: string; label: string }>
  }
  entityType: {
    name: string
    label: string
    options: Array<{ value: string; label: string }>
  }
  stateTaxId: {
    name: string
    placeholder: string
    label: string
  }
  street: {
    name: string
    placeholder: string
    label: string
  }
  neighborhood: {
    name: string
    placeholder: string
    label: string
  }
  zipCode: {
    name: string
    placeholder: string
    label: string
  }

  city: {
    name: string
    placeholder: string
    label: string
  }
  state: {
    name: string
    placeholder: string
    label: string
  }
  streetNumber: {
    name: string
    placeholder: string
    label: string
  }
  complement: {
    name: string
    placeholder: string
    label: string
  }
  phone: {
    name: string
    placeholder: string
    label: string
  }
  cnpj: {
    name: string
    placeholder: string
    label: string
  }
  suframa: {
    name: string
    placeholder: string
    label: string
  }
}

```


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

[User] Show me the implementation of avatax-br-admin/react/queries/getTaxConfiguration.gql from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getTaxConfiguration {
  getTaxConfiguration  @context(provider: "vtex.avatax-br-service@1.x"){
      allowExecutionAfterErrors
    authorizationHeader
    integratedAuthentication
    url
  }
}

```


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

[User] Show me the implementation of avatax-br-admin/react/queries/getLogs.gql from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getLogs($params: LogParamsInput) {
  getLogs(params: $params) @context(provider: "vtex.avatax-br-service@1.x") {
    pagination {
      page
      pageSize
      total
    }
    data {
      avalaraReturn {
        skuId
        lineAmount
        numberOfItems
        freightAmount
        lineUnitPrice
        useType
        itemDescriptor {
          taxCode
          hsCode
          ex
          cest
          productType
        }
        taxDetails {
          taxImpact {
            impactOnFinalPrice
          }
          taxType
          citation
          subtotalTaxable
          rate
          tax
        }
      }
      client {
        activitySector
        icmsTaxPayer
        taxRegime
        stateTaxId
        useType
        cnpj
        suframa
        city
        state
      }
      establishment {
        activitySector
        icmsTaxPayer
        taxRegime
        stateTaxId
        cnpj
        suframa
        entityType
        city
        state
        dockName
      }
      email
      createdIn
      payload
      orderId
    }
  }
}
```


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

[User] Show me the implementation of avatax-br-admin/react/queries/updateSettings.gql from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation updateSettings($settings: SettingsInput) {
  updateSettings(settings: $settings)
    @context(provider: "vtex.avatax-br-service@1.x") {
    useAvalaraSandboxEnv
    clientIdValue
    clientSecretValue
  }
}

```


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

[User] Show me the implementation of avatax-br-admin/react/queries/saveConfiguration.gql from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```graphql

mutation saveConfigurationMutation($esta: EstablishmentInput){
  saveConfiguration(data: $esta) @context(provider: "vtex.avatax-br-service@1.x")
}

```


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

[User] Show me the implementation of avatax-br-admin/react/queries/getEstablishment.gql from the avatax-br-admin VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getEstablishment {
  establishments @context(provider: "vtex.avatax-br-service@1.x") {
    id
    activitySector
    icmsTaxPayer
    taxRegime
    entityType
    stateTaxId
    street
    neighborhood
    zipCode
    city
    state
    streetNumber
    complement
    phone
    cnpj
    suframa
    dockId
    dockName
  }
}

```