@griddo/ax 1.67.10 → 1.68.2

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

@@ -7,9 +7,9 @@ const NoteField = (props: INoteFieldProps): JSX.Element => {
   const { title, text } = value;
 
   return (
-    <S.Wrapper className={className}>
-        {title && <S.Title>{title}</S.Title>}
-        <S.Text>{text}</S.Text>
+    <S.Wrapper className={className} data-testid="noteFieldWrapper">
+      {title && <S.Title data-testid="title">{title}</S.Title>}
+      <S.Text>{text}</S.Text>
     </S.Wrapper>
   );
 };

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

@@ -13,6 +13,7 @@ const NumberField = (props: INumberFieldProps): JSX.Element => {
   useEffect(() => {
     setInputValue(strValue);
   }, [strValue]);
+
   const setValue = (value: string, eventType: string) => {
     const floatValue = parseFloat(value);
     setInputValue(value);
@@ -45,6 +46,7 @@ const NumberField = (props: INumberFieldProps): JSX.Element => {
     setValue(e.target.value, e.type);
     handleValidation && handleValidation(e.target.value, validators);
   };
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setValue(e.target.value, e.type);
     error && handleValidation && handleValidation(e.target.value, validators);
@@ -54,7 +56,7 @@ const NumberField = (props: INumberFieldProps): JSX.Element => {
   const decreaseValue = () => handleClick("ArrowDown");
 
   return (
-    <S.FieldWrapper error={error}>
+    <S.FieldWrapper error={error} data-testid="conditional-field-wrapper">
       <S.Input
         type="number"
         value={inputValue}
@@ -65,12 +67,13 @@ const NumberField = (props: INumberFieldProps): JSX.Element => {
         min={minValue}
         max={maxValue}
         disabled={disabled}
+        data-testid="input"
       />
       <S.QuantityNav error={error} disabled={disabled}>
-        <S.ArrowUp onClick={increaseValue}>
+        <S.ArrowUp onClick={increaseValue} data-testid="arrow-up">
           <Icon name="UpArrow" />
         </S.ArrowUp>
-        <S.ArrowDown onClick={decreaseValue}>
+        <S.ArrowDown onClick={decreaseValue} data-testid="arrow-down">
           <Icon name="DownArrow" />
         </S.ArrowDown>
       </S.QuantityNav>

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

@@ -12,10 +12,18 @@ const RadioField = (props: IRadioFieldProps): JSX.Element => {
   };
 
   return (
-    <S.Wrapper>
+    <S.Wrapper data-testid="radio-field-wrapper">
       <S.Label>
         {title}
-        <S.Input type="radio" name={name} value={value} checked={checked} disabled={disabled} onChange={handleChange} />
+        <S.Input
+          type="radio"
+          name={name}
+          value={value}
+          checked={checked}
+          disabled={disabled}
+          onChange={handleChange}
+          data-testid="radio-field-input"
+        />
         <S.CheckMark checked={checked} error={error} />
       </S.Label>
     </S.Wrapper>

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

@@ -32,6 +32,7 @@ const ReferenceField = (props: IProps) => {
     maxItems,
     resetValidation,
     handleValidation,
+    mandatory,
   } = props;
 
   const { isOpen, toggleModal } = useModal();
@@ -178,9 +179,14 @@ const ReferenceField = (props: IProps) => {
 
   const manualItems = !isAuto && value && Array.isArray(value.fixed) ? value.fixed.length : 0;
 
+  const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
+
   return (
     <S.Wrapper>
-      <S.Label>Elements</S.Label>
+      <S.Label>
+        Elements
+        <Asterisk />
+      </S.Label>
       <S.ModeWrapper>
         {!singleMode && (
           <Select
@@ -224,6 +230,7 @@ interface IProps {
   maxItems?: number;
   resetValidation?: () => void;
   handleValidation?: (value: string, validators?: Record<string, unknown>) => void;
+  mandatory: boolean;
 }
 
 const mapStateToProps = (state: IRootState) => ({

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

@@ -11,6 +11,10 @@ const Label = styled.div`
   border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
 `;
 
+const Asterisk = styled.span`
+  color: ${(p) => p.theme.color.error};
+`;
+
 const ActionWrapper = styled.div`
   position: absolute;
   right: 0;
@@ -53,6 +57,7 @@ const SingleModeText = styled.span`
 `;
 
 export {
+  Asterisk,
   Wrapper,
   Label,
   ActionWrapper,

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

@@ -89,7 +89,7 @@ const RichText = (props: IRichTextProps): JSX.Element => {
   };
 
   return (
-    <S.EditorWrapper error={error} disabled={disabled}>
+    <S.EditorWrapper error={error} disabled={disabled} data-testid="rich-text-wrapper">
       <Editor
         editorState={editorState}
         toolbarClassName="richTextToolbar"

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

@@ -9,7 +9,7 @@ const SliderField = (props: ITextFieldProps): JSX.Element => {
   const val = typeof value === "undefined" ? defaultValue : value;
 
   useEffect(() => {
-      onChange(Number(val));
+    onChange(Number(val));
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -17,22 +17,26 @@ const SliderField = (props: ITextFieldProps): JSX.Element => {
     if (bubbleRef.current) {
       bubbleRef.current.style.left = setBubbleLeft();
     }
-  });
+  }, [bubbleRef]);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
     onChange(Number(newValue));
   };
-  
+
   const setBubbleLeft = () => {
     const half = Number(((val - min) * 100) / (max - min));
     return `calc(${half}% + (${8 - half * 0.16}px))`;
-  }
+  };
 
   return (
-    <S.Slider>
-      <S.Bubble ref={bubbleRef}>{prefix && `${prefix} `}{val}{suffix && ` ${suffix}`}</S.Bubble>
-      <S.Input value={value} min={min} max={max} step={step} onChange={handleChange} />
+    <S.Slider data-testid="sliderComponent">
+      <S.Bubble data-testid="bubbleComponent" ref={bubbleRef}>
+        {prefix && `${prefix} `}
+        {val}
+        {suffix && ` ${suffix}`}
+      </S.Bubble>
+      <S.Input data-testid="inputComponent" value={value} min={min} max={max} step={step} onChange={handleChange} />
     </S.Slider>
   );
 };

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

@@ -13,9 +13,18 @@ const ToggleField = (props: IToggleFieldProps): JSX.Element => {
   };
 
   return (
-    <S.Wrapper>
-      <S.Input id="toggle" type="checkbox" name={name} value={value || false} checked={checked} disabled={disabled} onChange={handleChange}/>
-      <S.Label htmlFor="toggle"/>
+    <S.Wrapper data-testid="toggle-field-wrapper">
+      <S.Input
+        id="toggle"
+        type="checkbox"
+        name={name}
+        value={value || false}
+        checked={checked}
+        disabled={disabled}
+        onChange={handleChange}
+        data-testid="toggle-field-input"
+      />
+      <S.Label htmlFor="toggle" />
     </S.Wrapper>
   );
 };

package/src/components/Fields/UrlField/PageFinder/SelectionListItem/index.tsx

@@ -13,7 +13,7 @@ const SelectionListItem = (props: ISelectionListItemProps): JSX.Element => {
   const pageType = type || "Page";
 
   return (
-    <S.ListItem onClick={handleOnClick}>
+    <S.ListItem onClick={handleOnClick} data-testid="selection-list-item">
       <S.Header>
         <S.Type>{pageType}</S.Type>
         <S.Date>{getFormattedDateWithTimezone(date, "d MMM Y")}</S.Date>

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

@@ -129,7 +129,9 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
   if (pageID) {
     field = (
       <S.PageSelectedWrapper>
-        <S.PageField onClick={handleOnClick}>{internalPageName && `- ${internalPageName} -`}</S.PageField>
+        <S.PageField onClick={handleOnClick} data-testid="page-field">
+          {internalPageName && `- ${internalPageName} -`}
+        </S.PageField>
         <S.IconWrapper>
           <IconAction icon="unlink" onClick={handleReset} disabled={disabled} />
         </S.IconWrapper>
@@ -162,7 +164,7 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
   ];
 
   return (
-    <>
+    <S.UrlFieldWrapper data-testid="url-field-wrapper">
       {field}
       {value && value.linkTo && isTabsVisible && (
         <S.AnchorWrapper>
@@ -217,11 +219,11 @@ const UrlField = (props: IUrlFieldProps): JSX.Element => {
       >
         <PageFinder onClick={handleSetPage} isOpen={isOpen} />
       </FloatingPanel>
-    </>
+    </S.UrlFieldWrapper>
   );
 };
 
-interface IUrlFieldProps {
+export interface IUrlFieldProps {
   value: IUrlField | null;
   title: string;
   onChange: (value: IUrlField | null) => void;

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

@@ -1,5 +1,7 @@
 import styled from "styled-components";
 
+const UrlFieldWrapper = styled.div``;
+
 const PageSelectedWrapper = styled.div`
   display: flex;
   box-shadow: ${(p) => p.theme.shadow.shadowS};
@@ -33,7 +35,7 @@ const IconWrapper = styled.div`
     transform: translate(-50%, -50%);
     svg {
       width: ${(p) => p.theme.spacing.m};
-      height: ${(p) => p.theme.spacing.m}};
+      height: ${(p) => p.theme.spacing.m};
     }
   }
 `;
@@ -52,4 +54,4 @@ const AnchorWrapper = styled.div`
   margin-top: ${(p) => p.theme.spacing.s};
 `;
 
-export { PageSelectedWrapper, PageField, IconWrapper, AdvancedWrapper, AnchorWrapper };
+export { PageSelectedWrapper, PageField, IconWrapper, AdvancedWrapper, AnchorWrapper, UrlFieldWrapper };

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

@@ -9,9 +9,17 @@ const VisualOption = ({ value, onChange, name, label, checked, img, disabled }:
 
   return (
     <S.Label>
-      <S.RadioButton type="radio" name={name} value={value} checked={checked} onChange={handleChange} disabled={disabled}/>
+      <S.RadioButton
+        data-testid="radioButtons"
+        type="radio"
+        name={name}
+        value={value}
+        checked={checked}
+        onChange={handleChange}
+        disabled={disabled}
+      />
       <S.ImageWrapper active={checked} disabled={disabled}>
-        <S.Image src={img}/>
+        <S.Image src={img} />
       </S.ImageWrapper>
     </S.Label>
   );

package/src/components/Fields/VisualUniqueSelection/ImageSelection/index.tsx

@@ -13,7 +13,7 @@ const ImageSelection = (props: IImageSelectionProps): JSX.Element => {
   const handleChange = (newValue: string) => onChange(newValue);
 
   return (
-    <S.Wrapper columns={columns}>
+    <S.Wrapper columns={columns} data-testid="imageSelectionComponent">
       {mappedOptions.map((option: any, index: number) => (
         <VisualOption
           value={option.value}
@@ -30,7 +30,7 @@ const ImageSelection = (props: IImageSelectionProps): JSX.Element => {
   );
 };
 
-interface IImageSelectionProps {
+export interface IImageSelectionProps {
   value: string;
   title: string;
   onChange: (value: string) => void;

package/src/components/Fields/VisualUniqueSelection/ScrollableSelection/index.tsx

@@ -39,7 +39,7 @@ const ScrollableSelection = (props: IScrollableSelectionProps): JSX.Element => {
   }, [carouselRef, columns]);
 
   return (
-    <S.Wrapper>
+    <S.Wrapper data-testid="scrollableSelectionComponent">
       <S.Carousel ref={carouselRef}>
         {mappedOptions.map((option: IScrollableUniqueSelectionFieldOptionsProps, index: number) => (
           <S.CarouselItem width={carouselItemWidth} columns={columns} key={index}>
@@ -62,7 +62,7 @@ const ScrollableSelection = (props: IScrollableSelectionProps): JSX.Element => {
           </S.MoveButton>
           <S.DotGroup>
             {[...Array(slides)].map((_, i) => (
-              <S.Dot selected={i === carouselIndex} key={i}></S.Dot>
+              <S.Dot data-testid="dotSelected" selected={i === carouselIndex} key={i}></S.Dot>
             ))}
           </S.DotGroup>
           <S.MoveButton>
@@ -74,7 +74,7 @@ const ScrollableSelection = (props: IScrollableSelectionProps): JSX.Element => {
   );
 };
 
-interface IScrollableSelectionProps {
+export interface IScrollableSelectionProps {
   value: string;
   title: string;
   onChange: (value: string) => void;
@@ -87,6 +87,7 @@ interface IScrollableSelectionProps {
   selectedContent: any;
   reference?: string;
   theme: string;
+  elementUniqueSelection: boolean;
 }
 
 interface IScrollableUniqueSelectionFieldOptionsProps {

package/src/components/Fields/VisualUniqueSelection/ScrollableSelection/style.tsx

@@ -45,7 +45,7 @@ export const Dot = styled.div<{ selected: boolean }>`
   background-color: ${(p) => (p.selected ? p.theme.color.uiSiteMenu : p.theme.color.uiLine)};
 `;
 
-export const MoveButton = styled.button`
+export const MoveButton = styled.div`
   background-color: transparent;
   border: 0;
 `;

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

@@ -1,9 +1,9 @@
 import React from "react";
 
-import ImageSelection from "./ImageSelection";
-import ScrollableSelection from "./ScrollableSelection";
+import ImageSelection, { IImageSelectionProps } from "./ImageSelection";
+import ScrollableSelection, { IScrollableSelectionProps } from "./ScrollableSelection";
 
-const VisualUniqueSelection = (props: any): JSX.Element => {
+const VisualUniqueSelection = (props: IImageSelectionProps & IScrollableSelectionProps): JSX.Element => {
   const { elementUniqueSelection = false } = props;
   const Component = elementUniqueSelection ? ScrollableSelection : ImageSelection;
 

package/src/components/FieldsBehavior/index.tsx

@@ -40,7 +40,7 @@ const FieldsBehavior = (props: any): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [editorID, error]);
 
-  const helpTextWrapper = message ? <S.HelpText>{message}</S.HelpText> : "";
+  const helpTextWrapper = message ? <S.HelpText error={errorField}>{message}</S.HelpText> : "";
   const isComponentArray = fieldType === "ComponentArray";
   const isComponentContainer = fieldType === "ComponentContainer";
   const hasMultipleOptions: boolean = whiteList && whiteList.length > 1;
@@ -79,8 +79,8 @@ const FieldsBehavior = (props: any): JSX.Element => {
   };
 
   return (
-    <S.Wrapper error={errorField} className={wrapperClass} showTitle={showTitle} id={objKey}>
-      <S.Content data-testid="contentWrapper" error={errorField}>
+    <S.Wrapper className={wrapperClass} showTitle={showTitle} id={objKey}>
+      <S.Content error={errorField} data-testid="contentWrapper">
         <Field
           {...props}
           showAdvanced={showAdvanced}
@@ -91,7 +91,7 @@ const FieldsBehavior = (props: any): JSX.Element => {
       </S.Content>
       <S.Header className="fieldHeader">
         {showTitle && (
-          <S.Label htmlFor={name}>
+          <S.Label htmlFor={name} error={errorField}>
             {title} <Asterisk />
           </S.Label>
         )}

package/src/components/FieldsBehavior/style.tsx

@@ -1,8 +1,8 @@
 import styled from "styled-components";
 
-export const Label = styled.label`
+export const Label = styled.label<{ error: boolean | undefined }>`
   ${(p) => p.theme.textStyle?.fieldLabel};
-  color: ${(p) => p.theme.color?.textMediumEmphasis};
+  color: ${(p) => (p.error === true ? p.theme.color?.error : p.theme.color?.textMediumEmphasis)};
   display: block;
   margin-bottom: ${(p) => p.theme.spacing?.xs};
 `;
@@ -11,9 +11,9 @@ export const Asterisk = styled.span`
   color: ${(p) => p.theme.color?.error};
 `;
 
-export const HelpText = styled.div`
+export const HelpText = styled.div<{ error: boolean | undefined }>`
   ${(p) => p.theme.textStyle.uiXS};
-  color: ${(p) => p.theme.color?.textMediumEmphasis};
+  color: ${(p) => (p.error === true ? p.theme.color?.error : p.theme.color?.textMediumEmphasis)};
 `;
 
 export const Header = styled.div`
@@ -30,19 +30,12 @@ export const Icons = styled.div`
   display: flex;
 `;
 
-export const Wrapper = styled.div<{ error: boolean | undefined; showTitle: boolean | undefined }>`
+export const Wrapper = styled.div<{ showTitle: boolean | undefined }>`
   position: relative;
   margin-bottom: ${(p) => p.theme.spacing?.m};
   padding-top: ${(p) => (p.showTitle ? p.theme.spacing?.m : 0)};
   width: 100%;
 
-  ${HelpText} {
-    color: ${(p) => (p.error === true ? p.theme.color?.error : p.theme.color?.textMediumEmphasis)};
-  }
-  ${Label} {
-    color: ${(p) => (p.error === true ? p.theme.color?.error : p.theme.color?.textMediumEmphasis)};
-  }
-
   &:hover > .fieldHeader ${Icons} {
     opacity: 1;
   }

package/src/components/FloatingMenu/index.tsx

@@ -57,15 +57,19 @@ const FloatingMenu = (props: IProps) => {
   useHandleClickOutside(isOpen, handleClickOutside);
 
   return (
-    <S.Wrapper ref={wrapper} onClick={handleClick} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+    <S.Wrapper
+      ref={wrapper}
+      onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      data-testid="floating-menu"
+    >
       <S.ButtonWrapper ref={button}>
         <Button />
       </S.ButtonWrapper>
       {isOpen && (
         <S.MenuWrapper isInAppBar={isInAppBar} ref={menuOptions} position={position} offset={offset}>
-          <S.Menu>
-            {children}
-          </S.Menu>
+          <S.Menu>{children}</S.Menu>
         </S.MenuWrapper>
       )}
     </S.Wrapper>

package/src/components/Loader/index.tsx

@@ -1,9 +1,11 @@
 import React from "react";
 
-const images = require.context("./components", true);
-const imagePath = (name: string) => images(name);
+import Circle from "./components/Circle";
+import Dots from "./components/Dots";
 
-const Loader = (props: IProps) =>  {
+const components: Record<string, () => JSX.Element> = { Circle, Dots };
+
+const Loader = (props: IProps): JSX.Element => {
   const name = props.name
     .replace(".svg", "")
     .split("-")
@@ -11,12 +13,14 @@ const Loader = (props: IProps) =>  {
     .join("");
 
   const { size = "70" } = props;
+  const elementProps = {
+    height: size,
+    width: size,
+    viewBox: "0 0 100 100",
+  };
 
-  const Svg = imagePath(`./${name}`).default;
-  return (
-    <Svg height={size} width={size} viewBox="0 0 100 100" />
-  );
-}
+  return React.createElement(components[name], elementProps);
+};
 
 interface IStateProps {
   name: string;

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

@@ -275,6 +275,7 @@ interface IAppBarProps {
   errors?: IErrorItem[];
   errorActions?: {
     goToError(editorID: number, tab: string, template: boolean): void;
+    goToPackage(): void;
   };
   isFromEditor?: boolean;
   pageStatusActions?: any[];

package/src/components/MainWrapper/index.tsx

@@ -47,6 +47,7 @@ interface IWrapperProps {
   errors?: IErrorItem[];
   errorActions?: {
     goToError(editorID: number, tab: string, template: boolean): void;
+    goToPackage(): void;
   };
   pageStatusActions?: any[];
 }

package/src/components/Toast/index.tsx

@@ -25,7 +25,7 @@ const Toast = (props: IProps) => {
 
   return createPortal(
     <S.Wrapper ref={toast}>
-      <S.Text>{message}</S.Text>
+      <S.Text data-testid="toastMessage">{message}</S.Text>
       <S.Buttons>
         {action &&
           <Button type="button" buttonStyle="lineInverse" onClick={action}>

package/src/components/Tooltip/index.tsx

@@ -78,7 +78,7 @@ const Tooltip = (props: IProps): JSX.Element => {
   if (!content) return children;
 
   return (
-    <S.Tooltip onMouseEnter={showTip} onMouseLeave={hideTip} onMouseDown={handleClick}>
+    <S.Tooltip data-testid="tooltipComponent" onMouseEnter={showTip} onMouseLeave={hideTip} onMouseDown={handleClick}>
       <div ref={childrenRef}>{children}</div>
       <S.Tip
         active={active}

package/src/components/index.tsx

@@ -47,6 +47,7 @@ import ActionMenu from "./ActionMenu";
 import Avatar from "./Avatar";
 import Breadcrumb from "./Breadcrumb";
 import Browser from "./Browser";
+import BrowserContent from "./BrowserContent";
 import BulkSelectionOptions from "./BulkSelectionOptions";
 import Button from "./Button";
 import CategoryCell from "./CategoryCell";
@@ -140,6 +141,7 @@ export {
   Avatar,
   Breadcrumb,
   Browser,
+  BrowserContent,
   BulkSelectionOptions,
   Button,
   CategoryCell,

package/src/containers/App/actions.tsx

@@ -99,14 +99,10 @@ function resetError(): ISetErrorAction {
 
 function handleError(response: any): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
-    const {
-      data: { code, message },
-      btnText,
-      actionsBelow,
-    } = response;
+    const { data, btnText, actionsBelow, text } = response;
     const error = {
-      code,
-      text: message,
+      code: data?.code,
+      text: data?.message || text,
       btnText,
       actionsBelow,
     };

package/src/containers/PageEditor/actions.tsx

@@ -29,6 +29,7 @@ import {
   checkH1content,
   parseValidationErrors,
   findPackagesActivationErrors,
+  checkMaxModules,
 } from "@ax/forms";
 import { appActions } from "@ax/containers/App";
 import { navigationActions } from "@ax/containers/Navigation";
@@ -100,6 +101,15 @@ const { getSiteDefaults, getDefaults } = navigationActions;
 // FIXME: CHECK EDITOR CONTENT STRUCTURE (editorContent.editorContent)
 
 function setEditorContent(editorContent: IPage | Record<string, unknown>): ISetEditorContent {
+  const iframe = document.querySelector("iframe");
+  iframe?.contentWindow?.postMessage(
+    {
+      type: "content-update",
+      message: editorContent,
+    },
+    "*"
+  );
+
   return { type: SET_EDITOR_CONTENT, payload: { editorContent } };
 }
 
@@ -654,6 +664,13 @@ function addModule(
 ): (dispatch: Dispatch, getState: any) => void {
   return (dispatch, getState) => {
     const { editorContent, sections, editorID } = getStateValues(getState);
+
+    const { isMaxModules, errorMessage } = checkMaxModules(editorContent, type);
+    if (isMaxModules) {
+      handleError({ text: errorMessage })(dispatch);
+      return;
+    }
+
     const componentModule = {
       editorID,
       type,
@@ -763,6 +780,13 @@ function duplicateModule(editorID: number, key?: string): (dispatch: Dispatch, g
 
     const updatedSections: any = [...sections];
     const { element: originalItem, parent, grandParent } = findByEditorID(updatedSections, editorID);
+
+    const { isMaxModules, errorMessage } = checkMaxModules(editorContent, originalItem.component);
+    if (isMaxModules) {
+      handleError({ text: errorMessage })(dispatch);
+      return;
+    }
+
     const parentModule = Array.isArray(parent) ? grandParent : parent;
 
     const parentKey = key ? key : getParentKey(parentModule, editorID);
@@ -814,6 +838,15 @@ function pasteModule(editorID: number): (dispatch: Dispatch, getState: any) => P
 
     const { sections, editorContent } = getStateValues(getState);
 
+    const { isMaxModules, errorMessage } = checkMaxModules(editorContent, moduleCopy.element.component);
+    if (isMaxModules && errorMessage) {
+      const error: INotification = {
+        type: "error",
+        text: errorMessage,
+      };
+      return { error };
+    }
+
     const updatedSections: any = [...sections];
     const { element: originalElement } = findByEditorID(updatedSections, editorID);
 
@@ -1069,7 +1102,7 @@ function getTemplateConfig(template: string): (dispatch: Dispatch, getState: any
   };
 }
 
-function validatePage(publish?: boolean, browserRef?: any): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+function validatePage(publish?: boolean): (dispatch: Dispatch, getState: any) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       const { editorContent } = getStateValues(getState);
@@ -1104,10 +1137,8 @@ function validatePage(publish?: boolean, browserRef?: any): (dispatch: Dispatch,
       errors = packagesActivationErrors ? [...errors, packagesActivationErrors] : errors;
 
       let warnings: IErrorItem[] = [];
-      if (browserRef && browserRef.current) {
-        const h1Warning = checkH1content(browserRef.current);
-        warnings = h1Warning ? [...warnings, h1Warning] : warnings;
-      }
+      const h1Warning = checkH1content();
+      warnings = h1Warning ? [...warnings, h1Warning] : warnings;
 
       const allErrors = [...errors, ...warnings];