[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/node/resolvers/menu.ts from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```typescript
import type { Menu, Args, ArgsUpload } from '../typings/custom'

const sortMenusByOrder = (menus: Menu[]) => {
  return menus.sort((menuA: Menu, menuB: Menu) => menuA.order - menuB.order)
}

const orderArray = (menuList: Menu[]) => {
  menuList.forEach((currentValue: Menu) => {
    if (!currentValue.menu || !currentValue.menu.length) return

    sortMenusByOrder(currentValue.menu)
  })

  menuList.forEach((item: Menu) => {
    if (item.menu) {
      item.menu.forEach((subitem: Menu) => {
        if (subitem.menu) {
          if (!subitem.menu.length) return
          sortMenusByOrder(subitem.menu)
        }
      })
    }
  })

  return sortMenusByOrder(menuList)
}

const convertToJson = (menuString: string) => {
  menuString = menuString.replace(/\s+/g, '')

  return `{${menuString.replace(
    /([a-zA-Z0-9-]+):([a-zA-Z0-9-]+)/g,
    '"$1":"$2"'
  )}}`
}

const replaceStyles = (menuStyle: Menu[]) => {
  menuStyle.forEach((firstMenu: Menu) => {
    if (firstMenu.styles) {
      firstMenu.styles = convertToJson(firstMenu.styles)
    }

    if (firstMenu.menu) {
      firstMenu.menu.forEach((secondMenu: Menu) => {
        if (secondMenu.styles) {
          secondMenu.styles = convertToJson(secondMenu.styles)
        }

        if (secondMenu.menu) {
          secondMenu.menu.forEach((thirdMenu: Menu) => {
            if (thirdMenu.styles) {
              thirdMenu.styles = convertToJson(thirdMenu.styles)
            }
          })
        }
      })
    }
  })
}

const filterDataDevice = (key: string, menuItems: Menu[]) => {
  let dataToFilter = [...menuItems]

  dataToFilter = dataToFilter.filter(
    (item) =>
      item[key as keyof Menu] === true || item[key as keyof Menu] === null
  )

  dataToFilter.forEach((subitem) => {
    subitem.menu = subitem.menu.filter(
      (sub) =>
        sub[key as keyof Menu] === true || sub[key as keyof Menu] === null
    )
    subitem.menu.forEach((thrditem) => {
      thrditem.menu &&
        (thrditem.menu = thrditem.menu.filter(
          (thrd) =>
            thrd[key as keyof Menu] === true || thrd[key as keyof Menu] === null
        ))
    })
  })

  if (!dataToFilter.length) dataToFilter = [...menuItems]

  return dataToFilter
}

export const menus = async (
  _: unknown,
  { isMobile }: { isMobile: boolean },
  ctx: Context
) => {
  const {
    clients: { vbase },
  } = ctx

  let menuItems: Menu[] = []

  try {
    menuItems = await vbase.getJSON<Menu[]>('menu', 'menuItems')
  } catch (err) {
    const errStr = err.toString()

    // If there are no menus, it is initialized empty
    if (errStr === 'Error: Request failed with status code 404') {
      await vbase.saveJSON('menu', 'menuItems', [])
    } else {
      throw err
    }
  }

  replaceStyles(menuItems)
  orderArray(menuItems)

  if (isMobile !== undefined) {
    if (isMobile) menuItems = filterDataDevice('mobile', menuItems)
    else menuItems = filterDataDevice('desktop', menuItems)
  }

  return menuItems
}

export const menu = async (
  _: unknown,
  { id }: { id: string },
  ctx: Context
) => {
  const menusId = await ctx.clients.vbase.getJSON<Menu[]>('menu', 'menuItems')
  const response = menusId.filter((menuId: Menu) => menuId.id === id)

  return response[0]
}

export const createMenu = async (
  _: unknown,
  { menuInput }: Args,
  { clients: { vbase } }: Context
) => {
  let menuItems: Menu[] = []

  // eslint-disable-next-line vtex/prefer-early-return
  if (menuInput.id) {
    try {
      menuItems = await vbase.getJSON<Menu[]>('menu', 'menuItems')
    } catch (err) {
      const errStr = err.toString()

      if (errStr !== 'Error: Request failed with status code 404') {
        throw err
      }
    }

    menuInput.order = menuItems.length + 1

    return vbase
      .saveJSON('menu', 'menuItems', [...menuItems, menuInput])
      .then(() => menuInput)
  }

  return 'Error creating the item'
}

export const uploadMenu = async (
  _: unknown,
  { menuData }: ArgsUpload,
  { clients: { vbase } }: Context
) => {
  const menuItems = await vbase.getJSON<Menu[]>('menu', 'menuItems')

  if (menuItems.length > 0) {
    menuItems.forEach((item) => menuData.push(item))
  }

  return vbase.saveJSON('menu', 'menuItems', menuData).then(() => menuData)
}

export const editMenu = async (
  _: unknown,
  { menuInput }: Args,
  { clients: { vbase } }: Context
) => {
  const menuEdit = await vbase.getJSON<Menu[]>('menu', 'menuItems')

  const newArray = orderArray([
    ...menuEdit.filter((menuItem: Menu) => menuItem.id !== menuInput.id),
    menuInput,
  ])

  return vbase.saveJSON('menu', 'menuItems', newArray).then(() => newArray)
}

export const deleteMenu = async (
  _: unknown,
  { id, idSecond, idThird }: { id: string; idSecond: string; idThird: string },
  { clients: { vbase } }: Context
) => {
  const menuDelete = await vbase.getJSON<Menu[]>('menu', 'menuItems')
  let deleteArray: Menu[] = []

  if (!id && !idSecond && !idThird) {
    deleteArray = menuDelete.filter(
      (itemArray: Menu) =>
        itemArray.id !== '' &&
        itemArray.id !== undefined &&
        itemArray.id !== null
    )
    const sortnewArray = deleteArray.sort((a, b) => a.order - b.order)
    let count = 1

    sortnewArray.map((as) => (as.order = count++))
    deleteArray = sortnewArray
  } else if (id && !idSecond && !idThird) {
    deleteArray = menuDelete.filter((itemArray: Menu) => itemArray.id !== id)
    const getMenuOrder = menuDelete.filter(
      (menuOrder: Menu) => menuOrder.id === id
    )

    for (let i = 0; i < menuDelete.length; i++) {
      const valueOrder = menuDelete[i].order

      if (menuDelete[i].order > getMenuOrder[0].order) {
        menuDelete[i].order = valueOrder - 1
      }
    }
  } else if (id && idSecond && !idThird) {
    deleteArray = menuDelete.filter((itemArray: Menu) => itemArray.id === id)
    const tempSecondArray = deleteArray[0].menu.filter(
      (i: Menu) => i.id !== idSecond
    )

    const getMenuOrder = deleteArray[0].menu.filter(
      (menuOrder: Menu) => menuOrder.id === idSecond
    )

    for (let i = 0; i < tempSecondArray.length; i++) {
      const valueOrder = tempSecondArray[i].order

      if (tempSecondArray[i].order > getMenuOrder[0].order) {
        tempSecondArray[i].order = valueOrder - 1
      }
    }

    deleteArray[0].menu = tempSecondArray

    menuDelete.forEach((itemDelete: Menu) => {
      if (itemDelete.id === deleteArray[0].id) {
        itemDelete.menu = deleteArray[0].menu
      }
    })

    deleteArray = menuDelete
  } else {
    deleteArray = menuDelete.filter((itemArray: Menu) => itemArray.id === id)
    const tempSecondArray = deleteArray[0].menu.filter(
      (seconItem: Menu) => seconItem.id === idSecond
    )

    const tempThirdArray = tempSecondArray[0].menu.filter(
      (thirdItem: Menu) => thirdItem.id !== idThird
    )

    const getMenuOrder = tempSecondArray[0].menu.filter(
      (menuOrder: Menu) => menuOrder.id === idThird
    )

    for (let i = 0; i < tempThirdArray.length; i++) {
      const valueOrder = tempThirdArray[i].order

      if (tempThirdArray[i].order > getMenuOrder[0].order) {
        tempThirdArray[i].order = valueOrder - 1
      }
    }

    tempSecondArray[0].menu = tempThirdArray

    menuDelete.forEach((itemDelete: Menu) => {
      if (itemDelete.id === deleteArray[0].id) {
        itemDelete.menu.forEach((subItemDelete: Menu) => {
          if (subItemDelete.id === idSecond) {
            subItemDelete.menu = tempSecondArray[0].menu
          }
        })
      }
    })

    deleteArray = menuDelete
  }

  return vbase
    .saveJSON('menu', 'menuItems', deleteArray)
    .then(() => deleteArray)
}

export const menuQueries = {
  menu,
  menus,
}

export const menuMutations = {
  createMenu,
  editMenu,
  deleteMenu,
  uploadMenu,
}

```


[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/node/resolvers/index.ts from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { menuQueries, menuMutations } from './menu'
import { settingsQueries, settingsMutations } from './settings'

export const resolvers = {
  Mutation: {
    ...menuMutations,
    ...settingsMutations,
  },
  Query: {
    ...menuQueries,
    ...settingsQueries,
  },
}

```


[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/Category/CategoryContainer.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable vtex/prefer-early-return */
import type { FC } from 'react'
import React, { useState, useEffect } from 'react'
import type { InjectedIntlProps } from 'react-intl'
import { useQuery, useMutation } from 'react-apollo'
import { injectIntl } from 'react-intl'
import { ButtonWithIcon } from 'vtex.styleguide'
import { ExportToCsv } from 'export-to-csv'
import CSVReader from 'react-csv-reader'
import { formatIOMessage } from 'vtex.native-types'

import IconDownload from '../icons/IconDownload'
import IconUpload from '../icons/IconUpload'
import { MessagesBackupData } from '../shared'
import type {
  MenusResponse,
  MenuItemSave,
  MenuItem,
  ShowAlertFunction,
  DataMenu,
} from '../shared'
import GET_MENUS from '../graphql/queries/getMenus.graphql'
import UPLOAD from '../graphql/mutations/uploadData.graphql'
import styles from './category.css'

interface PropsCategory {
  setDataItems: (dataItems: { menus: DataMenu[] }) => void
  showAlert: ShowAlertFunction
  dataMenu: {
    menus: MenuItem[]
  }
}

const CategoryContainer: FC<InjectedIntlProps & PropsCategory> = (props) => {
  const options = {
    fieldSeparator: ',',
    quoteStrings: '"',
    decimalSeparator: '.',
    showLabels: false,
    showTitle: false,
    useTextFile: false,
    useBom: false,
    useKeysAsHeaders: false,
  }

  const [showButtonDownload, setShowButtonDownload] = useState(true)

  const { data, refetch } = useQuery<MenusResponse>(GET_MENUS, {
    fetchPolicy: 'no-cache',
  })

  const [uploadData, { data: dataSaved }] = useMutation(UPLOAD, {
    fetchPolicy: 'no-cache',
  })

  if (props.dataMenu.menus) {
    if (!props.dataMenu.menus.length && showButtonDownload) {
      setShowButtonDownload(false)
    }
  }

  useEffect(() => {
    if (data?.menus.length) setShowButtonDownload(true)
    else setShowButtonDownload(false)
  }, [data])

  useEffect(() => {
    // eslint-disable-next-line vtex/prefer-early-return
    if (dataSaved) {
      props.setDataItems({ menus: dataSaved.uploadMenu })
      setShowButtonDownload(true)
      props.showAlert(
        true,
        formatIOMessage({
          id: MessagesBackupData.uploadAlert.id,
          intl: props.intl,
        }).toString(),
        { deleteMenu: [] }
      )
      window.location.reload()
    }
  }, [dataSaved]) // eslint-disable-line react-hooks/exhaustive-deps

  const downloadData = () => {
    refetch()
    if (data?.menus.length) {
      setShowButtonDownload(true)
      const dataToSave: MenuItemSave[] = [...data.menus]

      dataToSave.forEach((item) => {
        if (item.menu?.length) {
          item.menu = JSON.stringify(item.menu)
        }

        if (item.styles !== '') {
          item.styles = item.styles.replace(/[{}"]/g, '')
        }
      })

      const csvExporter = new ExportToCsv(options)

      csvExporter.generateCsv(dataToSave)
    } else {
      setShowButtonDownload(false)
    }
  }

  return (
    <div className="flex">
      <div className="mr3">
        {showButtonDownload && (
          <div className={styles.tooltipDownload}>
            <ButtonWithIcon
              icon={<IconDownload />}
              variation="secondary"
              onClick={() => downloadData()}
            >
              <span className={styles.tooltiptext}>
                {formatIOMessage({
                  id: MessagesBackupData.download.id,
                  intl: props.intl,
                }).toString()}
              </span>
            </ButtonWithIcon>
          </div>
        )}
      </div>
      <div>
        <CSVReader
          accept=".csv, text/csv"
          inputStyle={{ display: 'none' }}
          onFileLoaded={(dataCsv) => {
            let allowSave = true

            if (dataCsv.length) {
              const DataUpload: DataMenu[] = []

              dataCsv.forEach((x) => {
                if (x.length > 1) {
                  const findInData = props.dataMenu.menus.filter(
                    (item) => item.id === x[0]
                  )

                  if (findInData.length <= 0) {
                    DataUpload.push({
                      id: x[0],
                      name: x[1],
                      icon: x[2],
                      slug: x[3],
                      styles: x[4],
                      display: x[5] === 'TRUE',
                      enableSty: x[6] === 'TRUE',
                      order: parseInt(x[7], 10),
                      menu: x[10] === '' ? [] : JSON.parse(x[10]),
                    })
                  } else {
                    allowSave = false
                    props.showAlert(
                      true,
                      formatIOMessage({
                        id: MessagesBackupData.duplicateData.id,
                        intl: props.intl,
                      }).toString(),
                      { deleteMenu: [] },
                      'warning'
                    )
                  }
                }
              })
              if (allowSave) {
                uploadData({
                  variables: {
                    uploadData: DataUpload,
                  },
                })
                refetch()
              }
            }

            // eslint-disable-next-line prettier/prettier
            ;(
              document.getElementById(
                'react-csv-reader-input'
              ) as HTMLInputElement
            ).value = ''
          }}
        />
        {!showButtonDownload ? (
          <div className={styles.tooltipDownload} id={styles.upload}>
            <ButtonWithIcon
              icon={<IconUpload />}
              variation="secondary"
              onClick={() => {
                document.getElementById('react-csv-reader-input')?.click()
              }}
            >
              <span className={styles.tooltiptext}>
                {formatIOMessage({
                  id: MessagesBackupData.upload.id,
                  intl: props.intl,
                }).toString()}
              </span>
            </ButtonWithIcon>
          </div>
        ) : (
          <div />
        )}
      </div>
    </div>
  )
}

export default injectIntl(CategoryContainer)

```


[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/Category/category.css from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```css
.tooltipDownload:hover .tooltiptext {
  display: block;
}

.tooltiptext {
  display: none;
  text-transform: lowercase;
}

#upload:hover svg g {
  fill: #dce8f7 !important;
}

```


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

[User] Show me the implementation of mega-menu/react/Category/ThirdLevelContainer.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React, { useEffect, useState } from 'react'
import { Card, Dropdown } from 'vtex.styleguide'
import type { InjectedIntlProps } from 'react-intl'
import { injectIntl } from 'react-intl'
import { formatIOMessage } from 'vtex.native-types'

import type { DataMenu } from '../shared'
import { useDataMenu, messageThirdLevel } from '../shared'
import NewButtonComponent from './Components/NewButtonComponent'
import SearchComponent from './Components/SearchComponent'
import TableComponent from './Components/TableComponent'

interface TempArrayType {
  id: string
  label: string
  menu?: DataMenu[]
  value: string
}

interface TypeLevel {
  value: string
  label: string
  id: string
}

const messages = messageThirdLevel

const ThirdLevelContainer: FC<InjectedIntlProps> = ({ intl }) => {
  const { dataMenu, showAlert, updateData, loading } = useDataMenu()

  const [level1, setLevel1] = useState('')
  const [level2, setLevel2] = useState('')
  const [idFirstlvl, setIdFirstlvl] = useState('')
  const [idSecondlvl, setIdSecondlvl] = useState('')
  const [secondLevel, setSecondLevel] = useState<TempArrayType[]>([])
  const [thirdLevel, setThirdLevel] = useState<DataMenu[]>([])
  const [dataMenuFilter, setdataMenuFilter] = useState<DataMenu[]>([])
  const [dataMainMenu, setDataMainMenu] = useState<DataMenu[]>([])
  let dataMenus: DataMenu[] = []

  dataMenus = dataMenu
  const firstLevel: TypeLevel[] = []

  useEffect(() => {
    if (!thirdLevel.length) return

    dataMenus.forEach((i: DataMenu) => {
      if (i.id === idFirstlvl) {
        if (i.menu) {
          const tempDelete = i.menu.filter(
            (j: DataMenu) => j.id === idSecondlvl
          )

          if (tempDelete.length) {
            setThirdLevel(tempDelete[0].menu ? tempDelete[0].menu : [])
          }
        }
      }
    })
  }, [dataMenus]) // eslint-disable-line react-hooks/exhaustive-deps

  if (dataMenus) {
    dataMenus.forEach((menuValue: DataMenu) => {
      const bodyLevel1 = {
        value: menuValue.name,
        label: menuValue.name,
        id: menuValue.id,
      }

      firstLevel.push(bodyLevel1)
    })
  }

  const getValueMenu = (data: DataMenu[], idName: string) => {
    const getSubMenu = data.filter(
      (subMenuItem: DataMenu) => subMenuItem.name === idName
    )

    setDataMainMenu(data)

    const tempArray: TempArrayType[] = []

    if (getSubMenu[0].menu) {
      getSubMenu[0].menu.forEach((menuItem: DataMenu) => {
        const bodyLevel = {
          value: menuItem.name,
          label: menuItem.name,
          id: menuItem.id,
          menu: menuItem.menu,
        }

        tempArray.push(bodyLevel)
      })
    }

    return tempArray
  }

  const onChangeLevel1 = (menu: string) => {
    setLevel1(menu)
    setThirdLevel([])
    setLevel2('')
    localStorage.setItem('idFirstlvl', menu)

    const idFirstLevel = firstLevel.find(
      (firstMenu: TypeLevel) => firstMenu.value === menu
    )

    if (idFirstLevel) {
      setIdFirstlvl(idFirstLevel.id)
      localStorage.setItem('idlvl1', idFirstLevel.id)
      setIdSecondlvl('')
    }

    setSecondLevel(getValueMenu(dataMenus, menu))
  }

  const onChangeLevel2 = (submenu: string) => {
    let arraySL: DataMenu[] = []

    setThirdLevel([])

    localStorage.setItem('idSecondlvl', submenu)

    setLevel2(submenu)

    const idSecondLevel = secondLevel.find(
      (menuSecond: TypeLevel) => menuSecond.value === submenu
    )

    const arrayFL = dataMenus.filter(
      (flMenu: DataMenu) =>
        flMenu.name === (level1 || localStorage.getItem('idFirstlvl'))
    )

    if (idSecondLevel) {
      localStorage.setItem('idlvl2', idSecondLevel.id)
      setIdSecondlvl(idSecondLevel.id)
    } else if (localStorage.getItem('idlvl2')) {
      setIdSecondlvl(localStorage.getItem('idlvl2') ?? '')
    }

    if (arrayFL[0].menu) {
      arraySL = arrayFL[0].menu.filter((i: DataMenu) => i.name === submenu)
    }

    if (arraySL[0]) {
      if (arraySL[0].menu) {
        arraySL[0].menu.forEach((i: DataMenu) => {
          i.firstLevel = idFirstlvl
          i.secondLevel = idSecondlvl
        })
        setThirdLevel(arraySL[0].menu)
      }
    } else {
      setThirdLevel([])
    }
  }

  const responseFilter = (filterArray: DataMenu[]) => {
    setdataMenuFilter(filterArray)
  }

  if (!level1 && !level2) {
    const idFirstLocal = localStorage.getItem('idFirstlvl')
    const idSecondLocal = localStorage.getItem('idSecondlvl')

    if (idFirstLocal && idSecondLocal) {
      onChangeLevel1(idFirstLocal)
      onChangeLevel2(idSecondLocal)
    }
  }

  const secondSearch = formatIOMessage({
    id: messages.thirdSearch.id,
    intl,
  }).toString()

  const titleBtnNew = formatIOMessage({
    id: messages.newButton.id,
    intl,
  }).toString()

  return (
    <div className="mt8">
      <div className="flex">
        <div className="mr5 w-50">
          <Card>
            <div className="mb5 pr4 pl4">
              <Dropdown
                label={formatIOMessage({
                  id: messages.dropdownSecondLevel.id,
                  intl,
                })}
                options={firstLevel}
                value={level1}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                  onChangeLevel1(e.target.value)
                }}
              />
            </div>
          </Card>
        </div>
        <div className="ml5 w-50">
          <Card>
            <div className="mb5 pr4 pl4">
              <Dropdown
                label={formatIOMessage({
                  id: messages.dropDownThird.id,
                  intl,
                })}
                options={secondLevel}
                value={level2}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
                  onChangeLevel2(e.target.value)
                }}
              />
            </div>
          </Card>
        </div>
      </div>
      <div className="mt5">
        <Card>
          <div className="containerTableCat">
            <div className="flex">
              <div className="w-60 mr12">
                <SearchComponent
                  placeholder={secondSearch}
                  dataItems={thirdLevel}
                  responseFilter={responseFilter}
                />
              </div>
              <div className="w-40 ml10">
                <NewButtonComponent
                  obj={{
                    level: 'thirdLevel',
                    id: idFirstlvl,
                    secondLevel: idSecondlvl,
                    namebutton: titleBtnNew,
                  }}
                />
              </div>
            </div>
            <div>
              <TableComponent
                dataMenu={
                  dataMenuFilter.length === 0 ? thirdLevel : dataMenuFilter
                }
                level="thirdLevel"
                showAlert={showAlert}
                updateData={updateData}
                idLevels={{ idFirstlvl, idSecondlvl }}
                mainData={dataMainMenu}
                loading={loading}
                titleColumn={{
                  name: formatIOMessage({
                    id: messages.firstColumn.id,
                    intl,
                  }).toString(),
                  slug: formatIOMessage({
                    id: messages.secondColumn.id,
                    intl,
                  }).toString(),
                  icon: formatIOMessage({
                    id: messages.thirdColumn.id,
                    intl,
                  }).toString(),
                  action: formatIOMessage({
                    id: messages.fourColumn.id,
                    intl,
                  }).toString(),
                  visibility: formatIOMessage({
                    id: messages.fiveColumn.id,
                    intl,
                  }).toString(),
                  emptyTitle: formatIOMessage({
                    id: messages.emptyTitle.id,
                    intl,
                  }).toString(),
                  empty: formatIOMessage({
                    id: messages.empty.id,
                    intl,
                  }).toString(),
                  modalTitle: formatIOMessage({
                    id: messages.titleModal.id,
                    intl,
                  }).toString(),
                  modalBody: formatIOMessage({
                    id: messages.bodyModal.id,
                    intl,
                  }).toString(),
                  cancel: formatIOMessage({
                    id: messages.btnCancelModal.id,
                    intl,
                  }).toString(),
                  confirm: formatIOMessage({
                    id: messages.btnRemoveModal.id,
                    intl,
                  }).toString(),
                  loading: formatIOMessage({
                    id: messages.loading.id,
                    intl,
                  }).toString(),
                  deleteConfirm: formatIOMessage({
                    id: messages.deleteItem.id,
                    intl,
                  }).toString(),
                }}
              />
            </div>
          </div>
        </Card>
      </div>
    </div>
  )
}

export default injectIntl(ThirdLevelContainer)

```


[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/Category/SettingsMenu.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { InjectedIntlProps } from 'react-intl'
import type { FC } from 'react'
import React, { useState, useEffect } from 'react'
import { injectIntl } from 'react-intl'
import { formatIOMessage } from 'vtex.native-types'
import { ModalDialog, Toggle, Spinner } from 'vtex.styleguide'
import { useQuery, useMutation } from 'react-apollo'
import { useRuntime } from 'vtex.render-runtime'

import { messageSettings } from '../shared'
import GET_SETTINGS from '../graphql/queries/getSettings.graphql'
import CREATE_EDIT_SETTINGS from '../graphql/mutations/createEditSettings.graphql'

interface SettingsMenuProps {
  showSettings: boolean
  setShowSettings: (v: boolean) => void
}

const messages = messageSettings

const SettingsMenu: FC<SettingsMenuProps & InjectedIntlProps> = (props) => {
  const [orientation, setOrientation] = useState(true)
  const { loading, data } = useQuery(GET_SETTINGS, {
    fetchPolicy: 'no-cache',
  })

  const { account } = useRuntime()

  const [settingsInput, { data: dataSettings }] = useMutation(
    CREATE_EDIT_SETTINGS,
    {
      fetchPolicy: 'no-cache',
    }
  )

  const addSettings = () => {
    settingsInput({
      variables: {
        settingsInput: {
          idMenu: account,
          orientation: orientation ? 'horizontal' : 'vertical',
        },
      },
    })
  }

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

  useEffect(() => {
    if (dataSettings) {
      props.setShowSettings(!props.showSettings)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dataSettings])

  const settingsCaution = formatIOMessage({
    id: messages.caution.id,
    intl: props.intl,
  }).toString()

  const settingsOrientationHV = formatIOMessage({
    id: messages.orientationHV.id,
    intl: props.intl,
  }).toString()

  return (
    <ModalDialog
      centered
      loading={false}
      confirmation={{
        label: 'Confirm',
        isDangerous: true,
        onClick: () => addSettings(),
      }}
      cancelation={{
        label: 'Close',
        onClick: () => props.setShowSettings(!props.showSettings),
      }}
      isOpen
      onClose={() => props.setShowSettings(!props.showSettings)}
    >
      <div className="">
        <p>{settingsCaution}</p>
        {!loading ? (
          <div>
            <p className="mt7">{settingsOrientationHV}</p>
            <Toggle
              label={orientation ? 'Horizontal' : 'Vertical'}
              checked={orientation}
              id="orientation"
              onChange={() => setOrientation(!orientation)}
            />
          </div>
        ) : (
          <div className="flex justify-center">
            <Spinner />
          </div>
        )}
      </div>
    </ModalDialog>
  )
}

export default injectIntl(SettingsMenu)

```


[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/Category/SecondLevelContainer.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React, { useState, useEffect } from 'react'
import { Card, Dropdown } from 'vtex.styleguide'
import type { InjectedIntlProps } from 'react-intl'
import { injectIntl } from 'react-intl'
import { formatIOMessage } from 'vtex.native-types'

import TableComponent from './Components/TableComponent'
import NewButtonComponent from './Components/NewButtonComponent'
import SearchComponent from './Components/SearchComponent'
import type { DataMenu } from '../shared'
import { useDataMenu, messageSecondLevel } from '../shared'

interface OptionsBody {
  value: string
  label: string
  id: string
}

const messages = messageSecondLevel

const SecondLevelContainer: FC<InjectedIntlProps> = ({ intl }) => {
  const { dataMenu, showAlert, updateData, loading } = useDataMenu()

  const [dataMenuSel, setDataMenuSel] = useState<DataMenu[]>([])
  const [dataMenuFilter, setdataMenuFilter] = useState<DataMenu[]>([])
  const [dataMainMenu, setDataMainMenu] = useState<DataMenu[]>([])
  const [idFirstLevel, setidFirstLevel] = useState('')
  const [dataOptions, setdataOptions] = useState('')

  const dataMenus = dataMenu
  const options: OptionsBody[] = []
  const tempDelete: DataMenu[] = []

  const onChangeDropdown = (menu: string) => {
    setdataOptions(menu)

    const getSubMenu = dataMenus.filter(
      (secondMenu: DataMenu) => secondMenu.name === menu
    )

    localStorage.setItem('idFirstLevel', getSubMenu[0].id)

    setDataMainMenu(getSubMenu)

    setidFirstLevel(getSubMenu[0].id)
    if (getSubMenu[0].menu) {
      getSubMenu[0].menu.map((m: DataMenu) => (m.firstLevel = getSubMenu[0].id))
      setDataMenuSel(getSubMenu[0].menu)
    } else {
      setDataMenuSel([])
    }
  }

  if (!idFirstLevel && localStorage.getItem('idFirstLevel')) {
    const valueIdTemp = localStorage.getItem('idFirstLevel')

    if (valueIdTemp) {
      const secondLevelLocal = dataMenus.filter(
        (dm: DataMenu) => dm.id === valueIdTemp
      )

      if (secondLevelLocal[0]) onChangeDropdown(secondLevelLocal[0].name)
    }
  }

  const compareItems = dataMenus.filter(
    (item: DataMenu) => item.id === idFirstLevel
  )

  if (dataMenuSel.length > 0) {
    if (JSON.stringify(compareItems[0].menu) !== JSON.stringify(dataMenuSel)) {
      setDataMenuSel([])
    }
  }

  useEffect(() => {
    if (!dataMenuSel.length) return

    dataMenuSel.forEach((i: DataMenu) => {
      const firstDataMenu = dataMenus[0].menu

      if (!firstDataMenu) {
        return
      }

      firstDataMenu.forEach((j: DataMenu) => {
        if (i.id === j.id) {
          tempDelete.push(i)
        }
      })
    })

    setDataMenuSel(tempDelete)
  }, [dataMenus]) // eslint-disable-line react-hooks/exhaustive-deps

  if (dataMenus) {
    dataMenus.forEach((cat: DataMenu) => {
      const body = { value: cat.name, label: cat.name, id: cat.id }

      options.push(body)
    })
  }

  if (idFirstLevel && dataMenuSel.length === 0) {
    const secondData = dataMenus.filter(
      (secondItem: DataMenu) => secondItem.id === idFirstLevel
    )

    const responseData = secondData[0].menu ? secondData[0].menu : []

    if (responseData.length > 0) {
      setDataMenuSel(responseData)
    }
  }

  const responseFilter = (filterArray: DataMenu[]) => {
    setdataMenuFilter(filterArray)
  }

  const secondSearch = formatIOMessage({
    id: messages.secondSearch.id,
    intl,
  }).toString()

  const titleBtnNew = formatIOMessage({
    id: messages.newButton.id,
    intl,
  }).toString()

  return (
    <div className="mt8">
      <Card>
        <div className="mb5">
          <Dropdown
            label={formatIOMessage({
              id: messages.dropdownSecondLevel.id,
              intl,
            })}
            options={options}
            value={dataOptions}
            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
              onChangeDropdown(e.target.value)
            }}
          />
        </div>
      </Card>
      <div className="mt5">
        <Card>
          <div className="containerTableCat">
            <div className="flex">
              <div className="w-60 mr12">
                <SearchComponent
                  placeholder={secondSearch}
                  dataItems={dataMenuSel}
                  responseFilter={responseFilter}
                />
              </div>
              <div className="w-40 ml10">
                <NewButtonComponent
                  obj={{
                    level: 'secondLevel',
                    id: idFirstLevel,
                    namebutton: titleBtnNew,
                  }}
                />
              </div>
            </div>
            <div>
              <TableComponent
                dataMenu={
                  dataMenuFilter.length === 0 ? dataMenuSel : dataMenuFilter
                }
                level="secondLevel"
                showAlert={showAlert}
                updateData={updateData}
                idLevels={{ idFirstlvl: idFirstLevel }}
                mainData={dataMainMenu}
                loading={loading}
                titleColumn={{
                  name: formatIOMessage({
                    id: messages.firstColumn.id,
                    intl,
                  }).toString(),
                  slug: formatIOMessage({
                    id: messages.secondColumn.id,
                    intl,
                  }).toString(),
                  icon: formatIOMessage({
                    id: messages.thirdColumn.id,
                    intl,
                  }).toString(),
                  action: formatIOMessage({
                    id: messages.fourColumn.id,
                    intl,
                  }).toString(),
                  visibility: formatIOMessage({
                    id: messages.fiveColumn.id,
                    intl,
                  }).toString(),
                  emptyTitle: formatIOMessage({
                    id: messages.emptyTitle.id,
                    intl,
                  }).toString(),
                  empty: formatIOMessage({
                    id: messages.empty.id,
                    intl,
                  }).toString(),
                  modalTitle: formatIOMessage({
                    id: messages.titleModal.id,
                    intl,
                  }).toString(),
                  modalBody: formatIOMessage({
                    id: messages.bodyModal.id,
                    intl,
                  }).toString(),
                  cancel: formatIOMessage({
                    id: messages.btnCancelModal.id,
                    intl,
                  }).toString(),
                  confirm: formatIOMessage({
                    id: messages.btnRemoveModal.id,
                    intl,
                  }).toString(),
                  loading: formatIOMessage({
                    id: messages.loading.id,
                    intl,
                  }).toString(),
                  deleteConfirm: formatIOMessage({
                    id: messages.deleteItem.id,
                    intl,
                  }).toString(),
                }}
              />
            </div>
          </div>
        </Card>
      </div>
    </div>
  )
}

export default injectIntl(SecondLevelContainer)

```


[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/Category/FirstLevelContainer.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React, { useState } from 'react'
import { Card } from 'vtex.styleguide'
import type { InjectedIntlProps } from 'react-intl'
import { injectIntl } from 'react-intl'
import { formatIOMessage } from 'vtex.native-types'

import type { DataMenu } from '../shared'
import { useDataMenu, messagesFirstLevel } from '../shared'
import NewButtonComponent from './Components/NewButtonComponent'
import SearchComponent from './Components/SearchComponent'
import TableComponent from './Components/TableComponent'

const messages = messagesFirstLevel

const FirsLevelContainer: FC<InjectedIntlProps> = ({ intl }) => {
  const { dataMenu, showAlert, updateData, loading } = useDataMenu()
  const [dataMenuFilter, setDataMenuFilter] = useState<DataMenu[]>(dataMenu)

  const responseFilter = (filterArray: DataMenu[]) => {
    setDataMenuFilter(dataMenu)
    updateData(filterArray, 'search')
  }

  const placeholderTitle = formatIOMessage({
    id: messages.firstLevelTab.id,
    intl,
  }).toString()

  const titleBtnNew = formatIOMessage({
    id: messages.newButton.id,
    intl,
  }).toString()

  return (
    <div className="mt8">
      <div>
        <Card>
          <div className="containerTableCat">
            <div className="flex">
              <div className="w-60 mr12">
                <SearchComponent
                  placeholder={placeholderTitle}
                  dataItems={dataMenuFilter}
                  responseFilter={responseFilter}
                />
              </div>
              <div className="w-40 ml10">
                <NewButtonComponent
                  obj={{ level: 'firstLevel', namebutton: titleBtnNew }}
                />
              </div>
            </div>
            <div>
              <TableComponent
                dataMenu={dataMenu}
                level="firstLevel"
                showAlert={showAlert}
                updateData={updateData}
                mainData={[]}
                loading={loading}
                titleColumn={{
                  name: formatIOMessage({
                    id: messages.firstColumn.id,
                    intl,
                  }).toString(),
                  slug: formatIOMessage({
                    id: messages.secondColumn.id,
                    intl,
                  }).toString(),
                  icon: formatIOMessage({
                    id: messages.thirdColumn.id,
                    intl,
                  }).toString(),
                  action: formatIOMessage({
                    id: messages.fourColumn.id,
                    intl,
                  }).toString(),
                  visibility: formatIOMessage({
                    id: messages.fiveColumn.id,
                    intl,
                  }).toString(),
                  emptyTitle: formatIOMessage({
                    id: messages.emptyTitle.id,
                    intl,
                  }).toString(),
                  empty: formatIOMessage({
                    id: messages.empty.id,
                    intl,
                  }).toString(),
                  modalTitle: formatIOMessage({
                    id: messages.titleModal.id,
                    intl,
                  }).toString(),
                  modalBody: formatIOMessage({
                    id: messages.bodyModal.id,
                    intl,
                  }).toString(),
                  cancel: formatIOMessage({
                    id: messages.btnCancelModal.id,
                    intl,
                  }).toString(),
                  confirm: formatIOMessage({
                    id: messages.btnRemoveModal.id,
                    intl,
                  }).toString(),
                  loading: formatIOMessage({
                    id: messages.loading.id,
                    intl,
                  }).toString(),
                  deleteConfirm: formatIOMessage({
                    id: messages.deleteItem.id,
                    intl,
                  }).toString(),
                }}
              />
            </div>
          </div>
        </Card>
      </div>
    </div>
  )
}

export default injectIntl(FirsLevelContainer)

```


[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/typings/files.d.ts from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```typescript
declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'
declare module '*.gql'
declare module '*.css'
declare module '*.graphql'

```


[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/typings/global.d.ts from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable @typescript-eslint/ban-types */
import type { FunctionComponent } from 'react'

declare global {
  interface StorefrontFunctionComponent<P = {}> extends FunctionComponent<P> {
    schema?: object
    getSchema?(props?: P): object
  }

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

  interface StorefrontElement extends ReactElement {
    schema?: object
    getSchema?(props: P): object
  }
}

```


[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/typings/vtex.styleguide.d.ts from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```typescript
/* eslint-disable @typescript-eslint/no-explicit-any */

import type PropTypes from 'prop-types'
import type React from 'react'
import 'vtex.styleguide'

declare const propTypes: any
declare const Progress: React.FC<PropTypes.InferProps<typeof propTypes>>

declare module 'vtex.styleguide' {
  export const Button: React.FC<PropTypes.InferProps<any>>
  export const Card: React.FC<PropTypes.InferProps<any>>
  export const Checkbox: React.FC<PropTypes.InferProps<any>>
  export const Input: React.FC<PropTypes.InferProps<any>>
  export const Tag: React.FC<PropTypes.InferProps<any>>
  export const Alert: React.FC<PropTypes.InferProps<any>>
  export const Layout: React.FC<PropTypes.InferProps<any>>
  export const PageHeader: React.FC<PropTypes.InferProps<any>>
  export const Dropdown: React.FC<PropTypes.InferProps<any>>
  export const ButtonWithIcon: React.FC<PropTypes.InferProps<any>>
  export const InputSearch: React.FC<PropTypes.InferProps<any>>
  export const Table: React.FC<PropTypes.InferProps<any>>
  export const Toggle: React.FC<PropTypes.InferProps<any>>
  export const PageBlock: React.FC<PropTypes.InferProps<any>>
  export const Tabs: React.FC<PropTypes.InferProps<any>>
  export const Tab: React.FC<PropTypes.InferProps<any>>
  export const Collapsible: React.FC<PropTypes.InferProps<any>>
  export const Textarea: React.FC<PropTypes.InferProps<any>>
  export const Spinner: React.FC<PropTypes.InferProps<any>>
  export const ModalDialog: React.FC<PropTypes.InferProps<any>>
  export const Modal: React.FC<PropTypes.InferProps<any>>
  export const EmptyState: React.FC<PropTypes.InferProps<any>>
  /* eslint-disable @typescript-eslint/naming-convention */
  export const EXPERIMENTAL_Select: React.FC<PropTypes.InferProps<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 mega-menu/react/shared/messages.ts from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { defineMessages } from 'react-intl'

export const messagesForm = defineMessages({
  titleForm: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.titleForm',
  },
  backBtnForm: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.backBtnForm',
  },
  subTitleForm: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.subTitleForm',
  },
  infoForm: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.infoForm',
  },
  input1Form: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.input1Form',
  },
  input2Form: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.input2Form',
  },
  input3Form: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.input3Form',
  },
  input4Form: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.input4Form',
  },
  titleSubBlock: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.titleSubBlock',
  },
  check1Block: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.check1Block',
  },
  subCheck1Block: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.subCheck1Block',
  },
  subCheck2Block: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.subCheck2Block',
  },
  btnSaveForm: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.btnSaveForm',
  },
  infoFormTitle: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.infoFormTitle',
  },
  infoFormSubtitle: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.infoFormSubtitle',
  },
  infoForm2Title: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.infoForm2Title',
  },
  infoForm2Subtitle: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.infoForm2Subtitle',
  },
  loading: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.loading',
  },
  tooltip: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.tooltip',
  },
  tooltip2: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.tooltip2',
  },
  tooltip3: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.tooltip3',
  },
  newItemFirst: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.newItemFirst',
  },
  newItemSecond: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.newItemSecond',
  },
  newItemThird: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.newItemThird',
  },
  validateName: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.validateName',
  },
  validateSlug: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.validateSlug',
  },
  createItem: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.createItem',
  },
  editItem: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.editItem',
  },
})

export const messagesFirstLevel = defineMessages({
  firstLevelTab: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.firstSearch',
  },
  newButton: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.newButton',
  },
  firstColumn: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.firstColumn',
  },
  secondColumn: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.secondColumn',
  },
  thirdColumn: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.thirdColumn',
  },
  fourColumn: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.fourColumn',
  },
  fiveColumn: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.fiveColumn',
  },
  emptyTitle: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.emptyTitle',
  },
  empty: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.empty',
  },
  titleModal: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.titleModal',
  },
  bodyModal: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.bodyModal',
  },
  btnCancelModal: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.btnCancelModal',
  },
  btnRemoveModal: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.btnRemoveModal',
  },
  loading: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.loading',
  },
  deleteItem: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.deleteItem',
  },
})

export const messageSecondLevel = defineMessages({
  dropdownSecondLevel: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.dropdownSecondLevel',
  },
  secondSearch: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.secondSearch',
  },
  newButton: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.newButton',
  },
  firstColumn: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.firstColumn',
  },
  secondColumn: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.secondColumn',
  },
  thirdColumn: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.thirdColumn',
  },
  fourColumn: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.fourColumn',
  },
  fiveColumn: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.fiveColumn',
  },
  emptyTitle: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.emptyTitle',
  },
  empty: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.empty',
  },
  titleModal: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.titleModal',
  },
  bodyModal: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.bodyModal',
  },
  btnCancelModal: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.btnCancelModal',
  },
  btnRemoveModal: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.btnRemoveModal',
  },
  loading: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.loading',
  },
  deleteItem: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.deleteItem',
  },
})

export const messageThirdLevel = defineMessages({
  dropdownSecondLevel: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.dropdownSecondLevel',
  },
  dropDownThird: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.dropDownThird',
  },
  thirdSearch: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.thirdSearch',
  },
  newButton: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.newButton',
  },
  firstColumn: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.firstColumn',
  },
  secondColumn: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.secondColumn',
  },
  thirdColumn: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.thirdColumn',
  },
  fourColumn: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.fourColumn',
  },
  fiveColumn: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.fiveColumn',
  },
  emptyTitle: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.emptyTitle',
  },
  empty: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.empty',
  },
  titleModal: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.titleModal',
  },
  bodyModal: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.bodyModal',
  },
  btnCancelModal: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.btnCancelModal',
  },
  btnRemoveModal: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.btnRemoveModal',
  },
  loading: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.loading',
  },
  deleteItem: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.deleteItem',
  },
})

export const MessagesBackupData = defineMessages({
  download: {
    defaultMessage: '',
    id: 'admin/mega-menu.backup.download',
  },
  upload: {
    defaultMessage: '',
    id: 'admin/mega-menu.backup.upload',
  },
  uploadAlert: {
    defaultMessage: '',
    id: 'admin/mega-menu.backup.uploadAlert',
  },
  duplicateData: {
    defaultMessage: '',
    id: 'admin/mega-menu.backup.duplicateData',
  },
})

export const messageSettings = defineMessages({
  caution: {
    defaultMessage: '',
    id: 'admin/mega-menu.settings.caution',
  },
  orientationHV: {
    defaultMessage: '',
    id: 'admin/mega-menu.settings.orientationHV',
  },
  horizontal: {
    defaultMessage: '',
    id: 'admin/mega-menu.settings.horizontal',
  },
  vertical: {
    defaultMessage: '',
    id: 'admin/mega-menu.settings.vertical',
  },
  close: {
    defaultMessage: '',
    id: 'admin/mega-menu.settings.close',
  },
  confirm: {
    defaultMessage: '',
    id: 'admin/mega-menu.settings.confirm',
  },
})

```


[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/shared/utils.ts from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```typescript
export function shortId() {
  let firstPart: string | number = (Math.random() * 46656) | 0
  let secondPart: string | number = (Math.random() * 46656) | 0

  firstPart = `000${firstPart.toString(36)}`.slice(-3)
  secondPart = `000${secondPart.toString(36)}`.slice(-3)

  return firstPart + secondPart
}

```


[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/shared/types.ts from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```typescript
export type MenuItem = {
  id: string
  icon: string
  name: string
  slug: string
  styles: string
  menu?: MenuItem[]
  display: boolean
  enableSty: boolean
  order?: number
  slugRoot?: string
  slugRelative?: string
  mobile?: boolean
  desktop?: boolean
}

export type MenuItemSave = {
  id: string
  icon: string
  name: string
  slug: string
  styles: string
  menu?: MenuItem[] | string
  display: boolean
  enableSty: boolean
  order?: number
  slugRoot?: string
  slugRelative?: string
  mobile?: boolean
  desktop?: boolean
}

export type MenusResponse = {
  menus: MenuItem[]
}

export type DataMenu = MenuItem & {
  firstLevel?: string
  secondLevel?: string
}

export type DeleteArrayType = {
  deleteMenu: DataMenu[]
}

export type ShowAlertFunction = (
  show: boolean,
  messageAlert: string,
  newData: DeleteArrayType,
  type?: string
) => void

export type UpdateData = (data: DataMenu[], type: string) => void

export type ResponseFilterFunction = (filterArray: DataMenu[]) => void

export type Orientation = 'vertical' | 'horizontal'
export interface GlobalConfig {
  title?: string
  orientation?: Orientation
  defaultDepartmentActive?: string
  openOnly?: string
}

export interface IconProps {
  id: string
  size?: number
  isActive?: boolean
  viewBox?: string
  activeClassName?: string
  mutedClassName?: string
  Drawer?: any
}

export interface SettingsType {
  settings: [
    {
      idMenu: string
      orientation: string
    }
  ]
}

```


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

[User] Show me the implementation of mega-menu/react/shared/index.ts from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```typescript
export * from './components'
export * from './contexts'
export * from './types'
export * from './messages'

```


[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/icons/IconInfo.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'

const IconInfo: FC = () => {
  return (
    <svg version="1.1" width="20" height="20" x="0" y="0" viewBox="0 0 512 512">
      <g>
        <g>
          <path
            d="M165,0.008C74.019,0.008,0,74.024,0,164.999c0,90.977,74.019,164.992,165,164.992s165-74.015,165-164.992     C330,74.024,255.981,0.008,165,0.008z M165,299.992c-74.439,0-135-60.557-135-134.992S90.561,30.008,165,30.008     s135,60.557,135,134.991C300,239.436,239.439,299.992,165,299.992z"
            fill="#134cd8"
            data-original="#000000"
            className=""
          />
          <path
            d="M165,130.008c-8.284,0-15,6.716-15,15v99.983c0,8.284,6.716,15,15,15s15-6.716,15-15v-99.983     C180,136.725,173.284,130.008,165,130.008z"
            fill="#134cd8"
            data-original="#000000"
            className=""
          />
          <path
            d="M165,70.011c-3.95,0-7.811,1.6-10.61,4.39c-2.79,2.79-4.39,6.66-4.39,10.61s1.6,7.81,4.39,10.61     c2.79,2.79,6.66,4.39,10.61,4.39s7.81-1.6,10.609-4.39c2.79-2.8,4.391-6.66,4.391-10.61s-1.601-7.82-4.391-10.61     C172.81,71.61,168.95,70.011,165,70.011z"
            fill="#134cd8"
            data-original="#000000"
            className=""
          />
        </g>
      </g>
    </svg>
  )
}

export default IconInfo

```


[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/icons/IconAdd.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'

const IconAdd: FC = () => {
  return (
    <svg version="1.1" width="20" height="20" x="0" y="0" viewBox="0 0 512 512">
      <g>
        <path
          xmlns="http://www.w3.org/2000/svg"
          d="m256 0c-141.164062 0-256 114.835938-256 256s114.835938 256 256 256 256-114.835938 256-256-114.835938-256-256-256zm112 277.332031h-90.667969v90.667969c0 11.777344-9.554687 21.332031-21.332031 21.332031s-21.332031-9.554687-21.332031-21.332031v-90.667969h-90.667969c-11.777344 0-21.332031-9.554687-21.332031-21.332031s9.554687-21.332031 21.332031-21.332031h90.667969v-90.667969c0-11.777344 9.554687-21.332031 21.332031-21.332031s21.332031 9.554687 21.332031 21.332031v90.667969h90.667969c11.777344 0 21.332031 9.554687 21.332031 21.332031s-9.554687 21.332031-21.332031 21.332031zm0 0"
          fill="#ffffff"
          data-original="#000000"
        />
      </g>
    </svg>
  )
}

export default IconAdd

```


[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/icons/IconUp.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'

interface ColorIcon {
  color: string
}

const IconUp: FC<ColorIcon> = (props) => {
  return (
    <svg
      version="1.1"
      width="20"
      height="20"
      x="0"
      y="0"
      viewBox="0 0 528.899 528.899"
    >
      <g>
        <path
          d="M374.176,110.386l-104-104.504c-0.006-0.006-0.013-0.011-0.019-0.018c-7.818-7.832-20.522-7.807-28.314,0.002    c-0.006,0.006-0.013,0.011-0.019,0.018l-104,104.504c-7.791,7.829-7.762,20.493,0.068,28.285    c7.829,7.792,20.492,7.762,28.284-0.067L236,68.442V492c0,11.046,8.954,20,20,20c11.046,0,20-8.954,20-20V68.442l69.824,70.162    c7.792,7.829,20.455,7.859,28.284,0.067C381.939,130.878,381.966,118.214,374.176,110.386z"
          fill={props.color}
          data-original="#000000"
          className=""
        />
      </g>
    </svg>
  )
}

export default IconUp

```


[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/icons/IconDown.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'

interface ColorIcon {
  color: string
}
const IconDown: FC<ColorIcon> = (props) => {
  return (
    <svg
      version="1.1"
      width="20"
      height="20"
      x="0"
      y="0"
      viewBox="0 0 528.899 528.899"
    >
      <g>
        <path
          d="M374.108,373.328c-7.829-7.792-20.492-7.762-28.284,0.067L276,443.557V20c0-11.046-8.954-20-20-20    c-11.046,0-20,8.954-20,20v423.558l-69.824-70.164c-7.792-7.829-20.455-7.859-28.284-0.067c-7.83,7.793-7.859,20.456-0.068,28.285    l104,104.504c0.006,0.007,0.013,0.012,0.019,0.018c7.792,7.809,20.496,7.834,28.314,0.001c0.006-0.007,0.013-0.012,0.019-0.018    l104-104.504C381.966,393.785,381.939,381.121,374.108,373.328z"
          fill={props.color}
          data-original="#000000"
          className=""
        />
      </g>
    </svg>
  )
}

export default IconDown

```


[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/icons/IconDelete.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'

const IconDelete: FC = () => {
  return (
    <svg version="1.1" width="20" height="20" x="0" y="0" viewBox="0 0 430 510">
      <g>
        <g xmlns="http://www.w3.org/2000/svg" id="XMLID_1473_">
          <path
            xmlns="http://www.w3.org/2000/svg"
            d="m416.875 114.441406-11.304688-33.886718c-4.304687-12.90625-16.339843-21.578126-29.941406-21.578126h-95.011718v-30.933593c0-15.460938-12.570313-28.042969-28.027344-28.042969h-87.007813c-15.453125 0-28.027343 12.582031-28.027343 28.042969v30.933593h-95.007813c-13.605469 0-25.640625 8.671876-29.945313 21.578126l-11.304687 33.886718c-2.574219 7.714844-1.2695312 16.257813 3.484375 22.855469 4.753906 6.597656 12.445312 10.539063 20.578125 10.539063h11.816406l26.007813 321.605468c1.933594 23.863282 22.183594 42.558594 46.109375 42.558594h204.863281c23.921875 0 44.175781-18.695312 46.105469-42.5625l26.007812-321.601562h6.542969c8.132812 0 15.824219-3.941407 20.578125-10.535157 4.753906-6.597656 6.058594-15.144531 3.484375-22.859375zm-249.320312-84.441406h83.0625v28.976562h-83.0625zm162.804687 437.019531c-.679687 8.402344-7.796875 14.980469-16.203125 14.980469h-204.863281c-8.40625 0-15.523438-6.578125-16.203125-14.980469l-25.816406-319.183593h288.898437zm-298.566406-349.183593 9.269531-27.789063c.210938-.640625.808594-1.070313 1.484375-1.070313h333.082031c.675782 0 1.269532.429688 1.484375 1.070313l9.269531 27.789063zm0 0"
            fill="#ffffff"
            data-original="#000000"
          />
          <path
            xmlns="http://www.w3.org/2000/svg"
            d="m282.515625 465.957031c.265625.015625.527344.019531.792969.019531 7.925781 0 14.550781-6.210937 14.964844-14.21875l14.085937-270.398437c.429687-8.273437-5.929687-15.332031-14.199219-15.761719-8.292968-.441406-15.328125 5.925782-15.761718 14.199219l-14.082032 270.398437c-.429687 8.273438 5.925782 15.332032 14.199219 15.761719zm0 0"
            fill="#ffffff"
            data-original="#000000"
          />
          <path
            xmlns="http://www.w3.org/2000/svg"
            d="m120.566406 451.792969c.4375 7.996093 7.054688 14.183593 14.964844 14.183593.273438 0 .554688-.007812.832031-.023437 8.269531-.449219 14.609375-7.519531 14.160157-15.792969l-14.753907-270.398437c-.449219-8.273438-7.519531-14.613281-15.792969-14.160157-8.269531.449219-14.609374 7.519532-14.160156 15.792969zm0 0"
            fill="#ffffff"
            data-original="#000000"
          />
          <path
            xmlns="http://www.w3.org/2000/svg"
            d="m209.253906 465.976562c8.285156 0 15-6.714843 15-15v-270.398437c0-8.285156-6.714844-15-15-15s-15 6.714844-15 15v270.398437c0 8.285157 6.714844 15 15 15zm0 0"
            fill="#ffffff"
            data-original="#000000"
          />
        </g>
      </g>
    </svg>
  )
}

export default IconDelete

```


[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/icons/IconSettings.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'

const IconSettings: FC = () => {
  return (
    <svg version="1.1" width="35" height="35" x="0" y="0" viewBox="0 0 512 512">
      <g
        transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
        fill="#134CD8"
        stroke="none"
      >
        <path
          d="M0 2560 l0 -2560 2560 0 2560 0 0 2560 0 2560 -2560 0 -2560 0 0
        -2560z m1935 2254 c37 -13 74 -42 159 -123 88 -84 128 -114 189 -144 181 -88
        376 -88 554 0 57 28 103 62 188 144 131 124 174 145 279 136 140 -11 483 -185
        703 -356 111 -86 136 -114 165 -176 30 -67 29 -166 -2 -250 -31 -83 -39 -254
        -15 -345 63 -248 249 -419 514 -474 38 -8 83 -22 100 -30 48 -25 101 -84 127
        -140 77 -171 79 -757 3 -961 -14 -39 -36 -68 -75 -104 -57 -52 -64 -55 -229
        -95 -231 -55 -407 -233 -461 -464 -25 -104 -14 -252 26 -372 36 -108 36 -154
        -1 -240 -29 -67 -116 -147 -287 -261 -135 -90 -352 -203 -450 -235 -125 -40
        -244 2 -340 118 -171 208 -438 288 -685 204 -134 -45 -213 -105 -329 -248 -24
        -30 -60 -57 -99 -77 -88 -44 -159 -43 -281 4 -119 46 -331 156 -438 227 -316
        210 -361 299 -276 543 35 99 39 120 39 210 1 186 -51 312 -183 446 -103 104
        -188 149 -325 174 -123 23 -166 39 -217 84 -85 75 -112 175 -124 461 -10 232
        22 524 67 612 49 96 131 149 259 169 244 37 439 202 513 434 34 108 31 271 -8
        385 -50 150 -31 265 60 353 88 86 325 234 505 317 198 91 277 107 375 74z"
        />
        <path
          d="M2425 3349 c-349 -69 -597 -323 -656 -673 -40 -234 51 -505 226 -681
        154 -154 340 -230 565 -230 225 0 411 76 565 230 154 154 230 340 230 565 0
        174 -36 297 -125 433 -112 173 -271 287 -480 344 -68 18 -258 25 -325 12z"
        />
      </g>
    </svg>
  )
}

export default IconSettings

```


[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/icons/IconDownload.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'

const IconDownload: FC = () => {
  return (
    <svg
      version="1.1"
      width="20"
      height="20"
      x="0"
      y="0"
      viewBox="0 0 512 512"
      style={{
        marginLeft: '15px',
        marginTop: '6px',
        marginBottom: '7px',
      }}
    >
      <g
        transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
        fill="#134CD8"
        stroke="none"
      >
        <path
          d="M2313 5099 c-24 -12 -52 -37 -65 -57 l-23 -37 -5 -1244 -5 -1244
-338 296 c-185 163 -351 304 -367 312 -44 23 -121 19 -161 -8 -45 -30 -278
-294 -295 -334 -8 -18 -14 -46 -14 -62 0 -82 -5 -77 721 -712 379 -331 701
-611 717 -621 31 -21 121 -25 155 -6 12 6 336 286 719 621 733 641 728 636
728 718 0 16 -6 44 -14 62 -17 40 -250 304 -295 334 -40 27 -117 31 -161 8
-16 -8 -182 -149 -367 -312 l-338 -296 -5 1244 -5 1244 -23 37 c-13 21 -40 45
-66 57 -39 19 -60 21 -247 21 -187 0 -208 -2 -246 -21z"
        />
        <path
          d="M600 659 c-20 -11 -47 -37 -60 -56 -24 -35 -25 -43 -28 -237 -4 -218
2 -255 45 -307 53 -63 -86 -59 2003 -59 2089 0 1950 -4 2003 59 43 52 49 89
45 307 -3 195 -4 202 -28 237 -13 20 -41 45 -61 56 -37 21 -38 21 -1960 21
-1920 0 -1924 0 -1959 -21z"
        />
      </g>
    </svg>
  )
}

export default IconDownload

```


[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/icons/IconUpload.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'

const IconUpload: FC = () => {
  return (
    <svg
      version="1.1"
      width="25"
      height="25"
      x="0"
      y="0"
      viewBox="0 0 512 512"
      style={{
        backgroundColor: '#134CD8',
        marginTop: '8px',
        marginLeft: '15px',
      }}
    >
      <g
        transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)"
        fill="#F2F4F5"
        stroke="none"
      >
        <path
          d="M1 4023 c1 -935 3 -1088 14 -1033 54 268 233 520 465 656 83 49 203
        99 278 115 l49 10 13 57 c89 407 345 780 694 1014 201 134 401 214 651 258 99
        18 88 18 -1032 19 l-1133 1 1 -1097z"
        />
        <path
          d="M2725 5100 c185 -33 321 -77 481 -158 256 -129 508 -360 654 -601
        l54 -89 104 -11 c148 -17 278 -53 398 -110 141 -67 242 -138 349 -246 173
        -172 284 -378 335 -620 l19 -90 0 973 1 972 -1247 -1 c-1232 -1 -1247 -1
        -1148 -19z"
        />
        <path
          d="M2495 3541 c-16 -10 -168 -158 -337 -327 -262 -264 -308 -314 -313
        -346 -16 -87 52 -168 140 -168 20 0 46 5 58 11 12 6 100 88 195 182 l172 172
        0 -638 0 -637 -739 0 c-476 0 -767 4 -817 11 -141 19 -309 84 -422 161 -209
        143 -367 382 -417 628 -11 55 -13 -138 -14 -1262 l-1 -1328 2560 0 2560 0 -1
        1433 c0 1431 0 1432 -19 1342 -91 -431 -402 -785 -808 -919 -182 -60 -159 -59
        -899 -63 l-683 -4 0 638 0 638 173 -172 c94 -94 182 -176 194 -182 12 -6 38
        -11 58 -11 88 0 156 81 140 168 -6 32 -51 82 -318 350 -172 172 -324 320 -339
        328 -37 19 -87 18 -123 -5z"
        />
      </g>
    </svg>
  )
}

export default IconUpload

```


[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/icons/IconEdit.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'

const IconEdit: FC = () => {
  return (
    <svg
      version="1.1"
      width="20"
      height="20"
      x="0"
      y="0"
      viewBox="0 0 528.899 528.899"
    >
      <g>
        <path
          d="M496.063,62.299l-46.396-46.4c-21.199-21.199-55.689-21.198-76.888,0C352.82,35.86,47.964,340.739,27.591,361.113    c-2.17,2.17-3.624,5.054-4.142,7.875L0.251,494.268c-0.899,4.857,0.649,9.846,4.142,13.339c3.497,3.497,8.487,5.042,13.338,4.143    L143,488.549c2.895-0.54,5.741-2.008,7.875-4.143l345.188-345.214C517.311,117.944,517.314,83.55,496.063,62.299z M33.721,478.276    l14.033-75.784l61.746,61.75L33.721,478.276z M140.269,452.585L59.41,371.721L354.62,76.488l80.859,80.865L140.269,452.585z     M474.85,117.979l-18.159,18.161l-80.859-80.865l18.159-18.161c9.501-9.502,24.96-9.503,34.463,0l46.396,46.4    C484.375,93.039,484.375,108.453,474.85,117.979z"
          fill="#134cd8"
        />
      </g>
    </svg>
  )
}

export default IconEdit

```


[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/icons/IconArrowLeft.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'

const IconArrowLeft: FC = () => {
  return (
    <svg version="1.1" width="20" height="20" x="0" y="0" viewBox="0 0 512 512">
      <g>
        <path
          d="M492,236H68.442l70.164-69.824c7.829-7.792,7.859-20.455,0.067-28.284c-7.792-7.83-20.456-7.859-28.285-0.068    l-104.504,104c-0.007,0.006-0.012,0.013-0.018,0.019c-7.809,7.792-7.834,20.496-0.002,28.314c0.007,0.006,0.012,0.013,0.018,0.019    l104.504,104c7.828,7.79,20.492,7.763,28.285-0.068c7.792-7.829,7.762-20.492-0.067-28.284L68.442,276H492    c11.046,0,20-8.954,20-20C512,244.954,503.046,236,492,236z"
          fill="#134cd8"
          data-original="#000000"
        />
      </g>
    </svg>
  )
}

export default IconArrowLeft

```


[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/State.ts from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```typescript
import { makeAutoObservable } from 'mobx'

import type { DataMenu, GlobalConfig, MenuItem } from '../shared'

type ChangeOpenMenu = boolean | ((isOpen: boolean) => boolean)

class MegaMenuState {
  public config: GlobalConfig = {}
  public departments: MenuItem[] = []
  public departmentActive: MenuItem | null = null
  public isOpenMenu = false

  constructor() {
    makeAutoObservable(this)
  }

  public setConfig = (config: GlobalConfig) => {
    this.config = config
  }

  public setDepartments = (departments: MenuItem[]) => {
    this.departments = departments
  }

  public setDepartmentActive = (department: MenuItem | null) => {
    this.departmentActive = department
  }

  public openMenu = (value: ChangeOpenMenu = true) => {
    if (typeof value === 'boolean') {
      this.isOpenMenu = value
    } else {
      this.isOpenMenu = value(this.isOpenMenu)
    }
  }

  public getCategories = (departmentId?: string) => {
    let categories: DataMenu[] = []
    let department: DataMenu | null | undefined

    if (departmentId) {
      department = this.departments.find((x) => x.id === departmentId)
    } else {
      department = this.departmentActive
    }

    if (department?.menu?.length) {
      categories = department.menu
    }

    return categories
  }
}

export const megaMenuState = new MegaMenuState()

```


[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/styles.css from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```css
.menuContainer,
.submenuContainer {
  overflow: auto;
  max-height: 50vh;
}

.menuContainer {
  width: 300px;
}

.submenuList {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.submenuList > .submenuItem {
  max-width: 200px;
}

.styledLink,
.goBackButton,
.triggerContainer {
  border: none;
  background: transparent;
  outline: transparent;
}

.hideArrow svg {
  display: none;
}

```


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

[User] Show me the implementation of mega-menu/react/MegaMenu/wrapper.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useEffect, useState } from 'react'
import { useQuery } from 'react-apollo'
import { useDevice } from 'vtex.device-detector'

import GET_MENUS from '../graphql/queries/getMenus.graphql'
import GET_SETTINGS from '../graphql/queries/getSettings.graphql'
import type { GlobalConfig, MenusResponse, Orientation } from '../shared'
import HorizontalMenu from './components/HorizontalMenu'
import VerticalMenu from './components/VerticalMenu'
import { megaMenuState } from './State'

const Wrapper: StorefrontFunctionComponent<MegaMenuProps> = (props) => {
  const { openOnly } = props
  const { isMobile } = useDevice()
  const { data } = useQuery<MenusResponse>(GET_MENUS, {
    fetchPolicy: 'no-cache',
    variables: {
      isMobile,
    },
  })

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

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

  const { setDepartments, setConfig } = megaMenuState

  const currentOrientation: Orientation = isMobile ? 'vertical' : 'horizontal'

  useEffect(() => {
    // eslint-disable-next-line vtex/prefer-early-return
    if (data?.menus.length) {
      setConfig({
        ...props,
        orientation: currentOrientation,
      })
      setDepartments(data.menus)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data])

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

  if (isMobile) {
    return (
      <VerticalMenu
        openOnly={openOnly ?? 'vertical'}
        orientation={orientationMenu}
      />
    )
  }

  if (orientationMenu === 'vertical') {
    return (
      <VerticalMenu
        openOnly={openOnly ?? 'vertical'}
        orientation={orientationMenu}
      />
    )
  }

  return (
    <HorizontalMenu
      openOnly={openOnly ?? 'horizontal'}
      orientation={orientationMenu}
    />
  )
}

Wrapper.defaultProps = {
  title: 'Departments',
}

Wrapper.displayName = 'MegaMenu'

export type MegaMenuProps = GlobalConfig

export default Wrapper

```


[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/Category/Components/NewButtonComponent.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React from 'react'
import { ButtonWithIcon } from 'vtex.styleguide'
import { useRuntime } from 'vtex.render-runtime'

import IconAdd from '../../icons/IconAdd'

interface NewButtonComponentProps {
  obj: {
    id?: string
    level?: string
    secondLevel?: string
    namebutton?: string
  }
}

const NewButtonComponent: FC<NewButtonComponentProps> = (props) => {
  const { navigate } = useRuntime()
  const { obj } = props
  let statusButton = true

  if (obj.level === 'firstLevel') {
    statusButton = false
  } else if (obj.level === 'secondLevel' && obj.id !== '') {
    statusButton = false
  } else if (
    obj.level === 'thirdLevel' &&
    obj.id !== '' &&
    obj.secondLevel !== ''
  ) {
    statusButton = false
  }

  const newItem = () => {
    navigate({
      to: `/admin/app/mega-menu/form-menu/${encodeURIComponent(
        JSON.stringify({
          level: obj.level,
          type: 'new',
          id: obj.id,
          secondLevel: obj.secondLevel,
        })
      )}`,
    })
  }

  return (
    <div>
      <ButtonWithIcon
        icon={<IconAdd />}
        variation="primary"
        onClick={newItem}
        block
        disabled={statusButton}
      >
        {obj.namebutton}
      </ButtonWithIcon>
    </div>
  )
}

export default NewButtonComponent

```


[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/Category/Components/SearchComponent.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React, { useState } from 'react'
import { InputSearch } from 'vtex.styleguide'

import type { DataMenu, ResponseFilterFunction } from '../../shared'

interface SearchComponentProps {
  placeholder: string
  dataItems: DataMenu[]
  responseFilter: ResponseFilterFunction
}

const SearchComponent: FC<SearchComponentProps> = (props) => {
  const [valueSearch, setValueSearch] = useState('')

  const filterItems = (e: { target: HTMLInputElement }) => {
    const { value } = e.target

    setValueSearch(value)
    const menuFilter: DataMenu[] = value
      ? props.dataItems.filter((dataMenu: DataMenu) =>
          dataMenu.name.toUpperCase().includes(value.toUpperCase())
        )
      : []

    props.responseFilter(menuFilter)
  }

  return (
    <div>
      <InputSearch
        placeholder={props.placeholder}
        value={valueSearch}
        size="regular"
        onChange={filterItems}
      />
    </div>
  )
}

export default SearchComponent

```


[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/Category/Components/TableComponent.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable prettier/prettier */
import type { FC } from 'react'
import React, { useEffect, useState } from 'react'
import {
  Table,
  ButtonWithIcon,
  Spinner,
  ModalDialog,
  EmptyState,
} from 'vtex.styleguide'
import { useMutation } from 'react-apollo'
import { useRuntime } from 'vtex.render-runtime'
import {
  FaMobileAlt,
  FaDesktop,
  FaEye,
  FaEyeSlash,
  FaCode,
} from 'react-icons/fa'

import IconEdit from '../../icons/IconEdit'
import IconDelete from '../../icons/IconDelete'
import IconUp from '../../icons/IconUp'
import IconDown from '../../icons/IconDown'
import DELETE from '../../graphql/mutations/delete.graphql'
import EDIT from '../../graphql/mutations/edit.graphql'
import type {
  DataMenu,
  MenuItem,
  ShowAlertFunction,
  UpdateData,
} from '../../shared'

interface TableComponentProps {
  dataMenu: DataMenu[]
  level: string
  showAlert: ShowAlertFunction
  updateData: UpdateData
  idLevels?: {
    idFirstlvl?: string
    idSecondlvl?: string
  }
  mainData: DataMenu[]
  loading: boolean
  titleColumn: {
    name: string
    slug: string
    icon: string
    action: string
    visibility: string
    emptyTitle: string
    empty: string
    modalTitle: string
    modalBody: string
    cancel: string
    confirm: string
    loading: string
    deleteConfirm: string
  }
}

interface TableItem {
  cellData: unknown
  rowData: DataMenu
  updateCellMeasurements: () => void
}

interface BodyProps {
  id: string
  level: string
  type: string
  firstLevel?: string | null
  secondLevel?: string | null
}

const defaultcontent = {
  id: '',
  name: '',
  icon: '',
  slug: '',
  styles: '',
  menu: [],
  display: false,
  enableSty: false,
  order: 0,
}

const TableComponent: FC<TableComponentProps> = (props) => {
  const [dataChangeItem, setDataChangeItem] = useState<MenuItem>(defaultcontent)

  const [isModalOpen, setIsModalOpen] = useState(false)
  const [menuDelete, setMenuDelete] = useState<MenuItem>(defaultcontent)

  const [deleteMenu, { data: dataDelete }] = useMutation(DELETE, {
    fetchPolicy: 'no-cache',
  })

  const { navigate } = useRuntime()
  const [menuInput, { data: dataEdit }] = useMutation(EDIT, {
    fetchPolicy: 'no-cache',
  })

  useEffect(() => {
    if (dataEdit) {
      if (dataChangeItem.id) {
        menuInput({
          variables: {
            editMenu: {
              id: dataChangeItem.id,
              name: dataChangeItem.name,
              icon: dataChangeItem.icon,
              slug: dataChangeItem.slug,
              styles: dataChangeItem.styles,
              menu: dataChangeItem.menu,
              display: dataChangeItem.display,
              enableSty: dataChangeItem.enableSty,
              order: dataChangeItem.order,
              mobile: dataChangeItem.mobile ?? true,
              desktop: dataChangeItem.desktop ?? true,
            },
          },
        })
        setDataChangeItem(defaultcontent)
      } else {
        props.updateData(dataEdit.editMenu, 'move')
      }
    }
  }, [dataEdit]) // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    if (!dataDelete) return

    setIsModalOpen(false)
    props.showAlert(true, props.titleColumn.deleteConfirm, dataDelete)
    window.scrollTo(0, 0)
    setTimeout(() => {
      props.showAlert(false, '', dataDelete)
    }, 4000)
    props.updateData(dataDelete.deleteMenu, 'delete')
  }, [dataDelete]) // eslint-disable-line react-hooks/exhaustive-deps

  const editItem = (item: TableItem) => {
    const localId = localStorage.getItem('idlvl2')

    const localIdFirst = localStorage.getItem('idlvl1')

    let bodyContext: BodyProps

    if (props.level === 'firstLevel') {
      bodyContext = {
        id: item.rowData.id,
        level: props.level,
        type: 'edit',
      }
    } else if (props.level === 'secondLevel') {
      bodyContext = {
        id: item.rowData.id,
        level: props.level,
        type: 'edit',
        firstLevel: item.rowData.firstLevel,
      }
    } else {
      bodyContext = {
        id: item.rowData.id,
        level: props.level,
        type: 'edit',
        firstLevel: item.rowData.firstLevel
          ? item.rowData.firstLevel
          : localIdFirst,
        secondLevel: props.idLevels?.idSecondlvl
          ? props.idLevels?.idSecondlvl
          : localId,
      }
    }

    navigate({
      to: `/admin/app/mega-menu/form-menu/${encodeURIComponent(
        JSON.stringify(bodyContext)
      )}`,
    })
  }

  const deleteItem = (idMenu: MenuItem) => {
    let id = ''
    let idSecond = ''
    let idThird = ''

    if (props.level === 'firstLevel') {
      id = idMenu.id
    } else if (props.level === 'secondLevel') {
      idSecond = idMenu.id
    } else {
      idThird = idMenu.id
    }

    deleteMenu({
      variables: {
        id: id || props.idLevels?.idFirstlvl,
        idSecond: idSecond || props.idLevels?.idSecondlvl,
        idThird,
      },
    })
  }

  const filtermove = (id: string, order: number, type: string) => {
    const arrayMove = [...props.dataMenu]
    let dataTempEdit: MenuItem = {} as MenuItem
    let dataChange: MenuItem = {} as MenuItem

    for (const i in arrayMove) {
      if (arrayMove[i].id === id) {
        const index: number =
          type === 'up' ? parseInt(i, 10) - 1 : parseInt(i, 10) + 1

        arrayMove[i] = {
          ...arrayMove[i],
          order: type === 'up' ? order - 1 : order + 1,
        }
        arrayMove[index] = { ...arrayMove[index], order }
        dataTempEdit = arrayMove[i]
        dataChange = arrayMove[index]
      }
    }

    return { dataTempEdit, dataChange }
  }

  const move = (id: string, order: number, typeMove: string) => {
    const { dataTempEdit, dataChange } = filtermove(id, order, typeMove)
    let dataNew = {} as DataMenu

    if (props.level === 'thirdLevel') {
      let subArray = [...props.dataMenu]

      subArray = subArray.map((item) => {
        if (item.id === dataTempEdit.id) item = dataTempEdit
        if (item.id === dataChange.id) item = dataChange

        return item
      })

      const idFirstlvl = props.idLevels ? props.idLevels.idFirstlvl : ''
      const idSecondlvl = props.idLevels ? props.idLevels.idSecondlvl : ''
      const mainMegaMenu: DataMenu[] = [...props.mainData]

      let dataFirstLevel = mainMegaMenu.find((item) => item.id === idFirstlvl)

      if (dataFirstLevel?.menu) {
        const dataSecondLevel = dataFirstLevel.menu.map((item) => {
          if (item.id === idSecondlvl) item.menu = subArray

          return item
        })

        dataFirstLevel = { ...dataFirstLevel, menu: dataSecondLevel }
        dataNew = dataFirstLevel
      }
    } else if (props.level === 'secondLevel') {
      let mainMegaMenu = { ...props.mainData[0] }
      let subArray = [...props.dataMenu]

      subArray = subArray.map((item) => {
        if (item.id === dataTempEdit.id) item = dataTempEdit
        if (item.id === dataChange.id) item = dataChange

        return item
      })

      mainMegaMenu = { ...mainMegaMenu, menu: subArray }

      dataNew = mainMegaMenu
    } else {
      setDataChangeItem(dataChange)
      dataNew = dataTempEdit
    }

    menuInput({
      variables: {
        editMenu: {
          id: dataNew.id,
          name: dataNew.name,
          icon: dataNew.icon,
          slug: dataNew.slug,
          styles: dataNew.styles,
          menu: dataNew.menu,
          display: dataNew.display,
          enableSty: dataNew.enableSty,
          order: dataNew.order,
          mobile: dataNew.mobile ?? true,
          desktop: dataNew.desktop ?? true,
        },
      },
    })
  }

  const cellComponent = (e: TableItem) => {
    const up = <IconUp color={e.rowData.order === 1 ? '#9A9899' : '#134cd8'} />
    const down = (
      <IconDown
        color={
          e.rowData.order === props.dataMenu.length ? '#9A9899' : '#134cd8'
        }
      />
    )

    const orderMenu = e.rowData.order ?? 0

    return (
      <div className="flex">
        <div className="pt5 pr3 pb5">
          <ButtonWithIcon
            icon={up}
            variation="secondary"
            disabled={e.rowData.order === 1}
            onClick={() => move(e.rowData.id, orderMenu, 'up')}
          />
        </div>
        <div className="pt5 pr3 pb5">
          <ButtonWithIcon
            icon={down}
            variation="secondary"
            disabled={e.rowData.order === props.dataMenu.length}
            onClick={() => move(e.rowData.id, orderMenu, 'down')}
          />
        </div>
        <div className="pt5 pr3 pb5">
          <ButtonWithIcon
            icon={<IconEdit />}
            variation="secondary"
            onClick={() => editItem(e)}
          />
        </div>
        <div className="pt5 pb5">
          <ButtonWithIcon
            icon={<IconDelete />}
            variation="danger"
            onClick={() => {
              setMenuDelete(e.rowData)
              setIsModalOpen(true)
            }}
          />
        </div>
      </div>
    )
  }

  const customSchema = {
    properties: {
      name: {
        title: props.titleColumn.name,
        width: 400,
      },
      slug: {
        title: props.titleColumn.slug,
        width: 300,
      },
      icon: {
        title: props.titleColumn.icon,
        width: 300,
      },
      visibility: {
        title: props.titleColumn.visibility,
        width: 200,
        cellRenderer: (e: TableItem) => {
          return (
            <div className="flex" style={{ gap: '10px' }}>
              {(e.rowData.mobile || e.rowData.mobile === null) && (
                <FaMobileAlt color="0C389F" size={20} />
              )}
              {(e.rowData.desktop || e.rowData.desktop === null) && (
                <FaDesktop color="0C389F" size={20} />
              )}
              {e.rowData.display ? (
                <FaEye color="0C389F" size={20} />
              ) : (
                <FaEyeSlash color="0C389F" size={20} />
              )}
              {e.rowData.enableSty && <FaCode color="0C389F" size={20} />}
            </div>
          )
        },
      },
      actions: {
        title: props.titleColumn.action,
        width: 250,
        cellRenderer: (e: TableItem) => cellComponent(e),
      },
    },
  }

  return (
    <div>
      <ModalDialog
        centered
        loading={false}
        confirmation={{
          label: props.titleColumn.confirm,
          isDangerous: true,
          onClick: () => {
            deleteItem(menuDelete)
          },
        }}
        cancelation={{
          label: props.titleColumn.cancel,
          onClick: () => {
            setIsModalOpen(false)
          },
        }}
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
      >
        <div className="">
          <p className="f3 f3-ns fw3 gray">{props.titleColumn.modalTitle}</p>
          <p>{props.titleColumn.modalBody}</p>
        </div>
      </ModalDialog>
      {props.loading ? (
        <div style={{ textAlign: 'center' }} className="mt8">
          <Spinner />
          <p>{props.titleColumn.loading}</p>
        </div>
      ) : props.dataMenu.length > 0 ? (
        <Table schema={customSchema} items={props.dataMenu} />
      ) : (
        <div className="mt9">
          <EmptyState title={props.titleColumn.emptyTitle}>
            <p>
            {props.titleColumn.empty}
            </p>
          </EmptyState>
        </div>
      )}
    </div>
  )
}

export default TableComponent

```


[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/shared/contexts/dataMenuContext.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import { createContext, useContext } from 'react'

import type { DataMenu, ShowAlertFunction, UpdateData } from '..'

export interface DataMenuCtx {
  dataMenu: DataMenu[]
  showAlert: ShowAlertFunction
  updateData: UpdateData
  loading: boolean
}

const dataMenuDefault: DataMenuCtx = {
  dataMenu: [],
  showAlert: () => null,
  updateData: () => null,
  loading: true,
}

export const DataMenuContext = createContext<DataMenuCtx>(dataMenuDefault)
export const DataMenuProvider = DataMenuContext.Provider
export const useDataMenu = () => useContext(DataMenuContext)

```


[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/shared/components/IconSelector/index.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import type { FC } from 'react'
import React, { useMemo } from 'react'
import { Icon } from 'vtex.store-icons'
import { EXPERIMENTAL_Select as VtexSelect } from 'vtex.styleguide'
import { FormattedMessage } from 'react-intl'

import useStoreIconPack from './useStoreIconPack'

type Option = {
  label: JSX.Element
  value: string
}

export interface IconSelectorProps {
  onChange?: (iconId: string) => void
}

export const IconSelector: FC<IconSelectorProps> = ({ onChange }) => {
  const { IconPack, iconPackList } = useStoreIconPack()
  const options: Option[] = useMemo(() => {
    return iconPackList.map((icon) => ({
      label: (
        <div className="flex items-center">
          <span className="mr4 flex items-center">
            <Icon id={icon} />
          </span>
          <span> {icon}</span>
        </div>
      ),
      value: icon,
    }))
  }, [iconPackList])

  return (
    <div>
      {IconPack}
      <VtexSelect
        creatable
        multi={false}
        options={options}
        onChange={onChange}
        placeholder={
          <FormattedMessage id="admin/mega-menu.items.input3Form.placeholder" />
        }
      />
    </div>
  )
}

```


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

[User] Show me the implementation of mega-menu/react/shared/components/IconSelector/useStoreIconPack.tsx from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```tsx
import React, { useEffect, useRef, useState } from 'react'

const ICONPACK_URL =
  'https://raw.githubusercontent.com/vtex-apps/store-icons/master/styles/iconpacks/iconpack.svg'

const useStoreIconPack = () => {
  const [svg, setSvg] = useState('')
  const [isLoaded, setIsLoaded] = useState(false)
  const [isErrored, setIsErrored] = useState(false)
  const [iconPackList, setIconPackList] = useState<string[]>([])
  const ref = useRef<HTMLDivElement>(null)

  useEffect(() => {
    fetch(ICONPACK_URL)
      .then((res) => res.text())
      .then(setSvg)
      .catch(setIsErrored)
      .then(() => setIsLoaded(true))
  }, [])

  useEffect(() => {
    if (!svg || iconPackList.length) return

    const list = ref.current?.querySelector('defs')?.children
    const iconIds = Array.from(list ?? []).map((x) => x.id)

    setIconPackList(iconIds)

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

  return {
    iconPackList,
    IconPack: (
      <div
        ref={ref}
        className={`svgInline svgInline--${isLoaded ? 'loaded' : 'loading'} ${
          isErrored ? 'svgInline--errored' : ''
        }`}
        dangerouslySetInnerHTML={{ __html: svg }}
        id="store-icon-pack"
      />
    ),
  }
}

export default useStoreIconPack

```


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

[Assistant]
Here's the implementation:

```graphql
mutation createEditSettings($settingsInput: SettingsInput!) {
  createEditSettings(settingsInput: $settingsInput) {
    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/graphql/mutations/create.graphql from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation create($menuInput: MenuInput!) {
  createMenu(menuInput: $menuInput) {
    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/mutations/edit.graphql from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation edit($editMenu: MenuInput!) {
  editMenu(menuInput: $editMenu) {
    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/mutations/uploadData.graphql from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```graphql
mutation uploadData($uploadData: [MenuInput]!) {
  uploadMenu(menuData: $uploadData) {
    id
    name
    icon
    slug
    styles
    display
    enableSty
    order
    slugRoot
    slugRelative
    mobile
  }
}

```