@griddo/ax 10.3.3 → 10.3.5

package/package.json

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

package/src/api/files.tsx

@@ -64,6 +64,12 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: ["/files/", "/replace"],
     method: "PUT",
   },
+  DOWNLOAD_FILES: {
+    ...template,
+    endpoint: "/files/download/",
+    method: "POST",
+    responseType: "blob",
+  },
 };
 
 const uploadFile = async (data: FormData) => {
@@ -76,17 +82,16 @@ const getFolderContent = async (params: IGetFolderParams) => {
     endpoint: [prefix, suffix],
   } = SERVICES.GET_FOLDER_CONTENT;
 
-  const { siteID, folderID, search, filter, order } = params;
+  const { siteID, folderID, search, query: filters = "" } = params;
 
   const data = {
     ...(folderID && { folder: folderID }),
     ...(search && { search }),
-    ...(order && { order }),
-    ...(filter && { filterType: filter }),
   };
 
   const queryParams = encodeData(data);
-  const query = queryParams.length ? `?${queryParams}` : "";
+  const queryFilters = queryParams.length ? `${queryParams}&${filters}` : filters;
+  const query = queryFilters.length ? `?${queryFilters}` : "";
 
   SERVICES.GET_FOLDER_CONTENT.dynamicUrl = `${host}${prefix}${siteID}${suffix}${query}`;
 
@@ -170,6 +175,16 @@ const replaceFile = async (data: FormData, fileID: number, keepUrl: boolean) =>
   return sendRequest(SERVICES.REPLACE_FILE, data as any);
 };
 
+const downloadFiles = async (fileID: number | number[], zip: boolean) => {
+  const { host, endpoint } = SERVICES.DOWNLOAD_FILES;
+
+  const query = zip ? "?zip=on" : "";
+
+  SERVICES.DOWNLOAD_FILES.dynamicUrl = `${host}${endpoint}${fileID}${query}`;
+
+  return sendRequest(SERVICES.DOWNLOAD_FILES);
+};
+
 export default {
   uploadFile,
   getFolderContent,
@@ -183,4 +198,5 @@ export default {
   moveFile,
   moveFilesBulk,
   replaceFile,
+  downloadFiles,
 };

package/src/api/utils.tsx

@@ -1,4 +1,4 @@
-import axios, { AxiosRequestConfig, AxiosResponse, Method } from "axios";
+import axios, { AxiosRequestConfig, AxiosResponse, Method, ResponseType } from "axios";
 import { SET_ERROR } from "./../containers/App/constants";
 
 export interface IServiceConfig {
@@ -8,6 +8,7 @@ export interface IServiceConfig {
   headers: { "Content-type": string; accept: string; site?: number | null; lang?: number };
   hasToken: boolean;
   dynamicUrl?: string;
+  responseType?: ResponseType;
 }
 
 const getToken = (): Record<string, unknown> | null => {
@@ -43,7 +44,7 @@ const getHeaders = (headers: Record<string, unknown>, hasToken: boolean): Record
 };
 
 const wrapConfig = (serviceConfig: IServiceConfig): AxiosRequestConfig => {
-  const { host, endpoint, method, headers: configHeaders, hasToken, dynamicUrl } = serviceConfig;
+  const { host, endpoint, method, headers: configHeaders, hasToken, dynamicUrl, responseType } = serviceConfig;
 
   const headers = getHeaders(configHeaders, hasToken);
 
@@ -51,6 +52,7 @@ const wrapConfig = (serviceConfig: IServiceConfig): AxiosRequestConfig => {
     url: dynamicUrl ? dynamicUrl : `${host}${endpoint}`,
     method,
     headers,
+    responseType,
   };
 };
 

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

@@ -12,7 +12,7 @@ const FileField = (props: IFileFieldProps): JSX.Element => {
 
   const { isOpen, toggleModal } = useModal(false);
 
-  const validFormats = ["pdf", "doc", "docx", "xls", "xlsx", "zip"];
+  const validFormats = ["pdf", "doc", "docx", "xls", "xlsx", "zip", "csv"];
 
   const handleClick = () => {
     if (!disabled) {

package/src/components/FileGallery/index.tsx

@@ -14,7 +14,7 @@ import {
   BackFolder,
 } from "@ax/components";
 import { fileDriveActions } from "@ax/containers/FileDrive";
-import { usePermission } from "@ax/hooks";
+import { usePermission, useResizable } from "@ax/hooks";
 
 import GalleryPanel from "./GalleryPanel";
 import GridItem from "./GridItem";
@@ -25,6 +25,10 @@ import * as S from "./style";
 // refactor
 import Breadcrumb from "@ax/modules/FileDrive/Breadcrumb";
 import FolderTree from "@ax/modules/FileDrive/FolderTree";
+import Type from "@ax/modules/FileDrive/FileFilters/Type";
+import SortBy from "@ax/modules/FileDrive/FileFilters/SortBy";
+import { useFilterQuery, useSortedListStatus } from "@ax/modules/FileDrive/hooks";
+import { getSortedListStatus } from "@ax/modules/FileDrive/utils";
 
 const FileGallery = (props: IProps): JSX.Element => {
   const {
@@ -57,6 +61,11 @@ const FileGallery = (props: IProps): JSX.Element => {
 
   const galleryRef = useRef<HTMLDivElement>(null);
 
+  const [ref] = useResizable();
+
+  const { setFiltersSelection, setFilterQuery, filterValues } = useFilterQuery();
+  const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
+  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
   const [searchQuery, setSearchQuery] = useState<string>("");
   const isSearching = searchQuery.length > 0;
 
@@ -95,10 +104,11 @@ const FileGallery = (props: IProps): JSX.Element => {
       folderID: currentFolderID,
       search: searchQuery,
       loading: false,
+      query: currentFilterQuery,
     };
 
     return params;
-  }, [currentFolderID, searchQuery, selectedTab]);
+  }, [currentFolderID, searchQuery, selectedTab, currentFilterQuery]);
 
   useLayoutEffect(() => {
     return () => {
@@ -158,6 +168,21 @@ const FileGallery = (props: IProps): JSX.Element => {
     await getFolderContent(params);
   };
 
+  const sortItems = async (orderPointer: string, isAscending: boolean) => {
+    const sortedState = getSortedListStatus(orderPointer, isAscending);
+    setSortedListStatus(sortedState);
+
+    const filtersSelection = setFiltersSelection("order", orderPointer, isAscending);
+    const filterQuery = setFilterQuery(filtersSelection);
+    setCurrentFilterQuery(filterQuery);
+  };
+
+  const filterItems = async (filterPointer: string, filtersSelected: string) => {
+    const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
+    const filterQuery = setFilterQuery(filtersSelection);
+    setCurrentFilterQuery(filterQuery);
+  };
+
   const foldersIcon = isPanelOpen ? <Icon name="closePanel" size="24" /> : <Icon name="openPanel" size="24" />;
 
   const emptySearchStateProps = {
@@ -173,87 +198,93 @@ const FileGallery = (props: IProps): JSX.Element => {
 
   return (
     <S.Wrapper data-testid="file-gallery-wrapper">
-      <S.FolderPanel isOpen={isPanelOpen}>
+      <S.FolderPanel isOpen={isPanelOpen} ref={ref}>
         <S.FolderPanelContent>
-          <FolderTree folderID={currentFolderID || 0} onClick={updateCurrentFolder} title="Folders" trimNames={true} />
+          <FolderTree folderID={currentFolderID || 0} onClick={updateCurrentFolder} title="Folders" />
         </S.FolderPanelContent>
+        <S.ResizeHandle className="resizer" />
       </S.FolderPanel>
       <S.ContentWrapper>
-          {!!tabs.length && <S.Header>
+        {!!tabs.length && (
+          <S.Header>
             {!!tabs.length && (
               <S.TabsWrapper>
                 <Tabs tabs={tabs} active={selectedTab} setSelectedTab={handleSelectedTab} noMargins />
               </S.TabsWrapper>
             )}
-            <S.Filters></S.Filters>
-          </S.Header>}
-          <S.Search>
-            <SearchField onChange={setSearchQuery} placeholder="Type file’s name, title, or #tag" />
-          </S.Search>
-          <S.GalleryWrapper ref={galleryRef}>
-            {isGlobalTab && isSiteView && (
-              <S.NotificationWrapper>
-                <Notification
-                  type="info"
-                  text="This is a global Library. All the changes you make will be applied to all the sites."
-                />
-              </S.NotificationWrapper>
-            )}
-            <ErrorToast size="l" />
-            {isLoading ? (
-              <S.LoadingWrapper>
-                <Loader name="circle" />
-              </S.LoadingWrapper>
-            ) : (
-              <>
-                {!isRoot && !isSearching && <Breadcrumb breadcrumb={breadcrumb} onClick={updateCurrentFolder} />}
-                {(hasFolders || (!isRoot && !isSearching)) && (
-                  <S.SectionWrapper>
-                    <S.SectionHeader>
-                      <S.SectionTitle>
-                        <div>Folders</div>
-                        <S.FoldersIconWrapper onClick={togglePanel}>
-                          <Tooltip content="Open folder panel">{foldersIcon}</Tooltip>
-                        </S.FoldersIconWrapper>
-                      </S.SectionTitle>
-                    </S.SectionHeader>
-                    <S.FoldersWrapper>
-                      {!isRoot && !isSearching && <BackFolder onClick={handleBackClick} size="S" />}
-                      <S.FoldersGrid>
-                        {folders.map((folder: IFolder) => (
-                          <FolderItem folder={folder} onClick={updateCurrentFolder} key={folder.folderName} />
-                        ))}
-                      </S.FoldersGrid>
-                    </S.FoldersWrapper>
-                  </S.SectionWrapper>
-                )}
+            <S.Filters>
+              <Type filterItems={filterItems} value={filterValues["filterType"]} />
+              <SortBy sortItems={sortItems} sortedState={sortedListStatus} />
+            </S.Filters>
+          </S.Header>
+        )}
+        <S.Search>
+          <SearchField onChange={setSearchQuery} placeholder="Type file’s name, title, or #tag" autoFocus={false} />
+        </S.Search>
+        <S.GalleryWrapper ref={galleryRef}>
+          {isGlobalTab && isSiteView && (
+            <S.NotificationWrapper>
+              <Notification
+                type="info"
+                text="This is a global Library. All the changes you make will be applied to all the sites."
+              />
+            </S.NotificationWrapper>
+          )}
+          <ErrorToast size="l" />
+          {isLoading ? (
+            <S.LoadingWrapper>
+              <Loader name="circle" />
+            </S.LoadingWrapper>
+          ) : (
+            <>
+              {!isRoot && !isSearching && <Breadcrumb breadcrumb={breadcrumb} onClick={updateCurrentFolder} />}
+              {(hasFolders || (!isRoot && !isSearching)) && (
                 <S.SectionWrapper>
                   <S.SectionHeader>
-                    <S.SectionTitle>Documents</S.SectionTitle>
+                    <S.SectionTitle>
+                      <div>Folders</div>
+                      <S.FoldersIconWrapper onClick={togglePanel}>
+                        <Tooltip content="Open folder panel">{foldersIcon}</Tooltip>
+                      </S.FoldersIconWrapper>
+                    </S.SectionTitle>
                   </S.SectionHeader>
-                  {!items.length ? (
-                    <S.EmptyWrapper>
-                      {isSearching ? (
-                        <EmptyState {...emptySearchStateProps} />
-                      ) : (
-                        <EmptyState {...emptyFolderStateProps} />
-                      )}
-                    </S.EmptyWrapper>
-                  ) : (
-                    <S.Grid>
-                      {items &&
-                        items.map((item: IFile) => {
-                          const isSelected = item.id === selectedFile?.id;
-                          return (
-                            <GridItem file={item} onClick={handleClick} key={item.fileName} isSelected={isSelected} />
-                          );
-                        })}
-                    </S.Grid>
-                  )}
+                  <S.FoldersWrapper>
+                    {!isRoot && !isSearching && <BackFolder onClick={handleBackClick} size="S" />}
+                    <S.FoldersGrid>
+                      {folders.map((folder: IFolder) => (
+                        <FolderItem folder={folder} onClick={updateCurrentFolder} key={folder.folderName} />
+                      ))}
+                    </S.FoldersGrid>
+                  </S.FoldersWrapper>
                 </S.SectionWrapper>
-              </>
-            )}
-          </S.GalleryWrapper>
+              )}
+              <S.SectionWrapper>
+                <S.SectionHeader>
+                  <S.SectionTitle>Documents</S.SectionTitle>
+                </S.SectionHeader>
+                {!items.length ? (
+                  <S.EmptyWrapper>
+                    {isSearching ? (
+                      <EmptyState {...emptySearchStateProps} />
+                    ) : (
+                      <EmptyState {...emptyFolderStateProps} />
+                    )}
+                  </S.EmptyWrapper>
+                ) : (
+                  <S.Grid>
+                    {items &&
+                      items.map((item: IFile) => {
+                        const isSelected = item.id === selectedFile?.id;
+                        return (
+                          <GridItem file={item} onClick={handleClick} key={item.fileName} isSelected={isSelected} />
+                        );
+                      })}
+                  </S.Grid>
+                )}
+              </S.SectionWrapper>
+            </>
+          )}
+        </S.GalleryWrapper>
       </S.ContentWrapper>
       <GalleryPanel
         selectedFile={selectedFile}

package/src/components/FileGallery/style.tsx

@@ -7,11 +7,13 @@ const Wrapper = styled.div`
 `;
 
 const FolderPanel = styled.div<{ isOpen: boolean }>`
+  position: relative;
   background-color: ${(p) => p.theme.color.uiBackground02};
   border-right: ${(p) => `1px solid ${p.theme.color.uiLine}`};
   width: ${(p) => (p.isOpen ? "192px" : "0")};
+  min-width: ${(p) => (p.isOpen ? "192px" : "0")};
+  max-width: ${(p) => (p.isOpen ? "370px" : "0")};
   overflow: hidden;
-  transition: width 0.8s ease-out;
   flex-shrink: 0;
 `;
 
@@ -55,7 +57,7 @@ const Filters = styled.div`
 
   & > * {
     &:not(:last-child) {
-      margin-right: ${(p) => p.theme.spacing.l};
+      margin-right: ${(p) => p.theme.spacing.m};
     }
   }
 `;
@@ -150,6 +152,19 @@ const FoldersIconWrapper = styled.div`
   cursor: pointer;
 `;
 
+const ResizeHandle = styled.div`
+  position: absolute;
+  width: 2px;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  cursor: col-resize;
+
+  &:hover {
+    background-color: ${(p) => p.theme.color.interactive01};
+  }
+`;
+
 export {
   Wrapper,
   FolderPanel,
@@ -169,5 +184,6 @@ export {
   SectionTitle,
   FoldersGrid,
   FoldersWrapper,
-  FoldersIconWrapper
+  FoldersIconWrapper,
+  ResizeHandle,
 };

package/src/components/Icon/components/Download.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+const SvgDownload = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path fill="#5057FF" fillRule="evenodd" d="M15 9h4l-7 7-7-7h4V3h6v6ZM5 20v-2h14v2H5Z" clipRule="evenodd" />
+  </svg>
+);
+export default SvgDownload;

package/src/components/Icon/svgs/Download.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 fill-rule="evenodd" clip-rule="evenodd" d="M15 9H19L12 16L5 9H9V3H15V9ZM5 20V18H19V20H5Z" fill="#5057FF"/>
+</svg>

package/src/components/SearchField/index.tsx

@@ -16,12 +16,27 @@ const SearchField = (props: ISearchFieldProps): JSX.Element => {
     small,
     autoFocus = true,
     size = "M",
+    value,
   } = props;
 
   const [isOpen, setIsOpen] = useState(false);
-  const [inputValue, setInputValue] = useState("");
+  const [inputValue, setInputValue] = useState(value || "");
   const [selectValue, setSelectValue] = useState<string>("");
 
+  useEffect(() => {
+    if (inputValue.length === 0) {
+      setIsOpen(false);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [inputValue]);
+
+  useEffect(() => {
+    if (value !== inputValue) {
+      setInputValue(value || "");
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value]);
+
   const toggleField = () => setIsOpen(!isOpen);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -123,6 +138,7 @@ export interface ISearchFieldProps {
   small?: boolean;
   autoFocus?: boolean;
   size?: "M" | "S" | "XS";
+  value?: string;
 }
 
 export default SearchField;

package/src/components/SearchField/style.tsx

@@ -17,6 +17,9 @@ const FieldWrapper = styled.div<{ closeOnInactive: boolean; disabled: boolean }>
   border-width: ${(p) => (p.closeOnInactive ? "0 0 1px" : "1px")};
   border-style: solid;
   border-radius: ${(p) => (p.closeOnInactive ? 0 : p.theme.radii.s)};
+  &:focus-within {
+    border-color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.interactive01)};
+  }
 `;
 
 const Input = styled.input<{
@@ -32,13 +35,13 @@ const Input = styled.input<{
   height: ${(p) => (p.inputSize === "XS" ? "40px" : p.theme.spacing.l)};
   padding-left: ${(p) => p.theme.spacing.xs};
   border: none;
+  border-radius: ${(p) => (p.closeOnInactive ? 0 : p.theme.radii.s)};
   width: ${(p) =>
     p.small || p.inputSize !== "M" ? `calc(${p.theme.spacing.xl} * 2)` : `calc(${p.theme.spacing.xl} * 4)`};
 
   &:active,
   &:focus {
     outline: none;
-    border-color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.interactive01)};
   }
 `;
 

package/src/components/Tag/index.tsx

@@ -4,7 +4,7 @@ import { Icon } from "@ax/components";
 import * as S from "./style";
 
 const Tag = (props: ITagProps): JSX.Element => {
-  const { type, text, color, onDeleteAction } = props;
+  const { type, text, color, icon, onDeleteAction } = props;
 
   const handleClick = () => {
     if (onDeleteAction) {
@@ -27,7 +27,16 @@ const Tag = (props: ITagProps): JSX.Element => {
         </S.TagStatus>
       );
     case "square":
-      return <S.TagSquare color={color} data-testid="tag-square">{text}</S.TagSquare>;
+      return (
+        <S.TagSquare color={color} data-testid="tag-square">
+          {icon && (
+            <S.IconTag>
+              <Icon name={icon} size="16" />
+            </S.IconTag>
+          )}
+          <div>{text}</div>
+        </S.TagSquare>
+      );
     default:
       return (
         <S.TagFixed color={color} data-testid="tag-fixed">
@@ -44,6 +53,7 @@ export interface ITagProps {
   type?: "status" | "fixed" | "interactive" | "square" | undefined;
   text: string;
   color?: string;
+  icon?: string;
   onDeleteAction?: () => void;
 }
 

package/src/components/Tag/style.tsx

@@ -14,12 +14,12 @@ export const TagStatus = styled.div`
 
 export const TagSquare = styled.div<{ color: string | undefined }>`
   ${(p) => p.theme.textStyle.uiXS};
+  display: flex;
   background-color: ${(p) => (p.color ? p.color : p.theme.colors.uiBackground01)};
   box-sizing: border-box;
   border-radius: ${(p) => p.theme.radii.xs};
   color: ${(p) => (p.color ? p.theme.color.textMediumEmphasisInverse : p.theme.color.textMediumEmphasis)};
   white-space: nowrap;
-  display: inline-block;
   padding: 3px 8px;
   text-transform: capitalize;
 `;
@@ -34,26 +34,36 @@ export const Bullet = styled.span<{ color: string | undefined }>`
 `;
 
 export const TagFixed = styled.div<{ color: string | undefined }>`
-  ${(p) => p.theme.textStyle?.uiS};
-  background-color: ${(p) => (p.color ? p.color : p.theme.color?.interactive02)};
-  border-radius: ${(p) => p.theme.spacing?.s};
+  ${(p) => p.theme.textStyle.uiS};
+  background-color: ${(p) => (p.color ? p.color : p.theme.color.interactive02)};
+  border-radius: ${(p) => p.theme.spacing.s};
   box-sizing: border-box;
-  color: ${(p) => p.theme.color?.textMediumEmphasis};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
   display: inline-block;
   padding: 3px 8px;
-  margin-right: ${(p) => p.theme.spacing?.xxs};
-  margin-bottom: ${(p) => p.theme.spacing?.xxs};
+  margin-right: ${(p) => p.theme.spacing.xxs};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
 `;
 
 export const Title = styled.div``;
 
 export const IconWrapper = styled.div`
   height: 16px;
-  margin-left: ${(p) => p.theme.spacing?.xxs};
+  margin-left: ${(p) => p.theme.spacing.xxs};
   cursor: pointer;
   svg {
     path {
-      fill: ${(p) => p.theme.color?.textMediumEmphasis};
+      fill: ${(p) => p.theme.color.textMediumEmphasis};
+    }
+  }
+`;
+
+export const IconTag = styled.div`
+  height: 16px;
+  margin-right: ${(p) => p.theme.spacing.xs};
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.textMediumEmphasis};
     }
   }
 `;

package/src/containers/FileDrive/actions.tsx

@@ -367,6 +367,31 @@ function replaceFile(
   };
 }
 
+function downloadFiles(fileID: number | number[], zip: boolean, fileName?: string): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    try {
+      const responseActions = {
+        handleSuccess: (response: any) => {
+          const url = window.URL.createObjectURL(new Blob([response]));
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = fileName ? fileName : "download.zip"
+          document.body.appendChild(a);
+          a.click();
+          window.URL.revokeObjectURL(url);
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      const callback = async () => files.downloadFiles(fileID, zip);
+
+      await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+}
+
 export {
   getFolderContent,
   updateCurrentFolder,
@@ -383,4 +408,5 @@ export {
   updateDisplayMode,
   updateTab,
   replaceFile,
+  downloadFiles,
 };

package/src/containers/Sites/actions.tsx

@@ -279,7 +279,6 @@ function setSiteInfo(currentSiteInfo: ISite): (dispatch: any, getState: any) =>
       }
 
       getUserCurrentPermissions()(dispatch, getState);
-
     } catch (e) {
       console.log(e); // FIXME: capturar errores
     }
@@ -456,8 +455,8 @@ function resetSiteValues(siteID: number): (dispatch: Dispatch) => void {
     dispatch(setCurrentSitePages([]));
     dispatch(setTotalItems(0));
     getAnalytics(siteID)(dispatch);
-  }
-};
+  };
+}
 
 function saveCurrentSiteInfo(): (dispatch: Dispatch, getState: any) => Promise<void> {
   return async (dispatch, getState) => {
@@ -584,13 +583,6 @@ function deleteAndRemoveFromSiteBulk(
 
       let responseErrorPages: any = { data: { code: null, message: null } };
 
-      const responsePageActions = {
-        handleSuccess: () => true,
-        handleError: (response: any) => {
-          responseErrorPages = response;
-        },
-      };
-
       const getMessageErrors = () => {
         const {
           data: { message },
@@ -601,6 +593,14 @@ function deleteAndRemoveFromSiteBulk(
         appActions.handleError(responseErrorPages, isMultiple, msg)(dispatch);
       };
 
+      const responsePageActions = {
+        handleSuccess: () => true,
+        handleError: (response: any) => {
+          responseErrorPages = response;
+          getMessageErrors();
+        },
+      };
+
       const responseGlobalPageActions = {
         handleSuccess: () => {
           if (responseErrorPages.data.message?.length > 0) {
@@ -624,10 +624,23 @@ function deleteAndRemoveFromSiteBulk(
       const callbackPages = async () => pages.bulkDelete(pageIds);
       const callbackGlobalPages = async () => sites.removePageBulk(currentSiteInfo.id, globalPageIds);
 
-      const resultPages = pageIds.length > 0 ? await handleRequest(callbackPages, responsePageActions, [])(dispatch) : true;
-      const resultGlobalPages = globalPageIds.length > 0 ? await handleRequest(callbackGlobalPages, responseGlobalPageActions, [])(dispatch) : true;
+      let errors = 0;
+
+      if (pageIds.length > 0) {
+        const result = await handleRequest(callbackPages, responsePageActions, [])(dispatch);
+        if (!result) {
+          errors = errors + 1;
+        }
+      }
+
+      if (globalPageIds.length > 0) {
+        const result = await handleRequest(callbackGlobalPages, responseGlobalPageActions, [])(dispatch);
+        if (!result) {
+          errors = errors + 1;
+        }
+      }
 
-      return resultPages || resultGlobalPages;
+      return errors > 0 ? false : true;
     } catch (e) {
       console.log(e);
       return false;