@griddo/ax 11.15.7 → 11.15.8-rc.0

package/src/components/FieldsBehavior/index.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 
 import { IconAction, Tooltip } from "@ax/components";
 import { getValidity } from "@ax/forms";
-import { getFieldByPath, isEmptyContainer } from "@ax/helpers";
+import { getFieldByPath, isEmptyContainer, slugify } from "@ax/helpers";
 import type { IErrorItem } from "@ax/types";
 
 import * as S from "./style";
@@ -28,66 +28,90 @@ const FieldsBehavior = (props: IFieldsBehaviorProps): JSX.Element => {
 		editorID,
 		objKey,
 		inversed = false,
+		selectedContent,
+		updateValue,
 	} = props;
 
 	const [showAdvanced, setShowAdvanced] = useState(false);
 	const [errorField, setErrorField] = useState(false);
 	const [message, setMessage] = useState(helptext);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
+	const handleValidation = useCallback(
+		(newValue: string | any[], fieldValidators?: Record<string, unknown>) => {
+			const validatorWithErrors = error ? { ...validators, ...error.validator } : validators;
+			const allValidators = fieldValidators ? { ...validatorWithErrors, ...fieldValidators } : validatorWithErrors;
+			const { isValid, errorText } = getValidity(allValidators, newValue);
+			if (isValid) {
+				setMessage(helptext);
+				error && deleteError && deleteError(error);
+			} else {
+				setMessage(errorText);
+			}
+			setErrorField(!isValid);
+		},
+		[error, validators, helptext, deleteError],
+	);
+
+	const resetValidation = useCallback(() => {
+		setMessage(helptext);
+		error && deleteError && deleteError(error);
+		setErrorField(false);
+	}, [helptext, error, deleteError]);
+
 	useEffect(() => {
 		setErrorField(false);
 		setMessage(helptext);
 		if (error) {
 			handleValidation(value);
 		}
-	}, [editorID, error]);
-
-	const helpTextWrapper = message ? (
-		<S.HelpText error={errorField} inversed={inversed}>
-			{message}
-		</S.HelpText>
-	) : (
-		<></>
-	);
+	}, [error, value, helptext, handleValidation]);
 
+	// Field type checks
 	const isComponentArray = fieldType === "ComponentArray" || fieldType === "FormFieldArray";
 	const isComponentContainer = fieldType === "ComponentContainer";
 	const isFormContainer = fieldType === "FormContainer";
 	const hasMultipleOptions: boolean = (!!whiteList && whiteList.length > 1) || isFormContainer;
 
+	// Page slug field (only for pages)
+	const isPageSlug = editorID === 0 && objKey === "slug";
+	const isSlugDisabled =
+		isPageSlug &&
+		(`/${slugify(selectedContent?.title || "")}` === value ||
+			!selectedContent?.title ||
+			selectedContent?.title.trim() === "");
+
+	// Title visibility: show if field has title AND is not a component array
 	const hasTitle = !!title && !isComponentArray;
+
 	const Field = getFieldByPath(fieldType);
 
 	const toggleAdvanced = () => setShowAdvanced(!showAdvanced);
 
+	// Check if container is empty (only for ComponentContainer type)
 	const containerInfo = isComponentContainer && !!value && isEmptyContainer(value, hasMultipleOptions);
-
 	const isEmpty = containerInfo ? containerInfo.isEmpty : false;
+
+	// Show title if field has title AND (is not empty OR has multiple options)
 	const showTitle = hasTitle && (!isEmpty || hasMultipleOptions);
 
 	const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
 
 	const wrapperClass = filled ? `${className} filled` : className;
 
-	const handleValidation = (newValue: string | any[], fieldValidators?: Record<string, unknown>) => {
-		const validatorWithErrors = error ? { ...validators, ...error.validator } : validators;
-		const allValidators = fieldValidators ? { ...validatorWithErrors, ...fieldValidators } : validatorWithErrors;
-		const { isValid, errorText } = getValidity(allValidators, newValue);
-		if (isValid) {
-			setMessage(helptext);
-			error && deleteError && deleteError(error);
-		} else {
-			setMessage(errorText);
-		}
-		setErrorField(!isValid);
+	const handleSyncSlug = () => {
+		const newSlug = `/${slugify(selectedContent?.title || "")}`;
+		updateValue?.("slug", newSlug);
 	};
 
-	const resetValidation = () => {
-		setMessage(helptext);
-		error && deleteError && deleteError(error);
-		setErrorField(false);
-	};
+	const tooltipText = isSlugDisabled ? (
+		"The slug already matches the page name"
+	) : (
+		<>
+			This action updates the slug based on the current
+			<br />
+			page name, modifies the URL, and sets up a redirect.
+		</>
+	);
 
 	return (
 		<S.Wrapper className={wrapperClass} showTitle={showTitle} id={`gdd_${objKey}`}>
@@ -118,8 +142,17 @@ const FieldsBehavior = (props: IFieldsBehaviorProps): JSX.Element => {
 						</Tooltip>
 					)}
 				</S.Icons>
+				{isPageSlug && (
+					<Tooltip content={tooltipText}>
+						<IconAction icon="sync" size="s" onClick={handleSyncSlug} disabled={isSlugDisabled} />
+					</Tooltip>
+				)}
 			</S.Header>
-			{helpTextWrapper}
+			{message && (
+				<S.HelpText error={errorField} inversed={inversed}>
+					{message}
+				</S.HelpText>
+			)}
 		</S.Wrapper>
 	);
 };
@@ -139,12 +172,14 @@ interface IFieldsBehaviorProps {
 	disabled?: boolean;
 	filled?: boolean;
 	validators?: Record<string, unknown>;
-	error?: any; // TODO add type IErrorItem?
+	error?: any;
 	deleteError?: (error: IErrorItem) => void;
 	editorID?: string | number;
 	objKey?: string | number;
 	inversed?: boolean;
 	[key: string]: unknown;
+	selectedContent?: { title?: string } & Record<string, any>;
+	updateValue?: (key: string, value: any, templateID?: number, slugTo?: string) => void;
 }
 
 export default FieldsBehavior;

package/src/components/Icon/components/Sync.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+const SvgSync = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    fill="none"
+    {...props}
+  >
+    <path
+      fill="#5057FF"
+      d="M4 12H1l4 4 4-4H6c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46A7.93 7.93 0 0 0 12 4c-4.42 0-8 3.58-8 8Zm14 0c0 3.31-2.69 6-6 6a5.87 5.87 0 0 1-2.8-.7l-1.46 1.46A7.93 7.93 0 0 0 12 20c4.42 0 8-3.58 8-8h3l-4-4-4 4h3Z"
+    />
+  </svg>
+);
+export default SvgSync;

package/src/components/Icon/svgs/Sync.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 12L1 12L5 16L9 12L6 12C6 8.69 8.69 6 12 6C13.01 6 13.97 6.25 14.8 6.7L16.26 5.24C15.03 4.46 13.57 4 12 4C7.58 4 4 7.58 4 12ZM18 12C18 15.31 15.31 18 12 18C10.99 18 10.03 17.75 9.2 17.3L7.74 18.76C8.97 19.54 10.43 20 12 20C16.42 20 20 16.42 20 12L23 12L19 8L15 12L18 12Z" fill="#5057FF"/>
+</svg>

package/src/components/RestoreModal/index.tsx

@@ -1,7 +1,5 @@
-import React from "react";
-
-import { IModal } from "@ax/types";
 import { Modal } from "@ax/components";
+import type { IModal } from "@ax/types";
 
 import * as S from "./style";
 

package/src/components/ScheduleModal/index.tsx

@@ -1,8 +1,8 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
-import { IModal } from "@ax/types";
-import { Modal, FieldsBehavior } from "@ax/components";
+import { FieldsBehavior, Modal } from "@ax/components";
 import { stringToDate } from "@ax/helpers";
+import type { IModal } from "@ax/types";
 
 import * as S from "./style";
 

package/src/components/TableList/index.tsx

@@ -6,7 +6,8 @@ import type { IRootState } from "@ax/types";
 import * as S from "./style";
 
 const TableList = (props: ITableListProps): JSX.Element => {
-	const { tableHeader, children, pagination, isLoading, onScroll, hasFixedHeader, tableRef, className } = props;
+	const { tableHeader, children, pagination, isLoading, skipLoading, onScroll, hasFixedHeader, tableRef, className } =
+		props;
 
 	const showPagination = pagination && pagination.totalItems > pagination.itemsPerPage;
 
@@ -16,7 +17,7 @@ const TableList = (props: ITableListProps): JSX.Element => {
 				<S.TableHeader hasFixedHeader={hasFixedHeader} data-testid="table-list-header" className={className}>
 					{tableHeader}
 				</S.TableHeader>
-				{isLoading ? (
+				{isLoading && !skipLoading ? (
 					<Loading />
 				) : (
 					<S.TableBody data-testid="table-body" className={className}>
@@ -25,7 +26,7 @@ const TableList = (props: ITableListProps): JSX.Element => {
 				)}
 			</S.Table>
 			<S.PaginationWrapper>
-				{showPagination && !isLoading && (
+				{showPagination && !(isLoading && !skipLoading) && (
 					<Pagination
 						totalItems={pagination.totalItems}
 						setPage={pagination.setPage}
@@ -52,6 +53,7 @@ export interface ITableListProps {
 		currPage: number;
 	};
 	isLoading?: boolean;
+	skipLoading?: boolean;
 	onScroll?: any;
 	hasFixedHeader?: boolean;
 	tableRef?: any;

package/src/containers/FileDrive/actions.tsx

@@ -166,7 +166,7 @@ function updateFolder(
 			};
 			const callback = async () => files.updateFolder(folderID, data);
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -186,7 +186,7 @@ function deleteFolder(folder: IFolder): (dispatch: Dispatch, getState: any) => P
 			};
 			const callback = async () => files.deleteFolder(folder.id);
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -285,7 +285,7 @@ function deleteFile(
 			};
 			const callback = async () => (Array.isArray(fileID) ? files.deleteFilesBulk(fileID) : files.deleteFile(fileID));
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -313,7 +313,7 @@ function moveFile(
 			const callback = async () =>
 				Array.isArray(fileID) ? files.moveFilesBulk(fileID, folderID) : files.moveFile(fileID, folderID);
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -390,7 +390,7 @@ function downloadFiles(
 
 			const callback = async () => files.downloadFiles(fileID, zip);
 
-			await handleRequest(callback, responseActions, [])(dispatch);
+			await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 		}

package/src/containers/Forms/actions.tsx

@@ -1,5 +1,26 @@
-import { Dispatch } from "redux";
+import { forms, images } from "@ax/api";
+import { appActions } from "@ax/containers/App";
 import {
+	findByEditorID,
+	generateEditorIDs,
+	getLastComponentEditorID,
+	getNewBreadcrumb,
+	getParentKey,
+	moveElement,
+	parseData,
+	updateByEditorID,
+	updateComponent,
+} from "@ax/forms";
+import {
+	deepClone,
+	getDefaultFormTemplate,
+	getDefaultSchema,
+	getImageFromIFrame,
+	getSchema,
+	handleRequest,
+	isReqOk,
+} from "@ax/helpers";
+import type {
 	FormCategoriesList,
 	FormCategoriesOrderParams,
 	FormCategory,
@@ -13,62 +34,43 @@ import {
 	ISchema,
 	ListForm,
 } from "@ax/types";
+
+import type { Dispatch } from "redux";
+
 import {
-	deepClone,
-	getDefaultFormTemplate,
-	getDefaultSchema,
-	getImageFromIFrame,
-	getSchema,
-	handleRequest,
-	isReqOk,
-} from "@ax/helpers";
-import {
-	findByEditorID,
-	generateEditorIDs,
-	getLastComponentEditorID,
-	getNewBreadcrumb,
-	getParentKey,
-	moveElement,
-	parseData,
-	updateByEditorID,
-	updateComponent,
-} from "@ax/forms";
-import { appActions } from "@ax/containers/App";
-import { forms, images } from "@ax/api";
-import {
+	DEFAULT_PARAMS,
 	SET_BREADCRUMB,
 	SET_COPY_MODULE,
+	SET_CURRENT_FORM_CATEGORIES,
 	SET_CURRENT_FORM_ID,
 	SET_FORM_CONTENT,
 	SET_FORMS,
+	SET_IS_IA_TRANSLATED,
+	SET_IS_NEW_TRANSLATION,
 	SET_SCHEMA,
 	SET_SELECTED_CONTENT,
 	SET_SELECTED_EDITOR_ID,
 	SET_SELECTED_PARENT,
+	SET_SUMMARY,
 	SET_TAB,
 	SET_TEMPLATE,
-	SET_SUMMARY,
-	DEFAULT_PARAMS,
-	SET_CURRENT_FORM_CATEGORIES,
-	SET_IS_NEW_TRANSLATION,
-	SET_IS_IA_TRANSLATED,
 } from "./constants";
-import {
+import type {
 	ISetBreadcrumb,
 	ISetCopyModule,
+	ISetCurrentFormCategories,
 	ISetCurrentFormID,
 	ISetFormContent,
 	ISetForms,
+	ISetIsIATranslated,
+	ISetIsNewTranslation,
 	ISetSchema,
 	ISetSelectedContent,
 	ISetSelectedEditorID,
 	ISetSelectedParent,
+	ISetSummary,
 	ISetTab,
 	ISetTemplate,
-	ISetSummary,
-	ISetCurrentFormCategories,
-	ISetIsNewTranslation,
-	ISetIsIATranslated,
 } from "./interfaces";
 import { getUpdatedComponents } from "./utils";
 
@@ -349,7 +351,7 @@ function saveForm(
 			}
 
 			const isNewForm = !formContent.id;
-			formContent["language"] = lang.id;
+			formContent.language = lang.id;
 
 			const callback = async () =>
 				isNewForm ? await forms.createForm(formContent) : await forms.updateForm(formContent.id, formContent);
@@ -360,7 +362,7 @@ function saveForm(
 					if (updateState) {
 						const isUpdated = await forms.updateFormState(pageContent.id, updateState);
 						if (isUpdated) {
-							pageContent["state"] = updateState;
+							pageContent.state = updateState;
 						}
 					}
 					if (isNewForm) {
@@ -413,7 +415,7 @@ function deleteForm(id: number | number[]): (dispatch: Dispatch, getState: () =>
 
 			const callback = async () => (Array.isArray(id) ? await forms.deleteFormBulk(id) : await forms.deleteForm(id));
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -443,7 +445,7 @@ function updateFormState(
 				handleError: (response: any) => handleError(response)(dispatch),
 			};
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -808,7 +810,7 @@ function deleteFormCategory(
 			const callback = async () =>
 				Array.isArray(id) ? forms.deleteFormCategoryBulk(id) : forms.deleteFormCategory(id);
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;

package/src/containers/Gallery/actions.tsx

@@ -1,8 +1,7 @@
-import { Dispatch } from "redux";
-
-import { handleRequest, isReqOk, compressImage, getNewBreadcrumb } from "@ax/helpers";
-import { images, sites, folders } from "@ax/api";
-import {
+import { folders, images, sites } from "@ax/api";
+import { appActions } from "@ax/containers/App";
+import { compressImage, getNewBreadcrumb, handleRequest, isReqOk } from "@ax/helpers";
+import type {
 	IFolder,
 	IFolderTree,
 	IGetFolderParams,
@@ -12,37 +11,38 @@ import {
 	IImageForm,
 	IRootState,
 } from "@ax/types";
-import { appActions } from "@ax/containers/App";
+
+import type { Dispatch } from "redux";
 
 import {
+	SET_BREADCRUMB,
+	SET_CURRENT_FOLDER,
+	SET_CURRENT_FOLDER_CONTENT,
 	SET_DATA,
+	SET_DISPLAY_MODE,
+	SET_FOLDERS_TREE,
 	SET_IS_LOADING,
 	SET_IS_SAVING,
 	SET_IS_UPLOADING,
-	SET_UPLOAD_SUCCESS,
-	SET_UPLOAD_ERROR,
-	SET_DISPLAY_MODE,
 	SET_SELECTED_TAB,
-	SET_CURRENT_FOLDER_CONTENT,
-	SET_CURRENT_FOLDER,
-	SET_BREADCRUMB,
-	SET_FOLDERS_TREE,
+	SET_UPLOAD_ERROR,
+	SET_UPLOAD_SUCCESS,
 } from "./constants";
-import {
+import type {
+	ISetBreadcrumb,
+	ISetCurrentFolder,
+	ISetCurrentFolderContent,
 	ISetData,
+	ISetDisplayMode,
+	ISetFoldersTree,
 	ISetIsLoading,
 	ISetIsSaving,
 	ISetIsUploading,
-	ISetUploadSuccess,
-	ISetUploadError,
-	ISetDisplayMode,
 	ISetSelectedTab,
-	ISetCurrentFolderContent,
-	ISetCurrentFolder,
-	ISetBreadcrumb,
-	ISetFoldersTree,
+	ISetUploadError,
+	ISetUploadSuccess,
 } from "./interfaces";
-import { IData, IIsLoading, IIsSaving } from "./reducer";
+import type { IData, IIsLoading, IIsSaving } from "./reducer";
 
 const thumbWidth = 192;
 const thumbHeight = 144;
@@ -229,7 +229,7 @@ function deleteImage(
 
 			const callback = async () => (isBulk ? images.deleteImageBulk(imageID) : images.deleteImage(imageID));
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -374,7 +374,7 @@ function updateFolder(
 			};
 			const callback = async () => folders.updateFolder(folderID, data);
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -397,7 +397,7 @@ function deleteFolder(
 			};
 			const callback = async () => folders.deleteFolder(folder.id, "images");
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -422,7 +422,7 @@ function moveImage(
 			const callback = async () =>
 				Array.isArray(imageID) ? images.moveImageBulk(imageID, folderID) : images.moveImage(imageID, folderID);
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -452,7 +452,7 @@ function downloadImages(
 
 			const callback = async () => images.downloadImages(imageID, zip);
 
-			await handleRequest(callback, responseActions, [])(dispatch);
+			await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 		}

package/src/containers/Integrations/actions.tsx

@@ -79,7 +79,7 @@ function deleteIntegration(
 				handleError: (response: any) => appActions.handleError(response)(dispatch),
 			};
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -112,7 +112,7 @@ function changeIntegrationState(
 				handleError: (response: any) => appActions.handleError(response)(dispatch),
 			};
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;

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

@@ -383,7 +383,7 @@ function deleteNavigation(
 			const callback = async () =>
 				Array.isArray(navID) ? navigation.deleteNavigationBulk(navID) : navigation.deleteNavigation(navID);
 
-			return await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e); // TODO: capturar error bien
 			return false;

package/src/containers/PageEditor/actions.tsx

@@ -540,7 +540,7 @@ function deletePage(params?: ISavePageParams): (dispatch: Dispatch, getState: ()
 
 			const callback = async () => pages.deletePage(page.id);
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -563,9 +563,9 @@ function deleteBulk(ids: any): (dispatch: Dispatch) => Promise<boolean> {
 				},
 			};
 
-			const callback = async () => pages.bulkDelete(ids);
+			const callback = async () => await pages.bulkDelete(ids);
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -605,7 +605,6 @@ function updatePageStatus(
 ): (dispatch: Dispatch, getState: () => IRootState) => Promise<boolean> {
 	return async (dispatch, getState) => {
 		try {
-			dispatch(setIsSaving(true));
 			const {
 				app: {
 					globalSettings: { skipReviewOnPublish },
@@ -661,7 +660,6 @@ function updatePageStatus(
 
 			return await handleRequest(callback, responseActions, [setIsSaving])(dispatch);
 		} catch (e) {
-			dispatch(setIsSaving(false));
 			console.log(e); // TODO: capturar error bien
 			return false;
 		}

package/src/containers/Redirects/actions.tsx

@@ -128,7 +128,7 @@ function deleteRedirect(
 			const responseActions = {
 				handleSuccess: () => {
 					const params = { ...DEFAULT_PARAMS };
-					const siteFilterQuery = currentSiteInfo && currentSiteInfo.id ? `&sites=${currentSiteInfo.id}` : filter;
+					const siteFilterQuery = currentSiteInfo?.id ? `&sites=${currentSiteInfo.id}` : filter;
 					dispatch(getRedirects(params, siteFilterQuery));
 				},
 				handleError: (response: any) => {
@@ -141,7 +141,7 @@ function deleteRedirect(
 				},
 			};
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;

package/src/containers/Sites/actions.tsx

@@ -638,11 +638,16 @@ function importPageFromGlobal(
 function removeUsersBulk(siteId: number, users: number[]): (dispatch: Dispatch) => Promise<void> {
 	return async (dispatch) => {
 		try {
-			const response = await sites.removeUsersBulk(siteId, users);
-			if (isReqOk(response.status)) {
-				const params = { filterQuery: "?order=dateCreated" };
-				getUsers(params, siteId)(dispatch);
-			}
+			const responseActions = {
+				handleSuccess: async () => {
+					const params = { filterQuery: "?order=dateCreated" };
+					await getUsers(params, siteId)(dispatch);
+				},
+				handleError: (response: any) => appActions.handleError(response)(dispatch),
+			};
+			const callback = async () => await sites.removeUsersBulk(siteId, users);
+
+			await handleRequest(callback, responseActions, [setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e); // TODO: capturar error bien
 		}
@@ -688,7 +693,7 @@ function removePageFromSite(
 					? sites.removePageBulk(currentSiteInfo.id, pageID)
 					: sites.removePage(currentSiteInfo.id, pageID);
 
-			return await handleRequest(callback, responseActions, [])(dispatch);
+			return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
 		} catch (e) {
 			console.log(e);
 			return false;
@@ -756,14 +761,16 @@ function deleteAndRemoveFromSiteBulk(
 			let errors = 0;
 
 			if (pageNoGlobalIds.length > 0) {
-				const result = await handleRequest(callbackPages, responsePageActions, [])(dispatch);
+				const result = await handleRequest(callbackPages, responsePageActions, [appActions.setIsSaving])(dispatch);
 				if (!result) {
 					errors = errors + 1;
 				}
 			}
 
 			if (globalPageIds.length > 0) {
-				const result = await handleRequest(callbackGlobalPages, responseGlobalPageActions, [])(dispatch);
+				const result = await handleRequest(callbackGlobalPages, responseGlobalPageActions, [appActions.setIsSaving])(
+					dispatch,
+				);
 				if (!result) {
 					errors = errors + 1;
 				}