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

[User] Show me the implementation of micro/packages/micro-core/lib/package/tsconfig.ts from the micro VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { MICRO_BUILD_DIR } from '../constants'
import { lifecycle } from '../lifecycles/build'

export const BaseTSConfig = {
  compilerOptions: {
    typeRoots: [
      'lib/typings',
      'router/typings',
      'plugins/typings',
      'components/typings'
    ],
    target: 'es2019',
    module: 'commonjs',
    moduleResolution: 'node',
    outDir: `${MICRO_BUILD_DIR}/${lifecycle}/cjs`,
    jsx: 'preserve',
    strict: true,
    esModuleInterop: true,
    forceConsistentCasingInFileNames: false,
    skipLibCheck: true,
    declaration: true
  },
  include: ['index.ts', 'lib', 'router', 'plugins', 'components'],
  exclude: [MICRO_BUILD_DIR, 'pages']
}

export type TSConfig = typeof BaseTSConfig

// TODO: Maybe implement a deep merge in here with priority to BaseTSConfig
export const genTSConfig = (partial: any): TSConfig => {
  return {
    ...partial,
    ...BaseTSConfig,
    compilerOptions: {
      ...partial?.compilerOptions,
      ...BaseTSConfig.compilerOptions
    }
  }
}

```


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

[User] Show me the implementation of micro/packages/micro-core/lib/package/pnp/dfs.ts from the micro VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { PosixFS, ZipOpenFS } from '@yarnpkg/fslib'
import * as yarnLibZip from '@yarnpkg/libzip'
import assert from 'assert'
import globby from 'globby'
import { join } from 'path'
import pnp, { getPackageInformation, PackageLocator } from 'pnpapi'

import { PnpPackage } from '.'
import { PackageStructure } from '../base'
import { isManifest, Manifest } from '../manifest'

const libzip = yarnLibZip.getLibzipSync()

// This will transparently open zip archives
const zipOpenFs = new ZipOpenFS({ libzip })

// This will convert all paths into a Posix variant, required for cross-platform compatibility
const crossFs = new PosixFS(zipOpenFs)

// TODO: Does it work for packages inside .pnp.js file ?
export const requirePnp = <T>(target: string, pkg: string, issuer: string) => {
  const locator = (pnp as any).resolveRequest(pkg, issuer)
  const path = locator.replace('/index.js', `/${target}/index.js`)
  return require(path)
}

export const globPnp = async (pkg: string, issuer: string, query: string) => {
  const locator: string = (pnp as any).resolveRequest(`${pkg}/${PackageStructure.manifest}`, issuer)
  const path = locator.replace(`/${PackageStructure.manifest}`, '')
  const matches = await globby(query, { cwd: path })
  return matches.map(p => join(path, p))
}

export const readJsonPnp = async (
  pkg : PackageLocator,
  issuer: PackageLocator,
  target: keyof typeof PackageStructure
) => {
  const path = pnp.getPackageInformation(pkg).packageLocation
  // const virtualPath = pnp.resolveToUnqualified(`${pkg.name}/${PackageStructure[target]}`, issuer.name)
  assert(path, `💣 Package path can not be null: Package: ${pkg.name}, Issuer: ${issuer.name}`)
  const fullPath = join(path, PackageStructure[target])
  return crossFs.readJsonPromise(fullPath)
}

export const readManifest = async (info: PackageLocator, issuer: PackageLocator) => {
  const manifest = await readJsonPnp(info, issuer, 'manifest')
  return manifest as Pick<Manifest, 'name' | 'version' | 'dependencies' | 'peerDependencies' | 'devDependencies'>
}

const getKey = <T>(locator: T) => JSON.stringify(locator)

// DFS
export const createDepTree = async (
  pkgLocator: PackageLocator,
  manifest: Manifest,
  parentLocator: PackageLocator,
  seen: Map<string, PnpPackage>
): Promise<PnpPackage | null> => {
  const node = getKey(pkgLocator)

  // only go forward if it is a Micro package
  if (seen.has(node) || !isManifest(manifest)) {
    return seen.get(node) || null
  }

  // Set Package as seen
  const pkg = new PnpPackage()
  seen.set(node, pkg)

  // Finish instantiating the package
  const info = getPackageInformation(pkgLocator)
  pkg.issuer = parentLocator.name!
  pkg.manifest = manifest
  pkg.tsconfig = await readJsonPnp(pkgLocator, parentLocator, 'tsconfig')

  for (const [name, referencish] of info.packageDependencies) {
    const locator = referencish && (pnp as any).getLocator(name, referencish) as PackageLocator | null
    const childInfo = locator && getPackageInformation(locator)
    if (!childInfo || !locator || getKey(locator) === node) {
      continue
    }
    const childManifest = await readJsonPnp(locator, pkgLocator, 'manifest')
    const child = await createDepTree(locator, childManifest, pkgLocator, seen)
    if (child) {
      pkg.dependencies.push(child)
    }
  }

  return pkg
}

export type VisitFn = (node: PackageLocator, parent: PackageLocator | null) => Promise<void>

const walkRec = async (node: PackageLocator, parent: PackageLocator | null, visit: VisitFn, seen: Set<string>) => {
  const nodeStr = getKey(node)

  if (seen.has(nodeStr)) {
    return
  }

  const info = getPackageInformation(node)
  if (!info) {
    return
  }

  seen.add(nodeStr)
  await visit(node, parent)

  for (const [name, referencish] of info.packageDependencies) {
    const locator = referencish && (pnp as any).getLocator(name, referencish) as PackageLocator | null
    if (!locator) {
      continue
    }
    await walkRec(locator, node, visit, seen)
  }
}

export const walk = (root: PackageLocator, visit: VisitFn) =>
  walkRec(root, null, visit, new Set())

```


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

[User] Show me the implementation of micro/packages/micro-core/lib/package/pnp/common.ts from the micro VTEX app.

[Assistant]
Here's the implementation:

```typescript
import pnp from 'pnpapi'

export const getLocatorFromPackageInWorkspace = (name: string) => {
  const locators = (pnp as any).getDependencyTreeRoots() // TODO: improve typings
  return locators.find((l: any) => l.name === name)
}

```


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

[User] Show me the implementation of micro/packages/micro-core/lib/package/pnp/index.ts from the micro VTEX app.

[Assistant]
Here's the implementation:

```typescript
import assert from 'assert'
import { readJSON } from 'fs-extra'
import { join } from 'path'

import { LifeCycle } from '../../project'
import { Router, Serializable } from '../../router'
import { Package, PackageRootEntries, Plugins } from '../base'
import { isManifest } from '../manifest'
import { getLocatorFromPackageInWorkspace } from './common'
import { globPnp, requirePnp, createDepTree } from './dfs'

export class PnpPackage extends Package {
  public issuer: string = ''

  // TODO: Make it resolve based on major and not only on the package name
  public resolve = async (projectRoot: string) => {
    const manifestPath = join(projectRoot, this.structure.manifest)
    const manifest = await readJSON(manifestPath)
    assert(isManifest(manifest), '💣 Root manifest needs to be a valid Micro Project')
    const root = getLocatorFromPackageInWorkspace(manifest.name)
    assert(root, '💣 Could not find this package in this workspace')
    const resolved = await createDepTree(root, manifest, root, new Map())
    assert(resolved, '💣 Dependency tree traversal must return a package')
    this.dependencies = resolved.dependencies
    this.manifest = resolved.manifest
    this.issuer = this.manifest.name
    this.tsconfig = resolved.tsconfig
  }

  public hydrate = (projectRoot: string) => {
    throw new Error(`💣 not implemented: ${projectRoot}`)
  }

  public persist = (projectRoot: string) => {
    throw new Error(`💣 not implemented: ${projectRoot}`)
  }

  public getPlugin = async (target: LifeCycle) => {
    try {
      const { default: plugins } = requirePnp<{ default: Plugins }>(`plugins/${target}`, this.manifest.name, this.issuer)
      return plugins
    } catch (err) {
      return null
    }
  }

  public getRouter = async <T extends Serializable>() => {
    const { default: router } = requirePnp<{ default: Router<T> }>('router', this.manifest.name, this.issuer)
    return router
  }

  public getFiles = async (...targets: PackageRootEntries[]) =>
    globPnp(this.manifest.name, this.issuer, this.getGlobby(...targets))
}

```


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

[User] Show me the implementation of micro/packages/micro-assets/plugins/bundle/index.ts from the micro VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { BundlePlugin } from '@vtex/micro-core'
import { Block, Context, file, group, match } from 'webpack-blocks'

export default class Bundle extends BundlePlugin {
  public getConfig = async (config: Block<Context>): Promise<Block<Context>> => {
    const block: Block<Context>[] = [
      match(['*.png', '*.svg', '*.jpg', '*.gif', '*.ico'], [
        file({
          name: '[name].[ext]'
        })
      ])
    ]

    return group([
      config,
      ...block
    ])
  }
}

```


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

[User] Show me the implementation of micro/packages/micro-react-router/plugins/aliases.ts from the micro VTEX app.

[Assistant]
Here's the implementation:

```typescript
// This plugin will enforce the following modules. This means
// projects using this package as a plugin will use this package's
// versions of the following packages
export const aliases = [
  'history',
  'react-router-dom',
  'react-in-viewport'
]

```


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

[User] Show me the implementation of micro/packages/micro-react-router/components/Link.tsx from the micro VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useContext, useEffect, useRef } from 'react'
import { useInViewport } from 'react-in-viewport'
import {
  Link as ReactRouterLink,
  LinkProps,
  useLocation
} from 'react-router-dom'

import { MicroRouterContext } from './Router/Router'
import { onMobileDevice } from './utils/env'
import { locationFromProps } from './utils/location'

type Props = LinkProps & {
  prefetch?: boolean
}

const noop = () => {}

export const Link: React.SFC<Props> = ({ children, to, prefetch = false, ...rest }) => {
  const router = useContext(MicroRouterContext)
  const currentLocation = useLocation()

  let fetched = false
  const prefetchPage = (condition: boolean) => () => {
    if (!fetched && condition) {
      fetched = true
      router.prefetchPage(locationFromProps(to as any, currentLocation))
    }
  }
  const preloadPage = () => {
    if (!fetched) {
      fetched = true
      router.preloadPage(locationFromProps(to as any, currentLocation))
    }
  }

  const node = useRef(null)
  useInViewport(node, null, { disconnectOnLeave: true }, {
    onEnterViewport: prefetchPage(onMobileDevice),
    onLeaveViewport: noop
  })

  useEffect(prefetchPage(prefetch), [currentLocation, prefetch])

  return (
    <ReactRouterLink
      ref={node}
      to={to}
      // We preload the page in here becase it seems like the user is about to navigate
      onMouseEnter={preloadPage}
      {...rest}
    >
      { children }
    </ReactRouterLink>
  )
}

```


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

[User] Show me the implementation of micro/packages/micro-react-router/components/NavLink.tsx from the micro VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useContext, useEffect, useRef } from 'react'
import { NavLink as ReactRouterNavLink, NavLinkProps, useLocation } from 'react-router-dom'
import { useInViewport } from 'react-in-viewport'

import { locationFromProps } from './utils/location'
import { MicroRouterContext } from './Router/Router'
import { onMobileDevice } from './utils/env'

type Props = NavLinkProps & {
  prefetch?: boolean
}

const noop = () => {}

export const NavLink: React.SFC<Props> = ({ children, to, prefetch = false, ...rest }) => {
  const router = useContext(MicroRouterContext)
  const currentLocation = useLocation()

  let fetched = false
  const prefetchPage = (condition: boolean) => () => {
    if (!fetched && condition) {
      fetched = true
      router.prefetchPage(locationFromProps(to as any, currentLocation))
    }
  }
  const preloadPage = () => {
    if (!fetched) {
      fetched = true
      router.preloadPage(locationFromProps(to as any, currentLocation))
    }
  }

  const node = useRef(null)
  useInViewport(node, null, { disconnectOnLeave: true }, {
    onEnterViewport: prefetchPage(onMobileDevice),
    onLeaveViewport: noop
  })

  useEffect(prefetchPage(prefetch), [currentLocation, prefetch])

  return (
    <ReactRouterNavLink
      ref={node}
      to={to}
      // We preload the page in here becase it seems like the user is about to navigate
      onMouseEnter={preloadPage}
      {...rest}
    >
      { children }
    </ReactRouterNavLink>
  )
}

```


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

[User] Show me the implementation of micro/packages/micro-react-router/components/index.ts from the micro VTEX app.

[Assistant]
Here's the implementation:

```typescript
export * from './Router/Router'
export * from './Link'
export * from './NavLink'
export * from './Page'

```


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

[User] Show me the implementation of micro/packages/micro-react-router/components/Page.tsx from the micro VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable @typescript-eslint/no-unused-vars */
import { ResolvedPage, Serializable } from '@vtex/micro-core'
import React, { Fragment, useContext } from 'react'
import { useLocation } from 'react-router-dom'

import { MicroRouterContext } from './Router/Router'

export interface Page<T extends Serializable = any> {
  name: string
  path: string
  data: T
}

export type RouterResolvedEntry<T> = {
  path: string
  data: T
}

export const unpack = <T extends Serializable>(packed: Page<T>) => packed.data

export const pack = <T extends Serializable>(resolved: ResolvedPage<T>, path: string): ResolvedPage<Page<T>> => ({
  ...resolved,
  data: {
    data: resolved.data,
    name: resolved.name,
    path
  }
})

export const isPage = (obj: any): obj is Page =>
  typeof obj.name === 'string' &&
  typeof obj.path === 'string'

export const FetchCurrentPage: React.SFC = ({ children }) => {
  const router = useContext(MicroRouterContext)
  const location = useLocation()

  React.useEffect(
    () => { router.preloadPage(location) },
    [location]
  )

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

```


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

[User] Show me the implementation of micro/packages/micro-react-router/plugins/bundle/index.ts from the micro VTEX app.

[Assistant]
Here's the implementation:

```typescript
import {
  BundlePlugin,
  pagesFrameworkName,
  pagesRuntimeName
} from '@vtex/micro-core'
import { cacheGroup } from '@vtex/micro-react'
import { Block, Context, group, resolve } from 'webpack-blocks'

import { aliases } from '../aliases'

export default class Bundle extends BundlePlugin {
  public getConfig = async (config: Block<Context>): Promise<Block<Context>> => {
    return group([
      config,
      resolve({
        alias: aliases.reduce(
          (acc, packageName) => {
            acc[packageName] = require.resolve(packageName)
            return acc
          },
          {} as Record<string, string>
        )
      }),
      cacheGroup(pagesRuntimeName, /\/react-in-viewport\/|\/react-router\/|\/react-router-dom\//),
      cacheGroup(pagesFrameworkName, /\/micro-react-router\//)
    ])
  }
}

```


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

[User] Show me the implementation of micro/packages/micro-react-router/plugins/serve/index.ts from the micro VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { ServePlugin } from '@vtex/micro-core'
import { createElement } from 'react'
import { StaticRouter } from 'react-router-dom'

export default class Serve extends ServePlugin<JSX.Element> {
  public render = (children: JSX.Element | null): JSX.Element => {
    const location = this.options.path
    return createElement(StaticRouter, { location, children } as any)
  }
}

```


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

[User] Show me the implementation of micro/packages/micro-react-router/components/utils/location.ts from the micro VTEX app.

[Assistant]
Here's the implementation:

```typescript
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { createLocation, Location, LocationDescriptorObject } from 'history'
import ReactRouter from 'react-router-dom'

// Code Copied from https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/modules/utils/locationUtils.js
const resolveToLocation = (to: ReactRouter.LinkProps['to'], currentLocation: Location) =>
  typeof to === 'function' ? to(currentLocation) : to

const normalizeToLocation = (to: string | LocationDescriptorObject, currentLocation: Location): LocationDescriptorObject => {
  return typeof to === 'string'
    ? createLocation(to, null, undefined, currentLocation)
    : to
}

export const locationFromProps = (to: ReactRouter.LinkProps['to'], currentLocation: Location): LocationDescriptorObject => normalizeToLocation(
  resolveToLocation(to, currentLocation),
  currentLocation
)

```


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

[User] Show me the implementation of micro/packages/micro-react-router/components/utils/env.ts from the micro VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { canUseDOM } from '@vtex/micro-react'

// Script grabbed from http://detectmobilebrowser.com/mobile

const isMobile = () => {
  const descriptor = navigator.userAgent || navigator.vendor || (window as any).opera
  const firstRandomTest = /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(descriptor)
  const secondRandomTest = /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk\/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(descriptor.substr(0, 4))
  return firstRandomTest || secondRandomTest
}

export const onMobileDevice = canUseDOM && isMobile()

```


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

[User] Show me the implementation of micro/packages/micro-react-router/components/Router/Router.tsx from the micro VTEX app.

[Assistant]
Here's the implementation:

```tsx
import loadable from '@loadable/component'
import { canUseDOM } from '@vtex/micro-react'
import { LocationDescriptorObject } from 'history'
import React from 'react'
import { BrowserRouter } from 'react-router-dom'

import { Page } from '../Page'
import { RouterDOM } from './DynamicRouterDOM'
import { RouterSSR } from './RouterSSR'

export interface PageProps {
  data: any
}

export interface AsyncPageProps extends PageProps {
  name: string
}

export interface RouterProps {
  data: Page
  error: any
}

type AsyncImport = (x: { name: string}) => Promise<any>

export interface RouterStateModifier {
  // Prefetching should have lower priority than a preload. Also, you should be
  // carefull about preloading too mutch
  prefetchPage: (location: LocationDescriptorObject) => Promise<void>
  // Preload means the user needs this page right now. Use it only when you are
  // almost sure the user will navigate to this page
  preloadPage: (location: LocationDescriptorObject) => Promise<void>
}

export const MicroRouterContext = React.createContext<RouterStateModifier>({} as any)
MicroRouterContext.displayName = 'MicroRouterContext'

export const withRouter = (
  InitialPage: React.ElementType<PageProps>,
  AsyncImport: AsyncImport
): React.SFC<RouterProps> => {
  const AsyncPage = loadable<AsyncPageProps>(AsyncImport, {
    cacheKey: ({ name }) => name,
    ssr: false
  })

  return function MicroReactRouter ({ data, error }) {
    if (!canUseDOM) {
      return <RouterSSR data={data} error={error} InitialPage={InitialPage} />
    }

    // We could implement an static router in here as well
    return (
      <BrowserRouter>
        <RouterDOM
          data={data}
          error={error}
          InitialPage={InitialPage}
          AsyncPage={AsyncPage}
        />
      </BrowserRouter>
    )
  }
}

```


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

[User] Show me the implementation of micro/packages/micro-react-router/components/Router/RouterSSR.tsx from the micro VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

import { unpack } from '../Page'
import {
  MicroRouterContext,
  PageProps,
  RouterProps,
  RouterStateModifier
} from './Router'

interface RouterSSRProps extends RouterProps {
  InitialPage: React.ElementType<PageProps>
}

export class RouterSSR extends React.Component<RouterSSRProps, RouterStateModifier> {
  constructor (props: RouterSSRProps) {
    super(props)
    this.state = {
      prefetchPage: () => { throw new Error('💣 Cannot prefetch page in SSR') },
      preloadPage: () => { throw new Error('💣 Cannot fetch page in SSR') }
    }
  }

  public render = () => {
    const { InitialPage } = this.props
    return (
      <MicroRouterContext.Provider value={this.state}>
        <InitialPage data={unpack(this.props.data)} />
      </MicroRouterContext.Provider>
    )
  }
}

```


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

[User] Show me the implementation of micro/packages/micro-react-router/components/Router/DynamicRouterDOM.tsx from the micro VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { LoadableComponent } from '@loadable/component'
import { RuntimeData, Runtime, join, inflight } from '@vtex/micro-react'
import { LocationDescriptorObject } from 'history'
import React from 'react'
import { matchPath, Route, useLocation } from 'react-router-dom'

import { FetchCurrentPage, isPage, Page } from '../Page'
import {
  AsyncPageProps,
  MicroRouterContext,
  PageProps,
  RouterProps,
  RouterStateModifier
} from './Router'

interface RouterState extends RouterStateModifier {
  assets: Set<string>
  // null if page was loaded with error, Page sucessfully, undefined if not prefetched
  pages: Map<string, Page>
}

interface RouterDOMProps extends RouterProps {
  runtime: RuntimeData // root paths to prefetch
  location: LocationDescriptorObject // window location
  InitialPage: React.ElementType<PageProps> // Page that was SSR
  AsyncPage: LoadableComponent<AsyncPageProps> // Async Page loader
}

class PrivateRouterDOM extends React.Component<RouterDOMProps, RouterState> {
  constructor (props: RouterDOMProps) {
    super(props)
    this.state = {
      prefetchPage: this.prefetchPage,
      preloadPage: this.preloadPage,
      pages: new Map(),
      assets: new Set()
    }
  }

  public prefetchPage = async (location: LocationDescriptorObject) => {
    const isInitialPage = location.pathname === this.props.data.path
    if (location.pathname && !isInitialPage) {
      if (!this.state.pages.has(location.pathname)) {
        return this.loadPage(location)
      }
    }
  }

  public preloadPage = async (location: LocationDescriptorObject) => {
    const isInitialPage = location.pathname === this.props.data.path
    if (location.pathname && !isInitialPage) {
      if (!this.state.pages.has(location.pathname)) {
        return this.loadPage(location)
      }
    }
  }

  public loadAsset = async (page: Page) => {
    const alreadyLoaded = this.state.assets.has(page.name)
    const isInitialPage = page.name === this.props.data.name
    if (alreadyLoaded || isInitialPage) {
      return
    }
    await inflight(page.name, async () => new Promise(resolve => {
      this.setState(state => {
        this.props.AsyncPage.preload(page)
        state.assets.add(page.name)
        resolve()
        return state
      })
    }))
  }

  protected async loadPage (location: LocationDescriptorObject): Promise<any> {
    const path = this.locationToPath(location) || ''
    return inflight(path, async () => {
      const page = await fetch(path).then(r => r.json())
      if (isPage(page)) {
        this.updatePages(page.path, page)
        this.loadAsset(page)
      } else {
        throw new Error(`💣 Fetched location was not a valid page: ${location.pathname}`)
      }
    })
  }

  protected updatePages = (path: string, page: Page) => this.setState(state => {
    state.pages.set(path, page)
    return state
  })

  protected locationToPath = (location: LocationDescriptorObject) => {
    if (typeof location.pathname !== 'string') {
      throw new Error('💣 You need a pathname for fecthing a page')
    }
    return join(this.props.runtime.publicPaths.data, location.pathname)
  }

  public render = () => {
    const { data, InitialPage, AsyncPage, location } = this.props
    const { pages } = this.state

    const isInitialPage = matchPath(location.pathname || '', { ...data, exact: true, strict: false })

    if (isInitialPage) {
      return (
        <MicroRouterContext.Provider value={this.state}>
          <Route path={location.pathname}>
            <InitialPage data={data.data} />
          </Route>
        </MicroRouterContext.Provider>
      )
    }

    // Iterate over the pages map and find a match
    // I think we could improve this algorithm, but YoLo
    let matched: Page<any> | null = null
    for (const [, page] of pages) {
      const m = matchPath(location.pathname || '', { ...page, exact: true, strict: false })
      if (m) {
        matched = page
        break
      }
    }

    if (!matched) {
      return (
        <MicroRouterContext.Provider value={this.state}>
          <Route path={location.pathname}>
            <FetchCurrentPage />
          </Route>
        </MicroRouterContext.Provider>
      )
    }

    return (
      <MicroRouterContext.Provider value={this.state}>
        <Route path={location.pathname}>
          <AsyncPage data={matched.data} name={matched.name} />
        </Route>
      </MicroRouterContext.Provider>
    )
  }
}

type InjectionProps = Omit<RouterDOMProps, 'runtime' | 'location'>

// PrivateRouterDOM required location and runtime. Since this is the
// only I know how to inject runtime and location to it, I've created
// this simple component
export const RouterDOM: React.SFC<InjectionProps> = ({
  data,
  error,
  InitialPage,
  AsyncPage
}) => {
  const location = useLocation()
  const runtime = React.useContext(Runtime)

  return (
    <PrivateRouterDOM
      runtime={runtime}
      location={location}
      data={data}
      error={error}
      InitialPage={InitialPage}
      AsyncPage={AsyncPage}
    />
  )
}

```


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

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

[Assistant]
Here's the implementation:

```markdown
# Store theme
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->
Our boilerplate theme to create stores in the VTEX IO platform.

## Preview
![store-theme-default](https://user-images.githubusercontent.com/1354492/63937047-e8d81c80-ca37-11e9-86fc-61e88847bbfb.png)

## Tutorial
To understand how things work check our tutorial [Build a store using VTEX IO](https://vtex.io/docs/getting-started/build-stores-with-store-framework/1/)

## Dependencies
All store components that you see on this document are open source too. Production ready, you can found those apps in this GitHub organization.

Store framework is the baseline to create any store using _VTEX IO Web Framework_.
- [Store](https://github.com/vtex-apps/store/blob/master/README.md)

Store GraphQL is a middleware to access all VTEX APIs.
- [Store GraphQL](https://github.com/vtex-apps/store-graphql/blob/master/docs/README.md)

### Store Component Apps
- [Header](https://github.com/vtex-apps/store-header/blob/master/docs/README.md)
- [Footer](https://github.com/vtex-apps/store-footer/blob/master/docs/README.md)
- [Slider Layout](https://github.com/vtex-apps/slider-layout/blob/master/docs/README.md)
- [Shelf](https://github.com/vtex-apps/shelf/blob/master/docs/README.md)
- [Telemarketing](https://github.com/vtex-apps/telemarketing/blob/master/docs/README.md)
- [Menu](https://github.com/vtex-apps/menu/blob/master/docs/README.md)
- [Login](https://github.com/vtex-apps/login/blob/master/docs/README.md)
- [Minicart](https://github.com/vtex-apps/minicart/blob/master/docs/README.md)
- [Category Menu](https://github.com/vtex-apps/category-menu/blob/master/docs/README.md)
- [Product Summary](https://github.com/vtex-apps/product-summary/blob/master/docs/README.md)
- [Breadcrumb](https://github.com/vtex-apps/breadcrumb/blob/master/docs/README.md)
- [Search Result](https://github.com/vtex-apps/search-result/blob/master/docs/README.md)
- [Product Details](https://github.com/vtex-apps/product-details/blob/master/docs/README.md)
- [Store Components](https://github.com/vtex-apps/store-components/blob/master/docs/README.md)
- [Order Placed](https://github.com/vtex-apps/order-placed/blob/master/docs/README.md)

### Store Pixel Apps

 - [Facebook Pixel](https://github.com/vtex-apps/facebook-pixel/blob/master/docs/README.md)
 - [Google Tag Manager](https://github.com/vtex-apps/google-tag-manager/blob/master/docs/README.md)

## Contributing

Check it out [how to contribute](https://github.com/vtex-apps/awesome-io#contributing) with this project.

## Contributors ✨

Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<table>
  <tr>
    <td align="center"><a href="http://www.hugoccosta.com"><img src="https://avatars2.githubusercontent.com/u/20212776?v=4" width="100px;" alt=""/><br /><sub><b>Hugo Costa</b></sub></a><br /><a href="https://github.com/vtex-apps/store-theme/commits?author=hugocostadev" title="Documentation">📖</a></td>
  </tr>
</table>

<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

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

```


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

[User] Show me the implementation of affirm-qa-theme/docs/contact-schema.json from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "title": "Contact",
  "type": "object",
  "properties": {
    "title": {
      "type": "string",
      "title": "Title"
    },
    "name": {
      "type": "string",
      "title": "Name"
    },
    "email": {
      "type": "string",
      "format": "email",
      "title": "Email address"
    },
    "message": {
      "type": "string",
      "title": "Message"
    }
  },
  "required": ["email", "message"],
  "v-security": {
    "publicJsonSchema": 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 affirm-qa-theme/store/blocks.jsonc from the affirm-qa-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
    }
  },

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

  "store.not-found#product": {
    "blocks": ["rich-text#not-found"]
  },

  "store.not-found#search": {
    "blocks": ["rich-text#not-found"]
  },

  "rich-text#not-found": {
    "props": {
      "textAlignment": "CENTER",
      "textPosition": "CENTER",
      "text": "**PAGE NOT FOUND**",
      "font": "t-heading-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 affirm-qa-theme/store/routes.json from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#about-us": {
    "path": "/about-us"
  },
  "store.custom#faq": {
    "path": "/faq"
  },
  "store.custom#contact-us": {
    "path": "/contact-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 affirm-qa-theme/styles/css/vtex.store-video.css from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.videoContainer {
  width: 100%;
  height: 300px;
  margin-top: 2%;
}

@media only screen and (min-width: 640px) {
  .videoContainer {
    height: 700px;
  }
}

```


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

[User] Show me the implementation of affirm-qa-theme/styles/css/vtex.product-price.css from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.listPrice {
  color: #727273;
  margin-bottom: .25rem;
  font-size: 1rem;
}

.sellingPrice {
  color: #3f3f40;
  font-size: 1.25rem;
}

.sellingPriceValue {
  font-size: 2.25rem;
  font-weight: 700;
}

.installments {
  color: #727273;
  margin-bottom: 1rem;
}

.savings {
  font-weight: 500;
  color: #79B03A;
}

.sellingPriceValue--summary {
  font-size: 1.25rem;
  font-weight: 600;
  color: #2E2E2E;
}

.savings--summary {
  background: #8BC34A;
  border-radius: 1000px;
  align-items: center;
  display: flex;

  padding-left: 0.5rem;
  padding-right: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  vertical-align: baseline;
  color: #FFFFFF;
}

.savings-discount--summary {
  font-size: 0.875rem;
  font-weight: 600;
  vertical-align: baseline;
  color: #FFFFFF;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.listPrice--summary {
  margin-bottom: 0.25rem;
  font-size: .875rem;
}

.installments--summary {
  margin-bottom: 2rem;
  font-size: 0.875rem;
}

.savings--summaryPercentage {
  background: #0f3e99;
  border-radius: 1000px;
  align-items: center;
  display: flex;
}

.savingsPercentage--summaryPercentage {
  font-size: 0.875rem;
  font-weight: 600;
  vertical-align: baseline;
  color: #FFFFFF;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
}

```


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

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

[Assistant]
Here's the implementation:

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

.container--shelfTitle {
  color: #727273;
  justify-content: center;
  text-align: center;
}

.headingLevel2--shelfTitle {
  font-weight: 200;
}

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

[Assistant]
Here's the implementation:

```css
.skuSelectorContainer--quickview .skuSelectorItemImage .frameAround, .skuSelectorContainer--quickview .skuSelectorItemImage .skuSelectorInternalBox {
  border-radius: 50%;
}

.container :global(.vtex-modal-layout-0-x-triggerContainer) {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

.container:hover :global(.vtex-modal-layout-0-x-triggerContainer) {
  opacity: 1;
}

@media screen and (max-width: 40em) {
  .container :global(.vtex-modal-layout-0-x-triggerContainer) {
    display: none;
  }
}

.nameContainer {
  justify-content: start;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.brandName {
  font-weight: 600;
  font-size: 18px;
  color: #2E2E2E;
}

.container {
  text-align: start;
}

.imageContainer {
  text-align: center;
}

.image {
  border-radius: 0.25rem;
}

```


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

[User] Show me the implementation of affirm-qa-theme/styles/css/vtex.modal-layout.css from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
@media screen and (min-width: 40em) {
  .paper--quickview {
    height: 260px;
    width: 580px;
  }

  .actionsContainer--quickview {
    padding: 0 2rem 2rem 2rem;
  }
}

@media screen and (min-width: 50em) {
  .paper--quickview {
    height: 450px;
    width: 900px;
  }
}

@media screen and (min-width: 75em) {
  .paper--quickview {
    width: calc(100% - 4rem);
    height: auto;
  }
}

@media screen and (min-width: 82em) {
  .actionsContainer--quickview {
    padding: 0 2.5rem 2.5rem 2.5rem;
  }
}

.paper--quickview {
  min-width: 320px;
  max-width: 96rem;
}

.headerContainer--quickview {
  border: none;
  position: absolute;
  right: 0;
}

.actionsContainer--quickview {
  height: 100%;
  width: 100%;
  transition: box-shadow 150ms ease-in-out, border-top 150ms ease-in-out;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: transparent;
  box-shadow: -4px 0px 27px -12px transparent;
}

.actionsContentWrapper {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #aaa;
  padding-top: 1.5rem;
}

.contentContainer--quickviewContent {
  padding: 2.5rem 0 2.5rem 2rem;
  overflow-x: hidden;
}

.triggerContainer--quickview {
  padding: .75rem;
}

.triggerContainer {
  outline: none;
}

.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) {
  border-top-color: rgb(238, 238, 238);
  box-shadow: -4px 0px 27px -12px rgba(0,0,0,0.64);
}

.actionsContainer--quickview:not(.actionsContainerEndOfContent--quickview) .actionsContentWrapper {
  border-top-color: transparent;
}

.closeButton {
  padding-right: 1rem;
}

.paper--product-gifts {
  padding: 1.5rem;
}

```


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

[User] Show me the implementation of affirm-qa-theme/styles/css/vtex.store-header.css from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
/* add transitions */
:global(.vtex-sticky-layout-0-x-container)
  :global(.vtex-store-components-3-x-logoLink),
:global(.vtex-sticky-layout-0-x-container)
  :global(.vtex-minicart-2-x-openIconContainer),
:global(.vtex-sticky-layout-0-x-container)
  :global(.vtex-store-components-3-x-searchBarContainer) {
  transition: all 0.3s ease;
  display: block;
}

/* desktop/mobile main header padding and background transitions */
:global(.vtex-flex-layout-0-x-flexRowContent--main-header),
:global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
  transition: background 0.3s ease;
  will-change: padding, background;
}

/* main header desktop has a bigger padding when not stuck */
:global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* add a box-shadow to desktop/mobile header when stuck */
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
  :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
  :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
}

/*
 * remove the extra padding when stuck from the desktop header
 * we add a transition only when "stuck" for the "unstick" step seem faster
 */
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
  :global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
  transition: padding 0.3s ease, background 0.3s ease;
  padding-top: 0;
  padding-bottom: 0;
}

/* if supported add some translucency to the desktop/mobile header background */
@supports (backdrop-filter: blur(5px)) {
  :global(.vtex-sticky-layout-0-x-wrapper--stuck)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
  :global(.vtex-sticky-layout-0-x-wrapper--stuck)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
    backdrop-filter: blur(8px);
  }

  /* header background when stuck and not hovered */
  :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header),
  :global(.vtex-sticky-layout-0-x-wrapper--stuck):not(:hover)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header-mobile) {
    background: rgba(240, 240, 240, 0.8);
  }
}

/* stick wrapper with the same color as the desktop/mobile header */
:global(.vtex-sticky-layout-0-x-wrapper--sticky-header) {
  background-color: #f0f0f0;
}

/* resize the logo for neat effect */
:global(.vtex-sticky-layout-0-x-wrapper--stuck)
  :global(.vtex-store-components-3-x-logoLink) {
  transform: scale(0.85);
}

@media (prefers-reduced-motion: reduce) {
  :global(.vtex-sticky-layout-0-x-container)
    :global(.vtex-store-components-3-x-logoLink),
  :global(.vtex-sticky-layout-0-x-container)
    :global(.vtex-minicart-2-x-openIconContainer),
  :global(.vtex-sticky-layout-0-x-container)
    :global(.vtex-store-components-3-x-searchBarContainer),
  :global(.vtex-sticky-layout-0-x-wrapper--stuck)
    :global(.vtex-flex-layout-0-x-flexRowContent--main-header) {
    transition: none;
  }
}

```


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

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

[Assistant]
Here's the implementation:

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

.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;
  display: flex;
  color: #fff;
}

.inputGroup :global(.vtex-styleguide-9-x-hideDecorators) {
  background-color: transparent;
  color: #fff;
  border: none;
}

.inputGroup :global(.vtex-styleguide-9-x-hideDecorators)::placeholder {
  color: #fff;
  font-size: 16px;
}

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

.buttonContainer {
  padding-top: 0px;
}

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

.skuSelectorContainer {
  margin: 1rem 0;
}

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

.productImagesContainer--quickview .carouselContainer {
  justify-content: flex-start;
}

.productImagesContainer--quickview .productImageTag {
  object-fit: cover !important;
}

.productImagesContainer--quickview .carouselGaleryThumbs {
  display: none;
}

.productImagesContainer--quickview .carouselGaleryCursor {
  margin: 0;
  padding: 0;
  width: 100%;
}

.productNameContainer {
  color: #3f3f40;
  font-weight: bold;
  font-size: 30px;
}

.image {
  image-rendering: -webkit-optimize-contrast;
}

```


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

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

```


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

[User] Show me the implementation of affirm-qa-theme/styles/css/vtex.product-identifier.css from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.product-identifier--productReference {
  margin-bottom: 1rem;
}

```


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

[User] Show me the implementation of affirm-qa-theme/styles/css/vtex.reviews-and-ratings.css from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.container {
  max-width: 96rem;
  padding-left: .5rem;
  padding-right: .5rem;
}

.inlineContainer {
  margin-left: 0rem;
}

.star--filled {
  color: #FFB100;
}

.star--empty {
  color: #FFB100;
}

```


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

[User] Show me the implementation of affirm-qa-theme/styles/css/vtex.product-highlights.css from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.productHighlightWrapper--collection {
  position: absolute;
  top: 10px;
  left: 5px;
  width: 200px;
}

.productHighlightText {
  background: antiquewhite;
  border-radius: 20px;
  padding: 5px 10px;
}

```


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

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

[Assistant]
Here's the implementation:

```css
.flexRowContent--menu-link,
.flexRowContent--main-header {
  padding: 0 0.5rem;
}

@media screen and (min-width: 40em) {
  .flexRowContent--menu-link,
  .flexRowContent--main-header {
    padding: 0 1rem;
  }
}

@media screen and (min-width: 80rem) {
  .flexRowContent--menu-link,
  .flexRowContent--main-header {
    padding: 0 0.25rem;
  }
}

.flexRowContent--menu-link {
  background-color: #03044e;
  color: #fff;
}

.flexRowContent--main-header {
  background-color: #f0f0f0;
}

.flexRowContent--main-header-mobile {
  align-items: center;
  padding: 0.625rem 0.5rem;
  background-color: #f0f0f0;
}

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

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

.flexRow--deals {
  background-color: #0F3E99;
  padding: 14px 0px;
}

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

.flexRow--deals .flexCol {
  align-items: center;
  margin-bottom: 5px;
  padding-top: 5px;
}

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

.flexRow--quickviewMainRow {
  display: flex;
  max-height: 100%;
}

.flexColChild--quickviewDetails:first-child {
  overflow-y: auto;
  height: 66% !important;
  overflow-x: hidden;
}

.flexColChild--quickviewDetails:last-child {
  height: 34% !important;
}

.flexRow--addToCartRow {
  padding-bottom: 1rem;
}

```


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

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

[Assistant]
Here's the implementation:

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

.containerImg .img {
  max-width: 100%;
}

```


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

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

[Assistant]
Here's the implementation:

```css
.galleryLayoutOptionButton {
  background-color: #F0F0F0;
  color: #3F3F40;
  padding: 0.375rem 0.75rem 0.375rem 0.75rem;
}

.galleryLayoutOptionButton--selected {
  background-color: #3F3F40;
  color: #FFFFFF;
}

.galleryLayoutSwitcher {
  border-radius: 4px 4px 4px 4px;
  justify-content: center;
  overflow: hidden;
  width: auto !important;
  align-self: center
}

.galleryItem--list {
  border-bottom: 1px #E7E9EE solid;
}

```


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

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

[Assistant]
Here's the implementation:

```css
.sliderLayoutContainer {
  justify-content: center;
}

.sliderLayoutContainer--carousel {
  background-color: #F0F0F0;
  min-height: 450px;
}

.sliderTrackContainer {
  max-width: 100%;
}

.paginationDotsContainer {
  margin-top: .5rem;
  margin-bottom: .5rem;
}

.layoutContainer--shelf {
  margin-top: 20px;
  margin-bottom: 20px;
  max-width: 96rem;
  min-height: 550px;
}

.slide--shelf {
  margin-bottom: 25px;
  padding-left: .5rem;
  padding-right: .5rem;
  min-height: 550px;
}

```


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

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

[Assistant]
Here's the implementation:

```css
.stackItem--product {
  width: 100%;
  min-height: 257px
}

.stackItem--quickview {
  right: 0;
  top: 0;
  left: auto;
}

```


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

[User] Show me the implementation of affirm-qa-theme/styles/configs/style.json from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

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

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

```


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

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

[Assistant]
Here's the implementation:

```css
.flexRowContent--contact {
  max-width: 700px;
  margin: auto;
}

.flexRowContent--contact :global(.vtex-input__label),
.flexRowContent--contact :global(.vtex-textarea__label) {
  font-size: 1rem;
  color: #3f3f40;
}

.flexRowContent--contact :global(.vtex-input),
.flexRowContent--contact :global(.vtex-textarea) {
  display: block;
  margin-bottom: 1rem;
}

```


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

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

[Assistant]
Here's the implementation:

```css
.flexRowContent--faq {
  max-width: 700px;
  margin: auto;
}

```


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

[User] Show me the implementation of affirm-qa-theme/styles/css/faq/vtex.disclosure-layout.css from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.trigger--question {
  display: flex;
  align-items: center;
  cursor: pointer;
  outline: none;
}

.trigger--question :global(.vtex-rich-text-0-x-paragraph) {
  font-weight: bold;
}

.trigger--question:focus,
.trigger--question:focus :global(.vtex-rich-text-0-x-paragraph) {
  color: #0F3E99;
}

.trigger :global(.vtex-store-icons-0-x-caretIcon) {
  margin-right: 1rem;
}

.content--answer {
  transition: opacity 250ms ease-in-out, height 250ms ease-in-out, transform 250ms ease-in-out;
  opacity: 0;
  height: 0;
  transform: translate3d(0, -10%, 0);
}

.content--answer[data-enter] {
  opacity: 1;
  height: fit-content;
  transform: translate3d(0, 0, 0);
}

.content--answer[data-leave] {
  height: 0;
  overflow: hidden;
}

```


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

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

[Assistant]
Here's the implementation:

```css
.container--layout-option {
  margin-left: 0.3em;
}

.paragraph--layout-option {
  margin: 0;
}

.paragraph--summarySpecificationBullet {
  margin: 0;
  line-height: initial;
  font-size: 1.25rem;
  line-height: 1.15rem;
}

```


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

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

[Assistant]
Here's the implementation:

```css
.nameContainer--summaryListDesktop {
  padding-top: 0.25rem;
  padding-bottom: 0.75rem;
  justify-content: start;
}

.nameContainer--summaryListMobile {
  padding-top: 0.25rem;
  padding-bottom: 0.5rem;
  justify-content: start;
}

.brandName--summaryListMobile {
  font-weight: 400;
  font-size: 0.875rem;
  color: black;
}

.container--listLayout {
  max-width: none !important;
}

.image--summaryListDesktop {
  width: 180px !important;
}

.image--summaryListMobile {
  width: 140px !important;
  min-width: 140px;
  height: inherit !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 affirm-qa-theme/styles/css/search/vtex.store-components.css from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.productBrandName--summaryListDesktop {
  text-decoration: none;
  font-weight: 500;
  color: #0067C7;
  font-size: .875rem;
}

.productBrandName--summaryListMobile {
  text-decoration: none;
  color: #0067C7;
  font-size: .875rem;
}

```


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

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

[Assistant]
Here's the implementation:

```css
.flexRow--orderByAndSwitcher {
  padding-right: 1.5em;
}

.flexRowContent--savingsSummaryListDesktop {
  justify-content: flex-start;
}

.flexCol--summaryRightListDesktop {
  justify-content: space-around;
}

.flexRow--buyNowButton :global(.vtex-button) {
  background: #eef3f7;
  border-color:#eef3f7;
  color: #0f3e99;
}

.flexRow--buyNowButton:hover :global(.vtex-button) {
  background: #dbe9fd;
  border-color:#dbe9fd;
}

.flexCol--productRating {
  margin-bottom: 3rem;
}

.flexCol--summaryDetailsListMobile {
  justify-content: space-between;
}

.flexCol--summaryUpDetailsListMobile {
  margin-bottom: 0.25rem
}

```


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

[User] Show me the implementation of affirm-qa-theme/styles/css/product-specification-table/vtex.flex-layout.css from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.flexRow--productSpecificationGroup:not(:first-child) {
  margin-top: 1.5rem;
}

.flexRow--productSpecificationGroupName {
  background-color: #eaeaea;
  padding: 0.5rem 1rem;
}

.flexCol--productSpecificationName {
  padding: 1rem;
}

.flexCol--productSpecificationValue {
  padding: 1rem 1rem 1rem 0;
}

.flexRow--productSpecification:nth-child(even) {
  background-color: #f9f9f9;
}

```


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

[User] Show me the implementation of affirm-qa-theme/styles/css/product-specification-table/vtex.product-specifications.css from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```css
.groupName {
  font-size: 1.25rem;
}

.specificationName {
  font-weight: bold;
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store.custom#about-us": {
    "blocks": [
      "flex-layout.row#about-us",
      "video#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"
    }
  },
  "video#about-us": {
    "props": {
      "src": "https://www.youtube.com/embed/JgkrlaF52WQ",
      "width": "100%",
      "height": "100%"
    }
  },
  "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 affirm-qa-theme/store/blocks/product-price.jsonc from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "flex-layout.row#selling-price": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "preventHorizontalStretch": true,
      "marginBottom": 4
    },
    "children": [
      "product-selling-price"
    ]
  },

  "flex-layout.row#list-price-savings": {
    "props": {
      "colGap": 2,
      "preserveLayoutOnMobile": true,
      "preventHorizontalStretch": true,
      "marginBottom": 2,
      "marginTop": 5
    },
    "children": [
      "product-list-price",
      "product-price-savings"
    ]
  }
}

```


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

[User] Show me the implementation of affirm-qa-theme/store/blocks/minicart.jsonc from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "add-to-cart-button": {
    "props": {
      "addToCartFeedback": "customEvent",
      "customPixelEventId": "add-to-cart-button"
    }
  },

  "minicart.v2": {
    "props": {
      "customPixelEventId": "add-to-cart-button"
    },
    "children": ["minicart-base-content"]
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store.search": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "skusFilter": "ALL",
        "simulationBehavior": "skip"
      }
    }
  },

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

  "store.search#department": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "skusFilter": "ALL",
        "simulationBehavior": "skip"
      }
    }
  },

  "store.search#category": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "skusFilter": "ALL",
        "simulationBehavior": "skip"
      }
    }
  },

  "store.search#subcategory": {
    "blocks": ["search-result-layout"],
    "props": {
      "context": {
        "skusFilter": "ALL",
        "simulationBehavior": "skip"
      }
    }
  },

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

  "search-result-layout.desktop": {
    "children": [
      "flex-layout.row#searchbread",
      "flex-layout.row#searchtitle",
      "flex-layout.row#result"
    ],
    "props": {
      "pagination": "show-more",
      "preventRouteChange": false,
      "defaultGalleryLayout": "grid"
    }
  },
  "flex-layout.row#searchbread": {
    "children": ["breadcrumb.search"],
    "props": {
      "preserveLayoutOnMobile": true,
      "fullWidth": true
    }
  },
  "flex-layout.row#searchtitle": {
    "children": ["search-title.v2"]
  },
  "flex-layout.row#result": {
    "children": ["flex-layout.col#filter", "flex-layout.col#content"],
    "props": {
      "preventHorizontalStretch": true,
      "fullWidth": true
    }
  },
  "flex-layout.col#filter": {
    "children": ["filter-navigator.v3"],
    "props": {
      "blockClass": "filterCol"
    }
  },
  "flex-layout.col#content": {
    "children": [
      "flex-layout.row#searchinfo",
      "flex-layout.row#fetchprevious",
      "flex-layout.row#products",
      "flex-layout.row#fetchmore"
    ],
    "props": {
      "width": "grow",
      "preventVerticalStretch": true
    }
  },
  "flex-layout.row#searchinfo": {
    "children": ["flex-layout.col#productCount", "flex-layout.row#orderByAndSwitcher"]
  },
  "flex-layout.row#orderByAndSwitcher": {
    "children": ["order-by.v2", "gallery-layout-switcher"],
    "props": {
      "horizontalAlign": "right",
      "preventHorizontalStretch": true,
      "blockClass": "orderByAndSwitcher",
      "colGap": 3
    }
  },
  "flex-layout.col#productCount": {
    "children": ["total-products.v2"],
    "props": {
      "blockClass": "productCountCol"
    }
  },
  "flex-layout.row#fetchprevious": {
    "props": {
      "marginBottom": 3
    },
    "children": ["search-fetch-previous"]
  },
  "flex-layout.row#fetchmore": {
    "props": {
      "marginTop": 3
    },
    "children": ["search-fetch-more"]
  },
  "search-fetch-previous": {
    "props": {
      "htmlElementForButton": "a"
    }
  },
  "search-fetch-more": {
    "props": {
      "htmlElementForButton": "a"
    }
  },
  "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#fetchprevious",
      "flex-layout.row#contentmobile",
      "flex-layout.row#fetchmore"
    ],
    "props": {
      "pagination": "show-more",
      "mobileLayout": {
        "mode1": "small",
        "mode2": "normal"
      },
      "defaultGalleryLayout": "grid"
    }
  },
  "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": ["gallery-layout-switcher"],
    "props": {
      "verticalAlign": "middle"
    }
  },
  "search-not-found-layout": {
    "children": ["flex-layout.row#searchbread", "flex-layout.row#notfound"]
  },

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

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

  "gallery": {
    "props": {
      "layouts": [
        {
          "name": "grid",
          "component": "GridSummary",
          "itemsPerRow": {
            "(min-width:1300px)": 4,
            "desktop": 3,
            "tablet": 3,
            "phone": 2
          }
        },
        {
          "name": "list",
          "component": "ListSummary",
          "itemsPerRow": 1
        }
      ],
      "ListSummary": "product-summary.shelf#listLayout",
      "GridSummary": "product-summary.shelf"
    }
  },
  "gallery-layout-switcher": {
    "children": [
      /*
       * For accessbility to work properly,
       * It's important to define the options in the same order as the layouts
       */
      "gallery-layout-option#grid",
      "gallery-layout-option#list"
    ]
  },
  "gallery-layout-option#grid": {
    "props": {
      "name": "grid"
    },
    "children": [
      "icon-grid",
      "responsive-layout.desktop#textOptionGrid"
    ]
  },
  "gallery-layout-option#list": {
    "props": {
      "name": "list"
    },
    "children": [
      "icon-inline-grid",
      "responsive-layout.desktop#textOptionList"
    ]
  },
  "responsive-layout.desktop#textOptionGrid": {
    "children": [
      "rich-text#option-grid"
    ]
  },
  "responsive-layout.desktop#textOptionList": {
    "children": [
      "rich-text#option-list"
    ]
  },
  "rich-text#option-grid": {
    "props": {
      "text": "Grid",
      "textColor": "c-auto",
      "blockClass": "layout-option"
    }
  },
  "rich-text#option-list": {
    "props": {
      "text": "List",
      "textColor": "c-auto",
      "blockClass": "layout-option"
    }
  }
}

```


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

[User] Show me the implementation of affirm-qa-theme/store/blocks/contact.jsonc from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

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

  "flex-layout.row#contact-us": {
    "props": {
      "blockClass": "contact"
    },
    "children": [
      "flex-layout.col#contact-us"
    ]
  },

  "flex-layout.col#contact-us": {
    "children": [
      "rich-text#contact-us",
      "form#contact-us"
    ]
  },
  "rich-text#contact-us": {
    "props": {
      "text": "## Contact Us"
    }
  },

  "form#contact-us": {
    "props": {
      "entity": "contact",
      "schema": "site-contact"
    },
    "blocks": [
      "form-success#contact-us"
    ],
    "children": [
      "form-input.text#title",
      "form-input.text#name",
      "form-input.text#email",
      "form-input.textarea#message",
      "form-submit#contact"
    ]
  },

  "form-success#contact-us": {
    "children": [
      "rich-text#success-submit"
    ]
  },
  "rich-text#success-submit": {
    "props": {
      "text": "Thanks for reaching out! We will come back shortly.",
      "textAlignment": "CENTER",
      "textPosition": "CENTER"
    }
  },

  "form-input.text#title": {
    "props": {
      "pointer": "#/properties/title"
    }
  },
  "form-input.text#name": {
    "props": {
      "pointer": "#/properties/name"
    }
  },
  "form-input.text#email": {
    "props": {
      "pointer": "#/properties/email"
    }
  },
  "form-input.textarea#message": {
    "props": {
      "pointer": "#/properties/message"
    }
  },

  "form-submit#contact": {
    "props": {
      "label": "Submit"
    }
  }
}

```


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

[User] Show me the implementation of affirm-qa-theme/store/blocks/orderplaced.jsonc from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "order-placed": {
    "blocks": ["op-header", "op-order"]
  },
  "op-header": {
    "children": [
      "op-section#confirmation",
      "op-section#notices",
      "op-summary-section",
      "op-bank-invoice-section"
    ]
  },
  "op-section#confirmation": {
    "props": {
      "name": "confirmation",
      "marginBottom": 9,
      "borderless": true
    },
    "children": [
      "op-confirmation-icon",
      "op-confirmation-title",
      "op-confirmation-message",
      "flex-layout.row#confirmation-buttons"
    ]
  },
  "flex-layout.row#confirmation-buttons": {
    "props": {
      "blockClass": "confirmationButtons",
      "marginTop": 8,
      "marginBottom": 8,
      "horizontalAlign": "center",
      "preventHorizontalStretch": true,
      "preserveLayoutOnMobile": true
    },
    "children": ["flex-layout.col#confirmation-buttons"]
  },
  "flex-layout.col#confirmation-buttons": {
    "children": ["op-print-button"]
  },
  "op-section#notices": {
    "props": {
      "name": "notices",
      "marginBottom": 9,
      "borderless": true
    },
    "children": ["op-notices"]
  },
  // each order section
  "op-order": {
    "children": [
      "flex-layout.row#order-header",
      "op-order-split-notice",
      "op-order-customer",
      "op-section#payments",
      "op-section#pickup-packages",
      "op-section#delivery-packages",
      "op-order-takeaway-packages",
      "op-order-total"
    ]
  },
  // each order header
  "flex-layout.row#order-header": {
    "props": {
      "fullWidth": true,
      "colSizing": "auto",
      "colGap": 5,
      "marginBottom": 5
    },
    "children": [
      "flex-layout.col#order-header-info",
      "flex-layout.col#order-header-options"
    ]
  },
  "flex-layout.col#order-header-info": {
    "children": ["op-order-number", "op-order-datetime", "op-order-seller"]
  },
  "flex-layout.col#order-header-options": {
    "children": ["responsive-layout.desktop#order-options-desktop"]
  },
  "responsive-layout.desktop#order-options-desktop": {
    "children": ["op-order-options"]
  },
  // payment section
  "op-section#payments": {
    "props": {
      "name": "paymentMethods"
    },
    "children": [
      "op-order-payment",
      "responsive-layout.mobile#order-options-mobile"
    ]
  },
  // bottom of top section of order header
  "responsive-layout.mobile#order-options-mobile": {
    "children": ["op-order-options#mobile"]
  },
  "op-order-options#mobile": {
    "props": {
      "blockClass": "mobile",
      "fullWidth": true
    }
  },
  "op-section#pickup-packages": {
    "props": {
      "name": "pickupPackages"
    },
    "children": ["op-order-pickup-packages"]
  },
  "op-section#delivery-packages": {
    "props": {
      "name": "deliveryPackages"
    },
    "children": ["op-order-delivery-packages"]
  }
}

```


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

[User] Show me the implementation of affirm-qa-theme/store/blocks/faq.jsonc from the affirm-qa-theme VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store.custom#faq": {
    "children": [
      "flex-layout.row#faq"
    ]
  },

  "flex-layout.row#faq": {
    "props": {
      "blockClass": "faq"
    },
    "children": [
      "flex-layout.col#faq"
    ]
  },

  "flex-layout.col#faq": {
    "children": [
      "rich-text#faq",
      "disclosure-layout-group#group"
    ]
  },
  "rich-text#faq": {
    "props": {
      "text": "## FAQ"
    }
  },

  "disclosure-layout-group#group": {
    "children": [
      "disclosure-layout#first",
      "disclosure-layout#second",
      "disclosure-layout#third",
      "disclosure-layout#fourth"
    ]
  },

  "disclosure-layout#first": {
    "props": {
      "animated": true
    },
    "children": ["disclosure-trigger#first", "disclosure-content#first"]
  },
  "disclosure-trigger#first": {
    "props": {
      "blockClass": "question",
      "as": "div"
    },
    "children": ["disclosure-state-indicator", "rich-text#question1"]
  },
  "disclosure-content#first": {
    "props": {
      "blockClass": "answer"
    },
    "children": ["rich-text#answer1"]
  },
  "rich-text#question1": {
    "props": {
      "text": "How can I change my shipping address?"
    }
  },
  "rich-text#answer1": {
    "props": {
      "text": "Call us at the number (212) 1234-1234."
    }
  },

  "disclosure-layout#second": {
    "props": {
      "animated": true
    },
    "children": ["disclosure-trigger#second", "disclosure-content#second"]
  },
  "disclosure-trigger#second": {
    "props": {
      "blockClass": "question",
      "as": "div"
    },
    "children": ["disclosure-state-indicator", "rich-text#question2"]
  },
  "disclosure-content#second": {
    "props": {
      "blockClass": "answer"
    },
    "children": ["rich-text#answer2"]
  },
  "rich-text#question2": {
    "props": {
      "text": "How can I track my order?"
    }
  },
  "rich-text#answer2": {
    "props": {
      "text": "After logging into your account, you can find this info at the link Orders."
    }
  },

  "disclosure-layout#third": {
    "props": {
      "animated": true
    },
    "children": ["disclosure-trigger#third", "disclosure-content#third"]
  },
  "disclosure-trigger#third": {
    "props": {
      "blockClass": "question",
      "as": "div"
    },
    "children": ["disclosure-state-indicator", "rich-text#question3"]
  },
  "disclosure-content#third": {
    "props": {
      "blockClass": "answer"
    },
    "children": ["rich-text#answer3"]
  },
  "rich-text#question3": {
    "props": {
      "text": "How can I change my shipping address?"
    }
  },
  "rich-text#answer3": {
    "props": {
      "text": "Call us at the number (212) 1234-1234."
    }
  },

  "disclosure-layout#fourth": {
    "props": {
      "animated": true
    },
    "children": ["disclosure-trigger#fourth", "disclosure-content#fourth"]
  },
  "disclosure-trigger#fourth": {
    "props": {
      "blockClass": "question",
      "as": "div"
    },
    "children": ["disclosure-state-indicator", "rich-text#question4"]
  },
  "disclosure-content#fourth": {
    "props": {
      "blockClass": "answer"
    },
    "children": ["rich-text#answer2"]
  },
  "rich-text#question4": {
    "props": {
      "text": "How can I track my order?"
    }
  },
  "rich-text#answer4": {
    "props": {
      "text": "After logging into your account, you can find this info at the link Orders."
    }
  },

  "disclosure-state-indicator": {
    "props": {
      "Show": "icon-caret#down",
      "Hide": "icon-caret#up"
    }
  },
  "icon-caret#down": {
    "props": {
      "orientation": "down"
    }
  },
  "icon-caret#up": {
    "props": {
      "orientation": "up"
    }
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "store.home": {
    "blocks": [
      "list-context.image-list#demo",
      /* You can make references to blocks defined in other files.
       * For example, `flex-layout.row#deals` is defined in the `deals.json` file. */
      "flex-layout.row#deals",
      "__fold__",
      "rich-text#shelf-title",
      "flex-layout.row#shelf",
      "info-card#home",
      "rich-text#question",
      "rich-text#link",
      "newsletter"
    ]
  },

  "list-context.image-list#demo": {
    "children": ["slider-layout#demo-images"],
    "props": {
      "height": 570,
      "preload": true,
      "images": [
        {
          "image": "https://storecomponents.vteximg.com.br/arquivos/Class&Style-desktop.png",
          "mobileImage": "https://storecomponents.vteximg.com.br/arquivos/Class&Style-mobile.png"
        },
        {
          "image": "https://storecomponents.vteximg.com.br/arquivos/banner-decoration.png",
          "mobileImage": "https://storecomponents.vteximg.com.br/arquivos/banner-decoration-mobile.png"
        }
      ]
    }
  },
  "slider-layout#demo-images": {
    "props": {
      "itemsPerPage": {
        "desktop": 1,
        "tablet": 1,
        "phone": 1
      },
      "infinite": true,
      "showNavigationArrows": "desktopOnly",
      "blockClass": "carousel"
    }
  },

  "rich-text#shelf-title": {
    "props": {
      "text": "## Summer",
      "blockClass": "shelfTitle"
    }
  },
  "flex-layout.row#shelf": {
    "children": ["list-context.product-list#demo1"]
  },
  "list-context.product-list#demo1": {
    "blocks": ["product-summary.shelf"],
    "children": ["slider-layout#demo-products"],
    "props": {
      "orderBy": "OrderByTopSaleDESC"
    }
  },
  "slider-layout#demo-products": {
    "props": {
      "itemsPerPage": {
        "desktop": 4,
        "tablet": 3,
        "phone": 1
      },
      "infinite": true,
      "fullWidth": false,
      "blockClass": "shelf"
    }
  },

  "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"
    }
  },

  "rich-text#question": {
    "props": {
      "text": "**This is an example store built using the VTEX platform.\nWant to know more?**",
      "blockClass": "question"
    }
  },

  "rich-text#link": {
    "props": {
      "text": "\n**Reach us at**\nwww.vtex.com.br",
      "blockClass": "link"
    }
  }
}

```