@griddo/ax 1.65.27 → 1.66.2

package/src/components/Image/index.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { GriddoImage } from "@griddo/core";
+
+const Image = (props: IProps) => {
+  const DEFAULTS = {
+    quality: 75,
+    crop: "cover",
+    loading: "lazy",
+    formats: ["webp"],
+  };
+
+  return <GriddoImage {...DEFAULTS} {...props} />;
+};
+
+interface IProps {
+  width: number;
+  height?: number;
+  url: string;
+  quality?: number;
+  crop?: string;
+  loading?: string;
+  formats?: string[];
+}
+
+export default Image;

package/src/components/Notification/index.tsx

@@ -4,7 +4,7 @@ import { Icon } from "@ax/components";
 import * as S from "./style";
 
 const Notification = (props: IProps) => {
-  const { text, type, btnText, resetError, onClick, closeButton = true, actionsBelow } = props;
+  const { text, type, btnText, resetError, onClick, closeButton = true, actionsBelow, onClose } = props;
 
   const [isOpen, setIsOpen] = useState(true);
 
@@ -40,6 +40,7 @@ const Notification = (props: IProps) => {
 
   const handleClose = () => {
     resetError && resetError();
+    onClose && onClose();
     setIsOpen(false);
   };
 
@@ -78,6 +79,7 @@ interface IProps {
   onClick?: () => void;
   closeButton?: boolean;
   actionsBelow?: boolean;
+  onClose?: () => void;
 }
 
 export default Notification;

package/src/components/index.tsx

@@ -64,6 +64,7 @@ import Gallery from "./Gallery";
 import GuardModal from "./GuardModal";
 import Icon from "./Icon";
 import IconAction from "./IconAction";
+import Image from "./Image";
 import InformativeMenu from "./InformativeMenu";
 import LanguageMenu from "./LanguageMenu";
 import Loader from "./Loader";
@@ -155,6 +156,7 @@ export {
   GuardModal,
   Icon,
   IconAction,
+  Image,
   InformativeMenu,
   LanguageMenu,
   Loader,

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

@@ -2,7 +2,15 @@ import { Dispatch } from "redux";
 
 import { navigation } from "@ax/api";
 import { IBreadcrumbItem, ISchema } from "@ax/types";
-import { getDefaultSchema, getSchema, handleRequest, removeEditorIds, deepClone, getNullValue } from "@ax/helpers";
+import {
+  getDefaultSchema,
+  getSchema,
+  handleRequest,
+  removeEditorIds,
+  deepClone,
+  getNullValue,
+  getDefaultNavigationModules,
+} from "@ax/helpers";
 import {
   findByEditorID,
   generateEditorIDs,
@@ -49,7 +57,7 @@ import {
   ISetSelectedParent,
 } from "./interfaces";
 
-const { setIsLoading, setIsSaving } = appActions;
+const { setIsLoading } = appActions;
 
 function setEditorContent(editorContent: any): ISetEditorContent {
   return { type: SET_EDITOR_CONTENT, payload: { editorContent } };
@@ -366,9 +374,16 @@ function getSiteDefaults(): (dispatch: Dispatch, getState: any) => Promise<void>
 }
 
 function generateNewDefault(dispatch: Dispatch, getState: any) {
-  const { selectedDefault } = getStateValues(getState);
+  const {
+    selectedDefault,
+    currentSiteInfo: { navigationModules },
+  } = getStateValues(getState);
+
   const isHeader = selectedDefault === "Headers";
-  const component = isHeader ? "Header" : "Footer";
+  const { defaultHeader, defaultFooter } = getDefaultNavigationModules();
+  const headerComponent = navigationModules?.header || defaultHeader.component;
+  const footerComponent = navigationModules?.footer || defaultFooter.component;
+  const component = isHeader ? headerComponent : footerComponent;
   const defaultSchema = getDefaultSchema(component);
 
   const rootEditorID = 0;
@@ -382,7 +397,7 @@ function generateNewDefault(dispatch: Dispatch, getState: any) {
 function getValues(): (dispatch: Dispatch, getState: any) => Promise<void> {
   return async (dispatch, getState) => {
     try {
-      const { selectedDefault, header, footer, isNewTranslation } = getStateValues(getState);
+      const { selectedDefault, header, footer, isNewTranslation, currentSiteInfo } = getStateValues(getState);
 
       const isHeader = selectedDefault === "Headers";
       const currentNavigation = isHeader ? header : footer;
@@ -397,7 +412,10 @@ function getValues(): (dispatch: Dispatch, getState: any) => Promise<void> {
         const responseActions = {
           handleSuccess: async (response: any) => {
             const rootEditorID = 0;
-
+            const navigationModuleComponent = currentSiteInfo.navigationModules?.[type];
+            if (navigationModuleComponent) {
+              response.component = navigationModuleComponent;
+            }
             dispatch(setSelectedEditorID(rootEditorID));
             generateContent(response, dispatch, getState);
           },
@@ -475,11 +493,11 @@ function addComponent(type: any, key: string): (dispatch: Dispatch, getState: an
     generateContent(updatedContent, dispatch, getState);
 
     if (type.editorID) {
-      setSelectedContent(type.editorID)(dispatch, getState);
+      localStorage.setItem("selectedID", `${type.editorID}`);
     } else {
       const { editorContent } = getStateValues(getState);
       const lastElementEditorID = getLastComponentEditorID(editorContent, component.editorID, key);
-      setSelectedContent(lastElementEditorID)(dispatch, getState);
+      localStorage.setItem("selectedID", `${lastElementEditorID}`);
     }
   };
 }
@@ -546,7 +564,7 @@ function duplicateModule(editorID: number, key?: string): (dispatch: Dispatch, g
     const module = Array.isArray(generatedParent) ? generatedGrandParent : generatedParent;
     const duplicatedEditorID = module[parentKey][duplicatedItemIndex].editorID;
 
-    setSelectedContent(duplicatedEditorID)(dispatch, getState);
+    localStorage.setItem("selectedID", `${duplicatedEditorID}`);
   };
 }
 

package/src/containers/PageEditor/actions.tsx

@@ -29,7 +29,7 @@ import {
 } from "@ax/forms";
 import { appActions } from "@ax/containers/App";
 import { navigationActions } from "@ax/containers/Navigation";
-import { pages } from "@ax/api";
+import { pages, structuredData } from "@ax/api";
 import { getPageData, getPageNavigation, getStateValues } from "./utils";
 import {
   SET_BREADCRUMB,
@@ -50,9 +50,20 @@ import {
   SET_VALIDATED,
   SET_SITE_PAGE_ID,
   SET_USER_EDITING,
+  SET_LAST_ELEMENT_ADDED_ID,
+  SET_COPY_MODULE,
 } from "./constants";
 
-import { IPage, ISavePageParams, IBreadcrumbItem, ISchema, IErrorItem, IUserEditing } from "@ax/types";
+import {
+  IPage,
+  ISavePageParams,
+  IBreadcrumbItem,
+  ISchema,
+  IErrorItem,
+  IUserEditing,
+  IStructuredDataContent,
+  INotification,
+} from "@ax/types";
 import {
   ISetBreadcrumb,
   ISetSchema,
@@ -74,6 +85,8 @@ import {
   ISetSitePageID,
   ISetUserEditing,
   pageStatus,
+  ISetLastElementAddedId,
+  ISetCopyModule,
 } from "./interfaces";
 
 const { setIsLoading, setIsSaving } = appActions;
@@ -154,6 +167,14 @@ function setUserEditing(userEditing: IUserEditing | null): ISetUserEditing {
   return { type: SET_USER_EDITING, payload: { userEditing } };
 }
 
+function setLastElementAddedId(lastElementAddedId: null | number): ISetLastElementAddedId {
+  return { type: SET_LAST_ELEMENT_ADDED_ID, payload: { lastElementAddedId } };
+}
+
+function setCopyModule(moduleCopy: Record<string, unknown> | null): ISetCopyModule {
+  return { type: SET_COPY_MODULE, payload: { moduleCopy } };
+}
+
 function setTranslatedParent(): (dispatch: Dispatch, getState: any) => void {
   return async (dispatch, getState) => {
     try {
@@ -582,7 +603,8 @@ function addComponent(type: any, key: string): (dispatch: Dispatch, getState: an
     } else {
       const { sections: generatedSections } = getStateValues(getState);
       const lastElementEditorID = getLastComponentEditorID(generatedSections, component.editorID, key);
-      setSelectedContent(lastElementEditorID)(dispatch, getState);
+      dispatch(setLastElementAddedId(lastElementEditorID));
+      localStorage.setItem("selectedID", `${lastElementEditorID}`);
     }
   };
 }
@@ -626,7 +648,8 @@ function addModule(
     const { sections: generatedSections } = getStateValues(getState);
     const lastModuleEditorID = getLastModuleEditorID(generatedSections, updatedSectionIndex);
 
-    setSelectedContent(lastModuleEditorID)(dispatch, getState);
+    dispatch(setLastElementAddedId(lastModuleEditorID));
+    localStorage.setItem("selectedID", `${lastModuleEditorID}`);
   };
 }
 
@@ -685,6 +708,8 @@ function deleteModule(editorID: number, key?: string): (dispatch: Dispatch, getS
     };
 
     generatePageContent(updatedPageContent, dispatch, getState);
+
+    dispatch(setLastElementAddedId(null));
   };
 }
 
@@ -714,7 +739,78 @@ function duplicateModule(editorID: number, key?: string): (dispatch: Dispatch, g
     const section = Array.isArray(generatedParent) ? generatedGrandParent : generatedParent;
     const duplicatedEditorID = section[parentKey][duplicatedItemIndex].editorID;
 
-    setSelectedContent(duplicatedEditorID)(dispatch, getState);
+    localStorage.setItem("selectedID", `${duplicatedEditorID}`);
+  };
+}
+
+function copyModule(editorID: number): (dispatch: Dispatch, getState: any) => boolean {
+  return (dispatch, getState) => {
+    const { sections } = getStateValues(getState);
+    const { element: originalElement } = findByEditorID(sections, 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): (dispatch: Dispatch, getState: any) => Promise<{ error?: INotification }> {
+  return async (dispatch, getState) => {
+    const {
+      pageEditor: { moduleCopy },
+      sites: { currentSiteInfo },
+    } = getState();
+
+    const { sections, editorContent } = getStateValues(getState);
+
+    const updatedSections: any = [...sections];
+    const { element: originalElement } = findByEditorID(updatedSections, editorID);
+
+    const validatedModuleCopy: any = deepClone(moduleCopy.element);
+    let error: INotification | undefined;
+
+    if (moduleCopy.element.hasDistributorData) {
+      const { mode, fixed } = moduleCopy.element.data;
+      const isManualMode = mode === "manual" && !!fixed?.length;
+      if (isManualMode) {
+        const response = await structuredData.getDataContentBulk(fixed, currentSiteInfo.id);
+        if (isReqOk(response.status)) {
+          const validDataIds: number[] = [];
+          response.data.forEach((data: IStructuredDataContent) => data.relatedSite && validDataIds.push(data.id));
+          const hasInvalidData = validDataIds.length < fixed.length;
+          validatedModuleCopy.data.fixed = validDataIds;
+          if (hasInvalidData) {
+            error = {
+              type: "warning",
+              text: "Some distributor data were not copied because they are not imported into this site",
+            };
+          }
+        }
+      }
+    }
+
+    const itemsArr = originalElement.modules;
+    itemsArr.push(validatedModuleCopy);
+
+    const updatedPageContent = {
+      ...editorContent,
+    };
+
+    generatePageContent(updatedPageContent, dispatch, getState);
+
+    const { sections: generatedSections } = getStateValues(getState);
+    const { element: generatedElement } = findByEditorID(generatedSections, editorID);
+    const pastedEditorID = generatedElement.modules[itemsArr.length - 1].editorID;
+
+    localStorage.setItem("selectedID", `${pastedEditorID}`);
+    return { error };
   };
 }
 
@@ -875,6 +971,7 @@ function resetPageEditor(): (dispatch: Dispatch) => Promise<void> {
       dispatch(setValidated(false));
       dispatch(setSitePageID(null));
       dispatch(setUserEditing(null));
+      dispatch(setLastElementAddedId(null));
       localStorage.removeItem("selectedID");
     } catch (e) {
       console.log("Error", e); //TODO
@@ -1075,4 +1172,6 @@ export {
   sendPagePing,
   discardDraft,
   getTemplatePage,
+  copyModule,
+  pasteModule,
 };

package/src/containers/PageEditor/constants.tsx

@@ -18,6 +18,8 @@ export const SET_ERRORS = `${NAME}/SET_ERRORS`;
 export const SET_VALIDATED = `${NAME}/SET_VALIDATED`;
 export const SET_SITE_PAGE_ID = `${NAME}/SET_SITE_PAGE_ID`;
 export const SET_USER_EDITING = `${NAME}/SET_USER_EDITING`;
+export const SET_LAST_ELEMENT_ADDED_ID = `${NAME}/SET_LAST_ELEMENT_ADDED_ID`;
+export const SET_COPY_MODULE = `${NAME}/SET_COPY_MODULE`;
 
 export const INITIAL_TEMPLATE = "BasicTemplate";
 export const MULTIMEDIA_COMPONENTS = ["LinkableImage", "Video"];

package/src/containers/PageEditor/interfaces.tsx

@@ -17,6 +17,8 @@ import {
   SET_VALIDATED,
   SET_SITE_PAGE_ID,
   SET_USER_EDITING,
+  SET_LAST_ELEMENT_ADDED_ID,
+  SET_COPY_MODULE,
 } from "./constants";
 import { IBreadcrumbItem, ISchema, IPage, IErrorItem, IUserEditing } from "@ax/types";
 
@@ -110,6 +112,16 @@ export interface ISetUserEditing {
   payload: { userEditing: IUserEditing | null };
 }
 
+export interface ISetLastElementAddedId {
+  type: typeof SET_LAST_ELEMENT_ADDED_ID;
+  payload: { lastElementAddedId: null | number };
+}
+
+export interface ISetCopyModule {
+  type: typeof SET_COPY_MODULE;
+  payload: { moduleCopy: Record<string, unknown> | null };
+}
+
 export interface IFieldProps {
   id: number;
   key: string;

package/src/containers/PageEditor/reducer.tsx

@@ -20,6 +20,8 @@ import {
   SET_VALIDATED,
   SET_SITE_PAGE_ID,
   SET_USER_EDITING,
+  SET_LAST_ELEMENT_ADDED_ID,
+  SET_COPY_MODULE,
 } from "./constants";
 
 import { PageEditorActionsCreators } from "./interfaces";
@@ -43,6 +45,8 @@ export interface IPageEditorState {
   validated: boolean;
   sitePageID: number | null;
   userEditing: IUserEditing | null;
+  lastElementAddedId: null | number;
+  moduleCopy: { date: string; element: Record<string, unknown> } | null;
 }
 
 export const initialState = {
@@ -64,6 +68,8 @@ export const initialState = {
   validated: false,
   sitePageID: null,
   userEditing: null,
+  lastElementAddedId: null,
+  moduleCopy: null,
 };
 
 export function reducer(state = initialState, action: PageEditorActionsCreators): IPageEditorState {
@@ -87,6 +93,8 @@ export function reducer(state = initialState, action: PageEditorActionsCreators)
     case SET_VALIDATED:
     case SET_SITE_PAGE_ID:
     case SET_USER_EDITING:
+    case SET_LAST_ELEMENT_ADDED_ID:
+    case SET_COPY_MODULE:
       return { ...state, ...action.payload };
     default:
       return state;

package/src/containers/PageEditor/utils.tsx

@@ -66,8 +66,8 @@ export const getPageNavigation = (
     return { header: null, footer: null };
   }
 
-  const headers: any = defaultsContent.filter((content: any) => content.component === "Header");
-  const footers: any = defaultsContent.filter((content: any) => content.component === "Footer");
+  const headers: any = defaultsContent.filter((content: any) => content.type === "header");
+  const footers: any = defaultsContent.filter((content: any) => content.type === "footer");
   const header = !headerID
     ? headers.find((content: any) => content.setAsDefault)
     : headers.find((content: any) => content.id === headerID);

package/src/helpers/index.tsx

@@ -51,6 +51,9 @@ import {
   getDataPackSchema,
   getSchemaThumbnails,
   getTemplateThumbnails,
+  getNavigationModules,
+  getDefaultNavigationModules,
+  isMultipleNavigationModules,
 } from "./schemas";
 
 import {
@@ -169,4 +172,7 @@ export {
   splitAndTrim,
   getDefaultTheme,
   copyTextToClipboard,
+  getNavigationModules,
+  getDefaultNavigationModules,
+  isMultipleNavigationModules,
 };

package/src/helpers/schemas.tsx

@@ -3,15 +3,15 @@ import { sortBy } from "@ax/helpers";
 import { ModuleCategoryInfo } from "@ax/types";
 import { pageSchemas } from "@ax/schemas";
 
-const allSChemas = { ...schemas.all, ...pageSchemas };
+const allSchemas = { ...schemas.all, ...pageSchemas };
 
-const getSchema = (name: string) => allSChemas[name];
-const getDefaultSchema = (name: string) => allSChemas[name].default;
+const getSchema = (name: string) => allSchemas[name];
+const getDefaultSchema = (name: string) => allSchemas[name].default;
 
 const getSchemaThumbnails = (name: string, theme?: string) => {
-  if (!allSChemas[name].thumbnails) return null;
+  if (!allSchemas[name].thumbnails) return null;
 
-  return theme && allSChemas[name].thumbnails[theme] ? allSChemas[name].thumbnails[theme] : allSChemas[name].thumbnails;
+  return theme && allSchemas[name].thumbnails[theme] ? allSchemas[name].thumbnails[theme] : allSchemas[name].thumbnails;
 };
 
 const getTemplate = (name: string) => schemas.templates[name];
@@ -19,7 +19,7 @@ const getTemplate = (name: string) => schemas.templates[name];
 const getDefaultTemplate = (name: string) => schemas.templates[name].default;
 
 const getTemplateThumbnails = (name: string, theme?: string) => {
-  if (!schemas.templates[name].thumbnails) return null;
+  if (!schemas.templates[name]?.thumbnails) return null;
 
   return theme && schemas.templates[name].thumbnails[theme]
     ? schemas.templates[name].thumbnails[theme]
@@ -49,7 +49,7 @@ const getTemplateDisplayName = (template: string) => {
 };
 
 const filterByCategory = (options: any, category: string) =>
-  options.filter((option: any) => allSChemas[option].category === category);
+  options.filter((option: any) => allSchemas[option].category === category);
 
 const getModuleCategories = (moduleList: string[]): ModuleCategoryInfo[] => {
   const categories: string[] = [];
@@ -90,6 +90,32 @@ const getModuleStyles = (module: string): any[] => {
   return options;
 };
 
+const getNavigationModules = (): Record<string, any[]> => {
+  const navigationModules: Record<string, any[]> = { header: [], footer: [] };
+  Object.keys(schemas.modules).forEach((key: string) => {
+    const moduleType = schemas.modules[key].type;
+    if (["header", "footer"].includes(moduleType)) {
+      navigationModules[moduleType].push(schemas.modules[key]);
+    }
+  });
+  return navigationModules;
+};
+
+const getDefaultNavigationModules = (): Record<string, any> => {
+  const navigationModules: Record<string, any[]> = getNavigationModules();
+  const defaultHeader = navigationModules.header.find((header: any) => header.defaultNavigation);
+  const defaultFooter = navigationModules.footer.find((footer: any) => footer.defaultNavigation);
+  return {
+    defaultHeader: defaultHeader || navigationModules.header[0],
+    defaultFooter: defaultFooter || navigationModules.footer[0],
+  };
+};
+
+const isMultipleNavigationModules = (): boolean => {
+  const navigationModules: Record<string, any[]> = getNavigationModules();
+  return navigationModules.header.length > 1 || navigationModules.footer.length > 1;
+};
+
 export {
   getSchema,
   getDefaultSchema,
@@ -105,4 +131,7 @@ export {
   getModuleCategories,
   getModuleStyles,
   getDataPackSchema,
+  getNavigationModules,
+  getDefaultNavigationModules,
+  isMultipleNavigationModules,
 };

package/src/modules/App/Routing/index.tsx

@@ -5,7 +5,7 @@ import { Switch, Route } from "react-router-dom";
 import { ErrorGuard } from "@ax/guards";
 import { IRootState } from "@ax/types";
 import { appActions } from "@ax/containers/App";
-import { publicRoutes, privateRoutes, routes, IRouter, history } from "@ax/routes";
+import { publicRoutes, privateRoutes, routes, IRouter } from "@ax/routes";
 import { ILogoutAction } from "@ax/containers/App/interfaces";
 import NavMenu from "./NavMenu";
 import PrivateRoute from "./PrivateRoute";