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

[User] Show me the implementation of product-price/react/modules/seller.ts from the product-price VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { ProductTypes } from 'vtex.product-context'

export function getDefaultSeller(sellers?: ProductTypes.Seller[]) {
  if (!sellers || sellers.length === 0) {
    return
  }

  const defaultSeller = sellers.find(seller => seller.sellerDefault)

  if (!defaultSeller) {
    return sellers[0]
  }

  return defaultSeller
}

```


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

[User] Show me the implementation of product-price/react/modules/hideProductPrice.ts from the product-price VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface HideProductPriceParams {
  alwaysShow: boolean
  availableQuantity: number
}
/**
 * hideProductPrice -> Logic to hide or show block based on props passed by store theme
 *
 * @export
 * @param {HideProductPriceParams} {
 *   alwaysShow,
 *   availableQuantity,
 * }
 * @returns {boolean}
 */
export function hideProductPrice({
  alwaysShow,
  availableQuantity,
}: HideProductPriceParams): boolean {
  if (alwaysShow) {
    return false
  }

  return availableQuantity <= 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 product-price/react/components/PriceLoadingSpinner/index.tsx from the product-price VTEX app.

[Assistant]
Here's the implementation:

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

import styles from './styles.css'

export const CSS_HANDLES = ['priceLoading'] as const

interface Props {
  handles: CssHandlesTypes.CssHandlesBag<typeof CSS_HANDLES>['handles']
}

function PriceLoadingSpinner({ handles }: Props) {
  return (
    <div className={`${handles.priceLoading} flex items-end w-100 h1 pr6`}>
      <div className={styles.priceSpinner} />
    </div>
  )
}

export default PriceLoadingSpinner

```


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

[User] Show me the implementation of product-price/react/components/PriceLoadingSpinner/styles.css from the product-price VTEX app.

[Assistant]
Here's the implementation:

```css
.priceSpinner {
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-left-color: #4d4d4d;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 0.5s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

```


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

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

[Assistant]
Here's the implementation:

```markdown
# VTEX Checkout

## Warning 🚨

This repository contains **experimental** code for VTEX Checkout.

This code is "experimental" for various reasons:
- Some are not tested as rigorously as the main code.
- Some are tested but not maintained.
- It can suffer from significant changes (breaking changes) without further notice.

The only major we use in production is **0.x**.

**Use it at your own risk!** ☠

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "memory": 256,
  "ttl": 10,
  "timeout": 2,
  "minReplicas": 2,
  "maxReplicas": 4,
  "routes": {
    "checkoutNext": {
      "path": "/checkout/_next/*path",
      "public": true
    },
    "checkout": {
      "path": "/checkout",
      "public": true
    },
    "cart": {
      "path": "/checkout/cart",
      "public": true
    }
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.checkout",
  "version": "2.9.0",
  "private": true,
  "license": "UNLICENSED",
  "scripts": {
    "lint": "tsc --noEmit"
  },
  "dependencies": {
    "cookie": "^0.4.2"
  },
  "devDependencies": {
    "@types/cookie": "^0.4.1",
    "@types/koa": "^2.0.39",
    "@types/node": "^12.0.0",
    "@vtex/api": "6.45.6",
    "typescript": "3.9.7",
    "vtex.checkout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout@2.8.3/public/@types/vtex.checkout"
  }
}

```


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

[User] Show me the implementation of checkout/node/global.d.ts from the checkout VTEX app.

[Assistant]
Here's the implementation:

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

import { Clients } from './clients'

declare global {
  type Context = ServiceContext<Clients>
}

```


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

[User] Show me the implementation of checkout/node/index.ts from the checkout VTEX app.

[Assistant]
Here's the implementation:

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

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

const middlewares = [renderPage]

export default new Service({
  clients: {
    implementation: Clients,
    options: {},
  },
  routes: {
    checkoutNext: middlewares,
    checkout: middlewares,
    cart: middlewares,
  },
})

```


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

[User] Show me the implementation of checkout/node/clients/fastcheckout.ts from the checkout VTEX app.

[Assistant]
Here's the implementation:

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

const BASE_URL = 'http://checkout.vtex.io'

export class FastCheckoutClient extends ExternalClient {
  constructor(context: IOContext) {
    super(BASE_URL, context, {
      timeout: 10_000,
    })
  }

  public getPage(
    pathname: string,
    cookies?: string
  ): Promise<IOResponse<string>> {
    const url = new URL(pathname, BASE_URL)

    url.searchParams.set('an', this.context.account)

    return this.http.getRaw(url.pathname + url.search, {
      headers: { 'X-Vtex-Use-Https': 'true', cookie: cookies ?? '' },
    })
  }
}

```


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

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

[Assistant]
Here's the implementation:

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

import { FastCheckoutClient } from './fastcheckout'

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

```


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

[User] Show me the implementation of checkout/node/middlewares/renderPage.ts from the checkout VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { IOResponse } from '@vtex/api'
import { parse } from 'cookie'

const parseCookie = (cookie: string, domain?: string) => {
  const parsed = parse(cookie)
  const cookieName = Object.keys(parsed)[0] as string
  const cookieValue = parsed[cookieName]

  const extraOptions = {
    path: parsed.path,
    domain: domain ?? parsed.domain,
    expires: parsed.expires ? new Date(parsed.expires) : undefined,
  }

  return {
    name: cookieName,
    value: cookieValue,
    options: extraOptions,
  }
}

const CHECKOUT_COOKIE = 'checkout.vtex.com'

const SetCookieWhitelist = [CHECKOUT_COOKIE, '.ASPXAUTH']

const isWhitelistedSetCookie = (cookie: string) => {
  const [key] = cookie.split('=')
  return SetCookieWhitelist.includes(key)
}

function forwardCheckoutCookies(rawHeaders: Record<string, any>, ctx: Context) {
  const responseSetCookies: string[] = rawHeaders?.['set-cookie'] || []

  const host = ctx.get('x-forwarded-host')
  const forwardedSetCookies = responseSetCookies.filter(isWhitelistedSetCookie)

  const parseAndClean = (cookie: string) => parseCookie(cookie, host)

  const cleanCookies = forwardedSetCookies.map(parseAndClean)

  cleanCookies.forEach(({ name, value, options }) =>
    ctx.cookies.set(name, value, options)
  )
}

export async function renderPage(ctx: Context) {
  const pathname = ctx.path

  let renderResponse: IOResponse<string>

  try {
    const checkoutCookieValue = ctx.cookies.get(CHECKOUT_COOKIE)

    let checkoutCookie

    if (checkoutCookieValue != null) {
      checkoutCookie = `${CHECKOUT_COOKIE}=${checkoutCookieValue}`
    }

    renderResponse = await ctx.clients.fastCheckout.getPage(
      pathname,
      checkoutCookie
    )
  } catch (e) {
    if (!e.isAxiosError) {
      throw e
    }

    renderResponse = e.response
  }

  if (renderResponse.status === 308 /* permanent redirect */) {
    const redirectUrl = new URL(
      renderResponse.headers.location,
      `http://${ctx.get('x-forwarded-host')}`
    )

    if (redirectUrl.searchParams.has('an')) {
      redirectUrl.searchParams.delete('an')
    }

    renderResponse.headers.location = redirectUrl.pathname + redirectUrl.search
  }

  ctx.body = renderResponse.data
  ctx.status = renderResponse.status

  Object.entries(renderResponse.headers).forEach(
    ([headerName, headerValue]) => {
      if (headerName.toLowerCase() === 'set-cookie') {
        return
      }

      ctx.set(headerName, headerValue)
    }
  )

  forwardCheckoutCookies(renderResponse.headers, ctx)
}

```


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

[User] Show me the implementation of biggy-bookstore-theme/sitemap/sitemap.json from the biggy-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 biggy-bookstore-theme/docs/README.md from the biggy-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Biggy Store theme
A store-theme created during the first VTEX [hackatheme](hackatheme).

## Preview

![image](https://user-images.githubusercontent.com/40380674/71492222-517fac00-2814-11ea-9273-81ded8763569.png)

![image](https://user-images.githubusercontent.com/40380674/71492236-6a885d00-2814-11ea-8aed-e7614f6edc21.png)

```


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

[User] Show me the implementation of biggy-bookstore-theme/store/blocks.jsonc from the biggy-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-add-to-list-button",
      "stack-layout#prodsum",
      "product-summary-name",
      "product-rating-inline",
      "product-summary-space",
      "product-summary-price",
      "product-identifier.summary",
      "product-summary-buy-button"
    ]
  },

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

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

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

```


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

[User] Show me the implementation of biggy-bookstore-theme/store/routes.json from the biggy-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

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

  "store.custom#landing-page": {
    "path": "/lp"
  }
}

```


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

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

[Assistant]
Here's the implementation:

```css
.container svg {
    color: #fafafa;
}

.badge {
    background-color: #1e88e5;
    box-shadow: 1px 1px 3px 0px #33333350
}
```


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

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

[Assistant]
Here's the implementation:

```css
.container {
  display: flex;
  justify-content: center;
}

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

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

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

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

.container--question .paragraph {
  text-align: center;
  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 biggy-bookstore-theme/styles/css/vtex.login.css from the biggy-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.label {
    color: #fff;
}

.label:hover {
    color: #222;
}
```


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

[User] Show me the implementation of biggy-bookstore-theme/styles/css/vtex.product-summary.css from the biggy-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.SKUSelectorContainer {
  min-height: 29px;
}

.priceContainer {
  min-height: 65px;
}

.nameContainer {
  min-height: 84px;
}

@media only screen and (min-width: 1026px) {
  .buyButton {
    opacity: 0;
    transition: all 0.2s ease-out;
  }
}

.container:hover {
  transform: scale(1.025);
  transition: 0.2s;
}

.container {
  max-height: 573px;
}

.container:hover .buyButton {
  opacity: 1;
}

```


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

[User] Show me the implementation of biggy-bookstore-theme/styles/css/vtex.store-header.css from the biggy-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 .headerRowBackground {
  background-color: #4FC3F7;
}

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

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

.headerRowBackground--input-header-mobile {
  background: #4FC3F7;
}

.headerRowContainer--main-header-mobile {
  display: flex;
  justify-content: space-between;
}

.headerRowContainer--input-header-mobile {
  display: flex;
  justify-content: center;
}

@media only screen and (min-width: 640px) {
  .headerRowContainer--secondary-header {
    justify-content: flex-start;
    align-items: center;
  }

  .headerRowContainer--main-header {
    justify-content: space-between;
    align-items: center;
  }
}

.headerRowBackground.headerRowBackground--secondary-header {
  background-color: #e6e6e6;
}
```


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

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

[Assistant]
Here's the implementation:

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

.searchBarContainer {
  max-width: 95%;
  padding-top: 0;
}

.searchBarIcon svg {
  color: #222;
}

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

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

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

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

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

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

  .searchBarContainer {
    max-width: 60%;
    margin-top: 15px;
  }
}

.skuSelectorTextContainer {
  display: none;
}
.skuSelectorOptionsList {
  justify-content: center;
}
.skuSelectorItem {
  width: 42%;
  height: 20px;
}

.skuSelectorItemTextValue {
  font-size: 10px;
  padding-left: 0;
}

.frameAround {
  border-radius: 0;
}

.diagonalCross {
  background-image: none;
  opacity: 0.2;
}

.diagonalCross ~ div {
  opacity: 0.2;
}

.SKUSelectorContainer {
  min-height: 25px;
}

.skuSelectorSubcontainer {
  margin-bottom: 0;
}

.imageElement {
  max-width: 100% !important;
}

.newsletter {
  max-width: initial;
}

.newsletter .container {
  padding: 10px;
}

.newsletter .container .inputGroup {
  border: 0px;
}

.logoContainer {
  padding-top: 9px;
  padding-bottom: 0;
  display: inline-block;
  text-align: center;
}

```


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

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

.socialNetworksContainer,
.acceptedPaymentMethodContainer {
  justify-content: center;
}

.footerLayout {
  background-color: #e6e6e6;
}

```


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

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

[Assistant]
Here's the implementation:

```css
.hideDecorators:focus {
    outline: none;
}

.hideDecorators {
    border-top-left-radius: .25rem !important;
    border-bottom-left-radius: .25rem !important;
}
```


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

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

[Assistant]
Here's the implementation:

```css
.openIconContainer--drawer-icon svg {
    color: #000;
}

.closeIconContainer--drawer-icon {
    display: flex;
    justify-content: flex-end;
}

.menuItem .styledLink{
    color:black;
}
```


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

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

[Assistant]
Here's the implementation:

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

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

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

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

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

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

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

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

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

```


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

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

[Assistant]
Here's the implementation:

```css
.menuContainer--center-menu .styledLink div {
  justify-content: center;
}
.menuItem--side-menu-link a {
  color: #fff;
}

```


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

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

[Assistant]
Here's the implementation:

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

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

```


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

[User] Show me the implementation of biggy-bookstore-theme/styles/css/vtex.search-result.css from the biggy-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```css
@media only screen and (min-width: 1026px) {
  .categoriesContainer {
    flex-direction: row;
    justify-content: center;
  }

  .filter {
    text-align: center;
  }

  .filter__container--c .filterTitle {
    display: inline-block;
    margin-bottom: 5px;
  }

  .flexRow--filterCol {
    text-align: center;
  }

  div.categoryItemChildrenContainer {
    position: absolute;
    background: #fff;
    width: 100%;
    left: 0;
    z-index: 1;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease-out;
    box-shadow: 1px 1px rgba(0, 0, 0, 0.2);
  }

  div.categoryItemChildrenContainer > div {
    margin-top: 25px;
    display: flex;
    justify-content: center;
  }

  .categoryGroup:hover .categoryItemChildrenContainer {
    height: 70px;
    opacity: 1;
  }

  .categoryGroup {
    margin: 0 20px;
  }

  .filter__container:not(.filter__container--c) {
    position: relative;
    display: inline-block;
    text-align: center;
    width: 250px;
  }

  .filter_container {
    border-top: 1px solid #979899;
    border-bottom: 1px solid #979899;
  }

  .filterIcon {
    display: inline;
  }

  .filters--layout {
    text-align: center;
  }

  .filterTitle {
    display: inline-block;
    text-align: center;
  }

  .filterAvailable ~ div {
    position: absolute;
    z-index: 2;
    width: 100%;
  }

  .filterItem {
    display: flex;
    justify-content: center;
  }

  .filterItem > div {
    min-width: 100px;
  }

  span.categoryItemName {
    width: 250px;
    display: inline-block;
    text-align: center;
  }

  .filter__container--title {
    width: 100% !important;
  }

  .selectedCategory {
    justify-content: center;
  }
}

.galleryTitle--layout {
  text-align: center;
  letter-spacing: 2px;
  font-size: 22px;
}

.buttonShowMore {
  margin-bottom: 15px;
}
```


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

[User] Show me the implementation of biggy-bookstore-theme/styles/configs/style.json from the biggy-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": "#222222",
          "action-primary": "#4FC3F7",
          "action-secondary": "#eef3f7",
          "emphasis": "#f71963",
          "disabled": "#f2f4f5",
          "success": "#66bb6a",
          "success--faded": "#c8e6c9",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ef5350",
          "warning--faded": "#ffcdd2",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "hover-background": {
          "action-primary": "#072c75",
          "action-secondary": "#4FC3F7",
          "emphasis": "#dd1659",
          "success": "#66bb6a",
          "success--faded": "#c8e6c9",
          "danger": "#e13232",
          "danger--faded": "#ffe6e6",
          "warning": "#ef5350",
          "warning--faded": "#ffcdd2",
          "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": "#66bb6a",
          "success--faded": "#c8e6c9",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ef5350",
          "warning--faded": "#ffcdd2",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "text": {
          "action-primary": "#4FC3F7",
          "action-secondary": "#eef3f7",
          "link": "#4FC3F7",
          "emphasis": "#f71963",
          "disabled": "#979899",
          "success": "#66bb6a",
          "success--faded": "#c8e6c9",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ef5350",
          "warning--faded": "#ffcdd2",
          "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": "#66bb6a",
          "success--faded": "#c8e6c9",
          "danger": "#e13232",
          "danger--faded": "#ffe6e6",
          "warning": "#ef5350",
          "warning--faded": "#ffcdd2"
        },
        "active-text": {
          "link": "#0c389f",
          "emphasis": "#dd1659",
          "success": "#66bb6a",
          "success--faded": "#c8e6c9",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ef5350",
          "warning--faded": "#ffcdd2"
        },
        "border": {
          "action-primary": "#4FC3F7",
          "action-secondary": "#eef3f7",
          "emphasis": "#f71963",
          "disabled": "#e3e4e6",
          "success": "#66bb6a",
          "success--faded": "#c8e6c9",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ef5350",
          "warning--faded": "#ffcdd2",
          "muted-1": "#727273",
          "muted-2": "transparent",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "hover-border": {
          "action-primary": "#072c75",
          "action-secondary": "#dbe9fd",
          "emphasis": "#dd1659",
          "success": "#66bb6a",
          "success--faded": "#c8e6c9",
          "danger": "#e13232",
          "danger--faded": "#ffe6e6",
          "warning": "#ef5350",
          "warning--faded": "#ffcdd2",
          "muted-1": "#727273",
          "muted-2": "#979899",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "active-border": {
          "action-primary": "#0c389f",
          "action-secondary": "#dbe9fd",
          "emphasis": "#dd1659",
          "success": "#66bb6a",
          "success--faded": "#c8e6c9",
          "danger": "#ff4c4c",
          "danger--faded": "#ffe6e6",
          "warning": "#ef5350",
          "warning--faded": "#ffcdd2",
          "muted-1": "#727273",
          "muted-2": "transparent",
          "muted-3": "#cacbcc",
          "muted-4": "#e3e4e6",
          "muted-5": "#f2f4f5"
        },
        "on": {
          "base": "#222222",
          "base--inverted": "#ffffff",
          "action-primary": "#ffffff",
          "action-secondary": "#4FC3F7",
          "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": "#4FC3F7",
          "emphasis": "#ffffff",
          "success": "#ffffff",
          "success--faded": "#3f3f40",
          "danger": "#ffffff",
          "danger--faded": "#3f3f40",
          "warning": "#ffffff",
          "warning--faded": "#1a1a1a"
        },
        "active-on": {
          "action-primary": "#ffffff",
          "action-secondary": "#4FC3F7",
          "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 biggy-bookstore-theme/store/blocks/product-assembly.jsonc from the biggy-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

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


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

[User] Show me the implementation of biggy-bookstore-theme/store/blocks/about-us.json from the biggy-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#about-us": {
    "blocks": [
      "flex-layout.row#about-us"
    ]
  },

  "flex-layout.row#about-us": {
    "children": [
      "image#mobile-phone",
      "flex-layout.col#text-about-us"
    ]
  },

  "flex-layout.col#text-about-us": {
    "children": [
      "rich-text#title-about-us",
      "rich-text#about-us"
    ],
    "props": {
      "blockclass": "textColumn",
      "preventVerticalStretch": true
    }
  },

  "rich-text#title-about-us": {
    "props": {
      "text":
      "# Create meaningful and relevant experiences.",
      "blockClass": "title"
    }
  },

  "image#mobile-phone": {
    "props": {
      "src": "https://storecomponents.vteximg.com.br/arquivos/mobile-phone.png",
      "maxHeight": "",
      "maxWidth": "",
      "blockClass": "storePrint"
    }
  },

  "rich-text#about-us": {
    "props": {
      "text": "**Optimized store framework** \n Free your front-end with our React + Node store framework. Improve usability and SEO, while driving more conversion with modular components, single page applications, and a ready-for-PWA structure. \n **Multi-currency and language** \n Go international with multiple storefronts to support different languages and easily manage local currencies and payment conditions. \n **Serverless development platform** \n Reduce loading time, improve usability, and make the best out of SEO. Developing scalable components with a comprehensive, easy-to-use toolset, you can build stores faster than ever.",
      "blockClass": "about"
    }
  }
}
```


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

[User] Show me the implementation of biggy-bookstore-theme/store/blocks/landing-page.jsonc from the biggy-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "store.custom#landing-page": {
        "blocks": [
            "flex-layout.row#banner-lp",
            "responsive-layout.phone#lp1",
            "flex-layout.row#landing-page1",
            "responsive-layout.phone#lp2",
            "flex-layout.row#landing-page2",
            "responsive-layout.phone#lp3",
            "flex-layout.row#landing-page3"
        ]
    },

    "flex-layout.row#banner-lp": {
        "props": {
            "fullWidth": true,
            "horizontalAlign": "center"
        },
        "children": [
            "image#banner-lp"
        ]
    },

    "image#banner-lp": {
        "props": {
            "src": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/bannerlp___c4ffc133e9dbf6562aadefc3f7e97f11.png",
            "alt": "Landing Page Banner"
        }
    },

    "flex-layout.row#landing-page1": {
        "props": {
            "horizontalAlign": "center"
        },
        "children": [
            "flex-layout.col#lp1-products",
            "responsive-layout.desktop#lp1"
        ]
    },

    "responsive-layout.desktop#lp1": {
        "children": [
            "flex-layout.col#lp1-card"
        ]
    },

    "responsive-layout.phone#lp1": {
        "children": [
            "flex-layout.row#lp1-card-phone"
        ]
    },

    "flex-layout.col#lp1-products": {
        "props": {
            "width": "70%"
        },
        "children": [
            "flex-layout.row#lp1-products"
        ]
    },

    "flex-layout.row#lp1-products": {
        "children": [
            "shelf#lp1-products"
        ]
    },

    "shelf#lp1-products": {
        "blocks": [
            "product-summary.shelf#sku"
        ],
        "props": {
            "category": "1/9",
            "orderBy": "OrderByTopSaleDESC",
            "productList": {
                "maxItems": 10,
                "itemsPerPage": 3,
                "scroll": "BY_PAGE",
                "arrows": true,
                "showTitle": false,
                "hideUnavailableItems": true,
                "summary": {
                    "isOneClickBuy": false,
                    "showBadge": true,
                    "badgeText": "OFF",
                    "buyButtonText": "Comprar",
                    "displayBuyButton": "displayButtonHover",
                    "showCollections": false,
                    "showListPrice": true,
                    "showLabels": false,
                    "showInstallments": true,
                    "showSavings": true,
                    "name": {
                        "showBrandName": false,
                        "showSku": false,
                        "showProductReference": false
                    }
                }
            }
        }
    },

    "flex-layout.col#lp1-card": {
        "props": {
            "width": "30%",
            "verticalAlign": "middle",
            "horizontalAlign": "right"
        },
        "children": [
            "image#lp1-card"
        ]
    },

    "flex-layout.row#lp1-card-phone": {
        "props": {
            "marginTop": 6,
            "verticalAlign": "middle",
            "horizontalAlign": "center"
        },
        "children": [
            "image#lp1-card-phone"
        ]
    },

    "image#lp1-card": {
        "props": {
            "src": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/bannerlp2___5c1534ae7ca0bc36356136d1ccac648d.png"
        }
    },

    "image#lp1-card-phone": {
        "props": {
            "src": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/bannerlp2flipsmall___7f3a4abb4b6347751efa5330ac61f563.png"
        }
    },

    "flex-layout.row#landing-page2": {
        "props": {
            "horizontalAlign": "center"
        },
        "children": [
            "responsive-layout.desktop#lp2",
            "flex-layout.col#lp2-products"
        ]
    },

    "responsive-layout.desktop#lp2": {
        "children": [
            "flex-layout.col#lp2-card"
        ]
    },

    "responsive-layout.phone#lp2": {
        "children": [
            "flex-layout.row#lp2-card-phone"
        ]
    },

    "flex-layout.col#lp2-card": {
        "props": {
            "width": "30%",
            "verticalAlign": "middle",
            "horizontalAlign": "left"
        },
        "children": [
            "image#lp2-card"
        ]
    },

    "flex-layout.row#lp2-card-phone": {
        "props": {
            "verticalAlign": "middle",
            "horizontalAlign": "center"
        },
        "children": [
            "image#lp2-card-phone"
        ]
    },

    "image#lp2-card": {
        "props": {
            "src": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/bannerlp2flip___6d82e6686be9c73a77ada8afe817e53a.png"
        }
    },

    "image#lp2-card-phone": {
        "props": {
            "src": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/bannerlp2small___a13366cc34cc7ba994c15416887835e4.png"
        }
    },

    "flex-layout.col#lp2-products": {
        "props": {
            "width": "70%"
        },
        "children": [
            "flex-layout.row#lp2-products"
        ]
    },

    "flex-layout.row#lp2-products": {
        "children": [
            "shelf#lp2-products"
        ]
    },

    "shelf#lp2-products": {
        "blocks": [
            "product-summary.shelf#sku"
        ],
        "props": {
            "category": "1/6",
            "orderBy": "OrderByTopSaleDESC",
            "productList": {
                "maxItems": 10,
                "itemsPerPage": 3,
                "scroll": "BY_PAGE",
                "arrows": true,
                "showTitle": false,
                "hideUnavailableItems": true,
                "summary": {
                    "isOneClickBuy": false,
                    "showBadge": true,
                    "badgeText": "OFF",
                    "buyButtonText": "Comprar",
                    "displayBuyButton": "displayButtonHover",
                    "showCollections": false,
                    "showListPrice": true,
                    "showLabels": false,
                    "showInstallments": true,
                    "showSavings": true,
                    "name": {
                        "showBrandName": false,
                        "showSku": false,
                        "showProductReference": false
                    }
                }
            }
        }
    },

    "flex-layout.row#landing-page3": {
        "props": {
            "horizontalAlign": "center"
        },
        "children": [
            "flex-layout.col#lp3-products",
            "responsive-layout.desktop#lp3"
        ]
    },

    "responsive-layout.phone#lp3": {
        "children": [
            "flex-layout.row#lp3-card-phone"
        ]
    },

    "responsive-layout.desktop#lp3": {
        "children": [
            "flex-layout.col#lp3-card"
        ]
    },

    "flex-layout.col#lp3-products": {
        "props": {
            "width": "70%"
        },
        "children": [
            "flex-layout.row#lp3-products"
        ]
    },

    "flex-layout.row#lp3-products": {
        "children": [
            "shelf#lp3-products"
        ]
    },

    "shelf#lp3-products": {
        "blocks": [
            "product-summary.shelf#sku"
        ],
        "props": {
            "category": "1/8",
            "orderBy": "OrderByTopSaleDESC",
            "productList": {
                "maxItems": 10,
                "itemsPerPage": 3,
                "scroll": "BY_PAGE",
                "arrows": true,
                "showTitle": false,
                "hideUnavailableItems": true,
                "summary": {
                    "isOneClickBuy": false,
                    "showBadge": true,
                    "badgeText": "OFF",
                    "buyButtonText": "Comprar",
                    "displayBuyButton": "displayButtonHover",
                    "showCollections": false,
                    "showListPrice": true,
                    "showLabels": false,
                    "showInstallments": true,
                    "showSavings": true,
                    "name": {
                        "showBrandName": false,
                        "showSku": false,
                        "showProductReference": false
                    }
                }
            }
        }
    },

    "flex-layout.col#lp3-card": {
        "props": {
            "width": "30%",
            "verticalAlign": "middle",
            "horizontalAlign": "right"
        },
        "children": [
            "image#lp3-card"
        ]
    },

    "flex-layout.row#lp3-card-phone": {
        "props": {
            "verticalAlign": "middle",
            "horizontalAlign": "center"
        },
        "children": [
            "image#lp3-card-phone"
        ]
    },

    "image#lp3-card": {
        "props": {
            "src": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/bannerlp2___5c1534ae7ca0bc36356136d1ccac648d.png"
        }
    },

    "image#lp3-card-phone": {
        "props": {
            "src": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/bannerlp2flipsmall___7f3a4abb4b6347751efa5330ac61f563.png"
        }
    }
}
```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store.product": {
    "children": [
      "flex-layout.row#product-breadcrumb",
      "flex-layout.row#product-main",
      "shelf.relatedProducts",
      "product-reviews",
      "product-questions-and-answers"
    ]
  },
  "flex-layout.row#product-breadcrumb": {
    "props": {
      "marginTop": 4
    },
    "children": ["breadcrumb"]
  },
  "flex-layout.row#product-main": {
    "props": {
      "colGap": 7,
      "rowGap": 7,
      "marginTop": 4,
      "marginBottom": 7,
      "paddingTop": 7,
      "paddingBottom": 7
    },
    "children": ["flex-layout.col#stack", "flex-layout.col#right-col"]
  },

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

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

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

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

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

  "share#default": {
    "props": {
      "social": {
        "Facebook": true,
        "WhatsApp": true,
        "Twitter": false,
        "Pinterest": true
      }
    }
  }
}

```


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

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

[Assistant]
Here's the implementation:

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

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

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

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

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

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

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

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

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

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

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

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

  "breadcrumb": {
    "props": {
      "showOnMobile": true
    }
  },
  "product-summary.shelf#sku": {
    "children": [
      "product-summary-image",
      "product-summary-name",
      "product-summary-description",
      "product-summary-price",
      "product-rating-inline",
      "product-summary-sku-selector",
      "product-summary-buy-button",
      "product-rating-inline"
    ]
  },
  "gallery": {
    "blocks": ["product-summary.shelf#sku"]
  }
}

```


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

[User] Show me the implementation of biggy-bookstore-theme/store/blocks/home/top-shelves.json from the biggy-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "flex-layout.row#top-shelves": {
        "children": [
            "flex-layout.col#top-shelf1",
            "flex-layout.col#top-shelf2",
            "flex-layout.col#top-shelf3",
            "flex-layout.col#top-shelf4"
        ],
        "props": {
            "blockClass": "top-shelves"
        }
    },
    "flex-layout.col#top-shelf1": {
        "children": [
            "shelf#shelf1"
        ]
    },
    "shelf#shelf1": {
        "blocks": ["product-summary.shelf#sku"],
        "props": {
            "category": "1/9",
            "orderBy": "OrderByTopSaleDESC",
            "productList": {
                "maxItems": 10,
                "itemsPerPage": 1,
                "scroll": "BY_PAGE",
                "arrows": true,
                "titleText": "Best Sellers",
                "hideUnavailableItems": true,
                "paginationDotsVisibility": "hidden",
                "summary": {
                    "isOneClickBuy": false,
                    "showBadge": true,
                    "badgeText": "OFF",
                    "buyButtonText": "Buy",
                    "displayBuyButton": "displayButtonHover",
                    "showCollections": false,
                    "showListPrice": true,
                    "showLabels": false,
                    "showInstallments": true,
                    "showSavings": true,
                    "name": {
                        "showBrandName": false,
                        "showSku": false,
                        "showProductReference": false
                    }
                }
            }
        }
    },
    "flex-layout.col#top-shelf2": {
        "children": [
            "shelf#shelf2"
        ]
    },
    "shelf#shelf2": {
        "blocks": ["product-summary.shelf#sku"],
        "props": {
            "category": "1/6",
            "orderBy": "OrderByTopSaleDESC",
            "productList": {
                "maxItems": 10,
                "itemsPerPage": 1,
                "scroll": "BY_PAGE",
                "arrows": true,
                "titleText": "New Releases",
                "hideUnavailableItems": true,
                "paginationDotsVisibility": "hidden",
                "summary": {
                    "isOneClickBuy": false,
                    "showBadge": true,
                    "badgeText": "OFF",
                    "buyButtonText": "Buy",
                    "displayBuyButton": "displayButtonHover",
                    "showCollections": false,
                    "showListPrice": true,
                    "showLabels": false,
                    "showInstallments": true,
                    "showSavings": true,
                    "name": {
                        "showBrandName": false,
                        "showSku": false,
                        "showProductReference": false
                    }
                }
            }
        }
    },
    "flex-layout.col#top-shelf3": {
        "children": [
            "shelf#shelf3"
        ]
    },
    "shelf#shelf3": {
        "blocks": ["product-summary.shelf#sku"],
        "props": {
            "category": "1/8",
            "orderBy": "OrderByTopSaleDESC",
            "productList": {
                "maxItems": 10,
                "itemsPerPage": 1,
                "scroll": "BY_PAGE",
                "arrows": true,
                "titleText": "Offers",
                "hideUnavailableItems": true,
                "paginationDotsVisibility": "hidden",
                "summary": {
                    "isOneClickBuy": false,
                    "showBadge": true,
                    "badgeText": "OFF",
                    "buyButtonText": "Buy",
                    "displayBuyButton": "displayButtonHover",
                    "showCollections": false,
                    "showListPrice": true,
                    "showLabels": false,
                    "showInstallments": true,
                    "showSavings": true,
                    "name": {
                        "showBrandName": false,
                        "showSku": false,
                        "showProductReference": false
                    }
                }
            }
        }
    },
    "flex-layout.col#top-shelf4": {
        "children": [
            "shelf#shelf4"
        ]
    },
    "shelf#shelf4": {
        "blocks": ["product-summary.shelf#sku"],
        "props": {
            "category": "3/10",
            "orderBy": "OrderByTopSaleDESC",
            "productList": {
                "maxItems": 10,
                "itemsPerPage": 1,
                "scroll": "BY_PAGE",
                "arrows": true,
                "titleText": "eBooks",
                "hideUnavailableItems": true,
                "paginationDotsVisibility": "hidden",
                "summary": {
                    "isOneClickBuy": false,
                    "showBadge": true,
                    "badgeText": "OFF",
                    "buyButtonText": "Buy",
                    "displayBuyButton": "displayButtonHover",
                    "showCollections": false,
                    "showListPrice": true,
                    "showLabels": false,
                    "showInstallments": true,
                    "showSavings": true,
                    "name": {
                        "showBrandName": false,
                        "showSku": false,
                        "showProductReference": false
                    }
                }
            }
        }
    }
}
```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store.home": {
    "blocks": ["flex-layout.row#banner-home", "flex-layout.row#top-shelves", "flex-layout.row#deals"]
  },

  "flex-layout.row#banner-home": {
    "props": {
        "fullWidth": true,
        "horizontalAlign": "center"
    },
    "children": [
        "image#banner-home"
    ]
},

"image#banner-home": {
    "props": {
        "src": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/bannerhome___61eea668a733cfec1868ed36b2e5954d.png",
        "alt": "Home Page Banner",
        "link": {
          "url": "lp",
          "attributeTitle": "Landing Page",
          "newTab": false
      }
    }
},

  "info-card#home": {
    "props": {
      "id": "info-card-home",
      "isFullModeStyle": false,
      "textPosition": "left",
      "imageUrl": "https://storecomponents.vteximg.com.br/arquivos/banner-infocard2.png",
      "headline": "Clearance Sale",
      "callToActionText": "DISCOVER",
      "callToActionUrl": "/sale/d",
      "blockClass": "info-card-home",
      "textAlignment": "center"
    }
  },

  "flex-layout.col#promo-banner1": {
    "props": {
      "horizontalAlign": "center"
    },
    "children": ["image#promo-banner1"]
  },

  "flex-layout.col#promo-banner2": {
    "props": {
      "horizontalAlign": "center"
    },
    "children": ["image#promo-banner2"]
  },

  "image#promo-banner1": {
    "props": {
      "src": "https://images-submarino.b2w.io/spacey/2019/10/31/2-samsung-intel-inside-Q4-odyssey-sub-home-bottom-duplo-600x230.png",
      "alt": "Promo Banner 1",
      "link": "#"
    }
  },

  "image#promo-banner2": {
    "props": {
      "src": "https://images-submarino.b2w.io/spacey/2019/10/31/2-samsung-intel-inside-Q4-odyssey-sub-home-bottom-duplo-600x230.png",
      "alt": "Promo Banner 2",
      "link": "#"
    }
  }
}

```


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

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

[Assistant]
Here's the implementation:

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


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

[User] Show me the implementation of biggy-bookstore-theme/store/blocks/footer/footer.json from the biggy-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#newsletter-footer", "flex-layout.row#main-footer"]
  },
  "flex-layout.row#newsletter-footer": {
    "props": {
      "fullWidth": true,
      "marginBottom": 6
    },
    "children": ["flex-layout.col#footer-1-desktop-1"]
  },
  "flex-layout.row#main-footer": {
    "children": ["flex-layout.col#footer-1", "flex-layout.col#footer-2"]
  },
  "flex-layout.col#footer-2": {
    "children": ["accepted-payment-methods", "flex-layout.row#footer-1-desktop"]
  },
  "flex-layout.col#footer-1": {
    "children": ["social-networks", "flex-layout.row#footer-2-desktop"]
  },
  "flex-layout.col#footer-1-desktop-1": {
    "children": ["newsletter"]
  },
  "flex-layout.col#footer-1-desktop-2": {
    "children": ["social-networks"]
  },
  "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"
        }
      ]
    }
  },
  "accepted-payment-methods": {
    "props": {
      "paymentMethods": ["MasterCard", "Visa", "Diners Club"]
    }
  },
  "flex-layout.row#footer-2-desktop": {
    "children": ["vtex.menu@2.x:menu#About"],
    "props": {
      "paddingTop": 4,
      "paddingBottom": 4
    }
  },
  "flex-layout.row#footer-1-desktop": {
    "children": ["vtex.menu@2.x:menu#About-2"],
    "props": {
      "paddingTop": 4,
      "paddingBottom": 4
    }
  },
  "flex-layout.row#footer-3-desktop": {
    "children": ["rich-text#footer"],
    "props": {
      "blockClass": "credits"
    }
  },
  "rich-text#footer": {
    "props": {
      "text": "X, todos os direitos reservados.",
      "blockClass": "footer"
    }
  },

  "footer-layout.mobile": {
    "children": [
      "newsletter",
      "flex-layout.row#1-footer-mobile",
      "flex-layout.row#2-footer-mobile",
      "flex-layout.row#3-footer-mobile"
    ]
  },
  "flex-layout.row#1-footer-mobile": {
    "children": [
      "flex-layout.col#footer-1-mobile-1",
      "flex-layout.col#footer-1-mobile-2"
    ],
    "props": {
      "paddingTop": 6,
      "paddingBottom": 4,
      "preserveLayoutOnMobile": true
    }
  },
  "flex-layout.col#footer-1-mobile-1": {
    "children": ["social-networks"]
  },
  "flex-layout.col#footer-1-mobile-2": {
    "children": ["accepted-payment-methods"],
    "props": {
      "blockClass": "payment-methods"
    }
  },
  "flex-layout.row#2-footer-mobile": {
    "props": {
      "paddingTop": 4,
      "paddingBottom": 4
    },
    "children": ["vtex.menu@2.x:menu#About"]
  },
  "flex-layout.row#3-footer-mobile": {
    "props": {
      "text": "All stock and product photos are from photos.icons8.com =)",
      "blockClass": "footer",
      "paddingTop": 4
    },
    "children": ["rich-text#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 biggy-bookstore-theme/store/blocks/footer/menu.json from the biggy-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#About": {
    "props": {
      "orientation": "vertical",
      "blockClass": "center-menu"
    },
    "children": [
      "menu-item#aboutus",
      "menu-item#contact",
      "menu-item#help",
      "menu-item#terms"
    ]
  },
  "vtex.menu@2.x:menu#About-2": {
    "props": {
      "orientation": "vertical",
      "blockClass": "center-menu"
    },
    "children": [
      "menu-item#work",
      "menu-item#store",
      "menu-item#info",
      "menu-item#clients"
    ]
  },
  "menu-item#clients": {
    "props": {
      "id": "menu-item-clients",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "clients",
        "text": "clients"
      }
    }
  },
  "menu-item#info": {
    "props": {
      "id": "menu-item-info",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Info",
        "text": "Info"
      }
    }
  },
  "menu-item#work": {
    "props": {
      "id": "menu-item-work",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Work with us",
        "text": "Work with us"
      }
    }
  },
  "menu-item#store": {
    "props": {
      "id": "menu-item-store",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Stores",
        "text": "Stores"
      }
    }
  },
  "menu-item#aboutus": {
    "props": {
      "id": "menu-item-aboutus",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "About Us",
        "text": "About Us"
      }
    }
  },
  "menu-item#contact": {
    "props": {
      "id": "menu-item-contact",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Contact Us",
        "text": "Contact Us"
      }
    }
  },
  "menu-item#help": {
    "props": {
      "id": "menu-item-help",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Help",
        "text": "Help"
      }
    }
  },
  "menu-item#terms": {
    "props": {
      "id": "menu-item-terms",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Terms and Policies",
        "text": "Terms and Policies"
      }
    }
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "header": {
    "blocks": ["header-layout.desktop", "header-layout.mobile"]
  },
  "header.full": {
    "blocks": ["header-layout.desktop", "header-layout.mobile"]
  },
  "header-layout.desktop": {
    "children": ["header-row#1-desktop", "header-row#2-desktop"]
  },
  "header-row#1-desktop": {
    "children": [
      "logo#desktop",
      "search-bar",
      "locale-switcher",
      "login",
      "minicart"
    ],
    "props": {
      "sticky": true,
      "blockClass": "main-header"
    }
  },
  "header-row#2-desktop": {
    "children": ["drawer", "vtex.menu@2.x:menu#category-menu"],
    "props": {
      "sticky": true,
      "blockClass": "secondary-header"
    }
  },
  "logo#desktop": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/bigbooks2___28c1d5ad941ed86393e60332562eca06.png",
      "width": "180"
    }
  },

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

  "header-layout.mobile": {
    "children": ["header-row#1-mobile", "header-row#2-mobile"]
  },
  "header-row#1-mobile": {
    "children": ["drawer", "logo#mobile", "minicart"],
    "props": {
      "sticky": true,
      "blockClass": "main-header-mobile"
    }
  },
  "header-row#2-mobile": {
    "children": ["search-bar"],
    "props": {
      "sticky": true,
      "blockClass": "input-header-mobile",
      "paddingTop": 0
    }
  },
  "drawer": {
    "children": ["flex-layout.row#drawer"],
    "props": {
      "blockClass": "drawer-icon"
    }
  },

  "flex-layout.row#drawer": {
    "children": [
      "flex-layout.col#drawer"
    ]
  },

  "flex-layout.col#drawer": {
    "children": [
      "rich-text#drawer-head",
      "menu#drawer"
    ]
  },

  "rich-text#drawer-head": {
    "props" : {
      "text": "Categories"
    }
  },

  "menu#drawer": {
    "children": ["menu-item#category-drawer1", "menu-item#category-drawer2", "menu-item#category-drawer3", "menu-item#category-drawer4", "menu-item#category-drawer5"],
    "props": {
      "orientation": "vertical"
    }
  },

  "menu-item#category-drawer1": {
    "props": {
      "id": "menu-item-category-decoration",
      "type": "custom",
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": true,
        "tagTitle": "History",
        "text": "History"
      }
    }
  },
  "menu-item#category-drawer2": {
    "props": {
      "id": "menu-item-category-decoration",
      "type": "custom",
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": true,
        "tagTitle": "Romance",
        "text": "Romance"
      }
    }
  },
  "menu-item#category-drawer3": {
    "props": {
      "id": "menu-item-category-decoration",
      "type": "custom",
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": true,
        "tagTitle": "Business",
        "text": "Business"
      }
    }
  },
  "menu-item#category-drawer4": {
    "props": {
      "id": "menu-item-category-decoration",
      "type": "custom",
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": true,
        "tagTitle": "Art",
        "text": "Art"
      }
    }
  },
  "menu-item#category-drawer5": {
    "props": {
      "id": "menu-item-category-decoration",
      "type": "custom",
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": true,
        "tagTitle": "Biographie",
        "text": "Biographie"
      }
    }
  },

  "logo#mobile": {
    "props": {
      "title": "Logo",
      "href": "/",
      "url": "https://bookstoretheme.vteximg.com.br/assets/vtex.file-manager-graphql/images/bigbooks3___4ca412ca4dd79337bd2f30e1fa4671e9.png",
      "width": "70"
    }
  }
}

```


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

[User] Show me the implementation of biggy-bookstore-theme/store/blocks/header/category-menu.json from the biggy-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#category-menu": {
    "children": ["menu-item#option1", "menu-item#option2", "menu-item#option3"]
  },
  "menu-item#option1": {
    "props": {
      "blockClass": "side-menu-link",
      "id": "menu-item-category-decoration",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": true,
        "tagTitle": "Today's Deals",
        "text": "Today's Deals"
      }
    }
  },
  "menu-item#option2": {
    "props": {
      "blockClass": "side-menu-link",
      "id": "menu-item-category-decoration",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": true,
        "tagTitle": "eBooks",
        "text": "eBooks"
      }
    }
  },
  "menu-item#option3": {
    "props": {
      "blockClass": "side-menu-link",
      "id": "menu-item-category-decoration",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": true,
        "tagTitle": "New Releases",
        "text": "New Releases"
      }
    }
  }
}

```


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

[User] Show me the implementation of biggy-bookstore-theme/store/blocks/header/top-menu.json from the biggy-bookstore-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "vtex.menu@2.x:menu#websites": {
    "children": [
      "menu-item#shop",
      "menu-item#about-us"
    ]
  },
  "menu-item#shop": {
    "props": {
      "id": "menu-item-shop",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "#",
        "noFollow": false,
        "tagTitle": "Shop",
        "text": "Shop"
      }
    }
  },
  "menu-item#about-us": {
    "props": {
      "id": "menu-item-about-us",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "internal",
        "href": "/about-us",
        "noFollow": false,
        "tagTitle": "about-us",
        "text": "About Us"
      }
    }
  },
  "vtex.menu@2.x:menu#institutional": {
    "children": [
      "menu-item#vtex-website"
    ]
  },
  "menu-item#vtex-website": {
    "props": {
      "id": "menu-item-vtex-website",
      "type": "custom",
      "iconId": null,
      "highlight": false,
      "itemProps": {
        "type": "external",
        "href": "http://vtex.com",
        "noFollow": false,
        "tagTitle": "visit vtex.com",
        "text": "visit vtex.com"
      }
    }
  }
}

```


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

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

[Assistant]
Here's the implementation:

```markdown
# Orders Tracking Boilerplate

## How to create a new tracking app?

1. Copy the provided `tracking-integration-boilerplate`
2. Suppose that your app name is `vtex.custom-tracking-integration`
3. Create a private endpoint that responds in the path: `/_v/tracking/config`
    * In this path you will configure what service you will use to track the packages that you receive
    * This is an example of a valid configuration:

    ```
    {
        "displayName": "Custom Tracking Integration",
        "webHookUrl": "{{vtexio-public}}/_v/vtex.custom-tracking-integration/trackPackages",
        "requiredExtraConfigs": [
            {
                "title": "myCustomField"
            }
        ]
    }
    ```

This example is saying that:
* The display name (the name that we will use to show to the user) is `My Custom Tracking`
* The webhook URL that the tracking service has to call, when a matched package arrives, is `{{vtexio-public}}/_v/vtex.my-custom-tracking/trackPackages`
    - When you use `{{vtexio-public}}` the tracking service knows how to convert it to the current `account` and `workspace` that should be used
* You new app is telling to the tracking service that it needs an extra field and that it is called `myCustomField`. This field will be presented to the users so that they can fill it in.
    - This field will be sent to your app in a dictionary with its value.

4. On your configuration route, remember to create a policy that allows the `vtex.tracking-builder` to reach it:

For instance:
```
"routes": {
    "trackingConfig": {
      "path": "/_v/tracking/config",
      "public": false,
      "policies": [{
        "effect": "allow",
        "actions": ["get"],
        "principals": [
            "vrn:apps:*:*:*:app/vtex.tracking-builder@*"
        ]
      }]
    }
  }
```

#### How is the request that my app will receive?

```
POST {configured endpoint}

{
    "account": "",
    "workspace": "",
    "appName": "",
    "config": {
        "myCustomField": "user-defined-value"
    },
    "packages" : [
        {
            "orderId": "",
            "invoiceNumber": "",
            "trackingNumber": ""
        }
    ]
}
```

#### What my app has to return?

```
[
    {
        "package": {
            "orderId": "RECEIVED-ORDER-ID",
            "invoiceNumber": "RECEIVED-INVOICE-NUMBER",
            "trackingNumber": "RECEIVED-TRACKING-NUMBER"
        },
        "trackingHistory": {
            "delivered": false | true,
            "returned": false | true,
            "stopTracking": false | true,
            "events": [
                {
                    "city": "City",
                    "state": "State",
                    "description": "Event Description",
                    "date": "2019-01-01T14:34:30.313Z"
                }
            ]
        }
    }
]
```

```


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

[User] Show me the implementation of orders-tracking/dotnet/service.json from the orders-tracking VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "stack": "dotnet",
  "memory": 256,
  "runtimeArgs": [],
  "routes": {
    "TrackingConfig": {
      "path": "/_v/tracking/config",
      "public": false,
      "policies": [{
        "effect": "allow",
        "actions": ["get"],
        "principals": [
          "vrn:apps:*:*:*:app/vtex.tracking-builder@*"
        ]
      }]
    },
    "TrackPackages": {
      "path": "/_v/your-company.tracking-integration-boilerplate/trackPackages",
      "public": true
    }
  },
  "events": {
    "onAppsLinked": {
      "sender": "apps",
      "keys": ["linked"]
    }
  }
}

```


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

[User] Show me the implementation of marketplace-financial-commission/messages/en.json from the marketplace-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/navigation.section-title": "Commission Report",
  "admin/navigation.dashboard-title": "Dashboard",
  "admin/navigation.detail-title": "Seller Invoice Detail",
  "admin/navigation.settings": "Settings"
}

```


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

[User] Show me the implementation of marketplace-financial-commission/admin/navigation.json from the marketplace-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```json
[
  {
    "adminVersion": 4,
    "section": "orders",
    "titleId": "admin/navigation.section-title",
    "subSection": "commissionReport",
    "subSectionItems": [
      {
        "labelId": "admin/navigation.dashboard-title",
        "path": "/admin/commission-report"
      },
      {
        "labelId": "admin/navigation.detail-title",
        "path": "/admin/commission-report/detail"
      },
      {
        "labelId": "admin/navigation.settings",
        "path": "/admin/commission-report/settings"
      }
    ]
  }
]

```


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

[User] Show me the implementation of marketplace-financial-commission/admin/routes.json from the marketplace-financial-commission VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin.app.dashboard": {
    "component": "commissionReport",
    "path": "/admin/app/commission-report"
  },
  "admin.app.detail": {
    "component": "commissionReportDetail",
    "path": "/admin/app/commission-report/detail/*seller"
  },
  "admin.app.settings": {
    "component": "commissionReportSettings",
    "path": "/admin/app/commission-report/settings"
  },
  "admin.app.settings-detail": {
    "component": "commissionReportSettingsDetail",
    "path": "/admin/app/commission-report/settings/detail/*sellerId"
  },
  "admin.app.invoiceDetail": {
    "component": "invoiceMarketplaceDetail",
    "path": "/admin/app/commission-report/invoice/:id"
  }
}

```