@griddo/ax 1.75.238 → 1.75.239

package/package.json

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

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/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/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/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;
 }