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

[User] Show me the implementation of buyer-org-supplier/node/clients/clClient.ts from the buyer-org-supplier VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { InstanceOptions, IOContext, RequestConfig } from '@vtex/api'
import { JanusClient } from '@vtex/api'
import type { AxiosError } from 'axios'

import { statusToError } from '../utils/statusCodeUtils'

const FIVE_SECONDS_MS = 5 * 1000

export type CLSchema = {
  id: string
}

export class CLClient extends JanusClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super(context, {
      ...options,
      headers: {
        ...(options && options.headers),
        VtexIdClientAutCookie: context.authToken,
      },
      timeout: FIVE_SECONDS_MS,
    })
  }

  public getClientData = (userId: string, customFields?: string): Promise<CLSchema[] | AxiosError> =>
    this.get<CLSchema[]>(
      this.searchPathByUserId(userId),
      {
        metric: 'cl-getCLData',
        params: {
          extraFields: customFields,
        },
      }
    )

  protected get = <T>(url: string, config?: RequestConfig) =>
    this.http.get<T>(url, config).catch<AxiosError>(statusToError)

  private searchPathByUserId = (userId: string) => `/api/dataentities/CL/search?_fields=_all&_where=userId=${userId}`
}

```


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

[User] Show me the implementation of buyer-org-supplier/node/clients/profileSystem.ts from the buyer-org-supplier VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type {InstanceOptions, IOContext, RequestConfig} from '@vtex/api'
import {JanusClient} from '@vtex/api'
import type {AxiosError} from 'axios'

import {statusToError} from '../utils/statusCodeUtils'
import type {CurrentProfile, Profile} from '../typings/profileSystem'

const FIVE_SECONDS_MS = 5 * 1000

export type ProfileCreationResponse = {
  profileId: string
}

export class ProfileSystemClient extends JanusClient {
  constructor(context: IOContext, options?: InstanceOptions) {
    super(context, {
      ...options,
      headers: {
        ...(options && options.headers),
        VtexIdClientAutCookie: context.authToken,
      },
      timeout: FIVE_SECONDS_MS,
    })
  }

  private getUserIdentification = (user: CurrentProfile) =>
    user.userId ?? encodeURIComponent(user.email)

  public getProfileInfo = (user: CurrentProfile, customFields?: string) =>
    this.get<Profile>(
      `${this.baseUrl}/${this.getUserIdentification(user)}/personalData`,
      {
        metric: 'profile-system-getProfileInfo',
        params: {
          extraFields: customFields,
        },
      }
    )

  public createProfile = (profile: any): Promise<ProfileCreationResponse | AxiosError> =>
    this.post<ProfileCreationResponse>(
      this.baseUrl,
      { personalData: profile },
      {
        metric: 'profile-system-createProfile',
      }
    )

  public updateAddress = (user: Profile, addressesData: any) =>
    this.post(
      `${this.baseUrl}/${this.getUserIdentification(user)}/addresses`,
      addressesData,
      {
        metric: 'profile-system-updateAddress',
      }
    )

  protected post = <T>(url: string, data?: unknown, config?: RequestConfig) =>
    this.http.post<T>(url, data, config).catch<AxiosError>(statusToError)

  protected get = <T>(url: string, config?: RequestConfig) =>
    this.http.get<T>(url, config).catch<AxiosError>(statusToError)

  private baseUrl = '/api/profile-system/pvt/profiles'
}

```


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

[User] Show me the implementation of buyer-org-supplier/node/clients/index.ts from the buyer-org-supplier VTEX app.

[Assistant]
Here's the implementation:

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

import { ProfileSystemClient } from './profileSystem'
import { CLClient } from "./clClient";

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

  public get clClient() {
    return this.getOrSet('clClient', CLClient)
  }
}

```


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

[User] Show me the implementation of buyer-org-supplier/node/typings/profileSystem.d.ts from the buyer-org-supplier VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { Maybe } from '@vtex/api'

interface Address {
  id?: string
  userId?: string
  receiverName?: string
  complement?: string
  neighborhood?: string
  country?: string
  state?: string
  number?: string
  street?: string
  postalCode?: string
  city?: string
  reference?: string
  addressName?: string
  addressType?: string
  geoCoordinates?: string
}

export interface Profile {
  firstName?: string
  lastName?: string
  profilePicture?: string
  email: string
  document?: string
  userId: string
  birthDate?: string
  gender?: string
  homePhone?: string
  businessPhone?: string
  isCorporate?: boolean
  corporateName?: string
  corporateDocument?: string
  stateRegistration?: string
  approved?: boolean
  addresses?: Address[]
  tradeName?: string
  payments?: PaymentProfile[]
  customFields?: ProfileCustomField[]
  createdIn?: Maybe<Date>
}

interface CurrentProfile {
  email: string
  userId?: string
}

```


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

[User] Show me the implementation of buyer-org-supplier/node/typings/buyerOrgService.d.ts from the buyer-org-supplier VTEX app.

[Assistant]
Here's the implementation:

```typescript
type BuyerOrgAddress = {
  id: string
  country: string
  zipCode: string
  state: string
  city: string
  neighborhood: string
  street: string
  streetNumber: string
  complement?: string
  roomFloorUnit?: string
  createdAt: Date
  updatedAt: Date
}

type BuyerOrgCompany = {
  id: string
  corporateDocument: string
  companyName: string
  tradeName: string
  stateRegistration?: string
}

export type BuyerOrgRaw = {
  id: string
  tenantName: string
  createdAt: Date
  updatedAt: Date
  organizationEmail: string
  address: BuyerOrgAddress
  company: BuyerOrgCompany
}

```


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

[User] Show me the implementation of buyer-org-supplier/node/utils/getRequestConfig.ts from the buyer-org-supplier VTEX app.

[Assistant]
Here's the implementation:

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

type Args = {
  context: IOContext
  authMethod: AuthMethod
  metric: string
  tracingConfig?: RequestTracingConfig
}

export type AuthMethod = 'AUTH_TOKEN' | 'STORE_TOKEN' | 'ADMIN_TOKEN'

export const createTracing = (
  metric: string,
  tracingConfig?: RequestTracingConfig
) => ({
  requestSpanNameSuffix: metric,
  ...tracingConfig?.tracing,
})

export const getAuthToken = (ctx: IOContext, method: AuthMethod) => {
  switch (method) {
    case 'STORE_TOKEN':
      return ctx.storeUserAuthToken

    case 'ADMIN_TOKEN':
      return ctx.adminUserAuthToken

    case 'AUTH_TOKEN':
      return ctx.authToken

    default:
      return null
  }
}

export const getRequestConfig = ({
  context,
  authMethod,
  metric,
  tracingConfig,
}: Args) => {
  const token = getAuthToken(context, authMethod)
  const headers: Headers = token
    ? {
        VtexIdclientAutCookie: token,
      }
    : {}

  return {
    headers,
    metric,
    tracing: createTracing(metric, tracingConfig),
  }
}

export interface Headers {
  [key: string]: string
}

```


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

[User] Show me the implementation of buyer-org-supplier/node/utils/statusCodeUtils.ts from the buyer-org-supplier VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { AxiosError } from 'axios'
import { AuthenticationError, ForbiddenError, UserInputError } from '@vtex/api'

export function isNotSuccessCode(statusCode: number) {
  return statusCode < 200 || statusCode > 299
}

export const statusToError = (e: AxiosError) => {
  console.log(e.response?.data)
  if (!e.response) throw e

  const { response } = e as AxiosError

  if (!response?.status) throw e

  const { status } = response

  if (status === 401) throw new AuthenticationError(e)

  if (status === 403) throw new ForbiddenError(e)

  if (status === 400) throw new UserInputError(e)

  throw e
}

```


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

[User] Show me the implementation of buyer-org-supplier/node/utils/wrapTryCatch.ts from the buyer-org-supplier VTEX app.

[Assistant]
Here's the implementation:

```typescript
export default async function wrapTryCatch<T>(promise: Promise<T>) {
  try {
    const response = await promise

    console.log('try', { response })

    return {
      response,
      error: null,
    }
  } catch (error) {
    console.log({ error })

    return {
      response: null,
      error: 'ERROR',
    }
  }
}

```


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

[User] Show me the implementation of buyer-org-supplier/node/routes/createBuyerOrg.ts from the buyer-org-supplier VTEX app.

[Assistant]
Here's the implementation:

```typescript
import parse from 'co-body'

import type { BuyerOrgRaw } from '../typings/buyerOrgService'
import type { Profile } from '../typings/profileSystem'
import { CLSchema } from "../clients/clClient";
import { ProfileCreationResponse } from "../clients/profileSystem";

export async function createBuyerOrg(ctx: Context, next: () => Promise<void>) {
  const { clients, req } = ctx
  const body: BuyerOrgRaw = await parse.json(req)
  try {
    const { zipCode, streetNumber } = body.address
    const { companyName, tradeName, corporateDocument } = body.company

    const address = {
      ...body.address,
      postalCode: zipCode,
      number: streetNumber,
    }

    const profile = {
      userId: body.organizationEmail,
      email: body.organizationEmail,
      firstName: tradeName,
      approved: false,
      isCorporate: true,
      corporateName: companyName,
      tradeName,
      corporateDocument,
    }

    const currentProfile = await clients.profileSystem.getProfileInfo({
      email: body.organizationEmail,
      userId: body.organizationEmail,
    })

    if ((currentProfile as Profile).createdIn) {
      ctx.status = 401
      ctx.body = {
        message: 'Buyer Organization already exists',
      }

      return next()
    }

    const addresses = { Default: address }

    const profileData = await clients.profileSystem.createProfile(profile)
    const clData = await clients.clClient.getClientData((profileData as ProfileCreationResponse).profileId)

    await clients.profileSystem.updateAddress(profile, addresses)

    ctx.status = 200
    ctx.body = {
      message: 'Buyer Organization created',
      id: (clData as CLSchema[])[0].id
    }

    return next()
  } catch (error) {
    console.log('an error occurred when creating the BO in the profile')
    console.log('error:', error.message)
    console.log('body:', body)
    ctx.status = 500
    ctx.body = {
      message: error,
    }

    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 rebuy/messages/hu.json from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/rebuy.add-to-cart": "Hozzáadása a kosárhoz",
  "store/rebuy.last-order": "Itt az utolsó megrendelés",
  "store/rebuy.total": "Összesen"
}

```


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

[User] Show me the implementation of rebuy/messages/ja.json from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/rebuy.add-to-cart": "カートに追加",
  "store/rebuy.last-order": "これは前回の注文です",
  "store/rebuy.total": "合計"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/rebuy.add-to-cart": "Adicionar ao carrinho",
  "store/rebuy.last-order": "Aqui está seu último pedido",
  "store/rebuy.total": "Total"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/rebuy.add-to-cart": "Add to cart",
  "store/rebuy.last-order": "Here is your last order",
  "store/rebuy.total": "Total"
}

```


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

[User] Show me the implementation of rebuy/messages/ro.json from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/rebuy.add-to-cart": "Adaugă în coș",
  "store/rebuy.last-order": "Iată ultima ta comandă",
  "store/rebuy.total": "Total"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/rebuy.add-to-cart": "Add to cart button label",
  "store/rebuy.last-order": "Last order title string",
  "store/rebuy.total": "Total value string"
}

```


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

[User] Show me the implementation of rebuy/messages/ko.json from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/rebuy.add-to-cart": "장바구니에 담기",
  "store/rebuy.last-order": "마지막 주문입니다",
  "store/rebuy.total": "총액"
}

```


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

[User] Show me the implementation of rebuy/messages/da.json from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/rebuy.add-to-cart": "Føj til kurv",
  "store/rebuy.last-order": "Her er din seneste ordre",
  "store/rebuy.total": "I alt"
}

```


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

[User] Show me the implementation of rebuy/messages/sv.json from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/rebuy.add-to-cart": "Lägg till i kundvagnen",
  "store/rebuy.last-order": "Här är din sista beställning",
  "store/rebuy.total": "Totalt"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/rebuy.add-to-cart": "Añadir al carrito",
  "store/rebuy.last-order": "Aquí está tu último pedido",
  "store/rebuy.total": "Total"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store/rebuy.add-to-cart": "إضافة إلى العربة",
  "store/rebuy.last-order": "هنا طلبك الأخير",
  "store/rebuy.total": "المجموع"
}

```


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

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

[Assistant]
Here's the implementation:

```markdown
# rebuy
VTEX Rebuy app

This app shows the last order for the identified user, with a button to buy the same products again.

## Usage

For this to work, you need to create the `lastOrders` schema on the `orders` dataentity. [Docs](http://help.vtex.com/en/tutorial/master-data-v2)

```json
{
  "properties": {
    "clientProfileData": {
      "type": "object",
      "properties": {
        "email": {
          "type": "string",
          "format": "email"
        }
      }
    }
  },
  "v-default-fields": ["items", "value"],
  "v-security": {
    "allowGetAll": false,
    "publicRead": ["items", "value"],
    "publicFilter": ["clientProfileData"]
  },
  "v-indexed": ["clientProfileData"]
}
```

```


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

[User] Show me the implementation of rebuy/react/index.js from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { compose, path } from 'ramda'
import { graphql } from 'react-apollo'
import { session } from 'vtex.store-resources/Queries'

import userLastOrder from './queries/userLastOrder.gql'
import Content from './components/Content'
import { userLastOrderType } from './components/propTypes'

class Rebuy extends Component {
  container = React.createRef()

  static propTypes = {
    lastOrderQuery: PropTypes.shape({
      loading: PropTypes.bool,
      userLastOrder: userLastOrderType,
    }),
    sessionQuery: PropTypes.shape({
      loading: PropTypes.bool,
      getSession: PropTypes.shape({
        profile: PropTypes.object,
      }),
    }),
  }
  state = {
    isVisible: false,
  }

  componentDidUpdate(prevProps) {
    const getProfile = (props) => path(['sessionQuery', 'getSession', 'profile'], props)
    const oldProfile = getProfile(prevProps)
    const currentProfile = getProfile(this.props)

    // Checking if user just logged in
    if (oldProfile == null && currentProfile != null) {
      this.props.lastOrderQuery.refetch()
    }
  }

  triggerOpenTransition = () => {
    setTimeout(() => {
      this.setState({
        isVisible: true,
      })

      const containerElement = this.container.current

      if (!containerElement) {
        return
      }

      const transitionDuration = 800
      // get the actual container height
      containerElement.style.height = 'auto'
      const containerHeight = containerElement.clientHeight

      // sets the height back to zero, and triggers a layout,
      // by trying to get getBoundingClientRect
      containerElement.style.height = 0
      containerElement.getBoundingClientRect()

      // sets the transition and set the height to the target value
      containerElement.style.transition = `height ${transitionDuration}ms ease-in-out`
      containerElement.style.height = `${containerHeight}px`

      // after the transition, sets the height to auto, in case the
      // content or height change
      setTimeout(() => {
        containerElement.style.height = 'auto'
      }, transitionDuration + 100)
    }, 500)
  }

  render() {
    const { isVisible } = this.state

    const lastOrder = path(['lastOrderQuery', 'userLastOrder'], this.props)

    if (!lastOrder) {
      return null
    }

    if (!isVisible) {
      this.triggerOpenTransition()
    }
    return <Content lastOrder={lastOrder} />
  }
}

export default compose (
  graphql(session, { name: 'sessionQuery'}),
  graphql(userLastOrder, { name: 'lastOrderQuery'}),
)(Rebuy)

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "rebuy",
  "vendor": "vtex",
  "version": "1.7.0",
  "title": "Rebuy",
  "description": "VTEX Rebuy app",
  "mustUpdateAt": "2019-10-26",
  "dependencies": {
    "apollo-client": "^2.4.7",
    "graphql": "^14.0.2",
    "ramda": "^0.26.1",
    "react": "^16.5.2",
    "react-apollo": "^2.3.2",
    "react-device-detect": "^1.6.2",
    "react-intl": "^2.8.0",
    "recompose": "^0.30.0"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "babel-jest": "^24.0.0",
    "babel-preset-react-app": "^7.0.0",
    "babel": "^6.23.0",
    "babel-core": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-env": "^1.7.0",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.1",
    "enzyme-react-intl": "^2.0.0",
    "identity-obj-proxy": "^3.0.0",
    "intl": "^1.2.5",
    "jest": "^24.0.0",
    "jsdom": "^11.10.0",
    "react-dom": "^16.3.1"
  },
  "jest": {
    "verbose": true,
    "transform": {
      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest"
    },
    "setupFiles": [
      "./setupTests.js"
    ],
    "transformIgnorePatterns": [
      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__test__/fileMock.js",
      "\\.(css|less|scss)$": "identity-obj-proxy"
    }
  }
}

```


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

[User] Show me the implementation of rebuy/react/rebuy.css from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```css
.item {}
.items {}
.itemColumn {}
.itemDetails {}
.itemName {}
.itemPrice {}
.itemImage {}

.totalContainer {}
.totalTitle {}
.totalPrice {}

```


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

[User] Show me the implementation of rebuy/react/setupTests.js from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```javascript
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'

/* eslint-disable */
window.matchMedia = window.matchMedia || function () {
  return {
    matches: false,
    addListener: function () { },
    removeListener: function () { },
  }
}

Enzyme.configure({ adapter: new Adapter() })
```


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

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

[Assistant]
Here's the implementation:

```json
{
  "rebuy": {
    "required": [
      "greeting"
    ],
    "component": "index"
  },
  "greeting": {
    "component": "vtex.store-components/Greeting"
  }
}
```


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

[User] Show me the implementation of rebuy/react/queries/userLastOrder.gql from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```graphql
query userLastOrder {
  userLastOrder {
    orderId
    value
    orderGroup
    items {
      uniqueId
      id
      name
      sellingPrice
      imageUrl
      detailUrl
      quantity
      parentItemIndex
      parentAssemblyBinding
      seller
      additionalInfo {
        brandName
      }
    }
    totals {
      id
      name
      value
    }
  }
}

```


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

[User] Show me the implementation of rebuy/react/utils/attachments.js from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```javascript
import { all, compose, filter, isNil, map, partition, pick, propEq, propOr, props, values } from 'ramda'

export const isParentItem = item => all(isNil, props(['parentItemIndex', 'parentAssemblyBinding'], item))

export const separateParentChildren = (items) => partition(isParentItem, items)

const parseOrderItemToButton = ({ id, sellingPrice, additionalInfo={}, ...rest }) =>
  ({ ...rest, skuId: id, price: sellingPrice / 100, brand: additionalInfo.brandName })

export const buildItemsWithOptions = (lastItems) => {
  const [parentItems, assemblyOptions] = separateParentChildren(lastItems)

  const parentMap = parentItems.reduce((prev, curr) =>
    ({ ...prev, [curr.id]: parseOrderItemToButton(curr) }), {})

  const pickProps = pick(['skuId', 'quantity', 'seller', 'options', 'price', 'name', 'brand'])
  const mapAndPick = compose(map(pickProps), values)

  return mapAndPick(
    assemblyOptions.reduce((prev, currOption) => {
      const { parentItemIndex, parentAssemblyBinding } = currOption
      const parentId = lastItems[parentItemIndex].id
      const parentObj = prev[parentId]
      const option = {
        assemblyId: parentAssemblyBinding,
        ...pick(['id', 'quantity', 'seller'], currOption),
      }
      const options = [...propOr([], 'options', parentObj), option]
      parentObj.options = options
      return {
        ...prev,
        [parentId]: parentObj,
      }
    }, parentMap)
  )
}

const isSonOfIndex = (index) => propEq('parentItemIndex', index)

export const sumTotalPricePerUnit = (assemblyOptions, parentIndex, parentItem) => {
  const children = filter(isSonOfIndex(parentIndex), assemblyOptions)
  return children.reduce(
    (total, item) => total + item.sellingPrice * item.quantity / parentItem.quantity,
    parentItem.sellingPrice
    )
}

```


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

[User] Show me the implementation of rebuy/react/components/OrderTotal.js from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { memo } from 'react'
import { number } from 'prop-types'
import { FormattedMessage } from 'react-intl'
import ProductPrice from 'vtex.store-components/ProductPrice'

import rebuy from '../rebuy.css'

const OrderTotal = ({ value = 0 }) => (
  <div className={`${rebuy.totalContainer} flex justify-end items-end mt6-s`}>
    <span className={`${rebuy.totalTitle} t-heading-5 c-on-base`}>
      <FormattedMessage id="store/rebuy.total" />
    </span>
    <span className={`${rebuy.totalPrice} ml4`}>
      <ProductPrice sellingPriceClass="c-on-base t-heading-5" sellingPrice={value / 100} showListPrice={false} showLabels={false} />
    </span>
  </div>
)

OrderTotal.propTypes = {
  value: number.isRequired,
}

export default memo(OrderTotal)

```


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

[User] Show me the implementation of rebuy/react/components/ItemImage.js from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { memo } from 'react'
import { string, number } from 'prop-types'
import { head } from 'ramda'

import rebuy from '../rebuy.css'

const httpRegex = new RegExp(/http:\/\//)

export function toHttps(url) {
  return url.replace(httpRegex, 'https://')
}

const correctImageUrl = (imageUrl, size) => {
  const urlSplitted = imageUrl.split('/')
  const idsStringIdx = urlSplitted.findIndex(content => content === 'ids')
  if (idsStringIdx < 0 || idsStringIdx === urlSplitted.length - 1) return imageUrl
  const sizeStringIdx = idsStringIdx + 1
  const sizeString = urlSplitted[sizeStringIdx]
  const imageId = head(sizeString.split('-'))
  const newSizeString = `${imageId}-${size * 2}-auto`
  return [...urlSplitted.slice(0, sizeStringIdx), newSizeString, ...urlSplitted.slice(sizeStringIdx+1)].join('/')
}

const ItemImage = ({ imageUrl, size }) => (
  <img
    width={size}
    height={size}
    className={`${rebuy.itemImage}`}
    src={correctImageUrl(toHttps(imageUrl), size)}
  />
)

ItemImage.propTypes = {
  imageUrl: string.isRequired,
  size: number.isRequired,
}

export default memo(ItemImage)
```


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

[User] Show me the implementation of rebuy/react/components/OrderItems.js from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import { arrayOf } from 'prop-types'

import { orderItemType } from './propTypes'
import OrderItem from './OrderItem'

import { isParentItem, separateParentChildren } from '../utils/attachments'

import rebuy from '../rebuy.css'

const OrderItems = ({ items = [] }) => {
  const [_, assemblyOptions] = separateParentChildren(items)
  return (
    <ul className={`${rebuy.items} list ma0 pa0`}>
      {items.map((item, index) => isParentItem(item) ? (
        <OrderItem {...{ item, assemblyOptions, index}} key={item.uniqueId} />
      ) : null)}
    </ul>
  )
}

OrderItems.propTypes = {
  items: arrayOf(orderItemType),
}

export default OrderItems

```


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

[User] Show me the implementation of rebuy/react/components/OrderItem.js from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import { arrayOf, number } from 'prop-types'
import { Link } from 'vtex.render-runtime'
import ProductPrice from 'vtex.store-components/ProductPrice'

import { orderItemType } from './propTypes'
import ItemImage from './ItemImage'

import { sumTotalPricePerUnit } from '../utils/attachments'

import rebuy from '../rebuy.css'

const OrderItem = ({ item, index, assemblyOptions }) => (
  <li className={`${rebuy.item} flex justify-between pt3 bb b--muted-4`}>
    <div className={`${rebuy.itemColumn} flex-shrink-0 mr5`}>
      <Link className="link c-muted-1" to={item.detailUrl}>
        <ItemImage size={64} imageUrl={item.imageUrl} />
      </Link>
    </div>
    <div className={`${rebuy.itemColumn} flex-auto`}>
      <div className={`${rebuy.itemDetails} flex justify-center justify-between-ns items-center-ns flex-column flex-row-ns h-100 mb2-s`}>
        <Link className="link t-body t-heading-5-ns c-on-base" to={item.detailUrl}>
          <span className={`${rebuy.itemName}`}>{`${item.quantity}x ${item.name}`}</span>
        </Link>
        <span className={`${rebuy.itemPrice}`}>
          <ProductPrice
            sellingPriceClass="c-on-base t-body t-heading-5-ns b-s"
            sellingPrice={sumTotalPricePerUnit(assemblyOptions, index, item) / 100}
            showListPrice={false}
            showLabels={false}
          />
        </span>
      </div>
    </div>
  </li>
)

OrderItem.propTypes = {
  item: orderItemType.isRequired,
  index: number.isRequired,
  assemblyOptions: arrayOf(orderItemType).isRequired,
}

export default OrderItem
```


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

[User] Show me the implementation of rebuy/react/components/propTypes.js from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'

export const orderItemType = PropTypes.shape({
  uniqueId: PropTypes.string,
  id: PropTypes.string,
  name: PropTypes.string,
  sellingPrice: PropTypes.number,
  imageUrl: PropTypes.string,
  detailUrl: PropTypes.string,
  quantity: PropTypes.number,
  parentItemIndex: PropTypes.number,
  parentAssemblyBinding: PropTypes.string,
  seller: PropTypes.string,
  additionalInfo: PropTypes.shape({ brandName: PropTypes.string }),
})

export const userLastOrderType = PropTypes.shape({
  orderId: PropTypes.string,
  value: PropTypes.number,
  orderGroup: PropTypes.string,
  items: PropTypes.arrayOf(orderItemType),
  totals: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.string,
    name: PropTypes.string,
    value: PropTypes.number,
  }))
})

```


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

[User] Show me the implementation of rebuy/react/components/Content.js from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Fragment, useCallback, useState} from 'react'
import { isMobileOnly } from 'react-device-detect'
import { prop, find, propEq } from 'ramda'
import { ExtensionPoint } from 'vtex.render-runtime'
import { FormattedMessage } from 'react-intl'
import { Button } from 'vtex.styleguide'
import OrderItems from './OrderItems'
import OrderTotal from './OrderTotal'
import { userLastOrderType } from './propTypes'

const Wrapper = ({children}) => (
  <div className="mv4 mh4 mh6-ns bg-base border-box br1 bw1 ba b--muted-4">
    {children}
  </div>
)

const LastOrderLabel = () => (
  <div className="t-body c-on-base ml4-ns">
    <FormattedMessage id="store/rebuy.last-order" />
  </div>
)

const AddButton = ({ onClick, isLoading }) => (
  <div className="pt5 pt7-ns mh5">
    <Button block onClick={onClick} isLoading={isLoading}>
      <FormattedMessage id="store/rebuy.add-to-cart" />
    </Button>
  </div>
)

const findItemTotal = (lastOrder) => prop('value', find(propEq('id', 'Items'), lastOrder.totals))

const MobileContent = ({ lastOrder, onClick, isLoading }) => (
  <Fragment>
    <ExtensionPoint id="greeting" />
    <Wrapper>
      <div className="w-100 pa4 flex flex-column">
        <LastOrderLabel />
        <OrderItems items={lastOrder.items} />
        <OrderTotal value={findItemTotal(lastOrder)} />
      </div>
    </Wrapper>
    <AddButton onClick={onClick} isLoading={isLoading} />
  </Fragment>
)

const Content = ({ lastOrder }) => {
  const [isLoading, setLoading] = useState(false);

  const goToCart = useCallback(() => {
    setLoading(true)
    location.assign(`/checkout/orderform/createby/${lastOrder.orderGroup}`)
  }, [lastOrder.orderGroup])

  if (isMobileOnly) {
    return <MobileContent lastOrder={lastOrder} onClick={goToCart} isLoading={isLoading} />
  }
  return (
    <Wrapper>
      <div className="w-100 pv6 ph4 flex">
        <div className="w-third">
          <ExtensionPoint id="greeting" />
          <LastOrderLabel />
          <AddButton onClick={goToCart} isLoading={isLoading} />
        </div>
        <div className="mh6 ba b--muted-4" style={{ width: '1px' }} />
        <div className="w-two-thirds flex flex-column justify-between">
          <OrderItems items={lastOrder.items} />
          <OrderTotal value={findItemTotal(lastOrder)} />
        </div>
      </div>
    </Wrapper>
  )
}

Content.propTypes = {
  lastOrder: userLastOrderType,
}

export default Content

```


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

[User] Show me the implementation of rebuy/react/utils/__mock__/lastOrderMock.json from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "orderId":"111aaa",
  "value":1750,
  "items":[
     {
        "uniqueId":"0",
        "id":"0",
        "name":"Pepperoni small",
        "sellingPrice":1400,
        "imageUrl":"http://delivery.vteximg.com.br/arquivos/ids/155439-55-55/pepperoni-feast.0e1c4c9e7b8900d08cc51ff285fd9ae3.1.jpg?v=636770441237070000",
        "detailUrl":"/pizza-pepperoni/p",
        "quantity":1,
        "parentItemIndex":null,
        "parentAssemblyBinding":null,
        "seller":"1",
        "additionalInfo":{
           "brandName":"Pizza"
        }
     },
     {
        "uniqueId":"1",
        "id":"1",
        "name":"Pepperoni",
        "sellingPrice":0,
        "imageUrl":"http://delivery.vteximg.com.br/arquivos/ids/155439-55-55/pepperoni-feast.0e1c4c9e7b8900d08cc51ff285fd9ae3.1.jpg?v=636770441237070000",
        "detailUrl":"/pizza-pepperoni/p",
        "quantity":1,
        "parentItemIndex":0,
        "parentAssemblyBinding":"Pepperoni - Small_Basic Toppings",
        "seller":"1",
        "additionalInfo":{
           "brandName":"Pizza"
        }
     },
     {
        "uniqueId":"2",
        "id":"2",
        "name":"Onion",
        "sellingPrice":0,
        "imageUrl":"http://delivery.vteximg.com.br/arquivos/ids/155439-55-55/pepperoni-feast.0e1c4c9e7b8900d08cc51ff285fd9ae3.1.jpg?v=636770441237070000",
        "detailUrl":"/pizza-pepperoni/p",
        "quantity":1,
        "parentItemIndex":0,
        "parentAssemblyBinding":"Pepperoni - Small_Basic Toppings",
        "seller":"1",
        "additionalInfo":{
           "brandName":"Pizza"
        }
     },
     {
        "uniqueId":"2",
        "id":"2",
        "name":"Classic Crust",
        "sellingPrice":0,
        "imageUrl":"http://delivery.vteximg.com.br/arquivos/ids/155439-55-55/pepperoni-feast.0e1c4c9e7b8900d08cc51ff285fd9ae3.1.jpg?v=636770441237070000",
        "detailUrl":"/pizza-pepperoni/p",
        "quantity":1,
        "parentItemIndex":0,
        "parentAssemblyBinding":"Pepperoni - Small_Crust",
        "seller":"1",
        "additionalInfo":{
           "brandName":"Pizza"
        }
     },
     {
        "uniqueId":"3",
        "id":"1",
        "name":"Pepperoni",
        "sellingPrice":100,
        "imageUrl":"http://delivery.vteximg.com.br/arquivos/ids/155439-55-55/pepperoni-feast.0e1c4c9e7b8900d08cc51ff285fd9ae3.1.jpg?v=636770441237070000",
        "detailUrl":"/pizza-pepperoni/p",
        "quantity":2,
        "parentItemIndex":0,
        "parentAssemblyBinding":"Pepperoni - Small_Toppings",
        "seller":"1",
        "additionalInfo":{
           "brandName":"Pizza"
        }
     }
  ],
  "totals":[
     {
        "id":"Items",
        "name":"Items",
        "value":1600
     },
     {
        "id":"Shipping",
        "name":"Shipping",
        "value":150
     }
  ]
}
```


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

[User] Show me the implementation of rebuy/react/utils/__mock__/productOrderSnapshot.json from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```json
[
  {
     "skuId":"0",
     "quantity":1,
     "seller":"1",
     "options":[
        {
           "assemblyId":"Pepperoni - Small_Basic Toppings",
           "id":"1",
           "quantity":1,
           "seller":"1"
        },
        {
           "assemblyId":"Pepperoni - Small_Basic Toppings",
           "id":"2",
           "quantity":1,
           "seller":"1"
        },
        {
           "assemblyId":"Pepperoni - Small_Crust",
           "id":"2",
           "quantity":1,
           "seller":"1"
        },
        {
           "assemblyId":"Pepperoni - Small_Toppings",
           "id":"1",
           "quantity":2,
           "seller":"1"
        }
     ],
     "price":14,
     "name":"Pepperoni small",
     "brand":"Pizza"
  }
]
```


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

[User] Show me the implementation of rebuy/react/utils/__tests__/attachments.test.js from the rebuy VTEX app.

[Assistant]
Here's the implementation:

```javascript
/* eslint-env jest */
import { equals } from 'ramda'

import { buildItemsWithOptions, separateParentChildren, sumTotalPricePerUnit } from '../attachments'
import lastOrderMock from '../__mock__/lastOrderMock.json'
import productOrderSnapshot from '../__mock__/productOrderSnapshot.json'

it('build buy button products with assembly options properly', () => {
  const productItems = buildItemsWithOptions(lastOrderMock.items)
  expect(productItems.length).toBe(1)
  expect(productItems[0].options.length).toBe(4)
  expect(equals(productItems, productOrderSnapshot)).toBe(true)
})

it('should sum price of parent with its children', () => {
  const [_, assemblyoptions] = separateParentChildren(lastOrderMock.items)
  const pepperoniWholePrice = sumTotalPricePerUnit(assemblyoptions, 0, lastOrderMock.items[0])
  expect(pepperoniWholePrice).toBe(1600)
})
```


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

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

[Assistant]
Here's the implementation:

```markdown
# Shareasale

VTEX Shareasale first-party app

## How to install

Open the VTEX App Store and install this app on your store.

Now, open the app settings on your admin and fill in your Shareasale's Merchant ID and Transaction Type.

```


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

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

[Assistant]
Here's the implementation:

```tsx
import { canUseDOM } from 'vtex.render-runtime'
import { Order, PixelMessage } from './typings/events'

function addPixelImage(order: Order) {
  const merchantId = window.__shareasale_merchant_id
  const transtype = window.__shareasale_transtype

  if (!merchantId || !transtype) {
    return
  }

  const total = order.transactionSubtotal
  const orderId = order.transactionId

  const img = document.createElement('img')
  const url = `https://shareasale.com/sale.cfm?amount=${total}&tracking=${orderId}&transtype=${transtype}&merchantID=${merchantId}`

  img.setAttribute('width', '1')
  img.setAttribute('height', '1')
  img.setAttribute('src', url)

  document.body.appendChild(img)
}

function handleMessages(e: PixelMessage) {
  switch (e.data.eventName) {
    case 'vtex:orderPlaced': {
      const order = e.data
      addPixelImage(order)
      break
    }
    default:
      break
  }
}

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

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "lint": "tsc --noEmit --pretty && tslint -c tslint.json './**/*.ts'"
  },
  "devDependencies": {
    "@types/node": "^10.12.18",
    "@types/prop-types": "^15.5.6",
    "@types/ramda": "types/npm-ramda#dist",
    "@types/react": "^16.4.14",
    "tslint": "^5.11.0",
    "tslint-config-vtex": "^2.0.0",
    "tslint-eslint-rules": "^5.4.0",
    "typescript": "^3.1.1"
  },
  "version": "1.0.3"
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "pixel.shareasale": {
    "component": "index"
  }
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
export interface PixelMessage extends MessageEvent {
  data: OrderPlacedData
}

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

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

export interface Order {
  currency: string
  accountName: string
  orderGroup: string
  salesChannel: string
  coupon: string
  visitorType: string
  visitorContactInfo: string[]
  visitorAddressState: string
  visitorAddressCountry: string
  visitorAddressPostalCode: string
  transactionId: string
  transactionDate: string
  transactionAffiliation: string
  transactionTotal: number
  transactionShipping: number
  transactionSubtotal: number
  transactionDiscounts: number
  transactionTax: number
  transactionCurrency: string
  transactionPaymentType: PaymentType[]
  transactionShippingMethod: ShippingMethod[]
  transactionProducts: ProductOrder[]
  transactionPayment: {
    id: string
  }
}

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

interface ShippingMethod {
  itemId: string
  selectedSla: string
}

interface ProductOrder {
  id: string
  name: string
  sku: string
  skuRefId: string
  skuName: string
  brand: string
  brandId: string
  seller: string
  sellerId: string
  category: string
  categoryId: string
  categoryTree: string[]
  categoryIdTree: string[]
  priceTags: PriceTag[]
  originalPrice: number
  price: number
  sellingPrice: number
  tax: number
  quantity: number
  components: any[]
  measurementUnit: string
  unitMultiplier: number
}

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

```


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

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

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.render-runtime' {
  export const canUseDOM: boolean
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
interface Window extends Window {
  __shareasale_merchant_id: string
  __shareasale_transtype: string
}

```


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

[User] Show me the implementation of iodas-bookstore-theme/sitemap/sitemap.json from the iodas-bookstore-theme 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 iodas-bookstore-theme/store/blocks.jsonc from the iodas-bookstore-theme 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-name",
    "product-summary-price",
    "product-summary-buy-button",
    "product-summary-image",
    "product-rating-inline"
    ],
    "props": {
        "showListPrice": true,
        "showLabels": true,
        "showInstallments": true,
        "showBadge": true,
        "labelSellingPrice": "POR",
        "labelListPrice": "DE",
        "showSavings": true
    }
},

  "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 iodas-bookstore-theme/store/routes.json from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "store.custom#black-friday": {
      "path": "/blackfriday"
    }
}

```


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

[User] Show me the implementation of iodas-bookstore-theme/styles/css/vtex.rich-text.css from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.container--deals {
  color: #ffffff;
}

.italic--deals {
  text-align: right;
  justify-content: right  ;
}

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

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

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

.container--bf-lp-text {
  color: #fff;
}

.container--question .paragraph {
  text-align: center;
  max-width: 540px;
  margin: 0 16px;
  padding-top: 120px;
  color: #03034E;
}

.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 iodas-bookstore-theme/styles/css/vtex.product-summary.css from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.image {
  position: relative;
  margin-top: -180px;
}
.container {
  border: 1px solid #eee;
}

.container img {
  background: #eee;
}

.container:hover img {
  opacity: 0.05;
  z-index: -1;
  transition: transform .5s ease;
  transform: scale(1.40);
}

.buyButton {
  width: 40%;
}

.container:hover .priceContainer span {
  transform: scale(1.5);
  font-weight: bolder;
}

.container:hover .nameContainer span {
  font-weight: bolder;
}

```


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

[User] Show me the implementation of iodas-bookstore-theme/styles/css/vtex.store-header.css from the iodas-bookstore-theme 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;
}

```


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

[User] Show me the implementation of iodas-bookstore-theme/styles/css/vtex.store-components.css from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.notificationBarContainer {
  background-color: #F71963;
  color: #FFFFFF;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
}

.searchBarContainer {
  max-width: 265px;
}

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

.newsletter {
  background: url("https://uploaddeimagens.com.br/images/002/472/280/original/background_newsletter_final.jpg?1572620965") no-repeat;
  background-size: 100%;
  max-width: 100%;
  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;
}

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

  .label {
    font-size: 40px;
  }

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

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

  .imageElement--storePrint {
    margin-bottom: 0px;
    max-height: 600px;
  }
}

.imageElement--home-special-card:hover {
  transition: transform .5s ease;
  transform: scale(1.10);
}

.productDescriptionTitle {
  display: none;
}

.productDescriptionContainer {
  margin: 35px 0;
  text-transform: uppercase;
}

.productDescriptionContainer .h-auto {
  color: #000 !important;
}

.productNameContainer span {
  font-weight: bold;
  text-transform: uppercase;
  font-size: xx-large;
}

```


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

[User] Show me the implementation of iodas-bookstore-theme/styles/css/vtex.store-footer.css from the iodas-bookstore-theme 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;
}

.row {
  background: #6f99ad;
}

```


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

[User] Show me the implementation of iodas-bookstore-theme/styles/css/vtex.flex-layout.css from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

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

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

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

.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%;
}

.flexRow--bf-lp-banner {
  background: url(https://www.iwantwallpaper.co.uk/images/arthouse-vip-black-brick-wall-pattern-faux-stone-effect-motif-mural-wallpaper-623007-p2130-4065_image.jpg);
  background-size: "150px";
}

.flexRow--product-main {
  background-color: #ffb30f;
}

```


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

[User] Show me the implementation of iodas-bookstore-theme/styles/css/vtex.carousel.css from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

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

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

.containerImg div {
  position: relative;
}

```


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

[User] Show me the implementation of iodas-bookstore-theme/styles/css/vtex.slider-layout.css from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

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

```


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

[User] Show me the implementation of iodas-bookstore-theme/styles/css/vtex.stack-layout.css from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.stackContainer--product-outdoor {
    background-color: #ffb30f;
}

.stackItem--product-outdoor {
    width: 100%;
    top: none;
    bottom: 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 iodas-bookstore-theme/styles/configs/style.json from the iodas-bookstore-theme 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": "#ffffff",
          "base--inverted": "#03044e",
          "action-primary": "#000000",
          "action-secondary": "#eef3f7",
          "emphasis": "#f71963",
          "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": "#666",
          "action-secondary": "#dbe9fd",
          "emphasis": "#dd1659",
          "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": "#dd1659",
          "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": "#0F3E99",
          "action-secondary": "#eef3f7",
          "link": "#0F3E99",
          "emphasis": "#f71963",
          "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": "#072c75",
          "action-secondary": "#dbe9fd",
          "link": "#0c389f",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#e13232",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0"
        },
        "active-text": {
          "link": "#0c389f",
          "emphasis": "#dd1659",
          "success": "#8bc34a",
          "success--faded": "#eafce3",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ffb100",
          "warning--faded": "#fff6e0"
        },
        "border": {
          "action-primary": "#000000",
          "action-secondary": "#eef3f7",
          "emphasis": "#f71963",
          "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": "#000000",
          "action-secondary": "#dbe9fd",
          "emphasis": "#dd1659",
          "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": "#000000",
          "action-secondary": "#dbe9fd",
          "emphasis": "#dd1659",
          "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": "#0F3E99",
          "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": "#0F3E99",
          "emphasis": "#ffffff",
          "success": "#ffffff",
          "success--faded": "#3f3f40",
          "danger": "#ffffff",
          "danger--faded": "#3f3f40",
          "warning": "#ffffff",
          "warning--faded": "#1a1a1a"
        },
        "active-on": {
          "action-primary": "#ffffff",
          "action-secondary": "#0F3E99",
          "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 iodas-bookstore-theme/store/blocks/home/benefits.json from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "slider-layout#benefits": {
    "children": [
      "flex-layout.row#deals1",
      "flex-layout.row#deals2",
      "flex-layout.row#deals3",
      "flex-layout.row#deals4"
    ],
    "props": {
      "blockClass": "deals",
      "infinite": true,
      "showNavigationArrows": "mobileOnly",
      "showPaginationDots": "never",
      "navigationStep": 1,
      "itemsPerPage": {
        "desktop": 4,
        "tablet": 4,
        "phone": 1
      }
    }
  },
  "flex-layout.row#deals1": {
    "children": [
      "image#deal1",
      "rich-text#deal1"
    ]
  },
  "image#deal1": {
    "props": {
      "src": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/iconfinder_rocket_2120156___e884f125797ff490dd981f81480b0fd0.png",
      "maxHeight": "48px"
    }
  },
  "rich-text#deal1": {
    "props": {
      "text": "ENTREGA FOGUETE*<br>*confira o regulamento*",
      "blockClass": "deals"
    }
  },
  "flex-layout.row#deals2": {
    "children": [
      "image#deal2",
      "rich-text#deal2"
    ]
  },
  "image#deal2": {
    "props": {
      "src": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/iconfinder_truck_115775___654edfa0a3266b14f9dc2179b5e178df.png",
      "maxHeight": "48px"
    }
  },
  "rich-text#deal2": {
    "props": {
      "text": "FRETE GRÁTIS*<br>*confira o regulamento*",
      "blockClass": "deals"
    }
  },
  "flex-layout.row#deals3": {
    "children": [
      "image#deal3",
      "rich-text#deal3"
    ]
  },
  "image#deal3": {
    "props": {
      "src": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/iconfinder_business_finance_money-38_2784269___4bfde021b43419e0297c96bc1b6506af.png",
      "maxHeight": "48px"
    }
  },
  "rich-text#deal3": {
    "props": {
      "text": "10X SEM JUROS*<br>*confira o regulamento*",
      "blockClass": "deals"
    }
  },
  "flex-layout.row#deals4": {
    "children": [
      "image#deal4",
      "rich-text#deal4"
    ]
  },
  "image#deal4": {
    "props": {
      "src": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/iconfinder_thefreeforty_shop_1243706___3afb6534ba6abe44624bef0c09b97f2a.png",
      "maxHeight": "48px"
    }
  },
  "rich-text#deal4": {
    "props": {
      "text": "RETIRADA EM LOJA*<br>*confira o regulamento*",
      "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 iodas-bookstore-theme/store/blocks/home/special-cards.json from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.col#special-card-1": {
    "title": "Cards Especiais",
    "children": [
      "image#special-card-1"
    ],
    "props": {
      "horizontalAlign": "center"
    }
  },
  "flex-layout.col#special-card-2": {
    "title": "Cards Especiais",
    "children": [
      "image#special-card-2"
    ],
    "props": {
      "horizontalAlign": "center"
    }
  },
  "flex-layout.col#special-card-3": {
    "title": "Cards Especiais",
    "children": [
      "image#special-card-3"
    ],
    "props": {
      "horizontalAlign": "center"
    }
  },
  "flex-layout.col#special-card-4": {
    "title": "Cards Especiais",
    "children": [
      "image#special-card-4"
    ],
    "props": {
      "horizontalAlign": "center"
    }
  },
  "image#special-card-1": {
    "props": {
      "src": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/ebooks_home___336cc1c2de5044900bca441aad43774f.jpg",
      "blockClass": "home-special-card",
      "maxHeight": "400px"
    }
  },
  "image#special-card-2": {
    "props": {
      "src": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/games_home___e668b875196382345949f12e985ff2ee.png",
      "blockClass": "home-special-card",
      "maxHeight": "400px"
    }
  },
  "image#special-card-3": {
    "props": {
      "src": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/stamplers___e9dfd3b5af47e879320c2fecb46a7af9.png",
      "blockClass": "home-special-card",
      "maxHeight": "400px"
    }
  },
  "image#special-card-4": {
    "props": {
      "src": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/backtoschool_home___79a24a92eb54aa6c05d66c17e905f452.png",
      "blockClass": "home-special-card",
      "maxHeight": "400px"
    }
  }
}

```


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

[User] Show me the implementation of iodas-bookstore-theme/store/blocks/home/brands-carousel.json from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "slider-layout#brands-carousel": {
    "title": "Carrossel de marcas",
    "children": [
      "image#brand-1",
      "image#brand-2",
      "image#brand-3",
      "image#brand-4",
      "image#brand-5",
      "image#brand-6"
    ],
    "props": {
      "blockClass": "brand-carousel",
      "infinite": true,
      "showNavigationArrows": "never",
      "showPaginationDots": "never",
      "navigationStep": 1,
      "itemsPerPage": {
        "desktop": 6,
        "tablet": 4,
        "phone": 2
      }
    }
  },
  "image#brand-1": {
    "props": {
      "src": "https://uploaddeimagens.com.br/images/002/472/220/original/marca_1.png?1572620027",
      "maxHeight": "96px"
    }
  },
  "image#brand-2": {
    "props": {
      "src": "https://uploaddeimagens.com.br/images/002/472/226/original/marca_2.png?1572620063",
      "maxHeight": "96px"
    }
  },
  "image#brand-3": {
    "props": {
      "src": "https://uploaddeimagens.com.br/images/002/472/230/original/marca_3.png?1572620105",
      "maxHeight": "96px"
    }
  },
  "image#brand-4": {
    "props": {
      "src": "https://uploaddeimagens.com.br/images/002/472/233/original/marca_4.png?1572620153",
      "maxHeight": "96px"
    }
  },
  "image#brand-5": {
    "props": {
      "src": "https://uploaddeimagens.com.br/images/002/472/235/original/marca_5.png?1572620181",
      "maxHeight": "96px"
    }
  },
  "image#brand-6": {
    "props": {
      "src": "https://uploaddeimagens.com.br/images/002/472/239/original/marca_6.png?1572620215",
      "maxHeight": "96px"
    }
  }
}

```


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

[User] Show me the implementation of iodas-bookstore-theme/store/blocks/home/home.jsonc from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.home": {
    "blocks": [
      "carousel#home",
      "slider-layout#benefits",
      "shelf#lancamentos",
      "flex-layout.row#special-cards",
      "flex-layout.row#brands-carousel",
      "image#special-campaign",
      "shelf#mais-vendidos",
      "newsletter"
    ]
  },
  "newsletter": {
    "props": {
        "label": "Receba nossas notícias :D",
        "placeholder": "Seu email",
        "submit": "ENVIAR"
    }
  },

  "flex-layout.row#special-cards": {
    "children": [
      "flex-layout.col#special-card-1",
      "flex-layout.col#special-card-2",
      "flex-layout.col#special-card-3",
      "flex-layout.col#special-card-4"
    ],
    "props": {
      "horizontalAlign": "center",
      "marginTop": "3",
      "marginBottom": "3"
    }
  },

  "flex-layout.row#brands-carousel": {
    "children": [
      "slider-layout#brands-carousel"
    ],
    "props": {
      "horizontalAlign": "center",
      "marginTop": "3",
      "marginBottom": "3"
    }
  },

  "carousel#home": {
    "props": {
      "autoplay": false,
      "banners": [
        {
          "image": "https://storecomponents.vteximg.com.br/arquivos/banner-principal.png",
          "mobileImage": "https://storecomponents.vteximg.com.br/arquivos/banner-principal-mobile.jpg"
        },
        {
          "image": "https://storecomponents.vteximg.com.br/arquivos/banner.jpg",
          "mobileImage": "https://storecomponents.vteximg.com.br/arquivos/banner-principal-mobile.jpg"
        }
      ],
      "height": 720,
      "showArrows": true,
      "showDots": true
    }
  },

  "shelf#lancamentos": {
      "blocks": ["product-summary.shelf"],
      "props": {
        "orderBy": "OrderByReleaseDateDESC",
        "paginationDotsVisibility": "hidden",
        "productList": {
          "maxItems": 12,
          "itemsPerPage": 4,
          "minItemsPerPage": 1.5,
          "scroll": "BY_PAGE",
          "arrows": true,
          "titleText": "Lançamentos"
        }
      }
    },
  "shelf#mais-vendidos": {
        "blocks": ["product-summary.shelf"],
        "props": {
          "orderBy": "OrderByReleaseDateDESC",
          "paginationDotsVisibility": "hidden",
          "productList": {
            "maxItems": 12,
            "itemsPerPage": 4,
            "minItemsPerPage": 1.5,
            "scroll": "BY_PAGE",
            "arrows": true,
            "titleText": "Mais vendidos"
          }
        }
      },

  "image#special-campaign": {
    "title": "Campanha em destaque",
    "props": {
        "src": "https://uploaddeimagens.com.br/images/002/473/060/original/bannerviagens.png?1572632764",
        "maxWidth": "100%"
    }
  }

}

```


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

[User] Show me the implementation of iodas-bookstore-theme/store/blocks/footer/footer.json from the iodas-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "footer": {
    "blocks": ["footer-layout.desktop", "footer-layout.mobile"]
  },
  "footer-layout.desktop": {
    "children": [
      "flex-layout.row#footer-0-desktop",
      "flex-layout.row#footer-1-desktop",
      "flex-layout.row#footer-2-desktop",
      "flex-layout.row#footer-3-desktop"
    ]
  },
  "flex-layout.row#footer-0-desktop": {
    "children": [
      "image#footer-brand"
    ],
    "props": {
      "paddingTop": 6,
      "paddingBottom": 6
    }
  },
  "image#footer-brand": {
    "props": {
      "src": "https://i.pinimg.com/originals/cf/41/f2/cf41f285d7f65240d92dd6fbf4c31ef9.png",
      "maxHeight": "200px"
    }
  },
  "flex-layout.row#footer-1-desktop": {
    "children": [
      "menu#footer-duvidas",
      "menu#footer-atendimento",
      "menu#footer-institucional",
      "menu#footer-links"
    ],
    "props": {
      "blockClass": "menu-footer-row",
      "paddingTop": 6,
      "paddingBottom": 3
    }
  },

  "social-networks": {
    "props": {
      "socialNetworks": [
        {
          "name": "Facebook",
          "url": "https://www.facebook.com/vtexonline/"
        },
        {
          "name": "Instagram",
          "url": "https://www.instagram.com/vtextruecloud/"
        },
        {
          "name": "Twitter",
          "url": "https://twitter.com/vtexonline"
        },
        {
          "name": "Youtube",
          "url": "https://www.youtube.com/user/VTEXTV"
        }
      ]
    }
  },

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

  "flex-layout.row#footer-3-desktop": {
    "children": ["rich-text#footer"],
    "props": {
      "blockClass": "credits"
    }
  },
  "rich-text#footer": {
    "props": {
      "text": "All stock and product photos are from photos.icons8.com",
      "blockClass": "footer"
    }
  },

  "footer-layout.mobile": {
    "children": [
      "flex-layout.row#1-footer-mobile",
      "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": "All stock and product photos are from photos.icons8.com",
      "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 iodas-bookstore-theme/store/blocks/footer/menu.json from the iodas-bookstore-theme 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#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"
      }
    }
  },

  "menu#footer-duvidas": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#footer-faq",
      "menu-item#formas-pagamento",
      "menu-item#formas-entrega",
      "menu-item#devolucao"
    ]
  },
  "menu-item#footer-faq": {
    "props": {
      "itemProps": {
        "type": "internal",
        "tagTitle": "Perguntas Frequentes",
        "text": "Perguntas Frequentes"
      }
    }
  },
  "menu-item#formas-pagamento": {
    "props": {
      "itemProps": {
        "type": "internal",
        "tagTitle": "Formas de Pagamento",
        "text": "Formas de Pagamento"
      }
    }
  },
  "menu-item#formas-entrega": {
    "props": {
      "itemProps": {
        "type": "internal",
        "tagTitle": "Formas de Entrega",
        "text": "Formas de Entrega"
      }
    }
  },
  "menu-item#devolucao": {
    "props": {
      "itemProps": {
        "type": "internal",
        "tagTitle": "Trocas e Devolução",
        "text": "Trocas e Devolução"
      }
    }
  },
  "menu#footer-atendimento": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#fale-conosco",
      "menu-item#meus-pedidos",
      "menu-item#lojas"
    ]
  },
  "menu-item#fale-conosco": {
    "props": {
      "itemProps": {
        "type": "internal",
        "tagTitle": "Fale Conosco",
        "text": "Fale Conosco"
      }
    }
  },
  "menu-item#meus-pedidos": {
    "props": {
      "itemProps": {
        "type": "internal",
        "tagTitle": "Meus pedidos",
        "text": "Meus pedidos"
      }
    }
  },
  "menu-item#lojas": {
    "props": {
      "itemProps": {
        "type": "internal",
        "tagTitle": "Encontre nossas lojas",
        "text": "Encontre nossas lojas"
      }
    }
  },
  "menu#footer-institucional": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#historia",
      "menu-item#trabalhe-conosco",
      "menu-item#sustentabilidade",
      "menu-item#nosso-blog"
    ]
  },
  "menu-item#historia": {
    "props": {
      "itemProps": {
        "type": "internal",
        "tagTitle": "Nossa história",
        "text": "Nossa história"
      }
    }
  },
  "menu-item#trabalhe-conosco": {
    "props": {
      "itemProps": {
        "type": "internal",
        "tagTitle": "Trabalhe Conosco",
        "text": "Trabalhe Conosco"
      }
    }
  },
  "menu-item#sustentabilidade": {
    "props": {
      "itemProps": {
        "type": "internal",
        "tagTitle": "Sustentabilidade",
        "text": "Sustentabilidade"
      }
    }
  },
  "menu-item#nosso-blog": {
    "props": {
      "itemProps": {
        "type": "internal",
        "tagTitle": "Visite o nosso blog",
        "text": "Visite o nosso blog"
      }
    }
  },
  "menu#footer-links": {
    "props": {
      "orientation": "vertical"
    },
    "children": [
      "menu-item#privacidade",
      "menu-item#codigo-defesa-consumidor",
      "menu-item#termos",
      "menu-item#procon"
    ]
  },
  "menu-item#privacidade": {
    "props": {
      "itemProps": {
        "type": "internal",
        "tagTitle": "Política de Privacidade",
        "text": "Política de Privacidade"
      }
    }
  },
  "menu-item#codigo-defesa-consumidor": {
    "props": {
      "itemProps": {
        "type": "internal",
        "tagTitle": "Código de Defesa do Consumidor",
        "text": "Código de Defesa do Consumidor"
      }
    }
  },
  "menu-item#termos": {
    "props": {
      "itemProps": {
        "type": "internal",
        "tagTitle": "Termos de Uso",
        "text": "Termos de Uso"
      }
    }
  },
  "menu-item#procon": {
    "props": {
      "itemProps": {
        "type": "internal",
        "tagTitle": "Procon",
        "text": "Procon"
      }
    }
  }
}

```