Add subscription-status-changed stub

[PREMIUM-256]

mailpoet/assets/js/src/automation/integrations/woocommerce-subscriptions/index.tsx

@@ -1,8 +1,11 @@
 import { MailPoet } from '../../../mailpoet';
+import { step as SubscriptionStatusChanged } from './steps/subscription-status-changed';
+import { registerStepType } from '../../editor/store';
 
 export const initialize = (): void => {
   if (!MailPoet.isWoocommerceSubscriptionsActive) {
     return;
   }
+  registerStepType(SubscriptionStatusChanged);
   // Insert new steps here
 };

mailpoet/assets/js/src/automation/integrations/woocommerce-subscriptions/steps/subscription-status-changed/icon.tsx

@@ -0,0 +1,26 @@
+export function Icon(): JSX.Element {
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.0932 17.9065C8.0932 19.0455 7.1699 19.9688 6.03096 19.9688C4.89202 19.9688 3.96872 19.0455 3.96872 17.9065C3.96872 16.7676 4.89202 15.8443 6.03096 15.8443C7.1699 15.8443 8.0932 16.7676 8.0932 17.9065Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20.0875 17.9065C20.0875 19.0454 19.1642 19.9687 18.0253 19.9687C16.8863 19.9687 15.9631 19.0454 15.9631 17.9065C15.9631 16.7675 16.8863 15.8442 18.0253 15.8442C19.1642 15.8442 20.0875 16.7675 20.0875 17.9065Z"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M6.38597 11.5784C6.38597 8.69346 8.7247 6.35474 11.6097 6.35474C14.1254 6.35474 16.2257 8.1331 16.7222 10.5013H15.3354L17.8333 13.4988L20.3312 10.5013H18.7536C18.2335 7.02264 15.2331 4.35474 11.6097 4.35474C7.62013 4.35474 4.38597 7.58889 4.38597 11.5784V12.1208H6.38597V11.5784Z"
+      />
+    </svg>
+  );
+}

mailpoet/assets/js/src/automation/integrations/woocommerce-subscriptions/steps/subscription-status-changed/index.tsx

@@ -0,0 +1,40 @@
+import { __, _x } from '@wordpress/i18n';
+import { StepType } from '../../../../editor/store';
+import { Icon } from './icon';
+import { PremiumModalForStepEdit } from '../../../../../common/premium-modal';
+
+const keywords = [
+  __('woocommerce', 'mailpoet'),
+  __('subscriptions', 'mailpoet'),
+  __('status', 'mailpoet'),
+  __('change', 'mailpoet'),
+];
+
+export const step: StepType = {
+  key: 'woocommerce-subscriptions:subscription-status-changed',
+  group: 'triggers',
+  title: () => __('Woo subscription status changed', 'mailpoet'),
+  description: () =>
+    __(
+      'Start the automation when subscription changed to a specific status.',
+      'mailpoet',
+    ),
+  subtitle: () => _x('Trigger', 'noun', 'mailpoet'),
+  keywords,
+  foreground: '#2271b1',
+  background: '#f0f6fc',
+  icon: () => <Icon />,
+  edit: () => (
+    <PremiumModalForStepEdit
+      tracking={{
+        utm_medium: 'upsell_modal',
+        utm_campaign: 'create_automation_editor_subscription_status_changed',
+      }}
+    >
+      {__(
+        'Starting an automation by changing the status of an subscription is a premium feature.',
+        'mailpoet',
+      )}
+    </PremiumModalForStepEdit>
+  ),
+} as const;