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

[User] Show me the implementation of checkout-shipping/react/machines/useAddressStateMachine.ts from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { useMachine } from '@xstate/react'
import { Router, routes } from 'vtex.checkout-container'
import { OrderShipping } from 'vtex.order-shipping'
import { AddressContext } from 'vtex.address-context'
import { assign } from 'xstate'

import addressStateMachine from './addressStateMachine'
import type { AddressMachineEvents } from './types'
import useMatcher from './useMatcher'

const { useHistory } = Router
const { useOrderShipping } = OrderShipping
const { useAddressContext } = AddressContext

const useAddressStateMachine = () => {
  const { updateSelectedAddress } = useOrderShipping()
  const { setAddress } = useAddressContext()

  const history = useHistory()

  const [state, send] = useMachine<unknown, AddressMachineEvents>(
    addressStateMachine,
    {
      devTools: true,
      actions: {
        goToNextStep: () => history.push(routes.PAYMENT),
        goToCreateAddress: () => {
          history.push(routes.SHIPPING)
        },
        updateSelectedAddress: assign((_, event) => {
          if (event.type === 'done.invoke.tryToUpdateCompleteAddress') {
            const updatedAddress = event.data.orderForm.shipping.selectedAddress

            setAddress(updatedAddress)

            return {}
          }

          return {}
        }),
      },
      services: {
        tryToUpdateCompleteAddress: async (_, event) => {
          if (event.type !== 'SUBMIT_EDIT_ADDRESS') {
            return
          }

          const result = await updateSelectedAddress(event.updatedAddress)

          return result
        },
      },
    }
  )

  const matches = useMatcher<unknown, AddressMachineEvents>(state)

  return { matches, send, state }
}

export default useAddressStateMachine

```


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

[User] Show me the implementation of checkout-shipping/react/machines/useMatcher.ts from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { useCallback } from 'react'
import type { State, EventObject, Typestate } from 'xstate'

const useMatcher = <Context, Events extends EventObject>(
  state: State<Context, Events>
) =>
  useCallback((params: Typestate<Context>['value']) => state.matches(params), [
    state,
  ])

export default useMatcher

```


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

[User] Show me the implementation of checkout-shipping/react/machines/addressStateMachine.ts from the checkout-shipping VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { Machine } from 'xstate'

import type { AddressMachineEvents } from './types'

const addressStateMachine = Machine<unknown, AddressMachineEvents>(
  {
    initial: 'editAddress',
    states: {
      editAddress: {
        initial: 'editing',
        states: {
          editing: {
            on: {
              SUBMIT_EDIT_ADDRESS: 'submitting',
              RESET_ADDRESS: {
                actions: 'goToCreateAddress',
              },
            },
          },
          submitting: {
            invoke: {
              src: 'tryToUpdateCompleteAddress',
              onDone: [
                {
                  target: 'updateComplete',
                  actions: 'updateSelectedAddress',
                },
              ],
              onError: 'editing',
            },
          },
          updateComplete: {
            type: 'final',
          },
        },

        onDone: 'done',
      },
      done: {
        entry: 'goToNextStep',
      },
    },
  },
  {
    actions: {
      goToNextStep: () => {},
    },
  }
)

export default addressStateMachine

```


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

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

[Assistant]
Here's the implementation:

```typescript
declare module '@vtex/estimate-calculator' {
  interface SLA {
    id: string
    shippingEstimate: string
    price: number
  }

  function getFastestSla(slas: SLA[]): SLA | undefined

  function getCheapestSla(slas: SLA[]): SLA | undefined
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "admin/test": "teste",
  "store/test": "teste"
}
```


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

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

[Assistant]
Here's the implementation:

```json
{
  "admin/test": "test",
  "store/test": "test"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "admin/test": "teste",
  "store/test": "teste"
}
```


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

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

[Assistant]
Here's the implementation:

```markdown
# WINE METER

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

Configurable attributes should be created via admin, the canvas only requires coordinates.

## Configuration
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
Canvas attributes :
winemeter_fructe
winemeter_dulceata
winemeter_aciditate
winemeter_tanini

Specs attributes :
winespec_decantare
winespec_invechire
winespec_temperatura
winespec_mancare
<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- DOCS-IGNORE:start -->

## Contributors ✨

Thanks goes to these wonderful people:

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

<!-- 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 wine-meter/react/WineMeter.css from the wine-meter VTEX app.

[Assistant]
Here's the implementation:

```css
/*========================================================================
  GENERAL STYLE
==========================================================================*/
.scalingSvgContainer {
  position: relative;
  display: block;
  margin: auto;
  width: 250px;
  height: 235px;
  margin-top: -20px;

}

.scalingSvg {
  position: absolute;
  height: 250px;
  width: 235px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.labels {
  width: 250px;
  height: 235px;
  position: relative;
  top: -235px;
  margin: auto;
  z-index: 999;
}

.winemeter-logo {
  width: 75px;
  height: 50px;
  position: absolute;
  background: url(assets/winefulmeter.png);
  background-size: contain;
  background-repeat: no-repeat;
  top: 25px;
  left: 25px;
}

.graph{
  position: relative;
  display: block;
  margin: auto;
  max-width: 422px;
  width: 100%;
  padding: 25px;
  border: solid 1px #eaeaea;
  padding-top: 60px;
}

.pentagon {
  width: 250px;
  margin: auto;
  height: 235px;
  margin: auto;
  display: block;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  padding: 25px;
  position: relative;
  top: -470px;
  margin-bottom: -450px;
}

.winemeter-winespecs {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

.winemeter-winespec_decantare,
.winemeter-winespec_mancare,
.winemeter-winespec_temperatura,
.winemeter-winespec_invechire {
  max-width: 50%;
  width: 100%;
  margin-bottom: 30px;
  padding: 0 10px;
  padding-top: 90px;
  text-align: center;
  background-size: 79px 79px !important;
  background-repeat: no-repeat !important;
  background-position: center top !important;
  font-size: 12px;
}

.winemeter-winespec_decantare {
  background: url(assets/decantare.svg);
}

.winemeter-winespec_mancare {
  background: url(assets/mancare.svg);
}

.winemeter-winespec_temperatura {
  background: url(assets/temperatura.svg);
}

.winemeter-winespec_invechire {
  background: url(assets/timp.svg);
}

.winemeter-logo {
  width: 75px;
  height: 50px;
  position: absolute;
  background: url(assets/winefulmeter.png);
  background-size: contain;
  background-repeat: no-repeat;
  top: 25px;
  left: 25px;
}

.pentCanvas{
  margin-top: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.pentCanvas canvas {

}

.labelCorp{
  font-size: 11px;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}

.labelTanini{
  font-size: 11px;
  position: absolute;
  top: 96px;
  left: -5px;
}

.labelAciditate{
  font-size: 11px;
  position: absolute;
  left: 30px;
  top:210px;
}

.labelDulceata{
  font-size: 11px;
  position: absolute;
  right: 30px;
  top:210px;
}

.labelFructe{
  font-size: 11px;
  position: absolute;
  top: 96px;
  right: -10px;
}

.cls1 {
  fill: none;
  stroke: #e5e6ea;
  stroke-miterlimit: 10;
}

.cls2 {
  fill: #e5e6ea;
}

```


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

[User] Show me the implementation of wine-meter/react/Greeting.test.tsx from the wine-meter VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { render } from '@vtex/test-tools/react'

import Greeting from './Greeting'

test('greets Fred', () => {
  const { queryByText } = render(<Greeting name="Fred" />)

  expect(queryByText('Hey, Fred')).toBeInTheDocument()
})

```


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

[User] Show me the implementation of wine-meter/react/WineMeter.tsx from the wine-meter VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { Circle, Line, Stage, Layer } from 'react-konva';
import { useProduct } from 'vtex.product-context';
import styles from './WineMeter.css'

function filterByValue(array: any[] | undefined, string: string) {
  if (array) {
    return array.filter(o =>
      Object.keys(o).some(k => o[k].includes(string.toLowerCase())));
  }

  return null;
}

function arrayToObject(arr: any[] | undefined, key: string) {
  if (arr) {
    // @ts-ignore
    return arr.reduce((obj, item) => {
      obj[item[key]] = item
      return obj
    }, {})
  }

  return null;
}

function Specs(this: any) {
  const productContextValue = useProduct();
  const attributes = productContextValue?.product?.properties;
  const filteredObj = filterByValue(attributes, 'winespec');

  // @ts-ignore
  return filteredObj.map((item: any) => (
    <div className={'vtex-wine-meter-1-x-winemeter-' + item.name}>
      { item.values[0] }
    </div>
  ));
}

function Canvas(this: any) {
  var corpLat: number,
      corpLong: number,
      fructeLat: number,
      fructeLong: number,
      dulceataLat: number,
      dulceataLong: number,
      aciditateLat: number,
      aciditateLong: number,
      taniniLat: number,
      taniniLong: number;

  const productContextValue = useProduct();
  const ceva = productContextValue?.product?.properties;
  const produs = arrayToObject(ceva, 'name');

  switch (produs.winemeter_corp.values[0]) {
    case '5': corpLat = 89; corpLong = 0; break;
    case '4': corpLat = 89; corpLong = 19; break;
    case '3': corpLat = 89; corpLong = 38; break;
    case '2': corpLat = 89; corpLong = 54; break;
    case '1': corpLat = 89; corpLong = 70; break;
    default: corpLat = 0; corpLong = 0; break;
  }

  switch (produs.winemeter_fructe.values[0]) {
    case '5': fructeLat = 180; fructeLong = 63; break;
    case '4': fructeLat = 158; fructeLong = 68; break;
    case '3': fructeLat = 142; fructeLong = 74; break;
    case '2': fructeLat = 125; fructeLong = 79; break;
    case '1': fructeLat = 106; fructeLong = 82; break;
    default: fructeLat = 0; fructeLong = 0; break;
  }

  switch (produs.winemeter_dulceata.values[0]) {
    case '5': dulceataLat = 144; dulceataLong = 159; break;
    case '4': dulceataLat = 133; dulceataLong = 144; break;
    case '3': dulceataLat = 121; dulceataLong = 130; break;
    case '2': dulceataLat = 111; dulceataLong = 117; break;
    case '1': dulceataLat = 101; dulceataLong = 104; break;
    default: dulceataLat = 0; dulceataLong = 0; break;
  }

  switch (produs.winemeter_aciditate.values[0]) {
    case '5': aciditateLat = 34; aciditateLong = 159; break;
    case '4': aciditateLat = 45; aciditateLong = 144; break;
    case '3': aciditateLat = 57; aciditateLong = 130; break;
    case '2': aciditateLat = 67; aciditateLong = 118; break;
    case '1': aciditateLat = 78; aciditateLong = 105; break;
    default: aciditateLat = 0; aciditateLong = 0; break;
  }

  switch (produs.winemeter_tanini.values[0]) {
    case '5': taniniLat = 1; taniniLong = 64; break;
    case '4': taniniLat = 19; taniniLong = 69; break;
    case '3': taniniLat = 37; taniniLong = 73; break;
    case '2': taniniLat = 54; taniniLong = 78; break;
    case '1': taniniLat = 70; taniniLong = 84; break;
    default: taniniLat = 0; taniniLong = 0; break;
  }

  return (
    <Stage width={178} height={160}>
      <Layer>
        <Line
          x={0}
          y={0}
          points={[corpLat, corpLong, fructeLat, fructeLong, dulceataLat, dulceataLong, aciditateLat, aciditateLong, taniniLat, taniniLong]}
          closed
          stroke="black"
          strokeWidth={0}
          fill="rgba(255, 221, 28, .5)"
        />
        <Circle x={corpLat} y={corpLong} radius={50} fill="black" width={10} height={10} />
        <Circle x={fructeLat} y={fructeLong} radius={50} fill="black" width={10} height={10} />
        <Circle x={dulceataLat} y={dulceataLong} radius={50} fill="black" width={10} height={10} />
        <Circle x={aciditateLat} y={aciditateLong} radius={50} fill="black" width={10} height={10} />
        <Circle x={taniniLat} y={taniniLong} radius={50} fill="black" width={10} height={10} />
      </Layer>
    </Stage>
  );
}

function WineMeter() {
  return (
    <div className={styles.graph} data-corp="3" data-tanini="3" data-fructe="4" data-dulceata="3" data-aciditate="3">
      <div className="vtex-wine-meter-1-x-winemeter-logo"/>
      <div className={styles.scalingSvgContainer}>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 321.27 286.32" className={styles.scalingSvg}>
          <g id="Layer_2" data-name="Layer 2">
            <g id="Layer_2-2" data-name="Layer 2">
              <path className={styles.cls1}
                    d="M157.4,39.56,41.88,119.91a5.67,5.67,0,0,0-2.12,6.52L83.26,251a5.67,5.67,0,0,0,5.35,3.8h144A5.67,5.67,0,0,0,238,251l43.5-124.58a5.67,5.67,0,0,0-2.12-6.52L163.87,39.56A5.67,5.67,0,0,0,157.4,39.56Z"></path>
              <path className={styles.cls1}
                    d="M157.88,65.12,67.53,128a4.82,4.82,0,0,0-1.8,5.54l34,97.42a4.82,4.82,0,0,0,4.55,3.23H217a4.82,4.82,0,0,0,4.55-3.23l34-97.42a4.82,4.82,0,0,0-1.8-5.54L163.39,65.12A4.82,4.82,0,0,0,157.88,65.12Z"></path>
              <path className={styles.cls1}
                    d="M158.21,89,91.53,135.39a4.25,4.25,0,0,0-1.59,4.89L115,212.1a4.25,4.25,0,0,0,4,2.85h83.21a4.25,4.25,0,0,0,4-2.85l25.08-71.82a4.25,4.25,0,0,0-1.59-4.89L163.06,89A4.25,4.25,0,0,0,158.21,89Z"></path>
              <path className={styles.cls1}
                    d="M158.69,110.87l-45.26,31.48a3.4,3.4,0,0,0-1.27,3.91l17,48.7a3.4,3.4,0,0,0,3.21,2.28h56.51A3.4,3.4,0,0,0,192.1,195l17-48.7a3.4,3.4,0,0,0-1.27-3.91l-45.26-31.48A3.4,3.4,0,0,0,158.69,110.87Z"></path>
              <path className={styles.cls1}
                    d="M159,133.61l-22.74,15.82a2.83,2.83,0,0,0-1.06,3.26L143.73,177a2.83,2.83,0,0,0,2.68,1.9h28.46a2.83,2.83,0,0,0,2.68-1.9L186,152.69a2.83,2.83,0,0,0-1.06-3.26l-22.74-15.82A2.83,2.83,0,0,0,159,133.61Z"></path>
            </g>
          </g>
        </svg>
      </div>
      <div className={styles.labels}>
        <span data-toggle="tooltip"
              title="Corpul vinului este dat de alcool si de extractul strugurelui. Cu cat vinul este mai corpolent, cu atat este mai dens."
              className={styles.labelCorp}>Corp</span>
        <span data-toggle="tooltip"
              title="O concentratie mai mare de tanini, ofera vinului un gust putin amarui care ne “face gura punga”."
              className={styles.labelTanini}>Tanini</span>
        <span data-toggle="tooltip"
              title="Nivelul fructelor determina daca vinul are gust si arome accentuate de fructe sau acestea lipsesc."
              className={styles.labelFructe}>Fructe</span>
        <span data-toggle="tooltip"
              title="Nivelul de dulceata ofera vinului un gust mai dulce sau mai acrisor, chiar daca el este sec."
              className={styles.labelDulceata}>Dulceata</span>
        <span data-toggle="tooltip"
              title="Aciditatea scazuta ofera vinului un gust “plat”, aciditatea mare un gust acrisor si astringent."
              className={styles.labelAciditate}>Aciditate</span>
      </div>
      <div className={styles.pentagon} id="5-factors">
        <div className={styles.pentCanvas}>
          { Canvas() }
        </div>
      </div>
      <div className="vtex-wine-meter-1-x-winemeter-winespecs">
        { Specs() }
      </div>
    </div>
  )
}

export default WineMeter;

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "wine-meter",
  "version": "1.0.1",
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "apollo-client": "^2.6.8",
    "konva": "^8.3.1",
    "react": "^16.12.0",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.12.0",
    "react-konva": "^17.0.2-5",
    "react-polygon": "^0.2.0"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/jest": "^25.1.4",
    "@types/node": "^13.9.8",
    "@types/prop-types": "^15.7.0",
    "@types/ramda": "^0.26.5",
    "@types/react": "^16.9.31",
    "@types/react-intl": "^3.0.0",
    "@vtex/test-tools": "^3.3.2",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-cache-inmemory": "^1.6.5",
    "graphql": "^14.6.0",
    "react-intl": "^3.12.0",
    "typescript": "3.9.7",
    "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.3/public/@types/vtex.render-runtime"
  }
}

```


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

[User] Show me the implementation of wine-meter/react/Greeting.tsx from the wine-meter VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

type Props = {
  name: string
}

function Greeting({ name }: Props) {
  return <div>Hey, {name}</div>
}

export default Greeting

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "wine-meter": {
    "component": "WineMeter",
    "composition": "children"
  }
}

```


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

[User] Show me the implementation of wine-meter/react/typings/gql.d.ts from the wine-meter 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 wine-meter/react/typings/css.d.ts from the wine-meter 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 proxy-mailing-flow/docs/README.md from the proxy-mailing-flow VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Proxy Mailing Flow v3

This service allows you to handling the mailing to be able to cancel and generate orders without repeating notifications to the user.

## Flows

With this application you can customize the emails when the orders pass through the `order-created` and `invoiced` states. You also can skip notifications to the user when the order is created adding a custom app (in custom data) to the order, this custom app must have an `"id": "origin"`.

## Settings fields
There are 6 fields to complete for configure the app.
- Default email: is the email for mailing flows that doesn’t find any seller.

- Subscriber MasterData Entity List: here you can define one (at least) or more data entity acronyms for the subscribers to the mailing flow (example: seller and supervisor).

- Client Mailing Template Name (order-created): is the name of the message-		center template url.

- Client Mailing Template Name (invoiced): is the name of the message-center template url.

- Subscribers Mailing Template Name (order-created): is the name of the message-center template url.

- Subscribers Mailing Template Name (invoiced): is the name of the message-center template url.

You can see how to modify the templates [**here**](https://developers.vtex.com/vtex-rest-api/docs/how-to-set-up-functions-in-the-message-center-templates)

![Settings fields](https://user-images.githubusercontent.com/55720621/135907990-74d3fd11-e2fb-4232-9a79-e26772f71dba.png)
## Steps by step:
1. First you have to [**disable transactional emails**](https://help.vtex.com/en/tutorial/how-to-disable-a-transactional-email--frequentlyAskedQuestions_6715).
2. You need to install this app running `vtex install vtexarg.proxy-mailing-flow@3.x` command on the *vtex toolbelt*.
3. Then you must hook the order status changes to this service. You can see how to do this [**here**](https://developers.vtex.com/vtex-rest-api/reference/order-hook-1#hookconfiguration) (you need admin super roll). Here the body example:
    >     {
    >       "filter": {
    >         "type": "FromWorkflow",
    >         "status": ["order-created", "invoiced"]
    >       },
    >       "hook": {
    >         "url": "https://{{accountName}}.myvtex.com/_v/proxy-mailing-flow/"
    >       }
    >     }
4. Configure the settings fields of the app in the link `https://{{account}}.myvtex.com/admin/apps/vtexarg.proxy-mailing-flow@3.x/setup`.

```


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

[User] Show me the implementation of proxy-mailing-flow/node/service.json from the proxy-mailing-flow VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "memory": 256,
  "ttl": 10,
  "timeout": 2,
  "minReplicas": 2,
  "maxReplicas": 4,
  "workers": 1,
  "routes": {
    "status": {
      "path": "/_v/proxy-mailing-flow/",
      "public": true
    }
  }
}

```


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

[User] Show me the implementation of proxy-mailing-flow/node/package.json from the proxy-mailing-flow VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "@vtex/clients": "^2.13.0",
    "co-body": "^6.0.0",
    "ramda": "^0.25.0"
  },
  "devDependencies": {
    "@types/co-body": "^0.0.3",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.0.0",
    "@types/ramda": "types/npm-ramda#dist",
    "@vtex/api": "6.45.4",
    "@vtex/test-tools": "^1.0.0",
    "@vtex/tsconfig": "^0.5.6",
    "typescript": "3.9.7"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty"
  },
  "version": "3.0.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 proxy-mailing-flow/node/index.ts from the proxy-mailing-flow VTEX app.

[Assistant]
Here's the implementation:

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

import { Clients } from './clients'
import { sendEmail } from './middlewares/sendEmail'
import { getOrder } from './middlewares/getOrder'
import { getClientData } from './middlewares/getClientData'
import { pong } from './middlewares/pong'

const TIMEOUT_MS = 800

const memoryCache = new LRUCache<string, any>({ max: 5000 })

metrics.trackCache('status', memoryCache)

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

declare global {
  type Context = ServiceContext<Clients, State>
  interface ClientProfileDataInterface {
    email: string
    customerClass: string
  }
  interface OrderResponseInterface {
    orderId: string
    clientProfileData: ClientProfileDataInterface
    customData: CustomDataInterface
    marketingData: MarketingDataInterface
  }
  interface BodyInterface {
    State: string
    OrderId: string
    hookConfig: string
  }
  interface CustomDataInterface {
    customApps: [CustomFieldInterface]
  }
  interface MarketingDataInterface {
    marketingTags: string[]
  }
  interface CustomFieldInterface {
    id: string
  }
  interface State extends RecorderState {
    orderResponse: OrderResponseInterface
    body: BodyInterface
    emails: { clientEmail: string; subsEmails: string[] }
    flow: string
  }
}

export default new Service({
  clients,
  routes: {
    status: method({
      POST: [pong, getOrder, getClientData, sendEmail],
    }),
  },
})

```


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

[User] Show me the implementation of proxy-mailing-flow/node/clients/masterdata.ts from the proxy-mailing-flow VTEX app.

[Assistant]
Here's the implementation:

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

export default class Masterdata extends ExternalClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super(
      `http://${context.account}.vtexcommercestable.com.br/api/dataentities/CL/search`,
      context,
      {
        ...options,
        headers: {
          VtexIdClientAutCookie: context.authToken,
          'X-Vtex-Use-Https': 'true',
        },
      }
    )
  }

  public async getClientData(
    customerClass: string,
    agente: string
  ): Promise<ClientData[]> {
    return this.http.get(`?customerClass=${customerClass}&agente=${agente}`)
  }
}

export interface ClientData {
  email: 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 proxy-mailing-flow/node/clients/email.ts from the proxy-mailing-flow VTEX app.

[Assistant]
Here's the implementation:

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

export default class Email extends ExternalClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super(
      `http://${context.account}.vtexcommercestable.com.br/api/mail-service/pvt/sendmail`,
      context,
      {
        ...options,
        headers: {
          VtexIdClientAutCookie: context.authToken,
        },
      }
    )
  }

  // eslint-disable-next-line @typescript-eslint/ban-types
  public async sendEmail(body: BodyEmail): Promise<IOResponse<String>> {
    return this.http.postRaw('', body)
  }
}

export interface BodyEmail {
  providerName: string
  templateName: string
  jsonData: JsonData
}

export interface JsonData {
  to?: string
  orders?: unknown[]
  clientProfileData?: {
    email?: 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 proxy-mailing-flow/node/clients/orders.ts from the proxy-mailing-flow VTEX app.

[Assistant]
Here's the implementation:

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

export default class OrdersClient extends ExternalClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super(
      `http://${context.account}.vtexcommercestable.com.br/api/oms/pvt/orders`,
      context,
      {
        ...options,
        headers: {
          VtexIdClientAutCookie: context.authToken,
          'X-Vtex-Use-Https': 'true',
        },
      }
    )
  }

  // eslint-disable-next-line @typescript-eslint/ban-types
  public async getOrder(orderId: string): Promise<IOResponse<String>> {
    return this.http.getRaw(`${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 proxy-mailing-flow/node/clients/index.ts from the proxy-mailing-flow VTEX app.

[Assistant]
Here's the implementation:

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

import Masterdata from './masterdata'
import Email from './email'
import OrdersClient from './orders'

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

  public get masterdataclient() {
    return this.getOrSet('getClientData', Masterdata)
  }

  public get email() {
    return this.getOrSet('sendEmail', Email)
  }
}

```


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

[User] Show me the implementation of proxy-mailing-flow/node/middlewares/getClientData.ts from the proxy-mailing-flow VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable no-console */
import { LogLevel } from '@vtex/api'

import type { ClientData } from '../clients/masterdata'

export async function getClientData(ctx: Context, next: () => Promise<any>) {
  const {
    state: { orderResponse },
    clients: { masterdataclient },
  } = ctx

  try {
    const appId = process.env.VTEX_APP_ID ? process.env.VTEX_APP_ID : ''
    const settings = await ctx.clients.apps.getAppSettings(appId)
    const { subscriberEntityList, defaultEmail } = settings
    const subscriberEntityListParsed = subscriberEntityList.split(',')
    const { customerClass } = orderResponse.clientProfileData
    const { marketingTags } = orderResponse.marketingData

    const subscriberPromises: Array<Promise<ClientData[]>> =
      subscriberEntityListParsed.map((sub: string) => {
        const customerClassTag = marketingTags.find((tag: string) =>
          tag.includes('customerClass')
        )

        console.log('customerClassTag', customerClassTag)

        ctx.vtex.logger.log(
          {
            message: 'customerClassTag',
            detail: {
              customerClassTag: customerClassTag
            },
          },
          LogLevel.Info
        )

        if (!customerClassTag) {
          return masterdataclient.getClientData(customerClass, sub)
        }

        // eslint-disable-next-line prefer-destructuring
        const ccFromMarketingTags = customerClassTag.split('customerClass-')[1]

        console.log('ccFromMarketingTags', ccFromMarketingTags)

        ctx.vtex.logger.log(
          {
            message: 'ccFromMarketingTags',
            detail: {
              ccFromMarketingTags: ccFromMarketingTags
            },
          },
          LogLevel.Info
        )

        return masterdataclient.getClientData(ccFromMarketingTags, sub)
      })

    const subscribers: ClientData[][] = await Promise.all(subscriberPromises)

    const subscriberEmails: string[][] = subscribers.map(
      (sub: ClientData[]) => {
        const aux: string[] = []

        sub.forEach((user: ClientData) => aux.push(user.email))

        // sub.map((user: ClientData) => user.email)
        return aux
      }
    )

    const subscribersEmailsFlat: any[] = []

    subscriberEmails.forEach((group: string[]) => {
      subscribersEmailsFlat.push(...group)
    })

    console.log({ subscribersEmailsFlat })
    console.log({ defaultEmail })
    const subsEmails =
      subscribersEmailsFlat.length > 0 ? subscribersEmailsFlat : [defaultEmail]

    console.log({ subsEmails })
    const emails = {
      clientEmail: orderResponse.clientProfileData.email,
      subsEmails,
    }

    console.log('emails', emails)

    ctx.state.emails = emails

    ctx.vtex.logger.log(
      {
        message: 'getClientData Info',
        detail: {
          appId,
          settings,
          customerClass,
          emails,
        },
      },
      LogLevel.Info
    )

    await next()
  } catch (err) {
    ctx.vtex.logger.log(
      {
        message: 'getClientData Error',
        detail: {
          errorMessage: err.message,
          error: err,
        },
      },
      LogLevel.Error
    )

    ctx.status = 500
    ctx.body = { error: 'Error sending email', message: err }

    await next()
  }
}

```


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

[User] Show me the implementation of proxy-mailing-flow/node/middlewares/pong.ts from the proxy-mailing-flow VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable no-console */
import { json } from 'co-body'
import { LogLevel } from '@vtex/api'

export async function pong(ctx: Context, next: () => Promise<any>) {
  const body = await json(ctx.req)

  ctx.state.body = body
  ctx.state.flow = 'Init'

  ctx.vtex.logger.log(
    {
      message: 'Init',
      detail: {
        receivedBody: body,
      },
    },
    LogLevel.Info
  )

  console.log({
    message: 'Init',
    detail: {
      receivedBody: body,
    },
  })

  if (body.hookConfig) {
    ctx.vtex.logger.log(
      {
        message: 'Ping received',
      },
      LogLevel.Info
    )

    ctx.state.flow = 'Pong'
    ctx.status = 200
    ctx.body = { response: 'pong' }

    return
  }

  await next()
}

```


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

[User] Show me the implementation of proxy-mailing-flow/node/middlewares/sendEmail.ts from the proxy-mailing-flow VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable @typescript-eslint/ban-types */
/* eslint-disable no-console */
import type { IOResponse } from '@vtex/api'
import { LogLevel } from '@vtex/api'

import type { BodyEmail, JsonData } from '../clients/email'

export async function sendEmail(ctx: Context, next: () => Promise<any>) {
  const {
    state: { orderResponse, emails, flow },
    clients: { email },
  } = ctx

  ctx.vtex.logger.log(
    {
      message: 'sendEmail emails',
      detail: {
        emails,
      },
    },
    LogLevel.Info
  )

  ctx.vtex.logger.log(
    {
      message: 'sendEmail flow',
      detail: {
        flow,
      },
    },
    LogLevel.Info
  )

  try {
    const emailBodyBuilder = (
      providerName: string,
      templateName: string,
      jsonData: JsonData
    ) => {
      return {
        providerName,
        templateName,
        jsonData,
      }
    }

    const appId = process.env.VTEX_APP_ID ? process.env.VTEX_APP_ID : ''
    const {
      clientTemplateCreated,
      clientTemplateInvoiced,
      subscribersTemplateCreated,
      subscribersTemplateInvoiced,
    } = await ctx.clients.apps.getAppSettings(appId)

    const subscribers = emails.subsEmails

    let emailBodyClient: BodyEmail

    if (flow === 'Invoiced') {
      emailBodyClient = emailBodyBuilder(
        'noreply',
        clientTemplateInvoiced,
        orderResponse
      )
    } else {
      emailBodyClient = emailBodyBuilder('noreply', clientTemplateCreated, {
        to: emails.clientEmail,
        orders: [orderResponse],
      })
    }

    const emailBodySubscribersList: BodyEmail[] = subscribers.map(
      (sub: string) => {
        if (flow === 'Invoiced') {
          const clientProfileDataSub = { ...orderResponse.clientProfileData }
          const orderResponseSub = { ...orderResponse }

          clientProfileDataSub.email = sub
          orderResponseSub.clientProfileData = clientProfileDataSub

          return emailBodyBuilder(
            'noreply',
            subscribersTemplateInvoiced,
            orderResponseSub
          )
        }

        return emailBodyBuilder('noreply', subscribersTemplateCreated, {
          to: sub,
          orders: [orderResponse],
        })
      }
    )

    const emailResponseClient: IOResponse<String> = await email.sendEmail(
      emailBodyClient
    )

    const emailResponseSubs: EmailResponseSubs[] = await Promise.all(
      emailBodySubscribersList.map(async (body: BodyEmail) => {
        const aux = await email.sendEmail(body)

        ctx.vtex.logger.log(
          {
            message: 'sendEmail aux email.sendEmail',
            detail: {
              response: aux,
            },
          },
          LogLevel.Info
        )

        if (flow === 'Invoiced') {
          return {
            status: aux.status,
            data: aux.data,
            email: body?.jsonData?.clientProfileData?.email,
          }
        }

        return {
          status: aux.status,
          data: aux.data,
          email: body?.jsonData?.to,
        }
      })
    )

    const response = {
      orderId: orderResponse.orderId,
      response: [
        ...emailResponseSubs,
        {
          status: emailResponseClient.status,
          data: emailResponseClient.data,
          email: emails.clientEmail,
        },
      ],
    }

    ctx.vtex.logger.log(
      {
        message: 'sendEmail Info',
        detail: {
          response: response,
        },
      },
      LogLevel.Info
    )

    console.log('orderId send email', response.orderId)
    console.log('email operations', response.response)

    ctx.status = 200
    ctx.body = response
    ctx.state.flow =
      flow === 'Invoiced' ? 'EmailSent-Invoiced' : 'EmailSent-Created'

    await next()
  } catch (err) {
    ctx.vtex.logger.log(
      {
        message: 'sendEmail Error',
        detail: {
          emails: emails,
          order: orderResponse,
          errorMessage: err.message,
          error: err,
        },
      },
      LogLevel.Error
    )

    ctx.status = 500
    ctx.body = { error: 'Error sending email', message: err }

    await next()
  }
}

interface EmailResponseSubs {
  status: number
  data: String
  email: string | undefined
}

```


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

[User] Show me the implementation of proxy-mailing-flow/node/middlewares/getOrder.ts from the proxy-mailing-flow VTEX app.

[Assistant]
Here's the implementation:

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

export async function getOrder(ctx: Context, next: () => Promise<any>) {
  const {
    state: { body },
    clients: { orders },
  } = ctx

  ctx.state.flow = 'GetOrderInit'

  try {
    if (body.State === 'order-created') {
      ctx.state.flow = 'OrderCreated'

      const orderResponse: any = await orders.getOrder(body.OrderId)

      ctx.state.orderResponse = orderResponse.data

      if (!orderResponse.data.customData) {
        ctx.state.flow = 'OrderCreatedWithoutOrigin'
        ctx.state.orderResponse = orderResponse.data

        ctx.vtex.logger.log(
          {
            message: 'getOrder no custom data',
            detail: {
              customData: orderResponse.data.customData,
            },
          },
          LogLevel.Info
        )

        await next()
      } else {
        const custom = orderResponse.data.customData.customApps.find(
          (e: any) => e.id === 'origin'
        )

        if (!custom) {
          ctx.state.flow = 'OrderCreatedWithoutOrigin'
          ctx.state.orderResponse = orderResponse.data

          ctx.vtex.logger.log(
            {
              message: 'getOrder order created without origin',
              detail: {
                customApp: custom,
              },
            },
            LogLevel.Info
          )

          await next()
        } else {
          ctx.state.flow = 'OrderCreatedWithOrigin'
          ctx.body = {
            message: 'No Invoiced or OrderCreatedWithoutOrigin => No Email',
          }
          ctx.status = 200

          ctx.vtex.logger.log(
            {
              message: 'getOrder order created with origin',
              detail: {
                customApp: custom,
              },
            },
            LogLevel.Info
          )

          return
        }
      }
    } else {
      ctx.state.flow = 'Invoiced'
      const orderResponse: any = await orders.getOrder(body.OrderId)

      ctx.state.orderResponse = orderResponse.data

      ctx.vtex.logger.log(
        {
          message: 'getOrder invoiced',
        },
        LogLevel.Info
      )

      await next()
    }
  } catch (err) {
    ctx.vtex.logger.log(
      {
        message: 'getOrder Error',
        detail: {
          errorMessage: err.message,
          error: err,
        },
      },
      LogLevel.Error
    )

    ctx.status = 500
    ctx.body = { message: err }

    await next()
  }
}

```


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

[User] Show me the implementation of proxy-mailing-flow/node/__tests__/simple.test.ts from the proxy-mailing-flow VTEX app.

[Assistant]
Here's the implementation:

```typescript
// You can import your files here for testing them
//
// More info: https://github.com/sapegin/jest-cheat-sheet

describe('simpleTest', () => {
  it('one test case', async () => {
    expect(0.2 + 0.1).not.toBe(0.3)
  })
})

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/breadcrumb.homeLink": "Link de Início"
}
```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/breadcrumb.homeLink": "Enlace de Inicio"
}
```


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

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

[Assistant]
Here's the implementation:

```markdown
📢 Use this project, [contribute](https://github.com/vtex-apps/breadcrumb) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).
<!-- 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 -->

# Breadcrumb

The VTEX BreadCrumb is a navigation scheme that shows a user's browsing history up to their current location in your store.

![img2-breadcrumb](https://user-images.githubusercontent.com/52087100/69836587-a4237380-1228-11ea-89c8-0f34cea3a96f.png)

## Configuration

1. Import the breadcrumb's app to your theme's dependencies in the `manifest.json`, for example:

```json
  dependencies: {
    "vtex.breadcrumb": "1.x"
  }
```

2. Add the `breadcrumb` block to the Product template. For example:

```
 "breadcrumb": {
    "props": {
      "showOnMobile": true
    }
  },
```

| Prop name    | Type            | Description    | Default value                                                                                |
| ------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| `showOnMobile`        | `Boolean`       | It determines whether Breadcrumb should also be displayed on mobile          | `false`              |
| `homeIconSize`  | `Number`        | Controls the `size` property of [`IconHome`](https://github.com/vtex-apps/store-icons#icons)                                                                                | `26` |
| `caretIconSize` | `Number`        | Controls the `size` property of [`IconCaret`](https://github.com/vtex-apps/store-icons#icons)                                                                                | `8` |

:warning: The product's categories should appear as an array in one of this two formats:

```javascript
categories = ['/Eletronics/', '/Eletronics/Computers']
```

```javascript
categories = ['eletronics', 'eletronics-computers']
```

3. Add the `breadcrumb.search` block to the Search template. For example:

```
 "breadcrumb.search": {
    "props": {
      "showOnMobile": true
    }
  },
```

| Prop name    | Type            | Description    | Default value                                                                                |
| ------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| `showOnMobile`        | `Boolean`       | It determines whether Breadcrumb should also be displayed on mobile          | `false`              |
| `homeIconSize`  | `Number`        | Controls the `size` property of [`IconHome`](https://github.com/vtex-apps/store-icons#icons)                                                                                | `26` |
| `caretIconSize` | `Number`        | Controls the `size` property of [`IconCaret`](https://github.com/vtex-apps/store-icons#icons)                                                                                | `8` |
> ℹ *The `breadcrumb.search` block is specific for the Breadcrumb inside the search result page.*

## Customization

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

| CSS Handles |
| ----------- |
| `container` |
| `link`      |
| `arrow`     |
| `homeLink`  |
| `termArrow` |

## Contributors ✨

Thanks goes to these wonderful people:

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

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

```


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

[User] Show me the implementation of breadcrumb/react/Breadcrumb.tsx from the breadcrumb VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { useProduct } from 'vtex.product-context'
import { ProductBreadcrumb as ProductBreadcrumbStructuredData } from 'vtex.structured-data'

import BaseBreadcrumb, { Props } from './components/BaseBreadcrumb'

const withProductContextWrapper = (
  Component: React.ComponentType<Props>
): React.FC<Props> => (props) => {
  const { product } = useProduct() || { product: null }
  const term = props.term ?? product?.productName
  const categoryTree = props.categoryTree ?? product?.categoryTree
  const categories = props.categories ?? product?.categories ?? []

  return (
    <>
      {product?.linkText && (
        <ProductBreadcrumbStructuredData
          categoryTree={categoryTree}
          productName={product?.productName}
          productSlug={product?.linkText}
        />
      )}
      <Component
        term={term}
        categories={categories}
        categoryTree={categoryTree}
        breadcrumb={props.breadcrumb}
        showOnMobile={props.showOnMobile}
        homeIconSize={props.homeIconSize}
        caretIconSize={props.caretIconSize}
      />
    </>
  )
}

export default withProductContextWrapper(BaseBreadcrumb)

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.breadcrumbs",
  "description": "A Breadcrumb component.",
  "scripts": {
    "test": "vtex-test-tools test",
    "lint": "tsc --noEmit --pretty && tslint -c tslint.json './**/*.ts'"
  },
  "author": "VTEX",
  "license": "ISC",
  "dependencies": {
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "unorm": "^1.4.1",
    "react-apollo": "^3.1.3",
    "react-intl": "3"
  },
  "devDependencies": {
    "@apollo/react-testing": "^4.0.0",
    "@types/jest": "^25.1.4",
    "@types/node": "^11.9.6",
    "@types/ramda": "^0.26.8",
    "@types/react": "^16.4.18",
    "@types/react-dom": "^16.0.9",
    "@types/unorm": "^1.3.27",
    "@vtex/test-tools": "^3.2.0",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-cache-inmemory": "^1.2.2",
    "graphql": "^14.6.0",
    "typescript": "3.9.7",
    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.2/public/@types/vtex.css-handles",
    "vtex.device-detector": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.device-detector@0.2.4/public/@types/vtex.device-detector",
    "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.8.1/public/@types/vtex.product-context",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.111.1/public/@types/vtex.render-runtime",
    "vtex.search-page-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-page-context@0.0.3/public/_types/react",
    "vtex.store-icons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.17.0/public/@types/vtex.store-icons",
    "vtex.structured-data": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.structured-data@0.5.0/public/@types/vtex.structured-data"
  },
  "version": "1.9.5"
}

```


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

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

[Assistant]
Here's the implementation:

```tsx
import SearchBreadcrumb from './components/SearchBreadcrumb'

export default SearchBreadcrumb

```


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

[User] Show me the implementation of breadcrumb/react/ProductBreadcumb.tsx from the breadcrumb VTEX app.

[Assistant]
Here's the implementation:

```tsx
import ProductBreadcrumb from './components/ProductBreadcrumb'

export default ProductBreadcrumb

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "breadcrumb": {
    "component": "Breadcrumb"
  },
  "breadcrumb.product": {
    "component": "ProductBreadcrumb"
  },
  "breadcrumb.search": {
    "component": "SearchBreadcrumb"
  }
}

```


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

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

[Assistant]
Here's the implementation:

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

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

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

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

  export const withSession: <TOriginalProps extends {}>(
    Component: ComponentType<TOriginalProps & RenderContextProps>
  ) => ComponentType<TOriginalProps>

  export const buildCacheLocator = (
    app: string,
    type: string,
    cacheId: string
  ) => string

  interface RenderComponent<P = {}, S = {}> extends Component<P, S> {
    getCustomMessages?: (locale: string) => any
    schema: ComponentSchema
    getSchema?: (a: any, b: ?any) => ComponentSchema
    uiSchema: UISchema
  }

  export interface ComponentsRegistry {
    [component: string]: RenderComponent<any, any>
  }

  export interface Window extends Window {
    __RENDER_7_COMPONENTS__: ComponentsRegistry
  }

  let global: Window
}

```


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

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

[Assistant]
Here's the implementation:

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

```


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

[User] Show me the implementation of breadcrumb/react/components/BaseBreadcrumb.tsx from the breadcrumb VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Fragment, useMemo } from 'react'
import unorm from 'unorm'
import { useIntl } from 'react-intl'
import { Link } from 'vtex.render-runtime'
import { useCssHandles, applyModifiers } from 'vtex.css-handles'
import { IconCaret, IconHome } from 'vtex.store-icons'
import { useDevice } from 'vtex.device-detector'

const CSS_HANDLES = [
  'container',
  'link',
  'homeLink',
  'arrow',
  'term',
  'termArrow',
] as const

export interface NavigationItem {
  name: string
  href: string
}

export interface Props {
  term?: string
  /** Shape [ '/Department' ,'/Department/Category'] */
  categories: string[]
  categoryTree?: NavigationItem[]
  breadcrumb?: NavigationItem[]
  showOnMobile?: boolean
  homeIconSize?: number
  caretIconSize?: number
}

const makeLink = (str: string) =>
  unorm
    .nfd(str)
    .toLowerCase()
    .replace(/[\u0300-\u036f]/g, '')
    .trim()
    .replace(/[-\s]+/g, '-')

const getCategoriesList = (categories: string[]): NavigationItem[] => {
  const categoriesSorted = categories
    .slice()
    .sort((a, b) => a.length - b.length)

  return categoriesSorted.map((category) => {
    const categoryStripped = category.replace(/^\//, '').replace(/\/$/, '')
    const currentCategories = categoryStripped.split('/')
    const [categoryKey] = currentCategories.reverse()
    const linkCompletion = currentCategories.length === 1 ? '/d' : ''
    const href = `/${makeLink(categoryStripped)}${linkCompletion}`

    return {
      href,
      name: categoryKey,
    }
  })
}

/**
 * Breadcrumb Component.
 */
const Breadcrumb: React.FC<Props> = ({
  term,
  categories,
  categoryTree,
  breadcrumb,
  showOnMobile = false,
  homeIconSize = 26,
  caretIconSize = 8,
}) => {
  const intl = useIntl()
  const handles = useCssHandles(CSS_HANDLES)
  const { isMobile } = useDevice()
  const navigationList = useMemo(
    () => breadcrumb ?? categoryTree ?? getCategoriesList(categories),
    [breadcrumb, categories, categoryTree]
  )

  const linkBaseClasses = 'dib pv1 link ph2 c-muted-2 hover-c-link'
  const shouldBeRendered = (showOnMobile && isMobile) || !isMobile

  if (!navigationList.length || !shouldBeRendered) {
    return null
  }

  return (
    <div data-testid="breadcrumb" className={`${handles.container} pv3`}>
      <Link
        className={`${handles.link} ${handles.homeLink} ${linkBaseClasses} v-mid`}
        page="store.home"
        aria-label={intl.formatMessage({
          id: 'store/breadcrumb.homeLink',
        })}
      >
        <IconHome size={homeIconSize} />
      </Link>
      {navigationList.map(({ name, href }, i) => {
        let decodedName = ''

        try {
          decodedName = decodeURIComponent(name)
        } catch {
          decodedName = name
        }

        return (
          <span
            key={`navigation-item-${i}`}
            className={`${applyModifiers(
              handles.arrow,
              (i + 1).toString()
            )} ph2 c-muted-2`}
          >
            <IconCaret orientation="right" size={caretIconSize} />
            <Link
              className={`${applyModifiers(
                handles.link,
                (i + 1).toString()
              )} ${linkBaseClasses}`}
              to={href}
              // See https://github.com/vtex-apps/breadcrumb/pull/66 for the reasoning behind this
              waitToPrefetch={1200}
            >
              {decodedName}
            </Link>
          </span>
        )
      })}

      {term && (
        <Fragment>
          <span
            className={`${handles.arrow} ${handles.termArrow} ph2 c-muted-2`}
          >
            <IconCaret orientation="right" size={caretIconSize} />
          </span>
          <span className={`${handles.term} ph2 c-on-base`}>{term}</span>
        </Fragment>
      )}
    </div>
  )
}

Breadcrumb.defaultProps = {
  categories: [],
}

export default Breadcrumb

```


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

[User] Show me the implementation of breadcrumb/react/__tests__/BreadCrumb.test.tsx from the breadcrumb VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { render } from '@vtex/test-tools/react'
import { useProduct } from 'vtex.product-context'

import Breadcrumb from '../Breadcrumb'
import { Props } from '../components/BaseBreadcrumb'

describe('<BreadCrumb /> component', () => {
  const defaultCategories = ['/Eletrônicos/Smartphones/', '/Eletrônicos/']
  const renderComponent = (customProps?: Partial<Props>) => {
    const props = {
      categories: defaultCategories,
      ...customProps,
    }

    return render(<Breadcrumb {...props} />)
  }

  it('should match the snapshot', () => {
    expect(renderComponent({ term: 'term' }).asFragment()).toMatchSnapshot()
  })

  it('should render links', () => {
    const { queryByText, asFragment } = renderComponent()

    expect(asFragment().querySelectorAll('a')).toHaveLength(3)
    expect(queryByText('eletrônicos')).toBeDefined()
    expect(queryByText('smartphones')).toBeDefined()
  })

  it('should render term', () => {
    const { rerender, queryByText } = renderComponent({
      term: 'term',
    })

    expect(queryByText('term')).toBeDefined()

    rerender(<Breadcrumb categories={defaultCategories} />)

    expect(queryByText('term')).toBeNull()
  })

  it('should render structured data', () => {
    useProduct.mockImplementationOnce(() => ({
      product: { linkText: 'classic-shoes' },
    }))

    const { getByText } = renderComponent({})

    expect(getByText('Structured Data')).toBeDefined()
  })
})

```


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

[User] Show me the implementation of breadcrumb/react/typings/vtex.search-page-context/SearchPageContext.d.ts from the breadcrumb VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.search-page-context/SearchPageContext' {
  export const useSearchPage: () => any
}

```


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

[User] Show me the implementation of breadcrumb/react/components/ProductBreadcrumb/index.tsx from the breadcrumb VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useContext } from 'react'
import { ProductContext } from 'vtex.product-context'
import { ProductBreadcrumb as ProductBreadcrumbStructuredData } from 'vtex.structured-data'

import BaseBreadcrumb, { Props, NavigationItem } from '../BaseBreadcrumb'

const withProductContextWrapper = (
  Component: React.ComponentType<Props>
): React.FC<Props> => (props) => {
  const { product } = useContext(ProductContext) || { product: null }
  const categoryTree: NavigationItem[] = product?.categoryTree
  const categories = product?.categories ?? []

  return (
    <>
      <ProductBreadcrumbStructuredData
        categoryTree={categoryTree}
        productName={product?.productName}
        productSlug={product?.linkText}
      />
      <Component
        term={product?.productName}
        categories={categories}
        categoryTree={categoryTree}
        breadcrumb={props.breadcrumb}
        showOnMobile={props.showOnMobile}
        homeIconSize={props.homeIconSize}
        caretIconSize={props.caretIconSize}
      />
    </>
  )
}

export default withProductContextWrapper(BaseBreadcrumb)

```


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

[User] Show me the implementation of breadcrumb/react/components/ProductBreadcrumb/README.md from the breadcrumb VTEX app.

[Assistant]
Here's the implementation:

```markdown
# VTEX Product Breadcrumb

This block (`breadcrumb.product`) is meant to be used inside your product page. It uses the Product Context and only fetches data from there.

It has the same props as the original `breadcrumb` block.

## Example usage

```
js
"store.product": {
  "children": ["breadcrumb.product"]
}
```

```


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

[User] Show me the implementation of breadcrumb/react/components/SearchBreadcrumb/index.tsx from the breadcrumb VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { useSearchPage } from 'vtex.search-page-context/SearchPageContext'
import { SearchBreadcrumb as SearchBreadcrumbStructuredData } from 'vtex.structured-data'

import BaseBreadcrumb, { NavigationItem } from '../BaseBreadcrumb'

interface Props {
  showOnMobile?: boolean
  homeIconSize?: number
  caretIconSize?: number
}

const SearchBreadcrumb: FC<Props> = ({
  showOnMobile,
  homeIconSize,
  caretIconSize,
}) => {
  const { searchQuery } = useSearchPage()
  const breadcrumb: NavigationItem[] =
    searchQuery?.data?.productSearch?.breadcrumb ??
    searchQuery?.data?.facets?.breadcrumb ??
    []

  return (
    <>
      <SearchBreadcrumbStructuredData breadcrumb={breadcrumb} />
      <BaseBreadcrumb
        breadcrumb={breadcrumb}
        showOnMobile={showOnMobile}
        categories={[]} // unused prop, its OK
        homeIconSize={homeIconSize}
        caretIconSize={caretIconSize}
      />
    </>
  )
}

export default SearchBreadcrumb

```


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

[User] Show me the implementation of breadcrumb/react/components/SearchBreadcrumb/README.md from the breadcrumb VTEX app.

[Assistant]
Here's the implementation:

```markdown
# VTEX Search Breadcrumb

This block (`breadcrumb.search`) is meant to be used inside your search page. It uses the Search Page Context and only fetches data from there.

It has the same props as the original `breadcrumb` block.

## Example usage

```
js
"search-result-layout.desktop": {
  "children": ["breadcrumb.search"]
}
```

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "editor.multisite.title"                     : "Multisitio",
  "editor.multisite.description"               : "Componente de Multisitio",
  "editor.multisite.navigation.name1"          : "Primeiro nome de navegação",
  "editor.multisite.navigation.default"        : "Nome",
  "editor.multisite.navigation.value1"         : "Primeiro parâmetro ID",
  "editor.multisite.navigation.name2"          : "Segundo nome de navegação",
  "editor.multisite.navigation.value2"         : "Segundo parâmetro ID",
  "editor.multisite.navigation.name3"          : "Terceiro nome de navegação",
  "editor.multisite.navigation.value3"         : "Terceiro parâmetro ID",
  "editor.image.src.title"                     : "Src",
  "editor.image.alt.title"                     : "Alt",
  "editor.image.title.title"                   : "Título"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "editor.multisite.title"                     : "Multisite",
  "editor.multisite.description"               : "Multisite component",
  "editor.multisite.navigation.name1"          : "First navigation name",
  "editor.multisite.navigation.default"        : "Name",
  "editor.multisite.navigation.value1"         : "First parameter ID",
  "editor.multisite.navigation.name2"          : "Second navigation name",
  "editor.multisite.navigation.value2"         : "Second parameter ID",
  "editor.multisite.navigation.name3"          : "Third navigation name",
  "editor.multisite.navigation.value3"         : "Third parameter ID",
  "editor.image.src.title"                     : "Src",
  "editor.image.alt.title"                     : "Alt",
  "editor.image.title.title"                   : "Title"
}
```


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

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

[Assistant]
Here's the implementation:

```json
{
  "editor.multisite.title"                     : "Multisite",
  "editor.multisite.description"               : "Multisite component",
  "editor.multisite.navigation.name1"          : "First navigation name",
  "editor.multisite.navigation.default"        : "Name",
  "editor.multisite.navigation.value1"         : "First parameter ID",
  "editor.multisite.navigation.name2"          : "Second navigation name",
  "editor.multisite.navigation.value2"         : "Second parameter ID",
  "editor.multisite.navigation.name3"          : "Third navigation name",
  "editor.multisite.navigation.value3"         : "Third parameter ID",
  "editor.image.src.title"                     : "Src",
  "editor.image.alt.title"                     : "Alt",
  "editor.image.title.title"                   : "Title"
}
```


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

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

[Assistant]
Here's the implementation:

```json
{
  "editor.multisite.title"                     : "Multisitio",
  "editor.multisite.description"               : "Componente Multisitio",
  "editor.multisite.navigation.name1"          : "Primer nombre de la navegación",
  "editor.multisite.navigation.default"        : "Nombre",
  "editor.multisite.navigation.value1"         : "Primer ID de parametro",
  "editor.multisite.navigation.name2"          : "Segundo nombre de la navegación",
  "editor.multisite.navigation.value2"         : "Segundo ID de parametro",
  "editor.multisite.navigation.name3"          : "Tercer nombre de la navegación",
  "editor.multisite.navigation.value3"         : "Tercer ID de parametro",
  "editor.image.src.title"                     : "Src",
  "editor.image.alt.title"                     : "Alt",
  "editor.image.title.title"                   : "Título"
}
```


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

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

[Assistant]
Here's the implementation:

```markdown
# VTEX Recommendation Resolver

This app is an implementation of the VTEX recommendation protocol for recommendation shelves that is defined by the schema GraphQL [recommendation-graphql](https://github.com/vtex-apps/recommendation-graphql).

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "stack": "nodejs",
  "memory": 256,
  "minReplicas": 3,
  "workers": 1,
  "ttl": 60
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "graphql": "^14.5.8",
    "graphql-tools": "^4.0.6",
    "vtex.search-segment-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-segment-graphql@0.1.0/public"
  },
  "devDependencies": {
    "@types/atob": "^2.1.2",
    "@types/node": "^12.0.0",
    "@vtex/api": "6.45.12",
    "@vtex/prettier-config": "^0.1.3",
    "eslint": "^6.8.0",
    "eslint-config-vtex": "^12.2.1",
    "husky": "^4.2.0",
    "lint-staged": "^10.0.2",
    "prettier": "^1.19.1",
    "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",
    "vtex.messages": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.messages@1.65.0/public/@types/vtex.messages",
    "vtex.native-types": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.native-types@0.8.0/public/@types/vtex.native-types",
    "vtex.search-segment-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-segment-graphql@0.1.1/public/@types/vtex.search-segment-graphql",
    "vtex.search-session": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-session@0.2.10/public/_types/react",
    "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.152.0/public/@types/vtex.store-graphql",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.1/public/@types/vtex.styleguide"
  },
  "version": "0.1.4"
}

```


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

[User] Show me the implementation of pocfamiliabercomat-multifront/node/global.ts from the pocfamiliabercomat-multifront VTEX app.

[Assistant]
Here's the implementation:

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

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

declare global {
  type Context = ServiceContext<Clients, RecorderState, CustomContext>

  interface CustomContext extends ParamsContext {
    vtex: CustomIOContext
  }
  interface CustomIOContext extends IOContext {
    segment?: SegmentData
  }

  interface SearchSegmentInput {
    userEmail?: string
    isAuthenticated?: boolean
    selectedFacets?: SelectedFacet[]
  }

  interface SelectedFacet {
    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 pocfamiliabercomat-multifront/node/index.ts from the pocfamiliabercomat-multifront VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { Service, RecorderState, ParamsContext } from '@vtex/api'
import schema from 'vtex.search-segment-graphql/graphql'

import { Clients, clients } from './clients'
import { queries as segmentSearchQueries } from './resolvers/segmentSearch'

export default new Service<Clients, RecorderState, ParamsContext>({
  clients,
  graphql: {
    resolvers: {
      Query: {
        ...segmentSearchQueries,
      },
    },
    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 pocfamiliabercomat-multifront/react/package.json from the pocfamiliabercomat-multifront 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",
    "classnames": "^2.2.6",
    "ramda": "^0.26.1",
    "react": "^16.12.0",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.12.0",
    "react-intl": "^3.12.0"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/atob": "^2.1.2",
    "@types/classnames": "^2.2.7",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.7.5",
    "@types/prop-types": "^15.7.0",
    "@types/ramda": "^0.26.5",
    "@types/react": "^16.9.31",
    "@vtex/test-tools": "^3.3.2",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.5.1",
    "graphql": "^14.6.0",
    "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",
    "vtex.messages": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.messages@1.65.0/public/@types/vtex.messages",
    "vtex.native-types": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.native-types@0.8.0/public/@types/vtex.native-types",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime",
    "vtex.search-segment-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-segment-graphql@0.1.1/public/@types/vtex.search-segment-graphql",
    "vtex.search-session": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-session@0.2.10/public/_types/react",
    "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.152.0/public/@types/vtex.store-graphql",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.1/public/@types/vtex.styleguide"
  }
}

```


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

[User] Show me the implementation of pocfamiliabercomat-multifront/react/ConditionalFrontBlock.tsx from the pocfamiliabercomat-multifront VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { FC } from "react";
import React from "react";

const ConditionalFrontBlock: FC<any> = ({
  frontValue,
  children
}) => {

  // obtenemos el código postal guardado en el local storage
  const storageCp = window?.localStorage?.getItem("CP") || "";
  const postalCode = parseInt(storageCp);

  console.log('postalCode', postalCode);

  // let conditionalFront = <></>;
  let id = 1; //aca valor default
  let condition = frontValue == id;
  let conditionalFront = <>{condition && children}</>;

  if (postalCode > 3500 && postalCode < 3790) {

    id = 2;
    let condition = frontValue == id;
    return conditionalFront = <>{condition && children}</>;

  } else if (postalCode > 4000 && postalCode < 4242) {

    id = 3;
    let condition = frontValue == id;
    return conditionalFront = <>{condition && children}</>;

  } else {

    return conditionalFront;

  }
};

export default ConditionalFrontBlock;

```


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

[User] Show me the implementation of pocfamiliabercomat-multifront/store/contentSchemas.json from the pocfamiliabercomat-multifront VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "definitions": {
        "ConditionalFrontBlock": {
            "type": "object",
            "properties": {
                "segmentValue": {
                    "title": "segmentValue",
                    "type": "number",
                    "default": null
                }
            }
        }
    }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "conditionalFrontBlock": {
    "component": "ConditionalFrontBlock",
    "composition": "children",
    "content": {
      "$ref": "#/definitions/ConditionalFrontBlock"
    }
  }
}

```


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

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

[Assistant]
Here's the implementation:

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

const MEDIUM_TIMEOUT_MS = 2 * 1000

export class Clients extends IOClients {
  // Add client example
  // public get myClient(): ClientType {
  //   return this.getOrSet('myClient', ClientType)
  // }
}

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

```


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

[User] Show me the implementation of pocfamiliabercomat-multifront/node/typings/global.d.ts from the pocfamiliabercomat-multifront VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare const metrics

type GenericObject = Record<string, any>

```


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

[User] Show me the implementation of pocfamiliabercomat-multifront/node/resolvers/segmentSearch.ts from the pocfamiliabercomat-multifront VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const queries = {

  searchSegment: async (
    __: unknown,
    args: SearchSegmentInput,
    context: Context
  ) => {

    const { parameterValue } = await context.clients.apps.getAppSettings(
      `${process.env.VTEX_APP_ID}`
    )
    const parameter = 'productClustersId';

    if(args.isAuthenticated === true){
      const selectedFacets = args.selectedFacets || [];
      if (selectedFacets.length > 0){
        return [{ key: selectedFacets[0].key, value: selectedFacets[0].value }];
      }
    }

    return [{ key: parameter, value: parameterValue }];

  }
}
```


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

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

[Assistant]
Here's the implementation:

```typescript
import { 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 pocfamiliabercomat-multifront/react/typings/vtex.render-runtime.d.ts from the pocfamiliabercomat-multifront VTEX app.

[Assistant]
Here's the implementation:

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

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

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

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

  export const ExtensionPoint: ComponentType<ExtensionPointProps>

  interface ChildBlockProps {
    id: string
  }

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

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

```


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

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

[Assistant]
Here's the implementation:

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

export interface TimeSplit {
  hours: string
  minutes: string
  seconds: string
}

type GenericObject = Record<string, any>

```


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

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

[Assistant]
Here's the implementation:

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

```


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

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

[Assistant]
Here's the implementation:

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

  const value: DocumentNode
  export default value
}

```


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

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

[Assistant]
Here's the implementation:

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

  export const Input: ComponentType<InputProps>

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

```


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

[User] Show me the implementation of pocfamiliabercomat-multifront/react/utils/time.ts from the pocfamiliabercomat-multifront VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { TimeSplit } from '../typings/global'

const SECONDS_IN_MINUTE = 60
const SECONDS_IN_HOUR = 60 * SECONDS_IN_MINUTE

const fillWithZero = (digits: number, number: number): string => {
  const filled = `${'0'.repeat(digits - 1)}${number}`

  return filled.slice(filled.length - digits)
}

export const parseTimeRemaining = (totalSeconds: number): TimeSplit => {
  const hours = Math.floor(totalSeconds / SECONDS_IN_HOUR)
  const minutes = Math.floor(
    (totalSeconds % SECONDS_IN_HOUR) / SECONDS_IN_MINUTE
  )

  const seconds = Math.floor(
    (totalSeconds % SECONDS_IN_HOUR) % SECONDS_IN_MINUTE
  )

  return {
    hours: fillWithZero(2, hours),
    minutes: fillWithZero(2, minutes),
    seconds: fillWithZero(2, seconds),
  }
}

/**
 *
 * @param targetDate ISOString for the date that the countdown will expire
 * @param dispatchFn A function that updates the state of the component
 */
export const tick = (
  targetDate: string,
  dispatchFn: React.Dispatch<React.SetStateAction<TimeSplit>>
) => {
  const ONE_SECOND_IN_MILLIS = 1000
  const finalDate = new Date(targetDate)
  const now = new Date()

  const secondsLeft =
    (finalDate.getTime() - now.getTime()) / ONE_SECOND_IN_MILLIS

  setTimeout(() => {
    dispatchFn(parseTimeRemaining(secondsLeft))
  }, ONE_SECOND_IN_MILLIS)
}

export const getTwoDaysFromNow = () => {
  const today = new Date()

  today.setDate(today.getDate() + 2)

  return today.toISOString()
}

```


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

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

[Assistant]
Here's the implementation:

```css
.navigationLink {
    border: 1px solid transparent;
    background-color: transparent;
    color: rgba(150, 150, 150, 0.322);
    text-decoration: none;
    margin-right: .5rem;
    padding: .5rem 1.5rem;
    width: 150px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navigationLink:hover {
    border: 1px solid rgba(150, 150, 150, 0.322);
    cursor: pointer;
    transition: .3s all ease-in;
}

.active {
    border: 1px solid rgba(150, 150, 150, 0.322);
    color: rgba(44, 44, 44, 0.322);
    transition: .3s all ease-in;
}

.navigationLink img {
    width: 100%;
    height: auto;
}
```


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

[User] Show me the implementation of telemarketing/messages/id-ID.json from the telemarketing VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/telemarketing.attendant": "Staf: {attendant}",
  "store/telemarketing.client": "Klien",
  "store/telemarketing-login.message": "Masuk sebagai",
  "store/telemarketing-login.button": "Masuk",
  "store/telemarketing-logout.button": "Keluar",
  "store/telemarketing-logout.document-label": "Dokumen",
  "store/telemarketing-logout.phone-label": "Telepon",
  "store/telemarketing-logout.button-orders": "Pesanan"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/telemarketing.attendant": "Atendente: {attendant}",
  "store/telemarketing.client": "Cliente",
  "store/telemarketing-login.message": "Entrar como cliente",
  "store/telemarketing-login.button": "Entrar",
  "store/telemarketing-logout.button": "Sair",
  "store/telemarketing-logout.document-label": "Documento",
  "store/telemarketing-logout.phone-label": "Telefone",
  "store/telemarketing-logout.button-orders": "Pedidos"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/telemarketing.attendant": "المنتظرون: {attendant}",
  "store/telemarketing.client": "العميل",
  "store/telemarketing-login.message": "تسجيل الدخول كـ",
  "store/telemarketing-login.button": "تسجيل الدخول",
  "store/telemarketing-logout.button": "تسجيل الخروج",
  "store/telemarketing-logout.document-label": "المستند",
  "store/telemarketing-logout.phone-label": "رقم الهاتف",
  "store/telemarketing-logout.button-orders": "طلباتي"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/telemarketing.attendant": "Attendant: {attendant}",
  "store/telemarketing.client": "Client",
  "store/telemarketing-login.message": "Login as",
  "store/telemarketing-login.button": "Login",
  "store/telemarketing-logout.button": "Logout",
  "store/telemarketing-logout.document-label": "Document",
  "store/telemarketing-logout.phone-label": "Phone",
  "store/telemarketing-logout.button-orders": "Orders"
}

```


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

[User] Show me the implementation of telemarketing/messages/no-NO.json from the telemarketing VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/telemarketing.attendant": "Deltaker: {attendant}",
  "store/telemarketing.client": "Klient",
  "store/telemarketing-login.message": "Logg inn som",
  "store/telemarketing-login.button": "Logg inn",
  "store/telemarketing-logout.button": "Logg ut",
  "store/telemarketing-logout.document-label": "Dokument",
  "store/telemarketing-logout.phone-label": "Telefon",
  "store/telemarketing-logout.button-orders": "Bestillinger"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/telemarketing.attendant": "store/telemarketing.attendant",
  "store/telemarketing.client": "store/telemarketing.client",
  "store/telemarketing-login.message": "store/telemarketing-login.message",
  "store/telemarketing-login.button": "store/telemarketing-login.button",
  "store/telemarketing-logout.button": "store/telemarketing-logout.button",
  "store/telemarketing-logout.document-label": "store/telemarketing-logout.document-label",
  "store/telemarketing-logout.phone-label": "store/telemarketing-logout.phone-label",
  "store/telemarketing-logout.button-orders": "store/telemarketing-logout.button-orders"
}
```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/telemarketing.attendant": "Asistente: {attendant}",
  "store/telemarketing.client": "Cliente",
  "store/telemarketing-login.message": "Ingresá como cliente",
  "store/telemarketing-login.button": "Ingresá",
  "store/telemarketing-logout.button": "Salir",
  "store/telemarketing-logout.document-label": "Documento",
  "store/telemarketing-logout.phone-label": "Teléphono",
  "store/telemarketing-logout.button-orders": "Pedidos"
}

```