[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 mega-menu/react/graphql/mutations/delete.graphql from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation delete($id: String, $idSecond: String, $idThird: String) {
  deleteMenu(id: $id, idSecond: $idSecond, idThird: $idThird) {
    id
    name
    icon
    slug
    styles
    display
    enableSty
    order
    slugRoot
    slugRelative
    mobile
    menu {
      id
      name
      icon
      slug
      styles
      display
      enableSty
      order
      slugRoot
      slugRelative
      mobile
      menu {
        id
        name
        icon
        slug
        styles
        display
        enableSty
        order
        slugRoot
        slugRelative
        mobile
      }
    }
  }
}

```


[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 mega-menu/react/graphql/queries/getMenus.graphql from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getMenus($isMobile: Boolean) {
  menus(isMobile: $isMobile) {
    id
    name
    icon
    slug
    styles
    display
    enableSty
    order
    slugRoot
    slugRelative
    menu {
      id
      name
      icon
      slug
      styles
      display
      enableSty
      order
      slugRoot
      slugRelative
      mobile
      desktop
      menu {
        id
        name
        icon
        slug
        styles
        display
        enableSty
        order
        slugRoot
        slugRelative
        mobile
        desktop
      }
    }
    mobile
    desktop
  }
}

```


[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 mega-menu/react/graphql/queries/getMenu.graphql from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getMenu($id: ID!) {
  menu(id: $id) {
    id
    name
    icon
    slug
    styles
    display
    enableSty
    order
    mobile
    desktop
    menu {
      id
      name
      icon
      slug
      styles
      display
      enableSty
      order
      slugRoot
      slugRelative
      mobile
      desktop
      menu {
        id
        name
        icon
        slug
        styles
        display
        enableSty
        order
        slugRoot
        slugRelative
        mobile
        desktop
      }
    }
  }
}

```


[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 mega-menu/react/graphql/queries/getSettings.graphql from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```graphql
query getsettings {
  settings {
    idMenu
    orientation
  }
}

```


[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 mega-menu/react/MegaMenu/components/VerticalMenu.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import classNames from 'classnames'
import { observer } from 'mobx-react-lite'
import type { FC } from 'react'
import React, { useMemo } from 'react'
import type { InjectedIntlProps } from 'react-intl'
import { injectIntl } from 'react-intl'
import Skeleton from 'react-loading-skeleton'
import { useCssHandles } from 'vtex.css-handles'
import { formatIOMessage } from 'vtex.native-types'
import { useDevice } from 'vtex.device-detector'

import { megaMenuState } from '../State'
import type { ItemProps } from './Item'
import Item from './Item'
import Submenu from './Submenu'

const CSS_HANDLES = [
  'menuContainerVertical',
  'departmentsContainer',
  'menuContainerNavVertical',
  'menuItemVertical',
  'submenuContainerVertical',
  'departmentsTitle',
] as const

const VerticalMenu: FC<VerticalMenuProps> = observer((props) => {
  const { handles } = useCssHandles(CSS_HANDLES)
  const {
    departments,
    departmentActive,
    config,
    setDepartmentActive,
    isOpenMenu,
  } = megaMenuState

  const { isMobile } = useDevice()

  const { openOnly, orientation, intl } = props

  const departmentActiveHasCategories = !!departmentActive?.menu?.length

  const { title } = config

  const departmentItems = useMemo(
    () =>
      departments.map((d, i) => {
        const hasCategories = !!d.menu?.length

        const openDepartment = () => {
          setDepartmentActive(d)
        }

        const itemProps: ItemProps = {
          id: d.id,
          iconId: d.icon,
          accordion: hasCategories,
          tabIndex: i,
          onClick: openDepartment,
          style: d.styles,
          enableStyle: d.enableSty,
          ...(!hasCategories && { to: d.slug }),
        }

        return (
          <li
            className={classNames(
              handles.menuItemVertical,
              'bb b--light-gray',
              {
                bt: i === 0,
              }
            )}
            key={d.id}
          >
            <Item className={classNames('pv5 mh5')} {...itemProps}>
              {d.name}
            </Item>
          </li>
        )
      }),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [departments]
  )

  return (isOpenMenu && openOnly === orientation) || isMobile ? (
    <nav className={classNames(handles.menuContainerNavVertical, 'w-100')}>
      <div
        className={classNames(handles.departmentsContainer, {
          dn: !!departmentActive,
        })}
      >
        <h3
          className={classNames(
            handles.departmentsTitle,
            'f4 fw7 c-on-base mv5 lh-copy ph5'
          )}
        >
          {formatIOMessage({ id: title, intl })}
        </h3>
        <ul className={classNames(handles.menuContainerVertical, 'list pa0')}>
          {departments.length ? (
            departmentItems
          ) : (
            <div className="flex flex-column justify-center ph5 lh-copy">
              <Skeleton count={4} height={40} />
            </div>
          )}
        </ul>
      </div>
      {departmentActive && departmentActiveHasCategories && (
        <div
          className={classNames(
            handles.submenuContainerVertical,
            'bg-base w-100'
          )}
        >
          <Submenu openOnly={openOnly} />
        </div>
      )}
    </nav>
  ) : null
})

type VerticalMenuProps = InjectedIntlProps & {
  openOnly: string
  orientation: string
}

export default injectIntl(VerticalMenu)

```


[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 mega-menu/react/MegaMenu/components/Submenu.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable prettier/prettier */
import classNames from 'classnames'
import { observer } from 'mobx-react-lite'
import type { FC } from 'react'
import React, { useMemo, useState } from 'react'
import type { InjectedIntlProps } from 'react-intl'
import { defineMessages, injectIntl } from 'react-intl'
import { applyModifiers, useCssHandles } from 'vtex.css-handles'
import { formatIOMessage } from 'vtex.native-types'
import { ExtensionPoint, Link } from 'vtex.render-runtime'
import { Collapsible } from 'vtex.styleguide'

import type { MenuItem } from '../../shared'
import { megaMenuState } from '../State'
import styles from '../styles.css'
import Item from './Item'

const CSS_HANDLES = [
  'submenuContainer',
  'submenuList',
  'submenuListVertical',
  'submenuItem',
  'submenuItemVertical',
  'collapsibleContent',
  'collapsibleHeaderText',
  'seeAllLinkContainer',
  'seeAllLink',
  'submenuContainerTitle',
  'hideArrow',
] as const

const messages = defineMessages({
  seeAllTitle: {
    defaultMessage: '',
    id: 'store/mega-menu.submenu.seeAllButton.title',
  },
})

export type ItemProps = InjectedIntlProps & {
  closeMenu?: (open: boolean) => void
  openOnly?: string
}

const Submenu: FC<ItemProps> = observer((props) => {
  const { intl, closeMenu, openOnly } = props
  const { handles } = useCssHandles(CSS_HANDLES)
  const { departmentActive, config, getCategories } = megaMenuState
  const { orientation } = config

  const [collapsibleStates, setCollapsibleStates] = useState<
    Record<string, boolean>
  >({})

  const [showBtnCat, setShowBtnCat] = useState(false)

  const seeAllLink = (to: string, level = 1, className?: string) => {
    return (
      <div
        className={classNames(
          handles.seeAllLinkContainer,
          !className && level === 1 && 'bb b--light-gray pv5 ph5 w-100',
          !className && level > 1 && 'mt4 mb6 t-body',
          className
        )}
      >
        <Link
          to={to}
          className={classNames(
            handles.seeAllLink,
            'link underline fw7 c-on-base'
          )}
          onClick={() => {
            if (closeMenu) closeMenu(false)
          }}
        >
          {formatIOMessage({ id: messages.seeAllTitle.id, intl })}
        </Link>
      </div>
    )
  }

  const subCategories = (items: MenuItem[]) => {
    return items
      .filter((v) => v.display)
      .map((x) => (
        <div key={x.id} className={classNames(handles.submenuItem, 'mt3')}>
          <Item
            to={x.slug}
            iconId={x.icon}
            level={3}
            style={x.styles}
            enableStyle={x.enableSty}
            closeMenu={closeMenu}
          >
            {x.name}
          </Item>
        </div>
      ))
  }

  const items = useMemo(
    () => {
      if (!departmentActive) return

      if (departmentActive.menu) {
        if (departmentActive.menu.length > 1) {
          setShowBtnCat(true)
        } else {
          setShowBtnCat(false)
        }
      } else {
        setShowBtnCat(false)
      }

      const categories = getCategories()

      return categories
        .filter((j) => j.display)
        .map((category, i) => {
          const subcategories = category.menu?.length
            ? subCategories(category.menu)
            : []

          return (
            <div
              key={category.id}
              className={classNames(
                applyModifiers(
                  orientation === 'horizontal' && openOnly === 'horizontal'
                    ? styles.submenuItem
                    : handles.submenuItemVertical,
                  collapsibleStates[category.id] ? 'isOpen' : 'isClosed'
                ),
                (orientation === 'vertical' || openOnly === 'vertical') &&
                  'c-on-base bb b--light-gray mv0 ph5',
                (orientation === 'vertical' || openOnly === 'vertical') &&
                  i === 0 &&
                  'bt',
                collapsibleStates[category.id] && 'bg-near-white'
              )}
            >
              {orientation === 'horizontal' && openOnly === 'horizontal' ? (
                <>
                  <Item
                    to={category.slug}
                    iconId={category.icon}
                    level={2}
                    style={category.styles}
                    isTitle
                    enableStyle={category.enableSty}
                    closeMenu={closeMenu}
                  >
                    {category.name}
                  </Item>

                  {!!subcategories.length && subcategories}
                  {subcategories.length > 1 ? (
                    seeAllLink(category.slug, 2)
                  ) : (
                    <div />
                  )}
                </>
              ) : (
                <div
                  className={
                    category.menu?.length ? '' : classNames(handles.hideArrow)
                  }
                >
                  <Collapsible
                    header={
                      <p
                        className={classNames(
                          handles.collapsibleHeaderText,
                          collapsibleStates[category.id] && 'fw7'
                        )}
                      >
                        {category.name}
                      </p>
                    }
                    align="right"
                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                    onClick={(e: any) => {
                      if (subcategories.length >= 1) {
                        setCollapsibleStates({
                          ...collapsibleStates,
                          [category.id]: e.target.isOpen,
                        })
                      } else {
                        window.location.assign(`${category.slug}`)
                        if (closeMenu) closeMenu(false)
                      }
                    }}
                    isOpen={collapsibleStates[category.id]}
                    caretColor={`${
                      collapsibleStates[category.id] ? 'base' : 'muted'
                    }`}
                  >
                    {!!subcategories.length && (
                      <div className={handles.collapsibleContent}>
                        {subcategories}
                      </div>
                    )}

                    {subcategories.length >= 0 ? (
                      seeAllLink(category.slug, 2)
                    ) : (
                      // eslint-disable-next-line jsx-a11y/anchor-has-content
                      <a href={category.slug} />
                    )}
                  </Collapsible>
                </div>
              )}
            </div>
          )
        })
    },
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [departmentActive, collapsibleStates]
  )

  return (
    <>
      {departmentActive && (
        <>
          <h3
            className={classNames(
              handles.submenuContainerTitle,
              'f4 fw7 c-on-base lh-copy ma0 flex items-center',
              orientation === 'horizontal' &&
                openOnly === 'horizontal' &&
                'mb6',
              (orientation === 'vertical' || openOnly === 'vertical') &&
                'pv5 ph5'
            )}
          >
            {departmentActive.name}
            {orientation === 'horizontal' &&
            openOnly === 'horizontal' &&
            showBtnCat ? (
              seeAllLink(departmentActive.slug, 1, 't-small ml7')
            ) : (
              <div />
            )}
          </h3>

          <div
            className={classNames(
              orientation === 'horizontal' &&
                openOnly === 'horizontal' &&
                styles.submenuList,
              (orientation === 'vertical' || openOnly === 'vertical') &&
                handles.submenuListVertical
            )}
          >
            {orientation === 'horizontal' && openOnly === 'horizontal' ? (
              <>
                <ExtensionPoint id="before-menu" /> {items}{' '}
                <ExtensionPoint id="after-menu" />
              </>
            ) : (
              <>
                {items}
                {/* showBtnCat ? seeAllLink(departmentActive.slug) : <div /> */}
              </>
            )}
          </div>
        </>
      )}
    </>
  )
})

export default injectIntl(Submenu)

```


[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 mega-menu/react/MegaMenu/components/GoBackButton.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import classNames from 'classnames'
import { observer } from 'mobx-react-lite'
import type { FC } from 'react'
import { useQuery } from 'react-apollo'
import React, { useState, useEffect } from 'react'
import type { InjectedIntlProps } from 'react-intl'
import { defineMessages, injectIntl } from 'react-intl'
import { useCssHandles } from 'vtex.css-handles'
import { formatIOMessage } from 'vtex.native-types'
import { IconCaret } from 'vtex.store-icons'

import GET_SETTINGS from '../../graphql/queries/getSettings.graphql'
import { megaMenuState } from '../State'

const messages = defineMessages({
  goBackButtonTitle: {
    defaultMessage: '',
    id: 'store/mega-menu.goBackButton.title',
  },
})

const CSS_HANDLES = [
  'goBackContainer',
  'goBackButton',
  'goBackButtonIcon',
  'goBackButtonText',
] as const

const GoBackButton: FC<InjectedIntlProps> = observer(({ intl }) => {
  const { handles } = useCssHandles(CSS_HANDLES)
  const {
    departmentActive,
    config: { orientation },
    setDepartmentActive,
  } = megaMenuState

  const goBack = () => {
    setDepartmentActive(null)
  }

  const [orientationMenu, setOrientationMenu] = useState('')

  const { data } = useQuery(GET_SETTINGS, {
    fetchPolicy: 'no-cache',
  })

  useEffect(() => {
    if (data) {
      if (data.settings && data.settings.length > 0) {
        setOrientationMenu(data.settings[0].orientation)
      } else {
        setOrientationMenu('horizontal')
      }
    }
  }, [data])

  return (orientation === 'vertical' || orientationMenu === 'vertical') &&
    departmentActive ? (
    <div className={handles.goBackContainer}>
      <button
        className={classNames(handles.goBackButton, 'flex items-center')}
        onClick={goBack}
      >
        <IconCaret
          className={handles.goBackButtonIcon}
          orientation="left"
          size="18"
        />
        <span className={classNames(handles.goBackButtonText, 'ml3')}>
          {formatIOMessage({ id: messages.goBackButtonTitle.id, intl })}
        </span>
      </button>
    </div>
  ) : null
})

export default injectIntl(GoBackButton)

```


[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 mega-menu/react/MegaMenu/components/HorizontalMenu.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import classNames from 'classnames'
import { observer } from 'mobx-react-lite'
import type { FC } from 'react'
import React, { useCallback, useEffect, useMemo, useRef } from 'react'
import type { InjectedIntlProps } from 'react-intl'
import { injectIntl } from 'react-intl'
import Skeleton from 'react-loading-skeleton'
import { useCssHandles } from 'vtex.css-handles'
import { formatIOMessage } from 'vtex.native-types'

import { megaMenuState } from '../State'
import styles from '../styles.css'
import Item from './Item'
import Submenu from './Submenu'
import { BUTTON_ID } from './TriggerButton'

const CSS_HANDLES = [
  'menuContainer',
  'menuContainerNav',
  'menuItem',
  'submenuContainer',
] as const

const HorizontalMenu: FC<
  InjectedIntlProps & {
    openOnly: string
    orientation: string
  }
> = observer((props) => {
  const { handles } = useCssHandles(CSS_HANDLES)
  const {
    isOpenMenu,
    departments,
    departmentActive,
    config: { title, defaultDepartmentActive },
    setDepartmentActive,
    openMenu,
  } = megaMenuState

  const { openOnly, orientation, intl } = props

  const departmentActiveHasCategories = !!departmentActive?.menu?.length
  const navRef = useRef<HTMLDivElement>(null)

  const handleClickOutside = useCallback(
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    (event: any) => {
      const isTriggerButton = event?.path?.find(
        (data: HTMLElement) => data.dataset?.id === BUTTON_ID
      )

      if (
        navRef.current &&
        !navRef.current.contains(event.target as Node) &&
        !isTriggerButton
      ) {
        openMenu(false)
      }

      // eslint-disable-next-line react-hooks/exhaustive-deps
    },
    [openMenu]
  )

  useEffect(() => {
    document.addEventListener('click', handleClickOutside, true)

    return () => {
      document.removeEventListener('click', handleClickOutside, true)
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  useEffect(() => {
    const defaultDepartment = departments.find(
      (x) =>
        x.name.toLowerCase().trim() ===
        defaultDepartmentActive?.toLowerCase().trim()
    )

    if (defaultDepartment) {
      setDepartmentActive(defaultDepartment)
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [defaultDepartmentActive])

  const departmentItems = useMemo(
    () =>
      departments
        .filter((j) => j.display)
        .map((d) => {
          const hasCategories = !!d.menu?.length

          return (
            <li
              className={classNames(
                handles.menuItem,
                d.id === departmentActive?.id && 'bg-black-05'
              )}
              key={d.id}
              onMouseEnter={() => {
                setDepartmentActive(d)
              }}
            >
              <Item
                id={d.id}
                to={d.slug}
                iconId={d.icon}
                accordion={hasCategories}
                className={classNames('pv3 mh5')}
                style={d.styles}
                enableStyle={d.enableSty}
                closeMenu={openMenu}
              >
                {d.name}
              </Item>
            </li>
          )
        }),
    // eslint-disable-next-line react-hooks/exhaustive-deps
    [departments, departmentActive]
  )

  const loaderBlocks = useMemo(() => {
    const blocks: JSX.Element[] = []

    for (let index = 1; index <= 4; index++) {
      blocks.push(
        <div className="lh-copy">
          <Skeleton height={20} />
          <Skeleton height={80} />
        </div>
      )
    }

    return blocks
  }, [])

  return isOpenMenu && openOnly === orientation ? (
    <nav
      className={classNames(
        handles.menuContainerNav,
        'absolute left-0 bg-white bw1 bb b--muted-3 flex'
      )}
      ref={navRef}
    >
      <ul
        className={classNames(
          styles.menuContainer,
          'list ma0 pa0 pb3 br b--muted-4'
        )}
      >
        <h3 className="f4 fw7 c-on-base lh-copy ma0 pv5 ph5">
          {formatIOMessage({ id: title, intl })}
        </h3>
        {departments.length ? (
          departmentItems
        ) : (
          <div className="flex flex-column justify-center ph5 lh-copy">
            <Skeleton count={3} height={30} />
          </div>
        )}
      </ul>
      {departments.length ? (
        departmentActive &&
        departmentActiveHasCategories && (
          <div className={classNames(styles.submenuContainer, 'pa5 w-100')}>
            <Submenu closeMenu={openMenu ?? 'horizontal'} openOnly={openOnly} />
          </div>
        )
      ) : (
        <div className="w-100" style={{ overflow: 'auto' }}>
          <div className="w-30 mb4 ml4 mt5">
            <Skeleton height={30} />
          </div>
          <div className={classNames(styles.submenuList, 'mh4 mb5')}>
            {loaderBlocks}
          </div>
        </div>
      )}
    </nav>
  ) : null
})

export default injectIntl(HorizontalMenu)

```


[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 mega-menu/react/MegaMenu/components/TriggerButton.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable jsx-a11y/click-events-have-key-events */
import classNames from 'classnames'
import { observer } from 'mobx-react-lite'
import { useQuery } from 'react-apollo'
import type { FC } from 'react'
import React, { useState, useEffect } from 'react'
import { applyModifiers, useCssHandles } from 'vtex.css-handles'
import { Icon } from 'vtex.store-icons'
import { useDevice } from 'vtex.device-detector'

import GET_SETTINGS from '../../graphql/queries/getSettings.graphql'
import type { IconProps } from '../../shared'
import { megaMenuState } from '../State'
import styles from '../styles.css'

const CSS_HANDLES = ['triggerContainer', 'triggerButtonIcon'] as const

export const BUTTON_ID = 'mega-menu-trigger-button'

const TriggerButton: FC<TriggerButtonProps> = observer((props) => {
  const { handles } = useCssHandles(CSS_HANDLES)
  const { openMenu, isOpenMenu } = megaMenuState
  const [orientationMenu, setOrientationMenu] = useState('')
  const { isMobile } = useDevice()

  const { data } = useQuery(GET_SETTINGS, {
    fetchPolicy: 'no-cache',
  })

  const { isActive, activeClassName, mutedClassName, Drawer, ...rest } = props
  const iconBaseClassName = applyModifiers(
    handles.triggerButtonIcon,
    isActive ? 'active' : 'muted'
  )

  useEffect(() => {
    if (data) {
      if (data.settings && data.settings.length > 0) {
        setOrientationMenu(data.settings[0].orientation)
      } else {
        setOrientationMenu('horizontal')
      }
    }
  }, [data])

  return orientationMenu === 'vertical' || isMobile ? (
    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
    <div
      onClick={() => {
        if (!isOpenMenu && orientationMenu === 'vertical') {
          openMenu((v) => !v)
        }

        if (!isOpenMenu && isMobile) {
          openMenu((v) => !v)
        }
      }}
      role="button"
    >
      <Drawer />
    </div>
  ) : (
    <button
      data-id={BUTTON_ID}
      className={classNames(styles.triggerContainer, 'pointer')}
      onClick={() => openMenu((v) => !v)}
    >
      <Icon
        activeClassName={classNames(iconBaseClassName, activeClassName)}
        mutedClassName={classNames(iconBaseClassName, mutedClassName)}
        isActive={isActive}
        {...rest}
      />
    </button>
  )
})

export type TriggerButtonProps = IconProps

TriggerButton.defaultProps = {
  id: 'hpa-hamburguer-menu',
  isActive: true,
}

export default TriggerButton

```


[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 mega-menu/react/MegaMenu/components/Item.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import classNames from 'classnames'
import { observer } from 'mobx-react-lite'
import React, { useMemo } from 'react'
import type { FC } from 'react'
import { useCssHandles } from 'vtex.css-handles'
import { useRuntime } from 'vtex.render-runtime'
import { Icon, IconCaret } from 'vtex.store-icons'

import type { IconProps } from '../../shared'
import { megaMenuState } from '../State'

const CSS_HANDLES = [
  'styledLink',
  'styledLinkIcon',
  'styledLinkContainer',
  'styledLinkContent',
  'styledLinkText',
  'accordionIconContainer',
  'accordionIcon',
] as const

const defaultTypography: Record<number, string> = {
  1: 't-body',
  2: 't-body',
  3: 't-body',
}

const Item: FC<ItemProps> = observer((props) => {
  const { handles, withModifiers } = useCssHandles(CSS_HANDLES)
  const { departmentActive } = megaMenuState
  const {
    id,
    to,
    level = 1,
    isTitle,
    disabled,
    accordion,
    iconId,
    iconProps,
    iconPosition,
    typography = defaultTypography[level],
    tabIndex,
    className,
    onClick,
    children,
    style,
    enableStyle,
    closeMenu,
    ...rest
  } = props

  // Only for level 1
  const isOpen = departmentActive?.id === id
  const hasLink = to && to !== '#'

  const { rootPath } = useRuntime()

  const linkClassNames = classNames(
    handles.styledLink,
    'no-underline c-on-base w-100 pa0',
    {
      [typography]: true,
      'fw6 c-on-base': isTitle,
      pointer: !disabled && !isTitle,
    }
  )

  const stylesItem = useMemo(() => {
    if (style) {
      let tempStyle: Record<string, string> = {}

      try {
        tempStyle = JSON.parse(style)
      } catch (e) {
        return {}
      }

      return Object.entries(tempStyle).reduce((obj, [key, value]) => {
        const formatKey = key.replace(/-([a-z])/g, (g) => {
          return g[1].toUpperCase()
        })

        return {
          ...obj,
          [formatKey]: value,
        }
      }, {})
    }

    return {}
  }, [style])

  const iconTestId = `icon-${iconPosition}`
  const iconComponent =
    iconProps || iconId ? (
      <span
        className={classNames(
          handles.styledLinkIcon,
          'flex items-center',
          iconPosition === 'left' ? 'mr3' : 'ml3'
        )}
        data-testid={iconTestId}
      >
        <Icon {...{ ...iconProps, id: iconProps?.id ?? iconId }} />
      </span>
    ) : null

  const content = (
    <div
      className={classNames(handles.styledLinkContent, 'flex justify-between')}
    >
      <div
        className={classNames(
          handles.styledLinkText,
          'flex justify-between items-center',
          iconPosition === 'left' && iconComponent && 'nowrap'
        )}
        {...(enableStyle && { style: stylesItem })}
      >
        {iconPosition === 'left' && iconComponent}
        {children}
        {iconPosition === 'right' && iconComponent}
      </div>
      {accordion && (
        <div
          className={`${withModifiers(
            'accordionIconContainer',
            isOpen ? 'isOpen' : 'isClosed'
          )} ml1 c-muted-3`}
        >
          <IconCaret classNames={handles.accordionIcon} orientation="right" />
        </div>
      )}
    </div>
  )

  console.info(rootPath)
  console.info({ ...rest })

  return (
    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
    <div
      className={classNames(handles.styledLinkContainer, className)}
      onClick={onClick}
    >
      {disabled || !hasLink ? (
        onClick ? (
          <button className={linkClassNames}>{content}</button>
        ) : (
          <span className={linkClassNames}>{content}</span>
        )
      ) : (
        <a className={linkClassNames} href={`${window.location.origin}/${to}`}>
          {content}
        </a>
      )}
    </div>
  )
})

Item.defaultProps = {
  iconPosition: 'left',
}

export interface ItemProps {
  id?: string
  level?: number
  to?: string
  isTitle?: boolean
  disabled?: boolean
  accordion?: boolean
  typography?: string
  iconId?: string
  iconProps?: IconProps
  iconPosition?: 'left' | 'right'
  tabIndex?: number
  className?: string
  style?: string
  enableStyle?: boolean
  onClick?: () => void
  closeMenu?: (open: boolean) => void
}

export default Item

```


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

[Assistant]
Here's the implementation:

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

# Google Customer Reviews

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

This is a first party integration app for Google Customer Reviews, a free service that enables Google to collect valuable feedback from customers who’ve made a purchase on your site.

![Google Customer Reviews](https://user-images.githubusercontent.com/284515/77967280-31500500-72bb-11ea-9e71-b3abf8d677df.png)

## Configuration

1. [Install](https://vtex.io/docs/recipes/store/installing-an-app) the `vtex.google-customer-reviews` app in your VTEX account.

> ℹ *By installing the Google Customer Reviews, you will have access to the `google-customer-review-badge` block, which displays the Google Customer Reviews badge on your store's UI. To know how to set it up, check out the **Advanced Configuration** section below.*

2. In your account's admin, open the **Apps** section and select the **Google Customer Reviews** box.
3. Click on the settings icon and add your **Merchant Center ID**. You can get this value from the [Google Merchant Center](https://www.google.com/retail/solutions/merchant-center/.
4. Save your changes.

### Advanced Configuration

To display the Google Customer Reviews badge in your store, follow the instructions below:

1. Add the Google Customer Reviews app to your theme's `peerDependency` list:

```diff
   "peerDependencies": {
     "vtex.reviews-and-ratings": "2.x",
+    "vtex.google-customer-reviews": "1.x"
   },
```

> ⚠ *To be successful in the first step, you will need to update your theme to a new major version. Learn how to perform this update following the instructions given in [this tutorial](https://vtex.io/docs/recipes/development/migrating-CMS-settings-after-major-update/).*

2. Add the `google-customer-review-badge` block to your theme's in the desired template. For example:

```diff
   "flex-layout.row#footer-1-desktop": {
     "children": [
       "vtex.menu@2.x:menu#Products",
       "vtex.menu@2.x:menu#footer-clothing",
       "vtex.menu@2.x:menu#footer-decoration",
       "vtex.menu@2.x:menu#footer-bags",
       "footer-spacer",
       "social-networks",
+      "google-customer-review-badge"
     ],
     "props": {
       "blockClass": "menu-row",
       "paddingTop": 6,
       "paddingBottom": 3
     }
   },
```

3. [Deploy your theme changes](https://vtex.io/docs/recipes/store-management/making-your-theme-content-public/).

## Troubleshooting

This app only works with the website URL verified and claimed in Merchant Center. When the website URL is not verified, a 404 javascript error is generated.

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

## Contributors ✨

Thanks goes to these wonderful people:

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

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

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

```


[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-customer-reviews/react/index.tsx from the google-customer-reviews VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable @typescript-eslint/camelcase */
import { canUseDOM } from 'vtex.render-runtime'
import { PixelMessage } from './typings/events'
import { getCountryISO2 } from './modules/iso-3-to-2'
import { addScript } from './modules/addScript'

export function handleEvents(e: PixelMessage) {
  switch (e.data.eventName) {
    case 'vtex:orderPlacedTracked':
    case 'vtex:orderPlaced': {
      const data = e.data
      const merchantId = window.__google_customer_reviews.merchantId
      const passGtin = window.__google_customer_reviews.passGtin
      const optInStyle = window.__google_customer_reviews.optInStyle
      const showBadge = window.__google_customer_reviews.showBadge
      const badgePosition = window.__google_customer_reviews.badgePosition

      const shippingEstimateDate = new Date(
        data.transactionLatestShippingEstimate
      )
      const estimate = shippingEstimateDate.toISOString().slice(0, 10)

      window.renderOptIn = function() {
        if (showBadge === 'true') {
          const ratingBadgeContainer = document.createElement('div')
          document.body.appendChild(ratingBadgeContainer)

          window.gapi.load('ratingbadge', function() {
            window.gapi.ratingbadge.render(ratingBadgeContainer, {
              merchant_id: merchantId,
              position: badgePosition,
            })
          })
        }

        window.gapi.load('surveyoptin', function() {
          window.gapi.surveyoptin.render({
            // REQUIRED
            merchant_id: merchantId,
            order_id: data.orderGroup,
            email: data.visitorContactInfo[0],
            delivery_country: getCountryISO2(
              data.visitorAddressCountry as keyof typeof getCountryISO2
            ),
            estimated_delivery_date: estimate,
            // OPTIONAL
            products:
              passGtin === 'true'
                ? data.transactionProducts.map(product => ({
                    gtin: product.ean,
                  }))
                : undefined,
            opt_in_style: optInStyle,
          })
        })
      }

      addScript('renderOptIn')
      return
    }
    default: {
      return
    }
  }
}

if (canUseDOM) {
  window.addEventListener('message', handleEvents)
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "ramda": "^0.26.1"
  },
  "devDependencies": {
    "@apollo/react-testing": "^3.1.3",
    "@types/graphql": "^14.5.0",
    "@types/jest": "^24.9.0",
    "@types/node": "^13.1.8",
    "@types/ramda": "^0.26.5",
    "@types/react": "^16.9.19",
    "@types/react-intl": "^3.0.0",
    "@vtex/test-tools": "^3.0.1",
    "apollo-cache-inmemory": "^1.6.5",
    "apollo-client": "^2.6.8",
    "eslint": "^5.16.0",
    "eslint-config-vtex-react": "^4.1.0",
    "graphql": "^14.5.4",
    "prettier": "^1.18.2",
    "react-intl": "^3.11.0",
    "tslint-eslint-rules": "^5.4.0",
    "typescript": "3.9.7",
    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles",
    "vtex.pixel-interfaces": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pixel-interfaces@1.1.1/public/_types/react",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.4/public/@types/vtex.render-runtime"
  },
  "version": "1.1.1"
}

```


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

[User] Show me the implementation of google-customer-reviews/react/Badge.tsx from the google-customer-reviews VTEX app.

[Assistant]
Here's the implementation:

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

import { addScript } from './modules/addScript'

// @ts-expect-error it will be called onload of the script
window.renderGoogleInlineBadge = function() {
  var ratingBadgeContainer = document.getElementById(
    'google-customer-reviews-badge'
  ) as HTMLDivElement

  window.gapi.load('ratingbadge', function() {
    const merchantId = window.__google_customer_reviews
      ? window.__google_customer_reviews.merchantId
      : ''

    if (!ratingBadgeContainer) return

    window.gapi.ratingbadge.render(ratingBadgeContainer, {
      // eslint-disable-next-line @typescript-eslint/camelcase
      merchant_id: merchantId,
      position: 'INLINE',
    })
  })
}

const CSS_HANDLES = ['badge'] as const

function Badge() {
  const { handles } = useCssHandles(CSS_HANDLES)

  useEffect(() => {
    addScript('renderGoogleInlineBadge')
  }, [])

  return (
    <div id="google-customer-reviews-badge" className={handles.badge}></div>
  )
}

export default Badge

```


[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-customer-reviews/store/interfaces.json from the google-customer-reviews VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "pixel.google-customer-reviews": {
    "component": "index"
  },
  "google-customer-review-badge": {
    "component": "Badge"
  }
}

```


[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-customer-reviews/store/plugins.json from the google-customer-reviews VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "pixels > pixel": "pixel.google-customer-reviews"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "Google Customer Review",
  "headline": "Esta aplicación permite a Google recopilar y publicar comentarios de clientes que han realizado una compra en su sitio web.",
  "overview": "Esta aplicación permite la integración con el servicio gratuito ofrecido por Google para recopilar opiniones y comentarios de clientes que han comprado en su tienda.\nLa información recopilada puede ser útil para monitorear, a través del Centro de comerciantes de Google, cómo van las experiencias de los clientes, también para los anuncios de Google AdWords y para mostrar productos en Google Shopping.",
  "features": [
    "Envío de e-mail para evaluación de clientes con la opción \"Google Customer Reviews\" habilitada",
    "Sello de Google con la calificación del vendedor (opcional)",
    "Formulario de encuesta de opinión del cliente (opcional)",
    "Calificación del vendedor en Google Shopping."
  ],
  "additionalInformation": "Para usar la aplicación en su tienda y controlar los datos recopilados, debe tener una cuenta en Google Merchant Center.",
  "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-customer-reviews/public/metadata/messages/pt-BR.json from the google-customer-reviews VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Google Customer Review",
  "headline": "Este aplicativo permite que o Google colete e publique comentários de clientes que fizeram uma compra no seu site.",
  "overview": "Este aplicativo permite a integração com o serviço gratuito oferecido pelo Google de coleta de avaliações e comentários dos clientes que compraram na sua loja.\nAs informações coletadas podem ser úteis para monitorar, por meio do Google Merchant Center, como estão sendo as experiências dos clientes, também para anúncios do Google AdWords e para apresentação de produtos no Google Shopping.",
  "features": [
    "Envio de e-mail para avaliação de clientes com a opção \"Google Customer Reviews\" ativada",
    "Selo do Google com a classificação do vendedor (opcional)",
    "Formulário de pesquisa de opinião de clientes (opcional)",
    "Classificação do vendedor no Google Shopping."
  ],
  "additionalInformation": "Para a utilização do aplicativo em sua loja e acompanhamento dos dados coletados, é preciso ter uma conta no Google Merchant Center.",
  "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-customer-reviews/public/metadata/messages/en-US.json from the google-customer-reviews VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Google Customer Review",
  "headline": "This application allows Google to collect and post comments from customers who have made a purchase on your website.",
  "overview": "This application allows integration with the free service offered by Google to collect reviews and comments from customers who have purchased at your store.\nThe information collected can be useful for monitoring, through the Google Merchant Center, how customers' experiences are going, also for Google AdWords and for product presentation on Google Shopping.",
  "features": [
    "Sending e-mail for customer evaluation with the 'Google Customer Reviews' opt-in",
    "Google stamp with the seller rating (optional)",
    "Customer opinion survey form (optional)",
    "Seller rating on Google Shopping."
  ],
  "additionalInformation": "To use the application in your store and monitor the data collected, you must have an account at Google Merchant Center.",
  "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-customer-reviews/react/typings/events.d.ts from the google-customer-reviews VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface PixelMessage extends MessageEvent {
  data:
    | ProductViewData
    | ProductClickData
    | OrderPlacedData
    | OrderPlacedTrackedData
    | PageViewData
    | ProductImpressionData
    | AddToCartData
    | RemoveToCartData
    | CartChangedData
    | HomePageInfo
    | ProductPageInfoData
    | SearchPageInfoData
    | UserData
    | CartIdData
}

export interface EventData {
  event: string
  eventName: string
  currency: string
}

export interface PageInfoData extends EventData {
  event: 'pageInfo'
  eventName: 'vtex:pageInfo'
  accountName: string
  pageTitle: string
  pageUrl: string
}

export interface UserData extends PageInfoData {
  eventType: 'userData'
  eventName: 'vtex:userData'
  firstName?: string
  lastName?: string
  document?: string
  id?: string
  email?: string
  phone?: string
  isAuthenticated: boolean
}

export interface CartIdData extends PageInfoData {
  eventType: 'cartId'
  eventName: 'vtex:cartId'
  cartId: string
}

export interface HomePageInfo extends PageInfoData {
  eventType: 'homeView'
}

export interface ProductPageInfoData extends PageInfoData {
  eventType: 'productPageInfo'
}

export interface SearchPageInfoData extends PageInfoData {
  eventType:
    | 'internalSiteSearchView'
    | 'categoryView'
    | 'departmentView'
    | 'emptySearchView'
  category?: CategoryMetaData
  department?: DepartmentMetaData
  search?: SearchMetaData
}

interface CategoryMetaData {
  id: string
  name: string
}

interface DepartmentMetaData {
  id: string
  name: string
}

interface SearchMetaData {
  term: string
  category: CategoryMetaData
  results: number
}

export interface PageViewData extends EventData {
  event: 'pageView'
  eventName: 'vtex:pageView'
  pageTitle: string
  pageUrl: string
  referrer: string
}

export interface AddToCartData extends EventData {
  event: 'addToCart'
  eventName: 'vtex:addToCart'
  items: CartItem[]
}

export interface RemoveToCartData extends EventData {
  event: 'removeFromCart'
  eventName: 'vtex:removeFromCart'
  items: CartItem[]
}

export interface CartChangedData extends EventData {
  event: 'cartChanged'
  eventName: 'vtex:cartChanged'
  items: CartItem[]
}

export interface OrderPlacedData extends Order, EventData {
  event: 'orderPlaced'
  eventName: 'vtex:orderPlaced'
}

export interface OrderPlacedTrackedData extends Order, EventData {
  event: 'orderPlacedTracked'
  eventName: 'vtex:orderPlacedTracked'
}

export interface ProductViewData extends EventData {
  event: 'productView'
  eventName: 'vtex:productView'
  product: ProductDetail
}

export interface ProductClickData extends EventData {
  event: 'productClick'
  eventName: 'vtex:productClick'
  product: ProductSummary
}

export interface ProductImpressionData extends EventData {
  event: 'productImpression'
  eventName: 'vtex:productImpression'
  impressions: Impression[]
  product?: ProductSummary // deprecated, use impressions list!
  position?: number // deprecated, use impressions list!
  list: string
}

interface CartItem {
  skuId: string
  variant: string
  price: number
  name: string
  quantity: number
  productRefId: string
  brand: string
  category: string
  detailUrl: string
  imageUrl: string
}

export interface Order {
  currency: string
  accountName: string
  orderGroup: string
  salesChannel: string
  coupon: string
  visitorType: string
  visitorContactInfo: string[]
  visitorAddressState: string
  visitorAddressCountry: string
  visitorAddressPostalCode: string
  transactionId: string
  transactionDate: string
  transactionAffiliation: string
  transactionTotal: number
  transactionShipping: number
  transactionSubtotal: number
  transactionDiscounts: number
  transactionTax: number
  transactionCurrency: string
  transactionPaymentType: PaymentType[]
  transactionShippingMethod: ShippingMethod[]
  transactionLatestShippingEstimate: Date
  transactionProducts: ProductOrder[]
  transactionPayment: {
    id: string
  }
}

export interface Impression {
  product: ProductSummary
  position: number
}

export interface PaymentType {
  group: string
  paymentSystemName: string
  installments: number
  value: number
}

export interface ShippingMethod {
  itemId: string
  selectedSla: string
}

export interface ProductOrder {
  id: string
  name: string
  sku: string
  skuRefId: string
  skuName: string
  productRefId: string
  ean: string
  slug: string
  brand: string
  brandId: string
  seller: string
  sellerId: string
  category: string
  categoryId: string
  categoryTree: string[]
  categoryIdTree: string[]
  priceTags: PriceTag[]
  originalPrice: number
  price: number
  sellingPrice: number
  tax: number
  quantity: number
  components: any[]
  measurementUnit: string
  unitMultiplier: number
}

export interface PriceTag {
  identifier: string
  isPercentual: boolean
  value: number
}

interface Product {
  brand: string
  brandId: string
  categories: string[]
  productId: string
  productName: string
  productReference: string
  linkText: string
  items: Item[]
}

export interface ProductSummary extends Product {
  sku: Item
}

export interface ProductDetail extends Product {
  categoryId: string
  categoryTree: { id: string; name: string }[]
  selectedSku: Item
}

export interface Item {
  itemId: string
  name: string
  ean?: string // TODO: provide this info at productImpression
  referenceId: { Key: string; Value: string }
  seller?: Seller
  sellers: Seller[]
}

export interface Seller {
  commertialOffer: CommertialOffer
  sellerId: string
}

export interface CommertialOffer {
  Price: number
  ListPrice: number
  AvailableQuantity: number
}

```


[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-customer-reviews/react/typings/global.d.ts from the google-customer-reviews VTEX app.

[Assistant]
Here's the implementation:

```typescript
interface Window extends Window {
  __google_customer_reviews: {
    merchantId: MerchantId
    passGtin: 'true' | 'false'
    optInStyle:
      | 'CENTER_DIALOG'
      | 'BOTTOM_RIGHT_DIALOG'
      | 'BOTTOM_LEFT_DIALOG'
      | 'TOP_RIGHT_DIALOG'
      | 'TOP_LEFT_DIALOG'
      | 'BOTTOM_TRAY'
    showBadge: 'true' | 'false'
    badgePosition: 'BOTTOM_RIGHT' | 'BOTTOM_LEFT' | 'INLINE'
  }
  gapi: GoogleAPI
  renderOptIn: () => void
}

type MerchantId = string

interface GoogleAPI {
  load: (event: string, callback: () => void) => void
  ratingbadge: {
    render: (element: HTMLDivElement, params: RatingBadgeParams) => void
  },
  surveyoptin: {
    render: (params: SurveyParams) => void
  }
}

interface SurveyParams {
  merchant_id: MerchantId
  order_id: string
  email: string
  delivery_country: string
  estimated_delivery_date: string
  products?: SurveyProducts[]
  opt_in_style?:
    | 'CENTER_DIALOG'
    | 'BOTTOM_RIGHT_DIALOG'
    | 'BOTTOM_LEFT_DIALOG'
    | 'TOP_RIGHT_DIALOG'
    | 'TOP_LEFT_DIALOG'
    | 'BOTTOM_TRAY'
}

interface SurveyProducts {
  gtin: string
}

interface RatingBadgeParams {
  merchant_id: MerchantId
  position: 'BOTTOM_RIGHT' | 'BOTTOM_LEFT' | 'INLINE'
}

```


[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-customer-reviews/react/modules/addScript.ts from the google-customer-reviews VTEX app.

[Assistant]
Here's the implementation:

```typescript
export function addScript(callbackName: string) {
  const scriptOnPage = document.getElementById('google-customer-reviews')
  if (scriptOnPage) return

  const script = document.createElement('script')
  script.async = true
  script.defer = true
  script.id = 'google-customer-reviews'
  script.src = 'https://apis.google.com/js/platform.js?onload=' + callbackName
  document.body.appendChild(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 google-customer-reviews/react/modules/iso-3-to-2.ts from the google-customer-reviews VTEX app.

[Assistant]
Here's the implementation:

```typescript
const countryISOMapping = {
  AFG: "AF",
  ALA: "AX",
  ALB: "AL",
  DZA: "DZ",
  ASM: "AS",
  AND: "AD",
  AGO: "AO",
  AIA: "AI",
  ATA: "AQ",
  ATG: "AG",
  ARG: "AR",
  ARM: "AM",
  ABW: "AW",
  AUS: "AU",
  AUT: "AT",
  AZE: "AZ",
  BHS: "BS",
  BHR: "BH",
  BGD: "BD",
  BRB: "BB",
  BLR: "BY",
  BEL: "BE",
  BLZ: "BZ",
  BEN: "BJ",
  BMU: "BM",
  BTN: "BT",
  BOL: "BO",
  BIH: "BA",
  BWA: "BW",
  BVT: "BV",
  BRA: "BR",
  VGB: "VG",
  IOT: "IO",
  BRN: "BN",
  BGR: "BG",
  BFA: "BF",
  BDI: "BI",
  KHM: "KH",
  CMR: "CM",
  CAN: "CA",
  CPV: "CV",
  CYM: "KY",
  CAF: "CF",
  TCD: "TD",
  CHL: "CL",
  CHN: "CN",
  HKG: "HK",
  MAC: "MO",
  CXR: "CX",
  CCK: "CC",
  COL: "CO",
  COM: "KM",
  COG: "CG",
  COD: "CD",
  COK: "CK",
  CRI: "CR",
  CIV: "CI",
  HRV: "HR",
  CUB: "CU",
  CYP: "CY",
  CZE: "CZ",
  DNK: "DK",
  DJI: "DJ",
  DMA: "DM",
  DOM: "DO",
  ECU: "EC",
  EGY: "EG",
  SLV: "SV",
  GNQ: "GQ",
  ERI: "ER",
  EST: "EE",
  ETH: "ET",
  FLK: "FK",
  FRO: "FO",
  FJI: "FJ",
  FIN: "FI",
  FRA: "FR",
  GUF: "GF",
  PYF: "PF",
  ATF: "TF",
  GAB: "GA",
  GMB: "GM",
  GEO: "GE",
  DEU: "DE",
  GHA: "GH",
  GIB: "GI",
  GRC: "GR",
  GRL: "GL",
  GRD: "GD",
  GLP: "GP",
  GUM: "GU",
  GTM: "GT",
  GGY: "GG",
  GIN: "GN",
  GNB: "GW",
  GUY: "GY",
  HTI: "HT",
  HMD: "HM",
  VAT: "VA",
  HND: "HN",
  HUN: "HU",
  ISL: "IS",
  IND: "IN",
  IDN: "ID",
  IRN: "IR",
  IRQ: "IQ",
  IRL: "IE",
  IMN: "IM",
  ISR: "IL",
  ITA: "IT",
  JAM: "JM",
  JPN: "JP",
  JEY: "JE",
  JOR: "JO",
  KAZ: "KZ",
  KEN: "KE",
  KIR: "KI",
  PRK: "KP",
  KOR: "KR",
  KWT: "KW",
  KGZ: "KG",
  LAO: "LA",
  LVA: "LV",
  LBN: "LB",
  LSO: "LS",
  LBR: "LR",
  LBY: "LY",
  LIE: "LI",
  LTU: "LT",
  LUX: "LU",
  MKD: "MK",
  MDG: "MG",
  MWI: "MW",
  MYS: "MY",
  MDV: "MV",
  MLI: "ML",
  MLT: "MT",
  MHL: "MH",
  MTQ: "MQ",
  MRT: "MR",
  MUS: "MU",
  MYT: "YT",
  MEX: "MX",
  FSM: "FM",
  MDA: "MD",
  MCO: "MC",
  MNG: "MN",
  MNE: "ME",
  MSR: "MS",
  MAR: "MA",
  MOZ: "MZ",
  MMR: "MM",
  NAM: "NA",
  NRU: "NR",
  NPL: "NP",
  NLD: "NL",
  ANT: "AN",
  NCL: "NC",
  NZL: "NZ",
  NIC: "NI",
  NER: "NE",
  NGA: "NG",
  NIU: "NU",
  NFK: "NF",
  MNP: "MP",
  NOR: "NO",
  OMN: "OM",
  PAK: "PK",
  PLW: "PW",
  PSE: "PS",
  PAN: "PA",
  PNG: "PG",
  PRY: "PY",
  PER: "PE",
  PHL: "PH",
  PCN: "PN",
  POL: "PL",
  PRT: "PT",
  PRI: "PR",
  QAT: "QA",
  REU: "RE",
  ROU: "RO",
  RUS: "RU",
  RWA: "RW",
  BLM: "BL",
  SHN: "SH",
  KNA: "KN",
  LCA: "LC",
  MAF: "MF",
  SPM: "PM",
  VCT: "VC",
  WSM: "WS",
  SMR: "SM",
  STP: "ST",
  SAU: "SA",
  SEN: "SN",
  SRB: "RS",
  SYC: "SC",
  SLE: "SL",
  SGP: "SG",
  SVK: "SK",
  SVN: "SI",
  SLB: "SB",
  SOM: "SO",
  ZAF: "ZA",
  SGS: "GS",
  SSD: "SS",
  ESP: "ES",
  LKA: "LK",
  SDN: "SD",
  SUR: "SR",
  SJM: "SJ",
  SWZ: "SZ",
  SWE: "SE",
  CHE: "CH",
  SYR: "SY",
  TWN: "TW",
  TJK: "TJ",
  TZA: "TZ",
  THA: "TH",
  TLS: "TL",
  TGO: "TG",
  TKL: "TK",
  TON: "TO",
  TTO: "TT",
  TUN: "TN",
  TUR: "TR",
  TKM: "TM",
  TCA: "TC",
  TUV: "TV",
  UGA: "UG",
  UKR: "UA",
  ARE: "AE",
  GBR: "GB",
  USA: "US",
  UMI: "UM",
  URY: "UY",
  UZB: "UZ",
  VUT: "VU",
  VEN: "VE",
  VNM: "VN",
  VIR: "VI",
  WLF: "WF",
  ESH: "EH",
  YEM: "YE",
  ZMB: "ZM",
  ZWE: "ZW",
  XKX: "XK"
}

export function getCountryISO2(countryCode: keyof typeof countryISOMapping) {
  return countryISOMapping[countryCode]
}

```


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

[Assistant]
Here's the implementation:

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

## Contributors ✨

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

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

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


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

[User] Show me the implementation of order-payment/react/OrderPayment.tsx from the order-payment VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { useCallback } from 'react'
import { useOrderForm } from 'vtex.order-manager/OrderForm'
import { useQueueStatus, useOrderQueue } from 'vtex.order-manager/OrderQueue'
import { useMutation } from 'react-apollo'
import MutationUpdateOrderFormPayment from 'vtex.checkout-resources/MutationUpdateOrderFormPayment'
import {
  OrderForm as CheckoutOrderForm,
  PaymentDataInput,
} from '@vtex/checkout-types'

import {
  createOrderPaymentProvider,
  useOrderPayment,
} from './components/createOrderPaymentProvider'
import { useLogger } from './utils/logger'

interface UpdateOrderFormPaymentMutation {
  updateOrderFormPayment: CheckoutOrderForm
}

interface UpdateOrderFormPaymentMutationVariables {
  paymentData: PaymentDataInput
}

function useUpdateOrderFormPayment() {
  const [updateOrderFormPayment] = useMutation<
    UpdateOrderFormPaymentMutation,
    UpdateOrderFormPaymentMutationVariables
  >(MutationUpdateOrderFormPayment)

  return {
    updateOrderFormPayment: useCallback(
      async (paymentData: PaymentDataInput) => {
        const { data } = await updateOrderFormPayment({
          variables: { paymentData },
        })

        const newOrderForm = data!.updateOrderFormPayment

        return newOrderForm
      },
      [updateOrderFormPayment]
    ),
  }
}

const { OrderPaymentProvider } = createOrderPaymentProvider<CheckoutOrderForm>({
  useLogger,
  useOrderQueue,
  useOrderForm,
  useUpdateOrderFormPayment,
  useQueueStatus,
})

export { useOrderPayment, OrderPaymentProvider }
export default { useOrderPayment, OrderPaymentProvider }

```


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

[Assistant]
Here's the implementation:

```json
{
  "scripts": {
    "test": "vtex-test-tools test",
    "lint": "tsc --noEmit && eslint --ext ts,tsx ."
  },
  "dependencies": {
    "@vtex/css-handles": "^1.0.0",
    "classnames": "^2.2.6",
    "react": "^16.8.3",
    "react-apollo": "^3.1.3",
    "react-dom": "^16.8.3",
    "react-intl": "^5.23.0"
  },
  "devDependencies": {
    "@apollo/react-testing": "^4.0.0",
    "@vtex/order-manager": "^0.5.4-beta.0",
    "@types/classnames": "^2.2.7",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.7.5",
    "@types/prop-types": "^15.7.0",
    "@types/react": "^16.9.2",
    "@vtex/test-tools": "3.0.3",
    "apollo-client": "^2.5.1",
    "react-hooks-testing-library": "^0.6.0",
    "react-scripts": "^4.0.3",
    "typescript": "3.9.7",
    "vtex.checkout-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-graphql@0.55.1/public/@types/vtex.checkout-graphql",
    "vtex.checkout-resources": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.checkout-resources@0.41.0/public/@types/vtex.checkout-resources",
    "vtex.order-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.order-manager@0.9.0/public/@types/vtex.order-manager",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.126.5/public/@types/vtex.render-runtime"
  },
  "version": "0.9.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 order-payment/store/interfaces.json from the order-payment VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "base-store-component": {
    "component": "Example"
  }
}
```


[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 order-payment/react/__fixtures__/OrderFormProvider.tsx from the order-payment VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { createOrderFormProvider } from '@vtex/order-manager'

import { mockOrderForm } from './orderForm'

function useToast() {
  return {
    showToast: () => {},
    toastState: {
      isToastVisible: false,
    },
  }
}

function useClearOrderFormMessages() {
  return () =>
    new Promise(resolve => {
      resolve(true)
    })
}

function useGetOrderForm(args: any): any {
  return new Promise(resolve => {
    resolve({
      ...args,
    })
  })
}

const { OrderFormProvider } = createOrderFormProvider({
  useToast,
  useClearOrderFormMessages,
  useGetOrderForm,
  defaultOrderForm: mockOrderForm,
})

export { OrderFormProvider }

```


[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 order-payment/react/__fixtures__/orderForm.ts from the order-payment VTEX app.

[Assistant]
Here's the implementation:

```typescript
export const mockOrderForm = {
  id: '123',
  loggedIn: false,
  paymentData: {
    installmentOptions: [
      {
        value: 100,
        paymentSystem: '1',
        installments: [],
      },
    ],
    isValid: true,
    payments: [],
    paymentSystems: [],
    availableAccounts: [],
  },
  items: [
    {
      additionalInfo: {
        brandName: 'Test Brand 0',
      },
      id: '1',
      uniqueId: '1',
      detailUrl: '/work-shirt/p',
      imageUrls: {
        at1x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155476-55-55/Frame-4.jpg?v=636793808441900000',
        at2x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155476-55-55/Frame-4.jpg?v=636793808441900000',
        at3x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155476-55-55/Frame-4.jpg?v=636793808441900000',
      },
      listPrice: 2800000,
      measurementUnit: 'un',
      name: 'قميص العمل الأعلى',
      price: 2400000,
      productId: '1',
      quantity: 3,
      sellingPrice: 2400000,
      skuName: 'Test SKU 0',
      skuSpecifications: [],
      attachmentOfferings: [],
      bundleItems: [],

      attachments: [],
      offerings: [],
      priceTags: [],
    },
    {
      additionalInfo: {
        brandName: 'Test Brand 1',
      },
      id: '30',
      uniqueId: '30',
      detailUrl: '/long-sleeve-shirt/p',
      imageUrls: {
        at1x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155487-55-55/Frame-7.jpg?v=636793837686400000',
        at2x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155487-55-55/Frame-7.jpg?v=636793837686400000',
        at3x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155487-55-55/Frame-7.jpg?v=636793837686400000',
      },
      listPrice: 945000,
      measurementUnit: 'un',
      name: '上品なサングラス',
      price: 945000,
      productId: '2000005',
      quantity: 1,
      sellingPrice: 945000,
      skuName: 'Test SKU 1',
      skuSpecifications: [],
      attachmentOfferings: [],
      bundleItems: [],
      isGift: false,
      attachments: [],
      offerings: [],
      priceTags: [],
    },
    {
      additionalInfo: {
        brandName: 'Test Brand 2',
      },
      id: '2000535',
      uniqueId: '2000535',
      detailUrl: '/classy--sunglasses/p',
      imageUrls: {
        at1x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155469-55-55/Frame-8.jpg?v=636793757498800000',
        at2x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155469-55-55/Frame-8.jpg?v=636793757498800000',
        at3x:
          'http://storecomponents.vteximg.com.br/arquivos/ids/155469-55-55/Frame-8.jpg?v=636793757498800000',
      },
      listPrice: 400000,
      measurementUnit: 'un',
      name: 'กางเกงขาสั้น St Tropez',
      price: 360000,
      productId: '13',
      quantity: 4,
      sellingPrice: 360000,
      skuName: 'Test SKU 2',
      skuSpecifications: [],
      attachmentOfferings: [],
      bundleItems: [],
      isGift: false,
      attachments: [],
      offerings: [],
      priceTags: [],
    },
  ],
  marketingData: {},
  totalizers: [
    {
      id: 'Items',
      name: 'Items Total',
      value: 9585000,
    },
  ],
  shipping: { isValid: true, pickupOptions: [], deliveryOptions: [] },
  messages: {
    couponMessages: [],
    generalMessages: [],
  },
  clientProfileData: {
    email: '***@vt**.**',
    firstName: 'U*e*',
    lastName: 'N*m*',
    isValid: true,
  },
  canEditData: false,
  value: 9585000,
}

```


[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 order-payment/react/typings/storefront.d.ts from the order-payment VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { FunctionComponent } from 'react'

declare global {
  type Obj = Record<string, string | never>
  interface StorefrontFunctionComponent<P = Obj> extends FunctionComponent<P> {
    getSchema?(props: P): Obj
    schema?: Obj
  }

  interface StorefrontComponent<P = Obj, S = Obj> extends Component<P, S> {
    getSchema?(props: P): Obj
    schema: Obj
  }
}

```


[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 order-payment/react/typings/vtex.checkout-resources.d.ts from the order-payment VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.checkout-resources/MutationUpdateOrderFormPayment' {
  export { default } from 'vtex.checkout-resources/react/MutationUpdateOrderFormPayment'
}

```


[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 order-payment/react/typings/vtex.order-manager.d.ts from the order-payment VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module 'vtex.order-manager/OrderForm' {
  export * from 'vtex.order-manager/react/OrderForm'
  export { default } from 'vtex.order-manager/react/OrderForm'
}

declare module 'vtex.order-manager/OrderQueue' {
  export * from 'vtex.order-manager/react/OrderQueue'
  export { default } from 'vtex.order-manager/react/OrderQueue'
}

```


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

[Assistant]
Here's the implementation:

```typescript
/* Typings for `render-runtime` */
declare module 'vtex.render-runtime' {
  import { Component, ComponentType, ReactElement, ReactType } from 'react'

  export interface NavigationOptions {
    page: string
    params?: any
  }

  export interface RenderContextProps {
    runtime: {
      navigate: (options: NavigationOptions) => void
    }
  }

  interface ExtensionPointProps {
    id: string
    [key: string]: any
  }

  export const ExtensionPoint: ComponentType<ExtensionPointProps>

  interface ChildBlockProps {
    id: string
  }

  type Obj = Record<string, string>

  export const ChildBlock: ComponentType<ChildBlockProps>
  export const useChildBlock = function({ id: string }): Obj {}

  export const Helmet: ReactElement
  export const Link: ReactType
  export const NoSSR: ReactElement
  export const RenderContextConsumer: ReactElement
  export const canUseDOM: boolean
  export const withRuntimeContext: <TOriginalProps extends Obj>(
    Component: ComponentType<TOriginalProps & RenderContextProps>
  ) => ComponentType<TOriginalProps>
}

```


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

[Assistant]
Here's the implementation:

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

  const value: DocumentNode
  export default value
}

```


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

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

[Assistant]
Here's the implementation:

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

  export const Input: ComponentType<InputProps>

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

```


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

[User] Show me the implementation of order-payment/react/utils/logger.ts from the order-payment VTEX app.

[Assistant]
Here's the implementation:

```typescript
export interface LogParams {
  type: 'Error'
  level: 'Critical'
  event: unknown
  workflowType?: 'OrderPayment'
  workflowInstance: string
}

export type LogFn = (params: LogParams) => void

export type UseLogger = () => { log: LogFn }

export function useLogger() {
  const log = ({
    type,
    level,
    event,
    workflowType,
    workflowInstance,
  }: LogParams) => {
    // eslint-disable-next-line no-console
    console.log({
      type,
      level,
      event,
      workflowInstance,
      workflowType: workflowType || 'OrderPayment',
    })
  }

  return { log }
}

```


[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 order-payment/react/components/createOrderPaymentProvider.tsx from the order-payment VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, {
  FC,
  useContext,
  useCallback,
  createContext,
  useState,
  useMemo,
} from 'react'
import { OrderQueueContext, OrderForm } from '@vtex/order-manager'
import {
  OrderForm as CheckoutOrderForm,
  PaymentDataInput,
  PaymentSystem,
  InstallmentOption,
  AvailableAccount,
  Payment,
  PaymentInput,
  Totalizer,
} from '@vtex/checkout-types'

import { UseLogger } from '../utils/logger'

export const QueueStatus = {
  PENDING: 'Pending',
  FULFILLED: 'Fulfilled',
} as const

type ListenFunction = (event: any, callback: () => void) => () => void
interface QueueContext {
  enqueue: (task: () => Promise<CheckoutOrderForm>, id?: string) => any
  listen: ListenFunction
  isWaiting: (id: string) => boolean
}

interface OrderContext<O extends CheckoutOrderForm> {
  loading: boolean
  setOrderForm: (nextValue: Partial<CheckoutOrderForm>) => void
  error: any | undefined
  orderForm: O
}

type UseUpdateOrderFormPayment = () => {
  updateOrderFormPayment: (
    paymentData: PaymentDataInput,
    orderFormId?: string
  ) => Promise<CheckoutOrderForm>
}

interface CreateOrderPaymentProvider<O extends CheckoutOrderForm> {
  useLogger: UseLogger
  useOrderQueue: () => QueueContext
  useOrderForm: () => OrderContext<O>
  useUpdateOrderFormPayment: UseUpdateOrderFormPayment
  useQueueStatus: (listen: OrderQueueContext<OrderForm>['listen']) => any
}

interface PaymentContext {
  setPaymentField: (
    paymentField: Partial<PaymentInput>
  ) => Promise<{ success: boolean }>
  paymentSystems: PaymentSystem[]
  availableAccounts: AvailableAccount[]
  installmentOptions: InstallmentOption[]
  payment: Payment
  referenceValue: number
  value: number
  interestValue: number
  cardLastDigits: string
  setCardLastDigits: (cardDigits: string) => void
  paymentsValid: boolean
  setCardFormFilled: (filled: boolean) => void
  isFreePurchase: boolean
}

const SET_PAYMENT_TASK = 'SetPaymentTask'
const OrderPaymentContext = createContext<PaymentContext | undefined>(undefined)

export function createOrderPaymentProvider<T extends CheckoutOrderForm>({
  useLogger,
  useOrderQueue,
  useOrderForm,
  useUpdateOrderFormPayment,
  useQueueStatus,
}: CreateOrderPaymentProvider<T>) {
  const OrderPaymentProvider: FC = ({ children }) => {
    const { enqueue, listen } = useOrderQueue()
    const { orderForm, setOrderForm } = useOrderForm()
    const [cardLastDigits, setCardLastDigits] = useState('')
    const [cardFormFilled, setCardFormFilled] = useState(false)
    const queueStatusRef = useQueueStatus(listen)
    const { updateOrderFormPayment } = useUpdateOrderFormPayment()
    const { log } = useLogger()

    const {
      id,
      totalizers,
      paymentData: {
        paymentSystems,
        availableAccounts,
        installmentOptions,
        payments,
      },
    } = orderForm

    const referenceValue =
      totalizers?.reduce((total: number, totalizer: Totalizer) => {
        if (totalizer?.id === 'Tax' || totalizer?.id === 'interest') {
          return total
        }

        return total + (totalizer?.value ?? 0)
      }, 0) ?? 0

    const value =
      payments?.reduce(
        (total: number, payment: Payment) => total + (payment?.value ?? 0),
        0
      ) ?? 0

    const interestValue =
      payments?.reduce(
        (total: number, payment: Payment) =>
          total + ((payment?.value ?? 0) - (payment?.referenceValue ?? 0)),
        0
      ) ?? 0

    const payment = payments?.[0] ?? {}

    const isFreePurchase = !referenceValue && orderForm.items.length > 0

    const paymentsValid = useMemo(() => {
      if (isFreePurchase) {
        return true
      }

      if (!payments?.length) {
        return false
      }

      if (
        payments
          .map((p: Payment) => p.paymentSystem)
          .map((paymentSystem?: string | null) =>
            paymentSystems.find((ps: PaymentSystem) => ps.id === paymentSystem)
          )
          .some(
            (paymentSystem?: PaymentSystem) =>
              paymentSystem?.groupName === 'creditCardPaymentGroup'
          )
      ) {
        return (
          cardFormFilled &&
          payments.every((p: Payment) => p.installments != null)
        )
      }

      return true
    }, [cardFormFilled, isFreePurchase, paymentSystems, payments])

    const setOrderPayment = useCallback(
      async (paymentData: PaymentDataInput) => {
        try {
          const task = async () => {
            const newOrderForm = await updateOrderFormPayment(paymentData, id)

            return newOrderForm
          }

          const newOrderForm = await enqueue(task, SET_PAYMENT_TASK)

          if (queueStatusRef.current === QueueStatus.FULFILLED) {
            setOrderForm(newOrderForm)
          }

          return { success: true }
        } catch (err) {
          if (!err || err.code !== 'TASK_CANCELLED') {
            throw err
          }

          return { success: false }
        }
      },
      [enqueue, queueStatusRef, setOrderForm, updateOrderFormPayment, id]
    )

    const setPaymentField = useCallback(
      async (paymentField: Partial<PaymentInput>) => {
        const newPayment = {
          ...payment,
          ...paymentField,
        }

        const paymentStatusUpdated = await setOrderPayment({
          payments: [newPayment],
        })

        if (!paymentStatusUpdated.success) {
          log({
            type: 'Error',
            level: 'Critical',
            event: {
              paymentField,
              success: paymentStatusUpdated.success,
              orderFormId: id,
            },
            workflowInstance: 'payment-field-not-updated',
          })
        }

        return paymentStatusUpdated
      },
      [payment, setOrderPayment, log, id]
    )

    const contextValue = useMemo(
      () => ({
        setPaymentField,
        paymentSystems,
        installmentOptions,
        availableAccounts,
        payment,
        value,
        interestValue,
        referenceValue,
        cardLastDigits,
        setCardLastDigits,
        paymentsValid,
        setCardFormFilled,
        isFreePurchase,
      }),
      [
        setPaymentField,
        paymentSystems,
        installmentOptions,
        availableAccounts,
        payment,
        value,
        interestValue,
        referenceValue,
        cardLastDigits,
        paymentsValid,
        isFreePurchase,
      ]
    )

    return (
      <OrderPaymentContext.Provider value={contextValue}>
        {children}
      </OrderPaymentContext.Provider>
    )
  }

  return { OrderPaymentProvider }
}

export const useOrderPayment = () => {
  const context = useContext(OrderPaymentContext)

  if (context === undefined) {
    throw new Error(
      'useOrderPayment must be used within a OrderPaymentProvider'
    )
  }

  return context
}

```


[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 order-payment/react/__tests__/createOrderPaymentProvider.test.tsx from the order-payment VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { FC } from 'react'
import { renderHook, act } from '@testing-library/react-hooks'
import {
  useOrderForm,
  useOrderQueue,
  useQueueStatus,
  OrderQueueProvider,
} from '@vtex/order-manager'

import { mockOrderForm } from '../__fixtures__/orderForm'
import { OrderFormProvider } from '../__fixtures__/OrderFormProvider'
import {
  createOrderPaymentProvider,
  useOrderPayment,
} from '../components/createOrderPaymentProvider'
import { LogParams } from '../utils/logger'

const mockCashPayment = {
  payments: [
    {
      paymentSystem: '201',
      bin: null,
      accountId: null,
      tokenId: null,
      installments: 1,
      referenceValue: 230500,
      value: 230500,

      installmentsInterestRate: 0,
    },
  ],
}

const mockLog = jest.fn()

function useLogger() {
  const log = ({
    type,
    level,
    event,
    workflowType,
    workflowInstance,
  }: LogParams) => {
    mockLog({
      type,
      level,
      event,
      workflowType,
      workflowInstance,
    })
  }

  return { log }
}

const mockUseUpdateOrderFormPayment = jest.fn().mockResolvedValue(true)
const createWrapperOrderProviders = () => {
  function useUpdateOrderFormPayment() {
    return {
      updateOrderFormPayment: mockUseUpdateOrderFormPayment,
    }
  }

  const { OrderPaymentProvider } = createOrderPaymentProvider({
    useLogger,
    useOrderQueue,
    useOrderForm,
    useUpdateOrderFormPayment,
    useQueueStatus,
  })

  const Wrapper: FC = ({ children }) => {
    return (
      <OrderQueueProvider>
        <OrderFormProvider>
          <OrderPaymentProvider>{children}</OrderPaymentProvider>
        </OrderFormProvider>
      </OrderQueueProvider>
    )
  }

  return { Wrapper }
}

describe('OrderPayment', () => {
  it('should throw an error if theres no OrderPaymentProvider on the tree', () => {
    const {
      result: { error },
    } = renderHook(() => useOrderPayment())

    expect(error).not.toBeNull()
    expect(error.message).toEqual(
      'useOrderPayment must be used within a OrderPaymentProvider'
    )
    expect(mockUseUpdateOrderFormPayment).not.toHaveBeenCalled()
  })

  it('should get payment data from the current orderForm', () => {
    const { Wrapper } = createWrapperOrderProviders()

    const { result } = renderHook(() => useOrderPayment(), { wrapper: Wrapper })
    const { current } = result

    expect(current).not.toBeNull()
    expect(current.referenceValue).toEqual(mockOrderForm.value)
    expect(mockUseUpdateOrderFormPayment).not.toHaveBeenCalled()
  })

  it('should call function to update orderForm on the server if the payment data is updated', async () => {
    const { Wrapper } = createWrapperOrderProviders()

    const { result } = renderHook(() => useOrderPayment(), { wrapper: Wrapper })
    const { current } = result

    await act(async () => {
      const { success } = await current.setPaymentField(
        mockCashPayment.payments[0]
      )

      expect(success).toBeTruthy()
    })
    expect(mockUseUpdateOrderFormPayment).toHaveBeenCalled()
  })

  it('should log information when a payment cannot be updated', async () => {
    const { Wrapper } = createWrapperOrderProviders()

    const { result } = renderHook(() => useOrderPayment(), { wrapper: Wrapper })
    const { current } = result

    mockUseUpdateOrderFormPayment.mockRejectedValue({ code: 'TASK_CANCELLED' })

    await act(async () => {
      const { success } = await current.setPaymentField(
        mockCashPayment.payments[0]
      )

      expect(success).toBeFalsy()
    })
    expect(mockLog).toHaveBeenCalled()
    expect(mockUseUpdateOrderFormPayment).toHaveBeenCalled()
  })
})

```


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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.header.title": "ส่วนหัวของหน้า",
  "admin/editor.header.description": "คอมโพเนนต์ของส่วนหัวของหน้า",
  "admin/editor.header.logo.title": "โลโก้",
  "admin/editor.header.logo.image": "รูปภาพโลโก้",
  "admin/editor.header.link.url": "ลิงก์โลโก้",
  "admin/editor.header.show.searchbar.title": "แสดงแถบค้นหา",
  "admin/editor.header.show.login.title": "แสดงการเข้าสู่ระบบ",
  "store/header.search-placeholder": "ค้นหาผลิตถัณฑ์ แบรนด์...",
  "store/header.search-emptyPlaceholder": "ไม่พบข้อมูลที่ตรงกัน",
  "store/header.topMenu.minicart.icon.label": "รถเข็นของฉัน",
  "store/header.topMenu.login.icon.label": "ลงชื่อเข้าใช้",
  "store/header.search-cancel": "ยกเลิก"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.header.title": "ヘッダー",
  "admin/editor.header.description": "ヘッダーコンポーネント",
  "admin/editor.header.logo.title": "ロゴ",
  "admin/editor.header.logo.image": "ロゴ画像",
  "admin/editor.header.link.url": "ロゴリンク",
  "admin/editor.header.show.searchbar.title": "検索バーを表示",
  "admin/editor.header.show.login.title": "ログインを表示",
  "store/header.search-placeholder": "製品やブランドを検索…",
  "store/header.search-emptyPlaceholder": "一致しませんでした",
  "store/header.topMenu.minicart.icon.label": "マイカート",
  "store/header.topMenu.login.icon.label": "サインイン",
  "store/header.search-cancel": "キャンセル"
}
```


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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.header.title": "Ylätunniste",
  "admin/editor.header.description": "Otsikkokomponentti",
  "admin/editor.header.logo.title": "Logo",
  "admin/editor.header.logo.image": "Logo-kuva",
  "admin/editor.header.link.url": "Logo-linkki",
  "admin/editor.header.show.searchbar.title": "Näytä hakurivi",
  "admin/editor.header.show.login.title": "Näytä kirjautuminen",
  "store/header.search-placeholder": "Hae tuotteita, brändejä...",
  "store/header.search-emptyPlaceholder": "Tuloksia ei löytynyt",
  "store/header.topMenu.minicart.icon.label": "Oma ostoskori",
  "store/header.topMenu.login.icon.label": "Kirjaudu sisään",
  "store/header.search-cancel": "Peruuta"
}
```


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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.header.title": "Header",
  "admin/editor.header.description": "Komponen header",
  "admin/editor.header.logo.title": "Logo",
  "admin/editor.header.logo.image": "Gambar logo",
  "admin/editor.header.link.url": "Tautan logo",
  "admin/editor.header.show.searchbar.title": "Tampilkan Bilah Pencarian",
  "admin/editor.header.show.login.title": "Tampilkan Log Masuk",
  "store/header.search-placeholder": "Cari produk, merek...",
  "store/header.search-emptyPlaceholder": "Tidak ada yang cocok",
  "store/header.topMenu.minicart.icon.label": "Troli Saya",
  "store/header.topMenu.login.icon.label": "Masuk",
  "store/header.search-cancel": "Batalkan"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.header.title": "Cabeçalho",
  "admin/editor.header.description": "Componente de cabeçalho",
  "admin/editor.header.logo.title": "Logo",
  "admin/editor.header.logo.image": "Imagem da Logo",
  "admin/editor.header.link.url": "Link da Logo",
  "admin/editor.header.show.searchbar.title": "Mostrar Busca",
  "admin/editor.header.show.login.title": "Mostrar Login",
  "store/header.search-placeholder": "Busque por produtos, marcas...",
  "store/header.search-emptyPlaceholder": "Nenhum resultado encontrado",
  "store/header.topMenu.minicart.icon.label": "Meu Carrinho",
  "store/header.topMenu.login.icon.label": "Entrar",
  "store/header.search-cancel": "Cancelar"
}
```


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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.header.title": "Header",
  "admin/editor.header.description": "Header component",
  "admin/editor.header.logo.title": "Logo",
  "admin/editor.header.logo.image": "Logo image",
  "admin/editor.header.link.url": "Logo link",
  "admin/editor.header.show.searchbar.title": "Show SearchBar",
  "admin/editor.header.show.login.title": "Show Login",
  "store/header.search-placeholder": "Search for products, brands...",
  "store/header.search-emptyPlaceholder": "No matches found",
  "store/header.topMenu.minicart.icon.label": "My Cart",
  "store/header.topMenu.login.icon.label": "Sign in",
  "store/header.search-cancel": "Cancel"
}
```


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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.header.title": "Antet",
  "admin/editor.header.description": "Componentă antet",
  "admin/editor.header.logo.title": "Logo",
  "admin/editor.header.logo.image": "Imagine logo",
  "admin/editor.header.link.url": "Link logo",
  "admin/editor.header.show.searchbar.title": "Arată Bara de căutare",
  "admin/editor.header.show.login.title": "Arată Autentificarea",
  "store/header.search-placeholder": "Caută produse, mărci...",
  "store/header.search-emptyPlaceholder": "Nu s-a găsit niciun rezultat",
  "store/header.topMenu.minicart.icon.label": "Coșul meu",
  "store/header.topMenu.login.icon.label": "Autentificare",
  "store/header.search-cancel": "Anulează"
}
```


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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.header.title": "admin/editor.header.title",
  "admin/editor.header.description": "admin/editor.header.description",
  "admin/editor.header.logo.title": "admin/editor.header.logo.title",
  "admin/editor.header.logo.image": "admin/editor.header.logo.image",
  "admin/editor.header.link.url": "admin/editor.header.link.url",
  "admin/editor.header.show.searchbar.title": "admin/editor.header.show.searchbar.title",
  "admin/editor.header.show.login.title": "admin/editor.header.show.login.title",
  "store/header.search-placeholder": "store/header.search-placeholder",
  "store/header.search-emptyPlaceholder": "store/header.search-emptyPlaceholder",
  "store/header.topMenu.minicart.icon.label": "store/header.topMenu.minicart.icon.label",
  "store/header.topMenu.login.icon.label": "store/header.topMenu.login.icon.label",
  "store/header.search-cancel": "store/header.search-cancel"
}
```


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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.header.title": "헤더",
  "admin/editor.header.description": "헤더 구성 요소",
  "admin/editor.header.logo.title": "로고",
  "admin/editor.header.logo.image": "로고 이미지",
  "admin/editor.header.link.url": "로고 링크",
  "admin/editor.header.show.searchbar.title": "검색창 표시",
  "admin/editor.header.show.login.title": "로그인 표시",
  "store/header.search-placeholder": "제품, 브랜드 검색...",
  "store/header.search-emptyPlaceholder": "일치하는 항목을 찾을 수 없음",
  "store/header.topMenu.minicart.icon.label": "내 장바구니",
  "store/header.topMenu.login.icon.label": "로그인",
  "store/header.search-cancel": "취소"
}
```


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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.header.title": "Overskrift",
  "admin/editor.header.description": "Del av overskrift",
  "admin/editor.header.logo.title": "Logo",
  "admin/editor.header.logo.image": "Bilde av logo",
  "admin/editor.header.link.url": "Lenke til logo",
  "admin/editor.header.show.searchbar.title": "Vis søkefelt",
  "admin/editor.header.show.login.title": "Vis innlogging",
  "store/header.search-placeholder": "Søk etter produkter, merkevarer...",
  "store/header.search-emptyPlaceholder": "Ingen treff",
  "store/header.topMenu.minicart.icon.label": "Min handlekurv",
  "store/header.topMenu.login.icon.label": "Logg inn",
  "store/header.search-cancel": "Avbryt"
}
```


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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.header.title": "Overskrift",
  "admin/editor.header.description": "Overskrift komponent",
  "admin/editor.header.logo.title": "Logo",
  "admin/editor.header.logo.image": "Logobillede",
  "admin/editor.header.link.url": "Logolink",
  "admin/editor.header.show.searchbar.title": "Vis søgebar",
  "admin/editor.header.show.login.title": "Vis login",
  "store/header.search-placeholder": "Søg efter produkter, brands...",
  "store/header.search-emptyPlaceholder": "Ingen matches fundet",
  "store/header.topMenu.minicart.icon.label": "Min kurv",
  "store/header.topMenu.login.icon.label": "Log ind",
  "store/header.search-cancel": "Annuller"
}
```


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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.header.title": "Overskrift",
  "admin/editor.header.description": "Del av overskrift",
  "admin/editor.header.logo.title": "Logo",
  "admin/editor.header.logo.image": "Bilde av logo",
  "admin/editor.header.link.url": "Lenke til logo",
  "admin/editor.header.show.searchbar.title": "Vis søkefelt",
  "admin/editor.header.show.login.title": "Vis innlogging",
  "store/header.search-placeholder": "Søk etter produkter, merkevarer...",
  "store/header.search-emptyPlaceholder": "Ingen treff",
  "store/header.topMenu.minicart.icon.label": "Min handlekurv",
  "store/header.topMenu.login.icon.label": "Logg inn",
  "store/header.search-cancel": "Avbryt"
}
```


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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.header.title": "Cabecera",
  "admin/editor.header.description": "Componente de cabecera",
  "admin/editor.header.logo.title": "Logotipo",
  "admin/editor.header.logo.image": "Imagen del logotipo",
  "admin/editor.header.link.url": "Link del logotipo",
  "admin/editor.header.show.searchbar.title": "Mostrar Busca",
  "admin/editor.header.show.login.title": "Mostrar Login",
  "store/header.search-placeholder": "Búsqueda por productos, marcas...",
  "store/header.search-emptyPlaceholder": "Ningún resultado encontrado",
  "store/header.topMenu.minicart.icon.label": "Mi Cesta",
  "store/header.topMenu.login.icon.label": "Entrar",
  "store/header.search-cancel": "Cancelar"
}
```


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

[Assistant]
Here's the implementation:

```json
{
  "admin/editor.header.title": "الترويسة",
  "admin/editor.header.description": "مكون الترويسة",
  "admin/editor.header.logo.title": "الشعار",
  "admin/editor.header.logo.image": "صورة الشعار",
  "admin/editor.header.link.url": "رابط الشعار",
  "admin/editor.header.show.searchbar.title": "عرض شريط البحث",
  "admin/editor.header.show.login.title": "عرض تسجيل الدخول",
  "store/header.search-placeholder": "بحث عن المنتجات، العلامات...",
  "store/header.search-emptyPlaceholder": "لم يتم العثور على أي تطابق",
  "store/header.topMenu.minicart.icon.label": "عربتي",
  "store/header.topMenu.login.icon.label": "تسجيل الدخول",
  "store/header.search-cancel": "إلغاء"
}
```