Release 4.6.0

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

[MAILPOET-5038]

.circleci/config.yml

@@ -312,6 +312,7 @@ jobs:
     working_directory: /home/circleci/mailpoet/mailpoet
     machine:
       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: |
@@ -477,8 +484,11 @@ jobs:
     working_directory: /home/circleci/mailpoet/mailpoet
     machine:
       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,6 +511,12 @@ jobs:
       multisite:
         type: integer
         default: 0
+      mysql_command:
+        type: string
+        default: ''
+      mysql_image:
+        type: string
+        default: ''
     steps:
       - attach_workspace:
           at: /home/circleci
@@ -508,6 +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
+      - 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: |
@@ -618,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
@@ -646,28 +668,10 @@ workflows:
             - static_analysis_php8
             - qa_js
             - qa_php
-      - acceptance_tests:
-          <<: *slack-fail-post-step
-          name: acceptance_tests_woo_cot_off
-          group: woo
-          requires:
-            - unit_tests
-            - static_analysis_php8
-            - qa_js
-            - qa_php
       - js_tests:
           <<: *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
@@ -728,15 +732,13 @@ 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_off
             - acceptance_tests_woo_cot_no_sync
 
   nightly:
@@ -766,8 +768,8 @@ workflows:
           woo_subscriptions_version: 4.3.0
           woo_memberships_version: 1.21.0
           woo_blocks_version: 6.8.0
-          mysql_command: --max_allowed_packet=100M
-          mysql_image_version: 5.7.36
+          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:
@@ -792,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',
     ]);
 

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/_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/_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-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

@@ -79,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/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_locale_full: string;
     mailpoet_automation_count: number;
   }
 }
 
 export const api = window.mailpoet_automation_api;
 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/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,12 +12,6 @@ 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(
@@ -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/header/document_actions.tsx

@@ -21,7 +21,7 @@ const Dropdown: ComponentType<
   }
 > = WpDropdown;
 
-export function DocumentActions({ children }): JSX.Element {
+function DocumentActions({ children }): JSX.Element {
   const { automationName, automationStatus, showIconLabels } = useSelect(
     (select) => ({
       automationName: select(storeName).getAutomationData().name,
@@ -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 {
@@ -70,6 +71,8 @@ function StepError({ stepId }: StepErrorProps): JSX.Element {
   );
 }
 
+StepError.displayName = 'StepError';
+
 export function Errors(): JSX.Element | null {
   const [showPopover, setShowPopover] = useState(false);
 
@@ -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,6 +8,7 @@ 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';
@@ -227,28 +228,32 @@ export function Header({ showInserterToggle }: Props): JSX.Element {
       </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={automationName}
-                onChange={(newName) => setAutomationName(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 />
+          <ErrorBoundary>
+            <Errors />
+          </ErrorBoundary>
           {automationStatus === AutomationStatus.DRAFT && (
             <>
               <SaveDraftButton />

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

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

mailpoet/assets/js/src/automation/editor/components/inserter-popover/index.tsx

@@ -45,7 +45,7 @@ export function InserterPopover(): JSX.Element | null {
           }
         }}
       >
-        <Inserter onInsert={onInsert} />
+        <Inserter onInsert={onInsert} showInserterHelpPanel={false} />
       </Popover>
 
       {showModal && (

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

@@ -20,134 +20,139 @@ const filterItems = (value: string, item: Item[]): Item[] =>
 
 type Props = {
   onInsert?: (item: Item) => void;
+  showInserterHelpPanel?: boolean;
 };
 
-export const Inserter = forwardRef(({ onInsert }: Props, ref): JSX.Element => {
-  const [filterValue, setFilterValue] = useState('');
-  const [hoveredItem, setHoveredItem] = useState(null);
+export const Inserter = forwardRef(
+  ({ onInsert, showInserterHelpPanel = true }: Props, ref): JSX.Element => {
+    const [filterValue, setFilterValue] = useState('');
+    const [hoveredItem, setHoveredItem] = useState(null);
 
-  const { steps, type } = useSelect(
-    (select) => ({
-      steps: select(storeName).getSteps(),
-      type: select(storeName).getInserterPopover().type,
-    }),
-    [],
-  );
+    const { steps, type } = useSelect(
+      (select) => ({
+        steps: select(storeName).getSteps(),
+        type: select(storeName).getInserterPopover().type,
+      }),
+      [],
+    );
 
-  const groups: Group[] = useMemo(
-    () =>
-      type === 'triggers'
-        ? [
-            {
-              type: 'triggers',
-              title: undefined,
-              // translators: Label for a list of automation steps of type trigger
-              label: _x('Triggers', 'automation steps', 'mailpoet'),
-              items: steps.filter(({ group }) => group === 'triggers'),
-            },
-          ]
-        : [
-            {
-              type: 'actions',
-              // translators: Label for a list of automation steps of type action
-              title: _x('Actions', 'automation steps', 'mailpoet'),
-              // translators: Label for a list of automation steps of type action
-              label: _x('Actions', 'automation steps', 'mailpoet'),
-              items: steps.filter(({ group }) => group === 'actions'),
-            },
-            {
-              type: 'logical',
-              // translators: Label for a list of logical automation steps (if/else, etc.)
-              title: _x('Logical', 'automation steps', 'mailpoet'),
-              // translators: Label for a list of logical automation steps (if/else, etc.)
-              label: _x('Logical', 'automation steps', 'mailpoet'),
-              items: steps.filter(({ group }) => group === 'logical'),
-            },
-          ],
-    [steps, type],
-  );
+    const groups: Group[] = useMemo(
+      () =>
+        type === 'triggers'
+          ? [
+              {
+                type: 'triggers',
+                title: undefined,
+                // translators: Label for a list of automation steps of type trigger
+                label: _x('Triggers', 'automation steps', 'mailpoet'),
+                items: steps.filter(({ group }) => group === 'triggers'),
+              },
+            ]
+          : [
+              {
+                type: 'actions',
+                // translators: Label for a list of automation steps of type action
+                title: _x('Actions', 'automation steps', 'mailpoet'),
+                // translators: Label for a list of automation steps of type action
+                label: _x('Actions', 'automation steps', 'mailpoet'),
+                items: steps.filter(({ group }) => group === 'actions'),
+              },
+              {
+                type: 'logical',
+                // translators: Label for a list of logical automation steps (if/else, etc.)
+                title: _x('Logical', 'automation steps', 'mailpoet'),
+                // translators: Label for a list of logical automation steps (if/else, etc.)
+                label: _x('Logical', 'automation steps', 'mailpoet'),
+                items: steps.filter(({ group }) => group === 'logical'),
+              },
+            ],
+      [steps, type],
+    );
 
-  const onHover = useCallback(
-    (item) => {
-      setHoveredItem(item);
-    },
-    [setHoveredItem],
-  );
+    const onHover = useCallback(
+      (item) => {
+        setHoveredItem(item);
+      },
+      [setHoveredItem],
+    );
 
-  const searchRef = useRef<HTMLInputElement>();
-  useImperativeHandle(ref, () => ({
-    focusSearch: () => {
-      searchRef.current?.focus();
-    },
-  }));
+    const searchRef = useRef<HTMLInputElement>();
+    useImperativeHandle(ref, () => ({
+      focusSearch: () => {
+        searchRef.current?.focus();
+      },
+    }));
 
-  const filteredGroups = useMemo(
-    () =>
-      groups.map((group) => ({
-        ...group,
-        items: filterItems(filterValue, group.items),
-      })),
-    [filterValue, groups],
-  );
+    const filteredGroups = useMemo(
+      () =>
+        groups.map((group) => ({
+          ...group,
+          items: filterItems(filterValue, group.items),
+        })),
+      [filterValue, groups],
+    );
 
-  return (
-    <div className="block-editor-inserter__menu">
-      <div className="block-editor-inserter__main-area">
-        <div className="block-editor-inserter__content">
-          <SearchControl
-            className="block-editor-inserter__search"
-            onChange={(value: string) => {
-              if (hoveredItem) setHoveredItem(null);
-              setFilterValue(value);
-            }}
-            value={filterValue}
-            label={__('Search for automation steps', 'mailpoet')}
-            placeholder={__('Search', 'mailpoet')}
-            ref={searchRef}
-          />
+    return (
+      <div className="block-editor-inserter__menu">
+        <div className="block-editor-inserter__main-area">
+          <div className="block-editor-inserter__content">
+            <SearchControl
+              className="block-editor-inserter__search"
+              onChange={(value: string) => {
+                if (hoveredItem) setHoveredItem(null);
+                setFilterValue(value);
+              }}
+              value={filterValue}
+              label={__('Search for automation steps', 'mailpoet')}
+              placeholder={__('Search', 'mailpoet')}
+              ref={searchRef}
+            />
 
-          <div className="block-editor-inserter__block-list">
-            <InserterListbox>
-              {filteredGroups.map(
-                (group) =>
-                  group.items.length > 0 && (
-                    <Fragment key={group.type}>
-                      {group.title && (
-                        <div className="block-editor-inserter__panel-header">
-                          <h2 className="block-editor-inserter__panel-title">
-                            <div>{group.title}</div>
-                          </h2>
+            <div className="block-editor-inserter__block-list">
+              <InserterListbox>
+                {filteredGroups.map(
+                  (group) =>
+                    group.items.length > 0 && (
+                      <Fragment key={group.type}>
+                        {group.title && (
+                          <div className="block-editor-inserter__panel-header">
+                            <h2 className="block-editor-inserter__panel-title">
+                              <div>{group.title}</div>
+                            </h2>
+                          </div>
+                        )}
+                        <div className="block-editor-inserter__panel-content">
+                          <StepList
+                            items={group.items}
+                            onHover={onHover}
+                            onSelect={(item: Item) => onInsert(item)}
+                            label={group.label}
+                          />
                         </div>
-                      )}
-                      <div className="block-editor-inserter__panel-content">
-                        <StepList
-                          items={group.items}
-                          onHover={onHover}
-                          onSelect={(item: Item) => onInsert(item)}
-                          label={group.label}
-                        />
-                      </div>
-                    </Fragment>
-                  ),
-              )}
+                      </Fragment>
+                    ),
+                )}
 
-              {filteredGroups.reduce(
-                (sum, { items }) => sum + items.length,
-                0,
-              ) === 0 && (
-                <div className="block-editor-inserter__no-results">
-                  <Icon
-                    className="block-editor-inserter__no-results-icon"
-                    icon={blockDefault}
-                  />
-                  <p>{__('No results found.', 'mailpoet')}</p>
-                </div>
-              )}
-            </InserterListbox>
+                {filteredGroups.reduce(
+                  (sum, { items }) => sum + items.length,
+                  0,
+                ) === 0 && (
+                  <div className="block-editor-inserter__no-results">
+                    <Icon
+                      className="block-editor-inserter__no-results-icon"
+                      icon={blockDefault}
+                    />
+                    <p>{__('No results found.', 'mailpoet')}</p>
+                  </div>
+                )}
+              </InserterListbox>
+            </div>
           </div>
         </div>
+        {showInserterHelpPanel && hoveredItem && (
+          <StepInfoPanel item={hoveredItem} />
+        )}
       </div>
-      {hoveredItem && <StepInfoPanel item={hoveredItem} />}
-    </div>
-  );
-});
+    );
+  },
+);

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

@@ -3,6 +3,7 @@ import { useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
 import { storeName } from '../../../store';
 import { TrashButton } from '../../actions/trash-button';
+import { locale } from '../../../../config';
 
 export function AutomationSidebar(): JSX.Element {
   const { automationData } = useSelect(
@@ -23,7 +24,7 @@ export function AutomationSidebar(): JSX.Element {
       <PanelRow>
         <strong>Date added</strong>{' '}
         {new Date(Date.parse(automationData.created_at)).toLocaleDateString(
-          undefined,
+          locale.toString(),
           dateOptions,
         )}
       </PanelRow>
@@ -31,13 +32,13 @@ export function AutomationSidebar(): JSX.Element {
         <strong>Activated</strong>{' '}
         {automationData.status === 'active' &&
           new Date(Date.parse(automationData.updated_at)).toLocaleDateString(
-            undefined,
+            locale.toString(),
             dateOptions,
           )}
         {automationData.status !== 'active' &&
           automationData.activated_at &&
           new Date(Date.parse(automationData.activated_at)).toLocaleDateString(
-            undefined,
+            locale.toString(),
             dateOptions,
           )}
         {automationData.status !== 'active' && !automationData.activated_at && (

mailpoet/assets/js/src/automation/editor/store/initial_state.ts

@@ -3,6 +3,7 @@ import { AutomationEditorWindow, State } from './types';
 declare let window: AutomationEditorWindow;
 
 export const getInitialState = (): State => ({
+  registry: { ...window.mailpoet_automation_registry },
   context: { ...window.mailpoet_automation_context },
   stepTypes: {},
   automationData: { ...window.mailpoet_automation },

mailpoet/assets/js/src/automation/editor/store/register_step_type.ts

@@ -1,7 +1,10 @@
 import { dispatch } from '@wordpress/data';
+import { Hooks } from 'wp-js-hooks';
 import { storeName } from './constants';
 import { StepType } from './types';
 
 export const registerStepType = (stepType: StepType): void => {
-  dispatch(storeName).registerStepType(stepType);
+  dispatch(storeName).registerStepType(
+    Hooks.applyFilters('mailpoet.automation.register_step_type', stepType),
+  );
 };

mailpoet/assets/js/src/automation/editor/store/selectors.ts

@@ -2,7 +2,14 @@ import { createRegistrySelector } from '@wordpress/data';
 import { store as interfaceStore } from '@wordpress/interface';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { storeName } from './constants';
-import { Context, Errors, Feature, State, StepErrors, StepType } from './types';
+import {
+  Registry,
+  Errors,
+  Feature,
+  State,
+  StepErrors,
+  StepType,
+} from './types';
 import { Item } from '../components/inserter/item';
 import { Step, Automation } from '../components/automation/types';
 
@@ -25,15 +32,22 @@ export function isActivationPanelOpened(state: State): boolean {
   return state.activationPanel.isOpened;
 }
 
-export function getContext(state: State): Context {
-  return state.context;
+export function getRegistry(state: State): Registry {
+  return state.registry;
 }
 
-export function getContextStep(
+export function getRegistryStep(
   state: State,
   key: string,
-): Context['steps'][number] | undefined {
-  return state.context.steps[key];
+): Registry['steps'][number] | undefined {
+  return state.registry.steps[key];
+}
+
+export function getContext<T = unknown>(
+  state: State,
+  key: string,
+): T | undefined {
+  return state.context[key] as T | undefined;
 }
 
 export function getSteps(state: State): StepType[] {

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

@@ -2,11 +2,12 @@ import { ComponentType } from 'react';
 import { Step, Automation } from '../components/automation/types';
 
 export interface AutomationEditorWindow extends Window {
+  mailpoet_automation_registry: Registry;
   mailpoet_automation_context: Context;
   mailpoet_automation: Automation;
 }
 
-export type Context = {
+export type Registry = {
   steps: Record<
     string,
     {
@@ -20,6 +21,8 @@ export type Context = {
   >;
 };
 
+export type Context = Record<string, unknown>;
+
 export type StepGroup = 'actions' | 'logical' | 'triggers';
 
 export type StepType = {
@@ -46,6 +49,7 @@ export type Errors = {
 };
 
 export type State = {
+  registry: Registry;
   context: Context;
   stepTypes: Record<string, StepType>;
   automationData: Automation;

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

@@ -1,3 +1,4 @@
 // exports for extensibility
 export { id } from './id';
+export * as config from './config';
 export * as EditorStore from './editor/store';

mailpoet/assets/js/src/automation/integrations/core/steps/delay/index.tsx

@@ -19,7 +19,7 @@ export const step: StepType = {
   foreground: '#7F54B3',
   background: '#f7edf7',
   description: __(
-    'Wait some time before proceeding with the steps below',
+    'Wait some time before proceeding with the steps below.',
     'mailpoet',
   ),
   subtitle: (data): string => {

mailpoet/assets/js/src/automation/integrations/mailpoet/context.ts

@@ -0,0 +1,14 @@
+import { select } from '@wordpress/data';
+import { FormTokenItem } from '../../editor/components';
+import { storeName } from '../../editor/store';
+
+type Segment = FormTokenItem & {
+  type: string;
+};
+
+export type Context = {
+  segments?: Segment[];
+};
+
+export const getContext = (): Context =>
+  select(storeName).getContext('mailpoet') as Context;

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

@@ -2,11 +2,21 @@ import { registerStepType } from '../../editor/store';
 import { step as SendEmailStep } from './steps/send_email';
 import { step as SomeoneSubscribesTrigger } from './steps/someone-subscribes';
 import { step as WpUserRegisteredTrigger } from './steps/wp-user-registered';
+import { step as AddTagsAction } from './steps/add_tags';
+import { step as RemoveTagsAction } from './steps/remove_tags';
+import { step as AddToListStep } from './steps/add_to_list';
+import { step as RemoveFromListStep } from './steps/remove_from_list';
+import { step as UpdateSubscriberStep } from './steps/update-subscriber';
 import { registerStepControls } from './step-controls';
 
 export const initialize = (): void => {
   registerStepType(SendEmailStep);
   registerStepType(WpUserRegisteredTrigger);
   registerStepType(SomeoneSubscribesTrigger);
+  registerStepType(AddTagsAction);
+  registerStepType(RemoveTagsAction);
+  registerStepType(AddToListStep);
+  registerStepType(RemoveFromListStep);
+  registerStepType(UpdateSubscriberStep);
   registerStepControls();
 };

mailpoet/assets/js/src/automation/integrations/mailpoet/step-controls/index.tsx

@@ -2,7 +2,6 @@ import { __ } from '@wordpress/i18n';
 import { chartBar } from '@wordpress/icons';
 import { Hooks } from 'wp-js-hooks';
 import { MoreControlType, StepMoreControlsType } from '../../../types/filters';
-import { StepType } from '../../../editor/store';
 import { Step } from '../../../editor/components/automation/types';
 
 const emailStatisticsControl = (step: Step): MoreControlType => {
@@ -30,12 +29,8 @@ export function registerStepControls() {
   Hooks.addFilter(
     'mailpoet.automation.step.more-controls',
     'mailpoet',
-    (
-      controls: StepMoreControlsType,
-      step: Step,
-      stepType: StepType,
-    ): StepMoreControlsType => {
-      if (stepType.key === 'mailpoet:send-email') {
+    (controls: StepMoreControlsType, step: Step): StepMoreControlsType => {
+      if (step.key === 'mailpoet:send-email') {
         return {
           statistics: emailStatisticsControl(step),
           ...controls,

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

@@ -0,0 +1,28 @@
+import { __ } from '@wordpress/i18n';
+import { tag } from '@wordpress/icons';
+import { StepType } from '../../../../editor/store';
+import { LockedBadge } from '../../../../../common/premium_modal/locked_badge';
+import { PremiumModalForStepEdit } from '../../../../../common/premium_modal';
+
+export const step: StepType = {
+  key: 'mailpoet:add-tag',
+  group: 'actions',
+  title: __('Add tag', 'mailpoet'),
+  description: __('Add a tag or multiple tags to a subscriber.', 'mailpoet'),
+  subtitle: () => <LockedBadge text={__('Premium', 'mailpoet')} />,
+  foreground: '#00A32A',
+  background: '#EDFAEF',
+  icon: () => (
+    <div style={{ width: '100%', height: '100%', scale: '1.4' }}>{tag}</div>
+  ),
+  edit: () => (
+    <PremiumModalForStepEdit
+      tracking={{
+        utm_medium: 'upsell_modal',
+        utm_campaign: 'create_automation_editor_add_tag',
+      }}
+    >
+      {__('Adding tags is a premium feature.', 'mailpoet')}
+    </PremiumModalForStepEdit>
+  ),
+} as const;

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

@@ -0,0 +1,28 @@
+import { __ } from '@wordpress/i18n';
+import { list } from '@wordpress/icons';
+import { StepType } from '../../../../editor/store/types';
+import { PremiumModalForStepEdit } from '../../../../../common/premium_modal';
+import { LockedBadge } from '../../../../../common/premium_modal/locked_badge';
+
+export const step: StepType = {
+  key: 'mailpoet:add-to-list',
+  group: 'actions',
+  title: __('Add to list', 'mailpoet'),
+  description: __('Add a subscriber to a list.', 'mailpoet'),
+  subtitle: () => <LockedBadge text={__('Premium', 'mailpoet')} />,
+  foreground: '#00A32A',
+  background: '#EDFAEF',
+  icon: () => (
+    <div style={{ width: '100%', height: '100%', scale: '1.12' }}>{list}</div>
+  ),
+  edit: () => (
+    <PremiumModalForStepEdit
+      tracking={{
+        utm_medium: 'upsell_modal',
+        utm_campaign: 'create_automation_editor_add_to_list',
+      }}
+    >
+      {__('Adding subscribers to lists is a premium feature.', 'mailpoet')}
+    </PremiumModalForStepEdit>
+  ),
+} as const;

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

@@ -0,0 +1,28 @@
+import { __ } from '@wordpress/i18n';
+import { list } from '@wordpress/icons';
+import { StepType } from '../../../../editor/store/types';
+import { PremiumModalForStepEdit } from '../../../../../common/premium_modal';
+import { LockedBadge } from '../../../../../common/premium_modal/locked_badge';
+
+export const step: StepType = {
+  key: 'mailpoet:remove-from-list',
+  group: 'actions',
+  title: __('Remove from list', 'mailpoet'),
+  description: __('Remove a subscriber from a list.', 'mailpoet'),
+  subtitle: () => <LockedBadge text={__('Premium', 'mailpoet')} />,
+  foreground: '#00A32A',
+  background: '#EDFAEF',
+  icon: () => (
+    <div style={{ width: '100%', height: '100%', scale: '1.12' }}>{list}</div>
+  ),
+  edit: () => (
+    <PremiumModalForStepEdit
+      tracking={{
+        utm_medium: 'upsell_modal',
+        utm_campaign: 'create_automation_editor_remove_from_list',
+      }}
+    >
+      {__('Removing subscribers from lists is a premium feature.', 'mailpoet')}
+    </PremiumModalForStepEdit>
+  ),
+} as const;

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

@@ -0,0 +1,31 @@
+import { __ } from '@wordpress/i18n';
+import { tag } from '@wordpress/icons';
+import { StepType } from '../../../../editor/store';
+import { LockedBadge } from '../../../../../common/premium_modal/locked_badge';
+import { PremiumModalForStepEdit } from '../../../../../common/premium_modal';
+
+export const step: StepType = {
+  key: 'mailpoet:remove-tag',
+  group: 'actions',
+  title: __('Remove tag', 'mailpoet'),
+  description: __(
+    'Remove a tag or multiple tags from a subscriber.',
+    'mailpoet',
+  ),
+  subtitle: () => <LockedBadge text={__('Premium', 'mailpoet')} />,
+  foreground: '#00A32A',
+  background: '#EDFAEF',
+  icon: () => (
+    <div style={{ width: '100%', height: '100%', scale: '1.4' }}>{tag}</div>
+  ),
+  edit: () => (
+    <PremiumModalForStepEdit
+      tracking={{
+        utm_medium: 'upsell_modal',
+        utm_campaign: 'create_automation_editor_remove_tag',
+      }}
+    >
+      {__('Removing tags is a premium feature.', 'mailpoet')}
+    </PremiumModalForStepEdit>
+  ),
+} as const;

mailpoet/assets/js/src/automation/integrations/mailpoet/steps/send_email/edit/reply_to_panel.tsx

@@ -11,9 +11,9 @@ type ReplyToArgs = {
 };
 
 export function ReplyToPanel(): JSX.Element {
-  const { context, selectedStep, errors } = useSelect(
+  const { registry, selectedStep, errors } = useSelect(
     (select) => ({
-      context: select(storeName).getContext(),
+      registry: select(storeName).getRegistry(),
       selectedStep: select(storeName).getSelectedStep(),
       errors: select(storeName).getStepError(
         select(storeName).getSelectedStep().id,
@@ -30,10 +30,10 @@ export function ReplyToPanel(): JSX.Element {
   const prevValue = useRef<{ name?: string; address?: string }>();
 
   // defaults
-  const argsContext =
-    context.steps['mailpoet:send-email']?.args_schema?.properties ?? {};
-  const defaultName = argsContext.reply_to_name?.default;
-  const defaultAddress = argsContext.reply_to_address?.default;
+  const argsSchema =
+    registry.steps['mailpoet:send-email']?.args_schema?.properties ?? {};
+  const defaultName = argsSchema.reply_to_name?.default;
+  const defaultAddress = argsSchema.reply_to_address?.default;
 
   const errorFields = errors?.fields ?? {};
   const replyToNameError = errorFields?.reply_to_name ?? '';

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

@@ -9,7 +9,7 @@ export const step: StepType = {
   key: 'mailpoet:send-email',
   group: 'actions',
   title: __('Send email', 'mailpoet'),
-  description: __('An email will be sent to subscriber', 'mailpoet'),
+  description: __('An email will be sent to subscriber.', 'mailpoet'),
   subtitle: (data) =>
     (data.args.name as string) ?? __('Send email', 'mailpoet'),
   foreground: '#996800',

mailpoet/assets/js/src/automation/integrations/mailpoet/steps/someone-subscribes/edit/list_panel.tsx

@@ -1,10 +1,12 @@
 import { PanelBody } from '@wordpress/components';
 import { dispatch, useSelect } from '@wordpress/data';
 import { __ } from '@wordpress/i18n';
+import { getContext } from '../../../context';
 import { storeName } from '../../../../../editor/store';
-import { segments } from './segment';
-import { PlainBodyTitle } from '../../../../../editor/components/panel';
-import { FormTokenField } from '../../../components/form-token-field';
+import {
+  PlainBodyTitle,
+  FormTokenField,
+} from '../../../../../editor/components';
 
 export function ListPanel(): JSX.Element {
   const { selectedStep } = useSelect(
@@ -18,7 +20,7 @@ export function ListPanel(): JSX.Element {
     ? (selectedStep.args.segment_ids as number[])
     : [];
 
-  const validSegments = segments.filter(
+  const validSegments = getContext().segments.filter(
     (segment) => segment.type === 'default',
   );
   const selected = validSegments.filter((segment): boolean =>

mailpoet/assets/js/src/automation/integrations/mailpoet/steps/someone-subscribes/edit/segment.ts

@@ -1,13 +0,0 @@
-import { FormTokenItem } from '../../../components/form-token-field';
-
-type Segment = FormTokenItem & {
-  type: string;
-};
-
-declare global {
-  interface Window {
-    mailpoet_segments: Segment[];
-  }
-}
-
-export const segments = window.mailpoet_segments;

mailpoet/assets/js/src/automation/integrations/mailpoet/steps/update-subscriber/index.tsx

@@ -0,0 +1,33 @@
+import { __ } from '@wordpress/i18n';
+import { postAuthor } from '@wordpress/icons';
+import { StepType } from '../../../../editor/store/types';
+import { PremiumModalForStepEdit } from '../../../../../common/premium_modal';
+import { LockedBadge } from '../../../../../common/premium_modal/locked_badge';
+
+export const step: StepType = {
+  key: 'mailpoet:update-subscriber',
+  group: 'actions',
+  title: __('Update subscriber', 'mailpoet'),
+  description: __(
+    'Update the subscriber’s custom field to a specific value.',
+    'mailpoet',
+  ),
+  subtitle: () => <LockedBadge text={__('Premium', 'mailpoet')} />,
+  foreground: '#00A32A',
+  background: '#EDFAEF',
+  icon: () => (
+    <div style={{ width: '100%', height: '100%', scale: '1.3' }}>
+      {postAuthor}
+    </div>
+  ),
+  edit: () => (
+    <PremiumModalForStepEdit
+      tracking={{
+        utm_medium: 'upsell_modal',
+        utm_campaign: 'create_automation_editor_update_subscriber',
+      }}
+    >
+      {__('Updating subscribers is a premium feature.', 'mailpoet')}
+    </PremiumModalForStepEdit>
+  ),
+} as const;