@elementor/editor-notifications 4.0.0-manual → 4.0.0

package/dist/index.d.mts

@@ -3,6 +3,12 @@ import { ButtonProps } from '@elementor/ui';
 
 declare function init(): void;
 
+declare module 'notistack' {
+    interface VariantOverrides {
+        promotion: true;
+        info: true;
+    }
+}
 type NotificationData = {
     type: VariantType;
     message: string | React.ReactNode;

package/dist/index.d.ts

@@ -3,6 +3,12 @@ import { ButtonProps } from '@elementor/ui';
 
 declare function init(): void;
 
+declare module 'notistack' {
+    interface VariantOverrides {
+        promotion: true;
+        info: true;
+    }
+}
 type NotificationData = {
     type: VariantType;
     message: string | React.ReactNode;

package/dist/index.js

@@ -44,6 +44,7 @@ var import_store4 = require("@elementor/store");
 var React2 = __toESM(require("react"));
 var import_react2 = require("react");
 var import_notistack2 = require("notistack");
+var import_icons = require("@elementor/icons");
 var import_store3 = require("@elementor/store");
 var import_ui2 = require("@elementor/ui");
 
@@ -80,28 +81,29 @@ var { notifyAction, clearAction } = notificationsSlice.actions;
 
 // src/hooks/use-enqueue-notifications.tsx
 var AUTO_HIDE_DURATION = 8e3;
+function createDefaultAction(notification, onDismiss) {
+  return /* @__PURE__ */ React.createElement(import_react.Fragment, { key: notification.id }, notification.additionalActionProps?.map((additionalAction, index) => /* @__PURE__ */ React.createElement(import_ui.Button, { key: `${index}`, ...additionalAction })), /* @__PURE__ */ React.createElement(import_ui.CloseButton, { "aria-label": "close", color: "inherit", onClick: onDismiss }));
+}
+function createPromotionAction(notification) {
+  return /* @__PURE__ */ React.createElement(import_react.Fragment, { key: notification.id }, notification.additionalActionProps?.map((additionalAction, index) => /* @__PURE__ */ React.createElement(import_ui.Button, { key: `${index}`, ...additionalAction })));
+}
 var useEnqueueNotification = (notifications) => {
   const { enqueueSnackbar } = (0, import_notistack.useSnackbar)();
   const dispatch = (0, import_store2.__useDispatch)();
   (0, import_react.useEffect)(() => {
     Object.values(notifications).forEach((notification) => {
-      const Action = () => /* @__PURE__ */ React.createElement(import_react.Fragment, { key: notification.id }, notification.additionalActionProps?.map((additionalAction, index) => /* @__PURE__ */ React.createElement(import_ui.Button, { key: `${index}`, ...additionalAction })), /* @__PURE__ */ React.createElement(
-        import_ui.CloseButton,
-        {
-          "aria-label": "close",
-          color: "inherit",
-          onClick: () => {
-            (0, import_notistack.closeSnackbar)(notification.id);
-            dispatch(clearAction({ id: notification.id }));
-          }
-        }
-      ));
+      const dismiss = () => {
+        (0, import_notistack.closeSnackbar)(notification.id);
+        dispatch(clearAction({ id: notification.id }));
+      };
+      const useAlertAction = ["promotion", "info"].includes(notification.type);
+      const action = useAlertAction ? createPromotionAction(notification) : createDefaultAction(notification, dismiss);
       enqueueSnackbar(notification.message, {
         variant: notification.type,
         key: notification.id,
         onClose: () => dispatch(clearAction({ id: notification.id })),
         preventDuplicate: true,
-        action: /* @__PURE__ */ React.createElement(Action, null),
+        action,
         autoHideDuration: notification.autoHideDuration ?? AUTO_HIDE_DURATION
       });
     });
@@ -130,8 +132,33 @@ var DefaultCustomSnackbar = (0, import_react2.forwardRef)((props, ref) => {
     }
   ));
 });
+var AlertSnackbar = (0, import_react2.forwardRef)(({ color, icon, ...props }, ref) => {
+  const panelWidth = getEditingPanelWidth();
+  return /* @__PURE__ */ React2.createElement(import_ui2.ThemeProvider, { colorScheme: "light", palette: "unstable" }, /* @__PURE__ */ React2.createElement(
+    import_ui2.Alert,
+    {
+      ref,
+      variant: "standard",
+      color,
+      icon,
+      role: "alert",
+      action: props.action,
+      onClose: () => (0, import_notistack2.closeSnackbar)(props.id),
+      sx: {
+        ml: panelWidth + "px",
+        "& .MuiAlert-message": { display: "flex", flexWrap: "nowrap", alignItems: "center" },
+        "& .MuiAlert-content": { whiteSpace: "nowrap" }
+      }
+    },
+    props.message
+  ));
+});
+var PromotionSnackbar = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ React2.createElement(AlertSnackbar, { ref, color: "promotion", icon: /* @__PURE__ */ React2.createElement(import_icons.CrownFilledIcon, null), ...props }));
+var InfoSnackbar = (0, import_react2.forwardRef)((props, ref) => /* @__PURE__ */ React2.createElement(AlertSnackbar, { ref, color: "info", icon: /* @__PURE__ */ React2.createElement(import_icons.InfoCircleFilledIcon, null), ...props }));
 var muiToEuiMapper = {
-  default: DefaultCustomSnackbar
+  default: DefaultCustomSnackbar,
+  promotion: PromotionSnackbar,
+  info: InfoSnackbar
 };
 var Handler = () => {
   const notifications = (0, import_store3.__useSelector)((state) => state.notifications);

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/notifications.tsx","../src/hooks/use-enqueue-notifications.tsx","../src/slice.ts","../src/sync/get-editing-panel-width.ts"],"sourcesContent":["export { init } from './init';\n\nexport { type NotificationData } from './types';\nexport { NotifyReact, notify } from './components/notifications';\n","import { injectIntoTop } from '@elementor/editor';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport Wrapper from './components/notifications';\nimport { notificationsSlice } from './slice';\n\nexport function init() {\n\tregisterSlice( notificationsSlice );\n\tinjectIntoTop( {\n\t\tid: 'notifications',\n\t\tcomponent: Wrapper,\n\t} );\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { SnackbarProvider } from 'notistack';\nimport { __getStore as getStore, __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';\nimport { SnackbarContent, type SnackbarProps, ThemeProvider } from '@elementor/ui';\n\nimport { useEnqueueNotification } from '../hooks/use-enqueue-notifications';\nimport { notifyAction } from '../slice';\nimport { getEditingPanelWidth } from '../sync/get-editing-panel-width';\nimport { type NotificationData, type Notifications } from '../types';\n\n// 8 seconds\nconst AUTO_HIDE_DURATION = 8000;\n\nconst DefaultCustomSnackbar = forwardRef( ( props: SnackbarProps, ref ) => {\n\tconst filteredProps = getFilteredSnackbarProps( props );\n\tconst panelWidth = getEditingPanelWidth();\n\n\treturn (\n\t\t<ThemeProvider palette=\"unstable\">\n\t\t\t<SnackbarContent\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...filteredProps }\n\t\t\t\tsx={ {\n\t\t\t\t\t'&.MuiPaper-root': { minWidth: 'max-content' },\n\t\t\t\t\tml: panelWidth + 'px',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</ThemeProvider>\n\t);\n} );\n\nconst muiToEuiMapper = {\n\tdefault: DefaultCustomSnackbar,\n};\n\nconst Handler = () => {\n\tconst notifications = useSelector( ( state: { notifications: Notifications } ) => state.notifications );\n\n\tuseEnqueueNotification( notifications );\n\n\treturn null;\n};\n\nconst Wrapper = () => {\n\treturn (\n\t\t<SnackbarProvider\n\t\t\tmaxSnack={ 3 }\n\t\t\tautoHideDuration={ AUTO_HIDE_DURATION }\n\t\t\tanchorOrigin={ { horizontal: 'center', vertical: 'bottom' } }\n\t\t\tComponents={ muiToEuiMapper }\n\t\t>\n\t\t\t<Handler />\n\t\t</SnackbarProvider>\n\t);\n};\n\n/*\n * This function can be used to trigger notifications from anywhere in the code.\n * even if you're running in a JS environment as opposed to a React environment.\n */\nexport function notify( notification: NotificationData ) {\n\tconst store = getStore();\n\n\tstore?.dispatch( notifyAction( notification ) );\n}\n\n/*\n * This function can be used to trigger notifications from within a React component.\n * This is the preferred way to trigger notifications.\n */\nexport function NotifyReact( notification: NotificationData ) {\n\tconst dispatch = useDispatch();\n\tdispatch( notifyAction( notification ) );\n}\n\nfunction getFilteredSnackbarProps( props: SnackbarProps ) {\n\tconst forbiddenProps = [ 'autoHideDuration', 'persist', 'hideIconVariant', 'iconVariant', 'anchorOrigin' ];\n\n\treturn Object.entries( props ).reduce(\n\t\t( filteredProps, [ key, value ] ) => {\n\t\t\tif ( ! forbiddenProps.includes( key ) ) {\n\t\t\t\tfilteredProps[ key ] = value;\n\t\t\t}\n\n\t\t\treturn filteredProps;\n\t\t},\n\t\t{} as Record< string, unknown >\n\t);\n}\n\nexport default Wrapper;\n","import { Fragment, useEffect } from 'react';\nimport * as React from 'react';\nimport { closeSnackbar, useSnackbar, type VariantType } from 'notistack';\nimport { __useDispatch as useDispatch } from '@elementor/store';\nimport { Button, CloseButton } from '@elementor/ui';\n\nimport { clearAction } from '../slice';\nimport type { Notifications } from '../types';\n\nconst AUTO_HIDE_DURATION = 8000;\n\nexport const useEnqueueNotification = ( notifications: Notifications ) => {\n\tconst { enqueueSnackbar } = useSnackbar();\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tObject.values( notifications ).forEach( ( notification ) => {\n\t\t\tconst Action = () => (\n\t\t\t\t<Fragment key={ notification.id }>\n\t\t\t\t\t{ notification.additionalActionProps?.map( ( additionalAction, index ) => (\n\t\t\t\t\t\t<Button key={ `${ index }` } { ...additionalAction } />\n\t\t\t\t\t) ) }\n\n\t\t\t\t\t<CloseButton\n\t\t\t\t\t\taria-label=\"close\"\n\t\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tcloseSnackbar( notification.id );\n\t\t\t\t\t\t\tdispatch( clearAction( { id: notification.id } ) );\n\t\t\t\t\t\t} }\n\t\t\t\t\t></CloseButton>\n\t\t\t\t</Fragment>\n\t\t\t);\n\n\t\t\tenqueueSnackbar( notification.message, {\n\t\t\t\tvariant: notification.type as VariantType,\n\t\t\t\tkey: notification.id,\n\t\t\t\tonClose: () => dispatch( clearAction( { id: notification.id } ) ),\n\t\t\t\tpreventDuplicate: true,\n\t\t\t\taction: <Action />,\n\t\t\t\tautoHideDuration: notification.autoHideDuration ?? AUTO_HIDE_DURATION,\n\t\t\t} );\n\t\t} );\n\t}, [ notifications, enqueueSnackbar, dispatch ] );\n};\n","import { __createSlice as createSlice } from '@elementor/store';\n\nimport { type Notifications } from './types';\n\nexport const notificationsSlice = createSlice( {\n\tname: 'notifications',\n\tinitialState: {} as Notifications,\n\treducers: {\n\t\tnotifyAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( ! newState[ action.payload.id ] ) {\n\t\t\t\tnewState[ action.payload.id ] = action.payload;\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t\tclearAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( newState[ action.payload.id ] ) {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-dynamic-delete\n\t\t\t\tdelete newState[ action.payload.id ];\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t},\n} );\n\nexport const { notifyAction, clearAction } = notificationsSlice.actions;\n","export function getEditingPanelWidth() {\n\treturn document.querySelector( '.elementor-panel' )?.clientWidth || 0;\n}\n"],"mappings":"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","names":["import_store","React","import_react","import_notistack","import_store","import_ui","import_store","createSlice","useDispatch","AUTO_HIDE_DURATION","useSelector","getStore","useDispatch","registerSlice"]}
+{"version":3,"sources":["../src/index.ts","../src/init.ts","../src/components/notifications.tsx","../src/hooks/use-enqueue-notifications.tsx","../src/slice.ts","../src/sync/get-editing-panel-width.ts"],"sourcesContent":["export { init } from './init';\n\nexport { type NotificationData } from './types';\nexport { NotifyReact, notify } from './components/notifications';\n","import { injectIntoTop } from '@elementor/editor';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport Wrapper from './components/notifications';\nimport { notificationsSlice } from './slice';\n\nexport function init() {\n\tregisterSlice( notificationsSlice );\n\tinjectIntoTop( {\n\t\tid: 'notifications',\n\t\tcomponent: Wrapper,\n\t} );\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { closeSnackbar, type CustomContentProps, SnackbarProvider } from 'notistack';\nimport { CrownFilledIcon, InfoCircleFilledIcon } from '@elementor/icons';\nimport { __getStore as getStore, __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';\nimport { Alert, SnackbarContent, type SnackbarProps, ThemeProvider } from '@elementor/ui';\n\nimport { useEnqueueNotification } from '../hooks/use-enqueue-notifications';\nimport { notifyAction } from '../slice';\nimport { getEditingPanelWidth } from '../sync/get-editing-panel-width';\nimport { type NotificationData, type Notifications } from '../types';\n\n// 8 seconds\nconst AUTO_HIDE_DURATION = 8000;\n\nconst DefaultCustomSnackbar = forwardRef( ( props: SnackbarProps, ref ) => {\n\tconst filteredProps = getFilteredSnackbarProps( props );\n\tconst panelWidth = getEditingPanelWidth();\n\n\treturn (\n\t\t<ThemeProvider palette=\"unstable\">\n\t\t\t<SnackbarContent\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...filteredProps }\n\t\t\t\tsx={ {\n\t\t\t\t\t'&.MuiPaper-root': { minWidth: 'max-content' },\n\t\t\t\t\tml: panelWidth + 'px',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</ThemeProvider>\n\t);\n} );\n\ninterface AlertSnackbarProps extends CustomContentProps {\n\tcolor: 'promotion' | 'info';\n\ticon: React.ReactElement;\n}\n\nconst AlertSnackbar = forwardRef< HTMLDivElement, AlertSnackbarProps >( ( { color, icon, ...props }, ref ) => {\n\tconst panelWidth = getEditingPanelWidth();\n\n\treturn (\n\t\t<ThemeProvider colorScheme=\"light\" palette=\"unstable\">\n\t\t\t<Alert\n\t\t\t\tref={ ref }\n\t\t\t\tvariant=\"standard\"\n\t\t\t\tcolor={ color }\n\t\t\t\ticon={ icon }\n\t\t\t\trole=\"alert\"\n\t\t\t\taction={ props.action }\n\t\t\t\tonClose={ () => closeSnackbar( props.id ) }\n\t\t\t\tsx={ {\n\t\t\t\t\tml: panelWidth + 'px',\n\t\t\t\t\t'& .MuiAlert-message': { display: 'flex', flexWrap: 'nowrap', alignItems: 'center' },\n\t\t\t\t\t'& .MuiAlert-content': { whiteSpace: 'nowrap' },\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ props.message }\n\t\t\t</Alert>\n\t\t</ThemeProvider>\n\t);\n} );\n\nconst PromotionSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (\n\t<AlertSnackbar ref={ ref } color=\"promotion\" icon={ <CrownFilledIcon /> } { ...props } />\n) );\n\nconst InfoSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (\n\t<AlertSnackbar ref={ ref } color=\"info\" icon={ <InfoCircleFilledIcon /> } { ...props } />\n) );\n\nconst muiToEuiMapper = {\n\tdefault: DefaultCustomSnackbar,\n\tpromotion: PromotionSnackbar,\n\tinfo: InfoSnackbar,\n};\n\nconst Handler = () => {\n\tconst notifications = useSelector( ( state: { notifications: Notifications } ) => state.notifications );\n\n\tuseEnqueueNotification( notifications );\n\n\treturn null;\n};\n\nconst Wrapper = () => {\n\treturn (\n\t\t<SnackbarProvider\n\t\t\tmaxSnack={ 3 }\n\t\t\tautoHideDuration={ AUTO_HIDE_DURATION }\n\t\t\tanchorOrigin={ { horizontal: 'center', vertical: 'bottom' } }\n\t\t\tComponents={ muiToEuiMapper }\n\t\t>\n\t\t\t<Handler />\n\t\t</SnackbarProvider>\n\t);\n};\n\n/*\n * This function can be used to trigger notifications from anywhere in the code.\n * even if you're running in a JS environment as opposed to a React environment.\n */\nexport function notify( notification: NotificationData ) {\n\tconst store = getStore();\n\n\tstore?.dispatch( notifyAction( notification ) );\n}\n\n/*\n * This function can be used to trigger notifications from within a React component.\n * This is the preferred way to trigger notifications.\n */\nexport function NotifyReact( notification: NotificationData ) {\n\tconst dispatch = useDispatch();\n\tdispatch( notifyAction( notification ) );\n}\n\nfunction getFilteredSnackbarProps( props: SnackbarProps ) {\n\tconst forbiddenProps = [ 'autoHideDuration', 'persist', 'hideIconVariant', 'iconVariant', 'anchorOrigin' ];\n\n\treturn Object.entries( props ).reduce(\n\t\t( filteredProps, [ key, value ] ) => {\n\t\t\tif ( ! forbiddenProps.includes( key ) ) {\n\t\t\t\tfilteredProps[ key ] = value;\n\t\t\t}\n\n\t\t\treturn filteredProps;\n\t\t},\n\t\t{} as Record< string, unknown >\n\t);\n}\n\nexport default Wrapper;\n","import { Fragment, useEffect } from 'react';\nimport * as React from 'react';\nimport { closeSnackbar, useSnackbar, type VariantType } from 'notistack';\nimport { __useDispatch as useDispatch } from '@elementor/store';\nimport { Button, CloseButton } from '@elementor/ui';\n\nimport { clearAction } from '../slice';\nimport type { NotificationData, Notifications } from '../types';\n\nconst AUTO_HIDE_DURATION = 8000;\n\nfunction createDefaultAction( notification: NotificationData, onDismiss: () => void ) {\n\treturn (\n\t\t<Fragment key={ notification.id }>\n\t\t\t{ notification.additionalActionProps?.map( ( additionalAction, index ) => (\n\t\t\t\t<Button key={ `${ index }` } { ...additionalAction } />\n\t\t\t) ) }\n\n\t\t\t<CloseButton aria-label=\"close\" color=\"inherit\" onClick={ onDismiss } />\n\t\t</Fragment>\n\t);\n}\n\nfunction createPromotionAction( notification: NotificationData ) {\n\treturn (\n\t\t<Fragment key={ notification.id }>\n\t\t\t{ notification.additionalActionProps?.map( ( additionalAction, index ) => (\n\t\t\t\t<Button key={ `${ index }` } { ...additionalAction } />\n\t\t\t) ) }\n\t\t</Fragment>\n\t);\n}\n\nexport const useEnqueueNotification = ( notifications: Notifications ) => {\n\tconst { enqueueSnackbar } = useSnackbar();\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tObject.values( notifications ).forEach( ( notification ) => {\n\t\t\tconst dismiss = () => {\n\t\t\t\tcloseSnackbar( notification.id );\n\t\t\t\tdispatch( clearAction( { id: notification.id } ) );\n\t\t\t};\n\n\t\t\tconst useAlertAction = [ 'promotion', 'info' ].includes( notification.type );\n\n\t\t\tconst action = useAlertAction\n\t\t\t\t? createPromotionAction( notification )\n\t\t\t\t: createDefaultAction( notification, dismiss );\n\n\t\t\tenqueueSnackbar( notification.message, {\n\t\t\t\tvariant: notification.type as VariantType,\n\t\t\t\tkey: notification.id,\n\t\t\t\tonClose: () => dispatch( clearAction( { id: notification.id } ) ),\n\t\t\t\tpreventDuplicate: true,\n\t\t\t\taction,\n\t\t\t\tautoHideDuration: notification.autoHideDuration ?? AUTO_HIDE_DURATION,\n\t\t\t} );\n\t\t} );\n\t}, [ notifications, enqueueSnackbar, dispatch ] );\n};\n","import { __createSlice as createSlice } from '@elementor/store';\n\nimport { type Notifications } from './types';\n\nexport const notificationsSlice = createSlice( {\n\tname: 'notifications',\n\tinitialState: {} as Notifications,\n\treducers: {\n\t\tnotifyAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( ! newState[ action.payload.id ] ) {\n\t\t\t\tnewState[ action.payload.id ] = action.payload;\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t\tclearAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( newState[ action.payload.id ] ) {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-dynamic-delete\n\t\t\t\tdelete newState[ action.payload.id ];\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t},\n} );\n\nexport const { notifyAction, clearAction } = notificationsSlice.actions;\n","export function getEditingPanelWidth() {\n\treturn document.querySelector( '.elementor-panel' )?.clientWidth || 0;\n}\n"],"mappings":"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","names":["import_store","React","import_react","import_notistack","import_store","import_ui","import_store","createSlice","useDispatch","AUTO_HIDE_DURATION","useSelector","getStore","useDispatch","registerSlice"]}

package/dist/index.mjs

@@ -5,9 +5,10 @@ import { __registerSlice as registerSlice } from "@elementor/store";
 // src/components/notifications.tsx
 import * as React2 from "react";
 import { forwardRef } from "react";
-import { SnackbarProvider } from "notistack";
+import { closeSnackbar as closeSnackbar2, SnackbarProvider } from "notistack";
+import { CrownFilledIcon, InfoCircleFilledIcon } from "@elementor/icons";
 import { __getStore as getStore, __useDispatch as useDispatch2, __useSelector as useSelector } from "@elementor/store";
-import { SnackbarContent, ThemeProvider } from "@elementor/ui";
+import { Alert, SnackbarContent, ThemeProvider } from "@elementor/ui";
 
 // src/hooks/use-enqueue-notifications.tsx
 import { Fragment, useEffect } from "react";
@@ -42,28 +43,29 @@ var { notifyAction, clearAction } = notificationsSlice.actions;
 
 // src/hooks/use-enqueue-notifications.tsx
 var AUTO_HIDE_DURATION = 8e3;
+function createDefaultAction(notification, onDismiss) {
+  return /* @__PURE__ */ React.createElement(Fragment, { key: notification.id }, notification.additionalActionProps?.map((additionalAction, index) => /* @__PURE__ */ React.createElement(Button, { key: `${index}`, ...additionalAction })), /* @__PURE__ */ React.createElement(CloseButton, { "aria-label": "close", color: "inherit", onClick: onDismiss }));
+}
+function createPromotionAction(notification) {
+  return /* @__PURE__ */ React.createElement(Fragment, { key: notification.id }, notification.additionalActionProps?.map((additionalAction, index) => /* @__PURE__ */ React.createElement(Button, { key: `${index}`, ...additionalAction })));
+}
 var useEnqueueNotification = (notifications) => {
   const { enqueueSnackbar } = useSnackbar();
   const dispatch = useDispatch();
   useEffect(() => {
     Object.values(notifications).forEach((notification) => {
-      const Action = () => /* @__PURE__ */ React.createElement(Fragment, { key: notification.id }, notification.additionalActionProps?.map((additionalAction, index) => /* @__PURE__ */ React.createElement(Button, { key: `${index}`, ...additionalAction })), /* @__PURE__ */ React.createElement(
-        CloseButton,
-        {
-          "aria-label": "close",
-          color: "inherit",
-          onClick: () => {
-            closeSnackbar(notification.id);
-            dispatch(clearAction({ id: notification.id }));
-          }
-        }
-      ));
+      const dismiss = () => {
+        closeSnackbar(notification.id);
+        dispatch(clearAction({ id: notification.id }));
+      };
+      const useAlertAction = ["promotion", "info"].includes(notification.type);
+      const action = useAlertAction ? createPromotionAction(notification) : createDefaultAction(notification, dismiss);
       enqueueSnackbar(notification.message, {
         variant: notification.type,
         key: notification.id,
         onClose: () => dispatch(clearAction({ id: notification.id })),
         preventDuplicate: true,
-        action: /* @__PURE__ */ React.createElement(Action, null),
+        action,
         autoHideDuration: notification.autoHideDuration ?? AUTO_HIDE_DURATION
       });
     });
@@ -92,8 +94,33 @@ var DefaultCustomSnackbar = forwardRef((props, ref) => {
     }
   ));
 });
+var AlertSnackbar = forwardRef(({ color, icon, ...props }, ref) => {
+  const panelWidth = getEditingPanelWidth();
+  return /* @__PURE__ */ React2.createElement(ThemeProvider, { colorScheme: "light", palette: "unstable" }, /* @__PURE__ */ React2.createElement(
+    Alert,
+    {
+      ref,
+      variant: "standard",
+      color,
+      icon,
+      role: "alert",
+      action: props.action,
+      onClose: () => closeSnackbar2(props.id),
+      sx: {
+        ml: panelWidth + "px",
+        "& .MuiAlert-message": { display: "flex", flexWrap: "nowrap", alignItems: "center" },
+        "& .MuiAlert-content": { whiteSpace: "nowrap" }
+      }
+    },
+    props.message
+  ));
+});
+var PromotionSnackbar = forwardRef((props, ref) => /* @__PURE__ */ React2.createElement(AlertSnackbar, { ref, color: "promotion", icon: /* @__PURE__ */ React2.createElement(CrownFilledIcon, null), ...props }));
+var InfoSnackbar = forwardRef((props, ref) => /* @__PURE__ */ React2.createElement(AlertSnackbar, { ref, color: "info", icon: /* @__PURE__ */ React2.createElement(InfoCircleFilledIcon, null), ...props }));
 var muiToEuiMapper = {
-  default: DefaultCustomSnackbar
+  default: DefaultCustomSnackbar,
+  promotion: PromotionSnackbar,
+  info: InfoSnackbar
 };
 var Handler = () => {
   const notifications = useSelector((state) => state.notifications);

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/init.ts","../src/components/notifications.tsx","../src/hooks/use-enqueue-notifications.tsx","../src/slice.ts","../src/sync/get-editing-panel-width.ts"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport Wrapper from './components/notifications';\nimport { notificationsSlice } from './slice';\n\nexport function init() {\n\tregisterSlice( notificationsSlice );\n\tinjectIntoTop( {\n\t\tid: 'notifications',\n\t\tcomponent: Wrapper,\n\t} );\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { SnackbarProvider } from 'notistack';\nimport { __getStore as getStore, __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';\nimport { SnackbarContent, type SnackbarProps, ThemeProvider } from '@elementor/ui';\n\nimport { useEnqueueNotification } from '../hooks/use-enqueue-notifications';\nimport { notifyAction } from '../slice';\nimport { getEditingPanelWidth } from '../sync/get-editing-panel-width';\nimport { type NotificationData, type Notifications } from '../types';\n\n// 8 seconds\nconst AUTO_HIDE_DURATION = 8000;\n\nconst DefaultCustomSnackbar = forwardRef( ( props: SnackbarProps, ref ) => {\n\tconst filteredProps = getFilteredSnackbarProps( props );\n\tconst panelWidth = getEditingPanelWidth();\n\n\treturn (\n\t\t<ThemeProvider palette=\"unstable\">\n\t\t\t<SnackbarContent\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...filteredProps }\n\t\t\t\tsx={ {\n\t\t\t\t\t'&.MuiPaper-root': { minWidth: 'max-content' },\n\t\t\t\t\tml: panelWidth + 'px',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</ThemeProvider>\n\t);\n} );\n\nconst muiToEuiMapper = {\n\tdefault: DefaultCustomSnackbar,\n};\n\nconst Handler = () => {\n\tconst notifications = useSelector( ( state: { notifications: Notifications } ) => state.notifications );\n\n\tuseEnqueueNotification( notifications );\n\n\treturn null;\n};\n\nconst Wrapper = () => {\n\treturn (\n\t\t<SnackbarProvider\n\t\t\tmaxSnack={ 3 }\n\t\t\tautoHideDuration={ AUTO_HIDE_DURATION }\n\t\t\tanchorOrigin={ { horizontal: 'center', vertical: 'bottom' } }\n\t\t\tComponents={ muiToEuiMapper }\n\t\t>\n\t\t\t<Handler />\n\t\t</SnackbarProvider>\n\t);\n};\n\n/*\n * This function can be used to trigger notifications from anywhere in the code.\n * even if you're running in a JS environment as opposed to a React environment.\n */\nexport function notify( notification: NotificationData ) {\n\tconst store = getStore();\n\n\tstore?.dispatch( notifyAction( notification ) );\n}\n\n/*\n * This function can be used to trigger notifications from within a React component.\n * This is the preferred way to trigger notifications.\n */\nexport function NotifyReact( notification: NotificationData ) {\n\tconst dispatch = useDispatch();\n\tdispatch( notifyAction( notification ) );\n}\n\nfunction getFilteredSnackbarProps( props: SnackbarProps ) {\n\tconst forbiddenProps = [ 'autoHideDuration', 'persist', 'hideIconVariant', 'iconVariant', 'anchorOrigin' ];\n\n\treturn Object.entries( props ).reduce(\n\t\t( filteredProps, [ key, value ] ) => {\n\t\t\tif ( ! forbiddenProps.includes( key ) ) {\n\t\t\t\tfilteredProps[ key ] = value;\n\t\t\t}\n\n\t\t\treturn filteredProps;\n\t\t},\n\t\t{} as Record< string, unknown >\n\t);\n}\n\nexport default Wrapper;\n","import { Fragment, useEffect } from 'react';\nimport * as React from 'react';\nimport { closeSnackbar, useSnackbar, type VariantType } from 'notistack';\nimport { __useDispatch as useDispatch } from '@elementor/store';\nimport { Button, CloseButton } from '@elementor/ui';\n\nimport { clearAction } from '../slice';\nimport type { Notifications } from '../types';\n\nconst AUTO_HIDE_DURATION = 8000;\n\nexport const useEnqueueNotification = ( notifications: Notifications ) => {\n\tconst { enqueueSnackbar } = useSnackbar();\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tObject.values( notifications ).forEach( ( notification ) => {\n\t\t\tconst Action = () => (\n\t\t\t\t<Fragment key={ notification.id }>\n\t\t\t\t\t{ notification.additionalActionProps?.map( ( additionalAction, index ) => (\n\t\t\t\t\t\t<Button key={ `${ index }` } { ...additionalAction } />\n\t\t\t\t\t) ) }\n\n\t\t\t\t\t<CloseButton\n\t\t\t\t\t\taria-label=\"close\"\n\t\t\t\t\t\tcolor=\"inherit\"\n\t\t\t\t\t\tonClick={ () => {\n\t\t\t\t\t\t\tcloseSnackbar( notification.id );\n\t\t\t\t\t\t\tdispatch( clearAction( { id: notification.id } ) );\n\t\t\t\t\t\t} }\n\t\t\t\t\t></CloseButton>\n\t\t\t\t</Fragment>\n\t\t\t);\n\n\t\t\tenqueueSnackbar( notification.message, {\n\t\t\t\tvariant: notification.type as VariantType,\n\t\t\t\tkey: notification.id,\n\t\t\t\tonClose: () => dispatch( clearAction( { id: notification.id } ) ),\n\t\t\t\tpreventDuplicate: true,\n\t\t\t\taction: <Action />,\n\t\t\t\tautoHideDuration: notification.autoHideDuration ?? AUTO_HIDE_DURATION,\n\t\t\t} );\n\t\t} );\n\t}, [ notifications, enqueueSnackbar, dispatch ] );\n};\n","import { __createSlice as createSlice } from '@elementor/store';\n\nimport { type Notifications } from './types';\n\nexport const notificationsSlice = createSlice( {\n\tname: 'notifications',\n\tinitialState: {} as Notifications,\n\treducers: {\n\t\tnotifyAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( ! newState[ action.payload.id ] ) {\n\t\t\t\tnewState[ action.payload.id ] = action.payload;\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t\tclearAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( newState[ action.payload.id ] ) {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-dynamic-delete\n\t\t\t\tdelete newState[ action.payload.id ];\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t},\n} );\n\nexport const { notifyAction, clearAction } = notificationsSlice.actions;\n","export function getEditingPanelWidth() {\n\treturn document.querySelector( '.elementor-panel' )?.clientWidth || 0;\n}\n"],"mappings":"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","names":["React","useDispatch","AUTO_HIDE_DURATION","useDispatch"]}
+{"version":3,"sources":["../src/init.ts","../src/components/notifications.tsx","../src/hooks/use-enqueue-notifications.tsx","../src/slice.ts","../src/sync/get-editing-panel-width.ts"],"sourcesContent":["import { injectIntoTop } from '@elementor/editor';\nimport { __registerSlice as registerSlice } from '@elementor/store';\n\nimport Wrapper from './components/notifications';\nimport { notificationsSlice } from './slice';\n\nexport function init() {\n\tregisterSlice( notificationsSlice );\n\tinjectIntoTop( {\n\t\tid: 'notifications',\n\t\tcomponent: Wrapper,\n\t} );\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { closeSnackbar, type CustomContentProps, SnackbarProvider } from 'notistack';\nimport { CrownFilledIcon, InfoCircleFilledIcon } from '@elementor/icons';\nimport { __getStore as getStore, __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';\nimport { Alert, SnackbarContent, type SnackbarProps, ThemeProvider } from '@elementor/ui';\n\nimport { useEnqueueNotification } from '../hooks/use-enqueue-notifications';\nimport { notifyAction } from '../slice';\nimport { getEditingPanelWidth } from '../sync/get-editing-panel-width';\nimport { type NotificationData, type Notifications } from '../types';\n\n// 8 seconds\nconst AUTO_HIDE_DURATION = 8000;\n\nconst DefaultCustomSnackbar = forwardRef( ( props: SnackbarProps, ref ) => {\n\tconst filteredProps = getFilteredSnackbarProps( props );\n\tconst panelWidth = getEditingPanelWidth();\n\n\treturn (\n\t\t<ThemeProvider palette=\"unstable\">\n\t\t\t<SnackbarContent\n\t\t\t\tref={ ref }\n\t\t\t\t{ ...filteredProps }\n\t\t\t\tsx={ {\n\t\t\t\t\t'&.MuiPaper-root': { minWidth: 'max-content' },\n\t\t\t\t\tml: panelWidth + 'px',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</ThemeProvider>\n\t);\n} );\n\ninterface AlertSnackbarProps extends CustomContentProps {\n\tcolor: 'promotion' | 'info';\n\ticon: React.ReactElement;\n}\n\nconst AlertSnackbar = forwardRef< HTMLDivElement, AlertSnackbarProps >( ( { color, icon, ...props }, ref ) => {\n\tconst panelWidth = getEditingPanelWidth();\n\n\treturn (\n\t\t<ThemeProvider colorScheme=\"light\" palette=\"unstable\">\n\t\t\t<Alert\n\t\t\t\tref={ ref }\n\t\t\t\tvariant=\"standard\"\n\t\t\t\tcolor={ color }\n\t\t\t\ticon={ icon }\n\t\t\t\trole=\"alert\"\n\t\t\t\taction={ props.action }\n\t\t\t\tonClose={ () => closeSnackbar( props.id ) }\n\t\t\t\tsx={ {\n\t\t\t\t\tml: panelWidth + 'px',\n\t\t\t\t\t'& .MuiAlert-message': { display: 'flex', flexWrap: 'nowrap', alignItems: 'center' },\n\t\t\t\t\t'& .MuiAlert-content': { whiteSpace: 'nowrap' },\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ props.message }\n\t\t\t</Alert>\n\t\t</ThemeProvider>\n\t);\n} );\n\nconst PromotionSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (\n\t<AlertSnackbar ref={ ref } color=\"promotion\" icon={ <CrownFilledIcon /> } { ...props } />\n) );\n\nconst InfoSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (\n\t<AlertSnackbar ref={ ref } color=\"info\" icon={ <InfoCircleFilledIcon /> } { ...props } />\n) );\n\nconst muiToEuiMapper = {\n\tdefault: DefaultCustomSnackbar,\n\tpromotion: PromotionSnackbar,\n\tinfo: InfoSnackbar,\n};\n\nconst Handler = () => {\n\tconst notifications = useSelector( ( state: { notifications: Notifications } ) => state.notifications );\n\n\tuseEnqueueNotification( notifications );\n\n\treturn null;\n};\n\nconst Wrapper = () => {\n\treturn (\n\t\t<SnackbarProvider\n\t\t\tmaxSnack={ 3 }\n\t\t\tautoHideDuration={ AUTO_HIDE_DURATION }\n\t\t\tanchorOrigin={ { horizontal: 'center', vertical: 'bottom' } }\n\t\t\tComponents={ muiToEuiMapper }\n\t\t>\n\t\t\t<Handler />\n\t\t</SnackbarProvider>\n\t);\n};\n\n/*\n * This function can be used to trigger notifications from anywhere in the code.\n * even if you're running in a JS environment as opposed to a React environment.\n */\nexport function notify( notification: NotificationData ) {\n\tconst store = getStore();\n\n\tstore?.dispatch( notifyAction( notification ) );\n}\n\n/*\n * This function can be used to trigger notifications from within a React component.\n * This is the preferred way to trigger notifications.\n */\nexport function NotifyReact( notification: NotificationData ) {\n\tconst dispatch = useDispatch();\n\tdispatch( notifyAction( notification ) );\n}\n\nfunction getFilteredSnackbarProps( props: SnackbarProps ) {\n\tconst forbiddenProps = [ 'autoHideDuration', 'persist', 'hideIconVariant', 'iconVariant', 'anchorOrigin' ];\n\n\treturn Object.entries( props ).reduce(\n\t\t( filteredProps, [ key, value ] ) => {\n\t\t\tif ( ! forbiddenProps.includes( key ) ) {\n\t\t\t\tfilteredProps[ key ] = value;\n\t\t\t}\n\n\t\t\treturn filteredProps;\n\t\t},\n\t\t{} as Record< string, unknown >\n\t);\n}\n\nexport default Wrapper;\n","import { Fragment, useEffect } from 'react';\nimport * as React from 'react';\nimport { closeSnackbar, useSnackbar, type VariantType } from 'notistack';\nimport { __useDispatch as useDispatch } from '@elementor/store';\nimport { Button, CloseButton } from '@elementor/ui';\n\nimport { clearAction } from '../slice';\nimport type { NotificationData, Notifications } from '../types';\n\nconst AUTO_HIDE_DURATION = 8000;\n\nfunction createDefaultAction( notification: NotificationData, onDismiss: () => void ) {\n\treturn (\n\t\t<Fragment key={ notification.id }>\n\t\t\t{ notification.additionalActionProps?.map( ( additionalAction, index ) => (\n\t\t\t\t<Button key={ `${ index }` } { ...additionalAction } />\n\t\t\t) ) }\n\n\t\t\t<CloseButton aria-label=\"close\" color=\"inherit\" onClick={ onDismiss } />\n\t\t</Fragment>\n\t);\n}\n\nfunction createPromotionAction( notification: NotificationData ) {\n\treturn (\n\t\t<Fragment key={ notification.id }>\n\t\t\t{ notification.additionalActionProps?.map( ( additionalAction, index ) => (\n\t\t\t\t<Button key={ `${ index }` } { ...additionalAction } />\n\t\t\t) ) }\n\t\t</Fragment>\n\t);\n}\n\nexport const useEnqueueNotification = ( notifications: Notifications ) => {\n\tconst { enqueueSnackbar } = useSnackbar();\n\tconst dispatch = useDispatch();\n\n\tuseEffect( () => {\n\t\tObject.values( notifications ).forEach( ( notification ) => {\n\t\t\tconst dismiss = () => {\n\t\t\t\tcloseSnackbar( notification.id );\n\t\t\t\tdispatch( clearAction( { id: notification.id } ) );\n\t\t\t};\n\n\t\t\tconst useAlertAction = [ 'promotion', 'info' ].includes( notification.type );\n\n\t\t\tconst action = useAlertAction\n\t\t\t\t? createPromotionAction( notification )\n\t\t\t\t: createDefaultAction( notification, dismiss );\n\n\t\t\tenqueueSnackbar( notification.message, {\n\t\t\t\tvariant: notification.type as VariantType,\n\t\t\t\tkey: notification.id,\n\t\t\t\tonClose: () => dispatch( clearAction( { id: notification.id } ) ),\n\t\t\t\tpreventDuplicate: true,\n\t\t\t\taction,\n\t\t\t\tautoHideDuration: notification.autoHideDuration ?? AUTO_HIDE_DURATION,\n\t\t\t} );\n\t\t} );\n\t}, [ notifications, enqueueSnackbar, dispatch ] );\n};\n","import { __createSlice as createSlice } from '@elementor/store';\n\nimport { type Notifications } from './types';\n\nexport const notificationsSlice = createSlice( {\n\tname: 'notifications',\n\tinitialState: {} as Notifications,\n\treducers: {\n\t\tnotifyAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( ! newState[ action.payload.id ] ) {\n\t\t\t\tnewState[ action.payload.id ] = action.payload;\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t\tclearAction: ( state, action ) => {\n\t\t\tconst newState = { ...state };\n\t\t\tif ( newState[ action.payload.id ] ) {\n\t\t\t\t// eslint-disable-next-line @typescript-eslint/no-dynamic-delete\n\t\t\t\tdelete newState[ action.payload.id ];\n\t\t\t}\n\n\t\t\treturn newState;\n\t\t},\n\t},\n} );\n\nexport const { notifyAction, clearAction } = notificationsSlice.actions;\n","export function getEditingPanelWidth() {\n\treturn document.querySelector( '.elementor-panel' )?.clientWidth || 0;\n}\n"],"mappings":"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","names":["React","closeSnackbar","useDispatch","AUTO_HIDE_DURATION","closeSnackbar","useDispatch"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-notifications",
   "description": "Notifications manager for the Elementor editor",
-  "version": "4.0.0-manual",
+  "version": "4.0.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,8 +40,9 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-manual",
-    "@elementor/store": "4.0.0-manual",
+    "@elementor/editor": "4.0.0",
+    "@elementor/icons": "^1.68.0",
+    "@elementor/store": "4.0.0",
     "@elementor/ui": "1.36.17",
     "notistack": "^3.0.2"
   },

package/src/components/notifications.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { forwardRef } from 'react';
-import { SnackbarProvider } from 'notistack';
+import { closeSnackbar, type CustomContentProps, SnackbarProvider } from 'notistack';
+import { CrownFilledIcon, InfoCircleFilledIcon } from '@elementor/icons';
 import { __getStore as getStore, __useDispatch as useDispatch, __useSelector as useSelector } from '@elementor/store';
-import { SnackbarContent, type SnackbarProps, ThemeProvider } from '@elementor/ui';
+import { Alert, SnackbarContent, type SnackbarProps, ThemeProvider } from '@elementor/ui';
 
 import { useEnqueueNotification } from '../hooks/use-enqueue-notifications';
 import { notifyAction } from '../slice';
@@ -30,8 +31,48 @@ const DefaultCustomSnackbar = forwardRef( ( props: SnackbarProps, ref ) => {
 	);
 } );
 
+interface AlertSnackbarProps extends CustomContentProps {
+	color: 'promotion' | 'info';
+	icon: React.ReactElement;
+}
+
+const AlertSnackbar = forwardRef< HTMLDivElement, AlertSnackbarProps >( ( { color, icon, ...props }, ref ) => {
+	const panelWidth = getEditingPanelWidth();
+
+	return (
+		<ThemeProvider colorScheme="light" palette="unstable">
+			<Alert
+				ref={ ref }
+				variant="standard"
+				color={ color }
+				icon={ icon }
+				role="alert"
+				action={ props.action }
+				onClose={ () => closeSnackbar( props.id ) }
+				sx={ {
+					ml: panelWidth + 'px',
+					'& .MuiAlert-message': { display: 'flex', flexWrap: 'nowrap', alignItems: 'center' },
+					'& .MuiAlert-content': { whiteSpace: 'nowrap' },
+				} }
+			>
+				{ props.message }
+			</Alert>
+		</ThemeProvider>
+	);
+} );
+
+const PromotionSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (
+	<AlertSnackbar ref={ ref } color="promotion" icon={ <CrownFilledIcon /> } { ...props } />
+) );
+
+const InfoSnackbar = forwardRef< HTMLDivElement, CustomContentProps >( ( props, ref ) => (
+	<AlertSnackbar ref={ ref } color="info" icon={ <InfoCircleFilledIcon /> } { ...props } />
+) );
+
 const muiToEuiMapper = {
 	default: DefaultCustomSnackbar,
+	promotion: PromotionSnackbar,
+	info: InfoSnackbar,
 };
 
 const Handler = () => {

package/src/hooks/use-enqueue-notifications.tsx

@@ -5,39 +5,55 @@ import { __useDispatch as useDispatch } from '@elementor/store';
 import { Button, CloseButton } from '@elementor/ui';
 
 import { clearAction } from '../slice';
-import type { Notifications } from '../types';
+import type { NotificationData, Notifications } from '../types';
 
 const AUTO_HIDE_DURATION = 8000;
 
+function createDefaultAction( notification: NotificationData, onDismiss: () => void ) {
+	return (
+		<Fragment key={ notification.id }>
+			{ notification.additionalActionProps?.map( ( additionalAction, index ) => (
+				<Button key={ `${ index }` } { ...additionalAction } />
+			) ) }
+
+			<CloseButton aria-label="close" color="inherit" onClick={ onDismiss } />
+		</Fragment>
+	);
+}
+
+function createPromotionAction( notification: NotificationData ) {
+	return (
+		<Fragment key={ notification.id }>
+			{ notification.additionalActionProps?.map( ( additionalAction, index ) => (
+				<Button key={ `${ index }` } { ...additionalAction } />
+			) ) }
+		</Fragment>
+	);
+}
+
 export const useEnqueueNotification = ( notifications: Notifications ) => {
 	const { enqueueSnackbar } = useSnackbar();
 	const dispatch = useDispatch();
 
 	useEffect( () => {
 		Object.values( notifications ).forEach( ( notification ) => {
-			const Action = () => (
-				<Fragment key={ notification.id }>
-					{ notification.additionalActionProps?.map( ( additionalAction, index ) => (
-						<Button key={ `${ index }` } { ...additionalAction } />
-					) ) }
-
-					<CloseButton
-						aria-label="close"
-						color="inherit"
-						onClick={ () => {
-							closeSnackbar( notification.id );
-							dispatch( clearAction( { id: notification.id } ) );
-						} }
-					></CloseButton>
-				</Fragment>
-			);
+			const dismiss = () => {
+				closeSnackbar( notification.id );
+				dispatch( clearAction( { id: notification.id } ) );
+			};
+
+			const useAlertAction = [ 'promotion', 'info' ].includes( notification.type );
+
+			const action = useAlertAction
+				? createPromotionAction( notification )
+				: createDefaultAction( notification, dismiss );
 
 			enqueueSnackbar( notification.message, {
 				variant: notification.type as VariantType,
 				key: notification.id,
 				onClose: () => dispatch( clearAction( { id: notification.id } ) ),
 				preventDuplicate: true,
-				action: <Action />,
+				action,
 				autoHideDuration: notification.autoHideDuration ?? AUTO_HIDE_DURATION,
 			} );
 		} );

package/src/types.ts

@@ -1,6 +1,13 @@
 import { type VariantType } from 'notistack';
 import { type ButtonProps } from '@elementor/ui';
 
+declare module 'notistack' {
+	interface VariantOverrides {
+		promotion: true;
+		info: true;
+	}
+}
+
 export type NotificationData = {
 	type: VariantType;
 	message: string | React.ReactNode;