@elementor/editor-widget-creation 4.1.0-837 → 4.1.0-beta1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.js +50 -15
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +64 -16
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +5 -5
  6. package/src/components/create-widget.tsx +87 -37
package/dist/index.js CHANGED
@@ -47,37 +47,43 @@ var import_icons = require("@elementor/icons");
47
47
  var import_ui = require("@elementor/ui");
48
48
  var import_i18n = require("@wordpress/i18n");
49
49
  var CREATE_WIDGET_EVENT = "elementor/editor/create-widget";
50
- var PROMOTION_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/angie-promotion.svg";
51
- var ANGIE_CTA_CLICKED_EVENT = "angie_cta_clicked";
50
+ var ANGIE_MODAL_PROMOTION_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/angie-modal-promotion.png";
51
+ var ANGIE_CTA_CLICKED_EVENT = "ai_widget_cta_clicked";
52
52
  var ANGIE_INSTALL_STARTED_EVENT = "angie_install_started";
53
+ var ANGIE_INSTALL_COMPLETED_EVENT = "angie_install_completed";
54
+ var ANGIE_INSTALL_ABANDONED_EVENT = "angie_install_abandoned";
53
55
  function CreateWidgetModal({ prompt, entryPoint, onClose }) {
54
56
  const [installState, setInstallState] = (0, import_react.useState)("idle");
57
+ const [agreedToTerms, setAgreedToTerms] = (0, import_react.useState)(false);
55
58
  const handleClose = () => {
56
59
  if (installState === "installing") {
57
60
  return;
58
61
  }
62
+ (0, import_events.trackEvent)({
63
+ eventName: ANGIE_INSTALL_ABANDONED_EVENT,
64
+ abandon_step: installState === "error" ? "install_error" : "install_modal",
65
+ trigger_source: entryPoint
66
+ });
59
67
  onClose();
60
68
  };
61
69
  const handleInstall = async () => {
62
- if (!prompt) {
63
- return;
64
- }
65
70
  setInstallState("installing");
66
71
  (0, import_events.trackEvent)({
67
72
  eventName: ANGIE_INSTALL_STARTED_EVENT,
68
73
  trigger_source: entryPoint
69
74
  });
70
- const result = await (0, import_editor_mcp.installAngiePlugin)();
75
+ const [result] = await Promise.all([(0, import_editor_mcp.installAngiePlugin)(), (0, import_editor_mcp.saveAngieConsent)()]);
71
76
  if (!result.success) {
72
77
  setInstallState("error");
73
78
  return;
74
79
  }
80
+ (0, import_events.trackEvent)({
81
+ eventName: ANGIE_INSTALL_COMPLETED_EVENT,
82
+ trigger_source: entryPoint
83
+ });
75
84
  (0, import_editor_mcp.redirectToAppAdmin)(prompt);
76
85
  };
77
86
  const handleFallbackInstall = () => {
78
- if (!prompt) {
79
- return;
80
- }
81
87
  (0, import_editor_mcp.redirectToInstallation)(prompt);
82
88
  };
83
89
  return /* @__PURE__ */ React.createElement(import_editor_ui.ThemeProvider, null, /* @__PURE__ */ React.createElement(import_ui.Dialog, { fullWidth: true, maxWidth: "md", open: true, onClose: handleClose }, /* @__PURE__ */ React.createElement(
@@ -102,24 +108,53 @@ function CreateWidgetModal({ prompt, entryPoint, onClose }) {
102
108
  objectFit: "cover",
103
109
  objectPosition: "right center"
104
110
  },
105
- src: PROMOTION_IMAGE_URL
111
+ src: ANGIE_MODAL_PROMOTION_IMAGE_URL
106
112
  }
107
- ), /* @__PURE__ */ React.createElement(import_ui.Stack, { gap: 2, justifyContent: "center", p: 4 }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "h6", fontWeight: 600, whiteSpace: "nowrap" }, installState === "error" ? (0, import_i18n.__)("Installation failed", "elementor") : (0, import_i18n.__)("Install Angie to build custom widgets", "elementor")), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2", color: "text.secondary" }, installState === "error" ? (0, import_i18n.__)(
113
+ ), /* @__PURE__ */ React.createElement(import_ui.Stack, { justifyContent: "space-between", p: 4 }, /* @__PURE__ */ React.createElement(import_ui.Stack, { gap: 2.5, justifyContent: "center", sx: { flex: 1, paddingInlineEnd: 2.5 } }, /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "h4", fontWeight: 600, color: "text.secondary" }, installState === "error" ? (0, import_i18n.__)("Installation failed", "elementor") : (0, import_i18n.__)("Create custom widgets with Angie", "elementor")), /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2" }, installState === "error" ? (0, import_i18n.__)(
108
114
  "We couldn't install Angie automatically. Click below to install it manually.",
109
115
  "elementor"
110
116
  ) : (0, import_i18n.__)(
111
- "Angie lets you generate custom widgets, sections, and code using simple instructions.",
117
+ "Build custom widgets, sections, and code using simple instructions. Install once to start building directly from the editor.",
112
118
  "elementor"
113
- )), installState !== "error" && /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2", color: "text.secondary" }, (0, import_i18n.__)("Install once to start building directly inside the editor.", "elementor")), /* @__PURE__ */ React.createElement(import_ui.Stack, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } }, installState === "error" ? /* @__PURE__ */ React.createElement(import_ui.Button, { variant: "contained", color: "accent", onClick: handleFallbackInstall }, (0, import_i18n.__)("Install Manually", "elementor")) : /* @__PURE__ */ React.createElement(
119
+ )), installState !== "error" && /* @__PURE__ */ React.createElement(
120
+ import_ui.FormControlLabel,
121
+ {
122
+ control: /* @__PURE__ */ React.createElement(
123
+ import_ui.Checkbox,
124
+ {
125
+ size: "small",
126
+ checked: agreedToTerms,
127
+ onChange: (_e, checked) => setAgreedToTerms(checked)
128
+ }
129
+ ),
130
+ label: /* @__PURE__ */ React.createElement(import_ui.Typography, { variant: "body2", color: "text.secondary" }, (0, import_i18n.__)("I agree to the", "elementor"), /* @__PURE__ */ React.createElement(
131
+ import_ui.Link,
132
+ {
133
+ href: "https://elementor.com/terms/angie-terms-conditions/",
134
+ target: "_blank",
135
+ rel: "noopener noreferrer"
136
+ },
137
+ (0, import_i18n.__)("Terms", "elementor")
138
+ ), (0, import_i18n.__)("&", "elementor"), /* @__PURE__ */ React.createElement(
139
+ import_ui.Link,
140
+ {
141
+ href: "https://elementor.com/about/privacy/",
142
+ target: "_blank",
143
+ rel: "noopener noreferrer"
144
+ },
145
+ (0, import_i18n.__)("Privacy Policy.", "elementor")
146
+ ))
147
+ }
148
+ )), /* @__PURE__ */ React.createElement(import_ui.Stack, { direction: "row", justifyContent: "flex-end" }, installState === "error" ? /* @__PURE__ */ React.createElement(import_ui.Button, { variant: "contained", color: "accent", onClick: handleFallbackInstall }, (0, import_i18n.__)("Install Manually", "elementor")) : /* @__PURE__ */ React.createElement(
114
149
  import_ui.Button,
115
150
  {
116
151
  variant: "contained",
117
152
  color: "accent",
118
153
  onClick: handleInstall,
119
- disabled: installState === "installing",
154
+ disabled: installState === "installing" || !agreedToTerms,
120
155
  startIcon: installState === "installing" ? /* @__PURE__ */ React.createElement(import_ui.CircularProgress, { size: 18, color: "inherit" }) : void 0
121
156
  },
122
- installState === "installing" ? (0, import_i18n.__)("Installing\u2026", "elementor") : (0, import_i18n.__)("Install Angie", "elementor")
157
+ installState === "installing" ? (0, import_i18n.__)("Installing\u2026", "elementor") : (0, import_i18n.__)("Install & Activate", "elementor")
123
158
  )))))));
124
159
  }
125
160
  function CreateWidget() {
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/create-widget.tsx"],"sourcesContent":["export { init } from './init';\n","import { injectIntoTop } from '@elementor/editor';\n\nimport { CreateWidget } from './components/create-widget';\n\nexport function init() {\n\tinjectIntoTop( {\n\t\tid: 'create-widget',\n\t\tcomponent: CreateWidget,\n\t} );\n}\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport {\n\tinstallAngiePlugin,\n\tisAngieAvailable,\n\tredirectToAppAdmin,\n\tredirectToInstallation,\n\tsendPromptToAngie,\n} from '@elementor/editor-mcp';\nimport { ThemeProvider } from '@elementor/editor-ui';\nimport { trackEvent } from '@elementor/events';\nimport { XIcon } from '@elementor/icons';\nimport { Button, CircularProgress, Dialog, DialogContent, IconButton, Image, Stack, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype ShowModalEventDetail = {\n\tprompt?: string;\n\tentry_point: string;\n};\n\ntype InstallState = 'idle' | 'installing' | 'error';\n\ntype CreateWidgetModalProps = {\n\tprompt?: string;\n\tentryPoint: string;\n\tonClose: () => void;\n};\n\nconst CREATE_WIDGET_EVENT = 'elementor/editor/create-widget';\nconst PROMOTION_IMAGE_URL = 'https://assets.elementor.com/packages/v1/images/angie-promotion.svg';\nconst ANGIE_CTA_CLICKED_EVENT = 'angie_cta_clicked' as const;\nconst ANGIE_INSTALL_STARTED_EVENT = 'angie_install_started' as const;\n\nfunction CreateWidgetModal( { prompt, entryPoint, onClose }: CreateWidgetModalProps ) {\n\tconst [ installState, setInstallState ] = useState< InstallState >( 'idle' );\n\n\tconst handleClose = () => {\n\t\tif ( installState === 'installing' ) {\n\t\t\treturn;\n\t\t}\n\n\t\tonClose();\n\t};\n\n\tconst handleInstall = async () => {\n\t\tif ( ! prompt ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetInstallState( 'installing' );\n\n\t\ttrackEvent( {\n\t\t\teventName: ANGIE_INSTALL_STARTED_EVENT,\n\t\t\ttrigger_source: entryPoint,\n\t\t} );\n\n\t\tconst result = await installAngiePlugin();\n\n\t\tif ( ! result.success ) {\n\t\t\tsetInstallState( 'error' );\n\n\t\t\treturn;\n\t\t}\n\n\t\tredirectToAppAdmin( prompt );\n\t};\n\n\tconst handleFallbackInstall = () => {\n\t\tif ( ! prompt ) {\n\t\t\treturn;\n\t\t}\n\n\t\tredirectToInstallation( prompt );\n\t};\n\n\treturn (\n\t\t<ThemeProvider>\n\t\t\t<Dialog fullWidth maxWidth=\"md\" open onClose={ handleClose }>\n\t\t\t\t<IconButton\n\t\t\t\t\taria-label={ __( 'Close', 'elementor' ) }\n\t\t\t\t\tonClick={ handleClose }\n\t\t\t\t\tsx={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tright: 8,\n\t\t\t\t\t\ttop: 8,\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<XIcon />\n\t\t\t\t</IconButton>\n\t\t\t\t<DialogContent sx={ { p: 0, overflow: 'hidden' } }>\n\t\t\t\t\t<Stack direction=\"row\" sx={ { height: 400 } }>\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tsx={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\taspectRatio: '1 / 1',\n\t\t\t\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t\t\t\t\tobjectPosition: 'right center',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tsrc={ PROMOTION_IMAGE_URL }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Stack gap={ 2 } justifyContent=\"center\" p={ 4 }>\n\t\t\t\t\t\t\t<Typography variant=\"h6\" fontWeight={ 600 } whiteSpace=\"nowrap\">\n\t\t\t\t\t\t\t\t{ installState === 'error'\n\t\t\t\t\t\t\t\t\t? __( 'Installation failed', 'elementor' )\n\t\t\t\t\t\t\t\t\t: __( 'Install Angie to build custom widgets', 'elementor' ) }\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t<Typography variant=\"body2\" color=\"text.secondary\">\n\t\t\t\t\t\t\t\t{ installState === 'error'\n\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\"We couldn't install Angie automatically. Click below to install it manually.\",\n\t\t\t\t\t\t\t\t\t\t\t'elementor'\n\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t'Angie lets you generate custom widgets, sections, and code using simple instructions.',\n\t\t\t\t\t\t\t\t\t\t\t'elementor'\n\t\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t{ installState !== 'error' && (\n\t\t\t\t\t\t\t\t<Typography variant=\"body2\" color=\"text.secondary\">\n\t\t\t\t\t\t\t\t\t{ __( 'Install once to start building directly inside the editor.', 'elementor' ) }\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<Stack direction=\"row\" justifyContent=\"flex-end\" sx={ { mt: 2 } }>\n\t\t\t\t\t\t\t\t{ installState === 'error' ? (\n\t\t\t\t\t\t\t\t\t<Button variant=\"contained\" color=\"accent\" onClick={ handleFallbackInstall }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Install Manually', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\t\t\t\t\t\tcolor=\"accent\"\n\t\t\t\t\t\t\t\t\t\tonClick={ handleInstall }\n\t\t\t\t\t\t\t\t\t\tdisabled={ installState === 'installing' }\n\t\t\t\t\t\t\t\t\t\tstartIcon={\n\t\t\t\t\t\t\t\t\t\t\tinstallState === 'installing' ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<CircularProgress size={ 18 } color=\"inherit\" />\n\t\t\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ installState === 'installing'\n\t\t\t\t\t\t\t\t\t\t\t? __( 'Installing…', 'elementor' )\n\t\t\t\t\t\t\t\t\t\t\t: __( 'Install Angie', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</Stack>\n\t\t\t\t</DialogContent>\n\t\t\t</Dialog>\n\t\t</ThemeProvider>\n\t);\n}\n\nexport function CreateWidget() {\n\tconst [ modalData, setModalData ] = useState< ShowModalEventDetail | null >( null );\n\n\tuseEffect( () => {\n\t\tconst handleShow = ( event: Event ) => {\n\t\t\tconst customEvent = event as CustomEvent< ShowModalEventDetail >;\n\t\t\tconst hasAngieInstalled = isAngieAvailable();\n\n\t\t\ttrackEvent( {\n\t\t\t\teventName: ANGIE_CTA_CLICKED_EVENT,\n\t\t\t\tentry_point: customEvent.detail.entry_point,\n\t\t\t\thas_angie_installed: hasAngieInstalled,\n\t\t\t} );\n\n\t\t\tif ( hasAngieInstalled ) {\n\t\t\t\tsendPromptToAngie( customEvent.detail?.prompt );\n\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetModalData( customEvent.detail );\n\t\t};\n\n\t\twindow.addEventListener( CREATE_WIDGET_EVENT, handleShow );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( CREATE_WIDGET_EVENT, handleShow );\n\t\t};\n\t}, [] );\n\n\tif ( ! modalData ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<CreateWidgetModal\n\t\t\tprompt={ modalData.prompt }\n\t\t\tentryPoint={ modalData.entry_point }\n\t\t\tonClose={ () => setModalData( null ) }\n\t\t/>\n\t);\n}\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/create-widget.tsx"],"sourcesContent":["export { init } from './init';\n","import { injectIntoTop } from '@elementor/editor';\n\nimport { CreateWidget } from './components/create-widget';\n\nexport function init() {\n\tinjectIntoTop( {\n\t\tid: 'create-widget',\n\t\tcomponent: CreateWidget,\n\t} );\n}\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport {\n\tinstallAngiePlugin,\n\tisAngieAvailable,\n\tredirectToAppAdmin,\n\tredirectToInstallation,\n\tsaveAngieConsent,\n\tsendPromptToAngie,\n} from '@elementor/editor-mcp';\nimport { ThemeProvider } from '@elementor/editor-ui';\nimport { trackEvent } from '@elementor/events';\nimport { XIcon } from '@elementor/icons';\nimport {\n\tButton,\n\tCheckbox,\n\tCircularProgress,\n\tDialog,\n\tDialogContent,\n\tFormControlLabel,\n\tIconButton,\n\tImage,\n\tLink,\n\tStack,\n\tTypography,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype ShowModalEventDetail = {\n\tprompt?: string;\n\tentry_point: string;\n};\n\ntype InstallState = 'idle' | 'installing' | 'error';\n\ntype CreateWidgetModalProps = {\n\tprompt?: string;\n\tentryPoint: string;\n\tonClose: () => void;\n};\n\nconst CREATE_WIDGET_EVENT = 'elementor/editor/create-widget';\nconst ANGIE_MODAL_PROMOTION_IMAGE_URL = 'https://assets.elementor.com/packages/v1/images/angie-modal-promotion.png';\nconst ANGIE_CTA_CLICKED_EVENT = 'ai_widget_cta_clicked' as const;\nconst ANGIE_INSTALL_STARTED_EVENT = 'angie_install_started' as const;\nconst ANGIE_INSTALL_COMPLETED_EVENT = 'angie_install_completed' as const;\nconst ANGIE_INSTALL_ABANDONED_EVENT = 'angie_install_abandoned' as const;\n\nfunction CreateWidgetModal( { prompt, entryPoint, onClose }: CreateWidgetModalProps ) {\n\tconst [ installState, setInstallState ] = useState< InstallState >( 'idle' );\n\tconst [ agreedToTerms, setAgreedToTerms ] = useState( false );\n\n\tconst handleClose = () => {\n\t\tif ( installState === 'installing' ) {\n\t\t\treturn;\n\t\t}\n\n\t\ttrackEvent( {\n\t\t\teventName: ANGIE_INSTALL_ABANDONED_EVENT,\n\t\t\tabandon_step: installState === 'error' ? 'install_error' : 'install_modal',\n\t\t\ttrigger_source: entryPoint,\n\t\t} );\n\n\t\tonClose();\n\t};\n\n\tconst handleInstall = async () => {\n\t\tsetInstallState( 'installing' );\n\n\t\ttrackEvent( {\n\t\t\teventName: ANGIE_INSTALL_STARTED_EVENT,\n\t\t\ttrigger_source: entryPoint,\n\t\t} );\n\n\t\tconst [ result ] = await Promise.all( [ installAngiePlugin(), saveAngieConsent() ] );\n\n\t\tif ( ! result.success ) {\n\t\t\tsetInstallState( 'error' );\n\n\t\t\treturn;\n\t\t}\n\n\t\ttrackEvent( {\n\t\t\teventName: ANGIE_INSTALL_COMPLETED_EVENT,\n\t\t\ttrigger_source: entryPoint,\n\t\t} );\n\n\t\tredirectToAppAdmin( prompt );\n\t};\n\n\tconst handleFallbackInstall = () => {\n\t\tredirectToInstallation( prompt );\n\t};\n\n\treturn (\n\t\t<ThemeProvider>\n\t\t\t<Dialog fullWidth maxWidth=\"md\" open onClose={ handleClose }>\n\t\t\t\t<IconButton\n\t\t\t\t\taria-label={ __( 'Close', 'elementor' ) }\n\t\t\t\t\tonClick={ handleClose }\n\t\t\t\t\tsx={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tright: 8,\n\t\t\t\t\t\ttop: 8,\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<XIcon />\n\t\t\t\t</IconButton>\n\t\t\t\t<DialogContent sx={ { p: 0, overflow: 'hidden' } }>\n\t\t\t\t\t<Stack direction=\"row\" sx={ { height: 400 } }>\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tsx={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\taspectRatio: '1 / 1',\n\t\t\t\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t\t\t\t\tobjectPosition: 'right center',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tsrc={ ANGIE_MODAL_PROMOTION_IMAGE_URL }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Stack justifyContent=\"space-between\" p={ 4 }>\n\t\t\t\t\t\t\t<Stack gap={ 2.5 } justifyContent=\"center\" sx={ { flex: 1, paddingInlineEnd: 2.5 } }>\n\t\t\t\t\t\t\t\t<Typography variant=\"h4\" fontWeight={ 600 } color=\"text.secondary\">\n\t\t\t\t\t\t\t\t\t{ installState === 'error'\n\t\t\t\t\t\t\t\t\t\t? __( 'Installation failed', 'elementor' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Create custom widgets with Angie', 'elementor' ) }\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t\t<Typography variant=\"body2\">\n\t\t\t\t\t\t\t\t\t{ installState === 'error'\n\t\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\t\"We couldn't install Angie automatically. Click below to install it manually.\",\n\t\t\t\t\t\t\t\t\t\t\t\t'elementor'\n\t\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t'Build custom widgets, sections, and code using simple instructions. Install once to start building directly from the editor.',\n\t\t\t\t\t\t\t\t\t\t\t\t'elementor'\n\t\t\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t\t{ installState !== 'error' && (\n\t\t\t\t\t\t\t\t\t<FormControlLabel\n\t\t\t\t\t\t\t\t\t\tcontrol={\n\t\t\t\t\t\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\tchecked={ agreedToTerms }\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={ (\n\t\t\t\t\t\t\t\t\t\t\t\t\t_e: React.ChangeEvent< HTMLInputElement >,\n\t\t\t\t\t\t\t\t\t\t\t\t\tchecked: boolean\n\t\t\t\t\t\t\t\t\t\t\t\t) => setAgreedToTerms( checked ) }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\t<Typography variant=\"body2\" color=\"text.secondary\">\n\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'I agree to the', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\t\t\t\t\thref=\"https://elementor.com/terms/angie-terms-conditions/\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Terms', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t\t\t\t{ __( '&', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\t\t\t\t\thref=\"https://elementor.com/about/privacy/\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Privacy Policy.', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t<Stack direction=\"row\" justifyContent=\"flex-end\">\n\t\t\t\t\t\t\t\t{ installState === 'error' ? (\n\t\t\t\t\t\t\t\t\t<Button variant=\"contained\" color=\"accent\" onClick={ handleFallbackInstall }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Install Manually', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\t\t\t\t\t\tcolor=\"accent\"\n\t\t\t\t\t\t\t\t\t\tonClick={ handleInstall }\n\t\t\t\t\t\t\t\t\t\tdisabled={ installState === 'installing' || ! agreedToTerms }\n\t\t\t\t\t\t\t\t\t\tstartIcon={\n\t\t\t\t\t\t\t\t\t\t\tinstallState === 'installing' ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<CircularProgress size={ 18 } color=\"inherit\" />\n\t\t\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ installState === 'installing'\n\t\t\t\t\t\t\t\t\t\t\t? __( 'Installing…', 'elementor' )\n\t\t\t\t\t\t\t\t\t\t\t: __( 'Install & Activate', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</Stack>\n\t\t\t\t</DialogContent>\n\t\t\t</Dialog>\n\t\t</ThemeProvider>\n\t);\n}\n\nexport function CreateWidget() {\n\tconst [ modalData, setModalData ] = useState< ShowModalEventDetail | null >( null );\n\n\tuseEffect( () => {\n\t\tconst handleShow = ( event: Event ) => {\n\t\t\tconst customEvent = event as CustomEvent< ShowModalEventDetail >;\n\t\t\tconst hasAngieInstalled = isAngieAvailable();\n\n\t\t\ttrackEvent( {\n\t\t\t\teventName: ANGIE_CTA_CLICKED_EVENT,\n\t\t\t\tentry_point: customEvent.detail.entry_point,\n\t\t\t\thas_angie_installed: hasAngieInstalled,\n\t\t\t} );\n\n\t\t\tif ( hasAngieInstalled ) {\n\t\t\t\tsendPromptToAngie( customEvent.detail?.prompt );\n\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetModalData( customEvent.detail );\n\t\t};\n\n\t\twindow.addEventListener( CREATE_WIDGET_EVENT, handleShow );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( CREATE_WIDGET_EVENT, handleShow );\n\t\t};\n\t}, [] );\n\n\tif ( ! modalData ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<CreateWidgetModal\n\t\t\tprompt={ modalData.prompt }\n\t\t\tentryPoint={ modalData.entry_point }\n\t\t\tonClose={ () => setModalData( null ) }\n\t\t/>\n\t);\n}\n"],"mappings":"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","names":[]}
package/dist/index.mjs CHANGED
@@ -9,45 +9,64 @@ import {
9
9
  isAngieAvailable,
10
10
  redirectToAppAdmin,
11
11
  redirectToInstallation,
12
+ saveAngieConsent,
12
13
  sendPromptToAngie
13
14
  } from "@elementor/editor-mcp";
14
15
  import { ThemeProvider } from "@elementor/editor-ui";
15
16
  import { trackEvent } from "@elementor/events";
16
17
  import { XIcon } from "@elementor/icons";
17
- import { Button, CircularProgress, Dialog, DialogContent, IconButton, Image, Stack, Typography } from "@elementor/ui";
18
+ import {
19
+ Button,
20
+ Checkbox,
21
+ CircularProgress,
22
+ Dialog,
23
+ DialogContent,
24
+ FormControlLabel,
25
+ IconButton,
26
+ Image,
27
+ Link,
28
+ Stack,
29
+ Typography
30
+ } from "@elementor/ui";
18
31
  import { __ } from "@wordpress/i18n";
19
32
  var CREATE_WIDGET_EVENT = "elementor/editor/create-widget";
20
- var PROMOTION_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/angie-promotion.svg";
21
- var ANGIE_CTA_CLICKED_EVENT = "angie_cta_clicked";
33
+ var ANGIE_MODAL_PROMOTION_IMAGE_URL = "https://assets.elementor.com/packages/v1/images/angie-modal-promotion.png";
34
+ var ANGIE_CTA_CLICKED_EVENT = "ai_widget_cta_clicked";
22
35
  var ANGIE_INSTALL_STARTED_EVENT = "angie_install_started";
36
+ var ANGIE_INSTALL_COMPLETED_EVENT = "angie_install_completed";
37
+ var ANGIE_INSTALL_ABANDONED_EVENT = "angie_install_abandoned";
23
38
  function CreateWidgetModal({ prompt, entryPoint, onClose }) {
24
39
  const [installState, setInstallState] = useState("idle");
40
+ const [agreedToTerms, setAgreedToTerms] = useState(false);
25
41
  const handleClose = () => {
26
42
  if (installState === "installing") {
27
43
  return;
28
44
  }
45
+ trackEvent({
46
+ eventName: ANGIE_INSTALL_ABANDONED_EVENT,
47
+ abandon_step: installState === "error" ? "install_error" : "install_modal",
48
+ trigger_source: entryPoint
49
+ });
29
50
  onClose();
30
51
  };
31
52
  const handleInstall = async () => {
32
- if (!prompt) {
33
- return;
34
- }
35
53
  setInstallState("installing");
36
54
  trackEvent({
37
55
  eventName: ANGIE_INSTALL_STARTED_EVENT,
38
56
  trigger_source: entryPoint
39
57
  });
40
- const result = await installAngiePlugin();
58
+ const [result] = await Promise.all([installAngiePlugin(), saveAngieConsent()]);
41
59
  if (!result.success) {
42
60
  setInstallState("error");
43
61
  return;
44
62
  }
63
+ trackEvent({
64
+ eventName: ANGIE_INSTALL_COMPLETED_EVENT,
65
+ trigger_source: entryPoint
66
+ });
45
67
  redirectToAppAdmin(prompt);
46
68
  };
47
69
  const handleFallbackInstall = () => {
48
- if (!prompt) {
49
- return;
50
- }
51
70
  redirectToInstallation(prompt);
52
71
  };
53
72
  return /* @__PURE__ */ React.createElement(ThemeProvider, null, /* @__PURE__ */ React.createElement(Dialog, { fullWidth: true, maxWidth: "md", open: true, onClose: handleClose }, /* @__PURE__ */ React.createElement(
@@ -72,24 +91,53 @@ function CreateWidgetModal({ prompt, entryPoint, onClose }) {
72
91
  objectFit: "cover",
73
92
  objectPosition: "right center"
74
93
  },
75
- src: PROMOTION_IMAGE_URL
94
+ src: ANGIE_MODAL_PROMOTION_IMAGE_URL
76
95
  }
77
- ), /* @__PURE__ */ React.createElement(Stack, { gap: 2, justifyContent: "center", p: 4 }, /* @__PURE__ */ React.createElement(Typography, { variant: "h6", fontWeight: 600, whiteSpace: "nowrap" }, installState === "error" ? __("Installation failed", "elementor") : __("Install Angie to build custom widgets", "elementor")), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "text.secondary" }, installState === "error" ? __(
96
+ ), /* @__PURE__ */ React.createElement(Stack, { justifyContent: "space-between", p: 4 }, /* @__PURE__ */ React.createElement(Stack, { gap: 2.5, justifyContent: "center", sx: { flex: 1, paddingInlineEnd: 2.5 } }, /* @__PURE__ */ React.createElement(Typography, { variant: "h4", fontWeight: 600, color: "text.secondary" }, installState === "error" ? __("Installation failed", "elementor") : __("Create custom widgets with Angie", "elementor")), /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, installState === "error" ? __(
78
97
  "We couldn't install Angie automatically. Click below to install it manually.",
79
98
  "elementor"
80
99
  ) : __(
81
- "Angie lets you generate custom widgets, sections, and code using simple instructions.",
100
+ "Build custom widgets, sections, and code using simple instructions. Install once to start building directly from the editor.",
82
101
  "elementor"
83
- )), installState !== "error" && /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "text.secondary" }, __("Install once to start building directly inside the editor.", "elementor")), /* @__PURE__ */ React.createElement(Stack, { direction: "row", justifyContent: "flex-end", sx: { mt: 2 } }, installState === "error" ? /* @__PURE__ */ React.createElement(Button, { variant: "contained", color: "accent", onClick: handleFallbackInstall }, __("Install Manually", "elementor")) : /* @__PURE__ */ React.createElement(
102
+ )), installState !== "error" && /* @__PURE__ */ React.createElement(
103
+ FormControlLabel,
104
+ {
105
+ control: /* @__PURE__ */ React.createElement(
106
+ Checkbox,
107
+ {
108
+ size: "small",
109
+ checked: agreedToTerms,
110
+ onChange: (_e, checked) => setAgreedToTerms(checked)
111
+ }
112
+ ),
113
+ label: /* @__PURE__ */ React.createElement(Typography, { variant: "body2", color: "text.secondary" }, __("I agree to the", "elementor"), /* @__PURE__ */ React.createElement(
114
+ Link,
115
+ {
116
+ href: "https://elementor.com/terms/angie-terms-conditions/",
117
+ target: "_blank",
118
+ rel: "noopener noreferrer"
119
+ },
120
+ __("Terms", "elementor")
121
+ ), __("&", "elementor"), /* @__PURE__ */ React.createElement(
122
+ Link,
123
+ {
124
+ href: "https://elementor.com/about/privacy/",
125
+ target: "_blank",
126
+ rel: "noopener noreferrer"
127
+ },
128
+ __("Privacy Policy.", "elementor")
129
+ ))
130
+ }
131
+ )), /* @__PURE__ */ React.createElement(Stack, { direction: "row", justifyContent: "flex-end" }, installState === "error" ? /* @__PURE__ */ React.createElement(Button, { variant: "contained", color: "accent", onClick: handleFallbackInstall }, __("Install Manually", "elementor")) : /* @__PURE__ */ React.createElement(
84
132
  Button,
85
133
  {
86
134
  variant: "contained",
87
135
  color: "accent",
88
136
  onClick: handleInstall,
89
- disabled: installState === "installing",
137
+ disabled: installState === "installing" || !agreedToTerms,
90
138
  startIcon: installState === "installing" ? /* @__PURE__ */ React.createElement(CircularProgress, { size: 18, color: "inherit" }) : void 0
91
139
  },
92
- installState === "installing" ? __("Installing\u2026", "elementor") : __("Install Angie", "elementor")
140
+ installState === "installing" ? __("Installing\u2026", "elementor") : __("Install & Activate", "elementor")
93
141
  )))))));
94
142
  }
95
143
  function CreateWidget() {
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/init.ts","../src/components/create-widget.tsx"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\n\nimport { CreateWidget } from './components/create-widget';\n\nexport function init() {\n\tinjectIntoTop( {\n\t\tid: 'create-widget',\n\t\tcomponent: CreateWidget,\n\t} );\n}\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport {\n\tinstallAngiePlugin,\n\tisAngieAvailable,\n\tredirectToAppAdmin,\n\tredirectToInstallation,\n\tsendPromptToAngie,\n} from '@elementor/editor-mcp';\nimport { ThemeProvider } from '@elementor/editor-ui';\nimport { trackEvent } from '@elementor/events';\nimport { XIcon } from '@elementor/icons';\nimport { Button, CircularProgress, Dialog, DialogContent, IconButton, Image, Stack, Typography } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype ShowModalEventDetail = {\n\tprompt?: string;\n\tentry_point: string;\n};\n\ntype InstallState = 'idle' | 'installing' | 'error';\n\ntype CreateWidgetModalProps = {\n\tprompt?: string;\n\tentryPoint: string;\n\tonClose: () => void;\n};\n\nconst CREATE_WIDGET_EVENT = 'elementor/editor/create-widget';\nconst PROMOTION_IMAGE_URL = 'https://assets.elementor.com/packages/v1/images/angie-promotion.svg';\nconst ANGIE_CTA_CLICKED_EVENT = 'angie_cta_clicked' as const;\nconst ANGIE_INSTALL_STARTED_EVENT = 'angie_install_started' as const;\n\nfunction CreateWidgetModal( { prompt, entryPoint, onClose }: CreateWidgetModalProps ) {\n\tconst [ installState, setInstallState ] = useState< InstallState >( 'idle' );\n\n\tconst handleClose = () => {\n\t\tif ( installState === 'installing' ) {\n\t\t\treturn;\n\t\t}\n\n\t\tonClose();\n\t};\n\n\tconst handleInstall = async () => {\n\t\tif ( ! prompt ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetInstallState( 'installing' );\n\n\t\ttrackEvent( {\n\t\t\teventName: ANGIE_INSTALL_STARTED_EVENT,\n\t\t\ttrigger_source: entryPoint,\n\t\t} );\n\n\t\tconst result = await installAngiePlugin();\n\n\t\tif ( ! result.success ) {\n\t\t\tsetInstallState( 'error' );\n\n\t\t\treturn;\n\t\t}\n\n\t\tredirectToAppAdmin( prompt );\n\t};\n\n\tconst handleFallbackInstall = () => {\n\t\tif ( ! prompt ) {\n\t\t\treturn;\n\t\t}\n\n\t\tredirectToInstallation( prompt );\n\t};\n\n\treturn (\n\t\t<ThemeProvider>\n\t\t\t<Dialog fullWidth maxWidth=\"md\" open onClose={ handleClose }>\n\t\t\t\t<IconButton\n\t\t\t\t\taria-label={ __( 'Close', 'elementor' ) }\n\t\t\t\t\tonClick={ handleClose }\n\t\t\t\t\tsx={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tright: 8,\n\t\t\t\t\t\ttop: 8,\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<XIcon />\n\t\t\t\t</IconButton>\n\t\t\t\t<DialogContent sx={ { p: 0, overflow: 'hidden' } }>\n\t\t\t\t\t<Stack direction=\"row\" sx={ { height: 400 } }>\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tsx={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\taspectRatio: '1 / 1',\n\t\t\t\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t\t\t\t\tobjectPosition: 'right center',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tsrc={ PROMOTION_IMAGE_URL }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Stack gap={ 2 } justifyContent=\"center\" p={ 4 }>\n\t\t\t\t\t\t\t<Typography variant=\"h6\" fontWeight={ 600 } whiteSpace=\"nowrap\">\n\t\t\t\t\t\t\t\t{ installState === 'error'\n\t\t\t\t\t\t\t\t\t? __( 'Installation failed', 'elementor' )\n\t\t\t\t\t\t\t\t\t: __( 'Install Angie to build custom widgets', 'elementor' ) }\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t<Typography variant=\"body2\" color=\"text.secondary\">\n\t\t\t\t\t\t\t\t{ installState === 'error'\n\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\"We couldn't install Angie automatically. Click below to install it manually.\",\n\t\t\t\t\t\t\t\t\t\t\t'elementor'\n\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t'Angie lets you generate custom widgets, sections, and code using simple instructions.',\n\t\t\t\t\t\t\t\t\t\t\t'elementor'\n\t\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t{ installState !== 'error' && (\n\t\t\t\t\t\t\t\t<Typography variant=\"body2\" color=\"text.secondary\">\n\t\t\t\t\t\t\t\t\t{ __( 'Install once to start building directly inside the editor.', 'elementor' ) }\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t<Stack direction=\"row\" justifyContent=\"flex-end\" sx={ { mt: 2 } }>\n\t\t\t\t\t\t\t\t{ installState === 'error' ? (\n\t\t\t\t\t\t\t\t\t<Button variant=\"contained\" color=\"accent\" onClick={ handleFallbackInstall }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Install Manually', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\t\t\t\t\t\tcolor=\"accent\"\n\t\t\t\t\t\t\t\t\t\tonClick={ handleInstall }\n\t\t\t\t\t\t\t\t\t\tdisabled={ installState === 'installing' }\n\t\t\t\t\t\t\t\t\t\tstartIcon={\n\t\t\t\t\t\t\t\t\t\t\tinstallState === 'installing' ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<CircularProgress size={ 18 } color=\"inherit\" />\n\t\t\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ installState === 'installing'\n\t\t\t\t\t\t\t\t\t\t\t? __( 'Installing…', 'elementor' )\n\t\t\t\t\t\t\t\t\t\t\t: __( 'Install Angie', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</Stack>\n\t\t\t\t</DialogContent>\n\t\t\t</Dialog>\n\t\t</ThemeProvider>\n\t);\n}\n\nexport function CreateWidget() {\n\tconst [ modalData, setModalData ] = useState< ShowModalEventDetail | null >( null );\n\n\tuseEffect( () => {\n\t\tconst handleShow = ( event: Event ) => {\n\t\t\tconst customEvent = event as CustomEvent< ShowModalEventDetail >;\n\t\t\tconst hasAngieInstalled = isAngieAvailable();\n\n\t\t\ttrackEvent( {\n\t\t\t\teventName: ANGIE_CTA_CLICKED_EVENT,\n\t\t\t\tentry_point: customEvent.detail.entry_point,\n\t\t\t\thas_angie_installed: hasAngieInstalled,\n\t\t\t} );\n\n\t\t\tif ( hasAngieInstalled ) {\n\t\t\t\tsendPromptToAngie( customEvent.detail?.prompt );\n\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetModalData( customEvent.detail );\n\t\t};\n\n\t\twindow.addEventListener( CREATE_WIDGET_EVENT, handleShow );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( CREATE_WIDGET_EVENT, handleShow );\n\t\t};\n\t}, [] );\n\n\tif ( ! modalData ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<CreateWidgetModal\n\t\t\tprompt={ modalData.prompt }\n\t\t\tentryPoint={ modalData.entry_point }\n\t\t\tonClose={ () => setModalData( null ) }\n\t\t/>\n\t);\n}\n"],"mappings":";AAAA,SAAS,qBAAqB;;;ACA9B,YAAY,WAAW;AACvB,SAAS,WAAW,gBAAgB;AACpC;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,qBAAqB;AAC9B,SAAS,kBAAkB;AAC3B,SAAS,aAAa;AACtB,SAAS,QAAQ,kBAAkB,QAAQ,eAAe,YAAY,OAAO,OAAO,kBAAkB;AACtG,SAAS,UAAU;AAenB,IAAM,sBAAsB;AAC5B,IAAM,sBAAsB;AAC5B,IAAM,0BAA0B;AAChC,IAAM,8BAA8B;AAEpC,SAAS,kBAAmB,EAAE,QAAQ,YAAY,QAAQ,GAA4B;AACrF,QAAM,CAAE,cAAc,eAAgB,IAAI,SAA0B,MAAO;AAE3E,QAAM,cAAc,MAAM;AACzB,QAAK,iBAAiB,cAAe;AACpC;AAAA,IACD;AAEA,YAAQ;AAAA,EACT;AAEA,QAAM,gBAAgB,YAAY;AACjC,QAAK,CAAE,QAAS;AACf;AAAA,IACD;AAEA,oBAAiB,YAAa;AAE9B,eAAY;AAAA,MACX,WAAW;AAAA,MACX,gBAAgB;AAAA,IACjB,CAAE;AAEF,UAAM,SAAS,MAAM,mBAAmB;AAExC,QAAK,CAAE,OAAO,SAAU;AACvB,sBAAiB,OAAQ;AAEzB;AAAA,IACD;AAEA,uBAAoB,MAAO;AAAA,EAC5B;AAEA,QAAM,wBAAwB,MAAM;AACnC,QAAK,CAAE,QAAS;AACf;AAAA,IACD;AAEA,2BAAwB,MAAO;AAAA,EAChC;AAEA,SACC,oCAAC,qBACA,oCAAC,UAAO,WAAS,MAAC,UAAS,MAAK,MAAI,MAAC,SAAU,eAC9C;AAAA,IAAC;AAAA;AAAA,MACA,cAAa,GAAI,SAAS,WAAY;AAAA,MACtC,SAAU;AAAA,MACV,IAAK;AAAA,QACJ,UAAU;AAAA,QACV,OAAO;AAAA,QACP,KAAK;AAAA,QACL,QAAQ;AAAA,MACT;AAAA;AAAA,IAEA,oCAAC,WAAM;AAAA,EACR,GACA,oCAAC,iBAAc,IAAK,EAAE,GAAG,GAAG,UAAU,SAAS,KAC9C,oCAAC,SAAM,WAAU,OAAM,IAAK,EAAE,QAAQ,IAAI,KACzC;AAAA,IAAC;AAAA;AAAA,MACA,IAAK;AAAA,QACJ,QAAQ;AAAA,QACR,aAAa;AAAA,QACb,WAAW;AAAA,QACX,gBAAgB;AAAA,MACjB;AAAA,MACA,KAAM;AAAA;AAAA,EACP,GACA,oCAAC,SAAM,KAAM,GAAI,gBAAe,UAAS,GAAI,KAC5C,oCAAC,cAAW,SAAQ,MAAK,YAAa,KAAM,YAAW,YACpD,iBAAiB,UAChB,GAAI,uBAAuB,WAAY,IACvC,GAAI,yCAAyC,WAAY,CAC7D,GACA,oCAAC,cAAW,SAAQ,SAAQ,OAAM,oBAC/B,iBAAiB,UAChB;AAAA,IACA;AAAA,IACA;AAAA,EACA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA,CACJ,GACE,iBAAiB,WAClB,oCAAC,cAAW,SAAQ,SAAQ,OAAM,oBAC/B,GAAI,8DAA8D,WAAY,CACjF,GAED,oCAAC,SAAM,WAAU,OAAM,gBAAe,YAAW,IAAK,EAAE,IAAI,EAAE,KAC3D,iBAAiB,UAClB,oCAAC,UAAO,SAAQ,aAAY,OAAM,UAAS,SAAU,yBAClD,GAAI,oBAAoB,WAAY,CACvC,IAEA;AAAA,IAAC;AAAA;AAAA,MACA,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,SAAU;AAAA,MACV,UAAW,iBAAiB;AAAA,MAC5B,WACC,iBAAiB,eAChB,oCAAC,oBAAiB,MAAO,IAAK,OAAM,WAAU,IAC3C;AAAA;AAAA,IAGH,iBAAiB,eAChB,GAAI,oBAAe,WAAY,IAC/B,GAAI,iBAAiB,WAAY;AAAA,EACrC,CAEF,CACD,CACD,CACD,CACD,CACD;AAEF;AAEO,SAAS,eAAe;AAC9B,QAAM,CAAE,WAAW,YAAa,IAAI,SAAyC,IAAK;AAElF,YAAW,MAAM;AAChB,UAAM,aAAa,CAAE,UAAkB;AACtC,YAAM,cAAc;AACpB,YAAM,oBAAoB,iBAAiB;AAE3C,iBAAY;AAAA,QACX,WAAW;AAAA,QACX,aAAa,YAAY,OAAO;AAAA,QAChC,qBAAqB;AAAA,MACtB,CAAE;AAEF,UAAK,mBAAoB;AACxB,0BAAmB,YAAY,QAAQ,MAAO;AAE9C;AAAA,MACD;AAEA,mBAAc,YAAY,MAAO;AAAA,IAClC;AAEA,WAAO,iBAAkB,qBAAqB,UAAW;AAEzD,WAAO,MAAM;AACZ,aAAO,oBAAqB,qBAAqB,UAAW;AAAA,IAC7D;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,MAAK,CAAE,WAAY;AAClB,WAAO;AAAA,EACR;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,QAAS,UAAU;AAAA,MACnB,YAAa,UAAU;AAAA,MACvB,SAAU,MAAM,aAAc,IAAK;AAAA;AAAA,EACpC;AAEF;;;AD/LO,SAAS,OAAO;AACtB,gBAAe;AAAA,IACd,IAAI;AAAA,IACJ,WAAW;AAAA,EACZ,CAAE;AACH;","names":[]}
1
+ {"version":3,"sources":["../src/init.ts","../src/components/create-widget.tsx"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\n\nimport { CreateWidget } from './components/create-widget';\n\nexport function init() {\n\tinjectIntoTop( {\n\t\tid: 'create-widget',\n\t\tcomponent: CreateWidget,\n\t} );\n}\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport {\n\tinstallAngiePlugin,\n\tisAngieAvailable,\n\tredirectToAppAdmin,\n\tredirectToInstallation,\n\tsaveAngieConsent,\n\tsendPromptToAngie,\n} from '@elementor/editor-mcp';\nimport { ThemeProvider } from '@elementor/editor-ui';\nimport { trackEvent } from '@elementor/events';\nimport { XIcon } from '@elementor/icons';\nimport {\n\tButton,\n\tCheckbox,\n\tCircularProgress,\n\tDialog,\n\tDialogContent,\n\tFormControlLabel,\n\tIconButton,\n\tImage,\n\tLink,\n\tStack,\n\tTypography,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype ShowModalEventDetail = {\n\tprompt?: string;\n\tentry_point: string;\n};\n\ntype InstallState = 'idle' | 'installing' | 'error';\n\ntype CreateWidgetModalProps = {\n\tprompt?: string;\n\tentryPoint: string;\n\tonClose: () => void;\n};\n\nconst CREATE_WIDGET_EVENT = 'elementor/editor/create-widget';\nconst ANGIE_MODAL_PROMOTION_IMAGE_URL = 'https://assets.elementor.com/packages/v1/images/angie-modal-promotion.png';\nconst ANGIE_CTA_CLICKED_EVENT = 'ai_widget_cta_clicked' as const;\nconst ANGIE_INSTALL_STARTED_EVENT = 'angie_install_started' as const;\nconst ANGIE_INSTALL_COMPLETED_EVENT = 'angie_install_completed' as const;\nconst ANGIE_INSTALL_ABANDONED_EVENT = 'angie_install_abandoned' as const;\n\nfunction CreateWidgetModal( { prompt, entryPoint, onClose }: CreateWidgetModalProps ) {\n\tconst [ installState, setInstallState ] = useState< InstallState >( 'idle' );\n\tconst [ agreedToTerms, setAgreedToTerms ] = useState( false );\n\n\tconst handleClose = () => {\n\t\tif ( installState === 'installing' ) {\n\t\t\treturn;\n\t\t}\n\n\t\ttrackEvent( {\n\t\t\teventName: ANGIE_INSTALL_ABANDONED_EVENT,\n\t\t\tabandon_step: installState === 'error' ? 'install_error' : 'install_modal',\n\t\t\ttrigger_source: entryPoint,\n\t\t} );\n\n\t\tonClose();\n\t};\n\n\tconst handleInstall = async () => {\n\t\tsetInstallState( 'installing' );\n\n\t\ttrackEvent( {\n\t\t\teventName: ANGIE_INSTALL_STARTED_EVENT,\n\t\t\ttrigger_source: entryPoint,\n\t\t} );\n\n\t\tconst [ result ] = await Promise.all( [ installAngiePlugin(), saveAngieConsent() ] );\n\n\t\tif ( ! result.success ) {\n\t\t\tsetInstallState( 'error' );\n\n\t\t\treturn;\n\t\t}\n\n\t\ttrackEvent( {\n\t\t\teventName: ANGIE_INSTALL_COMPLETED_EVENT,\n\t\t\ttrigger_source: entryPoint,\n\t\t} );\n\n\t\tredirectToAppAdmin( prompt );\n\t};\n\n\tconst handleFallbackInstall = () => {\n\t\tredirectToInstallation( prompt );\n\t};\n\n\treturn (\n\t\t<ThemeProvider>\n\t\t\t<Dialog fullWidth maxWidth=\"md\" open onClose={ handleClose }>\n\t\t\t\t<IconButton\n\t\t\t\t\taria-label={ __( 'Close', 'elementor' ) }\n\t\t\t\t\tonClick={ handleClose }\n\t\t\t\t\tsx={ {\n\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\tright: 8,\n\t\t\t\t\t\ttop: 8,\n\t\t\t\t\t\tzIndex: 1,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<XIcon />\n\t\t\t\t</IconButton>\n\t\t\t\t<DialogContent sx={ { p: 0, overflow: 'hidden' } }>\n\t\t\t\t\t<Stack direction=\"row\" sx={ { height: 400 } }>\n\t\t\t\t\t\t<Image\n\t\t\t\t\t\t\tsx={ {\n\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\taspectRatio: '1 / 1',\n\t\t\t\t\t\t\t\tobjectFit: 'cover',\n\t\t\t\t\t\t\t\tobjectPosition: 'right center',\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\tsrc={ ANGIE_MODAL_PROMOTION_IMAGE_URL }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<Stack justifyContent=\"space-between\" p={ 4 }>\n\t\t\t\t\t\t\t<Stack gap={ 2.5 } justifyContent=\"center\" sx={ { flex: 1, paddingInlineEnd: 2.5 } }>\n\t\t\t\t\t\t\t\t<Typography variant=\"h4\" fontWeight={ 600 } color=\"text.secondary\">\n\t\t\t\t\t\t\t\t\t{ installState === 'error'\n\t\t\t\t\t\t\t\t\t\t? __( 'Installation failed', 'elementor' )\n\t\t\t\t\t\t\t\t\t\t: __( 'Create custom widgets with Angie', 'elementor' ) }\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t\t<Typography variant=\"body2\">\n\t\t\t\t\t\t\t\t\t{ installState === 'error'\n\t\t\t\t\t\t\t\t\t\t? __(\n\t\t\t\t\t\t\t\t\t\t\t\t\"We couldn't install Angie automatically. Click below to install it manually.\",\n\t\t\t\t\t\t\t\t\t\t\t\t'elementor'\n\t\t\t\t\t\t\t\t\t\t )\n\t\t\t\t\t\t\t\t\t\t: __(\n\t\t\t\t\t\t\t\t\t\t\t\t'Build custom widgets, sections, and code using simple instructions. Install once to start building directly from the editor.',\n\t\t\t\t\t\t\t\t\t\t\t\t'elementor'\n\t\t\t\t\t\t\t\t\t\t ) }\n\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t\t{ installState !== 'error' && (\n\t\t\t\t\t\t\t\t\t<FormControlLabel\n\t\t\t\t\t\t\t\t\t\tcontrol={\n\t\t\t\t\t\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\t\t\tchecked={ agreedToTerms }\n\t\t\t\t\t\t\t\t\t\t\t\tonChange={ (\n\t\t\t\t\t\t\t\t\t\t\t\t\t_e: React.ChangeEvent< HTMLInputElement >,\n\t\t\t\t\t\t\t\t\t\t\t\t\tchecked: boolean\n\t\t\t\t\t\t\t\t\t\t\t\t) => setAgreedToTerms( checked ) }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\t<Typography variant=\"body2\" color=\"text.secondary\">\n\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'I agree to the', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\t\t\t\t\thref=\"https://elementor.com/terms/angie-terms-conditions/\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Terms', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t\t\t\t{ __( '&', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t<Link\n\t\t\t\t\t\t\t\t\t\t\t\t\thref=\"https://elementor.com/about/privacy/\"\n\t\t\t\t\t\t\t\t\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\t\t\t\t\t\t\t\t\trel=\"noopener noreferrer\"\n\t\t\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t{ __( 'Privacy Policy.', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t\t\t\t</Typography>\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t\t<Stack direction=\"row\" justifyContent=\"flex-end\">\n\t\t\t\t\t\t\t\t{ installState === 'error' ? (\n\t\t\t\t\t\t\t\t\t<Button variant=\"contained\" color=\"accent\" onClick={ handleFallbackInstall }>\n\t\t\t\t\t\t\t\t\t\t{ __( 'Install Manually', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\t\t\t\t\t\tcolor=\"accent\"\n\t\t\t\t\t\t\t\t\t\tonClick={ handleInstall }\n\t\t\t\t\t\t\t\t\t\tdisabled={ installState === 'installing' || ! agreedToTerms }\n\t\t\t\t\t\t\t\t\t\tstartIcon={\n\t\t\t\t\t\t\t\t\t\t\tinstallState === 'installing' ? (\n\t\t\t\t\t\t\t\t\t\t\t\t<CircularProgress size={ 18 } color=\"inherit\" />\n\t\t\t\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{ installState === 'installing'\n\t\t\t\t\t\t\t\t\t\t\t? __( 'Installing…', 'elementor' )\n\t\t\t\t\t\t\t\t\t\t\t: __( 'Install & Activate', 'elementor' ) }\n\t\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</Stack>\n\t\t\t\t\t\t</Stack>\n\t\t\t\t\t</Stack>\n\t\t\t\t</DialogContent>\n\t\t\t</Dialog>\n\t\t</ThemeProvider>\n\t);\n}\n\nexport function CreateWidget() {\n\tconst [ modalData, setModalData ] = useState< ShowModalEventDetail | null >( null );\n\n\tuseEffect( () => {\n\t\tconst handleShow = ( event: Event ) => {\n\t\t\tconst customEvent = event as CustomEvent< ShowModalEventDetail >;\n\t\t\tconst hasAngieInstalled = isAngieAvailable();\n\n\t\t\ttrackEvent( {\n\t\t\t\teventName: ANGIE_CTA_CLICKED_EVENT,\n\t\t\t\tentry_point: customEvent.detail.entry_point,\n\t\t\t\thas_angie_installed: hasAngieInstalled,\n\t\t\t} );\n\n\t\t\tif ( hasAngieInstalled ) {\n\t\t\t\tsendPromptToAngie( customEvent.detail?.prompt );\n\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetModalData( customEvent.detail );\n\t\t};\n\n\t\twindow.addEventListener( CREATE_WIDGET_EVENT, handleShow );\n\n\t\treturn () => {\n\t\t\twindow.removeEventListener( CREATE_WIDGET_EVENT, handleShow );\n\t\t};\n\t}, [] );\n\n\tif ( ! modalData ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<CreateWidgetModal\n\t\t\tprompt={ modalData.prompt }\n\t\t\tentryPoint={ modalData.entry_point }\n\t\t\tonClose={ () => setModalData( null ) }\n\t\t/>\n\t);\n}\n"],"mappings":"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","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@elementor/editor-widget-creation",
3
- "version": "4.1.0-837",
3
+ "version": "4.1.0-beta1",
4
4
  "private": false,
5
5
  "author": "Elementor Team",
6
6
  "homepage": "https://elementor.com/",
@@ -39,10 +39,10 @@
39
39
  "dev": "tsup --config=../../tsup.dev.ts"
40
40
  },
41
41
  "dependencies": {
42
- "@elementor/editor": "4.1.0-837",
43
- "@elementor/editor-mcp": "4.1.0-837",
44
- "@elementor/editor-ui": "4.1.0-837",
45
- "@elementor/events": "4.1.0-837",
42
+ "@elementor/editor": "4.1.0-beta1",
43
+ "@elementor/editor-mcp": "4.1.0-beta1",
44
+ "@elementor/editor-ui": "4.1.0-beta1",
45
+ "@elementor/events": "4.1.0-beta1",
46
46
  "@elementor/icons": "~1.75.1",
47
47
  "@elementor/ui": "1.37.5",
48
48
  "@wordpress/i18n": "^5.13.0"
package/src/components/create-widget.tsx CHANGED
@@ -5,12 +5,25 @@ import {
5
5
  isAngieAvailable,
6
6
  redirectToAppAdmin,
7
7
  redirectToInstallation,
8
+ saveAngieConsent,
8
9
  sendPromptToAngie,
9
10
  } from '@elementor/editor-mcp';
10
11
  import { ThemeProvider } from '@elementor/editor-ui';
11
12
  import { trackEvent } from '@elementor/events';
12
13
  import { XIcon } from '@elementor/icons';
13
- import { Button, CircularProgress, Dialog, DialogContent, IconButton, Image, Stack, Typography } from '@elementor/ui';
14
+ import {
15
+ Button,
16
+ Checkbox,
17
+ CircularProgress,
18
+ Dialog,
19
+ DialogContent,
20
+ FormControlLabel,
21
+ IconButton,
22
+ Image,
23
+ Link,
24
+ Stack,
25
+ Typography,
26
+ } from '@elementor/ui';
14
27
  import { __ } from '@wordpress/i18n';
15
28
 
16
29
  type ShowModalEventDetail = {
@@ -27,26 +40,31 @@ type CreateWidgetModalProps = {
27
40
  };
28
41
 
29
42
  const CREATE_WIDGET_EVENT = 'elementor/editor/create-widget';
30
- const PROMOTION_IMAGE_URL = 'https://assets.elementor.com/packages/v1/images/angie-promotion.svg';
31
- const ANGIE_CTA_CLICKED_EVENT = 'angie_cta_clicked' as const;
43
+ const ANGIE_MODAL_PROMOTION_IMAGE_URL = 'https://assets.elementor.com/packages/v1/images/angie-modal-promotion.png';
44
+ const ANGIE_CTA_CLICKED_EVENT = 'ai_widget_cta_clicked' as const;
32
45
  const ANGIE_INSTALL_STARTED_EVENT = 'angie_install_started' as const;
46
+ const ANGIE_INSTALL_COMPLETED_EVENT = 'angie_install_completed' as const;
47
+ const ANGIE_INSTALL_ABANDONED_EVENT = 'angie_install_abandoned' as const;
33
48
 
34
49
  function CreateWidgetModal( { prompt, entryPoint, onClose }: CreateWidgetModalProps ) {
35
50
  const [ installState, setInstallState ] = useState< InstallState >( 'idle' );
51
+ const [ agreedToTerms, setAgreedToTerms ] = useState( false );
36
52
 
37
53
  const handleClose = () => {
38
54
  if ( installState === 'installing' ) {
39
55
  return;
40
56
  }
41
57
 
58
+ trackEvent( {
59
+ eventName: ANGIE_INSTALL_ABANDONED_EVENT,
60
+ abandon_step: installState === 'error' ? 'install_error' : 'install_modal',
61
+ trigger_source: entryPoint,
62
+ } );
63
+
42
64
  onClose();
43
65
  };
44
66
 
45
67
  const handleInstall = async () => {
46
- if ( ! prompt ) {
47
- return;
48
- }
49
-
50
68
  setInstallState( 'installing' );
51
69
 
52
70
  trackEvent( {
@@ -54,7 +72,7 @@ function CreateWidgetModal( { prompt, entryPoint, onClose }: CreateWidgetModalPr
54
72
  trigger_source: entryPoint,
55
73
  } );
56
74
 
57
- const result = await installAngiePlugin();
75
+ const [ result ] = await Promise.all( [ installAngiePlugin(), saveAngieConsent() ] );
58
76
 
59
77
  if ( ! result.success ) {
60
78
  setInstallState( 'error' );
@@ -62,14 +80,15 @@ function CreateWidgetModal( { prompt, entryPoint, onClose }: CreateWidgetModalPr
62
80
  return;
63
81
  }
64
82
 
83
+ trackEvent( {
84
+ eventName: ANGIE_INSTALL_COMPLETED_EVENT,
85
+ trigger_source: entryPoint,
86
+ } );
87
+
65
88
  redirectToAppAdmin( prompt );
66
89
  };
67
90
 
68
91
  const handleFallbackInstall = () => {
69
- if ( ! prompt ) {
70
- return;
71
- }
72
-
73
92
  redirectToInstallation( prompt );
74
93
  };
75
94
 
@@ -97,31 +116,62 @@ function CreateWidgetModal( { prompt, entryPoint, onClose }: CreateWidgetModalPr
97
116
  objectFit: 'cover',
98
117
  objectPosition: 'right center',
99
118
  } }
100
- src={ PROMOTION_IMAGE_URL }
119
+ src={ ANGIE_MODAL_PROMOTION_IMAGE_URL }
101
120
  />
102
- <Stack gap={ 2 } justifyContent="center" p={ 4 }>
103
- <Typography variant="h6" fontWeight={ 600 } whiteSpace="nowrap">
104
- { installState === 'error'
105
- ? __( 'Installation failed', 'elementor' )
106
- : __( 'Install Angie to build custom widgets', 'elementor' ) }
107
- </Typography>
108
- <Typography variant="body2" color="text.secondary">
109
- { installState === 'error'
110
- ? __(
111
- "We couldn't install Angie automatically. Click below to install it manually.",
112
- 'elementor'
113
- )
114
- : __(
115
- 'Angie lets you generate custom widgets, sections, and code using simple instructions.',
116
- 'elementor'
117
- ) }
118
- </Typography>
119
- { installState !== 'error' && (
120
- <Typography variant="body2" color="text.secondary">
121
- { __( 'Install once to start building directly inside the editor.', 'elementor' ) }
121
+ <Stack justifyContent="space-between" p={ 4 }>
122
+ <Stack gap={ 2.5 } justifyContent="center" sx={ { flex: 1, paddingInlineEnd: 2.5 } }>
123
+ <Typography variant="h4" fontWeight={ 600 } color="text.secondary">
124
+ { installState === 'error'
125
+ ? __( 'Installation failed', 'elementor' )
126
+ : __( 'Create custom widgets with Angie', 'elementor' ) }
122
127
  </Typography>
123
- ) }
124
- <Stack direction="row" justifyContent="flex-end" sx={ { mt: 2 } }>
128
+ <Typography variant="body2">
129
+ { installState === 'error'
130
+ ? __(
131
+ "We couldn't install Angie automatically. Click below to install it manually.",
132
+ 'elementor'
133
+ )
134
+ : __(
135
+ 'Build custom widgets, sections, and code using simple instructions. Install once to start building directly from the editor.',
136
+ 'elementor'
137
+ ) }
138
+ </Typography>
139
+ { installState !== 'error' && (
140
+ <FormControlLabel
141
+ control={
142
+ <Checkbox
143
+ size="small"
144
+ checked={ agreedToTerms }
145
+ onChange={ (
146
+ _e: React.ChangeEvent< HTMLInputElement >,
147
+ checked: boolean
148
+ ) => setAgreedToTerms( checked ) }
149
+ />
150
+ }
151
+ label={
152
+ <Typography variant="body2" color="text.secondary">
153
+ { __( 'I agree to the', 'elementor' ) }
154
+ <Link
155
+ href="https://elementor.com/terms/angie-terms-conditions/"
156
+ target="_blank"
157
+ rel="noopener noreferrer"
158
+ >
159
+ { __( 'Terms', 'elementor' ) }
160
+ </Link>
161
+ { __( '&', 'elementor' ) }
162
+ <Link
163
+ href="https://elementor.com/about/privacy/"
164
+ target="_blank"
165
+ rel="noopener noreferrer"
166
+ >
167
+ { __( 'Privacy Policy.', 'elementor' ) }
168
+ </Link>
169
+ </Typography>
170
+ }
171
+ />
172
+ ) }
173
+ </Stack>
174
+ <Stack direction="row" justifyContent="flex-end">
125
175
  { installState === 'error' ? (
126
176
  <Button variant="contained" color="accent" onClick={ handleFallbackInstall }>
127
177
  { __( 'Install Manually', 'elementor' ) }
@@ -131,7 +181,7 @@ function CreateWidgetModal( { prompt, entryPoint, onClose }: CreateWidgetModalPr
131
181
  variant="contained"
132
182
  color="accent"
133
183
  onClick={ handleInstall }
134
- disabled={ installState === 'installing' }
184
+ disabled={ installState === 'installing' || ! agreedToTerms }
135
185
  startIcon={
136
186
  installState === 'installing' ? (
137
187
  <CircularProgress size={ 18 } color="inherit" />
@@ -140,7 +190,7 @@ function CreateWidgetModal( { prompt, entryPoint, onClose }: CreateWidgetModalPr
140
190
  >
141
191
  { installState === 'installing'
142
192
  ? __( 'Installing…', 'elementor' )
143
- : __( 'Install Angie', 'elementor' ) }
193
+ : __( 'Install & Activate', 'elementor' ) }
144
194
  </Button>
145
195
  ) }
146
196
  </Stack>