@griddo/ax 11.7.4 → 11.7.6-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.7.4",
+  "version": "11.7.6-rc.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -223,5 +223,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "aca11f96f7cba5a12a8c2b76cac78c08c8b39ea9"
+  "gitHead": "f66a1f3378c5f35a178406b98338533202c5105c"
 }

package/src/components/Fields/AsyncSelect/index.tsx

@@ -152,7 +152,7 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
         isDisabled={disabled}
         className={className}
         required={mandatory}
-        isClearable={state.hasEmptyOption}
+        isClearable={false}
         isSearchable={searchable}
         maxWidth={maxWidth}
         inputValue={state.inputText}

package/src/components/Fields/Select/index.tsx

@@ -57,7 +57,7 @@ const Select = (props: ISelectProps): JSX.Element => {
         error={error}
         onChange={handleChange}
         isSearchable={searchable}
-        isClearable={hasEmptyOption}
+        isClearable={false}
         onInputChange={handleInputChange}
         alignRight={alignRight}
         aria-label={name}

package/src/components/Fields/Wysiwyg/index.tsx

@@ -30,7 +30,9 @@ const Wysiwyg = (props: IWysiwygProps): JSX.Element => {
   const handleChange = (model: string) => {
     onChange(model);
     const stripedHtml = decodeEntities(model);
-    error && handleValidation && handleValidation(stripedHtml);
+    setTimeout(() => {
+      error && handleValidation && handleValidation(stripedHtml);
+    }, 300);
   };
 
   const dynamicConfig = {

package/src/components/Gallery/index.tsx

@@ -41,28 +41,22 @@ import { useFilterQuery, useSortedListStatus } from "@ax/modules/MediaGallery/ho
 import { getSortedListStatus } from "@ax/modules/MediaGallery/utils";
 
 const Gallery = (props: IProps): JSX.Element => {
-  const {
-    currentFolderContent,
-    site,
-    currentFolderID,
-    breadcrumb,
-    toggleModal,
-    getFolderContent,
-    getFoldersTree,
-    getImageSelected,
-    updateCurrentFolder,
-  } = props;
+  const { currentFolderContent, site, breadcrumb, toggleModal, getFolderContent, getFoldersTree, getImageSelected } =
+    props;
 
   const { images, folders } = currentFolderContent || { images: { items: [], totalItems: 0 }, folders: [] };
   const { items, totalItems } = images;
 
-  const itemsPerPage = 10;
+  const itemsPerPage = 20;
   const firstPage = 1;
+  const lastPage = Math.ceil(totalItems / itemsPerPage);
   const [page, setPage] = useState(firstPage);
   const [selectedTab, setSelectedTab] = useState(site ? "local" : "global");
   const [selectedImage, setSelectedImage] = useState<IImage | null>(null);
   const [isPanelOpen, setPanelOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [currentFolderID, setCurrentFolderID] = useState<number | null>(null);
   const isLocalTab = selectedTab === "local";
   const galleryScope = isLocalTab && site ? site.id : "global";
   const hasFolders = !!folders.length;
@@ -127,7 +121,9 @@ const Gallery = (props: IProps): JSX.Element => {
 
   useLayoutEffect(() => {
     return () => {
-      updateCurrentFolder(null);
+      setCurrentFolderID(null);
+      setSelectedTab("site");
+      setPage(firstPage);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -137,7 +133,8 @@ const Gallery = (props: IProps): JSX.Element => {
       page === 1 && setIsLoading(true);
       const params = getParams();
       await getFolderContent(params);
-      page === 1 && setIsLoading(false);
+      setIsLoading(false);
+      setIsLoadingMore(false);
     };
     const handleGetTree = async () => await getFoldersTree(siteID);
     handleGetContent();
@@ -148,7 +145,13 @@ const Gallery = (props: IProps): JSX.Element => {
   const onScroll = () => {
     if (galleryRef.current) {
       const { scrollTop, scrollHeight, clientHeight } = galleryRef.current;
-      if (scrollTop + clientHeight === scrollHeight && items.length < totalItems) {
+      if (
+        scrollTop + clientHeight + 100 >= scrollHeight &&
+        items.length < totalItems &&
+        page < lastPage &&
+        !isLoadingMore
+      ) {
+        setIsLoadingMore(true);
         setPage((currentPage) => currentPage + 1);
       }
     }
@@ -170,18 +173,26 @@ const Gallery = (props: IProps): JSX.Element => {
 
   const handleSelectedTab = (tab: string) => {
     if (tab !== selectedTab) {
-      updateCurrentFolder(null);
+      setSearchQuery("");
+      setCurrentFolderID(null);
       setSelectedImage(null);
       setSelectedTab(tab);
       setPage(firstPage);
     }
   };
 
+  const handleUpdateCurrentFolder = (folderID: number | null) => {
+    setSearchQuery("");
+    setPage(firstPage);
+    setCurrentFolderID(folderID);
+  };
+
   const togglePanel = () => setPanelOpen(!isPanelOpen);
 
   const handleBackClick = () => {
     const parentID = breadcrumb.length >= 2 ? breadcrumb[breadcrumb.length - 2].id : null;
-    updateCurrentFolder(parentID);
+    setPage(firstPage);
+    setCurrentFolderID(parentID);
   };
 
   const handleUpload = async (file: IImage[]) => {
@@ -225,7 +236,7 @@ const Gallery = (props: IProps): JSX.Element => {
     <S.Wrapper data-testid="image-gallery-wrapper">
       <S.FolderPanel isOpen={isPanelOpen} ref={ref}>
         <S.FolderPanelContent>
-          <FolderTree folderID={currentFolderID || 0} onClick={updateCurrentFolder} title="Folders" />
+          <FolderTree folderID={currentFolderID || 0} onClick={handleUpdateCurrentFolder} title="Folders" />
         </S.FolderPanelContent>
         <S.ResizeHandle className="resizer" />
       </S.FolderPanel>
@@ -266,7 +277,7 @@ const Gallery = (props: IProps): JSX.Element => {
                   resetFilters={resetFilterQuery}
                 />
               </S.SearchTags>
-              {!isRoot && !isSearching && <Breadcrumb breadcrumb={breadcrumb} onClick={updateCurrentFolder} />}
+              {!isRoot && !isSearching && <Breadcrumb breadcrumb={breadcrumb} onClick={handleUpdateCurrentFolder} />}
               {(hasFolders || (!isRoot && !isSearching)) && (
                 <S.SectionWrapper>
                   <S.SectionHeader>
@@ -281,7 +292,7 @@ const Gallery = (props: IProps): JSX.Element => {
                     {!isRoot && !isSearching && <BackFolder onClick={handleBackClick} size="S" />}
                     <S.FoldersGrid>
                       {folders.map((folder: IFolder) => (
-                        <FolderItem folder={folder} onClick={updateCurrentFolder} key={folder.folderName} />
+                        <FolderItem folder={folder} onClick={handleUpdateCurrentFolder} key={folder.folderName} />
                       ))}
                     </S.FoldersGrid>
                   </S.FoldersWrapper>
@@ -347,7 +358,6 @@ const Gallery = (props: IProps): JSX.Element => {
 export interface IGalleryProps {
   site: ISite | null;
   currentFolderContent: IImageFolder | null;
-  currentFolderID: number | null;
   isLoading: boolean;
   breadcrumb: IFolderTree[];
   toggleModal: () => void;
@@ -357,20 +367,17 @@ export interface IGalleryProps {
 const mapStateToProps = (state: IRootState) => ({
   isLoading: state.app.isLoading,
   currentFolderContent: state.gallery.currentFolderContent,
-  currentFolderID: state.gallery.currentFolderID,
   breadcrumb: state.gallery.breadcrumb,
 });
 
 export interface IDispatchProps {
   getFolderContent(params: IGetFolderParams): Promise<void>;
   getFoldersTree(siteID: number | "global"): Promise<void>;
-  updateCurrentFolder(folderID: number | null): void;
 }
 
 const mapDispatchToProps = {
   getFolderContent: galleryActions.getFolderContent,
   getFoldersTree: galleryActions.getFoldersTree,
-  updateCurrentFolder: galleryActions.updateCurrentFolder,
 };
 
 type IProps = IGalleryProps & IDispatchProps;

package/src/containers/Navigation/Defaults/actions.tsx

@@ -4,6 +4,7 @@ import { navigation } from "@ax/api";
 import {
   IBreadcrumbItem,
   IModule,
+  INavigation,
   INavPages,
   INotification,
   IRootState,
@@ -33,7 +34,7 @@ import {
 
 import { appActions } from "@ax/containers/App";
 
-import { getFormData, getStateValues } from "./utils";
+import { getFormData, getStateValues, getTranslatedMenus } from "./utils";
 
 import {
   SET_EDITOR_CONTENT,
@@ -138,7 +139,7 @@ function setNavPages(navigationPages: INavPages): ISetNavPages {
 
 // API RELATED FUNCTIONS
 
-function getHeaders(params: any): (dispatch: Dispatch, getState: any) => Promise<void> {
+function getHeaders(params: any): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
   return async (dispatch, getState) => {
     try {
       const { currentSiteInfo } = getStateValues(getState);
@@ -184,7 +185,7 @@ function getFooters(params: any): (dispatch: Dispatch, getState: any) => Promise
   };
 }
 
-function getDefaults(params?: any): (dispatch: Dispatch, getState: any) => Promise<void> {
+function getDefaults(params?: any): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
   return async (dispatch, getState) => {
     try {
       const { currentSiteInfo } = getStateValues(getState);
@@ -215,7 +216,7 @@ function getDefaults(params?: any): (dispatch: Dispatch, getState: any) => Promi
   };
 }
 
-function getNavigationByType(type: string): (dispatch: Dispatch, getState: any) => void {
+function getNavigationByType(type: string): (dispatch: Dispatch, getState: () => IRootState) => void {
   return async (dispatch, getState) => {
     const {
       app: { token, lang },
@@ -242,7 +243,9 @@ function getNavigationByType(type: string): (dispatch: Dispatch, getState: any)
   };
 }
 
-function createNavigation(navHtml?: HTMLDivElement | null): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+function createNavigation(
+  navHtml?: HTMLDivElement | null
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       dispatch(appActions.setIsSaving(true));
@@ -253,6 +256,10 @@ function createNavigation(navHtml?: HTMLDivElement | null): (dispatch: Dispatch,
         app: { lang },
       } = getState();
 
+      if (!editorContent || !currentSiteInfo) {
+        return false;
+      }
+
       if (isNewTranslation) {
         delete editorContent.id;
       }
@@ -297,7 +304,7 @@ function updateNavigation(
   data: any,
   fromEditor?: boolean,
   navHtml?: HTMLDivElement | null
-): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       dispatch(appActions.setIsSaving(true));
@@ -346,7 +353,7 @@ function deleteNavigation(
   navID: number | number[],
   type: string,
   errorAction: () => void
-): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       const isBulk = Array.isArray(navID);
@@ -386,7 +393,7 @@ function deleteNavigation(
 function restoreNavigation(
   navID: number | number[],
   type: string
-): (dispatch: Dispatch, getState: any) => Promise<void> {
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
   return async (dispatch, getState) => {
     try {
       const responseActions = {
@@ -411,7 +418,10 @@ function restoreNavigation(
   };
 }
 
-function setDefaultNavigation(navID: number, type: string): (dispatch: Dispatch, getState: any) => Promise<void> {
+function setDefaultNavigation(
+  navID: number,
+  type: string
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
   return async (dispatch, getState) => {
     try {
       const responseActions = {
@@ -428,7 +438,7 @@ function setDefaultNavigation(navID: number, type: string): (dispatch: Dispatch,
   };
 }
 
-function generateNewDefault(dispatch: Dispatch, getState: any) {
+function generateNewDefault(dispatch: Dispatch, getState: () => IRootState) {
   const {
     selectedDefault,
     currentSiteInfo: { navigationModules },
@@ -449,10 +459,10 @@ function generateNewDefault(dispatch: Dispatch, getState: any) {
   generateContent(defaultSchema)(dispatch, getState);
 }
 
-function getValues(): (dispatch: Dispatch, getState: any) => Promise<void> {
+function getValues(): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
   return async (dispatch, getState) => {
     try {
-      const { selectedDefault, header, footer, isNewTranslation, currentSiteInfo } = getStateValues(getState);
+      const { selectedDefault, header, footer, isNewTranslation, currentSiteInfo, menus } = getStateValues(getState);
 
       const isHeader = selectedDefault === "Headers";
       const currentNavigation = isHeader ? header : footer;
@@ -471,6 +481,9 @@ function getValues(): (dispatch: Dispatch, getState: any) => Promise<void> {
             if (navigationModuleComponent) {
               response.component = navigationModuleComponent;
             }
+            if (isNewTranslation) {
+              getTranslatedMenus(response, menus);
+            }
             dispatch(setSelectedEditorID(rootEditorID));
             generateContent(response)(dispatch, getState);
           },
@@ -542,17 +555,17 @@ function addModule(
   key: string,
   selectedID: number,
   isComponentModule?: boolean
-): (dispatch: Dispatch, getState: any) => void {
+): (dispatch: Dispatch, getState: () => IRootState) => void {
   return (dispatch, getState) => {
     addComponent(type, key)(dispatch, getState);
   };
 }
 
-function addComponent(type: any, key: string): (dispatch: Dispatch, getState: any) => void {
+function addComponent(type: any, key: string): (dispatch: Dispatch, getState: () => IRootState) => void {
   return (dispatch, getState) => {
     const { editorContent, selectedEditorID } = getStateValues(getState);
     const component = {
-      editorID: selectedEditorID,
+      editorID: selectedEditorID || 0,
       type,
     };
     const updatedContent = getUpdatedComponents(editorContent, component, key);
@@ -568,7 +581,7 @@ function addComponent(type: any, key: string): (dispatch: Dispatch, getState: an
   };
 }
 
-function deleteModule(editorID: number[], key: string): (dispatch: Dispatch, getState: any) => void {
+function deleteModule(editorID: number[], key: string): (dispatch: Dispatch, getState: () => IRootState) => void {
   return (dispatch, getState) => {
     const { editorContent } = getStateValues(getState);
     const updatedContent: any = deepClone(editorContent);
@@ -588,7 +601,11 @@ function deleteModule(editorID: number[], key: string): (dispatch: Dispatch, get
   };
 }
 
-function replaceModule(module: any, parent: any, objKey: string): (dispatch: Dispatch, getState: any) => void {
+function replaceModule(
+  module: any,
+  parent: any,
+  objKey: string
+): (dispatch: Dispatch, getState: () => IRootState) => void {
   return async (dispatch, getState) => {
     const { editorContent } = getStateValues(getState);
     const updatedVal = {
@@ -610,7 +627,7 @@ function replaceModule(module: any, parent: any, objKey: string): (dispatch: Dis
   };
 }
 
-function duplicateModule(editorID: number[], key?: string): (dispatch: Dispatch, getState: any) => number {
+function duplicateModule(editorID: number[], key?: string): (dispatch: Dispatch, getState: () => IRootState) => number {
   return (dispatch, getState) => {
     const { editorContent } = getStateValues(getState);
 
@@ -650,7 +667,7 @@ function moveModule(
   content: any,
   newIndex: number,
   key: string
-): (dispatch: Dispatch, getState: any) => void {
+): (dispatch: Dispatch, getState: () => IRootState) => void {
   return async (dispatch, getState) => {
     try {
       const {
@@ -670,7 +687,7 @@ function moveModule(
   };
 }
 
-function copyModule(editorID: number[]): (dispatch: Dispatch, getState: any) => boolean | number {
+function copyModule(editorID: number[]): (dispatch: Dispatch, getState: () => IRootState) => boolean | number {
   return (dispatch, getState) => {
     const {
       navigation: { editorContent },
@@ -704,12 +721,16 @@ function pasteModule(
   editorID: number,
   key: string,
   modulesToPaste: IModule[]
-): (dispatch: Dispatch, getState: any) => Promise<{ error?: INotification }> {
+): (dispatch: Dispatch, getState: () => IRootState) => Promise<{ error?: INotification }> {
   return async (dispatch, getState) => {
     const {
       navigation: { editorContent },
     }: IRootState = getState();
 
+    if (!editorContent) {
+      return { error: undefined };
+    }
+
     const { element: originalElement } = findByEditorID(editorContent, editorID);
     const itemsArr = originalElement[key];
 
@@ -728,7 +749,10 @@ function pasteModule(
   };
 }
 
-function replaceElementsInCollection(newValue: string, reference: string): (dispatch: Dispatch, getState: any) => void {
+function replaceElementsInCollection(
+  newValue: string,
+  reference: string
+): (dispatch: Dispatch, getState: () => IRootState) => void {
   return async (dispatch, getState) => {
     const { selectedContent } = getStateValues(getState);
     const key = reference ? reference : "elements";
@@ -739,19 +763,19 @@ function replaceElementsInCollection(newValue: string, reference: string): (disp
   };
 }
 
-function generateContent(editorContent: any): (dispatch: Dispatch, getState: any) => void {
+function generateContent(editorContent: INavigation): (dispatch: Dispatch, getState: () => IRootState) => void {
   return async (dispatch, getState) => {
     const {
       navigation: { selectedEditorID },
     } = getState();
     const { pageContent } = generateEditorIDs(editorContent);
-    const { element: selectedContent, parent: selectedParent } = findByEditorID(pageContent, selectedEditorID);
+    const { element: selectedContent, parent: selectedParent } = findByEditorID(pageContent, selectedEditorID || 0);
     const { component } = selectedContent;
     const schema = selectedContent && getSchema(component);
 
     dispatch(setSchema(schema));
     dispatch(setEditorContent(pageContent));
-    dispatch(updateBreadcrumb(selectedEditorID));
+    dispatch(updateBreadcrumb(selectedEditorID || 0));
     dispatch(setSelectedDefaultContent(selectedContent));
     dispatch(setSelectedDefaultParentContent(selectedParent));
     dispatch(setTab("content"));
@@ -764,7 +788,7 @@ function updateEditorContent(
   selectedEditorID: number,
   key: string,
   value: any
-): (dispatch: Dispatch, getState: any) => void {
+): (dispatch: Dispatch, getState: () => IRootState) => void {
   return (dispatch, getState) => {
     const {
       navigation: { selectedContent, editorContent },
@@ -777,7 +801,7 @@ function updateEditorContent(
   };
 }
 
-function setSelectedContent(editorID: number): (dispatch: Dispatch, getState: any) => Promise<void> {
+function setSelectedContent(editorID: number): (dispatch: Dispatch, getState: () => IRootState) => Promise<void> {
   return async (dispatch, getState) => {
     dispatch(setIsLoading(true));
     /*
@@ -805,7 +829,7 @@ function setSelectedContent(editorID: number): (dispatch: Dispatch, getState: an
 }
 
 function updateBreadcrumb(editorID: number): any {
-  return async (dispatch: Dispatch, getState: () => any) => {
+  return async (dispatch: Dispatch, getState: () => IRootState) => {
     const {
       navigation: { editorContent },
     } = getState();

package/src/containers/Navigation/Defaults/reducer.tsx

@@ -1,4 +1,4 @@
-import { IBreadcrumbItem, IModule, INavPages, ISchema } from "@ax/types";
+import { IBreadcrumbItem, IModule, INavigation, INavPages, ISchema } from "@ax/types";
 
 import {
   SET_EDITOR_CONTENT,
@@ -20,7 +20,7 @@ import {
 } from "./constants";
 
 export interface INavigationState {
-  editorContent: any | undefined;
+  editorContent: INavigation | null;
   breadcrumb: IBreadcrumbItem[];
   schema: ISchema | Record<string, unknown>;
   selectedContent: any;
@@ -40,7 +40,7 @@ export interface INavigationState {
 }
 
 export const initialState = {
-  editorContent: undefined,
+  editorContent: null,
   breadcrumb: [],
   schema: {},
   selectedContent: {},

package/src/containers/Navigation/Defaults/utils.tsx

@@ -1,4 +1,6 @@
-const getStateValues = (getState: any) => {
+import { IMenu, INavigation, IRootState, ISite } from "@ax/types";
+
+const getStateValues = (getState: () => IRootState) => {
   const {
     sites: { currentSiteInfo },
     navigation: {
@@ -12,13 +14,14 @@ const getStateValues = (getState: any) => {
       currentDefaultsContent,
       selectedContent,
     },
+    menu: { savedMenus },
     app: { isSaving, isLoading },
   } = getState();
   const section = editorContent && editorContent[0];
   const { modules } = !!section && section;
 
   return {
-    currentSiteInfo,
+    currentSiteInfo: currentSiteInfo as ISite,
     editorContent,
     selectedDefault,
     selectedEditorID,
@@ -32,6 +35,7 @@ const getStateValues = (getState: any) => {
     section,
     modules,
     selectedContent,
+    menus: savedMenus,
   };
 };
 
@@ -42,4 +46,33 @@ const getFormData = (values: any, image?: File | null): FormData => {
   return form;
 };
 
-export { getStateValues, getFormData };
+const getTranslatedMenus = (editorContent: INavigation, menus: IMenu[] | null) => {
+  const keys = Object.keys(editorContent).filter((k) => editorContent[k]?.component === "MenuContainer");
+
+  if (!keys.length) {
+    return editorContent;
+  }
+
+  if (!menus || !menus.length) {
+    keys.forEach((key) => {
+      editorContent[key] = null;
+    });
+    return editorContent;
+  }
+
+  keys.forEach((key) => {
+    const menuName = (editorContent[key] as IMenu).name;
+    const translatedMenu = menus.find((menu) => menu.name === menuName);
+    const hasElements = !!translatedMenu?.elements?.length;
+
+    if (translatedMenu && hasElements) {
+      editorContent[key] = translatedMenu;
+    } else {
+      editorContent[key] = null;
+    }
+  });
+
+  return editorContent;
+};
+
+export { getStateValues, getFormData, getTranslatedMenus };

package/src/modules/MediaGallery/ImageModal/DetailPanel/index.tsx

@@ -70,7 +70,7 @@ const DetailPanel = (props: IProps) => {
   };
 
   const mainNewModalAction = {
-    title: "Delete document",
+    title: "Delete image",
     onClick: () => handleDeleteFile(),
   };
 
@@ -82,7 +82,6 @@ const DetailPanel = (props: IProps) => {
     <>
       <S.Wrapper>
         <S.Header>
-          DETAILS
           <Tabs tabs={tabs} active={selectedTab} setSelectedTab={handleSelectedTab} noMargins />
         </S.Header>
         {selectedTab === "in use" ? (

package/src/modules/MediaGallery/ImageModal/DetailPanel/style.tsx

@@ -14,7 +14,7 @@ const Wrapper = styled.div`
 
 const Header = styled.div`
   ${(p) => p.theme.textStyle.headingXS};
-  padding: ${(p) => `${p.theme.spacing.s} ${p.theme.spacing.s} 0 ${p.theme.spacing.s}`};
+  padding-top: ${(p) => p.theme.spacing.xs};
   text-align: center;
   border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
 `;

package/src/modules/MediaGallery/atoms.tsx

@@ -61,7 +61,7 @@ const DeleteFolderModal = (props: IDeleteModalProps): JSX.Element => {
       height={240}
     >
       <S.ModalContent>
-        Are you sure you want to delete <strong>{title} folder</strong>? All documents inside the folder will also be
+        Are you sure you want to delete <strong>{title} folder</strong>? All images inside the folder will also be
         deleted. This action <strong>cannot be undone</strong>.
       </S.ModalContent>
     </Modal>

package/src/modules/Navigation/Defaults/DefaultsEditor/index.tsx

@@ -7,7 +7,7 @@ import { useIsDirty, useModal, usePermission } from "@ax/hooks";
 import { RouteLeavingGuard } from "@ax/guards";
 
 import { appActions } from "@ax/containers/App";
-import { navigationActions } from "@ax/containers/Navigation";
+import { navigationActions, menuActions } from "@ax/containers/Navigation";
 import { ErrorPage, ErrorToast, Loading, MainWrapper, Modal, Notification } from "@ax/components";
 import Editor from "./Editor";
 
@@ -32,6 +32,7 @@ const DefaultsEditor = (props: IProps) => {
     setHeader,
     setFooter,
     setHistoryPush,
+    getMenus,
     currentSiteInfo,
   } = props;
 
@@ -127,6 +128,7 @@ const DefaultsEditor = (props: IProps) => {
     } else {
       setIsDirty(true);
       createTranslation(true);
+      await getMenus();
       editorContent && (await getNavigation(editorContent.id));
     }
   };
@@ -232,6 +234,7 @@ const mapDispatchToProps = {
   createTranslation: navigationActions.createNewTranslation,
   setHeader: navigationActions.setHeader,
   setFooter: navigationActions.setFooter,
+  getMenus: menuActions.getMenus,
 };
 
 interface IDispatchProps {
@@ -243,6 +246,7 @@ interface IDispatchProps {
   createTranslation(isNewTranslation: boolean): void;
   setHeader(id: number | null): void;
   setFooter(id: number | null): void;
+  getMenus(): Promise<void>;
 }
 
 type IProps = IStateProps & IDispatchProps;

package/src/modules/Navigation/Defaults/Item/index.tsx

@@ -4,7 +4,7 @@ import { connect } from "react-redux";
 import { IHeader, IFooter, ICheck, ILanguage, INavigationLanguage } from "@ax/types";
 import { useModal, usePermission } from "@ax/hooks";
 import { appActions } from "@ax/containers/App";
-import { navigationActions } from "@ax/containers/Navigation";
+import { navigationActions, menuActions } from "@ax/containers/Navigation";
 import { CheckField, FieldsBehavior, Modal } from "@ax/components";
 
 import { Translations } from "./atoms";
@@ -30,6 +30,7 @@ const DefaultItem = (props: IProps): JSX.Element => {
     onChange,
     isSelected,
     toggleReplaceModal,
+    getMenus,
     hoverCheck,
   } = props;
 
@@ -132,7 +133,7 @@ const DefaultItem = (props: IProps): JSX.Element => {
   const getSelectedNavLanguage = (navLanguages: INavigationLanguage[], language: ILanguage) =>
     navLanguages.find((navLang) => navLang.languageId === language.id);
 
-  const handleLanguage = (language: ILanguage) => {
+  const handleLanguage = async (language: ILanguage) => {
     const { locale, id } = language;
 
     const lang = {
@@ -148,6 +149,7 @@ const DefaultItem = (props: IProps): JSX.Element => {
       selectedNavLanguage ? setNav(selectedNavLanguage.navigationId) : setNav(defaultContent.id);
     setTranslation();
     !selectedNavLanguage && createNewTranslation(true);
+    await getMenus();
     const path = "/sites/navigations/editor";
     setHistoryPush(path, true);
   };
@@ -244,6 +246,7 @@ interface IProps {
   setHeader(id: number | null): void;
   setFooter(id: number | null): void;
   toggleReplaceModal: () => void;
+  getMenus(): Promise<void>;
   hoverCheck: boolean;
 }
 
@@ -255,6 +258,7 @@ const mapDispatchToProps = {
   createNewTranslation: navigationActions.createNewTranslation,
   setHeader: navigationActions.setHeader,
   setFooter: navigationActions.setFooter,
+  getMenus: menuActions.getMenus,
 };
 
 export default connect(null, mapDispatchToProps)(DefaultItem);

package/src/types/index.tsx

@@ -413,6 +413,20 @@ export interface IMenuForm {
   footerStyle: string;
 }
 
+export interface INavigation {
+  id?: number;
+  component: string;
+  deleted?: boolean;
+  entity: string;
+  language: number;
+  navigationLanguages: INavigationLanguage[];
+  setAsDefault: boolean;
+  site: number;
+  title: string;
+  type: "header" | "footer";
+  [key: string]: any; // TODO: set type
+}
+
 export interface IHeader {
   component: string;
   deleted?: boolean;