@elementor/editor-global-classes 4.1.0-719 → 4.1.0-721

package/dist/index.mjs

@@ -359,6 +359,41 @@ var getSanitizedData = async (payload) => {
         return { ...payload, classTitle: getCssClass(payload.classId).label };
       }
       break;
+    case "classSyncToV3PopupShown":
+      return {
+        ...payload,
+        interaction_type: "popup_shown",
+        target_type: "popup",
+        target_name: "sync_to_v3_popup",
+        interaction_result: "popup_viewed",
+        target_location: "widget_panel",
+        location_l1: "class_manager"
+      };
+    case "classSyncToV3": {
+      const classLabel = getCssClass(payload.classId).label;
+      const isSync = payload.action === "sync";
+      return {
+        ...payload,
+        interaction_type: "click",
+        target_type: classLabel,
+        target_name: isSync ? "sync_to_v3" : "unsync_to_v3",
+        interaction_result: isSync ? "class_is_synced_to_V3" : "class_is_unsynced_from_V3",
+        target_location: "widget_panel",
+        location_l1: "class_manager",
+        interaction_description: isSync ? `user_synced_${classLabel}_to_v3` : `user_unsync_${classLabel}_from_v3`
+      };
+    }
+    case "classSyncToV3PopupClick": {
+      const isSyncAction = payload.action === "sync";
+      return {
+        ...payload,
+        interaction_type: "click",
+        target_type: "button",
+        target_name: isSyncAction ? "sync_to_v3" : "cancel",
+        interaction_result: isSyncAction ? "class_is_synced" : "cancel",
+        target_location: "sync_to_v3_popup"
+      };
+    }
     default:
       return payload;
   }
@@ -576,7 +611,7 @@ var PrefetchCssClassUsage = () => {
 
 // src/components/class-manager/class-manager-panel.tsx
 import * as React19 from "react";
-import { useCallback, useEffect as useEffect3, useState as useState7 } from "react";
+import { useCallback, useEffect as useEffect4, useState as useState7 } from "react";
 import { useSuppressedMessage as useSuppressedMessage2 } from "@elementor/editor-current-user";
 import { getCurrentDocument, getV1DocumentsManager, setDocumentModifiedStatus } from "@elementor/editor-documents";
 import {
@@ -2107,7 +2142,7 @@ function unblockPanelInteractions() {
 
 // src/components/class-manager/start-sync-to-v3-modal.tsx
 import * as React18 from "react";
-import { useState as useState6 } from "react";
+import { useEffect as useEffect3, useRef as useRef2, useState as useState6 } from "react";
 import {
   Box as Box10,
   Button as Button2,
@@ -2120,12 +2155,33 @@ import {
 } from "@elementor/ui";
 import { __ as __14 } from "@wordpress/i18n";
 var IMAGE_URL = "https://assets.elementor.com/packages/v1/images/class-manager-sync-modal.png";
-var StartSyncToV3Modal = ({ externalOpen, onExternalClose, onConfirm } = {}) => {
+var StartSyncToV3Modal = ({
+  externalOpen,
+  classId,
+  onExternalClose,
+  onConfirm
+} = {}) => {
   const [shouldShowAgain, setShouldShowAgain] = useState6(true);
+  const hasTrackedExposure = useRef2(false);
+  useEffect3(() => {
+    if (externalOpen && classId && !hasTrackedExposure.current) {
+      hasTrackedExposure.current = true;
+      trackGlobalClasses({ event: "classSyncToV3PopupShown", classId });
+    }
+    if (!externalOpen) {
+      hasTrackedExposure.current = false;
+    }
+  }, [externalOpen, classId]);
   const handleClose = () => {
+    if (classId) {
+      trackGlobalClasses({ event: "classSyncToV3PopupClick", classId, action: "cancel" });
+    }
     onExternalClose?.();
   };
   const handleConfirm = () => {
+    if (classId) {
+      trackGlobalClasses({ event: "classSyncToV3PopupClick", classId, action: "sync" });
+    }
     onConfirm?.();
     onExternalClose?.();
   };
@@ -2196,6 +2252,7 @@ function ClassManagerPanel() {
         }
       })
     );
+    trackGlobalClasses({ event: "classSyncToV3", classId, action: "unsync" });
     setStopSyncConfirmation(null);
   }, []);
   const handleStartSync = useCallback((classId) => {
@@ -2207,6 +2264,7 @@ function ClassManagerPanel() {
         }
       })
     );
+    trackGlobalClasses({ event: "classSyncToV3", classId, action: "sync" });
     setStartSyncConfirmation(null);
   }, []);
   const handleStopSyncRequest = useCallback(
@@ -2278,6 +2336,7 @@ function ClassManagerPanel() {
     StartSyncToV3Modal,
     {
       externalOpen: true,
+      classId: startSyncConfirmation,
       onExternalClose: () => setStartSyncConfirmation(null),
       onConfirm: () => handleStartSync(startSyncConfirmation)
     }
@@ -2314,7 +2373,7 @@ var CloseButton = ({ onClose, ...props }) => /* @__PURE__ */ React19.createEleme
 var ErrorBoundaryFallback = () => /* @__PURE__ */ React19.createElement(Box11, { role: "alert", sx: { minHeight: "100%", p: 2 } }, /* @__PURE__ */ React19.createElement(Alert2, { severity: "error", sx: { mb: 2, maxWidth: 400, textAlign: "center" } }, /* @__PURE__ */ React19.createElement("strong", null, __15("Something went wrong", "elementor"))));
 var usePreventUnload = () => {
   const isDirty2 = useDirtyState();
-  useEffect3(() => {
+  useEffect4(() => {
     const handleBeforeUnload = (event) => {
       if (isDirty2) {
         event.preventDefault();
@@ -2475,11 +2534,11 @@ function createClassName(prefix) {
 }
 
 // src/components/global-styles-import-listener.tsx
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 import { __useDispatch as useDispatch2 } from "@elementor/store";
 function GlobalStylesImportListener() {
   const dispatch5 = useDispatch2();
-  useEffect4(() => {
+  useEffect5(() => {
     const handleGlobalStylesImported = (event) => {
       const importedClasses = event.detail?.global_classes;
       if (importedClasses?.items && importedClasses?.order) {
@@ -2526,15 +2585,15 @@ function GlobalStylesImportListener() {
 }
 
 // src/components/open-panel-from-url.tsx
-import { useEffect as useEffect5, useRef as useRef2 } from "react";
+import { useEffect as useEffect6, useRef as useRef3 } from "react";
 import { __privateListenTo as listenTo, routeOpenEvent } from "@elementor/editor-v1-adapters";
 var ACTIVE_PANEL_PARAM = "active-panel";
 var PANEL_ID = "global-classes-manager";
 var DEFAULT_PANEL_ROUTE = "panel/elements";
 function OpenPanelFromUrl() {
   const { open } = usePanelActions();
-  const hasOpened = useRef2(false);
-  useEffect5(() => {
+  const hasOpened = useRef3(false);
+  useEffect6(() => {
     const urlParams = new URLSearchParams(window.location.search);
     const activePanel = urlParams.get(ACTIVE_PANEL_PARAM);
     if (activePanel !== PANEL_ID) {
@@ -2555,11 +2614,11 @@ function OpenPanelFromUrl() {
 }
 
 // src/components/populate-store.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect7 } from "react";
 import { __useDispatch as useDispatch3 } from "@elementor/store";
 function PopulateStore() {
   const dispatch5 = useDispatch3();
-  useEffect6(() => {
+  useEffect7(() => {
     Promise.all([apiClient.all("preview"), apiClient.all("frontend")]).then(
       ([previewRes, frontendRes]) => {
         const { data: previewData } = previewRes;
@@ -3024,7 +3083,7 @@ var initMcpIntegration = () => {
 };
 
 // src/sync-with-document.tsx
-import { useEffect as useEffect7 } from "react";
+import { useEffect as useEffect8 } from "react";
 import { __privateListenTo as listenTo2, v1ReadyEvent } from "@elementor/editor-v1-adapters";
 
 // src/sync-with-document-save.ts
@@ -3089,7 +3148,7 @@ function isDirty() {
 // src/sync-with-document.tsx
 function SyncWithDocumentSave() {
   const panelActions = usePanelActions();
-  useEffect7(() => {
+  useEffect8(() => {
     listenTo2(v1ReadyEvent(), () => {
       syncWithDocumentSave(panelActions);
     });