@griddo/ax 1.69.7 → 1.71.0

package/src/containers/Sites/constants.tsx

@@ -10,6 +10,7 @@ export const SET_CURRENT_SITE_LANGUAGES: string | null = `${NAME}/SET_CURRENT_SI
 export const SET_INITIAL_VALUES = `${NAME}/SET_INITIAL_VALUES`;
 export const SET_SAVED_SITE_INFO = `${NAME}/SET_SAVED_SITE_INFO`;
 export const SET_CURRENT_SITE_ERROR_PAGES = `${NAME}/SET_CURRENT_SITE_ERROR_PAGES`;
+export const SET_CONTENT_FILTERS = `${NAME}/SET_CONTENT_FILTERS`;
 
 export const ITEMS_PER_PAGE = 50;
 

package/src/containers/Sites/interfaces.tsx

@@ -9,6 +9,7 @@ import {
   SET_INITIAL_VALUES,
   SET_SAVED_SITE_INFO,
   SET_CURRENT_SITE_ERROR_PAGES,
+  SET_CONTENT_FILTERS,
 } from "./constants";
 import { ISite } from "@ax/types";
 
@@ -62,4 +63,9 @@ export interface ISetCurrentSiteErrorPages {
   payload: { currentSiteErrorPages: number[] };
 }
 
+export interface ISetContentFilters {
+  type: typeof SET_CONTENT_FILTERS;
+  payload: { contentFilters: Record<string,string> | null };
+}
+
 export type SitesActionsCreators = ISetSitesAction & ISetCurrentSiteInfoAction;

package/src/containers/Sites/reducer.tsx

@@ -9,6 +9,7 @@ import {
   SET_INITIAL_VALUES,
   SET_SAVED_SITE_INFO,
   SET_CURRENT_SITE_ERROR_PAGES,
+  SET_CONTENT_FILTERS,
 } from "./constants";
 
 import { ISite, IPage, ILanguage } from "@ax/types";
@@ -26,6 +27,7 @@ export interface ISitesState {
   currentSiteLanguages: ILanguage[];
   savedSiteInfo: any;
   currentSiteErrorPages: number[];
+  contentFilters: Record<string, string> | null;
 }
 
 export const initialState = {
@@ -39,6 +41,7 @@ export const initialState = {
   currentSiteLanguages: [],
   savedSiteInfo: null,
   currentSiteErrorPages: [],
+  contentFilters: null,
 };
 
 export function reducer(state = initialState, action: SitesActionsCreators): ISitesState {
@@ -53,6 +56,7 @@ export function reducer(state = initialState, action: SitesActionsCreators): ISi
     case SET_INITIAL_VALUES:
     case SET_SAVED_SITE_INFO:
     case SET_CURRENT_SITE_ERROR_PAGES:
+    case SET_CONTENT_FILTERS:
       return { ...state, ...action.payload };
     default:
       return state;

package/src/containers/StructuredData/actions.tsx

@@ -16,6 +16,7 @@ import {
   SET_SCHEMA_VERSION,
   SET_ERRORS,
   SET_VALIDATED,
+  SET_CONTENT_FILTERS,
 } from "./constants";
 
 import {
@@ -30,9 +31,17 @@ import {
   ISetSchemaVersion,
   ISetErrors,
   ISetValidated,
+  ISetContentFilters,
 } from "./interfaces";
 import { prepareStructuredDataContent, getTaxonomies, filterStructuredDataByID, getTypes } from "./utils";
-import { IStructuredData, IStructuredDataContent, ICategory, IGetStructuredDataParams, IErrorItem } from "@ax/types";
+import {
+  IStructuredData,
+  IStructuredDataContent,
+  ICategory,
+  IGetStructuredDataParams,
+  IErrorItem,
+  IStructuredDataQueryValues,
+} from "@ax/types";
 import { structuredData } from "@ax/api";
 import { setTotalItems } from "@ax/containers/Sites/actions";
 import { appActions } from "@ax/containers/App";
@@ -102,30 +111,33 @@ function setValidated(validated: boolean): ISetValidated {
   return { type: SET_VALIDATED, payload: { validated } };
 }
 
+function setContentFilters(contentFilters: Record<string, IStructuredDataQueryValues> | null): ISetContentFilters {
+  return { type: SET_CONTENT_FILTERS, payload: { contentFilters } };
+}
+
 function updateFormValue(valueObj: any): (dispatch: Dispatch, getState: any) => void {
   return (dispatch, getState) => {
     const {
       structuredData: { form },
     } = getState();
-    const updatedForm = { ...form, content: { ...form.content, ...valueObj } };
+    const updatedForm = { ...form, content: { ...form?.content, ...valueObj } };
     dispatch(updateForm(updatedForm));
   };
 }
 
-function resetForm(): (dispatch: Dispatch, getState: any) => void {
+function resetForm(setDefault?: boolean): (dispatch: Dispatch, getState: any) => void {
   return (dispatch, getState) => {
     const {
-      structuredData: {
-        currentStructuredData: { defaultValues },
-      },
+      structuredData: { currentStructuredData },
     } = getState();
 
-    const updatedForm = { content: defaultValues };
+    const formContent = setDefault && currentStructuredData ? { content: currentStructuredData.defaultValues } : null;
 
     dispatch(setEntity(null));
-    dispatch(updateForm(updatedForm));
+    dispatch(updateForm(formContent));
     dispatch(setErrors([]));
     dispatch(setValidated(false));
+    dispatch(setCurrentDataID(null));
   };
 }
 
@@ -559,4 +571,5 @@ export {
   setFilter,
   validateForm,
   deleteError,
+  setContentFilters,
 };

package/src/containers/StructuredData/constants.tsx

@@ -15,6 +15,7 @@ const SET_FILTER: string | null = `${NAME}/SET_FILTER`;
 const SET_SCHEMA_VERSION: string | null = `${NAME}/SET_SCHEMA_VERSION`;
 const SET_ERRORS = `${NAME}/SET_ERRORS`;
 const SET_VALIDATED = `${NAME}/SET_VALIDATED`;
+const SET_CONTENT_FILTERS = `${NAME}/SET_CONTENT_FILTERS`;
 
 const ITEMS_PER_PAGE = 50;
 
@@ -45,4 +46,5 @@ export {
   SET_SCHEMA_VERSION,
   SET_ERRORS,
   SET_VALIDATED,
+  SET_CONTENT_FILTERS,
 };

package/src/containers/StructuredData/interfaces.tsx

@@ -12,9 +12,10 @@ import {
   SET_SCHEMA_VERSION,
   SET_ERRORS,
   SET_VALIDATED,
+  SET_CONTENT_FILTERS,
 } from "./constants";
 
-import { IStructuredData, IStructuredDataContent, ICategory, IErrorItem } from "@ax/types";
+import { IStructuredData, IStructuredDataContent, ICategory, IErrorItem, IStructuredDataQueryValues } from "@ax/types";
 
 export interface ISetCategories {
   type: typeof SET_CATEGORIES;
@@ -80,6 +81,11 @@ export interface ISetValidated {
   payload: { validated: boolean };
 }
 
+export interface ISetContentFilters {
+  type: typeof SET_CONTENT_FILTERS;
+  payload: { contentFilters: Record<string, IStructuredDataQueryValues> | null };
+}
+
 export type CategoryActionsCreators = ISetCategories & ISetCurrentData;
 
 export type StructuredDataActionsCreators = CategoryActionsCreators &

package/src/containers/StructuredData/reducer.tsx

@@ -1,4 +1,4 @@
-import { IStructuredData, IStructuredDataContent, ICategory, IErrorItem } from "@ax/types";
+import { IStructuredData, IStructuredDataContent, ICategory, IErrorItem, IStructuredDataQueryValues } from "@ax/types";
 import {
   SET_CATEGORIES,
   SET_STRUCTURED_DATA,
@@ -15,6 +15,7 @@ import {
   SET_SCHEMA_VERSION,
   SET_ERRORS,
   SET_VALIDATED,
+  SET_CONTENT_FILTERS,
 } from "./constants";
 
 import { StructuredDataActionsCreators } from "./interfaces";
@@ -34,6 +35,7 @@ export interface IStructuredDataState {
   schemaVersion: string;
   errors: IErrorItem[];
   validated: boolean;
+  contentFilters: Record<string, IStructuredDataQueryValues> | null;
 }
 
 export const initialState = {
@@ -51,6 +53,7 @@ export const initialState = {
   schemaVersion: "",
   errors: [],
   validated: false,
+  contentFilters: null,
 };
 
 export function reducer(state = initialState, action: StructuredDataActionsCreators): IStructuredDataState {
@@ -70,6 +73,7 @@ export function reducer(state = initialState, action: StructuredDataActionsCreat
     case SET_SCHEMA_VERSION:
     case SET_ERRORS:
     case SET_VALIDATED:
+    case SET_CONTENT_FILTERS:
       return { ...state, ...action.payload };
     default:
       return state;

package/src/helpers/fields.tsx

@@ -1,5 +1,5 @@
-const fields = require.context("./../components/Fields", true);
+import * as components from "@ax/components/Fields";
 
-const getFieldByPath = (name: string) => fields(`./${name}/index.tsx`).default;
+const getFieldByPath = (name: string): (() => JSX.Element) => (components as Record<string, any>)[name];
 
 export { getFieldByPath };

package/src/helpers/schemas.tsx

@@ -6,10 +6,10 @@ import { pageSchemas } from "@ax/schemas";
 const allSchemas = { ...schemas.all, ...pageSchemas };
 
 const getSchema = (name: string) => allSchemas[name];
-const getDefaultSchema = (name: string) => allSchemas[name].default;
+const getDefaultSchema = (name: string) => (allSchemas[name] ? allSchemas[name].default : {});
 
 const getSchemaThumbnails = (name: string, theme?: string) => {
-  if (!allSchemas[name].thumbnails) return null;
+  if (!allSchemas[name]?.thumbnails) return null;
 
   return theme && allSchemas[name].thumbnails[theme] ? allSchemas[name].thumbnails[theme] : allSchemas[name].thumbnails;
 };

package/src/hooks/forms.tsx

@@ -63,7 +63,7 @@ const useIsDirty = (
 
   const prevContent = usePrevious(updatedValues, isSaved);
 
-  const hasChanged = () => {
+  const hasChanged = (): boolean => {
     if (prevContent && updatedValues) {
       const updatedValuesCloned = updatedValues && deepClone(updatedValues);
       const originalValuesCloned = prevContent && deepClone(prevContent);
@@ -74,6 +74,7 @@ const useIsDirty = (
 
       return hasChanged;
     }
+    return false;
   };
 
   const resetDirty = () => {

package/src/modules/App/Routing/NavMenu/index.tsx

@@ -15,7 +15,7 @@ import { NavProvider } from "./context";
 import * as S from "./style";
 
 const NavMenu = (props: IProps) => {
-  const { location, setHistoryPush, logout, currentSiteInfo, siteLanguages, lang } = props;
+  const { location, setHistoryPush, logout, currentSiteInfo, siteLanguages, lang, categories } = props;
 
   const [isOpened, setIsOpened] = useState(false);
 
@@ -116,6 +116,12 @@ const NavMenu = (props: IProps) => {
 
   const isSitePublished = isSite && currentSiteInfo && currentSiteInfo.isPublished;
 
+  if (isSite) {
+    const isSiteCategoriesAvailable = categories.site.length;
+    const siteCategoriesRouteIdx = config.routes.findIndex((route: IRouter) => route.path === "/sites/categories");
+    config.routes[siteCategoriesRouteIdx].showInNav = isSiteCategoriesAvailable;
+  }
+
   return (
     <NavProvider value={{ state, toggleSubmenu }}>
       <S.NavWrapper type={config.type} isOpened={isOpened}>
@@ -182,12 +188,14 @@ interface IConfig {
 }
 
 interface INavMenuProps {
+  categories: any;
   currentSiteInfo: any;
   siteLanguages: any[];
   lang: any;
 }
 
 const mapStateToProps = (state: IRootState) => ({
+  categories: state.structuredData.categories,
   currentSiteInfo: state.sites.currentSiteInfo,
   siteLanguages: state.sites.currentSiteLanguages,
   lang: state.app.lang,

package/src/modules/Content/BulkHeader/TableHeader/index.tsx

@@ -94,7 +94,7 @@ const TableHeader = (props: IProps): JSX.Element => {
           {CategoryColumns}
           {activeColumns.includes("type") && (
             <S.HeaderWrapper>
-              <TypeFilter filterItems={filterItems} filters={typeFilters} value={filterValues.types} pointer="type" />
+              <TypeFilter filterItems={filterItems} filters={typeFilters} value={filterValues.type} pointer="type" />
             </S.HeaderWrapper>
           )}
           {activeColumns.includes("live") && (

package/src/modules/Content/hooks.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 const useSortedListStatus = () => {
   const sortedInitialState: {
@@ -21,7 +21,7 @@ const useSortedListStatus = () => {
   };
 };
 
-const useFilterQuery = () => {
+const useFilterQuery = (values?: Record<string, string> | null) => {
   const initialQueryValues = {
     type: "all",
     translated: "all",
@@ -30,9 +30,7 @@ const useFilterQuery = () => {
     categories: "all",
   };
 
-  const [query, setQuery] = useState(initialQueryValues);
-
-  const setFilterQuery = (filterValues: any) => {
+  const getFilterQuery = (filterValues: any) => {
     const { type, translated, liveStatus, order, categories } = filterValues;
     let filterQuery = "";
 
@@ -63,8 +61,14 @@ const useFilterQuery = () => {
     return filterQuery;
   };
 
+  const initState = values ? values : initialQueryValues;
+  const [state, setState] = useState(initState);
+
+  const initQuery = values ? getFilterQuery(values) : "";
+  const [query, setQuery] = useState(initQuery);
+
   const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
-    const { type, translated, liveStatus, order, categories } = query;
+    const { type, translated, liveStatus, order, categories } = state;
     const orderMethod = isAscendent ? "asc" : "desc";
     const filterValues = {
       type: pointer === "type" ? filter : type,
@@ -74,18 +78,21 @@ const useFilterQuery = () => {
       categories: pointer === "categories" ? filter : categories,
     };
 
-    setQuery(filterValues);
-
-    return filterValues;
+    setState(filterValues);
+    const filterQuery = getFilterQuery(filterValues);
+    setQuery(filterQuery);
   };
 
-  const resetFilterQuery = () => setQuery(initialQueryValues);
+  const resetFilterQuery = () => {
+    setState(initialQueryValues);
+    setQuery("");
+  };
 
   return {
     setFiltersSelection,
-    setFilterQuery,
     resetFilterQuery,
-    filterValues: query,
+    filterValues: state,
+    query,
   };
 };
 

package/src/modules/Content/index.tsx

@@ -97,6 +97,8 @@ const Content = (props: IProps): JSX.Element => {
     sitesByLang,
     user,
     skipReviewOnPublish,
+    setContentFilters,
+    contentFilters,
   } = props;
 
   const itemsPerPage = 50;
@@ -107,7 +109,12 @@ const Content = (props: IProps): JSX.Element => {
   const { isOpen: isImporterOpen, toggleModal: toggleImporterModal } = useModal();
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
   const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
-  const { setFiltersSelection, setFilterQuery, resetFilterQuery, filterValues } = useFilterQuery();
+  const {
+    setFiltersSelection,
+    resetFilterQuery,
+    filterValues,
+    query: currentFilterQuery,
+  } = useFilterQuery(contentFilters);
   const { state: locationState } = useLocation<{ isFromEditor: boolean }>();
 
   const currentFilter = getCurrentFilter(structuredData, filter);
@@ -150,7 +157,6 @@ const Content = (props: IProps): JSX.Element => {
   const isLastItem = page === lastPage && currentSitePages.length === 1;
 
   const [isScrolling, setIsScrolling] = useState(false);
-  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
   const [deletedItem, setDeletedItem] = useState<number | number[] | null>(null);
   const [searchQuery, setSearchQuery] = useState<string>("");
   const [pagesToImport, setPagesToImport] = useState([]);
@@ -258,6 +264,7 @@ const Content = (props: IProps): JSX.Element => {
     resetPageEditor();
     resetCurrentSiteErrorPages();
     fetchSitesByLang();
+    resetForm();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -284,6 +291,11 @@ const Content = (props: IProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoading, currentSitePages]);
 
+  useEffect(() => {
+    setContentFilters(filterValues);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [filterValues]);
+
   const bulkFilter = (bulkSelection: number[]) => filterByStatus(bulkSelection, currentSitePages);
 
   const handleAddToBulk = (item: ICheck) => addToBulkSelection(item, bulkFilter);
@@ -295,7 +307,7 @@ const Content = (props: IProps): JSX.Element => {
   const selectItems = () => (checkState.isAllSelected ? unselectAllItems() : handleSelectAll());
 
   const addNewData = () => {
-    resetForm();
+    resetForm(true);
     const path = `/sites/data/${currentStructuredData.id}/editor`;
     setHistoryPush(path, false);
   };
@@ -402,16 +414,12 @@ const Content = (props: IProps): JSX.Element => {
     const sortedState = getSortedListStatus(orderPointer, isAscending);
     setSortedListStatus(sortedState);
 
-    const filtersSelection = setFiltersSelection("order", orderPointer, isAscending);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
+    setFiltersSelection("order", orderPointer, isAscending);
   };
 
   const filterItems = async (filterPointer: string, filtersSelected: string) => {
     setPage(firstPage);
-    const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
-    const filterQuery = setFilterQuery(filtersSelection);
-    setCurrentFilterQuery(filterQuery);
+    setFiltersSelection(filterPointer, filtersSelected);
   };
 
   const Header = (
@@ -651,10 +659,7 @@ const Content = (props: IProps): JSX.Element => {
     ? { onClick: handleImport, title: "NEXT" }
     : { onClick: createContent, title: "Create new" };
 
-  const resetFilter = () => {
-    resetFilterQuery();
-    setCurrentFilterQuery("");
-  };
+  const resetFilter = () => resetFilterQuery();
 
   const mainDeleteModalAction = {
     title: "Delete pages",
@@ -786,6 +791,7 @@ const mapStateToProps = (state: IRootState) => ({
   sitesByLang: state.sites.sitesByLang,
   user: state.users.currentUser,
   skipReviewOnPublish: state.app.globalSettings.skipReviewOnPublish,
+  contentFilters: state.sites.contentFilters,
 });
 
 interface IDispatchProps {
@@ -803,7 +809,7 @@ interface IDispatchProps {
   createNewTranslation(isNewTranslation: boolean): void;
   getFilteredContent(filter: string | null): void;
   getStructuredDataContents(params: any, siteID: number): Promise<void>;
-  resetForm(): void;
+  resetForm(setDefault?: boolean): void;
   deleteBulk(ids: any): Promise<boolean>;
   duplicatePage(pageID: number, data?: any, siteID?: number): Promise<boolean>;
   getPage(pageID?: number, global?: boolean): Promise<void>;
@@ -819,6 +825,7 @@ interface IDispatchProps {
   getDataPack: (id: string) => Promise<void>;
   resetCurrentSiteErrorPages: () => Promise<void>;
   getSitesByLang(language: number): Promise<void>;
+  setContentFilters(contentFilters: Record<string, string> | null): void;
 }
 
 const mapDispatchToProps = {
@@ -851,6 +858,7 @@ const mapDispatchToProps = {
   getDataPack: dataPacksActions.getSiteDataPack,
   resetCurrentSiteErrorPages: sitesActions.resetCurrentSiteErrorPages,
   getSitesByLang: sitesActions.getSitesByLang,
+  setContentFilters: sitesActions.setContentFilters,
 };
 
 interface IPagesProps {
@@ -878,6 +886,7 @@ interface IPagesProps {
   sitesByLang: ISite[];
   user: IUser;
   skipReviewOnPublish?: boolean;
+  contentFilters: Record<string, string> | null;
 }
 
 type IProps = IPagesProps & IDispatchProps;

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

@@ -13,12 +13,14 @@ const DefaultsBrowser = (props: IProps) => {
     setSelectedContent,
     currentSiteInfo: { theme, id: siteID },
     siteLangs,
+    browserRef,
   } = props;
 
   const updatedContent = { ...content };
 
   return (
     <Browser
+      browserRef={browserRef}
       isPage={false}
       socials={socials}
       content={updatedContent}
@@ -43,6 +45,7 @@ interface IEditorStateProps {
 
 interface IPageBrowserDispatchProps {
   setSelectedContent(editorID: number): void;
+  browserRef?: any;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

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

@@ -23,6 +23,7 @@ const Editor = (props: IProps) => {
     selectedTab,
     isLoading,
     site,
+    browserRef,
   } = props;
 
   const actions = {
@@ -36,7 +37,7 @@ const Editor = (props: IProps) => {
 
   return (
     <ResizePanel
-      leftPanel={<DefaultsBrowser />}
+      leftPanel={<DefaultsBrowser browserRef={browserRef} />}
       rightPanel={
         <ConfigPanel
           schema={schema}
@@ -77,6 +78,7 @@ interface IPageBrowserDispatchProps {
   replaceModule(module: any, parent: any, objKey: string): void;
   replaceElementsInCollection(newValue: string, reference: string): void;
   moveModule(moduleID: number, selectedContent: any, newIndex: number, key: string): void;
+  browserRef?: any;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

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

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { connect } from "react-redux";
 
 import { IRootState } from "@ax/types";
@@ -11,6 +11,7 @@ import { ErrorToast, Loading, MainWrapper, Modal } from "@ax/components";
 import Editor from "./Editor";
 
 import * as S from "./style";
+import { getImage } from "./utils";
 
 const DefaultsEditor = (props: IProps) => {
   const {
@@ -40,6 +41,7 @@ const DefaultsEditor = (props: IProps) => {
   const isNew = !editorContent?.id;
 
   const isSetAsDefault = editorContent && editorContent.setAsDefault;
+  const browserRef = useRef<any>(null);
 
   useEffect(() => {
     getValues();
@@ -64,18 +66,14 @@ const DefaultsEditor = (props: IProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentSiteInfo, editorContent?.id]);
 
-  const save = () => {
-    isNew || isNewTranslation
-      ? createNavigation().then((isSaved: boolean) => {
-          if (isSaved) {
-            resetDirty();
-          }
-        })
-      : updateNavigation(editorContent.id, editorContent, true).then((isSaved: boolean) => {
-          if (isSaved) {
-            resetDirty();
-          }
-        });
+  const save = async () => {
+    const image = await getImage(browserRef);
+
+    const isSaved =
+      isNew || isNewTranslation
+        ? await createNavigation(image)
+        : await updateNavigation(editorContent.id, editorContent, true, image);
+    if (isSaved) resetDirty();
   };
 
   const saveAsDefault = () => {
@@ -121,7 +119,7 @@ const DefaultsEditor = (props: IProps) => {
     <p>{`There is already a ${editorContent.type} defined as default. If you change it to this one, it will be shown on all the pages on this site. Are you sure your want to make this change?`}</p>
   );
 
-  const maintModalAction = { title: "Yes, set as default", onClick: saveAsDefault };
+  const mainModalAction = { title: "Yes, set as default", onClick: saveAsDefault };
   const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
   const goBack = (path: string) => setHistoryPush(path, true);
 
@@ -147,13 +145,13 @@ const DefaultsEditor = (props: IProps) => {
           hide={toggleModal}
           title={`Default ${editorContent.component}`}
           secondaryAction={secondaryModalAction}
-          mainAction={maintModalAction}
+          mainAction={mainModalAction}
           size="S"
         >
           {isOpen ? <S.ModalContent>{setDefaultModalText}</S.ModalContent> : null}
         </Modal>
         <S.Content>
-          <Editor />
+          <Editor browserRef={browserRef} />
         </S.Content>
       </MainWrapper>
     </>
@@ -206,8 +204,8 @@ interface IDispatchProps {
   setHistoryPush(path: string, isEditor?: boolean): void;
   setLanguage?(lang: { locale: string; id: number | null }): void;
   getValues(): void;
-  createNavigation(): Promise<boolean>;
-  updateNavigation(navID: number, data: any, fromEditor?: boolean): Promise<boolean>;
+  createNavigation(image: File | null): Promise<boolean>;
+  updateNavigation(navID: number, data: any, fromEditor?: boolean, image?: File | null): Promise<boolean>;
   createTranslation(isNewTranslation: boolean): void;
   setHeader(id: number | null): void;
   setFooter(id: number | null): void;

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

@@ -0,0 +1,37 @@
+import { toBlob } from "html-to-image";
+
+const getImage = async (browserRef: any): Promise<File | null> => {
+  if (browserRef?.current) {
+    const browserContent = browserRef.current.querySelector(".browser-content");
+
+    const { height, overflow } = getComputedStyle(browserContent);
+    browserContent.style.height = "auto";
+    browserContent.style.overflow = "visible";
+    const originalHeight = browserContent.clientHeight;
+
+    const elChildren = browserContent.querySelectorAll("*");
+    let maxAbsoluteElementHeight = 0;
+    [].forEach.call(elChildren, function (element: any) {
+      const isAbsolutePosition = getComputedStyle(element).position === "absolute";
+      const isMaxAbsolutePositionHeight = element.clientHeight > maxAbsoluteElementHeight;
+      if (isAbsolutePosition && isMaxAbsolutePositionHeight) {
+        maxAbsoluteElementHeight = element.clientHeight;
+      }
+    });
+    if (maxAbsoluteElementHeight) {
+      const actualHeight = originalHeight + maxAbsoluteElementHeight;
+      browserContent.style.height = `${actualHeight}px`;
+    }
+
+    const imageBlob = await toBlob(browserContent, { quality: 0.95, pixelRatio: 0.5 });
+    const imageFile = imageBlob && new File([imageBlob], "navigation-thumbnail.png", { type: "image/png" });
+
+    browserContent.style.height = height;
+    browserContent.style.overflow = overflow;
+
+    return imageFile;
+  }
+  return null;
+};
+
+export { getImage };