@griddo/ax 11.11.1 → 11.11.3-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.11.1",
+  "version": "11.11.3-rc.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -217,5 +217,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2539c0d375e727e284461f49137076306798b12b"
+  "gitHead": "9711475ea006516930779a19a6ed56502b6c2454"
 }

package/src/components/Button/style.tsx

@@ -13,6 +13,7 @@ const Button = styled.button<{ iconFill: boolean }>`
   vertical-align: middle;
   cursor: pointer;
   position: relative;
+  flex-shrink: 0;
   :before {
     content: "";
     border-radius: 4px;

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

@@ -146,7 +146,7 @@ const PageConnectedField = (props: any): JSX.Element => {
 			}
 
 			if (!isMetaTitleModified) {
-				updateEditorContent(selectedEditorID, "metaTitle", value);
+				updateEditorContent(selectedEditorID, "metaTitle", value.trim());
 			}
 		}
 

package/src/forms/editor.tsx

@@ -63,7 +63,7 @@ const generateEditorIDs = (originalPageContent: any) => {
 			component.parentEditorID = parentID;
 		}
 
-		const nextParentID = Object.prototype.hasOwnProperty.call(component, "editorID") ? component.editorID : parentID;
+		const nextParentID = Object.hasOwn(component, "editorID") ? component.editorID : parentID;
 
 		for (const key in component) {
 			component[key] = setEditorID(component[key], nextParentID);
@@ -107,9 +107,6 @@ const getNewBreadcrumb = (componentsTree: any, editorID: number, isFiltered?: bo
 	return newBreadcrumb;
 };
 
-const setIsSavedData = (isSaved: boolean) => localStorage.setItem("isSaved", `${isSaved}`);
-const getIsSavedData = () => localStorage.getItem("isSaved");
-
 const cleanPageValues = (updatedValues: any, originalValues: any) => {
 	delete updatedValues["modified"];
 	delete updatedValues["entity"];
@@ -240,19 +237,17 @@ function findByComponent(obj: any, componentName: string) {
 }
 
 export {
-	parseData,
+	checkMaxModules,
 	cleanContent,
+	cleanPageValues,
+	evaluateComputedFields,
+	filterBreadcrumb,
+	findByComponent,
 	findByEditorID,
 	generateEditorIDs,
-	filterBreadcrumb,
-	getNewBreadcrumb,
-	setIsSavedData,
-	getIsSavedData,
-	cleanPageValues,
-	getLastModuleEditorID,
 	getLastComponentEditorID,
+	getLastModuleEditorID,
+	getNewBreadcrumb,
 	getParentKey,
-	checkMaxModules,
-	evaluateComputedFields,
-	findByComponent,
+	parseData,
 };

package/src/forms/index.tsx

@@ -1,39 +1,37 @@
 import {
-	parseData,
+	checkMaxModules,
 	cleanContent,
+	cleanPageValues,
+	evaluateComputedFields,
+	findByComponent,
 	findByEditorID,
 	generateEditorIDs,
-	getNewBreadcrumb,
-	setIsSavedData,
-	getIsSavedData,
-	cleanPageValues,
-	getLastModuleEditorID,
 	getLastComponentEditorID,
+	getLastModuleEditorID,
+	getNewBreadcrumb,
 	getParentKey,
-	checkMaxModules,
-	evaluateComputedFields,
-	findByComponent,
+	parseData,
 } from "./editor";
 import {
+	addElement,
+	deleteComponent,
 	getUpdatedComponents,
 	getUpdatedSections,
-	updateComponent,
-	updateByEditorID,
-	moveModule,
 	moveElement,
-	deleteComponent,
+	moveModule,
 	replaceElements,
+	updateByEditorID,
+	updateComponent,
 	updateElementCollection,
-	addElement,
 } from "./elements";
 import { getInnerFields, getStructuredDataInnerFields } from "./fields";
 import {
-	getValidity,
-	findPackagesActivationErrors,
+	checkH1content,
 	findFieldsErrors,
-	isTemplateActivated,
 	findMandatoryStructuredDataErrors,
-	checkH1content,
+	findPackagesActivationErrors,
+	getValidity,
+	isTemplateActivated,
 	parseValidationErrors,
 } from "./validators";
 
@@ -43,8 +41,6 @@ export {
 	findByEditorID,
 	generateEditorIDs,
 	getNewBreadcrumb,
-	setIsSavedData,
-	getIsSavedData,
 	cleanPageValues,
 	getUpdatedComponents,
 	updateComponent,

package/src/hooks/forms.tsx

@@ -1,11 +1,13 @@
-import { memo, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 
-import { cleanPageValues, getIsSavedData } from "@ax/forms";
+import { cleanPageValues } from "@ax/forms";
 import { deepClone, isEmptyObj } from "@ax/helpers";
 import type { FormContent, IUser } from "@ax/types";
 
 import isEqual from "lodash.isequal";
 
+const DEBUG_DIRTY = true;
+
 const useDebounce = (value: any) => {
 	// State and setters for debounced value
 	const [debouncedValue, setDebouncedValue] = useState(value);
@@ -55,7 +57,6 @@ const usePrevious = (
 	const { isSaved, force } = options || {};
 	const valueStr = value && JSON.stringify(value);
 	const ref = useRef<Record<string, unknown> | string | undefined>(undefined);
-	const isSavedData = getIsSavedData();
 
 	useEffect(() => {
 		const currentValue = valueStr && JSON.parse(valueStr);
@@ -66,17 +67,32 @@ const usePrevious = (
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO fix this
 	useEffect(() => {
-		if (isSavedData || isSaved) {
+		if (isSaved) {
 			ref.current = valueStr && JSON.parse(valueStr);
 		}
-	}, [isSavedData, isSaved]);
+	}, [isSaved]);
 
 	return ref.current;
 };
 
+const getChangedKeys = (
+	prev: Record<string, unknown>,
+	next: Record<string, unknown>,
+): Array<{ key: string; prev: unknown; next: unknown }> => {
+	const allKeys = new Set([...Object.keys(prev), ...Object.keys(next)]);
+	const diffs: Array<{ key: string; prev: unknown; next: unknown }> = [];
+	for (const key of allKeys) {
+		if (!isEqual(prev[key], next[key])) {
+			diffs.push({ key, prev: prev[key], next: next[key] });
+		}
+	}
+	return diffs;
+};
+
 const useIsDirty = (
 	updatedValues: any,
 	isNew?: boolean,
+	debug = DEBUG_DIRTY,
 ): { isDirty: boolean; setIsDirty(state: boolean): void; resetDirty: any } => {
 	const [isDirty, setIsDirty] = useState(false);
 	const [isSaved, setIsSaved] = useState(false);
@@ -85,7 +101,11 @@ const useIsDirty = (
 
 	const prevContent = usePrevious(updatedValues, { isSaved, force });
 
-	const hasChanged = (): boolean => {
+	useEffect(() => {
+		if (force) setForce(false);
+	}, [force]);
+
+	const hasChanged = useCallback((): boolean => {
 		if (prevContent && updatedValues) {
 			const originalValuesCloned = prevContent && deepClone(prevContent);
 			const updatedValuesCloned = updatedValues && deepClone(updatedValues);
@@ -94,17 +114,37 @@ const useIsDirty = (
 
 			const hasChanged = !isEqual(cleanUpdatedValues, cleanOriginalValues);
 
+			if (debug) {
+				console.groupCollapsed(
+					`[useIsDirty] hasChanged: %c${hasChanged}`,
+					hasChanged ? "color: red; font-weight: bold" : "color: green",
+				);
+				console.log("Snapshot (cleaned):", cleanOriginalValues);
+				console.log("Current  (cleaned):", cleanUpdatedValues);
+				const diffs = getChangedKeys(
+					cleanOriginalValues as Record<string, unknown>,
+					cleanUpdatedValues as Record<string, unknown>,
+				);
+				if (diffs.length > 0) {
+					console.table(diffs);
+				}
+				console.groupEnd();
+			}
+
 			return hasChanged;
 		}
 		return false;
-	};
+	}, [prevContent, updatedValues, debug]);
 
-	const resetDirty = (reseting = true, force = false) => {
+	const resetDirty = useCallback((reseting = true, forceUpdate = false) => {
+		if (debug) {
+			console.log(`[useIsDirty] resetDirty(resetting=${reseting}, force=${forceUpdate})`);
+		}
 		setIsDirty(false);
 		setIsSaved(true);
 		reseting && setIsResetting(true);
-		setForce(force);
-	};
+		setForce(forceUpdate);
+	}, [debug]);
 
 	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
@@ -114,14 +154,17 @@ const useIsDirty = (
 		}
 
 		if (isNew) {
+			if (debug) console.log("[useIsDirty] isNew=true → isDirty=false");
 			setIsDirty(false);
 		} else if (prevContent && updatedValues) {
 			const isUpdated = hasChanged();
 
 			if (isUpdated) {
+				if (debug) console.log("[useIsDirty] dirty=true");
 				setIsDirty(true);
 				setIsSaved(false);
 			} else {
+				if (debug) console.log("[useIsDirty] dirty=false (no changes)");
 				setIsDirty(false);
 			}
 		}
@@ -141,7 +184,7 @@ const cleanModified = (updatedValues: any, originalValues: any) => {
 	};
 };
 
-const useShouldBeSaved = (form: Record<string, unknown> | IUser | FormContent) => {
+const useShouldBeSaved = (form: Record<string, unknown> | IUser | FormContent, debug = DEBUG_DIRTY) => {
 	const [isDirty, setIsDirty] = useState(false);
 	const formRef = useRef();
 
@@ -156,9 +199,31 @@ const useShouldBeSaved = (form: Record<string, unknown> | IUser | FormContent) =
 			const { cleanUpdatedValues, cleanOriginalValues } = cleanModified(formRef.current, form);
 			const isFormDirty =
 				cleanOriginalValues.id && !cleanUpdatedValues.id ? false : !isEqual(cleanUpdatedValues, cleanOriginalValues);
+
+			if (debug) {
+				console.groupCollapsed(
+					`[useShouldBeSaved] isDirty: %c${isFormDirty}`,
+					isFormDirty ? "color: red; font-weight: bold" : "color: green",
+				);
+				console.log("Stored ref (cleaned):", cleanUpdatedValues);
+				console.log("Current    (cleaned):", cleanOriginalValues);
+				if (cleanOriginalValues.id && !cleanUpdatedValues.id) {
+					console.log("Suppressed: original has id, ref does not.");
+				}
+				const diffs = getChangedKeys(
+					cleanUpdatedValues as Record<string, unknown>,
+					cleanOriginalValues as Record<string, unknown>,
+				);
+				if (diffs.length > 0) {
+					console.table(diffs);
+				}
+				console.groupEnd();
+			}
+
 			setIsDirty(isFormDirty);
 			formRef.current = stringValue && JSON.parse(stringValue);
 		} else {
+			if (debug) console.log("[useShouldBeSaved] form=null → isDirty=false");
 			setIsDirty(false);
 		}
 	}, [form]);

package/src/modules/GlobalEditor/index.tsx

@@ -92,6 +92,8 @@ const GlobalEditor = (props: IProps) => {
 	const { isOpen: isScheduleOpen, toggleModal: toggleScheduleModal } = useModal();
 	const { isOpen: isCancelScheduleOpen, toggleModal: toggleCancelScheduleModal } = useModal();
 	const { isOpen: isRestoreOpen, toggleModal: toggleRestoreModal } = useModal();
+	const { isOpen: isDirtyNavigateOpen, toggleModal: toggleDirtyNavigateModal } = useModal();
+	const [pendingNavigateCallback, setPendingNavigateCallback] = useState<(() => void) | null>(null);
 	const browserRef = useRef<HTMLDivElement>(null);
 
 	const isPublished = props.pageStatus === pageStatus.PUBLISHED || props.pageStatus === pageStatus.UPLOAD_PENDING;
@@ -443,11 +445,37 @@ const GlobalEditor = (props: IProps) => {
 		}
 	};
 
-	const toggleDraftPage = async () => {
+	const executeToggleDraftPage = async () => {
 		const { getPage } = props;
-		resetDirty(undefined, true);
 		const pageID = isDraft ? editorContent.draftFromPage : editorContent.haveDraftPage;
 		await getPage(pageID);
+		resetDirty(true, true);
+	};
+
+	const toggleDraftPage = () => {
+		if (isDirty) {
+			onNavigateWithDirty(executeToggleDraftPage);
+			return;
+		}
+		executeToggleDraftPage();
+	};
+
+	const onNavigateWithDirty = (navigateCallback: () => void) => {
+		setPendingNavigateCallback(() => navigateCallback);
+		toggleDirtyNavigateModal();
+	};
+
+	const handleConfirmDirtyNavigation = () => {
+		toggleDirtyNavigateModal();
+		if (pendingNavigateCallback) {
+			pendingNavigateCallback();
+			setPendingNavigateCallback(null);
+		}
+	};
+
+	const handleCancelDirtyNavigation = () => {
+		toggleDirtyNavigateModal();
+		setPendingNavigateCallback(null);
 	};
 
 	let pageStatusActions =
@@ -712,6 +740,19 @@ const GlobalEditor = (props: IProps) => {
 					}}
 				/>
 			</MainWrapper>
+			<Modal
+				isOpen={isDirtyNavigateOpen}
+				hide={handleCancelDirtyNavigation}
+				size="S"
+				title="Unsaved changes"
+				mainAction={{ title: "Yes, discard changes", onClick: handleConfirmDirtyNavigation }}
+				secondaryAction={{ title: "Cancel", onClick: handleCancelDirtyNavigation }}
+			>
+				<S.ModalContent>
+					Some content <strong>is not saved</strong> on this page. If you exit without saving it, it will be lost. Do
+					you want to discard your changes?
+				</S.ModalContent>
+			</Modal>
 		</>
 	);
 };

package/src/modules/Navigation/Menus/List/index.tsx

@@ -1,15 +1,14 @@
-import React, { useEffect, useCallback } from "react";
+import { useCallback, useEffect } from "react";
 import { connect } from "react-redux";
 
-import { IGetSitePagesParams, IRootState, IMenuItem } from "@ax/types";
-
-import { sitesActions } from "@ax/containers/Sites";
 import { menuActions } from "@ax/containers/Navigation";
-import { useShouldBeSaved } from "./helpers";
-import { setIsSavedData } from "@ax/forms";
+import { sitesActions } from "@ax/containers/Sites";
+import type { IGetSitePagesParams, IMenuItem, IRootState } from "@ax/types";
 
+import { useShouldBeSaved } from "./helpers";
 import Nav from "./Nav";
 import Table from "./Table";
+
 import * as S from "./style";
 
 const List = (props: IMenuList): JSX.Element => {
@@ -28,6 +27,7 @@ const List = (props: IMenuList): JSX.Element => {
 		[getSitePages],
 	);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: Fix this
 	useEffect(() => {
 		const params = {
 			siteID: currentSiteID,
@@ -37,7 +37,6 @@ const List = (props: IMenuList): JSX.Element => {
 		};
 		memoizedGetSitePages(params);
 		memoizedGetMenus();
-		setIsSavedData(true);
 		return () => {
 			setCurrentType("");
 		};

package/src/modules/Navigation/Menus/index.tsx

@@ -1,12 +1,10 @@
-import React from "react";
 import { connect } from "react-redux";
 
-import { menuActions } from "@ax/containers/Navigation";
-import { appActions } from "@ax/containers/App";
-import { ILanguage, IRootState } from "@ax/types";
-import { setIsSavedData } from "@ax/forms";
 import { MainWrapper } from "@ax/components";
+import { appActions } from "@ax/containers/App";
+import { menuActions } from "@ax/containers/Navigation";
 import { usePermission } from "@ax/hooks";
+import type { ILanguage, IRootState } from "@ax/types";
 
 import List from "./List";
 
@@ -16,8 +14,7 @@ const MenuView = (props: IMenus) => {
 	const isAllowedToMangageMenus = usePermission("navigation.manageSiteMenu");
 
 	const saveMenu = () => {
-		setIsSavedData(true);
-		return updateMenu();
+		updateMenu();
 	};
 
 	const rightButtonProps = isAllowedToMangageMenus

package/src/modules/PageEditor/index.tsx

@@ -481,11 +481,19 @@ const PageEditor = (props: IProps) => {
 		}
 	};
 
-	const toggleDraftPage = async () => {
+	const executeToggleDraftPage = async () => {
 		const { getPage } = props;
-		resetDirty(undefined, true);
 		const pageID = isDraft ? editorContent.draftFromPage : editorContent.haveDraftPage;
 		await getPage(pageID);
+		resetDirty(true, true);
+	};
+
+	const toggleDraftPage = () => {
+		if (isDirty) {
+			onNavigateWithDirty(executeToggleDraftPage);
+			return;
+		}
+		executeToggleDraftPage();
 	};
 
 	let pageStatusActions =

package/src/modules/Settings/ContentTypes/DataPacks/hooks.tsx

@@ -1,12 +1,17 @@
+import { useEffect, useRef, useState } from "react";
+
 import isEqual from "lodash.isequal";
-import { useEffect, useState, useRef } from "react";
 
-const useShouldBeSaved = (selected: any | null, form: any | null): { isDirty: boolean } => {
+const useShouldBeSaved = (
+	selected: any | null,
+	form: any | null,
+): { isDirty: boolean; setIsDirty: (isDirty: boolean) => void } => {
 	const formRef = useRef();
 	const [isDirty, setIsDirty] = useState(false);
-	const savedValues = selected && selected.config && JSON.stringify(selected.config);
+	const savedValues = selected?.config && JSON.stringify(selected.config);
 	const stringValue = form && JSON.stringify(form);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: TODO: fix this
 	useEffect(() => {
 		if (!formRef.current) {
 			formRef.current = stringValue && JSON.parse(stringValue);
@@ -15,7 +20,7 @@ const useShouldBeSaved = (selected: any | null, form: any | null): { isDirty: bo
 		savedValues ? setIsDirty(savedValues !== stringValue) : setIsDirty(!isEqual(stringFormRef, stringValue));
 	}, [form]);
 
-	return { isDirty };
+	return { isDirty, setIsDirty };
 };
 
 export { useShouldBeSaved };

package/src/modules/Settings/ContentTypes/DataPacks/index.tsx

@@ -1,19 +1,18 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { connect } from "react-redux";
 
-import { IRootState, IDataPack } from "@ax/types";
-import { useModal, useToast } from "@ax/hooks";
-import { RouteLeavingGuard } from "@ax/guards";
-import { setIsSavedData } from "@ax/forms";
-import { dataPacksActions } from "@ax/containers/Settings";
+import { EmptyState, ErrorToast, Loading, MainWrapper, Modal, Toast } from "@ax/components";
 import { appActions } from "@ax/containers/App";
-import { ErrorToast, Loading, MainWrapper, Modal, Toast, EmptyState } from "@ax/components";
+import { dataPacksActions } from "@ax/containers/Settings";
+import { RouteLeavingGuard } from "@ax/guards";
+import { useModal, useToast } from "@ax/hooks";
+import type { IDataPack, IRootState } from "@ax/types";
 
-import { useShouldBeSaved } from "./hooks";
+import AddModal from "./AddModal";
 import Config from "./Config";
-import Nav from "./Nav";
+import { useShouldBeSaved } from "./hooks";
 import List from "./List";
-import AddModal from "./AddModal";
+import Nav from "./Nav";
 
 import * as S from "./style";
 
@@ -34,9 +33,9 @@ const DataPacks = (props: IProps): JSX.Element => {
 		routerAction,
 	} = props;
 
-	const isFromPage = selected && selected.templates && selected.templates.length > 0;
+	const isFromPage = selected?.templates && selected.templates.length > 0;
 
-	const { isDirty } = useShouldBeSaved(selected, form);
+	const { isDirty, setIsDirty } = useShouldBeSaved(selected, form);
 	const { isOpen, toggleModal } = useModal();
 	const { isVisible, toggleToast, setIsVisible } = useToast();
 	const errorRef = React.useRef<HTMLDivElement>(null);
@@ -47,10 +46,11 @@ const DataPacks = (props: IProps): JSX.Element => {
 	const toggleDeleteModal = () => setIsDeleteModalOpen(!isDeleteModalOpen);
 
 	const saveConfig = async () => {
-		setIsSavedData(true);
 		const saved = await updateDataPack(selected.id);
 		if (!saved && errorRef.current) {
 			errorRef.current.scrollIntoView();
+		} else {
+			setIsDirty(false);
 		}
 	};
 
@@ -103,9 +103,9 @@ const DataPacks = (props: IProps): JSX.Element => {
 
 	const deleteModalText = (
 		<>
-			You are deactivating a <strong>{selected && selected.title}</strong> package. Some of its content is being used in
-			existing pages. By deactivating it, you won&apos;t be able to edit the content nor add new modules tied to it. You
-			will only be able to delete it.
+			You are deactivating a <strong>{selected?.title}</strong> package. Some of its content is being used in existing
+			pages. By deactivating it, you won&apos;t be able to edit the content nor add new modules tied to it. You will
+			only be able to delete it.
 		</>
 	);
 

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

@@ -13,7 +13,6 @@ import {
 import { appActions } from "@ax/containers/App";
 import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
 import { structuredDataActions } from "@ax/containers/StructuredData";
-import { setIsSavedData } from "@ax/forms";
 import { RouteLeavingGuard } from "@ax/guards";
 import { dateToString, getActivatedDataPacksIds, getDefaultTheme } from "@ax/helpers";
 import { useIsDirty, useModal } from "@ax/hooks";
@@ -64,7 +63,10 @@ const Form = (props: IProps) => {
 
 	const [isNewStructuredData, setIsNewStructuredData] = useState(!currentStructuredDataId);
 	const [notification, setNotification] = useState<INotification | null>(null);
-	const [scheduleDate, setScheduleDate] = useState({ date: dateToString(new Date(), "yyy/MM/dd"), time: "12:00 am" });
+	const [scheduleDate, setScheduleDate] = useState({
+		date: dateToString(new Date(), "yyy/MM/dd"),
+		time: "12:00 am",
+	});
 	const { isOpen: isScheduleOpen, toggleModal: toggleScheduleModal } = useModal();
 	const { isOpen: isCancelScheduleOpen, toggleModal: toggleCancelScheduleModal } = useModal();
 	const { isOpen: isRestoreOpen, toggleModal: toggleRestoreModal } = useModal();
@@ -141,7 +143,6 @@ const Form = (props: IProps) => {
 		const validated = publish && !skipReviewOnPublish ? await validateForm(true) : true;
 
 		if (validated) {
-			setIsSavedData(true);
 			const status = isNewStructuredData ? true : form.draft;
 
 			const payload: any = {
@@ -334,14 +335,20 @@ const Form = (props: IProps) => {
 		onClick: handleSchedulePublication,
 	};
 
-	const secondaryScheduleModalAction = { title: "Cancel", onClick: toggleScheduleModal };
+	const secondaryScheduleModalAction = {
+		title: "Cancel",
+		onClick: toggleScheduleModal,
+	};
 
 	const mainCancelScheduleModalAction = {
 		title: "Cancel Schedule",
 		onClick: handleCancelSchedulePublication,
 	};
 
-	const secondaryCancelScheduleModalAction = { title: "Back", onClick: toggleCancelScheduleModal };
+	const secondaryCancelScheduleModalAction = {
+		title: "Back",
+		onClick: toggleCancelScheduleModal,
+	};
 
 	return isLoading ? (
 		<Loading />

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

@@ -1,25 +1,26 @@
 import React, { useRef } from "react";
 import { connect } from "react-redux";
-import { useTheme } from "styled-components";
 
+import { CategoryCell, CheckField, Flag, FloatingMenu, Icon, LanguageMenu, Tooltip } from "@ax/components";
+import { appActions } from "@ax/containers/App";
+import { structuredDataActions } from "@ax/containers/StructuredData";
+import { getActivatedDataPacksIds, getHumanLastModifiedDate, getScheduleFormatDate } from "@ax/helpers";
+import { useAdaptiveText, usePermission } from "@ax/hooks";
 import type {
-	IRootState,
-	IStructuredDataContent,
 	ICheck,
+	IColumn,
+	IDataLanguage,
 	IDataPack,
 	ILanguage,
-	IDataLanguage,
-	IColumn,
+	IRootState,
+	ISchemaField,
 	ISite,
 	IStructuredData,
-	ISchemaField,
+	IStructuredDataContent,
 } from "@ax/types";
-import { getActivatedDataPacksIds, getHumanLastModifiedDate, getScheduleFormatDate } from "@ax/helpers";
-import { setIsSavedData } from "@ax/forms";
-import { structuredDataActions } from "@ax/containers/StructuredData";
-import { appActions } from "@ax/containers/App";
-import { CheckField, FloatingMenu, Icon, Flag, LanguageMenu, Tooltip, CategoryCell } from "@ax/components";
-import { useAdaptiveText, usePermission } from "@ax/hooks";
+
+import { useTheme } from "styled-components";
+
 import { getPermission } from "./utils";
 
 import * as S from "./style";
@@ -102,7 +103,6 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 
 	const duplicateItem = async () => {
 		resetForm();
-		setIsSavedData(false);
 		updateForm({ content: structuredData.content });
 		handleClick();
 	};
@@ -148,7 +148,12 @@ const StructuredDataItem = (props: IStructuredDataItemProps): JSX.Element => {
 		const isNew = currentLanguages.find((l) => l.id === language.id) ? false : true;
 
 		if (isNew) {
-			updateForm({ ...structuredData, id: null, language: id, canBeTranslated: true });
+			updateForm({
+				...structuredData,
+				id: null,
+				language: id,
+				canBeTranslated: true,
+			});
 		} else {
 			getDataContent(dataId, lang);
 		}