@elementor/editor-widget-creation 4.2.0-854 → 4.2.0-856

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 +40 -10
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +54 -11
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +5 -5
  6. package/src/components/create-widget.tsx +75 -30
package/dist/index.js CHANGED
@@ -47,13 +47,14 @@ 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 AI_WIDGET_CTA_CLICKED_EVENT = "ai_widget_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
53
  var ANGIE_INSTALL_COMPLETED_EVENT = "angie_install_completed";
54
54
  var ANGIE_INSTALL_ABANDONED_EVENT = "angie_install_abandoned";
55
55
  function CreateWidgetModal({ prompt, entryPoint, onClose }) {
56
56
  const [installState, setInstallState] = (0, import_react.useState)("idle");
57
+ const [agreedToTerms, setAgreedToTerms] = (0, import_react.useState)(false);
57
58
  const handleClose = () => {
58
59
  if (installState === "installing") {
59
60
  return;
@@ -71,7 +72,7 @@ function CreateWidgetModal({ prompt, entryPoint, onClose }) {
71
72
  eventName: ANGIE_INSTALL_STARTED_EVENT,
72
73
  trigger_source: entryPoint
73
74
  });
74
- const result = await (0, import_editor_mcp.installAngiePlugin)();
75
+ const [result] = await Promise.all([(0, import_editor_mcp.installAngiePlugin)(), (0, import_editor_mcp.saveAngieConsent)()]);
75
76
  if (!result.success) {
76
77
  setInstallState("error");
77
78
  return;
@@ -107,24 +108,53 @@ function CreateWidgetModal({ prompt, entryPoint, onClose }) {
107
108
  objectFit: "cover",
108
109
  objectPosition: "right center"
109
110
  },
110
- src: PROMOTION_IMAGE_URL
111
+ src: ANGIE_MODAL_PROMOTION_IMAGE_URL
111
112
  }
112
- ), /* @__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.__)(
113
114
  "We couldn't install Angie automatically. Click below to install it manually.",
114
115
  "elementor"
115
116
  ) : (0, import_i18n.__)(
116
- "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.",
117
118
  "elementor"
118
- )), 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(
119
149
  import_ui.Button,
120
150
  {
121
151
  variant: "contained",
122
152
  color: "accent",
123
153
  onClick: handleInstall,
124
- disabled: installState === "installing",
154
+ disabled: installState === "installing" || !agreedToTerms,
125
155
  startIcon: installState === "installing" ? /* @__PURE__ */ React.createElement(import_ui.CircularProgress, { size: 18, color: "inherit" }) : void 0
126
156
  },
127
- 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")
128
158
  )))))));
129
159
  }
130
160
  function CreateWidget() {
@@ -134,7 +164,7 @@ function CreateWidget() {
134
164
  const customEvent = event;
135
165
  const hasAngieInstalled = (0, import_editor_mcp.isAngieAvailable)();
136
166
  (0, import_events.trackEvent)({
137
- eventName: AI_WIDGET_CTA_CLICKED_EVENT,
167
+ eventName: ANGIE_CTA_CLICKED_EVENT,
138
168
  entry_point: customEvent.detail.entry_point,
139
169
  has_angie_installed: hasAngieInstalled
140
170
  });
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 AI_WIDGET_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\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 installAngiePlugin();\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={ 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: AI_WIDGET_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,21 +9,35 @@ 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 AI_WIDGET_CTA_CLICKED_EVENT = "ai_widget_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";
23
36
  var ANGIE_INSTALL_COMPLETED_EVENT = "angie_install_completed";
24
37
  var ANGIE_INSTALL_ABANDONED_EVENT = "angie_install_abandoned";
25
38
  function CreateWidgetModal({ prompt, entryPoint, onClose }) {
26
39
  const [installState, setInstallState] = useState("idle");
40
+ const [agreedToTerms, setAgreedToTerms] = useState(false);
27
41
  const handleClose = () => {
28
42
  if (installState === "installing") {
29
43
  return;
@@ -41,7 +55,7 @@ function CreateWidgetModal({ prompt, entryPoint, onClose }) {
41
55
  eventName: ANGIE_INSTALL_STARTED_EVENT,
42
56
  trigger_source: entryPoint
43
57
  });
44
- const result = await installAngiePlugin();
58
+ const [result] = await Promise.all([installAngiePlugin(), saveAngieConsent()]);
45
59
  if (!result.success) {
46
60
  setInstallState("error");
47
61
  return;
@@ -77,24 +91,53 @@ function CreateWidgetModal({ prompt, entryPoint, onClose }) {
77
91
  objectFit: "cover",
78
92
  objectPosition: "right center"
79
93
  },
80
- src: PROMOTION_IMAGE_URL
94
+ src: ANGIE_MODAL_PROMOTION_IMAGE_URL
81
95
  }
82
- ), /* @__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" ? __(
83
97
  "We couldn't install Angie automatically. Click below to install it manually.",
84
98
  "elementor"
85
99
  ) : __(
86
- "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.",
87
101
  "elementor"
88
- )), 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(
89
132
  Button,
90
133
  {
91
134
  variant: "contained",
92
135
  color: "accent",
93
136
  onClick: handleInstall,
94
- disabled: installState === "installing",
137
+ disabled: installState === "installing" || !agreedToTerms,
95
138
  startIcon: installState === "installing" ? /* @__PURE__ */ React.createElement(CircularProgress, { size: 18, color: "inherit" }) : void 0
96
139
  },
97
- installState === "installing" ? __("Installing\u2026", "elementor") : __("Install Angie", "elementor")
140
+ installState === "installing" ? __("Installing\u2026", "elementor") : __("Install & Activate", "elementor")
98
141
  )))))));
99
142
  }
100
143
  function CreateWidget() {
@@ -104,7 +147,7 @@ function CreateWidget() {
104
147
  const customEvent = event;
105
148
  const hasAngieInstalled = isAngieAvailable();
106
149
  trackEvent({
107
- eventName: AI_WIDGET_CTA_CLICKED_EVENT,
150
+ eventName: ANGIE_CTA_CLICKED_EVENT,
108
151
  entry_point: customEvent.detail.entry_point,
109
152
  has_angie_installed: hasAngieInstalled
110
153
  });
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 AI_WIDGET_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\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 installAngiePlugin();\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={ 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: AI_WIDGET_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/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.2.0-854",
3
+ "version": "4.2.0-856",
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.2.0-854",
43
- "@elementor/editor-mcp": "4.2.0-854",
44
- "@elementor/editor-ui": "4.2.0-854",
45
- "@elementor/events": "4.2.0-854",
42
+ "@elementor/editor": "4.2.0-856",
43
+ "@elementor/editor-mcp": "4.2.0-856",
44
+ "@elementor/editor-ui": "4.2.0-856",
45
+ "@elementor/events": "4.2.0-856",
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,14 +40,15 @@ 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 AI_WIDGET_CTA_CLICKED_EVENT = 'ai_widget_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;
33
46
  const ANGIE_INSTALL_COMPLETED_EVENT = 'angie_install_completed' as const;
34
47
  const ANGIE_INSTALL_ABANDONED_EVENT = 'angie_install_abandoned' as const;
35
48
 
36
49
  function CreateWidgetModal( { prompt, entryPoint, onClose }: CreateWidgetModalProps ) {
37
50
  const [ installState, setInstallState ] = useState< InstallState >( 'idle' );
51
+ const [ agreedToTerms, setAgreedToTerms ] = useState( false );
38
52
 
39
53
  const handleClose = () => {
40
54
  if ( installState === 'installing' ) {
@@ -58,7 +72,7 @@ function CreateWidgetModal( { prompt, entryPoint, onClose }: CreateWidgetModalPr
58
72
  trigger_source: entryPoint,
59
73
  } );
60
74
 
61
- const result = await installAngiePlugin();
75
+ const [ result ] = await Promise.all( [ installAngiePlugin(), saveAngieConsent() ] );
62
76
 
63
77
  if ( ! result.success ) {
64
78
  setInstallState( 'error' );
@@ -102,31 +116,62 @@ function CreateWidgetModal( { prompt, entryPoint, onClose }: CreateWidgetModalPr
102
116
  objectFit: 'cover',
103
117
  objectPosition: 'right center',
104
118
  } }
105
- src={ PROMOTION_IMAGE_URL }
119
+ src={ ANGIE_MODAL_PROMOTION_IMAGE_URL }
106
120
  />
107
- <Stack gap={ 2 } justifyContent="center" p={ 4 }>
108
- <Typography variant="h6" fontWeight={ 600 } whiteSpace="nowrap">
109
- { installState === 'error'
110
- ? __( 'Installation failed', 'elementor' )
111
- : __( 'Install Angie to build custom widgets', 'elementor' ) }
112
- </Typography>
113
- <Typography variant="body2" color="text.secondary">
114
- { installState === 'error'
115
- ? __(
116
- "We couldn't install Angie automatically. Click below to install it manually.",
117
- 'elementor'
118
- )
119
- : __(
120
- 'Angie lets you generate custom widgets, sections, and code using simple instructions.',
121
- 'elementor'
122
- ) }
123
- </Typography>
124
- { installState !== 'error' && (
125
- <Typography variant="body2" color="text.secondary">
126
- { __( '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' ) }
127
+ </Typography>
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
+ ) }
127
138
  </Typography>
128
- ) }
129
- <Stack direction="row" justifyContent="flex-end" sx={ { mt: 2 } }>
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">
130
175
  { installState === 'error' ? (
131
176
  <Button variant="contained" color="accent" onClick={ handleFallbackInstall }>
132
177
  { __( 'Install Manually', 'elementor' ) }
@@ -136,7 +181,7 @@ function CreateWidgetModal( { prompt, entryPoint, onClose }: CreateWidgetModalPr
136
181
  variant="contained"
137
182
  color="accent"
138
183
  onClick={ handleInstall }
139
- disabled={ installState === 'installing' }
184
+ disabled={ installState === 'installing' || ! agreedToTerms }
140
185
  startIcon={
141
186
  installState === 'installing' ? (
142
187
  <CircularProgress size={ 18 } color="inherit" />
@@ -145,7 +190,7 @@ function CreateWidgetModal( { prompt, entryPoint, onClose }: CreateWidgetModalPr
145
190
  >
146
191
  { installState === 'installing'
147
192
  ? __( 'Installing…', 'elementor' )
148
- : __( 'Install Angie', 'elementor' ) }
193
+ : __( 'Install & Activate', 'elementor' ) }
149
194
  </Button>
150
195
  ) }
151
196
  </Stack>
@@ -166,7 +211,7 @@ export function CreateWidget() {
166
211
  const hasAngieInstalled = isAngieAvailable();
167
212
 
168
213
  trackEvent( {
169
- eventName: AI_WIDGET_CTA_CLICKED_EVENT,
214
+ eventName: ANGIE_CTA_CLICKED_EVENT,
170
215
  entry_point: customEvent.detail.entry_point,
171
216
  has_angie_installed: hasAngieInstalled,
172
217
  } );