@griddo/ax 1.65.27 → 1.66.2

package/src/modules/Content/OptionTable/index.tsx

@@ -1,11 +1,10 @@
 import React, { useReducer, useEffect, useLayoutEffect } from "react";
 import { connect } from "react-redux";
 
-import { IDataPack, IRootState } from "@ax/types";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { getStructuredDataTitle, getThumbnailProps, isGlobalStructuredData } from "@ax/helpers";
-import { dataPacksActions } from "@ax/containers/Settings";
 import { MenuItem, RadioGroup } from "@ax/components";
+import { SecondaryActionButton, MainActionButton } from "./../atoms";
 
 import { reducer, IOptionTableStore, setColumnValues, setShowThumbnail, setSelectedType, setOption } from "./store";
 
@@ -20,11 +19,15 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
     selectedValue,
     setIsStructuredData,
     theme,
-    getDataPack,
-    dataPacks,
+    mainAction,
+    secondaryAction,
   } = props;
-
   const filterOptions = (value: string, objKey: string) => values.filter((item: any) => item[objKey] === value);
+  const filterOptionsByDataPack = (value: string) => {
+    return values.filter((item: any) => {
+      return item.dataPacks ? item.dataPacks.includes(value.toUpperCase()) : item.type === value;
+    });
+  };
   const currentOption = filterOptions(selectedValue, "value");
   const currentType = currentOption[0] ? currentOption[0].type : "static";
 
@@ -49,7 +52,7 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
     }
   };
 
-  let filteredByTypeOptions = filterOptions(state.selectedType, "type");
+  let filteredOptionsByDataPack: any = filterOptionsByDataPack(state.selectedType);
 
   useLayoutEffect(() => {
     displayOptions({ value: state.selectedType });
@@ -57,19 +60,11 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
   }, []);
 
   useEffect(() => {
-    const firstOption = filteredByTypeOptions[0] && filteredByTypeOptions[0].value;
-    selectOption(firstOption, filteredByTypeOptions);
+    const firstOption = filteredOptionsByDataPack[0] && filteredOptionsByDataPack[0].value;
+    selectOption(firstOption, filteredOptionsByDataPack);
     // eslint-disable-next-line
   }, []);
 
-  useEffect(() => {
-    if (currentType !== "static") {
-      const dataPack = dataPacks.find((pack) => pack.templates.some((template) => template.id === state.selectedOption));
-      dataPack && getDataPack(dataPack.id);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [state.selectedOption]);
-
   const setValue = (value: string, isStructuredData: boolean) => {
     setIsStructuredData(isStructuredData);
     isStructuredData ? selectData(value) : selectPage(value);
@@ -87,29 +82,31 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
 
   const thumbnailProps =
     state.showThumbnail &&
-    isOptionInType(filteredByTypeOptions) &&
+    isOptionInType(filteredOptionsByDataPack) &&
     getThumbnailProps(state.selectedOption, true, theme);
 
   const displayOptions = (item: any) => {
     const { value } = item;
     setType(value);
-    filteredByTypeOptions = filterOptions(value, "type");
-
-    const isGlobal = value !== "static" && isGlobalStructuredData(value.toUpperCase());
-    if (isGlobal) {
-      filteredByTypeOptions = filteredByTypeOptions.map((option: any) => {
-        if (option.mode !== "detail") return option;
-        const title = `Get ${getStructuredDataTitle(value.toUpperCase())} from Global`;
-        return { ...option, title };
-      });
-      const globalOptionIdx = filteredByTypeOptions.findIndex((option: any) => option.mode === "detail");
-      const globalOption = filteredByTypeOptions.splice(globalOptionIdx, 1);
-      filteredByTypeOptions.push(...globalOption);
-    }
-
-    setValues(filteredByTypeOptions);
-    const firstOption = filteredByTypeOptions[0] && filteredByTypeOptions[0].value;
-    selectOption(firstOption, filteredByTypeOptions);
+    filteredOptionsByDataPack = filterOptionsByDataPack(value);
+    filteredOptionsByDataPack.forEach((option: any) => {
+      const { type } = option;
+      const isGlobal = value !== "static" && type && isGlobalStructuredData(type.toUpperCase());
+      if (isGlobal) {
+        filteredOptionsByDataPack = filteredOptionsByDataPack.map((option: any) => {
+          if (option.mode !== "detail") return option;
+          const title = `Get ${getStructuredDataTitle(type?.toUpperCase())} from Global`;
+          return { ...option, title };
+        });
+        const globalOptionIdx = filteredOptionsByDataPack.findIndex((option: any) => option.mode === "detail");
+        const globalOption = filteredOptionsByDataPack.splice(globalOptionIdx, 1);
+        filteredOptionsByDataPack.push(...globalOption);
+      }
+    });
+
+    setValues(filteredOptionsByDataPack);
+    const firstOption = filteredOptionsByDataPack[0] && filteredOptionsByDataPack[0].value;
+    selectOption(firstOption, filteredOptionsByDataPack);
 
     const optionList = filterOptions(state.selectedOption, "value");
     const displayThumbnail = optionList.type !== value;
@@ -117,7 +114,7 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
     showThumbnail(displayThumbnail);
   };
 
-  const hasThumbnail = state.showThumbnail && thumbnailProps && isOptionInType(filteredByTypeOptions);
+  const hasThumbnail = state.showThumbnail && thumbnailProps && isOptionInType(filteredOptionsByDataPack);
 
   return (
     <S.Table>
@@ -144,30 +141,34 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
             {thumbnailProps && <S.Thumbnail backgroundUrl={thumbnailProps.src} />}
           </S.ThumbnailWrapper>
         )}
+        <S.Actions>
+          <SecondaryActionButton onClick={secondaryAction.onClick} title={secondaryAction.title} />
+          <MainActionButton onClick={mainAction.onClick} title={mainAction.title} />
+        </S.Actions>
       </S.Column>
     </S.Table>
   );
 };
 
+interface IAction {
+  title: string;
+  onClick: any;
+}
+
 interface IOptionTableProps {
   selectData: (value: string) => void;
   selectPage: (value: string) => void;
   setIsStructuredData: (isActive: boolean) => void;
-  getDataPack: (id: string) => void;
   filters: any;
   values: any;
   selectedValue: string;
   theme: string;
-  dataPacks: IDataPack[];
+  mainAction: IAction;
+  secondaryAction: IAction;
 }
 
-const mapStateToProps = (state: IRootState) => ({
-  dataPacks: state.dataPacks.activated,
-});
-
 const mapDispatchToProps = {
   setIsStructuredData: structuredDataActions.setIsActive,
-  getDataPack: dataPacksActions.getSiteDataPack,
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(OptionTable);
+export default connect(null, mapDispatchToProps)(OptionTable);

package/src/modules/Content/OptionTable/store.tsx

@@ -43,4 +43,4 @@ export interface IOptionTableStore {
   showThumbnail: boolean;
   selectedOption: string;
   selectedType: any;
-}
+}

package/src/modules/Content/OptionTable/style.tsx

@@ -3,20 +3,20 @@ import styled from "styled-components";
 export const Table = styled.div`
   display: flex;
   height: 100%;
-  padding: ${p => p.theme.spacing.m} 0;
+  padding-top: ${(p) => p.theme.spacing.m};
 `;
 
 export const Column = styled.div`
-  width: calc(${p => p.theme.spacing.m} * 10);
-  padding: 0 ${p => p.theme.spacing.m};
-  height: 100%;
+  width: calc(${(p) => p.theme.spacing.m} * 10);
+  padding: 0 ${(p) => p.theme.spacing.m};
+  height: calc(100% - ${(p) => p.theme.spacing.m});
   &:first-child {
     ::-webkit-scrollbar {
       -webkit-appearance: none;
       width: 2px;
       height: 100%;
     }
-    
+
     ::-webkit-scrollbar-thumb {
       border-radius: 4px;
       background-color: ${(p) => p.theme.color.iconNonActive};
@@ -24,31 +24,46 @@ export const Column = styled.div`
     border-right: 1px solid ${(p) => p.theme.color.uiLine};
     overflow: scroll;
   }
+
+  &:last-child {
+    padding-bottom: ${(p) => p.theme.spacing.s};
+  }
 `;
 
 export const NavLink = styled.a`
+  text-transform: capitalize;
   &.selected {
-    background-color: ${(p) => p.theme.color.overlayPressedDark };
+    background-color: ${(p) => p.theme.color.overlayPressedDark};
   }
 `;
 
 export const ThumbnailWrapper = styled.div`
   overflow: hidden;
   border-radius: 4px;
-  padding: ${p => p.theme.spacing.xs};
-  height: 100%;
+  padding: ${(p) => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.m};
+  height: 220px;
   background-color: #ffffff;
 `;
 
-export const Thumbnail = styled.div<{backgroundUrl: string | boolean}>`
-  background: ${p => p.backgroundUrl ? `url(${p.backgroundUrl}) no-repeat` : ""};
+export const Thumbnail = styled.div<{ backgroundUrl: string | boolean }>`
+  background: ${(p) => (p.backgroundUrl ? `url(${p.backgroundUrl}) no-repeat` : "")};
   background-size: cover;
   background-position: top;
   border-radius: 4px;
-  min-width: calc(${p => p.theme.spacing.l} * 3);
+  min-width: calc(${(p) => p.theme.spacing.l} * 3);
   height: 100%;
 `;
 
 export const Link = styled.div<{ active: boolean }>`
-    color: ${p => p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis};
+  color: ${(p) => (p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};
 `;
+
+export const Actions = styled.div`
+  position: fixed;
+  bottom: ${(p) => p.theme.spacing.m};
+  right: ${(p) => p.theme.spacing.m};
+  button {
+    margin-left: ${(p) => p.theme.spacing.s};
+  }
+`;

package/src/modules/Content/PageItem/index.tsx

@@ -35,7 +35,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     addCategoryColors,
     dataPacks,
   } = props;
-  const { isSelected, siteLanguages, page, lang } = item;
+  const { isSelected, siteLanguages, page, lang, isDuplicable } = item;
   const {
     onClick,
     onCheck,
@@ -49,6 +49,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     removePageFromSite,
     deleteBulk,
     getDataPack,
+    setTemplateInstanceError,
   } = functions;
   const { locale } = lang;
   const {
@@ -225,10 +226,17 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
   };
 
   const handleDuplicatePage = () => {
-    duplicatePage(page.id, modalState).then(() => {
+    setTemplateInstanceError({ error: false, templateName: "" });
+    if (isDuplicable) {
+      duplicatePage(page.id, modalState).then(() => {
+        toggleModal();
+        setRoute("pages/editor");
+      });
+    } else {
       toggleModal();
-      setRoute("pages/editor");
-    });
+      setModalState({ title: "", slug: "" });
+      setTemplateInstanceError({ error: true, templateName: displayName });
+    }
   };
 
   const mainModalAction = {
@@ -553,6 +561,7 @@ interface IPageItemProps {
     page: IPage;
     site: ISite;
     lang: { locale: string; id: number };
+    isDuplicable: boolean;
   };
   functions: {
     languageActions?: {
@@ -570,6 +579,7 @@ interface IPageItemProps {
     duplicatePage(pageID: number, data: any): Promise<void>;
     removePageFromSite(pageID: number): Promise<boolean>;
     deleteBulk(ids: number[]): void;
+    setTemplateInstanceError(error: any): void;
     getDataPack: (id: string) => Promise<void>;
   };
   activatedTemplates: any[];

package/src/modules/Content/atoms.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 import { IModal } from "@ax/types";
-import { Modal, FieldsBehavior } from "@ax/components";
+import { Modal, FieldsBehavior, Button } from "@ax/components";
 
 import * as S from "./style";
 
@@ -68,6 +68,18 @@ const DeleteModal = (props: IDeleteModal): JSX.Element => {
   );
 };
 
+const MainActionButton = (props: IActionButton): JSX.Element => (
+  <Button type="button" onClick={props.onClick}>
+    {props.title}
+  </Button>
+);
+
+const SecondaryActionButton = (props: IActionButton): JSX.Element => (
+  <Button type="button" buttonStyle="text" onClick={props.onClick}>
+    {props.title}
+  </Button>
+);
+
 interface IDeleteModal extends IModal {
   isTranslated: boolean;
   deleteAllVersions: boolean;
@@ -75,4 +87,9 @@ interface IDeleteModal extends IModal {
   title?: string;
 }
 
-export { DeleteModal };
+interface IActionButton {
+  onClick: () => void;
+  title: string;
+}
+
+export { DeleteModal, MainActionButton, SecondaryActionButton };

package/src/modules/Content/index.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useCallback, useState, useRef } from "react";
 import { connect } from "react-redux";
 import { useLocation } from "react-router-dom";
+import { schemas } from "components";
 
 import { useModal, useBulkSelection, useToast, useCategoryColors } from "@ax/hooks";
 import {
@@ -15,7 +16,7 @@ import {
   IColumn,
   ISite,
 } from "@ax/types";
-import { MainWrapper, Modal, TableList, ErrorToast, Toast, EmptyState } from "@ax/components";
+import { MainWrapper, Modal, TableList, ErrorToast, Toast, EmptyState, Notification } from "@ax/components";
 import { getFilteredStructuredData, isGlobalStructuredData, isStructuredDataFromPage } from "@ax/helpers";
 
 import { appActions } from "@ax/containers/App";
@@ -85,7 +86,6 @@ const Content = (props: IProps): JSX.Element => {
     restorePage,
     getDataPack,
     dataPacks,
-    setCurrentDataID,
   } = props;
 
   const itemsPerPage = 50;
@@ -108,6 +108,7 @@ const Content = (props: IProps): JSX.Element => {
   const pagesIds = currentSitePages && currentSitePages.map((page: any) => page.id);
   const dataIds = currentDataContent && currentDataContent.map((data: any) => data.id);
   const contentIds = isStructuredData ? dataIds : pagesIds;
+  const currentSitePagesTemplatesIds = currentSitePages && currentSitePages.map((page: any) => page.templateId);
 
   const categoryColumns =
     currentStructuredData && currentStructuredData.schema
@@ -145,6 +146,7 @@ const Content = (props: IProps): JSX.Element => {
   const [removedPage, setRemovedPage] = useState<number | number[] | null>(null);
   const [deleteAllVersions, setDeleteAllVersions] = useState(false);
   const [arePagesTranslated, setArePagesTranslated] = useState(false);
+  const [templateInstanceError, setTemplateInstanceError] = useState({ error: false, templateName: "" });
 
   const {
     resetBulkSelection,
@@ -234,7 +236,6 @@ const Content = (props: IProps): JSX.Element => {
       setFilter("unique-pages");
     }
     resetPageEditor();
-    setCurrentDataID(null);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -280,12 +281,22 @@ const Content = (props: IProps): JSX.Element => {
   const addNewStructuredData = (value: string) => setSelectedStructuredData(value, "site");
 
   const addNewPage = () => {
-    addTemplate(template);
-    setCurrentPageID(null);
-    setCurrentPageStatus("offline");
-    setCurrentPageName("New Page");
-    const path = "/sites/pages/editor/new";
-    setHistoryPush(path, true);
+    const selectedTemplate = schemas?.templates[template];
+    const { singleInstance, displayName } = selectedTemplate;
+    const isAlreadyActive = currentSitePagesTemplatesIds.includes(template);
+
+    if (singleInstance && isAlreadyActive) {
+      setTemplateInstanceError({ error: true, templateName: displayName });
+      toggleNewModal();
+    } else {
+      setTemplateInstanceError({ error: false, templateName: "" });
+      addTemplate(template);
+      setCurrentPageID(null);
+      setCurrentPageStatus("offline");
+      setCurrentPageName("New Page");
+      const path = "/sites/pages/editor/new";
+      setHistoryPush(path, true);
+    }
   };
 
   const createContent = isData ? addNewData : addNewPage;
@@ -467,6 +478,10 @@ const Content = (props: IProps): JSX.Element => {
     currentSitePages &&
     currentSitePages.map((pageItem: IPage) => {
       const isItemSelected = isSelected(pageItem.id);
+      const selectedTemplate = schemas?.templates[pageItem.templateId];
+      const { singleInstance } = selectedTemplate;
+      const isAlreadyActive = currentSitePagesTemplatesIds.includes(template);
+      const isDuplicable = !singleInstance || (singleInstance && !isAlreadyActive);
 
       const item = {
         isSelected: isItemSelected,
@@ -474,6 +489,7 @@ const Content = (props: IProps): JSX.Element => {
         site: currentSiteInfo,
         lang,
         siteLanguages,
+        isDuplicable,
       };
 
       const deleteCurrentPage = async () => {
@@ -516,6 +532,7 @@ const Content = (props: IProps): JSX.Element => {
         languageActions: pageLanguageActions,
         deleteBulk: deleteCurrentPageBulk,
         getDataPack: getDataPack,
+        setTemplateInstanceError,
       };
 
       return (
@@ -589,7 +606,7 @@ const Content = (props: IProps): JSX.Element => {
   const selectedOptionType = selectedOptionObject.type.toUpperCase();
   const isOptionGlobal = selectedOptionType !== "STATIC" && isGlobalStructuredData(selectedOptionType);
   const isOptionImportable =
-    isOptionGlobal && isStructuredDataFromPage(selectedOptionType) && selectedOptionObject.mode === "detail";
+    !isData && isOptionGlobal && isStructuredDataFromPage(selectedOptionType) && selectedOptionObject.mode === "detail";
 
   const handleImport = () => {
     toggleNewModal();
@@ -605,7 +622,7 @@ const Content = (props: IProps): JSX.Element => {
 
   const createContentAction = isOptionImportable
     ? { onClick: handleImport, title: "NEXT" }
-    : { onClick: createContent, title: "ADD" };
+    : { onClick: createContent, title: "Create new" };
 
   const resetFilter = () => {
     resetFilterQuery();
@@ -648,6 +665,12 @@ const Content = (props: IProps): JSX.Element => {
         <ContentFilters current={filter} dynamicValues={structuredData} resetFilter={resetFilter} />
         <S.TableWrapper>
           <ErrorToast />
+          {templateInstanceError.error && (
+            <Notification
+              type="error"
+              text={`There can be only one ${templateInstanceError.templateName} page and you already have it.`}
+            />
+          )}
           <TableList
             tableHeader={Header}
             pagination={pagination}
@@ -665,7 +688,7 @@ const Content = (props: IProps): JSX.Element => {
           </TableList>
         </S.TableWrapper>
       </S.ContentListWrapper>
-      <Modal isOpen={isNewOpen} hide={toggleNewModal} size="M" title="New content" mainAction={createContentAction}>
+      <Modal isOpen={isNewOpen} hide={toggleNewModal} size="M" title="New content">
         <OptionTable
           selectPage={addTemplate}
           selectData={addNewStructuredData}
@@ -673,6 +696,8 @@ const Content = (props: IProps): JSX.Element => {
           values={options.values}
           selectedValue={selectedOption}
           theme={currentSiteInfo.theme}
+          mainAction={createContentAction}
+          secondaryAction={{ title: "Cancel", onClick: toggleNewModal }}
         />
       </Modal>
       <Modal
@@ -745,7 +770,6 @@ interface IDispatchProps {
   importPageFromGlobal(pageID: number | number[]): Promise<boolean>;
   restorePage(id: number | number[]): Promise<boolean>;
   getDataPack: (id: string) => Promise<void>;
-  setCurrentDataID(id: number | null): void;
 }
 
 const mapDispatchToProps = {
@@ -774,7 +798,6 @@ const mapDispatchToProps = {
   importPageFromGlobal: sitesActions.importPageFromGlobal,
   restorePage: pageEditorActions.restorePage,
   getDataPack: dataPacksActions.getSiteDataPack,
-  setCurrentDataID: structuredDataActions.setCurrentDataID,
 };
 
 interface IPagesProps {

package/src/modules/Content/utils.tsx

@@ -4,33 +4,44 @@ import { pageStatus } from "@ax/containers/PageEditor/interfaces";
 import { IPage } from "@ax/types";
 
 const getTemplatesFilters = (activatedDataPacks: any) => {
-  const types: any[] = [];
+  const filters: any[] = [];
   const activatedDataPacksIds = getActivatedDataPacksIds(activatedDataPacks);
   const { templates } = schemas;
 
   Object.keys(templates).forEach((schema: any) => {
     const { type, dataPacks } = templates[schema];
     const isActivated = !dataPacks || activatedDataPacksIds.some((id: string) => dataPacks.indexOf(id) >= 0);
-    isActivated && types.push(type);
-  });
 
-  const uniqueTypes = filterDuplicatedValues(types);
+    if (isActivated) {
+      !dataPacks
+        ? filters.push({ ...type })
+        : dataPacks.map((datapack: string) =>
+            filters.push({
+              label: datapack.toLowerCase(),
+              value: datapack.toLowerCase(),
+              type: type.value,
+              mode: type.mode,
+            })
+          );
+    }
+  });
 
-  return uniqueTypes;
+  const uniqueFilters = filterDuplicatedValues(filters);
+  return uniqueFilters;
 };
 
 const mapStructuredOptions = (options: any[]) => {
   const pureOptions = options.filter((option: any) => !option.fromPage);
 
   return pureOptions.map((option: any) => {
-    const { id, title } = option;
-
+    const { id, title, dataPacks } = option;
     return {
       name: id,
       value: id,
       title,
       type: id,
       isData: true,
+      dataPacks,
     };
   });
 };
@@ -41,7 +52,7 @@ const getOptionValues = (options: any) => {
 
   Object.keys(templates).forEach((schema: any) => {
     const currSchema = templates[schema];
-    const { component, displayName } = currSchema;
+    const { component, displayName, dataPacks } = currSchema;
     const type = currSchema.type && currSchema.type.value && currSchema.type.value.toLowerCase();
     const mode = currSchema.type && currSchema.type.mode;
 
@@ -52,6 +63,7 @@ const getOptionValues = (options: any) => {
         type,
         value: component,
         mode,
+        dataPacks,
       });
   });
 
@@ -62,10 +74,13 @@ const getOptionFilters = (options: any, activatedDataPacks: any) => {
   const pureOptions = options.filter((option: any) => !option.fromPage);
   const templateFilters = getTemplatesFilters(activatedDataPacks);
 
-  const mappedOptions = pureOptions.map((option: any) => ({
-    label: option.title,
-    value: option.id.toLowerCase(),
-  }));
+  const mappedOptions = pureOptions.flatMap((option: any) =>
+    option.dataPacks.map((dataPack: string) => ({
+      label: dataPack.toLowerCase(),
+      value: dataPack.toLowerCase(),
+      isData: true,
+    }))
+  );
 
   const filters = [...templateFilters, ...mappedOptions];
   const uniqueFilters = [...new Map(filters.map((item: any) => [item.value, item])).values()];

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

@@ -2,7 +2,7 @@ import React from "react";
 import { connect } from "react-redux";
 import { pageEditorActions } from "@ax/containers/PageEditor";
 import { ConfigPanel, ResizePanel } from "@ax/components";
-import { IBreadcrumbItem, IRootState, ISchema, IUserEditing } from "@ax/types";
+import { IBreadcrumbItem, INotification, IRootState, ISchema, IUserEditing } from "@ax/types";
 import PageBrowser from "../PageBrowser";
 
 const Editor = (props: IProps) => {
@@ -26,7 +26,10 @@ const Editor = (props: IProps) => {
     isEditable,
     isReadOnly,
     userEditing,
+    copyModule,
+    pasteModule,
     theme,
+    setNotification,
   } = props;
 
   const actions = {
@@ -37,6 +40,9 @@ const Editor = (props: IProps) => {
     replaceModuleAction: replaceModule,
     duplicateModuleAction: duplicateModule,
     replaceElementsInCollectionAction: replaceElementsInCollection,
+    copyModuleAction: copyModule,
+    pasteModuleAction: pasteModule,
+    setNotificationAction: setNotification,
   };
 
   return (
@@ -86,6 +92,9 @@ interface IPageBrowserDispatchProps {
   moveElement(moduleID: number, selectedContent: any, isPush: boolean, key: string): void;
   replaceModule(module: any, parent: any, objKey: string): void;
   replaceElementsInCollection(newValue: string, reference: string): void;
+  copyModule(editorID: number): boolean;
+  pasteModule(editorID: number): Promise<{ error?: INotification }>;
+  setNotification: (notification: INotification) => void;
   isGlobal: boolean;
   isEditable: boolean;
   isReadOnly: boolean;
@@ -114,6 +123,8 @@ const mapDispatchToProps = {
   moveElement: pageEditorActions.moveElement,
   replaceModule: pageEditorActions.replaceModule,
   replaceElementsInCollection: pageEditorActions.replaceElementsInCollection,
+  copyModule: pageEditorActions.copyModule,
+  pasteModule: pageEditorActions.pasteModule,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Editor);