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

[User] Show me the implementation of store-components/react/__tests__/components/Logo.test.js from the store-components VTEX app.

[Assistant]
Here's the implementation:

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

import Logo from '../../Logo'

describe('<Logo /> component', () => {
  const renderComponent = customProps => {
    const props = {
      title: 'title',
      ...customProps,
    }

    const comp = <Logo {...props} />

    return render(comp)
  }

  it('should match snapshot with link', () => {
    const { asFragment } = renderComponent({ href: 'http://logotest.test' })

    expect(asFragment()).toMatchSnapshot()
  })

  it('should match snapshot without link', () => {
    const { asFragment } = renderComponent()

    expect(asFragment()).toMatchSnapshot()
  })

  it('should match snapshot with url', () => {
    const { asFragment } = renderComponent({ url: 'http://logourl.test' })

    expect(asFragment()).toMatchSnapshot()
  })
})

```


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

[User] Show me the implementation of store-components/react/__tests__/components/BuyButton.test.js from the store-components VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import { fireEvent, waitFor, render } from '@vtex/test-tools/react'

import BuyButton from '../../BuyButton'
import addToCartMutation from '../../components/BuyButton/mutations/addToCart.gql'

const mocks = [
  {
    request: {
      query: addToCartMutation,
      variables: { items: [] },
    },
    result: {
      data: {
        addToCart: {},
      },
    },
  },
]

describe('<BuyButton />', () => {
  const renderComponent = (customProps, text = 'Test') => {
    const props = {
      available: true,
      ...customProps,
    }

    return render(<BuyButton {...props}>{text}</BuyButton>, {
      graphql: { mocks },
    })
  }

  it('should be rendered', async () => {
    const { asFragment } = renderComponent()

    await waitFor(() => {})
    expect(asFragment()).toBeDefined()
    expect(asFragment()).toBeTruthy()
  })

  it('should match snapshot normal', async () => {
    const { asFragment } = renderComponent({ available: true, skuItems: [] })

    await waitFor(() => {})
    expect(asFragment()).toMatchSnapshot()
  })

  it('should match snapshot unavailable', async () => {
    const { asFragment } = renderComponent({ available: false, skuItems: [] })

    await waitFor(() => {})
    expect(asFragment()).toMatchSnapshot()
  })

  it('should match snapshot loading', async () => {
    const { asFragment } = renderComponent({ available: false })

    await waitFor(() => {})
    expect(asFragment()).toMatchSnapshot()
  })

  it('should call onAddStart and onAddFinish', async () => {
    const onAddStart = jest.fn()
    const onAddFinish = jest.fn()

    const buttonText = 'Add to cart'

    const { getByText } = renderComponent(
      {
        available: true,
        skuItems: [],
        onAddStart,
        onAddFinish,
      },
      buttonText
    )

    await waitFor(() => {
      fireEvent.click(getByText(buttonText))
    })

    const assertions = () => {
      expect(onAddStart).toBeCalledTimes(1)
      expect(onAddFinish).toBeCalledTimes(1)
    }

    expect.assertions(assertions)
  })

  // eslint-disable-next-line jest/expect-expect
  it('should show items prices', async () => {
    const skuItems = [
      {
        skuId: '1',
        quantity: 2,
        seller: '1',
        name: 'Item',
        brand: 'fo',
        price: 100,
        options: [
          { assemblyId: '1', id: '2', quantity: 2, seller: '1' },
          { assemblyId: '1', id: '3', quantity: 1, seller: '1' },
        ],
        assemblyOptions: {
          added: [
            {
              normalizedQuantity: 2,
              extraQuantity: 2,
              choiceType: 'MULTIPLE',
              item: {
                name: 'Assembly One',
                sellingPrice: 5,
                quantity: 2,
                id: '1',
                sellingPriceWithAssemblies: 6,
                assemblyOptions: {
                  added: [
                    {
                      item: {
                        sellingPrice: 1,
                        id: '3',
                        quantity: 1,
                        name: 'Recursive',
                        sellingPriceWithAssemblies: 1,
                      },
                    },
                  ],
                },
              },
            },
            {
              normalizedQuantity: 1,
              extraQuantity: 1,
              choiceType: 'MULTIPLE',
              item: {
                name: 'Assembly Two',
                sellingPrice: 3,
                quantity: 1,
                id: '2',
                sellingPriceWithAssemblies: 3,
              },
            },
          ],
          removed: [],
          parentPrice: 100,
        },
        sellingPriceWithAssemblies: 115,
      },
    ]

    const { getByText } = renderComponent(
      {
        available: true,
        skuItems,
        showItemsPrice: true,
      },
      null
    )

    const priceRegex = /230.00/

    await waitFor(() => {})
    getByText(priceRegex)
  })
})

```


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

[User] Show me the implementation of store-components/react/__tests__/components/Animation.test.js from the store-components VTEX app.

[Assistant]
Here's the implementation:

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

import Animation from '../../Animation'

describe('<Animation /> component', () => {
  const renderComponent = customProps => {
    const comp = <Animation {...customProps}> Test </Animation>

    return render(comp)
  }

  it('should be rendered', () => {
    const { asFragment } = renderComponent()

    expect(asFragment()).toBeTruthy()
  })

  it('should match snapshot animation left', () => {
    const { asFragment } = renderComponent()

    expect(asFragment()).toMatchSnapshot()
  })

  it('should match snapshot animation right', () => {
    const { asFragment } = renderComponent({ type: 'drawerRight' })

    expect(asFragment()).toMatchSnapshot()
  })

  it('should match snapshot animation top', () => {
    const { asFragment } = renderComponent({ type: 'drawerTop' })

    expect(asFragment()).toMatchSnapshot()
  })

  it('should match snapshot animation bottom', () => {
    const { asFragment } = renderComponent({ type: 'drawerBottom' })

    expect(asFragment()).toMatchSnapshot()
  })
})

```


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

[User] Show me the implementation of store-components/react/__tests__/components/ProductName.test.js from the store-components VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import { render } from '@vtex/test-tools/react'
import PropTypes from 'prop-types'

import ProductName from '../../ProductName'

describe('<ProductName />', () => {
  const defaultProps = {
    loaderClass: '',
    name: 'ProductTest',
  }

  const context = { culture: { currency: 'USD' } }

  const renderComponent = customProps => {
    const props = {
      ...defaultProps,
      ...customProps,
    }

    return render(<ProductName {...props} />, {
      context,
      childContextTypes: {
        culture: PropTypes.object,
      },
    })
  }

  it('should be mounted', () => {
    const { asFragment } = renderComponent()

    expect(asFragment()).toBeDefined()
  })

  it('should match the snapshot with only Name', () => {
    const { asFragment } = renderComponent()

    expect(asFragment()).toMatchSnapshot()
  })

  it('should match the snapshot with Name and SkuName', () => {
    const { asFragment } = renderComponent({
      skuName: 'ProductSkuName',
      showSku: true,
    })

    expect(asFragment()).toMatchSnapshot()
  })

  it('should match the snapshot with Name and Brand', () => {
    const { asFragment } = renderComponent({
      brandName: 'ProductBrandName',
      showBrandName: true,
    })

    expect(asFragment()).toMatchSnapshot()
  })

  it('should match the snapshot with Name and Product Reference', () => {
    const { asFragment } = renderComponent({
      productReference: 'productReferenceTest',
      showProductReference: true,
    })

    expect(asFragment()).toMatchSnapshot()
  })

  it('should match the snapshot with Name and Sponsored Badge', () => {
    const { asFragment } = renderComponent({
      sponsoredBadgeLabel: 'sponsoredBadgeTest',
      showSponsoredBadge: true,
    })

    expect(asFragment()).toMatchSnapshot()
  })

  it('should match the snapshot with all options', () => {
    const { asFragment } = renderComponent({
      skuName: 'ProductSkuName',
      showSku: true,
      brandName: 'ProductBrandName',
      showBrandName: true,
      productReference: 'productReferenceTest',
      showProductReference: true,
    })

    expect(asFragment()).toMatchSnapshot()
  })

  it('should match the snapshot Loader', () => {
    const { asFragment } = renderComponent({ name: undefined })

    expect(asFragment()).toMatchSnapshot()
  })
})

```


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

[User] Show me the implementation of store-components/react/__tests__/components/AvailabilitySubscriber.test.js from the store-components VTEX app.

[Assistant]
Here's the implementation:

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

import AvailabilitySubscriber from '../../AvailabilitySubscriber'

describe('<AvailabilitySubscriber />', () => {
  function renderComponent(customProps = {}) {
    const props = {
      skuId: '111111',
      available: false,
      ...customProps,
    }

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

  it('should be able to mount and not break', () => {
    const { asFragment } = renderComponent()

    expect(asFragment()).toBeTruthy()
  })

  it('should match snapshot', () => {
    const { asFragment } = renderComponent()

    expect(asFragment()).toMatchSnapshot()
  })
})

```


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

[User] Show me the implementation of store-components/react/__tests__/hooks/useMarketingSessionParams.test.js from the store-components VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { renderHook, act } from '@testing-library/react-hooks'

import useMarketingSessionParams from '../../components/BuyButton/hooks/useMarketingSessionParams'

const fakeSessionWithData = {
  response: {
    namespaces: {
      public: {
        utm_source: {
          value: 'utmSource',
        },
        utm_medium: {
          value: 'utmMedium',
        },
        utm_campaign: {
          value: 'utmCampaign',
        },
        utmi_cp: {
          value: 'utmiCampaign',
        },
        utmi_p: {
          value: 'utmiPage',
        },
        utmi_pc: {
          value: 'utmiPart',
        },
      },
    },
  },
}

const fakeSessionNoData = {
  response: {
    namespaces: {
      public: {},
    },
  },
}

test('if session has correct data, get and format input correctly', async () => {
  window.__RENDER_8_SESSION__ = {}
  window.__RENDER_8_SESSION__.sessionPromise = new Promise(resolve =>
    resolve(fakeSessionWithData)
  )
  const { result } = renderHook(() => useMarketingSessionParams())

  // eslint-disable-next-line no-return-await
  await act(async () => await Promise.resolve())

  const { utmParams, utmiParams } = result.current

  expect(utmParams).toMatchObject({
    source: 'utmSource',
    medium: 'utmMedium',
    campaign: 'utmCampaign',
  })
  expect(utmiParams).toMatchObject({
    campaign: 'utmiCampaign',
    page: 'utmiPage',
    part: 'utmiPart',
  })
})

test('if session does not have data, leave object as undefined', async () => {
  window.__RENDER_8_SESSION__ = {}
  window.__RENDER_8_SESSION__.sessionPromise = new Promise(resolve =>
    resolve(fakeSessionNoData)
  )
  const { result } = renderHook(() => useMarketingSessionParams())

  // eslint-disable-next-line no-return-await
  await act(async () => await Promise.resolve())

  const { utmParams, utmiParams } = result.current

  expect(utmParams).toBeUndefined()
  expect(utmiParams).toBeUndefined()
})

test('if session promise rejects, everything still works, response is undefined', async () => {
  window.__RENDER_8_SESSION__ = {}
  window.__RENDER_8_SESSION__.sessionPromise = new Promise((_, reject) =>
    reject()
  )
  const { result } = renderHook(() => useMarketingSessionParams())

  // eslint-disable-next-line no-return-await
  await act(async () => await Promise.resolve())

  const { utmParams, utmiParams } = result.current

  expect(utmParams).toBeUndefined()
  expect(utmiParams).toBeUndefined()
})

```


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

[User] Show me the implementation of store-components/react/__tests__/hooks/useEffectkSkipMount.test.ts from the store-components VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { renderHook } from '@vtex/test-tools/react'

import useEffectSkipMount from '../../components/SKUSelector/components/hooks/useEffectSkipMount'

test('ensure that function wont be called on first render', () => {
  const fakeFn = jest.fn()
  const deps = ['a']
  const { rerender } = renderHook(() => useEffectSkipMount(fakeFn, deps))

  expect(fakeFn).toBeCalledTimes(0)
  rerender()
  expect(fakeFn).toBeCalledTimes(0)
})

test('ensure that after prop changes, provided function is called', () => {
  const fakeFn = jest.fn()
  const { rerender } = renderHook(
    ({ deps }) => useEffectSkipMount(fakeFn, deps),
    {
      initialProps: {
        deps: ['a'],
      },
    }
  )

  expect(fakeFn).toBeCalledTimes(0)
  rerender({ deps: ['b'] })
  expect(fakeFn).toBeCalledTimes(1)
})

```


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

[User] Show me the implementation of store-components/react/__tests__/hooks/useCommercialOffer.test.tsx from the store-components VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { renderHook } from '@vtex/test-tools/react'
import { ProductContextState } from 'vtex.product-context/react/ProductTypes'

import { useCommercialOffer } from '../../utils/useCommercialOffer'

let mockEnableDefaultSeller = true

jest.mock('vtex.render-runtime', () => {
  return {
    useRuntime: jest.fn(() => ({
      getSettings() {
        return {
          enableDefaultSeller: mockEnableDefaultSeller,
        }
      },
    })),
  }
})

const ctx = {
  selectedItem: {
    sellers: [
      {
        sellerDefault: false,
        commertialOffer: 1000,
      },
      {
        sellerDefault: true,
        commertialOffer: 2000,
      },
    ],
  },
} as unknown as Partial<ProductContextState>

test('Should return the commercial offer from the defaultSeller', () => {
  const { result } = renderHook(() => useCommercialOffer(ctx))

  expect(result.current).toBe(2000)
})

test('Should return the commercial offer from the first seller', () => {
  mockEnableDefaultSeller = false
  const { result } = renderHook(() => useCommercialOffer(ctx))

  expect(result.current).toBe(1000)
})

```


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

[User] Show me the implementation of store-components/react/__tests__/modules/sanitizedHTML.test.tsx from the store-components VTEX app.

[Assistant]
Here's the implementation:

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

import { SanitizedHTML } from '../../components/SanitizedHTML'

test('renders a simple string', () => {
  const { container } = render(<SanitizedHTML content="Potato" />)

  expect(container.firstChild).toMatchInlineSnapshot(`
    <div
      style="display: contents;"
    >
      Potato
    </div>
  `)
})

test('filters out script tags', () => {
  const { container } = render(
    <SanitizedHTML content="<script>console.log('potato')</script><h1>Hey</h1>" />
  )

  expect(container.firstChild).toMatchInlineSnapshot(`
    <div
      style="display: contents;"
    >
      <h1>
        Hey
      </h1>
    </div>
  `)
})

test('filters out attributes', () => {
  const { container } = render(
    <SanitizedHTML
      allowedAttributes={{ h1: ['potato'] }}
      content={`<h1 potato="🥔" fruit="🍎">Hey</h1>`}
    />
  )

  expect(container.firstChild).toMatchInlineSnapshot(`
    <div
      style="display: contents;"
    >
      <h1
        potato="🥔"
      >
        Hey
      </h1>
    </div>
  `)
})

test('filters out classes', () => {
  const { container } = render(
    <SanitizedHTML
      allowedClasses={{ h1: ['🥔', '🍇'] }}
      content={`<h1 class="🥔 🍎 🍇">Hey</h1>`}
    />
  )

  expect(container.firstChild).toMatchInlineSnapshot(`
    <div
      style="display: contents;"
    >
      <h1
        class="🥔 🍎 🍇"
      >
        Hey
      </h1>
    </div>
  `)
})

test('filters out tags', () => {
  const { container } = render(
    <SanitizedHTML
      allowedTags={['h1', 'h3']}
      content={`<h1>Hey</h1><h2>Ho</h2><h3>Let's go</h3>`}
    />
  )

  expect(container.firstChild).toMatchInlineSnapshot(`
    <div
      style="display: contents;"
    >
      <h1>
        Hey
      </h1>
      <h3>
        Let's go
      </h3>
    </div>
  `)
})

test('renders iframes', () => {
  const { container } = render(
    <SanitizedHTML
      content={`<iframe src="https://player.vimeo.com/video/402279141" frameborder="0"
      allow="autoplay; fullscreen" allowfullscreen="" style="position: relative; height: 200px; width: 100%;"></iframe>`}
    />
  )

  expect(container.firstChild).toMatchInlineSnapshot(`
    <div
      style="display: contents;"
    >
      <iframe
        allow="autoplay; fullscreen"
        allowfullscreen=""
        frameborder="0"
        src="https://player.vimeo.com/video/402279141"
        style="position: relative; height: 200px; width: 100%;"
      />
    </div>
  `)
})

test('renders divs and spans with classes, styles and ids', () => {
  const { container } = render(
    <SanitizedHTML
      content={`<div id="the-potato" class="🥔">potato</div><span style="font-size: 22px;">big 🥔</span>`}
    />
  )

  expect(container.firstChild).toMatchInlineSnapshot(`
    <div
      style="display: contents;"
    >
      <div
        class="🥔"
        id="the-potato"
      >
        potato
      </div>
      <span
        style="font-size: 22px;"
      >
        big 🥔
      </span>
    </div>
  `)
})

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "editor.base-store-component.title": "IO Base App",
  "editor.base-store-component.description": "Um componente de demonstração para apps do VTEX IO",
  "editor.base-store-component.title.title": "Título",
  "editor.base-store-component.title.description": "Especifique um título personalizado",
  "base.title": "Olá, Mundo!!",
  "base.change-value": "Troque seu valor: {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 checkout-old/messages/en.json from the checkout-old VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "editor.base-store-component.title": "IO Base App",
  "editor.base-store-component.description": "A demo component for IO apps",
  "editor.base-store-component.title.title": "Title",
  "editor.base-store-component.title.description": "Specify a custom title",
  "base.title": "Hello, World!!",
  "base.change-value": "Change your value: {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 checkout-old/messages/context.json from the checkout-old VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "editor.base-store-component.title": "Title of IO Base App component",
  "editor.base-store-component.description": "Description of IO Base App component",
  "editor.base-store-component.title.title": "Title of title property",
  "editor.base-store-component.title.description": "Description of title property",
  "base.title": "Base title message to be shown when title is not provided via CMS",
  "base.change-value": "Text to be shown beside input component typed 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 checkout-old/messages/es.json from the checkout-old VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "editor.base-store-component.title": "IO Base App",
  "editor.base-store-component.description": "Un componente de demostración para aplicaciones IO.",
  "editor.base-store-component.title.title": "Título",
  "editor.base-store-component.title.description": "Especifique un título personalizado",
  "base.title": "¡Hola Mundo!",
  "base.change-value": "Cambia tu valor: {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 checkout-old/react/HomeWrapper.js from the checkout-old VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { useMemo } from 'react'
import PropTypes from 'prop-types'
import { useRuntime } from 'vtex.render-runtime'

import useDataPixel from './hooks/useDataPixel'

const HomeWrapper = ({ children }) => {
  const { account } = useRuntime()

  const pixelEvents = useMemo(
    () =>
      typeof document !== 'undefined' && {
        event: 'pageInfo',
        eventType: 'homeView',
        accountName: account,
        pageTitle: document.title,
        pageUrl: location.href,
        pageCategory: 'Home',
      },
    [account]
  )

  useDataPixel(pixelEvents)

  return children
}

HomeWrapper.propTypes = {
  children: PropTypes.element,
}

export default HomeWrapper
```


[System] You are an expert VTEX IO developer. You specialize 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-old/react/package.json from the checkout-old VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test",
    "lint": "tsc --noEmit && eslint --ext ts,tsx ."
  },
  "dependencies": {
    "@vtex/css-handles": "^1.0.0",
    "classnames": "^2.2.6",
    "ramda": "^0.26.1",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-intl": "^2.7.2"
  },
  "devDependencies": {
    "@types/classnames": "^2.2.7",
    "@types/graphql": "^14.2.0",
    "@types/jest": "^24.0.11",
    "@types/node": "^11.13.0",
    "@types/prop-types": "^15.7.0",
    "@types/ramda": "^0.26.5",
    "@types/react": "^16.8.10",
    "@types/react-intl": "^2.3.17",
    "@vtex/test-tools": "^0.2.0",
    "apollo-client": "^2.5.1",
    "eslint": "^5.16.0",
    "eslint-config-vtex-react": "^4.1.0",
    "prettier": "^1.18.2",
    "tslint-eslint-rules": "^5.4.0",
    "typescript": "3.5.2"
  }
}

```


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

[User] Show me the implementation of checkout-old/store/blocks.json from the checkout-old VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.checkout.cart": {
    "blocks": ["checkout-cart"]
  }
}
```


[System] You are an expert VTEX IO developer. You specialize 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-old/store/interfaces.json from the checkout-old VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.checkout": {
    "allowConditions": true,
    "component": "*",
    "before": ["header.full"],
    "after": ["footer", "pixels"],
    "preview": {
      "type": "transparent",
      "height": 600
    }
  },
  "store.checkout.cart": {
    "around": ["homeWrapper"],
    "allowed": ["checkout-cart"],
    "preview": {
      "type": "box",
      "height": 1400
    }
  }
}
```


[System] You are an expert VTEX IO developer. You specialize 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-old/store/routes.json from the checkout-old VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.checkout.cart": {
    "path": "/cart/"
  }
}

```


[System] You are an expert VTEX IO developer. You specialize 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-old/react/typings/storefront.d.ts from the checkout-old VTEX app.

[Assistant]
Here's the implementation:

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

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

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

```


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

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

[Assistant]
Here's the implementation:

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

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

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

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

  export const ExtensionPoint: ComponentType<ExtensionPointProps>

  interface ChildBlockProps {
    id: string
  }

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

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

```


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

[User] Show me the implementation of checkout-old/react/typings/css.d.ts from the checkout-old 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 checkout-old/react/typings/graphql.d.ts from the checkout-old 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 checkout-old/react/typings/vtex.styleguide.d.ts from the checkout-old 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 checkout-old/react/components/TranslatedTitle.tsx from the checkout-old VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FunctionComponent } from 'react'
import { FormattedMessage } from 'react-intl'

// The b-s token makes the `b` class be applied only on mobile devices.
const TranslatedTile: FunctionComponent<TranslatedTileProps> = ({ title }) => {
  const titleText = title || <FormattedMessage id="base.title" />
  return (
    <div className="flex flex-grow-1 justify-center b-s">
      <span className="t-heading-4">{titleText}</span>
    </div>
  )
}

interface TranslatedTileProps {
  title?: string
}

export default TranslatedTile

```


[System] You are an expert VTEX IO developer. You specialize 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-old/react/hooks/useDataPixel.js from the checkout-old VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { useEffect, useRef } from 'react'
import { usePixel } from 'vtex.pixel-manager/PixelContext'

const useDataPixel = (data, isLoading = false) => {
  const { push } = usePixel()
  const prevLoadingRef = useRef(true)

  useEffect(() => {
    if (prevLoadingRef.current && !isLoading) {
      if (!data) {
        return
      }

      if (Array.isArray(data)) {
        data.forEach(event => push(event))
      } else {
        push(data)
      }
    }

    prevLoadingRef.current = isLoading
  }, [data, isLoading, push])
}

export default useDataPixel

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.stack-layout.title": "Pilha",
  "admin/editor.stack-layout.description": "Componente usado para colocar blocos um sobre os outros",
  "store/stack-layout.aria-label": "Seção flutuante"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.stack-layout.title": "Stack Layout",
  "admin/editor.stack-layout.description": "Component used to put blocks over each other",
  "store/stack-layout.aria-label": "Floating section"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.stack-layout.title": "Title of Stack Layout",
  "admin/editor.stack-layout.description": "Description of the Stack Layout component",
  "store/stack-layout.aria-label": "Floating section"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.stack-layout.title": "Pila",
  "admin/editor.stack-layout.description": "Componente utilizado para colocar bloques uno encima del otro",
  "store/stack-layout.aria-label": "Sección flotante"
}

```


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

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

[Assistant]
Here's the implementation:

```markdown
# Stack Layout

Use this layout component to show blocks on top of other blocks.

![](https://user-images.githubusercontent.com/27777263/70265324-e55fda00-1778-11ea-8d56-e73e3848b0b3.png)

Each child passed to `stack-layout` will receive an increasingly higher value of `zIndex`.

This means `flex-layout.row#viewone` will appear on the bottom, `flex-layout.row#viewtwo` will appear over it with `zIndex` of value 2, and `flex-layout.row#viewthree` will appear over them both with `zIndex` of value 3. Another thing to notice is that if you pass the `blockClass` prop to any children of the `stack-layout`, it will apply the `blockClass` to the element that wraps the child element.

## Configuration

1. Import the Stack Layout app to your theme's dependencies to the `manifest.json`:

```json
  "dependencies": {
    "vtex.stack-layout": "0.x"
  }
```

2. Add the `stack-layout` block to the desired template. For example:

```json
"stack-layout": {
  "children": ["flex-layout.row#viewone", "flex-layout.row#viewtwo", "flex-layout.row#viewthree]
}
```

| Prop name      | Type     | Description                                                                                | Default value |
| -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
| `blockClass`   | `string` | Allows to pass a custom name to be added to component CSS classes.                                                                                | `null`        |
| `zIndexOffset` | `number` | An offset to be passed to the zIndex of the children of the stack layout. If you pass `3`, the first children will have `zIndex` of 3, and the next layer will have `zIndex` of 4, and so on. | `0`           |
| `arialabel` | `string` | A value to customize the aria-label property | `null`           |

## 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://developers.vtex.com/docs/guides/vtex-io-documentation-using-css-handles-for-store-customization).

| CSS Handles       |
| ------------------|
| `stackContainer`  |
| `stackItem`       |
| `stackItem--first`|

```


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

[User] Show me the implementation of stack-layout/react/index.tsx from the stack-layout VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { defineMessages, useIntl } from 'react-intl'
import { useCssHandles, applyModifiers } from 'vtex.css-handles'
const CSS_HANDLES = ['stackContainer', 'stackItem'] as const

interface Props {
  zIndexOffset?: number,
  arialabel?: string
}

const StackLayout: StorefrontFunctionComponent<Props> = ({
  children,
  zIndexOffset = 0,
  arialabel
}) => {
  const handles = useCssHandles(CSS_HANDLES)
  const intl = useIntl()
  return (
    <div className={`${handles.stackContainer} relative`} aria-label={arialabel ? arialabel : intl.formatMessage(
      { id: 'store/stack-layout.aria-label' })}>
      {React.Children.toArray(children).map((child, idx) => {

        // This allows the user customize the stackItem via CSS, via the blockClass of each child
        const childBlockClass = (child as any)?.props?.blockProps?.blockClass || ''
        let stackItemBlockClass = ''
        if (childBlockClass) {
          stackItemBlockClass = applyModifiers(handles.stackItem, childBlockClass)
        }

        if (idx === 0) {
          return (
            <div
              key={idx}
              className={`${applyModifiers(handles.stackItem, 'first')} ${stackItemBlockClass}`}
              style={{ zIndex: zIndexOffset + 1 }}
            >
              {child}
            </div>
          )
        }

        return (
          <div
            key={idx}
            className={`${handles.stackItem} absolute top-0 left-0 w-auto h-auto ${stackItemBlockClass}`}
            style={{ zIndex: zIndexOffset + idx + 1 }}
          >
            {child}
          </div>
        )
      })}
    </div>
  )
}

const messages = defineMessages({
  title: {
    defaultMessage: '',
    id: 'admin/editor.stack-layout.title',
  },
  description: {
    defaultMessage: '',
    id: 'admin/editor.stack-layout.description',
  },
})

StackLayout.schema = {
  title: messages.title.id,
  description: messages.description.id,
}

export default StackLayout

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "ramda": "^0.26.1",
    "react": "^16.8.6",
    "react-intl": "^3.12.1"
  },
  "devDependencies": {
    "@types/graphql": "^14.2.0",
    "@types/jest": "^24.0.11",
    "@types/node": "^11.13.2",
    "@types/ramda": "^0.26.8",
    "@types/react": "^16.8.13",
    "@types/react-intl": "^2.3.17"
  },
  "version": "0.1.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 stack-layout/store/interfaces.json from the stack-layout VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "stack-layout": {
    "component": "index",
    "composition": "children",
    "allowed": "*"
  }
}

```


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

[User] Show me the implementation of stack-layout/react/typings/vtex.css-handles.d.ts from the stack-layout VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.css-handles' {
  type CssHandlesInput = readonly string[]
  type ValueOf<T extends readonly any[]> = T[number]
  type CssHandles<T extends CssHandlesInput> = Record<ValueOf<T>, string>
  interface CssHandlesOptions {
    migrationFrom?: string | string[]
  }

  export const useCssHandles: <T extends CssHandlesInput>(
    handles: T,
    options: CssHandlesOptions = {}
  ) => CssHandles<T>
  export const applyModifiers: (
    handles: string,
    modifier: string | string[]
  ) => string
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
import { FunctionComponent } from 'react'
import { TachyonsScaleInput } from '../hooks/tachyons'

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

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

  interface StorefrontElement extends ReactElement {
    schema?: object
    getSchema?(props: P): object
  }
}

```


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

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

[Assistant]
Here's the implementation:

```markdown
# Order Form Courier

This app listens to orderForm events `orderFormUpdated.vtex` and sends those events to courier.
```


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

[User] Show me the implementation of order-form-courier/node/service.json from the order-form-courier VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "memory": 256,
  "ttl": 120,
  "timeout": 10,
  "minReplicas": 2,
  "maxReplicas": 4,
  "workers": 1,
  "routes": {
    "notify": {
      "path": "/_v/order-form-courier/notify",
      "public": true
    }
  },
  "events": {
    "orderFormEmailUpdated": {
      "sender": "order-form-courier",
      "keys": ["order-form-email-updated"]
    }
  }
}

```


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

[User] Show me the implementation of order-form-courier/node/package.json from the order-form-courier VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "@vtex/clients": "^2.11.0",
    "co-body": "^6.0.0",
    "ramda": "^0.25.0"
  },
  "devDependencies": {
    "@types/co-body": "^0.0.3",
    "@types/jest": "^26.0.24",
    "@types/node": "^12.0.0",
    "@types/ramda": "types/npm-ramda#dist",
    "@vtex/api": "6.45.6",
    "@vtex/tsconfig": "^0.5.6",
    "jest": "^27.0.6",
    "ts-jest": "^27.0.4",
    "typescript": "3.9.7"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty",
    "test": "jest --collectCoverage"
  },
  "jest": {
    "testMatch": [
      "**/__tests__/**/+(spec|test).+(ts|tsx|js)",
      "**/?(*.)+(spec|test).+(ts|tsx|js)"
    ],
    "transform": {
      "^.+\\.(ts|tsx)$": "ts-jest"
    }
  },
  "version": "0.7.0"
}

```


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

[User] Show me the implementation of order-form-courier/node/index.ts from the order-form-courier VTEX app.

[Assistant]
Here's the implementation:

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

import { Clients } from './clients'
import { notify } from './middlewares/notify'

const TIMEOUT_MS = 800

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

metrics.trackCache('status', memoryCache)

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

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

  // The shape of our State object found in `ctx.state`. This is used as state bag to communicate between middlewares.
  type State = RecorderState
}

// Export a service that defines route handlers and client options.
export default new Service({
  clients,
  routes: {
    notify: method({
      POST: [notify],
    }),
  },
})

```


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

[User] Show me the implementation of order-form-courier/pages/pages.json from the order-form-courier VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "extensions": {
      "checkout/universal/orderFormEvents": {
        "component": "index"
      }
    }
  }
```


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

[User] Show me the implementation of order-form-courier/react/index.tsx from the order-form-courier VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import OrderFormUpdateHandler from './OrderFormUpdateHandler'

const EventListenerTest: React.FC = () => {
  return <OrderFormUpdateHandler />
}

export default EventListenerTest

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "order-form-poc",
  "version": "0.0.0",
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "apollo-client": "^2.6.8",
    "axios": "^0.24.0",
    "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/jest": "^25.1.4",
    "@types/jquery": "^3.5.9",
    "@types/node": "^13.9.8",
    "@types/react": "^16.9.31",
    "@vtex/clients": "^2.17.0",
    "@vtex/test-tools": "^3.3.2",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-cache-inmemory": "^1.6.5",
    "graphql": "^14.6.0",
    "typescript": "3.9.7"
  }
}

```


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

[User] Show me the implementation of order-form-courier/react/OrderFormUpdateHandler.tsx from the order-form-courier VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useEffect } from 'react'
import type { OrderForm } from '@vtex/clients'

import { notificationClient } from './clients/notificationClient'
import { useOrderFormMonitor } from './hooks/useOrderFormMonitor'
import { onEmailChanged } from './eventHandlers/onEmailChanged'

const OrderFormUpdateHandler: React.FC = () => {
  const client = notificationClient()
  const eventHandler = useOrderFormMonitor([onEmailChanged])

  const handleOrderFormUpdated = async (_: unknown, orderForm: OrderForm) => {
    const events = eventHandler(orderForm)

    await client.notify(events)
  }

  useEffect(() => {
    $(window).on('orderFormUpdated.vtex', handleOrderFormUpdated)

    return () => {
      $(window).off('orderFormUpdated.vtex', handleOrderFormUpdated)
    }
  }, [eventHandler])

  return <></>
}

export default OrderFormUpdateHandler

```


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

[User] Show me the implementation of order-form-courier/node/clients/index.ts from the order-form-courier VTEX app.

[Assistant]
Here's the implementation:

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

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

```


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

[User] Show me the implementation of order-form-courier/node/typings/orderFormEvent.ts from the order-form-courier VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface OrderFormEvent {
  eventName: string
  eventObject: unknown
  triggered: boolean
}

```


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

[User] Show me the implementation of order-form-courier/node/middlewares/notify.ts from the order-form-courier VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { json } from 'co-body'

import type { OrderFormEvent } from '../typings/orderFormEvent'

export async function notify(ctx: Context, next: () => Promise<unknown>) {
  const {
    clients: { events },
  } = ctx

  const orderFormEvents = (await json(ctx.req)).events as OrderFormEvent[]

  const eventsPromise = orderFormEvents
    .filter((e) => e.triggered)
    .map((e) => events.sendEvent('', e.eventName, e.eventObject))

  await Promise.all(eventsPromise)

  ctx.status = 200
  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 order-form-courier/react/clients/notificationClient.ts from the order-form-courier VTEX app.

[Assistant]
Here's the implementation:

```typescript
import axios from 'axios'

import type { OrderFormEvent } from '../typings/orderFormEvent'

export const notificationClient = () => {
  return {
    notify: (events: Array<OrderFormEvent<{ orderFormId: string }>>) => {
      return axios.post('/_v/order-form-courier/notify', {
        events,
      })
    },
  }
}

```


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

[User] Show me the implementation of order-form-courier/react/eventHandlers/onEmailChanged.ts from the order-form-courier VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { OrderForm } from '@vtex/clients'

import type { OrderFormEvent } from '../typings/orderFormEvent'

export const onEmailChanged = (old: OrderForm, updated: OrderForm) => {
  const oldEmail = old?.clientProfileData?.email
  const newEmail = updated?.clientProfileData?.email

  return {
    eventName: 'order-form-email-updated',
    eventObject: { email: newEmail, orderFormId: updated.orderFormId },
    triggered: oldEmail !== newEmail,
  } as OrderFormEvent<{ email: string; orderFormId: 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 order-form-courier/react/typings/gql.d.ts from the order-form-courier VTEX app.

[Assistant]
Here's the implementation:

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

  const Schema: DocumentNode

  export default Schema
}

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

  const schema: DocumentNode

  export default Schema
}

```


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

[User] Show me the implementation of order-form-courier/react/typings/orderFormEvent.d.ts from the order-form-courier VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { OrderForm } from '@vtex/clients'

export interface OrderFormEvent<T extends { orderFormId: string }> {
  eventName: string
  eventObject: T
  triggered: boolean
}

export type OrderFormEventHandler = (
  orderForm: OrderForm,
  newOrderForm: OrderForm
) => OrderFormEvent<{ orderFormId: 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 order-form-courier/react/typings/global.d.ts from the order-form-courier VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { OrderForm } from '@vtex/clients'

declare global {
  interface Window extends Window {
    vtexjs: {
      checkout: {
        orderForm: OrderForm
      }
    }
  }
}

```


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

[User] Show me the implementation of order-form-courier/react/typings/css.d.ts from the order-form-courier 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 order-form-courier/react/hooks/useOrderFormMonitor.tsx from the order-form-courier VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { OrderForm } from '@vtex/clients'
import { useCallback, useState } from 'react'

import type { OrderFormEventHandler } from '../typings/orderFormEvent'

export const useOrderFormMonitor = (handlers: OrderFormEventHandler[]) => {
  const [orderForm, setOrderForm] = useState<OrderForm>(
    // This is used to clone the orderForm state and prevent referencing it directly.
    JSON.parse(JSON.stringify(window?.vtexjs.checkout.orderForm))
  )

  const handleOrderFormChange = useCallback(
    (eventOrderForm: OrderForm) => {
      const changes = handlers.map((handler) =>
        handler(orderForm, eventOrderForm)
      )

      setOrderForm(JSON.parse(JSON.stringify(eventOrderForm)))

      return changes
    },
    [orderForm]
  )

  return handleOrderFormChange
}

```


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

[User] Show me the implementation of auth-challenge/messages/pt.json from the auth-challenge 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 auth-challenge/messages/en.json from the auth-challenge 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 auth-challenge/messages/es.json from the auth-challenge 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 auth-challenge/docs/README.md from the auth-challenge VTEX app.

[Assistant]
Here's the implementation:

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

# Auth Challenge

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

The Auth Challenge app is an essential B2B feature responsible for checking if a user is allowed to access the store's content. It helps define which components should be displayed for users that are allowed and users that are not.

## Example Use Case

Add a condition to a TP that applies to your user. As an anonymous user, you should not see the real content. When you log in, and if and only if the condition you added above matches your profile, you should see the real content.

Now remove the condition from the TP that applies to your user. Now as an anonymous user, you should not see the real content. When you login, you should see the real content.

:information_source: This check is made according to the Condition Rule specified in the Trade Policy configuration, one of the steps needed to [**configure a B2B environment in VTEX IO**](https://vtex.io/docs/recipes/store/configuring-a-b2b-environment).

![aut-challenge](https://user-images.githubusercontent.com/52087100/85445025-50cc9600-b569-11ea-9db9-1a25f93b8109.png)
*In the example above, the `Become a parter` link in the Header is only displayed for anonymous users. Once the user is authenticated (second image), he become able to see the `Quick Order` and the `Order quote` links.*

## Configuration

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

```diff
  "dependencies": {
+   "vtex.auth-challenge": "1.x"
  }
```

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

| Block name     | Description                                  |
| -------------- | ----------------------------------------------- |
| `challenge-block` |  Logical block responsible for checking whether an user is authenticated or not. It does not render any component, but mandatorily defines as children the `challenge-content` and the `challenge-fallback` blocks. |
| `challenge-content` | Defines (via its children blocks) which components will be displayed in the UI for authenticated users. |
| `challenge-fallback` | Defines (via its children blocks) which components will be displayed for anonymous users. |

2. In the desired store template, such as `store.product`, declare the `challenge-block`, listing the `challenge-content` and the `challenge-fallback` as its children. For example:

```diff
 "store.product": {
   "blocks": [
     "flex-layout.row#product-main",
+    "challenge-block#description",
     "shelf.relatedProducts#accessories"
   ],
 },
+"challenge-block#description": {
+  "blocks": [
+    "challenge-content#description",
+    "challenge-fallback#description"
+  ]
+},
```

3. Now, declare the children blocks `challenge-content` and `challenge-fallback`. Remember that they define, respectively, which components will be displayed for authenticated and anonymous users;

```diff
 "store.product": {
   "blocks": [
     "flex-layout.row#product-main",
     "challenge-block#description",
     "shelf.relatedProducts#accessories"
   ],
 },
 "challenge-block#description": {
   "blocks": [
     "challenge-content#description",
     "challenge-fallback#description"
   ]
 },
+ "challenge-content#description": {
+   "children": [
+     "product-description"
+   ]
+ },
+ "challenge-fallback#description": {
+   "children": [
+     "rich-text#challenge-description"
+   ]
+ },
+ "rich-text#challenge-description": {
+   "props": {
+     "text": "Please login to see the description",
+     "blockClass": "challengeDescription"
+   }
+ }
```

According to the example above, users that have the attached trade policy will see the component rendered by the `product-description` block. Others, in turn, will see a Rich Text component  (`challenge-fallback`'s child block).

## 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        |
| ------------------------ |
| `challengeContentWrapper`    |

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

## Contributors ✨

Thanks goes to these wonderful people:

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

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

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

```


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

[User] Show me the implementation of auth-challenge/react/BlockChallenge.tsx from the auth-challenge VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import {
  ExtensionPoint,
  Session,
  SessionResponse,
  SessionUnauthorized,
  SessionForbidden,
} from 'vtex.render-runtime'

import useSessionResponse from './hooks/useSessionResponse'

const isSessionUnauthorized = (
  session: SessionResponse | undefined
): session is SessionUnauthorized =>
  (session as SessionUnauthorized)?.type?.toLowerCase() === 'unauthorized'

const isSessionForbidden = (
  session: SessionResponse | undefined
): session is SessionForbidden =>
  (session as SessionForbidden)?.type?.toLowerCase() === 'forbidden'

const isProfileAllowed = (sessionResponse: SessionResponse | undefined) => {
  if (sessionResponse == null) {
    return null
  }

  const hasAccessToTradePolicy = (sessionResponse as Session).namespaces?.store
    ?.channel

  const isLoggedIn = (sessionResponse as Session).namespaces?.profile?.email

  if (isLoggedIn && hasAccessToTradePolicy) {
    return 'authorized'
  }

  if (isLoggedIn) {
    return 'forbidden'
  }

  return 'unauthorized'
}

const BlockChallenge = () => {
  const sessionResponse = useSessionResponse()

  const isUnauthorized = isSessionUnauthorized(sessionResponse)
  const isForbidden = isSessionForbidden(sessionResponse)
  const profileCondition = isProfileAllowed(sessionResponse)

  if (!sessionResponse) {
    return null
  }

  const defaultHidden = sessionResponse == null

  if (
    defaultHidden ||
    isUnauthorized === true ||
    isForbidden === true ||
    profileCondition === 'unauthorized' ||
    profileCondition === 'forbidden'
  ) {
    return <ExtensionPoint id="challenge-fallback" />
  }

  return <ExtensionPoint id="challenge-content" />
}

export default BlockChallenge

```


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

[User] Show me the implementation of auth-challenge/react/BlockContent.tsx from the auth-challenge VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { useCssHandles } from 'vtex.css-handles'

const CSS_HANDLES = ['challengeContentWrapper'] as const

const BlockContent: FC<ChallengeProps> = ({ children }: ChallengeProps) => {
  const handles = useCssHandles(CSS_HANDLES)

  return (
    <div className={`mw9 center ${handles.challengeContentWrapper}`}>
      {children}
    </div>
  )
}

export default BlockContent

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "lint": "tsc --noEmit && eslint --quiet --fix --ext ts,tsx .",
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "apollo-client": "^2.6.3",
    "graphql": "^14.5.8",
    "ramda": "^0.26.1",
    "react": "^16.8.6",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.8.6",
    "react-intl": "^2.9.0"
  },
  "devDependencies": {
    "@types/graphql": "^14.5.0",
    "@types/jest": "^24.0.21",
    "@types/node": "^12.12.3",
    "@types/ramda": "^0.26.33",
    "@types/react": "^16.8.22",
    "@types/react-intl": "^2.3.18",
    "@vtex/prettier-config": "^0.3.1",
    "@vtex/test-tools": "^0.3.2",
    "@vtex/tsconfig": "^0.2.0",
    "eslint": "^7.6.0",
    "eslint-config-vtex-react": "^6.7.3",
    "prettier": "^2.0.5",
    "prop-types": "^15.7.2",
    "typescript": "3.8.3"
  },
  "version": "1.1.1"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "challenge-block": {
    "component": "BlockChallenge",
    "allowed": ["challenge-content", "challenge-fallback"]
  },
  "challenge-content": {
    "component": "BlockContent",
    "composition": "children",
    "allowed": "*"
  },
  "challenge-fallback": {
    "component": "BlockContent",
    "composition": "children",
    "allowed": "*"
  }
}

```


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

[User] Show me the implementation of auth-challenge/react/typings/globals.d.ts from the auth-challenge VTEX app.

[Assistant]
Here's the implementation:

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

declare global {
  interface ChallengeProps {
    children: ReactNode[]
  }
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable @typescript-eslint/ban-types */
/* 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
  }

  interface ChildBlock<BlockProps> {
    props: BlockProps
  }

  export const ExtensionPoint: ComponentType<ExtensionPointProps>
  export const useChildBlock: <BlockProps>({
    id,
  }: {
    id: string
  }) => ChildBlock<BlockProps> | null
  export const Helmet: ReactElement
  export const Link: ReactType
  export const NoSSR: ReactElement
  export const RenderContextConsumer: any
  export const TreePathContextConsumer: any
  export const useTreePath: any
  export const useRuntime: any
  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>

  interface KeyValue {
    value: string
  }

  interface Session {
    id: string
    namespaces: {
      store: {
        channel: string
      }
      profile: {
        isAuthenticated: KeyValue
        email: string
      }
    }
  }

  interface SessionUnauthorized {
    type: 'Unauthorized'
    message: string
  }

  interface SessionForbidden {
    type: 'Forbidden'
    message: string
  }

  export interface RenderSession {
    sessionPromise: Promise<SessionPromise>
  }

  export interface SessionPromise {
    response: Session | SessionUnauthorized | SessionForbidden
  }

  export type SessionResponse = Session | SessionUnauthorized | SessionForbidden
}

```


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

[User] Show me the implementation of auth-challenge/react/typings/graphql.d.ts from the auth-challenge 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 auth-challenge/react/__tests__/index.test.tsx from the auth-challenge VTEX app.

[Assistant]
Here's the implementation:

```tsx
describe('Product description scenario', () => {
  it('should work', () => {
    expect(1).toBe(1)
  })
})

```


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

[User] Show me the implementation of auth-challenge/react/hooks/useSessionResponse.tsx from the auth-challenge VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useEffect, useState } from 'react'
import { SessionResponse } from 'vtex.render-runtime'

import { getSession } from '../modules/session'

const useSessionResponse = () => {
  const [session, setSession] = useState<SessionResponse>()
  const sessionPromise = getSession()

  useEffect(() => {
    if (!sessionPromise) {
      return
    }

    sessionPromise.then((sessionResponse) => {
      const response = sessionResponse.response as SessionResponse

      setSession(response)
    })
  }, [sessionPromise])

  return session
}

export default useSessionResponse

```


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

[User] Show me the implementation of auth-challenge/react/modules/session.ts from the auth-challenge VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable @typescript-eslint/no-explicit-any */
import { SessionPromise } from 'vtex.render-runtime'

export function getSession() {
  return window &&
    (window as any).__RENDER_8_SESSION__ &&
    (window as any).__RENDER_8_SESSION__.sessionPromise
    ? ((window as any).__RENDER_8_SESSION__.sessionPromise as Promise<
        SessionPromise
      >)
    : 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 b2b-login-challenge/messages/pt.json from the b2b-login-challenge 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 b2b-login-challenge/messages/en.json from the b2b-login-challenge 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 b2b-login-challenge/messages/es.json from the b2b-login-challenge 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 b2b-login-challenge/docs/README.md from the b2b-login-challenge VTEX app.

[Assistant]
Here's the implementation:

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

# APP NAME

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

Under the app's name, you should explain the topic, giving a **brief description** of its **functionality** in a store when installed.

Next, **add media** (either an image of a GIF) with the rendered components, so that users can better understand how the app works in practice.

![Media Placeholder](https://user-images.githubusercontent.com/52087100/71204177-42ca4f80-227e-11ea-89e6-e92e65370c69.png)

## Configuration

In this section, you first must **add the primary instructions** that will allow users to use the app's blocks in their store, such as:

1. Adding the app as a theme dependency in the `manifest.json` file;
2. Declaring the app's main block in a given theme template or inside another block from the theme.

Remember to add a table with all blocks exported by the app and their descriptions. You can verify an example of it on the [Search Result documentation](https://vtex.io/docs/components/all/vtex.search-result@3.56.1/).

Next, add the **props table** containing your block's props.

If the app exports more than one block, create several tables - one for each block. For example:

### `block-1` props

| Prop name    | Type            | Description    | Default value                                                                                |
| ------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| `XXXXX`      | `XXXXXX`       | XXXXXXXX         | `XXXXXX`        |

### `block-2` props

| Prop name    | Type            | Description    | Default value                                                                                |
| ------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| `XXXXX`      | `XXXXXX`       | XXXXXXXX         | `XXXXXX`        |

Prop types are:

- `string`
- `enum`
- `number`
- `boolean`
- `object`
- `array`

When documenting a prop whose type is `object` or `array` another prop table will be needed. You can create it following the example below:

- `propName` object:

| Prop name    | Type            | Description    | Default value                                                                                |
| ------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| `XXXXX`      | `XXXXXX`       | XXXXXXXX         | `XXXXXX`        |

Remember to also use this Configuration section to  **showcase any necessary disclaimer** related to the app and its blocks, such as the different behavior it may display during its configuration.

## Modus Operandi *(not mandatory)*

There are scenarios in which an app can behave differently in a store, according to how it was added to the catalog, for example. It's crucial to go through these **behavioral changes** in this section, allowing users to fully understand the **practical application** of the app in their store.

If you feel compelled to give further details about the app, such as it's **relationship with the VTEX admin**, don't hesitate to use this section.

## Customization

The first thing that should be present in this section is the sentence below, showing users the recipe pertaining to CSS customization in apps:

`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).`

Thereafter, you should add a single column table with the available CSS handles for the app, like the one below. Note that the Handles must be ordered alphabetically.

| CSS Handles |
| ----------- |
| `XXXXX` |
| `XXXXX` |
| `XXXXX` |
| `XXXXX` |
| `XXXXX` |

If there are none, add the following sentence instead:

`No CSS Handles are available yet for the app customization.`

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

## Contributors ✨

Thanks goes to these wonderful people:

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

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

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

----

Check out some documentation models that are already live:
- [Breadcrumb](https://github.com/vtex-apps/breadcrumb)
- [Image](https://vtex.io/docs/components/general/vtex.store-components/image)
- [Condition Layout](https://vtex.io/docs/components/all/vtex.condition-layout@1.1.6/)
- [Add To Cart Button](https://vtex.io/docs/components/content-blocks/vtex.add-to-cart-button@0.9.0/)
- [Store Form](https://vtex.io/docs/components/all/vtex.store-form@0.3.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 b2b-login-challenge/react/ChallengeLoginCondition.tsx from the b2b-login-challenge VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, {
  FC,
  Fragment,
  useEffect,
  useState
} from 'react'
import {
  useRuntime,
  canUseDOM,
  SessionUnauthorized,
  Session,
  SessionForbidden,
} from 'vtex.render-runtime'

import { getSession } from './modules/session'

type ContentVisibility = 'visible' | 'hidden'

const useRedirect = (condition: boolean, path: string) => {
  const { navigate } = useRuntime()

  useEffect(() => {
    if (!condition) {
      return
    }

    const url = canUseDOM
      ? window.location.pathname + window.location.hash
      : // eslint-disable-next-line @typescript-eslint/no-explicit-any
        (global as any).__pathname__

    navigate({
      to: `${path}?returnUrl=${encodeURIComponent(url)}`,
    })
  }, [condition, navigate, path])
}

type SessionResponse = Session | SessionUnauthorized | SessionForbidden

const useSessionResponse = () => {
  const [session, setSession] = useState<SessionResponse>()
  const sessionPromise = getSession()

  useEffect(() => {
    if (!sessionPromise) {
      return
    }

    sessionPromise.then(sessionResponse => {
      const response = sessionResponse.response as SessionResponse

      setSession(response)
    })
  }, [sessionPromise])

  return session
}

const isSessionUnauthorized = (
  session: SessionResponse | undefined
): session is SessionUnauthorized =>
  (session as SessionUnauthorized)?.type?.toLowerCase() === 'unauthorized'

const isSessionForbidden = (
  session: SessionResponse | undefined
): session is SessionForbidden =>
  (session as SessionForbidden)?.type?.toLowerCase() === 'forbidden'

interface Props {
  redirectPath: string
  forbiddenRedirectPath: string
  defaultContentVisibility: ContentVisibility
}

const isProfileAllowed = (sessionResponse: SessionResponse | undefined) => {
  if (sessionResponse == null) {
    return null
  }

  const hasAccessToTradePolicy = (sessionResponse as Session).namespaces?.store
    ?.channel

  // const channelFromUser = item.response.namespaces.store.channel.value
  // const pattern = /:\s|,\s/
  // const tradePolicyValue = challengeTradePolicy.split(pattern)
  // const result = tradePolicyValue.includes(String(channelFromUser))

  const isLoggedIn = (sessionResponse as Session).namespaces?.profile?.email

  if (hasAccessToTradePolicy) {
    return 'authorized'
  }
  if (isLoggedIn) {
    return 'forbidden'
  }
  return 'unauthorized'
}

const ChallengeLoginCondition: FC<Props> = ({
  redirectPath = '/login',
  forbiddenRedirectPath = redirectPath,
  defaultContentVisibility = 'visible',
  children,
}) => {

  console.log("---------- CHAMOU O CHALLENGE LOGIN CONDITION")

  const sessionResponse = useSessionResponse()
  const isUnauthorized = isSessionUnauthorized(sessionResponse)
  const isForbidden = isSessionForbidden(sessionResponse)
  const profileCondition = isProfileAllowed(sessionResponse)

  useRedirect(
    isUnauthorized === true || profileCondition === 'unauthorized',
    redirectPath
  )
  useRedirect(
    isForbidden === true || profileCondition === 'forbidden',
    forbiddenRedirectPath
  )

  const defaultHidden =
    defaultContentVisibility === 'hidden' && sessionResponse == null

  if (
    defaultHidden ||
    isUnauthorized === true ||
    isForbidden === true ||
    profileCondition === 'unauthorized' ||
    profileCondition === 'forbidden'
  ) {
    return null
  }

  return <Fragment>{children}</Fragment>
}

export default React.memo(ChallengeLoginCondition)
```


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

[User] Show me the implementation of b2b-login-challenge/react/package.json from the b2b-login-challenge VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "b2b-login-challenge",
  "version": "0.1.0",
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "apollo-client": "^2.6.8",
    "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/jest": "^25.1.4",
    "@types/node": "^13.9.8",
    "@types/react": "^16.9.31",
    "@vtex/test-tools": "^3.3.2",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-cache-inmemory": "^1.6.5",
    "graphql": "^14.6.0",
    "typescript": "3.9.7"
  }
}

```


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

[User] Show me the implementation of b2b-login-challenge/store/interfaces.json from the b2b-login-challenge VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "challenge.login-condition": {
    "component": "ChallengeLoginCondition"
  }
}

```


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

[User] Show me the implementation of b2b-login-challenge/react/typings/globals.d.ts from the b2b-login-challenge VTEX app.

[Assistant]
Here's the implementation:

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

declare global {
  interface ChallengeProps {
    children: ReactNode[]
  }
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable @typescript-eslint/ban-types */
/* 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
  }

  interface ChildBlock<BlockProps> {
    props: BlockProps
  }

  export const ExtensionPoint: ComponentType<ExtensionPointProps>
  export const useChildBlock: <BlockProps>({
    id,
  }: {
    id: string
  }) => ChildBlock<BlockProps> | null
  export const Helmet: ReactElement
  export const Link: ReactType
  export const NoSSR: ReactElement
  export const RenderContextConsumer: any
  export const TreePathContextConsumer: any
  export const useTreePath: any
  export const useRuntime: any
  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>

  interface KeyValue {
    value: string
  }

  interface Session {
    id: string
    namespaces: {
      store: {
        channel: string
      }
      profile: {
        isAuthenticated: KeyValue
        email: string
      }
    }
  }

  interface SessionUnauthorized {
    type: 'Unauthorized'
    message: string
  }

  interface SessionForbidden {
    type: 'Forbidden'
    message: string
  }

  export interface RenderSession {
    sessionPromise: Promise<SessionPromise>
  }

  export interface SessionPromise {
    response: Session | SessionUnauthorized | SessionForbidden
  }

  export type SessionResponse = Session | SessionUnauthorized | SessionForbidden
}

```


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

[User] Show me the implementation of b2b-login-challenge/react/typings/gql.d.ts from the b2b-login-challenge VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { DocumentNode } from 'graphql'

declare module '*.gql' {
  const Schema: DocumentNode
  export = Schema
}

declare module '*.graphql' {
  const Schema: DocumentNode
  export = 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 b2b-login-challenge/react/typings/css.d.ts from the b2b-login-challenge VTEX app.

[Assistant]
Here's the implementation:

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

  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 b2b-login-challenge/react/hooks/useSessionResponse.tsx from the b2b-login-challenge VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useEffect, useState } from 'react'
import { SessionResponse } from 'vtex.render-runtime'

import { getSession } from '../modules/session'

const useSessionResponse = () => {
  const [session, setSession] = useState<SessionResponse>()
  const sessionPromise = getSession()

  useEffect(() => {
    if (!sessionPromise) {
      return
    }

    sessionPromise.then((sessionResponse) => {
      const response = sessionResponse.response as SessionResponse

      setSession(response)
    })
  }, [sessionPromise])

  return session
}

export default useSessionResponse

```


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

[User] Show me the implementation of b2b-login-challenge/react/modules/session.ts from the b2b-login-challenge VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable @typescript-eslint/no-explicit-any */
import { SessionPromise } from 'vtex.render-runtime'

export function getSession() {
  return window &&
    (window as any).__RENDER_8_SESSION__ &&
    (window as any).__RENDER_8_SESSION__.sessionPromise
    ? ((window as any).__RENDER_8_SESSION__.sessionPromise as Promise<
        SessionPromise
      >)
    : 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 category-menu/messages/pt.json from the category-menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.category-menu.departments.items.id": "Id do Departamento",
  "admin/editor.category-menu.departments.items.title": "Departamento",
  "admin/editor.category-menu.description": "Um menu mostrando uma lista de categorias disponíveis na loja",
  "admin/editor.category-menu.disposition-type.center": "Centro",
  "admin/editor.category-menu.disposition-type.left": "Esquerda",
  "admin/editor.category-menu.disposition-type.right": "Direita",
  "admin/editor.category-menu.disposition-type.title": "Posição do menu",
  "admin/editor.category-menu.show-departments-category.title": "Mostrar a categoria de departamentos",
  "admin/editor.category-menu.show-subcategories.title": "Mostrar subcategorias",
  "admin/editor.category-menu.sort-subcategories.title": "Ordenar subcategorias",
  "admin/editor.category-menu.sort-type.default": "Padrão",
  "admin/editor.category-menu.sort-type.name": "Nome",
  "admin/editor.category-menu.title": "Menu de categorias",
  "store/category-menu.all-category.title": "Ver Todos",
  "store/category-menu.departments.title": "Departamentos"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.category-menu.departments.items.id": "Department Id",
  "admin/editor.category-menu.departments.items.title": "Department",
  "admin/editor.category-menu.description": "A menu showing a list of the available categories on the store",
  "admin/editor.category-menu.disposition-type.center": "Middle",
  "admin/editor.category-menu.disposition-type.left": "Left",
  "admin/editor.category-menu.disposition-type.right": "Right",
  "admin/editor.category-menu.disposition-type.title": "Menu position",
  "admin/editor.category-menu.show-departments-category.title": "Show the departments category",
  "admin/editor.category-menu.show-subcategories.title": "Show subcategories",
  "admin/editor.category-menu.sort-subcategories.title": "Sort subcategories",
  "admin/editor.category-menu.sort-type.default": "Default",
  "admin/editor.category-menu.sort-type.name": "Name",
  "admin/editor.category-menu.title": "Category menu",
  "store/category-menu.all-category.title": "See All",
  "store/category-menu.departments.title": "Departments"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.category-menu.departments.items.id": "Department Id",
  "admin/editor.category-menu.departments.items.title": "Department",
  "admin/editor.category-menu.description": "A menu showing a list of the available categories on the store",
  "admin/editor.category-menu.disposition-type.center": "Middle",
  "admin/editor.category-menu.disposition-type.left": "Left",
  "admin/editor.category-menu.disposition-type.right": "Right",
  "admin/editor.category-menu.disposition-type.title": "Menu position",
  "admin/editor.category-menu.show-departments-category.title": "Show the departments category",
  "admin/editor.category-menu.show-subcategories.title": "Show subcategories",
  "admin/editor.category-menu.sort-subcategories.title": "Sort subcategories",
  "admin/editor.category-menu.sort-type.default": "Default",
  "admin/editor.category-menu.sort-type.name": "Name",
  "admin/editor.category-menu.title": "Category menu",
  "store/category-menu.all-category.title": "See All",
  "store/category-menu.departments.title": "Departments"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.category-menu.departments.items.id": "Id Departemen",
  "admin/editor.category-menu.departments.items.title": "Departemen",
  "admin/editor.category-menu.description": "Menu yang menampilkan daftar kategori yang tersedia di toko",
  "admin/editor.category-menu.disposition-type.center": "Tengah",
  "admin/editor.category-menu.disposition-type.left": "Kiri",
  "admin/editor.category-menu.disposition-type.right": "Kanan",
  "admin/editor.category-menu.disposition-type.title": "Posisi menu",
  "admin/editor.category-menu.show-departments-category.title": "Tampilkan kategori departemen",
  "admin/editor.category-menu.show-subcategories.title": "Tampilkan subkategori",
  "admin/editor.category-menu.sort-subcategories.title": "Urutkan subkategori",
  "admin/editor.category-menu.sort-type.default": "Default",
  "admin/editor.category-menu.sort-type.name": "Nama",
  "admin/editor.category-menu.title": "Menu kategori",
  "store/category-menu.all-category.title": "Lihat Semua",
  "store/category-menu.departments.title": "Departemen"
}

```


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

[User] Show me the implementation of category-menu/messages/th.json from the category-menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.category-menu.departments.items.id": "รหัสแผนก",
  "admin/editor.category-menu.departments.items.title": "แผนก",
  "admin/editor.category-menu.description": "เมนูแสดงรายการหมวดหมู่ที่มีในร้านค้า",
  "admin/editor.category-menu.disposition-type.center": "กลาง",
  "admin/editor.category-menu.disposition-type.left": "ซ้าย",
  "admin/editor.category-menu.disposition-type.right": "ขวา",
  "admin/editor.category-menu.disposition-type.title": "ตำแหน่งเมนู",
  "admin/editor.category-menu.show-departments-category.title": "แสดงหมวดหมู่ของแผนก",
  "admin/editor.category-menu.show-subcategories.title": "แสดงหมวดหมู่ย่อย",
  "admin/editor.category-menu.sort-subcategories.title": "จัดเรียงหมวดหมู่ย่อย",
  "admin/editor.category-menu.sort-type.default": "ค่าเริ่มต้น",
  "admin/editor.category-menu.sort-type.name": "ชื่อ",
  "admin/editor.category-menu.title": "เมนูหมวดหมู่",
  "store/category-menu.all-category.title": "ดูทั้งหมด",
  "store/category-menu.departments.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 category-menu/messages/es.json from the category-menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.category-menu.departments.items.id": "Id del Departamento",
  "admin/editor.category-menu.departments.items.title": "Departamento",
  "admin/editor.category-menu.description": "Un menú que muestra una lista de categorías disponibles en la tienda",
  "admin/editor.category-menu.disposition-type.center": "Centro",
  "admin/editor.category-menu.disposition-type.left": "Izquierda",
  "admin/editor.category-menu.disposition-type.right": "Derecho",
  "admin/editor.category-menu.disposition-type.title": "Posición del menú",
  "admin/editor.category-menu.show-departments-category.title": "Mostrar la categoría de departamentos",
  "admin/editor.category-menu.show-subcategories.title": "Mostrar subcategorías",
  "admin/editor.category-menu.sort-subcategories.title": "Ordenar subcategorías",
  "admin/editor.category-menu.sort-type.default": "Predeterminado",
  "admin/editor.category-menu.sort-type.name": "Nombre",
  "admin/editor.category-menu.title": "Menú de categorías",
  "store/category-menu.all-category.title": "Ver Todos",
  "store/category-menu.departments.title": "Departamentos"
}

```