@elementor/editor-interactions 4.0.0-676 → 4.0.0-678

package/dist/index.js

@@ -1280,15 +1280,23 @@ var import_i18n9 = require("@wordpress/i18n");
 // src/ui/interactions-promotion-chip.tsx
 var React13 = __toESM(require("react"));
 var import_react12 = require("react");
+var import_editor_controls7 = require("@elementor/editor-controls");
 var import_editor_ui = require("@elementor/editor-ui");
 var import_ui8 = require("@elementor/ui");
 var import_i18n8 = require("@wordpress/i18n");
 var InteractionsPromotionChip = (0, import_react12.forwardRef)(
-  ({ content, upgradeUrl, anchorRef }, ref) => {
+  ({ content, upgradeUrl, anchorRef, trackingData }, ref) => {
     const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
     (0, import_editor_ui.useCanvasClickHandler)(isOpen, () => setIsOpen(false));
-    const toggle = () => setIsOpen((prev) => !prev);
-    (0, import_react12.useImperativeHandle)(ref, () => ({ toggle }), []);
+    const toggle = (0, import_react12.useCallback)(() => {
+      setIsOpen((prev) => {
+        if (!prev) {
+          (0, import_editor_controls7.trackViewPromotion)(trackingData);
+        }
+        return !prev;
+      });
+    }, [trackingData]);
+    (0, import_react12.useImperativeHandle)(ref, () => ({ toggle }), [toggle]);
     const handleToggle = (e) => {
       e.stopPropagation();
       toggle();
@@ -1306,7 +1314,8 @@ var InteractionsPromotionChip = (0, import_react12.forwardRef)(
         onClose: (e) => {
           e.stopPropagation();
           setIsOpen(false);
-        }
+        },
+        onCtaClick: () => (0, import_editor_controls7.trackUpgradePromotionClick)(trackingData)
       },
       /* @__PURE__ */ React13.createElement(
         import_ui8.Box,
@@ -1330,7 +1339,8 @@ function PromotionSelect({
   disabledOptions,
   promotionLabel,
   promotionContent,
-  upgradeUrl
+  upgradeUrl,
+  trackingData
 }) {
   const promotionRef = (0, import_react13.useRef)(null);
   const anchorRef = (0, import_react13.useRef)(null);
@@ -1368,7 +1378,8 @@ function PromotionSelect({
           content: promotionContent,
           upgradeUrl,
           ref: promotionRef,
-          anchorRef
+          anchorRef,
+          trackingData
         }
       )
     ),
@@ -1377,6 +1388,7 @@ function PromotionSelect({
 }
 
 // src/components/controls/easing.tsx
+var TRACKING_DATA = { target_name: "interactions_easing", location_l2: "interactions" };
 var EASING_OPTIONS = {
   easeIn: (0, import_i18n10.__)("Ease In", "elementor"),
   easeInOut: (0, import_i18n10.__)("Ease In Out", "elementor"),
@@ -1401,7 +1413,8 @@ function Easing({}) {
       baseOptions,
       disabledOptions,
       promotionContent: (0, import_i18n10.__)("Upgrade to control the smoothness of the interaction.", "elementor"),
-      upgradeUrl: "https://go.elementor.com/go-pro-interactions-easing-modal/"
+      upgradeUrl: "https://go.elementor.com/go-pro-interactions-easing-modal/",
+      trackingData: TRACKING_DATA
     }
   );
 }
@@ -1409,6 +1422,7 @@ function Easing({}) {
 // src/components/controls/effect.tsx
 var React16 = __toESM(require("react"));
 var import_i18n11 = require("@wordpress/i18n");
+var TRACKING_DATA2 = { target_name: "interactions_effect", location_l2: "interactions" };
 var EFFECT_OPTIONS = {
   fade: (0, import_i18n11.__)("Fade", "elementor"),
   slide: (0, import_i18n11.__)("Slide", "elementor"),
@@ -1435,14 +1449,15 @@ function Effect({ value, onChange }) {
         "Upgrade to further customize your animation with opacity, scale, move, rotate and more.",
         "elementor"
       ),
-      upgradeUrl: "https://go.elementor.com/go-pro-interactions-custom-effect-modal/"
+      upgradeUrl: "https://go.elementor.com/go-pro-interactions-custom-effect-modal/",
+      trackingData: TRACKING_DATA2
     }
   );
 }
 
 // src/components/controls/effect-type.tsx
 var React17 = __toESM(require("react"));
-var import_editor_controls7 = require("@elementor/editor-controls");
+var import_editor_controls8 = require("@elementor/editor-controls");
 var import_i18n12 = require("@wordpress/i18n");
 function EffectType({ value, onChange }) {
   const options = [
@@ -1459,15 +1474,16 @@ function EffectType({ value, onChange }) {
       showTooltip: true
     }
   ];
-  return /* @__PURE__ */ React17.createElement(import_editor_controls7.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
+  return /* @__PURE__ */ React17.createElement(import_editor_controls8.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value });
 }
 
 // src/components/controls/replay.tsx
 var React18 = __toESM(require("react"));
-var import_editor_controls8 = require("@elementor/editor-controls");
+var import_editor_controls9 = require("@elementor/editor-controls");
 var import_icons4 = require("@elementor/icons");
 var import_ui10 = require("@elementor/ui");
 var import_i18n13 = require("@wordpress/i18n");
+var TRACKING_DATA3 = { target_name: "interactions_replay", location_l2: "interactions" };
 var REPLAY_OPTIONS = {
   no: (0, import_i18n13.__)("No", "elementor"),
   yes: (0, import_i18n13.__)("Yes", "elementor")
@@ -1492,12 +1508,13 @@ function Replay({ onChange, anchorRef }) {
       showTooltip: true
     }
   ];
-  return /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { gridArea: OVERLAY_GRID } }, /* @__PURE__ */ React18.createElement(import_editor_controls8.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value: false })), /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, /* @__PURE__ */ React18.createElement(
+  return /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { display: "grid", alignItems: "center" } }, /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { gridArea: OVERLAY_GRID } }, /* @__PURE__ */ React18.createElement(import_editor_controls9.ToggleButtonGroupUi, { items: options, exclusive: true, onChange, value: false })), /* @__PURE__ */ React18.createElement(import_ui10.Box, { sx: { gridArea: OVERLAY_GRID, marginInlineEnd: CHIP_OFFSET, justifySelf: "end" } }, /* @__PURE__ */ React18.createElement(
     InteractionsPromotionChip,
     {
       content: (0, import_i18n13.__)("Upgrade to run the animation every time its trigger occurs.", "elementor"),
       upgradeUrl: "https://go.elementor.com/go-pro-interactions-replay-modal/",
-      anchorRef
+      anchorRef,
+      trackingData: TRACKING_DATA3
     }
   )));
 }
@@ -1505,6 +1522,7 @@ function Replay({ onChange, anchorRef }) {
 // src/components/controls/trigger.tsx
 var React19 = __toESM(require("react"));
 var import_i18n14 = require("@wordpress/i18n");
+var TRACKING_DATA4 = { target_name: "interactions_trigger", location_l2: "interactions" };
 var TRIGGER_OPTIONS = {
   load: (0, import_i18n14.__)("Page load", "elementor"),
   scrollIn: (0, import_i18n14.__)("Scroll into view", "elementor"),
@@ -1529,7 +1547,8 @@ function Trigger({ value, onChange }) {
       disabledOptions,
       promotionLabel: (0, import_i18n14.__)("PRO triggers", "elementor"),
       promotionContent: (0, import_i18n14.__)("Upgrade to unlock more interactions triggers.", "elementor"),
-      upgradeUrl: "https://go.elementor.com/go-pro-interactions-triggers-modal/"
+      upgradeUrl: "https://go.elementor.com/go-pro-interactions-triggers-modal/",
+      trackingData: TRACKING_DATA4
     }
   );
 }