Add Custom Trigger and Custom Action stubs

[MAILPOET-5514]

mailpoet/assets/js/src/automation/integrations/mailpoet/index.tsx

@@ -9,6 +9,8 @@ import { step as RemoveFromListStep } from './steps/remove-from-list';
 import { step as UpdateSubscriberStep } from './steps/update-subscriber';
 import { step as UnsubscribeStep } from './steps/unsubscribe';
 import { step as NotificationEmail } from './steps/notification-email';
+import { step as CustomTriggerStep } from './steps/custom_trigger';
+import { step as CustomActionStep } from './steps/custom_action';
 import { registerStepControls } from './step-controls';
 import { registerAutomationSidebar } from './automation-sidebar';
 
@@ -16,6 +18,8 @@ export const initialize = (): void => {
   registerStepType(SendEmailStep);
   registerStepType(WpUserRegisteredTrigger);
   registerStepType(SomeoneSubscribesTrigger);
+  registerStepType(CustomTriggerStep);
+  registerStepType(CustomActionStep);
   registerStepType(AddTagsAction);
   registerStepType(RemoveTagsAction);
   registerStepType(AddToListStep);

mailpoet/assets/js/src/automation/integrations/mailpoet/steps/custom_action/index.tsx

@@ -0,0 +1,35 @@
+import { __ } from '@wordpress/i18n';
+import { code } from '@wordpress/icons';
+import { StepType } from '../../../../editor/store/types';
+import { PremiumModalForStepEdit } from '../../../../../common/premium_modal';
+import { LockedBadge } from '../../../../../common/premium_modal/locked_badge';
+
+const keywords = [
+  __('custom', 'mailpoet'),
+  __('hook', 'mailpoet'),
+  __('code', 'mailpoet'),
+];
+
+export const step: StepType = {
+  key: 'mailpoet:custom-action',
+  group: 'actions',
+  title: () => __('Custom action', 'mailpoet'),
+  description: () => __('Fires a customizable hook.', 'mailpoet'),
+  subtitle: () => <LockedBadge text={__('Premium', 'mailpoet')} />,
+  keywords,
+  foreground: '#00A32A',
+  background: '#EDFAEF',
+  icon: () => (
+    <div style={{ width: '100%', height: '100%', scale: '1.12' }}>{code}</div>
+  ),
+  edit: () => (
+    <PremiumModalForStepEdit
+      tracking={{
+        utm_medium: 'upsell_modal',
+        utm_campaign: 'create_automation_editor_custom_action',
+      }}
+    >
+      {__('Firing a custom hook is a premium feature.', 'mailpoet')}
+    </PremiumModalForStepEdit>
+  ),
+} as const;

mailpoet/assets/js/src/automation/integrations/mailpoet/steps/custom_trigger/index.tsx

@@ -0,0 +1,44 @@
+import { __ } from '@wordpress/i18n';
+import { plugins } from '@wordpress/icons';
+import { StepType } from '../../../../editor/store';
+import { LockedBadge } from '../../../../../common/premium_modal/locked_badge';
+import { PremiumModalForStepEdit } from '../../../../../common/premium_modal';
+
+const keywords = [
+  __('custom', 'mailpoet'),
+  __('hook', 'mailpoet'),
+  __('code', 'mailpoet'),
+];
+
+export const step: StepType = {
+  key: 'mailpoet:custom-trigger',
+  group: 'triggers',
+  title: () => __('Custom trigger', 'mailpoet'),
+  description: () =>
+    __(
+      'Starts an automation when a certain action is fired. This action needs to hand over the email address of the subscriber.',
+      'mailpoet',
+    ),
+  subtitle: () => <LockedBadge text={__('Premium', 'mailpoet')} />,
+  keywords,
+  foreground: '#2271b1',
+  background: '#f0f6fc',
+  icon: () => (
+    <div style={{ width: '100%', height: '100%', scale: '1.12' }}>
+      {plugins}
+    </div>
+  ),
+  edit: () => (
+    <PremiumModalForStepEdit
+      tracking={{
+        utm_medium: 'upsell_modal',
+        utm_campaign: 'create_automation_editor_custom_trigger',
+      }}
+    >
+      {__(
+        'Triggering an automation with a custom hook is a premium feature.',
+        'mailpoet',
+      )}
+    </PremiumModalForStepEdit>
+  ),
+} as const;