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

[User] Show me the implementation of vtex-ads/react/Banner.tsx from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable no-console */
import type { PropsWithChildren } from 'react'
import React from 'react'
import { defineMessages } from 'react-intl'

import { VTEXAdsProvider } from './hooks/useAds'
import Banners from './components/Banner'
import { useDebug } from './utils/debug'

function Banner(props: PropsWithChildren<NewtailMediaBannerProps>) {
  useDebug({
    name: 'Banner',
    props,
    template: 'primary',
  })

  const isActive = props.active ?? true

  if (!isActive) return <></>

  return (
    <VTEXAdsProvider adType="banner" {...props}>
      <Banners />
    </VTEXAdsProvider>
  )
}

const messages = defineMessages({
  'banner.title': {
    id: 'admin/vtex-vtex-ads.banner.title',
    defaultMessage: '',
  },
  'common.active.title': {
    id: 'admin/vtex-vtex-ads.common.active.title',
    defaultMessage: '',
  },
  'common.placementNameAdmin.title': {
    id: 'admin/vtex-vtex-ads.common.placementNameAdmin.title',
    defaultMessage: '',
  },
  'banner.placementNameAdmin.description': {
    id: 'admin/vtex-vtex-ads.banner.placementNameAdmin.description',
    defaultMessage: '',
  },
  'banner.sizeAdmin.title': {
    id: 'admin/vtex-vtex-ads.banner.sizeAdmin.title',
    defaultMessage: '',
  },
  'banner.sizeAdmin.description': {
    id: 'admin/vtex-vtex-ads.banner.sizeAdmin.description',
    defaultMessage: '',
  },
  'banner.sizeMobileAdmin.title': {
    id: 'admin/vtex-vtex-ads.banner.sizeMobileAdmin.title',
    defaultMessage: '',
  },
  'banner.sizeMobileAdmin.description': {
    id: 'admin/vtex-vtex-ads.banner.sizeMobileAdmin.description',
    defaultMessage: '',
  },
  'common.quantityAdmin.title': {
    id: 'admin/vtex-vtex-ads.common.quantityAdmin.title',
    defaultMessage: '',
  },
  'common.quantityAdmin.banner.description': {
    id: 'admin/vtex-vtex-ads.common.quantityAdmin.banner.description',
    defaultMessage: '',
  },
  'common.categoryNameAdmin.title': {
    id: 'admin/vtex-vtex-ads.common.categoryNameAdmin.title',
    defaultMessage: '',
  },
  'common.categoryNameAdmin.description': {
    id: 'admin/vtex-vtex-ads.common.categoryNameAdmin.description',
    defaultMessage: '',
  },
})

Banner.schema = {
  title: messages['banner.title'].id,
  type: 'object',
  properties: {
    placementName: {
      default: 'banner',
      isLayout: true,
      type: 'string',
    },
    size: {
      default: 'banner',
      isLayout: true,
      type: 'string',
    },
    sizeMobile: {
      default: null,
      isLayout: true,
      type: 'string',
    },
    quantity: {
      default: 1,
      isLayout: true,
      type: 'string',
    },
    categoryName: {
      default: null,
      isLayout: true,
      type: 'string',
    },
  },
}

export default Banner

```


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

[User] Show me the implementation of vtex-ads/react/Conversion.tsx from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable no-console */
import React from 'react'

import { VTEXAdsProvider } from './hooks/useAds'
import ConversionComponent from './components/Conversion'

const Conversion: React.FC = () => {
  return (
    <VTEXAdsProvider adType="conversion">
      <ConversionComponent />
    </VTEXAdsProvider>
  )
}

export default Conversion

```


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

[User] Show me the implementation of vtex-ads/react/ProductSponsoredTag.tsx from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```tsx
export { default } from './components/ProductSponsoredTag'

```


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

[User] Show me the implementation of vtex-ads/react/SponsoredProducts.tsx from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable no-console */
import React from 'react'
import type { PropsWithChildren } from 'react'
import { defineMessages } from 'react-intl'

import Products from './components/Products'
import { VTEXAdsProvider } from './hooks/useAds'
import { useDebug } from './utils/debug'

function SponsoredProducts(
  props: PropsWithChildren<NewtailMediaProductsProps>
) {
  useDebug({
    name: 'Sponsored products',
    props,
    template: 'primary',
  })

  const isActive = props.active ?? true

  if (!isActive) return <></>

  return (
    <VTEXAdsProvider adType="product" {...props}>
      <Products />
    </VTEXAdsProvider>
  )
}

const messages = defineMessages({
  'shelf.title': {
    id: 'admin/vtex-vtex-ads.shelf.title',
    defaultMessage: '',
  },
  'common.active.title': {
    id: 'admin/vtex-vtex-ads.common.active.title',
    defaultMessage: '',
  },
  'common.placementNameAdmin.title': {
    id: 'admin/vtex-vtex-ads.common.placementNameAdmin.title',
    defaultMessage: '',
  },
  'shelf.placementNameAdmin.description': {
    id: 'admin/vtex-vtex-ads.shelf.placementNameAdmin.description',
    defaultMessage: '',
  },
  'common.quantityAdmin.title': {
    id: 'admin/vtex-vtex-ads.common.quantityAdmin.title',
    defaultMessage: '',
  },
  'common.quantityAdmin.product.description': {
    id: 'admin/vtex-vtex-ads.common.quantityAdmin.product.description',
    defaultMessage: '',
  },
  'common.categoryNameAdmin.title': {
    id: 'admin/vtex-vtex-ads.common.categoryNameAdmin.title',
    defaultMessage: '',
  },
  'common.categoryNameAdmin.description': {
    id: 'admin/vtex-vtex-ads.common.categoryNameAdmin.description',
    defaultMessage: '',
  },
})

SponsoredProducts.schema = {
  title: messages['shelf.title'].id,
  type: 'object',
  properties: {
    placementName: {
      default: 'products',
      isLayout: true,
      type: 'string',
    },
    quantity: {
      default: 20,
      isLayout: true,
      type: 'string',
    },
    categoryName: {
      default: null,
      isLayout: true,
      type: 'string',
    },
  },
}

export default SponsoredProducts

```


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

[User] Show me the implementation of vtex-ads/react/Pixel.tsx from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

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

if (canUseDOM) {
  window.newtailMedia.isReady = true
}

```


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

[User] Show me the implementation of vtex-ads/react/SponsoredBrands.tsx from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable no-console */
import React from 'react'
import type { PropsWithChildren } from 'react'
import { defineMessages } from 'react-intl'

import SponsoredBrandsComponent from './components/SponsoredBrands'
import { VTEXAdsProvider } from './hooks/useAds'
import { useDebug } from './utils/debug'

function SponsoredBrands(
  props: PropsWithChildren<VTEXAdsSponsoredBrandsProps>
) {
  useDebug({
    name: 'Sponsored Brands',
    props,
    template: 'primary',
  })

  const isActive = props.active ?? true

  if (!isActive) return <></>

  return (
    <VTEXAdsProvider adType="sponsored_brand" {...props}>
      <SponsoredBrandsComponent
        hideHeader={props.hideHeader}
        hideLogo={props.hideLogo}
        hideBrandName={props.hideBrandName}
        hideHeadline={props.hideHeadline}
        hideDescription={props.hideDescription}
        template={props.template}
      />
    </VTEXAdsProvider>
  )
}

const messages = defineMessages({
  'sponsoredBrand.title': {
    id: 'admin/vtex-vtex-ads.sponsoredBrand.title',
    defaultMessage: '',
  },
  'common.active.title': {
    id: 'admin/vtex-vtex-ads.common.active.title',
    defaultMessage: '',
  },
  'common.placementNameAdmin.title': {
    id: 'admin/vtex-vtex-ads.common.placementNameAdmin.title',
    defaultMessage: '',
  },
  'sponsoredBrand.placementNameAdmin.description': {
    id: 'admin/vtex-vtex-ads.sponsoredBrand.placementNameAdmin.description',
    defaultMessage: '',
  },
  'common.quantityAdmin.title': {
    id: 'admin/vtex-vtex-ads.common.quantityAdmin.title',
    defaultMessage: '',
  },
  'common.quantityAdmin.product.description': {
    id: 'admin/vtex-vtex-ads.common.quantityAdmin.product.description',
    defaultMessage: '',
  },
  'common.categoryNameAdmin.title': {
    id: 'admin/vtex-vtex-ads.common.categoryNameAdmin.title',
    defaultMessage: '',
  },
  'common.categoryNameAdmin.description': {
    id: 'admin/vtex-vtex-ads.common.categoryNameAdmin.description',
    defaultMessage: '',
  },
})

SponsoredBrands.schema = {
  title: messages['sponsoredBrand.title'].id,
  type: 'object',
  properties: {
    placementName: {
      default: 'placement_sb_default',
      isLayout: true,
      type: 'string',
    },
    quantity: {
      default: 20,
      isLayout: true,
      type: 'string',
    },
    categoryName: {
      default: null,
      isLayout: true,
      type: 'string',
    },
  },
}

export default SponsoredBrands

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "version": "0.0.1",
  "name": "vtex-ads",
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "@types/styled-components": "^5.1.26",
    "apollo-client": "^2.6.8",
    "axios": "^1.3.4",
    "react": "^16.12.0",
    "react-apollo": "^3.1.3",
    "react-content-loader": "^6.2.1",
    "react-dom": "^16.12.0",
    "react-intl": "3",
    "state-pool": "^0.10.0",
    "styled-components": "^5.3.9"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/axios": "^0.14.0",
    "@types/jest": "^25.1.4",
    "@types/node": "^13.9.8",
    "@types/react": "^16.9.31",
    "@types/react-intl": "3",
    "@vtex/test-tools": "^3.4.3",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-cache-inmemory": "^1.6.5",
    "graphql": "^14.6.0",
    "typescript": "3.9.7",
    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.1/public/@types/vtex.css-handles",
    "vtex.device-detector": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.device-detector@0.2.6/public/@types/vtex.device-detector",
    "vtex.flex-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.flex-layout@0.21.5/public/@types/vtex.flex-layout",
    "vtex.order-items": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-items@0.14.0/public/@types/vtex.order-items",
    "vtex.order-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-manager@0.12.0/public/@types/vtex.order-manager",
    "vtex.pixel-interfaces": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pixel-interfaces@1.1.1/public/_types/react",
    "vtex.pixel-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pixel-manager@1.9.0/public/@types/vtex.pixel-manager",
    "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.1/public/@types/vtex.product-context",
    "vtex.product-highlights": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-highlights@2.3.2/public/@types/vtex.product-highlights",
    "vtex.product-list-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-list-context@0.4.1/public/@types/vtex.product-list-context",
    "vtex.product-price": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-price@1.32.1/public/@types/vtex.product-price",
    "vtex.product-summary": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-summary@2.90.7/public/@types/vtex.product-summary",
    "vtex.product-summary-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-summary-context@0.13.0/public/@types/vtex.product-summary-context",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.136.1/public/@types/vtex.render-runtime",
    "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.16.0/public/@types/vtex.rich-text",
    "vtex.search-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-graphql@0.69.2/public/@types/vtex.search-graphql",
    "vtex.search-page-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-page-context@0.2.0/public/@types/vtex.search-page-context",
    "vtex.session-client": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.session-client@1.0.4/public/@types/vtex.session-client",
    "vtex.slider-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.slider-layout@0.24.8/public/@types/vtex.slider-layout",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.13/public/@types/vtex.styleguide"
  },
  "resolutions": {
    "graphql": "14.6.0",
    "expect": "28.1.3",
    "pretty-format": "28.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 vtex-ads/react/Shelf.tsx from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable no-console */
import React from 'react'
import type { PropsWithChildren } from 'react'
import { defineMessages } from 'react-intl'

import ShelfComponent from './components/Shelf'
import { VTEXAdsProvider } from './hooks/useAds'
import { useDebug } from './utils/debug'

function Shelf(props: PropsWithChildren<NewtailMediaShelfProps>) {
  useDebug({
    name: 'Shelf - Sponsored products',
    props,
    template: 'primary',
  })

  const isActive = props.active ?? true

  if (!isActive) return <></>

  return (
    <VTEXAdsProvider adType="product" {...props}>
      <ShelfComponent />
    </VTEXAdsProvider>
  )
}

const messages = defineMessages({
  'shelf.title': {
    id: 'admin/vtex-vtex-ads.shelf.title',
    defaultMessage: '',
  },
  'common.active.title': {
    id: 'admin/vtex-vtex-ads.common.active.title',
    defaultMessage: '',
  },
  'common.placementNameAdmin.title': {
    id: 'admin/vtex-vtex-ads.common.placementNameAdmin.title',
    defaultMessage: '',
  },
  'shelf.placementNameAdmin.description': {
    id: 'admin/vtex-vtex-ads.shelf.placementNameAdmin.description',
    defaultMessage: '',
  },
  'common.quantityAdmin.title': {
    id: 'admin/vtex-vtex-ads.common.quantityAdmin.title',
    defaultMessage: '',
  },
  'common.quantityAdmin.product.description': {
    id: 'admin/vtex-vtex-ads.common.quantityAdmin.product.description',
    defaultMessage: '',
  },
  'common.categoryNameAdmin.title': {
    id: 'admin/vtex-vtex-ads.common.categoryNameAdmin.title',
    defaultMessage: '',
  },
  'common.categoryNameAdmin.description': {
    id: 'admin/vtex-vtex-ads.common.categoryNameAdmin.description',
    defaultMessage: '',
  },
})

Shelf.schema = {
  title: messages['shelf.title'].id,
  type: 'object',
  properties: {
    placementName: {
      default: 'products',
      isLayout: true,
      type: 'string',
    },
    quantity: {
      default: 20,
      isLayout: true,
      type: 'string',
    },
    categoryName: {
      default: null,
      isLayout: true,
      type: 'string',
    },
  },
}

export default Shelf

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "definitions": {
    "Banner": {
      "type": "object",
      "properties": {
        "active": {
          "title": "admin/vtex-vtex-ads.common.active.title",
          "type": "boolean",
          "default": true
        },
        "placementNameAdmin": {
          "title": "admin/vtex-vtex-ads.common.placementNameAdmin.title",
          "description": "admin/vtex-vtex-ads.banner.placementNameAdmin.description",
          "type": "string"
        },
        "sizeAdmin": {
          "title": "admin/vtex-vtex-ads.banner.sizeAdmin.title",
          "description": "admin/vtex-vtex-ads.banner.sizeAdmin.description",
          "type": "string"
        },
        "sizeMobileAdmin": {
          "title": "admin/vtex-vtex-ads.banner.sizeMobileAdmin.title",
          "description": "admin/vtex-vtex-ads.banner.sizeMobileAdmin.description",
          "type": "string"
        },
        "quantityAdmin": {
          "title": "admin/vtex-vtex-ads.common.quantityAdmin.title",
          "description": "admin/vtex-vtex-ads.common.quantityAdmin.banner.description",
          "type": "string"
        },
        "categoryNameAdmin": {
          "title": "admin/vtex-vtex-ads.common.categoryNameAdmin.title",
          "description": "admin/vtex-vtex-ads.common.categoryNameAdmin.description",
          "type": "string"
        }
      }
    },
    "Shelf": {
      "type": "object",
      "properties": {
        "active": {
          "title": "admin/vtex-vtex-ads.common.active.title",
          "type": "boolean",
          "default": true
        },
        "placementNameAdmin": {
          "title": "admin/vtex-vtex-ads.common.placementNameAdmin.title",
          "description": "admin/vtex-vtex-ads.shelf.placementNameAdmin.description",
          "type": "string"
        },
        "quantityAdmin": {
          "title": "admin/vtex-vtex-ads.common.quantityAdmin.title",
          "description": "admin/vtex-vtex-ads.common.quantityAdmin.product.description",
          "type": "string"
        },
        "categoryNameAdmin": {
          "title": "admin/vtex-vtex-ads.common.categoryNameAdmin.title",
          "description": "admin/vtex-vtex-ads.common.categoryNameAdmin.description",
          "type": "string"
        }
      }
    },
    "SponsoredBrands": {
      "type": "object",
      "properties": {
        "active": {
          "title": "admin/vtex-vtex-ads.common.active.title",
          "type": "boolean",
          "default": true
        },
        "placementNameAdmin": {
          "title": "admin/vtex-vtex-ads.common.placementNameAdmin.title",
          "description": "admin/vtex-vtex-ads.shelf.placementNameAdmin.description",
          "type": "string"
        },
        "quantityAdmin": {
          "title": "admin/vtex-vtex-ads.common.quantityAdmin.title",
          "description": "admin/vtex-vtex-ads.common.quantityAdmin.product.description",
          "type": "string"
        },
        "categoryNameAdmin": {
          "title": "admin/vtex-vtex-ads.common.categoryNameAdmin.title",
          "description": "admin/vtex-vtex-ads.common.categoryNameAdmin.description",
          "type": "string"
        }
      }
    },
    "SponsoredProducts": {
      "type": "object",
      "properties": {
        "active": {
          "title": "admin/vtex-vtex-ads.common.active.title",
          "type": "boolean",
          "default": true
        },
        "placementNameAdmin": {
          "title": "admin/vtex-vtex-ads.common.placementNameAdmin.title",
          "description": "admin/vtex-vtex-ads.shelf.placementNameAdmin.description",
          "type": "string"
        },
        "quantityAdmin": {
          "title": "admin/vtex-vtex-ads.common.quantityAdmin.title",
          "description": "admin/vtex-vtex-ads.common.quantityAdmin.product.description",
          "type": "string"
        },
        "categoryNameAdmin": {
          "title": "admin/vtex-vtex-ads.common.categoryNameAdmin.title",
          "description": "admin/vtex-vtex-ads.common.categoryNameAdmin.description",
          "type": "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 vtex-ads/store/blocks.json from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.col#product-image": {
    "children": ["product-summary-image#shelf"]
  },

  "product-summary-image#shelf": {
    "props": {
      "showBadge": true,
      "aspectRatio": "1:1",
      "maxHeight": 300
    }
  },

  "product-list-price#summary": {
    "props": {
      "blockClass": "summary"
    }
  },
  "product-selling-price#summary": {
    "props": {
      "blockClass": "summary"
    }
  },

  "product-price-savings#summary": {
    "props": {
      "markers": ["discount"],
      "blockClass": "summary"
    }
  },

  "flex-layout.row#selling-price-savings": {
    "props": {
      "colGap": 1,
      "preserveLayoutOnMobile": true,
      "preventHorizontalStretch": true,
      "marginBottom": 1,
      "horizontalAlign": "center"
    },
    "children": ["product-list-price#summary", "product-selling-price#summary"]
  },

  "product-sponsored-tag": {},

  "product-summary.shelf": {
    "children": [
      "product-summary-image#shelf",
      "product-summary-name",
      "flex-layout.row#selling-price-savings",
      "product-price-savings#summary",
      "product-sponsored-tag"
    ]
  },

  "slider-layout#newtail-shelf": {
    "props": {
      "itemsPerPage": {
        "desktop": 4,
        "tablet": 1,
        "phone": 1
      },
      "blockClass": "shelf",
      "navigationStep": 1,
      "infinite": true,
      "fullWidth": false,
      "showNavigationArrows": "desktopOnly",
      "showPaginationDots": "mobileOnly"
    }
  },

  "list-context.product-list-static": {
    "blocks": ["product-summary.shelf"],
    "children": ["slider-layout#newtail-shelf"]
  },

  "slider-layout#newtail-shelf-with-video": {
    "props": {
      "itemsPerPage": {
        "desktop": 2,
        "tablet": 1,
        "phone": 1
      },
      "blockClass": "shelf",
      "navigationStep": 1,
      "infinite": true,
      "fullWidth": false,
      "showNavigationArrows": "desktopOnly",
      "showPaginationDots": "mobileOnly"
    }
  },

  "list-context.product-list-static#with-video": {
    "blocks": ["product-summary.shelf"],
    "children": ["slider-layout#newtail-shelf-with-video"]
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "vtex-ads-pixel-event": {
    "component": "PixelEvent"
  },

  "vtex-ads-banner": {
    "component": "Banner",
    "content": {
      "$ref": "#/definitions/Banner"
    }
  },

  "vtex-ads-sponsored-brands": {
    "component": "SponsoredBrands",
    "required": ["list-context.product-list-static"],
    "allowed": ["product-summary.shelf", "rich-text"],
    "content": {
      "$ref": "#/definitions/SponsoredBrands"
    }
  },

  "vtex-ads-shelf": {
    "required": ["list-context.product-list-static"],
    "allowed": ["product-summary.shelf", "rich-text"],
    "component": "Shelf",
    "content": {
      "$ref": "#/definitions/Shelf"
    }
  },

  "vtex-ads-products": {
    "required": ["product-summary.shelf"],
    "component": "SponsoredProducts",
    "content": {
      "$ref": "#/definitions/SponsoredProducts"
    }
  },

  "vtex-ads-conversion": {
    "component": "Conversion"
  },

  "pixel.vtex-ads": {
    "component": "Pixel"
  },

  "product-sponsored-tag": {
    "component": "ProductSponsoredTag"
  },

  "pixel.newtail-media": {
    "component": "Pixel"
  },

  "newtail-media-pixel-event": {
    "component": "PixelEvent"
  },

  "newtail-media-banner": {
    "component": "Banner",
    "content": {
      "$ref": "#/definitions/Banner"
    }
  },

  "newtail-media-sponsored-brands": {
    "component": "SponsoredBrands",
    "required": ["list-context.product-list-static"],
    "allowed": ["product-summary.shelf", "rich-text"],
    "content": {
      "$ref": "#/definitions/SponsoredBrands"
    }
  },

  "newtail-media-shelf": {
    "required": ["list-context.product-list-static"],
    "allowed": ["product-summary.shelf", "rich-text"],
    "component": "Shelf",
    "content": {
      "$ref": "#/definitions/Shelf"
    }
  },

  "newtail-media-products": {
    "required": ["product-summary.shelf"],
    "component": "SponsoredProducts",
    "content": {
      "$ref": "#/definitions/SponsoredProducts"
    }
  }
}

```


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

[User] Show me the implementation of vtex-ads/docs/public/README.md from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```markdown
Content for https://newtail-media.readme.io/reference/vtex
```


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

[User] Show me the implementation of vtex-ads/examples/store-theme/manifest.json from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

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

```


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

[User] Show me the implementation of vtex-ads/examples/store-theme/styles/css/vtex.vtex-ads.css from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```css
/**
* VTEX Ads - CSS Handles
*
* This file contains the CSS handles for the VTEX Ads app.
* It is used to style the components of the app.
*
* @author VTEX
* @version 0.0.1
*/

/**
* vtex-ads-shelf
*/
.shelf-container {}

/**
* vtex-ads-banner
*/
.banner-container {}
.banner-item {}
.banner-image {}

/**
* vtex-ads-sponsored-brands
*/

.sponsored-brands-container {}

.sponsored-brands-header {}

.sponsored-brands-header-container {}

.sponsored-brands-header-content {}

.sponsored-brands-header-headline {}

.sponsored-brands-header-description {}

.sponsored-brands-header-button {}

.sponsored-brands-content {}

.sponsored-brands-label-container {}

.sponsored-brands-label-text {}

.sponsored-brands-logo-container {}

.sponsored-brands-logo {}

.sponsored-brands-banner-container {}

.sponsored-brands-products-container {}

.sponsored-brands-banner-image {}

.sponsored-brands-banner-item {}

/**
* vtex-ads-pixel-event
*/

.product-pixel-event {}

```


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

[User] Show me the implementation of vtex-ads/examples/store-theme/store/blocks/vtexads/site-pdp-middle-product.jsonc from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```json
{
  /**
   * AD Block
   * [en] Here is called the block that builds the sponsored products carousel
   */
  "vtex-ads-shelf#pdp-middle": {
    "title": "VTEX Ads - Product shelf middle PDP",
    "blocks": [
      "rich-text#vtex-ads-sponsored-title", // Optional
      "list-context.product-list-static#vtex-ads"
    ],
    "props": {
      "placementName": "site_pdp_middle_product", // {channel}_{context}_ {position}_{type}
      "quantity": 10 // Optional, default is 20
    }
  },

  /**
   * UI Blocks
   * [en] From here, we will have examples of auxiliary layout blocks
   */

  /**
   * Responsive layout
   * [en] Not all are required, you can use according to your customization needs
   */

  // Desktop
  "flex-layout.col#vtex-ads-pdp-middle-product.desktop": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.flex-layout
    "children": ["vtex-ads-shelf#pdp-middle"]
  },

  "flex-layout.row#vtex-ads-pdp-middle-product.desktop": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.flex-layout
    "children": ["flex-layout.col#vtex-ads-pdp-middle-product.desktop"]
  },

  "responsive-layout.desktop#vtex-ads-pdp-middle-product": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.responsive-layout
    "children": ["flex-layout.row#vtex-ads-pdp-middle-product.desktop"]
  },

  // Mobile
  "flex-layout.col#vtex-ads-pdp-middle-product.mobile": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.flex-layout
    "children": ["vtex-ads-shelf#pdp-middle"]
  },

  "flex-layout.row#vtex-ads-pdp-middle-product.mobile": {
    "children": ["flex-layout.col#vtex-ads-pdp-middle-product.mobile"]
  },

  "responsive-layout.mobile#vtex-ads-pdp-middle-product": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.responsive-layout
    "children": ["flex-layout.row#vtex-ads-pdp-middle-product.mobile"]
  },

  /**
   * Group responsive
   */
  "flex-layout.col#vtex-ads-pdp-middle-product": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.flex-layout
    "children": [
      "responsive-layout.desktop#vtex-ads-pdp-middle-product",
      "responsive-layout.mobile#vtex-ads-pdp-middle-product"
    ]
  },

  /**
   * Final component
   * This block will be called in the PDP of your theme in the position you want to insert ads.
   */
  "flex-layout.row#vtex-ads-pdp-middle-product": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.flex-layout
    "children": ["flex-layout.col#vtex-ads-pdp-middle-product"]
  }
}

```


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

[User] Show me the implementation of vtex-ads/examples/store-theme/store/blocks/vtexads/site-pdp-top-banner.jsonc from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```json
{
  /**
   * Ad Block
   * [en] Here is called the block that builds the sponsored banner
   */
  "vtex-ads-banner#pdp-top": {
    "title": "VTEX Ads - Banner top PDP",
    "props": {
      "placementName": "site_pdp_top_banner", // {channel}_{context}_ {position}_{type}
      "size": "1280x176", // Same size registered in the ad platform
      "sizeMobile": "634x300" // Same size registered in the ad platform
    }
  },

  /**
   * UI Blocks
   * [en] From here, we will have examples of auxiliary layout blocks
   */

  /**
   * Responsive layout
   * [en] Not all are required, you can use according to your customization needs
   */

  // Desktop

  "flex-layout.col#vtex-ads-pdp-top-banner.desktop": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.flex-layout
    "children": ["vtex-ads-banner#pdp-top"]
  },
  "flex-layout.row#vtex-ads-pdp-top-banner.desktop": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.flex-layout
    "children": ["flex-layout.col#vtex-ads-pdp-top-banner.desktop"]
  },

  "responsive-layout.desktop#vtex-ads-pdp-top-banner": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.responsive-layout
    "children": ["flex-layout.row#vtex-ads-pdp-top-banner.desktop"]
  },

  // Mobile
  "flex-layout.col#vtex-ads-pdp-top-banner.mobile": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.flex-layout
    "children": ["vtex-ads-banner#pdp-top"]
  },
  "flex-layout.row#vtex-ads-pdp-top-banner.mobile": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.flex-layout
    "children": ["flex-layout.col#vtex-ads-pdp-top-banner.mobile"]
  },

  "responsive-layout.mobile#vtex-ads-pdp-top-banner": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.responsive-layout
    "children": ["flex-layout.row#vtex-ads-pdp-top-banner.mobile"]
  },

  /**
   * Group responsive
   */
  "flex-layout.col#vtex-ads-pdp-top-banner": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.flex-layout
    "children": [
      "responsive-layout.desktop#vtex-ads-pdp-top-banner",
      "responsive-layout.mobile#vtex-ads-pdp-top-banner"
    ]
  },

  /**
   * Final component
   * This block will be called in the PDP of your theme in the position you want to insert ads.
   */
  "flex-layout.row#vtex-ads-pdp-top-banner": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.flex-layout
    "children": ["flex-layout.col#vtex-ads-pdp-top-banner"]
  }
}

```


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

[User] Show me the implementation of vtex-ads/examples/store-theme/store/blocks/vtexads/site-search-top-sponsored-brands.jsonc from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```json
{
  /**
   * AD Block
   * [en] Here is called the block that builds the sponsored products carousel
   */
  "vtex-ads-sponsored-brands#search-top": {
    "title": "VTEX Ads - Sponsored brand",
    "blocks": ["list-context.product-list-static#vtex-ads"],
    "props": {
      "placementName": "site_search_top_sb", // {channel}_{context}_ {position}_{type}
      "sizeMobile": "450x150", // Same size registered in the ad platform
      "size": "450x225", // Same size registered in the ad platform
      "hideHeader": true // Optional
    }
  },

  /**
   * UI Blocks
   * [en] From here, we will have examples of auxiliary layout blocks
   */

  /**
   * Responsive layout
   * [en] Not all are required, you can use according to your customization needs
   */

  // Desktop
  "flex-layout.col#vtex-ads-search-sb-top.desktop": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.flex-layout
    "children": ["vtex-ads-sponsored-brands#search-top"]
  },

  "flex-layout.row#vtex-ads-search-sb-top.desktop": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.flex-layout
    "children": ["flex-layout.col#vtex-ads-search-sb-top.desktop"]
  },

  "responsive-layout.desktop#vtex-ads-search-sb-top": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.responsive-layout
    "children": ["flex-layout.row#vtex-ads-search-sb-top.desktop"]
  },

  // Mobile
  "flex-layout.col#vtex-ads-search-sb-top.mobile": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.flex-layout
    "children": ["vtex-ads-sponsored-brands#search-top"]
  },

  "flex-layout.row#vtex-ads-search-sb-top.mobile": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.flex-layout
    "children": ["flex-layout.col#vtex-ads-search-sb-top.mobile"]
  },

  "responsive-layout.mobile#vtex-ads-search-sb-top": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.responsive-layout
    "children": ["flex-layout.row#vtex-ads-search-sb-top.mobile"]
  },

  /**
   * export components
   */

  "flex-layout.col#vtex-ads-search-sb-top": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.flex-layout
    "children": [
      "responsive-layout.desktop#vtex-ads-search-sb-top",
      "responsive-layout.mobile#vtex-ads-search-sb-top"
    ]
  },

  "flex-layout.row#vtex-ads-search-sb-top": {
    // [DOC] https://developers.vtex.com/docs/apps/vtex.flex-layout
    "children": ["flex-layout.col#vtex-ads-search-sb-top"]
  }
}

```


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

[User] Show me the implementation of vtex-ads/examples/store-theme/store/blocks/vtexads/common.jsonc from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```json
/**
 * Common blocks for VTEX Ads
 * These blocks will be used in the vtex-ads blocks. Required and optional dependencies.
 */
{
  /**
   * Optional title - `rich-text`
   * Allowed by vtex-ads-shelf
   */
  "rich-text#vtex-ads-sponsored-title": {
    "title": "VTEX Ads - Sponsored title",
    "props": {
      "text": "Separados para você"
    }
  },
  /**
   * Product card
   * Optional - If you don't want to customize, use the default card from the theme.
   * Just an example of how to customize the product card. Should be a copy of your default product card.
   */
  "product-summary.shelf#product-custom-ads": {
    "children": [
      "vtex-ads-pixel-event",
      "add-to-list-btn#shelf",
      "flex-layout.row#image",
      "product-summary-name",
      "new-price-pbm-shelf",
      "flex-layout.row#shelf-default-buy"
    ],
    "props": {
      "blockClass": ["shelf-default"]
    }
  },

  /**
   * Slider layout
   * Optional - If you don't want to customize, use the default slider-layout from the theme.
   */
  "slider-layout#vtex-ads": {
    "title": "VTEX Ads - Slider layout",
    "props": {
      "itemsPerPage": {
        "desktop": 4,
        "tablet": 2,
        "mobile": 1
      }
    }
  },

  /**
   * Product list
   */
  "list-context.product-list-static#vtex-ads": {
    "blocks": ["product-summary.shelf#product-custom-ads"],
    "children": ["slider-layout#vtex-ads"],
    "title": "VTEX Ads - Product shelf - Wrapper context"
  }
}

```


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

[User] Show me the implementation of vtex-ads/examples/store-theme/store/blocks/product/product.example.jsonc from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.product": {
    "children": [
      "responsive-layout.desktop#pdp",
      "responsive-layout.tablet#pdp",
      "responsive-layout.phone#pdp"
    ]
  },
  "responsive-layout.desktop#pdp": {
    "children": [
      "flex-layout.row#vtex-ads-pdp-top-banner", // ./store-theme/store/blocks/vtexads/site-pdp-top-banner.jsonc
      "flex-layout.row#pdp-desktop-main",
      "flex-layout.row#vtex-ads-pdp-middle-product", // ./store-theme/store/blocks/vtexads/site-pdp-middle-product.jsonc
      "flex-layout.row#pdp-desktop-info"
    ]
  },
  "responsive-layout.tablet#pdp": {
    "children": [
      "flex-layout.row#vtex-ads-pdp-top-banner", // ./store-theme/store/blocks/vtexads/site-pdp-top-banner.jsonc
      "flex-layout.row#pdp-desktop-main",
      "flex-layout.row#vtex-ads-pdp-middle-product", // ./store-theme/store/blocks/vtexads/site-pdp-middle-product.jsonc
      "flex-layout.row#pdp-desktop-info"
    ]
  },
  "responsive-layout.phone#pdp": {
    "children": [
      "flex-layout.row#vtex-ads-pdp-top-banner", // ./store-theme/store/blocks/vtexads/site-pdp-top-banner.jsonc
      "flex-layout.row#pdp-desktop-main",
      "flex-layout.row#vtex-ads-pdp-middle-product", // ./store-theme/store/blocks/vtexads/site-pdp-middle-product.jsonc
      "flex-layout.row#pdp-desktop-info"
    ]
  }
}

```


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

[User] Show me the implementation of vtex-ads/examples/store-theme/store/blocks/search/search.example.jsonc from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.search": {
    "blocks": ["search-result-layout"]
  },

  "store.search#brand": {
    "blocks": ["search-result-layout"]
  },

  "store.search#department": {
    "blocks": ["search-result-layout"]
  },

  "store.search#category": {
    "blocks": ["search-result-layout"]
  },

  "store.search#subcategory": {
    "blocks": ["search-result-layout"]
  },

  "search-result-layout": {
    "blocks": [
      "search-result-layout.desktop",
      "search-result-layout.mobile",
      "search-not-found-layout"
    ]
  },

  "search-result-layout.desktop": {
    "children": [
      "flex-layout.row#vtex-ads-search-sb-top", // ./store-theme/store/blocks/vtexads/site-search-top-sponsored-brands.jsonc
      "flex-layout.row#result"
    ]
  },

  "search-result-layout.mobile": {
    "children": [
      "flex-layout.row#vtex-ads-search-sb-top", // ./store-theme/store/blocks/vtexads/site-search-top-sponsored-brands.jsonc
      "flex-layout.row#result"
    ]
  },

  "search-not-found-layout": {
    "children": ["flex-layout.row#page-not-found", "tag-not-found"]
  }
}

```


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

[User] Show me the implementation of vtex-ads/react/settings/index.tsx from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```tsx
export const tagClassnameDefault = 'newtail-sponsored-tag'

// Default
export const searchSelectorDefault =
  '.vtex-search-result-3-x-searchResultContainer #gallery-layout-container'

// Locatel
// export const searchSelectorDefault =
//   '.vtex-search-result-3-x-searchResultContainer .vtex-search-result-3-x-gallery--gallery-main-search'

// Zona sul
// export const searchSelectorDefault =
//   '.vtex-search-result-3-x-searchResultContainer .vtex-search-result-3-x-gallery'

```


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

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

[Assistant]
Here's the implementation:

```typescript
// /* Typings for `render-runtime` */
// declare module 'vtex.render-runtime' {
//   import type { 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 (data: ChildBlockProps): ChildBlock {}

//   type UseTreePath = () => Record<string, unknown>

//   export const useTreePath: UseTreePath
//   export const Helmet: ReactElement
//   export const Link: ReactType
//   export const NoSSR: ReactElement
//   export const RenderContextConsumer: ReactElement
//   export const canUseDOM: boolean
//   export const withRuntimeContext: <TOriginalProps>(
//     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 vtex-ads/react/typings/vtex.search-page-context.d.ts from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.search-page-context/SearchPageContext' {
  type DispatchFunction = (payload: {
    type: string
    args?: Record<string, unknown>
  }) => void

  export const useSearchPage: () => any
  export const useSearchPageState: () => SearchPageState
  export const useSearchPageStateDispatch: () => DispatchFunction

  export interface SearchPageState {
    galleryLayout?: string
    searchQuery: 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 vtex-ads/react/typings/events.d.ts from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface VtexEvent extends MessageEvent {
  data:
    | ProductViewData
    | ProductClickData
    | OrderPlacedData
    | OrderPlacedTrackedData
    | PageViewData
    | ProductImpressionData
    | AddToCartData
    | RemoveToCartData
    | CartChangedData
    | HomePageInfo
    | ProductPageInfoData
    | SearchPageInfoData
    | UserData
    | CartIdData
    | CartData
    | PromoViewData
    | PromotionClickData
}
interface PixelMessage extends MessageEvent {
  data:
    | ProductViewData
    | ProductClickData
    | OrderPlacedData
    | OrderPlacedTrackedData
    | PageViewData
    | ProductImpressionData
    | AddToCartData
    | RemoveToCartData
    | CartChangedData
    | HomePageInfo
    | ProductPageInfoData
    | SearchPageInfoData
    | UserData
    | CartIdData
    | CartData
    | PromoViewData
    | PromotionClickData
}

interface EventData {
  event: string
  eventName: string
  currency: string
}

interface PageInfoData extends EventData {
  event: 'pageInfo'
  eventName: 'vtex:pageInfo'
  accountName: string
  pageTitle: string
  pageUrl: string
}

interface UserData extends PageInfoData {
  eventType: 'userData'
  eventName: 'vtex:userData'
  firstName?: string
  lastName?: string
  document?: string
  id?: string
  email?: string
  phone?: string
  isAuthenticated: boolean
}

interface CartIdData extends PageInfoData {
  eventType: 'cartId'
  eventName: 'vtex:cartId'
  cartId: string
}

interface HomePageInfo extends PageInfoData {
  eventType: 'homeView'
}

interface ProductPageInfoData extends PageInfoData {
  eventType: 'productPageInfo'
}

interface SearchPageInfoData extends PageInfoData {
  eventType:
    | 'internalSiteSearchView'
    | 'categoryView'
    | 'departmentView'
    | 'emptySearchView'
  category?: CategoryMetaData
  department?: DepartmentMetaData
  search?: SearchMetaData
}

interface CategoryMetaData {
  id: string
  name: string
}

interface DepartmentMetaData {
  id: string
  name: string
}

interface SearchMetaData {
  term: string
  category: CategoryMetaData
  results: number
}

interface PageViewData extends EventData {
  event: 'pageView'
  eventName: 'vtex:pageView'
  pageTitle: string
  pageUrl: string
  referrer: string
}

interface AddToCartData extends EventData {
  event: 'addToCart'
  eventName: 'vtex:addToCart'
  items: CartItem[]
}

interface RemoveToCartData extends EventData {
  event: 'removeFromCart'
  eventName: 'vtex:removeFromCart'
  items: CartItem[]
}

interface CartChangedData extends EventData {
  event: 'cartChanged'
  eventName: 'vtex:cartChanged'
  items: CartItem[]
}

interface OrderPlacedData extends Order, EventData {
  event: 'orderPlaced'
  eventName: 'vtex:orderPlaced'
}

interface OrderPlacedTrackedData extends Order, EventData {
  event: 'orderPlacedTracked'
  eventName: 'vtex:orderPlacedTracked'
}

interface ProductViewData extends EventData {
  event: 'productView'
  eventName: 'vtex:productView'
  product: ProductSummary
  list?: string
}

interface ProductClickData extends EventData {
  event: 'productClick'
  eventName: 'vtex:productClick'
  product: ProductSummary
  position: number
  list?: string
}

interface ProductImpressionData extends EventData {
  event: 'productImpression'
  eventName: 'vtex:productImpression'
  impressions: Impression[]
  product?: ProductSummary // deprecated, use impressions list!
  position?: number // deprecated, use impressions list!
  list: string
}

interface CartLoadedData extends EventData {
  event: 'cartLoaded'
  eventName: 'vtex:cartLoaded'
  orderForm: OrderForm
}

interface PromoViewData extends EventData {
  event: 'promoView'
  eventType: 'vtex:promoView'
  promotions: Promotion[]
}

interface PromotionClickData extends EventData {
  event: 'promotionClick'
  eventType: 'vtex:promotionClick'
  promotions: Promotion[]
}

interface Promotion {
  id?: string
  name?: string
  creative?: string
  position?: string
}

interface CartItemAdditionalInfo {
  brandName: string
  brandId: string
}

interface CartItem {
  id: string
  productCategories: Record<string, string> | null
  additionalInfo: CartItemAdditionalInfo | null
  brand: string
  ean: string
  category: string
  detailUrl: string
  imageUrl: string
  name: string
  skuName: string
  price: number
  priceIsInt?: boolean
  sellingPrice: number
  productId: string
  productRefId: string
  quantity: number
  skuId: string
  referenceId: string // SKU reference id
  variant: string
}

interface Totalizer {
  id: string
  name: string
  value: number
}

interface Seller {
  id: string
  name: string
  logo: string
}

interface ClientProfileData {
  email: string
  firstName: string
  lastName: string
}

interface Address {
  addressId: string
  postalCode: string
  street: string
  number: string
  neighborhood: string
  complement: string
  city: string
  state: string
}

interface DeliveryOption {
  id: string
  price: number
  estimate: string
  isSelected: boolean
}

interface Shipping {
  selectedAddress: Address
  deliveryOptions?: DeliveryOption[]
}

interface MarketingData {
  coupon: string
  utmCampaign: string
  utmSource: string
  utmMedium: string
  utmiCampaign: string
  utmiPage: string
  utmiPart: string
}

interface OrderForm {
  id: string
  totalizers: Totalizer[]
  sellers: Seller[]
  salesChannel: string
  items: CartItem[]
  canEditData: boolean
  loggedIn: boolean
  clientProfileData?: ClientProfileData
  shipping?: Shipping
  value: number
  marketingData?: MarketingData
}

interface Order {
  accountName: string
  corporateName: string
  coupon: string
  currency: string
  openTextField: string
  orderGroup: string
  ordersInOrderGroup: string[]
  salesChannel: string
  visitorAddressCity: string
  visitorAddressComplement: string
  visitorAddressCountry: string
  visitorAddressNeighborhood: string
  visitorAddressNumber: string
  visitorAddressPostalCode: string
  visitorAddressState: string
  visitorAddressStreet: string
  visitorContactInfo: string[]
  visitorContactPhone: string
  visitorType: string
  transactionId: string
  transactionDate: string
  transactionAffiliation: string
  transactionTotal: number
  transactionShipping: number
  transactionSubtotal: number
  transactionDiscounts: number
  transactionTax: number
  transactionCurrency: string
  transactionPaymentType: PaymentType[]
  transactionShippingMethod: ShippingMethod[]
  transactionLatestShippingEstimate: Date
  transactionProducts: ProductOrder[]
  transactionPayment: {
    id: string
  }
}

interface Impression {
  product: ProductSummary
  position: number
}

interface PaymentType {
  group: string
  paymentSystemName: string
  installments: number
  value: number
}

interface ShippingMethod {
  itemId: string
  selectedSla: string
}

interface ProductOrder {
  id: string
  name: string
  sku: string
  skuRefId: string
  skuName: string
  productRefId: string
  ean: string
  slug: string
  brand: string
  brandId: string
  seller: string
  sellerId: string
  category: string
  categoryId: string
  categoryTree: string[]
  categoryIdTree: string[]
  priceTags: PriceTag[]
  originalPrice: number
  price: number
  sellingPrice: number
  tax: number
  quantity: number
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  components: any[]
  measurementUnit: string
  unitMultiplier: number
}

interface PriceTag {
  identifier: string
  isPercentual: boolean
  value: number
}

interface Product {
  brand: string
  brandId: string
  categories: string[]
  categoryId: string
  categoryTree: Array<{ id: string; name: string }>
  detailUrl: string
  items: Item[]
  linkText: string
  productId: string
  productName: string
  productReference: string
  selectedSku: Item
}

interface ProductSummary {
  brand: string
  brandId: string
  categories: string[]
  items: ItemSummary[]
  linkText: string
  productId: string
  productName: string
  productReference: string
  sku: ItemSummary
}

type Item = ItemSummary

interface ItemSummary {
  itemId: string
  ean: string
  name: string
  referenceId: { Key: string; Value: string }
  seller?: Seller
  sellers: Seller[]
  imageUrl?: string
}

interface Seller {
  commertialOffer: CommertialOffer
  sellerId: string
  sellerDefault: boolean
}

interface CommertialOffer {
  Price: number
  ListPrice: number
  AvailableQuantity: number
}

type ProductViewReferenceId = Array<Item['referenceId']>

```


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

[User] Show me the implementation of vtex-ads/react/typings/vtex.session-client.d.ts from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface SessionSuccess {
  id: string
  namespaces: {
    [key: string]: Record<
      string,
      {
        value: string
      }
    >
    public: Record<
      string,
      {
        value: string
      }
    >
  }
}

```


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

[User] Show me the implementation of vtex-ads/react/typings/gql.d.ts from the vtex-ads 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 vtex-ads/react/typings/ProductSummaryCustom.json from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "type": "object",
  "properties": {
    "product": {
      "title": "Produto",
      "type": "object"
    },
    "actionOnClick": {
      "title": "Ação ao clicar",
      "type": "funcition"
    }
  }
}

```


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

[User] Show me the implementation of vtex-ads/react/typings/ProductContextValue.d.ts from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface ProductContextValue {
  loadingItem: boolean
  product: Product
  selectedItem: Item
  selectedQuantity: number
  skuSelector: SkuSelector
  buyButton: BuyButton
  assemblyOptions: AssemblyOptions
}

interface AssemblyOptions {
  items: Items
  inputValues: Items
  areGroupsValid: Items
}

interface BuyButton {
  clicked: boolean
}

interface SkuSelector {
  selectedImageVariationSKU?: string
  isVisible: boolean
  areAllVariationsSelected: boolean
}

interface Product {
  brand: string
  brandId: number
  cacheId: string
  categoryTree: CategoryTree[]
  description: string
  items: string[]
  link: string
  linkText: string
  priceRange: PriceRange
  productClusters: ProductCluster[]
  productId: string
  productName: string
  productReference: string
  properties: string[]
  specificationGroups: string[]
  __typename: string
  sku: Sku
}

interface Sku {
  images: Image[]
  itemId: string
  measurementUnit: string
  name: string
  sellers: Seller[]
  unitMultiplier: number
  variations: string[]
  __typename: string
  seller: Seller
  referenceId: ReferenceId
  image: Image
}

interface ReferenceId {
  Value: string
}

interface ProductCluster {
  id: string
  name: string
  __typename: string
}

interface PriceRange {
  listPrice: ListPrice
  sellingPrice: ListPrice
  __typename: string
}

interface ListPrice {
  highPrice: number
  lowPrice?: number
  __typename: string
}

interface Item {
  images: Image[]
  itemId: string
  measurementUnit: string
  name: string
  sellers: Seller[]
  unitMultiplier: number
  variations: string[]
  __typename: string
}

interface Seller {
  commertialOffer: CommertialOffer
  sellerId: string
  __typename: string
}

interface CommertialOffer {
  AvailableQuantity: number
  Installments: Installment[]
  ListPrice: number
  Price: number
  PriceWithoutDiscount: number
  Tax: number
  discountHighlights: DiscountHighlight[]
  taxPercentage: number
  teasers: string[]
  __typename: string
}

interface DiscountHighlight {
  name: string
  __typename: string
}

interface Installment {
  InterestRate: number
  Name: string
  NumberOfInstallments: number
  TotalValuePlusInterestRate: number
  Value: number
  __typename: string
}

interface Image {
  imageLabel: string
  imageTag: string
  imageUrl: string
  __typename: string
}

interface CategoryTree {
  slug: string
  __typename: 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 vtex-ads/react/typings/vtex-styleguide.d.ts from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.styleguide' {
  import type { ElementType, JSXElementConstructor } from 'react'

  export const Button: ElementType | JSXElementConstructor
  export const NumericStepper: ElementType | JSXElementConstructor
  export const Spinner: ElementType | JSXElementConstructor
}

```


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

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

[Assistant]
Here's the implementation:

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

declare global {
  interface Window {
    newtailMedia: {
      publisherId: string
      brandCode?: string
      isReady: boolean
    }
  }

  interface StorefrontFunctionComponent<P = Record<string, unknown>>
    extends FunctionComponent<P> {
    schema?: Record<string, unknown>
    getSchema?(props?: P): Record<string, unknown>
  }

  interface Product {
    brand: string
    brandId: number
    cacheId: string
    categories?: string[]
    clusterHighlights?: Array<{ id: string; name: string }>
    categoryTree?: Array<{ slug: string }>
    description?: string
    items: SKU[]
    link: string
    linkText: string
    priceRange: ProductPriceRange
    productClusters?: Array<{ id: string; name: string }>
    productId: string
    productName: string
    productReference: string
    properties?: Array<{ name: string; values: string[] }>
    sku?: SKU
    specificationGroups: SpecificationGroup[]
  }

  interface ProductPriceRange {
    sellingPrice: PriceRange
    listPrice: PriceRange
  }

  interface PriceRange {
    highPrice: number
    lowPrice: number
  }

  interface SpecificationGroupProperty {
    originalName: string
    name: string
    values: string[]
  }

  interface SpecificationGroup {
    name?: string
    originalName?: string
    specifications?: SpecificationGroupProperty[]
  }

  interface Item {
    quantity: number
    product: Product
    selectedItem: SKU
  }

  interface CartItem {
    id: string
    productId: string
    quantity: number
    uniqueId: string
    detailUrl: string
    name: string
    brand: string
    category: string
    productRefId: string
    seller: string
    variant: string
    skuName: string
    price: number
    listPrice: number
    sellingPrice: number
    sellingPriceWithAssemblies: number
    measurementUnit: string
    skuSpecifications: string[]
    imageUrl: string
    options: string[]
    assemblyOptions: {
      added: string[]
      removed: string[]
      parentPrice: number
    }
    referenceId: Array<{
      Key: string
      Value: string
    }> | null
  }

  interface SKU {
    complementName?: string
    ean?: string
    image?: Image
    images: Image[]
    itemId: string
    measurementUnit: string
    name: string
    nameComplete?: string
    referenceId: Array<{
      Key: string
      Value: string
    }> | null
    seller?: Seller
    sellers: Seller[]
    unitMultiplier?: number
    variations: Array<{ name: string; values: string[] }>
  }

  interface Image {
    cacheId?: string
    imageId?: string
    imageLabel: string | null
    imageTag?: string
    imageUrl: string
    imageText?: string | null
  }

  interface Seller {
    addToCartLink?: string
    commertialOffer: CommertialOffer
    sellerId: string
    sellerDefault?: boolean
    sellerName?: string
  }

  interface CommertialOffer {
    AvailableQuantity: number
    Installments: Installment[]
    ListPrice: number
    Price: number
    PriceWithoutDiscount: number
    RewardValue?: number
    Tax: number
    discountHighlights?: Array<{ name: string }>
    spotPrice?: number
    taxPercentage: number
    teasers?: Array<{ name: string }>
  }

  interface Installment {
    InterestRate: number
    Name: string
    NumberOfInstallments: number
    PaymentSystemName?: string
    TotalValuePlusInterestRate: number
    Value: number
  }

  interface SpecificationFilter {
    id: string
    value: string
  }

  interface SuggestedProductsList {
    baseProductId: string
    suggestedProductsIds?: string
    category?: string
    specificationFilters?: SpecificationFilter[]
    collection?: string
    orderBy?: string
    hideUnavailableItems?: boolean
    maxItems?: number
    skusFilter?: string
    installmentCriteria?: string
  }

  interface RecommendedList {
    base: Product[]
    recommended: Product[]
  }

  interface SuggestedList {
    products: Product[]
    hidden: boolean
    current: number
  }
}

```


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

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

[Assistant]
Here's the implementation:

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

  const query: DocumentNode
  export default query
}

```


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

[User] Show me the implementation of vtex-ads/react/typings/vtex.product-summary.d.ts from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```typescript
// declare module 'vtex.product-summary/ProductSummaryCustom' {
//   export const mapCatalogProductToProductSummary: (product: any) => any
// }

// declare module 'vtex.product-summary' {
//   export const ProductSummaryList
//   export const ProductSummaryListWithoutQuery
// }

```


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

[User] Show me the implementation of vtex-ads/react/queries/productsByIdentifier.gql from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```graphql
query productsByIdentifier(
  $field: ProductUniqueIdentifierField!
  $values: [ID!]
) {
  productsByIdentifier(field: $field, values: $values)
    @context(provider: "vtex.search-graphql") {
    brand
    brandId
    cacheId
    categoryId
    categories
    clusterHighlights {
      id
      name
    }
    description
    items {
      attachments {
        id
        name
        required
      }
      complementName
      ean
      images(quantity: 10) {
        imageId
        imageLabel
        imageTag
        imageText
        imageUrl
      }
      itemId
      kitItems {
        amount
        itemId
        product {
          brand
          categoryId
          description
          linkText
          productId
          productName
          properties {
            name
            values
          }
        }
        sku {
          images {
            imageId
            imageLabel
            imageTag
            imageText
            imageUrl
          }
          itemId
          name
          referenceId {
            Key
            Value
          }
          sellers {
            addToCartLink
            commertialOffer {
              AvailableQuantity
              CacheVersionUsedToCallCheckout
              Installments(criteria: MAX) {
                InterestRate
                Name
                NumberOfInstallments
                TotalValuePlusInterestRate
                Value
              }
              ListPrice
              Price
              PriceValidUntil
              PriceWithoutDiscount
              RewardValue
              Tax
              discountHighlights {
                name
              }
            }
            sellerDefault
            sellerId
            sellerName
          }
        }
      }
      measurementUnit
      name
      nameComplete
      referenceId {
        Key
        Value
      }
      sellers {
        addToCartLink
        commertialOffer {
          AvailableQuantity
          CacheVersionUsedToCallCheckout
          Installments {
            InterestRate
            Name
            NumberOfInstallments
            TotalValuePlusInterestRate
            Value
          }
          ListPrice
          Price
          PriceValidUntil
          PriceWithoutDiscount
          RewardValue
          Tax
          discountHighlights {
            name
          }
          teasers {
            conditions {
              minimumQuantity
              parameters {
                name
                value
              }
            }
            effects {
              parameters {
                name
                value
              }
            }
            name
          }
        }
        sellerDefault
        sellerId
        sellerName
      }
      unitMultiplier
      variations {
        name
        values
      }
      videos {
        videoUrl
      }
    }
    link
    linkText
    metaTagDescription
    priceRange {
      listPrice {
        highPrice
        lowPrice
      }
      sellingPrice {
        highPrice
        lowPrice
      }
    }
    productClusters {
      id
      name
    }
    productId
    productName
    productReference
    properties {
      name
      values
    }
    specificationGroups {
      name
      specifications {
        name
        values
      }
    }
    titleTag
    benefits {
      featured
      id
      name
      teaserType
    }
  }
}
```


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

[User] Show me the implementation of vtex-ads/react/utils/push.ts from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable no-console */
export default function push(
  rawEvent: Record<string, unknown>,
  eventName?: string
) {
  console.log('⭐', rawEvent, eventName)
}

```


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

[User] Show me the implementation of vtex-ads/react/utils/debug.tsx from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable no-console */
import { useMemo } from 'react'
import { useRuntime } from 'vtex.render-runtime'

export const debugTemplates = {
  primary: 'color:white;background:#E31C58;padding:4px;border-radius:4px;',
}

type UseDebugProps = {
  name: string
  template: keyof typeof debugTemplates
  props: Record<string, unknown>
}

export const useDebug = ({ name, template, props }: UseDebugProps) => {
  const { query: queryRaw } = useRuntime()

  const safeTemplate = debugTemplates?.[template] || debugTemplates.primary

  const debugModeOn = useMemo(() => {
    const query = queryRaw?.debug ?? null

    return query === 'vtexads'
  }, [queryRaw])

  if (debugModeOn) {
    console.log(`%c 🚀 VTEX Ads :: ${name}}`, safeTemplate)
    console.log('%c 🚀 ~ props:', safeTemplate, props)
  }
}

```


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

[User] Show me the implementation of vtex-ads/react/utils/hash.ts from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```typescript
export async function hashEmail(email: string): Promise<string> {
  const encoder = new TextEncoder()
  const data = encoder.encode(email.trim().toLowerCase())

  const hashBuffer = await crypto.subtle.digest('SHA-256', data)

  // ArrayBuffer → byte array
  const hashArray = Array.from(new Uint8Array(hashBuffer))

  // byte array → hex string
  const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('')

  return hashHex
}

```


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

[User] Show me the implementation of vtex-ads/react/utils/events.ts from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable no-fallthrough */
/* eslint-disable no-console */
import { canUseDOM } from 'vtex.render-runtime'

import push from './push'

// export default function () {
//   return null
// } // no-op for extension point

export function handleEvents(e: PixelMessage) {
  if (e.data.eventName) {
    console.log('handleEvents', e.data.eventName, { ...e.data })
  }

  switch (e.data.eventName) {
    case 'vtex:productImpression': {
      // console.log('🔮 vtex:productImpression', e.data)
      const { currency, list, impressions } = e.data

      const parsedImpressions = (impressions || []).map(
        getProductImpressionObjectData(list)
      )

      const data = {
        event: 'productImpression',
        ecommerce: {
          currencyCode: currency,
          impressions: parsedImpressions,
        },
      }

      push(data, 'productImpression')

      return
    }

    case 'vtex:productView': {
      const { selectedSku, productName, brand, categories } = e.data.product

      let price

      try {
        price = e.data.product.items[0].sellers[0].commertialOffer.Price
      } catch {
        price = undefined
      }

      const data = {
        ecommerce: {
          detail: {
            products: [
              {
                brand,
                category: getCategory(categories),
                id: selectedSku.itemId,
                name: productName,
                variant: selectedSku.name,
                price,
              },
            ],
          },
        },
        event: 'productDetail',
      }

      push(data)

      return
    }

    case 'vtex:productClick': {
      const { productName, brand, categories, sku } = e.data.product

      let price

      try {
        price = e.data.product.items[0].sellers[0].commertialOffer.Price
      } catch {
        price = undefined
      }

      const data = {
        event: 'productClick',
        ecommerce: {
          click: {
            products: [
              {
                brand,
                category: getCategory(categories),
                id: sku.itemId,
                name: productName,
                variant: sku.name,
                price,
              },
            ],
          },
        },
      }

      push(data)
    }

    default:
      break
  }
}

function getCategory(rawCategories: string[]) {
  if (!rawCategories || !rawCategories.length) {
    return
  }

  return removeStartAndEndSlash(rawCategories[0])
}

// Transform this: "/Apparel & Accessories/Clothing/Tops/"
// To this: "Apparel & Accessories/Clothing/Tops"
function removeStartAndEndSlash(category?: string) {
  return category?.replace(/^\/|\/$/g, '')
}

function getProductImpressionObjectData(list: string) {
  return ({ product, position }: Impression) => ({
    brand: product.brand,
    category: getCategory(product.categories),
    id: product.productId, // Product id
    variant: product.sku.itemId, // SKU id
    list,
    name: product.productName,
    position,
    price: `${product?.sku?.seller?.commertialOffer.Price}`,
    dimension1: product.productReference ?? '',
    dimension2: product.sku.referenceId?.Value ?? '',
    dimension3: product.sku.name, // SKU name (variation only)
  })
}

if (canUseDOM) {
  window.addEventListener('message', handleEvents)
}

```


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

[User] Show me the implementation of vtex-ads/react/hooks/usePageContext.ts from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable no-console */
import { useMemo } from 'react'
import { useRuntime } from 'vtex.render-runtime'
import { useProduct } from 'vtex.product-context'

const AdContextKeys = {
  home: 'home',
  category: 'category',
  search: 'search',
  product_page: 'product_page',
  brand_page: 'brand_page',
} as { [key in AdContext]: AdContext }

export const usePageContext = () => {
  const { query: queryRaw, route } = useRuntime()

  const debug = useMemo(() => queryRaw?.debug ?? null, [queryRaw])

  const term = useMemo(
    () => queryRaw?._q ?? queryRaw?.termo ?? null,
    [queryRaw]
  )

  const type = route?.pageContext?.type as PageDataContextType
  const pageContextId = route?.pageContext?.id as string

  /**
   * GET Sku ID from product context
   */
  const productContext = useProduct()
  const firstProductSKU = productContext?.product?.items?.[0]?.itemId
  const productSKU = (route?.queryString?.skuId || firstProductSKU) as string

  const queryStringMap = route?.queryString?.map as string

  const context = useMemo(() => {
    const isHome = pageContextId === 'store.home'
    const isSearch = pageContextId === 'search'
    const isCategorySearch = isSearch && queryStringMap === 'category-1'

    switch (type) {
      case 'brand':
        return term ? AdContextKeys.search : AdContextKeys.brand_page

      case 'product':
        return AdContextKeys.product_page

      case 'subcategory':
        return AdContextKeys.category

      case 'department':
        return AdContextKeys.category

      default:
        if (isHome) return AdContextKeys.home
        if (isCategorySearch) return AdContextKeys.category

        return type in AdContextKeys
          ? (type as AdContext)
          : AdContextKeys.search
    }
  }, [pageContextId, queryStringMap, term, type])

  const categoryName = useMemo(() => {
    const departmentRaw = route.params?.department || route.params?.term
    const categoryRaw = route?.params?.category
    const subcategoryRaw = route?.params?.subcategory
    const isMissingCategory =
      !route?.params?.subcategory && queryStringMap === 'category-1,category-3'

    const categoryPath = () => {
      let path = ''

      if (departmentRaw) {
        path = departmentRaw.replace(/-/g, ' ')

        if (categoryRaw && !isMissingCategory) {
          path += ` > ${categoryRaw.replace(/-/g, ' ')}`

          if (subcategoryRaw) {
            path += ` > ${subcategoryRaw.replace(/-/g, ' ')}`
          }
        }

        if (isMissingCategory && categoryRaw) {
          path += ` > Undefined category`

          if (categoryRaw) {
            path += ` > ${categoryRaw.replace(/-/g, ' ')}`
          }
        }
      }

      return path
    }

    return categoryPath() || null
  }, [route, queryStringMap])

  if (debug === 'vtexads') {
    console.log(
      '%c 🚧 🚧 🚧 🚧  VTEX Ads :: usePageContext :: Context 🚧 🚧 🚧 🚧',
      'color:#E31C58;background:white;',
      route?.pageContext
    )

    console.log(
      '%c 🚧 🚧 🚧 🚧  VTEX Ads :: usePageContext :: Route 🚧 🚧 🚧 🚧',
      'color:#E31C58;background:white;',
      route
    )

    console.log(
      `%c 🚧 🚧 🚧 🚀 VTEX Ads :: usePageContext :: Formatted category`,
      'color:#E31C58;background:white;',
      categoryName
    )
  }

  const brandName = useMemo(() => route?.params?.brand || null, [route])

  return { context, term, brandName, categoryName, productSKU }
}

```


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

[User] Show me the implementation of vtex-ads/react/hooks/useSessionData.ts from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { useMemo } from 'react'
import type { SessionSuccess } from 'vtex.session-client'
import { useRenderSession } from 'vtex.session-client'
import { canUseDOM } from 'vtex.render-runtime'

function getCookie(name:string) {
  if(!canUseDOM) return null

  const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));

  if (match) return match[2];

  return null;
}

export const useSessionData = () => {
  const { session } = useRenderSession() as { session: SessionSuccess }

  const vtexRCMacId = getCookie('VtexRCMacIdv7');

  const sessionId = useMemo(() => vtexRCMacId || session?.id || null, [session])

  const userId = useMemo(
    () => session?.namespaces?.profile?.id?.value || null,
    [session]
  )

  return { sessionId, userId }
}

```


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

[User] Show me the implementation of vtex-ads/react/hooks/useDeviceType.ts from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { useMemo } from 'react'
import { useDevice } from 'vtex.device-detector'

export const useDeviceType = () => {
  const { isMobile } = useDevice()

  return useMemo(() => (isMobile ? 'mobile' : 'desktop'), [isMobile])
}

```


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

[User] Show me the implementation of vtex-ads/react/hooks/useOnView.ts from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```typescript
/** Code borrowed from vtex.render-runtime */
/* eslint-disable @typescript-eslint/no-use-before-define */
import { useEffect, useRef } from 'react'
import type { MutableRefObject } from 'react'

interface IntersectionEvent {
  entry: IntersectionObserverEntry
  unobserve: () => void
}

interface HookOptions {
  ref: MutableRefObject<HTMLElement | null>
  onView?: (event: IntersectionEvent) => void
  threshold?: number
  once?: boolean
  bailOut?: boolean
  initializeOnInteraction?: boolean
}

/** Hook for detecting when an element is inside the viewport.
 * Differs from react-intersection-observer (https://www.npmjs.com/package/react-intersection-observer)
 * in that this hook doesn't use setState, using a callback approach instead, to improve
 * performance by preventing re-rendering.
 */
const useOnView = ({
  ref,
  onView,
  threshold = 0,
  once = false,
  bailOut = false,
  initializeOnInteraction = false,
}: HookOptions) => {
  const isObserving = useRef(false)
  const didIntersect = useRef(false)

  useEffect(() => {
    const initializeObserver = () => {
      const element = ref.current

      if (
        bailOut ||
        isObserving.current ||
        !element ||
        !onView ||
        (once && didIntersect.current)
      ) {
        return () => {}
      }

      isObserving.current = true

      const unobserve = () => {
        if (isObserving.current) {
          observer.unobserve(element)
          isObserving.current = false
        }
      }

      const observer = new IntersectionObserver(([entry]) => {
        if (!entry.isIntersecting) {
          return
        }

        if (entry.intersectionRatio < threshold) {
          return
        }

        if (once) {
          unobserve()
        }

        didIntersect.current = true
        onView({ entry, unobserve })
      })

      observer.observe(element)

      return unobserve
    }

    if (initializeOnInteraction) {
      const cleanUpEvents = () => {
        window?.document?.removeEventListener('scroll', handleInteraction)
        window?.document?.removeEventListener('mouseover', handleInteraction)
      }

      let unobserve = () => {
        cleanUpEvents()
      }

      const handleInteraction = () => {
        cleanUpEvents()
        unobserve = initializeObserver()
      }

      window?.document?.addEventListener('scroll', handleInteraction)
      window?.document?.addEventListener('mouseover', handleInteraction)

      return unobserve
    }

    return initializeObserver()
  }, [bailOut, initializeOnInteraction, onView, once, ref, threshold])
}

export { useOnView }

```


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

[User] Show me the implementation of vtex-ads/react/helpers/availableitems.ts from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```typescript
function sumAvailableQuantity(items: Item[]) {
  let totalQuantity = 0

  items.forEach((item) => {
    item.sellers.forEach((seller) => {
      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
      totalQuantity += seller.commertialOffer.AvailableQuantity || 0
    })
  })

  return totalQuantity
}

export const handleAvailableItems = (products: Product[]) => {
  const filteredProducts = products.filter(
    (item) => !!sumAvailableQuantity(item.items)
  )

  return filteredProducts
}

```


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

[User] Show me the implementation of vtex-ads/react/helpers/getUserId.tsx from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```tsx
import axios from 'axios'

export const getUserIdByEmail = async (email: string) => {
  try {
    const response = await axios.get(
      `/api/dataentities/CL/search?_where=email%3D'${email}'&_fields=id`
    )

    const userId = response.data[0]?.id as string

    return userId ?? null
  } catch (error) {
    console.error('Error fetching user ID:', error)

    return 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 vtex-ads/react/services/types.d.ts from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```typescript
type AdTypes = 'product' | 'banner' | 'sponsored_brand'

type AdContext = 'home' | 'category' | 'search' | 'product_page' | 'brand_page'

type AdsResponse<T = string> =
  | {
      [key in T]: ProductAd[]
    }
  | {
      [key in T]: BannerAd[]
    }
  | {
      [key in T]: SponsoredBrandAd[]
    }

interface EventsUrl {
  click_url: string
  impression_url?: string
  view_url: string
}
type ProductAd = {
  ad_id: string
  product_sku: string
} & EventsUrl

type BannerAd = {
  ad_id: string
  media_url: string
  destination_url: string
} & EventsUrl

interface AdsRequest {
  publisherId: string
  body: RequestBody
}

type PageDataContextType =
  | AdContext
  | 'brand'
  | 'product'
  | 'category'
  | 'subcategory'
  | 'department'
  | 'route'

type CategoryContextData = {
  context: 'category'
  category_name: string | null
}

type BrandPageContextData = {
  context: 'brand_page'
  brand_name: string | null
}

type SearchContextData = {
  context: 'search'
  term: string | null
}

type HomeContextData = {
  context: 'home'
}

type ProductPageContextData = {
  context: 'product_page'
  product_sku: string
}

type RequestBody =
  | {
      skus?: string[]
      brand?: string
      session_id: string
      user_id?: string
      term?: string
      device: 'mobile' | 'desktop'
      placements: {
        [key: string]:
          | {
              quantity: number
              types: ['product']
            }
          | {
              size: string
              quantity: number
              types: ['banner']
            }
      }
    } & (
      | CategoryContextData
      | BrandPageContextData
      | SearchContextData
      | HomeContextData
      | ProductPageContextData
    )

/**
 * Conversão
 */

type ConversionItem = {
  sku: string
  quantity: number
  price: number
  promotional_price: number
}

type ConversionBody = {
  publisher_id: string
  user_id: string
  session_id: string
  order_id: string
  items: ConversionItem[]
  created_at: string
  channel: 'ecommerce'
}
interface ConversionPost {
  body: ConversionBody
}

/**
 * Response event
 */
type ResponseEvent = {
  messages: string[]
}

// SB

interface SponsoredBrandAd {
  ad_id: string
  assets: SponsoredBrandAdAsset[]
  brand_name: string
  brand_url: string
  campaign_name: string
  click_url: string
  description: string
  destination_url: string
  headline: string
  impression_url: string
  position: number
  products: SponsoredBrandAdProduct[]
  seller_id: null
  type: string
  view_url: string
}

interface SponsoredBrandAdProduct {
  click_url: string
  destination_url: string
  image_url: string
  impression_url: string
  product_metadata: SponsoredBrandAdProductmetadata
  product_name: string
  product_sku: string
  ad_id: string
  seller_id: null
  view_url: string
}

interface SponsoredBrandAdProductmetadata {
  additional_references?: string[]
  productId: string
  product_clusters: string[]
}

interface SponsoredBrandAdAsset {
  dimension: string
  type: string
  url: 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 vtex-ads/react/services/index.ts from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { CreateAxiosDefaults } from 'axios'
import axios from 'axios'

export const apiNewtailRetailMedia = axios.create({
  baseURL: `https://newtail-media.newtail.com.br/v1/rma`,
} as CreateAxiosDefaults<{ baseURL: string }>)

export const getNewtailMedia = async ({ publisherId, body }: AdsRequest) =>
  apiNewtailRetailMedia.post<AdsResponse>(`/${publisherId}`, body)

export const postNewtailMediaConversionURL =
  'https://newtail-media.newtail.com.br/v1/beacon/conversion'

```


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

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

[Assistant]
Here's the implementation:

```typescript
type DataUpdate = {
  uniqueId: string
  quantity: number
}

declare module 'vtex.order-items/OrderItems' {
  export const useOrderItems: () => { updateQuantity(data: DataUpdate): void }
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
export { default as OrderItems } from './OrderItems'
export {}

```


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

[User] Show me the implementation of vtex-ads/react/components/Products/index.tsx from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

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

import { useAds } from '../../hooks/useAds'
import Products from './Products'
import { useProductQuery } from '../../hooks/useProductQuery'

const CSS_HANDLES = ['sponsored-products-container'] as const

function SponsoredProducts() {
  const { skuProducts } = useAds()

  const { handles } = useCssHandles(CSS_HANDLES)

  const { offers } = useProductQuery()

  return (
    <>
      {!!skuProducts?.length && (
        <section className={handles['sponsored-products-container']}>
          {!!offers && <Products products={offers} />}
        </section>
      )}
    </>
  )
}

export default SponsoredProducts

```


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

[User] Show me the implementation of vtex-ads/react/components/Products/types.d.ts from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```typescript
type NewtailMediaShelfProps = {
  active?: boolean
  placementName?: string
  placementNameAdmin?: string
  quantity?: number
  quantityAdmin?: string
  categoryName?: string
  categoryNameAdmin?: string
}

interface OnProductClickData {
  brand: string
  brandId: number
  cacheId: string
  categoryTree: CategoryTree[]
  description: string
  items: Item[]
  link: string
  linkText: string
  priceRange: PriceRange
  productClusters: ProductCluster[]
  productId: string
  productName: string
  productReference: string
  properties: string[]
  specificationGroups: string[]
  __typename: string
  sku: Sku
}

interface Sku {
  images: Image[]
  itemId: string
  measurementUnit: string
  name: string
  sellers: Seller[]
  unitMultiplier: number
  variations: string[]
  __typename: string
  seller: Seller
  referenceId: ReferenceId
  image: Image
}

interface ReferenceId {
  Value: string
}

interface ProductCluster {
  id: string
  name: string
  __typename: string
}

interface PriceRange {
  listPrice: ListPrice
  sellingPrice: ListPrice
  __typename: string
}

interface ListPrice {
  highPrice: number
  lowPrice: number
  __typename: string
}

interface Item {
  images: Image[]
  itemId: string
  measurementUnit: string
  name: string
  sellers: Seller[]
  unitMultiplier: number
  variations: string[]
  __typename: string
}

interface Seller {
  commertialOffer: CommertialOffer
  sellerId: string
  __typename: string
}

interface CommertialOffer {
  AvailableQuantity: number
  Installments: Installment[]
  ListPrice: number
  Price: number
  PriceWithoutDiscount: number
  Tax: number
  discountHighlights: DiscountHighlight[]
  taxPercentage: number
  teasers: string[]
  __typename: string
}

interface DiscountHighlight {
  name: string
  __typename: string
}

interface Installment {
  InterestRate: number
  Name: string
  NumberOfInstallments: number
  TotalValuePlusInterestRate: number
  Value: number
  __typename: string
}

interface Image {
  imageLabel: string
  imageTag: string
  imageUrl: string
  __typename: string
}

interface CategoryTree {
  slug: string
  __typename: 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 vtex-ads/react/components/Products/styles.ts from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```typescript
import styled from 'styled-components'

export const Container = styled.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 vtex-ads/react/components/Products/Products.tsx from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { ExtensionPoint } from 'vtex.render-runtime'

import { handleAvailableItems } from '../../helpers/availableitems'

interface Props {
  products: Product[]
}

const SuggestedProducts = ({ products }: Props) => {
  const productAds = handleAvailableItems(products)

  return (
    <>
      {!!productAds?.length &&
        productAds.map((item) => (
          <>
            <ExtensionPoint id="rich-text" />

            <ExtensionPoint id="product-summary.shelf" product={item} />
          </>
        ))}
    </>
  )
}

export default SuggestedProducts

```


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

[User] Show me the implementation of vtex-ads/react/components/SponsoredBrands/index.tsx from the vtex-ads VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable no-console */
import React, { useCallback, useEffect, useMemo } from 'react'
import { useCssHandles } from 'vtex.css-handles'

import { useAds } from '../../hooks/useAds'
import { useOnView } from '../../hooks/useOnView'
import SponsoredBrandLogo from './Logo'
import { ImageFixedSize } from '../UI/Image'
import { SponsoredBrandsContentHeader } from './ContentHeader'
import SponsoredBrandsTag from './SponsoredBrandsTag'
import { templateStyles } from './styles/templates'
import { CSS_HANDLES } from './styles/handles'
import { useProductQuery } from '../../hooks/useProductQuery'
import ProductShelf from '../UI/ProductShelf'

function SponsoredBrands({
  hideHeader,
  hideLogo,
  hideHeadline,
  hideDescription,
  hideBrandName,
  template = null,
}: SponsoredBrandsInnerProps) {
  const { handles } = useCssHandles(CSS_HANDLES)

  const { assetsSB } = useAds()

  const { offers } = useProductQuery()

  /**
   * Handle events
   */
  const containerRef = React.useRef<HTMLDivElement | null>(null)

  const { handleEvents } = useAds()

  const handleImpression = useCallback(() => {
    handleEvents({ type: 'sponsored_brand', event: 'impression' })
  }, [handleEvents])

  const onView = useCallback(() => {
    handleEvents({ type: 'sponsored_brand', event: 'view' })
  }, [handleEvents])

  const handleClick = useCallback(() => {
    handleEvents({ type: 'sponsored_brand', event: 'click' })
  }, [handleEvents])

  useOnView({
    ref: containerRef,
    onView,
    once: true,
    initializeOnInteraction: true,
  })

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

  // Memos

  const hasAd = useMemo(() => {
    return !!offers && !!assetsSB
  }, [assetsSB, offers])

  return (
    <>
      {hasAd && (
        <article className={`${handles['sponsored-brands-container']} `}>
          <header
            className={`${handles['sponsored-brands-header']} flex items-end mb2`}
          >
            {!hideHeader && (
              <section
                className={`${handles['sponsored-brands-header-container']} flex items-center`}
              >
                {!hideLogo && (
                  <SponsoredBrandLogo handles={handles} assets={assetsSB} />
                )}

                <SponsoredBrandsContentHeader
                  handles={handles}
                  handleClick={handleClick}
                  hideHeadline={!!hideHeadline}
                  hideDescription={!!hideDescription}
                  hideBrandName={!!hideBrandName}
                  data={assetsSB as SponsoredBrandAd}
                />
              </section>
            )}

            <SponsoredBrandsTag handles={handles} />
          </header>

          <section
            className={`${handles['sponsored-brands-content']} flex ${
              template && templateStyles?.[template]?.contentContainer
            }`}
            ref={containerRef}
            style={{
              gap: '.5rem',
            }}
          >
            {assetsSB?.assets?.[0]?.url && (
              <section
                className={`${handles['sponsored-brands-banner-item']} ${handles['sponsored-brands-banner-item']}__${assetsSB?.ad_id} mr4`}
              >
                <a
                  href={assetsSB?.destination_url || '#'}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="btn btn-primary"
                  onClick={handleClick}
                >
                  <ImageFixedSize
                    data={{
                      media_url: assetsSB?.assets?.[0]?.url,
                      altText: assetsSB?.brand_name,
                      ad_id: assetsSB?.ad_id,
                    }}
                    handles={handles}
                    prefix="sponsored-brands-banner"
                    fixedMinWidth
                  />
                </a>
              </section>
            )}

            <section
              className={`${handles['sponsored-brands-products-container']} flex flex-auto mw-100`}
            >
              <ProductShelf products={offers} />
            </section>
          </section>
        </article>
      )}
    </>
  )
}

export default SponsoredBrands

```