@griddo/ax 10.4.26 → 10.4.27

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.4.26",
+  "version": "10.4.27",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -232,5 +232,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "7d1e693daf9d8513d856ebfd8be6a0dbe41aa74a"
+  "gitHead": "6185dbf170ba4bbe1a1d63873b06e6fd9624fd75"
 }

package/src/__tests__/components/ConfigPanel/Header/Header.test.tsx

@@ -104,6 +104,9 @@ defaultProps.breadcrumb = [
 
 defaultProps.activatedModules = ["TextField"];
 
+defaultProps.headerRef = { current: { offsetHeight: 63, offsetTop: 24 } } as React.RefObject<HTMLDivElement>;
+const setHeaderHeightMock = defaultProps.setHeaderHeight as jest.MockedFunction<(height: number) => void>;
+
 describe("Header component rendering", () => {
   it("should render component", () => {
     render(

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

@@ -21,17 +21,19 @@ export const Form = (props: IFormProps): JSX.Element => {
     header,
     footer,
     isEditLive,
+    headerHeight,
   } = props;
 
-  const isAllowedToEditPageContent =
-    (!isGlobal && usePermission("content.editContentPages")) ||
-    (isGlobal && usePermission("global.globalData.editAllGlobalData"));
+  const isAllowedToEditSitePages = usePermission("content.editContentPages");
+  const isAllowedToEditGlobalData = usePermission("global.globalData.editAllGlobalData");
+  const isAllowedToEditConfigPages = usePermission("content.editConfigPages");
+  const isAllowedToEditSiteSeo = usePermission("seoAnalytics.editSeoAnalyticsPages");
+  const isAllowedToEditGlobalSeo = usePermission("global.seoAnalytics.editSeoAnalyticsInGlobalPages");
+
+  const isAllowedToEditPageContent = (!isGlobal && isAllowedToEditSitePages) || (isGlobal && isAllowedToEditGlobalData);
   const isAllowedToEditPageConfig =
-    (!isGlobal && usePermission("content.editConfigPages")) ||
-    (isGlobal && usePermission("global.globalData.editAllGlobalData"));
-  const isAllowedToEditPageSEO =
-    (!isGlobal && usePermission("seoAnalytics.editSeoAnalyticsPages")) ||
-    (isGlobal && usePermission("global.seoAnalytics.editSeoAnalyticsInGlobalPages"));
+    (!isGlobal && isAllowedToEditConfigPages) || (isGlobal && isAllowedToEditGlobalData);
+  const isAllowedToEditPageSEO = (!isGlobal && isAllowedToEditSiteSeo) || (isGlobal && isAllowedToEditGlobalSeo);
 
   const tabContent = schema.configTabs.find((tab: ISchemaTab) => tab.title === selectedTab);
   const setTab = (tab: string) => setSelectedTab(tab);
@@ -99,8 +101,10 @@ export const Form = (props: IFormProps): JSX.Element => {
     actions.restorePageNavigationAction && actions.restorePageNavigationAction("footer");
 
   return (
-    <section data-testid="form-section">
-      <Tabs tabs={tabs} active={selectedTab} setSelectedTab={setTab} />
+    <S.Wrapper data-testid="form-section">
+      <S.TabsWrapper headerHeight={headerHeight}>
+        <Tabs tabs={tabs} active={selectedTab} setSelectedTab={setTab} />
+      </S.TabsWrapper>
       {selectedTab === "content" && isEditLive && (
         <S.FieldWrapper>
           There are some changes in the <strong>draft associated</strong> with this page. Before making changes to the
@@ -126,7 +130,7 @@ export const Form = (props: IFormProps): JSX.Element => {
         </S.FieldWrapper>
       )}
       {tabContent && tabContent.fields.map((field: ISchemaField) => generateFields(field))}
-    </section>
+    </S.Wrapper>
   );
 };
 
@@ -143,6 +147,7 @@ export interface IFormProps {
   header?: number | null;
   footer?: number | null;
   isEditLive?: boolean;
+  headerHeight: number;
 }
 
 export default Form;

package/src/components/ConfigPanel/Form/style.tsx

@@ -1,13 +1,15 @@
 import styled from "styled-components";
 
+const Wrapper = styled.section``;
+
 const FieldWrapper = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
   margin-top: ${(p) => p.theme.spacing.s};
   margin-bottom: ${(p) => p.theme.spacing.s};
-  background-color: ${(p) => p.theme.color?.uiBackground03};
-  padding: ${(p) => p.theme.spacing?.s};
-  border-radius: ${(p) => p.theme.radii?.s};
-  ${(p) => p.theme.textStyle?.uiXS};
-  color: ${(p) => p.theme.color?.textMediumEmphasis};
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  padding: ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.theme.radii.s};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
 `;
 
 const Link = styled.span`
@@ -16,4 +18,11 @@ const Link = styled.span`
   color: ${(p) => p.theme.color?.interactive01};
 `;
 
-export { FieldWrapper, Link };
+const TabsWrapper = styled.div<{ headerHeight: number }>`
+  background-color: ${(p) => p.theme.color.uiBackground01};
+  position: sticky;
+  top: ${(p) => (p.headerHeight ? `calc(63px + ${p.headerHeight}px)` : "63px")};
+  z-index: 3;
+`;
+
+export { Wrapper, FieldWrapper, Link, TabsWrapper };

package/src/components/ConfigPanel/GlobalPageForm/index.tsx

@@ -11,7 +11,7 @@ import * as S from "./style";
 
 const noteText = "This is Global content and you cannot edit it here. To do so, you must go to the Global page";
 const noteTitle = "Global content";
-const errorText = "You don't have the permissions to edit the original content."
+const errorText = "You don't have the permissions to edit the original content.";
 
 const GlobalPageForm = (props: IGlobalPageFormProps): JSX.Element => {
   const { selectedTab, setSelectedTab, schema, pageTitle, setHistoryPush, actions, header, footer } = props;

package/src/components/ConfigPanel/Header/index.tsx

@@ -1,13 +1,24 @@
-import React, { memo } from "react";
+import React, { memo, useCallback, useEffect, useState } from "react";
 
-import { IBreadcrumbItem } from "@ax/types";
+import { IBreadcrumbItem, ISchema } from "@ax/types";
 import { Breadcrumb, Toast } from "@ax/components";
 import { useToast } from "@ax/hooks";
 
 import * as S from "./style";
 
 const Header = (props: IHeaderProps) => {
-  const { breadcrumb, schema, selectedParent, activatedModules, actions, setSelectedContent } = props;
+  const {
+    breadcrumb,
+    schema,
+    selectedParent,
+    activatedModules,
+    actions,
+    headerRef,
+    setSelectedContent,
+    setHeaderHeight,
+    hasStickyHeader,
+  } = props;
+
   const { duplicateModuleAction, deleteModuleAction, copyModuleAction } = actions;
   const title = breadcrumb[breadcrumb.length - 1].displayName;
   const component = breadcrumb[breadcrumb.length - 1].component;
@@ -17,6 +28,40 @@ const Header = (props: IHeaderProps) => {
   const isInArray = Array.isArray(selectedParent);
 
   const { isVisible, toggleToast, setIsVisible } = useToast();
+  const [y, setY] = useState(window.scrollY);
+  const [scrollDown, setScrollDown] = useState(false);
+
+  const handleNavigation = useCallback(
+    (e: Event) => {
+      const window = e.currentTarget as Window;
+      const height = headerRef.current ? headerRef.current.offsetHeight + headerRef.current.offsetTop : 0;
+      if (isInArray && y > window.scrollY) {
+        setHeaderHeight(height);
+        setScrollDown(false);
+      } else if (y > height && y < window.scrollY) {
+        setHeaderHeight(0);
+        setScrollDown(true);
+      }
+      setY(window.scrollY);
+    },
+    [y, headerRef, setHeaderHeight, isInArray]
+  );
+
+  useEffect(() => {
+    setY(window.scrollY);
+    window.addEventListener("scroll", handleNavigation);
+    return () => {
+      window.removeEventListener("scroll", handleNavigation);
+    };
+  }, [handleNavigation]);
+
+  useEffect(() => {
+    if (headerRef.current) {
+      const height = headerRef.current.offsetHeight + headerRef.current.offsetTop;
+      setHeaderHeight(height);
+      window.scrollTo(0, 0);
+    }
+  }, [headerRef, breadcrumb, setHeaderHeight]);
 
   const removeItem = () => {
     setSelectedContent(parentID);
@@ -58,19 +103,19 @@ const Header = (props: IHeaderProps) => {
   menuOptions = isModule ? [...menuOptions, copyOpt] : menuOptions;
 
   return (
-    <>
-      <S.HeaderWrapper data-testid="header-config-wrapper">
+    <S.Wrapper scrollDown={scrollDown || !hasStickyHeader}>
+      <S.HeaderWrapper data-testid="header-config-wrapper" ref={headerRef}>
         <S.Title>{title}</S.Title>
         <Breadcrumb breadcrumb={breadcrumb} setSelectedContent={setSelectedContent} />
         {isInArray && <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />}
       </S.HeaderWrapper>
       {isVisible && <Toast message="1 module copied to clipboard" setIsVisible={setIsVisible} />}
-    </>
+    </S.Wrapper>
   );
 };
 
 export interface IHeaderProps {
-  schema: any;
+  schema: ISchema;
   actions: {
     deleteModuleAction: (editorID: number[], key?: string) => void;
     duplicateModuleAction: (editorID: number[], key?: string) => number;
@@ -80,6 +125,9 @@ export interface IHeaderProps {
   selectedParent: any;
   activatedModules: string[];
   setSelectedContent(editorID: number): void;
+  headerRef: React.RefObject<HTMLDivElement>;
+  setHeaderHeight(height: number): void;
+  hasStickyHeader: boolean;
 }
 
 export default memo(Header);

package/src/components/ConfigPanel/Header/style.tsx

@@ -1,6 +1,14 @@
 import styled from "styled-components";
 import { ActionMenu } from "@ax/components";
 
+const Wrapper = styled.div<{ scrollDown: boolean }>`
+  padding-top: ${(p) => p.theme.spacing.m};
+  background-color: ${(p) => p.theme.color.uiBackground01};
+  position: ${(p) => (p.scrollDown ? "relative" : "sticky")};
+  top: ${(p) => (p.scrollDown ? "0" : "63px")};
+  z-index: 3;
+`;
+
 const HeaderWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -19,4 +27,4 @@ const StyledActionMenu = styled(ActionMenu)`
   top: 0;
 `;
 
-export { HeaderWrapper, Title, StyledActionMenu };
+export { Wrapper, HeaderWrapper, Title, StyledActionMenu };

package/src/components/ConfigPanel/NavigationForm/Field/index.tsx

@@ -93,10 +93,10 @@ const Field = (props: IProps) => {
 
   const handleReplace = (option: any) => {
     const optionID = option.isDefault ? null : option.id;
-    updateEditorContent(pageEditorID, type, optionID);
+    type && updateEditorContent(pageEditorID, type, optionID);
   };
 
-  const handleRemove = () => removeNavigationFromPage(type);
+  const handleRemove = () => type && removeNavigationFromPage(type);
 
   const actionMenuOptions = [
     {
@@ -137,7 +137,7 @@ const Field = (props: IProps) => {
 };
 
 export interface IField {
-  type: string;
+  type?: string;
   theme: string;
 }
 

package/src/components/ConfigPanel/NavigationForm/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { NoteField } from "@ax/components";
+import { ISchema } from "@ax/types";
 import Field from "./Field";
 
 import * as S from "./style";
@@ -24,7 +25,7 @@ const NavigationForm = (props: INavigationFormProps): JSX.Element => {
 };
 
 export interface INavigationFormProps {
-  schema: any;
+  schema: ISchema;
   theme: string;
 }
 

package/src/components/ConfigPanel/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import { isEmptyObj } from "@ax/helpers";
 import { Loading } from "@ax/components";
@@ -39,6 +39,8 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
   } = props;
 
   const wrapperRef = useRef<HTMLDivElement>(null);
+  const headerRef = useRef<HTMLDivElement>(null);
+  const [headerHeight, setHeaderHeight] = useState<number>(0);
 
   useEffect(() => {
     if (lastElementAddedId && wrapperRef.current) {
@@ -50,9 +52,11 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
   if (isLoading || isEmptyObj(schema)) {
     return <Loading />;
   }
-  const showNavigationForm = navigationModulesTypes.includes(schema.type) && isPage;
+  const showNavigationForm = schema.type !== undefined && navigationModulesTypes.includes(schema.type) && isPage;
   const isGlobalPageNotEditable = isGlobal && isPage && !isEditable;
 
+  const hasStickyHeader = !isReadOnly && !isGlobalPageNotEditable && !showNavigationForm;
+
   const getForm = () => {
     if (isReadOnly) {
       return <PreviewForm setSelectedTab={setSelectedTab} selectedTab={selectedTab} userEditing={userEditing} />;
@@ -86,6 +90,7 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
           header={header}
           footer={footer}
           isEditLive={isEditLive}
+          headerHeight={headerHeight}
         />
       );
     }
@@ -100,6 +105,9 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
         selectedParent={selectedParent}
         activatedModules={activatedModules}
         setSelectedContent={setSelectedContent}
+        headerRef={headerRef}
+        setHeaderHeight={setHeaderHeight}
+        hasStickyHeader={hasStickyHeader}
       />
       {getForm()}
     </S.Wrapper>

package/src/components/EmptyState/style.tsx

@@ -11,11 +11,11 @@ const Wrapper = styled.div`
 
 const IconWrapper = styled.div`
   position: relative;
-  margin-bottom: ${p => p.theme.spacing.m};
-  background-color: ${p => p.theme.colors.uiBackground03};
+  margin-bottom: ${(p) => p.theme.spacing.m};
+  background-color: ${(p) => p.theme.colors.uiBackground03};
   border-radius: 50%;
-  width: ${p => p.theme.spacing.xl};
-  height: ${p => p.theme.spacing.xl};
+  width: ${(p) => p.theme.spacing.xl};
+  height: ${(p) => p.theme.spacing.xl};
   svg {
     position: absolute;
     top: 50%;
@@ -25,18 +25,18 @@ const IconWrapper = styled.div`
 `;
 
 const Title = styled.div`
-  ${p => p.theme.textStyle.headingS};
+  ${(p) => p.theme.textStyle.headingS};
   color: ${(p) => p.theme.color.textHighEmphasis};
-  margin-bottom: ${p => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
 `;
 
 const Text = styled.div`
-  ${p => p.theme.textStyle.uiM};
+  ${(p) => p.theme.textStyle.uiM};
   color: ${(p) => p.theme.color.textMediumEmphasis};
-  margin-bottom: ${p => p.theme.spacing.m};
+  margin-bottom: ${(p) => p.theme.spacing.m};
   text-align: center;
 `;
 
 const ActionWrapper = styled.div``;
 
-export { Wrapper, IconWrapper, Title, Text, ActionWrapper }
+export { Wrapper, IconWrapper, Title, Text, ActionWrapper };

package/src/components/ErrorToast/index.tsx

@@ -2,15 +2,14 @@ import React, { forwardRef } from "react";
 
 import * as S from "./style";
 
-const ErrorToast = (props: IProps, ref: any) => {
-  const { size } = props;
-
-  return <S.ErrorWrapper id="error" data-testid="error-wrapper" size={size} ref={ref} />;
+const ErrorToast = (props: IProps) => {
+  return <S.ErrorWrapper id="error" data-testid="error-wrapper" {...props} />;
 };
 
 export interface IProps {
   size?: string;
   ref?: any;
+  fixed?: boolean;
 }
 
 export default forwardRef(ErrorToast);

package/src/components/ErrorToast/style.tsx

@@ -1,17 +1,16 @@
 import styled from "styled-components";
 
-
-const ErrorWrapper = styled.div<{ size?: string}>`
-  position: ${p => p.size ? "absolute" : "initial"};
-  top: 0;
-  left: ${p => {
-    switch(p.size) {
+const ErrorWrapper = styled.div<{ size?: string; fixed?: boolean }>`
+  position: ${(p) => (p.fixed ? "fixed" : p.size ? "absolute" : "sticky")};
+  top: ${(p) => (p.fixed ? p.theme.spacing.xl : "0")};
+  left: ${(p) => {
+    switch (p.size) {
       case "l":
         return 0;
       case "m":
-        return p => `calc(${p.theme.spacing.m} * 3 + ${p.theme.spacing.s})`;
+        return (p) => `calc(${p.theme.spacing.m} * 3 + ${p.theme.spacing.s})`;
       case "s":
-        return p => `calc(${p.theme.spacing.m} * 3 + ${p.theme.spacing.s} + (${p.theme.spacing.m} * 10))`;
+        return (p) => `calc(${p.theme.spacing.m} * 3 + ${p.theme.spacing.s} + (${p.theme.spacing.m} * 10))`;
       default:
         return 0;
     }
@@ -20,6 +19,4 @@ const ErrorWrapper = styled.div<{ size?: string}>`
   z-index: 1100;
 `;
 
-export {
-  ErrorWrapper
-};
+export { ErrorWrapper };

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

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { v4 as uuidv4 } from "uuid";
 
 import { Button, FieldsDivider } from "@ax/components";
@@ -19,6 +19,10 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
   const [items, setItems] = useState(initialValueMapped);
   const [isOpen, setIsOpen] = useState<number | null>(null);
 
+  useEffect(() => {
+    setItems(value);
+  }, [value]);
+
   const handleClick = () => {
     const newItems = [...items, { id: uuidv4() }];
     setItems(newItems);

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

@@ -55,6 +55,10 @@ export const EditorWrapper = styled.div<{ error: boolean | undefined; disabled?:
       .fr-btn-grp {
         margin: 0 10px;
       }
+
+      .fr-popup.fr-desktop.fr-active {
+        margin-left: -70px;
+      }
     }
     .fr-second-toolbar {
       border-color: ${(p) =>

package/src/components/Image/index.tsx

@@ -19,7 +19,7 @@ const Image = (props: ICloudinaryImageProps | GriddoImageCommonProps) => {
   if (isCloudinary(url)) {
     const cloudinaryProps = props as ICloudinaryImageProps;
     const cloudinaryUrl = createCloudinaryUrl({ props: cloudinaryProps });
-    return <img src={cloudinaryUrl} data-testid="image-wrapper" />;
+    return <img src={cloudinaryUrl} alt={cloudinaryProps.alt} data-testid="image-wrapper" />;
   } else {
     const griddoProps = { ...DAM_DEFAULTS, ...props } as GriddoImageCommonProps;
     return <GriddoImage {...griddoProps} />;

package/src/components/ResizePanel/style.tsx

@@ -14,7 +14,7 @@ export const LeftPanel = styled.section`
 export const RightPanel = styled.section<{ width: number }>`
   display: flex;
   position: relative;
-  padding: ${(p) => p.theme.spacing.m};
+  padding: ${(p) => `0 ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
   flex-shrink: 0;
   width: ${(p) => p.width}px;
   min-width: 344px;

package/src/containers/App/reducer.tsx

@@ -29,8 +29,8 @@ export interface IAppState {
   hasAnimation: boolean;
 }
 export interface IError {
-  code?: any;
-  text: any;
+  code?: number;
+  text: string;
   btnText?: string | undefined;
   actionsBelow?: boolean | undefined;
   subErrors?: any[];

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

@@ -52,7 +52,6 @@ import {
   SET_SELECTED_PARENT,
   SET_COPY_MODULE,
   SET_NAV_PAGES,
-  RESET_DEFAULTS_STORE,
 } from "./constants";
 
 import {
@@ -68,7 +67,6 @@ import {
   ISetSelectedParent,
   ISetCopyModule,
   ISetNavPages,
-  IResetDefaultsStore,
 } from "./interfaces";
 
 const { setIsLoading } = appActions;
@@ -137,10 +135,6 @@ function setNavPages(navigationPages: INavPages): ISetNavPages {
   return { type: SET_NAV_PAGES, payload: { navigationPages } };
 }
 
-function resetDefaultsStore(): IResetDefaultsStore {
-  return { type: RESET_DEFAULTS_STORE };
-}
-
 // API RELATED FUNCTIONS
 
 function getHeaders(params: any): (dispatch: Dispatch, getState: any) => Promise<void> {
@@ -833,9 +827,19 @@ function setSelectedTab(tab: string): (dispatch: Dispatch) => Promise<void> {
 function resetDefaultsValues(): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
     try {
-      dispatch(resetDefaultsStore());
+      dispatch(setEditorContent(null));
+      dispatch(setBreadcrumb([]));
+      dispatch(setSchema({}));
+      dispatch(setSelectedDefaultContent({}));
+      dispatch(setSelectedEditorID(0));
+      dispatch(setTab("content"));
+      dispatch(setHeader(null));
+      dispatch(setFooter(null));
+      dispatch(setCurrentNavigationLanguages([]));
+      dispatch(setIsNewTranslation(false));
+      dispatch(setCurrentDefaultsContent([]));
     } catch (e) {
-      console.log("Error", e);
+      console.log("Error", e); //TODO
     }
   };
 }

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

@@ -16,6 +16,5 @@ export const SET_CURRENT_NAVIGATION_LANGUAGES = `${NAME}/SET_CURRENT_NAVIGATION_
 export const SET_IS_NEW_TRANSLATION = `${NAME}/SET_IS_NEW_TRANSLATION`;
 export const SET_COPY_MODULE = `${NAME}/SET_COPY_MODULE`;
 export const SET_NAV_PAGES = `${NAME}/SET_NAV_PAGES`;
-export const RESET_DEFAULTS_STORE = `${NAME}/RESET_DEFAULTS_STORE`;
 
 export const ITEMS_PER_PAGE = 50;

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

@@ -15,7 +15,6 @@ import {
   SET_SELECTED_PARENT,
   SET_COPY_MODULE,
   SET_NAV_PAGES,
-  RESET_DEFAULTS_STORE,
 } from "./constants";
 
 export interface ISetEditorContent {
@@ -93,10 +92,6 @@ export interface ISetNavPages {
   payload: { navigationPages: INavPages };
 }
 
-export interface IResetDefaultsStore {
-  type: typeof RESET_DEFAULTS_STORE;
-}
-
 export type NavigationActionsCreators = ISetEditorContent &
   ISetBreadcrumb &
   ISetSchema &

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

@@ -17,7 +17,6 @@ import {
   SET_SELECTED_PARENT,
   SET_COPY_MODULE,
   SET_NAV_PAGES,
-  RESET_DEFAULTS_STORE,
 } from "./constants";
 import { NavigationActionsCreators } from "./interfaces";
 
@@ -80,8 +79,6 @@ export function reducer(state = initialState, action: any): INavigationState {
     case SET_COPY_MODULE:
     case SET_NAV_PAGES:
       return { ...state, ...action.payload };
-    case RESET_DEFAULTS_STORE:
-      return { ...initialState };
     default:
       return state;
   }

package/src/containers/PageEditor/actions.tsx

@@ -1133,7 +1133,10 @@ function updateBreadcrumb(editorID: number): any {
     const navigationIds = [header?.editorID, footer?.editorID];
     if (navigationIds.includes(editorID)) {
       const rootBreadcrumb = { editorID: 0, displayName: "Page", component: "Page" };
-      newBreadcrumb.unshift(rootBreadcrumb);
+      const rootExists = newBreadcrumb.some(
+        (breadcrumb: { editorID: number }) => breadcrumb.editorID === rootBreadcrumb.editorID
+      );
+      !rootExists && newBreadcrumb.unshift(rootBreadcrumb);
     }
 
     dispatch(setBreadcrumb(newBreadcrumb));

package/src/containers/PageEditor/reducer.tsx

@@ -106,7 +106,7 @@ export function reducer(state = initialState, action: any): IPageEditorState {
     case SET_LAST_TIMEOUT:
       return { ...state, ...action.payload };
     case RESET_PAGE_EDITOR_STORE:
-      return { ...initialState };
+      return { ...initialState, moduleCopy: state.moduleCopy };
     default:
       return state;
   }

package/src/modules/GlobalEditor/index.tsx

@@ -481,7 +481,7 @@ const GlobalEditor = (props: IProps) => {
                 />
               </S.NotificationWrapper>
             )}
-            <ErrorToast size="l" />
+            <ErrorToast size="l" fixed />
             <S.Content>
               <Editor
                 isGlobal={true}

package/src/modules/GlobalEditor/style.tsx

@@ -11,7 +11,7 @@ const NotificationWrapper = styled.div`
   top: ${(p) => `calc(${p.theme.spacing.s} * 4)`};
   left: 0;
   right: 0;
-  z-index: 3;
+  z-index: 4;
 `;
 
 const ModalContent = styled.div`

package/src/modules/PageEditor/index.tsx

@@ -544,7 +544,7 @@ const PageEditor = (props: IProps) => {
                 />
               </S.NotificationWrapper>
             )}
-            <ErrorToast size="l" />
+            <ErrorToast size="l" fixed />
             <S.Content>
               <Editor
                 isTemplateActivated={isTemplateActivated}

package/src/modules/PageEditor/style.tsx

@@ -11,7 +11,7 @@ const NotificationWrapper = styled.div`
   top: ${(p) => `calc(${p.theme.spacing.s} * 4)`};
   left: 0;
   right: 0;
-  z-index: 2;
+  z-index: 4;
 `;
 
 const ModalContent = styled.div`

package/src/modules/Sites/SitesList/GridView/GridSiteItem/style.tsx

@@ -54,5 +54,4 @@ const ModalContent = styled.div`
   }
 `;
 
-
 export { SiteWrapper, Wrapper, Title, IconsWrapper, StyledActionMenu, ModalContent };

package/src/modules/Sites/SitesList/style.tsx

@@ -154,9 +154,11 @@ const EmptyStateWrapper = styled.div`
 `;
 
 const ImageWrapper = styled.div<{ borderRadius?: boolean }>`
+  height: 199px;
   img {
     border-radius: ${(p) => (p.borderRadius ? p.theme.spacing.xs : 0)};
     object-fit: cover;
+    height: 100%;
   }
 `;