Release 3.41.2

.babelrc

@@ -0,0 +1,28 @@
+{
+  "presets": [
+    "@babel/preset-react",
+    "@babel/preset-env"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties",
+    [
+      "@babel/plugin-transform-runtime", {
+        "sourceType": "unambiguous",
+        "corejs": 3
+      }
+    ],
+    "@babel/plugin-syntax-dynamic-import",
+    "@babel/plugin-syntax-import-meta",
+    "@babel/plugin-proposal-json-strings",
+    [
+      "@babel/plugin-proposal-decorators",
+      {
+        "legacy": true
+      }
+    ],
+    "@babel/plugin-proposal-function-sent",
+    "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-proposal-numeric-separator",
+    "@babel/plugin-proposal-throw-expressions"
+  ]
+}

.circleci/check_woocommerce_beta.sh

@@ -1,19 +0,0 @@
-#!/bin/bash
-
-# Fetch the versions of WooCommerce from the WordPress API
-VERSIONS=$(curl -s https://api.wordpress.org/plugins/info/1.0/woocommerce.json | jq -r '.versions | keys_unsorted | .[]' | grep -v 'trunk')
-LATEST_VERSION=""
-
-# Find the latest version
-for version in $VERSIONS; do
-  LATEST_VERSION=$version
-done
-
-# Check if the latest version is a beta/RC version
-if [[ $LATEST_VERSION != *'beta'* && $LATEST_VERSION != *'rc'* ]]; then
-  echo "No WooCommerce beta/RC version found."
-  echo "LATEST_BETA="
-else
-  echo "Latest WooCommerce beta/RC version: $LATEST_VERSION"
-  echo "LATEST_BETA=$LATEST_VERSION"
-fi

.circleci/check_wordpress_beta.sh

@@ -1,28 +0,0 @@
-#!/bin/bash
-
-# Fetch the WordPress releases RSS feed
-RSS_FEED=$(curl -s https://wordpress.org/news/category/releases/feed/)
-
-# Extract the latest version from the feed and convert it to lowercase
-LAST_VERSION=$(echo "$RSS_FEED" | grep -o '<title>WordPress [^<]*</title>' | sed -E 's/<\/?title>//g' | head -n 1 | tr [:upper:] [:lower:])
-
-# Check if a beta or RC version is found
-if [[ $LAST_VERSION == *'beta'* ]]; then
-  # Extract titles containing beta versions from the feed
-  VERSION_LINE=$(echo "$RSS_FEED" | grep -o '<code>wp core update [^<]*</code>' | sed -E 's/<\/?code>//g' | head -n 1 | grep 'beta')
-  LATEST_BETA=$(echo "$VERSION_LINE" | sed -E 's/.*--version=([0-9\.]+-beta[0-9]+).*/\1/')
-
-  echo "Latest WordPress beta version: $LATEST_BETA"
-  echo "LATEST_BETA=$LATEST_BETA"
-
-elif [[ $LAST_VERSION == *'release candidate'* ]]; then
-  # Extract titles containing RC versions from the feed
-  VERSION_LINE=$(echo "$RSS_FEED" | grep -o '<code>wp core update [^<]*</code>' | sed -E 's/<\/?code>//g' | head -n 1 | grep 'RC')
-  LATEST_BETA=$(echo "$VERSION_LINE" | sed -E 's/.*--version=([0-9\.]+-RC[0-9]+).*/\1/')
-
-  echo "Latest WordPress RC version: $LATEST_BETA"
-  echo "LATEST_BETA=$LATEST_BETA"
-else
-  echo "No WordPress beta/RC version found."
-  echo "LATEST_BETA="
-fi

.circleci/fake-sendmail.php

@@ -5,14 +5,14 @@ if (!file_exists($path)) {
   mkdir($path);
 }
 $filename = $path . '/mailpoet-' . microtime(true) . '.txt';
-$fileHandle = fopen($filename, "w");
+$file_handle = fopen($filename, "w");
 
 // phpcs:ignore Squiz.PHP.DiscouragedFunctions
-$callArguments = print_r($argv, true) . "\n";
-fwrite($fileHandle, $callArguments);
+$call_arguments = print_r($argv, true) . "\n";
+fwrite($file_handle, $call_arguments);
 
 while ($line = fgets(STDIN)) {
-  fwrite($fileHandle, $line);
+  fwrite($file_handle, $line);
 }
 
-fclose($fileHandle);
+fclose($file_handle);

.circleci/mailpoet_php.ini

@@ -6,3 +6,4 @@ sendmail_path = /usr/local/bin/fake-sendmail.php
 ; Defines the default timezone used by the date functions
 ; http://php.net/date.timezone
 date.timezone = UTC
+

.circleci/nproc.js

@@ -1,23 +0,0 @@
-import * as fs from 'fs/promises';
-import * as os from 'os';
-
-// Get logical CPU count for a container on CircleCI. Adapted from:
-//   https://circleci.canny.io/cloud-feature-requests/p/have-nproc-accurately-reporter-number-of-cpus-available-to-container
-
-async function cgroupCpuCount() {
-  const quotaS = await fs.readFile('/sys/fs/cgroup/cpu/cpu.cfs_quota_us');
-  const periodS = await fs.readFile('/sys/fs/cgroup/cpu/cpu.cfs_period_us');
-  const quota = parseInt(quotaS);
-  const period = parseInt(periodS);
-  return quota / period;
-}
-
-async function cpuCount() {
-  try {
-    return await cgroupCpuCount();
-  } catch {
-    return os.cpus().length;
-  }
-}
-
-cpuCount().then(console.log);

.circleci/setup.bash

@@ -1,19 +1,16 @@
 #!/usr/bin/env bash
 
 function setup {
-  local script_dir="$(cd -P -- "$(dirname -- "${BASH_SOURCE[0]}")" && pwd -P)"
-  local root_dir="$(dirname "$script_dir")"
-
 	local version=$1
-	local wp_cli_wordpress_path="--path=$root_dir/wordpress"
+	local wp_cli_wordpress_path="--path=wordpress"
 	local wp_cli_allow_root="--allow-root"
 
 	# Add a fake sendmail mailer
-	sudo cp "$script_dir/fake-sendmail.php" /usr/local/bin/
+	sudo cp ./.circleci/fake-sendmail.php /usr/local/bin/
 
 	# configure Apache
-	sudo cp "$script_dir/mailpoet_php.ini" /etc/php.d/
-	sudo cp "$script_dir/apache/mailpoet.loc.conf" /etc/apache2/sites-available
+	sudo cp ./.circleci/mailpoet_php.ini /usr/local/etc/php/conf.d/
+	sudo cp ./.circleci/apache/mailpoet.loc.conf /etc/apache2/sites-available
 	sudo a2dissite 000-default.conf
 	sudo a2ensite mailpoet.loc
 	sudo a2enmod rewrite
@@ -29,33 +26,32 @@ function setup {
 	wp core download $wp_cli_wordpress_path $wp_cli_allow_root --version=${2:-latest}
 
 	# Generate `wp-config.php` file with debugging enabled
-	wp config create --dbname=wordpress --dbuser=root --dbhost=127.0.0.1 --dbprefix='mp_' $wp_cli_wordpress_path $wp_cli_allow_root
-	wp config set WP_DEBUG true --raw $wp_cli_wordpress_path $wp_cli_allow_root
+	echo "define(\"WP_DEBUG\", true);" | wp core config --dbname=wordpress --dbuser=root --dbhost=127.0.0.1 --extra-php $wp_cli_wordpress_path $wp_cli_allow_root
 
-  # Disable WP Cron so that it doesn't interfere with tests
-  wp config set DISABLE_WP_CRON true --raw $wp_cli_wordpress_path $wp_cli_allow_root
+	# Change default table prefix
+	sed -i "s/\$table_prefix = 'wp_';/\$table_prefix = 'mp_';/" ./wordpress/wp-config.php
 
 	# Install WordPress
     if [[ $version == "php7_multisite" ]]; then
         # Configure multisite environment
     	wp core multisite-install --admin_name=admin --admin_password=admin --admin_email=admin@mailpoet.loc --url=http://mailpoet.loc --title="WordPress MultiSite" $wp_cli_wordpress_path $wp_cli_allow_root
-    	cp "$script_dir/wordpress/.htaccess" "$root_dir/wordpress/"
+    	cp ./.circleci/wordpress/.htaccess ./wordpress/
 
     	# Add a second blog
     	wp site create --slug=php7_multisite $wp_cli_wordpress_path $wp_cli_allow_root
-    	echo "WP_TEST_MULTISITE_SLUG=php7_multisite" >> "$root_dir/mailpoet/.env"
-    	echo "WP_ROOT_MULTISITE=/home/circleci/mailpoet/wordpress" >> "$root_dir/mailpoet/.env"
-    	echo "HTTP_HOST=mailpoet.loc" >> "$root_dir/mailpoet/.env"
+    	echo "WP_TEST_MULTISITE_SLUG=php7_multisite" >> .env
+    	echo "WP_ROOT_MULTISITE=/home/circleci/mailpoet/wordpress" >> .env
+    	echo "HTTP_HOST=mailpoet.loc" >> .env
 
     	# Add a third dummy blog
         wp site create --slug=dummy_multisite $wp_cli_wordpress_path $wp_cli_allow_root
     else
     	wp core install --admin_name=admin --admin_password=admin --admin_email=admin@mailpoet.loc --url=http://mailpoet.loc --title="WordPress Single" $wp_cli_wordpress_path $wp_cli_allow_root
-    	echo "WP_ROOT=/home/circleci/mailpoet/wordpress" >> "$root_dir/mailpoet/.env"
+    	echo "WP_ROOT=/home/circleci/mailpoet/wordpress" >> .env
     fi
 
 	# Softlink plugin to plugin path
-	ln -s ../../../mailpoet ../wordpress/wp-content/plugins/mailpoet
+	ln -s ../../.. wordpress/wp-content/plugins/mailpoet
 
 	# Activate plugin
 	if [[ $version == "php7_multisite" ]]; then
@@ -63,16 +59,4 @@ function setup {
 	else
 	    wp plugin activate mailpoet $wp_cli_wordpress_path $wp_cli_allow_root
 	fi
-
-  if [[ $CIRCLE_JOB == *"_with_premium_"* ]]; then
-    # Softlink MailPoet Premium to plugin path
-    ln -s ../../../mailpoet-premium ../wordpress/wp-content/plugins/mailpoet-premium
-    # Activate MailPoet Premium
-    wp plugin activate mailpoet-premium --path="$root_dir/wordpress"
-  fi
-
-  # Fix WP formatting file for compatibility with PHP8.1
-  sed -i "s|if ( strlen( \$email ) < 6 ) {|if ( strlen( (string) \$email ) < 6 ) {|" ../wordpress/wp-includes/formatting.php
-  sed -i "s|return rtrim( \$string, '/\\\\\\\\' );|return rtrim( (string) \$string, '/\\\\\\\\' );|" ../wordpress/wp-includes/formatting.php
-  sed -i "s|return \$wp_hasher->HashPassword( trim( \$password ) );|return \$wp_hasher->HashPassword( trim( (string) \$password ) );|" ../wordpress/wp-includes/pluggable.php
 }

.dockerignore

@@ -1,4 +0,0 @@
-.idea
-mailpoet
-mailpoet-premium
-wordpress

.editorconfig

@@ -7,59 +7,3 @@ insert_final_newline = true
 trim_trailing_whitespace = true
 indent_style = space
 indent_size = 2
-ij_smart_tabs = false
-max_line_length = off
-
-[packages/php/email-editor/**]
-indent_style = tab
-
-[packages/js/email-editor/**.{js,jsx,ts,tsx,scss}]
-indent_style = tab
-
-[*.php]
-ij_php_align_key_value_pairs = false
-ij_php_align_multiline_chained_methods = false
-ij_php_align_assignments = false
-ij_php_align_class_constants = false
-ij_php_align_multiline_parameters = false
-ij_php_align_multiline_ternary_operation = false
-ij_php_align_inline_comments = false
-ij_php_align_multiline_for = true
-ij_php_align_named_arguments = false
-ij_php_align_multiline_array_initializer_expression = false
-ij_php_align_phpdoc_comments = false
-ij_php_blank_lines_after_class_header = 0
-ij_php_blank_lines_around_class = 1
-ij_php_blank_lines_before_class_end = 0
-ij_php_blank_lines_around_method = 1
-ij_php_blank_lines_after_opening_tag = 0
-ij_php_keep_indents_on_empty_lines = false
-ij_php_keep_blank_lines_after_lbrace = 0
-ij_php_keep_blank_lines_before_right_brace = 0
-ij_php_keep_blank_lines_in_declarations = 1
-ij_php_spaces_around_arrow = false
-ij_php_space_after_type_cast = false
-ij_php_blank_lines_after_function = 1
-ij_any_space_after_colon = true
-ij_any_space_before_comma = false
-ij_any_space_after_comma = true
-ij_php_space_before_catch_left_brace = true
-ij_php_space_before_if_left_brace = true
-ij_php_space_before_if_parentheses = true
-ij_php_space_after_quest = true
-ij_php_space_after_unary_not = false
-ij_php_space_before_quest = true
-ij_php_anonymous_brace_style = end_of_line
-ij_php_space_before_method_parentheses = false
-ij_php_space_before_method_call_parentheses = false
-ij_php_spaces_around_assignment_in_declare = true
-ij_php_method_parameters_new_line_after_left_paren = true
-ij_php_method_brace_style = end_of_line
-ij_php_blank_lines_before_method_body = 0
-ij_php_space_before_method_left_brace = true
-ij_php_space_after_for_semicolon = true
-ij_php_space_after_colon_in_return_type = true
-ij_php_space_before_else_keyword = true
-ij_php_for_statement_new_line_after_left_paren = true
-ij_php_class_brace_style = end_of_line
-ij_php_comma_after_last_array_element = true

.env.sample

@@ -0,0 +1,34 @@
+# Required
+WP_ROOT="/var/www/wordpress"
+WP_TEST_ENABLE_NETWORK_TESTS="false"
+WP_TEST_MAILER_ENABLE_SENDING="false"
+
+# Optional: for multisite acceptance tests
+WP_ROOT_MULTISITE="/var/www/wordpress"
+WP_TEST_MULTISITE_SLUG=""
+HTTP_HOST="" // URL of your site (used for multisite env and equals to DOMAIN_CURRENT_SITE from wp-config.php)
+
+# Optional: for sending tests
+# These are required if WP_TEST_MAILER_ENABLE_SENDING is "true"
+WP_TEST_IMPORT_MAILCHIMP_API=""
+WP_TEST_IMPORT_MAILCHIMP_LISTS="" // (separated with comma)
+WP_TEST_MAILER_AMAZON_ACCESS=""
+WP_TEST_MAILER_AMAZON_SECRET=""
+WP_TEST_MAILER_AMAZON_REGION=""
+WP_TEST_MAILER_MAILPOET_API=""
+WP_TEST_MAILER_SENDGRID_API=""
+WP_TEST_MAILER_SMTP_HOST=""
+WP_TEST_MAILER_SMTP_LOGIN=""
+WP_TEST_MAILER_SMTP_PASSWORD=""
+
+# Optional: for plugin deployment
+WP_SVN_USERNAME=""
+WP_SVN_PASSWORD=""
+WP_TRANSIFEX_API_TOKEN=""
+WP_JIRA_USER="" // JIRA username/email
+WP_JIRA_TOKEN="" // JIRA token from https://id.atlassian.com/manage/api-tokens
+WP_CIRCLECI_USERNAME="" // CircleCI organization or user
+WP_CIRCLECI_TOKEN="" // CircleCI token from https://circleci.com/gh/{user|org}/{project}/edit#api
+WP_GITHUB_USERNAME="" // GitHub username (not email)
+WP_GITHUB_TOKEN="" // GitHub token from https://github.com/settings/tokens
+WP_SLACK_WEBHOOK_URL="" // Webhook URL from https://mailpoet.slack.com/services/BHRB9AHSQ

.eslintignore

@@ -0,0 +1,3 @@
+**/vendor/**
+**/vendor-prefixed/**
+**/testBundles/**

.eslintrc.es5.json

@@ -0,0 +1,15 @@
+{
+  "extends": "airbnb/legacy",
+  "env": {
+    "amd": true,
+    "browser": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-underscore-dangle": 0, // Backbone uses underscores, we cannot remove them
+    "comma-dangle": ["error", "always-multiline"]
+  }
+}

.eslintrc.es6.json

@@ -0,0 +1,51 @@
+{
+  "extends": "airbnb",
+  "env": {
+    "amd": true,
+    "browser": true,
+    "mocha": true
+  },
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": [
+    "react-hooks",
+    "no-only-tests"
+  ],
+  "settings": {
+    "import/resolver": "webpack"
+  },
+  "rules": {
+    // Hooks
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    // Exceptions
+    "arrow-parens": ["error", "always"],
+    "comma-dangle": ["error", "always-multiline"],
+    "no-only-tests/no-only-tests": 2,
+    "no-script-url": 0,
+    "import/extensions": 0, // we wouldn't be able to import jQuery without this line
+    "react/destructuring-assignment": 0, // that would be too many changes to fix this one
+    "prefer-destructuring": 0, // that would be too many changes to fix this one
+    "jsx-a11y/label-has-for": [2, {
+      "required": {"some": ["nesting", "id"]} // some of our labels are hidden and we cannot nest those
+    }],
+    "jsx-a11y/anchor-is-valid": 0, // cannot fix this one, it would break wprdpress themes
+    "jsx-a11y/label-has-associated-control": [ 2, {
+      "either": "either" // control has to be either nested or associated via htmlFor
+    }]
+  },
+  "overrides": [
+    {
+      "files": ["*.spec.js"],
+      "rules": {
+        "no-unused-expressions": "off"
+      }
+    }
+  ]
+}
+

.eslintrc.tests_newsletter_editor.json

@@ -0,0 +1,20 @@
+{
+  "extends": "airbnb/legacy",
+  "env": {
+    "amd": true,
+    "mocha": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-only-tests/no-only-tests": 2,
+    // Exceptions
+    "func-names": 0,
+    "comma-dangle": ["error", "always-multiline"],
+    // Temporary
+    "no-underscore-dangle": 0
+  },
+  "plugins": ["no-only-tests"]
+}

.git-blame-ignore-revs

@@ -1,53 +0,0 @@
-# This file contains revisions that introduced multiple changes that have no effect on aplication logic.
-# You can add it to you local git config using command: git config blame.ignoreRevsFile .git-blame-ignore-revs
-
-# Convert PHP property names to camel case
-8c848cfa2883d9a0c9614d0be0e9248c5a02d340
-
-# Convert PHP variables to camel case
-54549ff037d6c2ad868cae6e2117ee862297fdbf
-
-# Convert variable names to camel case in strings
-3bbc8ea2aff78040d1e24995de2d62461db88174
-
-# Convert property names to camel case in strings
-7a66366ab58b1b959c8b59dfc4f90c1f3a28b95b
-
-# Convert variable names to camel case in PHPDoc
-d0292f86249140f4978e6b65c4ed1aed4f40c7fe
-
-# Convert variables not caught by Code Sniffer to camel case
-f49757bd4e129d44102a932246c5e892d362054d
-
-# Convert properties not caught by Code Sniffer to camel case
-94afd663259d6600e51c8e13084f7f126874d29e
-
-# Exclude globals from camel case conversion
-6522635dc7455e39ca77370a18a9987de13c61b0
-
-# Convert Doctrine specific code to camel case
-fbcaeaadbca33e6cc9aef0925be019e9b4923a93
-
-# Exclude WordPress and WooCommerce variables from camel case conversion
-685b4885c0d54d03df3cd0412ef3bc9e586cbb03
-
-# Exclude MailPoet data structures from camel case conversion
-e66c76133ec3ef667e382203426d91a4b4aa5174
-
-# Updating rule name in php:cs ignore comments
-65b834a9fff72b1ec5fc81ac383ebb27321da9dc
-
-# Prettier autoformatting
-ab27eaee2df740c0add4331a7f8c115a87ecfa2b
-
-# Move email editor to JS packages folder
-912282f57ccc839491ff951ec5cf7aa10c14f429
-
-# Switch email editor js packages to WP coding style
-b2fb96f8793b63db629d5237010d87332330c51e
-
-# Email editor Prettier autoformatting
-8c604453b1d82e3a2c731241e1c96ea8b32ec716
-
-# Move email editor components out of the engine folder
-1c3ea9cd0a5fc8848a64d840e2fa16a6c7d8c1fe

.github/ISSUE_TEMPLATE/Bug_report.md

@@ -1,34 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To reproduce**
-Steps to reproduce the behavior:
-
-1. Go to ...
-2. Click on ...
-3. Scroll down to ...
-
-**Actual behavior**
-A clear and concise description of the incorrect behavior.
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Versions (please complete the following information):**
-
-- WordPress version: [e.g: 5.3.2]
-- PHP version: [e.g: 7.4.2]
-- MailPoet version: [e.g: 3.46.13]
-
-**Additional context**

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,9 +0,0 @@
----
-name: Feature request
-about: https://feedback.mailpoet.com/
-title: ''
-labels: ''
-assignees: ''
----
-
-Please use https://feedback.mailpoet.com/ for feature requests.

.github/SECURITY.md

@@ -1,37 +0,0 @@
-# Security Policy
-
-Full details of the Automattic Security Policy can be found on [automattic.com/security](https://automattic.com/security/).
-
-## Supported Versions
-
-Generally, _only the latest version of MailPoet has continued support_. If a critical vulnerability is found in the current version of MailPoet, we may opt to backport any patches to previous versions.
-
-## Reporting a Vulnerability
-
-[MailPoet](https://wordpress.org/plugins/mailpoet) is an open-source plugin for WordPress. Our HackerOne program covers the plugin software, as well as a variety of related projects and infrastructure.
-
-**For responsible disclosure of security issues and to be eligible for our bug bounty program, please submit your report based on instructions found on [hackerone.com/automattic](https://hackerone.com/automattic).**
-
-Our most critical targets are:
-
-- MailPoet plugin (this repository)
-- MailPoet Premium
-- mailpoet.com -- the primary site, and all of it subdomains, e.g. [account.mailpoet.com](https://account.mailpoet.com/)
-
-For more targets, see the `In Scope` section on [HackerOne](https://hackerone.com/automattic).
-
-_Please note that the **WordPress software is a separate entity** from Automattic. Please report vulnerabilities for WordPress through [the WordPress Foundation's HackerOne page](https://hackerone.com/wordpress)._
-
-## Guidelines
-
-We're committed to working with security researchers to resolve the vulnerabilities they discover. You can help us by following these guidelines:
-
-- Follow [HackerOne's disclosure guidelines](https://www.hackerone.com/disclosure-guidelines).
-- Pen-testing Production:
-- Please **setup a local environment** instead whenever possible. Most of our code is open source (see above).
-- If that's not possible, **limit any data access/modification** to the bare minimum necessary to reproduce a PoC.
-- **_Don't_ automate form submissions!** That's very annoying for us, because it adds extra work for the volunteers who manage those systems, and reduces the signal/noise ratio in our communication channels.
-- To be eligible for a bounty, please follow all of these guidelines.
-- Be Patient - Give us a reasonable time to correct the issue before you disclose the vulnerability.
-
-We also expect you to comply with all applicable laws. You're responsible to pay any taxes associated with your bounties.

.github/pull_request_template.md

@@ -1,29 +0,0 @@
-## Description
-
-_N/A_
-
-## Code review notes
-
-_N/A_
-
-## QA notes
-
-_N/A_
-
-## Linked PRs
-
-_N/A_
-
-## Linked tickets
-
-_N/A_
-
-## After-merge notes
-
-_N/A_
-
-## Tasks
-
-- [ ] I followed [best practices](https://codex.wordpress.org/I18n_for_WordPress_Developers) for translations
-- [ ] I added sufficient test coverage
-- [ ] I embraced TypeScript by either creating new files in TypeScript or converting existing JavaScript files when making changes

.github/workflows/codeql-analysis.yml

@@ -1,71 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-name: 'CodeQL'
-
-on:
-  push:
-    branches: [trunk]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [trunk]
-  schedule:
-    - cron: '0 17 * * 4'
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-
-    strategy:
-      fail-fast: false
-      matrix:
-        # Override automatic language detection by changing the below list
-        # Supported options are ['csharp', 'cpp', 'go', 'java', 'javascript', 'python']
-        language: ['javascript']
-        # Learn more...
-        # https://docs.github.com/en/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#overriding-automatic-language-detection
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
-        with:
-          # We must fetch at least the immediate parents so that if this is
-          # a pull request then we can checkout the head.
-          fetch-depth: 2
-
-      # If this run was triggered by a pull request event, then checkout
-      # the head of the pull request instead of the merge commit.
-      - run: git checkout HEAD^2
-        if: ${{ github.event_name == 'pull_request' }}
-
-      # Initializes the CodeQL tools for scanning.
-      - name: Initialize CodeQL
-        uses: github/codeql-action/init@v1
-        with:
-          languages: ${{ matrix.language }}
-          # If you wish to specify custom queries, you can do so here or in a config file.
-          # By default, queries listed here will override any specified in a config file.
-          # Prefix the list here with "+" to use these queries and those in the config file.
-          # queries: ./path/to/local/query, your-org/your-repo/queries@main
-
-      # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-      # If this step fails, then you should remove it and run the build manually (see below)
-      - name: Autobuild
-        uses: github/codeql-action/autobuild@v1
-
-      # ℹ️ Command-line programs to run using the OS shell.
-      # 📚 https://git.io/JvXDl
-
-      # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-      #    and modify them (or add more) to build your code if your project
-      #    uses a compiled language
-
-      #- run: |
-      #   make bootstrap
-      #   make release
-
-      - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@v1

.github/workflows/email-editor-package.yml

@@ -1,212 +0,0 @@
-name: Email Editor Package Tests
-
-on:
-  push:
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        php-version: ['7.4', '8.2']
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Cache Composer vendor dependencies for MailPoet
-        id: composer-mailpoet-cache
-        uses: actions/cache@v4
-        with:
-          path: mailpoet/vendor
-          key: ${{ runner.os }}-composer-mailpoet-${{ matrix.php-version }}-${{ hashFiles('mailpoet/composer.lock') }}-${{ hashFiles('mailpoet/composer.json') }}
-
-      - name: Cache Composer vendor-prefixed dependencies for MailPoet
-        id: vendor-prefixed-cache
-        uses: actions/cache@v4
-        with:
-          path: mailpoet/vendor-prefixed
-          key: ${{ runner.os }}-vendor-prefixed-${{ matrix.php-version }}-${{ hashFiles('mailpoet/prefixer/composer.lock') }}-${{ hashFiles('mailpoet/prefixer/composer.json') }}
-
-      - name: Cache Composer vendor for test environment
-        id: composer-tests-env-cache
-        uses: actions/cache@v4
-        with:
-          path: tests_env/vendor
-          key: ${{ runner.os }}-composer-mailpoet-${{ matrix.php-version }}-${{ hashFiles('tests_env/composer.lock') }}-${{ hashFiles('tests_env/composer.json') }}
-
-      - name: Cache Composer dependencies for Email Editor
-        id: composer-email-editor-cache
-        uses: actions/cache@v4
-        with:
-          path: packages/php/email-editor/vendor
-          key: ${{ runner.os }}-composer-email-editor-${{ matrix.php-version }}-${{ hashFiles('packages/php/email-editor/composer.lock') }}-${{ hashFiles('packages/php/email-editor/composer.json') }}
-
-      - name: Set up PHP
-        uses: shivammathur/setup-php@v2
-        with:
-          php-version: ${{ matrix.php-version }}
-          extensions: gd
-
-      - name: Install tools
-        run: |
-          COMPOSER_DEV_MODE=1 php tools/install.php
-          touch .env
-        working-directory: mailpoet
-
-      # Install Test Environment dependencies only if the cache was not hit
-      - name: Install test environment dependencies
-        if: steps.composer-tests-env-cache.outputs.cache-hit != 'true'
-        run: ../mailpoet/tools/vendor/composer.phar install
-        working-directory: tests_env
-
-      # Install MailPoet dependencies only if the cache was not hit
-      - name: Install mailpoet dependencies
-        if: |
-          steps.composer-mailpoet-cache.outputs.cache-hit != 'true' || steps.vendor-prefixed-cache.outputs.cache-hit != 'true'
-        run: ./tools/vendor/composer.phar install
-        working-directory: mailpoet
-
-      # Install Email Editor dependencies only if the cache was not hit
-      - name: Install email-editor dependencies
-        if: steps.composer-email-editor-cache.outputs.cache-hit != 'true'
-        run: ../../../mailpoet/tools/vendor/composer.phar install
-        working-directory: packages/php/email-editor
-
-      # Dump Email Editor autoload
-      # This is needed to refresh classmap autoload when the composer cache is hit
-      - name: Dump email-editor autoload
-        run: ../../../mailpoet/tools/vendor/composer.phar dump-autoload
-        working-directory: packages/php/email-editor
-
-      # Dump MailPoet autoload
-      # This is needed to refresh classmap autoload when the composer cache is hit
-      - name: Dump MailPoet autoload
-        run: ./tools/vendor/composer.phar dump-autoload
-        working-directory: mailpoet
-
-      # Run Email Editor unit tests
-      - name: Run email-editor package unit tests
-        run: ../../../tests_env/vendor/bin/codecept build && ../../../mailpoet/tools/vendor/composer.phar unit-test
-        working-directory: packages/php/email-editor
-
-      - name: Run email-editor package integration tests
-        run: ../../../mailpoet/tools/vendor/composer.phar integration-test
-        working-directory: packages/php/email-editor
-
-  code-style:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Set up PHP
-        uses: shivammathur/setup-php@v2
-        with:
-          php-version: '8.2'
-
-      - name: Install tools
-        run: |
-          COMPOSER_DEV_MODE=1 php tools/install.php
-          touch .env
-        working-directory: mailpoet
-
-      - name: Install composer dependencies
-        run: ../../tools/vendor/composer.phar install
-        working-directory: mailpoet/tasks/code_sniffer
-
-      - name: Run code style check
-        run: ../../../mailpoet/tools/vendor/composer.phar code-style
-        working-directory: packages/php/email-editor
-
-  phpstan-static-analysis:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        php-version: ['7.4', '8.2']
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Cache Composer vendor dependencies for MailPoet
-        id: composer-mailpoet-cache
-        uses: actions/cache@v4
-        with:
-          path: mailpoet/vendor
-          key: ${{ runner.os }}-composer-mailpoet-${{ matrix.php-version }}-${{ hashFiles('mailpoet/composer.lock') }}-${{ hashFiles('mailpoet/composer.json') }}
-
-      - name: Cache Composer vendor-prefixed dependencies for MailPoet
-        id: vendor-prefixed-cache
-        uses: actions/cache@v4
-        with:
-          path: mailpoet/vendor-prefixed
-          key: ${{ runner.os }}-vendor-prefixed-${{ matrix.php-version }}-${{ hashFiles('mailpoet/prefixer/composer.lock') }}-${{ hashFiles('mailpoet/prefixer/composer.json') }}
-
-      - name: Cache Composer vendor for test environment
-        id: composer-tests-env-cache
-        uses: actions/cache@v4
-        with:
-          path: tests_env/vendor
-          key: ${{ runner.os }}-composer-mailpoet-${{ matrix.php-version }}-${{ hashFiles('tests_env/composer.lock') }}-${{ hashFiles('tests_env/composer.json') }}
-
-      - name: Cache Composer dependencies for Email Editor
-        id: composer-email-editor-cache
-        uses: actions/cache@v4
-        with:
-          path: packages/php/email-editor/vendor
-          key: ${{ runner.os }}-composer-email-editor-${{ matrix.php-version }}-${{ hashFiles('packages/php/email-editor/composer.lock') }}-${{ hashFiles('packages/php/email-editor/composer.json') }}
-
-      - name: Set up PHP
-        uses: shivammathur/setup-php@v2
-        with:
-          php-version: ${{ matrix.php-version }}
-          extensions: gd
-
-      - name: Install tools
-        run: |
-          COMPOSER_DEV_MODE=1 php tools/install.php
-          touch .env
-        working-directory: mailpoet
-
-      # Install Test Environment dependencies only if the cache was not hit
-      - name: Install test environment dependencies
-        if: steps.composer-tests-env-cache.outputs.cache-hit != 'true'
-        run: ../mailpoet/tools/vendor/composer.phar install
-        working-directory: tests_env
-
-      # Install MailPoet dependencies only if the cache was not hit
-      - name: Install mailpoet dependencies
-        if: |
-          steps.composer-mailpoet-cache.outputs.cache-hit != 'true' || steps.vendor-prefixed-cache.outputs.cache-hit != 'true'
-        run: ./tools/vendor/composer.phar install
-        working-directory: mailpoet
-
-      # Install Email Editor dependencies only if the cache was not hit
-      - name: Install email-editor dependencies
-        if: steps.composer-email-editor-cache.outputs.cache-hit != 'true'
-        run: ../../../mailpoet/tools/vendor/composer.phar install
-        working-directory: packages/php/email-editor
-
-      - name: Install composer dependencies
-        run: ../../tools/vendor/composer.phar install
-        working-directory: mailpoet/tasks/phpstan
-
-      # Dump Email Editor autoload
-      # This is needed to refresh classmap autoload when the composer cache is hit
-      - name: Dump email-editor autoload
-        run: ../../../mailpoet/tools/vendor/composer.phar dump-autoload
-        working-directory: packages/php/email-editor
-
-      # Dump MailPoet autoload
-      # This is needed to refresh classmap autoload when the composer cache is hit
-      - name: Dump MailPoet autoload
-        run: ./tools/vendor/composer.phar dump-autoload
-        working-directory: mailpoet
-
-      - name: Run code phpstan
-        run: ../../../mailpoet/tools/vendor/composer.phar phpstan -- --php-version=${{ matrix.php-version == '7.4' && '70400' || '80200' }}
-        working-directory: packages/php/email-editor

.github/workflows/scripts/check_automate_woo_versions.php

@@ -1,10 +0,0 @@
-<?php
-
-require_once __DIR__ . '/helpers.php';
-
-$repository = 'woocommerce/automatewoo';
-$downloadCommand = 'download:automate-woo-zip';
-$configParameterName = 'automate_woo_version';
-$versionsFilenameSuffix = 'automate_woo_version.txt';
-
-replacePrivatePluginVersion($repository, $downloadCommand, $configParameterName, $versionsFilenameSuffix);

.github/workflows/scripts/check_woocommerce_memberships_versions.php

@@ -1,10 +0,0 @@
-<?php
-
-require_once __DIR__ . '/helpers.php';
-
-$repository = 'woocommerce/woocommerce-memberships';
-$downloadCommand = 'download:woo-commerce-memberships-zip';
-$configParameterName = 'woo_memberships_version';
-$versionsFilenameSuffix = 'woocommerce_memberships_version.txt';
-
-replacePrivatePluginVersion($repository, $downloadCommand, $configParameterName, $versionsFilenameSuffix);

.github/workflows/scripts/check_woocommerce_subscriptions_versions.php

@@ -1,10 +0,0 @@
-<?php
-
-require_once __DIR__ . '/helpers.php';
-
-$repository = 'woocommerce/woocommerce-subscriptions';
-$downloadCommand = 'download:woo-commerce-subscriptions-zip';
-$configParameterName = 'woo_subscriptions_version';
-$versionsFilenameSuffix = 'woocommerce_subscriptions_version.txt';
-
-replacePrivatePluginVersion($repository, $downloadCommand, $configParameterName, $versionsFilenameSuffix);

.github/workflows/scripts/check_woocommerce_versions.php

@@ -1,45 +0,0 @@
-<?php
-
-require_once __DIR__ . '/helpers.php';
-
-$downloadCommand = 'download:woo-commerce-zip';
-$configParameterName = 'woo_core_version';
-$versionsFilenameSuffix = 'woocommerce_version.txt';
-
-/**
- * We get the official WooCommerce versions from the WordPress API.
- */
-function getWooCommerceVersions(): array {
-  $url = "https://api.wordpress.org/plugins/info/1.0/woocommerce.json";
-  $response = file_get_contents($url);
-  $data = json_decode($response, true);
-
-  if (!isset($data['versions'])) {
-    die("Failed to fetch WooCommerce versions.");
-  }
-
-  return array_keys($data['versions']);
-}
-
-$allVersions = getWooCommerceVersions();
-$stableVersions = filterStableVersions($allVersions);
-[$latestVersion, $previousVersion] = getLatestAndPreviousMinorMajorVersions($stableVersions);
-
-echo "Latest WooCommerce version: $latestVersion\n";
-echo "Previous  WooCommerce version: $previousVersion\n";
-
-if ($latestVersion) {
-  echo "Replacing the latest version in the config file...\n";
-  replaceLatestVersion($latestVersion, $downloadCommand);
-} else {
-  echo "No latest version found.\n";
-}
-
-if ($previousVersion) {
-  echo "Replacing the previous version in the config file...\n";
-  replacePreviousVersion($previousVersion, $configParameterName);
-} else {
-  echo "No previous version found.\n";
-}
-
-saveVersionsToFiles($latestVersion, $previousVersion, $versionsFilenameSuffix);

.github/workflows/scripts/check_wordpress_versions.php

@@ -1,123 +0,0 @@
-<?php
-
-require_once __DIR__ . '/helpers.php';
-
-/**
- * We try to get the current available official Docker images for WordPress.
- */
-function getWordpressVersions(int $page = 1, int $pageSize = 100): array {
-  $url = "https://registry.hub.docker.com/v2/repositories/library/wordpress/tags?page_size={$pageSize}&page={$page}";
-  $response = file_get_contents($url);
-  $data = json_decode($response, true);
-  return array_column($data['results'], 'name');
-}
-
-/**
- * We prefer the latest patch versions of WordPress with specified PHP versions.
- * For example: 6.5.4-php8.3
- */
-function filterVersions(array $versions): array {
-  return array_filter($versions, fn($version) => preg_match('/^\d+\.\d+\.\d+-php\d+\.\d+$/', $version));
-}
-
-/**
- * We sort the versions by WordPress version and PHP version.
- * The expected output is:
- *    - 6.5.4-php8.3
- *    - 6.5.4-php8.2
- *    - 6.5.3-php8.3
- *    - 6.5.3-php8.2
- */
-function sortVersions(&$versions) {
-  usort($versions, function($a, $b) {
-    [$wpA, $phpA] = explode('-php', $a);
-    [$wpB, $phpB] = explode('-php', $b);
-
-    $wpCompare = version_compare($wpB, $wpA);
-    return $wpCompare !== 0 ? $wpCompare : version_compare($phpB, $phpA);
-  });
-}
-
-/**
- * This function group docker tags by the WordPress version and returns the latest with the higher PHP version
- * abd the previous with the lower PHP version.
- */
-function getLatestAndPreviousVersions(array $sortedVersions): array {
-  $uniqueVersions = [];
-  foreach ($sortedVersions as $version) {
-    [$wpVersion] = explode('-php', $version);
-    $majorMinorVersion = preg_replace('/\.\d+$/', '', $wpVersion);
-    $uniqueVersions[$majorMinorVersion][] = $version;
-  }
-
-  krsort($uniqueVersions);
-  $latestVersionGroup = reset($uniqueVersions);
-  $previousVersionGroup = next($uniqueVersions);
-
-  $latestVersion = $latestVersionGroup === false ? null : reset($latestVersionGroup);
-  $previousVersion = $previousVersionGroup === false ? null : end($previousVersionGroup);
-
-  return [$latestVersion, $previousVersion];
-}
-
-/**
- * We specify the latest WordPress version only in the docker-compose file for the tests.
- */
-function replaceLatestWordPressVersion(string $latestVersion): void {
-  replaceVersionInFile(
-    __DIR__ . './../../../tests_env/docker/docker-compose.yml',
-    '/(wordpress:\${WORDPRESS_IMAGE_VERSION:-\s*)\d+\.\d+\.?\d*-php\d+\.\d+(})/',
-    '${1}' . $latestVersion . '${2}'
-  );
-}
-
-/**
- * We use the previous WordPress version only in the CircleCI config file.
- */
-function replacePreviousWordPressVersion(string $previousVersion): void {
-  replaceVersionInFile(
-    __DIR__ . './../../../.circleci/config.yml',
-    '/(wordpress_version: )\d+\.\d+\.?\d*/',
-    '${1}' . $previousVersion
-  );
-}
-
-$allVersions = [];
-$page = 1;
-$maxPages = 8;
-$latestVersion = null;
-$previousVersion = null;
-
-echo "Fetching WordPress versions...\n";
-
-// We fetch the versions until we find the latest and previous versions. But there is a limit of 4 pages.
-while (($latestVersion === null || $previousVersion === null) && $page <= $maxPages) {
-  echo "Fetching page $page...\n";
-  $versions = getWordpressVersions($page);
-  $allVersions = array_merge($allVersions, $versions);
-  $allVersions = filterVersions($allVersions);
-  sortVersions($allVersions);
-  [$latestVersion, $previousVersion] = getLatestAndPreviousVersions($allVersions);
-  $page++;
-}
-
-echo "Latest version: $latestVersion\n";
-echo "Previous version: $previousVersion\n";
-
-if ($latestVersion) {
-  echo "Replacing the latest version in the docker file...\n";
-  replaceLatestWordPressVersion($latestVersion);
-} else {
-  echo "No latest version found.\n";
-}
-
-if ($previousVersion) {
-  echo "Replacing the previous version in the config file...\n";
-  // We install previous WordPress version via CLI so we need a version without PHP in the name.
-  $previousVersion = preg_replace('/-php\d+\.\d+$/', '', $previousVersion);
-  replacePreviousWordPressVersion($previousVersion);
-} else {
-  echo "No previous version found.\n";
-}
-
-saveVersionsToFiles($latestVersion, $previousVersion, 'wordpress_version.txt');

.github/workflows/scripts/helpers.php

@@ -1,156 +0,0 @@
-<?php
-
-/**
- * Function replacing versions in a file by the regex pattern.
- */
-function replaceVersionInFile(string $filePath, string $pattern, string $replacement): void {
-  $content = file_get_contents($filePath);
-
-  if ($content === false) {
-    die("Failed to read the file at $filePath.");
-  }
-
-  $updatedContent = preg_replace($pattern, $replacement, $content);
-
-  if ($updatedContent === null || $updatedContent === $content) {
-    echo "Nothing to update in $filePath\n";
-    return;
-  }
-
-  if (file_put_contents($filePath, $updatedContent) === false) {
-    die("Failed to write the updated file at $filePath.");
-  }
-}
-
-/**
- * Function to filter stable versions from a list of versions.
- */
-function filterStableVersions(array $versions): array {
-  return array_filter($versions, function($version) {
-    // Only include stable versions (exclude versions with -rc, -beta, -alpha, etc.)
-    return preg_match('/^\d+\.\d+\.\d+$/', $version);
-  });
-}
-
-/**
- * Function to get the latest and previous minor/major versions from a list of versions.
- */
-function getLatestAndPreviousMinorMajorVersions(array $versions): array {
-  usort($versions, 'version_compare');
-  $currentVersion = end($versions);
-
-  $previousVersion = null;
-  foreach (array_reverse($versions) as $version) {
-    if (version_compare($version, $currentVersion, '<') && getMinorMajorVersion($version) !== getMinorMajorVersion($currentVersion)) {
-      $previousVersion = $version;
-      break;
-    }
-  }
-
-  return [$currentVersion, $previousVersion];
-}
-
-function getMinorMajorVersion(string $version): string {
-  $parts = explode('.', $version);
-  return $parts[0] . '.' . $parts[1];
-}
-
-/**
- * Function to fetch tags from a GitHub repository.
- */
-function fetchGitHubTags(string $repo, string $token, int $page = 1, int $limit = 50): array {
-  $url = "https://api.github.com/repos/$repo/tags?per_page=$limit&page=$page";
-  $ch = curl_init($url);
-  curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
-  curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0');  // GitHub API requires a user agent
-  curl_setopt($ch, CURLOPT_HTTPHEADER, [
-    "Authorization: token $token"
-  ]);
-  $response = curl_exec($ch);
-  curl_close($ch);
-
-  if ($response === false) {
-    die("Failed to fetch tags from GitHub.");
-  }
-
-  $data = json_decode($response, true);
-
-  if (isset($data['message']) && $data['message'] == 'Not Found') {
-    die("Repository not found or access denied.");
-  }
-
-  return array_column($data, 'name');
-}
-
-/**
- * Function saving versions to a temporary files.
- * File containing latest version is prefixed with 'latest_' and previous version is prefixed with 'previous_'.
- */
-function saveVersionsToFiles(?string $latestVersion, ?string $previousVersion, string $fileNameSuffix): void {
-  file_put_contents("/tmp/latest_{$fileNameSuffix}", $latestVersion);
-  file_put_contents("/tmp/previous_{$fileNameSuffix}", $previousVersion);
-}
-
-function replaceLatestVersion(string $latestVersion, string $downloadCommand): void {
-  replaceVersionInFile(
-    __DIR__ . '/../../../.circleci/config.yml',
-    '/(.\/do ' . $downloadCommand . ' )\d+\.\d+\.\d+/',
-    '${1}' . $latestVersion
-  );
-}
-
-function replacePreviousVersion(string $previousVersion, string $configParameterName): void {
-  replaceVersionInFile(
-    __DIR__ . '/../../../.circleci/config.yml',
-    '/(' . $configParameterName . ': )\d+\.\d+\.\d+/',
-    '${1}' . $previousVersion
-  );
-}
-
-/**
- * Function replacing the latest and previous versions of a private plugin in the config file.
- * The function fetches the tags from the GitHub repository, filters stable versions,
- * gets the latest and previous minor/major versions, and replaces the versions in the CircleCI config file.
- */
-function replacePrivatePluginVersion(
-  string $repository,
-  string $downloadCommand,
-  string $configParameterName,
-  string $versionsFilename
-): void {
-// Read the GitHub token from environment variable
-  $token = getenv('GH_TOKEN');
-  if (!$token) {
-    die("GitHub token not found. Make sure it's set in the environment variable 'GH_TOKEN'.");
-  }
-
-  $page = 1;
-  $latestVersion = null;
-  $previousVersion = null;
-  $allVersions = [];
-  while (($latestVersion === null || $previousVersion === null) && $page < 10) {
-    $allVersions = array_merge($allVersions, fetchGitHubTags($repository, $token, $page));
-    $stableVersions = filterStableVersions($allVersions);
-    [$latestVersion, $previousVersion] = getLatestAndPreviousMinorMajorVersions($stableVersions);
-    $page++;
-  }
-
-  echo "Latest version: $latestVersion\n";
-  echo "Previous version: $previousVersion\n";
-
-  if ($latestVersion) {
-    echo "Replacing the latest version in the config file...\n";
-    replaceLatestVersion($latestVersion, $downloadCommand);
-  } else {
-    echo "No latest version found.\n";
-  }
-
-  if ($previousVersion) {
-    echo "Replacing the previous version in the config file...\n";
-    replacePreviousVersion($previousVersion, $configParameterName);
-  } else {
-    echo "No previous version found.\n";
-  }
-
-  saveVersionsToFiles($latestVersion, $previousVersion, $versionsFilename);
-}

.github/workflows/update-wordpress-and-plugins.yml

@@ -1,182 +0,0 @@
-name: Check new versions of plugins and WordPress
-
-on:
-  schedule:
-    - cron: '0 6 * * 1' # At 06:00 on Monday
-  workflow_dispatch: # Allows manual triggering
-
-jobs:
-  check-versions:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Set up PHP
-        uses: shivammathur/setup-php@v2
-        with:
-          php-version: '8.3' # Specify the PHP version you want to use
-
-      # Updating used WordPress
-      - name: Check WordPress Docker Versions
-        run: php .github/workflows/scripts/check_wordpress_versions.php
-
-      - name: Check for WordPress changes
-        id: check_wp_changes
-        run: |
-          git config --global user.name 'github-actions[bot]'
-          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
-          if [ "$(git status --porcelain)" != "" ]; then
-            echo "CHANGES_DETECTED=true" >> $GITHUB_ENV
-            echo "WORDPRESS_CHANGES=true" >> $GITHUB_ENV
-          fi
-
-      - name: Get WordPress versions from files
-        id: get_wp_versions
-        run: |
-          echo "WORDPRESS_LATEST_VERSION=$(cat /tmp/latest_wordpress_version.txt)" >> $GITHUB_ENV
-          echo "WORDPRESS_PREVIOUS_VERSION=$(cat /tmp/previous_wordpress_version.txt)" >> $GITHUB_ENV
-
-      - name: Commit WordPress changes
-        if: env.WORDPRESS_CHANGES == 'true'
-        run: |
-          git add .
-          git commit -m $'Update used WordPress images in Circle CI\n\n - latest version: ${{ env.WORDPRESS_LATEST_VERSION }}\n - previous version: ${{ env.WORDPRESS_PREVIOUS_VERSION }}'
-
-      # Updating used WooCommerce plugin
-      - name: Check WooCommerce Versions
-        run: php .github/workflows/scripts/check_woocommerce_versions.php
-
-      - name: Check for WooCommerce changes
-        id: check_wc_changes
-        run: |
-          git config --global user.name 'github-actions[bot]'
-          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
-          if [ "$(git status --porcelain)" != "" ]; then
-            echo "CHANGES_DETECTED=true" >> $GITHUB_ENV
-            echo "WOOCOMMERCE_CHANGES=true" >> $GITHUB_ENV
-          fi
-
-      - name: Get WooCommerce versions from files
-        id: get_wc_versions
-        run: |
-          echo "WOOCOMMERCE_LATEST_VERSION=$(cat /tmp/latest_woocommerce_version.txt)" >> $GITHUB_ENV
-          echo "WOOCOMMERCE_PREVIOUS_VERSION=$(cat /tmp/previous_woocommerce_version.txt)" >> $GITHUB_ENV
-
-      - name: Commit WooCommerce changes
-        if: env.WOOCOMMERCE_CHANGES == 'true'
-        run: |
-          git add .
-          git commit -m $'Update used WooCommerce plugin in Circle CI\n\n - latest version: ${{ env.WOOCOMMERCE_LATEST_VERSION }}\n - previous version: ${{ env.WOOCOMMERCE_PREVIOUS_VERSION }}'
-
-      # Updating used Automate Woo plugin
-      - name: Check Automate Woo Versions
-        env:
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
-        run: php .github/workflows/scripts/check_automate_woo_versions.php
-
-      - name: Check for Automate Woo changes
-        id: check_aw_changes
-        run: |
-          git config --global user.name 'github-actions[bot]'
-          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
-          if [ "$(git status --porcelain)" != "" ]; then
-            echo "CHANGES_DETECTED=true" >> $GITHUB_ENV
-            echo "AUTOMATE_WOO_CHANGES=true" >> $GITHUB_ENV
-          fi
-
-      - name: Get Automate Woo versions from files
-        id: get_aw_versions
-        run: |
-          echo "AUTOMATE_WOO_LATEST_VERSION=$(cat /tmp/latest_automate_woo_version.txt)" >> $GITHUB_ENV
-          echo "AUTOMATE_WOO_PREVIOUS_VERSION=$(cat /tmp/previous_automate_woo_version.txt)" >> $GITHUB_ENV
-
-      - name: Commit Automate Woo changes
-        if: env.AUTOMATE_WOO_CHANGES == 'true'
-        run: |
-          git add .
-          git commit -m $'Update used Automate Woo plugin in Circle CI\n\n - latest version: ${{ env.AUTOMATE_WOO_LATEST_VERSION }}\n - previous version: ${{ env.AUTOMATE_WOO_PREVIOUS_VERSION }}'
-
-      # Updating used WooCommerce Subscriptions plugin
-      - name: Check WooCommerce Subscriptions Versions
-        env:
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
-        run: php .github/workflows/scripts/check_woocommerce_subscriptions_versions.php
-
-      - name: Check for WooCommerce Subscriptions changes
-        id: check_ws_changes
-        run: |
-          git config --global user.name 'github-actions[bot]'
-          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
-          if [ "$(git status --porcelain)" != "" ]; then
-            echo "CHANGES_DETECTED=true" >> $GITHUB_ENV
-            echo "SUBSCRIPTIONS_CHANGES=true" >> $GITHUB_ENV
-          fi
-
-      - name: Get WooCommerce Subscriptions versions from files
-        id: get_ws_versions
-        run: |
-          echo "WOOCOMMERCE_SUBSCRIPTIONS_LATEST_VERSION=$(cat /tmp/latest_woocommerce_subscriptions_version.txt)" >> $GITHUB_ENV
-          echo "WOOCOMMERCE_SUBSCRIPTIONS_PREVIOUS_VERSION=$(cat /tmp/previous_woocommerce_subscriptions_version.txt)" >> $GITHUB_ENV
-
-      - name: Commit WooCommerce Subscriptions changes
-        if: env.SUBSCRIPTIONS_CHANGES == 'true'
-        run: |
-          git add .
-          git commit -m $'Update used WooCommerce Subscriptions plugin in Circle CI\n\n - latest version: ${{ env.WOOCOMMERCE_SUBSCRIPTIONS_LATEST_VERSION }}\n - previous version: ${{ env.WOOCOMMERCE_SUBSCRIPTIONS_PREVIOUS_VERSION }}'
-
-      # Updating used WooCommerce Memberships plugin
-      - name: Check WooCommerce Memberships Versions
-        env:
-          GH_TOKEN: ${{ secrets.GH_TOKEN }}
-        run: php .github/workflows/scripts/check_woocommerce_memberships_versions.php
-
-      - name: Check for WooCommerce Memberships changes
-        id: check_wm_changes
-        run: |
-          git config --global user.name 'github-actions[bot]'
-          git config --global user.email 'github-actions[bot]@users.noreply.github.com'
-          if [ "$(git status --porcelain)" != "" ]; then
-            echo "CHANGES_DETECTED=true" >> $GITHUB_ENV
-            echo "MEMBERSHIPS_CHANGES=true" >> $GITHUB_ENV
-          fi
-
-      - name: Get WooCommerce Memberships versions from files
-        id: get_wm_versions
-        run: |
-          echo "WOOCOMMERCE_MEMBERSHIPS_LATEST_VERSION=$(cat /tmp/latest_woocommerce_memberships_version.txt)" >> $GITHUB_ENV
-          echo "WOOCOMMERCE_MEMBERSHIPS_PREVIOUS_VERSION=$(cat /tmp/previous_woocommerce_memberships_version.txt)" >> $GITHUB_ENV
-
-      - name: Commit WooCommerce Memberships changes
-        if: env.MEMBERSHIPS_CHANGES == 'true'
-        run: |
-          git add .
-          git commit -m $'Update used WooCommerce Memberships plugin in Circle CI\n\n - latest version: ${{ env.WOOCOMMERCE_MEMBERSHIPS_LATEST_VERSION }}\n - previous version: ${{ env.WOOCOMMERCE_MEMBERSHIPS_PREVIOUS_VERSION }}'
-
-      # Push all changes at the end if any changes were detected
-      #
-      # For local testing with act tool add following:
-      # env:
-      #   GH_PAT: ${{ secrets.GH_TOKEN }}
-      # run: |
-      #   git remote set-url origin https://${GH_PAT}@github.com/mailpoet/mailpoet
-      #   git push -f origin HEAD:refs/heads/update-plugins-and-wordpress-test
-      - name: Push changes
-        if: env.CHANGES_DETECTED == 'true'
-        run: |
-          git push -f origin HEAD:refs/heads/update-plugins-and-wordpress
-
-      # Create a pull request if there are changes
-      - name: Create Pull Request
-        if: env.CHANGES_DETECTED == 'true'
-        uses: peter-evans/create-pull-request@v6
-        with:
-          token: ${{ secrets.GH_TOKEN }}
-          branch: update-plugins-and-wordpress
-          title: Update WordPress and plugins in CI jobs
-          base: trunk
-          labels: automated, check-versions
-          body: |
-            1. If all checks passed, you can merge this PR.
-            2. If the build failed, please investigate the failure and either address the issues or delegate the job. Then, make sure these changes are merged.

.github/workflows/wordpress-playground-preview.yml

@@ -1,27 +0,0 @@
-name: Add link to WordPress Playground preview
-
-on:
-  pull_request:
-    types: [opened, reopened, synchronize]
-
-jobs:
-  add-wp-playground-link:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Check and append description
-        shell: bash
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: |
-          PR_NUMBER="${{ github.event.pull_request.number }}"
-          BRANCH_NAME="${{ github.head_ref }}"
-          DESCRIPTION="$(gh pr view $PR_NUMBER --json body -q .body)"
-          HEADING="## Preview"
-          CONTENT="$(printf "${HEADING}\n\n[Preview in WordPress Playground](https://account.mailpoet.com/playground/new/branch:${BRANCH_NAME})\n\n_The latest successful build from \`${BRANCH_NAME}\` will be used. If none is available, the link won't work._")"
-
-          if [[ "$DESCRIPTION" != *"$HEADING"* ]]; then
-            gh pr edit $PR_NUMBER --body "$(printf "${DESCRIPTION}\n\n${CONTENT}")"
-          fi

.gitignore

@@ -1,13 +1,31 @@
 .DS_Store
-.env
-.idea
-.vscode
-dev/data
-docker-compose.override.yml
+TODO
+/vendor
+/vendor-prefixed
+/vendor_backup
+/vendor-backup
+/vendor-prefixed-backup
+tests/_output/*
+tests/_support/_generated/*
 node_modules
+.env
 npm-debug.log
-mailpoet-premium
-tsconfig.tsbuildinfo
-/wordpress
-packages/php/*/vendor
-tests_env/vendor
+!tasks/**
+/views/cache/**
+temp
+.idea
+mailpoet.zip
+tests/javascript_newsletter_editor/testBundles
+assets/dist
+.vagrant
+lang
+.mp_svn
+/nbproject/
+tests/_data/acceptanceBackup.sql
+lib/DI/CachedContainer.php
+prefixer/vendor
+prefixer/build
+docker-compose.override.yml
+tasks/code_sniffer/vendor
+tasks/phpstan/vendor
+/tools/vendor

.husky/.gitignore

@@ -1 +0,0 @@
-_

.husky/common.sh

@@ -1,41 +0,0 @@
-#!/usr/bin/env bash
-
-. "$(dirname "$0")/../mailpoet/.env"
-
-export MP_GIT_HOOKS_ENABLE="${MP_GIT_HOOKS_ENABLE:-true}"
-export MP_GIT_HOOKS_ESLINT="${MP_GIT_HOOKS_ESLINT:-true}"
-export MP_GIT_HOOKS_STYLELINT="${MP_GIT_HOOKS_STYLELINT:-true}"
-export MP_GIT_HOOKS_PHPLINT="${MP_GIT_HOOKS_PHPLINT:-true}"
-export MP_GIT_HOOKS_CODE_SNIFFER="${MP_GIT_HOOKS_CODE_SNIFFER:-true}"
-export MP_GIT_HOOKS_PHPSTAN="${MP_GIT_HOOKS_PHPSTAN:-true}"
-export MP_GIT_HOOKS_INSTALL_JS="${MP_GIT_HOOKS_INSTALL_JS:-false}"
-export MP_GIT_HOOKS_INSTALL_PHP="${MP_GIT_HOOKS_INSTALL_PHP:-false}"
-
-fileChanged() {
-  local filePattern="$1"
-  local changedFiles="$2"
-  if echo "$changedFiles" | grep -qE "$filePattern"; then
-      return 0
-  else
-      return 1
-  fi
-}
-
-installIfUpdates() {
-  local changedFiles="$(git diff-tree -r --name-only --no-commit-id HEAD@{1} HEAD)"
-
-  if [ "$MP_GIT_HOOKS_INSTALL_JS" = "true" ] && fileChanged "pnpm-lock.yaml" "$changedFiles"; then
-    echo "Change detected in pnpm-lock.yaml, running do install:js"
-    pushd mailpoet
-    ./do install:js
-    popd
-  fi
-
-  if [ "$MP_GIT_HOOKS_INSTALL_PHP" = "true" ] && fileChanged "mailpoet/composer.lock" "$changedFiles"; then
-    echo "Change detected in mailpoet/composer.lock, running do install:php"
-    pushd mailpoet
-    ./do install:php
-    popd
-  fi
-}
-

.husky/post-checkout

@@ -1,8 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-. "$(dirname "$0")/common.sh"
-[ "$MP_GIT_HOOKS_ENABLE" != "true" ] && exit 0
-
-installIfUpdates
-
-./do cleanup:cached-files

.husky/post-merge

@@ -1,7 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-. "$(dirname "$0")/common.sh"
-[ "$MP_GIT_HOOKS_ENABLE" != "true" ] && exit 0
-
-
-installIfUpdates

.husky/post-rewrite

@@ -1,7 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-. "$(dirname "$0")/common.sh"
-[ "$MP_GIT_HOOKS_ENABLE" != "true" ] && exit 0
-
-
-installIfUpdates

.husky/pre-commit

@@ -1,8 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/common.sh"
-[ "$MP_GIT_HOOKS_ENABLE" != "true" ] && exit 0
-
-npx lint-staged -c mailpoet/package.json --cwd mailpoet
-npx lint-staged -c package.json
-npx lint-staged -c packages/js/email-editor/package.json --cwd packages/js/email-editor
-npx lint-staged -c packages/php/email-editor/.lintstagedrc.json --cwd packages/php/email-editor

.npmrc

@@ -1,2 +1 @@
-auto-install-peers=false
-strict-peer-dependencies=false
+engine-strict=true

.nvmrc

@@ -1 +0,0 @@
-v19.7.0

.pnpmfile.cjs

@@ -1,22 +0,0 @@
-function readPackage(pkg) {
-  // Resolve @wordpress/* dependencies of @woocommerce packages to those used by MailPoet.
-  // This avoids their duplication and downgrading due to @woocommerce pinning them to wp-6.0.
-  // This should be removed once we adopt similar pinning strategy and use dependency extraction.
-  // See: https://github.com/woocommerce/woocommerce/pull/37034
-  if (pkg.name?.startsWith('@woocommerce/')) {
-    pkg.dependencies = Object.fromEntries(
-      Object.entries(pkg.dependencies).map(([name, version]) =>
-        name.startsWith('@wordpress/') || name.startsWith('@types/wordpress__')
-          ? [name, '*']
-          : [name, version],
-      ),
-    );
-  }
-  return pkg;
-}
-
-module.exports = {
-  hooks: {
-    readPackage,
-  },
-};

.prettierignore

@@ -1,29 +0,0 @@
-*.hbs
-.mp_svn
-_generated
-_output
-composer.json
-composer.lock
-node_modules
-pnpm-lock.yaml
-vendor
-vendor-prefixed
-/.mp_svn
-/dev/data
-/mailpoet/assets/dist
-/mailpoet/assets/js/lib
-/mailpoet/assets/js/src/newsletter-editor/behaviors/tinymce-icons.js
-/mailpoet/generated
-/mailpoet/lang
-/mailpoet/lib/Newsletter/Renderer/Template.html
-/mailpoet/lib-3rd-party
-/mailpoet/plugin_repository
-/mailpoet/temp
-/mailpoet/tests/javascript-newsletter-editor/testBundles
-/mailpoet/tests/plugins
-/mailpoet/tools/wpscan-semgrep-rules
-/mailpoet/views
-/mailpoet-premium
-/wordpress
-/packages/php/email-editor
-/packages/js/email-editor

.prettierrc

@@ -1,5 +0,0 @@
-{
-  "printWidth": 80,
-  "singleQuote": true,
-  "trailingComma": "all"
-}

.stylelintrc

@@ -0,0 +1,110 @@
+{
+  "plugins": [
+    "stylelint-order",
+    "stylelint-scss"
+  ],
+  "rules": {
+    "at-rule-empty-line-before": ["always", {
+      except: ["first-nested", "blockless-after-blockless"],
+    }],
+    "at-rule-name-case": "lower",
+    "at-rule-semicolon-newline-after": "always",
+    "block-closing-brace-empty-line-before": "never",
+    "block-closing-brace-newline-after": "always",
+    "block-closing-brace-newline-before": "always-multi-line",
+    "block-closing-brace-space-before": "always-single-line",
+    "block-no-empty": true,
+    "block-opening-brace-newline-after": "always-multi-line",
+    "block-opening-brace-space-after": "always-single-line",
+    "block-opening-brace-space-before": "always",
+    "color-hex-case": "lower",
+    "color-hex-length": "short",
+    "color-no-invalid-hex": true,
+    "comment-no-empty": true,
+    "comment-whitespace-inside": "always",
+    "declaration-bang-space-after": "never",
+    "declaration-bang-space-before": "always",
+    "declaration-block-no-duplicate-properties": [true, {
+      ignore: ["consecutive-duplicates-with-different-values"],
+    }],
+    "declaration-block-no-redundant-longhand-properties": [true, {
+        ignoreShorthands: [/flex/, /grid/]
+    }],
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+    "declaration-block-semicolon-space-after": "always-single-line",
+    "declaration-block-semicolon-space-before": "never",
+    "declaration-block-single-line-max-declarations": 1,
+    "declaration-colon-newline-after": "always-multi-line",
+    "declaration-colon-space-after": "always-single-line",
+    "declaration-colon-space-before": "never",
+    "declaration-empty-line-before": "never",
+    "font-family-no-duplicate-names": true,
+    "function-calc-no-invalid": true,
+    "function-comma-space-after": "always-single-line",
+    "function-comma-space-before": "never",
+    "function-max-empty-lines": 0,
+    "function-name-case": "lower",
+    "function-parentheses-newline-inside": "always-multi-line",
+    "function-parentheses-space-inside": "never-single-line",
+    "function-url-quotes": "always",
+    "function-whitespace-after": "always",
+    "indentation": 2,
+    "keyframe-declaration-no-important": true,
+    "length-zero-no-unit": true,
+    "max-empty-lines": 1,
+    "media-feature-colon-space-after": "always",
+    "media-feature-colon-space-before": "never",
+    "media-feature-name-case": "lower",
+    "media-feature-name-no-unknown": true,
+    "media-feature-parentheses-space-inside": "never",
+    "media-feature-range-operator-space-after": "always",
+    "media-query-list-comma-newline-after": "always-multi-line",
+    "media-query-list-comma-space-after": "always-single-line",
+    "media-query-list-comma-space-before": "never",
+    "no-duplicate-selectors": true,
+    "no-eol-whitespace": true,
+    "no-extra-semicolons": true,
+    "no-missing-end-of-source-newline": true,
+    "number-leading-zero": "never",
+    "number-no-trailing-zeros": true,
+    "order/properties-alphabetical-order": true,
+    "property-case": "lower",
+    "property-no-unknown": true,
+    "rule-empty-line-before": ["always-multi-line", {
+      except: ["first-nested"],
+      ignore: ["after-comment"]
+    }],
+    "scss/at-rule-no-unknown": true,
+    "scss/dollar-variable-colon-space-after": "always",
+    "scss/dollar-variable-colon-space-before": "never",
+    "scss/operator-no-newline-after": true,
+    "scss/operator-no-newline-before": true,
+    "scss/operator-no-unspaced": true,
+    "scss/selector-no-redundant-nesting-selector": true,
+    "selector-attribute-brackets-space-inside": "never",
+    "selector-attribute-operator-space-after": "never",
+    "selector-attribute-operator-space-before": "never",
+    "selector-combinator-space-after": "always",
+    "selector-combinator-space-before": "always",
+    "selector-list-comma-newline-after": "always",
+    "selector-list-comma-space-before": "never",
+    "selector-max-empty-lines": 0,
+    "selector-nested-pattern": "^(?!&-|&_).*",
+    "selector-pseudo-class-case": "lower",
+    "selector-pseudo-class-no-unknown": true,
+    "selector-pseudo-class-parentheses-space-inside": "never",
+    "selector-pseudo-element-case": "lower",
+    "selector-pseudo-element-colon-notation": "single",
+    "selector-pseudo-element-no-unknown": true,
+    "selector-type-case": "lower",
+    "shorthand-property-no-redundant-values": true,
+    "string-no-newline": true,
+    "string-quotes": "single",
+    "unit-case": "lower",
+    "unit-no-unknown": true,
+    "value-list-comma-newline-after": "always-multi-line",
+    "value-list-comma-space-after": "always-single-line",
+    "value-list-comma-space-before": "never",
+    "value-list-max-empty-lines": 0,
+  },
+}

.tx/config

@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[mp3.mailpoet]
+file_filter = lang/mailpoet-<lang>.po
+minimum_perc = 30
+source_file = lang/mailpoet.pot
+source_lang = en_US
+type = PO

.woodpecker.yml

@@ -1,30 +0,0 @@
-clone:
-  git:
-    image: woodpeckerci/plugin-git
-    settings:
-      depth: 1
-
-steps:
-  build:
-    image: node:current-bookworm-slim
-    commands:
-      - apt update
-      - apt install php php-symfony bash -y
-      - npm install pnpm
-      - cd mailpoet
-      - bash build.sh
-      - mkdir ../output
-      - mv mailpoet.zip ../output
-      - cd ..
-
-  release:
-    image: woodpeckerci/plugin-gitea-release:latest
-    settings:
-      base_url: https://git.cavemanon.xyz
-      api_key:
-        from_secret: releasesmithapikey
-      files: "output/"
-      prerelease: false
-      title: "${CI_COMMIT_TAG}"
-    when:
-      - event: tag

CONTRIBUTING.md

@@ -1,51 +1,37 @@
 # Contributing
 
-There is a `./do` command that helps with the development process. See [README](README.md) for more details.
-
 ## PHP Code
-
 - Two spaces indentation.
-- Space between keyword and left bracket (`if ()`, `for ()`, `switch ()`...).
-- `CamelCase` for classes.
-- `camelCase` for methods.
-- `snake_case` for variables and class properties.
+- Space between keyword (if, for, switch...) and left bracket
+- CamelCase for classes.
+- camelCase for methods.
+- snake_case for variables and class properties.
 - Composition over Inheritance.
 - Comments are a code smell. If you need to use a comment - see if same idea can be achieved by more clearly expressing code.
-- Require other classes with `use` at the beginning of the class file.
+- Require other classes with 'use' at the beginning of the class file.
+- Do not specify 'public' if method is public, it's implicit.
 - Always use guard clauses.
-- Ensure compatibility with PHP 7.4 and newer versions.
+- Ensure compatibility with PHP 5.5 and newer versions.
 - Cover your code in tests.
 
 ## SCSS Code
-
-- `kebab-case` for file names.
-- Components files are prefixed with underscore, to indicate, that they aren't compiled separately (`_new-component.scss`).
+- camelCase for file name
+- Components files are prefixed with underscore, to indicate, that they aren't compiled separately.
 
 ## JS Code
-
 - Javascript code should follow the [Airbnb style guide](https://github.com/airbnb/javascript).
-- Prefer named export before default export in JS and TS files
-- Default to TypeScript for new files.
-
-## Disabling linting rules
-
-- We want to avoid using `eslint-disable`
-- If we have to use it we need to use a comment explaining why do we need it:
-  `/* eslint-disable no-new -- this class has a side-effect in the constructor and it's a library's. */`
-- For PHP we do the same with the exception `// phpcs:ignore Squiz.NamingConventions.ValidVariableName.MemberNotCamelCaps` which for now doesn’t require an explanation
 
 ## Git flow
-
-- Do not commit to trunk.
+- Do not commit to master.
 - Open a short-living feature branch.
-- Use good commit messages as explained here https://chris.beams.io/posts/git-commit. Include Jira ticket in the commit message.
+- Open a pull request.
+- Add Jira issue reference in the title of the Pull Request.
+- Work on the pull request.
 - Use the `./do qa` command to check your code style before pushing.
-- Create a pull request when finished. Include Jira ticket in the title of the pull request.
+- Use good commit messages as explained here https://chris.beams.io/posts/git-commit
 - Wait for review from another developer.
 
-## Feature flags
-
-We use feature flags to control the visibility of new features. This allows us to work on new features in smaller chunks before they are released to all customers.
-
-- Feature flags can be enabled on the experimental page: `/admin.php?page=mailpoet-experimental`.
-- New feature flags can be added in the class `FeaturesController`.
+## Issues creation
+- Issues are managed on Jira.
+- Discuss issues on public Slack chats, discuss code in pull requests.
+- Open a small Jira issue only when it has been discussed.

README.md

@@ -1,218 +1,162 @@
-### Table of Contents
+# MailPoet
 
-1. [MailPoet](#mailpoet)
-2. [Initial setup](#initial-setup)
-   1. [Additional dependencies](#additional-dependencies)
-3. [Xdebug](#xdebug)
-   1. [PhpStorm setup](#phpstorm-setup)
-   2. [Xdebug develop mode](#xdebug-develop-mode)
-   3. [Xdebug for integration tests](#xdebug-for-integration-tests)
-4. [Local development](#local-development)
-   1. [NFS volume sharing for Mac](#nfs-volume-sharing-for-mac)
-   2. [Husky hooks](#husky-hooks)
-5. [Docker](#docker)
-   1. [Commands](#commands)
-   2. [Available PHP versions](#available-php-versions)
-   3. [Disabling the Tracy panel](#disabling-the-tracy-panel)
-   4. [Running individual tests](#running-individual-tests)
-6. [TODO](#todo)
+MailPoet done the right way.
 
-## MailPoet
+# Contents
 
-The **MailPoet** plugin monorepo.
+- [Setup](#setup)
+- [Frameworks and libraries](#frameworks-and-libraries)
+- [Workflow Commands](#workflow-commands)
+- [Coding and Testing](#coding-and-testing)
 
-If you have **any questions or need help or support**, please see the [Support](SUPPORT.md) document.
+# Setup
 
-To use our Docker-based development environment (recommended), continue with the steps below.
-If you'd like to use the plugin code directly, see details in [the plugin's readme](mailpoet/README.md).
+## Requirements
+- PHP 5.6+
+- NodeJS
+- WordPress
+- Docker & Docker Compose
 
-## Initial setup
-
-1. Run `./do setup` to pull everything and install necessary dependencies.
-2. Add secrets to `.env` files in `mailpoet` and `mailpoet-premium` directories. Go to the Secret Store and look for "MailPoet: plugin .env"
-3. Run `./do start` to start the stack.
-4. Go to http://localhost:8888 to see the dashboard of the dev environment.
-
-### Additional dependencies
-
-Even though it's possible to run everything using Docker, in the development workflow,
-it may be faster and more convenient to run some tasks outside the container. Therefore,
-the following tools are recommended:
-
-1. **PHP** as per `composer.json` requirements.
-2. **Node.js**, as specified by `.nvmrc`. For automatic management use [nvm](https://github.com/nvm-sh/nvm), [FNM](https://github.com/Schniz/fnm), or [Volta](https://github.com/volta-cli/volta).
-3. **pnpm**, as specified in `package.json`. For automatic setup enable [Corepack](https://nodejs.org/docs/latest-v17.x/api/corepack.html) using `corepack enable`.
-
-## Xdebug
-
-### PhpStorm setup
-
-In `Languages & Preferences > PHP > Servers` set path mappings:
-
-```shell
-wordpress        -> /var/www/html
-mailpoet         -> /var/www/html/wp-content/plugins/mailpoet
-mailpoet-premium -> /var/www/html/wp-content/plugins/mailpoet-premium
+## Installation
+```bash
+# go to WP plugins directory
+$ cd path_to_wp_directory/wp-content/plugins
+# clone this repository
+$ git clone https://github.com/mailpoet/mailpoet.git
+$ cd mailpoet
+# create the .env file
+$ cp .env.sample .env
+# change the values on .env file
+# install all dependencies (PHP and JS)
+$ ./do install
+# compile JS and CSS files
+$ ./do compile:all
 ```
 
-For PHP 8 and XDebug 3 we support **browser debugging extension**.
-You can choose extension by your browser in [JetBrains documentation](https://www.jetbrains.com/help/phpstorm/browser-debugging-extensions.html).
+# Frameworks and libraries
 
-To use XDebug inside the **cron**, you need to pass a URL argument `&XDEBUG_TRIGGER=yes`
-[in the cron request](https://github.com/mailpoet/mailpoet/blob/bf7bd6d2d9090ed6ec7b8b575bb7d6b08e663a52/lib/Cron/CronHelper.php#L155-L166).
-Alternatively, you can add `XDEBUG_TRIGGER: yes` to the `wordpress` service in `docker-compose.yml` and restart it (which will run XDebug also for all other requests).
+- [Paris ORM](https://github.com/j4mie/paris).
+- [Symfony/dependency-injection](https://github.com/symfony/dependency-injection) ([docs for 3.4](https://symfony.com/doc/3.4/components/dependency_injection.html)).
+- [PHP-Scoper](https://github.com/humbug/php-scoper) for moving dependencies into MP namespace
+- [Twig](https://twig.symfony.com/) and [Handlebars](https://handlebarsjs.com/) are used for templates rendering.
+- [Monolog](https://seldaek.github.io/monolog/) is used for logging.
+- [Robo](https://robo.li/) is used to write and run workflow commands.
+- [Codeception](https://codeception.com/) is used to write unit and acceptance tests.
+- [Docker](https://www.docker.com/), [Docker Compose](https://docs.docker.com/compose/) and [Selenium](https://www.seleniumhq.org/) to run acceptance tests.
+- [React](https://reactjs.org/) is used to create most of UIs.
+- [Marionette](https://marionettejs.com/) is used to build the newsletters editor.
+- [SCSS](http://sass-lang.com/) is used to write styles.
+- [Mocha](https://mochajs.org/), [Chai](https://www.chaijs.com/) and [Sinon](https://sinonjs.org/) are used to write Javascript tests.
+- [ESLint](https://eslint.org/) is used to lint JS files.
+- [Webpack](https://webpack.js.org/) is used to bundle assets.
 
-### Xdebug develop mode
+# Workflow Commands
 
-[Xdebug develop mode](https://xdebug.org/docs/develop) is disabled by default because it causes performance issues due to conflicts with the DI container.
+```bash
+$ ./do install             # install PHP and JS dependencies
+$ ./do update              # update PHP and JS dependencies
 
-It can be enabled when needed using the `XDEBUG_MODE` environment variable. For example, it is possible to enable it by adding the following to `docker-compose.override.yml`:
+$ ./do compile:css         # compiles SCSS files into CSS.
+$ ./do compile:js          # bundles JS files for the browser.
+$ ./do compile:all         # compiles CSS and JS files.
 
-```
-environment:
-    XDEBUG_MODE: debug, develop
+$ ./do watch:css           # watch CSS files for changes and compile them.
+$ ./do watch:js            # watch JS files for changes and compile them.
+$ ./do watch               # watch CSS and JS files for changes and compile them.
+
+$ ./do test:unit [--file=...] [--debug]
+  # runs the PHP unit tests.
+  # if --file specified then only tests on that file are executed.
+  # if --debug then tests are executed in debugging mode.
+$ ./do test:integration [--file=...] [--multisite] [--debug]
+  # runs the PHP integration tests.
+  # if --file specified then only tests on that file are executed.
+  # if --multisite then tests are executed in a multisite wordpress setup.
+  # if --debug then tests are executed in debugging mode.
+$ ./do test:multisite:integration # alias for ./do test:integration --multisite
+$ ./do test:debug:unit            # alias for ./do test:unit --debug
+$ ./do test:debug:integration     # alias for ./do test:integration --debug
+$ ./do test:failed:unit           # run the last failing unit test.
+$ ./do test:failed:integration    # run the last failing integration test.
+$ ./do test:coverage              # run tests and output coverage information.
+$ ./do test:javascript            # run the JS tests.
+$ ./do test:acceptance [--file=...] [--skip-deps]
+  # run acceptances tests into a docker environment.
+  # if --file given then only tests on that file are executed.
+  # if --skip-deps then it skips installation of composer dependencies.
+$ ./do test:acceptance:multisite [--file=...] [--skip-deps]
+  # same as test:acceptance but runs into a multisite wordpress setup.
+$ ./do delete:docker      # stop and remove all running docker containers.
+
+$ ./do qa:lint             # PHP code linter.
+$ ./do qa:lint:javascript  # JS code linter.
+$ ./do qa:phpstan          # PHP code static analysis using PHPStan.
+$ ./do qa                  # PHP and JS linters.
+
+$ ./do changelog:get  [--version-name=...]     # Prints out changelog and release notes for given version or for newest version.
+$ ./do changelog:update  [--version-name=...] [--quiet] # Updates changelog in readme.txt for given version or for newest version.
+
+$ ./do container:dump      # Generates DI container cache.
 ```
 
-### Xdebug for integration tests
+# Coding and Testing
 
-- In Languages & Preferences > PHP > Servers create a new sever named `MailPoetTest`, set the host to `localhost` and port to `80` and set following path mappings:
+## DI
 
-```shell
-wordpress        -> /wp-core
-mailpoet         -> /wp-core/wp-content/plugins/mailpoet
-mailpoet-premium -> /wp-core/wp-content/plugins/mailpoet-premium
-mailpoet/vendor/bin/codecept -> /project/vendor/bin/codecept
-mailpoet/vendor/bin/wp -> /usr/local/bin/wp
+We use Symfony/dependency-injection container. Container configuration can be found in `libs/DI/ContainerFactory.php`
+The container is configured and used with minimum sub-dependencies to keep final package size small.
+You can check [the docs](https://symfony.com/doc/3.4/components/dependency_injection.html) to learn more about Symfony Container.
+
+## PHP-Scoper
+
+We use PHP-Scoper package to prevent plugin libraries conflicts in PHP. Two plugins may be using different versions of a library. PHP-Scoper prefix dependencies namespaces and they are then moved into `vendor-prefixed` directory.
+Dependencies handled by PHP-Scoper are configured in extra configuration files `prefixer/composer.json` and `prefixer/scoper.inc.php`. Installation and processing is triggered in post scripts of the main `composer.json` file.
+
+## i18n
+
+We use functions `__()`, `_n()` and `_x()` with domain `mailpoet` to translate strings.
+
+**in PHP code**
+
+```php
+__('text to translate', 'mailpoet');
+_n('single text', 'plural text', $number, 'mailpoet');
+_x('text to translate', 'context for translators', 'mailpoet');
 ```
 
-- Add `XDEBUG_TRIGGER: 1` environment to `tests_env/docker/docker-compose.yml` -> codeception service to start triggering Xdebug
-- Make PHPStorm listen to connections by clicking on the phone icon
+**in Twig views**
 
-## Local development
-
-### NFS volume sharing for Mac
-
-NFS volumes can bring more stability and performance on Docker for Mac. To setup NFS volume sharing run:
-
-```shell
-sudo sh dev/mac-nfs-setup.sh
+```html
+<%= __('text to translate') %>
+<%= _n('single text', 'plural text', $number) %>
+<%= _x('text to translate', 'context for translators') %>
 ```
 
-Then create a Docker Compose override file with NFS settings and restart containers:
+The domain `mailpoet` will be added automatically by the Twig functions.
 
-```shell
-cp docker-compose.override.macos-sample.yml docker-compose.override.yml
+**in Javascript code**
 
-docker compose down -v --remove-orphans
-docker compose up -d
+First add the string to the translations block in the Twig view:
+
+```html
+<% block translations %>
+  <%= localize({
+    'key': __('string to translate'),
+    ...
+  }) %>
+<% endblock %>
 ```
 
-**NOTE:** If you are on MacOS Catalina or newer, make sure to put the repository
-outside your `Documents` folder, otherwise you may run into [file permission issues](https://objekt.click/2019/11/docker-the-problem-with-macos-catalina/).
+Then use `MailPoet.I18n.t('key')` to get the translated string on your Javascript code.
 
-### Husky hooks
+## Acceptance testing
 
-We use [Husky](https://github.com/typicode/husky) to run automated checks in pre-commit hooks.
+We are using Gravity Flow plugin's setup as an example for our acceptance test suite: https://www.stevenhenty.com/learn-acceptance-testing-deeply/
 
-In case you're using [NVM](https://github.com/nvm-sh/nvm) for Node version management you may
-need to create or update your `~/.huskyrc` file with:
+From the article above:
 
-```sh
-# This loads nvm.sh and sets the correct PATH before running the hooks:
-export NVM_DIR="$HOME/.nvm"
-[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
-```
+_Windows users only: enable hard drive sharing in the Docker settings._
 
-Without it, you may experience errors in some Git clients.
-
-## Docker
-
-### Commands
-
-The `./do` script define aliases for most of the commands you will need while working on plugins:
-
-```shell
-./do setup                           Setup the environment.
-./do start                           Start the docker containers.
-./do stop                            Stop the docker containers.
-./do ssh [--test]                    Run an interactive bash shell inside the plugin directory.
-./do run [--test] <command>          Run a custom bash command in the wordpress container.
-./do acceptance [--premium]          Run acceptance tests.
-./do build [--premium]               Builds a .zip for the plugin.
-./do templates                       Generates templates classes and assets.
-./do [--test] [--premium] <command>  Run './do <command>' inside the plugin directory.
-
-Options:
-   --test     Run the command using the 'test_wordpress' service.
-   --premium  Run the command inside the premium plugin.
-```
-
-You can access this help in your command line running `./do` without parameters.
-
-### Available PHP versions
-
-To switch the environment to a different PHP version:
-
-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/{PHP_VERSION}/Dockerfile
-   ```
-
-3. Run `docker compose build wordpress`.
-4. Start the stack with `./do start`.
-
-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`.
-
-### Disabling the Tracy panel
-
-To disable the Tracy panel, add the following to `docker-compose.override.yml`:
-
-```yaml
-services:
-  wordpress:
-    environment:
-      MAILPOET_DISABLE_TRACY_PANEL: 1
-```
-
-### Running individual tests
-
-It's recommended to run tests in Docker. Free plugin tests can be run using --test flag (`./do --test`). However, to run a premium test, you need to ssh into test container (`./do ssh --test`) and run tests there.
-
-#### Integration test in the free plugin
-
-```shell
-./do --test test:integration --skip-deps --file=tests/integration/WP/EmojiTest.php
-```
-
-#### Acceptance test in the free plugin
-
-```shell
-./do --test test:acceptance --skip-deps --file=tests/acceptance/Misc/MailpoetMenuCest.php
-```
-
-#### Unit/integration test in the premium plugin
-
-```shell
-./do ssh --test # to enter the container
-cd ../mailpoet-premium # switch to premium plugin directory
-./do test:unit --file=tests/unit/Config/EnvTest.php
-```
-
-#### Acceptance test in the premium plugin
-
-```shell
-cd ./mailpoet-premium # switch to premium plugin directory on your local machine
-./do test:acceptance --skip-deps --file tests/acceptance/PremiumCheckCest.php
-```
-
-## TODO
-
-- [ ] Install WooCommerce
-- [ ] Install Members
-- [ ] Install other useful plugins by default
+The browser runs in a docker container. You can use a VNC client to watch the test run, follow instructions in official
+repo: https://github.com/SeleniumHQ/docker-selenium
+If you’re on a Mac, you can open vnc://localhost:5900 in Safari to watch the tests running in Chrome. If you’re on Windows, you’ll need a VNC client. Password: secret.

SUPPORT.md

@@ -1,5 +0,0 @@
-# Support
-
-Please visit our [Support](https://www.mailpoet.com/support/) page. We have a team of Happiness Engineers ready to help you.
-
-For feature requests, please use our [tracker](https://feedback.mailpoet.com).

assets/css/src/admin.scss

@@ -0,0 +1,30 @@
+@import 'components/mixins';
+@import '../../../node_modules/select2/dist/css/select2';
+@import 'components/automaticEmails';
+@import 'components/datepicker/datepicker';
+@import 'components/dynamicSegments';
+@import 'components/common';
+@import 'components/modal';
+@import 'components/notice';
+@import 'components/formEditorLegacy';
+@import 'components/listing';
+@import 'components/listing/newsletters';
+@import 'components/box';
+@import 'components/breadcrumb';
+@import 'components/form';
+@import 'components/parsley';
+@import 'components/formValidation';
+@import 'components/settings';
+@import 'components/progressBar';
+@import 'components/subscribers';
+@import 'components/pages';
+@import 'components/pagesCustom';
+@import 'components/premiumPage';
+@import 'components/mp2migrator';
+@import 'components/newsletterTemplates';
+@import 'components/welcomeWizard';
+@import 'components/featureAnnouncement';
+@import 'components/newsletterCongratulate.scss';
+@import 'components/discounts';
+@import 'components/reviewRequest';
+@import 'components/stats';

assets/css/src/adminGlobal.scss

@@ -0,0 +1,2 @@
+@import 'components/globals';
+@import 'components/plugins/members';

assets/css/src/components/_automaticEmails.scss

@@ -0,0 +1,34 @@
+div.event-selection,
+div.event-option-selection:not(:empty),
+div.event-segment-selection,
+div.event-scheduling-time-duration-selection,
+div.event-scheduling-time-interval-selection {
+  padding-right: 5px;
+}
+
+div.events-conditions-header {
+  font-weight: 600;
+}
+
+div.events-conditions-container {
+  div {
+    float: left;
+  }
+
+  a.event-scheduling-read-more-link {
+    clear: both;
+    display: block;
+    margin-top: 50px;
+  }
+
+  &:after {
+    clear: both;
+    content: '';
+    display: table;
+  }
+
+  input {
+    border: 1px solid #aaa;
+    border-radius: 4px;
+  }
+}

assets/css/src/components/_breadcrumb.scss

@@ -0,0 +1,18 @@
+.mailpoet_breadcrumb {
+  color: #444;
+  font-size: .9em;
+  text-transform: uppercase;
+}
+
+.mailpoet_breadcrumb .mailpoet_current {
+  font-weight: bold;
+}
+
+.mailpoet_breadcrumb a {
+  color: #444;
+  text-decoration: none;
+}
+
+.mailpoet_breadcrumb a:hover {
+  color: darken(#444, 50%);
+}

assets/css/src/components/_common.scss

@@ -0,0 +1,111 @@
+.clearfix {
+  @include clearfix();
+}
+
+.relative-holder {
+  position: relative;
+}
+
+a:focus {
+  outline: 0 none !important;
+}
+
+.mailpoet_success {
+  color: #090;
+}
+
+.mailpoet_error {
+  color: #900;
+}
+
+.mailpoet_hidden {
+  display: none;
+}
+
+.mailpoet_spaced_block {
+  margin: 1em 0;
+}
+
+.mailpoet_centered {
+  text-align: center;
+}
+
+.select2-container {
+  width: 25em !important;
+}
+
+$placeholder-color: #999; /* default Select2 placeholder color for single dropdown */
+
+input.select2-search__field::-webkit-input-placeholder {
+  color: $placeholder-color;
+}
+
+input.select2-search__field:-moz-placeholder {
+  color: $placeholder-color;
+}
+
+input.select2-search__field::-moz-placeholder {
+  color: $placeholder-color;
+}
+
+input.select2-search__field:-ms-input-placeholder {
+  color: $placeholder-color;
+}
+
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+  border: 1px solid #aaa; /* default Select2 border for single dropdown */
+}
+
+textarea.regular-text {
+  width: 25em !important;
+}
+
+@media screen and (max-width: 782px) {
+  .select2-container {
+    width: 100% !important;
+  }
+}
+
+$progress-border-radius: 5px;
+$progress-background: #efefef;
+$progress-foreground: #69b1e9;
+
+progress {
+  background-color: $progress-background;
+  border: 0;
+  height: 2em;
+  width: 100%;
+}
+
+progress::-webkit-progress-bar {
+  background-color: $progress-background;
+}
+
+progress::-webkit-progress-value {
+  background-color: $progress-foreground;
+  border-radius: $progress-border-radius;
+}
+
+progress::-moz-progress-bar {
+  background-color: $progress-foreground;
+  border-radius: $progress-border-radius;
+}
+
+/* double class is intentional here, we need to be very specific here to
+   something wrapping our warning message could override its style */
+p.sender_email_address_warning.sender_email_address_warning,
+p.sender_email_address_warning.sender_email_address_warning a {
+  align-self: flex-start;
+  color: #900;
+  text-align: left;
+}
+
+p.sender_email_address_warning:first-child {
+  margin-top: 1em;
+}
+
+.button.mailpoet-button-bigger {
+  font-size: 1.5em;
+  height: 46px;
+  padding: 10px 18px;
+}

assets/css/src/components/_dynamicSegments.scss

@@ -0,0 +1,7 @@
+.form-field-row-filters div {
+  margin-bottom: 10px;
+}
+
+.button.stats-create-segment {
+  margin-top: 3px;
+}

assets/css/src/components/_featureAnnouncement.scss

@@ -0,0 +1,56 @@
+.mailpoet_feature_announcement {
+  float: right;
+}
+
+.button.mailpoet_feature_announcement_button {
+  height: 28px;
+  padding: 0 5px 1px;
+  position: relative;
+}
+
+.mailpoet_feature_announcement_icon {
+  line-height: 28px;
+}
+
+.mailpoet_feature_announcement_dot:before {
+  background: #d54e21;
+  border-radius: 10px;
+  content: '';
+  display: block;
+  height: 10px;
+  position: absolute;
+  right: -4px;
+  top: -4px;
+  width: 10px;
+}
+
+.mailpoet_in_beamer_update_notice {
+  background: #f00;
+  bottom: 0;
+  box-sizing: border-box;
+  color: #fff;
+  font-size: 20px;
+  margin: 0;
+  padding: 20px 10px;
+  position: fixed;
+  right: -400px;
+  text-align: center;
+  transition: right .2s ease-in;
+  width: 400px;
+  z-index: 10000000000; // really has to be this high
+
+  a {
+    color: #fff;
+    text-decoration: underline;
+
+    &:hover,
+    &:focus {
+      color: #fff;
+      text-decoration: none;
+    }
+  }
+
+  .beamer_show & {
+    right: 0;
+  }
+}

assets/css/src/components/_form.scss

@@ -0,0 +1,7 @@
+.mailpoet_form {
+  margin: 0 0 20px;
+}
+
+.mailpoet_form td {
+  vertical-align: top !important;
+}

assets/css/src/components/_formEditorLegacy.scss

@@ -0,0 +1,647 @@
+@import '../../../../node_modules/codemirror/lib/codemirror';
+@import '../../../../node_modules/codemirror/theme/neo';
+
+$icons: '../../img/form_editor_icons.png';
+$handle_icon: '../../img/handle.png';
+
+#mailpoet_form_name {
+  font-size: 23px;
+}
+
+#mailpoet_form_history {
+  display: none;
+}
+
+#mailpoet_form_editor {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: 0 0 5px rgba(0, 0, 0, .2), inset 0 0 20px rgba(0, 0, 0, .1);
+  padding: 20px;
+  position: relative;
+  width: 300px;
+}
+
+#mailpoet_form_editor:before,
+#mailpoet_form_editor:after {
+  background: transparent;
+  bottom: 12px;
+  box-shadow: 0 6px 12px rgba(0, 0, 0, .3);
+  content: ' ';
+  height: 10px;
+  left: 12px;
+  position: absolute;
+  transform: skew(-5deg) rotate(-5deg);
+  width: 40%;
+  z-index: -1;
+}
+
+#mailpoet_form_editor:after {
+  left: auto;
+  right: 12px;
+  transform: skew(5deg) rotate(5deg);
+}
+
+/* Warnings in blocks */
+.mailpoet_warning {
+  color: #900;
+  font-weight: bold;
+}
+
+.block_placeholder {
+  border: 0 none;
+  font-weight: bold;
+  height: 0;
+  line-height: 30px;
+  margin: 0 auto;
+  overflow: hidden;
+  text-align: center;
+  text-indent: -9999px;
+  width: 298px;
+  z-index: 9500;
+}
+
+.block_placeholder.active {
+  /* border:1px dashed #dfdfdf; */
+  /* background-color:#f5f5f5; */
+  background-color: #4cb7e1;
+  display: block;
+  height: 30px;
+  overflow: auto;
+  text-indent: 0;
+}
+
+.block_placeholder.hover {
+  background-color: #0074a2;
+  border-color: #0074a2;
+  color: #fff;
+}
+
+/* Widget: checkbox, radio */
+.mailpoet_radio,
+.mailpoet_checkbox {
+  margin: -2px 5px 0 0;
+}
+
+/* MailPoet Form wrapper */
+#mailpoet_form_wrapper {
+  margin: 20px 0 0;
+  position: relative;
+}
+
+/* MailPoet Form container */
+#mailpoet_form_container {
+  margin: 0;
+  width: 340px;
+}
+
+#mailpoet_form_editor.loading,
+#mailpoet_form_toolbar.loading {
+  background: url('loading.gif') no-repeat center center #fcfcfc;
+}
+
+#mailpoet_form_toolbar.loading {
+  border: 1px solid #dfdfdf;
+}
+
+#mailpoet_form_toolbar.loading #mailpoet_toolbar_fields {
+  visibility: hidden;
+  z-index: 1;
+}
+
+/* Tabs : content/images/styles/themes */
+#wysija-add-field {
+  float: none;
+}
+
+#mailpoet_form_toolbar {
+  position: absolute;
+  width: 400px;
+  z-index: 999;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs {
+  border-bottom: 1px solid #dfdfdf;
+  line-height: 0;
+}
+
+#mailpoet_form_toolbar .add_custom_field {
+  padding: 15px 0 5px;
+  text-align: center;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li,
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a {
+  display: inline-block;
+  *display: inline;
+  *float: left;
+  height: 30px;
+  line-height: 30px;
+  margin: 0;
+  outline: 0 none;
+  padding: 0;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs li {
+  margin: 0 0 1px;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a {
+  background: linear-gradient(center top, #f9f9f9, #f5f5f5);
+  background-color: #f5f5f5;
+  border: 1px solid #dfdfdf;
+  border-radius: 3px 3px 0 0;
+  box-shadow: 0 1px 0 #fff inset;
+  color: #a6a6a6;
+  font-family: Georgia, 'Times New Roman', 'Bitstream Charter', Times, serif;
+  outline: 0 none;
+  padding: 0 7px;
+  text-decoration: none;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a:hover {
+  background-color: #eee;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs a.selected {
+  background: #fcfcfc;
+  border-bottom: 0 none;
+  color: #000;
+  filter: none;
+  padding-bottom: 1px;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs .last a,
+.wysija_params {
+  display: none !important;
+}
+
+#mailpoet_form_toolbar .mailpoet_form_toolbar_tabs,
+#mailpoet_form_toolbar #mailpoet_toolbar_fields {
+  margin: 0;
+  position: relative;
+  z-index: 9998;
+}
+
+/* edit form name */
+#mailpoet_form_name_input {
+  vertical-align: bottom;
+}
+
+/* wysija widgets */
+.mailpoet_form_widget {
+  height: 25px;
+  line-height: 25px;
+  width: 298px;
+  z-index: 9999 !important;
+}
+
+.mailpoet_toolbar_section {
+  background: none repeat scroll 0 0 #fff;
+  border: 1px solid #e5e5e5;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
+  cursor: pointer;
+  margin-bottom: 0;
+  max-height: 2000px;
+  min-width: 255px;
+  overflow: hidden;
+  position: relative;
+  transition: max-height .5s ease-in-out;
+}
+
+.mailpoet_toolbar_section > div {
+  height: 100%;
+  min-width: 255px;
+  overflow: auto;
+  padding: 10px 20px 20px;
+}
+
+.mailpoet_toolbar_section h3 {
+  margin: 10px;
+  position: relative;
+}
+
+.mailpoet_toolbar_section.closed {
+  max-height: 38px;
+}
+
+.mailpoet_toolbar_section .mailpoet_toggle {
+  height: 38px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 27px;
+}
+
+.mailpoet_toolbar_section .mailpoet_toggle:focus {
+  box-shadow: none !important;
+  outline: 0 none !important;
+}
+
+.mailpoet_toolbar_section .mailpoet_toggle:before {
+  content: '\f142';
+  display: inline-block;
+  font: 400 20px / 1 dashicons;
+  padding: 8px 10px;
+  position: relative;
+  right: 12px;
+  speak: none;
+  text-decoration: none !important;
+  top: 0;
+}
+
+.mailpoet_toolbar_section.closed .mailpoet_toggle:before {
+  content: '\f140';
+}
+
+#mailpoet_form_styles {
+  margin: 10px;
+  max-width: 318px;
+  min-height: 300px;
+  resize: vertical;
+  width: 318px;
+}
+
+#mailpoet_form_toolbar a.mailpoet_form_field,
+.mailpoet_form_widget {
+  background: linear-gradient(center 0, #f9f9f9, #ececec);
+  background-color: #f5f5f5;
+  border: 1px solid #dfdfdf;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 #fff inset;
+  color: #222;
+  cursor: move;
+  display: block;
+  font-size: 12px;
+  font-weight: bold;
+  height: 25px;
+  line-height: 25px;
+  padding: 0 7px;
+  text-shadow: 0 1px 0 #fff;
+}
+
+#mailpoet_form_toolbar a.mailpoet_form_field.disabled {
+  color: #ccc;
+  cursor: pointer;
+  pointer-events: none;
+}
+
+.mailpoet_form_field_edit {
+  bottom: 13px;
+  position: absolute;
+  right: 27px;
+}
+
+.mailpoet_form_field_delete {
+  bottom: 13px;
+  position: absolute;
+  right: 7px;
+}
+
+/* toolbar: fields */
+#mailpoet_toolbar_fields li {
+  padding: 0 0 10px;
+  position: relative;
+}
+
+#mailpoet_toolbar_fields li.notice {
+  background: none !important;
+  border: 0 none !important;
+  font-size: 11px;
+  font-style: italic;
+  margin: 0 !important;
+}
+
+/* blocks */
+.mailpoet_form_block {
+  background-color: #fff;
+  border: 0 none;
+  display: inline-table;
+  display: block;
+  height: 1%;
+  margin: 0;
+  padding: 10px 18px;
+  position: relative;
+  z-index: 98;
+}
+
+.mailpoet_form_block.highlighted {
+  border: 1px solid #5897fb;
+  padding: 9px 17px;
+}
+
+.mailpoet_form_block img {
+  max-width: 100%;
+}
+
+/* Widget styles */
+.mailpoet_form_block p {
+  margin: 5px 0;
+  word-wrap: break-word;
+}
+
+.mailpoet_form_block.dragging {
+  pointer-events: none;
+  z-index: 99000;
+}
+
+.mailpoet_form_block:after {
+  clear: both;
+  content: '.';
+  display: block;
+  height: 0;
+  visibility: hidden;
+}
+
+.mailpoet_form_block.hover {
+  border: 1px dashed #bbb;
+  margin: 0;
+  padding: 9px 17px;
+}
+
+.mailpoet_form_block.static {
+  background-color: #999;
+}
+
+/* controls */
+.mailpoet_form_block .wysija_controls {
+  background: linear-gradient(center 0, #eee, #bbb);
+  background-color: #dfdfdf;
+  border: 1px solid #ccc;
+  border-radius: 2px;
+  height: 20px;
+  left: -1px;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: 0;
+  top: -22px;
+  width: 298px;
+}
+
+.mailpoet_form_block .wysija_controls li {
+  float: left;
+  height: 20px;
+  width: 20px;
+}
+
+.mailpoet_form_block .wysija_controls a {
+  color: #000;
+  cursor: pointer;
+  float: left;
+  font-size: 120%;
+  font-weight: bold;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  width: 20px;
+}
+
+.mailpoet_form_block .wysija_controls a.remove {
+  margin: 0 0 0 1px;
+}
+
+.mailpoet_form_block .handle_container,
+.mailpoet_form_block .handle_container a {
+  float: none;
+  width: 40px !important;
+}
+
+.mailpoet_form_block .handle_container {
+  left: 140px;
+  position: absolute;
+  top: 0;
+}
+
+/* controls & icons */
+.wysija_controls a span,
+.wysija_gallery .wysija_tools a span,
+.wysija_image .wysija_tools a span,
+.wysija_text .wysija_tools a span,
+#mailpoet_toolbar_fields a span {
+  display: block;
+  height: 20px;
+  width: 20px;
+}
+
+/* toolbar: full width button */
+/* color picker in control bars */
+.wysija_controls span input {
+  color: transparent;
+  margin: 2px 0 0;
+  padding: 0;
+}
+
+/* left alignment button */
+.alignment-left span {
+  background: url($icons) no-repeat 0 0;
+}
+
+.alignment-left.active span,
+.alignment-left:hover span {
+  background: url($icons) no-repeat 0 -20px;
+}
+
+/* center alignment button */
+.alignment-center span {
+  background: url($icons) no-repeat -20px 0;
+}
+
+.alignment-center.active span,
+.alignment-center:hover span {
+  background: url($icons) no-repeat -20px -20px;
+}
+
+/* right alignment button */
+.alignment-right span {
+  background: url($icons) no-repeat -40px 0;
+}
+
+.alignment-right.active span,
+.alignment-right:hover span {
+  background: url($icons) no-repeat -40px -20px;
+}
+
+/* linking */
+.add-link span {
+  background: url($icons) no-repeat -60px 0;
+}
+
+.add-link.active span,
+.add-link:hover span {
+  background: url($icons) no-repeat -60px -20px;
+}
+
+.remove-link span {
+  background: url($icons) no-repeat -80px 0;
+}
+
+.remove-link.active span,
+.remove-link:hover span {
+  background: url($icons) no-repeat -80px -20px;
+}
+
+/* block controls */
+.remove span,
+.delete span {
+  background: url($icons) no-repeat -100px 0;
+}
+
+.remove.active span,
+.remove:hover span,
+.delete.active span,
+.delete:hover span {
+  background: url($icons) no-repeat -100px -20px;
+}
+
+.handle span {
+  background: url($handle_icon) no-repeat;
+  cursor: move;
+  width: 40px !important;
+}
+
+.duplicate span {
+  background: url($icons) no-repeat -140px 0;
+}
+
+.duplicate.active span,
+.duplicate:hover span {
+  background: url($icons) no-repeat -140px -20px;
+}
+
+.settings span {
+  background: url($icons) no-repeat -160px 0;
+}
+
+.settings.active span,
+.settings:hover span {
+  background: url($icons) no-repeat -160px -20px;
+}
+
+.icon-plus span {
+  background: url($icons) no-repeat -200px 0;
+}
+
+.icon-plus.active span,
+.icon-plus:hover span {
+  background: url($icons) no-repeat -200px -20px;
+}
+
+.icon-minus span {
+  background: url($icons) no-repeat -220px 0;
+}
+
+.icon-minus.active span,
+.icon-minus:hover span {
+  background: url($icons) no-repeat -220px -20px;
+}
+
+/* wysija options */
+.wysija_options {
+  display: none;
+}
+
+/* wysija block settings */
+.wysija_settings {
+  position: absolute;
+  z-index: 1000;
+}
+
+.wysija_settings a {
+  background: linear-gradient(center 0, #f9f9f9, #ececec);
+  background-color: #f5f5f5;
+  border: 1px solid #dfdfdf;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 #fff inset;
+  color: #222;
+  cursor: pointer;
+  display: block;
+  font-size: 12px;
+  font-weight: normal;
+  padding: 5px 5px 3px 27px;
+  text-decoration: none;
+  text-shadow: 0 1px 0 #fff;
+}
+
+.wysija_settings a span {
+  height: 20px;
+  left: 5px;
+  position: absolute;
+  top: 3px;
+  width: 20px;
+}
+
+/* labels */
+.mailpoet_form_block label {
+  display: block;
+  margin: 0 5px 0 0;
+}
+
+/* form settings: success message */
+#mailpoet_on_success textarea,
+#mailpoet_on_success select {
+  width: 100%;
+}
+
+#mailpoet_on_success textarea {
+  height: 50px;
+  min-height: 50px;
+  resize: vertical;
+}
+
+/* make sure textareas within the form editor are not resizeable */
+.mailpoet_form_block textarea {
+  resize: none;
+}
+
+/* remove click events from inputs within form editor */
+.mailpoet_form_block input,
+.mailpoet_form_block textarea {
+  pointer-events: none;
+}
+
+/* form export */
+#mailpoet_form_export textarea {
+  display: none;
+  font-size: 85%;
+  height: 150px;
+  min-height: 150px;
+  resize: vertical;
+  width: 340px;
+}
+
+/** Styling for WP 3.8 and higher */
+.mailpoet_form_field_edit,
+.mailpoet_form_field_delete {
+  text-decoration: none;
+}
+
+.mailpoet_form_field_edit:hover .dashicons-admin-generic:before,
+.mailpoet_form_field_delete:hover .dashicons-dismiss:before,
+.settings:hover .dashicons-admin-generic:before {
+  color: #2ea2cc;
+}
+
+.mailpoet_form_field_edit span,
+.mailpoet_form_field_delete span {
+  background: none !important;
+  color: #999;
+}
+
+.mailpoet_form_field_delete span:before {
+  font-size: 21px;
+}
+
+/* Code Mirror */
+.CodeMirror {
+  border: 1px solid #eee;
+}
+
+/* Settings */
+#mailpoet_form_segments.parsley-error + span .select2-selection {
+  border: 1px solid #b94a48;
+}
+
+.mailpoet_form_field_settings_text {
+  min-height: 100px;
+  width: 100%;
+}

assets/css/src/components/_formValidation.scss

@@ -0,0 +1,8 @@
+.parsley-errors-list {
+  margin-top: 8px;
+}
+
+.parsley-required,
+.parsley-custom-error-message {
+  color: #b94a48;
+}

assets/css/src/components/_globals.scss

@@ -0,0 +1,22 @@
+#wpbody {
+  padding-bottom: 20px;
+}
+
+/* menu icon */
+#adminmenu #toplevel_page_mailpoet-newsletters .wp-menu-image {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 18px 18px;
+}
+
+#adminmenu #toplevel_page_mailpoet-newsletters.wp-not-current-submenu .wp-menu-image {
+  background-image: url('data:image/png;base64,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');
+}
+
+#adminmenu #toplevel_page_mailpoet-newsletters.wp-has-current-submenu .wp-menu-image {
+  background-image: url('data:image/png;base64,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');
+}
+
+#adminmenu #toplevel_page_mailpoet-newsletters a:hover .wp-menu-image {
+  background-image: url('data:image/png;base64,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');
+}

assets/css/src/components/_importExport.scss

@@ -0,0 +1,239 @@
+.mailpoet_hidden,
+.mailpoet_validation_error {
+  display: none;
+}
+
+span {
+  &.mailpoet_mailchimp-key-status {
+    &.mailpoet_mailchimp-ok {
+      &:before {
+        color: #0e90d2;
+        content: '\2713';
+        margin-left: 15px;
+      }
+    }
+
+    &.mailpoet_mailchimp-error {
+      &:before {
+        color: #900;
+        content: '\2717';
+        margin-left: 15px;
+      }
+    }
+  }
+
+  &.select2-search {
+    &.select2-search--dropdown {
+      display: none !important;
+    }
+  }
+}
+
+.subscribers_data {
+  overflow: auto;
+
+  table {
+    width: auto;
+  }
+
+  td {
+    padding: .5em;
+  }
+
+  > table {
+    > thead {
+      > tr {
+        > th {
+          > span {
+            width: 15em !important;
+          }
+        }
+      }
+    }
+
+    > tbody {
+      > td {
+        padding: .5em;
+      }
+
+      > tr {
+        &:nth-child(odd) {
+          background: #f9f9f9;
+        }
+      }
+    }
+  }
+
+  th:first-child,
+  td:first-child {
+    padding: 0 1em !important;
+    text-align: center !important;
+    vertical-align: inherit !important;
+    width: 10em !important;
+  }
+
+  .mailpoet_header {
+    font-weight: 600;
+    text-decoration: underline;
+    text-transform: uppercase;
+  }
+}
+
+.mailpoet_data_match {
+  color: #0e90d2;
+  margin-left: .25em;
+}
+
+.mailpoet_import_error,
+.mailpoet_validation_error {
+  color: #900;
+}
+
+tr {
+  &.mailpoet_segments {
+    > td {
+      > a {
+        margin-left: 15px;
+      }
+    }
+  }
+}
+
+.mailpoet_data_manipulation_step {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+
+  > * {
+    margin: 10px 0;
+  }
+
+  .mailpoet_label_description {
+    padding: 20px 10px 20px 0;
+    width: 310px;
+  }
+
+  .mailpoet_import_select_segment {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+
+    label {
+      align-items: center;
+      display: flex;
+      flex-direction: row;
+    }
+
+    .mailpoet_create_segment {
+      margin-left: 15px;
+    }
+  }
+
+  .mailpoet_update_existing_subscribers {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+
+    label {
+      margin-right: 4px;
+    }
+
+    .mailpoet_label_description {
+      font-weight: 400;
+    }
+  }
+}
+
+.mailpoet_subscribers_data_parse_results_details_show,
+.mailpoet_create_segment {
+  cursor: pointer;
+}
+
+.mailpoet_import_validation_step {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+  width: 600px;
+
+  .mailpoet_import_step_buttons {
+    margin-top: 40px;
+  }
+
+  h2,
+  .mailpoet_last_sent {
+    margin-bottom: 40px;
+  }
+
+  .mailpoet_import_block {
+    p {
+      font-weight: bold;
+    }
+  }
+}
+
+.mailpoet_method_selection_step {
+  align-items: flex-start;
+  display: flex;
+  flex-direction: column;
+
+  > * {
+    margin: 10px 0;
+  }
+
+  .mailpoet_import_selection_form {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+
+    > * {
+      margin-right: 2.5em;
+    }
+  }
+
+  .mailpoet_import_heading {
+    color: #23282d;
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.3;
+  }
+
+  .description {
+    color: #666;
+    font-size: 13px;
+    font-style: italic;
+    font-weight: 600;
+    margin: 2px 0 5px;
+  }
+
+  .mailpoet_import_paste_texts {
+    margin-right: 25px;
+    width: 300px;
+  }
+
+  .mailpoet_import_method_paste {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+  }
+
+  .mailpoet_import_mailchimp {
+    .mailpoet_mailchimp_key,
+    .mailpoet_mailchimp_lists {
+      align-items: center;
+      display: flex;
+      flex-wrap: nowrap;
+      margin-bottom: 40px;
+    }
+
+    .mailpoet_mailchimp_key_input {
+      align-items: center;
+      display: flex;
+      margin-right: 20px;
+    }
+
+    .mailpoet_import_heading {
+      display: block;
+      width: 300px;
+    }
+  }
+}

assets/css/src/components/_listing.scss

@@ -0,0 +1,47 @@
+.mailpoet_listing_loading tbody tr,
+.mailpoet_form_loading tbody tr {
+  opacity: .2;
+}
+
+.mailpoet_select_all {
+  background-color: #f1f1f1;
+}
+
+.mailpoet_select_all td {
+  text-align: center;
+}
+
+.mailpoet_listing_table {
+  th span {
+    white-space: nowrap;
+  }
+
+  thead .mailpoet-check-column,
+  tfoot .mailpoet-check-column {
+    padding: 10px 0 0 3px;
+    vertical-align: top;
+    width: 2.2em;
+  }
+
+  tbody .mailpoet-check-column {
+    margin: 0 0 0 8px;
+    padding: 11px 0 0 3px;
+    vertical-align: text-top;
+  }
+
+  thead th.column-primary,
+  tfoot th.column-primary {
+    width: 25em;
+
+    .mailpoet-segments-listing & {
+      width: 18em;
+    }
+  }
+
+  @media screen and (max-width: 782px) {
+    thead th.column-primary,
+    tfoot th.column-primary {
+      width: 100% !important;
+    }
+  }
+}

assets/css/src/components/_modal.scss

@@ -0,0 +1,272 @@
+$modal_title_color: #cfcfcf;
+$modal_highlight_background_color: #f1f1f1;
+$modal_background_color: #fff;
+$modal_popup_margin: 30px;
+$modal_popup_margin_mobile: 10px;
+$modal_popup_padding: 30px;
+$modal_popup_padding_mobile: 12px;
+$modal_close_button_size: 23px;
+$overlay_background_color: rgba(0, 0, 0, .6);
+
+body.mailpoet_modal_opened {
+  overflow: hidden;
+}
+
+.mailpoet_modal_overlay {
+  align-items: center;
+  background-color: $overlay_background_color;
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: $modal_popup_margin;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 100000;
+}
+
+.mailpoet_modal_highlight {
+  background-color: $modal_highlight_background_color;
+  box-shadow: 0 0 20px 2px rgba(#fff, 75%);
+  pointer-events: none;
+  position: relative;
+  z-index: 100001 !important;
+}
+
+.mailpoet_modal_overlay.mailpoet_overlay_transparent {
+  background-color: transparent;
+}
+
+.mailpoet_modal_overlay.mailpoet_overlay_loading {
+  background-color: $overlay_background_color !important;
+  display: flex !important;
+}
+
+.mailpoet_popup {
+  animation: mailpoet_popup_fadein .5s;
+  margin: auto;
+  max-width: 100%;
+  z-index: 25;
+}
+
+@keyframes mailpoet_popup_fadein {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.mailpoet_popup_wrapper {
+  background-color: $modal_background_color;
+  border-radius: 4px;
+  box-shadow: 1px 2px 4px #343434;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column;
+  height: 100%;
+  overflow: hidden;
+  padding: $modal_popup_padding;
+  position: relative;
+  width: 100%;
+  z-index: 0;
+}
+
+.mailpoet_overlay_transparent .mailpoet_popup_wrapper {
+  border: 1px solid #333;
+}
+
+.mailpoet_popup_title h2 {
+  font-size: 23px;
+  font-weight: 600;
+  line-height: 29px;
+  margin: 0 ($modal_close_button_size + 20) 0 0;
+}
+
+.mailpoet_popup_body {
+  flex-grow: 1;
+  margin-top: 20px;
+  position: relative;
+
+  .button + .button {
+    margin-left: 10px;
+  }
+}
+
+.mailpoet_popup_has_title .mailpoet_popup_body {
+  margin-top: 30px;
+}
+
+.mailpoet_modal_overlay.mailpoet_panel_overlay {
+  overflow: hidden;
+  top: 32px;
+}
+
+.mailpoet_panel {
+  bottom: 0;
+  display: none;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  top: 0;
+  transition: margin 350ms ease-out;
+  width: 100%;
+  z-index: 100002;
+}
+
+.mailpoet_panel_wrapper {
+  background-color: #f1f1f1;
+  border: 1px solid #e1e1e1;
+  border-top: 0 none;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  top: 0;
+  width: 100%;
+  z-index: 0;
+}
+
+.mailpoet_panel_title {
+  height: 0;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+.mailpoet_panel_title h2 {
+  border-left: 1px solid #444;
+  border-right: 1px solid #444;
+  color: $modal_title_color;
+  font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
+  font-size: 1em;
+  font-weight: normal;
+  line-height: 32px;
+  margin: 0;
+  padding: 0 30px 0 10px;
+}
+
+.mailpoet_panel_body {
+  padding: 10px 10px 36px;
+}
+
+.mailpoet_modal_close {
+  cursor: pointer;
+  outline: 0 none;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  z-index: 2;
+
+  svg {
+    opacity: .5;
+    stroke: #979797;
+
+    &:hover {
+      stroke: #636363;
+    }
+  }
+}
+
+.mailpoet_popup .mailpoet_modal_close {
+  height: $modal_close_button_size;
+  padding: 3px 0;
+  right: $modal_popup_padding;
+  top: $modal_popup_padding;
+  width: $modal_close_button_size;
+}
+
+.mailpoet_panel .mailpoet_modal_close {
+  height: 16px;
+  padding: 2px 0;
+  right: 20px;
+  top: 20px;
+  width: 16px;
+}
+
+.mailpoet_modal_close:focus {
+  outline: 0 none;
+}
+
+.mailpoet_align_left {
+  margin: 0;
+  text-align: left;
+}
+
+.mailpoet_align_center {
+  margin: 0;
+  text-align: center;
+}
+
+.mailpoet_align_right {
+  margin: 0;
+  text-align: right;
+}
+
+@media screen and (max-width: 782px) {
+  .mailpoet_modal_overlay {
+    padding: $modal_popup_margin_mobile;
+  }
+
+  .mailpoet_popup {
+    min-width: auto !important;
+    width: 100%;
+  }
+
+  .mailpoet_popup_wrapper {
+    padding: $modal_popup_padding_mobile;
+  }
+
+  .mailpoet_popup_title h2 {
+    margin-right: $modal_close_button_size + 10;
+  }
+
+  .mailpoet_popup .mailpoet_modal_close {
+    right: $modal_popup_padding_mobile;
+    top: $modal_popup_padding_mobile;
+  }
+
+  .mailpoet_modal_overlay.mailpoet_panel_overlay {
+    top: 46px;
+  }
+
+  .mailpoet_panel_body {
+    padding-bottom: 52px;
+  }
+}
+
+.mailpoet_loading {
+  display: flex;
+  flex-direction: row;
+  height: 32px;
+  width: 150px;
+}
+
+.mailpoet_modal_loading {
+  animation-direction: linear;
+  animation-duration: 1.9500000000000002s;
+  animation-iteration-count: infinite;
+  animation-name: bounce_mailpoet_modal_loading;
+  background-color: #e01d4e;
+  border-radius: 21px;
+  height: 32px;
+  margin-left: 17px;
+  width: 32px;
+}
+
+.mailpoet_modal_loading_1 {
+  animation-delay: .39s;
+}
+
+.mailpoet_modal_loading_2 {
+  animation-delay: .9099999999999999s;
+}
+
+.mailpoet_modal_loading_3 {
+  animation-delay: 1.1700000000000002s;
+}
+
+@keyframes bounce_mailpoet_modal_loading {
+  0%,
+  50% { background-color: #064e6d; }
+}

assets/css/src/components/_mp2migrator.scss

@@ -0,0 +1,38 @@
+#logger {
+  background-color: transparent;
+  border: 0;
+  border-top: 1px #aba9a9 solid;
+  font-size: .85em;
+  height: 300px;
+  margin-top: 20px;
+  overflow: scroll;
+  padding: 2px;
+  resize: both;
+  width: 100%;
+}
+
+#progressbar {
+  background-color: #d8d8d8;
+  border-radius: 5px;
+  width: 50%;
+}
+
+$progressbar_color: #fecf23;
+$progressbar_gradient_to_color: #fd9215;
+
+.ui-progressbar .ui-progressbar-value {
+  background-color: $progressbar_color;
+  background-image: linear-gradient(to bottom, $progressbar_color, $progressbar_gradient_to_color);
+  border: 0;
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
+  height: 100%;
+}
+
+.mailpoet_progress_label {
+  font-size: 15px;
+}
+
+.error_msg {
+  color: #f00;
+}

assets/css/src/components/_newsletterCongratulate.scss

@@ -0,0 +1,45 @@
+.newsletter_congratulate_page {
+  margin-top: 30px;
+}
+
+.mailpoet_newsletter_loading {
+  text-align: center;
+
+  .mailpoet_loading {
+    margin: 100px auto 0;
+  }
+
+  .mailpoet_newsletter_loading_header {
+    margin: 30px;
+  }
+}
+
+.mailpoet_congratulate_success {
+  width: 100%;
+
+  h1 {
+    margin-bottom: 30px;
+    text-align: center;
+  }
+
+  img,
+  .button {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .typeform-widget {
+    height: 350px;
+    margin: 0 auto 30px;
+    max-width: 100%;
+    width: 500px;
+  }
+}
+
+.mailpoet_congratulate_success.mailpoet_congratulate_mss_pitch {
+  .button,
+  img {
+    display: inline-block;
+  }
+}

assets/css/src/components/_newsletterTemplates.scss

@@ -0,0 +1,10 @@
+@import 'newsletterEditor/variables';
+
+.mailpoet_template_iframe {
+  left: 0;
+  max-width: $newsletter-width;
+  position: absolute;
+  top: 0;
+  width: $newsletter-width;
+  z-index: -9999;
+}

assets/css/src/components/_notice.scss

@@ -0,0 +1,30 @@
+.mailpoet_notice {
+  clear: both;
+  position: relative;
+
+  p:empty { display: none; }
+}
+
+.mailpoet_base_notice {
+  background: #fff;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
+  margin: 5px 0 15px;
+  padding: 1px 12px;
+  position: relative;
+}
+
+.mailpoet_success_notice {
+  border-left: 4px solid #46b450;
+}
+
+.mailpoet_error_notice {
+  border-left: 4px solid #dc3232;
+}
+
+.mailpoet_warning_notice {
+  border-left: 4px solid #ffb900;
+}
+
+.mailpoet_info_notice {
+  border-left: 4px solid #00a0d2;
+}

assets/css/src/components/_pages.scss

@@ -4,6 +4,7 @@ This is to make MailPoet pages independent of the WordPress
 About page styles that may differ across WP versions.
 Please add custom styles to pages_custom.styl
 */
+
 .mailpoet-about-wrap {
   font-size: 15px;
   margin: 25px 40px 0 20px;
@@ -18,7 +19,7 @@ Please add custom styles to pages_custom.styl
 
   hr {
     border: 0;
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-top: 1px solid rgba(0, 0, 0, .1);
     height: 0;
     margin: 0;
   }
@@ -33,7 +34,7 @@ Please add custom styles to pages_custom.styl
   .mailpoet-logo {
     position: absolute;
     right: 0;
-    top: 0.2em;
+    top: .2em;
   }
 
   .nav-tab {
@@ -52,7 +53,7 @@ Please add custom styles to pages_custom.styl
     font-size: 2.8em;
     font-weight: 400;
     line-height: 1.2em;
-    margin: 1em 0 0.5em;
+    margin: 1em 0 .5em;
     padding: 0;
     text-align: center;
   }
@@ -66,14 +67,14 @@ Please add custom styles to pages_custom.styl
     font-size: 2.7em;
     font-weight: 300;
     line-height: 1.3;
-    margin: 40px 0 0.6em;
+    margin: 40px 0 .6em;
     text-align: center;
   }
 
   h3 {
     font-size: 1.4em;
     line-height: 1.5;
-    margin: 1.25em 0 0.6em;
+    margin: 1.25em 0 .6em;
   }
 
   h4 {
@@ -94,7 +95,7 @@ Please add custom styles to pages_custom.styl
     min-height: 60px;
   }
 
-  [class$='col'] {
+  [class$=col] {
     .col {
       float: left;
       position: relative;
@@ -137,13 +138,13 @@ Please add custom styles to pages_custom.styl
 
     h4 {
       font-size: 1em;
-      margin: 1.4em 0 0.6em;
+      margin: 1.4em 0 .6em;
     }
 
     p {
       margin-left: auto;
       margin-right: auto;
-      margin-top: 0.6em;
+      margin-top: .6em;
       max-width: 55em;
     }
 
@@ -237,7 +238,7 @@ Please add custom styles to pages_custom.styl
     }
   }
 
-  @include respond-to(small-screen) {
+  @media screen and (max-width: 782px) {
     .two-col-text {
       column-count: 1;
     }
@@ -248,7 +249,7 @@ Please add custom styles to pages_custom.styl
     }
   }
 
-  @include breakpoint-max-width(500px) {
+  @media screen and (max-width: 500px) {
     margin-left: 10px;
     margin-right: 20px;
 
@@ -258,7 +259,7 @@ Please add custom styles to pages_custom.styl
     }
 
     .about-text {
-      margin-bottom: 0.25em;
+      margin-bottom: .25em;
     }
 
     .mailpoet-logo {

assets/css/src/components/_pagesCustom.scss

@@ -0,0 +1,57 @@
+/*
+Custom styles for MailPoet pages.
+*/
+
+.mailpoet-about-wrap {
+  .videoWrapper {
+    /* padding-top: 25px */
+    height: 0;
+    padding-bottom: 56.25%; /* 16:9 */
+    position: relative;
+
+    iframe {
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  .mailpoet_video {
+    border: 1px solid rgba(0, 0, 0, .1);
+  }
+
+  #mailpoet-changelog ul {
+    list-style: disc;
+    padding-left: 20px;
+  }
+
+  h2.mailpoet-feature-top {
+    margin: 50px auto;
+  }
+
+  a.button.go-to-plugin {
+    margin-top: 2em;
+  }
+
+  p.top-space-triple {
+    margin-top: 3em;
+  }
+
+  p.mailpoet-top-text {
+    margin-right: 0;
+  }
+
+  ul.default-list {
+    list-style-type: disc;
+    margin-left: 40px;
+  }
+
+  .half-width-centered {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    max-width: 50%;
+  }
+}

assets/css/src/components/_parsley.scss

@@ -0,0 +1,30 @@
+input.parsley-success,
+select.parsley-success,
+textarea.parsley-success {
+  background-color: #dff0d8;
+  border: 1px solid #d6e9c6;
+  color: #468847;
+}
+
+input.parsley-error,
+select.parsley-error,
+textarea.parsley-error {
+  background-color: #f2dede;
+  border: 1px solid #eed3d7;
+  color: #b94a48;
+}
+
+.parsley-errors-list {
+  color: #b94a48;
+  font-size: .9em;
+  line-height: .9em;
+  list-style-type: none;
+  margin: 2px 0 3px;
+  opacity: 0;
+  padding: 0;
+  transition: all .3s ease-in;
+
+  &.filled {
+    opacity: 1;
+  }
+}

assets/css/src/components/_premiumPage.scss

@@ -0,0 +1,163 @@
+
+.mailpoet-about-wrap.mailpoet-premium-page {
+  display: flex;
+  flex-direction: column;
+  margin: 25px auto 0;
+  padding: 0 150px;
+
+  @media screen and (max-width: 1500px) {
+    padding: 0;
+  }
+
+  .premium-button {
+    background: #0085ba;
+    border: 1px solid #006799;
+    border-radius: 3px;
+    box-sizing: border-box;
+    color: #fff;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 1.5em;
+    line-height: normal;
+    margin: 1em 0;
+    padding: 8px 18px 9px;
+    text-decoration: none;
+    vertical-align: top;
+    white-space: nowrap;
+
+    &:hover,
+    &:focus {
+      background: #008ec2;
+    }
+  }
+
+  .mailpoet-premium-page-intro {
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 3em;
+
+    @media screen and (max-width: 500px) {
+      flex-wrap: wrap;
+    }
+
+    img {
+      margin-right: 100px;
+
+      @media screen and (max-width: 1100px) {
+        height: 50%;
+        margin-right: 75px;
+        width: 50%;
+      }
+
+      @media screen and (max-width: 500px) {
+        height: 40%;
+        margin: 0 auto;
+        width: 40%;
+      }
+    }
+
+    @media screen and (max-width: 500px) {
+      .mailpoet-premium-page-intro-link-wrap {
+        text-align: center;
+      }
+    }
+  }
+
+  .mailpoet-premium-page-bullet-list {
+    li:before {
+      content: '·';
+      padding-right: 5px;
+    }
+  }
+
+  .mailpoet-premium-page-text {
+    padding-bottom: 4em;
+    text-align: center;
+
+    .button.mailpoet-button-bigger:last-child {
+      margin-bottom: 0;
+    }
+
+    .mailpoet-premium-page-paragraph-before-heading {
+      margin-top: 2.8em;
+    }
+
+    .mailpoet-premium-page-paragraph-before-heading + h1 {
+      margin-top: 0;
+    }
+  }
+
+  .mailpoet-premium-page-text-narrow {
+    margin: auto;
+    max-width: 700px;
+  }
+
+  .mailpoet-premium-page-features {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+
+    .mailpoet-premium-page-feature {
+      width: 29%;
+
+      @media screen and (max-width: 640px) {
+        width: 49%;
+      }
+
+      @media screen and (max-width: 500px) {
+        width: 100%;
+      }
+
+      p,
+      h2 {
+        text-align: left;
+      }
+    }
+  }
+
+  .mailpoet-premium-page-options {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-around;
+
+    > div {
+      align-items: center;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      margin: 0 20px;
+
+      @media screen and (max-width: 500px) {
+        width: 100%;
+      }
+    }
+
+    @media screen and (max-width: 880px) {
+      display: block;
+
+      > div { display: block; }
+    }
+
+    ul {
+      display: inline-block;
+      text-align: left;
+
+      li:before {
+        content: '-';
+        padding-right: 5px;
+      }
+    }
+  }
+
+  .mailpoet-premium-page-options-divider {
+    flex-grow: 100;
+  }
+
+  @media screen and (max-width: 1100px) {
+    h2 {
+      font-size: 2em; // The text WooCommerce is too long and so on smaller displays it overflows. This helps.
+    }
+  }
+}

assets/css/src/components/_progressBar.scss

@@ -0,0 +1,86 @@
+.mailpoet_progress {
+  background-color: #efefef;
+  border-radius: 5px;
+  height: 25px;
+  margin: 0;
+  margin-bottom: 10px;
+  padding: 0;
+  position: relative;
+  width: 100%;
+}
+
+.mailpoet_progress_label {
+  display: inline-block;
+  margin: 2px 0 0;
+  position: absolute;
+  text-align: center;
+  width: 100%;
+}
+
+.mailpoet_progress_bar {
+  background-color: #34c2e3;
+  background-image: linear-gradient(to bottom, #34c2e3, darken(#34c2e3, 20%));
+  border-radius: 3px;
+  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
+  display: inline-block;
+  height: 100%;
+  position: absolute;
+}
+
+.mailpoet_progress_complete {
+  .mailpoet_progress_bar {
+    background-color: hsla(191, 78%, 80%, 1);
+    background-image: linear-gradient(to bottom, hsla(191, 78%, 80%, 1), hsla(191, 76%, 67%, 1));
+  }
+}
+
+.mailpoet_stepped_progress_bar {
+  display: flex;
+  max-width: 100%;
+  width: 350px;
+}
+
+.mailpoet_stepped_progress_bar_step {
+  flex-grow: 1;
+
+  &:before {
+    background-color: #f1f1f1;
+    border: 2px solid #dbdbdb;
+    border-radius: 14px;
+    content: '';
+    display: block;
+    height: 12px;
+    position: relative;
+    width: 12px;
+    z-index: 1;
+  }
+
+  &:after {
+    background-color: #dbdbdb;
+    content: '';
+    display: block;
+    height: 4px;
+    left: 4px;
+    position: relative;
+    top: -10px;
+    width: 100%;
+  }
+
+  &:last-of-type {
+    flex-grow: 0;
+    width: 18px;
+
+    &:after { display: none; }
+  }
+
+  &.active:before,
+  &.active:after {
+    background-color: #23282d;
+    border-color: #23282d;
+  }
+
+  &.current {
+    &:before { background-color: #fff; }
+    &:after { background-color: #dbdbdb; }
+  }
+}

assets/css/src/components/_public.scss

@@ -0,0 +1,61 @@
+/* labels */
+.mailpoet_text_label,
+.mailpoet_textarea_label,
+.mailpoet_select_label,
+.mailpoet_radio_label,
+.mailpoet_checkbox_label,
+.mailpoet_list_label,
+.mailpoet_date_label {
+  display: block;
+}
+
+/* form loading */
+.mailpoet_form_sending {
+  .mailpoet_form_loading {
+    display: block;
+  }
+
+  .mailpoet_submit {
+    display: none;
+  }
+}
+
+.mailpoet_form_loading {
+  display: none;
+  text-align: center;
+  width: 30px;
+}
+
+.mailpoet_form_loading > span {
+  animation: mailpoet-bouncedelay 1.4s infinite ease-in-out both;
+  background-color: #5b5b5b;
+  border-radius: 100%;
+  display: inline-block;
+  height: 5px;
+  width: 5px;
+}
+
+.mailpoet_form_loading .mailpoet_bounce1 {
+  animation-delay: -.32s;
+}
+
+.mailpoet_form_loading .mailpoet_bounce2 {
+  animation-delay: -.16s;
+  margin: 0 7px;
+}
+
+.mailpoet_captcha_form {
+  .mailpoet_validate_success { color: #468847; }
+  .mailpoet_validate_error { color: #b94a48; }
+}
+
+.mailpoet_captcha_update {
+  cursor: pointer;
+}
+
+@keyframes mailpoet-bouncedelay {
+  0%,
+  80%,
+  100% { transform: scale(0); }
+  40% { transform: scale(1); }
+}

assets/css/src/components/_settings.scss

@@ -0,0 +1,159 @@
+#mailpoet_settings {
+  .mailpoet_tab_panel {
+    display: none;
+  }
+
+  .form-table th {
+    width: 20em;
+  }
+
+  .mailpoet_sending_methods {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    margin: 25px 0 0;
+
+    > li {
+      background-color: #fff;
+      border: 2px solid #dcdcdc;
+      display: flex;
+      flex-basis: 0;
+      flex-direction: column;
+      flex-grow: 1;
+      flex-shrink: 1;
+      margin: 0 25px 25px 0;
+      max-width: 500px;
+
+      .mailpoet_sending_method_description {
+        flex-grow: 1;
+        flex-shrink: 0;
+        padding: 25px;
+      }
+
+      &:hover:not(.mailpoet_active) {
+        border-color: #c5c5c5;
+      }
+    }
+
+    > li:last-child {
+      margin-right: 0;
+    }
+
+    h3 {
+      font-size: 1.5em;
+      height: 54px;
+      text-align: center;
+    }
+
+    .mailpoet_description {
+      font-size: 14px;
+    }
+
+    .mailpoet_status {
+      align-items: center;
+      background-color: #dcdcdc;
+      color: #fff;
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-end;
+      min-height: 2em;
+      padding: 1em;
+      text-overflow: ellipsis;
+
+      span {
+        font-weight: bold;
+        visibility: hidden;
+      }
+
+      div {
+        margin-left: 1em;
+      }
+    }
+
+    .mailpoet_active {
+      border: 2px solid #088b00;
+
+      &.mailpoet_invalid_key {
+        border: 2px solid #dc3232;
+      }
+
+      .mailpoet_status {
+        background-color: #088b00;
+
+        &.mailpoet_invalid_key {
+          background-color: #dc3232;
+
+          .mailpoet_actions {
+            color: white;
+
+            a:not(.button-primary) {
+              color: white;
+            }
+          }
+        }
+
+        span {
+          visibility: visible;
+        }
+      }
+
+      #mailpoet_mta_activate {
+        visibility: hidden;
+      }
+    }
+
+    .mailpoet_actions {
+      color: initial;
+    }
+  }
+
+  .tooltip.dashicons.dashicons-editor-help {
+    line-height: 1.4;
+  }
+
+  ul.sending-method-benefits {
+    list-style-type: none;
+    margin-bottom: 2em;
+    margin-top: 2em;
+  }
+
+  .sending-free-plan-button {
+    background: #ff5301;
+    border-color: #e64c03;
+    box-shadow: 0 1px 0 #e64c03;
+    margin: 10px 0;
+    text-shadow: 0 -1px 1px #e64c03;
+
+    strong {
+      text-transform: uppercase;
+    }
+  }
+
+  .mailpoet_success_item:before {
+    content: '✔ ';
+  }
+
+  .mailpoet_error_item:before {
+    content: '✗ ';
+  }
+
+  .mailpoet_woocommerce_editor_button {
+    margin-top: 10px;
+  }
+
+  @media screen and (max-width: 782px) {
+    .form-table th {
+      width: auto;
+    }
+
+    .mailpoet_sending_methods {
+      flex-flow: row wrap;
+      justify-content: space-around;
+
+      > li {
+        flex-basis: auto;
+        margin-right: 0;
+      }
+    }
+  }
+}

assets/css/src/components/_stats.scss

@@ -0,0 +1,46 @@
+.mailpoet_stat_grey {
+  color: #707070;
+}
+
+.mailpoet_stat_big {
+  font-size: 23px;
+  font-weight: 600;
+  line-height: normal;
+}
+
+.mailpoet_stat_spaced {
+  margin-bottom: 1rem;
+}
+
+.mailpoet_stat_triple-spaced {
+  margin-bottom: 3rem;
+}
+
+.mailpoet_stat_force-wrap {
+  word-break: break-all;
+}
+
+.mailpoet_stat_info {
+  float: right;
+  width: 40%;
+}
+
+.mailpoet_stat_general {
+  width: 60%;
+}
+
+.mailpoet_stats_premium_banner {
+  background-color: $info-message-background-color;
+  padding: 10px;
+  text-align: center;
+}
+
+@media screen and (max-width: 520px) {
+  .mailpoet_stat_info {
+    display: none;
+  }
+
+  .mailpoet_stat_general {
+    width: 100%;
+  }
+}

assets/css/src/components/_subscribers.scss

@@ -0,0 +1,5 @@
+#subscribers_container {
+  .mailpoet_segments_unsubscribed {
+    color: lighten(#555, 33);
+  }
+}

assets/css/src/components/_welcomeWizard.scss

@@ -0,0 +1,153 @@
+.mailpoet_welcome_wizard_header {
+  text-align: center;
+}
+
+.mailpoet_welcome_wizard_steps {
+  padding-top: 20px;
+  width: 100%;
+
+  div.updated,
+  div.error,
+  .notice {
+    display: none !important;
+  }
+}
+
+.mailpoet_welcome_wizard_flex {
+  display: flex;
+}
+
+.mailpoet_welcome_wizard_illustration {
+  flex-grow: 1;
+  height: 400px;
+  padding: 60px 40px 40px 60px;
+  text-align: right;
+  width: 50%;
+
+  img {
+    max-height: 100%;
+    max-width: 100%;
+  }
+
+  @media screen and (max-width: 782px) {
+    display: none;
+  }
+}
+
+.mailpoet_welcome_wizard_step_revenue_tracking {
+  input[type='submit'] {
+    margin-top: 40px;
+  }
+}
+
+.mailpoet_welcome_wizard_step {
+  flex-grow: 1;
+  padding: 60px 60px 40px 40px;
+  text-align: left;
+  width: 50%;
+
+  @media screen and (max-width: 782px) {
+    padding: 30px;
+    width: 100%;
+  }
+}
+
+.mailpoet_welcome_wizard_step_content {
+  margin-top: 40px;
+  max-width: 620px;
+  min-height: 30vh;
+
+  h1 {
+    font-weight: 700;
+    margin: 0 0 20px;
+    padding: 0;
+  }
+
+  p {
+    color: #595c65;
+    font-size: 15px;
+    font-weight: normal;
+    line-height: 22px;
+    margin: 0 0 40px;
+
+    + p,
+    + ul { margin-top: -20px; }
+  }
+
+  .welcome_wizard_tracking_sub_title {
+    margin-bottom: 0;
+  }
+
+  .welcome_wizard_tracking_list {
+    list-style: disc;
+    padding-left: 30px;
+  }
+}
+
+#mailpoet_sender_form {
+  margin-top: 30px;
+  width: 330px;
+
+  label {
+    display: block;
+    font-size: 15px;
+    margin-bottom: 20px;
+  }
+
+  input[type='text'] {
+    font-size: 15px;
+    height: 30px;
+    margin-top: 10px;
+    width: 350px;
+  }
+
+  a.sender_form_small {
+    color: #595c65;
+    font-size: 12px;
+  }
+}
+
+.mailpoet_sender_form_loading {
+  opacity: .5;
+}
+
+.mailpoet_welcome_wizard_step_controls {
+  margin: 40px 0 10px;
+
+  .button + .button {
+    margin-left: 20px;
+  }
+
+  a {
+    cursor: pointer;
+  }
+}
+
+.mailpoet_welcome_wizard_woo_screenshot {
+  box-shadow: 2px 3px 18px rgba(#000, .3);
+  margin-top: -20px;
+  max-width: 100%;
+  width: 350px;
+}
+
+.welcome_wizard_video {
+  position: absolute;
+  top: -1000px;
+}
+
+.mailpoet_welcome_wizard_centered_column {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.mailpoet_wizard_woocommerce_list {
+  text-align: center;
+
+  label {
+    color: #595c65;
+    display: block;
+    margin-top: 10px;
+  }
+}

assets/css/src/components/datepicker/_datepicker.scss

@@ -0,0 +1,2 @@
+@import 'jquery-ui-1.10.1';
+@import 'melon.datepicker';

assets/css/src/components/datepicker/jquery-ui-1.10.1.css

@@ -0,0 +1,649 @@
+/*! jQuery UI - v1.10.1 - 2013-03-10
+* http://jqueryui.com
+* Includes: jquery.ui.core.css, jquery.ui.datepicker.css
+* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS%2CTahoma%2CVerdana%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=gloss_wave&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=highlight_soft&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=glass&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=glass&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=highlight_soft&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=diagonals_thick&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=diagonals_thick&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=flat&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
+* Copyright (c) 2013 jQuery Foundation and other contributors Licensed MIT */
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden {
+	display: none;
+}
+.ui-helper-hidden-accessible {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}
+.ui-helper-reset {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	line-height: 1.3;
+	text-decoration: none;
+	font-size: 100%;
+	list-style: none;
+}
+.ui-helper-clearfix:before,
+.ui-helper-clearfix:after {
+	content: "";
+	display: table;
+	border-collapse: collapse;
+}
+.ui-helper-clearfix:after {
+	clear: both;
+}
+.ui-helper-clearfix {
+	min-height: 0; /* support: IE7 */
+}
+.ui-helper-zfix {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	position: absolute;
+	opacity: 0;
+	filter:Alpha(Opacity=0);
+}
+
+.ui-front {
+	z-index: 100;
+}
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled {
+	cursor: default !important;
+}
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon {
+	display: block;
+	text-indent: -99999px;
+	overflow: hidden;
+	background-repeat: no-repeat;
+}
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.ui-datepicker {
+	width: 17em;
+	padding: .2em .2em 0;
+	display: none;
+}
+.ui-datepicker .ui-datepicker-header {
+	position: relative;
+	padding: .2em 0;
+}
+.ui-datepicker .ui-datepicker-prev,
+.ui-datepicker .ui-datepicker-next {
+	position: absolute;
+	top: 2px;
+	width: 1.8em;
+	height: 1.8em;
+}
+.ui-datepicker .ui-datepicker-prev-hover,
+.ui-datepicker .ui-datepicker-next-hover {
+	top: 1px;
+}
+.ui-datepicker .ui-datepicker-prev {
+	left: 2px;
+}
+.ui-datepicker .ui-datepicker-next {
+	right: 2px;
+}
+.ui-datepicker .ui-datepicker-prev-hover {
+	left: 1px;
+}
+.ui-datepicker .ui-datepicker-next-hover {
+	right: 1px;
+}
+.ui-datepicker .ui-datepicker-prev span,
+.ui-datepicker .ui-datepicker-next span {
+	display: block;
+	position: absolute;
+	left: 50%;
+	margin-left: -8px;
+	top: 50%;
+	margin-top: -8px;
+}
+.ui-datepicker .ui-datepicker-title {
+	margin: 0 2.3em;
+	line-height: 1.8em;
+	text-align: center;
+}
+.ui-datepicker .ui-datepicker-title select {
+	font-size: 1em;
+	margin: 1px 0;
+}
+.ui-datepicker select.ui-datepicker-month-year {
+	width: 100%;
+}
+.ui-datepicker select.ui-datepicker-month,
+.ui-datepicker select.ui-datepicker-year {
+	width: 49%;
+}
+.ui-datepicker table {
+	width: 100%;
+	font-size: .9em;
+	border-collapse: collapse;
+	margin: 0 0 .4em;
+}
+.ui-datepicker th {
+	padding: .7em .3em;
+	text-align: center;
+	font-weight: bold;
+	border: 0;
+}
+.ui-datepicker td {
+	border: 0;
+	padding: 1px;
+}
+.ui-datepicker td span,
+.ui-datepicker td a {
+	display: block;
+	padding: .2em;
+	text-align: right;
+	text-decoration: none;
+}
+.ui-datepicker .ui-datepicker-buttonpane {
+	background-image: none;
+	margin: .7em 0 0 0;
+	padding: 0 .2em;
+	border-left: 0;
+	border-right: 0;
+	border-bottom: 0;
+}
+.ui-datepicker .ui-datepicker-buttonpane button {
+	float: right;
+	margin: .5em .2em .4em;
+	cursor: pointer;
+	padding: .2em .6em .3em .6em;
+	width: auto;
+	overflow: visible;
+}
+.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
+	float: left;
+}
+
+/* with multiple calendars */
+.ui-datepicker.ui-datepicker-multi {
+	width: auto;
+}
+.ui-datepicker-multi .ui-datepicker-group {
+	float: left;
+}
+.ui-datepicker-multi .ui-datepicker-group table {
+	width: 95%;
+	margin: 0 auto .4em;
+}
+.ui-datepicker-multi-2 .ui-datepicker-group {
+	width: 50%;
+}
+.ui-datepicker-multi-3 .ui-datepicker-group {
+	width: 33.3%;
+}
+.ui-datepicker-multi-4 .ui-datepicker-group {
+	width: 25%;
+}
+.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
+	border-left-width: 0;
+}
+.ui-datepicker-multi .ui-datepicker-buttonpane {
+	clear: left;
+}
+.ui-datepicker-row-break {
+	clear: both;
+	width: 100%;
+	font-size: 0;
+}
+
+/* RTL support */
+.ui-datepicker-rtl {
+	direction: rtl;
+}
+.ui-datepicker-rtl .ui-datepicker-prev {
+	right: 2px;
+	left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next {
+	left: 2px;
+	right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-prev:hover {
+	right: 1px;
+	left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next:hover {
+	left: 1px;
+	right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane {
+	clear: right;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button {
+	float: left;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
+.ui-datepicker-rtl .ui-datepicker-group {
+	float: right;
+}
+.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
+	border-right-width: 0;
+	border-left-width: 1px;
+}
+
+/* Component containers
+----------------------------------*/
+.ui-widget {
+	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+	font-size: 1.1em;
+}
+.ui-widget .ui-widget {
+	font-size: 1em;
+}
+.ui-widget input,
+.ui-widget select,
+.ui-widget textarea,
+.ui-widget button {
+	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+	font-size: 1em;
+}
+.ui-widget-content {
+	border: 1px solid #dddddd;
+	background: #eeeeee url(../../img/datepicker/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x;
+	color: #333333;
+}
+.ui-widget-content a {
+	color: #333333;
+}
+.ui-widget-header {
+	border: 1px solid #e78f08;
+	background: #f6a828 url(../../img/datepicker/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;
+	color: #ffffff;
+	font-weight: bold;
+}
+.ui-widget-header a {
+	color: #ffffff;
+}
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default {
+	border: 1px solid #cccccc;
+	background: #f6f6f6 url(../../img/datepicker/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
+	font-weight: bold;
+	color: #1c94c4;
+}
+.ui-state-default a,
+.ui-state-default a:link,
+.ui-state-default a:visited {
+	color: #1c94c4;
+	text-decoration: none;
+}
+.ui-state-hover,
+.ui-widget-content .ui-state-hover,
+.ui-widget-header .ui-state-hover,
+.ui-state-focus,
+.ui-widget-content .ui-state-focus,
+.ui-widget-header .ui-state-focus {
+	border: 1px solid #fbcb09;
+	background: #fdf5ce url(../../img/datepicker/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x;
+	font-weight: bold;
+	color: #c77405;
+}
+.ui-state-hover a,
+.ui-state-hover a:hover,
+.ui-state-hover a:link,
+.ui-state-hover a:visited {
+	color: #c77405;
+	text-decoration: none;
+}
+.ui-state-active,
+.ui-widget-content .ui-state-active,
+.ui-widget-header .ui-state-active {
+	border: 1px solid #fbd850;
+	background: #ffffff url(../../img/datepicker/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
+	font-weight: bold;
+	color: #eb8f00;
+}
+.ui-state-active a,
+.ui-state-active a:link,
+.ui-state-active a:visited {
+	color: #eb8f00;
+	text-decoration: none;
+}
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight,
+.ui-widget-content .ui-state-highlight,
+.ui-widget-header .ui-state-highlight {
+	border: 1px solid #fed22f;
+	background: #ffe45c url(../../img/datepicker/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x;
+	color: #363636;
+}
+.ui-state-highlight a,
+.ui-widget-content .ui-state-highlight a,
+.ui-widget-header .ui-state-highlight a {
+	color: #363636;
+}
+.ui-state-error,
+.ui-widget-content .ui-state-error,
+.ui-widget-header .ui-state-error {
+	border: 1px solid #cd0a0a;
+	background: #b81900 url(../../img/datepicker/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;
+	color: #ffffff;
+}
+.ui-state-error a,
+.ui-widget-content .ui-state-error a,
+.ui-widget-header .ui-state-error a {
+	color: #ffffff;
+}
+.ui-state-error-text,
+.ui-widget-content .ui-state-error-text,
+.ui-widget-header .ui-state-error-text {
+	color: #ffffff;
+}
+.ui-priority-primary,
+.ui-widget-content .ui-priority-primary,
+.ui-widget-header .ui-priority-primary {
+	font-weight: bold;
+}
+.ui-priority-secondary,
+.ui-widget-content .ui-priority-secondary,
+.ui-widget-header .ui-priority-secondary {
+	opacity: .7;
+	filter:Alpha(Opacity=70);
+	font-weight: normal;
+}
+.ui-state-disabled,
+.ui-widget-content .ui-state-disabled,
+.ui-widget-header .ui-state-disabled {
+	opacity: .35;
+	filter:Alpha(Opacity=35);
+	background-image: none;
+}
+.ui-state-disabled .ui-icon {
+	filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
+}
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon {
+	width: 16px;
+	height: 16px;
+	background-position: 16px 16px;
+}
+.ui-icon,
+.ui-widget-content .ui-icon {
+	background-image: url(../../img/datepicker/ui-icons_222222_256x240.png);
+}
+.ui-widget-header .ui-icon {
+	background-image: url(../../img/datepicker/ui-icons_ffffff_256x240.png);
+}
+.ui-state-default .ui-icon {
+	background-image: url(../../img/datepicker/ui-icons_ef8c08_256x240.png);
+}
+.ui-state-hover .ui-icon,
+.ui-state-focus .ui-icon {
+	background-image: url(../../img/datepicker/ui-icons_ef8c08_256x240.png);
+}
+.ui-state-active .ui-icon {
+	background-image: url(../../img/datepicker/ui-icons_ef8c08_256x240.png);
+}
+.ui-state-highlight .ui-icon {
+	background-image: url(../../img/datepicker/ui-icons_228ef1_256x240.png);
+}
+.ui-state-error .ui-icon,
+.ui-state-error-text .ui-icon {
+	background-image: url(../../img/datepicker/ui-icons_ffd27a_256x240.png);
+}
+
+/* positioning */
+.ui-icon-carat-1-n { background-position: 0 0; }
+.ui-icon-carat-1-ne { background-position: -16px 0; }
+.ui-icon-carat-1-e { background-position: -32px 0; }
+.ui-icon-carat-1-se { background-position: -48px 0; }
+.ui-icon-carat-1-s { background-position: -64px 0; }
+.ui-icon-carat-1-sw { background-position: -80px 0; }
+.ui-icon-carat-1-w { background-position: -96px 0; }
+.ui-icon-carat-1-nw { background-position: -112px 0; }
+.ui-icon-carat-2-n-s { background-position: -128px 0; }
+.ui-icon-carat-2-e-w { background-position: -144px 0; }
+.ui-icon-triangle-1-n { background-position: 0 -16px; }
+.ui-icon-triangle-1-ne { background-position: -16px -16px; }
+.ui-icon-triangle-1-e { background-position: -32px -16px; }
+.ui-icon-triangle-1-se { background-position: -48px -16px; }
+.ui-icon-triangle-1-s { background-position: -64px -16px; }
+.ui-icon-triangle-1-sw { background-position: -80px -16px; }
+.ui-icon-triangle-1-w { background-position: -96px -16px; }
+.ui-icon-triangle-1-nw { background-position: -112px -16px; }
+.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
+.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
+.ui-icon-arrow-1-n { background-position: 0 -32px; }
+.ui-icon-arrow-1-ne { background-position: -16px -32px; }
+.ui-icon-arrow-1-e { background-position: -32px -32px; }
+.ui-icon-arrow-1-se { background-position: -48px -32px; }
+.ui-icon-arrow-1-s { background-position: -64px -32px; }
+.ui-icon-arrow-1-sw { background-position: -80px -32px; }
+.ui-icon-arrow-1-w { background-position: -96px -32px; }
+.ui-icon-arrow-1-nw { background-position: -112px -32px; }
+.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
+.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
+.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
+.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
+.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
+.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
+.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
+.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
+.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
+.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
+.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
+.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
+.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
+.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
+.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
+.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
+.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
+.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
+.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
+.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
+.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
+.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
+.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
+.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
+.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
+.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
+.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
+.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
+.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
+.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
+.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
+.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
+.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
+.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
+.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
+.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
+.ui-icon-arrow-4 { background-position: 0 -80px; }
+.ui-icon-arrow-4-diag { background-position: -16px -80px; }
+.ui-icon-extlink { background-position: -32px -80px; }
+.ui-icon-newwin { background-position: -48px -80px; }
+.ui-icon-refresh { background-position: -64px -80px; }
+.ui-icon-shuffle { background-position: -80px -80px; }
+.ui-icon-transfer-e-w { background-position: -96px -80px; }
+.ui-icon-transferthick-e-w { background-position: -112px -80px; }
+.ui-icon-folder-collapsed { background-position: 0 -96px; }
+.ui-icon-folder-open { background-position: -16px -96px; }
+.ui-icon-document { background-position: -32px -96px; }
+.ui-icon-document-b { background-position: -48px -96px; }
+.ui-icon-note { background-position: -64px -96px; }
+.ui-icon-mail-closed { background-position: -80px -96px; }
+.ui-icon-mail-open { background-position: -96px -96px; }
+.ui-icon-suitcase { background-position: -112px -96px; }
+.ui-icon-comment { background-position: -128px -96px; }
+.ui-icon-person { background-position: -144px -96px; }
+.ui-icon-print { background-position: -160px -96px; }
+.ui-icon-trash { background-position: -176px -96px; }
+.ui-icon-locked { background-position: -192px -96px; }
+.ui-icon-unlocked { background-position: -208px -96px; }
+.ui-icon-bookmark { background-position: -224px -96px; }
+.ui-icon-tag { background-position: -240px -96px; }
+.ui-icon-home { background-position: 0 -112px; }
+.ui-icon-flag { background-position: -16px -112px; }
+.ui-icon-calendar { background-position: -32px -112px; }
+.ui-icon-cart { background-position: -48px -112px; }
+.ui-icon-pencil { background-position: -64px -112px; }
+.ui-icon-clock { background-position: -80px -112px; }
+.ui-icon-disk { background-position: -96px -112px; }
+.ui-icon-calculator { background-position: -112px -112px; }
+.ui-icon-zoomin { background-position: -128px -112px; }
+.ui-icon-zoomout { background-position: -144px -112px; }
+.ui-icon-search { background-position: -160px -112px; }
+.ui-icon-wrench { background-position: -176px -112px; }
+.ui-icon-gear { background-position: -192px -112px; }
+.ui-icon-heart { background-position: -208px -112px; }
+.ui-icon-star { background-position: -224px -112px; }
+.ui-icon-link { background-position: -240px -112px; }
+.ui-icon-cancel { background-position: 0 -128px; }
+.ui-icon-plus { background-position: -16px -128px; }
+.ui-icon-plusthick { background-position: -32px -128px; }
+.ui-icon-minus { background-position: -48px -128px; }
+.ui-icon-minusthick { background-position: -64px -128px; }
+.ui-icon-close { background-position: -80px -128px; }
+.ui-icon-closethick { background-position: -96px -128px; }
+.ui-icon-key { background-position: -112px -128px; }
+.ui-icon-lightbulb { background-position: -128px -128px; }
+.ui-icon-scissors { background-position: -144px -128px; }
+.ui-icon-clipboard { background-position: -160px -128px; }
+.ui-icon-copy { background-position: -176px -128px; }
+.ui-icon-contact { background-position: -192px -128px; }
+.ui-icon-image { background-position: -208px -128px; }
+.ui-icon-video { background-position: -224px -128px; }
+.ui-icon-script { background-position: -240px -128px; }
+.ui-icon-alert { background-position: 0 -144px; }
+.ui-icon-info { background-position: -16px -144px; }
+.ui-icon-notice { background-position: -32px -144px; }
+.ui-icon-help { background-position: -48px -144px; }
+.ui-icon-check { background-position: -64px -144px; }
+.ui-icon-bullet { background-position: -80px -144px; }
+.ui-icon-radio-on { background-position: -96px -144px; }
+.ui-icon-radio-off { background-position: -112px -144px; }
+.ui-icon-pin-w { background-position: -128px -144px; }
+.ui-icon-pin-s { background-position: -144px -144px; }
+.ui-icon-play { background-position: 0 -160px; }
+.ui-icon-pause { background-position: -16px -160px; }
+.ui-icon-seek-next { background-position: -32px -160px; }
+.ui-icon-seek-prev { background-position: -48px -160px; }
+.ui-icon-seek-end { background-position: -64px -160px; }
+.ui-icon-seek-start { background-position: -80px -160px; }
+/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
+.ui-icon-seek-first { background-position: -80px -160px; }
+.ui-icon-stop { background-position: -96px -160px; }
+.ui-icon-eject { background-position: -112px -160px; }
+.ui-icon-volume-off { background-position: -128px -160px; }
+.ui-icon-volume-on { background-position: -144px -160px; }
+.ui-icon-power { background-position: 0 -176px; }
+.ui-icon-signal-diag { background-position: -16px -176px; }
+.ui-icon-signal { background-position: -32px -176px; }
+.ui-icon-battery-0 { background-position: -48px -176px; }
+.ui-icon-battery-1 { background-position: -64px -176px; }
+.ui-icon-battery-2 { background-position: -80px -176px; }
+.ui-icon-battery-3 { background-position: -96px -176px; }
+.ui-icon-circle-plus { background-position: 0 -192px; }
+.ui-icon-circle-minus { background-position: -16px -192px; }
+.ui-icon-circle-close { background-position: -32px -192px; }
+.ui-icon-circle-triangle-e { background-position: -48px -192px; }
+.ui-icon-circle-triangle-s { background-position: -64px -192px; }
+.ui-icon-circle-triangle-w { background-position: -80px -192px; }
+.ui-icon-circle-triangle-n { background-position: -96px -192px; }
+.ui-icon-circle-arrow-e { background-position: -112px -192px; }
+.ui-icon-circle-arrow-s { background-position: -128px -192px; }
+.ui-icon-circle-arrow-w { background-position: -144px -192px; }
+.ui-icon-circle-arrow-n { background-position: -160px -192px; }
+.ui-icon-circle-zoomin { background-position: -176px -192px; }
+.ui-icon-circle-zoomout { background-position: -192px -192px; }
+.ui-icon-circle-check { background-position: -208px -192px; }
+.ui-icon-circlesmall-plus { background-position: 0 -208px; }
+.ui-icon-circlesmall-minus { background-position: -16px -208px; }
+.ui-icon-circlesmall-close { background-position: -32px -208px; }
+.ui-icon-squaresmall-plus { background-position: -48px -208px; }
+.ui-icon-squaresmall-minus { background-position: -64px -208px; }
+.ui-icon-squaresmall-close { background-position: -80px -208px; }
+.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
+.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
+.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
+.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
+.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
+.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Corner radius */
+.ui-corner-all,
+.ui-corner-top,
+.ui-corner-left,
+.ui-corner-tl {
+	border-top-left-radius: 4px;
+}
+.ui-corner-all,
+.ui-corner-top,
+.ui-corner-right,
+.ui-corner-tr {
+	border-top-right-radius: 4px;
+}
+.ui-corner-all,
+.ui-corner-bottom,
+.ui-corner-left,
+.ui-corner-bl {
+	border-bottom-left-radius: 4px;
+}
+.ui-corner-all,
+.ui-corner-bottom,
+.ui-corner-right,
+.ui-corner-br {
+	border-bottom-right-radius: 4px;
+}
+
+/* Overlays */
+.ui-widget-overlay {
+	background: #666666 url(../../img/datepicker/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
+	opacity: .5;
+	filter: Alpha(Opacity=50);
+}
+.ui-widget-shadow {
+	margin: -5px 0 0 -5px;
+	padding: 5px;
+	background: #000000 url(../../img/datepicker/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x;
+	opacity: .2;
+	filter: Alpha(Opacity=20);
+	border-radius: 5px;
+}

assets/css/src/components/datepicker/melon.datepicker.css

@@ -0,0 +1,115 @@
+/**
+ * Melon skin from: https://github.com/rtsinani/jquery-datepicker-skins
+ */
+
+.wp-admin {
+	font-size: 90%;
+}
+
+.wp-admin .ui-widget {
+	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
+	background: #2e3641;
+	border: none;
+	border-radius: 0;
+	-webkit-border-radius: 0;
+	-moz-border-radius: 0;
+}
+
+.wp-admin .ui-datepicker {
+	padding: 0;
+}
+
+.wp-admin .ui-datepicker-header {
+	border: none;
+	background: transparent;
+	font-weight: normal;
+	font-size: 15px;
+}
+
+.wp-admin .ui-datepicker-header .ui-state-hover {
+	background: transparent;
+	border-color: transparent;
+	cursor: pointer;
+	border-radius: 0;
+	-webkit-border-radius: 0;
+	-moz-border-radius: 0;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-title {
+	margin-top: .4em;
+	margin-bottom: .3em;
+	color: #e9f0f4;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-prev-hover,
+.wp-admin .ui-datepicker .ui-datepicker-next-hover,
+.wp-admin .ui-datepicker .ui-datepicker-next,
+.wp-admin .ui-datepicker .ui-datepicker-prev {
+	top: .9em;
+	border:none;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-prev-hover {
+	left: 2px;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-next-hover {
+	right: 2px;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-next span,
+.wp-admin .ui-datepicker .ui-datepicker-prev span {
+	background-image: url(../../img/datepicker/ui-icons_ffffff_256x240.png);
+	background-position: -32px 0;
+	margin-top: 0;
+	top: 0;
+	font-weight: normal;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-prev span {
+	background-position: -96px 0;
+}
+
+.wp-admin .ui-datepicker table {
+	margin: 0;
+}
+
+.wp-admin .ui-datepicker th {
+	padding: 1em 0;
+	color: #ccc;
+	font-size: 13px;
+	font-weight: normal;
+	border: none;
+	border-top: 1px solid #3a414d;
+}
+
+.wp-admin .ui-datepicker td {
+	background: #f97e76;
+	border: none;
+	padding: 0;
+}
+
+.wp-admin td .ui-state-default {
+	background: transparent;
+	border: none;
+	text-align: center;
+	padding: .5em;
+	margin: 0;
+	font-weight: normal;
+	color: #efefef;
+	font-size: 16px;
+}
+
+.wp-admin .ui-state-disabled  {
+	opacity: 1;
+}
+
+.wp-admin .ui-state-disabled .ui-state-default {
+	color: #fba49e;
+}
+
+.wp-admin td .ui-state-active,
+.wp-admin td .ui-state-hover {
+	background: #2e3641;
+}
+

assets/css/src/components/formEditor/components/_block_editor.scss

@@ -0,0 +1,31 @@
+// Fix for scrolling within editor
+// This is fixed in Gutenberg's master branch.
+// We should remove this fix after we update @wordpress/edit-post to version newer than 3.9.0
+
+@media (min-width: 600px) {
+  .edit-post-layout__content {
+    overflow-y: auto;
+    overscroll-behavior-y: none;
+    padding-bottom: 0;
+  }
+}
+
+// Fix for broken drag and drop for blocks
+// This is fixed in Gutenberg's master branch
+// https://github.com/WordPress/gutenberg/pull/15054
+// We should remove this fix after we update @wordpress/components to version newer than 8.4.0
+.edit-post-layout__content {
+  .block-editor-block-mover__control-drag-handle {
+    display: none;
+  }
+}
+
+// We don't want to allow user to remove Submit or Email.
+// There is no way to hide the delete button programmatically so we hide last toolbar that contains the delete option
+// There is a feature request for adding that into Gutenberg https://github.com/WordPress/gutenberg/issues/16364
+.wp-block[data-type='mailpoet-form/email-input'],
+.wp-block[data-type='mailpoet-form/submit-button'] {
+  .components-toolbar:last-child {
+    display: none;
+  }
+}

assets/css/src/components/formEditor/components/_form_title.scss

@@ -0,0 +1,7 @@
+.editor-post-title {
+  .editor-post-title__input {
+    overflow: hidden;
+    overflow-wrap: break-word;
+    resize: none;
+  }
+}

assets/css/src/components/formEditor/components/_sidebar.scss

@@ -0,0 +1,71 @@
+$gutenberg-control-border-color: #7e8993;
+$gutenberg-control-border-color-focus: #007cba;
+
+.components-panel {
+  .select2-container {
+    width: 100% !important;
+
+    input.select2-search__field:focus {
+      border: 0;
+      box-shadow: none;
+    }
+
+    .select2-selection {
+      border-color: $gutenberg-control-border-color;
+    }
+
+    &.select2-container--focus {
+      .select2-selection {
+        border-color: $gutenberg-control-border-color-focus;
+        box-shadow: 0 0 0 1px $gutenberg-control-border-color-focus;
+      }
+    }
+  }
+
+  .mailpoet-form-missing-lists {
+    .select2-selection {
+      border-color: red;
+    }
+
+    .mailpoet-form-lists-error {
+      color: red;
+    }
+  }
+}
+
+.components-base-control.mailpoet-form-success-types__control {
+  margin-bottom: 0;
+
+  .components-base-control__label {
+    display: block;
+  }
+
+  .components-radio-control__option {
+    display: inline-block;
+    margin-right: 1em;
+
+    input {
+      margin-right: 6px;
+    }
+  }
+}
+
+.mailpoet-form-segments-settings-list {
+  display: flex;
+  flex-direction: row;
+
+  .components-base-control {
+    flex-grow: 1;
+    margin: 8px 0;
+
+    .components-base-control__field {
+      margin: 0;
+    }
+  }
+
+  .mailpoet-form-segments-segment-remove {
+    cursor: pointer;
+    flex-grow: 0;
+    margin: 8px 0;
+  }
+}

assets/css/src/components/listing/_newsletters.scss

@@ -0,0 +1,94 @@
+$excellent-badge-color: #2993ab;
+$good-badge-color: #f0b849;
+$bad-badge-color: #d54e21;
+$green-badge-color: #55bd56;
+$video-guide-badge-color: #46b450;
+
+#newsletters_container {
+  h2.nav-tab-wrapper {
+    margin-bottom: 1rem;
+  }
+}
+
+.mailpoet_stats_text {
+  font-size: 14px;
+  font-weight: 600;
+}
+
+.mailpoet_stat_excellent {
+  color: $excellent-badge-color;
+}
+
+.mailpoet_stat_good {
+  color: $good-badge-color;
+}
+
+.mailpoet_stat_bad {
+  color: $bad-badge-color;
+}
+
+.mailpoet_stat_hidden {
+  display: none;
+}
+
+.mailpoet_stat_link_small {
+  font-size: .75rem;
+  text-decoration: underline !important;
+}
+
+.mailpoet_badge {
+  border-radius: 3px;
+  color: white;
+  cursor: pointer;
+  font-size: .5625rem;
+  font-weight: 500;
+  letter-spacing: 1px;
+  margin-right: 4px;
+  padding: 4px 6px 3px;
+  text-transform: uppercase;
+  vertical-align: middle;
+}
+
+.mailpoet_badge_excellent,
+.mailpoet_badge_teal {
+  background: $excellent-badge-color;
+}
+
+.mailpoet_badge_good,
+.mailpoet_badge_yellow {
+  background: $good-badge-color;
+}
+
+.mailpoet_badge_bad,
+.mailpoet_badge_red {
+  background: $bad-badge-color;
+}
+
+.mailpoet_badge_green {
+  background: $green-badge-color;
+}
+
+.mailpoet_badge_video {
+  background: $video-guide-badge-color;
+  display: inline-block;
+  line-height: 20px;
+  padding: 3px 6px;
+  text-decoration: none;
+  vertical-align: top;
+
+  &:hover,
+  &:active,
+  &:focus {
+    background: $green-badge-color;
+    color: #fff;
+  }
+
+  .dashicons {
+    font-size: 14px;
+    line-height: 20px;
+  }
+}
+
+.mailpoet_badge_video_grey {
+  background: #c3c3c3;
+}

assets/css/src/components/newsletterEditor/_common.scss

@@ -0,0 +1,340 @@
+$link-color: $primary-active-background-color;
+
+$select-border-color: $content-border-color;
+$select-text-color: $primary-text-color;
+
+$button-default-border-color: $structure-border-color;
+$button-default-background-color: $primary-background-color;
+$button-default-text-color: $primary-inactive-color;
+
+$button-primary-border-color: $primary-active-color;
+$button-primary-background-color: $primary-active-background-color;
+$button-primary-hover-background-color: $primary-active-color-highlight;
+$button-primary-text-color: $white-color;
+
+$range-track-background-color: $white-color;
+$range-track-border-color: $structure-border-color;
+$range-track-height: 12px;
+$range-thumb-background-color: $primary-inactive-color;
+$range-thumb-border-color: #333;
+$range-thumb-width: 13px;
+$range-thumb-height: 26px;
+$range-border-radius: 3px;
+$range-thumb-hover-background-color: $primary-active-color;
+
+a {
+  color: $link-color;
+  text-decoration: none;
+}
+
+.mailpoet_hidden {
+  display: none !important;
+}
+
+input.mailpoet_color {
+  width: 5em;
+}
+
+select.mailpoet_font-family {
+  width: 8em;
+}
+
+select.mailpoet_font-size {
+  width: 5em;
+}
+
+.mailpoet_input,
+.mailpoet_select {
+  $form-control-padding: 3px;
+  appearance: none;
+  border-radius: 1px;
+  box-shadow: none !important;
+  line-height: 28px - $form-control-padding * 2;
+  padding: $form-control-padding;
+}
+
+.mailpoet_input {
+  border: 1px solid $select-border-color;
+  width: 283px;
+}
+
+.mailpoet_input_small {
+  width: 58px;
+}
+
+.mailpoet_input_medium {
+  width: 150px;
+}
+
+.mailpoet_input_full {
+  box-sizing: border-box;
+  margin: 0;
+  width: 100%;
+}
+
+.mailpoet_range {
+  -webkit-appearance: none;
+  padding: 0;
+  vertical-align: middle;
+  width: 283px;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::-webkit-slider-runnable-track {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-track-height;
+    width: 100%;
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    background: $range-thumb-background-color;
+    border: 1px solid $range-thumb-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-thumb-height;
+    margin-top: -1 * $range-thumb-height / 3;
+    width: $range-thumb-width;
+  }
+
+  &:hover::-webkit-slider-thumb {
+    background: $range-thumb-hover-background-color;
+  }
+
+  &::-moz-range-track {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-track-height;
+    width: 100%;
+  }
+
+  &::-moz-range-thumb {
+    background: $range-thumb-background-color;
+    border: 1px solid $range-thumb-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-thumb-height;
+    width: $range-thumb-width;
+  }
+
+  &:hover::-moz-range-thumb {
+    background: $range-thumb-hover-background-color;
+  }
+
+  &::-ms-fill-lower {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+  }
+
+  &::-ms-fill-upper {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+  }
+
+  &::-ms-track {
+    background: transparent;
+    border-color: transparent;
+    border-width: $range-track-height * 2 0;
+    color: transparent;
+    cursor: pointer;
+    height: $range-track-height;
+    width: 100%;
+  }
+
+  &::-ms-thumb {
+    background: $range-thumb-background-color;
+    border: 1px solid $range-thumb-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-thumb-height;
+    width: $range-thumb-width;
+  }
+
+  &:hover::-ms-thumb {
+    background: $range-thumb-hover-background-color;
+  }
+
+  &:focus::-ms-fill-lower {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+  }
+
+  &:focus::-ms-fill-upper {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+  }
+}
+
+.mailpoet_range_small {
+  width: 100px;
+}
+
+.mailpoet_range_medium {
+  width: 180px;
+}
+
+.mailpoet_select {
+  border-color: $select-border-color;
+  color: $select-text-color;
+  margin: 0;
+}
+
+.mailpoet_select_large {
+  width: 139px;
+}
+
+.mailpoet_select_medium {
+  width: 103px;
+}
+
+.mailpoet_select_small {
+  width: 68px;
+}
+
+.mailpoet_select_half_width {
+  width: 50%;
+}
+
+#mailpoet_editor_content ol,
+#mailpoet_editor_content ul {
+  padding-left: 40px;
+}
+
+#mailpoet_editor_content ul {
+  list-style-type: disc;
+
+  ul {
+    list-style-type: circle;
+
+    ul { list-style-type: square; }
+  }
+}
+
+.mailpoet_button {
+  background-color: $button-default-background-color;
+  border: 1px solid $button-default-border-color;
+  border-radius: 3px;
+  color: $button-default-text-color;
+  line-height: normal;
+  margin: 0;
+  padding: 6px 20px;
+  vertical-align: top;
+}
+
+.mailpoet_button_full {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.tooltip-help-designer-subject-line div,
+.tooltip-help-designer-preheader div {
+  z-index: 100001;
+}
+
+.tooltip-help-send-preview {
+  color: #fff;
+  margin-top: -10px;
+  position: absolute;
+  right: 4px;
+  top: 50%;
+}
+
+.tooltip-help-designer-ideal-width {
+  color: #656565;
+  font-weight: normal;
+  margin-left: 5px;
+  text-transform: none;
+}
+
+.tooltip-help-designer-full-width .dashicons {
+  line-height: 34px;
+}
+
+.tooltip-help-designer-full-width span {
+  line-height: 1.4em;
+}
+
+.mailpoet_button_primary {
+  background-color: $button-primary-background-color;
+  border-color: $button-primary-border-color;
+  color: $button-primary-text-color;
+
+  &:hover {
+    background-color: $button-primary-hover-background-color;
+  }
+}
+
+.mailpoet_button_group {
+  display: inline;
+
+  .mailpoet_button:first-child {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    margin-right: 0;
+    padding: 6px 12px;
+  }
+
+  .mailpoet_button:last-child {
+    border-bottom-left-radius: 0;
+    border-left: 0;
+    border-top-left-radius: 0;
+    margin-left: 0;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+
+.mailpoet_text_content p {
+  margin: 1em 0;
+}
+
+.mailpoet_separator {
+  margin: 17px 20px;
+}
+
+.mailpoet_option_offset_left_small {
+  margin-left: 10px;
+}
+
+input.mailpoet_option_offset_left_small {
+  margin-left: 10px !important;
+}
+
+.mailpoet_form_narrow_select2 span.select2-container {
+  width: 103px !important;
+}
+
+span.select2-container--open > span.select2-dropdown {
+  min-width: 150px;
+}
+
+span.select2-container--open > span.select2-dropdown li.select2-results__option {
+  font-size: 13px;
+  margin: 0 !important;
+
+  .select2-results__group {
+    color: #bfbfbf;
+    font-weight: normal;
+  }
+
+  .select2-results__option {
+    font-size: 13px;
+    padding-left: 15px;
+
+    &[aria-selected=true] {
+      background-color: #eee;
+      color: #444;
+    }
+  }
+}
+
+.mailpoet_settings_notice {
+  color: #999;
+}

assets/css/src/components/newsletterEditor/_layout.scss

@@ -0,0 +1,48 @@
+$sidebar-width: 330px;
+$content-border-color: $structure-border-color;
+
+#mailpoet_editor {
+  clear: both;
+  width: 100%;
+}
+
+#mailpoet_editor_heading_left {
+  float: left;
+}
+
+#mailpoet_editor_heading_right {
+  float: right;
+}
+
+#mailpoet_editor_heading {
+  clear: both;
+  margin-bottom: 13px;
+  margin-left: 2px;
+  padding-left: 15px;
+}
+
+#mailpoet_editor_main_wrapper {
+  border: 1px solid $content-border-color;
+  border-left: 0;
+  min-width: 1050px;
+  position: relative;
+}
+
+#mailpoet_editor_content_container {
+  box-sizing: border-box;
+  padding-right: $sidebar-width;
+  width: 100%;
+}
+
+#mailpoet_editor_sidebar {
+  box-sizing: border-box;
+  float: right;
+  width: $sidebar-width;
+}
+
+.mailpoet_newsletter_wrapper {
+  margin: auto;
+  max-width: $newsletter-width;
+  position: relative;
+  width: $newsletter-width;
+}

assets/css/src/components/newsletterEditor/_libraryOverrides.scss

@@ -0,0 +1,177 @@
+/* Fix select2 z-index to work with MailPoet.Modal */
+.select2-dropdown {
+  z-index: 101000 !important;
+}
+
+/* Remove input field styles from select2 type input */
+.select2-container {
+  border: none;
+  padding: 0;
+}
+
+/* Fix select2 input glow and margins that wordpress may insert */
+.select2 input,
+.select2 input:focus {
+  border-color: none;
+  box-shadow: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* Fix width overrides for select2 */
+.mailpoet_editor_settings .select2-container {
+  width: 100% !important;
+}
+
+.tox {
+  /* Small style changes to better fit TinyMCE to our editor */
+  &.tox-tinymce-inline {
+    border: 1px solid $content-border-color;
+    border-radius: 3px;
+    box-shadow: 0 0 3px 1px rgba(0, 0, 0, .05);
+
+    /* Fix for fixed TinyMCE toolbar to be above WP menu */
+    z-index: 50001;
+  }
+
+  /* Fix for TinyMCE modals are above WP menu */
+  &.tox-tinymce-aux {
+    z-index: 99999;
+  }
+
+  .tox-toolbar {
+    background-color: $primary-background-color;
+
+    /* Fix double border on top of TineMCE popup */
+    &:first-child {
+      border-top: 0;
+    }
+  }
+
+  /* Slightly smaller TinyMCE button */
+  .tox-tbtn:not(.tox-tbtn--select) {
+    height: 28px;
+    width: 30px;
+  }
+
+  /* Fix for text type select */
+  .tox-collection__item-label {
+    line-height: normal;
+  }
+}
+
+/* TinyMCE remove active border from the editor */
+.mce-edit-focus {
+  outline: none;
+}
+
+#wpbody-content > * {
+  margin-left: 20px;
+}
+
+#wpbody-content > .wrap {
+  margin-left: 0;
+}
+
+#wpcontent {
+  margin-left: 160px;
+  padding-left: 0;
+
+  .folded & {
+    margin-left: 36px;
+  }
+}
+
+.wrap {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+/* Reduce WP admin bar z-index in order for TinyMCE toolbar to be visible */
+#wpadminbar {
+  z-index: 50000;
+}
+
+/* Allow horizontal scrolling on smaller (tablet/phone) sized screens */
+body {
+  overflow-x: auto;
+}
+
+/* Hide the "Details" section of WordPress Media manager */
+.media-sidebar {
+  display: none;
+}
+
+#mailpoet-media-manager {
+  .attachments-browser .attachments,
+  .attachments-browser .uploader-inline {
+    margin-right: 0;
+  }
+
+  .attachments-browser .attachments,
+  .attachments-browser .media-toolbar,
+  .attachments-browser .uploader-inline {
+    right: 0;
+  }
+}
+
+/* Remove max width from date selector in WordPress Media Manager */
+#media-attachment-date-filters {
+  max-width: calc(100% - 12px);
+}
+
+/* Alter Spectrum color picker to leave only the color preview, without arrows */
+.sp-replacer {
+  border: 0;
+  border-radius: 3px;
+  box-shadow: 1px 2px darken($primary-background-color, 13%);
+  padding: 0;
+}
+
+.sp-preview {
+  border-width: 0;
+  height: 25px;
+  margin-right: 0;
+  width: 25px;
+}
+
+.sp-dd {
+  display: none;
+}
+
+/* Sidepanel overrides */
+.mailpoet_panel_body {
+  margin: 19px;
+  padding: 0;
+
+  .mailpoet_editor_settings h3 {
+    margin-top: 0;
+  }
+}
+
+.mailpoet_panel_wrapper {
+  background-color: $primary-background-color;
+  border: 1px solid $content-border-color;
+}
+
+.wrap > .mailpoet_notice,
+.notice,
+.update-nag {
+  margin-left: 2px + 15px !important;
+  margin-right: 20px !important;
+}
+
+/* Make a button group */
+.mailpoet_button_group {
+  .button:first-child {
+    border-bottom-right-radius: 0;
+    border-right: 0;
+    border-top-right-radius: 0;
+  }
+
+  .button:last-child {
+    border-bottom-left-radius: 0;
+    border-left: 0;
+    border-top-left-radius: 0;
+  }
+}

assets/css/src/components/newsletterEditor/_variables.scss

@@ -0,0 +1,33 @@
+$transparent-color: rgba(255, 255, 255, 0);
+$white-color: rgb(255, 255, 255);
+$black-color: rgb(0, 0, 0);
+
+$structure-border-color: #ddd;
+$content-border-color: #e5e5e5;
+
+$primary-active-color: #0074a2;
+$primary-active-color-highlight: #1e8cbe;
+$primary-inactive-color: #a4a4a4;
+
+$primary-active-background-color: #2ea1cd;
+$primary-background-color: #f8f8f8;
+
+$primary-text-color: #656565;
+
+$primary-inset-shadow-color: #025c80;
+
+$warning-background-color: #e64047;
+$warning-text-color: $white-color;
+$warning-alternate-text-color: #f4c6c8;
+
+$error-text-color: #d54e21;
+
+$editor-column-color: #7fbbd0;
+$editor-content-color: #0078a2;
+
+$newsletter-width: 660px;
+
+$text-line-height: 1.6em;
+$sidebar-text-size: 13px;
+
+$info-message-background-color: #fed2bf;

assets/css/src/components/newsletterEditor/components/_blockTools.scss

@@ -0,0 +1,219 @@
+$tool-inactive-color: #333;
+$tool-inactive-secondary-color: #fff;
+$tool-hover-color: #bbb;
+$tool-hover-secondary-color: #fff;
+$tool-active-color: #d2d2d4;
+$tool-active-secondary-color: #fff;
+
+$content-icon-size: 14px;
+$content-icon-size-with-padding: 24px;
+$column-icon-size: 15px;
+$column-icon-size-with-padding: 27px;
+
+.mailpoet_tools {
+  bottom: 100%;
+  left: 50%;
+  overflow: hidden;
+  position: absolute;
+  text-align: right;
+  text-align: center;
+  transform: translateX(-50%);
+  transition: visibility 0s linear 250ms;
+  visibility: hidden;
+  z-index: 20;
+
+  .mailpoet_tools_slider {
+    background: $editor-content-color;
+    border-radius: 10px 10px 0 0;
+    display: flex;
+    flex-direction: row;
+    padding: 3px 7px;
+    position: relative;
+    transform: translateY(100%);
+    transition: all 250ms cubic-bezier(.42, 0, .58, 1);
+  }
+
+  .mailpoet_resize_active & .mailpoet_tools_slider,
+  &.mailpoet_display_tools .mailpoet_tools_slider {
+    transform: translateY(0);
+    transition: all 250ms cubic-bezier(.42, 0, .58, 1), visibility 0s linear;
+    visibility: visible;
+  }
+
+  a {
+    vertical-align: top;
+  }
+
+  .mailpoet_container_horizontal + & {
+    bottom: auto;
+    left: 100%;
+    top: -2px;
+    transform: none;
+
+    .mailpoet_tools_slider {
+      background: $editor-column-color;
+      border-radius: 0 10px 10px 0;
+      flex-direction: column;
+      padding: 7px 3px;
+      transform: translateY(0) translateX(-100%);
+    }
+
+    &.mailpoet_display_tools,
+    .mailpoet_resize_active & {
+      z-index: 21;
+
+      .mailpoet_tools_slider {
+        transform: translateY(0) translateX(0);
+      }
+    }
+
+    .mailpoet_tool {
+      display: block;
+      height: $column-icon-size-with-padding;
+      width: $column-icon-size-with-padding;
+
+      svg {
+        height: $column-icon-size;
+        padding: 6px;
+        width: $column-icon-size;
+      }
+    }
+
+    .mailpoet_delete_block {
+      flex-direction: column;
+    }
+
+    .mailpoet_delete_block_activate {
+      display: block;
+      max-height: $column-icon-size-with-padding;
+      max-width: none;
+      opacity: 1;
+    }
+
+    .mailpoet_delete_block_confirm,
+    .mailpoet_delete_block_cancel {
+      display: block;
+      margin: 0;
+      width: 100%;
+    }
+
+    .mailpoet_delete_block_activated {
+      height: auto;
+      padding: 0 5px 3px;
+      width: auto;
+
+      .mailpoet_delete_block_activate {
+        max-height: 0;
+        opacity: 0;
+        overflow: hidden;
+      }
+
+      .mailpoet_delete_block_confirm,
+      .mailpoet_delete_block_cancel {
+        opacity: 1;
+      }
+    }
+  }
+}
+
+.mailpoet_tool {
+  display: inline-block;
+  height: $content-icon-size-with-padding;
+  width: $content-icon-size-with-padding;
+
+  svg {
+    fill: #fff;
+    height: $content-icon-size;
+    padding: 5px;
+    vertical-align: top;
+    width: $content-icon-size;
+  }
+
+  &:hover svg,
+  &:focus svg {
+    opacity: .7;
+  }
+
+  .mailpoet_delete_block_confirmation {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 200px;
+  }
+}
+
+.mailpoet_delete_block {
+  border-radius: 3px;
+  display: flex;
+  flex-direction: row-reverse;
+  line-height: 24px;
+  vertical-align: top;
+  white-space: nowrap;
+
+  @include animation-background-color();
+
+  .mailpoet_tool {
+    padding: 0;
+  }
+
+  .mailpoet_delete_block_activate {
+    display: inline-block;
+    max-width: $content-icon-size-with-padding;
+    opacity: 1;
+
+    @include animation-fade-in-and-scale-horizontally();
+  }
+
+  .mailpoet_delete_block_confirm,
+  .mailpoet_delete_block_cancel {
+    display: inline-block;
+    max-height: 0;
+    max-width: 0;
+    opacity: 0;
+    overflow: hidden;
+
+    @include animation-fade-in-and-scale-horizontally();
+  }
+}
+
+.mailpoet_delete_block_activated {
+  background-color: $warning-background-color;
+  height: auto;
+  padding: 0 5px;
+  width: auto;
+
+  .mailpoet_delete_block_activate {
+    max-width: 0;
+    opacity: 0;
+    overflow: hidden;
+  }
+
+  .mailpoet_delete_block_confirm,
+  .mailpoet_delete_block_cancel {
+    max-height: 20px;
+    max-width: 90px;
+    opacity: 1;
+  }
+
+  .mailpoet_delete_block_cancel {
+    margin-left: 3px;
+  }
+}
+
+.mailpoet_delete_block_confirm {
+  color: $warning-text-color;
+
+  &:hover {
+    color: $warning-text-color;
+    text-decoration: underline;
+  }
+}
+
+.mailpoet_delete_block_cancel {
+  color: $warning-alternate-text-color;
+
+  &:hover {
+    color: $warning-alternate-text-color;
+    text-decoration: underline;
+  }
+}

assets/css/src/components/newsletterEditor/components/_dragAndDrop.scss

@@ -0,0 +1,83 @@
+$drop-active-color: $primary-active-color;
+
+$marker-width: 2px;
+$marker-z-index: 1;
+
+$draggable-widget-z-index: 2;
+
+.mailpoet_drop_marker {
+  background-color: $primary-active-color;
+  box-shadow: 0 0 1px 0 $primary-active-color;
+  min-height: $marker-width;
+  min-width: $marker-width;
+  position: absolute;
+  z-index: $marker-z-index;
+
+  &:before,
+  &:after {
+    color: $primary-active-color;
+    font: 400 40px / 1 dashicons;
+    margin-top: -18px;
+    position: absolute;
+  }
+
+  &:before {
+    content: '\f139';
+    left: -25px;
+  }
+
+  &:after {
+    content: '\f141';
+    right: -23px;
+  }
+}
+
+.mailpoet_drop_marker.mailpoet_drop_marker_middle,
+.mailpoet_drop_marker.mailpoet_drop_marker_first.mailpoet_drop_marker_after,
+.mailpoet_drop_marker.mailpoet_drop_marker_last.mailpoet_drop_marker_before {
+  margin-top: -1 * ($marker-width / 2);
+}
+
+.mailpoet_drop_marker.mailpoet_drop_marker_last.mailpoet_drop_marker_after {
+  margin-top: -1 * $marker-width;
+}
+
+#mailpoet_editor .mailpoet_droppable_active {
+  z-index: 21000;
+}
+
+.mailpoet_block.mailpoet_droppable_active {
+  border: 1px dashed $drop-active-color !important;
+  width: $newsletter-width;
+
+  .mailpoet_tools {
+    display: none !important;
+  }
+}
+
+.mailpoet_widget.mailpoet_droppable_active {
+  margin: 0;
+  padding: 0;
+  z-index: $draggable-widget-z-index;
+
+  @include animation-fade-in();
+
+  .mailpoet_widget_icon {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.mailpoet_drop_active > .mailpoet_container > div > .mailpoet_container_empty {
+  background-color: $primary-active-color;
+  box-shadow: inset 1px 2px 1px $primary-inset-shadow-color;
+  color: $white-color;
+}
+
+.mailpoet_droppable_block {
+  cursor: move;
+
+  &.mailpoet_ignore_drag {
+    cursor: auto;
+  }
+}

assets/css/src/components/newsletterEditor/components/_forms.scss

@@ -0,0 +1,52 @@
+.mailpoet_form_field {
+  margin-bottom: 15px;
+  margin-top: 15px;
+}
+
+.mailpoet_form_field_title {
+  clear: both;
+  margin-bottom: 5px;
+}
+
+.mailpoet_form_field_title_small {
+  width: 120px;
+}
+
+.mailpoet_form_field_title_inline {
+  display: inline-block;
+  margin-bottom: 0;
+  margin-top: 6px;
+}
+
+.mailpoet_form_field_optional {
+  color: $primary-inactive-color;
+  font-size: .8em;
+}
+
+.mailpoet_form_field_radio_option,
+.mailpoet_form_field_checkbox_option {
+  display: inline-block;
+  line-height: 30px;
+  margin-right: 5px;
+  vertical-align: top;
+
+  &:last-child {
+    margin-right: 0;
+  }
+}
+
+.mailpoet_form_field_input_option {
+  display: inline-block;
+
+  input[type=checkbox] {
+    vertical-align: top;
+  }
+
+  input[type=text] {
+    vertical-align: middle;
+  }
+}
+
+.mailpoet_form_field_block {
+  display: block;
+}

assets/css/src/components/newsletterEditor/components/_heading.scss

@@ -0,0 +1,37 @@
+.mailpoet_heading_form_field {
+  margin-bottom: 5px;
+  margin-top: 5px;
+}
+
+.mailpoet_input_title,
+.mailpoet_input_preheader {
+  line-height: normal;
+  padding: 3px;
+  width: 500px;
+}
+
+.mailpoet_input_title {
+  font-size: 23px;
+}
+
+.mailpoet_breadcrumbs {
+  float: left;
+  font-size: .9em;
+  margin-bottom: 13px;
+  margin-left: 17px;
+  text-transform: uppercase;
+
+  p {
+    margin: 0;
+  }
+}
+
+#mailpoet_heading_email_type {
+  width: 200px;
+}
+
+.mailpoet_heading_wc_template_description {
+  color: #666;
+  font-style: italic;
+  max-width: 800px;
+}

assets/css/src/components/newsletterEditor/components/_history.scss

@@ -0,0 +1,23 @@
+.mailpoet_history_wrapper {
+  display: flex;
+  padding: 12px 20px;
+}
+
+.mailpoet_history_arrow {
+  cursor: pointer;
+  margin-right: 20px;
+
+  svg {
+    display: inline-block;
+    height: 26px;
+    stroke: $primary-active-color;
+    vertical-align: top;
+    width: 26px;
+  }
+}
+
+.mailpoet_history_arrow_inactive {
+  cursor: not-allowed;
+
+  svg { stroke: $primary-inactive-color; }
+}

assets/css/src/components/newsletterEditor/components/_layers.scss

@@ -1,6 +1,6 @@
 .mailpoet_container_layer_active {
   .mailpoet_block {
-    opacity: 0.4;
+    opacity: .4;
     pointer-events: none;
   }
 
@@ -19,11 +19,12 @@
 }
 
 .mailpoet_layer_overlay {
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, .6);
   height: 100%;
   left: 0;
   margin: 0 !important;
-  overflow: hidden auto;
+  overflow-x: hidden;
+  overflow-y: auto;
   position: fixed;
   top: 0;
   width: 100%;

assets/css/src/components/newsletterEditor/components/_resize.scss

@@ -1,22 +1,26 @@
+$resize-active-color: $editor-content-color;
+$resize-handle-font-color: $white-color;
+$resize-handle-z-index: 2;
+
 .mailpoet_resize_handle_container {
   left: 50%;
   margin-top: -16px;
   position: absolute;
   top: 100%;
   transform: translateX(-50%);
-  z-index: $editor-resize-handle-zindex;
+  z-index: $resize-handle-z-index;
 }
 
 .mailpoet_resize_handle {
   align-items: center;
-  background: $color-editor-background-content;
+  background: $editor-content-color;
   border-radius: 10px;
   cursor: ns-resize;
   display: none;
   justify-content: space-between;
   min-width: 60px;
   padding: 7px 10px;
-  z-index: $editor-resize-handle-zindex;
+  z-index: $resize-handle-z-index;
 
   .mailpoet_resize_handle_text,
   .mailpoet_resize_handle_icon {
@@ -29,7 +33,7 @@
 }
 
 .mailpoet_resize_handle_text {
-  color: $editor-resize-handle-color;
+  color: $resize-handle-font-color;
   font-size: 11px;
   font-weight: bold;
   line-height: 1.5em;
@@ -41,7 +45,7 @@
   margin-left: 5px;
 
   > svg {
-    fill: $editor-resize-handle-color;
+    fill: $resize-handle-font-color;
     height: 15px;
     vertical-align: top;
     width: 15px;
@@ -63,14 +67,14 @@
 }
 
 .mailpoet_image_resize_handle {
-  background: $color-editor-background-content;
+  background: $editor-content-color;
   border-radius: 6px 0 0;
   cursor: nwse-resize;
   display: none;
   height: 24px;
   position: relative;
   width: 24px;
-  z-index: $editor-resize-handle-zindex;
+  z-index: $resize-handle-z-index;
 
   .mailpoet_resizable_block.mailpoet_highlight & {
     display: inline-block;
@@ -92,7 +96,7 @@
   padding: 1px;
 
   > svg {
-    fill: $editor-resize-handle-color;
+    fill: $resize-handle-font-color;
     height: 22px;
     vertical-align: top;
     width: 22px;
@@ -100,7 +104,7 @@
 }
 
 .mailpoet_block.mailpoet_image_resize_active > .mailpoet_block_highlight {
-  border: 2px solid $editor-resize-color;
+  border: 2px solid $resize-active-color;
 
   .mailpoet_image_resize_handle {
     display: inline-block;

assets/css/src/components/newsletterEditor/components/_save.scss

@@ -11,15 +11,11 @@
   .mailpoet_save_next {
     margin-left: 5px;
   }
-
-  .mailpoet_show_preview {
-    margin-right: 5px;
-  }
 }
 
 .mailpoet_save_options {
-  background: $color-white;
-  border: 1px solid $color-editor-border-content;
+  background: $white-color;
+  border: 1px solid $content-border-color;
   border-radius: 3px;
   clear: both;
   margin: 5px 0;
@@ -43,11 +39,11 @@
 }
 
 .mailpoet_save_option:hover {
-  background-color: $color-primary-button;
-  color: $color-white;
+  background-color: $primary-active-background-color;
+  color: $white-color;
 
   > a {
-    color: $color-white;
+    color: $white-color;
   }
 }
 
@@ -63,8 +59,8 @@
 
 .mailpoet_save_as_template_container,
 .mailpoet_export_template_container {
-  background-color: $color-white;
-  border: 1px solid $color-editor-border-structure;
+  background-color: $white-color;
+  border: 1px solid $structure-border-color;
   border-radius: 3px;
   clear: both;
   display: inline-block;
@@ -86,8 +82,8 @@
 }
 
 .mailpoet_editor_last_saved {
-  color: $color-primary-inactive;
-  font-size: 0.9em;
+  color: $primary-inactive-color;
+  font-size: .9em;
   margin-top: 10px;
   text-align: right;
 }
@@ -97,16 +93,16 @@
 }
 
 .mailpoet_save_woocommerce_error {
-  color: $color-editor-warning;
+  color: $error-text-color;
   margin-top: 10px;
   text-align: right;
 }
 
 .mailpoet_save_error {
-  color: $color-editor-warning;
+  color: $error-text-color;
   margin-top: 10px;
   text-align: right;
-  width: $editor-sidebar-width;
+  width: $sidebar-width;
 }
 
 .mailpoet_save_dropdown_down {