Release 4.6.0

It seems that the DMARC policy for automattic.com was changed from
"quarantine" to "reject".

[MAILPOET-5038]

.circleci/config.yml

@@ -179,10 +179,10 @@ jobs:
       - run:
           name: Download additional WP Plugins for tests
           command: |
-            ./do download:woo-commerce-zip 6.8.2
-            ./do download:woo-commerce-subscriptions-zip 4.5.1
-            ./do download:woo-commerce-memberships-zip 1.23.0
-            ./do download:woo-commerce-blocks-zip 8.4.0
+            ./do download:woo-commerce-zip 7.1.0
+            ./do download:woo-commerce-subscriptions-zip 4.6.0
+            ./do download:woo-commerce-memberships-zip 1.23.1
+            ./do download:woo-commerce-blocks-zip 8.8.2
       - run:
           name: Dump tests ENV variables for acceptance tests
           command: |
@@ -311,7 +311,8 @@ jobs:
     parallelism: 20
     working_directory: /home/circleci/mailpoet/mailpoet
     machine:
-      image: ubuntu-2204:2022.07.1
+      image: ubuntu-2204:2022.10.2
+      docker_layer_caching: false
     parameters:
       multisite:
         type: integer
@@ -322,7 +323,7 @@ jobs:
       mysql_command:
         type: string
         default: ''
-      mysql_image_version:
+      mysql_image:
         type: string
         default: ''
       codeception_image_version:
@@ -351,7 +352,7 @@ jobs:
         default: 0
     environment:
       MYSQL_COMMAND: << parameters.mysql_command >>
-      MYSQL_IMAGE_VERSION: << parameters.mysql_image_version >>
+      MYSQL_IMAGE: << parameters.mysql_image >>
       CODECEPTION_IMAGE_VERSION: << parameters.codeception_image_version >>
       WORDPRESS_IMAGE_VERSION: << parameters.wordpress_image_version >>
     steps:
@@ -411,6 +412,12 @@ jobs:
               circleci tests glob "tests/acceptance/**/*Cest.php" | circleci tests split --split-by=timings > tests/acceptance/_groups/circleci_split_group
             fi
             cat tests/acceptance/_groups/circleci_split_group
+      - run:
+          name: Create docker containers for test
+          # We experienced some failures when creating containers so we do it explicitly with one retry
+          command: |
+            cd tests/docker
+            docker-compose create || docker-compose create
       - run:
           name: Run acceptance tests
           command: |
@@ -476,9 +483,12 @@ jobs:
   integration_tests:
     working_directory: /home/circleci/mailpoet/mailpoet
     machine:
-      image: ubuntu-2204:2022.07.1
+      image: ubuntu-2204:2022.10.2
+      docker_layer_caching: false
     environment:
       CODECEPTION_IMAGE_VERSION: << parameters.codeception_image_version >>
+      MYSQL_COMMAND: << parameters.mysql_command >>
+      MYSQL_IMAGE: << parameters.mysql_image >>
     parameters:
       codeception_image_version:
         type: string
@@ -501,7 +511,10 @@ jobs:
       multisite:
         type: integer
         default: 0
-      woo_core_version:
+      mysql_command:
+        type: string
+        default: ''
+      mysql_image:
         type: string
         default: ''
     steps:
@@ -511,14 +524,12 @@ jobs:
           name: 'Pull test docker images'
           # Pull docker images with 3 retries
           command: i='0';while ! docker-compose -f tests/docker/docker-compose.yml pull && ((i < 3)); do sleep 3 && i=$[$i+1]; done
-      - when:
-          condition: << parameters.woo_core_version >>
-          steps:
-            - run:
-                name: Download WooCommerce Core
-                command: |
-                  cd tests/docker
-                  docker-compose run --rm -w /project --entrypoint "./do download:woo-commerce-zip << parameters.woo_core_version >>" --no-deps codeception_integration
+      - run:
+          name: Create docker containers for test
+          # We experienced some failures when creating containers so we do it explicitly with one retry
+          command: |
+            cd tests/docker
+            docker-compose create || docker-compose create
       - run:
           name: 'PHP Integration tests'
           command: |
@@ -629,7 +640,7 @@ workflows:
             - build
       - acceptance_tests:
           <<: *slack-fail-post-step
-          name: acceptance_tests
+          name: acceptance_tests_base_and_woo_cot_off
           requires:
             - unit_tests
             - static_analysis_php8
@@ -641,7 +652,6 @@ workflows:
           group: woo
           enable_cot: 1
           enable_cot_sync: 1
-          woo_core_version: 7.1.0-rc.2 # Temporarily force COT beta version
           requires:
             - unit_tests
             - static_analysis_php8
@@ -653,17 +663,6 @@ workflows:
           group: woo
           enable_cot: 1
           enable_cot_sync: 0
-          woo_core_version: 7.1.0-rc.2 # Temporarily force COT beta version
-          requires:
-            - unit_tests
-            - static_analysis_php8
-            - qa_js
-            - qa_php
-      - acceptance_tests:
-          <<: *slack-fail-post-step
-          name: acceptance_tests_woo_cot_off
-          group: woo
-          woo_core_version: 7.1.0-rc.2 # Temporarily force COT beta version
           requires:
             - unit_tests
             - static_analysis_php8
@@ -673,21 +672,11 @@ workflows:
           <<: *slack-fail-post-step
           requires:
             - build
-      - integration_tests:
-          <<: *slack-fail-post-step
-          group: woo
-          name: integration_test_woocommerce
-          requires:
-            - unit_tests
-            - static_analysis_php8
-            - qa_js
-            - qa_php
       - integration_tests:
           <<: *slack-fail-post-step
           group: woo
           enable_cot: 1
           enable_cot_sync: 1
-          woo_core_version: 7.1.0-rc.2 # Temporarily force COT beta version
           name: integration_test_woo_cot_sync
           requires:
             - unit_tests
@@ -699,7 +688,6 @@ workflows:
           group: woo
           enable_cot: 1
           enable_cot_sync: 0
-          woo_core_version: 7.1.0-rc.2 # Temporarily force COT beta version
           name: integration_test_woo_cot_no_sync
           requires:
             - unit_tests
@@ -709,7 +697,6 @@ workflows:
       - integration_tests:
           <<: *slack-fail-post-step
           group: woo
-          woo_core_version: 7.1.0-rc.2 # Temporarily force COT beta version
           name: integration_test_woo_cot_off
           requires:
             - unit_tests
@@ -745,10 +732,14 @@ workflows:
           <<: *slack-fail-post-step
           requires:
             - build
-            - acceptance_tests
+            - acceptance_tests_base_and_woo_cot_off
             - js_tests
-            - integration_test_woocommerce
             - integration_test_base
+            - integration_test_woo_cot_no_sync
+            - integration_test_woo_cot_off
+            - integration_test_woo_cot_sync
+            - acceptance_tests_woo_cot_sync
+            - acceptance_tests_woo_cot_no_sync
 
   nightly:
     triggers:
@@ -773,14 +764,14 @@ workflows:
       - acceptance_tests:
           <<: *slack-fail-post-step
           name: acceptance_oldest
-          woo_core_version: 6.2.2
+          woo_core_version: 6.8.0
           woo_subscriptions_version: 4.3.0
           woo_memberships_version: 1.21.0
-          woo_blocks_version: 5.3.2
-          mysql_command: --max_allowed_packet=100M
-          mysql_image_version: 5.7.36
-          codeception_image_version: 7.4-cli_20210126.1
-          wordpress_image_version: wp-5.6_php7.2_20220406.1
+          woo_blocks_version: 6.8.0
+          mysql_command: --max_allowed_packet=100M --default-storage-engine=MYISAM
+          mysql_image: mysql:5.5
+          codeception_image_version: 7.4-cli_20220605.0
+          wordpress_image_version: wp-5.8_php7.3_20221104.1
           requires:
             - build
       - unit_tests:
@@ -803,6 +794,8 @@ workflows:
           <<: *slack-fail-post-step
           name: integration_oldest
           codeception_image_version: 7.2-cli_20220605.0
+          mysql_command: --max_allowed_packet=100M --default-storage-engine=MYISAM
+          mysql_image: mysql:5.5
           requires:
             - build
       - build_premium:

README.md

@@ -126,23 +126,24 @@ You can access this help in your command line running `./do` without parameters.
 
 [Read the article.](https://mailpoet.atlassian.net/wiki/spaces/MAILPOET/pages/629374977/Adding+new+templates+to+the+plugin)
 
-## 🚥 Testing with PHP 7.4 or PHP 8.0
+## 🚥 Testing with different PHP versions
 
-To switch the environment to PHP 7.4/8.0:
+To switch the environment to a different PHP version:
 
-1. Configure the `wordpress` service in `docker-compose.override.yml` to build from the php74 Dockerfile:
+1. Check https://github.com/mailpoet/mailpoet/tree/trunk/dev for a list of available PHP versions. Each directory starting with `php` corresponds to a available version.
+2. Configure the `wordpress` service in `docker-compose.override.yml` to build from the desired PHP version Dockerfile (replace {PHP_VERSION} with the name of the directory that corresponds to the version that you want to use):
 
    ```yaml
    wordpress:
      build:
        context: .
-       dockerfile: dev/php74/Dockerfile # OR dev/php80/Dockerfile
+       dockerfile: dev/{PHP_VERSION}/Dockerfile
    ```
 
-2. Run `docker-compose build wordpress`.
-3. Start the stack with `./do start`.
+3. Run `docker-compose build wordpress`.
+4. Start the stack with `./do start`.
 
-To switch back to PHP 8.1 remove what was added in 1) and, run `docker-compose build wordpress` for application container and `docker-compose build test_wordpress` for tests container,
+To switch back to the default PHP version remove what was added in 2) and, run `docker-compose build wordpress` for application container and `docker-compose build test_wordpress` for tests container,
 and start the stack using `./do start`.
 
 ## ✅ TODO

dev/php82/Dockerfile

@@ -0,0 +1,46 @@
+FROM php:8.2.0RC6-apache
+
+ARG UID=1000
+ARG GID=1000
+
+# additinal extensions
+RUN apt-get update \
+	&& apt-get install -y git zlib1g-dev libzip-dev zip wget gnupg msmtp libpng-dev gettext subversion \
+	&& \
+    # Install NodeJS, enable Corepack
+    curl -sL https://deb.nodesource.com/setup_17.x | bash - && \
+    apt-get install -y nodejs build-essential && \
+    corepack enable && \
+	\
+	# Install WP-CLI
+	curl -o /usr/local/bin/wp https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar && \
+	chmod +x /usr/local/bin/wp && \
+	\
+  # Clean up
+  apt-get clean && \
+  rm -rf /var/lib/apt/lists/* /tmp/* /var/tmp/*
+
+COPY dev/php.ini /usr/local/etc/php/conf.d/php_user.ini
+
+# msmtp config
+RUN printf "account default\nhost smtp\nport 1025" > /etc/msmtprc
+
+# xdebug build an config
+ENV XDEBUGINI_PATH=/usr/local/etc/php/conf.d/xdebug.ini
+RUN git clone -b "3.2.0RC2" --depth 1 https://github.com/xdebug/xdebug.git /usr/src/php/ext/xdebug \
+    && docker-php-ext-configure xdebug --enable-xdebug-dev \
+    && docker-php-ext-install xdebug \
+    && mkdir /tmp/debug
+COPY dev/xdebug.ini /tmp/xdebug.ini
+RUN cat /tmp/xdebug.ini >> $XDEBUGINI_PATH
+
+# php extensions
+RUN docker-php-ext-install pdo_mysql
+RUN docker-php-ext-install mysqli
+
+# allow .htaccess files (between <Directory /var/www/> and </Directory>, which is WordPress installation)
+RUN sed -i '/<Directory \/var\/www\/>/,/<\/Directory>/ s/AllowOverride None/AllowOverride All/' /etc/apache2/apache2.conf
+
+# ensure existing content in /var/www/html respects UID and GID, give Node permissions for Corepack
+RUN chown -R ${UID}:${GID} /var/www/html && \
+  mkdir -p /.node && chown -R ${UID}:${GID} /.node

docker-compose.yml

@@ -15,6 +15,7 @@ services:
     volumes:
       - my-datavolume:/var/lib/mysql
       - ./dev/database/create_test_db.sh:/docker-entrypoint-initdb.d/10-create_test_db.sh
+    command: --sql_mode=STRICT_TRANS_TABLES,ERROR_FOR_DIVISION_BY_ZERO,NO_AUTO_CREATE_USER,NO_ENGINE_SUBSTITUTION,ANSI,ONLY_FULL_GROUP_BY
     environment:
       MYSQL_ROOT_PASSWORD: somewordpress
       MYSQL_DATABASE: wordpress

mailpoet/RoboFile.php

@@ -1,4 +1,4 @@
-<?php
+<?php // phpcs:ignore SlevomatCodingStandard.TypeHints.DeclareStrictTypes.DeclareStrictTypesMissing
 
 // phpcs:disable PSR1.Classes.ClassDeclaration
 // phpcs:disable PSR1.Classes.ClassDeclaration.MissingNamespace
@@ -297,6 +297,29 @@ class RoboFile extends \Robo\Tasks {
     return $this->runTestsInContainer($opts);
   }
 
+  public function testPerformance($path = null, $opts = ['url' => null, 'head' => false, 'scenario' => null]) {
+    // run WordPress setup
+    $this->taskExec('COMPOSE_HTTP_TIMEOUT=200 docker-compose run --rm -it setup')
+      ->dir(__DIR__ . '/tests/performance')
+      ->run();
+
+    // run performance tests
+    $dir = __DIR__;
+    return $this->taskExec("php $dir/tools/xk6browser.php")
+      ->arg('run')
+      ->option('env', 'URL=' . $opts['url'])
+      ->option('env', 'HEADLESS=' . ($opts['head'] ? 'false' : 'true'))
+      ->option('env', 'SCENARIO=' . $opts['scenario'])
+      ->arg($path ?? "$dir/tests/performance/scenarios.js")
+      ->dir($dir)->run();
+  }
+
+  public function testPerformanceClean() {
+    $this->taskExec('COMPOSE_HTTP_TIMEOUT=200 docker-compose down --remove-orphans -v')
+      ->dir(__DIR__ . '/tests/performance')
+      ->run();
+  }
+
   public function testAcceptanceMultisite($opts = ['file' => null, 'skip-deps' => false, 'group' => null, 'timeout' => null, 'enable-cot' => false, 'enable-cot-sync' => false]) {
     return $this->runTestsInContainer(array_merge($opts, ['multisite' => true]));
   }
@@ -425,6 +448,9 @@ class RoboFile extends \Robo\Tasks {
     $collection->addCode(function() {
       return $this->qaCodeSniffer([]);
     });
+    $collection->addCode(function() {
+      return $this->qaMinimalPluginStandard([]);
+    });
     return $collection->run();
   }
 
@@ -501,7 +527,56 @@ class RoboFile extends \Robo\Tasks {
       './tasks/code_sniffer/vendor/bin/phpcs',
       '--extensions=php',
       $severityFlag,
-      '--standard=tasks/code_sniffer/MailPoet',
+      '--standard=tasks/code_sniffer/MailPoet/free-ruleset.xml',
+      '-s',
+    ]);
+
+    $ignorePaths = [
+      '.mp_svn',
+      'assets',
+      'doc',
+      'generated',
+      'lib/Config/PopulatorData/Templates',
+      'lib-3rd-party',
+      'node_modules',
+      'plugin_repository',
+      'prefixer/build',
+      'prefixer/vendor',
+      'tasks/code_sniffer/vendor',
+      'tasks/phpstan/vendor',
+      'tasks/makepot',
+      'tools/vendor',
+      'temp',
+      'tests/_data',
+      'tests/_output',
+      'tests/_support/_generated',
+      'vendor',
+      'vendor-prefixed',
+      'views',
+    ];
+
+    // the "--ignore" arg takes a list of regexes, we need to anchor and escape them
+    $ignorePatterns = array_map(function (string $path): string {
+      return '^' . preg_quote(__DIR__ . DIRECTORY_SEPARATOR . $path);
+    }, $ignorePaths);
+
+    $stringFilesToCheck = !empty($filesToCheck) ? implode(' ', $filesToCheck) : '.';
+
+    return $this->taskExec($task)
+      ->arg('--ignore=' . implode(',', $ignorePatterns))
+      ->rawArg($stringFilesToCheck)
+      ->run();
+  }
+
+  public function qaMinimalPluginStandard(array $filesToCheck, $opts = ['severity' => 'all']) {
+    $severityFlag = $opts['severity'] === 'all' ? '-w' : '-n';
+
+    $task = implode(' ', [
+      'php -d memory_limit=-1',
+      './tasks/code_sniffer/vendor/bin/phpcs',
+      '--extensions=php',
+      $severityFlag,
+      '--standard=tasks/code_sniffer/vendor/wporg/plugin-directory/MinimalPluginStandard',
       '-s',
     ]);
 
@@ -799,6 +874,9 @@ class RoboFile extends \Robo\Tasks {
       ->addCode(function () use ($version) {
         $this->releaseCreatePullRequest($version);
       })
+      ->addCode(function () use ($version) {
+        $this->releaseRerunCircleWorkflow(\MailPoetTasks\Release\CircleCiController::PROJECT_PREMIUM);
+      })
       ->addCode(function () use ($version) {
         $this->translationsPrepareLanguagePacks($version);
       })
@@ -1116,6 +1194,18 @@ class RoboFile extends \Robo\Tasks {
     $this->say("Release '$version[name]' info was published on Slack.");
   }
 
+  public function releaseRerunCircleWorkflow(string $project = null) {
+    $circleciController = $this->createCircleCiController();
+    $result = $circleciController->rerunLatestWorkflow($project);
+    // Sometimes can be useful to know which Circle project workflow was restarted
+    $project = $project ? " for the project '{$project}'" : '';
+    if (!$result) {
+      $this->yell("Circle Workflow{$project} was not restarted", 40, 'red');
+    } else {
+      $this->say("Circle Workflow{$project} was started from the beginning");
+    }
+  }
+
   public function downloadWooCommerceBlocksZip($tag = null) {
     $this->createWpOrgDownloader('woo-gutenberg-products-block')
       ->downloadPluginZip('woo-gutenberg-products-block.zip', __DIR__ . '/tests/plugins/', $tag);

mailpoet/assets/css/src/components-automation-editor/_add-trigger.scss

@@ -1,4 +1,4 @@
-.mailpoet-automation-workflow-add-trigger {
+.mailpoet-automation-add-trigger {
   align-items: center;
   border: 1px dashed #c3c4c7;
   border-radius: 4px;

mailpoet/assets/css/src/components-automation-editor/_automation.scss

@@ -1,14 +1,14 @@
-.mailpoet-automation-editor-workflow {
+.mailpoet-automation-editor-automation {
   background: #fbfbfb;
   flex-grow: 1;
 }
 
-.mailpoet-automation-editor-workflow-wrapper {
+.mailpoet-automation-editor-automation-wrapper {
   display: grid;
   padding: 50px 20px;
 }
 
-.mailpoet-automation-editor-workflow-end {
+.mailpoet-automation-editor-automation-end {
   background: #8c8f94;
   border-radius: 999999px;
   fill: white;

mailpoet/assets/css/src/components-automation-editor/_empty-automation.scss

@@ -1,4 +1,4 @@
-.mailpoet-automation-editor-empty-workflow {
+.mailpoet-automation-editor-empty-automation {
   align-items: center;
   display: grid;
   height: 100%;

mailpoet/assets/css/src/components-automation-editor/_errors.scss

@@ -34,9 +34,10 @@
 .mailpoet-automation-field__error {
   position: relative;
 
-  input,
+  input:not([type='radio'])
   select,
-  textarea {
+  textarea,
+  input[type='text'].components-form-token-field__input {
     background: right top/26px no-repeat url('../../img/icons/alert.svg');
     padding-right: 26px;
   }

mailpoet/assets/css/src/components-automation-editor/_panel.scss

@@ -5,6 +5,10 @@
 .components-panel__body-title.mailpoet-automation-panel-plain-body-title {
   display: grid;
   grid-template-columns: 1fr auto;
+
+  &:hover {
+    background: none;
+  }
 }
 
 .mailpoet-automation-panel-plain-body-title-text {

mailpoet/assets/css/src/components-automation/_option-button.scss

@@ -23,3 +23,11 @@
   transform: scale(-1, -1);
   transform-origin: center 12.5px;
 }
+
+.mailpoet-option-button-opener.is-busy {
+  animation: components-button__busy-animation 2500ms infinite linear;
+  background-color: var(--wp-admin-theme-color);
+  background-image: linear-gradient(-45deg, var(--wp-admin-theme-color) 33%, var(--wp-admin-theme-color-darker-20) 33%, var(--wp-admin-theme-color-darker-20) 70%, var(--wp-admin-theme-color) 70%);
+  background-size: 100px 100%;
+  border-color: var(--wp-admin-theme-color);
+}

mailpoet/assets/css/src/components-editor/components/_forms.scss

@@ -51,4 +51,8 @@
   .mailpoet_form_field_block {
     display: block;
   }
+
+  .mailpoet_form_field_input_nowrap {
+    white-space: nowrap;
+  }
 }

mailpoet/assets/css/src/components-editor/content-blocks/_coupon.scss

@@ -0,0 +1,41 @@
+.mailpoet_coupon_block {
+  .mailpoet_editor_coupon {
+    text-align: center;
+  }
+
+  .mailpoet_editor_coupon_overlay {
+    background: rgba(255, 255, 255, .5);
+    color: #000;
+    cursor: pointer;
+    display: none;
+    font-size: 18px;
+    height: 100%;
+    position: absolute;
+    text-align: center;
+    top: 0;
+    width: 100%;
+  }
+
+  :hover {
+    .mailpoet_editor_coupon {
+      opacity: .5;
+    }
+
+    .mailpoet_editor_coupon_overlay {
+      display: block;
+    }
+  }
+}
+
+.coupon_amount_wrapper {
+  position: relative;
+}
+
+.amount_percentage_sign {
+  font-size: 18px;
+  font-weight: bold;
+  left: 150px; // .mailpoet_input_medium width
+  line-height: 30px;
+  margin-left: 10px;
+  position: absolute;
+}

mailpoet/assets/css/src/components-form-editor/_block-editor.scss

@@ -111,10 +111,29 @@ h2 {
 
 .edit-post-visual-editor {
   background-color: $color-white;
-  padding: 10px;
+  padding: 10px 10px 100px;
 }
 
 // Unify padding o wp-block-columns with background with front end rendering
 .wp-block-columns.has-background {
   padding: 10px;
 }
+
+// Close button animation
+.edit-post-header-toolbar.edit-post-header-toolbar__left > .edit-post-header-toolbar__inserter-toggle {
+  svg {
+    transition: transform cubic-bezier(.165, .84, .44, 1) .2s;
+  }
+
+  &.is-pressed svg {
+    transform: rotate(45deg);
+  }
+}
+
+// Hide block selector header with close button on desktops
+
+@include respond-to(not-small-screen) {
+  .edit-post-editor__inserter-panel-header {
+    display: none;
+  }
+}

mailpoet/assets/css/src/components-form-editor/_helpscout.scss

@@ -1,28 +0,0 @@
-// Override CSS for HelpScout beacon on form editor page
-.admin_page_mailpoet-form-editor {
-  .BeaconFabButtonFrame,
-  .BeaconContainer {
-    left: 175px;
-  }
-
-  &.folded {
-    .BeaconFabButtonFrame,
-    .BeaconContainer {
-      left: 50px;
-    }
-  }
-
-  @include respond-to(medium-screen) {
-    .BeaconFabButtonFrame,
-    .BeaconContainer {
-      left: 50px;
-    }
-  }
-
-  @include respond-to(small-screen) {
-    .BeaconFabButtonFrame,
-    .BeaconContainer {
-      left: 15px;
-    }
-  }
-}

mailpoet/assets/css/src/components-form-editor/_sidebar.scss

@@ -123,4 +123,5 @@
 // This style hides the horizontal scrollbar in Firefox browser
 .interface-interface-skeleton__sidebar {
   overflow-x: hidden;
+  padding-bottom: 100px;
 }

mailpoet/assets/css/src/components-homepage/_content-section.scss

@@ -0,0 +1,26 @@
+.mailpoet-homepage-section__container {
+  background-color: $color-white;
+  box-shadow: rgb(0 0 0 / 10%) 0 0 0 1px;
+  margin: $grid-gap-xl 0 $grid-gap-medium;
+}
+
+.mailpoet-homepage-section__heading {
+  align-items: center;
+  border-bottom: 1px solid $color-homepage-borders;
+  display: grid;
+  grid-template-columns: auto $grid-gap-medium;
+  height: 60px;
+  padding: 0 $grid-gap-medium;
+  position: relative;
+
+  h2 {
+    font-size: 20px;
+    font-weight: normal;
+    line-height: 28px;
+    margin: 0;
+  }
+
+  @include respond-to(small-screen) {
+    padding: $grid-gap-half $grid-gap-medium;
+  }
+}

mailpoet/assets/css/src/components-homepage/_layout.scss

@@ -0,0 +1,5 @@
+.mailpoet-homepage__container {
+  margin: 0 auto;
+  margin-top: $grid-gap-xl;
+  max-width: 680px;
+}

mailpoet/assets/css/src/components-homepage/_product-discovery.scss

@@ -0,0 +1,68 @@
+.mailpoet-homepage-product-discovery {
+  ul {
+    margin: 0;
+  }
+}
+
+.mailpoet-product-discovery__task {
+  align-items: center;
+  border-bottom: 1px solid $color-homepage-borders;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: grid;
+  font-weight: 600;
+  grid-template-columns: (124px + $grid-gap-medium) auto $grid-gap-xl;
+  margin: 0;
+  padding: $grid-gap-medium;
+  position: relative;
+  width: 100%;
+
+  @include respond-to(small-screen) {
+    grid-template-columns: auto $grid-gap-xl;
+
+    img {
+      display: none;
+    }
+  }
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &:hover {
+    box-shadow: inset 5px 0 0 0 var(--wp-admin-theme-color);
+  }
+}
+
+.mailpoet-product-discovery__task--completed {
+  cursor: inherit;
+
+  &:hover {
+    box-shadow: none;
+  }
+}
+
+.mailpoet-product-discovery__task-content {
+  h3 {
+    color: var(--wp-admin-theme-color);
+    font-size: 14px;
+    line-height: 20px;
+    margin: 0;
+  }
+
+  p {
+    color: $color-text-light;
+    font-weight: normal;
+    margin: 3px 0 0;
+  }
+}
+
+.mailpoet-product-discovery__task-after {
+  .mailpoet-task-list__task-icon {
+    background-color: var(--wp-admin-theme-color);
+
+    svg {
+      fill: $color-white;
+    }
+  }
+}

mailpoet/assets/css/src/components-homepage/_task-list.scss

@@ -0,0 +1,126 @@
+$task-icon-size: 32px;
+
+.mailpoet-task-list__task {
+  background-color: $color-white;
+  border-bottom: 1px solid $color-homepage-borders;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: grid;
+  font-weight: 600;
+  grid-template-columns: $grid-gap-xl auto $grid-gap-xl;
+  margin: 0;
+  padding: $grid-gap $grid-gap-medium;
+  position: relative;
+  width: 100%;
+
+  &:hover {
+    background-color: $color-grey-0;
+  }
+}
+
+.mailpoet-task-list__task-content {
+  align-content: center;
+  color: var(--wp-admin-theme-color);
+  display: flex;
+  flex-direction: column;
+  font-size: 14px;
+  justify-content: center;
+  line-height: 20px;
+
+  p {
+    color: $color-text-light;
+    font-weight: normal;
+    margin: 3px 0 0;
+  }
+
+  a {
+    color: var(--wp-admin-theme-color);
+
+    &:hover {
+      color: var(--wp-admin-theme-color-darker-20);
+    }
+  }
+}
+
+.mailpoet-task-list__task-before {
+  color: var(--wp-admin-theme-color);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.mailpoet-task-list__task-icon {
+  border: 1px solid var(--wp-admin-theme-color);
+  border-radius: 50%;
+  box-sizing: border-box;
+  height: $task-icon-size;
+  line-height: $task-icon-size;
+  text-align: center;
+  width: $task-icon-size;
+
+  svg {
+    fill: var(--wp-admin-theme-color);
+    margin: 3px;
+  }
+}
+
+.mailpoet-task-list__task--completed {
+  cursor: inherit;
+
+  &:hover {
+    background-color: $color-white;
+  }
+
+  .mailpoet-task-list__task-icon {
+    background-color: var(--wp-admin-theme-color);
+
+    svg {
+      fill: $color-white;
+    }
+  }
+}
+
+.mailpoet-task-list__task--active {
+  box-shadow: inset 5px 0 0 0 var(--wp-admin-theme-color);
+
+  &:after {
+    background-color: var(--wp-admin-theme-color);
+    content: '';
+    height: 100%;
+    left: 0;
+    opacity: .1;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}
+
+.mailpoet-task-list__heading p,
+.mailpoet-task-list__all-set {
+  color: $color-text-light;
+  font-size: $heading-font-size-h4;
+  line-height: 1.5;
+  margin-top: $grid-gap-large;
+  text-align: center;
+}
+
+.mailpoet-task-list__heading {
+  margin-bottom: $grid-gap-large;
+  position: relative;
+
+  h1 {
+    margin: 0;
+  }
+
+  p {
+    margin-top: $grid-gap-half;
+    text-align: left;
+  }
+
+  .components-dropdown {
+    position: absolute;
+    right: 0;
+    top: 6px;
+  }
+}

mailpoet/assets/css/src/components-plugin/_common.scss

@@ -122,3 +122,21 @@ body .components-modal__screen-overlay {
   justify-content: flex-end;
   margin-top: $grid-gap-half;
 }
+
+.mailpoet-locked-badge {
+  align-items: center;
+  background: #fcf9e8;
+  border: .5px solid #f5e6ab;
+  border-radius: 4px;
+  color: #bd8600;
+  display: flex;
+  font-size: 11px;
+  font-weight: 500;
+  gap: 4px;
+  height: 20px;
+  letter-spacing: .2px;
+  line-height: 16px;
+  padding: 2px 8px 2px 4px;
+  text-transform: uppercase;
+  width: 82px;
+}

mailpoet/assets/css/src/components-plugin/_landingpage.scss

@@ -0,0 +1,196 @@
+#mailpoet_landingpage_container {
+  $content-padding: 32px 65px;
+  $mobile-content-padding: 25px;
+
+  .mailpoet-content-center {
+    text-align: center;
+  }
+
+  .mailpoet-content-padding {
+    padding: $content-padding;
+
+    @include respond-to(small-screen) {
+      padding: $mobile-content-padding
+    }
+  }
+
+  .landing-header {
+    padding: $content-padding;
+
+    @include respond-to(small-screen) {
+      padding: $mobile-content-padding
+    }
+  }
+
+  .landing-footer {
+    background-color: $color-landingpage-background-light;
+    padding: $content-padding;
+
+    .landing-footer-content {
+      box-shadow: 0 -1px 0 0 $color-tertiary-light;
+      padding: 25px 0;
+    }
+  }
+
+  .landing-faq {
+    background-color: $color-landingpage-background-light;
+    padding: $content-padding;
+
+    .mailpoet-faq-accordion {
+      margin: 25px 0;
+    }
+
+    .landing-faq-mobile {
+      display: none;
+    }
+
+    @include respond-to(small-screen) {
+      padding: $mobile-content-padding;
+
+      .landing-faq-header {
+        display: none;
+      }
+
+      .landing-faq-mobile {
+        display: block;
+      }
+    }
+  }
+
+  .landing-content {
+    .hero-section {
+      $hero-image-offset: 6rem;
+      background-color: $color-landingpage-background-light;
+      margin-top: $hero-image-offset;
+      padding: $content-padding;
+
+      .hero-image {
+        margin-top: -($hero-image-offset + 2rem);
+      }
+
+      @include respond-to(small-screen) {
+        padding: $mobile-content-padding
+      }
+    }
+
+    .landingpage-images {
+      @include respond-to(medium-screen) {
+        width: 100%;
+      }
+    }
+
+    .landingpage-general-features {
+      p:last-child {
+        margin: 10px auto;
+        width: 60%;
+      }
+
+      .landingpage-feature-icon {
+        display: block;
+        margin: 0 auto;
+        padding: 20px;
+        text-align: center;
+      }
+
+      @include respond-to(medium-screen) {
+        p:last-child {
+          width: 100%;
+        }
+      }
+    }
+
+    .landingpage-wooCommerce-features {
+      margin-top: 30px;
+      padding: 2rem 10rem;
+
+      .landingpage-wooCommerce-feature-item {
+        padding: 30px;
+
+        @media screen and (min-width: 960px) and (max-width: 1460px) {
+          .landingpage-images {
+            width: 100%;
+          }
+        }
+
+        div:last-child {
+          margin: auto;
+        }
+      }
+
+      @include respond-to(small-screen) {
+        padding: $mobile-content-padding;
+
+        .landingpage-wooCommerce-feature-item {
+          padding: 25px 0;
+
+          div:last-child {
+            text-align: center;
+          }
+        }
+      }
+    }
+  }
+}
+
+.mailpoet-faq-accordion {
+  details {
+    overflow: hidden;
+
+    &:not(:first-child) {
+      border-top: 1px solid $color-editor-border-structure;
+    }
+
+    summary {
+      cursor: pointer;
+      padding: 20px 5px;
+      position: relative;
+
+      &::-webkit-details-marker {   // remove default marker
+        content: '';
+        display: none;
+      }
+
+      &::marker {                   // remove default marker
+        content: '';
+        display: none;
+      }
+
+      &:after {
+        content: '›';
+        font-size: 30px;
+        position: absolute;
+        right: 20px;
+        top: 0;
+        transform: rotate(90deg);
+        transform-origin: center;
+        transition: .2s transform ease;
+      }
+
+      @include respond-to(small-screen) {
+        &:after {
+          right: -1px;
+        }
+      }
+    }
+
+    .content {
+      max-height: 0;
+      overflow: hidden;
+      padding: 10px 5px;
+      transition: max-height .3s ease;
+    }
+
+    // when accordion is opened
+    &[open] {
+      summary:after {
+        transform: rotate(-90deg);
+        transition: .5s transform ease;
+      }
+
+      .content {
+        max-height: 400px;
+        transition: max-height .5s ease-in;
+      }
+    }
+  }
+}

mailpoet/assets/css/src/components-plugin/_menu.scss

@@ -4,6 +4,6 @@
 }
 
 // Fix for 3rd party plugins icons in menu that might display broken because we block loading 3rd party CSS on mailepoet pages
-#adminmenu .wp-menu-image img {
+#adminmenu :not(.toplevel_page_site-card) .wp-menu-image img {
   max-width: 20px;
 }

mailpoet/assets/css/src/components-plugin/_stats.scss

@@ -119,6 +119,10 @@
   color: $color-stats-average;
 }
 
+.mailpoet-statistics-value-number-critical {
+  color: $color-stats-critical;
+}
+
 .mailpoet-statistics-value-number-excellent {
   color: $color-stats-excellent;
 }

mailpoet/assets/css/src/components-plugin/_welcome-wizard.scss

@@ -22,6 +22,12 @@
   }
 }
 
+#mailpoet-wizard-container {
+  .mailpoet-top-bar {
+    left: 0;
+  }
+}
+
 .mailpoet-wizard-logo {
   margin-bottom: 100px;
   text-align: center;
@@ -35,6 +41,7 @@
   align-items: center;
   display: flex;
   justify-content: center;
+  margin-top: 8px;
 
   @include respond-to(medium-screen) {
     flex-direction: column;
@@ -42,7 +49,7 @@
 }
 
 .mailpoet-wizard-step-illustration {
-  margin-right: $grid-gap;
+  margin-right: $grid-gap-xl;
   max-width: $grid-column;
   text-align: center;
   width: 100%;
@@ -63,12 +70,16 @@
 }
 
 .mailpoet-wizard-step-content {
-  max-width: $grid-column-small + $grid-gap + $grid-column;
+  max-width: 480px;
   width: 100%;
 
   @include respond-to(medium-screen) {
     max-width: $grid-column;
   }
+
+  .mailpoet-button {
+    height: 36px;
+  }
 }
 
 .mailpoet-wizard-label {
@@ -111,12 +122,16 @@
 
 .mailpoet-wizard-woocommerce-option {
   align-items: center;
-  box-shadow: 0 -1px 0 0 $color-tertiary-light;
+  box-shadow: 0 1px 0 0 $color-tertiary-light;
   display: flex;
   flex-direction: row-reverse;
   justify-content: space-between;
   padding-bottom: 25px;
   padding-top: 1px;
+
+  &:last-child {
+    box-shadow: 0 0;
+  }
 }
 
 .mailpoet-wizard-note {

mailpoet/assets/css/src/components-public/captcha.scss

@@ -0,0 +1,12 @@
+.mailpoet_captcha_form {
+  .mailpoet_icon_button {
+    background: transparent;
+    border: 0;
+    cursor: pointer;
+
+    img {
+      height: 20px;
+      width: 20px;
+    }
+  }
+}

mailpoet/assets/css/src/components/_modal.scss

@@ -112,3 +112,11 @@
   max-width: 100%;
   width: 100%;
 }
+
+.authorize-sender-email-and-domain-modal {
+  z-index: 30; // overlay other modals
+}
+
+.authorize-sender-email-and-domain-modal-overlay {
+  z-index: $modal-screen-overlay-z-index + 4; // overlay other modals
+}

mailpoet/assets/css/src/components/_tags.scss

@@ -41,6 +41,15 @@
   }
 }
 
+.mailpoet-tag-critical {
+  border-color: $color-stats-critical;
+  color: $color-stats-critical;
+
+  &.mailpoet-tag-inverted {
+    background: $color-stats-critical;
+  }
+}
+
 .mailpoet-tag-good {
   border-color: $color-stats-good;
   color: $color-stats-good;

mailpoet/assets/css/src/components/_top_bar.scss

@@ -29,7 +29,6 @@ $beamer-dot-size: 8px;
   }
 
   .mailpoet-top-bar-logo {
-    cursor: pointer;
     position: relative;
     top: 2px;
     z-index: 1;
@@ -39,6 +38,10 @@ $beamer-dot-size: 8px;
       max-width: 100%;
     }
   }
+
+  a.mailpoet-top-bar-logo {
+    cursor: pointer;
+  }
 }
 
 .mailpoet-top-bar-logo-desktop {

mailpoet/assets/css/src/mailpoet-automation-editor.scss

@@ -11,17 +11,17 @@
 
 @import './components-automation-editor/add-step-button';
 @import './components-automation-editor/add-trigger';
+@import './components-automation-editor/automation';
 @import './components-automation-editor/block-icon';
 @import './components-automation-editor/chip';
 @import './components-automation-editor/dropdown';
-@import './components-automation-editor/empty-workflow';
+@import './components-automation-editor/empty-automation';
 @import './components-automation-editor/errors';
 @import './components-automation-editor/panel';
 @import './components-automation-editor/separator';
 @import './components-automation-editor/status';
 @import './components-automation-editor/step';
 @import './components-automation-editor/step-card';
-@import './components-automation-editor/workflow';
 @import './components-automation-editor/notices';
 @import './components-automation-editor/deactivate-modal';
 

mailpoet/assets/css/src/mailpoet-automation-templates.scss

@@ -17,17 +17,30 @@ ul.mailpoet-automation-templates {
 
 .mailpoet-automation-template-list-item {
   button.components-button {
+    align-content: baseline;
+    align-items: flex-start;
     background: #fff;
     border: 1px solid #dcdcde;
     border-radius: 4px;
     cursor: pointer;
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-rows: 40px auto auto;
     height: 100%;
     padding: 24px 24px 26px;
     text-align: left;
     width: 100%;
 
+    &:disabled,
+    &[aria-disabled='true'] {
+      color: #787c82;
+      cursor: not-allowed;
+      opacity: 1;
+
+      h2 {
+        color: #787c82;
+      }
+    }
+
     &:hover {
       background: #fff;
       border: 1px solid #dcdcde;
@@ -49,7 +62,6 @@ ul.mailpoet-automation-templates {
   h2 {
     background: transparent;
     border: none;
-    color: #2271b1;
     font-size: 14px;
     font-weight: 600;
     line-height: 21px;
@@ -78,4 +90,27 @@ ul.mailpoet-automation-templates {
       fill: #dcdcde;
     }
   }
+
+  .badge {
+    text-align: right;
+    transform: translateX(24px);
+
+    span {
+      padding: 3px 8px;
+    }
+  }
+}
+
+.mailpoet-automation-template-list-item-coming-soon {
+  .badge span {
+    background: #ffe9cc;
+    color: #1d2327;
+  }
+}
+
+.mailpoet-automation-template-list-item-premium {
+  .badge span {
+    background: #ff5301;
+    color: #fff;
+  }
 }

mailpoet/assets/css/src/mailpoet-editor.scss

@@ -53,6 +53,7 @@
 @import 'components-editor/content-blocks/unknown_block_fallback';
 @import 'components-editor/content-blocks/woocommerce-heading';
 @import 'components-editor/content-blocks/woocommerce-content';
+@import 'components-editor/content-blocks/coupon';
 
 // Utilities
 // Helpers and overrides.

mailpoet/assets/css/src/mailpoet-form-editor.scss

@@ -34,7 +34,6 @@
 @import './components-form-editor/custom-field';
 @import './components-form-editor/form-title';
 @import './components-form-editor/header';
-@import './components-form-editor/helpscout';
 @import './components-form-editor/form-placement';
 @import './components-form-editor/preview';
 @import './components-form-editor/block-editor';

mailpoet/assets/css/src/mailpoet-homepage.scss

@@ -0,0 +1,23 @@
+
+@import '../../../node_modules/@woocommerce/components/build-style/style'; // Needed to load WP admin themes color variables
+
+// Settings
+// Global variables, config switches. Not producing any CSS.
+
+@import 'settings/breakpoints';
+@import 'settings/colors';
+@import 'settings/grid';
+@import 'settings/typography';
+
+// Tools
+// Default mixins and functions. Still not producing any CSS.
+
+@import 'mixins/breakpoints';
+
+// Components
+// Actual UI components.
+
+@import 'components-homepage/_layout';
+@import 'components-homepage/_task-list';
+@import 'components-homepage/_content-section';
+@import 'components-homepage/_product-discovery';

mailpoet/assets/css/src/mailpoet-plugin.scss

@@ -85,3 +85,4 @@
 @import 'components-plugin/set-from-address-modal';
 @import 'components-plugin/stats';
 @import 'components-plugin/import-export';
+@import 'components-plugin/landingpage';

mailpoet/assets/css/src/mailpoet-public.scss

@@ -19,3 +19,4 @@
 @import 'components-public/public';
 @import 'components-public/animation';
 @import 'components-public/form_colors';
+@import 'components-public/captcha';

mailpoet/assets/css/src/settings/_breakpoints.scss

@@ -1,3 +1,3 @@
 // WordPress breakpoints
-$mailpoet-breakpoint-small: 782px;
+$mailpoet-breakpoint-small: 781px;
 $mailpoet-breakpoint-medium: 960px;

mailpoet/assets/css/src/settings/_colors.scss

@@ -69,6 +69,7 @@ $color-badge-video-guide: #46b450;
 $color-stats-average: #f559c3;
 $color-stats-good: #ff9f00;
 $color-stats-excellent: #7ed321;
+$color-stats-critical: #f00;
 $color-stats-unknown: $color-primary-inactive;
 
 // Automation editor
@@ -78,3 +79,9 @@ $color-chip-success-bg: #b8e6bf;
 $color-chip-success-text: #005c12;
 $color-chip-danger-bg: #facfd2;
 $color-chip-danger-text: #8a2424;
+
+// Landing page
+$color-landingpage-background-light: #fbfbfb;
+
+// Homepage
+$color-homepage-borders: #e0e0e0;

mailpoet/assets/img/icons/controls-volumeon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect x="0" fill="none" width="20" height="20"/><g><path d="M2 7h4l5-4v14l-5-4H2V7zm12.69-2.46C14.82 4.59 18 5.92 18 10s-3.18 5.41-3.31 5.46c-.06.03-.13.04-.19.04-.2 0-.39-.12-.46-.31-.11-.26.02-.55.27-.65.11-.05 2.69-1.15 2.69-4.54 0-3.41-2.66-4.53-2.69-4.54-.25-.1-.38-.39-.27-.65.1-.25.39-.38.65-.27zM16 10c0 2.57-2.23 3.43-2.32 3.47-.06.02-.12.03-.18.03-.2 0-.39-.12-.47-.32-.1-.26.04-.55.29-.65.07-.02 1.68-.67 1.68-2.53s-1.61-2.51-1.68-2.53c-.25-.1-.38-.39-.29-.65.1-.25.39-.39.65-.29.09.04 2.32.9 2.32 3.47z"/></g></svg>

mailpoet/assets/img/icons/image-rotate.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><rect x="0" fill="none" width="20" height="20"/><g><path d="M10.25 1.02c5.1 0 8.75 4.04 8.75 9s-3.65 9-8.75 9c-3.2 0-6.02-1.59-7.68-3.99l2.59-1.52c1.1 1.5 2.86 2.51 4.84 2.51 3.3 0 6-2.79 6-6s-2.7-6-6-6c-1.97 0-3.72 1-4.82 2.49L7 8.02l-6 2v-7L2.89 4.6c1.69-2.17 4.36-3.58 7.36-3.58z"/></g></svg>

mailpoet/assets/js/src/analytics_event.js

@@ -18,7 +18,7 @@ import _ from 'underscore';
  */
 var eventsCache = [];
 
-function track(name, data = []) {
+function track(name, data = [], options = {}, callback = null) {
   let trackedData = data;
 
   if (typeof window.mixpanel.track !== 'function') {
@@ -33,7 +33,7 @@ function track(name, data = []) {
     trackedData['MailPoet Premium version'] = window.mailpoet_premium_version;
   }
 
-  window.mixpanel.track(name, trackedData);
+  window.mixpanel.track(name, trackedData, options, callback);
 }
 
 function exportMixpanel() {
@@ -45,24 +45,37 @@ function exportMixpanel() {
   ) {
     window.MailPoet.trackEvent = track;
   } else {
-    window.MailPoet.trackEvent = function emptyFunction() {};
+    window.MailPoet.trackEvent = function emptyFunction(
+      name,
+      data,
+      options,
+      callback,
+    ) {
+      if (typeof callback === 'function') {
+        callback();
+      }
+    };
   }
 }
 
 function trackCachedEvents() {
   eventsCache.forEach(function trackIfEnabled(event) {
     if (window.mailpoet_analytics_enabled || event.forced) {
-      track(event.name, event.data);
+      track(event.name, event.data, event.options);
     }
   });
 }
 
-function cacheEvent(forced, name, data) {
+function cacheEvent(forced, name, data, options, callback) {
   eventsCache.push({
     name: name,
     data: data,
+    options: options,
     forced: forced,
   });
+  if (typeof callback === 'function') {
+    callback();
+  }
 }
 
 function initializeMixpanelWhenLoaded() {

mailpoet/assets/js/src/automation/api/hooks.ts

@@ -1,81 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { api } from '../config';
-
-const API_URL = `${api.root}/mailpoet/v1/automation`;
-
-export const request = (
-  path: string,
-  init?: RequestInit,
-): ReturnType<typeof fetch> => fetch(`${API_URL}/${path}`, init);
-
-type Error<T> = {
-  response?: Response;
-  data?: T;
-};
-
-type State<T> = {
-  data?: T;
-  loading: boolean;
-  error?: Error<T>;
-};
-
-type Result<T> = [(init?: RequestInit) => Promise<void>, State<T>];
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type Data = Record<string, any>;
-
-export const useMutation = <T extends Data>(
-  path: string,
-  config?: RequestInit,
-): Result<T> => {
-  const [state, setState] = useState<State<T>>({
-    data: undefined,
-    loading: false,
-    error: undefined,
-  });
-
-  const mutation = useCallback(
-    async (init?: RequestInit) => {
-      setState((prevState) => ({ ...prevState, loading: true }));
-      const response = await request(path, {
-        ...config,
-        ...init,
-        headers: {
-          'content-type': 'application/json',
-          ...(init?.headers ?? {}),
-          'x-wp-nonce': api.nonce,
-        },
-      });
-
-      try {
-        const data = await response.json();
-        const error = response.ok ? null : { ...response, data };
-        setState((prevState) => ({ ...prevState, data, error }));
-      } catch (_) {
-        const error = { response };
-        setState((prevState) => ({ ...prevState, error }));
-      } finally {
-        setState((prevState) => ({ ...prevState, loading: false }));
-      }
-    },
-    [config, path],
-  );
-
-  return [mutation, state];
-};
-
-export const useQuery = <T extends Data>(
-  path: string,
-  init?: RequestInit,
-): State<T> => {
-  const [mutation, result] = useMutation<T>(path, init);
-
-  useEffect(
-    () => {
-      void mutation();
-    },
-    [] /* eslint-disable-line react-hooks/exhaustive-deps -- request only on initial load */,
-  );
-
-  return result;
-};

mailpoet/assets/js/src/automation/api/index.ts

@@ -1,9 +1,7 @@
 import apiFetch from '@wordpress/api-fetch';
 import { api } from '../config';
 
-export * from './hooks';
-
-const apiUrl = `${api.root}/mailpoet/v1/automation/`;
+const apiUrl = `${api.root}/mailpoet/v1/`;
 
 export type ApiError = {
   code?: string;

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

@@ -1,24 +1,33 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter } from 'react-router-dom';
 import { TopBarWithBeamer } from 'common/top_bar/top_bar';
 import { Popover, SlotFillProvider } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
-import { initializeApi, useMutation } from './api';
+import { initializeApi } from './api';
 import { registerTranslations } from './i18n';
 import { createStore, storeName } from './listing/store';
 import { AutomationListing, AutomationListingHeader } from './listing';
 import { registerApiErrorHandler } from './listing/api-error-handler';
 import { Notices } from './listing/components/notices';
-import { WorkflowListingNotices } from './listing/workflow-listing-notices';
 import { BuildYourOwnSection, HeroSection, TemplatesSection } from './sections';
-import {
-  CreateEmptyWorkflowButton,
-  CreateWorkflowFromTemplateButton,
-} from './testing';
+import { MailPoet } from '../mailpoet';
+
+const trackOpenEvent = () => {
+  MailPoet.trackEvent('Automations > Listing viewed');
+};
 
 function Content(): JSX.Element {
-  const count = useSelect((select) => select(storeName).getWorkflowCount());
+  const [isBooting, setIsBooting] = useState(true);
+  const count = useSelect((select) => select(storeName).getAutomationCount());
+
+  useEffect(() => {
+    if (!isBooting || count === 0) {
+      return;
+    }
+    trackOpenEvent();
+    setIsBooting(false);
+  }, [isBooting, count]);
   const content =
     count > 0 ? (
       <>
@@ -49,7 +58,7 @@ function Content(): JSX.Element {
   );
 }
 
-function Workflows(): JSX.Element {
+function Automations(): JSX.Element {
   return (
     <>
       <TopBarWithBeamer />
@@ -59,79 +68,12 @@ function Workflows(): JSX.Element {
   );
 }
 
-function RecreateSchemaButton(): JSX.Element {
-  const [createSchema, { loading, error }] = useMutation('system/database', {
-    method: 'POST',
-  });
-
-  return (
-    <div>
-      <WorkflowListingNotices />
-      <button
-        className="button button-link-delete"
-        type="button"
-        onClick={() => createSchema()}
-        disabled={loading}
-      >
-        Recreate DB schema (data will be lost)
-      </button>
-      {error && (
-        <div>{error?.data?.message ?? 'An unknown error occurred'}</div>
-      )}
-    </div>
-  );
-}
-
-function DeleteSchemaButton(): JSX.Element {
-  const [deleteSchema, { loading, error }] = useMutation('system/database', {
-    method: 'DELETE',
-  });
-
-  return (
-    <div>
-      <button
-        className="button button-link-delete"
-        type="button"
-        onClick={async () => {
-          await deleteSchema();
-          window.location.href =
-            '/wp-admin/admin.php?page=mailpoet-experimental';
-        }}
-        disabled={loading}
-      >
-        Delete DB schema & deactivate feature
-      </button>
-      {error && (
-        <div>{error?.data?.message ?? 'An unknown error occurred'}</div>
-      )}
-    </div>
-  );
-}
-
 function App(): JSX.Element {
   return (
     <SlotFillProvider>
       <BrowserRouter>
-        <div>
-          <Workflows />
-          <div style={{ marginTop: 30, display: 'grid', gridGap: 8 }}>
-            <CreateEmptyWorkflowButton />
-            <CreateWorkflowFromTemplateButton slug="simple-welcome-email">
-              Create testing workflow from template (welcome email)
-            </CreateWorkflowFromTemplateButton>
-            <CreateWorkflowFromTemplateButton slug="welcome-email-sequence">
-              Create testing workflow from template (welcome sequence, only
-              premium)
-            </CreateWorkflowFromTemplateButton>
-            <CreateWorkflowFromTemplateButton slug="advanced-welcome-email-sequence">
-              Create testing workflow from template (advanced welcome sequence,
-              only premium)
-            </CreateWorkflowFromTemplateButton>
-            <RecreateSchemaButton />
-            <DeleteSchemaButton />
-          </div>
-          <Popover.Slot />
-        </div>
+        <Automations />
+        <Popover.Slot />
       </BrowserRouter>
     </SlotFillProvider>
   );

mailpoet/assets/js/src/automation/components/option-button/index.tsx

@@ -1,3 +1,4 @@
+import { Dispatch, SetStateAction, useState } from 'react';
 import { Button, DropdownMenu } from '@wordpress/components';
 import { chevronDown } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
@@ -8,7 +9,7 @@ type OptionButtonPropType = {
   variant: Button.ButtonVariant;
   controls: StepMoreControlsType;
   title: string;
-  onClick: () => void;
+  onClick: (setIsBusy: Dispatch<SetStateAction<boolean>>) => void;
 };
 export function OptionButton({
   controls,
@@ -16,13 +17,22 @@ export function OptionButton({
   onClick,
   variant,
 }: OptionButtonPropType): JSX.Element {
+  const [isBusy, setIsBusy] = useState(false);
   const slots = Object.values(controls).filter((item) => item.slot);
+  const dropDownMenuClassNames = isBusy
+    ? `mailpoet-option-button-opener is-busy`
+    : `mailpoet-option-button-opener`;
   return (
     <div className="mailpoet-option-button">
       <Button
+        isBusy={isBusy}
+        disabled={isBusy}
         variant={variant}
         className="mailpoet-option-button-main"
-        onClick={onClick}
+        onClick={() => {
+          setIsBusy(true);
+          onClick(setIsBusy);
+        }}
       >
         {title}
       </Button>
@@ -32,10 +42,20 @@ export function OptionButton({
         ))}
       {Object.values(controls).length > 0 && (
         <DropdownMenu
-          className="mailpoet-option-button-opener"
+          className={dropDownMenuClassNames}
           label={__('More', 'mailpoet')}
           icon={chevronDown}
-          controls={Object.values(controls).map((item) => item.control)}
+          controls={Object.values(controls).map((item) => {
+            const control = {
+              ...item.control,
+              onClick: () => {
+                setIsBusy(true);
+                item.control.onClick(setIsBusy);
+              },
+            };
+
+            return control;
+          })}
           popoverProps={{ position: 'bottom left' }}
         />
       )}

mailpoet/assets/js/src/automation/components/statistics/index.tsx

@@ -1,4 +1,5 @@
 import { Fragment } from '@wordpress/element';
+import { locale } from '../../config';
 
 type Item = {
   key: string;
@@ -15,7 +16,7 @@ export function Statistics({
   items,
   labelPosition = 'before',
 }: Props): JSX.Element {
-  const intl = new Intl.NumberFormat();
+  const intl = new Intl.NumberFormat(locale.toString());
   return (
     <div className="mailpoet-automation-stats">
       {items.map((item, i) => (

mailpoet/assets/js/src/automation/config.ts

@@ -4,9 +4,29 @@ declare global {
       root: string;
       nonce: string;
     };
-    mailpoet_workflow_count: number;
+    mailpoet_locale_full: string;
+    mailpoet_automation_count: number;
   }
 }
 
 export const api = window.mailpoet_automation_api;
-export const workflowCount = window.mailpoet_workflow_count;
+export const automationCount = window.mailpoet_automation_count;
+
+// export locale to use with Intl APIs
+export const locale: Intl.Locale = (() => {
+  const tag = (
+    window.mailpoet_locale_full ??
+    document.documentElement.lang ??
+    'en'
+  ).replace('_', '-');
+
+  try {
+    return new Intl.Locale(tag);
+  } catch (_) {
+    try {
+      return new Intl.Locale(tag.split('-')[0]);
+    } catch (__) {
+      return new Intl.Locale('en');
+    }
+  }
+})();

mailpoet/assets/js/src/automation/editor/api-error-handler.tsx

@@ -19,7 +19,7 @@ export const registerApiErrorHandler = (): void =>
         const status = errorObject.data?.status;
         const code = errorObject.code;
 
-        if (code === 'mailpoet_automation_workflow_not_valid') {
+        if (code === 'mailpoet_automation_not_valid') {
           dispatch(storeName).setErrors({ steps: errorObject.data.errors });
           return undefined;
         }

mailpoet/assets/js/src/automation/editor/components/actions/trash-button.tsx

@@ -9,9 +9,9 @@ import { storeName } from '../../store';
 
 export function TrashButton(): JSX.Element {
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
-  const { workflow } = useSelect(
+  const { automation } = useSelect(
     (select) => ({
-      workflow: select(storeName).getWorkflowData(),
+      automation: select(storeName).getAutomationData(),
     }),
     [],
   );
@@ -33,7 +33,7 @@ export function TrashButton(): JSX.Element {
       >
         {sprintf(
           __('You are about to delete the automation "%s".', 'mailpoet'),
-          workflow.name,
+          automation.name,
         )}
         <br />
         {__(' This will stop it for all subscribers immediately.', 'mailpoet')}

mailpoet/assets/js/src/automation/editor/components/automation/add-step-button.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { __unstableCompositeItem as CompositeItem } from '@wordpress/components';
 import { Icon, plus } from '@wordpress/icons';
-import { WorkflowCompositeContext } from './context';
+import { AutomationCompositeContext } from './context';
 
 type Props = {
   onClick?: (element: HTMLButtonElement) => void;
@@ -9,7 +9,7 @@ type Props = {
 };
 
 export function AddStepButton({ onClick, previousStepId }: Props): JSX.Element {
-  const compositeState = useContext(WorkflowCompositeContext);
+  const compositeState = useContext(AutomationCompositeContext);
   return (
     <CompositeItem
       state={compositeState}

mailpoet/assets/js/src/automation/editor/components/automation/add-trigger.tsx

@@ -3,7 +3,7 @@ import { __unstableCompositeItem as CompositeItem } from '@wordpress/components'
 import { Icon, plus } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useDispatch } from '@wordpress/data';
-import { WorkflowCompositeContext } from './context';
+import { AutomationCompositeContext } from './context';
 import { Step } from './types';
 import { storeName } from '../../store';
 
@@ -12,14 +12,14 @@ type Props = {
 };
 
 export function AddTrigger({ step }: Props): JSX.Element {
-  const compositeState = useContext(WorkflowCompositeContext);
+  const compositeState = useContext(AutomationCompositeContext);
   const { setInserterPopover } = useDispatch(storeName);
 
   return (
     <CompositeItem
       state={compositeState}
       role="treeitem"
-      className="mailpoet-automation-workflow-add-trigger"
+      className="mailpoet-automation-add-trigger"
       data-previous-step-id={step.id}
       focusable
       onClick={(event) => {

mailpoet/assets/js/src/automation/editor/components/automation/context.tsx

@@ -1,5 +1,5 @@
 import { __unstableUseCompositeState as useCompositeState } from '@wordpress/components';
 import { createContext } from '@wordpress/element';
 
-export const WorkflowCompositeContext =
+export const AutomationCompositeContext =
   createContext<ReturnType<typeof useCompositeState>>(undefined);

mailpoet/assets/js/src/automation/editor/components/automation/empty-automation.tsx

@@ -0,0 +1,9 @@
+import { __ } from '@wordpress/i18n';
+
+export function EmptyAutomation(): JSX.Element {
+  return (
+    <div className="mailpoet-automation-editor-empty-automation">
+      {__('No automation data.', 'mailpoet')}
+    </div>
+  );
+}

mailpoet/assets/js/src/automation/editor/components/automation/index.tsx

@@ -7,8 +7,8 @@ import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { Icon, check } from '@wordpress/icons';
 import { Hooks } from 'wp-js-hooks';
-import { WorkflowCompositeContext } from './context';
-import { EmptyWorkflow } from './empty-workflow';
+import { AutomationCompositeContext } from './context';
+import { EmptyAutomation } from './empty-automation';
 import { Separator } from './separator';
 import { Step } from './step';
 import { Step as StepData } from './types';
@@ -21,10 +21,10 @@ import {
   RenderStepType,
 } from '../../../types/filters';
 
-export function Workflow(): JSX.Element {
-  const { workflowData, selectedStep } = useSelect(
+export function Automation(): JSX.Element {
+  const { automationData, selectedStep } = useSelect(
     (select) => ({
-      workflowData: select(storeName).getWorkflowData(),
+      automationData: select(storeName).getAutomationData(),
       selectedStep: select(storeName).getSelectedStep(),
     }),
     [],
@@ -36,9 +36,9 @@ export function Workflow(): JSX.Element {
     shift: true,
   });
 
-  const stepMap = workflowData?.steps ?? undefined;
+  const stepMap = automationData?.steps ?? undefined;
 
-  // serialize steps (for now, we support only one trigger and linear workflows)
+  // serialize steps (for now, we support only one trigger and linear automations)
   const steps = useMemo(() => {
     const stepArray = [stepMap.root];
 
@@ -56,7 +56,7 @@ export function Workflow(): JSX.Element {
   const renderStep = useMemo(
     (): RenderStepType =>
       Hooks.applyFilters(
-        'mailpoet.automation.workflow.render_step',
+        'mailpoet.automation.render_step',
         (stepData: StepData) =>
           stepData.type === 'root' ? (
             <AddTrigger step={stepData} />
@@ -73,7 +73,7 @@ export function Workflow(): JSX.Element {
   const renderSeparator = useMemo(
     (): RenderStepSeparatorType =>
       Hooks.applyFilters(
-        'mailpoet.automation.workflow.render_step_separator',
+        'mailpoet.automation.render_step_separator',
         (previousStepData: StepData) => (
           <Separator previousStepId={previousStepData.id} />
         ),
@@ -81,20 +81,20 @@ export function Workflow(): JSX.Element {
     [],
   );
 
-  if (!workflowData) {
-    return <EmptyWorkflow />;
+  if (!automationData) {
+    return <EmptyAutomation />;
   }
 
   return (
-    <WorkflowCompositeContext.Provider value={compositeState}>
+    <AutomationCompositeContext.Provider value={compositeState}>
       <Composite
         state={compositeState}
         role="tree"
         aria-label={__('Automation', 'mailpoet')}
         aria-orientation="vertical"
-        className="mailpoet-automation-editor-workflow"
+        className="mailpoet-automation-editor-automation"
       >
-        <div className="mailpoet-automation-editor-workflow-wrapper">
+        <div className="mailpoet-automation-editor-automation-wrapper">
           <Statistics />
           {stepMap.root.next_steps.length === 0 ? (
             <>
@@ -119,13 +119,13 @@ export function Workflow(): JSX.Element {
             </Fragment>
           ))}
           <Icon
-            className="mailpoet-automation-editor-workflow-end"
+            className="mailpoet-automation-editor-automation-end"
             icon={check}
           />
           <div />
         </div>
         <InserterPopover />
       </Composite>
-    </WorkflowCompositeContext.Provider>
+    </AutomationCompositeContext.Provider>
   );
 }

mailpoet/assets/js/src/automation/editor/components/automation/statistics.tsx

@@ -4,9 +4,9 @@ import { storeName } from '../../store';
 import { Statistics as BaseStatistics } from '../../../components/statistics';
 
 export function Statistics(): JSX.Element {
-  const { workflow } = useSelect(
+  const { automation } = useSelect(
     (select) => ({
-      workflow: select(storeName).getWorkflowData(),
+      automation: select(storeName).getAutomationData(),
     }),
     [],
   );
@@ -19,19 +19,19 @@ export function Statistics(): JSX.Element {
             key: 'entered',
             // translators: Total number of subscribers who entered an automation
             label: _x('Total Entered', 'automation stats', 'mailpoet'),
-            value: workflow.stats.totals.entered,
+            value: automation.stats.totals.entered,
           },
           {
             key: 'processing',
             // translators: Total number of subscribers who are being processed in an automation
             label: _x('Total Processing', 'automation stats', 'mailpoet'),
-            value: workflow.stats.totals.in_progress,
+            value: automation.stats.totals.in_progress,
           },
           {
             key: 'exited',
             // translators: Total number of subscribers who exited an automation, no matter the result
             label: _x('Total Exited', 'automation stats', 'mailpoet'),
-            value: workflow.stats.totals.exited,
+            value: automation.stats.totals.exited,
           },
         ]}
       />

mailpoet/assets/js/src/automation/editor/components/automation/step-more-menu.tsx

@@ -1,12 +1,10 @@
 import { useState, Fragment } from 'react';
 import { DropdownMenu } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
 import { moreVertical, trash } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { Hooks } from 'wp-js-hooks';
 import { PremiumModal } from 'common/premium_modal';
 import { Step as StepData } from './types';
-import { storeName } from '../../store';
 import { StepMoreControlsType } from '../../../types/filters';
 
 type Props = {
@@ -14,16 +12,10 @@ type Props = {
 };
 
 export function StepMoreMenu({ step }: Props): JSX.Element {
-  const { stepType } = useSelect(
-    (select) => ({
-      stepType: select(storeName).getStepType(step.key),
-    }),
-    [step],
-  );
   const [showModal, setShowModal] = useState(false);
 
   const moreControls: StepMoreControlsType = Hooks.applyFilters(
-    'mailpoet.automation.workflow.step.more-controls',
+    'mailpoet.automation.step.more-controls',
     {
       delete: {
         key: 'delete',
@@ -53,7 +45,6 @@ export function StepMoreMenu({ step }: Props): JSX.Element {
       },
     },
     step,
-    stepType,
   );
 
   const slots = Object.values(moreControls).filter(

mailpoet/assets/js/src/automation/editor/components/automation/step.tsx

@@ -4,7 +4,7 @@ import { __unstableCompositeItem as CompositeItem } from '@wordpress/components'
 import { useDispatch, useRegistry, useSelect } from '@wordpress/data';
 import { blockMeta } from '@wordpress/icons';
 import { __, _x } from '@wordpress/i18n';
-import { WorkflowCompositeContext } from './context';
+import { AutomationCompositeContext } from './context';
 import { StepMoreMenu } from './step-more-menu';
 import { Step as StepData } from './types';
 import { Chip } from '../chip';
@@ -48,7 +48,7 @@ export function Step({ step, isSelected }: Props): JSX.Element {
     [step],
   );
   const { openSidebar, selectStep } = useDispatch(storeName);
-  const compositeState = useContext(WorkflowCompositeContext);
+  const compositeState = useContext(AutomationCompositeContext);
   const { batch } = useRegistry();
 
   const compositeItemId = `step-${step.id}`;

mailpoet/assets/js/src/automation/editor/components/automation/types.ts

@@ -1,4 +1,4 @@
-import { WorkflowStatus } from '../../../listing/workflow';
+import { AutomationStatus } from '../../../listing/automation';
 
 export type NextStep = {
   id: string;
@@ -12,10 +12,10 @@ export type Step = {
   next_steps: NextStep[];
 };
 
-export type Workflow = {
+export type Automation = {
   id: number;
   name: string;
-  status: WorkflowStatus;
+  status: AutomationStatus;
   created_at: string;
   updated_at: string;
   activated_at: string;

mailpoet/assets/js/src/automation/editor/components/header/document_actions.tsx

@@ -10,7 +10,7 @@ import { useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { chevronDown } from '@wordpress/icons';
 import { storeName } from '../../store';
-import { WorkflowStatus } from '../../../listing/workflow';
+import { AutomationStatus } from '../../../listing/automation';
 
 // See: https://github.com/WordPress/gutenberg/blob/eff0cab2b3181c004dbd15398e570ecec28a3726/packages/edit-site/src/components/header/document-actions/index.js
 
@@ -21,11 +21,11 @@ const Dropdown: ComponentType<
   }
 > = WpDropdown;
 
-export function DocumentActions({ children }): JSX.Element {
-  const { workflowName, workflowStatus, showIconLabels } = useSelect(
+function DocumentActions({ children }): JSX.Element {
+  const { automationName, automationStatus, showIconLabels } = useSelect(
     (select) => ({
-      workflowName: select(storeName).getWorkflowData().name,
-      workflowStatus: select(storeName).getWorkflowData().status,
+      automationName: select(storeName).getAutomationData().name,
+      automationStatus: select(storeName).getAutomationData().status,
       showIconLabels: select(storeName).isFeatureActive('showIconLabels'),
     }),
     [],
@@ -36,9 +36,9 @@ export function DocumentActions({ children }): JSX.Element {
   const titleRef = useRef();
 
   let chipClass = 'mailpoet-automation-editor-chip-gray';
-  if (workflowStatus === WorkflowStatus.ACTIVE) {
+  if (automationStatus === AutomationStatus.ACTIVE) {
     chipClass = 'mailpoet-automation-editor-chip-success';
-  } else if (workflowStatus === WorkflowStatus.DEACTIVATING) {
+  } else if (automationStatus === AutomationStatus.DEACTIVATING) {
     chipClass = 'mailpoet-automation-editor-chip-danger';
   }
 
@@ -66,18 +66,18 @@ export function DocumentActions({ children }): JSX.Element {
                     <VisuallyHidden as="span">
                       {__('Editing automation:', 'mailpoet')}
                     </VisuallyHidden>
-                    {workflowName}
+                    {automationName}
                   </Text>
 
                   <Text
                     size="body"
                     className={`edit-site-document-actions__secondary-item ${chipClass}`}
                   >
-                    {workflowStatus === WorkflowStatus.ACTIVE &&
+                    {automationStatus === AutomationStatus.ACTIVE &&
                       __('Active', 'mailpoet')}
-                    {workflowStatus === WorkflowStatus.DEACTIVATING &&
+                    {automationStatus === AutomationStatus.DEACTIVATING &&
                       __('Deactivating', 'mailpoet')}
-                    {workflowStatus === WorkflowStatus.DRAFT &&
+                    {automationStatus === AutomationStatus.DRAFT &&
                       __('Draft', 'mailpoet')}
                   </Text>
                 </a>
@@ -101,3 +101,6 @@ export function DocumentActions({ children }): JSX.Element {
     </div>
   );
 }
+
+DocumentActions.displayName = 'DocumentActions';
+export { DocumentActions };

mailpoet/assets/js/src/automation/editor/components/header/errors.tsx

@@ -9,6 +9,7 @@ import {
 import { useDispatch, useSelect } from '@wordpress/data';
 import { createContext } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { ErrorBoundary } from 'common';
 import { Chip } from '../chip';
 import { ColoredIcon } from '../icons';
 import {
@@ -35,17 +36,17 @@ type StepErrorProps = {
 function StepError({ stepId }: StepErrorProps): JSX.Element {
   const compositeState = useContext(ErrorsCompositeContext);
 
-  const { steps, workflowData } = useSelect(
+  const { steps, automationData } = useSelect(
     (select) => ({
       steps: select(storeName).getSteps(),
-      workflowData: select(storeName).getWorkflowData(),
+      automationData: select(storeName).getAutomationData(),
     }),
     [],
   );
 
   const { openSidebar, selectStep } = useDispatch(storeName);
 
-  const stepData = workflowData.steps[stepId];
+  const stepData = automationData.steps[stepId];
   const step = steps.find(({ key }) => key === stepData.key);
 
   return (
@@ -70,6 +71,8 @@ function StepError({ stepId }: StepErrorProps): JSX.Element {
   );
 }
 
+StepError.displayName = 'StepError';
+
 export function Errors(): JSX.Element | null {
   const [showPopover, setShowPopover] = useState(false);
 
@@ -78,10 +81,10 @@ export function Errors(): JSX.Element | null {
     shift: true,
   });
 
-  const { errors, workflowData } = useSelect(
+  const { errors, automationData } = useSelect(
     (select) => ({
       errors: select(storeName).getErrors(),
-      workflowData: select(storeName).getWorkflowData(),
+      automationData: select(storeName).getAutomationData(),
     }),
     [],
   );
@@ -93,18 +96,18 @@ export function Errors(): JSX.Element | null {
     }
 
     const visited = new Map<string, StepErrorType | undefined>();
-    const ids = workflowData.steps.root.next_steps.map(({ id }) => id);
+    const ids = automationData.steps.root.next_steps.map(({ id }) => id);
     while (ids.length > 0) {
       const id = ids.shift();
       if (!visited.has(id)) {
         visited.set(id, errors.steps[id]);
-        workflowData.steps[id]?.next_steps?.forEach((step) =>
+        automationData.steps[id]?.next_steps?.forEach((step) =>
           ids.push(step.id),
         );
       }
     }
     return [...visited.values()].filter((error) => !!error);
-  }, [errors, workflowData]);
+  }, [errors, automationData]);
 
   // automatically open the popover when errors appear
   const hasErrors = stepErrors.length > 0;
@@ -160,9 +163,11 @@ export function Errors(): JSX.Element | null {
                   __('The following steps are not fully set:', 'mailpoet')
                 }
               </div>
-              {stepErrors.map((error) => (
-                <StepError key={error.step_id} stepId={error.step_id} />
-              ))}
+              <ErrorBoundary>
+                {stepErrors.map((error) => (
+                  <StepError key={error.step_id} stepId={error.step_id} />
+                ))}
+              </ErrorBoundary>
             </Composite>
           </ErrorsCompositeContext.Provider>
         </Popover>

mailpoet/assets/js/src/automation/editor/components/header/index.tsx

@@ -8,12 +8,13 @@ import {
 import { dispatch, useDispatch, useSelect } from '@wordpress/data';
 import { PinnedItems } from '@wordpress/interface';
 import { __ } from '@wordpress/i18n';
+import { ErrorBoundary } from 'common';
 import { DocumentActions } from './document_actions';
 import { Errors } from './errors';
 import { InserterToggle } from './inserter_toggle';
 import { MoreMenu } from './more_menu';
 import { storeName } from '../../store';
-import { WorkflowStatus } from '../../../listing/workflow';
+import { AutomationStatus } from '../../../listing/automation';
 import {
   DeactivateImmediatelyModal,
   DeactivateModal,
@@ -23,22 +24,23 @@ import {
 //   https://github.com/WordPress/gutenberg/blob/9601a33e30ba41bac98579c8d822af63dd961488/packages/edit-post/src/components/header/index.js
 //   https://github.com/WordPress/gutenberg/blob/0ee78b1bbe9c6f3e6df99f3b967132fa12bef77d/packages/edit-site/src/components/header/index.js
 
-function ActivateButton({ onClick, label }): JSX.Element {
+function ActivateButton({ label }): JSX.Element {
   const { errors, isDeactivating } = useSelect(
     (select) => ({
       errors: select(storeName).getErrors(),
       isDeactivating:
-        select(storeName).getWorkflowData().status ===
-        WorkflowStatus.DEACTIVATING,
+        select(storeName).getAutomationData().status ===
+        AutomationStatus.DEACTIVATING,
     }),
     [],
   );
+  const { openActivationPanel } = useDispatch(storeName);
 
   const button = (
     <Button
       variant="primary"
       className="editor-post-publish-button"
-      onClick={onClick}
+      onClick={openActivationPanel}
       disabled={isDeactivating || !!errors}
     >
       {label}
@@ -53,7 +55,7 @@ function ActivateButton({ onClick, label }): JSX.Element {
         // The following error seems to be a mismatch. It claims the 'delay' prop does not exist, but it does.
         delay={0}
         text={__(
-          'Editing an active workflow is temporarily unavailable. We are working on introducing this functionality.',
+          'Editing an active automation is temporarily unavailable. We are working on introducing this functionality.',
           'mailpoet',
         )}
       >
@@ -68,14 +70,14 @@ function ActivateButton({ onClick, label }): JSX.Element {
 function UpdateButton(): JSX.Element {
   const { save } = useDispatch(storeName);
 
-  const { workflow } = useSelect(
+  const { automation } = useSelect(
     (select) => ({
-      workflow: select(storeName).getWorkflowData(),
+      automation: select(storeName).getAutomationData(),
     }),
     [],
   );
 
-  if (workflow.stats.totals.in_progress === 0) {
+  if (automation.stats.totals.in_progress === 0) {
     return (
       <Button
         variant="primary"
@@ -93,7 +95,7 @@ function UpdateButton(): JSX.Element {
       // The following error seems to be a mismatch. It claims the 'delay' prop does not exist, but it does.
       delay={0}
       text={__(
-        'Editing an active workflow is temporarily unavailable. We are working on introducing this functionality.',
+        'Editing an active automation is temporarily unavailable. We are working on introducing this functionality.',
         'mailpoet',
       )}
     >
@@ -125,7 +127,7 @@ function DeactivateButton(): JSX.Element {
   const { hasUsersInProgress } = useSelect(
     (select) => ({
       hasUsersInProgress:
-        select(storeName).getWorkflowData().stats.totals.in_progress > 0,
+        select(storeName).getAutomationData().stats.totals.in_progress > 0,
     }),
     [],
   );
@@ -165,7 +167,7 @@ function DeactivateNowButton(): JSX.Element {
   const { hasUsersInProgress } = useSelect(
     (select) => ({
       hasUsersInProgress:
-        select(storeName).getWorkflowData().stats.totals.in_progress > 0,
+        select(storeName).getAutomationData().stats.totals.in_progress > 0,
     }),
     [],
   );
@@ -201,18 +203,14 @@ function DeactivateNowButton(): JSX.Element {
 
 type Props = {
   showInserterToggle: boolean;
-  toggleActivatePanel: () => void;
 };
 
-export function Header({
-  showInserterToggle,
-  toggleActivatePanel,
-}: Props): JSX.Element {
-  const { setWorkflowName } = useDispatch(storeName);
-  const { workflowName, workflowStatus } = useSelect(
+export function Header({ showInserterToggle }: Props): JSX.Element {
+  const { setAutomationName } = useDispatch(storeName);
+  const { automationName, automationStatus } = useSelect(
     (select) => ({
-      workflowName: select(storeName).getWorkflowData().name,
-      workflowStatus: select(storeName).getWorkflowData().status,
+      automationName: select(storeName).getAutomationData().name,
+      automationStatus: select(storeName).getAutomationData().status,
     }),
     [],
   );
@@ -230,50 +228,48 @@ export function Header({
       </div>
 
       <div className="edit-site-header_center">
-        <DocumentActions>
-          {() => (
-            <div className="mailpoet-automation-editor-dropdown-name-edit">
-              <div className="mailpoet-automation-editor-dropdown-name-edit-title">
-                {__('Automation name', 'mailpoet')}
+        <ErrorBoundary>
+          <DocumentActions>
+            {() => (
+              <div className="mailpoet-automation-editor-dropdown-name-edit">
+                <div className="mailpoet-automation-editor-dropdown-name-edit-title">
+                  {__('Automation name', 'mailpoet')}
+                </div>
+                <TextControl
+                  value={automationName}
+                  onChange={(newName) => setAutomationName(newName)}
+                  help={__(
+                    `Give the automation a name that indicates its purpose. E.g. "Abandoned cart recovery"`,
+                    'mailpoet',
+                  )}
+                />
               </div>
-              <TextControl
-                value={workflowName}
-                onChange={(newName) => setWorkflowName(newName)}
-                help={__(
-                  `Give the automation a name that indicates its purpose. E.g. "Abandoned cart recovery"`,
-                  'mailpoet',
-                )}
-              />
-            </div>
-          )}
-        </DocumentActions>
+            )}
+          </DocumentActions>
+        </ErrorBoundary>
       </div>
 
       <div className="edit-site-header_end">
         <div className="edit-site-header__actions">
-          <Errors />
-          {workflowStatus === WorkflowStatus.DRAFT && (
+          <ErrorBoundary>
+            <Errors />
+          </ErrorBoundary>
+          {automationStatus === AutomationStatus.DRAFT && (
             <>
               <SaveDraftButton />
-              <ActivateButton
-                onClick={toggleActivatePanel}
-                label={__('Activate', 'mailpoet')}
-              />
+              <ActivateButton label={__('Activate', 'mailpoet')} />
             </>
           )}
-          {workflowStatus === WorkflowStatus.ACTIVE && (
+          {automationStatus === AutomationStatus.ACTIVE && (
             <>
               <DeactivateButton />
               <UpdateButton />
             </>
           )}
-          {workflowStatus === WorkflowStatus.DEACTIVATING && (
+          {automationStatus === AutomationStatus.DEACTIVATING && (
             <>
               <DeactivateNowButton />
-              <ActivateButton
-                onClick={toggleActivatePanel}
-                label={__('Update & Activate', 'mailpoet')}
-              />
+              <ActivateButton label={__('Update & Activate', 'mailpoet')} />
             </>
           )}
           <PinnedItems.Slot scope={storeName} />

mailpoet/assets/js/src/automation/editor/components/index.ts

@@ -0,0 +1,2 @@
+export * from './panel';
+export * from './form-token-field';