@griddo/ax 1.75.238 → 1.75.240

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.75.238",
+  "version": "1.75.240",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -230,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2d1fa86361a787815bed32d120d5bda5f1489c6f"
+  "gitHead": "3e2c8b6a025d58796f9c431bce441ec421bba2f7"
 }

package/src/__tests__/components/Browser/Browser.test.tsx

@@ -19,7 +19,7 @@ const defaultProps = mock<IBrowserProps>();
 
 defaultProps.content = {};
 defaultProps.browserRef = {
-  current: "",
+  current: null,
 };
 defaultProps.cloudinaryName = "thesaurus-cms";
 defaultProps.disabled = false;

package/src/__tests__/components/Fields/AsyncCheckGroup/AsyncCheckGroup.test.tsx

@@ -10,8 +10,6 @@ import { mock } from "jest-mock-extended";
 
 afterEach(cleanup);
 
-const defaultProps = mock<IAsyncCheckGroup>();
-
 jest.mock("axios");
 const mockedAxios = axios as jest.MockedFunction<typeof axios>;
 
@@ -19,36 +17,53 @@ describe("AsyncCheckGroup component rendering", () => {
   afterEach(() => {
     jest.resetAllMocks();
   });
+
   it("should render the component with 6 options", async () => {
     const defaultSite = mock<ISite>();
     defaultSite.id = 113;
-    defaultProps.site = defaultSite;
-    defaultProps.value = [3622];
+
+    const defaultDataProps: IAsyncCheckGroup = {
+      site: defaultSite,
+      value: [{
+          value: 3622,
+          name: "Home",
+          title: "Home"
+        }],
+      onChange: jest.fn(),
+      source: "NEWS",
+    }
+
     const data = {
       data: [
         {
           value: 3622,
           name: "Home",
+          title: "Home"
         },
         {
           value: 3731,
           name: "English child",
+          title: "English child",
         },
         {
           value: 3730,
           name: "English Parent",
+          title: "English Parent",
         },
         {
           value: 3787,
           name: "English test",
+          title: "English test",
         },
         {
           value: 3745,
           name: "New Page",
+          title: "New Page",
         },
         {
           value: 3784,
           name: "Prueba",
+          title: "Prueba",
         },
       ],
       status: 200,
@@ -62,7 +77,7 @@ describe("AsyncCheckGroup component rendering", () => {
     await act(async () => {
       render(
         <ThemeProvider theme={parseTheme(globalTheme)}>
-          <AsyncCheckGroup {...defaultProps} />
+          <AsyncCheckGroup {...defaultDataProps} />
         </ThemeProvider>
       );
     });
@@ -71,8 +86,11 @@ describe("AsyncCheckGroup component rendering", () => {
   });
 
   it("should render the component with no options", async () => {
-    defaultProps.source = "source";
-    defaultProps.value = [];
+    const defaultProps: IAsyncCheckGroup = {
+      value: [],
+      onChange: jest.fn(),
+      source: "NEWS",
+    }
 
     const data = {
       data: [],

package/src/__tests__/modules/Sites/SitesList/SitesList.test.tsx

@@ -447,8 +447,7 @@ describe("Sites module events", () => {
     expect(recentSiteItems.length).toEqual(2);
 
     fireEvent.click(recentSiteItems[0]);
-
-    expect(history.location.pathname).toEqual("/sites/pages");
+    await waitFor(() => expect(history.location.pathname).toEqual("/sites/pages"));
   });
 
   it("should display list view on click list option button", async () => {
@@ -896,7 +895,7 @@ describe("Sites module events", () => {
     await act(async () => {
       render(Component, { store });
     });
-    
+
     const gridIconAction = screen.getByTestId("icon-action-Grid2");
     fireEvent.click(gridIconAction);
 

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/Field/index.tsx

@@ -94,7 +94,7 @@ export interface IFieldProps {
   pages: IPage[];
   actions: any;
   site?: ISite;
-  lang?: string;
+  lang?: number;
   disabled?: boolean;
   readonly?: boolean;
   activatedModules?: string[];

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/TemplateManager/index.tsx

@@ -28,6 +28,7 @@ export const TemplateManager = (props: IProps): JSX.Element => {
     moduleCopy,
     availableDataPacks,
     setHistoryPush,
+    lang
   } = props;
 
   const isConfig = selectedTab === "config";
@@ -99,6 +100,7 @@ export const TemplateManager = (props: IProps): JSX.Element => {
               availableDataPacks={availableDataPacks}
               template={template}
               setHistoryPush={setHistoryPush}
+              lang={lang}
             />
           );
         })}
@@ -126,6 +128,7 @@ interface IProps {
   moduleCopy: { date: string; element: Record<string, unknown> } | null;
   availableDataPacks: Record<string, any>[];
   setHistoryPush?: (path: string, isEditor: boolean) => void;
+  lang: number;
 }
 
 const mapStateToProps = (state: IRootState) => ({

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/index.tsx

@@ -163,6 +163,7 @@ const PageConnectedField = (props: any) => {
         theme={theme}
         moduleCopy={moduleCopy}
         setHistoryPush={setHistoryPush}
+        lang={lang.id}
       />
     );
   }
@@ -178,7 +179,7 @@ const PageConnectedField = (props: any) => {
       pages={pages}
       actions={actions}
       site={site}
-      lang={lang}
+      lang={lang.id}
       disabled={isDisabled}
       readonly={isFieldReadOnly}
       activatedModules={activatedModules}

package/src/components/FieldContainer/index.tsx

@@ -69,7 +69,7 @@ export interface IFieldContainerProps {
   actions?: any;
   hideable?: boolean;
   site?: ISite;
-  lang?: string;
+  lang?: number;
   innerFields?: any;
   disabled?: boolean;
   readonly?: boolean;

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

@@ -10,17 +10,16 @@ import * as S from "./style";
 const AsyncCheckGroup = (props: IAsyncCheckGroup): JSX.Element => {
   const { onChange, value, site, source, disabled, error, handleValidation, fullHeight, allLanguages = false } = props;
 
-  const [options, setOptions] = useState<ICheck[]>([]);
-
-  const safeValue = value ? value : [];
+  const [options, setOptions] = useState<ICheckValue[]>([]);
+  const safeValue = value && Array.isArray(value) ? value : [];
 
   useEffect((): any => {
     let isSubscribed = true;
 
-    const getItems = async () => {
+    const getItems = async (): Promise<ICheckValue[]> => {
       try {
         let result = null;
-        const siteID = site ? site.id : null;
+        const siteID = site ? site.id : "global";
         result = await checkgroups.getCheckGroupItems(siteID, source, allLanguages);
         if (result && isReqOk(result.status)) {
           return result.data;
@@ -28,12 +27,29 @@ const AsyncCheckGroup = (props: IAsyncCheckGroup): JSX.Element => {
       } catch (e) {
         console.log(e);
       }
-      return false;
+      return [];
     };
 
     getItems()
-      .then((result) => (isSubscribed ? setOptions(result) : null))
-      .catch((apiError) => console.log(apiError));
+      .then((result) => {
+       if(isSubscribed){
+          setOptions(result);
+          // clean array of old values and set translations
+          const resultIDs = result && result.map((opt: ICheckValue) => opt.value);
+          const fixedState = safeValue.reduce((acc: ICheckValue[], current: ICheckValue) => {
+            if(resultIDs.includes(current.value)){
+              return [...acc, current];
+            } else {
+              const trad = result.find((value: ICheckValue) => value.dataLanguages && value.dataLanguages.find((data: any) => data.id === current.value ));
+              if(trad){
+                return [...acc, trad]
+              }
+              return acc;
+            }
+          }, []);
+          onChange(fixedState);
+        }
+      }).catch((apiError) => console.log(apiError));
 
     return () => (isSubscribed = false);
   }, [site, source, allLanguages]);
@@ -52,13 +68,13 @@ const AsyncCheckGroup = (props: IAsyncCheckGroup): JSX.Element => {
       newArray = [...arrayIds, newValue.value];
     }
 
-    const newArrayObject = options.filter((e: any) => newArray.includes(e.value));
+    const newArrayObject = options.filter((e: ICheckValue) => newArray.includes(e.value));
 
     onChange(newArrayObject);
     error && handleValidation && handleValidation(newArrayObject);
   };
 
-  const isChecked = (id: number) => safeValue.find((e: any) => (typeof e === "number" ? e === id : e.value === id));
+  const isChecked = (id: number) : boolean =>!!safeValue.find((e: ICheckValue) => (typeof e === "number" ? e === id : e.value === id));
 
   const checks =
     options &&
@@ -78,11 +94,18 @@ const AsyncCheckGroup = (props: IAsyncCheckGroup): JSX.Element => {
   return <S.FieldGroup full={fullHeight}>{checks}</S.FieldGroup>;
 };
 
+interface ICheckValue {
+  value: number;
+  name: string;
+  title: string;
+  dataLanguages?: { id: number; language: number }[];
+}
+
 export interface IAsyncCheckGroup {
-  value: any[] | null;
+  value: ICheckValue[] | null;
   site?: ISite | null;
   source: string;
-  onChange: (value: any) => void;
+  onChange: (value: ICheckValue[]) => void;
   disabled?: boolean;
   error?: boolean;
   handleValidation?: (value: string | any[]) => void;

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

@@ -86,7 +86,7 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [entity, site, lang, selectedContent, entityId, mandatory, placeholder, filter, isCategories, isPage, options]);
 
-  const handleChange = (selectedValue: any) => {
+  const handleChange = (selectedValue: ICheck | IOption | null) => {
     const newValue = selectedValue ? selectedValue.value : selectedValue;
     onChange(newValue);
   };
@@ -154,19 +154,19 @@ interface ICheck {
 }
 export interface IAsyncSelectProps {
   name: string;
-  value: any;
+  value?: string | number | null;
   entity?: string;
   entityId?: string | number;
   error?: boolean;
   disabled?: boolean;
-  onChange: (value: string) => void;
+  onChange: (value: string | number | null) => void;
   site: ISite | null;
   lang: string;
   selectedContent: any;
   mandatory?: boolean;
   placeholder?: string;
   filter?: any[];
-  options?: any;
+  options?: any[];
   source?: string;
 }
 

package/src/components/Fields/ComponentArray/MixableComponentArray/index.tsx

@@ -98,11 +98,11 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
     showAddItemButton &&
     (isModuleArr || objKey === "componentModules") &&
     !!moduleCopy &&
-    timeSinceModuleCopy < eightHoursInSeconds &&
+    timeSinceModuleCopy && timeSinceModuleCopy < eightHoursInSeconds &&
     (whiteList.includes(moduleCopyComponent) || isModuleCopyUnavailable);
 
   const canReplace = maxItems === 1 && whiteList.length > 1;
-  const displayReplaceSideModal = value.length > 0 && canReplace;
+  const displayReplaceSideModal = fixedValue.length > 0 && canReplace;
   const optionsType = isModuleArr ? "modules" : "components";
 
   const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
@@ -224,7 +224,7 @@ export interface IMixableComponentArrayProps {
   maxItems: number;
   title: string;
   whiteList: any[];
-  value: IModule[];
+  value?: IModule[];
   selectedContent: any;
   editorID: number;
   goTo: (editorID: string) => void;

package/src/components/Fields/ComponentArray/SameComponentArray/index.tsx

@@ -40,7 +40,7 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
   }
 
   const getText = (name: string, index: number) => {
-    return value.length > 1 ? `#${index + 1} ${name}` : name;
+    return value && value.length > 1 ? `#${index + 1} ${name}` : name;
   };
 
   const { kind } = selectedContent;
@@ -54,7 +54,7 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
 
   const handleAdd = isModuleArr ? handleAddModule : handleAddComponent;
 
-  const showAddItemButton = !maxItems || value.length < maxItems;
+  const showAddItemButton = !maxItems || (value && value.length < maxItems);
 
   const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
 
@@ -141,7 +141,7 @@ export interface ISameComponentArrayProps {
   maxItems: number;
   title: string;
   whiteList: string[];
-  value: IModule[];
+  value?: IModule[];
   elementUniqueSelection: boolean;
   selectedContent: any;
   editorID: number;

package/src/components/Fields/ComponentArray/helpers.tsx

@@ -26,8 +26,8 @@ const getComponentProps = (element: any, activatedModules: string[], isModuleArr
   return { moduleTitle, isModuleDeactivated, componentTitle, displayName, isModule };
 };
 
-const containerToComponentArray = (value: Record<string, IComponent>): IComponent[] =>
-  Object.values(value).filter((item: IComponent) => !isComponentEmpty(item));
+const containerToComponentArray = (value?: Record<string, IComponent>): IComponent[] =>
+  value ? Object.values(value).filter((item: IComponent) => !isComponentEmpty(item)): [];
 
 const getTypefromKey = (key: string) => {
   switch (key) {

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

@@ -32,36 +32,34 @@ const MultiCheckSelect = (props: IMultiCheckSelectProps) => {
       <S.Field isOpen={isOpen} onClick={handleClick} disabled={disabled} data-testid="field">
         {placeholder} <Asterisk />
       </S.Field>
-      {isOpen && (
-        <S.DropDown floating={floating}>
-          {options && (
-            <CheckGroup
-              options={options}
-              value={value}
-              onChange={onChange}
-              selectAllOption={selectAllOption}
-              disabled={disabled}
-            />
-          )}
-          {source && (
-            <AsyncCheckGroup
-              source={source}
-              site={site}
-              value={value}
-              onChange={onChange}
-              fullHeight={true}
-              disabled={disabled}
-            />
-          )}
-        </S.DropDown>
-      )}
+      {isOpen && <S.DropDown floating={floating} isOpen={isOpen}>
+        {options && (
+          <CheckGroup
+            options={options}
+            value={value}
+            onChange={onChange}
+            selectAllOption={selectAllOption}
+            disabled={disabled}
+          />
+        )}
+        {source && !options && (
+          <AsyncCheckGroup
+            source={source}
+            site={site}
+            value={value}
+            onChange={onChange}
+            fullHeight={true}
+            disabled={disabled}
+          />
+        )}
+      </S.DropDown>}
     </S.Wrapper>
   );
 };
 
 export interface IMultiCheckSelectProps {
-  value: (string | number)[];
-  onChange: (value: string | (string | number)[]) => void;
+  value: any[];
+  onChange: (value: string | any[]) => void;
   site?: ISite | null;
   placeholder: string;
   source?: string;

package/src/components/Fields/MultiCheckSelect/style.tsx

@@ -2,34 +2,34 @@ import styled from "styled-components";
 
 const Wrapper = styled.div`
   position: relative;
-  min-width: calc(${(p) => p.theme.spacing?.xl} * 2);
-  max-width: calc(${(p) => p.theme.spacing?.xl} * 6);
+  min-width: calc(${(p) => p.theme.spacing.xl} * 2);
+  max-width: calc(${(p) => p.theme.spacing.xl} * 6);
   z-index: 2;
 `;
 
 const Field = styled.div<{ isOpen: boolean; disabled?: boolean }>`
   position: relative;
-  ${(p) => p.theme.textStyle?.fieldContent};
-  color: ${(p) => (p.disabled ? p.theme.color?.interactiveDisabled : p.theme.color?.textHighEmphasis)};
+  ${(p) => p.theme.textStyle.fieldContent};
+  color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.textHighEmphasis)};
   display: flex;
   width: 100%;
-  height: ${(p) => p.theme.spacing?.l};
-  background-color: ${(p) => p.theme.color?.interactiveBackground};
+  height: ${(p) => p.theme.spacing.l};
+  background-color: ${(p) => p.theme.color.interactiveBackground};
   border: 1px solid
     ${(p) =>
       p.isOpen
-        ? p.theme.color?.interactive01
+        ? p.theme.color.interactive01
         : p.disabled
-        ? p.theme.color?.interactiveDisabled
-        : p.theme.color?.uiLine};
-  border-radius: ${(p) => p.theme.radii?.s};
+        ? p.theme.color.interactiveDisabled
+        : p.theme.color.uiLine};
+  border-radius: ${(p) => p.theme.radii.s};
   align-items: center;
   cursor: pointer;
-  padding: 0 ${(p) => p.theme.spacing?.s};
+  padding: 0 ${(p) => p.theme.spacing.s};
 
   :focus,
   :active {
-    border: 1px solid ${(p) => p.theme.color?.interactive01};
+    border: 1px solid ${(p) => p.theme.color.interactive01};
     outline: none;
   }
 
@@ -38,7 +38,7 @@ const Field = styled.div<{ isOpen: boolean; disabled?: boolean }>`
     right: 16px;
     top: ${(p) => (p.isOpen ? `22px` : `18px`)};
     content: "";
-    border: solid ${(p) => p.theme.color?.interactive01};
+    border: solid ${(p) => p.theme.color.interactive01};
     border-width: 0 2px 2px 0;
     display: inline-block;
     padding: 3px;
@@ -46,15 +46,16 @@ const Field = styled.div<{ isOpen: boolean; disabled?: boolean }>`
   }
 `;
 
-const DropDown = styled.div<{ floating?: boolean }>`
-  background-color: ${(p) => p.theme.color?.uiBarBackground};
-  border: 1px solid ${(p) => p.theme.color?.uiLine};
-  border-radius: ${(p) => p.theme.radii?.s};
-  padding: ${(p) => `${p.theme.spacing?.s} ${p.theme.spacing?.xs} ${p.theme.spacing?.xs} ${p.theme.spacing?.s}`};
+const DropDown = styled.div<{ floating?: boolean; isOpen: boolean }>`
+  background-color: ${(p) => p.theme.color.uiBarBackground};
+  border: ${(p) => (p.isOpen ? `1px solid ${p.theme.color.uiLine}` : "none")};
+  border-radius: ${(p) => p.theme.radii.s};
+  padding: ${(p) => p.isOpen ? `${p.theme.spacing.s} ${p.theme.spacing.xs} ${p.theme.spacing.xs} ${p.theme.spacing.s}` : 0};
   width: 100%;
   z-index: 2;
+  height: ${(p) => (p.isOpen ? "100%" : 0)};
   max-height: 130px;
-  overflow: auto;
+  overflow: ${(p) => (p.isOpen ? "auto" : "hidden")};
   position: ${(p) => (p.floating ? "absolute" : "block")};
 `;
 

package/src/containers/App/actions.tsx

@@ -122,7 +122,7 @@ function handleError(response: any, isMultiple = false, msg?: string): (dispatch
       text,
     } = response;
 
-    const firstMsg = Array.isArray(message) ? message[0].error : message || text;
+    const firstMsg = Array.isArray(message) && message[0] ? message[0].error : message || text;
 
     const error = {
       code,

package/src/containers/App/reducer.tsx

@@ -22,7 +22,7 @@ export interface IAppState {
   user: IUser;
   token: string;
   isLoggingIn: boolean;
-  lang: { locale: string; id: any };
+  lang: { locale: string; id: number };
   globalLangs: any;
   globalSettings: IGlobalSettings;
   sessionStartedAt: null | Date;

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

@@ -281,12 +281,13 @@ function setItemValue(page: IMenuItem): (dispatch: Dispatch) => Promise<void> {
   };
 }
 
-function updateForm(valueObj: any): (dispatch: Dispatch, getState: any) => void {
+function updateFormValue(valueObj: any): (dispatch: Dispatch, getState: any) => void {
   return (dispatch, getState) => {
     const {
       menu: { form },
     } = getState();
     const updatedForm = { ...form, ...valueObj };
+
     dispatch(setMenuFormData(updatedForm));
   };
 }
@@ -338,5 +339,5 @@ export {
   resetItemValues,
   resetMenuValues,
   reorderMenu,
-  updateForm,
+  updateFormValue,
 };

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

@@ -33,14 +33,11 @@ const initialState = {
   type: "MainMenu",
   item: null,
   form: {
-    itemLink: null,
-    itemImage: null,
-    itemLabel: "",
-    itemAuxText: "",
+    url: null,
+    label: "",
     type: "link",
     headerStyle: "",
     footerStyle: "",
-    itemSpecial: false,
   },
   totalItems: 0,
 };

package/src/containers/Sites/actions.tsx

@@ -599,7 +599,7 @@ function deleteAndRemoveFromSiteBulk(
 
       const responseGlobalPageActions = {
         handleSuccess: () => {
-          if (responseErrorPages.data.message.length > 0) {
+          if (responseErrorPages.data.message?.length > 0) {
             getMessageErrors();
           }
         },
@@ -617,14 +617,13 @@ function deleteAndRemoveFromSiteBulk(
         },
       };
 
-      const callbackPages = async () => pageIds.length > 0 && pages.bulkDelete(pageIds);
-      const callbackGlobalPages = async () =>
-        globalPageIds.length > 0 && sites.removePageBulk(currentSiteInfo.id, globalPageIds);
+      const callbackPages = async () => pages.bulkDelete(pageIds);
+      const callbackGlobalPages = async () => sites.removePageBulk(currentSiteInfo.id, globalPageIds);
 
-      const resultPages = await handleRequest(callbackPages, responsePageActions, [])(dispatch);
-      const resultGlobalPages = await handleRequest(callbackGlobalPages, responseGlobalPageActions, [])(dispatch);
+      const resultPages = pageIds.length > 0 ? await handleRequest(callbackPages, responsePageActions, [])(dispatch) : true;
+      const resultGlobalPages = globalPageIds.length > 0 ? await handleRequest(callbackGlobalPages, responseGlobalPageActions, [])(dispatch) : true;
 
-      return resultPages && resultGlobalPages;
+      return resultPages || resultGlobalPages;
     } catch (e) {
       console.log(e);
       return false;

package/src/helpers/index.tsx

@@ -46,6 +46,7 @@ import {
   getDisplayName,
   getTemplateType,
   getTemplateDisplayName,
+  getMenuItems,
   filterByCategory,
   getSchemaType,
   getModuleCategories,
@@ -133,6 +134,7 @@ export {
   getTemplateDisplayName,
   getSchemaThumbnails,
   getTemplateThumbnails,
+  getMenuItems,
   filterByCategory,
   getStructuredDataFromPage,
   getCurrentPageStructuredData,

package/src/helpers/schemas.tsx

@@ -74,6 +74,8 @@ const getTemplateDisplayName = (template: string) => {
   return schema ? schema.displayName : undefined;
 };
 
+const getMenuItems = (type: string): ({ fields: any[] } | undefined) => schemas.menuItems[type];
+
 const filterByCategory = (options: any, category: string) =>
   options.filter((option: any) => allSchemas[option].category === category);
 
@@ -153,6 +155,7 @@ export {
   getSchemaType,
   getTemplateType,
   getTemplateDisplayName,
+  getMenuItems,
   filterByCategory,
   getModuleCategories,
   getModuleStyles,

package/src/modules/Content/index.tsx

@@ -229,10 +229,11 @@ const Content = (props: IProps): JSX.Element => {
           itemsPerPage,
           query: searchQuery,
           format: "list",
+          lang: lang.id
         };
 
     return params;
-  }, [filter, currentSiteInfo, isStructuredData, page, searchQuery]);
+  }, [filter, currentSiteInfo, isStructuredData, page, searchQuery, lang]);
 
   const getPages = (params: any, filterQuery?: any) => {
     const isStructuredDataPage = filter !== "unique-pages";

package/src/modules/GlobalEditor/index.tsx

@@ -136,13 +136,13 @@ const GlobalEditor = (props: IProps) => {
         status: pageStatus.UPLOAD_PENDING,
       };
 
-      pageID
-        ? updatePageStatus([pageID], pageStatus.UPLOAD_PENDING)
-        : savePage(false, publishPage).then((isSaved: boolean) => {
-            if (isSaved) {
-              resetDirty();
-            }
-          });
+      const isSaved = pageID
+        ? await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING)
+        : await savePage(false, publishPage);
+
+      if (isSaved) {
+        resetDirty();
+      }
     } else {
       setNotification({ text: errorNotificationText, type: "error" });
     }
@@ -158,20 +158,22 @@ const GlobalEditor = (props: IProps) => {
         status: pageStatus.UPLOAD_PENDING,
       };
 
-      savePage(false, publishPage).then((isSaved: boolean) => {
-        if (isSaved) {
-          resetDirty();
-        }
-      });
+      const isSaved = await savePage(false, publishPage);
+      if (isSaved) {
+        resetDirty();
+      }
     } else {
       setNotification({ text: errorNotificationText, type: "error" });
     }
   };
 
-  const unpublishPage = () => {
+  const unpublishPage = async () => {
     const { updatePageStatus, pageID } = props;
 
-    updatePageStatus([pageID], pageStatus.OFFLINE_PENDING);
+    const isSaved = await updatePageStatus([pageID], pageStatus.OFFLINE_PENDING);
+    if (isSaved) {
+      resetDirty();
+    }
   };
 
   const reviewPage = async () => {

package/src/modules/Navigation/Menus/List/Table/Item/index.tsx

@@ -44,18 +44,15 @@ const Item = (props: IItemProps): JSX.Element => {
   const resetValues = () => resetItemValues();
 
   const setItem = (item: IMenuItem) => {
-    const type = item.config ? item.config.type : "link";
-    const headerStyle = item.config ? item.config.headerStyle : "";
-    const footerStyle = item.config ? item.config.footerStyle : "";
+    const { config, ...rest } = item;
+    const type = config ? config.type : "link";
+    const headerStyle = config ? config.headerStyle : "";
+    const footerStyle = config ? config.footerStyle : "";
     setItemValue(item);
-    updateFormValue({ itemLink: item.url });
-    updateFormValue({ itemLabel: item.label });
-    updateFormValue({ itemAuxText: item.auxText });
-    updateFormValue({ itemImage: item.image });
     updateFormValue({ type });
     updateFormValue({ headerStyle });
     updateFormValue({ footerStyle });
-    updateFormValue({ itemSpecial: item.special || false });
+    updateFormValue(rest);
   };
 
   const openModal = () => {
@@ -132,7 +129,7 @@ const mapDispatchToProps = {
   deleteMenuItem: menuActions.deleteMenuItem,
   resetItemValues: menuActions.resetItemValues,
   setItemValue: menuActions.setItemValue,
-  updateFormValue: menuActions.updateForm,
+  updateFormValue: menuActions.updateFormValue,
 };
 
 type IItemProps = IProps & IDispatchProps;

package/src/modules/Navigation/Menus/List/Table/SidePanel/Form/ConnectedField/index.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import { IRootState } from "@ax/types";
+import { menuActions } from "@ax/containers/Navigation/Menu";
+import { FieldsBehavior } from "@ax/components";
+
+const ConnectedField = (props: IProps) => {
+  const { form, type, name, updateFormValue, setIsGalleryOpened } = props;
+
+  const value = form[name];
+
+  const handleChange = (newValue: any) => updateFormValue({ [name]: newValue });
+
+  const fieldProps = {
+    value,
+    onChange: handleChange,
+    setIsGalleryOpened: type === "ImageField" ? setIsGalleryOpened : undefined,
+    ...props,
+  };
+
+  return <FieldsBehavior fieldType={type} {...fieldProps} />;
+};
+
+interface IProps {
+  form: any;
+  type: string;
+  title: string;
+  name: string;
+  mandatory?: boolean;
+  helptext?: string;
+  options?: any;
+  updateFormValue: (value: any) => void;
+  setIsGalleryOpened?: (isGalleryOpened: boolean) => void;
+}
+
+const mapStateToProps = (state: IRootState) => ({
+  form: state.menu.form,
+});
+
+const mapDispatchToProps = {
+  updateFormValue: menuActions.updateFormValue,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ConnectedField)

package/src/modules/Navigation/Menus/List/Table/SidePanel/Form/index.tsx

@@ -1,23 +1,22 @@
 import React, { memo } from "react";
-
 import { connect } from "react-redux";
+
 import { menuActions } from "@ax/containers/Navigation";
 import { sitesActions } from "@ax/containers/Sites";
 import { FieldsBehavior } from "@ax/components";
+import { IRootState, IMenuForm, ISchemaField } from "@ax/types";
+import { getMenuItems } from "@ax/helpers";
 
-import { IRootState, IMenuForm, IImage } from "@ax/types";
+import ConnectedField from "./ConnectedField";
 
 const Form = (props: IProps): JSX.Element => {
-  const { form, updateForm, toggleSecondaryPanel, setIsGalleryOpened } = props;
+  const { form, updateFormValue, toggleSecondaryPanel, setIsGalleryOpened } = props;
 
-  const { itemLink, itemLabel, itemAuxText, type, itemImage, itemSpecial } = form;
+  const { url, label, type } = form;
 
-  const setLinkValue = (value: any) => updateForm({ itemLink: value });
-  const setLabelValue = (value: string) => updateForm({ itemLabel: value });
-  const setAuxTextValue = (value: string) => updateForm({ itemAuxText: value });
-  const setTypeValue = (value: string) => updateForm({ type: value });
-  const setImageValue = (value: IImage) => updateForm({ itemImage: value });
-  const setSpecial = (value: boolean) => updateForm({ itemSpecial: value });
+  const setLinkValue = (value: any) => updateFormValue({ url: value });
+  const setLabelValue = (value: string) => updateFormValue({ label: value });
+  const setTypeValue = (value: string) => updateFormValue({ type: value });
 
   const typeLinkOptions = [
     {
@@ -34,6 +33,11 @@ const Form = (props: IProps): JSX.Element => {
 
   const typeLink = type ? type : "link";
 
+  const menuItems = getMenuItems(typeLink);
+  const schemaFields = menuItems && menuItems.fields ? menuItems.fields : [];
+
+  const generateFields = (fields: ISchemaField[]) => fields.map((field: ISchemaField) => <ConnectedField {...field } name={field.key} setIsGalleryOpened={setIsGalleryOpened} />);
+
   return (
     <>
       <FieldsBehavior
@@ -49,57 +53,22 @@ const Form = (props: IProps): JSX.Element => {
         name="navigationLabel"
         fieldType="TextField"
         autoComplete="nav-label"
-        value={itemLabel || ""}
+        value={label || ""}
         onChange={setLabelValue}
       />
-      {type !== "link" ? (
+      {type === "link" ? (
         <FieldsBehavior
-          title="Image"
-          name="image"
-          fullWidth={true}
-          fieldType="ImageField"
-          value={itemImage || null}
-          onChange={setImageValue}
-          setIsGalleryOpened={setIsGalleryOpened}
-        />
-      ) : (
-        <>
-          <FieldsBehavior
             title="Link"
             name="link"
             fieldType="UrlField"
-            value={itemLink || null}
+            value={url || null}
             onChange={setLinkValue}
             advanced={true}
             handlePanel={toggleSecondaryPanel}
             inFloatingPanel={true}
           />
-          <FieldsBehavior
-            title="Auxiliar Text"
-            name="auxText"
-            fieldType="TextArea"
-            value={itemAuxText || ""}
-            onChange={setAuxTextValue}
-          />
-          <FieldsBehavior
-            title="Image"
-            name="image"
-            fullWidth={true}
-            fieldType="ImageField"
-            value={itemImage || null}
-            onChange={setImageValue}
-            setIsGalleryOpened={setIsGalleryOpened}
-          />
-          <FieldsBehavior
-            name="special"
-            fieldType="ToggleField"
-            value={itemSpecial}
-            onChange={setSpecial}
-            background
-            auxText="Check it if the link has a special behavior."
-          />
-        </>
-      )}
+      ) : null }
+      {generateFields(schemaFields)}
     </>
   );
 };
@@ -109,7 +78,7 @@ const mapStateToProps = (state: IRootState) => ({
 });
 
 const mapDispatchToProps = {
-  updateForm: menuActions.updateForm,
+  updateFormValue: menuActions.updateFormValue,
   getSitePages: sitesActions.getSitePages,
 };
 
@@ -122,7 +91,7 @@ interface IFormProps {
   setIsGalleryOpened?: (isGalleryOpened: boolean) => void;
 }
 interface IDispatchProps {
-  updateForm(value: any): void;
+  updateFormValue(value: any): void;
 }
 
 type IProps = IDispatchProps & IStateProps & IFormProps;

package/src/modules/Navigation/Menus/List/Table/SidePanel/index.tsx

@@ -14,7 +14,7 @@ const SidePanel = (props: IProps): JSX.Element => {
   const { isOpen, isOpenedSecond, toggleModal, toggleSecondaryPanel, addMenuItem, updateMenuItem, item, edit, form } =
     props;
 
-  const { itemLabel, itemLink, itemImage, itemAuxText, type, headerStyle, footerStyle, itemSpecial } = form;
+  const { type, headerStyle, footerStyle } = form;
 
   const [isGalleryOpened, setIsGalleryOpened] = useState(false);
 
@@ -23,13 +23,9 @@ const SidePanel = (props: IProps): JSX.Element => {
   };
 
   let menuItem: any = {
-    label: itemLabel,
-    url: itemLink,
-    image: itemImage,
-    auxText: itemAuxText,
+    ...form,
     component: "Menu",
     config: { type, headerStyle, footerStyle },
-    special: itemSpecial,
   };
 
   menuItem.children = edit && item ? item.children : [];

package/src/modules/PageEditor/index.tsx

@@ -144,21 +144,13 @@ const PageEditor = (props: IProps) => {
         status: pageStatus.UPLOAD_PENDING,
       };
 
-      const handleSavePage = async () => {
-        const isSaved = await savePage(false, publishPage);
-        if (isSaved) {
-          resetDirty();
-        }
-      };
-
-      const handleUpdatePageStatus = async () => {
-        const isUpdated = await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING);
-        if (isUpdated) {
-          resetDirty();
-        }
-      };
+      const isSaved = pageID
+        ? await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING)
+        : await savePage(false, publishPage);
 
-      pageID ? await handleUpdatePageStatus() : await handleSavePage();
+      if (isSaved) {
+        resetDirty();
+      }
     } else {
       setNotification({ text: errorNotificationText, type: "error" });
     }
@@ -174,20 +166,22 @@ const PageEditor = (props: IProps) => {
         status: pageStatus.UPLOAD_PENDING,
       };
 
-      savePage(false, publishPage).then((isSaved: boolean) => {
-        if (isSaved) {
-          resetDirty();
-        }
-      });
+      const isSaved = await savePage(false, publishPage);
+      if (isSaved) {
+        resetDirty();
+      }
     } else {
       setNotification({ text: errorNotificationText, type: "error" });
     }
   };
 
-  const unpublishPage = () => {
+  const unpublishPage = async () => {
     const { updatePageStatus, pageID } = props;
 
-    updatePageStatus([pageID], pageStatus.OFFLINE_PENDING);
+    const isSaved = await updatePageStatus([pageID], pageStatus.OFFLINE_PENDING);
+    if (isSaved) {
+      resetDirty();
+    }
   };
 
   const reviewPage = async () => {

package/src/modules/Sites/SitesList/GridView/GridSiteItem/index.tsx

@@ -38,7 +38,7 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
   };
 
   const setSite = async () => {
-    setSiteInfo(site);
+    await setSiteInfo(site);
     const contentPath = "/sites/pages";
     setHistoryPush(contentPath, false);
   };
@@ -61,9 +61,9 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
     },
   ];
 
-  const handleDeleteSite = () => {
+  const handleDeleteSite = async () => {
     const params = getParams();
-    deleteSite(site.id, params);
+    await deleteSite(site.id, params);
     toggleDeleteModal();
   };
 
@@ -74,15 +74,15 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
   };
   const secondaryDeleteAction = { title: "Cancel", onClick: toggleDeleteModal };
 
-  const handlePublishSite = () => {
+  const handlePublishSite = async () => {
     const params = getParams();
-    publishSite(site.id, params);
+    await publishSite(site.id, params);
     togglePublishModal();
   };
 
-  const handleUnpublishSite = () => {
+  const handleUnpublishSite = async () => {
     const params = getParams();
-    unpublishSite(site.id, params);
+    await unpublishSite(site.id, params);
     togglePublishModal();
   };
 
@@ -171,11 +171,11 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
 
 interface IGridSiteItemProps {
   site: ISite;
-  setSiteInfo(currentSiteInfo: any): void;
+  setSiteInfo(currentSiteInfo: any): Promise<void>;
   setHistoryPush(page: string, isEditor: boolean): void;
-  deleteSite(siteID: number, params?: IGetSitesParams): void;
-  publishSite(siteID: number, params?: IGetSitesParams): void;
-  unpublishSite(siteID: number, params?: IGetSitesParams): void;
+  deleteSite(siteID: number, params?: IGetSitesParams): Promise<void>;
+  publishSite(siteID: number, params?: IGetSitesParams): Promise<void>;
+  unpublishSite(siteID: number, params?: IGetSitesParams): Promise<void>;
   getParams: () => IGetSitesParams;
 }
 

package/src/modules/Sites/SitesList/ListView/ListSiteItem/index.tsx

@@ -40,7 +40,7 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
   };
 
   const setSite = async () => {
-    setSiteInfo(site);
+    await setSiteInfo(site);
     const contentPath = "/sites/pages";
     setHistoryPush(contentPath, false);
   };
@@ -63,9 +63,9 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
     },
   ];
 
-  const handleDeleteSite = () => {
+  const handleDeleteSite = async () => {
     const params = getParams();
-    deleteSite(site.id, params);
+    await deleteSite(site.id, params);
     toggleDeleteModal();
   };
 
@@ -76,15 +76,15 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
   };
   const secondaryDeleteAction = { title: "Cancel", onClick: toggleDeleteModal };
 
-  const handlePublishSite = () => {
+  const handlePublishSite = async () => {
     const params = getParams();
-    publishSite(site.id, params);
+    await publishSite(site.id, params);
     togglePublishModal();
   };
 
-  const handleUnpublishSite = () => {
+  const handleUnpublishSite = async () => {
     const params = getParams();
-    unpublishSite(site.id, params);
+    await unpublishSite(site.id, params);
     togglePublishModal();
   };
 
@@ -185,11 +185,11 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
 interface IListSiteItemProps {
   site: ISite;
   isSelected: boolean;
-  setSiteInfo(currentSiteInfo: any): void;
+  setSiteInfo(currentSiteInfo: any): Promise<void>;
   setHistoryPush(site: string, isEditor: boolean): void;
-  deleteSite(siteID: number, params?: IGetSitesParams): void;
-  publishSite(siteID: number, params?: IGetSitesParams): void;
-  unpublishSite(siteID: number, params?: IGetSitesParams): void;
+  deleteSite(siteID: number, params?: IGetSitesParams): Promise<void>;
+  publishSite(siteID: number, params?: IGetSitesParams): Promise<void>;
+  unpublishSite(siteID: number, params?: IGetSitesParams): Promise<void>;
   onCheck: (e: any) => void;
   getParams: () => IGetSitesParams;
 }

package/src/modules/Sites/SitesList/RecentSiteItem/index.tsx

@@ -14,8 +14,8 @@ import * as S from "./style";
 const RecentSiteItem = (props: IRecentSiteItemProps): JSX.Element => {
   const { site, setSiteInfo, setHistoryPush } = props;
 
-  const setSite = () => {
-    setSiteInfo(site);
+  const setSite = async () => {
+    await setSiteInfo(site);
     const contentPath = "/sites/pages";
     setHistoryPush(contentPath, false);
   };
@@ -38,7 +38,7 @@ const RecentSiteItem = (props: IRecentSiteItemProps): JSX.Element => {
 
 interface IRecentSiteItemProps {
   site: ISite;
-  setSiteInfo(currentSiteInfo: any): void;
+  setSiteInfo(currentSiteInfo: any): Promise<void>;
   setHistoryPush(page: string, isEditor: boolean): void;
 }
 

package/src/types/index.tsx

@@ -364,14 +364,11 @@ export interface IMenuItemConfig {
 }
 
 export interface IMenuForm {
-  itemLink: any;
-  itemLabel: string;
-  itemAuxText: string;
-  itemImage: IImage | string | null;
+  url: any;
+  label: string;
   type: string;
   headerStyle: string;
   footerStyle: string;
-  itemSpecial: boolean;
 }
 
 export interface IHeader {