@griddo/ax 11.15.7 → 11.15.8-rc.0

package/src/modules/Redirects/index.tsx

@@ -13,7 +13,7 @@ import {
 } from "@ax/components";
 import { appActions } from "@ax/containers/App";
 import { redirectsActions } from "@ax/containers/Redirects";
-import { useBulkSelection, useModal, useToast } from "@ax/hooks";
+import { useBulkSelection, useModals, useToast } from "@ax/hooks";
 import type { IEmptyStateProps, INavItem, IQueryValue, IRedirect, IRootState, ISite } from "@ax/types";
 
 import { DeleteModal, ImportCheckModal, ImportModal, OverwriteModal } from "./atoms";
@@ -40,24 +40,20 @@ const Redirects = (props: IProps): JSX.Element => {
 		imports,
 		totalImports,
 		isLoading,
+		isSaving,
 	} = props;
 
 	const itemsPerPage = 50;
 	const firstPage = 1;
 	const [page, setPage] = useState(1);
 	const [isScrolling, setIsScrolling] = useState(false);
-	const [isBulkLoading, setIsBulkLoading] = useState(false);
 	const [isOpenedSecond, setIsOpenedSecond] = useState(false);
-	const { isOpen, toggleModal } = useModal();
-	const { isOpen: isOpenDelete, toggleModal: toggleModalDelete } = useModal();
+	const { isOpen, toggleModal } = useModals(["edit", "delete", "overwrite", "import", "checkImport"] as const);
 	const tableRef = useRef<HTMLDivElement>(null);
 	const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
 	const { setFiltersSelection, resetFilterQuery, filterValues, filterQuery } = useFilterQuery(currentSite);
 	const { isVisible, toggleToast, setIsVisible } = useToast();
 	const { isVisible: isImportVisible, toggleToast: toggleImportToast, setIsVisible: setIsImportVisible } = useToast();
-	const { isOpen: isOpenOverwrite, toggleModal: toggleOverwriteModal } = useModal();
-	const { isOpen: isOpenImport, toggleModal: toggleImportModal } = useModal();
-	const { isOpen: isOpenCheckImport, toggleModal: toggleCheckImportModal } = useModal();
 	const [importData, setImportData] = useState<{ from: string; to: string }[]>([]);
 	const [isUploading, setIsUploading] = useState(false);
 	const [searchQuery, setSearchQuery] = useState<string>("");
@@ -129,13 +125,11 @@ const Redirects = (props: IProps): JSX.Element => {
 	} = useBulkSelection(redIds);
 
 	const bulkDelete = async () => {
-		setIsBulkLoading(true);
 		const deleted = await deleteRedirect(selectedItems.all);
 		if (deleted) {
 			toggleToast();
 		}
-		toggleModalDelete();
-		setIsBulkLoading(false);
+		toggleModal("delete");
 	};
 
 	const unselectAllItems = () => resetBulkSelection();
@@ -165,7 +159,7 @@ const Redirects = (props: IProps): JSX.Element => {
 	const TableHeader = (
 		<BulkHeader
 			showBulk={areItemsSelected(redIds)}
-			bulkDelete={toggleModalDelete}
+			bulkDelete={() => toggleModal("delete")}
 			selectAllItems={handleSelectAll}
 			totalItems={totalItems}
 			selectItems={selectItems}
@@ -178,7 +172,7 @@ const Redirects = (props: IProps): JSX.Element => {
 			sortedListStatus={sortedListStatus}
 			setHoverCheck={setHoverCheck}
 			selectedItems={selectedItems}
-			isLoading={isBulkLoading}
+			isLoading={isSaving}
 		/>
 	);
 
@@ -193,7 +187,7 @@ const Redirects = (props: IProps): JSX.Element => {
 
 	const rightLineButtonProps = {
 		label: "Import Redirects",
-		action: () => toggleImportModal(),
+		action: () => toggleModal("import"),
 	};
 
 	const handleMenuClick = (path: string) => {
@@ -203,18 +197,18 @@ const Redirects = (props: IProps): JSX.Element => {
 	const handleModal = () => {
 		setFormValues(initState);
 		setIsOpenedSecond(false);
-		toggleModal();
+		toggleModal("edit");
 	};
 
 	const handleAddRedirect = async (force?: boolean) => {
 		const toPage = formValues.to.pageId ? formValues.to.pageId : formValues.to.url;
-		await addRedirect({ from: formValues.from, to: toPage }, toggleOverwriteModal, force, filterQuery);
-		isOpen && toggleModal();
+		await addRedirect({ from: formValues.from, to: toPage }, () => toggleModal("overwrite"), force, filterQuery);
+		isOpen("edit") && toggleModal("edit");
 	};
 
 	const addItemActionForce = () => {
 		handleAddRedirect(true);
-		toggleOverwriteModal();
+		toggleModal("overwrite");
 	};
 
 	const pagination = {
@@ -234,27 +228,12 @@ const Redirects = (props: IProps): JSX.Element => {
 		message: `${(imports?.ok.length || 0) + (imports?.existing.length || 0)} Redirects imported`,
 	};
 
-	const mainDeleteModalAction = {
-		title: isBulkLoading ? "Deleting" : "Delete",
-		onClick: bulkDelete,
-		disabled: isBulkLoading,
-	};
-
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleModalDelete };
-
-	const mainOverwriteModalAction = {
-		title: "Overwrite redirect",
-		onClick: addItemActionForce,
-	};
-
-	const secondaryOverwriteModalAction = { title: "Cancel", onClick: toggleOverwriteModal };
-
 	const handleCheckImportData = async (data: { from: string; to: string }[]) => {
 		setImportData(data);
 		await importRedirects(data, true);
-		toggleImportModal();
+		toggleModal("import");
 		setIsUploading(false);
-		toggleCheckImportModal();
+		toggleModal("checkImport");
 	};
 
 	const handleImportData = async () => {
@@ -262,16 +241,9 @@ const Redirects = (props: IProps): JSX.Element => {
 		if (imported) {
 			toggleImportToast();
 		}
-		toggleCheckImportModal();
-	};
-
-	const mainImportModalAction = {
-		title: "Import correct directs",
-		onClick: handleImportData,
+		toggleModal("checkImport");
 	};
 
-	const secondaryImportModalAction = { title: "Cancel", onClick: toggleCheckImportModal };
-
 	const searchFilters = [
 		{ value: "from", label: "Old URL" },
 		{ value: "to", label: "New URL" },
@@ -350,9 +322,9 @@ const Redirects = (props: IProps): JSX.Element => {
 				</S.ContentWrapper>
 			</S.Wrapper>
 			<RedirectPanel
-				isOpen={isOpen}
+				isOpen={isOpen("edit")}
 				isOpenedSecond={isOpenedSecond}
-				toggleModal={toggleModal}
+				toggleModal={() => toggleModal("edit")}
 				toggleSecondaryPanel={toggleSecondaryPanel}
 				formValues={formValues}
 				setFormValues={setFormValues}
@@ -360,29 +332,27 @@ const Redirects = (props: IProps): JSX.Element => {
 				currentFilter={filterQuery}
 			/>
 			<DeleteModal
-				isOpen={isOpenDelete}
-				toggleModal={toggleModalDelete}
-				secondaryModalAction={secondaryDeleteModalAction}
-				mainModalAction={mainDeleteModalAction}
+				isOpen={isOpen("delete")}
+				toggleModal={() => toggleModal("delete")}
+				onDelete={bulkDelete}
+				isDeleting={isSaving}
 			/>
 			<OverwriteModal
-				isOpen={isOpenOverwrite}
-				toggleModal={toggleOverwriteModal}
-				secondaryModalAction={secondaryOverwriteModalAction}
-				mainModalAction={mainOverwriteModalAction}
+				isOpen={isOpen("overwrite")}
+				toggleModal={() => toggleModal("overwrite")}
+				onOverwrite={addItemActionForce}
 			/>
 			<ImportModal
-				isOpen={isOpenImport}
-				toggleModal={toggleImportModal}
+				isOpen={isOpen("import")}
+				toggleModal={() => toggleModal("import")}
 				checkImportData={handleCheckImportData}
 				isUploading={isUploading}
 				setIsUploading={setIsUploading}
 			/>
 			<ImportCheckModal
-				isOpen={isOpenCheckImport}
-				toggleModal={toggleCheckImportModal}
-				mainModalAction={mainImportModalAction}
-				secondaryModalAction={secondaryImportModalAction}
+				isOpen={isOpen("checkImport")}
+				toggleModal={() => toggleModal("checkImport")}
+				onImport={handleImportData}
 				imports={imports}
 				totalImports={totalImports}
 			/>
@@ -397,6 +367,7 @@ const mapStateToProps = (state: IRootState) => ({
 	totalImports: state.redirects.totalImports,
 	imports: state.redirects.imports,
 	isLoading: state.app.isLoading,
+	isSaving: state.app.isSaving,
 });
 
 const mapDispatchToProps = {
@@ -414,6 +385,7 @@ interface IRedirectsProps {
 	currentSite: ISite | null;
 	totalImports: number;
 	isLoading: boolean;
+	isSaving: boolean;
 	imports: null | {
 		error: IRedirect[];
 		existing: IRedirect[];

package/src/modules/Settings/Integrations/IntegrationItem/CopyModal/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
 import { FieldsBehavior, Modal } from "@ax/components";
 

package/src/modules/Settings/Integrations/IntegrationItem/index.tsx

@@ -1,16 +1,20 @@
+import { useState } from "react";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
-import type { UniqueIdentifier } from "@dnd-kit/core";
-import { useSortable } from "@dnd-kit/sortable";
 
-import { useModal, usePermission, useToast } from "@ax/hooks";
-import type { ICheck, IIntegration } from "@ax/types";
-import { CheckField, Icon, Modal, Toast, ToggleField, Tooltip } from "@ax/components";
 import { integrations } from "@ax/api";
-import { integrationsActions } from "@ax/containers/Integrations";
+import { CheckField, Icon, Toast, ToggleField, Tooltip } from "@ax/components";
 import { appActions } from "@ax/containers/App";
+import { integrationsActions } from "@ax/containers/Integrations";
+import { useModals, usePermissions, useToast } from "@ax/hooks";
+import type { ICheck, IIntegration, IRootState } from "@ax/types";
+
+import type { UniqueIdentifier } from "@dnd-kit/core";
+import { useSortable } from "@dnd-kit/sortable";
 
+import { ChangeStateModal, DeleteModal } from "../atoms";
 import CopyModal from "./CopyModal";
+
 import * as S from "./style";
 
 const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
@@ -25,17 +29,18 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
 		toggleToastChange,
 		listLength,
 		hoverCheck,
+		isSaving,
 	} = props;
 
-	const { isOpen: isOpenDelete, toggleModal: toggleModalDelete } = useModal();
-	const { isOpen: isOpenChangeState, toggleModal: toggleModalChangeState } = useModal();
-	const { isOpen: isOpenCopy, toggleModal: toggleModalCopy } = useModal();
+	const { isOpen, toggleModal } = useModals(["delete", "changeState", "copy"]);
 	const { isVisible: isVisibleCopy, toggleToast: toggleToastCopy, setIsVisible: setIsVisibleCopy } = useToast();
 
-	const isAllowedToManageIntegrations = usePermission("general.manageSiteThirdPartyIntegrations");
-	const isAllowedToActivateIntegrations = usePermission("general.activateSiteThirdPartyIntegrations");
-	const isAllowedToDeactivateIntegrations = usePermission("general.deactivateSiteThirdPartyIntegrations");
-	const isAllowedToDeleteIntegrations = usePermission("general.deleteSiteThirdPartyIntegrations");
+	const isAllowedTo = usePermissions({
+		manage: "general.manageSiteThirdPartyIntegrations",
+		activate: "general.activateSiteThirdPartyIntegrations",
+		deactivate: "general.deactivateSiteThirdPartyIntegrations",
+		delete: "general.deleteSiteThirdPartyIntegrations",
+	});
 
 	const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
 		id: integration.id as UniqueIdentifier,
@@ -60,12 +65,16 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
 	};
 
 	const removeItem = async () => {
-		if (integration.id) {
-			const params = getParams();
-			const deleted = await deleteIntegration(integration.id, params);
-			if (deleted) {
-				toggleToastDelete({ total: 1 });
+		try {
+			if (integration.id) {
+				const params = getParams();
+				const deleted = await deleteIntegration(integration.id, params);
+				if (deleted) {
+					toggleToastDelete({ total: 1 });
+				}
 			}
+		} finally {
+			toggleModal("delete");
 		}
 	};
 
@@ -76,45 +85,32 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
 		if (changed) {
 			toggleToastChange({ total: 1, active });
 		}
+		toggleModal("changeState");
 	};
 
 	const menuOptions = [
 		{
 			label: "copy in another site",
 			icon: "copy2",
-			action: toggleModalCopy,
+			action: () => toggleModal("copy"),
 		},
 	];
 
-	if (isAllowedToDeleteIntegrations) {
+	if (isAllowedTo.delete) {
 		menuOptions.push({
 			label: "delete",
 			icon: "delete",
-			action: toggleModalDelete,
+			action: () => toggleModal("delete"),
 		});
 	}
 
-	const mainDeleteModalAction = {
-		title: "Delete add-on",
-		onClick: removeItem,
-	};
-
-	const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleModalDelete };
-
-	const mainChangeStateModalAction = {
-		title: `${integration.active ? "Disable" : "Enable"} add-on`,
-		onClick: handleChangeState,
-	};
-
-	const secondaryChangeStateModalAction = { title: "Cancel", onClick: toggleModalChangeState };
-
 	const copyToastProps = {
 		setIsVisible: setIsVisibleCopy,
 		message: "1 Add-on copied to another Site",
 	};
 
 	const copyIntegration = async (site: number) => {
-		toggleModalCopy();
+		toggleModal("copy");
 		if (integration.id) {
 			await integrations.duplicateIntegration(integration.id, site);
 			toggleToastCopy();
@@ -132,8 +128,7 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
 	const handleCheckClick = (e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation();
 
 	const isToggleDisabled =
-		(integration.active && !isAllowedToDeactivateIntegrations) ||
-		(!integration.active && !isAllowedToActivateIntegrations);
+		(integration.active && !isAllowedTo.deactivate) || (!integration.active && !isAllowedTo.activate);
 
 	const getIntegrationDescription = () => {
 		switch (integration.type) {
@@ -198,7 +193,7 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
 				data-testid="integration-item-row"
 				disabled={!integration.editable}
 				onClick={handleClick}
-				clickable={isAllowedToManageIntegrations}
+				clickable={isAllowedTo.manage}
 				ref={setNodeRef}
 				cssTransform={transform}
 				transition={transition}
@@ -236,7 +231,7 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
 							<ToggleField
 								name="state"
 								value={integration.active}
-								onChange={toggleModalChangeState}
+								onChange={() => toggleModal("changeState")}
 								disabled={isToggleDisabled}
 								size="s"
 							/>
@@ -247,34 +242,22 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
 					</>
 				)}
 			</S.ItemRow>
-			<Modal
-				isOpen={isOpenDelete}
-				hide={toggleModalDelete}
-				title="Delete add-on"
-				secondaryAction={secondaryDeleteModalAction}
-				mainAction={mainDeleteModalAction}
-				size="S"
-			>
-				<S.ModalContent>
-					Are you sure you want to delete <strong>{integration.name} add-on</strong>? This action{" "}
-					<strong>cannot be undone</strong>.
-				</S.ModalContent>
-			</Modal>
-			<Modal
-				isOpen={isOpenChangeState}
-				hide={toggleModalChangeState}
-				title={`${integration.active ? "Disable" : "Enable"} Add-on`}
-				secondaryAction={secondaryChangeStateModalAction}
-				mainAction={mainChangeStateModalAction}
-				size="S"
-			>
-				<S.ModalContent>
-					Are you sure you want to {integration.active ? "disable" : "enable"}{" "}
-					<strong>{integration.name} add-on</strong>? This add-on will {integration.active ? "stop" : "start"} working
-					in the pages previously added.
-				</S.ModalContent>
-			</Modal>
-			<CopyModal isOpen={isOpenCopy} hide={toggleModalCopy} action={copyIntegration} />
+			<DeleteModal
+				isOpen={isOpen("delete")}
+				toggleModal={() => toggleModal("delete")}
+				integrations={[integration]}
+				selectedIds={[integration.id ?? 0]}
+				onDelete={removeItem}
+				isDeleting={isSaving}
+			/>
+			<ChangeStateModal
+				isOpen={isOpen("changeState")}
+				toggleModal={() => toggleModal("changeState")}
+				integration={integration}
+				onChangeState={handleChangeState}
+				isUpdating={isSaving}
+			/>
+			<CopyModal isOpen={isOpen("copy")} hide={() => toggleModal("copy")} action={copyIntegration} />
 			{isVisibleCopy && <Toast {...copyToastProps} />}
 		</>
 	);
@@ -291,8 +274,13 @@ interface IProps {
 	toggleToastChange: (state: { total: number; active: boolean }) => void;
 	listLength: number;
 	hoverCheck: boolean;
+	isSaving: boolean;
 }
 
+const mapStateToProps = (state: IRootState) => ({
+	isSaving: state.app.isSaving,
+});
+
 const mapDispatchToProps = {
 	setHistoryPush: appActions.setHistoryPush,
 	setCurrentIntegration: integrationsActions.setCurrentIntegration,
@@ -305,4 +293,4 @@ interface IDispatchProps {
 
 export type IIntegrationItemProps = IProps & IDispatchProps;
 
-export default connect(null, mapDispatchToProps)(IntegrationItem);
+export default connect(mapStateToProps, mapDispatchToProps)(IntegrationItem);

package/src/modules/Settings/Integrations/atoms.tsx

@@ -1,13 +1,20 @@
-import React from "react";
-
-import { IIntegration, IModal } from "@ax/types";
 import { Modal } from "@ax/components";
+import type { IIntegration, IModal } from "@ax/types";
 
 import { getIntegrationsNames } from "./utils";
+
 import * as S from "./style";
 
-const DeleteModal = (props: IModal & { integrations: IIntegration[]; selectedIds: number[] }): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction, integrations, selectedIds } = props;
+const DeleteModal = (props: IDeleteModalProps): JSX.Element => {
+	const { isOpen, toggleModal, integrations, selectedIds, onDelete, isDeleting = false } = props;
+
+	const mainModalAction = {
+		title: isDeleting ? "Deleting" : "Delete",
+		onClick: onDelete,
+		disabled: isDeleting,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
 
 	return (
 		<Modal
@@ -17,6 +24,7 @@ const DeleteModal = (props: IModal & { integrations: IIntegration[]; selectedIds
 			secondaryAction={secondaryModalAction}
 			mainAction={mainModalAction}
 			size="S"
+			height="auto"
 		>
 			<S.ModalContent>
 				Are you sure you want to delete {getIntegrationsNames(integrations, selectedIds)}? This action{" "}
@@ -26,8 +34,16 @@ const DeleteModal = (props: IModal & { integrations: IIntegration[]; selectedIds
 	);
 };
 
-const DeactivateModal = (props: IModal & { integrations: IIntegration[]; selectedIds: number[] }): JSX.Element => {
-	const { isOpen, toggleModal, mainModalAction, secondaryModalAction, integrations, selectedIds } = props;
+const DeactivateModal = (props: IDeactivateModalProps): JSX.Element => {
+	const { isOpen, toggleModal, integrations, selectedIds, onDeactivate, isDeactivating = false } = props;
+
+	const mainModalAction = {
+		title: isDeactivating ? "Disabling" : "Deactivate",
+		onClick: onDeactivate,
+		disabled: isDeactivating,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
 
 	return (
 		<Modal
@@ -46,4 +62,52 @@ const DeactivateModal = (props: IModal & { integrations: IIntegration[]; selecte
 	);
 };
 
-export { DeleteModal, DeactivateModal };
+const ChangeStateModal = (props: IChangeStateModalProps): JSX.Element => {
+	const { isOpen, toggleModal, integration, onChangeState, isUpdating } = props;
+
+	const mainModalAction = {
+		title: isUpdating ? "Updating" : `${integration.active ? "Disable" : "Enable"} Add-on`,
+		onClick: onChangeState,
+		disabled: isUpdating,
+	};
+
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			hide={toggleModal}
+			title={`${integration.active ? "Disable" : "Enable"} Add-on`}
+			secondaryAction={secondaryModalAction}
+			mainAction={mainModalAction}
+			size="S"
+		>
+			<S.ModalContent>
+				Are you sure you want to {integration.active ? "disable" : "enable"} <strong>{integration.name} add-on</strong>?
+				This add-on will {integration.active ? "stop" : "start"} working in the pages previously added.
+			</S.ModalContent>
+		</Modal>
+	);
+};
+
+interface IDeleteModalProps extends IModal {
+	integrations: IIntegration[];
+	selectedIds: number[];
+	onDelete(): void;
+	isDeleting?: boolean;
+}
+
+interface IDeactivateModalProps extends IModal {
+	integrations: IIntegration[];
+	selectedIds: number[];
+	onDeactivate(): void | Promise<void>;
+	isDeactivating?: boolean;
+}
+
+interface IChangeStateModalProps extends IModal {
+	integration: IIntegration;
+	isUpdating: boolean;
+	onChangeState(): void;
+}
+
+export { DeleteModal, DeactivateModal, ChangeStateModal };