[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 react-app-template/react/package.json from the react-app-template VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "CHANGE_ME",
  "version": "0.0.0",
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "apollo-client": "^2.6.8",
    "react": "^16.12.0",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.12.0",
    "react-intl": "^3.12.0"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/node": "^13.9.8",
    "@types/react": "^16.9.31",
    "@vtex/test-tools": "^3.3.2",
    "@vtex/tsconfig": "^0.4.4",
    "apollo-cache-inmemory": "^1.6.5",
    "graphql": "^14.6.0",
    "typescript": "3.9.7"
  },
  "resolutions": {
    "@types/jest": "26.0.15"
  }
}

```


[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 react-app-template/react/Greeting.tsx from the react-app-template VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

type Props = {
  name: string
}

function Greeting({ name }: Props) {
  return <div>Hey, {name}</div>
}

export default Greeting

```


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

[User] Show me the implementation of react-app-template/react/typings/gql.d.ts from the react-app-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.gql' {
  import { DocumentNode } from 'graphql'

  const Schema: DocumentNode

  export default Schema
}

declare module '*.graphql' {
  import { DocumentNode } from 'graphql'

  const schema: DocumentNode

  export default schema
}

```


[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 react-app-template/react/typings/css.d.ts from the react-app-template VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.css' {
  type Styles = {
    [selector: string]: string
  }

  const styles: Styles

  export default styles
}

```


[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 format-currency/docs/README.md from the format-currency VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Format Currency

> Format currency based on sales policy config.

## Usage

Add `"vtex.format-currency": "0.x"` to your dependencies.

### API

#### `FormattedCurrency`

```jsx
import React from 'react'
import { FormattedCurrency } from 'vtex.format-currency'

function Foo() {
  return <FormattedCurrency value={10} />
}
//
//   $
//   10
//   .
//   00
//

export default Foo
```

:info: Do not change the symbol or hide the decimals and fraction using CSS! You can configure the currency, currency symbol and currency decimal places in the Trade Policy settings.

![image](https://user-images.githubusercontent.com/284515/94180906-1c70ba80-fe75-11ea-9cf6-e84f059d924a.png)

:warning: Since IE11 does not support the browser API `formatToParts`, in this browser it will fallback to render:

```html
$ 10.00
```

#### `formatCurrency`

```jsx
import React from 'react'
import { useIntl } from 'react-intl'
import { formatCurrency } from 'vtex.format-currency'
import { useRuntime } from 'vtex.render-runtime'

function Foo({ intl }) {
  const { culture } = useRuntime()
  const intl = useIntl()

  const value = formatCurrency({ intl, culture, value: 10 })

  return {value}
}
//
//   $ 10.00
//

export default Foo
```

```


[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 format-currency/react/package.json from the format-currency VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test",
    "lint": "tsc --noEmit && eslint --ext ts,tsx ."
  },
  "dependencies": {
    "classnames": "^2.2.6",
    "ramda": "^0.26.1",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-intl": "^3.12.0"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/jest": "^25.1.4",
    "@types/node": "^13.9.8",
    "@types/ramda": "^0.26.5",
    "@types/react": "^16.8.10",
    "@vtex/test-tools": "^3.3.2",
    "@vtex/tsconfig": "^0.4.4",
    "typescript": "3.9.7",
    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.4/public/@types/vtex.render-runtime"
  },
  "version": "0.4.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 format-currency/react/formatCurrency.ts from the format-currency VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { IntlShape, FormatNumberOptions } from 'react-intl'

interface FormatCurrencyParams {
  intl: IntlShape
  value: number
  culture: {
    currency: string
    customCurrencyDecimalDigits?: number | null
    customCurrencySymbol?: string | null
  }
}

export default function formatCurrency({
  intl,
  culture,
  value,
}: FormatCurrencyParams) {
  const formatOptions: FormatNumberOptions = {
    style: 'currency',
    currency: culture.currency,
  }

  if (culture.customCurrencyDecimalDigits != null) {
    formatOptions.minimumFractionDigits = culture.customCurrencyDecimalDigits
  }

  /**
   * The default Romanian currency format is wrong
   * https://stackoverflow.com/questions/57526989/return-correct-currency-for-intl-numberformat-romanian-lei
   */
  if (culture.currency === 'RON' && intl.locale.indexOf('ro') === 0) {
    formatOptions.currencyDisplay = 'name'

    return intl.formatNumber(value, formatOptions).replace(' românești', '')
  }

  return intl.formatNumber(value, formatOptions)
}

```


[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 format-currency/react/FormattedCurrency.tsx from the format-currency VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { useRuntime } from 'vtex.render-runtime'
import { FormatNumberOptions, useIntl } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'
import type { CssHandlesTypes } from 'vtex.css-handles'

import formatCurrency from './formatCurrency'

const formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
})

// TypeScript thinks that all browsers have formatToParts
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const hasFormatToParts = !!formatter.formatToParts

const CSS_HANDLES = [
  'currencyContainer',
  'currencyCode',
  'currencyLiteral',
  'currencyInteger',
  'currencyGroup',
  'currencyDecimal',
  'currencyFraction',
  'currencyInfinity',
  'currencyMinusSign',
  'currencyNan',
  'currencyPlusSign',
  'currencyPercentSign',
] as const

const handlesMap: Record<Intl.NumberFormatPartTypes, string> = {
  currency: 'currencyCode',
  literal: 'currencyLiteral',
  integer: 'currencyInteger',
  group: 'currencyGroup',
  decimal: 'currencyDecimal',
  fraction: 'currencyFraction',
  infinity: 'currencyInfinity',
  minusSign: 'currencyMinusSign',
  nan: 'currencyNan',
  plusSign: 'currencyPlusSign',
  percentSign: 'currencyPercentSign',
}

interface Props {
  value: number
  classes?: CssHandlesTypes.CustomClasses<typeof CSS_HANDLES>
}

function FormattedCurrency({ value, classes }: Props) {
  const { culture, getSettings } = useRuntime()
  const settings = getSettings('vtex.store')
  const intl = useIntl()
  const { handles } = useCssHandles(CSS_HANDLES, { classes })

  // In case it's IE11
  if (!hasFormatToParts) {
    const number = formatCurrency({ intl, culture, value })

    return <span className={handles.currencyContainer}>{number}</span>
  }

  const formatOptions: FormatNumberOptions = {
    style: 'currency',
    currency: culture.currency,
  }

  if (culture.customCurrencyDecimalDigits != null) {
    formatOptions.minimumFractionDigits = culture.customCurrencyDecimalDigits
  }

  /**
   * The default Romanian currency format is wrong
   * https://stackoverflow.com/questions/57526989/return-correct-currency-for-intl-numberformat-romanian-lei
   */
  const isRomanian =
    culture.currency === 'RON' && intl.locale.indexOf('ro') === 0

  if (isRomanian) {
    formatOptions.currencyDisplay = 'name'
  }

  const result = intl
    .formatNumberToParts(value, formatOptions)
    .map((part, index) => {
      const handleName = handlesMap[part.type]
      // I spent 20 min here, but could not type this properly
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-ignore
      const handle = handles[handleName]

      if (isRomanian && part.type === 'currency') {
        return (
          <span key={index} className={handle}>
            lei
          </span>
        )
      }

    if (
      part.type === 'currency' &&
      culture?.customCurrencySymbol &&
      settings?.enableCustomCurrencySymbol
    ) {
      return (
        <span key={index} className={handle}>
          {culture.customCurrencySymbol}
        </span>
      )
    }

      return (
        <span key={index} className={handle}>
          {part.value}
        </span>
      )
    })

  return <span className={handles.currencyContainer}>{result}</span>
}

export default FormattedCurrency

```


[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 format-currency/react/typings/vtex.render-runtime.d.ts from the format-currency VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.render-runtime' {
  interface RuntimeContext {
    culture: {
      currency: string
      customCurrencyDecimalDigits?: number | null
      customCurrencySymbol?: string | null
    }
  }

  export const useRuntime = () => RuntimeContext
  export const canUseDOM: boolean
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
declare module '*.graphql' {
  import { DocumentNode } from 'graphql'

  const value: DocumentNode
  export default value
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.styleguide' {
  import { ComponentType } from 'react'

  export const Input: ComponentType<InputProps>

  interface InputProps {
    [key: string]: any
  }
}

```


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

[User] Show me the implementation of format-currency/react/__tests__/FormattedCurrency.test.tsx from the format-currency VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { render } from '@vtex/test-tools/react'
import { useRuntime, RuntimeContext } from 'vtex.render-runtime'

import FormattedCurrency from '../FormattedCurrency'

const mockedUseRuntime = useRuntime as jest.Mock<RuntimeContext>

test('Use currencyCode as default format', () => {
  mockedUseRuntime.mockImplementation(() => ({
    culture: {
      currency: 'USD',
      customCurrencyDecimalDigits: null,
      customCurrencySymbol: null,
    },
  }))

  const { rerender, container } = render(<FormattedCurrency value={10} />)

  let currency = container.querySelector('.currencyCode')
  let integer = container.querySelector('.currencyInteger')
  let decimal = container.querySelector('.currencyDecimal')
  let fraction = container.querySelector('.currencyFraction')

  expect(currency?.innerHTML).toBe('$')
  expect(integer?.innerHTML).toBe('10')
  expect(decimal?.innerHTML).toBe('.')
  expect(fraction?.innerHTML).toBe('00')

  mockedUseRuntime.mockImplementation(() => ({
    culture: {
      currency: 'BRL',
      customCurrencyDecimalDigits: null,
      customCurrencySymbol: null,
    },
  }))

  rerender(<FormattedCurrency value={10} />)

  currency = container.querySelector('.currencyCode')
  integer = container.querySelector('.currencyInteger')
  decimal = container.querySelector('.currencyDecimal')
  fraction = container.querySelector('.currencyFraction')

  expect(currency?.innerHTML).toBe('R$')
  expect(integer?.innerHTML).toBe('10')
  expect(decimal?.innerHTML).toBe('.')
  expect(fraction?.innerHTML).toBe('00')
})

test('should use custom decimal digits', () => {
  mockedUseRuntime.mockImplementation(() => ({
    culture: {
      currency: 'BRL',
      customCurrencyDecimalDigits: 0,
      customCurrencySymbol: null,
    },
  }))

  const { container } = render(<FormattedCurrency value={10} />)

  const currency = container.querySelector('.currencyCode')
  const integer = container.querySelector('.currencyInteger')
  const decimal = container.querySelector('.currencyDecimal')
  const fraction = container.querySelector('.currencyFraction')

  expect(currency).toBeTruthy()
  expect(integer).toBeTruthy()
  expect(decimal).toBeFalsy()
  expect(fraction).toBeFalsy()
})

```


[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 hotjar/docs/README.md from the hotjar VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Hotjar

Open the VTEX APP Store and install the app on your store.

or

Run the following command:

```sh
vtex install vtex.hotjar@0.x
```

Next, open the app settings on your admin and fill the form with Site ID.

### Setup in Cart and Checkout page

Open your admin in the Checkout section in the `checkout6-custom.js`:

https://ACCOUNT.myvtex.com/admin/portal/#/sites/default/code/files/checkout6-custom.js

Add the following snippet in the file and replace `"YOURSITEID"` with your Site ID:

```js
// Hotjar
(function(h,o,t,j,a,r){
    var siteId = 'YOURSITEID';
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
    h._hjSettings={hjid:siteId,hjsv:6};
    a=o.getElementsByTagName('head')[0];
    r=o.createElement('script');r.async=1;
    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
    a.appendChild(r);
})(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');
```

Click Save.

```


[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 hotjar/public/metadata/messages/es-AR.json from the hotjar VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Hotjar",
  "headline": "Con un clic, comience a monitorear el comportamiento de sus clientes con la herramienta de análisis de datos Hotjar.",
  "overview": "Hotjar es una herramienta poderosa que revela el comportamiento en línea de sus usuarios. Con las herramientas de análisis, Hotjar proporciona una descripción general de cómo mejorar la experiencia del usuario y las tasas de rendimiento/conversión del sitio.",
  "features": [
    "Comprenda lo que los usuarios quieren, se preocupan y hacen en su sitio al representar visualmente sus clics, toques y comportamiento de desplazamiento, que son los indicadores más fuertes de la motivación y el deseo de los visitantes;",
    "Elimine las conjeturas con Grabaciones del comportamiento real de los visitantes en su sitio. Al ver los clics, los toques y los movimientos del mouse de sus visitantes, puede identificar los problemas de usabilidad sobre la marcha y los problemas que encuentran;",
    "Encuentre las mayores oportunidades para mejorar y probar identificando en qué página y en qué paso la mayoría de los visitantes abandonan su sitio;",
    "Mejore las tasas de finalización de formularios en línea descubriendo qué campos tardan demasiado en llenarse, cuáles se dejan en blanco y por qué sus visitantes abandonan su formulario y página."
  ],
  "additionalInformation": "Para usar el servicio debe tener una cuenta activa de Hotjar. Algunas funciones solo están disponibles para planes específicos.",
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}
```


[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 hotjar/public/metadata/messages/pt-BR.json from the hotjar VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Hotjar",
  "headline": "Com um clique, comece a monitorar o comportamento de seus clientes com a ferramenta de análise de dados Hotjar.",
  "overview": "Hotjar é uma ferramenta poderosa que revela o comportamento online de seus usuários. Com as ferramentas de análise, o Hotjar fornece uma visão geral de como melhorar a experiência do usuário do site e as taxas de desempenho/conversão.",
  "features": [
    "Entenda o que os usuários querem, se preocupam e fazem no seu site, representando visualmente seus cliques, toques e comportamento de rolagem que são os indicadores mais fortes de motivação e desejo dos visitantes;",
    "Elimine suposições com gravações sobre o comportamento real dos visitantes em seu site. Ao ver os cliques, toques e movimentos do mouse do seu visitante, você pode identificar problemas de usabilidade em tempo real e problemas que eles encontram;",
    "Encontre as maiores oportunidades de aprimoramento e teste, identificando em qual página e em qual etapa a maioria dos visitantes está saindo do site;",
    "Melhore as taxas de preenchimento de formulários on-line descobrindo quais campos demoram muito para serem preenchidos, quais são deixados em branco e por que seus visitantes abandonam seu formulário e página."
  ],
  "additionalInformation": "Para utilizar o serviço é preciso ter uma conta ativa do Hotjar. Algumas funcionalidades só estão disponíveis para planos específicos.",
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}
```


[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 hotjar/public/metadata/messages/en-US.json from the hotjar VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Hotjar",
  "headline": "With one click, start monitoring your customers' behavior with the Hotjar data analysis tool.",
  "overview": "Hotjar is a powerful tool that reveals the online behavior of your users. With the analytics tools, Hotjar gives you the ‘big picture’ of how to improve your site's user experience and performance/conversion rates.",
  "features": [
    "Understand what users want, care about and do on your site by visually representing their clicks, taps and scrolling behavior – which are the strongest indicators of visitor motivation and desire;",
    "Eliminate guesswork with Recordings of real visitor behavior on your site. By seeing your visitor’s clicks, taps and mouse movements you can identify usability issues on the fly and issues they encounter;",
    "Find the biggest opportunities for improvement and testing by identifying on which page and at which step most visitors are leaving your site;",
    "Improve online form completion rates by discovering which fields take too long to ﬁll, which are left blank, and why your visitors abandon your form and page."
  ],
  "additionalInformation": "To use the service you must have an active Hotjar account. Some features are only available for specific plans.",
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}
```


[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-footer/messages/it-IT.json from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/social-networks": "Social network",
  "store/section-links": "Link",
  "store/more-information-links": "Ulteriori informazioni",
  "store/payment-form": "Metodi di pagamento",
  "admin/editor.footer.title": "Footer",
  "admin/editor.footer.description": "Un footer (piè di pagina) che appare nella parte inferiore del tuo negozio",
  "admin/editor.footer.logoUrl.title": "URL del logo",
  "admin/editor.footer.numberOfSocialNetworks.title": "Numero di link ai social network",
  "admin/editor.footer.numberOfSectionLinks.title": "Numero di link di sezioni",
  "admin/editor.footer.numberOfMoreInformationLinks.title": "Numero di link per \"Ulteriori informazioni\"",
  "admin/editor.footer.numberOfBadges.title": "Numero di badge da visualizzare",
  "admin/editor.footer.numberOfPaymentForms.title": "Numero di metodi di pagamento disponibili",
  "admin/editor.footer.showPaymentMethodsInColor.title": "Mostra le icone dei metodi di pagamento a colori",
  "admin/editor.footer.showSocialNetworksInColor.title": "Mostra le icone dei social network a colori",
  "admin/editor.footer.showVtexLogoInColor.title": "Mostra il logo VTEX a colori",
  "admin/editor.footer.linksSections": "Sezioni di link",
  "admin/editor.footer.linksSections.linksSection": "Sezione di link",
  "admin/editor.footer.linksSections.linksSection.title": "Titolo della sezione di link",
  "admin/editor.footer.linksSections.linksSection.links": "Link della sezione di link",
  "admin/editor.footer.linksSections.linksSection.links.link": "Link",
  "admin/editor.footer.linksSections.linksSection.links.link.title": "Titolo del link",
  "admin/editor.footer.linksSections.linksSection.links.link.url": "URL del link",
  "admin/editor.footer.linksSections.linksSection.links.link.target": "Target del link",
  "admin/editor.footer.linksSections.linksSection.links.link.target.self": "Scheda del browser corrente",
  "admin/editor.footer.linksSections.linksSection.links.link.target.blank": "Nuova scheda del browser",
  "admin/editor.footer.moreInformationLink": "Link per \"Ulteriori informazioni\"",
  "admin/editor.footer.moreInformationLink.title": "Link per \"Ulteriori informazioni\"",
  "admin/editor.footer.badge": "Badge",
  "admin/editor.footer.badge.title": "Badge",
  "admin/editor.footer.badge.image.title": "URL dell'immagine del badge",
  "admin/editor.footer.socialNetworks": "Social network",
  "admin/editor.footer.socialNetworks.title": "Social network",
  "admin/editor.footer.socialNetworks.url.title": "URL del social network",
  "admin/editor.footer.socialNetworks.socialNetwork.title": "Social network",
  "admin/editor.footer.paymentForms": "Metodi di pagamento",
  "admin/editor.footer.paymentForms.paymentForm": "Metodo di pagamento",
  "admin/editor.footer.paymentForms.paymentForm.title": "Titolo del metodo di pagamento",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes": "Tipi di pagamento",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes.paymentType": "Tipo di pagamento",
  "admin/editor.footer.acceptedPaymentMethods.title": "Metodi di pagamento accettati",
  "admin/editor.footer.acceptedPaymentMethods.description": "Metodi di pagamento accettati dal negozio",
  "admin/editor.footer.paymentMethodIcon.title": "Metodo di pagamento",
  "admin/editor.footer.paymentMethodIcon.description": "Icona del metodo di pagamento",
  "admin/editor.footer.paymentMethodIcon.method": "Nome del metodo di pagamento",
  "admin/editor.footer.storeInformations": "Informazioni del negozio",
  "admin/editor.footer.storeInformations.storeInformation": "Informazioni sul negozio"
}

```


[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-footer/messages/th-TH.json from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/social-networks": "เครือข่ายทางสังคม",
  "store/section-links": "ลิงก์",
  "store/more-information-links": "ข้อมูลเพิ่มเติม",
  "store/payment-form": "วิธีการชำระเงิน",
  "admin/editor.footer.title": "ส่วนท้ายของหน้า",
  "admin/editor.footer.description": "ส่วนท้ายของหน้าที่ปรากฏที่ด้านล่างของร้านค้าของคุณ",
  "admin/editor.footer.logoUrl.title": "URL โลโก้",
  "admin/editor.footer.numberOfSocialNetworks.title": "จำนวนลิงก์ไปยังเครือข่ายทางสังคม",
  "admin/editor.footer.numberOfSectionLinks.title": "จำนวนลิงก์ไปยังส่วนต่าง ๆ",
  "admin/editor.footer.numberOfMoreInformationLinks.title": "จำนวนลิงก์ไปยังข้อมูลเพิ่มเติม",
  "admin/editor.footer.numberOfBadges.title": "จำนวนป้ายที่จะแสดง",
  "admin/editor.footer.numberOfPaymentForms.title": "จำนวนวิธีการชำระเงินที่มี",
  "admin/editor.footer.showPaymentMethodsInColor.title": "แสดงไอคอนวิธีการชำระเงินเป็นสี",
  "admin/editor.footer.showSocialNetworksInColor.title": "แสดงไอคอนเครือข่ายทางสังคมเป็นสี",
  "admin/editor.footer.showVtexLogoInColor.title": "แสดงโลโก้ VTEX เป็นสี",
  "admin/editor.footer.linksSections": "ส่วนลิงก์",
  "admin/editor.footer.linksSections.linksSection": "ส่วนลิงก์",
  "admin/editor.footer.linksSections.linksSection.title": "ชื่อเรื่องส่วนลิงก์",
  "admin/editor.footer.linksSections.linksSection.links": "ลิงก์ที่เชื่อมโยงไปยังส่วนลิงก์",
  "admin/editor.footer.linksSections.linksSection.links.link": "ลิงก์",
  "admin/editor.footer.linksSections.linksSection.links.link.title": "ชื่อเรื่องลิงก์",
  "admin/editor.footer.linksSections.linksSection.links.link.url": "URL ลิงก์",
  "admin/editor.footer.linksSections.linksSection.links.link.target": "เป้าหมายที่ต้องการเชื่อมโยง",
  "admin/editor.footer.linksSections.linksSection.links.link.target.self": "แท็บเบราว์เซอร์ปัจจุบัน",
  "admin/editor.footer.linksSections.linksSection.links.link.target.blank": "แท็บเบราว์เซอร์ใหม่",
  "admin/editor.footer.moreInformationLink": "ลิงก์ไปยังข้อมูลเพิ่มเติม",
  "admin/editor.footer.moreInformationLink.title": "ลิงก์ไปยังข้อมูลเพิ่มเติม",
  "admin/editor.footer.badge": "ป้าย",
  "admin/editor.footer.badge.title": "ป้าย",
  "admin/editor.footer.badge.image.title": "URL รูปภาพป้าย",
  "admin/editor.footer.socialNetworks": "เครือข่ายทางสังคม",
  "admin/editor.footer.socialNetworks.title": "เครือข่ายทางสังคม",
  "admin/editor.footer.socialNetworks.url.title": "URL เครือข่ายทางสังคม",
  "admin/editor.footer.socialNetworks.socialNetwork.title": "เครือข่ายทางสังคม",
  "admin/editor.footer.paymentForms": "วิธีการชำระเงิน",
  "admin/editor.footer.paymentForms.paymentForm": "แบบฟอร์มการชำระเงิน",
  "admin/editor.footer.paymentForms.paymentForm.title": "ชื่อเรื่องแบบฟอร์มการชำระเงิน",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes": "ประเภทการชำระเงิน",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes.paymentType": "ประเภทการชำระเงิน",
  "admin/editor.footer.acceptedPaymentMethods.title": "วิธีการชำระเงินที่รับ",
  "admin/editor.footer.acceptedPaymentMethods.description": "วิธีการชำระเงินที่ร้านค้ารับ",
  "admin/editor.footer.paymentMethodIcon.title": "วิธีการชำระเงิน",
  "admin/editor.footer.paymentMethodIcon.description": "ไอคอนวิธีการชำระเงิน",
  "admin/editor.footer.paymentMethodIcon.method": "ชื่อวิธีการชำระเงิน",
  "admin/editor.footer.storeInformations": "ข้อมูลร้านค้า",
  "admin/editor.footer.storeInformations.storeInformation": "ข้อมูลร้านค้า"
}

```


[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-footer/messages/ko-KR.json from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/social-networks": "소셜 네트워크",
  "store/section-links": "링크",
  "store/more-information-links": "추가 정보",
  "store/payment-form": "결제 방법",
  "admin/editor.footer.title": "푸터",
  "admin/editor.footer.description": "스토어 하단에 나타나는 푸터",
  "admin/editor.footer.logoUrl.title": "로고 URL",
  "admin/editor.footer.numberOfSocialNetworks.title": "소셜 네트워크 링크 수",
  "admin/editor.footer.numberOfSectionLinks.title": "섹션 링크 수",
  "admin/editor.footer.numberOfMoreInformationLinks.title": "추가 정보 링크 수",
  "admin/editor.footer.numberOfBadges.title": "표시할 배지 수",
  "admin/editor.footer.numberOfPaymentForms.title": "사용 가능한 결제 방법 수",
  "admin/editor.footer.showPaymentMethodsInColor.title": "결제 방법 아이콘 색상 표시",
  "admin/editor.footer.showSocialNetworksInColor.title": "소셜 네트워크 아이콘 색상 표시",
  "admin/editor.footer.showVtexLogoInColor.title": "VTEX 로고 색상 표시",
  "admin/editor.footer.linksSections": "링크 섹션",
  "admin/editor.footer.linksSections.linksSection": "링크 섹션",
  "admin/editor.footer.linksSections.linksSection.title": "링크 섹션 제목",
  "admin/editor.footer.linksSections.linksSection.links": "링크 섹션 링크",
  "admin/editor.footer.linksSections.linksSection.links.link": "링크",
  "admin/editor.footer.linksSections.linksSection.links.link.title": "링크 제목",
  "admin/editor.footer.linksSections.linksSection.links.link.url": "링크 URL",
  "admin/editor.footer.linksSections.linksSection.links.link.target": "링크 대상",
  "admin/editor.footer.linksSections.linksSection.links.link.target.self": "현재 브라우저 탭",
  "admin/editor.footer.linksSections.linksSection.links.link.target.blank": "새 브라우저 탭",
  "admin/editor.footer.moreInformationLink": "추가 정보 링크",
  "admin/editor.footer.moreInformationLink.title": "추가 정보 링크",
  "admin/editor.footer.badge": "배지",
  "admin/editor.footer.badge.title": "배지",
  "admin/editor.footer.badge.image.title": "배지 이미지 URL",
  "admin/editor.footer.socialNetworks": "소셜 네트워크",
  "admin/editor.footer.socialNetworks.title": "소셜 네트워크",
  "admin/editor.footer.socialNetworks.url.title": "소셜 네트워크 URL",
  "admin/editor.footer.socialNetworks.socialNetwork.title": "소셜 네트워크",
  "admin/editor.footer.paymentForms": "결제 방법",
  "admin/editor.footer.paymentForms.paymentForm": "결제 양식",
  "admin/editor.footer.paymentForms.paymentForm.title": "결제 양식 제목",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes": "결제 유형",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes.paymentType": "결제 유형",
  "admin/editor.footer.acceptedPaymentMethods.title": "승인된 결제 방법",
  "admin/editor.footer.acceptedPaymentMethods.description": "스토어에서 승인한 지불 방법",
  "admin/editor.footer.paymentMethodIcon.title": "결제 방법",
  "admin/editor.footer.paymentMethodIcon.description": "결제 방법 아이콘",
  "admin/editor.footer.paymentMethodIcon.method": "결제 방법 이름",
  "admin/editor.footer.storeInformations": "스토어 정보",
  "admin/editor.footer.storeInformations.storeInformation": "스토어 정보"
}

```


[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-footer/messages/nn-NO.json from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/social-networks": "Sosiale nettverk",
  "store/section-links": "Lenker",
  "store/more-information-links": "Mer informasjon",
  "store/payment-form": "Betalingsmåter",
  "admin/editor.footer.title": "Bunntekst",
  "admin/editor.footer.description": "En bunntekst som vises nederst i butikken",
  "admin/editor.footer.logoUrl.title": "Logo-URL",
  "admin/editor.footer.numberOfSocialNetworks.title": "Antall lenker til sosiale nettverk",
  "admin/editor.footer.numberOfSectionLinks.title": "Antall lenker til avsnitt",
  "admin/editor.footer.numberOfMoreInformationLinks.title": "Antall lenker til mer informasjon",
  "admin/editor.footer.numberOfBadges.title": "Antall merker som skal vises",
  "admin/editor.footer.numberOfPaymentForms.title": "Antall tilgjengelige betalingsmåter",
  "admin/editor.footer.showPaymentMethodsInColor.title": "Vis ikoner for betalingsmåter i farge",
  "admin/editor.footer.showSocialNetworksInColor.title": "Vis ikoner for sosiale nettverk i farge",
  "admin/editor.footer.showVtexLogoInColor.title": "Vis VTEX-logo i farge",
  "admin/editor.footer.linksSections": "Avsnitt for lenker",
  "admin/editor.footer.linksSections.linksSection": "Lenkedel",
  "admin/editor.footer.linksSections.linksSection.title": "Tittel på lenkedel",
  "admin/editor.footer.linksSections.linksSection.links": "Lenke til lenkedel",
  "admin/editor.footer.linksSections.linksSection.links.link": "Lenke",
  "admin/editor.footer.linksSections.linksSection.links.link.title": "Lenketittel",
  "admin/editor.footer.linksSections.linksSection.links.link.url": "Lenke-URL",
  "admin/editor.footer.linksSections.linksSection.links.link.target": "Lenkemål",
  "admin/editor.footer.linksSections.linksSection.links.link.target.self": "Gjeldende nettleserfane",
  "admin/editor.footer.linksSections.linksSection.links.link.target.blank": "Ny nettleserfane",
  "admin/editor.footer.moreInformationLink": "Lenker til mer informasjon",
  "admin/editor.footer.moreInformationLink.title": "Lenke til mer informasjon",
  "admin/editor.footer.badge": "Merker",
  "admin/editor.footer.badge.title": "Merke",
  "admin/editor.footer.badge.image.title": "URL til merkebilde",
  "admin/editor.footer.socialNetworks": "Sosiale nettverk",
  "admin/editor.footer.socialNetworks.title": "Sosialt nettverk",
  "admin/editor.footer.socialNetworks.url.title": "URL til sosialt nettverk",
  "admin/editor.footer.socialNetworks.socialNetwork.title": "Sosialt nettverk",
  "admin/editor.footer.paymentForms": "Betalingsmåter",
  "admin/editor.footer.paymentForms.paymentForm": "Betalingsskjema",
  "admin/editor.footer.paymentForms.paymentForm.title": "Tittel på betalingsskjema",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes": "Betalingstyper",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes.paymentType": "Betalingstype",
  "admin/editor.footer.acceptedPaymentMethods.title": "Aksepterte betalingsmåter",
  "admin/editor.footer.acceptedPaymentMethods.description": "Betalingsmåter som aksepteres av butikken",
  "admin/editor.footer.paymentMethodIcon.title": "Betalingsmåte",
  "admin/editor.footer.paymentMethodIcon.description": "Ikon for betalingsmåte",
  "admin/editor.footer.paymentMethodIcon.method": "Navn på betalingsmåte",
  "admin/editor.footer.storeInformations": "Butikkinformasjon",
  "admin/editor.footer.storeInformations.storeInformation": "Butikkinformasjon"
}

```


[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-footer/messages/ja-JP.json from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/social-networks": "ソーシャルネットワーク",
  "store/section-links": "リンク",
  "store/more-information-links": "詳細情報",
  "store/payment-form": "支払い方法",
  "admin/editor.footer.title": "フッター",
  "admin/editor.footer.description": "ストアの最下部に表示されるフッター",
  "admin/editor.footer.logoUrl.title": "ロゴ URL",
  "admin/editor.footer.numberOfSocialNetworks.title": "ソーシャルネットワークリンクの数",
  "admin/editor.footer.numberOfSectionLinks.title": "セクションリンクの数",
  "admin/editor.footer.numberOfMoreInformationLinks.title": "詳細情報リンクの数",
  "admin/editor.footer.numberOfBadges.title": "表示されるバッジの数",
  "admin/editor.footer.numberOfPaymentForms.title": "利用できる支払方法の数",
  "admin/editor.footer.showPaymentMethodsInColor.title": "支払い方法アイコンをカラーで表示する",
  "admin/editor.footer.showSocialNetworksInColor.title": "ソーシャルネットワークアイコンをカラーで表示する",
  "admin/editor.footer.showVtexLogoInColor.title": "VTEX ロゴをカラーで表示する",
  "admin/editor.footer.linksSections": "セクションをリンクする",
  "admin/editor.footer.linksSections.linksSection": "セクションをリンクする",
  "admin/editor.footer.linksSections.linksSection.title": "セクションタイトルをリンクする",
  "admin/editor.footer.linksSections.linksSection.links": "セクションリンクをリンクする",
  "admin/editor.footer.linksSections.linksSection.links.link": "リンク",
  "admin/editor.footer.linksSections.linksSection.links.link.title": "タイトルをリンクする",
  "admin/editor.footer.linksSections.linksSection.links.link.url": "URL をリンクする",
  "admin/editor.footer.linksSections.linksSection.links.link.target": "ターゲットをリンクする",
  "admin/editor.footer.linksSections.linksSection.links.link.target.self": "現在のブラウザタブ",
  "admin/editor.footer.linksSections.linksSection.links.link.target.blank": "新しいブラウザタブ",
  "admin/editor.footer.moreInformationLink": "詳細情報リンク",
  "admin/editor.footer.moreInformationLink.title": "詳細情報リンク",
  "admin/editor.footer.badge": "バッジ",
  "admin/editor.footer.badge.title": "バッジ",
  "admin/editor.footer.badge.image.title": "バッジ画像 URL",
  "admin/editor.footer.socialNetworks": "ソーシャルネットワーク",
  "admin/editor.footer.socialNetworks.title": "ソーシャルネットワーク",
  "admin/editor.footer.socialNetworks.url.title": "ソーシャルネットワーク URL",
  "admin/editor.footer.socialNetworks.socialNetwork.title": "ソーシャルネットワーク",
  "admin/editor.footer.paymentForms": "支払い方法",
  "admin/editor.footer.paymentForms.paymentForm": "支払いフォーム",
  "admin/editor.footer.paymentForms.paymentForm.title": "支払いフォームタイトル",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes": "支払いタイプ",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes.paymentType": "支払いタイプ",
  "admin/editor.footer.acceptedPaymentMethods.title": "受け入れられた支払い方法",
  "admin/editor.footer.acceptedPaymentMethods.description": "ストアが受け入れた支払い方法",
  "admin/editor.footer.paymentMethodIcon.title": "支払い方法",
  "admin/editor.footer.paymentMethodIcon.description": "支払い方法アイコン",
  "admin/editor.footer.paymentMethodIcon.method": "支払い方法名",
  "admin/editor.footer.storeInformations": "ストア情報",
  "admin/editor.footer.storeInformations.storeInformation": "ストア情報"
}

```


[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-footer/messages/bg-BG.json from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/social-networks": "Социални мрежи",
  "store/section-links": "Линкове",
  "store/more-information-links": "Повече информация",
  "store/payment-form": "Формуляри за плащане",
  "admin/editor.footer.title": "Долен колонтитул",
  "admin/editor.footer.description": "Долен колонтитул, който се появява в долната част на магазина ви",
  "admin/editor.footer.logoUrl.title": "URL адрес на логото",
  "admin/editor.footer.numberOfSocialNetworks.title": "Брой линкове към социални мрежи",
  "admin/editor.footer.numberOfSectionLinks.title": "Брой линкове към раздели",
  "admin/editor.footer.numberOfMoreInformationLinks.title": "Брой линкове за повече информация",
  "admin/editor.footer.numberOfBadges.title": "Брой значки, които да се показват",
  "admin/editor.footer.numberOfPaymentForms.title": "Брой налични начини за плащане",
  "admin/editor.footer.showPaymentMethodsInColor.title": "Показване на цветна икона за начините на плащане",
  "admin/editor.footer.showSocialNetworksInColor.title": "Показване на цветни икони за социалните мрежи",
  "admin/editor.footer.showVtexLogoInColor.title": "Показване на цветно лого на VTEX",
  "admin/editor.footer.linksSections": "Раздели с линкове",
  "admin/editor.footer.linksSections.linksSection": "Раздел с линк",
  "admin/editor.footer.linksSections.linksSection.title": "Заглавие на раздел с линк",
  "admin/editor.footer.linksSections.linksSection.links": "Линкове за раздел с линк",
  "admin/editor.footer.linksSections.linksSection.links.link": "Линк",
  "admin/editor.footer.linksSections.linksSection.links.link.title": "Заглавие на линк",
  "admin/editor.footer.linksSections.linksSection.links.link.url": "URL адрес на линк",
  "admin/editor.footer.linksSections.linksSection.links.link.target": "Цел на линка",
  "admin/editor.footer.linksSections.linksSection.links.link.target.self": "Текущ раздел в браузъра",
  "admin/editor.footer.linksSections.linksSection.links.link.target.blank": "Нов раздел в браузъра",
  "admin/editor.footer.moreInformationLink": "Линкове с повече информация",
  "admin/editor.footer.moreInformationLink.title": "Линк с повече информация",
  "admin/editor.footer.badge": "Значки",
  "admin/editor.footer.badge.title": "Значка",
  "admin/editor.footer.badge.image.title": "URL адрес на изображение на значка",
  "admin/editor.footer.socialNetworks": "Социални мрежи",
  "admin/editor.footer.socialNetworks.title": "Социална мрежа",
  "admin/editor.footer.socialNetworks.url.title": "URL адрес на социална мрежа",
  "admin/editor.footer.socialNetworks.socialNetwork.title": "Социална мрежа",
  "admin/editor.footer.paymentForms": "Формуляри за плащане",
  "admin/editor.footer.paymentForms.paymentForm": "Формуляр за плащане",
  "admin/editor.footer.paymentForms.paymentForm.title": "Заглавие на формуляр за плащане",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes": "Типове плащане",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes.paymentType": "Тип плащане",
  "admin/editor.footer.acceptedPaymentMethods.title": "Възможни начини на плащане",
  "admin/editor.footer.acceptedPaymentMethods.description": "Начини за плащане, които магазинът приема",
  "admin/editor.footer.paymentMethodIcon.title": "Начин на плащане",
  "admin/editor.footer.paymentMethodIcon.description": "Икона за начин на плащане",
  "admin/editor.footer.paymentMethodIcon.method": "Име на начин на плащане",
  "admin/editor.footer.storeInformations": "Данни за магазина",
  "admin/editor.footer.storeInformations.storeInformation": "Информация за магазина"
}

```


[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-footer/messages/id-ID.json from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/social-networks": "Jejaring Sosial",
  "store/section-links": "Tautan",
  "store/more-information-links": "Informasi Selengkapnya",
  "store/payment-form": "Metode Pembayaran",
  "admin/editor.footer.title": "Footer",
  "admin/editor.footer.description": "Footer yang muncul di bagian bawah toko Anda",
  "admin/editor.footer.logoUrl.title": "URL Logo",
  "admin/editor.footer.numberOfSocialNetworks.title": "Jumlah tautan jejaring sosial",
  "admin/editor.footer.numberOfSectionLinks.title": "Jumlah tautan bagian",
  "admin/editor.footer.numberOfMoreInformationLinks.title": "Jumlah tautan informasi selengkapnya",
  "admin/editor.footer.numberOfBadges.title": "Jumlah badge yang akan ditampilkan",
  "admin/editor.footer.numberOfPaymentForms.title": "Jumlah metode pembayaran yang tersedia",
  "admin/editor.footer.showPaymentMethodsInColor.title": "Tampilkan ikon metode pembayaran dalam warna",
  "admin/editor.footer.showSocialNetworksInColor.title": "Tampilkan ikon jejaring sosial dalam warna",
  "admin/editor.footer.showVtexLogoInColor.title": "Tampilkan logo VTEX dalam warna",
  "admin/editor.footer.linksSections": "Bagian Tautan",
  "admin/editor.footer.linksSections.linksSection": "Bagian Tautan",
  "admin/editor.footer.linksSections.linksSection.title": "Judul Bagian Tautan",
  "admin/editor.footer.linksSections.linksSection.links": "Tautan Bagian Tautan",
  "admin/editor.footer.linksSections.linksSection.links.link": "Tautan",
  "admin/editor.footer.linksSections.linksSection.links.link.title": "Judul Tautan",
  "admin/editor.footer.linksSections.linksSection.links.link.url": "URL Tautan",
  "admin/editor.footer.linksSections.linksSection.links.link.target": "Target Tautan",
  "admin/editor.footer.linksSections.linksSection.links.link.target.self": "Tab browser saat ini",
  "admin/editor.footer.linksSections.linksSection.links.link.target.blank": "Tab browser baru",
  "admin/editor.footer.moreInformationLink": "Tautan Informasi Selengkapnya",
  "admin/editor.footer.moreInformationLink.title": "Tautan Informasi Selengkapnya",
  "admin/editor.footer.badge": "Badge",
  "admin/editor.footer.badge.title": "Badge",
  "admin/editor.footer.badge.image.title": "URL gambar badge",
  "admin/editor.footer.socialNetworks": "Jejaring Sosial",
  "admin/editor.footer.socialNetworks.title": "Jejaring Sosial",
  "admin/editor.footer.socialNetworks.url.title": "URL Jejaring Sosial",
  "admin/editor.footer.socialNetworks.socialNetwork.title": "Jejaring Sosial",
  "admin/editor.footer.paymentForms": "Metode Pembayaran",
  "admin/editor.footer.paymentForms.paymentForm": "Formulir Pembayaran",
  "admin/editor.footer.paymentForms.paymentForm.title": "Judul Formulir Pembayaran",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes": "Jenis Pembayaran",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes.paymentType": "Jenis Pembayaran",
  "admin/editor.footer.acceptedPaymentMethods.title": "Metode Pembayaran yang Diterima",
  "admin/editor.footer.acceptedPaymentMethods.description": "Metode pembayaran yang diterima toko",
  "admin/editor.footer.paymentMethodIcon.title": "Metode Pembayaran",
  "admin/editor.footer.paymentMethodIcon.description": "Ikon metode pembayaran",
  "admin/editor.footer.paymentMethodIcon.method": "Nama metode pembayaran",
  "admin/editor.footer.storeInformations": "Informasi Toko",
  "admin/editor.footer.storeInformations.storeInformation": "Informasi Toko"
}

```


[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-footer/messages/pt.json from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/social-networks": "Redes sociais",
  "store/section-links": "Links",
  "store/more-information-links": "Mais informações",
  "store/payment-form": "Meios de pagamento",
  "admin/editor.footer.title": "Rodapé",
  "admin/editor.footer.description": "Um rodapé que aparece na parte inferior da sua loja",
  "admin/editor.footer.logoUrl.title": "URL do logotipo",
  "admin/editor.footer.numberOfSocialNetworks.title": "Número de links de redes sociais",
  "admin/editor.footer.numberOfSectionLinks.title": "Número de links de seções",
  "admin/editor.footer.numberOfMoreInformationLinks.title": "Número de links para mais informações",
  "admin/editor.footer.numberOfBadges.title": "Número de selos a serem exibidos",
  "admin/editor.footer.numberOfPaymentForms.title": "Número de meios de pagamento disponíveis",
  "admin/editor.footer.showPaymentMethodsInColor.title": "Mostrar os ícones dos meios de pagamento coloridos",
  "admin/editor.footer.showSocialNetworksInColor.title": "Mostrar os ícones das redes sociais coloridos",
  "admin/editor.footer.showVtexLogoInColor.title": "Mostrar o logotipo da VTEX colorido",
  "admin/editor.footer.linksSections": "Seções de links",
  "admin/editor.footer.linksSections.linksSection": "Seção de links",
  "admin/editor.footer.linksSections.linksSection.title": "Título da seção de links",
  "admin/editor.footer.linksSections.linksSection.links": "Links da seção de links",
  "admin/editor.footer.linksSections.linksSection.links.link": "Link",
  "admin/editor.footer.linksSections.linksSection.links.link.title": "Título do link",
  "admin/editor.footer.linksSections.linksSection.links.link.url": "URL do link",
  "admin/editor.footer.linksSections.linksSection.links.link.target": "Destino do link",
  "admin/editor.footer.linksSections.linksSection.links.link.target.self": "Janela atual do navegador",
  "admin/editor.footer.linksSections.linksSection.links.link.target.blank": "Nova janela do navegador",
  "admin/editor.footer.moreInformationLink": "Links adicionais",
  "admin/editor.footer.moreInformationLink.title": "Link adicional",
  "admin/editor.footer.badge": "Selos",
  "admin/editor.footer.badge.title": "Selo",
  "admin/editor.footer.badge.image.title": "URL da imagem do selo",
  "admin/editor.footer.socialNetworks": "Redes sociais",
  "admin/editor.footer.socialNetworks.title": "Rede social",
  "admin/editor.footer.socialNetworks.url.title": "URL da rede social",
  "admin/editor.footer.socialNetworks.socialNetwork.title": "Rede social",
  "admin/editor.footer.paymentForms": "Meios de pagamento",
  "admin/editor.footer.paymentForms.paymentForm": "Meio de pagamento",
  "admin/editor.footer.paymentForms.paymentForm.title": "Título do meio de pagamento",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes": "Tipos de pagamento",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes.paymentType": "Tipo de pagamento",
  "admin/editor.footer.acceptedPaymentMethods.title": "Meios de pagamento aceitos",
  "admin/editor.footer.acceptedPaymentMethods.description": "Meios de pagamento aceitos pela loja",
  "admin/editor.footer.paymentMethodIcon.title": "Meio de pagamento",
  "admin/editor.footer.paymentMethodIcon.description": "Ícone do meio de pagamento",
  "admin/editor.footer.paymentMethodIcon.method": "Nome do meio de pagamento",
  "admin/editor.footer.storeInformations": "Informações da loja",
  "admin/editor.footer.storeInformations.storeInformation": "Informações da loja"
}

```


[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-footer/messages/ar-SA.json from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/social-networks": "مواقع التواصل الإجتماعي",
  "store/section-links": "الروابط",
  "store/more-information-links": "مزيد من المعلومات",
  "store/payment-form": "طرق الدفع",
  "admin/editor.footer.title": "تذييل الصفحة",
  "admin/editor.footer.description": "تذييل يظهر في الجزء السفلي من متجرك",
  "admin/editor.footer.logoUrl.title": "عنوان الشعار",
  "admin/editor.footer.numberOfSocialNetworks.title": "عدد روابط الشبكات الاجتماعية",
  "admin/editor.footer.numberOfSectionLinks.title": "عدد روابط القسم",
  "admin/editor.footer.numberOfMoreInformationLinks.title": "عدد روابط المعلومات الإضافية",
  "admin/editor.footer.numberOfBadges.title": "عدد الشارات التي سيتم عرضها",
  "admin/editor.footer.numberOfPaymentForms.title": "عدد طرق الدفع المتاحة",
  "admin/editor.footer.showPaymentMethodsInColor.title": "إظهار أيقونات طرق الدفع باللون",
  "admin/editor.footer.showSocialNetworksInColor.title": "إظهار أيقونات الشبكات الاجتماعية باللون",
  "admin/editor.footer.showVtexLogoInColor.title": "إظهار شعار VTEX باللون",
  "admin/editor.footer.linksSections": "روابط الأقسام",
  "admin/editor.footer.linksSections.linksSection": "رابط القسم",
  "admin/editor.footer.linksSections.linksSection.title": "عنوان قسم الرابط",
  "admin/editor.footer.linksSections.linksSection.links": "روابط قسم الرابط",
  "admin/editor.footer.linksSections.linksSection.links.link": "الرابط",
  "admin/editor.footer.linksSections.linksSection.links.link.title": "عنوان الرابط",
  "admin/editor.footer.linksSections.linksSection.links.link.url": "عنوان الرابط",
  "admin/editor.footer.linksSections.linksSection.links.link.target": "هدف الرابط",
  "admin/editor.footer.linksSections.linksSection.links.link.target.self": "تبويب المتصفح الحالي",
  "admin/editor.footer.linksSections.linksSection.links.link.target.blank": "تبويب متصفح جديد",
  "admin/editor.footer.moreInformationLink": "روابط المزيد من المعلومات",
  "admin/editor.footer.moreInformationLink.title": "رابط المزيد من المعلومات",
  "admin/editor.footer.badge": "شارات",
  "admin/editor.footer.badge.title": "شارة",
  "admin/editor.footer.badge.image.title": "رابط صورة الشارة",
  "admin/editor.footer.socialNetworks": "الشبكات الاجتماعية",
  "admin/editor.footer.socialNetworks.title": "الشبكة الاجتماعية",
  "admin/editor.footer.socialNetworks.url.title": "رابط الشبكة الاجتماعية",
  "admin/editor.footer.socialNetworks.socialNetwork.title": "الشبكة الاجتماعية",
  "admin/editor.footer.paymentForms": "طرق الدفع",
  "admin/editor.footer.paymentForms.paymentForm": "استمارة الدفع",
  "admin/editor.footer.paymentForms.paymentForm.title": "عنوان استمارة الدفع",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes": "أنواع الدفع",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes.paymentType": "نوع الدفع",
  "admin/editor.footer.acceptedPaymentMethods.title": "طرق الدفع المقبولة",
  "admin/editor.footer.acceptedPaymentMethods.description": "طرق الدفع المقبولة من المتجر",
  "admin/editor.footer.paymentMethodIcon.title": "طريقة الدفع",
  "admin/editor.footer.paymentMethodIcon.description": "أيقونة طريقة الدفع",
  "admin/editor.footer.paymentMethodIcon.method": "اسم طريقة الدفع",
  "admin/editor.footer.storeInformations": "معلومات المتجر",
  "admin/editor.footer.storeInformations.storeInformation": "معلومات المتجر"
}

```


[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-footer/messages/en.json from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/social-networks": "Social Media",
  "store/section-links": "Links",
  "store/more-information-links": "More information",
  "store/payment-form": "Payment Methods",
  "admin/editor.footer.title": "Footer",
  "admin/editor.footer.description": "A footer that appears at the bottom of your store",
  "admin/editor.footer.logoUrl.title": "Logo URL",
  "admin/editor.footer.numberOfSocialNetworks.title": "Number of social media links",
  "admin/editor.footer.numberOfSectionLinks.title": "Number of section links",
  "admin/editor.footer.numberOfMoreInformationLinks.title": "Number of more-information links",
  "admin/editor.footer.numberOfBadges.title": "Number of badges to be displayed",
  "admin/editor.footer.numberOfPaymentForms.title": "Number of payment methods available",
  "admin/editor.footer.showPaymentMethodsInColor.title": "Show payment method icons in color",
  "admin/editor.footer.showSocialNetworksInColor.title": "Show social media icons in color",
  "admin/editor.footer.showVtexLogoInColor.title": "Show VTEX logo in color",
  "admin/editor.footer.linksSections": "Link Sections",
  "admin/editor.footer.linksSections.linksSection": "Link section",
  "admin/editor.footer.linksSections.linksSection.title": "Link section title",
  "admin/editor.footer.linksSections.linksSection.links": "Link Section Links",
  "admin/editor.footer.linksSections.linksSection.links.link": "Link",
  "admin/editor.footer.linksSections.linksSection.links.link.title": "Link title",
  "admin/editor.footer.linksSections.linksSection.links.link.url": "Link URL",
  "admin/editor.footer.linksSections.linksSection.links.link.target": "Link target",
  "admin/editor.footer.linksSections.linksSection.links.link.target.self": "Current Browser Tab",
  "admin/editor.footer.linksSections.linksSection.links.link.target.blank": "New Browser Tab",
  "admin/editor.footer.moreInformationLink": "More Information Links",
  "admin/editor.footer.moreInformationLink.title": "More information link",
  "admin/editor.footer.badge": "Badges",
  "admin/editor.footer.badge.title": "Badge",
  "admin/editor.footer.badge.image.title": "Badge image URL",
  "admin/editor.footer.socialNetworks": "Social Media",
  "admin/editor.footer.socialNetworks.title": "Social Media",
  "admin/editor.footer.socialNetworks.url.title": "Social media URL",
  "admin/editor.footer.socialNetworks.socialNetwork.title": "Social media",
  "admin/editor.footer.paymentForms": "Payment Methods",
  "admin/editor.footer.paymentForms.paymentForm": "Payment method",
  "admin/editor.footer.paymentForms.paymentForm.title": "Payment method title",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes": "Payment Types",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes.paymentType": "Payment type",
  "admin/editor.footer.acceptedPaymentMethods.title": "Accepted Payment Methods",
  "admin/editor.footer.acceptedPaymentMethods.description": "Payment methods accepted by the store",
  "admin/editor.footer.paymentMethodIcon.title": "Payment Method",
  "admin/editor.footer.paymentMethodIcon.description": "Payment method icon",
  "admin/editor.footer.paymentMethodIcon.method": "Payment method name",
  "admin/editor.footer.storeInformations": "Store Information",
  "admin/editor.footer.storeInformations.storeInformation": "Store information"
}

```


[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-footer/messages/no-NO.json from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/social-networks": "Sosiale nettverk",
  "store/section-links": "Lenker",
  "store/more-information-links": "Mer informasjon",
  "store/payment-form": "Betalingsmåter",
  "admin/editor.footer.title": "Bunntekst",
  "admin/editor.footer.description": "En bunntekst som vises nederst i butikken",
  "admin/editor.footer.logoUrl.title": "Logo-URL",
  "admin/editor.footer.numberOfSocialNetworks.title": "Antall lenker til sosiale nettverk",
  "admin/editor.footer.numberOfSectionLinks.title": "Antall lenker til avsnitt",
  "admin/editor.footer.numberOfMoreInformationLinks.title": "Antall lenker til mer informasjon",
  "admin/editor.footer.numberOfBadges.title": "Antall merker som skal vises",
  "admin/editor.footer.numberOfPaymentForms.title": "Antall tilgjengelige betalingsmåter",
  "admin/editor.footer.showPaymentMethodsInColor.title": "Vis ikoner for betalingsmåter i farge",
  "admin/editor.footer.showSocialNetworksInColor.title": "Vis ikoner for sosiale nettverk i farge",
  "admin/editor.footer.showVtexLogoInColor.title": "Vis VTEX-logo i farge",
  "admin/editor.footer.linksSections": "Avsnitt for lenker",
  "admin/editor.footer.linksSections.linksSection": "Lenkedel",
  "admin/editor.footer.linksSections.linksSection.title": "Tittel på lenkedel",
  "admin/editor.footer.linksSections.linksSection.links": "Lenke til lenkedel",
  "admin/editor.footer.linksSections.linksSection.links.link": "Lenke",
  "admin/editor.footer.linksSections.linksSection.links.link.title": "Lenketittel",
  "admin/editor.footer.linksSections.linksSection.links.link.url": "Lenke-URL",
  "admin/editor.footer.linksSections.linksSection.links.link.target": "Lenkemål",
  "admin/editor.footer.linksSections.linksSection.links.link.target.self": "Gjeldende nettleserfane",
  "admin/editor.footer.linksSections.linksSection.links.link.target.blank": "Ny nettleserfane",
  "admin/editor.footer.moreInformationLink": "Lenker til mer informasjon",
  "admin/editor.footer.moreInformationLink.title": "Lenke til mer informasjon",
  "admin/editor.footer.badge": "Merker",
  "admin/editor.footer.badge.title": "Merke",
  "admin/editor.footer.badge.image.title": "URL til merkebilde",
  "admin/editor.footer.socialNetworks": "Sosiale nettverk",
  "admin/editor.footer.socialNetworks.title": "Sosialt nettverk",
  "admin/editor.footer.socialNetworks.url.title": "URL til sosialt nettverk",
  "admin/editor.footer.socialNetworks.socialNetwork.title": "Sosialt nettverk",
  "admin/editor.footer.paymentForms": "Betalingsmåter",
  "admin/editor.footer.paymentForms.paymentForm": "Betalingsskjema",
  "admin/editor.footer.paymentForms.paymentForm.title": "Tittel på betalingsskjema",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes": "Betalingstyper",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes.paymentType": "Betalingstype",
  "admin/editor.footer.acceptedPaymentMethods.title": "Aksepterte betalingsmåter",
  "admin/editor.footer.acceptedPaymentMethods.description": "Betalingsmåter som aksepteres av butikken",
  "admin/editor.footer.paymentMethodIcon.title": "Betalingsmåte",
  "admin/editor.footer.paymentMethodIcon.description": "Ikon for betalingsmåte",
  "admin/editor.footer.paymentMethodIcon.method": "Navn på betalingsmåte",
  "admin/editor.footer.storeInformations": "Butikkinformasjon",
  "admin/editor.footer.storeInformations.storeInformation": "Butikkinformasjon"
}

```


[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-footer/messages/ro-RO.json from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/social-networks": "Rețele sociale",
  "store/section-links": "Link-uri",
  "store/more-information-links": "Mai multe informații",
  "store/payment-form": "Metode de plată",
  "admin/editor.footer.title": "Footer",
  "admin/editor.footer.description": "Un footer care apare în partea de jos a paginii magazinului tău",
  "admin/editor.footer.logoUrl.title": "URL logo",
  "admin/editor.footer.numberOfSocialNetworks.title": "Numărul de link-uri către rețelele sociale",
  "admin/editor.footer.numberOfSectionLinks.title": "Numărul de link-uri de secțiune",
  "admin/editor.footer.numberOfMoreInformationLinks.title": "Numărul de link-uri pentru mai multe informații",
  "admin/editor.footer.numberOfBadges.title": "Numărul de badge-uri care trebuie afișate",
  "admin/editor.footer.numberOfPaymentForms.title": "Numărul de metode de plată disponibile",
  "admin/editor.footer.showPaymentMethodsInColor.title": "Arată iconițele metodelor de plată în culoare",
  "admin/editor.footer.showSocialNetworksInColor.title": "Arată iconițele rețelelor sociale în culoare",
  "admin/editor.footer.showVtexLogoInColor.title": "Arată logo-ul VTEX în culoare",
  "admin/editor.footer.linksSections": "Secțiuni de link-uri",
  "admin/editor.footer.linksSections.linksSection": "Secțiune de link",
  "admin/editor.footer.linksSections.linksSection.title": "Titlu secțiune de link",
  "admin/editor.footer.linksSections.linksSection.links": "Link-uri pentru secțiunea de link",
  "admin/editor.footer.linksSections.linksSection.links.link": "Link",
  "admin/editor.footer.linksSections.linksSection.links.link.title": "Titlu link",
  "admin/editor.footer.linksSections.linksSection.links.link.url": "URL link",
  "admin/editor.footer.linksSections.linksSection.links.link.target": "Obiectivul link-ului",
  "admin/editor.footer.linksSections.linksSection.links.link.target.self": "Fila actuală al browser-ului",
  "admin/editor.footer.linksSections.linksSection.links.link.target.blank": "O nouă filă a browser-ului",
  "admin/editor.footer.moreInformationLink": "Link-uri pentru mai multe informații",
  "admin/editor.footer.moreInformationLink.title": "Link pentru mai multe informații",
  "admin/editor.footer.badge": "Ecuson",
  "admin/editor.footer.badge.title": "Badge",
  "admin/editor.footer.badge.image.title": "URL imagine badge",
  "admin/editor.footer.socialNetworks": "Rețele sociale",
  "admin/editor.footer.socialNetworks.title": "Rețea socială",
  "admin/editor.footer.socialNetworks.url.title": "URL Rețea Socială",
  "admin/editor.footer.socialNetworks.socialNetwork.title": "Rețea socială",
  "admin/editor.footer.paymentForms": "Metode de plată",
  "admin/editor.footer.paymentForms.paymentForm": "Metodă de plată",
  "admin/editor.footer.paymentForms.paymentForm.title": "Titlul metodă de plată",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes": "Tipuri de plată",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes.paymentType": "Tipul plăți",
  "admin/editor.footer.acceptedPaymentMethods.title": "Metode de plată acceptate",
  "admin/editor.footer.acceptedPaymentMethods.description": "Metode de plată acceptate de magazin",
  "admin/editor.footer.paymentMethodIcon.title": "Metode de plată",
  "admin/editor.footer.paymentMethodIcon.description": "Iconiță metodă de plată",
  "admin/editor.footer.paymentMethodIcon.method": "Denumire metodă de plată",
  "admin/editor.footer.storeInformations": "Informații magazin",
  "admin/editor.footer.storeInformations.storeInformation": "Informații magazin"
}

```


[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-footer/messages/context.json from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/social-networks": "social-networks",
  "store/section-links": "store/section-links",
  "store/more-information-links": "store/more-information-links",
  "store/payment-form": "store/payment-form",
  "admin/editor.footer.title": "admin/editor.footer.title",
  "admin/editor.footer.description": "admin/editor.footer.description",
  "admin/editor.footer.logoUrl.title": "admin/editor.footer.logoUrl.title",
  "admin/editor.footer.numberOfSocialNetworks.title": "admin/editor.footer.numberOfSocialNetworks.title",
  "admin/editor.footer.numberOfSectionLinks.title": "admin/editor.footer.numberOfSectionLinks.title",
  "admin/editor.footer.numberOfMoreInformationLinks.title": "admin/editor.footer.numberOfMoreInformationLinks.title",
  "admin/editor.footer.numberOfBadges.title": "admin/editor.footer.numberOfBadges.title",
  "admin/editor.footer.numberOfPaymentForms.title": "admin/editor.footer.numberOfPaymentForms.title",
  "admin/editor.footer.showPaymentMethodsInColor.title": "admin/editor.footer.showPaymentMethodsInColor.title",
  "admin/editor.footer.showSocialNetworksInColor.title": "admin/editor.footer.showSocialNetworksInColor.title",
  "admin/editor.footer.showVtexLogoInColor.title": "admin/editor.footer.showVtexLogoInColor.title",
  "admin/editor.footer.linksSections": "admin/editor.footer.linksSections",
  "admin/editor.footer.linksSections.linksSection": "admin/editor.footer.linksSections.linksSection",
  "admin/editor.footer.linksSections.linksSection.title": "admin/editor.footer.linksSections.linksSection.title",
  "admin/editor.footer.linksSections.linksSection.links": "admin/editor.footer.linksSections.linksSection.links",
  "admin/editor.footer.linksSections.linksSection.links.link": "admin/editor.footer.linksSections.linksSection.links.link",
  "admin/editor.footer.linksSections.linksSection.links.link.title": "admin/editor.footer.linksSections.linksSection.links.link.title",
  "admin/editor.footer.linksSections.linksSection.links.link.url": "admin/editor.footer.linksSections.linksSection.links.link.url",
  "admin/editor.footer.linksSections.linksSection.links.link.target": "admin/editor.footer.linksSections.linksSection.links.link.target",
  "admin/editor.footer.linksSections.linksSection.links.link.target.self": "admin/editor.footer.linksSections.linksSection.links.link.target.self",
  "admin/editor.footer.linksSections.linksSection.links.link.target.blank": "admin/editor.footer.linksSections.linksSection.links.link.target.blank",
  "admin/editor.footer.moreInformationLink": "admin/editor.footer.moreInformationLink",
  "admin/editor.footer.moreInformationLink.title": "admin/editor.footer.moreInformationLink.title",
  "admin/editor.footer.badge": "admin/editor.footer.badge",
  "admin/editor.footer.badge.title": "admin/editor.footer.badge.title",
  "admin/editor.footer.badge.image.title": "admin/editor.footer.badge.image.title",
  "admin/editor.footer.socialNetworks": "admin/editor.footer.socialNetworks",
  "admin/editor.footer.socialNetworks.title": "admin/editor.footer.socialNetworks.title",
  "admin/editor.footer.socialNetworks.url.title": "admin/editor.footer.socialNetworks.url.title",
  "admin/editor.footer.socialNetworks.socialNetwork.title": "admin/editor.footer.socialNetworks.socialNetwork.title",
  "admin/editor.footer.paymentForms": "admin/editor.footer.paymentForms",
  "admin/editor.footer.paymentForms.paymentForm": "admin/editor.footer.paymentForms.paymentForm",
  "admin/editor.footer.paymentForms.paymentForm.title": "admin/editor.footer.paymentForms.paymentForm.title",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes": "admin/editor.footer.paymentForms.paymentForm.paymentTypes",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes.paymentType": "admin/editor.footer.paymentForm.paymentForm.paymentTypes.paymentType",
  "admin/editor.footer.acceptedPaymentMethods.title": "Accepted Payment Methods",
  "admin/editor.footer.acceptedPaymentMethods.description": "Payment methods accepted by the store",
  "admin/editor.footer.paymentMethodIcon.title": "Payment Method",
  "admin/editor.footer.paymentMethodIcon.description": "Payment method icon",
  "admin/editor.footer.paymentMethodIcon.method": "Payment method name",
  "admin/editor.footer.storeInformations": "admin/editor.footer.storeInformations",
  "admin/editor.footer.storeInformations.storeInformation": "admin/editor.footer.storeInformations.storeInformation"
}

```


[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-footer/messages/de-DE.json from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/social-networks": "Soziale Netzwerke",
  "store/section-links": "Links",
  "store/more-information-links": "Weitere Informationen",
  "store/payment-form": "Zahlungsmethoden",
  "admin/editor.footer.title": "Footer",
  "admin/editor.footer.description": "Ein Footer, der im unteren Bereich Ihres Shops erscheint",
  "admin/editor.footer.logoUrl.title": "Logo URL",
  "admin/editor.footer.numberOfSocialNetworks.title": "Anzahl der Verknüpfungen mit sozialen Netzwerken",
  "admin/editor.footer.numberOfSectionLinks.title": "Anzahl der Sektionen-Links",
  "admin/editor.footer.numberOfMoreInformationLinks.title": "Anzahl weiterer Informationslinks",
  "admin/editor.footer.numberOfBadges.title": "Anzahl der anzuzeigenden Abzeichen",
  "admin/editor.footer.numberOfPaymentForms.title": "Anzahl verfügbarer Zahlungsmethoden",
  "admin/editor.footer.showPaymentMethodsInColor.title": "Zahlungsmethoden Symbole in Farbe anzeigen",
  "admin/editor.footer.showSocialNetworksInColor.title": "Soziale Netzwerke Symbole in Farbe anzeigen",
  "admin/editor.footer.showVtexLogoInColor.title": "VTEX-Logo in Farbe anzeigen",
  "admin/editor.footer.linksSections": "Sektionen-Links",
  "admin/editor.footer.linksSections.linksSection": "Sektionen-Link",
  "admin/editor.footer.linksSections.linksSection.title": "Sektion-Link Titel",
  "admin/editor.footer.linksSections.linksSection.links": "Sektion-Link Link",
  "admin/editor.footer.linksSections.linksSection.links.link": "Koppeling",
  "admin/editor.footer.linksSections.linksSection.links.link.title": "Link-Titel",
  "admin/editor.footer.linksSections.linksSection.links.link.url": "Link-URL",
  "admin/editor.footer.linksSections.linksSection.links.link.target": "Link-Ziel",
  "admin/editor.footer.linksSections.linksSection.links.link.target.self": "Aktueller Browser-Tab",
  "admin/editor.footer.linksSections.linksSection.links.link.target.blank": "Neuer Browser-Tab",
  "admin/editor.footer.moreInformationLink": "Weitere Informationslinks",
  "admin/editor.footer.moreInformationLink.title": "Mehr Informationslink",
  "admin/editor.footer.badge": "Abzeichen",
  "admin/editor.footer.badge.title": "Abzeichen",
  "admin/editor.footer.badge.image.title": "Abzeichen-Bild-URL",
  "admin/editor.footer.socialNetworks": "Soziale Netzwerke",
  "admin/editor.footer.socialNetworks.title": "Soziales Netzwerk",
  "admin/editor.footer.socialNetworks.url.title": "Soziales Netzwerk URL",
  "admin/editor.footer.socialNetworks.socialNetwork.title": "Soziales Netzwerk",
  "admin/editor.footer.paymentForms": "Zahlungsmethoden",
  "admin/editor.footer.paymentForms.paymentForm": "Zahlungs-Formular",
  "admin/editor.footer.paymentForms.paymentForm.title": "Zahlungsformular Titel",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes": "Zahlungsarten",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes.paymentType": "Zahlungstyp",
  "admin/editor.footer.acceptedPaymentMethods.title": "Akzeptierte Zahlungsmethoden",
  "admin/editor.footer.acceptedPaymentMethods.description": "Vom Geschäft akzeptierte Zahlungsmethoden",
  "admin/editor.footer.paymentMethodIcon.title": "Zahlungsmethode",
  "admin/editor.footer.paymentMethodIcon.description": "Bezahlungsmethoden-Symbol",
  "admin/editor.footer.paymentMethodIcon.method": "Name der Zahlungsmethode",
  "admin/editor.footer.storeInformations": "Shop-Informationen",
  "admin/editor.footer.storeInformations.storeInformation": "Shop-Informationen"
}

```


[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-footer/messages/fr-FR.json from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/social-networks": "Réseaux sociaux",
  "store/section-links": "Liens",
  "store/more-information-links": "En savoir plus",
  "store/payment-form": "Méthodes de paiement",
  "admin/editor.footer.title": "Pied de page",
  "admin/editor.footer.description": "Un pied de page qui apparaît en bas de votre magasin",
  "admin/editor.footer.logoUrl.title": "URL du logo",
  "admin/editor.footer.numberOfSocialNetworks.title": "Nombre de liens de réseaux sociaux",
  "admin/editor.footer.numberOfSectionLinks.title": "Nombre de liens de la section",
  "admin/editor.footer.numberOfMoreInformationLinks.title": "Nombre de liens d’informations supplémentaires",
  "admin/editor.footer.numberOfBadges.title": "Nombre de badges à afficher",
  "admin/editor.footer.numberOfPaymentForms.title": "Nombre de modes de paiement disponibles",
  "admin/editor.footer.showPaymentMethodsInColor.title": "Afficher en couleur les icônes des modes de paiement",
  "admin/editor.footer.showSocialNetworksInColor.title": "Afficher en couleur les icônes des réseaux sociaux",
  "admin/editor.footer.showVtexLogoInColor.title": "Afficher en couleur le logo VTEX",
  "admin/editor.footer.linksSections": "Sections des liens",
  "admin/editor.footer.linksSections.linksSection": "Section du lien",
  "admin/editor.footer.linksSections.linksSection.title": "Titre de la section du lien",
  "admin/editor.footer.linksSections.linksSection.links": "Titres de la section du lien",
  "admin/editor.footer.linksSections.linksSection.links.link": "Lien",
  "admin/editor.footer.linksSections.linksSection.links.link.title": "Titre du lien",
  "admin/editor.footer.linksSections.linksSection.links.link.url": "URL du lien",
  "admin/editor.footer.linksSections.linksSection.links.link.target": "Cible du lien",
  "admin/editor.footer.linksSections.linksSection.links.link.target.self": "Onglet du navigateur actuel",
  "admin/editor.footer.linksSections.linksSection.links.link.target.blank": "Nouvel onglet de navigateur",
  "admin/editor.footer.moreInformationLink": "Liens pour en savoir plus",
  "admin/editor.footer.moreInformationLink.title": "Lien pour en savoir plus",
  "admin/editor.footer.badge": "Badges",
  "admin/editor.footer.badge.title": "Badge",
  "admin/editor.footer.badge.image.title": "URL de l’image du badge",
  "admin/editor.footer.socialNetworks": "Réseaux sociaux",
  "admin/editor.footer.socialNetworks.title": "Réseau social",
  "admin/editor.footer.socialNetworks.url.title": "URL du réseau social",
  "admin/editor.footer.socialNetworks.socialNetwork.title": "Réseaux sociaux",
  "admin/editor.footer.paymentForms": "Méthodes de paiement",
  "admin/editor.footer.paymentForms.paymentForm": "Moyen de paiement",
  "admin/editor.footer.paymentForms.paymentForm.title": "Titre du moyen de paiement",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes": "Types de paiement",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes.paymentType": "Type de paiement",
  "admin/editor.footer.acceptedPaymentMethods.title": "Modes de paiement acceptés",
  "admin/editor.footer.acceptedPaymentMethods.description": "Modes de paiement acceptés par le magasin",
  "admin/editor.footer.paymentMethodIcon.title": "Méthode de paiement",
  "admin/editor.footer.paymentMethodIcon.description": "Icône du mode de paiement",
  "admin/editor.footer.paymentMethodIcon.method": "Nom du mode de paiement",
  "admin/editor.footer.storeInformations": "Informations sur le magasin",
  "admin/editor.footer.storeInformations.storeInformation": "Information sur le magasin"
}

```


[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-footer/messages/nl-NL.json from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/social-networks": "Sociale netwerken",
  "store/section-links": "Links",
  "store/more-information-links": "Meer informatie",
  "store/payment-form": "Betaalmethodes",
  "admin/editor.footer.title": "Voettekst",
  "admin/editor.footer.description": "Een voettekst die onderaan uw winkel verschijnt",
  "admin/editor.footer.logoUrl.title": "Logo URL",
  "admin/editor.footer.numberOfSocialNetworks.title": "Aantal links naar sociale netwerken",
  "admin/editor.footer.numberOfSectionLinks.title": "Aantal sectielinks",
  "admin/editor.footer.numberOfMoreInformationLinks.title": "Aantal links voor meer informatie",
  "admin/editor.footer.numberOfBadges.title": "Aantal te tonen badges",
  "admin/editor.footer.numberOfPaymentForms.title": "Aantal beschikbare betaalmethoden",
  "admin/editor.footer.showPaymentMethodsInColor.title": "Pictogrammen voor betalingsmethoden in kleur weergeven",
  "admin/editor.footer.showSocialNetworksInColor.title": "Pictogrammen voor sociale netwerken in kleur weergeven",
  "admin/editor.footer.showVtexLogoInColor.title": "Toon VTEX-logo in kleur",
  "admin/editor.footer.linksSections": "Links secties",
  "admin/editor.footer.linksSections.linksSection": "Linksectie",
  "admin/editor.footer.linksSections.linksSection.title": "Link sectietitel",
  "admin/editor.footer.linksSections.linksSection.links": "Link sectielinks",
  "admin/editor.footer.linksSections.linksSection.links.link": "Link",
  "admin/editor.footer.linksSections.linksSection.links.link.title": "Link titel",
  "admin/editor.footer.linksSections.linksSection.links.link.url": "Link url",
  "admin/editor.footer.linksSections.linksSection.links.link.target": "Link doel",
  "admin/editor.footer.linksSections.linksSection.links.link.target.self": "Huidige browsertab",
  "admin/editor.footer.linksSections.linksSection.links.link.target.blank": "Nieuwe browsertab",
  "admin/editor.footer.moreInformationLink": "Meer informatie links",
  "admin/editor.footer.moreInformationLink.title": "Meer informatie link",
  "admin/editor.footer.badge": "Badges",
  "admin/editor.footer.badge.title": "Badge",
  "admin/editor.footer.badge.image.title": "Badge-afbeelding URL",
  "admin/editor.footer.socialNetworks": "Sociale netwerken",
  "admin/editor.footer.socialNetworks.title": "Sociaal netwerk",
  "admin/editor.footer.socialNetworks.url.title": "Sociaal netwerk url",
  "admin/editor.footer.socialNetworks.socialNetwork.title": "Sociaal netwerk",
  "admin/editor.footer.paymentForms": "Betaalmethodes",
  "admin/editor.footer.paymentForms.paymentForm": "Betalingsformulier",
  "admin/editor.footer.paymentForms.paymentForm.title": "Titel betalingsformulier",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes": "Betalingstype",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes.paymentType": "Betalingstype",
  "admin/editor.footer.acceptedPaymentMethods.title": "Geaccepteerde betaalmethoden",
  "admin/editor.footer.acceptedPaymentMethods.description": "Betaalmethoden geaccepteerd door de winkel",
  "admin/editor.footer.paymentMethodIcon.title": "Betaalmethoden",
  "admin/editor.footer.paymentMethodIcon.description": "Pictogram betaalmethode",
  "admin/editor.footer.paymentMethodIcon.method": "Naam betalingsmethode",
  "admin/editor.footer.storeInformations": "Winkelinformatie",
  "admin/editor.footer.storeInformations.storeInformation": "Winkelinformatie"
}

```


[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-footer/messages/es.json from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "store/social-networks": "Redes sociales",
  "store/section-links": "Enlaces",
  "store/more-information-links": "Más información",
  "store/payment-form": "Medios de pago",
  "admin/editor.footer.title": "Pie de página",
  "admin/editor.footer.description": "Un pie de página que aparece en la parte inferior de tu tienda",
  "admin/editor.footer.logoUrl.title": "URL del logotipo",
  "admin/editor.footer.numberOfSocialNetworks.title": "Número de enlaces de redes sociales",
  "admin/editor.footer.numberOfSectionLinks.title": "Número de enlaces de secciones",
  "admin/editor.footer.numberOfMoreInformationLinks.title": "Número de enlaces para más información",
  "admin/editor.footer.numberOfBadges.title": "Número de insignias a mostrar",
  "admin/editor.footer.numberOfPaymentForms.title": "Número de medios de pago disponibles",
  "admin/editor.footer.showPaymentMethodsInColor.title": "Mostrar los íconos de los medios de pago a color",
  "admin/editor.footer.showSocialNetworksInColor.title": "Mostrar los íconos de las redes sociales a color",
  "admin/editor.footer.showVtexLogoInColor.title": "Mostrar el logotipo de VTEX a color",
  "admin/editor.footer.linksSections": "Secciones de enlaces",
  "admin/editor.footer.linksSections.linksSection": "Sección de enlaces",
  "admin/editor.footer.linksSections.linksSection.title": "Título de la sección de enlaces",
  "admin/editor.footer.linksSections.linksSection.links": "Enlaces de la sección de enlaces",
  "admin/editor.footer.linksSections.linksSection.links.link": "Enlace",
  "admin/editor.footer.linksSections.linksSection.links.link.title": "Título del enlace",
  "admin/editor.footer.linksSections.linksSection.links.link.url": "URL del enlace",
  "admin/editor.footer.linksSections.linksSection.links.link.target": "Destino del enlace",
  "admin/editor.footer.linksSections.linksSection.links.link.target.self": "Pestaña actual del navegador",
  "admin/editor.footer.linksSections.linksSection.links.link.target.blank": "Nueva pestaña del navegador",
  "admin/editor.footer.moreInformationLink": "Enlaces para más información",
  "admin/editor.footer.moreInformationLink.title": "Enlace para más información",
  "admin/editor.footer.badge": "Insignias",
  "admin/editor.footer.badge.title": "Insignia",
  "admin/editor.footer.badge.image.title": "URL de la imagen de la insignia",
  "admin/editor.footer.socialNetworks": "Redes sociales",
  "admin/editor.footer.socialNetworks.title": "Red social",
  "admin/editor.footer.socialNetworks.url.title": "URL de la red social",
  "admin/editor.footer.socialNetworks.socialNetwork.title": "Red social",
  "admin/editor.footer.paymentForms": "Medios de pago",
  "admin/editor.footer.paymentForms.paymentForm": "Medio de pago",
  "admin/editor.footer.paymentForms.paymentForm.title": "Título del medio de pago",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes": "Tipos de pago",
  "admin/editor.footer.paymentForms.paymentForm.paymentTypes.paymentType": "Tipo de pago",
  "admin/editor.footer.acceptedPaymentMethods.title": "Medios de pago aceptados",
  "admin/editor.footer.acceptedPaymentMethods.description": "Medios de pago aceptados por la tienda",
  "admin/editor.footer.paymentMethodIcon.title": "Medio de pago",
  "admin/editor.footer.paymentMethodIcon.description": "Nombre del medio de pago",
  "admin/editor.footer.paymentMethodIcon.method": "Nombre del medio de pago",
  "admin/editor.footer.storeInformations": "Información de la tienda",
  "admin/editor.footer.storeInformations.storeInformation": "Información de la tienda"
}

```


[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-footer/docs/README.md from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```markdown
📢 Don't fork this project. Use, [contribute](https://github.com/vtex-apps/awesome-io#contributing), or open issues through [Store Discussion](https://github.com/vtex-apps/store-discussion).
<!-- 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 -->

# Footer

Footer is a store component that shows information about the store such as address, social networks and payment methods. Furthermore, it is possible to add hyperlinks for privacy policy, FAQ, benefits and attendance. This app is used by store theme.

![image](https://user-images.githubusercontent.com/284515/70253374-dde10680-1761-11ea-8a81-856cec500f89.png)

## Configuration

1. Import the `vtex.store-footer`'s app to your theme's dependencies in the `manifest.json`, for example:

```json
  dependencies: {
    "vtex.store-footer: 2.x"
  }
```

2. Define the `footer` block. For example:

```json
{
  "footer": {
    "blocks": ["footer-layout.desktop", "footer-layout.mobile"]
  },
  "footer-layout.desktop": {
    "children": [
      "flex-layout.row#footer-desktop"
    ]
  },
  "footer-layout.mobile": {
    "children": [
      "flex-layout.row#footer-mobile"
    ]
  },
  "flex-layout.row#footer-desktop": {
    "children": [
      "social-networks",
      "accepted-payment-methods",
      "powered-by"
    ]
  },
  "flex-layout.row#footer-mobile": {
    "children": [
      "social-networks",
      "accepted-payment-methods",
      "powered-by"
    ]
  },
  "social-networks": {
    "props": {
      "socialNetworks": [
        { "url": "https://facebook.com/foo", "name": "Facebook" },
        { "url": "https://twitter.com/foo", "name": "Twitter" }
      ]
    }
  },
  "accepted-payment-methods": {
    "props": {
      "paymentMethods": ["mastercard", "visa", "diners club"]
    }
  }
}
```

`social-networks`:

| Prop name | Type          | Description    |
| --------- | ------------- | -------------- |
| `title` | `string` | Text to show above of list of links |
| `socialNetworks`   | `Array(SocialNetwork)` | Array of social networks |
| `showInColor` | `boolean` | Whether the icons are colored or not |

SocialNetwork

| Prop name | Type          | Description    |
| --------- | ------------- | -------------- |
| `url`   | `string` | Link to the social network profile |
| `name`   | `enum` | Possible values: `facebook`, `twitter`, `linkedin`, `youtube`, `pinterest` |

`accepted-payment-methods`:

| Prop name | Type          | Description    |
| --------- | ------------- | -------------- |
| `paymentMethods`   | `Array` | Possible values: `mastercard`, `visa`, `diners club` |
| `showInColor` | `boolean` | Whether the icons are colored or not |

`powered-by`:

| Prop name | Type          | Description    |
| --------- | ------------- | -------------- |
| `showInColor` | `boolean` | Whether the icons are colored or not |

## Customization

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).

`footer-layout`:

| CSS Handles |
| --- |
| `footerLayout` |
| `footerLayoutSpacer` |

`social-networks`:

| CSS Handles |
| --- |
| `socialNetworksTitle` |
| `socialNetworksContainer` |
| `socialNetworkWrapper` |
| `socialNetworkLink` |
| `socialNetworkImage` |

`accepted-payment-methods`:

| CSS Handles |
| --- |
| `acceptedPaymentMethodContainer` |
| `paymentMethodIcon` |
| `paymentMethodIconImage` |

`powered-by`:

| CSS Handles |
| --- |
| `poweredBy` |
| `poweredByImage` |
| `poweredByLink` |
## Contributors ✨

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

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- markdownlint-enable -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->

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


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

[User] Show me the implementation of store-footer/react/SocialNetworks.tsx from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```tsx
import SocialNetworks from './components/SocialNetworks'

export default SocialNetworks

```


[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-footer/react/Spacer.tsx from the store-footer VTEX app.

[Assistant]
Here's the implementation:

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

const CSS_HANDLES = ['footerSpacer'] as const

/**
 * @deprecated Use a simple inline element instead
 */
function Spacer() {
  const { handles } = useCssHandles(CSS_HANDLES)

  return <div className={`${handles.footerSpacer} flex flex-grow-1`} />
}

export default Spacer

```


[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-footer/react/AcceptedPaymentMethods.tsx from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```tsx
import AcceptedPaymentMethod from './components/AcceptedPaymentMethods'

export default AcceptedPaymentMethod

```


[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-footer/react/PoweredBy.tsx from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { useCssHandles } from 'vtex.css-handles'
import type { RenderContext } from 'vtex.render-runtime'
import { useRuntime } from 'vtex.render-runtime'

import { PLATFORM_GOCOMMERCE } from './modules/platformCode'
import gocommerce from './images/gocommerce.svg'
import gocommerceBw from './images/gocommerce-bw.svg'
import vtex from './images/vtex.svg'
import vtexBw from './images/vtex-bw.svg'

const CSS_HANDLES = ['poweredBy', 'poweredByImage', 'poweredByLink'] as const

const POWERED_BY_ICONS = {
  gocommerce,
  'gocommerce-bw': gocommerceBw,
  vtex,
  'vtex-bw': vtexBw,
}

interface Props {
  /**
   * Define if logo should be displayed in color
   * @default false
   * */
  showInColor?: boolean
}

function isValidIcon(key: string): key is keyof typeof POWERED_BY_ICONS {
  return key in POWERED_BY_ICONS
}

const getImagePathFromProps = (platform: string, showInColor: boolean) =>
  `${platform}${showInColor ? '' : '-bw'}`

/**
 * "Powered By VTEX/GoCommerce" image component, used in Footer
 */
function PoweredBy({ showInColor = false }: Props) {
  const { handles } = useCssHandles(CSS_HANDLES)
  const { platform } = useRuntime() as RenderContext.RenderContext

  const imagePath = getImagePathFromProps(platform, showInColor)

  if (!isValidIcon(imagePath)) {
    return null
  }

  const imageSrc = POWERED_BY_ICONS[imagePath]

  if (platform === PLATFORM_GOCOMMERCE) {
    return (
      <a
        href="https://www.gocommerce.com/?utm_source=store_footer"
        className={handles.poweredByLink}
        target="_blank"
        rel="noopener noreferrer"
      >
        <div className={`${handles.poweredBy} flex items-center w4`}>
          <img
            className={`${handles.poweredByImage} w-100`}
            src={imageSrc}
            alt="GoCommerce"
          />
        </div>
      </a>
    )
  }

  return (
    <div className={`${handles.poweredBy} flex items-center h3 w3`}>
      <img
        className={`${handles.poweredByImage} w-100`}
        src={imageSrc}
        alt="VTEX"
      />
    </div>
  )
}

PoweredBy.displayName = 'PoweredBy'

export default PoweredBy

```


[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-footer/react/Footer.tsx from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Suspense } from 'react'
import { ExtensionPoint, useChildBlock, NoSSR } from 'vtex.render-runtime'
import { useDevice } from 'vtex.device-detector'

const LegacyFooter = React.lazy(() => import('./legacy/Footer'))

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const Footer = (props: any) => {
  const hasFooterDesktop = !!useChildBlock({
    id: 'footer-layout.desktop',
  })

  const hasFooterMobile = !!useChildBlock({
    id: 'footer-layout.mobile',
  })

  const { isMobile } = useDevice()

  const hasFooterLayout = hasFooterDesktop || hasFooterMobile

  if (!hasFooterLayout) {
    return (
      <NoSSR>
        <Suspense fallback={<div />}>
          <LegacyFooter {...props} />
        </Suspense>
      </NoSSR>
    )
  }

  // SSR fallback
  return isMobile ? (
    <ExtensionPoint id="footer-layout.mobile" />
  ) : (
    <ExtensionPoint id="footer-layout.desktop" />
  )
}

Footer.schema = {
  title: 'admin/editor.footer.title',
  description: 'admin/editor.footer.description',
  type: 'object',
  properties: {
    showPaymentFormsInColor: {
      type: 'boolean',
      title: 'admin/editor.footer.showPaymentMethodsInColor.title',
      default: false,
      isLayout: true,
    },
    showSocialNetworksInColor: {
      type: 'boolean',
      title: 'admin/editor.footer.showSocialNetworksInColor.title',
      default: false,
      isLayout: true,
    },
    showVtexLogoInColor: {
      type: 'boolean',
      title: 'admin/editor.footer.showVtexLogoInColor.title',
      default: false,
      isLayout: true,
    },
  },
}

export default Footer

```


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

[User] Show me the implementation of store-footer/react/FooterLayout.tsx from the store-footer VTEX app.

[Assistant]
Here's the implementation:

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

const CSS_HANDLES = ['footerLayout', 'footerLayoutSpacer'] as const

// eslint-disable-next-line @typescript-eslint/ban-types
function FooterLayout({ children }: PropsWithChildren<{}>) {
  const { handles } = useCssHandles(CSS_HANDLES)

  return (
    <>
      <div className={`${handles.footerLayoutSpacer} flex flex-grow-1`} />
      <div className={handles.footerLayout}>{children}</div>
    </>
  )
}

export default FooterLayout

```


[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-footer/react/package.json from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test",
    "lint": "tsc --noEmit && eslint --ext ts,tsx .",
    "test:coverage": "vtex-test-tools test --collectCoverage",
    "gen:coveralls": "yarn test:coverage && cat ./coverage/lcov.info | coveralls"
  },
  "dependencies": {
    "@vtex/css-handles": "^1.0.0",
    "classnames": "^2.2.6",
    "react": "^16.8.3",
    "react-collapse": "^4.0.3",
    "react-intl": "3.9.1",
    "react-motion": "^0.5.2"
  },
  "devDependencies": {
    "@apollo/react-testing": "^4.0.0",
    "@types/classnames": "^2.2.7",
    "@types/graphql": "^14.2.0",
    "@types/jest": "^24.0.11",
    "@types/node": "^11.13.0",
    "@types/react": "^16.8.10",
    "@vtex/test-tools": "^3.3.2",
    "apollo-client": "^2.5.1",
    "coveralls": "^3.0.3",
    "react-dom": "^16.8.3",
    "typescript": "3.9.7",
    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles",
    "vtex.device-detector": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.device-detector@0.2.5/public/@types/vtex.device-detector",
    "vtex.flex-layout": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.flex-layout@0.15.2/public/@types/vtex.flex-layout",
    "vtex.menu": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.menu@2.27.0/public/@types/vtex.menu",
    "vtex.native-types": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.native-types@0.7.4/public/@types/vtex.native-types",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.4/public/@types/vtex.render-runtime",
    "vtex.rich-text": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.rich-text@0.11.2/public/@types/vtex.rich-text",
    "vtex.shop-review-interfaces": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.shop-review-interfaces@0.3.0/public/@types/vtex.shop-review-interfaces",
    "vtex.store-components": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-components@3.136.2/public/@types/vtex.store-components",
    "vtex.store-icons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons"
  },
  "version": "2.27.0"
}

```