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

[User] Show me the implementation of store-indexer/node/utils/slugify.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable no-useless-escape */

export const slugify = (str: string) =>
  str
    .toLowerCase()
    .normalize('NFD')
    .replace(/([\u0300-\u036f]|,)/g, '')
    .replace(/([\u0020\u00A0])/g, '-')
    .replace(/(\u00A0|[*+~.()'"!:@&\[\]`,/ %$#?{}|><=_^])/g, '-')

```


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

[User] Show me the implementation of store-indexer/node/utils/internals.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable no-useless-escape */
import { Apps } from '@vtex/api'
import RouteParser from 'route-parser'
import { InternalInput, RouteLocator } from 'vtex.rewriter'

export const INDEXED_ORIGIN = `${process.env.VTEX_APP_ID!}:routes-indexing`
export const STORE_LOCATOR = 'vtex.store@2.x'
export const ROUTES_JSON_PATH = 'dist/vtex.store-indexer/build.json'

export const PAGE_TYPE_TO_STORE_ENTITIES = {
  Brand: 'brand',
  Category: 'category',
  Department: 'department',
  FullText: null,
  NotFound: null,
  Product: 'product',
  Search: null,
  SubCategory: 'subcategory',
}

export const PAGE_TYPES = {
  BRAND: 'brand',
  CATEGORY: 'category',
  DEPARTMENT: 'department',
  PRODUCT: 'product',
  PRODUCT_NOT_FOUND: 'notFoundProduct',
  SEARCH_NOT_FOUND: 'notFoundSearch',
  SUBCATEGORY: 'subcategory',
}

export interface ContentTypeDefinition {
  internal: string
  canonical: string
}

export interface InternalAndOldRoute {
  internal: InternalInput
  oldRoute: RouteLocator | null
}

export type Routes = Record<string, ContentTypeDefinition>

type PageTypes = typeof PAGE_TYPES[keyof typeof PAGE_TYPES]

export const routeFormatter = async (apps: Apps, type: PageTypes) => {
  const routesJSON = await apps.getAppJSON<Routes>(
    STORE_LOCATOR,
    ROUTES_JSON_PATH
  )
  routesJSON.subcategory.canonical =
    '/:department/:category/:subcategory(/*terms)'
  const route = routesJSON[type]
  const canonicalParser = new RouteParser(route.canonical)
  return (params?: Record<string, string | undefined> | null) => {
    const path = canonicalParser.reverse(params ?? {})
    if (!path) {
      throw new Error(`Parse error, params: ${params}, path: ${path}`)
    }
    return path
  }
}

export const processInternalAndOldRoute = (
  internalsAndOldRoutes: Array<InternalAndOldRoute | null>
) => {
  return internalsAndOldRoutes.reduce(
    (acc, data) => {
      if (data === null) {
        return acc
      }
      const { internal, oldRoute } = data
      acc.internals.push(internal)
      if (oldRoute) {
        acc.oldRoutes.push(oldRoute)
      }
      return acc
    },
    { internals: [] as InternalInput[], oldRoutes: [] as RouteLocator[] }
  )
}

```


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

[User] Show me the implementation of store-indexer/node/utils/delete.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { RouteLocator } from 'vtex.rewriter'

import { Rewriter } from '../clients/rewriter'

export const deleteOldTranslation = async (
  id: string,
  type: string,
  bindingId: string,
  newPath: string,
  rewriter: Rewriter
): Promise<RouteLocator | null> => {
  const routesById = await rewriter.routesById({ id, type })
  const oldPath = routesById.find(({ binding }) => binding === bindingId)

  if (!oldPath || oldPath.route === newPath) {
    return null
  }
  return { from: oldPath.route, binding: bindingId }
}

```


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

[User] Show me the implementation of store-indexer/node/middlewares/search/indexCanonicals.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable no-await-in-loop */
import * as querystring from 'querystring'

import { includes, propEq, splitAt, splitEvery } from 'ramda'
import { InternalInput } from 'vtex.rewriter'

import { Catalog, CatalogPageTypeResponse } from '../../clients/catalog'
import { Context } from '../../typings/global'
import {
  INDEXED_ORIGIN,
  PAGE_TYPE_TO_STORE_ENTITIES,
  STORE_LOCATOR,
} from '../../utils/internals'

const BUCKET_SIZE = 100
const DAYS_TO_EXPIRE = 7

const handleResponse = (
  pageTypeResponse: CatalogPageTypeResponse | undefined,
  path: string
) => {
  const SEARCH_TYPES = ['Search', 'FullText']
  // Search with one segment, fallback handles this case
  if (
    !pageTypeResponse ||
    (includes(pageTypeResponse.pageType) && path.split('/').length === 2)
  ) {
    return { pageType: 'NotFound', id: 'null' } as CatalogPageTypeResponse
  }
  const { pageType, id } = pageTypeResponse
  if (!includes(pageType, SEARCH_TYPES)) {
    return { pageType, id } as CatalogPageTypeResponse
  }
  // Search with more segments, should render a category page to keep current behaviour
  return { pageType: 'Category', id: 'search' } as CatalogPageTypeResponse
}

// Sends multiple requests (max 3) to pageType API, one with each important
// segments (first three), because sometimes the API return wrongly `NotFound`,
// for example `:department/:brand/:category`
const getPageType = async (path: string, search: string, catalog: Catalog) => {
  const IMPORTANT_SEGMENTS = [3, 2, 1]
  const segments = path.split('/')
  const responses = await Promise.all(
    IMPORTANT_SEGMENTS.map(len => {
      const splittedPath = splitAt(len + 1, segments)[0].join('/')
      return splittedPath && segments.length > len
        ? catalog.pageType(splittedPath + search)
        : ({ pageType: 'NotFound' } as CatalogPageTypeResponse)
    })
  )
  const pageTypeResponse =
    responses.find(response => !propEq('pageType', 'NotFound')(response)) ??
    ({} as CatalogPageTypeResponse)
  return handleResponse(pageTypeResponse, path)
}

const toInternalURL = async (
  uri: string,
  canonicalPath: string,
  endDate: string,
  catalog: Catalog
): Promise<InternalInput | null> => {
  const [path, query] = uri.split('?')
  const parsedQuery = querystring.parse(query)
  const { pageType } = await getPageType(path, `?${query}`, catalog)
  const type = PAGE_TYPE_TO_STORE_ENTITIES[pageType]

  if (!type) {
    return null
  }

  return {
    declarer: STORE_LOCATOR,
    endDate,
    from: canonicalPath,
    id: 'search',
    origin: INDEXED_ORIGIN,
    query: parsedQuery,
    resolveAs: path,
    type,
  }
}

export async function indexCanonicals(ctx: Context, next: () => Promise<void>) {
  const {
    clients: { rewriter, catalog },
    state: { searchURLs },
  } = ctx
  const buckets = splitEvery(BUCKET_SIZE, searchURLs)
  const endDate = new Date()
  endDate.setDate(endDate.getDate() + DAYS_TO_EXPIRE)
  for (const URLsBucket of buckets) {
    const internals = await Promise.all(
      URLsBucket.map<Promise<InternalInput | null>>(url =>
        toInternalURL(
          url.path,
          url.canonicalPath!,
          endDate.toUTCString(),
          catalog
        )
      )
    )
    await rewriter.saveManyInternals(
      internals.filter(internal => internal !== null) as InternalInput[]
    )
  }
  await next()
}

```


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

[User] Show me the implementation of store-indexer/node/middlewares/search/getSearchStats.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { Context } from '../../typings/global'

export async function getSearchStats(ctx: Context, next: () => Promise<void>) {
  const {
    clients: { searchGraphql },
    state: {
      settings: { numberOfIndexedSearches },
    },
  } = ctx
  const searchUrls = (await searchGraphql.getSearchURLsCount(
    numberOfIndexedSearches
  )) as Array<{ path: string }>
  ctx.state.searchURLs = searchUrls
  await next()
}

```


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

[User] Show me the implementation of store-indexer/node/middlewares/search/createCanonicals.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable no-restricted-globals */
/* eslint-disable no-await-in-loop */
import { zip } from 'ramda'

import { Catalog } from '../../clients/catalog'
import { Context } from '../../typings/global'

const enrichSegmentName = async (
  catalog: Catalog,
  segment: string,
  mapValue: string
) => {
  const [fieldName, fieldValue] = mapValue.split('_')
  if (fieldName === 'specificationFilter' && !isNaN(Number(fieldValue))) {
    const { Name: specificationFilterName } = await catalog.getField(
      Number(fieldValue)
    )
    return `${specificationFilterName.toLowerCase()}_${segment}`
  }

  return segment.toLowerCase()
}

export async function createCanonicals(
  ctx: Context,
  next: () => Promise<void>
) {
  const {
    clients: { catalog },
    state: { searchURLs },
  } = ctx

  for (const searchURL of searchURLs) {
    const { path } = searchURL
    const [segments, queryMap] = path.split('?map=')
    const pathSegments = segments.slice(1).split('/')
    const mapSegments = queryMap.split(',')
    const zippedSegments = zip(pathSegments, mapSegments)
    const enrichedPathSegments: string[] = []

    for (const [segment, mapValue] of zippedSegments) {
      enrichedPathSegments.push(
        await enrichSegmentName(catalog, segment, mapValue)
      )
    }

    searchURL.canonicalPath = `/${enrichedPathSegments.join('/')}`.replace(
      /\s/g,
      '-'
    )
  }

  await next()
}

```


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

[User] Show me the implementation of store-indexer/node/middlewares/search/index.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```typescript
export * from './getSearchStats'
export * from './createCanonicals'
export * from './indexCanonicals'

```


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

[User] Show me the implementation of store-indexer/node/middlewares/internals/category.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { Category } from '@vtex/api/lib/clients/apps/catalogGraphQL/category'
import { InternalInput } from 'vtex.rewriter'

import { Context } from '../../typings/global'
import { filterStoreBindings } from '../../utils/bindings'
import { deleteOldTranslation } from '../../utils/delete'
import {
  INDEXED_ORIGIN,
  InternalAndOldRoute,
  PAGE_TYPES,
  processInternalAndOldRoute,
  routeFormatter,
  STORE_LOCATOR,
} from '../../utils/internals'
import { createTranslator } from '../../utils/messages'
import { slugify } from '../../utils/slugify'

type CategoryTypes = 'DEPARTMENT' | 'CATEGORY' | 'SUBCATEGORY'

interface IdentifiedCategory extends Category {
  parents: Array<Pick<Category, 'name' | 'id'>>
}

const getCategoryType = (
  parents: IdentifiedCategory['parents']
): { type: CategoryTypes; map: string } => {
  const height = parents.length
  switch (height) {
    case 0:
      return {
        map: 'c',
        type: 'DEPARTMENT',
      }
    case 1:
      return {
        map: 'c,c',
        type: 'CATEGORY',
      }
    default:
      return {
        map: Array(height + 1)
          .fill('c')
          .join(','),
        type: 'SUBCATEGORY',
      }
  }
}

const toParams = ([department, category, subcategory, ...terms]: string[]) => ({
  category,
  department,
  subcategory,
  terms: terms.join('/'),
})

type Params = ReturnType<typeof toParams>

const pathFromTree = (formatRoute: (x: Params) => string, tree: string[]) =>
  formatRoute(toParams(tree.map(x => slugify(x).toLowerCase())))

export async function categoryInternals(
  ctx: Context,
  next: () => Promise<void>
) {
  const {
    clients: { apps, messages: messagesClient, rewriter },
    state: {
      tenantInfo: { defaultLocale: tenantLocale },
      tenantInfo,
      settings: { usesMultiLanguageSearch },
    },
    vtex: { logger },
  } = ctx
  const category: IdentifiedCategory = ctx.body
  const bindings = filterStoreBindings(tenantInfo)

  if (bindings.length === 0) {
    return
  }

  const { id, isActive, name, parents } = category
  const { map, type } = getCategoryType(parents)
  const pageType = PAGE_TYPES[type]
  const messages = [...parents, { id, name }].map(c => ({
    content: c.name,
    context: c.id,
  }))

  const formatRoute = await routeFormatter(apps, pageType)
  const translate = createTranslator(messagesClient)

  const tenantPath = pathFromTree(
    formatRoute,
    messages.map(x => x.content)
  )

  const internalsAndOldRoutes = await Promise.all(
    bindings.map(async binding => {
      try {
        const { id: bindingId, defaultLocale: bindingLocale } = binding
        const translatedTree = await translate(
          tenantLocale,
          bindingLocale,
          messages
        )
        const path = pathFromTree(formatRoute, translatedTree)
        const oldRoute = await deleteOldTranslation(
          id,
          pageType,
          bindingId,
          path,
          rewriter
        )
        const internal: InternalInput = {
          binding: bindingId,
          declarer: STORE_LOCATOR,
          from: path,
          id,
          origin: INDEXED_ORIGIN,
          query: isActive ? { map } : null,
          resolveAs: usesMultiLanguageSearch ? null : tenantPath,
          type: isActive ? pageType : PAGE_TYPES.SEARCH_NOT_FOUND,
        }
        return {
          internal,
          oldRoute,
        } as InternalAndOldRoute
      } catch (error) {
        logger.error({
          binding: binding.id,
          category,
          error,
          message: 'Error creating category internals',
        })
        return null
      }
    })
  )

  const { internals, oldRoutes } = processInternalAndOldRoute(
    internalsAndOldRoutes
  )

  ctx.state.internals = internals
  ctx.state.oldRoutes = oldRoutes

  await next()
}

```


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

[User] Show me the implementation of store-indexer/node/middlewares/internals/brand.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { Brand } from 'vtex.catalog-graphql'
import { InternalInput } from 'vtex.rewriter'

import { Context } from '../../typings/global'
import { filterStoreBindings } from '../../utils/bindings'
import { deleteOldTranslation } from '../../utils/delete'
import {
  INDEXED_ORIGIN,
  PAGE_TYPES,
  processInternalAndOldRoute,
  routeFormatter,
  STORE_LOCATOR,
} from '../../utils/internals'
import { createTranslator } from '../../utils/messages'
import { slugify } from '../../utils/slugify'

type Params = Record<string, string | undefined> | null | undefined

const pathFromRoute = (formatRoute: (x: Params) => string, brand: string) =>
  formatRoute({ brand: slugify(brand).toLowerCase() })

export async function brandInternals(ctx: Context, next: () => Promise<void>) {
  const {
    clients: { apps, messages: messagesClient, rewriter },
    state: {
      tenantInfo: { defaultLocale: tenantLocale },
      tenantInfo,
      settings: { usesMultiLanguageSearch, resolveBrandMapQueryAs },
    },
    vtex: { logger },
  } = ctx
  const brand: Brand = ctx.body
  const { name, active, id } = brand
  const bindings = filterStoreBindings(tenantInfo)

  if (bindings.length === 0) {
    return
  }

  const formatRoute = await routeFormatter(apps, PAGE_TYPES.BRAND)
  const translate = createTranslator(messagesClient)
  const messages = [{ content: name, context: id, behavior: 'USER_ONLY'}]
  const tenantPath = pathFromRoute(formatRoute, name)

  const internalsAndOldRoutes = await Promise.all(
    bindings.map(async binding => {
      try {
        const { id: bindingId, defaultLocale: bindingLocale } = binding
        const [translated] = await translate(
          tenantLocale,
          bindingLocale,
          messages
        )
        const path = pathFromRoute(formatRoute, translated)
        const oldRoute = await deleteOldTranslation(
          id,
          'brand',
          bindingId,
          path,
          rewriter
        )

        const internal: InternalInput = {
          binding: bindingId,
          declarer: STORE_LOCATOR,
          from: path,
          id,
          origin: INDEXED_ORIGIN,
          query: active ? { map: resolveBrandMapQueryAs } : null,
          resolveAs: usesMultiLanguageSearch ? null : tenantPath,
          type: active ? PAGE_TYPES.BRAND : PAGE_TYPES.SEARCH_NOT_FOUND,
        }
        return {
          internal,
          oldRoute,
        }
      } catch (error) {
        logger.error({
          binding: binding.id,
          brand,
          error,
          message: 'Error creating category internals',
        })
        return null
      }
    })
  )

  const { internals, oldRoutes } = processInternalAndOldRoute(
    internalsAndOldRoutes
  )

  ctx.state.internals = internals
  ctx.state.oldRoutes = oldRoutes

  await next()
}

```


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

[User] Show me the implementation of store-indexer/node/middlewares/internals/product.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { Product } from 'vtex.catalog-graphql'
import { InternalInput } from 'vtex.rewriter'

import { Context } from '../../typings/global'
import { filterBindingsBySalesChannel } from '../../utils/bindings'
import { deleteOldTranslation } from '../../utils/delete'
import {
  INDEXED_ORIGIN,
  PAGE_TYPES,
  processInternalAndOldRoute,
  routeFormatter,
  STORE_LOCATOR,
} from '../../utils/internals'
import { createTranslator } from '../../utils/messages'
import { slugify } from '../../utils/slugify'

type Params = Record<string, string | undefined> | null | undefined

const pathFromRoute = (formatRoute: (x: Params) => string, slug: string) =>
  formatRoute({ slug: slugify(slug).toLowerCase() })

export async function productInternals(
  ctx: Context,
  next: () => Promise<void>
) {
  const {
    clients: { apps, messages: messagesClient, rewriter },
    state: {
      tenantInfo: { defaultLocale: tenantLocale },
      tenantInfo,
      settings: { usesMultiLanguageSearch },
    },
    vtex: { logger },
  } = ctx
  const product: Product = ctx.body
  const { linkId, isActive, id } = product
  const bindings = filterBindingsBySalesChannel(
    tenantInfo,
    product.salesChannel
  )

  if (!linkId || bindings.length === 0) {
    return
  }

  const formatRoute = await routeFormatter(apps, PAGE_TYPES.PRODUCT)
  const translate = createTranslator(messagesClient)
  const messages = [{ content: linkId, context: id }]

  const tenantPath = pathFromRoute(formatRoute, linkId)

  const internalsAndOldRoutes = await Promise.all(
    bindings.map(async binding => {
      try {
        const { defaultLocale: bindingLocale, id: bindingId } = binding
        const [translated] = await translate(
          tenantLocale,
          bindingLocale,
          messages
        )
        const path = pathFromRoute(formatRoute, translated)
        const oldRoute = await deleteOldTranslation(
          id,
          'product',
          bindingId,
          path,
          rewriter
        )

        const internal: InternalInput = {
          binding: bindingId,
          declarer: STORE_LOCATOR,
          from: path,
          id,
          origin: INDEXED_ORIGIN,
          resolveAs: usesMultiLanguageSearch ? null : tenantPath,
          type: isActive ? PAGE_TYPES.PRODUCT : PAGE_TYPES.PRODUCT_NOT_FOUND,
        }
        return {
          internal,
          oldRoute,
        }
      } catch (error) {
        logger.error({
          binding: binding.id,
          error,
          message: 'Error creating category internals',
          product,
        })
        return null
      }
    })
  )

  const { internals, oldRoutes } = processInternalAndOldRoute(
    internalsAndOldRoutes
  )

  ctx.state.internals = internals
  ctx.state.oldRoutes = oldRoutes

  await next()
}

```


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

[User] Show me the implementation of store-indexer/node/middlewares/internals/save.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable no-console */
import { Binding, LINKED } from '@vtex/api'
import { pick } from 'ramda'
import { InternalInput } from 'vtex.rewriter'

import { Context } from '../../typings/global'

const mergeBindingsToInternals = (
  bindings: Binding[],
  internals: InternalInput[]
) =>
  internals.map(internal => {
    const binding = bindings.find(b => b.id === internal.binding)
    return {
      ...internal,
      binding: pick(['id', 'defaultLocale', 'canonicalBaseAddress'], binding),
    }
  })

export async function saveInternals(ctx: Context, next: () => Promise<void>) {
  const {
    clients: { rewriter },
    state: { internals, tenantInfo },
  } = ctx
  if (internals) {
    if (LINKED) {
      const tenant = pick(['id', 'defaultLocale'], tenantInfo)
      console.log(
        JSON.stringify(
          {
            internals: mergeBindingsToInternals(tenantInfo.bindings, internals),
            tenant,
          },
          null,
          2
        )
      )
    }
    await rewriter.saveManyInternals(internals)
  }

  await next()
}

```


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

[User] Show me the implementation of store-indexer/node/middlewares/internals/delete.ts from the store-indexer VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable no-console */
import { LINKED } from '@vtex/api'

import { Context } from '../../typings/global'

export async function deleteOldRoutes(ctx: Context, next: () => Promise<void>) {
  const {
    clients: { rewriter },
    state: { oldRoutes },
  } = ctx
  if (oldRoutes) {
    if (LINKED) {
      console.log(
        JSON.stringify({
          message: 'Old Routes deletion',
          oldRoutes,
        })
      )
    }
    await rewriter.deleteManyInternals(oldRoutes)
  }

  await next()
}

```


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

[User] Show me the implementation of mycheckout-store-framework/messages/pt.json from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "checkoutless.button-save": "Salve",
  "checkoutless.button-restore": "Restaurar",
  "checkoutless.button-select": "Selecionar",
  "checkoutless.button-cancel": "Cancelar",
  "checkoutless.button-yes": "Sim",
  "admin-example.navigation.label": "My Checkout",
  "admin-example.navigation.search.kws": "checkout,pagamentos",
  "admin-example.navigation.settings": "Configuração",
  "admin-example.navigation.payments": "Métodos de Pagamento",
  "checkoutless.settings.title": "Configuração",
  "checkoutless.settings.subtitle": "You should configure VTEX App Key and VTEX App Token to activate My Checkout",
  "checkoutless.settings.success": "Your account has been updated with success",
  "checkoutless.linksList": "Listado de vinculos",
  "checkoutless.linksList.title": "Links list",
  "checkoutless.linksList.accountColumn": "Account",
  "checkoutless.linksList.dateColumn": "Date",
  "checkoutless.linksList.statusColumn": "Status",
  "checkoutless.linksList.actionColumn": "Action",
  "checkoutless.linksList.newLinkButton": "New",
  "checkoutless.linksList.approved": "Approved",
  "checkoutless.linksList.pending": "Pending",
  "checkoutless.linksList.rejected": "Rejected",
  "checkoutless.linksList.deleteMessage": "Link has been deleted with success",
  "checkoutless.linksList.approvedMessage": "Link has been approved with success",
  "checkoutless.linksList.rejectedMessage": "Link has been rejected with success",
  "checkoutless.linkForm.title": "New link",
  "checkoutless.linkForm.accountField": "Account",
  "checkoutless.linkForm.linkExist": "Already exist a link with this account",
  "checkoutless.inputs.required": "Required",
  "checkoutless.inputs.save-button": "Save",
  "checkoutless.statistics": "Estatisticas",
  "checkoutless.statistics.title": "Estatisticas",
  "checkoutless.statistics.subtitle": "Estatísticas de uso por comerciante",
  "checkoutless.statistics.admin.useButton": "Usar botão",
  "checkoutless.statistics.checkout": "Compras",
  "checkoutless.statistics.conversion": "Taxa de conversão",
  "checkoutless.statistics.category": "Uso da categoria",
  "checkoutless.statistics.subcategory": "Uso da subcategoria",
  "checkoutless.statistics.ticket": "Bilhete médio",
  "checkoutless.statistics.lastSixMonths": "Últimos 6 meses",
  "checkoutless.statistics.previousPeriod": "Período anterior",
  "checkoutless.statistics.day": "Dia",
  "checkoutless.statistics.month": "Mês",
  "checkoutless.statistics.year": "Ano",
  "checkoutless.statistics.period": "Período:",
  "checkoutless.statistics.compare": "Compare com:",
  "checkoutless.statistics.accept": "Aceitar",
  "checkoutless.statistics.cancel": "Cancelar",
  "checkoutless.statistics.filter.select": "Selecionar",
  "checkoutless.statistics.filter.person": "Personalizado",
  "checkoutless.statistics.filter.today": "Hoje",
  "checkoutless.statistics.filter.yesterday": "Ontem",
  "checkoutless.statistics.filter.lastWeek": "Última semana",
  "checkoutless.statistics.filter.lastMonth": "Último mês",
  "checkoutless.settings.warning": "A conta ainda não está configurada",
  "checkoutless.categories.table.name": "Categoria",
  "checkoutless.categories.table.id": "ID",
  "checkoutless.categories.table.type": "Tipo",
  "checkoutless.categories.table.active": "Activar",
  "checkoutless.categories.title": "Visualización",
  "checkoutless.categories.description": "En la siguiente sección podrá configurar las categorias donde no quiera el botón de My Checkout sea visible",
  "checkoutless.paymentsList": "Medios de pagos",
  "checkoutless.paymentsList.title": "Medios de pagos",
  "checkoutless.paymentsList.table.name": "Médio de pago",
  "checkoutless.paymentsList.table.sales-channel": "Sales Channels",
  "checkoutless.paymentsList.table.status": "Mostrar en My Checkout",
  "checkoutless.paymentsList.table.warning": "Debe tener al menos un medio de pago activo",
  "checkoutless.paymentsList.table.origin": "Origen",
  "checkoutless.paymentsList.auto-save": "Todos tus cambios se guardarán de forma automática",
  "checkoutless.settings.buttonMessage": "Use * para resaltar un texto, ejemplo: Paga *fácil y  rápido*...",
  "checkoutless.styleSettings": "Configurações de estilo",
  "checkoutless.styleSettings.menu-name": "Nome",
  "checkoutless.styleSettings.menu-font": "Fonte",
  "checkoutless.styleSettings.menu-radio": "Rádio",
  "checkoutless.styleSettings.menu-width": "Largura",
  "checkoutless.styleSettings.menu-button": "Botão",
  "checkoutless.styleSettings.menu-icons": "Ícones",
  "checkoutless.styleSettings.menu-background": "Fundo",
  "checkoutless.styleSettings.menu.button.input-placeholder": "Compre Agora",
  "checkoutless.styleSettings.menu.button.color-text": "Texto",
  "checkoutless.styleSettings.menu.button.color-background": "Fundo",
  "checkoutless.styleSettings.menu.button.color-outline": "Contorno",
  "checkoutless.styleSettings.menu.icons-color": "Cores dos ícones",
  "checkoutless.styleSettings.menu.background-color": "Cor modal",
  "checkoutless.styleSettings.menu-font-advanced-btn": "Avançado",
  "checkoutless.styleSettings.menu-font-advanced-description": "Escreva o nome da fonte que você já adicionou no seu negócio",
  "checkoutless.styleSettings.menu-restore-confirmation-message": "¿ Tem certeza de que deseja redefinir os estilos ?",
  "checkoutless.styleSettings.menu-update-confirmation-message": "¿ Tem certeza de que deseja atualizar os estilos ?",
  "checkoutless.styleSettings.preview-modal": "Modal",
  "checkoutless.styleSettings.preview-button": "Botão",
  "checkoutless.styleSettings.preview-button-design": "Design de botão",
  "checkoutless.styleSettings.preview-modal-design": "Design modal",
  "checkoutless.styleSettings.success-update-styles": "Estilos atualizados com sucesso",
  "checkoutless.styleSettings.success-restore-styles": "Estilos redefinidos com sucesso",
  "checkoutless.styleSettings.error-update-styles": "Desculpe, ocorreu um erro"
}

```


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

[User] Show me the implementation of mycheckout-store-framework/messages/en.json from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "checkoutless.button-save": "Save",
  "checkoutless.button-restore": "Restore",
  "checkoutless.button-select": "To select",
  "checkoutless.button-cancel": "Cancel",
  "checkoutless.button-yes": "Yes",
  "admin-example.navigation.label": "My Checkout",
  "admin-example.navigation.search.kws": "checkout,payments",
  "admin-example.navigation.settings": "Configuration",
  "admin-example.navigation.payments": "Payment methods",
  "checkoutless.settings.title": "Configuration",
  "checkoutless.settings.subtitle": "You should configure VTEX App Key and VTEX App Token to activate My Checkout",
  "checkoutless.settings.success": "Your account has been updated with success",
  "checkoutless.linksList": "Links list",
  "checkoutless.linksList.title": "Links list",
  "checkoutless.linksList.accountColumn": "Account",
  "checkoutless.linksList.dateColumn": "Date",
  "checkoutless.linksList.statusColumn": "Status",
  "checkoutless.linksList.actionColumn": "Action",
  "checkoutless.linksList.newLinkButton": "New",
  "checkoutless.linksList.approved": "Approved",
  "checkoutless.linksList.pending": "Pending",
  "checkoutless.linksList.rejected": "Rejected",
  "checkoutless.linksList.deleteMessage": "Link has been deleted with success",
  "checkoutless.linksList.approvedMessage": "Link has been approved with success",
  "checkoutless.linksList.rejectedMessage": "Link has been rejected with success",
  "checkoutless.linkForm.title": "New link",
  "checkoutless.linkForm.accountField": "Account",
  "checkoutless.linkForm.linkExist": "Already exist a link with this account",
  "checkoutless.inputs.required": "Required",
  "checkoutless.inputs.save-button": "Save",
  "checkoutless.statistics": "Statistics",
  "checkoutless.statistics.title": "Statistics",
  "checkoutless.statistics.subtitle": "Usage statistics by merchant",
  "checkoutless.statistics.admin.useButton": "Use button",
  "checkoutless.statistics.checkout": "Shopping",
  "checkoutless.statistics.conversion": "Conversion rate",
  "checkoutless.statistics.category": "Category use",
  "checkoutless.statistics.subcategory": "Subcategory use",
  "checkoutless.statistics.ticket": "Average ticket",
  "checkoutless.statistics.lastSixMonths": "Last 6 months",
  "checkoutless.statistics.previousPeriod": "Previous period",
  "checkoutless.statistics.day": "Day",
  "checkoutless.statistics.month": "Month",
  "checkoutless.statistics.year": "Year",
  "checkoutless.statistics.period": "Period:",
  "checkoutless.statistics.compare": "Compare with:",
  "checkoutless.statistics.accept": "Accept",
  "checkoutless.statistics.cancel": "Cancel",
  "checkoutless.statistics.filter.select": "Select",
  "checkoutless.statistics.filter.person": "Custom",
  "checkoutless.statistics.filter.today": "Today",
  "checkoutless.statistics.filter.yesterday": "Yesterday",
  "checkoutless.statistics.filter.lastWeek": "Last week",
  "checkoutless.statistics.filter.lastMonth": "Last month",
  "checkoutless.settings.warning": "Account is not set up yet",
  "checkoutless.categories.table.name": "Categoria",
  "checkoutless.categories.table.id": "ID",
  "checkoutless.categories.table.type": "Tipo",
  "checkoutless.categories.table.active": "Activar",
  "checkoutless.categories.title": "Visualización",
  "checkoutless.categories.description": "En la siguiente sección podrá configurar las categorias donde no quiera el botón de My Checkout sea visible",
  "checkoutless.paymentsList": "Payments",
  "checkoutless.paymentsList.title": "Medios de pagos",
  "checkoutless.paymentsList.table.name": "Médio de pago",
  "checkoutless.paymentsList.table.sales-channel": "Sales Channels",
  "checkoutless.paymentsList.table.status": "Mostrar en My Checkout",
  "checkoutless.paymentsList.table.warning": "Debe tener al menos un medio de pago activo",
  "checkoutless.paymentsList.table.origin": "Origen",
  "checkoutless.paymentsList.auto-save": "Todos tus cambios se guardarán de forma automática",
  "checkoutless.settings.buttonMessage": "Use * para resaltar un texto, ejemplo: Paga *fácil y  rápido*...",
  "checkoutless.styleSettings": "Style settings",
  "checkoutless.styleSettings.menu-name": "Name",
  "checkoutless.styleSettings.menu-font": "Font",
  "checkoutless.styleSettings.menu-radio": "Radio",
  "checkoutless.styleSettings.menu-width": "Width",
  "checkoutless.styleSettings.menu-button": "Button",
  "checkoutless.styleSettings.menu-icons": "Icons",
  "checkoutless.styleSettings.menu-background": "Background",
  "checkoutless.styleSettings.menu.button.input-placeholder": "Buy now",
  "checkoutless.styleSettings.menu.button.color-text": "Text",
  "checkoutless.styleSettings.menu.button.color-background": "Background",
  "checkoutless.styleSettings.menu.button.color-outline": "Outline",
  "checkoutless.styleSettings.menu.icons-color": "Icons color",
  "checkoutless.styleSettings.menu.background-color": "Modal color",
  "checkoutless.styleSettings.menu-font-advanced-btn": "Advanced",
  "checkoutless.styleSettings.menu-font-advanced-description": "Write the name of the font that you already have added in your business",
  "checkoutless.styleSettings.menu-restore-confirmation-message": "Are you sure you want to reset the styles ?",
  "checkoutless.styleSettings.menu-update-confirmation-message": "Are you sure you want to update the styles ?",
  "checkoutless.styleSettings.preview-modal": "Modal",
  "checkoutless.styleSettings.preview-button": "Button",
  "checkoutless.styleSettings.preview-button-design": "Button design",
  "checkoutless.styleSettings.preview-modal-design": "Modal design",
  "checkoutless.styleSettings.success-update-styles": "Styles updated successfully",
  "checkoutless.styleSettings.success-restore-styles": "Styles reset successfully",
  "checkoutless.styleSettings.error-update-styles": "Sorry an error occurred"
}

```


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

[User] Show me the implementation of mycheckout-store-framework/messages/es.json from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "checkoutless.button-save": "Guardar",
  "checkoutless.button-restore": "Restablecer",
  "checkoutless.button-select": "Seleccionar",
  "checkoutless.button-cancel": "Cancelar",
  "checkoutless.button-yes": "Sí",
  "admin-example.navigation.label": "My Checkout",
  "admin-example.navigation.search.kws": "checkout,pagos",
  "admin-example.navigation.settings": "Configuración",
  "admin-example.navigation.payments": "Medios de pagos",
  "checkoutless.settings.title": "Configuración",
  "checkoutless.settings.subtitle": "Debe configurar VTEX App Key y VTEX App Token para activar My Checkout",
  "checkoutless.settings.success": "Su cuenta ha sido actualizado con éxito.",
  "checkoutless.linksList": "Listado de vinculos",
  "checkoutless.linksList.title": "Listado de vinculos",
  "checkoutless.linksList.accountColumn": "Cuenta",
  "checkoutless.linksList.dateColumn": "Fecha",
  "checkoutless.linksList.statusColumn": "Estado",
  "checkoutless.linksList.actionColumn": "Acción",
  "checkoutless.linksList.newLinkButton": "Nuevo",
  "checkoutless.linksList.approved": "Aprobado",
  "checkoutless.linksList.pending": "Pendiente",
  "checkoutless.linksList.rejected": "Rechazado",
  "checkoutless.linksList.deleteMessage": "Se ha eliminado el vinculo con éxito",
  "checkoutless.linksList.approvedMessage": "Se ha aprobado el vinculo con éxito",
  "checkoutless.linksList.rejectedMessage": "Se ha rechazado el vinculo con éxito",
  "checkoutless.linkForm.title": "Nuevo vinculo",
  "checkoutless.linkForm.accountField": "Cuenta",
  "checkoutless.linkForm.linkExist": "Ya existe un vinculo con esta cuenta",
  "checkoutless.inputs.required": "Requerido",
  "checkoutless.inputs.save-button": "Guardar",
  "checkoutless.statistics": "Estadísticas",
  "checkoutless.statistics.title": "Estadísticas",
  "checkoutless.statistics.subtitle": "Estadísticas de uso por comercio",
  "checkoutless.statistics.admin.useButton": "Uso botón",
  "checkoutless.statistics.checkout": "Compras",
  "checkoutless.statistics.conversion": "Tasa de conversión",
  "checkoutless.statistics.category": "Uso categoría",
  "checkoutless.statistics.subcategory": "Uso subcategoria",
  "checkoutless.statistics.ticket": "Ticket promedio",
  "checkoutless.statistics.lastSixMonths": "Últimos 6 meses",
  "checkoutless.statistics.previousPeriod": "Periodo anterior",
  "checkoutless.statistics.day": "Día",
  "checkoutless.statistics.month": "Mes",
  "checkoutless.statistics.year": "Año",
  "checkoutless.statistics.period": "Periodo:",
  "checkoutless.statistics.compare": "Comparar con:",
  "checkoutless.statistics.accept": "Aceptar",
  "checkoutless.statistics.cancel": "Cancelar",
  "checkoutless.statistics.filter.select": "Seleccionar",
  "checkoutless.statistics.filter.person": "Personalizado",
  "checkoutless.statistics.filter.today": "Hoy",
  "checkoutless.statistics.filter.yesterday": "Ayer",
  "checkoutless.statistics.filter.lastWeek": "La semana pasada",
  "checkoutless.statistics.filter.lastMonth": "El mes pasado",
  "checkoutless.settings.warning": "La cuenta aún no está configurada",
  "checkoutless.categories.table.name": "Categoria",
  "checkoutless.categories.table.id": "ID",
  "checkoutless.categories.table.type": "Tipo",
  "checkoutless.categories.table.active": "Activar",
  "checkoutless.categories.title": "Visualización",
  "checkoutless.categories.description": "En la siguiente sección podrá configurar las categorias donde no quiera el botón de My Checkout sea visible",
  "checkoutless.paymentsList": "Medios de pagos",
  "checkoutless.paymentsList.title": "Medios de pagos",
  "checkoutless.paymentsList.table.name": "Médio de pago",
  "checkoutless.paymentsList.table.sales-channel": "Sales Channels",
  "checkoutless.paymentsList.table.status": "Mostrar en My Checkout",
  "checkoutless.paymentsList.table.warning": "Debe tener al menos un medio de pago activo",
  "checkoutless.paymentsList.table.origin": "Origen",
  "checkoutless.paymentsList.auto-save": "Todos tus cambios se guardarán de forma automática",
  "checkoutless.settings.buttonMessage": "Use * para resaltar un texto, ejemplo: Paga *fácil y  rápido*...",
  "checkoutless.styleSettings": "Ajustes de estilo",
  "checkoutless.styleSettings.menu-name": "Nombre",
  "checkoutless.styleSettings.menu-font": "Fuente",
  "checkoutless.styleSettings.menu-radio": "Radio",
  "checkoutless.styleSettings.menu-width": "Ancho",
  "checkoutless.styleSettings.menu-button": "Botón",
  "checkoutless.styleSettings.menu-icons": "Iconos",
  "checkoutless.styleSettings.menu-background": "Fondo",
  "checkoutless.styleSettings.menu.button.input-placeholder": "Compra ya",
  "checkoutless.styleSettings.menu.button.color-text": "Texto",
  "checkoutless.styleSettings.menu.button.color-background": "Fondo",
  "checkoutless.styleSettings.menu.button.color-outline": "Contorno",
  "checkoutless.styleSettings.menu.icons-color": "Color iconos",
  "checkoutless.styleSettings.menu.background-color": "Color modal",
  "checkoutless.styleSettings.menu-font-advanced-btn": "Avanzado",
  "checkoutless.styleSettings.menu-font-advanced-description": "Escribe el nombre de la fuente que ya tienes agregada en tu comercio",
  "checkoutless.styleSettings.menu-restore-confirmation-message": "¿ Estas seguro de que quieres restablecer los estilos ?",
  "checkoutless.styleSettings.menu-update-confirmation-message": "¿ Está seguro de que desea actualizar los estilos ?",
  "checkoutless.styleSettings.preview-modal": "Modal",
  "checkoutless.styleSettings.preview-button": "Botón",
  "checkoutless.styleSettings.preview-button-design": "Diseño del botón",
  "checkoutless.styleSettings.preview-modal-design": "Diseño de la modal",
  "checkoutless.styleSettings.success-update-styles": "Estilos actualizados con éxito",
  "checkoutless.styleSettings.success-restore-styles": "Estilos restablecidos con éxito",
  "checkoutless.styleSettings.error-update-styles": "Lo sentimos ha ocurrido un error"
}

```


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

[User] Show me the implementation of mycheckout-store-framework/admin/navigation.json from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "section": "storeSetup",
  "titleId": "admin-example.navigation.label",
  "searchKeyWordsHelpers": "admin-example.navigation.search.kws",
  "subSectionItems": [
    {
      "labelId": "admin-example.navigation.settings",
      "path": "/admin/kuikpay/settings"
    },
    {
      "labelId": "checkoutless.statistics",
      "path": "/admin/kuikpay/statistics"
    },
    {
      "labelId": "checkoutless.paymentsList",
      "path": "/admin/kuikpay/payment-list"
    },
    {
      "labelId": "checkoutless.styleSettings",
      "path": "/admin/kuikpay/style-settings"
    }
  ]
}

```


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

[User] Show me the implementation of mycheckout-store-framework/admin/routes.json from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin.app.checkoutless-settings": {
    "component": "adminExample",
    "path": "/admin/app/kuikpay/settings"
  },
  "admin.app.checkoutless-linksList": {
    "component": "adminLinksList",
    "path": "/admin/app/kuikpay/links"
  },
  "admin.app.checkoutless-linkForm": {
    "component": "adminLinkForm",
    "path": "/admin/app/kuikpay/links/new"
  },
  "admin.app.checkoutless-form": {
    "component": "adminJsonSchema",
    "path": "/admin/app/kuikpay/form"
  },
  "admin.app.checkoutless-statistics": {
    "component": "adminStatistics",
    "path": "/admin/app/kuikpay/statistics"
  },
  "admin.app.payment-list": {
    "component": "adminPaymentList",
    "path": "/admin/app/kuikpay/payment-list"
  },
  "admin.app.styles-settings": {
    "component": "adminStyleSettings",
    "path": "/admin/app/kuikpay/style-settings"
  }
}

```


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

[User] Show me the implementation of mycheckout-store-framework/docs/README.md from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```markdown
📢 Use this project, [contribute](https://github.com/{OrganizationName}/{AppName}) to it or open issues to help evolve it using [Store Discussion](https://github.com/vtex-apps/store-discussion).

# APP NAME

<!-- DOCS-IGNORE:start -->
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
[![All Contributors](https://img.shields.io/badge/all_contributors-0-orange.svg?style=flat-square)](#contributors-)
<!-- ALL-CONTRIBUTORS-BADGE:END -->
<!-- DOCS-IGNORE:end -->

Under the app's name, you should explain the topic, giving a **brief description** of its **functionality** in a store when installed.

Next, **add media** (either an image of a GIF) with the rendered components, so that users can better understand how the app works in practice.

![Media Placeholder](https://user-images.githubusercontent.com/52087100/71204177-42ca4f80-227e-11ea-89e6-e92e65370c69.png)

## Configuration

In this section, you first must **add the primary instructions** that will allow users to use the app's blocks in their store, such as:

1. Adding the app as a theme dependency in the `manifest.json` file;
2. Declaring the app's main block in a given theme template or inside another block from the theme.

Remember to add a table with all blocks exported by the app and their descriptions. You can verify an example of it on the [Search Result documentation](https://vtex.io/docs/components/all/vtex.search-result@3.56.1/).

Next, add the **props table** containing your block's props.

If the app exports more than one block, create several tables - one for each block. For example:

### `block-1` props

| Prop name    | Type            | Description    | Default value                                                                                |
| ------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| `XXXXX`      | `XXXXXX`       | XXXXXXXX         | `XXXXXX`        |

### `block-2` props

| Prop name    | Type            | Description    | Default value                                                                                |
| ------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| `XXXXX`      | `XXXXXX`       | XXXXXXXX         | `XXXXXX`        |

Prop types are:

- `string`
- `enum`
- `number`
- `boolean`
- `object`
- `array`

When documenting a prop whose type is `object` or `array` another prop table will be needed. You can create it following the example below:

- `propName` object:

| Prop name    | Type            | Description    | Default value                                                                                |
| ------------ | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------- | ---------- |
| `XXXXX`      | `XXXXXX`       | XXXXXXXX         | `XXXXXX`        |

Remember to also use this Configuration section to  **showcase any necessary disclaimer** related to the app and its blocks, such as the different behavior it may display during its configuration.

## Modus Operandi *(not mandatory)*

There are scenarios in which an app can behave differently in a store, according to how it was added to the catalog, for example. It's crucial to go through these **behavioral changes** in this section, allowing users to fully understand the **practical application** of the app in their store.

If you feel compelled to give further details about the app, such as it's **relationship with the VTEX admin**, don't hesitate to use this section.

## Customization

The first thing that should be present in this section is the sentence below, showing users the recipe pertaining to CSS customization in apps:

`In order to apply CSS customizations in this and other blocks, follow the instructions given in the recipe on [Using CSS Handles for store customization](https://vtex.io/docs/recipes/style/using-css-handles-for-store-customization).`

Thereafter, you should add a single column table with the available CSS handles for the app, like the one below. Note that the Handles must be ordered alphabetically.

| CSS Handles |
| ----------- |
| `XXXXX` |
| `XXXXX` |
| `XXXXX` |
| `XXXXX` |
| `XXXXX` |

If there are none, add the following sentence instead:

`No CSS Handles are available yet for the app customization.`

<!-- DOCS-IGNORE:start -->

## Contributors ✨

Thanks goes to these wonderful people:

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- 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 are welcome!

<!-- DOCS-IGNORE:end -->

----

Check out some documentation models that are already live:
- [Breadcrumb](https://github.com/vtex-apps/breadcrumb)
- [Image](https://vtex.io/docs/components/general/vtex.store-components/image)
- [Condition Layout](https://vtex.io/docs/components/all/vtex.condition-layout@1.1.6/)
- [Add To Cart Button](https://vtex.io/docs/components/content-blocks/vtex.add-to-cart-button@0.9.0/)
- [Store Form](https://vtex.io/docs/components/all/vtex.store-form@0.3.4/)

```


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

[User] Show me the implementation of mycheckout-store-framework/graphql/schema.graphql from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```graphql
type Query {
  getUser(email: String!): User!
  getAddress(email: String!): [Address!]!
  getPayments(email: String!): [Payments!]!
  login(email: String!): GeneralResponse!
  verifyCode(email: String!, code: Int!): GeneralUserResponse!
  getCountries: PaginatedCountriesResponse
  getCountry(id: ID): Countries
  getStateCities(country: ID, state: String): [Cities]
  getCities(city: String): [SearchCities]
  getDocumentTypes: [DocumentTypes]
  accounts: Accounts
  validateCredit(email: String, totals: Int): ValidateCredit
  categoryMetrics(data: MetricsInput): CategoryMetrics
  subcategoryMetrics(category: String, data: MetricsInput): SubcategoryMetrics
  ticketAverage(data: MetricsInput): TicketAverage
  checkout(data: MetricsInput): Checkout
  button(data: MetricsInput): ButtonUses
  conversionRate(data: MetricsInput): ConversionRate
  token: String
  getLinksByAccount: [AccountLink]
  getAccount: Account
  getCategories: [Categories]
  getPaymentsMethods: [AdminPaymentsMethods]
  getPaymentProcessStatus(orderId: String): PaymentProccess
  getStyles: Accounts
  authBnpl(authCode: String): AuthBnpl
}

type Mutation {
  createUser(
    email: String!
    habeasData: Boolean
    id_number: String!
    id_type: String!
    ip: String!
    lastname: String!
    name: String!
    phone_code: String!
    phone_number: String!
  ): User!
  updateUser(userArgs: UserInput): GeneralUserResponse!

  externalAddress(args: AddressInput): Address

  createAddress(
    id: ID
    profileId: String!
    country: String!
    state: String!
    city: String!
    street: String!
    number: String!
    postalCode: String!
    receiverName: String!
    neighborhood: String!
    geoCoordinates: GeocoordinatesInput!
    reference: String
  ): Address!
  updateAddress(
    id: ID!
    country: String
    state: String
    city: String
    street: String
    number: String
    postalCode: String
    receiverName: String
    neighborhood: String
    geoCoordinates: GeocoordinatesInput
    reference: String
  ): GeneralAddressResponse!

  deleteAddress(id: ID!): GeneralAddressResponse!

  deletePayment(id: ID!): GeneralPaymentsResponse!

  createOrder(orderArgs: OrderInput): Order
    @cacheControl(maxAge: ZERO, scope: PRIVATE)

  ecommerce(args: EcommerceInput): Ecommerce

  saveToken(
    key: String
    token: String
    paymentMethodId: String
    cvcRequired: Boolean
    buttonMessage: String
    visualization: [VisualizationInput]
  ): String

  createLink(accountApprover: String): AccountLink

  updateLink(id: String, status: String): AccountLink

  deleteLink(id: String): Remove

  handleVisualization(
    visualization: [VisualizationInput]
  ): ResponseVisualization

  createPaymentMethod(
    id: ID!
    type: String
    isActive: Boolean
    paymentMethodName: String
    accountName: String
  ): AdminPaymentsMethods

  updateStyles(styles: String, buttonText: String, restore: Boolean): Account
}

```


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

[User] Show me the implementation of mycheckout-store-framework/node/service.json from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "memory": 256,
  "ttl": 60,
  "timeout": 30,
  "minReplicas": 2,
  "maxReplicas": 5,
  "workers": 1,
  "routes": {
    "healthcheck": {
      "path": "/_v/api/mycheckoutv1/healthcheck",
      "public": true
    },
    "scheduler": {
      "path": "/_v/api/mycheckoutv1/scheduler",
      "public": true
    }
  }
}

```


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

[User] Show me the implementation of mycheckout-store-framework/node/package.json from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "ramda": "^0.26.1",
    "co-body": "^6.0.0",
    "qs": "^6.10.3"
  },
  "devDependencies": {
    "@types/bluebird": "^3.5.25",
    "@types/co-body": "^0.0.3",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.0.0",
    "@types/ramda": "types/npm-ramda#dist",
    "@vtex/api": "6.45.12",
    "@vtex/test-tools": "^3.4.3",
    "tslint": "^5.12.0",
    "tslint-config-vtex": "^2.1.0",
    "typescript": "3.9.7",
    "vtex.admin-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.admin-graphql@2.36.5/public/@types/vtex.admin-graphql",
    "vtex.catalog-api-proxy": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.catalog-api-proxy@0.10.2/public/_types/react",
    "vtex.checkout-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-graphql@0.65.1/public/@types/vtex.checkout-graphql",
    "vtex.checkout-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.48.0/public/@types/vtex.checkout-resources",
    "vtex.order-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-manager@0.11.1/public/@types/vtex.order-manager",
    "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
    "vtex.search-page-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-page-context@0.2.0/public/@types/vtex.search-page-context",
    "vtex.store": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store@2.123.0/public/@types/vtex.store",
    "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.149.3/public/@types/vtex.store-graphql",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.1/public/@types/vtex.styleguide"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty && tslint -c tslint.json --fix './**/*.ts'"
  },
  "version": "0.2.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 mycheckout-store-framework/node/index.ts from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type {
  Cached,
  ParamsContext,
  RecorderState,
  ServiceContext,
} from '@vtex/api'
import { method, Service, LRUCache } from '@vtex/api'

import { Clients } from './clients'
import { healthcheck } from './middlewares/healthcheck'
import { scheduler } from './middlewares/scheduler'
import * as mutations from './resolvers/mutations'
import * as queries from './resolvers/queries'

const MEDIUM_TIMEOUT_MS = 2 * 10000

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

metrics.trackCache('kuikpayAdmin', memoryCache)

declare global {
  // We declare a global Context type just to avoid re-writing ServiceContext<Clients, State> in every handler and resolver
  type Context = ServiceContext<Clients>
}

// Export a service that defines resolvers and clients' options
export default new Service<Clients, RecorderState, ParamsContext>({
  clients: {
    implementation: Clients,
    options: {
      default: {
        timeout: MEDIUM_TIMEOUT_MS,
        baseURL: 'checkout',
        retries: 2,
      },
      adminMetrics: {
        timeout: MEDIUM_TIMEOUT_MS,
        baseURL: 'statistics',
      },
      ecommerce: {
        timeout: MEDIUM_TIMEOUT_MS,
        baseURL: 'statistics',
      },
      orders: {
        timeout: MEDIUM_TIMEOUT_MS,
      },
      orionServices: {
        timeout: MEDIUM_TIMEOUT_MS,
        baseURL: 'orion',
      },
      status: {
        memoryCache,
      },
    },
  },
  graphql: {
    resolvers: {
      Mutation: mutations,
      Query: queries,
    },
  },
  routes: {
    scheduler: method({
      POST: [scheduler],
    }),
    healthcheck: method({
      GET: [healthcheck],
    }),
  },
})

```


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

[User] Show me the implementation of mycheckout-store-framework/react/QuickpayButton.test.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { render } from '@vtex/test-tools/react'

import Greeting from './QuickpayButton'

test('greets Fred', () => {
  const { queryByText } = render(<Greeting name="Fred" />)

  expect(queryByText('Hey, Fred')).toBeInTheDocument()
})

```


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

[User] Show me the implementation of mycheckout-store-framework/react/KuikpayQuotaInformation.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useMemo } from 'react'
import { KuikpayQuotaInformative } from 'kuikpay-sdk'
import useProduct from 'vtex.product-context/useProduct'
// eslint-disable-next-line no-restricted-imports
import { pathOr, path } from 'ramda'

import { CONSTANTS } from './utils'

const KuikpayQuotaInformation = () => {
  const ProductContext = useProduct()
  const language = __RUNTIME__?.culture?.language
  const theme = __RUNTIME__?.query?.theme || 'kuikpay'
  // eslint-disable-next-line react-hooks/exhaustive-deps
  const runtime = {
    account: __RUNTIME__?.account,
    workspace: __RUNTIME__?.workspace,
    platform: CONSTANTS.platform,
  }

  const selectedItem = useMemo(() => {
    return pathOr(
      path(['product', 'items', 0], ProductContext),
      ['selectedItemasas'],
      ProductContext
    )
  }, [ProductContext])

  return useMemo(
    () => (
      <div>
        <KuikpayQuotaInformative
          language={language}
          theme={theme}
          selectedItem={selectedItem as any}
          runtime={runtime}
        />
      </div>
    ),
    [language, theme, selectedItem, runtime]
  )
}

export default KuikpayQuotaInformation

```


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

[User] Show me the implementation of mycheckout-store-framework/react/adminStyleSettings.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
export { default } from './admin/component/StyleSettings'

```


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

[User] Show me the implementation of mycheckout-store-framework/react/adminExample.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable no-restricted-imports */
import type { FC } from 'react'
import React, { useEffect, useState } from 'react'
import { useMutation, useQuery } from 'react-apollo'
import {
  Layout,
  PageBlock,
  Button,
  Alert,
  Spinner,
  Textarea,
  Divider,
} from 'vtex.styleguide'
import { FormattedMessage } from 'react-intl'
import { pathOr } from 'ramda'

import Categories from './admin/component/categories'
import saveTokenGQL from './admin/graphql/saveToken.graphql'
import getAccountGQL from './admin/graphql/getAccount.graphql'

const AdminExample: FC = () => {
  const [buttonMessage, setButtonMessage] = useState('')
  const [cvcRequired] = useState(true)
  const [showAlert, setShowAlert] = useState(false)
  const [showIsNotConfigured, setShowIsNotConfigured] = useState(false)
  const [categories, setCategories] = useState([])
  const [visualization, setVisualization] = useState([])

  const [saveToken] = useMutation(saveTokenGQL)
  const { loading, data } = useQuery(getAccountGQL)

  useEffect(() => {
    if (!data || !data.getAccount) return
    setShowIsNotConfigured(
      data.getAccount.isConfigured !== null
        ? !data.getAccount.isConfigured
        : true
    )
    setButtonMessage(pathOr('', ['getAccount', 'buttonMessage'], data))
    setCategories(pathOr([], ['getAccount', 'visualization'], data))
  }, [data])

  const handleClick = () => {
    saveToken({
      variables: { cvcRequired, visualization, buttonMessage },
    }).then(() => {
      setShowAlert(true)
      setShowIsNotConfigured(false)
    })
  }

  if (loading) {
    return <Spinner />
  }

  return (
    <Layout>
      <PageBlock
        title={<FormattedMessage id="checkoutless.settings.title" />}
        subtitle={<FormattedMessage id="checkoutless.settings.subtitle" />}
        variation="full"
      >
        {showAlert ? (
          <div className="mb5">
            <Alert
              autoClose={5000}
              type="success"
              onClose={() => setShowAlert(false)}
            >
              <FormattedMessage id="checkoutless.settings.success" />
            </Alert>
          </div>
        ) : (
          <></>
        )}
        {showIsNotConfigured && (
          <div className="mb5">
            <Alert type="warning" onClose={() => setShowIsNotConfigured(false)}>
              <FormattedMessage id="checkoutless.settings.warning" />
            </Alert>
          </div>
        )}

        <div className="mb5">
          <Textarea
            label="Button Message"
            onChange={(e: any) => setButtonMessage(e.target.value)}
            value={buttonMessage}
            maxLength="140"
            helpText={
              <FormattedMessage id="checkoutless.settings.buttonMessage" />
            }
          />
        </div>
        {/* <div className="mb5">
          <Toggle
            label="Require CVC"
            checked={cvcRequired}
            semantic
            onChange={() => setCvcRequired(!cvcRequired)}
          />
        </div> */}
        <Divider />
        <Categories visualization={categories} onChange={setVisualization} />
      </PageBlock>
      <div className="flex justify-end">
        <Button onClick={handleClick}>
          <FormattedMessage id="checkoutless.inputs.save-button" />
        </Button>
      </div>
    </Layout>
  )
}

export default AdminExample

```


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

[User] Show me the implementation of mycheckout-store-framework/react/QuickpayButton.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
// import React, { useState, useEffect } from 'react'
// import { useMutation } from 'react-apollo'
// import { Kuikpay } from 'kuikpay-sdk'
// import { useOrderForm } from 'vtex.order-manager/OrderForm'
// import addToCartMutation from 'vtex.checkout-resources/MutationAddToCart'
// import updateItemsMutation from 'vtex.checkout-resources/MutationUpdateItems'
// import useProduct from 'vtex.product-context/useProduct'
// import updateOrderFormProfileMutation from 'vtex.checkout-resources/MutationUpdateOrderFormProfile'
// import insertCouponMutation from 'vtex.checkout-resources/MutationInsertCoupon'
// import { useProductDispatch } from 'vtex.product-context/ProductDispatchContext'

// import removeItemOfferingMutation from './mutations/removeItemOffering.graphql'
// import addItemOfferingMutation from './mutations/addItemOffering.graphql'

// import './App.global.css'
// import type {
//   //Card,
//   CartSimulation,
//   Config,
//   CustomData,
//   Item,
//   ItemToAdd,
//   ItemToRemove,
//   OfferingInput,
//   OrderForm,
//   ProductItem,
//   Profile,
//   ResponseValidateItem,
//   Seller,
//   Totalizer,
// } from './interfaces'

// interface Props {
//   validateItems?: () => ResponseValidateItem[]
//   customData?: CustomData
//   isVisible?: boolean
//   config?: Config
//   validateBeforeOfAdd?: () => boolean | undefined
//   sellerId?: string
//   onClickBehavior?: 'ensure-sku-selection'
//   handleGetDocumentsClient?: (email: string) => void
// }

// function App(props: Props) {
//   const {
//     validateItems,
//     customData,
//     isVisible,
//     onClickBehavior,
//     validateBeforeOfAdd,
//     sellerId,
//     config,
//     handleGetDocumentsClient,
//   } = props

//   const [order, setOrder] = useState<OrderForm | null>(null)
//   const [isAvailable, setIsAvailable] = useState(false)
//   const [itemToAdd, setItemToAdd] = useState<ItemToAdd | undefined>()

//   const {
//     selectedItem: selectedItemContext,
//     selectedQuantity,
//     product,
//   } = useProduct()

//   const selectedItem = selectedItemContext ?? product?.items[0]
//   const dispatch = useProductDispatch()
//   const itemsLength = product?.items?.length ?? 0
//   const multipleAvailableSKUs = itemsLength > 1

//   useEffect(() => {
//     const availableBySeller = selectedItem?.sellers?.find(
//       (seller: Seller) => seller.commertialOffer.AvailableQuantity > 0
//     )

//     if (availableBySeller) {
//       setIsAvailable(true)
//     } else {
//       setIsAvailable(false)
//     }

//     setItemToAdd({
//       id: selectedItem?.itemId,
//       quantity: selectedQuantity,
//       seller: sellerId ?? selectedItem?.sellers[0]?.sellerId,
//     })
//   }, [selectedItem, selectedQuantity, sellerId])

//   const { orderForm, loading, setOrderForm } = useOrderForm()

//   const [addToCart] = useMutation(addToCartMutation)
//   const [updateItems] = useMutation(updateItemsMutation)
//   const [updateOrderFormProfile] = useMutation(updateOrderFormProfileMutation)
//   const [insertCoupon] = useMutation(insertCouponMutation)

//   const handleInsertCoupon = (text: string) => {
//     insertCoupon({
//       variables: {
//         text,
//       },
//     }).then((data) => setOrderForm(data.data.insertCoupon))
//   }

//   const [addItemOffering] = useMutation(addItemOfferingMutation)
//   const [removeItemOffering] = useMutation(removeItemOfferingMutation)

//   const handleAddItemOffering = (offeringInput: OfferingInput) => {
//     addItemOffering({
//       variables: {
//         offeringInput,
//       },
//     }).then((data) => setOrderForm(data.data.addItemOffering))
//   }

//   const handleRemoveItemOffering = (offeringInput: OfferingInput) => {
//     removeItemOffering({
//       variables: {
//         offeringInput,
//       },
//     }).then((data) => setOrderForm(data.data.removeItemOffering))
//   }

//   const handleAddToCart = (item: ItemToAdd) => {
//     const id: number = +item.id

//     addToCart({
//       variables: {
//         items: [
//           {
//             id,
//             quantity: item.quantity,
//             seller: item.seller,
//           },
//         ],
//       },
//     }).then((data) => setOrderForm(data.data.addToCart))
//   }

//   const handleUpdateItems = (items: ItemToRemove[]) => {
//     updateItems({
//       variables: {
//         orderItems: items,
//       },
//     }).then((data) => setOrderForm(data.data.updateItems))
//   }

//   const handleClearItems = (items: ItemToRemove[]) => {
//     updateItems({
//       variables: {
//         orderItems: items,
//       },
//     }).then((data) => setOrderForm(data.data.updateItems))
//   }

//   const handleUpdateOrderFormProfile = (profile: Profile) => {
//     updateOrderFormProfile({
//       variables: {
//         profile,
//       },
//     })
//   }

//   const cartSimulation = async (body: CartSimulation) => {
//     const myHeaders = new Headers()

//     myHeaders.append('Accept', 'application/json')
//     myHeaders.append('Content-Type', 'application/json')

//     const raw = JSON.stringify(body)

//     const requestOptions = {
//       method: 'POST',
//       headers: myHeaders,
//       body: raw,
//       redirect: 'follow' as const,
//     }

//     const response = await fetch(
//       '/api/checkout/pub/orderforms/simulation',
//       requestOptions
//     )

//     return response
//   }

//   useEffect(() => {
//     if (loading) return

//     const formattedOrderForm = {
//       clientProfileData: {
//         email: orderForm.clientProfileData?.email,
//       },
//       shippingData: {
//         selectedAddress: {
//           addressId: orderForm.selectedAddress?.addressId || '',
//           addressType: orderForm.selectedAddress?.addressType || '',
//           city: orderForm.selectedAddress?.city || '',
//           complement: orderForm.selectedAddress?.complement || '',
//           country: orderForm.selectedAddress?.country || '',
//           geoCoordinates: orderForm.selectedAddress?.geoCoordinates || '',
//           isDisposable: orderForm.selectedAddress?.isDisposable || '',
//           neighborhood: orderForm.selectedAddress?.neighborhood || '',
//           number: orderForm.selectedAddress?.number || '',
//           postalCode: orderForm.selectedAddress?.postalCode || '',
//           receiverName: orderForm.selectedAddress?.receiverName || '',
//           reference: orderForm.selectedAddress?.reference || '',
//           state: orderForm.selectedAddress?.state || '',
//           street: orderForm.selectedAddress?.street || '',
//           completed: false,
//         },
//       },
//       items: orderForm.items.map((item: Item) => ({
//         ...item,
//         sellingPrice: item.sellingPrice / 100,
//         price: item.price / 100,
//         imageUrl: item.imageUrls.at1x,
//       })),
//       totalizers: orderForm.totalizers?.map((totalizer: Totalizer) => ({
//         ...totalizer,
//         value: totalizer.value / 100,
//       })),
//       value: orderForm.value / 100,
//       // paymentData: {
//       //   availablePaymentMethods: orderForm.paymentData?.availableAccounts?.map(
//       //     (card: Card) => ({
//       //       franchise: card.paymentSystemName,
//       //       id: card.accountId,
//       //       number: card.cardNumber.substring(12),
//       //       paymentMethod: 'tc',
//       //     })
//       //   ),
//       // },
//       messages: orderForm.messages.couponMessages
//         ? orderForm.messages.couponMessages
//         : orderForm.messages,
//       marketingData: {
//         coupon: orderForm.marketingData.coupon,
//       },
//     }

//     setOrder(formattedOrderForm)
//   }, [loading, orderForm])

//   if (loading) return null

//   const language = __RUNTIME__?.culture?.language
//   const theme = __RUNTIME__?.query?.theme || 'vtex'
//   const runtime = {
//     account: __RUNTIME__?.account,
//     workspace: __RUNTIME__?.workspace,
//   }

//   const processIsVisible = () => {
//     if (isVisible === null || isVisible === undefined) {
//       return !selectedItem ? true : isAvailable
//     }

//     return isVisible
//   }

//   const handleSelectedItem = (item: ProductItem) => {
//     dispatch({ type: 'SET_SELECTED_ITEM', args: { item } })
//   }

//   return (
//     <Kuikpay
//       addToCart={handleAddToCart}
//       itemToAdd={itemToAdd}
//       updateItems={handleUpdateItems}
//       orderForm={order}
//       updateSelectedAddress={() => {}}
//       updateOrderFormProfile={handleUpdateOrderFormProfile}
//       cartSimulation={cartSimulation}
//       clearData={handleClearItems}
//       language={language}
//       isVisible={processIsVisible()}
//       theme={theme}
//       insertCoupon={handleInsertCoupon}
//       addItemOffering={handleAddItemOffering}
//       removeItemOffering={handleRemoveItemOffering}
//       validateItems={validateItems}
//       customData={customData}
//       config={config}
//       validateBeforeOfAdd={validateBeforeOfAdd}
//       multipleAvailableSKUs={multipleAvailableSKUs}
//       onClickBehavior={onClickBehavior}
//       product={product}
//       selectedItem={selectedItem}
//       handleSelectedItem={handleSelectedItem}
//       runtime={runtime}
//       handleGetDocumentsClient={handleGetDocumentsClient}
//     />
//   )
// }

// export default App

```


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

[User] Show me the implementation of mycheckout-store-framework/react/QuickpayButtonV2.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useState, useEffect } from 'react'
import { useMutation } from 'react-apollo'
import { Kuikpay } from 'kuikpay-sdk'
import { useOrderForm } from 'vtex.order-manager/OrderForm'
import addToCartMutation from 'vtex.checkout-resources/MutationAddToCart'
import useProduct from 'vtex.product-context/useProduct'
import { useProductDispatch } from 'vtex.product-context/ProductDispatchContext'

// eslint-disable-next-line import/order

import './App.global.css'
import type {
  ItemToAdd,
  ProductItem,
  ResponseValidateItem,
  Seller,
} from './interfaces'
import { CONSTANTS } from './utils'

interface Props {
  validateItems?: () => ResponseValidateItem[]
  isVisible?: boolean
  validateBeforeOfAdd?: () => boolean | undefined
  sellerId?: string
  onClickBehavior?: 'ensure-sku-selection'
  forceOpenModal?: boolean
}

function App(props: Props) {
  const {
    isVisible,
    onClickBehavior,
    validateBeforeOfAdd,
    sellerId,
    forceOpenModal,
  } = props

  const [isAvailable, setIsAvailable] = useState(false)
  const [itemToAdd, setItemToAdd] = useState<ItemToAdd | undefined>()
  const [multipleAvailableSKUs, setMultipleAvailableSKUs] = useState(false)
  const [isBehavior, setIsBehavior] = useState(onClickBehavior)

  const {
    selectedItem: selectedItemContext,
    selectedQuantity,
    product,
    skuSelector: { areAllVariationsSelected },
  } = useProduct()

  const dispatch = useProductDispatch()

  useEffect(() => {
    if (!onClickBehavior) {
      setIsBehavior(
        areAllVariationsSelected ? undefined : 'ensure-sku-selection'
      )
    }
  }, [areAllVariationsSelected, onClickBehavior])

  const selectedItem =
    selectedItemContext || (product?.items?.length ? product?.items[0] : null)

  const itemsLength = product?.items?.length ?? 0

  useEffect(() => {
    if (itemsLength > 1) {
      const hasVariations =
        product?.items?.filter((item: any) => item.variations?.length > 0) || []

      hasVariations.length > 0 && setMultipleAvailableSKUs(true)
    }
  }, [itemsLength, product?.items, selectedItem])

  useEffect(() => {
    const availableBySeller = selectedItem?.sellers?.find(
      (seller: Seller) => seller.commertialOffer.AvailableQuantity > 0
    )

    if (availableBySeller) {
      setIsAvailable(true)
    } else {
      setIsAvailable(false)
    }

    setItemToAdd({
      id: selectedItem?.itemId,
      quantity: selectedQuantity,
      seller: sellerId ?? selectedItem?.sellers[0]?.sellerId,
    })
  }, [selectedItem, selectedQuantity, sellerId])

  const { setOrderForm } = useOrderForm()

  const [addToCart] = useMutation(addToCartMutation)

  const handleAddToCart = (item: ItemToAdd) => {
    const id: number = item.id ? +item.id : NaN

    // eslint-disable-next-line use-isnan
    if (id !== NaN) {
      addToCart({
        variables: {
          items: [
            {
              id,
              quantity: item.quantity,
              seller: item.seller,
            },
          ],
        },
      }).then((data) => setOrderForm(data.data.addToCart))
    }
  }

  const processIsVisible = () => {
    if (isVisible === null || isVisible === undefined) {
      return !selectedItem ? true : isAvailable
    }

    return isVisible
  }

  const handleSelectedItem = (item: ProductItem) => {
    dispatch({ type: 'SET_SELECTED_ITEM', args: { item } })
  }

  const runtime = {
    account: __RUNTIME__?.account,
    workspace: __RUNTIME__?.workspace,
    platform: CONSTANTS.platform,
  }

  if (!selectedItem) return null

  return (
    <Kuikpay
      addToCart={handleAddToCart}
      itemToAdd={itemToAdd}
      isVisible={processIsVisible()}
      validateBeforeOfAdd={validateBeforeOfAdd}
      multipleAvailableSKUs={multipleAvailableSKUs}
      onClickBehavior={isBehavior}
      product={product}
      selectedItem={selectedItem}
      forceOpenModal={forceOpenModal}
      runtime={runtime}
      handleSelectedItem={handleSelectedItem}
    />
  )
}

export default App

```


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

[User] Show me the implementation of mycheckout-store-framework/react/adminJsonSchema.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const AdminJsonSchema = () => {
  return (
    <div className="h-100 bg-light-silver min-vh-100 flex flex-row-reverse bg-base bb bw1 b--muted-5">
      <div
        className="center w-100 vh-100 overflow-y-auto"
        style={{ maxWidth: 320 }}
      >
        <iframe
          className="w-100 h-100"
          frameBorder="0"
          id="kuikpay-iframe"
          src="https://milwaukee-voice-jury-thought.trycloudflare.com/"
          title="kuikpay-iframe"
        />
      </div>
    </div>
  )
}

export default AdminJsonSchema

```


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

[User] Show me the implementation of mycheckout-store-framework/react/adminLinksList.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useMemo, useState } from 'react'
import type { FC } from 'react'
import {
  Layout,
  PageBlock,
  PageHeader,
  Table,
  Tag,
  Alert,
} from 'vtex.styleguide'
import { useRuntime } from 'vtex.render-runtime'
import { FormattedMessage, defineMessages, useIntl } from 'react-intl'
import { useQuery } from 'react-apollo'

import LinkItemAction from './admin/component/LinkItemAction'
import GET_LINKS_ACCOUNT from './admin/graphql/getLinksByAccount.graphql'

const LinkListContext = React.createContext<any>(null)

const messages = defineMessages({
  approvedMessage: { id: 'checkoutless.linksList.approvedMessage' },
  rejectedMessage: { id: 'checkoutless.linksList.rejectedMessage' },
  deleteMessage: { id: 'checkoutless.linksList.deleteMessage' },
})

const defaultSchema = {
  properties: {
    account: {
      title: <FormattedMessage id="checkoutless.linksList.accountColumn" />,
    },
    date: {
      title: <FormattedMessage id="checkoutless.linksList.dateColumn" />,
    },
    status: {
      title: <FormattedMessage id="checkoutless.linksList.statusColumn" />,
      cellRenderer: ({
        cellData,
        rowData,
      }: {
        cellData: string
        rowData: { approver: boolean }
      }) => {
        return (
          <span className="tc">
            {cellData === 'pending' && rowData.approver && (
              <Tag type="warning">
                <FormattedMessage id="checkoutless.linksList.pending" />
              </Tag>
            )}
            {cellData === 'pending' && !rowData.approver && (
              <Tag>
                <FormattedMessage id="checkoutless.linksList.pending" />
              </Tag>
            )}
            {cellData === 'approved' && (
              <Tag type="success">
                <FormattedMessage id="checkoutless.linksList.approved" />
              </Tag>
            )}
            {cellData === 'rejected' && (
              <Tag type="error">
                <FormattedMessage id="checkoutless.linksList.rejected" />
              </Tag>
            )}
          </span>
        )
      },
    },
    action: {
      title: <FormattedMessage id="checkoutless.linksList.actionColumn" />,
      cellRenderer: ({
        rowData,
      }: {
        rowData: { approver: boolean; status: string; id: string }
      }) => {
        return (
          <LinkListContext.Consumer>
            {(value) => (
              <LinkItemAction
                rowData={rowData}
                refetch={value.refetch}
                setMessageId={value.setMessageId}
                setShowAlert={value.setShowAlert}
              />
            )}
          </LinkListContext.Consumer>
        )
      },
    },
  },
}

const LinkList: FC = () => {
  const [messageId, setMessageId] = useState<
    'deleteMessage' | 'approvedMessage' | 'rejectedMessage'
  >('deleteMessage')

  const [showAlert, setShowAlert] = useState(false)
  const { navigate } = useRuntime()
  const intl = useIntl()

  const { data, loading, refetch } = useQuery(GET_LINKS_ACCOUNT, {
    fetchPolicy: 'network-only',
  })

  const linksListResult = useMemo(() => {
    if (data) {
      return data.getLinksByAccount
    }

    return []
  }, [data])

  return (
    <LinkListContext.Provider value={{ refetch, setMessageId, setShowAlert }}>
      <Layout
        pageHeader={
          <PageHeader
            title={<FormattedMessage id="checkoutless.linksList.title" />}
          />
        }
      >
        <PageBlock variation="full">
          {showAlert ? (
            <div className="mb5">
              <Alert
                autoClose={5000}
                type="success"
                onClose={() => setShowAlert(false)}
              >
                {intl.formatMessage(messages[messageId])}
              </Alert>
            </div>
          ) : (
            <></>
          )}
          <Table
            fullWidth
            schema={defaultSchema}
            items={linksListResult}
            loading={loading}
            toolbar={{
              newLine: {
                label: (
                  <FormattedMessage id="checkoutless.linksList.newLinkButton" />
                ),
                handleCallback: () =>
                  navigate({ to: '/admin/app/kuikpay/links/new' }),
              },
            }}
          />
        </PageBlock>
      </Layout>
    </LinkListContext.Provider>
  )
}

export default LinkList

```


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

[User] Show me the implementation of mycheckout-store-framework/react/package.json from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "kuikpay",
  "version": "0.0.0",
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "@types/ramda": "^0.27.64",
    "apollo-client": "^2.6.8",
    "kuikpay-sdk": "1.0.27",
    "ramda": "^0.28.0",
    "react": "^17.0.2",
    "react-apollo": "^3.1.3",
    "react-color": "^2.19.3",
    "react-dom": "^16.12.0",
    "react-intl": "^3.12.0"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/jest": "^25.1.4",
    "@types/node": "^13.13.52",
    "@types/react": "^16.14.14",
    "@vtex/test-tools": "^3.4.2",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-cache-inmemory": "^1.6.5",
    "graphql": "^14.6.0",
    "recharts": "^2.1.8",
    "typescript": "3.9.7",
    "vtex.admin-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.admin-graphql@2.36.5/public/@types/vtex.admin-graphql",
    "vtex.catalog-api-proxy": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.catalog-api-proxy@0.10.2/public/_types/react",
    "vtex.checkout-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-graphql@0.65.1/public/@types/vtex.checkout-graphql",
    "vtex.checkout-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.48.0/public/@types/vtex.checkout-resources",
    "vtex.order-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-manager@0.11.1/public/@types/vtex.order-manager",
    "vtex.product-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.product-context@0.10.0/public/@types/vtex.product-context",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime",
    "vtex.search-page-context": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.search-page-context@0.2.0/public/@types/vtex.search-page-context",
    "vtex.store": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store@2.123.0/public/@types/vtex.store",
    "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.149.3/public/@types/vtex.store-graphql",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.1/public/@types/vtex.styleguide"
  }
}

```


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

[User] Show me the implementation of mycheckout-store-framework/react/KuikpayWrapper.tsx from the mycheckout-store-framework VTEX app.

[Assistant]
Here's the implementation:

```tsx
// import React, { useEffect, useState } from 'react'
// import { KuikpayWrapper } from 'kuikpay-sdk'
// import { useLazyQuery, useMutation } from 'react-apollo'
// import insertCouponMutation from 'vtex.checkout-resources/MutationInsertCoupon'
// import { useOrderForm } from 'vtex.order-manager/OrderForm'
// import updateOrderFormProfileMutation from 'vtex.checkout-resources/MutationUpdateOrderFormProfile'
// import OrderFormQuery from 'vtex.checkout-resources/QueryOrderForm'
// import updateItemsMutation from 'vtex.checkout-resources/MutationUpdateItems'
// import { useSearchPage } from 'vtex.search-page-context/SearchPageContext'
// import addToCartMutation from 'vtex.checkout-resources/MutationAddToCart'

import type {
  Address,
  BlockedShipping,
  Config,
  CustomData,
  // Item,
  // ItemToAdd,
  // ItemToRemove,
  // OfferingInput,
  // OrderForm,
  // Profile,
  StoreTermsAndConditionsContent,
  ShowPaymentMethod,
} from './interfaces'
// import addItemOfferingMutation from './mutations/addItemOffering.graphql'
// import removeItemOfferingMutation from './mutations/removeItemOffering.graphql'
// import { CONSTANTS } from './utils'

interface Props {
  children: JSX.Element
  addressAlternative?: Address | undefined | null
  customData?: CustomData
  config?: Config
  skuSelectorProps?: {
    useImageInColor?: boolean
    visibleVariations?: string[]
  }
  handleGetDocumentsClient?: (email: string) => void
  storeTermsAndConditionsContent?: StoreTermsAndConditionsContent[]
  blockedShipping?: BlockedShipping
  showPaymentMethods?: ShowPaymentMethod[]
}

// const Kuikpaywrapper = ({
//   addressAlternative,
//   skuSelectorProps,
//   customData,
//   config,
//   handleGetDocumentsClient,
//   storeTermsAndConditionsContent,
//   blockedShipping,
//   showPaymentMethods,
// }: Props) => {
const Kuikpaywrapper = (_props: Props) => {
  // const [formattedItems, setFormattedItems] = useState([])
  // const [order, setOrder] = useState<OrderForm | null>(null)
  // const [insertCoupon] = useMutation(insertCouponMutation)
  // const [addItemOffering] = useMutation(addItemOfferingMutation)
  // const [removeItemOffering] = useMutation(removeItemOfferingMutation)
  // const [updateOrderFormProfile] = useMutation(updateOrderFormProfileMutation)
  // const [updateItems] = useMutation(updateItemsMutation)
  // const [addToCart] = useMutation(addToCartMutation)
  // const OrderFormContext = useOrderForm()
  // const { orderForm, loading, setOrderForm } = OrderFormContext
  // const { searchQuery } = useSearchPage()
  // const [getOrderForm, { data: orderFormData }] = useLazyQuery(OrderFormQuery, {
  //   fetchPolicy: 'network-only',
  // })

  // const cartSimulation = async (simulationItems: any) => {
  //   const myHeaders = new Headers()

  //   myHeaders.append('Accept', 'application/json')
  //   myHeaders.append('Content-Type', 'application/json')

  //   const raw = JSON.stringify(simulationItems)

  //   const requestOptions = {
  //     method: 'POST',
  //     headers: myHeaders,
  //     body: raw,
  //     redirect: 'follow' as const,
  //   }

  //   const response = await fetch(
  //     '/api/checkout/pub/orderforms/simulation?RnbBehavior=0',
  //     requestOptions
  //   )

  //   return response
  // }

  // const parseLogisticsInfo = (deliveryOptions: any, selectedAddress: any) => {
  //   const initialLogisticsInfo: any[] = []

  //   deliveryOptions.forEach((deliveryOption: any, index: number) => {
  //     initialLogisticsInfo.push({
  //       addressId: selectedAddress.addressId,
  //       itemIndex: index, // this is not real, only because simulation needs it to trigger a totalizer
  //       selectedSla: deliveryOption.id,
  //       deliveryChannel: deliveryOption.deliveryChannel,
  //     })
  //   })

  //   // merge delivery options
  //   // merge pickup options
  //   return initialLogisticsInfo
  // }

  // useEffect(() => {
  //   setFormattedItems(
  //     orderForm.items.map((item: Item) => ({
  //       ...item,
  //       sellingPrice: item.sellingPrice / 100,
  //       price: item?.price / 100,
  //       listPrice: item?.listPrice / 100,
  //       imageUrl: item?.imageUrls?.at1x,
  //     }))
  //   )
  // }, [orderForm.items])

  // useEffect(() => {
  //   if (loading) return

  //   const formattedOrderForm: any = {
  //     clientProfileData: {
  //       email: orderForm.clientProfileData?.email,
  //     },
  //     shippingData: {
  //       addressAlternative: null,
  //       selectedAddress: {
  //         addressId: orderForm.shipping?.selectedAddress?.addressId || '',
  //         addressType: orderForm.shipping?.selectedAddress?.addressType || '',
  //         city: orderForm.shipping?.selectedAddress?.city || '',
  //         complement: orderForm.shipping?.selectedAddress?.complement || '',
  //         country: orderForm.shipping?.selectedAddress?.country || '',
  //         geoCoordinates:
  //           orderForm.shipping?.selectedAddress?.geoCoordinates || '',
  //         isDisposable: orderForm.shipping?.selectedAddress?.isDisposable || '',
  //         neighborhood: orderForm.shipping?.selectedAddress?.neighborhood || '',
  //         number: orderForm.shipping?.selectedAddress?.number || '',
  //         postalCode: orderForm.shipping?.selectedAddress?.postalCode || '',
  //         receiverName: orderForm.shipping?.selectedAddress?.receiverName || '',
  //         reference: orderForm.shipping?.selectedAddress?.reference || '',
  //         state: orderForm.shipping?.selectedAddress?.state || '',
  //         street: orderForm.shipping?.selectedAddress?.street || '',
  //         completed: false,
  //       },
  //     },
  //     logisticsInfo: parseLogisticsInfo(
  //       orderForm.shipping?.deliveryOptions,
  //       orderForm.shipping?.selectedAddress
  //     ),
  //     items: formattedItems,
  //     totalizers: orderForm.totalizers,
  //     value: orderForm.value / 100,
  //     paymentData: {
  //       availablePaymentMethods: orderForm.paymentData?.availableAccounts?.map(
  //         (card: any) => ({
  //           franchise: card.paymentSystemName,
  //           id: card.accountId,
  //           number: card.cardNumber.substring(12),
  //           paymentMethod: 'tc',
  //           origin: 'store',
  //         })
  //       ),
  //     },
  //     messages: orderForm.messages.couponMessages
  //       ? orderForm.messages.couponMessages
  //       : orderForm.messages,
  //     marketingData: {
  //       coupon: orderForm.marketingData.coupon,
  //     },
  //   }

  //   if (addressAlternative) {
  //     formattedOrderForm.shippingData.addressAlternative = addressAlternative
  //   }

  //   setOrder(formattedOrderForm)
  // }, [
  //   loading,
  //   orderForm.clientProfileData?.email,
  //   orderForm.shipping?.selectedAddress,
  //   orderForm.shipping?.deliveryOptions,
  //   orderForm.items,
  //   orderForm.totalizers,
  //   orderForm.value,
  //   orderForm.paymentData?.availableAccounts,
  //   orderForm.messages,
  //   orderForm.marketingData,
  //   addressAlternative,
  //   formattedItems,
  // ])

  // useEffect(() => {
  //   if (orderFormData) {
  //     setOrderForm(orderFormData?.orderForm)
  //   }
  //   // eslint-disable-next-line react-hooks/exhaustive-deps
  // }, [orderFormData])

  // const clearOrderFormProfile = async () => {
  //   const orderFormId = orderForm?.id
  //   const clientProfileData = orderForm?.clientProfileData

  //   if (clientProfileData) {
  //     await fetch(`/checkout/changeToAnonymousUser/${orderFormId}`, {
  //       method: 'GET',
  //       redirect: 'follow',
  //     }).then(() =>
  //       getOrderForm({
  //         variables: {
  //           refreshOutdatedData: false,
  //         },
  //       })
  //     )
  //   }
  // }

  // const handleInsertCoupon = (text: string) => {
  //   insertCoupon({
  //     variables: {
  //       text,
  //     },
  //   }).then((data) => setOrderForm(data.data.insertCoupon))
  // }

  // const handleAddItemOffering = (offeringInput: OfferingInput) => {
  //   addItemOffering({
  //     variables: {
  //       offeringInput,
  //     },
  //   }).then((data) => setOrderForm(data.data.addItemOffering))
  // }

  // const handleRemoveItemOffering = (offeringInput: OfferingInput) => {
  //   removeItemOffering({
  //     variables: {
  //       offeringInput,
  //     },
  //   }).then((data) => setOrderForm(data.data.removeItemOffering))
  // }

  // const handleUpdateOrderFormProfile = (profile: Profile) => {
  //   updateOrderFormProfile({
  //     variables: {
  //       profile,
  //     },
  //   }).then((data) => setOrderForm(data.data.updateOrderFormProfile))
  // }

  // const handleAddToCart = (item: ItemToAdd) => {
  //   const id: number = item.id ? +item.id : NaN

  //   // eslint-disable-next-line use-isnan
  //   if (id !== NaN) {
  //     addToCart({
  //       variables: {
  //         items: [
  //           {
  //             id,
  //             quantity: item.quantity,
  //             seller: item.seller,
  //           },
  //         ],
  //       },
  //     }).then((data) => setOrderForm(data.data.addToCart))
  //   }
  // }

  // const handleUpdateItems = async (items: ItemToRemove[]) => {
  //   updateItems({
  //     variables: {
  //       orderItems: items?.map((item: ItemToRemove) => ({
  //         uniqueId: item?.uniqueId,
  //         quantity: item?.quantity,
  //       })),
  //     },
  //   })
  //     .then((data) => {
  //       setOrderForm(data.data.updateItems)
  //     })
  //     .then(() => searchQuery?.refetch())
  // }

  // const handleClearItems = (items: ItemToRemove[]) => {
  //   insertCoupon({
  //     variables: {
  //       text: '',
  //     },
  //   }).then(() =>
  //     updateItems({
  //       variables: {
  //         orderItems: items,
  //       },
  //     })
  //       .then((data) => {
  //         setOrderForm(data.data.updateItems)
  //       })
  //       .then(() => searchQuery?.refetch())
  //   )
  // }

  // const language = __RUNTIME__?.culture?.language
  // const theme = __RUNTIME__?.query?.theme || 'kuikpay'
  // const runtime = {
  //   account: __RUNTIME__?.account,
  //   workspace: __RUNTIME__?.workspace,
  //   platform: CONSTANTS.platform,
  // }

  // const production = __RUNTIME__?.production

  // if (!orderForm || orderForm?.id === 'default-order-form') return null

  return null

  // return (
  //   <KuikpayWrapper
  //     sandbox={!production}
  //     updateSelectedAddress={() => {}}
  //     cartSimulation={cartSimulation}
  //     language={language}
  //     theme={theme}
  //     runtime={runtime}
  //     insertCoupon={handleInsertCoupon}
  //     addItemOffering={handleAddItemOffering}
  //     removeItemOffering={handleRemoveItemOffering}
  //     updateOrderFormProfile={handleUpdateOrderFormProfile}
  //     updateItems={handleUpdateItems}
  //     clearData={handleClearItems}
  //     orderForm={order}
  //     addToCart={handleAddToCart}
  //     clearOrderFormProfile={clearOrderFormProfile}
  //     skuSelectorProps={skuSelectorProps}
  //     customData={customData}
  //     config={config}
  //     handleGetDocumentsClient={handleGetDocumentsClient}
  //     storeTermsAndConditionsContent={storeTermsAndConditionsContent}
  //     blockedShipping={blockedShipping}
  //     showPaymentMethods={showPaymentMethods}
  //     hideDiscount
  //   />
  // )
}

export default Kuikpaywrapper

```