@griddo/ax 1.66.13 → 1.67.2

package/src/modules/Content/index.tsx

@@ -15,6 +15,7 @@ import {
   IGetSitePagesParams,
   IColumn,
   ISite,
+  IUser,
 } from "@ax/types";
 import { MainWrapper, Modal, TableList, ErrorToast, Toast, EmptyState, Notification } from "@ax/components";
 import { getFilteredStructuredData, isGlobalStructuredData, isStructuredDataFromPage } from "@ax/helpers";
@@ -86,6 +87,11 @@ const Content = (props: IProps): JSX.Element => {
     restorePage,
     getDataPack,
     dataPacks,
+    resetCurrentSiteErrorPages,
+    currentSiteErrorPages,
+    getSitesByLang,
+    sitesByLang,
+    user,
   } = props;
 
   const itemsPerPage = 50;
@@ -109,7 +115,9 @@ const Content = (props: IProps): JSX.Element => {
   const dataIds = currentDataContent && currentDataContent.map((data: any) => data.id);
   const contentIds = isStructuredData ? dataIds : pagesIds;
   const currentSitePagesTemplatesIds = currentSitePages && currentSitePages.map((page: any) => page.templateId);
-
+  const currentSitesByLang = sitesByLang?.filter(
+    (site) => user?.sites?.includes("all") || user.sites.includes(site.id)
+  );
   const categoryColumns =
     currentStructuredData && currentStructuredData.schema
       ? currentStructuredData.schema.fields.filter((field: any) => field.showList)
@@ -171,6 +179,11 @@ const Content = (props: IProps): JSX.Element => {
   } = useToast();
 
   const { categoryColors, addCategoryColors } = useCategoryColors();
+  const {
+    isVisible: isVisibleCopiedToast,
+    toggleToast: toggleCopiedToast,
+    setIsVisible: setIsVisibleCopiedToast,
+  } = useToast();
 
   const getParams = useCallback(() => {
     const siteID = currentSiteInfo ? currentSiteInfo.id : null;
@@ -231,11 +244,15 @@ const Content = (props: IProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [filter]);
 
+  const fetchSitesByLang = async () => await getSitesByLang(lang.id);
+
   useEffect(() => {
     if (!locationState || locationState.isFromEditor !== true) {
       setFilter("unique-pages");
     }
     resetPageEditor();
+    resetCurrentSiteErrorPages();
+    fetchSitesByLang();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -533,6 +550,7 @@ const Content = (props: IProps): JSX.Element => {
         deleteBulk: deleteCurrentPageBulk,
         getDataPack: getDataPack,
         setTemplateInstanceError,
+        toggleCopiedToast,
       };
 
       return (
@@ -540,6 +558,7 @@ const Content = (props: IProps): JSX.Element => {
           item={item}
           key={pageItem.id}
           functions={pageItemFunctions}
+          sites={currentSitesByLang}
           activatedTemplates={activatedTemplates}
           toggleToast={toggleRemovedToast}
           setRemovedPage={setRemovedPage}
@@ -650,8 +669,18 @@ const Content = (props: IProps): JSX.Element => {
     message: "Page deleted.",
   };
 
+  const copiedToastProps = {
+    setIsVisible: setIsVisibleCopiedToast,
+    message: "1 Page copied to another Site",
+  };
+
   const addNewAction = filter === "unique-pages" || isGlobalPages ? toggleNewModal : addNewData;
 
+  const errorPagesText =
+    currentSiteErrorPages.length > 1
+      ? "These pages contains some errors, so you can not publish them yet. Please, review the errors on the pages."
+      : "This page contains some errors, so you can not publish it yet. Please, review the errors on the page.";
+
   return (
     <MainWrapper
       title={title}
@@ -671,6 +700,7 @@ const Content = (props: IProps): JSX.Element => {
               text={`There can be only one ${templateInstanceError.templateName} page and you already have it.`}
             />
           )}
+          {!!currentSiteErrorPages.length && <Notification type="error" text={errorPagesText} />}
           <TableList
             tableHeader={Header}
             pagination={pagination}
@@ -720,6 +750,7 @@ const Content = (props: IProps): JSX.Element => {
       {isVisible && <Toast {...toastProps} />}
       {isVisibleRemovedToast && <Toast {...removedToastProps} />}
       {isVisibleDeletedToast && <Toast {...deletedToastProps} />}
+      {isVisibleCopiedToast && <Toast {...copiedToastProps} />}
     </MainWrapper>
   );
 };
@@ -741,6 +772,9 @@ const mapStateToProps = (state: IRootState) => ({
   activatedTemplates: state.dataPacks.templates,
   isLoading: state.app.isLoading,
   dataPacks: state.dataPacks.activated,
+  currentSiteErrorPages: state.sites.currentSiteErrorPages,
+  sitesByLang: state.sites.sitesByLang,
+  user: state.users.currentUser,
 });
 
 interface IDispatchProps {
@@ -760,7 +794,7 @@ interface IDispatchProps {
   getStructuredDataContents(params: any, siteID: number): Promise<void>;
   resetForm(): void;
   deleteBulk(ids: any): Promise<boolean>;
-  duplicatePage(pageID: number, data: any): Promise<void>;
+  duplicatePage(pageID: number, data?: any, siteID?: number): Promise<boolean>;
   deleteDataContent(dataID: number[]): Promise<boolean>;
   restoreDataContent(catID: number | number[]): void;
   setFilter(value: string): void;
@@ -770,6 +804,8 @@ interface IDispatchProps {
   importPageFromGlobal(pageID: number | number[]): Promise<boolean>;
   restorePage(id: number | number[]): Promise<boolean>;
   getDataPack: (id: string) => Promise<void>;
+  resetCurrentSiteErrorPages: () => Promise<void>;
+  getSitesByLang(language: number): Promise<void>;
 }
 
 const mapDispatchToProps = {
@@ -798,6 +834,8 @@ const mapDispatchToProps = {
   importPageFromGlobal: sitesActions.importPageFromGlobal,
   restorePage: pageEditorActions.restorePage,
   getDataPack: dataPacksActions.getSiteDataPack,
+  resetCurrentSiteErrorPages: sitesActions.resetCurrentSiteErrorPages,
+  getSitesByLang: sitesActions.getSitesByLang,
 };
 
 interface IPagesProps {
@@ -819,6 +857,10 @@ interface IPagesProps {
   activatedTemplates: any[];
   isLoading: boolean;
   dataPacks: IDataPack[];
+  currentSiteErrorPages: number[];
+  sites: ISite[];
+  sitesByLang: ISite[];
+  user: IUser;
 }
 
 type IProps = IPagesProps & IDispatchProps;

package/src/modules/Content/style.tsx

@@ -35,4 +35,11 @@ const ModalContent = styled.div`
   }
 `;
 
-export { ContentListWrapper, TableWrapper, PaginationWrapper, EmptyWrapper, ModalContent };
+const SelectWrapper = styled.div`
+  & .react-select__control,
+  .react-select__menu {
+    min-width: 100%;
+  }
+`;
+
+export { ContentListWrapper, TableWrapper, PaginationWrapper, EmptyWrapper, ModalContent, SelectWrapper };

package/src/modules/FramePreview/index.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import * as components from "components";
+import { SiteProvider } from "components";
+import { Preview } from "@griddo/core";
+import { getDefaultTheme } from "@ax/helpers";
+import { Loading } from "@ax/components";
+import { ILanguage, IRootState, ISocialState } from "@ax/types";
+
+import * as S from "./style";
+
+const FramePreview = (props: IProps) => {
+  const { content, socials, selectedEditorID, cloudinaryName, isLoading, currentSiteInfo, siteLangs, globalLangs } =
+    props;
+
+  const {
+    editorContent: { canonicalSite, language, pageLanguages },
+    header,
+    footer,
+  } = content;
+
+  document.body.classList.add("preview");
+
+  const API_URL = process.env.REACT_APP_API_ENDPOINT;
+  const PUBLIC_API_URL = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
+
+  const globalTheme = getDefaultTheme();
+  const theme = currentSiteInfo ? currentSiteInfo.theme : globalTheme;
+  const langs = currentSiteInfo ? siteLangs : globalLangs;
+  const siteID = currentSiteInfo ? currentSiteInfo.id : canonicalSite;
+
+  if (isLoading) return <Loading />;
+
+  return (
+    <SiteProvider
+      cloudinaryCloudName={cloudinaryName}
+      theme={theme}
+      socials={socials}
+      siteLangs={langs}
+      selectEditorID={selectedEditorID}
+      renderer="editor"
+      apiUrl={API_URL}
+      publicApiUrl={PUBLIC_API_URL}
+      siteId={siteID}
+    >
+      <S.Wrapper ref={(ref: any) => ((window as any).browserRef = ref)}>
+        <Preview
+          isPage={true}
+          apiUrl={API_URL}
+          library={components}
+          content={content.editorContent}
+          header={currentSiteInfo && header}
+          footer={currentSiteInfo && footer}
+          languageId={language}
+          pageLanguages={pageLanguages}
+        />
+      </S.Wrapper>
+    </SiteProvider>
+  );
+};
+
+interface IProps {
+  content: any;
+  selectedEditorID: number;
+  socials: ISocialState;
+  cloudinaryName: string | null;
+  currentSiteInfo: any;
+  siteLangs: ILanguage[];
+  globalLangs: ILanguage[];
+  isLoading: boolean;
+}
+
+const mapStateToProps = (state: IRootState) => ({
+  content: { ...state.pageEditor.editorContent },
+  selectedEditorID: state.pageEditor.selectedEditorID as number,
+  socials: state.social,
+  cloudinaryName: state.app.globalSettings.cloudinaryName,
+  currentSiteInfo: state.sites.currentSiteInfo,
+  siteLangs: state.sites.currentSiteLanguages,
+  globalLangs: state.app.globalLangs,
+  isLoading: state.app.isLoading,
+});
+
+export default connect(mapStateToProps)(FramePreview);

package/src/modules/FramePreview/style.tsx

@@ -0,0 +1,18 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  overflow: auto;
+  scroll-behavior: smooth;
+  height: 100%;
+  position: relative;
+
+  .headroom {
+    position: relative !important;
+  }
+
+  body.preview:not(&) {
+    min-width: 0 !important;
+  }
+`;
+
+export { Wrapper };

package/src/modules/GlobalEditor/Editor/index.tsx

@@ -29,6 +29,7 @@ const Editor = (props: IProps) => {
     copyModule,
     pasteModule,
     theme,
+    browserRef,
     setNotification,
   } = props;
 
@@ -47,7 +48,7 @@ const Editor = (props: IProps) => {
 
   return (
     <ResizePanel
-      leftPanel={<PageBrowser isReadOnly={isReadOnly} theme={theme} />}
+      leftPanel={<PageBrowser isReadOnly={isReadOnly} theme={theme} browserRef={browserRef} />}
       rightPanel={
         <ConfigPanel
           schema={schema}
@@ -99,6 +100,7 @@ interface IPageBrowserDispatchProps {
   isEditable: boolean;
   isReadOnly: boolean;
   theme: string;
+  browserRef: any;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

package/src/modules/GlobalEditor/PageBrowser/index.tsx

@@ -18,6 +18,7 @@ const PageBrowser = (props: IProps) => {
     theme,
     isReadOnly,
     isPreview,
+    browserRef,
   } = props;
 
   const slugWithSlash = slug ? (slug.startsWith("/") ? slug : `/${slug}`) : "";
@@ -38,6 +39,7 @@ const PageBrowser = (props: IProps) => {
       disabled={isReadOnly}
       siteID={canonicalSite}
       isPreview={isPreview}
+      browserRef={browserRef}
     />
   );
 };
@@ -60,6 +62,7 @@ interface IPageBrowserDispatchProps {
   theme: string;
   isReadOnly: boolean;
   isPreview?: boolean;
+  browserRef?: any;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

package/src/modules/GlobalEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { connect } from "react-redux";
 import { RouteComponentProps } from "react-router-dom";
 
@@ -42,6 +42,7 @@ const GlobalEditor = (props: IProps) => {
     savedSiteInfo,
     userEditing,
     isNewTranslation,
+    currentSiteErrorPages,
   } = props;
 
   const { isOpen, toggleModal } = useModal();
@@ -50,6 +51,8 @@ const GlobalEditor = (props: IProps) => {
   const [selectedTab, setSelectedTab] = useState("edit");
   const [notification, setNotification] = useState<INotification | null>(null);
   const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent.editorContent, isNewTranslation);
+  const [errorPagesChecked, setErrorPagesChecked] = useState(false);
+  const browserRef = useRef<HTMLDivElement>(null);
 
   const isPublished = props.pageStatus === pageStatus.PUBLISHED || props.pageStatus === pageStatus.UPLOAD_PENDING;
   const isDraft = props.pageStatus === pageStatus.MODIFIED;
@@ -98,6 +101,16 @@ const GlobalEditor = (props: IProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [userEditing]);
 
+  useEffect(() => {
+    if (!errorPagesChecked && !isLoading && editorContent.editorContent) {
+      const pageId = editorContent.editorContent.id;
+      const hasErrors = currentSiteErrorPages.some((errorPageId) => pageId === errorPageId);
+      hasErrors && reviewPage();
+      setErrorPagesChecked(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editorContent]);
+
   const setRoute = (path: string) => props.setHistoryPush(path, true);
 
   const removePage = async () => {
@@ -114,7 +127,7 @@ const GlobalEditor = (props: IProps) => {
   const publishPage = async () => {
     const { updatePageStatus, savePage, pageID, validatePage } = props;
 
-    const validated = await validatePage(true);
+    const validated = await validatePage(true, browserRef);
 
     if (validated) {
       const publishPage = {
@@ -134,7 +147,7 @@ const GlobalEditor = (props: IProps) => {
   const publishChanges = async () => {
     const { savePage, validatePage } = props;
 
-    const validated = await validatePage(true);
+    const validated = await validatePage(true, browserRef);
 
     if (validated) {
       const publishPage = {
@@ -163,13 +176,13 @@ const GlobalEditor = (props: IProps) => {
 
   const reviewPage = () => {
     const { validatePage } = props;
-    validatePage();
+    validatePage(undefined, browserRef);
   };
 
   const handlePublishDraft = async () => {
     const { savePage, validatePage } = props;
 
-    const validated = await validatePage(true);
+    const validated = await validatePage(true, browserRef);
 
     if (validated) {
       const isSaved = await savePage(false, null, true);
@@ -462,6 +475,7 @@ const GlobalEditor = (props: IProps) => {
               isEditable={isEditable}
               isReadOnly={isReadOnly}
               theme={theme}
+              browserRef={browserRef}
               setNotification={setNotification}
             />
           </S.Content>
@@ -524,6 +538,7 @@ const mapStateToProps = (state: IRootState): IPageEditorStateProps => ({
   userEditing: state.pageEditor.userEditing,
   currentUserID: state.users.currentUser.id,
   isNewTranslation: state.pageEditor.isNewTranslation,
+  currentSiteErrorPages: state.sites.currentSiteErrorPages,
 });
 
 interface IPageEditorStateProps {
@@ -543,6 +558,7 @@ interface IPageEditorStateProps {
   userEditing: IUserEditing | null;
   currentUserID: number | null;
   isNewTranslation: boolean;
+  currentSiteErrorPages: number[];
 }
 
 const mapDispatchToProps = {
@@ -567,7 +583,7 @@ interface IPageEditorDispatchProps {
   getPage(pageID?: number, global?: boolean): Promise<void>;
   savePage(createDraft: boolean, publishPage?: any, publishDraft?: boolean): Promise<boolean>;
   deletePage(params?: ISavePageParams): Promise<boolean>;
-  validatePage(publish?: boolean): Promise<boolean>;
+  validatePage(publish?: boolean, browserRef?: any): Promise<boolean>;
   updatePageStatus(id: number[], status: string): Promise<boolean>;
   setHistoryPush(path: string, isEditor: boolean): void;
   setLanguage?(lang: { locale: string; id: number | null }): void;

package/src/modules/PageEditor/Editor/index.tsx

@@ -35,6 +35,7 @@ const Editor = (props: IProps) => {
     isReadOnly,
     userEditing,
     site,
+    browserRef,
     lastElementAddedId,
     copyModule,
     pasteModule,
@@ -58,7 +59,9 @@ const Editor = (props: IProps) => {
 
   return (
     <ResizePanel
-      leftPanel={<PageBrowser isTemplateActivated={isTemplateActivated} isReadOnly={isReadOnly} />}
+      leftPanel={
+        <PageBrowser isTemplateActivated={isTemplateActivated} isReadOnly={isReadOnly} browserRef={browserRef} />
+      }
       rightPanel={
         <ConfigPanel
           schema={schema}
@@ -119,6 +122,7 @@ interface IPageBrowserDispatchProps {
   isEditable: boolean;
   pageTitle: string;
   isReadOnly: boolean;
+  browserRef: any;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

package/src/modules/PageEditor/PageBrowser/index.tsx

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 
 import { Browser } from "@ax/components";
-import { IBreadcrumbItem, ILanguage, IRootState, ISchema, ISocialState } from "@ax/types";
+import { ILanguage, IRootState, ISocialState } from "@ax/types";
 
 const PageBrowser = (props: IProps) => {
   const {
@@ -21,6 +21,7 @@ const PageBrowser = (props: IProps) => {
     isTemplateActivated,
     isReadOnly,
     isPreview,
+    browserRef,
   } = props;
 
   const slugWithSlash = slug ? (slug.startsWith("/") ? slug : `/${slug}`) : "";
@@ -44,6 +45,7 @@ const PageBrowser = (props: IProps) => {
       disabled={disabled}
       siteID={siteID}
       isPreview={isPreview}
+      browserRef={browserRef}
     />
   );
 };
@@ -56,8 +58,6 @@ interface IEditorStateProps {
   socials: ISocialState;
   cloudinaryName: string | null;
   siteLangs: ILanguage[];
-  schema: ISchema | Record<string, unknown>;
-  breadcrumb: IBreadcrumbItem[];
   selectedParent: any;
   activatedModules: string[];
 }
@@ -67,6 +67,7 @@ interface IPageBrowserDispatchProps {
   isTemplateActivated: boolean;
   isReadOnly: boolean;
   isPreview?: boolean;
+  browserRef?: any;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;
@@ -78,8 +79,6 @@ const mapStateToProps = (state: IRootState): IEditorStateProps => ({
   socials: state.social,
   cloudinaryName: state.app.globalSettings.cloudinaryName,
   siteLangs: state.sites.currentSiteLanguages,
-  schema: state.pageEditor.schema,
-  breadcrumb: state.pageEditor.breadcrumb,
   selectedParent: state.pageEditor.selectedParent,
   activatedModules: state.dataPacks.modules,
 });

package/src/modules/PageEditor/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { connect } from "react-redux";
 import { RouteComponentProps } from "react-router-dom";
 
@@ -10,7 +10,7 @@ import { navigationActions } from "@ax/containers/Navigation";
 import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import { RouteLeavingGuard } from "@ax/guards";
 import { useIsDirty, useModal } from "@ax/hooks";
-import { isModuleDisabled } from "@ax/helpers";
+import { isModuleDisabled, getDeactivatedModules } from "@ax/helpers";
 import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
 import { DeleteModal } from "./atoms";
 import Editor from "./Editor";
@@ -44,6 +44,7 @@ const PageEditor = (props: IProps) => {
     pageEditor: { editorContent, schema },
     userEditing,
     isNewTranslation,
+    currentSiteErrorPages,
   } = props;
 
   const [deleteAllVersions, setDeleteAllVersions] = useState(false);
@@ -54,6 +55,8 @@ const PageEditor = (props: IProps) => {
   const { isOpen, toggleModal } = useModal();
   const { isOpen: isUnpublishOpen, toggleModal: toggleUnpublishModal } = useModal();
   const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
+  const [errorPagesChecked, setErrorPagesChecked] = useState(false);
+  const browserRef = useRef<HTMLDivElement>(null);
 
   const isGlobal = editorContent.editorContent && editorContent.editorContent.origin === "GLOBAL";
   const isEditable = editorContent.editorContent && editorContent.editorContent.editable;
@@ -101,6 +104,16 @@ const PageEditor = (props: IProps) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [lang]);
 
+  useEffect(() => {
+    if (!errorPagesChecked && !isLoading && editorContent.editorContent) {
+      const pageId = editorContent.editorContent.id;
+      const hasErrors = currentSiteErrorPages.some((errorPageId) => pageId === errorPageId);
+      hasErrors && reviewPage();
+      setErrorPagesChecked(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editorContent]);
+
   const setRoute = (path: string) => props.setHistoryPush(path, true);
 
   const removePage = async () => {
@@ -118,7 +131,7 @@ const PageEditor = (props: IProps) => {
   const publishPage = async () => {
     const { updatePageStatus, savePage, pageID, validatePage } = props;
 
-    const validated = await validatePage(true);
+    const validated = await validatePage(true, browserRef);
 
     if (validated) {
       const publishPage = {
@@ -138,7 +151,7 @@ const PageEditor = (props: IProps) => {
   const publishChanges = async () => {
     const { savePage, validatePage } = props;
 
-    const validated = await validatePage(true);
+    const validated = await validatePage(true, browserRef);
 
     if (validated) {
       const publishPage = {
@@ -167,13 +180,13 @@ const PageEditor = (props: IProps) => {
 
   const reviewPage = () => {
     const { validatePage } = props;
-    validatePage();
+    validatePage(false, browserRef);
   };
 
   const handlePublishDraft = async () => {
     const { savePage, validatePage } = props;
 
-    const validated = await validatePage(true);
+    const validated = await validatePage(true, browserRef);
 
     if (validated) {
       const isSaved = await savePage(false, null, true);
@@ -295,10 +308,12 @@ const PageEditor = (props: IProps) => {
 
   const goToPages = (path: string) => setRoute(path);
 
-  const goToError = (editorID: number, tab: string, template: boolean) => {
+  const goToError = (editorID: number | null, tab: string, template: boolean) => {
     const realEditorID = template ? 0 : editorID;
-    setSelectedContent(realEditorID);
-    setTab(tab);
+    if (realEditorID !== null) {
+      setSelectedContent(realEditorID);
+      setTab(tab);
+    }
   };
 
   const modalText = (
@@ -309,9 +324,18 @@ const PageEditor = (props: IProps) => {
 
   let isTemplateActivated = true;
   let hasDeactivatedModules = false;
+  let deactivatedModules: string[] = [];
   if (editorContent.editorContent && editorContent.editorContent.template) {
     const editorTemplate = editorContent.editorContent.template;
-    hasDeactivatedModules = isModuleDisabled(selectedComponent, schema.schemaType, activatedModules);
+    const mainContentModules = editorTemplate?.mainContent?.modules;
+
+    if (mainContentModules) {
+      deactivatedModules = getDeactivatedModules(activatedModules, mainContentModules);
+      hasDeactivatedModules = deactivatedModules.length > 0;
+    } else {
+      hasDeactivatedModules = isModuleDisabled(selectedComponent, schema.schemaType, activatedModules);
+    }
+
     isTemplateActivated = activatedTemplates.find((temp: any) => temp.id === editorTemplate.templateType)
       ? true
       : false;
@@ -395,7 +419,8 @@ const PageEditor = (props: IProps) => {
       if (!isTemplateActivated) {
         getSiteDataPackbyTemplate(editorTemplate.templateType);
       } else if (hasDeactivatedModules) {
-        getSiteDataPackbyModule(selectedComponent);
+        const currentModule = deactivatedModules.length === 1 ? deactivatedModules[0] : selectedComponent;
+        getSiteDataPackbyModule(currentModule);
       }
       setHistoryPush("/sites/settings/content-types", false);
     }
@@ -506,6 +531,7 @@ const PageEditor = (props: IProps) => {
               isEditable={isEditable}
               pageTitle={pageName}
               isReadOnly={isReadOnly}
+              browserRef={browserRef}
               setNotification={setNotification}
             />
           </S.Content>
@@ -576,6 +602,7 @@ const mapStateToProps = (state: IRootState): IPageEditorStateProps => ({
   userEditing: state.pageEditor.userEditing,
   currentUserID: state.users.currentUser.id,
   isNewTranslation: state.pageEditor.isNewTranslation,
+  currentSiteErrorPages: state.sites.currentSiteErrorPages,
 });
 
 interface IPageEditorStateProps {
@@ -596,6 +623,7 @@ interface IPageEditorStateProps {
   userEditing: IUserEditing | null;
   currentUserID: number | null;
   isNewTranslation: boolean;
+  currentSiteErrorPages: number[];
 }
 
 const mapDispatchToProps = {
@@ -622,7 +650,7 @@ interface IPageEditorDispatchProps {
   getPage(pageID?: number): Promise<void>;
   savePage(createDraft: boolean, publishPage?: any, publishDraft?: boolean): Promise<boolean>;
   deletePage(params?: ISavePageParams): Promise<boolean>;
-  validatePage(publish?: boolean): Promise<boolean>;
+  validatePage(publish?: boolean, browserRef?: any): Promise<boolean>;
   updatePageStatus(id: number[], status: string): Promise<boolean>;
   setHistoryPush(path: string, isEditor: boolean): void;
   setLanguage?(lang: { locale: string; id: number | null }): void;