@griddo/ax 11.14.5-rc.0 → 11.15.1-rc.2

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "11.14.5-rc.0",
+	"version": "11.15.1-rc.2",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -219,5 +219,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "35106a4e094a9b210ac358d51ad5a2d80dbc6a2d"
+	"gitHead": "10113091118b2f939c4861e5a39c3f8b38a839ac"
 }

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

@@ -67,11 +67,10 @@ const PageConnectedField = (props: any): JSX.Element => {
 
 	let isTemplateActivated = true;
 	if (selectedContent.template && !isGlobal && !isFormTemplate) {
-		isTemplateActivated =
+		isTemplateActivated = !!(
 			activatedTemplates.find((temp: any) => temp.id === selectedContent.template.templateType) &&
 			!isTemplateExcludedFromTheme(themeElements, selectedContent.template.templateType)
-				? true
-				: false;
+		);
 	}
 
 	const parentIsReadOnly =

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

@@ -1,23 +1,24 @@
-import React from "react";
-
 import { RadioGroup } from "@ax/components";
+
 import * as S from "./style";
 
 const ConditionalField = (props: IConditionalFieldProps) => {
-	const { value, options, innerFields, onChange, defaultValue, disabled } = props;
+	const { value, options, innerFields, onChange, defaultValue, disabled, fields } = props;
 
 	const safeValue = value === undefined ? defaultValue : value;
 
 	const handleChange = (newValue: any) => onChange(newValue);
 
+	const visibleFields = innerFields?.filter((item: any, index: number) => {
+		const condition = item?.props?.field?.condition || fields?.[index]?.condition;
+		return condition === undefined || condition === value;
+	});
+
 	return (
 		<S.Wrapper>
 			<RadioGroup name="radio" value={safeValue} options={options} onChange={handleChange} disabled={disabled} />
 			<S.Content data-testid="conditionalFieldContent">
-				{innerFields &&
-					innerFields.map((item: any) => {
-						return value === item.props.field.condition && item;
-					})}
+				{visibleFields}
 			</S.Content>
 		</S.Wrapper>
 	);
@@ -29,6 +30,7 @@ interface IConditionalFieldProps {
 	value?: string | boolean;
 	options: any[];
 	innerFields: any;
+	fields?: any[];
 	onChange: (value: any) => void;
 	defaultValue?: string | boolean;
 	disabled?: boolean;

package/src/containers/Forms/utils.tsx

@@ -20,7 +20,7 @@ const getUpdatedComponents = (editorContent: any, element: any, key: string) =>
 	const mapValues = (item: any) => {
 		if (item.editorID !== undefined && item.editorID === editorID) {
 			if (isCollectionItem) {
-				item[key] = updateCollection(type, item[key]);
+				item[key] = updateCollection(type, item[key] || []);
 			} else {
 				addElement(type);
 			}

package/src/containers/StructuredData/actions.tsx

@@ -629,18 +629,13 @@ function setIsTranslated(isTranslated: boolean): (dispatch: Dispatch) => Promise
 	};
 }
 
-function resetCurrentData(): (dispatch: Dispatch) => Promise<void> {
-	return async (dispatch) => {
-		try {
-			dispatch(setCurrentData(null));
-			dispatch(setCurrentDataID(null));
-			dispatch(setCurrentDataContent([]));
-			dispatch(setSchema({}));
-			dispatch(setFilter("all-pages"));
-			//dispatch(setCurrentSearch(""));
-		} catch (e) {
-			console.log("Error", e);
-		}
+function resetCurrentData(): (dispatch: Dispatch) => void {
+	return (dispatch) => {
+		dispatch(setCurrentData(null));
+		dispatch(setCurrentDataID(null));
+		dispatch(setCurrentDataContent([]));
+		dispatch(setSchema({}));
+		dispatch(setFilter("all-pages"));
 	};
 }
 

package/src/hooks/index.tsx

@@ -13,7 +13,7 @@ import { useURLSearchParam } from "./location";
 import { useHandleClickOutside, useModal, useModals, useToast } from "./modals";
 import { useNetworkStatus } from "./network";
 import { useResizable } from "./resize";
-import { useGlobalPermission, usePermission, usePermissions } from "./users";
+import { useGlobalPermission, usePermission, usePermissions, usePermissionsForSite } from "./users";
 import { useFirefoxScrollLock, useWindowSize } from "./window";
 
 export {
@@ -35,6 +35,7 @@ export {
 	useOnMessageReceivedFromOutside,
 	usePermission,
 	usePermissions,
+	usePermissionsForSite,
 	usePrevious,
 	useResizable,
 	useShouldBeSaved,

package/src/hooks/users.tsx

@@ -4,13 +4,22 @@ import { useSelector } from "react-redux";
 import type { IRootState } from "@ax/types";
 
 const usePermission = (permission: string | string[] | undefined): boolean => {
+	const currentUser = useSelector((state: IRootState) => state.users.currentUser);
 	const userPermissions = useSelector((state: IRootState) => state.users.currentPermissions);
 	const isSuperAdmin = useSelector((state: IRootState) => state.users.currentUser?.isSuperAdmin);
 
 	const isAllowedTo = (permissions: string[]) =>
 		userPermissions && permissions.some((permission: string) => userPermissions.includes(permission));
 
-	if (!permission || isSuperAdmin) {
+	if (!permission) {
+		return true;
+	}
+
+	if (!currentUser) {
+		return false;
+	}
+
+	if (isSuperAdmin) {
 		return true;
 	}
 
@@ -20,10 +29,21 @@ const usePermission = (permission: string | string[] | undefined): boolean => {
 };
 
 const usePermissions = <T extends Record<string, string | string[]>>(permissions: T): Record<keyof T, boolean> => {
+	const currentUser = useSelector((state: IRootState) => state.users.currentUser);
 	const userPermissions = useSelector((state: IRootState) => state.users.currentPermissions);
 	const isSuperAdmin = useSelector((state: IRootState) => state.users.currentUser?.isSuperAdmin);
 
 	return useMemo(() => {
+		if (!currentUser) {
+			return Object.keys(permissions).reduce(
+				(acc, key) => {
+					acc[key as keyof T] = false;
+					return acc;
+				},
+				{} as Record<keyof T, boolean>,
+			);
+		}
+
 		const isAllowedTo = (permission: string | string[]) => {
 			if (isSuperAdmin) return true;
 			const arrayPermission = Array.isArray(permission) ? permission : [permission];
@@ -35,17 +55,26 @@ const usePermissions = <T extends Record<string, string | string[]>>(permissions
 			result[key] = isAllowedTo(permissions[key]);
 		}
 		return result as Record<keyof T, boolean>;
-	}, [permissions, userPermissions, isSuperAdmin]);
+	}, [permissions, userPermissions, isSuperAdmin, currentUser]);
 };
 
 const useGlobalPermission = (permission: string | string[] | undefined): boolean => {
+	const currentUser = useSelector((state: IRootState) => state.users.currentUser);
 	const userPermissions = useSelector((state: IRootState) => state.users.globalPermissions);
 	const isSuperAdmin = useSelector((state: IRootState) => state.users.currentUser?.isSuperAdmin);
 
 	const isAllowedTo = (permissions: string[]) =>
 		userPermissions && permissions.some((permission: string) => userPermissions.includes(permission));
 
-	if (!permission || isSuperAdmin) {
+	if (!permission) {
+		return true;
+	}
+
+	if (!currentUser) {
+		return false;
+	}
+
+	if (isSuperAdmin) {
 		return true;
 	}
 
@@ -54,4 +83,66 @@ const useGlobalPermission = (permission: string | string[] | undefined): boolean
 	return isAllowedTo(arrayPermission);
 };
 
-export { usePermission, usePermissions, useGlobalPermission };
+const usePermissionsForSite = <T extends Record<string, string | string[]>>(
+	siteId: number | string,
+	permissions: T,
+): Record<keyof T, boolean> => {
+	const currentUser = useSelector((state: IRootState) => state.users.currentUser);
+	const roles = useSelector((state: IRootState) => state.users.roles);
+	const isSuperAdmin = useSelector((state: IRootState) => state.users.currentUser?.isSuperAdmin);
+
+	return useMemo(() => {
+		if (!currentUser) {
+			return Object.keys(permissions).reduce(
+				(acc, key) => {
+					acc[key as keyof T] = false;
+					return acc;
+				},
+				{} as Record<keyof T, boolean>,
+			);
+		}
+
+		if (isSuperAdmin) {
+			return Object.keys(permissions).reduce(
+				(acc, key) => {
+					acc[key as keyof T] = true;
+					return acc;
+				},
+				{} as Record<keyof T, boolean>,
+			);
+		}
+
+		const userRoles = currentUser.roles.find(
+			(roleSite) => roleSite.siteId === siteId || roleSite.siteId === "all",
+		)?.roles;
+
+		if (!userRoles?.length) {
+			return Object.keys(permissions).reduce(
+				(acc, key) => {
+					acc[key as keyof T] = false;
+					return acc;
+				},
+				{} as Record<keyof T, boolean>,
+			);
+		}
+
+		const sitePermissions: string[] = [];
+		userRoles.forEach((roleID: number) => {
+			const role = roles?.find((r) => r.id === roleID);
+			if (role) {
+				const rolePerms = role.permissions.sitePermissions.map((perm) => perm.key);
+				sitePermissions.push(...rolePerms);
+			}
+		});
+
+		const result: Record<string, boolean> = {};
+		for (const key of Object.keys(permissions)) {
+			const permission = permissions[key as keyof T];
+			const arrayPermission = Array.isArray(permission) ? permission : [permission];
+			result[key] = arrayPermission.some((perm: string) => sitePermissions.includes(perm));
+		}
+		return result as Record<keyof T, boolean>;
+	}, [siteId, permissions, currentUser, roles, isSuperAdmin]);
+};
+
+export { usePermission, usePermissions, useGlobalPermission, usePermissionsForSite };

package/src/modules/Categories/CategoriesList/index.tsx

@@ -5,7 +5,7 @@ import { EmptyState, ErrorToast, FilterTagsBar, MainWrapper, SearchTagsBar, Tabl
 import { appActions } from "@ax/containers/App";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { sortBy } from "@ax/helpers";
-import { useBulkSelection, useModal, usePermission, useToast } from "@ax/hooks";
+import { useBulkSelection, useModals, usePermissions, useToast } from "@ax/hooks";
 import { LOCALE, toTitleCase } from "@ax/locales";
 import type {
 	ICategoryGroup,
@@ -67,7 +67,6 @@ const CategoriesList = (props: IProps): JSX.Element => {
 		activatedDataPacks,
 		deleteDataContent,
 		setHistoryPush,
-		resetCurrentData,
 		deleteCategoryGroup,
 		orderCategory,
 	} = props;
@@ -81,17 +80,19 @@ const CategoriesList = (props: IProps): JSX.Element => {
 	const [overId, setOverId] = useState<UniqueIdentifier | null>(null);
 	const [offsetLeft, setOffsetLeft] = useState(0);
 	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
-	const { isOpen: isGroupOpen, toggleModal: toggleGroupModal } = useModal();
 	const tableRef = useRef<HTMLDivElement>(null);
 	const { setFiltersSelection, resetFilterQuery, filterValues, filterQuery } = useFilterQuery();
+	const { isOpen, toggleModal } = useModals(["panel", "delete", "group"]);
 
-	const allowedToCreateSiteCategory = usePermission("categories.createSiteTaxonomies");
-	const allowedToCreateGlobalCategory = usePermission("global.globalData.createTaxonomies");
-	const allowedToDeleteSiteCategory = usePermission("categories.deleteSiteTaxonomies");
-	const allowedToDeleteGlobalCategory = usePermission("global.globalData.deleteTaxonomies");
-	const allowedToDeleteTaxonomy = currentSiteID ? allowedToDeleteSiteCategory : allowedToDeleteGlobalCategory;
-	const allowedToCreateTaxonomy = currentSiteID ? allowedToCreateSiteCategory : allowedToCreateGlobalCategory;
+	const isAllowedTo = usePermissions({
+		createSiteCategory: "categories.createSiteTaxonomies",
+		createGlobalCategory: "global.globalData.createTaxonomies",
+		deleteSiteCategory: "categories.deleteSiteTaxonomies",
+		deleteGlobalCategory: "global.globalData.deleteTaxonomies",
+	});
+
+	const allowedToDeleteTaxonomy = currentSiteID ? isAllowedTo.deleteSiteCategory : isAllowedTo.deleteGlobalCategory;
+	const allowedToCreateTaxonomy = currentSiteID ? isAllowedTo.createSiteCategory : isAllowedTo.createGlobalCategory;
 
 	const scope = currentSiteID ? "site" : "global";
 	const currentCategories = categories[scope].sort(sortBy("title", false));
@@ -177,9 +178,6 @@ const CategoriesList = (props: IProps): JSX.Element => {
 		if (currentCategories.length) {
 			setSelectedCategory(currentCategories[0].id, scope);
 		}
-		return () => {
-			resetCurrentData();
-		};
 	}, []);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
@@ -191,12 +189,10 @@ const CategoriesList = (props: IProps): JSX.Element => {
 		setSelectedCategory(dataID, scope);
 	};
 
-	const { isOpen, toggleModal } = useModal();
-
 	const rightButtonProps = allowedToCreateTaxonomy
 		? {
 				label: "New",
-				action: toggleModal,
+				action: () => toggleModal("panel"),
 			}
 		: undefined;
 
@@ -212,8 +208,8 @@ const CategoriesList = (props: IProps): JSX.Element => {
 			currentStructuredData && getContents(currentStructuredData.id);
 			toggleToast(`${selectedItems.all.length} categories and/or groups deleted`);
 			unselectAllItems();
-			isDeleteOpen && toggleDeleteModal();
-			isGroupOpen && toggleGroupModal();
+			isOpen("delete") && toggleModal("delete");
+			isOpen("group") && toggleModal("group");
 		}
 		setIsBulkLoading(false);
 	};
@@ -221,7 +217,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
 	const handleToggleDeleteModal = () => {
 		const selectedCategories = currentDataContent.filter((category) => selectedItems.all.includes(category.id));
 		const hasGroups = selectedCategories.some((category) => category.type === "group");
-		hasGroups ? toggleGroupModal() : toggleDeleteModal();
+		hasGroups ? toggleModal("group") : toggleModal("delete");
 	};
 
 	const unselectAllItems = () => resetBulkSelection();
@@ -342,7 +338,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
 			? `To start using ${categoryName} categories, create as many of them as yo need.`
 			: "To start using categories in your site, you must active all Content type packages as you need.",
 		button: hasCategories ? `Create ${categoryName} category` : "Activate Content type packages",
-		action: hasCategories ? toggleModal : () => setHistoryPush("/sites/settings/content-types"),
+		action: hasCategories ? () => toggleModal("panel") : () => setHistoryPush("/sites/settings/content-types"),
 	};
 
 	const mainDeleteModalAction = {
@@ -353,7 +349,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
 
 	const secondaryDeleteModalAction = {
 		title: "Cancel",
-		onClick: toggleDeleteModal,
+		onClick: () => toggleModal("delete"),
 	};
 
 	const mainDeleteGroupModalAction = {
@@ -364,7 +360,7 @@ const CategoriesList = (props: IProps): JSX.Element => {
 
 	const secondaryDeleteGroupModalAction = {
 		title: "cancel",
-		onClick: toggleGroupModal,
+		onClick: () => toggleModal("group"),
 	};
 
 	return (
@@ -450,19 +446,24 @@ const CategoriesList = (props: IProps): JSX.Element => {
 					</TableList>
 				</S.TableWrapper>
 			</S.CategoryListWrapper>
-			<CategoryPanel isOpen={isOpen} toggleModal={toggleModal} getContents={getContents} toggleToast={toggleToast} />
-			{isDeleteOpen && (
+			<CategoryPanel
+				isOpen={isOpen("panel")}
+				toggleModal={() => toggleModal("panel")}
+				getContents={getContents}
+				toggleToast={toggleToast}
+			/>
+			{isOpen("delete") && (
 				<DeleteModal
-					isOpen={isDeleteOpen}
-					toggleModal={toggleDeleteModal}
+					isOpen={isOpen("delete")}
+					toggleModal={() => toggleModal("delete")}
 					mainModalAction={mainDeleteModalAction}
 					secondaryModalAction={secondaryDeleteModalAction}
 				/>
 			)}
-			{isGroupOpen && (
+			{isOpen("group") && (
 				<DeleteGroupModal
-					isOpen={isGroupOpen}
-					toggleModal={toggleGroupModal}
+					isOpen={isOpen("group")}
+					toggleModal={() => toggleModal("group")}
 					mainModalAction={mainDeleteGroupModalAction}
 					secondaryModalAction={secondaryDeleteGroupModalAction}
 					deleteGroupCategories={deleteGroupCategories}
@@ -492,7 +493,6 @@ interface IDispatchProps {
 	setSelectedCategory(id: string, scope: string): void;
 	deleteDataContent(catID: number[], refresh?: boolean): Promise<boolean>;
 	setHistoryPush(path: string): void;
-	resetCurrentData(): Promise<void>;
 	deleteCategoryGroup(id: number | number[], deleteChildren: boolean, refresh?: boolean): Promise<boolean>;
 	orderCategory(params: IOrderCategoryParams): Promise<boolean>;
 }
@@ -519,7 +519,6 @@ const mapDispatchToProps = {
 	deleteDataContent: structuredDataActions.deleteStructuredDataContent,
 	deleteCategoryGroup: structuredDataActions.deleteCategoryGroup,
 	setHistoryPush: appActions.setHistoryPush,
-	resetCurrentData: structuredDataActions.resetCurrentData,
 	orderCategory: structuredDataActions.orderCategory,
 };
 

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/Form/ConnectedField/index.tsx

@@ -1,12 +1,11 @@
-import React from "react";
 import { connect } from "react-redux";
 
-import { getFormTemplate } from "@ax/helpers";
-import { IErrorItem, IRootState } from "@ax/types";
 import { formsActions } from "@ax/containers/Forms";
+import { getFormTemplate } from "@ax/helpers";
+import type { IErrorItem, IRootState } from "@ax/types";
 
-import TemplateManager from "./TemplateManager";
 import Field from "./Field";
+import TemplateManager from "./TemplateManager";
 
 const ConnectedField = (props: any) => {
 	const {
@@ -54,8 +53,7 @@ const ConnectedField = (props: any) => {
 		const template = templateType ? getFormTemplate(templateType) : null;
 
 		if (!template) {
-			actions.setNotificationAction &&
-				actions.setNotificationAction({ text: "Form template schema not found.", type: "error" });
+			actions.setNotificationAction?.({ text: "Form template schema not found.", type: "error" });
 			return <></>;
 		}
 

package/src/modules/Forms/FormEditor/Editor/FormConfigPanel/Form/index.tsx

@@ -1,7 +1,5 @@
-import React from "react";
-
-import { ISchema, ISchemaTab, ISchemaField, IErrorItem } from "@ax/types";
 import { Tabs } from "@ax/components";
+import type { IErrorItem, ISchema, ISchemaField, ISchemaTab } from "@ax/types";
 
 import ConnectedField from "./ConnectedField";
 
@@ -55,8 +53,8 @@ export const Form = (props: IFormProps): JSX.Element => {
 		const isPageSchema = schema.schemaType === "page";
 		const mappedTabs = schema.configTabs.reduce((acc: string[], curr: ISchemaTab) => {
 			const currTitle = curr.title.toLowerCase();
-			if (!isPageSchema || (isPageSchema && (currTitle === "content" || currTitle === "config"))) {
-				return [...acc, currTitle];
+			if (!isPageSchema || currTitle === "content" || currTitle === "config") {
+				return acc.concat(currTitle);
 			}
 			return acc;
 		}, []);
@@ -71,7 +69,7 @@ export const Form = (props: IFormProps): JSX.Element => {
 			<S.TabsWrapper headerHeight={headerHeight}>
 				<Tabs tabs={tabs} active={selectedTab} setSelectedTab={setTab} />
 			</S.TabsWrapper>
-			{tabContent && tabContent.fields.map((field: ISchemaField) => generateFields(field))}
+			{tabContent?.fields.map((field: ISchemaField) => generateFields(field))}
 		</S.Wrapper>
 	);
 };

package/src/modules/Forms/FormEditor/Editor/index.tsx

@@ -52,7 +52,7 @@ const Editor = (props: IProps) => {
 			}
 
 			content.forEach((field) => {
-				if (field.type === "FieldGroup" && field.fields) {
+				if ((field.type === "FieldGroup" || field.type === "ConditionalField") && field.fields) {
 					content = [...content, ...field.fields];
 				}
 			});

package/src/modules/Forms/FormList/FormItem/style.tsx

@@ -75,7 +75,6 @@ const StyledActionMenu = styled(ActionMenu)`
 
 const FormRow = styled(Row)<{ clickable: boolean }>`
   cursor: ${(p) => (p.clickable ? "pointer" : "default")};
-  overflow: hidden;
   &:hover {
     ${StyledActionMenu} {
       opacity: 1;

package/src/modules/GlobalEditor/index.tsx

@@ -526,7 +526,7 @@ const GlobalEditor = (props: IProps) => {
 	};
 
 	const handleGoBack = () => {
-		props.setHistoryPush(backLinkRoute, false);
+		props.setHistoryPush(backLinkRoute, true);
 	};
 
 	const mainAction = { title: "Preview Page", onClick: toggleModal };

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

@@ -66,6 +66,7 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
 				title="Delete Site?"
 				secondaryAction={secondaryDeleteAction}
 				mainAction={mainDeleteAction}
+				height="auto"
 			>
 				{isOpenDelete ? (
 					<S.ModalContent data-testid="delete-modal">
@@ -87,6 +88,7 @@ const GridSiteItem = (props: IGridSiteItemProps): JSX.Element => {
 				title={title}
 				secondaryAction={secondaryAction}
 				mainAction={mainAction}
+				height="auto"
 			>
 				{isOpenPublish ? <S.ModalContent data-testid="publish-modal">{content}</S.ModalContent> : null}
 			</Modal>

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

@@ -87,6 +87,7 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
 				title="Delete Site?"
 				secondaryAction={secondaryDeleteAction}
 				mainAction={mainDeleteAction}
+				height="auto"
 			>
 				{isOpenDelete ? (
 					<S.ModalContent data-testid="delete-modal">
@@ -108,6 +109,7 @@ const ListSiteItem = (props: IListSiteItemProps): JSX.Element => {
 				title={title}
 				secondaryAction={secondaryAction}
 				mainAction={mainAction}
+				height="auto"
 			>
 				{isOpenPublish ? <S.ModalContent data-testid="publish-modal">{content}</S.ModalContent> : null}
 			</Modal>

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

@@ -85,7 +85,7 @@ const DateCell = styled(Cell)`
 `;
 
 const ActionsCell = styled(Cell)`
-  flex: 0;
+  flex: 0 0 64px;
   text-align: center;
 `;
 

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

@@ -79,6 +79,7 @@ const SiteModal = (props: ISiteModalProps): JSX.Element => {
 			title="New Site"
 			mainAction={mainAction}
 			secondaryAction={secondaryAction}
+			height="auto"
 		>
 			<ErrorToast size="l" />
 			<S.Form data-testid="site-modal-form">

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

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 
-import { useModal, usePermission } from "@ax/hooks";
+import { useModals, usePermissionsForSite } from "@ax/hooks";
 import type { IGetSitesParams, IQueryValue, ISite } from "@ax/types";
 
 import type { ISortedListStatus } from "./utils";
@@ -145,13 +145,14 @@ const useSiteActions = ({
 	unpublishSite,
 	getParams,
 }: IUseSiteActionsParams) => {
-	const { isOpen: isOpenDelete, toggleModal: toggleDeleteModal } = useModal();
-	const { isOpen: isOpenPublish, toggleModal: togglePublishModal } = useModal();
+	const { isOpen, toggleModal } = useModals(["delete", "publish"]);
 	const [inputValue, setInputValue] = useState("");
 
-	const allowedToDeleteSite = usePermission("general.deleteSite");
-	const allowedToPublishSite = usePermission("general.publishSite");
-	const allowedToUnpublishSite = usePermission("general.unpublishSite");
+	const { allowedToDeleteSite, allowedToPublishSite, allowedToUnpublishSite } = usePermissionsForSite(site.id, {
+		allowedToDeleteSite: "general.deleteSite",
+		allowedToPublishSite: "general.publishSite",
+		allowedToUnpublishSite: "general.unpublishSite",
+	});
 
 	const { updated, isPublished } = site;
 	const publishedState = getPublishedState(isPublished, updated);
@@ -161,7 +162,9 @@ const useSiteActions = ({
 		setHistoryPush("/sites/pages", false);
 	};
 
-	const deleteOption = allowedToDeleteSite ? { label: "delete", icon: "delete", action: toggleDeleteModal } : undefined;
+	const deleteOption = allowedToDeleteSite
+		? { label: "delete", icon: "delete", action: () => toggleModal("delete") }
+		: undefined;
 
 	const publishOptionProps =
 		isPublished && allowedToUnpublishSite
@@ -171,7 +174,7 @@ const useSiteActions = ({
 				: null;
 
 	const publishOption = publishOptionProps
-		? { label: publishOptionProps.label, icon: publishOptionProps.icon, action: togglePublishModal }
+		? { label: publishOptionProps.label, icon: publishOptionProps.icon, action: () => toggleModal("publish") }
 		: undefined;
 
 	const menuOptions = [deleteOption, publishOption];
@@ -179,7 +182,7 @@ const useSiteActions = ({
 	const handleDeleteSite = async () => {
 		const params = getParams();
 		await deleteSite(site.id, params);
-		toggleDeleteModal();
+		toggleModal("delete");
 	};
 
 	const mainDeleteAction = {
@@ -187,24 +190,24 @@ const useSiteActions = ({
 		onClick: handleDeleteSite,
 		disabled: inputValue !== site.name.toUpperCase(),
 	};
-	const secondaryDeleteAction = { title: "Cancel", onClick: toggleDeleteModal };
+	const secondaryDeleteAction = { title: "Cancel", onClick: () => toggleModal("delete") };
 
 	const handlePublishSite = async () => {
 		const params = getParams();
 		await publishSite(site.id, params);
-		togglePublishModal();
+		toggleModal("publish");
 	};
 
 	const handleUnpublishSite = async () => {
 		const params = getParams();
 		await unpublishSite(site.id, params);
-		togglePublishModal();
+		toggleModal("publish");
 	};
 
 	const publishModal = isPublished
 		? {
 				mainAction: { title: "Unpublish Site", onClick: handleUnpublishSite },
-				secondaryAction: { title: "Cancel", onClick: togglePublishModal },
+				secondaryAction: { title: "Cancel", onClick: () => toggleModal("publish") },
 				title: "Unpublish Site",
 				content: (
 					<p>
@@ -216,7 +219,7 @@ const useSiteActions = ({
 			}
 		: {
 				mainAction: { title: "Publish Site", onClick: handlePublishSite },
-				secondaryAction: { title: "Cancel", onClick: togglePublishModal },
+				secondaryAction: { title: "Cancel", onClick: () => toggleModal("publish") },
 				title: "Publish Site",
 				content: (
 					<p>
@@ -234,12 +237,12 @@ const useSiteActions = ({
 		menuOptions,
 		inputValue,
 		setInputValue,
-		isOpenDelete,
-		toggleDeleteModal,
+		isOpenDelete: isOpen("delete"),
+		toggleDeleteModal: () => toggleModal("delete"),
 		mainDeleteAction,
 		secondaryDeleteAction,
-		isOpenPublish,
-		togglePublishModal,
+		isOpenPublish: isOpen("publish"),
+		togglePublishModal: () => toggleModal("publish"),
 		publishModal,
 	};
 };

package/src/modules/Sites/index.tsx

@@ -83,7 +83,7 @@ interface IDispatchProps {
 	getAllDataPacks: () => Promise<void>;
 	getRoles: (params: IGetRoles, token?: string) => Promise<void>;
 	updateCurrentSearch(query: string): Promise<void>;
-	resetCurrentData(): Promise<void>;
+	resetCurrentData(): void;
 	setIsLoading(isLoading: boolean): void;
 	getUserCurrentPermissions(): Promise<void>;
 	getAllSites: () => Promise<void>;

package/src/modules/StructuredData/Form/index.tsx

@@ -210,7 +210,7 @@ const Form = (props: IProps) => {
 	const removeItem = () => {
 		deleteStructuredDataContent(form.id).then((deleted: boolean) => {
 			if (deleted) {
-				setHistoryPush(path, false);
+				setHistoryPush(path, true);
 			}
 		});
 	};

package/src/modules/StructuredData/StructuredDataList/BulkHeader/TableHeader/index.tsx

@@ -37,7 +37,7 @@ const TableHeader = (props: IProps): JSX.Element => {
 	} = props;
 
 	const activeColumns = columns.filter((col) => col.show).map((col) => col.id);
-	const filterCategories = isFromPage ? filterValues.categories : filterValues.related;
+	const filterCategories = filterValues ? (isFromPage ? filterValues.categories : filterValues.related) : [];
 
 	const checkGroups = ["MultiCheckSelect", "AsyncCheckGroup", "CheckGroup"];
 

package/src/modules/StructuredData/StructuredDataList/index.tsx

@@ -1,5 +1,5 @@
 import type React from "react";
-import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { connect } from "react-redux";
 import { useHistory, useLocation } from "react-router-dom";
 
@@ -25,7 +25,7 @@ import {
 import { sitesActions } from "@ax/containers/Sites";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { getMaxColumns, updateColumns } from "@ax/helpers";
-import { useBulkSelection, useCategoryColors, useModal, usePermission, useToast, useWindowSize } from "@ax/hooks";
+import { useBulkSelection, useCategoryColors, useModals, usePermissions, useToast, useWindowSize } from "@ax/hooks";
 import type {
 	ICheck,
 	IColumn,
@@ -116,8 +116,6 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 	const lastPage = Math.ceil(totalItems / itemsPerPage);
 	const isLastItem = page === lastPage && currentSitePages.length === 1;
 
-	const [structuredDataType, setStructuredDataType] = useState("all");
-
 	const [isScrolling, setIsScrolling] = useState(false);
 	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [deletedItem, setDeletedItem] = useState<number | number[] | null>(null);
@@ -127,8 +125,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 	const wrapperRef = useRef<HTMLDivElement>(null);
 	const [isEmpty, setIsEmpty] = useState(false);
 	const [emptyStateProps, setEmptyStateProps] = useState<IEmptyStateProps>({});
-	const { isOpen: isNewOpen, toggleModal: toggleNewModal } = useModal();
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
+	const { isOpen, toggleModal } = useModals(["new", "delete"]);
 	const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
 	const {
 		setFiltersSelection,
@@ -137,10 +134,10 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 		query: currentFilterQuery,
 	} = useFilterQuery(currentStructuredData, contentFilters);
 	const history = useHistory();
+	const { state: locationState } = useLocation<{ isFromEditor: boolean }>();
 	const [isFirstRender, setIsFirstRender] = useState(true);
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
 	const [arePagesTranslated, setArePagesTranslated] = useState(false);
-	const { state: locationState } = useLocation<{ isFromEditor: boolean }>();
 	const { categoryColors, addCategoryColors } = useCategoryColors();
 	const [notification, setNotification] = useState<{
 		text: string;
@@ -148,15 +145,11 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 	} | null>(null);
 
 	const isPrivateData = currentStructuredData?.private || false;
-	const createPermission = isPrivateData
-		? "global.content.createPrivateContentTypes"
-		: "global.globalData.createAllGlobalData";
-	const exportPermission = isPrivateData
-		? "global.content.exportPrivateContentTypes"
-		: "global.content.exportContentTypes";
 
-	const allowedToCreatePages = usePermission(createPermission);
-	const allowedToExport = usePermission(exportPermission);
+	const isAllowedTo = usePermissions({
+		createPages: isPrivateData ? "global.content.createPrivateContentTypes" : "global.globalData.createAllGlobalData",
+		export: isPrivateData ? "global.content.exportPrivateContentTypes" : "global.content.exportContentTypes",
+	});
 
 	const scope = currentSiteID ? "site" : "global";
 
@@ -177,8 +170,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 		: [];
 
 	const type = currentStructuredData ? currentStructuredData.id : "all";
-	const columns = getColumns(categoryColumns, isStructuredDataFromPage, isAllPages, maxColumns.value);
-	const [columnsState, setColumnsState] = useState<Record<string, IColumn[]>>({ all: [], [type]: columns });
+	const [columnsState, setColumnsState] = useState<Record<string, IColumn[]>>({});
 
 	const {
 		resetBulkSelection,
@@ -229,14 +221,20 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 	};
 
 	const resetFilter = () => {
-		if (history.action !== "POP" && (!locationState || locationState.isFromEditor !== true)) {
+		const isFromEditor = locationState?.isFromEditor === true;
+		// Resetea si:
+		// (1) Navegación hacia adelante (PUSH) sin venir del editor
+		// (2) Back button (POP) y NO vienes del editor (para sincronizar Redux con URL)
+		const shouldReset = (history.action === "PUSH" && !isFromEditor) || (history.action === "POP" && !isFromEditor);
+
+		if (shouldReset) {
 			setFilter("all-pages");
 			resetCurrentData();
 		}
 	};
 
 	const changeColumnsState = (updatedColumns: any) => {
-		setColumnsState((state) => ({ ...state, [structuredDataType]: updatedColumns }));
+		setColumnsState((state) => ({ ...state, [type]: updatedColumns }));
 	};
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
@@ -248,19 +246,16 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 		resetForm();
 	}, []);
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
+	// Guardar columnas calculadas en estado cuando cambia el tipo
 	useEffect(() => {
-		const type = currentStructuredData ? currentStructuredData.id : "all";
-		setStructuredDataType(type);
-
-		if (!columnsState[type] || type === "all") {
-			const columns = getColumns(categoryColumns, isStructuredDataFromPage, isAllPages, maxColumns.value);
-			setColumnsState((state) => ({
-				...state,
-				[type]: columns,
-			}));
+		const cols = getColumns(categoryColumns, isStructuredDataFromPage, isAllPages, maxColumns.value);
+		if (cols.length > 0) {
+			setColumnsState((state) => {
+				if (state[type]?.length > 0) return state; // Mantener si ya existen
+				return { ...state, [type]: cols };
+			});
 		}
-	}, [filter]);
+	}, [type, categoryColumns, isStructuredDataFromPage, isAllPages, maxColumns]);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
@@ -301,12 +296,12 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 			} else {
 				emptyState.message = isAllPages
 					? "You don’t have pages with this content type yet."
-					: allowedToCreatePages && isDataEditable
+					: isAllowedTo.createPages && isDataEditable
 						? "To start using pages in your site, create as many pages as you need."
 						: undefined;
 				emptyState.button = isAllPages
 					? "View all content"
-					: allowedToCreatePages && isDataEditable
+					: isAllowedTo.createPages && isDataEditable
 						? "Create the first page"
 						: undefined;
 				emptyState.action = isAllPages ? resetFilterValues : isDataEditable ? addNewAction : undefined;
@@ -371,7 +366,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 			? setPage(previousPage)
 			: isStructuredDataFromPage && handleGetGlobalPages();
 		unselectAllItems();
-		toggleDeleteModal();
+		toggleModal("delete");
 		setIsBulkLoading(false);
 	};
 
@@ -379,7 +374,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 		const selectedPages = currentSitePages.filter((page) => selectedItems.all.includes(page.id));
 		const hasTranslations = selectedPages.some((page) => page.pageLanguages.length > 1);
 		setArePagesTranslated(hasTranslations);
-		toggleDeleteModal();
+		toggleModal("delete");
 	};
 
 	const bulkPublishPage = async (isPublish: boolean) => {
@@ -471,7 +466,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 	};
 
 	const exportContent =
-		isDataExportable && allowedToExport
+		isDataExportable && isAllowedTo.export
 			? async (formats: (number | string)[]) => {
 					if (currentStructuredData && formats.length) {
 						const ids = selectedItems.all.length ? selectedItems.all : undefined;
@@ -480,7 +475,11 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 				}
 			: undefined;
 
-	const currentDataColumnsState = currentStructuredData ? columnsState[structuredDataType] || [] : columnsState.all;
+	const currentDataColumnsState = useMemo(() => {
+		const cols =
+			columnsState[type] ?? getColumns(categoryColumns, isStructuredDataFromPage, isAllPages, maxColumns.value);
+		return cols;
+	}, [type, columnsState, categoryColumns, isStructuredDataFromPage, isAllPages, maxColumns]);
 
 	const TableHeader = (
 		<BulkHeader
@@ -499,7 +498,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 			sortItems={sortItems}
 			sortedListStatus={sortedListStatus}
 			filterItems={filterItems}
-			filterValues={filterValues[structuredDataType]}
+			filterValues={filterValues[type] ?? { categories: [], related: [], liveStatus: [], translated: [] }}
 			isAllPages={isAllPages}
 			categoryColumns={categoryColumns}
 			columns={currentDataColumnsState}
@@ -535,9 +534,9 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 		}
 	};
 
-	const addNewAction = isAllPages || isStructuredDataFromPage ? toggleNewModal : createNewData;
+	const addNewAction = isAllPages || isStructuredDataFromPage ? () => toggleModal("new") : createNewData;
 
-	const rightButtonProps = allowedToCreatePages
+	const rightButtonProps = isAllowedTo.createPages
 		? {
 				label: "New",
 				action: addNewAction,
@@ -665,7 +664,7 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 					dynamicValues={structuredData.global}
 					onClick={handleMenuClick}
 					addNew={addNewAction}
-					isAllowedToCreate={allowedToCreatePages}
+					isAllowedToCreate={isAllowedTo.createPages}
 				/>
 				<S.TableListWrapper>
 					{!isDataEditable && (
@@ -716,27 +715,27 @@ const StructuredDataList = (props: IProps): JSX.Element => {
 					</TableList>
 				</S.TableListWrapper>
 			</S.StructuredDataWrapper>
-			{isNewOpen && (
+			{isOpen("new") && (
 				<NewContentModal
 					selectPage={addTemplate}
 					filters={options.filters}
 					values={options.values}
 					selectedValue={selectedValue}
-					isOpen={isNewOpen}
-					toggleModal={toggleNewModal}
+					isOpen={isOpen("new")}
+					toggleModal={() => toggleModal("new")}
 					addNewPage={addNewPage}
 					structuredData={structuredData.global}
 				/>
 			)}
 			<DeleteModal
-				isOpen={isDeleteOpen}
-				toggleModal={toggleDeleteModal}
+				isOpen={isOpen("delete")}
+				toggleModal={() => toggleModal("delete")}
 				mainModalAction={{
 					title: isBulkLoading ? "Deleting" : "Delete",
 					onClick: bulkDelete,
 					disabled: isBulkLoading,
 				}}
-				secondaryModalAction={{ title: "Cancel", onClick: toggleDeleteModal }}
+				secondaryModalAction={{ title: "Cancel", onClick: () => toggleModal("delete") }}
 				{...{ arePagesTranslated, deleteAllVersions, setDeleteAllVersions }}
 			/>
 			{isDataToast && <Toast action={undoDeleteData} setIsVisible={setIsDataToast} message={"Data deleted"} />}
@@ -824,7 +823,7 @@ interface IDispatchProps {
 	setContentFilters(contentFilters: Record<string, Record<string, IQueryValue[]>> | null): void;
 	checkUserSession(): Promise<void>;
 	updateCurrentSearch(query: string): Promise<void>;
-	resetCurrentData(): Promise<void>;
+	resetCurrentData(): void;
 	exportDataContent(structuredDataID: string, data: IExportDataParams): Promise<void>;
 }