[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/messages/pl.json from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
    "admin/mega-menu.navigation.label-group": "Mega menu",
    "store/mega-menu.submenu.seeAllButton.title": "Zobacz wszystkie",
    "store/mega-menu.goBackButton.title": "Wróć",
    "admin/mega-menu.tabs.first": "Pierwszy poziom",
    "admin/mega-menu.tabs.second": "Drugi poziom",
    "admin/mega-menu.tabs.third": "Trzeci poziom",
    "admin/mega-menu.items.newButton": "DODAJ NOWY",
    "admin/mega-menu.items.firstSearch": "Przeszukaj menu",
    "admin/mega-menu.items.dropdownSecondLevel": "Wybierz menu pierwszego poziomu",
    "admin/mega-menu.items.secondSearch": "Wyszukaj podmenu drugiego poziomu",
    "admin/mega-menu.items.firstColumn": "Nazwa",
    "admin/mega-menu.items.secondColumn": "Slug",
    "admin/mega-menu.items.thirdColumn": "Ikona",
    "admin/mega-menu.items.fourColumn": "Działania",
    "admin/mega-menu.items.fiveColumn": "Widoczność",
    "admin/mega-menu.items.thirdSearch": "Wyszukaj podmenu trzeciego poziomu",
    "admin/mega-menu.items.dropDownThird": "Wybierz menu drugiego poziomu",
    "admin/mega-menu.items.titleApp": "Konfiguracja menu",
    "admin/mega-menu.items.loading": "Ładuję…",
    "admin/mega-menu.items.titleModal": "Na pewno chcesz usunąć ten element?",
    "admin/mega-menu.items.bodyModal": "Tego działania nie można cofnąć. Usuniesz pozycję z menu administratora.",
    "admin/mega-menu.items.btnCancelModal": "Anuluj",
    "admin/mega-menu.items.btnRemoveModal": "TAK, USUŃ Z MENU",
    "admin/mega-menu.items.titleForm": "Wypełnij formularz: Edytuj element",
    "admin/mega-menu.items.backBtnForm": "WRÓĆ DO POPRZEDNIEJ STRONY",
    "admin/mega-menu.items.subTitleForm": "Wypełnij wszystkie pola formularza",
    "admin/mega-menu.items.infoForm": "Wymagane*",
    "admin/mega-menu.items.input1Form": "Nazwa *",
    "admin/mega-menu.items.input2Form": "Slug *",
    "admin/mega-menu.items.input3Form": "Ikony",
    "admin/mega-menu.items.input3Form.placeholder": "Wybierz…",
    "admin/mega-menu.items.input4Form": "Style",
    "admin/mega-menu.items.titleSubBlock": "Wygląd",
    "admin/mega-menu.items.check1Block": "Wyświetl",
    "admin/mega-menu.items.subCheck1Block": "Pokaż pozycje w menu",
    "admin/mega-menu.items.subCheck2Block": "Włączone style",
    "admin/mega-menu.items.btnSaveForm": "ZAPISZ ZMIANY",
    "admin/mega-menu.items.infoFormTitle": "Informacje menu pierwszego poziomu",
    "admin/mega-menu.items.infoFormSubtitle": "Główne menu:",
    "admin/mega-menu.items.infoForm2Title": "Informacje menu drugiego poziomu",
    "admin/mega-menu.items.infoForm2Subtitle": "Główne podmenu",
    "admin/mega-menu.items.tooltip": "Wybierz dostępną ikonę. Jeśli chcesz dodać niestandardową ikonę, wpisz w polu identyfikator ikony",
    "admin/mega-menu.items.tooltip2": "Dodaj style do elementu menu, np. pogrubiona czcionka, rozmiar czy tło, oddzielone przecinkami, tj. font-size:10px,color:red",
    "admin/mega-menu.items.tooltip3": "Zmiana tego sluga może spowodować trudności, nie dokonuj jej, jeśli nie jest to konieczne",
    "admin/mega-menu.items.nameRequired": "Nazwa pola jest wymagana",
    "admin/mega-menu.items.slugRequired": "Slug pola jest wymagany",
    "admin/mega-menu.items.newItemFirst": "Wypełnij formularz: Dodaj nowy element pierwszego poziomu",
    "admin/mega-menu.items.newItemSecond": "Wypełnij formularz: Dodaj nowy element drugiego poziomu",
    "admin/mega-menu.items.newItemThird": "Wypełnij formularz: Dodaj nowy element trzeciego poziomu",
    "admin/mega-menu.items.validateName": "Nazwa pola jest wymagana",
    "admin/mega-menu.items.validateSlug": "Slug pola jest wymagany",
    "admin/mega-menu.items.createItem": "Pomyślnie utworzono element",
    "admin/mega-menu.items.editItem": "Pomyślnie edytowano dane",
    "admin/mega-menu.items.deleteItem": "Pomyślnie usunięto dane",
    "admin/mega-menu.backup.download": "Pobierz CSV",
    "admin/mega-menu.backup.upload": "Prześlij dane",
    "admin/mega-menu.backup.uploadAlert": "Pomyślnie przesłano dane",
    "admin/mega-menu.backup.duplicateData": "Istnieją zduplikowane dane w pliku, sprawdź plik",
    "admin/mega-menu.settings.caution": "Uwaga! Zmiana tych opcji wpłynie na wygląd menu sklepu",
    "admin/mega-menu.settings.orientationHV": "Orientacja (pozioma/pionowa)",
    "admin/mega-menu.settings.horizontal": "Pozioma",
    "admin/mega-menu.settings.vertical": "Pionowa",
    "admin/mega-menu.settings.close": "Zamknij",
    "admin/mega-menu.settings.confirm": "Potwierdź",
    "admin/mega-menu.items.emptyTitle": "Brak elementów do wyświetlenia",
    "admin/mega-menu.items.empty": "Dodaj element, aby utworzyć mega menu i zobaczyć je w sklepie"
}
```


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

[Assistant]
Here's the implementation:

```json
{
  "admin/mega-menu.navigation.label-group": "Mega Menu",
  "store/mega-menu.submenu.seeAllButton.title": "Ver tudo",
  "store/mega-menu.goBackButton.title": "volte",
  "admin/mega-menu.tabs.first": "Primeiro nível",
  "admin/mega-menu.tabs.second": "Segundo nível",
  "admin/mega-menu.tabs.third": "Terceiro nivel",
  "admin/mega-menu.items.newButton": "ADICIONAR NOVO",
  "admin/mega-menu.items.firstSearch": "Menu de pesquisa",
  "admin/mega-menu.items.dropdownSecondLevel": "Escolha um menu de primeiro nível",
  "admin/mega-menu.items.secondSearch": "Submenu de pesquisa de segundo nível",
  "admin/mega-menu.items.firstColumn": "Nome",
  "admin/mega-menu.items.secondColumn": "Slug",
  "admin/mega-menu.items.thirdColumn": "Ícone",
  "admin/mega-menu.items.fourColumn": "Ações",
  "admin/mega-menu.items.fiveColumn": "Visibilidade",
  "admin/mega-menu.items.thirdSearch": "Terceiro nível do submenu de pesquisa",
  "admin/mega-menu.items.dropDownThird": "Escolha um menu de segundo nível",
  "admin/mega-menu.items.titleApp": "Configuração de menus",
  "admin/mega-menu.items.loading": "Carregando...",
  "admin/mega-menu.items.titleModal": "Tem certeza de que deseja excluir este item?",
  "admin/mega-menu.items.bodyModal": "Esta ação é irreversível. Você removerá o item do menu do admin",
  "admin/mega-menu.items.btnCancelModal": "Cancelar",
  "admin/mega-menu.items.btnRemoveModal": "SIM, REMOVER DO MENU",
  "admin/mega-menu.items.titleForm": "Preencha o formulário: Editar item",
  "admin/mega-menu.items.backBtnForm": "VOLTAR PARA A PAGINA ANTERIOR",
  "admin/mega-menu.items.subTitleForm": "Preencha todos os campos do formulário",
  "admin/mega-menu.items.infoForm": "Requeridos*",
  "admin/mega-menu.items.input1Form": "Nome *",
  "admin/mega-menu.items.input2Form": "Slug *",
  "admin/mega-menu.items.input3Form": "Ícones",
  "admin/mega-menu.items.input3Form.placeholder": "Selecione...",
  "admin/mega-menu.items.input4Form": "Estilos",
  "admin/mega-menu.items.titleSubBlock": "Aparência",
  "admin/mega-menu.items.check1Block": "Mostrar",
  "admin/mega-menu.items.subCheck1Block": "Mostrar itens no menu",
  "admin/mega-menu.items.subCheck2Block": "Estilos habilitados",
  "admin/mega-menu.items.btnSaveForm": "SALVAR ALTERAÇÕES",
  "admin/mega-menu.items.infoFormTitle": "Informações do menu de primeiro nível",
  "admin/mega-menu.items.infoFormSubtitle": "Menu principal:",
  "admin/mega-menu.items.infoForm2Title": "Informações do menu de segundo nível",
  "admin/mega-menu.items.infoForm2Subtitle": "Submenu principal",
  "admin/mega-menu.items.tooltip": "Selecione um ícone disponível. Se você quiser adicionar um ícone personalizado, escreva no campo o id do seu ícone",
  "admin/mega-menu.items.tooltip2": "Adicione estilos ao item de menu como fonte em negrito, tamanho e plano de fundo, separados por vírgulas. Exemplo: font-size:10px,color:red",
  "admin/mega-menu.items.tooltip3": "Alterar este slug pode causar dificuldades, por favor, faça a alteração apenas se for necessário",
  "admin/mega-menu.items.nameRequired": "O nome do campo é obrigatório",
  "admin/mega-menu.items.slugRequired": "O slug do campo é obrigatório",
  "admin/mega-menu.items.newItemFirst": "Preencha o formulário: Adicionar novo item de primeiro nível",
  "admin/mega-menu.items.newItemSecond": "Preencha o formulário: Adicionar novo item de segundo nível",
  "admin/mega-menu.items.newItemThird": "Preencha o formulário: Adicionar novo item de terceiro nível",
  "admin/mega-menu.items.validateName": "O nome do campo é obrigatório",
  "admin/mega-menu.items.validateSlug": "O slug do campo é obrigatório",
  "admin/mega-menu.items.createItem": "Item criado com sucesso",
  "admin/mega-menu.items.editItem": "Edição de dados bem-sucedida",
  "admin/mega-menu.items.deleteItem": "Dados excluídos com sucesso",
  "admin/mega-menu.backup.download": "Baixar CSV",
  "admin/mega-menu.backup.upload": "Carregar dados",
  "admin/mega-menu.backup.uploadAlert": "Carregamento de dados com sucesso",
  "admin/mega-menu.backup.duplicateData": "Existem dados duplicados no arquivo, por favor, valide o arquivo",
  "admin/mega-menu.settings.caution": "Cuidado! Mudar estas opções pode afetar a aparência do menu na loja.",
  "admin/mega-menu.settings.orientationHV": "Orientação (Horizontal / Vertical)",
  "admin/mega-menu.settings.horizontal": "Horizontal",
  "admin/mega-menu.settings.vertical": "Vertical",
  "admin/mega-menu.settings.close": "Fechar",
  "admin/mega-menu.settings.confirm": "Confirmar",
  "admin/mega-menu.items.emptyTitle": "Nenhum item para exibir",
  "admin/mega-menu.items.empty": "Adicione um novo item para criar e ver seu mega menu na loja."
}

```


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

[User] Show me the implementation of mega-menu/messages/en.json from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/mega-menu.navigation.label-group": "Mega Menu",
  "store/mega-menu.submenu.seeAllButton.title": "See all",
  "store/mega-menu.goBackButton.title": "Go back",
  "admin/mega-menu.tabs.first": "First Level",
  "admin/mega-menu.tabs.second": "Second Level",
  "admin/mega-menu.tabs.third": "Third Level",
  "admin/mega-menu.items.newButton": "ADD NEW",
  "admin/mega-menu.items.firstSearch": "Search menu",
  "admin/mega-menu.items.dropdownSecondLevel": "Choose a menu of first level",
  "admin/mega-menu.items.secondSearch": "Search submenu second level",
  "admin/mega-menu.items.firstColumn": "Name",
  "admin/mega-menu.items.secondColumn": "Slug",
  "admin/mega-menu.items.thirdColumn": "Icon",
  "admin/mega-menu.items.fourColumn": "Actions",
  "admin/mega-menu.items.fiveColumn": "Visibility",
  "admin/mega-menu.items.thirdSearch": "Search submenu third level",
  "admin/mega-menu.items.dropDownThird": "Choose a menu of second level",
  "admin/mega-menu.items.titleApp": "Menus Configuration",
  "admin/mega-menu.items.loading": "Loading...",
  "admin/mega-menu.items.titleModal": "Are you sure you want to delete this item?",
  "admin/mega-menu.items.bodyModal": "This action is irreversible. You will remove the item from the menu of the admin.",
  "admin/mega-menu.items.btnCancelModal": "Cancel",
  "admin/mega-menu.items.btnRemoveModal": "YES, REMOVE FROM MENU",
  "admin/mega-menu.items.titleForm": "Complete the form: Edit item",
  "admin/mega-menu.items.backBtnForm": "BACK TO PREVIOUS PAGE",
  "admin/mega-menu.items.subTitleForm": "Fill out all form fields",
  "admin/mega-menu.items.infoForm": "Required*",
  "admin/mega-menu.items.input1Form": "Name *",
  "admin/mega-menu.items.input2Form": "Slug *",
  "admin/mega-menu.items.input3Form": "Icons",
  "admin/mega-menu.items.input3Form.placeholder": "Select...",
  "admin/mega-menu.items.input4Form": "Styles",
  "admin/mega-menu.items.titleSubBlock": "Appearance",
  "admin/mega-menu.items.check1Block": "Display",
  "admin/mega-menu.items.subCheck1Block": "Show items on the menu",
  "admin/mega-menu.items.subCheck2Block": "Enabled styles",
  "admin/mega-menu.items.btnSaveForm": "SAVE CHANGES",
  "admin/mega-menu.items.infoFormTitle": "First level menu information",
  "admin/mega-menu.items.infoFormSubtitle": "Main menu:",
  "admin/mega-menu.items.infoForm2Title": "Second level menu information",
  "admin/mega-menu.items.infoForm2Subtitle": "Main submenu",
  "admin/mega-menu.items.tooltip": "Select an available icon. If you want to add a custom icon, write in the field the id of your icon",
  "admin/mega-menu.items.tooltip2": "Add styles to menu item as bold font, size, and background, separated by commas. i.e: font-size:10px,color:red",
  "admin/mega-menu.items.tooltip3": "Change this slug may cause difficulties, please be make the change only is be necessary",
  "admin/mega-menu.items.nameRequired": "The field name is requiered",
  "admin/mega-menu.items.slugRequired": "The field slug is requiered",
  "admin/mega-menu.items.newItemFirst": "Complete the form: Add new first-level item",
  "admin/mega-menu.items.newItemSecond": "Complete the form: Add new second-level item",
  "admin/mega-menu.items.newItemThird": "Complete the form: Add new third-level item",
  "admin/mega-menu.items.validateName": "The field name is requiered",
  "admin/mega-menu.items.validateSlug": "The field slug is requiered",
  "admin/mega-menu.items.createItem": "Item created successful",
  "admin/mega-menu.items.editItem": "Data editing successful",
  "admin/mega-menu.items.deleteItem": "Data deleted successfull",
  "admin/mega-menu.backup.download": "Download CSV",
  "admin/mega-menu.backup.upload": "Upload data",
  "admin/mega-menu.backup.uploadAlert": "Data upload successfully",
  "admin/mega-menu.backup.duplicateData": "There are duplicate data in the file, please validate the file",
  "admin/mega-menu.settings.caution": "Caution! Changing these options may affect the appearance of the menu in the store",
  "admin/mega-menu.settings.orientationHV": "Orientation (Horizontal / Vertical)",
  "admin/mega-menu.settings.horizontal": "Horizontal",
  "admin/mega-menu.settings.vertical": "Vertical",
  "admin/mega-menu.settings.close": "Close",
  "admin/mega-menu.settings.confirm": "Confirm",
  "admin/mega-menu.items.emptyTitle": "No items to show",
  "admin/mega-menu.items.empty": "Add a new item to create your mega menu and view it on the store"
}

```


[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/messages/fr.json from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin/mega-menu.navigation.label-group": "Menu Mega",
  "store/mega-menu.submenu.seeAllButton.title": "Tout afficher",
  "store/mega-menu.goBackButton.title": "Retour",
  "admin/mega-menu.tabs.first": "Premier niveau",
  "admin/mega-menu.tabs.second": "Second niveau",
  "admin/mega-menu.tabs.third": "Troisième niveau",
  "admin/mega-menu.items.newButton": "AJOUTER UN NOUVEAU",
  "admin/mega-menu.items.firstSearch": "Menu de recherche",
  "admin/mega-menu.items.dropdownSecondLevel": "Choisir un menu de premier niveau",
  "admin/mega-menu.items.secondSearch": "Rechercher dans le sous-menu second niveau",
  "admin/mega-menu.items.firstColumn": "Nom",
  "admin/mega-menu.items.secondColumn": "Slug",
  "admin/mega-menu.items.thirdColumn": "Symbole",
  "admin/mega-menu.items.fourColumn": "Actions",
  "admin/mega-menu.items.fiveColumn": "Visibilité",
  "admin/mega-menu.items.thirdSearch": "Rechercher dans le sous-menu de troisième niveau",
  "admin/mega-menu.items.dropDownThird": "Choisir un menu de deuxième niveau",
  "admin/mega-menu.items.titleApp": "Configuration des menus",
  "admin/mega-menu.items.loading": "Chargement ...",
  "admin/mega-menu.items.titleModal": "Êtes-vous sûr de vouloir supprimer cet article ?",
  "admin/mega-menu.items.bodyModal": "Cette action est irréversible. Vous allez supprimer l’article du menu de l’administrateur.",
  "admin/mega-menu.items.btnCancelModal": "Annuler",
  "admin/mega-menu.items.btnRemoveModal": "OUI, SUPPRIMER DU MENU",
  "admin/mega-menu.items.titleForm": "Remplir le formulaire : Modifier l’article",
  "admin/mega-menu.items.backBtnForm": "RETOUR À LA PAGE PRÉCÉDENTE",
  "admin/mega-menu.items.subTitleForm": "Remplir tous les champs du formulaire",
  "admin/mega-menu.items.infoForm": "Obligatoire*",
  "admin/mega-menu.items.input1Form": "Nom *",
  "admin/mega-menu.items.input2Form": "Slug *",
  "admin/mega-menu.items.input3Form": "Symboles",
  "admin/mega-menu.items.input3Form.placeholder": "Choisir...",
  "admin/mega-menu.items.input4Form": "Styles",
  "admin/mega-menu.items.titleSubBlock": "Apparence",
  "admin/mega-menu.items.check1Block": "Afficher",
  "admin/mega-menu.items.subCheck1Block": "Afficher les éléments dans le menu",
  "admin/mega-menu.items.subCheck2Block": "Styles activés",
  "admin/mega-menu.items.btnSaveForm": "ENREGISTRER LES MODIFICATIONS",
  "admin/mega-menu.items.infoFormTitle": "Informations sur le menu de premier niveau",
  "admin/mega-menu.items.infoFormSubtitle": "Menu principal :",
  "admin/mega-menu.items.infoForm2Title": "Informations sur le menu de deuxième niveau",
  "admin/mega-menu.items.infoForm2Subtitle": "Sous-menu principal",
  "admin/mega-menu.items.tooltip": "Sélectionnez un symbole disponible. Si vous souhaitez ajouter un symbole personnalisé, écrivez dans le champ l’Id de votre symbole",
  "admin/mega-menu.items.tooltip2": "Ajouter des styles à l’article de menu en gras en tant que police, taille et arrière-plan, séparés par des virgules : taille de police :10 px, couleur : rouge",
  "admin/mega-menu.items.tooltip3": "La modification de ce slug peut causer des complications, veuillez n’effectuer la modification que si nécessaire",
  "admin/mega-menu.items.nameRequired": "Le nom du champ est obligatoire",
  "admin/mega-menu.items.slugRequired": "Le slug de champ est obligatoire",
  "admin/mega-menu.items.newItemFirst": "Compléter le formulaire : Ajouter un nouvel élément de premier niveau",
  "admin/mega-menu.items.newItemSecond": "Compléter le formulaire : Ajouter un nouvel élément de deuxième niveau",
  "admin/mega-menu.items.newItemThird": "Compléter le formulaire : Ajouter un nouvel élément de troisième niveau",
  "admin/mega-menu.items.validateName": "Le nom du champ est obligatoire",
  "admin/mega-menu.items.validateSlug": "Le slug de champ est obligatoire",
  "admin/mega-menu.items.createItem": "Création de l’article réussie",
  "admin/mega-menu.items.editItem": "Modification des données réussie",
  "admin/mega-menu.items.deleteItem": "Données supprimées avec succès",
  "admin/mega-menu.backup.download": "Télécharger au format CSV",
  "admin/mega-menu.backup.upload": "Charger des données",
  "admin/mega-menu.backup.uploadAlert": "Le chargement des données a réussi",
  "admin/mega-menu.backup.duplicateData": "Il y a des données en double dans le fichier, veuillez valider le fichier",
  "admin/mega-menu.settings.caution": "Caution! Changing these options may affect the appearance of the menu in the store",
  "admin/mega-menu.settings.orientationHV": "Orientation (Horizontale / Verticale)",
  "admin/mega-menu.settings.horizontal": "Horizontale",
  "admin/mega-menu.settings.vertical": "Verticale",
  "admin/mega-menu.settings.close": "Fermer",
  "admin/mega-menu.settings.confirm": "Confirmer"
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "admin/mega-menu.navigation.label-group": "Mega Menú",
  "store/mega-menu.submenu.seeAllButton.title": "Ver todo",
  "store/mega-menu.goBackButton.title": "Volver",
  "admin/mega-menu.tabs.first": "Primer nivel",
  "admin/mega-menu.tabs.second": "Segundo nivel",
  "admin/mega-menu.tabs.third": "Tercer nivel",
  "admin/mega-menu.items.newButton": "AÑADIR NUEVO",
  "admin/mega-menu.items.firstSearch": "Buscar menu",
  "admin/mega-menu.items.dropdownSecondLevel": "Seleccione un menu del primer nivel",
  "admin/mega-menu.items.secondSearch": "Buscar un submenu del segundo nivel",
  "admin/mega-menu.items.firstColumn": "Nombre",
  "admin/mega-menu.items.secondColumn": "Slug",
  "admin/mega-menu.items.thirdColumn": "Icono",
  "admin/mega-menu.items.fourColumn": "Acciones",
  "admin/mega-menu.items.fiveColumn": "Visibilidad",
  "admin/mega-menu.items.thirdSearch": "Buscar submenú del tercer nivel",
  "admin/mega-menu.items.dropDownThird": "Seleccione un menú del segundo nivel",
  "admin/mega-menu.items.titleApp": "Configurar Menú",
  "admin/mega-menu.items.loading": "Cargando...",
  "admin/mega-menu.items.titleModal": "¿Estás seguro que deseas eliminar este ítem?",
  "admin/mega-menu.items.bodyModal": "Esta acción es irreversible. Se removerá el ítem del menú de la tienda.",
  "admin/mega-menu.items.btnCancelModal": "Cancelar",
  "admin/mega-menu.items.btnRemoveModal": "Sí, remover del menú",
  "admin/mega-menu.items.titleForm": "Complete el formulario: Editar menú",
  "admin/mega-menu.items.backBtnForm": "Volver a la página anterior",
  "admin/mega-menu.items.subTitleForm": "Se deben llenar todos los campos del formulario",
  "admin/mega-menu.items.infoForm": "Obligatorio*",
  "admin/mega-menu.items.input1Form": "Nombre *",
  "admin/mega-menu.items.input2Form": "Slug *",
  "admin/mega-menu.items.input3Form": "Icono",
  "admin/mega-menu.items.input3Form.placeholder": "Selecciona...",
  "admin/mega-menu.items.input4Form": "Estilos",
  "admin/mega-menu.items.titleSubBlock": "Apariencia",
  "admin/mega-menu.items.check1Block": "Mostrar",
  "admin/mega-menu.items.subCheck1Block": "Mostrar item en el menú",
  "admin/mega-menu.items.subCheck2Block": "Activar estilos",
  "admin/mega-menu.items.btnSaveForm": "GUARDAR CAMBIOS",
  "admin/mega-menu.items.infoFormTitle": "Primer nivel del menú",
  "admin/mega-menu.items.infoFormSubtitle": "Menú principal",
  "admin/mega-menu.items.infoForm2Title": "Segundo nivel del menú",
  "admin/mega-menu.items.infoForm2Subtitle": "Submenú principal",
  "admin/mega-menu.items.tooltip": "Seleccione un icono de los disponibles. Si deseas agregar un icono personalizado, escribe en el campo el id de tu icono",
  "admin/mega-menu.items.tooltip2": "Añade estilos a los ítems del menú como letra en negrita, color de fondo, todo separado por comas. Ejemplo: font-size:10px,color:red",
  "admin/mega-menu.items.tooltip3": "Cambiar este slug puede causar problemas, asegurese de que todo esté en orden cuando realice el cambio",
  "admin/mega-menu.items.nameRequired": "The field name is requiered",
  "admin/mega-menu.items.slugRequired": "The field slug is requiered",
  "admin/mega-menu.items.newItemFirst": "Completa el formulario: Añade un nuevo ítem en el primer nivel",
  "admin/mega-menu.items.newItemSecond": "Completa el formulario: Añade un nuevo ítem en el segundo nivel",
  "admin/mega-menu.items.newItemThird": "Completa el formulario: Añade un nuevo ítem en el tercer nivel",
  "admin/mega-menu.items.validateName": "El campo nombre es obligatorio",
  "admin/mega-menu.items.validateSlug": "el campo slug es obligatorio",
  "admin/mega-menu.items.createItem": "Item creado exitosamente",
  "admin/mega-menu.items.editItem": "Datos editados exitosamente",
  "admin/mega-menu.items.deleteItem": "Datos eliminados exitosamente",
  "admin/mega-menu.backup.download": "Descargar CSV",
  "admin/mega-menu.backup.upload": "Cargar menu",
  "admin/mega-menu.backup.uploadAlert": "La carga del menú se realizó con éxito",
  "admin/mega-menu.backup.duplicateData": "Existen datos duplicados en el archivo, por favor validar e intentar de nuevo",
  "admin/mega-menu.settings.caution": "Caution! Changing these options may affect the appearance of the menu in the store",
  "admin/mega-menu.settings.orientationHV": "Orientación (Horizontal / Vertical)",
  "admin/mega-menu.settings.horizontal": "Horizontal",
  "admin/mega-menu.settings.vertical": "Vertical",
  "admin/mega-menu.settings.close": "Cerrar",
  "admin/mega-menu.settings.confirm": "Confirmar"
}

```


[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/admin/navigation.json from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "section": "storeSetup",
  "titleId": "admin/mega-menu.navigation.label-group",
  "path": "/admin/mega-menu/1"
}

```


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

[User] Show me the implementation of mega-menu/admin/routes.json from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "admin.app.menu": {
    "component": "ConfigMenuContainer",
    "path": "/admin/app/mega-menu/:tab"
  },
  "admin.app.configMenu": {
    "component": "FormComponent",
    "path": "/admin/app/mega-menu/form-menu/:menu"
  }
}

```


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

[Assistant]
Here's the implementation:

```markdown
📢 Don't fork this project. Use, contribute, or open issues through [Store Discussion](https://github.com/vtex-apps/store-discussion).

# Mega menu

> ⚠ This app is no longer maintained by VTEX.

<!-- DOCS-IGNORE:start -->
<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->

[![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors)

<!-- ALL-CONTRIBUTORS-BADGE:END -->
<!-- DOCS-IGNORE:end -->

VTEX Mega Menu provides a form to create and manage the custom menu until three levels in the category tree. The stores can use this app as the main navigation menu.

![mega-menu-app](https://user-images.githubusercontent.com/12108601/121273428-e140db00-c88d-11eb-850c-02399b803d18.png)

## Configuration

### Step 1 - Installing the Mega Menu app

Using your terminal, log in to the desired VTEX account and run the following command:

`vtex install vtex.mega-menu@2.x`

### Step 2 - Define the category tree to be used as a menu in the admin

In the account's admin dashboard, access `STORE SETUP > Mega Menu` and using the available options configure the category tree according to your needs:

![mega-menu-admin-app](https://user-images.githubusercontent.com/8409481/185652487-8ca70f56-59f8-440c-b173-ad65a1763686.png)

### Step 3 - Implementing the app's blocks in your store theme

**IMPORTANT: If you have installed this app previously, please validate with your block settings and add the new components to modify the orientation Menu.
No change the option to vertical Menu if you haven't yet this configuration in your store.**

---

Once the app is configured, it is time to place the following blocks in your Store Theme app.

Import the mega menu app to your dependencies as `manifest.json`, for example:

```json
"dependencies": {
	"vtex.mega-menu": "2.x"
}
```

### `mega-menu`

This block is responsible for querying the previously built category tree and displaying it in the store.

| Prop name               | Type     | Description                                                                                | Default value                                                                                |
| ----------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
| title                   | `String` | Title for the first level elements (departments) used in the mobile version or when the `orientation` is `vertical`.                                                  | Departments                                                                                |
| `orientation`           | `String` | Type of menu to be built. Possible values are horizontal and `vertical`                                                                                | A value is determined depending on the resolution of the device, if it is a mobile (phone and tablet) it is used `vertical` and for the rest `horizontal`. |
| defaultDepartmentActive | `String` | You can use this property to determine a department that will be shown when first displaying the menu, this is useful if you want to highlight a specific department. | 🚫                                                                                |
| openOnly                | `String` | Define the orientation of the menu. You can choose between vertical or horizontal. | `vertical`or `horizontal`                                                                                |

### `mega-menu-trigger-btn`

This block renders an icon that will be used as a trigger to open the **desktop** menu or when the `orientation` is `horizontal` or `vertical`.

_Note: Currently, this block receives the same props as an VTEX Store [Icon](https://github.com/vtex-apps/store-icons#props)._

### `mega-menu-go-back-btn`

This block can go back to the list of items in the first level of the menu (departments) only works when it is a **mobile device** or the `orientation` is `vertical`.

_To configure the desktop version:_

```json
{
  // ...

  "sticky-layout#4-desktop": {
    "children": ["flex-layout.row#4-desktop", "flex-layout.row#mega-menu"]
  },
  "flex-layout.row#4-desktop": {
    "children": [
      "flex-layout.col#trigger-mega-menu"
      // ...
    ]
  },

  "flex-layout.row#mega-menu": {
    "children": ["mega-menu#desktop"]
  },
  "mega-menu#desktop": {
    "props": {
      "openOnly": "horizontal"
    }
  },
  "flex-layout.col#trigger-mega-menu": {
    "props": {
      "verticalAlign": "middle"
    },
    "children": ["mega-menu-trigger-btn"]
  },
  "mega-menu-trigger-btn": {
    "props": {
      "Drawer": "drawer"
    }
  }
}
```

_To configure the mobile version:_

```json
{
  // ...
  "flex-layout.row#1-mobile": {
    "children": [
      "flex-layout.col#trigger-mega-menu"
      // ...
    ],
    "props": {
      // ...
    }
  },

  "drawer": {
    "children": ["mega-menu#mobile"],
    "blocks": ["drawer-header#my-drawer"]
  },
  "mega-menu#mobile": {
    "props": {
      "defaultDepartmentActive": "...",
      "orientation": "vertical",
      "openOnly": "vertical"
    }
  },
  "drawer-header#my-drawer": {
    "children": ["flex-layout.row#drawer-header"]
  },
  "flex-layout.row#drawer-header": {
    "children": [
      "flex-layout.col#mega-menu-go-back-btn",
      "flex-layout.col#spacer",
      "flex-layout.col#drawer-close-button"
    ],
    "props": {
      "blockClass": "drawer-header",
      "preventHorizontalStretch": true,
      "preventVerticalStretch": true,
      "preserveLayoutOnMobile": true,
      "fullWidth": true
    }
  },
  "flex-layout.col#drawer-close-button": {
    "children": ["drawer-close-button"],
    "props": {
      "verticalAlign": "middle",
      "horizontalAlign": "right"
    }
  },
  "flex-layout.col#mega-menu-go-back-btn": {
    "children": ["mega-menu-go-back-btn"],
    "props": {
      "verticalAlign": "middle",
      "horizontalAlign": "left",
      "paddingLeft": 4
    }
  }
}
```

## Notes

### Icons for menu items

In the form of creation and edition of a menu item it is possible to add an icon, currently you can select any of the [ICONPACK](https://github.com/vtex-apps/store-icons/blob/master/styles/iconpacks/iconpack.svg) that comes default with your store, but if you have customized (for more information read the following [guide](https://github.com/vtex-apps/store-icons/blob/master/docs/ICONPACK.md)) that file the modifications will not be visible in the select, therefore you must write the id of the icon manually.

![icon-selector](https://user-images.githubusercontent.com/12108601/122150424-5595f400-ce23-11eb-9f1e-c52c668c35f4.png)

### Styles for menu items

You can customize an element in a basic way using **comma (,)** separated CSS properties, for example:

⚠ _It is important not to abuse this functionality, for complex persoanlizations use [CSS Handle](#customization)._

```
padding-top:5px,
padding-left:20px,
padding-right:20px,
padding-bottom:5px,
font-size:20px,
font-weight:bold,
background-color:yellow,
color:red
```

![custom-item-using-css](https://user-images.githubusercontent.com/12108601/122150523-8118de80-ce23-11eb-80af-182be8348db5.png)

## Customization

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

| CSS Handle                        |
| --------------------------------- |
| `goBackContainer`                 |
| `goBackButton`                    |
| `goBackButtonIcon`                |
| `goBackButtonText`                |
| `menuContainer`                   |
| `menuContainerNav`                |
| `menuItem`                        |
| `submenuContainer`                |
| `styledLink`                      |
| `styledLinkIcon`                  |
| `styledLinkContainer`             |
| `styledLinkContent`               |
| `accordionIconContainer`          |
| `accordionIconContainer—isOpen`   |
| `accordionIconContainer—isClosed` |
| `accordionIcon`                   |
| `submenuContainer`                |
| `submenuList`                     |
| `submenuListVertical`             |
| `submenuItem`                     |
| `submenuItem—isOpen`              |
| `submenuItem—isClosed`            |
| `submenuItemVertical`             |
| `collapsibleContent`              |
| `collapsibleHeaderText`           |
| `seeAllLinkContainer`             |
| `seeAllLink`                      |
| `triggerContainer`                |
| `triggerButtonIcon`               |
| `triggerButtonIcon—active`        |
| `triggerButtonIcon—muted`         |
| `menuContainerVertical`           |
| `departmentsContainer`            |
| `menuContainerNavVertical`        |
| `menuItemVertical`                |
| `submenuContainerVertical`        |

### Upload mega menu data from CSV file

To upload data from a CSV file, You should create an import file with the following structure. The data will then be stored in the VBASE successfully.

![11](https://user-images.githubusercontent.com/8409481/152260407-8f5220d3-9522-41a9-b974-08915240985e.png)

The field `subMenus` is a String with the following structure:

`[{ "id":"submenu1383316", "name":"submenu1", "icon":"","slug":"Menu1/submenu1", "styles":"","display":true, "enableSty":true,"order":1, "slugRoot":"submenu1", "slugRelative":"Menu1", "menu":[{ "id":"sub-tercernivel-menu12121", "name":"sub-tercernivel-menu1-3", "icon":"", "slug":"Menu1/submenu1/menu1-3", "styles":"", "display":true, "enableSty":true, "order":1, "slugRoot":"menu1-3", "slugRelative":"Menu1/submenu1"}] }]`

The file should have the field like to show below:

![12](https://user-images.githubusercontent.com/8409481/152260595-0ba50600-52f3-42db-b754-85b794c4e567.png)

You can add the rows quantity that you want. Remember to keep the structure defined previously in all data.

![13](https://user-images.githubusercontent.com/8409481/152260652-732fbeda-1d61-49ce-afa1-6a19b8d9b05c.png)

Save the file. You can choose any name for the file. Then go to the admin and select the option “upload data”

![14](https://user-images.githubusercontent.com/8409481/152260742-6ee24d1f-48ae-4383-ab02-b3d921a283e4.png)

To generate backup data, download the information from the button “Download CSV”

![15](https://user-images.githubusercontent.com/8409481/152260800-7ecc499a-ba39-4168-8dcd-c0b225f610db.png)

![16](https://user-images.githubusercontent.com/8409481/152260876-07321655-a4ca-43eb-9c92-974ff8f9b12b.png)

This button only is available if the mega menu has data to save. The download file has the same structure defined at the begging of this step.

## NEW FUNCTIONALITY: Choose the orientation of the Mega Menu on the Desktop

In this release, Mega Menu App has new functionality that allows you to choose the orientation. You can choose between Horizontal o Vertical.

**IMPORTANT: before choosing the vertical option to desktop, configure the blocks in your store. Go to step 3 of this guide to configure the blocks**

When you guarantee the configuration of blocks in the store, go to the new button to settings of Mega Menu and change the orientation.

![image](https://user-images.githubusercontent.com/8409481/185653890-f6c423bd-8d32-404e-a416-141820f73112.png)

![image](https://user-images.githubusercontent.com/8409481/185654543-a245860e-d661-4011-a89a-7b3db33b3cd3.png)

Press the `Confirm`button to save the configuration of orientation menu.

```


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

[Assistant]
Here's the implementation:

```graphql
type Query {
  menus(isMobile: Boolean): [Menu]
  menu(id: ID!): Menu
  settings: [Settings]
  setting(id: ID!): Settings
}

type Mutation {
  editMenu(menuInput: MenuInput!): [Menu]
  deleteMenu(id: String, idSecond: String, idThird: String): [Menu]
  createMenu(menuInput: MenuInput!): Menu
  uploadMenu(menuData: [MenuInput]): [Menu]
  createEditSettings(settingsInput: SettingsInput!): Settings
}

```


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

[User] Show me the implementation of mega-menu/node/service.json from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "memory": 256,
  "ttl": 10,
  "timeout": 1,
  "minReplicas": 2,
  "maxReplicas": 5
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "mega-menu",
  "private": true,
  "license": "MIT",
  "dependencies": {},
  "scripts": {
    "lint": "tsc --noEmit && tslint -c tslint.json './**/*.ts'"
  },
  "devDependencies": {
    "@types/node": "^12.0.0",
    "@types/ramda": "types/npm-ramda#dist",
    "@vtex/api": "6.45.15",
    "tslint": "^5.12.0",
    "tslint-config-vtex": "^2.1.0",
    "typescript": "3.9.7",
    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles",
    "vtex.device-detector": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.device-detector@0.2.6/public/@types/vtex.device-detector",
    "vtex.native-types": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.native-types@0.8.0/public/@types/vtex.native-types",
    "vtex.store-drawer": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-drawer@0.16.2/public/@types/vtex.store-drawer",
    "vtex.store-icons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.1/public/@types/vtex.styleguide"
  },
  "version": "2.10.1"
}

```


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

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

[Assistant]
Here's the implementation:

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

import { resolvers } from './resolvers'
import { Clients } from './clients'

const MEDIUM_TIMEOUT_MS = 2 * 1000

// Export a service that defines resolvers and clients options
export default new Service<Clients, RecorderState, ParamsContext>({
  clients: {
    implementation: Clients,
    options: {
      default: {
        timeout: MEDIUM_TIMEOUT_MS,
      },
    },
  },
  graphql: {
    resolvers,
  },
})

```


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

[Assistant]
Here's the implementation:

```tsx
import Wrapper from './MegaMenu/wrapper'

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

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable max-params */
import type { FC } from 'react'
import React, { useState, useMemo, useCallback, useEffect } from 'react'
import { Tabs, Tab, Layout, PageHeader, Alert } from 'vtex.styleguide'
import { useQuery } from 'react-apollo'
import type { InjectedIntlProps } from 'react-intl'
import { defineMessages, injectIntl } from 'react-intl'
import { formatIOMessage } from 'vtex.native-types'
import { FaCog } from 'react-icons/fa'

import FirsLevelContainer from './Category/FirstLevelContainer'
import SecondLevelContainer from './Category/SecondLevelContainer'
import ThirdLevelContainer from './Category/ThirdLevelContainer'
import CategoryContainer from './Category/CategoryContainer'
import SettingsMenu from './Category/SettingsMenu'
import GET_MENUS from './graphql/queries/getMenus.graphql'
import { DataMenuProvider } from './shared'
import type { DataMenu, DeleteArrayType } from './shared'
import styles from './ConfigMenu.css'

interface TypeDataItems {
  menus: DataMenu[]
}

const messages = defineMessages({
  firstLevelTab: {
    defaultMessage: '',
    id: 'admin/mega-menu.tabs.first',
  },
  secondLevelTab: {
    defaultMessage: '',
    id: 'admin/mega-menu.tabs.second',
  },
  thirdLevelTab: {
    defaultMessage: '',
    id: 'admin/mega-menu.tabs.third',
  },
  titleApp: {
    defaultMessage: '',
    id: 'admin/mega-menu.items.titleApp',
  },
})

const ConfigMenuContainer: FC<InjectedIntlProps> = ({ intl }) => {
  const [currentTab, setCurrentTab] = useState(1)
  const { loading, data } = useQuery(GET_MENUS, {
    fetchPolicy: 'no-cache',
  })

  const typeArraData: DataMenu[] = []
  const typeDataItems: TypeDataItems = { menus: [] }
  const [alert, setAlert] = useState(false)
  const [message, setMessage] = useState('')
  const [typeModal, setTypeModal] = useState('success')
  const [dataMenuArray, setDataMenuArr] = useState(typeArraData)
  const [dataItems, setDataItems] = useState(typeDataItems)
  const [loadingData, setLoadingData] = useState(true)
  const [showSettings, setShowSettings] = useState(false)

  const url = window.location.href.slice(-1)

  useEffect(() => {
    if (!loading) {
      setCurrentTab(parseInt(url, 10))
      setLoadingData(false)
    }

    if (data) {
      setDataItems(data)
    }
  }, [data]) // eslint-disable-line react-hooks/exhaustive-deps

  const showAlert = useCallback(
    (
      show: boolean,
      messageAlert: string,
      newData: DeleteArrayType,
      type?: string
    ) => {
      if (type) if (type === 'warning') setTypeModal('warning')
      if (newData) newData.deleteMenu
      setAlert(show)
      setMessage(messageAlert)
    },
    []
  )

  const clearLocalStorage = () => {
    localStorage.removeItem('idFirstlvl')
    localStorage.removeItem('idSecondlvl')
    localStorage.removeItem('idFirstLevel')
  }

  const updateData = useCallback((dataMenuArr: DataMenu[], type: string) => {
    if (type === 'search') setDataMenuArr(dataMenuArr)
    else setDataItems({ menus: dataMenuArr })
  }, []) // eslint-disable-line react-hooks/exhaustive-deps

  const dataMenuCtx = useMemo(
    () => ({
      dataMenu:
        dataMenuArray.length > 0 ? dataMenuArray : dataItems?.menus || [],
      showAlert,
      updateData,
      loading: loadingData,
    }),
    [dataItems, dataMenuArray, showAlert, updateData, loadingData]
  )

  return (
    <div>
      {!!alert && (
        <Alert type={typeModal} onClose={() => setAlert(false)}>
          {message}
        </Alert>
      )}
      <DataMenuProvider value={dataMenuCtx}>
        <Layout
          pageHeader={
            <PageHeader
              title={formatIOMessage({
                id: messages.titleApp.id,
                intl,
              }).toString()}
            />
          }
          fullWidth
        >
          {showSettings && (
            <SettingsMenu
              showSettings={showSettings}
              setShowSettings={setShowSettings}
            />
          )}
          <div className={styles.btnSettings}>
            <CategoryContainer
              setDataItems={setDataItems}
              showAlert={showAlert}
              dataMenu={dataItems}
            />
          </div>
          <div className="flex justify-end mt5">
            <FaCog
              size={25}
              color="0C389F"
              cursor="pointer"
              onClick={() => setShowSettings(!showSettings)}
            />
          </div>
          <Tabs>
            <Tab
              label={formatIOMessage({ id: messages.firstLevelTab.id, intl })}
              active={currentTab === 1}
              onClick={() => {
                setCurrentTab(1)
                clearLocalStorage()
              }}
            >
              <FirsLevelContainer />
            </Tab>
            <Tab
              label={formatIOMessage({ id: messages.secondLevelTab.id, intl })}
              active={currentTab === 2}
              onClick={() => {
                setCurrentTab(2)
                clearLocalStorage()
              }}
            >
              <SecondLevelContainer />
            </Tab>
            <Tab
              label={formatIOMessage({ id: messages.thirdLevelTab.id, intl })}
              active={currentTab === 3}
              onClick={() => {
                setCurrentTab(3)
                clearLocalStorage()
              }}
            >
              <ThirdLevelContainer />
            </Tab>
          </Tabs>
        </Layout>
      </DataMenuProvider>
    </div>
  )
}

export default injectIntl(ConfigMenuContainer)

```


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

[Assistant]
Here's the implementation:

```tsx
import GoBackButton from './MegaMenu/components/GoBackButton'

export default GoBackButton

```


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

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

[Assistant]
Here's the implementation:

```tsx
import TriggerButton from './MegaMenu/components/TriggerButton'

export default TriggerButton

```


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

[User] Show me the implementation of mega-menu/react/package.json from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "mega-menu",
  "private": true,
  "license": "MIT",
  "scripts": {
    "test": "vtex-test-tools test"
  },
  "dependencies": {
    "classnames": "^2.3.1",
    "export-to-csv": "^0.2.1",
    "mobx": "^6.3.2",
    "mobx-react-lite": "^3.2.0",
    "react-apollo": "^3.1.5",
    "react-csv-reader": "^3.4.0",
    "react-icons": "^4.4.0",
    "react-intl": "^5.20.6",
    "react-loading-skeleton": "^2.2.0"
  },
  "devDependencies": {
    "@types/node": "^11.12.1",
    "@types/react": "^16.8.10",
    "@types/react-intl": "^2.3.17",
    "@vtex/test-tools": "^3.3.2",
    "@vtex/tsconfig": "^0.5.6",
    "apollo-client": "^2.4.7",
    "graphql": "^15.5.0",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "typescript": "3.9.7",
    "vtex.css-handles": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.css-handles@1.0.0/public/@types/vtex.css-handles",
    "vtex.device-detector": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.device-detector@0.2.6/public/@types/vtex.device-detector",
    "vtex.native-types": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.native-types@0.8.0/public/@types/vtex.native-types",
    "vtex.render-runtime": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.render-runtime@8.132.4/public/@types/vtex.render-runtime",
    "vtex.store-drawer": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-drawer@0.16.2/public/@types/vtex.store-drawer",
    "vtex.store-icons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-icons@0.18.0/public/@types/vtex.store-icons",
    "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.146.1/public/@types/vtex.styleguide"
  },
  "version": "2.10.1"
}

```


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

[User] Show me the implementation of mega-menu/react/ConfigMenu.css from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```css
.btnSettings {
  position: fixed;
  bottom: 20px;
  right: 40px;
  z-index: 1;
}

```


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

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

[Assistant]
Here's the implementation:

```tsx
/* eslint-disable prettier/prettier */
import type { FC } from 'react'
import React, { useState, useEffect } from 'react'
import {
  Toggle,
  Input,
  PageBlock,
  Layout,
  PageHeader,
  ButtonWithIcon,
  FloatingActionBar,
  Card,
  Alert,
  Tooltip,
  Textarea,
  Spinner,
} from 'vtex.styleguide'
import { useRuntime } from 'vtex.render-runtime'
import { useQuery, useMutation } from 'react-apollo'
import type { InjectedIntlProps } from 'react-intl'
import { injectIntl } from 'react-intl'
import { formatIOMessage } from 'vtex.native-types'

import IconInfo from './icons/IconInfo'
import IconArrowLeft from './icons/IconArrowLeft'
import CREATE from './graphql/mutations/create.graphql'
import GETMENU from './graphql/queries/getMenu.graphql'
import EDIT from './graphql/mutations/edit.graphql'
import { IconSelector, messagesForm } from './shared'
import type { DataMenu, MenuItem } from './shared'

const arrowLeft = <IconArrowLeft />

interface FormComponentProps {
  id: string
  params: {
    menu: string
  }
}

const messages = messagesForm

const FormComponent: FC<FormComponentProps & InjectedIntlProps> = (props) => {
  const dataMenuTypeArray: DataMenu[] = []
  const dataMenuType: DataMenu = {
    icon: '',
    id: '',
    name: '',
    slug: '',
    styles: '',
    menu: [],
    display: false,
    enableSty: false,
  }

  const { navigate } = useRuntime()

  const [name, setName] = useState('')
  const [icon, setIcon] = useState('')
  const [slug, setSlug] = useState('')
  const [slugRoot, setSlugRoot] = useState('')
  const [slugRelative, setSlugRelative] = useState('')
  const [styles, setStyles] = useState('')
  const [display, setDisplay] = useState(true)
  const [enableSty, setEnableSty] = useState(true)
  const [mobile, setMobile] = useState(true)
  const [desktop, setDesktop] = useState(true)
  const [idMenu, setIdMenu] = useState('')
  const [mainMenu, setMainMenu] = useState(dataMenuType)
  const [subMenu, setSubMenu] = useState(dataMenuTypeArray)
  const [alert, setAlert] = useState(false)
  const [order, setOrder] = useState(0)
  const [message, setMessage] = useState('')
  const [levelInfo, setLevelInfo] = useState(Object)
  const [messageName, setMessageName] = useState('')
  const [messageSlug, setMessageSlug] = useState('')

  const responseForm = JSON.parse(decodeURIComponent(props.params.menu))

  const [createNewMenu, { data: dataSave }] = useMutation(CREATE, {
    fetchPolicy: 'no-cache',
  })

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

  const { loading, data: dataMenu } = useQuery(GETMENU, {
    variables: {
      id: responseForm.firstLevel ? responseForm.firstLevel : responseForm.id,
    },
    fetchPolicy: 'no-cache',
  })

  const btnSave = formatIOMessage({
    id: messages.btnSaveForm.id,
    intl: props.intl,
  }).toString()

  const messageTranslate = (key: string) => {
    const keyObj = `admin/mega-menu.items.${key}`

    return formatIOMessage({
      id: keyObj,
      intl: props.intl,
    }).toString()
  }

  /* eslint max-params: ["error", 13] */
  /* eslint-env es9 */
  const setDataForm = (
    idenMenu: string,
    nameMenu: string,
    iconMenu: string,
    slugMenu: string,
    slugRootMenu: string,
    slugRelativeMenu: string,
    stylesMenu: string,
    subMenuData: DataMenu[],
    displayMenu: boolean,
    enableStyMenu: boolean,
    orderMenu: number,
    mobileMenu: boolean,
    desktopMenu: boolean
  ) => {
    setIdMenu(idenMenu)
    setName(nameMenu)
    setIcon(iconMenu)
    setSlug(slugMenu)
    setSlugRoot(slugRootMenu)
    setSlugRelative(slugRelativeMenu)
    setStyles(stylesMenu)
    setSubMenu(subMenuData)
    setDisplay(displayMenu)
    setEnableSty(enableStyMenu)
    setOrder(orderMenu)
    setMobile(mobileMenu)
    setDesktop(desktopMenu)
  }

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

    let secondName = ''
    let secondLevelSlug = ''

    setMainMenu(dataMenu.menu)

    if (responseForm.type === 'edit') {
      if (responseForm.level === 'firstLevel') {
        document.getElementsByClassName('c-muted-2')[0].textContent =
          dataMenu.menu.icon
        setDataForm(
          dataMenu.menu.id,
          dataMenu.menu.name,
          dataMenu.menu.icon,
          dataMenu.menu.slug,
          dataMenu.menu.slugRoot,
          dataMenu.menu.slugRelative,
          dataMenu.menu.styles,
          dataMenu.menu.menu,
          dataMenu.menu.display,
          dataMenu.menu.enableSty,
          dataMenu.menu.order,
          dataMenu.menu.mobile ?? mobile,
          dataMenu.menu.desktop ?? desktop
        )
      } else if (responseForm.level === 'secondLevel') {
        setLevelInfo({ firstLevel: dataMenu.menu.name })
        const submenu = dataMenu.menu.menu.filter(
          (item: DataMenu) => item.id === responseForm.id
        )

        let rootRelative = ['', '']

        if (
          submenu[0].slug &&
          !submenu[0].slugRoot &&
          !submenu[0].slugRelative
        ) {
          rootRelative = submenu[0].slug.split('/')

          rootRelative.shift()
        }

        setDataForm(
          submenu[0].id,
          submenu[0].name,
          submenu[0].icon,
          submenu[0].slug,
          submenu[0].slugRoot ?? rootRelative[1],
          submenu[0].slugRelative ?? rootRelative[0],
          submenu[0].styles,
          [],
          submenu[0].display,
          submenu[0].enableSty,
          submenu[0].order,
          submenu[0].mobile ?? mobile,
          submenu[0].desktop ?? desktop
        )
      } else {
        const tempArrayTL: DataMenu[] = []

        dataMenu.menu.menu.forEach((item: DataMenu) => {
          if (item.id === responseForm.secondLevel) {
            secondName = item.name
          }

          if (item.menu) {
            item.menu.forEach((i: DataMenu) => {
              if (i.id === responseForm.id) {
                tempArrayTL.push(i)
              }
            })
          }
        })

        setSubMenu(tempArrayTL)
        let rootRelative = ['', '']

        if (
          tempArrayTL[0].slug &&
          !tempArrayTL[0].slugRoot &&
          !tempArrayTL[0].slugRelative
        ) {
          rootRelative = tempArrayTL[0].slug.split('/')

          rootRelative.shift()

          const rootPath = `${rootRelative[0]}/${rootRelative[1]}`

          rootRelative = [rootRelative[2], rootPath]
        }

        setDataForm(
          tempArrayTL[0].id,
          tempArrayTL[0].name,
          tempArrayTL[0].icon,
          tempArrayTL[0].slug,
          tempArrayTL[0].slugRoot ?? rootRelative[0],
          tempArrayTL[0].slugRelative ?? rootRelative[1],
          tempArrayTL[0].styles,
          [],
          tempArrayTL[0].display,
          tempArrayTL[0].enableSty,
          tempArrayTL[0].order ?? 0,
          tempArrayTL[0].mobile ?? true,
          tempArrayTL[0].desktop ?? true
        )

        setLevelInfo({
          firstLevel: dataMenu.menu.name,
          secondLevel: secondName,
        })
      }
    } else {
      if (responseForm.level === 'thirdLevel') {
        dataMenu.menu.menu.forEach((item: DataMenu) => {
          if (item.id === responseForm.secondLevel) {
            secondName = item.name
            secondLevelSlug = item.slug ?? ''
          }
        })
      }

      setLevelInfo({
        firstLevel: dataMenu.menu.name,
        secondLevel: secondName,
        firstLevelSlugRelative: dataMenu.menu.slug,
        secondLevelSlugRelative: secondLevelSlug,
      })
    }
  }, [dataMenu]) // eslint-disable-line react-hooks/exhaustive-deps

  const returnHome = () => {
    const tab =
      responseForm.level === 'firstLevel'
        ? '1'
        : responseForm.level === 'secondLevel'
        ? '2'
        : '3'

    navigate({
      to: `/admin/app/mega-menu/${tab}`,
    })
  }

  const activateAlert = () => {
    setAlert(true)
    window.scrollTo(0, 0)
    setTimeout(() => {
      setAlert(false)
    }, 4000)
  }

  useEffect(() => {
    if (dataSave) {
      activateAlert()
    }
  }, [dataSave]) // eslint-disable-line react-hooks/exhaustive-deps

  useEffect(() => {
    if (dataEdit) {
      activateAlert()
    }
  }, [dataEdit])

  const changeStyle = (e: { id: string; value: string }) => {
    setAlert(false)
    setMessageName('')
    setMessageSlug('')
    switch (e.id) {
      case 'name':
        setName(e.value)
        break

      case 'slug':
        setSlug(e.value)
        break

      case 'slugRoot':
        setSlugRoot(e.value)
        break

      case 'icon':
        setIcon(e.value)
        break

      case 'styles':
        setStyles(e.value)
        break

      case 'display':
        setDisplay(!display)
        break

      case 'enableSty':
        setEnableSty(!enableSty)
        break

      case 'slugRelative':
        setSlugRelative(e.value)
        break

      case 'mobile':
        setMobile(!mobile)
        break

      case 'desktop':
        setDesktop(!desktop)
        break

      default:
        break
    }
  }

  const randomId = () => {
    const n = 50
    const arr = new Array(n)

    for (let i = 0; i < n; i++) {
      arr[i] = i + 1
    }

    arr.sort(() => (Math.random() > 0.5 ? 1 : -1))
    const randomNumber = arr.slice(0, 3).join('')

    return randomNumber
  }

  const insertSubMenu = (mainMenuLevel: DataMenu, subMenuLevel: MenuItem[]) => {
    menuInput({
      variables: {
        editMenu: {
          id: mainMenuLevel.id,
          name: mainMenuLevel.name,
          icon: mainMenuLevel.icon,
          slug: mainMenuLevel.slug,
          styles: mainMenuLevel.styles,
          menu: subMenuLevel,
          display: mainMenuLevel.display,
          enableSty: mainMenuLevel.enableSty,
          order: mainMenuLevel.order,
          slugRoot: mainMenuLevel.slugRoot,
          slugRelative: mainMenuLevel.slugRelative,
          mobile: mainMenuLevel.mobile,
          desktop: mainMenuLevel.desktop,
        },
      },
    })
  }

  const saveChanges = () => {
    const menu = mainMenu
    let secondMenu = subMenu

    if (responseForm.level === 'firstLevel') {
      createNewMenu({
        variables: {
          menuInput: {
            id: name + randomId(),
            name,
            icon,
            slug,
            styles,
            menu: subMenu,
            display,
            enableSty,
            mobile,
            desktop,
          },
        },
      })
      setMessage(messageTranslate('createItem'))
    } else if (responseForm.level === 'secondLevel') {
      if (menu.menu) secondMenu = menu.menu
      const orderSubMenu = menu.menu ? menu.menu.length : 0

      secondMenu.push({
        id: name + randomId(),
        name,
        icon,
        slug: `${menu.slug}/${slug}`,
        styles,
        display,
        enableSty,
        order: orderSubMenu + 1,
        slugRoot: slug,
        slugRelative: menu.slug,
        mobile,
        desktop,
      })

      insertSubMenu(
        {
          id: menu.id,
          name: menu.name,
          icon: menu.icon,
          slug: menu.slug,
          styles: menu.styles,
          display: menu.display,
          enableSty: menu.enableSty,
          order: menu.order,
          mobile,
          desktop,
        },
        secondMenu
      )
      setMessage(messageTranslate('createItem'))
    } else {
      const getOrderthr = menu.menu?.filter(
        (item: MenuItem) => item.id === responseForm.secondLevel
      )

      const valueOrder = getOrderthr ? getOrderthr[0].menu : []
      const valueSlug = getOrderthr ? getOrderthr[0].slug : []

      const newSubMenu = {
        id: name + randomId(),
        name,
        icon,
        slug: `${valueSlug}/${slug}`,
        styles,
        display,
        enableSty,
        order: valueOrder ? valueOrder.length + 1 : 1,
        slugRoot: slug,
        slugRelative: `${valueSlug}`,
        mobile,
        desktop,
      }

      if (menu.menu) {
        menu.menu.forEach((i: DataMenu) => {
          if (i.id === responseForm.secondLevel) {
            if (i.menu) {
              i.menu.push(newSubMenu)
            } else {
              i.menu = [newSubMenu]
            }
          }
        })
      }

      insertSubMenu(
        {
          id: menu.id,
          name: menu.name,
          icon: menu.icon,
          slug: menu.slug,
          styles: menu.styles,
          display: menu.display,
          enableSty: menu.enableSty,
          order: menu.order,
          slugRoot: menu.slugRoot,
          slugRelative: menu.slugRelative,
          mobile: menu.mobile,
          desktop: menu.desktop,
        },
        menu.menu ? menu.menu : []
      )
      setMessage(messageTranslate('createItem'))
    }
  }

  const getNewPath = (
    slugPath: string,
    slugRootPath: string | undefined,
    slugRelativePath: string | undefined
  ) => {
    let rootRelative = ['']

    if (slugPath && !slugRootPath && !slugRelativePath) {
      rootRelative = slugPath.split('/')
      rootRelative.shift()
    }

    return rootRelative
  }

  const editItem = () => {
    const menu = { ...mainMenu }

    let tempSecond: DataMenu[] = []

    if (responseForm.level === 'firstLevel') {
      const menuLevelTwo = menu.menu ? menu.menu : []
      const menuLevelTwoUpdate: MenuItem[] = []

      if (menuLevelTwo?.length) {
        menuLevelTwo.forEach((item: MenuItem) => {
          if (item.slugRelative === slug) return
          const dataPath = getNewPath(
            item.slug,
            item.slugRoot,
            item.slugRelative
          )

          let createSlug = !item.slugRoot
            ? `${slug}/${dataPath[1]}`
            : item.slugRoot === null
            ? `${slug}/`
            : `${slug}/${item.slugRoot}`

          createSlug = createSlug.replace('undefined', '')

          const updateLevel: MenuItem = {
            ...item,
            slug: createSlug,
            slugRelative: slug,
            slugRoot: !item.slugRoot ? dataPath[1] : item.slugRoot,
          }

          menuLevelTwoUpdate.push(updateLevel)
        })
      }

      let menuLevelThirdUpdate: MenuItem[] = []

      if (menuLevelTwoUpdate?.length) {
        menuLevelTwoUpdate.forEach((itemSecond: MenuItem) => {
          menuLevelThirdUpdate = []
          if (itemSecond.menu?.length) {
            itemSecond.menu.forEach((itemThird: MenuItem) => {
              if (itemSecond.slugRelative === itemThird.slug) return

              const dataPath = getNewPath(
                itemThird.slug,
                itemThird.slugRoot,
                itemThird.slugRelative
              )

              const updateLevel: MenuItem = {
                ...itemThird,
                slug:
                  dataPath.length >= 3
                    ? `${slug}/${dataPath[1]}/${dataPath[2]}`
                    : itemThird.slugRoot === null
                    ? `${itemSecond.slug}/`
                    : `${itemSecond.slug}/${itemThird.slugRoot}`,
                slugRelative:
                  dataPath.length >= 3
                    ? `${slug}/${dataPath[1]}`
                    : itemSecond.slug,
                slugRoot: !itemThird.slugRoot
                  ? dataPath[2]
                  : itemThird.slugRoot,
              }

              menuLevelThirdUpdate.push(updateLevel)
            })

            itemSecond.menu = menuLevelThirdUpdate
          }
        })
      }

      const subMenuOtherLevels: MenuItem[] =
        menuLevelTwoUpdate.length > 0 ? menuLevelTwoUpdate : menuLevelTwo

      insertSubMenu(
        {
          id: idMenu,
          name,
          icon,
          slug,
          styles,
          display,
          enableSty,
          order,
          mobile,
          desktop,
        },
        subMenuOtherLevels
      )

      setMessage(messageTranslate('editItem'))
    } else if (responseForm.level === 'secondLevel') {
      const menuSecondSlug = `${slugRelative}/${slugRoot}`

      if (menu.menu) {
        tempSecond = menu.menu.filter((i: DataMenu) => i.id === responseForm.id)

        tempSecond[0].name = name
        tempSecond[0].icon = icon
        tempSecond[0].slug = menuSecondSlug
        tempSecond[0].slugRoot = slugRoot
        tempSecond[0].slugRelative = slugRelative
        tempSecond[0].styles = styles
        tempSecond[0].display = display
        tempSecond[0].enableSty = enableSty
        tempSecond[0].order = order
        tempSecond[0].mobile = mobile
        tempSecond[0].desktop = desktop
      }

      let menuLevelThirdUpdate: MenuItem[] = []

      menu.menu?.forEach((itemSecond: MenuItem) => {
        menuLevelThirdUpdate = []
        if (itemSecond.menu?.length) {
          itemSecond.menu.forEach((itemThird: MenuItem) => {
            if (itemSecond.slugRelative === itemThird.slug) return

            const dataPath = getNewPath(
              itemThird.slug,
              itemThird.slugRoot,
              itemThird.slugRelative
            )

            let createSlug =
              dataPath.length >= 3
                ? `${menuSecondSlug}/${dataPath[2]}`
                : itemThird.slugRoot === null
                ? `${itemSecond.slug}/`
                : `${itemSecond.slug}/${itemThird.slugRoot}`

            createSlug = createSlug.replace('undefined', '')

            const updateLevel: MenuItem = {
              ...itemThird,
              slug: createSlug,
              slugRelative:
                dataPath.length >= 3 ? `${menuSecondSlug}` : itemSecond.slug,
              slugRoot: !itemThird.slugRoot ? dataPath[2] : itemThird.slugRoot,
            }

            menuLevelThirdUpdate.push(updateLevel)

            itemSecond.menu = menuLevelThirdUpdate
          })
        }
      })

      insertSubMenu(
        {
          id: menu.id,
          name: menu.name,
          icon: menu.icon,
          slug: menu.slug,
          slugRoot: menu.slugRoot,
          slugRelative: menu.slugRelative,
          styles: menu.styles,
          display: menu.display,
          enableSty: menu.enableSty,
          order: menu.order,
          mobile: menu.mobile,
          desktop: menu.desktop,
        },
        menu.menu ? menu.menu : []
      )
      setMessage(messageTranslate('editItem'))
    } else if (responseForm.level === 'thirdLevel') {
      let tempThird: MenuItem[] = []
      let tempSecondLvl: MenuItem[] = []

      if (menu.menu) {
        tempSecondLvl = menu.menu.filter(
          (i: DataMenu) => i.id === responseForm.secondLevel
        )

        if (tempSecondLvl[0].menu) {
          tempThird = tempSecondLvl[0].menu.filter(
            (j: DataMenu) => j.id === responseForm.id
          )

          let menuThirdSlug = `${slugRelative}/${slugRoot}`

          menuThirdSlug = menuThirdSlug.replace('undefined', '')

          tempThird[0].name = name
          tempThird[0].icon = icon
          tempThird[0].slug = menuThirdSlug
          tempThird[0].slugRoot = slugRoot
          tempThird[0].slugRelative = slugRelative
          tempThird[0].styles = styles
          tempThird[0].display = display
          tempThird[0].enableSty = enableSty
          tempThird[0].order = order
          tempThird[0].mobile = mobile
          tempThird[0].desktop = desktop
        }
      }

      insertSubMenu(
        {
          id: menu.id,
          name: menu.name,
          icon: menu.icon,
          slug: menu.slug,
          slugRoot: menu.slugRoot,
          slugRelative: menu.slugRelative,
          styles: menu.styles,
          display: menu.display,
          enableSty: menu.enableSty,
          order: menu.order,
          mobile: menu.mobile,
          desktop: menu.desktop,
        },
        menu.menu ? menu.menu : []
      )

      setMessage(messageTranslate('editItem'))
    }
  }

  return (
    <div>
      {alert ? (
        <Alert
          type="success"
          onClose={() => {
            setAlert(false)
            setMessage('')
          }}
        >
          {message}
        </Alert>
      ) : (
        <div />
      )}
      <Layout
        pageHeader={
          <PageHeader
            title={
              responseForm.type === 'edit'
                ? messageTranslate('titleForm')
                : responseForm.level === 'firstLevel'
                ? messageTranslate('newItemFirst')
                : responseForm.level === 'secondLevel'
                ? messageTranslate('newItemSecond')
                : messageTranslate('newItemThird')
            }
          />
        }
        fullWidth
      >
        <div className="mb3 flex">
          <div className="w-50">
            <ButtonWithIcon
              icon={arrowLeft}
              variation="tertiary"
              onClick={returnHome}
            >
              {messageTranslate('backBtnForm')}
            </ButtonWithIcon>
          </div>
        </div>
        {(responseForm.firstLevel && !responseForm.secondLevel) ||
        (responseForm.type === 'new' &&
          responseForm.level === 'secondLevel') ? (
          <div className="mb5">
            <Card>
              <div className=" ml4">
                <div className="t-heading-5  mb4">
                  {messageTranslate('infoFormTitle')}
                </div>
                <p>
                  <b>{messageTranslate('infoFormSubtitle')}</b>
                </p>
                <p>{levelInfo.firstLevel}</p>
              </div>
            </Card>
          </div>
        ) : (
          <div />
        )}
        {(responseForm.firstLevel && responseForm.secondLevel) ||
        (responseForm.type === 'new' && responseForm.level === 'thirdLevel') ? (
          <div className="mb5">
            <div className="flex">
              <div className="w-50 mr4">
                <Card>
                  <div className=" ml4">
                    <div className="t-heading-5  mb4">
                      {messageTranslate('infoFormTitle')}
                    </div>
                    <p>
                      <b>{messageTranslate('infoFormSubtitle')}</b>
                    </p>
                    <p>{levelInfo.firstLevel}</p>
                  </div>
                </Card>
              </div>
              <div className="w-50">
                <Card>
                  <div className="mr4">
                    <div className="t-heading-5 mb4">
                      {messageTranslate('infoForm2Title')}
                    </div>
                    <p>
                      <b>{messageTranslate('infoForm2Subtitle')}</b>
                    </p>
                    <p>{levelInfo.secondLevel}</p>
                  </div>
                </Card>
              </div>
            </div>
          </div>
        ) : (
          <div />
        )}
        <PageBlock variation="aside">
          {loading ? (
            <div style={{ textAlign: 'center' }} className="mt8">
              <Spinner />
              <p>{messageTranslate('loading')}</p>
            </div>
          ) : (
            <div>
              <div className="t-heading-5  mb4">
                {messageTranslate('subTitleForm')}
              </div>
              <p>{messageTranslate('infoForm')}</p>
              <div>
                <div className="w-100 ml4 mr4">
                  <div className="mb5">
                    <Input
                      placeholder=""
                      label={messageTranslate('input1Form')}
                      value={name}
                      id="name"
                      errorMessage={messageName}
                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                        changeStyle({ id: e.target.id, value: e.target.value })
                      }
                    />
                  </div>
                  <div className="mb5">
                    {responseForm.firstLevel ? (
                      <>
                        <div className="flex items-center">
                          <p className="mb2">
                            {messageTranslate('input2Form')}
                          </p>
                          <Tooltip label={messageTranslate('tooltip3')}>
                            <div className="c-on-base pointer pt6 pl2">
                              <IconInfo />
                            </div>
                          </Tooltip>
                        </div>
                        <div className="flex items-center">
                          <div className="w-50 mr3">
                            <Input
                              placeholder=""
                              value={slugRelative}
                              id="slugRelative"
                              errorMessage={messageSlug}
                              onChange={(
                                e: React.ChangeEvent<HTMLInputElement>
                              ) =>
                                changeStyle({
                                  id: e.target.id,
                                  value: e.target.value,
                                })
                              }
                            />
                          </div>
                          <div className="w-50">
                            <Input
                              placeholder=""
                              value={slugRoot}
                              id="slugRoot"
                              errorMessage={messageSlug}
                              onChange={(
                                e: React.ChangeEvent<HTMLInputElement>
                              ) =>
                                changeStyle({
                                  id: e.target.id,
                                  value: e.target.value,
                                })
                              }
                            />
                          </div>
                        </div>
                      </>
                    ) : (
                      <>
                        {(responseForm.type === 'new' &&
                          responseForm.level === 'secondLevel') ||
                        (responseForm.type === 'new' &&
                          responseForm.level === 'thirdLevel') ? (
                          <>
                            <p className="mb2">
                              {messageTranslate('input2Form')}
                            </p>
                            <div className="flex items-center">
                              <label className="w-100 pa3 br2 bg-muted-3 hover-bg-muted-3 active-bg-muted-3 c-on-muted-3 hover-c-on-muted-3 active-c-on-muted-3 dib mr3">
                                {responseForm.level === 'secondLevel'
                                  ? levelInfo.firstLevelSlugRelative
                                  : levelInfo.secondLevelSlugRelative}
                              </label>
                              <Input
                                placeholder=""
                                value={slug}
                                id="slug"
                                errorMessage={messageSlug}
                                onChange={(
                                  e: React.ChangeEvent<HTMLInputElement>
                                ) =>
                                  changeStyle({
                                    id: e.target.id,
                                    value: e.target.value,
                                  })
                                }
                              />
                            </div>
                          </>
                        ) : (
                          <Input
                            placeholder=""
                            value={slug}
                            label={messageTranslate('input2Form')}
                            id="slug"
                            errorMessage={messageSlug}
                            onChange={(
                              e: React.ChangeEvent<HTMLInputElement>
                            ) =>
                              changeStyle({
                                id: e.target.id,
                                value: e.target.value,
                              })
                            }
                          />
                        )}
                      </>
                    )}
                  </div>
                </div>
                <div className="w-100 ml4 mr4">
                  <div className="mb5">
                    <div className="flex items-center">
                      <p className="mb2">{messageTranslate('input3Form')}</p>
                      <Tooltip label={messageTranslate('tooltip')}>
                        <div className="c-on-base pointer pt6 pl2">
                          <IconInfo />
                        </div>
                      </Tooltip>
                    </div>

                    <IconSelector
                      onChange={
                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
                        (e: any) => {
                          if (e) {
                            changeStyle({ id: 'icon', value: e.value })
                          } else {
                            changeStyle({ id: 'icon', value: '' })
                          }
                        }
                      }
                    />
                  </div>
                  <div className="mb5">
                    <Textarea
                      label={
                        <div className="flex items-center">
                          <p>{messageTranslate('input4Form')}</p>
                          <Tooltip label={messageTranslate('tooltip2')}>
                            <div className="c-on-base pointer pt4 pl2">
                              <IconInfo />
                            </div>
                          </Tooltip>
                        </div>
                      }
                      value={styles}
                      id="styles"
                      placeholder="i.e. font-size:10px,color:red"
                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                        changeStyle({
                          id: e.target.id,
                          value: e.target.value,
                        })
                      }
                      resize="none"
                    />
                  </div>
                </div>
              </div>
            </div>
          )}
          <div>
            <div className="t-heading-5  mb4">
              {messageTranslate('titleSubBlock')}
            </div>
            <div className="mt4">
              <p>{messageTranslate('check1Block')}</p>
              <Toggle
                label={messageTranslate('subCheck1Block')}
                checked={display}
                id="display"
                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                  changeStyle({ id: e.target.id, value: e.target.value })
                }
              />
            </div>
            <div className="mt7 mb7">
              <p>{messageTranslate('input4Form')}</p>
              <Toggle
                label={messageTranslate('subCheck2Block')}
                checked={enableSty}
                id="enableSty"
                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                  changeStyle({ id: e.target.id, value: e.target.value })
                }
              />
            </div>
            <div className="mt7 mb7">
              <p>Mobile</p>
              <Toggle
                label={mobile ? 'Show' : 'Hide'}
                checked={mobile}
                id="mobile"
                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                  changeStyle({ id: e.target.id, value: e.target.value })
                }
              />
            </div>
            <div className="mt7 mb7">
              <p>Desktop</p>
              <Toggle
                label={desktop ? 'Show' : 'Hide'}
                checked={desktop}
                id="desktop"
                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                  changeStyle({ id: e.target.id, value: e.target.value })
                }
              />
            </div>
          </div>
        </PageBlock>
      </Layout>
      <FloatingActionBar
        save={{
          label: btnSave,
          onClick: () => {
            if (!name) {
              setMessageName(messageTranslate('validateName'))
            } else if (!slug) {
              setMessageSlug(messageTranslate('validateSlug'))
            } else if (responseForm.type === 'edit') {
              editItem()
            } else {
              saveChanges()
            }
          },
        }}
      />
    </div>
  )
}

export default injectIntl(FormComponent)

```


[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/store/interfaces.json from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "mega-menu": {
    "component": "MegaMenu",
    "allowed": ["before-menu", "after-menu", "drawer"]
  },
  "before-menu": {
    "component": "Extension",
    "composition": "children",
    "allowed": "*"
  },
  "after-menu": {
    "component": "Extension",
    "composition": "children",
    "allowed": "*"
  },
  "mega-menu-go-back-btn": {
    "component": "GoBackButton"
  },
  "mega-menu-trigger-btn": {
    "component": "TriggerButton",
    "composition": "children",
    "render": "client"
  }
}

```


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

[Assistant]
Here's the implementation:

```json
{
  "name": "Mega Menú",
  "headline": "Cree, personalice y administre nuevos árboles de categorías y utilícelos como su menú principal.",
  "overview": "VTEX Mega Menu proporciona una aplicación que permite crear, personalizar y gestionar desde el administrador un nuevo árbol de categorías de hasta 3 niveles, el cual puede ser utilizado como menú de navegación principal en su tienda.",
  "features": [
    "Crear, editar y eliminar elementos del árbol de categorías",
    "Ordenar los elementos del árbol de categorías",
    "Aplicar estilos css a los elementos dependiendo de sus requerimientos"
  ],
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


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

[User] Show me the implementation of mega-menu/public/metadata/messages/pt-BR.json from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Mega Menu",
  "headline": "Crie, personalize e gerencie novas árvores de categorias e use-as como seu menu principal.",
  "overview": "VTEX Mega Menu fornece uma aplicação que lhe permite criar, personalizar e gerir desde o administrador uma nova árvore de categorias de até 3 níveis, que pode ser utilizada como o menu principal de navegação na sua loja.",
  "features": [
    "Criar, editar e eliminar itens na árvore de categorias",
    "Ordenar os itens na árvore de categorias",
    "Aplique estilos css aos elementos dependendo das suas necessidades"
  ],
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


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

[User] Show me the implementation of mega-menu/public/metadata/messages/en-US.json from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```json
{
  "name": "Mega Menu",
  "headline": "Create, customize and manage new category trees and use them as your main menu.",
  "overview": "Mega Menu VTEX, give you an application to create, personalize and manage from the admin panel a new category tree, it's can have up to 3 levels. The new menu can be used as a navigation main menu in your store.",
  "features": [
    "Create, edit and delete items of the category tree",
    "Order the item of category tree",
    "Add CSS styles to the items according to your requirements"
  ],
  "websiteURL": "https://vtex.com/",
  "support": {
    "url": "https://support.vtex.com/hc/requests"
  }
}

```


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

[User] Show me the implementation of mega-menu/graphql/types/settings.graphql from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```graphql
type Settings {
  idMenu: ID!
  orientation: String
}

input SettingsInput {
  idMenu: ID!
  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/graphql/types/menu.graphql from the mega-menu VTEX app.

[Assistant]
Here's the implementation:

```graphql
type Menu {
  id: ID!
  name: String!
  icon: String!
  slug: String!
  styles: String
  menu: [Menu]
  display: Boolean!
  enableSty: Boolean!
  order: Int
  slugRoot: String
  slugRelative: String
  mobile: Boolean
  desktop: Boolean
}

input MenuInput {
  id: ID!
  name: String!
  icon: String!
  slug: String!
  styles: String!
  menu: [MenuInput]
  display: Boolean
  enableSty: Boolean
  order: Int
  firstLevel: String
  secondLevel: String
  slugRoot: String
  slugRelative: String
  mobile: Boolean
  desktop: Boolean
}

```


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

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

[Assistant]
Here's the implementation:

```typescript
import { IOClients } from '@vtex/api'

export class Clients extends IOClients {}

```


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

[Assistant]
Here's the implementation:

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

export interface Settings {
  idMenu: string
  orientation: string
}

interface Args {
  menuInput: Menu
}
interface ArgsUpload {
  menuData: [Menu]
}
interface ArgsSettings {
  settingsInput: Settings
}

export type Maybe<T> = T | void

```


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

[Assistant]
Here's the implementation:

```typescript
import type { ServiceContext } from '@vtex/api'
import type { Clients } from '../clients'

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

export {}

```


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

[Assistant]
Here's the implementation:

```typescript
import type { Settings, ArgsSettings } from '../typings/custom'

const settings = async (_: unknown, __: unknown, ctx: Context) => {
  const {
    clients: { vbase },
  } = ctx

  let settingsItems: Settings[] = []

  try {
    settingsItems = await vbase.getJSON<Settings[]>('settings', 'menuSettings')
  } 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('settings', 'menuSettings', [])
    } else {
      throw err
    }
  }

  return settingsItems
}

const createEditSettings = async (
  _: unknown,
  { settingsInput }: ArgsSettings,
  { clients: { vbase } }: Context
) => {
  let settingsItems: Settings[] = []

  // eslint-disable-next-line vtex/prefer-early-return
  if (settingsInput.idMenu) {
    try {
      settingsItems = await vbase.getJSON<Settings[]>(
        'settings',
        'menuSettings'
      )
    } catch (err) {
      const errStr = err.toString()

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

    const deleteDuplicates = settingsItems.map((obj) =>
      obj.idMenu === settingsInput.idMenu
        ? { ...obj, orientation: settingsInput.orientation }
        : obj
    )

    const saveData =
      deleteDuplicates.length > 0 ? deleteDuplicates : [settingsInput]

    return vbase
      .saveJSON('settings', 'menuSettings', saveData)
      .then(() => settingsInput)
  }

  return 'Error creating the item'
}

export const settingsQueries = {
  settings,
}

export const settingsMutations = {
  createEditSettings,
}

```