@griddo/ax 1.75.198 → 1.75.200

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.75.198",
+  "version": "1.75.200",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -235,5 +235,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8ca176c6cc523bf0ebf5cadd2af9715aab6d377e"
+  "gitHead": "350ffeddb79e7d6563265fb860116b2579841251"
 }

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

@@ -24,6 +24,7 @@ const NavConnectedField = (props: any) => {
     activatedTemplates,
     menus,
     theme,
+    moduleCopy,
   } = props;
 
   const updateValue = (key: string, value: any) => {
@@ -74,6 +75,7 @@ const NavConnectedField = (props: any) => {
       disabled={isDisabled}
       innerFields={innerFields}
       theme={theme}
+      moduleCopy={moduleCopy}
     />
   );
 };
@@ -87,6 +89,7 @@ const mapStateToProps = (state: IRootState) => ({
   currentDefaultsContent: state.navigation.currentDefaultsContent,
   activatedTemplates: state.dataPacks.templates,
   menus: state.menu.savedMenus,
+  moduleCopy: state.navigation.moduleCopy,
 });
 
 const mapDispatchToProps = {

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

@@ -73,7 +73,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
   const isComponentModule = contentType === "components";
   const isModuleArr = contentType === "modules";
 
-  const handleAddModule = (moduleType: string) => addModuleAction(moduleType, editorID, isComponentModule);
+  const handleAddModule = (moduleType: string) => addModuleAction(moduleType, objKey, editorID, isComponentModule);
 
   const handleAddComponent = (componentType: string) => addComponentAction && addComponentAction(componentType, objKey);
 

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

@@ -48,7 +48,7 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
   const isModuleArr = contentType === "modules";
   const isComponentModule = contentType === "components";
 
-  const handleAddModule = (moduleType: string) => addModuleAction(moduleType, editorID, isComponentModule);
+  const handleAddModule = (moduleType: string) => addModuleAction(moduleType, objKey, editorID, isComponentModule);
 
   const handleAddComponent = () => addComponentAction && addComponentAction(kind, objKey);
 

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

@@ -1,7 +1,7 @@
 import { Dispatch } from "redux";
 
 import { navigation } from "@ax/api";
-import { IBreadcrumbItem, ISchema } from "@ax/types";
+import { IBreadcrumbItem, INotification, ISchema } from "@ax/types";
 import {
   getDefaultSchema,
   getSchema,
@@ -12,6 +12,7 @@ import {
   getDefaultNavigationModules,
 } from "@ax/helpers";
 import {
+  checkMaxModules,
   findByEditorID,
   generateEditorIDs,
   getLastComponentEditorID,
@@ -42,6 +43,7 @@ import {
   SET_CURRENT_NAVIGATION_LANGUAGES,
   SET_IS_NEW_TRANSLATION,
   SET_SELECTED_PARENT,
+  SET_COPY_MODULE,
 } from "./constants";
 
 import {
@@ -55,6 +57,7 @@ import {
   ISetCurrentNavigationLanguages,
   ISetIsNewTranslation,
   ISetSelectedParent,
+  ISetCopyModule,
 } from "./interfaces";
 
 const { setIsLoading } = appActions;
@@ -115,6 +118,10 @@ function setIsNewTranslation(isNewTranslation: boolean): ISetIsNewTranslation {
   return { type: SET_IS_NEW_TRANSLATION, payload: { isNewTranslation } };
 }
 
+function setCopyModule(moduleCopy: Record<string, unknown> | null): ISetCopyModule {
+  return { type: SET_COPY_MODULE, payload: { moduleCopy } };
+}
+
 // API RELATED FUNCTIONS
 
 function getHeaders(params: any): (dispatch: Dispatch, getState: any) => Promise<void> {
@@ -525,6 +532,17 @@ const getUpdatedComponents = (editorContent: any, element: any, key: string) =>
   return updatedDefault;
 };
 
+function addModule(
+  type: string,
+  key: string,
+  selectedID: number,
+  isComponentModule?: boolean
+): (dispatch: Dispatch, getState: any) => void {
+  return (dispatch, getState) => {
+    addComponent(type, key)(dispatch, getState);
+  };
+}
+
 function addComponent(type: any, key: string): (dispatch: Dispatch, getState: any) => void {
   return (dispatch, getState) => {
     const { editorContent, selectedEditorID } = getStateValues(getState);
@@ -636,6 +654,53 @@ function moveModule(
   };
 }
 
+function copyModule(editorID: number): (dispatch: Dispatch, getState: any) => boolean {
+  return (dispatch, getState) => {
+    const {
+      navigation: { editorContent },
+    } = getState();
+
+    const { element: originalElement } = findByEditorID(editorContent, editorID);
+    if (originalElement) {
+      const { editorID, parentEditorID, ...element } = originalElement;
+      const payload = {
+        date: new Date(),
+        element,
+      };
+      dispatch(setCopyModule(payload));
+      return true;
+    } else {
+      return false;
+    }
+  };
+}
+
+function pasteModule(
+  editorID: number,
+  key: string
+): (dispatch: Dispatch, getState: any) => Promise<{ error?: INotification }> {
+  return async (dispatch, getState) => {
+    const {
+      navigation: { moduleCopy, editorContent },
+    } = getState();
+
+    const { element: originalElement } = findByEditorID(editorContent, editorID);
+
+    const validatedModuleCopy: any = deepClone(moduleCopy.element);
+
+    const itemsArr = originalElement[key];
+    itemsArr.push(validatedModuleCopy);
+
+    const updatedPageContent = {
+      ...editorContent,
+    };
+
+    generateContent(updatedPageContent, dispatch, getState);
+
+    return { error: undefined };
+  };
+}
+
 function replaceElementsInCollection(newValue: string, reference: string): (dispatch: Dispatch, getState: any) => void {
   return async (dispatch, getState) => {
     const { selectedContent } = getStateValues(getState);
@@ -765,6 +830,7 @@ export {
   createNewTranslation,
   getSiteDefaults,
   getValues,
+  addModule,
   addComponent,
   replaceElementsInCollection,
   generateContent,
@@ -786,4 +852,6 @@ export {
   duplicateModule,
   deleteModule,
   moveModule,
+  copyModule,
+  pasteModule,
 };

package/src/containers/Navigation/Defaults/constants.tsx

@@ -1,4 +1,4 @@
-export const NAME: string = "navigation";
+export const NAME = "navigation";
 
 export const SET_EDITOR_CONTENT = `${NAME}/SET_EDITOR_CONTENT`;
 export const SET_BREADCRUMB = `${NAME}/SET_BREADCRUMB`;
@@ -13,6 +13,7 @@ export const SET_FOOTER = `${NAME}/SET_FOOTER`;
 export const SET_DEFAULTS_CONTENT = `${NAME}/SET_DEFAULTS_CONTENT`;
 export const SET_TOTAL_ITEMS = `${NAME}/SET_TOTAL_ITEMS`;
 export const SET_CURRENT_NAVIGATION_LANGUAGES = `${NAME}/SET_CURRENT_NAVIGATION_LANGUAGES`;
-export const SET_IS_NEW_TRANSLATION: string = `${NAME}/SET_IS_NEW_TRANSLATION`;
+export const SET_IS_NEW_TRANSLATION = `${NAME}/SET_IS_NEW_TRANSLATION`;
+export const SET_COPY_MODULE = `${NAME}/SET_COPY_MODULE`;
 
 export const ITEMS_PER_PAGE = 50;

package/src/containers/Navigation/Defaults/interfaces.tsx

@@ -13,6 +13,7 @@ import {
   SET_CURRENT_NAVIGATION_LANGUAGES,
   SET_IS_NEW_TRANSLATION,
   SET_SELECTED_PARENT,
+  SET_COPY_MODULE,
 } from "./constants";
 
 export interface ISetEditorContent {
@@ -27,7 +28,7 @@ export interface ISetBreadcrumb {
 
 export interface ISetSchema {
   type: typeof SET_SCHEMA;
-  payload: { schema: ISchema | {} };
+  payload: { schema: ISchema | Record<string, unknown> };
 }
 
 export interface ISetSelectedContent {
@@ -80,6 +81,11 @@ export interface ISetIsNewTranslation {
   payload: { isNewTranslation: boolean };
 }
 
+export interface ISetCopyModule {
+  type: typeof SET_COPY_MODULE;
+  payload: { moduleCopy: Record<string, unknown> | null };
+}
+
 export type NavigationActionsCreators = ISetEditorContent &
   ISetBreadcrumb &
   ISetSchema &

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

@@ -15,6 +15,7 @@ import {
   SET_CURRENT_NAVIGATION_LANGUAGES,
   SET_IS_NEW_TRANSLATION,
   SET_SELECTED_PARENT,
+  SET_COPY_MODULE,
 } from "./constants";
 import { NavigationActionsCreators } from "./interfaces";
 
@@ -34,6 +35,7 @@ export interface INavigationState {
   currentNavigationLanguages: any[];
   isNewTranslation: boolean;
   form: any;
+  moduleCopy: { date: string; element: Record<string, unknown> } | null;
 }
 
 export const initialState = {
@@ -52,6 +54,7 @@ export const initialState = {
   currentNavigationLanguages: [],
   isNewTranslation: false,
   form: {},
+  moduleCopy: null,
 };
 
 export function reducer(state = initialState, action: NavigationActionsCreators): INavigationState {
@@ -70,6 +73,7 @@ export function reducer(state = initialState, action: NavigationActionsCreators)
     case SET_TOTAL_ITEMS:
     case SET_CURRENT_NAVIGATION_LANGUAGES:
     case SET_IS_NEW_TRANSLATION:
+    case SET_COPY_MODULE:
       return { ...state, ...action.payload };
     default:
       return state;

package/src/containers/PageEditor/actions.tsx

@@ -692,8 +692,8 @@ function addComponent(type: any, key: string): (dispatch: Dispatch, getState: an
 
 function addModule(
   type: string,
-  selectedID: number,
   key: string,
+  selectedID: number,
   isComponentModule?: boolean
 ): (dispatch: Dispatch, getState: any) => void {
   return (dispatch, getState) => {

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

@@ -89,7 +89,7 @@ interface IPageBrowserDispatchProps {
   deleteModule(editorID: number, key?: string): void;
   duplicateModule(editorID: number, key?: string): Promise<number>;
   addComponent: (componentType: any, key: string) => void;
-  addModule: (moduleType: string, selectedID: number, key: string) => void;
+  addModule: (moduleType: string, key: string, selectedID: number, isComponentModule?: boolean) => void;
   moveElement(moduleID: number, selectedContent: any, newIndex: number, key: string): void;
   replaceModule(module: any, parent: any, objKey: string): void;
   replaceElementsInCollection(newValue: string, reference: string): void;

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

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { navigationActions } from "@ax/containers/Navigation/Defaults";
 
 import { ResizePanel, ConfigPanel } from "@ax/components";
-import { IBreadcrumbItem, IRootState, ISchema, ISite } from "@ax/types";
+import { IBreadcrumbItem, INotification, IRootState, ISchema, ISite } from "@ax/types";
 import DefaultsBrowser from "./DefaultsBrowser";
 
 const Editor = (props: IProps) => {
@@ -16,10 +16,14 @@ const Editor = (props: IProps) => {
     selectedParent,
     activatedModules,
     addComponent,
+    addModule,
     moveModule,
     replaceModule,
     replaceElementsInCollection,
     setSelectedTab,
+    copyModule,
+    pasteModule,
+    setNotification,
     selectedTab,
     isLoading,
     site,
@@ -29,11 +33,15 @@ const Editor = (props: IProps) => {
   const actions = {
     deleteModuleAction: deleteModule,
     addComponentAction: addComponent,
+    addModuleAction: addModule,
     moveModuleAction: moveModule,
     replaceModuleAction: replaceModule,
     duplicateModuleAction: duplicateModule,
     replaceElementsInCollectionAction: replaceElementsInCollection,
     setSelectedContentAction: setSelectedContent,
+    copyModuleAction: copyModule,
+    pasteModuleAction: pasteModule,
+    setNotificationAction: setNotification,
   };
 
   return (
@@ -75,10 +83,14 @@ interface IPageBrowserDispatchProps {
   setSelectedTab(tab: string): void;
   deleteModule(editorID: number, key?: string): void;
   duplicateModule(editorID: number, key?: string): Promise<number>;
-  addComponent: (componentType: any, key: string) => void;
+  addComponent(componentType: any, key: string): void;
+  addModule(type: string, key: string, selectedID: number, isComponentModule?: boolean): void;
   replaceModule(module: any, parent: any, objKey: string): void;
   replaceElementsInCollection(newValue: string, reference: string): void;
   moveModule(moduleID: number, selectedContent: any, newIndex: number, key: string): void;
+  copyModule(editorID: number): boolean;
+  pasteModule(editorID: number, key: string): Promise<{ error?: INotification }>;
+  setNotification: (notification: INotification) => void;
   browserRef?: React.RefObject<HTMLDivElement>;
 }
 
@@ -100,9 +112,12 @@ const mapDispatchToProps = {
   deleteModule: navigationActions.deleteModule,
   duplicateModule: navigationActions.duplicateModule,
   addComponent: navigationActions.addComponent,
+  addModule: navigationActions.addModule,
   moveModule: navigationActions.moveModule,
   replaceModule: navigationActions.replaceModule,
   replaceElementsInCollection: navigationActions.replaceElementsInCollection,
+  copyModule: navigationActions.copyModule,
+  pasteModule: navigationActions.pasteModule,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Editor);

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

@@ -1,13 +1,13 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
 
-import { IRootState } from "@ax/types";
+import { INotification, IRootState } from "@ax/types";
 import { useIsDirty, useModal } from "@ax/hooks";
 import { RouteLeavingGuard } from "@ax/guards";
 
 import { appActions } from "@ax/containers/App";
 import { navigationActions } from "@ax/containers/Navigation";
-import { ErrorToast, Loading, MainWrapper, Modal } from "@ax/components";
+import { ErrorToast, Loading, MainWrapper, Modal, Notification } from "@ax/components";
 import Editor from "./Editor";
 
 import * as S from "./style";
@@ -34,6 +34,7 @@ const DefaultsEditor = (props: IProps) => {
     currentSiteInfo,
   } = props;
 
+  const [notification, setNotification] = useState<INotification | null>(null);
   const { isOpen, toggleModal } = useModal();
   const { isDirty, setIsDirty, resetDirty } = useIsDirty(editorContent, isNewTranslation);
   const currentDefaultNav = currentDefaultsContent.find((item: any) => item.setAsDefault);
@@ -136,6 +137,17 @@ const DefaultsEditor = (props: IProps) => {
         pageLanguages={navLanguages}
         fullWidth={true}
       >
+        {notification && (
+          <S.NotificationWrapper>
+            <Notification
+              type={notification.type}
+              text={notification.text}
+              btnText={notification.btnText}
+              onClick={notification.onClick}
+              resetError={() => setNotification(null)}
+            />
+          </S.NotificationWrapper>
+        )}
         <ErrorToast size="l" />
         <Modal
           isOpen={isOpen}
@@ -148,7 +160,7 @@ const DefaultsEditor = (props: IProps) => {
           {isOpen ? <S.ModalContent>{setDefaultModalText}</S.ModalContent> : null}
         </Modal>
         <S.Content>
-          <Editor browserRef={browserRef} />
+          <Editor browserRef={browserRef} setNotification={setNotification} />
         </S.Content>
       </MainWrapper>
     </>

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

@@ -8,18 +8,14 @@ const Content = styled.section`
 const NotificationWrapper = styled.div`
   position: fixed;
   width: 100%;
-  top: ${p => `calc(${p.theme.spacing.s} * 4)`};
+  top: ${(p) => `calc(${p.theme.spacing.s} * 4)`};
   left: 0;
   right: 0;
   z-index: 1100;
 `;
 
 const ModalContent = styled.div`
-  padding: ${p => p.theme.spacing.m};
+  padding: ${(p) => p.theme.spacing.m};
 `;
 
-export {
-  Content,
-  NotificationWrapper,
-  ModalContent
-}
+export { Content, NotificationWrapper, ModalContent };

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

@@ -116,7 +116,7 @@ interface IPageBrowserDispatchProps {
   deleteModule(editorID: number, key?: string): void;
   duplicateModule(editorID: number, key?: string): Promise<number>;
   addComponent: (componentType: any, key: string) => void;
-  addModule: (moduleType: string, selectedID: number, key: string) => void;
+  addModule: (moduleType: string, key: string, selectedID: number, isComponentModule?: boolean) => void;
   moveElement(moduleID: number, selectedContent: any, newIndex: number, key: string): void;
   replaceModule(module: any, parent: any, objKey: string): void;
   replaceElementsInCollection(newValue: string, reference: string): void;

package/tsconfig.json

@@ -28,12 +28,11 @@
       "webpack-env",
       "react/next",
       "react-dom/next",
-      "@testing-library/jest-dom",
-      "cypress",
+      "@testing-library/jest-dom",      
     ],
   },
   "include": [
-    "src"
+    "src",
   ],
   "extends": "./tsconfig.paths.json"
 }