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

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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "apollo-client": "^2.6.8",
    "react": "^16.12.0",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.12.0",
    "react-intl": "^3.12.0"
  },
  "devDependencies": {
    "@types/jest": "^25.1.4",
    "@types/node": "^13.9.8",
    "@types/react": "^16.9.31",
    "@vtex/test-tools": "^0.3.2",
    "@vtex/tsconfig": "^0.2.0",
    "graphql": "^14.6.0",
    "typescript": "3.9.7",
    "vtex.native-types": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.native-types@0.7.5/public/@types/vtex.native-types",
    "vtex.add-to-cart-button": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.add-to-cart-button@0.21.1/public/@types/vtex.add-to-cart-button",
    "vtex.address-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.6.3/public/_types/react",
    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@0.4.4/public/@types/vtex.css-handles",
    "vtex.flex-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.flex-layout@0.15.2/public/@types/vtex.flex-layout",
    "vtex.format-currency": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.format-currency@0.3.0/public/@types/vtex.format-currency",
    "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.9.7/public/@types/vtex.product-context",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.5/public/@types/vtex.render-runtime",
    "vtex.shipping-estimate-translator": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shipping-estimate-translator@2.2.2/public/@types/vtex.shipping-estimate-translator",
    "vtex.store": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store@2.110.0/public/@types/vtex.store",
    "vtex.store-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.138.2/public/@types/vtex.store-components",
    "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.136.9/public/@types/vtex.store-graphql",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.134.1/public/@types/vtex.styleguide"
  },
  "version": "0.6.0"
}

```


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

[User] Show me the implementation of seller-selector/react/SellerBody.tsx from the seller-selector VTEX app.

[Assistant]
Here's the implementation:

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

import { useSellerContext } from './SellerContext'
import type { Seller } from './SellerContext'
import { CurrentSellerProvider } from './CurrentSellerContext'

const SELLERS_CSS_HANDLES = ['sellerList']

interface Props {
  children: ReactNode
}

function SellerBody({ children }: Props) {
  const { sellerList, shippingQuotes } = useSellerContext()
  const handles = useCssHandles(SELLERS_CSS_HANDLES)

  const currentSellerCreate = useCallback(
    (current: Seller, index: number) => {
      const currentContext = {
        currentSeller: current,
        shipping: shippingQuotes?.logisticsInfo
          ? shippingQuotes.logisticsInfo[index]
          : null,
      }

      return currentContext
    },
    [shippingQuotes]
  )

  return (
    <div className={`${handles.sellerList} mh7 mb7`}>
      {sellerList
        ? sellerList.map((current, index: number) => (
            <CurrentSellerProvider
              value={currentSellerCreate(current, index)}
              key={index}
            >
              {children}
            </CurrentSellerProvider>
          ))
        : null}
    </div>
  )
}

export default SellerBody

```


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

[User] Show me the implementation of seller-selector/react/SellerContext.tsx from the seller-selector VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { createContext, useContext } from 'react'
import type { PropsWithChildren } from 'react'

export interface Seller {
  sellerId: string
  sellerName: string
  sellerDefault: boolean
  commertialOffer: Offer
}

interface Offer {
  Price: number
  AvailableQuantity: number
}

export interface ShippingQuote {
  logisticsInfo: LogisticsInfo[]
}

export interface LogisticsInfo {
  itemIndex: number
  slas: SLA[]
}

interface SLA {
  id: string
  name: string
  price: number
  shippingEstimate: string
  shippingEstimateDate: string
}

interface SellerContextValue {
  sellerList: Seller[] | null
  shippingQuotes: ShippingQuote | null
  setShippingQuotes: (quote: ShippingQuote) => void
  limitShownShippingInformation: number
}

const SellerContext = createContext<SellerContextValue>({
  sellerList: null,
  shippingQuotes: null,
  setShippingQuotes: () => {},
  limitShownShippingInformation: 3,
})

export const useSellerContext = (): SellerContextValue => {
  return useContext(SellerContext)
}

interface ProviderProps {
  value: SellerContextValue
}

export function SellerProvider({
  value,
  children,
}: PropsWithChildren<ProviderProps>) {
  return (
    <SellerContext.Provider value={value}>{children}</SellerContext.Provider>
  )
}

export default {
  SellerProvider,
  useSellerContext,
}

```


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

[User] Show me the implementation of seller-selector/react/SellerRow.tsx from the seller-selector VTEX app.

[Assistant]
Here's the implementation:

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

const SELLERS_CSS_HANDLES = ['sellerRow'] as const

interface Props {
  children: ReactNode
}

function SellerRow({ children }: Props) {
  const handles = useCssHandles(SELLERS_CSS_HANDLES)

  return (
    <div
      className={`${handles.sellerRow} justify-between-s bt-0-m b--solid-s bw1 b--muted-3 flex br--bottom items-center-s flex-column-s flex-row-m`}
    >
      {children}
    </div>
  )
}

export default SellerRow

```


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

[User] Show me the implementation of seller-selector/react/LinkSeller.tsx from the seller-selector VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { Link } from 'vtex.render-runtime'
import { useProduct } from 'vtex.product-context'
import { useCssHandles } from 'vtex.css-handles'
import { IOMessage } from 'vtex.native-types'
import { defineMessages } from 'react-intl'

const LINK_SELLER_HANDLES = [
  'linkSellerContainer',
  'linkSeller',
  'linkSellerText',
  'linkSellerNumber',
] as const

interface Props {
  message?: string
}

function LinkSeller({ message }: Props) {
  const { product, selectedItem } = useProduct() ?? {}
  const handles = useCssHandles(LINK_SELLER_HANDLES)

  const availableSellers = selectedItem?.sellers.filter(
    (seller) => seller.commertialOffer.AvailableQuantity > 0
  )

  if (!selectedItem || !availableSellers || availableSellers.length <= 1) {
    return null
  }

  return (
    <div
      className={`${handles.linkSellerContainer} flex flex-row-reverse relative`}
    >
      <Link
        className={`${handles.linkSeller}`}
        page="store.sellers"
        params={{ slug: product?.linkText }}
        query={selectedItem ? `skuId=${selectedItem.itemId}` : ''}
      >
        <p className={`${handles.linkSellerText} pr6`}>
          <IOMessage
            id={message}
            values={{
              sellerQuantity: availableSellers.length,
            }}
          />
        </p>
      </Link>
    </div>
  )
}

const messages = defineMessages({
  title: {
    id: 'admin/editor.seller-link.title',
  },
})

LinkSeller.schema = {
  title: messages.title.id,
}

export default LinkSeller

```


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

[User] Show me the implementation of seller-selector/react/SellerPrice.tsx from the seller-selector VTEX app.

[Assistant]
Here's the implementation:

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

import { useCurrentSeller } from './CurrentSellerContext'

const SELLERS_CSS_HANDLES = ['sellerPrice'] as const

function SellerPrice() {
  const { currentSeller } = useCurrentSeller()

  const handles = useCssHandles(SELLERS_CSS_HANDLES)

  return (
    <p
      className={`${handles.sellerPrice} items-center tc w-100-s w-20-m br2 ph6 pv4 ma0`}
    >
      <FormattedCurrency
        value={currentSeller ? currentSeller.commertialOffer.Price : 0}
      />
    </p>
  )
}

export default SellerPrice

```


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

[User] Show me the implementation of seller-selector/react/SellerShipping.tsx from the seller-selector VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { FormattedMessage } from 'react-intl'
import { FormattedCurrency } from 'vtex.format-currency'
import { TranslateEstimate } from 'vtex.shipping-estimate-translator'
import { useCssHandles } from 'vtex.css-handles'

import { useCurrentSeller } from './CurrentSellerContext'
import { useSellerContext } from './SellerContext'

const SELLERS_CSS_HANDLES = ['sellerShipping', 'sellerShippingText'] as const

function SellerShipping() {
  const { shipping } = useCurrentSeller()
  const { limitShownShippingInformation } = useSellerContext()
  const handles = useCssHandles(SELLERS_CSS_HANDLES)

  return (
    <div
      className={`${handles.sellerShipping} items-center tc w-100-s w-20-m br2 ph6 pv4 ma0 w-100-s w-20-m`}
    >
      {shipping ? (
        shipping.slas
          .slice(0, limitShownShippingInformation)
          .map((sla, index: number) => (
            <p key={index} className={`${handles.sellerShippingText} ma0`}>
              <FormattedMessage
                id="store/seller-list.shipping-estimate"
                values={{
                  name: sla.name,
                  price: <FormattedCurrency value={sla.price / 100} />,
                  estimate: (
                    <TranslateEstimate
                      shippingEstimate={sla.shippingEstimate}
                    />
                  ),
                }}
              />
            </p>
          ))
      ) : (
        <FormattedMessage id="store/seller-list.pending" />
      )}
    </div>
  )
}

export default SellerShipping

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "definitions": {
    "LinkSeller": {
      "type": "object",
      "properties": {
        "message": {
          "title": "admin/editor.seller-link.textLinkTitle",
          "description": "admin/editor.seller-link.textLinkDescription",
          "$ref": "app:vtex.native-types#/definitions/text",
          "default": "store/seller-link.linkText"
        }
      }
    }
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store.sellers": {
    "around": ["productWrapper"],
    "context": "vtex.store/ProductContext"
  },
  "store.product.sellertest": {
    "allowed": ["link-seller"]
  },
  "link-seller": {
    "component": "LinkSeller",
    "content": {
      "$ref": "app:vtex.seller-selector#/definitions/LinkSeller"
    }
  },
  "seller-table": {
    "component": "SellerTable",
    "composition": "children"
  },
  "seller-head": {
    "component": "SellerHead",
    "composition": "children"
  },
  "seller-head-cell": {
    "component": "SellerHeadCell",
    "composition": "children"
  },
  "seller-body": {
    "component": "SellerBody",
    "composition": "children"
  },
  "seller-row": {
    "component": "SellerRow",
    "composition": "children"
  },
  "seller-name": {
    "component": "SellerName",
    "composition": "children"
  },
  "seller-price": {
    "component": "SellerPrice",
    "composition": "children"
  },
  "seller-price-with-shipping": {
    "component": "SellerPriceWithShipping",
    "composition": "children"
  },
  "seller-shipping": {
    "component": "SellerShipping"
  },
  "seller-add-to-cart": {
    "component": "SellerAddToCart",
    "allowed": ["add-to-cart-button", "buy-button"]
  },
  "seller-simulate-shipping": {
    "component": "SimulateShipping"
  }
}

```


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

[User] Show me the implementation of seller-selector/store/routes.json from the seller-selector VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "store.sellers": {
        "path": "/sellers/:slug"
    }
}
```


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

[User] Show me the implementation of seller-selector/react/typings/vtex.address-form.d.ts from the seller-selector VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.address-form'

declare module 'vtex.address-form/inputs' {
  export const StyleguideInput
  export const GeolocationInput
}

declare module 'vtex.address-form/helpers' {
  export const addValidation
  export const removeValidation
  export const injectRules
}

```


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

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

[Assistant]
Here's the implementation:

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

```


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

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

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.styleguide' {
  export const Button
  export const Spinner
}

```


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

[User] Show me the implementation of seller-selector/react/queries/SimulateShipping.gql from the seller-selector VTEX app.

[Assistant]
Here's the implementation:

```graphql
query SimulateShipping(
  $shippingItems: [ShippingItem]
  $postalCode: String
  $country: String
) {
  shipping(items: $shippingItems, postalCode: $postalCode, country: $country)
    @context(provider: "vtex.store-graphql") {
    logisticsInfo {
      itemIndex
      slas {
        id
        name
        price
        shippingEstimate
        shippingEstimateDate
      }
    }
  }
}

```


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

[User] Show me the implementation of seller-selector/react/utils/index.tsx from the seller-selector VTEX app.

[Assistant]
Here's the implementation:

```tsx
let addressId = 1

const getRandomAddressId = () =>
  (addressId++ * new Date().getTime() * -1).toString().replace('-', '')

export const getNewAddress = (country: string) => {
  const newAddressId = getRandomAddressId()

  return {
    addressId: newAddressId,
    addressType: 'residential',
    city: null,
    complement: null,
    country,
    geoCoordinates: [],
    neighborhood: null,
    number: null,
    postalCode: null,
    receiverName: null,
    reference: null,
    state: null,
    street: null,
    addressQuery: 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 seller-selector/react/__tests__/index.test.tsx from the seller-selector VTEX app.

[Assistant]
Here's the implementation:

```tsx
describe('Orders List Scenarios', () => {
  it('should work', () => {
    expect(1).toBe(1)
  })
})

```


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

[User] Show me the implementation of seller-selector/store/blocks/sellers.jsonc from the seller-selector VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.sellers": {
    "blocks": [
      "seller-table"
    ]
  },
  "seller-table": {
    "children": [
      "vtex.store-components:product-name",
      "seller-simulate-shipping",
      "seller-head",
      "seller-body"
    ]
  },
  "seller-head": {
    "children": [
      "seller-head-cell#Seller",
      "seller-head-cell#Price",
      "seller-head-cell#Shipping",
      "seller-head-cell#PriceWithShipping",
      "seller-head-cell#BuyButton"
    ]
  },
  "seller-head-cell#Seller": {
    "props": {
      "title": "Seller"
    }
  },
  "seller-head-cell#Price": {
    "props": {
      "title": "Price"
    }
  },
  "seller-head-cell#Shipping": {
    "props": {
      "title": "Shipping"
    }
  },
  "seller-head-cell#PriceWithShipping": {
    "props": {
      "title": "Price With Shipping"
    }
  },
  "seller-head-cell#BuyButton": {
    "props": {
      "title": "Add To Cart"
    }
  },
  "seller-body": {
    "children": [
      "seller-row"
    ]
  },
  "seller-row": {
    "children": [
      "seller-name",
      "seller-price",
      "seller-shipping",
      "seller-price-with-shipping",
      "seller-add-to-cart"
    ]
  },
  "seller-add-to-cart": {
    "blocks": [
      "buy-button"
    ]
  }
}
```


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

[User] Show me the implementation of orders-feed-example/docs/README.md from the orders-feed-example VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Orders Feed Example

A boilerplate app implementing an event handler receiving status updates from OMS Feed.
This is the method for using [Feed v3 Hook](https://developers.vtex.com/reference/feed-v3) inside VTEX IO.

## How to Use

This app handles events sent by the app `vtex.orders-broadcast`, as you can see by looking at `node/service.json`.

```json
{
  "memory": 256,
  "ttl": 10,
  "timeout": 2,
  "minReplicas": 2,
  "maxReplicas": 4,
  "workers": 1,
  "events": {
    "allStates": {
      "sender": "vtex.orders-broadcast",
      "topics": ["order-status-updated"]
    },
    "someStates": {
      "sender": "vtex.orders-broadcast",
      "topics": ["cancel", "order-created"]
    }
  }
}
```

You have two ways of consuming changes in status:

1. Receive all events subscribing to the `order-status-updated` topic, as the `allStates` handler does
2. Receive a selection of status changes where the `currentState` equals the `topic`, as the `someStates` handler does. This option is the preferred one, when you know ahead of time, what types of events, you want to listen to.

Normally `vtex.orders-broadcast` sends events only in `master` workspace. If you want to use it in a developer workspace, do the following:

1. Create your development workspace by running `vtex use {workspaceName}`
2. Go to `https://{accountName}.myvtex.com/admin/apps/vtex.orders-broadcast/setup`
3. Change the `Target Workspace` variable to the name of the workspace you have created previously.
4. Now you can link this app (`vtex.orders-feed-example`) in your desired workspace and receive order status updates.

Additionally, if you are setting up the app in a subaccount, it is important to check the `Notify Subaccounts` option at `https://{accountName}.myvtex.com/admin/apps/vtex.orders-broadcast/setup` even if the feed is not configured for the main account.

Here is an example body that you can expect to receive:

```json
{
  "recorder": {
    "_record": {
      "x-vtex-meta": {},
      "x-vtex-meta-bucket": {}
    }
  },
  "domain": "Marketplace",
  "orderId": "v69305315atmc-01",
  "currentState": "invoice",
  "lastState": "payment-approved",
  "currentChangeDate": "2020-07-13T20:25:13.2304508Z",
  "lastChangeDate": "2020-07-13T20:25:03.9527532Z"
}
```

If you want to understand further how Feed v3 works, check out [this documentation](https://help.vtex.com/tutorial/orders-management-feed-v3-setup--5qDml3cQypWDRTgw69s4C1).

```


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

[User] Show me the implementation of orders-feed-example/node/service.json from the orders-feed-example VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "memory": 256,
  "ttl": 10,
  "timeout": 2,
  "minReplicas": 2,
  "maxReplicas": 4,
  "workers": 1,
  "events": {
    "allStates": {
      "sender": "vtex.orders-broadcast",
      "topics": ["order-status-updated"]
    },
    "someStates": {
      "sender": "vtex.orders-broadcast",
      "topics": ["cancel", "order-created"]
    }
  }
}

```


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

[User] Show me the implementation of orders-feed-example/node/package.json from the orders-feed-example VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "co-body": "^6.0.0",
    "ramda": "^0.25.0"
  },
  "devDependencies": {
    "@types/co-body": "^0.0.3",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.0.0",
    "@types/ramda": "types/npm-ramda#dist",
    "@vtex/api": "6.35.0",
    "@vtex/test-tools": "^1.0.0",
    "tslint": "^5.14.0",
    "tslint-config-vtex": "^2.1.0",
    "typescript": "3.8.3"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty && tslint -c tslint.json --fix './**/*.ts'"
  },
  "version": "0.2.2"
}

```


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

[User] Show me the implementation of orders-feed-example/node/index.ts from the orders-feed-example VTEX app.

[Assistant]
Here's the implementation:

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

import { Clients } from './clients'
import { allStates } from './middlewares/allStates'
import { someStates } from './middlewares/someStates'

const TIMEOUT_MS = 800

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

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

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

  interface StatusChangeContext extends EventContext<Clients> {
    body: {
      domain: string
      orderId: string
      currentState: string
      lastState: string
      currentChangeDate: string
      lastChangeDate: string
    }
  }
  // The shape of our State object found in `ctx.state`. This is used as state bag to communicate between middlewares.
  interface State extends RecorderState {}
}

// Export a service that defines route handlers and client options.
export default new Service({
  clients,
  events: {
    allStates,
    someStates,
  },
})

```


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

[User] Show me the implementation of orders-feed-example/node/clients/index.ts from the orders-feed-example VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { IOClients } from "@vtex/api";

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

```


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

[User] Show me the implementation of orders-feed-example/node/middlewares/allStates.ts from the orders-feed-example VTEX app.

[Assistant]
Here's the implementation:

```typescript
export async function allStates(
  ctx: StatusChangeContext,
  next: () => Promise<any>
) {
  console.log(ctx.body)
  await next()
}

```


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

[User] Show me the implementation of orders-feed-example/node/middlewares/someStates.ts from the orders-feed-example VTEX app.

[Assistant]
Here's the implementation:

```typescript
export async function someStates(
  ctx: StatusChangeContext,
  next: () => Promise<any>
) {
  console.log(ctx.body)
  await next()
}

```


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

[User] Show me the implementation of email-checkout-conflict/checkout-ui-custom/checkout6-custom.js from the email-checkout-conflict VTEX app.

[Assistant]
Here's the implementation:

```javascript
window.checkEmailAuthConflictMessages = {

	en: {
		title: "Email conflict",
		button: "Log In",
		message: "It looks like the email you entered is different from the one that was previously registered. Please log in again by clicking the button below."
	},
	es: {
		title: "Email no registrado ",
		button: "Iniciar sesión",
		message: "Parece que el email que has ingresado es diferente del que se registró anteriormente. Por favor, inicia sesión de nuevo haciendo clic en el botón a continuación."
	},
    "pt-BR": {
		title: "Conflito de email",
		button: "Entrar",
		message: "Parece que o email que você inseriu é diferente do que foi registrado anteriormente. Faça login novamente clicando no botão abaixo."
    },
	ro: {
		title:"Conflict adresa email",
		button:"Loghează-te",
		message:"Am identificat că probabil ați folosit un alt e-mail de conectare decât cel introdus anterior. Vă rugăm să vă conectați din nou făcând clic pe butonul de mai jos."
	},
	bg: {
		title: "Конфликт на имейл адреси",
		button: "Влизане",
		message: "Изглежда, че въведеният от вас имейл е различен от този, който е бил регистриран преди това. Моля, влезте отново, като щракнете върху бутона по-долу."
	},
	de: {
		title: "E-Mail-Konflikt",
		button: "Einloggen",
		message: "Es sieht so aus, als ob die eingegebene E-Mail sich von der unterscheidet, die zuvor registriert wurde. Bitte melden Sie sich erneut an, indem Sie auf den Button unten klicken."
	},
	fr: {
		title: "Conflit d'e-mail",
		button: "Se connecter",
		message: "Il semble que l'e-mail que vous avez saisi soit différent de celui qui a été enregistré précédemment. Veuillez vous reconnecter en cliquant sur le bouton ci-dessous."
	},
	it: {
		title: "Conflitto di email",
		button: "Accedi",
		message: "Sembra che l'email inserita sia diversa da quella registrata in precedenza. Accedi di nuovo cliccando sul pulsante in basso."
	},
	ja: {
		title: "メールの不一致",
		button: "ログイン",
		message: "入力したメールアドレスが以前に登録したものと異なるようです。下のボタンをクリックし、もう一度ログインしてください。"
	},
	ko: {
		title: "이메일 충돌",
		button: "로그인",
		message: "입력한 이메일이 이전에 등록한 이메일과 다른 것 같습니다. 아래 버튼을 클릭하여 다시 로그인하세요."
	},
	nl: {
		title: "E-mailconflict",
		button: "Inloggen",
		message: "Het lijkt erop dat het e-mailadres dat u hebt ingevoerd anders is dan het e-mailadres dat u eerder hebt geregistreerd. Log opnieuw in door op onderstaande knop te klikken."
	},
	th: {
		title: "อีเมลไม่ตรงกัน",
		button: "ล็อกอิน",
		message: "ดูเหมือนว่าอีเมลที่คุณให้ต่างจากที่ลงทะเบียนไว้ โปรดล็อกอินอีกครั้งโดยคลิกปุ่มที่ด้านล่าง"
	},
	ca: {
		title: "Conflicte amb l'adreça electrònica",
		button: "Inicia la sessió",
		message: "Sembla que l'adreça electrònica que heu introduït és diferent de la que es va registrar anteriorment. Feu clic al botó de sota per tornar a iniciar la sessió."
	},
	cs: {
		title: "Konflikt e-mailů",
		button: "Přihlásit se",
		message: "Vypadá to, že zadaný e-mail se liší od toho, který jste zaregistrovali dříve. Klikněte na tlačítko níže a přihlaste se znovu."
	},
	da: {
		title: "E-mailkonflikt",
		button: "Log ind",
		message: "Det ser ud til, at den e-mail, du har indtastet, er anderledes end den, der tidligere blev registreret. Log venligst ind igen ved at klikke på knappen nedenfor."
	},
	fi: {
		title: "Sähköpostiristiriita",
		button: "Kirjaudu",
		message: "Näyttää siltä, että syöttämäsi sähköpostiosoite on eri kuin aiemmin rekisteröity sähköpostiosoite. Kirjaudu uudelleen napsauttamalla alla olevaa painiketta."
	},
	id: {
		title: "Konflik Email",
		button: "Masuk",
		message: "Tampaknya alamat email yang Anda masukkan berbeda dari yang sudah terdaftar sebelumnya. Silakan masuk kembali dengan mengklik tombol di bawah ini."
	},
	no: {
		title: "E-postkonflikt",
		button: "Logg inn",
		message: "Det ser ut som om e-postadressen du skrev inn, er annerledes enn den som tidligere var registrert. Vennligst logg inn igjen ved å klikke på knappen nedenfor."
	},
	pl: {
		title: "Konflikt e-mailowy",
		button: "Zaloguj się",
		message: "Wygląda na to, że wprowadzony e-mail jest inny niż poprzednio zarejestrowany. Zaloguj się ponownie, klikając poniższy przycisk."
	},
	ru: {
		title: "Конфликт электронной почты",
		button: "Вход",
		message: "Похоже, введенная вами электронная почта отличается от зарегистрированной ранее. Повторите попытку входа, нажав кнопку ниже."
	},
	sk: {
		title: "Konflikt e-mailov",
		button: "Prihlásenie",
		message: "Zdá sa, že e-mail, ktorý ste zadali, sa líši od e-mailu, ktorý ste predtým zaregistrovali. Prihláste sa znova kliknutím na tlačidlo nižšie."
	},
	sl: {
		title: "Email konflikt",
		button: "Prijava",
		message: "Zdi se, da se vneseni e-poštni naslov razlikuje od tistega, ki je bil prej registriran. Prosimo, prijavite se ponovno s klikom na spodnji gumb."
	},
	sv: {
		title: "Emailkonflikt",
		button: "Logga in",
		message: "Det verkar som att e-postadressen du angav skiljer sig från den som tidigare registrerades. Vänligen logga in igen genom att klicka på knappen nedan."
	},
	uk: {
		title: "Конфлікт електронної пошти",
		button: "Вхід",
		message: "Схоже, електронна пошта, яку ви ввели, відрізняється від зареєстрованої раніше. Повторіть спробу входу, натиснувши кнопку нижче."
	}
}

class checkEmailAuthConflict {
	constructor({} = {}) {
		this.orderForm = "";
    this.lang = "";
	}

    getRootPath = () => {
        const { rootPath } =
          window.__RUNTIME__ || (window.vtex && window.vtex.renderRuntime) || {};

        return rootPath || "";
    };

	removeModal() {
		$(".checkEmailAuthConflict__modal").fadeOut("normal", function() {
			$(".checkEmailAuthConflict__modal").remove();
		});
	}

	showModal() {

		const _this = this;

		$(".checkEmailAuthConflict__modal").remove();

		if(!_this.lang) return false;
		if(!checkEmailAuthConflictMessages[this.lang]) this.lang = "en";
		let modal = `
			<div class="checkEmailAuthConflict__modal">
				<div class="checkEmailAuthConflict__modal--bg"></div>
				<div class="checkEmailAuthConflict__modal--wrap">
					<h4 class="checkEmailAuthConflict__modal--title">${checkEmailAuthConflictMessages[this.lang].title}</h4>
					<p class="checkEmailAuthConflict__modal--text">${checkEmailAuthConflictMessages[this.lang].message}</p>
					<button class="checkEmailAuthConflict__modal--button js-checkEmailAuthConflict__modal--button">${checkEmailAuthConflictMessages[this.lang].button}</button>
				</div>
			</div>
		`;

		$("body").append(modal);

	}

	bind() {
		const _this = this;

		$("body").on("click", ".js-checkEmailAuthConflict__modal--button", function(e) {
			e.preventDefault();
			$(this).addClass("js-loading");
			_this.changeUser();
		})

	}

	changeUser() {
		const _this = this;

		$.ajax(`${this.getRootPath()}/checkout/changeToAnonymousUser/${_this.orderForm.orderFormId}`)
		.done(function() {
			_this.removeModal();
			vtexid.start();
		});
	}

	validate() {
		const _this = this;
		try {
			if(
				_this.orderForm &&
				_this.orderForm.clientProfileData &&
				_this.orderForm.clientProfileData.email
			) {
				fetch(`${this.getRootPath()}/api/vtexid/pub/authenticated/user`, {credentials: 'include'})
				.then(response => response.json())
				.then(function(response) {
					if(!response) return false;
					let user = response.user;

					if(_this.orderForm.clientProfileData.email != user) {
						_this.showModal();
					}
				})
			}
		} catch(e) {
			console.error(e)
		}
	}

	validateOperations(orderForm) {
		if (orderForm.userType === 'callCenterOperator' || ~window.location.host.indexOf(`myvtex`)) {
			return false
		}
		return true
	}

	init() {
		const _this = this;

		try {

			$(window).one('orderFormUpdated.vtex', function(_, orderForm) {
				if (_this.validateOperations(orderForm)) {

					_this.orderForm = orderForm;
					_this.lang = vtex ? vtex.i18n.locale : "en";
					try {
						_this.validate();
						_this.bind();
					} catch(e) {
						console.error(e)
					}
				}

			});

			$(window).on('authenticatedUser.vtexid closed.vtexid', function() {
				_this.orderForm = vtexjs.checkout.orderForm;
				if (_this.validateOperations(_this.orderForm)) {
					try {
						_this.validate();
					} catch(e) {
						console.error(e)
					}
				}
			});

		} catch(e) {
			console.error(`Error on checkEmailAuthConflict: ${e}`)
		}

	}
}

window.validateAuthEmail = new checkEmailAuthConflict()
validateAuthEmail.init();
```


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

[User] Show me the implementation of email-checkout-conflict/checkout-ui-custom/checkout6-custom.css from the email-checkout-conflict VTEX app.

[Assistant]
Here's the implementation:

```css
.checkEmailAuthConflict__modal,
.checkEmailAuthConflict__modal--bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99999;
}

.checkEmailAuthConflict__modal--bg {
  background: #000;
  opacity: 0.4;
}

.checkEmailAuthConflict__modal--wrap {
  width: 400px;
  background: #fff;
  position: fixed;
  left: calc(50% - 200px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 99999;
  padding: 30px;
  border-radius: 3px;
  box-sizing: border-box;

  color: #333333;
  background: #fff;
  box-shadow: 0 5px 0 #ddd;
  border-bottom: 1px solid #fff;
  border-radius: 4px;
  border: 2px solid #eee;
}

button.checkEmailAuthConflict__modal--button {
  background: #1a73e8;
  padding: 10px;
  display: inline-block;
  border: none;
  border-radius: 3px;
  color: #fff;
}

  .checkEmailAuthConflict__modal--button.js-loading:after {
    border: 3px solid #f3f3f3; /* Light grey */
    border-top: 3px solid #9999; /* Blue */
    border-radius: 50%;
    width: 10px;
    height: 10px;
    animation: spin 1s linear infinite;
    content: '';
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
  }

h4.checkEmailAuthConflict__modal--title {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}

p.checkEmailAuthConflict__modal--text {
  margin-bottom: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
```


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

[User] Show me the implementation of email-checkout-conflict/docs/README.md from the email-checkout-conflict VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Email checkout validation

Validates identified users with the last email used to login. It covers the issue mentioned on this [thread](https://vtex.slack.com/archives/C017NPK8U86/p1633371546124200)
```


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

[User] Show me the implementation of bonytos-de-tema/sitemap/sitemap.json from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "urlset": {
    "url": [
      {
        "loc": "https://storetheme.vtex.com/about-us"
      }
    ]
  }
}
```


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

[User] Show me the implementation of bonytos-de-tema/store/blocks.jsonc from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```json
/* Blocks can be defined both on the store/blocks.json file, and in any number of json
 * files inside the store/blocks directory, with any arbitrary directory structure.
 *
 * Additionally, all blocks files can support comments, such as this one, if given the
 * .jsonc file extension.
 *
 * The store/blocks.json file is intended for backwards compatibility, for miscellaneous
 * blocks, or if the app is simple enough that it doesn't warrant splitting the file.
 */
{
  "store.orderplaced": {
    "blocks": ["order-placed"]
  },

  "store.account": {
    "blocks": ["my-account"],
    "parent": {
      "challenge": "challenge.profile"
    }
  },

  "store.login": {
    "blocks": ["login-content#default"]
  },

  "login-content#default": {
    "props": {
      "isInitialScreenOptionOnly": false,
      "defaultOption": 1,
      "showPasswordVerificationIntoTooltip": true
    }
  },

  "product-summary.shelf": {
    "children": [
      "product-summary-add-to-list-button",
      "stack-layout#prodsum",
      "product-summary-name",
      "product-rating-inline",
      "product-summary-space",
      "product-summary-price",
      "product-identifier.summary",
      "product-summary-buy-button"
    ]
  },

  "stack-layout#prodsum": {
    "children": [
      "product-summary-image",
      "product-summary-specification-badges"
    ]
  },

  "product-summary-specification-badges": {
    "props": {
      "specificationGroupName": "Group",
      "specificationName": "On Sale",
      "visibleWhen": "True",
      "displayValue": "SPECIFICATION_NAME"
    }
  },

  "store.product-review-form": {
    "blocks": ["product-review-form"]
  }
}

```


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

[User] Show me the implementation of bonytos-de-tema/store/routes.json from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "store.custom#about-us": {
    "path": "/about-us"
  }
}

```


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

[User] Show me the implementation of bonytos-de-tema/styles/css/vtex.rich-text.css from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```css
.container--info-card-headline {
  position: absolute;
  right: 50px;
  text-align: center;
  justify-content: center;
}

.container--deals {
  color: #ffffff;
  text-align: center;
  justify-content: center;
}

.container--deals .paragraph {
  margin: 0;
}

.container--link {
  justify-content: center;
}

.container--question {
  justify-content: center;
}

.container--question .paragraph {
  text-align: center;
  color: #879F5A;
  margin: 0 16px;
  padding-top: 120px;
}

.container--question .strong {
  font-size: 32px;
  line-height: 2rem;
  font-weight: 700;
}

.container--link .paragraph {
  text-align: center;
  max-width: 540px;
  padding-top: 36px;
  padding-bottom: 84px;
  color: #03034E;
}

.container--link .strong {
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

.container--link .link {
  text-decoration: none;
  font-size: 36px;
  font-weight: 300;
  color: #03034E;
}

.container--title {
  color: #03034E;
  font-size: 28px;
  font-weight: 700;
}

@media only screen and (min-width: 640px) {
  .container--question .strong {
    font-size: 40px;
    line-height: 3rem;
  }

  .container--about {
    max-width: 85%;
  }

  .container--title {
    color: #03034E;
    font-size: 40px;
    font-weight: 700;
    max-width: 60%;
  }

  .container--title .paragraph {
    line-height: 1.3em;
  }
}

```


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

[User] Show me the implementation of bonytos-de-tema/styles/css/vtex.store-header.css from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```css
.headerRow--menu-link :global(.vtex-menu-2-x-styledLink) {
  color: #ffffff;
  font-size: 14px;
}

.headerRow--main-header .headerRowBackground {
  background-color: #F0F0F0;
}

.headerRow--main-header :global(.vtex-menu-2-x-styledLink)  {
  color: #727273;
  font-size: 14px;
}

.headerRow--main-header-mobile .headerRowBackground {
  padding: 10px 0px;
  background-color: #F0F0F0;
}

.headerRow--main-header-search-mobile .headerRowBackground {
  padding: 0px 0px;
  background-color: #F0F0F0;
}

```


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

[User] Show me the implementation of bonytos-de-tema/styles/css/vtex.store-components.css from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```css
.notificationBarContainer {
  background-color: #E6F1E6;
  color: #03034E;
  font-weight: 700;
  font-size: 12px;
  text-decoration: underline;
}

/* .searchBarContainer {
  max-width: 265px;
} */

.infoCardContainer--info-card-home {
  max-width: 1520px;
  margin: 0 auto;
  background-color: #E6F1E6;
  padding: 0px;
}

.infoCardContainer--info-card-about-us {
  height: 720px;
  margin: 0 auto;
  padding: 0px;
}

.newsletter {
  background-color: #03054E;
  max-width: 1528px;
  margin: 0 auto;
}

.newsletter .container {
  padding: 60px 10px;
}

.label {
  color: #fff;
  font-size: 26px;
}

.inputGroup {
  padding-bottom: 4px;
  border-bottom: 2px solid #fff;
  display: flex;
  color: #fff;
}

.inputGroup input {
  background-color: transparent;
  color: #fff;
  border: none;
  padding-left: 0px;
}

.inputGroup input::placeholder {
  color: #fff;
  font-size: 16px;
}

.inputGroup button {
  background-color: transparent;
  color: #fff;
  border: none;
  margin-right: -24px;
}

.buttonContainer {
  padding-top: 0px;
}

.imageElement--storePrint {
  /* max-height: 300px; */
  margin-bottom: 20px;
}

.infoCardTextContainer--info-card-about-us {
  position: absolute;
  left: 0;
  width: 30%;
}

.infoCardHeadline--info-card-about-us {
  text-align: left;
}

.infoCardSubhead--info-card-about-us {
  text-align: left;
}

.infoCardCallActionContainer--info-card-about-us {
  align-self: flex-start;
}

@media only screen and (min-width: 640px) {
  .newsletter .container {
    padding: 140px;
  }

  .label {
    font-size: 40px;
  }

  .infoCardTextContainer--info-card-about-us {
    max-width: 100%;
    margin: 0 auto;
    background-color: #E6F1E6;
    padding: 0px;
  }

  .infoCardHeadline--info-card-about-us {
    text-align: center;
  }

  .infoCardSubhead--info-card-about-us {
    text-align: center;
  }

  .infoCardCallActionContainer--info-card-about-us {
    align-self: center;
  }

  .infoCardContainer--info-card-home .infoCardTextContainer {
    width: 30%;
  }

  .infoCardContainer--info-card-home .infoCardImageContainer {
    width: 70%;
  }

  .imageElement--storePrint {
    margin-bottom: 0px;
    /* max-height: 650px; */
  }
}

```


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

[User] Show me the implementation of bonytos-de-tema/styles/css/vtex.store-footer.css from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```css
.row--menu-row {
  padding-right: 24px;
}

.row--menu-row .rowContainer {
  align-items: flex-start;
}

.row--payment-methods {
  padding-top: 16px;
}

```


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

[User] Show me the implementation of bonytos-de-tema/styles/css/vtex.flex-layout.css from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```css
.flexRow--deals {
  background-color: #a7afbd;
  padding: 14px 0px;
}

.flexRow--deals .stretchChildrenWidth {
  align-items: center;
}

.flexRow--deals .flexCol {
  align-items: center;
}

.flexCol--filterCol {
  max-width: 500px;
  min-width: 230px;
}

.flexCol--productCountCol {
  align-items: flex-start;
}

.flexCol--orderByCol {
  align-items: flex-end;
}

.flexCol--orderByMobileCol {
  width: 42%;
}

.flexCol--filterMobileCol {
  width: 38%;
}

.flexCol--switcherMobileCol {
  width: 20%;
}

```


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

[User] Show me the implementation of bonytos-de-tema/styles/css/vtex.carousel.css from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```css
.containerImg {
  background-color: #F0F0F0;
}

.containerImg img {
  max-width: 1520px;
}

```


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

[User] Show me the implementation of bonytos-de-tema/styles/configs/style.json from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "typeScale": [
        3, 2.25, 1.5, 1.25, 1, 0.875, 0.75
      ],
      "spacing": [0.125, 0.25, 0.5, 0.75, 1, 1.5, 2, 3, 4, 8, 16],
      "customMedia": [
        { "s": 20 },
        { "ns": {
            "value": 40,
            "minWidth": true
          }
        },
        { "m": {
            "value": 40,
            "minWidth": true
          }
        },
        { "l": {
          "value": 64,
          "minWidth": true
        }
        },
        { "xl": {
            "value": 80,
            "minWidth": true
          }
        }
      ],
      "colors": {
        "black-90": "rgba(0,0,0,.9)",
        "black-80": "rgba(0,0,0,.8)",
        "black-70": "rgba(0,0,0,.7)",
        "black-60": "rgba(0,0,0,.6)",
        "black-50": "rgba(0,0,0,.5)",
        "black-40": "rgba(0,0,0,.4)",
        "black-30": "rgba(0,0,0,.3)",
        "black-20": "rgba(0,0,0,.2)",
        "black-10": "rgba(0,0,0,.1)",
        "black-05": "rgba(0,0,0,.05)",
        "black-025": "rgba(0,0,0,.025)",
        "black-0125": "rgba(0,0,0,.0125)",

        "white-90": "rgba(255,255,255,.9)",
        "white-80": "rgba(255,255,255,.8)",
        "white-70": "rgba(255,255,255,.7)",
        "white-60": "rgba(255,255,255,.6)",
        "white-50": "rgba(255,255,255,.5)",
        "white-40": "rgba(255,255,255,.4)",
        "white-30": "rgba(255,255,255,.3)",
        "white-20": "rgba(255,255,255,.2)",
        "white-10": "rgba(255,255,255,.1)",
        "white-05": "rgba(255,255,255,.05)",
        "white-025": "rgba(255,255,255,.025)",
        "white-0125": "rgba(255,255,255,.0125)"
      },
      "semanticColors": {
        "background": {
          "base": "#F4F6F0",
          "base--inverted": "#2D3C23",
          "action-primary": "#62844C",
          "action-secondary": "#eef3f7",
          "emphasis": "#FCDE89",
          "disabled": "#f2f4f5",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "hover-background": {
          "action-primary": "#879F5A",
          "action-secondary": "#dbe9fd",
          "emphasis": "#FCDE89",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#e13232",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "active-background": {
          "action-primary": "#0c389f",
          "action-secondary": "#dbe9fd",
          "emphasis": "#FCDE89",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "text": {
          "action-primary": "#62844C",
          "action-secondary": "#eef3f7",
          "link": "#62844C",
          "emphasis": "#FCDE89",
          "disabled": "#979899",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "visited-text": {
          "link": "#0c389f"
        },
        "hover-text": {
          "action-primary": "#879F5A",
          "action-secondary": "#dbe9fd",
          "link": "#0c389f",
          "emphasis": "#FCDE89",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#e13232",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0"
        },
        "active-text": {
          "link": "#0c389f",
          "emphasis": "#FCDE89",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0"
        },
        "border": {
          "action-primary": "#62844C",
          "action-secondary": "#eef3f7",
          "emphasis": "#FCDE89",
          "disabled": "#e3e4e6",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "hover-border": {
          "action-primary": "#879F5A",
          "action-secondary": "#dbe9fd",
          "emphasis": "#FCDE89",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#e13232",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "active-border": {
          "action-primary": "#0c389f",
          "action-secondary": "#dbe9fd",
          "emphasis": "#FCDE89",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "on": {
          "base": "#3f3f40",
          "base--inverted": "#ffffff",
          "action-primary": "#ffffff",
          "action-secondary": "#62844C",
          "emphasis": "#ffffff",
          "disabled": "#979899",
          "success": "#ffffff",
          "success--faded": "#3f3f40",
          "danger": "#ffffff",
          "danger--faded": "#3f3f40",
          "warning": "#ffffff",
          "warning--faded": "#1a1a1a",
          "muted-1": "#ffffff",
          "muted-2": "#ffffff",
          "muted-3": "#3f3f40",
          "muted-4": "#3f3f40",
          "muted-5": "#3f3f40"
        },
        "hover-on": {
          "action-primary": "#ffffff",
          "action-secondary": "#62844C",
          "emphasis": "#ffffff",
          "success": "#ffffff",
          "success--faded": "#3f3f40",
          "danger": "#ffffff",
          "danger--faded": "#3f3f40",
          "warning": "#ffffff",
          "warning--faded": "#1a1a1a"
        },
        "active-on": {
          "action-primary": "#ffffff",
          "action-secondary": "#62844C",
          "emphasis": "#ffffff",
          "success": "#ffffff",
          "success--faded": "#3f3f40",
          "danger": "#ffffff",
          "danger--faded": "#3f3f40",
          "warning": "#ffffff",
          "warning--faded": "#1a1a1a"
        }
      },
      "borderWidths": [0, 0.125, 0.25, 0.5, 1, 2],
      "borderRadius": [0, 0.125, 0.25, 0.5, 1],
      "widths": [1, 2, 4, 8, 16],
      "maxWidths": [1, 2, 4, 8, 16, 32, 48, 64, 96],
      "heights": [1, 2, 4, 8, 16],
      "sizes": [
        {"name": "small", "value": 2},
        {"name": "regular", "value": 2.5},
        {"name": "large", "value": 3}
      ],
      "typography":{
        "measure": [30, 34, 20],
        "styles": {
          "heading-1": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "700",
            "fontSize": "3rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-2": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "700",
            "fontSize": "2.25rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-3": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "700",
            "fontSize": "1.75rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-4": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "1.5rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-5": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "1.25rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "heading-6": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "1.25rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "body": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "1rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "small": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "0.875rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "mini": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "normal",
            "fontSize": "0.75rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          },
          "action": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "500",
            "fontSize": "1rem",
            "textTransform": "uppercase",
            "letterSpacing": "0"
          },
          "action--small": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "500",
            "fontSize": "0.875rem",
            "textTransform": "uppercase",
            "letterSpacing": "0"
          },
          "action--large": {
            "fontFamily": "San Francisco, -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, ubuntu, roboto, noto, segoe ui, arial, sans-serif",
            "fontWeight": "500",
            "fontSize": "1.25rem",
            "textTransform": "uppercase",
            "letterSpacing": "0"
          },
          "code": {
            "fontFamily": "Consolas, monaco, monospace",
            "fontWeight": "normal",
            "fontSize": "1rem",
            "textTransform": "initial",
            "letterSpacing": "0"
          }
        }
      },
      "opacity": [1, 0.9, 0.8, 0.7, 0.6, 0.5, 0.4, 0.3, 0.2, 0.1, 0.05, 0.025, 0]
}

```


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

[User] Show me the implementation of bonytos-de-tema/store/blocks/product-assembly.jsonc from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "sticky-layout#buy-button": {
    "props": {
      "position": "bottom"
    },
    "children": ["flex-layout.row#buy-button"]
  },
  "product-assembly-options": {
    "children": [
      "flex-layout.row#product-assembly-options",
      "assembly-option-input-values"
    ]
  },
  "assembly-option-input-values": {
    "props": {
      "optionsDisplay": "box"
    }
  },
  "flex-layout.row#product-assembly-options": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "colSizing": "auto"
    },
    "children": [
      "flex-layout.col#product-assembly-image",
      "flex-layout.col#product-assembly-middle",
      "flex-layout.col#product-assembly-quantity"
    ]
  },
  "flex-layout.col#product-assembly-quantity": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": [
      "assembly-option-item-quantity-selector"
    ]
  },
  "flex-layout.col#product-assembly-image": {
    "props": {
      "marginRight": 4
    },
    "children": [
      "assembly-option-item-image"
    ]
  },
  "flex-layout.col#product-assembly-middle": {
    "props": {
      "width": "grow",
      "verticalAlignment": "middle"
    },
    "children": [
      "assembly-option-item-name",
      "assembly-option-item-price",
      "assembly-option-item-children-description",
      "assembly-option-item-customize#first-level"
    ]
  },
  "assembly-option-item-customize#first-level": {
    "props": {
      "buttonProps": {
        "collapse": "left"
      }
    },
    "children": [
      "flex-layout.row#item-customize"
    ]
  },
  "flex-layout.row#item-customize": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "colSizing": "auto"
    },
    "children": [
      "flex-layout.col#product-assembly-image",
      "flex-layout.col#item-customize-middle",
      "flex-layout.col#item-customize-quantity"
    ]
  },
  "flex-layout.col#item-customize-middle": {
    "props": {
      "width": "grow",
      "verticalAlignment": "middle"
    },
    "children": [
      "assembly-option-item-name",
      "assembly-option-item-price",
      "assembly-option-item-children-description",
      "assembly-option-item-customize#sec-level"
    ]
  },
  "flex-layout.col#item-customize-quantity": {
    "props": {
      "horizontalAlign": "right",
      "verticalAlign": "middle"
    },
    "children": [
      "assembly-option-item-quantity-selector"
    ]
  },
  "assembly-option-item-customize#sec-level": {
    "props": {
      "buttonProps": {
        "collapse": "left"
      }
    },
    "children": [
      "assembly-option-item-image",
      "assembly-option-item-name",
      "assembly-option-item-price",
      "assembly-option-item-quantity-selector"
    ]
  }
}
```


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

[User] Show me the implementation of bonytos-de-tema/store/blocks/about-us.json from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#about-us": {
    "blocks": [
      "info-card#about-us"
    ]
  },

  "info-card#about-us": {
    "props": {
      "id": "info-card-about-us",
      "isFullModeStyle": true,
      "textPosition": "center",
      "imageUrl": "https://i.imgur.com/20MIGfk.png",
      "headline": "We are a company focused on natural products",
      "subhead": "We believe that natural beauty comes allong with organic products. We don't test in animals.",
      "callToActionText": "Subscribe to newsletter",
      "callToActionUrl": "/sale/d",
      "blockClass": "info-card-about-us",
      "textAlignment": "center"
    }
  }
}

```


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

[User] Show me the implementation of bonytos-de-tema/store/blocks/product.json from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.product": {
    "children": [
      "flex-layout.row#product-breadcrumb",
      "flex-layout.row#product-main",
      "shelf.relatedProducts",
      "product-description",
      "product-reviews",
      "product-questions-and-answers"
    ]
  },
  "product-description": {
    "props": {
      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam consequat, dolor vel gravida placerat, nisi justo varius arcu, in scelerisque nisi risus non nibh. Ut suscipit nunc eu dui placerat convallis. Sed accumsan ultricies enim non facilisis. Donec nec pulvinar dolor. Etiam sollicitudin varius cursus. Pellentesque dignissim neque eu nisi finibus venenatis. Nunc ac CLEITON eget lacus scelerisque hendrerit nec sed lectus. Fusce feugiat tincidunt auctor. In dictum sapien pulvinar felis viverra malesuada. Etiam feugiat lobortis maximus. Sed augue lacus, euismod at arcu a, scelerisque vulputate erat. Pellentesque justo ipsum, auctor in arcu eu, ornare ullamcorper elit. Donec sed nisi semper ligula cursus pellentesque ac non lacus. Etiam semper quam vehicula, posuere nunc nec, vehicula eros."
    }
  },
  "flex-layout.row#product-breadcrumb": {
    "props": {
      "marginTop": 4
    },
    "children": ["breadcrumb"]
  },
  "flex-layout.row#product-main": {
    "props": {
      "colGap": 7,
      "rowGap": 7,
      "marginTop": 4,
      "marginBottom": 7,
      "paddingTop": 7,
      "paddingBottom": 7
    },
    "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
  },

  "stack-layout": {
    "children": [
      "flex-layout.row#product-image",
      "product-specification-badges"
    ]
  },

  "product-specification-badges": {
    "props": {
      "specificationGroupName": "Group",
      "specificationName": "On Sale",
      "visibleWhen": "True",
      "displayValue": "SPECIFICATION_NAME"
    }
  },

  "flex-layout.col#stack": {
    "children": ["stack-layout"],
    "props": {
      "width": "60%",
      "rowGap": 0
    }
  },
  "flex-layout.row#product-image": {
    "children": ["product-images"]
  },
  "product-images": {
    "props": {
      "displayThumbnailsArrows": true
    }
  },
  "flex-layout.col#right-col": {
    "props": {
      "preventVerticalStretch": true,
      "rowGap": 0
    },
    "children": [
      "product-name",
      "product-rating-summary",
      "product-price#product-details",
      "product-separator",
      "product-quantity",
      "product-identifier.product",
      "sku-selector",
      "product-assembly-options",
      "flex-layout.row#buy-button",
      "availability-subscriber"
    ]
  },

  "product-price#product-details": {
    "props": {
      "showInstallments": true,
      "showSavings": false,
      "showListPrice": true
    }
  },

  "flex-layout.row#buy-button": {
    "props": {
      "marginTop": 4,
      "marginBottom": 7
    },
    "children": ["buy-button"]
  }
}

```


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

[User] Show me the implementation of bonytos-de-tema/store/blocks/search.jsonc from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

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

  "store.search#brand": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "orderByField": "OrderByReleaseDateDESC",
        "hideUnavailableItems": true,
        "maxItemsPerPage": 10
      }
    }
  },

  "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#searchbread",
      "flex-layout.row#searchtitle",
      "flex-layout.row#result"
    ],
    "props": {
      "pagination": "show-more",
      "mobileLayout": {
        "mode1": "small",
        "mode2": "normal"
      }
    }
  },
  "flex-layout.row#searchbread": {
    "children": ["breadcrumb.search"],
    "props": {
      "preserveLayoutOnMobile": true,
      "fullWidth": true
    }
  },
  "flex-layout.row#searchtitle": {
    "children": ["search-title.v2"]
  },
  "flex-layout.row#result": {
    "children": ["flex-layout.col#filter", "flex-layout.col#content"],
    "props": {
      "preventHorizontalStretch": true,
      "fullWidth": true
    }
  },
  "flex-layout.col#filter": {
    "children": ["filter-navigator.v3"],
    "props": {
      "blockClass": "filterCol"
    }
  },
  "flex-layout.col#content": {
    "children": [
      "flex-layout.row#searchinfo",
      "flex-layout.row#fetchprevious",
      "flex-layout.row#products",
      "flex-layout.row#fetchmore"
    ],
    "props": {
      "width": "grow"
    }
  },
  "flex-layout.row#searchinfo": {
    "children": ["flex-layout.col#productCount", "flex-layout.col#orderby"]
  },
  "flex-layout.col#productCount": {
    "children": ["total-products.v2"],
    "props": {
      "blockClass": "productCountCol"
    }
  },
  "flex-layout.col#orderby": {
    "children": ["order-by.v2"],
    "props": {
      "blockClass": "orderByCol"
    }
  },
  "flex-layout.row#fetchprevious": {
    "props": {
      "marginBottom": 3
    },
    "children": ["search-fetch-previous"]
  },
  "flex-layout.row#fetchmore": {
    "props": {
      "marginTop": 3
    },
    "children": ["search-fetch-more"]
  },
  "flex-layout.row#products": {
    "children": ["search-content"]
  },
  "search-content": {
    "blocks": ["gallery", "not-found"]
  },

  "search-result-layout.mobile": {
    "children": [
      "flex-layout.row#searchinfomobile",
      "flex-layout.row#searchbread",
      "flex-layout.row#productCountMobile",
      "flex-layout.row#contentmobile"
    ],
    "props": {
      "pagination": "show-more",
      "mobileLayout": {
        "mode1": "small",
        "mode2": "normal"
      }
    }
  },
  "flex-layout.row#contentmobile": {
    "children": ["search-content"],
    "props": {
      "preserveLayoutOnMobile": true
    }
  },

  "flex-layout.row#searchinfomobile": {
    "children": [
      "flex-layout.col#orderByMobile",
      "flex-layout.col#filterMobile",
      "flex-layout.col#switcherMobile"
    ],
    "props": {
      "preserveLayoutOnMobile": true,
      "colSizing": "auto",
      "colJustify": "around"
    }
  },

  "flex-layout.col#orderByMobile": {
    "children": ["order-by.v2"],
    "props": {
      "blockClass": "orderByMobileCol"
    }
  },

  "flex-layout.row#productCountMobile": {
    "children": ["total-products.v2"],
    "props": {
      "blockClass": "productCountMobileRow"
    }
  },

  "flex-layout.col#filterMobile": {
    "children": ["filter-navigator.v3"],
    "props": {
      "blockClass": "filterMobileCol"
    }
  },
  "flex-layout.col#switcherMobile": {
    "children": ["search-layout-switcher"],
    "props": {
      "blockClass": "switcherMobileCol"
    }
  },
  "search-not-found-layout": {
    "children": ["flex-layout.row#searchbread", "flex-layout.row#notfound"]
  },

  "flex-layout.row#notfound": {
    "children": ["not-found"],
    "props": {
      "fullWidth": true
    }
  },

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

  "gallery": {
    "blocks": ["product-summary.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 bonytos-de-tema/store/blocks/home/home.jsonc from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.home": {
    "blocks": [
       "carousel#home",
       "shelf#home",
       "info-card#home",
       "rich-text#question"
    ]
  },

  "carousel#home": {
    "props": {
      "autoplay": false,
      "banners": [
        {
          "image": "https://i.imgur.com/iBnFjgI.jpg",
          "mobileImage": "https://storecomponents.vteximg.com.br/arquivos/banner-principal-mobile.jpg"
        },
        {
          "image": "https://www.onegreenplanet.org/wp-content/uploads/2018/12/shutterstock_1428218030-1200x800.jpg",
          "mobileImage": "https://i.imgur.com/Xbj6T5t.png"
        },
        {
          "image": "https://i.imgur.com/yW173iW.jpg",
          "mobileImage": "https://storecomponents.vteximg.com.br/arquivos/banner-principal-mobile.jpg"
        }
      ],
      "height": 550,
      "showArrows": true,
      "showDots": true
    }
  },

  "shelf#home": {
    "blocks": ["product-summary.shelf"],
    "props": {
      "orderBy": "OrderByBestDiscountDESC",
      "collection": 138,
      "paginationDotsVisibility": "visible",
      "productList": {
        "maxItems": 4,
        "itemsPerPage": 4,
        "minItemsPerPage": 1.5,
        "scroll": "BY_PAGE",
        "arrows": true,
        "titleText": "Natural beauty"
      }
    }
  },

  "product-summary#home": {
    "props": {
      "isOneClickBuy": true,
      "showBadge": true,
      "badgeText": "OFF",
      "buyButtonText": "Add to avocart 🥑",
      "displayBuyButton": "displayButtonHover",
      "showCollections": false,
      "showListPrice": true,
      "labelSellingPrice": "To",
      "labelListPrice": "From",
      "showLabels": true,
      "showInstallments": true,
      "showSavings": true,
      "name": {
        "showBrandName": true,
        "showSku": true,
        "showProductReference": true
      }
    }
  },

  "info-card#home": {
    "props": {
      "id": "info-card-home",
      "isFullModeStyle": false,
      "textPosition": "center",
      "imageUrl": "https://morethanglam.com/wp-content/uploads/2016/05/Alternative-skin-care-and-scrub-fresh-avocado-leaves-sea-salt-oils-lime-and-honey-on-marble-background.jpg",
      "headline": "Self-care line focused on natural products",
      "callToActionText": "DISCOVER",
      "callToActionUrl": "/sale/d",
      "blockClass": "info-card-home",
      "textAlignment": "center"
    }
  },

  "rich-text#question": {
    "props": {
      "text": "**This is the best example store built using the VTEX platform.\nWe are the \"Bonytos de Tema\" team in the Hackatheme.\nPlease rate us.**",
      "blockClass": "question"
    }
  }
}

```


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

[User] Show me the implementation of bonytos-de-tema/store/blocks/home/deals.json from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#deals": {
    "children": [
      "flex-layout.col#deals1",
      "flex-layout.col#deals2",
      "flex-layout.col#deals3",
      "flex-layout.col#deals4"
    ],
    "props": {
      "blockClass": "deals"
    }
  },

  "flex-layout.col#deals1": {
    "children": [
      "image#deal1",
      "rich-text#deal1"
    ]
  },
  "image#deal1": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/box.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal1": {
    "props": {
      "text": "Free shipping",
      "blockClass": "deals"
    }
  },
  "flex-layout.col#deals2": {
    "children": [
      "image#deal2",
      "rich-text#deal2"
    ]
  },
  "image#deal2": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/delivery-fast.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal2": {
    "props": {
      "text": "One day delivery",
      "blockClass": "deals"
    }
  },
  "flex-layout.col#deals3": {
    "children": [
      "image#deal3",
      "rich-text#deal3"
    ]
  },
  "image#deal3": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/store.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal3": {
    "props": {
      "text": "Pick up in store",
      "blockClass": "deals"
    }
  },
  "flex-layout.col#deals4": {
    "children": [
      "image#deal4",
      "rich-text#deal4"
    ]
  },
  "image#deal4": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/coupon.png",
      "maxHeight": "24px"
    }
  },
  "rich-text#deal4": {
    "props": {
      "text": "Exclusive deals",
      "blockClass": "deals"
    }
  }
}

```


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

[User] Show me the implementation of bonytos-de-tema/store/blocks/footer/footer.json from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "footer": {
    "blocks": ["footer-layout.desktop", "footer-layout.mobile"]
  },
  "footer-layout.desktop": {
    "children": [
      "flex-layout.row#footer-1-desktop",
      "flex-layout.row#footer-2-desktop",
      "flex-layout.row#footer-3-desktop"
    ]
  },
  "flex-layout.row#footer-1-desktop": {
    "children": [
      "social-networks"
    ],
    "props": {
      "blockClass": "menu-row",
      "paddingTop": 6,
      "paddingBottom": 3
    }
  },

  "social-networks": {
    "props": {
      "socialNetworks": [
        {
          "name": "Facebook",
          "url": "https://www.facebook.com/omelhordavovojuju/"
        },
        {
          "name": "Instagram",
          "url": "https://www.instagram.com/vovojujuu/"
        },
        {
          "name": "Twitter",
          "url": "https://twitter.com/jujudisse?lang=en"
        },
        {
          "name": "Youtube",
          "url": "https://www.youtube.com/watch?v=Iq8Y5Z1PIuQ"
        }
      ]
    }
  },

  "flex-layout.row#footer-2-desktop": {
    "children": ["accepted-payment-methods"],
    "props": {
      "blockClass": "payment-methods"
    }
  },
  "accepted-payment-methods": {
    "props": {
      "paymentMethods": []
    }
  },

  "flex-layout.row#footer-3-desktop": {
    "children": ["rich-text#footer"],
    "props": {
      "blockClass": "credits"
    }
  },
  "rich-text#footer": {
    "props": {
      "text": "",
      "blockClass": "footer"
    }
  },

  "footer-layout.mobile": {
    "children": [
      "flex-layout.row#2-footer-mobile"
    ]
  },
  "flex-layout.row#2-footer-mobile": {
    "children": ["flex-layout.col#footer-1-mobile"],
    "props": {
      "blockClass": "payment-methods",
      "paddingTop": 4,
      "paddingBottom": 4
    }
  },
  "flex-layout.col#footer-1-mobile": {
    "children": [
      "accepted-payment-methods",
      "social-networks",
      "rich-text#footer-mobile"
    ],
    "props": {
      "blockClass": "payment-methods",
      "paddingTop": 4,
      "paddingBottom": 4,
      "rowGap": 4
    }
  },
  "flex-layout.row#1-footer-mobile": {
    "props": {
      "paddingTop": 4,
      "paddingBottom": 4
    },
    "children": ["vtex.menu@2.x:menu#footer-mobile"]
  },
  "rich-text#footer-mobile": {
    "props": {
      "text": "",
      "blockClass": "footer"
    }
  }
}

```


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

[User] Show me the implementation of bonytos-de-tema/store/blocks/footer/menu.json from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#Products": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#news",
      "menu-item#blackfriday",
      "menu-item#sale",
      "menu-item#personalization"
    ]
  },
  "menu-item#news": {
    "props": {
      "id": "menu-item-news",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "News",
        "text": "News"
      }
    }
  },
  "menu-item#blackfriday": {
    "props": {
      "id": "menu-item-black-friday",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "BlackFriday",
        "text": "Black Friday"
      }
    }
  },
  "menu-item#sale": {
    "props": {
      "id": "menu-item-sale",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Sale",
        "text": "Sale"
      }
    }
  },
  "menu-item#personalization": {
    "props": {
      "id": "menu-item-personalization",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Personalization",
        "text": "Personalization"
      }
    }
  },

  "vtex.menu@2.x:menu#footer-decoration": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#smartphones",
      "menu-item#videogames",
      "menu-item#tvs"
    ]
  },

  "menu-item#smartphones": {
    "props": {
      "id": "menu-item-smartphones",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/decoration/smartphones",
        "noFollow": true,
        "tagTitle": "Smartphones",
        "text": "Smartphones"
      }
    }
  },

  "menu-item#videogames": {
    "props": {
      "id": "menu-item-videogames",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/decoration/videogames",
        "noFollow": true,
        "tagTitle": "Videogames",
        "text": "Videogames"
      }
    }
  },

  "menu-item#tvs": {
    "props": {
      "id": "menu-item-tvs",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/decoration/tvs",
        "noFollow": true,
        "tagTitle": "TVs",
        "text": "TVs"
      }
    }
  },

  "vtex.menu@2.x:menu#footer-bags": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#bags",
      "menu-item#backpacks",
      "menu-item#necessaire"
    ]
  },

  "menu-item#bags": {
    "props": {
      "id": "menu-item-bags",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/bags/d",
        "noFollow": true,
        "tagTitle": "Bags",
        "text": "Bags"
      }
    }
  },

  "menu-item#backpacks": {
    "props": {
      "id": "menu-item-backpacks",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/bags/backpacks",
        "noFollow": true,
        "tagTitle": "Backpacks",
        "text": "Backpacks"
      }
    }
  },

  "menu-item#necessaire": {
    "props": {
      "id": "menu-item-necessaire",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/bags/necessaire",
        "noFollow": true,
        "tagTitle": "Necessaire",
        "text": "Necessaire"
      }
    }
  },

  "vtex.menu@2.x:menu#footer-clothing": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#clothing",
      "menu-item#shorts",
      "menu-item#tank-tops",
      "menu-item#shirts",
      "menu-item#sweatshirt",
      "menu-item#cropped"
    ]
  },

  "vtex.menu@2.x:menu#footer-mobile": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#clothing-mobile",
      "menu-item#decoration-mobile",
      "menu-item#sale-mobile"
    ]
  },

  "menu-item#clothing-mobile": {
    "props": {
      "id": "menu-item-category-clothing",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/d",
        "noFollow": true,
        "tagTitle": "Clothing",
        "text": "Clothing"
      }
    },
    "blocks": ["vtex.menu@2.x:submenu.accordion#clothing"]
  },
  "vtex.menu@2.x:submenu.accordion#clothing": {
    "children": ["vtex.menu@2.x:menu#clothing-accordion"]
  },

  "vtex.menu@2.x:menu#clothing-accordion": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#shorts",
      "menu-item#tank-tops",
      "menu-item#shirts",
      "menu-item#sweatshirt",
      "menu-item#cropped"
    ]
  },

  "menu-item#decoration-mobile": {
    "props": {
      "itemProps": {
        "tagTitle": "Decoration",
        "text": "Decoration"
      }
    },
    "blocks": ["vtex.menu@2.x:submenu.accordion#decoration"]
  },
  "vtex.menu@2.x:submenu.accordion#decoration": {
    "children": ["vtex.menu@2.x:menu#footer-decoration-mobile"]
  },

  "vtex.menu@2.x:menu#footer-decoration-mobile": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#smartphones",
      "menu-item#videogames",
      "menu-item#tvs"
    ]
  },

  "menu-item#sale-mobile": {
    "props": {
      "itemProps": {
        "tagTitle": "Sale",
        "text": "Sale"
      }
    },
    "blocks": ["vtex.menu@2.x:submenu.accordion#sale"]
  },
  "vtex.menu@2.x:submenu.accordion#sale": {
    "children": ["vtex.menu@2.x:menu#footer-sale-mobile"]
  },

  "vtex.menu@2.x:menu#footer-sale-mobile": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#smartphones",
      "menu-item#videogames",
      "menu-item#tvs"
    ]
  },

  "menu-item#clothing": {
    "props": {
      "id": "menu-item-category-clothing",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/d",
        "noFollow": true,
        "tagTitle": "Clothing",
        "text": "Clothing"
      }
    }
  },
  "menu-item#category-maquiagem": {
    "props": {
      "id": "menu-item-category-category-maquiagem",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/maquiagem/d",
        "noFollow": true,
        "tagTitle": "Maquiagem",
        "text": "Maquiagem"
      }
    }
  },

  "menu-item#shorts": {
    "props": {
      "id": "menu-item-shorts",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/shorts",
        "noFollow": false,
        "tagTitle": "Shorts",
        "text": "Shorts"
      }
    }
  },

  "menu-item#tank-tops": {
    "props": {
      "id": "menu-item-tank-tops",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/tank-tops",
        "noFollow": false,
        "tagTitle": "Tank tops",
        "text": "Tank tops"
      }
    }
  },

  "menu-item#shirts": {
    "props": {
      "id": "menu-item-shirts",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/shirts",
        "noFollow": false,
        "tagTitle": "Shirts",
        "text": "Shirts"
      }
    }
  },

  "menu-item#sweatshirt": {
    "props": {
      "id": "menu-item-sweat-shirts",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/sweatshirt",
        "noFollow": false,
        "tagTitle": "Sweatshirt",
        "text": "Sweatshirt"
      }
    }
  },

  "menu-item#cropped": {
    "props": {
      "id": "menu-item-cropped",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/clothing/cropped",
        "noFollow": false,
        "tagTitle": "Cropped",
        "text": "Cropped"
      }
    }
  }
}

```


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

[User] Show me the implementation of bonytos-de-tema/store/blocks/header/header.json from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "header": {
    "blocks": [
      "header-layout.desktop",
      "header-layout.mobile"
    ]
  },
  "header.full": {
    "blocks": [
      "header-layout.desktop",
      "header-layout.mobile"
    ]
  },
  "header-layout.desktop": {
    "children": [
      "header-row#42-desktop"
    ],
    "props": {
      "fullWidth": true
    }
  },

  "header-row#42-desktop": {
    "children": [
      "drawer",
      "logo#desktop",
      "vtex.menu@2.x:menu#category-menu",
      "header-spacer",
      "header-spacer",
      "search-bar",
      "locale-switcher",
      "login",
      "minicart"
    ],
    "props": {
      "fullWidth": true,
      "compactMode": true
    }
  },

  "header-row#1-desktop": {
    "children": [
      "telemarketing"
    ],
    "props": {
      "fullWidth": true
    }
  },

  "header-row#2-desktop": {
    "children": [
      "notification.bar#home"
    ],
    "props": {
      "fullWidth": "true"
    }
  },
  "notification.bar#home": {
    "props": {
      "content": "SELECTED ITEMS ON SALE! CHECK IT OUT!"
    }
  },
  "header-row#3-desktop": {
    "children": [
      "vtex.menu@2.x:menu#websites",
      "header-spacer",
      "vtex.menu@2.x:menu#institutional"
    ],
    "props": {
      "blockClass": "menu-link",
      "inverted": "true"
    }
  },
  "header-row#4-desktop": {
    "children": [
      "logo#desktop",
      "vtex.menu@2.x:menu#category-menu",
      "header-spacer",
      "header-spacer",
      "search-bar",
      "locale-switcher",
      "login",
      "minicart"
    ],
    "props": {
      "sticky": true,
      "blockClass": "main-header"
    }
  },
  "logo#desktop": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://i.imgur.com/Xbj6T5t.png",
      "width": "37"
    }
  },

  "minicart": {
    "blocks": [
      "product-summary"
    ],
    "props": {
      "type": "popup",
      "showRemoveButton": true,
      "showDiscount": true,
      "showSku": true,
      "labelMiniCartEmpty": "",
      "labelButtonFinishShopping": "Go to checkout",
      "enableQuantitySelector": true,
      "maxQuantity": 10,
      "labelClasses": "gray"
    }
  },

  "header-layout.mobile": {
    "children": [
      "header-row#1-mobile",
      "header-row#2-mobile"
    ]
  },
  "header-row#1-mobile": {
    "children": [
      "drawer",
      "logo#mobile",
      "header-spacer",
      "header-spacer",
      "minicart"
    ],
    "props": {
      "sticky": true,
      "blockClass": "main-header-mobile"
    }
  },
  "header-row#2-mobile": {
    "children": [
      "search-bar#mobile"
    ],
    "props": {
      "sticky": true,
      "blockClass": "main-header-search-mobile",
      "fullWidth": true
    }
  },
  "drawer": {
    "children": [
      "menu#drawer"
    ]
  },

  "menu#drawer": {
    "children": [
      "menu-item#category-maquiagem",
      "menu-item#category-perfumes",
      "menu-item#category-cabelo"
    ],
    "props": {
      "orientation": "vertical"
    }
  },
  "menu-item#category-maquiagem": {
    "props": {
      "id": "menu-item-category-maquiagem",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/makeup/",
        "noFollow": true,
        "tagTitle": "Maquiagem",
        "text": "Maquiagem"
      }
    }
  },
  "menu-item#category-perfumes": {
    "props": {
      "id": "menu-item-category-perfumes",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/perfume/",
        "noFollow": true,
        "tagTitle": "Perfumes",
        "text": "Perfumes"
      }
    }
  },
  "menu-item#category-cabelo": {
    "props": {
      "id": "menu-item-hair",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/hair/",
        "noFollow": true,
        "tagTitle": "Cabelo",
        "text": "Cabelo"
      }
    }
  },

  "logo#mobile": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://i.imgur.com/Xbj6T5t.png",
      "width": "30",
      "blockClass": "logo-mobile"
    }
  },
  "search-bar#desktop": {
    "props": {
      "compactMode":false
    }
  },
  "search-bar#mobile": {
    "props": {
      "maxWidth": "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 bonytos-de-tema/store/blocks/header/category-menu.json from the bonytos-de-tema VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#category-menu": {
    "children": [
      "menu-item#category-maquiagem",
      "menu-item#category-perfumes",
      "menu-item#category-cabelo",
      "menu-item#about-us"
    ]
  },
  "menu-item#category-clothing": {
    "props": {
      "id": "menu-item-category-clothing",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/clothing/",
        "noFollow": true,
        "tagTitle": "Clothing",
        "text": "Clothing"
      }
    },
    "blocks": [
      "vtex.menu@2.x:submenu#category-clothing"
    ]
  },
  "vtex.menu@2.x:submenu#category-clothing": {
    "props": {
      "width": "auto"
    },
    "children": [
      "vtex.menu@2.x:menu#category-clothing"
    ]
  },
  "vtex.menu@2.x:menu#category-clothing": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#category-clothing-hats",
      "menu-item#category-clothing-shoes",
      "menu-item#category-clothing-bags"
    ]
  },
  "menu-item#category-clothing-hats": {
    "props": {
      "id": "menu-item-category-clothing-hats",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/hats/",
        "noFollow": true,
        "tagTitle": "Hats",
        "text": "Hats"
      }
    }
  },
  "menu-item#category-maquiagem": {
    "props": {
      "id": "menu-item-category-maquiagem",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/makeup/",
        "noFollow": true,
        "tagTitle": "Maquiagem",
        "text": "Maquiagem"
      }
    }
  },
  "menu-item#category-perfumes": {
    "props": {
      "id": "menu-item-category-perfumes",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/perfume/",
        "noFollow": true,
        "tagTitle": "Perfumes",
        "text": "Perfumes"
      }
    }
  },
  "menu-item#category-cabelo": {
    "props": {
      "id": "menu-item-hair",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/hair/",
        "noFollow": true,
        "tagTitle": "Cabelo",
        "text": "Cabelo"
      }
    }
  },
  "menu-item#about-us": {
    "props": {
      "id": "menu-item-about-us",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/about-us",
        "noFollow": true,
        "tagTitle": "About us",
        "text": "About us"
      }
    }
  },
  "menu-item#category-clothing-shoes": {
    "props": {
      "id": "menu-item-category-clothing-shoes",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/shoes/",
        "noFollow": true,
        "tagTitle": "Shoes",
        "text": "Shoes"
      }
    }
  },
  "menu-item#category-clothing-bags": {
    "props": {
      "id": "menu-item-category-clothing-bags",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/apparel---accessories/bags/",
        "noFollow": true,
        "tagTitle": "Bags",
        "text": "Bags"
      }
    }
  },
  "menu-item#category-decoration": {
    "props": {
      "id": "menu-item-category-decoration",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/home---decor/",
        "noFollow": true,
        "tagTitle": "Decoration",
        "text": "Decoration"
      }
    }
  },
  "menu-item#custom-sale": {
    "props": {
      "id": "menu-item-custom-sale",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/sale/d",
        "noFollow": true,
        "tagTitle": "Sale",
        "text": "Sale"
      }
    },
    "blocks": [
      "vtex.menu@2.x:submenu#custom-sale"
    ]
  },
  "vtex.menu@2.x:submenu#custom-sale": {
    "props": {
      "width": "100%"
    },
    "children": [
      "vtex.menu@2.x:menu#custom-sale",
      "info-card#home"
    ]
  },
  "vtex.menu@2.x:menu#custom-sale": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#category-clothing-hats",
      "menu-item#category-clothing-shoes"
    ]
  }
}

```