@griddo/ax 1.75.158 → 1.75.159

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.75.158",
+  "version": "1.75.159",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -230,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6a2f4572bd0e693a0cc2d5b46b68f1ec3448ef89"
+  "gitHead": "6063ff6bcdbd5673c1eba467d6f0898538069ae4"
 }

package/public/manifest.json

@@ -1,6 +1,6 @@
 {
-  "short_name": "Thesaurus AX",
-  "name": "Thesaurus AX",
+  "short_name": "Griddo AX",
+  "name": "Griddo AX",
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",

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

@@ -99,6 +99,11 @@ const initialStore = {
   },
   dataPacks: {
     templates: [],
+    configFormData: {
+      defaultParent: null,
+      indexDefault: true,
+      modifiableOnPage: false,
+    },
   },
   menu: {
     savedMenus: null,

package/src/__tests__/components/ConfigPanel/NavigationForm/Field/Field.test.tsx

@@ -22,12 +22,11 @@ const initialStore = {
   pageEditor: {
     selectedContent: {
       editorID: 0,
-      title: "selected content field",
-      id: 1,
-      component: "module",
+      title: "Header name azul",
+      id: 144,
+      component: "header",
     },
     editorContent: {
-      module: 0,
       editorID: 0,
       parentEditorID: null,
       setAsHome: false,
@@ -38,11 +37,89 @@ const initialStore = {
   navigation: {
     currentDefaultsContent: [
       {
-        type: "module",
-        id: 2,
+        component: "Header",
+        type: "header",
+        title: "Header name azul",
+        setAsDefault: true,
+        id: 144,
+        isDefault: true,
+        thumbnail: {
+          id: 1255,
+          name: "navigation-thumbnail.png",
+          title: "Thumbnail for Header name azul",
+          description: "",
+          alt: "",
+          tags: [],
+          url: "https://images.dev.griddo.io/navigation-thumbnail_186",
+          thumb: "https://images.dev.griddo.io/w/215/h/161/navigation-thumbnail_186",
+          publicId: "thesaurus-dev/navigation-thumbnail_f1622a50-f703-41ae-b5ed-6a5b0212bb4b",
+          damId: "navigation-thumbnail_186",
+          published: "2023-01-10T10:10:55.732Z",
+          size: 4365,
+          width: 526,
+          height: 120,
+          orientation: "L",
+          site: 81,
+        },
+        site: 81,
+      },
+      {
+        component: "Header",
+        type: "header",
+        title: "Secondary Header",
+        setAsDefault: false,
+        id: 165,
+        isDefault: false,
+        thumbnail: {
+          id: 922,
+          name: ".png",
+          title: "Thumbnail for Secondary Header",
+          description: "",
+          alt: "",
+          tags: [],
+          url: "https://images.dev.griddo.io/navigation-thumbnail_28",
+          thumb: "https://images.dev.griddo.io/w/215/h/161/navigation-thumbnail_28",
+          publicId: "thesaurus-dev/navigation-thumbnail_f73c78ec-af02-47fb-82aa-0727c44e47e3",
+          damId: "navigation-thumbnail_28",
+          published: "2022-06-08T14:07:11.022Z",
+          size: 3150,
+          width: 528,
+          height: 92,
+          orientation: "L",
+          site: 81,
+        },
+        site: 81,
+      },
+      {
+        component: "Footer",
+        type: "footer",
+        title: "Footer name",
+        setAsDefault: true,
+        id: 65,
+        isDefault: true,
+        site: 81,
+        thumbnail: null,
+      },
+      {
+        component: "Footer",
+        type: "footer",
+        title: "Footer name 2",
+        setAsDefault: false,
+        id: 83,
+        site: 81,
+        thumbnail: null,
+        isDefault: false,
       },
     ],
   },
+  dataPacks: {
+    configFormData: {
+      defaultParent: null,
+      indexDefault: true,
+      modifiableOnPage: false,
+      templates: {},
+    },
+  },
 };
 
 const store = mockStore(initialStore);
@@ -51,12 +128,11 @@ const defaultFieldProps = mock<IField>();
 const defaultStateProps = mock<IStateProps>();
 const defaultDispatchProps = mock<IDispatchProps>();
 
-defaultFieldProps.type = "module";
-
 const defaultProps = { ...defaultFieldProps, ...defaultStateProps, ...defaultDispatchProps };
 
 describe("Field component rendering", () => {
   it("should render component", () => {
+    defaultProps.type = "header";
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <Field {...defaultProps} />
@@ -64,11 +140,32 @@ describe("Field component rendering", () => {
       { store }
     );
 
-    const componentWrapper = screen.getByText(/selected content field/i);
+    const componentWrapper = screen.getByText(/Header name azul/i);
     expect(componentWrapper).toBeInTheDocument();
   });
 
-  it("should render SideModal because has multiple options", () => {
+  it("should render SideModal with 1 header options because 1 is selected", () => {
+    defaultProps.type = "header";
+    render(
+      <ThemeProvider theme={parseTheme(globalTheme)}>
+        <Field {...defaultProps} />
+      </ThemeProvider>,
+      { store }
+    );
+
+    const moreInfo = screen.getByTestId("more-info-button");
+    fireEvent.click(moreInfo);
+    const listItem = screen.getAllByTestId("action-menu-item");
+    expect(listItem).toHaveLength(2);
+    fireEvent.click(listItem[0]);
+    const sideModalWrapper = screen.getByTestId("side-modal");
+    expect(sideModalWrapper).toBeTruthy();
+    const sideModalOptions = screen.getAllByTestId("side-modal-option");
+    expect(sideModalOptions).toHaveLength(1);
+  });
+
+  it("should render SideModal with 2 footer option because none is selected", () => {
+    defaultProps.type = "footer";
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <Field {...defaultProps} />
@@ -83,9 +180,12 @@ describe("Field component rendering", () => {
     fireEvent.click(listItem[0]);
     const sideModalWrapper = screen.getByTestId("side-modal");
     expect(sideModalWrapper).toBeTruthy();
+    const sideModalOptions = screen.getAllByTestId("side-modal-option");
+    expect(sideModalOptions).toHaveLength(2);
   });
 
   it("should trigger the handleRemove action", () => {
+    defaultProps.type = "header";
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <Field {...defaultProps} />
@@ -99,7 +199,7 @@ describe("Field component rendering", () => {
     expect(listItem).toHaveLength(2);
     fireEvent.click(listItem[1]);
     expect(store.getActions()).toContainEqual({
-      payload: { editorContent: initialStore.pageEditor.editorContent },
+      payload: { editorContent: { ...initialStore.pageEditor.editorContent, header: 0 } },
       type: "pageEditor/SET_EDITOR_CONTENT",
     });
   });

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 
 import { ThemeProvider } from "styled-components";
-import { render, cleanup, screen, fireEvent } from "../../../../../config/jest/test-utils";
+import { render, cleanup, screen } from "../../../../../config/jest/test-utils";
 import { mock } from "jest-mock-extended";
 import configureStore from "redux-mock-store";
 import "@testing-library/jest-dom";
@@ -43,6 +43,13 @@ const initialStore = {
       },
     ],
   },
+  dataPacks: {
+    configFormData: {
+      defaultParent: null,
+      indexDefault: true,
+      modifiableOnPage: false,
+    },
+  },
 };
 
 const store = mockStore(initialStore);

package/src/__tests__/components/SideModal/SideModal.test.tsx

@@ -85,24 +85,7 @@ describe("SideModal component rendering", () => {
     expect(closeButton).toBeTruthy();
   });
 
-  it("should render default check if setDefault prop exists", () => {
-    defaultProps.setDefault = {
-      action: jest.fn(),
-      checked: false,
-      title: "Set the default header",
-    };
-    render(
-      <ThemeProvider theme={parseTheme(globalTheme)}>
-        <SideModal {...defaultProps} />
-      </ThemeProvider>
-    );
-
-    const checkfield = screen.getByTestId("check-field-wrapper");
-    expect(checkfield).toBeTruthy();
-  });
-
   it("should render options", () => {
-    defaultProps.setDefault = undefined;
     render(
       <ThemeProvider theme={parseTheme(globalTheme)}>
         <SideModal {...defaultProps} />

package/src/components/Browser/index.tsx

@@ -188,7 +188,7 @@ export interface IBrowserProps {
   siteID?: number;
   isPreview?: boolean;
   showIframe?: boolean;
-  browserRef?: any;
+  browserRef?: React.RefObject<HTMLDivElement>;
   actions?: {
     setSelectedContentAction: any;
     deleteModuleAction(editorID: number): void;

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

@@ -8,10 +8,31 @@ import { IRootState } from "@ax/types";
 import * as S from "./style";
 
 const Field = (props: IProps) => {
-  const { type, defaults, updateEditorContent, selectedContent, theme, removeNavigationFromPage } = props;
+  const {
+    type,
+    defaults,
+    updateEditorContent,
+    selectedContent,
+    theme,
+    removeNavigationFromPage,
+    template,
+    configFormData,
+  } = props;
 
   const { isOpen, toggleModal } = useModal();
-  const isDefault = selectedContent.setAsDefault;
+
+  const defaultSiteHeader = defaults.find(
+    (component: any) => component.setAsDefault && component.type === "header"
+  )?.id;
+  const defaultSiteFooter = defaults.find(
+    (component: any) => component.setAsDefault && component.type === "footer"
+  )?.id;
+
+  const { defaultHeader: defaultTemplateHeader, defaultFooter: defaultTemplateFooter } =
+    (configFormData.templates && configFormData.templates[template]) || {};
+
+  const defaultOption =
+    type === "header" ? defaultTemplateHeader || defaultSiteHeader : defaultTemplateFooter || defaultSiteFooter;
 
   const options = defaults.filter((component: any) => {
     const isCurrentType = component.type === type;
@@ -19,34 +40,63 @@ const Field = (props: IProps) => {
     return isCurrentType && isNotSelected;
   });
 
-  const hasMultipleOptions: boolean | undefined = options && options.length > 0;
+  const templateDefaultOption = options
+    .filter(
+      (option: any) =>
+        (type === "header" && option.id === defaultTemplateHeader) ||
+        (type === "footer" && option.id === defaultTemplateFooter)
+    )
+    .map((option: any) =>
+      option.id === defaultOption
+        ? { ...option, isDefault: true, tag: "template default" }
+        : { ...option, isDefault: false, tag: "template default" }
+    )?.[0];
+
+  const siteDefaultOption = options
+    .filter(
+      (option: any) =>
+        (type === "header" && option.id === defaultSiteHeader) || (type === "footer" && option.id === defaultSiteFooter)
+    )
+    .map((option: any) => {
+      const templateHasDefaultSiteHeader = type === "header" && defaultTemplateHeader === null;
+      const templateHasDefaultSiteFooter = type === "footer" && defaultTemplateFooter === null;
+
+      const tag = templateHasDefaultSiteHeader || templateHasDefaultSiteFooter ? "template default" : "site default";
+
+      const hasDefaultTemplateHeader = type === "header" && defaultTemplateHeader;
+      const hasDefaultTemplateFooter = type === "footer" && defaultTemplateFooter;
+
+      return option.id === defaultOption
+        ? {
+            ...option,
+            isDefault: true,
+            tag: hasDefaultTemplateHeader || hasDefaultTemplateFooter ? "" : tag,
+          }
+        : {
+            ...option,
+            isDefault: false,
+            tag: hasDefaultTemplateHeader || hasDefaultTemplateFooter ? "" : tag,
+          };
+    })?.[0];
+
+  const otherOptions = options.filter(
+    (option: any) => option.id !== templateDefaultOption?.id && option.id !== siteDefaultOption?.id
+  );
 
-  let filteredByDefaultOptions = options;
-  if (!isDefault && hasMultipleOptions) {
-    filteredByDefaultOptions = options.filter((component: any) => !component.setAsDefault);
-  }
+  let orderedOptions = siteDefaultOption ? [siteDefaultOption, ...otherOptions] : otherOptions;
+  orderedOptions = templateDefaultOption ? [templateDefaultOption, ...orderedOptions] : orderedOptions;
 
+  const hasMultipleOptions: boolean | undefined = options && options.length > 0;
   const optionsType = `${type}s`;
   const actionMenuIcon = "more";
   const pageEditorID = 0;
 
   const handleReplace = (option: any) => {
-    updateEditorContent(pageEditorID, type, option.id);
-  };
-
-  const handleRemove = () => {
-    removeNavigationFromPage(type);
+    const optionID = option.isDefault ? null : option.id;
+    updateEditorContent(pageEditorID, type, optionID);
   };
 
-  const setDefault = {
-    title: `Set the default ${type}`,
-    action: () => {
-      const option = defaults.find((component: any) => component.type === type && component.setAsDefault);
-      handleReplace(option);
-      toggleModal();
-    },
-    checked: selectedContent.setAsDefault,
-  };
+  const handleRemove = () => removeNavigationFromPage(type);
 
   const actionMenuOptions = [
     {
@@ -75,11 +125,10 @@ const Field = (props: IProps) => {
       {hasMultipleOptions && (
         <SideModal
           optionsType={optionsType}
-          whiteList={filteredByDefaultOptions}
+          whiteList={orderedOptions}
           handleClick={handleReplace}
           toggleModal={toggleModal}
           isOpen={isOpen}
-          setDefault={setDefault}
           theme={theme}
         />
       )}
@@ -95,6 +144,8 @@ export interface IField {
 export interface IStateProps {
   defaults: any;
   selectedContent: any;
+  template: string;
+  configFormData: any;
 }
 
 export interface IDispatchProps {
@@ -107,6 +158,8 @@ type IProps = IField & IStateProps & IDispatchProps;
 const mapStateToProps = (state: IRootState) => ({
   defaults: state.navigation.currentDefaultsContent,
   selectedContent: state.pageEditor.selectedContent,
+  template: state.pageEditor.template,
+  configFormData: state.dataPacks.configFormData,
 });
 
 const mapDispatchToProps = {

package/src/components/SideModal/SideModalOption/index.tsx

@@ -1,7 +1,9 @@
 import React, { memo } from "react";
 
-import * as S from "./style";
 import { getDisplayName, getThumbnailProps, filterImageText } from "@ax/helpers";
+import { Tag } from "@ax/components";
+
+import * as S from "./style";
 
 const getThumbnailData = (option: any, theme: string) => {
   option = filterImageText(option.component ? option.component : option);
@@ -26,10 +28,17 @@ const SideModalOption = (props: IProps) => {
     toggleModal();
   };
 
+  const defaultTag = option.tag ? (
+    <S.TagWrapper data-testid="side-modal-option-tag">
+      <Tag text={option.tag} type="square" />
+    </S.TagWrapper>
+  ) : null;
+
   return (
     <S.Item onClick={setOption} data-testid="side-modal-option">
       <S.Thumbnail data-testid="side-modal-option-img" {...thumbnailProps} />
       {label}
+      {defaultTag}
     </S.Item>
   );
 };

package/src/components/SideModal/SideModalOption/style.tsx

@@ -1,23 +1,29 @@
 import styled from "styled-components";
 
-export const Item = styled.li`
+const Item = styled.li`
   cursor: pointer;
-  padding: ${p => p.theme.spacing.xs};
-  padding-bottom: ${p => p.theme.spacing.s};
-  margin-bottom: ${p => p.theme.spacing.s};
-  box-shadow: ${p => p.theme.shadow.shadowS};
-  border-radius: ${p => p.theme.radii.s};
-  ${p => p.theme.textStyle.uiS};
-  background-color: ${p => p.theme.color.interactiveBackground};
+  padding: ${(p) => p.theme.spacing.xs};
+  padding-bottom: ${(p) => p.theme.spacing.s};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+  box-shadow: ${(p) => p.theme.shadow.shadowS};
+  border-radius: ${(p) => p.theme.radii.s};
+  ${(p) => p.theme.textStyle.uiS};
+  background-color: ${(p) => p.theme.color.interactiveBackground};
   &:hover {
-    background: ${p => p.theme.color.overlayHoverPrimary};
+    background: ${(p) => p.theme.color.overlayHoverPrimary};
   }
   &:focus {
-    background-color: ${p => p.theme.color.overlayFocusPrimary};
+    background-color: ${(p) => p.theme.color.overlayFocusPrimary};
   }
 `;
 
-export const Thumbnail = styled.img`
+const Thumbnail = styled.img`
   cursor: pointer;
-  padding-bottom: ${p => p.theme.spacing.s};
+  padding-bottom: ${(p) => p.theme.spacing.s};
 `;
+
+const TagWrapper = styled.div`
+  margin-top: ${(p) => p.theme.spacing.xs};
+`;
+
+export { Item, Thumbnail, TagWrapper };

package/src/components/SideModal/index.tsx

@@ -4,7 +4,7 @@ import { createPortal } from "react-dom";
 import { useHandleClickOutside } from "@ax/hooks";
 import { getDisplayName, filterByCategory } from "@ax/helpers";
 import SideModalOption from "@ax/components/SideModal/SideModalOption";
-import { CheckField, MenuItem, SearchField, IconAction } from "@ax/components";
+import { MenuItem, SearchField, IconAction } from "@ax/components";
 import { ModuleCategoryInfo } from "@ax/types";
 
 import * as S from "./style";
@@ -19,7 +19,6 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
     categories,
     handleClick,
     current,
-    setDefault,
     showSearch,
     theme,
   } = props;
@@ -158,17 +157,6 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
               </S.ButtonWrapper>
             )}
           </S.Header>
-          {setDefault && !setDefault.checked && (
-            <S.CheckFieldWrapper data-testid="check-field-wrapper">
-              <CheckField
-                name="setDefault"
-                value="setDefault"
-                title={setDefault.title}
-                onChange={setDefault.action}
-                checked={setDefault.checked}
-              />
-            </S.CheckFieldWrapper>
-          )}
           <S.ColumnsWrapper>
             {(filters || featuredFilters) && (
               <S.Content>
@@ -186,14 +174,13 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
 
 export interface ISideModalProps {
   isOpen: boolean;
-  whiteList: string[] | undefined;
+  whiteList?: string[];
   categories?: ModuleCategoryInfo[];
   optionsType: string;
   toggleModal: () => void;
   handleClick?: (moduleType: string) => void;
   componentOptions?: any;
   current?: any;
-  setDefault?: any;
   showSearch?: boolean;
   theme: string;
 }

package/src/components/SideModal/style.tsx

@@ -52,10 +52,6 @@ const Content = styled.div`
 
 const NavLink = styled.a``;
 
-const CheckFieldWrapper = styled.div`
-  padding: ${(p) => p.theme.spacing.m} ${(p) => p.theme.spacing.m} 0;
-`;
-
 const FeaturedWrapper = styled.div`
   border-bottom: 1px solid ${(p) => p.theme.colors.uiLine};
   padding-bottom: ${(p) => p.theme.spacing.xs};
@@ -79,7 +75,6 @@ export {
   Title,
   ColumnsWrapper,
   NavLink,
-  CheckFieldWrapper,
   FeaturedWrapper,
   SearchWrapper,
   Link,

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

@@ -24,7 +24,7 @@ import {
 
 import { appActions } from "@ax/containers/App";
 
-import { getFormData, getStateValues } from "./utils";
+import { getFormData, getStateValues, getImage } from "./utils";
 
 import {
   SET_EDITOR_CONTENT,
@@ -221,9 +221,11 @@ function getNavigationByType(type: string): (dispatch: Dispatch, getState: any)
   };
 }
 
-function createNavigation(image: File | null): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+function createNavigation(navHtml?: HTMLDivElement | null): (dispatch: Dispatch, getState: any) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
+      dispatch(appActions.setIsSaving(true));
+
       const {
         navigation: { editorContent, isNewTranslation },
         sites: { currentSiteInfo },
@@ -234,6 +236,11 @@ function createNavigation(image: File | null): (dispatch: Dispatch, getState: an
         delete editorContent.id;
       }
 
+      let image = null;
+      if (navHtml) {
+        image = await getImage(navHtml);
+      }
+
       const navigationValues = { ...editorContent, site: currentSiteInfo.id, language: lang.id };
       const cleanValues = removeEditorIds(navigationValues);
 
@@ -243,16 +250,20 @@ function createNavigation(image: File | null): (dispatch: Dispatch, getState: an
         const updatedContent = { ...editorContent, ...response };
         generateContent(updatedContent, dispatch, getState);
         dispatch(setIsNewTranslation(false));
+        dispatch(appActions.setIsSaving(false));
       };
 
       const responseActions = {
         handleSuccess: (response: any) => successAction(response),
-        handleError: (response: any) => appActions.handleError(response)(dispatch),
+        handleError: (response: any) => {
+          appActions.handleError(response)(dispatch);
+          dispatch(appActions.setIsSaving(false));
+        },
       };
 
       const callback = async () => navigation.createNavigation(form);
 
-      return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
+      return await handleRequest(callback, responseActions, [])(dispatch);
     } catch (e) {
       console.log(e);
       return false;
@@ -264,15 +275,22 @@ function updateNavigation(
   navID: number,
   data: any,
   fromEditor?: boolean,
-  image?: File | null
+  navHtml?: HTMLDivElement | null
 ): (dispatch: Dispatch, getState: any) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
+      dispatch(appActions.setIsSaving(true));
+
       const { isNewTranslation } = getStateValues(getState);
       if (isNewTranslation) {
         delete data.id;
       }
 
+      let image = null;
+      if (navHtml) {
+        image = await getImage(navHtml);
+      }
+
       const cleanValues = removeEditorIds(data);
 
       const form = getFormData(cleanValues, image);
@@ -283,10 +301,14 @@ function updateNavigation(
         } else {
           getNavigationByType(data.type)(dispatch, getState);
         }
+        dispatch(appActions.setIsSaving(false));
       };
       const responseActions = {
         handleSuccess: (response: any) => successAction(response),
-        handleError: (response: any) => appActions.handleError(response)(dispatch),
+        handleError: (response: any) => {
+          appActions.handleError(response)(dispatch);
+          dispatch(appActions.setIsSaving(false));
+        },
       };
 
       const callback = async () => navigation.updateNavigation(navID, form);

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

@@ -1,7 +1,4 @@
 import * as navigationActions from "./actions";
-import { navigationReducer } from "./reducer";
+import { navigationReducer } from "./reducer";
 
-export {
-  navigationActions,
-  navigationReducer
-};
+export { navigationActions, navigationReducer };

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

@@ -1,3 +1,5 @@
+import { toBlob } from "html-to-image";
+
 const getStateValues = (getState: any) => {
   const {
     sites: { currentSiteInfo },
@@ -42,4 +44,44 @@ const getFormData = (values: any, image?: File | null): FormData => {
   return form;
 };
 
-export { getStateValues, getFormData };
+const getImage = async (navHtml: HTMLDivElement): Promise<File | null> => {
+  const browserContent = navHtml.querySelector<HTMLElement>(".browser-content");
+
+  if (!browserContent) {
+    return null;
+  }
+
+  const { height, overflow } = getComputedStyle(browserContent);
+  browserContent.style.height = "auto";
+  browserContent.style.overflow = "visible";
+  const originalHeight = browserContent.clientHeight;
+
+  const elChildren = browserContent.querySelectorAll("*");
+  let maxAbsoluteElementHeight = 0;
+  [].forEach.call(elChildren, function (element: any) {
+    const isAbsolutePosition = getComputedStyle(element).position === "absolute";
+    const isMaxAbsolutePositionHeight = element.clientHeight > maxAbsoluteElementHeight;
+    if (isAbsolutePosition && isMaxAbsolutePositionHeight) {
+      maxAbsoluteElementHeight = element.clientHeight;
+    }
+  });
+  if (maxAbsoluteElementHeight) {
+    const actualHeight = originalHeight + maxAbsoluteElementHeight;
+    browserContent.style.height = `${actualHeight}px`;
+  }
+
+  return toBlob(browserContent, { quality: 0.95, pixelRatio: 0.5 })
+    .then((imageBlob) => {
+      return imageBlob && new File([imageBlob], "navigation-thumbnail.png", { type: "image/png" });
+    })
+    .finally(() => {
+      browserContent.style.height = height;
+      browserContent.style.overflow = overflow;
+    })
+    .catch((err) => {
+      //console.log(err);
+      return null;
+    });
+};
+
+export { getStateValues, getFormData, getImage };

package/src/containers/PageEditor/actions.tsx

@@ -197,9 +197,7 @@ function setTranslatedParent(): (dispatch: Dispatch, getState: any) => void {
         app: { lang },
         pageEditor: {
           selectedEditorID,
-          editorContent: {
-            editorContent: { parent, site, entity, language },
-          },
+          editorContent: { parent, site, entity, language },
         },
       } = getState();
 
@@ -227,9 +225,15 @@ function setTranslatedParent(): (dispatch: Dispatch, getState: any) => void {
 function createNewTranslation(isNewTranslation: boolean): (dispatch: Dispatch, getState: any) => void {
   return async (dispatch, getState) => {
     try {
+      const {
+        sites: { currentSiteInfo },
+      } = getState();
+
       dispatch(setIsNewTranslation(isNewTranslation));
       dispatch(setCurrentPageStatus("offline"));
-      await getSiteDefaults()(dispatch, getState);
+      if (currentSiteInfo) {
+        await getSiteDefaults()(dispatch, getState);
+      }
     } catch (e) {
       console.log(e); // TODO: capturar error bien
     }
@@ -385,7 +389,7 @@ function savePage(
         pageEditor: {
           selectedEditorID,
           isNewTranslation,
-          editorContent: { header, footer },
+          editorContent: { header, footer, templateConfig, template },
         },
         sites: { currentSiteInfo },
         app: { lang },
@@ -413,6 +417,18 @@ function savePage(
         delete values.id;
       }
 
+      /* remove header and footer if page should get the default  */
+      const { defaultHeader, defaultFooter } =
+        (templateConfig && templateConfig.templates && templateConfig.templates[template.templateType]) || {};
+
+      if (header && ((header.setAsDefault && !defaultHeader) || header.id === defaultHeader)) {
+        values["header"] = null;
+      }
+
+      if (footer && ((footer.setAsDefault && !defaultFooter) || footer.id === defaultFooter)) {
+        values["footer"] = null;
+      }
+
       const saveResponse =
         isNewPage || isNewTranslation || createDraft
           ? await pages.createPage(values)

package/src/containers/PageEditor/utils.tsx

@@ -70,19 +70,26 @@ const getPageNavigation = (
   const headers: any = defaultsContent.filter((content: any) => content.type === "header");
   const footers: any = defaultsContent.filter((content: any) => content.type === "footer");
 
+  const headerDefault = headers.find((content: any) => content.setAsDefault);
+  const footerDefault = footers.find((content: any) => content.setAsDefault);
+
   const header =
     headerID === 0
       ? headerID
       : headerID === undefined || headerID === null
-      ? headers.find((content: any) => content.setAsDefault)
-      : headers.find((content: any) => content.id === headerID);
+      ? headerDefault
+      : headers.find((content: any) =>
+          content.navigationLanguages.some((navLang: any) => navLang.navigationId === headerID)
+        ) || headerDefault;
 
   const footer =
     footerID === 0
-      ? headerID
+      ? footerID
       : footerID === undefined || footerID === null
-      ? footers.find((content: any) => content.setAsDefault)
-      : footers.find((content: any) => content.id === footerID);
+      ? footerDefault
+      : footers.find((content: any) =>
+          content.navigationLanguages.some((navLang: any) => navLang.navigationId === footerID)
+        ) || footerDefault;
 
   return { header, footer };
 };

package/src/containers/Settings/DataPacks/actions.tsx

@@ -203,7 +203,7 @@ function deleteSiteDataPack(
   };
 }
 
-function updateDataPack(dataPackID: string): (dispatch: Dispatch, getState: any) => Promise<void> {
+function updateDataPack(dataPackID: string): (dispatch: Dispatch, getState: any) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       const {
@@ -231,9 +231,10 @@ function updateDataPack(dataPackID: string): (dispatch: Dispatch, getState: any)
 
       const callback = async () => dataPack.updateDataPack(currentSiteID, dataPackID, configFormData);
 
-      await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
+      return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
     } catch (e) {
       console.log(e); // TODO: capturar error bien
+      return false;
     }
   };
 }

package/src/forms/errors.tsx

@@ -17,7 +17,7 @@ const ERRORS: Record<string, string> = {
   ERR016: "This field is still filled with mockup data.",
   ERR017: "The URL is already in use.",
   ERR018: "No H1 in this page.",
-  ERR019: "Not enough entries of {value} published",
+  ERR019: "Not enough entries published. {value} items required",
   ERR020: "Sorry, email or password are not correct. ",
   ERR021: "Sorry, we need some info to let you in. Check the fields below.",
   ERR022: "Sorry, this page has not been published. We are working to solve it.",

package/src/forms/validators.tsx

@@ -128,6 +128,10 @@ const VALIDATORS = {
     const isValid = pass1 === pass2;
     return { isValid, errorCode: "ERR041" };
   },
+  minItems: (val: any, len: number): IError => {
+    const isValid = val.mode === "auto" || (val.fixed && val.fixed.length >= len);
+    return { isValid, errorCode: "ERR019" };
+  },
 };
 
 const getErrorMessage = (key: string, val: number | string | null): string => {
@@ -269,6 +273,7 @@ const getValidationErrors = (
 
     let fieldValidators: Record<string, unknown> = field.maxValue ? { maxValue: field.maxValue } : {};
     fieldValidators = field.minValue ? { ...fieldValidators, minValue: field.minValue } : fieldValidators;
+    fieldValidators = field.minItems ? { ...fieldValidators, minItems: field.minItems } : fieldValidators;
 
     if (hasProps(field, ["validators"]) || Object.keys(fieldValidators).length) {
       const allValidators = { ...field.validators, ...fieldValidators };

package/src/hooks/forms.tsx

@@ -77,10 +77,10 @@ const useIsDirty = (
     return false;
   };
 
-  const resetDirty = () => {
+  const resetDirty = (reseting = true) => {
     setIsDirty(false);
     setIsSaved(true);
-    setIsResetting(true);
+    reseting && setIsResetting(true);
   };
 
   useEffect(() => {

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

@@ -36,7 +36,7 @@ const DefaultsBrowser = (props: IProps) => {
 
 interface IDefaultsBrowserProps {
   actions: any;
-  browserRef?: any;
+  browserRef?: React.RefObject<HTMLDivElement>;
 }
 
 interface IDefaultsBrowserStateProps {

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

@@ -79,7 +79,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;
-  browserRef?: any;
+  browserRef?: React.RefObject<HTMLDivElement>;
 }
 
 type IProps = IEditorStateProps & IPageBrowserDispatchProps;

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

@@ -11,7 +11,6 @@ import { ErrorToast, Loading, MainWrapper, Modal } from "@ax/components";
 import Editor from "./Editor";
 
 import * as S from "./style";
-import { getImage } from "./utils";
 
 const DefaultsEditor = (props: IProps) => {
   const {
@@ -41,7 +40,7 @@ const DefaultsEditor = (props: IProps) => {
   const isNew = !editorContent?.id;
 
   const isSetAsDefault = editorContent && editorContent.setAsDefault;
-  const browserRef = useRef<any>(null);
+  const browserRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     getValues();
@@ -67,12 +66,10 @@ const DefaultsEditor = (props: IProps) => {
   }, [currentSiteInfo, editorContent?.id]);
 
   const save = async () => {
-    const image = await getImage(browserRef);
-
     const isSaved =
       isNew || isNewTranslation
-        ? await createNavigation(image)
-        : await updateNavigation(editorContent.id, editorContent, true, image);
+        ? await createNavigation(browserRef?.current)
+        : await updateNavigation(editorContent.id, editorContent, true, browserRef?.current);
     if (isSaved) resetDirty();
   };
 
@@ -204,8 +201,8 @@ interface IDispatchProps {
   setHistoryPush(path: string, isEditor?: boolean): void;
   setLanguage?(lang: { locale: string; id: number | null }): void;
   getValues(): void;
-  createNavigation(image: File | null): Promise<boolean>;
-  updateNavigation(navID: number, data: any, fromEditor?: boolean, image?: File | null): Promise<boolean>;
+  createNavigation(navHtml?: HTMLDivElement | null): Promise<boolean>;
+  updateNavigation(navID: number, data: any, fromEditor?: boolean, navHtml?: HTMLDivElement | null): Promise<boolean>;
   createTranslation(isNewTranslation: boolean): void;
   setHeader(id: number | null): void;
   setFooter(id: number | null): void;

package/src/modules/PageEditor/index.tsx

@@ -126,6 +126,7 @@ const PageEditor = (props: IProps) => {
 
     const allPageVersions = pageLanguages.map((lang: IPageLanguage) => lang.pageId);
     const isDeleted = deleteAllVersions ? await deleteBulk(allPageVersions) : await deletePage();
+
     toggleDeleteModal();
     if (isDeleted) {
       setRoute(path);
@@ -149,7 +150,14 @@ const PageEditor = (props: IProps) => {
         }
       };
 
-      pageID ? updatePageStatus([pageID], pageStatus.UPLOAD_PENDING) : await handleSavePage();
+      const handleUpdatePageStatus = async () => {
+        const isUpdated = await updatePageStatus([pageID], pageStatus.UPLOAD_PENDING);
+        if (isUpdated) {
+          resetDirty();
+        }
+      };
+
+      pageID ? await handleUpdatePageStatus() : await handleSavePage();
     } else {
       setNotification({ text: errorNotificationText, type: "error" });
     }

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/ConfigPanel/Field/index.tsx

@@ -19,11 +19,27 @@ const Field = (props: IField): JSX.Element => {
     theme,
   } = props;
   const { isOpen, toggleModal } = useModal();
+
+  const optionsType = `${type}s`;
+
+  const defaultSiteHeader = defaults.find(
+    (component: any) => component.setAsDefault && component.type === "header"
+  )?.id;
+  const defaultSiteFooter = defaults.find(
+    (component: any) => component.setAsDefault && component.type === "footer"
+  )?.id;
+
+  const defaultOption = type === "header" ? defaultSiteHeader : defaultSiteFooter;
+
   const options = defaults.filter(
-    (component: any) =>
-      component.type === type && content[component.type]?.id !== component.id && !component.setAsDefault
+    (component: any) => component.type === type && content[component.type]?.id !== component.id
+  );
+
+  const mappedOptions = options.map((option: any) =>
+    option.id === defaultOption
+      ? { ...option, isDefault: true, tag: "site default" }
+      : { ...option, isDefault: false, tag: null }
   );
-  const optionsType = `${type}s`;
 
   const actionMenuOptions = [
     {
@@ -36,19 +52,20 @@ const Field = (props: IField): JSX.Element => {
   const actionMenuIcon = "more";
 
   const handleReplace = (option: any) => {
+    const optionID = option.isDefault ? null : option.id;
     const configFormData = {
       ...dataPackConfigFormData,
       templates: {
         ...dataPackConfigFormData.templates,
         [template]: {
           ...(!!dataPackConfigFormData.templates && dataPackConfigFormData.templates[template]),
-          ...(type === "header" && { defaultHeader: option.id }),
-          ...(type === "footer" && { defaultFooter: option.id }),
+          ...(type === "header" && { defaultHeader: optionID }),
+          ...(type === "footer" && { defaultFooter: optionID }),
         },
       },
     };
     updateDataPackFormValue(configFormData);
-    updateEditorContent(pageEditorID, type, option.id ? option : null);
+    updateEditorContent(pageEditorID, type, optionID ? option : null);
     toggleModal();
   };
 
@@ -61,12 +78,6 @@ const Field = (props: IField): JSX.Element => {
     return !!siteDefaultNavigation?.isDefault;
   };
 
-  const setDefault = {
-    title: `Put the default ${type}`,
-    action: () => handleReplace({ id: null }),
-    checked: isDefaultNavigation(),
-  };
-
   const hasOptions: boolean | undefined = options?.length > 0 || !isDefaultNavigation();
 
   if (!content[type]) return <></>;
@@ -82,11 +93,10 @@ const Field = (props: IField): JSX.Element => {
       {hasOptions && (
         <SideModal
           optionsType={optionsType}
-          whiteList={options}
+          whiteList={mappedOptions}
           handleClick={handleReplace}
           toggleModal={toggleModal}
           isOpen={isOpen}
-          setDefault={setDefault}
           theme={theme}
         />
       )}

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/index.tsx

@@ -9,28 +9,15 @@ import TemplateBrowser from "./TemplateBrowser";
 import ConfigPanel from "./ConfigPanel";
 
 const Editor = (props: IProps) => {
-  const { isLoading, template } = props;
-
   const theme = getDefaultTheme();
 
-  return (
-    <ResizePanel
-      leftPanel={<TemplateBrowser />}
-      rightPanel={
-        <ConfigPanel
-          template={template}
-          isLoading={isLoading}
-          theme={theme}
-        />
-      }
-    />
-  );
+  return <ResizePanel leftPanel={<TemplateBrowser />} rightPanel={<ConfigPanel theme={theme} {...props} />} />;
 };
 
 type IProps = {
   isLoading: boolean;
   template: string;
-}
+};
 
 const mapStateToProps = (state: IRootState): IProps => ({
   isLoading: state.app.isLoading,

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/index.tsx

@@ -14,14 +14,16 @@ import * as S from "./style";
 const TemplateEditor = (props: IProps) => {
   const { isLoading, isSaving, editorContent, setHistoryPush, template, updateDataPack, dataPackSelected } = props;
 
-  const { isDirty, setIsDirty } = useIsDirty(editorContent);
+  const { isDirty, resetDirty } = useIsDirty(editorContent);
 
   const rightButtonProps = {
     label: !isDirty ? "Saved" : isSaving ? "Saving" : "Save",
     disabled: isSaving || !isDirty,
     action: async () => {
-      await updateDataPack(dataPackSelected.id);
-      setIsDirty(false);
+      const isSaved = await updateDataPack(dataPackSelected.id);
+      if (isSaved) {
+        resetDirty(false);
+      }
     },
   };
 
@@ -71,7 +73,7 @@ const mapDispatchToProps = {
 
 interface IDispatchProps {
   setHistoryPush(path: string, isEditor?: boolean): void;
-  updateDataPack: (dataPack?: any) => Promise<void>;
+  updateDataPack: (dataPack?: any) => Promise<boolean>;
 }
 
 type IProps = IStateProps & IDispatchProps;

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

@@ -1,37 +0,0 @@
-import { toBlob } from "html-to-image";
-
-const getImage = async (browserRef: any): Promise<File | null> => {
-  if (browserRef?.current) {
-    const browserContent = browserRef.current.querySelector(".browser-content");
-
-    const { height, overflow } = getComputedStyle(browserContent);
-    browserContent.style.height = "auto";
-    browserContent.style.overflow = "visible";
-    const originalHeight = browserContent.clientHeight;
-
-    const elChildren = browserContent.querySelectorAll("*");
-    let maxAbsoluteElementHeight = 0;
-    [].forEach.call(elChildren, function (element: any) {
-      const isAbsolutePosition = getComputedStyle(element).position === "absolute";
-      const isMaxAbsolutePositionHeight = element.clientHeight > maxAbsoluteElementHeight;
-      if (isAbsolutePosition && isMaxAbsolutePositionHeight) {
-        maxAbsoluteElementHeight = element.clientHeight;
-      }
-    });
-    if (maxAbsoluteElementHeight) {
-      const actualHeight = originalHeight + maxAbsoluteElementHeight;
-      browserContent.style.height = `${actualHeight}px`;
-    }
-
-    const imageBlob = await toBlob(browserContent, { quality: 0.95, pixelRatio: 0.5 });
-    const imageFile = imageBlob && new File([imageBlob], "navigation-thumbnail.png", { type: "image/png" });
-
-    browserContent.style.height = height;
-    browserContent.style.overflow = overflow;
-
-    return imageFile;
-  }
-  return null;
-};
-
-export { getImage };