@griddo/ax 11.15.7 → 11.15.8-rc.0

package/src/modules/Forms/FormCategoriesList/CategoryItem/index.tsx

@@ -3,8 +3,8 @@ import { connect } from "react-redux";
 
 import { CheckField, Icon, TruncatedTooltip } from "@ax/components";
 import { formsActions } from "@ax/containers/Forms";
-import { useModal, usePermission } from "@ax/hooks";
-import type { FormCategory, ICheck } from "@ax/types";
+import { useModals, usePermissions } from "@ax/hooks";
+import type { FormCategory, ICheck, IRootState } from "@ax/types";
 
 import { useSortable } from "@dnd-kit/sortable";
 
@@ -14,17 +14,29 @@ import CategoryPanel from "../CategoryPanel";
 import * as S from "./style";
 
 const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
-	const { category, isSelected, hoverCheck, isDragging, isSiteView, deleteFormCategory, onChange, toggleToast } = props;
-
-	const { isOpen, toggleModal } = useModal();
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
+	const {
+		category,
+		isSelected,
+		hoverCheck,
+		isDragging,
+		isSiteView,
+		isSaving,
+		deleteFormCategory,
+		onChange,
+		toggleToast,
+	} = props;
+
+	const { isOpen, toggleModal } = useModals(["edit", "delete"]);
+
+	const isAllowedTo = usePermissions({
+		editSiteCategory: "forms.editFormsCategories",
+		editGlobalCategory: "global.forms.editFormsCategories",
+		deleteSiteCategory: "forms.deleteFormsCategories",
+		deleteGlobalCategory: "global.forms.deleteFormsCategories",
+	});
 
-	const editFormCategoryPermission = isSiteView ? "forms.editFormsCategories" : "global.forms.editFormsCategoriesss";
-	const deleteFormCategoryPermission = isSiteView
-		? "forms.deleteFormsCategories"
-		: "global.forms.deleteFormsCategories";
-	const isAllowedToEditFormCategory = usePermission(editFormCategoryPermission);
-	const isAllowedToDeleteFormCategory = usePermission(deleteFormCategoryPermission);
+	const isAllowedToEditFormCategory = isSiteView ? isAllowedTo.editSiteCategory : isAllowedTo.editGlobalCategory;
+	const isAllowedToDeleteFormCategory = isSiteView ? isAllowedTo.deleteSiteCategory : isAllowedTo.deleteGlobalCategory;
 
 	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
 		id: category.id,
@@ -32,10 +44,10 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 
 	const { content } = category;
 
-	const handleClick = () => !isDragging && isAllowedToEditFormCategory && toggleModal();
+	const handleClick = () => !isDragging && isAllowedToEditFormCategory && toggleModal("edit");
 
 	const handleCloseModal = () => {
-		toggleModal();
+		toggleModal("edit");
 	};
 
 	const handleOnChange = (value: ICheck) => onChange(value);
@@ -46,7 +58,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 		const deleted = await deleteFormCategory(category.id, category.categoryType);
 
 		if (deleted) {
-			isDeleteOpen && toggleDeleteModal();
+			isOpen("delete") && toggleModal("delete");
 			toggleToast("1 form category deleted");
 		}
 	};
@@ -56,18 +68,11 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 				{
 					label: "delete",
 					icon: "delete",
-					action: toggleDeleteModal,
+					action: () => toggleModal("delete"),
 				},
 			]
 		: [];
 
-	const mainDeleteModalAction = {
-		title: "delete",
-		onClick: removeCategory,
-	};
-
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
-
 	return (
 		<>
 			<S.CategoryRow
@@ -101,23 +106,21 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
 					<S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />
 				</S.ActionsCell>
 			</S.CategoryRow>
-			{isOpen && (
+			{isOpen("edit") && (
 				<CategoryPanel
-					isOpen={isOpen}
+					isOpen={isOpen("edit")}
 					toggleModal={handleCloseModal}
 					item={category}
 					toggleToast={toggleToast}
 					type={category.categoryType}
 				/>
 			)}
-			{isDeleteOpen && (
-				<DeleteModal
-					isOpen={isDeleteOpen}
-					toggleModal={toggleDeleteModal}
-					mainModalAction={mainDeleteModalAction}
-					secondaryModalAction={secondaryDeleteModalAction}
-				/>
-			)}
+			<DeleteModal
+				isOpen={isOpen("delete")}
+				toggleModal={() => toggleModal("delete")}
+				onDelete={removeCategory}
+				isDeleting={isSaving}
+			/>
 		</>
 	);
 };
@@ -130,6 +133,7 @@ interface IProps {
 	hoverCheck?: boolean;
 	isDragging: boolean;
 	isSiteView: boolean;
+	isSaving: boolean;
 }
 
 interface IDispatchProps {
@@ -138,8 +142,12 @@ interface IDispatchProps {
 
 type ICategoryItemProps = IProps & IDispatchProps;
 
+const mapStateToProps = (state: IRootState) => ({
+	isSaving: state.app.isSaving,
+});
+
 const mapDispatchToProps = {
 	deleteFormCategory: formsActions.deleteFormCategory,
 };
 
-export default connect(null, mapDispatchToProps)(CategoryItem);
+export default connect(mapStateToProps, mapDispatchToProps)(CategoryItem);

package/src/modules/Forms/FormCategoriesList/atoms.tsx

@@ -1,12 +1,18 @@
-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";
 
-const DeleteModal = (props: IModal): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction } = props;
+const DeleteModal = (props: IDeleteModal): JSX.Element => {
+	const { isOpen, toggleModal, onDelete, isDeleting } = props;
+
+	const mainModalAction = {
+		title: isDeleting ? "Deleting" : "delete",
+		onClick: onDelete,
+		disabled: isDeleting,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
 
 	return (
 		<Modal
@@ -16,7 +22,7 @@ const DeleteModal = (props: IModal): JSX.Element => {
 			secondaryAction={secondaryModalAction}
 			mainAction={mainModalAction}
 			size="S"
-			height={240}
+			height="auto"
 		>
 			<S.ModalContent>
 				<p>
@@ -30,4 +36,9 @@ const DeleteModal = (props: IModal): JSX.Element => {
 	);
 };
 
+interface IDeleteModal extends IModal {
+	onDelete: () => void;
+	isDeleting?: boolean;
+}
+
 export { DeleteModal };

package/src/modules/Forms/FormCategoriesList/index.tsx

@@ -5,7 +5,7 @@ import { useParams } from "react-router-dom";
 import { EmptyState, ErrorToast, MainWrapper, SearchTagsBar, TableList, Toast } from "@ax/components";
 import { formsActions } from "@ax/containers/Forms";
 import { getSchemaFormCategories } from "@ax/helpers";
-import { useBulkSelection, useModal, usePermission, useToast } from "@ax/hooks";
+import { useBulkSelection, useModals, usePermissions, useToast } from "@ax/hooks";
 import type { FormCategoriesOrderParams, FormCategory, IRootState } from "@ax/types";
 
 import {
@@ -29,7 +29,7 @@ import CategoryPanel from "./CategoryPanel";
 import * as S from "./style";
 
 const FormCategoriesList = (props: IProps): JSX.Element => {
-	const { categories, currentSiteID, getFormCategories, deleteFormCategory, orderFormCategory } = props;
+	const { categories, currentSiteID, isSaving, getFormCategories, deleteFormCategory, orderFormCategory } = props;
 
 	const schemaCategories = getSchemaFormCategories();
 	const { cat: urlCategory } = useParams<{ cat: string }>();
@@ -42,23 +42,22 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
 	const isSiteView = !!currentSiteID;
 
 	const [isScrolling, setIsScrolling] = useState(false);
-	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [draggingId, setDraggingId] = useState<number | null>(null);
 	const [searchQuery, setSearchQuery] = useState<string>("");
 	const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
-	const { isOpen, toggleModal } = useModal();
-	const { isOpen: isDeleteOpen, toggleModal: toggleDeleteModal } = useModal();
+	const { isOpen, toggleModal } = useModals(["panel", "delete"]);
 	const tableRef = useRef<HTMLDivElement>(null);
 	const isSearching = searchQuery.length > 0;
 
-	const createFormCategoryPermission = isSiteView
-		? "forms.createFormsCategories"
-		: "global.forms.createFormsCategories";
-	const deleteFormCategoryPermission = isSiteView
-		? "forms.deleteFormsCategories"
-		: "global.forms.deleteFormsCategories";
-	const isAllowedToCreateFormCategory = usePermission(createFormCategoryPermission);
-	const isAllowedToDeleteFormCategory = usePermission(deleteFormCategoryPermission);
+	const isAllowedTo = usePermissions({
+		createSiteCategory: "forms.createFormsCategories",
+		createGlobalCategory: "global.forms.createFormsCategories",
+		deleteSiteCategory: "forms.deleteFormsCategories",
+		deleteGlobalCategory: "global.forms.deleteFormsCategories",
+	});
+
+	const isAllowedToCreateFormCategory = isSiteView ? isAllowedTo.createSiteCategory : isAllowedTo.createGlobalCategory;
+	const isAllowedToDeleteFormCategory = isSiteView ? isAllowedTo.deleteSiteCategory : isAllowedTo.deleteGlobalCategory;
 
 	const sensors = useSensors(
 		useSensor(PointerSensor, {
@@ -97,19 +96,17 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
 	const rightButtonProps = isAllowedToCreateFormCategory
 		? {
 				label: "New",
-				action: toggleModal,
+				action: () => toggleModal("panel"),
 			}
 		: undefined;
 
 	const bulkDelete = async () => {
-		setIsBulkLoading(true);
 		const deleted = await deleteFormCategory(selectedItems.all, category);
 		if (deleted) {
 			resetBulkSelection();
 			toggleToast(`${selectedItems.all.length} categor${selectedItems.all.length > 1 ? "ies" : "y"} deleted`);
-			toggleDeleteModal();
+			toggleModal("delete");
 		}
-		setIsBulkLoading(false);
 	};
 
 	const selectItems = () => (checkState.isAllSelected ? resetBulkSelection() : selectAllItems());
@@ -126,7 +123,7 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
 				{
 					icon: "delete",
 					text: "delete",
-					action: toggleDeleteModal,
+					action: () => toggleModal("delete"),
 				},
 			]
 		: [];
@@ -141,7 +138,7 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
 			isScrolling={isScrolling}
 			bulkActions={bulkActions}
 			setHoverCheck={setHoverCheck}
-			isLoading={isBulkLoading}
+			isLoading={isSaving}
 		/>
 	);
 
@@ -178,7 +175,7 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
 			? "To start using categories in your forms, create as many categories as you need."
 			: "",
 		button: isAllowedToCreateFormCategory ? "New Category" : "",
-		action: toggleModal,
+		action: () => toggleModal("panel"),
 	};
 
 	const emptySearchStateProps = {
@@ -187,14 +184,6 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
 		message: "We couldn’t find what you are looking for. Please, try another search.",
 	};
 
-	const mainDeleteModalAction = {
-		title: isBulkLoading ? "Deleting" : "delete",
-		onClick: bulkDelete,
-		disabled: isBulkLoading,
-	};
-
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleDeleteModal };
-
 	return (
 		<MainWrapper title="Forms" rightButton={rightButtonProps} searchAction={setSearchQuery} searchValue={searchQuery}>
 			<S.CategoryListWrapper>
@@ -252,13 +241,18 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
 					</TableList>
 				</S.TableWrapper>
 			</S.CategoryListWrapper>
-			<CategoryPanel isOpen={isOpen} toggleModal={toggleModal} toggleToast={toggleToast} type={category} />
-			{isDeleteOpen && (
+			<CategoryPanel
+				isOpen={isOpen("panel")}
+				toggleModal={() => toggleModal("panel")}
+				toggleToast={toggleToast}
+				type={category}
+			/>
+			{isOpen("delete") && (
 				<DeleteModal
-					isOpen={isDeleteOpen}
-					toggleModal={toggleDeleteModal}
-					mainModalAction={mainDeleteModalAction}
-					secondaryModalAction={secondaryDeleteModalAction}
+					isOpen={isOpen("delete")}
+					toggleModal={() => toggleModal("delete")}
+					onDelete={bulkDelete}
+					isDeleting={isSaving}
 				/>
 			)}
 			{isVisible && <Toast {...toastProps} />}
@@ -268,6 +262,7 @@ const FormCategoriesList = (props: IProps): JSX.Element => {
 
 const mapStateToProps = (state: IRootState) => ({
 	categories: state.forms.currentFormCategories,
+	isSaving: state.app.isSaving,
 	// biome-ignore lint/complexity/useOptionalChain: TODO: fix this
 	currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
 });
@@ -281,6 +276,7 @@ interface IDispatchProps {
 interface ICategoriesProps {
 	categories: FormCategory[];
 	currentSiteID: number | null;
+	isSaving: boolean;
 }
 
 type IProps = ICategoriesProps & IDispatchProps;

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

@@ -155,10 +155,13 @@ const FormEditor = (props: IProps) => {
 				onClick: () => toggleModal("use"),
 			});
 		} else {
-			const allFormVersions = dataLanguages.map((lang: FormLanguage) => lang.id);
-			const isDeleted = deleteAllVersions ? await deleteForm(allFormVersions) : await deleteForm(id);
-			if (isDeleted) {
-				setHistoryPush(backLinkRoute, false);
+			try {
+				const allFormVersions = dataLanguages.map((lang: FormLanguage) => lang.id);
+				const isDeleted = deleteAllVersions ? await deleteForm(allFormVersions) : await deleteForm(id);
+				if (isDeleted) {
+					setHistoryPush(backLinkRoute, false);
+				}
+			} finally {
 				toggleModal("delete");
 			}
 		}
@@ -258,7 +261,6 @@ const FormEditor = (props: IProps) => {
 		action: () => (formInUse ? toggleModal("update") : handleSavePage()),
 	};
 
-
 	return isLoading ? (
 		<Loading />
 	) : (
@@ -317,6 +319,7 @@ const FormEditor = (props: IProps) => {
 				isOpen={isOpen("delete")}
 				toggleModal={() => toggleModal("delete")}
 				onDelete={removeItem}
+				isDeleting={isSaving}
 				{...{ title, isTranslated, deleteAllVersions, setDeleteAllVersions }}
 			/>
 			<UnPublishModal
@@ -324,9 +327,14 @@ const FormEditor = (props: IProps) => {
 				toggleModal={() => toggleModal("unpublish")}
 				onUnpublish={unpublishForm}
 				title={title}
+				isUnpublishing={isSaving}
 			/>
 			{isOpen("update") && (
-				<UpdateModal isOpen={isOpen("update")} toggleModal={() => toggleModal("update")} onUpdate={() => handleSavePage()} />
+				<UpdateModal
+					isOpen={isOpen("update")}
+					toggleModal={() => toggleModal("update")}
+					onUpdate={() => handleSavePage()}
+				/>
 			)}
 			{isOpen("use") && (
 				<FormUseModal

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

@@ -44,6 +44,7 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
 		currentSiteInfo,
 		hoverCheck,
 		skipReviewOnPublish,
+		isSaving,
 		addCategoryColors,
 		onChange,
 		onClick,
@@ -288,13 +289,14 @@ const FormItem = (props: IFormItemProps): JSX.Element => {
 				isOpen={isOpen("delete")}
 				toggleModal={() => toggleModal("delete")}
 				onDelete={removeItem}
-				{...{ title, isTranslated, deleteAllVersions, setDeleteAllVersions }}
+				{...{ title, isTranslated, deleteAllVersions, setDeleteAllVersions, isDeleting: isSaving }}
 			/>
 			<UnPublishModal
 				isOpen={isOpen("unpublish")}
 				toggleModal={() => toggleModal("unpublish")}
 				onUnpublish={unpublishForm}
 				title={title}
+				isUnpublishing={isSaving}
 			/>
 			<DuplicateModal
 				isOpen={isOpen("duplicate")}
@@ -334,6 +336,7 @@ interface IFormItemProps {
 	currentSiteInfo: ISite | null;
 	hoverCheck?: boolean;
 	skipReviewOnPublish?: boolean;
+	isSaving: boolean;
 	addCategoryColors(cats: string[]): void;
 	onChange: (value: ICheck) => void;
 	onClick: (id: number) => void;
@@ -351,6 +354,7 @@ interface IFormItemProps {
 const mapStateToProps = (state: IRootState) => ({
 	currentSiteInfo: state.sites.currentSiteInfo,
 	skipReviewOnPublish: state.app.globalSettings.skipReviewOnPublish,
+	isSaving: state.app.isSaving,
 });
 
 const mapDispatchToProps = {

package/src/modules/Forms/FormList/index.tsx

@@ -47,6 +47,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
 		lang,
 		globalLangs,
 		siteLanguages,
+		isSaving,
 		setHistoryPush,
 		addTemplate,
 		getForms,
@@ -71,7 +72,6 @@ const FormList = (props: IUserListProps): JSX.Element => {
 
 	const [page, setPage] = useState(firstPage);
 	const [isScrolling, setIsScrolling] = useState(false);
-	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [selectedTemplate, setSelectedTemplate] = useState<ISchema | null>(null);
 	const [deleteAllVersions, setDeleteAllVersions] = useState(false);
 	const [arePagesTranslated, setArePagesTranslated] = useState(false);
@@ -85,6 +85,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
 
 	const wrapperRef = useRef<HTMLDivElement>(null);
 	const tableRef = useRef<HTMLDivElement>(null);
+	const notificationRef = useRef<HTMLDivElement>(null);
 	const formIds = forms.map((form) => form.id);
 	const isSearching = searchQuery.length > 0;
 	const isFiltering = currentFilterQuery.length > 0;
@@ -132,6 +133,12 @@ const FormList = (props: IUserListProps): JSX.Element => {
 		handleGetForms();
 	}, [getParams, lang]);
 
+	useEffect(() => {
+		if (notification && notificationRef.current) {
+			notificationRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
+		}
+	}, [notification]);
+
 	const onScroll = (e: any) => setIsScrolling(e.target.scrollTop > 0);
 
 	const handleSelectAll = () => selectAllItems();
@@ -174,17 +181,14 @@ const FormList = (props: IUserListProps): JSX.Element => {
 	};
 
 	const publishForm = async () => {
-		setIsBulkLoading(true);
 		const isUpdated = await updateFormState(selectedItems.all, "active");
 		if (isUpdated) {
 			resetBulkSelection();
 			toggleToast(`${selectedItems.all.length} form${selectedItems.all.length > 1 ? "s" : ""} published`);
 		}
-		setIsBulkLoading(false);
 	};
 
 	const unpublishForm = async () => {
-		setIsBulkLoading(true);
 		const isUsed = forms.some((form) => selectedItems.all.includes(form.id) && !!form.formInUse);
 		if (isUsed) {
 			setNotification({
@@ -198,11 +202,10 @@ const FormList = (props: IUserListProps): JSX.Element => {
 				toggleToast(`${selectedItems.all.length} form${selectedItems.all.length > 1 ? "s" : ""} unpublished`);
 			}
 		}
-		setIsBulkLoading(false);
+		isOpen("unpublish") && toggleModal("unpublish");
 	};
 
 	const handleDeleteForm = async () => {
-		setIsBulkLoading(true);
 		const idsToBeDeleted = getAllLangFormsIds(forms, selectedItems.all, deleteAllVersions);
 		const isUsed = forms.some((form) => idsToBeDeleted.includes(form.id) && !!form.formInUse);
 		if (isUsed) {
@@ -217,7 +220,6 @@ const FormList = (props: IUserListProps): JSX.Element => {
 				toggleModal("delete");
 			}
 		}
-		setIsBulkLoading(false);
 	};
 
 	const handleToggleBulkDelete = () => {
@@ -273,7 +275,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
 			featuredCategory={featuredCategory}
 			bulkActions={bulkActions}
 			siteID={currentSiteInfo?.id || null}
-			isLoading={isBulkLoading}
+			isLoading={isSaving}
 		/>
 	);
 
@@ -330,7 +332,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
 				<FormsMenu />
 				<S.TableListWrapper>
 					{notification && (
-						<S.NotificationWrapper>
+						<S.NotificationWrapper ref={notificationRef}>
 							<Notification
 								type={notification.type}
 								text={notification.text}
@@ -413,6 +415,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
 					toggleModal={() => toggleModal("unpublish")}
 					onUnpublish={unpublishForm}
 					title={selectedItems.all.length > 1 ? "these forms" : "this form"}
+					isUnpublishing={isSaving}
 				/>
 			)}
 			{isOpen("delete") && (
@@ -421,6 +424,7 @@ const FormList = (props: IUserListProps): JSX.Element => {
 					toggleModal={() => toggleModal("delete")}
 					onDelete={handleDeleteForm}
 					title={selectedItems.all.length > 1 ? "these forms" : "this form"}
+					isDeleting={isSaving}
 					{...{ isTranslated: arePagesTranslated, deleteAllVersions, setDeleteAllVersions }}
 				/>
 			)}
@@ -436,6 +440,7 @@ const mapStateToProps = (state: IRootState) => ({
 	siteLanguages: state.sites.currentSiteLanguages,
 	globalLangs: state.app.globalLangs,
 	lang: state.app.lang,
+	isSaving: state.app.isSaving,
 });
 
 const mapDispatchToProps = {
@@ -465,6 +470,7 @@ interface IProps {
 	lang: { locale: string; id: number };
 	siteLanguages: ILanguage[];
 	globalLangs: ILanguage[];
+	isSaving: boolean;
 }
 
 export type IUserListProps = IProps & IDispatchProps;

package/src/modules/Forms/atoms.tsx

@@ -6,7 +6,8 @@ import type { IModal } from "@ax/types";
 import * as S from "./style";
 
 const DeleteModal = (props: IDeleteModal): JSX.Element => {
-	const { isOpen, toggleModal, onDelete, isTranslated, deleteAllVersions, setDeleteAllVersions, title } = props;
+	const { isOpen, toggleModal, onDelete, isTranslated, deleteAllVersions, setDeleteAllVersions, title, isDeleting } =
+		props;
 
 	const options = [
 		{
@@ -23,7 +24,7 @@ const DeleteModal = (props: IDeleteModal): JSX.Element => {
 
 	const formTitle = title ? <strong>{title}</strong> : "this form";
 
-	const mainAction = { title: "Delete form", onClick: onDelete };
+	const mainAction = { title: isDeleting ? "Deleting" : "Delete form", onClick: onDelete, disabled: isDeleting };
 	const secondaryAction = { title: "Cancel", onClick: toggleModal };
 
 	return (
@@ -66,11 +67,11 @@ const DeleteModal = (props: IDeleteModal): JSX.Element => {
 };
 
 const UnPublishModal = (props: IUnpublishModal): JSX.Element => {
-	const { isOpen, toggleModal, onUnpublish, title } = props;
+	const { isOpen, toggleModal, onUnpublish, title, isUnpublishing } = props;
 
 	const formTitle = title ? <strong>{title}</strong> : "this form";
 
-	const mainAction = { title: "Unpublish form", onClick: onUnpublish };
+	const mainAction = { title: isUnpublishing ? "Unpublishing" : "Unpublish form", onClick: onUnpublish, disabled: isUnpublishing };
 	const secondaryAction = { title: "Cancel", onClick: toggleModal };
 
 	return (
@@ -201,11 +202,13 @@ interface IDeleteModal extends IModal {
 	deleteAllVersions: boolean;
 	setDeleteAllVersions: Dispatch<SetStateAction<boolean>>;
 	title?: string;
+	isDeleting?: boolean;
 }
 
 interface IUnpublishModal extends IModal {
 	onUnpublish(): void;
 	title?: string;
+	isUnpublishing?: boolean;
 }
 
 interface IDuplicateModal extends IModal {

package/src/modules/GlobalEditor/atoms.tsx

@@ -0,0 +1,77 @@
+import type React from "react";
+
+import { FieldsBehavior, Modal } from "@ax/components";
+import type { IModal } from "@ax/types";
+
+import * as S from "./style";
+
+const DeleteModal = (props: IDeleteModal): JSX.Element => {
+	const { isOpen, toggleModal, isTranslated, deleteAllVersions, setDeleteAllVersions, onDelete, isDeleting } = props;
+
+	const options = [
+		{
+			title: "Delete only this version",
+			name: "deletePage",
+			value: false,
+		},
+		{
+			title: "Delete all languages versions",
+			name: "deleteAll",
+			value: true,
+		},
+	];
+
+	const mainAction = {
+		title: isDeleting ? "Deleting" : "Delete page",
+		onClick: onDelete,
+		disabled: isDeleting,
+	};
+
+	const secondaryAction = { title: "Cancel", onClick: toggleModal };
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			hide={toggleModal}
+			title="Delete Page?"
+			secondaryAction={secondaryAction}
+			mainAction={mainAction}
+			size="S"
+			height="auto"
+		>
+			{isTranslated ? (
+				<>
+					<S.ModalContent>
+						<p>
+							You are going to delete this page that have some translations associated. Choose if you want to delete all
+							languages versions or only this one.
+						</p>
+						<FieldsBehavior
+							name="removeAllVersions"
+							fieldType="RadioGroup"
+							value={deleteAllVersions}
+							options={options}
+							onChange={setDeleteAllVersions}
+						/>
+					</S.ModalContent>
+				</>
+			) : (
+				<S.ModalContent>
+					Are you sure you want to delete this page?
+					<br />
+					This action <strong>cannot be undone</strong>.
+				</S.ModalContent>
+			)}
+		</Modal>
+	);
+};
+
+interface IDeleteModal extends IModal {
+	isTranslated: boolean;
+	deleteAllVersions: boolean;
+	setDeleteAllVersions: React.Dispatch<React.SetStateAction<boolean>>;
+	onDelete: () => void;
+	isDeleting?: boolean;
+}
+
+export { DeleteModal };