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

[Assistant]
Here's the implementation:

```tsx
import type { PropsWithChildren } from 'react'
import React from 'react'
import classNames from 'classnames'
import { useCssHandles } from 'vtex.css-handles'
import { Container } from 'vtex.store-components'

interface Props {
  /** Define if the row should take the full width of its container */
  fullWidth?: boolean
  /** Define if background and text colors should be inverted */
  inverted?: boolean
  blockClass?: string
}

const CSS_HANDLES = ['rowContainer', 'row', 'rowContentContainer'] as const

function Row({ children, fullWidth, inverted }: PropsWithChildren<Props>) {
  const { handles } = useCssHandles(CSS_HANDLES)

  const content = (
    <div className={`${handles.rowContainer} w-100 flex items-center`}>
      {children}
    </div>
  )

  return (
    <div
      className={classNames(
        handles.row,
        'w-100',
        inverted ? 'bg-base--inverted c-on-base--inverted' : 'bg-base c-on-base'
      )}
    >
      {fullWidth ? (
        content
      ) : (
        <Container className={`${handles.rowContentContainer} w-100 flex`}>
          {content}
        </Container>
      )}
    </div>
  )
}

Row.schema = {
  title: 'admin/editor.row.title',
  type: 'object',
  properties: {
    blockClass: {
      title: 'admin/editor.blockClass.title',
      description: 'admin/editor.blockClass.description',
      type: 'string',
      isLayout: true,
    },
    inverted: {
      title: 'admin/editor.inverted.title',
      description: 'admin/editor.inverted.description',
      type: 'boolean',
      default: true,
      isLayout: true,
    },
    fullWidth: {
      title: 'admin/editor.fullWidth.title',
      description: 'admin/editor.fullWidth.description',
      type: 'boolean',
      default: false,
      isLayout: true,
    },
  },
}

export default Row

```


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

[Assistant]
Here's the implementation:

```json
{
  "definitions": {
    "Footer": {
      "properties": {
        "logo": {
          "title": "admin/editor.footer.logoUrl.title",
          "$ref": "app:vtex.native-types#/definitions/url"
        },
        "socialNetworks": {
          "title": "admin/editor.footer.socialNetworks",
          "type": "array",
          "minItems": 1,
          "maxItems": 4,
          "items": {
            "title": "admin/editor.footer.socialNetworks.title",
            "type": "object",
            "properties": {
              "url": {
                "title": "admin/editor.footer.socialNetworks.url.title",
                "$ref": "app:vtex.native-types#/definitions/url"
              },
              "socialNetwork": {
                "title": "admin/editor.footer.socialNetworks.title",
                "default": "Facebook",
                "enum": ["Facebook", "Twitter", "Instagram", "Youtube"]
              }
            }
          }
        },
        "sectionLinks": {
          "title": "admin/editor.footer.linksSections",
          "type": "array",
          "minItems": 0,
          "maxItems": 5,
          "items": {
            "title": "admin/editor.footer.linksSections.linksSection",
            "type": "object",
            "properties": {
              "title": {
                "title": "admin/editor.footer.linksSections.linksSection.title",
                "$ref": "app:vtex.native-types#/definitions/text"
              },
              "links": {
                "title": "admin/editor.footer.linksSections.linksSection.links",
                "type": "array",
                "minItems": 1,
                "maxItems": 10,
                "items": {
                  "title": "admin/editor.footer.linksSections.linksSection.links.link",
                  "type": "object",
                  "properties": {
                    "title": {
                      "title": "admin/editor.footer.linksSections.linksSection.links.link.title",
                      "$ref": "app:vtex.native-types#/definitions/text"
                    },
                    "url": {
                      "title": "admin/editor.footer.linksSections.linksSection.links.link.url",
                      "$ref": "app:vtex.native-types#/definitions/url"
                    },
                    "target": {
                      "title": "admin/editor.footer.linksSections.linksSection.links.link.target",
                      "type": "string",
                      "default": "_self",
                      "enum": ["_self", "_blank"],
                      "enumNames": [
                        "admin/editor.footer.linksSections.linksSection.links.link.target.self",
                        "admin/editor.footer.linksSections.linksSection.links.link.target.blank"
                      ]
                    }
                  }
                }
              }
            }
          }
        },
        "badges": {
          "title": "admin/editor.footer.badge",
          "type": "array",
          "items": {
            "title": "admin/editor.footer.badge.title",
            "type": "object",
            "properties": {
              "image": {
                "title": "admin/editor.footer.badge.image.title",
                "$ref": "app:vtex.native-types#/definitions/text"
              }
            }
          }
        },
        "paymentForms": {
          "title": "admin/editor.footer.paymentForms",
          "type": "array",
          "minItems": 1,
          "maxItems": 5,
          "items": {
            "title": "admin/editor.footer.paymentForms.paymentForm",
            "type": "object",
            "properties": {
              "title": {
                "title": "admin/editor.footer.paymentForms.paymentForm.title",
                "$ref": "app:vtex.native-types#/definitions/text"
              },
              "paymentTypes": {
                "title": "admin/editor.footer.paymentForms.paymentForm.paymentTypes",
                "type": "array",
                "minItems": 1,
                "items": {
                  "title": "admin/editor.footer.paymentForms.paymentForm.paymentTypes.paymentType",
                  "type": "string",
                  "default": "MasterCard",
                  "enum": ["MasterCard", "Visa", "Diners Club"]
                }
              }
            }
          }
        },
        "storeInformations": {
          "title": "admin/editor.footer.storeInformations",
          "type": "array",
          "minItems": 0,
          "maxItems": 2,
          "items": {
            "title": "admin/editor.footer.storeInformations.storeInformation",
            "type": "object",
            "properties": {
              "storeInformation": {
                "title": "admin/editor.footer.storeInformations.storeInformation",
                "$ref": "app:vtex.native-types#/definitions/text",
                "widget": {
                  "ui:widget": "textarea"
                }
              }
            }
          }
        }
      }
    },
    "AcceptedPaymentMethods": {
      "properties": {
        "paymentMethods": {
          "title": "admin/editor.footer.acceptedPaymentMethods.title",
          "type": "array",
          "minItems": 1,
          "maxItems": 5,
          "items": {
            "title": "admin/editor.footer.paymentMethodIcon.method",
            "type": "string",
            "default": "MasterCard",
            "enum": ["MasterCard", "Visa", "Diners Club"]
          }
        }
      }
    },
    "SocialNetworks": {
      "properties": {
        "socialNetworks": {
          "title": "admin/editor.footer.socialNetworks",
          "type": "array",
          "minItems": 1,
          "maxItems": 6,
          "items": {
            "title": "admin/editor.footer.socialNetworks.title",
            "type": "object",
            "properties": {
              "url": {
                "title": "admin/editor.footer.socialNetworks.url.title",
                "$ref": "app:vtex.native-types#/definitions/url"
              },
              "name": {
                "title": "admin/editor.footer.socialNetworks.title",
                "type": "string",
                "enum": [
                  "Facebook",
                  "Twitter",
                  "Instagram",
                  "YouTube",
                  "LinkedIn",
                  "Pinterest"
                ]
              }
            }
          }
        }
      }
    }
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "footer": {
    "blocks": ["footer-layout.mobile", "footer-layout.desktop"]
  },
  "footer-layout.mobile": {
    "children": ["flex-layout.row#powered-by"]
  },
  "footer-layout.desktop": {
    "children": ["flex-layout.row#powered-by"]
  },

  "flex-layout.row#powered-by": {
    "children": ["flex-layout.col#powered-by"],
    "props": {
      "paddingTop": 4,
      "paddingBottom": 4
    }
  },
  "flex-layout.col#powered-by": {
    "children": ["powered-by"],
    "props": {
      "horizontalAlign": "center"
    }
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "footer": {
    "allowed": [
      "footer-layout.mobile",
      "footer-layout.desktop"
    ],
    "component": "Footer",
    "content": {
      "$ref": "app:vtex.store-footer#/definitions/Footer"
    },
    "hydration": "on-view"
  },
  "footer-layout": {
    "component": "FooterLayout",
    "composition": "children",
    "allowed": [
      "footer-row",
      "footer-spacer",
      "social-networks",
      "accepted-payment-methods",
      "logo",
      "newsletter",
      "menu",
      "unstable--menu",
      "powered-by",
      "rich-text",
      "image",
      "flex-layout",
      "shop-review-badge"
    ]
  },
  "footer-layout.mobile": {
    "device": "mobile"
  },
  "footer-layout.desktop": {
    "device": "desktop"
  },
  "social-networks": {
    "component": "SocialNetworks",
    "content": {
      "$ref": "#/definitions/SocialNetworks"
    }
  },
  "accepted-payment-methods": {
    "component": "AcceptedPaymentMethods",
    "content": {
      "$ref": "#/definitions/AcceptedPaymentMethods"
    }
  },
  "powered-by": {
    "component": "PoweredBy"
  },
  "footer-row": {
    "component": "Row",
    "composition": "children",
    "allowed": "*"
  },
  "footer-spacer": {
    "component": "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/typings/svg.d.ts from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.svg' {
  const svg: any
  export default svg
}

```


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

[Assistant]
Here's the implementation:

```typescript
declare module '*.css' {
  const css: any
  export default css
}

```


[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/typings/graphql.d.ts from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.graphql' {
  import type { 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 store-footer/react/legacy/Footer.test.js from the store-footer VTEX app.

[Assistant]
Here's the implementation:

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

import Footer from './Footer'

describe('<Footer /> component', () => {
  const renderComponent = customProps => {
    const props = {
      socialNetworks: [
        {
          url: 'https://www.facebook.com/',
          socialNetwork: 'Facebook',
        },
      ],
      sectionLinks: [
        {
          title: 'Section title',
          links: [{ url: 'mockedUrl', title: 'Some title' }],
        },
      ],
      badges: [{ image: 'imageURL' }],
      paymentForms: [
        {
          title: 'Title payment',
          paymentTypes: ['MasterCard', 'Visa', 'Diners Club'],
        },
      ],
      showPaymentFormsInColor: true,
      showSocialNetworksInColor: true,
      showVtexLogoInColor: true,
      logo: 'logoUrl',
      ...customProps,
    }

    return render(<Footer {...props} />)
  }

  it('should be rendered', () => {
    const { asFragment } = renderComponent()
    expect(asFragment()).toBeDefined()
  })

  it('should match the snapshot', () => {
    const { asFragment } = renderComponent()
    expect(asFragment()).toMatchSnapshot()
  })

  it('should contain the section links', () => {
    const sectionLinks = [
      {
        title: 'We have one section title',
        links: [
          { url: 'someUrl', title: 'someTitle' },
          { url: 'anotherUrl', title: 'anotherTitle' },
        ],
      },
      {
        title: 'We have two section titles',
        links: [{ url: 'yetAnotherUrl', title: 'yetAnotherUrl' }],
      },
    ]

    const { getAllByText } = renderComponent({ sectionLinks })

    sectionLinks.forEach(({ title, links }) => {
      expect(getAllByText(title)).toBeTruthy()

      links.forEach(({ title }) => {
        expect(getAllByText(title)).toBeTruthy()
      })
    })
  })

  it('should contain the payment forms', () => {
    const paymentForms = [
      {
        title: 'Credit',
        paymentTypes: ['MasterCard', 'Visa', 'Diners Club'],
      },
      {
        title: 'Debit',
        paymentTypes: ['MasterCard', 'Visa'],
      },
    ]

    const { getByText } = renderComponent({ paymentForms })

    paymentForms.forEach(({ title }) => {
      expect(getByText(title)).toBeTruthy()
    })
  })
})

```


[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/legacy/FooterVtexLogo.js from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { withRuntimeContext } from 'vtex.render-runtime'

import { PLATFORM_GOCOMMERCE } from '../modules/platformCode'
import withImage from './withImage'
import footer from './footer.css'

/**
 * "Powered By Vtex" image's component, used in Footer
 */
const FooterVtexLogo = ({ runtime, logoUrl, imageSrc }) => {
  if (!imageSrc) {
    return null
  }

  const isPlatformGCResult = runtime.platform === PLATFORM_GOCOMMERCE
  const vtexLogoItemClasses = classNames(footer.vtexLogoItem, {
    w4: isPlatformGCResult,
    'h3 w3': !isPlatformGCResult,
  })

  return (
    <div
      className={`${footer.badgeList} flex flex-row justify-center pv4-s pa0-ns items-center ml-auto-m`}
    >
      {logoUrl && (
        <span className={`${footer.badge} pa2-s pa1-ns`}>
          <img
            className={`${footer.logoImage} h3`}
            alt={runtime.platform}
            src={logoUrl}
          />
        </span>
      )}
      <span className={`${footer.badge} pa2-s pa1-ns nt7-ns`}>
        <img
          className={vtexLogoItemClasses}
          alt={runtime.platform}
          src={imageSrc}
        />
      </span>
    </div>
  )
}

FooterVtexLogo.displayName = 'FooterVtexLogo'

FooterVtexLogo.propTypes = {
  /** Get the account name to find the correct platfom */
  runtime: PropTypes.shape({
    account: PropTypes.string.isRequired,
    platform: PropTypes.string.isRequired,
  }).isRequired,
  /** If true, the original logo (with color) is used. If not, the grayscale's one */
  showInColor: PropTypes.bool,
  /** The source for an external customizable logo to show above "Powered By Vtex" */
  logoUrl: PropTypes.string,
  imageSrc: PropTypes.string,
}

const getImagePathFromProps = ({ runtime, showInColor }) =>
  `${runtime.platform}${showInColor ? '' : '-bw'}.svg`

export default withRuntimeContext(
  withImage(getImagePathFromProps)(FooterVtexLogo)
)

```


[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/legacy/FooterPaymentFormMatrix.js from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'
import React, { Component } from 'react'

import FooterPaymentFormList from './FooterPaymentFormList'

import footer from './footer.css'

export default class FooterPaymentFormMatrix extends Component {
  static propTypes = {
    /** Payment forms array */
    paymentForms: PropTypes.arrayOf(
      PropTypes.shape({
        /** Payment form title */
        title: PropTypes.string,
        /** Payment types */
        paymentTypes: PropTypes.arrayOf(PropTypes.string.isRequired),
      })
    ),
    /** Determines if the icons are colorful */
    showPaymentFormsInColor: PropTypes.bool,
  }

  render() {
    const { paymentForms, ...otherProps } = this.props

    return (
      paymentForms && (
        <div className={`${footer.paymentMatrix} flex flex-wrap`}>
          {paymentForms.map((paymentFormsItem, index) => (
            <div
              key={`payment-container-${index}`}
              className={footer.paymentMatrixItem}
            >
              <FooterPaymentFormList
                horizontal
                titleId={paymentFormsItem.title}
                list={paymentFormsItem.paymentTypes.map(paymentType => ({
                  paymentType,
                }))}
                {...otherProps}
              />
            </div>
          ))}
        </div>
      )
    )
  }
}

```


[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/legacy/FooterLinkList.js from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'
import React from 'react'
import { injectIntl } from 'react-intl'
import { IOMessage, formatIOMessage } from 'vtex.native-types'

import footerList from './footerList'
import footer from './footer.css'

const FooterLinkItem = ({ url, title, target, intl }) =>
  title ? (
    <a
      className={`${
        footer.listLink
      } dib no-underline underline-hover mb0 mt2 w-100 t-small truncate c-muted-1 pointer`}
      href={formatIOMessage({ id: url, intl })}
      target={target ? target : '_self'}
    >
      <IOMessage id={title} />
    </a>
  ) : null

FooterLinkItem.displayName = 'FooterLinkItem'

FooterLinkItem.propTypes = {
  url: PropTypes.string,
  title: PropTypes.string,
  target: PropTypes.oneOf(['_self', '_blank']),
  intl: PropTypes.object,
}

const FooterLinkItemWithIntl = injectIntl(FooterLinkItem)

export { FooterLinkItemWithIntl as FooterLinkItem }

export default footerList(FooterLinkItemWithIntl)

```


[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/legacy/FooterPaymentFormList.js from the store-footer VTEX app.

[Assistant]
Here's the implementation:

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

import footerList from './footerList'
import withImage from './withImage'
import footer from './footer.css'

/**
 * Shows an image for the payments forms accepted
 */
const FooterPaymentFormItem = ({ imageSrc }) => {
  if (!imageSrc) {
    return null
  }

  return (
    <img
      className={`${footer.paymentFormItem} pr0 w2 h2`}
      src={imageSrc}
      alt=""
    />
  )
}

FooterPaymentFormItem.displayName = 'FooterPaymentFormItem'

FooterPaymentFormItem.propTypes = {
  imageSrc: PropTypes.string.isRequired,
}

const getImagePathFromProps = ({ paymentType, showInColor }) =>
  `${paymentType.toLowerCase()}${showInColor ? '' : '-bw'}.svg`

export default footerList(
  withImage(getImagePathFromProps)(FooterPaymentFormItem)
)

```


[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/legacy/withImage.js from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```javascript
import React, { Component } from 'react'

function getDisplayName(Component) {
  return Component.displayName || Component.name || 'Component'
}

/**
 * HOC used for lazily load an image in the 'images' folder right above
 * this component.
 *
 * Used for loading the logos for the Footer
 *
 * @param {Function} getImageFilename
 */
export default getImageFilename => {
  return WrappedComponent => {
    class WithImage extends Component {
      static displayName = `WithImage(${getDisplayName(WrappedComponent)})`
      static getSchema = WrappedComponent.getSchema
      static schema = WrappedComponent.schema

      state = {}

      _isMounted = false

      componentDidMount() {
        const imageName = getImageFilename(this.props)
        this._isMounted = true
        this.lazyImport(imageName)
      }

      componentWillUnmount() {
        this._isMounted = false
      }

      componentDidUpdate() {
        const imageName = getImageFilename(this.props)
        if (imageName !== this.state.imageName) {
          this.lazyImport(imageName)
        }
      }

      lazyImport = imageName => {
        return import(`../images/${imageName}`).then(imageSrc => {
          if (this._isMounted) {
            this.setState({ imageSrc: imageSrc.default, imageName })
          }
        })
      }

      render() {
        return (
          <WrappedComponent {...this.props} imageSrc={this.state.imageSrc} />
        )
      }
    }

    return WithImage
  }
}

```


[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/legacy/propTypes.js from the store-footer VTEX app.

[Assistant]
Here's the implementation:

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

export const objectLikeLinkArray = PropTypes.arrayOf(
  PropTypes.shape({
    url: PropTypes.string,
    title: PropTypes.string,
    target: PropTypes.oneOf(['_self', '_blank']),
  })
)

export const objectLikeBadgeArray = PropTypes.arrayOf(
  PropTypes.shape({
    image: PropTypes.string,
  })
)

```


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

[User] Show me the implementation of store-footer/react/legacy/FooterLinksMatrix.js from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'
import React, { Component, Fragment } from 'react'

import Accordion from './Accordion'
import FooterLinkList, { FooterLinkItem } from './FooterLinkList'
import { objectLikeLinkArray } from './propTypes'
import footer from './footer.css'

export default class FooterLinksMatrix extends Component {
  static propTypes = {
    /** Links to be shown */
    links: PropTypes.arrayOf(
      PropTypes.shape({
        /** Link section title */
        title: PropTypes.string,
        /** Link section links */
        links: objectLikeLinkArray,
      })
    ),
  }

  render() {
    const { links } = this.props

    if (!links) {
      return null
    }

    return (
      <div className={`${footer.matrixContainer} flex flex-wrap`}>
        {links.map((linkItem, index) => (
          <Fragment key={`links-container-${index}`}>
            <div className={`${footer.matrixItem} flex flex-auto dn-s flex-ns`}>
              <FooterLinkList titleId={linkItem.title} list={linkItem.links} />
            </div>
            <div
              className={`${
                footer.matrixItemSmall
              } bb b--muted-2 dn-ns db-s w-100 ph2 pv3`}
            >
              <Accordion title={linkItem.title}>
                {linkItem.links.map(link => (
                  <div
                    key={`${link.title}-${index}`}
                    className={`${footer.accordionItem} pt1`}
                  >
                    <FooterLinkItem {...link} />
                  </div>
                ))}
              </Accordion>
            </div>
          </Fragment>
        ))}
      </div>
    )
  }
}

```


[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/legacy/withImage.d.ts from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { FC, ComponentType } from 'react'

export default (mapper: (props: any) => void) => (
  component: ComponentType<any>
) => FC

```


[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/legacy/FooterSocialNetworkList.js from the store-footer VTEX app.

[Assistant]
Here's the implementation:

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

import footerList from './footerList'
import withImage from './withImage'
import footer from './footer.css'

/**
 * Shows an image for an specific social network
 */
const FooterSocialNetworkItem = ({ imageSrc, url }) => {
  if (!imageSrc) {
    return null
  }

  return (
    <a
      href={url}
      target="_blank"
      rel="noreferrer noopener"
      className={`${footer.socialNetworkList} c-muted-1`}
    >
      <img
        className={`${footer.socialNetworkItem} w2 h2`}
        src={imageSrc}
        alt=""
      />
    </a>
  )
}

FooterSocialNetworkItem.displayName = 'FooterSocialNetworkItem'

FooterSocialNetworkItem.propTypes = {
  /** Social network icon source */
  imageSrc: PropTypes.string,
  /** For which link should the user be redirected if the image is clicked */
  url: PropTypes.string,
  /** If true, the original logo (with color) is used. If not, the grayscale's one */
  showInColor: PropTypes.bool.isRequired,
  /** Indicates from which social network should the image be displayed */
  socialNetwork: PropTypes.oneOf([
    'Facebook',
    'Twitter',
    'Instagram',
    'Youtube',
  ]),
}
const getImagePathFromProps = ({ socialNetwork, showInColor }) =>
  `${socialNetwork.toLowerCase()}${showInColor ? '' : '-bw'}.svg`

export default footerList(
  withImage(getImagePathFromProps)(FooterSocialNetworkItem)
)

```


[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/legacy/FooterBadgeList.js from the store-footer VTEX app.

[Assistant]
Here's the implementation:

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

import footerList from './footerList'

const FooterBadgeItem = ({ image }) => {
  return (image && <img src={image} />) || null
}

FooterBadgeItem.displayName = 'FooterBadgeItem'

FooterBadgeItem.propTypes = {
  image: PropTypes.string,
}

export default footerList(FooterBadgeItem)

```


[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/legacy/footer.css from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```css
.footer {
  --vpadding: 1.25rem;
  --vpadding-limits: 1.5rem;
  --icon-filling: #727273;
  --tilte-min-height: 0.875rem;
}

.listTitle {
  min-height: var(--tilte-min-height);
}

.accordionIcon path {
  fill: var(--icon-filling);
}

/* Mobile */
@media screen and (min-width: 10em) {
  .container {
    flex-direction: column;
  }
}

@media screen and (min-width: 40em) {
  .container {
    flex-flow: row wrap;
  }
}

@media screen and (min-width: 64em) {
  .container {
    padding-top: var(--vpadding);
    padding-bottom: var(--vpadding);
  }

  .container:first-of-type {
    padding-top: var(--vpadding-limits);
  }

  .container:last-of-type {
    padding-bottom: var(--vpadding-limits);
  }
}

.accordion {}

.accordionTitle {}

.listLink {}

.matrixContainer {}

.matrixItem {}

.matrixItemSmall {}

.accordionItem {}

.listContainer {}

.listContainerRightAligned {}

.listContainerHorizontal {}

.list {}

.listHorizontal {}

.listItem {}

.listItemHorizontal {}

.paymentFormItem {}

.paymentMatrix {}

.paymentMatrixItem {}

.socialNetworkItem {}

.vtexLogoItem {}

.badgeList {}

.badge {}

.logoImage {}

.textInformation {}

.links {}

.socialNetworkContainer {}

.textContainer {}

.socialNetworkList {}

.navigation {}

.payment {}

```


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

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import classNames from 'classnames'
import { Container } from 'vtex.store-components'
import { IOMessage } from 'vtex.native-types'

import FooterBadgeList from './FooterBadgeList'
import FooterLinksMatrix from './FooterLinksMatrix'
import FooterPaymentFormMatrix from './FooterPaymentFormMatrix'
import FooterVtexLogo from './FooterVtexLogo'
import FooterSocialNetworkList from './FooterSocialNetworkList'
import { objectLikeBadgeArray, objectLikeLinkArray } from './propTypes'

import footer from './footer.css'

/**
 * Footer component that appears in the bottom of every page.
 * Can be configured by the pages editor.
 */
export default class Footer extends Component {
  static displayName = 'Footer'

  static propTypes = {
    /** Social Networks */
    socialNetworks: objectLikeLinkArray,
    /** Links Sections */
    sectionLinks: PropTypes.arrayOf(
      PropTypes.shape({
        /** Link section title */
        title: PropTypes.string,
        /** Link  section links */
        links: objectLikeLinkArray,
      })
    ),
    /** Badges */
    badges: objectLikeBadgeArray,
    /** Payment Forms */
    paymentForms: PropTypes.arrayOf(
      PropTypes.shape({
        /** Payment Form title */
        title: PropTypes.string,
        /** Payment Types */
        paymentTypes: PropTypes.arrayOf(PropTypes.string),
      })
    ),
    /** Determines if the icons are colorful */
    showPaymentFormsInColor: PropTypes.bool,
    /** Determines if the icons are colorful */
    showSocialNetworksInColor: PropTypes.bool,
    /** Determines if VTEX logo are colorful */
    showVtexLogoInColor: PropTypes.bool,
    /** Logo URL */
    logo: PropTypes.string,
    /** Store Informations */
    storeInformations: PropTypes.arrayOf(PropTypes.objectOf(PropTypes.string)),
  }

  static defaultProps = {
    showPaymentFormsInColor: false,
    showSocialNetworksInColor: false,
    showVtexLogoInColor: false,
    socialNetworks: [
      {
        socialNetwork: 'Facebook',
        url: '#',
      },
    ],
    sectionLinks: [],
    badges: [],
    paymentForms: [
      {
        title: 'admin/editor.footer.paymentForms.paymentForm',
        paymentTypes: ['MasterCard'],
      },
    ],
    storeInformations: [],
  }

  getInformationCssClasses = (listLength, index) => {
    let paddingClass
    const defaultClasses = `${footer.textInformation} w-100 w-50-ns t-mini ma0`
    // Only apply vertical paddings if there is more than 1 element
    if (listLength > 1) {
      if (index === 0) {
        paddingClass = 'pt4-s pb4-s pr4-ns'
      } else if (index + 1 === listLength) {
        paddingClass = 'pt4-s pb4-ns pl4-ns'
      } else {
        paddingClass = 'pv4-s'
      }
    }
    return classNames(defaultClasses, paddingClass)
  }

  render() {
    const {
      showPaymentFormsInColor,
      showSocialNetworksInColor,
      showVtexLogoInColor,
      logo,
      sectionLinks,
      socialNetworks,
      paymentForms,
      badges,
      storeInformations,
    } = this.props

    return (
      <footer className={`${footer.footer} bt bw1 b--muted-4 mt4 pv5`}>
        <Container className="justify-center flex">
          <div className="w-100 mw9">
            <nav
              className={`${footer.container} ${
                footer.navigation
              } pt5-s flex justify-between bg-base c-muted-1`}>
              <div className={`${footer.links} t-small w-100-s w-80-ns pb5-s`}>
                <FooterLinksMatrix links={sectionLinks} />
              </div>
              <div className={`${footer.socialNetworkContainer} pv5-s pa1-ns`}>
                <FooterSocialNetworkList
                  titleId="store/social-networks"
                  list={socialNetworks}
                  horizontal
                  alignRight
                  titleCapitals
                  showInColor={showSocialNetworksInColor}
                />
              </div>
            </nav>
            <div
              className={`${footer.container} ${
                footer.payment
              } pv5-s flex justify-between bg-base c-muted-1`}>
              <FooterPaymentFormMatrix
                paymentForms={paymentForms}
                horizontal
                showInColor={showPaymentFormsInColor}
              />
            </div>
            <div
              className={`${footer.container} ${
                footer.informationContainer
              } pt5-s flex justify-between bg-base c-muted-1`}>
              <div
                className={`${
                  footer.textContainer
                } w-100-s pb5-s w-80-ns flex flex-wrap`}>
                {storeInformations &&
                  storeInformations.map(({ storeInformation }, index) => (
                    <p
                      key={`information-${index}`}
                      className={this.getInformationCssClasses(
                        storeInformations.length,
                        index
                      )}>
                      <IOMessage id={storeInformation} />
                    </p>
                  ))}
              </div>
              <FooterVtexLogo
                logoUrl={logo}
                showInColor={showVtexLogoInColor}
              />
              <FooterBadgeList list={badges} />
            </div>
          </div>
        </Container>
      </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/legacy/footerList.js from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```javascript
import classNames from 'classnames'
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { injectIntl } from 'react-intl'

import footer from './footer.css'

const getDisplayName = Component => {
  return Component.displayName || Component.name || 'Component'
}

export default WrappedComponent => {
  class FooterList extends Component {
    static displayName = `FooterList(${getDisplayName(WrappedComponent)})`

    static propTypes = {
      titleId: PropTypes.string,
      list: PropTypes.array,
      intl: PropTypes.object,
      alignRight: PropTypes.bool,
      horizontal: PropTypes.bool,
      titleCapitals: PropTypes.bool,
    }

    static defaultProps = {
      alignRight: false,
      horizontal: false,
    }

    formatMessage(id) {
      return (
        (this.props.intl.messages[id] &&
          this.props.intl.formatMessage({ id })) ||
        id
      )
    }

    render() {
      const {
        list,
        titleId,
        alignRight,
        horizontal,
        titleCapitals,
        ...otherProps
      } = this.props

      if (!list || list.length === 0) return null

      const titleClasses = classNames(`${footer.listTitle} t-small ma0 db`, {
        ttu: !titleCapitals,
      })

      const listContainerClasses = classNames(
        `${footer.listContainer} pl0 w-100 mt0-ns`,
        {
          [`${footer.listContainerRightAligned} ml-auto-m`]: alignRight,
          [`${footer.listContainerHorizontal} w-auto-m`]: horizontal,
        }
      )

      const listClasses = classNames(
        `${footer.list} list flex flex-column flex-wrap pa0 mb0 mt3`,
        {
          [`${footer.listHorizontal} flex-row flex-wrap`]: horizontal,
        }
      )

      const listItemClasses = classNames(`${footer.listItem} mr0 mr3`, {
        [`${footer.listItemHorizontal}`]: horizontal,
      })

      return (
        <div className={listContainerClasses}>
          {titleId && (
            <span className={titleClasses}>{this.formatMessage(titleId)}</span>
          )}
          <ul className={listClasses}>
            {list.map((item, index) => (
              <li key={index} className={listItemClasses}>
                <WrappedComponent {...otherProps} {...item} />
              </li>
            ))}
          </ul>
        </div>
      )
    }
  }

  return injectIntl(FooterList)
}

```


[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/legacy/Accordion.js from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```javascript
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { Collapse } from 'react-collapse'
import { injectIntl } from 'react-intl'

import { IconCaret } from 'vtex.store-icons'

import footer from './footer.css'

class Accordion extends Component {
  static propTypes = {
    /** Title shown in Accordion */
    title: PropTypes.string,
    /** Accordion children. Components shown inside Collapse */
    children: PropTypes.node.isRequired,
    /** Internationalization */
    intl: PropTypes.object,
  }

  state = {
    open: false,
  }

  handleClick = () => {
    this.setState(({ open }) => ({ open: !open }))
  }

  translate = id => {
    return this.props.intl.messages[id]
      ? this.props.intl.formatMessage({ id })
      : id
  }

  render() {
    const { children, title } = this.props
    const { open } = this.state

    return (
      <div className={`${footer.accordion} pv2`}>
        <div
          role="button"
          tabIndex={0}
          className="pointer"
          onKeyDown={e => {
            if (e.key === 'Enter') {
              this.handleClick()
            }
          }}
          onClick={this.handleClick}
        >
          <div>
            {title && (
              <span className={`${footer.accordionTitle} dib ma0 ttu`}>
                {this.translate(title)}
              </span>
            )}
            <span className={`${footer.accordionIcon} fr`}>
              {open ? (
                <IconCaret orientation="down" />
              ) : (
                <IconCaret orientation="right" />
              )}
            </span>
          </div>
        </div>

        <div style={{ overflowY: 'auto' }}>
          <Collapse isOpened={open}>{children}</Collapse>
        </div>
      </div>
    )
  }
}

export default injectIntl(Accordion)

```


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

[Assistant]
Here's the implementation:

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

import PoweredBy from '../PoweredBy'

describe('PoweredBy', () => {
  it('should get the platform from runtime', async () => {
    render(<PoweredBy />)

    const element = await screen.findByAltText('VTEX')

    const src = element.getAttribute('src')

    expect(src).toBe('vtex-bw.svg')
  })
})

```


[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/components/SocialNetworks/index.tsx from the store-footer VTEX app.

[Assistant]
Here's the implementation:

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

import SocialNetwork, {
  CSS_HANDLES as SocialNetworkHandles,
} from './SocialNetwork'
import { SocialNetworkHandlesProvider } from './HandlesContext'

export const CSS_HANDLES = [
  'socialNetworksTitle',
  'socialNetworksContainer',
  'socialNetworkWrapper',
  ...SocialNetworkHandles,
] as const

interface SocialNetworkData {
  url: string
  name: string
}

interface Props {
  /** Section title */
  title?: string
  /** List of social networks to display */
  socialNetworks: SocialNetworkData[]
  /** Define if social network icons will be coloured */
  showInColor: boolean
  classes?: CssHandlesTypes.CustomClasses<typeof CSS_HANDLES>
}

function SocialNetworks({
  title,
  showInColor,
  socialNetworks = [],
  classes,
}: PropsWithChildren<Props>) {
  const { handles, withModifiers } = useCssHandles(CSS_HANDLES, {
    classes,
  })

  return (
    <SocialNetworkHandlesProvider
      handles={handles}
      withModifiers={withModifiers}
    >
      <div className={handles.socialNetworkWrapper}>
        {title && (
          <div className={`${handles.socialNetworksTitle} mb4`}>
            <IOMessage id={title} />
          </div>
        )}
        <div className={`${handles.socialNetworksContainer} nh2 flex`}>
          {socialNetworks.map((socialNetworkData) => (
            <SocialNetwork
              key={socialNetworkData.name + socialNetworkData.url}
              showInColor={showInColor}
              url={socialNetworkData.url}
              name={socialNetworkData.name}
            />
          ))}
        </div>
      </div>
    </SocialNetworkHandlesProvider>
  )
}

SocialNetworks.schema = {
  title: 'admin/editor.footer.socialNetworks.title',
  description: 'admin/editor.footer.socialNetworks.description',
  type: 'object',
  properties: {
    showInColor: {
      default: false,
      isLayout: true,
      title: 'admin/editor.footer.showSocialNetworksInColor.title',
      type: 'boolean',
    },
  },
}

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/components/SocialNetworks/SocialNetwork.tsx from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { useIntl } from 'react-intl'
import { formatIOMessage } from 'vtex.native-types'

import facebook from '../../images/facebook.svg'
import facebookBw from '../../images/facebook-bw.svg'
import instagram from '../../images/instagram.svg'
import instagramBw from '../../images/instagram-bw.svg'
import linkedin from '../../images/linkedin.svg'
import linkedinBw from '../../images/linkedin-bw.svg'
import pinterest from '../../images/pinterest.svg'
import pinterestBw from '../../images/pinterest-bw.svg'
import twitter from '../../images/twitter.svg'
import twitterBw from '../../images/twitter-bw.svg'
import youtube from '../../images/youtube.svg'
import youtubeBw from '../../images/youtube-bw.svg'
import { useSocialNetworkHandles } from './HandlesContext'

export const CSS_HANDLES = ['socialNetworkLink', 'socialNetworkImage'] as const

const SOCIAL_NETWORK_ICONS = {
  facebook,
  'facebook-bw': facebookBw,
  instagram,
  'instagram-bw': instagramBw,
  linkedin,
  'linkedin-bw': linkedinBw,
  pinterest,
  'pinterest-bw': pinterestBw,
  twitter,
  'twitter-bw': twitterBw,
  youtube,
  'youtube-bw': youtubeBw,
}

const getImagePathFromProps = ({
  name,
  showInColor,
}: Pick<Props, 'name' | 'showInColor'>) =>
  `${name.toLowerCase()}${showInColor ? '' : '-bw'}`

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

interface Props {
  showInColor: boolean
  url: string
  name: string
}

/**
 * Shows an image for an specific social network
 */
function SocialNetwork({ name, showInColor, url }: Props) {
  const intl = useIntl()
  const { handles, withModifiers } = useSocialNetworkHandles()

  const normalizedName = String(name).toLowerCase()
  const imagePath = getImagePathFromProps({ name: normalizedName, showInColor })

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

  const imageSrc = SOCIAL_NETWORK_ICONS[imagePath]

  return (
    <a
      href={formatIOMessage({ id: url, intl })}
      target="_blank"
      rel="noopener noreferrer"
      className={`${handles.socialNetworkLink} ${withModifiers(
        'socialNetworkLink',
        normalizedName
      )} c-muted-1 w2 h2 mh2 flex items-center`}
    >
      <img
        className={`${handles.socialNetworkImage} ${withModifiers(
          'socialNetworkImage',
          normalizedName
        )}`}
        src={imageSrc}
        alt={formatIOMessage({ id: name, intl })}
        title={formatIOMessage({ id: name, intl })}
      />
    </a>
  )
}

SocialNetwork.displayName = 'SocialNetwork'

export default SocialNetwork

```


[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/components/SocialNetworks/HandlesContext.tsx from the store-footer VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { createCssHandlesContext } from 'vtex.css-handles'

import { CSS_HANDLES } from './index'

const { CssHandlesProvider, useContextCssHandles } = createCssHandlesContext(
  CSS_HANDLES
)

export {
  CssHandlesProvider as SocialNetworkHandlesProvider,
  useContextCssHandles as useSocialNetworkHandles,
}

```


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

[Assistant]
Here's the implementation:

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

import { PaymentMethodsHandlesProvider } from './HandlesContext'
import type { PaymentMethod } from './PaymentMethodIcon'
import PaymentMethodIcon, {
  CSS_HANDLES as PaymentMethodIconHandles,
} from './PaymentMethodIcon'

export const CSS_HANDLES = [
  'acceptedPaymentMethodContainer',
  ...PaymentMethodIconHandles,
] as const

interface Props {
  /** list of accepeted payment methods */
  paymentMethods: PaymentMethod[]
  /** Define if payment method icons will be coloured */
  showInColor: boolean
  classes?: CssHandlesTypes.CustomClasses<typeof CSS_HANDLES>
}

function AcceptedPaymentMethods({
  paymentMethods = [],
  showInColor = false,
  classes,
}: Props) {
  const { handles, withModifiers } = useCssHandles(CSS_HANDLES, {
    classes,
  })

  return (
    <PaymentMethodsHandlesProvider
      handles={handles}
      withModifiers={withModifiers}
    >
      <div className={`${handles.acceptedPaymentMethodContainer} nh2 flex`}>
        {paymentMethods.map((paymentMethod) => (
          <PaymentMethodIcon
            key={paymentMethod}
            paymentMethod={paymentMethod}
            showInColor={showInColor}
          />
        ))}
      </div>
    </PaymentMethodsHandlesProvider>
  )
}

AcceptedPaymentMethods.schema = {
  title: 'admin/editor.footer.acceptedPaymentMethods.title',
  description: 'admin/editor.footer.acceptedPaymentMethods.description',
  type: 'object',
  properties: {
    showInColor: {
      default: false,
      isLayout: true,
      title: 'admin/editor.footer.showPaymentMethodsInColor.title',
      type: 'boolean',
    },
  },
}

export default AcceptedPaymentMethods

```


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

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import { useIntl } from 'react-intl'
import { formatIOMessage } from 'vtex.native-types'

import dinersClub from '../../images/diners club.svg'
import dinersClubBw from '../../images/diners club-bw.svg'
import mastercard from '../../images/mastercard.svg'
import mastercardBw from '../../images/mastercard-bw.svg'
import visa from '../../images/visa.svg'
import visaBw from '../../images/visa-bw.svg'
import { usePaymentMethodsHandles } from './HandlesContext'

export const CSS_HANDLES = [
  'paymentMethodIcon',
  'paymentMethodIconImage',
] as const

const PAYMENT_METHOD_ICONS = {
  'diners club': dinersClub,
  'diners club-bw': dinersClubBw,
  mastercard,
  'mastercard-bw': mastercardBw,
  visa,
  'visa-bw': visaBw,
}

export type PaymentMethod = 'diners club' | 'mastercard' | 'visa'

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

interface Props {
  imageSrc?: string
  /** If true, the original logo (with color) is used. If not, the grayscale's one */
  showInColor?: boolean
  /** Indicates which one of the payments method should the component show its image */
  paymentMethod: PaymentMethod
}

const getImagePathFromProps = ({
  paymentMethod,
  showInColor,
}: Pick<Props, 'paymentMethod' | 'showInColor'>) =>
  `${paymentMethod.toLowerCase()}${showInColor ? '' : '-bw'}`

/**
 * Shows an image for the payments forms accepted
 */
function PaymentMethodIcon({ paymentMethod, showInColor }: Props) {
  const intl = useIntl()

  const { handles } = usePaymentMethodsHandles()
  const imagePath = getImagePathFromProps({ paymentMethod, showInColor })

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

  const imageSrc = PAYMENT_METHOD_ICONS[imagePath]

  return (
    <div className={`${handles.paymentMethodIcon} w2 h2 mh2 flex items-center`}>
      <img
        className={`${handles.paymentMethodIconImage} w-100`}
        src={imageSrc}
        alt={formatIOMessage({ id: paymentMethod, intl })}
        title={formatIOMessage({ id: paymentMethod, intl })}
      />
    </div>
  )
}

export default PaymentMethodIcon

```


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

[Assistant]
Here's the implementation:

```tsx
import { createCssHandlesContext } from 'vtex.css-handles'

import { CSS_HANDLES } from './index'

const { CssHandlesProvider, useContextCssHandles } = createCssHandlesContext(
  CSS_HANDLES
)

export {
  CssHandlesProvider as PaymentMethodsHandlesProvider,
  useContextCssHandles as usePaymentMethodsHandles,
}

```


[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-maintenance/checkout-ui-custom/checkout6-custom.js from the store-maintenance VTEX app.

[Assistant]
Here's the implementation:

```javascript
(function() {
    if (location.pathname !== '/maintenance') {
      location.href = '/maintenance'
    }
  })()
```


[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-maintenance/checkout-ui-custom/checkout-confirmation-custom.js from the store-maintenance VTEX app.

[Assistant]
Here's the implementation:

```javascript
// WARNING: THE USAGE OF CUSTOM SCRIPTS IS NOT SUPPORTED. VTEX IS NOT LIABLE FOR ANY DAMAGES THIS MAY CAUSE.
// THIS MAY BREAK YOUR STORE AND STOP SALES. IN CASE OF ERRORS, PLEASE DELETE THE CONTENT OF THIS SCRIPT.

```


[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-maintenance/checkout-ui-custom/checkout5-custom.js from the store-maintenance VTEX app.

[Assistant]
Here's the implementation:

```javascript
// WARNING: THE USAGE OF CUSTOM SCRIPTS IS NOT SUPPORTED. VTEX IS NOT LIABLE FOR ANY DAMAGES THIS MAY CAUSE. THIS MAY BREAK YOUR STORE AND STOP SALES. IN CASE OF ERRORS, PLEASE DELETE THE CONTENT OF THIS SCRIPT.
(function() {
    if (location.pathname !== '/maintenance') {
      location.href = '/maintenance'
    }
  })()
```


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

[Assistant]
Here's the implementation:

```markdown
## 🚨 Disclaimer - Template Application
>:warning: **This project is not maintained by VTEX, and this app is provided as a working example on how this feature can be implemented. Improvements and fixes will be on the implementation team side.**
>
>All template applications provided are developed by the VTEX community, you can use them freely.

# VTEX Store Maintenance
## Description

VTEX Store Maintenance is a small app that puts your side into a maintenance mode when installed.
As soon as it is active, any route will redirect to /maintenance
Uninstall to put the store back live.

:loudspeaker: **Disclaimer:** Don't fork this project; use, contribute, or open issue with your feature request.

## Table of Contents

- [Usage](#usage)
- [CSS Handles](#css-handles)

## Usage

Just install the app in order to put your page into a maintenance mode.

```bash
  vtex install vtex.store-maintenance
```
The app then will redirect any user browsing the page to /maintenance.
If you have no content at /maintenance, this app will make sure to render at least a minimal message.
It's up to you to design the /maintenance page the way you like to have it.

We do offer a theme that takes care of the basics. You can clone it from [here](https://github.com/vtex-apps/store-maintenance-theme) and install it alongside your native store theme. This is not mandatory to do, but offers a basic layout that you can start working on.

```


[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-maintenance/node/service.json from the store-maintenance VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "memory": 768,
  "cpu": 50,
  "ttl": 10,
  "timeout": 20,
  "minReplicas": 4,
  "maxReplicas": 50,
  "workers": 1,
  "routes": {
    "proxy": {
      "path": "/path*",
      "public": true,
      "smartcache": true
    }
  }
}

```


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

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

[Assistant]
Here's the implementation:

```json
{
  "dependencies": {
    "co-body": "^6.0.0",
    "ramda": "^0.25.0"
  },
  "devDependencies": {
    "@types/co-body": "^0.0.3",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.0.0",
    "@types/ramda": "types/npm-ramda#dist",
    "@vtex/api": "6.45.6",
    "@vtex/test-tools": "^1.0.0",
    "@vtex/tsconfig": "^0.5.6",
    "typescript": "3.9.7"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty"
  },
  "version": "1.0.0"
}

```


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

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

[Assistant]
Here's the implementation:

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

import { proxy } from './middlewares/proxy'

// Export a service that defines route handlers and client options.
export default new Service({
  routes: {
    proxy: method({
      GET: [proxy],
    })
  },
})

```


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

[User] Show me the implementation of store-maintenance/node/middlewares/proxy.ts from the store-maintenance VTEX app.

[Assistant]
Here's the implementation:

```typescript
export async function proxy(ctx: any, next: () => Promise<any>) {
  let isMaintenance = ctx.originalUrl === '/maintenance'

  console.log('## ctx.originalUrl', ctx.originalUrl)
  console.log('## isMaintenance', isMaintenance)

  if (!isMaintenance) {
    ctx.status = 302
    ctx.redirect('/maintenance')
  }
  else {
    ctx.body = 'The site is under maintenance'
  }
  await next()
}

```


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

[User] Show me the implementation of google-search-console/docs/README.md from the google-search-console VTEX app.

[Assistant]
Here's the implementation:

```markdown
# Search Console

VTEX Search Console first-party app

## How to install

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

Now, open the app settings on your admin and fill in your Search Console's Content.

```


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

[User] Show me the implementation of google-search-console/public/metadata/messages/es-AR.json from the google-search-console VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "name": "Google Search Console",
      "headline": "Conecte su tienda VTEX al servicio de optimización de indexación de Google.",
    "overview": "Search Console es un servicio gratuito de Google para verificar el estado de indexación de su tienda en los motores de búsqueda y optimizar la visibilidad de su ecommerce.\\n\\n Esta aplicación implementa la configuración de Google Search Console en su tienda usando el admin de VTEX. Usted deberá ingresar su ID de Search Console en la página de configuración de la aplicación.",
    "features": [
      "Configura Google Search Console con el admin de VTEX"
    ],
      "additionalInformation": "La gestión de la optimización de la indexación se realiza directamente a través de la plataforma Google Search Console (https://search.google.com/search-console/) después de instalar y configurar la aplicación.",
    "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 google-search-console/public/metadata/messages/pt-BR.json from the google-search-console VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "name": "Google Search Console",
      "headline": "Conecte a sua loja VTEX ao serviço de otimização de indexação do Google.",
    "overview": "O Search Console é um serviço gratuito do Google para verificar o status de indexação da sua loja nos mecanismos de busca e otimizar a visibilidade do seu ecommerce.\\n\\n Este app implementa a configuração do Google Search Console na sua loja utilizando o admin da VTEX. Você precisará inserir o ID do Search Console na página de configuração do aplicativo.",
    "features": [
      "Configure o Google Search Console pelo admin da VTEX"
    ],
      "additionalInformation": "A gestão da otimização de indexação é feita diretamente pela platafoma do Google Search Console (https://search.google.com/search-console/) após a instalação e configuração do app.",
    "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 google-search-console/public/metadata/messages/en-US.json from the google-search-console VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "name": "Google Search Console",
      "headline": "Connect your VTEX store to Google's indexing optimization service.",
    "overview": "Search Console is a free service from Google to check your store's indexing status on search engines and optimize the visibility of your ecommerce.\\n\\n This app implements the Google Search Console configuration in your store using the admin of VTEX. You’ll need to enter your Search Console ID on the app’s configuration page.",
    "features": [
      "Configure Google Search Console using the VTEX admin"
    ],
      "additionalInformation": "The management of indexing optimization is done directly through the Google Search Console platform (https://search.google.com/search-console/) after installing and configuring the app.",
    "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 country-flags/docs/README.md from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```markdown
# VTEX Country Flags

A React component that renders country flags as SVG icons.

## API

### CountryFlag

This component receives the country code and renders that respective country's flag.

#### Props

| Prop name | Type | Description |
| --- | --- | --- |
| `iso3` | `string` | The country code in ISO-3 format (e.g. `BRA`). Default: `undefined` |
| `iso2` | `string` | The country code in ISO-2 format (e.g. `BR`). Default: `undefined` |

> Notice that you only need to pass either `iso3` or `iso2` prop, not both.

Example usage:

```tsx
import { CountryFlag } from 'vtex.country-flags'

const Component = () => {
  return (
    // renders Brazil flag
    <CountryFlag iso3="BRA" />
  )
}
```

```


[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 country-flags/react/CountryFlag.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'
import getCountryISO3 from 'country-iso-2-to-3'

import DefaultFlag from './icons/default'
import { loadFlag, CountryCode } from './flagMap'

type Props = { iso2: string } | { iso3: string }

const CountryFlag: React.FC<Props> = props => {
  const countryCode = ('iso2' in props
    ? getCountryISO3(props.iso2)
    : props.iso3) as CountryCode

  const flag = loadFlag(countryCode) ?? <DefaultFlag />

  return flag
}

export default CountryFlag

```


[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 country-flags/react/flagMap.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { Suspense } from 'react'

/**
 * Mapping of country's ISO-3 code to the flag component
 */
const flagMap = {
  AFG: React.lazy(() => import('./icons/AFG')),
  AGO: React.lazy(() => import('./icons/AGO')),
  ALB: React.lazy(() => import('./icons/ALB')),
  AND: React.lazy(() => import('./icons/AND')),
  ARE: React.lazy(() => import('./icons/ARE')),
  ARG: React.lazy(() => import('./icons/ARG')),
  ARM: React.lazy(() => import('./icons/ARM')),
  ATG: React.lazy(() => import('./icons/ATG')),
  AUS: React.lazy(() => import('./icons/AUS')),
  AUT: React.lazy(() => import('./icons/AUT')),
  AZE: React.lazy(() => import('./icons/AZE')),
  BDI: React.lazy(() => import('./icons/BDI')),
  BEL: React.lazy(() => import('./icons/BEL')),
  BEN: React.lazy(() => import('./icons/BEN')),
  BFA: React.lazy(() => import('./icons/BFA')),
  BGD: React.lazy(() => import('./icons/BGD')),
  BGR: React.lazy(() => import('./icons/BGR')),
  BHR: React.lazy(() => import('./icons/BHR')),
  BHS: React.lazy(() => import('./icons/BHS')),
  BIH: React.lazy(() => import('./icons/BIH')),
  BLR: React.lazy(() => import('./icons/BLR')),
  BLZ: React.lazy(() => import('./icons/BLZ')),
  BOL: React.lazy(() => import('./icons/BOL')),
  BRA: React.lazy(() => import('./icons/BRA')),
  BRB: React.lazy(() => import('./icons/BRB')),
  BRN: React.lazy(() => import('./icons/BRN')),
  BUR: React.lazy(() => import('./icons/BUR')),
  BWA: React.lazy(() => import('./icons/BWA')),
  CAF: React.lazy(() => import('./icons/CAF')),
  CAN: React.lazy(() => import('./icons/CAN')),
  CHE: React.lazy(() => import('./icons/CHE')),
  CHL: React.lazy(() => import('./icons/CHL')),
  CHN: React.lazy(() => import('./icons/CHN')),
  CIV: React.lazy(() => import('./icons/CIV')),
  CMR: React.lazy(() => import('./icons/CMR')),
  COD: React.lazy(() => import('./icons/COD')),
  COG: React.lazy(() => import('./icons/COG')),
  COL: React.lazy(() => import('./icons/COL')),
  COM: React.lazy(() => import('./icons/COM')),
  CPV: React.lazy(() => import('./icons/CPV')),
  CRI: React.lazy(() => import('./icons/CRI')),
  CUB: React.lazy(() => import('./icons/CUB')),
  CYP: React.lazy(() => import('./icons/CYP')),
  CZE: React.lazy(() => import('./icons/CZE')),
  DEU: React.lazy(() => import('./icons/DEU')),
  DJI: React.lazy(() => import('./icons/DJI')),
  DMA: React.lazy(() => import('./icons/DMA')),
  DNK: React.lazy(() => import('./icons/DNK')),
  DOM: React.lazy(() => import('./icons/DOM')),
  DZA: React.lazy(() => import('./icons/DZA')),
  ECU: React.lazy(() => import('./icons/ECU')),
  EGY: React.lazy(() => import('./icons/EGY')),
  ENG: React.lazy(() => import('./icons/ENG')),
  ERI: React.lazy(() => import('./icons/ERI')),
  ESP: React.lazy(() => import('./icons/ESP')),
  EST: React.lazy(() => import('./icons/EST')),
  ETH: React.lazy(() => import('./icons/ETH')),
  EUE: React.lazy(() => import('./icons/EUE')),
  FIN: React.lazy(() => import('./icons/FIN')),
  FJI: React.lazy(() => import('./icons/FJI')),
  FLK: React.lazy(() => import('./icons/FLK')),
  FRA: React.lazy(() => import('./icons/FRA')),
  FRO: React.lazy(() => import('./icons/FRO')),
  FSM: React.lazy(() => import('./icons/FSM')),
  GAB: React.lazy(() => import('./icons/GAB')),
  GBR: React.lazy(() => import('./icons/GBR')),
  GEO: React.lazy(() => import('./icons/GEO')),
  GGY: React.lazy(() => import('./icons/GGY')),
  GHA: React.lazy(() => import('./icons/GHA')),
  GIB: React.lazy(() => import('./icons/GIB')),
  GIN: React.lazy(() => import('./icons/GIN')),
  GMB: React.lazy(() => import('./icons/GMB')),
  GNB: React.lazy(() => import('./icons/GNB')),
  GNQ: React.lazy(() => import('./icons/GNQ')),
  GRC: React.lazy(() => import('./icons/GRC')),
  GRD: React.lazy(() => import('./icons/GRD')),
  GTM: React.lazy(() => import('./icons/GTM')),
  GUF: React.lazy(() => import('./icons/GUF')),
  GUY: React.lazy(() => import('./icons/GUY')),
  HND: React.lazy(() => import('./icons/HND')),
  HRV: React.lazy(() => import('./icons/HRV')),
  HTI: React.lazy(() => import('./icons/HTI')),
  HUN: React.lazy(() => import('./icons/HUN')),
  IDN: React.lazy(() => import('./icons/IDN')),
  IMN: React.lazy(() => import('./icons/IMN')),
  IND: React.lazy(() => import('./icons/IND')),
  IRL: React.lazy(() => import('./icons/IRL')),
  IRN: React.lazy(() => import('./icons/IRN')),
  IRQ: React.lazy(() => import('./icons/IRQ')),
  ISL: React.lazy(() => import('./icons/ISL')),
  ISR: React.lazy(() => import('./icons/ISR')),
  ITA: React.lazy(() => import('./icons/ITA')),
  JAM: React.lazy(() => import('./icons/JAM')),
  JEY: React.lazy(() => import('./icons/JEY')),
  JOR: React.lazy(() => import('./icons/JOR')),
  JPN: React.lazy(() => import('./icons/JPN')),
  KAZ: React.lazy(() => import('./icons/KAZ')),
  KEN: React.lazy(() => import('./icons/KEN')),
  KGZ: React.lazy(() => import('./icons/KGZ')),
  KHM: React.lazy(() => import('./icons/KHM')),
  KIR: React.lazy(() => import('./icons/KIR')),
  KNA: React.lazy(() => import('./icons/KNA')),
  KOR: React.lazy(() => import('./icons/KOR')),
  KWT: React.lazy(() => import('./icons/KWT')),
  LAO: React.lazy(() => import('./icons/LAO')),
  LBN: React.lazy(() => import('./icons/LBN')),
  LBR: React.lazy(() => import('./icons/LBR')),
  LBY: React.lazy(() => import('./icons/LBY')),
  LCA: React.lazy(() => import('./icons/LCA')),
  LIE: React.lazy(() => import('./icons/LIE')),
  LKA: React.lazy(() => import('./icons/LKA')),
  LSO: React.lazy(() => import('./icons/LSO')),
  LTU: React.lazy(() => import('./icons/LTU')),
  LUX: React.lazy(() => import('./icons/LUX')),
  LVA: React.lazy(() => import('./icons/LVA')),
  MAR: React.lazy(() => import('./icons/MAR')),
  MCO: React.lazy(() => import('./icons/MCO')),
  MDA: React.lazy(() => import('./icons/MDA')),
  MDG: React.lazy(() => import('./icons/MDG')),
  MDV: React.lazy(() => import('./icons/MDV')),
  MEX: React.lazy(() => import('./icons/MEX')),
  MHL: React.lazy(() => import('./icons/MHL')),
  MKD: React.lazy(() => import('./icons/MKD')),
  MLI: React.lazy(() => import('./icons/MLI')),
  MLT: React.lazy(() => import('./icons/MLT')),
  MNE: React.lazy(() => import('./icons/MNE')),
  MNG: React.lazy(() => import('./icons/MNG')),
  MOZ: React.lazy(() => import('./icons/MOZ')),
  MRT: React.lazy(() => import('./icons/MRT')),
  MUS: React.lazy(() => import('./icons/MUS')),
  MWI: React.lazy(() => import('./icons/MWI')),
  MYS: React.lazy(() => import('./icons/MYS')),
  NAM: React.lazy(() => import('./icons/NAM')),
  NER: React.lazy(() => import('./icons/NER')),
  NGA: React.lazy(() => import('./icons/NGA')),
  NIC: React.lazy(() => import('./icons/NIC')),
  NLD: React.lazy(() => import('./icons/NLD')),
  NOR: React.lazy(() => import('./icons/NOR')),
  NPL: React.lazy(() => import('./icons/NPL')),
  NRU: React.lazy(() => import('./icons/NRU')),
  NZL: React.lazy(() => import('./icons/NZL')),
  OMN: React.lazy(() => import('./icons/OMN')),
  PAK: React.lazy(() => import('./icons/PAK')),
  PAN: React.lazy(() => import('./icons/PAN')),
  PER: React.lazy(() => import('./icons/PER')),
  PHL: React.lazy(() => import('./icons/PHL')),
  PLW: React.lazy(() => import('./icons/PLW')),
  PNG: React.lazy(() => import('./icons/PNG')),
  POL: React.lazy(() => import('./icons/POL')),
  PRI: React.lazy(() => import('./icons/PRI')),
  PRK: React.lazy(() => import('./icons/PRK')),
  PRT: React.lazy(() => import('./icons/PRT')),
  PRY: React.lazy(() => import('./icons/PRY')),
  PSE: React.lazy(() => import('./icons/PSE')),
  QAT: React.lazy(() => import('./icons/QAT')),
  ROU: React.lazy(() => import('./icons/ROU')),
  RUS: React.lazy(() => import('./icons/RUS')),
  RWA: React.lazy(() => import('./icons/RWA')),
  SAU: React.lazy(() => import('./icons/SAU')),
  SDN: React.lazy(() => import('./icons/SDN')),
  SEN: React.lazy(() => import('./icons/SEN')),
  SGP: React.lazy(() => import('./icons/SGP')),
  SGS: React.lazy(() => import('./icons/SGS')),
  SLB: React.lazy(() => import('./icons/SLB')),
  SLE: React.lazy(() => import('./icons/SLE')),
  SLV: React.lazy(() => import('./icons/SLV')),
  SMR: React.lazy(() => import('./icons/SMR')),
  SOM: React.lazy(() => import('./icons/SOM')),
  SRB: React.lazy(() => import('./icons/SRB')),
  SSD: React.lazy(() => import('./icons/SSD')),
  STP: React.lazy(() => import('./icons/STP')),
  SUR: React.lazy(() => import('./icons/SUR')),
  SVK: React.lazy(() => import('./icons/SVK')),
  SVN: React.lazy(() => import('./icons/SVN')),
  SWE: React.lazy(() => import('./icons/SWE')),
  SWZ: React.lazy(() => import('./icons/SWZ')),
  SYC: React.lazy(() => import('./icons/SYC')),
  SYR: React.lazy(() => import('./icons/SYR')),
  TCD: React.lazy(() => import('./icons/TCD')),
  TGO: React.lazy(() => import('./icons/TGO')),
  THA: React.lazy(() => import('./icons/THA')),
  TJK: React.lazy(() => import('./icons/TJK')),
  TKM: React.lazy(() => import('./icons/TKM')),
  TLS: React.lazy(() => import('./icons/TLS')),
  TON: React.lazy(() => import('./icons/TON')),
  TTO: React.lazy(() => import('./icons/TTO')),
  TUN: React.lazy(() => import('./icons/TUN')),
  TUR: React.lazy(() => import('./icons/TUR')),
  TUV: React.lazy(() => import('./icons/TUV')),
  TWN: React.lazy(() => import('./icons/TWN')),
  TZA: React.lazy(() => import('./icons/TZA')),
  UGA: React.lazy(() => import('./icons/UGA')),
  UKR: React.lazy(() => import('./icons/UKR')),
  URY: React.lazy(() => import('./icons/URY')),
  USA: React.lazy(() => import('./icons/USA')),
  UZB: React.lazy(() => import('./icons/UZB')),
  VCT: React.lazy(() => import('./icons/VCT')),
  VEN: React.lazy(() => import('./icons/VEN')),
  VGB: React.lazy(() => import('./icons/VGB')),
  VIR: React.lazy(() => import('./icons/VIR')),
  VNM: React.lazy(() => import('./icons/VNM')),
  VUT: React.lazy(() => import('./icons/VUT')),
  WSM: React.lazy(() => import('./icons/WSM')),
  XKX: React.lazy(() => import('./icons/XKX')),
  YEM: React.lazy(() => import('./icons/YEM')),
  ZAF: React.lazy(() => import('./icons/ZAF')),
  ZMB: React.lazy(() => import('./icons/ZMB')),
  ZWE: React.lazy(() => import('./icons/ZWE')),
}

export type CountryCode = keyof typeof flagMap

export function loadFlag(countryCode?: CountryCode): React.ReactElement | null {
  if (!countryCode || !flagMap[countryCode]) {
    return null
  }

  const Flag = flagMap[countryCode]

  if (!Flag) {
    return null
  }

  if (typeof window === 'undefined') {
    return <div style={{ height: 24, width: 24 }} />
  }

  return (
    <Suspense fallback={<div style={{ height: 24, width: 24 }} />}>
      <Flag />
    </Suspense>
  )
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "vtex.country-flags",
  "version": "0.1.1",
  "private": true,
  "license": "UNLICENSED",
  "dependencies": {
    "country-iso-2-to-3": "^1.1.0",
    "react": "^16.13.1"
  },
  "devDependencies": {
    "@types/node": "^14.0.4",
    "@types/react": "^16.9.35",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.102.1/public/@types/vtex.render-runtime"
  }
}

```


[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 country-flags/react/typings/country-iso-2-to-3.d.ts from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'country-iso-2-to-3' {
  const getCountryISO3: (countryCode: string) => string | undefined

  export default getCountryISO3
}

```


[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 country-flags/react/icons/SOM.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const SOM: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#4E80BB"
    />
    <path
      d="M16.1805 10.5205H13.235L12 7.84149L10.7635 10.5205H7.81897L9.97047 12.747L9.17547 15.9735L12 14.3695L14.824 15.9735L14.029 12.747L16.1805 10.5205Z"
      fill="white"
    />
  </svg>
)

export default SOM

```


[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 country-flags/react/icons/SLV.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const SLV: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#1147A7"
    />
    <path d="M24 9H0V15H24V9Z" fill="#E6E6E6" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V15H24V20Z"
      fill="#1147A7"
    />
    <path
      d="M12 10C10.8955 10 10 10.8955 10 12C10 13.1045 10.8955 14 12 14C13.1045 14 14 13.1045 14 12C14 10.8955 13.1045 10 12 10ZM12 13C11.4475 13 11 12.5525 11 12C11 11.4475 11.4475 11 12 11C12.5525 11 13 11.4475 13 12C13 12.5525 12.5525 13 12 13Z"
      fill="#304639"
    />
  </svg>
)

export default SLV

```


[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 country-flags/react/icons/SMR.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const SMR: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 12H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V12Z"
      fill="#E6E6E6"
    />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V12H24V20Z"
      fill="#0082D0"
    />
    <path
      d="M14 10H13V9H14V8H10V9H11V10H10C9.4475 10 9 10.448 9 11V14L12 16L15 14V11C15 10.448 14.5525 10 14 10Z"
      fill="#F5E303"
    />
    <path d="M8 10H7V14H8V10Z" fill="#006600" />
    <path d="M17 10H16V14H17V10Z" fill="#006600" />
  </svg>
)

export default SMR

```


[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 country-flags/react/icons/STP.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const STP: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path d="M24 8H6L1 3H23C23.5525 3 24 3.4475 24 4V8Z" fill="#17AC4E" />
    <path d="M24 16H6L10 12L6 8H24V16Z" fill="#FFDB0C" />
    <path d="M24 20C24 20.5525 23.5525 21 23 21H1L6 16H24V20Z" fill="#17AC4E" />
    <path
      d="M1 3C0.448 3 0 3.4475 0 4V12V20C0 20.5525 0.448 21 1 21L10 12L1 3Z"
      fill="#D91E2F"
    />
    <path
      d="M15.1845 11.2715H13.7105L13.0925 9.9295L12.474 11.2715H11L12.0765 12.385L11.6785 14L13.092 13.1975L14.506 14L14.108 12.385L15.1845 11.2715Z"
      fill="#424041"
    />
    <path
      d="M21.1845 11.2715H19.7105L19.0925 9.9295L18.474 11.2715H17L18.0765 12.385L17.6785 14L19.092 13.1975L20.506 14L20.108 12.385L21.1845 11.2715Z"
      fill="#424041"
    />
  </svg>
)

export default STP

```


[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 country-flags/react/icons/MRT.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const MRT: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#0D8643"
    />
    <path
      d="M15.7865 8.76852C15.9135 9.15902 16 9.56752 16 10C16 12.209 14.209 14 12 14C9.791 14 8 12.209 8 10C8 9.56752 8.0865 9.15902 8.2135 8.76852C7.4675 9.64252 7 10.7615 7 12C7 14.7615 9.239 17 12 17C14.761 17 17 14.7615 17 12C17 10.7615 16.5325 9.64252 15.7865 8.76852Z"
      fill="#FFCE19"
    />
    <path
      d="M14.0925 8.2715H12.6185L12 6.9295L11.3815 8.2715H9.90796L10.9845 9.385L10.5865 11L12 10.1975L13.4135 11L13.0155 9.385L14.0925 8.2715Z"
      fill="#FFCE19"
    />
  </svg>
)

export default MRT

```


[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 country-flags/react/icons/VGB.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const VGB: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <g clipPath="url(#clip0)">
      <path
        d="M23 3H1C0.734784 3 0.48043 3.10536 0.292893 3.29289C0.105357 3.48043 0 3.73478 0 4L0 20C0 20.2652 0.105357 20.5196 0.292893 20.7071C0.48043 20.8946 0.734784 21 1 21H23C23.2652 21 23.5196 20.8946 23.7071 20.7071C23.8946 20.5196 24 20.2652 24 20V4C24 3.73478 23.8946 3.48043 23.7071 3.29289C23.5196 3.10536 23.2652 3 23 3Z"
        fill="#092478"
      />
      <path
        d="M21 15.5C21 16.5 18 18 18 18C18 18 15 16.5 15 15.5V11H21V15.5Z"
        fill="#275E2C"
      />
      <path d="M9.5 9.5H8V9.625L11.1665 12H12V11.375L9.5 9.5Z" fill="#FF0000" />
      <path
        d="M0.0600586 3.67L2.50006 5.5H4.00006V5.375L0.853058 3.015C0.673773 3.04164 0.505163 3.11673 0.365415 3.23216C0.225668 3.34759 0.120086 3.49898 0.0600586 3.67Z"
        fill="#FF0000"
      />
      <path d="M12 3H11.167L8 5.375V5.5H9.5005L12 3.625V3Z" fill="#FF0000" />
      <path d="M0 11.375V12H0.8335L4 9.625V9.5H2.5L0 11.375Z" fill="#FF0000" />
      <path d="M12 6.5H7V3H5V6.5H0V8.5H5V12H7V8.5H12V6.5Z" fill="#FF0000" />
    </g>
    <defs>
      <clipPath id="clip0">
        <path d="M0 0H24V24H0V0Z" fill="white" />
      </clipPath>
    </defs>
  </svg>
)

export default VGB

```


[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 country-flags/react/icons/DZA.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const DZA: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M12 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H12V21Z"
      fill="#0C7439"
    />
    <path d="M24 3H12V21H24V3Z" fill="#E6E6E6" />
    <path
      d="M15.5996 11.3325L14.9856 10L14.3706 11.3325H12.9706L13.9941 12.391L13.6026 13.9795L14.9856 13.194L16.3686 13.9795L15.9771 12.391L17.0001 11.3325H15.5996Z"
      fill="#BD283B"
    />
    <path
      d="M14 16C11.791 16 10 14.209 10 12C10 9.791 11.791 8 14 8C14.432 8 14.841 8.086 15.2305 8.213C14.3575 7.4675 13.2385 7 12 7C9.239 7 7 9.239 7 12C7 14.761 9.239 17 12 17C13.2385 17 14.3575 16.5325 15.231 15.787C14.841 15.9135 14.432 16 14 16Z"
      fill="#BD283B"
    />
  </svg>
)

export default DZA

```


[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 country-flags/react/icons/AGO.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const AGO: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V12H24V20Z"
      fill="#3C3C3C"
    />
    <path
      d="M24 12H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V12Z"
      fill="#D21E29"
    />
    <path
      d="M17.9999 18.1785L13.5674 14.05C13.8159 13.849 14.0544 13.629 14.2704 13.379C15.2304 12.2665 15.7004 10.848 15.5934 9.38302C15.4864 7.91702 14.8149 6.58202 13.7029 5.62152L13.0494 6.37952C13.9589 7.16452 14.5084 8.25752 14.5964 9.45552C14.6839 10.6545 14.2994 11.816 13.5139 12.725C13.3054 12.966 13.0754 13.178 12.8309 13.3645L9.21893 10L8.53743 10.7315L11.9234 13.885C10.3829 14.5635 8.52443 14.3615 7.16693 13.1895L6.51343 13.9475C7.55093 14.843 8.83043 15.2815 10.1044 15.2815C11.0074 15.2815 11.9044 15.055 12.7129 14.6205L17.3189 18.9105L17.9999 18.1785Z"
      fill="#FFFF00"
    />
    <path
      d="M12.128 6.324H10.674L10.064 5L9.453 6.324H8L9.062 7.4205L8.669 9.015L10.064 8.223L11.459 9.015L11.066 7.4205L12.128 6.324Z"
      fill="#FFFF00"
    />
  </svg>
)

export default AGO

```


[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 country-flags/react/icons/GIB.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const GIB: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V16H24V20Z"
      fill="#DB000B"
    />
    <path
      d="M24 16H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V16Z"
      fill="#E6E6E6"
    />
    <path
      d="M17 9H18V8H14V9H15V12H13V7H14V6H10V7H11V12H9V9H10V8H6V9H7V12V14H6V15H18V14H17V12V9Z"
      fill="#FF0000"
    />
    <path d="M13 13H11V15H13V13Z" fill="#1E1E1E" />
    <path d="M13 16H11V19H13V16Z" fill="#F6D800" />
  </svg>
)

export default GIB

```


[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 country-flags/react/icons/LBN.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const LBN: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V16H24V20Z"
      fill="#EA212D"
    />
    <path d="M24 8H0V16H24V8Z" fill="#E6E6E6" />
    <path
      d="M24 8H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V8Z"
      fill="#EA212D"
    />
    <path d="M12 9L9 13H11V15H13V13H15L12 9Z" fill="#17A554" />
  </svg>
)

export default LBN

```


[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 country-flags/react/icons/LBY.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const LBY: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 7H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V7Z"
      fill="#E52635"
    />
    <path d="M24 7H0V17H24V7Z" fill="#41423D" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V17H24V20Z"
      fill="#0EA651"
    />
    <path
      d="M13 15C11.3435 15 10 13.6565 10 12C10 10.344 11.3435 9 13 9C13.26 9 13.508 9.043 13.7485 9.1055C13.0315 8.425 12.0675 8 11 8C8.791 8 7 9.791 7 12C7 14.209 8.791 16 11 16C12.0675 16 13.0315 15.575 13.7485 14.8945C13.508 14.957 13.26 15 13 15Z"
      fill="white"
    />
    <path
      d="M17 11.2715H15.526L14.908 9.9295L14.2895 11.2715H12.816L13.8925 12.385L13.494 14L14.9075 13.1975L16.3215 14L15.9235 12.385L17 11.2715Z"
      fill="white"
    />
  </svg>
)

export default LBY

```


[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 country-flags/react/icons/IRQ.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const IRQ: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V15H24V20Z"
      fill="black"
    />
    <path d="M24 9H0V15H24V9Z" fill="#E6E6E6" />
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#CC162C"
    />
    <path d="M7 11H6V14H7V11Z" fill="#22B573" />
    <path d="M7 11H4V12H7V11Z" fill="#22B573" />
    <path d="M8 13H4V14H8V13Z" fill="#22B573" />
    <path d="M6 10H5V12H6V10Z" fill="#22B573" />
    <path d="M10 13V10H9V13V14H10H11V13H10Z" fill="#22B573" />
    <path d="M4 11H3V12H4V11Z" fill="#22B573" />
    <path
      d="M19 10H18V13H17V10H16V13H15V11H14V13H13V14H14H15H16H17H18H19H20V13H19V10Z"
      fill="#22B573"
    />
    <path d="M21 11H20V12H21V11Z" fill="#22B573" />
  </svg>
)

export default IRQ

```


[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 country-flags/react/icons/LTU.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const LTU: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#FCB913"
    />
    <path d="M24 9H0V15H24V9Z" fill="#006A44" />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V15H24V20Z"
      fill="#C2272D"
    />
  </svg>
)

export default LTU

```


[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 country-flags/react/icons/BWA.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const BWA: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#76A8DB"
    />
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V14H24V20Z"
      fill="#76A8DB"
    />
    <path d="M24 9H0V15H24V9Z" fill="#42413C" />
    <path d="M24 9H0V10H24V9Z" fill="white" />
    <path d="M24 14H0V15H24V14Z" fill="white" />
  </svg>
)

export default BWA

```


[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 country-flags/react/icons/XKX.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const XKX: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V20Z"
      fill="#0142A6"
    />
    <path
      d="M13.064 7.61251H12.3145L12 6.9295L11.685 7.612H10.936L11.4835 8.17801L11.281 9.00001L12 8.59201L12.719 9.00001L12.5165 8.17801L13.064 7.61251Z"
      fill="white"
    />
    <path
      d="M16.5775 7.61249H15.828L15.5135 6.92999L15.1985 7.61249H14.4495L14.997 8.17849L14.7945 8.99999L15.514 8.59199L16.233 8.99999L16.0305 8.17799L16.5775 7.61249Z"
      fill="white"
    />
    <path
      d="M20.128 7.61249H19.3785L19.064 6.92999L18.749 7.61249H18L18.5475 8.17849L18.3445 8.99999L19.064 8.59199L19.783 8.99999L19.5805 8.17799L20.128 7.61249Z"
      fill="white"
    />
    <path
      d="M9.55048 7.61249H8.80098L8.48648 6.92999L8.17148 7.61249H7.42249L7.96998 8.17849L7.76699 8.99999L8.48598 8.59199L9.20548 8.99999L9.00298 8.17799L9.55048 7.61249Z"
      fill="white"
    />
    <path
      d="M6.128 7.61249H5.3785L5.064 6.92999L4.749 7.61249H4L4.5475 8.17849L4.3445 8.99999L5.064 8.59199L5.783 8.99999L5.5805 8.17799L6.128 7.61249Z"
      fill="white"
    />
    <path
      d="M12 17C13.6569 17 15 15.6569 15 14C15 12.3431 13.6569 11 12 11C10.3431 11 9 12.3431 9 14C9 15.6569 10.3431 17 12 17Z"
      fill="#F5CB07"
    />
  </svg>
)

export default XKX

```


[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 country-flags/react/icons/SVN.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const SVN: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20V15H24V20Z"
      fill="#FE0C00"
    />
    <path d="M24 9H0V15H24V9Z" fill="#002EE6" />
    <path
      d="M24 9H0V4C0 3.4475 0.4475 3 1 3H23C23.5525 3 24 3.4475 24 4V9Z"
      fill="#E6E6E6"
    />
    <path d="M9 7H3V12L6 14L9 12V7Z" fill="#002EE6" />
    <path d="M8 9C8 9 6.5 9 6 9C5.5 9 4 9 4 9V11H8V9Z" fill="white" />
  </svg>
)

export default SVN

```


[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 country-flags/react/icons/MHL.tsx from the country-flags VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React from 'react'

const MHL: React.FC = () => (
  <svg
    width="24"
    height="24"
    viewBox="0 0 24 24"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
  >
    <path
      d="M24 20C24 20.5525 23.5525 21 23 21H1C0.4475 21 0 20.5525 0 20L24 15V20Z"
      fill="#013893"
    />
    <path d="M0 20L24 15V9L0 20Z" fill="#E6E6E6" />
    <path d="M0 20L21 3H1C0.4475 3 0 3.4475 0 4V20Z" fill="#013893" />
    <path d="M24 4C24 3.4475 23.5525 3 23 3H21L0 20L24 9V4Z" fill="#DD7506" />
    <path
      d="M6.61947 6.65048L6.09947 7.74498L7.99097 8.15048L6.09947 8.55648L6.61947 9.65048L5.52547 9.13098L5.11947 11.0215L4.71397 9.13098L3.61947 9.65048L4.13947 8.55648L1.99097 8.15048L4.13947 7.74498L3.61947 6.65048L4.71397 7.17098L5.11947 5.02148L5.52547 7.17098L6.61947 6.65048Z"
      fill="white"
    />
  </svg>
)

export default MHL

```