@griddo/ax 10.1.25 → 10.1.27

package/package.json

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

package/src/api/navigation.tsx

@@ -57,6 +57,21 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: ["/navigations/", "/languages"],
     method: "GET",
   },
+  GET_PAGES_BY_HEADER: {
+    ...template,
+    endpoint: ["/navigations/", "/header/site/", "/pages"],
+    method: "GET",
+  },
+  GET_PAGES_BY_FOOTER: {
+    ...template,
+    endpoint: ["/navigations/", "/footer/site/", "/pages"],
+    method: "GET",
+  },
+  UPDATE_PAGE_NAVIGATION: {
+    ...template,
+    endpoint: "/navigations/page/bulk",
+    method: "PUT",
+  },
 };
 
 const getNavigation = (id: number) => {
@@ -157,6 +172,34 @@ const getNavigationsLanguages = async (navID: number) => {
   return sendRequest(SERVICES.GET_NAVIGATIONS_LANGUAGES);
 };
 
+const getPagesByHeader = async (headerID: number | number[], siteID: number) => {
+  const {
+    host,
+    endpoint: [prefix, infix, suffix],
+  } = SERVICES.GET_PAGES_BY_HEADER;
+
+  const ids = Array.isArray(headerID) ? headerID.join(",") : headerID;
+
+  SERVICES.GET_PAGES_BY_HEADER.dynamicUrl = `${host}${prefix}${ids}${infix}${siteID}${suffix}`;
+
+  return sendRequest(SERVICES.GET_PAGES_BY_HEADER);
+};
+
+const getPagesByFooter = async (footerID: number | number[], siteID: number) => {
+  const {
+    host,
+    endpoint: [prefix, infix, suffix],
+  } = SERVICES.GET_PAGES_BY_FOOTER;
+
+  const ids = Array.isArray(footerID) ? footerID.join(",") : footerID;
+
+  SERVICES.GET_PAGES_BY_FOOTER.dynamicUrl = `${host}${prefix}${ids}${infix}${siteID}${suffix}`;
+
+  return sendRequest(SERVICES.GET_PAGES_BY_FOOTER);
+};
+
+const updatePageNavigation = (data: any) => sendRequest(SERVICES.UPDATE_PAGE_NAVIGATION, data);
+
 export default {
   getNavigation,
   getHeaders,
@@ -169,4 +212,7 @@ export default {
   getNavigationsLanguages,
   deleteNavigationBulk,
   restoreNavigationBulk,
+  getPagesByHeader,
+  getPagesByFooter,
+  updatePageNavigation,
 };

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/TemplateManager/index.tsx

@@ -2,10 +2,10 @@ import React from "react";
 import { connect } from "react-redux";
 
 import { IDataPack, IErrorItem, IRootState, ISite } from "@ax/types";
+import { getModuleCategories } from "@ax/helpers";
+import Field from "../Field";
 
 import * as S from "./style";
-import Field from "../Field";
-import { getModuleCategories } from "@ax/helpers";
 
 export const TemplateManager = (props: IProps): JSX.Element => {
   const {
@@ -37,7 +37,7 @@ export const TemplateManager = (props: IProps): JSX.Element => {
   const modulesDataPacks = activatedPacks.map((pack: IDataPack) => pack.modules).flat();
 
   const getFieldProps = (field: any) => {
-    const { key, type, whiteList = [], slugTo } = field;
+    const { key, type, whiteList = [], slugTo, readonly } = field;
     const isArr = type === "ComponentArray";
     const currentContent = isArr ? templateContent[key] : templateContent;
     const fieldObjKey = !isArr ? `${key}` : `modules`;
@@ -70,6 +70,7 @@ export const TemplateManager = (props: IProps): JSX.Element => {
       currentContent,
       handleUpdate,
       error,
+      readonly
     };
   };
 
@@ -78,7 +79,7 @@ export const TemplateManager = (props: IProps): JSX.Element => {
       {isConfig && templateFields && <S.Title>Template Options</S.Title>}
       {templateFields &&
         templateFields.map((templateField: any, index: number) => {
-          const { whiteList, categories, key, fieldObjKey, mappedField, currentContent, handleUpdate, error } =
+          const { whiteList, categories, key, fieldObjKey, mappedField, currentContent, handleUpdate, error, readonly } =
             getFieldProps(templateField);
 
           return (
@@ -106,6 +107,7 @@ export const TemplateManager = (props: IProps): JSX.Element => {
               template={template}
               setHistoryPush={setHistoryPush}
               lang={lang}
+              readonly={readonly}
             />
           );
         })}

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

@@ -3,9 +3,9 @@ import { connect } from "react-redux";
 
 import { getTemplate, isModuleDisabled, slugify, areEqual } from "@ax/helpers";
 import { IRootState } from "@ax/types";
+import { pageEditorActions } from "@ax/containers/PageEditor";
 
 import TemplateManager from "./TemplateManager";
-import { pageEditorActions } from "@ax/containers/PageEditor";
 import Field from "./Field";
 
 const PageConnectedField = (props: any) => {
@@ -61,7 +61,8 @@ const PageConnectedField = (props: any) => {
       objKey === "parent" &&
       isTemplateActivated &&
       templateConfig &&
-      templateConfig.modifiableOnPage === false) ||
+      templateConfig.modifiableOnPage === false &&
+      templateConfig.defaultParent) ||
     isReadOnly;
 
   const defaultParent =
@@ -70,7 +71,7 @@ const PageConnectedField = (props: any) => {
   const hasDefaultIndex = isTemplateActivated && templateConfig && templateConfig.indexDefault !== undefined;
 
   const isFieldReadOnly =
-    (["parent", "slug"].includes(objKey) &&  isPageHome) || parentIsReadOnly;
+    (["parent", "slug"].includes(objKey) &&  isPageHome) || parentIsReadOnly || field.readonly;
 
   const isDisabled =
     (!isGlobal &&

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

@@ -36,7 +36,7 @@ const Select = (props: ISelectProps): JSX.Element => {
   };
 
   // tslint:disable-next-line: no-shadowed-variable
-  const getObjectValue = (value: string, options: IOptionProps[]) => {
+  const getObjectValue = (value: string | number | undefined, options: IOptionProps[]) => {
     if (!value) {
       return null;
     } else {
@@ -44,7 +44,7 @@ const Select = (props: ISelectProps): JSX.Element => {
     }
   };
 
-  const searchable = type === "inline" ? false : true;
+  const searchable = type === "inline" || type === "mini" ? false : true;
 
   return (
     <div data-testid="select-component">
@@ -72,7 +72,7 @@ const Select = (props: ISelectProps): JSX.Element => {
 
 export interface ISelectProps {
   name: string;
-  value: string;
+  value: string | undefined;
   options: IOptionProps[];
   error?: boolean;
   disabled?: boolean;

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

@@ -139,4 +139,59 @@ export const StyledSelect = styled(Select)<{
       ${(p) => p.theme.textStyle?.fieldContent};
     }
   }
+
+  &.mini {
+    ${(p) => p.theme.textStyle.uiS};
+    text-transform: capitalize;
+
+    .react-select__control {
+      height: 24px;
+      min-height: 24px;
+      justify-content: ${(p) => (p.alignRight ? "flex-end" : "flex-start")};
+      padding: 0 5px;
+
+      .react-select__value-container {
+        flex: 0 1 auto;
+        padding: 0;
+        .react-select__single-value {
+          position: relative;
+          transform: none;
+          overflow: visible;
+        }
+      }
+      .react-select__indicator {
+        padding: 0;
+        svg {
+          width: ${(p) => p.theme.spacing.s};
+          height: ${(p) => p.theme.spacing.s};
+        }
+      }
+      .react-select__input {
+        input {
+          cursor: default;
+        }
+      }
+      .react-select__placeholder {
+        position: relative;
+        transform: none;
+      }
+    }
+
+    .react-select__control--is-disabled {
+      .react-select__value-container {
+        .react-select__single-value {
+          color: ${(p) => p.theme.color.interactiveDisabled};
+        }
+      }
+    }
+
+    .react-select__menu {
+      ${(p) => p.theme.textStyle.uiXS};
+
+      .react-select__option {
+        padding: ${(p) => p.theme.spacing.xs};
+        min-height: auto;
+      }
+    }
+  }
 `;

package/src/containers/App/actions.tsx

@@ -120,6 +120,7 @@ function handleError(response: any, isMultiple = false, msg?: string): (dispatch
       btnText,
       actionsBelow,
       text,
+      btnAction,
     } = response;
 
     const firstMsg = Array.isArray(message) && message[0] ? message[0].error : message || text;
@@ -129,6 +130,7 @@ function handleError(response: any, isMultiple = false, msg?: string): (dispatch
       text: msg ? msg : firstMsg,
       btnText,
       actionsBelow,
+      btnAction,
       subErrors: isMultiple ? message : [],
     };
 

package/src/containers/App/reducer.tsx

@@ -33,6 +33,7 @@ export interface IError {
   btnText?: string | undefined;
   actionsBelow?: boolean | undefined;
   subErrors?: any[];
+  btnAction?: () => void;
 }
 
 export interface IUser {

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

@@ -1,7 +1,7 @@
 import { Dispatch } from "redux";
 
 import { navigation } from "@ax/api";
-import { IBreadcrumbItem, INotification, ISchema } from "@ax/types";
+import { IBreadcrumbItem, INavPages, INotification, ISchema, IUpdateNavigationParam } from "@ax/types";
 import {
   getDefaultSchema,
   getSchema,
@@ -12,7 +12,6 @@ import {
   getDefaultNavigationModules,
 } from "@ax/helpers";
 import {
-  checkMaxModules,
   findByEditorID,
   generateEditorIDs,
   getLastComponentEditorID,
@@ -44,6 +43,7 @@ import {
   SET_IS_NEW_TRANSLATION,
   SET_SELECTED_PARENT,
   SET_COPY_MODULE,
+  SET_NAV_PAGES,
 } from "./constants";
 
 import {
@@ -58,6 +58,7 @@ import {
   ISetIsNewTranslation,
   ISetSelectedParent,
   ISetCopyModule,
+  ISetNavPages,
 } from "./interfaces";
 
 const { setIsLoading } = appActions;
@@ -122,6 +123,10 @@ function setCopyModule(moduleCopy: Record<string, unknown> | null): ISetCopyModu
   return { type: SET_COPY_MODULE, payload: { moduleCopy } };
 }
 
+function setNavPages(navigationPages: INavPages): ISetNavPages {
+  return { type: SET_NAV_PAGES, payload: { navigationPages } };
+}
+
 // API RELATED FUNCTIONS
 
 function getHeaders(params: any): (dispatch: Dispatch, getState: any) => Promise<void> {
@@ -330,7 +335,8 @@ function updateNavigation(
 
 function deleteNavigation(
   navID: number | number[],
-  type: string
+  type: string,
+  errorAction: () => void
 ): (dispatch: Dispatch, getState: any) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
@@ -339,13 +345,18 @@ function deleteNavigation(
         handleSuccess: () => getNavigationByType(type)(dispatch, getState),
         handleError: (response: any) => {
           const {
-            data: { message },
+            data: { message, code },
           } = response;
 
           if (isBulk) {
             getNavigationByType(type)(dispatch, getState);
           }
 
+          if (code === 403) {
+            response.btnText = "Show Pages";
+            response.btnAction = errorAction;
+          }
+
           const isMultiple = Array.isArray(message) && message.length > 1;
           const msg = isMultiple ? `The delete action failed due to ${message.length} errors.` : undefined;
           appActions.handleError(response, isMultiple, msg)(dispatch);
@@ -817,6 +828,46 @@ function resetDefaultsValues(): (dispatch: Dispatch) => Promise<void> {
   };
 }
 
+function getPagesByNavigation(
+  type: string,
+  navID: number | number[],
+  siteID: number
+): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    try {
+      const responseActions = {
+        handleSuccess: async (response: any) => dispatch(setNavPages(response)),
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      const callback = async () =>
+        type === "header" ? navigation.getPagesByHeader(navID, siteID) : navigation.getPagesByFooter(navID, siteID);
+
+      await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+}
+
+function updatePageNavigation(data: IUpdateNavigationParam): (dispatch: Dispatch) => Promise<boolean> {
+  return async (dispatch) => {
+    try {
+      const responseActions = {
+        handleSuccess: async () => dispatch(appActions.resetError()),
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      const callback = async () => navigation.updatePageNavigation(data);
+
+      return await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
 export {
   setEditorContent,
   setBreadcrumb,
@@ -854,4 +905,6 @@ export {
   moveModule,
   copyModule,
   pasteModule,
+  getPagesByNavigation,
+  updatePageNavigation,
 };

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

@@ -15,5 +15,6 @@ export const SET_TOTAL_ITEMS = `${NAME}/SET_TOTAL_ITEMS`;
 export const SET_CURRENT_NAVIGATION_LANGUAGES = `${NAME}/SET_CURRENT_NAVIGATION_LANGUAGES`;
 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 ITEMS_PER_PAGE = 50;

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

@@ -1,4 +1,4 @@
-import { IBreadcrumbItem, ISchema } from "@ax/types";
+import { IBreadcrumbItem, INavPages, ISchema } from "@ax/types";
 import {
   SET_EDITOR_CONTENT,
   SET_BREADCRUMB,
@@ -14,6 +14,7 @@ import {
   SET_IS_NEW_TRANSLATION,
   SET_SELECTED_PARENT,
   SET_COPY_MODULE,
+  SET_NAV_PAGES,
 } from "./constants";
 
 export interface ISetEditorContent {
@@ -86,6 +87,11 @@ export interface ISetCopyModule {
   payload: { moduleCopy: Record<string, unknown> | null };
 }
 
+export interface ISetNavPages {
+  type: typeof SET_NAV_PAGES;
+  payload: { navigationPages: INavPages };
+}
+
 export type NavigationActionsCreators = ISetEditorContent &
   ISetBreadcrumb &
   ISetSchema &

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

@@ -1,4 +1,4 @@
-import { IBreadcrumbItem, ISchema } from "@ax/types";
+import { IBreadcrumbItem, INavPages, ISchema } from "@ax/types";
 
 import {
   SET_EDITOR_CONTENT,
@@ -16,6 +16,7 @@ import {
   SET_IS_NEW_TRANSLATION,
   SET_SELECTED_PARENT,
   SET_COPY_MODULE,
+  SET_NAV_PAGES,
 } from "./constants";
 import { NavigationActionsCreators } from "./interfaces";
 
@@ -36,6 +37,7 @@ export interface INavigationState {
   isNewTranslation: boolean;
   form: any;
   moduleCopy: { date: string; element: Record<string, unknown> } | null;
+  navigationPages: INavPages | null;
 }
 
 export const initialState = {
@@ -55,6 +57,7 @@ export const initialState = {
   isNewTranslation: false,
   form: {},
   moduleCopy: null,
+  navigationPages: null,
 };
 
 export function reducer(state = initialState, action: NavigationActionsCreators): INavigationState {
@@ -74,6 +77,7 @@ export function reducer(state = initialState, action: NavigationActionsCreators)
     case SET_CURRENT_NAVIGATION_LANGUAGES:
     case SET_IS_NEW_TRANSLATION:
     case SET_COPY_MODULE:
+    case SET_NAV_PAGES:
       return { ...state, ...action.payload };
     default:
       return state;

package/src/containers/Sites/actions.tsx

@@ -397,13 +397,11 @@ function publishSite(siteID: number, params?: IGetSitesParams): (dispatch: Dispa
   };
 }
 
-function publishSitesBulk(ids: number[]): (dispatch: Dispatch) => Promise<void> {
+function publishSitesBulk(ids: number[], params?: IGetSitesParams): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
     try {
       const responseActions = {
-        handleSuccess: () => {
-          getSites()(dispatch);
-        },
+        handleSuccess: () => getSites(params)(dispatch),
         handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
       const callback = async () => sites.publishSiteBulk(ids);
@@ -428,13 +426,11 @@ function unpublishSite(siteID: number, params?: IGetSitesParams): (dispatch: Dis
   };
 }
 
-function unpublishSitesBulk(ids: number[]): (dispatch: Dispatch) => Promise<void> {
+function unpublishSitesBulk(ids: number[], params?: IGetSitesParams): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
     try {
       const responseActions = {
-        handleSuccess: () => {
-          getSites()(dispatch);
-        },
+        handleSuccess: () => getSites(params)(dispatch),
         handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
       const callback = async () => sites.unpublishSiteBulk(ids);

package/src/guards/error/index.tsx

@@ -19,7 +19,7 @@ const ErrorView = (props: any) => {
 };
 
 const ErrorGuard = (props: IProps) => {
-  const { text, code, resetError, btnText, actionsBelow, subErrors } = props;
+  const { text, code, resetError, btnText, actionsBelow, subErrors, btnAction } = props;
 
   const isBlocking = blockingErrors.includes(code);
 
@@ -38,6 +38,7 @@ const ErrorGuard = (props: IProps) => {
           btnText={btnText}
           actionsBelow={actionsBelow}
           subErrors={subErrors}
+          onClick={btnAction}
         />,
         domNode
       )
@@ -50,7 +51,7 @@ const ErrorGuard = (props: IProps) => {
 const mapStateToProps = (state: IRootState) => {
   const {
     app: {
-      error: { code, text, btnText, actionsBelow, subErrors },
+      error: { code, text, btnText, actionsBelow, subErrors, btnAction },
     },
   } = state;
   return {
@@ -59,6 +60,7 @@ const mapStateToProps = (state: IRootState) => {
     btnText,
     actionsBelow,
     subErrors,
+    btnAction,
   };
 };
 
@@ -73,6 +75,7 @@ interface IProps {
   btnText?: string;
   actionsBelow?: boolean | undefined;
   subErrors?: any[];
+  btnAction?: () => void;
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(ErrorGuard);

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

@@ -29,6 +29,7 @@ const DefaultItem = (props: IProps): JSX.Element => {
     setDeletedNav,
     onChange,
     isSelected,
+    toggleReplaceModal
   } = props;
 
   const [inputValue, setInputValue] = useState("");
@@ -55,13 +56,15 @@ const DefaultItem = (props: IProps): JSX.Element => {
 
   const handleSetDefault = () => setDefaultNavigation(defaultContent.id, defaultContent.type);
 
-  const removeItem = () =>
-    deleteNavigation(defaultContent.id, defaultContent.type).then((deleted: boolean) => {
-      if (deleted) {
-        setDeletedNav(defaultContent.id);
-        toggleToast();
-      }
-    });
+  const handleErrorAction = () => toggleReplaceModal();
+
+  const removeItem = async () => {
+    const deleted = await deleteNavigation(defaultContent.id, defaultContent.type, handleErrorAction);
+    setDeletedNav(defaultContent.id);
+    if (deleted) {
+      toggleToast();
+    }
+  };
 
   let menuOptions = [
     {
@@ -214,12 +217,13 @@ interface IProps {
   toggleToast(): void;
   onChange: (e: any) => void;
   setDeletedNav(item: number): void;
-  deleteNavigation(navID: number, type: string): Promise<boolean>;
+  deleteNavigation(navID: number, type: string, errorAction: () => void): Promise<boolean>;
   setDefaultNavigation(navID: number, type: string): void;
   setLanguage(lang: { locale: string; id: number | null }): void;
   createNewTranslation(isNewTranslation: boolean): void;
   setHeader(id: number | null): void;
   setFooter(id: number | null): void;
+  toggleReplaceModal: () => void;
 }
 
 const mapDispatchToProps = {

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

@@ -0,0 +1,205 @@
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+
+import { navigationActions } from "@ax/containers/Navigation";
+import { CheckField, Loader, Modal, Select } from "@ax/components";
+import { ICheck, IModal, INavPages, IRootState, IUpdateNavigationParam } from "@ax/types";
+import { useBulkSelection } from "@ax/hooks";
+
+import * as S from "./style";
+
+const ReplaceNavModal = (props: IProps) => {
+  const {
+    isOpen,
+    type,
+    navID,
+    currentSiteID,
+    navigationPages,
+    isLoading,
+    currentDefaultsContent,
+    toggleModal,
+    toggleToast,
+    getPagesByNavigation,
+    updatePageNavigation,
+  } = props;
+
+  const initialItems = navigationPages ? navigationPages.items.pagesInUse : [];
+  const totalItems = navigationPages ? navigationPages.items.totalItems : 0;
+  const pagesIds = initialItems.map((item) => item.pageId);
+
+  const [navSelected, setNavSelected] = useState<any>();
+  const [items, setItems] = useState(initialItems);
+
+  useEffect(() => {
+    const getPages = async () => navID && currentSiteID && (await getPagesByNavigation(type, navID, currentSiteID));
+    getPages();
+  }, []);
+
+  useEffect(() => {
+    setItems(initialItems);
+  }, [initialItems]);
+
+  const { resetBulkSelection, selectedItems, isSelected, checkState, addToBulkSelection, selectAllItems } =
+    useBulkSelection(pagesIds);
+
+  const handleAllChange = () => (checkState.isAllSelected ? resetBulkSelection() : selectAllItems());
+
+  const options = currentDefaultsContent
+    .filter(
+      (nav) =>
+        navID && ((typeof navID === "number" && nav.id !== navID) || (Array.isArray(navID) && !navID.includes(nav.id)))
+    )
+    .map((nav) => {
+      return { value: nav.id, label: nav.title };
+    });
+
+  const fullOptions = [{ value: 0, label: `${type} by default` }, ...options];
+
+  const handleSelectChange = (value: number | string) => {
+    if (typeof value !== "number") return;
+    setNavSelected(value);
+    const newItems = items.map((item) => {
+      if (isSelected(item.pageId)) {
+        return { ...item, navigationId: value };
+      } else {
+        return item;
+      }
+    });
+    setItems(newItems);
+    resetBulkSelection();
+  };
+
+  const handleChangeNav = async () => {
+    const newNavs = items.reduce(
+      (acc: { navigationId: number | null; type: "header" | "footer"; pageId: number }[], current) => {
+        const original = initialItems.find((initItem) => initItem.pageId === current.pageId);
+        if (original && original.navigationId !== current.navigationId) {
+          const nav = {
+            navigationId: current.navigationId === 0 ? null : current.navigationId,
+            type,
+            pageId: current.pageId,
+          };
+          return [...acc, nav];
+        }
+        return acc;
+      },
+      []
+    );
+
+    const updated = await updatePageNavigation({ navigations: newNavs });
+
+    if (updated) {
+      toggleModal();
+      toggleToast(newNavs.length);
+    }
+  };
+
+  const secondaryAction = navSelected !== undefined ? { title: "Cancel", onClick: toggleModal } : undefined;
+  const mainAction = navSelected !== undefined ? { title: "Change Navigation", onClick: handleChangeNav } : undefined;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      title="Pages in use"
+      size="L"
+      secondaryAction={secondaryAction}
+      mainAction={mainAction}
+    >
+      {isLoading ? (
+        <S.LoadingWrapper>
+          <Loader name="circle" />
+        </S.LoadingWrapper>
+      ) : (
+        <S.ModalContent>
+          <S.TotalWrapper>
+            This {type} appears on <strong>{totalItems} pages</strong>:
+          </S.TotalWrapper>
+          <S.Header>
+            <S.CheckWrapper>
+              <CheckField
+                name="checkAll"
+                value="checkAll"
+                checked={checkState.isAllSelected}
+                indeterminate={checkState.indeterminate}
+                onChange={handleAllChange}
+              />
+            </S.CheckWrapper>
+            <S.PageInfo>
+              <S.Text>Select All</S.Text>
+            </S.PageInfo>
+            <S.HeaderInfo>
+              {selectedItems.all.length > 0 && (
+                <Select
+                  options={fullOptions}
+                  name="selectNav"
+                  type="mini"
+                  value={navSelected}
+                  onChange={handleSelectChange}
+                  placeholder={`Change ${type}`}
+                />
+              )}
+            </S.HeaderInfo>
+          </S.Header>
+          <S.ItemList>
+            {items.map((item) => {
+              const handleChange = (value: ICheck) => addToBulkSelection(value);
+              const navigation =
+                item.navigationId === 0
+                  ? { title: `${type} by default` }
+                  : currentDefaultsContent.find((nav: any) => nav.id === item.navigationId);
+              const original = initialItems.find((initItem) => initItem.pageId === item.pageId);
+              return (
+                <S.Item key={item.pageId}>
+                  <S.CheckWrapper>
+                    <CheckField
+                      name={`check-${item.pageId}`}
+                      value={item.pageId}
+                      checked={isSelected(item.pageId)}
+                      onChange={handleChange}
+                    />
+                  </S.CheckWrapper>
+                  <S.PageInfo>
+                    <S.Title>{item.pageTitle}</S.Title>
+                    <S.PagePath>{item.pathString}</S.PagePath>
+                  </S.PageInfo>
+                  <S.HeaderInfo>
+                    <S.Tag active={original?.navigationId !== item.navigationId}>{navigation?.title}</S.Tag>
+                  </S.HeaderInfo>
+                </S.Item>
+              );
+            })}
+          </S.ItemList>
+        </S.ModalContent>
+      )}
+    </Modal>
+  );
+};
+
+interface IReplaceModalProps {
+  type: "header" | "footer";
+  navID: number | number[] | null;
+  currentSiteID: number | null;
+  navigationPages: INavPages | null;
+  isLoading: boolean;
+  currentDefaultsContent: any[];
+  toggleToast: (pages: number) => void;
+  getPagesByNavigation: (type: string, navID: number | number[], siteID: number) => Promise<void>;
+  updatePageNavigation: (data: IUpdateNavigationParam) => Promise<boolean>;
+}
+
+type IProps = IModal & IReplaceModalProps;
+
+const mapStateToProps = (state: IRootState) => ({
+  currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
+  navigationPages: state.navigation.navigationPages,
+  isLoading: state.app.isLoading,
+  currentDefaultsContent: state.navigation.currentDefaultsContent,
+});
+
+const mapDispatchToProps = {
+  getPagesByNavigation: navigationActions.getPagesByNavigation,
+  updatePageNavigation: navigationActions.updatePageNavigation,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ReplaceNavModal);

package/src/modules/Navigation/Defaults/ReplaceNavModal/style.tsx

@@ -0,0 +1,99 @@
+import styled from "styled-components";
+
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+const LoadingWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+`;
+
+const TotalWrapper = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const ItemList = styled.div`
+  overflow: auto;
+`;
+
+const Header = styled.div`
+  display: flex;
+  border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  padding: ${(p) => `${p.theme.spacing.xs} ${p.theme.spacing.xs} 0 ${p.theme.spacing.xs}`};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  min-height: 45px;
+`;
+
+const Item = styled.div`
+  display: flex;
+  border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  padding: ${(p) => p.theme.spacing.xs};
+`;
+
+const CheckWrapper = styled.div`
+  display: flex;
+  align-items: flex-start;
+`;
+
+const PageInfo = styled.div`
+  flex-grow: 2;
+`;
+
+const Title = styled.div`
+  ${(p) => p.theme.textStyle.uiL};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const PagePath = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+`;
+
+const Text = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+`;
+
+const HeaderInfo = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const Tag = styled.div<{ active: boolean}>`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  background-color: ${(p) => p.active ? p.theme.color?.interactive02 : p.theme.colors.uiBackground03};
+  box-sizing: border-box;
+  border-radius: ${(p) => p.theme.radii.xs};
+  white-space: nowrap;
+  display: inline-block;
+  padding: 3px 8px;
+  text-transform: capitalize;
+`;
+
+export {
+  ModalContent,
+  LoadingWrapper,
+  TotalWrapper,
+  ItemList,
+  Header,
+  Item,
+  PageInfo,
+  PagePath,
+  Title,
+  HeaderInfo,
+  Tag,
+  CheckWrapper,
+  Text,
+};

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

@@ -4,7 +4,7 @@ import { connect } from "react-redux";
 import { appActions } from "@ax/containers/App";
 import { menuActions } from "@ax/containers/Navigation";
 import { IRootState, IHeader, IFooter } from "@ax/types";
-import { useBulkSelection, useToast } from "@ax/hooks";
+import { useBulkSelection, useModal, useToast } from "@ax/hooks";
 import { capitalize, isMultipleNavigationModules } from "@ax/helpers";
 import { navigationActions } from "@ax/containers/Navigation";
 import { MainWrapper, TableList, ErrorToast, Toast, Notification } from "@ax/components";
@@ -14,6 +14,8 @@ import DefaultNav from "./Nav";
 import BulkHeader from "./BulkHeader";
 
 import { NavigationModulesWarning } from "./atoms";
+import ReplaceNavModal from "./ReplaceNavModal";
+
 import * as S from "./style";
 
 const DefaultsList = (props: IProps): JSX.Element => {
@@ -39,10 +41,13 @@ const DefaultsList = (props: IProps): JSX.Element => {
 
   const [page, setPage] = useState(1);
   const [deletedNav, setDeletedNav] = useState<number | number[] | null>(null);
+  const [updatedPages, setUpdatedPages] = useState<number | null>(null);
   const { isVisible, toggleToast, setIsVisible } = useToast();
+  const { isVisible: isPagesVisible, toggleToast: togglePagesToast, setIsVisible: setIsPagesVisible } = useToast();
   const [isScrolling, setIsScrolling] = useState(false);
   const tableRef = useRef<HTMLDivElement>(null);
   const [isNavigationNotificationOpen, setIsNavigationNotificationOpen] = useState(false);
+  const { isOpen: isReplaceOpened, toggleModal: toggleReplaceModal } = useModal();
 
   const navIds = currentDefaultsContent && currentDefaultsContent.map((nav: any) => nav.id);
 
@@ -153,13 +158,25 @@ const DefaultsList = (props: IProps): JSX.Element => {
     message: deletedNav ? `${capitalize(currentType)} deleted` : "",
   };
 
-  const bulkDelete = () =>
-    deleteNavigation(selectedItems.all, currentType).then((deleted: boolean) => {
-      if (deleted) {
-        setDeletedNav(selectedItems.all);
-        toggleToast();
-      }
-    });
+  const toastPagesProps = {
+    setIsVisible: setIsPagesVisible,
+    message: `${updatedPages} pages updated with new ${currentType}s.`,
+  };
+
+  const handleToast = (pages: number) => {
+    setUpdatedPages(pages);
+    togglePagesToast();
+  };
+
+  const handleErrorAction = () => toggleReplaceModal();
+
+  const bulkDelete = async () => {
+    const deleted = await deleteNavigation(selectedItems.all, currentType, handleErrorAction);
+    setDeletedNav(selectedItems.all);
+    if (deleted) {
+      toggleToast();
+    }
+  };
 
   const unselectAllItems = () => resetBulkSelection();
 
@@ -224,13 +241,24 @@ const DefaultsList = (props: IProps): JSX.Element => {
                     onChange={addToBulkSelection}
                     handleClick={setContent}
                     setHistoryPush={setHistoryPush}
+                    toggleReplaceModal={toggleReplaceModal}
                   />
                 );
               })}
           </TableList>
         </S.TableWrapper>
         {isVisible && <Toast {...toastProps} />}
+        {isPagesVisible && <Toast {...toastPagesProps} />}
       </S.DefaultListWrapper>
+      {isReplaceOpened && (
+        <ReplaceNavModal
+          isOpen={isReplaceOpened}
+          toggleModal={toggleReplaceModal}
+          type={currentType}
+          navID={deletedNav}
+          toggleToast={handleToast}
+        />
+      )}
     </MainWrapper>
   );
 };
@@ -253,7 +281,7 @@ interface IDispatchProps {
   setHeader(id: number | null): void;
   setFooter(id: number | null): void;
   restoreNavigation(navID: number | number[], type: string): void;
-  deleteNavigation(navID: number[], type: string): Promise<boolean>;
+  deleteNavigation(navID: number[], type: string, errorAction: () => void): Promise<boolean>;
   getMenus(): void;
   resetDefaultsValues(): void;
 }

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

@@ -255,15 +255,14 @@ const SitesList = (props: ISitesListProps): JSX.Element => {
 
   const bulkPublishAction = async (isPublish: boolean) => {
     const { notPublished, published } = selectedItems;
+    const params = getParams();
+
     if (notPublished.length > 0 && isPublish) {
-      publishSitesBulk(notPublished);
+      await publishSitesBulk(notPublished, params);
     }
     if (published.length > 0 && !isPublish) {
-      unpublishSitesBulk(published);
+      await unpublishSitesBulk(published, params);
     }
-
-    const params = getParams();
-    getSites(params);
     unselectAllItems();
   };
 
@@ -383,9 +382,9 @@ const mapStateToProps = (state: IRootState) => ({
 interface IDispatchProps {
   setHistoryPush(path: string, isEditor?: boolean): void;
   saveSettings(form: ISettingsForm): Promise<boolean>;
-  getSites(params: IGetSitesParams): void;
-  publishSitesBulk(ids: number[]): void;
-  unpublishSitesBulk(ids: number[]): void;
+  getSites(params: IGetSitesParams): Promise<void>;
+  publishSitesBulk(ids: number[], params?: IGetSitesParams): Promise<void>;
+  unpublishSitesBulk(ids: number[], params?: IGetSitesParams): Promise<void>;
   setListConfig(config: ISiteListConfig): void;
 }
 

package/src/types/index.tsx

@@ -833,6 +833,18 @@ export interface ICreatePasswordParams {
   retypedPassword: string;
 }
 
+export interface INavPages {
+  availableNavigationsInSite: { id: number; isDefault: boolean };
+  items: {
+    pagesInUse: { pageId: number; pageTitle: string; pathString: string; navigationId: number }[];
+    totalItems: number;
+  };
+}
+
+export interface IUpdateNavigationParam {
+  navigations: { navigationId: number | null; type: "header" | "footer"; pageId: number }[];
+}
+
 export type Field =
   | "AsyncCheckGroup"
   | "AsyncSelect"