@griddo/ax 10.4.8 → 10.4.10

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.4.8",
+  "version": "10.4.10",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -231,5 +231,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1390ad1d87acd73442f46bed3f505df9b6fd4adc"
+  "gitHead": "5ebecf976ceff5858e8395eea3ec113a488a1876"
 }

package/src/__tests__/components/Fields/ComponentArray/MixableComponentArray/MixableComponentArray.test.tsx

@@ -128,7 +128,8 @@ describe("ComponentArraySelector component rendering", () => {
     mixableProps.field = {
       contentType: "modules",
       key: "mainContent",
-      title: "", type: ""
+      title: "",
+      type: "",
     };
     mixableProps.objKey = "elements";
     mixableProps.disabled = false;
@@ -211,34 +212,36 @@ describe("ComponentArraySelector component rendering", () => {
     const actualDate = new Date();
     mixableProps.moduleCopy = {
       date: actualDate,
-      elements: [{
-        editorID: 1,
-        component: "ArticlesDistributor",
-        anchorID: null,
-        verticalSpacing: "medium",
-        hasDistributorData: true,
-        data: {
-          mode: "auto",
-          source: ["ARTICLES"],
-          order: "alpha",
-          quantity: 2,
-        },
-        layout: "L001",
-        title: {
-          content: "Title",
-          tag: "h2",
-        },
-        subtitle: "subtitle",
-        detail: "detail",
-        primaryLinkStyle: "primary",
-        groupingLink: {
-          component: "Link",
-          text: "View all",
-          style: "secondary",
-          editorID: 40,
-          parentEditorID: 39,
+      elements: [
+        {
+          editorID: 1,
+          component: "ArticlesDistributor",
+          anchorID: null,
+          verticalSpacing: "medium",
+          hasDistributorData: true,
+          data: {
+            mode: "auto",
+            source: ["ARTICLES"],
+            order: "alpha",
+            quantity: 2,
+          },
+          layout: "L001",
+          title: {
+            content: "Title",
+            tag: "h2",
+          },
+          subtitle: "subtitle",
+          detail: "detail",
+          primaryLinkStyle: "primary",
+          groupingLink: {
+            component: "Link",
+            text: "View all",
+            style: "secondary",
+            editorID: 40,
+            parentEditorID: 39,
+          },
         },
-      }],
+      ],
     };
     mixableProps.mandatory = true;
 

package/src/__tests__/components/Fields/ComponentArray/MixableComponentArray/PasteModuleButton/PasteModuleButton.test.tsx

@@ -26,6 +26,7 @@ const mockedFunction = defaultProps.pasteModule as jest.MockedFunction<
 >;
 const mockedNotification = defaultProps.setNotification as jest.MockedFunction<(notification: INotification) => void>;
 defaultProps.editorID = 1;
+defaultProps.modulesToPaste = [{ editorID: 1, component: "BasicContent" }];
 
 describe("ComponentArraySelector component rendering", () => {
   test("should render the component", async () => {
@@ -92,7 +93,7 @@ describe("ComponentArraySelector trigger events", () => {
     });
     expect(mockedFunction).toHaveBeenCalled();
     await expect(mockedFunction(1, "", [{ editorID: 1, component: "BasicContent" }])).resolves.toEqual({});
-    expect(screen.getByTestId("toast-message")).toHaveTextContent("Module pasted from clipboard");
+    expect(screen.getByTestId("toast-message")).toHaveTextContent("1 module pasted from clipboard");
   });
 
   test("should trigger the onClick and resolve promise without error", async () => {
@@ -110,7 +111,9 @@ describe("ComponentArraySelector trigger events", () => {
       fireEvent.click(iconButton);
     });
     expect(mockedFunction).toHaveBeenCalled();
-    await expect(mockedFunction(1, "", [{ editorID: 1, component: "BasicContent" }])).resolves.toEqual({ error: undefined });
-    expect(screen.getByTestId("toast-message")).toHaveTextContent("Module pasted from clipboard");
+    await expect(mockedFunction(1, "", [{ editorID: 1, component: "BasicContent" }])).resolves.toEqual({
+      error: undefined,
+    });
+    expect(screen.getByTestId("toast-message")).toHaveTextContent("1 module pasted from clipboard");
   });
 });

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

@@ -16,7 +16,7 @@ const PasteModuleButton = (props: IPasteModuleProps): JSX.Element => {
     slots,
   } = props;
 
-  const { isVisible, toggleToast, setIsVisible } = useToast();
+  const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
 
   const handlePasteModule = async () => {
     if (isModuleCopyUnavailable) {
@@ -41,7 +41,7 @@ const PasteModuleButton = (props: IPasteModuleProps): JSX.Element => {
         const { type, text } = pasteResult.error;
         setNotification && setNotification({ type, text });
       } else {
-        toggleToast();
+        toggleToast(`${modulesToPaste.length} module${modulesToPaste.length > 1 ? "s" : ""} pasted from clipboard`);
       }
     }
   };
@@ -51,7 +51,7 @@ const PasteModuleButton = (props: IPasteModuleProps): JSX.Element => {
       <Tooltip content="Paste from clipboard">
         <IconAction icon="paste" onClick={handlePasteModule} />
       </Tooltip>
-      {isVisible && <Toast message="Module pasted from clipboard" setIsVisible={setIsVisible} />}
+      {isVisible && <Toast message={`${toastState}`} setIsVisible={setIsVisible} />}
     </>
   );
 };

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

@@ -187,9 +187,9 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
   const onBeforeCapture = (start: BeforeCapture) => setDraggingId(parseInt(start.draggableId));
 
   const handleCopy = () => {
-    const isCopied = copyModuleAction && copyModuleAction(selectedItems.all);
-    isCopied &&
-      toggleToast(`${selectedItems.all.length} module${selectedItems.all.length > 1 ? "s" : ""} copied to clipboard`);
+    const modulesCopied = copyModuleAction && copyModuleAction(selectedItems.all);
+    modulesCopied &&
+      toggleToast(`${modulesCopied} module${selectedItems.all.length > 1 ? "s" : ""} copied to clipboard`);
   };
 
   const handleDuplicate = () => {
@@ -318,7 +318,7 @@ export interface IMixableComponentArrayProps {
     addModuleAction: (moduleType: string, key: string, selectedID: number, isComponentModule?: boolean) => void;
     deleteModuleAction: (editorID: number[], key?: string) => void;
     duplicateModuleAction: (editorID: number[], key?: string) => number;
-    copyModuleAction: (editorID: number[]) => boolean;
+    copyModuleAction: (editorID: number[]) => boolean | number;
     replaceElementsInCollectionAction: (newValue: string, reference?: string) => void;
     moveModuleAction: (moduleID: number[], selectedContent: any, newIndex: number, key: string) => void;
     pasteModuleAction: (editorID: number, key: string, modulesToPaste: IModule[]) => Promise<{ error?: INotification }>;

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

@@ -234,7 +234,7 @@ export interface IComponentContainerProps {
     addComponentAction: (componentType: any, key?: string) => void;
     deleteModuleAction: (editorID: number[], key?: string) => void;
     duplicateModuleAction: (editorID: number[], key?: string) => number;
-    copyModuleAction: (editorID: number[]) => boolean;
+    copyModuleAction: (editorID: number[]) => boolean | number;
     replaceModuleAction: (module: any, parent: any, objKey: string) => void;
   };
   disabled?: boolean;

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

@@ -139,6 +139,7 @@ const Title = styled.span<{ disabled?: boolean }>`
 const HandleWrapper = styled.div<{ hidden?: boolean }>`
   display: ${(p) => (p.hidden ? "none" : "flex")};
   align-items: center;
+  z-index: 1;
 `;
 
 const IconHandleWrapper = styled.div`

package/src/components/MainWrapper/AppBar/index.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useState } from "react";
 import { withRouter, RouteComponentProps } from "react-router-dom";
 
 import { IErrorItem } from "@ax/types";
 import { trimText } from "@ax/helpers";
+import { useModal } from "@ax/hooks";
 import {
   Button,
   Icon,
@@ -14,6 +15,7 @@ import {
   Tooltip,
   ErrorCenter,
   SearchField,
+  Modal,
 } from "@ax/components";
 
 import { ActionMenu, ActionSimpleMenu, DownArrowButton } from "./atoms";
@@ -47,6 +49,7 @@ const AppBar = (props: IProps): JSX.Element => {
     searchFilters,
     hasAnimation,
     searchValue,
+    isDirty,
   } = props;
 
   const publishedTooltip: any = {
@@ -59,6 +62,9 @@ const AppBar = (props: IProps): JSX.Element => {
 
   const fixedClass = fixedAppBar ? "fixed" : "";
 
+  const { isOpen, toggleModal } = useModal();
+  const [langSelected, setLangSelected] = useState(language);
+
   const goToPages = () => {
     typeof backLink === "string" ? props.history.push(backLink, { isFromEditor }) : props.history.goBack();
   };
@@ -67,6 +73,11 @@ const AppBar = (props: IProps): JSX.Element => {
     pageLanguages && pageLanguages.find((pageLang: any) => pageLang.locale === lang);
 
   const handleLanguage = (item: any) => async () => {
+    if (langSelected && langSelected.locale !== item.locale && isDirty) {
+      setLangSelected(item);
+      toggleModal();
+      return;
+    }
     if (!languageActions || !languageActions.setLanguage) return;
 
     const lang = {
@@ -144,7 +155,7 @@ const AppBar = (props: IProps): JSX.Element => {
   };
 
   const PageStatus = () => {
-    const offset = rightButton || rightLineButton  ? -20 : -135;
+    const offset = rightButton || rightLineButton ? -20 : -135;
     return statusMenu.options && statusMenu.options.length > 0 ? (
       <FloatingMenu Button={StatusBtn} isInAppBar={true} position="left" offset={offset}>
         <ActionSimpleMenu menu={statusMenu} />
@@ -152,11 +163,40 @@ const AppBar = (props: IProps): JSX.Element => {
     ) : (
       <Icon name={pageStatus ?? "offline"} size="24" />
     );
-  }
+  };
+
+  const modalText = <>If you change without saving it, it will be lost. Do you want to discard your changes?</>;
+
+  const mainAction = {
+    title: "Change language",
+    onClick: handleLanguage(langSelected),
+  };
+
+  const secondaryAction = {
+    title: "Cancel",
+    onClick: () => {
+      setLangSelected(language);
+      toggleModal();
+    },
+  };
+
+  const changeLanguageModalProps = {
+    isOpen,
+    hide: toggleModal,
+    title: "Change language",
+    mainAction,
+    secondaryAction,
+  };
+
+  const ChangeLanguageModal = () => (
+    <Modal {...changeLanguageModalProps}>
+      <S.ModalContent>{modalText}</S.ModalContent>
+    </Modal>
+  );
 
   const languageTooltip = typeof currentPageID === "number" && "Add language";
 
-  const classes = hasAnimation ? `${fixedClass} ${additionalClass} animate` : `${fixedClass} ${additionalClass}`
+  const classes = hasAnimation ? `${fixedClass} ${additionalClass} animate` : `${fixedClass} ${additionalClass}`;
 
   return (
     <S.Header className={classes} inversed={inversed} data-testid="appbar-header">
@@ -204,14 +244,20 @@ const AppBar = (props: IProps): JSX.Element => {
         )}
         {language && (
           <>
+            <ChangeLanguageModal />
             <S.LanguageWrapper data-testid="language-wrapper">
               <Tooltip content={languageTooltip} hideOnClick bottom>
-                <FloatingMenu Button={LanguageBtn} isInAppBar={true} position="left" offset={rightButton || rightLineButton ? 0 : -85}>
+                <FloatingMenu
+                  Button={LanguageBtn}
+                  isInAppBar={true}
+                  position="left"
+                  offset={rightButton || rightLineButton ? 0 : -85}
+                >
                   {languageMenu}
                 </FloatingMenu>
               </Tooltip>
             </S.LanguageWrapper>
-            {(pageStatus || rightButton || rightLineButton ) && <S.Separator />}
+            {(pageStatus || rightButton || rightLineButton) && <S.Separator />}
           </>
         )}
         {pageStatus && (
@@ -221,7 +267,7 @@ const AppBar = (props: IProps): JSX.Element => {
                 <PageStatus />
               </Tooltip>
             </S.IconStatusWrapper>
-            {(rightButton || rightLineButton ) && <S.Separator />}
+            {(rightButton || rightLineButton) && <S.Separator />}
           </>
         )}
         {isFromEditor && errors && errors.length > 0 && (
@@ -297,6 +343,7 @@ export interface IAppBarProps {
   pageStatusActions?: any[];
   hasAnimation?: boolean;
   searchValue?: string;
+  isDirty?: boolean;
 }
 
 type IProps = IAppBarProps & RouteComponentProps;

package/src/components/MainWrapper/AppBar/style.tsx

@@ -208,6 +208,16 @@ const SearchWrapper = styled.div<{ length: number }>`
   justify-content: flex-end;
 `;
 
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+  p {
+    margin-bottom: ${(p) => p.theme.spacing.m};
+  }
+  div {
+    margin-bottom: 0;
+  }
+`;
+
 const StatusBtn = styled.span``;
 
 export {
@@ -233,4 +243,5 @@ export {
   TabsContent,
   StatusBtn,
   HelpText,
+  ModalContent,
 };

package/src/components/MainWrapper/index.tsx

@@ -55,6 +55,7 @@ export interface IWrapperProps {
   pageStatusActions?: any[];
   hasAnimation?: boolean;
   searchValue?: string;
+  isDirty?: boolean;
 }
 
 export default MainWrapper;

package/src/components/Modal/index.tsx

@@ -6,7 +6,18 @@ import Button from "../Button";
 import * as S from "./style";
 
 const Modal = (props: IModalProps): JSX.Element | null => {
-  const { isOpen, hide, children, title, size, mainAction, secondaryAction, height, overflow = "auto", isChild } = props;
+  const {
+    isOpen,
+    hide,
+    children,
+    title,
+    size,
+    mainAction,
+    secondaryAction,
+    height,
+    overflow = "auto",
+    isChild,
+  } = props;
 
   const titleContent = title ? <S.Title>{title}</S.Title> : "";
 
@@ -73,7 +84,7 @@ export interface IModalProps {
 
 interface IAction {
   title: string;
-  onClick: () => void;
+  onClick: (item?: any) => void;
   disabled?: boolean;
   icon?: string;
 }

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

@@ -669,7 +669,7 @@ function moveModule(
   };
 }
 
-function copyModule(editorID: number[]): (dispatch: Dispatch, getState: any) => boolean {
+function copyModule(editorID: number[]): (dispatch: Dispatch, getState: any) => boolean | number {
   return (dispatch, getState) => {
     const {
       navigation: { editorContent },
@@ -691,7 +691,7 @@ function copyModule(editorID: number[]): (dispatch: Dispatch, getState: any) =>
         elements: modulesToCopy,
       };
       dispatch(setCopyModule(payload));
-      return true;
+      return payload.elements.length;
     } else {
       return false;
     }

package/src/containers/PageEditor/actions.tsx

@@ -878,7 +878,7 @@ function duplicateModule(editorID: number[], key?: string): (dispatch: Dispatch,
   };
 }
 
-function copyModule(editorID: number[]): (dispatch: Dispatch, getState: any) => boolean {
+function copyModule(editorID: number[]): (dispatch: Dispatch, getState: any) => boolean | number {
   return (dispatch, getState) => {
     const { sections } = getStateValues(getState);
     const modulesToCopy: Record<string, unknown>[] = [];
@@ -899,7 +899,7 @@ function copyModule(editorID: number[]): (dispatch: Dispatch, getState: any) =>
 
       dispatch(setCopyModule(payload));
 
-      return true;
+      return payload.elements.length;
     } else {
       return false;
     }
@@ -924,7 +924,7 @@ function pasteModule(
 
     let error: INotification | undefined;
 
-    modulesToPaste.forEach(async (element) => {
+    for (const element of modulesToPaste) {
       const { isMaxModules, errorMessage } = checkMaxModules(editorContent, element.component);
       if (isMaxModules && errorMessage) {
         error = {
@@ -958,7 +958,7 @@ function pasteModule(
       }
 
       itemsArr.push(validatedModuleCopy);
-    });
+    }
 
     const updatedPageContent = {
       ...editorContent,

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

@@ -95,7 +95,7 @@ interface IPageBrowserDispatchProps {
   moveElement(moduleID: number[], selectedContent: any, newIndex: number, key: string): void;
   replaceModule(module: any, parent: any, objKey: string): void;
   replaceElementsInCollection(newValue: string, reference: string): void;
-  copyModule(editorID: number[]): boolean;
+  copyModule(editorID: number[]): boolean | number;
   pasteModule(editorID: number, key: string, modulesToPaste: IModule[]): Promise<{ error?: INotification }>;
   setNotification: (notification: INotification) => void;
   isGlobal: boolean;

package/src/modules/GlobalEditor/index.tsx

@@ -346,11 +346,13 @@ const GlobalEditor = (props: IProps) => {
     }
   };
 
-  const rightButtonProps = isAllowedToEditContentPage ? {
-    label: isSaving ? "Saving" : getSaveLabel(),
-    disabled: (!isDirty && pageID !== null && !isNewTranslation) || isSaving || isReadOnly,
-    action: isPublished ? publishChanges : handleSavePage,
-  } : undefined;
+  const rightButtonProps = isAllowedToEditContentPage
+    ? {
+        label: isSaving ? "Saving" : getSaveLabel(),
+        disabled: (!isDirty && pageID !== null && !isNewTranslation) || isSaving || isReadOnly,
+        action: isPublished ? publishChanges : handleSavePage,
+      }
+    : undefined;
 
   const goToLivePage = () => {
     const currentPageUrl = editorContent.fullUrl;
@@ -453,6 +455,7 @@ const GlobalEditor = (props: IProps) => {
         isFromEditor={true}
         pageStatusActions={pageStatusActions}
         tabs={tabsPreview}
+        isDirty={isDirty}
       >
         {selectedTab === "edit" ? (
           <>
@@ -463,12 +466,7 @@ const GlobalEditor = (props: IProps) => {
             )}
             {sitePageID && (
               <S.NotificationWrapper>
-                <Notification
-                  type="info"
-                  text={globalNotificationText}
-                  btnText="Go Back"
-                  onClick={goBackToSite}
-                />
+                <Notification type="info" text={globalNotificationText} btnText="Go Back" onClick={goBackToSite} />
               </S.NotificationWrapper>
             )}
             {notification && (

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

@@ -92,7 +92,7 @@ interface IPageBrowserDispatchProps {
   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;
+  copyModule(editorID: number[]): boolean | number;
   pasteModule(editorID: number, key: string, modulesToPaste: IModule[]): Promise<{ error?: INotification }>;
   setNotification: (notification: INotification) => void;
   browserRef?: React.RefObject<HTMLDivElement>;

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

@@ -133,7 +133,7 @@ interface IPageBrowserDispatchProps {
   setHistoryPush(path: string, isEditor: boolean): void;
   getGlobalFromLocalPage(): void;
   saveCurrentSiteInfo(): void;
-  copyModule(editorID: number[]): boolean;
+  copyModule(editorID: number[]): boolean | number;
   pasteModule(editorID: number, key: string, modulesToPaste: IModule[]): Promise<{ error?: INotification }>;
   setNotification: (notification: INotification) => void;
   restorePageNavigation: (key: string) => void;

package/src/modules/PageEditor/index.tsx

@@ -513,6 +513,7 @@ const PageEditor = (props: IProps) => {
         errorActions={{ goToError, goToPackage: handleClickNotification }}
         isFromEditor={true}
         tabs={tabsPreview}
+        isDirty={isDirty}
       >
         {selectedTab === "edit" ? (
           <>