diff --git a/.circleci/config.yml b/.circleci/config.yml
index d56be4b10a..e71d147908 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -82,7 +82,7 @@ executors:
wpcli_php_oldest:
<<: *default_job_config
docker:
- - image: mailpoet/wordpress:7.2_20220309.1
+ - image: mailpoet/wordpress:7.2_20220309.1
wpcli_php_max_wporg:
<<: *default_job_config
@@ -97,8 +97,8 @@ executors:
wpcli_php_mysql_oldest:
<<: *default_job_config
docker:
- - image: mailpoet/wordpress:7.2_20220309.1
- - image: circleci/mysql:5.5-ram
+ - image: mailpoet/wordpress:7.2_20220309.1
+ - image: circleci/mysql:5.5-ram
wpcli_php_mysql_latest:
<<: *default_job_config
@@ -116,7 +116,7 @@ jobs:
- checkout:
path: /home/circleci/mailpoet
- run:
- name: "Compute checksum for prefixer"
+ name: 'Compute checksum for prefixer'
command: find prefixer -type f -not -path 'prefixer/build/*' -not -path 'prefixer/vendor/*' | sort | xargs cat | sha512sum > prefixer-checksum
- restore_cache:
key: tools-{{ checksum "tools/install.php" }}
@@ -133,7 +133,7 @@ jobs:
- npm-{{ checksum "package-lock.json" }}
- npm- # fallback to most recent npm-* if not found by checksum
- run:
- name: "Set up test environment"
+ name: 'Set up test environment'
command: |
# install plugin dependencies
COMPOSER_DEV_MODE=1 php tools/install.php
@@ -197,7 +197,7 @@ jobs:
at: /home/circleci/mailpoet
- add_ssh_keys
- run:
- name: "Install Premium plugin"
+ name: 'Install Premium plugin'
command: |
# Add GitHub to known_hosts because there is no checkout step in this job
echo "github.com ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAq2A7hRGmdnm9tUDbO9IDSwBK6TbQa+PXYPCPy6rbTrTtw7PHkccKrpp0yVhp5HdEIcKr6pLlVDBfOLX9QUsyCOV0wzfjIJNlGEYsdlLJizHhbn2mUjvSAHQqZETYP81eFzLQNnPHt4EVVUh7VfDESU84KezmD5QlWpXLmvU31/yMf+Se8xhHTvKSCZIFImWwoG6mbUoWf9nzpIoaSjB+weqqUUmpaaasXVal72J+UX2B+2RPW3RcT0eOzQgqlJL3RKrTJvdsjE3JEAvGq3lGHSZXy28G3skua2SmVi/w4yCE6gbODqnTWlg7+wC604ydGXA8VJiS5ap43JXiUFFAaQ==" >> ~/.ssh/known_hosts
@@ -207,7 +207,7 @@ jobs:
- restore_cache:
key: premium-composer-{{ checksum "mailpoet-premium/composer.json" }}-{{ checksum "mailpoet-premium/composer.lock" }}
- run:
- name: "Set up test environment"
+ name: 'Set up test environment'
command: |
# install Premium dependencies
MAILPOET_FREE_PATH=$(pwd)/mailpoet
@@ -238,11 +238,11 @@ jobs:
type: integer
default: 70200
steps:
- - attach_workspace:
- at: /home/circleci/mailpoet
- - run:
- name: "Static analysis"
- command: ./do qa:phpstan --php-version=<< parameters.php_version >>
+ - attach_workspace:
+ at: /home/circleci/mailpoet
+ - run:
+ name: 'Static analysis'
+ command: ./do qa:phpstan --php-version=<< parameters.php_version >>
qa_js:
executor: wpcli_php_latest
working_directory: /home/circleci/mailpoet/mailpoet
@@ -250,7 +250,7 @@ jobs:
- attach_workspace:
at: /home/circleci/mailpoet
- run:
- name: "QA Frontend Assets"
+ name: 'QA Frontend Assets'
command: ./do qa:frontend-assets
qa_php:
executor: wpcli_php_latest
@@ -259,7 +259,7 @@ jobs:
- attach_workspace:
at: /home/circleci/mailpoet
- run:
- name: "QA PHP"
+ name: 'QA PHP'
command: ./do qa:php
qa_php_oldest:
executor: wpcli_php_oldest
@@ -268,7 +268,7 @@ jobs:
- attach_workspace:
at: /home/circleci/mailpoet
- run:
- name: "QA PHP"
+ name: 'QA PHP'
command: ./do qa:php
qa_php_max_wporg:
executor: wpcli_php_max_wporg
@@ -276,31 +276,31 @@ jobs:
- attach_workspace:
at: /home/circleci/mailpoet
- run:
- name: "QA PHP"
+ name: 'QA PHP'
command: ./do qa:php-max-wporg
js_tests:
executor: wpcli_php_latest
working_directory: /home/circleci/mailpoet/mailpoet
steps:
- - attach_workspace:
- at: /home/circleci/mailpoet
- - run:
- name: "Preparing test results folder"
- command: mkdir test-results
- - run:
- name: "JS Newsletter Editor Tests"
- command: |
- mkdir test-results/mocha
- ./do t:newsletter-editor test-results/mocha/newsletter_editor_junit.xml
- - run:
- name: "JS Tests"
- command: |
- ./do t:j test-results/mocha/junit.xml
- - store_test_results:
- path: test-results/mocha
- - store_artifacts:
- path: test-results/mocha
- destination: mocha
+ - attach_workspace:
+ at: /home/circleci/mailpoet
+ - run:
+ name: 'Preparing test results folder'
+ command: mkdir test-results
+ - run:
+ name: 'JS Newsletter Editor Tests'
+ command: |
+ mkdir test-results/mocha
+ ./do t:newsletter-editor test-results/mocha/newsletter_editor_junit.xml
+ - run:
+ name: 'JS Tests'
+ command: |
+ ./do t:j test-results/mocha/junit.xml
+ - store_test_results:
+ path: test-results/mocha
+ - store_artifacts:
+ path: test-results/mocha
+ destination: mocha
acceptance_tests:
parallelism: 20
working_directory: /home/circleci/mailpoet/mailpoet
@@ -343,10 +343,10 @@ jobs:
- attach_workspace:
at: /home/circleci/mailpoet
- run:
- name: "Set up virtual host"
+ name: 'Set up virtual host'
command: echo 127.0.0.1 mailpoet.loc | sudo tee -a /etc/hosts
- run:
- name: "Pull acceptance test docker images"
+ name: 'Pull acceptance test docker images'
# Pull docker images with 3 retries
command: i='0';while ! docker-compose -f tests/docker/docker-compose.yml pull && ((i < 3)); do sleep 3 && i=$[$i+1]; done
- when:
@@ -355,32 +355,32 @@ jobs:
- run:
name: Download WooCommerce Core
command: |
- cd tests/docker
- docker-compose run --rm -w /project --entrypoint "./do download:woo-commerce-zip << parameters.woo_core_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception
+ cd tests/docker
+ docker-compose run --rm -w /project --entrypoint "./do download:woo-commerce-zip << parameters.woo_core_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception
- when:
condition: << parameters.woo_subscriptions_version >>
steps:
- run:
name: Download WooCommerce Subscriptions
command: |
- cd tests/docker
- docker-compose run --rm -w /project --entrypoint "./do download:woo-commerce-subscriptions-zip << parameters.woo_subscriptions_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception
+ cd tests/docker
+ docker-compose run --rm -w /project --entrypoint "./do download:woo-commerce-subscriptions-zip << parameters.woo_subscriptions_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception
- when:
condition: << parameters.woo_memberships_version >>
steps:
- run:
name: Download WooCommerce Memberships
command: |
- cd tests/docker
- docker-compose run --rm -w /project --entrypoint "./do download:woo-commerce-memberships-zip << parameters.woo_memberships_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception
+ cd tests/docker
+ docker-compose run --rm -w /project --entrypoint "./do download:woo-commerce-memberships-zip << parameters.woo_memberships_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception
- when:
condition: << parameters.woo_blocks_version >>
steps:
- run:
name: Download WooCommerce Blocks
command: |
- cd tests/docker
- docker-compose run --rm -w /project --entrypoint "./do download:woo-commerce-blocks-zip << parameters.woo_blocks_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception
+ cd tests/docker
+ docker-compose run --rm -w /project --entrypoint "./do download:woo-commerce-blocks-zip << parameters.woo_blocks_version >>" --no-deps -e WP_GITHUB_USERNAME=${WP_GITHUB_USERNAME} -e WP_GITHUB_TOKEN=${WP_GITHUB_TOKEN} codeception
- run:
name: Group acceptance tests
command: |
@@ -392,16 +392,16 @@ jobs:
- run:
name: Run acceptance tests
command: |
- mkdir -m 777 -p tests/_output/exceptions
- cd tests/docker
- docker-compose run -e SKIP_DEPS=1 -e CIRCLE_BRANCH=${CIRCLE_BRANCH} -e CIRCLE_JOB=${CIRCLE_JOB} -e MULTISITE=<< parameters.multisite >> codeception -g circleci_split_group --steps --debug -vvv --html --xml
+ mkdir -m 777 -p tests/_output/exceptions
+ cd tests/docker
+ docker-compose run -e SKIP_DEPS=1 -e CIRCLE_BRANCH=${CIRCLE_BRANCH} -e CIRCLE_JOB=${CIRCLE_JOB} -e MULTISITE=<< parameters.multisite >> codeception -g circleci_split_group --steps --debug -vvv --html --xml
- run:
name: Check exceptions
command: |
- if [ "$(ls tests/_output/exceptions/*.html)" ]; then
- echo "There were some exceptions during the tests run"
- exit 1
- fi
+ if [ "$(ls tests/_output/exceptions/*.html)" ]; then
+ echo "There were some exceptions during the tests run"
+ exit 1
+ fi
- store_artifacts:
path: tests/_output
- store_test_results:
@@ -415,18 +415,18 @@ jobs:
executor: << parameters.executor >>
steps:
- attach_workspace:
- at: /home/circleci/mailpoet
+ at: /home/circleci/mailpoet
- run:
- name: "Set up virtual host"
+ name: 'Set up virtual host'
command: echo 127.0.0.1 mailpoet.loc | sudo tee -a /etc/hosts
- run:
- name: "Prepare example.com for testing"
+ name: 'Prepare example.com for testing'
command: echo 127.0.0.1 example.com | sudo tee -a /etc/hosts
- run:
- name: "Set up test environment"
+ name: 'Set up test environment'
command: source ../.circleci/setup.bash && setup php7
- run:
- name: "PHP Unit tests"
+ name: 'PHP Unit tests'
command: |
./do t:u --xml
- store_test_results:
@@ -451,19 +451,19 @@ jobs:
executor: << parameters.executor >>
steps:
- attach_workspace:
- at: /home/circleci/mailpoet
+ at: /home/circleci/mailpoet
- run:
- name: "Set up virtual host"
+ name: 'Set up virtual host'
command: echo 127.0.0.1 mailpoet.loc | sudo tee -a /etc/hosts
- run:
- name: "Prepare example.com for testing"
+ name: 'Prepare example.com for testing'
command: echo 127.0.0.1 example.com | sudo tee -a /etc/hosts
- run:
- name: "Set up test environment"
+ name: 'Set up test environment'
command: << parameters.setup_command >>
- run:
- name: "PHP Integration tests"
- command: << parameters.run_command >>
+ name: 'PHP Integration tests'
+ command: << parameters.run_command >>
- store_test_results:
path: tests/_output
- store_artifacts:
@@ -479,7 +479,7 @@ jobs:
- attach_workspace:
at: /home/circleci/mailpoet
- run:
- name: "Set up environment"
+ name: 'Set up environment'
command: |
source ../.circleci/setup.bash && setup php7
sudo apt-get update
@@ -487,7 +487,7 @@ jobs:
sed -i 's/^WP_ROOT=.*$/WP_ROOT=\/home\/circleci\/mailpoet\/wordpress/g' .env
echo ${CIRCLE_BUILD_NUM} > release_zip_build_number.txt
- run:
- name: "Build"
+ name: 'Build'
command: ./build.sh
- store_artifacts:
path: /home/circleci/mailpoet/mailpoet/mailpoet.zip
@@ -580,7 +580,7 @@ workflows:
nightly:
triggers:
- schedule:
- cron: "0 22 * * 1-5"
+ cron: '0 22 * * 1-5'
filters:
branches:
only:
diff --git a/.github/ISSUE_TEMPLATE/Bug_report.md b/.github/ISSUE_TEMPLATE/Bug_report.md
index 622de2a4f1..9a3a701ca3 100644
--- a/.github/ISSUE_TEMPLATE/Bug_report.md
+++ b/.github/ISSUE_TEMPLATE/Bug_report.md
@@ -4,7 +4,6 @@ about: Create a report to help us improve
title: ''
labels: ''
assignees: ''
-
---
**Describe the bug**
@@ -12,6 +11,7 @@ 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 ...
@@ -26,6 +26,7 @@ A clear and concise description of what you expected to happen.
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]
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
index ea90d58cb9..e1217a9425 100644
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -4,7 +4,6 @@ about: https://feedback.mailpoet.com/
title: ''
labels: ''
assignees: ''
-
---
Please use https://feedback.mailpoet.com/ for feature requests.
diff --git a/.github/SECURITY.md b/.github/SECURITY.md
index b8258a569f..7bb3142332 100644
--- a/.github/SECURITY.md
+++ b/.github/SECURITY.md
@@ -4,7 +4,7 @@ Full details of the Automattic Security Policy can be found on [automattic.com/s
## 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.
+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
@@ -14,9 +14,9 @@ Generally, *only the latest version of MailPoet has continued support*. If a cri
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/)
+- 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).
@@ -26,12 +26,12 @@ _Please note that the **WordPress software is a separate entity** from Automatti
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.
+- 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.
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
index df2e1746ac..57c7b462c5 100644
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -3,7 +3,7 @@
#
# You may wish to alter this file to override the set of languages analyzed,
# or to provide custom queries or build logic.
-name: "CodeQL"
+name: 'CodeQL'
on:
push:
@@ -29,43 +29,43 @@ jobs:
# 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
+ - 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' }}
+ # 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
+ # 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
+ # 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
+ # ℹ️ 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
+ # ✏️ 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
+ #- run: |
+ # make bootstrap
+ # make release
- - name: Perform CodeQL Analysis
- uses: github/codeql-action/analyze@v1
+ - name: Perform CodeQL Analysis
+ uses: github/codeql-action/analyze@v1
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index d9db3a3466..dd29cd8de7 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,6 +1,7 @@
# Contributing
## PHP Code
+
- Two spaces indentation.
- Space between keyword (if, for, switch...) and left bracket
- CamelCase for classes.
@@ -15,20 +16,24 @@
- Cover your code in tests.
## SCSS Code
+
- 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
## 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. */`
+ `/* 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 master.
- Open a short-living feature branch.
- Open a pull request.
@@ -39,12 +44,13 @@
- Wait for review from another developer.
## 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.
## Migration from IdiORM to Doctrine
+
MailPoet used to use [IdiORM](https://github.com/j4mie/idiorm) as its object-relational mapper (ORM), but the project was abandoned a while ago, so we started a migration to [Doctrine](https://www.doctrine-project.org/). This is a significant effort that has been going on for quite some time. Although you will still see parts of the code that use IdioORM, we ask that all new code be added using Doctrine instead.
All IdioORM models live in [mailpoet/lib/Models](https://github.com/mailpoet/mailpoet/tree/master/mailpoet/lib/Models), should be considered deprecated and shouldn't be used by new code. We are moving everything to Doctrine entities and some auxiliary code when needed. You can find Doctrine entities in [mailpoet/lib/Entities](https://github.com/mailpoet/mailpoet/tree/master/mailpoet/lib/Entities).
-
diff --git a/README.md b/README.md
index 4d95718172..36af689759 100644
--- a/README.md
+++ b/README.md
@@ -1,17 +1,19 @@
# MailPoet
+
The **MailPoet** plugin monorepo.
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).
## 🔌 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.
+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.
## 🔍 PHPStorm setup for XDebug
+
In `Languages & Preferences > PHP > Servers` set path mappings:
```shell
@@ -28,6 +30,7 @@ To use XDebug inside the **cron**, you need to pass a URL argument `&XDEBUG_TRIG
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).
## Xdebug develop mode
+
[Xdebug develop mode](https://xdebug.org/docs/develop) is disabled by default because it causes performance issues due to conflicts with the DI container.
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`:
@@ -38,12 +41,15 @@ environment:
```
## 💾 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
```
Then create a Docker Compose override file with NFS settings and restart containers:
+
```shell
cp docker-compose.override.macos-sample.yml docker-compose.override.yml
@@ -55,18 +61,22 @@ docker-compose up -d
outside your `Documents` folder, otherwise you may run into [file permission issues](https://objekt.click/2019/11/docker-the-problem-with-macos-catalina/).
# 🐶 Husky
+
We use [Husky](https://github.com/typicode/husky) to run automated checks in pre-commit hooks.
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:
+
```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"
```
+
Without it, you may experience errors in some Git clients.
## 🕹 Commands
+
The `./do` script define aliases for most of the commands you will need while working on plugins:
```shell
@@ -88,11 +98,14 @@ Options:
You can access this help in your command line running `./do` without parameters.
## ✉️ Adding new templates to the plugin
+
[Read the article.](https://mailpoet.atlassian.net/wiki/spaces/MAILPOET/pages/629374977/Adding+new+templates+to+the+plugin)
## 🚥 Testing with PHP 7.4 or PHP 8.0
+
To switch the environment to PHP 7.4/8.0:
-1) Configure the `wordpress` service in `docker-compose.override.yml` to build from the php74 Dockerfile:
+
+1. Configure the `wordpress` service in `docker-compose.override.yml` to build from the php74 Dockerfile:
```yaml
wordpress:
@@ -100,11 +113,13 @@ To switch the environment to PHP 7.4/8.0:
context: .
dockerfile: docker/php74/Dockerfile # OR docker/php80/Dockerfile
```
-3) Run `docker-compose build wordpress`.
-4) Start the stack with `./do start`.
+
+2. Run `docker-compose build wordpress`.
+3. Start the stack with `./do start`.
To switch back to PHP 8.1 remove what was added in 1) and, run `docker-compose build wordpress` for application container and `docker-compose build test_wordpress` for tests container,
and start the stack using `./do start`.
## ✅ TODO
+
- install woo commerce, members and other useful plugins by default
diff --git a/SUPPORT.md b/SUPPORT.md
index 289a4f4f93..1de24f71ef 100644
--- a/SUPPORT.md
+++ b/SUPPORT.md
@@ -1,15 +1,15 @@
# Getting Support
Welcome to MailPoet!
-This isn't the right place to get support for using MailPoet,
-but the following resources are available below,
+This isn't the right place to get support for using MailPoet,
+but the following resources are available below,
thanks for understanding.
- [Support](https://www.mailpoet.com/support)
- [Feature Requests](https://feedback.mailpoet.com)
-*DO NOT* use the issue tracker to ask questions;
-use the links above for that.
+_DO NOT_ use the issue tracker to ask questions;
+use the links above for that.
Questions posed to the issue tracker will be closed.
When reporting an issue, please include the following details:
@@ -17,7 +17,7 @@ When reporting an issue, please include the following details:
- A narrative description of what you are trying to accomplish.
- The expected results.
- The actual results received.
-- We may ask for additional details: what version of the plugin you are using, and what PHP version
+- We may ask for additional details: what version of the plugin you are using, and what PHP version
was used to reproduce the issue.
You may also submit a failing test case as a pull request.
diff --git a/dev/dashboard/index.html b/dev/dashboard/index.html
index 8836e9ce70..ea0d32d003 100644
--- a/dev/dashboard/index.html
+++ b/dev/dashboard/index.html
@@ -1,85 +1,93 @@
-
- ;
@@ -94,7 +96,9 @@ export const MailPoetAjax = {
},
constructGetUrl: function constructGetUrl(options): string {
this.init(options);
- return `${this.options.url as string}?${jQuery.param(this.getParams() as object)}`;
+ return `${this.options.url as string}?${jQuery.param(
+ this.getParams() as object,
+ )}`;
},
request: function request(method, options): ResponseType {
// set options
@@ -117,15 +121,26 @@ export const MailPoetAjax = {
success: null,
dataType: 'json',
timeout: this.options.timeout,
- }).then((data: Response) => deferred.resolve(data), (failedXhr, textStatus) => {
- let errorData: ErrorResponse;
- if (textStatus === 'timeout') {
- errorData = buildErrorResponse(MailPoetI18n.t('ajaxTimeoutErrorMessage').replace('%d', timeout.toString()));
- } else {
- errorData = requestFailed(MailPoetI18n.t('ajaxFailedErrorMessage'), failedXhr);
- }
- void deferred.reject(errorData);
- });
+ }).then(
+ (data: Response) => deferred.resolve(data),
+ (failedXhr, textStatus) => {
+ let errorData: ErrorResponse;
+ if (textStatus === 'timeout') {
+ errorData = buildErrorResponse(
+ MailPoetI18n.t('ajaxTimeoutErrorMessage').replace(
+ '%d',
+ timeout.toString(),
+ ),
+ );
+ } else {
+ errorData = requestFailed(
+ MailPoetI18n.t('ajaxFailedErrorMessage'),
+ failedXhr,
+ );
+ }
+ void deferred.reject(errorData);
+ },
+ );
// clear options
this.options = {};
diff --git a/mailpoet/assets/js/src/analytics_event.js b/mailpoet/assets/js/src/analytics_event.js
index 1a0f5330bb..bca9cf9e0e 100644
--- a/mailpoet/assets/js/src/analytics_event.js
+++ b/mailpoet/assets/js/src/analytics_event.js
@@ -39,7 +39,10 @@ function track(name, data = []) {
function exportMixpanel() {
window.MailPoet.forceTrackEvent = track;
- if (window.mailpoet_analytics_enabled && window.MailPoet.libs3rdPartyEnabled) {
+ if (
+ window.mailpoet_analytics_enabled &&
+ window.MailPoet.libs3rdPartyEnabled
+ ) {
window.MailPoet.trackEvent = track;
} else {
window.MailPoet.trackEvent = function emptyFunction() {};
diff --git a/mailpoet/assets/js/src/announcements/with_feature_announcement.tsx b/mailpoet/assets/js/src/announcements/with_feature_announcement.tsx
index db233984db..52f3633e16 100644
--- a/mailpoet/assets/js/src/announcements/with_feature_announcement.tsx
+++ b/mailpoet/assets/js/src/announcements/with_feature_announcement.tsx
@@ -30,7 +30,10 @@ export const withFeatureAnnouncement = >(
let beamerCallback;
function showPluginUpdateNotice() {
- if (!window.mailpoet_update_available || document.getElementById('mailpoet_update_notice')) {
+ if (
+ !window.mailpoet_update_available ||
+ document.getElementById('mailpoet_update_notice')
+ ) {
return;
}
const updateMailPoetNotice = ReactStringReplace(
@@ -99,7 +102,7 @@ export const withFeatureAnnouncement =
>(
}: Omit
) {
return (
showBeamer(e)}
hasNews={showDot}
/>
diff --git a/mailpoet/assets/js/src/automation/api.tsx b/mailpoet/assets/js/src/automation/api.tsx
index d84da359eb..103ed43aae 100644
--- a/mailpoet/assets/js/src/automation/api.tsx
+++ b/mailpoet/assets/js/src/automation/api.tsx
@@ -3,9 +3,10 @@ import { api } from './config';
const API_URL = `${api.root}/mailpoet/v1/automation`;
-export const request = (path: string, init?: RequestInit): ReturnType => (
- fetch(`${API_URL}/${path}`, init)
-);
+export const request = (
+ path: string,
+ init?: RequestInit,
+): ReturnType => fetch(`${API_URL}/${path}`, init);
type Error = {
response?: Response;
@@ -18,26 +19,25 @@ type State = {
error?: Error;
};
-type Result = [
- (init?: RequestInit) => Promise,
- State,
-];
+type Result = [(init?: RequestInit) => Promise, State];
// eslint-disable-next-line @typescript-eslint/no-explicit-any
type Data = Record;
-export const useMutation = (path: string, config?: RequestInit): Result => {
+export const useMutation = (
+ path: string,
+ config?: RequestInit,
+): Result => {
const [state, setState] = useState>({
data: undefined,
loading: false,
error: undefined,
});
- const mutation = useCallback(async (init?: RequestInit) => {
- setState((prevState) => ({ ...prevState, loading: true }));
- const response = await request(
- path,
- {
+ const mutation = useCallback(
+ async (init?: RequestInit) => {
+ setState((prevState) => ({ ...prevState, loading: true }));
+ const response = await request(path, {
...config,
...init,
headers: {
@@ -45,32 +45,36 @@ export const useMutation = (path: string, config?: RequestInit):
...(init?.headers ?? {}),
'x-wp-nonce': api.nonce,
},
- },
- );
+ });
- try {
- const data = await response.json();
- const error = response.ok ? null : { ...response, data };
- setState((prevState) => ({ ...prevState, data, error }));
- } catch (_) {
- const error = { response };
- setState((prevState) => ({ ...prevState, error }));
- } finally {
- setState((prevState) => ({ ...prevState, loading: false }));
- }
- }, [config, path]);
+ try {
+ const data = await response.json();
+ const error = response.ok ? null : { ...response, data };
+ setState((prevState) => ({ ...prevState, data, error }));
+ } catch (_) {
+ const error = { response };
+ setState((prevState) => ({ ...prevState, error }));
+ } finally {
+ setState((prevState) => ({ ...prevState, loading: false }));
+ }
+ },
+ [config, path],
+ );
return [mutation, state];
};
-export const useQuery = (path: string, init?: RequestInit): State => {
+export const useQuery = (
+ path: string,
+ init?: RequestInit,
+): State => {
const [mutation, result] = useMutation(path, init);
useEffect(
() => {
void mutation();
},
- [], /* eslint-disable-line react-hooks/exhaustive-deps -- request only on initial load */
+ [] /* eslint-disable-line react-hooks/exhaustive-deps -- request only on initial load */,
);
return result;
diff --git a/mailpoet/assets/js/src/automation/automation.tsx b/mailpoet/assets/js/src/automation/automation.tsx
index 4ec248ddb2..b1360738d2 100644
--- a/mailpoet/assets/js/src/automation/automation.tsx
+++ b/mailpoet/assets/js/src/automation/automation.tsx
@@ -13,24 +13,26 @@ function ApiCheck(): JSX.Element {
}
function RecreateSchemaButton(): JSX.Element {
- const [createSchema, { loading, error }] = useMutation('system/database', { method: 'POST' });
+ const [createSchema, { loading, error }] = useMutation('system/database', {
+ method: 'POST',
+ });
return (
-
createSchema()}
- disabled={loading}
- >
+ createSchema()} disabled={loading}>
Recreate DB schema (data will be lost)
- {error && ({error?.data?.message ?? 'An unknown error occurred'}
)}
+ {error && (
+ {error?.data?.message ?? 'An unknown error occurred'}
+ )}
);
}
function DeleteSchemaButton(): JSX.Element {
- const [deleteSchema, { loading, error }] = useMutation('system/database', { method: 'DELETE' });
+ const [deleteSchema, { loading, error }] = useMutation('system/database', {
+ method: 'DELETE',
+ });
return (
@@ -38,13 +40,16 @@ function DeleteSchemaButton(): JSX.Element {
type="button"
onClick={async () => {
await deleteSchema();
- window.location.href = '/wp-admin/admin.php?page=mailpoet-experimental';
+ window.location.href =
+ '/wp-admin/admin.php?page=mailpoet-experimental';
}}
disabled={loading}
>
Delete DB schema & deactivate feature
- {error && (
{error?.data?.message ?? 'An unknown error occurred'}
)}
+ {error && (
+
{error?.data?.message ?? 'An unknown error occurred'}
+ )}
);
}
diff --git a/mailpoet/assets/js/src/automation/testing.tsx b/mailpoet/assets/js/src/automation/testing.tsx
index 74f5de5291..de30e80920 100644
--- a/mailpoet/assets/js/src/automation/testing.tsx
+++ b/mailpoet/assets/js/src/automation/testing.tsx
@@ -30,20 +30,26 @@ const createWorkflow = () => {
};
export function CreateTestingWorkflowButton(): JSX.Element {
- const [createSchema, { loading, error }] = useMutation('workflows', { method: 'POST' });
+ const [createSchema, { loading, error }] = useMutation('workflows', {
+ method: 'POST',
+ });
return (
createSchema({
- body: JSON.stringify(createWorkflow()),
- })}
+ onClick={() =>
+ createSchema({
+ body: JSON.stringify(createWorkflow()),
+ })
+ }
disabled={loading}
>
Create testing workflow
- {error && (
{error?.data?.message ?? 'An unknown error occurred'}
)}
+ {error && (
+
{error?.data?.message ?? 'An unknown error occurred'}
+ )}
);
}
diff --git a/mailpoet/assets/js/src/common/button/_stories/button.tsx b/mailpoet/assets/js/src/common/button/_stories/button.tsx
index e7c4a7aacd..4e3849fc66 100644
--- a/mailpoet/assets/js/src/common/button/_stories/button.tsx
+++ b/mailpoet/assets/js/src/common/button/_stories/button.tsx
@@ -12,10 +12,7 @@ export function WithoutIcons() {
<>
Small buttons
-
+
Primary button
Regular buttons
-
- Primary button
-
-
+ Primary button
+
Secondary button
-
+
Tertiary button
-
+
Destructive button
@@ -72,25 +56,14 @@ export function WithoutIcons() {
Disabled buttons
-
- Primary button
-
-
+ Primary button
+
Secondary button
-
+
Tertiary button
-
+
Destructive button
@@ -98,25 +71,14 @@ export function WithoutIcons() {
Buttons with spinner
-
- Primary button
-
-
+ Primary button
+
Secondary button
-
+
Tertiary button
-
+
Destructive button
@@ -124,10 +86,7 @@ export function WithoutIcons() {
Full width buttons
-
+
Primary button
Regular buttons
-
+
Icon start
Disabled buttons
-
+
Icon start
-
+
Both icons
-
-
-
+
+
+
Icon end
@@ -126,35 +103,15 @@ export function WithIcons() {
Buttons with spinner
-
+
Icon start
-
+
Both icons
-
-
-
+
+
+
Icon end
diff --git a/mailpoet/assets/js/src/common/button/button.tsx b/mailpoet/assets/js/src/common/button/button.tsx
index 360f01f2f8..5362a1c9d8 100644
--- a/mailpoet/assets/js/src/common/button/button.tsx
+++ b/mailpoet/assets/js/src/common/button/button.tsx
@@ -45,23 +45,16 @@ function Button({
target={target}
rel={rel}
disabled={isDisabled}
- className={
- classnames(
- className,
- 'button',
- 'mailpoet-button',
- {
- 'mailpoet-button-with-spinner': withSpinner,
- 'mailpoet-button-disabled': isDisabled,
- 'mailpoet-full-width': isFullWidth,
- 'button-primary': !variant,
- 'button-secondary': variant === 'secondary',
- 'button-link': variant === 'tertiary',
- 'button-link button-link-delete': variant === 'destructive',
- 'button-small': dimension === 'small',
- },
- )
- }
+ className={classnames(className, 'button', 'mailpoet-button', {
+ 'mailpoet-button-with-spinner': withSpinner,
+ 'mailpoet-button-disabled': isDisabled,
+ 'mailpoet-full-width': isFullWidth,
+ 'button-primary': !variant,
+ 'button-secondary': variant === 'secondary',
+ 'button-link': variant === 'tertiary',
+ 'button-link button-link-delete': variant === 'destructive',
+ 'button-small': dimension === 'small',
+ })}
data-automation-id={automationId}
>
{iconStart}
diff --git a/mailpoet/assets/js/src/common/categories/_stories/categories.tsx b/mailpoet/assets/js/src/common/categories/_stories/categories.tsx
index 392f718fe7..8779e6ed2b 100644
--- a/mailpoet/assets/js/src/common/categories/_stories/categories.tsx
+++ b/mailpoet/assets/js/src/common/categories/_stories/categories.tsx
@@ -17,9 +17,21 @@ export function CategoriesWithCount() {
return (
<>
-
-
-
+
+
+
>
);
}
@@ -35,9 +47,21 @@ export function CategoriesWithoutCount() {
return (
<>
-
-
-
+
+
+
>
);
}
diff --git a/mailpoet/assets/js/src/common/categories/categories.tsx b/mailpoet/assets/js/src/common/categories/categories.tsx
index 7764aed619..b754bc5817 100644
--- a/mailpoet/assets/js/src/common/categories/categories.tsx
+++ b/mailpoet/assets/js/src/common/categories/categories.tsx
@@ -16,11 +16,7 @@ function Categories({ onSelect, categories, active }: Props) {
/>
));
- return (
-
- { cats }
-
- );
+ return {cats}
;
}
export default Categories;
diff --git a/mailpoet/assets/js/src/common/categories/categories_item.tsx b/mailpoet/assets/js/src/common/categories/categories_item.tsx
index 93f980517f..8fb7320f9d 100644
--- a/mailpoet/assets/js/src/common/categories/categories_item.tsx
+++ b/mailpoet/assets/js/src/common/categories/categories_item.tsx
@@ -20,10 +20,7 @@ function CategoriesItem({
automationId,
active,
}: Props) {
- const classes = classNames(
- 'mailpoet-categories-item',
- { active: !!active },
- );
+ const classes = classNames('mailpoet-categories-item', { active: !!active });
return (
{count > 0 && (
- { parseInt(count.toString(), 10).toLocaleString() }
+ {parseInt(count.toString(), 10).toLocaleString()}
)}
diff --git a/mailpoet/assets/js/src/common/confirm_alert.jsx b/mailpoet/assets/js/src/common/confirm_alert.jsx
index 54bb2e125f..b9dc174251 100644
--- a/mailpoet/assets/js/src/common/confirm_alert.jsx
+++ b/mailpoet/assets/js/src/common/confirm_alert.jsx
@@ -8,13 +8,21 @@ function ConfirmAlert(props) {
template: ReactDOMServer.renderToString(
<>
{props.message}
-
+
{props.cancelLabel}
-
+
{props.confirmLabel}
- >
+ >,
),
onInit: () => {
document
@@ -55,6 +63,6 @@ export default function confirmAlert(props) {
cancelLabel={props.cancelLabel}
confirmLabel={props.confirmLabel}
onConfirm={props.onConfirm}
- />
+ />,
);
}
diff --git a/mailpoet/assets/js/src/common/controls/call_api.ts b/mailpoet/assets/js/src/common/controls/call_api.ts
index 2a1cffe6b0..611a976c09 100644
--- a/mailpoet/assets/js/src/common/controls/call_api.ts
+++ b/mailpoet/assets/js/src/common/controls/call_api.ts
@@ -11,7 +11,9 @@ export default async function callApi({ endpoint, action, data }) {
});
return { success: true, res };
} catch (res) {
- const error = isErrorResponse(res) ? res.errors.map((e) => e.message) : null;
+ const error = isErrorResponse(res)
+ ? res.errors.map((e) => e.message)
+ : null;
return { success: false, error, res };
}
}
diff --git a/mailpoet/assets/js/src/common/controls/track_event.ts b/mailpoet/assets/js/src/common/controls/track_event.ts
index 32410a3a6a..5711df149f 100644
--- a/mailpoet/assets/js/src/common/controls/track_event.ts
+++ b/mailpoet/assets/js/src/common/controls/track_event.ts
@@ -1,14 +1,19 @@
import MailPoet from 'mailpoet';
-const sleep = (ms:number) => new Promise((resolve) => { setTimeout(resolve, ms); });
+const sleep = (ms: number) =>
+ new Promise((resolve) => {
+ setTimeout(resolve, ms);
+ });
-export default async function trackEvent(
- {
- name,
- data,
- timeout = 0,
- }:{ name:string, data:object, timeout:number },
-) {
+export default async function trackEvent({
+ name,
+ data,
+ timeout = 0,
+}: {
+ name: string;
+ data: object;
+ timeout: number;
+}) {
MailPoet.trackEvent(name, data);
return sleep(timeout);
}
diff --git a/mailpoet/assets/js/src/common/datepicker/_stories/datepicker.tsx b/mailpoet/assets/js/src/common/datepicker/_stories/datepicker.tsx
index 5bc0a64261..cbdeb32e4d 100644
--- a/mailpoet/assets/js/src/common/datepicker/_stories/datepicker.tsx
+++ b/mailpoet/assets/js/src/common/datepicker/_stories/datepicker.tsx
@@ -9,21 +9,13 @@ export default {
component: Datepicker,
};
-function DatepickerWrapper({
- ...props
-}) {
+function DatepickerWrapper({ ...props }) {
const [startDate, setStartDate] = useState(new Date());
- const onChange = (date:Date) => {
+ const onChange = (date: Date) => {
props.onChange(date);
setStartDate(date);
};
- return (
-
- );
+ return ;
}
export function Datepickers() {
diff --git a/mailpoet/assets/js/src/common/datepicker/datepicker.tsx b/mailpoet/assets/js/src/common/datepicker/datepicker.tsx
index 65b4d00534..93788a378a 100644
--- a/mailpoet/assets/js/src/common/datepicker/datepicker.tsx
+++ b/mailpoet/assets/js/src/common/datepicker/datepicker.tsx
@@ -18,16 +18,11 @@ function Datepicker({
}: Props) {
return (
{iconStart}
{
const index = values.indexOf(value);
- let newValues:CheckboxValueType[] = [];
+ let newValues: CheckboxValueType[] = [];
if (isChecked && index === -1) {
newValues = values.concat([value]);
}
@@ -42,7 +42,7 @@ function CheckboxGroup({
{options.map((props: CheckboxProps) => {
const { label, ...attributes } = props;
- const value = (props.value as CheckboxValueType);
+ const value = props.value as CheckboxValueType;
return (
Small inputs
-
+
Regular inputs
Full-width inputs
-
+
{iconStart}
- {customLabel &&
{customLabel}
}
+ {customLabel && (
+
{customLabel}
+ )}
{tooltip && (
- <>
-
-
-
-
- {tooltip}
-
- >
+ <>
+
+
+
+
+ {tooltip}
+
+ >
)}
{iconEnd}
diff --git a/mailpoet/assets/js/src/common/form/radio/_stories/radio.tsx b/mailpoet/assets/js/src/common/form/radio/_stories/radio.tsx
index f896f16f25..c814436e24 100644
--- a/mailpoet/assets/js/src/common/form/radio/_stories/radio.tsx
+++ b/mailpoet/assets/js/src/common/form/radio/_stories/radio.tsx
@@ -23,18 +23,10 @@ export function Radios() {
<>
Inline individual radios
-
+
Option 1
-
+
Option 2
diff --git a/mailpoet/assets/js/src/common/form/radio/group.tsx b/mailpoet/assets/js/src/common/form/radio/group.tsx
index 60043bb5ad..b852f75c2f 100644
--- a/mailpoet/assets/js/src/common/form/radio/group.tsx
+++ b/mailpoet/assets/js/src/common/form/radio/group.tsx
@@ -33,7 +33,7 @@ function RadioGroup({
{options.map((props: RadioProps) => {
const { label, ...attributes } = props;
- const value = (props.value as RadioValueType);
+ const value = props.value as RadioValueType;
return (
- {data.tag && {data.tag} }
+ {data.tag && (
+ {data.tag}
+ )}
{data.label}
- {data.count !== undefined && {data.count} }
+ {data.count !== undefined && (
+ {data.count}
+ )}
);
}
@@ -43,14 +47,12 @@ function Option(props: OptionProps
) {
style={style}
ref={props.innerRef}
{...props.innerProps}
- className={
- classnames({
- 'mailpoet-form-react-select__option': true,
- 'mailpoet-form-react-select__option--is-disabled': props.isDisabled,
- 'mailpoet-form-react-select__option--is-focused': props.isFocused,
- 'mailpoet-form-react-select__option--is-selected': props.isSelected,
- })
- }
+ className={classnames({
+ 'mailpoet-form-react-select__option': true,
+ 'mailpoet-form-react-select__option--is-disabled': props.isDisabled,
+ 'mailpoet-form-react-select__option--is-focused': props.isFocused,
+ 'mailpoet-form-react-select__option--is-selected': props.isSelected,
+ })}
>
{LabelRenderer(props.data)}
@@ -62,12 +64,11 @@ function SingleValue(props: any) {
return (
{LabelRenderer(props.data as LabelRendererProps)}
@@ -105,17 +106,11 @@ function ReactSelect({
}: Props) {
return (
{iconStart}
diff --git a/mailpoet/assets/js/src/common/form/select/_stories/select.tsx b/mailpoet/assets/js/src/common/form/select/_stories/select.tsx
index d9da9d7fbd..4480d33b9d 100644
--- a/mailpoet/assets/js/src/common/form/select/_stories/select.tsx
+++ b/mailpoet/assets/js/src/common/form/select/_stories/select.tsx
@@ -18,10 +18,7 @@ export function NativeSelect() {
Opt 3
-
+
Opt 1
Opt 2
Opt 3
@@ -36,10 +33,7 @@ export function NativeSelect() {
Option 3
-
+
Option 1
Option 2
Option 3
@@ -73,10 +67,7 @@ export function NativeSelect() {
Option 3
-
+
Option 1
Option 2
Option 3
diff --git a/mailpoet/assets/js/src/common/form/select/select.tsx b/mailpoet/assets/js/src/common/form/select/select.tsx
index 69a1a70234..1b880e7067 100644
--- a/mailpoet/assets/js/src/common/form/select/select.tsx
+++ b/mailpoet/assets/js/src/common/form/select/select.tsx
@@ -1,9 +1,4 @@
-import {
- forwardRef,
- ReactNode,
- Ref,
- SelectHTMLAttributes,
-} from 'react';
+import { forwardRef, ReactNode, Ref, SelectHTMLAttributes } from 'react';
import classnames from 'classnames';
type Props = SelectHTMLAttributes & {
@@ -15,34 +10,33 @@ type Props = SelectHTMLAttributes & {
automationId?: string;
};
-const Select = forwardRef(({
- children,
- dimension,
- isFullWidth,
- isMinWidth,
- iconStart,
- automationId,
- ...attributes
-}: Props, ref?: Ref) => (
-
- {iconStart}
-
- {children}
-
-
-));
+const Select = forwardRef(
+ (
+ {
+ children,
+ dimension,
+ isFullWidth,
+ isMinWidth,
+ iconStart,
+ automationId,
+ ...attributes
+ }: Props,
+ ref?: Ref,
+ ) => (
+
+ {iconStart}
+
+ {children}
+
+
+ ),
+);
export default Select;
diff --git a/mailpoet/assets/js/src/common/form/textarea/_stories/textarea.tsx b/mailpoet/assets/js/src/common/form/textarea/_stories/textarea.tsx
index 6c3c426393..fa0471c86a 100644
--- a/mailpoet/assets/js/src/common/form/textarea/_stories/textarea.tsx
+++ b/mailpoet/assets/js/src/common/form/textarea/_stories/textarea.tsx
@@ -11,30 +11,19 @@ export function Textareas() {
<>
Small textareas
-
+
Regular textareas
Full-width textareas
-
+
>
diff --git a/mailpoet/assets/js/src/common/form/textarea/textarea.tsx b/mailpoet/assets/js/src/common/form/textarea/textarea.tsx
index d780fe4ea3..8306b9804f 100644
--- a/mailpoet/assets/js/src/common/form/textarea/textarea.tsx
+++ b/mailpoet/assets/js/src/common/form/textarea/textarea.tsx
@@ -21,29 +21,29 @@ function Textarea({
}: Props) {
return (
- {customLabel &&
{customLabel}
}
+ {customLabel && (
+
{customLabel}
+ )}
{tooltip && (
- <>
-
-
-
-
- {tooltip}
-
- >
+ <>
+
+
+
+
+ {tooltip}
+
+ >
)}
);
diff --git a/mailpoet/assets/js/src/common/form/toggle/_stories/toggle.tsx b/mailpoet/assets/js/src/common/form/toggle/_stories/toggle.tsx
index 71bcf138de..c87397090d 100644
--- a/mailpoet/assets/js/src/common/form/toggle/_stories/toggle.tsx
+++ b/mailpoet/assets/js/src/common/form/toggle/_stories/toggle.tsx
@@ -15,11 +15,7 @@ export function Toggles() {
Toggle regular
-
+
diff --git a/mailpoet/assets/js/src/common/form/toggle/toggle.tsx b/mailpoet/assets/js/src/common/form/toggle/toggle.tsx
index 1918049e27..2f009893f1 100644
--- a/mailpoet/assets/js/src/common/form/toggle/toggle.tsx
+++ b/mailpoet/assets/js/src/common/form/toggle/toggle.tsx
@@ -16,14 +16,12 @@ function Toggle({
}: Props) {
return (
YesNos
-
- YesNo
-
-
+ YesNo
+
-
- YesNo with error
-
-
+ YesNo with error
+
-
- YesNo disabled
-
-
+ YesNo disabled
+
>
diff --git a/mailpoet/assets/js/src/common/form/yesno/icons/no.tsx b/mailpoet/assets/js/src/common/form/yesno/icons/no.tsx
index 5935d13583..9dafcc4d4a 100644
--- a/mailpoet/assets/js/src/common/form/yesno/icons/no.tsx
+++ b/mailpoet/assets/js/src/common/form/yesno/icons/no.tsx
@@ -1,5 +1,8 @@
export default (
-
+
);
diff --git a/mailpoet/assets/js/src/common/form/yesno/icons/yes.tsx b/mailpoet/assets/js/src/common/form/yesno/icons/yes.tsx
index 2987e29529..0028705ab5 100644
--- a/mailpoet/assets/js/src/common/form/yesno/icons/yes.tsx
+++ b/mailpoet/assets/js/src/common/form/yesno/icons/yes.tsx
@@ -1,5 +1,8 @@
export default (
-
+
);
diff --git a/mailpoet/assets/js/src/common/form/yesno/yesno.tsx b/mailpoet/assets/js/src/common/form/yesno/yesno.tsx
index 69b4af0817..96ff4a3297 100644
--- a/mailpoet/assets/js/src/common/form/yesno/yesno.tsx
+++ b/mailpoet/assets/js/src/common/form/yesno/yesno.tsx
@@ -20,13 +20,11 @@ function YesNo({
}: Props) {
return (
diff --git a/mailpoet/assets/js/src/common/functions/set_lowercase_value.ts b/mailpoet/assets/js/src/common/functions/set_lowercase_value.ts
index 20fb74c92c..fe556f41c1 100644
--- a/mailpoet/assets/js/src/common/functions/set_lowercase_value.ts
+++ b/mailpoet/assets/js/src/common/functions/set_lowercase_value.ts
@@ -1,7 +1,9 @@
import { curry } from 'lodash';
-const setLowercaseValue = curry((setter: (value: string) => void, value: string) => {
- setter(value.toLowerCase());
-});
+const setLowercaseValue = curry(
+ (setter: (value: string) => void, value: string) => {
+ setter(value.toLowerCase());
+ },
+);
export default setLowercaseValue;
diff --git a/mailpoet/assets/js/src/common/grid/_stories/grid.tsx b/mailpoet/assets/js/src/common/grid/_stories/grid.tsx
index ef124c42ec..9ce43a66c3 100644
--- a/mailpoet/assets/js/src/common/grid/_stories/grid.tsx
+++ b/mailpoet/assets/js/src/common/grid/_stories/grid.tsx
@@ -8,27 +8,22 @@ export default {
};
export function Layouts(): ReactElement {
- const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi libero sapien, tristique sollicitudin lobortis id, viverra id libero.';
+ const content =
+ 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi libero sapien, tristique sollicitudin lobortis id, viverra id libero.';
return (
<>
Column
-
- {content}
-
+ {content}
-
- {content}
-
+ {content}
Column - small
-
- {content}
-
+ {content}
@@ -77,9 +72,7 @@ export function Layouts(): ReactElement {
Part
-
- Right Part
-
+ Right Part
@@ -93,22 +86,16 @@ export function Layouts(): ReactElement {
Part
-
- Right Part
-
+ Right Part
Centered row
-
- Left
-
+ Left
-
- Right
-
+ Right
>
diff --git a/mailpoet/assets/js/src/common/grid/column.tsx b/mailpoet/assets/js/src/common/grid/column.tsx
index bf5bbfe08c..8e5ddf9c4f 100644
--- a/mailpoet/assets/js/src/common/grid/column.tsx
+++ b/mailpoet/assets/js/src/common/grid/column.tsx
@@ -16,16 +16,10 @@ export function Column({
}: Props): ReactElement {
return (
{children}
diff --git a/mailpoet/assets/js/src/common/grid/space_between.tsx b/mailpoet/assets/js/src/common/grid/space_between.tsx
index 2208650572..2c66ec517c 100644
--- a/mailpoet/assets/js/src/common/grid/space_between.tsx
+++ b/mailpoet/assets/js/src/common/grid/space_between.tsx
@@ -14,15 +14,10 @@ export function SpaceBetween({
}: Props): ReactElement {
return (
{children}
diff --git a/mailpoet/assets/js/src/common/grid/three_columns.tsx b/mailpoet/assets/js/src/common/grid/three_columns.tsx
index 3addb8cf09..dc13998cb2 100644
--- a/mailpoet/assets/js/src/common/grid/three_columns.tsx
+++ b/mailpoet/assets/js/src/common/grid/three_columns.tsx
@@ -7,9 +7,16 @@ type Props = {
automationId?: string;
};
-export function ThreeColumns({ children, className, automationId }: Props): ReactElement {
+export function ThreeColumns({
+ children,
+ className,
+ automationId,
+}: Props): ReactElement {
return (
-
+
{children}
);
diff --git a/mailpoet/assets/js/src/common/hide_screen_options/hide_screen_options.tsx b/mailpoet/assets/js/src/common/hide_screen_options/hide_screen_options.tsx
index 843a1a4f30..44b1bb512e 100644
--- a/mailpoet/assets/js/src/common/hide_screen_options/hide_screen_options.tsx
+++ b/mailpoet/assets/js/src/common/hide_screen_options/hide_screen_options.tsx
@@ -3,11 +3,11 @@ function HideScreenOptions() {
);
}
diff --git a/mailpoet/assets/js/src/common/key_value_table.jsx b/mailpoet/assets/js/src/common/key_value_table.jsx
index 8f7d617722..5c4662ebe6 100644
--- a/mailpoet/assets/js/src/common/key_value_table.jsx
+++ b/mailpoet/assets/js/src/common/key_value_table.jsx
@@ -6,8 +6,8 @@ function KeyValueTable(props) {
{props.rows.map((row) => (
- { row.key }
- { row.value }
+ {row.key}
+ {row.value}
))}
@@ -17,14 +17,16 @@ function KeyValueTable(props) {
KeyValueTable.propTypes = {
max_width: PropTypes.string,
- rows: PropTypes.arrayOf(PropTypes.shape({
- key: PropTypes.string.isRequired,
- value: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- PropTypes.element,
- ]).isRequired,
- })).isRequired,
+ rows: PropTypes.arrayOf(
+ PropTypes.shape({
+ key: PropTypes.string.isRequired,
+ value: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.number,
+ PropTypes.element,
+ ]).isRequired,
+ }),
+ ).isRequired,
};
KeyValueTable.defaultProps = {
diff --git a/mailpoet/assets/js/src/common/listings/_stories/newsletter_stats.tsx b/mailpoet/assets/js/src/common/listings/_stories/newsletter_stats.tsx
index 9ba5c6a021..36bfdd4940 100644
--- a/mailpoet/assets/js/src/common/listings/_stories/newsletter_stats.tsx
+++ b/mailpoet/assets/js/src/common/listings/_stories/newsletter_stats.tsx
@@ -14,7 +14,10 @@ MailPoet.I18n.add('openedStatTooltipAverage', 'under 10%');
MailPoet.I18n.add('clickedStatTooltipExcellent', 'above 3%');
MailPoet.I18n.add('clickedStatTooltipGood', 'between 1 and 3%');
MailPoet.I18n.add('clickedStatTooltipAverage', 'under 1%');
-MailPoet.I18n.add('revenueStatsTooltipShort', 'Revenues by customer who clicked on this email in the last 2 weeks.');
+MailPoet.I18n.add(
+ 'revenueStatsTooltipShort',
+ 'Revenues by customer who clicked on this email in the last 2 weeks.',
+);
export default {
title: 'Listing',
@@ -36,11 +39,26 @@ export function NewsletterStatsComponent() {
With badges and revenues
-
+
-
+
-
+
@@ -56,11 +74,29 @@ export function NewsletterStatsComponent() {
No badges, with revenues
-
+
-
+
-
+
>
);
}
diff --git a/mailpoet/assets/js/src/common/listings/_stories/newsletter_status.tsx b/mailpoet/assets/js/src/common/listings/_stories/newsletter_status.tsx
index c2ef1fe82b..e8791ee262 100644
--- a/mailpoet/assets/js/src/common/listings/_stories/newsletter_status.tsx
+++ b/mailpoet/assets/js/src/common/listings/_stories/newsletter_status.tsx
@@ -40,7 +40,12 @@ export function NewsletterStatuses() {
-
+
diff --git a/mailpoet/assets/js/src/common/listings/index.ts b/mailpoet/assets/js/src/common/listings/index.ts
index b273991068..9bbc19fc44 100644
--- a/mailpoet/assets/js/src/common/listings/index.ts
+++ b/mailpoet/assets/js/src/common/listings/index.ts
@@ -1,2 +1,5 @@
export { default as NewsletterStats } from './newsletter_stats';
-export { default as NewsletterStatus, ScheduledIcon } from './newsletter_status';
+export {
+ default as NewsletterStatus,
+ ScheduledIcon,
+} from './newsletter_status';
diff --git a/mailpoet/assets/js/src/common/listings/newsletter_stats.tsx b/mailpoet/assets/js/src/common/listings/newsletter_stats.tsx
index 2cd92f67eb..2bb779fb3c 100644
--- a/mailpoet/assets/js/src/common/listings/newsletter_stats.tsx
+++ b/mailpoet/assets/js/src/common/listings/newsletter_stats.tsx
@@ -32,8 +32,7 @@ function NewsletterStats({
%
- {openedDisplay}
- %
+ {openedDisplay}%
{!hideBadges && (
@@ -53,12 +52,10 @@ function NewsletterStats({
const revenuesTooltipId = `revenues-${newsletterId || '0'}`;
revenueStats = (
-
{revenues}
-
+
+ {revenues}
+
+
{MailPoet.I18n.t('revenueStatsTooltipShort')}
@@ -68,7 +65,10 @@ function NewsletterStats({
}
if (wrapContentInLink) {
- clickedAndOpenedStats = wrapContentInLink(clickedAndOpenedStats, 'opened-and-clicked');
+ clickedAndOpenedStats = wrapContentInLink(
+ clickedAndOpenedStats,
+ 'opened-and-clicked',
+ );
revenueStats = wrapContentInLink(revenueStats, 'revenue');
}
diff --git a/mailpoet/assets/js/src/common/listings/newsletter_stats/badge.tsx b/mailpoet/assets/js/src/common/listings/newsletter_stats/badge.tsx
index 4fe01c0867..df85c1c278 100644
--- a/mailpoet/assets/js/src/common/listings/newsletter_stats/badge.tsx
+++ b/mailpoet/assets/js/src/common/listings/newsletter_stats/badge.tsx
@@ -22,15 +22,10 @@ function Badge({
}: BadgeProps) {
return (
-
+
{name}
- { tooltip && (
+ {tooltip && (
{tooltip}
- ) }
+ )}
);
}
diff --git a/mailpoet/assets/js/src/common/listings/newsletter_stats/stats.tsx b/mailpoet/assets/js/src/common/listings/newsletter_stats/stats.tsx
index e7902bb908..9b4132b765 100644
--- a/mailpoet/assets/js/src/common/listings/newsletter_stats/stats.tsx
+++ b/mailpoet/assets/js/src/common/listings/newsletter_stats/stats.tsx
@@ -13,11 +13,7 @@ type StatsBadgeProps = {
const stats = {
opened: {
badgeRanges: [30, 10, 0],
- badgeTypes: [
- 'excellent',
- 'good',
- 'average',
- ],
+ badgeTypes: ['excellent', 'good', 'average'],
tooltipText: [
MailPoet.I18n.t('openedStatTooltipExcellent'),
MailPoet.I18n.t('openedStatTooltipGood'),
@@ -26,11 +22,7 @@ const stats = {
},
clicked: {
badgeRanges: [3, 1, 0],
- badgeTypes: [
- 'excellent',
- 'good',
- 'average',
- ],
+ badgeTypes: ['excellent', 'good', 'average'],
tooltipText: [
MailPoet.I18n.t('clickedStatTooltipExcellent'),
MailPoet.I18n.t('clickedStatTooltipGood'),
@@ -92,24 +84,15 @@ export function StatsBadge(props: StatsBadgeProps) {
{badge.tooltipTitle.toUpperCase()}
-
+
{' : '}
{stat.tooltipText[0]}
-
+
{' : '}
{stat.tooltipText[1]}
-
+
{' : '}
{stat.tooltipText[2]}
diff --git a/mailpoet/assets/js/src/common/listings/newsletter_status.tsx b/mailpoet/assets/js/src/common/listings/newsletter_status.tsx
index 546d207f99..f88551a799 100644
--- a/mailpoet/assets/js/src/common/listings/newsletter_status.tsx
+++ b/mailpoet/assets/js/src/common/listings/newsletter_status.tsx
@@ -1,8 +1,6 @@
import MailPoet from 'mailpoet';
import classNames from 'classnames';
-import {
- addDays, differenceInMinutes, isFuture, isPast,
-} from 'date-fns';
+import { addDays, differenceInMinutes, isFuture, isPast } from 'date-fns';
import t from 'common/functions/t';
import Tooltip from '../tooltip/tooltip';
@@ -15,8 +13,18 @@ function CircularProgress({ percentage }: CircularProgressProps) {
const filled = perimeter * (percentage / 100);
const empty = perimeter - filled;
return (
-
-
+
+
-
+
+
);
}
@@ -55,18 +72,20 @@ function NewsletterStatus({
}: NewsletterStatusProps) {
const unknown = !scheduledFor && !processed && !total;
const scheduled = scheduledFor && isFuture(scheduledFor);
- const inProgress = (!scheduledFor || isPast(scheduledFor)) && processed < total;
+ const inProgress =
+ (!scheduledFor || isPast(scheduledFor)) && processed < total;
const sent = (!scheduledFor || isPast(scheduledFor)) && processed >= total;
const sentWithoutQueue = status === 'sent' && total === undefined;
let percentage = 0;
- let label : string | JSX.Element = t('notSentYet');
+ let label: string | JSX.Element = t('notSentYet');
if (scheduled) {
const scheduledDate = MailPoet.Date.short(scheduledFor);
const scheduledTime = MailPoet.Date.time(scheduledFor);
const now = new Date();
const tomorrow = addDays(now, 1);
const isScheduledForToday = MailPoet.Date.short(now) === scheduledDate;
- const isScheduledForTomorrow = MailPoet.Date.short(tomorrow) === scheduledDate;
+ const isScheduledForTomorrow =
+ MailPoet.Date.short(tomorrow) === scheduledDate;
if (isScheduledForToday || isScheduledForTomorrow) {
const randomId = Math.random().toString(36).substring(2, 15);
const dateWord = isScheduledForToday ? t('today') : t('tomorrow');
@@ -99,10 +118,14 @@ function NewsletterStatus({
percentage = 100;
}
} else if (inProgress) {
- label = `${MailPoet.Num.toLocaleFixed(processed)} / ${MailPoet.Num.toLocaleFixed(total)}`;
+ label = `${MailPoet.Num.toLocaleFixed(
+ processed,
+ )} / ${MailPoet.Num.toLocaleFixed(total)}`;
percentage = 100 * (processed / total);
} else if (sent) {
- label = `${MailPoet.Num.toLocaleFixed(total)} / ${MailPoet.Num.toLocaleFixed(total)}`;
+ label = `${MailPoet.Num.toLocaleFixed(
+ total,
+ )} / ${MailPoet.Num.toLocaleFixed(total)}`;
percentage = 100;
} else if (sentWithoutQueue) {
label = t('sent');
@@ -112,13 +135,14 @@ function NewsletterStatus({
label = t('paused');
}
return (
-
{scheduled &&
}
diff --git a/mailpoet/assets/js/src/common/loader/_stories/loader.tsx b/mailpoet/assets/js/src/common/loader/_stories/loader.tsx
index f779323389..7a2bf27da1 100644
--- a/mailpoet/assets/js/src/common/loader/_stories/loader.tsx
+++ b/mailpoet/assets/js/src/common/loader/_stories/loader.tsx
@@ -9,24 +9,16 @@ export function Loaders() {
return (
<>
- Default loader:
- {' '}
-
+ Default loader:
- Light loader:
- {' '}
-
+ Light loader:
- Dark loader:
- {' '}
-
+ Dark loader:
- bigger loader:
- {' '}
-
+ bigger loader:
>
);
diff --git a/mailpoet/assets/js/src/common/modal/_stories/modal.tsx b/mailpoet/assets/js/src/common/modal/_stories/modal.tsx
index ad68fbba65..5cd561d5eb 100644
--- a/mailpoet/assets/js/src/common/modal/_stories/modal.tsx
+++ b/mailpoet/assets/js/src/common/modal/_stories/modal.tsx
@@ -6,21 +6,50 @@ import Heading from '../../typography/heading/heading';
const shortContent = (
<>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-
Morbi libero sapien, tristique sollicitudin lobortis id, viverra id libero.
+
+ Morbi libero sapien, tristique sollicitudin lobortis id, viverra id
+ libero.
+
Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus.
>
);
const longContent = (
<>
-
{'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '.repeat(20)}
-
{'Morbi libero sapien, tristique sollicitudin lobortis id, viverra id libero. '.repeat(20)}
-
{'Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. '.repeat(20)}
+
+ {'Lorem ipsum dolor sit amet, consectetur adipiscing elit. '.repeat(20)}
+
+
+ {'Morbi libero sapien, tristique sollicitudin lobortis id, viverra id libero. '.repeat(
+ 20,
+ )}
+
+
+ {'Mauris dolor felis, sagittis at, luctus sed, aliquam non, tellus. '.repeat(
+ 20,
+ )}
+
{'Vivamus ac leo pretium faucibus.'.repeat(20)}
-
{'Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. '.repeat(20)}
-
{'Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. '.repeat(20)}
-
{'Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. '.repeat(20)}
-
{'Cras pede libero, dapibus nec, pretium sit amet, tempor quis. '.repeat(20)}
+
+ {'Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. '.repeat(
+ 20,
+ )}
+
+
+ {'Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. '.repeat(
+ 20,
+ )}
+
+
+ {'Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. '.repeat(
+ 20,
+ )}
+
+
+ {'Cras pede libero, dapibus nec, pretium sit amet, tempor quis. '.repeat(
+ 20,
+ )}
+
>
);
@@ -55,7 +84,7 @@ function ModalWrapper({
>
{content}
- ) }
+ )}
);
}
@@ -65,25 +94,71 @@ export function Modals() {
<>
Modal with short text
-
-
-
+
+
+
Modal with long text
-
-
-
-
+
+
+
+
Full-screen modal
-
-
-
-
+
+
+
+
>
);
}
diff --git a/mailpoet/assets/js/src/common/modal/frame.tsx b/mailpoet/assets/js/src/common/modal/frame.tsx
index 18426bd4f2..e6a768831a 100644
--- a/mailpoet/assets/js/src/common/modal/frame.tsx
+++ b/mailpoet/assets/js/src/common/modal/frame.tsx
@@ -7,11 +7,7 @@ type Props = {
children: ReactNode;
};
-function ModalFrame({
- fullScreen = false,
- className = '',
- children,
-}: Props) {
+function ModalFrame({ fullScreen = false, className = '', children }: Props) {
return (
-
- { title }
-
+ {title}
);
}
diff --git a/mailpoet/assets/js/src/common/modal/modal.tsx b/mailpoet/assets/js/src/common/modal/modal.tsx
index 37afb66f62..63316e596c 100644
--- a/mailpoet/assets/js/src/common/modal/modal.tsx
+++ b/mailpoet/assets/js/src/common/modal/modal.tsx
@@ -38,14 +38,9 @@ function Modal({
shouldCloseOnClickOutside={shouldCloseOnClickOutside}
className={overlayClassName}
>
-
- { title && (
-
- ) }
- { isDismissible && (
+
+ {title && }
+ {isDismissible && (
{ModalCloseIcon}
- ) }
-
- { children }
+ )}
+
+ {children}
,
diff --git a/mailpoet/assets/js/src/common/premium_banner_with_upgrade/premium_banner_with_upgrade.tsx b/mailpoet/assets/js/src/common/premium_banner_with_upgrade/premium_banner_with_upgrade.tsx
index 9bb4a3c681..4583773068 100644
--- a/mailpoet/assets/js/src/common/premium_banner_with_upgrade/premium_banner_with_upgrade.tsx
+++ b/mailpoet/assets/js/src/common/premium_banner_with_upgrade/premium_banner_with_upgrade.tsx
@@ -31,25 +31,27 @@ const getBannerMessage = (translationKey: string) => {
{ReactStringReplace(
message,
/(\[subscribersCount]|\[subscribersLimit])/g,
- (match) => ((match === '[subscribersCount]') ? subscribersCount : subscribersLimit),
+ (match) =>
+ match === '[subscribersCount]' ? subscribersCount : subscribersLimit,
)}
);
};
-const getCtaButton = (translationKey: string, link: string, target = '_blank') => (
-
+const getCtaButton = (
+ translationKey: string,
+ link: string,
+ target = '_blank',
+) => (
+
{MailPoet.I18n.t(translationKey)}
);
-function PremiumBannerWithUpgrade(
- { message, actionButton }: Props,
-) : JSX.Element {
+function PremiumBannerWithUpgrade({
+ message,
+ actionButton,
+}: Props): JSX.Element {
let bannerMessage: ReactNode;
let ctaButton: ReactNode;
@@ -57,14 +59,25 @@ function PremiumBannerWithUpgrade(
bannerMessage = getBannerMessage('premiumFeatureDescription');
ctaButton = isPremiumPluginInstalled
- ? getCtaButton('premiumFeatureButtonActivatePremium', premiumPluginActivationUrl, '_self')
- : getCtaButton('premiumFeatureButtonDownloadPremium', premiumPluginDownloadUrl);
+ ? getCtaButton(
+ 'premiumFeatureButtonActivatePremium',
+ premiumPluginActivationUrl,
+ '_self',
+ )
+ : getCtaButton(
+ 'premiumFeatureButtonDownloadPremium',
+ premiumPluginDownloadUrl,
+ );
} else if (subscribersLimitReached) {
- bannerMessage = getBannerMessage('premiumFeatureDescriptionSubscribersLimitReached');
+ bannerMessage = getBannerMessage(
+ 'premiumFeatureDescriptionSubscribersLimitReached',
+ );
const link = anyValidKey
? MailPoet.MailPoetComUrlFactory.getUpgradeUrl(pluginPartialKey)
- : MailPoet.MailPoetComUrlFactory.getPurchasePlanUrl(+subscribersCount + 1);
+ : MailPoet.MailPoetComUrlFactory.getPurchasePlanUrl(
+ +subscribersCount + 1,
+ );
ctaButton = getCtaButton('premiumFeatureButtonUpgradePlan', link);
} else {
diff --git a/mailpoet/assets/js/src/common/premium_required/_stories/premium_required.tsx b/mailpoet/assets/js/src/common/premium_required/_stories/premium_required.tsx
index 82e4039fb0..46c2561a3b 100644
--- a/mailpoet/assets/js/src/common/premium_required/_stories/premium_required.tsx
+++ b/mailpoet/assets/js/src/common/premium_required/_stories/premium_required.tsx
@@ -11,18 +11,16 @@ export function PremiumsRequired() {
- Learn more about your subscribers and optimize your campaigns. See who
- opened your emails, which links they clicked, and then use the data to make y
- our emails even better. And if you run a WooCommerce store, you will also
- see the revenue earned per email.
-
- Learn more.
-
+ Learn more about your subscribers and optimize your campaigns. See
+ who opened your emails, which links they clicked, and then use the
+ data to make y our emails even better. And if you run a WooCommerce
+ store, you will also see the revenue earned per email.
+ Learn more.
- )}
- actionButton={(Sign Up )}
+ }
+ actionButton={Sign Up }
/>
);
diff --git a/mailpoet/assets/js/src/common/premium_required/premium_required.tsx b/mailpoet/assets/js/src/common/premium_required/premium_required.tsx
index c9bb3438da..8302d08387 100644
--- a/mailpoet/assets/js/src/common/premium_required/premium_required.tsx
+++ b/mailpoet/assets/js/src/common/premium_required/premium_required.tsx
@@ -13,15 +13,11 @@ function PremiumRequired({ title, message, actionButton }: Props) {
-
- {' '}
- {title}
+ {title}
{message}
-
- {actionButton}
-
+
{actionButton}
);
}
diff --git a/mailpoet/assets/js/src/common/preview/desktop_icon.tsx b/mailpoet/assets/js/src/common/preview/desktop_icon.tsx
index 9a72555c33..0132ccaf42 100644
--- a/mailpoet/assets/js/src/common/preview/desktop_icon.tsx
+++ b/mailpoet/assets/js/src/common/preview/desktop_icon.tsx
@@ -1,8 +1,19 @@
export default function DesktopIcon() {
return (
-
+
-
+
diff --git a/mailpoet/assets/js/src/common/preview/mobile_icon.tsx b/mailpoet/assets/js/src/common/preview/mobile_icon.tsx
index d5ec7b55f7..46312e8543 100644
--- a/mailpoet/assets/js/src/common/preview/mobile_icon.tsx
+++ b/mailpoet/assets/js/src/common/preview/mobile_icon.tsx
@@ -1,11 +1,25 @@
export default function MobileIcon() {
return (
-
+
-
+
-
+
diff --git a/mailpoet/assets/js/src/common/preview/preview.jsx b/mailpoet/assets/js/src/common/preview/preview.jsx
index 46d78d24ed..a071f64dcc 100644
--- a/mailpoet/assets/js/src/common/preview/preview.jsx
+++ b/mailpoet/assets/js/src/common/preview/preview.jsx
@@ -5,11 +5,7 @@ import classnames from 'classnames';
import MobileIcon from './mobile_icon';
import DesktopIcon from './desktop_icon';
-function Preview({
- children,
- onDisplayTypeChange,
- selectedDisplayType,
-}) {
+function Preview({ children, onDisplayTypeChange, selectedDisplayType }) {
const [displayType, setDisplayType] = useState(selectedDisplayType);
const changeType = (type) => {
setDisplayType(type);
@@ -19,7 +15,9 @@ function Preview({
);
diff --git a/mailpoet/assets/js/src/common/print_boolean.jsx b/mailpoet/assets/js/src/common/print_boolean.jsx
index 21d08854c4..cfcc6d670e 100644
--- a/mailpoet/assets/js/src/common/print_boolean.jsx
+++ b/mailpoet/assets/js/src/common/print_boolean.jsx
@@ -4,9 +4,9 @@ import MailPoet from 'mailpoet';
function PrintBoolean(props) {
return (
- {(props.children === true && props.truthy)
- || (props.children === false && props.falsy)
- || (props.unknown)}
+ {(props.children === true && props.truthy) ||
+ (props.children === false && props.falsy) ||
+ props.unknown}
);
}
diff --git a/mailpoet/assets/js/src/common/sender_email_address_warning.jsx b/mailpoet/assets/js/src/common/sender_email_address_warning.jsx
index 327f7ad1c6..2123eca6f5 100644
--- a/mailpoet/assets/js/src/common/sender_email_address_warning.jsx
+++ b/mailpoet/assets/js/src/common/sender_email_address_warning.jsx
@@ -23,9 +23,10 @@ function SenderEmailAddressWarning({ emailAddress, mssActive }) {
/(%1\$s|%2\$s|
.*<\/em>)/,
(match) => {
if (match === '%1$s') return suggestedEmailAddress;
- if (match === '%2$s') return { emailAddress } ;
+ if (match === '%2$s')
+ return {emailAddress} ;
return {match.replace(/<\/?em>/g, '')} ;
- }
+ },
)}
diff --git a/mailpoet/assets/js/src/common/set_from_address_modal.tsx b/mailpoet/assets/js/src/common/set_from_address_modal.tsx
index 09b6f3e6ed..d439308755 100644
--- a/mailpoet/assets/js/src/common/set_from_address_modal.tsx
+++ b/mailpoet/assets/js/src/common/set_from_address_modal.tsx
@@ -11,16 +11,20 @@ import { ErrorResponse, isErrorResponse } from '../ajax';
* @param {string|null} address
* @returns {Promise}
*/
-const handleSave = (address: string | null) => MailPoet.Ajax.post({
- api_version: MailPoet.apiVersion,
- endpoint: 'settings',
- action: 'setAuthorizedFromAddress',
- data: {
- address,
- },
-});
+const handleSave = (address: string | null) =>
+ MailPoet.Ajax.post({
+ api_version: MailPoet.apiVersion,
+ endpoint: 'settings',
+ action: 'setAuthorizedFromAddress',
+ data: {
+ address,
+ },
+ });
-const getErrorMessage = (error: ErrorResponse['errors'][number] | null, address: string | null): string => {
+const getErrorMessage = (
+ error: ErrorResponse['errors'][number] | null,
+ address: string | null,
+): string => {
if (!error) {
return MailPoet.I18n.t('setFromAddressEmailUnknownError');
}
@@ -55,15 +59,21 @@ const getSuccessMessage = (): JSX.Element => (
);
const removeUnauthorizedEmailNotices = () => {
- const unauthorizedEmailNotice = document.querySelector('[data-notice="unauthorized-email-addresses-notice"]');
+ const unauthorizedEmailNotice = document.querySelector(
+ '[data-notice="unauthorized-email-addresses-notice"]',
+ );
if (unauthorizedEmailNotice) {
unauthorizedEmailNotice.remove();
}
- const unauthorizedEmailInNewsletterNotice = document.querySelector('[data-notice="unauthorized-email-in-newsletters-addresses-notice"]');
+ const unauthorizedEmailInNewsletterNotice = document.querySelector(
+ '[data-notice="unauthorized-email-in-newsletters-addresses-notice"]',
+ );
if (unauthorizedEmailInNewsletterNotice) {
unauthorizedEmailInNewsletterNotice.remove();
}
- const unauthorizedEmailInNewsletterDynamicNotice = document.querySelector('[data-id="mailpoet_authorization_error"]');
+ const unauthorizedEmailInNewsletterDynamicNotice = document.querySelector(
+ '[data-id="mailpoet_authorization_error"]',
+ );
if (unauthorizedEmailInNewsletterDynamicNotice) {
unauthorizedEmailInNewsletterDynamicNotice.remove();
}
@@ -86,22 +96,20 @@ function SetFromAddressModal({ onRequestClose, setAuthorizedAddress }: Props) {
contentClassName="set-from-address-modal"
>
- {
- ReactStringReplace(
- MailPoet.I18n.t('setFromAddressModalDescription'),
- /\[link\](.*?)\[\/link\]/g,
- (match) => (
-
- {match}
-
- ),
- )
- }
+ {ReactStringReplace(
+ MailPoet.I18n.t('setFromAddressModalDescription'),
+ /\[link\](.*?)\[\/link\]/g,
+ (match) => (
+
+ {match}
+
+ ),
+ )}
{
setAddress(event.target.value.trim() || null);
- const addressValidator = jQuery('#mailpoet-set-from-address-modal-input').parsley();
+ const addressValidator = jQuery(
+ '#mailpoet-set-from-address-modal-input',
+ ).parsley();
addressValidator.removeError('saveError');
}}
/>
@@ -122,7 +132,9 @@ function SetFromAddressModal({ onRequestClose, setAuthorizedAddress }: Props) {
type="submit"
value={MailPoet.I18n.t('setFromAddressModalSave')}
onClick={async () => {
- const addressValidator = jQuery('#mailpoet-set-from-address-modal-input').parsley();
+ const addressValidator = jQuery(
+ '#mailpoet-set-from-address-modal-input',
+ ).parsley();
addressValidator.validate();
if (!addressValidator.isValid()) {
return;
@@ -137,9 +149,12 @@ function SetFromAddressModal({ onRequestClose, setAuthorizedAddress }: Props) {
removeUnauthorizedEmailNotices();
notices.success(getSuccessMessage(), { timeout: false });
} catch (e) {
- const error = isErrorResponse(e) && e.errors[0] ? e.errors[0] : null;
+ const error =
+ isErrorResponse(e) && e.errors[0] ? e.errors[0] : null;
if (error.error === 'unauthorized') {
- MailPoet.trackEvent('Unauthorized email used', { 'Unauthorized email source': 'modal' });
+ MailPoet.trackEvent('Unauthorized email used', {
+ 'Unauthorized email source': 'modal',
+ });
}
const message = getErrorMessage(error, address);
addressValidator.addError('saveError', { message });
diff --git a/mailpoet/assets/js/src/common/steps/_stories/steps.tsx b/mailpoet/assets/js/src/common/steps/_stories/steps.tsx
index 31d3908108..52aacf1717 100644
--- a/mailpoet/assets/js/src/common/steps/_stories/steps.tsx
+++ b/mailpoet/assets/js/src/common/steps/_stories/steps.tsx
@@ -22,8 +22,9 @@ export function StepsWithoutTitles() {
{`Step ${step}`}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta natus
- consequuntur saepe harum nesciunt eum, a nulla facilis architecto incidunt
- odio voluptas praesentium, ipsa laboriosam animi! Officiis atque odio nulla.
+ consequuntur saepe harum nesciunt eum, a nulla facilis architecto
+ incidunt odio voluptas praesentium, ipsa laboriosam animi! Officiis
+ atque odio nulla.
Previous step
-
+
Next step
@@ -55,13 +52,18 @@ export function StepsWithTitles() {
return (
<>
-
+
{`Step ${step}`}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta natus
- consequuntur saepe harum nesciunt eum, a nulla facilis architecto incidunt
- odio voluptas praesentium, ipsa laboriosam animi! Officiis atque odio nulla.
+ consequuntur saepe harum nesciunt eum, a nulla facilis architecto
+ incidunt odio voluptas praesentium, ipsa laboriosam animi! Officiis
+ atque odio nulla.
Previous step
-
+
Next step
diff --git a/mailpoet/assets/js/src/common/steps/content_wrapper_fix.tsx b/mailpoet/assets/js/src/common/steps/content_wrapper_fix.tsx
index 95407d09b2..9e98bb4580 100644
--- a/mailpoet/assets/js/src/common/steps/content_wrapper_fix.tsx
+++ b/mailpoet/assets/js/src/common/steps/content_wrapper_fix.tsx
@@ -3,7 +3,9 @@ export function ContentWrapperFix() {
<>
+
>
);
diff --git a/mailpoet/assets/js/src/form_editor/blocks/email/edit.jsx b/mailpoet/assets/js/src/form_editor/blocks/email/edit.jsx
index 4e66499d27..c110889f7f 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/email/edit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/email/edit.jsx
@@ -9,7 +9,10 @@ import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import TextInputEdit from '../text_input_edit.jsx';
-import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
+import {
+ InputStylesSettings,
+ inputStylesPropTypes,
+} from '../input_styles_settings.jsx';
function EmailEdit({ attributes, setAttributes }) {
const inspectorControls = (
@@ -20,18 +23,18 @@ function EmailEdit({ attributes, setAttributes }) {
label={MailPoet.I18n.t('label')}
value={attributes.label}
data-automation-id="settings_email_label_input"
- onChange={(label) => (setAttributes({ label }))}
+ onChange={(label) => setAttributes({ label })}
/>
(setAttributes({ labelWithinInput }))}
+ onChange={(labelWithinInput) => setAttributes({ labelWithinInput })}
/>
(setAttributes({ styles }))}
+ onChange={(styles) => setAttributes({ styles })}
/>
);
diff --git a/mailpoet/assets/js/src/form_editor/blocks/first_name/edit.jsx b/mailpoet/assets/js/src/form_editor/blocks/first_name/edit.jsx
index d5d8b0fb8d..cf6f492c7e 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/first_name/edit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/first_name/edit.jsx
@@ -9,7 +9,10 @@ import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import TextInputEdit from '../text_input_edit.jsx';
-import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
+import {
+ InputStylesSettings,
+ inputStylesPropTypes,
+} from '../input_styles_settings.jsx';
function FirstNameEdit({ attributes, setAttributes }) {
const inspectorControls = (
@@ -20,24 +23,24 @@ function FirstNameEdit({ attributes, setAttributes }) {
label={MailPoet.I18n.t('label')}
value={attributes.label}
data-automation-id="settings_first_name_label_input"
- onChange={(label) => (setAttributes({ label }))}
+ onChange={(label) => setAttributes({ label })}
/>
(setAttributes({ labelWithinInput }))}
+ onChange={(labelWithinInput) => setAttributes({ labelWithinInput })}
className="mailpoet-automation-label-within-input-toggle"
/>
(setAttributes({ mandatory }))}
+ onChange={(mandatory) => setAttributes({ mandatory })}
/>
(setAttributes({ styles }))}
+ onChange={(styles) => setAttributes({ styles })}
/>
);
diff --git a/mailpoet/assets/js/src/form_editor/blocks/html/edit.jsx b/mailpoet/assets/js/src/form_editor/blocks/html/edit.jsx
index c2040757c8..bae9264d61 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/html/edit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/html/edit.jsx
@@ -17,39 +17,46 @@ import ParagraphEdit from '../paragraph_edit.jsx';
function CustomHtmlEdit({ attributes, setAttributes, clientId }) {
const colorDefinitions = useSetting('color.palette');
- const {
- fontColor,
- fontSize,
- alignment,
- fontFamily,
- } = useSelect(
- (select) => {
- const settings = select('mailpoet-form-editor').getFormSettings();
- const parentBackgroundColor = mapColorSlugToValue(
- colorDefinitions,
- select('mailpoet-form-editor').getClosestParentAttribute(clientId, 'backgroundColor'),
- select('mailpoet-form-editor').getClosestParentAttribute(clientId, 'customBackgroundColor')
- );
- const parentTextColor = mapColorSlugToValue(
- colorDefinitions,
- select('mailpoet-form-editor').getClosestParentAttribute(clientId, 'textColor'),
- select('mailpoet-form-editor').getClosestParentAttribute(clientId, 'customTextColor')
- );
- return {
- backgroundColor: parentBackgroundColor || settings.backgroundColor,
- fontColor: parentTextColor || settings.fontColor,
- fontSize: settings.fontSize,
- alignment: settings.alignment,
- fontFamily: settings.fontFamily,
- };
- },
- []
- );
+ const { fontColor, fontSize, alignment, fontFamily } = useSelect((select) => {
+ const settings = select('mailpoet-form-editor').getFormSettings();
+ const parentBackgroundColor = mapColorSlugToValue(
+ colorDefinitions,
+ select('mailpoet-form-editor').getClosestParentAttribute(
+ clientId,
+ 'backgroundColor',
+ ),
+ select('mailpoet-form-editor').getClosestParentAttribute(
+ clientId,
+ 'customBackgroundColor',
+ ),
+ );
+ const parentTextColor = mapColorSlugToValue(
+ colorDefinitions,
+ select('mailpoet-form-editor').getClosestParentAttribute(
+ clientId,
+ 'textColor',
+ ),
+ select('mailpoet-form-editor').getClosestParentAttribute(
+ clientId,
+ 'customTextColor',
+ ),
+ );
+ return {
+ backgroundColor: parentBackgroundColor || settings.backgroundColor,
+ fontColor: parentTextColor || settings.fontColor,
+ fontSize: settings.fontSize,
+ alignment: settings.alignment,
+ fontFamily: settings.fontFamily,
+ };
+ }, []);
const [renderedContent, setRenderedContent] = useState(attributes.content);
/* eslint-disable-next-line react-hooks/exhaustive-deps -- because we use external function */
- const setRenderedContentDebounced = useCallback(debounce((content) => {
- setRenderedContent(content);
- }, 300), []);
+ const setRenderedContentDebounced = useCallback(
+ debounce((content) => {
+ setRenderedContent(content);
+ }, 300),
+ [],
+ );
const handleContentChange = (content) => {
setAttributes({ content });
@@ -70,15 +77,16 @@ function CustomHtmlEdit({ attributes, setAttributes, clientId }) {
(setAttributes({ nl2br }))}
+ onChange={(nl2br) => setAttributes({ nl2br })}
/>
-
);
const styles = attributes.nl2br ? ['body { white-space: pre-line; }'] : [];
- styles.push(` body {font-family: ${getComputedStyle(document.body).fontFamily};}`);
+ styles.push(
+ ` body {font-family: ${getComputedStyle(document.body).fontFamily};}`,
+ );
if (fontColor) {
styles.push(` body {color: ${fontColor};}`);
} else {
@@ -87,7 +95,9 @@ function CustomHtmlEdit({ attributes, setAttributes, clientId }) {
if (fontSize) {
styles.push(` body {font-size: ${fontSize}px }`);
} else {
- styles.push(` body {font-size: ${getComputedStyle(document.body).fontSize};}`);
+ styles.push(
+ ` body {font-size: ${getComputedStyle(document.body).fontSize};}`,
+ );
}
if (alignment) {
styles.push(` body {text-align: ${alignment}}`);
diff --git a/mailpoet/assets/js/src/form_editor/blocks/input_styles_settings.jsx b/mailpoet/assets/js/src/form_editor/blocks/input_styles_settings.jsx
index 9738ae4474..2a4a338a86 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/input_styles_settings.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/input_styles_settings.jsx
@@ -13,10 +13,7 @@ import PropTypes from 'prop-types';
import ColorSettings from 'form_editor/components/color_settings';
-function InputStylesSettings({
- styles,
- onChange,
-}) {
+function InputStylesSettings({ styles, onChange }) {
const localStylesRef = useRef(styles);
const localStyles = localStylesRef.current;
@@ -47,8 +44,14 @@ function InputStylesSettings({
return (
-
-
+
+
) : null}
- applyStylesToAllTextInputs(localStyles)} data-automation-id="styles_apply_to_all">
+ applyStylesToAllTextInputs(localStyles)}
+ data-automation-id="styles_apply_to_all"
+ >
{MailPoet.I18n.t('formSettingsApplyToAll')}
diff --git a/mailpoet/assets/js/src/form_editor/blocks/last_name/edit.jsx b/mailpoet/assets/js/src/form_editor/blocks/last_name/edit.jsx
index 87911cd7fc..3ca67245e0 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/last_name/edit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/last_name/edit.jsx
@@ -9,7 +9,10 @@ import PropTypes from 'prop-types';
import MailPoet from 'mailpoet';
import TextInputEdit from '../text_input_edit.jsx';
-import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
+import {
+ InputStylesSettings,
+ inputStylesPropTypes,
+} from '../input_styles_settings.jsx';
function LastNameEdit({ attributes, setAttributes }) {
const inspectorControls = (
@@ -20,23 +23,23 @@ function LastNameEdit({ attributes, setAttributes }) {
label={MailPoet.I18n.t('label')}
value={attributes.label}
data-automation-id="settings_last_name_label_input"
- onChange={(label) => (setAttributes({ label }))}
+ onChange={(label) => setAttributes({ label })}
/>
(setAttributes({ labelWithinInput }))}
+ onChange={(labelWithinInput) => setAttributes({ labelWithinInput })}
/>
(setAttributes({ mandatory }))}
+ onChange={(mandatory) => setAttributes({ mandatory })}
/>
(setAttributes({ styles }))}
+ onChange={(styles) => setAttributes({ styles })}
/>
);
diff --git a/mailpoet/assets/js/src/form_editor/blocks/map_custom_field_form_data.jsx b/mailpoet/assets/js/src/form_editor/blocks/map_custom_field_form_data.jsx
index 51ae75f4f7..a7ffb1f5a3 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/map_custom_field_form_data.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/map_custom_field_form_data.jsx
@@ -4,10 +4,12 @@ function mapFormDataToParams(fieldType, data) {
return {
label: data.label,
required: data.mandatory ? '1' : '',
- values: [{
- is_checked: data.isChecked ? '1' : '',
- value: data.checkboxLabel,
- }],
+ values: [
+ {
+ is_checked: data.isChecked ? '1' : '',
+ value: data.checkboxLabel,
+ },
+ ],
};
case 'date':
return {
diff --git a/mailpoet/assets/js/src/form_editor/blocks/segment_select/edit.jsx b/mailpoet/assets/js/src/form_editor/blocks/segment_select/edit.jsx
index d953d3b6f4..f4fcf9ba08 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/segment_select/edit.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/segment_select/edit.jsx
@@ -7,21 +7,35 @@ import ParagraphEdit from '../paragraph_edit.jsx';
import Settings from './settings.jsx';
function SegmentSelectEdit({ attributes, setAttributes }) {
- const segments = useSelect((sel) => sel('mailpoet-form-editor').getAllAvailableSegments(), []);
- const valuesWithNames = useMemo(() => attributes.values.map((value) => {
- const valueWithName = { ...value };
- const segment = segments.find((seg) => parseInt(seg.id, 10) === parseInt(value.id, 10));
- valueWithName.name = segment ? segment.name : '';
- return valueWithName;
- }), [attributes.values, segments]);
- const stripNamesFromValues = (values) => values.map((value) => {
- const valueWithoutName = { ...value };
- delete valueWithoutName.name;
- return valueWithoutName;
- });
+ const segments = useSelect(
+ (sel) => sel('mailpoet-form-editor').getAllAvailableSegments(),
+ [],
+ );
+ const valuesWithNames = useMemo(
+ () =>
+ attributes.values.map((value) => {
+ const valueWithName = { ...value };
+ const segment = segments.find(
+ (seg) => parseInt(seg.id, 10) === parseInt(value.id, 10),
+ );
+ valueWithName.name = segment ? segment.name : '';
+ return valueWithName;
+ }),
+ [attributes.values, segments],
+ );
+ const stripNamesFromValues = (values) =>
+ values.map((value) => {
+ const valueWithoutName = { ...value };
+ delete valueWithoutName.name;
+ return valueWithoutName;
+ });
const renderValues = () => {
if (attributes.values.length === 0) {
- return ({MailPoet.I18n.t('blockSegmentSelectNoLists')}
);
+ return (
+
+ {MailPoet.I18n.t('blockSegmentSelectNoLists')}
+
+ );
}
return valuesWithNames.map((value) => (
@@ -41,17 +55,21 @@ function SegmentSelectEdit({ attributes, setAttributes }) {
(setAttributes({ label }))}
+ onLabelChanged={(label) => setAttributes({ label })}
segmentsAddedIntoSelection={valuesWithNames}
- setNewSelection={(selection) => setAttributes({ values: stripNamesFromValues(selection) })}
- addSegmentIntoSelection={(newSegment) => setAttributes({
- values: stripNamesFromValues([
- ...attributes.values,
- newSegment,
- ]),
- })}
+ setNewSelection={(selection) =>
+ setAttributes({ values: stripNamesFromValues(selection) })
+ }
+ addSegmentIntoSelection={(newSegment) =>
+ setAttributes({
+ values: stripNamesFromValues([...attributes.values, newSegment]),
+ })
+ }
/>
-
+
{attributes.label}
{renderValues()}
@@ -63,10 +81,12 @@ SegmentSelectEdit.propTypes = {
attributes: PropTypes.shape({
label: PropTypes.string.isRequired,
className: PropTypes.string,
- values: PropTypes.arrayOf(PropTypes.shape({
- isChecked: PropTypes.bool,
- id: PropTypes.string.isRequired,
- })).isRequired,
+ values: PropTypes.arrayOf(
+ PropTypes.shape({
+ isChecked: PropTypes.bool,
+ id: PropTypes.string.isRequired,
+ }),
+ ).isRequired,
}).isRequired,
setAttributes: PropTypes.func.isRequired,
};
diff --git a/mailpoet/assets/js/src/form_editor/blocks/segment_select/settings.jsx b/mailpoet/assets/js/src/form_editor/blocks/segment_select/settings.jsx
index 7413030f4a..55db19fb03 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/segment_select/settings.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/segment_select/settings.jsx
@@ -12,7 +12,8 @@ import { useSelect } from '@wordpress/data';
import Preview from './settings_preview.jsx';
-const findSegment = (segments, segmentId) => segments.find((s) => s.id === segmentId);
+const findSegment = (segments, segmentId) =>
+ segments.find((s) => s.id === segmentId);
function SegmentSelectSettings({
label,
@@ -23,14 +24,17 @@ function SegmentSelectSettings({
}) {
const allSegments = useSelect(
(select) => select('mailpoet-form-editor').getAllAvailableSegments(),
- []
+ [],
);
- const segmentsListToBeAdded = allSegments.map((segment) => ({
- label: segment.name,
- value: segment.id,
- }))
- .filter((segment) => !findSegment(segmentsAddedIntoSelection, segment.value));
+ const segmentsListToBeAdded = allSegments
+ .map((segment) => ({
+ label: segment.name,
+ value: segment.id,
+ }))
+ .filter(
+ (segment) => !findSegment(segmentsAddedIntoSelection, segment.value),
+ );
const addSegment = (segmentId) => {
const segment = findSegment(allSegments, segmentId);
@@ -42,17 +46,19 @@ function SegmentSelectSettings({
};
const updateSegment = (segment) => {
- setNewSelection(segmentsAddedIntoSelection.map((segmentInSelection) => {
- if (segment.id !== segmentInSelection) {
- return segmentInSelection;
- }
- return segment;
- }));
+ setNewSelection(
+ segmentsAddedIntoSelection.map((segmentInSelection) => {
+ if (segment.id !== segmentInSelection) {
+ return segmentInSelection;
+ }
+ return segment;
+ }),
+ );
};
const removeSegment = (segmentId) => {
setNewSelection(
- segmentsAddedIntoSelection.filter((segment) => segmentId !== segment.id)
+ segmentsAddedIntoSelection.filter((segment) => segmentId !== segment.id),
);
};
@@ -101,11 +107,13 @@ SegmentSelectSettings.propTypes = {
onLabelChanged: PropTypes.func.isRequired,
addSegmentIntoSelection: PropTypes.func.isRequired,
setNewSelection: PropTypes.func.isRequired,
- segmentsAddedIntoSelection: PropTypes.arrayOf(PropTypes.shape({
- name: PropTypes.string.isRequired,
- isChecked: PropTypes.bool,
- id: PropTypes.string.isRequired,
- }).isRequired).isRequired,
+ segmentsAddedIntoSelection: PropTypes.arrayOf(
+ PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ isChecked: PropTypes.bool,
+ id: PropTypes.string.isRequired,
+ }).isRequired,
+ ).isRequired,
};
export default SegmentSelectSettings;
diff --git a/mailpoet/assets/js/src/form_editor/blocks/segment_select/settings_preview.jsx b/mailpoet/assets/js/src/form_editor/blocks/segment_select/settings_preview.jsx
index f86c4924f0..7f7a6cc190 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/segment_select/settings_preview.jsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/segment_select/settings_preview.jsx
@@ -4,16 +4,9 @@ import { CheckboxControl, Dashicon } from '@wordpress/components';
import { partial } from 'lodash';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
-function PreviewItem({
- segment,
- removeSegment,
- onCheck,
-}) {
+function PreviewItem({ segment, removeSegment, onCheck }) {
return (
-
+
(segmentsWhileMoved.map((segment, index) => (
-
- {(provided) => (
-
- )}
-
- )));
+ const renderItems = () =>
+ segmentsWhileMoved.map((segment, index) => (
+
+ {(provided) => (
+
+ )}
+
+ ));
return (
{(provided) => (
-
+
{renderItems()}
{provided.placeholder}
@@ -109,11 +100,13 @@ function Preview({
}
Preview.propTypes = {
- segments: PropTypes.arrayOf(PropTypes.shape({
- name: PropTypes.string.isRequired,
- isChecked: PropTypes.bool,
- id: PropTypes.string.isRequired,
- }).isRequired).isRequired,
+ segments: PropTypes.arrayOf(
+ PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ isChecked: PropTypes.bool,
+ id: PropTypes.string.isRequired,
+ }).isRequired,
+ ).isRequired,
updateSegment: PropTypes.func.isRequired,
removeSegment: PropTypes.func.isRequired,
onSegmentsReorder: PropTypes.func.isRequired,
diff --git a/mailpoet/assets/js/src/form_editor/blocks/submit/edit.tsx b/mailpoet/assets/js/src/form_editor/blocks/submit/edit.tsx
index a9446374c0..a4f98c53d6 100644
--- a/mailpoet/assets/js/src/form_editor/blocks/submit/edit.tsx
+++ b/mailpoet/assets/js/src/form_editor/blocks/submit/edit.tsx
@@ -1,9 +1,5 @@
import { CSSProperties } from 'react';
-import {
- Panel,
- PanelBody,
- TextControl,
-} from '@wordpress/components';
+import { Panel, PanelBody, TextControl } from '@wordpress/components';
import { InspectorControls } from '@wordpress/block-editor';
import MailPoet from 'mailpoet';
import classnames from 'classnames';
@@ -11,7 +7,10 @@ import { useSelect } from '@wordpress/data';
import ParagraphEdit from '../paragraph_edit.jsx';
import StylesSettings from './styles_settings';
-import { FormSettingsType, InputBlockStyles } from '../../store/form_data_types';
+import {
+ FormSettingsType,
+ InputBlockStyles,
+} from '../../store/form_data_types';
type Props = {
attributes: {
@@ -35,7 +34,7 @@ function SubmitEdit({ attributes, setAttributes }: Props): JSX.Element {
(setAttributes({ label }))}
+ onChange={(label): void => setAttributes({ label })}
data-automation-id="settings_submit_label_input"
/>
@@ -49,31 +48,50 @@ function SubmitEdit({ attributes, setAttributes }: Props): JSX.Element {
);
- const styles: CSSProperties = !attributes.styles.inheritFromTheme ? {
- fontWeight: attributes.styles.bold ? 'bold' : 'inherit',
- borderRadius: attributes.styles.borderRadius !== undefined ? `${attributes.styles.borderRadius}px` : 0,
- borderWidth: attributes.styles.borderSize !== undefined ? `${attributes.styles.borderSize}px` : '1px',
- borderColor: attributes.styles.borderColor || 'transparent',
- borderStyle: 'solid',
- fontSize: attributes.styles.fontSize ? `${attributes.styles.fontSize}px` : 'inherit',
- color: attributes.styles.fontColor || 'inherit',
- } : {};
+ const styles: CSSProperties = !attributes.styles.inheritFromTheme
+ ? {
+ fontWeight: attributes.styles.bold ? 'bold' : 'inherit',
+ borderRadius:
+ attributes.styles.borderRadius !== undefined
+ ? `${attributes.styles.borderRadius}px`
+ : 0,
+ borderWidth:
+ attributes.styles.borderSize !== undefined
+ ? `${attributes.styles.borderSize}px`
+ : '1px',
+ borderColor: attributes.styles.borderColor || 'transparent',
+ borderStyle: 'solid',
+ fontSize: attributes.styles.fontSize
+ ? `${attributes.styles.fontSize}px`
+ : 'inherit',
+ color: attributes.styles.fontColor || 'inherit',
+ }
+ : {};
if (attributes.styles.fullWidth) {
styles.width = '100%';
}
- if ((attributes.styles.padding !== undefined) && !attributes.styles.inheritFromTheme) {
+ if (
+ attributes.styles.padding !== undefined &&
+ !attributes.styles.inheritFromTheme
+ ) {
styles.padding = attributes.styles.padding;
} else if (settings.inputPadding !== undefined) {
styles.padding = settings.inputPadding;
}
- if (attributes.styles.backgroundColor && !attributes.styles.inheritFromTheme) {
+ if (
+ attributes.styles.backgroundColor &&
+ !attributes.styles.inheritFromTheme
+ ) {
styles.backgroundColor = attributes.styles.backgroundColor;
}
- if (attributes.styles.backgroundColor && !attributes.styles.inheritFromTheme) {
+ if (
+ attributes.styles.backgroundColor &&
+ !attributes.styles.inheritFromTheme
+ ) {
styles.backgroundColor = attributes.styles.backgroundColor;
}
@@ -86,11 +104,13 @@ function SubmitEdit({ attributes, setAttributes }: Props): JSX.Element {
styles.fontFamily = attributes.styles.fontFamily;
}
- const className = classnames('mailpoet_submit', { button: attributes.styles.inheritFromTheme });
+ const className = classnames('mailpoet_submit', {
+ button: attributes.styles.inheritFromTheme,
+ });
return (
- { inspectorControls }
+ {inspectorControls}
-
-
+
+
select('mailpoet-form-editor').getFormSettings(),
- []
+ [],
);
const input = useRef(null);
const id = `${name}_${Math.random().toString(36).substring(2, 15)}`;
const [value, setValue] = useState('');
- const labelStyles = !styles.inheritFromTheme ? {
- fontWeight: styles.bold ? 'bold' : 'inherit',
- } : {};
+ const labelStyles = !styles.inheritFromTheme
+ ? {
+ fontWeight: styles.bold ? 'bold' : 'inherit',
+ }
+ : {};
- const inputStyles = !styles.inheritFromTheme ? {
- borderRadius: styles.borderRadius ? `${styles.borderRadius}px` : 0,
- borderWidth: styles.borderSize !== undefined ? `${styles.borderSize}px` : '1px',
- borderColor: styles.borderColor || 'initial',
- borderStyle: 'solid',
- } : {};
+ const inputStyles = !styles.inheritFromTheme
+ ? {
+ borderRadius: styles.borderRadius ? `${styles.borderRadius}px` : 0,
+ borderWidth:
+ styles.borderSize !== undefined ? `${styles.borderSize}px` : '1px',
+ borderColor: styles.borderColor || 'initial',
+ borderStyle: 'solid',
+ }
+ : {};
if (settings.inputPadding !== undefined) {
inputStyles.padding = settings.inputPadding;
@@ -74,9 +79,7 @@ function TextInputEdit({
style += '}';
return (
<>
-
+
{!labelWithinInput ? (
-
+
{formatLabel({ label, mandatory })}
) : null}
diff --git a/mailpoet/assets/js/src/form_editor/components/_stories/size_settings.tsx b/mailpoet/assets/js/src/form_editor/components/_stories/size_settings.tsx
index 19602b14a7..ff5f4a5b6c 100644
--- a/mailpoet/assets/js/src/form_editor/components/_stories/size_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/_stories/size_settings.tsx
@@ -5,7 +5,7 @@ export default {
title: 'FormEditor/Size Settings',
};
-export function Settings() : JSX.Element {
+export function Settings(): JSX.Element {
return (
<>
void;
};
-function CloseButtonsSettings({
- name,
- value,
- onChange,
-}: Props) : JSX.Element {
+function CloseButtonsSettings({ name, value, onChange }: Props): JSX.Element {
const closeIconsUrl = useSelect(
(sel) => sel('mailpoet-form-editor').getCloseIconsUrl(),
[],
@@ -52,44 +48,60 @@ function CloseButtonsSettings({
return (
-
- {name}
-
+
{name}
onChange('round_white')}
/>
onChange('round_black')}
/>
onChange('square_white')}
/>
onChange('square_black')}
/>
onChange('classic')}
/>
onChange('classic_white')}
/>
@@ -97,7 +109,4 @@ function CloseButtonsSettings({
);
}
-export {
- CloseButtonsSettings,
- CloseButton,
-};
+export { CloseButtonsSettings, CloseButton };
diff --git a/mailpoet/assets/js/src/form_editor/components/color_gradient_settings.tsx b/mailpoet/assets/js/src/form_editor/components/color_gradient_settings.tsx
index b46a248668..65a9ad843c 100644
--- a/mailpoet/assets/js/src/form_editor/components/color_gradient_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/color_gradient_settings.tsx
@@ -15,7 +15,7 @@ function ColorGradientSettings({
gradientValue,
onColorChange,
onGradientChange,
-}: Props) : JSX.Element {
+}: Props): JSX.Element {
const settingsColors = useSetting('color.palette');
const settingsGradients = useSetting('color.gradients');
return (
diff --git a/mailpoet/assets/js/src/form_editor/components/color_settings.tsx b/mailpoet/assets/js/src/form_editor/components/color_settings.tsx
index a72c6687aa..f93ec3e72b 100644
--- a/mailpoet/assets/js/src/form_editor/components/color_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/color_settings.tsx
@@ -1,7 +1,4 @@
-import {
- ColorPalette,
- BaseControl,
-} from '@wordpress/components';
+import { ColorPalette, BaseControl } from '@wordpress/components';
import { useSetting } from '@wordpress/block-editor';
type Props = {
@@ -10,17 +7,11 @@ type Props = {
onChange: (value: string | undefined) => void;
};
-function ColorSettings({
- name,
- value,
- onChange,
-}: Props) : JSX.Element {
+function ColorSettings({ name, value, onChange }: Props): JSX.Element {
const settingsColors = useSetting('color.palette');
return (
-
- {name}
-
+
{name}
sel('mailpoet-form-editor').getSidebarOpened(),
- []
+ [],
);
const isInserterOpened = useSelect(
(sel) => sel('mailpoet-form-editor').isInserterOpened(),
- []
+ [],
);
const formBlocks = useSelect(
(sel) => sel('mailpoet-form-editor').getFormBlocks(),
- []
+ [],
);
const canUserUpload = useSelect(
(sel) => sel('core').canUser('create', 'media'),
- []
+ [],
);
const selectedBlock = useSelect(
(sel) => sel('core/block-editor').getSelectedBlock(),
- []
+ [],
);
const layoutClass = classnames(
@@ -70,10 +67,12 @@ export default function Editor() {
selectedBlock ? selectedBlock.name.replace('/', '-') : null,
{
'is-sidebar-opened': sidebarOpened,
- }
+ },
);
- const { blocksChangedInBlockEditor, toggleInserter } = useDispatch('mailpoet-form-editor');
+ const { blocksChangedInBlockEditor, toggleInserter } = useDispatch(
+ 'mailpoet-form-editor',
+ );
// Editor settings - see @wordpress/block-editor/src/store/defaults.js
const editorSettings = {
@@ -125,7 +124,7 @@ export default function Editor() {
settings={editorSettings}
useSubRegistry={false}
>
- {(isInserterOpened) && (
+ {isInserterOpened && (
@@ -148,7 +147,7 @@ export default function Editor() {
- {(sidebarOpened) && (
+ {sidebarOpened && (
diff --git a/mailpoet/assets/js/src/form_editor/components/feature_toggle.tsx b/mailpoet/assets/js/src/form_editor/components/feature_toggle.tsx
index d116093de0..9461801cb3 100644
--- a/mailpoet/assets/js/src/form_editor/components/feature_toggle.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/feature_toggle.tsx
@@ -14,7 +14,7 @@ function FeatureToggle({
label,
info,
onToggle,
-}: Props) : JSX.Element {
+}: Props): JSX.Element {
return (
select('mailpoet-form-editor').getAllCustomFonts(),
[],
@@ -82,7 +80,8 @@ function FontFamilySettings({
});
});
}
- let selectedValue = value !== undefined && options.find((item) => item.value === value);
+ let selectedValue =
+ value !== undefined && options.find((item) => item.value === value);
if (!selectedValue) {
selectedValue = options[0];
}
diff --git a/mailpoet/assets/js/src/form_editor/components/font_size_settings.tsx b/mailpoet/assets/js/src/form_editor/components/font_size_settings.tsx
index 769435878b..1e05607f39 100644
--- a/mailpoet/assets/js/src/form_editor/components/font_size_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/font_size_settings.tsx
@@ -1,6 +1,4 @@
-import {
- FontSizePicker,
-} from '@wordpress/components';
+import { FontSizePicker } from '@wordpress/components';
import { useSetting } from '@wordpress/block-editor';
type Props = {
@@ -8,17 +6,10 @@ type Props = {
onChange: (value: string | undefined) => void;
};
-function FontSizeSettings({
- value,
- onChange,
-}: Props) : JSX.Element {
+function FontSizeSettings({ value, onChange }: Props): JSX.Element {
const fontSizes = useSetting('typography.fontSizes');
return (
-
+
);
}
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/_stories/selection_item.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/_stories/selection_item.tsx
index 429619c868..fa07d27875 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/_stories/selection_item.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/_stories/selection_item.tsx
@@ -5,14 +5,10 @@ export default {
title: 'FormEditor/Selection Item',
};
-export function CloseIconSettings() : JSX.Element {
+export function CloseIconSettings(): JSX.Element {
return (
-
+
Inactive
Cannot Activate
-
+
Active
select('mailpoet-form-editor').getFormSettings(),
- []
+ [],
);
const segments = useSelect(
(select) => select('mailpoet-form-editor').getAllAvailableSegments(),
- []
+ [],
);
const pages = useSelect(
(select) => select('mailpoet-form-editor').getAllAvailablePages(),
- []
+ [],
);
const missingListError = useSelect(
(select) => select('mailpoet-form-editor').getNotice('missing-lists'),
- []
+ [],
);
const isFormEnabled = useSelect(
(select) => select('mailpoet-form-editor').isFormEnabled(),
- []
+ [],
);
- const { changeFormSettings, toggleForm } = useDispatch('mailpoet-form-editor');
+ const { changeFormSettings, toggleForm } = useDispatch(
+ 'mailpoet-form-editor',
+ );
const onSegmentsChange = (e) => {
// We don't want to update state when is same
@@ -77,12 +79,17 @@ function BasicSettingsPanel({ onToggle, isOpened }) {
};
const selectedSegments = settings.segments
- ? segments.filter((seg) => (settings.segments.includes(seg.id.toString())))
+ ? segments.filter((seg) => settings.segments.includes(seg.id.toString()))
: [];
- const shouldDisplayMissingListError = missingListError && !selectedSegments.length;
+ const shouldDisplayMissingListError =
+ missingListError && !selectedSegments.length;
return (
-
+
{shouldDisplayMissingListError ? (
- {MailPoet.I18n.t('settingsPleaseSelectList')}
- ) : null }
+
+ {MailPoet.I18n.t('settingsPleaseSelectList')}
+
+ ) : null}
(`${seg.name} (${parseInt(seg.subscribers, 10).toLocaleString()})`),
- filter: (seg) => (!!(!seg.deleted_at && seg.type === 'default')),
+ getLabel: (seg) =>
+ `${seg.name} (${parseInt(
+ seg.subscribers,
+ 10,
+ ).toLocaleString()})`,
+ filter: (seg) => !!(!seg.deleted_at && seg.type === 'default'),
}}
/>
@@ -131,7 +146,10 @@ function BasicSettingsPanel({ onToggle, isOpened }) {
{settings.on_success === 'page' ? (
({ value: page.id.toString(), label: page.title }))}
+ options={pages.map((page) => ({
+ value: page.id.toString(),
+ label: page.title,
+ }))}
onChange={onSuccessPageChange}
/>
) : (
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/codemirror_wrap.jsx b/mailpoet/assets/js/src/form_editor/components/form_settings/codemirror_wrap.jsx
index 40436fde78..87f15ab6ad 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/codemirror_wrap.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/codemirror_wrap.jsx
@@ -7,9 +7,12 @@ function CodemirrorWrap({ options, value, onChange }) {
const textArea = useRef(null);
const editor = useRef(null);
- const changeEvent = useCallback((doc) => {
- onChange(doc.getValue());
- }, [onChange]);
+ const changeEvent = useCallback(
+ (doc) => {
+ onChange(doc.getValue());
+ },
+ [onChange],
+ );
useEffect(() => {
editor.current = codemirror.fromTextArea(textArea.current, options);
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/custom_css_panel.jsx b/mailpoet/assets/js/src/form_editor/components/form_settings/custom_css_panel.jsx
index f319155a34..34f73e5f9d 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/custom_css_panel.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/custom_css_panel.jsx
@@ -1,7 +1,4 @@
-import {
- Panel,
- PanelBody,
-} from '@wordpress/components';
+import { Panel, PanelBody } from '@wordpress/components';
import MailPoet from 'mailpoet';
import { useSelect, useDispatch } from '@wordpress/data';
import PropTypes from 'prop-types';
@@ -10,14 +7,18 @@ import CodeMirror from './codemirror_wrap.jsx';
function CustomCssPanel({ onToggle, isOpened }) {
const styles = useSelect(
(select) => select('mailpoet-form-editor').getFormStyles(),
- []
+ [],
);
const { changeFormStyles } = useDispatch('mailpoet-form-editor');
return (
-
+
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx
index a7070f8a79..1bf629e1cb 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages.tsx
@@ -17,7 +17,7 @@ function BelowPages(): JSX.Element {
active={formSettings.formPlacement.belowPosts.enabled}
label={MailPoet.I18n.t('placeFormBellowPages')}
icon={Icon}
- onClick={(): void => (showPlacementSettings('below_post'))}
+ onClick={(): void => showPlacementSettings('below_post')}
canBeActive
/>
);
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/fixed_bar.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/fixed_bar.tsx
index c9d6648d8a..eadd0d1b1a 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/fixed_bar.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/fixed_bar.tsx
@@ -4,7 +4,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
import FormPlacementOption from './form_placement_option';
import Icon from './icons/fixed_bar_icon';
-function FixedBar():JSX.Element {
+function FixedBar(): JSX.Element {
const formSettings = useSelect(
(select) => select('mailpoet-form-editor').getFormSettings(),
[],
@@ -16,7 +16,7 @@ function FixedBar():JSX.Element {
active={formSettings.formPlacement.fixedBar.enabled}
label={MailPoet.I18n.t('placeFixedBarFormOnPages')}
icon={Icon}
- onClick={(): void => (showPlacementSettings('fixed_bar'))}
+ onClick={(): void => showPlacementSettings('fixed_bar')}
canBeActive
/>
);
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx
index 0f034f5fb0..79c5c45462 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx
@@ -14,7 +14,7 @@ function FormPlacementOption({
active,
canBeActive,
onClick,
-}: Props) : JSX.Element {
+}: Props): JSX.Element {
return (
-
- {icon}
-
+ {icon}
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/below_pages_icon.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/below_pages_icon.tsx
index ccb30cb683..b53446f794 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/below_pages_icon.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/below_pages_icon.tsx
@@ -1,25 +1,53 @@
-import {
- SVG,
- Path,
- Rect,
- G,
-} from '@wordpress/components';
+import { SVG, Path, Rect, G } from '@wordpress/components';
export default (
-
+
-
+
-
-
-
+
+
+
);
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/checkbox_icon.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/checkbox_icon.tsx
index 26b3ede7b1..db475a3568 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/checkbox_icon.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/checkbox_icon.tsx
@@ -1,13 +1,25 @@
-import {
- SVG,
- Path,
- G,
-} from '@wordpress/components';
+import { SVG, Path, G } from '@wordpress/components';
export default (
-
-
-
+
+
+
);
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/fixed_bar_icon.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/fixed_bar_icon.tsx
index c427c9456b..ee8613b7c6 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/fixed_bar_icon.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/fixed_bar_icon.tsx
@@ -1,22 +1,50 @@
-import {
- SVG,
- Path,
- Rect,
- G,
-} from '@wordpress/components';
+import { SVG, Path, Rect, G } from '@wordpress/components';
export default (
-
+
-
+
-
-
-
+
+
+
);
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/popup_icon.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/popup_icon.tsx
index 8f7fe9ea7c..a576d31b65 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/popup_icon.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/popup_icon.tsx
@@ -1,32 +1,81 @@
-import {
- SVG,
- Path,
- Rect,
- G,
-} from '@wordpress/components';
+import { SVG, Path, Rect, G } from '@wordpress/components';
export default (
-
+
-
-
-
+
-
+
-
-
-
+
+
+
);
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/settings_icon.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/settings_icon.tsx
index ef30a88521..b8feacecf8 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/settings_icon.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/settings_icon.tsx
@@ -1,14 +1,19 @@
-import {
- SVG,
- Path,
- G,
-} from '@wordpress/components';
+import { SVG, Path, G } from '@wordpress/components';
export default (
-
+
-
+
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/sidebar_icon.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/sidebar_icon.tsx
index 9f8e788c2d..334e8069c5 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/sidebar_icon.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/sidebar_icon.tsx
@@ -1,20 +1,56 @@
-import {
- SVG,
- Path,
- Rect,
- G,
-} from '@wordpress/components';
+import { SVG, Path, Rect, G } from '@wordpress/components';
export default (
-
+
-
-
-
-
-
+
-
+
-
+
-
-
-
-
+
+
+
+
-
);
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/slide_in_icon.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/slide_in_icon.tsx
index 153d739aae..2f3b8c116d 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/slide_in_icon.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/icons/slide_in_icon.tsx
@@ -1,42 +1,110 @@
-import {
- SVG,
- Path,
- Rect,
- G,
-} from '@wordpress/components';
+import { SVG, Path, Rect, G } from '@wordpress/components';
export default (
-
+
-
+
-
-
+
+
-
+
-
-
+
+
-
-
+
+
-
+
-
+
-
-
-
+
+
+
-
);
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/other.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/other.tsx
index f99602d388..1b3ca129ef 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/other.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/other.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from '@wordpress/data';
import Icon from './icons/sidebar_icon';
import FormPlacementOption from './form_placement_option';
-function Other() : JSX.Element {
+function Other(): JSX.Element {
const { showPlacementSettings } = useDispatch('mailpoet-form-editor');
return (
@@ -11,7 +11,7 @@ function Other() : JSX.Element {
active={false}
label={MailPoet.I18n.t('formPlacementOtherLabel')}
icon={Icon}
- onClick={(): void => (showPlacementSettings('others'))}
+ onClick={(): void => showPlacementSettings('others')}
canBeActive={false}
/>
);
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/popup.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/popup.tsx
index ae286bf6f8..dbfa7fd98b 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/popup.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/popup.tsx
@@ -4,7 +4,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
import FormPlacementOption from './form_placement_option';
import Icon from './icons/popup_icon';
-function Popup() : JSX.Element {
+function Popup(): JSX.Element {
const formSettings = useSelect(
(select) => select('mailpoet-form-editor').getFormSettings(),
[],
@@ -16,7 +16,7 @@ function Popup() : JSX.Element {
active={formSettings.formPlacement.popup.enabled}
label={MailPoet.I18n.t('placePopupFormOnPages')}
icon={Icon}
- onClick={(): void => (showPlacementSettings('popup'))}
+ onClick={(): void => showPlacementSettings('popup')}
canBeActive
/>
);
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panel.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panel.tsx
index ef61f47dee..0c05f36b03 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panel.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panel.tsx
@@ -8,7 +8,7 @@ type Props = {
activePanel: string;
};
-function SettingsPanel({ activePanel }: Props) : JSX.Element {
+function SettingsPanel({ activePanel }: Props): JSX.Element {
return (
{activePanel === 'others' &&
}
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/animation_settings.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/animation_settings.tsx
index 297f137a46..03ec875f6e 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/animation_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/animation_settings.tsx
@@ -7,7 +7,7 @@ type Props = {
settingsPlacementKey: string;
};
-function AnimationSettings({ settingsPlacementKey }: Props) : JSX.Element {
+function AnimationSettings({ settingsPlacementKey }: Props): JSX.Element {
const formSettings = useSelect(
(select) => select('mailpoet-form-editor').getFormSettings(),
[],
@@ -29,7 +29,14 @@ function AnimationSettings({ settingsPlacementKey }: Props) : JSX.Element {
{ label: 'Zoom In', value: 'zoomin' },
{ label: 'Flip', value: 'flip' },
]}
- onChange={compose([changeFormSettings, assocPath(`formPlacement.${settingsPlacementKey}.animation`, __, formSettings)])}
+ onChange={compose([
+ changeFormSettings,
+ assocPath(
+ `formPlacement.${settingsPlacementKey}.animation`,
+ __,
+ formSettings,
+ ),
+ ])}
/>
);
}
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/below_posts_settings.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/below_posts_settings.tsx
index 6824bf012f..f2bc607658 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/below_posts_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/below_posts_settings.tsx
@@ -5,7 +5,7 @@ import { assocPath, compose, __ } from 'lodash/fp';
import { SizeSettings } from 'form_editor/components/size_settings';
import PlacementSettings from './placement_settings';
-function BelowPostsSettings() : JSX.Element {
+function BelowPostsSettings(): JSX.Element {
const formSettings = useSelect(
(select) => select('mailpoet-form-editor').getFormSettings(),
[],
@@ -20,7 +20,10 @@ function BelowPostsSettings() : JSX.Element {
{isActive && (
<>
@@ -33,9 +36,15 @@ function BelowPostsSettings() : JSX.Element {
maxPercents={100}
defaultPixelValue={560}
defaultPercentValue={100}
- onChange={(width): void => (
- changeFormSettings(assocPath('formPlacement.belowPosts.styles.width', width, formSettings))
- )}
+ onChange={(width): void =>
+ changeFormSettings(
+ assocPath(
+ 'formPlacement.belowPosts.styles.width',
+ width,
+ formSettings,
+ ),
+ )
+ }
/>
>
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/cookie_settings.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/cookie_settings.tsx
index aaaee0fb79..111d4275e2 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/cookie_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/cookie_settings.tsx
@@ -20,13 +20,30 @@ function CookieSettings({ settingsPlacementKey }: Props): JSX.Element {
label={MailPoet.I18n.t('formPlacementCookieExpiration')}
value={formSettings.formPlacement[settingsPlacementKey].cookieExpiration}
options={[
- { value: 0, label: MailPoet.I18n.t('formPlacementCookieExpirationAlways') },
- { value: 1, label: MailPoet.I18n.t('formPlacementCookieExpirationDay') },
+ {
+ value: 0,
+ label: MailPoet.I18n.t('formPlacementCookieExpirationAlways'),
+ },
+ {
+ value: 1,
+ label: MailPoet.I18n.t('formPlacementCookieExpirationDay'),
+ },
...cookieExpirationValues.map((cookieExpirationValue) => ({
value: cookieExpirationValue,
- label: MailPoet.I18n.t('formPlacementCookieExpirationDays').replace('%1s', cookieExpirationValue.toString()),
- }))]}
- onChange={compose([changeFormSettings, assocPath(`formPlacement.${settingsPlacementKey}.cookieExpiration`, __, formSettings)])}
+ label: MailPoet.I18n.t('formPlacementCookieExpirationDays').replace(
+ '%1s',
+ cookieExpirationValue.toString(),
+ ),
+ })),
+ ]}
+ onChange={compose([
+ changeFormSettings,
+ assocPath(
+ `formPlacement.${settingsPlacementKey}.cookieExpiration`,
+ __,
+ formSettings,
+ ),
+ ])}
/>
);
}
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/fixed_bar_settings.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/fixed_bar_settings.tsx
index 209b59a027..e0725e2d0f 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/fixed_bar_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/fixed_bar_settings.tsx
@@ -1,6 +1,10 @@
import MailPoet from 'mailpoet';
import { useSelect, useDispatch } from '@wordpress/data';
-import { SelectControl, RadioControl, ToggleControl } from '@wordpress/components';
+import {
+ SelectControl,
+ RadioControl,
+ ToggleControl,
+} from '@wordpress/components';
import { assocPath, compose, __ } from 'lodash/fp';
import { SizeSettings } from 'form_editor/components/size_settings';
import AnimationSettings from './animation_settings';
@@ -9,7 +13,7 @@ import CookieSettings from './cookie_settings';
const delayValues = [0, 2, 5, 10, 15, 30, 45, 60, 120, 180, 240];
-function FixedBarSettings() : JSX.Element {
+function FixedBarSettings(): JSX.Element {
const formSettings = useSelect(
(select) => select('mailpoet-form-editor').getFormSettings(),
[],
@@ -24,7 +28,10 @@ function FixedBarSettings() : JSX.Element {
{isActive && (
<>
@@ -33,10 +40,19 @@ function FixedBarSettings() : JSX.Element {
label={MailPoet.I18n.t('formPlacementPlacementPosition')}
selected={formSettings.formPlacement.fixedBar.position}
options={[
- { label: MailPoet.I18n.t('formPlacementPlacementPositionTop'), value: 'top' },
- { label: MailPoet.I18n.t('formPlacementPlacementPositionBottom'), value: 'bottom' },
+ {
+ label: MailPoet.I18n.t('formPlacementPlacementPositionTop'),
+ value: 'top',
+ },
+ {
+ label: MailPoet.I18n.t('formPlacementPlacementPositionBottom'),
+ value: 'bottom',
+ },
]}
- onChange={compose([changeFormSettings, assocPath('formPlacement.fixedBar.position', __, formSettings)])}
+ onChange={compose([
+ changeFormSettings,
+ assocPath('formPlacement.fixedBar.position', __, formSettings),
+ ])}
/>
(
- changeFormSettings(assocPath('formPlacement.fixedBar.styles.width', width, formSettings))
- )}
+ onChange={(width): void =>
+ changeFormSettings(
+ assocPath(
+ 'formPlacement.fixedBar.styles.width',
+ width,
+ formSettings,
+ ),
+ )
+ }
/>
({
value: delayValue,
- label: MailPoet.I18n.t('formPlacementDelaySeconds').replace('%1s', `${delayValue}`),
+ label: MailPoet.I18n.t('formPlacementDelaySeconds').replace(
+ '%1s',
+ `${delayValue}`,
+ ),
}))}
/>
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/other_settings.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/other_settings.tsx
index 34b9e55fb3..55b28d28cf 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/other_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/other_settings.tsx
@@ -7,7 +7,7 @@ import { assocPath } from 'lodash/fp';
import { TextareaControl } from '@wordpress/components';
import { SizeSettings } from 'form_editor/components/size_settings';
-function OtherSettings():JSX.Element {
+function OtherSettings(): JSX.Element {
const [copyAreaContent, setCopyAreaContent] = useState(null);
const formExports = useSelect(
@@ -30,14 +30,16 @@ function OtherSettings():JSX.Element {
MailPoet.I18n.t('addFormWidgetHint'),
/\[link](.*?)\[\/link]/g,
(match) => (
- {match}
+
+ {match}
+
),
);
const addFormShortcodeHint = ReactStringReplace(
MailPoet.I18n.t('addFormShortcodeHint'),
/\[shortcode]/g,
- (match) => ({formExports.shortcode}
),
+ (match) => {formExports.shortcode}
,
);
const exportLinkClicked = curry((type, event) => {
@@ -56,9 +58,17 @@ function OtherSettings():JSX.Element {
/\[link](.*?)\[\/link]/g,
(match) => {
if (match === 'PHP') {
- return ({match} );
+ return (
+
+ {match}
+
+ );
}
- return ({match} );
+ return (
+
+ {match}
+
+ );
},
);
@@ -68,7 +78,7 @@ function OtherSettings():JSX.Element {
(event.target.select())}
+ onClick={(event): void => event.target.select()}
rows={8}
value={copyAreaContent}
/>
@@ -76,9 +86,7 @@ function OtherSettings():JSX.Element {
};
if (!isFormSaved) {
- return (
- {MailPoet.I18n.t('saveFormFirst')}
- );
+ return {MailPoet.I18n.t('saveFormFirst')}
;
}
return (
@@ -97,9 +105,11 @@ function OtherSettings():JSX.Element {
maxPercents={100}
defaultPixelValue={200}
defaultPercentValue={100}
- onChange={(width): void => (
- changeFormSettings(assocPath('formPlacement.others.styles.width', width, formSettings))
- )}
+ onChange={(width): void =>
+ changeFormSettings(
+ assocPath('formPlacement.others.styles.width', width, formSettings),
+ )
+ }
/>
>
);
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/placement_settings.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/placement_settings.tsx
index c0f6e27616..2bb4157bd7 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/placement_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/placement_settings.tsx
@@ -1,44 +1,52 @@
import MailPoet from 'mailpoet';
import { useSelect, useDispatch } from '@wordpress/data';
import { ToggleControl } from '@wordpress/components';
-import {
- assocPath,
- compose,
- cond,
- isEqual,
- identity,
- sortBy,
-} from 'lodash/fp';
+import { assocPath, compose, cond, isEqual, identity, sortBy } from 'lodash/fp';
import Selection from '../../selection';
type Props = {
settingsPlacementKey: string;
};
-function PlacementSettings({ settingsPlacementKey }: Props) : JSX.Element {
+function PlacementSettings({ settingsPlacementKey }: Props): JSX.Element {
const formSettings = useSelect(
(select) => select('mailpoet-form-editor').getFormSettings(),
[],
);
- const tags = useSelect((select) => sortBy(
- 'name',
- select('mailpoet-form-editor').getAllWPTags()
- .concat(select('mailpoet-form-editor').getAllWooCommerceTags()),
- ), []);
- const categories = useSelect((select) => sortBy(
- 'name',
- select('mailpoet-form-editor').getAllWPCategories()
- .concat(select('mailpoet-form-editor').getAllWooCommerceCategories()),
- ), []);
+ const tags = useSelect(
+ (select) =>
+ sortBy(
+ 'name',
+ select('mailpoet-form-editor')
+ .getAllWPTags()
+ .concat(select('mailpoet-form-editor').getAllWooCommerceTags()),
+ ),
+ [],
+ );
+ const categories = useSelect(
+ (select) =>
+ sortBy(
+ 'name',
+ select('mailpoet-form-editor')
+ .getAllWPCategories()
+ .concat(select('mailpoet-form-editor').getAllWooCommerceCategories()),
+ ),
+ [],
+ );
const pages = useSelect(
(select) => select('mailpoet-form-editor').getAllWPPages(),
[],
);
- const posts = useSelect((select) => sortBy(
- 'name',
- select('mailpoet-form-editor').getAllWPPosts()
- .concat(select('mailpoet-form-editor').getAllWooCommerceProducts()),
- ), []);
+ const posts = useSelect(
+ (select) =>
+ sortBy(
+ 'name',
+ select('mailpoet-form-editor')
+ .getAllWPPosts()
+ .concat(select('mailpoet-form-editor').getAllWooCommerceProducts()),
+ ),
+ [],
+ );
const isPreviewShown = useSelect(
(select) => select('mailpoet-form-editor').getIsPreviewShown(),
[],
@@ -58,14 +66,23 @@ function PlacementSettings({ settingsPlacementKey }: Props) : JSX.Element {
onChange={(newValue): void => {
compose([
changeFormSettings,
- assocPath(`formPlacement.${settingsPlacementKey}.pages.all`, newValue),
+ assocPath(
+ `formPlacement.${settingsPlacementKey}.pages.all`,
+ newValue,
+ ),
cond([
[
// condition, if the predicate function is true the next compose is run
(): boolean => newValue,
compose([
- assocPath(`formPlacement.${settingsPlacementKey}.pages.selected`, []), // if enabled clear selected pages
- assocPath(`formPlacement.${settingsPlacementKey}.categories`, []), // if enabled clear selected categories
+ assocPath(
+ `formPlacement.${settingsPlacementKey}.pages.selected`,
+ [],
+ ), // if enabled clear selected pages
+ assocPath(
+ `formPlacement.${settingsPlacementKey}.categories`,
+ [],
+ ), // if enabled clear selected categories
assocPath(`formPlacement.${settingsPlacementKey}.tags`, []), // if enabled clear selected tags
]),
],
@@ -77,23 +94,34 @@ function PlacementSettings({ settingsPlacementKey }: Props) : JSX.Element {
{
- const selected = formSettings.formPlacement[settingsPlacementKey].pages.selected;
+ const selected =
+ formSettings.formPlacement[settingsPlacementKey].pages.selected;
if (isEqual(selected, e.target.value)) {
return;
}
compose([
changeFormSettings,
- assocPath(`formPlacement.${settingsPlacementKey}.pages.selected`, e.target.value),
+ assocPath(
+ `formPlacement.${settingsPlacementKey}.pages.selected`,
+ e.target.value,
+ ),
cond([
[
// only disable "All pages" toggle if not empty
(): boolean => !!e.target.value.length,
- assocPath(`formPlacement.${settingsPlacementKey}.pages.all`, false), // disable all if some pages are selected
+ assocPath(
+ `formPlacement.${settingsPlacementKey}.pages.all`,
+ false,
+ ), // disable all if some pages are selected
],
[(): boolean => !e.target.value.length, identity],
]),
@@ -106,7 +134,8 @@ function PlacementSettings({ settingsPlacementKey }: Props) : JSX.Element {
multiple: true,
placeholder: MailPoet.I18n.t('selectPage'),
getLabel: (page): void => page.name,
- selected: (): void => formSettings.formPlacement[settingsPlacementKey].pages.selected,
+ selected: (): void =>
+ formSettings.formPlacement[settingsPlacementKey].pages.selected,
}}
/>
@@ -117,13 +146,22 @@ function PlacementSettings({ settingsPlacementKey }: Props) : JSX.Element {
onChange={(newValue): void => {
compose([
changeFormSettings,
- assocPath(`formPlacement.${settingsPlacementKey}.posts.all`, newValue),
+ assocPath(
+ `formPlacement.${settingsPlacementKey}.posts.all`,
+ newValue,
+ ),
cond([
[
(): boolean => newValue,
compose([
- assocPath(`formPlacement.${settingsPlacementKey}.posts.selected`, []), // if enabled clear selected pages
- assocPath(`formPlacement.${settingsPlacementKey}.categories`, []), // if enabled clear selected categories
+ assocPath(
+ `formPlacement.${settingsPlacementKey}.posts.selected`,
+ [],
+ ), // if enabled clear selected pages
+ assocPath(
+ `formPlacement.${settingsPlacementKey}.categories`,
+ [],
+ ), // if enabled clear selected categories
assocPath(`formPlacement.${settingsPlacementKey}.tags`, []), // if enabled clear selected tags
]),
],
@@ -134,23 +172,34 @@ function PlacementSettings({ settingsPlacementKey }: Props) : JSX.Element {
/>
{
- const selected = formSettings.formPlacement[settingsPlacementKey].posts.selected;
+ const selected =
+ formSettings.formPlacement[settingsPlacementKey].posts.selected;
if (isEqual(selected, e.target.value)) {
return;
}
compose([
changeFormSettings,
- assocPath(`formPlacement.${settingsPlacementKey}.posts.selected`, e.target.value),
+ assocPath(
+ `formPlacement.${settingsPlacementKey}.posts.selected`,
+ e.target.value,
+ ),
cond([
[
// only disable "All pages" toggle if not empty
(): boolean => !!e.target.value.length,
- assocPath(`formPlacement.${settingsPlacementKey}.posts.all`, false), // disable all if some pages are selected
+ assocPath(
+ `formPlacement.${settingsPlacementKey}.posts.all`,
+ false,
+ ), // disable all if some pages are selected
],
[(): boolean => !e.target.value.length, identity],
]),
@@ -163,35 +212,50 @@ function PlacementSettings({ settingsPlacementKey }: Props) : JSX.Element {
multiple: true,
placeholder: MailPoet.I18n.t('selectPage'),
getLabel: (page): string => page.name,
- selected: (): Array => (
- formSettings.formPlacement[settingsPlacementKey].posts.selected
- ),
+ selected: (): Array =>
+ formSettings.formPlacement[settingsPlacementKey].posts.selected,
}}
/>
-
{MailPoet.I18n.t('displayOnCategories')}
+
+ {MailPoet.I18n.t('displayOnCategories')}
+
{
- const selected = formSettings.formPlacement[settingsPlacementKey].categories;
+ const selected =
+ formSettings.formPlacement[settingsPlacementKey].categories;
if (isEqual(selected, e.target.value)) {
return;
}
compose([
changeFormSettings,
- assocPath(`formPlacement.${settingsPlacementKey}.categories`, e.target.value),
+ assocPath(
+ `formPlacement.${settingsPlacementKey}.categories`,
+ e.target.value,
+ ),
cond([
[
// only disable "All pages" toggle if not empty
(): boolean => !!e.target.value.length,
compose([
- assocPath(`formPlacement.${settingsPlacementKey}.pages.all`, false),
- assocPath(`formPlacement.${settingsPlacementKey}.posts.all`, false), // disable all if some posts are selected
+ assocPath(
+ `formPlacement.${settingsPlacementKey}.pages.all`,
+ false,
+ ),
+ assocPath(
+ `formPlacement.${settingsPlacementKey}.posts.all`,
+ false,
+ ), // disable all if some posts are selected
]),
],
[(): boolean => !e.target.value.length, identity],
@@ -205,36 +269,51 @@ function PlacementSettings({ settingsPlacementKey }: Props) : JSX.Element {
multiple: true,
placeholder: MailPoet.I18n.t('selectPage'),
getLabel: (category): string => category.name,
- selected: (): Array => (
- formSettings.formPlacement[settingsPlacementKey].categories
- ),
+ selected: (): Array =>
+ formSettings.formPlacement[settingsPlacementKey].categories,
}}
/>
-
{MailPoet.I18n.t('displayOnTags')}
+
+ {MailPoet.I18n.t('displayOnTags')}
+
{
- const selected = formSettings.formPlacement[settingsPlacementKey].tags;
+ const selected =
+ formSettings.formPlacement[settingsPlacementKey].tags;
if (isEqual(selected, e.target.value)) {
return;
}
compose([
changeFormSettings,
- assocPath(`formPlacement.${settingsPlacementKey}.tags`, e.target.value),
+ assocPath(
+ `formPlacement.${settingsPlacementKey}.tags`,
+ e.target.value,
+ ),
cond([
[
// only disable "All pages" toggle if not empty
(): boolean => !!e.target.value.length,
compose([
- assocPath(`formPlacement.${settingsPlacementKey}.pages.all`, false),
- assocPath(`formPlacement.${settingsPlacementKey}.posts.all`, false), // disable all if some posts are selected
+ assocPath(
+ `formPlacement.${settingsPlacementKey}.pages.all`,
+ false,
+ ),
+ assocPath(
+ `formPlacement.${settingsPlacementKey}.posts.all`,
+ false,
+ ), // disable all if some posts are selected
]),
],
[(): boolean => !e.target.value.length, identity],
@@ -248,7 +327,8 @@ function PlacementSettings({ settingsPlacementKey }: Props) : JSX.Element {
multiple: true,
placeholder: MailPoet.I18n.t('selectPage'),
getLabel: (tag): string => tag.name,
- selected: (): Array => formSettings.formPlacement[settingsPlacementKey].tags,
+ selected: (): Array =>
+ formSettings.formPlacement[settingsPlacementKey].tags,
}}
/>
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/popup_settings.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/popup_settings.tsx
index c73da4c03f..b4daedeefa 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/popup_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/popup_settings.tsx
@@ -9,7 +9,7 @@ import CookieSettings from './cookie_settings';
const delayValues = [0, 2, 5, 10, 15, 30, 45, 60, 120, 180, 240];
-function PopUpSettings() : JSX.Element {
+function PopUpSettings(): JSX.Element {
const formSettings = useSelect(
(select) => select('mailpoet-form-editor').getFormSettings(),
[],
@@ -25,7 +25,10 @@ function PopUpSettings() : JSX.Element {
{isActive && (
<>
@@ -39,29 +42,50 @@ function PopUpSettings() : JSX.Element {
maxPercents={100}
defaultPixelValue={560}
defaultPercentValue={100}
- onChange={(width): void => (
- changeFormSettings(assocPath('formPlacement.popup.styles.width', width, formSettings))
- )}
+ onChange={(width): void =>
+ changeFormSettings(
+ assocPath(
+ 'formPlacement.popup.styles.width',
+ width,
+ formSettings,
+ ),
+ )
+ }
/>
({
value: delayValue,
- label: MailPoet.I18n.t('formPlacementDelaySeconds').replace('%1s', `${delayValue}`),
+ label: MailPoet.I18n.t('formPlacementDelaySeconds').replace(
+ '%1s',
+ `${delayValue}`,
+ ),
}))}
/>
-
{MailPoet.I18n.t('exitIntentTitle')}
+
+ {MailPoet.I18n.t('exitIntentTitle')}
+
{MailPoet.I18n.t('exitIntentDescription')}
>
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/slide_in_settings.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/slide_in_settings.tsx
index 031c90c45e..79e2d99936 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/slide_in_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/settings_panels/slide_in_settings.tsx
@@ -1,6 +1,10 @@
import MailPoet from 'mailpoet';
import { useSelect, useDispatch } from '@wordpress/data';
-import { SelectControl, RadioControl, ToggleControl } from '@wordpress/components';
+import {
+ SelectControl,
+ RadioControl,
+ ToggleControl,
+} from '@wordpress/components';
import { assocPath, compose, __ } from 'lodash/fp';
import { SizeSettings } from 'form_editor/components/size_settings';
import AnimationSettings from './animation_settings';
@@ -9,7 +13,7 @@ import CookieSettings from './cookie_settings';
const delayValues = [0, 2, 5, 10, 15, 30, 45, 60, 120, 180, 240];
-function SlideInSettings():JSX.Element {
+function SlideInSettings(): JSX.Element {
const formSettings = useSelect(
(select) => select('mailpoet-form-editor').getFormSettings(),
[],
@@ -24,7 +28,10 @@ function SlideInSettings():JSX.Element {
{isActive && (
<>
@@ -33,10 +40,19 @@ function SlideInSettings():JSX.Element {
label={MailPoet.I18n.t('formPlacementPlacementPosition')}
selected={formSettings.formPlacement.slideIn.position}
options={[
- { label: MailPoet.I18n.t('formPlacementPlacementPositionLeft'), value: 'left' },
- { label: MailPoet.I18n.t('formPlacementPlacementPositionRight'), value: 'right' },
+ {
+ label: MailPoet.I18n.t('formPlacementPlacementPositionLeft'),
+ value: 'left',
+ },
+ {
+ label: MailPoet.I18n.t('formPlacementPlacementPositionRight'),
+ value: 'right',
+ },
]}
- onChange={compose([changeFormSettings, assocPath('formPlacement.slideIn.position', __, formSettings)])}
+ onChange={compose([
+ changeFormSettings,
+ assocPath('formPlacement.slideIn.position', __, formSettings),
+ ])}
/>
(
- changeFormSettings(assocPath('formPlacement.slideIn.styles.width', width, formSettings))
- )}
+ onChange={(width): void =>
+ changeFormSettings(
+ assocPath(
+ 'formPlacement.slideIn.styles.width',
+ width,
+ formSettings,
+ ),
+ )
+ }
/>
({
value: delayValue,
- label: MailPoet.I18n.t('formPlacementDelaySeconds').replace('%1s', `${delayValue}`),
+ label: MailPoet.I18n.t('formPlacementDelaySeconds').replace(
+ '%1s',
+ `${delayValue}`,
+ ),
}))}
/>
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/slide_in.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/slide_in.tsx
index 117536ab50..a8665d9696 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/slide_in.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_options/slide_in.tsx
@@ -4,7 +4,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
import Icon from './icons/slide_in_icon';
import FormPlacementOption from './form_placement_option';
-function SlideIn():JSX.Element {
+function SlideIn(): JSX.Element {
const formSettings = useSelect(
(select) => select('mailpoet-form-editor').getFormSettings(),
[],
@@ -16,7 +16,7 @@ function SlideIn():JSX.Element {
active={formSettings.formPlacement.slideIn.enabled}
label={MailPoet.I18n.t('placeSlideInFormOnPages')}
icon={Icon}
- onClick={(): void => (showPlacementSettings('slide_in'))}
+ onClick={(): void => showPlacementSettings('slide_in')}
canBeActive
/>
);
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_panel.jsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_panel.jsx
index 9d6f2b4820..c5497775db 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_panel.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_placement_panel.jsx
@@ -1,7 +1,4 @@
-import {
- Panel,
- PanelBody,
-} from '@wordpress/components';
+import { Panel, PanelBody } from '@wordpress/components';
import MailPoet from 'mailpoet';
import PropTypes from 'prop-types';
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/form_settings.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/form_settings.tsx
index 3a3982f996..745a2d815e 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/form_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/form_settings.tsx
@@ -7,7 +7,8 @@ import CustomCssPanel from './custom_css_panel';
export default function FormSettings(): JSX.Element {
const dispatchResult = useDispatch('mailpoet-form-editor');
- const toggleSidebarPanel:(t1: string, ...ts: []) => void = dispatchResult.toggleSidebarPanel;
+ const toggleSidebarPanel: (t1: string, ...ts: []) => void =
+ dispatchResult.toggleSidebarPanel;
const openedPanels = useSelect(
(select) => select('mailpoet-form-editor').getSidebarOpenedPanels(),
[],
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/selection.jsx b/mailpoet/assets/js/src/form_editor/components/form_settings/selection.jsx
index 9a7b900304..651bd2ba04 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/selection.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/selection.jsx
@@ -18,8 +18,10 @@ class Selection extends Component {
}
componentDidUpdate(prevProps) {
- if ((this.props.item !== undefined && prevProps.item !== undefined)
- && (this.props.item.id !== prevProps.item.id)
+ if (
+ this.props.item !== undefined &&
+ prevProps.item !== undefined &&
+ this.props.item.id !== prevProps.item.id
) {
jQuery(`#${this.selectRef.current.id}`)
.val(this.getSelectedValues())
@@ -30,19 +32,24 @@ class Selection extends Component {
// It happened only when component allowed multipleValues
// Following lines are modified lines on top for multipeValues
if (
- (this.props.item !== undefined && prevProps.item !== undefined)
- && this.allowMultipleValues()
- && _.isArray(this.props.item[this.props.field.name])
- && !_.isEqual(this.props.item[this.props.field.name], prevProps.item[this.props.field.name])
+ this.props.item !== undefined &&
+ prevProps.item !== undefined &&
+ this.allowMultipleValues() &&
+ _.isArray(this.props.item[this.props.field.name]) &&
+ !_.isEqual(
+ this.props.item[this.props.field.name],
+ prevProps.item[this.props.field.name],
+ )
) {
jQuery(`#${this.selectRef.current.id}`)
.val(this.getSelectedValues())
.trigger('change');
}
- if (this.isSelect2Initialized()
- && (this.getFieldId(this.props) !== this.getFieldId(prevProps))
- && this.props.field.resetSelect2OnUpdate !== undefined
+ if (
+ this.isSelect2Initialized() &&
+ this.getFieldId(this.props) !== this.getFieldId(prevProps) &&
+ this.props.field.resetSelect2OnUpdate !== undefined
) {
this.resetSelect2();
}
@@ -77,7 +84,9 @@ class Selection extends Component {
getItems = () => {
let items;
- if (typeof (window[`mailpoet_${this.props.field.endpoint}`]) !== 'undefined') {
+ if (
+ typeof window[`mailpoet_${this.props.field.endpoint}`] !== 'undefined'
+ ) {
items = window[`mailpoet_${this.props.field.endpoint}`];
} else if (this.props.field.values !== undefined) {
items = this.props.field.values;
@@ -120,7 +129,7 @@ class Selection extends Component {
let select2Options = {
disabled: this.props.disabled || false,
- width: (this.props.width || ''),
+ width: this.props.width || '',
placeholder: {
id: '', // the value of the option
text: this.props.field.placeholder,
@@ -153,10 +162,7 @@ class Selection extends Component {
token: window.mailpoet_token,
endpoint: remoteQuery.endpoint,
method: remoteQuery.method,
- data: Object.assign(
- remoteQuery.data,
- { query: params.term }
- ),
+ data: Object.assign(remoteQuery.data, { query: params.term }),
};
},
processResults: function processResults(response) {
@@ -178,10 +184,15 @@ class Selection extends Component {
}
if (this.props.field.extendSelect2Options !== undefined) {
- select2Options = Object.assign(select2Options, this.props.field.extendSelect2Options);
+ select2Options = Object.assign(
+ select2Options,
+ this.props.field.extendSelect2Options,
+ );
}
- const select2 = jQuery(`#${this.selectRef.current.id}`).select2(select2Options);
+ const select2 = jQuery(`#${this.selectRef.current.id}`).select2(
+ select2Options,
+ );
let hasRemoved = false;
select2.on('select2:unselecting', () => {
@@ -221,19 +232,27 @@ class Selection extends Component {
.off('select2:opening');
};
- allowMultipleValues = () => (this.props.field.multiple === true);
+ allowMultipleValues = () => this.props.field.multiple === true;
- isSelect2Initialized = () => (jQuery(`#${this.selectRef.current.id}`).hasClass('select2-hidden-accessible') === true);
+ isSelect2Initialized = () =>
+ jQuery(`#${this.selectRef.current.id}`).hasClass(
+ 'select2-hidden-accessible',
+ ) === true;
- isSelect2Component = () => this.allowMultipleValues() || this.props.field.forceSelect2;
+ isSelect2Component = () =>
+ this.allowMultipleValues() || this.props.field.forceSelect2;
handleChange = (e) => {
if (this.props.onValueChange === undefined) return;
- const valueTextPair = jQuery(`#${this.selectRef.current.id}`).children(':selected').map(function element() {
- return { id: jQuery(this).val(), text: jQuery(this).text() };
- });
- const value = (this.props.field.multiple) ? _.pluck(valueTextPair, 'id') : _.pluck(valueTextPair, 'id').toString();
+ const valueTextPair = jQuery(`#${this.selectRef.current.id}`)
+ .children(':selected')
+ .map(function element() {
+ return { id: jQuery(this).val(), text: jQuery(this).text() };
+ });
+ const value = this.props.field.multiple
+ ? _.pluck(valueTextPair, 'id')
+ : _.pluck(valueTextPair, 'id').toString();
const transformedValue = this.transformChangedValue(value, valueTextPair);
this.props.onValueChange({
@@ -250,7 +269,11 @@ class Selection extends Component {
// desired value.
transformChangedValue = (value, textValuePair) => {
if (typeof this.props.field.transformChangedValue === 'function') {
- return this.props.field.transformChangedValue.call(this, value, textValuePair);
+ return this.props.field.transformChangedValue.call(
+ this,
+ value,
+ textValuePair,
+ );
}
return value;
};
@@ -283,7 +306,7 @@ class Selection extends Component {
value={value}
title={searchLabel}
>
- { label }
+ {label}
);
});
@@ -298,8 +321,8 @@ class Selection extends Component {
defaultValue={selectedValues}
{...this.props.field.validation}
>
- { this.insertEmptyOption() }
- { options }
+ {this.insertEmptyOption()}
+ {options}
);
}
@@ -309,10 +332,7 @@ Selection.propTypes = {
onValueChange: PropTypes.func,
field: PropTypes.shape({
name: PropTypes.string.isRequired,
- values: PropTypes.oneOfType([
- PropTypes.object,
- PropTypes.array,
- ]),
+ values: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
getLabel: PropTypes.func,
resetSelect2OnUpdate: PropTypes.bool,
selected: PropTypes.func,
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/selection_item.tsx b/mailpoet/assets/js/src/form_editor/components/form_settings/selection_item.tsx
index 4869fd261c..43f84b1194 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/selection_item.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/selection_item.tsx
@@ -24,24 +24,22 @@ function SelectionItem({
className,
automationId,
displaySettingsIcon,
-}: Props) : JSX.Element {
+}: Props): JSX.Element {
const [hover, setHover] = useState(false);
return (
setHover(true)}
onMouseLeave={(): void => setHover(false)}
onClick={onClick}
onKeyDown={(event): void => {
- if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
+ if (
+ ['keydown', 'keypress'].includes(event.type) &&
+ ['Enter', ' '].includes(event.key)
) {
event.preventDefault();
onClick();
@@ -52,41 +50,27 @@ function SelectionItem({
>
- {
- displaySettingsIcon
- ? (
-
- {SettingsIcon}
-
- )
- : (
)
- }
- {
- hover && !active && canBeActive
- &&
- }
- {
- active && canBeActive
- && (
-
- {CheckIcon}
-
- )
- }
+ {displaySettingsIcon ? (
+
+ {SettingsIcon}
+
+ ) : (
+
+ )}
+ {hover && !active && canBeActive && (
+
+ )}
+ {active && canBeActive && (
+
{CheckIcon}
+ )}
{children}
- {
- hover
- &&
- }
+ {hover &&
}
);
}
diff --git a/mailpoet/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx b/mailpoet/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
index 2bc953f4f3..e61ab38a3c 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx
@@ -23,7 +23,7 @@ function StylesSettingsPanel({ onToggle, isOpened }) {
const { changeFormSettings } = useDispatch('mailpoet-form-editor');
const settings = useSelect(
(select) => select('mailpoet-form-editor').getFormSettings(),
- []
+ [],
);
const settingsRef = useRef(settings);
useEffect(() => {
@@ -32,7 +32,7 @@ function StylesSettingsPanel({ onToggle, isOpened }) {
const updateStyles = (property, value) => {
const updated = { ...settingsRef.current };
- updated[property] = value ?? (defaultFormStyles[property] ?? undefined);
+ updated[property] = value ?? defaultFormStyles[property] ?? undefined;
changeFormSettings(updated);
settingsRef.current = updated;
};
@@ -57,7 +57,10 @@ function StylesSettingsPanel({ onToggle, isOpened }) {
imageUrl={settings.backgroundImageUrl}
onImageUrlChange={partial(updateStyles, 'backgroundImageUrl')}
imageDisplay={settings.backgroundImageDisplay}
- onImageDisplayChange={partial(updateStyles, 'backgroundImageDisplay')}
+ onImageDisplayChange={partial(
+ updateStyles,
+ 'backgroundImageDisplay',
+ )}
/>
diff --git a/mailpoet/assets/js/src/form_editor/components/form_styles.jsx b/mailpoet/assets/js/src/form_editor/components/form_styles.jsx
index e4d4ab0f6e..47e1a315ff 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_styles.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_styles.jsx
@@ -8,7 +8,7 @@ export default () => {
const formStyles = useSelect(
(select) => select('mailpoet-form-editor').getFormStyles(),
- []
+ [],
);
try {
@@ -17,6 +17,9 @@ export default () => {
return ReactDOM.createPortal(null, element);
}
- const transoformedStyles = transformStyles([{ css: formStyles }], '.editor-styles-wrapper');
+ const transoformedStyles = transformStyles(
+ [{ css: formStyles }],
+ '.editor-styles-wrapper',
+ );
return ReactDOM.createPortal(transoformedStyles[0], element);
};
diff --git a/mailpoet/assets/js/src/form_editor/components/form_styling_background.jsx b/mailpoet/assets/js/src/form_editor/components/form_styling_background.jsx
index be9e29c670..1428cd22be 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_styling_background.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_styling_background.jsx
@@ -15,16 +15,20 @@ function FormStylingBackground({ children }) {
backgroundImageUrl,
backgroundImageDisplay,
fontFamily,
- } = useSelect((select) => select('mailpoet-form-editor').getFormSettings(), []);
+ } = useSelect(
+ (select) => select('mailpoet-form-editor').getFormSettings(),
+ [],
+ );
const previewSettings = useSelect(
(select) => select('mailpoet-form-editor').getPreviewSettings(),
- []
+ [],
);
const formWidth = useSelect(
- (select) => select('mailpoet-form-editor').getFormWidth(previewSettings.formType),
- [previewSettings.formType]
+ (select) =>
+ select('mailpoet-form-editor').getFormWidth(previewSettings.formType),
+ [previewSettings.formType],
);
let borderStyle;
@@ -61,7 +65,10 @@ function FormStylingBackground({ children }) {
};
// Render virtual container for widgets and below pages/post forms with width in percent
- if (['others', 'below_post'].includes(previewSettings.formType) && formWidth.unit === 'percent') {
+ if (
+ ['others', 'below_post'].includes(previewSettings.formType) &&
+ formWidth.unit === 'percent'
+ ) {
style.maxWidth = 600;
}
@@ -79,7 +86,9 @@ function FormStylingBackground({ children }) {
backgroundSize = 'auto';
}
- backgrounds.push(`url(${backgroundImageUrl}) ${backgroundPosition}/${backgroundSize} ${backgroundRepeat}`);
+ backgrounds.push(
+ `url(${backgroundImageUrl}) ${backgroundPosition}/${backgroundSize} ${backgroundRepeat}`,
+ );
}
if (gradient) {
@@ -105,9 +114,7 @@ function FormStylingBackground({ children }) {
return (
-
- {children}
-
+
{children}
);
}
diff --git a/mailpoet/assets/js/src/form_editor/components/form_title.jsx b/mailpoet/assets/js/src/form_editor/components/form_title.jsx
index 21749543bb..b36f710582 100644
--- a/mailpoet/assets/js/src/form_editor/components/form_title.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/form_title.jsx
@@ -7,7 +7,7 @@ export default function FormTitle() {
const [isSelected, setIsSelected] = useState(false);
const title = useSelect(
(select) => select('mailpoet-form-editor').getFormName(),
- []
+ [],
);
const titleClass = classnames({
'is-selected': isSelected,
diff --git a/mailpoet/assets/js/src/form_editor/components/header.jsx b/mailpoet/assets/js/src/form_editor/components/header.jsx
index 8def1c7640..39fee0fa7e 100644
--- a/mailpoet/assets/js/src/form_editor/components/header.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/header.jsx
@@ -5,10 +5,7 @@ import {
ToolbarItem,
} from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
-import {
- moreVertical,
- plus,
-} from '@wordpress/icons';
+import { moreVertical, plus } from '@wordpress/icons';
import { __, _x } from '@wordpress/i18n';
import MailPoet from 'mailpoet';
import PropTypes from 'prop-types';
@@ -19,26 +16,22 @@ import HistoryRedo from './history_redo';
function Header({ isInserterOpened, setIsInserterOpened }) {
const sidebarOpened = useSelect(
(select) => select('mailpoet-form-editor').getSidebarOpened(),
- []
+ [],
);
const isFormSaving = useSelect(
(select) => select('mailpoet-form-editor').getIsFormSaving(),
- []
+ [],
);
const isPreview = useSelect(
(select) => select('mailpoet-form-editor').getIsPreviewShown(),
- []
+ [],
);
const isFullscreen = useSelect(
(select) => select('mailpoet-form-editor').isFullscreenEnabled(),
- []
+ [],
);
- const {
- toggleSidebar,
- saveForm,
- showPreview,
- toggleFullscreen,
- } = useDispatch('mailpoet-form-editor');
+ const { toggleSidebar, saveForm, showPreview, toggleFullscreen } =
+ useDispatch('mailpoet-form-editor');
return (
@@ -110,17 +103,10 @@ function Header({ isInserterOpened, setIsInserterOpened }) {
isPressed={isInserterOpened}
onClick={() => setIsInserterOpened(!isInserterOpened)}
icon={plus}
- label={_x(
- 'Add block',
- 'Generic label for block inserter button'
- )}
- />
-
-
+
+
diff --git a/mailpoet/assets/js/src/form_editor/components/image_settings.tsx b/mailpoet/assets/js/src/form_editor/components/image_settings.tsx
index a4e32bb6be..52cdcf19a4 100644
--- a/mailpoet/assets/js/src/form_editor/components/image_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/image_settings.tsx
@@ -16,24 +16,24 @@ function ImageSettings({
onImageUrlChange,
imageDisplay,
onImageDisplayChange,
-}: Props) : JSX.Element {
+}: Props): JSX.Element {
return (
-
- {name}
-
+
{name}
-
onImageUrlChange(event.target.value)} />
+
onImageUrlChange(event.target.value)}
+ />
onImageUrlChange(image.url)}
+ onSelect={(image: { url: string }): void =>
+ onImageUrlChange(image.url)
+ }
allowedTypes={['image']}
render={({ open }): JSX.Element => (
-
+
{MailPoet.I18n.t('formSettingsStylesSelectImage')}
)}
diff --git a/mailpoet/assets/js/src/form_editor/components/inserter.tsx b/mailpoet/assets/js/src/form_editor/components/inserter.tsx
index ba3ad0ca07..1372ac6e16 100644
--- a/mailpoet/assets/js/src/form_editor/components/inserter.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/inserter.tsx
@@ -1,19 +1,13 @@
import { useSelect } from '@wordpress/data';
import { close } from '@wordpress/icons';
-import {
- Button,
-} from '@wordpress/components';
-import {
- __experimentalLibrary as Library,
-} from '@wordpress/block-editor';
+import { Button } from '@wordpress/components';
+import { __experimentalLibrary as Library } from '@wordpress/block-editor';
type Props = {
setIsInserterOpened: (boolean) => void;
};
-function Inserter({
- setIsInserterOpened,
-}: Props) : JSX.Element {
+function Inserter({ setIsInserterOpened }: Props): JSX.Element {
const insertPoint = useSelect(
(sel) => sel('mailpoet-form-editor').getInserterPanelInsertPoint(),
[],
@@ -21,10 +15,7 @@ function Inserter({
return (
- setIsInserterOpened(false)}
- />
+ setIsInserterOpened(false)} />
select('mailpoet-form-editor').getDismissibleNotices(),
- []
+ [],
);
const nonDismissibleNotices = useSelect(
(select) => select('mailpoet-form-editor').getNonDismissibleNotices(),
- []
+ [],
);
const { removeNotice } = useDispatch('mailpoet-form-editor');
diff --git a/mailpoet/assets/js/src/form_editor/components/preview/preview.tsx b/mailpoet/assets/js/src/form_editor/components/preview/preview.tsx
index 81e8aa8f34..2cb1ab50d5 100644
--- a/mailpoet/assets/js/src/form_editor/components/preview/preview.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/preview/preview.tsx
@@ -1,9 +1,4 @@
-import {
- useCallback,
- useEffect,
- useState,
- useRef,
-} from 'react';
+import { useCallback, useEffect, useState, useRef } from 'react';
import MailPoet from 'mailpoet';
import { Spinner, SelectControl } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';
@@ -12,10 +7,12 @@ import Preview from 'common/preview/preview.jsx';
import Modal from 'common/modal/modal';
import PlacementSettingsPanel from 'form_editor/components/form_settings/form_placement_options/settings_panel';
-function FormPreview() : JSX.Element {
+function FormPreview(): JSX.Element {
const iframeElement = useRef(null);
const [iframeLoaded, setIframeLoaded] = useState(false);
- const { hidePreview, changePreviewSettings } = useDispatch('mailpoet-form-editor');
+ const { hidePreview, changePreviewSettings } = useDispatch(
+ 'mailpoet-form-editor',
+ );
const isPreview = useSelect(
(select) => select('mailpoet-form-editor').getIsPreviewShown(),
[],
@@ -53,7 +50,8 @@ function FormPreview() : JSX.Element {
useEffect(() => {
setIframeLoaded(false);
const beacon = document.getElementById('beacon-container');
- if (isPreview && beacon) { // hide beacon in the preview modal
+ if (isPreview && beacon) {
+ // hide beacon in the preview modal
beacon.style.display = 'none';
}
}, [isPreview]);
@@ -64,7 +62,13 @@ function FormPreview() : JSX.Element {
}
const data = { formType: previewSettings.formType, formSettings };
iframeElement.current.contentWindow.postMessage(data, previewPageUrl);
- }, [formSettings, iframeElement, previewSettings, iframeLoaded, previewPageUrl]);
+ }, [
+ formSettings,
+ iframeElement,
+ previewSettings,
+ iframeLoaded,
+ previewPageUrl,
+ ]);
const closePreview = useCallback((): void => {
const beacon = document.getElementById('beacon-container');
@@ -74,14 +78,20 @@ function FormPreview() : JSX.Element {
hidePreview();
}, [hidePreview]);
- const setFormType = useCallback((type): void => {
- setIframeLoaded(false);
- changePreviewSettings({ ...previewSettings, formType: type });
- }, [changePreviewSettings, previewSettings]);
+ const setFormType = useCallback(
+ (type): void => {
+ setIframeLoaded(false);
+ changePreviewSettings({ ...previewSettings, formType: type });
+ },
+ [changePreviewSettings, previewSettings],
+ );
- const onPreviewTypeChange = useCallback((type): void => {
- changePreviewSettings({ ...previewSettings, displayType: type });
- }, [changePreviewSettings, previewSettings]);
+ const onPreviewTypeChange = useCallback(
+ (type): void => {
+ changePreviewSettings({ ...previewSettings, displayType: type });
+ },
+ [changePreviewSettings, previewSettings],
+ );
if (!isPreview) return null;
@@ -118,10 +128,22 @@ function FormPreview() : JSX.Element {
data-automation-id="form_type_selection"
options={[
{ value: 'others', label: MailPoet.I18n.t('placeFormOthers') },
- { value: 'below_post', label: MailPoet.I18n.t('placeFormBellowPages') },
- { value: 'fixed_bar', label: MailPoet.I18n.t('placeFixedBarFormOnPages') },
- { value: 'popup', label: MailPoet.I18n.t('placePopupFormOnPages') },
- { value: 'slide_in', label: MailPoet.I18n.t('placeSlideInFormOnPages') },
+ {
+ value: 'below_post',
+ label: MailPoet.I18n.t('placeFormBellowPages'),
+ },
+ {
+ value: 'fixed_bar',
+ label: MailPoet.I18n.t('placeFixedBarFormOnPages'),
+ },
+ {
+ value: 'popup',
+ label: MailPoet.I18n.t('placePopupFormOnPages'),
+ },
+ {
+ value: 'slide_in',
+ label: MailPoet.I18n.t('placeSlideInFormOnPages'),
+ },
]}
/>
@@ -144,11 +166,12 @@ function FormPreview() : JSX.Element {
data-automation-id="form_preview_iframe"
scrolling={previewSettings.formType === 'others' ? 'no' : 'yes'}
/>
- {previewSettings.formType === 'others' && previewSettings.displayType === 'desktop' && (
-
- {MailPoet.I18n.t('formPreviewOthersDisclaimer')}
-
- )}
+ {previewSettings.formType === 'others' &&
+ previewSettings.displayType === 'desktop' && (
+
+ {MailPoet.I18n.t('formPreviewOthersDisclaimer')}
+
+ )}
)}
diff --git a/mailpoet/assets/js/src/form_editor/components/sidebar/block_settings.jsx b/mailpoet/assets/js/src/form_editor/components/sidebar/block_settings.jsx
index bb19b789f2..c2bb5cddef 100644
--- a/mailpoet/assets/js/src/form_editor/components/sidebar/block_settings.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/sidebar/block_settings.jsx
@@ -1,6 +1,4 @@
-import {
- Panel,
-} from '@wordpress/components';
+import { Panel } from '@wordpress/components';
import { BlockInspector } from '@wordpress/block-editor';
export default function BlockSettings() {
diff --git a/mailpoet/assets/js/src/form_editor/components/sidebar/default_sidebar.tsx b/mailpoet/assets/js/src/form_editor/components/sidebar/default_sidebar.tsx
index 74ebee9fac..2099ae5dda 100644
--- a/mailpoet/assets/js/src/form_editor/components/sidebar/default_sidebar.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/sidebar/default_sidebar.tsx
@@ -39,7 +39,10 @@ export default function DefaultSidebar({ onClose }: Props): JSX.Element {
switchDefaultSidebarTab('form')}
- className={classnames('components-button edit-post-sidebar__panel-tab', { 'is-active': activeTab === 'form' })}
+ className={classnames(
+ 'components-button edit-post-sidebar__panel-tab',
+ { 'is-active': activeTab === 'form' },
+ )}
data-automation-id="mailpoet_form_settings_tab"
type="button"
>
@@ -49,7 +52,10 @@ export default function DefaultSidebar({ onClose }: Props): JSX.Element {
switchDefaultSidebarTab('block')}
- className={classnames('components-button edit-post-sidebar__panel-tab', { 'is-active': activeTab === 'block' })}
+ className={classnames(
+ 'components-button edit-post-sidebar__panel-tab',
+ { 'is-active': activeTab === 'block' },
+ )}
data-automation-id="mailpoet_block_settings_tab"
type="button"
>
diff --git a/mailpoet/assets/js/src/form_editor/components/sidebar/placement_settings_sidebar.tsx b/mailpoet/assets/js/src/form_editor/components/sidebar/placement_settings_sidebar.tsx
index bc62a3307e..d911762213 100644
--- a/mailpoet/assets/js/src/form_editor/components/sidebar/placement_settings_sidebar.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/sidebar/placement_settings_sidebar.tsx
@@ -8,7 +8,9 @@ type Props = {
onClose: () => void;
};
-export default function PlaceMentSettingsSidebar({ onClose }: Props): JSX.Element {
+export default function PlaceMentSettingsSidebar({
+ onClose,
+}: Props): JSX.Element {
const previewSettings = useSelect(
(select) => select('mailpoet-form-editor').getPreviewSettings(),
[],
@@ -17,11 +19,16 @@ export default function PlaceMentSettingsSidebar({ onClose }: Props): JSX.Elemen
<>
- {previewSettings.formType === 'others' && MailPoet.I18n.t('placeFormOthers')}
- {previewSettings.formType === 'below_post' && MailPoet.I18n.t('placeFormBellowPages')}
- {previewSettings.formType === 'fixed_bar' && MailPoet.I18n.t('placeFixedBarFormOnPages')}
- {previewSettings.formType === 'popup' && MailPoet.I18n.t('placePopupFormOnPages')}
- {previewSettings.formType === 'slide_in' && MailPoet.I18n.t('placeSlideInFormOnPages')}
+ {previewSettings.formType === 'others' &&
+ MailPoet.I18n.t('placeFormOthers')}
+ {previewSettings.formType === 'below_post' &&
+ MailPoet.I18n.t('placeFormBellowPages')}
+ {previewSettings.formType === 'fixed_bar' &&
+ MailPoet.I18n.t('placeFixedBarFormOnPages')}
+ {previewSettings.formType === 'popup' &&
+ MailPoet.I18n.t('placePopupFormOnPages')}
+ {previewSettings.formType === 'slide_in' &&
+ MailPoet.I18n.t('placeSlideInFormOnPages')}
diff --git a/mailpoet/assets/js/src/form_editor/components/sidebar/sidebar.tsx b/mailpoet/assets/js/src/form_editor/components/sidebar/sidebar.tsx
index bf477444e0..e1ef4e0762 100644
--- a/mailpoet/assets/js/src/form_editor/components/sidebar/sidebar.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/sidebar/sidebar.tsx
@@ -4,7 +4,9 @@ import DefaultSidebar from './default_sidebar';
import PlacementSettingsSidebar from './placement_settings_sidebar';
export default function Sidebar(): JSX.Element {
- const { toggleSidebar, changeActiveSidebar } = useDispatch('mailpoet-form-editor');
+ const { toggleSidebar, changeActiveSidebar } = useDispatch(
+ 'mailpoet-form-editor',
+ );
const activeSidebar = useSelect(
(select) => select('mailpoet-form-editor').getActiveSidebar(),
@@ -29,8 +31,12 @@ export default function Sidebar(): JSX.Element {
return (
- {activeSidebar === 'default' &&
toggleSidebar(false)} />}
- {activeSidebar === 'placement_settings' && }
+ {activeSidebar === 'default' && (
+ toggleSidebar(false)} />
+ )}
+ {activeSidebar === 'placement_settings' && (
+
+ )}
);
}
diff --git a/mailpoet/assets/js/src/form_editor/components/sidebar/sidebar_header.tsx b/mailpoet/assets/js/src/form_editor/components/sidebar/sidebar_header.tsx
index 98a3a4d867..6d4089eba1 100644
--- a/mailpoet/assets/js/src/form_editor/components/sidebar/sidebar_header.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/sidebar/sidebar_header.tsx
@@ -7,22 +7,18 @@ type Props = {
children: ReactNode;
};
-function SidebarHeader({ children, closeSidebar }: Props) : JSX.Element {
+function SidebarHeader({ children, closeSidebar }: Props): JSX.Element {
return (
<>
- {MailPoet.I18n.t('formSettings')}
-
+
+ {MailPoet.I18n.t('formSettings')}
+
+
{children}
-
+
>
);
diff --git a/mailpoet/assets/js/src/form_editor/components/size_settings.tsx b/mailpoet/assets/js/src/form_editor/components/size_settings.tsx
index ab6c1b1467..47036a11ef 100644
--- a/mailpoet/assets/js/src/form_editor/components/size_settings.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/size_settings.tsx
@@ -29,7 +29,9 @@ export function SizeSettings({
defaultPixelValue = 200,
onChange,
}: Props): JSX.Element {
- const [localValue, setLocalValue] = useState(value ?? { unit: 'pixel', value: undefined });
+ const [localValue, setLocalValue] = useState(
+ value ?? { unit: 'pixel', value: undefined },
+ );
useEffect(() => {
setLocalValue(value);
@@ -54,7 +56,12 @@ export function SizeSettings({
}}
/>
{
diff --git a/mailpoet/assets/js/src/form_editor/components/tutorial.tsx b/mailpoet/assets/js/src/form_editor/components/tutorial.tsx
index bfa67152e8..14d31d5f9b 100644
--- a/mailpoet/assets/js/src/form_editor/components/tutorial.tsx
+++ b/mailpoet/assets/js/src/form_editor/components/tutorial.tsx
@@ -5,7 +5,7 @@ import Modal from 'common/modal/modal';
import Heading from 'common/typography/heading/heading';
import MailPoet from 'mailpoet';
-export function Tutorial():JSX.Element {
+export function Tutorial(): JSX.Element {
const url = useSelect(
(select) => select('mailpoet-form-editor').getTutorialUrl(),
[],
@@ -25,19 +25,14 @@ export function Tutorial():JSX.Element {
}
return (
-
-
+
+
{MailPoet.I18n.t('tutorialHeading')}
{/* eslint-disable-next-line jsx-a11y/media-has-caption */}
-
+
);
diff --git a/mailpoet/assets/js/src/form_editor/components/unsaved_changes_notice.jsx b/mailpoet/assets/js/src/form_editor/components/unsaved_changes_notice.jsx
index 92726b45d3..70ab9f2387 100644
--- a/mailpoet/assets/js/src/form_editor/components/unsaved_changes_notice.jsx
+++ b/mailpoet/assets/js/src/form_editor/components/unsaved_changes_notice.jsx
@@ -5,7 +5,7 @@ import { useSelect } from '@wordpress/data';
function UnsavedChangesNotice() {
const hasUnsavedChanges = useSelect(
(sel) => sel('mailpoet-form-editor').hasUnsavedChanges(),
- []
+ [],
);
function onUnload(event) {
diff --git a/mailpoet/assets/js/src/form_editor/form_editor.jsx b/mailpoet/assets/js/src/form_editor/form_editor.jsx
index eb833e4f11..21a70517d5 100644
--- a/mailpoet/assets/js/src/form_editor/form_editor.jsx
+++ b/mailpoet/assets/js/src/form_editor/form_editor.jsx
@@ -37,7 +37,7 @@ window.addEventListener('DOMContentLoaded', () => {
,
- appElement
+ appElement,
);
}
});
diff --git a/mailpoet/assets/js/src/form_editor/form_preview.ts b/mailpoet/assets/js/src/form_editor/form_preview.ts
index 7fbaf34ee0..cf8153ad4d 100644
--- a/mailpoet/assets/js/src/form_editor/form_preview.ts
+++ b/mailpoet/assets/js/src/form_editor/form_preview.ts
@@ -8,7 +8,10 @@ jQuery(($) => {
return;
}
- $previewForm.on('submit', (e) => { e.preventDefault(); return false; });
+ $previewForm.on('submit', (e) => {
+ e.preventDefault();
+ return false;
+ });
const toggleClass = (form, from, to): void => {
form.removeClass(from);
@@ -29,7 +32,8 @@ jQuery(($) => {
const formType = event.data.formType as string;
const placementName = camelCase(formType);
// Get width settings based on type
- const width = event.data.formSettings?.formPlacement?.[placementName]?.styles?.width;
+ const width =
+ event.data.formSettings?.formPlacement?.[placementName]?.styles?.width;
if (!width) {
return;
@@ -43,50 +47,99 @@ jQuery(($) => {
formElement.css('width', newWidth);
} else {
$previewForm.css('width', newWidth);
- if (unit === 'px') { // Update others container width to render full pixel size
+ if (unit === 'px') {
+ // Update others container width to render full pixel size
$('#mailpoet_widget_preview #sidebar').css('width', newWidth);
- } else { // Reset container size to default render percent size
+ } else {
+ // Reset container size to default render percent size
$('#mailpoet_widget_preview #sidebar').css('width', null);
}
}
// When some settings are changed we want to replay animation
- const newFormSettings = event.data.formSettings?.formPlacement?.[placementName];
- const allowAnimation = newFormSettings?.position !== originalFormSettings?.position
- || newFormSettings?.animation !== originalFormSettings?.animation;
+ const newFormSettings =
+ event.data.formSettings?.formPlacement?.[placementName];
+ const allowAnimation =
+ newFormSettings?.position !== originalFormSettings?.position ||
+ newFormSettings?.animation !== originalFormSettings?.animation;
originalFormSettings = newFormSettings;
- const animation = event.data.formSettings?.formPlacement?.[placementName]?.animation;
+ const animation =
+ event.data.formSettings?.formPlacement?.[placementName]?.animation;
if (animation !== '' && allowAnimation) {
- $previewForm.removeClass((_, className) => (className.match(/(^|\s)mailpoet_form_animation\S+/g) || []).join(' '));
- setTimeout(() => $previewForm.addClass(`mailpoet_form_animation_${animation}`));
- toggleClass($previewForm.prev('.mailpoet_form_popup_overlay'), 'mailpoet_form_overlay_animation', 'mailpoet_form_overlay_animation');
+ $previewForm.removeClass((_, className) =>
+ (className.match(/(^|\s)mailpoet_form_animation\S+/g) || []).join(
+ ' ',
+ ),
+ );
+ setTimeout(() =>
+ $previewForm.addClass(`mailpoet_form_animation_${animation}`),
+ );
+ toggleClass(
+ $previewForm.prev('.mailpoet_form_popup_overlay'),
+ 'mailpoet_form_overlay_animation',
+ 'mailpoet_form_overlay_animation',
+ );
}
- const position = event.data.formSettings?.formPlacement?.[placementName]?.position;
+ const position =
+ event.data.formSettings?.formPlacement?.[placementName]?.position;
// Ajdust others (widget) container
if (formType === 'others') {
- if (unit === 'px') { // Update others container width so that we can render full pixel size
- $('#mailpoet_widget_preview #sidebar').css('width', `${width.value}${unit}`);
- } else { // Reset container size to default render percent size
+ if (unit === 'px') {
+ // Update others container width so that we can render full pixel size
+ $('#mailpoet_widget_preview #sidebar').css(
+ 'width',
+ `${width.value}${unit}`,
+ );
+ } else {
+ // Reset container size to default render percent size
$('#mailpoet_widget_preview #sidebar').css('width', null);
}
}
if (formType === 'slide_in') {
- if ($previewForm.hasClass('mailpoet_form_position_left') && position === 'right') {
- toggleClass($previewForm, 'mailpoet_form_position_left', 'mailpoet_form_position_right');
- } else if ($previewForm.hasClass('mailpoet_form_position_right') && position === 'left') {
- toggleClass($previewForm, 'mailpoet_form_position_right', 'mailpoet_form_position_left');
+ if (
+ $previewForm.hasClass('mailpoet_form_position_left') &&
+ position === 'right'
+ ) {
+ toggleClass(
+ $previewForm,
+ 'mailpoet_form_position_left',
+ 'mailpoet_form_position_right',
+ );
+ } else if (
+ $previewForm.hasClass('mailpoet_form_position_right') &&
+ position === 'left'
+ ) {
+ toggleClass(
+ $previewForm,
+ 'mailpoet_form_position_right',
+ 'mailpoet_form_position_left',
+ );
}
}
if (formType === 'fixed_bar') {
- if ($previewForm.hasClass('mailpoet_form_position_bottom') && position === 'top') {
- toggleClass($previewForm, 'mailpoet_form_position_bottom', 'mailpoet_form_position_top');
- } else if ($previewForm.hasClass('mailpoet_form_position_top') && position === 'bottom') {
- toggleClass($previewForm, 'mailpoet_form_position_top', 'mailpoet_form_position_bottom');
+ if (
+ $previewForm.hasClass('mailpoet_form_position_bottom') &&
+ position === 'top'
+ ) {
+ toggleClass(
+ $previewForm,
+ 'mailpoet_form_position_bottom',
+ 'mailpoet_form_position_top',
+ );
+ } else if (
+ $previewForm.hasClass('mailpoet_form_position_top') &&
+ position === 'bottom'
+ ) {
+ toggleClass(
+ $previewForm,
+ 'mailpoet_form_position_top',
+ 'mailpoet_form_position_bottom',
+ );
}
}
diff --git a/mailpoet/assets/js/src/form_editor/rich_text/font_selection_format.tsx b/mailpoet/assets/js/src/form_editor/rich_text/font_selection_format.tsx
index 6908d87da5..b3a85cf666 100644
--- a/mailpoet/assets/js/src/form_editor/rich_text/font_selection_format.tsx
+++ b/mailpoet/assets/js/src/form_editor/rich_text/font_selection_format.tsx
@@ -8,10 +8,7 @@ import FontFamilySettings from '../components/font_family_settings';
const name = 'mailpoet-form/font-selection';
const title = 'Font Selection';
-const supportedBlocks = [
- 'core/paragraph',
- 'core/heading',
-];
+const supportedBlocks = ['core/paragraph', 'core/heading'];
type Attributes = {
font?: string;
@@ -41,11 +38,7 @@ type Props = {
};
};
-function Edit({
- value,
- onChange,
- activeAttributes,
-}: Props) : JSX.Element {
+function Edit({ value, onChange, activeAttributes }: Props): JSX.Element {
const selectedBlock = useSelect(
(sel) => sel('core/block-editor').getSelectedBlock(),
[],
diff --git a/mailpoet/assets/js/src/form_editor/store/actions.ts b/mailpoet/assets/js/src/form_editor/store/actions.ts
index fd82890227..8b1ca376d8 100644
--- a/mailpoet/assets/js/src/form_editor/store/actions.ts
+++ b/mailpoet/assets/js/src/form_editor/store/actions.ts
@@ -12,7 +12,9 @@ export function toggleSidebar(toggleTo): ToggleAction {
};
}
-export function toggleInserter(toggleTo: BlockInsertionPoint | boolean): ToggleBlockInserterAction {
+export function toggleInserter(
+ toggleTo: BlockInsertionPoint | boolean,
+): ToggleBlockInserterAction {
return {
type: 'TOGGLE_INSERTER_SIDEBAR',
value: toggleTo,
@@ -213,13 +215,23 @@ export function* showPreview() {
type: 'SHOW_PREVIEW',
};
yield changeActiveSidebar('default');
- const customFields = select('mailpoet-form-editor').getAllAvailableCustomFields();
+ const customFields = select(
+ 'mailpoet-form-editor',
+ ).getAllAvailableCustomFields();
const formData = select('mailpoet-form-editor').getFormData();
const formBlocks = select('mailpoet-form-editor').getFormBlocks();
const blocksToFormBody = blocksToFormBodyFactory(
- SETTINGS_DEFAULTS.fontSizes as { name: string; slug: string; size: number; }[],
- SETTINGS_DEFAULTS.colors as { name: string; slug: string; color: string; }[],
- SETTINGS_DEFAULTS.gradients as { name: string; slug: string; gradient: string; }[],
+ SETTINGS_DEFAULTS.fontSizes as {
+ name: string;
+ slug: string;
+ size: number;
+ }[],
+ SETTINGS_DEFAULTS.colors as { name: string; slug: string; color: string }[],
+ SETTINGS_DEFAULTS.gradients as {
+ name: string;
+ slug: string;
+ gradient: string;
+ }[],
customFields,
);
const { success, error } = yield {
diff --git a/mailpoet/assets/js/src/form_editor/store/blocks_to_form_body.jsx b/mailpoet/assets/js/src/form_editor/store/blocks_to_form_body.jsx
index e0bb5cac12..f13e67ecf7 100644
--- a/mailpoet/assets/js/src/form_editor/store/blocks_to_form_body.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/blocks_to_form_body.jsx
@@ -7,7 +7,9 @@ import {
} from './mapping/from_blocks/styles_mapper';
const mapCustomField = (block, customFields, mappedCommonProperties) => {
- const customField = customFields.find((cf) => cf.id === block.attributes.customFieldId);
+ const customField = customFields.find(
+ (cf) => cf.id === block.attributes.customFieldId,
+ );
if (!customField) return null;
const mapped = {
...mappedCommonProperties,
@@ -77,7 +79,7 @@ const blocksToFormBodyFactory = (
fontSizeDefinitions,
colorDefinitions,
gradientDefinitions,
- customFields
+ customFields,
) => {
if (!Array.isArray(customFields)) {
throw new Error('Mapper expects customFields to be an array.');
@@ -92,234 +94,242 @@ const blocksToFormBodyFactory = (
throw new Error('Mapper expects blocks to be an array.');
}
- return blocks.map((block) => {
- const mapped = {
- type: 'text',
- params: {
- label: block.attributes.label,
- class_name: block.attributes.className || null,
- },
- };
- if (block.attributes.mandatory) {
- mapped.params.required = '1';
- }
- if (block.attributes.labelWithinInput) {
- mapped.params.label_within = '1';
- }
- switch (block.name) {
- case 'core/heading':
- return {
- type: 'heading',
- id: 'heading',
- params: {
- content: block.attributes.content,
- level: block.attributes.level,
- align: block.attributes.textAlign || 'left',
- font_size: mapFontSizeSlugToValue(
- fontSizeDefinitions,
- block.attributes.fontSize,
- block.attributes.style?.typography?.fontSize
- ),
- text_color: mapColorSlugToValue(
- colorDefinitions,
- block.attributes.textColor,
- block.attributes.style?.color?.text
- ),
- line_height: block.attributes.style?.typography?.lineHeight,
- background_color: mapColorSlugToValue(
- colorDefinitions,
- block.attributes.backgroundColor,
- block.attributes.style?.color?.background
- ),
- anchor: block.attributes.anchor || null,
- class_name: block.attributes.className || null,
- },
- };
- case 'core/paragraph':
- return {
- type: 'paragraph',
- id: 'paragraph',
- params: {
- content: block.attributes.content,
- drop_cap: block.attributes.dropCap ? '1' : '0',
- align: block.attributes.align || 'left',
- font_size: mapFontSizeSlugToValue(
- fontSizeDefinitions,
- block.attributes.fontSize,
- block.attributes.style?.typography?.fontSize
- ),
- line_height: block.attributes.style?.typography?.lineHeight,
- text_color: mapColorSlugToValue(
- colorDefinitions,
- block.attributes.textColor,
- block.attributes.style?.color?.text
- ),
- background_color: mapColorSlugToValue(
- colorDefinitions,
- block.attributes.backgroundColor,
- block.attributes.style?.color?.background
- ),
- class_name: block.attributes.className || null,
- },
- };
- case 'core/image':
- return {
- type: 'image',
- id: 'image',
- params: {
- class_name: block.attributes.className || null,
- align: block.attributes.align || null,
- url: block.attributes.url || null,
- alt: block.attributes.alt || null,
- title: block.attributes.title || null,
- caption: block.attributes.caption || null,
- link_destination: block.attributes.linkDestination || null,
- link: block.attributes.link || null,
- href: block.attributes.href || null,
- link_class: block.attributes.linkClass || null,
- rel: block.attributes.rel || null,
- link_target: block.attributes.linkTarget || null,
- id: block.attributes.id || null, // Image id
- size_slug: block.attributes.sizeSlug || null,
- width: block.attributes.width || null,
- height: block.attributes.height || null,
- },
- };
- case 'core/column':
- return {
- type: 'column',
- body: mapBlocks(block.innerBlocks),
- params: {
- class_name: block.attributes.className || null,
- vertical_alignment: block.attributes.verticalAlignment || null,
- width: block.attributes.width || null,
- padding: block.attributes.style?.spacing?.padding || null,
- text_color: mapColorSlugToValue(
- colorDefinitions,
- block.attributes.textColor,
- block.attributes.style?.color?.text
- ),
- background_color: mapColorSlugToValue(
- colorDefinitions,
- block.attributes.backgroundColor,
- block.attributes.style?.color?.background
- ),
- gradient: mapGradientSlugToValue(
- gradientDefinitions,
- block.attributes.gradient,
- block.attributes.style?.color?.gradient
- ),
- },
- };
- case 'core/columns':
- return {
- type: 'columns',
- body: mapBlocks(block.innerBlocks),
- params: {
- vertical_alignment: block.attributes.verticalAlignment || null,
- is_stacked_on_mobile: (block.attributes.isStackedOnMobile
- || block.attributes.isStackedOnMobile === undefined) ? '1' : '0',
- class_name: block.attributes.className || null,
- padding: block.attributes.style?.spacing?.padding || null,
- text_color: mapColorSlugToValue(
- colorDefinitions,
- block.attributes.textColor,
- block.attributes.style?.color?.text
- ),
- background_color: mapColorSlugToValue(
- colorDefinitions,
- block.attributes.backgroundColor,
- block.attributes.style?.color?.background
- ),
- gradient: mapGradientSlugToValue(
- gradientDefinitions,
- block.attributes.gradient,
- block.attributes.style?.color?.gradient
- ),
- },
- };
- case 'mailpoet-form/email-input':
- return {
- ...mapped,
- id: 'email',
- name: 'Email',
- params: {
- ...mapped.params,
- required: '1',
- },
- styles: mapInputBlockStyles(block.attributes.styles),
- };
- case 'mailpoet-form/first-name-input':
- return {
- ...mapped,
- id: 'first_name',
- name: 'First name',
- styles: mapInputBlockStyles(block.attributes.styles),
- };
- case 'mailpoet-form/last-name-input':
- return {
- ...mapped,
- id: 'last_name',
- name: 'Last name',
- styles: mapInputBlockStyles(block.attributes.styles),
- };
- case 'mailpoet-form/segment-select':
- return {
- ...mapped,
- id: 'segments',
- type: 'segment',
- name: 'List selection',
- params: {
- ...mapped.params,
- values: block.attributes.values.map((segment) => ({
- id: segment.id,
- is_checked: segment.isChecked ? '1' : undefined,
- })),
- },
- };
- case 'mailpoet-form/submit-button':
- return {
- ...mapped,
- id: 'submit',
- type: 'submit',
- name: 'Submit',
- styles: mapInputBlockStyles(block.attributes.styles),
- };
- case 'mailpoet-form/divider':
- return {
- ...mapped,
- id: 'divider',
- type: 'divider',
- name: 'Divider',
- params: {
- class_name: block.attributes.className || null,
- height: block.attributes.height,
- type: block.attributes.type,
- style: block.attributes.style,
- divider_height: block.attributes.dividerHeight,
- divider_width: block.attributes.dividerWidth,
- color: block.attributes.color,
- },
- };
- case 'mailpoet-form/html':
- return {
- ...mapped,
- id: 'html',
- type: 'html',
- name: 'Custom text or HTML',
- params: {
- text: block.attributes && block.attributes.content ? block.attributes.content : '',
- nl2br: block.attributes && block.attributes.nl2br ? '1' : '0',
- class_name: block.attributes.className || null,
- },
- };
- default:
- if (block.name.startsWith('mailpoet-form/custom-')) {
- return mapCustomField(block, customFields, mapped);
- }
- return null;
- }
- }).filter(Boolean);
+ return blocks
+ .map((block) => {
+ const mapped = {
+ type: 'text',
+ params: {
+ label: block.attributes.label,
+ class_name: block.attributes.className || null,
+ },
+ };
+ if (block.attributes.mandatory) {
+ mapped.params.required = '1';
+ }
+ if (block.attributes.labelWithinInput) {
+ mapped.params.label_within = '1';
+ }
+ switch (block.name) {
+ case 'core/heading':
+ return {
+ type: 'heading',
+ id: 'heading',
+ params: {
+ content: block.attributes.content,
+ level: block.attributes.level,
+ align: block.attributes.textAlign || 'left',
+ font_size: mapFontSizeSlugToValue(
+ fontSizeDefinitions,
+ block.attributes.fontSize,
+ block.attributes.style?.typography?.fontSize,
+ ),
+ text_color: mapColorSlugToValue(
+ colorDefinitions,
+ block.attributes.textColor,
+ block.attributes.style?.color?.text,
+ ),
+ line_height: block.attributes.style?.typography?.lineHeight,
+ background_color: mapColorSlugToValue(
+ colorDefinitions,
+ block.attributes.backgroundColor,
+ block.attributes.style?.color?.background,
+ ),
+ anchor: block.attributes.anchor || null,
+ class_name: block.attributes.className || null,
+ },
+ };
+ case 'core/paragraph':
+ return {
+ type: 'paragraph',
+ id: 'paragraph',
+ params: {
+ content: block.attributes.content,
+ drop_cap: block.attributes.dropCap ? '1' : '0',
+ align: block.attributes.align || 'left',
+ font_size: mapFontSizeSlugToValue(
+ fontSizeDefinitions,
+ block.attributes.fontSize,
+ block.attributes.style?.typography?.fontSize,
+ ),
+ line_height: block.attributes.style?.typography?.lineHeight,
+ text_color: mapColorSlugToValue(
+ colorDefinitions,
+ block.attributes.textColor,
+ block.attributes.style?.color?.text,
+ ),
+ background_color: mapColorSlugToValue(
+ colorDefinitions,
+ block.attributes.backgroundColor,
+ block.attributes.style?.color?.background,
+ ),
+ class_name: block.attributes.className || null,
+ },
+ };
+ case 'core/image':
+ return {
+ type: 'image',
+ id: 'image',
+ params: {
+ class_name: block.attributes.className || null,
+ align: block.attributes.align || null,
+ url: block.attributes.url || null,
+ alt: block.attributes.alt || null,
+ title: block.attributes.title || null,
+ caption: block.attributes.caption || null,
+ link_destination: block.attributes.linkDestination || null,
+ link: block.attributes.link || null,
+ href: block.attributes.href || null,
+ link_class: block.attributes.linkClass || null,
+ rel: block.attributes.rel || null,
+ link_target: block.attributes.linkTarget || null,
+ id: block.attributes.id || null, // Image id
+ size_slug: block.attributes.sizeSlug || null,
+ width: block.attributes.width || null,
+ height: block.attributes.height || null,
+ },
+ };
+ case 'core/column':
+ return {
+ type: 'column',
+ body: mapBlocks(block.innerBlocks),
+ params: {
+ class_name: block.attributes.className || null,
+ vertical_alignment: block.attributes.verticalAlignment || null,
+ width: block.attributes.width || null,
+ padding: block.attributes.style?.spacing?.padding || null,
+ text_color: mapColorSlugToValue(
+ colorDefinitions,
+ block.attributes.textColor,
+ block.attributes.style?.color?.text,
+ ),
+ background_color: mapColorSlugToValue(
+ colorDefinitions,
+ block.attributes.backgroundColor,
+ block.attributes.style?.color?.background,
+ ),
+ gradient: mapGradientSlugToValue(
+ gradientDefinitions,
+ block.attributes.gradient,
+ block.attributes.style?.color?.gradient,
+ ),
+ },
+ };
+ case 'core/columns':
+ return {
+ type: 'columns',
+ body: mapBlocks(block.innerBlocks),
+ params: {
+ vertical_alignment: block.attributes.verticalAlignment || null,
+ is_stacked_on_mobile:
+ block.attributes.isStackedOnMobile ||
+ block.attributes.isStackedOnMobile === undefined
+ ? '1'
+ : '0',
+ class_name: block.attributes.className || null,
+ padding: block.attributes.style?.spacing?.padding || null,
+ text_color: mapColorSlugToValue(
+ colorDefinitions,
+ block.attributes.textColor,
+ block.attributes.style?.color?.text,
+ ),
+ background_color: mapColorSlugToValue(
+ colorDefinitions,
+ block.attributes.backgroundColor,
+ block.attributes.style?.color?.background,
+ ),
+ gradient: mapGradientSlugToValue(
+ gradientDefinitions,
+ block.attributes.gradient,
+ block.attributes.style?.color?.gradient,
+ ),
+ },
+ };
+ case 'mailpoet-form/email-input':
+ return {
+ ...mapped,
+ id: 'email',
+ name: 'Email',
+ params: {
+ ...mapped.params,
+ required: '1',
+ },
+ styles: mapInputBlockStyles(block.attributes.styles),
+ };
+ case 'mailpoet-form/first-name-input':
+ return {
+ ...mapped,
+ id: 'first_name',
+ name: 'First name',
+ styles: mapInputBlockStyles(block.attributes.styles),
+ };
+ case 'mailpoet-form/last-name-input':
+ return {
+ ...mapped,
+ id: 'last_name',
+ name: 'Last name',
+ styles: mapInputBlockStyles(block.attributes.styles),
+ };
+ case 'mailpoet-form/segment-select':
+ return {
+ ...mapped,
+ id: 'segments',
+ type: 'segment',
+ name: 'List selection',
+ params: {
+ ...mapped.params,
+ values: block.attributes.values.map((segment) => ({
+ id: segment.id,
+ is_checked: segment.isChecked ? '1' : undefined,
+ })),
+ },
+ };
+ case 'mailpoet-form/submit-button':
+ return {
+ ...mapped,
+ id: 'submit',
+ type: 'submit',
+ name: 'Submit',
+ styles: mapInputBlockStyles(block.attributes.styles),
+ };
+ case 'mailpoet-form/divider':
+ return {
+ ...mapped,
+ id: 'divider',
+ type: 'divider',
+ name: 'Divider',
+ params: {
+ class_name: block.attributes.className || null,
+ height: block.attributes.height,
+ type: block.attributes.type,
+ style: block.attributes.style,
+ divider_height: block.attributes.dividerHeight,
+ divider_width: block.attributes.dividerWidth,
+ color: block.attributes.color,
+ },
+ };
+ case 'mailpoet-form/html':
+ return {
+ ...mapped,
+ id: 'html',
+ type: 'html',
+ name: 'Custom text or HTML',
+ params: {
+ text:
+ block.attributes && block.attributes.content
+ ? block.attributes.content
+ : '',
+ nl2br: block.attributes && block.attributes.nl2br ? '1' : '0',
+ class_name: block.attributes.className || null,
+ },
+ };
+ default:
+ if (block.name.startsWith('mailpoet-form/custom-')) {
+ return mapCustomField(block, customFields, mapped);
+ }
+ return null;
+ }
+ })
+ .filter(Boolean);
};
return mapBlocks;
};
diff --git a/mailpoet/assets/js/src/form_editor/store/controls.jsx b/mailpoet/assets/js/src/form_editor/store/controls.jsx
index 891b4762ff..9a385bded8 100644
--- a/mailpoet/assets/js/src/form_editor/store/controls.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/controls.jsx
@@ -15,20 +15,21 @@ import findBlock from './find_block.jsx';
const formatApiErrorMessage = (response) => {
let errorMessage = null;
if (response.errors.length > 0) {
- errorMessage = response.errors.map((error) => (error.message));
+ errorMessage = response.errors.map((error) => error.message);
errorMessage = errorMessage.join(', ');
}
return errorMessage;
};
// Recursively apply callback on every block in blocks tree
-const mapBlocks = (blocks, callback) => blocks.map((block) => {
- const result = callback(block);
- if (block.innerBlocks) {
- result.innerBlocks = mapBlocks(block.innerBlocks, callback);
- }
- return result;
-});
+const mapBlocks = (blocks, callback) =>
+ blocks.map((block) => {
+ const result = callback(block);
+ if (block.innerBlocks) {
+ result.innerBlocks = mapBlocks(block.innerBlocks, callback);
+ }
+ return result;
+ });
export default {
SAVE_FORM() {
@@ -42,12 +43,14 @@ export default {
}
const formData = select('mailpoet-form-editor').getFormData();
const formBlocks = select('mailpoet-form-editor').getFormBlocks();
- const customFields = select('mailpoet-form-editor').getAllAvailableCustomFields();
+ const customFields = select(
+ 'mailpoet-form-editor',
+ ).getAllAvailableCustomFields();
const blocksToFormBody = blocksToFormBodyFactory(
SETTINGS_DEFAULTS.fontSizes,
SETTINGS_DEFAULTS.colors,
SETTINGS_DEFAULTS.gradients,
- customFields
+ customFields,
);
const requestData = {
...mapFormDataBeforeSaving(formData),
@@ -59,18 +62,26 @@ export default {
endpoint: 'forms',
action: 'saveEditor',
data: requestData,
- }).done((result) => {
- dispatch('mailpoet-form-editor').saveFormDone(result.data.id);
- Cookies.remove(`popup_form_dismissed_${result.data.id}`, { path: '/' });
- }).fail((response) => {
- dispatch('mailpoet-form-editor').saveFormFailed(formatApiErrorMessage(response));
- });
+ })
+ .done((result) => {
+ dispatch('mailpoet-form-editor').saveFormDone(result.data.id);
+ Cookies.remove(`popup_form_dismissed_${result.data.id}`, { path: '/' });
+ })
+ .fail((response) => {
+ dispatch('mailpoet-form-editor').saveFormFailed(
+ formatApiErrorMessage(response),
+ );
+ });
},
SAVE_CUSTOM_FIELD(actionData) {
dispatch('mailpoet-form-editor').saveCustomFieldStarted();
- const customFields = select('mailpoet-form-editor').getAllAvailableCustomFields();
- const customField = customFields.find((cf) => cf.id === actionData.customFieldId);
+ const customFields = select(
+ 'mailpoet-form-editor',
+ ).getAllAvailableCustomFields();
+ const customField = customFields.find(
+ (cf) => cf.id === actionData.customFieldId,
+ );
const requestData = {};
merge(requestData, customField, actionData.data);
MailPoet.Ajax.post({
@@ -80,12 +91,17 @@ export default {
data: requestData,
})
.then((response) => {
- dispatch('mailpoet-form-editor').saveCustomFieldDone(customField.id, response.data);
+ dispatch('mailpoet-form-editor').saveCustomFieldDone(
+ customField.id,
+ response.data,
+ );
if (typeof actionData.onFinish === 'function') actionData.onFinish();
})
.then(dispatch('mailpoet-form-editor').saveForm)
.fail((response) => {
- dispatch('mailpoet-form-editor').saveCustomFieldFailed(formatApiErrorMessage(response));
+ dispatch('mailpoet-form-editor').saveCustomFieldFailed(
+ formatApiErrorMessage(response),
+ );
});
},
@@ -111,18 +127,27 @@ export default {
});
const blockName = registerCustomFieldBlock(customField);
const customFieldBlock = createBlock(blockName);
- dispatch('core/block-editor').replaceBlock(action.clientId, customFieldBlock);
+ dispatch('core/block-editor').replaceBlock(
+ action.clientId,
+ customFieldBlock,
+ );
dispatch('mailpoet-form-editor').createCustomFieldDone(response.data);
})
.fail((response) => {
- dispatch('mailpoet-form-editor').createCustomFieldFailed(formatApiErrorMessage(response));
+ dispatch('mailpoet-form-editor').createCustomFieldFailed(
+ formatApiErrorMessage(response),
+ );
});
},
DELETE_CUSTOM_FIELD(actionData) {
dispatch('mailpoet-form-editor').deleteCustomFieldStarted();
- const customFields = select('mailpoet-form-editor').getAllAvailableCustomFields();
- const customField = customFields.find((cf) => cf.id === actionData.customFieldId);
+ const customFields = select(
+ 'mailpoet-form-editor',
+ ).getAllAvailableCustomFields();
+ const customField = customFields.find(
+ (cf) => cf.id === actionData.customFieldId,
+ );
const namesMap = getCustomFieldBlockSettings(customField);
MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
@@ -136,14 +161,22 @@ export default {
MailPoet.trackEvent('Forms > Delete custom field', {
'Field type': customField.type,
});
- dispatch('mailpoet-form-editor').deleteCustomFieldDone(actionData.customFieldId, actionData.clientId);
+ dispatch('mailpoet-form-editor').deleteCustomFieldDone(
+ actionData.customFieldId,
+ actionData.clientId,
+ );
dispatch('core/block-editor').removeBlock(actionData.clientId);
unregisterBlockType(
- formatCustomFieldBlockName(namesMap[customField.type].name, customField)
+ formatCustomFieldBlockName(
+ namesMap[customField.type].name,
+ customField,
+ ),
);
})
.fail((response) => {
- dispatch('mailpoet-form-editor').deleteCustomFieldFailed(formatApiErrorMessage(response));
+ dispatch('mailpoet-form-editor').deleteCustomFieldFailed(
+ formatApiErrorMessage(response),
+ );
});
},
@@ -152,8 +185,12 @@ export default {
const updatedBlocks = mapBlocks(currentBlocks, (block) => {
const updatedBlock = { ...block };
if (
- ['mailpoet-form/last-name-input', 'mailpoet-form/first-name-input', 'mailpoet-form/email-input'].includes(block.name)
- || block.name.startsWith('mailpoet-form/custom-text')
+ [
+ 'mailpoet-form/last-name-input',
+ 'mailpoet-form/first-name-input',
+ 'mailpoet-form/email-input',
+ ].includes(block.name) ||
+ block.name.startsWith('mailpoet-form/custom-text')
) {
updatedBlock.attributes = {
...updatedBlock.attributes,
@@ -192,14 +229,20 @@ export default {
const currentBlocks = select('mailpoet-form-editor').getFormBlocks();
const fixedBlocks = [...newBlocks];
if (!emailInput) {
- let currentEmailInput = findBlock(currentBlocks, 'mailpoet-form/email-input');
+ let currentEmailInput = findBlock(
+ currentBlocks,
+ 'mailpoet-form/email-input',
+ );
if (!currentEmailInput) {
currentEmailInput = createBlock('mailpoet-form/email-input');
}
fixedBlocks.unshift(currentEmailInput);
}
if (!submitInput) {
- let currentSubmit = findBlock(currentBlocks, 'mailpoet-form/submit-button');
+ let currentSubmit = findBlock(
+ currentBlocks,
+ 'mailpoet-form/submit-button',
+ );
if (!currentSubmit) {
currentSubmit = createBlock('mailpoet-form/submit-button');
}
diff --git a/mailpoet/assets/js/src/form_editor/store/find_block.jsx b/mailpoet/assets/js/src/form_editor/store/find_block.jsx
index a855b4147e..70de496144 100644
--- a/mailpoet/assets/js/src/form_editor/store/find_block.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/find_block.jsx
@@ -1,4 +1,4 @@
-const findBlock = (blocks, name) => (
+const findBlock = (blocks, name) =>
blocks.reduce((result, block) => {
if (result) {
return result;
@@ -10,7 +10,6 @@ const findBlock = (blocks, name) => (
return findBlock(block.innerBlocks, name);
}
return null;
- }, null)
-);
+ }, null);
export default findBlock;
diff --git a/mailpoet/assets/js/src/form_editor/store/form_body_to_blocks.jsx b/mailpoet/assets/js/src/form_editor/store/form_body_to_blocks.jsx
index 053cbdd7ad..964348ee39 100644
--- a/mailpoet/assets/js/src/form_editor/store/form_body_to_blocks.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/form_body_to_blocks.jsx
@@ -10,21 +10,24 @@ import {
import formatCustomFieldBlockName from '../blocks/format_custom_field_block_name.jsx';
import { defaultAttributes as dividerDefaultAttributes } from '../blocks/divider/divider_types';
-const generateId = () => (`${Math.random().toString()}-${Date.now()}`);
+const generateId = () => `${Math.random().toString()}-${Date.now()}`;
-export const customFieldValuesToBlockValues = (values) => values.map((value) => {
- const mappedValue = {
- name: value.value,
- id: generateId(),
- };
- if (has(value, 'is_checked') && value.is_checked) {
- mappedValue.isChecked = true;
- }
- return mappedValue;
-});
+export const customFieldValuesToBlockValues = (values) =>
+ values.map((value) => {
+ const mappedValue = {
+ name: value.value,
+ id: generateId(),
+ };
+ if (has(value, 'is_checked') && value.is_checked) {
+ mappedValue.isChecked = true;
+ }
+ return mappedValue;
+ });
const mapCustomField = (item, customFields, mappedCommonProperties) => {
- const customField = customFields.find((cf) => cf.id === parseInt(item.id, 10));
+ const customField = customFields.find(
+ (cf) => cf.id === parseInt(item.id, 10),
+ );
if (!customField) return null;
const namesMap = {
@@ -60,7 +63,9 @@ const mapCustomField = (item, customFields, mappedCommonProperties) => {
mapped.attributes.defaultToday = !!item.params.is_default_today;
}
if (has(item.params, 'values') && Array.isArray(item.params.values)) {
- mapped.attributes.values = customFieldValuesToBlockValues(item.params.values);
+ mapped.attributes.values = customFieldValuesToBlockValues(
+ item.params.values,
+ );
}
}
@@ -82,14 +87,14 @@ const mapColumnBlocks = (
fontSizeDefinitions,
colorDefinitions,
gradientDefinitions,
- customFields = []
+ customFields = [],
) => {
// eslint-disable-next-line no-use-before-define
const mapFormBodyToBlocks = formBodyToBlocksFactory(
fontSizeDefinitions,
colorDefinitions,
gradientDefinitions,
- customFields
+ customFields,
);
const mapped = {
clientId: generateId(),
@@ -103,28 +108,40 @@ const mapColumnBlocks = (
innerBlocks: mapFormBodyToBlocks(data.body ? data.body : []),
};
const textColorSlug = mapColorSlug(colorDefinitions, data.params.text_color);
- const backgroundColorSlug = mapColorSlug(colorDefinitions, data.params.background_color);
- const gradientSlug = mapGradientSlug(gradientDefinitions, data.params.gradient);
+ const backgroundColorSlug = mapColorSlug(
+ colorDefinitions,
+ data.params.background_color,
+ );
+ const gradientSlug = mapGradientSlug(
+ gradientDefinitions,
+ data.params.gradient,
+ );
if (has(data.params, 'width')) {
// BC fix: Set % as unit for values saved before units were introduced
- mapped.attributes.width = Number.isNaN(Number(data.params.width)) ? data.params.width : `${data.params.width}%`;
+ mapped.attributes.width = Number.isNaN(Number(data.params.width))
+ ? data.params.width
+ : `${data.params.width}%`;
}
if (has(data.params, 'vertical_alignment')) {
mapped.attributes.verticalAlignment = data.params.vertical_alignment;
}
if (has(data.params, 'text_color')) {
mapped.attributes.textColor = textColorSlug;
- mapped.attributes.style.color.text = !textColorSlug ? data.params.text_color : undefined;
+ mapped.attributes.style.color.text = !textColorSlug
+ ? data.params.text_color
+ : undefined;
}
if (has(data.params, 'background_color')) {
mapped.attributes.backgroundColor = backgroundColorSlug;
mapped.attributes.style.color.background = !backgroundColorSlug
- ? data.params.background_color : undefined;
+ ? data.params.background_color
+ : undefined;
}
if (has(data.params, 'gradient')) {
mapped.attributes.gradient = gradientSlug;
mapped.attributes.style.color.gradient = !gradientSlug
- ? data.params.gradient : undefined;
+ ? data.params.gradient
+ : undefined;
}
if (has(data.params, 'class_name') && data.params.class_name) {
mapped.attributes.className = data.params.class_name;
@@ -133,7 +150,8 @@ const mapColumnBlocks = (
mapped.attributes.style.spacing = { padding: data.params.padding };
}
if (has(data.params, 'is_stacked_on_mobile')) {
- mapped.attributes.isStackedOnMobile = data.params.is_stacked_on_mobile === '1';
+ mapped.attributes.isStackedOnMobile =
+ data.params.is_stacked_on_mobile === '1';
}
// BC for columns data without is_stacked_on_mobile property
if (data.type === 'columns' && !has(data.params, 'is_stacked_on_mobile')) {
@@ -153,7 +171,7 @@ export const formBodyToBlocksFactory = (
fontSizeDefinitions,
colorDefinitions,
gradientsDefinitions,
- customFields = []
+ customFields = [],
) => {
if (!Array.isArray(customFields)) {
throw new Error('Mapper expects customFields to be an array.');
@@ -168,222 +186,245 @@ export const formBodyToBlocksFactory = (
throw new Error('Mapper expects form body to be an array.');
}
- return data.map((item) => {
- if (['column', 'columns'].includes(item.type)) {
- return mapColumnBlocks(
- item,
- fontSizeDefinitions,
- colorDefinitions,
- gradientsDefinitions,
- customFields
- );
- }
+ return data
+ .map((item) => {
+ if (['column', 'columns'].includes(item.type)) {
+ return mapColumnBlocks(
+ item,
+ fontSizeDefinitions,
+ colorDefinitions,
+ gradientsDefinitions,
+ customFields,
+ );
+ }
- const mapped = {
- clientId: `${item.id}_${generateId()}`,
- isValid: true,
- innerBlocks: [],
- attributes: {
- labelWithinInput: false,
- mandatory: false,
- className: null,
- },
- };
-
- if (['heading', 'paragraph'].includes(item.type)) {
- mapped.attributes.style = {
- color: {},
- typography: {
- fontSize: undefined,
- lineHeight: undefined,
+ const mapped = {
+ clientId: `${item.id}_${generateId()}`,
+ isValid: true,
+ innerBlocks: [],
+ attributes: {
+ labelWithinInput: false,
+ mandatory: false,
+ className: null,
},
};
- }
- if (item.params && has(item.params, 'class_name')) {
- mapped.attributes.className = item.params.class_name;
- }
- if (item.params && has(item.params, 'required')) {
- mapped.attributes.mandatory = !!item.params.required;
- }
- if (item.params && has(item.params, 'label_within')) {
- mapped.attributes.labelWithinInput = !!item.params.label_within;
- }
- if (item.params) {
- mapped.attributes.label = item.params.label ? item.params.label : '';
- }
- if (item.params && has(item.params, 'text_color')) {
- const textColorSlug = mapColorSlug(colorDefinitions, item.params.text_color);
- mapped.attributes.textColor = textColorSlug;
- if (['heading', 'paragraph'].includes(item.type) && !textColorSlug) {
- mapped.attributes.style.color.text = item.params.text_color;
- } else if (!textColorSlug) {
- mapped.attributes.customTextColor = item.params.text_color;
- }
- }
- if (item.params && has(item.params, 'background_color')) {
- const slug = mapColorSlug(colorDefinitions, item.params.background_color);
- mapped.attributes.backgroundColor = slug;
- if (['heading', 'paragraph'].includes(item.type) && !slug) {
- mapped.attributes.style.color.background = item.params.background_color;
- } else if (!slug) {
- mapped.attributes.customBackgroundColor = item.params.background_color;
- }
- }
- if (item.params && has(item.params, 'font_size')) {
- const slug = mapFontSizeSlug(fontSizeDefinitions, item.params.font_size);
- mapped.attributes.fontSize = slug;
- mapped.attributes.style.typography.fontSize = !slug
- ? asNum(item.params.font_size) : undefined;
- }
- if (item.params && has(item.params, 'line_height')) {
- mapped.attributes.style.typography.lineHeight = item.params.line_height;
- }
- let level = 2;
- switch (item.id) {
- case 'email':
- return {
- ...mapped,
- name: 'mailpoet-form/email-input',
- attributes: {
- ...mapped.attributes,
- styles: mapInputBlockStyles(item.styles),
+ if (['heading', 'paragraph'].includes(item.type)) {
+ mapped.attributes.style = {
+ color: {},
+ typography: {
+ fontSize: undefined,
+ lineHeight: undefined,
},
};
- case 'heading':
- if (item.params && has(item.params, 'level')) {
- level = asNum(item.params.level);
- if (level === undefined) {
- level = 2;
+ }
+
+ if (item.params && has(item.params, 'class_name')) {
+ mapped.attributes.className = item.params.class_name;
+ }
+ if (item.params && has(item.params, 'required')) {
+ mapped.attributes.mandatory = !!item.params.required;
+ }
+ if (item.params && has(item.params, 'label_within')) {
+ mapped.attributes.labelWithinInput = !!item.params.label_within;
+ }
+ if (item.params) {
+ mapped.attributes.label = item.params.label ? item.params.label : '';
+ }
+ if (item.params && has(item.params, 'text_color')) {
+ const textColorSlug = mapColorSlug(
+ colorDefinitions,
+ item.params.text_color,
+ );
+ mapped.attributes.textColor = textColorSlug;
+ if (['heading', 'paragraph'].includes(item.type) && !textColorSlug) {
+ mapped.attributes.style.color.text = item.params.text_color;
+ } else if (!textColorSlug) {
+ mapped.attributes.customTextColor = item.params.text_color;
+ }
+ }
+ if (item.params && has(item.params, 'background_color')) {
+ const slug = mapColorSlug(
+ colorDefinitions,
+ item.params.background_color,
+ );
+ mapped.attributes.backgroundColor = slug;
+ if (['heading', 'paragraph'].includes(item.type) && !slug) {
+ mapped.attributes.style.color.background =
+ item.params.background_color;
+ } else if (!slug) {
+ mapped.attributes.customBackgroundColor =
+ item.params.background_color;
+ }
+ }
+ if (item.params && has(item.params, 'font_size')) {
+ const slug = mapFontSizeSlug(
+ fontSizeDefinitions,
+ item.params.font_size,
+ );
+ mapped.attributes.fontSize = slug;
+ mapped.attributes.style.typography.fontSize = !slug
+ ? asNum(item.params.font_size)
+ : undefined;
+ }
+ if (item.params && has(item.params, 'line_height')) {
+ mapped.attributes.style.typography.lineHeight =
+ item.params.line_height;
+ }
+ let level = 2;
+ switch (item.id) {
+ case 'email':
+ return {
+ ...mapped,
+ name: 'mailpoet-form/email-input',
+ attributes: {
+ ...mapped.attributes,
+ styles: mapInputBlockStyles(item.styles),
+ },
+ };
+ case 'heading':
+ if (item.params && has(item.params, 'level')) {
+ level = asNum(item.params.level);
+ if (level === undefined) {
+ level = 2;
+ }
}
- }
- return {
- ...mapped,
- attributes: {
- ...mapped.attributes,
- content: item.params?.content || '',
- level,
- textAlign: item.params?.align,
- anchor: item.params?.anchor,
- className: item.params?.class_name,
- },
- name: 'core/heading',
- };
- case 'paragraph':
- return {
- ...mapped,
- attributes: {
- ...mapped.attributes,
- content: item.params?.content || '',
- align: item.params?.align,
- className: item.params?.class_name,
- dropCap: item.params?.drop_cap === '1',
- },
- name: 'core/paragraph',
- };
- case 'image':
- return {
- ...mapped,
- name: 'core/image',
- attributes: {
- className: item.params?.class_name || '',
- align: item.params?.align,
- url: item.params?.url,
- alt: item.params?.alt,
- title: item.params?.title,
- caption: item.params?.caption,
- linkDestination: item.params?.link_destination,
- link: item.params?.link,
- href: item.params?.href,
- linkClass: item.params?.link_class,
- rel: item.params?.rel,
- linkTarget: item.params?.link_target,
- id: item.params?.id,
- sizeSlug: item.params?.size_slug,
- width: item.params?.width,
- height: item.params?.height,
- },
- };
- case 'first_name':
- return {
- ...mapped,
- name: 'mailpoet-form/first-name-input',
- attributes: {
- ...mapped.attributes,
- styles: mapInputBlockStyles(item.styles),
- },
- };
- case 'last_name':
- return {
- ...mapped,
- name: 'mailpoet-form/last-name-input',
- attributes: {
- ...mapped.attributes,
- styles: mapInputBlockStyles(item.styles),
- },
- };
- case 'segments':
- if (
- item.params
- && has(item.params, 'values')
- && Array.isArray(item.params.values)
- ) {
- mapped.attributes.values = item.params.values.map((value) => ({
- id: value.id,
- isChecked: value.is_checked === '1' ? true : undefined,
- }));
- } else {
- mapped.attributes.values = [];
- }
- return {
- ...mapped,
- name: 'mailpoet-form/segment-select',
- };
- case 'submit':
- return {
- ...mapped,
- name: 'mailpoet-form/submit-button',
- attributes: {
- ...mapped.attributes,
- styles: mapInputBlockStyles(item.styles),
- },
- };
- case 'divider':
- delete mapped.attributes.label;
- return {
- ...mapped,
- name: 'mailpoet-form/divider',
- attributes: {
- className: mapped.attributes.className,
- height: asNum(item.params?.height ?? dividerDefaultAttributes.height),
- type: item.params?.type ?? dividerDefaultAttributes.type,
- style: item.params?.style ?? dividerDefaultAttributes.style,
- dividerHeight: asNum(
- item.params?.divider_height ?? dividerDefaultAttributes.dividerHeight
- ),
- dividerWidth: asNum(
- item.params?.divider_width ?? dividerDefaultAttributes.dividerWidth
- ),
- color: item.params?.color ?? dividerDefaultAttributes.color,
- },
- };
- case 'html':
- return {
- ...mapped,
- name: 'mailpoet-form/html',
- attributes: {
- className: mapped.attributes.className,
- content: item.params && item.params.text ? item.params.text : '',
- nl2br: item.params && item.params.nl2br ? !!item.params.nl2br : false,
- },
- };
- default:
- if (Number.isInteger(parseInt(item.id, 10))) {
- return mapCustomField(item, customFields, mapped);
- }
- return null;
- }
- }).filter(Boolean);
+ return {
+ ...mapped,
+ attributes: {
+ ...mapped.attributes,
+ content: item.params?.content || '',
+ level,
+ textAlign: item.params?.align,
+ anchor: item.params?.anchor,
+ className: item.params?.class_name,
+ },
+ name: 'core/heading',
+ };
+ case 'paragraph':
+ return {
+ ...mapped,
+ attributes: {
+ ...mapped.attributes,
+ content: item.params?.content || '',
+ align: item.params?.align,
+ className: item.params?.class_name,
+ dropCap: item.params?.drop_cap === '1',
+ },
+ name: 'core/paragraph',
+ };
+ case 'image':
+ return {
+ ...mapped,
+ name: 'core/image',
+ attributes: {
+ className: item.params?.class_name || '',
+ align: item.params?.align,
+ url: item.params?.url,
+ alt: item.params?.alt,
+ title: item.params?.title,
+ caption: item.params?.caption,
+ linkDestination: item.params?.link_destination,
+ link: item.params?.link,
+ href: item.params?.href,
+ linkClass: item.params?.link_class,
+ rel: item.params?.rel,
+ linkTarget: item.params?.link_target,
+ id: item.params?.id,
+ sizeSlug: item.params?.size_slug,
+ width: item.params?.width,
+ height: item.params?.height,
+ },
+ };
+ case 'first_name':
+ return {
+ ...mapped,
+ name: 'mailpoet-form/first-name-input',
+ attributes: {
+ ...mapped.attributes,
+ styles: mapInputBlockStyles(item.styles),
+ },
+ };
+ case 'last_name':
+ return {
+ ...mapped,
+ name: 'mailpoet-form/last-name-input',
+ attributes: {
+ ...mapped.attributes,
+ styles: mapInputBlockStyles(item.styles),
+ },
+ };
+ case 'segments':
+ if (
+ item.params &&
+ has(item.params, 'values') &&
+ Array.isArray(item.params.values)
+ ) {
+ mapped.attributes.values = item.params.values.map((value) => ({
+ id: value.id,
+ isChecked: value.is_checked === '1' ? true : undefined,
+ }));
+ } else {
+ mapped.attributes.values = [];
+ }
+ return {
+ ...mapped,
+ name: 'mailpoet-form/segment-select',
+ };
+ case 'submit':
+ return {
+ ...mapped,
+ name: 'mailpoet-form/submit-button',
+ attributes: {
+ ...mapped.attributes,
+ styles: mapInputBlockStyles(item.styles),
+ },
+ };
+ case 'divider':
+ delete mapped.attributes.label;
+ return {
+ ...mapped,
+ name: 'mailpoet-form/divider',
+ attributes: {
+ className: mapped.attributes.className,
+ height: asNum(
+ item.params?.height ?? dividerDefaultAttributes.height,
+ ),
+ type: item.params?.type ?? dividerDefaultAttributes.type,
+ style: item.params?.style ?? dividerDefaultAttributes.style,
+ dividerHeight: asNum(
+ item.params?.divider_height ??
+ dividerDefaultAttributes.dividerHeight,
+ ),
+ dividerWidth: asNum(
+ item.params?.divider_width ??
+ dividerDefaultAttributes.dividerWidth,
+ ),
+ color: item.params?.color ?? dividerDefaultAttributes.color,
+ },
+ };
+ case 'html':
+ return {
+ ...mapped,
+ name: 'mailpoet-form/html',
+ attributes: {
+ className: mapped.attributes.className,
+ content:
+ item.params && item.params.text ? item.params.text : '',
+ nl2br:
+ item.params && item.params.nl2br
+ ? !!item.params.nl2br
+ : false,
+ },
+ };
+ default:
+ if (Number.isInteger(parseInt(item.id, 10))) {
+ return mapCustomField(item, customFields, mapped);
+ }
+ return null;
+ }
+ })
+ .filter(Boolean);
};
return formBodyToBlocks;
diff --git a/mailpoet/assets/js/src/form_editor/store/form_validator.jsx b/mailpoet/assets/js/src/form_editor/store/form_validator.jsx
index 96bb8f675a..b4df0e8602 100644
--- a/mailpoet/assets/js/src/form_editor/store/form_validator.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/form_validator.jsx
@@ -1,22 +1,31 @@
import findBlock from './find_block.jsx';
export default (formData, formBlocks) => {
- if (!formData || !formData.settings || !Array.isArray(formData.settings.segments)) {
+ if (
+ !formData ||
+ !formData.settings ||
+ !Array.isArray(formData.settings.segments)
+ ) {
throw new Error('formData.settings.segments are expected to be an array.');
}
if (!Array.isArray(formBlocks)) {
throw new Error('formBlocks are expected to be an array.');
}
- const customSegmentsBlock = findBlock(formBlocks, 'mailpoet-form/segment-select');
+ const customSegmentsBlock = findBlock(
+ formBlocks,
+ 'mailpoet-form/segment-select',
+ );
const errors = [];
if (
- (!customSegmentsBlock || customSegmentsBlock.attributes.values.length === 0)
- && (!formData.settings.segments || formData.settings.segments.length === 0)
+ (!customSegmentsBlock ||
+ customSegmentsBlock.attributes.values.length === 0) &&
+ (!formData.settings.segments || formData.settings.segments.length === 0)
) {
errors.push('missing-lists');
}
if (
- (customSegmentsBlock && customSegmentsBlock.attributes.values.length === 0)
+ customSegmentsBlock &&
+ customSegmentsBlock.attributes.values.length === 0
) {
errors.push('missing-lists-in-custom-segments-block');
}
diff --git a/mailpoet/assets/js/src/form_editor/store/map_form_data_after_loading.jsx b/mailpoet/assets/js/src/form_editor/store/map_form_data_after_loading.jsx
index afd45067e3..cd6fedfe5e 100644
--- a/mailpoet/assets/js/src/form_editor/store/map_form_data_after_loading.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/map_form_data_after_loading.jsx
@@ -10,59 +10,79 @@ export default function mapFormDataAfterLoading(data) {
formPlacement: {
popup: {
enabled: data.settings.form_placement?.popup?.enabled === '1',
- exitIntentEnabled: data.settings.form_placement?.popup?.exit_intent_enabled === '1',
- delay: data.settings.form_placement?.popup?.delay !== undefined
- ? asNum(data.settings.form_placement?.popup?.delay)
- : defaults.popupForm.formDelay,
- cookieExpiration: data.settings.form_placement?.popup?.cookieExpiration !== undefined
- ? asNum(data.settings.form_placement?.popup?.cookieExpiration)
- : defaults.popupForm.formCookieExpiration,
- animation: data.settings.form_placement?.popup?.animation !== undefined
- ? data.settings.form_placement?.popup?.animation
- : defaults.popupForm.animation,
- styles: { ...defaults.popupForm.styles, ...data.settings.form_placement?.popup?.styles },
+ exitIntentEnabled:
+ data.settings.form_placement?.popup?.exit_intent_enabled === '1',
+ delay:
+ data.settings.form_placement?.popup?.delay !== undefined
+ ? asNum(data.settings.form_placement?.popup?.delay)
+ : defaults.popupForm.formDelay,
+ cookieExpiration:
+ data.settings.form_placement?.popup?.cookieExpiration !== undefined
+ ? asNum(data.settings.form_placement?.popup?.cookieExpiration)
+ : defaults.popupForm.formCookieExpiration,
+ animation:
+ data.settings.form_placement?.popup?.animation !== undefined
+ ? data.settings.form_placement?.popup?.animation
+ : defaults.popupForm.animation,
+ styles: {
+ ...defaults.popupForm.styles,
+ ...data.settings.form_placement?.popup?.styles,
+ },
categories: data.settings.form_placement?.popup?.categories ?? [],
tags: data.settings.form_placement?.popup?.tags ?? [],
posts: {
all: data.settings.form_placement?.popup?.posts?.all === '1',
- selected: Array.isArray(data.settings.form_placement?.popup?.posts?.selected)
+ selected: Array.isArray(
+ data.settings.form_placement?.popup?.posts?.selected,
+ )
? data.settings.form_placement?.popup?.posts?.selected
: [],
},
pages: {
all: data.settings.form_placement?.popup?.pages?.all === '1',
- selected: Array.isArray(data.settings.form_placement?.popup?.pages?.selected)
+ selected: Array.isArray(
+ data.settings.form_placement?.popup?.pages?.selected,
+ )
? data.settings.form_placement?.popup?.pages?.selected
: [],
},
},
fixedBar: {
enabled: data.settings.form_placement?.fixed_bar?.enabled === '1',
- delay: data.settings.form_placement?.fixed_bar?.delay !== undefined
- ? asNum(data.settings.form_placement?.fixed_bar?.delay)
- : defaults.fixedBarForm.formDelay,
- cookieExpiration: data.settings.form_placement?.fixed_bar?.cookieExpiration !== undefined
- ? asNum(data.settings.form_placement?.fixed_bar?.cookieExpiration)
- : defaults.fixedBarForm.formCookieExpiration,
- animation: data.settings.form_placement?.fixed_bar?.animation
- ?? defaults.fixedBarForm.animation,
+ delay:
+ data.settings.form_placement?.fixed_bar?.delay !== undefined
+ ? asNum(data.settings.form_placement?.fixed_bar?.delay)
+ : defaults.fixedBarForm.formDelay,
+ cookieExpiration:
+ data.settings.form_placement?.fixed_bar?.cookieExpiration !==
+ undefined
+ ? asNum(data.settings.form_placement?.fixed_bar?.cookieExpiration)
+ : defaults.fixedBarForm.formCookieExpiration,
+ animation:
+ data.settings.form_placement?.fixed_bar?.animation ??
+ defaults.fixedBarForm.animation,
styles: {
...defaults.fixedBarForm.styles,
...data.settings.form_placement?.fixed_bar?.styles,
},
- position: data.settings.form_placement?.fixed_bar?.position
- ?? defaults.fixedBarForm.position,
+ position:
+ data.settings.form_placement?.fixed_bar?.position ??
+ defaults.fixedBarForm.position,
categories: data.settings.form_placement?.fixed_bar?.categories ?? [],
tags: data.settings.form_placement?.fixed_bar?.tags ?? [],
posts: {
all: data.settings.form_placement?.fixed_bar?.posts?.all === '1',
- selected: Array.isArray(data.settings.form_placement?.fixed_bar?.posts?.selected)
+ selected: Array.isArray(
+ data.settings.form_placement?.fixed_bar?.posts?.selected,
+ )
? data.settings.form_placement?.fixed_bar?.posts?.selected
: [],
},
pages: {
all: data.settings.form_placement?.fixed_bar?.pages?.all === '1',
- selected: Array.isArray(data.settings.form_placement?.fixed_bar?.pages?.selected)
+ selected: Array.isArray(
+ data.settings.form_placement?.fixed_bar?.pages?.selected,
+ )
? data.settings.form_placement?.fixed_bar?.pages?.selected
: [],
},
@@ -73,33 +93,43 @@ export default function mapFormDataAfterLoading(data) {
...defaults.belowPostForm.styles,
...data.settings.form_placement?.below_posts?.styles,
},
- categories: data.settings.form_placement?.below_posts?.categories ?? [],
+ categories:
+ data.settings.form_placement?.below_posts?.categories ?? [],
tags: data.settings.form_placement?.below_posts?.tags ?? [],
posts: {
all: data.settings.form_placement?.below_posts?.posts?.all === '1',
- selected: Array.isArray(data.settings.form_placement?.below_posts?.posts?.selected)
+ selected: Array.isArray(
+ data.settings.form_placement?.below_posts?.posts?.selected,
+ )
? data.settings.form_placement?.below_posts?.posts?.selected
: [],
},
pages: {
all: data.settings.form_placement?.below_posts?.pages?.all === '1',
- selected: Array.isArray(data.settings.form_placement?.below_posts?.pages?.selected)
+ selected: Array.isArray(
+ data.settings.form_placement?.below_posts?.pages?.selected,
+ )
? data.settings.form_placement?.below_posts?.pages?.selected
: [],
},
},
slideIn: {
enabled: data.settings.form_placement?.slide_in?.enabled === '1',
- delay: data.settings.form_placement?.slide_in?.delay !== undefined
- ? asNum(data.settings.form_placement?.slide_in?.delay)
- : defaults.slideInForm.formDelay,
- cookieExpiration: data.settings.form_placement?.slide_in?.cookieExpiration !== undefined
- ? asNum(data.settings.form_placement?.slide_in?.cookieExpiration)
- : defaults.slideInForm.formCookieExpiration,
- position: data.settings.form_placement?.slide_in?.position
- ?? defaults.slideInForm.position,
- animation: data.settings.form_placement?.slide_in?.animation
- ?? defaults.slideInForm.animation,
+ delay:
+ data.settings.form_placement?.slide_in?.delay !== undefined
+ ? asNum(data.settings.form_placement?.slide_in?.delay)
+ : defaults.slideInForm.formDelay,
+ cookieExpiration:
+ data.settings.form_placement?.slide_in?.cookieExpiration !==
+ undefined
+ ? asNum(data.settings.form_placement?.slide_in?.cookieExpiration)
+ : defaults.slideInForm.formCookieExpiration,
+ position:
+ data.settings.form_placement?.slide_in?.position ??
+ defaults.slideInForm.position,
+ animation:
+ data.settings.form_placement?.slide_in?.animation ??
+ defaults.slideInForm.animation,
styles: {
...defaults.slideInForm.styles,
...data.settings.form_placement?.slide_in?.styles,
@@ -108,35 +138,46 @@ export default function mapFormDataAfterLoading(data) {
tags: data.settings.form_placement?.slide_in?.tags ?? [],
posts: {
all: data.settings.form_placement?.slide_in?.posts?.all === '1',
- selected: Array.isArray(data.settings.form_placement?.slide_in?.posts?.selected)
+ selected: Array.isArray(
+ data.settings.form_placement?.slide_in?.posts?.selected,
+ )
? data.settings.form_placement?.slide_in?.posts?.selected
: [],
},
pages: {
all: data.settings.form_placement?.slide_in?.pages?.all === '1',
- selected: Array.isArray(data.settings.form_placement?.slide_in?.pages?.selected)
+ selected: Array.isArray(
+ data.settings.form_placement?.slide_in?.pages?.selected,
+ )
? data.settings.form_placement?.slide_in?.pages?.selected
: [],
},
},
others: {
- styles: { ...defaults.otherForm.styles, ...data.settings.form_placement?.others?.styles },
+ styles: {
+ ...defaults.otherForm.styles,
+ ...data.settings.form_placement?.others?.styles,
+ },
},
},
alignment: data.settings.alignment ?? defaults.formStyles.alignment,
- borderRadius: data.settings.border_radius !== undefined
- ? asNum(data.settings.border_radius)
- : defaults.formStyles.borderRadius,
- borderSize: data.settings.border_size !== undefined
- ? asNum(data.settings.border_size)
- : defaults.formStyles.borderSize,
- formPadding: data.settings.form_padding !== undefined
- ? asNum(data.settings.form_padding)
- : defaults.formStyles.formPadding,
- inputPadding: data.settings.input_padding !== undefined
- ? asNum(data.settings.input_padding)
- : defaults.formStyles.inputPadding,
+ borderRadius:
+ data.settings.border_radius !== undefined
+ ? asNum(data.settings.border_radius)
+ : defaults.formStyles.borderRadius,
+ borderSize:
+ data.settings.border_size !== undefined
+ ? asNum(data.settings.border_size)
+ : defaults.formStyles.borderSize,
+ formPadding:
+ data.settings.form_padding !== undefined
+ ? asNum(data.settings.form_padding)
+ : defaults.formStyles.formPadding,
+ inputPadding:
+ data.settings.input_padding !== undefined
+ ? asNum(data.settings.input_padding)
+ : defaults.formStyles.inputPadding,
borderColor: data.settings.border_color,
fontFamily: data.settings.font_family,
fontSize: data.settings.fontSize && asNum(data.settings.fontSize),
@@ -144,24 +185,25 @@ export default function mapFormDataAfterLoading(data) {
errorValidationColor: data.settings.error_validation_color,
backgroundImageUrl: data.settings.background_image_url,
backgroundImageDisplay: data.settings.background_image_display,
- closeButton: data.settings.close_button ?? defaults.formStyles.closeButton,
+ closeButton:
+ data.settings.close_button ?? defaults.formStyles.closeButton,
},
};
mapped.settings.formPlacement.belowPosts.styles.width.value = asNum(
- mapped.settings.formPlacement.belowPosts.styles.width.value
+ mapped.settings.formPlacement.belowPosts.styles.width.value,
);
mapped.settings.formPlacement.slideIn.styles.width.value = asNum(
- mapped.settings.formPlacement.slideIn.styles.width.value
+ mapped.settings.formPlacement.slideIn.styles.width.value,
);
mapped.settings.formPlacement.fixedBar.styles.width.value = asNum(
- mapped.settings.formPlacement.fixedBar.styles.width.value
+ mapped.settings.formPlacement.fixedBar.styles.width.value,
);
mapped.settings.formPlacement.popup.styles.width.value = asNum(
- mapped.settings.formPlacement.popup.styles.width.value
+ mapped.settings.formPlacement.popup.styles.width.value,
);
mapped.settings.formPlacement.others.styles.width.value = asNum(
- mapped.settings.formPlacement.others.styles.width.value
+ mapped.settings.formPlacement.others.styles.width.value,
);
// Cleanup unused properties
diff --git a/mailpoet/assets/js/src/form_editor/store/map_form_data_before_saving.jsx b/mailpoet/assets/js/src/form_editor/store/map_form_data_before_saving.jsx
index ca1530f25c..78f0265706 100644
--- a/mailpoet/assets/js/src/form_editor/store/map_form_data_before_saving.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/map_form_data_before_saving.jsx
@@ -5,70 +5,106 @@ export default function mapFormDataBeforeSaving(data) {
...data.settings,
form_placement: {
popup: {
- enabled: data.settings.formPlacement?.popup?.enabled === true ? '1' : '',
- exit_intent_enabled: data.settings.formPlacement?.popup?.exitIntentEnabled ? '1' : '',
+ enabled:
+ data.settings.formPlacement?.popup?.enabled === true ? '1' : '',
+ exit_intent_enabled: data.settings.formPlacement?.popup
+ ?.exitIntentEnabled
+ ? '1'
+ : '',
delay: data.settings.formPlacement?.popup?.delay,
- cookieExpiration: data.settings.formPlacement?.popup?.cookieExpiration,
+ cookieExpiration:
+ data.settings.formPlacement?.popup?.cookieExpiration,
styles: data.settings.formPlacement?.popup?.styles,
animation: data.settings.formPlacement?.popup?.animation,
categories: data.settings.formPlacement?.popup?.categories ?? [],
tags: data.settings.formPlacement?.popup?.tags ?? [],
posts: {
- all: data.settings.formPlacement?.popup?.posts?.all === true ? '1' : '',
+ all:
+ data.settings.formPlacement?.popup?.posts?.all === true
+ ? '1'
+ : '',
selected: data.settings.formPlacement?.popup?.posts?.selected,
},
pages: {
- all: data.settings.formPlacement?.popup?.pages?.all === true ? '1' : '',
+ all:
+ data.settings.formPlacement?.popup?.pages?.all === true
+ ? '1'
+ : '',
selected: data.settings.formPlacement?.popup?.pages?.selected,
},
},
fixed_bar: {
- enabled: data.settings.formPlacement?.fixedBar?.enabled === true ? '1' : '',
+ enabled:
+ data.settings.formPlacement?.fixedBar?.enabled === true ? '1' : '',
delay: data.settings.formPlacement?.fixedBar?.delay,
- cookieExpiration: data.settings.formPlacement?.fixedBar?.cookieExpiration,
+ cookieExpiration:
+ data.settings.formPlacement?.fixedBar?.cookieExpiration,
styles: data.settings.formPlacement?.fixedBar?.styles,
position: data.settings.formPlacement?.fixedBar?.position,
animation: data.settings.formPlacement?.fixedBar?.animation,
categories: data.settings.formPlacement?.fixedBar?.categories ?? [],
tags: data.settings.formPlacement?.fixedBar?.tags ?? [],
posts: {
- all: data.settings.formPlacement?.fixedBar?.posts?.all === true ? '1' : '',
+ all:
+ data.settings.formPlacement?.fixedBar?.posts?.all === true
+ ? '1'
+ : '',
selected: data.settings.formPlacement?.fixedBar?.posts?.selected,
},
pages: {
- all: data.settings.formPlacement?.fixedBar?.pages?.all === true ? '1' : '',
+ all:
+ data.settings.formPlacement?.fixedBar?.pages?.all === true
+ ? '1'
+ : '',
selected: data.settings.formPlacement?.fixedBar?.pages?.selected,
},
},
below_posts: {
- enabled: data.settings.formPlacement?.belowPosts?.enabled === true ? '1' : '',
+ enabled:
+ data.settings.formPlacement?.belowPosts?.enabled === true
+ ? '1'
+ : '',
styles: data.settings.formPlacement?.belowPosts?.styles,
categories: data.settings.formPlacement?.belowPosts?.categories ?? [],
tags: data.settings.formPlacement?.belowPosts?.tags ?? [],
posts: {
- all: data.settings.formPlacement?.belowPosts?.posts?.all === true ? '1' : '',
+ all:
+ data.settings.formPlacement?.belowPosts?.posts?.all === true
+ ? '1'
+ : '',
selected: data.settings.formPlacement?.belowPosts?.posts?.selected,
},
pages: {
- all: data.settings.formPlacement?.belowPosts?.pages?.all === true ? '1' : '',
+ all:
+ data.settings.formPlacement?.belowPosts?.pages?.all === true
+ ? '1'
+ : '',
selected: data.settings.formPlacement?.belowPosts?.pages?.selected,
},
},
slide_in: {
- enabled: data.settings.formPlacement?.slideIn?.enabled === true ? '1' : '',
+ enabled:
+ data.settings.formPlacement?.slideIn?.enabled === true ? '1' : '',
delay: data.settings.formPlacement?.slideIn?.delay,
- cookieExpiration: data.settings.formPlacement?.slideIn?.cookieExpiration,
+ cookieExpiration:
+ data.settings.formPlacement?.slideIn?.cookieExpiration,
position: data.settings.formPlacement?.slideIn?.position,
animation: data.settings.formPlacement?.slideIn?.animation,
styles: data.settings.formPlacement?.slideIn?.styles,
categories: data.settings.formPlacement?.slideIn?.categories ?? [],
tags: data.settings.formPlacement?.slideIn?.tags ?? [],
posts: {
- all: data.settings.formPlacement?.slideIn?.posts?.all === true ? '1' : '',
+ all:
+ data.settings.formPlacement?.slideIn?.posts?.all === true
+ ? '1'
+ : '',
selected: data.settings.formPlacement?.slideIn?.posts?.selected,
},
pages: {
- all: data.settings.formPlacement?.slideIn?.pages?.all === true ? '1' : '',
+ all:
+ data.settings.formPlacement?.slideIn?.pages?.all === true
+ ? '1'
+ : '',
selected: data.settings.formPlacement?.slideIn?.pages?.selected,
},
},
diff --git a/mailpoet/assets/js/src/form_editor/store/mapping/to_blocks/styles_mapper.ts b/mailpoet/assets/js/src/form_editor/store/mapping/to_blocks/styles_mapper.ts
index 42303ad5a0..9dfd8eb631 100644
--- a/mailpoet/assets/js/src/form_editor/store/mapping/to_blocks/styles_mapper.ts
+++ b/mailpoet/assets/js/src/form_editor/store/mapping/to_blocks/styles_mapper.ts
@@ -60,7 +60,10 @@ export const mapInputBlockStyles = (styles: InputBlockStylesServerData) => {
return mappedStyles;
};
-export const mapColorSlug = (colorDefinitions: ColorDefinition[], colorValue) => {
+export const mapColorSlug = (
+ colorDefinitions: ColorDefinition[],
+ colorValue,
+) => {
const result = colorDefinitions.find((color) => color.color === colorValue);
return result ? result.slug : undefined;
};
@@ -72,7 +75,7 @@ export const mapGradientSlug = (definitions: GradientDefinition[], value) => {
export const mapFontSizeSlug = (
fontSizeDefinitions: FontSizeDefinition[],
- fontSizeValue:string,
+ fontSizeValue: string,
) => {
let value = 0;
if (fontSizeValue) {
@@ -81,6 +84,8 @@ export const mapFontSizeSlug = (
value = 2;
}
}
- const result = fontSizeDefinitions.find((fontSize) => fontSize.size === value);
+ const result = fontSizeDefinitions.find(
+ (fontSize) => fontSize.size === value,
+ );
return result ? result.slug : undefined;
};
diff --git a/mailpoet/assets/js/src/form_editor/store/reducer.jsx b/mailpoet/assets/js/src/form_editor/store/reducer.jsx
index 7bd1144826..ee15701843 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducer.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducer.jsx
@@ -19,7 +19,10 @@ import saveFormDone from './reducers/save_form_done.jsx';
import saveFormFailed from './reducers/save_form_failed.jsx';
import saveFormStartedFactory from './reducers/save_form_started.jsx';
import switchDefaultSidebarTab from './reducers/switch_sidebar_tab.jsx';
-import { toggleSidebar, toggleInserterSidebar } from './reducers/toggle_sidebar.ts';
+import {
+ toggleSidebar,
+ toggleInserterSidebar,
+} from './reducers/toggle_sidebar.ts';
import toggleSidebarPanel from './reducers/toggle_sidebar_panel.jsx';
import changeFormBlocks from './reducers/change_form_blocks.jsx';
import saveCustomFieldDone from './reducers/save_custom_field_done.jsx';
@@ -31,10 +34,7 @@ import {
customFieldDeleteFailed,
} from './reducers/custom_field_delete.jsx';
import changeActiveSidebar from './reducers/change_active_sidebar';
-import {
- disableForm,
- enableForm,
-} from './reducers/toggle_form';
+import { disableForm, enableForm } from './reducers/toggle_form';
import toggleFullscreen from './reducers/toggle_fullscreen';
import {
createHistoryRecord,
@@ -47,40 +47,74 @@ const saveFormStarted = saveFormStartedFactory(MailPoet);
const mainReducer = (state, action) => {
switch (action.type) {
- case 'ENABLE_FORM': return enableForm(state);
- case 'DISABLE_FORM': return disableForm(state);
- case 'TOGGLE_FULLSCREEN': return toggleFullscreen(state, action);
- case 'CREATE_CUSTOM_FIELD_DONE': return createCustomFieldDone(state, action);
- case 'CREATE_CUSTOM_FIELD_FAILED': return createCustomFieldFailed(state, action);
- case 'CREATE_CUSTOM_FIELD_STARTED': return createCustomFieldStarted(state, action);
- case 'CHANGE_FORM_BLOCKS': return changeFormBlocks(state, action);
- case 'CHANGE_FORM_NAME': return changeFormName(state, action);
- case 'CHANGE_FORM_SETTINGS': return changeFormSettings(state, action);
- case 'CHANGE_FORM_STYLES': return changeFormStyles(state, action);
- case 'CHANGE_PREVIEW_SETTINGS': return changePreviewSettings(state, action);
- case 'CUSTOM_FIELD_EDITED': return customFieldEdited(state);
- case 'REMOVE_NOTICE': return removeNotice(state, action);
- case 'SHOW_PREVIEW': return showPreview(state, action);
- case 'HIDE_PREVIEW': return hidePreview(state, action);
- case 'PREVIEW_DATA_NOT_SAVED': return previewDataNotSaved(state, action);
- case 'PREVIEW_DATA_SAVED': return previewDataSaved(state, action);
- case 'SAVE_FORM_DONE': return saveFormDone(state, action);
- case 'SAVE_FORM_FAILED': return saveFormFailed(state, action);
- case 'SAVE_FORM_STARTED': return saveFormStarted(state);
- case 'SAVE_CUSTOM_FIELD_DONE': return saveCustomFieldDone(state, action);
- case 'SAVE_CUSTOM_FIELD_FAILED': return saveCustomFieldFailed(state, action);
- case 'SAVE_CUSTOM_FIELD_STARTED': return saveCustomFieldStarted(state);
- case 'SWITCH_DEFAULT_SIDEBAR_TAB': return switchDefaultSidebarTab(state, action);
- case 'TOGGLE_SIDEBAR': return toggleSidebar(state, action);
- case 'TOGGLE_INSERTER_SIDEBAR': return toggleInserterSidebar(state, action);
- case 'TOGGLE_SIDEBAR_PANEL': return toggleSidebarPanel(state, action);
- case 'DELETE_CUSTOM_FIELD_STARTED': return customFieldDeleteStart(state, action);
- case 'DELETE_CUSTOM_FIELD_DONE': return customFieldDeleteDone(state, action);
- case 'DELETE_CUSTOM_FIELD_FAILED': return customFieldDeleteFailed(state, action);
- case 'CHANGE_ACTIVE_SIDEBAR': return changeActiveSidebar(state, action);
- case 'HISTORY_UNDO': return historyUndo(state);
- case 'HISTORY_REDO': return historyRedo(state);
- case 'TUTORIAL_DISMISSED': return tutorialDismiss(state);
+ case 'ENABLE_FORM':
+ return enableForm(state);
+ case 'DISABLE_FORM':
+ return disableForm(state);
+ case 'TOGGLE_FULLSCREEN':
+ return toggleFullscreen(state, action);
+ case 'CREATE_CUSTOM_FIELD_DONE':
+ return createCustomFieldDone(state, action);
+ case 'CREATE_CUSTOM_FIELD_FAILED':
+ return createCustomFieldFailed(state, action);
+ case 'CREATE_CUSTOM_FIELD_STARTED':
+ return createCustomFieldStarted(state, action);
+ case 'CHANGE_FORM_BLOCKS':
+ return changeFormBlocks(state, action);
+ case 'CHANGE_FORM_NAME':
+ return changeFormName(state, action);
+ case 'CHANGE_FORM_SETTINGS':
+ return changeFormSettings(state, action);
+ case 'CHANGE_FORM_STYLES':
+ return changeFormStyles(state, action);
+ case 'CHANGE_PREVIEW_SETTINGS':
+ return changePreviewSettings(state, action);
+ case 'CUSTOM_FIELD_EDITED':
+ return customFieldEdited(state);
+ case 'REMOVE_NOTICE':
+ return removeNotice(state, action);
+ case 'SHOW_PREVIEW':
+ return showPreview(state, action);
+ case 'HIDE_PREVIEW':
+ return hidePreview(state, action);
+ case 'PREVIEW_DATA_NOT_SAVED':
+ return previewDataNotSaved(state, action);
+ case 'PREVIEW_DATA_SAVED':
+ return previewDataSaved(state, action);
+ case 'SAVE_FORM_DONE':
+ return saveFormDone(state, action);
+ case 'SAVE_FORM_FAILED':
+ return saveFormFailed(state, action);
+ case 'SAVE_FORM_STARTED':
+ return saveFormStarted(state);
+ case 'SAVE_CUSTOM_FIELD_DONE':
+ return saveCustomFieldDone(state, action);
+ case 'SAVE_CUSTOM_FIELD_FAILED':
+ return saveCustomFieldFailed(state, action);
+ case 'SAVE_CUSTOM_FIELD_STARTED':
+ return saveCustomFieldStarted(state);
+ case 'SWITCH_DEFAULT_SIDEBAR_TAB':
+ return switchDefaultSidebarTab(state, action);
+ case 'TOGGLE_SIDEBAR':
+ return toggleSidebar(state, action);
+ case 'TOGGLE_INSERTER_SIDEBAR':
+ return toggleInserterSidebar(state, action);
+ case 'TOGGLE_SIDEBAR_PANEL':
+ return toggleSidebarPanel(state, action);
+ case 'DELETE_CUSTOM_FIELD_STARTED':
+ return customFieldDeleteStart(state, action);
+ case 'DELETE_CUSTOM_FIELD_DONE':
+ return customFieldDeleteDone(state, action);
+ case 'DELETE_CUSTOM_FIELD_FAILED':
+ return customFieldDeleteFailed(state, action);
+ case 'CHANGE_ACTIVE_SIDEBAR':
+ return changeActiveSidebar(state, action);
+ case 'HISTORY_UNDO':
+ return historyUndo(state);
+ case 'HISTORY_REDO':
+ return historyRedo(state);
+ case 'TUTORIAL_DISMISSED':
+ return tutorialDismiss(state);
default:
return state;
}
@@ -88,10 +122,10 @@ const mainReducer = (state, action) => {
const undoRedoReducer = (state, action) => {
if (
- action.type === 'CHANGE_FORM_BLOCKS'
- || action.type === 'CHANGE_FORM_NAME'
- || action.type === 'CHANGE_FORM_SETTINGS'
- || action.type === 'CHANGE_FORM_STYLES'
+ action.type === 'CHANGE_FORM_BLOCKS' ||
+ action.type === 'CHANGE_FORM_NAME' ||
+ action.type === 'CHANGE_FORM_SETTINGS' ||
+ action.type === 'CHANGE_FORM_STYLES'
) {
return createHistoryRecord(state);
}
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_done.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_done.jsx
index 9a282e35aa..41b1ec9e56 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_done.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_done.jsx
@@ -1,7 +1,9 @@
import MailPoet from 'mailpoet';
export default (state, action) => {
- const notices = state.notices.filter((notice) => notice.id !== 'custom-field');
+ const notices = state.notices.filter(
+ (notice) => notice.id !== 'custom-field',
+ );
notices.push({
id: 'custom-field',
content: MailPoet.I18n.t('customFieldSaved'),
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_failed.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_failed.jsx
index 2383411181..576f128a46 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_failed.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_failed.jsx
@@ -1,5 +1,7 @@
export default (state, action) => {
- const notices = state.notices.filter((notice) => notice.id !== 'custom-field');
+ const notices = state.notices.filter(
+ (notice) => notice.id !== 'custom-field',
+ );
notices.push({
id: 'custom-field',
content: action.message,
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_started.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_started.jsx
index b5c25b6cfd..3337784638 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_started.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/create_custom_field_started.jsx
@@ -1,13 +1,20 @@
import { trim } from 'lodash';
export default (MailPoet) => (state, action) => {
- const notices = state.notices.filter((notice) => notice.id !== 'custom-field');
+ const notices = state.notices.filter(
+ (notice) => notice.id !== 'custom-field',
+ );
const fieldName = trim(action.customField.name);
- const duplicity = state.customFields.find((field) => (field.name === fieldName));
+ const duplicity = state.customFields.find(
+ (field) => field.name === fieldName,
+ );
if (duplicity) {
notices.push({
id: 'custom-field',
- content: MailPoet.I18n.t('customFieldWithNameExists').replace('[name]', fieldName),
+ content: MailPoet.I18n.t('customFieldWithNameExists').replace(
+ '[name]',
+ fieldName,
+ ),
isDismissible: true,
status: 'error',
});
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/custom_field_delete.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/custom_field_delete.jsx
index 4099c377dc..02dd8f21c8 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/custom_field_delete.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/custom_field_delete.jsx
@@ -1,14 +1,18 @@
export const customFieldDeleteStart = (state) => {
- const notices = state.notices.filter((notice) => notice.id !== 'custom-field');
- return ({
+ const notices = state.notices.filter(
+ (notice) => notice.id !== 'custom-field',
+ );
+ return {
...state,
...notices,
isCustomFieldDeleting: true,
- });
+ };
};
export const customFieldDeleteFailed = (state, action) => {
- const notices = state.notices.filter((notice) => notice.id !== 'custom-field');
+ const notices = state.notices.filter(
+ (notice) => notice.id !== 'custom-field',
+ );
notices.push({
id: 'custom-field',
content: action.message,
@@ -23,13 +27,13 @@ export const customFieldDeleteFailed = (state, action) => {
};
export const customFieldDeleteDone = (state, action) => {
- const customFields = state
- .customFields
- .filter((customField) => customField.id !== action.customFieldId);
+ const customFields = state.customFields.filter(
+ (customField) => customField.id !== action.customFieldId,
+ );
- const formBlocks = state
- .formBlocks
- .filter((block) => block.clientId !== action.clientId);
+ const formBlocks = state.formBlocks.filter(
+ (block) => block.clientId !== action.clientId,
+ );
return {
...state,
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/history_record.ts b/mailpoet/assets/js/src/form_editor/store/reducers/history_record.ts
index 1fac0b1e09..581edf9054 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/history_record.ts
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/history_record.ts
@@ -9,19 +9,16 @@ type HistoryRecord = {
time: number;
};
-const createRecord = (
- editorHistory: HistoryRecord[],
- state,
-): HistoryRecord => {
+const createRecord = (editorHistory: HistoryRecord[], state): HistoryRecord => {
const lastHistoryRecord = editorHistory[editorHistory.length - 1];
const time = Date.now();
// When we would create two almost same records in a row in very short time,
// then we overwrite remove the last record
if (
- lastHistoryRecord !== undefined
- && (time - lastHistoryRecord.time) < HISTORY_DEBOUNCE
- && editorHistory.length > 1
+ lastHistoryRecord !== undefined &&
+ time - lastHistoryRecord.time < HISTORY_DEBOUNCE &&
+ editorHistory.length > 1
) {
editorHistory.pop();
@@ -40,9 +37,9 @@ const createRecord = (
// We won't store two same records in a row, then we retur null
if (
- lastHistoryRecord !== undefined
- && isEqual(lastHistoryRecord.data, newHistoryRecord.data)
- && isEqual(lastHistoryRecord.blocks, newHistoryRecord.blocks)
+ lastHistoryRecord !== undefined &&
+ isEqual(lastHistoryRecord.data, newHistoryRecord.data) &&
+ isEqual(lastHistoryRecord.blocks, newHistoryRecord.blocks)
) {
return null;
}
@@ -62,7 +59,8 @@ export const createHistoryRecord = (state) => {
// When we want to create a history record, and we aren't at the end,
// then we have to drop the rest of the history stack
if (state.editorHistoryOffset !== 0) {
- const offset = state.editorHistory.length - ((state.editorHistoryOffset as number) + 1);
+ const offset =
+ state.editorHistory.length - ((state.editorHistoryOffset as number) + 1);
editorHistoryOffset = 0;
editorHistory = editorHistory.slice(0, offset);
}
@@ -109,6 +107,6 @@ const historyMove = (state, increment: number) => {
};
};
-export const historyUndo = (state) => (historyMove(state, 1));
+export const historyUndo = (state) => historyMove(state, 1);
-export const historyRedo = (state) => (historyMove(state, -1));
+export const historyRedo = (state) => historyMove(state, -1);
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_done.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_done.jsx
index 5e5b31b496..0c1e712ad6 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_done.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_done.jsx
@@ -1,7 +1,9 @@
import MailPoet from 'mailpoet';
export default (state, action) => {
- const notices = state.notices.filter((notice) => notice.id !== 'custom-field');
+ const notices = state.notices.filter(
+ (notice) => notice.id !== 'custom-field',
+ );
notices.push({
id: 'custom-field',
content: MailPoet.I18n.t('customFieldSaved'),
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_failed.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_failed.jsx
index 1041e4d359..7ace04ed26 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_failed.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_failed.jsx
@@ -1,5 +1,7 @@
export default (state, action) => {
- const notices = state.notices.filter((notice) => notice.id !== 'custom-field');
+ const notices = state.notices.filter(
+ (notice) => notice.id !== 'custom-field',
+ );
notices.push({
id: 'custom-field',
content: action.message,
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_started.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_started.jsx
index 9bb08a9a68..bdb0bbe514 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_started.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/save_custom_field_started.jsx
@@ -1,5 +1,7 @@
export default (state) => {
- const notices = state.notices.filter((notice) => notice.id !== 'custom-field');
+ const notices = state.notices.filter(
+ (notice) => notice.id !== 'custom-field',
+ );
return {
...state,
isCustomFieldSaving: true,
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/save_form_done.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/save_form_done.jsx
index 6643768775..a34f6a4010 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/save_form_done.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/save_form_done.jsx
@@ -4,7 +4,9 @@ export default (state, action) => {
const notices = state.notices.filter((notice) => notice.id !== 'save-form');
notices.push({
id: 'save-form',
- content: `${MailPoet.I18n.t('formSaved')} ${MailPoet.I18n.t('formSavedAppendix')}`,
+ content: `${MailPoet.I18n.t('formSaved')} ${MailPoet.I18n.t(
+ 'formSavedAppendix',
+ )}`,
isDismissible: true,
status: 'success',
});
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/save_form_started.jsx b/mailpoet/assets/js/src/form_editor/store/reducers/save_form_started.jsx
index 4f48cd874c..b588e856fe 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/save_form_started.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/save_form_started.jsx
@@ -1,7 +1,17 @@
export default (MailPoet) => (state) => {
// remove all form saving related notices
- const notices = state.notices.filter((notice) => !['missing-lists-in-custom-segments-block', 'save-form', 'missing-lists', 'missing-block'].includes(notice.id));
- const hasMissingLists = state.formErrors.includes('missing-lists') || state.formErrors.includes('missing-lists-in-custom-segments-block');
+ const notices = state.notices.filter(
+ (notice) =>
+ ![
+ 'missing-lists-in-custom-segments-block',
+ 'save-form',
+ 'missing-lists',
+ 'missing-block',
+ ].includes(notice.id),
+ );
+ const hasMissingLists =
+ state.formErrors.includes('missing-lists') ||
+ state.formErrors.includes('missing-lists-in-custom-segments-block');
const sidebarOpenedPanels = [...state.sidebar.openedPanels];
if (hasMissingLists) {
notices.push({
diff --git a/mailpoet/assets/js/src/form_editor/store/reducers/toggle_sidebar.ts b/mailpoet/assets/js/src/form_editor/store/reducers/toggle_sidebar.ts
index 8dd08a0570..9862a1e914 100644
--- a/mailpoet/assets/js/src/form_editor/store/reducers/toggle_sidebar.ts
+++ b/mailpoet/assets/js/src/form_editor/store/reducers/toggle_sidebar.ts
@@ -6,7 +6,10 @@ export const toggleSidebar = (state, action: ToggleAction) => ({
sidebarOpened: action.toggleTo,
});
-export const toggleInserterSidebar = (state, action: ToggleBlockInserterAction) => {
+export const toggleInserterSidebar = (
+ state,
+ action: ToggleBlockInserterAction,
+) => {
let inserterPanel: BlockInsertionPoint;
if (!action.value) {
inserterPanel = null;
diff --git a/mailpoet/assets/js/src/form_editor/store/selectors.jsx b/mailpoet/assets/js/src/form_editor/store/selectors.jsx
index 27c6ded1aa..78f2d8e504 100644
--- a/mailpoet/assets/js/src/form_editor/store/selectors.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/selectors.jsx
@@ -1,4 +1,4 @@
-const findBlockPath = (blocks, id, path = []) => (
+const findBlockPath = (blocks, id, path = []) =>
blocks.reduce((result, block) => {
if (result.length) {
return result;
@@ -12,8 +12,7 @@ const findBlockPath = (blocks, id, path = []) => (
return findBlockPath(block.innerBlocks, id, path);
}
return [];
- }, [])
-);
+ }, []);
export default {
isFormSaved(state) {
@@ -45,9 +44,10 @@ export default {
},
getFormExports(state) {
return Object.fromEntries(
- Object
- .entries(state.formExports)
- .map(([k, v]) => [k, v.replace(':form_id:', state.formData.id)])
+ Object.entries(state.formExports).map(([k, v]) => [
+ k,
+ v.replace(':form_id:', state.formData.id),
+ ]),
);
},
getFormSettings(state) {
@@ -102,12 +102,18 @@ export default {
getFormWidth(state, displayType) {
const settings = state.formData.settings;
switch (displayType) {
- case 'below_post': return settings.formPlacement.belowPosts.styles.width;
- case 'popup': return settings.formPlacement.popup.styles.width;
- case 'slide_in': return settings.formPlacement.slideIn.styles.width;
- case 'fixed_bar': return settings.formPlacement.fixedBar.styles.width;
- case 'others': return settings.formPlacement.others.styles.width;
- default: throw Error(`Invalid form display type ${displayType}`);
+ case 'below_post':
+ return settings.formPlacement.belowPosts.styles.width;
+ case 'popup':
+ return settings.formPlacement.popup.styles.width;
+ case 'slide_in':
+ return settings.formPlacement.slideIn.styles.width;
+ case 'fixed_bar':
+ return settings.formPlacement.fixedBar.styles.width;
+ case 'others':
+ return settings.formPlacement.others.styles.width;
+ default:
+ throw Error(`Invalid form display type ${displayType}`);
}
},
getIsCustomFieldSaving(state) {
diff --git a/mailpoet/assets/js/src/form_editor/store/store.jsx b/mailpoet/assets/js/src/form_editor/store/store.jsx
index 8531d55d69..dfbe23a16a 100644
--- a/mailpoet/assets/js/src/form_editor/store/store.jsx
+++ b/mailpoet/assets/js/src/form_editor/store/store.jsx
@@ -14,15 +14,16 @@ import { formBodyToBlocksFactory } from './form_body_to_blocks.jsx';
import mapFormDataAfterLoading from './map_form_data_after_loading.jsx';
export default () => {
- const customFields = window.mailpoet_custom_fields.map(
- (field) => ({ ...field, params: field.params || {} })
- );
+ const customFields = window.mailpoet_custom_fields.map((field) => ({
+ ...field,
+ params: field.params || {},
+ }));
const formBodyToBlocks = formBodyToBlocksFactory(
SETTINGS_DEFAULTS.fontSizes,
SETTINGS_DEFAULTS.colors,
SETTINGS_DEFAULTS.gradients,
- customFields
+ customFields,
);
const formData = { ...window.mailpoet_form_data };
@@ -33,13 +34,19 @@ export default () => {
dateFormats: window.mailpoet_date_formats,
months: window.mailpoet_month_names,
};
- formData.settings.segments = formData.settings.segments ? formData.settings.segments : [];
+ formData.settings.segments = formData.settings.segments
+ ? formData.settings.segments
+ : [];
let previewSettings = null;
// We don't want to try to load saved settings for forms that are brand new
if (formData.id !== null) {
try {
- previewSettings = JSON.parse(window.localStorage.getItem(`mailpoet_form_preview_settings${formData.id}`));
+ previewSettings = JSON.parse(
+ window.localStorage.getItem(
+ `mailpoet_form_preview_settings${formData.id}`,
+ ),
+ );
} catch (e) {
// We just keep it null
}
@@ -47,7 +54,9 @@ export default () => {
let fullscreenStatus = null;
try {
- fullscreenStatus = JSON.parse(window.localStorage.getItem('mailpoet_form_view_options'));
+ fullscreenStatus = JSON.parse(
+ window.localStorage.getItem('mailpoet_form_view_options'),
+ );
} catch (e) {
fullscreenStatus = 'disabled';
}
diff --git a/mailpoet/assets/js/src/form_editor/templates/selection.tsx b/mailpoet/assets/js/src/form_editor/templates/selection.tsx
index bc0a395dcb..49988e9851 100644
--- a/mailpoet/assets/js/src/form_editor/templates/selection.tsx
+++ b/mailpoet/assets/js/src/form_editor/templates/selection.tsx
@@ -49,18 +49,29 @@ export default function Selection(): JSX.Element {
);
const selectTemplateFailed: boolean = useSelect(
- (select) => select('mailpoet-form-editor-templates').getSelectTemplateFailed(),
+ (select) =>
+ select('mailpoet-form-editor-templates').getSelectTemplateFailed(),
[],
);
- const { selectTemplate, selectCategory } = useDispatch('mailpoet-form-editor-templates');
+ const { selectTemplate, selectCategory } = useDispatch(
+ 'mailpoet-form-editor-templates',
+ );
return (
<>
- {categories.map((category) => (
- templates[category.name].map((template, index) => (
- index < 4 && (
)
- ))
- ))}
+ {categories.map((category) =>
+ templates[category.name].map(
+ (template, index) =>
+ index < 4 && (
+
+ ),
+ ),
+ )}
{MailPoet.I18n.t('selectTemplate')}
- {selectTemplateFailed &&
{MailPoet.I18n.t('createFormError')}
}
+ {selectTemplateFailed && (
+
+ {MailPoet.I18n.t('createFormError')}
+
+ )}
@@ -88,7 +103,13 @@ export default function Selection(): JSX.Element {
className="mailpoet-form-template"
>
-
+
))}
diff --git a/mailpoet/assets/js/src/form_editor/templates/store/actions.ts b/mailpoet/assets/js/src/form_editor/templates/store/actions.ts
index d1abc625ea..0c18c9c373 100644
--- a/mailpoet/assets/js/src/form_editor/templates/store/actions.ts
+++ b/mailpoet/assets/js/src/form_editor/templates/store/actions.ts
@@ -1,12 +1,12 @@
import { select } from '@wordpress/data';
-import {
- CategoryActionType,
- CategoryType,
-} from './types';
+import { CategoryActionType, CategoryType } from './types';
// eslint-disable-next-line @typescript-eslint/ban-types -- IDK what else could be the return value
-export function* selectTemplate(templateId: string, templateName: string): object {
+export function* selectTemplate(
+ templateId: string,
+ templateName: string,
+): object {
yield { type: 'SELECT_TEMPLATE_START' };
yield {
type: 'TRACK_EVENT',
diff --git a/mailpoet/assets/js/src/form_editor/templates/store/reducer.ts b/mailpoet/assets/js/src/form_editor/templates/store/reducer.ts
index be0060ed25..160bd8bdd6 100644
--- a/mailpoet/assets/js/src/form_editor/templates/store/reducer.ts
+++ b/mailpoet/assets/js/src/form_editor/templates/store/reducer.ts
@@ -12,20 +12,27 @@ export const selectTemplateStarted = (state: StateType): StateType => ({
loading: true,
});
-export const selectCategory = (state: StateType, action: CategoryActionType): StateType => ({
+export const selectCategory = (
+ state: StateType,
+ action: CategoryActionType,
+): StateType => ({
...state,
activeCategory: action.category,
});
-export default (defaultState: StateType) => (
- state: StateType = defaultState, // eslint-disable-line @typescript-eslint/default-param-last
- action: ActionType,
-): StateType => {
- switch (action.type) {
- case 'SELECT_TEMPLATE_ERROR': return selectTemplateFailed(state);
- case 'SELECT_TEMPLATE_START': return selectTemplateStarted(state);
- case 'SELECT_CATEGORY': return selectCategory(state, action as CategoryActionType);
- default:
- return state;
- }
-};
+export default (defaultState: StateType) =>
+ (
+ state: StateType = defaultState, // eslint-disable-line @typescript-eslint/default-param-last
+ action: ActionType,
+ ): StateType => {
+ switch (action.type) {
+ case 'SELECT_TEMPLATE_ERROR':
+ return selectTemplateFailed(state);
+ case 'SELECT_TEMPLATE_START':
+ return selectTemplateStarted(state);
+ case 'SELECT_CATEGORY':
+ return selectCategory(state, action as CategoryActionType);
+ default:
+ return state;
+ }
+ };
diff --git a/mailpoet/assets/js/src/form_editor/translations.ts b/mailpoet/assets/js/src/form_editor/translations.ts
index 5987ce518c..f843ff980d 100644
--- a/mailpoet/assets/js/src/form_editor/translations.ts
+++ b/mailpoet/assets/js/src/form_editor/translations.ts
@@ -1,6 +1,6 @@
import { LocaleData, setLocaleData } from '@wordpress/i18n';
-export default (moduleTranslations:string[]): void => {
+export default (moduleTranslations: string[]): void => {
moduleTranslations.forEach((translations) => {
const parsed = JSON.parse(translations);
if (!parsed || !parsed.locale_data?.messages) {
diff --git a/mailpoet/assets/js/src/form_editor/utils/link_suggestions.tsx b/mailpoet/assets/js/src/form_editor/utils/link_suggestions.tsx
index ad8f628ce2..9780f8557b 100644
--- a/mailpoet/assets/js/src/form_editor/utils/link_suggestions.tsx
+++ b/mailpoet/assets/js/src/form_editor/utils/link_suggestions.tsx
@@ -9,7 +9,7 @@ import type { WP_REST_API_Search_Results } from 'wp-types';
* @see https://github.com/WordPress/gutenberg/blob/5941c924425f1d09bc724652cc316f5df90d4d32/packages/editor/src/components/provider/index.js#L31
*/
const fetchLinkSuggestions = async (search: string, { perPage = 20 } = {}) => {
- const posts : WP_REST_API_Search_Results = await apiFetch({
+ const posts: WP_REST_API_Search_Results = await apiFetch({
path: addQueryArgs('/wp/v2/search', {
search,
per_page: perPage,
diff --git a/mailpoet/assets/js/src/forms/forms.jsx b/mailpoet/assets/js/src/forms/forms.jsx
index 3d0ffb89ac..c2c21c6863 100644
--- a/mailpoet/assets/js/src/forms/forms.jsx
+++ b/mailpoet/assets/js/src/forms/forms.jsx
@@ -18,8 +18,5 @@ function App() {
const container = document.getElementById('forms_container');
if (container) {
- ReactDOM.render(
-
,
- container
- );
+ ReactDOM.render(
, container);
}
diff --git a/mailpoet/assets/js/src/forms/list.jsx b/mailpoet/assets/js/src/forms/list.jsx
index 9e8ffafea3..1bc83bce24 100644
--- a/mailpoet/assets/js/src/forms/list.jsx
+++ b/mailpoet/assets/js/src/forms/list.jsx
@@ -42,13 +42,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneFormTrashed')
- );
+ message = MailPoet.I18n.t('oneFormTrashed');
} else {
- message = (
- MailPoet.I18n.t('multipleFormsTrashed')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleFormsTrashed').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -57,13 +56,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneFormDeleted')
- );
+ message = MailPoet.I18n.t('oneFormDeleted');
} else {
- message = (
- MailPoet.I18n.t('multipleFormsDeleted')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleFormsDeleted').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -72,20 +70,25 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneFormRestored')
- );
+ message = MailPoet.I18n.t('oneFormRestored');
} else {
- message = (
- MailPoet.I18n.t('multipleFormsRestored')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleFormsRestored').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
onNoItemsFound: () => (
{MailPoet.I18n.t('noItemsFound')}
-
{MailPoet.I18n.t('new')}
+
+ {MailPoet.I18n.t('new')}
+
),
};
@@ -127,7 +130,9 @@ const itemActions = [
label: MailPoet.I18n.t('edit'),
link: function link(item) {
return (
-
{MailPoet.I18n.t('edit')}
+
+ {MailPoet.I18n.t('edit')}
+
);
},
},
@@ -143,20 +148,24 @@ const itemActions = [
data: {
id: item.id,
},
- }).done((response) => {
- const formName = response.data.name ? response.data.name : MailPoet.I18n.t('noName');
- MailPoet.Notice.success(
- (MailPoet.I18n.t('formDuplicated')).replace('%1$s', formName)
- );
- refresh();
- }).fail((response) => {
- if (response.errors.length > 0) {
- MailPoet.Notice.error(
- response.errors.map((error) => error.message),
- { scroll: true }
+ })
+ .done((response) => {
+ const formName = response.data.name
+ ? response.data.name
+ : MailPoet.I18n.t('noName');
+ MailPoet.Notice.success(
+ MailPoet.I18n.t('formDuplicated').replace('%1$s', formName),
);
- }
- });
+ refresh();
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ MailPoet.Notice.error(
+ response.errors.map((error) => error.message),
+ { scroll: true },
+ );
+ }
+ });
},
},
{
@@ -179,16 +188,18 @@ class FormList extends Component {
id: Number(e.target.getAttribute('data-id')),
status: checked ? 'enabled' : 'disabled',
},
- }).done((response) => {
- if (response.data.status === 'enabled') {
- MailPoet.Notice.success(MailPoet.I18n.t('formActivated'));
- }
- }).fail((response) => {
- MailPoet.Notice.showApiErrorNotice(response);
+ })
+ .done((response) => {
+ if (response.data.status === 'enabled') {
+ MailPoet.Notice.success(MailPoet.I18n.t('formActivated'));
+ }
+ })
+ .fail((response) => {
+ MailPoet.Notice.showApiErrorNotice(response);
- // reset value to previous form's status
- e.target.checked = !checked;
- });
+ // reset value to previous form's status
+ e.target.checked = !checked;
+ });
};
isItemInactive = (form) => form.status === 'disabled';
@@ -215,11 +226,12 @@ class FormList extends Component {
const rowClasses = classNames(
'manage-column',
'column-primary',
- 'has-row-actions'
+ 'has-row-actions',
);
- const segments = window.mailpoet_segments
- .filter((segment) => (jQuery.inArray(segment.id, form.segments) !== -1));
+ const segments = window.mailpoet_segments.filter(
+ (segment) => jQuery.inArray(segment.id, form.segments) !== -1,
+ );
const placement = getFormPlacement(form.settings);
@@ -230,25 +242,32 @@ class FormList extends Component {
className="mailpoet-listing-title"
href={`admin.php?page=mailpoet-form-editor&id=${form.id}`}
>
- { form.name ? form.name : `(${MailPoet.I18n.t('noName')})`}
+ {form.name ? form.name : `(${MailPoet.I18n.t('noName')})`}
- { actions }
+ {actions}
- {form.settings.segments_selected_by === 'user' && {MailPoet.I18n.t('userChoice')} }
+ {form.settings.segments_selected_by === 'user' && (
+
+ {MailPoet.I18n.t('userChoice')}
+
+ )}
- { placement }
+ {placement}
- { this.renderStatus(form) }
+ {this.renderStatus(form)}
-
- { MailPoet.Date.short(form.updated_at) }
+
+ {MailPoet.Date.short(form.updated_at)}
- { MailPoet.Date.time(form.updated_at) }
+ {MailPoet.Date.time(form.updated_at)}
>
);
diff --git a/mailpoet/assets/js/src/global.d.ts b/mailpoet/assets/js/src/global.d.ts
index a8983ad62f..f3f2608ebe 100644
--- a/mailpoet/assets/js/src/global.d.ts
+++ b/mailpoet/assets/js/src/global.d.ts
@@ -1,16 +1,20 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
declare module 'wp-js-hooks' {
- function addFilter(name: string, namespace: string, callback: (...args: any[]) => any): void;
+ function addFilter(
+ name: string,
+ namespace: string,
+ callback: (...args: any[]) => any,
+ ): void;
function applyFilters(name: string, ...args: any[]): any;
}
type ErrorResponse = {
- errors:{
- message:string
- }[]
+ errors: {
+ message: string;
+ }[];
};
-interface JQuery{
+interface JQuery {
parsley: () => any;
}
@@ -42,7 +46,7 @@ declare module '@woocommerce/settings' {
declare module '@woocommerce/blocks-checkout' {
import type { BlockConfiguration } from '@wordpress/blocks';
- interface CheckoutBlockOptionsMetadata extends Partial< BlockConfiguration > {
+ interface CheckoutBlockOptionsMetadata extends Partial
{
name: string;
parent: string[];
}
diff --git a/mailpoet/assets/js/src/handlebars_helpers.js b/mailpoet/assets/js/src/handlebars_helpers.js
index 9dcfcf166b..9290db9483 100644
--- a/mailpoet/assets/js/src/handlebars_helpers.js
+++ b/mailpoet/assets/js/src/handlebars_helpers.js
@@ -2,7 +2,7 @@ import Handlebars from 'handlebars';
// Handlebars helpers
Handlebars.registerHelper('concat', function concatHelper() {
- var size = (arguments.length - 1);
+ var size = arguments.length - 1;
var output = '';
var i;
for (i = 0; i < size; i += 1) {
@@ -14,57 +14,67 @@ Handlebars.registerHelper('concat', function concatHelper() {
Handlebars.registerHelper('number_format', function numberFormatHelper(value) {
return Number(value).toLocaleString();
});
-Handlebars.registerHelper('date_format', function dateFormatHelper(timestamp, block) {
- var f;
- if (window.moment) {
- if (timestamp === undefined || Number.isNaN(timestamp) || timestamp <= 0) {
- return undefined;
- }
+Handlebars.registerHelper(
+ 'date_format',
+ function dateFormatHelper(timestamp, block) {
+ var f;
+ if (window.moment) {
+ if (
+ timestamp === undefined ||
+ Number.isNaN(timestamp) ||
+ timestamp <= 0
+ ) {
+ return undefined;
+ }
- // set date format
- f = block.hash.format || 'MMM Do, YYYY';
- // check if we passed a timestamp
- if (/^\s*\d+\s*$/.test(timestamp)) {
- return window.moment.unix(timestamp).format(f);
+ // set date format
+ f = block.hash.format || 'MMM Do, YYYY';
+ // check if we passed a timestamp
+ if (/^\s*\d+\s*$/.test(timestamp)) {
+ return window.moment.unix(timestamp).format(f);
+ }
+ return window.moment.utc(timestamp).format(f);
}
- return window.moment.utc(timestamp).format(f);
- }
- return timestamp;
-});
+ return timestamp;
+ },
+);
Handlebars.registerHelper('cycle', function cycleHelper(value, block) {
var values = value.split(' ');
return values[block.data.index % (values.length + 1)];
});
-Handlebars.registerHelper('ifCond', function ifCondHelper(v1, operator, v2, options) {
- switch (operator) {
- case '==':
- return (v1 == v2) ? options.fn(this) : options.inverse(this); // eslint-disable-line eqeqeq
- case '===':
- return (v1 === v2) ? options.fn(this) : options.inverse(this);
- case '!=':
- return (v1 != v2) ? options.fn(this) : options.inverse(this); // eslint-disable-line eqeqeq
- case '!==':
- return (v1 !== v2) ? options.fn(this) : options.inverse(this);
- case '<':
- return (v1 < v2) ? options.fn(this) : options.inverse(this);
- case '<=':
- return (v1 <= v2) ? options.fn(this) : options.inverse(this);
- case '>':
- return (v1 > v2) ? options.fn(this) : options.inverse(this);
- case '>=':
- return (v1 >= v2) ? options.fn(this) : options.inverse(this);
- case '&&':
- return (v1 && v2) ? options.fn(this) : options.inverse(this);
- case '||':
- return (v1 || v2) ? options.fn(this) : options.inverse(this);
- case 'in':
- return (v2.indexOf(v1) !== -1) ? options.fn(this) : options.inverse(this);
- default:
- return options.inverse(this);
- }
-});
+Handlebars.registerHelper(
+ 'ifCond',
+ function ifCondHelper(v1, operator, v2, options) {
+ switch (operator) {
+ case '==':
+ return v1 == v2 ? options.fn(this) : options.inverse(this); // eslint-disable-line eqeqeq
+ case '===':
+ return v1 === v2 ? options.fn(this) : options.inverse(this);
+ case '!=':
+ return v1 != v2 ? options.fn(this) : options.inverse(this); // eslint-disable-line eqeqeq
+ case '!==':
+ return v1 !== v2 ? options.fn(this) : options.inverse(this);
+ case '<':
+ return v1 < v2 ? options.fn(this) : options.inverse(this);
+ case '<=':
+ return v1 <= v2 ? options.fn(this) : options.inverse(this);
+ case '>':
+ return v1 > v2 ? options.fn(this) : options.inverse(this);
+ case '>=':
+ return v1 >= v2 ? options.fn(this) : options.inverse(this);
+ case '&&':
+ return v1 && v2 ? options.fn(this) : options.inverse(this);
+ case '||':
+ return v1 || v2 ? options.fn(this) : options.inverse(this);
+ case 'in':
+ return v2.indexOf(v1) !== -1 ? options.fn(this) : options.inverse(this);
+ default:
+ return options.inverse(this);
+ }
+ },
+);
Handlebars.registerHelper('nl2br', function nl2brHelper(value) {
return value.gsub('\n', ' ');
@@ -78,17 +88,24 @@ Handlebars.registerHelper('json_decode', function jsonDecodeHelper(value) {
return JSON.parse(value);
});
Handlebars.registerHelper('url', function urlHelper(value) {
- var url = window.location.protocol + '//' + window.location.host + window.location.pathname;
+ var url =
+ window.location.protocol +
+ '//' +
+ window.location.host +
+ window.location.pathname;
return url + value;
});
-Handlebars.registerHelper('emailFromMailto', function emailFromMailtoHelper(value) {
- var mailtoMatchingRegex = /^mailto:/i;
- if (typeof value === 'string' && value.match(mailtoMatchingRegex)) {
- return value.replace(mailtoMatchingRegex, '');
- }
- return value;
-});
+Handlebars.registerHelper(
+ 'emailFromMailto',
+ function emailFromMailtoHelper(value) {
+ var mailtoMatchingRegex = /^mailto:/i;
+ if (typeof value === 'string' && value.match(mailtoMatchingRegex)) {
+ return value.replace(mailtoMatchingRegex, '');
+ }
+ return value;
+ },
+);
Handlebars.registerHelper('lookup', function lookupHelper(obj, field) {
return obj && obj[field];
});
@@ -114,58 +131,128 @@ Handlebars.registerHelper('trim', function trimHelper(value) {
});
/**
- * {{ellipsis}}
- * From: https://github.com/assemble/handlebars-helpers
- * @author: Jon Schlinkert
- * Truncate the input string and removes all HTML tags
- * @param {String} str The input string.
- * @param {Number} limit The number of characters to limit the string.
- * @param {String} append The string to append if charaters are omitted.
- * @return {String} The truncated string.
- */
-Handlebars.registerHelper('ellipsis', function ellipsisHelper(str, limit, append) {
- var strAppend = append;
- var sanitized = str.replace(/(<([^>]+)>)/g, '');
- if (strAppend === undefined) {
- strAppend = '';
- }
- if (sanitized.length > limit) {
- return sanitized.substr(0, limit - strAppend.length) + strAppend;
- }
- return sanitized;
-});
+ * {{ellipsis}}
+ * From: https://github.com/assemble/handlebars-helpers
+ * @author: Jon Schlinkert
+ * Truncate the input string and removes all HTML tags
+ * @param {String} str The input string.
+ * @param {Number} limit The number of characters to limit the string.
+ * @param {String} append The string to append if charaters are omitted.
+ * @return {String} The truncated string.
+ */
+Handlebars.registerHelper(
+ 'ellipsis',
+ function ellipsisHelper(str, limit, append) {
+ var strAppend = append;
+ var sanitized = str.replace(/(<([^>]+)>)/g, '');
+ if (strAppend === undefined) {
+ strAppend = '';
+ }
+ if (sanitized.length > limit) {
+ return sanitized.substr(0, limit - strAppend.length) + strAppend;
+ }
+ return sanitized;
+ },
+);
Handlebars.registerHelper('getNumber', function getNumberHelper(string) {
return parseInt(string, 10);
});
-Handlebars.registerHelper('fontWithFallback', function fontWithFallbackHelper(font) {
- switch (font) {
- case 'Arial': return new Handlebars.SafeString("Arial, 'Helvetica Neue', Helvetica, sans-serif");
- case 'Comic Sans MS': return new Handlebars.SafeString("'Comic Sans MS', 'Marker Felt-Thin', Arial, sans-serif");
- case 'Courier New': return new Handlebars.SafeString("'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace");
- case 'Georgia': return new Handlebars.SafeString("Georgia, Times, 'Times New Roman', serif");
- case 'Lucida': return new Handlebars.SafeString("'Lucida Sans Unicode', 'Lucida Grande', sans-serif");
- case 'Tahoma': return new Handlebars.SafeString('Tahoma, Verdana, Segoe, sans-serif');
- case 'Times New Roman': return new Handlebars.SafeString("'Times New Roman', Times, Baskerville, Georgia, serif");
- case 'Trebuchet MS': return new Handlebars.SafeString("'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif");
- case 'Verdana': return new Handlebars.SafeString('Verdana, Geneva, sans-serif');
- case 'Arvo': return new Handlebars.SafeString('arvo, courier, georgia, serif');
- case 'Lato': return new Handlebars.SafeString("lato, 'helvetica neue', helvetica, arial, sans-serif");
- case 'Lora': return new Handlebars.SafeString("lora, georgia, 'times new roman', serif");
- case 'Merriweather': return new Handlebars.SafeString("merriweather, georgia, 'times new roman', serif");
- case 'Merriweather Sans': return new Handlebars.SafeString("'merriweather sans', 'helvetica neue', helvetica, arial, sans-serif");
- case 'Noticia Text': return new Handlebars.SafeString("'noticia text', georgia, 'times new roman', serif");
- case 'Open Sans': return new Handlebars.SafeString("'open sans', 'helvetica neue', helvetica, arial, sans-serif");
- case 'Playfair Display': return new Handlebars.SafeString("playfair display, georgia, 'times new roman', serif");
- case 'Roboto': return new Handlebars.SafeString("roboto, 'helvetica neue', helvetica, arial, sans-serif");
- case 'Source Sans Pro': return new Handlebars.SafeString("'source sans pro', 'helvetica neue', helvetica, arial, sans-serif");
- case 'Oswald': return new Handlebars.SafeString("Oswald, 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif");
- case 'Raleway': return new Handlebars.SafeString("Raleway, 'Century Gothic', CenturyGothic, AppleGothic, sans-serif");
- case 'Permanent Marker': return new Handlebars.SafeString("'Permanent Marker', Tahoma, Verdana, Segoe, sans-serif");
- case 'Pacifico': return new Handlebars.SafeString("Pacifico, 'Arial Narrow', Arial, sans-serif");
- default: return font;
- }
-});
+Handlebars.registerHelper(
+ 'fontWithFallback',
+ function fontWithFallbackHelper(font) {
+ switch (font) {
+ case 'Arial':
+ return new Handlebars.SafeString(
+ "Arial, 'Helvetica Neue', Helvetica, sans-serif",
+ );
+ case 'Comic Sans MS':
+ return new Handlebars.SafeString(
+ "'Comic Sans MS', 'Marker Felt-Thin', Arial, sans-serif",
+ );
+ case 'Courier New':
+ return new Handlebars.SafeString(
+ "'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace",
+ );
+ case 'Georgia':
+ return new Handlebars.SafeString(
+ "Georgia, Times, 'Times New Roman', serif",
+ );
+ case 'Lucida':
+ return new Handlebars.SafeString(
+ "'Lucida Sans Unicode', 'Lucida Grande', sans-serif",
+ );
+ case 'Tahoma':
+ return new Handlebars.SafeString('Tahoma, Verdana, Segoe, sans-serif');
+ case 'Times New Roman':
+ return new Handlebars.SafeString(
+ "'Times New Roman', Times, Baskerville, Georgia, serif",
+ );
+ case 'Trebuchet MS':
+ return new Handlebars.SafeString(
+ "'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif",
+ );
+ case 'Verdana':
+ return new Handlebars.SafeString('Verdana, Geneva, sans-serif');
+ case 'Arvo':
+ return new Handlebars.SafeString('arvo, courier, georgia, serif');
+ case 'Lato':
+ return new Handlebars.SafeString(
+ "lato, 'helvetica neue', helvetica, arial, sans-serif",
+ );
+ case 'Lora':
+ return new Handlebars.SafeString(
+ "lora, georgia, 'times new roman', serif",
+ );
+ case 'Merriweather':
+ return new Handlebars.SafeString(
+ "merriweather, georgia, 'times new roman', serif",
+ );
+ case 'Merriweather Sans':
+ return new Handlebars.SafeString(
+ "'merriweather sans', 'helvetica neue', helvetica, arial, sans-serif",
+ );
+ case 'Noticia Text':
+ return new Handlebars.SafeString(
+ "'noticia text', georgia, 'times new roman', serif",
+ );
+ case 'Open Sans':
+ return new Handlebars.SafeString(
+ "'open sans', 'helvetica neue', helvetica, arial, sans-serif",
+ );
+ case 'Playfair Display':
+ return new Handlebars.SafeString(
+ "playfair display, georgia, 'times new roman', serif",
+ );
+ case 'Roboto':
+ return new Handlebars.SafeString(
+ "roboto, 'helvetica neue', helvetica, arial, sans-serif",
+ );
+ case 'Source Sans Pro':
+ return new Handlebars.SafeString(
+ "'source sans pro', 'helvetica neue', helvetica, arial, sans-serif",
+ );
+ case 'Oswald':
+ return new Handlebars.SafeString(
+ "Oswald, 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif",
+ );
+ case 'Raleway':
+ return new Handlebars.SafeString(
+ "Raleway, 'Century Gothic', CenturyGothic, AppleGothic, sans-serif",
+ );
+ case 'Permanent Marker':
+ return new Handlebars.SafeString(
+ "'Permanent Marker', Tahoma, Verdana, Segoe, sans-serif",
+ );
+ case 'Pacifico':
+ return new Handlebars.SafeString(
+ "Pacifico, 'Arial Narrow', Arial, sans-serif",
+ );
+ default:
+ return font;
+ }
+ },
+);
window.Handlebars = Handlebars;
diff --git a/mailpoet/assets/js/src/help-tooltip.js b/mailpoet/assets/js/src/help-tooltip.js
index 5f6f593d32..7f2bb1659d 100644
--- a/mailpoet/assets/js/src/help-tooltip.js
+++ b/mailpoet/assets/js/src/help-tooltip.js
@@ -4,11 +4,14 @@ import ReactDOM from 'react-dom';
export const MailPoetHelpTooltip = {
show: function show(domContainerNode, opts) {
- ReactDOM.render(createElement(TooltipComponent, {
- tooltip: opts.tooltip,
- tooltipId: opts.tooltipId,
- place: opts.place,
- }), domContainerNode);
+ ReactDOM.render(
+ createElement(TooltipComponent, {
+ tooltip: opts.tooltip,
+ tooltipId: opts.tooltipId,
+ place: opts.place,
+ }),
+ domContainerNode,
+ );
},
};
diff --git a/mailpoet/assets/js/src/help/cron_status.jsx b/mailpoet/assets/js/src/help/cron_status.jsx
index 6682d6e483..1b3adc9876 100644
--- a/mailpoet/assets/js/src/help/cron_status.jsx
+++ b/mailpoet/assets/js/src/help/cron_status.jsx
@@ -9,22 +9,17 @@ function CronStatus(props) {
active: MailPoet.I18n.t('running'),
inactive: MailPoet.I18n.t('cronWaiting'),
};
- const lastError = Array.isArray(status.last_error)
- ? (
- <>
- {
- status.last_error.map((error) => (
-
- {error.worker}
- :
- {' '}
- {error.message}
-
- ))
- }
- >
- )
- : status.last_error;
+ const lastError = Array.isArray(status.last_error) ? (
+ <>
+ {status.last_error.map((error) => (
+
+ {error.worker}: {error.message}
+
+ ))}
+ >
+ ) : (
+ status.last_error
+ );
return (
{MailPoet.I18n.t('systemStatusCronStatusTitle')}
@@ -37,19 +32,27 @@ function CronStatus(props) {
},
{
key: MailPoet.I18n.t('status'),
- value: activeStatusMapping[status.status] ? activeStatusMapping[status.status] : MailPoet.I18n.t('unknown'),
+ value: activeStatusMapping[status.status]
+ ? activeStatusMapping[status.status]
+ : MailPoet.I18n.t('unknown'),
},
{
key: MailPoet.I18n.t('lastUpdated'),
- value: status.updated_at ? MailPoet.Date.full(status.updated_at * 1000) : MailPoet.I18n.t('unknown'),
+ value: status.updated_at
+ ? MailPoet.Date.full(status.updated_at * 1000)
+ : MailPoet.I18n.t('unknown'),
},
{
key: MailPoet.I18n.t('lastRunStarted'),
- value: status.run_accessed_at ? MailPoet.Date.full(status.run_started_at * 1000) : MailPoet.I18n.t('unknown'),
+ value: status.run_accessed_at
+ ? MailPoet.Date.full(status.run_started_at * 1000)
+ : MailPoet.I18n.t('unknown'),
},
{
key: MailPoet.I18n.t('lastRunCompleted'),
- value: status.run_completed_at ? MailPoet.Date.full(status.run_completed_at * 1000) : MailPoet.I18n.t('unknown'),
+ value: status.run_completed_at
+ ? MailPoet.Date.full(status.run_completed_at * 1000)
+ : MailPoet.I18n.t('unknown'),
},
{
key: MailPoet.I18n.t('lastSeenError'),
@@ -57,7 +60,9 @@ function CronStatus(props) {
},
{
key: MailPoet.I18n.t('lastSeenErrorDate'),
- value: status.last_error_date ? MailPoet.Date.full(status.last_error_date * 1000) : MailPoet.I18n.t('unknown'),
+ value: status.last_error_date
+ ? MailPoet.Date.full(status.last_error_date * 1000)
+ : MailPoet.I18n.t('unknown'),
},
]}
/>
diff --git a/mailpoet/assets/js/src/help/help.jsx b/mailpoet/assets/js/src/help/help.jsx
index 5d551bb24a..3915e368a8 100644
--- a/mailpoet/assets/js/src/help/help.jsx
+++ b/mailpoet/assets/js/src/help/help.jsx
@@ -16,7 +16,10 @@ function App() {
-
+
diff --git a/mailpoet/assets/js/src/help/knowledge_base.jsx b/mailpoet/assets/js/src/help/knowledge_base.jsx
index c692945605..2df827a191 100644
--- a/mailpoet/assets/js/src/help/knowledge_base.jsx
+++ b/mailpoet/assets/js/src/help/knowledge_base.jsx
@@ -6,16 +6,86 @@ function KnowledgeBase() {
<>
{MailPoet.I18n.t('knowledgeBaseIntro')}
- {MailPoet.I18n.t('knowledgeBaseButton')}
+
+ {MailPoet.I18n.t('knowledgeBaseButton')}
+
>
);
}
diff --git a/mailpoet/assets/js/src/help/queue_status.jsx b/mailpoet/assets/js/src/help/queue_status.jsx
index 1c50ab7050..f87e9bb115 100644
--- a/mailpoet/assets/js/src/help/queue_status.jsx
+++ b/mailpoet/assets/js/src/help/queue_status.jsx
@@ -14,45 +14,70 @@ function QueueStatus(props) {
rows={[
{
key: MailPoet.I18n.t('status'),
- value: status.status === 'paused' ? MailPoet.I18n.t('paused') : MailPoet.I18n.t('running'),
- }, {
+ value:
+ status.status === 'paused'
+ ? MailPoet.I18n.t('paused')
+ : MailPoet.I18n.t('running'),
+ },
+ {
key: MailPoet.I18n.t('startedAt'),
- value: status.started ? MailPoet.Date.full(status.started * 1000) : MailPoet.I18n.t('unknown'),
- }, {
+ value: status.started
+ ? MailPoet.Date.full(status.started * 1000)
+ : MailPoet.I18n.t('unknown'),
+ },
+ {
key: MailPoet.I18n.t('sentEmails'),
value: status.sent || 0,
- }, {
+ },
+ {
key: MailPoet.I18n.t('retryAttempt'),
value: status.retry_attempt || MailPoet.I18n.t('none'),
- }, {
+ },
+ {
key: MailPoet.I18n.t('retryAt'),
- value: status.retry_at ? MailPoet.Date.full(status.retry_at * 1000) : MailPoet.I18n.t('none'),
- }, {
+ value: status.retry_at
+ ? MailPoet.Date.full(status.retry_at * 1000)
+ : MailPoet.I18n.t('none'),
+ },
+ {
key: MailPoet.I18n.t('error'),
- value: status.error ? status.error.error_message : MailPoet.I18n.t('none'),
- }, {
+ value: status.error
+ ? status.error.error_message
+ : MailPoet.I18n.t('none'),
+ },
+ {
key: MailPoet.I18n.t('totalCompletedTasks'),
value: status.tasksStatusCounts.completed,
- }, {
+ },
+ {
key: MailPoet.I18n.t('totalRunningTasks'),
value: status.tasksStatusCounts.running,
- }, {
+ },
+ {
key: MailPoet.I18n.t('totalPausedTasks'),
value: status.tasksStatusCounts.paused,
- }, {
+ },
+ {
key: MailPoet.I18n.t('totalScheduledTasks'),
value: status.tasksStatusCounts.scheduled,
},
]}
/>
{MailPoet.I18n.t('scheduledTasks')}
- (task.status === 'scheduled'))} />
+ task.status === 'scheduled')}
+ />
{MailPoet.I18n.t('runningTasks')}
- (task.status === null))} />
+ task.status === null)}
+ />
{MailPoet.I18n.t('completedTasks')}
- (task.status === 'completed'))} />
+ task.status === 'completed')}
+ />
>
);
}
diff --git a/mailpoet/assets/js/src/help/system_info.jsx b/mailpoet/assets/js/src/help/system_info.jsx
index 7d7e988ad4..975cd81b37 100644
--- a/mailpoet/assets/js/src/help/system_info.jsx
+++ b/mailpoet/assets/js/src/help/system_info.jsx
@@ -7,7 +7,9 @@ function handleFocus(event) {
function printData(data) {
if (_.isObject(data)) {
- const printableData = Object.keys(data).map((key) => `${key}: ${data[key]}`);
+ const printableData = Object.keys(data).map(
+ (key) => `${key}: ${data[key]}`,
+ );
return (
);
}
- return ({MailPoet.I18n.t('systemInfoDataError')}
);
+ return {MailPoet.I18n.t('systemInfoDataError')}
;
}
function SystemInfo() {
diff --git a/mailpoet/assets/js/src/help/system_status.jsx b/mailpoet/assets/js/src/help/system_status.jsx
index a1447229e9..c4a6a6b589 100644
--- a/mailpoet/assets/js/src/help/system_status.jsx
+++ b/mailpoet/assets/js/src/help/system_status.jsx
@@ -9,27 +9,36 @@ function renderStatusMessage(
errorMessage,
link,
linkBeacon,
- additionalInfo
+ additionalInfo,
) {
- const noticeType = (status) ? 'success' : 'error';
- let noticeMessage = (status)
- ? successMessage
- : errorMessage;
+ const noticeType = status ? 'success' : 'error';
+ let noticeMessage = status ? successMessage : errorMessage;
if (link) {
noticeMessage = ReactStringReplace(
noticeMessage,
/\[link\](.*?)\[\/link\]/g,
(match) => (
- {match}
- )
+
+ {match}
+
+ ),
);
}
return (
{noticeMessage}
- {additionalInfo ? (
{additionalInfo}
) : null}
+ {additionalInfo ? (
+
+ {additionalInfo}
+
+ ) : null}
);
}
@@ -37,7 +46,9 @@ function renderStatusMessage(
function renderCronSection(data) {
const status = data.cron.isReachable;
const url = data.cron.url;
- const error = `${MailPoet.I18n.t('systemStatusConnectionUnsuccessful')} ${MailPoet.I18n.t('systemStatusCronConnectionUnsuccessfulInfo')}`;
+ const error = `${MailPoet.I18n.t(
+ 'systemStatusConnectionUnsuccessful',
+ )} ${MailPoet.I18n.t('systemStatusCronConnectionUnsuccessfulInfo')}`;
const success = MailPoet.I18n.t('systemStatusConnectionSuccessful');
const additionalInfo = !status ? data.cron.pingResponse : null;
@@ -45,16 +56,32 @@ function renderCronSection(data) {
{MailPoet.I18n.t('systemStatusCronTitle')}
- {url}
+
+ {url}
+
- {renderStatusMessage(status, success, error, 'https://kb.mailpoet.com/article/231-sending-does-not-work', '5a0257ac2c7d3a272c0d7ad6', additionalInfo)}
+ {renderStatusMessage(
+ status,
+ success,
+ error,
+ 'https://kb.mailpoet.com/article/231-sending-does-not-work',
+ '5a0257ac2c7d3a272c0d7ad6',
+ additionalInfo,
+ )}
);
}
function renderMSSSection(data) {
const errorMessage = data.mss.enabled
- ? `${MailPoet.I18n.t('systemStatusConnectionUnsuccessful')} ${MailPoet.I18n.t('systemStatusMSSConnectionUnsuccessfulInfo')}`
+ ? `${MailPoet.I18n.t(
+ 'systemStatusConnectionUnsuccessful',
+ )} ${MailPoet.I18n.t('systemStatusMSSConnectionUnsuccessfulInfo')}`
: MailPoet.I18n.t('systemStatusMSSConnectionCanNotConnect');
const successMessage = data.mss.enabled
? MailPoet.I18n.t('systemStatusConnectionSuccessful')
@@ -62,17 +89,14 @@ function renderMSSSection(data) {
return (
{MailPoet.I18n.t('systemStatusMSSTitle')}
- {
-
- renderStatusMessage(
- data.mss.isReachable,
- successMessage,
- errorMessage,
- 'https://kb.mailpoet.com/article/319-known-errors-when-validating-a-mailpoet-key',
- '5ef1da9d2c7d3a10cba966c5',
- null
- )
- }
+ {renderStatusMessage(
+ data.mss.isReachable,
+ successMessage,
+ errorMessage,
+ 'https://kb.mailpoet.com/article/319-known-errors-when-validating-a-mailpoet-key',
+ '5ef1da9d2c7d3a10cba966c5',
+ null,
+ )}
);
}
@@ -83,7 +107,11 @@ function SystemStatus() {
return (
<>
-
{systemStatusData.mss.enabled ? MailPoet.I18n.t('systemStatusIntroCronMSS') : MailPoet.I18n.t('systemStatusIntroCron')}
+
+ {systemStatusData.mss.enabled
+ ? MailPoet.I18n.t('systemStatusIntroCronMSS')
+ : MailPoet.I18n.t('systemStatusIntroCron')}
+
{renderCronSection(systemStatusData)}
{renderMSSSection(systemStatusData)}
diff --git a/mailpoet/assets/js/src/help/tasks_list/tasks_list.jsx b/mailpoet/assets/js/src/help/tasks_list/tasks_list.jsx
index 53a9cb48b9..c04e88198a 100644
--- a/mailpoet/assets/js/src/help/tasks_list/tasks_list.jsx
+++ b/mailpoet/assets/js/src/help/tasks_list/tasks_list.jsx
@@ -8,23 +8,27 @@ function TasksList(props) {
return (
-
+
+
+
- {
- props.tasks.length ? props.tasks.map((task) => (
+ {props.tasks.length ? (
+ props.tasks.map((task) => (
- )) : (
-
- {MailPoet.I18n.t('nothingToShow')}
-
- )
- }
+ ))
+ ) : (
+
+ {MailPoet.I18n.t('nothingToShow')}
+
+ )}
-
+
+
+
);
}
diff --git a/mailpoet/assets/js/src/help/tasks_list/tasks_list_data_row.jsx b/mailpoet/assets/js/src/help/tasks_list/tasks_list_data_row.jsx
index f11b9fbacf..8288c11dd9 100644
--- a/mailpoet/assets/js/src/help/tasks_list/tasks_list_data_row.jsx
+++ b/mailpoet/assets/js/src/help/tasks_list/tasks_list_data_row.jsx
@@ -8,16 +8,16 @@ function TasksListDataRow(props) {
scheduled = parseDate(scheduled, 'yyyy-MM-dd HH:mm:ss', new Date());
}
- const updated = parseDate(props.task.updated_at, 'yyyy-MM-dd HH:mm:ss', new Date());
+ const updated = parseDate(
+ props.task.updated_at,
+ 'yyyy-MM-dd HH:mm:ss',
+ new Date(),
+ );
return (
-
- {props.task.id}
-
-
- {props.task.type}
-
+ {props.task.id}
+ {props.task.type}
{props.task.newsletter ? (
{props.task.newsletter.subject || MailPoet.I18n.t('preview')}
- ) : MailPoet.I18n.t('none')}
-
-
- {props.task.priority}
+ ) : (
+ MailPoet.I18n.t('none')
+ )}
+ {props.task.priority}
{props.show_scheduled_at ? (
- {`${MailPoet.Date.short(scheduled)} ${MailPoet.Date.time(scheduled)}`}
+ {`${MailPoet.Date.short(scheduled)} ${MailPoet.Date.time(
+ scheduled,
+ )}`}
) : null}
- {`${MailPoet.Date.short(updated)} ${MailPoet.Date.time(updated)}`}
+ {`${MailPoet.Date.short(updated)} ${MailPoet.Date.time(
+ updated,
+ )}`}
);
diff --git a/mailpoet/assets/js/src/help/tasks_list/tasks_list_labels_row.jsx b/mailpoet/assets/js/src/help/tasks_list/tasks_list_labels_row.jsx
index 9592b7497a..abf7bc3a96 100644
--- a/mailpoet/assets/js/src/help/tasks_list/tasks_list_labels_row.jsx
+++ b/mailpoet/assets/js/src/help/tasks_list/tasks_list_labels_row.jsx
@@ -8,7 +8,9 @@ function TasksListLabelsRow(props) {
{MailPoet.I18n.t('type')}
{MailPoet.I18n.t('email')}
{MailPoet.I18n.t('priority')}
- { props.show_scheduled_at ? ({MailPoet.I18n.t('scheduledAt')} ) : null }
+ {props.show_scheduled_at ? (
+ {MailPoet.I18n.t('scheduledAt')}
+ ) : null}
{MailPoet.I18n.t('updatedAt')}
);
diff --git a/mailpoet/assets/js/src/help/your_privacy.jsx b/mailpoet/assets/js/src/help/your_privacy.jsx
index 4a9859eddd..f18020d4bf 100644
--- a/mailpoet/assets/js/src/help/your_privacy.jsx
+++ b/mailpoet/assets/js/src/help/your_privacy.jsx
@@ -8,7 +8,11 @@ function YourPrivacy() {
{MailPoet.I18n.t('yourPrivacyContent2')}
{MailPoet.I18n.t('yourPrivacyContent3')}
-
+
{MailPoet.I18n.t('yourPrivacyButton')}
>
diff --git a/mailpoet/assets/js/src/i18n.ts b/mailpoet/assets/js/src/i18n.ts
index cd558032b1..29400a6bfb 100644
--- a/mailpoet/assets/js/src/i18n.ts
+++ b/mailpoet/assets/js/src/i18n.ts
@@ -5,7 +5,9 @@ export const MailPoetI18n = {
translations[key] = value;
},
t: function t(key: string): string {
- return translations[key] || 'TRANSLATION "%1$s" NOT FOUND'.replace('%1$s', key);
+ return (
+ translations[key] || 'TRANSLATION "%1$s" NOT FOUND'.replace('%1$s', key)
+ );
},
all: function all(): Record {
return translations;
diff --git a/mailpoet/assets/js/src/iframe.js b/mailpoet/assets/js/src/iframe.js
index 41c63f0e11..d523628bff 100644
--- a/mailpoet/assets/js/src/iframe.js
+++ b/mailpoet/assets/js/src/iframe.js
@@ -3,17 +3,12 @@ export const MailPoetIframe = {
autoSize: function autoSize(iframe) {
if (!iframe) return;
- this.setSize(
- iframe,
- iframe.contentWindow.document.body.scrollHeight
- );
+ this.setSize(iframe, iframe.contentWindow.document.body.scrollHeight);
},
setSize: function setSize(sizeIframe, i) {
var iframe = sizeIframe;
if (!iframe) return;
- iframe.style.height = (
- parseInt(i, 10) + this.marginY
- ) + 'px';
+ iframe.style.height = parseInt(i, 10) + this.marginY + 'px';
},
};
diff --git a/mailpoet/assets/js/src/jquery.serialize_object.js b/mailpoet/assets/js/src/jquery.serialize_object.js
index 8297c7dfd1..7400c9e7fe 100644
--- a/mailpoet/assets/js/src/jquery.serialize_object.js
+++ b/mailpoet/assets/js/src/jquery.serialize_object.js
@@ -4,21 +4,21 @@ import jQuery from 'jquery';
var $ = jQuery;
// Combination of jQuery.deparam and jQuery.serializeObject by Ben Alman.
/*!
- * jQuery BBQ: Back Button & Query Library - v1.2.1 - 2/17/2010
- * http://benalman.com/projects/jquery-bbq-plugin/
- *
- * Copyright (c) 2010 "Cowboy" Ben Alman
- * Dual licensed under the MIT and GPL licenses.
- * http://benalman.com/about/license/
- */
+ * jQuery BBQ: Back Button & Query Library - v1.2.1 - 2/17/2010
+ * http://benalman.com/projects/jquery-bbq-plugin/
+ *
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
/*!
- * jQuery serializeObject - v0.2 - 1/20/2010
- * http://benalman.com/projects/jquery-misc-plugins/
- *
- * Copyright (c) 2010 "Cowboy" Ben Alman
- * Dual licensed under the MIT and GPL licenses.
- * http://benalman.com/about/license/
- */
+ * jQuery serializeObject - v0.2 - 1/20/2010
+ * http://benalman.com/projects/jquery-misc-plugins/
+ *
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
// eslint-disable-next-line func-names
$.fn.mailpoetSerializeObject = function (coerce) {
var obj = {};
@@ -55,11 +55,14 @@ $.fn.mailpoetSerializeObject = function (coerce) {
// Coerce values.
if (coerce) {
- if (val && !Number.isNaN(val)) { // number
+ if (val && !Number.isNaN(val)) {
+ // number
val = +val;
- } else if (val === 'undefined') { // undefined
+ } else if (val === 'undefined') {
+ // undefined
val = undefined;
- } else if (coerceTypes[val] !== undefined) { // true, false, null
+ } else if (coerceTypes[val] !== undefined) {
+ // true, false, null
val = coerceTypes[val];
}
}
@@ -76,9 +79,10 @@ $.fn.mailpoetSerializeObject = function (coerce) {
// * Rinse & repeat.
for (; i <= keysLast; i += 1) {
key = keys[i] === '' ? cur.length : keys[i];
- cur[key] = i < keysLast
- ? cur[key] || (keys[i + 1] && isNaN(keys[i + 1]) ? {} : [])
- : val;
+ cur[key] =
+ i < keysLast
+ ? cur[key] || (keys[i + 1] && isNaN(keys[i + 1]) ? {} : [])
+ : val;
cur = cur[key];
}
} else if (Array.isArray(obj[key])) {
diff --git a/mailpoet/assets/js/src/listing/bulk_actions.jsx b/mailpoet/assets/js/src/listing/bulk_actions.jsx
index 94e38ea1cd..eae8635730 100644
--- a/mailpoet/assets/js/src/listing/bulk_actions.jsx
+++ b/mailpoet/assets/js/src/listing/bulk_actions.jsx
@@ -28,13 +28,10 @@ class ListingBulkActions extends Component {
return;
}
- const selectedIds = (this.props.selection !== 'all')
- ? this.props.selected_ids
- : [];
+ const selectedIds =
+ this.props.selection !== 'all' ? this.props.selected_ids : [];
- const data = (action.getData !== undefined)
- ? action.getData()
- : {};
+ const data = action.getData !== undefined ? action.getData() : {};
data.action = action.name;
@@ -58,7 +55,9 @@ class ListingBulkActions extends Component {
getSelectedAction(actionName) {
const selectedAction = actionName;
if (selectedAction.length > 0) {
- const action = this.props.bulk_actions.filter((act) => (act.name === selectedAction));
+ const action = this.props.bulk_actions.filter(
+ (act) => act.name === selectedAction,
+ );
if (action.length > 0) {
return action[0];
@@ -73,13 +72,16 @@ class ListingBulkActions extends Component {
}
return (
-
+
{MailPoet.I18n.t('selectBulkAction')}
- { this.state.extra }
+ {this.state.extra}
);
}
@@ -102,10 +104,7 @@ class ListingBulkActions extends Component {
ListingBulkActions.propTypes = {
bulk_actions: PropTypes.arrayOf(PropTypes.object).isRequired,
- selection: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.bool,
- ]).isRequired,
+ selection: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired,
selected_ids: PropTypes.arrayOf(PropTypes.number).isRequired,
onBulkAction: PropTypes.func.isRequired,
};
diff --git a/mailpoet/assets/js/src/listing/filters.jsx b/mailpoet/assets/js/src/listing/filters.jsx
index 2945f71454..b0b52d44fc 100644
--- a/mailpoet/assets/js/src/listing/filters.jsx
+++ b/mailpoet/assets/js/src/listing/filters.jsx
@@ -8,26 +8,24 @@ import Select from 'common/form/select/select.tsx';
class ListingFilters extends Component {
componentDidUpdate() {
const selectedFilters = this.props.filter;
- this.getAvailableFilters().forEach(
- (filter, i) => {
- if (selectedFilters[filter] !== undefined && selectedFilters[filter]) {
- jQuery(this[`filter-${i}`])
- .val(selectedFilters[filter])
- .trigger('change');
- }
+ this.getAvailableFilters().forEach((filter, i) => {
+ if (selectedFilters[filter] !== undefined && selectedFilters[filter]) {
+ jQuery(this[`filter-${i}`])
+ .val(selectedFilters[filter])
+ .trigger('change');
}
- );
+ });
}
getAvailableFilters = () => {
const filters = this.props.filters;
- return Object.keys(filters).filter((filter) => !(
- filters[filter].length === 0
- || (
- filters[filter].length === 1
- && !filters[filter][0].value
- )
- ));
+ return Object.keys(filters).filter(
+ (filter) =>
+ !(
+ filters[filter].length === 0 ||
+ (filters[filter].length === 1 && !filters[filter][0].value)
+ ),
+ );
};
handleEmptyTrash = () => this.props.onEmptyTrash();
@@ -45,27 +43,25 @@ class ListingFilters extends Component {
render() {
const filters = this.props.filters;
- const availableFilters = this.getAvailableFilters()
- .map((filter, i) => (
-
{ this[`filter-${i}`] = c; }}
- key={`filter-${filter}`}
- name={filter}
- automationId={`listing_filter_${filter}`}
- onChange={this.handleFilterAction}
- >
- { filters[filter].map((option) => (
-
- { option.label }
-
- )) }
-
- ));
+ const availableFilters = this.getAvailableFilters().map((filter, i) => (
+
{
+ this[`filter-${i}`] = c;
+ }}
+ key={`filter-${filter}`}
+ name={filter}
+ automationId={`listing_filter_${filter}`}
+ onChange={this.handleFilterAction}
+ >
+ {filters[filter].map((option) => (
+
+ {option.label}
+
+ ))}
+
+ ));
let emptyTrash;
if (this.props.group === 'trash') {
@@ -84,18 +80,15 @@ class ListingFilters extends Component {
return (
- { availableFilters }
- { emptyTrash }
+ {availableFilters}
+ {emptyTrash}
);
}
}
ListingFilters.propTypes = {
- filters: PropTypes.oneOfType([
- PropTypes.object,
- PropTypes.array,
- ]).isRequired,
+ filters: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
onEmptyTrash: PropTypes.func.isRequired,
onBeforeSelectFilter: PropTypes.func,
onSelectFilter: PropTypes.func.isRequired,
diff --git a/mailpoet/assets/js/src/listing/header.jsx b/mailpoet/assets/js/src/listing/header.jsx
index 633f41df81..66f15e9c79 100644
--- a/mailpoet/assets/js/src/listing/header.jsx
+++ b/mailpoet/assets/js/src/listing/header.jsx
@@ -17,10 +17,9 @@ class ListingHeader extends Component {
render() {
const columns = this.props.columns.map((column, index) => {
const renderColumn = column;
- renderColumn.is_primary = (index === 0);
- renderColumn.sorted = (this.props.sort_by === column.name)
- ? this.props.sort_order
- : 'desc';
+ renderColumn.is_primary = index === 0;
+ renderColumn.sorted =
+ this.props.sort_by === column.name ? this.props.sort_order : 'desc';
return (
+
{MailPoet.I18n.t('selectAll')}
@@ -69,10 +66,7 @@ ListingHeader.propTypes = {
sort_by: PropTypes.string,
sort_order: PropTypes.string,
is_selectable: PropTypes.bool.isRequired,
- selection: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.bool,
- ]).isRequired,
+ selection: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]).isRequired,
};
ListingHeader.defaultProps = {
diff --git a/mailpoet/assets/js/src/listing/listing.jsx b/mailpoet/assets/js/src/listing/listing.jsx
index 1a59cc77a1..db4749c2e7 100644
--- a/mailpoet/assets/js/src/listing/listing.jsx
+++ b/mailpoet/assets/js/src/listing/listing.jsx
@@ -65,16 +65,17 @@ class Listing extends Component {
setParams = () => {
if (this.props.location) {
const params = Object.keys(this.state)
- .filter((key) => (
- [
- 'group',
- 'filter',
- 'search',
- 'page',
- 'sort_by',
- 'sort_order',
- ].indexOf(key) !== -1
- ))
+ .filter(
+ (key) =>
+ [
+ 'group',
+ 'filter',
+ 'search',
+ 'page',
+ 'sort_by',
+ 'sort_order',
+ ].indexOf(key) !== -1,
+ )
.map((key) => {
let value = this.state[key];
if (value === Object(value)) {
@@ -101,9 +102,8 @@ class Listing extends Component {
};
getUrlWithParams = (params) => {
- let baseUrl = (this.props.base_url !== undefined)
- ? this.props.base_url
- : null;
+ let baseUrl =
+ this.props.base_url !== undefined ? this.props.base_url : null;
if (baseUrl) {
baseUrl = this.setBaseUrlParams(baseUrl);
@@ -164,37 +164,45 @@ class Listing extends Component {
sort_by: this.state.sort_by,
sort_order: this.state.sort_order,
},
- }).always(() => {
- if (!this.isComponentMounted) return;
- this.setState({ loading: false });
- }).done((response) => {
- if (!this.isComponentMounted) return;
- this.setState({
- items: response.data || [],
- filters: response.meta.filters || {},
- groups: response.meta.groups || [],
- count: response.meta.count || 0,
- meta: _.omit(response.meta, ['filters', 'groups', 'count']),
- }, () => {
- // if viewing an empty trash
- if (this.state.group === 'trash' && response.meta.count === 0) {
- // redirect to default group
- this.handleGroup('all');
- }
+ })
+ .always(() => {
+ if (!this.isComponentMounted) return;
+ this.setState({ loading: false });
+ })
+ .done((response) => {
+ if (!this.isComponentMounted) return;
+ this.setState(
+ {
+ items: response.data || [],
+ filters: response.meta.filters || {},
+ groups: response.meta.groups || [],
+ count: response.meta.count || 0,
+ meta: _.omit(response.meta, ['filters', 'groups', 'count']),
+ },
+ () => {
+ // if viewing an empty trash
+ if (this.state.group === 'trash' && response.meta.count === 0) {
+ // redirect to default group
+ this.handleGroup('all');
+ }
- // trigger afterGetItems callback if specified
- if (this.props.afterGetItems !== undefined) {
- this.props.afterGetItems(this.state);
+ // trigger afterGetItems callback if specified
+ if (this.props.afterGetItems !== undefined) {
+ this.props.afterGetItems(this.state);
+ }
+ },
+ );
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ this.context.notices.error(
+ response.errors.map((error) => (
+ {error.message}
+ )),
+ { scroll: true },
+ );
}
});
- }).fail((response) => {
- if (response.errors.length > 0) {
- this.context.notices.error(
- response.errors.map((error) => {error.message}
),
- { scroll: true }
- );
- }
- });
};
initWithParams = (params) => {
@@ -256,20 +264,24 @@ class Listing extends Component {
data: {
id,
},
- }).done((response) => {
- if (
- this.props.messages !== undefined
- && this.props.messages.onRestore !== undefined
- ) {
- this.props.messages.onRestore(response);
- }
- this.getItems();
- }).fail((response) => {
- this.context.notices.error(
- response.errors.map((error) => {error.message}
),
- { scroll: true }
- );
- });
+ })
+ .done((response) => {
+ if (
+ this.props.messages !== undefined &&
+ this.props.messages.onRestore !== undefined
+ ) {
+ this.props.messages.onRestore(response);
+ }
+ this.getItems();
+ })
+ .fail((response) => {
+ this.context.notices.error(
+ response.errors.map((error) => (
+ {error.message}
+ )),
+ { scroll: true },
+ );
+ });
};
handleTrashItem = (id) => {
@@ -285,21 +297,25 @@ class Listing extends Component {
data: {
id,
},
- }).done((response) => {
- if (
- this.props.messages !== undefined
- && this.props.messages.onTrash !== undefined
- ) {
- this.props.messages.onTrash(response);
- }
- this.getItems();
- }).fail((response) => {
- this.context.notices.error(
- response.errors.map((error) => {error.message}
),
- { scroll: true }
- );
- this.setState({ loading: false });
- });
+ })
+ .done((response) => {
+ if (
+ this.props.messages !== undefined &&
+ this.props.messages.onTrash !== undefined
+ ) {
+ this.props.messages.onTrash(response);
+ }
+ this.getItems();
+ })
+ .fail((response) => {
+ this.context.notices.error(
+ response.errors.map((error) => (
+ {error.message}
+ )),
+ { scroll: true },
+ );
+ this.setState({ loading: false });
+ });
};
handleDeleteItem = (id) => {
@@ -315,46 +331,55 @@ class Listing extends Component {
data: {
id,
},
- }).done((response) => {
- if (
- this.props.messages !== undefined
- && this.props.messages.onDelete !== undefined
- ) {
- this.props.messages.onDelete(response);
- }
- this.getItems();
- }).fail((response) => {
- this.context.notices.error(
- response.errors.map((error) => {error.message}
),
- { scroll: true }
- );
- });
+ })
+ .done((response) => {
+ if (
+ this.props.messages !== undefined &&
+ this.props.messages.onDelete !== undefined
+ ) {
+ this.props.messages.onDelete(response);
+ }
+ this.getItems();
+ })
+ .fail((response) => {
+ this.context.notices.error(
+ response.errors.map((error) => (
+ {error.message}
+ )),
+ { scroll: true },
+ );
+ });
};
- handleEmptyTrash = () => this.handleBulkAction('all', {
- action: 'delete',
- group: 'trash',
- }).done((response) => {
- if (
- this.props.messages !== undefined
- && this.props.messages.onDelete !== undefined
- ) {
- this.props.messages.onDelete(response);
- }
- // redirect to default group
- this.handleGroup('all');
- }).fail((response) => {
- this.context.notices.error(
- response.errors.map((error) => {error.message}
),
- { scroll: true }
- );
- });
+ handleEmptyTrash = () =>
+ this.handleBulkAction('all', {
+ action: 'delete',
+ group: 'trash',
+ })
+ .done((response) => {
+ if (
+ this.props.messages !== undefined &&
+ this.props.messages.onDelete !== undefined
+ ) {
+ this.props.messages.onDelete(response);
+ }
+ // redirect to default group
+ this.handleGroup('all');
+ })
+ .fail((response) => {
+ this.context.notices.error(
+ response.errors.map((error) => (
+ {error.message}
+ )),
+ { scroll: true },
+ );
+ });
handleBulkAction = (selectedIds, params) => {
if (
- this.state.selection === false
- && this.state.selected_ids.length === 0
- && selectedIds !== 'all'
+ this.state.selection === false &&
+ this.state.selected_ids.length === 0 &&
+ selectedIds !== 'all'
) {
return false;
}
@@ -379,40 +404,53 @@ class Listing extends Component {
endpoint: this.props.endpoint,
action: 'bulkAction',
data,
- }).done(() => {
- // Reload items after a bulk action except for empty trash action which redirects to All tab.
- const isEmptyTrashAction = selectedIds === 'all' && params.group === 'trash' && params.action === 'delete';
- if (!isEmptyTrashAction) {
- this.getItems();
- }
- }).fail((response) => {
- if (response.errors.length > 0) {
- this.context.notices.error(
- response.errors.map((error) => {error.message}
),
- { scroll: true }
- );
- }
- });
+ })
+ .done(() => {
+ // Reload items after a bulk action except for empty trash action which redirects to All tab.
+ const isEmptyTrashAction =
+ selectedIds === 'all' &&
+ params.group === 'trash' &&
+ params.action === 'delete';
+ if (!isEmptyTrashAction) {
+ this.getItems();
+ }
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ this.context.notices.error(
+ response.errors.map((error) => (
+ {error.message}
+ )),
+ { scroll: true },
+ );
+ }
+ });
};
handleSearch = (search) => {
- this.setState({
- search,
- page: 1,
- selection: false,
- selected_ids: [],
- }, () => {
- this.setParams();
- });
+ this.setState(
+ {
+ search,
+ page: 1,
+ selection: false,
+ selected_ids: [],
+ },
+ () => {
+ this.setParams();
+ },
+ );
};
handleSort = (sortBy, sortOrder = 'asc') => {
- this.setState({
- sort_by: sortBy,
- sort_order: (sortOrder === 'asc') ? 'asc' : 'desc',
- }, () => {
- this.setParams();
- });
+ this.setState(
+ {
+ sort_by: sortBy,
+ sort_order: sortOrder === 'asc' ? 'asc' : 'desc',
+ },
+ () => {
+ this.setParams();
+ },
+ );
};
handleSelectItem = (id, isChecked) => {
@@ -424,7 +462,8 @@ class Listing extends Component {
selectedIds = jQuery.merge(selectedIds, [id]);
// check whether all items on the page are selected
if (
- jQuery('tbody .mailpoet-listing-check-column :checkbox:not(:checked)').length === 0
+ jQuery('tbody .mailpoet-listing-check-column :checkbox:not(:checked)')
+ .length === 0
) {
selection = 'page';
}
@@ -473,34 +512,43 @@ class Listing extends Component {
};
handleFilter = (filters) => {
- this.setState({
- filter: filters,
- page: 1,
- }, () => {
- this.setParams();
- });
+ this.setState(
+ {
+ filter: filters,
+ page: 1,
+ },
+ () => {
+ this.setParams();
+ },
+ );
};
handleGroup = (group) => {
// reset search
jQuery('#search_input').val('');
- this.setState({
- group,
- page: 1,
- }, () => {
- this.setParams();
- });
+ this.setState(
+ {
+ group,
+ page: 1,
+ },
+ () => {
+ this.setParams();
+ },
+ );
};
handleSetPage = (page) => {
- this.setState({
- page,
- selection: false,
- selected_ids: [],
- }, () => {
- this.setParams();
- });
+ this.setState(
+ {
+ page,
+ selection: false,
+ selected_ids: [],
+ },
+ () => {
+ this.setParams();
+ },
+ );
};
handleRenderItem = (item, actions) => {
@@ -520,7 +568,7 @@ class Listing extends Component {
// columns
let columns = this.props.columns || [];
columns = columns.filter(
- (column) => (column.display === undefined || !!(column.display) === true)
+ (column) => column.display === undefined || !!column.display === true,
);
// bulk actions
@@ -544,28 +592,29 @@ class Listing extends Component {
// item actions
const itemActions = this.props.item_actions || [];
- const tableClasses = classNames(
- 'mailpoet-listing-table',
- {
- 'mailpoet-listing-loading': this.state.loading,
- }
- );
+ const tableClasses = classNames('mailpoet-listing-table', {
+ 'mailpoet-listing-loading': this.state.loading,
+ });
// search
let search = (
-
+
);
if (this.props.search === false) {
search = false;
}
- const categories = this.state.groups.map((group) => Object.assign(group, {
- automationId: `filters_${group.label.replace(' ', '_').toLowerCase()}`,
- }))
- .filter((category) => !(category.name === 'trash' && category.count === 0));
+ const categories = this.state.groups
+ .map((group) =>
+ Object.assign(group, {
+ automationId: `filters_${group.label
+ .replace(' ', '_')
+ .toLowerCase()}`,
+ }),
+ )
+ .filter(
+ (category) => !(category.name === 'trash' && category.count === 0),
+ );
// groups
let groups = (
@@ -589,16 +638,19 @@ class Listing extends Component {
extraActions = this.props.renderExtraActions(this.state);
}
- const listingClassName = classNames('mailpoet-listing', this.props.className);
+ const listingClassName = classNames(
+ 'mailpoet-listing',
+ this.props.className,
+ );
return (
<>
- { this.state.meta.mta_method && }
+ {this.state.meta.mta_method && }
- { groups }
+ {groups}
- { search }
+ {search}
-
{
const sortBy = this.props.column.name;
- const sortOrder = (this.props.column.sorted === 'asc') ? 'desc' : 'asc';
+ const sortOrder = this.props.column.sorted === 'asc' ? 'desc' : 'asc';
this.props.onSort(sortBy, sortOrder);
};
@@ -15,8 +15,8 @@ class ListingColumn extends Component {
{ 'column-primary': this.props.column.is_primary },
{ sortable: this.props.column.sortable },
this.props.column.sorted,
- { sorted: (this.props.sort_by === this.props.column.name) },
- this.props.column.className
+ { sorted: this.props.sort_by === this.props.column.name },
+ this.props.column.className,
);
let label;
@@ -27,14 +27,16 @@ class ListingColumn extends Component {
role="button"
tabIndex={0}
onKeyDown={(event) => {
- if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
+ if (
+ ['keydown', 'keypress'].includes(event.type) &&
+ ['Enter', ' '].includes(event.key)
) {
event.preventDefault();
this.handleSort();
}
}}
>
- { this.props.column.label }
+ {this.props.column.label}
);
@@ -63,10 +65,7 @@ ListingColumn.propTypes = {
is_primary: PropTypes.bool,
sortable: PropTypes.bool,
label: PropTypes.string,
- width: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- ]),
+ width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
className: PropTypes.string,
}).isRequired,
sort_by: PropTypes.string,
diff --git a/mailpoet/assets/js/src/listing/listing_item.jsx b/mailpoet/assets/js/src/listing/listing_item.jsx
index 3447828987..8194c8868c 100644
--- a/mailpoet/assets/js/src/listing/listing_item.jsx
+++ b/mailpoet/assets/js/src/listing/listing_item.jsx
@@ -7,10 +7,7 @@ import Checkbox from 'common/form/checkbox/checkbox.tsx';
class ListingItem extends Component {
handleSelectItem = (e) => {
- this.props.onSelectItem(
- parseInt(e.target.value, 10),
- e.target.checked
- );
+ this.props.onSelectItem(parseInt(e.target.value, 10), e.target.checked);
return !e.target.checked;
};
@@ -32,17 +29,19 @@ class ListingItem extends Component {
if (this.props.is_selectable === true) {
checkbox = (
-
-
- {
- `Select ${this.props.item[this.props.columns[0].name]}`
- }
+
+
+ {`Select ${this.props.item[this.props.columns[0].name]}`}
{}}
onChange={this.handleSelectItem}
disabled={this.props.selection === 'all'}
@@ -58,7 +57,10 @@ class ListingItem extends Component {
if (customActions.length > 0) {
itemActions = customActions
- .filter((action) => action.display === undefined || action.display(this.props.item))
+ .filter(
+ (action) =>
+ action.display === undefined || action.display(this.props.item),
+ )
.map((action, index) => {
let customAction = null;
@@ -91,14 +93,16 @@ class ListingItem extends Component {
role="button"
tabIndex={index}
onKeyDown={(event) => {
- if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
+ if (
+ ['keydown', 'keypress'].includes(event.type) &&
+ ['Enter', ' '].includes(event.key)
) {
event.preventDefault();
this.props.onRefreshItems();
}
}}
>
- { action.link(this.props.item) }
+ {action.link(this.props.item)}
);
} else if (action.link) {
@@ -107,7 +111,7 @@ class ListingItem extends Component {
key={`action-${action.name}`}
className={classNames(action.name, action.className)}
>
- { action.link(this.props.item, this.props.location) }
+ {action.link(this.props.item, this.props.location)}
);
} else {
@@ -121,11 +125,14 @@ class ListingItem extends Component {
onClick={(event) => {
event.preventDefault();
if (action.onClick !== undefined) {
- action.onClick(this.props.item, this.props.onRefreshItems);
+ action.onClick(
+ this.props.item,
+ this.props.onRefreshItems,
+ );
}
}}
>
- { action.label }
+ {action.label}
);
@@ -135,12 +142,13 @@ class ListingItem extends Component {
} else {
itemActions = (
-
{MailPoet.I18n.t('edit')}
@@ -187,22 +195,26 @@ class ListingItem extends Component {
} else {
actions = (
-
- { itemActions }
-
+
{itemActions}
);
}
const rowClasses = classNames({
- 'mailpoet-listing-row-selected': this.props.item.selected || this.props.selection === 'all',
- 'mailpoet-listing-row-inactive': this.props.isItemInactive(this.props.item),
+ 'mailpoet-listing-row-selected':
+ this.props.item.selected || this.props.selection === 'all',
+ 'mailpoet-listing-row-inactive': this.props.isItemInactive(
+ this.props.item,
+ ),
});
return (
-
- { checkbox }
- { this.props.onRenderItem(this.props.item, actions) }
+
+ {checkbox}
+ {this.props.onRenderItem(this.props.item, actions)}
);
}
diff --git a/mailpoet/assets/js/src/listing/listing_items.jsx b/mailpoet/assets/js/src/listing/listing_items.jsx
index 853e657783..959e9d86d1 100644
--- a/mailpoet/assets/js/src/listing/listing_items.jsx
+++ b/mailpoet/assets/js/src/listing/listing_items.jsx
@@ -12,13 +12,18 @@ class ListingItems extends Component {
if (this.props.items.length === 0) {
let message;
if (this.props.loading === true) {
- message = (this.props.messages.onLoadingItems
- && this.props.messages.onLoadingItems(this.props.group))
- || MailPoet.I18n.t('loadingItems');
+ message =
+ (this.props.messages.onLoadingItems &&
+ this.props.messages.onLoadingItems(this.props.group)) ||
+ MailPoet.I18n.t('loadingItems');
} else {
- message = (this.props.messages.onNoItemsFound
- && this.props.messages.onNoItemsFound(this.props.group, this.props.search))
- || MailPoet.I18n.t('noItemsFound');
+ message =
+ (this.props.messages.onNoItemsFound &&
+ this.props.messages.onNoItemsFound(
+ this.props.group,
+ this.props.search,
+ )) ||
+ MailPoet.I18n.t('noItemsFound');
}
return (
@@ -26,8 +31,7 @@ class ListingItems extends Component {
@@ -38,35 +42,33 @@ class ListingItems extends Component {
);
}
- const isSelectAllHidden = this.props.selection === false
- || (this.props.count <= this.props.limit);
- const areBulkActionsHidden = !(this.props.selected_ids.length > 0 || this.props.selection);
+ const isSelectAllHidden =
+ this.props.selection === false || this.props.count <= this.props.limit;
+ const areBulkActionsHidden = !(
+ this.props.selected_ids.length > 0 || this.props.selection
+ );
const actionAndSelectAllRowClasses = classNames(
'mailpoet-listing-actions-and-select-all-row',
{
mailpoet_hidden: areBulkActionsHidden && isSelectAllHidden,
- }
- );
- const selectAllClasses = classNames(
- 'mailpoet-listing-select-all',
- {
- mailpoet_hidden: isSelectAllHidden,
- }
+ },
);
+ const selectAllClasses = classNames('mailpoet-listing-select-all', {
+ mailpoet_hidden: isSelectAllHidden,
+ });
return (
- { !areBulkActionsHidden && (
+ {!areBulkActionsHidden && (
- ) }
+ )}
@@ -108,7 +106,8 @@ class ListingItems extends Component {
{this.props.items.map((item) => {
const renderItem = item;
renderItem.id = parseInt(item.id, 10);
- renderItem.selected = (this.props.selected_ids.indexOf(renderItem.id) !== -1);
+ renderItem.selected =
+ this.props.selected_ids.indexOf(renderItem.id) !== -1;
let key = `item-${renderItem.id}-${item.id}`;
if (typeof this.props.getListingItemKey === 'function') {
key = this.props.getListingItemKey(item);
diff --git a/mailpoet/assets/js/src/listing/notices.jsx b/mailpoet/assets/js/src/listing/notices.jsx
index 6ca47f6b6a..73c615106f 100644
--- a/mailpoet/assets/js/src/listing/notices.jsx
+++ b/mailpoet/assets/js/src/listing/notices.jsx
@@ -7,35 +7,48 @@ const resumeMailerSending = () => {
api_version: window.mailpoet_api_version,
endpoint: 'mailer',
action: 'resumeSending',
- }).done(() => {
- MailPoet.Notice.success(MailPoet.I18n.t('mailerSendingResumedNotice'));
- window.mailpoet_listing.forceUpdate();
- }).fail((response) => {
- if (response.errors.length > 0) {
- MailPoet.Notice.error(
- response.errors.map((error) => error.message),
- { scroll: true }
- );
- }
- });
+ })
+ .done(() => {
+ MailPoet.Notice.success(MailPoet.I18n.t('mailerSendingResumedNotice'));
+ window.mailpoet_listing.forceUpdate();
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ MailPoet.Notice.error(
+ response.errors.map((error) => error.message),
+ { scroll: true },
+ );
+ }
+ });
};
function MailerError(props) {
- if (!props.mta_log.error || props.mta_log.status !== 'paused' || props.mta_log.error.operation === 'authorization') {
+ if (
+ !props.mta_log.error ||
+ props.mta_log.status !== 'paused' ||
+ props.mta_log.error.operation === 'authorization'
+ ) {
return null;
}
// do not display MailPoet API Key error twice
- if (props.mta_log.error.operation === 'send' && props.mta_method === 'MailPoet' && MailPoet.hasInvalidMssApiKey) {
+ if (
+ props.mta_log.error.operation === 'send' &&
+ props.mta_method === 'MailPoet' &&
+ MailPoet.hasInvalidMssApiKey
+ ) {
return null;
}
// do not display Email Volume Limit reached error twice
- if (props.mta_method === 'MailPoet' && props.mta_log.error.operation === 'email_limit_reached') {
+ if (
+ props.mta_method === 'MailPoet' &&
+ props.mta_log.error.operation === 'email_limit_reached'
+ ) {
return null;
}
if (props.mta_log.error.operation === 'migration') {
return (
-
{ props.mta_log.error.error_message }
+
{props.mta_log.error.error_message}
);
}
@@ -55,7 +68,10 @@ function MailerError(props) {
});
message = ReactStringReplace(message, /\[link-(\d+)\]/g, (match) => {
- const link = new DOMParser().parseFromString(links[match], 'text/xml').firstChild;
+ const link = new DOMParser().parseFromString(
+ links[match],
+ 'text/xml',
+ ).firstChild;
return (
- { link.textContent }
+ {link.textContent}
);
});
@@ -73,15 +89,13 @@ function MailerError(props) {
message = ReactStringReplace(
message,
/( )/g,
- () => // eslint-disable-line no-plusplus
+ () => , // eslint-disable-line no-plusplus
);
if (props.mta_log.error.operation === 'pending_approval') {
return (
-
- { message }
-
+
{message}
);
}
@@ -89,9 +103,7 @@ function MailerError(props) {
if (props.mta_log.error.operation === 'insufficient_privileges') {
return (
@@ -111,16 +123,19 @@ function MailerError(props) {
return (
- {
- props.mta_log.error.operation === 'send'
- ? MailPoet.I18n.t('mailerSendErrorNotice').replace('%1$s', props.mta_method)
- : MailPoet.I18n.t('mailerConnectionErrorNotice')
- }
- :
- {' '}
- { message }
+ {props.mta_log.error.operation === 'send'
+ ? MailPoet.I18n.t('mailerSendErrorNotice').replace(
+ '%1$s',
+ props.mta_method,
+ )
+ : MailPoet.I18n.t('mailerConnectionErrorNotice')}
+ : {message}
- { props.mta_method === 'PHPMail' ?
:
}
+ {props.mta_method === 'PHPMail' ? (
+
+ ) : (
+
+ )}
- { MailPoet.I18n.t('mailerResumeSendingButton') }
+ {MailPoet.I18n.t('mailerResumeSendingButton')}
@@ -145,24 +160,26 @@ MailerError.propTypes = {
function PHPMailerCheckSettingsNotice() {
return (
<>
- { MailPoet.I18n.t('mailerSendErrorCheckConfiguration') }
+ {MailPoet.I18n.t('mailerSendErrorCheckConfiguration')}
- {
- ReactStringReplace(
- MailPoet.I18n.t('mailerSendErrorUseSendingService'),
- /(.*?)<\/b>/g,
- (match, key) => { match }
- )
- }
+ {ReactStringReplace(
+ MailPoet.I18n.t('mailerSendErrorUseSendingService'),
+ /(.*?)<\/b>/g,
+ (match, key) => (
+ {match}
+ ),
+ )}
- { MailPoet.I18n.t('mailerSendErrorSignUpForSendingService') }
+ {MailPoet.I18n.t('mailerSendErrorSignUpForSendingService')}
@@ -173,13 +190,15 @@ function PHPMailerCheckSettingsNotice() {
function MailerCheckSettingsNotice() {
return (
- {
- ReactStringReplace(
- MailPoet.I18n.t('mailerCheckSettingsNotice'),
- /\[link\](.*?)\[\/link\]/g,
- (match) => { match }
- )
- }
+ {ReactStringReplace(
+ MailPoet.I18n.t('mailerCheckSettingsNotice'),
+ /\[link\](.*?)\[\/link\]/g,
+ (match) => (
+
+ {match}
+
+ ),
+ )}
);
}
diff --git a/mailpoet/assets/js/src/listing/pages.jsx b/mailpoet/assets/js/src/listing/pages.jsx
index e6c52dc6cb..a0a2cc73df 100644
--- a/mailpoet/assets/js/src/listing/pages.jsx
+++ b/mailpoet/assets/js/src/listing/pages.jsx
@@ -12,11 +12,14 @@ class ListingPages extends Component {
}
setPage = (page) => {
- this.setState({
- page: null,
- }, () => {
- this.props.onSetPage(this.constrainPage(page));
- });
+ this.setState(
+ {
+ page: null,
+ },
+ () => {
+ this.props.onSetPage(this.constrainPage(page));
+ },
+ );
};
setFirstPage = () => {
@@ -28,15 +31,11 @@ class ListingPages extends Component {
};
setPreviousPage = () => {
- this.setPage(this.constrainPage(
- parseInt(this.props.page, 10) - 1
- ));
+ this.setPage(this.constrainPage(parseInt(this.props.page, 10) - 1));
};
setNextPage = () => {
- this.setPage(this.constrainPage(
- parseInt(this.props.page, 10) + 1
- ));
+ this.setPage(this.constrainPage(parseInt(this.props.page, 10) + 1));
};
getLastPage = () => Math.ceil(this.props.count / this.props.limit);
@@ -57,7 +56,8 @@ class ListingPages extends Component {
this.setPage(e.target.value);
};
- constrainPage = (page) => Math.min(Math.max(1, Math.abs(Number(page))), this.getLastPage());
+ constrainPage = (page) =>
+ Math.min(Math.max(1, Math.abs(Number(page))), this.getLastPage());
render() {
if (this.props.count === 0) {
@@ -98,7 +98,9 @@ class ListingPages extends Component {
}}
className="mailpoet-listing-pages-previous"
>
- {MailPoet.I18n.t('previousPage')}
+
+ {MailPoet.I18n.t('previousPage')}
+
@@ -116,7 +118,9 @@ class ListingPages extends Component {
}}
className="mailpoet-listing-pages-first"
>
- {MailPoet.I18n.t('firstPage')}
+
+ {MailPoet.I18n.t('firstPage')}
+
@@ -135,7 +139,9 @@ class ListingPages extends Component {
}}
className="mailpoet-listing-pages-next"
>
- {MailPoet.I18n.t('nextPage')}
+
+ {MailPoet.I18n.t('nextPage')}
+
@@ -153,7 +159,9 @@ class ListingPages extends Component {
}}
className="mailpoet-listing-pages-last"
>
- {MailPoet.I18n.t('lastPage')}
+
+ {MailPoet.I18n.t('lastPage')}
+
@@ -206,23 +214,24 @@ class ListingPages extends Component {
);
}
- const classes = classNames(
- 'mailpoet-listing-pages',
- { 'one-page': (this.props.count <= this.props.limit) }
- );
+ const classes = classNames('mailpoet-listing-pages', {
+ 'one-page': this.props.count <= this.props.limit,
+ });
let numberOfItemsLabel;
if (Number(this.props.count) === 1) {
numberOfItemsLabel = MailPoet.I18n.t('numberOfItemsSingular');
} else {
- numberOfItemsLabel = MailPoet.I18n.t('numberOfItemsMultiple')
- .replace('%1$d', parseInt(this.props.count, 10).toLocaleString());
+ numberOfItemsLabel = MailPoet.I18n.t('numberOfItemsMultiple').replace(
+ '%1$d',
+ parseInt(this.props.count, 10).toLocaleString(),
+ );
}
return (
- { numberOfItemsLabel }
- { pagination }
+ {numberOfItemsLabel}
+ {pagination}
);
}
@@ -231,10 +240,7 @@ class ListingPages extends Component {
ListingPages.propTypes = {
position: PropTypes.string,
onSetPage: PropTypes.func.isRequired,
- page: PropTypes.oneOfType([
- PropTypes.number,
- PropTypes.string,
- ]).isRequired,
+ page: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
count: PropTypes.number.isRequired,
limit: PropTypes.number.isRequired,
};
@@ -249,8 +255,10 @@ ListingPages.defaultProps = {
} */
function Arrow({ direction, disabled }) {
- const arrowLeftPath = 'M8 10V2c0-.552-.448-1-1-1-.216 0-.427.07-.6.2l-5.333 4c-.442.331-.532.958-.2 1.4.057.076.124.143.2.2l5.333 4c.442.331 1.069.242 1.4-.2.13-.173.2-.384.2-.6z';
- const arrowRightPath = 'M0 10V2c0-.552.448-1 1-1 .216 0 .427.07.6.2l5.333 4c.442.331.532.958.2 1.4-.057.076-.124.143-.2.2l-5.333 4c-.442.331-1.069.242-1.4-.2-.13-.173-.2-.384-.2-.6z';
+ const arrowLeftPath =
+ 'M8 10V2c0-.552-.448-1-1-1-.216 0-.427.07-.6.2l-5.333 4c-.442.331-.532.958-.2 1.4.057.076.124.143.2.2l5.333 4c.442.331 1.069.242 1.4-.2.13-.173.2-.384.2-.6z';
+ const arrowRightPath =
+ 'M0 10V2c0-.552.448-1 1-1 .216 0 .427.07.6.2l5.333 4c.442.331.532.958.2 1.4-.057.076-.124.143-.2.2l-5.333 4c-.442.331-1.069.242-1.4-.2-.13-.173-.2-.384-.2-.6z';
return (
-
- {logs.map((log) => )}
+ {logs.map((log) => (
+
+ ))}
diff --git a/mailpoet/assets/js/src/mailpoet.ts b/mailpoet/assets/js/src/mailpoet.ts
index f643389eb1..56b539ea1f 100644
--- a/mailpoet/assets/js/src/mailpoet.ts
+++ b/mailpoet/assets/js/src/mailpoet.ts
@@ -34,11 +34,10 @@ export const MailPoet = {
emailRegex: window.mailpoet_email_regex,
wpSegmentState: window.mailpoet_wp_segment_state,
wpWeekStartsOn: window.mailpoet_wp_week_starts_on,
- subscribersCountsCacheCreatedAt: window.mailpoet_subscribers_counts_cache_created_at,
- getShortcodeLinks: (): string[] => (window.mailpoet_shortcode_links
- ? window.mailpoet_shortcode_links
- : []
- ),
+ subscribersCountsCacheCreatedAt:
+ window.mailpoet_subscribers_counts_cache_created_at,
+ getShortcodeLinks: (): string[] =>
+ window.mailpoet_shortcode_links ? window.mailpoet_shortcode_links : [],
settings: window.mailpoet_settings,
trackingConfig: window.mailpoet_tracking_config || {},
I18n: MailPoetI18n,
diff --git a/mailpoet/assets/js/src/mailpoet_com_url_factory.js b/mailpoet/assets/js/src/mailpoet_com_url_factory.js
index 8cf04b58b6..3e6e0af64c 100644
--- a/mailpoet/assets/js/src/mailpoet_com_url_factory.js
+++ b/mailpoet/assets/js/src/mailpoet_com_url_factory.js
@@ -1,4 +1,4 @@
-const MailPoetComUrlFactory = referralId => {
+const MailPoetComUrlFactory = (referralId) => {
const baseUrl = 'https://www.mailpoet.com/';
const baseShopUrl = 'https://account.mailpoet.com/';
@@ -8,7 +8,9 @@ const MailPoetComUrlFactory = referralId => {
finalParams.ref = referralId;
}
const url = new URL(path, base);
- Object.keys(finalParams).map(key => (url.searchParams.set(key, finalParams[key])));
+ Object.keys(finalParams).map((key) =>
+ url.searchParams.set(key, finalParams[key]),
+ );
return url.toString();
};
@@ -19,15 +21,17 @@ const MailPoetComUrlFactory = referralId => {
return getUrl(baseUrl, 'free-plan', paramsObject);
},
- getPricingPageUrl: subscribers => (
- getUrl(baseUrl, 'pricing', { subscribers })
- ),
+ getPricingPageUrl: (subscribers) =>
+ getUrl(baseUrl, 'pricing', { subscribers }),
- getUpgradeUrl: (key) => (
- getUrl(baseShopUrl, '/orders/upgrade/' + key, {})
- ),
+ getUpgradeUrl: (key) => getUrl(baseShopUrl, '/orders/upgrade/' + key, {}),
- getPurchasePlanUrl: (subscribersCount, subscriberEmail, planGroup, trackingObject) => {
+ getPurchasePlanUrl: (
+ subscribersCount,
+ subscriberEmail,
+ planGroup,
+ trackingObject,
+ ) => {
let paramsObject = { s: subscribersCount };
if (typeof subscriberEmail === 'string') {
paramsObject.email = subscriberEmail;
diff --git a/mailpoet/assets/js/src/marketing_optin_block/block.tsx b/mailpoet/assets/js/src/marketing_optin_block/block.tsx
index 3db4f43fa2..d178a7005a 100644
--- a/mailpoet/assets/js/src/marketing_optin_block/block.tsx
+++ b/mailpoet/assets/js/src/marketing_optin_block/block.tsx
@@ -6,16 +6,17 @@ import { CheckboxControl } from '@woocommerce/blocks-checkout';
import { useState, useEffect, RawHTML } from '@wordpress/element';
import { getSetting } from '@woocommerce/settings';
-const { optinEnabled, defaultText, defaultStatus } = getSetting('mailpoet_data');
+const { optinEnabled, defaultText, defaultStatus } =
+ getSetting('mailpoet_data');
function Block({
text,
checkoutExtensionData,
}: {
- text: string,
+ text: string;
checkoutExtensionData: {
- setExtensionData: (namespace: string, key: string, value: unknown) => void
- }
+ setExtensionData: (namespace: string, key: string, value: unknown) => void;
+ };
}): JSX.Element {
const [checked, setChecked] = useState(defaultStatus);
const { setExtensionData } = checkoutExtensionData || {};
@@ -31,7 +32,7 @@ function Block({
return (
- { text || defaultText }
+ {text || defaultText}
);
}
diff --git a/mailpoet/assets/js/src/marketing_optin_block/index.tsx b/mailpoet/assets/js/src/marketing_optin_block/index.tsx
index 58b32bd53d..7ced56608e 100644
--- a/mailpoet/assets/js/src/marketing_optin_block/index.tsx
+++ b/mailpoet/assets/js/src/marketing_optin_block/index.tsx
@@ -3,7 +3,11 @@
*/
/* eslint-disable react/react-in-jsx-scope */
import { Icon, megaphone } from '@wordpress/icons';
-import { registerBlockType, getCategories, setCategories } from '@wordpress/blocks';
+import {
+ registerBlockType,
+ getCategories,
+ setCategories,
+} from '@wordpress/blocks';
/**
* Internal dependencies
diff --git a/mailpoet/assets/js/src/modal.js b/mailpoet/assets/js/src/modal.js
index 7d2b0eab6c..c3daea8cba 100644
--- a/mailpoet/assets/js/src/modal.js
+++ b/mailpoet/assets/js/src/modal.js
@@ -1,9 +1,10 @@
/* eslint-disable func-names */
import jQuery from 'jquery';
-var closeModalImage = ''
- + ' '
- + ' ';
+var closeModalImage =
+ '' +
+ ' ' +
+ ' ';
/** *************************************************************************
MailPoet Modal:
@@ -81,28 +82,37 @@ export const MailPoetModal = {
renderer: 'html',
options: {},
templates: {
- overlay: '
',
- popup: '',
- loading: ''
- + '
'
- + '
'
- + '
'
- + '
',
- panel: '',
- subpanel: '',
+ overlay:
+ '
',
+ popup:
+ '',
+ loading:
+ '' +
+ '
' +
+ '
' +
+ '
' +
+ '
',
+ panel:
+ '',
+ subpanel:
+ '',
},
getContentContainer: function () {
return jQuery('.mailpoet_' + this.options.type + '_body');
@@ -113,7 +123,9 @@ export const MailPoetModal = {
},
compileTemplate: function (template) {
if (this.renderer === 'html') {
- return function () { return template; };
+ return function () {
+ return template;
+ };
}
return window.Handlebars.compile(template);
},
@@ -137,21 +149,20 @@ export const MailPoetModal = {
if (this.options.type !== null) {
// insert modal depending on its type
if (this.options.type === 'popup') {
- modal = this.compileTemplate(
- this.templates[this.options.type]
- );
+ modal = this.compileTemplate(this.templates[this.options.type]);
// create modal
- jQuery('#mailpoet_modal_overlay')
- .append(modal(this.options));
+ jQuery('#mailpoet_modal_overlay').append(modal(this.options));
// set title
- jQuery('#mailpoet_popup')
- .toggleClass('mailpoet_popup_has_title', Boolean(this.options.title));
- jQuery('#mailpoet_popup_title h2')
- .html(this.options.title);
+ jQuery('#mailpoet_popup').toggleClass(
+ 'mailpoet_popup_has_title',
+ Boolean(this.options.title),
+ );
+ jQuery('#mailpoet_popup_title h2').html(this.options.title);
} else if (this.options.type === 'panel') {
// create panel
- jQuery('#mailpoet_modal_overlay')
- .after(this.templates[this.options.type]);
+ jQuery('#mailpoet_modal_overlay').after(
+ this.templates[this.options.type],
+ );
}
// add proper overlay class
@@ -171,9 +182,7 @@ export const MailPoetModal = {
}
// compile template
- this.options.body_template = this.compileTemplate(
- this.options.template
- );
+ this.options.body_template = this.compileTemplate(this.options.template);
// setup events
this.setupEvents();
@@ -194,11 +203,13 @@ export const MailPoetModal = {
},
setOverlay: function (showBackground) {
if (showBackground === true) {
- jQuery('#mailpoet_modal_overlay')
- .removeClass('mailpoet_overlay_transparent');
+ jQuery('#mailpoet_modal_overlay').removeClass(
+ 'mailpoet_overlay_transparent',
+ );
} else {
- jQuery('#mailpoet_modal_overlay')
- .addClass('mailpoet_overlay_transparent');
+ jQuery('#mailpoet_modal_overlay').addClass(
+ 'mailpoet_overlay_transparent',
+ );
}
return this;
},
@@ -207,24 +218,39 @@ export const MailPoetModal = {
jQuery('#mailpoet_modal_close').on('click', this.cancel.bind(this));
// close popup when user clicks on overlay
- jQuery('#mailpoet_modal_overlay').on('click', function (e) {
- // we need to make sure that we are actually clicking on the overlay
- // because when clicking on the popup content, it will trigger
- // the click event on the overlay
- if (e.target.id === 'mailpoet_modal_overlay') { this.cancel(); }
- }.bind(this));
+ jQuery('#mailpoet_modal_overlay').on(
+ 'click',
+ function (e) {
+ // we need to make sure that we are actually clicking on the overlay
+ // because when clicking on the popup content, it will trigger
+ // the click event on the overlay
+ if (e.target.id === 'mailpoet_modal_overlay') {
+ this.cancel();
+ }
+ }.bind(this),
+ );
// close popup when user presses ESC key
- jQuery(document).on('keyup.mailpoet_modal', function (e) {
- if (this.opened === false) { return false; }
- if (e.keyCode === 27) { this.cancel(); }
- return true;
- }.bind(this));
+ jQuery(document).on(
+ 'keyup.mailpoet_modal',
+ function (e) {
+ if (this.opened === false) {
+ return false;
+ }
+ if (e.keyCode === 27) {
+ this.cancel();
+ }
+ return true;
+ }.bind(this),
+ );
// make sure the popup is repositioned when the window is resized
- jQuery(window).on('resize.mailpoet_modal', function () {
- this.setPosition();
- }.bind(this));
+ jQuery(window).on(
+ 'resize.mailpoet_modal',
+ function () {
+ this.setPosition();
+ }.bind(this),
+ );
return this;
},
@@ -257,12 +283,12 @@ export const MailPoetModal = {
jQuery('.mailpoet_' + this.options.type + '_wrapper').hide();
// add sub panel wrapper
- jQuery('#mailpoet_' + this.options.type)
- .append(this.templates.subpanel);
+ jQuery('#mailpoet_' + this.options.type).append(this.templates.subpanel);
// add sub panel content
- jQuery('.mailpoet_' + this.options.type + '_body').last()
- .html(this.subpanels[(this.subpanels.length - 1)].element);
+ jQuery('.mailpoet_' + this.options.type + '_body')
+ .last()
+ .html(this.subpanels[this.subpanels.length - 1].element);
// focus on sub panel
if (this.options.focus) {
@@ -270,15 +296,13 @@ export const MailPoetModal = {
}
} else if (this.options.element) {
jQuery('.mailpoet_' + this.options.type + '_body').empty();
- jQuery('.mailpoet_' + this.options.type + '_body')
- .append(this.options.element);
+ jQuery('.mailpoet_' + this.options.type + '_body').append(
+ this.options.element,
+ );
} else {
- jQuery('.mailpoet_' + this.options.type + '_body')
- .html(
- this.options.body_template(
- this.options.data
- )
- );
+ jQuery('.mailpoet_' + this.options.type + '_body').html(
+ this.options.body_template(this.options.data),
+ );
}
return this;
@@ -294,7 +318,7 @@ export const MailPoetModal = {
this.loadTemplate();
// show modal window
this.showModal();
- }.bind(this)
+ }.bind(this),
);
} else if (this.options.method === 'post') {
// make ajax request
@@ -308,7 +332,7 @@ export const MailPoetModal = {
// show modal window
this.showModal();
}.bind(this),
- 'json'
+ 'json',
);
}
@@ -356,7 +380,8 @@ export const MailPoetModal = {
}
jQuery('#mailpoet_panel').css({ minHeight: 'auto' });
break;
- default: throw new Error('Incorrect type');
+ default:
+ throw new Error('Incorrect type');
}
return this;
@@ -366,20 +391,24 @@ export const MailPoetModal = {
case 'popup':
break;
case 'panel':
- setTimeout(function () {
- // set position of popup depending on screen dimensions.
- if (this.options.position === 'right') {
- jQuery('#mailpoet_panel').css({
- marginRight: 0,
- });
- } else if (this.options.position === 'left') {
- jQuery('#mailpoet_panel').css({
- marginLeft: 0,
- });
- }
- }.bind(this), 0);
+ setTimeout(
+ function () {
+ // set position of popup depending on screen dimensions.
+ if (this.options.position === 'right') {
+ jQuery('#mailpoet_panel').css({
+ marginRight: 0,
+ });
+ } else if (this.options.position === 'left') {
+ jQuery('#mailpoet_panel').css({
+ marginLeft: 0,
+ });
+ }
+ }.bind(this),
+ 0,
+ );
break;
- default: throw new Error('Incorrect type');
+ default:
+ throw new Error('Incorrect type');
}
return this;
@@ -430,7 +459,8 @@ export const MailPoetModal = {
} else {
// panel and subpanel
jQuery('#mailpoet_' + this.options.type + ' .mailpoet_panel_wrapper')
- .filter(':visible').trigger('focus');
+ .filter(':visible')
+ .trigger('focus');
}
return this;
},
@@ -439,8 +469,7 @@ export const MailPoetModal = {
return this;
},
highlightOff: function () {
- jQuery('.mailpoet_modal_highlight')
- .removeClass('mailpoet_modal_highlight');
+ jQuery('.mailpoet_modal_highlight').removeClass('mailpoet_modal_highlight');
return this;
},
hideModal: function () {
@@ -463,7 +492,9 @@ export const MailPoetModal = {
return this;
}
jQuery('#mailpoet_modal_overlay').show();
- jQuery('body').addClass('mailpoet_modal_opened').css('marginRight', $body.innerWidth() - bodyInnerWidth);
+ jQuery('body')
+ .addClass('mailpoet_modal_opened')
+ .css('marginRight', $body.innerWidth() - bodyInnerWidth);
return this;
},
hideOverlay: function () {
@@ -534,8 +565,7 @@ export const MailPoetModal = {
jQuery('#mailpoet_loading').show();
// add loading class to overlay
- jQuery('#mailpoet_modal_overlay')
- .addClass('mailpoet_overlay_loading');
+ jQuery('#mailpoet_modal_overlay').addClass('mailpoet_overlay_loading');
return this;
},
@@ -543,8 +573,7 @@ export const MailPoetModal = {
jQuery('#mailpoet_loading').hide();
// remove loading class from overlay
- jQuery('#mailpoet_modal_overlay')
- .removeClass('mailpoet_overlay_loading');
+ jQuery('#mailpoet_modal_overlay').removeClass('mailpoet_overlay_loading');
return this;
},
@@ -569,10 +598,10 @@ export const MailPoetModal = {
},
success: function () {
if (this.subpanels.length > 0) {
- if (this.subpanels[(this.subpanels.length - 1)].onSuccess !== undefined) {
- this
- .subpanels[(this.subpanels.length - 1)]
- .onSuccess(this.subpanels[(this.subpanels.length - 1)].data);
+ if (this.subpanels[this.subpanels.length - 1].onSuccess !== undefined) {
+ this.subpanels[this.subpanels.length - 1].onSuccess(
+ this.subpanels[this.subpanels.length - 1].data,
+ );
}
} else if (this.options.onSuccess !== null) {
this.options.onSuccess(this.options.data);
@@ -583,10 +612,10 @@ export const MailPoetModal = {
},
cancel: function () {
if (this.subpanels.length > 0) {
- if (this.subpanels[(this.subpanels.length - 1)].onCancel !== undefined) {
- this
- .subpanels[(this.subpanels.length - 1)]
- .onCancel(this.subpanels[(this.subpanels.length - 1)].data);
+ if (this.subpanels[this.subpanels.length - 1].onCancel !== undefined) {
+ this.subpanels[this.subpanels.length - 1].onCancel(
+ this.subpanels[this.subpanels.length - 1].data,
+ );
}
} else if (this.options.onCancel !== null) {
this.options.onCancel(this.options.data);
@@ -608,14 +637,20 @@ export const MailPoetModal = {
return this;
},
close: function () {
- if (this.isLocked() === true) { return this; }
+ if (this.isLocked() === true) {
+ return this;
+ }
if (this.subpanels.length > 0) {
// close subpanel
- jQuery('.mailpoet_' + this.options.type + '_wrapper').last().remove();
+ jQuery('.mailpoet_' + this.options.type + '_wrapper')
+ .last()
+ .remove();
// show previous panel
- jQuery('.mailpoet_' + this.options.type + '_wrapper').last().show();
+ jQuery('.mailpoet_' + this.options.type + '_wrapper')
+ .last()
+ .show();
// remove last subpanels
this.subpanels.pop();
diff --git a/mailpoet/assets/js/src/mp2migrator.js b/mailpoet/assets/js/src/mp2migrator.js
index 71c3c91479..af64ed0925 100644
--- a/mailpoet/assets/js/src/mp2migrator.js
+++ b/mailpoet/assets/js/src/mp2migrator.js
@@ -4,7 +4,6 @@ import jQuery from 'jquery';
var MailPoet = mp;
MailPoet.MP2Migrator = {
-
fatal_error: '',
is_logging: false,
@@ -26,57 +25,77 @@ MailPoet.MP2Migrator = {
},
displayLogs: function () {
- jQuery.ajax({
- url: window.mailpoet_mp2_migrator.log_file_url,
- cache: false,
- }).done(function (result) {
- jQuery('#logger').html('');
- result.split('\n').forEach(function (resultRow) {
- var row = resultRow;
- if (row.substr(0, 7) === '[ERROR]' || row.substr(0, 9) === '[WARNING]' || row.toLowerCase() === MailPoet.I18n.t('import_stopped_by_user').toLowerCase()) {
- row = '' + row + ' '; // Mark the errors in red
- } else if (row.toLowerCase() === MailPoet.I18n.t('import_complete').toLowerCase()) { // Test if the import is complete
- jQuery('#import-actions').hide();
- jQuery('#upgrade-completed').show();
- }
- jQuery('#logger').append(row + ' \n');
- });
- jQuery('#logger').append('' + MailPoet.MP2Migrator.fatal_error + ' \n');
- }).always(function () {
- if (MailPoet.MP2Migrator.is_logging) {
- MailPoet.MP2Migrator.displayLogs_timeout = setTimeout(
- MailPoet.MP2Migrator.displayLogs,
- 1000
+ jQuery
+ .ajax({
+ url: window.mailpoet_mp2_migrator.log_file_url,
+ cache: false,
+ })
+ .done(function (result) {
+ jQuery('#logger').html('');
+ result.split('\n').forEach(function (resultRow) {
+ var row = resultRow;
+ if (
+ row.substr(0, 7) === '[ERROR]' ||
+ row.substr(0, 9) === '[WARNING]' ||
+ row.toLowerCase() ===
+ MailPoet.I18n.t('import_stopped_by_user').toLowerCase()
+ ) {
+ row = '' + row + ' '; // Mark the errors in red
+ } else if (
+ row.toLowerCase() ===
+ MailPoet.I18n.t('import_complete').toLowerCase()
+ ) {
+ // Test if the import is complete
+ jQuery('#import-actions').hide();
+ jQuery('#upgrade-completed').show();
+ }
+ jQuery('#logger').append(row + ' \n');
+ });
+ jQuery('#logger').append(
+ '' +
+ MailPoet.MP2Migrator.fatal_error +
+ ' \n',
);
- }
- });
+ })
+ .always(function () {
+ if (MailPoet.MP2Migrator.is_logging) {
+ MailPoet.MP2Migrator.displayLogs_timeout = setTimeout(
+ MailPoet.MP2Migrator.displayLogs,
+ 1000,
+ );
+ }
+ });
},
updateProgressbar: function () {
- jQuery.ajax({
- url: window.mailpoet_mp2_migrator.progress_url,
- cache: false,
- dataType: 'json',
- }).always(function (result) {
- // Move the progress bar
- var progress = 0;
- if ((result.total !== undefined) && (Number(result.total) !== 0)) {
- progress = Math.round((Number(result.current) / Number(result.total)) * 100);
- }
- jQuery('#progressbar').progressbar('option', 'value', progress);
- jQuery('#progresslabel').html(progress + '%');
- if (Number(result.current) !== 0) {
- jQuery('#skip-import').hide();
- jQuery('#progressbar').show();
- jQuery('#logger-container').show();
- }
- if (MailPoet.MP2Migrator.is_logging) {
- MailPoet.MP2Migrator.updateProgressbar_timeout = setTimeout(
- MailPoet.MP2Migrator.updateProgressbar,
- 1000
- );
- }
- });
+ jQuery
+ .ajax({
+ url: window.mailpoet_mp2_migrator.progress_url,
+ cache: false,
+ dataType: 'json',
+ })
+ .always(function (result) {
+ // Move the progress bar
+ var progress = 0;
+ if (result.total !== undefined && Number(result.total) !== 0) {
+ progress = Math.round(
+ (Number(result.current) / Number(result.total)) * 100,
+ );
+ }
+ jQuery('#progressbar').progressbar('option', 'value', progress);
+ jQuery('#progresslabel').html(progress + '%');
+ if (Number(result.current) !== 0) {
+ jQuery('#skip-import').hide();
+ jQuery('#progressbar').show();
+ jQuery('#logger-container').show();
+ }
+ if (MailPoet.MP2Migrator.is_logging) {
+ MailPoet.MP2Migrator.updateProgressbar_timeout = setTimeout(
+ MailPoet.MP2Migrator.updateProgressbar,
+ 1000,
+ );
+ }
+ });
},
startImport: function () {
@@ -86,7 +105,9 @@ MailPoet.MP2Migrator = {
// Disable the import button
MailPoet.MP2Migrator.import_button_label = jQuery('#import').val();
- jQuery('#import').val(MailPoet.I18n.t('importing')).attr('disabled', 'disabled');
+ jQuery('#import')
+ .val(MailPoet.I18n.t('importing'))
+ .attr('disabled', 'disabled');
// Hide the Skip button
jQuery('#skip-import').hide();
// Show the stop button
@@ -97,32 +118,36 @@ MailPoet.MP2Migrator = {
api_version: window.mailpoet_api_version,
endpoint: 'MP2Migrator',
action: 'import',
- data: {
- },
- }).always(function () {
- MailPoet.MP2Migrator.stopLogger();
- // Get the latest information after the import was stopped
- MailPoet.MP2Migrator.updateDisplay();
- MailPoet.MP2Migrator.reactivateImportButton();
- }).done(function (response) {
- if (response) {
- MailPoet.MP2Migrator.fatal_error = response.data;
- }
- }).fail(function (response) {
- if (response.errors.length > 0) {
- MailPoet.Notice.error(
- response.errors.map(function (error) {
- return error.message;
- }),
- { scroll: true }
- );
- }
- });
+ data: {},
+ })
+ .always(function () {
+ MailPoet.MP2Migrator.stopLogger();
+ // Get the latest information after the import was stopped
+ MailPoet.MP2Migrator.updateDisplay();
+ MailPoet.MP2Migrator.reactivateImportButton();
+ })
+ .done(function (response) {
+ if (response) {
+ MailPoet.MP2Migrator.fatal_error = response.data;
+ }
+ })
+ .fail(function (response) {
+ if (response.errors.length > 0) {
+ MailPoet.Notice.error(
+ response.errors.map(function (error) {
+ return error.message;
+ }),
+ { scroll: true },
+ );
+ }
+ });
return false;
},
reactivateImportButton: function () {
- jQuery('#import').val(MailPoet.MP2Migrator.import_button_label).removeAttr('disabled');
+ jQuery('#import')
+ .val(MailPoet.MP2Migrator.import_button_label)
+ .removeAttr('disabled');
jQuery('#stop-import').hide();
},
@@ -133,23 +158,24 @@ MailPoet.MP2Migrator = {
api_version: window.mailpoet_api_version,
endpoint: 'MP2Migrator',
action: 'stopImport',
- data: {
- },
- }).always(function () {
- jQuery('#stop-import').removeAttr('disabled'); // Enable the button
- MailPoet.MP2Migrator.reactivateImportButton();
- // Get the latest information after the import was stopped
- MailPoet.MP2Migrator.updateDisplay();
- }).fail(function (response) {
- if (response.errors.length > 0) {
- MailPoet.Notice.error(
- response.errors.map(function (error) {
- return error.message;
- }),
- { scroll: true }
- );
- }
- });
+ data: {},
+ })
+ .always(function () {
+ jQuery('#stop-import').removeAttr('disabled'); // Enable the button
+ MailPoet.MP2Migrator.reactivateImportButton();
+ // Get the latest information after the import was stopped
+ MailPoet.MP2Migrator.updateDisplay();
+ })
+ .fail(function (response) {
+ if (response.errors.length > 0) {
+ MailPoet.Notice.error(
+ response.errors.map(function (error) {
+ return error.message;
+ }),
+ { scroll: true },
+ );
+ }
+ });
MailPoet.MP2Migrator.stopLogger();
return false;
},
@@ -159,20 +185,21 @@ MailPoet.MP2Migrator = {
api_version: window.mailpoet_api_version,
endpoint: 'MP2Migrator',
action: 'skipImport',
- data: {
- },
- }).done(function () {
- MailPoet.MP2Migrator.gotoWelcomePage();
- }).fail(function (response) {
- if (response.errors.length > 0) {
- MailPoet.Notice.error(
- response.errors.map(function (error) {
- return error.message;
- }),
- { scroll: true }
- );
- }
- });
+ data: {},
+ })
+ .done(function () {
+ MailPoet.MP2Migrator.gotoWelcomePage();
+ })
+ .fail(function (response) {
+ if (response.errors.length > 0) {
+ MailPoet.Notice.error(
+ response.errors.map(function (error) {
+ return error.message;
+ }),
+ { scroll: true },
+ );
+ }
+ });
return false;
},
@@ -180,12 +207,11 @@ MailPoet.MP2Migrator = {
window.location.href = 'admin.php?page=mailpoet-welcome-wizard';
return false;
},
-
};
/**
- * Actions to run when the DOM is ready
- */
+ * Actions to run when the DOM is ready
+ */
jQuery(function () {
jQuery('#progressbar').progressbar({ value: 0 });
diff --git a/mailpoet/assets/js/src/newsletter_editor/App.js b/mailpoet/assets/js/src/newsletter_editor/App.js
index d1f1f1fe01..527865575c 100644
--- a/mailpoet/assets/js/src/newsletter_editor/App.js
+++ b/mailpoet/assets/js/src/newsletter_editor/App.js
@@ -30,7 +30,9 @@ AppView = Marionette.View.extend({
click: 'onClickOutsideContentHideSettings',
},
- onClickOutsideContentHideSettings: function onClickOutsideContentHideSettings(event) {
+ onClickOutsideContentHideSettings: function onClickOutsideContentHideSettings(
+ event,
+ ) {
if (jQuery(event.target).parents('#mailpoet_editor_content').length) {
return;
}
@@ -44,7 +46,11 @@ EditorApplication = Marionette.Application.extend({
onStart: function onStart() {
this._appView = new AppView();
this.showView(this._appView);
- this.listenTo(this.getChannel(), 'settingsDisplayed', this.setDisplayedSettingsId);
+ this.listenTo(
+ this.getChannel(),
+ 'settingsDisplayed',
+ this.setDisplayedSettingsId,
+ );
},
getChannel: function getChannel(channel) {
diff --git a/mailpoet/assets/js/src/newsletter_editor/behaviors/ContainerDropZoneBehavior.js b/mailpoet/assets/js/src/newsletter_editor/behaviors/ContainerDropZoneBehavior.js
index ef65454303..645f362a14 100644
--- a/mailpoet/assets/js/src/newsletter_editor/behaviors/ContainerDropZoneBehavior.js
+++ b/mailpoet/assets/js/src/newsletter_editor/behaviors/ContainerDropZoneBehavior.js
@@ -19,10 +19,9 @@ BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
columnLimit: 3,
},
onRender: function () {
- var dragAndDropDisabled = (
- _.isObject(this.view.options.renderOptions)
- && this.view.options.renderOptions.disableDragAndDrop === true
- );
+ var dragAndDropDisabled =
+ _.isObject(this.view.options.renderOptions) &&
+ this.view.options.renderOptions.disableDragAndDrop === true;
if (!dragAndDropDisabled) {
this.addDropZone();
}
@@ -36,10 +35,12 @@ BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
// TODO: Extract this limitation code to be controlled from containers
if (this.view.renderOptions.depth === 0) {
// Root level accept. Allow only layouts
- acceptableElementSelector = '.mailpoet_droppable_block.mailpoet_droppable_layout_block';
+ acceptableElementSelector =
+ '.mailpoet_droppable_block.mailpoet_droppable_layout_block';
} else if (this.view.renderOptions.depth === 2) {
// Column level accept. Disallow layouts, allow only content blocks
- acceptableElementSelector = '.mailpoet_droppable_block:not(.mailpoet_droppable_layout_block)';
+ acceptableElementSelector =
+ '.mailpoet_droppable_block:not(.mailpoet_droppable_layout_block)';
} else {
// Layout section container level. Allow nothing.
return;
@@ -72,7 +73,7 @@ BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
event.dragmove.pageY,
view.$el,
view.model.get('orientation'),
- view.model.get('blocks').length
+ view.model.get('blocks').length,
);
var element = view.$el;
var markerWidth = '';
@@ -103,7 +104,8 @@ BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
markerWidth = targetElement.width();
markerHeight = targetElement.height();
} else {
- isLastBlockInsertion = that.getCollection().length === dropPosition.index;
+ isLastBlockInsertion =
+ that.getCollection().length === dropPosition.index;
if (isLastBlockInsertion) {
targetModel = viewCollection.at(dropPosition.index - 1);
} else {
@@ -156,7 +158,10 @@ BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
if (viewCollection.length - 1 === dropPosition.index) {
marker.addClass('mailpoet_drop_marker_last');
}
- if (dropPosition.index > 0 && viewCollection.length - 1 > dropPosition.index) {
+ if (
+ dropPosition.index > 0 &&
+ viewCollection.length - 1 > dropPosition.index
+ ) {
marker.addClass('mailpoet_drop_marker_middle');
}
marker.addClass('mailpoet_drop_marker_' + dropPosition.position);
@@ -167,17 +172,15 @@ BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
if (dropPosition.position === 'before') {
$targetBlock = that
.getChildren()
- .findByModel(viewCollection.at(dropPosition.index - 1))
- .$el;
+ .findByModel(viewCollection.at(dropPosition.index - 1)).$el;
} else {
$targetBlock = that
.getChildren()
- .findByModel(viewCollection.at(dropPosition.index))
- .$el;
+ .findByModel(viewCollection.at(dropPosition.index)).$el;
}
margin = $targetBlock.outerHeight(true) - $targetBlock.outerHeight();
- marker.css('top', topOffset - (margin / 2));
+ marker.css('top', topOffset - margin / 2);
marker.css('left', leftOffset);
marker.css('width', markerWidth);
marker.css('height', markerHeight);
@@ -204,7 +207,7 @@ BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
event.dragEvent.pageY,
view.$el,
view.model.get('orientation'),
- view.model.get('blocks').length
+ view.model.get('blocks').length,
);
var droppableModel = event.draggable.getDropModel();
var viewCollection = that.getCollection();
@@ -218,12 +221,20 @@ BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
if (dropPosition.insertionType === 'normal') {
// Normal insertion of dropModel into existing collection
- index = (dropPosition.position === 'after') ? dropPosition.index + 1 : dropPosition.index;
+ index =
+ dropPosition.position === 'after'
+ ? dropPosition.index + 1
+ : dropPosition.index;
- if (view.model.get('orientation') === 'horizontal' && droppableModel.get('type') !== 'container') {
+ if (
+ view.model.get('orientation') === 'horizontal' &&
+ droppableModel.get('type') !== 'container'
+ ) {
// Regular blocks always need to be inserted into columns - vertical containers
- tempCollection = new (window.EditorApplication.getBlockTypeModel('container'))({
+ tempCollection = new (window.EditorApplication.getBlockTypeModel(
+ 'container',
+ ))({
orientation: 'vertical',
});
tempCollection.get('blocks').add(droppableModel);
@@ -238,27 +249,38 @@ BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
// and inserting dropModel into that
tempModel = viewCollection.at(dropPosition.index);
- tempCollection = new (window.EditorApplication.getBlockTypeModel('container'))({
- orientation: (view.model.get('orientation') === 'vertical') ? 'horizontal' : 'vertical',
+ tempCollection = new (window.EditorApplication.getBlockTypeModel(
+ 'container',
+ ))({
+ orientation:
+ view.model.get('orientation') === 'vertical'
+ ? 'horizontal'
+ : 'vertical',
});
viewCollection.remove(tempModel);
if (tempCollection.get('orientation') === 'horizontal') {
if (dropPosition.position === 'before') {
- tempCollection2 = new (window.EditorApplication.getBlockTypeModel('container'))({
+ tempCollection2 = new (window.EditorApplication.getBlockTypeModel(
+ 'container',
+ ))({
orientation: 'vertical',
});
tempCollection2.get('blocks').add(droppableModel);
tempCollection.get('blocks').add(tempCollection2);
}
- tempCollection2 = new (window.EditorApplication.getBlockTypeModel('container'))({
+ tempCollection2 = new (window.EditorApplication.getBlockTypeModel(
+ 'container',
+ ))({
orientation: 'vertical',
});
tempCollection2.get('blocks').add(tempModel);
tempCollection.get('blocks').add(tempCollection2);
if (dropPosition.position === 'after') {
- tempCollection2 = new (window.EditorApplication.getBlockTypeModel('container'))({
+ tempCollection2 = new (window.EditorApplication.getBlockTypeModel(
+ 'container',
+ ))({
orientation: 'vertical',
});
tempCollection2.get('blocks').add(droppableModel);
@@ -279,8 +301,7 @@ BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
droppedView = that
.getChildren()
.findByModel(tempCollection)
- .children
- .findByModel(droppableModel);
+ .children.findByModel(droppableModel);
}
// Call post add actions
@@ -302,7 +323,7 @@ BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
this.view.$('.mailpoet_drop_marker').remove();
},
getDropPosition: function (eventX, eventY, isUnsafe) {
- var SPECIAL_AREA_INSERTION_WIDTH = 0.00; // Disable special insertion. Default: 0.3
+ var SPECIAL_AREA_INSERTION_WIDTH = 0.0; // Disable special insertion. Default: 0.3
var element = this.view.$el;
var orientation = this.view.model.get('orientation');
@@ -352,15 +373,15 @@ BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
}
if (
- relativeOffset <= elementLength * SPECIAL_AREA_INSERTION_WIDTH
- && (unsafe || canAcceptSpecialInsertion)
+ relativeOffset <= elementLength * SPECIAL_AREA_INSERTION_WIDTH &&
+ (unsafe || canAcceptSpecialInsertion)
) {
insertionType = 'special';
position = 'before';
index = this._computeSpecialIndex(eventX, eventY);
} else if (
- relativeOffset > elementLength * (1 - SPECIAL_AREA_INSERTION_WIDTH)
- && (unsafe || canAcceptSpecialInsertion)
+ relativeOffset > elementLength * (1 - SPECIAL_AREA_INSERTION_WIDTH) &&
+ (unsafe || canAcceptSpecialInsertion)
) {
insertionType = 'special';
position = 'after';
@@ -372,7 +393,12 @@ BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
index = indexAndPosition.index;
}
- if (!unsafe && orientation === 'vertical' && insertionType === 'special' && this.getCollection().at(index).get('orientation') === 'horizontal') {
+ if (
+ !unsafe &&
+ orientation === 'vertical' &&
+ insertionType === 'special' &&
+ this.getCollection().at(index).get('orientation') === 'horizontal'
+ ) {
// Prevent placing horizontal container in another horizontal container,
// which would allow breaking the column limit.
// Switch that to normal insertion
@@ -401,7 +427,9 @@ BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
var index = this._computeCellIndex(eventX, eventY);
// TODO: Handle case when there are no children, container is empty
- var targetView = this.getChildren().findByModel(this.getCollection().at(index));
+ var targetView = this.getChildren().findByModel(
+ this.getCollection().at(index),
+ );
var orientation = this.view.model.get('orientation');
var element = targetView.$el;
var eventOffset;
@@ -418,7 +446,7 @@ BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
elementDimension = element.outerWidth(true);
}
- if (eventOffset <= closeOffset + (elementDimension / 2)) {
+ if (eventOffset <= closeOffset + elementDimension / 2) {
// First half of the element
return {
index: index,
@@ -436,7 +464,7 @@ BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
},
_computeCellIndex: function (eventX, eventY) {
var orientation = this.view.model.get('orientation');
- var eventOffset = (orientation === 'vertical') ? eventY : eventX;
+ var eventOffset = orientation === 'vertical' ? eventY : eventX;
var resultView = this.getChildren().find(function (view) {
var element = view.$el;
var closeOffset;
@@ -454,7 +482,7 @@ BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
return closeOffset <= eventOffset && eventOffset <= farOffset;
});
- var index = (typeof resultView === 'object') ? resultView._index : 0;
+ var index = typeof resultView === 'object' ? resultView._index : 0;
return index;
},
@@ -463,13 +491,23 @@ BehaviorsLookup.ContainerDropZoneBehavior = Marionette.Behavior.extend({
var depth = this.view.renderOptions.depth;
var childCount = this.getChildren().length;
// Note that depth is zero indexed. Root container has depth=0
- return orientation === 'vertical' || (orientation === 'horizontal' && depth === 1 && childCount < this.options.columnLimit);
+ return (
+ orientation === 'vertical' ||
+ (orientation === 'horizontal' &&
+ depth === 1 &&
+ childCount < this.options.columnLimit)
+ );
},
_canAcceptSpecialInsertion: function () {
var orientation = this.view.model.get('orientation');
var depth = this.view.renderOptions.depth;
var childCount = this.getChildren().length;
- return depth === 0 || (depth === 1 && orientation === 'horizontal' && childCount <= this.options.columnLimit);
+ return (
+ depth === 0 ||
+ (depth === 1 &&
+ orientation === 'horizontal' &&
+ childCount <= this.options.columnLimit)
+ );
},
getCollectionView: function () {
return this.view.getChildView('blocks');
diff --git a/mailpoet/assets/js/src/newsletter_editor/behaviors/DraggableBehavior.js b/mailpoet/assets/js/src/newsletter_editor/behaviors/DraggableBehavior.js
index 86d450768f..46e49d8209 100644
--- a/mailpoet/assets/js/src/newsletter_editor/behaviors/DraggableBehavior.js
+++ b/mailpoet/assets/js/src/newsletter_editor/behaviors/DraggableBehavior.js
@@ -20,16 +20,18 @@ BL.DraggableBehavior = Marionette.Behavior.extend({
ignoreSelector: '.mailpoet_ignore_drag, .mailpoet_ignore_drag *',
onDragSubstituteBy: undefined,
/**
- * Constructs a model that will be passed to the receiver on drop
- *
- * @return Backbone.Model A model that will be passed to the receiver
- */
+ * Constructs a model that will be passed to the receiver on drop
+ *
+ * @return Backbone.Model A model that will be passed to the receiver
+ */
getDropModel: function getDropModel() {
throw new Error("Missing 'drop' function for DraggableBehavior");
},
onDrop: function onDrop() {},
- testAttachToInstance: function testAttachToInstance() { return true; },
+ testAttachToInstance: function testAttachToInstance() {
+ return true;
+ },
},
onRender: function onRender() {
var that = this;
@@ -40,86 +42,89 @@ BL.DraggableBehavior = Marionette.Behavior.extend({
interactable = interact(this.$el.get(0), {
ignoreFrom: this.options.ignoreSelector,
- }).draggable({
- // allow dragging of multple elements at the same time
- max: Infinity,
-
- // Scroll when dragging near edges of a window
- autoScroll: true,
-
- onstart: function onstart(startEvent) {
- var event = startEvent;
- var centerXOffset;
- var centerYOffset;
- var tempClone;
- var clone;
- var $clone;
-
- if (that.options.cloneOriginal === true) {
- // Use substitution instead of a clone
- if (_.isFunction(that.options.onDragSubstituteBy)) {
- tempClone = that.options.onDragSubstituteBy(that);
- }
- // Or use a clone
- clone = tempClone || event.target.cloneNode(true);
- jQuery(event.target);
- $clone = jQuery(clone);
-
- $clone.addClass('mailpoet_droppable_active');
- $clone.css('position', 'absolute');
- $clone.css('top', 0);
- $clone.css('left', 0);
- document.body.appendChild(clone);
-
- // Position the clone over the target element with a slight
- // offset to center the clone under the mouse cursor.
- // Accurate dimensions can only be taken after insertion to document
- centerXOffset = $clone.width() / 2;
- centerYOffset = $clone.height() / 2;
- $clone.css('top', event.pageY - centerYOffset);
- $clone.css('left', event.pageX - centerXOffset);
-
- event.interaction.element = clone;
-
- if (that.options.hideOriginal === true) {
- that.view.$el.addClass('mailpoet_hidden');
- }
- App.getChannel().trigger('dragStart');
- document.activeElement.blur();
- }
- },
- // call this function on every dragmove event
- onmove: function onmove(event) {
- var target = event.target;
- // keep the dragged position in the data-x/data-y attributes
- var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
- var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
-
- // translate the element
- target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
- target.style.webkitTransform = target.style.transform;
-
- // update the posiion attributes
- target.setAttribute('data-x', x);
- target.setAttribute('data-y', y);
- },
- onend: function onend(event) {
- var target = event.target;
- target.style.transform = '';
- target.style.webkitTransform = target.style.transform;
- target.removeAttribute('data-x');
- target.removeAttribute('data-y');
- jQuery(event.interaction.element).addClass('mailpoet_droppable_active');
-
- if (that.options.cloneOriginal === true) {
- jQuery(target).remove();
-
- if (that.options.hideOriginal === true) {
- that.view.$el.removeClass('mailpoet_hidden');
- }
- }
- },
})
+ .draggable({
+ // allow dragging of multple elements at the same time
+ max: Infinity,
+
+ // Scroll when dragging near edges of a window
+ autoScroll: true,
+
+ onstart: function onstart(startEvent) {
+ var event = startEvent;
+ var centerXOffset;
+ var centerYOffset;
+ var tempClone;
+ var clone;
+ var $clone;
+
+ if (that.options.cloneOriginal === true) {
+ // Use substitution instead of a clone
+ if (_.isFunction(that.options.onDragSubstituteBy)) {
+ tempClone = that.options.onDragSubstituteBy(that);
+ }
+ // Or use a clone
+ clone = tempClone || event.target.cloneNode(true);
+ jQuery(event.target);
+ $clone = jQuery(clone);
+
+ $clone.addClass('mailpoet_droppable_active');
+ $clone.css('position', 'absolute');
+ $clone.css('top', 0);
+ $clone.css('left', 0);
+ document.body.appendChild(clone);
+
+ // Position the clone over the target element with a slight
+ // offset to center the clone under the mouse cursor.
+ // Accurate dimensions can only be taken after insertion to document
+ centerXOffset = $clone.width() / 2;
+ centerYOffset = $clone.height() / 2;
+ $clone.css('top', event.pageY - centerYOffset);
+ $clone.css('left', event.pageX - centerXOffset);
+
+ event.interaction.element = clone;
+
+ if (that.options.hideOriginal === true) {
+ that.view.$el.addClass('mailpoet_hidden');
+ }
+ App.getChannel().trigger('dragStart');
+ document.activeElement.blur();
+ }
+ },
+ // call this function on every dragmove event
+ onmove: function onmove(event) {
+ var target = event.target;
+ // keep the dragged position in the data-x/data-y attributes
+ var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
+ var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
+
+ // translate the element
+ target.style.transform = 'translate(' + x + 'px, ' + y + 'px)';
+ target.style.webkitTransform = target.style.transform;
+
+ // update the posiion attributes
+ target.setAttribute('data-x', x);
+ target.setAttribute('data-y', y);
+ },
+ onend: function onend(event) {
+ var target = event.target;
+ target.style.transform = '';
+ target.style.webkitTransform = target.style.transform;
+ target.removeAttribute('data-x');
+ target.removeAttribute('data-y');
+ jQuery(event.interaction.element).addClass(
+ 'mailpoet_droppable_active',
+ );
+
+ if (that.options.cloneOriginal === true) {
+ jQuery(target).remove();
+
+ if (that.options.hideOriginal === true) {
+ that.view.$el.removeClass('mailpoet_hidden');
+ }
+ }
+ },
+ })
.preventDefault('auto')
.styleCursor(false)
.actionChecker(function actionChecker(pointer, event, action) {
diff --git a/mailpoet/assets/js/src/newsletter_editor/behaviors/MediaManagerBehavior.js b/mailpoet/assets/js/src/newsletter_editor/behaviors/MediaManagerBehavior.js
index aec6668e0a..2b35657ba3 100644
--- a/mailpoet/assets/js/src/newsletter_editor/behaviors/MediaManagerBehavior.js
+++ b/mailpoet/assets/js/src/newsletter_editor/behaviors/MediaManagerBehavior.js
@@ -62,9 +62,11 @@ BL.MediaManagerBehavior = Marionette.Behavior.extend({
}
MediaManager = window.wp.media.view.MediaFrame.Select.extend({
-
initialize: function () {
- window.wp.media.view.MediaFrame.prototype.initialize.apply(this, arguments);
+ window.wp.media.view.MediaFrame.prototype.initialize.apply(
+ this,
+ arguments,
+ );
_.defaults(this.options, {
multiple: true,
@@ -149,15 +151,26 @@ BL.MediaManagerBehavior = Marionette.Behavior.extend({
},
};
- _.each(handlers, function (regionHandlers, region) {
- _.each(regionHandlers, function (callback, handler) {
- this.on(region + ':render:' + handler, this[callback], this);
- }, this);
- }, this);
+ _.each(
+ handlers,
+ function (regionHandlers, region) {
+ _.each(
+ regionHandlers,
+ function (callback, handler) {
+ this.on(region + ':render:' + handler, this[callback], this);
+ },
+ this,
+ );
+ },
+ this,
+ );
},
uploadContent: function () {
- window.wp.media.view.MediaFrame.Select.prototype.uploadContent.apply(this, arguments);
+ window.wp.media.view.MediaFrame.Select.prototype.uploadContent.apply(
+ this,
+ arguments,
+ );
this.$el.addClass('hide-toolbar');
},
@@ -206,17 +219,22 @@ BL.MediaManagerBehavior = Marionette.Behavior.extend({
selectionStatusToolbar: function (view) {
var editable = this.state().get('editable');
- view.set('selection', new window.wp.media.view.Selection({
- controller: this,
- collection: this.state().get('selection'),
- priority: -40,
+ view.set(
+ 'selection',
+ new window.wp.media.view.Selection({
+ controller: this,
+ collection: this.state().get('selection'),
+ priority: -40,
- // If the selection is editable, pass the callback to
- // switch the content mode.
- editable: editable && function () {
- this.controller.content.mode('edit-selection');
- },
- }).render());
+ // If the selection is editable, pass the callback to
+ // switch the content mode.
+ editable:
+ editable &&
+ function () {
+ this.controller.content.mode('edit-selection');
+ },
+ }).render(),
+ );
},
mainInsertToolbar: function (view) {
@@ -247,7 +265,6 @@ BL.MediaManagerBehavior = Marionette.Behavior.extend({
text: 'Add images',
});
},
-
});
theFrame = new MediaManager({
@@ -281,23 +298,28 @@ BL.MediaManagerBehavior = Marionette.Behavior.extend({
_.keys(sizes),
function (size) {
return Math.abs(targetImageWidth - sizes[size].width);
- }
+ },
);
var bestWidth = sizes[_.first(increasingByWidthDifference)].width;
- var imagesOfBestWidth = _.filter(
- _.values(sizes),
- function (size) { return size.width === bestWidth; }
- );
+ var imagesOfBestWidth = _.filter(_.values(sizes), function (size) {
+ return size.width === bestWidth;
+ });
// Maximize the height if there are multiple images with same width
- var mainSize = _.max(imagesOfBestWidth, function (size) { return size.height; });
+ var mainSize = _.max(imagesOfBestWidth, function (size) {
+ return size.height;
+ });
if (that.options.onSelect) {
that.view[that.options.onSelect]({
height: mainSize.height + 'px',
width: mainSize.width + 'px',
src: mainSize.url,
- alt: (attachment.get('alt') !== '' && attachment.get('alt') !== undefined) ? attachment.get('alt') : attachment.get('title'),
+ alt:
+ attachment.get('alt') !== '' &&
+ attachment.get('alt') !== undefined
+ ? attachment.get('alt')
+ : attachment.get('title'),
});
}
});
diff --git a/mailpoet/assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js b/mailpoet/assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js
index 3572f2946f..b944872a02 100644
--- a/mailpoet/assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js
+++ b/mailpoet/assets/js/src/newsletter_editor/behaviors/ResizableBehavior.js
@@ -14,14 +14,22 @@ BL.ResizableBehavior = Marionette.Behavior.extend({
elementSelector: null,
resizeHandleSelector: true, // true will use edges of the element itself
// for blocks that use the default onResize function
- transformationFunction: function transformationFunction(y) { return y; },
+ transformationFunction: function transformationFunction(y) {
+ return y;
+ },
minLength: 0,
maxLength: Infinity,
modelField: 'styles.block.height',
onResize: function onResize(event) {
- var currentLength = parseFloat(this.view.model.get(this.options.modelField));
- var newLength = currentLength + this.options.transformationFunction(event.dy);
- newLength = Math.min(this.options.maxLength, Math.max(this.options.minLength, newLength));
+ var currentLength = parseFloat(
+ this.view.model.get(this.options.modelField),
+ );
+ var newLength =
+ currentLength + this.options.transformationFunction(event.dy);
+ newLength = Math.min(
+ this.options.maxLength,
+ Math.max(this.options.minLength, newLength),
+ );
this.view.model.set(this.options.modelField, newLength + 'px');
},
},
@@ -37,19 +45,24 @@ BL.ResizableBehavior = Marionette.Behavior.extend({
} else {
domElement = this.view.$(this.options.elementSelector).get(0);
}
- interact(domElement).resizable({
- // axis: 'y',
- edges: {
- top: false,
- left: false,
- right: false,
- bottom: (typeof this.options.resizeHandleSelector === 'string') ? this.view.$(this.options.resizeHandleSelector).get(0) : this.options.resizeHandleSelector,
- },
- })
+ interact(domElement)
+ .resizable({
+ // axis: 'y',
+ edges: {
+ top: false,
+ left: false,
+ right: false,
+ bottom:
+ typeof this.options.resizeHandleSelector === 'string'
+ ? this.view.$(this.options.resizeHandleSelector).get(0)
+ : this.options.resizeHandleSelector,
+ },
+ })
.on('resizestart', function resizestart() {
that.view.model.trigger('startResizing');
document.activeElement.blur();
- }).on('resizemove', function resizemove(event) {
+ })
+ .on('resizemove', function resizemove(event) {
var onResize = that.options.onResize.bind(that);
return onResize(event);
})
diff --git a/mailpoet/assets/js/src/newsletter_editor/behaviors/ShowSettingsBehavior.js b/mailpoet/assets/js/src/newsletter_editor/behaviors/ShowSettingsBehavior.js
index 1397d2a74e..91120c7ada 100644
--- a/mailpoet/assets/js/src/newsletter_editor/behaviors/ShowSettingsBehavior.js
+++ b/mailpoet/assets/js/src/newsletter_editor/behaviors/ShowSettingsBehavior.js
@@ -24,8 +24,10 @@ BL.ShowSettingsBehavior = Marionette.Behavior.extend({
},
// eslint-disable-next-line func-names
isIgnoredElement: function (element) {
- return this.options.ignoreFrom
- && this.options.ignoreFrom.length > 0
- && jQuery(element).is(this.options.ignoreFrom);
+ return (
+ this.options.ignoreFrom &&
+ this.options.ignoreFrom.length > 0 &&
+ jQuery(element).is(this.options.ignoreFrom)
+ );
},
});
diff --git a/mailpoet/assets/js/src/newsletter_editor/behaviors/TextEditorBehavior.js b/mailpoet/assets/js/src/newsletter_editor/behaviors/TextEditorBehavior.js
index 7e95df5e49..363e0edf86 100644
--- a/mailpoet/assets/js/src/newsletter_editor/behaviors/TextEditorBehavior.js
+++ b/mailpoet/assets/js/src/newsletter_editor/behaviors/TextEditorBehavior.js
@@ -25,11 +25,14 @@ BL.TextEditorBehavior = Marionette.Behavior.extend({
selector: '.mailpoet_content',
toolbar1: 'bold italic link unlink forecolor mailpoet_shortcodes',
toolbar2: '',
- validElements: 'p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br,del',
+ validElements:
+ 'p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br,del',
invalidElements: 'script',
blockFormats: 'Paragraph=p',
plugins: 'link mailpoet_shortcodes',
- configurationFilter: function configurationFilter(originalConfig) { return originalConfig; },
+ configurationFilter: function configurationFilter(originalConfig) {
+ return originalConfig;
+ },
},
initialize: function initialize() {
this.listenTo(App.getChannel(), 'dragStart', this.hideEditor);
@@ -47,62 +50,64 @@ BL.TextEditorBehavior = Marionette.Behavior.extend({
tinymce.PluginManager.add('mailpoet_shortcodes', tinymceMailpoetShortcodes);
- tinymce.init(this.options.configurationFilter({
- target: this.el.querySelector(this.options.selector),
- inline: true,
- contextmenu: false,
+ tinymce.init(
+ this.options.configurationFilter({
+ target: this.el.querySelector(this.options.selector),
+ inline: true,
+ contextmenu: false,
- menubar: false,
- toolbar1: this.options.toolbar1,
- toolbar2: this.options.toolbar2,
+ menubar: false,
+ toolbar1: this.options.toolbar1,
+ toolbar2: this.options.toolbar2,
- browser_spellcheck: true,
+ browser_spellcheck: true,
- valid_elements: this.options.validElements,
- invalid_elements: this.options.invalidElements,
- block_formats: this.options.blockFormats,
- relative_urls: false,
- remove_script_host: false,
- convert_urls: true,
- urlconverter_callback: function urlconverterCallback(url) {
- if (url.match(/\[.+\]/g)) {
- // Do not convert URLs with shortcodes
- return url;
- }
-
- return this.documentBaseURI.toAbsolute(
- url,
- this.settings.remove_script_host
- );
- },
-
- plugins: this.options.plugins,
-
- setup: function setup(editor) {
- // Store the editor instance
- that.tinymceEditor = editor;
- editor.on('change', function onChange() {
- that.view.triggerMethod('text:editor:change', editor.getContent());
- });
-
- editor.on('click', function onClick(e) {
- if (App.getDisplayedSettingsId()) {
- App.getChannel().trigger('hideSettings');
+ valid_elements: this.options.validElements,
+ invalid_elements: this.options.invalidElements,
+ block_formats: this.options.blockFormats,
+ relative_urls: false,
+ remove_script_host: false,
+ convert_urls: true,
+ urlconverter_callback: function urlconverterCallback(url) {
+ if (url.match(/\[.+\]/g)) {
+ // Do not convert URLs with shortcodes
+ return url;
}
- // if caret not in editor, place it there (triggers focus on editor)
- if (document.activeElement !== editor.targetElm) {
- editor.selection.placeCaretAt(e.clientX, e.clientY);
- }
- });
- editor.on('focus', function onFocus() {
- that.view.triggerMethod('text:editor:focus');
- });
+ return this.documentBaseURI.toAbsolute(
+ url,
+ this.settings.remove_script_host,
+ );
+ },
- editor.on('blur', function onBlur() {
- that.view.triggerMethod('text:editor:blur');
- });
- },
- }));
+ plugins: this.options.plugins,
+
+ setup: function setup(editor) {
+ // Store the editor instance
+ that.tinymceEditor = editor;
+ editor.on('change', function onChange() {
+ that.view.triggerMethod('text:editor:change', editor.getContent());
+ });
+
+ editor.on('click', function onClick(e) {
+ if (App.getDisplayedSettingsId()) {
+ App.getChannel().trigger('hideSettings');
+ }
+ // if caret not in editor, place it there (triggers focus on editor)
+ if (document.activeElement !== editor.targetElm) {
+ editor.selection.placeCaretAt(e.clientX, e.clientY);
+ }
+ });
+
+ editor.on('focus', function onFocus() {
+ that.view.triggerMethod('text:editor:focus');
+ });
+
+ editor.on('blur', function onBlur() {
+ that.view.triggerMethod('text:editor:blur');
+ });
+ },
+ }),
+ );
},
});
diff --git a/mailpoet/assets/js/src/newsletter_editor/behaviors/WooCommerceStylesBehavior.js b/mailpoet/assets/js/src/newsletter_editor/behaviors/WooCommerceStylesBehavior.js
index 6ac9dac6b2..ac58010460 100644
--- a/mailpoet/assets/js/src/newsletter_editor/behaviors/WooCommerceStylesBehavior.js
+++ b/mailpoet/assets/js/src/newsletter_editor/behaviors/WooCommerceStylesBehavior.js
@@ -16,11 +16,17 @@ BL.WooCommerceStylesBehavior = Marionette.Behavior.extend({
'change #mailpoet_wc_branding_color': function (event) {
let linkFontColor;
const brandingColor = event.target.value;
- const headingFontColor = (this.wcHexIsLight(brandingColor)) ? '#202020' : '#ffffff';
+ const headingFontColor = this.wcHexIsLight(brandingColor)
+ ? '#202020'
+ : '#ffffff';
if (this.wcHexIsLight(this.view.model.get('wrapper.backgroundColor'))) {
- linkFontColor = (this.wcHexIsLight(brandingColor)) ? headingFontColor : brandingColor;
+ linkFontColor = this.wcHexIsLight(brandingColor)
+ ? headingFontColor
+ : brandingColor;
} else {
- linkFontColor = (this.wcHexIsLight(brandingColor)) ? brandingColor : headingFontColor;
+ linkFontColor = this.wcHexIsLight(brandingColor)
+ ? brandingColor
+ : headingFontColor;
}
this.view.model.set('woocommerce.brandingColor', brandingColor);
this.view.model.set('woocommerce.headingFontColor', headingFontColor);
@@ -36,7 +42,7 @@ BL.WooCommerceStylesBehavior = Marionette.Behavior.extend({
const colR = parseInt(hex.substr(0, 2), 16);
const colG = parseInt(hex.substr(2, 2), 16);
const colB = parseInt(hex.substr(4, 2), 16);
- const brightness = ((colR * 299) + (colG * 587) + (colB * 114)) / 1000;
+ const brightness = (colR * 299 + colG * 587 + colB * 114) / 1000;
return brightness > 155;
},
});
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/abandonedCartContent.js b/mailpoet/assets/js/src/newsletter_editor/blocks/abandonedCartContent.js
index e0ede0c014..79f2716fa1 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/abandonedCartContent.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/abandonedCartContent.js
@@ -23,31 +23,34 @@ var ProductsDisplayOptionsSettingsView;
Module.AbandonedCartContentBlockModel = base.BlockModel.extend({
stale: ['_selectedProducts', '_availableProducts', '_transformedProducts'],
defaults: function productsModelDefaults() {
- return this._getDefaults({
- type: 'abandonedCartContent',
- withLayout: true,
- amount: '2',
- contentType: 'product',
- postStatus: 'publish', // 'draft'|'pending'|'publish'
- inclusionType: 'include', // 'include'|'exclude'
- displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly'
- titleFormat: 'h1', // 'h1'|'h2'|'h3'
- titleAlignment: 'left', // 'left'|'center'|'right'
- titleIsLink: false, // false|true
- imageFullWidth: false, // true|false
- titlePosition: 'abovePost', // 'abovePost'|'aboveExcerpt'
- featuredImagePosition: 'alternate', // 'centered'|'right'|'left'|'alternate'|'none'
- pricePosition: 'below', // 'hidden'|'above'|'below'
- readMoreType: 'none', // 'link'|'button'|'none'
- readMoreText: '', // 'link'|'button'
- readMoreButton: {},
- sortBy: 'newest', // 'newest'|'oldest',
- showDivider: true, // true|false
- divider: {},
- _selectedProducts: [],
- _availableProducts: [],
- _transformedProducts: new (App.getBlockTypeModel('container'))(),
- }, App.getConfig().get('blockDefaults.abandonedCartContent'));
+ return this._getDefaults(
+ {
+ type: 'abandonedCartContent',
+ withLayout: true,
+ amount: '2',
+ contentType: 'product',
+ postStatus: 'publish', // 'draft'|'pending'|'publish'
+ inclusionType: 'include', // 'include'|'exclude'
+ displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly'
+ titleFormat: 'h1', // 'h1'|'h2'|'h3'
+ titleAlignment: 'left', // 'left'|'center'|'right'
+ titleIsLink: false, // false|true
+ imageFullWidth: false, // true|false
+ titlePosition: 'abovePost', // 'abovePost'|'aboveExcerpt'
+ featuredImagePosition: 'alternate', // 'centered'|'right'|'left'|'alternate'|'none'
+ pricePosition: 'below', // 'hidden'|'above'|'below'
+ readMoreType: 'none', // 'link'|'button'|'none'
+ readMoreText: '', // 'link'|'button'
+ readMoreButton: {},
+ sortBy: 'newest', // 'newest'|'oldest',
+ showDivider: true, // true|false
+ divider: {},
+ _selectedProducts: [],
+ _availableProducts: [],
+ _transformedProducts: new (App.getBlockTypeModel('container'))(),
+ },
+ App.getConfig().get('blockDefaults.abandonedCartContent'),
+ );
},
relations: function relations() {
return {
@@ -61,7 +64,7 @@ Module.AbandonedCartContentBlockModel = base.BlockModel.extend({
var PRODUCT_REFRESH_DELAY_MS = 500;
var refreshTransformedProducts = _.debounce(
this._refreshTransformedProducts.bind(this),
- PRODUCT_REFRESH_DELAY_MS
+ PRODUCT_REFRESH_DELAY_MS,
);
// Attach Radio.Requests API primarily for highlighting
@@ -70,8 +73,15 @@ Module.AbandonedCartContentBlockModel = base.BlockModel.extend({
this._refreshTransformedProducts();
this.on('change', this._updateDefaults, this);
- this.listenTo(this.get('_selectedProducts'), 'add remove reset', refreshTransformedProducts);
- this.on('change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:pricePosition change:showDivider change:titlePosition', refreshTransformedProducts);
+ this.listenTo(
+ this.get('_selectedProducts'),
+ 'add remove reset',
+ refreshTransformedProducts,
+ );
+ this.on(
+ 'change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:pricePosition change:showDivider change:titlePosition',
+ refreshTransformedProducts,
+ );
this.listenTo(this.get('divider'), 'change', refreshTransformedProducts);
},
_refreshTransformedProducts: function refreshTransformedProducts() {
@@ -80,7 +90,10 @@ Module.AbandonedCartContentBlockModel = base.BlockModel.extend({
CommunicationComponent.getTransformedPosts(data)
.done(function getTransformedPostsDone(products) {
- that.get('_transformedProducts').get('blocks').reset(products, { parse: true });
+ that
+ .get('_transformedProducts')
+ .get('blocks')
+ .reset(products, { parse: true });
})
.fail(function getTransformedProductsFail() {
MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
@@ -89,19 +102,27 @@ Module.AbandonedCartContentBlockModel = base.BlockModel.extend({
});
Module.AbandonedCartContentBlockView = base.BlockView.extend({
- className: 'mailpoet_block mailpoet_abandoned_cart_content_block mailpoet_droppable_block',
- getTemplate: function getTemplate() { return window.templates.abandonedCartContentBlock; },
+ className:
+ 'mailpoet_block mailpoet_abandoned_cart_content_block mailpoet_droppable_block',
+ getTemplate: function getTemplate() {
+ return window.templates.abandonedCartContentBlock;
+ },
modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'),
- regions: _.extend({
- productsRegion: '.mailpoet_abandoned_cart_content_container',
- }, base.BlockView.prototype.regions),
+ regions: _.extend(
+ {
+ productsRegion: '.mailpoet_abandoned_cart_content_container',
+ },
+ base.BlockView.prototype.regions,
+ ),
onDragSubstituteBy: function onDragSubstituteBy() {
return Module.AbandonedCartContentBlockWidgetView;
},
initialize: function initialize() {
base.BlockView.prototype.initialize.apply(this, arguments);
- this.toolsView = new Module.AbandonedCartContentBlockToolsView({ model: this.model });
+ this.toolsView = new Module.AbandonedCartContentBlockToolsView({
+ model: this.model,
+ });
},
events: {
'click .mailpoet_abandoned_cart_content_block_overlay': 'showSettings',
@@ -123,7 +144,13 @@ Module.AbandonedCartContentBlockView = base.BlockView.extend({
disableDragAndDrop: true,
emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
};
- this.showChildView('productsRegion', new ContainerView({ model: this.model.get('_transformedProducts'), renderOptions: renderOptions }));
+ this.showChildView(
+ 'productsRegion',
+ new ContainerView({
+ model: this.model.get('_transformedProducts'),
+ renderOptions: renderOptions,
+ }),
+ );
},
});
@@ -138,7 +165,8 @@ Module.AbandonedCartContentBlockSettingsView = base.BlockSettingsView.extend({
return window.templates.abandonedCartContentBlockSettings;
},
regions: {
- displayOptionsRegion: '.mailpoet_settings_abandoned_cart_content_display_options',
+ displayOptionsRegion:
+ '.mailpoet_settings_abandoned_cart_content_display_options',
},
events: {
'click .mailpoet_done_editing': 'close',
@@ -150,7 +178,9 @@ Module.AbandonedCartContentBlockSettingsView = base.BlockSettingsView.extend({
},
initialize: function initialize() {
this.model.trigger('startEditing');
- this.displayOptionsView = new ProductsDisplayOptionsSettingsView({ model: this.model });
+ this.displayOptionsView = new ProductsDisplayOptionsSettingsView({
+ model: this.model,
+ });
},
onRender: function onRender() {
this.model.request('blockView');
@@ -179,13 +209,34 @@ ProductsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
'click .mailpoet_products_select_divider': 'showDividerSettings',
'change .mailpoet_products_display_type': 'changeDisplayType',
'change .mailpoet_products_title_format': 'changeTitleFormat',
- 'change .mailpoet_products_title_as_links': _.partial(this.changeBoolField, 'titleIsLink'),
- 'change .mailpoet_products_show_divider': _.partial(this.changeBoolField, 'showDivider'),
- 'change .mailpoet_products_title_alignment': _.partial(this.changeField, 'titleAlignment'),
- 'change .mailpoet_products_image_full_width': _.partial(this.changeBoolField, 'imageFullWidth'),
- 'change .mailpoet_products_featured_image_position': _.partial(this.changeField, 'featuredImagePosition'),
- 'change .mailpoet_products_price_position': _.partial(this.changeField, 'pricePosition'),
- 'change .mailpoet_products_title_position': _.partial(this.changeField, 'titlePosition'),
+ 'change .mailpoet_products_title_as_links': _.partial(
+ this.changeBoolField,
+ 'titleIsLink',
+ ),
+ 'change .mailpoet_products_show_divider': _.partial(
+ this.changeBoolField,
+ 'showDivider',
+ ),
+ 'change .mailpoet_products_title_alignment': _.partial(
+ this.changeField,
+ 'titleAlignment',
+ ),
+ 'change .mailpoet_products_image_full_width': _.partial(
+ this.changeBoolField,
+ 'imageFullWidth',
+ ),
+ 'change .mailpoet_products_featured_image_position': _.partial(
+ this.changeField,
+ 'featuredImagePosition',
+ ),
+ 'change .mailpoet_products_price_position': _.partial(
+ this.changeField,
+ 'pricePosition',
+ ),
+ 'change .mailpoet_products_title_position': _.partial(
+ this.changeField,
+ 'titlePosition',
+ ),
};
},
templateContext: function templateContext() {
@@ -195,22 +246,28 @@ ProductsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
},
showDividerSettings: function showDividerSettings() {
var dividerModule = DividerBlock;
- (new dividerModule.DividerBlockSettingsView({
+ new dividerModule.DividerBlockSettingsView({
model: this.model.get('divider'),
renderOptions: {
displayFormat: 'subpanel',
hideApplyToAll: true,
},
- })).render();
+ }).render();
},
changeDisplayType: function changeDisplayType(event) {
var value = jQuery(event.target).val();
if (value !== 'titleOnly') {
- this.$('.mailpoet_products_title_position').removeClass('mailpoet_hidden');
- this.$('.mailpoet_products_title_position_separator').removeClass('mailpoet_hidden');
+ this.$('.mailpoet_products_title_position').removeClass(
+ 'mailpoet_hidden',
+ );
+ this.$('.mailpoet_products_title_position_separator').removeClass(
+ 'mailpoet_hidden',
+ );
} else {
this.$('.mailpoet_products_title_position').addClass('mailpoet_hidden');
- this.$('.mailpoet_products_title_position_separator').addClass('mailpoet_hidden');
+ this.$('.mailpoet_products_title_position_separator').addClass(
+ 'mailpoet_hidden',
+ );
}
this.changeField('displayType', event);
@@ -221,9 +278,12 @@ ProductsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
});
Module.AbandonedCartContentBlockWidgetView = base.WidgetView.extend({
- className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
+ className:
+ base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
id: 'automation_editor_block_abandoned_cart_content',
- getTemplate: function getTemplate() { return window.templates.abandonedCartContentInsertion; },
+ getTemplate: function getTemplate() {
+ return window.templates.abandonedCartContentInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
@@ -243,8 +303,9 @@ App.on('before:start', function beforeStartApp(BeforeStartApp, options) {
blockView: Module.AbandonedCartContentBlockView,
});
- if (options.newsletter.options.group !== 'woocommerce'
- || options.newsletter.options.event !== 'woocommerce_abandoned_shopping_cart'
+ if (
+ options.newsletter.options.group !== 'woocommerce' ||
+ options.newsletter.options.event !== 'woocommerce_abandoned_shopping_cart'
) {
isAbandonedCartContentBlockActive = false;
return;
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/automatedLatestContent.js b/mailpoet/assets/js/src/newsletter_editor/blocks/automatedLatestContent.js
index 5f859f8732..0775408fcd 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/automatedLatestContent.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/automatedLatestContent.js
@@ -26,14 +26,15 @@ Module.ALCSupervisor = SuperModel.extend({
this.listenTo(
App.getChannel(),
'automatedLatestContentRefresh',
- _.debounce(this.refresh, DELAY_REFRESH_FOR_MS)
+ _.debounce(this.refresh, DELAY_REFRESH_FOR_MS),
);
},
refresh: function () {
var blocks;
- var models = App.findModels(function (model) {
- return model.get('type') === 'automatedLatestContent';
- }) || [];
+ var models =
+ App.findModels(function (model) {
+ return model.get('type') === 'automatedLatestContent';
+ }) || [];
if (models.length === 0) return;
blocks = _.map(models, function (model) {
@@ -45,48 +46,48 @@ Module.ALCSupervisor = SuperModel.extend({
}).then(_.partial(this.refreshBlocks, models));
},
refreshBlocks: function (models, renderedBlocks) {
- _.each(
- _.zip(models, renderedBlocks),
- function (args) {
- var model = args[0];
- var contents = args[1];
- model.trigger('refreshPosts', contents);
- }
- );
+ _.each(_.zip(models, renderedBlocks), function (args) {
+ var model = args[0];
+ var contents = args[1];
+ model.trigger('refreshPosts', contents);
+ });
},
});
Module.AutomatedLatestContentBlockModel = base.BlockModel.extend({
stale: ['_container'],
defaults: function () {
- return this._getDefaults({
- type: 'automatedLatestContent',
- withLayout: false,
- amount: '5',
- contentType: 'post', // 'post'|'page'|'mailpoet_page'
- terms: [], // List of category and tag objects
- inclusionType: 'include', // 'include'|'exclude'
- displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly'
- titleFormat: 'h1', // 'h1'|'h2'|'h3'|'ul'
- titleAlignment: 'left', // 'left'|'center'|'right'
- titleIsLink: false, // false|true
- imageFullWidth: false, // true|false
- featuredImagePosition: 'belowTitle', // 'aboveTitle'|'belowTitle'|'none'
- showAuthor: 'no', // 'no'|'aboveText'|'belowText'
- authorPrecededBy: 'Author:',
- showCategories: 'no', // 'no'|'aboveText'|'belowText'
- categoriesPrecededBy: 'Categories:',
- readMoreType: 'button', // 'link'|'button'
- readMoreText: 'Read more', // 'link'|'button'
- readMoreButton: {
- text: 'Read more',
- url: '[postLink]',
+ return this._getDefaults(
+ {
+ type: 'automatedLatestContent',
+ withLayout: false,
+ amount: '5',
+ contentType: 'post', // 'post'|'page'|'mailpoet_page'
+ terms: [], // List of category and tag objects
+ inclusionType: 'include', // 'include'|'exclude'
+ displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly'
+ titleFormat: 'h1', // 'h1'|'h2'|'h3'|'ul'
+ titleAlignment: 'left', // 'left'|'center'|'right'
+ titleIsLink: false, // false|true
+ imageFullWidth: false, // true|false
+ featuredImagePosition: 'belowTitle', // 'aboveTitle'|'belowTitle'|'none'
+ showAuthor: 'no', // 'no'|'aboveText'|'belowText'
+ authorPrecededBy: 'Author:',
+ showCategories: 'no', // 'no'|'aboveText'|'belowText'
+ categoriesPrecededBy: 'Categories:',
+ readMoreType: 'button', // 'link'|'button'
+ readMoreText: 'Read more', // 'link'|'button'
+ readMoreButton: {
+ text: 'Read more',
+ url: '[postLink]',
+ },
+ sortBy: 'newest', // 'newest'|'oldest',
+ showDivider: true, // true|false
+ divider: {},
+ _container: new (App.getBlockTypeModel('container'))(),
},
- sortBy: 'newest', // 'newest'|'oldest',
- showDivider: true, // true|false
- divider: {},
- _container: new (App.getBlockTypeModel('container'))(),
- }, App.getConfig().get('blockDefaults.automatedLatestContent'));
+ App.getConfig().get('blockDefaults.automatedLatestContent'),
+ );
},
relations: function () {
return {
@@ -97,7 +98,11 @@ Module.AutomatedLatestContentBlockModel = base.BlockModel.extend({
},
initialize: function () {
base.BlockView.prototype.initialize.apply(this, arguments);
- this.on('change:amount change:contentType change:terms change:inclusionType change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:sortBy change:showDivider', this._handleChanges, this);
+ this.on(
+ 'change:amount change:contentType change:terms change:inclusionType change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:sortBy change:showDivider',
+ this._handleChanges,
+ this,
+ );
this.listenTo(this.get('readMoreButton'), 'change', this._handleChanges);
this.listenTo(this.get('divider'), 'change', this._handleChanges);
this.on('add remove update reset', this._handleChanges);
@@ -107,9 +112,9 @@ Module.AutomatedLatestContentBlockModel = base.BlockModel.extend({
this.get('_container.blocks').reset(posts, { parse: true });
},
/**
- * Batch more changes during a specific time, instead of fetching
- * ALC posts on each model change
- */
+ * Batch more changes during a specific time, instead of fetching
+ * ALC posts on each model change
+ */
_handleChanges: function () {
this._updateDefaults();
App.getChannel().trigger('automatedLatestContentRefresh');
@@ -117,14 +122,20 @@ Module.AutomatedLatestContentBlockModel = base.BlockModel.extend({
});
Module.AutomatedLatestContentBlockView = base.BlockView.extend({
- className: 'mailpoet_block mailpoet_automated_latest_content_block mailpoet_droppable_block',
+ className:
+ 'mailpoet_block mailpoet_automated_latest_content_block mailpoet_droppable_block',
initialize: function () {
function replaceButtonStylesHandler(data) {
this.model.set({ readMoreButton: data });
}
- App.getChannel().on('replaceAllButtonStyles', replaceButtonStylesHandler.bind(this));
+ App.getChannel().on(
+ 'replaceAllButtonStyles',
+ replaceButtonStylesHandler.bind(this),
+ );
+ },
+ getTemplate: function () {
+ return window.templates.automatedLatestContentBlock;
},
- getTemplate: function () { return window.templates.automatedLatestContentBlock; },
regions: {
toolsRegion: '.mailpoet_tools',
postsRegion: '.mailpoet_automated_latest_content_block_posts',
@@ -133,12 +144,14 @@ Module.AutomatedLatestContentBlockView = base.BlockView.extend({
_.omit(base.BlockView.prototype.modelEvents, 'change'),
{
postsChanged: 'render',
- }
+ },
),
events: {
'click .mailpoet_automated_latest_content_block_overlay': 'showSettings',
},
- onDragSubstituteBy: function () { return Module.AutomatedLatestContentWidgetView; },
+ onDragSubstituteBy: function () {
+ return Module.AutomatedLatestContentWidgetView;
+ },
onRender: function () {
var ContainerView = App.getBlockTypeView('container');
var renderOptions = {
@@ -146,42 +159,101 @@ Module.AutomatedLatestContentBlockView = base.BlockView.extend({
disableDragAndDrop: true,
emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
};
- this.toolsView = new Module.AutomatedLatestContentBlockToolsView({ model: this.model });
+ this.toolsView = new Module.AutomatedLatestContentBlockToolsView({
+ model: this.model,
+ });
this.showChildView('toolsRegion', this.toolsView);
- this.showChildView('postsRegion', new ContainerView({ model: this.model.get('_container'), renderOptions: renderOptions }));
+ this.showChildView(
+ 'postsRegion',
+ new ContainerView({
+ model: this.model.get('_container'),
+ renderOptions: renderOptions,
+ }),
+ );
},
});
Module.AutomatedLatestContentBlockToolsView = base.BlockToolsView.extend({
- getSettingsView: function () { return Module.AutomatedLatestContentBlockSettingsView; },
+ getSettingsView: function () {
+ return Module.AutomatedLatestContentBlockSettingsView;
+ },
});
// Sidebar view container
Module.AutomatedLatestContentBlockSettingsView = base.BlockSettingsView.extend({
- getTemplate: function () { return window.templates.automatedLatestContentBlockSettings; },
+ getTemplate: function () {
+ return window.templates.automatedLatestContentBlockSettings;
+ },
events: function () {
return {
- 'click .mailpoet_automated_latest_content_hide_display_options': 'toggleDisplayOptions',
- 'click .mailpoet_automated_latest_content_show_display_options': 'toggleDisplayOptions',
- 'click .mailpoet_automated_latest_content_select_button': 'showButtonSettings',
- 'click .mailpoet_automated_latest_content_select_divider': 'showDividerSettings',
- 'change .mailpoet_automated_latest_content_read_more_type': 'changeReadMoreType',
- 'change .mailpoet_automated_latest_content_display_type': 'changeDisplayType',
- 'change .mailpoet_automated_latest_content_title_format': 'changeTitleFormat',
- 'change .mailpoet_automated_latest_content_title_as_links': _.partial(this.changeBoolField, 'titleIsLink'),
- 'change .mailpoet_automated_latest_content_show_divider': _.partial(this.changeBoolField, 'showDivider'),
- 'input .mailpoet_automated_latest_content_show_amount': _.partial(this.changeField, 'amount'),
- 'change .mailpoet_automated_latest_content_content_type': _.partial(this.changeField, 'contentType'),
- 'change .mailpoet_automated_latest_content_include_or_exclude': _.partial(this.changeField, 'inclusionType'),
- 'change .mailpoet_automated_latest_content_title_alignment': _.partial(this.changeField, 'titleAlignment'),
- 'change .mailpoet_automated_latest_content_image_full_width': _.partial(this.changeBoolField, 'imageFullWidth'),
- 'change .mailpoet_automated_latest_content_featured_image_position': _.partial(this.changeField, 'featuredImagePosition'),
- 'change .mailpoet_automated_latest_content_show_author': _.partial(this.changeField, 'showAuthor'),
- 'input .mailpoet_automated_latest_content_author_preceded_by': _.partial(this.changeField, 'authorPrecededBy'),
- 'change .mailpoet_automated_latest_content_show_categories': _.partial(this.changeField, 'showCategories'),
- 'input .mailpoet_automated_latest_content_categories': _.partial(this.changeField, 'categoriesPrecededBy'),
- 'input .mailpoet_automated_latest_content_read_more_text': _.partial(this.changeField, 'readMoreText'),
- 'change .mailpoet_automated_latest_content_sort_by': _.partial(this.changeField, 'sortBy'),
+ 'click .mailpoet_automated_latest_content_hide_display_options':
+ 'toggleDisplayOptions',
+ 'click .mailpoet_automated_latest_content_show_display_options':
+ 'toggleDisplayOptions',
+ 'click .mailpoet_automated_latest_content_select_button':
+ 'showButtonSettings',
+ 'click .mailpoet_automated_latest_content_select_divider':
+ 'showDividerSettings',
+ 'change .mailpoet_automated_latest_content_read_more_type':
+ 'changeReadMoreType',
+ 'change .mailpoet_automated_latest_content_display_type':
+ 'changeDisplayType',
+ 'change .mailpoet_automated_latest_content_title_format':
+ 'changeTitleFormat',
+ 'change .mailpoet_automated_latest_content_title_as_links': _.partial(
+ this.changeBoolField,
+ 'titleIsLink',
+ ),
+ 'change .mailpoet_automated_latest_content_show_divider': _.partial(
+ this.changeBoolField,
+ 'showDivider',
+ ),
+ 'input .mailpoet_automated_latest_content_show_amount': _.partial(
+ this.changeField,
+ 'amount',
+ ),
+ 'change .mailpoet_automated_latest_content_content_type': _.partial(
+ this.changeField,
+ 'contentType',
+ ),
+ 'change .mailpoet_automated_latest_content_include_or_exclude': _.partial(
+ this.changeField,
+ 'inclusionType',
+ ),
+ 'change .mailpoet_automated_latest_content_title_alignment': _.partial(
+ this.changeField,
+ 'titleAlignment',
+ ),
+ 'change .mailpoet_automated_latest_content_image_full_width': _.partial(
+ this.changeBoolField,
+ 'imageFullWidth',
+ ),
+ 'change .mailpoet_automated_latest_content_featured_image_position':
+ _.partial(this.changeField, 'featuredImagePosition'),
+ 'change .mailpoet_automated_latest_content_show_author': _.partial(
+ this.changeField,
+ 'showAuthor',
+ ),
+ 'input .mailpoet_automated_latest_content_author_preceded_by': _.partial(
+ this.changeField,
+ 'authorPrecededBy',
+ ),
+ 'change .mailpoet_automated_latest_content_show_categories': _.partial(
+ this.changeField,
+ 'showCategories',
+ ),
+ 'input .mailpoet_automated_latest_content_categories': _.partial(
+ this.changeField,
+ 'categoriesPrecededBy',
+ ),
+ 'input .mailpoet_automated_latest_content_read_more_text': _.partial(
+ this.changeField,
+ 'readMoreText',
+ ),
+ 'change .mailpoet_automated_latest_content_sort_by': _.partial(
+ this.changeField,
+ 'sortBy',
+ ),
'click .mailpoet_done_editing': 'close',
};
},
@@ -189,80 +261,90 @@ Module.AutomatedLatestContentBlockSettingsView = base.BlockSettingsView.extend({
var that = this;
// Dynamically update available post types
- CommunicationComponent.getPostTypes().done(_.bind(this._updateContentTypes, this));
+ CommunicationComponent.getPostTypes().done(
+ _.bind(this._updateContentTypes, this),
+ );
- this.$('.mailpoet_automated_latest_content_categories_and_tags').select2({
- multiple: true,
- allowClear: true,
- placeholder: MailPoet.I18n.t('categoriesAndTags'),
- ajax: {
- data: function (params) {
- return {
- term: params.term,
- page: params.page || 1,
- };
- },
- transport: function (options, success, failure) {
- var taxonomies;
- var termsPromise;
- var promise = CommunicationComponent.getTaxonomies(
- that.model.get('contentType')
- ).then(function (tax) {
- taxonomies = tax;
- // Fetch available terms based on the list of taxonomies already fetched
- termsPromise = CommunicationComponent.getTerms({
- search: options.data.term,
- page: options.data.page,
- taxonomies: _.keys(taxonomies),
- }).then(function (terms) {
- return {
- taxonomies: taxonomies,
- terms: terms,
- };
+ this.$('.mailpoet_automated_latest_content_categories_and_tags')
+ .select2({
+ multiple: true,
+ allowClear: true,
+ placeholder: MailPoet.I18n.t('categoriesAndTags'),
+ ajax: {
+ data: function (params) {
+ return {
+ term: params.term,
+ page: params.page || 1,
+ };
+ },
+ transport: function (options, success, failure) {
+ var taxonomies;
+ var termsPromise;
+ var promise = CommunicationComponent.getTaxonomies(
+ that.model.get('contentType'),
+ ).then(function (tax) {
+ taxonomies = tax;
+ // Fetch available terms based on the list of taxonomies already fetched
+ termsPromise = CommunicationComponent.getTerms({
+ search: options.data.term,
+ page: options.data.page,
+ taxonomies: _.keys(taxonomies),
+ }).then(function (terms) {
+ return {
+ taxonomies: taxonomies,
+ terms: terms,
+ };
+ });
+ return termsPromise;
});
- return termsPromise;
- });
- promise.then(success);
- promise.fail(failure);
- return promise;
+ promise.then(success);
+ promise.fail(failure);
+ return promise;
+ },
+ processResults: function (data) {
+ // Transform taxonomies and terms into select2 compatible format
+ return {
+ results: _.map(data.terms, function (item) {
+ return _.defaults(
+ {
+ text:
+ data.taxonomies[item.taxonomy].labels.singular_name +
+ ': ' +
+ item.name,
+ id: item.term_id,
+ },
+ item,
+ );
+ }),
+ pagination: {
+ more: data.terms.length === 100,
+ },
+ };
+ },
},
- processResults: function (data) {
- // Transform taxonomies and terms into select2 compatible format
- return {
- results: _.map(
- data.terms,
- function (item) {
- return _.defaults({
- text: data.taxonomies[item.taxonomy].labels.singular_name + ': ' + item.name,
- id: item.term_id,
- }, item);
- }
- ),
- pagination: {
- more: data.terms.length === 100,
- },
- };
+ })
+ .on({
+ 'select2:select': function (event) {
+ var terms = that.model.get('terms');
+ terms.add(event.params.data);
+ // Reset whole model in order for change events to propagate properly
+ that.model.set('terms', terms.toJSON());
},
- },
- }).on({
- 'select2:select': function (event) {
- var terms = that.model.get('terms');
- terms.add(event.params.data);
- // Reset whole model in order for change events to propagate properly
- that.model.set('terms', terms.toJSON());
- },
- 'select2:unselect': function (event) {
- var terms = that.model.get('terms');
- terms.remove(event.params.data);
- // Reset whole model in order for change events to propagate properly
- that.model.set('terms', terms.toJSON());
- },
- }).trigger('change');
+ 'select2:unselect': function (event) {
+ var terms = that.model.get('terms');
+ terms.remove(event.params.data);
+ // Reset whole model in order for change events to propagate properly
+ that.model.set('terms', terms.toJSON());
+ },
+ })
+ .trigger('change');
},
toggleDisplayOptions: function () {
var el = this.$('.mailpoet_automated_latest_content_display_options');
- var showControl = this.$('.mailpoet_automated_latest_content_show_display_options');
+ var showControl = this.$(
+ '.mailpoet_automated_latest_content_show_display_options',
+ );
if (el.hasClass('mailpoet_closed')) {
el.removeClass('mailpoet_closed');
showControl.addClass('mailpoet_hidden');
@@ -273,33 +355,41 @@ Module.AutomatedLatestContentBlockSettingsView = base.BlockSettingsView.extend({
},
showButtonSettings: function () {
var buttonModule = ButtonBlock;
- (new buttonModule.ButtonBlockSettingsView({
+ new buttonModule.ButtonBlockSettingsView({
model: this.model.get('readMoreButton'),
renderOptions: {
displayFormat: 'subpanel',
hideLink: true,
hideApplyToAll: true,
},
- })).render();
+ }).render();
},
showDividerSettings: function () {
var dividerModule = DividerBlock;
- (new dividerModule.DividerBlockSettingsView({
+ new dividerModule.DividerBlockSettingsView({
model: this.model.get('divider'),
renderOptions: {
displayFormat: 'subpanel',
hideApplyToAll: true,
},
- })).render();
+ }).render();
},
changeReadMoreType: function (event) {
var value = jQuery(event.target).val();
if (value === 'link') {
- this.$('.mailpoet_automated_latest_content_read_more_text').removeClass('mailpoet_hidden');
- this.$('.mailpoet_automated_latest_content_select_button').addClass('mailpoet_hidden');
+ this.$('.mailpoet_automated_latest_content_read_more_text').removeClass(
+ 'mailpoet_hidden',
+ );
+ this.$('.mailpoet_automated_latest_content_select_button').addClass(
+ 'mailpoet_hidden',
+ );
} else if (value === 'button') {
- this.$('.mailpoet_automated_latest_content_read_more_text').addClass('mailpoet_hidden');
- this.$('.mailpoet_automated_latest_content_select_button').removeClass('mailpoet_hidden');
+ this.$('.mailpoet_automated_latest_content_read_more_text').addClass(
+ 'mailpoet_hidden',
+ );
+ this.$('.mailpoet_automated_latest_content_select_button').removeClass(
+ 'mailpoet_hidden',
+ );
}
this.changeField('readMoreType', event);
},
@@ -307,40 +397,66 @@ Module.AutomatedLatestContentBlockSettingsView = base.BlockSettingsView.extend({
var value = jQuery(event.target).val();
if (value === 'titleOnly') {
- this.$('.mailpoet_automated_latest_content_title_as_list').removeClass('mailpoet_hidden');
- this.$('.mailpoet_automated_latest_content_image_full_width_option').addClass('mailpoet_hidden');
- this.$('.mailpoet_automated_latest_content_image_separator').addClass('mailpoet_hidden');
+ this.$('.mailpoet_automated_latest_content_title_as_list').removeClass(
+ 'mailpoet_hidden',
+ );
+ this.$(
+ '.mailpoet_automated_latest_content_image_full_width_option',
+ ).addClass('mailpoet_hidden');
+ this.$('.mailpoet_automated_latest_content_image_separator').addClass(
+ 'mailpoet_hidden',
+ );
} else {
- this.$('.mailpoet_automated_latest_content_title_as_list').addClass('mailpoet_hidden');
- this.$('.mailpoet_automated_latest_content_image_full_width_option').removeClass('mailpoet_hidden');
- this.$('.mailpoet_automated_latest_content_image_separator').removeClass('mailpoet_hidden');
+ this.$('.mailpoet_automated_latest_content_title_as_list').addClass(
+ 'mailpoet_hidden',
+ );
+ this.$(
+ '.mailpoet_automated_latest_content_image_full_width_option',
+ ).removeClass('mailpoet_hidden');
+ this.$('.mailpoet_automated_latest_content_image_separator').removeClass(
+ 'mailpoet_hidden',
+ );
// Reset titleFormat if it was set to List when switching away from displayType=titleOnly
if (this.model.get('titleFormat') === 'ul') {
this.model.set('titleFormat', 'h1');
this.$('.mailpoet_automated_latest_content_title_format').val(['h1']);
- this.$('.mailpoet_automated_latest_content_title_as_link').removeClass('mailpoet_hidden');
+ this.$('.mailpoet_automated_latest_content_title_as_link').removeClass(
+ 'mailpoet_hidden',
+ );
}
}
if (value === 'excerpt') {
- this.$('.mailpoet_automated_latest_content_featured_image_position_container').removeClass('mailpoet_hidden');
+ this.$(
+ '.mailpoet_automated_latest_content_featured_image_position_container',
+ ).removeClass('mailpoet_hidden');
} else {
- this.$('.mailpoet_automated_latest_content_featured_image_position_container').addClass('mailpoet_hidden');
+ this.$(
+ '.mailpoet_automated_latest_content_featured_image_position_container',
+ ).addClass('mailpoet_hidden');
}
this.changeField('displayType', event);
},
changeTitleFormat: function (event) {
var value = jQuery(event.target).val();
if (value === 'ul') {
- this.$('.mailpoet_automated_latest_content_non_title_list_options').addClass('mailpoet_hidden');
+ this.$(
+ '.mailpoet_automated_latest_content_non_title_list_options',
+ ).addClass('mailpoet_hidden');
this.model.set('titleIsLink', true);
- this.$('.mailpoet_automated_latest_content_title_as_link').addClass('mailpoet_hidden');
+ this.$('.mailpoet_automated_latest_content_title_as_link').addClass(
+ 'mailpoet_hidden',
+ );
this.$('.mailpoet_automated_latest_content_title_as_links').val(['true']);
} else {
- this.$('.mailpoet_automated_latest_content_non_title_list_options').removeClass('mailpoet_hidden');
- this.$('.mailpoet_automated_latest_content_title_as_link').removeClass('mailpoet_hidden');
+ this.$(
+ '.mailpoet_automated_latest_content_non_title_list_options',
+ ).removeClass('mailpoet_hidden');
+ this.$('.mailpoet_automated_latest_content_title_as_link').removeClass(
+ 'mailpoet_hidden',
+ );
}
this.changeField('titleFormat', event);
},
@@ -350,17 +466,21 @@ Module.AutomatedLatestContentBlockSettingsView = base.BlockSettingsView.extend({
select.find('option').remove();
_.each(postTypes, function (type) {
- select.append(jQuery('', {
- value: type.name,
- text: type.label,
- }));
+ select.append(
+ jQuery(' ', {
+ value: type.name,
+ text: type.label,
+ }),
+ );
});
select.val(selectedValue);
},
});
Module.AutomatedLatestContentWidgetView = base.WidgetView.extend({
- getTemplate: function () { return window.templates.automatedLatestContentInsertion; },
+ getTemplate: function () {
+ return window.templates.automatedLatestContentInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/automatedLatestContentLayout.js b/mailpoet/assets/js/src/newsletter_editor/blocks/automatedLatestContentLayout.js
index ecb438f5b7..e3fb8d09c3 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/automatedLatestContentLayout.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/automatedLatestContentLayout.js
@@ -21,14 +21,15 @@ Module.ALCLayoutSupervisor = SuperModel.extend({
this.listenTo(
App.getChannel(),
'automatedLatestContentLayoutRefresh',
- _.debounce(this.refresh, DELAY_REFRESH_FOR_MS)
+ _.debounce(this.refresh, DELAY_REFRESH_FOR_MS),
);
},
refresh: function () {
var blocks;
- var models = App.findModels(function (model) {
- return model.get('type') === 'automatedLatestContentLayout';
- }) || [];
+ var models =
+ App.findModels(function (model) {
+ return model.get('type') === 'automatedLatestContentLayout';
+ }) || [];
if (models.length === 0) return;
blocks = _.map(models, function (model) {
@@ -40,52 +41,52 @@ Module.ALCLayoutSupervisor = SuperModel.extend({
}).then(_.partial(this.refreshBlocks, models));
},
refreshBlocks: function (models, renderedBlocks) {
- _.each(
- _.zip(models, renderedBlocks),
- function (args) {
- var model = args[0];
- var contents = args[1];
- model.trigger('refreshPosts', contents);
- }
- );
+ _.each(_.zip(models, renderedBlocks), function (args) {
+ var model = args[0];
+ var contents = args[1];
+ model.trigger('refreshPosts', contents);
+ });
},
});
Module.AutomatedLatestContentLayoutBlockModel = base.BlockModel.extend({
stale: ['_container', '_displayOptionsHidden', '_featuredImagePosition'],
defaults: function () {
- return this._getDefaults({
- type: 'automatedLatestContentLayout',
- withLayout: true,
- amount: '5',
- contentType: 'post', // 'post'|'page'|'mailpoet_page'
- terms: [], // List of category and tag objects
- inclusionType: 'include', // 'include'|'exclude'
- displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly'
- titleFormat: 'h1', // 'h1'|'h2'|'h3'|'ul'
- titleAlignment: 'left', // 'left'|'center'|'right'
- titleIsLink: false, // false|true
- imageFullWidth: false, // true|false
- titlePosition: 'abovePost', // 'abovePost'|'aboveExcerpt'
- featuredImagePosition: 'centered', // 'centered'|'left'|'right'|'alternate'|'none'
- fullPostFeaturedImagePosition: 'none', // 'centered'|'left'|'right'|'alternate'|'none'
- showAuthor: 'no', // 'no'|'aboveText'|'belowText'
- authorPrecededBy: 'Author:',
- showCategories: 'no', // 'no'|'aboveText'|'belowText'
- categoriesPrecededBy: 'Categories:',
- readMoreType: 'button', // 'link'|'button'
- readMoreText: 'Read more', // 'link'|'button'
- readMoreButton: {
- text: 'Read more',
- url: '[postLink]',
+ return this._getDefaults(
+ {
+ type: 'automatedLatestContentLayout',
+ withLayout: true,
+ amount: '5',
+ contentType: 'post', // 'post'|'page'|'mailpoet_page'
+ terms: [], // List of category and tag objects
+ inclusionType: 'include', // 'include'|'exclude'
+ displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly'
+ titleFormat: 'h1', // 'h1'|'h2'|'h3'|'ul'
+ titleAlignment: 'left', // 'left'|'center'|'right'
+ titleIsLink: false, // false|true
+ imageFullWidth: false, // true|false
+ titlePosition: 'abovePost', // 'abovePost'|'aboveExcerpt'
+ featuredImagePosition: 'centered', // 'centered'|'left'|'right'|'alternate'|'none'
+ fullPostFeaturedImagePosition: 'none', // 'centered'|'left'|'right'|'alternate'|'none'
+ showAuthor: 'no', // 'no'|'aboveText'|'belowText'
+ authorPrecededBy: 'Author:',
+ showCategories: 'no', // 'no'|'aboveText'|'belowText'
+ categoriesPrecededBy: 'Categories:',
+ readMoreType: 'button', // 'link'|'button'
+ readMoreText: 'Read more', // 'link'|'button'
+ readMoreButton: {
+ text: 'Read more',
+ url: '[postLink]',
+ },
+ sortBy: 'newest', // 'newest'|'oldest',
+ showDivider: true, // true|false
+ divider: {},
+ _container: new (App.getBlockTypeModel('container'))(),
+ _displayOptionsHidden: true, // true|false
+ _featuredImagePosition: 'none', // 'centered'|'left'|'right'|'alternate'|'none'
},
- sortBy: 'newest', // 'newest'|'oldest',
- showDivider: true, // true|false
- divider: {},
- _container: new (App.getBlockTypeModel('container'))(),
- _displayOptionsHidden: true, // true|false
- _featuredImagePosition: 'none', // 'centered'|'left'|'right'|'alternate'|'none'
- }, App.getConfig().get('blockDefaults.automatedLatestContentLayout'));
+ App.getConfig().get('blockDefaults.automatedLatestContentLayout'),
+ );
},
relations: function () {
return {
@@ -102,28 +103,42 @@ Module.AutomatedLatestContentLayoutBlockModel = base.BlockModel.extend({
// For products with display type 'full' prefill 'fullPostFeaturedImagePosition' from existing
// 'featuredImagePosition'. Products always supported images, even for 'full' display type.
- const isProductWithDisplayTypeFull = block && block.displayType === 'full' && block.contentType === 'product';
- if (isProductWithDisplayTypeFull && !this.get('fullPostFeaturedImagePosition')) {
- this.set('fullPostFeaturedImagePosition', this.get('featuredImagePosition'));
+ const isProductWithDisplayTypeFull =
+ block && block.displayType === 'full' && block.contentType === 'product';
+ if (
+ isProductWithDisplayTypeFull &&
+ !this.get('fullPostFeaturedImagePosition')
+ ) {
+ this.set(
+ 'fullPostFeaturedImagePosition',
+ this.get('featuredImagePosition'),
+ );
}
base.BlockView.prototype.initialize.apply(this, arguments);
- this.on('change:amount change:contentType change:terms change:inclusionType change:displayType change:titleFormat change:featuredImagePosition change:fullPostFeaturedImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:sortBy change:showDivider change:titlePosition', this._handleChanges, this);
+ this.on(
+ 'change:amount change:contentType change:terms change:inclusionType change:displayType change:titleFormat change:featuredImagePosition change:fullPostFeaturedImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:sortBy change:showDivider change:titlePosition',
+ this._handleChanges,
+ this,
+ );
this.listenTo(this.get('readMoreButton'), 'change', this._handleChanges);
this.listenTo(this.get('divider'), 'change', this._handleChanges);
this.on('add remove update reset', this._handleChanges);
this.on('refreshPosts', this.updatePosts, this);
- const field = this.get('displayType') === 'full' ? 'fullPostFeaturedImagePosition' : 'featuredImagePosition';
+ const field =
+ this.get('displayType') === 'full'
+ ? 'fullPostFeaturedImagePosition'
+ : 'featuredImagePosition';
this.set('_featuredImagePosition', this.get(field));
},
updatePosts: function (posts) {
this.get('_container.blocks').reset(posts, { parse: true });
},
/**
- * Batch more changes during a specific time, instead of fetching
- * ALC posts on each model change
- */
+ * Batch more changes during a specific time, instead of fetching
+ * ALC posts on each model change
+ */
_handleChanges: function () {
this._updateDefaults();
App.getChannel().trigger('automatedLatestContentLayoutRefresh');
@@ -131,14 +146,20 @@ Module.AutomatedLatestContentLayoutBlockModel = base.BlockModel.extend({
});
Module.AutomatedLatestContentLayoutBlockView = base.BlockView.extend({
- className: 'mailpoet_block mailpoet_automated_latest_content_block mailpoet_droppable_block',
+ className:
+ 'mailpoet_block mailpoet_automated_latest_content_block mailpoet_droppable_block',
initialize: function () {
function replaceButtonStylesHandler(data) {
this.model.set({ readMoreButton: data });
}
- App.getChannel().on('replaceAllButtonStyles', replaceButtonStylesHandler.bind(this));
+ App.getChannel().on(
+ 'replaceAllButtonStyles',
+ replaceButtonStylesHandler.bind(this),
+ );
+ },
+ getTemplate: function () {
+ return window.templates.automatedLatestContentLayoutBlock;
},
- getTemplate: function () { return window.templates.automatedLatestContentLayoutBlock; },
regions: {
toolsRegion: '.mailpoet_tools',
postsRegion: '.mailpoet_automated_latest_content_block_posts',
@@ -147,12 +168,14 @@ Module.AutomatedLatestContentLayoutBlockView = base.BlockView.extend({
_.omit(base.BlockView.prototype.modelEvents, 'change'),
{
postsChanged: 'render',
- }
+ },
),
events: {
'click .mailpoet_automated_latest_content_block_overlay': 'showSettings',
},
- onDragSubstituteBy: function () { return Module.AutomatedLatestContentLayoutWidgetView; },
+ onDragSubstituteBy: function () {
+ return Module.AutomatedLatestContentLayoutWidgetView;
+ },
onRender: function () {
var ContainerView = App.getBlockTypeView('container');
var renderOptions = {
@@ -160,224 +183,327 @@ Module.AutomatedLatestContentLayoutBlockView = base.BlockView.extend({
disableDragAndDrop: true,
emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
};
- this.toolsView = new Module.AutomatedLatestContentLayoutBlockToolsView({ model: this.model });
+ this.toolsView = new Module.AutomatedLatestContentLayoutBlockToolsView({
+ model: this.model,
+ });
this.showChildView('toolsRegion', this.toolsView);
- this.showChildView('postsRegion', new ContainerView({ model: this.model.get('_container'), renderOptions: renderOptions }));
+ this.showChildView(
+ 'postsRegion',
+ new ContainerView({
+ model: this.model.get('_container'),
+ renderOptions: renderOptions,
+ }),
+ );
},
duplicateBlock: function duplicateBlock() {
var originalData = this.model.toJSON();
- var newModel = new Module.AutomatedLatestContentLayoutBlockModel(originalData);
- this.model.collection.add(
- newModel,
- {
- at: this.model.collection.findIndex(this.model),
- }
+ var newModel = new Module.AutomatedLatestContentLayoutBlockModel(
+ originalData,
);
+ this.model.collection.add(newModel, {
+ at: this.model.collection.findIndex(this.model),
+ });
},
});
Module.AutomatedLatestContentLayoutBlockToolsView = base.BlockToolsView.extend({
- getSettingsView: function () { return Module.AutomatedLatestContentLayoutBlockSettingsView; },
+ getSettingsView: function () {
+ return Module.AutomatedLatestContentLayoutBlockSettingsView;
+ },
});
// Sidebar view container
-Module.AutomatedLatestContentLayoutBlockSettingsView = base.BlockSettingsView.extend({
- getTemplate: function () { return window.templates.automatedLatestContentLayoutBlockSettings; },
- events: function () {
- return {
- 'click .mailpoet_automated_latest_content_hide_display_options': 'toggleDisplayOptions',
- 'click .mailpoet_automated_latest_content_show_display_options': 'toggleDisplayOptions',
- 'click .mailpoet_automated_latest_content_select_button': 'showButtonSettings',
- 'click .mailpoet_automated_latest_content_select_divider': 'showDividerSettings',
- 'change .mailpoet_automated_latest_content_read_more_type': 'changeReadMoreType',
- 'change .mailpoet_automated_latest_content_display_type': 'changeDisplayType',
- 'change .mailpoet_automated_latest_content_title_format': 'changeTitleFormat',
- 'change .mailpoet_automated_latest_content_title_as_links': _.partial(this.changeBoolField, 'titleIsLink'),
- 'change .mailpoet_automated_latest_content_show_divider': _.partial(this.changeBoolField, 'showDivider'),
- 'input .mailpoet_automated_latest_content_show_amount': _.partial(this.changeField, 'amount'),
- 'change .mailpoet_automated_latest_content_content_type': _.partial(this.changeField, 'contentType'),
- 'change .mailpoet_automated_latest_content_include_or_exclude': _.partial(this.changeField, 'inclusionType'),
- 'change .mailpoet_automated_latest_content_title_alignment': _.partial(this.changeField, 'titleAlignment'),
- 'change .mailpoet_automated_latest_content_image_full_width': _.partial(this.changeBoolField, 'imageFullWidth'),
- 'change .mailpoet_automated_latest_content_featured_image_position': 'changeFeaturedImagePosition',
- 'change .mailpoet_automated_latest_content_show_author': _.partial(this.changeField, 'showAuthor'),
- 'input .mailpoet_automated_latest_content_author_preceded_by': _.partial(this.changeField, 'authorPrecededBy'),
- 'change .mailpoet_automated_latest_content_show_categories': _.partial(this.changeField, 'showCategories'),
- 'input .mailpoet_automated_latest_content_categories': _.partial(this.changeField, 'categoriesPrecededBy'),
- 'input .mailpoet_automated_latest_content_read_more_text': _.partial(this.changeField, 'readMoreText'),
- 'change .mailpoet_automated_latest_content_sort_by': _.partial(this.changeField, 'sortBy'),
- 'change .mailpoet_automated_latest_content_title_position': _.partial(this.changeField, 'titlePosition'),
- 'click .mailpoet_done_editing': 'close',
- };
- },
- onRender: function () {
- var that = this;
+Module.AutomatedLatestContentLayoutBlockSettingsView =
+ base.BlockSettingsView.extend({
+ getTemplate: function () {
+ return window.templates.automatedLatestContentLayoutBlockSettings;
+ },
+ events: function () {
+ return {
+ 'click .mailpoet_automated_latest_content_hide_display_options':
+ 'toggleDisplayOptions',
+ 'click .mailpoet_automated_latest_content_show_display_options':
+ 'toggleDisplayOptions',
+ 'click .mailpoet_automated_latest_content_select_button':
+ 'showButtonSettings',
+ 'click .mailpoet_automated_latest_content_select_divider':
+ 'showDividerSettings',
+ 'change .mailpoet_automated_latest_content_read_more_type':
+ 'changeReadMoreType',
+ 'change .mailpoet_automated_latest_content_display_type':
+ 'changeDisplayType',
+ 'change .mailpoet_automated_latest_content_title_format':
+ 'changeTitleFormat',
+ 'change .mailpoet_automated_latest_content_title_as_links': _.partial(
+ this.changeBoolField,
+ 'titleIsLink',
+ ),
+ 'change .mailpoet_automated_latest_content_show_divider': _.partial(
+ this.changeBoolField,
+ 'showDivider',
+ ),
+ 'input .mailpoet_automated_latest_content_show_amount': _.partial(
+ this.changeField,
+ 'amount',
+ ),
+ 'change .mailpoet_automated_latest_content_content_type': _.partial(
+ this.changeField,
+ 'contentType',
+ ),
+ 'change .mailpoet_automated_latest_content_include_or_exclude':
+ _.partial(this.changeField, 'inclusionType'),
+ 'change .mailpoet_automated_latest_content_title_alignment': _.partial(
+ this.changeField,
+ 'titleAlignment',
+ ),
+ 'change .mailpoet_automated_latest_content_image_full_width': _.partial(
+ this.changeBoolField,
+ 'imageFullWidth',
+ ),
+ 'change .mailpoet_automated_latest_content_featured_image_position':
+ 'changeFeaturedImagePosition',
+ 'change .mailpoet_automated_latest_content_show_author': _.partial(
+ this.changeField,
+ 'showAuthor',
+ ),
+ 'input .mailpoet_automated_latest_content_author_preceded_by':
+ _.partial(this.changeField, 'authorPrecededBy'),
+ 'change .mailpoet_automated_latest_content_show_categories': _.partial(
+ this.changeField,
+ 'showCategories',
+ ),
+ 'input .mailpoet_automated_latest_content_categories': _.partial(
+ this.changeField,
+ 'categoriesPrecededBy',
+ ),
+ 'input .mailpoet_automated_latest_content_read_more_text': _.partial(
+ this.changeField,
+ 'readMoreText',
+ ),
+ 'change .mailpoet_automated_latest_content_sort_by': _.partial(
+ this.changeField,
+ 'sortBy',
+ ),
+ 'change .mailpoet_automated_latest_content_title_position': _.partial(
+ this.changeField,
+ 'titlePosition',
+ ),
+ 'click .mailpoet_done_editing': 'close',
+ };
+ },
+ onRender: function () {
+ var that = this;
- // Dynamically update available post types
- CommunicationComponent.getPostTypes().done(_.bind(this._updateContentTypes, this));
+ // Dynamically update available post types
+ CommunicationComponent.getPostTypes().done(
+ _.bind(this._updateContentTypes, this),
+ );
- this.$('.mailpoet_automated_latest_content_categories_and_tags').select2({
- multiple: true,
- allowClear: true,
- placeholder: MailPoet.I18n.t('categoriesAndTags'),
- ajax: {
- data: function (params) {
- return {
- term: params.term,
- page: params.page || 1,
- };
- },
- transport: function (options, success, failure) {
- var taxonomies;
- var termsPromise;
- var promise = CommunicationComponent.getTaxonomies(
- that.model.get('contentType')
- ).then(function (tax) {
- taxonomies = tax;
- // Fetch available terms based on the list of taxonomies already fetched
- termsPromise = CommunicationComponent.getTerms({
- search: options.data.term,
- page: options.data.page,
- taxonomies: _.keys(taxonomies),
- }).then(function (terms) {
+ this.$('.mailpoet_automated_latest_content_categories_and_tags')
+ .select2({
+ multiple: true,
+ allowClear: true,
+ placeholder: MailPoet.I18n.t('categoriesAndTags'),
+ ajax: {
+ data: function (params) {
return {
- taxonomies: taxonomies,
- terms: terms,
+ term: params.term,
+ page: params.page || 1,
};
- });
- return termsPromise;
- });
-
- promise.then(success);
- promise.fail(failure);
- return promise;
- },
- processResults: function (data) {
- // Transform taxonomies and terms into select2 compatible format
- return {
- results: _.map(
- data.terms,
- function (item) {
- return _.defaults({
- text: data.taxonomies[item.taxonomy].labels.singular_name + ': ' + item.name,
- id: item.term_id,
- }, item);
- }
- ),
- pagination: {
- more: data.terms.length === 100,
},
- };
+ transport: function (options, success, failure) {
+ var taxonomies;
+ var termsPromise;
+ var promise = CommunicationComponent.getTaxonomies(
+ that.model.get('contentType'),
+ ).then(function (tax) {
+ taxonomies = tax;
+ // Fetch available terms based on the list of taxonomies already fetched
+ termsPromise = CommunicationComponent.getTerms({
+ search: options.data.term,
+ page: options.data.page,
+ taxonomies: _.keys(taxonomies),
+ }).then(function (terms) {
+ return {
+ taxonomies: taxonomies,
+ terms: terms,
+ };
+ });
+ return termsPromise;
+ });
+
+ promise.then(success);
+ promise.fail(failure);
+ return promise;
+ },
+ processResults: function (data) {
+ // Transform taxonomies and terms into select2 compatible format
+ return {
+ results: _.map(data.terms, function (item) {
+ return _.defaults(
+ {
+ text:
+ data.taxonomies[item.taxonomy].labels.singular_name +
+ ': ' +
+ item.name,
+ id: item.term_id,
+ },
+ item,
+ );
+ }),
+ pagination: {
+ more: data.terms.length === 100,
+ },
+ };
+ },
+ },
+ })
+ .on({
+ 'select2:select': function (event) {
+ var terms = that.model.get('terms');
+ terms.add(event.params.data);
+ // Reset whole model in order for change events to propagate properly
+ that.model.set('terms', terms.toJSON());
+ },
+ 'select2:unselect': function (event) {
+ var terms = that.model.get('terms');
+ terms.remove(event.params.data);
+ // Reset whole model in order for change events to propagate properly
+ that.model.set('terms', terms.toJSON());
+ },
+ })
+ .trigger('change');
+ },
+ toggleDisplayOptions: function () {
+ this.model.set(
+ '_displayOptionsHidden',
+ !this.model.get('_displayOptionsHidden'),
+ );
+ this.render();
+ },
+ showButtonSettings: function () {
+ var buttonModule = ButtonBlock;
+ new buttonModule.ButtonBlockSettingsView({
+ model: this.model.get('readMoreButton'),
+ renderOptions: {
+ displayFormat: 'subpanel',
+ hideLink: true,
+ hideApplyToAll: true,
},
- },
- }).on({
- 'select2:select': function (event) {
- var terms = that.model.get('terms');
- terms.add(event.params.data);
- // Reset whole model in order for change events to propagate properly
- that.model.set('terms', terms.toJSON());
- },
- 'select2:unselect': function (event) {
- var terms = that.model.get('terms');
- terms.remove(event.params.data);
- // Reset whole model in order for change events to propagate properly
- that.model.set('terms', terms.toJSON());
- },
- }).trigger('change');
- },
- toggleDisplayOptions: function () {
- this.model.set('_displayOptionsHidden', !this.model.get('_displayOptionsHidden'));
- this.render();
- },
- showButtonSettings: function () {
- var buttonModule = ButtonBlock;
- (new buttonModule.ButtonBlockSettingsView({
- model: this.model.get('readMoreButton'),
- renderOptions: {
- displayFormat: 'subpanel',
- hideLink: true,
- hideApplyToAll: true,
- },
- })).render();
- },
- showDividerSettings: function () {
- var dividerModule = DividerBlock;
- (new dividerModule.DividerBlockSettingsView({
- model: this.model.get('divider'),
- renderOptions: {
- displayFormat: 'subpanel',
- hideApplyToAll: true,
- },
- })).render();
- },
- changeReadMoreType: function (event) {
- var value = jQuery(event.target).val();
- if (value === 'link') {
- this.$('.mailpoet_automated_latest_content_read_more_text').removeClass('mailpoet_hidden');
- this.$('.mailpoet_automated_latest_content_select_button').addClass('mailpoet_hidden');
- } else if (value === 'button') {
- this.$('.mailpoet_automated_latest_content_read_more_text').addClass('mailpoet_hidden');
- this.$('.mailpoet_automated_latest_content_select_button').removeClass('mailpoet_hidden');
- }
- this.changeField('readMoreType', event);
- },
- changeDisplayType: function (event) {
- var value = jQuery(event.target).val();
+ }).render();
+ },
+ showDividerSettings: function () {
+ var dividerModule = DividerBlock;
+ new dividerModule.DividerBlockSettingsView({
+ model: this.model.get('divider'),
+ renderOptions: {
+ displayFormat: 'subpanel',
+ hideApplyToAll: true,
+ },
+ }).render();
+ },
+ changeReadMoreType: function (event) {
+ var value = jQuery(event.target).val();
+ if (value === 'link') {
+ this.$('.mailpoet_automated_latest_content_read_more_text').removeClass(
+ 'mailpoet_hidden',
+ );
+ this.$('.mailpoet_automated_latest_content_select_button').addClass(
+ 'mailpoet_hidden',
+ );
+ } else if (value === 'button') {
+ this.$('.mailpoet_automated_latest_content_read_more_text').addClass(
+ 'mailpoet_hidden',
+ );
+ this.$('.mailpoet_automated_latest_content_select_button').removeClass(
+ 'mailpoet_hidden',
+ );
+ }
+ this.changeField('readMoreType', event);
+ },
+ changeDisplayType: function (event) {
+ var value = jQuery(event.target).val();
- // Reset titleFormat if it was set to List when switching away from displayType=titleOnly
- if (value !== 'titleOnly' && this.model.get('titleFormat') === 'ul') {
- this.model.set('titleFormat', 'h1');
- this.$('.mailpoet_automated_latest_content_title_format').val(['h1']);
- this.$('.mailpoet_automated_latest_content_title_as_link').removeClass('mailpoet_hidden');
- }
- this.changeField('displayType', event);
+ // Reset titleFormat if it was set to List when switching away from displayType=titleOnly
+ if (value !== 'titleOnly' && this.model.get('titleFormat') === 'ul') {
+ this.model.set('titleFormat', 'h1');
+ this.$('.mailpoet_automated_latest_content_title_format').val(['h1']);
+ this.$('.mailpoet_automated_latest_content_title_as_link').removeClass(
+ 'mailpoet_hidden',
+ );
+ }
+ this.changeField('displayType', event);
- const field = this.model.get('displayType') === 'full' ? 'fullPostFeaturedImagePosition' : 'featuredImagePosition';
- this.model.set('_featuredImagePosition', this.model.get(field));
- this.render();
- },
- changeTitleFormat: function (event) {
- var value = jQuery(event.target).val();
- if (value === 'ul') {
- this.$('.mailpoet_automated_latest_content_non_title_list_options').addClass('mailpoet_hidden');
+ const field =
+ this.model.get('displayType') === 'full'
+ ? 'fullPostFeaturedImagePosition'
+ : 'featuredImagePosition';
+ this.model.set('_featuredImagePosition', this.model.get(field));
+ this.render();
+ },
+ changeTitleFormat: function (event) {
+ var value = jQuery(event.target).val();
+ if (value === 'ul') {
+ this.$(
+ '.mailpoet_automated_latest_content_non_title_list_options',
+ ).addClass('mailpoet_hidden');
- this.model.set('titleIsLink', true);
- this.$('.mailpoet_automated_latest_content_title_as_link').addClass('mailpoet_hidden');
- this.$('.mailpoet_automated_latest_content_title_as_links').val(['true']);
- } else {
- this.$('.mailpoet_automated_latest_content_non_title_list_options').removeClass('mailpoet_hidden');
- this.$('.mailpoet_automated_latest_content_title_as_link').removeClass('mailpoet_hidden');
- }
- this.changeField('titleFormat', event);
- },
- changeFeaturedImagePosition: function (event) {
- const field = this.model.get('displayType') === 'full' ? 'fullPostFeaturedImagePosition' : 'featuredImagePosition';
- this.changeField(field, event);
- this.changeField('_featuredImagePosition', event);
- },
- _updateContentTypes: function (postTypes) {
- var select = this.$('.mailpoet_automated_latest_content_content_type');
- var selectedValue = this.model.get('contentType');
+ this.model.set('titleIsLink', true);
+ this.$('.mailpoet_automated_latest_content_title_as_link').addClass(
+ 'mailpoet_hidden',
+ );
+ this.$('.mailpoet_automated_latest_content_title_as_links').val([
+ 'true',
+ ]);
+ } else {
+ this.$(
+ '.mailpoet_automated_latest_content_non_title_list_options',
+ ).removeClass('mailpoet_hidden');
+ this.$('.mailpoet_automated_latest_content_title_as_link').removeClass(
+ 'mailpoet_hidden',
+ );
+ }
+ this.changeField('titleFormat', event);
+ },
+ changeFeaturedImagePosition: function (event) {
+ const field =
+ this.model.get('displayType') === 'full'
+ ? 'fullPostFeaturedImagePosition'
+ : 'featuredImagePosition';
+ this.changeField(field, event);
+ this.changeField('_featuredImagePosition', event);
+ },
+ _updateContentTypes: function (postTypes) {
+ var select = this.$('.mailpoet_automated_latest_content_content_type');
+ var selectedValue = this.model.get('contentType');
- select.find('option').remove();
- _.each(postTypes, function (type) {
- select.append(jQuery(' ', {
- value: type.name,
- text: type.label,
- }));
- });
- select.val(selectedValue);
- },
-});
+ select.find('option').remove();
+ _.each(postTypes, function (type) {
+ select.append(
+ jQuery(' ', {
+ value: type.name,
+ text: type.label,
+ }),
+ );
+ });
+ select.val(selectedValue);
+ },
+ });
Module.AutomatedLatestContentLayoutWidgetView = base.WidgetView.extend({
- className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
- getTemplate: function () { return window.templates.automatedLatestContentLayoutInsertion; },
+ className:
+ base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
+ getTemplate: function () {
+ return window.templates.automatedLatestContentLayoutInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function () {
- return new Module.AutomatedLatestContentLayoutBlockModel({}, { parse: true });
+ return new Module.AutomatedLatestContentLayoutBlockModel(
+ {},
+ { parse: true },
+ );
},
onDrop: function (options) {
options.droppedView.triggerMethod('showSettings');
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/base.js b/mailpoet/assets/js/src/newsletter_editor/blocks/base.js
index 0be8ec1303..ba503bdae8 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/base.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/base.js
@@ -35,7 +35,9 @@ Module.BlockModel = SuperModel.extend({
// Otherwise SuperModel interprets it not as a simpleObject
// and misbehaves
// TODO: Investigate for a better solution
- return JSON.parse(JSON.stringify(jQuery.extend(blockDefaults, defaults || {})));
+ return JSON.parse(
+ JSON.stringify(jQuery.extend(blockDefaults, defaults || {})),
+ );
},
_updateDefaults: function updateDefaults() {
var context = this.get('context') || this.get('type');
@@ -126,8 +128,8 @@ Module.BlockView = AugmentedView.extend({
this.toolsView.triggerMethod('showSettings', options);
},
/**
- * Defines drop behavior of BlockView instance
- */
+ * Defines drop behavior of BlockView instance
+ */
getDropFunc: function getDropFunc() {
return function getDropFuncClone() {
return this.model.clone();
@@ -140,15 +142,16 @@ Module.BlockView = AugmentedView.extend({
this.$el.removeClass('mailpoet_ignore_drag');
},
deleteBlock: function deleteBlock() {
- this.transitionOut().then(function deleteBlockDestroy() {
- this.model.destroy();
- }.bind(this));
+ this.transitionOut().then(
+ function deleteBlockDestroy() {
+ this.model.destroy();
+ }.bind(this),
+ );
},
duplicateBlock: function duplicateBlock() {
- this.model.collection.add(
- this.model.toJSON(),
- { at: this.model.collection.findIndex(this.model) }
- );
+ this.model.collection.add(this.model.toJSON(), {
+ at: this.model.collection.findIndex(this.model),
+ });
},
transitionOut: function transitionOut() {
return this._transition('slideUp', 'fadeOut', 'easeIn');
@@ -156,30 +159,28 @@ Module.BlockView = AugmentedView.extend({
_transition: function transition(slideDirection, fadeDirection, easing) {
var promise = jQuery.Deferred();
- this.$el.velocity(
- slideDirection,
- {
+ this.$el
+ .velocity(slideDirection, {
duration: 250,
easing: easing,
complete: function complete() {
promise.resolve();
},
- }
- ).velocity(
- fadeDirection,
- {
+ })
+ .velocity(fadeDirection, {
duration: 250,
easing: easing,
queue: false, // Do not enqueue, trigger animation in parallel
- }
- );
+ });
return promise;
},
});
Module.BlockToolsView = AugmentedView.extend({
- getTemplate: function getTemplate() { return window.templates.genericBlockTools; },
+ getTemplate: function getTemplate() {
+ return window.templates.genericBlockTools;
+ },
events: {
'click .mailpoet_edit_block': 'toggleSettings',
'click .mailpoet_delete_block_activate': 'showDeletionConfirmation',
@@ -194,7 +195,9 @@ Module.BlockToolsView = AugmentedView.extend({
duplicate: true,
move: true,
},
- getSettingsView: function getSettingsView() { return Module.BlockSettingsView; },
+ getSettingsView: function getSettingsView() {
+ return Module.BlockSettingsView;
+ },
initialize: function initialize(opts) {
var options = opts || {};
if (!_.isUndefined(options.tools)) {
@@ -232,7 +235,7 @@ Module.BlockToolsView = AugmentedView.extend({
}
document.activeElement.blur();
App.getChannel().trigger('settingsDisplayed', this.model.cid);
- (new ViewType(_.extend({ model: this.model }, options || {}))).render();
+ new ViewType(_.extend({ model: this.model }, options || {})).render();
},
showDeletionConfirmation: function showDeletionConfirmation() {
this.$('.mailpoet_delete_block')
@@ -240,7 +243,9 @@ Module.BlockToolsView = AugmentedView.extend({
.find('> .mailpoet_block_highlight')
.css({ background: '#E64047', opacity: 0.5 });
- this.$('.mailpoet_delete_block').addClass('mailpoet_delete_block_activated');
+ this.$('.mailpoet_delete_block').addClass(
+ 'mailpoet_delete_block_activated',
+ );
},
hideDeletionConfirmation: function hideDeletionConfirmation() {
this.$('.mailpoet_delete_block')
@@ -248,7 +253,9 @@ Module.BlockToolsView = AugmentedView.extend({
.find('> .mailpoet_block_highlight')
.css({ background: 'transparent', opacity: 1 });
- this.$('.mailpoet_delete_block').removeClass('mailpoet_delete_block_activated');
+ this.$('.mailpoet_delete_block').removeClass(
+ 'mailpoet_delete_block_activated',
+ );
},
deleteBlock: function deleteBlock(event) {
event.preventDefault();
@@ -308,10 +315,10 @@ Module.BlockSettingsView = Marionette.View.extend({
this.model.set(field, jQuery(event.target).val() + suffix);
},
changeBoolField: function changeBoolField(field, event) {
- this.model.set(field, (jQuery(event.target).val() === 'true'));
+ this.model.set(field, jQuery(event.target).val() === 'true');
},
changeBoolCheckboxField: function changeBoolCheckboxField(field, event) {
- this.model.set(field, (!!jQuery(event.target).prop('checked')));
+ this.model.set(field, !!jQuery(event.target).prop('checked'));
},
changeColorField: function changeColorField(field, event) {
var value = jQuery(event.target).val();
@@ -328,7 +335,8 @@ Module.BlockSettingsView = Marionette.View.extend({
});
Module.WidgetView = Marionette.View.extend({
- className: 'mailpoet_widget mailpoet_droppable_block mailpoet_droppable_widget',
+ className:
+ 'mailpoet_widget mailpoet_droppable_block mailpoet_droppable_widget',
behaviors: {
DraggableBehavior: {
drop: function drop() {
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/button.js b/mailpoet/assets/js/src/newsletter_editor/blocks/button.js
index b2186fbc39..bb849cda64 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/button.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/button.js
@@ -12,34 +12,41 @@ var base = BaseBlock;
Module.ButtonBlockModel = base.BlockModel.extend({
defaults: function () {
- return this._getDefaults({
- type: 'button',
- text: 'Button',
- url: '',
- styles: {
- block: {
- backgroundColor: '#ff0000',
- borderColor: '#cccccc',
- borderWidth: '1px',
- borderRadius: '4px',
- borderStyle: 'solid',
- width: '200px',
- lineHeight: '40px',
- fontColor: '#000000',
- fontFamily: 'Arial',
- fontSize: '16px',
- fontWeight: 'normal', // 'normal'|'bold'
- textAlign: 'center',
+ return this._getDefaults(
+ {
+ type: 'button',
+ text: 'Button',
+ url: '',
+ styles: {
+ block: {
+ backgroundColor: '#ff0000',
+ borderColor: '#cccccc',
+ borderWidth: '1px',
+ borderRadius: '4px',
+ borderStyle: 'solid',
+ width: '200px',
+ lineHeight: '40px',
+ fontColor: '#000000',
+ fontFamily: 'Arial',
+ fontSize: '16px',
+ fontWeight: 'normal', // 'normal'|'bold'
+ textAlign: 'center',
+ },
},
},
- }, App.getConfig().get('blockDefaults.button'));
+ App.getConfig().get('blockDefaults.button'),
+ );
},
});
Module.ButtonBlockView = base.BlockView.extend({
className: 'mailpoet_block mailpoet_button_block mailpoet_droppable_block',
- getTemplate: function () { return window.templates.buttonBlock; },
- onDragSubstituteBy: function () { return Module.ButtonWidgetView; },
+ getTemplate: function () {
+ return window.templates.buttonBlock;
+ },
+ onDragSubstituteBy: function () {
+ return Module.ButtonWidgetView;
+ },
behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
ShowSettingsBehavior: {},
}),
@@ -47,8 +54,13 @@ Module.ButtonBlockView = base.BlockView.extend({
base.BlockView.prototype.initialize.apply(this, arguments);
// Listen for attempts to change all dividers in one go
- this._replaceButtonStylesHandler = function (data) { this.model.set(data); }.bind(this);
- App.getChannel().on('replaceAllButtonStyles', this._replaceButtonStylesHandler);
+ this._replaceButtonStylesHandler = function (data) {
+ this.model.set(data);
+ }.bind(this);
+ App.getChannel().on(
+ 'replaceAllButtonStyles',
+ this._replaceButtonStylesHandler,
+ );
},
onRender: function () {
this.toolsView = new Module.ButtonBlockToolsView({ model: this.model });
@@ -57,51 +69,134 @@ Module.ButtonBlockView = base.BlockView.extend({
});
Module.ButtonBlockToolsView = base.BlockToolsView.extend({
- getSettingsView: function () { return Module.ButtonBlockSettingsView; },
+ getSettingsView: function () {
+ return Module.ButtonBlockSettingsView;
+ },
});
Module.ButtonBlockSettingsView = base.BlockSettingsView.extend({
- getTemplate: function () { return window.templates.buttonBlockSettings; },
+ getTemplate: function () {
+ return window.templates.buttonBlockSettings;
+ },
events: function () {
return {
'input .mailpoet_field_button_text': _.partial(this.changeField, 'text'),
'input .mailpoet_field_button_url': _.partial(this.changeField, 'url'),
- 'change .mailpoet_field_button_alignment': _.partial(this.changeField, 'styles.block.textAlign'),
- 'change .mailpoet_field_button_font_color': _.partial(this.changeColorField, 'styles.block.fontColor'),
- 'change .mailpoet_field_button_font_family': _.partial(this.changeField, 'styles.block.fontFamily'),
- 'change .mailpoet_field_button_font_size': _.partial(this.changeField, 'styles.block.fontSize'),
- 'change .mailpoet_field_button_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
- 'change .mailpoet_field_button_border_color': _.partial(this.changeColorField, 'styles.block.borderColor'),
+ 'change .mailpoet_field_button_alignment': _.partial(
+ this.changeField,
+ 'styles.block.textAlign',
+ ),
+ 'change .mailpoet_field_button_font_color': _.partial(
+ this.changeColorField,
+ 'styles.block.fontColor',
+ ),
+ 'change .mailpoet_field_button_font_family': _.partial(
+ this.changeField,
+ 'styles.block.fontFamily',
+ ),
+ 'change .mailpoet_field_button_font_size': _.partial(
+ this.changeField,
+ 'styles.block.fontSize',
+ ),
+ 'change .mailpoet_field_button_background_color': _.partial(
+ this.changeColorField,
+ 'styles.block.backgroundColor',
+ ),
+ 'change .mailpoet_field_button_border_color': _.partial(
+ this.changeColorField,
+ 'styles.block.borderColor',
+ ),
'change .mailpoet_field_button_font_weight': 'changeFontWeight',
- 'input .mailpoet_field_button_border_width': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
- 'change .mailpoet_field_button_border_width': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
- 'input .mailpoet_field_button_border_width_input': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
+ 'input .mailpoet_field_button_border_width': _.partial(
+ this.updateValueAndCall,
+ '.mailpoet_field_button_border_width_input',
+ _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this),
+ ),
+ 'change .mailpoet_field_button_border_width': _.partial(
+ this.updateValueAndCall,
+ '.mailpoet_field_button_border_width_input',
+ _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this),
+ ),
+ 'input .mailpoet_field_button_border_width_input': _.partial(
+ this.updateValueAndCall,
+ '.mailpoet_field_button_border_width',
+ _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this),
+ ),
- 'input .mailpoet_field_button_border_radius': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, 'styles.block.borderRadius').bind(this)),
- 'change .mailpoet_field_button_border_radius': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, 'styles.block.borderRadius').bind(this)),
- 'input .mailpoet_field_button_border_radius_input': _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius', _.partial(this.changePixelField, 'styles.block.borderRadius').bind(this)),
+ 'input .mailpoet_field_button_border_radius': _.partial(
+ this.updateValueAndCall,
+ '.mailpoet_field_button_border_radius_input',
+ _.partial(this.changePixelField, 'styles.block.borderRadius').bind(
+ this,
+ ),
+ ),
+ 'change .mailpoet_field_button_border_radius': _.partial(
+ this.updateValueAndCall,
+ '.mailpoet_field_button_border_radius_input',
+ _.partial(this.changePixelField, 'styles.block.borderRadius').bind(
+ this,
+ ),
+ ),
+ 'input .mailpoet_field_button_border_radius_input': _.partial(
+ this.updateValueAndCall,
+ '.mailpoet_field_button_border_radius',
+ _.partial(this.changePixelField, 'styles.block.borderRadius').bind(
+ this,
+ ),
+ ),
- 'input .mailpoet_field_button_width': _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, 'styles.block.width').bind(this)),
- 'change .mailpoet_field_button_width': _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, 'styles.block.width').bind(this)),
- 'input .mailpoet_field_button_width_input': _.partial(this.updateValueAndCall, '.mailpoet_field_button_width', _.partial(this.changePixelField, 'styles.block.width').bind(this)),
+ 'input .mailpoet_field_button_width': _.partial(
+ this.updateValueAndCall,
+ '.mailpoet_field_button_width_input',
+ _.partial(this.changePixelField, 'styles.block.width').bind(this),
+ ),
+ 'change .mailpoet_field_button_width': _.partial(
+ this.updateValueAndCall,
+ '.mailpoet_field_button_width_input',
+ _.partial(this.changePixelField, 'styles.block.width').bind(this),
+ ),
+ 'input .mailpoet_field_button_width_input': _.partial(
+ this.updateValueAndCall,
+ '.mailpoet_field_button_width',
+ _.partial(this.changePixelField, 'styles.block.width').bind(this),
+ ),
- 'input .mailpoet_field_button_line_height': _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, 'styles.block.lineHeight').bind(this)),
- 'change .mailpoet_field_button_line_height': _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, 'styles.block.lineHeight').bind(this)),
- 'input .mailpoet_field_button_line_height_input': _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height', _.partial(this.changePixelField, 'styles.block.lineHeight').bind(this)),
+ 'input .mailpoet_field_button_line_height': _.partial(
+ this.updateValueAndCall,
+ '.mailpoet_field_button_line_height_input',
+ _.partial(this.changePixelField, 'styles.block.lineHeight').bind(this),
+ ),
+ 'change .mailpoet_field_button_line_height': _.partial(
+ this.updateValueAndCall,
+ '.mailpoet_field_button_line_height_input',
+ _.partial(this.changePixelField, 'styles.block.lineHeight').bind(this),
+ ),
+ 'input .mailpoet_field_button_line_height_input': _.partial(
+ this.updateValueAndCall,
+ '.mailpoet_field_button_line_height',
+ _.partial(this.changePixelField, 'styles.block.lineHeight').bind(this),
+ ),
'click .mailpoet_field_button_replace_all_styles': 'applyToAll',
'click .mailpoet_done_editing': 'close',
};
},
templateContext: function () {
- return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
- availableStyles: App.getAvailableStyles().toJSON(),
- renderOptions: this.renderOptions,
- });
+ return _.extend(
+ {},
+ base.BlockView.prototype.templateContext.apply(this, arguments),
+ {
+ availableStyles: App.getAvailableStyles().toJSON(),
+ renderOptions: this.renderOptions,
+ },
+ );
},
applyToAll: function () {
- App.getChannel().trigger('replaceAllButtonStyles', _.pick(this.model.toJSON(), 'styles', 'type'));
+ App.getChannel().trigger(
+ 'replaceAllButtonStyles',
+ _.pick(this.model.toJSON(), 'styles', 'type'),
+ );
},
updateValueAndCall: function (fieldToUpdate, callable, event) {
this.$(fieldToUpdate).val(jQuery(event.target).val());
@@ -111,14 +206,16 @@ Module.ButtonBlockSettingsView = base.BlockSettingsView.extend({
var checked = !!jQuery(event.target).prop('checked');
this.model.set(
'styles.block.fontWeight',
- (checked) ? jQuery(event.target).val() : 'normal'
+ checked ? jQuery(event.target).val() : 'normal',
);
},
});
Module.ButtonWidgetView = base.WidgetView.extend({
id: 'automation_editor_block_button',
- getTemplate: function () { return window.templates.buttonInsertion; },
+ getTemplate: function () {
+ return window.templates.buttonInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/container.js b/mailpoet/assets/js/src/newsletter_editor/blocks/container.js
index 0885a8703f..e8969c20c6 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/container.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/container.js
@@ -18,7 +18,9 @@ var BlockCollection;
BlockCollection = Backbone.Collection.extend({
model: base.BlockModel,
initialize: function () {
- this.on('add change remove', function () { App.getChannel().trigger('autoSave'); });
+ this.on('add change remove', function () {
+ App.getChannel().trigger('autoSave');
+ });
},
parse: function (response) {
return _.map(response, function (block) {
@@ -34,26 +36,31 @@ Module.ContainerBlockModel = base.BlockModel.extend({
blocks: BlockCollection,
},
defaults: function () {
- return this._getDefaults({
- type: 'container',
- columnLayout: false,
- orientation: 'vertical',
- image: {
- src: null,
- display: 'scale',
- },
- styles: {
- block: {
- backgroundColor: 'transparent',
+ return this._getDefaults(
+ {
+ type: 'container',
+ columnLayout: false,
+ orientation: 'vertical',
+ image: {
+ src: null,
+ display: 'scale',
},
+ styles: {
+ block: {
+ backgroundColor: 'transparent',
+ },
+ },
+ blocks: new BlockCollection(),
},
- blocks: new BlockCollection(),
- }, App.getConfig().get('blockDefaults.container'));
+ App.getConfig().get('blockDefaults.container'),
+ );
},
_updateDefaults: function updateDefaults() {},
validate: function () {
// Recursively propagate validation checks to blocks in the tree
- var invalidBlock = this.get('blocks').find(function (block) { return !block.isValid(); });
+ var invalidBlock = this.get('blocks').find(function (block) {
+ return !block.isValid();
+ });
if (invalidBlock) {
return invalidBlock.validationError;
}
@@ -61,7 +68,11 @@ Module.ContainerBlockModel = base.BlockModel.extend({
},
parse: function (response) {
// If container has any blocks - add them to a collection
- if (response.type === 'container' && _.has(response, 'blocks') && response.blocks.constructor === Array) {
+ if (
+ response.type === 'container' &&
+ _.has(response, 'blocks') &&
+ response.blocks.constructor === Array
+ ) {
response.blocks = new BlockCollection(response.blocks, {
parse: true,
});
@@ -94,8 +105,12 @@ Module.ContainerBlocksView = Marionette.CollectionView.extend({
renderOptions: newRenderOptions,
};
},
- emptyView: function () { return Module.ContainerBlockEmptyView; },
- emptyViewOptions: function () { return { renderOptions: this.renderOptions }; },
+ emptyView: function () {
+ return Module.ContainerBlockEmptyView;
+ },
+ emptyViewOptions: function () {
+ return { renderOptions: this.renderOptions };
+ },
initialize: function (options) {
this.renderOptions = options.renderOptions;
},
@@ -105,13 +120,18 @@ Module.ContainerBlocksView = Marionette.CollectionView.extend({
onChildviewResizeStop: function onChildviewResizeStart(event) {
this.triggerMethod('resizeStop', event);
},
- removeFocusFromAnyActiveElement: function removeFocusFromAnyActiveElement(event) {
+ removeFocusFromAnyActiveElement: function removeFocusFromAnyActiveElement(
+ event,
+ ) {
var elementClass;
if (!event || !event.target) {
return;
}
elementClass = event.target.getAttribute('class');
- if (!elementClass || elementClass.indexOf('mailpoet_container_horizontal') === -1) {
+ if (
+ !elementClass ||
+ elementClass.indexOf('mailpoet_container_horizontal') === -1
+ ) {
return;
}
document.activeElement.blur();
@@ -125,8 +145,11 @@ Module.ContainerBlockView = base.BlockView.extend({
replaceElement: true,
},
}),
- className: 'mailpoet_block mailpoet_container_block mailpoet_droppable_block mailpoet_droppable_layout_block',
- getTemplate: function () { return window.templates.containerBlock; },
+ className:
+ 'mailpoet_block mailpoet_container_block mailpoet_droppable_block mailpoet_droppable_layout_block',
+ getTemplate: function () {
+ return window.templates.containerBlock;
+ },
events: _.extend({}, base.BlockView.prototype.events, {
'click .mailpoet_newsletter_layer_selector': 'toggleEditingLayer',
}),
@@ -170,8 +193,10 @@ Module.ContainerBlockView = base.BlockView.extend({
// For two and three column layouts display their respective widgets,
// otherwise always default to one column layout widget
if (this.renderOptions.depth === 1) {
- if (this.model.get('blocks').length === 3) return Module.ThreeColumnContainerWidgetView;
- if (this.model.get('blocks').length === 2) return Module.TwoColumnContainerWidgetView;
+ if (this.model.get('blocks').length === 3)
+ return Module.ThreeColumnContainerWidgetView;
+ if (this.model.get('blocks').length === 2)
+ return Module.TwoColumnContainerWidgetView;
}
return Module.OneColumnContainerWidgetView;
},
@@ -194,10 +219,13 @@ Module.ContainerBlockView = base.BlockView.extend({
},
});
this.showChildView('toolsRegion', this.toolsView);
- this.showChildView('blocks', new Module.ContainerBlocksView({
- collection: this.model.get('blocks'),
- renderOptions: this.renderOptions,
- }));
+ this.showChildView(
+ 'blocks',
+ new Module.ContainerBlocksView({
+ collection: this.model.get('blocks'),
+ renderOptions: this.renderOptions,
+ }),
+ );
// TODO: Look for a better way to do this than here
// Sets child container orientation HTML class here,
@@ -205,15 +233,23 @@ Module.ContainerBlockView = base.BlockView.extend({
// and will overwrite existing region element instead
columnLayout = this.model.get('columnLayout');
if (typeof columnLayout === 'string') {
- classIrregular = 'mailpoet_irregular_width_contents_container column_layout_' + columnLayout;
+ classIrregular =
+ 'mailpoet_irregular_width_contents_container column_layout_' +
+ columnLayout;
}
this.$('> .mailpoet_container').attr(
'class',
- 'mailpoet_container mailpoet_container_' + this.model.get('orientation') + ' ' + classIrregular
+ 'mailpoet_container mailpoet_container_' +
+ this.model.get('orientation') +
+ ' ' +
+ classIrregular,
);
},
addHighlight: function addHighlight() {
- if (this.renderOptions.depth !== 1 || this.$el.hasClass('mailpoet_container_layer_active')) {
+ if (
+ this.renderOptions.depth !== 1 ||
+ this.$el.hasClass('mailpoet_container_layer_active')
+ ) {
return;
}
this.$(this.ui.tools).addClass('mailpoet_display_tools');
@@ -221,7 +257,10 @@ Module.ContainerBlockView = base.BlockView.extend({
this.toolsView.triggerMethod('showTools');
},
removeHighlight: function removeHighlight() {
- if (this.renderOptions.depth !== 1 || this.$el.hasClass('mailpoet_container_layer_active')) {
+ if (
+ this.renderOptions.depth !== 1 ||
+ this.$el.hasClass('mailpoet_container_layer_active')
+ ) {
return;
}
this.$(this.ui.tools).removeClass('mailpoet_display_tools');
@@ -230,7 +269,9 @@ Module.ContainerBlockView = base.BlockView.extend({
},
toggleEditingLayer: function (event) {
var that = this;
- var $toggleButton = this.$('> .mailpoet_tools .mailpoet_newsletter_layer_selector');
+ var $toggleButton = this.$(
+ '> .mailpoet_tools .mailpoet_newsletter_layer_selector',
+ );
var $overlay = jQuery('.mailpoet_layer_overlay');
var $container = this.$('> .mailpoet_container');
var disableContainerLayer = function () {
@@ -257,7 +298,9 @@ Module.ContainerBlockView = base.BlockView.extend({
});
Module.ContainerBlockEmptyView = Marionette.View.extend({
- getTemplate: function () { return window.templates.containerEmpty; },
+ getTemplate: function () {
+ return window.templates.containerEmpty;
+ },
initialize: function (options) {
this.renderOptions = _.defaults(options.renderOptions || {}, {});
},
@@ -270,7 +313,9 @@ Module.ContainerBlockEmptyView = Marionette.View.extend({
});
Module.ContainerBlockToolsView = base.BlockToolsView.extend({
- getSettingsView: function () { return Module.ContainerBlockSettingsView; },
+ getSettingsView: function () {
+ return Module.ContainerBlockSettingsView;
+ },
});
Module.ContainerBlockSettingsView = base.BlockSettingsView.extend({
@@ -279,10 +324,15 @@ Module.ContainerBlockSettingsView = base.BlockSettingsView.extend({
onSelect: 'onImageSelect',
},
}),
- getTemplate: function () { return window.templates.containerBlockSettings; },
+ getTemplate: function () {
+ return window.templates.containerBlockSettings;
+ },
events: function () {
return {
- 'change .mailpoet_field_container_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
+ 'change .mailpoet_field_container_background_color': _.partial(
+ this.changeColorField,
+ 'styles.block.backgroundColor',
+ ),
'click .mailpoet_done_editing': 'close',
'change .mailpoet_field_display_type': 'changeDisplayType',
};
@@ -290,7 +340,7 @@ Module.ContainerBlockSettingsView = base.BlockSettingsView.extend({
initialize: function () {
base.BlockSettingsView.prototype.initialize.apply(this, arguments);
this.model.trigger('startEditing');
- this._columnsSettingsView = new (Module.ContainerBlockColumnsSettingsView)({
+ this._columnsSettingsView = new Module.ContainerBlockColumnsSettingsView({
collection: this.model.get('blocks'),
});
},
@@ -306,7 +356,9 @@ Module.ContainerBlockSettingsView = base.BlockSettingsView.extend({
});
Module.ContainerBlockColumnsSettingsView = Marionette.CollectionView.extend({
- childView: function () { return Module.ContainerBlockColumnSettingsView; },
+ childView: function () {
+ return Module.ContainerBlockColumnSettingsView;
+ },
childViewOptions: function (model, index) {
return {
columnIndex: index,
@@ -315,7 +367,9 @@ Module.ContainerBlockColumnsSettingsView = Marionette.CollectionView.extend({
});
Module.ContainerBlockColumnSettingsView = Marionette.View.extend({
- getTemplate: function () { return window.templates.containerBlockColumnSettings; },
+ getTemplate: function () {
+ return window.templates.containerBlockColumnSettings;
+ },
initialize: function (options) {
this.columnNumber = (options.columnIndex || 0) + 1;
},
@@ -328,17 +382,18 @@ Module.ContainerBlockColumnSettingsView = Marionette.View.extend({
});
Module.OneColumnContainerWidgetView = base.WidgetView.extend({
- className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
- getTemplate: function () { return window.templates.oneColumnLayoutInsertion; },
+ className:
+ base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
+ getTemplate: function () {
+ return window.templates.oneColumnLayoutInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
drop: function () {
return new Module.ContainerBlockModel({
orientation: 'horizontal',
- blocks: [
- new Module.ContainerBlockModel(),
- ],
+ blocks: [new Module.ContainerBlockModel()],
});
},
},
@@ -346,8 +401,11 @@ Module.OneColumnContainerWidgetView = base.WidgetView.extend({
});
Module.TwoColumnContainerWidgetView = base.WidgetView.extend({
- className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
- getTemplate: function () { return window.templates.twoColumnLayoutInsertion; },
+ className:
+ base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
+ getTemplate: function () {
+ return window.templates.twoColumnLayoutInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
@@ -365,8 +423,11 @@ Module.TwoColumnContainerWidgetView = base.WidgetView.extend({
});
Module.ThreeColumnContainerWidgetView = base.WidgetView.extend({
- className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
- getTemplate: function () { return window.templates.threeColumnLayoutInsertion; },
+ className:
+ base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
+ getTemplate: function () {
+ return window.templates.threeColumnLayoutInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
@@ -385,8 +446,11 @@ Module.ThreeColumnContainerWidgetView = base.WidgetView.extend({
});
Module.TwoColumn12ContainerWidgetView = base.WidgetView.extend({
- className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
- getTemplate: function () { return window.templates.twoColumn12LayoutInsertion; },
+ className:
+ base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
+ getTemplate: function () {
+ return window.templates.twoColumn12LayoutInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
@@ -406,8 +470,11 @@ Module.TwoColumn12ContainerWidgetView = base.WidgetView.extend({
});
Module.TwoColumn21ContainerWidgetView = base.WidgetView.extend({
- className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
- getTemplate: function () { return window.templates.twoColumn21LayoutInsertion; },
+ className:
+ base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
+ getTemplate: function () {
+ return window.templates.twoColumn21LayoutInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/divider.js b/mailpoet/assets/js/src/newsletter_editor/blocks/divider.js
index e85454e76c..a897e071ad 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/divider.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/divider.js
@@ -11,55 +11,82 @@ var base = BaseBlock;
Module.DividerBlockModel = base.BlockModel.extend({
defaults: function defaults() {
- return this._getDefaults({
- type: 'divider',
- styles: {
- block: {
- backgroundColor: 'transparent',
- padding: '12px',
- borderStyle: 'solid',
- borderWidth: '1px',
- borderColor: '#000000',
+ return this._getDefaults(
+ {
+ type: 'divider',
+ styles: {
+ block: {
+ backgroundColor: 'transparent',
+ padding: '12px',
+ borderStyle: 'solid',
+ borderWidth: '1px',
+ borderColor: '#000000',
+ },
},
},
- }, App.getConfig().get('blockDefaults.divider'));
+ App.getConfig().get('blockDefaults.divider'),
+ );
},
});
Module.DividerBlockView = base.BlockView.extend({
className: 'mailpoet_block mailpoet_divider_block mailpoet_droppable_block',
- getTemplate: function getTemplate() { return window.templates.dividerBlock; },
+ getTemplate: function getTemplate() {
+ return window.templates.dividerBlock;
+ },
modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'),
- behaviors: _.defaults({
- ResizableBehavior: {
- elementSelector: '.mailpoet_content',
- resizeHandleSelector: '.mailpoet_resize_handle',
- transformationFunction: function transformationFunction(y) { return y / 2; },
- minLength: 0, // TODO: Move this number to editor configuration
- modelField: 'styles.block.padding',
+ behaviors: _.defaults(
+ {
+ ResizableBehavior: {
+ elementSelector: '.mailpoet_content',
+ resizeHandleSelector: '.mailpoet_resize_handle',
+ transformationFunction: function transformationFunction(y) {
+ return y / 2;
+ },
+ minLength: 0, // TODO: Move this number to editor configuration
+ modelField: 'styles.block.padding',
+ },
+ ShowSettingsBehavior: {
+ ignoreFrom: '.mailpoet_resize_handle',
+ },
},
- ShowSettingsBehavior: {
- ignoreFrom: '.mailpoet_resize_handle',
- },
- }, base.BlockView.prototype.behaviors),
- onDragSubstituteBy: function onDragSubstituteBy() { return Module.DividerWidgetView; },
+ base.BlockView.prototype.behaviors,
+ ),
+ onDragSubstituteBy: function onDragSubstituteBy() {
+ return Module.DividerWidgetView;
+ },
initialize: function initialize() {
var that = this;
base.BlockView.prototype.initialize.apply(this, arguments);
// Listen for attempts to change all dividers in one go
this._replaceDividerHandler = function replaceDividerHandler(data) {
- that.model.set(data); that.model.trigger('applyToAll');
+ that.model.set(data);
+ that.model.trigger('applyToAll');
};
App.getChannel().on('replaceAllDividers', this._replaceDividerHandler);
- this.listenTo(this.model, 'change:src change:styles.block.backgroundColor change:styles.block.borderStyle change:styles.block.borderWidth change:styles.block.borderColor applyToAll', this.render);
- this.listenTo(this.model, 'change:styles.block.padding', this.changePadding);
+ this.listenTo(
+ this.model,
+ 'change:src change:styles.block.backgroundColor change:styles.block.borderStyle change:styles.block.borderWidth change:styles.block.borderColor applyToAll',
+ this.render,
+ );
+ this.listenTo(
+ this.model,
+ 'change:styles.block.padding',
+ this.changePadding,
+ );
},
templateContext: function templateContext() {
- return _.extend({
- totalHeight: (parseInt(this.model.get('styles.block.padding'), 10) * 2) + parseInt(this.model.get('styles.block.borderWidth'), 10) + 'px',
- }, base.BlockView.prototype.templateContext.apply(this));
+ return _.extend(
+ {
+ totalHeight:
+ parseInt(this.model.get('styles.block.padding'), 10) * 2 +
+ parseInt(this.model.get('styles.block.borderWidth'), 10) +
+ 'px',
+ },
+ base.BlockView.prototype.templateContext.apply(this),
+ );
},
onRender: function onRender() {
this.toolsView = new Module.DividerBlockToolsView({ model: this.model });
@@ -70,28 +97,60 @@ Module.DividerBlockView = base.BlockView.extend({
this.stopListening(this.model);
},
changePadding: function changePadding() {
- this.$('.mailpoet_content').css('padding-top', this.model.get('styles.block.padding'));
- this.$('.mailpoet_content').css('padding-bottom', this.model.get('styles.block.padding'));
- this.$('.mailpoet_resize_handle_text').text((parseInt(this.model.get('styles.block.padding'), 10) * 2) + parseInt(this.model.get('styles.block.borderWidth'), 10) + 'px');
+ this.$('.mailpoet_content').css(
+ 'padding-top',
+ this.model.get('styles.block.padding'),
+ );
+ this.$('.mailpoet_content').css(
+ 'padding-bottom',
+ this.model.get('styles.block.padding'),
+ );
+ this.$('.mailpoet_resize_handle_text').text(
+ parseInt(this.model.get('styles.block.padding'), 10) * 2 +
+ parseInt(this.model.get('styles.block.borderWidth'), 10) +
+ 'px',
+ );
},
});
Module.DividerBlockToolsView = base.BlockToolsView.extend({
- getSettingsView: function getSettingsView() { return Module.DividerBlockSettingsView; },
+ getSettingsView: function getSettingsView() {
+ return Module.DividerBlockSettingsView;
+ },
});
Module.DividerBlockSettingsView = base.BlockSettingsView.extend({
- getTemplate: function getTemplate() { return window.templates.dividerBlockSettings; },
+ getTemplate: function getTemplate() {
+ return window.templates.dividerBlockSettings;
+ },
events: function events() {
return {
'click .mailpoet_field_divider_style': 'changeStyle',
- 'input .mailpoet_field_divider_border_width': _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
- 'change .mailpoet_field_divider_border_width': _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
- 'input .mailpoet_field_divider_border_width_input': _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width', _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this)),
+ 'input .mailpoet_field_divider_border_width': _.partial(
+ this.updateValueAndCall,
+ '.mailpoet_field_divider_border_width_input',
+ _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this),
+ ),
+ 'change .mailpoet_field_divider_border_width': _.partial(
+ this.updateValueAndCall,
+ '.mailpoet_field_divider_border_width_input',
+ _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this),
+ ),
+ 'input .mailpoet_field_divider_border_width_input': _.partial(
+ this.updateValueAndCall,
+ '.mailpoet_field_divider_border_width',
+ _.partial(this.changePixelField, 'styles.block.borderWidth').bind(this),
+ ),
- 'change .mailpoet_field_divider_border_color': _.partial(this.changeColorField, 'styles.block.borderColor'),
- 'change .mailpoet_field_divider_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
+ 'change .mailpoet_field_divider_border_color': _.partial(
+ this.changeColorField,
+ 'styles.block.borderColor',
+ ),
+ 'change .mailpoet_field_divider_background_color': _.partial(
+ this.changeColorField,
+ 'styles.block.backgroundColor',
+ ),
'click .mailpoet_button_divider_apply_to_all': 'applyToAll',
'click .mailpoet_done_editing': 'close',
};
@@ -102,24 +161,39 @@ Module.DividerBlockSettingsView = base.BlockSettingsView.extend({
};
},
templateContext: function templateContext() {
- return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
- availableStyles: App.getAvailableStyles().toJSON(),
- renderOptions: this.renderOptions,
- });
+ return _.extend(
+ {},
+ base.BlockView.prototype.templateContext.apply(this, arguments),
+ {
+ availableStyles: App.getAvailableStyles().toJSON(),
+ renderOptions: this.renderOptions,
+ },
+ );
},
changeStyle: function changeStyle(event) {
var style = jQuery(event.currentTarget).data('style');
this.model.set('styles.block.borderStyle', style);
- this.$('.mailpoet_field_divider_style').removeClass('mailpoet_active_divider_style');
- this.$('.mailpoet_field_divider_style[data-style="' + style + '"]').addClass('mailpoet_active_divider_style');
+ this.$('.mailpoet_field_divider_style').removeClass(
+ 'mailpoet_active_divider_style',
+ );
+ this.$(
+ '.mailpoet_field_divider_style[data-style="' + style + '"]',
+ ).addClass('mailpoet_active_divider_style');
},
repaintDividerStyleOptions: function repaintDividerStyleOptions() {
- this.$('.mailpoet_field_divider_style > div').css('border-top-color', this.model.get('styles.block.borderColor'));
+ this.$('.mailpoet_field_divider_style > div').css(
+ 'border-top-color',
+ this.model.get('styles.block.borderColor'),
+ );
},
applyToAll: function applyToAll() {
App.getChannel().trigger('replaceAllDividers', this.model.toJSON());
},
- updateValueAndCall: function updateValueAndCall(fieldToUpdate, callable, event) {
+ updateValueAndCall: function updateValueAndCall(
+ fieldToUpdate,
+ callable,
+ event,
+ ) {
this.$(fieldToUpdate).val(jQuery(event.target).val());
callable(event);
},
@@ -127,7 +201,9 @@ Module.DividerBlockSettingsView = base.BlockSettingsView.extend({
Module.DividerWidgetView = base.WidgetView.extend({
id: 'automation_editor_block_divider',
- getTemplate: function getTemplate() { return window.templates.dividerInsertion; },
+ getTemplate: function getTemplate() {
+ return window.templates.dividerInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/footer.js b/mailpoet/assets/js/src/newsletter_editor/blocks/footer.js
index 0af9c62ea4..c7f68079f0 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/footer.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/footer.js
@@ -11,25 +11,28 @@ var base = BaseBlock;
Module.FooterBlockModel = base.BlockModel.extend({
defaults: function defaults() {
- return this._getDefaults({
- type: 'footer',
- text: 'Unsubscribe | Manage subscription Add your postal address here! ',
- styles: {
- block: {
- backgroundColor: 'transparent',
- },
- text: {
- fontColor: '#000000',
- fontFamily: 'Arial',
- fontSize: '12px',
- textAlign: 'center',
- },
- link: {
- fontColor: '#0000ff',
- textDecoration: 'none',
+ return this._getDefaults(
+ {
+ type: 'footer',
+ text: 'Unsubscribe | Manage subscription Add your postal address here! ',
+ styles: {
+ block: {
+ backgroundColor: 'transparent',
+ },
+ text: {
+ fontColor: '#000000',
+ fontFamily: 'Arial',
+ fontSize: '12px',
+ textAlign: 'center',
+ },
+ link: {
+ fontColor: '#0000ff',
+ textDecoration: 'none',
+ },
},
},
- }, App.getConfig().get('blockDefaults.footer'));
+ App.getConfig().get('blockDefaults.footer'),
+ );
},
_updateDefaults: function updateDefaults() {
App.getConfig().set('blockDefaults.footer', _.omit(this.toJSON(), 'text'));
@@ -38,21 +41,31 @@ Module.FooterBlockModel = base.BlockModel.extend({
Module.FooterBlockView = base.BlockView.extend({
className: 'mailpoet_block mailpoet_footer_block mailpoet_droppable_block',
- getTemplate: function getTemplate() { return window.templates.footerBlock; },
- modelEvents: _.extend({
- 'change:styles.block.backgroundColor change:styles.text.fontColor change:styles.text.fontFamily change:styles.text.fontSize change:styles.text.textAlign change:styles.link.fontColor change:styles.link.textDecoration': 'render',
- }, _.omit(base.BlockView.prototype.modelEvents, 'change')),
+ getTemplate: function getTemplate() {
+ return window.templates.footerBlock;
+ },
+ modelEvents: _.extend(
+ {
+ 'change:styles.block.backgroundColor change:styles.text.fontColor change:styles.text.fontFamily change:styles.text.fontSize change:styles.text.textAlign change:styles.link.fontColor change:styles.link.textDecoration':
+ 'render',
+ },
+ _.omit(base.BlockView.prototype.modelEvents, 'change'),
+ ),
behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
TextEditorBehavior: {
configurationFilter: function configurationFilter(originalSettings) {
return _.extend({}, originalSettings, {
mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),
- mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle'),
+ mailpoet_shortcodes_window_title: MailPoet.I18n.t(
+ 'shortcodesWindowTitle',
+ ),
});
},
},
}),
- onDragSubstituteBy: function onDragSubstituteBy() { return Module.FooterWidgetView; },
+ onDragSubstituteBy: function onDragSubstituteBy() {
+ return Module.FooterWidgetView;
+ },
onRender: function onRender() {
this.toolsView = new Module.FooterBlockToolsView({ model: this.model });
this.showChildView('toolsRegion', this.toolsView);
@@ -71,35 +84,68 @@ Module.FooterBlockView = base.BlockView.extend({
});
Module.FooterBlockToolsView = base.BlockToolsView.extend({
- getSettingsView: function getSettingsView() { return Module.FooterBlockSettingsView; },
+ getSettingsView: function getSettingsView() {
+ return Module.FooterBlockSettingsView;
+ },
});
Module.FooterBlockSettingsView = base.BlockSettingsView.extend({
- getTemplate: function getTemplate() { return window.templates.footerBlockSettings; },
+ getTemplate: function getTemplate() {
+ return window.templates.footerBlockSettings;
+ },
events: function events() {
return {
- 'change .mailpoet_field_footer_text_color': _.partial(this.changeColorField, 'styles.text.fontColor'),
- 'change .mailpoet_field_footer_text_font_family': _.partial(this.changeField, 'styles.text.fontFamily'),
- 'change .mailpoet_field_footer_text_size': _.partial(this.changeField, 'styles.text.fontSize'),
- 'change #mailpoet_field_footer_link_color': _.partial(this.changeColorField, 'styles.link.fontColor'),
- 'change #mailpoet_field_footer_link_underline': function linkUnderline(event) {
- this.model.set('styles.link.textDecoration', (event.target.checked) ? event.target.value : 'none');
+ 'change .mailpoet_field_footer_text_color': _.partial(
+ this.changeColorField,
+ 'styles.text.fontColor',
+ ),
+ 'change .mailpoet_field_footer_text_font_family': _.partial(
+ this.changeField,
+ 'styles.text.fontFamily',
+ ),
+ 'change .mailpoet_field_footer_text_size': _.partial(
+ this.changeField,
+ 'styles.text.fontSize',
+ ),
+ 'change #mailpoet_field_footer_link_color': _.partial(
+ this.changeColorField,
+ 'styles.link.fontColor',
+ ),
+ 'change #mailpoet_field_footer_link_underline': function linkUnderline(
+ event,
+ ) {
+ this.model.set(
+ 'styles.link.textDecoration',
+ event.target.checked ? event.target.value : 'none',
+ );
},
- 'change .mailpoet_field_footer_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
- 'change .mailpoet_field_footer_alignment': _.partial(this.changeField, 'styles.text.textAlign'),
+ 'change .mailpoet_field_footer_background_color': _.partial(
+ this.changeColorField,
+ 'styles.block.backgroundColor',
+ ),
+ 'change .mailpoet_field_footer_alignment': _.partial(
+ this.changeField,
+ 'styles.text.textAlign',
+ ),
'click .mailpoet_done_editing': 'close',
};
},
templateContext: function templateContext() {
- return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
- availableStyles: App.getAvailableStyles().toJSON(),
- });
+ return _.extend(
+ {},
+ base.BlockView.prototype.templateContext.apply(this, arguments),
+ {
+ availableStyles: App.getAvailableStyles().toJSON(),
+ },
+ );
},
});
Module.FooterWidgetView = base.WidgetView.extend({
id: 'automation_editor_block_footer',
- getTemplate: function getTemplate() { return window.templates.footerInsertion; },
+ getTemplate: function getTemplate() {
+ return window.templates.footerInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/header.js b/mailpoet/assets/js/src/newsletter_editor/blocks/header.js
index 20301f22ff..02399c4f5f 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/header.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/header.js
@@ -11,25 +11,28 @@ var base = BaseBlock;
Module.HeaderBlockModel = base.BlockModel.extend({
defaults: function defaults() {
- return this._getDefaults({
- type: 'header',
- text: 'View this in your browser ',
- styles: {
- block: {
- backgroundColor: 'transparent',
- },
- text: {
- fontColor: '#000000',
- fontFamily: 'Arial',
- fontSize: '12px',
- textAlign: 'center',
- },
- link: {
- fontColor: '#0000ff',
- textDecoration: 'underline',
+ return this._getDefaults(
+ {
+ type: 'header',
+ text: 'View this in your browser ',
+ styles: {
+ block: {
+ backgroundColor: 'transparent',
+ },
+ text: {
+ fontColor: '#000000',
+ fontFamily: 'Arial',
+ fontSize: '12px',
+ textAlign: 'center',
+ },
+ link: {
+ fontColor: '#0000ff',
+ textDecoration: 'underline',
+ },
},
},
- }, App.getConfig().get('blockDefaults.header'));
+ App.getConfig().get('blockDefaults.header'),
+ );
},
_updateDefaults: function updateDefaults() {
App.getConfig().set('blockDefaults.header', _.omit(this.toJSON(), 'text'));
@@ -38,21 +41,31 @@ Module.HeaderBlockModel = base.BlockModel.extend({
Module.HeaderBlockView = base.BlockView.extend({
className: 'mailpoet_block mailpoet_header_block mailpoet_droppable_block',
- getTemplate: function getTemplate() { return window.templates.headerBlock; },
- modelEvents: _.extend({
- 'change:styles.block.backgroundColor change:styles.text.fontColor change:styles.text.fontFamily change:styles.text.fontSize change:styles.text.textAlign change:styles.link.fontColor change:styles.link.textDecoration': 'render',
- }, _.omit(base.BlockView.prototype.modelEvents, 'change')),
+ getTemplate: function getTemplate() {
+ return window.templates.headerBlock;
+ },
+ modelEvents: _.extend(
+ {
+ 'change:styles.block.backgroundColor change:styles.text.fontColor change:styles.text.fontFamily change:styles.text.fontSize change:styles.text.textAlign change:styles.link.fontColor change:styles.link.textDecoration':
+ 'render',
+ },
+ _.omit(base.BlockView.prototype.modelEvents, 'change'),
+ ),
behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
TextEditorBehavior: {
configurationFilter: function configurationFilter(originalSettings) {
return _.extend({}, originalSettings, {
mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),
- mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle'),
+ mailpoet_shortcodes_window_title: MailPoet.I18n.t(
+ 'shortcodesWindowTitle',
+ ),
});
},
},
}),
- onDragSubstituteBy: function onDragSubstituteBy() { return Module.HeaderWidgetView; },
+ onDragSubstituteBy: function onDragSubstituteBy() {
+ return Module.HeaderWidgetView;
+ },
onRender: function onRender() {
this.toolsView = new Module.HeaderBlockToolsView({ model: this.model });
this.showChildView('toolsRegion', this.toolsView);
@@ -71,35 +84,68 @@ Module.HeaderBlockView = base.BlockView.extend({
});
Module.HeaderBlockToolsView = base.BlockToolsView.extend({
- getSettingsView: function getSettingsView() { return Module.HeaderBlockSettingsView; },
+ getSettingsView: function getSettingsView() {
+ return Module.HeaderBlockSettingsView;
+ },
});
Module.HeaderBlockSettingsView = base.BlockSettingsView.extend({
- getTemplate: function getTemplate() { return window.templates.headerBlockSettings; },
+ getTemplate: function getTemplate() {
+ return window.templates.headerBlockSettings;
+ },
events: function events() {
return {
- 'change .mailpoet_field_header_text_color': _.partial(this.changeColorField, 'styles.text.fontColor'),
- 'change .mailpoet_field_header_text_font_family': _.partial(this.changeField, 'styles.text.fontFamily'),
- 'change .mailpoet_field_header_text_size': _.partial(this.changeField, 'styles.text.fontSize'),
- 'change #mailpoet_field_header_link_color': _.partial(this.changeColorField, 'styles.link.fontColor'),
- 'change #mailpoet_field_header_link_underline': function linkUnderline(event) {
- this.model.set('styles.link.textDecoration', (event.target.checked) ? event.target.value : 'none');
+ 'change .mailpoet_field_header_text_color': _.partial(
+ this.changeColorField,
+ 'styles.text.fontColor',
+ ),
+ 'change .mailpoet_field_header_text_font_family': _.partial(
+ this.changeField,
+ 'styles.text.fontFamily',
+ ),
+ 'change .mailpoet_field_header_text_size': _.partial(
+ this.changeField,
+ 'styles.text.fontSize',
+ ),
+ 'change #mailpoet_field_header_link_color': _.partial(
+ this.changeColorField,
+ 'styles.link.fontColor',
+ ),
+ 'change #mailpoet_field_header_link_underline': function linkUnderline(
+ event,
+ ) {
+ this.model.set(
+ 'styles.link.textDecoration',
+ event.target.checked ? event.target.value : 'none',
+ );
},
- 'change .mailpoet_field_header_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
- 'change .mailpoet_field_header_alignment': _.partial(this.changeField, 'styles.text.textAlign'),
+ 'change .mailpoet_field_header_background_color': _.partial(
+ this.changeColorField,
+ 'styles.block.backgroundColor',
+ ),
+ 'change .mailpoet_field_header_alignment': _.partial(
+ this.changeField,
+ 'styles.text.textAlign',
+ ),
'click .mailpoet_done_editing': 'close',
};
},
templateContext: function templateContext() {
- return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
- availableStyles: App.getAvailableStyles().toJSON(),
- });
+ return _.extend(
+ {},
+ base.BlockView.prototype.templateContext.apply(this, arguments),
+ {
+ availableStyles: App.getAvailableStyles().toJSON(),
+ },
+ );
},
});
Module.HeaderWidgetView = base.WidgetView.extend({
id: 'automation_editor_block_header',
- getTemplate: function getTemplate() { return window.templates.headerInsertion; },
+ getTemplate: function getTemplate() {
+ return window.templates.headerInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/image.js b/mailpoet/assets/js/src/newsletter_editor/blocks/image.js
index 94a5dc6381..3b8ccac0c7 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/image.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/image.js
@@ -14,32 +14,42 @@ var ImageWidgetView;
Module.ImageBlockModel = base.BlockModel.extend({
defaults: function () {
- return this._getDefaults({
- type: 'image',
- link: '',
- src: '',
- alt: 'An image of...',
- fullWidth: true, // true | false
- width: '64px',
- height: '64px',
- styles: {
- block: {
- textAlign: 'center',
+ return this._getDefaults(
+ {
+ type: 'image',
+ link: '',
+ src: '',
+ alt: 'An image of...',
+ fullWidth: true, // true | false
+ width: '64px',
+ height: '64px',
+ styles: {
+ block: {
+ textAlign: 'center',
+ },
},
},
- }, App.getConfig().get('blockDefaults.image'));
+ App.getConfig().get('blockDefaults.image'),
+ );
},
_updateDefaults: function () {},
});
Module.ImageBlockView = base.BlockView.extend({
className: 'mailpoet_block mailpoet_image_block mailpoet_droppable_block',
- getTemplate: function () { return window.templates.imageBlock; },
- onDragSubstituteBy: function () { return Module.ImageWidgetView; },
+ getTemplate: function () {
+ return window.templates.imageBlock;
+ },
+ onDragSubstituteBy: function () {
+ return Module.ImageWidgetView;
+ },
templateContext: function () {
- return _.extend({
- imageMissingSrc: App.getConfig().get('urls.imageMissing'),
- }, base.BlockView.prototype.templateContext.apply(this));
+ return _.extend(
+ {
+ imageMissingSrc: App.getConfig().get('urls.imageMissing'),
+ },
+ base.BlockView.prototype.templateContext.apply(this),
+ );
},
behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
ResizableBehavior: {
@@ -81,7 +91,9 @@ Module.ImageBlockView = base.BlockView.extend({
});
Module.ImageBlockToolsView = base.BlockToolsView.extend({
- getSettingsView: function () { return Module.ImageBlockSettingsView; },
+ getSettingsView: function () {
+ return Module.ImageBlockSettingsView;
+ },
});
Module.ImageBlockSettingsView = base.BlockSettingsView.extend({
@@ -91,28 +103,57 @@ Module.ImageBlockSettingsView = base.BlockSettingsView.extend({
},
}),
onRender: function () {
- MailPoet.helpTooltip.show(document.getElementById('tooltip-designer-full-width'), {
- tooltipId: 'tooltip-editor-full-width',
- tooltip: MailPoet.I18n.t('helpTooltipDesignerFullWidth'),
- place: 'top',
- });
- MailPoet.helpTooltip.show(document.getElementById('tooltip-designer-ideal-width'), {
- tooltipId: 'tooltip-editor-ideal-width',
- tooltip: MailPoet.I18n.t('helpTooltipDesignerIdealWidth'),
- place: 'bottom',
- });
+ MailPoet.helpTooltip.show(
+ document.getElementById('tooltip-designer-full-width'),
+ {
+ tooltipId: 'tooltip-editor-full-width',
+ tooltip: MailPoet.I18n.t('helpTooltipDesignerFullWidth'),
+ place: 'top',
+ },
+ );
+ MailPoet.helpTooltip.show(
+ document.getElementById('tooltip-designer-ideal-width'),
+ {
+ tooltipId: 'tooltip-editor-ideal-width',
+ tooltip: MailPoet.I18n.t('helpTooltipDesignerIdealWidth'),
+ place: 'bottom',
+ },
+ );
+ },
+ getTemplate: function () {
+ return window.templates.imageBlockSettings;
},
- getTemplate: function () { return window.templates.imageBlockSettings; },
events: function () {
return {
'input .mailpoet_field_image_link': _.partial(this.changeField, 'link'),
- 'input .mailpoet_field_image_alt_text': _.partial(this.changeField, 'alt'),
- 'change .mailpoet_field_image_full_width': _.partial(this.changeBoolCheckboxField, 'fullWidth'),
- 'change .mailpoet_field_image_alignment': _.partial(this.changeField, 'styles.block.textAlign'),
+ 'input .mailpoet_field_image_alt_text': _.partial(
+ this.changeField,
+ 'alt',
+ ),
+ 'change .mailpoet_field_image_full_width': _.partial(
+ this.changeBoolCheckboxField,
+ 'fullWidth',
+ ),
+ 'change .mailpoet_field_image_alignment': _.partial(
+ this.changeField,
+ 'styles.block.textAlign',
+ ),
'click .mailpoet_done_editing': 'close',
- 'input .mailpoet_field_image_width': _.partial(this.updateValueAndCall, '.mailpoet_field_image_width_input', _.partial(this.changePixelField, 'width').bind(this)),
- 'change .mailpoet_field_image_width': _.partial(this.updateValueAndCall, '.mailpoet_field_image_width_input', _.partial(this.changePixelField, 'width').bind(this)),
- 'input .mailpoet_field_image_width_input': _.partial(this.updateValueAndCall, '.mailpoet_field_image_width', _.partial(this.changePixelField, 'width').bind(this)),
+ 'input .mailpoet_field_image_width': _.partial(
+ this.updateValueAndCall,
+ '.mailpoet_field_image_width_input',
+ _.partial(this.changePixelField, 'width').bind(this),
+ ),
+ 'change .mailpoet_field_image_width': _.partial(
+ this.updateValueAndCall,
+ '.mailpoet_field_image_width_input',
+ _.partial(this.changePixelField, 'width').bind(this),
+ ),
+ 'input .mailpoet_field_image_width_input': _.partial(
+ this.updateValueAndCall,
+ '.mailpoet_field_image_width',
+ _.partial(this.changePixelField, 'width').bind(this),
+ ),
};
},
modelEvents: function () {
@@ -148,7 +189,9 @@ Module.ImageBlockSettingsView = base.BlockSettingsView.extend({
ImageWidgetView = base.WidgetView.extend({
id: 'automation_editor_block_image',
- getTemplate: function () { return window.templates.imageInsertion; },
+ getTemplate: function () {
+ return window.templates.imageInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
@@ -156,7 +199,9 @@ ImageWidgetView = base.WidgetView.extend({
return new Module.ImageBlockModel();
},
onDrop: function (options) {
- options.droppedView.triggerMethod('showSettings', { showImageManager: true });
+ options.droppedView.triggerMethod('showSettings', {
+ showImageManager: true,
+ });
},
},
},
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/posts.js b/mailpoet/assets/js/src/newsletter_editor/blocks/posts.js
index dcf36bba04..18d9ed82e4 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/posts.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/posts.js
@@ -33,44 +33,52 @@ var PostSelectionSettingsView;
var PostsSelectionCollectionView;
Module.PostsBlockModel = base.BlockModel.extend({
- stale: ['_selectedPosts', '_availablePosts', '_transformedPosts', '_featuredImagePosition'],
+ stale: [
+ '_selectedPosts',
+ '_availablePosts',
+ '_transformedPosts',
+ '_featuredImagePosition',
+ ],
defaults: function () {
- return this._getDefaults({
- type: 'posts',
- withLayout: true,
- amount: '10',
- offset: 0,
- contentType: 'post', // 'post'|'page'|'mailpoet_page'
- postStatus: 'publish', // 'draft'|'pending'|'private'|'publish'|'future'
- terms: [], // List of category and tag objects
- search: '', // Search keyword term
- inclusionType: 'include', // 'include'|'exclude'
- displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly'
- titleFormat: 'h1', // 'h1'|'h2'|'h3'|'ul'
- titleAlignment: 'left', // 'left'|'center'|'right'
- titleIsLink: false, // false|true
- imageFullWidth: false, // true|false
- titlePosition: 'abovePost', // 'abovePost'|'aboveExcerpt'
- featuredImagePosition: 'centered', // 'centered'|'right'|'left'|'alternate'|'none'
- fullPostFeaturedImagePosition: 'none', // 'centered'|'left'|'right'|'alternate'|'none'
- showAuthor: 'no', // 'no'|'aboveText'|'belowText'
- authorPrecededBy: 'Author:',
- showCategories: 'no', // 'no'|'aboveText'|'belowText'
- categoriesPrecededBy: 'Categories:',
- readMoreType: 'link', // 'link'|'button'
- readMoreText: 'Read more', // 'link'|'button'
- readMoreButton: {
- text: 'Read more',
- url: '[postLink]',
+ return this._getDefaults(
+ {
+ type: 'posts',
+ withLayout: true,
+ amount: '10',
+ offset: 0,
+ contentType: 'post', // 'post'|'page'|'mailpoet_page'
+ postStatus: 'publish', // 'draft'|'pending'|'private'|'publish'|'future'
+ terms: [], // List of category and tag objects
+ search: '', // Search keyword term
+ inclusionType: 'include', // 'include'|'exclude'
+ displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly'
+ titleFormat: 'h1', // 'h1'|'h2'|'h3'|'ul'
+ titleAlignment: 'left', // 'left'|'center'|'right'
+ titleIsLink: false, // false|true
+ imageFullWidth: false, // true|false
+ titlePosition: 'abovePost', // 'abovePost'|'aboveExcerpt'
+ featuredImagePosition: 'centered', // 'centered'|'right'|'left'|'alternate'|'none'
+ fullPostFeaturedImagePosition: 'none', // 'centered'|'left'|'right'|'alternate'|'none'
+ showAuthor: 'no', // 'no'|'aboveText'|'belowText'
+ authorPrecededBy: 'Author:',
+ showCategories: 'no', // 'no'|'aboveText'|'belowText'
+ categoriesPrecededBy: 'Categories:',
+ readMoreType: 'link', // 'link'|'button'
+ readMoreText: 'Read more', // 'link'|'button'
+ readMoreButton: {
+ text: 'Read more',
+ url: '[postLink]',
+ },
+ sortBy: 'newest', // 'newest'|'oldest',
+ showDivider: true, // true|false
+ divider: {},
+ _selectedPosts: [],
+ _availablePosts: [],
+ _transformedPosts: new (App.getBlockTypeModel('container'))(),
+ _featuredImagePosition: 'none', // 'centered'|'left'|'right'|'alternate'|'none'
},
- sortBy: 'newest', // 'newest'|'oldest',
- showDivider: true, // true|false
- divider: {},
- _selectedPosts: [],
- _availablePosts: [],
- _transformedPosts: new (App.getBlockTypeModel('container'))(),
- _featuredImagePosition: 'none', // 'centered'|'left'|'right'|'alternate'|'none'
- }, App.getConfig().get('blockDefaults.posts'));
+ App.getConfig().get('blockDefaults.posts'),
+ );
},
relations: function () {
return {
@@ -85,11 +93,11 @@ Module.PostsBlockModel = base.BlockModel.extend({
var POST_REFRESH_DELAY_MS = 500;
var refreshAvailablePosts = _.debounce(
this.fetchAvailablePosts.bind(this),
- POST_REFRESH_DELAY_MS
+ POST_REFRESH_DELAY_MS,
);
var refreshTransformedPosts = _.debounce(
this._refreshTransformedPosts.bind(this),
- POST_REFRESH_DELAY_MS
+ POST_REFRESH_DELAY_MS,
);
// when added as new block, set default for full post featured image position to 'left'
@@ -99,9 +107,16 @@ Module.PostsBlockModel = base.BlockModel.extend({
// For products with display type 'full' prefill 'fullPostFeaturedImagePosition' from existing
// 'featuredImagePosition'. Products always supported images, even for 'full' display type.
- const isProductWithDisplayTypeFull = block && block.displayType === 'full' && block.contentType === 'product';
- if (isProductWithDisplayTypeFull && !this.get('fullPostFeaturedImagePosition')) {
- this.set('fullPostFeaturedImagePosition', this.get('featuredImagePosition'));
+ const isProductWithDisplayTypeFull =
+ block && block.displayType === 'full' && block.contentType === 'product';
+ if (
+ isProductWithDisplayTypeFull &&
+ !this.get('fullPostFeaturedImagePosition')
+ ) {
+ this.set(
+ 'fullPostFeaturedImagePosition',
+ this.get('featuredImagePosition'),
+ );
}
// Attach Radio.Requests API primarily for highlighting
@@ -109,30 +124,49 @@ Module.PostsBlockModel = base.BlockModel.extend({
this.fetchAvailablePosts();
this.on('change', this._updateDefaults, this);
- this.on('change:contentType change:terms change:postStatus change:search', refreshAvailablePosts);
+ this.on(
+ 'change:contentType change:terms change:postStatus change:search',
+ refreshAvailablePosts,
+ );
this.on('loadMorePosts', this._loadMorePosts, this);
- this.listenTo(this.get('_selectedPosts'), 'add remove reset', refreshTransformedPosts);
- this.on('change:displayType change:titleFormat change:featuredImagePosition change:fullPostFeaturedImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:showDivider change:titlePosition', refreshTransformedPosts);
- this.listenTo(this.get('readMoreButton'), 'change', refreshTransformedPosts);
+ this.listenTo(
+ this.get('_selectedPosts'),
+ 'add remove reset',
+ refreshTransformedPosts,
+ );
+ this.on(
+ 'change:displayType change:titleFormat change:featuredImagePosition change:fullPostFeaturedImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:showDivider change:titlePosition',
+ refreshTransformedPosts,
+ );
+ this.listenTo(
+ this.get('readMoreButton'),
+ 'change',
+ refreshTransformedPosts,
+ );
this.listenTo(this.get('divider'), 'change', refreshTransformedPosts);
this.listenTo(App.getChannel(), 'hideSettings', this.destroy);
this.on('insertSelectedPosts', this._insertSelectedPosts, this);
- const field = this.get('displayType') === 'full' ? 'fullPostFeaturedImagePosition' : 'featuredImagePosition';
+ const field =
+ this.get('displayType') === 'full'
+ ? 'fullPostFeaturedImagePosition'
+ : 'featuredImagePosition';
this.set('_featuredImagePosition', this.get(field));
},
fetchAvailablePosts: function () {
var that = this;
this.set('offset', 0);
- CommunicationComponent.getPosts(this.toJSON()).done(function (posts) {
- that.get('_availablePosts').reset(posts);
- that.get('_selectedPosts').reset(); // Empty out the collection
- that.trigger('change:_availablePosts');
- }).fail(function () {
- MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchAvailablePosts'));
- });
+ CommunicationComponent.getPosts(this.toJSON())
+ .done(function (posts) {
+ that.get('_availablePosts').reset(posts);
+ that.get('_selectedPosts').reset(); // Empty out the collection
+ that.trigger('change:_availablePosts');
+ })
+ .fail(function () {
+ MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchAvailablePosts'));
+ });
},
_loadMorePosts: function () {
var that = this;
@@ -146,14 +180,17 @@ Module.PostsBlockModel = base.BlockModel.extend({
this.set('offset', nextOffset);
this.trigger('loadingMorePosts');
- CommunicationComponent.getPosts(this.toJSON()).done(function (posts) {
- that.get('_availablePosts').add(posts);
- that.trigger('change:_availablePosts');
- }).fail(function () {
- MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchAvailablePosts'));
- }).always(function () {
- that.trigger('morePostsLoaded');
- });
+ CommunicationComponent.getPosts(this.toJSON())
+ .done(function (posts) {
+ that.get('_availablePosts').add(posts);
+ that.trigger('change:_availablePosts');
+ })
+ .fail(function () {
+ MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchAvailablePosts'));
+ })
+ .always(function () {
+ that.trigger('morePostsLoaded');
+ });
return true;
},
_refreshTransformedPosts: function () {
@@ -167,11 +204,16 @@ Module.PostsBlockModel = base.BlockModel.extend({
return;
}
- CommunicationComponent.getTransformedPosts(data).done(function (posts) {
- that.get('_transformedPosts').get('blocks').reset(posts, { parse: true });
- }).fail(function () {
- MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
- });
+ CommunicationComponent.getTransformedPosts(data)
+ .done(function (posts) {
+ that
+ .get('_transformedPosts')
+ .get('blocks')
+ .reset(posts, { parse: true });
+ })
+ .fail(function () {
+ MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
+ });
},
_insertSelectedPosts: function () {
var data = this.toJSON();
@@ -182,22 +224,31 @@ Module.PostsBlockModel = base.BlockModel.extend({
if (data.posts.length === 0) return;
- CommunicationComponent.getTransformedPosts(data).done(function (posts) {
- collection.add(JSON.parse(JSON.stringify(posts)), { at: index });
- }).fail(function () {
- MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
- });
+ CommunicationComponent.getTransformedPosts(data)
+ .done(function (posts) {
+ collection.add(JSON.parse(JSON.stringify(posts)), { at: index });
+ })
+ .fail(function () {
+ MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
+ });
},
});
Module.PostsBlockView = base.BlockView.extend({
className: 'mailpoet_block mailpoet_posts_block mailpoet_droppable_block',
- getTemplate: function () { return window.templates.postsBlock; },
+ getTemplate: function () {
+ return window.templates.postsBlock;
+ },
modelEvents: {}, // Forcefully disable all events
- regions: _.extend({
- postsRegion: '.mailpoet_posts_container',
- }, base.BlockView.prototype.regions),
- onDragSubstituteBy: function () { return Module.PostsWidgetView; },
+ regions: _.extend(
+ {
+ postsRegion: '.mailpoet_posts_container',
+ },
+ base.BlockView.prototype.regions,
+ ),
+ onDragSubstituteBy: function () {
+ return Module.PostsWidgetView;
+ },
initialize: function () {
base.BlockView.prototype.initialize.apply(this, arguments);
@@ -218,7 +269,13 @@ Module.PostsBlockView = base.BlockView.extend({
disableDragAndDrop: true,
emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
};
- this.showChildView('postsRegion', new ContainerView({ model: this.model.get('_transformedPosts'), renderOptions: renderOptions }));
+ this.showChildView(
+ 'postsRegion',
+ new ContainerView({
+ model: this.model.get('_transformedPosts'),
+ renderOptions: renderOptions,
+ }),
+ );
},
notifyAboutSelf: function () {
return this;
@@ -229,18 +286,24 @@ Module.PostsBlockView = base.BlockView.extend({
});
Module.PostsBlockToolsView = base.BlockToolsView.extend({
- getSettingsView: function () { return Module.PostsBlockSettingsView; },
+ getSettingsView: function () {
+ return Module.PostsBlockSettingsView;
+ },
});
Module.PostsBlockSettingsView = base.BlockSettingsView.extend({
- getTemplate: function () { return window.templates.postsBlockSettings; },
+ getTemplate: function () {
+ return window.templates.postsBlockSettings;
+ },
regions: {
selectionRegion: '.mailpoet_settings_posts_selection',
displayOptionsRegion: '.mailpoet_settings_posts_display_options',
},
events: {
- 'click .mailpoet_settings_posts_show_display_options': 'switchToDisplayOptions',
- 'click .mailpoet_settings_posts_show_post_selection': 'switchToPostSelection',
+ 'click .mailpoet_settings_posts_show_display_options':
+ 'switchToDisplayOptions',
+ 'click .mailpoet_settings_posts_show_post_selection':
+ 'switchToPostSelection',
'click .mailpoet_settings_posts_insert_selected': 'insertPosts',
},
templateContext: function () {
@@ -251,7 +314,9 @@ Module.PostsBlockSettingsView = base.BlockSettingsView.extend({
initialize: function () {
this.model.trigger('startEditing');
this.selectionView = new PostSelectionSettingsView({ model: this.model });
- this.displayOptionsView = new PostsDisplayOptionsSettingsView({ model: this.model });
+ this.displayOptionsView = new PostsDisplayOptionsSettingsView({
+ model: this.model,
+ });
},
onRender: function () {
var that = this;
@@ -279,20 +344,32 @@ Module.PostsBlockSettingsView = base.BlockSettingsView.extend({
switchToDisplayOptions: function () {
// Switch content view
this.$('.mailpoet_settings_posts_selection').addClass('mailpoet_closed');
- this.$('.mailpoet_settings_posts_display_options').removeClass('mailpoet_closed');
+ this.$('.mailpoet_settings_posts_display_options').removeClass(
+ 'mailpoet_closed',
+ );
// Switch controls
- this.$('.mailpoet_settings_posts_show_display_options').addClass('mailpoet_hidden');
- this.$('.mailpoet_settings_posts_show_post_selection').removeClass('mailpoet_hidden');
+ this.$('.mailpoet_settings_posts_show_display_options').addClass(
+ 'mailpoet_hidden',
+ );
+ this.$('.mailpoet_settings_posts_show_post_selection').removeClass(
+ 'mailpoet_hidden',
+ );
},
switchToPostSelection: function () {
// Switch content view
- this.$('.mailpoet_settings_posts_display_options').addClass('mailpoet_closed');
+ this.$('.mailpoet_settings_posts_display_options').addClass(
+ 'mailpoet_closed',
+ );
this.$('.mailpoet_settings_posts_selection').removeClass('mailpoet_closed');
// Switch controls
- this.$('.mailpoet_settings_posts_show_post_selection').addClass('mailpoet_hidden');
- this.$('.mailpoet_settings_posts_show_display_options').removeClass('mailpoet_hidden');
+ this.$('.mailpoet_settings_posts_show_post_selection').addClass(
+ 'mailpoet_hidden',
+ );
+ this.$('.mailpoet_settings_posts_show_display_options').removeClass(
+ 'mailpoet_hidden',
+ );
},
insertPosts: function () {
this.model.trigger('insertSelectedPosts');
@@ -303,8 +380,12 @@ Module.PostsBlockSettingsView = base.BlockSettingsView.extend({
PostsSelectionCollectionView = Marionette.CollectionView.extend({
className: 'mailpoet_post_scroll_container',
- childView: function () { return SinglePostSelectionSettingsView; },
- emptyView: function () { return EmptyPostSelectionSettingsView; },
+ childView: function () {
+ return SinglePostSelectionSettingsView;
+ },
+ emptyView: function () {
+ return EmptyPostSelectionSettingsView;
+ },
childViewOptions: function () {
return {
blockModel: this.blockModel,
@@ -318,7 +399,10 @@ PostsSelectionCollectionView = Marionette.CollectionView.extend({
},
onPostsScroll: function (event) {
var $postsBox = jQuery(event.target);
- if ($postsBox.scrollTop() + $postsBox.innerHeight() >= $postsBox[0].scrollHeight) {
+ if (
+ $postsBox.scrollTop() + $postsBox.innerHeight() >=
+ $postsBox[0].scrollHeight
+ ) {
// Load more posts if scrolled to bottom
this.blockModel.trigger('loadMorePosts');
}
@@ -326,15 +410,26 @@ PostsSelectionCollectionView = Marionette.CollectionView.extend({
});
PostSelectionSettingsView = Marionette.View.extend({
- getTemplate: function () { return window.templates.postSelectionPostsBlockSettings; },
+ getTemplate: function () {
+ return window.templates.postSelectionPostsBlockSettings;
+ },
regions: {
posts: '.mailpoet_post_selection_container',
},
events: function () {
return {
- 'change .mailpoet_settings_posts_content_type': _.partial(this.changeField, 'contentType'),
- 'change .mailpoet_posts_post_status': _.partial(this.changeField, 'postStatus'),
- 'input .mailpoet_posts_search_term': _.partial(this.changeField, 'search'),
+ 'change .mailpoet_settings_posts_content_type': _.partial(
+ this.changeField,
+ 'contentType',
+ ),
+ 'change .mailpoet_posts_post_status': _.partial(
+ this.changeField,
+ 'postStatus',
+ ),
+ 'input .mailpoet_posts_search_term': _.partial(
+ this.changeField,
+ 'search',
+ ),
};
},
modelEvents: {
@@ -359,7 +454,9 @@ PostSelectionSettingsView = Marionette.View.extend({
onRender: function () {
var postsView;
// Dynamically update available post types
- CommunicationComponent.getPostTypes().done(_.bind(this._updateContentTypes, this));
+ CommunicationComponent.getPostTypes().done(
+ _.bind(this._updateContentTypes, this),
+ );
postsView = new PostsSelectionCollectionView({
collection: this.model.get('_availablePosts'),
blockModel: this.model,
@@ -370,74 +467,80 @@ PostSelectionSettingsView = Marionette.View.extend({
onAttach: function () {
var that = this;
- this.$('.mailpoet_posts_categories_and_tags').select2({
- multiple: true,
- allowClear: true,
- placeholder: MailPoet.I18n.t('categoriesAndTags'),
- ajax: {
- data: function (params) {
- return {
- term: params.term,
- page: params.page || 1,
- };
- },
- transport: function (options, success, failure) {
- var taxonomies;
- var termsPromise;
- var promise = CommunicationComponent.getTaxonomies(
- that.model.get('contentType')
- ).then(function (tax) {
- taxonomies = tax;
- // Fetch available terms based on the list of taxonomies already fetched
- termsPromise = CommunicationComponent.getTerms({
- search: options.data.term,
- page: options.data.page,
- taxonomies: _.keys(taxonomies),
- }).then(function (terms) {
- return {
- taxonomies: taxonomies,
- terms: terms,
- };
+ this.$('.mailpoet_posts_categories_and_tags')
+ .select2({
+ multiple: true,
+ allowClear: true,
+ placeholder: MailPoet.I18n.t('categoriesAndTags'),
+ ajax: {
+ data: function (params) {
+ return {
+ term: params.term,
+ page: params.page || 1,
+ };
+ },
+ transport: function (options, success, failure) {
+ var taxonomies;
+ var termsPromise;
+ var promise = CommunicationComponent.getTaxonomies(
+ that.model.get('contentType'),
+ ).then(function (tax) {
+ taxonomies = tax;
+ // Fetch available terms based on the list of taxonomies already fetched
+ termsPromise = CommunicationComponent.getTerms({
+ search: options.data.term,
+ page: options.data.page,
+ taxonomies: _.keys(taxonomies),
+ }).then(function (terms) {
+ return {
+ taxonomies: taxonomies,
+ terms: terms,
+ };
+ });
+ return termsPromise;
});
- return termsPromise;
- });
- promise.then(success);
- promise.fail(failure);
- return promise;
+ promise.then(success);
+ promise.fail(failure);
+ return promise;
+ },
+ processResults: function (data) {
+ // Transform taxonomies and terms into select2 compatible format
+ return {
+ results: _.map(data.terms, function (item) {
+ return _.defaults(
+ {
+ text:
+ data.taxonomies[item.taxonomy].labels.singular_name +
+ ': ' +
+ item.name,
+ id: item.term_id,
+ },
+ item,
+ );
+ }),
+ pagination: {
+ more: data.terms.length === 100,
+ },
+ };
+ },
},
- processResults: function (data) {
- // Transform taxonomies and terms into select2 compatible format
- return {
- results: _.map(
- data.terms,
- function (item) {
- return _.defaults({
- text: data.taxonomies[item.taxonomy].labels.singular_name + ': ' + item.name,
- id: item.term_id,
- }, item);
- }
- ),
- pagination: {
- more: data.terms.length === 100,
- },
- };
+ })
+ .on({
+ 'select2:select': function (event) {
+ var terms = that.model.get('terms');
+ terms.add(event.params.data);
+ // Reset whole model in order for change events to propagate properly
+ that.model.set('terms', terms.toJSON());
},
- },
- }).on({
- 'select2:select': function (event) {
- var terms = that.model.get('terms');
- terms.add(event.params.data);
- // Reset whole model in order for change events to propagate properly
- that.model.set('terms', terms.toJSON());
- },
- 'select2:unselect': function (event) {
- var terms = that.model.get('terms');
- terms.remove(event.params.data);
- // Reset whole model in order for change events to propagate properly
- that.model.set('terms', terms.toJSON());
- },
- }).trigger('change');
+ 'select2:unselect': function (event) {
+ var terms = that.model.get('terms');
+ terms.remove(event.params.data);
+ // Reset whole model in order for change events to propagate properly
+ that.model.set('terms', terms.toJSON());
+ },
+ })
+ .trigger('change');
},
changeField: function (field, event) {
this.model.set(field, jQuery(event.target).val());
@@ -448,21 +551,27 @@ PostSelectionSettingsView = Marionette.View.extend({
select.find('option').remove();
_.each(postTypes, function (type) {
- select.append(jQuery(' ', {
- value: type.name,
- text: type.label,
- }));
+ select.append(
+ jQuery(' ', {
+ value: type.name,
+ text: type.label,
+ }),
+ );
});
select.val(selectedValue);
},
});
EmptyPostSelectionSettingsView = Marionette.View.extend({
- getTemplate: function () { return window.templates.emptyPostPostsBlockSettings; },
+ getTemplate: function () {
+ return window.templates.emptyPostPostsBlockSettings;
+ },
});
SinglePostSelectionSettingsView = Marionette.View.extend({
- getTemplate: function () { return window.templates.singlePostPostsBlockSettings; },
+ getTemplate: function () {
+ return window.templates.singlePostPostsBlockSettings;
+ },
events: function () {
return {
'change .mailpoet_select_post_checkbox': 'postSelectionChange',
@@ -489,7 +598,9 @@ SinglePostSelectionSettingsView = Marionette.View.extend({
});
PostsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
- getTemplate: function () { return window.templates.displayOptionsPostsBlockSettings; },
+ getTemplate: function () {
+ return window.templates.displayOptionsPostsBlockSettings;
+ },
events: function () {
return {
'click .mailpoet_posts_select_button': 'showButtonSettings',
@@ -497,18 +608,52 @@ PostsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
'change .mailpoet_posts_read_more_type': 'changeReadMoreType',
'change .mailpoet_posts_display_type': 'changeDisplayType',
'change .mailpoet_posts_title_format': 'changeTitleFormat',
- 'change .mailpoet_posts_title_as_links': _.partial(this.changeBoolField, 'titleIsLink'),
- 'change .mailpoet_posts_show_divider': _.partial(this.changeBoolField, 'showDivider'),
- 'change .mailpoet_posts_content_type': _.partial(this.changeField, 'contentType'),
- 'change .mailpoet_posts_title_alignment': _.partial(this.changeField, 'titleAlignment'),
- 'change .mailpoet_posts_image_full_width': _.partial(this.changeBoolField, 'imageFullWidth'),
- 'change .mailpoet_posts_featured_image_position': 'changeFeaturedImagePosition',
- 'change .mailpoet_posts_show_author': _.partial(this.changeField, 'showAuthor'),
- 'input .mailpoet_posts_author_preceded_by': _.partial(this.changeField, 'authorPrecededBy'),
- 'change .mailpoet_posts_show_categories': _.partial(this.changeField, 'showCategories'),
- 'input .mailpoet_posts_categories': _.partial(this.changeField, 'categoriesPrecededBy'),
- 'input .mailpoet_posts_read_more_text': _.partial(this.changeField, 'readMoreText'),
- 'change .mailpoet_automated_latest_content_title_position': _.partial(this.changeField, 'titlePosition'),
+ 'change .mailpoet_posts_title_as_links': _.partial(
+ this.changeBoolField,
+ 'titleIsLink',
+ ),
+ 'change .mailpoet_posts_show_divider': _.partial(
+ this.changeBoolField,
+ 'showDivider',
+ ),
+ 'change .mailpoet_posts_content_type': _.partial(
+ this.changeField,
+ 'contentType',
+ ),
+ 'change .mailpoet_posts_title_alignment': _.partial(
+ this.changeField,
+ 'titleAlignment',
+ ),
+ 'change .mailpoet_posts_image_full_width': _.partial(
+ this.changeBoolField,
+ 'imageFullWidth',
+ ),
+ 'change .mailpoet_posts_featured_image_position':
+ 'changeFeaturedImagePosition',
+ 'change .mailpoet_posts_show_author': _.partial(
+ this.changeField,
+ 'showAuthor',
+ ),
+ 'input .mailpoet_posts_author_preceded_by': _.partial(
+ this.changeField,
+ 'authorPrecededBy',
+ ),
+ 'change .mailpoet_posts_show_categories': _.partial(
+ this.changeField,
+ 'showCategories',
+ ),
+ 'input .mailpoet_posts_categories': _.partial(
+ this.changeField,
+ 'categoriesPrecededBy',
+ ),
+ 'input .mailpoet_posts_read_more_text': _.partial(
+ this.changeField,
+ 'readMoreText',
+ ),
+ 'change .mailpoet_automated_latest_content_title_position': _.partial(
+ this.changeField,
+ 'titlePosition',
+ ),
};
},
templateContext: function () {
@@ -518,24 +663,24 @@ PostsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
},
showButtonSettings: function () {
var buttonModule = ButtonBlock;
- (new buttonModule.ButtonBlockSettingsView({
+ new buttonModule.ButtonBlockSettingsView({
model: this.model.get('readMoreButton'),
renderOptions: {
displayFormat: 'subpanel',
hideLink: true,
hideApplyToAll: true,
},
- })).render();
+ }).render();
},
showDividerSettings: function () {
var dividerModule = DividerBlock;
- (new dividerModule.DividerBlockSettingsView({
+ new dividerModule.DividerBlockSettingsView({
model: this.model.get('divider'),
renderOptions: {
displayFormat: 'subpanel',
hideApplyToAll: true,
},
- })).render();
+ }).render();
},
changeReadMoreType: function (event) {
var value = jQuery(event.target).val();
@@ -559,34 +704,47 @@ PostsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
}
this.changeField('displayType', event);
- const field = this.model.get('displayType') === 'full' ? 'fullPostFeaturedImagePosition' : 'featuredImagePosition';
+ const field =
+ this.model.get('displayType') === 'full'
+ ? 'fullPostFeaturedImagePosition'
+ : 'featuredImagePosition';
this.model.set('_featuredImagePosition', this.model.get(field));
this.render();
},
changeTitleFormat: function (event) {
var value = jQuery(event.target).val();
if (value === 'ul') {
- this.$('.mailpoet_posts_non_title_list_options').addClass('mailpoet_hidden');
+ this.$('.mailpoet_posts_non_title_list_options').addClass(
+ 'mailpoet_hidden',
+ );
this.model.set('titleIsLink', true);
this.$('.mailpoet_posts_title_as_link').addClass('mailpoet_hidden');
this.$('.mailpoet_posts_title_as_links').val(['true']);
} else {
- this.$('.mailpoet_posts_non_title_list_options').removeClass('mailpoet_hidden');
+ this.$('.mailpoet_posts_non_title_list_options').removeClass(
+ 'mailpoet_hidden',
+ );
this.$('.mailpoet_posts_title_as_link').removeClass('mailpoet_hidden');
}
this.changeField('titleFormat', event);
},
changeFeaturedImagePosition: function (event) {
- const field = this.model.get('displayType') === 'full' ? 'fullPostFeaturedImagePosition' : 'featuredImagePosition';
+ const field =
+ this.model.get('displayType') === 'full'
+ ? 'fullPostFeaturedImagePosition'
+ : 'featuredImagePosition';
this.changeField(field, event);
this.changeField('_featuredImagePosition', event);
},
});
Module.PostsWidgetView = base.WidgetView.extend({
- className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
- getTemplate: function () { return window.templates.postsInsertion; },
+ className:
+ base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
+ getTemplate: function () {
+ return window.templates.postsInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/products.js b/mailpoet/assets/js/src/newsletter_editor/blocks/products.js
index d8fed5b598..b5aaaed457 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/products.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/products.js
@@ -34,37 +34,40 @@ var ProductSelectionCollectionView;
Module.ProductsBlockModel = base.BlockModel.extend({
stale: ['_selectedProducts', '_availableProducts', '_transformedProducts'],
defaults: function productsModelDefaults() {
- return this._getDefaults({
- type: 'products',
- withLayout: true,
- amount: '10',
- offset: 0,
- contentType: 'product',
- postStatus: 'publish', // 'draft'|'pending'|'publish'
- terms: [], // List of category and tag objects
- search: '', // Search keyword term
- inclusionType: 'include', // 'include'|'exclude'
- displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly'
- titleFormat: 'h1', // 'h1'|'h2'|'h3'
- titleAlignment: 'left', // 'left'|'center'|'right'
- titleIsLink: false, // false|true
- imageFullWidth: false, // true|false
- titlePosition: 'abovePost', // 'abovePost'|'aboveExcerpt'
- featuredImagePosition: 'alternate', // 'centered'|'right'|'left'|'alternate'|'none'
- pricePosition: 'below', // 'hidden'|'above'|'below'
- readMoreType: 'link', // 'link'|'button'
- readMoreText: 'Buy now', // 'link'|'button'
- readMoreButton: {
- text: 'Buy now',
- url: '[postLink]',
+ return this._getDefaults(
+ {
+ type: 'products',
+ withLayout: true,
+ amount: '10',
+ offset: 0,
+ contentType: 'product',
+ postStatus: 'publish', // 'draft'|'pending'|'publish'
+ terms: [], // List of category and tag objects
+ search: '', // Search keyword term
+ inclusionType: 'include', // 'include'|'exclude'
+ displayType: 'excerpt', // 'excerpt'|'full'|'titleOnly'
+ titleFormat: 'h1', // 'h1'|'h2'|'h3'
+ titleAlignment: 'left', // 'left'|'center'|'right'
+ titleIsLink: false, // false|true
+ imageFullWidth: false, // true|false
+ titlePosition: 'abovePost', // 'abovePost'|'aboveExcerpt'
+ featuredImagePosition: 'alternate', // 'centered'|'right'|'left'|'alternate'|'none'
+ pricePosition: 'below', // 'hidden'|'above'|'below'
+ readMoreType: 'link', // 'link'|'button'
+ readMoreText: 'Buy now', // 'link'|'button'
+ readMoreButton: {
+ text: 'Buy now',
+ url: '[postLink]',
+ },
+ sortBy: 'newest', // 'newest'|'oldest',
+ showDivider: true, // true|false
+ divider: {},
+ _selectedProducts: [],
+ _availableProducts: [],
+ _transformedProducts: new (App.getBlockTypeModel('container'))(),
},
- sortBy: 'newest', // 'newest'|'oldest',
- showDivider: true, // true|false
- divider: {},
- _selectedProducts: [],
- _availableProducts: [],
- _transformedProducts: new (App.getBlockTypeModel('container'))(),
- }, App.getConfig().get('blockDefaults.products'));
+ App.getConfig().get('blockDefaults.products'),
+ );
},
relations: function relations() {
return {
@@ -79,11 +82,11 @@ Module.ProductsBlockModel = base.BlockModel.extend({
var PRODUCT_REFRESH_DELAY_MS = 500;
var refreshAvailableProducts = _.debounce(
this.fetchAvailableProducts.bind(this),
- PRODUCT_REFRESH_DELAY_MS
+ PRODUCT_REFRESH_DELAY_MS,
);
var refreshTransformedProducts = _.debounce(
this._refreshTransformedProducts.bind(this),
- PRODUCT_REFRESH_DELAY_MS
+ PRODUCT_REFRESH_DELAY_MS,
);
// Attach Radio.Requests API primarily for highlighting
@@ -91,12 +94,26 @@ Module.ProductsBlockModel = base.BlockModel.extend({
this.fetchAvailableProducts();
this.on('change', this._updateDefaults, this);
- this.on('change:terms change:postStatus change:search', refreshAvailableProducts);
+ this.on(
+ 'change:terms change:postStatus change:search',
+ refreshAvailableProducts,
+ );
this.on('loadMoreProducts', this._loadMoreProducts, this);
- this.listenTo(this.get('_selectedProducts'), 'add remove reset', refreshTransformedProducts);
- this.on('change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:pricePosition change:readMoreType change:readMoreText change:showDivider change:titlePosition', refreshTransformedProducts);
- this.listenTo(this.get('readMoreButton'), 'change', refreshTransformedProducts);
+ this.listenTo(
+ this.get('_selectedProducts'),
+ 'add remove reset',
+ refreshTransformedProducts,
+ );
+ this.on(
+ 'change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:pricePosition change:readMoreType change:readMoreText change:showDivider change:titlePosition',
+ refreshTransformedProducts,
+ );
+ this.listenTo(
+ this.get('readMoreButton'),
+ 'change',
+ refreshTransformedProducts,
+ );
this.listenTo(this.get('divider'), 'change', refreshTransformedProducts);
this.listenTo(App.getChannel(), 'hideSettings', this.destroy);
@@ -105,13 +122,15 @@ Module.ProductsBlockModel = base.BlockModel.extend({
fetchAvailableProducts: function fetchAvailableProducts() {
var that = this;
this.set('offset', 0);
- CommunicationComponent.getPosts(this.toJSON()).done(function getPostsDone(products) {
- that.get('_availableProducts').reset(products);
- that.get('_selectedProducts').reset(); // Empty out the collection
- that.trigger('change:_availableProducts');
- }).fail(function getProductsFail() {
- MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchAvailablePosts'));
- });
+ CommunicationComponent.getPosts(this.toJSON())
+ .done(function getPostsDone(products) {
+ that.get('_availableProducts').reset(products);
+ that.get('_selectedProducts').reset(); // Empty out the collection
+ that.trigger('change:_availableProducts');
+ })
+ .fail(function getProductsFail() {
+ MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchAvailablePosts'));
+ });
},
_loadMoreProducts: function loadMoreProducts() {
var that = this;
@@ -125,14 +144,17 @@ Module.ProductsBlockModel = base.BlockModel.extend({
this.set('offset', nextOffset);
this.trigger('loadingMoreProducts');
- CommunicationComponent.getPosts(this.toJSON()).done(function getPostsDone(products) {
- that.get('_availableProducts').add(products);
- that.trigger('change:_availableProducts');
- }).fail(function getProductsFail() {
- MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchAvailablePosts'));
- }).always(function getProductsAlways() {
- that.trigger('moreProductsLoaded');
- });
+ CommunicationComponent.getPosts(this.toJSON())
+ .done(function getPostsDone(products) {
+ that.get('_availableProducts').add(products);
+ that.trigger('change:_availableProducts');
+ })
+ .fail(function getProductsFail() {
+ MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchAvailablePosts'));
+ })
+ .always(function getProductsAlways() {
+ that.trigger('moreProductsLoaded');
+ });
return true;
},
_refreshTransformedProducts: function refreshTransformedProducts() {
@@ -148,7 +170,10 @@ Module.ProductsBlockModel = base.BlockModel.extend({
CommunicationComponent.getTransformedPosts(data)
.done(function getTransformedPostsDone(products) {
- that.get('_transformedProducts').get('blocks').reset(products, { parse: true });
+ that
+ .get('_transformedProducts')
+ .get('blocks')
+ .reset(products, { parse: true });
})
.fail(function getTransformedProductsFail() {
MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
@@ -166,7 +191,8 @@ Module.ProductsBlockModel = base.BlockModel.extend({
CommunicationComponent.getTransformedPosts(data)
.done(function getTransformedPostsDone(proucts) {
collection.add(JSON.parse(JSON.stringify(proucts)), { at: index });
- }).fail(function getTransformedProductsFail() {
+ })
+ .fail(function getTransformedProductsFail() {
MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
});
},
@@ -174,12 +200,19 @@ Module.ProductsBlockModel = base.BlockModel.extend({
Module.ProductsBlockView = base.BlockView.extend({
className: 'mailpoet_block mailpoet_products_block mailpoet_droppable_block',
- getTemplate: function getTemplate() { return window.templates.productsBlock; },
+ getTemplate: function getTemplate() {
+ return window.templates.productsBlock;
+ },
modelEvents: {}, // Forcefully disable all events
- regions: _.extend({
- productsRegion: '.mailpoet_products_container',
- }, base.BlockView.prototype.regions),
- onDragSubstituteBy: function onDragSubstituteBy() { return Module.ProductsWidgetView; },
+ regions: _.extend(
+ {
+ productsRegion: '.mailpoet_products_container',
+ },
+ base.BlockView.prototype.regions,
+ ),
+ onDragSubstituteBy: function onDragSubstituteBy() {
+ return Module.ProductsWidgetView;
+ },
initialize: function initialize() {
base.BlockView.prototype.initialize.apply(this, arguments);
@@ -200,7 +233,13 @@ Module.ProductsBlockView = base.BlockView.extend({
disableDragAndDrop: true,
emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
};
- this.showChildView('productsRegion', new ContainerView({ model: this.model.get('_transformedProducts'), renderOptions: renderOptions }));
+ this.showChildView(
+ 'productsRegion',
+ new ContainerView({
+ model: this.model.get('_transformedProducts'),
+ renderOptions: renderOptions,
+ }),
+ );
},
notifyAboutSelf: function notifyAboutSelf() {
return this;
@@ -211,18 +250,24 @@ Module.ProductsBlockView = base.BlockView.extend({
});
Module.ProductsBlockToolsView = base.BlockToolsView.extend({
- getSettingsView: function getSettingsView() { return Module.ProductsBlockSettingsView; },
+ getSettingsView: function getSettingsView() {
+ return Module.ProductsBlockSettingsView;
+ },
});
Module.ProductsBlockSettingsView = base.BlockSettingsView.extend({
- getTemplate: function getTemplate() { return window.templates.productsBlockSettings; },
+ getTemplate: function getTemplate() {
+ return window.templates.productsBlockSettings;
+ },
regions: {
selectionRegion: '.mailpoet_settings_products_selection',
displayOptionsRegion: '.mailpoet_settings_products_display_options',
},
events: {
- 'click .mailpoet_settings_products_show_display_options': 'switchToDisplayOptions',
- 'click .mailpoet_settings_products_show_product_selection': 'switchToProductSelection',
+ 'click .mailpoet_settings_products_show_display_options':
+ 'switchToDisplayOptions',
+ 'click .mailpoet_settings_products_show_product_selection':
+ 'switchToProductSelection',
'click .mailpoet_settings_products_insert_selected': 'insertProducts',
},
templateContext: function templateContext() {
@@ -232,8 +277,12 @@ Module.ProductsBlockSettingsView = base.BlockSettingsView.extend({
},
initialize: function initialize() {
this.model.trigger('startEditing');
- this.selectionView = new ProductSelectionSettingsView({ model: this.model });
- this.displayOptionsView = new ProductsDisplayOptionsSettingsView({ model: this.model });
+ this.selectionView = new ProductSelectionSettingsView({
+ model: this.model,
+ });
+ this.displayOptionsView = new ProductsDisplayOptionsSettingsView({
+ model: this.model,
+ });
},
onRender: function onRender() {
var that = this;
@@ -261,20 +310,34 @@ Module.ProductsBlockSettingsView = base.BlockSettingsView.extend({
switchToDisplayOptions: function switchToDisplayOptions() {
// Switch content view
this.$('.mailpoet_settings_products_selection').addClass('mailpoet_closed');
- this.$('.mailpoet_settings_products_display_options').removeClass('mailpoet_closed');
+ this.$('.mailpoet_settings_products_display_options').removeClass(
+ 'mailpoet_closed',
+ );
// Switch controls
- this.$('.mailpoet_settings_products_show_display_options').addClass('mailpoet_hidden');
- this.$('.mailpoet_settings_products_show_product_selection').removeClass('mailpoet_hidden');
+ this.$('.mailpoet_settings_products_show_display_options').addClass(
+ 'mailpoet_hidden',
+ );
+ this.$('.mailpoet_settings_products_show_product_selection').removeClass(
+ 'mailpoet_hidden',
+ );
},
switchToProductSelection: function switchToProductSelection() {
// Switch content view
- this.$('.mailpoet_settings_products_display_options').addClass('mailpoet_closed');
- this.$('.mailpoet_settings_products_selection').removeClass('mailpoet_closed');
+ this.$('.mailpoet_settings_products_display_options').addClass(
+ 'mailpoet_closed',
+ );
+ this.$('.mailpoet_settings_products_selection').removeClass(
+ 'mailpoet_closed',
+ );
// Switch controls
- this.$('.mailpoet_settings_products_show_product_selection').addClass('mailpoet_hidden');
- this.$('.mailpoet_settings_products_show_display_options').removeClass('mailpoet_hidden');
+ this.$('.mailpoet_settings_products_show_product_selection').addClass(
+ 'mailpoet_hidden',
+ );
+ this.$('.mailpoet_settings_products_show_display_options').removeClass(
+ 'mailpoet_hidden',
+ );
},
insertProducts: function insertProducts() {
this.model.trigger('insertSelectedProducts');
@@ -285,8 +348,12 @@ Module.ProductsBlockSettingsView = base.BlockSettingsView.extend({
ProductSelectionCollectionView = Marionette.CollectionView.extend({
className: 'mailpoet_products_scroll_container',
- childView: function childView() { return SingleProductSelectionSettingsView; },
- emptyView: function emptyView() { return EmptyProductSelectionSettingsView; },
+ childView: function childView() {
+ return SingleProductSelectionSettingsView;
+ },
+ emptyView: function emptyView() {
+ return EmptyProductSelectionSettingsView;
+ },
childViewOptions: function childViewOptions() {
return {
blockModel: this.blockModel,
@@ -300,7 +367,10 @@ ProductSelectionCollectionView = Marionette.CollectionView.extend({
},
onProductsScroll: function onProductsScroll(event) {
var $productsBox = jQuery(event.target);
- if ($productsBox.scrollTop() + $productsBox.innerHeight() >= $productsBox[0].scrollHeight) {
+ if (
+ $productsBox.scrollTop() + $productsBox.innerHeight() >=
+ $productsBox[0].scrollHeight
+ ) {
// Load more posts if scrolled to bottom
this.blockModel.trigger('loadMoreProducts');
}
@@ -316,8 +386,14 @@ ProductSelectionSettingsView = Marionette.View.extend({
},
events: function events() {
return {
- 'change .mailpoet_products_post_status': _.partial(this.changeField, 'postStatus'),
- 'input .mailpoet_products_search_term': _.partial(this.changeField, 'search'),
+ 'change .mailpoet_products_post_status': _.partial(
+ this.changeField,
+ 'postStatus',
+ ),
+ 'input .mailpoet_products_search_term': _.partial(
+ this.changeField,
+ 'search',
+ ),
};
},
modelEvents: {
@@ -328,7 +404,10 @@ ProductSelectionSettingsView = Marionette.View.extend({
}
},
loadingMoreProducts: function loadingMoreProducts() {
- this.$('.mailpoet_product_selection_loading').css('visibility', 'visible');
+ this.$('.mailpoet_product_selection_loading').css(
+ 'visibility',
+ 'visible',
+ );
},
moreProductsLoaded: function moreProductsLoaded() {
this.$('.mailpoet_product_selection_loading').css('visibility', 'hidden');
@@ -352,74 +431,80 @@ ProductSelectionSettingsView = Marionette.View.extend({
onAttach: function onAttach() {
var that = this;
- this.$('.mailpoet_products_categories_and_tags').select2({
- multiple: true,
- allowClear: true,
- placeholder: MailPoet.I18n.t('categoriesAndTags'),
- ajax: {
- data: function data(params) {
- return {
- term: params.term,
- page: params.page || 1,
- };
- },
- transport: function transport(options, success, failure) {
- var taxonomies;
- var termsPromise;
- var promise = CommunicationComponent.getTaxonomies(
- that.model.get('contentType')
- ).then(function getTerms(tax) {
- taxonomies = tax;
- // Fetch available terms based on the list of taxonomies already fetched
- termsPromise = CommunicationComponent.getTerms({
- search: options.data.term,
- page: options.data.page,
- taxonomies: _.keys(taxonomies),
- }).then(function mapTerms(terms) {
- return {
- taxonomies: taxonomies,
- terms: terms,
- };
+ this.$('.mailpoet_products_categories_and_tags')
+ .select2({
+ multiple: true,
+ allowClear: true,
+ placeholder: MailPoet.I18n.t('categoriesAndTags'),
+ ajax: {
+ data: function data(params) {
+ return {
+ term: params.term,
+ page: params.page || 1,
+ };
+ },
+ transport: function transport(options, success, failure) {
+ var taxonomies;
+ var termsPromise;
+ var promise = CommunicationComponent.getTaxonomies(
+ that.model.get('contentType'),
+ ).then(function getTerms(tax) {
+ taxonomies = tax;
+ // Fetch available terms based on the list of taxonomies already fetched
+ termsPromise = CommunicationComponent.getTerms({
+ search: options.data.term,
+ page: options.data.page,
+ taxonomies: _.keys(taxonomies),
+ }).then(function mapTerms(terms) {
+ return {
+ taxonomies: taxonomies,
+ terms: terms,
+ };
+ });
+ return termsPromise;
});
- return termsPromise;
- });
- promise.then(success);
- promise.fail(failure);
- return promise;
+ promise.then(success);
+ promise.fail(failure);
+ return promise;
+ },
+ processResults: function processResults(data) {
+ // Transform taxonomies and terms into select2 compatible format
+ return {
+ results: _.map(data.terms, function results(item) {
+ return _.defaults(
+ {
+ text:
+ data.taxonomies[item.taxonomy].labels.singular_name +
+ ': ' +
+ item.name,
+ id: item.term_id,
+ },
+ item,
+ );
+ }),
+ pagination: {
+ more: data.terms.length === 100,
+ },
+ };
+ },
},
- processResults: function processResults(data) {
- // Transform taxonomies and terms into select2 compatible format
- return {
- results: _.map(
- data.terms,
- function results(item) {
- return _.defaults({
- text: data.taxonomies[item.taxonomy].labels.singular_name + ': ' + item.name,
- id: item.term_id,
- }, item);
- }
- ),
- pagination: {
- more: data.terms.length === 100,
- },
- };
+ })
+ .on({
+ 'select2:select': function select2Select(event) {
+ var terms = that.model.get('terms');
+ terms.add(event.params.data);
+ // Reset whole model in order for change events to propagate properly
+ that.model.set('terms', terms.toJSON());
},
- },
- }).on({
- 'select2:select': function select2Select(event) {
- var terms = that.model.get('terms');
- terms.add(event.params.data);
- // Reset whole model in order for change events to propagate properly
- that.model.set('terms', terms.toJSON());
- },
- 'select2:unselect': function select2Unselect(event) {
- var terms = that.model.get('terms');
- terms.remove(event.params.data);
- // Reset whole model in order for change events to propagate properly
- that.model.set('terms', terms.toJSON());
- },
- }).trigger('change');
+ 'select2:unselect': function select2Unselect(event) {
+ var terms = that.model.get('terms');
+ terms.remove(event.params.data);
+ // Reset whole model in order for change events to propagate properly
+ that.model.set('terms', terms.toJSON());
+ },
+ })
+ .trigger('change');
},
changeField: function changeField(field, event) {
this.model.set(field, jQuery(event.target).val());
@@ -427,11 +512,15 @@ ProductSelectionSettingsView = Marionette.View.extend({
});
EmptyProductSelectionSettingsView = Marionette.View.extend({
- getTemplate: function getTemplate() { return window.templates.emptyPostProductsBlockSettings; },
+ getTemplate: function getTemplate() {
+ return window.templates.emptyPostProductsBlockSettings;
+ },
});
SingleProductSelectionSettingsView = Marionette.View.extend({
- getTemplate: function getTemplate() { return window.templates.singlePostProductsBlockSettings; },
+ getTemplate: function getTemplate() {
+ return window.templates.singlePostProductsBlockSettings;
+ },
events: function events() {
return {
'change .mailpoet_select_product_checkbox': 'productSelectionChange',
@@ -468,14 +557,38 @@ ProductsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
'change .mailpoet_products_read_more_type': 'changeReadMoreType',
'change .mailpoet_products_display_type': 'changeDisplayType',
'change .mailpoet_products_title_format': 'changeTitleFormat',
- 'change .mailpoet_products_title_as_links': _.partial(this.changeBoolField, 'titleIsLink'),
- 'change .mailpoet_products_show_divider': _.partial(this.changeBoolField, 'showDivider'),
- 'change .mailpoet_products_title_alignment': _.partial(this.changeField, 'titleAlignment'),
- 'change .mailpoet_products_image_full_width': _.partial(this.changeBoolField, 'imageFullWidth'),
- 'change .mailpoet_products_featured_image_position': _.partial(this.changeField, 'featuredImagePosition'),
- 'change .mailpoet_products_price_position': _.partial(this.changeField, 'pricePosition'),
- 'input .mailpoet_products_read_more_text': _.partial(this.changeField, 'readMoreText'),
- 'change .mailpoet_products_title_position': _.partial(this.changeField, 'titlePosition'),
+ 'change .mailpoet_products_title_as_links': _.partial(
+ this.changeBoolField,
+ 'titleIsLink',
+ ),
+ 'change .mailpoet_products_show_divider': _.partial(
+ this.changeBoolField,
+ 'showDivider',
+ ),
+ 'change .mailpoet_products_title_alignment': _.partial(
+ this.changeField,
+ 'titleAlignment',
+ ),
+ 'change .mailpoet_products_image_full_width': _.partial(
+ this.changeBoolField,
+ 'imageFullWidth',
+ ),
+ 'change .mailpoet_products_featured_image_position': _.partial(
+ this.changeField,
+ 'featuredImagePosition',
+ ),
+ 'change .mailpoet_products_price_position': _.partial(
+ this.changeField,
+ 'pricePosition',
+ ),
+ 'input .mailpoet_products_read_more_text': _.partial(
+ this.changeField,
+ 'readMoreText',
+ ),
+ 'change .mailpoet_products_title_position': _.partial(
+ this.changeField,
+ 'titlePosition',
+ ),
};
},
templateContext: function templateContext() {
@@ -485,29 +598,31 @@ ProductsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
},
showButtonSettings: function showButtonSettings() {
var buttonModule = ButtonBlock;
- (new buttonModule.ButtonBlockSettingsView({
+ new buttonModule.ButtonBlockSettingsView({
model: this.model.get('readMoreButton'),
renderOptions: {
displayFormat: 'subpanel',
hideLink: true,
hideApplyToAll: true,
},
- })).render();
+ }).render();
},
showDividerSettings: function showDividerSettings() {
var dividerModule = DividerBlock;
- (new dividerModule.DividerBlockSettingsView({
+ new dividerModule.DividerBlockSettingsView({
model: this.model.get('divider'),
renderOptions: {
displayFormat: 'subpanel',
hideApplyToAll: true,
},
- })).render();
+ }).render();
},
changeReadMoreType: function changeReadMoreType(event) {
var value = jQuery(event.target).val();
if (value === 'link') {
- this.$('.mailpoet_products_read_more_text').removeClass('mailpoet_hidden');
+ this.$('.mailpoet_products_read_more_text').removeClass(
+ 'mailpoet_hidden',
+ );
this.$('.mailpoet_products_select_button').addClass('mailpoet_hidden');
} else if (value === 'button') {
this.$('.mailpoet_products_read_more_text').addClass('mailpoet_hidden');
@@ -518,11 +633,17 @@ ProductsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
changeDisplayType: function changeDisplayType(event) {
var value = jQuery(event.target).val();
if (value !== 'titleOnly') {
- this.$('.mailpoet_products_title_position').removeClass('mailpoet_hidden');
- this.$('.mailpoet_products_title_position_separator').removeClass('mailpoet_hidden');
+ this.$('.mailpoet_products_title_position').removeClass(
+ 'mailpoet_hidden',
+ );
+ this.$('.mailpoet_products_title_position_separator').removeClass(
+ 'mailpoet_hidden',
+ );
} else {
this.$('.mailpoet_products_title_position').addClass('mailpoet_hidden');
- this.$('.mailpoet_products_title_position_separator').addClass('mailpoet_hidden');
+ this.$('.mailpoet_products_title_position_separator').addClass(
+ 'mailpoet_hidden',
+ );
}
this.changeField('displayType', event);
@@ -533,9 +654,12 @@ ProductsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
});
Module.ProductsWidgetView = base.WidgetView.extend({
- className: base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
+ className:
+ base.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
id: 'automation_editor_block_products',
- getTemplate: function getTemplate() { return window.templates.productsInsertion; },
+ getTemplate: function getTemplate() {
+ return window.templates.productsInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/social.js b/mailpoet/assets/js/src/newsletter_editor/blocks/social.js
index eeb93fd6fa..208831eb46 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/social.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/social.js
@@ -34,16 +34,24 @@ Module.SocialIconModel = SuperModel.extend({
initialize: function () {
var that = this;
// Make model swap to default values for that type when iconType changes
- this.on('change:iconType', function () {
- var defaultValues = App.getConfig().get('socialIcons').get(that.get('iconType'));
- var iconSet = that.collection.iconBlockModel.getIconSet();
- this.set({
- link: defaultValues.get('defaultLink'),
- image: iconSet.get(that.get('iconType')),
- text: defaultValues.get('title'),
- });
- }, this);
- this.on('change', function () { App.getChannel().trigger('autoSave'); });
+ this.on(
+ 'change:iconType',
+ function () {
+ var defaultValues = App.getConfig()
+ .get('socialIcons')
+ .get(that.get('iconType'));
+ var iconSet = that.collection.iconBlockModel.getIconSet();
+ this.set({
+ link: defaultValues.get('defaultLink'),
+ image: iconSet.get(that.get('iconType')),
+ text: defaultValues.get('title'),
+ });
+ },
+ this,
+ );
+ this.on('change', function () {
+ App.getChannel().trigger('autoSave');
+ });
},
});
@@ -54,16 +62,19 @@ Module.SocialIconCollectionModel = Backbone.Collection.extend({
Module.SocialBlockModel = base.BlockModel.extend({
name: 'iconBlockModel',
defaults: function () {
- return this._getDefaults({
- type: 'social',
- iconSet: 'default',
- styles: {
- block: {
- textAlign: 'center',
+ return this._getDefaults(
+ {
+ type: 'social',
+ iconSet: 'default',
+ styles: {
+ block: {
+ textAlign: 'center',
+ },
},
+ icons: new Module.SocialIconCollectionModel(),
},
- icons: new Module.SocialIconCollectionModel(),
- }, App.getConfig().get('blockDefaults.social'));
+ App.getConfig().get('blockDefaults.social'),
+ );
},
relations: {
icons: Module.SocialIconCollectionModel,
@@ -74,7 +85,9 @@ Module.SocialBlockModel = base.BlockModel.extend({
this.on('change', this._updateDefaults, this);
},
getIconSet: function () {
- return App.getAvailableStyles().get('socialIconSets').get(this.get('iconSet'));
+ return App.getAvailableStyles()
+ .get('socialIconSets')
+ .get(this.get('iconSet'));
},
changeIconSet: function () {
var iconSet = this.getIconSet();
@@ -90,7 +103,9 @@ Module.SocialBlockModel = base.BlockModel.extend({
SocialIconView = Marionette.View.extend({
tagName: 'span',
- getTemplate: function () { return window.templates.socialIconBlock; },
+ getTemplate: function () {
+ return window.templates.socialIconBlock;
+ },
modelEvents: {
change: 'render',
},
@@ -110,7 +125,9 @@ Module.SocialIconCollectionView = Marionette.CollectionView.extend({
Module.SocialBlockView = base.BlockView.extend({
className: 'mailpoet_block mailpoet_social_block mailpoet_droppable_block',
- getTemplate: function () { return window.templates.socialBlock; },
+ getTemplate: function () {
+ return window.templates.socialBlock;
+ },
regions: _.extend({}, base.BlockView.prototype.regions, {
icons: '.mailpoet_social',
}),
@@ -120,23 +137,32 @@ Module.SocialBlockView = base.BlockView.extend({
behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
ShowSettingsBehavior: {},
}),
- onDragSubstituteBy: function () { return Module.SocialWidgetView; },
+ onDragSubstituteBy: function () {
+ return Module.SocialWidgetView;
+ },
onRender: function () {
this.toolsView = new Module.SocialBlockToolsView({ model: this.model });
this.showChildView('toolsRegion', this.toolsView);
- this.showChildView('icons', new Module.SocialIconCollectionView({
- collection: this.model.get('icons'),
- }));
+ this.showChildView(
+ 'icons',
+ new Module.SocialIconCollectionView({
+ collection: this.model.get('icons'),
+ }),
+ );
},
});
Module.SocialBlockToolsView = base.BlockToolsView.extend({
- getSettingsView: function () { return Module.SocialBlockSettingsView; },
+ getSettingsView: function () {
+ return Module.SocialBlockSettingsView;
+ },
});
// Sidebar view container
Module.SocialBlockSettingsView = base.BlockSettingsView.extend({
- getTemplate: function () { return window.templates.socialBlockSettings; },
+ getTemplate: function () {
+ return window.templates.socialBlockSettings;
+ },
regions: {
iconRegion: '#mailpoet_social_icons_selection',
stylesRegion: '#mailpoet_social_icons_styles',
@@ -144,13 +170,18 @@ Module.SocialBlockSettingsView = base.BlockSettingsView.extend({
events: function () {
return {
'click .mailpoet_done_editing': 'close',
- 'change .mailpoet_social_block_alignment': _.partial(this.changeField, 'styles.block.textAlign'),
+ 'change .mailpoet_social_block_alignment': _.partial(
+ this.changeField,
+ 'styles.block.textAlign',
+ ),
};
},
initialize: function () {
base.BlockSettingsView.prototype.initialize.apply(this, arguments);
- this._iconSelectorView = new SocialBlockSettingsIconSelectorView({ model: this.model });
+ this._iconSelectorView = new SocialBlockSettingsIconSelectorView({
+ model: this.model,
+ });
this._stylesView = new SocialBlockSettingsStylesView({ model: this.model });
},
onRender: function () {
@@ -161,20 +192,34 @@ Module.SocialBlockSettingsView = base.BlockSettingsView.extend({
// Single icon settings view, used by the selector view
SocialBlockSettingsIconView = Marionette.View.extend({
- getTemplate: function () { return window.templates.socialSettingsIcon; },
+ getTemplate: function () {
+ return window.templates.socialSettingsIcon;
+ },
events: function () {
return {
'click .mailpoet_delete_block': 'deleteIcon',
- 'change .mailpoet_social_icon_field_type': _.partial(this.changeField, 'iconType'),
- 'input .mailpoet_social_icon_field_image': _.partial(this.changeField, 'image'),
+ 'change .mailpoet_social_icon_field_type': _.partial(
+ this.changeField,
+ 'iconType',
+ ),
+ 'input .mailpoet_social_icon_field_image': _.partial(
+ this.changeField,
+ 'image',
+ ),
'input .mailpoet_social_icon_field_link': this.changeLink,
- 'input .mailpoet_social_icon_field_text': _.partial(this.changeField, 'text'),
+ 'input .mailpoet_social_icon_field_text': _.partial(
+ this.changeField,
+ 'text',
+ ),
};
},
modelEvents: {
'change:iconType': 'render',
'change:image': function () {
- this.$('.mailpoet_social_icon_image').attr('src', this.model.get('image'));
+ this.$('.mailpoet_social_icon_image').attr(
+ 'src',
+ this.model.get('image'),
+ );
},
'change:text': function () {
this.$('.mailpoet_social_icon_image').attr('alt', this.model.get('text'));
@@ -183,13 +228,19 @@ SocialBlockSettingsIconView = Marionette.View.extend({
templateContext: function () {
var icons = App.getConfig().get('socialIcons');
// Construct icon type list of format [{iconType: 'type', title: 'Title'}, ...]
- var availableIconTypes = _.map(_.keys(icons.attributes), function (key) { return { iconType: key, title: icons.get(key).get('title') }; });
- var allIconSets = App.getAvailableStyles().get('socialIconSets');
- return _.extend({}, base.BlockView.prototype.templateContext.apply(this, arguments), {
- iconTypes: availableIconTypes,
- currentType: icons.get(this.model.get('iconType')).toJSON(),
- allIconSets: allIconSets.toJSON(),
+ var availableIconTypes = _.map(_.keys(icons.attributes), function (key) {
+ return { iconType: key, title: icons.get(key).get('title') };
});
+ var allIconSets = App.getAvailableStyles().get('socialIconSets');
+ return _.extend(
+ {},
+ base.BlockView.prototype.templateContext.apply(this, arguments),
+ {
+ iconTypes: availableIconTypes,
+ currentType: icons.get(this.model.get('iconType')).toJSON(),
+ allIconSets: allIconSets.toJSON(),
+ },
+ );
},
deleteIcon: function () {
this.model.destroy();
@@ -219,7 +270,9 @@ SocialBlockSettingsIconCollectionView = Marionette.CollectionView.extend({
// Select icons section container view
SocialBlockSettingsIconSelectorView = Marionette.View.extend({
- getTemplate: function () { return window.templates.socialSettingsIconSelector; },
+ getTemplate: function () {
+ return window.templates.socialSettingsIconSelector;
+ },
regions: {
icons: '#mailpoet_social_icon_selector_contents',
},
@@ -234,15 +287,19 @@ SocialBlockSettingsIconSelectorView = Marionette.View.extend({
this.model.get('icons').add({});
},
onRender: function () {
- this.showChildView('icons', new SocialBlockSettingsIconCollectionView({
- collection: this.model.get('icons'),
- }));
+ this.showChildView(
+ 'icons',
+ new SocialBlockSettingsIconCollectionView({
+ collection: this.model.get('icons'),
+ }),
+ );
},
-
});
SocialBlockSettingsStylesView = Marionette.View.extend({
- getTemplate: function () { return window.templates.socialSettingsStyles; },
+ getTemplate: function () {
+ return window.templates.socialSettingsStyles;
+ },
modelEvents: {
change: 'render',
},
@@ -271,7 +328,9 @@ SocialBlockSettingsStylesView = Marionette.View.extend({
Module.SocialWidgetView = base.WidgetView.extend({
id: 'automation_editor_block_social',
- getTemplate: function () { return window.templates.socialInsertion; },
+ getTemplate: function () {
+ return window.templates.socialInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/spacer.js b/mailpoet/assets/js/src/newsletter_editor/blocks/spacer.js
index de1831bc72..38407e585c 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/spacer.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/spacer.js
@@ -10,38 +10,52 @@ var base = BaseBlock;
Module.SpacerBlockModel = base.BlockModel.extend({
defaults: function defaults() {
- return this._getDefaults({
- type: 'spacer',
- styles: {
- block: {
- backgroundColor: 'transparent',
- height: '40px',
+ return this._getDefaults(
+ {
+ type: 'spacer',
+ styles: {
+ block: {
+ backgroundColor: 'transparent',
+ height: '40px',
+ },
},
},
- }, App.getConfig().get('blockDefaults.spacer'));
+ App.getConfig().get('blockDefaults.spacer'),
+ );
},
});
Module.SpacerBlockView = base.BlockView.extend({
className: 'mailpoet_block mailpoet_spacer_block mailpoet_droppable_block',
- getTemplate: function getTemplate() { return window.templates.spacerBlock; },
- behaviors: _.defaults({
- ResizableBehavior: {
- elementSelector: '.mailpoet_spacer',
- resizeHandleSelector: '.mailpoet_resize_handle',
- minLength: 20, // TODO: Move this number to editor configuration
- modelField: 'styles.block.height',
+ getTemplate: function getTemplate() {
+ return window.templates.spacerBlock;
+ },
+ behaviors: _.defaults(
+ {
+ ResizableBehavior: {
+ elementSelector: '.mailpoet_spacer',
+ resizeHandleSelector: '.mailpoet_resize_handle',
+ minLength: 20, // TODO: Move this number to editor configuration
+ modelField: 'styles.block.height',
+ },
+ ShowSettingsBehavior: {
+ ignoreFrom: '.mailpoet_resize_handle',
+ },
},
- ShowSettingsBehavior: {
- ignoreFrom: '.mailpoet_resize_handle',
- },
- }, base.BlockView.prototype.behaviors),
+ base.BlockView.prototype.behaviors,
+ ),
modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'),
- onDragSubstituteBy: function onDragSubstituteBy() { return Module.SpacerWidgetView; },
+ onDragSubstituteBy: function onDragSubstituteBy() {
+ return Module.SpacerWidgetView;
+ },
initialize: function initialize() {
base.BlockView.prototype.initialize.apply(this, arguments);
- this.listenTo(this.model, 'change:styles.block.backgroundColor', this.render);
+ this.listenTo(
+ this.model,
+ 'change:styles.block.backgroundColor',
+ this.render,
+ );
this.listenTo(this.model, 'change:styles.block.height', this.changeHeight);
},
onRender: function onRender() {
@@ -49,8 +63,13 @@ Module.SpacerBlockView = base.BlockView.extend({
this.showChildView('toolsRegion', this.toolsView);
},
changeHeight: function changeHeight() {
- this.$('.mailpoet_spacer').css('height', this.model.get('styles.block.height'));
- this.$('.mailpoet_resize_handle_text').text(this.model.get('styles.block.height'));
+ this.$('.mailpoet_spacer').css(
+ 'height',
+ this.model.get('styles.block.height'),
+ );
+ this.$('.mailpoet_resize_handle_text').text(
+ this.model.get('styles.block.height'),
+ );
},
onBeforeDestroy: function onBeforeDestroy() {
this.stopListening(this.model);
@@ -58,14 +77,21 @@ Module.SpacerBlockView = base.BlockView.extend({
});
Module.SpacerBlockToolsView = base.BlockToolsView.extend({
- getSettingsView: function getSettingsView() { return Module.SpacerBlockSettingsView; },
+ getSettingsView: function getSettingsView() {
+ return Module.SpacerBlockSettingsView;
+ },
});
Module.SpacerBlockSettingsView = base.BlockSettingsView.extend({
- getTemplate: function getTemplate() { return window.templates.spacerBlockSettings; },
+ getTemplate: function getTemplate() {
+ return window.templates.spacerBlockSettings;
+ },
events: function events() {
return {
- 'change .mailpoet_field_spacer_background_color': _.partial(this.changeColorField, 'styles.block.backgroundColor'),
+ 'change .mailpoet_field_spacer_background_color': _.partial(
+ this.changeColorField,
+ 'styles.block.backgroundColor',
+ ),
'click .mailpoet_done_editing': 'close',
};
},
@@ -73,7 +99,9 @@ Module.SpacerBlockSettingsView = base.BlockSettingsView.extend({
Module.SpacerWidgetView = base.WidgetView.extend({
id: 'automation_editor_block_spacer',
- getTemplate: function getTemplate() { return window.templates.spacerInsertion; },
+ getTemplate: function getTemplate() {
+ return window.templates.spacerInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/text.js b/mailpoet/assets/js/src/newsletter_editor/blocks/text.js
index 73e9c05667..a1415e9c43 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/text.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/text.js
@@ -11,30 +11,39 @@ var base = BaseBlock;
Module.TextBlockModel = base.BlockModel.extend({
defaults: function defaults() {
- return this._getDefaults({
- type: 'text',
- text: 'Edit this to insert text',
- }, App.getConfig().get('blockDefaults.text'));
+ return this._getDefaults(
+ {
+ type: 'text',
+ text: 'Edit this to insert text',
+ },
+ App.getConfig().get('blockDefaults.text'),
+ );
},
_updateDefaults: function updateDefaults() {},
});
Module.TextBlockView = base.BlockView.extend({
className: 'mailpoet_block mailpoet_text_block mailpoet_droppable_block',
- getTemplate: function getTemplate() { return window.templates.textBlock; },
+ getTemplate: function getTemplate() {
+ return window.templates.textBlock;
+ },
modelEvents: _.omit(base.BlockView.prototype.modelEvents, 'change'), // Prevent rerendering on model change due to text editor redrawing
behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
TextEditorBehavior: {
toolbar1: 'formatselect bold italic forecolor | link unlink',
- toolbar2: 'alignleft aligncenter alignright alignjustify | bullist numlist blockquote | code mailpoet_shortcodes',
- validElements: 'p[class|style],span[class|style],a[href|class|title|target|style],h1[class|style],h2[class|style],h3[class|style],ol[class|style],ul[class|style],li[class|style],strong[class|style],em[class|style],strike,br,blockquote[class|style],table[class|style],tr[class|style],th[class|style],td[class|style],del',
+ toolbar2:
+ 'alignleft aligncenter alignright alignjustify | bullist numlist blockquote | code mailpoet_shortcodes',
+ validElements:
+ 'p[class|style],span[class|style],a[href|class|title|target|style],h1[class|style],h2[class|style],h3[class|style],ol[class|style],ul[class|style],li[class|style],strong[class|style],em[class|style],strike,br,blockquote[class|style],table[class|style],tr[class|style],th[class|style],td[class|style],del',
invalidElements: 'script',
blockFormats: 'Heading 1=h1;Heading 2=h2;Heading 3=h3;Paragraph=p',
plugins: 'link lists code mailpoet_shortcodes paste',
configurationFilter: function configurationFilter(originalSettings) {
return _.extend({}, originalSettings, {
mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),
- mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle'),
+ mailpoet_shortcodes_window_title: MailPoet.I18n.t(
+ 'shortcodesWindowTitle',
+ ),
});
},
},
@@ -48,7 +57,9 @@ Module.TextBlockView = base.BlockView.extend({
this.disableTextEditor = this.renderOptions.disableTextEditor;
},
- onDragSubstituteBy: function onDragSubstituteBy() { return Module.TextWidgetView; },
+ onDragSubstituteBy: function onDragSubstituteBy() {
+ return Module.TextWidgetView;
+ },
onRender: function onRender() {
this.toolsView = new Module.TextBlockToolsView({
model: this.model,
@@ -72,16 +83,22 @@ Module.TextBlockView = base.BlockView.extend({
});
Module.TextBlockToolsView = base.BlockToolsView.extend({
- getSettingsView: function getSettingsView() { return Module.TextBlockSettingsView; },
+ getSettingsView: function getSettingsView() {
+ return Module.TextBlockSettingsView;
+ },
});
Module.TextBlockSettingsView = base.BlockSettingsView.extend({
- getTemplate: function getTemplate() { return window.templates.textBlockSettings; },
+ getTemplate: function getTemplate() {
+ return window.templates.textBlockSettings;
+ },
});
Module.TextWidgetView = base.WidgetView.extend({
id: 'automation_editor_block_text',
- getTemplate: function getTemplate() { return window.templates.textInsertion; },
+ getTemplate: function getTemplate() {
+ return window.templates.textInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/unknownBlockFallback.js b/mailpoet/assets/js/src/newsletter_editor/blocks/unknownBlockFallback.js
index 280b8c4377..c8af17fc05 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/unknownBlockFallback.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/unknownBlockFallback.js
@@ -8,7 +8,9 @@ Module.BlockModel = base.BlockModel.extend({});
Module.BlockView = base.BlockView.extend({
className: 'mailpoet_block mailpoet_fallback_block mailpoet_droppable_block',
- getTemplate: function getTemplate() { return window.templates.unknownBlockFallbackBlock; },
+ getTemplate: function getTemplate() {
+ return window.templates.unknownBlockFallbackBlock;
+ },
onRender: function onRender() {
this.toolsView = new Module.BlockToolsView({
model: this.model,
@@ -30,7 +32,9 @@ Module.BlockView = base.BlockView.extend({
Module.WidgetView = base.WidgetView.extend({
id: 'automation_editor_block_fallback',
- getTemplate: function getTemplate() { return window.templates.unknownBlockFallbackInsertion; },
+ getTemplate: function getTemplate() {
+ return window.templates.unknownBlockFallbackInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/woocommerceContent.js b/mailpoet/assets/js/src/newsletter_editor/blocks/woocommerceContent.js
index a899d4320e..fb0586bf42 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/woocommerceContent.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/woocommerceContent.js
@@ -4,10 +4,13 @@ import BaseBlock from 'newsletter_editor/blocks/base';
const BlockModel = BaseBlock.BlockModel.extend({
stale: ['selected'],
defaults() {
- return this._getDefaults({
- type: 'woocommerceContent',
- selected: 'completed_order',
- }, App.getConfig().get('blockDefaults.woocommerceContent'));
+ return this._getDefaults(
+ {
+ type: 'woocommerceContent',
+ selected: 'completed_order',
+ },
+ App.getConfig().get('blockDefaults.woocommerceContent'),
+ );
},
});
@@ -16,8 +19,12 @@ const BlockToolsView = BaseBlock.BlockToolsView.extend({
});
const WidgetView = BaseBlock.WidgetView.extend({
- className: BaseBlock.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
- getTemplate() { return window.templates.woocommerceContentInsertion; },
+ className:
+ BaseBlock.WidgetView.prototype.className +
+ ' mailpoet_droppable_layout_block',
+ getTemplate() {
+ return window.templates.woocommerceContentInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
@@ -29,7 +36,8 @@ const WidgetView = BaseBlock.WidgetView.extend({
});
const BlockView = BaseBlock.BlockView.extend({
- className: 'mailpoet_block mailpoet_woocommerce_content_block mailpoet_droppable_block',
+ className:
+ 'mailpoet_block mailpoet_woocommerce_content_block mailpoet_droppable_block',
initialize: function initialize() {
BaseBlock.BlockView.prototype.initialize.apply(this, arguments);
this.listenTo(App.getChannel(), 'changeWCEmailType', (value) => {
@@ -52,7 +60,9 @@ const BlockView = BaseBlock.BlockView.extend({
regions: {
toolsRegion: '.mailpoet_tools',
},
- onDragSubstituteBy() { return WidgetView; },
+ onDragSubstituteBy() {
+ return WidgetView;
+ },
onRender() {
this.toolsView = new BlockToolsView({ model: this.model });
this.showChildView('toolsRegion', this.toolsView);
@@ -76,5 +86,8 @@ App.on('before:start', (BeforeStartApp) => {
});
export default {
- BlockModel, BlockView, BlockToolsView, WidgetView,
+ BlockModel,
+ BlockView,
+ BlockToolsView,
+ WidgetView,
};
diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/woocommerceHeading.js b/mailpoet/assets/js/src/newsletter_editor/blocks/woocommerceHeading.js
index 84f1456a54..87d73c4ebc 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/woocommerceHeading.js
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/woocommerceHeading.js
@@ -5,10 +5,13 @@ import BaseBlock from 'newsletter_editor/blocks/base';
const BlockModel = BaseBlock.BlockModel.extend({
stale: ['contents', 'selected'],
defaults() {
- return this._getDefaults({
- type: 'woocommerceHeading',
- selected: 'completed_order',
- }, App.getConfig().get('blockDefaults.woocommerceHeading'));
+ return this._getDefaults(
+ {
+ type: 'woocommerceHeading',
+ selected: 'completed_order',
+ },
+ App.getConfig().get('blockDefaults.woocommerceHeading'),
+ );
},
});
@@ -17,8 +20,12 @@ const BlockToolsView = BaseBlock.BlockToolsView.extend({
});
const WidgetView = BaseBlock.WidgetView.extend({
- className: BaseBlock.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
- getTemplate() { return window.templates.woocommerceHeadingInsertion; },
+ className:
+ BaseBlock.WidgetView.prototype.className +
+ ' mailpoet_droppable_layout_block',
+ getTemplate() {
+ return window.templates.woocommerceHeadingInsertion;
+ },
behaviors: {
DraggableBehavior: {
cloneOriginal: true,
@@ -30,7 +37,8 @@ const WidgetView = BaseBlock.WidgetView.extend({
});
const BlockView = BaseBlock.BlockView.extend({
- className: 'mailpoet_container mailpoet_woocommerce_heading_block mailpoet_droppable_block',
+ className:
+ 'mailpoet_container mailpoet_woocommerce_heading_block mailpoet_droppable_block',
initialize: function initialize() {
BaseBlock.BlockView.prototype.initialize.apply(this, arguments);
this.listenTo(App.getChannel(), 'changeWCEmailType', (value) => {
@@ -39,11 +47,15 @@ const BlockView = BaseBlock.BlockView.extend({
});
},
modelEvents: _.omit(BaseBlock.BlockView.prototype.modelEvents, 'change'),
- getTemplate() { return window.templates.woocommerceHeadingBlock; },
+ getTemplate() {
+ return window.templates.woocommerceHeadingBlock;
+ },
regions: {
toolsRegion: '.mailpoet_tools',
},
- onDragSubstituteBy() { return WidgetView; },
+ onDragSubstituteBy() {
+ return WidgetView;
+ },
onRender() {
this.toolsView = new BlockToolsView({ model: this.model });
this.showChildView('toolsRegion', this.toolsView);
@@ -67,5 +79,8 @@ App.on('before:start', (BeforeStartApp) => {
});
export default {
- BlockModel, BlockView, BlockToolsView, WidgetView,
+ BlockModel,
+ BlockView,
+ BlockToolsView,
+ WidgetView,
};
diff --git a/mailpoet/assets/js/src/newsletter_editor/components/config.jsx b/mailpoet/assets/js/src/newsletter_editor/components/config.jsx
index 604308e190..0f29e08a2b 100644
--- a/mailpoet/assets/js/src/newsletter_editor/components/config.jsx
+++ b/mailpoet/assets/js/src/newsletter_editor/components/config.jsx
@@ -17,7 +17,9 @@ Module.ConfigModel = SuperModel.extend({
// Global and available styles for access in blocks and their settings
Module.config = {};
-Module.getConfig = function getConfig() { return Module.config; };
+Module.getConfig = function getConfig() {
+ return Module.config;
+};
Module.setConfig = function setConfig(options) {
Module.config = new Module.ConfigModel(options, { parse: true });
return Module.config;
@@ -32,7 +34,7 @@ App.on('before:start', (BeforeStartApp, options) => {
config.blockDefaults = _.extend(
config.blockDefaults,
- options.newsletter.body?.blockDefaults || {}
+ options.newsletter.body?.blockDefaults || {},
);
Application.setConfig(config);
diff --git a/mailpoet/assets/js/src/newsletter_editor/components/content.js b/mailpoet/assets/js/src/newsletter_editor/components/content.js
index c7b471e32b..2136daa99b 100644
--- a/mailpoet/assets/js/src/newsletter_editor/components/content.js
+++ b/mailpoet/assets/js/src/newsletter_editor/components/content.js
@@ -47,14 +47,21 @@ Module.getBody = function getBody() {
return {
content: App._contentContainer.toJSON(),
globalStyles: App.getGlobalStyles().toJSON(),
- blockDefaults: _.omit(App.getConfig().toJSON().blockDefaults, 'text', 'image'),
+ blockDefaults: _.omit(
+ App.getConfig().toJSON().blockDefaults,
+ 'text',
+ 'image',
+ ),
};
};
Module.toJSON = function toJSON() {
- return _.extend({
- body: Module.getBody(),
- }, App.getNewsletter().toJSON());
+ return _.extend(
+ {
+ body: Module.getBody(),
+ },
+ App.getNewsletter().toJSON(),
+ );
};
Module.getNewsletter = function getNewsletter() {
@@ -73,7 +80,9 @@ Module.renderContent = function renderContent(content) {
if (App._contentContainerView) {
App._contentContainerView.destroy();
}
- App._contentContainer = new (App.getBlockTypeModel('container'))(content, { parse: true });
+ App._contentContainer = new (App.getBlockTypeModel('container'))(content, {
+ parse: true,
+ });
App._contentContainerView = new (App.getBlockTypeView('container'))({
model: App._contentContainer,
renderOptions: { depth: 0 },
@@ -92,25 +101,33 @@ App.on('before:start', function appBeforeStart(Application, options) {
BeforeStartApp.getNewsletter = Module.getNewsletter;
BeforeStartApp.findModels = Module.findModels;
- Module.newsletter = new Module.NewsletterModel(_.omit(_.clone(options.newsletter), ['body']));
+ Module.newsletter = new Module.NewsletterModel(
+ _.omit(_.clone(options.newsletter), ['body']),
+ );
});
App.on('start', function appOnStart(Application, options) {
var StartApp = Application;
var body = options.newsletter.body;
- var bodyContent = (_.has(body, 'content')) ? body.content : {};
+ var bodyContent = _.has(body, 'content') ? body.content : {};
- if (!_.has(options.newsletter, 'body') || !_.isObject(options.newsletter.body)) {
- MailPoet.Notice.error(
- MailPoet.I18n.t('newsletterBodyIsCorrupted'),
- { static: true }
- );
+ if (
+ !_.has(options.newsletter, 'body') ||
+ !_.isObject(options.newsletter.body)
+ ) {
+ MailPoet.Notice.error(MailPoet.I18n.t('newsletterBodyIsCorrupted'), {
+ static: true,
+ });
}
Module.renderContent(bodyContent);
- StartApp.getChannel().on('historyUpdate', function onHistoryUpdate(json) {
- Module.renderContent(json.content);
- }, this);
+ StartApp.getChannel().on(
+ 'historyUpdate',
+ function onHistoryUpdate(json) {
+ Module.renderContent(json.content);
+ },
+ this,
+ );
});
export default Module;
diff --git a/mailpoet/assets/js/src/newsletter_editor/components/heading.js b/mailpoet/assets/js/src/newsletter_editor/components/heading.js
index 6560a3f033..f65d61129d 100644
--- a/mailpoet/assets/js/src/newsletter_editor/components/heading.js
+++ b/mailpoet/assets/js/src/newsletter_editor/components/heading.js
@@ -8,7 +8,9 @@ var Module = {};
Module.HeadingView = Marionette.View.extend({
// eslint-disable-next-line func-names
- getTemplate: function () { return window.templates.heading; },
+ getTemplate: function () {
+ return window.templates.heading;
+ },
// eslint-disable-next-line func-names
templateContext: function () {
return {
@@ -20,7 +22,10 @@ Module.HeadingView = Marionette.View.extend({
events: function () {
return {
'change .mailpoet_input_title': _.partial(this.changeField, 'subject'),
- 'change .mailpoet_input_preheader': _.partial(this.changeField, 'preheader'),
+ 'change .mailpoet_input_preheader': _.partial(
+ this.changeField,
+ 'preheader',
+ ),
'change #mailpoet_heading_email_type': (event) => {
App.getChannel().trigger('changeWCEmailType', event.target.value);
},
@@ -35,19 +40,29 @@ Module.HeadingView = Marionette.View.extend({
// eslint-disable-next-line func-names
App.on('start', function (StartApp) {
var model = StartApp.getNewsletter();
- StartApp._appView.showChildView('headingRegion', new Module.HeadingView({ model: model }));
+ StartApp._appView.showChildView(
+ 'headingRegion',
+ new Module.HeadingView({ model: model }),
+ );
if (!model.isWoocommerceTransactional()) {
- MailPoet.helpTooltip.show(document.getElementById('tooltip-designer-subject-line'), {
- tooltipId: 'tooltip-designer-subject-line-ti',
- tooltip: MailPoet.I18n.t('helpTooltipDesignerSubjectLine'),
- place: 'right',
- });
- MailPoet.helpTooltip.show(document.getElementById('tooltip-designer-preheader'), {
- tooltipId: 'tooltip-designer-preheader-ti',
- tooltip: MailPoet.I18n.t('helpTooltipDesignerPreheader')
- + ' '
- + MailPoet.I18n.t('helpTooltipDesignerPreheaderWarning'),
- });
+ MailPoet.helpTooltip.show(
+ document.getElementById('tooltip-designer-subject-line'),
+ {
+ tooltipId: 'tooltip-designer-subject-line-ti',
+ tooltip: MailPoet.I18n.t('helpTooltipDesignerSubjectLine'),
+ place: 'right',
+ },
+ );
+ MailPoet.helpTooltip.show(
+ document.getElementById('tooltip-designer-preheader'),
+ {
+ tooltipId: 'tooltip-designer-preheader-ti',
+ tooltip:
+ MailPoet.I18n.t('helpTooltipDesignerPreheader') +
+ ' ' +
+ MailPoet.I18n.t('helpTooltipDesignerPreheaderWarning'),
+ },
+ );
}
});
diff --git a/mailpoet/assets/js/src/newsletter_editor/components/history.js b/mailpoet/assets/js/src/newsletter_editor/components/history.js
index 83ecc02a2a..4cea64b413 100644
--- a/mailpoet/assets/js/src/newsletter_editor/components/history.js
+++ b/mailpoet/assets/js/src/newsletter_editor/components/history.js
@@ -33,9 +33,12 @@ Module.HistoryView = Marionette.View.extend({
Mousetrap.bind(['ctrl+z', 'command+z'], function keyboardUndo() {
that.undo();
});
- Mousetrap.bind(['shift+ctrl+z', 'shift+command+z'], function keyboardRedo() {
- that.redo();
- });
+ Mousetrap.bind(
+ ['shift+ctrl+z', 'shift+command+z'],
+ function keyboardRedo() {
+ that.redo();
+ },
+ );
},
onAttach: function onRender() {
@@ -50,7 +53,9 @@ Module.HistoryView = Marionette.View.extend({
return;
}
stringifiedBody = JSON.stringify(json.body);
- if (this.model.statesStack[this.model.currentStateIndex] === stringifiedBody) {
+ if (
+ this.model.statesStack[this.model.currentStateIndex] === stringifiedBody
+ ) {
return;
}
if (this.model.currentStateIndex > 0) {
@@ -60,13 +65,13 @@ Module.HistoryView = Marionette.View.extend({
this.model.currentStateIndex = 0;
this.model.statesStack.length = Math.min(
this.model.statesStack.length,
- this.MAX_HISTORY_STATES
+ this.MAX_HISTORY_STATES,
);
this.updateArrowsUI();
},
canUndo: function canUndo() {
- return this.model.currentStateIndex < (this.model.statesStack.length - 1);
+ return this.model.currentStateIndex < this.model.statesStack.length - 1;
},
canRedo: function canRedo() {
@@ -79,7 +84,7 @@ Module.HistoryView = Marionette.View.extend({
}
this.model.currentStateIndex = Math.min(
this.model.statesStack.length - 1,
- this.model.currentStateIndex + 1
+ this.model.currentStateIndex + 1,
);
this.updateArrowsUI();
this.applyState(this.model.currentStateIndex);
@@ -89,16 +94,31 @@ Module.HistoryView = Marionette.View.extend({
if (!this.canRedo()) {
return;
}
- this.model.currentStateIndex = Math.max(0, this.model.currentStateIndex - 1);
+ this.model.currentStateIndex = Math.max(
+ 0,
+ this.model.currentStateIndex - 1,
+ );
this.updateArrowsUI();
this.applyState(this.model.currentStateIndex);
},
updateArrowsUI: function updateArrowsUI() {
- this.elements.undo.classList.toggle('mailpoet_history_arrow_inactive', !this.canUndo());
- this.elements.redo.classList.toggle('mailpoet_history_arrow_inactive', !this.canRedo());
- this.elements.undo.setAttribute('title', MailPoet.I18n.t(this.canUndo() ? 'canUndo' : 'canNotUndo'));
- this.elements.redo.setAttribute('title', MailPoet.I18n.t(this.canRedo() ? 'canRedo' : 'canNotRedo'));
+ this.elements.undo.classList.toggle(
+ 'mailpoet_history_arrow_inactive',
+ !this.canUndo(),
+ );
+ this.elements.redo.classList.toggle(
+ 'mailpoet_history_arrow_inactive',
+ !this.canRedo(),
+ );
+ this.elements.undo.setAttribute(
+ 'title',
+ MailPoet.I18n.t(this.canUndo() ? 'canUndo' : 'canNotUndo'),
+ );
+ this.elements.redo.setAttribute(
+ 'title',
+ MailPoet.I18n.t(this.canRedo() ? 'canRedo' : 'canNotRedo'),
+ );
},
applyState: function applyState(index) {
diff --git a/mailpoet/assets/js/src/newsletter_editor/components/save.js b/mailpoet/assets/js/src/newsletter_editor/components/save.js
index b640e58c7a..37a1624680 100644
--- a/mailpoet/assets/js/src/newsletter_editor/components/save.js
+++ b/mailpoet/assets/js/src/newsletter_editor/components/save.js
@@ -31,86 +31,80 @@ Module.save = function () {
App.getChannel().trigger('beforeEditorSave', json);
// save newsletter
- return CommunicationComponent.saveNewsletter(json).done(function (response) {
- if (response.success !== undefined && response.success === true) {
- // TODO: Handle translations
- // MailPoet.Notice.success("");
- } else if (response.error !== undefined) {
- if (response.error.length === 0) {
- MailPoet.Notice.error(
- MailPoet.I18n.t('templateSaveFailed'),
- {
+ return CommunicationComponent.saveNewsletter(json)
+ .done(function (response) {
+ if (response.success !== undefined && response.success === true) {
+ // TODO: Handle translations
+ // MailPoet.Notice.success("");
+ } else if (response.error !== undefined) {
+ if (response.error.length === 0) {
+ MailPoet.Notice.error(MailPoet.I18n.t('templateSaveFailed'), {
positionAfter: editorTop,
scroll: true,
- }
- );
- } else {
- $(response.error).each(function (i, error) {
- MailPoet.Notice.error(
- error,
- {
+ });
+ } else {
+ $(response.error).each(function (i, error) {
+ MailPoet.Notice.error(error, {
positionAfter: editorTop,
scroll: true,
- }
- );
- });
+ });
+ });
+ }
}
- }
- if (!_.isUndefined(json.body)) {
- json.body = JSON.parse(json.body);
- }
- App.getChannel().trigger('afterEditorSave', json, response);
- }).fail(function (response) {
- App.getChannel().trigger('editorSaveFailed', {}, response);
- });
+ if (!_.isUndefined(json.body)) {
+ json.body = JSON.parse(json.body);
+ }
+ App.getChannel().trigger('afterEditorSave', json, response);
+ })
+ .fail(function (response) {
+ App.getChannel().trigger('editorSaveFailed', {}, response);
+ });
};
Module.saveTemplate = function (options) {
- return Thumbnail.fromNewsletter(App.toJSON())
- .then(function (thumbnail) {
- var data = _.extend(options || {}, {
- thumbnail_data: thumbnail,
- body: JSON.stringify(App.getBody()),
- categories: JSON.stringify([
- 'saved',
- App.getNewsletter().get('type'),
- ]),
- });
-
- return MailPoet.Ajax.post({
- api_version: window.mailpoet_api_version,
- endpoint: 'newsletterTemplates',
- action: 'save',
- data: data,
- });
+ return Thumbnail.fromNewsletter(App.toJSON()).then(function (thumbnail) {
+ var data = _.extend(options || {}, {
+ thumbnail_data: thumbnail,
+ body: JSON.stringify(App.getBody()),
+ categories: JSON.stringify(['saved', App.getNewsletter().get('type')]),
});
+
+ return MailPoet.Ajax.post({
+ api_version: window.mailpoet_api_version,
+ endpoint: 'newsletterTemplates',
+ action: 'save',
+ data: data,
+ });
+ });
};
Module.exportTemplate = function (options) {
- return Thumbnail.fromNewsletter(App.toJSON())
- .then(function (thumbnail) {
- var data = _.extend(options || {}, {
- thumbnail_data: thumbnail,
- body: App.getBody(),
- categories: JSON.stringify(['saved', App.getNewsletter().get('type')]),
- });
- var blob = new Blob(
- [JSON.stringify(data)],
- { type: 'application/json;charset=utf-8' }
- );
-
- FileSaver.saveAs(blob, 'template.json');
- MailPoet.trackEvent('Editor > Template exported');
+ return Thumbnail.fromNewsletter(App.toJSON()).then(function (thumbnail) {
+ var data = _.extend(options || {}, {
+ thumbnail_data: thumbnail,
+ body: App.getBody(),
+ categories: JSON.stringify(['saved', App.getNewsletter().get('type')]),
});
+ var blob = new Blob([JSON.stringify(data)], {
+ type: 'application/json;charset=utf-8',
+ });
+
+ FileSaver.saveAs(blob, 'template.json');
+ MailPoet.trackEvent('Editor > Template exported');
+ });
};
Module.SaveView = Marionette.View.extend({
- getTemplate: function () { return window.templates.save; },
+ getTemplate: function () {
+ return window.templates.save;
+ },
templateContext: function () {
return {
wrapperClass: this.wrapperClass,
isWoocommerceTransactional: this.model.isWoocommerceTransactional(),
- woocommerceCustomizerEnabled: App.getConfig().get('woocommerceCustomizerEnabled'),
+ woocommerceCustomizerEnabled: App.getConfig().get(
+ 'woocommerceCustomizerEnabled',
+ ),
};
},
events: {
@@ -124,7 +118,8 @@ Module.SaveView = Marionette.View.extend({
'click .mailpoet_save_export': 'showExportTemplate',
'click .mailpoet_export_template': 'exportTemplate',
/* WooCommerce */
- 'click .mailpoet_save_activate_wc_customizer_button': 'activateWooCommerceCustomizer',
+ 'click .mailpoet_save_activate_wc_customizer_button':
+ 'activateWooCommerceCustomizer',
'click .mailpoet_show_preview': 'showPreview',
},
@@ -154,33 +149,45 @@ Module.SaveView = Marionette.View.extend({
afterSave: function (json) {
this.validateNewsletter(json);
// Update 'Last saved timer'
- this.$('.mailpoet_editor_last_saved .mailpoet_autosaved_message').removeClass('mailpoet_hidden');
+ this.$(
+ '.mailpoet_editor_last_saved .mailpoet_autosaved_message',
+ ).removeClass('mailpoet_hidden');
this.$('.mailpoet_autosaved_at').text('');
},
handleSavingErrors: function () {
this.showError(MailPoet.I18n.t('newsletterSavingError'));
},
showSaveOptions: function () {
- this.$('.mailpoet_save_show_options').addClass('mailpoet_save_show_options_active');
+ this.$('.mailpoet_save_show_options').addClass(
+ 'mailpoet_save_show_options_active',
+ );
this.$('.mailpoet_save_options').removeClass('mailpoet_hidden');
this.hideSaveAsTemplate();
this.hideExportTemplate();
},
hideSaveOptions: function () {
- this.$('.mailpoet_save_show_options').removeClass('mailpoet_save_show_options_active');
+ this.$('.mailpoet_save_show_options').removeClass(
+ 'mailpoet_save_show_options_active',
+ );
this.$('.mailpoet_save_options').addClass('mailpoet_hidden');
this.hideSaveAsTemplate();
this.hideExportTemplate();
},
toggleSaveOptions: function () {
- if (this.$('.mailpoet_save_show_options').hasClass('mailpoet_save_show_options_active')) {
+ if (
+ this.$('.mailpoet_save_show_options').hasClass(
+ 'mailpoet_save_show_options_active',
+ )
+ ) {
this.hideSaveOptions();
} else {
this.showSaveOptions();
}
},
showSaveAsTemplate: function () {
- this.$('.mailpoet_save_as_template_container').removeClass('mailpoet_hidden');
+ this.$('.mailpoet_save_as_template_container').removeClass(
+ 'mailpoet_hidden',
+ );
},
hideSaveAsTemplate: function () {
this.$('.mailpoet_save_as_template_container').addClass('mailpoet_hidden');
@@ -190,39 +197,34 @@ Module.SaveView = Marionette.View.extend({
var editorTop = $('#mailpoet_editor_top');
if (templateName === '') {
- MailPoet.Notice.error(
- MailPoet.I18n.t('templateNameMissing'),
- {
- positionAfter: editorTop,
- scroll: true,
- }
- );
+ MailPoet.Notice.error(MailPoet.I18n.t('templateNameMissing'), {
+ positionAfter: editorTop,
+ scroll: true,
+ });
} else {
Module.saveTemplate({
name: templateName,
- }).then(function () {
- MailPoet.Notice.success(
- MailPoet.I18n.t('templateSaved'),
- {
+ })
+ .then(function () {
+ MailPoet.Notice.success(MailPoet.I18n.t('templateSaved'), {
positionAfter: editorTop,
scroll: true,
- }
- );
- MailPoet.trackEvent('Editor > Template saved');
- }).catch(function () {
- MailPoet.Notice.error(
- MailPoet.I18n.t('templateSaveFailed'),
- {
+ });
+ MailPoet.trackEvent('Editor > Template saved');
+ })
+ .catch(function () {
+ MailPoet.Notice.error(MailPoet.I18n.t('templateSaveFailed'), {
positionAfter: editorTop,
scroll: true,
- }
- );
- });
+ });
+ });
this.hideSaveOptions();
}
},
showExportTemplate: function () {
- this.$('.mailpoet_export_template_container').removeClass('mailpoet_hidden');
+ this.$('.mailpoet_export_template_container').removeClass(
+ 'mailpoet_hidden',
+ );
},
hideExportTemplate: function () {
this.$('.mailpoet_export_template_container').addClass('mailpoet_hidden');
@@ -232,13 +234,10 @@ Module.SaveView = Marionette.View.extend({
var editorTop = $('#mailpoet_editor_top');
if (templateName === '') {
- MailPoet.Notice.error(
- MailPoet.I18n.t('templateNameMissing'),
- {
- positionAfter: editorTop,
- scroll: true,
- }
- );
+ MailPoet.Notice.error(MailPoet.I18n.t('templateNameMissing'), {
+ positionAfter: editorTop,
+ scroll: true,
+ });
} else {
Module.exportTemplate({
name: templateName,
@@ -261,38 +260,49 @@ Module.SaveView = Marionette.View.extend({
endpoint: 'newsletters',
action: 'showPreview',
data: json,
- }).always(function () {
- MailPoet.Modal.loading(false);
- }).done(function (response) {
- this.previewView = new Module.NewsletterPreviewView({
- model: new Module.NewsletterPreviewModel(),
- previewType: window.localStorage.getItem(App.getConfig().get('newsletterPreview.previewTypeLocalStorageKey')),
- previewUrl: response.meta.preview_url,
- });
+ })
+ .always(function () {
+ MailPoet.Modal.loading(false);
+ })
+ .done(
+ function (response) {
+ this.previewView = new Module.NewsletterPreviewView({
+ model: new Module.NewsletterPreviewModel(),
+ previewType: window.localStorage.getItem(
+ App.getConfig().get(
+ 'newsletterPreview.previewTypeLocalStorageKey',
+ ),
+ ),
+ previewUrl: response.meta.preview_url,
+ });
- this.previewView.render();
+ this.previewView.render();
- MailPoet.Modal.popup({
- template: '',
- element: this.previewView.$el,
- minWidth: '95%',
- height: '100%',
- title: MailPoet.I18n.t('newsletterPreview'),
- onCancel: function () {
- this.previewView.destroy();
- this.previewView = null;
+ MailPoet.Modal.popup({
+ template: '',
+ element: this.previewView.$el,
+ minWidth: '95%',
+ height: '100%',
+ title: MailPoet.I18n.t('newsletterPreview'),
+ onCancel: function () {
+ this.previewView.destroy();
+ this.previewView = null;
+ }.bind(this),
+ });
+
+ MailPoet.trackEvent('Editor > Browser Preview');
}.bind(this),
+ )
+ .fail(function (response) {
+ if (response.errors.length > 0) {
+ MailPoet.Notice.error(
+ response.errors.map(function (error) {
+ return error.message;
+ }),
+ { scroll: true },
+ );
+ }
});
-
- MailPoet.trackEvent('Editor > Browser Preview');
- }.bind(this)).fail(function (response) {
- if (response.errors.length > 0) {
- MailPoet.Notice.error(
- response.errors.map(function (error) { return error.message; }),
- { scroll: true }
- );
- }
- });
},
next: function () {
this.hideSaveOptions();
@@ -315,7 +325,11 @@ Module.SaveView = Marionette.View.extend({
if (jsonObject && jsonObject.body && jsonObject.body.content) {
content = jsonObject.body.content;
body = JSON.stringify(jsonObject.body.content);
- if (!content.blocks || !Array.isArray(content.blocks) || (content.blocks.length === 0)) {
+ if (
+ !content.blocks ||
+ !Array.isArray(content.blocks) ||
+ content.blocks.length === 0
+ ) {
this.showValidationError(MailPoet.I18n.t('newsletterIsEmpty'));
return;
}
@@ -327,30 +341,39 @@ Module.SaveView = Marionette.View.extend({
return;
}
- if (App.getConfig().get('validation.validateUnsubscribeLinkPresent')
- && body.indexOf('[link:subscription_unsubscribe_url]') < 0
- && body.indexOf('[link:subscription_unsubscribe]') < 0
- && newsletter.get('status') !== 'sent') {
+ if (
+ App.getConfig().get('validation.validateUnsubscribeLinkPresent') &&
+ body.indexOf('[link:subscription_unsubscribe_url]') < 0 &&
+ body.indexOf('[link:subscription_unsubscribe]') < 0 &&
+ newsletter.get('status') !== 'sent'
+ ) {
this.showValidationError(MailPoet.I18n.t('unsubscribeLinkMissing'));
return;
}
- if (newsletter.get('type') === 're_engagement'
- && body.indexOf('[link:subscription_re_engage_url]') < 0
+ if (
+ newsletter.get('type') === 're_engagement' &&
+ body.indexOf('[link:subscription_re_engage_url]') < 0
) {
this.showValidationError(MailPoet.I18n.t('reEngageLinkMissing'));
return;
}
- if ((newsletter.get('type') === 'notification')
- && body.indexOf('"type":"automatedLatestContent"') < 0
- && body.indexOf('"type":"automatedLatestContentLayout"') < 0
+ if (
+ newsletter.get('type') === 'notification' &&
+ body.indexOf('"type":"automatedLatestContent"') < 0 &&
+ body.indexOf('"type":"automatedLatestContentLayout"') < 0
) {
- this.showValidationError(MailPoet.I18n.t('automatedLatestContentMissing'));
+ this.showValidationError(
+ MailPoet.I18n.t('automatedLatestContentMissing'),
+ );
return;
}
- if (newsletter.get('type') === 'standard' && newsletter.get('status') === 'sent') {
+ if (
+ newsletter.get('type') === 'standard' &&
+ newsletter.get('status') === 'sent'
+ ) {
this.showValidationError(MailPoet.I18n.t('emailAlreadySent'));
return;
}
@@ -382,12 +405,14 @@ Module.SaveView = Marionette.View.extend({
data: {
'woocommerce.use_mailpoet_editor': 1,
},
- }).done(function () {
- $el.addClass('mailpoet_hidden');
- MailPoet.trackEvent('Editor > WooCommerce email customizer enabled');
- }).fail(function (response) {
- MailPoet.Notice.showApiErrorNotice(response, { scroll: true });
- });
+ })
+ .done(function () {
+ $el.addClass('mailpoet_hidden');
+ MailPoet.trackEvent('Editor > WooCommerce email customizer enabled');
+ })
+ .fail(function (response) {
+ MailPoet.Notice.showApiErrorNotice(response, { scroll: true });
+ });
},
});
@@ -403,9 +428,11 @@ Module.autoSave = function () {
Module._cancelAutosave();
return;
}
- App.getChannel().request('save').always(function () {
- Module._cancelAutosave();
- });
+ App.getChannel()
+ .request('save')
+ .always(function () {
+ Module._cancelAutosave();
+ });
}, AUTOSAVE_DELAY_DURATION);
};
@@ -446,7 +473,9 @@ Module.NewsletterPreviewModel = SuperModel.extend({
Module.NewsletterPreviewView = Marionette.View.extend({
className: 'mailpoet_browser_preview_wrapper',
- getTemplate: function () { return window.templates.newsletterPreview; },
+ getTemplate: function () {
+ return window.templates.newsletterPreview;
+ },
modelEvents: {
change: 'render',
},
@@ -468,7 +497,8 @@ Module.NewsletterPreviewView = Marionette.View.extend({
previewUrl: this.previewUrl,
width: this.width,
height: this.height,
- email: this.$('#mailpoet_preview_to_email').val() || window.currentUserEmail,
+ email:
+ this.$('#mailpoet_preview_to_email').val() || window.currentUserEmail,
previewSendingError: this.model.get('previewSendingError'),
sendingPreview: this.model.get('sendingPreview'),
mssKeyPendingApproval: window.mailpoet_mss_key_pending_approval,
@@ -478,20 +508,41 @@ Module.NewsletterPreviewView = Marionette.View.extend({
var value = $(event.target).val();
if (value === 'mobile') {
- this.$('.mailpoet_browser_preview_container').addClass('mailpoet_browser_preview_container_mobile');
- this.$('.mailpoet_browser_preview_container').removeClass('mailpoet_browser_preview_container_desktop');
- this.$('.mailpoet_browser_preview_container').removeClass('mailpoet_browser_preview_container_send_to_email');
+ this.$('.mailpoet_browser_preview_container').addClass(
+ 'mailpoet_browser_preview_container_mobile',
+ );
+ this.$('.mailpoet_browser_preview_container').removeClass(
+ 'mailpoet_browser_preview_container_desktop',
+ );
+ this.$('.mailpoet_browser_preview_container').removeClass(
+ 'mailpoet_browser_preview_container_send_to_email',
+ );
} else if (value === 'desktop') {
- this.$('.mailpoet_browser_preview_container').addClass('mailpoet_browser_preview_container_desktop');
- this.$('.mailpoet_browser_preview_container').removeClass('mailpoet_browser_preview_container_mobile');
- this.$('.mailpoet_browser_preview_container').removeClass('mailpoet_browser_preview_container_send_to_email');
+ this.$('.mailpoet_browser_preview_container').addClass(
+ 'mailpoet_browser_preview_container_desktop',
+ );
+ this.$('.mailpoet_browser_preview_container').removeClass(
+ 'mailpoet_browser_preview_container_mobile',
+ );
+ this.$('.mailpoet_browser_preview_container').removeClass(
+ 'mailpoet_browser_preview_container_send_to_email',
+ );
} else {
- this.$('.mailpoet_browser_preview_container').addClass('mailpoet_browser_preview_container_send_to_email');
- this.$('.mailpoet_browser_preview_container').removeClass('mailpoet_browser_preview_container_desktop');
- this.$('.mailpoet_browser_preview_container').removeClass('mailpoet_browser_preview_container_mobile');
+ this.$('.mailpoet_browser_preview_container').addClass(
+ 'mailpoet_browser_preview_container_send_to_email',
+ );
+ this.$('.mailpoet_browser_preview_container').removeClass(
+ 'mailpoet_browser_preview_container_desktop',
+ );
+ this.$('.mailpoet_browser_preview_container').removeClass(
+ 'mailpoet_browser_preview_container_mobile',
+ );
}
- window.localStorage.setItem(App.getConfig().get('newsletterPreview.previewTypeLocalStorageKey'), value);
+ window.localStorage.setItem(
+ App.getConfig().get('newsletterPreview.previewTypeLocalStorageKey'),
+ value,
+ );
this.previewType = value;
},
sendPreview: function () {
@@ -504,13 +555,10 @@ Module.NewsletterPreviewView = Marionette.View.extend({
};
if (data.subscriber.length <= 0) {
- MailPoet.Notice.error(
- MailPoet.I18n.t('newsletterPreviewEmailMissing'),
- {
- positionAfter: $emailField,
- scroll: true,
- }
- );
+ MailPoet.Notice.error(MailPoet.I18n.t('newsletterPreviewEmailMissing'), {
+ positionAfter: $emailField,
+ scroll: true,
+ });
return false;
}
@@ -518,54 +566,77 @@ Module.NewsletterPreviewView = Marionette.View.extend({
this.model.set('previewSendingSuccess', false);
this.model.set('sendingPreview', true);
// save before sending
- App.getChannel().request('save').always(function () {
- CommunicationComponent.previewNewsletter(data).done(function () {
- that.model.set('sendingPreview', false);
- that.model.set('previewSendingSuccess', true);
- MailPoet.trackEvent('Editor > Preview sent', {
- 'Domain name': data.subscriber.substring(data.subscriber.indexOf('@') + 1),
- });
- }).fail(function (response) {
- that.model.set('sendingPreview', false);
- that.model.set('previewSendingError', true);
- let errorHtml = `${MailPoet.I18n.t('newsletterPreviewError')}
`;
- if (response.errors.length > 0) {
- const errors = response.errors.map(function (error) {
- let errorMessage = `
+ App.getChannel()
+ .request('save')
+ .always(function () {
+ CommunicationComponent.previewNewsletter(data)
+ .done(function () {
+ that.model.set('sendingPreview', false);
+ that.model.set('previewSendingSuccess', true);
+ MailPoet.trackEvent('Editor > Preview sent', {
+ 'Domain name': data.subscriber.substring(
+ data.subscriber.indexOf('@') + 1,
+ ),
+ });
+ })
+ .fail(function (response) {
+ that.model.set('sendingPreview', false);
+ that.model.set('previewSendingError', true);
+ let errorHtml = `${MailPoet.I18n.t(
+ 'newsletterPreviewError',
+ )}
`;
+ if (response.errors.length > 0) {
+ const errors = response.errors.map(function (error) {
+ let errorMessage = `
- ${MailPoet.I18n.t('newsletterPreviewErrorNotice').replace('%1$s', window.config.mtaMethod)}:
+ ${MailPoet.I18n.t('newsletterPreviewErrorNotice').replace(
+ '%1$s',
+ window.config.mtaMethod,
+ )}:
${error.message}
`;
- if (window.config.mtaMethod === 'PHPMail') {
- errorMessage += `
- ${MailPoet.I18n.t('newsletterPreviewErrorCheckConfiguration')}
+ if (window.config.mtaMethod === 'PHPMail') {
+ errorMessage += `
+ ${MailPoet.I18n.t(
+ 'newsletterPreviewErrorCheckConfiguration',
+ )}
- ${MailPoet.I18n.t('newsletterPreviewErrorUseSendingService')}
+ ${MailPoet.I18n.t(
+ 'newsletterPreviewErrorUseSendingService',
+ )}
- ${MailPoet.I18n.t('newsletterPreviewErrorSignUpForSendingService')}
+ ${MailPoet.I18n.t(
+ 'newsletterPreviewErrorSignUpForSendingService',
+ )}
`;
- } else {
- const checkSettingsNotice = MailPoet.I18n.t('newsletterPreviewErrorCheckSettingsNotice').replace(
- /\[link\](.*?)\[\/link\]/g,
- '$1 '
- );
- errorMessage += `${checkSettingsNotice}
`;
+ } else {
+ const checkSettingsNotice = MailPoet.I18n.t(
+ 'newsletterPreviewErrorCheckSettingsNotice',
+ ).replace(
+ /\[link\](.*?)\[\/link\]/g,
+ '$1 ',
+ );
+ errorMessage += `${checkSettingsNotice}
`;
+ }
+ return errorMessage;
+ });
+ errorHtml = errors.join('');
}
- return errorMessage;
+ document.getElementById(
+ 'mailpoet_preview_sending_error',
+ ).innerHTML = errorHtml;
});
- errorHtml = errors.join('');
- }
- document.getElementById('mailpoet_preview_sending_error').innerHTML = errorHtml;
});
- });
return undefined;
},
});
diff --git a/mailpoet/assets/js/src/newsletter_editor/components/sidebar.js b/mailpoet/assets/js/src/newsletter_editor/components/sidebar.js
index cb7b2498fc..afe0a28f17 100644
--- a/mailpoet/assets/js/src/newsletter_editor/components/sidebar.js
+++ b/mailpoet/assets/js/src/newsletter_editor/components/sidebar.js
@@ -26,7 +26,9 @@ Module.registerWidget = function (widget) {
}
return Module._contentWidgets.add(widget);
};
-Module.getWidgets = function () { return Module._contentWidgets; };
+Module.getWidgets = function () {
+ return Module._contentWidgets;
+};
// Layout widget handlers for use to create new layout blocks via drag&drop
Module._layoutWidgets = new (Backbone.Collection.extend({
@@ -39,11 +41,17 @@ Module._layoutWidgets = new (Backbone.Collection.extend({
}),
comparator: 'priority',
}))();
-Module.registerLayoutWidget = function (widget) { return Module._layoutWidgets.add(widget); };
-Module.getLayoutWidgets = function () { return Module._layoutWidgets; };
+Module.registerLayoutWidget = function (widget) {
+ return Module._layoutWidgets.add(widget);
+};
+Module.getLayoutWidgets = function () {
+ return Module._layoutWidgets;
+};
SidebarView = Marionette.View.extend({
- getTemplate: function () { return window.templates.sidebar; },
+ getTemplate: function () {
+ return window.templates.sidebar;
+ },
regions: {
contentRegion: '.mailpoet_content_region',
layoutRegion: '.mailpoet_layout_region',
@@ -51,34 +59,33 @@ SidebarView = Marionette.View.extend({
previewRegion: '.mailpoet_preview_region',
},
events: {
- 'click .mailpoet_sidebar_region h3, .mailpoet_sidebar_region .handlediv': function (event) {
- var $openRegion = this.$el.find('.mailpoet_sidebar_region:not(.closed)');
- var $targetRegion = this.$el.find(event.target).closest('.mailpoet_sidebar_region');
+ 'click .mailpoet_sidebar_region h3, .mailpoet_sidebar_region .handlediv':
+ function (event) {
+ var $openRegion = this.$el.find(
+ '.mailpoet_sidebar_region:not(.closed)',
+ );
+ var $targetRegion = this.$el
+ .find(event.target)
+ .closest('.mailpoet_sidebar_region');
- $openRegion.find('.mailpoet_region_content').velocity(
- 'slideUp',
- {
+ $openRegion.find('.mailpoet_region_content').velocity('slideUp', {
duration: 250,
easing: 'easeOut',
complete: function () {
$openRegion.addClass('closed');
},
- }
- );
+ });
- if ($openRegion.get(0) !== $targetRegion.get(0)) {
- $targetRegion.find('.mailpoet_region_content').velocity(
- 'slideDown',
- {
+ if ($openRegion.get(0) !== $targetRegion.get(0)) {
+ $targetRegion.find('.mailpoet_region_content').velocity('slideDown', {
duration: 250,
easing: 'easeIn',
complete: function () {
$targetRegion.removeClass('closed');
},
- }
- );
- }
- },
+ });
+ }
+ },
},
templateContext: function () {
return {
@@ -91,17 +98,22 @@ SidebarView = Marionette.View.extend({
.on('scroll', this.updateHorizontalScroll.bind(this));
},
onRender: function () {
- this.showChildView('contentRegion', new Module.SidebarWidgetsView(
- App.getWidgets()
- ));
- this.showChildView('layoutRegion', new Module.SidebarLayoutWidgetsView(
- App.getLayoutWidgets()
- ));
- this.showChildView('stylesRegion', new Module.SidebarStylesView({
- model: App.getGlobalStyles(),
- availableStyles: App.getAvailableStyles(),
- isWoocommerceTransactional: this.model.isWoocommerceTransactional(),
- }));
+ this.showChildView(
+ 'contentRegion',
+ new Module.SidebarWidgetsView(App.getWidgets()),
+ );
+ this.showChildView(
+ 'layoutRegion',
+ new Module.SidebarLayoutWidgetsView(App.getLayoutWidgets()),
+ );
+ this.showChildView(
+ 'stylesRegion',
+ new Module.SidebarStylesView({
+ model: App.getGlobalStyles(),
+ availableStyles: App.getAvailableStyles(),
+ isWoocommerceTransactional: this.model.isWoocommerceTransactional(),
+ }),
+ );
},
updateHorizontalScroll: function () {
// Fixes the sidebar so that on narrower screens the horizontal
@@ -112,7 +124,8 @@ SidebarView = Marionette.View.extend({
var self = jQuery(this);
if (self.css('position') === 'fixed') {
- calculatedLeft = self.parent().offset().left - jQuery(window).scrollLeft();
+ calculatedLeft =
+ self.parent().offset().left - jQuery(window).scrollLeft();
self.css('left', calculatedLeft + 'px');
} else {
self.css('left', '');
@@ -123,25 +136,37 @@ SidebarView = Marionette.View.extend({
this.$el.parent().stick_in_parent({
offset_top: 32,
});
- this.$el.parent().on('sticky_kit:stick', this.updateHorizontalScroll.bind(this));
- this.$el.parent().on('sticky_kit:unstick', this.updateHorizontalScroll.bind(this));
- this.$el.parent().on('sticky_kit:bottom', this.updateHorizontalScroll.bind(this));
- this.$el.parent().on('sticky_kit:unbottom', this.updateHorizontalScroll.bind(this));
+ this.$el
+ .parent()
+ .on('sticky_kit:stick', this.updateHorizontalScroll.bind(this));
+ this.$el
+ .parent()
+ .on('sticky_kit:unstick', this.updateHorizontalScroll.bind(this));
+ this.$el
+ .parent()
+ .on('sticky_kit:bottom', this.updateHorizontalScroll.bind(this));
+ this.$el
+ .parent()
+ .on('sticky_kit:unbottom', this.updateHorizontalScroll.bind(this));
},
});
/**
- * Draggable widget collection view
- */
+ * Draggable widget collection view
+ */
Module.SidebarWidgetsCollectionView = Marionette.CollectionView.extend({
- childView: function (item) { return item.get('widgetView'); },
+ childView: function (item) {
+ return item.get('widgetView');
+ },
});
/**
- * Responsible for rendering draggable content widgets
- */
+ * Responsible for rendering draggable content widgets
+ */
Module.SidebarWidgetsView = Marionette.View.extend({
- getTemplate: function () { return window.templates.sidebarContent; },
+ getTemplate: function () {
+ return window.templates.sidebarContent;
+ },
regions: {
widgets: '.mailpoet_region_content',
},
@@ -151,61 +176,86 @@ Module.SidebarWidgetsView = Marionette.View.extend({
},
onRender: function () {
- this.showChildView('widgets', new Module.SidebarWidgetsCollectionView({
- collection: this.widgets,
- }));
+ this.showChildView(
+ 'widgets',
+ new Module.SidebarWidgetsCollectionView({
+ collection: this.widgets,
+ }),
+ );
},
});
/**
- * Responsible for rendering draggable layout widgets
- */
+ * Responsible for rendering draggable layout widgets
+ */
Module.SidebarLayoutWidgetsView = Module.SidebarWidgetsView.extend({
- getTemplate: function () { return window.templates.sidebarLayout; },
+ getTemplate: function () {
+ return window.templates.sidebarLayout;
+ },
});
/**
- * Responsible for managing global styles
- */
+ * Responsible for managing global styles
+ */
Module.SidebarStylesView = Marionette.View.extend({
- getTemplate: function () { return window.templates.sidebarStyles; },
+ getTemplate: function () {
+ return window.templates.sidebarStyles;
+ },
behaviors: {
ColorPickerBehavior: {},
WooCommerceStylesBehavior: {},
},
events: function () {
return {
- 'change #mailpoet_text_font_color': _.partial(this.changeColorField, 'text.fontColor'),
+ 'change #mailpoet_text_font_color': _.partial(
+ this.changeColorField,
+ 'text.fontColor',
+ ),
'change #mailpoet_text_font_family': function (event) {
this.model.set('text.fontFamily', event.target.value);
},
'change #mailpoet_text_font_size': function (event) {
this.model.set('text.fontSize', event.target.value);
},
- 'change #mailpoet_h1_font_color': _.partial(this.changeColorField, 'h1.fontColor'),
+ 'change #mailpoet_h1_font_color': _.partial(
+ this.changeColorField,
+ 'h1.fontColor',
+ ),
'change #mailpoet_h1_font_family': function (event) {
this.model.set('h1.fontFamily', event.target.value);
},
'change #mailpoet_h1_font_size': function (event) {
this.model.set('h1.fontSize', event.target.value);
},
- 'change #mailpoet_h2_font_color': _.partial(this.changeColorField, 'h2.fontColor'),
+ 'change #mailpoet_h2_font_color': _.partial(
+ this.changeColorField,
+ 'h2.fontColor',
+ ),
'change #mailpoet_h2_font_family': function (event) {
this.model.set('h2.fontFamily', event.target.value);
},
'change #mailpoet_h2_font_size': function (event) {
this.model.set('h2.fontSize', event.target.value);
},
- 'change #mailpoet_h3_font_color': _.partial(this.changeColorField, 'h3.fontColor'),
+ 'change #mailpoet_h3_font_color': _.partial(
+ this.changeColorField,
+ 'h3.fontColor',
+ ),
'change #mailpoet_h3_font_family': function (event) {
this.model.set('h3.fontFamily', event.target.value);
},
'change #mailpoet_h3_font_size': function (event) {
this.model.set('h3.fontSize', event.target.value);
},
- 'change #mailpoet_a_font_color': _.partial(this.changeColorField, 'link.fontColor'),
+ 'change #mailpoet_a_font_color': _.partial(
+ this.changeColorField,
+ 'link.fontColor',
+ ),
'change #mailpoet_a_font_underline': function (event) {
- this.model.set('link.textDecoration', (event.target.checked) ? event.target.value : 'none');
+ this.model.set(
+ 'link.textDecoration',
+ event.target.checked ? event.target.value : 'none',
+ );
},
'change #mailpoet_text_line_height': function (event) {
this.model.set('text.lineHeight', event.target.value);
@@ -215,8 +265,14 @@ Module.SidebarStylesView = Marionette.View.extend({
this.model.set('h2.lineHeight', event.target.value);
this.model.set('h3.lineHeight', event.target.value);
},
- 'change #mailpoet_newsletter_background_color': _.partial(this.changeColorField, 'wrapper.backgroundColor'),
- 'change #mailpoet_background_color': _.partial(this.changeColorField, 'body.backgroundColor'),
+ 'change #mailpoet_newsletter_background_color': _.partial(
+ this.changeColorField,
+ 'wrapper.backgroundColor',
+ ),
+ 'change #mailpoet_background_color': _.partial(
+ this.changeColorField,
+ 'body.backgroundColor',
+ ),
};
},
templateContext: function () {
diff --git a/mailpoet/assets/js/src/newsletter_editor/components/styles.js b/mailpoet/assets/js/src/newsletter_editor/components/styles.js
index 91f02255da..d029fc40e9 100644
--- a/mailpoet/assets/js/src/newsletter_editor/components/styles.js
+++ b/mailpoet/assets/js/src/newsletter_editor/components/styles.js
@@ -48,7 +48,9 @@ Module.StylesModel = SuperModel.extend({
// apply model defaults recursively (not only on top level)
this.set(jQuery.extend(true, {}, this.defaults, data));
// eslint-disable-next-line func-names
- this.on('change', function () { App.getChannel().trigger('autoSave'); });
+ this.on('change', function () {
+ App.getChannel().trigger('autoSave');
+ });
App.getChannel().on('historyUpdate', this.onHistoryUpdate, this);
},
@@ -59,7 +61,9 @@ Module.StylesModel = SuperModel.extend({
Module.StylesView = Marionette.View.extend({
// eslint-disable-next-line func-names
- getTemplate: function () { return window.templates.styles; },
+ getTemplate: function () {
+ return window.templates.styles;
+ },
// eslint-disable-next-line func-names
templateContext: function () {
return {
@@ -109,16 +113,21 @@ App.on('before:start', function (BeforeStartApp, options) {
Application.getAvailableStyles = Module.getAvailableStyles;
body = options.newsletter.body;
- globalStyles = (_.has(body, 'globalStyles')) ? body.globalStyles : {};
- overriddenGlobalStyles = (_.has(options.config, 'overrideGlobalStyles')) ? options.config.overrideGlobalStyles : {};
- this.setGlobalStyles(jQuery.extend(true, {}, globalStyles, overriddenGlobalStyles));
+ globalStyles = _.has(body, 'globalStyles') ? body.globalStyles : {};
+ overriddenGlobalStyles = _.has(options.config, 'overrideGlobalStyles')
+ ? options.config.overrideGlobalStyles
+ : {};
+ this.setGlobalStyles(
+ jQuery.extend(true, {}, globalStyles, overriddenGlobalStyles),
+ );
});
// eslint-disable-next-line func-names
App.on('start', function (StartApp) {
var stylesView = new Module.StylesView({
model: StartApp.getGlobalStyles(),
- isWoocommerceTransactional: App.getNewsletter().isWoocommerceTransactional(),
+ isWoocommerceTransactional:
+ App.getNewsletter().isWoocommerceTransactional(),
});
StartApp._appView.showChildView('stylesRegion', stylesView);
});
diff --git a/mailpoet/assets/js/src/newsletter_editor/initializer.jsx b/mailpoet/assets/js/src/newsletter_editor/initializer.jsx
index c1970738a9..5bf801d28b 100644
--- a/mailpoet/assets/js/src/newsletter_editor/initializer.jsx
+++ b/mailpoet/assets/js/src/newsletter_editor/initializer.jsx
@@ -8,7 +8,9 @@ import displayTutorial from './tutorial.jsx';
const renderHeading = (newsletterType) => {
if (newsletterType !== 'wc_transactional') {
- const stepsHeadingContainer = document.getElementById('mailpoet_editor_steps_heading');
+ const stepsHeadingContainer = document.getElementById(
+ 'mailpoet_editor_steps_heading',
+ );
const stepsHeading = (
);
@@ -19,7 +21,8 @@ const renderHeading = (newsletterType) => {
const initializeEditor = (config) => {
const editorContainer = document.getElementById('mailpoet_editor');
- const getUrlParam = (param) => (document.location.search.split(`${param}=`)[1] || '').split('&')[0];
+ const getUrlParam = (param) =>
+ (document.location.search.split(`${param}=`)[1] || '').split('&')[0];
if (!editorContainer || !window.EditorApplication) return;
@@ -38,25 +41,35 @@ const initializeEditor = (config) => {
.done((response) => {
const newsletter = response.data;
- Promise.resolve(fetchAutomaticEmailShortcodes(config, newsletter)).then((extendedConfig) => {
- const blockDefaults = {
- ...extendedConfig.blockDefaults,
- container: {},
- };
- window.EditorApplication.start({
- newsletter,
- config: { ...extendedConfig, blockDefaults },
+ Promise.resolve(fetchAutomaticEmailShortcodes(config, newsletter))
+ .then((extendedConfig) => {
+ const blockDefaults = {
+ ...extendedConfig.blockDefaults,
+ container: {},
+ };
+ window.EditorApplication.start({
+ newsletter,
+ config: { ...extendedConfig, blockDefaults },
+ });
+ })
+ .catch(() => {
+ window.EditorApplication.start({
+ newsletter,
+ config,
+ });
});
- }).catch(() => {
- window.EditorApplication.start({
- newsletter,
- config,
- });
- });
- renderHeading(newsletter.type === 'automatic' ? newsletter.options?.group : newsletter.type);
+ renderHeading(
+ newsletter.type === 'automatic'
+ ? newsletter.options?.group
+ : newsletter.type,
+ );
- if (newsletter.status === 'sending' && newsletter.queue && newsletter.queue.status === null) {
+ if (
+ newsletter.status === 'sending' &&
+ newsletter.queue &&
+ newsletter.queue.status === null
+ ) {
MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
endpoint: 'sending_queue',
@@ -65,16 +78,21 @@ const initializeEditor = (config) => {
newsletter_id: newsletter.id,
},
})
- .done(() => MailPoet.Notice.success(MailPoet.I18n.t('newsletterIsPaused')))
+ .done(() =>
+ MailPoet.Notice.success(MailPoet.I18n.t('newsletterIsPaused')),
+ )
.fail((pauseFailResponse) => {
if (pauseFailResponse.errors.length > 0) {
MailPoet.Notice.error(
pauseFailResponse.errors.map((error) => error.message),
- { scroll: true, static: true }
+ { scroll: true, static: true },
);
}
});
- } else if (newsletterTypesWithActivation.includes(newsletter.type) && newsletter.status === 'active') {
+ } else if (
+ newsletterTypesWithActivation.includes(newsletter.type) &&
+ newsletter.status === 'active'
+ ) {
MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
endpoint: 'newsletters',
@@ -83,26 +101,32 @@ const initializeEditor = (config) => {
id: newsletter.id,
status: 'draft',
},
- }).done((setStatusResponse) => {
- if (setStatusResponse.data.status === 'draft') {
- MailPoet.Notice.success(MailPoet.I18n.t('emailWasDeactivated'));
- }
- }).fail((pauseFailResponse) => {
- MailPoet.Notice.error(
- pauseFailResponse.errors.map((error) => error.message),
- { scroll: true, static: true }
- );
- });
+ })
+ .done((setStatusResponse) => {
+ if (setStatusResponse.data.status === 'draft') {
+ MailPoet.Notice.success(MailPoet.I18n.t('emailWasDeactivated'));
+ }
+ })
+ .fail((pauseFailResponse) => {
+ MailPoet.Notice.error(
+ pauseFailResponse.errors.map((error) => error.message),
+ { scroll: true, static: true },
+ );
+ });
}
})
.fail((response) => {
if (response.errors.length > 0) {
MailPoet.Notice.error(
response.errors.map((error) => error.message),
- { scroll: true, static: true }
+ { scroll: true, static: true },
);
}
});
};
-Hooks.addAction('mailpoet_newsletters_editor_initialize', 'mailpoet', initializeEditor);
+Hooks.addAction(
+ 'mailpoet_newsletters_editor_initialize',
+ 'mailpoet',
+ initializeEditor,
+);
diff --git a/mailpoet/assets/js/src/newsletter_editor/tinymce/mailpoet_shortcodes.js b/mailpoet/assets/js/src/newsletter_editor/tinymce/mailpoet_shortcodes.js
index 3284268596..57a080a02d 100644
--- a/mailpoet/assets/js/src/newsletter_editor/tinymce/mailpoet_shortcodes.js
+++ b/mailpoet/assets/js/src/newsletter_editor/tinymce/mailpoet_shortcodes.js
@@ -11,7 +11,10 @@
import MailPoet from 'mailpoet';
function tinyMceAdd(editor) {
- editor.ui.registry.addIcon('mailpoet', ' ');
+ editor.ui.registry.addIcon(
+ 'mailpoet',
+ ' ',
+ );
editor.ui.registry.addButton('mailpoet_shortcodes', {
icon: 'mailpoet',
@@ -20,7 +23,9 @@ function tinyMceAdd(editor) {
var configShortcodes = editor.settings.mailpoet_shortcodes;
var i;
- Object.keys(configShortcodes).forEach(function configShortcodesLoop(segment) {
+ Object.keys(configShortcodes).forEach(function configShortcodesLoop(
+ segment,
+ ) {
var section;
if (Object.prototype.hasOwnProperty.call(configShortcodes, segment)) {
section = {
@@ -47,11 +52,13 @@ function tinyMceAdd(editor) {
type: 'tabpanel',
tabs: shortcodes,
},
- buttons: [{
- type: 'cancel',
- text: MailPoet.I18n.t('close'),
- primary: true,
- }],
+ buttons: [
+ {
+ type: 'cancel',
+ text: MailPoet.I18n.t('close'),
+ primary: true,
+ },
+ ],
onAction: function onActionDialog(dialog, button) {
editor.insertContent(button.name);
editor.windowManager.close();
diff --git a/mailpoet/assets/js/src/newsletter_editor/tutorial.jsx b/mailpoet/assets/js/src/newsletter_editor/tutorial.jsx
index b1807dfd9f..8e5ce97d76 100644
--- a/mailpoet/assets/js/src/newsletter_editor/tutorial.jsx
+++ b/mailpoet/assets/js/src/newsletter_editor/tutorial.jsx
@@ -5,7 +5,9 @@ const displayTutorial = () => {
if (window.config.dragDemoUrlSettings) {
return;
}
- if (moment(window.config.installedAt).isBefore(moment().subtract(7, 'days'))) {
+ if (
+ moment(window.config.installedAt).isBefore(moment().subtract(7, 'days'))
+ ) {
return;
}
MailPoet.Modal.popup({
diff --git a/mailpoet/assets/js/src/newsletter_editor/utils.js b/mailpoet/assets/js/src/newsletter_editor/utils.js
index 93212d599b..b6aea3d9ba 100644
--- a/mailpoet/assets/js/src/newsletter_editor/utils.js
+++ b/mailpoet/assets/js/src/newsletter_editor/utils.js
@@ -2,10 +2,11 @@ export const isEventInsideElement = (event, $el) => {
var offset = $el.offset();
var height = $el.height();
var width = $el.width();
- if (event.pageX < offset.left
- || event.pageX > offset.left + width
- || event.pageY < offset.top
- || event.pageY > offset.top + height
+ if (
+ event.pageX < offset.left ||
+ event.pageX > offset.left + width ||
+ event.pageY < offset.top ||
+ event.pageY > offset.top + height
) {
return false;
}
diff --git a/mailpoet/assets/js/src/newsletters/automatic_emails/events/event_options.tsx b/mailpoet/assets/js/src/newsletters/automatic_emails/events/event_options.tsx
index 5f8e533b3d..1d19f6eeba 100644
--- a/mailpoet/assets/js/src/newsletters/automatic_emails/events/event_options.tsx
+++ b/mailpoet/assets/js/src/newsletters/automatic_emails/events/event_options.tsx
@@ -19,12 +19,14 @@ type Props = {
};
function getEventOptionsValues(eventOptions: EventOptionData) {
- const values = (eventOptions && eventOptions.values) ? eventOptions.values : [];
+ const values = eventOptions && eventOptions.values ? eventOptions.values : [];
- return (values) ? values.map((value) => ({
- id: value.id,
- name: value.name,
- })) : values;
+ return values
+ ? values.map((value) => ({
+ id: value.id,
+ name: value.name,
+ }))
+ : values;
}
export function EventOptions({
@@ -51,10 +53,8 @@ export function EventOptions({
values: getEventOptionsValues(eventOptions),
multiple: eventOptions.multiple || false,
placeholder: eventOptions.placeholder || false,
- transformChangedValue: (_value, valueTextPair) => _.map(
- valueTextPair,
- (data) => ({ id: data.id, name: data.text }),
- ),
+ transformChangedValue: (_value, valueTextPair) =>
+ _.map(valueTextPair, (data) => ({ id: data.id, name: data.text })),
selected: () => selected,
getLabel: _.property('name'),
getValue: _.property('id'),
diff --git a/mailpoet/assets/js/src/newsletters/automatic_emails/events/event_scheduling.jsx b/mailpoet/assets/js/src/newsletters/automatic_emails/events/event_scheduling.jsx
index f0c9709daa..1755e95418 100644
--- a/mailpoet/assets/js/src/newsletters/automatic_emails/events/event_scheduling.jsx
+++ b/mailpoet/assets/js/src/newsletters/automatic_emails/events/event_scheduling.jsx
@@ -17,8 +17,12 @@ class EventScheduling extends Component {
const { item, event } = this.props;
this.handleChange = this.handleChange.bind(this);
- const afterTimeType = item.afterTimeType || event.defaultAfterTimeType || defaultAfterTimeType;
- const eventDefaultAfterTimeNumber = afterTimeType === 'minutes' ? defaultAfterTimeNumberForMinutes : defaultAfterTimeNumber;
+ const afterTimeType =
+ item.afterTimeType || event.defaultAfterTimeType || defaultAfterTimeType;
+ const eventDefaultAfterTimeNumber =
+ afterTimeType === 'minutes'
+ ? defaultAfterTimeNumberForMinutes
+ : defaultAfterTimeNumber;
const afterTimeNumber = item.afterTimeNumber || eventDefaultAfterTimeNumber;
this.state = {
@@ -27,8 +31,9 @@ class EventScheduling extends Component {
};
// Propagate change when default values were applied
- if (item.afterTimeNumber !== afterTimeNumber
- || item.afterTimeType !== afterTimeType
+ if (
+ item.afterTimeNumber !== afterTimeNumber ||
+ item.afterTimeType !== afterTimeType
) {
this.propagateChange(this.state);
}
@@ -59,12 +64,13 @@ class EventScheduling extends Component {
const { event } = this.props;
let values = timeDelayValues;
if (event.timeDelayValues) {
- values = Object
- .entries(event.timeDelayValues)
- .reduce((accumulator, [key, value]) => {
+ values = Object.entries(event.timeDelayValues).reduce(
+ (accumulator, [key, value]) => {
accumulator[key] = value.text;
return accumulator;
- }, {});
+ },
+ {},
+ );
}
const { afterTimeType } = this.state;
const props = {
@@ -82,10 +88,7 @@ class EventScheduling extends Component {
};
return (
-
+
);
}
@@ -94,10 +97,11 @@ class EventScheduling extends Component {
const { afterTimeType, afterTimeNumber } = this.state;
if (afterTimeType === 'immediate') return null;
if (
- event.timeDelayValues
- && event.timeDelayValues[afterTimeType]
- && !event.timeDelayValues[afterTimeType].displayAfterTimeNumberField
- ) return null;
+ event.timeDelayValues &&
+ event.timeDelayValues[afterTimeType] &&
+ !event.timeDelayValues[afterTimeType].displayAfterTimeNumberField
+ )
+ return null;
const props = {
field: {
@@ -108,7 +112,9 @@ class EventScheduling extends Component {
validation: {
'data-parsley-required': true,
'data-parsley-errors-container': '.mailpoet-form-errors',
- 'data-parsley-scheduled-at': MailPoet.I18n.t('emailCanBeScheduledUpToFiveYears'),
+ 'data-parsley-scheduled-at': MailPoet.I18n.t(
+ 'emailCanBeScheduledUpToFiveYears',
+ ),
},
},
item: {},
@@ -141,22 +147,19 @@ class EventScheduling extends Component {
- {
- event.schedulingReadMoreLink
- && (
- <>
-
- {event.schedulingReadMoreLink.text}
-
-
- >
- )
- }
+ {event.schedulingReadMoreLink && (
+ <>
+
+ {event.schedulingReadMoreLink.text}
+
+
+ >
+ )}
>
);
}
@@ -171,10 +174,12 @@ EventScheduling.propTypes = {
onValueChange: PropTypes.func,
event: PropTypes.shape({
defaultAfterTimeType: PropTypes.string,
- timeDelayValues: PropTypes.objectOf(PropTypes.shape({
- text: PropTypes.string,
- displayAfterTimeNumberField: PropTypes.bool,
- })),
+ timeDelayValues: PropTypes.objectOf(
+ PropTypes.shape({
+ text: PropTypes.string,
+ displayAfterTimeNumberField: PropTypes.bool,
+ }),
+ ),
schedulingReadMoreLink: PropTypes.shape({
link: PropTypes.string.isRequired,
text: PropTypes.string.isRequired,
diff --git a/mailpoet/assets/js/src/newsletters/automatic_emails/events_conditions.jsx b/mailpoet/assets/js/src/newsletters/automatic_emails/events_conditions.jsx
index c30fc63e53..f1d8de9eef 100644
--- a/mailpoet/assets/js/src/newsletters/automatic_emails/events_conditions.jsx
+++ b/mailpoet/assets/js/src/newsletters/automatic_emails/events_conditions.jsx
@@ -24,8 +24,9 @@ class EventsConditions extends Component {
static getEventOptionsFirstValue(eventOptions) {
if (!eventOptions) return null;
- return (_.isArray(eventOptions.values) && eventOptions.values[0].id)
- ? eventOptions.values[0].id : null;
+ return _.isArray(eventOptions.values) && eventOptions.values[0].id
+ ? eventOptions.values[0].id
+ : null;
}
constructor(props) {
@@ -35,17 +36,21 @@ class EventsConditions extends Component {
this.handleNextStep = this.handleNextStep.bind(this);
this.email = email;
this.emailEvents = this.email.events;
- this.segments = _.filter(window.mailpoet_segments, (segment) => segment.deleted_at === null);
+ this.segments = _.filter(
+ window.mailpoet_segments,
+ (segment) => segment.deleted_at === null,
+ );
const currentEvent = this.getEvent(name);
const currentEventOptions = this.constructor.getEventOptions(currentEvent);
- const currentEventOptionValue = this.constructor.getEventOptionsFirstValue(currentEventOptions);
+ const currentEventOptionValue =
+ this.constructor.getEventOptionsFirstValue(currentEventOptions);
this.state = {
event: currentEvent,
eventSlug: currentEvent.slug,
eventOptionValue: currentEventOptionValue,
- segment: (currentEvent.sendToLists) ? this.getFirstSegment() : null,
+ segment: currentEvent.sendToLists ? this.getFirstSegment() : null,
afterTimeType: currentEvent.defaultAfterTimeType || defaultAfterTimeType,
afterTimeNumber: null,
};
@@ -59,18 +64,24 @@ class EventsConditions extends Component {
newState.event = this.getEvent(newState.eventSlug);
// keep the existing segment (if set) or set it to the first segment in the list
- newState.segment = (newState.event.sendToLists)
- ? segment || this.getFirstSegment() : null;
+ newState.segment = newState.event.sendToLists
+ ? segment || this.getFirstSegment()
+ : null;
// if the new event doesn't have options, reset the currently selected option value
const eventOptions = this.constructor.getEventOptions(newState.event);
- newState.eventOptionValue = (eventOptions)
- ? this.constructor.getEventOptionsFirstValue(eventOptions) : null;
+ newState.eventOptionValue = eventOptions
+ ? this.constructor.getEventOptionsFirstValue(eventOptions)
+ : null;
}
if (newState.afterTimeType && newState.afterTimeType === 'immediate') {
newState.afterTimeNumber = null;
- } else if (newState.afterTimeType && !newState.afterTimeNumber && !afterTimeNumber) {
+ } else if (
+ newState.afterTimeType &&
+ !newState.afterTimeNumber &&
+ !afterTimeNumber
+ ) {
newState.afterTimeNumber = defaultAfterTimeNumber;
}
@@ -90,7 +101,12 @@ class EventsConditions extends Component {
}
const { history } = this.props;
const {
- eventSlug, afterTimeType, afterTimeNumber, event, segment, eventOptionValue,
+ eventSlug,
+ afterTimeType,
+ afterTimeNumber,
+ event,
+ segment,
+ eventOptionValue,
} = this.state;
const options = {
group: this.email.slug,
@@ -99,7 +115,7 @@ class EventsConditions extends Component {
};
if (afterTimeNumber) options.afterTimeNumber = afterTimeNumber;
- options.sendTo = (event.sendToLists) ? 'segment' : 'user';
+ options.sendTo = event.sendToLists ? 'segment' : 'user';
if (segment) options.segment = segment;
if (eventOptionValue) {
options.meta = JSON.stringify({ option: eventOptionValue });
@@ -114,21 +130,25 @@ class EventsConditions extends Component {
subject: MailPoet.I18n.t('draftNewsletterTitle'),
options,
},
- }).done((response) => {
- MailPoet.trackEvent('Emails > New Automatic Email Created', {
- 'Event type': options.event,
- 'Schedule type': options.afterTimeType,
- 'Schedule value': options.afterTimeNumber,
+ })
+ .done((response) => {
+ MailPoet.trackEvent('Emails > New Automatic Email Created', {
+ 'Event type': options.event,
+ 'Schedule type': options.afterTimeType,
+ 'Schedule value': options.afterTimeNumber,
+ });
+ history.push(`/template/${response.data.id}`);
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ this.context.notices.error(
+ response.errors.map((error) => (
+ {error.message}
+ )),
+ { scroll: true },
+ );
+ }
});
- history.push(`/template/${response.data.id}`);
- }).fail((response) => {
- if (response.errors.length > 0) {
- this.context.notices.error(
- response.errors.map((error) => {error.message}
),
- { scroll: true }
- );
- }
- });
}
getEvent(eventSlug) {
@@ -136,7 +156,9 @@ class EventsConditions extends Component {
}
getFirstSegment() {
- return (_.isArray(this.segments) && this.segments[0].id) ? this.segments[0].id : null;
+ return _.isArray(this.segments) && this.segments[0].id
+ ? this.segments[0].id
+ : null;
}
isValid = () => {
@@ -170,7 +192,6 @@ class EventsConditions extends Component {
eventSlug,
eventOptions: this.constructor.getEventOptions(event),
onValueChange: this.handleChange,
-
};
return (
@@ -201,10 +222,7 @@ class EventsConditions extends Component {
return (
-
+
);
}
@@ -231,11 +249,9 @@ class EventsConditions extends Component {
displayEventTip() {
const { event } = this.state;
- return (event.tip) ? (
+ return event.tip ? (
- {MailPoet.I18n.t('tip')}
- {' '}
- {event.tip}
+ {MailPoet.I18n.t('tip')} {event.tip}
) : null;
}
@@ -245,7 +261,10 @@ class EventsConditions extends Component {
-
+
@@ -254,11 +273,7 @@ class EventsConditions extends Component {
{this.displaySegments()}
{this.displayScheduling()}
-
+
{MailPoet.I18n.t('next')}
diff --git a/mailpoet/assets/js/src/newsletters/automatic_emails/fetch_editor_shortcodes.jsx b/mailpoet/assets/js/src/newsletters/automatic_emails/fetch_editor_shortcodes.jsx
index dcfdc47352..9c7bf52a6a 100644
--- a/mailpoet/assets/js/src/newsletters/automatic_emails/fetch_editor_shortcodes.jsx
+++ b/mailpoet/assets/js/src/newsletters/automatic_emails/fetch_editor_shortcodes.jsx
@@ -6,16 +6,15 @@ const fetchAutomaticEmailShortcodes = (defaultConfig, newsletter) => {
const config = defaultConfig;
- return MailPoet.Ajax
- .post({
- api_version: window.mailpoet_api_version,
- endpoint: 'automatic_emails',
- action: 'get_event_shortcodes',
- data: {
- email_slug: newsletter.options.group,
- event_slug: newsletter.options.event,
- },
- })
+ return MailPoet.Ajax.post({
+ api_version: window.mailpoet_api_version,
+ endpoint: 'automatic_emails',
+ action: 'get_event_shortcodes',
+ data: {
+ email_slug: newsletter.options.group,
+ event_slug: newsletter.options.event,
+ },
+ })
.then((response) => {
if (!_.isObject(response) || !response.data) return config;
config.shortcodes = { ...config.shortcodes, ...response.data };
@@ -25,7 +24,7 @@ const fetchAutomaticEmailShortcodes = (defaultConfig, newsletter) => {
if (pauseFailResponse.errors.length > 0) {
MailPoet.Notice.error(
pauseFailResponse.errors.map((error) => error.message),
- { scroll: true, static: true }
+ { scroll: true, static: true },
);
}
});
diff --git a/mailpoet/assets/js/src/newsletters/automatic_emails/listings.jsx b/mailpoet/assets/js/src/newsletters/automatic_emails/listings.jsx
index 96d45afc45..cb592bdb2e 100644
--- a/mailpoet/assets/js/src/newsletters/automatic_emails/listings.jsx
+++ b/mailpoet/assets/js/src/newsletters/automatic_emails/listings.jsx
@@ -5,7 +5,11 @@ import Listing from 'listing/listing.jsx';
import Tags from 'common/tag/tags';
import Toggle from 'common/form/toggle/toggle';
import { ScheduledIcon } from 'common/listings/newsletter_status';
-import { checkMailerStatus, addStatsCTAAction, confirmEdit } from 'newsletters/listings/utils.jsx';
+import {
+ checkMailerStatus,
+ addStatsCTAAction,
+ confirmEdit,
+} from 'newsletters/listings/utils.jsx';
import Statistics from 'newsletters/listings/statistics.jsx';
import NewsletterTypes from 'newsletters/types';
import classNames from 'classnames';
@@ -23,13 +27,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneNewsletterTrashed')
- );
+ message = MailPoet.I18n.t('oneNewsletterTrashed');
} else {
- message = (
- MailPoet.I18n.t('multipleNewslettersTrashed')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleNewslettersTrashed').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -38,13 +41,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneNewsletterDeleted')
- );
+ message = MailPoet.I18n.t('oneNewsletterDeleted');
} else {
- message = (
- MailPoet.I18n.t('multipleNewslettersDeleted')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleNewslettersDeleted').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -53,13 +55,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneNewsletterRestored')
- );
+ message = MailPoet.I18n.t('oneNewsletterRestored');
} else {
- message = (
- MailPoet.I18n.t('multipleNewslettersRestored')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleNewslettersRestored').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -105,7 +106,11 @@ let newsletterActions = [
name: 'view',
link: function link(newsletter) {
return (
-
+
{MailPoet.I18n.t('preview')}
);
@@ -121,24 +126,32 @@ let newsletterActions = [
name: 'duplicate',
className: 'mailpoet-hide-on-mobile',
label: MailPoet.I18n.t('duplicate'),
- onClick: (newsletter, refresh) => MailPoet.Ajax.post({
- api_version: window.mailpoet_api_version,
- endpoint: 'newsletters',
- action: 'duplicate',
- data: {
- id: newsletter.id,
- },
- }).done((response) => {
- MailPoet.Notice.success((MailPoet.I18n.t('newsletterDuplicated')).replace('%1$s', response.data.subject));
- refresh();
- }).fail((response) => {
- if (response.errors.length > 0) {
- MailPoet.Notice.error(
- response.errors.map((error) => error.message),
- { scroll: true }
- );
- }
- }),
+ onClick: (newsletter, refresh) =>
+ MailPoet.Ajax.post({
+ api_version: window.mailpoet_api_version,
+ endpoint: 'newsletters',
+ action: 'duplicate',
+ data: {
+ id: newsletter.id,
+ },
+ })
+ .done((response) => {
+ MailPoet.Notice.success(
+ MailPoet.I18n.t('newsletterDuplicated').replace(
+ '%1$s',
+ response.data.subject,
+ ),
+ );
+ refresh();
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ MailPoet.Notice.error(
+ response.errors.map((error) => error.message),
+ { scroll: true },
+ );
+ }
+ }),
},
{
name: 'trash',
@@ -171,27 +184,37 @@ class Listings extends Component {
id: Number(e.target.getAttribute('data-id')),
status: checked ? 'active' : 'draft',
},
- }).done((response) => {
- if (response.data.status === 'active') {
- const newsletterGroup = e.target.getAttribute('data-group');
- const email = automaticEmails[newsletterGroup];
- MailPoet.Notice.success(MailPoet.I18n.t('automaticEmailActivated').replace('%1s', email.title));
- }
- // force refresh of listing so that groups are updated
- this.forceUpdate();
- }).fail((response) => {
- MailPoet.Notice.showApiErrorNotice(response);
+ })
+ .done((response) => {
+ if (response.data.status === 'active') {
+ const newsletterGroup = e.target.getAttribute('data-group');
+ const email = automaticEmails[newsletterGroup];
+ MailPoet.Notice.success(
+ MailPoet.I18n.t('automaticEmailActivated').replace(
+ '%1s',
+ email.title,
+ ),
+ );
+ }
+ // force refresh of listing so that groups are updated
+ this.forceUpdate();
+ })
+ .fail((response) => {
+ MailPoet.Notice.showApiErrorNotice(response);
- // reset value to previous newsletter's status
- e.target.checked = !checked;
- });
+ // reset value to previous newsletter's status
+ e.target.checked = !checked;
+ });
};
renderStatus = (newsletter) => {
- const totalSent = (parseInt(newsletter.total_sent, 10) > -1)
- ? MailPoet.I18n.t('sentToXCustomers')
- .replace('%1$d', newsletter.total_sent.toLocaleString())
- : null;
+ const totalSent =
+ parseInt(newsletter.total_sent, 10) > -1
+ ? MailPoet.I18n.t('sentToXCustomers').replace(
+ '%1$d',
+ newsletter.total_sent.toLocaleString(),
+ )
+ : null;
return (
@@ -204,8 +227,10 @@ class Listings extends Component {
defaultChecked={newsletter.status === 'active'}
/>
- { totalSent && { totalSent } }
- { !totalSent && (
+ {totalSent && (
+ {totalSent}
+ )}
+ {!totalSent && (
{MailPoet.I18n.t('notSentYet')}
@@ -216,40 +241,43 @@ class Listings extends Component {
};
renderSettings = (newsletter) => {
- const event = automaticEmails[newsletter.options.group].events[newsletter.options.event];
+ const event =
+ automaticEmails[newsletter.options.group].events[
+ newsletter.options.event
+ ];
let meta;
try {
meta = JSON.parse(newsletter.options.meta || null);
} catch (e) {
meta = newsletter.options.meta || null;
}
- const metaOptionValues = (meta && meta.option) ? _.pluck(meta.option, 'name') : [];
+ const metaOptionValues =
+ meta && meta.option ? _.pluck(meta.option, 'name') : [];
if (meta && _.isEmpty(metaOptionValues)) {
return (
- { MailPoet.I18n.t('automaticEmailEventOptionsNotConfigured') }
+ {MailPoet.I18n.t('automaticEmailEventOptionsNotConfigured')}
);
}
// set sending event
let displayText;
- if (metaOptionValues.length > 1 && 'listingScheduleDisplayTextPlural' in event) {
+ if (
+ metaOptionValues.length > 1 &&
+ 'listingScheduleDisplayTextPlural' in event
+ ) {
displayText = ReactStringReplace(
event.listingScheduleDisplayTextPlural,
'%s',
- (match, i) => (
-
- )
+ (match, i) => ,
);
} else {
displayText = ReactStringReplace(
event.listingScheduleDisplayText,
'%s',
- (match, i) => (
-
- )
+ (match, i) => ,
);
}
@@ -258,19 +286,31 @@ class Listings extends Component {
if (displayText && newsletter.options.afterTimeType !== 'immediate') {
switch (newsletter.options.afterTimeType) {
case 'minutes':
- sendingDelay = MailPoet.I18n.t('sendingDelayMinutes').replace('%1$d', newsletter.options.afterTimeNumber);
+ sendingDelay = MailPoet.I18n.t('sendingDelayMinutes').replace(
+ '%1$d',
+ newsletter.options.afterTimeNumber,
+ );
break;
case 'hours':
- sendingDelay = MailPoet.I18n.t('sendingDelayHours').replace('%1$d', newsletter.options.afterTimeNumber);
+ sendingDelay = MailPoet.I18n.t('sendingDelayHours').replace(
+ '%1$d',
+ newsletter.options.afterTimeNumber,
+ );
break;
case 'days':
- sendingDelay = MailPoet.I18n.t('sendingDelayDays').replace('%1$d', newsletter.options.afterTimeNumber);
+ sendingDelay = MailPoet.I18n.t('sendingDelayDays').replace(
+ '%1$d',
+ newsletter.options.afterTimeNumber,
+ );
break;
case 'weeks':
- sendingDelay = MailPoet.I18n.t('sendingDelayWeeks').replace('%1$d', newsletter.options.afterTimeNumber);
+ sendingDelay = MailPoet.I18n.t('sendingDelayWeeks').replace(
+ '%1$d',
+ newsletter.options.afterTimeNumber,
+ );
break;
default:
@@ -281,15 +321,15 @@ class Listings extends Component {
return (
- { displayText }
- { sendingDelay && (
+ {displayText}
+ {sendingDelay && (
- { sendingDelay }
+ {sendingDelay}
- ) }
+ )}
);
};
@@ -298,7 +338,7 @@ class Listings extends Component {
const rowClasses = classNames(
'manage-column',
'column-primary',
- 'has-row-actions'
+ 'has-row-actions',
);
return (
@@ -308,28 +348,37 @@ class Listings extends Component {
className="mailpoet-listing-title"
href={`?page=mailpoet-newsletter-editor&id=${newsletter.id}`}
>
- { newsletter.subject }
+ {newsletter.subject}
- { actions }
+ {actions}
-
- { this.renderSettings(newsletter) }
+
+ {this.renderSettings(newsletter)}
- { (mailpoetTrackingEnabled === true) ? (
-
+ {mailpoetTrackingEnabled === true ? (
+
0 && !!newsletter.statistics}
/>
- ) : null }
+ ) : null}
- { this.renderStatus(newsletter) }
+ {this.renderStatus(newsletter)}
-
- { MailPoet.Date.short(newsletter.updated_at) }
+
+ {MailPoet.Date.short(newsletter.updated_at)}
- { MailPoet.Date.time(newsletter.updated_at) }
+ {MailPoet.Date.time(newsletter.updated_at)}
);
@@ -365,9 +414,10 @@ class Listings extends Component {
renderWarning() {
const { eventCounts } = this.state;
- const counts = eventCounts.woocommerce_product_purchased
- + eventCounts.woocommerce_product_purchased_in_category
- + eventCounts.woocommerce_first_purchase;
+ const counts =
+ eventCounts.woocommerce_product_purchased +
+ eventCounts.woocommerce_product_purchased_in_category +
+ eventCounts.woocommerce_first_purchase;
if (!counts) return null;
if (window.mailpoet_woocommerce_optin_on_checkout === '1') return null;
@@ -376,7 +426,9 @@ class Listings extends Component {
);
@@ -415,7 +467,10 @@ class Listings extends Component {
sort_order="desc"
afterGetItems={(state) => {
if (!state.loading) {
- const total = state.groups.reduce((count, group) => (count + group.count), 0);
+ const total = state.groups.reduce(
+ (count, group) => count + group.count,
+ 0,
+ );
this.setState({ newslettersCount: total });
}
this.afterGetItems(state);
diff --git a/mailpoet/assets/js/src/newsletters/automatic_emails/send_event_conditions.jsx b/mailpoet/assets/js/src/newsletters/automatic_emails/send_event_conditions.jsx
index 666b2cb5f4..a72cfc6b79 100644
--- a/mailpoet/assets/js/src/newsletters/automatic_emails/send_event_conditions.jsx
+++ b/mailpoet/assets/js/src/newsletters/automatic_emails/send_event_conditions.jsx
@@ -17,20 +17,25 @@ class SendEventConditions extends Component {
this.email = field.email;
this.emailOptions = field.emailOptions;
this.events = _.indexBy(this.email.events, 'slug');
- this.segments = _.filter(window.mailpoet_segments, (segment) => segment.deleted_at === null);
+ this.segments = _.filter(
+ window.mailpoet_segments,
+ (segment) => segment.deleted_at === null,
+ );
const event = this.events[this.emailOptions.event];
- const afterTimeType = this.emailOptions.afterTimeType
- || event.defaultAfterTimeType
- || defaultAfterTimeType;
+ const afterTimeType =
+ this.emailOptions.afterTimeType ||
+ event.defaultAfterTimeType ||
+ defaultAfterTimeType;
this.state = {
event,
afterTimeType,
eventSlug: this.emailOptions.event,
eventOptionValue: null,
- afterTimeNumber: this.emailOptions.afterTimeNumber || defaultAfterTimeNumber,
- segment: (this.emailOptions.segment) ? this.emailOptions.segment : null,
+ afterTimeNumber:
+ this.emailOptions.afterTimeNumber || defaultAfterTimeNumber,
+ segment: this.emailOptions.segment ? this.emailOptions.segment : null,
};
}
@@ -40,7 +45,11 @@ class SendEventConditions extends Component {
if (newState.afterTimeType && newState.afterTimeType === 'immediate') {
newState.afterTimeNumber = null;
- } else if (newState.afterTimeType && !newState.afterTimeNumber && !afterTimeNumber) {
+ } else if (
+ newState.afterTimeType &&
+ !newState.afterTimeNumber &&
+ !afterTimeNumber
+ ) {
newState.afterTimeNumber = defaultAfterTimeNumber;
}
@@ -86,10 +95,7 @@ class SendEventConditions extends Component {
return (
-
+
);
}
@@ -137,7 +143,11 @@ class SendEventConditions extends Component {
propagateChange() {
const {
- eventSlug, afterTimeType, afterTimeNumber, segment, eventOptionValue,
+ eventSlug,
+ afterTimeType,
+ afterTimeNumber,
+ segment,
+ eventOptionValue,
} = this.state;
const { onValueChange } = this.props;
if (!onValueChange) return;
@@ -150,7 +160,8 @@ class SendEventConditions extends Component {
if (afterTimeNumber) options.afterTimeNumber = afterTimeNumber;
if (segment) options.segment = segment;
- if (eventOptionValue) options.meta = JSON.stringify({ option: this.state.eventOptionValue });
+ if (eventOptionValue)
+ options.meta = JSON.stringify({ option: this.state.eventOptionValue });
onValueChange({
target: {
diff --git a/mailpoet/assets/js/src/newsletters/campaign_stats/newsletter_general_stats.tsx b/mailpoet/assets/js/src/newsletters/campaign_stats/newsletter_general_stats.tsx
index 0316df5cd0..a09b012015 100644
--- a/mailpoet/assets/js/src/newsletters/campaign_stats/newsletter_general_stats.tsx
+++ b/mailpoet/assets/js/src/newsletters/campaign_stats/newsletter_general_stats.tsx
@@ -2,7 +2,10 @@ import ReactStringReplace from 'react-string-replace';
import MailPoet from 'mailpoet';
import Hooks from 'wp-js-hooks';
import { Grid } from 'common/grid';
-import { StatsBadge, getBadgeType } from 'common/listings/newsletter_stats/stats';
+import {
+ StatsBadge,
+ getBadgeType,
+} from 'common/listings/newsletter_stats/stats';
import Tooltip from 'help-tooltip';
import { NewsletterType } from './newsletter_type';
@@ -16,7 +19,7 @@ const minNewslettersSent = 20;
const minNewslettersOpened = 5;
// When percentage value is lower then 0.1 we want to display value with two decimal places
-const formatWithOptimalPrecision = (value:number) => {
+const formatWithOptimalPrecision = (value: number) => {
const precision = value < 0.1 ? 2 : 1;
return MailPoet.Num.toLocaleFixed(value, precision);
};
@@ -35,20 +38,28 @@ export function NewsletterGeneralStats({
if (totalSent > 0) {
percentageClicked = (newsletter.statistics.clicked * 100) / totalSent;
percentageOpened = (newsletter.statistics.opened * 100) / totalSent;
- percentageMachineOpened = (newsletter.statistics.machineOpened * 100) / totalSent;
- percentageUnsubscribed = (newsletter.statistics.unsubscribed * 100) / totalSent;
+ percentageMachineOpened =
+ (newsletter.statistics.machineOpened * 100) / totalSent;
+ percentageUnsubscribed =
+ (newsletter.statistics.unsubscribed * 100) / totalSent;
percentageBounced = (newsletter.statistics.bounced * 100) / totalSent;
}
// format by decimal places count
- const percentageClickedDisplay = formatWithOptimalPrecision(percentageClicked);
+ const percentageClickedDisplay =
+ formatWithOptimalPrecision(percentageClicked);
const percentageOpenedDisplay = formatWithOptimalPrecision(percentageOpened);
- const percentageMachineOpenedDisplay = formatWithOptimalPrecision(percentageMachineOpened);
- const percentageUnsubscribedDisplay = formatWithOptimalPrecision(percentageUnsubscribed);
- const percentageBouncedDisplay = formatWithOptimalPrecision(percentageBounced);
-
- const displayBadges = ((totalSent >= minNewslettersSent)
- && (newsletter.statistics.opened >= minNewslettersOpened)
+ const percentageMachineOpenedDisplay = formatWithOptimalPrecision(
+ percentageMachineOpened,
);
+ const percentageUnsubscribedDisplay = formatWithOptimalPrecision(
+ percentageUnsubscribed,
+ );
+ const percentageBouncedDisplay =
+ formatWithOptimalPrecision(percentageBounced);
+
+ const displayBadges =
+ totalSent >= minNewslettersSent &&
+ newsletter.statistics.opened >= minNewslettersOpened;
const opened = (
@@ -80,7 +91,7 @@ export function NewsletterGeneralStats({
data-beacon-article="6124b7fb21ef206e5592e188"
rel="noopener noreferrer"
>
- { match }
+ {match}
),
@@ -113,7 +124,9 @@ export function NewsletterGeneralStats({
const clicked = (
<>
-
+
{percentageClickedDisplay}
{'% '}
@@ -146,26 +159,24 @@ export function NewsletterGeneralStats({
{unsubscribed}
-
- {bounced}
-
+ {bounced}
-
- {clicked}
-
+ {clicked}
{opened}
{machineOpened}
{isWoocommerceActive && (
- {Hooks.applyFilters('mailpoet_newsletters_revenues_stats', null, newsletter.statistics.revenue)}
+ {Hooks.applyFilters(
+ 'mailpoet_newsletters_revenues_stats',
+ null,
+ newsletter.statistics.revenue,
+ )}
)}
- {!isWoocommerceActive && (
-
- )}
+ {!isWoocommerceActive &&
}
@@ -26,7 +25,9 @@ export function NewsletterStatsInfo({
{Array.isArray(newsletter.segments) && newsletter.segments.length && (
- {MailPoet.I18n.t('statsToSegments')}
+
+ {MailPoet.I18n.t('statsToSegments')}
+
{': '}
diff --git a/mailpoet/assets/js/src/newsletters/campaign_stats/page.tsx b/mailpoet/assets/js/src/newsletters/campaign_stats/page.tsx
index 4624012fb5..be92b1f321 100644
--- a/mailpoet/assets/js/src/newsletters/campaign_stats/page.tsx
+++ b/mailpoet/assets/js/src/newsletters/campaign_stats/page.tsx
@@ -39,35 +39,43 @@ function CampaignStatsPage({ match, history, location }: Props) {
loading: true,
});
- const loadItem = useCallback((id) => {
- setState({ loading: true, item: state.item });
- MailPoet.Modal.loading(true);
+ const loadItem = useCallback(
+ (id) => {
+ setState({ loading: true, item: state.item });
+ MailPoet.Modal.loading(true);
- void MailPoet.Ajax.post({
- api_version: MailPoet.apiVersion,
- endpoint: window.mailpoet_display_detailed_stats ? 'stats' : 'newsletters',
- action: window.mailpoet_display_detailed_stats ? 'get' : 'getWithStats',
- data: {
- id,
- },
- }).always(() => {
- MailPoet.Modal.loading(false);
- }).done((response) => {
- setState({
- loading: false,
- item: response.data,
- });
- }).fail((response:ErrorResponse) => {
- MailPoet.Notice.error(
- response.errors.map((error) => error.message),
- { scroll: true },
- );
- setState({
- loading: false,
- });
- history.push('/');
- });
- }, [history, state.item]);
+ void MailPoet.Ajax.post({
+ api_version: MailPoet.apiVersion,
+ endpoint: window.mailpoet_display_detailed_stats
+ ? 'stats'
+ : 'newsletters',
+ action: window.mailpoet_display_detailed_stats ? 'get' : 'getWithStats',
+ data: {
+ id,
+ },
+ })
+ .always(() => {
+ MailPoet.Modal.loading(false);
+ })
+ .done((response) => {
+ setState({
+ loading: false,
+ item: response.data,
+ });
+ })
+ .fail((response: ErrorResponse) => {
+ MailPoet.Notice.error(
+ response.errors.map((error) => error.message),
+ { scroll: true },
+ );
+ setState({
+ loading: false,
+ });
+ history.push('/');
+ });
+ },
+ [history, state.item],
+ );
useEffect(() => {
// Scroll to top in case we're coming
@@ -112,17 +120,40 @@ function CampaignStatsPage({ match, history, location }: Props) {
- {Hooks.applyFilters('mailpoet_newsletters_clicked_links_table', , newsletter.clicked_links)}
+ {Hooks.applyFilters(
+ 'mailpoet_newsletters_clicked_links_table',
+ ,
+ newsletter.clicked_links,
+ )}
- {Hooks.applyFilters('mailpoet_newsletters_purchased_products', null, newsletter)}
+ {Hooks.applyFilters(
+ 'mailpoet_newsletters_purchased_products',
+ null,
+ newsletter,
+ )}
- {Hooks.applyFilters('mailpoet_newsletters_subscriber_engagement', , location, match.params, newsletter)}
+ {Hooks.applyFilters(
+ 'mailpoet_newsletters_subscriber_engagement',
+ ,
+ location,
+ match.params,
+ newsletter,
+ )}
-
- {Hooks.applyFilters('mailpoet_newsletters_bounces', , location, match.params)}
+
+ {Hooks.applyFilters(
+ 'mailpoet_newsletters_bounces',
+ ,
+ location,
+ match.params,
+ )}
diff --git a/mailpoet/assets/js/src/newsletters/campaign_stats/premium_banner.jsx b/mailpoet/assets/js/src/newsletters/campaign_stats/premium_banner.jsx
index 9cc853e8df..6d6edc38cf 100644
--- a/mailpoet/assets/js/src/newsletters/campaign_stats/premium_banner.jsx
+++ b/mailpoet/assets/js/src/newsletters/campaign_stats/premium_banner.jsx
@@ -9,7 +9,7 @@ function SkipDisplayingDetailedStats() {
MailPoet.subscribersCount,
MailPoet.currentWpUserEmail,
'starter',
- { utm_medium: 'stats', utm_campaign: 'signup' }
+ { utm_medium: 'stats', utm_campaign: 'signup' },
)}
target="_blank"
rel="noopener noreferrer"
@@ -20,8 +20,7 @@ function SkipDisplayingDetailedStats() {
const description = (
- {MailPoet.I18n.t('premiumBannerDescription')}
- {' '}
+ {MailPoet.I18n.t('premiumBannerDescription')}{' '}
{MailPoet.I18n.t('learnMore')}
@@ -42,26 +41,28 @@ function SkipDisplayingDetailedStats() {
function PremiumBanner() {
if (!window.mailpoet_display_detailed_stats) {
- return (
-
- );
+ return ;
}
if (window.mailpoet_subscribers_limit_reached) {
const hasValidApiKey = window.mailpoet_has_valid_api_key;
const title = MailPoet.I18n.t('upgradeRequired');
- const youReachedTheLimit = MailPoet.I18n.t(hasValidApiKey ? 'newsletterYourPlanLimit' : 'newsletterFreeVersionLimit')
+ const youReachedTheLimit = MailPoet.I18n.t(
+ hasValidApiKey ? 'newsletterYourPlanLimit' : 'newsletterFreeVersionLimit',
+ )
.replace('[subscribersLimit]', window.mailpoet_subscribers_limit)
.replace('[subscribersCount]', window.mailpoet_subscribers_count);
const upgradeLink = hasValidApiKey
? MailPoet.MailPoetComUrlFactory.getUpgradeUrl(MailPoet.pluginPartialKey)
- : MailPoet.MailPoetComUrlFactory.getPurchasePlanUrl(window.mailpoet_subscribers_count + 1);
+ : MailPoet.MailPoetComUrlFactory.getPurchasePlanUrl(
+ window.mailpoet_subscribers_count + 1,
+ );
return (
{youReachedTheLimit})}
- actionButton={(
+ message={{youReachedTheLimit}
}
+ actionButton={
{MailPoet.I18n.t('upgradeNow')}
- )}
+ }
/>
);
diff --git a/mailpoet/assets/js/src/newsletters/listings/heading_display.jsx b/mailpoet/assets/js/src/newsletters/listings/heading_display.jsx
index 5546d6d799..4c103d9b7a 100644
--- a/mailpoet/assets/js/src/newsletters/listings/heading_display.jsx
+++ b/mailpoet/assets/js/src/newsletters/listings/heading_display.jsx
@@ -1,7 +1,8 @@
import { withRouter } from 'react-router-dom';
import { mapPathToSteps } from './heading_steps.tsx';
-const isHeaderHidden = (location) => location.hash.match(/^#\/new/) || location.pathname.match(/^\/new/);
+const isHeaderHidden = (location) =>
+ location.hash.match(/^#\/new/) || location.pathname.match(/^\/new/);
function ListingHeadingDisplay({ children, location }) {
const stepNumber = mapPathToSteps(location);
diff --git a/mailpoet/assets/js/src/newsletters/listings/heading_steps.tsx b/mailpoet/assets/js/src/newsletters/listings/heading_steps.tsx
index 826a9f49c5..3a1e71b415 100644
--- a/mailpoet/assets/js/src/newsletters/listings/heading_steps.tsx
+++ b/mailpoet/assets/js/src/newsletters/listings/heading_steps.tsx
@@ -17,7 +17,10 @@ export const mapPathToSteps = (location: Location): number | null => {
let stepNumber = null;
stepsMap.forEach(([regex, step]) => {
- if ((new RegExp(`^#${regex}`)).exec(location.hash) || (new RegExp(`^${regex}`)).exec(location.pathname)) {
+ if (
+ new RegExp(`^#${regex}`).exec(location.hash) ||
+ new RegExp(`^${regex}`).exec(location.pathname)
+ ) {
stepNumber = step;
}
});
@@ -56,7 +59,10 @@ const stepsListingHeading = (
): JSX.Element => {
const emailTypeTitle = getEmailTypeTitle(emailType);
return (
-
+
-
{' '}
+
+ {' '}
+
);
};
diff --git a/mailpoet/assets/js/src/newsletters/listings/heading_steps_route.tsx b/mailpoet/assets/js/src/newsletters/listings/heading_steps_route.tsx
index 3716d06e01..5b5fcaa5ee 100644
--- a/mailpoet/assets/js/src/newsletters/listings/heading_steps_route.tsx
+++ b/mailpoet/assets/js/src/newsletters/listings/heading_steps_route.tsx
@@ -3,8 +3,8 @@ import ListingHeadingSteps, { Props } from './heading_steps';
interface PropsWithRouter extends RouteComponentProps, Props {}
-const ListingHeadingStepsRoute = withRouter(
- (props: PropsWithRouter) => (
),
-);
+const ListingHeadingStepsRoute = withRouter((props: PropsWithRouter) => (
+
+));
export default ListingHeadingStepsRoute;
diff --git a/mailpoet/assets/js/src/newsletters/listings/notification.jsx b/mailpoet/assets/js/src/newsletters/listings/notification.jsx
index 62cc6a729b..1901cf491e 100644
--- a/mailpoet/assets/js/src/newsletters/listings/notification.jsx
+++ b/mailpoet/assets/js/src/newsletters/listings/notification.jsx
@@ -27,19 +27,19 @@ import {
} from 'newsletters/scheduling/common.jsx';
const messages = {
- onNoItemsFound: (group, search) => MailPoet.I18n.t(search ? 'noItemsFound' : 'emptyListing'),
+ onNoItemsFound: (group, search) =>
+ MailPoet.I18n.t(search ? 'noItemsFound' : 'emptyListing'),
onTrash: (response) => {
const count = Number(response.meta.count);
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneNewsletterTrashed')
- );
+ message = MailPoet.I18n.t('oneNewsletterTrashed');
} else {
- message = (
- MailPoet.I18n.t('multipleNewslettersTrashed')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleNewslettersTrashed').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -48,13 +48,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneNewsletterDeleted')
- );
+ message = MailPoet.I18n.t('oneNewsletterDeleted');
} else {
- message = (
- MailPoet.I18n.t('multipleNewslettersDeleted')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleNewslettersDeleted').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -63,13 +62,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneNewsletterRestored')
- );
+ message = MailPoet.I18n.t('oneNewsletterRestored');
} else {
- message = (
- MailPoet.I18n.t('multipleNewslettersRestored')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleNewslettersRestored').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -115,7 +113,11 @@ const newsletterActions = [
name: 'view',
link: function link(newsletter) {
return (
-
+
{MailPoet.I18n.t('preview')}
);
@@ -139,19 +141,24 @@ const newsletterActions = [
data: {
id: newsletter.id,
},
- }).done((response) => {
- MailPoet.Notice.success(
- (MailPoet.I18n.t('newsletterDuplicated')).replace('%1$s', response.data.subject)
- );
- refresh();
- }).fail((response) => {
- if (response.errors.length > 0) {
- MailPoet.Notice.error(
- response.errors.map((error) => error.message),
- { scroll: true }
+ })
+ .done((response) => {
+ MailPoet.Notice.success(
+ MailPoet.I18n.t('newsletterDuplicated').replace(
+ '%1$s',
+ response.data.subject,
+ ),
);
- }
- });
+ refresh();
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ MailPoet.Notice.error(
+ response.errors.map((error) => error.message),
+ { scroll: true },
+ );
+ }
+ });
},
},
{
@@ -181,18 +188,20 @@ class NewsletterListNotification extends Component {
id: Number(e.target.getAttribute('data-id')),
status: checked ? 'active' : 'draft',
},
- }).done((response) => {
- if (response.data.status === 'active') {
- MailPoet.Notice.success(MailPoet.I18n.t('postNotificationActivated'));
- }
- // force refresh of listing so that groups are updated
- this.forceUpdate();
- }).fail((response) => {
- MailPoet.Notice.showApiErrorNotice(response);
+ })
+ .done((response) => {
+ if (response.data.status === 'active') {
+ MailPoet.Notice.success(MailPoet.I18n.t('postNotificationActivated'));
+ }
+ // force refresh of listing so that groups are updated
+ this.forceUpdate();
+ })
+ .fail((response) => {
+ MailPoet.Notice.showApiErrorNotice(response);
- // reset value to previous newsletter's status
- e.target.checked = !checked;
- });
+ // reset value to previous newsletter's status
+ e.target.checked = !checked;
+ });
};
renderStatus = (newsletter) => (
@@ -212,7 +221,7 @@ class NewsletterListNotification extends Component {
if (newsletter.segments.length === 0) {
return (
- { MailPoet.I18n.t('sendingToSegmentsNotSpecified') }
+ {MailPoet.I18n.t('sendingToSegmentsNotSpecified')}
);
}
@@ -220,27 +229,35 @@ class NewsletterListNotification extends Component {
const sendingToSegments = ReactStringReplace(
MailPoet.I18n.t('sendTo'),
'%1$s',
- (match, i) => (
-
- )
+ (match, i) =>
,
);
// set sending frequency
switch (newsletter.options.intervalType) {
case 'daily':
- sendingFrequency = MailPoet.I18n.t('sendDaily').replace('%1$s', timeOfDayValues[newsletter.options.timeOfDay]);
+ sendingFrequency = MailPoet.I18n.t('sendDaily').replace(
+ '%1$s',
+ timeOfDayValues[newsletter.options.timeOfDay],
+ );
break;
case 'weekly':
- sendingFrequency = MailPoet.I18n.t('sendWeekly').replace('%1$s', weekDayValues[newsletter.options.weekDay]).replace('%2$s', timeOfDayValues[newsletter.options.timeOfDay]);
+ sendingFrequency = MailPoet.I18n.t('sendWeekly')
+ .replace('%1$s', weekDayValues[newsletter.options.weekDay])
+ .replace('%2$s', timeOfDayValues[newsletter.options.timeOfDay]);
break;
case 'monthly':
- sendingFrequency = MailPoet.I18n.t('sendMonthly').replace('%1$s', monthDayValues[newsletter.options.monthDay]).replace('%2$s', timeOfDayValues[newsletter.options.timeOfDay]);
+ sendingFrequency = MailPoet.I18n.t('sendMonthly')
+ .replace('%1$s', monthDayValues[newsletter.options.monthDay])
+ .replace('%2$s', timeOfDayValues[newsletter.options.timeOfDay]);
break;
case 'nthWeekDay':
- sendingFrequency = MailPoet.I18n.t('sendNthWeekDay').replace('%1$s', nthWeekDayValues[newsletter.options.nthWeekDay]).replace('%2$s', weekDayValues[newsletter.options.weekDay]).replace('%3$s', timeOfDayValues[newsletter.options.timeOfDay]);
+ sendingFrequency = MailPoet.I18n.t('sendNthWeekDay')
+ .replace('%1$s', nthWeekDayValues[newsletter.options.nthWeekDay])
+ .replace('%2$s', weekDayValues[newsletter.options.weekDay])
+ .replace('%3$s', timeOfDayValues[newsletter.options.timeOfDay]);
break;
case 'immediately':
@@ -254,19 +271,19 @@ class NewsletterListNotification extends Component {
return (
- { sendingToSegments }
+ {sendingToSegments}
- { sendingFrequency }
+ {sendingFrequency}
);
};
renderHistoryLink = (newsletter) => {
- const childrenCount = Number((newsletter.children_count));
+ const childrenCount = Number(newsletter.children_count);
if (childrenCount === 0) {
return (
@@ -280,8 +297,16 @@ class NewsletterListNotification extends Component {
data-automation-id={`history-${newsletter.id}`}
to={`/notification/history/${newsletter.id}`}
>
- { MailPoet.I18n.t('viewHistory') }
- { MailPoet.I18n.t('viewHistory') }
+
+ {MailPoet.I18n.t('viewHistory')}
+
+
+ {MailPoet.I18n.t('viewHistory')}
+
);
};
@@ -290,7 +315,7 @@ class NewsletterListNotification extends Component {
const rowClasses = classNames(
'manage-column',
'column-primary',
- 'has-row-actions'
+ 'has-row-actions',
);
return (
@@ -300,23 +325,29 @@ class NewsletterListNotification extends Component {
className="mailpoet-listing-title"
href={`?page=mailpoet-newsletter-editor&id=${newsletter.id}`}
>
- { newsletter.subject }
+ {newsletter.subject}
- { actions }
+ {actions}
-
- { this.renderSettings(newsletter) }
+
+ {this.renderSettings(newsletter)}
- { this.renderHistoryLink(newsletter) }
+ {this.renderHistoryLink(newsletter)}
- { this.renderStatus(newsletter) }
+ {this.renderStatus(newsletter)}
-
- { MailPoet.Date.short(newsletter.updated_at) }
+
+ {MailPoet.Date.short(newsletter.updated_at)}
- { MailPoet.Date.time(newsletter.updated_at) }
+ {MailPoet.Date.time(newsletter.updated_at)}
);
@@ -353,7 +384,10 @@ class NewsletterListNotification extends Component {
sort_order="desc"
afterGetItems={(state) => {
if (!state.loading) {
- const total = state.groups.reduce((count, group) => (count + group.count), 0);
+ const total = state.groups.reduce(
+ (count, group) => count + group.count,
+ 0,
+ );
this.setState({ newslettersCount: total });
}
checkMailerStatus(state);
diff --git a/mailpoet/assets/js/src/newsletters/listings/notification_history.jsx b/mailpoet/assets/js/src/newsletters/listings/notification_history.jsx
index c1894750e4..5f2d62b69d 100644
--- a/mailpoet/assets/js/src/newsletters/listings/notification_history.jsx
+++ b/mailpoet/assets/js/src/newsletters/listings/notification_history.jsx
@@ -41,19 +41,19 @@ const columns = [
];
const messages = {
- onNoItemsFound: (group, search) => MailPoet.I18n.t(search ? 'noItemsFound' : 'emptyListing'),
+ onNoItemsFound: (group, search) =>
+ MailPoet.I18n.t(search ? 'noItemsFound' : 'emptyListing'),
onTrash: (response) => {
const count = Number(response.meta.count);
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneNewsletterTrashed')
- );
+ message = MailPoet.I18n.t('oneNewsletterTrashed');
} else {
- message = (
- MailPoet.I18n.t('multipleNewslettersTrashed')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleNewslettersTrashed').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -62,13 +62,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneNewsletterDeleted')
- );
+ message = MailPoet.I18n.t('oneNewsletterDeleted');
} else {
- message = (
- MailPoet.I18n.t('multipleNewslettersDeleted')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleNewslettersDeleted').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -77,13 +76,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneNewsletterRestored')
- );
+ message = MailPoet.I18n.t('oneNewsletterRestored');
} else {
- message = (
- MailPoet.I18n.t('multipleNewslettersRestored')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleNewslettersRestored').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -102,7 +100,11 @@ const newsletterActions = addStatsCTAAction([
name: 'view',
link: function link(newsletter) {
return (
-
+
{MailPoet.I18n.t('preview')}
);
@@ -118,7 +120,7 @@ const renderItem = (newsletter, actions, meta) => {
const rowClasses = classNames(
'manage-column',
'column-primary',
- 'has-row-actions'
+ 'has-row-actions',
);
return (
@@ -130,28 +132,40 @@ const renderItem = (newsletter, actions, meta) => {
target="_blank"
rel="noopener noreferrer"
>
- { newsletter.queue.newsletter_rendered_subject || newsletter.subject }
+ {newsletter.queue.newsletter_rendered_subject || newsletter.subject}
- { actions }
+ {actions}
-
+
-
+
- { (mailpoetTrackingEnabled === true) ? (
-
+ {mailpoetTrackingEnabled === true ? (
+
- ) : null }
-
- { (newsletter.sent_at) ? (
+ ) : null}
+
+ {newsletter.sent_at ? (
<>
- { MailPoet.Date.short(newsletter.sent_at) }
+ {MailPoet.Date.short(newsletter.sent_at)}
- { MailPoet.Date.time(newsletter.sent_at) }
+ {MailPoet.Date.time(newsletter.sent_at)}
>
) : null}
diff --git a/mailpoet/assets/js/src/newsletters/listings/queue_status.jsx b/mailpoet/assets/js/src/newsletters/listings/queue_status.jsx
index f4393c7651..36dd5e7373 100644
--- a/mailpoet/assets/js/src/newsletters/listings/queue_status.jsx
+++ b/mailpoet/assets/js/src/newsletters/listings/queue_status.jsx
@@ -18,10 +18,7 @@ const NewsletterPropType = PropTypes.shape({
id: PropTypes.number.isRequired,
sent_at: PropTypes.string,
status: PropTypes.string.isRequired,
- queue: PropTypes.oneOfType([
- QueuePropType,
- PropTypes.bool,
- ]),
+ queue: PropTypes.oneOfType([QueuePropType, PropTypes.bool]),
});
function QueueSending({ newsletter }) {
@@ -59,8 +56,16 @@ function QueueSending({ newsletter }) {
return (
<>
- {paused &&
{MailPoet.I18n.t('resume')} }
- {!paused &&
{MailPoet.I18n.t('pause')} }
+ {paused && (
+
+ {MailPoet.I18n.t('resume')}
+
+ )}
+ {!paused && (
+
+ {MailPoet.I18n.t('pause')}
+
+ )}
>
);
}
@@ -71,14 +76,22 @@ QueueSending.propTypes = {
function QueueStatus({ newsletter, mailerLog }) {
let newsletterDate = newsletter.sent_at || newsletter.queue.scheduled_at;
if (newsletterDate) {
- newsletterDate = parseDate(newsletterDate, 'yyyy-MM-dd HH:mm:ss', new Date());
+ newsletterDate = parseDate(
+ newsletterDate,
+ 'yyyy-MM-dd HH:mm:ss',
+ new Date(),
+ );
}
- const isNewsletterSending = newsletter.queue && newsletter.queue.status !== 'scheduled';
+ const isNewsletterSending =
+ newsletter.queue && newsletter.queue.status !== 'scheduled';
const isMtaPaused = mailerLog.status === 'paused';
const renderSentNewsletter = (
<>
-
+
- {(newsletter.queue.status !== 'completed' && !isMtaPaused) &&
}
+ {newsletter.queue.status !== 'completed' && !isMtaPaused && (
+
+ )}
>
);
diff --git a/mailpoet/assets/js/src/newsletters/listings/re_engagement.jsx b/mailpoet/assets/js/src/newsletters/listings/re_engagement.jsx
index 0b5ae94a8e..923c5ac6b5 100644
--- a/mailpoet/assets/js/src/newsletters/listings/re_engagement.jsx
+++ b/mailpoet/assets/js/src/newsletters/listings/re_engagement.jsx
@@ -21,19 +21,19 @@ import NewsletterTypes from 'newsletters/types';
const mailpoetTrackingEnabled = MailPoet.trackingConfig.emailTrackingEnabled;
const messages = {
- onNoItemsFound: (group, search) => MailPoet.I18n.t(search ? 'noItemsFound' : 'emptyListing'),
+ onNoItemsFound: (group, search) =>
+ MailPoet.I18n.t(search ? 'noItemsFound' : 'emptyListing'),
onTrash: (response) => {
const count = Number(response.meta.count);
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneNewsletterTrashed')
- );
+ message = MailPoet.I18n.t('oneNewsletterTrashed');
} else {
- message = (
- MailPoet.I18n.t('multipleNewslettersTrashed')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleNewslettersTrashed').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -42,13 +42,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneNewsletterDeleted')
- );
+ message = MailPoet.I18n.t('oneNewsletterDeleted');
} else {
- message = (
- MailPoet.I18n.t('multipleNewslettersDeleted')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleNewslettersDeleted').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -57,13 +56,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneNewsletterRestored')
- );
+ message = MailPoet.I18n.t('oneNewsletterRestored');
} else {
- message = (
- MailPoet.I18n.t('multipleNewslettersRestored')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleNewslettersRestored').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -109,7 +107,11 @@ let newsletterActions = [
name: 'view',
link: function link(newsletter) {
return (
-
+
{MailPoet.I18n.t('preview')}
);
@@ -119,24 +121,32 @@ let newsletterActions = [
name: 'duplicate',
className: 'mailpoet-hide-on-mobile',
label: MailPoet.I18n.t('duplicate'),
- onClick: (newsletter, refresh) => MailPoet.Ajax.post({
- api_version: window.mailpoet_api_version,
- endpoint: 'newsletters',
- action: 'duplicate',
- data: {
- id: newsletter.id,
- },
- }).done((response) => {
- MailPoet.Notice.success((MailPoet.I18n.t('newsletterDuplicated')).replace('%1$s', response.data.subject));
- refresh();
- }).fail((response) => {
- if (response.errors.length > 0) {
- MailPoet.Notice.error(
- response.errors.map((error) => error.message),
- { scroll: true }
- );
- }
- }),
+ onClick: (newsletter, refresh) =>
+ MailPoet.Ajax.post({
+ api_version: window.mailpoet_api_version,
+ endpoint: 'newsletters',
+ action: 'duplicate',
+ data: {
+ id: newsletter.id,
+ },
+ })
+ .done((response) => {
+ MailPoet.Notice.success(
+ MailPoet.I18n.t('newsletterDuplicated').replace(
+ '%1$s',
+ response.data.subject,
+ ),
+ );
+ refresh();
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ MailPoet.Notice.error(
+ response.errors.map((error) => error.message),
+ { scroll: true },
+ );
+ }
+ }),
},
{
name: 'edit',
@@ -172,23 +182,29 @@ class NewsletterListReEngagement extends Component {
id: Number(e.target.getAttribute('data-id')),
status: checked ? 'active' : 'draft',
},
- }).done((response) => {
- if (response.data.status === 'active') {
- MailPoet.Notice.success(MailPoet.I18n.t('reEngagementEmailActivated'));
- }
- // force refresh of listing so that groups are updated
- this.forceUpdate();
- }).fail((response) => {
- MailPoet.Notice.showApiErrorNotice(response);
+ })
+ .done((response) => {
+ if (response.data.status === 'active') {
+ MailPoet.Notice.success(
+ MailPoet.I18n.t('reEngagementEmailActivated'),
+ );
+ }
+ // force refresh of listing so that groups are updated
+ this.forceUpdate();
+ })
+ .fail((response) => {
+ MailPoet.Notice.showApiErrorNotice(response);
- // reset value to previous newsletter's status
- e.target.checked = !checked;
- });
+ // reset value to previous newsletter's status
+ e.target.checked = !checked;
+ });
};
renderStatus = (newsletter) => {
- const totalSentMessage = MailPoet.I18n.t('sentToXSubscribers')
- .replace('%1$d', newsletter.total_sent.toLocaleString());
+ const totalSentMessage = MailPoet.I18n.t('sentToXSubscribers').replace(
+ '%1$d',
+ newsletter.total_sent.toLocaleString(),
+ );
return (
@@ -204,7 +220,7 @@ class NewsletterListReEngagement extends Component {
to={`/sending-status/${newsletter.id}`}
data-automation-id={`sending_status_${newsletter.id}`}
>
- { totalSentMessage }
+ {totalSentMessage}
@@ -215,24 +231,31 @@ class NewsletterListReEngagement extends Component {
if (newsletter.segments.length === 0) {
return (
- { MailPoet.I18n.t('sendingToSegmentsNotSpecified') }
+ {MailPoet.I18n.t('sendingToSegmentsNotSpecified')}
);
}
const sendingToSegments = ReactStringReplace(
MailPoet.I18n.t('sendTo'),
'%1$s',
- (match, i) => (
-
- )
+ (match, i) =>
,
);
let frequencyKey = 'reEngagementFrequencyMonth';
- if ((newsletter.options.afterTimeNumber > 1) && (newsletter.options.afterTimeType === 'months')) {
+ if (
+ newsletter.options.afterTimeNumber > 1 &&
+ newsletter.options.afterTimeType === 'months'
+ ) {
frequencyKey = 'reEngagementFrequencyMonths';
- } else if ((newsletter.options.afterTimeNumber > 1) && (newsletter.options.afterTimeType === 'weeks')) {
+ } else if (
+ newsletter.options.afterTimeNumber > 1 &&
+ newsletter.options.afterTimeType === 'weeks'
+ ) {
frequencyKey = 'reEngagementFrequencyWeeks';
- } else if ((newsletter.options.afterTimeNumber === 1) && (newsletter.options.afterTimeType === 'weeks')) {
+ } else if (
+ newsletter.options.afterTimeNumber === 1 &&
+ newsletter.options.afterTimeType === 'weeks'
+ ) {
frequencyKey = 'reEngagementFrequencyWeek';
}
@@ -242,12 +265,12 @@ class NewsletterListReEngagement extends Component {
return (
- { sendingToSegments }
+ {sendingToSegments}
- { sendingFrequency }
+ {sendingFrequency}
);
@@ -257,7 +280,7 @@ class NewsletterListReEngagement extends Component {
const rowClasses = classNames(
'manage-column',
'column-primary',
- 'has-row-actions'
+ 'has-row-actions',
);
return (
@@ -267,28 +290,37 @@ class NewsletterListReEngagement extends Component {
className="mailpoet-listing-title"
href={`?page=mailpoet-newsletter-editor&id=${newsletter.id}`}
>
- { newsletter.subject }
+ {newsletter.subject}
- { actions }
+ {actions}
-
- { this.renderSettings(newsletter) }
+
+ {this.renderSettings(newsletter)}
- { (mailpoetTrackingEnabled === true) ? (
-
+ {mailpoetTrackingEnabled === true ? (
+
0 && !!newsletter.statistics}
/>
- ) : null }
+ ) : null}
- { this.renderStatus(newsletter) }
+ {this.renderStatus(newsletter)}
-
- { MailPoet.Date.short(newsletter.updated_at) }
+
+ {MailPoet.Date.short(newsletter.updated_at)}
- { MailPoet.Date.time(newsletter.updated_at) }
+ {MailPoet.Date.time(newsletter.updated_at)}
);
@@ -325,7 +357,10 @@ class NewsletterListReEngagement extends Component {
sort_order="desc"
afterGetItems={(state) => {
if (!state.loading) {
- const total = state.groups.reduce((count, group) => (count + group.count), 0);
+ const total = state.groups.reduce(
+ (count, group) => count + group.count,
+ 0,
+ );
this.setState({ newslettersCount: total });
}
checkMailerStatus(state);
diff --git a/mailpoet/assets/js/src/newsletters/listings/standard.jsx b/mailpoet/assets/js/src/newsletters/listings/standard.jsx
index 90e96cfbfa..0e3809dc67 100644
--- a/mailpoet/assets/js/src/newsletters/listings/standard.jsx
+++ b/mailpoet/assets/js/src/newsletters/listings/standard.jsx
@@ -20,19 +20,19 @@ import { GlobalContext } from 'context/index.jsx';
const mailpoetTrackingEnabled = MailPoet.trackingConfig.emailTrackingEnabled;
const messages = {
- onNoItemsFound: (group, search) => MailPoet.I18n.t(search ? 'noItemsFound' : 'emptyListing'),
+ onNoItemsFound: (group, search) =>
+ MailPoet.I18n.t(search ? 'noItemsFound' : 'emptyListing'),
onTrash: (response) => {
const count = Number(response.meta.count);
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneNewsletterTrashed')
- );
+ message = MailPoet.I18n.t('oneNewsletterTrashed');
} else {
- message = (
- MailPoet.I18n.t('multipleNewslettersTrashed')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleNewslettersTrashed').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -41,13 +41,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneNewsletterDeleted')
- );
+ message = MailPoet.I18n.t('oneNewsletterDeleted');
} else {
- message = (
- MailPoet.I18n.t('multipleNewslettersDeleted')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleNewslettersDeleted').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -56,13 +55,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneNewsletterRestored')
- );
+ message = MailPoet.I18n.t('oneNewsletterRestored');
} else {
- message = (
- MailPoet.I18n.t('multipleNewslettersRestored')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleNewslettersRestored').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -107,9 +105,9 @@ const confirmEdit = (newsletter) => {
window.location.href = `?page=mailpoet-newsletter-editor&id=${newsletter.id}`;
};
if (
- !newsletter.queue
- || newsletter.status !== 'sending'
- || newsletter.queue.status !== null
+ !newsletter.queue ||
+ newsletter.status !== 'sending' ||
+ newsletter.queue.status !== null
) {
redirectToEditing();
} else {
@@ -125,7 +123,11 @@ let newsletterActions = [
name: 'view',
link: function link(newsletter) {
return (
-
+
{MailPoet.I18n.t('preview')}
);
@@ -149,19 +151,24 @@ let newsletterActions = [
data: {
id: newsletter.id,
},
- }).done((response) => {
- MailPoet.Notice.success(
- (MailPoet.I18n.t('newsletterDuplicated')).replace('%1$s', response.data.subject)
- );
- refresh();
- }).fail((response) => {
- if (response.errors.length > 0) {
- MailPoet.Notice.error(
- response.errors.map((error) => error.message),
- { scroll: true }
+ })
+ .done((response) => {
+ MailPoet.Notice.success(
+ MailPoet.I18n.t('newsletterDuplicated').replace(
+ '%1$s',
+ response.data.subject,
+ ),
);
- }
- });
+ refresh();
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ MailPoet.Notice.error(
+ response.errors.map((error) => error.message),
+ { scroll: true },
+ );
+ }
+ });
},
},
{
@@ -183,7 +190,7 @@ class NewsletterListStandard extends Component {
const rowClasses = classNames(
'manage-column',
'column-primary',
- 'has-row-actions'
+ 'has-row-actions',
);
return (
@@ -197,27 +204,42 @@ class NewsletterListStandard extends Component {
confirmEdit(newsletter);
}}
>
- { newsletter.queue.newsletter_rendered_subject || newsletter.subject }
+ {newsletter.queue.newsletter_rendered_subject || newsletter.subject}
- { actions }
+ {actions}
-
+
-
+
- { (mailpoetTrackingEnabled === true) ? (
-
-
+ {mailpoetTrackingEnabled === true ? (
+
+
- ) : null }
-
- { (newsletter.sent_at) ? (
+ ) : null}
+
+ {newsletter.sent_at ? (
<>
- { MailPoet.Date.short(newsletter.sent_at) }
+ {MailPoet.Date.short(newsletter.sent_at)}
- { MailPoet.Date.time(newsletter.sent_at) }
+ {MailPoet.Date.time(newsletter.sent_at)}
>
) : null}
@@ -256,7 +278,10 @@ class NewsletterListStandard extends Component {
sort_order="desc"
afterGetItems={(state) => {
if (!state.loading) {
- const total = state.groups.reduce((count, group) => (count + group.count), 0);
+ const total = state.groups.reduce(
+ (count, group) => count + group.count,
+ 0,
+ );
this.setState({ newslettersCount: total });
}
checkMailerStatus(state);
diff --git a/mailpoet/assets/js/src/newsletters/listings/statistics.jsx b/mailpoet/assets/js/src/newsletters/listings/statistics.jsx
index 448e7ed71a..9cae4a5050 100644
--- a/mailpoet/assets/js/src/newsletters/listings/statistics.jsx
+++ b/mailpoet/assets/js/src/newsletters/listings/statistics.jsx
@@ -24,11 +24,7 @@ const wrapInLink = (content, params, id, totalSent) => {
);
}
return (
-
+
{content}
);
@@ -38,9 +34,10 @@ function Statistics({ newsletter, isSent, currentTime }) {
let sent = isSent;
if (sent === undefined) {
// condition for standard and post notification listings
- sent = newsletter.statistics
- && newsletter.queue
- && newsletter.queue.status !== 'scheduled';
+ sent =
+ newsletter.statistics &&
+ newsletter.queue &&
+ newsletter.queue.status !== 'scheduled';
}
if (!sent) {
return null;
@@ -48,11 +45,16 @@ function Statistics({ newsletter, isSent, currentTime }) {
const params = {
link: `/stats/${newsletter.id}`,
- onClick: Hooks.applyFilters('mailpoet_newsletters_listing_stats_tracking', trackStatsCTAClicked),
+ onClick: Hooks.applyFilters(
+ 'mailpoet_newsletters_listing_stats_tracking',
+ trackStatsCTAClicked,
+ ),
};
// welcome emails provide explicit total_sent value
- const totalSent = Number((newsletter.total_sent || newsletter.queue.count_processed));
+ const totalSent = Number(
+ newsletter.total_sent || newsletter.queue.count_processed,
+ );
let percentageClicked = 0;
let percentageOpened = 0;
@@ -73,7 +75,8 @@ function Statistics({ newsletter, isSent, currentTime }) {
// standard emails and post notifications:
// display green box for newsletters that were just sent
showStatsTimeout = 6; // in hours
- newsletterDate = newsletter.queue.scheduled_at || newsletter.queue.created_at;
+ newsletterDate =
+ newsletter.queue.scheduled_at || newsletter.queue.created_at;
sentHoursAgo = moment(currentTime).diff(moment(newsletterDate), 'hours');
tooEarlyForStats = sentHoursAgo < showStatsTimeout;
showKbLink = true;
@@ -83,28 +86,26 @@ function Statistics({ newsletter, isSent, currentTime }) {
showKbLink = false;
}
- const improveStatsKBLink = 'https://kb.mailpoet.com/article/191-how-to-improve-my-open-and-click-rates';
+ const improveStatsKBLink =
+ 'https://kb.mailpoet.com/article/191-how-to-improve-my-open-and-click-rates';
// thresholds to display badges
const minNewslettersSent = 20;
const minNewsletterOpens = 5;
- const showBadges = totalSent >= minNewslettersSent
- && newsletter.statistics.opened >= minNewsletterOpens
- && !tooEarlyForStats;
+ const showBadges =
+ totalSent >= minNewslettersSent &&
+ newsletter.statistics.opened >= minNewsletterOpens &&
+ !tooEarlyForStats;
- const wrapContentInLink = (content, idPrefix) => wrapInLink(
- content,
- params,
- `${idPrefix}-${newsletter.id}`,
- totalSent
- );
+ const wrapContentInLink = (content, idPrefix) =>
+ wrapInLink(content, params, `${idPrefix}-${newsletter.id}`, totalSent);
const openedClickedAndRevenueStats = (
0) ? revenue.formatted : null}
+ revenues={revenue && revenue.value > 0 ? revenue.formatted : null}
hideBadges={!showBadges}
newsletterId={newsletter.id}
wrapContentInLink={wrapContentInLink}
@@ -114,14 +115,21 @@ function Statistics({ newsletter, isSent, currentTime }) {
const content = (
<>
{openedClickedAndRevenueStats}
- {tooEarlyForStats && wrapContentInLink(
- (
-
- {MailPoet.I18n.t('checkBackInHours').replace('%1$d', showStatsTimeout - sentHoursAgo)}
-
- ),
- 'check-back'
- )}
+ {tooEarlyForStats &&
+ wrapContentInLink(
+
+ {MailPoet.I18n.t('checkBackInHours').replace(
+ '%1$d',
+ showStatsTimeout - sentHoursAgo,
+ )}
+ ,
+ 'check-back',
+ )}
>
);
@@ -131,10 +139,11 @@ function Statistics({ newsletter, isSent, currentTime }) {
const minTotalSent = 10;
let afterContent;
- if (showKbLink
- && percentageOpened < maxPercentageOpened
- && sentHoursAgo >= minSentHoursAgo
- && totalSent >= minTotalSent
+ if (
+ showKbLink &&
+ percentageOpened < maxPercentageOpened &&
+ sentHoursAgo >= minSentHoursAgo &&
+ totalSent >= minTotalSent
) {
// help link for bad open rate
afterContent = (
@@ -183,15 +192,9 @@ const QueuePropType = PropTypes.shape({
Statistics.propTypes = {
newsletter: PropTypes.shape({
id: PropTypes.number.isRequired,
- queue: PropTypes.oneOfType([
- QueuePropType,
- PropTypes.bool,
- ]),
+ queue: PropTypes.oneOfType([QueuePropType, PropTypes.bool]),
total_sent: PropTypes.number,
- statistics: PropTypes.oneOfType([
- StatisticsPropType,
- PropTypes.bool,
- ]),
+ statistics: PropTypes.oneOfType([StatisticsPropType, PropTypes.bool]),
}).isRequired,
isSent: PropTypes.bool,
currentTime: PropTypes.string,
diff --git a/mailpoet/assets/js/src/newsletters/listings/utils.jsx b/mailpoet/assets/js/src/newsletters/listings/utils.jsx
index 6b0593adcb..a155583d5a 100644
--- a/mailpoet/assets/js/src/newsletters/listings/utils.jsx
+++ b/mailpoet/assets/js/src/newsletters/listings/utils.jsx
@@ -17,7 +17,10 @@ export const addStatsCTAAction = (actions) => {
return (
{MailPoet.I18n.t('statsListingActionTitle')}
@@ -25,7 +28,8 @@ export const addStatsCTAAction = (actions) => {
},
display: function display(newsletter) {
// welcome emails provide explicit total_sent value
- const countProcessed = newsletter.queue && newsletter.queue.count_processed;
+ const countProcessed =
+ newsletter.queue && newsletter.queue.count_processed;
return Number(newsletter.total_sent || countProcessed) > 0;
},
});
@@ -33,15 +37,22 @@ export const addStatsCTAAction = (actions) => {
};
export const checkMailerStatus = (state) => {
- if (state.meta.mta_log.error && state.meta.mta_log.error.operation === 'authorization') {
+ if (
+ state.meta.mta_log.error &&
+ state.meta.mta_log.error.operation === 'authorization'
+ ) {
MailPoet.Notice.hide('mailpoet_notice_being_sent');
- if (state.meta.mta_log.error.error_message.indexOf('mailpoet-js-button-resume-sending') >= 0) {
+ if (
+ state.meta.mta_log.error.error_message.indexOf(
+ 'mailpoet-js-button-resume-sending',
+ ) >= 0
+ ) {
jQuery('.mailpoet-js-error-unauthorized-emails-notice').hide(); // prevent duplicate notices
}
- MailPoet.Notice.error(
- state.meta.mta_log.error.error_message,
- { static: true, id: 'mailpoet_authorization_error' }
- );
+ MailPoet.Notice.error(state.meta.mta_log.error.error_message, {
+ static: true,
+ id: 'mailpoet_authorization_error',
+ });
}
};
@@ -62,34 +73,37 @@ export const checkCronStatus = (state) => {
rel="noopener noreferrer"
key="check-cron"
>
- { match }
+ {match}
- )
+ ),
);
- MailPoet.Notice.error(
- '',
- { static: true, id: 'mailpoet_cron_error' }
- );
+ MailPoet.Notice.error('', { static: true, id: 'mailpoet_cron_error' });
ReactDOM.render(
- (
-
-
{cronPingCheckNotice}
-
- ),
- jQuery('[data-id="mailpoet_cron_error"]')[0]
+
+
{cronPingCheckNotice}
+
,
+ jQuery('[data-id="mailpoet_cron_error"]')[0],
);
};
-export const newsletterTypesWithActivation = ['automatic', 'welcome', 'notification', 're_engagement'];
+export const newsletterTypesWithActivation = [
+ 'automatic',
+ 'welcome',
+ 'notification',
+ 're_engagement',
+];
export const confirmEdit = (newsletter) => {
const redirectToEditing = () => {
window.location.href = `?page=mailpoet-newsletter-editor&id=${newsletter.id}`;
};
- if (newsletterTypesWithActivation.includes(newsletter.type) && newsletter.status === 'active') {
+ if (
+ newsletterTypesWithActivation.includes(newsletter.type) &&
+ newsletter.status === 'active'
+ ) {
confirmAlert({
message: MailPoet.I18n.t('confirmAutomaticNewsletterEdit'),
onConfirm: redirectToEditing,
diff --git a/mailpoet/assets/js/src/newsletters/listings/welcome.jsx b/mailpoet/assets/js/src/newsletters/listings/welcome.jsx
index c9ad1cf1ca..87d2c954bb 100644
--- a/mailpoet/assets/js/src/newsletters/listings/welcome.jsx
+++ b/mailpoet/assets/js/src/newsletters/listings/welcome.jsx
@@ -25,19 +25,19 @@ const mailpoetSegments = window.mailpoet_segments || {};
const mailpoetTrackingEnabled = MailPoet.trackingConfig.emailTrackingEnabled;
const messages = {
- onNoItemsFound: (group, search) => MailPoet.I18n.t(search ? 'noItemsFound' : 'emptyListing'),
+ onNoItemsFound: (group, search) =>
+ MailPoet.I18n.t(search ? 'noItemsFound' : 'emptyListing'),
onTrash: (response) => {
const count = Number(response.meta.count);
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneNewsletterTrashed')
- );
+ message = MailPoet.I18n.t('oneNewsletterTrashed');
} else {
- message = (
- MailPoet.I18n.t('multipleNewslettersTrashed')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleNewslettersTrashed').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -46,13 +46,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneNewsletterDeleted')
- );
+ message = MailPoet.I18n.t('oneNewsletterDeleted');
} else {
- message = (
- MailPoet.I18n.t('multipleNewslettersDeleted')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleNewslettersDeleted').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -61,13 +60,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneNewsletterRestored')
- );
+ message = MailPoet.I18n.t('oneNewsletterRestored');
} else {
- message = (
- MailPoet.I18n.t('multipleNewslettersRestored')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleNewslettersRestored').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -113,7 +111,11 @@ let newsletterActions = [
name: 'view',
link: function link(newsletter) {
return (
-
+
{MailPoet.I18n.t('preview')}
);
@@ -123,24 +125,32 @@ let newsletterActions = [
name: 'duplicate',
className: 'mailpoet-hide-on-mobile',
label: MailPoet.I18n.t('duplicate'),
- onClick: (newsletter, refresh) => MailPoet.Ajax.post({
- api_version: window.mailpoet_api_version,
- endpoint: 'newsletters',
- action: 'duplicate',
- data: {
- id: newsletter.id,
- },
- }).done((response) => {
- MailPoet.Notice.success((MailPoet.I18n.t('newsletterDuplicated')).replace('%1$s', response.data.subject));
- refresh();
- }).fail((response) => {
- if (response.errors.length > 0) {
- MailPoet.Notice.error(
- response.errors.map((error) => error.message),
- { scroll: true }
- );
- }
- }),
+ onClick: (newsletter, refresh) =>
+ MailPoet.Ajax.post({
+ api_version: window.mailpoet_api_version,
+ endpoint: 'newsletters',
+ action: 'duplicate',
+ data: {
+ id: newsletter.id,
+ },
+ })
+ .done((response) => {
+ MailPoet.Notice.success(
+ MailPoet.I18n.t('newsletterDuplicated').replace(
+ '%1$s',
+ response.data.subject,
+ ),
+ );
+ refresh();
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ MailPoet.Notice.error(
+ response.errors.map((error) => error.message),
+ { scroll: true },
+ );
+ }
+ }),
},
{
name: 'edit',
@@ -176,25 +186,30 @@ class NewsletterListWelcome extends Component {
id: Number(e.target.getAttribute('data-id')),
status: checked ? 'active' : 'draft',
},
- }).done((response) => {
- if (response.data.status === 'active') {
- MailPoet.Notice.success(MailPoet.I18n.t('welcomeEmailActivated'));
- }
- // force refresh of listing so that groups are updated
- this.forceUpdate();
- }).fail((response) => {
- MailPoet.Notice.showApiErrorNotice(response);
+ })
+ .done((response) => {
+ if (response.data.status === 'active') {
+ MailPoet.Notice.success(MailPoet.I18n.t('welcomeEmailActivated'));
+ }
+ // force refresh of listing so that groups are updated
+ this.forceUpdate();
+ })
+ .fail((response) => {
+ MailPoet.Notice.showApiErrorNotice(response);
- // reset value to previous newsletter's status
- e.target.checked = !checked;
- });
+ // reset value to previous newsletter's status
+ e.target.checked = !checked;
+ });
};
renderStatus = (newsletter) => {
- const totalSentMessage = MailPoet.I18n.t('sentToXSubscribers')
- .replace('%1$d', newsletter.total_sent.toLocaleString());
- const totalScheduledMessage = MailPoet.I18n.t('scheduledToXSubscribers')
- .replace('%1$d', newsletter.total_scheduled.toLocaleString());
+ const totalSentMessage = MailPoet.I18n.t('sentToXSubscribers').replace(
+ '%1$d',
+ newsletter.total_sent.toLocaleString(),
+ );
+ const totalScheduledMessage = MailPoet.I18n.t(
+ 'scheduledToXSubscribers',
+ ).replace('%1$d', newsletter.total_scheduled.toLocaleString());
return (
@@ -210,11 +225,10 @@ class NewsletterListWelcome extends Component {
to={`/sending-status/${newsletter.id}`}
data-automation-id={`sending_status_${newsletter.id}`}
>
- { totalSentMessage }
-
- {' '}
+ {totalSentMessage}
+ {' '}
- { totalScheduledMessage }
+ {totalScheduledMessage}
);
@@ -236,8 +250,10 @@ class NewsletterListWelcome extends Component {
MailPoet.I18n.t('welcomeEventWPUserWithRole'),
'"%1$s"',
(match, i) => (
- {mailpoetRoles[newsletter.options.role]}
- )
+
+ {mailpoetRoles[newsletter.options.role]}
+
+ ),
);
}
break;
@@ -246,13 +262,16 @@ class NewsletterListWelcome extends Component {
// get segment
segment = _.find(
mailpoetSegments,
- (seg) => (Number(seg.id) === Number(newsletter.options.segment))
+ (seg) => Number(seg.id) === Number(newsletter.options.segment),
);
if (segment === undefined) {
return (
-
- { MailPoet.I18n.t('sendingToSegmentsNotSpecified') }
+
+ {MailPoet.I18n.t('sendingToSegmentsNotSpecified')}
);
}
@@ -261,8 +280,10 @@ class NewsletterListWelcome extends Component {
MailPoet.I18n.t('welcomeEventSegment'),
'"%1$s"',
(match, i) => (
- {segment.name}
- )
+
+ {segment.name}
+
+ ),
);
break;
@@ -273,19 +294,31 @@ class NewsletterListWelcome extends Component {
if (newsletter.options.afterTimeType !== 'immediate') {
switch (newsletter.options.afterTimeType) {
case 'minutes':
- sendingDelay = MailPoet.I18n.t('sendingDelayMinutes').replace('%1$d', newsletter.options.afterTimeNumber);
+ sendingDelay = MailPoet.I18n.t('sendingDelayMinutes').replace(
+ '%1$d',
+ newsletter.options.afterTimeNumber,
+ );
break;
case 'hours':
- sendingDelay = MailPoet.I18n.t('sendingDelayHours').replace('%1$d', newsletter.options.afterTimeNumber);
+ sendingDelay = MailPoet.I18n.t('sendingDelayHours').replace(
+ '%1$d',
+ newsletter.options.afterTimeNumber,
+ );
break;
case 'days':
- sendingDelay = MailPoet.I18n.t('sendingDelayDays').replace('%1$d', newsletter.options.afterTimeNumber);
+ sendingDelay = MailPoet.I18n.t('sendingDelayDays').replace(
+ '%1$d',
+ newsletter.options.afterTimeNumber,
+ );
break;
case 'weeks':
- sendingDelay = MailPoet.I18n.t('sendingDelayWeeks').replace('%1$d', newsletter.options.afterTimeNumber);
+ sendingDelay = MailPoet.I18n.t('sendingDelayWeeks').replace(
+ '%1$d',
+ newsletter.options.afterTimeNumber,
+ );
break;
default:
@@ -297,15 +330,15 @@ class NewsletterListWelcome extends Component {
return (
- { sendingEvent }
- { sendingDelay && (
+ {sendingEvent}
+ {sendingDelay && (
- { sendingDelay }
+ {sendingDelay}
- ) }
+ )}
);
};
@@ -314,7 +347,7 @@ class NewsletterListWelcome extends Component {
const rowClasses = classNames(
'manage-column',
'column-primary',
- 'has-row-actions'
+ 'has-row-actions',
);
return (
@@ -324,28 +357,37 @@ class NewsletterListWelcome extends Component {
className="mailpoet-listing-title"
href={`?page=mailpoet-newsletter-editor&id=${newsletter.id}`}
>
- { newsletter.subject }
+ {newsletter.subject}
- { actions }
+ {actions}
-
- { this.renderSettings(newsletter) }
+
+ {this.renderSettings(newsletter)}
- { (mailpoetTrackingEnabled === true) ? (
-
+ {mailpoetTrackingEnabled === true ? (
+
0 && !!newsletter.statistics}
/>
- ) : null }
+ ) : null}
- { this.renderStatus(newsletter) }
+ {this.renderStatus(newsletter)}
-
- { MailPoet.Date.short(newsletter.updated_at) }
+
+ {MailPoet.Date.short(newsletter.updated_at)}
- { MailPoet.Date.time(newsletter.updated_at) }
+ {MailPoet.Date.time(newsletter.updated_at)}
);
@@ -382,7 +424,10 @@ class NewsletterListWelcome extends Component {
sort_order="desc"
afterGetItems={(state) => {
if (!state.loading) {
- const total = state.groups.reduce((count, group) => (count + group.count), 0);
+ const total = state.groups.reduce(
+ (count, group) => count + group.count,
+ 0,
+ );
this.setState({ newslettersCount: total });
}
checkMailerStatus(state);
diff --git a/mailpoet/assets/js/src/newsletters/models/newsletter.ts b/mailpoet/assets/js/src/newsletters/models/newsletter.ts
index 50962ce468..58d4c5622b 100644
--- a/mailpoet/assets/js/src/newsletters/models/newsletter.ts
+++ b/mailpoet/assets/js/src/newsletters/models/newsletter.ts
@@ -28,8 +28,8 @@ export type NewsLetter = {
link: CSSStyleDeclaration;
text: CSSStyleDeclaration;
wrapper: CSSStyleDeclaration;
- }
- }
+ };
+ };
created_at: string;
deleted_at: null | string;
ga_campaign: string;
@@ -44,8 +44,8 @@ export type NewsLetter = {
preheader: string;
queue: boolean;
reply_to_address: string;
- reply_to_name: string
- segments: Array
+ reply_to_name: string;
+ segments: Array;
sender_address: string;
sender_name: string;
sent_at: null | string;
diff --git a/mailpoet/assets/js/src/newsletters/newsletters.jsx b/mailpoet/assets/js/src/newsletters/newsletters.jsx
index 7954893f4e..8358565e66 100644
--- a/mailpoet/assets/js/src/newsletters/newsletters.jsx
+++ b/mailpoet/assets/js/src/newsletters/newsletters.jsx
@@ -1,6 +1,10 @@
import ReactDOM from 'react-dom';
import {
- HashRouter, Switch, Route, Redirect, useParams,
+ HashRouter,
+ Switch,
+ Route,
+ Redirect,
+ useParams,
} from 'react-router-dom';
import MailPoet from 'mailpoet';
import _ from 'underscore';
@@ -38,7 +42,8 @@ import EmailVolumeLimitNotice from 'notices/email_volume_limit_notice';
const automaticEmails = window.mailpoet_woocommerce_automatic_emails || [];
-const trackTabSwitch = (tabKey) => MailPoet.trackEvent(`Tab Emails > ${tabKey} clicked`);
+const trackTabSwitch = (tabKey) =>
+ MailPoet.trackEvent(`Tab Emails > ${tabKey} clicked`);
const Tabs = withNpsPoll(() => {
const { parentId } = useParams();
@@ -76,11 +81,11 @@ const Tabs = withNpsPoll(() => {
title={MailPoet.I18n.t('tabNotificationTitle')}
automationId={`tab-${MailPoet.I18n.t('tabNotificationTitle')}`}
>
- {
- parentId
- ?
- :
- }
+ {parentId ? (
+
+ ) : (
+
+ )}
{
>
- {window.mailpoet_woocommerce_active && _.map(automaticEmails, (email) => (
-
-
-
- ))}
+ {window.mailpoet_woocommerce_active &&
+ _.map(automaticEmails, (email) => (
+
+
+
+ ))}
>
);
@@ -124,7 +130,7 @@ const getAutomaticEmailsRoutes = () => {
email,
name: event.slug,
};
- return ( );
+ return ;
},
});
});
@@ -137,7 +143,7 @@ const getAutomaticEmailsRoutes = () => {
...props,
email,
};
- return ( );
+ return ;
},
});
});
@@ -232,7 +238,9 @@ function App() {
sendTransactionalEmails={window.mailpoet_send_transactional_emails}
mtaMethod={window.mailpoet_mta_method}
apiVersion={window.mailpoet_api_version}
- noticeDismissed={window.mailpoet_transactional_emails_opt_in_notice_dismissed}
+ noticeDismissed={
+ window.mailpoet_transactional_emails_opt_in_notice_dismissed
+ }
/>
- } />
+ (
+
+ )}
+ />
{routes.map((route) => (
step * TIME_STEP_SECONDS), (seconds) => {
- const date = new Date(null);
- date.setSeconds(seconds);
- const timeLabel = MailPoet.Date.format(date, { format: timeFormat, offset: 0 });
- return [seconds, timeLabel];
- })
+ _.map(
+ _.times(numberOfTimeSteps, (step) => step * TIME_STEP_SECONDS),
+ (seconds) => {
+ const date = new Date(null);
+ date.setSeconds(seconds);
+ const timeLabel = MailPoet.Date.format(date, {
+ format: timeFormat,
+ offset: 0,
+ });
+ return [seconds, timeLabel];
+ },
+ ),
);
const weekDayValues = {
@@ -45,20 +51,23 @@ const weekDayValues = {
const NUMBER_OF_DAYS_IN_MONTH = 28;
const monthDayValues = _.object(
- _.map(_.times(NUMBER_OF_DAYS_IN_MONTH, (day) => day), (day) => {
- const labels = {
- 0: MailPoet.I18n.t('first'),
- 1: MailPoet.I18n.t('second'),
- 2: MailPoet.I18n.t('third'),
- };
- let label;
- if (labels[day] !== undefined) {
- label = labels[day];
- } else {
- label = MailPoet.I18n.t('nth').replace('%1$d', day + 1);
- }
- return [day + 1, label];
- })
+ _.map(
+ _.times(NUMBER_OF_DAYS_IN_MONTH, (day) => day),
+ (day) => {
+ const labels = {
+ 0: MailPoet.I18n.t('first'),
+ 1: MailPoet.I18n.t('second'),
+ 2: MailPoet.I18n.t('third'),
+ };
+ let label;
+ if (labels[day] !== undefined) {
+ label = labels[day];
+ } else {
+ label = MailPoet.I18n.t('nth').replace('%1$d', day + 1);
+ }
+ return [day + 1, label];
+ },
+ ),
);
const nthWeekDayValues = {
diff --git a/mailpoet/assets/js/src/newsletters/send.jsx b/mailpoet/assets/js/src/newsletters/send.jsx
index 9aad0c773a..8bc4fed2b1 100644
--- a/mailpoet/assets/js/src/newsletters/send.jsx
+++ b/mailpoet/assets/js/src/newsletters/send.jsx
@@ -36,28 +36,34 @@ function validateNewsletter(newsletter) {
if (newsletter && newsletter.body && newsletter.body.content) {
content = newsletter.body.content;
body = JSON.stringify(newsletter.body.content);
- if (!content.blocks || !Array.isArray(content.blocks) || (content.blocks.length === 0)) {
+ if (
+ !content.blocks ||
+ !Array.isArray(content.blocks) ||
+ content.blocks.length === 0
+ ) {
return MailPoet.I18n.t('newsletterIsEmpty');
}
}
if (
- window.mailpoet_mss_active
- && (body.indexOf('[link:subscription_unsubscribe_url]') < 0)
- && (body.indexOf('[link:subscription_unsubscribe]') < 0)
+ window.mailpoet_mss_active &&
+ body.indexOf('[link:subscription_unsubscribe_url]') < 0 &&
+ body.indexOf('[link:subscription_unsubscribe]') < 0
) {
return MailPoet.I18n.t('unsubscribeLinkMissing');
}
- if (newsletter.type === 're_engagement'
- && body.indexOf('[link:subscription_re_engage_url]') < 0
+ if (
+ newsletter.type === 're_engagement' &&
+ body.indexOf('[link:subscription_re_engage_url]') < 0
) {
return MailPoet.I18n.t('reEngageLinkMissing');
}
- if ((newsletter.type === 'notification')
- && body.indexOf('"type":"automatedLatestContent"') < 0
- && body.indexOf('"type":"automatedLatestContentLayout"') < 0
+ if (
+ newsletter.type === 'notification' &&
+ body.indexOf('"type":"automatedLatestContent"') < 0 &&
+ body.indexOf('"type":"automatedLatestContentLayout"') < 0
) {
return MailPoet.I18n.t('automatedLatestContentMissing');
}
@@ -66,7 +72,10 @@ function validateNewsletter(newsletter) {
return MailPoet.I18n.t('emailAlreadySent');
}
- if (newsletter.type === 're_engagement' && !MailPoet.trackingConfig.emailTrackingEnabled) {
+ if (
+ newsletter.type === 're_engagement' &&
+ !MailPoet.trackingConfig.emailTrackingEnabled
+ ) {
return (
{ReactStringReplace(
@@ -80,7 +89,7 @@ function validateNewsletter(newsletter) {
>
{match}
- )
+ ),
)}
);
@@ -100,10 +109,9 @@ class NewsletterSend extends Component {
}
componentDidMount() {
- this.loadItem(this.props.match.params.id)
- .always(() => {
- this.setState({ loading: false });
- });
+ this.loadItem(this.props.match.params.id).always(() => {
+ this.setState({ loading: false });
+ });
jQuery('#mailpoet_newsletter').parsley();
}
@@ -127,21 +135,24 @@ class NewsletterSend extends Component {
getSubtype = (newsletter) => {
switch (newsletter.type) {
- case 'notification': return NotificationNewsletterFields;
- case 'welcome': return WelcomeNewsletterFields;
- case 're_engagement': return ReEngagementNewsletterFields;
+ case 'notification':
+ return NotificationNewsletterFields;
+ case 'welcome':
+ return WelcomeNewsletterFields;
+ case 're_engagement':
+ return ReEngagementNewsletterFields;
case 'automatic':
if (automaticEmails[newsletter.options.group]) {
return AutomaticEmailFields;
}
- // fall through
- default: return StandardNewsletterFields;
+ // fall through
+ default:
+ return StandardNewsletterFields;
}
};
- getThumbnailPromise = (url) => (
- this.state.thumbnailPromise ? this.state.thumbnailPromise : fromUrl(url)
- );
+ getThumbnailPromise = (url) =>
+ this.state.thumbnailPromise ? this.state.thumbnailPromise : fromUrl(url);
isValid = () => jQuery('#mailpoet_newsletter').parsley().isValid();
@@ -159,29 +170,31 @@ class NewsletterSend extends Component {
let errorMessage = ReactStringReplace(
MailPoet.I18n.t('newsletterInvalidFromAddress'),
'%1$s',
- () => fromAddress
+ () => fromAddress,
);
errorMessage = ReactStringReplace(
errorMessage,
/\[link\](.*?)\[\/link\]/g,
- (match) => `${match} `
+ (match) =>
+ `${match} `,
);
jQuery('#field_sender_address')
.parsley()
- .addError(
- 'invalidFromAddress',
- { message: errorMessage.join(''), updateClass: true }
- );
- MailPoet.trackEvent('Unauthorized email used', { 'Unauthorized email source': 'send' });
+ .addError('invalidFromAddress', {
+ message: errorMessage.join(''),
+ updateClass: true,
+ });
+ MailPoet.trackEvent('Unauthorized email used', {
+ 'Unauthorized email source': 'send',
+ });
};
removeInvalidFromAddressError = () => {
jQuery('#field_sender_address')
.parsley()
- .removeError(
- 'invalidFromAddress',
- { updateClass: true }
- );
+ .removeError('invalidFromAddress', { updateClass: true });
};
loadItem = (id) => {
@@ -194,29 +207,42 @@ class NewsletterSend extends Component {
data: {
id,
},
- }).done((response) => {
- const thumbnailPromise = response.data.status === 'draft' ? this.getThumbnailPromise(response.meta.preview_url) : null;
- const item = response.data;
- if (!item.ga_campaign) {
- item.ga_campaign = generateGaTrackingCampaignName(item.id, item.subject);
- }
- this.setState({
- item: response.data,
- fields: this.getFieldsByNewsletter(response.data),
- thumbnailPromise,
- validationError: validateNewsletter(response.data),
+ })
+ .done((response) => {
+ const thumbnailPromise =
+ response.data.status === 'draft'
+ ? this.getThumbnailPromise(response.meta.preview_url)
+ : null;
+ const item = response.data;
+ if (!item.ga_campaign) {
+ item.ga_campaign = generateGaTrackingCampaignName(
+ item.id,
+ item.subject,
+ );
+ }
+ this.setState({
+ item: response.data,
+ fields: this.getFieldsByNewsletter(response.data),
+ thumbnailPromise,
+ validationError: validateNewsletter(response.data),
+ });
+ })
+ .fail(() => {
+ this.setState(
+ {
+ item: {},
+ },
+ () => {
+ this.props.history.push('/new');
+ },
+ );
});
- }).fail(() => {
- this.setState({
- item: {},
- }, () => {
- this.props.history.push('/new');
- });
- });
};
saveTemplate = (response, done) => {
- const thumbnailPromise = this.getThumbnailPromise(response.meta.preview_url);
+ const thumbnailPromise = this.getThumbnailPromise(
+ response.meta.preview_url,
+ );
thumbnailPromise
.then((thumbnailData) => {
MailPoet.Ajax.post({
@@ -269,9 +295,10 @@ class NewsletterSend extends Component {
this.showInvalidFromAddressError();
return MailPoet.Modal.loading(false);
}
- return this.saveNewsletter(e).done(() => {
- this.setState({ loading: true });
- })
+ return this.saveNewsletter(e)
+ .done(() => {
+ this.setState({ loading: true });
+ })
.done((response) => {
switch (response.data.type) {
case 'notification':
@@ -291,119 +318,141 @@ class NewsletterSend extends Component {
});
};
- sendNewsletter = (newsletter) => MailPoet.Ajax.post({
- api_version: window.mailpoet_api_version,
- endpoint: 'sendingQueue',
- action: 'add',
- data: {
- newsletter_id: this.state.item.id,
- },
- }).done((response) => {
- // save template in recently sent category
- this.saveTemplate(newsletter, () => {
- if (window.mailpoet_show_congratulate_after_first_newsletter) {
+ sendNewsletter = (newsletter) =>
+ MailPoet.Ajax.post({
+ api_version: window.mailpoet_api_version,
+ endpoint: 'sendingQueue',
+ action: 'add',
+ data: {
+ newsletter_id: this.state.item.id,
+ },
+ })
+ .done((response) => {
+ // save template in recently sent category
+ this.saveTemplate(newsletter, () => {
+ if (window.mailpoet_show_congratulate_after_first_newsletter) {
+ MailPoet.Modal.loading(false);
+ this.props.history.push(`/send/congratulate/${this.state.item.id}`);
+ return;
+ }
+ // redirect to listing based on newsletter type
+ this.props.history.push(`/${this.state.item.type || ''}`);
+ if (response.data.status === 'scheduled') {
+ this.context.notices.success(
+ {MailPoet.I18n.t('newsletterHasBeenScheduled')}
,
+ );
+ MailPoet.trackEvent('Emails > Newsletter sent', {
+ scheduled: true,
+ });
+ } else {
+ this.context.notices.success(
+ {MailPoet.I18n.t('newsletterBeingSent')}
,
+ { id: 'mailpoet_notice_being_sent' },
+ );
+ MailPoet.trackEvent('Emails > Newsletter sent', {
+ scheduled: false,
+ });
+ }
+ MailPoet.Modal.loading(false);
+ });
+ })
+ .fail((err) => {
+ this.showError(err);
+ this.setState({ loading: false });
MailPoet.Modal.loading(false);
- this.props.history.push(`/send/congratulate/${this.state.item.id}`);
- return;
- }
- // redirect to listing based on newsletter type
- this.props.history.push(`/${this.state.item.type || ''}`);
- if (response.data.status === 'scheduled') {
- this.context.notices.success(
- {MailPoet.I18n.t('newsletterHasBeenScheduled')}
- );
- MailPoet.trackEvent('Emails > Newsletter sent', {
- scheduled: true,
- });
- } else {
- this.context.notices.success(
- {MailPoet.I18n.t('newsletterBeingSent')}
,
- { id: 'mailpoet_notice_being_sent' }
- );
- MailPoet.trackEvent('Emails > Newsletter sent', {
- scheduled: false,
- });
- }
- MailPoet.Modal.loading(false);
- });
- }).fail((err) => {
- this.showError(err);
- this.setState({ loading: false });
- MailPoet.Modal.loading(false);
- });
+ });
- activateNewsletter = (newsletter) => MailPoet.Ajax.post({
- api_version: window.mailpoet_api_version,
- endpoint: 'newsletters',
- action: 'setStatus',
- data: {
- id: this.props.match.params.id,
- status: 'active',
- },
- }).done((response) => {
- // save template in recently sent category
- this.saveTemplate(newsletter, () => {
- if (window.mailpoet_show_congratulate_after_first_newsletter) {
+ activateNewsletter = (newsletter) =>
+ MailPoet.Ajax.post({
+ api_version: window.mailpoet_api_version,
+ endpoint: 'newsletters',
+ action: 'setStatus',
+ data: {
+ id: this.props.match.params.id,
+ status: 'active',
+ },
+ })
+ .done((response) => {
+ // save template in recently sent category
+ this.saveTemplate(newsletter, () => {
+ if (window.mailpoet_show_congratulate_after_first_newsletter) {
+ MailPoet.Modal.loading(false);
+ this.props.history.push(`/send/congratulate/${this.state.item.id}`);
+ return;
+ }
+ // redirect to listing based on newsletter type
+ const opts = this.state.item.options;
+ this.props.history.push(
+ this.state.item.type === 'automatic'
+ ? `/${opts.group}`
+ : `/${this.state.item.type || ''}`,
+ );
+ // display success message depending on newsletter type
+ if (
+ this.state.item.type === 'automatic' &&
+ automaticEmails[opts.group]
+ ) {
+ this.context.notices.success(
+
+ {MailPoet.I18n.t('automaticEmailActivated').replace(
+ '%1s',
+ automaticEmails[opts.group].title,
+ )}
+
,
+ );
+ } else if (response.data.type === 'welcome') {
+ this.context.notices.success(
+ {MailPoet.I18n.t('welcomeEmailActivated')}
,
+ );
+ MailPoet.trackEvent('Emails > Welcome email activated', {
+ 'List type': opts.event,
+ Delay: `${opts.afterTimeNumber} ${opts.afterTimeType}`,
+ });
+ } else if (response.data.type === 'notification') {
+ this.context.notices.success(
+ {MailPoet.I18n.t('postNotificationActivated')}
,
+ );
+ MailPoet.trackEvent('Emails > Post notifications activated', {
+ Frequency: opts.intervalType,
+ });
+ }
+ MailPoet.Modal.loading(false);
+ });
+ })
+ .fail((err) => {
+ this.showError(err);
+ this.setState({ loading: false });
MailPoet.Modal.loading(false);
- this.props.history.push(`/send/congratulate/${this.state.item.id}`);
- return;
- }
- // redirect to listing based on newsletter type
- const opts = this.state.item.options;
- this.props.history.push((this.state.item.type === 'automatic') ? `/${opts.group}` : `/${this.state.item.type || ''}`);
- // display success message depending on newsletter type
- if (this.state.item.type === 'automatic' && automaticEmails[opts.group]) {
- this.context.notices.success(
- {MailPoet.I18n.t('automaticEmailActivated').replace('%1s', automaticEmails[opts.group].title)}
- );
- } else if (response.data.type === 'welcome') {
- this.context.notices.success(
- {MailPoet.I18n.t('welcomeEmailActivated')}
- );
- MailPoet.trackEvent('Emails > Welcome email activated', {
- 'List type': opts.event,
- Delay: `${opts.afterTimeNumber} ${opts.afterTimeType}`,
- });
- } else if (response.data.type === 'notification') {
- this.context.notices.success(
- {MailPoet.I18n.t('postNotificationActivated')}
- );
- MailPoet.trackEvent('Emails > Post notifications activated', {
- Frequency: opts.intervalType,
- });
- }
- MailPoet.Modal.loading(false);
- });
- }).fail((err) => {
- this.showError(err);
- this.setState({ loading: false });
- MailPoet.Modal.loading(false);
- });
+ });
handleResume = (e) => {
e.preventDefault();
if (!this.isValid()) {
jQuery('#mailpoet_newsletter').parsley().validate();
} else {
- this.saveNewsletter(e).done(() => {
- this.setState({ loading: true });
- }).done(() => {
- MailPoet.Ajax.post({
- api_version: window.mailpoet_api_version,
- endpoint: 'sendingQueue',
- action: 'resume',
- data: {
- newsletter_id: this.state.item.id,
- },
- }).done(() => {
- this.props.history.push(`/${this.state.item.type || ''}`);
- this.context.notices.success(
- {MailPoet.I18n.t('newsletterSendingHasBeenResumed')}
- );
- }).fail((response) => {
- this.showError(response);
- });
- })
+ this.saveNewsletter(e)
+ .done(() => {
+ this.setState({ loading: true });
+ })
+ .done(() => {
+ MailPoet.Ajax.post({
+ api_version: window.mailpoet_api_version,
+ endpoint: 'sendingQueue',
+ action: 'resume',
+ data: {
+ newsletter_id: this.state.item.id,
+ },
+ })
+ .done(() => {
+ this.props.history.push(`/${this.state.item.type || ''}`);
+ this.context.notices.success(
+ {MailPoet.I18n.t('newsletterSendingHasBeenResumed')}
,
+ );
+ })
+ .fail((response) => {
+ this.showError(response);
+ });
+ })
.fail((err) => {
this.showError(err);
})
@@ -417,31 +466,40 @@ class NewsletterSend extends Component {
handleSave = (e) => {
e.preventDefault();
- this.saveNewsletter(e).done(() => {
- this.context.notices.success(
- {MailPoet.I18n.t('newsletterUpdated')}
- );
- }).done(() => {
- const path = this.state.item.type === 'automatic' ? this.state.item.options.group : this.state.item.type;
- this.props.history.push(`/${path || ''}`);
- }).fail((err) => {
- this.showError(err);
- });
+ this.saveNewsletter(e)
+ .done(() => {
+ this.context.notices.success(
+ {MailPoet.I18n.t('newsletterUpdated')}
,
+ );
+ })
+ .done(() => {
+ const path =
+ this.state.item.type === 'automatic'
+ ? this.state.item.options.group
+ : this.state.item.type;
+ this.props.history.push(`/${path || ''}`);
+ })
+ .fail((err) => {
+ this.showError(err);
+ });
};
handleRedirectToDesign = (e) => {
e.preventDefault();
const redirectTo = e.target.href;
- this.saveNewsletter(e).done(() => {
- this.context.notices.success(
- {MailPoet.I18n.t('newsletterUpdated')}
- );
- }).done(() => {
- window.location = redirectTo;
- }).fail((err) => {
- this.showError(err);
- });
+ this.saveNewsletter(e)
+ .done(() => {
+ this.context.notices.success(
+ {MailPoet.I18n.t('newsletterUpdated')}
,
+ );
+ })
+ .done(() => {
+ window.location = redirectTo;
+ })
+ .fail((err) => {
+ this.showError(err);
+ });
};
saveNewsletter = () => {
@@ -451,13 +509,15 @@ class NewsletterSend extends Component {
// Store only properties that can be changed on this page
const IGNORED_NEWSLETTER_PROPERTIES = [
- 'body', 'created_at', 'deleted_at', 'hash',
- 'status', 'updated_at', 'type',
+ 'body',
+ 'created_at',
+ 'deleted_at',
+ 'hash',
+ 'status',
+ 'updated_at',
+ 'type',
];
- const newsletterData = _.omit(
- data,
- IGNORED_NEWSLETTER_PROPERTIES
- );
+ const newsletterData = _.omit(data, IGNORED_NEWSLETTER_PROPERTIES);
return MailPoet.Ajax.post({
api_version: window.mailpoet_api_version,
@@ -470,8 +530,10 @@ class NewsletterSend extends Component {
showError = (response) => {
if (response.errors.length > 0) {
this.context.notices.error(
- response.errors.map((error) => {error.message}
),
- { scroll: true }
+ response.errors.map((error) => (
+ {error.message}
+ )),
+ { scroll: true },
);
}
};
@@ -487,7 +549,10 @@ class NewsletterSend extends Component {
item[name] = value;
if (name === 'subject') {
- const oldDefaultGaCampaign = generateGaTrackingCampaignName(item.id, oldSubject);
+ const oldDefaultGaCampaign = generateGaTrackingCampaignName(
+ item.id,
+ oldSubject,
+ );
// regenerate GA campaign name only if it has default autogenerated value
if (oldGaCampaign === oldDefaultGaCampaign) {
@@ -505,9 +570,10 @@ class NewsletterSend extends Component {
};
render() {
- const isPaused = this.state.item.status === 'sending'
- && this.state.item.queue
- && this.state.item.queue.status === 'paused';
+ const isPaused =
+ this.state.item.status === 'sending' &&
+ this.state.item.queue &&
+ this.state.item.queue.status === 'paused';
const fields = this.state.fields.map((field) => {
const newField = field;
if (field.name === 'segments' || field.name === 'options') {
@@ -518,9 +584,9 @@ class NewsletterSend extends Component {
const sendButtonOptions = this.getSendButtonOptions();
const sendingDisabled = !!(
- window.mailpoet_subscribers_limit_reached
- || window.mailpoet_mss_key_pending_approval
- || this.state.validationError !== undefined
+ window.mailpoet_subscribers_limit_reached ||
+ window.mailpoet_mss_key_pending_approval ||
+ this.state.validationError !== undefined
);
let emailType = this.state.item.type;
@@ -531,7 +597,10 @@ class NewsletterSend extends Component {
return (
-
+
-
+
{MailPoet.I18n.t('saveDraftAndClose')}
- {
- isPaused
- ? (
-
- {MailPoet.I18n.t('resume')}
-
- )
- : (
-
- {sendButtonOptions.value || MailPoet.I18n.t('send')}
-
- )
- }
- { this.state.validationError !== undefined && (
+ {isPaused ? (
+
+ {MailPoet.I18n.t('resume')}
+
+ ) : (
+
+ {sendButtonOptions.value || MailPoet.I18n.t('send')}
+
+ )}
+ {this.state.validationError !== undefined && (
{this.state.validationError} )}
+ tooltip={{this.state.validationError}
}
tooltipId="helpTooltipSendEmail"
/>
- ) }
+ )}
{MailPoet.I18n.t('orSimply')}
{MailPoet.I18n.t('goBackToDesign')}
.
- { window.mailpoet_mss_key_pending_approval && (
+ {window.mailpoet_mss_key_pending_approval && (
- {
- ReactStringReplace(
- MailPoet.I18n.t('pendingKeyApprovalNotice'),
- /\[link\](.*?)\[\/link\]/g,
- (match) => (
-
- {match}
-
- )
- )
- }
+ {ReactStringReplace(
+ MailPoet.I18n.t('pendingKeyApprovalNotice'),
+ /\[link\](.*?)\[\/link\]/g,
+ (match) => (
+
+ {match}
+
+ ),
+ )}
- ) }
+ )}
);
diff --git a/mailpoet/assets/js/src/newsletters/send/automatic.jsx b/mailpoet/assets/js/src/newsletters/send/automatic.jsx
index 67d8892feb..b8a42f9c37 100644
--- a/mailpoet/assets/js/src/newsletters/send/automatic.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/automatic.jsx
@@ -25,7 +25,9 @@ const getAutomaticEmailFields = (newsletter) => {
type: 'text',
validation: {
'data-parsley-required': true,
- 'data-parsley-required-message': MailPoet.I18n.t('emptySubjectLineError'),
+ 'data-parsley-required-message': MailPoet.I18n.t(
+ 'emptySubjectLineError',
+ ),
maxLength: 250,
},
},
@@ -34,7 +36,9 @@ const getAutomaticEmailFields = (newsletter) => {
customLabel: MailPoet.I18n.t('preheaderLabel'),
className: 'mailpoet-form-field-preheader',
placeholder: MailPoet.I18n.t('preheaderLine'),
- tooltip: `${MailPoet.I18n.t('preheaderLineTip1')} ${MailPoet.I18n.t('preheaderLineTip2')}`,
+ tooltip: `${MailPoet.I18n.t('preheaderLineTip1')} ${MailPoet.I18n.t(
+ 'preheaderLineTip2',
+ )}`,
type: 'textarea',
validation: {
maxLength: 250,
@@ -44,7 +48,10 @@ const getAutomaticEmailFields = (newsletter) => {
},
{
name: 'options',
- label: MailPoet.I18n.t('sendAutomaticEmailWhenHeading').replace('%1s', email.title),
+ label: MailPoet.I18n.t('sendAutomaticEmailWhenHeading').replace(
+ '%1s',
+ email.title,
+ ),
type: 'reactComponent',
component: SendEventConditions,
email,
diff --git a/mailpoet/assets/js/src/newsletters/send/congratulate/congratulate.jsx b/mailpoet/assets/js/src/newsletters/send/congratulate/congratulate.jsx
index 3c358f0d4f..82b0bf506d 100644
--- a/mailpoet/assets/js/src/newsletters/send/congratulate/congratulate.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/congratulate/congratulate.jsx
@@ -30,8 +30,12 @@ function renderSuccess(newsletter, testingPassed) {
}
return (
);
@@ -94,13 +101,21 @@ class Congratulate extends Component {
}
tick() {
- if (moment().subtract(SECONDS_WAITING_FOR_SUCCESS, 'second').isAfter(this.state.timeStart)) {
+ if (
+ moment()
+ .subtract(SECONDS_WAITING_FOR_SUCCESS, 'second')
+ .isAfter(this.state.timeStart)
+ ) {
this.setState({ error: true, loading: false });
}
if (this.state.loading) {
this.loadNewsletter(this.props.match.params.id);
}
- if (moment().subtract(SECONDS_MINIMUIM_LOADING_SCREEN_DISPLAYED, 'seconds').isAfter(this.state.timeStart)) {
+ if (
+ moment()
+ .subtract(SECONDS_MINIMUIM_LOADING_SCREEN_DISPLAYED, 'seconds')
+ .isAfter(this.state.timeStart)
+ ) {
this.setState({ minimumLoadingTimePassed: true });
}
if (this.state.loading || !this.state.minimumLoadingTimePassed) {
@@ -116,14 +131,20 @@ class Congratulate extends Component {
data: {
id,
},
- })
- .done((response) => this.newsletterLoaded(response.data));
+ }).done((response) => this.newsletterLoaded(response.data));
}
newsletterLoaded(newsletter) {
- if ((newsletter.type !== 'standard') || (newsletter.status === 'scheduled')) {
- this.setState({ newsletter, loading: false, minimumLoadingTimePassed: true });
- } else if ((newsletter.status === 'sent') || (newsletter.status === 'sending')) {
+ if (newsletter.type !== 'standard' || newsletter.status === 'scheduled') {
+ this.setState({
+ newsletter,
+ loading: false,
+ minimumLoadingTimePassed: true,
+ });
+ } else if (
+ newsletter.status === 'sent' ||
+ newsletter.status === 'sending'
+ ) {
this.setState({ newsletter, loading: false, testingPassed: true });
} else {
this.setState({ newsletter });
@@ -145,7 +166,9 @@ class Congratulate extends Component {
<>
diff --git a/mailpoet/assets/js/src/newsletters/send/congratulate/fail.jsx b/mailpoet/assets/js/src/newsletters/send/congratulate/fail.jsx
index e2532d6b38..58b69c178e 100644
--- a/mailpoet/assets/js/src/newsletters/send/congratulate/fail.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/congratulate/fail.jsx
@@ -10,9 +10,11 @@ function Fail(props) {
const [isClosing, setIsClosing] = useState(false);
return (
-
{MailPoet.I18n.t('congratulationsSendFailHeader')}
+
+ {MailPoet.I18n.t('congratulationsSendFailHeader')}
+
- { ReactStringReplace(
+ {ReactStringReplace(
MailPoet.I18n.t('congratulationsSendFailExplain'),
/\[link\](.*?)\[\/link\]/g,
(match, i) => (
@@ -23,19 +25,26 @@ function Fail(props) {
href="https://kb.mailpoet.com/article/231-sending-does-not-work"
data-beacon-article="5a0257ac2c7d3a272c0d7ad6"
>
- { match }
+ {match}
- )
+ ),
)}
-
+
{ props.failClicked(); setIsClosing(true); }}
+ onClick={() => {
+ props.failClicked();
+ setIsClosing(true);
+ }}
withSpinner={isClosing}
>
{MailPoet.I18n.t('close')}
diff --git a/mailpoet/assets/js/src/newsletters/send/congratulate/loading.jsx b/mailpoet/assets/js/src/newsletters/send/congratulate/loading.jsx
index e4cf183ff7..4fc03cc94c 100644
--- a/mailpoet/assets/js/src/newsletters/send/congratulate/loading.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/congratulate/loading.jsx
@@ -8,8 +8,12 @@ function Loading(props) {
{props.showRichLoadingScreen && (
-
{MailPoet.I18n.t('congratulationsLoadingHeader')}
-
{MailPoet.I18n.t('congratulationsLoadingBody')}
+
+ {MailPoet.I18n.t('congratulationsLoadingHeader')}
+
+
+ {MailPoet.I18n.t('congratulationsLoadingBody')}
+
diff --git a/mailpoet/assets/js/src/newsletters/send/congratulate/success_for_mss_users.jsx b/mailpoet/assets/js/src/newsletters/send/congratulate/success_for_mss_users.jsx
index a442e3e854..27616c6054 100644
--- a/mailpoet/assets/js/src/newsletters/send/congratulate/success_for_mss_users.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/congratulate/success_for_mss_users.jsx
@@ -24,7 +24,9 @@ function MSSUserSuccess(props) {
const [isClosing, setIsClosing] = useState(false);
return (
<>
-
{MailPoet.I18n.t('congratulationsSuccessHeader')}
+
+ {MailPoet.I18n.t('congratulationsSuccessHeader')}
+
{getSuccessMessage(props.newsletter)}
@@ -33,7 +35,10 @@ function MSSUserSuccess(props) {
{ props.successClicked(); setIsClosing(true); }}
+ onClick={() => {
+ props.successClicked();
+ setIsClosing(true);
+ }}
withSpinner={isClosing}
>
{MailPoet.I18n.t('close')}
diff --git a/mailpoet/assets/js/src/newsletters/send/congratulate/success_pitch_mss.tsx b/mailpoet/assets/js/src/newsletters/send/congratulate/success_pitch_mss.tsx
index b4a8257199..1248da45bc 100644
--- a/mailpoet/assets/js/src/newsletters/send/congratulate/success_pitch_mss.tsx
+++ b/mailpoet/assets/js/src/newsletters/send/congratulate/success_pitch_mss.tsx
@@ -3,7 +3,10 @@ import MailPoet from 'mailpoet';
import Heading from 'common/typography/heading/heading';
import WelcomeWizardStepLayoutBody from '../../../wizard/layout/step_layout_body.jsx';
-import { FreeBenefitsList, Controls } from '../../../wizard/steps/pitch_mss_step.jsx';
+import {
+ FreeBenefitsList,
+ Controls,
+} from '../../../wizard/steps/pitch_mss_step.jsx';
type Props = {
MSSPitchIllustrationUrl: string;
@@ -24,7 +27,10 @@ function getHeader(newsletterType: string): string {
woocommerce: MailPoet.I18n.t('congratulationsMSSPitchHeaderAutomated'),
};
- return typeMap[newsletterType] || MailPoet.I18n.t('congratulationsMSSPitchHeaderAutomated');
+ return (
+ typeMap[newsletterType] ||
+ MailPoet.I18n.t('congratulationsMSSPitchHeaderAutomated')
+ );
}
function PitchMss(props: Props): JSX.Element {
@@ -36,22 +42,26 @@ function PitchMss(props: Props): JSX.Element {
illustrationUrl={props.MSSPitchIllustrationUrl}
>
-
{MailPoet.I18n.t('congratulationsMSSPitchSubHeader')}
+
+ {MailPoet.I18n.t('congratulationsMSSPitchSubHeader')}
+
- {
- MailPoet.I18n.t(props.subscribersCount < 1000
+ {MailPoet.I18n.t(
+ props.subscribersCount < 1000
? 'welcomeWizardMSSFreeSubtitle'
- : 'welcomeWizardMSSNotFreeSubtitle')
- }
+ : 'welcomeWizardMSSNotFreeSubtitle',
+ )}
- {MailPoet.I18n.t('welcomeWizardMSSFreeListTitle')}
- :
+ {MailPoet.I18n.t('welcomeWizardMSSFreeListTitle')}:
{ props.onFinish(); setIsClosing(true); }}
+ next={(): void => {
+ props.onFinish();
+ setIsClosing(true);
+ }}
nextButtonText={MailPoet.I18n.t('welcomeWizardMSSFreeButton')}
nextWithSpinner={isClosing}
/>
diff --git a/mailpoet/assets/js/src/newsletters/send/date_text.jsx b/mailpoet/assets/js/src/newsletters/send/date_text.jsx
index d81ea611d0..00988e7182 100644
--- a/mailpoet/assets/js/src/newsletters/send/date_text.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/date_text.jsx
@@ -76,9 +76,8 @@ locale.localize.day = buildLocalizeFn({
values: dayValues,
defaultWidth: 'wide',
});
-locale.options.weekStartsOn = typeof MailPoet.wpWeekStartsOn !== 'undefined'
- ? MailPoet.wpWeekStartsOn
- : 1;
+locale.options.weekStartsOn =
+ typeof MailPoet.wpWeekStartsOn !== 'undefined' ? MailPoet.wpWeekStartsOn : 1;
registerLocale('mailpoet', locale);
@@ -98,7 +97,11 @@ class DateText extends Component {
getDisplayDateFormat = (format) => {
const convertedFormat = MailPoet.Date.convertFormat(format);
// Convert moment format to date-fns, see: https://git.io/fxCyr
- return convertedFormat.replace(/D/g, 'd').replace(/Y/g, 'y').replace(/\[/g, '').replace(/\]/g, '');
+ return convertedFormat
+ .replace(/D/g, 'd')
+ .replace(/Y/g, 'y')
+ .replace(/\[/g, '')
+ .replace(/\]/g, '');
};
getDate = (date) => {
diff --git a/mailpoet/assets/js/src/newsletters/send/date_time.jsx b/mailpoet/assets/js/src/newsletters/send/date_time.jsx
index 25c1a4bfa7..d7d21fa057 100644
--- a/mailpoet/assets/js/src/newsletters/send/date_time.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/date_time.jsx
@@ -16,8 +16,8 @@ class DateTime extends Component {
componentDidUpdate(prevProps) {
if (
- this.props.value !== prevProps.value
- || this.props.defaultDateTime !== prevProps.defaultDateTime
+ this.props.value !== prevProps.value ||
+ this.props.defaultDateTime !== prevProps.defaultDateTime
) {
setImmediate(() => {
this.setState(this.buildStateFromProps(this.props));
@@ -25,7 +25,8 @@ class DateTime extends Component {
}
}
- getDateTime = () => [this.state.date, this.state.time].join(this.DATE_TIME_SEPARATOR);
+ getDateTime = () =>
+ [this.state.date, this.state.time].join(this.DATE_TIME_SEPARATOR);
buildStateFromProps = (props) => {
const value = props.value || this.props.defaultDateTime;
diff --git a/mailpoet/assets/js/src/newsletters/send/ga_tracking.tsx b/mailpoet/assets/js/src/newsletters/send/ga_tracking.tsx
index 90d0d048b1..24d1636b3c 100644
--- a/mailpoet/assets/js/src/newsletters/send/ga_tracking.tsx
+++ b/mailpoet/assets/js/src/newsletters/send/ga_tracking.tsx
@@ -4,8 +4,11 @@ import ReactStringReplace from 'react-string-replace';
import { Field } from '../../form/types';
// Track once per page load
-const trackCampaignNameTyped = _.once(() => MailPoet.trackEvent('User has typed a GA campaign name'));
-const tipLink = 'https://kb.mailpoet.com/article/187-track-your-newsletters-subscribers-in-google-analytics';
+const trackCampaignNameTyped = _.once(() =>
+ MailPoet.trackEvent('User has typed a GA campaign name'),
+);
+const tipLink =
+ 'https://kb.mailpoet.com/article/187-track-your-newsletters-subscribers-in-google-analytics';
const tip = ReactStringReplace(
MailPoet.I18n.t('gaCampaignTip'),
/\[link\](.*?)\[\/link\]/g,
@@ -19,7 +22,7 @@ const tip = ReactStringReplace(
rel="noopener noreferrer"
className="mailpoet-link"
>
- { match }
+ {match}
),
diff --git a/mailpoet/assets/js/src/newsletters/send/notification.jsx b/mailpoet/assets/js/src/newsletters/send/notification.jsx
index 8469d6c2c4..c4f36dd142 100644
--- a/mailpoet/assets/js/src/newsletters/send/notification.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/notification.jsx
@@ -20,7 +20,9 @@ let fields = [
type: 'text',
validation: {
'data-parsley-required': true,
- 'data-parsley-required-message': MailPoet.I18n.t('emptySubjectLineError'),
+ 'data-parsley-required-message': MailPoet.I18n.t(
+ 'emptySubjectLineError',
+ ),
maxLength: 250,
},
},
@@ -29,7 +31,9 @@ let fields = [
customLabel: MailPoet.I18n.t('preheaderLabel'),
className: 'mailpoet-form-field-preheader',
placeholder: MailPoet.I18n.t('preheaderLine'),
- tooltip: `${MailPoet.I18n.t('preheaderLineTip1')} ${MailPoet.I18n.t('preheaderLineTip2')}`,
+ tooltip: `${MailPoet.I18n.t('preheaderLineTip1')} ${MailPoet.I18n.t(
+ 'preheaderLineTip2',
+ )}`,
type: 'textarea',
validation: {
maxLength: 250,
@@ -64,11 +68,15 @@ let fields = [
},
transformChangedValue: function transformChangedValue(segmentIds) {
const allSegments = this.getItems();
- return _.map(segmentIds, (id) => _.find(allSegments, (segment) => segment.id === id));
+ return _.map(segmentIds, (id) =>
+ _.find(allSegments, (segment) => segment.id === id),
+ );
},
validation: {
'data-parsley-required': true,
- 'data-parsley-required-message': MailPoet.I18n.t('noSegmentsSelectedError'),
+ 'data-parsley-required-message': MailPoet.I18n.t(
+ 'noSegmentsSelectedError',
+ ),
},
},
{
diff --git a/mailpoet/assets/js/src/newsletters/send/re_engagement.tsx b/mailpoet/assets/js/src/newsletters/send/re_engagement.tsx
index e67a82a528..b6afc145d3 100644
--- a/mailpoet/assets/js/src/newsletters/send/re_engagement.tsx
+++ b/mailpoet/assets/js/src/newsletters/send/re_engagement.tsx
@@ -7,20 +7,20 @@ import SenderField from './sender_address_field';
interface OnValueChangeParam {
target: {
- name: string,
+ name: string;
value: {
- afterTimeNumber: number | string,
- afterTimeType: string,
- },
+ afterTimeNumber: number | string;
+ afterTimeType: string;
+ };
};
}
interface Props {
item: {
options: {
- afterTimeNumber: number | string,
- afterTimeType: string,
- }
+ afterTimeNumber: number | string;
+ afterTimeType: string;
+ };
};
onValueChange: (val: OnValueChangeParam) => void;
}
@@ -30,9 +30,9 @@ function FormReEngagementScheduling(props: Props): JSX.Element {
{
props.onValueChange({
target: {
@@ -68,7 +68,9 @@ const fields = [
type: 'text',
validation: {
'data-parsley-required': true,
- 'data-parsley-required-message': MailPoet.I18n.t('emptySubjectLineError'),
+ 'data-parsley-required-message': MailPoet.I18n.t(
+ 'emptySubjectLineError',
+ ),
maxLength: 250,
},
},
@@ -79,7 +81,9 @@ const fields = [
placeholder: MailPoet.I18n.t('preheaderLine'),
// ignore for now until the MailPoet object is refactored to typescript
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
- tooltip: `${MailPoet.I18n.t('preheaderLineTip1')} ${MailPoet.I18n.t('preheaderLineTip2')}`,
+ tooltip: `${MailPoet.I18n.t('preheaderLineTip1')} ${MailPoet.I18n.t(
+ 'preheaderLineTip2',
+ )}`,
type: 'textarea',
validation: {
maxLength: 250,
@@ -113,11 +117,16 @@ const fields = [
},
transformChangedValue: function transformChangedValue(segmentIds) {
const allSegments = this.getItems();
- return map((id) => find((segment) => segment.id === id, allSegments), segmentIds);
+ return map(
+ (id) => find((segment) => segment.id === id, allSegments),
+ segmentIds,
+ );
},
validation: {
'data-parsley-required': true,
- 'data-parsley-required-message': MailPoet.I18n.t('noSegmentsSelectedError'),
+ 'data-parsley-required-message': MailPoet.I18n.t(
+ 'noSegmentsSelectedError',
+ ),
},
},
{
diff --git a/mailpoet/assets/js/src/newsletters/send/standard.tsx b/mailpoet/assets/js/src/newsletters/send/standard.tsx
index cd5b2d0149..427273dd29 100644
--- a/mailpoet/assets/js/src/newsletters/send/standard.tsx
+++ b/mailpoet/assets/js/src/newsletters/send/standard.tsx
@@ -22,9 +22,9 @@ type StandardSchedulingProps = {
target: {
name: string;
value: string;
- },
+ };
}) => void;
- field: Field
+ field: Field;
};
class StandardScheduling extends Component {
@@ -77,9 +77,7 @@ class StandardScheduling extends Component {
schedulingOptions = (
<>
- {MailPoet.I18n.t('websiteTimeIs')}
- {' '}
- {currentTime}
+ {MailPoet.I18n.t('websiteTimeIs')} {currentTime}
@@ -130,7 +128,9 @@ let fields: Array
= [
type: 'text',
validation: {
'data-parsley-required': true,
- 'data-parsley-required-message': MailPoet.I18n.t('emptySubjectLineError'),
+ 'data-parsley-required-message': MailPoet.I18n.t(
+ 'emptySubjectLineError',
+ ),
maxLength: 250,
},
},
@@ -139,7 +139,9 @@ let fields: Array = [
customLabel: MailPoet.I18n.t('preheaderLabel'),
className: 'mailpoet-form-field-preheader',
placeholder: MailPoet.I18n.t('preheaderLine'),
- tooltip: `${MailPoet.I18n.t('preheaderLineTip1')} ${MailPoet.I18n.t('preheaderLineTip2')}`,
+ tooltip: `${MailPoet.I18n.t('preheaderLineTip1')} ${MailPoet.I18n.t(
+ 'preheaderLineTip2',
+ )}`,
type: 'textarea',
validation: {
maxLength: 250,
@@ -166,13 +168,19 @@ let fields: Array = [
getCount: function getCount(segment: { subscribers: string }): string {
return parseInt(segment.subscribers, 10).toLocaleString();
},
- transformChangedValue: function transformChangedValue(segmentIds: string[]): unknown[] {
+ transformChangedValue: function transformChangedValue(
+ segmentIds: string[],
+ ): unknown[] {
const allSegments = this.getItems() || [];
- return segmentIds.map((id) => allSegments.find((segment) => segment.id === id));
+ return segmentIds.map((id) =>
+ allSegments.find((segment) => segment.id === id),
+ );
},
validation: {
'data-parsley-required': true,
- 'data-parsley-required-message': MailPoet.I18n.t('noSegmentsSelectedError'),
+ 'data-parsley-required-message': MailPoet.I18n.t(
+ 'noSegmentsSelectedError',
+ ),
},
},
{
@@ -239,23 +247,28 @@ type SendButtonOptions = {
export default {
getFields: (): typeof fields => fields,
- getSendButtonOptions: (newsletter: Partial = {}): SendButtonOptions => {
+ getSendButtonOptions: (
+ newsletter: Partial = {},
+ ): SendButtonOptions => {
const currentDateTime = Moment(window.mailpoet_current_date_time);
- const isScheduled = (
- typeof newsletter.options === 'object'
- && newsletter.options?.isScheduled === '1'
- && MailPoet.Date.isInFuture(newsletter.options?.scheduledAt, currentDateTime)
- );
+ const isScheduled =
+ typeof newsletter.options === 'object' &&
+ newsletter.options?.isScheduled === '1' &&
+ MailPoet.Date.isInFuture(
+ newsletter.options?.scheduledAt,
+ currentDateTime,
+ );
const options: SendButtonOptions = {
- value: (isScheduled
+ value: isScheduled
? MailPoet.I18n.t('schedule')
- : MailPoet.I18n.t('send')
- ),
+ : MailPoet.I18n.t('send'),
};
- if (newsletter.status === NewsletterStatus.Sent
- || newsletter.status === NewsletterStatus.Sending) {
+ if (
+ newsletter.status === NewsletterStatus.Sent ||
+ newsletter.status === NewsletterStatus.Sending
+ ) {
options.disabled = 'disabled';
}
diff --git a/mailpoet/assets/js/src/newsletters/send/time_select.jsx b/mailpoet/assets/js/src/newsletters/send/time_select.jsx
index c29c1e7042..b6574e67fd 100644
--- a/mailpoet/assets/js/src/newsletters/send/time_select.jsx
+++ b/mailpoet/assets/js/src/newsletters/send/time_select.jsx
@@ -5,16 +5,11 @@ import Select from 'common/form/select/select.tsx';
// eslint-disable-next-line react/prefer-stateless-function
class TimeSelect extends Component {
render() {
- const options = Object.keys(this.props.timeOfDayItems).map(
- (value) => (
-
- { this.props.timeOfDayItems[value] }
-
- )
- );
+ const options = Object.keys(this.props.timeOfDayItems).map((value) => (
+
+ {this.props.timeOfDayItems[value]}
+
+ ));
return (
setNewsletter({
- id: newsletter.id,
- subject: res.data.subject,
- sent: res.data.sent_at !== null,
- }))
+ .done((res) =>
+ setNewsletter({
+ id: newsletter.id,
+ subject: res.data.subject,
+ sent: res.data.sent_at !== null,
+ }),
+ )
.fail((res) => MailPoet.Notice.showApiErrorNotice(res));
}, [newsletter.id]);
return (
<>
{MailPoet.I18n.t('sendingStatusTitle')}
-
+
-
>
);
}
@@ -71,10 +77,9 @@ SendingStatus.propTypes = {
}).isRequired,
};
-const compareProps = (prev, next) => (
- prev.location.pathname === next.location.pathname
- && prev.params.id === next.params.id
-);
+const compareProps = (prev, next) =>
+ prev.location.pathname === next.location.pathname &&
+ prev.params.id === next.params.id;
const onRenderItem = (item) => (
@@ -82,26 +87,29 @@ const onRenderItem = (item) => (
);
-const SendingStatusListing = memo(({ location, params }) => (
- `${item.taskId}-${item.subscriberId}`}
- columns={columns}
- messages={messages}
- auto_refresh
- sort_by="failed"
- sort_order="desc"
- afterGetItems={(state) => {
- checkMailerStatus(state);
- checkCronStatus(state);
- }}
- />
-), compareProps);
+const SendingStatusListing = memo(
+ ({ location, params }) => (
+ `${item.taskId}-${item.subscriberId}`}
+ columns={columns}
+ messages={messages}
+ auto_refresh
+ sort_by="failed"
+ sort_order="desc"
+ afterGetItems={(state) => {
+ checkMailerStatus(state);
+ checkCronStatus(state);
+ }}
+ />
+ ),
+ compareProps,
+);
SendingStatusListing.propTypes = {
location: PropTypes.shape({
pathname: PropTypes.string,
@@ -113,7 +121,11 @@ SendingStatusListing.propTypes = {
function StatsLink({ newsletter }) {
if (!newsletter.id || !newsletter.subject || !newsletter.sent) return null;
- return { newsletter.subject }
;
+ return (
+
+ {newsletter.subject}
+
+ );
}
StatsLink.propTypes = {
newsletter: PropTypes.shape({
@@ -131,7 +143,14 @@ StatsLink.defaultProps = {
};
function ListingItem({
- error, failed, taskId, processed, email, subscriberId, lastName, firstName,
+ error,
+ failed,
+ taskId,
+ processed,
+ email,
+ subscriberId,
+ lastName,
+ firstName,
}) {
const resend = () => {
MailPoet.Ajax.post({
@@ -147,7 +166,7 @@ function ListingItem({
const rowClasses = classNames(
'manage-column',
'column-primary',
- 'has-row-actions'
+ 'has-row-actions',
);
let status = MailPoet.I18n.t('unprocessed');
if (processed) {
@@ -174,22 +193,33 @@ function ListingItem({
}
return (
<>
-
+
- { email }
+ {email}
- { `${firstName} ${lastName}` }
+ {`${firstName} ${lastName}`}
-
- { status }
+
+ {status}
-
- { error }
+
+ {error}
>
);
diff --git a/mailpoet/assets/js/src/newsletters/templates.jsx b/mailpoet/assets/js/src/newsletters/templates.jsx
index 7e13ff3f6d..fb1fabd66e 100644
--- a/mailpoet/assets/js/src/newsletters/templates.jsx
+++ b/mailpoet/assets/js/src/newsletters/templates.jsx
@@ -10,7 +10,8 @@ import _ from 'underscore';
import PropTypes from 'prop-types';
import { GlobalContext } from 'context/index.jsx';
-const getEditorUrl = (id) => `admin.php?page=mailpoet-newsletter-editor&id=${id}`;
+const getEditorUrl = (id) =>
+ `admin.php?page=mailpoet-newsletter-editor&id=${id}`;
const templatesCategories = [];
if (window.mailpoet_newsletters_templates_recently_sent_count) {
@@ -42,7 +43,7 @@ templatesCategories.push(
name: 'blank',
label: MailPoet.I18n.t('tabBlankTitle'),
},
- ]
+ ],
);
if (window.mailpoet_woocommerce_active) {
@@ -58,7 +59,7 @@ templatesCategories.push(
name: 'saved',
label: MailPoet.I18n.t('savedTemplates'),
},
- ]
+ ],
);
class NewsletterTemplates extends Component {
@@ -83,41 +84,49 @@ class NewsletterTemplates extends Component {
api_version: window.mailpoet_api_version,
endpoint: 'newsletterTemplates',
action: 'getAll',
- }).done((response) => {
- if (response.data.length === 0) {
- response.data = [
- {
- name:
- MailPoet.I18n.t('mailpoetGuideTemplateTitle'),
- categories: '["welcome", "notification", "standard", "woocommerce"]',
- readonly: true,
- },
- ];
- }
- response.data.forEach(this.addTemplate);
- this.sortTemplates();
- }).fail((response) => {
- if (response.errors.length > 0) {
- this.context.notices.error(
- response.errors.map((error) => {error.message}
),
- { scroll: true }
- );
- }
- }).always(() => {
- this.selectInitialTab();
- });
+ })
+ .done((response) => {
+ if (response.data.length === 0) {
+ response.data = [
+ {
+ name: MailPoet.I18n.t('mailpoetGuideTemplateTitle'),
+ categories:
+ '["welcome", "notification", "standard", "woocommerce"]',
+ readonly: true,
+ },
+ ];
+ }
+ response.data.forEach(this.addTemplate);
+ this.sortTemplates();
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ this.context.notices.error(
+ response.errors.map((error) => (
+ {error.message}
+ )),
+ { scroll: true },
+ );
+ }
+ })
+ .always(() => {
+ this.selectInitialTab();
+ });
}
addTemplate(template) {
- const categoriesNames = templatesCategories.map((category) => category.name);
+ const categoriesNames = templatesCategories.map(
+ (category) => category.name,
+ );
let categories;
if (categoriesNames.indexOf('woocommerce') === -1) {
categoriesNames.push('woocommerce');
}
try {
- categories = JSON.parse(template.categories)
- .filter((name) => categoriesNames.indexOf(name) !== -1);
+ categories = JSON.parse(template.categories).filter(
+ (name) => categoriesNames.indexOf(name) !== -1,
+ );
} catch (err) {
categories = [];
}
@@ -142,10 +151,16 @@ class NewsletterTemplates extends Component {
this.templates[category].sort((a, b) => {
// MAILPOET-2087 - templates of type "blank" should be first
if (blankFirstCategories.includes(category)) {
- if (a.categories.includes('"blank"') && !b.categories.includes('"blank"')) {
+ if (
+ a.categories.includes('"blank"') &&
+ !b.categories.includes('"blank"')
+ ) {
return -1;
}
- if (!a.categories.includes('"blank"') && b.categories.includes('"blank"')) {
+ if (
+ !a.categories.includes('"blank"') &&
+ b.categories.includes('"blank"')
+ ) {
return 1;
}
}
@@ -167,43 +182,52 @@ class NewsletterTemplates extends Component {
data: {
id: this.props.match.params.id,
},
- }).done((response) => {
- emailType = response.data.type;
- if (emailType === 'automatic') {
- emailType = response.data.options.group || emailType;
- }
- if (window.mailpoet_newsletters_templates_recently_sent_count) {
- selectedTab = 'recent';
- } else if (_.findWhere(templatesCategories, { name: response.data.type })) {
- selectedTab = response.data.type;
- } else if (
- response.data.type === 'automatic'
- && _.findWhere(templatesCategories, { name: response.data.options.group })
- ) {
- selectedTab = response.data.options.group;
- }
- }).fail((response) => {
- if (response.errors.length > 0) {
- this.context.notices.error(
- response.errors.map((error) => {error.message}
),
- { scroll: true }
- );
- }
- }).always(() => {
- this.setState({
- templates: this.templates,
- emailType,
- selectedTab,
- loading: false,
+ })
+ .done((response) => {
+ emailType = response.data.type;
+ if (emailType === 'automatic') {
+ emailType = response.data.options.group || emailType;
+ }
+ if (window.mailpoet_newsletters_templates_recently_sent_count) {
+ selectedTab = 'recent';
+ } else if (
+ _.findWhere(templatesCategories, { name: response.data.type })
+ ) {
+ selectedTab = response.data.type;
+ } else if (
+ response.data.type === 'automatic' &&
+ _.findWhere(templatesCategories, {
+ name: response.data.options.group,
+ })
+ ) {
+ selectedTab = response.data.options.group;
+ }
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ this.context.notices.error(
+ response.errors.map((error) => (
+ {error.message}
+ )),
+ { scroll: true },
+ );
+ }
+ })
+ .always(() => {
+ this.setState({
+ templates: this.templates,
+ emailType,
+ selectedTab,
+ loading: false,
+ });
});
- });
}
afterTemplateDelete(success, id) {
if (success) {
Object.keys(this.templates).forEach((category) => {
this.templates[category] = this.templates[category].filter(
- (template) => template.id !== id
+ (template) => template.id !== id,
);
});
}
@@ -235,12 +259,18 @@ class NewsletterTemplates extends Component {
render() {
if (this.state.loading) return ;
- const categories = templatesCategories.concat({
- name: 'import',
- label: MailPoet.I18n.t('tabImportTitle'),
- }).map((category) => Object.assign(category, {
- automationId: `templates-${category.name.replace(/\s+/g, '-').toLowerCase()}`,
- }));
+ const categories = templatesCategories
+ .concat({
+ name: 'import',
+ label: MailPoet.I18n.t('tabImportTitle'),
+ })
+ .map((category) =>
+ Object.assign(category, {
+ automationId: `templates-${category.name
+ .replace(/\s+/g, '-')
+ .toLowerCase()}`,
+ }),
+ );
const selectedTab = this.state.selectedTab;
let content = null;
@@ -283,7 +313,10 @@ class NewsletterTemplates extends Component {
-
+
Template imported');
} catch (err) {
- this.context.notices.error({MailPoet.I18n.t('templateFileMalformedError')}
);
+ this.context.notices.error(
+ {MailPoet.I18n.t('templateFileMalformedError')}
,
+ );
}
};
@@ -55,9 +57,9 @@ class ImportTemplate extends Component {
}
if (
- template.categories.indexOf('standard') === -1
- && template.categories.indexOf('welcome') === -1
- && template.categories.indexOf('notification') === -1
+ template.categories.indexOf('standard') === -1 &&
+ template.categories.indexOf('welcome') === -1 &&
+ template.categories.indexOf('notification') === -1
) {
template.categories.push('standard');
}
@@ -70,17 +72,21 @@ class ImportTemplate extends Component {
endpoint: 'newsletterTemplates',
action: 'save',
data: template,
- }).done((response) => {
- afterImport(true, response.data);
- }).fail((response) => {
- if (response.errors.length > 0) {
- this.context.notices.error(
- response.errors.map((error) => {error.message}
),
- { scroll: true }
- );
- }
- afterImport(false);
- });
+ })
+ .done((response) => {
+ afterImport(true, response.data);
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ this.context.notices.error(
+ response.errors.map((error) => (
+ {error.message}
+ )),
+ { scroll: true },
+ );
+ }
+ afterImport(false);
+ });
}
render() {
diff --git a/mailpoet/assets/js/src/newsletters/templates/template_box.jsx b/mailpoet/assets/js/src/newsletters/templates/template_box.jsx
index 3992ab7580..06bd0cc4ee 100644
--- a/mailpoet/assets/js/src/newsletters/templates/template_box.jsx
+++ b/mailpoet/assets/js/src/newsletters/templates/template_box.jsx
@@ -22,9 +22,7 @@ class TemplateBox extends Component {
}
onDelete() {
- const {
- id, name, beforeDelete, afterDelete,
- } = this.props;
+ const { id, name, beforeDelete, afterDelete } = this.props;
const onConfirm = () => {
beforeDelete();
MailPoet.Ajax.post({
@@ -34,17 +32,21 @@ class TemplateBox extends Component {
data: {
id,
},
- }).done(() => {
- afterDelete(true, id);
- }).fail((response) => {
- if (response.errors.length > 0) {
- this.context.notices.error(
- response.errors.map((error) => {error.message}
),
- { scroll: true }
- );
- }
- afterDelete(false);
- });
+ })
+ .done(() => {
+ afterDelete(true, id);
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ this.context.notices.error(
+ response.errors.map((error) => (
+ {error.message}
+ )),
+ { scroll: true },
+ );
+ }
+ afterDelete(false);
+ });
};
confirmAlert({
message: MailPoet.I18n.t('confirmTemplateDeletion').replace('%1$s', name),
@@ -61,9 +63,7 @@ class TemplateBox extends Component {
}
onSelect() {
- const {
- newsletterId, name, beforeSelect, afterSelect,
- } = this.props;
+ const { newsletterId, name, beforeSelect, afterSelect } = this.props;
beforeSelect();
@@ -79,23 +79,25 @@ class TemplateBox extends Component {
id: newsletterId,
template_id: this.props.id,
},
- }).done((response) => {
- afterSelect(true, response.data.id);
- }).fail((response) => {
- if (response.errors.length > 0) {
- this.context.notices.error(
- response.errors.map((error) => {error.message}
),
- { scroll: true }
- );
- }
- afterSelect(false);
- });
+ })
+ .done((response) => {
+ afterSelect(true, response.data.id);
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ this.context.notices.error(
+ response.errors.map((error) => (
+ {error.message}
+ )),
+ { scroll: true },
+ );
+ }
+ afterSelect(false);
+ });
}
render() {
- const {
- index, name, thumbnail, readonly,
- } = this.props;
+ const { index, name, thumbnail, readonly } = this.props;
let preview = '';
if (typeof thumbnail === 'string' && thumbnail.length > 0) {
@@ -109,7 +111,15 @@ class TemplateBox extends Component {
}}
>
- {thumbnail ? (
) : ''}
+ {thumbnail ? (
+
+ ) : (
+ ''
+ )}
{MailPoet.I18n.t('zoom')}
@@ -126,7 +136,7 @@ class TemplateBox extends Component {
automationId={`select_template_${index}`}
className="mailpoet-template-two-lines"
>
- { preview }
+ {preview}
);
}
diff --git a/mailpoet/assets/js/src/newsletters/types.tsx b/mailpoet/assets/js/src/newsletters/types.tsx
index 2e42006de6..df52e86d14 100644
--- a/mailpoet/assets/js/src/newsletters/types.tsx
+++ b/mailpoet/assets/js/src/newsletters/types.tsx
@@ -34,7 +34,7 @@ function NewsletterTypes({
history,
hideClosingButton = false,
hideScreenOptions = true,
-}: Props) : JSX.Element {
+}: Props): JSX.Element {
const [isCreating, setIsCreating] = useState(false);
const setupNewsletter = (type): void => {
@@ -65,7 +65,7 @@ function NewsletterTypes({
MailPoet.trackEvent('Emails > WooCommerce email customizer enabled');
} catch (response) {
if (isErrorResponse(response) && response.errors.length > 0) {
- return (
);
+ return
;
}
return null;
}
@@ -75,28 +75,37 @@ function NewsletterTypes({
};
const renderType = (type): JSX.Element => {
- const badgeClassName = (window.mailpoet_is_new_user === true) ? 'mailpoet_badge mailpoet_badge_video' : 'mailpoet_badge mailpoet_badge_video mailpoet_badge_video_grey';
+ const badgeClassName =
+ window.mailpoet_is_new_user === true
+ ? 'mailpoet_badge mailpoet_badge_video'
+ : 'mailpoet_badge mailpoet_badge_video mailpoet_badge_video_grey';
return (
-
+
);
@@ -118,7 +127,9 @@ function NewsletterTypes({
onClick={openWooCommerceCustomizer}
tabIndex={0}
onKeyDown={async (event): Promise
=> {
- if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
+ if (
+ ['keydown', 'keypress'].includes(event.type) &&
+ ['Enter', ' '].includes(event.key)
) {
event.preventDefault();
await openWooCommerceCustomizer();
@@ -153,12 +164,10 @@ function NewsletterTypes({
)}
-
+
- {email.slug === 'woocommerce' && getAdditionalTypes().map((type) => renderType(type), this)}
+ {email.slug === 'woocommerce' &&
+ getAdditionalTypes().map((type) => renderType(type), this)}
);
});
@@ -177,21 +186,29 @@ function NewsletterTypes({
type,
subject: MailPoet.I18n.t('draftNewsletterTitle'),
},
- }).done((response) => {
- history.push(`/template/${response.data.id}`);
- }).fail((response) => {
- setIsCreating(false);
- if (response.errors.length > 0) {
- return (
);
- }
- return null;
- });
+ })
+ .done((response) => {
+ history.push(`/template/${response.data.id}`);
+ })
+ .fail((response) => {
+ setIsCreating(false);
+ if (response.errors.length > 0) {
+ return
;
+ }
+ return null;
+ });
};
const createStandardNewsletter = _.partial(createNewsletter, 'standard');
- const createNotificationNewsletter = _.partial(setupNewsletter, 'notification');
+ const createNotificationNewsletter = _.partial(
+ setupNewsletter,
+ 'notification',
+ );
const createWelcomeNewsletter = _.partial(setupNewsletter, 'welcome');
- const createReEngagementNewsletter = _.partial(setupNewsletter, 're-engagement');
+ const createReEngagementNewsletter = _.partial(
+ setupNewsletter,
+ 're-engagement',
+ );
const defaultTypes = [
{
@@ -205,7 +222,9 @@ function NewsletterTypes({
tabIndex={0}
withSpinner={isCreating}
onKeyDown={(event): void => {
- if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
+ if (
+ ['keydown', 'keypress'].includes(event.type) &&
+ ['Enter', ' '].includes(event.key)
) {
event.preventDefault();
createStandardNewsletter();
@@ -220,7 +239,8 @@ function NewsletterTypes({
slug: 'welcome',
title: MailPoet.I18n.t('welcomeNewsletterTypeTitle'),
description: MailPoet.I18n.t('welcomeNewsletterTypeDescription'),
- videoGuide: 'https://kb.mailpoet.com/article/254-video-guide-to-welcome-emails',
+ videoGuide:
+ 'https://kb.mailpoet.com/article/254-video-guide-to-welcome-emails',
videoGuideBeacon: '5b05ebf20428635ba8b2aa53',
action: (
{
- if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
+ if (
+ ['keydown', 'keypress'].includes(event.type) &&
+ ['Enter', ' '].includes(event.key)
) {
event.preventDefault();
createWelcomeNewsletter();
@@ -244,7 +266,8 @@ function NewsletterTypes({
slug: 'notification',
title: MailPoet.I18n.t('postNotificationNewsletterTypeTitle'),
description: MailPoet.I18n.t('postNotificationNewsletterTypeDescription'),
- videoGuide: 'https://kb.mailpoet.com/article/210-video-guide-to-post-notifications',
+ videoGuide:
+ 'https://kb.mailpoet.com/article/210-video-guide-to-post-notifications',
videoGuideBeacon: '59ba6fb3042863033a1cd5a5',
action: (
{
- if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
+ if (
+ ['keydown', 'keypress'].includes(event.type) &&
+ ['Enter', ' '].includes(event.key)
) {
event.preventDefault();
createNotificationNewsletter();
@@ -275,7 +300,9 @@ function NewsletterTypes({
withSpinner={isCreating}
tabIndex={0}
onKeyDown={(event): void => {
- if ((['keydown', 'keypress'].includes(event.type) && ['Enter', ' '].includes(event.key))
+ if (
+ ['keydown', 'keypress'].includes(event.type) &&
+ ['Enter', ' '].includes(event.key)
) {
event.preventDefault();
createReEngagementNewsletter();
@@ -288,9 +315,11 @@ function NewsletterTypes({
},
];
- let types = Hooks.applyFilters('mailpoet_newsletters_types', [
- ...defaultTypes,
- ], this);
+ let types = Hooks.applyFilters(
+ 'mailpoet_newsletters_types',
+ [...defaultTypes],
+ this,
+ );
if (filter) {
types = types.filter(filter);
}
@@ -304,12 +333,22 @@ function NewsletterTypes({
return (
<>
{hideScreenOptions && }
-
+
{!hideClosingButton && (
- history.push('/')} className="mailpoet-modal-close">{ModalCloseIcon}
+ history.push('/')}
+ className="mailpoet-modal-close"
+ >
+ {ModalCloseIcon}
+
)}
@@ -329,4 +368,6 @@ NewsletterTypes.defaultProps = {
hideClosingButton: false,
};
-export default withRouter(NewsletterTypes as ComponentType
);
+export default withRouter(
+ NewsletterTypes as ComponentType,
+);
diff --git a/mailpoet/assets/js/src/newsletters/types/automatic_emails/event.jsx b/mailpoet/assets/js/src/newsletters/types/automatic_emails/event.jsx
index c767a5c030..6b7d321e3a 100644
--- a/mailpoet/assets/js/src/newsletters/types/automatic_emails/event.jsx
+++ b/mailpoet/assets/js/src/newsletters/types/automatic_emails/event.jsx
@@ -14,10 +14,7 @@ class AutomaticEmailEvent extends PureComponent {
let action;
if (this.props.premium) {
action = (
-
+
{MailPoet.I18n.t('premiumFeatureLink')}
);
@@ -32,7 +29,9 @@ class AutomaticEmailEvent extends PureComponent {
);
} else {
- const onClick = !disabled ? _.partial(this.props.eventsConfigurator, event.slug) : null;
+ const onClick = !disabled
+ ? _.partial(this.props.eventsConfigurator, event.slug)
+ : null;
action = (
{
- if ((['keydown', 'keypress'].includes(keyEvent.type) && ['Enter', ' '].includes(keyEvent.key))
+ if (
+ ['keydown', 'keypress'].includes(keyEvent.type) &&
+ ['Enter', ' '].includes(keyEvent.key)
) {
keyEvent.preventDefault();
onClick();
@@ -55,19 +56,15 @@ class AutomaticEmailEvent extends PureComponent {
return (
- {event.badge && }
+ {event.badge && }
- {event.title}
- {' '}
- {event.soon && `(${MailPoet.I18n.t('soon')})`}
+ {event.title} {event.soon && `(${MailPoet.I18n.t('soon')})`}
{event.description}
-
- {action}
-
+
{action}
);
diff --git a/mailpoet/assets/js/src/newsletters/types/automatic_emails/event_group_logos.jsx b/mailpoet/assets/js/src/newsletters/types/automatic_emails/event_group_logos.jsx
index c763401d07..ea318287ff 100644
--- a/mailpoet/assets/js/src/newsletters/types/automatic_emails/event_group_logos.jsx
+++ b/mailpoet/assets/js/src/newsletters/types/automatic_emails/event_group_logos.jsx
@@ -1,6 +1,13 @@
const AutomaticEmailEventGroupLogos = {
woocommerce: (
-
+
{
- this.showTemplateSelection(response.data.id);
- }).fail((response) => {
- if (response.errors.length > 0) {
- this.context.notices.error(
- response.errors.map((error) => {error.message}
),
- { scroll: true }
- );
- }
- });
+ })
+ .done((response) => {
+ this.showTemplateSelection(response.data.id);
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ this.context.notices.error(
+ response.errors.map((error) => (
+ {error.message}
+ )),
+ { scroll: true },
+ );
+ }
+ });
};
showTemplateSelection = (newsletterId) => {
@@ -67,7 +71,10 @@ class NewsletterNotification extends Component {
-
+
{MailPoet.I18n.t('selectFrequency')}
@@ -78,11 +85,7 @@ class NewsletterNotification extends Component {
onValueChange={this.handleValueChange}
/>
-
+
{MailPoet.I18n.t('next')}
diff --git a/mailpoet/assets/js/src/newsletters/types/notification/scheduling.jsx b/mailpoet/assets/js/src/newsletters/types/notification/scheduling.jsx
index 249fd9050c..8a9278c8eb 100644
--- a/mailpoet/assets/js/src/newsletters/types/notification/scheduling.jsx
+++ b/mailpoet/assets/js/src/newsletters/types/notification/scheduling.jsx
@@ -59,13 +59,17 @@ class NotificationScheduling extends Component {
this.handleValueChanges(changes);
};
- handleTimeOfDayChange = (event) => this.handleValueChanges({ timeOfDay: event.target.value });
+ handleTimeOfDayChange = (event) =>
+ this.handleValueChanges({ timeOfDay: event.target.value });
- handleWeekDayChange = (event) => this.handleValueChanges({ weekDay: event.target.value });
+ handleWeekDayChange = (event) =>
+ this.handleValueChanges({ weekDay: event.target.value });
- handleMonthDayChange = (event) => this.handleValueChanges({ monthDay: event.target.value });
+ handleMonthDayChange = (event) =>
+ this.handleValueChanges({ monthDay: event.target.value });
- handleNthWeekDayChange = (event) => this.handleValueChanges({ nthWeekDay: event.target.value });
+ handleNthWeekDayChange = (event) =>
+ this.handleValueChanges({ nthWeekDay: event.target.value });
render() {
const value = this.getCurrentValue();
@@ -84,7 +88,10 @@ class NotificationScheduling extends Component {
);
}
- if (value.intervalType === 'weekly' || value.intervalType === 'nthWeekDay') {
+ if (
+ value.intervalType === 'weekly' ||
+ value.intervalType === 'nthWeekDay'
+ ) {
weekDaySelection = (
- {value.intervalType !== 'immediately' &&
}
+ {value.intervalType !== 'immediately' && (
+
+ )}
);
}
diff --git a/mailpoet/assets/js/src/newsletters/types/re_engagement/re_engagement.tsx b/mailpoet/assets/js/src/newsletters/types/re_engagement/re_engagement.tsx
index 64c877f9f4..8f70956a56 100644
--- a/mailpoet/assets/js/src/newsletters/types/re_engagement/re_engagement.tsx
+++ b/mailpoet/assets/js/src/newsletters/types/re_engagement/re_engagement.tsx
@@ -1,9 +1,5 @@
import { useState } from 'react';
-import {
- __,
- assoc,
- compose,
-} from 'lodash/fp';
+import { __, assoc, compose } from 'lodash/fp';
import { useHistory } from 'react-router-dom';
import MailPoet from 'mailpoet';
@@ -19,12 +15,9 @@ export function NewsletterTypeReEngagement(): JSX.Element {
let defaultAfterTime = '';
if (MailPoet.settings.deactivate_subscriber_after_inactive_days) {
defaultAfterTime = (
- (
- Math.floor(
- Number(
- MailPoet.settings.deactivate_subscriber_after_inactive_days,
- ) / 30,
- )
+ Math.floor(
+ Number(MailPoet.settings.deactivate_subscriber_after_inactive_days) /
+ 30,
) - 1
).toString();
}
@@ -53,40 +46,51 @@ export function NewsletterTypeReEngagement(): JSX.Element {
subject: MailPoet.I18n.t('draftNewsletterTitle'),
options,
},
- }).done((response) => {
- showTemplateSelection(response.data.id as string);
- }).fail((response) => {
- setLoading(false);
- if (response.errors) {
- setErrors(response.errors as { message:string }[]);
- }
- });
+ })
+ .done((response) => {
+ showTemplateSelection(response.data.id as string);
+ })
+ .fail((response) => {
+ setLoading(false);
+ if (response.errors) {
+ setErrors(response.errors as { message: string }[]);
+ }
+ });
}
return (
- {errors && (
)}
+ {errors &&
}
-
+
handleNext()}
type="button"
- isDisabled={(!options.afterTimeNumber) || loading}
+ isDisabled={!options.afterTimeNumber || loading}
withSpinner={loading}
>
{MailPoet.I18n.t('next')}
diff --git a/mailpoet/assets/js/src/newsletters/types/re_engagement/scheduling.tsx b/mailpoet/assets/js/src/newsletters/types/re_engagement/scheduling.tsx
index f7c4282cdc..cf7bc6ace3 100644
--- a/mailpoet/assets/js/src/newsletters/types/re_engagement/scheduling.tsx
+++ b/mailpoet/assets/js/src/newsletters/types/re_engagement/scheduling.tsx
@@ -34,49 +34,44 @@ export function Scheduling({
return (
<>
- {MailPoet.I18n.t('selectEventToSendReEngagementEmail')}
+
+ {MailPoet.I18n.t('selectEventToSendReEngagementEmail')}
+
-
- {MailPoet.I18n.t('reEngagementTextPre')}
-
+ {MailPoet.I18n.t('reEngagementTextPre')}
-
+
weeks
months
- {
- ((!!inactiveSubscribersPeriod) && (inactivePeriod <= daysSelected)) && (
-
- {
- ReactStringReplace(
- MailPoet.I18n.t('reEngagementEmailWarning')
- .replace('{$months}', `${Math.floor(inactiveSubscribersPeriod / 30)}`),
- /\[link\](.*?)\[\/link\]/g,
- (match) => (
-
- {match}
-
- ),
- )
- }
-
- )
- }
+ {!!inactiveSubscribersPeriod && inactivePeriod <= daysSelected && (
+
+ {ReactStringReplace(
+ MailPoet.I18n.t('reEngagementEmailWarning').replace(
+ '{$months}',
+ `${Math.floor(inactiveSubscribersPeriod / 30)}`,
+ ),
+ /\[link\](.*?)\[\/link\]/g,
+ (match) => (
+
+ {match}
+
+ ),
+ )}
+
+ )}
>
);
}
diff --git a/mailpoet/assets/js/src/newsletters/types/standard.jsx b/mailpoet/assets/js/src/newsletters/types/standard.jsx
index 81f70e5eed..a8057e9e52 100644
--- a/mailpoet/assets/js/src/newsletters/types/standard.jsx
+++ b/mailpoet/assets/js/src/newsletters/types/standard.jsx
@@ -15,16 +15,20 @@ class NewsletterStandard extends Component {
data: {
type: 'standard',
},
- }).done((response) => {
- this.showTemplateSelection(response.data.id);
- }).fail((response) => {
- if (response.errors.length > 0) {
- this.context.notices.error(
- response.errors.map((error) => {error.message}
),
- { scroll: true }
- );
- }
- });
+ })
+ .done((response) => {
+ this.showTemplateSelection(response.data.id);
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ this.context.notices.error(
+ response.errors.map((error) => (
+ {error.message}
+ )),
+ { scroll: true },
+ );
+ }
+ });
}
showTemplateSelection = (newsletterId) => {
@@ -34,7 +38,10 @@ class NewsletterStandard extends Component {
render() {
return (
-
+
);
}
diff --git a/mailpoet/assets/js/src/newsletters/types/welcome/scheduling.jsx b/mailpoet/assets/js/src/newsletters/types/welcome/scheduling.jsx
index 66645b90b1..eb69ee588d 100644
--- a/mailpoet/assets/js/src/newsletters/types/welcome/scheduling.jsx
+++ b/mailpoet/assets/js/src/newsletters/types/welcome/scheduling.jsx
@@ -11,7 +11,7 @@ import { withRouter } from 'react-router-dom';
const availableRoles = window.mailpoet_roles || {};
const availableSegments = _.filter(
window.mailpoet_segments || [],
- (segment) => segment.type === 'default'
+ (segment) => segment.type === 'default',
);
const events = {
@@ -43,7 +43,9 @@ const afterTimeNumberField = {
validation: {
'data-parsley-required': true,
'data-parsley-errors-container': '.mailpoet-form-errors',
- 'data-parsley-scheduled-at': MailPoet.I18n.t('emailCanBeScheduledUpToFiveYears'),
+ 'data-parsley-scheduled-at': MailPoet.I18n.t(
+ 'emailCanBeScheduledUpToFiveYears',
+ ),
},
};
@@ -74,15 +76,20 @@ class WelcomeScheduling extends Component {
});
};
- handleEventChange = (event) => this.handleValueChange('event', event.target.value);
+ handleEventChange = (event) =>
+ this.handleValueChange('event', event.target.value);
- handleSegmentChange = (event) => this.handleValueChange('segment', event.target.value);
+ handleSegmentChange = (event) =>
+ this.handleValueChange('segment', event.target.value);
- handleRoleChange = (event) => this.handleValueChange('role', event.target.value);
+ handleRoleChange = (event) =>
+ this.handleValueChange('role', event.target.value);
- handleAfterTimeNumberChange = (event) => this.handleValueChange('afterTimeNumber', event.target.value);
+ handleAfterTimeNumberChange = (event) =>
+ this.handleValueChange('afterTimeNumber', event.target.value);
- handleAfterTimeTypeChange = (event) => this.handleValueChange('afterTimeType', event.target.value);
+ handleAfterTimeTypeChange = (event) =>
+ this.handleValueChange('afterTimeType', event.target.value);
render() {
const value = this.getCurrentValue();
@@ -125,11 +132,11 @@ class WelcomeScheduling extends Component {
/>
- { roleSegmentSelection }
+ {roleSegmentSelection}
- { timeNumber }
+ {timeNumber}
segment.type === 'default');
+ availableSegments = availableSegments.filter(
+ (segment) => segment.type === 'default',
+ );
if (_.size(availableSegments) > 0) {
defaultSegment = _.first(availableSegments).id;
@@ -62,16 +64,18 @@ class NewsletterWelcome extends Component {
type: 'welcome',
subject: MailPoet.I18n.t('draftNewsletterTitle'),
}),
- }).done((response) => {
- this.showTemplateSelection(response.data.id);
- }).fail((response) => {
- if (response.errors.length > 0) {
- MailPoet.Notice.error(
- response.errors.map((error) => error.message),
- { scroll: true }
- );
- }
- });
+ })
+ .done((response) => {
+ this.showTemplateSelection(response.data.id);
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ MailPoet.Notice.error(
+ response.errors.map((error) => error.message),
+ { scroll: true },
+ );
+ }
+ });
}
isValid = () => jQuery('#welcome_scheduling').parsley().isValid();
@@ -87,10 +91,15 @@ class NewsletterWelcome extends Component {
-
+
- {MailPoet.I18n.t('selectEventToSendWelcomeEmail')}
+
+ {MailPoet.I18n.t('selectEventToSendWelcomeEmail')}
+
-
+
{MailPoet.I18n.t('next')}
diff --git a/mailpoet/assets/js/src/notice.js b/mailpoet/assets/js/src/notice.js
index 6858cd372a..fce337409f 100644
--- a/mailpoet/assets/js/src/notice.js
+++ b/mailpoet/assets/js/src/notice.js
@@ -53,10 +53,7 @@ export const MailPoetNotice = {
// add data-id to the element
if (this.options.id) {
- this.element.attr(
- 'data-id',
- this.options.id
- );
+ this.element.attr('data-id', this.options.id);
}
// remove id from clone
@@ -92,7 +89,8 @@ export const MailPoetNotice = {
// remove notice
jQuery(this).remove();
});
- }.bind(this.element));
+ }.bind(this.element),
+ );
return this;
},
@@ -100,7 +98,7 @@ export const MailPoetNotice = {
// update notice's message
this.setMessage(
this.options.message,
- jQuery('[data-id="' + this.options.id + '"').first()
+ jQuery('[data-id="' + this.options.id + '"').first(),
);
},
setMessage: function setMessage(message, element) {
@@ -123,8 +121,8 @@ export const MailPoetNotice = {
this.init(options);
if (
- this.options.id !== null
- && jQuery('[data-id="' + this.options.id + '"]').length > 0
+ this.options.id !== null &&
+ jQuery('[data-id="' + this.options.id + '"]').length > 0
) {
this.updateNotice();
} else {
@@ -168,14 +166,17 @@ export const MailPoetNotice = {
setTimeout(
// eslint-disable-next-line func-names
function (target) {
- target.trigger('close');
+ target.trigger('close');
},
- this.options.timeout, this.element
+ this.options.timeout,
+ this.element,
);
}
if (this.options.hideClose === false) {
- this.element.append('Dismiss this notice. ');
+ this.element.append(
+ 'Dismiss this notice. ',
+ );
// eslint-disable-next-line func-names
this.element.find('.notice-dismiss').on('click', function () {
jQuery(this).trigger('close');
@@ -196,41 +197,67 @@ export const MailPoetNotice = {
Object.keys(all).forEach(function close(id) {
jQuery('[data-id="' + all[id] + '"]').trigger('close');
});
- } if (all !== undefined) {
+ }
+ if (all !== undefined) {
// single id
jQuery('[data-id="' + all + '"]').trigger('close');
} else {
- jQuery('.mailpoet_notice.notice-success:not([id]), .mailpoet_notice.notice-error:not([id])')
- .trigger('close');
+ jQuery(
+ '.mailpoet_notice.notice-success:not([id]), .mailpoet_notice.notice-error:not([id])',
+ ).trigger('close');
}
},
error: function error(message, options) {
- this.show(jQuery.extend({}, {
- type: 'error',
- message: message,
- }, options));
+ this.show(
+ jQuery.extend(
+ {},
+ {
+ type: 'error',
+ message: message,
+ },
+ options,
+ ),
+ );
},
success: function success(message, options) {
- this.show(jQuery.extend({}, {
- type: 'success',
- message: message,
- }, options));
+ this.show(
+ jQuery.extend(
+ {},
+ {
+ type: 'success',
+ message: message,
+ },
+ options,
+ ),
+ );
},
system: function system(message, options) {
- this.show(jQuery.extend({}, {
- type: 'system',
- static: true,
- message: message,
- }, options));
+ this.show(
+ jQuery.extend(
+ {},
+ {
+ type: 'system',
+ static: true,
+ message: message,
+ },
+ options,
+ ),
+ );
},
showApiErrorNotice: function showApiErrorNotice(response, options) {
var errorMessage = I18n.t('ajaxFailedErrorMessage');
if (response && response.errors && response.errors.length > 0) {
- errorMessage = response.errors.map(error => error.message);
+ errorMessage = response.errors.map((error) => error.message);
}
- this.show(jQuery.extend({}, {
- type: 'error',
- message: errorMessage,
- }, options));
+ this.show(
+ jQuery.extend(
+ {},
+ {
+ type: 'error',
+ message: errorMessage,
+ },
+ options,
+ ),
+ );
},
};
diff --git a/mailpoet/assets/js/src/notices/api_errors_notice.tsx b/mailpoet/assets/js/src/notices/api_errors_notice.tsx
index 1465afee62..82fd515781 100644
--- a/mailpoet/assets/js/src/notices/api_errors_notice.tsx
+++ b/mailpoet/assets/js/src/notices/api_errors_notice.tsx
@@ -6,7 +6,13 @@ type Props = {
function APIErrorsNotice({ errors }: Props) {
if (errors.length < 1) return null;
- return {errors.map((err) => {err.message}
)} ;
+ return (
+
+ {errors.map((err) => (
+ {err.message}
+ ))}
+
+ );
}
export default APIErrorsNotice;
diff --git a/mailpoet/assets/js/src/notices/email_volume_limit_notice.tsx b/mailpoet/assets/js/src/notices/email_volume_limit_notice.tsx
index 8e902c799f..9998be3a0d 100644
--- a/mailpoet/assets/js/src/notices/email_volume_limit_notice.tsx
+++ b/mailpoet/assets/js/src/notices/email_volume_limit_notice.tsx
@@ -6,11 +6,16 @@ import Notice from 'notices/notice';
function EmailVolumeLimitNotice(): JSX.Element {
if (!MailPoet.emailVolumeLimitReached) return null;
- const title = MailPoet.I18n.t('emailVolumeLimitNoticeTitle')
- .replace('[emailVolumeLimit]', MailPoet.emailVolumeLimit);
- const youReachedEmailVolumeLimit = MailPoet.I18n.t('youReachedEmailVolumeLimit')
- .replace('[emailVolumeLimit]', MailPoet.emailVolumeLimit);
- const upgradeLink = MailPoet.MailPoetComUrlFactory.getUpgradeUrl(MailPoet.pluginPartialKey);
+ const title = MailPoet.I18n.t('emailVolumeLimitNoticeTitle').replace(
+ '[emailVolumeLimit]',
+ MailPoet.emailVolumeLimit,
+ );
+ const youReachedEmailVolumeLimit = MailPoet.I18n.t(
+ 'youReachedEmailVolumeLimit',
+ ).replace('[emailVolumeLimit]', MailPoet.emailVolumeLimit);
+ const upgradeLink = MailPoet.MailPoetComUrlFactory.getUpgradeUrl(
+ MailPoet.pluginPartialKey,
+ );
const refreshSubscribers = async () => {
await MailPoet.Ajax.post({
api_version: MailPoet.apiVersion,
@@ -21,17 +26,26 @@ function EmailVolumeLimitNotice(): JSX.Element {
};
const date = new Date();
- const firstDayOfTheNextMonth = new Date(date.getFullYear(), date.getMonth() + 1, 1);
+ const firstDayOfTheNextMonth = new Date(
+ date.getFullYear(),
+ date.getMonth() + 1,
+ 1,
+ );
let toContinueUpgradeYourPlanOrWaitUntil = ReactStringReplace(
MailPoet.I18n.t('toContinueUpgradeYourPlanOrWaitUntil'),
/\[link](.*?)\[\/link]/g,
- (match) => ({match} ),
+ (match) => (
+
+ {match}
+
+ ),
);
toContinueUpgradeYourPlanOrWaitUntil = ReactStringReplace(
toContinueUpgradeYourPlanOrWaitUntil,
/\[date]<\/b>\./g,
- () => (ReactHtmlParser(`${MailPoet.Date.short(firstDayOfTheNextMonth)} .`)),
+ () =>
+ ReactHtmlParser(`${MailPoet.Date.short(firstDayOfTheNextMonth)} .`),
);
return (
@@ -50,13 +64,8 @@ function EmailVolumeLimitNotice(): JSX.Element {
href={upgradeLink}
>
{MailPoet.I18n.t('upgradeNow')}
-
- {' '}
-
+ {' '}
+
{MailPoet.I18n.t('refreshMyEmailVolumeLimit')}
diff --git a/mailpoet/assets/js/src/notices/invalid_mss_key_notice.tsx b/mailpoet/assets/js/src/notices/invalid_mss_key_notice.tsx
index 815d6f83d9..8773585059 100644
--- a/mailpoet/assets/js/src/notices/invalid_mss_key_notice.tsx
+++ b/mailpoet/assets/js/src/notices/invalid_mss_key_notice.tsx
@@ -13,13 +13,15 @@ function InvalidMssKeyNotice({ mssKeyInvalid, subscribersCount }: Props) {
{MailPoet.I18n.t('allSendingPausedHeader')}
- {
- ReactStringReplace(
- MailPoet.I18n.t('allSendingPausedBody'),
- /\[link\](.*?)\[\/link\]/g,
- (match) => { match } ,
- )
- }
+ {ReactStringReplace(
+ MailPoet.I18n.t('allSendingPausedBody'),
+ /\[link\](.*?)\[\/link\]/g,
+ (match) => (
+
+ {match}
+
+ ),
+ )}
{error.error_message}
;
+ return (
+
+ {error.error_message}
+
+ );
}
MailerStatusNotice.propTypes = {
error: PropTypes.shape({
diff --git a/mailpoet/assets/js/src/notices/notice.tsx b/mailpoet/assets/js/src/notices/notice.tsx
index 84fc295bef..14e0018ba4 100644
--- a/mailpoet/assets/js/src/notices/notice.tsx
+++ b/mailpoet/assets/js/src/notices/notice.tsx
@@ -59,11 +59,16 @@ function Notice({
if (hidden) return null;
const content = (
-
+
{children}
{closable && (
- {MailPoet.I18n.t('dismissNotice')}
+
+ {MailPoet.I18n.t('dismissNotice')}
+
)}
diff --git a/mailpoet/assets/js/src/notices/notices.jsx b/mailpoet/assets/js/src/notices/notices.jsx
index b5c8602318..f12a8267b9 100644
--- a/mailpoet/assets/js/src/notices/notices.jsx
+++ b/mailpoet/assets/js/src/notices/notices.jsx
@@ -4,10 +4,7 @@ import Notice from './notice.tsx';
export default () => {
const { notices } = useContext(GlobalContext);
- return notices.items.map(
- ({
- id,
- ...props
- }) =>
- );
+ return notices.items.map(({ id, ...props }) => (
+
+ ));
};
diff --git a/mailpoet/assets/js/src/notices/subscribers_limit_notice.jsx b/mailpoet/assets/js/src/notices/subscribers_limit_notice.jsx
index f15a6ed5d0..0e3b879cd9 100644
--- a/mailpoet/assets/js/src/notices/subscribers_limit_notice.jsx
+++ b/mailpoet/assets/js/src/notices/subscribers_limit_notice.jsx
@@ -5,13 +5,18 @@ import Notice from 'notices/notice.tsx';
function SubscribersLimitNotice() {
if (!MailPoet.subscribersLimitReached) return null;
const hasValidApiKey = MailPoet.hasValidApiKey;
- const title = MailPoet.I18n.t('subscribersLimitNoticeTitle')
- .replace('[subscribersLimit]', MailPoet.subscribersLimit);
- const youReachedTheLimit = MailPoet.I18n.t(hasValidApiKey ? 'yourPlanLimit' : 'freeVersionLimit')
- .replace('[subscribersLimit]', MailPoet.subscribersLimit);
+ const title = MailPoet.I18n.t('subscribersLimitNoticeTitle').replace(
+ '[subscribersLimit]',
+ MailPoet.subscribersLimit,
+ );
+ const youReachedTheLimit = MailPoet.I18n.t(
+ hasValidApiKey ? 'yourPlanLimit' : 'freeVersionLimit',
+ ).replace('[subscribersLimit]', MailPoet.subscribersLimit);
const upgradeLink = hasValidApiKey
? MailPoet.MailPoetComUrlFactory.getUpgradeUrl(MailPoet.pluginPartialKey)
- : MailPoet.MailPoetComUrlFactory.getPurchasePlanUrl(MailPoet.subscribersCount + 1);
+ : MailPoet.MailPoetComUrlFactory.getPurchasePlanUrl(
+ MailPoet.subscribersCount + 1,
+ );
const refreshSubscribers = async () => {
await MailPoet.Ajax.post({
api_version: MailPoet.apiVersion,
@@ -25,17 +30,17 @@ function SubscribersLimitNotice() {
MailPoet.I18n.t('youCanDisableWPUsersList'),
/\[link](.*?)\[\/link]/g,
(match) => (
-
{match}
- )
+
+ {match}
+
+ ),
);
return (
{title}
- {youReachedTheLimit}
- {' '}
- {MailPoet.I18n.t('youNeedToUpgrade')}
+ {youReachedTheLimit} {MailPoet.I18n.t('youNeedToUpgrade')}
{MailPoet.wpSegmentState === 'active' ? (
<>
diff --git a/mailpoet/assets/js/src/notices/transactional_emails_propose_opt_in_notice.tsx b/mailpoet/assets/js/src/notices/transactional_emails_propose_opt_in_notice.tsx
index c10ad67119..ecb55508b7 100644
--- a/mailpoet/assets/js/src/notices/transactional_emails_propose_opt_in_notice.tsx
+++ b/mailpoet/assets/js/src/notices/transactional_emails_propose_opt_in_notice.tsx
@@ -51,8 +51,7 @@ function TransactionalEmailsProposeOptInNotice({
{MailPoet.I18n.t('transactionalEmailNoticeTitle')}
- {MailPoet.I18n.t('transactionalEmailNoticeBody')}
- {' '}
+ {MailPoet.I18n.t('transactionalEmailNoticeBody')}{' '}
-
+
{MailPoet.I18n.t('transactionalEmailNoticeCTA')}
diff --git a/mailpoet/assets/js/src/nps_poll.jsx b/mailpoet/assets/js/src/nps_poll.jsx
index c19874505f..34fe4b580c 100644
--- a/mailpoet/assets/js/src/nps_poll.jsx
+++ b/mailpoet/assets/js/src/nps_poll.jsx
@@ -12,11 +12,13 @@ const useNpsPoll = () => {
width: 800,
template: ReactDOMServer.renderToString(
ReviewRequest({
- username: window.mailpoet_current_wp_user_firstname
- || window.mailpoet_current_wp_user.user_login,
- reviewRequestIllustrationUrl: window.mailpoet_review_request_illustration_url,
+ username:
+ window.mailpoet_current_wp_user_firstname ||
+ window.mailpoet_current_wp_user.user_login,
+ reviewRequestIllustrationUrl:
+ window.mailpoet_review_request_illustration_url,
installedDaysAgo: window.mailpoet_installed_days_ago,
- })
+ }),
),
onInit: () => {
document
@@ -74,9 +76,10 @@ const useNpsPoll = () => {
return null;
};
-const withNpsPoll = (Component) => function useNpsPollWithComponent(props) {
- useNpsPoll();
- return ;
-};
+const withNpsPoll = (Component) =>
+ function useNpsPollWithComponent(props) {
+ useNpsPoll();
+ return ;
+ };
export default withNpsPoll;
diff --git a/mailpoet/assets/js/src/num.js b/mailpoet/assets/js/src/num.js
index eb717f1ffe..0c6b4fae2e 100644
--- a/mailpoet/assets/js/src/num.js
+++ b/mailpoet/assets/js/src/num.js
@@ -3,10 +3,9 @@ export const MailPoetNum = {
toLocaleFixed: function (num, precisionOpts) {
var precision = precisionOpts || 0;
var factor = 10 ** precision;
- return (Math.round(num * factor) / factor)
- .toLocaleString(
- undefined,
- { minimumFractionDigits: precision, maximumFractionDigits: precision }
- );
+ return (Math.round(num * factor) / factor).toLocaleString(undefined, {
+ minimumFractionDigits: precision,
+ maximumFractionDigits: precision,
+ });
},
};
diff --git a/mailpoet/assets/js/src/parsley-validators.jsx b/mailpoet/assets/js/src/parsley-validators.jsx
index 8cb1e907fe..1a47c0f868 100644
--- a/mailpoet/assets/js/src/parsley-validators.jsx
+++ b/mailpoet/assets/js/src/parsley-validators.jsx
@@ -10,16 +10,18 @@ jQuery(($) => {
const daysInYear = 365;
const weeksInYear = 52;
- const selectType = $('select[name="afterTimeType"],select#scheduling_time_interval');
+ const selectType = $(
+ 'select[name="afterTimeType"],select#scheduling_time_interval',
+ );
const afterTimeType = selectType.val();
let isValid = true;
- if (afterTimeType === 'hours' && (hoursInYear * maxYears) < value) {
+ if (afterTimeType === 'hours' && hoursInYear * maxYears < value) {
isValid = false;
}
- if (afterTimeType === 'days' && (daysInYear * maxYears) < value) {
+ if (afterTimeType === 'days' && daysInYear * maxYears < value) {
isValid = false;
}
- if (afterTimeType === 'weeks' && (weeksInYear * maxYears) < value) {
+ if (afterTimeType === 'weeks' && weeksInYear * maxYears < value) {
isValid = false;
}
diff --git a/mailpoet/assets/js/src/post_editor_block/subscription_form/edit.jsx b/mailpoet/assets/js/src/post_editor_block/subscription_form/edit.jsx
index e4250d6793..30fc9e4692 100644
--- a/mailpoet/assets/js/src/post_editor_block/subscription_form/edit.jsx
+++ b/mailpoet/assets/js/src/post_editor_block/subscription_form/edit.jsx
@@ -23,10 +23,15 @@ function Edit({ attributes, setAttributes }) {
className="mailpoet-block-create-forms-list"
value={attributes.formId}
>
- {window.locale.selectForm}
+
+ {window.locale.selectForm}
+
{allForms.map((form) => (
- {form.name + (form.status === 'disabled' ? ` (${window.locale.inactive})` : '')}
+ {form.name +
+ (form.status === 'disabled'
+ ? ` (${window.locale.inactive})`
+ : '')}
))}
@@ -65,22 +70,16 @@ function Edit({ attributes, setAttributes }) {
- {
- attributes.formId === null && (
-
}
- label={window.locale.subscriptionForm}
- >
- {selectFormSettings()}
-
- )
- }
- {
- attributes.formId !== null && (
- renderForm()
- )
- }
+ {attributes.formId === null && (
+
}
+ label={window.locale.subscriptionForm}
+ >
+ {selectFormSettings()}
+
+ )}
+ {attributes.formId !== null && renderForm()}
>
);
diff --git a/mailpoet/assets/js/src/public.jsx b/mailpoet/assets/js/src/public.jsx
index 3dbc2cf82e..760bd628e6 100644
--- a/mailpoet/assets/js/src/public.jsx
+++ b/mailpoet/assets/js/src/public.jsx
@@ -94,14 +94,19 @@ jQuery(($) => {
if (formDiv.data('is-preview')) return;
const formCookieName = getFormCookieName(formDiv);
if (Cookies.get(formCookieName) === '1') return;
- const cookieExpirationTime = formDiv.find('form').data('cookie-expiration-time');
- Cookies.set(formCookieName, '1', { ...(cookieExpirationTime && { expires: cookieExpirationTime }), path: '/' });
+ const cookieExpirationTime = formDiv
+ .find('form')
+ .data('cookie-expiration-time');
+ Cookies.set(formCookieName, '1', {
+ ...(cookieExpirationTime && { expires: cookieExpirationTime }),
+ path: '/',
+ });
}
function isSameDomain(url) {
const link = document.createElement('a');
link.href = url;
- return (window.location.hostname === link.hostname);
+ return window.location.hostname === link.hostname;
}
function updateCaptcha(e) {
@@ -120,23 +125,29 @@ jQuery(($) => {
const newFontFamily = `"${fontName}", ${originalFontFamily}`;
formDiv.css('font-family', newFontFamily);
formDiv.find('input, option').css('font-family', 'inherit');
- formDiv.find('input[type=text], textarea, input[type=email], select').css('font-family', newFontFamily);
+ formDiv
+ .find('input[type=text], textarea, input[type=email], select')
+ .css('font-family', newFontFamily);
formDiv.find(':header').css('font-family', 'inherit');
- formDiv.find('input[data-font-family]').each(function applyFontFamilyToInput() {
- const element = $(this);
- const inputFontFamily = element.data('font-family');
- const inputOriginalFontFamily = element.css('font-family');
- const inputNewFontFamily = `"${inputFontFamily}", ${inputOriginalFontFamily}`;
- element.css('font-family', inputNewFontFamily);
- });
+ formDiv
+ .find('input[data-font-family]')
+ .each(function applyFontFamilyToInput() {
+ const element = $(this);
+ const inputFontFamily = element.data('font-family');
+ const inputOriginalFontFamily = element.css('font-family');
+ const inputNewFontFamily = `"${inputFontFamily}", ${inputOriginalFontFamily}`;
+ element.css('font-family', inputNewFontFamily);
+ });
- formDiv.find('.mailpoet-has-font').each(function applyFontFamilyToRichText() {
- const element = $(this);
- const spanOriginalFontFamily = element.css('font-family');
- const spanNewFontFamily = `"${spanOriginalFontFamily}", ${originalFontFamily}`;
- element.css('font-family', spanNewFontFamily);
- });
+ formDiv
+ .find('.mailpoet-has-font')
+ .each(function applyFontFamilyToRichText() {
+ const element = $(this);
+ const spanOriginalFontFamily = element.css('font-family');
+ const spanNewFontFamily = `"${spanOriginalFontFamily}", ${originalFontFamily}`;
+ element.css('font-family', spanNewFontFamily);
+ });
}
function doDisplayForm(formDiv, showOverlay) {
@@ -215,7 +226,12 @@ jQuery(($) => {
(() => {
$('.mailpoet_form').each((index, element) => {
- $(element).children('.mailpoet_paragraph, .mailpoet_form_image, .mailpoet_form_paragraph').last().addClass('last');
+ $(element)
+ .children(
+ '.mailpoet_paragraph, .mailpoet_form_image, .mailpoet_form_paragraph',
+ )
+ .last()
+ .addClass('last');
});
$('form.mailpoet_form').each((index, element) => {
const form = $(element);
@@ -230,13 +246,15 @@ jQuery(($) => {
closeForm(formDiv);
});
- $('div.mailpoet_form_fixed_bar, div.mailpoet_form_slide_in').each((index, element) => {
- const formDiv = $(element);
- const formCookieName = getFormCookieName(formDiv);
- const cookieValue = Cookies.get(formCookieName);
- if (cookieValue === '1' && !formDiv.data('is-preview')) return;
- showForm(formDiv);
- });
+ $('div.mailpoet_form_fixed_bar, div.mailpoet_form_slide_in').each(
+ (index, element) => {
+ const formDiv = $(element);
+ const formCookieName = getFormCookieName(formDiv);
+ const cookieValue = Cookies.get(formCookieName);
+ if (cookieValue === '1' && !formDiv.data('is-preview')) return;
+ showForm(formDiv);
+ },
+ );
$('div.mailpoet_form_popup').each((index, element) => {
const formDiv = $(element);
@@ -288,7 +306,9 @@ jQuery(($) => {
}
if (window.grecaptcha && formData.recaptcha) {
- formData.data.recaptcha = window.grecaptcha.getResponse(formData.recaptcha);
+ formData.data.recaptcha = window.grecaptcha.getResponse(
+ formData.recaptcha,
+ );
}
form.addClass('mailpoet_form_sending');
@@ -303,8 +323,8 @@ jQuery(($) => {
})
.fail((response) => {
if (
- response.meta !== undefined
- && response.meta.redirect_url !== undefined
+ response.meta !== undefined &&
+ response.meta.redirect_url !== undefined
) {
// go to page
window.top.location.href = response.meta.redirect_url;
@@ -312,9 +332,12 @@ jQuery(($) => {
if (response.meta && response.meta.refresh_captcha) {
updateCaptcha();
}
- form.find('.mailpoet_validate_error').html(
- response.errors.map((error) => error.message).join(' ')
- ).show();
+ form
+ .find('.mailpoet_validate_error')
+ .html(
+ response.errors.map((error) => error.message).join(' '),
+ )
+ .show();
}
})
.done((response) => {
@@ -326,8 +349,8 @@ jQuery(($) => {
.done((response) => {
// successfully subscribed
if (
- response.meta !== undefined
- && response.meta.redirect_url !== undefined
+ response.meta !== undefined &&
+ response.meta.redirect_url !== undefined
) {
setFormCookieAfterSubscription(form);
// go to page
@@ -347,9 +370,9 @@ jQuery(($) => {
// resize iframe
if (
- window.frameElement !== null
- && MailPoet !== undefined
- && MailPoet.Iframe
+ window.frameElement !== null &&
+ MailPoet !== undefined &&
+ MailPoet.Iframe
) {
MailPoet.Iframe.autoSize(window.frameElement);
}
diff --git a/mailpoet/assets/js/src/review_request.jsx b/mailpoet/assets/js/src/review_request.jsx
index 934b4d282e..b45cdac0d0 100644
--- a/mailpoet/assets/js/src/review_request.jsx
+++ b/mailpoet/assets/js/src/review_request.jsx
@@ -3,23 +3,44 @@ import PropTypes from 'prop-types';
function ReviewRequest(props) {
const days = props.installedDaysAgo;
- const usingForPhrase = days > 30
- ? MailPoet.I18n.t('reviewRequestUsingForMonths').replace('[months]', Math.round(days / 30))
- : MailPoet.I18n.t('reviewRequestUsingForDays').replace('[days]', days);
+ const usingForPhrase =
+ days > 30
+ ? MailPoet.I18n.t('reviewRequestUsingForMonths').replace(
+ '[months]',
+ Math.round(days / 30),
+ )
+ : MailPoet.I18n.t('reviewRequestUsingForDays').replace('[days]', days);
return (
);
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/checkbox.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/checkbox.tsx
index 572f9a1b47..0662bbdf99 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/checkbox.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/checkbox.tsx
@@ -4,28 +4,29 @@ import { useSelect, useDispatch } from '@wordpress/data';
import MailPoet from 'mailpoet';
import Select from 'common/form/select/select';
-import {
- WordpressRoleFormItem,
-} from '../../types';
+import { WordpressRoleFormItem } from '../../types';
export function validateCheckbox(item: WordpressRoleFormItem): boolean {
- return ((item.value === '1') || (item.value === '0'));
+ return item.value === '1' || item.value === '0';
}
type Props = {
filterIndex: number;
};
-export function Checkbox({ filterIndex }:Props) : JSX.Element {
+export function Checkbox({ filterIndex }: Props): JSX.Element {
const segment: WordpressRoleFormItem = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
[filterIndex],
);
- const { updateSegmentFilterFromEvent, updateSegmentFilter } = useDispatch('mailpoet-dynamic-segments-form');
+ const { updateSegmentFilterFromEvent, updateSegmentFilter } = useDispatch(
+ 'mailpoet-dynamic-segments-form',
+ );
useEffect(() => {
- if ((segment.value !== '1') && (segment.value !== '0')) {
+ if (segment.value !== '1' && segment.value !== '0') {
updateSegmentFilter({ operator: 'equals', value: '1' }, filterIndex);
}
}, [updateSegmentFilter, segment, filterIndex]);
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/date.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/date.tsx
index b7c13268d0..77f8655ee0 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/date.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/date.tsx
@@ -1,14 +1,6 @@
import { useEffect } from 'react';
-import {
- assign,
- range,
-} from 'lodash/fp';
-import {
- format,
- getYear,
- isValid,
- parseISO,
-} from 'date-fns';
+import { assign, range } from 'lodash/fp';
+import { format, getYear, isValid, parseISO } from 'date-fns';
import { useSelect, useDispatch } from '@wordpress/data';
import MailPoet from 'mailpoet';
@@ -16,10 +8,7 @@ import Select from 'common/form/select/select';
import { Grid } from 'common/grid';
import Datepicker from 'common/datepicker/datepicker';
-import {
- WordpressRoleFormItem,
- OnFilterChange,
-} from '../../types';
+import { WordpressRoleFormItem, OnFilterChange } from '../../types';
interface ComponentProps {
onChange: OnFilterChange;
@@ -29,11 +18,8 @@ interface ComponentProps {
function DateMonth({ onChange, item, filterIndex }: ComponentProps) {
useEffect(() => {
- if ((item.value === undefined) || item.value === '') {
- onChange(
- assign(item, { value: '2017-01-01 00:00:00' }),
- filterIndex,
- );
+ if (item.value === undefined || item.value === '') {
+ onChange(assign(item, { value: '2017-01-01 00:00:00' }), filterIndex);
}
}, [onChange, item, filterIndex]);
@@ -53,7 +39,9 @@ function DateMonth({ onChange, item, filterIndex }: ComponentProps) {
{MailPoet.I18n.t('june')}
{MailPoet.I18n.t('july')}
{MailPoet.I18n.t('august')}
- {MailPoet.I18n.t('september')}
+
+ {MailPoet.I18n.t('september')}
+
{MailPoet.I18n.t('october')}
{MailPoet.I18n.t('november')}
{MailPoet.I18n.t('december')}
@@ -64,7 +52,7 @@ function DateMonth({ onChange, item, filterIndex }: ComponentProps) {
function DateYear({ onChange, item, filterIndex }: ComponentProps) {
const currentYear = getYear(new Date());
useEffect(() => {
- if ((item.value === undefined) || item.value === '') {
+ if (item.value === undefined || item.value === '') {
onChange(
assign(item, {
value: `${currentYear}-01-01 00:00:00`,
@@ -108,12 +96,16 @@ function DateYear({ onChange, item, filterIndex }: ComponentProps) {
);
}
-const convertDateToString = (value: Date | [Date, Date]): string | undefined => {
+const convertDateToString = (
+ value: Date | [Date, Date],
+): string | undefined => {
if (value === null) {
return undefined;
}
if (Array.isArray(value)) {
- throw new Error('convertDateToString can process only single date array given');
+ throw new Error(
+ 'convertDateToString can process only single date array given',
+ );
}
return format(value, 'yyyy-MM-dd 00:00:00');
};
@@ -126,7 +118,7 @@ const parseDate = (value: string): Date | undefined => {
function DateFullDate({ onChange, item, filterIndex }: ComponentProps) {
useEffect(() => {
- if ((item.value === undefined) || item.value === '') {
+ if (item.value === undefined || item.value === '') {
onChange(
assign(item, {
value: `${format(new Date(), 'yyyy-MM-dd')} 00:00:00`,
@@ -152,10 +144,12 @@ function DateFullDate({ onChange, item, filterIndex }: ComponentProps) {
onChange(
- assign(item, { value: convertDateToString(value) }),
- filterIndex,
- )}
+ onChange={(value): void =>
+ onChange(
+ assign(item, { value: convertDateToString(value) }),
+ filterIndex,
+ )
+ }
selected={item.value ? parseDate(item.value) : undefined}
/>
@@ -164,7 +158,7 @@ function DateFullDate({ onChange, item, filterIndex }: ComponentProps) {
function DateMonthYear({ onChange, item, filterIndex }: ComponentProps) {
useEffect(() => {
- if ((item.value === undefined) || item.value === '') {
+ if (item.value === undefined || item.value === '') {
onChange(
assign(item, {
value: `${format(new Date(), 'yyyy-MM-dd')} 00:00:00`,
@@ -189,10 +183,12 @@ function DateMonthYear({ onChange, item, filterIndex }: ComponentProps) {
{MailPoet.I18n.t('after')}
onChange(
- assign(item, { value: convertDateToString(value) }),
- filterIndex,
- )}
+ onChange={(value): void =>
+ onChange(
+ assign(item, { value: convertDateToString(value) }),
+ filterIndex,
+ )
+ }
selected={item.value ? parseDate(item.value) : undefined}
dateFormat="MM/yyyy"
showMonthYearPicker
@@ -202,23 +198,20 @@ function DateMonthYear({ onChange, item, filterIndex }: ComponentProps) {
}
export function validateDate(item: WordpressRoleFormItem): boolean {
- if ((item.date_type !== 'month')
- && (
- (typeof item.operator !== 'string')
- || (item.operator.length < 1)
- )
+ if (
+ item.date_type !== 'month' &&
+ (typeof item.operator !== 'string' || item.operator.length < 1)
) {
return false;
}
- return (typeof item.value === 'string')
- && (item.value.length > 1);
+ return typeof item.value === 'string' && item.value.length > 1;
}
interface Props {
customField: {
params: {
date_type: string;
- }
+ };
};
filterIndex: number;
}
@@ -230,11 +223,13 @@ const componentsMap = {
year_month_day: DateFullDate,
};
-export function CustomFieldDate(
- { customField, filterIndex } : Props,
-) : JSX.Element {
+export function CustomFieldDate({
+ customField,
+ filterIndex,
+}: Props): JSX.Element {
const segment: WordpressRoleFormItem = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
[filterIndex],
);
@@ -242,9 +237,17 @@ export function CustomFieldDate(
useEffect(() => {
if (segment.date_type !== customField.params.date_type) {
- updateSegmentFilter({ date_type: customField.params.date_type, value: '' }, filterIndex);
+ updateSegmentFilter(
+ { date_type: customField.params.date_type, value: '' },
+ filterIndex,
+ );
}
- }, [segment.date_type, updateSegmentFilter, customField.params.date_type, filterIndex]);
+ }, [
+ segment.date_type,
+ updateSegmentFilter,
+ customField.params.date_type,
+ filterIndex,
+ ]);
const Component = componentsMap[customField.params.date_type];
if (!Component) return null;
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/select.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/select.tsx
index 81dab8bc8b..0f656fb2dc 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/select.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/select.tsx
@@ -1,6 +1,4 @@
-import {
- find,
-} from 'lodash/fp';
+import { find } from 'lodash/fp';
import { useSelect, useDispatch } from '@wordpress/data';
import MailPoet from 'mailpoet';
@@ -19,19 +17,17 @@ interface ParamsType {
}
export function validateRadioSelect(item: WordpressRoleFormItem): boolean {
- return (
- (typeof item.value === 'string')
- && (item.value.length > 0)
- );
+ return typeof item.value === 'string' && item.value.length > 0;
}
type Props = {
filterIndex: number;
};
-export function RadioSelect({ filterIndex }:Props) : JSX.Element {
+export function RadioSelect({ filterIndex }: Props): JSX.Element {
const segment: WordpressRoleFormItem = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
[filterIndex],
);
@@ -41,9 +37,12 @@ export function RadioSelect({ filterIndex }:Props) : JSX.Element {
(select) => select('mailpoet-dynamic-segments-form').getCustomFieldsList(),
[],
);
- const customField = find({ id: Number(segment.custom_field_id) }, customFieldsList);
+ const customField = find(
+ { id: Number(segment.custom_field_id) },
+ customFieldsList,
+ );
if (!customField) return null;
- const params = (customField.params as ParamsType);
+ const params = customField.params as ParamsType;
if (!params || !Array.isArray(params.values)) return null;
const options = params.values.map((currentValue) => ({
@@ -58,10 +57,13 @@ export function RadioSelect({ filterIndex }:Props) : JSX.Element {
placeholder={MailPoet.I18n.t('selectValue')}
options={options}
value={
- segment.value ? { value: segment.value, label: segment.value } : null
- }
+ segment.value ? { value: segment.value, label: segment.value } : null
+ }
onChange={(option: SelectOption): void => {
- updateSegmentFilter({ value: option.value, operator: 'equals' }, filterIndex);
+ updateSegmentFilter(
+ { value: option.value, operator: 'equals' },
+ filterIndex,
+ );
}}
automationId="segment-wordpress-role"
/>
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/text.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/text.tsx
index 8513e2735a..c71fb160e3 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/text.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/custom_fields/text.tsx
@@ -6,21 +6,17 @@ import Select from 'common/form/select/select';
import Input from 'common/form/input/input';
import { Grid } from 'common/grid';
-import {
- WordpressRoleFormItem,
-} from '../../types';
+import { WordpressRoleFormItem } from '../../types';
export function validateText(item: WordpressRoleFormItem): boolean {
return (
- (typeof item.value === 'string')
- && (item.value.length > 0)
- && (
- (item.operator === 'equals')
- || (item.operator === 'contains')
- || (item.operator === 'not_equals')
- || (item.operator === 'more_than')
- || (item.operator === 'less_than')
- )
+ typeof item.value === 'string' &&
+ item.value.length > 0 &&
+ (item.operator === 'equals' ||
+ item.operator === 'contains' ||
+ item.operator === 'not_equals' ||
+ item.operator === 'more_than' ||
+ item.operator === 'less_than')
);
}
@@ -28,13 +24,16 @@ type Props = {
filterIndex: number;
};
-export function Text({ filterIndex }:Props):JSX.Element {
+export function Text({ filterIndex }: Props): JSX.Element {
const segment: WordpressRoleFormItem = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
[filterIndex],
);
- const { updateSegmentFilterFromEvent, updateSegmentFilter } = useDispatch('mailpoet-dynamic-segments-form');
+ const { updateSegmentFilterFromEvent, updateSegmentFilter } = useDispatch(
+ 'mailpoet-dynamic-segments-form',
+ );
useEffect(() => {
if (segment.operator === undefined) {
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx
index 3ccb91ab6b..91c75e0645 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email.tsx
@@ -4,7 +4,8 @@ import { useSelect } from '@wordpress/data';
import {
EmailActionTypes,
EmailFormItem,
- SegmentTypes, WordpressRoleFormItem,
+ SegmentTypes,
+ WordpressRoleFormItem,
} from '../types';
import { EmailOpenStatisticsFields } from './email_statistics_opens';
@@ -12,23 +13,44 @@ import { EmailClickStatisticsFields } from './email_statistics_clicks';
import { EmailOpensAbsoluteCountFields } from './email_opens_absolute_count';
export const EmailSegmentOptions = [
- { value: EmailActionTypes.OPENS_ABSOLUTE_COUNT, label: MailPoet.I18n.t('emailActionOpensAbsoluteCount'), group: SegmentTypes.Email },
- { value: EmailActionTypes.MACHINE_OPENS_ABSOLUTE_COUNT, label: MailPoet.I18n.t('emailActionMachineOpensAbsoluteCount'), group: SegmentTypes.Email },
- { value: EmailActionTypes.OPENED, label: MailPoet.I18n.t('emailActionOpened'), group: SegmentTypes.Email },
- { value: EmailActionTypes.MACHINE_OPENED, label: MailPoet.I18n.t('emailActionMachineOpened'), group: SegmentTypes.Email },
- { value: EmailActionTypes.CLICKED, label: MailPoet.I18n.t('emailActionClicked'), group: SegmentTypes.Email },
- { value: EmailActionTypes.CLICKED_ANY, label: MailPoet.I18n.t('emailActionClickedAnyEmail'), group: SegmentTypes.Email },
+ {
+ value: EmailActionTypes.OPENS_ABSOLUTE_COUNT,
+ label: MailPoet.I18n.t('emailActionOpensAbsoluteCount'),
+ group: SegmentTypes.Email,
+ },
+ {
+ value: EmailActionTypes.MACHINE_OPENS_ABSOLUTE_COUNT,
+ label: MailPoet.I18n.t('emailActionMachineOpensAbsoluteCount'),
+ group: SegmentTypes.Email,
+ },
+ {
+ value: EmailActionTypes.OPENED,
+ label: MailPoet.I18n.t('emailActionOpened'),
+ group: SegmentTypes.Email,
+ },
+ {
+ value: EmailActionTypes.MACHINE_OPENED,
+ label: MailPoet.I18n.t('emailActionMachineOpened'),
+ group: SegmentTypes.Email,
+ },
+ {
+ value: EmailActionTypes.CLICKED,
+ label: MailPoet.I18n.t('emailActionClicked'),
+ group: SegmentTypes.Email,
+ },
+ {
+ value: EmailActionTypes.CLICKED_ANY,
+ label: MailPoet.I18n.t('emailActionClickedAnyEmail'),
+ group: SegmentTypes.Email,
+ },
];
export function validateEmail(formItems: EmailFormItem): boolean {
// check if the action has the right type
- if (
- !Object
- .values(EmailActionTypes)
- .some((v) => v === formItems.action)
- ) return false;
+ if (!Object.values(EmailActionTypes).some((v) => v === formItems.action))
+ return false;
- if ((formItems.action === EmailActionTypes.CLICKED_ANY)) {
+ if (formItems.action === EmailActionTypes.CLICKED_ANY) {
return true;
}
@@ -37,23 +59,22 @@ export function validateEmail(formItems: EmailFormItem): boolean {
}
if (
- (formItems.action !== EmailActionTypes.OPENS_ABSOLUTE_COUNT)
- && (formItems.action !== EmailActionTypes.MACHINE_OPENS_ABSOLUTE_COUNT)
+ formItems.action !== EmailActionTypes.OPENS_ABSOLUTE_COUNT &&
+ formItems.action !== EmailActionTypes.MACHINE_OPENS_ABSOLUTE_COUNT
) {
// EmailActionTypes.OPENED, EmailActionTypes.MACHINE_OPENED
- return (Array.isArray(formItems.newsletters) && formItems.newsletters.length > 0);
+ return (
+ Array.isArray(formItems.newsletters) && formItems.newsletters.length > 0
+ );
}
- return (
- !!formItems.days
- && !!formItems.opens
- && !!formItems.operator
- );
+ return !!formItems.days && !!formItems.opens && !!formItems.operator;
}
const componentsMap = {
[EmailActionTypes.OPENS_ABSOLUTE_COUNT]: EmailOpensAbsoluteCountFields,
- [EmailActionTypes.MACHINE_OPENS_ABSOLUTE_COUNT]: EmailOpensAbsoluteCountFields,
+ [EmailActionTypes.MACHINE_OPENS_ABSOLUTE_COUNT]:
+ EmailOpensAbsoluteCountFields,
[EmailActionTypes.CLICKED]: EmailClickStatisticsFields,
[EmailActionTypes.OPENED]: EmailOpenStatisticsFields,
[EmailActionTypes.MACHINE_OPENED]: EmailOpenStatisticsFields,
@@ -64,9 +85,10 @@ type Props = {
filterIndex: number;
};
-export function EmailFields({ filterIndex }:Props):JSX.Element {
+export function EmailFields({ filterIndex }: Props): JSX.Element {
const segment: WordpressRoleFormItem = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
[filterIndex],
);
@@ -74,7 +96,5 @@ export function EmailFields({ filterIndex }:Props):JSX.Element {
if (!Component) return null;
- return (
-
- );
+ return ;
}
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_opens_absolute_count.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_opens_absolute_count.tsx
index f664a26a1f..4c9daf889d 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_opens_absolute_count.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_opens_absolute_count.tsx
@@ -6,17 +6,19 @@ import Select from 'common/form/select/select';
import Input from 'common/form/input/input';
import MailPoet from 'mailpoet';
-import {
- EmailFormItem,
-} from '../types';
+import { EmailFormItem } from '../types';
-function replaceElementsInDaysSentence(fn:(value) => JSX.Element): JSX.Element[] {
+function replaceElementsInDaysSentence(
+ fn: (value) => JSX.Element,
+): JSX.Element[] {
return MailPoet.I18n.t('emailActionOpensDaysSentence')
.split(/({days})/gim)
.map(fn);
}
-function replaceEmailActionOpensSentence(fn:(value) => JSX.Element): JSX.Element[] {
+function replaceEmailActionOpensSentence(
+ fn: (value) => JSX.Element,
+): JSX.Element[] {
return MailPoet.I18n.t('emailActionOpensSentence')
.split(/({condition})|({opens})|(\b[a-zA-Z]+\b)/gim)
.map(fn);
@@ -26,13 +28,18 @@ type Props = {
filterIndex: number;
};
-export function EmailOpensAbsoluteCountFields({ filterIndex }:Props):JSX.Element {
+export function EmailOpensAbsoluteCountFields({
+ filterIndex,
+}: Props): JSX.Element {
const segment: EmailFormItem = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
[filterIndex],
);
- const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch('mailpoet-dynamic-segments-form');
+ const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch(
+ 'mailpoet-dynamic-segments-form',
+ );
useEffect(() => {
if (segment.operator === undefined) {
updateSegmentFilter({ operator: 'more' }, filterIndex);
@@ -42,78 +49,68 @@ export function EmailOpensAbsoluteCountFields({ filterIndex }:Props):JSX.Element
return (
<>
- {replaceEmailActionOpensSentence(
- (match) => {
- if (match === '{condition}') {
- return (
- {
- updateSegmentFilterFromEvent('operator', filterIndex, e);
- }}
- >
- {MailPoet.I18n.t('moreThan')}
- {MailPoet.I18n.t('lessThan')}
- {MailPoet.I18n.t('equals')}
- {MailPoet.I18n.t('notEquals')}
-
- );
- }
- if (match === '{opens}') {
- return (
- {
- updateSegmentFilterFromEvent('opens', filterIndex, e);
- }}
- min="0"
- placeholder={MailPoet.I18n.t('emailActionOpens')}
- />
- );
- }
- if ((typeof match === 'string') && match.trim().length > 1) {
- return (
-
- {match}
-
- );
- }
- return null;
- },
- )}
+ {replaceEmailActionOpensSentence((match) => {
+ if (match === '{condition}') {
+ return (
+ {
+ updateSegmentFilterFromEvent('operator', filterIndex, e);
+ }}
+ >
+ {MailPoet.I18n.t('moreThan')}
+ {MailPoet.I18n.t('lessThan')}
+ {MailPoet.I18n.t('equals')}
+
+ {MailPoet.I18n.t('notEquals')}
+
+
+ );
+ }
+ if (match === '{opens}') {
+ return (
+ {
+ updateSegmentFilterFromEvent('opens', filterIndex, e);
+ }}
+ min="0"
+ placeholder={MailPoet.I18n.t('emailActionOpens')}
+ />
+ );
+ }
+ if (typeof match === 'string' && match.trim().length > 1) {
+ return {match}
;
+ }
+ return null;
+ })}
- {replaceElementsInDaysSentence(
- (match) => {
- if (match === '{days}') {
- return (
- {
- updateSegmentFilterFromEvent('days', filterIndex, e);
- }}
- min="0"
- placeholder={MailPoet.I18n.t('emailActionDays')}
- />
- );
- }
- if ((typeof match === 'string') && match.trim().length > 1) {
- return (
-
- {match}
-
- );
- }
- return null;
- },
- )}
+ {replaceElementsInDaysSentence((match) => {
+ if (match === '{days}') {
+ return (
+ {
+ updateSegmentFilterFromEvent('days', filterIndex, e);
+ }}
+ min="0"
+ placeholder={MailPoet.I18n.t('emailActionDays')}
+ />
+ );
+ }
+ if (typeof match === 'string' && match.trim().length > 1) {
+ return {match}
;
+ }
+ return null;
+ })}
>
);
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_clicks.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_clicks.tsx
index ad3d1de863..2a361dde48 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_clicks.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_clicks.tsx
@@ -14,19 +14,25 @@ import {
WindowNewslettersList,
} from '../types';
-const shouldDisplayLinks = (itemNewsletterId?: string): boolean => (!!itemNewsletterId);
+const shouldDisplayLinks = (itemNewsletterId?: string): boolean =>
+ !!itemNewsletterId;
type Props = {
filterIndex: number;
};
-export function EmailClickStatisticsFields({ filterIndex }:Props):JSX.Element {
+export function EmailClickStatisticsFields({
+ filterIndex,
+}: Props): JSX.Element {
const segment: EmailFormItem = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
[filterIndex],
);
- const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch('mailpoet-dynamic-segments-form');
+ const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch(
+ 'mailpoet-dynamic-segments-form',
+ );
const newslettersList: WindowNewslettersList = useSelect(
(select) => select('mailpoet-dynamic-segments-form').getNewslettersList(),
@@ -38,7 +44,9 @@ export function EmailClickStatisticsFields({ filterIndex }:Props):JSX.Element {
const [loadingLinks, setLoadingLinks] = useState(false);
const newsletterOptions = newslettersList?.map((newsletter) => {
- const sentAt = (newsletter.sent_at) ? MailPoet.Date.format(newsletter.sent_at) : MailPoet.I18n.t('notSentYet');
+ const sentAt = newsletter.sent_at
+ ? MailPoet.Date.format(newsletter.sent_at)
+ : MailPoet.I18n.t('notSentYet');
return {
label: newsletter.subject,
tag: sentAt,
@@ -64,8 +72,8 @@ export function EmailClickStatisticsFields({ filterIndex }:Props):JSX.Element {
setLoadingLinks(false);
setLinks(loadedLinks as SelectOption[]);
})
- .fail((response:ErrorResponse) => {
- setErrors(response.errors as { message:string }[]);
+ .fail((response: ErrorResponse) => {
+ setErrors(response.errors as { message: string }[]);
});
}
@@ -77,15 +85,13 @@ export function EmailClickStatisticsFields({ filterIndex }:Props):JSX.Element {
useEffect(() => {
loadLinksCB();
- }, [
- loadLinksCB,
- segment.newsletter_id,
- ]);
+ }, [loadLinksCB, segment.newsletter_id]);
useEffect(() => {
- if ((segment.operator !== AnyValueTypes.ANY)
- && (segment.operator !== AnyValueTypes.ALL)
- && (segment.operator !== AnyValueTypes.NONE)
+ if (
+ segment.operator !== AnyValueTypes.ANY &&
+ segment.operator !== AnyValueTypes.ALL &&
+ segment.operator !== AnyValueTypes.NONE
) {
updateSegmentFilter({ operator: AnyValueTypes.ANY }, filterIndex);
}
@@ -93,9 +99,7 @@ export function EmailClickStatisticsFields({ filterIndex }:Props):JSX.Element {
return (
<>
- {(errors.length > 0 && (
-
- ))}
+ {errors.length > 0 && }
{
- updateSegmentFilter({ newsletter_id: option.value, link_ids: [] }, filterIndex);
+ updateSegmentFilter(
+ { newsletter_id: option.value, link_ids: [] },
+ filterIndex,
+ );
}}
automationId="segment-email"
/>
@@ -114,45 +121,50 @@ export function EmailClickStatisticsFields({ filterIndex }:Props):JSX.Element {
isMinWidth
key="select-operator"
value={segment.operator}
- onChange={(e) => updateSegmentFilterFromEvent(
- 'operator',
- filterIndex,
- e,
- )}
+ onChange={(e) =>
+ updateSegmentFilterFromEvent('operator', filterIndex, e)
+ }
automationId="select-operator"
>
{MailPoet.I18n.t('anyOf')}
{MailPoet.I18n.t('allOf')}
- {MailPoet.I18n.t('noneOf')}
+
+ {MailPoet.I18n.t('noneOf')}
+
- {(loadingLinks && (
-
- {MailPoet.I18n.t('loadingDynamicSegmentItems')}
-
- ))}
- {
- (!loadingLinks && shouldDisplayLinks(segment.newsletter_id))
- && (
- {
- if (!segment.link_ids) return false;
- return segment.link_ids.indexOf(option.value) !== -1;
- },
- links,
- )}
- onChange={(options: SelectOption[]): void => {
- updateSegmentFilter({ link_ids: (options || []).map((x) => x.value) }, filterIndex);
- }}
- />
- )
- }
+ {loadingLinks && (
+ {MailPoet.I18n.t('loadingDynamicSegmentItems')}
+ )}
+ {!loadingLinks && shouldDisplayLinks(segment.newsletter_id) && (
+ {
+ if (!segment.link_ids) return false;
+ return segment.link_ids.indexOf(option.value) !== -1;
+ }, links)}
+ onChange={(options: SelectOption[]): void => {
+ updateSegmentFilter(
+ { link_ids: (options || []).map((x) => x.value) },
+ filterIndex,
+ );
+ }}
+ />
+ )}
>
);
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_opens.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_opens.tsx
index 8c8fd86a35..360a09c187 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_opens.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/email_statistics_opens.tsx
@@ -18,13 +18,16 @@ type Props = {
filterIndex: number;
};
-export function EmailOpenStatisticsFields({ filterIndex }:Props) : JSX.Element {
+export function EmailOpenStatisticsFields({ filterIndex }: Props): JSX.Element {
const segment: EmailFormItem = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
[filterIndex],
);
- const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch('mailpoet-dynamic-segments-form');
+ const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch(
+ 'mailpoet-dynamic-segments-form',
+ );
const newslettersList: WindowNewslettersList = useSelect(
(select) => select('mailpoet-dynamic-segments-form').getNewslettersList(),
@@ -32,7 +35,9 @@ export function EmailOpenStatisticsFields({ filterIndex }:Props) : JSX.Element {
);
const newsletterOptions = newslettersList?.map((newsletter) => {
- const sentAt = (newsletter.sent_at) ? MailPoet.Date.format(newsletter.sent_at) : MailPoet.I18n.t('notSentYet');
+ const sentAt = newsletter.sent_at
+ ? MailPoet.Date.format(newsletter.sent_at)
+ : MailPoet.I18n.t('notSentYet');
return {
label: newsletter.subject,
tag: sentAt,
@@ -41,24 +46,21 @@ export function EmailOpenStatisticsFields({ filterIndex }:Props) : JSX.Element {
});
useEffect(() => {
- if ((segment.operator !== AnyValueTypes.ANY)
- && (segment.operator !== AnyValueTypes.ALL)
- && (segment.operator !== AnyValueTypes.NONE)
+ if (
+ segment.operator !== AnyValueTypes.ANY &&
+ segment.operator !== AnyValueTypes.ALL &&
+ segment.operator !== AnyValueTypes.NONE
) {
updateSegmentFilter({ operator: AnyValueTypes.ANY }, filterIndex);
}
// None is not allowed for Machine Opened
- if ((segment.action === EmailActionTypes.MACHINE_OPENED)
- && (segment.operator === AnyValueTypes.NONE)
+ if (
+ segment.action === EmailActionTypes.MACHINE_OPENED &&
+ segment.operator === AnyValueTypes.NONE
) {
updateSegmentFilter({ operator: AnyValueTypes.ANY }, filterIndex);
}
- }, [
- segment.action,
- segment.operator,
- filterIndex,
- updateSegmentFilter,
- ]);
+ }, [segment.action, segment.operator, filterIndex, updateSegmentFilter]);
return (
<>
@@ -73,7 +75,11 @@ export function EmailOpenStatisticsFields({ filterIndex }:Props) : JSX.Element {
>
{MailPoet.I18n.t('anyOf')}
{MailPoet.I18n.t('allOf')}
- {segment.action !== EmailActionTypes.MACHINE_OPENED ? {MailPoet.I18n.t('noneOf')} : null}
+ {segment.action !== EmailActionTypes.MACHINE_OPENED ? (
+
+ {MailPoet.I18n.t('noneOf')}
+
+ ) : null}
@@ -84,16 +90,11 @@ export function EmailOpenStatisticsFields({ filterIndex }:Props) : JSX.Element {
placeholder={MailPoet.I18n.t('selectNewsletterPlaceholder')}
options={newsletterOptions}
automationId="segment-email"
- value={
- filter(
- (option) => {
- if (!segment.newsletters) return undefined;
- const newsletterId = option.value;
- return segment.newsletters.indexOf(newsletterId) !== -1;
- },
- newsletterOptions,
- )
- }
+ value={filter((option) => {
+ if (!segment.newsletters) return undefined;
+ const newsletterId = option.value;
+ return segment.newsletters.indexOf(newsletterId) !== -1;
+ }, newsletterOptions)}
onChange={(options: SelectOption[]): void => {
updateSegmentFilter(
{ newsletters: map('value', options) },
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber.tsx
index fcd0a20fae..40950e9dd1 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber.tsx
@@ -7,14 +7,32 @@ import {
SubscriberActionTypes,
} from '../types';
import { WordpressRoleFields } from './subscriber_wordpress_role';
-import { SubscriberScoreFields, validateSubscriberScore } from './subscriber_score';
-import { SubscribedDateFields, SubscribedDateOperator } from './subscriber_subscribed_date';
-import { MailPoetCustomFields, validateMailPoetCustomField } from './subscriber_mailpoet_custom_field';
-import { SubscribedToList, validateSubscribedToList } from './subscriber_subscribed_to_list';
+import {
+ SubscriberScoreFields,
+ validateSubscriberScore,
+} from './subscriber_score';
+import {
+ SubscribedDateFields,
+ SubscribedDateOperator,
+} from './subscriber_subscribed_date';
+import {
+ MailPoetCustomFields,
+ validateMailPoetCustomField,
+} from './subscriber_mailpoet_custom_field';
+import {
+ SubscribedToList,
+ validateSubscribedToList,
+} from './subscriber_subscribed_to_list';
export function validateSubscriber(formItems: WordpressRoleFormItem): boolean {
- if ((!formItems.action) || (formItems.action === SubscriberActionTypes.WORDPRESS_ROLE)) {
- return Array.isArray(formItems.wordpressRole) && (formItems.wordpressRole.length > 0);
+ if (
+ !formItems.action ||
+ formItems.action === SubscriberActionTypes.WORDPRESS_ROLE
+ ) {
+ return (
+ Array.isArray(formItems.wordpressRole) &&
+ formItems.wordpressRole.length > 0
+ );
}
if (formItems.action === SubscriberActionTypes.MAILPOET_CUSTOM_FIELD) {
return validateMailPoetCustomField(formItems);
@@ -29,30 +47,50 @@ export function validateSubscriber(formItems: WordpressRoleFormItem): boolean {
return false;
}
if (
- formItems.operator === SubscribedDateOperator.BEFORE
- || formItems.operator === SubscribedDateOperator.AFTER
- || formItems.operator === SubscribedDateOperator.ON
- || formItems.operator === SubscribedDateOperator.NOT_ON
+ formItems.operator === SubscribedDateOperator.BEFORE ||
+ formItems.operator === SubscribedDateOperator.AFTER ||
+ formItems.operator === SubscribedDateOperator.ON ||
+ formItems.operator === SubscribedDateOperator.NOT_ON
) {
const re = /^\d+-\d+-\d+$/;
return re.test(formItems.value);
}
if (
- formItems.operator === SubscribedDateOperator.IN_THE_LAST
- || formItems.operator === SubscribedDateOperator.NOT_IN_THE_LAST
+ formItems.operator === SubscribedDateOperator.IN_THE_LAST ||
+ formItems.operator === SubscribedDateOperator.NOT_IN_THE_LAST
) {
const re = /^\d+$/;
- return re.test(formItems.value) && (Number(formItems.value) > 0);
+ return re.test(formItems.value) && Number(formItems.value) > 0;
}
return false;
}
export const SubscriberSegmentOptions = [
- { value: SubscriberActionTypes.MAILPOET_CUSTOM_FIELD, label: MailPoet.I18n.t('mailpoetCustomField'), group: SegmentTypes.WordPressRole },
- { value: SubscriberActionTypes.SUBSCRIBER_SCORE, label: MailPoet.I18n.t('subscriberScore'), group: SegmentTypes.WordPressRole },
- { value: SubscriberActionTypes.SUBSCRIBED_DATE, label: MailPoet.I18n.t('subscribedDate'), group: SegmentTypes.WordPressRole },
- { value: SubscriberActionTypes.SUBSCRIBED_TO_LIST, label: MailPoet.I18n.t('subscribedToList'), group: SegmentTypes.WordPressRole },
- { value: SubscriberActionTypes.WORDPRESS_ROLE, label: MailPoet.I18n.t('segmentsSubscriber'), group: SegmentTypes.WordPressRole },
+ {
+ value: SubscriberActionTypes.MAILPOET_CUSTOM_FIELD,
+ label: MailPoet.I18n.t('mailpoetCustomField'),
+ group: SegmentTypes.WordPressRole,
+ },
+ {
+ value: SubscriberActionTypes.SUBSCRIBER_SCORE,
+ label: MailPoet.I18n.t('subscriberScore'),
+ group: SegmentTypes.WordPressRole,
+ },
+ {
+ value: SubscriberActionTypes.SUBSCRIBED_DATE,
+ label: MailPoet.I18n.t('subscribedDate'),
+ group: SegmentTypes.WordPressRole,
+ },
+ {
+ value: SubscriberActionTypes.SUBSCRIBED_TO_LIST,
+ label: MailPoet.I18n.t('subscribedToList'),
+ group: SegmentTypes.WordPressRole,
+ },
+ {
+ value: SubscriberActionTypes.WORDPRESS_ROLE,
+ label: MailPoet.I18n.t('segmentsSubscriber'),
+ group: SegmentTypes.WordPressRole,
+ },
];
const componentsMap = {
@@ -67,9 +105,10 @@ type Props = {
filterIndex: number;
};
-export function SubscriberFields({ filterIndex } : Props):JSX.Element {
+export function SubscriberFields({ filterIndex }: Props): JSX.Element {
const segment: WordpressRoleFormItem = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
[filterIndex],
);
@@ -82,7 +121,5 @@ export function SubscriberFields({ filterIndex } : Props):JSX.Element {
if (!Component) return null;
- return (
-
- );
+ return ;
}
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_mailpoet_custom_field.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_mailpoet_custom_field.tsx
index 24911de973..9a84a39781 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_mailpoet_custom_field.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_mailpoet_custom_field.tsx
@@ -33,8 +33,11 @@ const validationMap = {
[CustomFieldsTypes.DATE]: validateDate,
};
-export function validateMailPoetCustomField(formItems: WordpressRoleFormItem): boolean {
- const validator: (WordpressRoleFormItem) => boolean = validationMap[formItems.custom_field_type];
+export function validateMailPoetCustomField(
+ formItems: WordpressRoleFormItem,
+): boolean {
+ const validator: (WordpressRoleFormItem) => boolean =
+ validationMap[formItems.custom_field_type];
if (!validator) return false;
return validator(formItems);
@@ -53,9 +56,10 @@ type Props = {
filterIndex: number;
};
-export function MailPoetCustomFields({ filterIndex }:Props):JSX.Element {
+export function MailPoetCustomFields({ filterIndex }: Props): JSX.Element {
const segment: WordpressRoleFormItem = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
[filterIndex],
);
@@ -85,36 +89,35 @@ export function MailPoetCustomFields({ filterIndex }:Props):JSX.Element {
placeholder={MailPoet.I18n.t('selectCustomFieldPlaceholder')}
options={options}
automationId="select-custom-field"
- value={
- find(
- (option) => {
- if (!segment.custom_field_id) return undefined;
- return segment.custom_field_id === option.value;
- },
- options,
- )
- }
+ value={find((option) => {
+ if (!segment.custom_field_id) return undefined;
+ return segment.custom_field_id === option.value;
+ }, options)}
onChange={(option: SelectOption): void => {
- const customField = find({ id: Number(option.value) }, customFieldsList);
+ const customField = find(
+ { id: Number(option.value) },
+ customFieldsList,
+ );
if (!customField) return;
- updateSegmentFilter({
- custom_field_id: option.value,
- custom_field_type: customField.type,
- operator: undefined,
- value: undefined,
- }, filterIndex);
+ updateSegmentFilter(
+ {
+ custom_field_id: option.value,
+ custom_field_type: customField.type,
+ operator: undefined,
+ value: undefined,
+ },
+ filterIndex,
+ );
}}
/>
- {
- TypeComponent && (
-
- )
- }
+ {TypeComponent && (
+
+ )}
>
);
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_score.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_score.tsx
index 2fcfb8c64b..fcc95085fc 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_score.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_score.tsx
@@ -6,9 +6,7 @@ import Select from 'common/form/select/select';
import { Grid } from 'common/grid';
import Input from 'common/form/input/input';
-import {
- WordpressRoleFormItem,
-} from '../types';
+import { WordpressRoleFormItem } from '../types';
export enum SubscriberScoreOperator {
HIGHER_THAN = 'higherThan',
@@ -32,60 +30,73 @@ type Props = {
filterIndex: number;
};
-export function validateSubscriberScore(formItems: WordpressRoleFormItem): boolean {
+export function validateSubscriberScore(
+ formItems: WordpressRoleFormItem,
+): boolean {
if (
- formItems.operator === SubscriberScoreOperator.HIGHER_THAN
- || formItems.operator === SubscriberScoreOperator.LOWER_THAN
- || formItems.operator === SubscriberScoreOperator.EQUALS
- || formItems.operator === SubscriberScoreOperator.NOT_EQUALS
+ formItems.operator === SubscriberScoreOperator.HIGHER_THAN ||
+ formItems.operator === SubscriberScoreOperator.LOWER_THAN ||
+ formItems.operator === SubscriberScoreOperator.EQUALS ||
+ formItems.operator === SubscriberScoreOperator.NOT_EQUALS
) {
const numericValue = Number(formItems.value);
const numericFloatValue = Number(parseFloat(formItems.value));
- return !Number.isNaN(numericValue)
- && !Number.isNaN(numericFloatValue)
- && numericValue >= 0 && numericValue <= 100;
+ return (
+ !Number.isNaN(numericValue) &&
+ !Number.isNaN(numericFloatValue) &&
+ numericValue >= 0 &&
+ numericValue <= 100
+ );
}
if (
- formItems.operator === SubscriberScoreOperator.UNKNOWN
- || formItems.operator === SubscriberScoreOperator.NOT_UNKNOWN
+ formItems.operator === SubscriberScoreOperator.UNKNOWN ||
+ formItems.operator === SubscriberScoreOperator.NOT_UNKNOWN
) {
return true;
}
return false;
}
-function replaceSubscriberScoreSentence(fn:(value) => JSX.Element): JSX.Element[] {
+function replaceSubscriberScoreSentence(
+ fn: (value) => JSX.Element,
+): JSX.Element[] {
return MailPoet.I18n.t('subscriberScoreSentence')
.split(/({condition})|({score})|(\b%\b)/gim)
.map(fn);
}
-export function SubscriberScoreFields({ filterIndex }:Props) : JSX.Element {
+export function SubscriberScoreFields({ filterIndex }: Props): JSX.Element {
const segment: WordpressRoleFormItem = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
[filterIndex],
);
- const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch('mailpoet-dynamic-segments-form');
+ const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch(
+ 'mailpoet-dynamic-segments-form',
+ );
useEffect(() => {
- if (!availableOperators.includes((segment.operator as SubscriberScoreOperator))) {
- updateSegmentFilter({ operator: SubscriberScoreOperator.HIGHER_THAN }, filterIndex);
+ if (
+ !availableOperators.includes(segment.operator as SubscriberScoreOperator)
+ ) {
+ updateSegmentFilter(
+ { operator: SubscriberScoreOperator.HIGHER_THAN },
+ filterIndex,
+ );
}
if (
- (
- segment.operator === SubscriberScoreOperator.HIGHER_THAN
- || segment.operator === SubscriberScoreOperator.LOWER_THAN
- || segment.operator === SubscriberScoreOperator.EQUALS
- || segment.operator === SubscriberScoreOperator.NOT_EQUALS
- )
- && (typeof segment.value === 'undefined')
+ (segment.operator === SubscriberScoreOperator.HIGHER_THAN ||
+ segment.operator === SubscriberScoreOperator.LOWER_THAN ||
+ segment.operator === SubscriberScoreOperator.EQUALS ||
+ segment.operator === SubscriberScoreOperator.NOT_EQUALS) &&
+ typeof segment.value === 'undefined'
) {
updateSegmentFilter({ value: '' }, filterIndex);
}
if (
- segment.operator === SubscriberScoreOperator.UNKNOWN
- || segment.operator === SubscriberScoreOperator.NOT_UNKNOWN
+ segment.operator === SubscriberScoreOperator.UNKNOWN ||
+ segment.operator === SubscriberScoreOperator.NOT_UNKNOWN
) {
updateSegmentFilter({ value: null }, filterIndex);
}
@@ -93,60 +104,68 @@ export function SubscriberScoreFields({ filterIndex }:Props) : JSX.Element {
return (
- {replaceSubscriberScoreSentence(
- (match) => {
- if (match === '{condition}') {
- return (
- {
- updateSegmentFilterFromEvent('operator', filterIndex, e);
- }}
- >
- {MailPoet.I18n.t('higherThan')}
- {MailPoet.I18n.t('lowerThan')}
- {MailPoet.I18n.t('equals')}
- {MailPoet.I18n.t('notEquals')}
- {MailPoet.I18n.t('unknown')}
- {MailPoet.I18n.t('notUnknown')}
-
- );
- }
- if (match === '{score}') {
- return (
- segment.operator === SubscriberScoreOperator.HIGHER_THAN
- || segment.operator === SubscriberScoreOperator.LOWER_THAN
- || segment.operator === SubscriberScoreOperator.EQUALS
- || segment.operator === SubscriberScoreOperator.NOT_EQUALS
- ) && (
- {
+ if (match === '{condition}') {
+ return (
+ {
- updateSegmentFilterFromEvent('value', filterIndex, e);
+ updateSegmentFilterFromEvent('operator', filterIndex, e);
}}
- min="0"
- placeholder={MailPoet.I18n.t('subscriberScorePlaceholder')}
- />
- );
- }
- if ((typeof match === 'string') && match.trim().length > 0) {
- return (
- segment.operator !== SubscriberScoreOperator.UNKNOWN
- && segment.operator !== SubscriberScoreOperator.NOT_UNKNOWN
- ) && (
-
- {match}
-
- );
- }
- return null;
- },
- )}
+ >
+
+ {MailPoet.I18n.t('higherThan')}
+
+
+ {MailPoet.I18n.t('lowerThan')}
+
+
+ {MailPoet.I18n.t('equals')}
+
+
+ {MailPoet.I18n.t('notEquals')}
+
+
+ {MailPoet.I18n.t('unknown')}
+
+
+ {MailPoet.I18n.t('notUnknown')}
+
+
+ );
+ }
+ if (match === '{score}') {
+ return (
+ (segment.operator === SubscriberScoreOperator.HIGHER_THAN ||
+ segment.operator === SubscriberScoreOperator.LOWER_THAN ||
+ segment.operator === SubscriberScoreOperator.EQUALS ||
+ segment.operator === SubscriberScoreOperator.NOT_EQUALS) && (
+ {
+ updateSegmentFilterFromEvent('value', filterIndex, e);
+ }}
+ min="0"
+ placeholder={MailPoet.I18n.t('subscriberScorePlaceholder')}
+ />
+ )
+ );
+ }
+ if (typeof match === 'string' && match.trim().length > 0) {
+ return (
+ segment.operator !== SubscriberScoreOperator.UNKNOWN &&
+ segment.operator !== SubscriberScoreOperator.NOT_UNKNOWN && (
+ {match}
+ )
+ );
+ }
+ return null;
+ })}
);
}
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_date.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_date.tsx
index f910bdf238..ab2bae9ddf 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_date.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_date.tsx
@@ -8,9 +8,7 @@ import Datepicker from 'common/datepicker/datepicker';
import { Grid } from 'common/grid';
import Input from 'common/form/input/input';
-import {
- WordpressRoleFormItem,
-} from '../types';
+import { WordpressRoleFormItem } from '../types';
export enum SubscribedDateOperator {
BEFORE = 'before',
@@ -30,14 +28,18 @@ const availableOperators = [
SubscribedDateOperator.NOT_IN_THE_LAST,
];
-const convertDateToString = (value: Date | [Date, Date]): string | undefined => {
+const convertDateToString = (
+ value: Date | [Date, Date],
+): string | undefined => {
if (value === null) {
return undefined;
}
if (Array.isArray(value)) {
- throw new Error('convertDateToString can process only single date array given');
+ throw new Error(
+ 'convertDateToString can process only single date array given',
+ );
}
- return (MailPoet.Date.format(value, { format: 'Y-m-d' }));
+ return MailPoet.Date.format(value, { format: 'Y-m-d' });
};
const parseDate = (value: string): Date | undefined => {
@@ -50,35 +52,44 @@ type Props = {
filterIndex: number;
};
-export function SubscribedDateFields({ filterIndex }: Props) : JSX.Element {
+export function SubscribedDateFields({ filterIndex }: Props): JSX.Element {
const segment: WordpressRoleFormItem = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
[filterIndex],
);
- const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch('mailpoet-dynamic-segments-form');
+ const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch(
+ 'mailpoet-dynamic-segments-form',
+ );
useEffect(() => {
- if (!availableOperators.includes((segment.operator as SubscribedDateOperator))) {
- updateSegmentFilter({ operator: SubscribedDateOperator.BEFORE }, filterIndex);
- }
if (
- (
- segment.operator === SubscribedDateOperator.BEFORE
- || segment.operator === SubscribedDateOperator.AFTER
- || segment.operator === SubscribedDateOperator.ON
- || segment.operator === SubscribedDateOperator.NOT_ON
- )
- && ((parseDate(segment.value) === undefined) || !/^\d+-\d+-\d+$/.test(segment.value))
+ !availableOperators.includes(segment.operator as SubscribedDateOperator)
) {
- updateSegmentFilter({ value: convertDateToString(new Date()) }, filterIndex);
+ updateSegmentFilter(
+ { operator: SubscribedDateOperator.BEFORE },
+ filterIndex,
+ );
}
if (
- (
- segment.operator === SubscribedDateOperator.IN_THE_LAST
- || segment.operator === SubscribedDateOperator.NOT_IN_THE_LAST
- )
- && ((typeof segment.value === 'string') && !/^\d*$/.exec(segment.value))
+ (segment.operator === SubscribedDateOperator.BEFORE ||
+ segment.operator === SubscribedDateOperator.AFTER ||
+ segment.operator === SubscribedDateOperator.ON ||
+ segment.operator === SubscribedDateOperator.NOT_ON) &&
+ (parseDate(segment.value) === undefined ||
+ !/^\d+-\d+-\d+$/.test(segment.value))
+ ) {
+ updateSegmentFilter(
+ { value: convertDateToString(new Date()) },
+ filterIndex,
+ );
+ }
+ if (
+ (segment.operator === SubscribedDateOperator.IN_THE_LAST ||
+ segment.operator === SubscribedDateOperator.NOT_IN_THE_LAST) &&
+ typeof segment.value === 'string' &&
+ !/^\d*$/.exec(segment.value)
) {
updateSegmentFilter({ value: '' }, filterIndex);
}
@@ -93,46 +104,55 @@ export function SubscribedDateFields({ filterIndex }: Props) : JSX.Element {
updateSegmentFilterFromEvent('operator', filterIndex, e);
}}
>
- {MailPoet.I18n.t('before')}
- {MailPoet.I18n.t('after')}
- {MailPoet.I18n.t('on')}
- {MailPoet.I18n.t('notOn')}
- {MailPoet.I18n.t('inTheLast')}
- {MailPoet.I18n.t('notInTheLast')}
+
+ {MailPoet.I18n.t('before')}
+
+
+ {MailPoet.I18n.t('after')}
+
+
+ {MailPoet.I18n.t('on')}
+
+
+ {MailPoet.I18n.t('notOn')}
+
+
+ {MailPoet.I18n.t('inTheLast')}
+
+
+ {MailPoet.I18n.t('notInTheLast')}
+
- {(
- segment.operator === SubscribedDateOperator.BEFORE
- || segment.operator === SubscribedDateOperator.AFTER
- || segment.operator === SubscribedDateOperator.ON
- || segment.operator === SubscribedDateOperator.NOT_ON
- ) && (
- {
- updateSegmentFilter({ value: convertDateToString(value) }, filterIndex);
- }}
- selected={segment.value ? parseDate(segment.value) : undefined}
- />
- )}
- {(
- segment.operator === SubscribedDateOperator.IN_THE_LAST
- || segment.operator === SubscribedDateOperator.NOT_IN_THE_LAST
- ) && (
- <>
- {
- updateSegmentFilterFromEvent('value', filterIndex, e);
+ {(segment.operator === SubscribedDateOperator.BEFORE ||
+ segment.operator === SubscribedDateOperator.AFTER ||
+ segment.operator === SubscribedDateOperator.ON ||
+ segment.operator === SubscribedDateOperator.NOT_ON) && (
+ {
+ updateSegmentFilter(
+ { value: convertDateToString(value) },
+ filterIndex,
+ );
}}
- min="1"
- placeholder={MailPoet.I18n.t('daysPlaceholder')}
+ selected={segment.value ? parseDate(segment.value) : undefined}
/>
-
- {MailPoet.I18n.t('daysPlaceholder')}
-
- >
+ )}
+ {(segment.operator === SubscribedDateOperator.IN_THE_LAST ||
+ segment.operator === SubscribedDateOperator.NOT_IN_THE_LAST) && (
+ <>
+ {
+ updateSegmentFilterFromEvent('value', filterIndex, e);
+ }}
+ min="1"
+ placeholder={MailPoet.I18n.t('daysPlaceholder')}
+ />
+ {MailPoet.I18n.t('daysPlaceholder')}
+ >
)}
);
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_to_list.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_to_list.tsx
index a627e6b952..15ad9ca12e 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_to_list.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_subscribed_to_list.tsx
@@ -14,17 +14,15 @@ import {
WordpressRoleFormItem,
} from '../types';
-export function validateSubscribedToList(formItems: WordpressRoleFormItem): boolean {
+export function validateSubscribedToList(
+ formItems: WordpressRoleFormItem,
+): boolean {
return (
- (
- (formItems.operator === AnyValueTypes.ANY)
- || (formItems.operator === AnyValueTypes.ALL)
- || (formItems.operator === AnyValueTypes.NONE)
- )
- && (
- (Array.isArray(formItems.segments))
- && (formItems.segments.length > 0)
- )
+ (formItems.operator === AnyValueTypes.ANY ||
+ formItems.operator === AnyValueTypes.ALL ||
+ formItems.operator === AnyValueTypes.NONE) &&
+ Array.isArray(formItems.segments) &&
+ formItems.segments.length > 0
);
}
@@ -32,25 +30,27 @@ type Props = {
filterIndex: number;
};
-export function SubscribedToList({ filterIndex }:Props) : JSX.Element {
+export function SubscribedToList({ filterIndex }: Props): JSX.Element {
const segment: WordpressRoleFormItem = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
[filterIndex],
);
const staticSegmentsList: StaticSegment[] = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getStaticSegmentsList(),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getStaticSegmentsList(),
[],
);
- const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch('mailpoet-dynamic-segments-form');
+ const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch(
+ 'mailpoet-dynamic-segments-form',
+ );
useEffect(() => {
if (
- (
- (segment.operator !== AnyValueTypes.ANY)
- && (segment.operator !== AnyValueTypes.ALL)
- && (segment.operator !== AnyValueTypes.NONE)
- )
+ segment.operator !== AnyValueTypes.ANY &&
+ segment.operator !== AnyValueTypes.ALL &&
+ segment.operator !== AnyValueTypes.NONE
) {
updateSegmentFilter({ operator: AnyValueTypes.ANY }, filterIndex);
}
@@ -73,7 +73,9 @@ export function SubscribedToList({ filterIndex }:Props) : JSX.Element {
>
{MailPoet.I18n.t('anyOf')}
{MailPoet.I18n.t('allOf')}
- {MailPoet.I18n.t('noneOf')}
+
+ {MailPoet.I18n.t('noneOf')}
+
@@ -83,16 +85,11 @@ export function SubscribedToList({ filterIndex }:Props) : JSX.Element {
isMulti
placeholder={MailPoet.I18n.t('searchLists')}
options={options}
- value={
- filter(
- (option) => {
- if (!segment.segments) return undefined;
- const segmentId = option.value;
- return segment.segments.indexOf(segmentId) !== -1;
- },
- options,
- )
- }
+ value={filter((option) => {
+ if (!segment.segments) return undefined;
+ const segmentId = option.value;
+ return segment.segments.indexOf(segmentId) !== -1;
+ }, options)}
onChange={(selectOptions: SelectOption[]): void => {
updateSegmentFilter(
{ segments: map('value', selectOptions) },
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_wordpress_role.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_wordpress_role.tsx
index 77dfc57b7f..8fbabd921b 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_wordpress_role.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/subscriber_wordpress_role.tsx
@@ -19,20 +19,23 @@ type Props = {
filterIndex: number;
};
-export function WordpressRoleFields({ filterIndex }:Props) : JSX.Element {
+export function WordpressRoleFields({ filterIndex }: Props): JSX.Element {
const segment: WordpressRoleFormItem = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
[filterIndex],
);
- const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch('mailpoet-dynamic-segments-form');
+ const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch(
+ 'mailpoet-dynamic-segments-form',
+ );
useEffect(() => {
if (
- (segment.action === SubscriberActionTypes.WORDPRESS_ROLE)
- && (segment.operator !== AnyValueTypes.ANY)
- && (segment.operator !== AnyValueTypes.ALL)
- && (segment.operator !== AnyValueTypes.NONE)
+ segment.action === SubscriberActionTypes.WORDPRESS_ROLE &&
+ segment.operator !== AnyValueTypes.ANY &&
+ segment.operator !== AnyValueTypes.ALL &&
+ segment.operator !== AnyValueTypes.NONE
) {
updateSegmentFilter({ operator: AnyValueTypes.ANY }, filterIndex);
}
@@ -60,7 +63,9 @@ export function WordpressRoleFields({ filterIndex }:Props) : JSX.Element {
>
{MailPoet.I18n.t('anyOf')}
{MailPoet.I18n.t('allOf')}
- {MailPoet.I18n.t('noneOf')}
+
+ {MailPoet.I18n.t('noneOf')}
+
@@ -71,15 +76,10 @@ export function WordpressRoleFields({ filterIndex }:Props) : JSX.Element {
automationId="segment-wordpress-role"
placeholder={MailPoet.I18n.t('selectUserRolePlaceholder')}
options={options}
- value={
- filter(
- (option) => {
- if (!segment.wordpressRole) return undefined;
- return segment.wordpressRole.indexOf(option.value) !== -1;
- },
- options,
- )
- }
+ value={filter((option) => {
+ if (!segment.wordpressRole) return undefined;
+ return segment.wordpressRole.indexOf(option.value) !== -1;
+ }, options)}
onChange={(selectOptions: SelectOption[]): void => {
updateSegmentFilter(
{ wordpressRole: map('value', selectOptions) },
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce.tsx
index 9eb932d090..c03f303fcb 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce.tsx
@@ -26,50 +26,87 @@ enum WooCommerceActionTypes {
}
export const WooCommerceOptions = [
- { value: WooCommerceActionTypes.CUSTOMER_IN_COUNTRY, label: MailPoet.I18n.t('wooCustomerInCountry'), group: SegmentTypes.WooCommerce },
- { value: WooCommerceActionTypes.NUMBER_OF_ORDERS, label: MailPoet.I18n.t('wooNumberOfOrders'), group: SegmentTypes.WooCommerce },
- { value: WooCommerceActionTypes.PURCHASED_CATEGORY, label: MailPoet.I18n.t('wooPurchasedCategory'), group: SegmentTypes.WooCommerce },
- { value: WooCommerceActionTypes.PURCHASED_PRODUCT, label: MailPoet.I18n.t('wooPurchasedProduct'), group: SegmentTypes.WooCommerce },
- { value: WooCommerceActionTypes.TOTAL_SPENT, label: MailPoet.I18n.t('wooTotalSpent'), group: SegmentTypes.WooCommerce },
+ {
+ value: WooCommerceActionTypes.CUSTOMER_IN_COUNTRY,
+ label: MailPoet.I18n.t('wooCustomerInCountry'),
+ group: SegmentTypes.WooCommerce,
+ },
+ {
+ value: WooCommerceActionTypes.NUMBER_OF_ORDERS,
+ label: MailPoet.I18n.t('wooNumberOfOrders'),
+ group: SegmentTypes.WooCommerce,
+ },
+ {
+ value: WooCommerceActionTypes.PURCHASED_CATEGORY,
+ label: MailPoet.I18n.t('wooPurchasedCategory'),
+ group: SegmentTypes.WooCommerce,
+ },
+ {
+ value: WooCommerceActionTypes.PURCHASED_PRODUCT,
+ label: MailPoet.I18n.t('wooPurchasedProduct'),
+ group: SegmentTypes.WooCommerce,
+ },
+ {
+ value: WooCommerceActionTypes.TOTAL_SPENT,
+ label: MailPoet.I18n.t('wooTotalSpent'),
+ group: SegmentTypes.WooCommerce,
+ },
];
const actionTypesWithDefaultTypeAny: Array = [
- WooCommerceActionTypes.PURCHASED_PRODUCT, WooCommerceActionTypes.PURCHASED_CATEGORY];
+ WooCommerceActionTypes.PURCHASED_PRODUCT,
+ WooCommerceActionTypes.PURCHASED_CATEGORY,
+];
export function validateWooCommerce(formItems: WooCommerceFormItem): boolean {
- if (!(
- Object
- .values(WooCommerceActionTypes)
- .some((v) => v === formItems.action))
+ if (
+ !Object.values(WooCommerceActionTypes).some((v) => v === formItems.action)
) {
return false;
}
- const purchasedCategoryIsInvalid = formItems.category_ids === undefined
- || formItems.category_ids.length === 0
- || !formItems.operator;
- if (formItems.action === WooCommerceActionTypes.PURCHASED_CATEGORY
- && purchasedCategoryIsInvalid) {
+ const purchasedCategoryIsInvalid =
+ formItems.category_ids === undefined ||
+ formItems.category_ids.length === 0 ||
+ !formItems.operator;
+ if (
+ formItems.action === WooCommerceActionTypes.PURCHASED_CATEGORY &&
+ purchasedCategoryIsInvalid
+ ) {
return false;
}
- const purchasedProductIsInvalid = formItems.product_ids === undefined
- || formItems.product_ids.length === 0
- || !formItems.operator;
- if (formItems.action === WooCommerceActionTypes.PURCHASED_PRODUCT && purchasedProductIsInvalid) {
+ const purchasedProductIsInvalid =
+ formItems.product_ids === undefined ||
+ formItems.product_ids.length === 0 ||
+ !formItems.operator;
+ if (
+ formItems.action === WooCommerceActionTypes.PURCHASED_PRODUCT &&
+ purchasedProductIsInvalid
+ ) {
return false;
}
- const countryCodeIsInvalid = formItems.country_code === undefined
- || formItems.country_code.length === 0;
- if (formItems.action === WooCommerceActionTypes.CUSTOMER_IN_COUNTRY && countryCodeIsInvalid) {
+ const countryCodeIsInvalid =
+ formItems.country_code === undefined || formItems.country_code.length === 0;
+ if (
+ formItems.action === WooCommerceActionTypes.CUSTOMER_IN_COUNTRY &&
+ countryCodeIsInvalid
+ ) {
return false;
}
- const numberOfOrdersIsInvalid = !formItems.number_of_orders_count
- || !formItems.number_of_orders_days
- || !formItems.number_of_orders_type;
- if (formItems.action === WooCommerceActionTypes.NUMBER_OF_ORDERS && numberOfOrdersIsInvalid) {
+ const numberOfOrdersIsInvalid =
+ !formItems.number_of_orders_count ||
+ !formItems.number_of_orders_days ||
+ !formItems.number_of_orders_type;
+ if (
+ formItems.action === WooCommerceActionTypes.NUMBER_OF_ORDERS &&
+ numberOfOrdersIsInvalid
+ ) {
return false;
}
- if (formItems.action === WooCommerceActionTypes.TOTAL_SPENT
- && (!formItems.total_spent_amount || !formItems.total_spent_days || !formItems.total_spent_type)
+ if (
+ formItems.action === WooCommerceActionTypes.TOTAL_SPENT &&
+ (!formItems.total_spent_amount ||
+ !formItems.total_spent_days ||
+ !formItems.total_spent_type)
) {
return false;
}
@@ -80,20 +117,26 @@ type Props = {
filterIndex: number;
};
-export const WooCommerceFields: FunctionComponent = ({ filterIndex }) => {
+export const WooCommerceFields: FunctionComponent = ({
+ filterIndex,
+}) => {
const segment: WooCommerceFormItem = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
[filterIndex],
);
- const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch('mailpoet-dynamic-segments-form');
+ const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch(
+ 'mailpoet-dynamic-segments-form',
+ );
const productCategories: WindowProductCategories = useSelect(
(select) => select('mailpoet-dynamic-segments-form').getProductCategories(),
[],
);
const woocommerceCountries: WindowWooCommerceCountries = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getWooCommerceCountries(),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getWooCommerceCountries(),
[],
);
const products: WindowProducts = useSelect(
@@ -101,7 +144,8 @@ export const WooCommerceFields: FunctionComponent = ({ filterIndex }) =>
[],
);
const wooCurrencySymbol: string = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getWooCommerceCurrencySymbol(),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getWooCommerceCurrencySymbol(),
[],
);
const productOptions = products.map((product) => ({
@@ -123,29 +167,29 @@ export const WooCommerceFields: FunctionComponent = ({ filterIndex }) =>
useEffect(() => {
if (
- segment.number_of_orders_type === undefined
- && segment.action === WooCommerceActionTypes.NUMBER_OF_ORDERS
+ segment.number_of_orders_type === undefined &&
+ segment.action === WooCommerceActionTypes.NUMBER_OF_ORDERS
) {
updateSegmentFilter({ number_of_orders_type: '=' }, filterIndex);
}
if (
- segment.total_spent_type === undefined
- && segment.action === WooCommerceActionTypes.TOTAL_SPENT
+ segment.total_spent_type === undefined &&
+ segment.action === WooCommerceActionTypes.TOTAL_SPENT
) {
updateSegmentFilter({ total_spent_type: '>' }, filterIndex);
}
if (
- actionTypesWithDefaultTypeAny.includes(segment.action)
- && segment.operator !== AnyValueTypes.ALL
- && segment.operator !== AnyValueTypes.ANY
- && segment.operator !== AnyValueTypes.NONE
+ actionTypesWithDefaultTypeAny.includes(segment.action) &&
+ segment.operator !== AnyValueTypes.ALL &&
+ segment.operator !== AnyValueTypes.ANY &&
+ segment.operator !== AnyValueTypes.NONE
) {
updateSegmentFilter({ operator: AnyValueTypes.ANY }, filterIndex);
}
if (
- segment.action === WooCommerceActionTypes.CUSTOMER_IN_COUNTRY
- && segment.operator !== AnyValueTypes.ANY
- && segment.operator !== AnyValueTypes.NONE
+ segment.action === WooCommerceActionTypes.CUSTOMER_IN_COUNTRY &&
+ segment.operator !== AnyValueTypes.ANY &&
+ segment.operator !== AnyValueTypes.NONE
) {
updateSegmentFilter({ operator: AnyValueTypes.ANY }, filterIndex);
}
@@ -158,15 +202,20 @@ export const WooCommerceFields: FunctionComponent = ({ filterIndex }) =>
updateSegmentFilter(
- { operator: e.target.value },
- filterIndex,
- )}
+ onChange={(e): void =>
+ updateSegmentFilter({ operator: e.target.value }, filterIndex)
+ }
automationId="select-operator"
>
- {MailPoet.I18n.t('anyOf')}
- {MailPoet.I18n.t('allOf')}
- {MailPoet.I18n.t('noneOf')}
+
+ {MailPoet.I18n.t('anyOf')}
+
+
+ {MailPoet.I18n.t('allOf')}
+
+
+ {MailPoet.I18n.t('noneOf')}
+
@@ -177,19 +226,25 @@ export const WooCommerceFields: FunctionComponent = ({ filterIndex }) =>
isFullWidth
placeholder={MailPoet.I18n.t('selectWooPurchasedProduct')}
options={productOptions}
- value={filter(
- (productOption) => {
- if (segment.product_ids === undefined || segment.product_ids.length === 0) {
- return undefined;
- }
- return segment.product_ids.indexOf(productOption.value) !== -1;
- },
- productOptions,
- )}
- onChange={(options: SelectOption[]): void => updateSegmentFilter(
- { product_ids: (options || []).map((x: SelectOption) => x.value) },
- filterIndex,
- )}
+ value={filter((productOption) => {
+ if (
+ segment.product_ids === undefined ||
+ segment.product_ids.length === 0
+ ) {
+ return undefined;
+ }
+ return segment.product_ids.indexOf(productOption.value) !== -1;
+ }, productOptions)}
+ onChange={(options: SelectOption[]): void =>
+ updateSegmentFilter(
+ {
+ product_ids: (options || []).map(
+ (x: SelectOption) => x.value,
+ ),
+ },
+ filterIndex,
+ )
+ }
automationId="select-segment-products"
/>
@@ -202,15 +257,20 @@ export const WooCommerceFields: FunctionComponent = ({ filterIndex }) =>
updateSegmentFilter(
- { operator: e.target.value },
- filterIndex,
- )}
+ onChange={(e): void =>
+ updateSegmentFilter({ operator: e.target.value }, filterIndex)
+ }
automationId="select-operator"
>
- {MailPoet.I18n.t('anyOf')}
- {MailPoet.I18n.t('allOf')}
- {MailPoet.I18n.t('noneOf')}
+
+ {MailPoet.I18n.t('anyOf')}
+
+
+ {MailPoet.I18n.t('allOf')}
+
+
+ {MailPoet.I18n.t('noneOf')}
+
@@ -221,19 +281,25 @@ export const WooCommerceFields: FunctionComponent = ({ filterIndex }) =>
isFullWidth
placeholder={MailPoet.I18n.t('selectWooPurchasedCategory')}
options={categoryOptions}
- value={filter(
- (categoryOption) => {
- if (segment.category_ids === undefined || segment.category_ids.length === 0) {
- return undefined;
- }
- return segment.category_ids.indexOf(categoryOption.value) !== -1;
- },
- categoryOptions,
- )}
- onChange={(options: SelectOption[]): void => updateSegmentFilter(
- { category_ids: (options || []).map((x: SelectOption) => x.value) },
- filterIndex,
- )}
+ value={filter((categoryOption) => {
+ if (
+ segment.category_ids === undefined ||
+ segment.category_ids.length === 0
+ ) {
+ return undefined;
+ }
+ return segment.category_ids.indexOf(categoryOption.value) !== -1;
+ }, categoryOptions)}
+ onChange={(options: SelectOption[]): void =>
+ updateSegmentFilter(
+ {
+ category_ids: (options || []).map(
+ (x: SelectOption) => x.value,
+ ),
+ },
+ filterIndex,
+ )
+ }
automationId="select-segment-category"
/>
@@ -247,7 +313,11 @@ export const WooCommerceFields: FunctionComponent = ({ filterIndex }) =>
key="select"
value={segment.number_of_orders_type}
onChange={(e): void => {
- updateSegmentFilterFromEvent('number_of_orders_type', filterIndex, e);
+ updateSegmentFilterFromEvent(
+ 'number_of_orders_type',
+ filterIndex,
+ e,
+ );
}}
automationId="select-number-of-orders-type"
>
@@ -263,7 +333,11 @@ export const WooCommerceFields: FunctionComponent = ({ filterIndex }) =>
value={segment.number_of_orders_count || ''}
placeholder={MailPoet.I18n.t('wooNumberOfOrdersCount')}
onChange={(e): void => {
- updateSegmentFilterFromEvent('number_of_orders_count', filterIndex, e);
+ updateSegmentFilterFromEvent(
+ 'number_of_orders_count',
+ filterIndex,
+ e,
+ );
}}
/>
{MailPoet.I18n.t('wooNumberOfOrdersOrders')}
@@ -277,7 +351,11 @@ export const WooCommerceFields: FunctionComponent = ({ filterIndex }) =>
value={segment.number_of_orders_days || ''}
placeholder={MailPoet.I18n.t('daysPlaceholder')}
onChange={(e): void => {
- updateSegmentFilterFromEvent('number_of_orders_days', filterIndex, e);
+ updateSegmentFilterFromEvent(
+ 'number_of_orders_days',
+ filterIndex,
+ e,
+ );
}}
/>
{MailPoet.I18n.t('days')}
@@ -309,7 +387,11 @@ export const WooCommerceFields: FunctionComponent = ({ filterIndex }) =>
value={segment.total_spent_amount || ''}
placeholder={MailPoet.I18n.t('wooTotalSpentAmount')}
onChange={(e): void => {
- updateSegmentFilterFromEvent('total_spent_amount', filterIndex, e);
+ updateSegmentFilterFromEvent(
+ 'total_spent_amount',
+ filterIndex,
+ e,
+ );
}}
/>
{wooCurrencySymbol}
@@ -337,14 +419,17 @@ export const WooCommerceFields: FunctionComponent = ({ filterIndex }) =>
updateSegmentFilter(
- { operator: e.target.value },
- filterIndex,
- )}
+ onChange={(e): void =>
+ updateSegmentFilter({ operator: e.target.value }, filterIndex)
+ }
automationId="select-operator-country"
>
- {MailPoet.I18n.t('anyOf')}
- {MailPoet.I18n.t('noneOf')}
+
+ {MailPoet.I18n.t('anyOf')}
+
+
+ {MailPoet.I18n.t('noneOf')}
+
@@ -355,19 +440,20 @@ export const WooCommerceFields: FunctionComponent = ({ filterIndex }) =>
isMulti
placeholder={MailPoet.I18n.t('selectWooCountry')}
options={countryOptions}
- value={
- filter(
- (option) => {
- if (!segment.country_code) return undefined;
- return segment.country_code.indexOf(option.value) !== -1;
+ value={filter((option) => {
+ if (!segment.country_code) return undefined;
+ return segment.country_code.indexOf(option.value) !== -1;
+ }, countryOptions)}
+ onChange={(options: SelectOption[]): void =>
+ updateSegmentFilter(
+ {
+ country_code: (options || []).map(
+ (x: SelectOption) => x.value,
+ ),
},
- countryOptions,
+ filterIndex,
)
}
- onChange={(options: SelectOption[]): void => updateSegmentFilter(
- { country_code: (options || []).map((x: SelectOption) => x.value) },
- filterIndex,
- )}
automationId="select-segment-country"
/>
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_membership.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_membership.tsx
index 61d83a7938..a9774c4146 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_membership.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_membership.tsx
@@ -20,16 +20,21 @@ enum WooCommerceMembershipsActionTypes {
}
export const WooCommerceMembershipOptions = [
- { value: WooCommerceMembershipsActionTypes.MEMBER_OF, label: MailPoet.I18n.t('segmentsActiveMembership'), group: SegmentTypes.WooCommerceMembership },
+ {
+ value: WooCommerceMembershipsActionTypes.MEMBER_OF,
+ label: MailPoet.I18n.t('segmentsActiveMembership'),
+ group: SegmentTypes.WooCommerceMembership,
+ },
];
export function validateWooCommerceMembership(
formItem: WooCommerceMembershipFormItem,
): boolean {
- const isIncomplete = !formItem.plan_ids || !formItem.plan_ids.length || !formItem.operator;
+ const isIncomplete =
+ !formItem.plan_ids || !formItem.plan_ids.length || !formItem.operator;
if (
- formItem.action === WooCommerceMembershipsActionTypes.MEMBER_OF
- && isIncomplete
+ formItem.action === WooCommerceMembershipsActionTypes.MEMBER_OF &&
+ isIncomplete
) {
return false;
}
@@ -40,13 +45,18 @@ type Props = {
filterIndex: number;
};
-export function WooCommerceMembershipFields({ filterIndex }:Props):JSX.Element {
+export function WooCommerceMembershipFields({
+ filterIndex,
+}: Props): JSX.Element {
const segment: WooCommerceMembershipFormItem = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
[filterIndex],
);
- const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch('mailpoet-dynamic-segments-form');
+ const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch(
+ 'mailpoet-dynamic-segments-form',
+ );
const membershipPlans: WindowMembershipPlans = useSelect(
(select) => select('mailpoet-dynamic-segments-form').getMembershipPlans(),
@@ -59,10 +69,10 @@ export function WooCommerceMembershipFields({ filterIndex }:Props):JSX.Element {
useEffect(() => {
if (
- (segment.action === WooCommerceMembershipsActionTypes.MEMBER_OF)
- && (segment.operator !== AnyValueTypes.ANY)
- && (segment.operator !== AnyValueTypes.ALL)
- && (segment.operator !== AnyValueTypes.NONE)
+ segment.action === WooCommerceMembershipsActionTypes.MEMBER_OF &&
+ segment.operator !== AnyValueTypes.ANY &&
+ segment.operator !== AnyValueTypes.ALL &&
+ segment.operator !== AnyValueTypes.NONE
) {
updateSegmentFilter({ operator: AnyValueTypes.ANY }, filterIndex);
}
@@ -74,16 +84,16 @@ export function WooCommerceMembershipFields({ filterIndex }:Props):JSX.Element {
updateSegmentFilterFromEvent(
- 'operator',
- filterIndex,
- e,
- )}
+ onChange={(e) =>
+ updateSegmentFilterFromEvent('operator', filterIndex, e)
+ }
automationId="select-operator"
>
{MailPoet.I18n.t('anyOf')}
{MailPoet.I18n.t('allOf')}
- {MailPoet.I18n.t('noneOf')}
+
+ {MailPoet.I18n.t('noneOf')}
+
@@ -94,17 +104,16 @@ export function WooCommerceMembershipFields({ filterIndex }:Props):JSX.Element {
isFullWidth
placeholder={MailPoet.I18n.t('selectWooMembership')}
options={planOptions}
- value={filter(
- (option) => {
- if (!segment.plan_ids) return false;
- return segment.plan_ids.indexOf(option.value) !== -1;
- },
- planOptions,
- )}
- onChange={(options: SelectOption[]): void => updateSegmentFilter(
- { plan_ids: (options || []).map((x: SelectOption) => x.value) },
- filterIndex,
- )}
+ value={filter((option) => {
+ if (!segment.plan_ids) return false;
+ return segment.plan_ids.indexOf(option.value) !== -1;
+ }, planOptions)}
+ onChange={(options: SelectOption[]): void =>
+ updateSegmentFilter(
+ { plan_ids: (options || []).map((x: SelectOption) => x.value) },
+ filterIndex,
+ )
+ }
automationId="select-segment-plans"
/>
diff --git a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_subscription.tsx b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_subscription.tsx
index 20fe0a7cf7..7ee34e5342 100644
--- a/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_subscription.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/dynamic_segments_filters/woocommerce_subscription.tsx
@@ -20,16 +20,22 @@ enum WooCommerceSubscriptionsActionTypes {
}
export const WooCommerceSubscriptionOptions = [
- { value: WooCommerceSubscriptionsActionTypes.ACTIVE_SUBSCRIPTIONS, label: MailPoet.I18n.t('segmentsActiveSubscription'), group: SegmentTypes.WooCommerceSubscription },
+ {
+ value: WooCommerceSubscriptionsActionTypes.ACTIVE_SUBSCRIPTIONS,
+ label: MailPoet.I18n.t('segmentsActiveSubscription'),
+ group: SegmentTypes.WooCommerceSubscription,
+ },
];
export function validateWooCommerceSubscription(
formItem: WooCommerceSubscriptionFormItem,
): boolean {
- const isIncomplete = !formItem.product_ids || !formItem.product_ids.length || !formItem.operator;
+ const isIncomplete =
+ !formItem.product_ids || !formItem.product_ids.length || !formItem.operator;
if (
- formItem.action === WooCommerceSubscriptionsActionTypes.ACTIVE_SUBSCRIPTIONS
- && isIncomplete
+ formItem.action ===
+ WooCommerceSubscriptionsActionTypes.ACTIVE_SUBSCRIPTIONS &&
+ isIncomplete
) {
return false;
}
@@ -40,16 +46,22 @@ type Props = {
filterIndex: number;
};
-export function WooCommerceSubscriptionFields({ filterIndex }:Props) : JSX.Element {
+export function WooCommerceSubscriptionFields({
+ filterIndex,
+}: Props): JSX.Element {
const segment: WooCommerceSubscriptionFormItem = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
[filterIndex],
);
- const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch('mailpoet-dynamic-segments-form');
+ const { updateSegmentFilter, updateSegmentFilterFromEvent } = useDispatch(
+ 'mailpoet-dynamic-segments-form',
+ );
const subscriptionProducts: WindowSubscriptionProducts = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getSubscriptionProducts(),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getSubscriptionProducts(),
[],
);
const productOptions = subscriptionProducts.map((product) => ({
@@ -59,10 +71,11 @@ export function WooCommerceSubscriptionFields({ filterIndex }:Props) : JSX.Eleme
useEffect(() => {
if (
- (segment.action === WooCommerceSubscriptionsActionTypes.ACTIVE_SUBSCRIPTIONS)
- && (segment.operator !== AnyValueTypes.ANY)
- && (segment.operator !== AnyValueTypes.ALL)
- && (segment.operator !== AnyValueTypes.NONE)
+ segment.action ===
+ WooCommerceSubscriptionsActionTypes.ACTIVE_SUBSCRIPTIONS &&
+ segment.operator !== AnyValueTypes.ANY &&
+ segment.operator !== AnyValueTypes.ALL &&
+ segment.operator !== AnyValueTypes.NONE
) {
updateSegmentFilter({ operator: AnyValueTypes.ANY }, filterIndex);
}
@@ -74,16 +87,16 @@ export function WooCommerceSubscriptionFields({ filterIndex }:Props) : JSX.Eleme
updateSegmentFilterFromEvent(
- 'operator',
- filterIndex,
- e,
- )}
+ onChange={(e) =>
+ updateSegmentFilterFromEvent('operator', filterIndex, e)
+ }
automationId="select-operator"
>
{MailPoet.I18n.t('anyOf')}
{MailPoet.I18n.t('allOf')}
- {MailPoet.I18n.t('noneOf')}
+
+ {MailPoet.I18n.t('noneOf')}
+
@@ -94,17 +107,18 @@ export function WooCommerceSubscriptionFields({ filterIndex }:Props) : JSX.Eleme
isFullWidth
placeholder={MailPoet.I18n.t('selectWooSubscription')}
options={productOptions}
- value={filter(
- (option) => {
- if (!segment.product_ids) return false;
- return segment.product_ids.indexOf(option.value) !== -1;
- },
- productOptions,
- )}
- onChange={(options: SelectOption[]): void => updateSegmentFilter(
- { product_ids: (options || []).map((x: SelectOption) => x.value) },
- filterIndex,
- )}
+ value={filter((option) => {
+ if (!segment.product_ids) return false;
+ return segment.product_ids.indexOf(option.value) !== -1;
+ }, productOptions)}
+ onChange={(options: SelectOption[]): void =>
+ updateSegmentFilter(
+ {
+ product_ids: (options || []).map((x: SelectOption) => x.value),
+ },
+ filterIndex,
+ )
+ }
automationId="select-segment-products"
/>
diff --git a/mailpoet/assets/js/src/segments/dynamic/editor.tsx b/mailpoet/assets/js/src/segments/dynamic/editor.tsx
index e6f6f57be3..76c85af6cd 100644
--- a/mailpoet/assets/js/src/segments/dynamic/editor.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/editor.tsx
@@ -10,7 +10,7 @@ import { Form } from './form';
import { createStore } from './store/store';
-function Editor() : JSX.Element {
+function Editor(): JSX.Element {
const match = useRouteMatch<{ id: string }>();
createStore();
@@ -28,7 +28,12 @@ function Editor() : JSX.Element {
{MailPoet.I18n.t('formPageTitle')}
- {MailPoet.I18n.t('backToList')}
+
+ {MailPoet.I18n.t('backToList')}
+
diff --git a/mailpoet/assets/js/src/segments/dynamic/form.tsx b/mailpoet/assets/js/src/segments/dynamic/form.tsx
index a8183f3cf2..a0de79b8f0 100644
--- a/mailpoet/assets/js/src/segments/dynamic/form.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/form.tsx
@@ -29,15 +29,20 @@ interface Props {
segmentId?: number;
}
-const FiltersBefore = Hooks.applyFilters('mailpoet_dynamic_segments_form_filters_before', (): FunctionComponent => null);
-const FilterBefore = Hooks.applyFilters('mailpoet_dynamic_filters_filter_before', (): FunctionComponent => null);
-const FilterAfter = Hooks.applyFilters('mailpoet_dynamic_filters_filter_after', (): JSX.Element => (
-
-));
+const FiltersBefore = Hooks.applyFilters(
+ 'mailpoet_dynamic_segments_form_filters_before',
+ (): FunctionComponent => null,
+);
+const FilterBefore = Hooks.applyFilters(
+ 'mailpoet_dynamic_filters_filter_before',
+ (): FunctionComponent => null,
+);
+const FilterAfter = Hooks.applyFilters(
+ 'mailpoet_dynamic_filters_filter_after',
+ (): JSX.Element =>
,
+);
-export function Form({
- segmentId,
-}:Props) :JSX.Element {
+export function Form({ segmentId }: Props): JSX.Element {
const segment: Segment = useSelect(
(select) => select('mailpoet-dynamic-segments-form').getSegment(),
[],
@@ -49,7 +54,10 @@ export function Form({
);
const filterRows: FilterRow[] = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').findFiltersValueForSegment(segment),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').findFiltersValueForSegment(
+ segment,
+ ),
[segment],
);
@@ -63,25 +71,28 @@ export function Form({
[],
);
- const { updateSegment, updateSegmentFilter, handleSave } = useDispatch('mailpoet-dynamic-segments-form');
+ const { updateSegment, updateSegmentFilter, handleSave } = useDispatch(
+ 'mailpoet-dynamic-segments-form',
+ );
const [premiumBannerVisible, setPremiumBannerVisible] = useState(false);
const showPremiumBanner = (): void => {
setPremiumBannerVisible(true);
};
- const addConditionAction = Hooks.applyFilters('mailpoet_dynamic_segments_form_add_condition_action', showPremiumBanner);
+ const addConditionAction = Hooks.applyFilters(
+ 'mailpoet_dynamic_segments_form_add_condition_action',
+ showPremiumBanner,
+ );
return (
- {(errors.length > 0 && (
+ {errors.length > 0 && (
({ message: error }))} />
- ))}
+ )}
@@ -111,8 +120,8 @@ export function Form({
name="description"
id="field_description"
value={segment.description}
- onChange={
- (e): void => updateSegment({ description: e.target.value })
+ onChange={(e): void =>
+ updateSegment({ description: e.target.value })
}
/>
@@ -124,33 +133,40 @@ export function Form({
- {Array.isArray(filterRows) && filterRows.map((filterRow, index) => (
-
-
-
-
- {
- updateSegmentFilter({
- segmentType: newValue.group,
- action: newValue.value,
- }, index);
- }}
- automationId="select-segment-action"
- isFullWidth
- />
-
- {filterRow.index !== undefined && (
-
- )}
-
-
-
- ))}
+ {Array.isArray(filterRows) &&
+ filterRows.map((filterRow, index) => (
+
+
+
+
+ {
+ updateSegmentFilter(
+ {
+ segmentType: newValue.group,
+ action: newValue.value,
+ },
+ index,
+ );
+ }}
+ automationId="select-segment-action"
+ isFullWidth
+ />
+
+ {filterRow.index !== undefined && (
+
+ )}
+
+
+
+ ))}
{MailPoet.I18n.t('save')}
diff --git a/mailpoet/assets/js/src/segments/dynamic/form_filter_fields.tsx b/mailpoet/assets/js/src/segments/dynamic/form_filter_fields.tsx
index 728637feb7..d513638bf7 100644
--- a/mailpoet/assets/js/src/segments/dynamic/form_filter_fields.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/form_filter_fields.tsx
@@ -1,9 +1,6 @@
import { useSelect } from '@wordpress/data';
-import {
- SegmentTypes,
- WordpressRoleFormItem,
-} from './types';
+import { SegmentTypes, WordpressRoleFormItem } from './types';
import { EmailFields } from './dynamic_segments_filters/email';
import { SubscriberFields } from './dynamic_segments_filters/subscriber';
@@ -23,16 +20,16 @@ type Props = {
filterIndex: number;
};
-export function FormFilterFields({ filterIndex }:Props) : JSX.Element {
+export function FormFilterFields({ filterIndex }: Props): JSX.Element {
const filter: WordpressRoleFormItem = useSelect(
- (select) => select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
+ (select) =>
+ select('mailpoet-dynamic-segments-form').getSegmentFilter(filterIndex),
[filterIndex],
);
- if (filter === undefined || filterFieldsMap[filter.segmentType] === undefined) return null;
+ if (filter === undefined || filterFieldsMap[filter.segmentType] === undefined)
+ return null;
const Component = filterFieldsMap[filter.segmentType];
- return (
-
- );
+ return ;
}
diff --git a/mailpoet/assets/js/src/segments/dynamic/list.jsx b/mailpoet/assets/js/src/segments/dynamic/list.jsx
index d865d7c485..7e866b4b4c 100644
--- a/mailpoet/assets/js/src/segments/dynamic/list.jsx
+++ b/mailpoet/assets/js/src/segments/dynamic/list.jsx
@@ -40,13 +40,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneDynamicSegmentTrashed')
- );
+ message = MailPoet.I18n.t('oneDynamicSegmentTrashed');
} else {
- message = (
- MailPoet.I18n.t('multipleDynamicSegmentsTrashed')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleDynamicSegmentsTrashed').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -55,13 +54,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneDynamicSegmentDeleted')
- );
+ message = MailPoet.I18n.t('oneDynamicSegmentDeleted');
} else {
- message = (
- MailPoet.I18n.t('multipleDynamicSegmentsDeleted')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleDynamicSegmentsDeleted').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -70,13 +68,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneDynamicSegmentRestored')
- );
+ message = MailPoet.I18n.t('oneDynamicSegmentRestored');
} else {
- message = (
- MailPoet.I18n.t('multipleDynamicSegmentsRestored')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleDynamicSegmentsRestored').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -87,32 +84,22 @@ const itemActions = [
name: 'edit',
className: 'mailpoet-hide-on-mobile',
link: (item) => (
-
- {MailPoet.I18n.t('edit')}
-
- ),
- display: (item) => (
- !item.is_plugin_missing
+ {MailPoet.I18n.t('edit')}
),
+ display: (item) => !item.is_plugin_missing,
},
{
name: 'edit_disabled',
className: 'mailpoet-hide-on-mobile mailpoet-disabled',
link: (item) => (
-
- {MailPoet.I18n.t('edit')}
-
- ),
- display: (item) => (
- item.is_plugin_missing
+ {MailPoet.I18n.t('edit')}
),
+ display: (item) => item.is_plugin_missing,
},
{
name: 'view_subscribers',
link: (item) => (
-
- {MailPoet.I18n.t('viewSubscribers')}
-
+ {MailPoet.I18n.t('viewSubscribers')}
),
},
{
@@ -132,48 +119,65 @@ const bulkActions = [
function renderItem(item, actions) {
return (
<>
-
-
- { item.name }
-
- { actions }
+
+ {item.name}
+ {actions}
- { item.description }
+ {item.description}
- { item.is_plugin_missing
- ? (
-
- { item.missing_plugin_message
- && item.missing_plugin_message.message && item.missing_plugin_message.link
- ? (
- ReactStringReplace(
- item.missing_plugin_message.message,
- /\[link](.*?)\[\/link]/g,
- (match) => (
- {match}
- )
- )
+ {item.is_plugin_missing ? (
+
+ {item.missing_plugin_message &&
+ item.missing_plugin_message.message &&
+ item.missing_plugin_message.link
+ ? ReactStringReplace(
+ item.missing_plugin_message.message,
+ /\[link](.*?)\[\/link]/g,
+ (match) => (
+
+ {match}
+
+ ),
)
- : (
- item.missing_plugin_message
- )}
+ : item.missing_plugin_message}
+
+ ) : (
+ <>
+
+ {parseInt(item.count_all, 10).toLocaleString()}
- )
- : (
- <>
-
- { parseInt(item.count_all, 10).toLocaleString() }
-
-
- { parseInt(item.count_subscribed, 10).toLocaleString() }
-
- >
- )}
-
- { MailPoet.Date.short(item.created_at) }
+
+ {parseInt(item.count_subscribed, 10).toLocaleString()}
+
+ >
+ )}
+
+ {MailPoet.Date.short(item.created_at)}
- { MailPoet.Date.time(item.created_at) }
+ {MailPoet.Date.time(item.created_at)}
>
);
@@ -198,13 +202,8 @@ function DynamicSegmentList(props) {
bulk_actions={bulkActions}
/>
-
- {MailPoet.I18n.t('segmentsTip')}
- :
-
- {' '}
- {MailPoet.I18n.t('segmentsTipText')}
- {' '}
+ {MailPoet.I18n.t('segmentsTip')}: {' '}
+ {MailPoet.I18n.t('segmentsTipText')}{' '}
{
const message = MailPoet.I18n.t('premiumFeatureMultipleConditions');
return (
- {ReactStringReplace(
- message,
- /\[link](.*?)\[\/link]/g,
- (match) => (
- {match}
- ),
- )}
+ {ReactStringReplace(message, /\[link](.*?)\[\/link]/g, (match) => (
+
+ {match}
+
+ ))}
);
};
diff --git a/mailpoet/assets/js/src/segments/dynamic/privacy_protection_notice.tsx b/mailpoet/assets/js/src/segments/dynamic/privacy_protection_notice.tsx
index 610a984b58..b7ab80e694 100644
--- a/mailpoet/assets/js/src/segments/dynamic/privacy_protection_notice.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/privacy_protection_notice.tsx
@@ -3,7 +3,7 @@ import { useSelect } from '@wordpress/data';
import { EmailActionTypes, Segment } from './types';
-function PrivacyProtectionNotice():JSX.Element {
+function PrivacyProtectionNotice(): JSX.Element {
const segment: Segment = useSelect(
(select) => select('mailpoet-dynamic-segments-form').getSegment(),
[],
@@ -24,15 +24,13 @@ function PrivacyProtectionNotice():JSX.Element {
});
if (!containsOpensFilter) {
- return (
-
- );
+ return ;
}
return (
- {(MailPoet.I18n.t('privacyProtectionNotice'))}
+ {MailPoet.I18n.t('privacyProtectionNotice')}
);
diff --git a/mailpoet/assets/js/src/segments/dynamic/store/actions.ts b/mailpoet/assets/js/src/segments/dynamic/store/actions.ts
index c053735a16..35a5e9501a 100644
--- a/mailpoet/assets/js/src/segments/dynamic/store/actions.ts
+++ b/mailpoet/assets/js/src/segments/dynamic/store/actions.ts
@@ -33,8 +33,10 @@ export function updateSegment(data: AnyFormItem): SetSegmentActionType {
};
}
-export function updateSegmentFilter(filter: AnyFormItem, filterIndex: number)
- : SetSegmentFilerActionType {
+export function updateSegmentFilter(
+ filter: AnyFormItem,
+ filterIndex: number,
+): SetSegmentFilerActionType {
return {
type: Actions.UPDATE_SEGMENT_FILTER,
filter,
@@ -68,7 +70,9 @@ export function updateSegmentFilterFromEvent(
};
}
-export function updateSubscriberCount(data: SubscriberCount): SetSubscriberCountActionType {
+export function updateSubscriberCount(
+ data: SubscriberCount,
+): SetSubscriberCountActionType {
return {
type: Actions.UPDATE_SUBSCRIBER_COUNT,
subscriberCount: data,
@@ -84,10 +88,10 @@ export function* pageLoaded(segmentId?: number): Generator<{
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore -- I don't know how to configure typescript to understand this
- const { res, success } = (yield ({
+ const { res, success } = yield {
type: 'LOAD_SEGMENT',
segmentId,
- }));
+ };
if (!success || res.is_plugin_missing) {
window.location.href = 'admin.php?page=mailpoet-segments#/segments';
}
@@ -116,10 +120,10 @@ export function* handleSave(segmentId?: number): Generator<{
yield setErrors([]);
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore -- I don't know how to configure typescript to understand this
- const { error, success } = (yield ({
+ const { error, success } = yield {
type: 'SAVE_SEGMENT',
segment,
- }));
+ };
if (success) {
window.location.href = 'admin.php?page=mailpoet-segments#/segments';
diff --git a/mailpoet/assets/js/src/segments/dynamic/store/controls.ts b/mailpoet/assets/js/src/segments/dynamic/store/controls.ts
index 3c6093231a..9e1a98e62b 100644
--- a/mailpoet/assets/js/src/segments/dynamic/store/controls.ts
+++ b/mailpoet/assets/js/src/segments/dynamic/store/controls.ts
@@ -7,18 +7,28 @@ import { isErrorResponse } from '../../../ajax';
function convertSavedData(data: Record): AnyFormItem {
let converted: AnyFormItem = JSON.parse(JSON.stringify(data));
// for compatibility with older data
- if (has('link_id', data)) converted = assign(converted, { link_id: data.link_id.toString() });
- if (has('newsletter_id', data)) converted = assign(converted, { newsletter_id: data.newsletter_id.toString() });
- if (has('product_id', data)) converted = assign(converted, { product_id: data.product_id.toString() });
- if (has('category_id', data)) converted = assign(converted, { category_id: data.category_id.toString() });
+ if (has('link_id', data))
+ converted = assign(converted, { link_id: data.link_id.toString() });
+ if (has('newsletter_id', data))
+ converted = assign(converted, {
+ newsletter_id: data.newsletter_id.toString(),
+ });
+ if (has('product_id', data))
+ converted = assign(converted, { product_id: data.product_id.toString() });
+ if (has('category_id', data))
+ converted = assign(converted, { category_id: data.category_id.toString() });
return converted;
}
// eslint-disable-next-line @typescript-eslint/naming-convention
-export async function LOAD_SEGMENT({ segmentId }: { segmentId: number }): Promise<{
- success: boolean,
- res?: AnyFormItem,
- error?: string[],
+export async function LOAD_SEGMENT({
+ segmentId,
+}: {
+ segmentId: number;
+}): Promise<{
+ success: boolean;
+ res?: AnyFormItem;
+ error?: string[];
}> {
try {
const res = await MailPoet.Ajax.post({
@@ -34,15 +44,21 @@ export async function LOAD_SEGMENT({ segmentId }: { segmentId: number }): Promis
res: convertSavedData(res.data as Record),
};
} catch (res) {
- const error = isErrorResponse(res) ? res.errors.map((e) => e.message) : null;
+ const error = isErrorResponse(res)
+ ? res.errors.map((e) => e.message)
+ : null;
return { success: false, error, res };
}
}
// eslint-disable-next-line @typescript-eslint/naming-convention
-export async function SAVE_SEGMENT({ segment }: { segment: AnyFormItem }): Promise<{
- success: boolean,
- error?: string[],
+export async function SAVE_SEGMENT({
+ segment,
+}: {
+ segment: AnyFormItem;
+}): Promise<{
+ success: boolean;
+ error?: string[];
}> {
try {
await MailPoet.Ajax.post({
@@ -55,7 +71,9 @@ export async function SAVE_SEGMENT({ segment }: { segment: AnyFormItem }): Promi
success: true,
};
} catch (res) {
- const error = isErrorResponse(res) ? res.errors.map((e) => e.message) : null;
+ const error = isErrorResponse(res)
+ ? res.errors.map((e) => e.message)
+ : null;
return { success: false, error };
}
}
diff --git a/mailpoet/assets/js/src/segments/dynamic/store/reducer.ts b/mailpoet/assets/js/src/segments/dynamic/store/reducer.ts
index 34f5709404..b9beed1721 100644
--- a/mailpoet/assets/js/src/segments/dynamic/store/reducer.ts
+++ b/mailpoet/assets/js/src/segments/dynamic/store/reducer.ts
@@ -23,7 +23,10 @@ function setErrors(state: StateType, action: SetErrorsActionType): StateType {
};
}
-function updateSegment(state: StateType, action: SetSegmentActionType): StateType {
+function updateSegment(
+ state: StateType,
+ action: SetSegmentActionType,
+): StateType {
const oldSegment = state.segment;
return {
...state,
@@ -31,16 +34,25 @@ function updateSegment(state: StateType, action: SetSegmentActionType): StateTyp
};
}
-function updateSegmentFilter(state: StateType, action: SetSegmentFilerActionType): StateType {
+function updateSegmentFilter(
+ state: StateType,
+ action: SetSegmentFilerActionType,
+): StateType {
const segment = { ...state.segment };
- segment.filters[action.filterIndex] = assign(segment.filters[action.filterIndex], action.filter);
+ segment.filters[action.filterIndex] = assign(
+ segment.filters[action.filterIndex],
+ action.filter,
+ );
return {
...state,
segment,
};
}
-function updateSubscriberCount(state: StateType, action: SetSubscriberCountActionType): StateType {
+function updateSubscriberCount(
+ state: StateType,
+ action: SetSubscriberCountActionType,
+): StateType {
const oldCount = state.subscriberCount;
return {
...state,
@@ -48,19 +60,27 @@ function updateSubscriberCount(state: StateType, action: SetSubscriberCountActio
};
}
-export const createReducer = (defaultState: StateType) => (
- state: StateType = defaultState, // eslint-disable-line @typescript-eslint/default-param-last
- action: ActionType,
-): StateType => {
- switch (action.type) {
- case Actions.SET_SEGMENT: return setSegment(state, action as SetSegmentActionType);
- case Actions.SET_ERRORS: return setErrors(state, action as SetErrorsActionType);
- case Actions.UPDATE_SEGMENT: return updateSegment(state, action as SetSegmentActionType);
- case Actions.UPDATE_SEGMENT_FILTER:
- return updateSegmentFilter(state, action as SetSegmentFilerActionType);
- case Actions.UPDATE_SUBSCRIBER_COUNT:
- return updateSubscriberCount(state, action as SetSubscriberCountActionType);
- default:
- return state;
- }
-};
+export const createReducer =
+ (defaultState: StateType) =>
+ (
+ state: StateType = defaultState, // eslint-disable-line @typescript-eslint/default-param-last
+ action: ActionType,
+ ): StateType => {
+ switch (action.type) {
+ case Actions.SET_SEGMENT:
+ return setSegment(state, action as SetSegmentActionType);
+ case Actions.SET_ERRORS:
+ return setErrors(state, action as SetErrorsActionType);
+ case Actions.UPDATE_SEGMENT:
+ return updateSegment(state, action as SetSegmentActionType);
+ case Actions.UPDATE_SEGMENT_FILTER:
+ return updateSegmentFilter(state, action as SetSegmentFilerActionType);
+ case Actions.UPDATE_SUBSCRIBER_COUNT:
+ return updateSubscriberCount(
+ state,
+ action as SetSubscriberCountActionType,
+ );
+ default:
+ return state;
+ }
+ };
diff --git a/mailpoet/assets/js/src/segments/dynamic/store/selectors.ts b/mailpoet/assets/js/src/segments/dynamic/store/selectors.ts
index a2b0cd1709..69d8e4f2a1 100644
--- a/mailpoet/assets/js/src/segments/dynamic/store/selectors.ts
+++ b/mailpoet/assets/js/src/segments/dynamic/store/selectors.ts
@@ -17,46 +17,37 @@ import {
WindowWooCommerceCountries,
} from '../types';
-export const getProducts = (state: StateType): WindowProducts => (
- state.products
-);
-export const getMembershipPlans = (state: StateType): WindowMembershipPlans => (
- state.membershipPlans
-);
-export const getSubscriptionProducts = (state: StateType): WindowSubscriptionProducts => (
- state.subscriptionProducts
-);
-export const getWordpressRoles = (state: StateType): WindowEditableRoles => (
- state.wordpressRoles
-);
-export const getProductCategories = (state: StateType): WindowProductCategories => (
- state.productCategories
-);
-export const getNewslettersList = (state: StateType): WindowNewslettersList => (
- state.newslettersList
-);
-export const canUseWooSubscriptions = (state: StateType): boolean => (
- state.canUseWooSubscriptions
-);
-export const getWooCommerceCurrencySymbol = (state: StateType): string => (
- state.wooCurrencySymbol
-);
-export const getWooCommerceCountries = (state: StateType): WindowWooCommerceCountries => (
- state.wooCountries
-);
-export const getCustomFieldsList = (state: StateType): WindowCustomFields => (
- state.customFieldsList
-);
-export const getSegment = (state: StateType): Segment => (
- state.segment
-);
-export const getStaticSegmentsList = (state: StateType): StaticSegment[] => (
- state.staticSegmentsList
-);
-export const getSubscriberCount = (state: StateType): SubscriberCount => (
- state.subscriberCount
-);
-export const getSegmentFilter = (state: StateType, index: number): AnyFormItem | undefined => {
+export const getProducts = (state: StateType): WindowProducts => state.products;
+export const getMembershipPlans = (state: StateType): WindowMembershipPlans =>
+ state.membershipPlans;
+export const getSubscriptionProducts = (
+ state: StateType,
+): WindowSubscriptionProducts => state.subscriptionProducts;
+export const getWordpressRoles = (state: StateType): WindowEditableRoles =>
+ state.wordpressRoles;
+export const getProductCategories = (
+ state: StateType,
+): WindowProductCategories => state.productCategories;
+export const getNewslettersList = (state: StateType): WindowNewslettersList =>
+ state.newslettersList;
+export const canUseWooSubscriptions = (state: StateType): boolean =>
+ state.canUseWooSubscriptions;
+export const getWooCommerceCurrencySymbol = (state: StateType): string =>
+ state.wooCurrencySymbol;
+export const getWooCommerceCountries = (
+ state: StateType,
+): WindowWooCommerceCountries => state.wooCountries;
+export const getCustomFieldsList = (state: StateType): WindowCustomFields =>
+ state.customFieldsList;
+export const getSegment = (state: StateType): Segment => state.segment;
+export const getStaticSegmentsList = (state: StateType): StaticSegment[] =>
+ state.staticSegmentsList;
+export const getSubscriberCount = (state: StateType): SubscriberCount =>
+ state.subscriberCount;
+export const getSegmentFilter = (
+ state: StateType,
+ index: number,
+): AnyFormItem | undefined => {
let found: AnyFormItem | undefined;
if (!Array.isArray(state.segment.filters)) {
return found;
@@ -65,12 +56,9 @@ export const getSegmentFilter = (state: StateType, index: number): AnyFormItem |
found = { ...state.segment.filters[index] };
return found;
};
-export const getErrors = (state: StateType): string[] => (
- state.errors
-);
-export const getAvailableFilters = (state: StateType): GroupFilterValue[] => (
- state.allAvailableFilters
-);
+export const getErrors = (state: StateType): string[] => state.errors;
+export const getAvailableFilters = (state: StateType): GroupFilterValue[] =>
+ state.allAvailableFilters;
export const findFiltersValueForSegment = (
state: StateType,
itemSearch: Segment,
@@ -80,7 +68,10 @@ export const findFiltersValueForSegment = (
itemSearch.filters.forEach((formItem: AnyFormItem, index) => {
state.allAvailableFilters.forEach((filter: GroupFilterValue) => {
filter.options.forEach((option: FilterValue) => {
- if (option.group === formItem.segmentType && option.value === formItem.action) {
+ if (
+ option.group === formItem.segmentType &&
+ option.value === formItem.action
+ ) {
found.push({
filterValue: option,
index,
diff --git a/mailpoet/assets/js/src/segments/dynamic/subscribers_calculator.ts b/mailpoet/assets/js/src/segments/dynamic/subscribers_calculator.ts
index 5a86e9d1e7..101fb423f0 100644
--- a/mailpoet/assets/js/src/segments/dynamic/subscribers_calculator.ts
+++ b/mailpoet/assets/js/src/segments/dynamic/subscribers_calculator.ts
@@ -1,11 +1,7 @@
import MailPoet from 'mailpoet';
import _ from 'lodash';
-import {
- AnyFormItem,
- Segment,
- SegmentConnectTypes,
-} from './types';
+import { AnyFormItem, Segment, SegmentConnectTypes } from './types';
export interface Result {
count: number;
@@ -42,15 +38,14 @@ function loadCount(formItem: Segment): PromiseLike {
action: 'getCount',
data: formItem,
timeout: 20000, // 20 seconds
- })
- .then((response) => {
- const { data } = response;
- previousResult = {
- count: data.count,
- errors: undefined,
- };
- return previousResult;
- });
+ }).then((response) => {
+ const { data } = response;
+ previousResult = {
+ count: data.count,
+ errors: undefined,
+ };
+ return previousResult;
+ });
}
export { loadCount };
diff --git a/mailpoet/assets/js/src/segments/dynamic/subscribers_counter.tsx b/mailpoet/assets/js/src/segments/dynamic/subscribers_counter.tsx
index 52954f2335..8cb1012f8a 100644
--- a/mailpoet/assets/js/src/segments/dynamic/subscribers_counter.tsx
+++ b/mailpoet/assets/js/src/segments/dynamic/subscribers_counter.tsx
@@ -5,12 +5,9 @@ import { debounce } from 'lodash';
import { isFormValid } from './validator';
import { loadCount } from './subscribers_calculator';
-import {
- Segment,
- SubscriberCount,
-} from './types';
+import { Segment, SubscriberCount } from './types';
-function SubscribersCounter() : JSX.Element {
+function SubscribersCounter(): JSX.Element {
const segment: Segment = useSelect(
(select) => select('mailpoet-dynamic-segments-form').getSegment(),
[],
@@ -21,7 +18,9 @@ function SubscribersCounter() : JSX.Element {
[],
);
- const { updateSubscriberCount } = useDispatch('mailpoet-dynamic-segments-form');
+ const { updateSubscriberCount } = useDispatch(
+ 'mailpoet-dynamic-segments-form',
+ );
const serializedSegment = JSON.stringify(segment);
const latestRequestIdRef = useRef(1);
@@ -41,32 +40,35 @@ function SubscribersCounter() : JSX.Element {
const requestId = latestRequestIdRef.current;
isRequestInFlight.current = true;
- loadCount(loadItem).then((response) => {
- isRequestInFlight.current = false;
- if (deferredRequestRef.current) {
- load(deferredRequestRef.current);
- return;
- }
- if (requestId !== latestRequestIdRef.current) {
- // Don't do anything with the response because a newer request has been initiated
- return;
- }
- const finished = {} as SubscriberCount;
- finished.loading = false;
- if (response) {
- finished.count = response.count;
- finished.errors = response.errors;
- }
- updateSubscriberCount(finished);
- }, (errorResponse) => {
- isRequestInFlight.current = false;
- const finished = {} as SubscriberCount;
- const errors = errorResponse.errors.map((error) => error.message);
- finished.loading = false;
- finished.count = undefined;
- finished.errors = errors;
- updateSubscriberCount(finished);
- });
+ loadCount(loadItem).then(
+ (response) => {
+ isRequestInFlight.current = false;
+ if (deferredRequestRef.current) {
+ load(deferredRequestRef.current);
+ return;
+ }
+ if (requestId !== latestRequestIdRef.current) {
+ // Don't do anything with the response because a newer request has been initiated
+ return;
+ }
+ const finished = {} as SubscriberCount;
+ finished.loading = false;
+ if (response) {
+ finished.count = response.count;
+ finished.errors = response.errors;
+ }
+ updateSubscriberCount(finished);
+ },
+ (errorResponse) => {
+ isRequestInFlight.current = false;
+ const finished = {} as SubscriberCount;
+ const errors = errorResponse.errors.map((error) => error.message);
+ finished.loading = false;
+ finished.count = undefined;
+ finished.errors = errors;
+ updateSubscriberCount(finished);
+ },
+ );
}
const debouncedLoadRef = useRef(debounce(load, 2000, { trailing: true }));
@@ -92,8 +94,7 @@ function SubscribersCounter() : JSX.Element {
return (
- {MailPoet.I18n.t('dynamicSegmentSizeCalculatingTimeout')}
- {' '}
+ {MailPoet.I18n.t('dynamicSegmentSizeCalculatingTimeout')}{' '}
- );
+ return ;
}
if (subscribersCount.loading) {
@@ -127,7 +126,10 @@ function SubscribersCounter() : JSX.Element {
return (
- {(MailPoet.I18n.t('dynamicSegmentSize')).replace('%1$d', subscribersCount.count.toLocaleString())}
+ {MailPoet.I18n.t('dynamicSegmentSize').replace(
+ '%1$d',
+ subscribersCount.count.toLocaleString(),
+ )}
);
diff --git a/mailpoet/assets/js/src/segments/dynamic/types.ts b/mailpoet/assets/js/src/segments/dynamic/types.ts
index 9d90858531..be9447c46f 100644
--- a/mailpoet/assets/js/src/segments/dynamic/types.ts
+++ b/mailpoet/assets/js/src/segments/dynamic/types.ts
@@ -111,10 +111,10 @@ export type Segment = {
};
export type AnyFormItem =
- WordpressRoleFormItem |
- WooCommerceFormItem |
- WooCommerceSubscriptionFormItem |
- EmailFormItem;
+ | WordpressRoleFormItem
+ | WooCommerceFormItem
+ | WooCommerceSubscriptionFormItem
+ | EmailFormItem;
export interface SubscriberCount {
count?: number;
@@ -203,11 +203,11 @@ export interface StateType {
wooCurrencySymbol: string;
wooCountries: WindowWooCommerceCountries;
customFieldsList: WindowCustomFields;
- segment: Segment,
- subscriberCount: SubscriberCount,
- errors: string[],
- allAvailableFilters: GroupFilterValue[],
- staticSegmentsList: StaticSegment[],
+ segment: Segment;
+ subscriberCount: SubscriberCount;
+ errors: string[];
+ allAvailableFilters: GroupFilterValue[];
+ staticSegmentsList: StaticSegment[];
}
export enum Actions {
diff --git a/mailpoet/assets/js/src/segments/form.jsx b/mailpoet/assets/js/src/segments/form.jsx
index 462bc30017..07975f807e 100644
--- a/mailpoet/assets/js/src/segments/form.jsx
+++ b/mailpoet/assets/js/src/segments/form.jsx
@@ -39,7 +39,12 @@ function SegmentForm(props) {
{MailPoet.I18n.t('segment')}
- {MailPoet.I18n.t('backToList')}
+
+ {MailPoet.I18n.t('backToList')}
+
diff --git a/mailpoet/assets/js/src/segments/heading.jsx b/mailpoet/assets/js/src/segments/heading.jsx
index f05947e5f1..4417d1fcb3 100644
--- a/mailpoet/assets/js/src/segments/heading.jsx
+++ b/mailpoet/assets/js/src/segments/heading.jsx
@@ -16,7 +16,11 @@ function ListHeading() {
{plusIcon}
{MailPoet.I18n.t('new')}
-
+
{plusIcon}
{MailPoet.I18n.t('newSegment')}
diff --git a/mailpoet/assets/js/src/segments/list.jsx b/mailpoet/assets/js/src/segments/list.jsx
index 80fa4d9552..9f541787ad 100644
--- a/mailpoet/assets/js/src/segments/list.jsx
+++ b/mailpoet/assets/js/src/segments/list.jsx
@@ -8,8 +8,10 @@ import Listing from 'listing/listing.jsx';
import { ListingsEngagementScore } from '../subscribers/listings_engagement_score';
const isWPUsersSegment = (segment) => segment.type === 'wp_users';
-const isWooCommerceCustomersSegment = (segment) => segment.type === 'woocommerce_users';
-const isSpecialSegment = (segmt) => isWPUsersSegment(segmt) || isWooCommerceCustomersSegment(segmt);
+const isWooCommerceCustomersSegment = (segment) =>
+ segment.type === 'woocommerce_users';
+const isSpecialSegment = (segmt) =>
+ isWPUsersSegment(segmt) || isWooCommerceCustomersSegment(segmt);
const mailpoetTrackingEnabled = MailPoet.trackingConfig.emailTrackingEnabled;
const columns = [
@@ -65,13 +67,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneSegmentTrashed')
- );
+ message = MailPoet.I18n.t('oneSegmentTrashed');
} else {
- message = (
- MailPoet.I18n.t('multipleSegmentsTrashed')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleSegmentsTrashed').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -80,13 +81,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneSegmentDeleted')
- );
+ message = MailPoet.I18n.t('oneSegmentDeleted');
} else {
- message = (
- MailPoet.I18n.t('multipleSegmentsDeleted')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleSegmentsDeleted').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -95,13 +95,12 @@ const messages = {
let message = null;
if (count === 1) {
- message = (
- MailPoet.I18n.t('oneSegmentRestored')
- );
+ message = MailPoet.I18n.t('oneSegmentRestored');
} else {
- message = (
- MailPoet.I18n.t('multipleSegmentsRestored')
- ).replace('%1$d', count.toLocaleString());
+ message = MailPoet.I18n.t('multipleSegmentsRestored').replace(
+ '%1$d',
+ count.toLocaleString(),
+ );
}
MailPoet.Notice.success(message);
},
@@ -125,9 +124,7 @@ const itemActions = [
name: 'edit',
className: 'mailpoet-hide-on-mobile',
link: function link(item) {
- return (
- {MailPoet.I18n.t('edit')}
- );
+ return {MailPoet.I18n.t('edit')};
},
display: function display(segment) {
return !isSpecialSegment(segment);
@@ -137,24 +134,30 @@ const itemActions = [
name: 'duplicate_segment',
className: 'mailpoet-hide-on-mobile',
label: MailPoet.I18n.t('duplicate'),
- onClick: (item, refresh) => MailPoet.Ajax.post({
- api_version: window.mailpoet_api_version,
- endpoint: 'segments',
- action: 'duplicate',
- data: {
- id: item.id,
- },
- }).done((response) => {
- MailPoet.Notice.success(
- MailPoet.I18n.t('listDuplicated').replace('%1$s', response.data.name)
- );
- refresh();
- }).fail((response) => {
- MailPoet.Notice.error(
- response.errors.map((error) => error.message),
- { scroll: true }
- );
- }),
+ onClick: (item, refresh) =>
+ MailPoet.Ajax.post({
+ api_version: window.mailpoet_api_version,
+ endpoint: 'segments',
+ action: 'duplicate',
+ data: {
+ id: item.id,
+ },
+ })
+ .done((response) => {
+ MailPoet.Notice.success(
+ MailPoet.I18n.t('listDuplicated').replace(
+ '%1$s',
+ response.data.name,
+ ),
+ );
+ refresh();
+ })
+ .fail((response) => {
+ MailPoet.Notice.error(
+ response.errors.map((error) => error.message),
+ { scroll: true },
+ );
+ }),
display: function display(segment) {
return !isSpecialSegment(segment);
},
@@ -189,33 +192,45 @@ const itemActions = [
data: {
type: item.type,
},
- }).done(() => {
- let message = MailPoet.I18n.t('listSynchronized').replace('%1$s', item.name);
- if (item.type === 'woocommerce_users') {
- message = MailPoet.I18n.t('listSynchronizationWasScheduled').replace('%1$s', item.name);
- }
- MailPoet.Modal.loading(false);
- MailPoet.Notice.success(message);
- refresh();
- }).fail((response) => {
- MailPoet.Modal.loading(false);
- if (response.errors.length > 0) {
- MailPoet.Notice.error(
- response.errors.map((error) => error.message),
- { scroll: true }
+ })
+ .done(() => {
+ let message = MailPoet.I18n.t('listSynchronized').replace(
+ '%1$s',
+ item.name,
);
- }
- });
+ if (item.type === 'woocommerce_users') {
+ message = MailPoet.I18n.t(
+ 'listSynchronizationWasScheduled',
+ ).replace('%1$s', item.name);
+ }
+ MailPoet.Modal.loading(false);
+ MailPoet.Notice.success(message);
+ refresh();
+ })
+ .fail((response) => {
+ MailPoet.Modal.loading(false);
+ if (response.errors.length > 0) {
+ MailPoet.Notice.error(
+ response.errors.map((error) => error.message),
+ { scroll: true },
+ );
+ }
+ });
},
display: function display(segment) {
- return isWPUsersSegment(segment) || isWooCommerceCustomersSegment(segment);
+ return (
+ isWPUsersSegment(segment) || isWooCommerceCustomersSegment(segment)
+ );
},
},
{
name: 'view_subscribers',
link: function link(item) {
return (
-
+
{MailPoet.I18n.t('viewSubscribers')}
);
@@ -235,7 +250,7 @@ class SegmentList extends Component {
const rowClasses = classNames(
'manage-column',
'column-primary',
- 'has-row-actions'
+ 'has-row-actions',
);
const subscribed = Number(segment.subscribers_count.subscribed || 0);
@@ -250,30 +265,33 @@ class SegmentList extends Component {
// the WP users and WooCommerce customers segments
// are not editable so just display their names
segmentName = (
- { segment.name }
+ {segment.name}
);
} else {
segmentName = (
-
- { segment.name }
+
+ {segment.name}
);
}
return (
-
- { segmentName }
- { actions }
+
+ {segmentName}
+ {actions}
- { segment.description }
+ {segment.description}
- { (mailpoetTrackingEnabled) ? (
-
+ {mailpoetTrackingEnabled ? (
+
- ) : null }
-
- { subscribed.toLocaleString() }
+ ) : null}
+
+ {subscribed.toLocaleString()}
-
- { unconfirmed.toLocaleString() }
+
+ {unconfirmed.toLocaleString()}
-
- { unsubscribed.toLocaleString() }
+
+ {unsubscribed.toLocaleString()}
-
- { inactive.toLocaleString() }
+
+ {inactive.toLocaleString()}
-
- { bounced.toLocaleString() }
+
+ {bounced.toLocaleString()}
-
- { MailPoet.Date.short(segment.created_at) }
+
+ {MailPoet.Date.short(segment.created_at)}
- { MailPoet.Date.time(segment.created_at) }
+ {MailPoet.Date.time(segment.created_at)}
);
diff --git a/mailpoet/assets/js/src/segments/segments.jsx b/mailpoet/assets/js/src/segments/segments.jsx
index 8ab2bcf75c..84b021105f 100644
--- a/mailpoet/assets/js/src/segments/segments.jsx
+++ b/mailpoet/assets/js/src/segments/segments.jsx
@@ -1,7 +1,5 @@
import ReactDOM from 'react-dom';
-import {
- HashRouter, Switch, Route, Redirect,
-} from 'react-router-dom';
+import { HashRouter, Switch, Route, Redirect } from 'react-router-dom';
import MailPoet from 'mailpoet';
import RoutedTabs from 'common/tabs/routed_tabs';
diff --git a/mailpoet/assets/js/src/sending-paused-notices-fix-button.tsx b/mailpoet/assets/js/src/sending-paused-notices-fix-button.tsx
index cbf761a32b..0f3de4fe71 100644
--- a/mailpoet/assets/js/src/sending-paused-notices-fix-button.tsx
+++ b/mailpoet/assets/js/src/sending-paused-notices-fix-button.tsx
@@ -24,7 +24,7 @@ function App({ onRequestClose }: Props) {
return (
- { showModal && (
+ {showModal && (
{
setShowModal(false);
@@ -45,13 +45,16 @@ App.defaultProps = {
const container = document.getElementById('mailpoet_set_from_address_modal');
if (container) {
ReactDOM.render(
- {
- // if in Settings, reload page, so the new saved FROM address is loaded
- const isInSettings = window.location.href.includes('?page=mailpoet-settings');
- if (isInSettings) {
- window.location.reload();
- }
- }}
+ {
+ // if in Settings, reload page, so the new saved FROM address is loaded
+ const isInSettings = window.location.href.includes(
+ '?page=mailpoet-settings',
+ );
+ if (isInSettings) {
+ window.location.reload();
+ }
+ }}
/>,
container,
);
diff --git a/mailpoet/assets/js/src/sending-paused-notices-resume-button.ts b/mailpoet/assets/js/src/sending-paused-notices-resume-button.ts
index 37838b2900..db071b76e9 100644
--- a/mailpoet/assets/js/src/sending-paused-notices-resume-button.ts
+++ b/mailpoet/assets/js/src/sending-paused-notices-resume-button.ts
@@ -26,26 +26,30 @@ const resumeMailerSending = () => {
api_version: MailPoet.apiVersion,
endpoint: 'mailer',
action: 'resumeSending',
- }).done(() => {
- MailPoet.Notice.success(MailPoet.I18n.t('mailerSendingResumedNotice'));
- }).fail((response:ErrorResponse) => {
- if (response.errors.length > 0) {
- MailPoet.Notice.error(
- response.errors.map((error) => error.message),
- { scroll: true },
- );
- }
- });
+ })
+ .done(() => {
+ MailPoet.Notice.success(MailPoet.I18n.t('mailerSendingResumedNotice'));
+ })
+ .fail((response: ErrorResponse) => {
+ if (response.errors.length > 0) {
+ MailPoet.Notice.error(
+ response.errors.map((error) => error.message),
+ { scroll: true },
+ );
+ }
+ });
};
-const resumeSendingIfAuthorized = (fromAddress: string | null) => isValidFromAddress(fromAddress)
- .then((valid) => {
+const resumeSendingIfAuthorized = (fromAddress: string | null) =>
+ isValidFromAddress(fromAddress).then((valid) => {
if (!valid) {
MailPoet.Notice.error(
MailPoet.I18n.t('mailerSendingNotResumedUnauthorized'),
{ scroll: true },
);
- MailPoet.trackEvent('Unauthorized email used', { 'Unauthorized email source': 'send' });
+ MailPoet.trackEvent('Unauthorized email used', {
+ 'Unauthorized email source': 'send',
+ });
return false;
}
return resumeMailerSending();
@@ -54,7 +58,11 @@ const resumeSendingIfAuthorized = (fromAddress: string | null) => isValidFromAdd
// use jQuery since some of the targeted notices are added to the DOM using the old
// jQuery-based notice implementation which doesn't trigger pure-JS added listeners
jQuery(($) => {
- $(document).on('click', '.notice .mailpoet-js-button-resume-sending', (e) : void => {
- void resumeSendingIfAuthorized(e.target.value as string);
- });
+ $(document).on(
+ 'click',
+ '.notice .mailpoet-js-button-resume-sending',
+ (e): void => {
+ void resumeSendingIfAuthorized(e.target.value as string);
+ },
+ );
});
diff --git a/mailpoet/assets/js/src/settings/components/label.tsx b/mailpoet/assets/js/src/settings/components/label.tsx
index 1ac5b9509a..2243eb9854 100644
--- a/mailpoet/assets/js/src/settings/components/label.tsx
+++ b/mailpoet/assets/js/src/settings/components/label.tsx
@@ -9,7 +9,9 @@ type Props = {
export default function Label({ title, description, htmlFor }: Props) {
return (
-
{title}
+
+ {title}
+
{description &&
{description}
}
);
diff --git a/mailpoet/assets/js/src/settings/components/pages_select.tsx b/mailpoet/assets/js/src/settings/components/pages_select.tsx
index e81f1d0d26..d49ea75b60 100644
--- a/mailpoet/assets/js/src/settings/components/pages_select.tsx
+++ b/mailpoet/assets/js/src/settings/components/pages_select.tsx
@@ -8,7 +8,12 @@ type Props = {
automationId?: string;
linkAutomationId?: string;
setValue: (x: string) => void;
- preview: 'manage' | 'unsubscribe' | 'confirm' | 'confirm_unsubscribe' | 're_engagement';
+ preview:
+ | 'manage'
+ | 'unsubscribe'
+ | 'confirm'
+ | 'confirm_unsubscribe'
+ | 're_engagement';
};
export default function PageSelect(props: Props) {
diff --git a/mailpoet/assets/js/src/settings/components/save_button.tsx b/mailpoet/assets/js/src/settings/components/save_button.tsx
index 949f941412..6b0fb28b8f 100644
--- a/mailpoet/assets/js/src/settings/components/save_button.tsx
+++ b/mailpoet/assets/js/src/settings/components/save_button.tsx
@@ -7,7 +7,9 @@ import ReactStringReplace from 'react-string-replace';
const showReEngagementNotice = (action, showError, showSuccess) => {
if (action === 'deactivate') {
- showError({MailPoet.I18n.t('re-engagementDisabledNotice')}
, { scroll: true });
+ showError({MailPoet.I18n.t('re-engagementDisabledNotice')}
, {
+ scroll: true,
+ });
return;
}
if (action === 'reactivate') {
@@ -42,15 +44,29 @@ export default function SaveButton() {
const showSuccess = notices.success;
useEffect(() => {
if (clicked && !isSaving) {
- if (error) showError(error.map((err) => {err}
), { scroll: true });
+ if (error)
+ showError(
+ error.map((err) => {err}
),
+ { scroll: true },
+ );
else {
- showSuccess({MailPoet.I18n.t('settingsSaved')}
, { scroll: true });
+ showSuccess({MailPoet.I18n.t('settingsSaved')}
, {
+ scroll: true,
+ });
if (hasReEngagementNotice) {
showReEngagementNotice(reEngagementAction, showError, showSuccess);
}
}
}
- }, [clicked, error, isSaving, showError, showSuccess, hasReEngagementNotice, reEngagementAction]);
+ }, [
+ clicked,
+ error,
+ isSaving,
+ showError,
+ showSuccess,
+ hasReEngagementNotice,
+ reEngagementAction,
+ ]);
const onClick = () => {
setClicked(true);
save();
diff --git a/mailpoet/assets/js/src/settings/components/segments_select.tsx b/mailpoet/assets/js/src/settings/components/segments_select.tsx
index 4a62b477f2..cbaec57281 100644
--- a/mailpoet/assets/js/src/settings/components/segments_select.tsx
+++ b/mailpoet/assets/js/src/settings/components/segments_select.tsx
@@ -11,14 +11,18 @@ type Props = {
};
export default function SegmentsSelect(props: Props) {
- const selector = props.segmentsSelector ? props.segmentsSelector : 'getDefaultSegments';
+ const selector = props.segmentsSelector
+ ? props.segmentsSelector
+ : 'getDefaultSegments';
const segments = useSelector(selector)().map((segment) => ({
value: segment.id,
label: segment.name,
count: segment.subscribers,
}));
- const defaultValue = segments.filter((segment) => props.value.includes(segment.value));
+ const defaultValue = segments.filter((segment) =>
+ props.value.includes(segment.value),
+ );
return (
{
+ onChange={(selectedValues: { value: string }[]) => {
props.setValue((selectedValues || []).map((x) => x.value));
}}
/>
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/bounce_address.tsx b/mailpoet/assets/js/src/settings/pages/advanced/bounce_address.tsx
index 69d5146584..6855b6475b 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/bounce_address.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/bounce_address.tsx
@@ -10,10 +10,9 @@ export default function BounceAddress() {
<>
- {t('yourBouncedEmails')}
- {' '}
+ {t('yourBouncedEmails')}{' '}
>
- )}
+ }
htmlFor="bounce-address"
/>
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/captcha.tsx b/mailpoet/assets/js/src/settings/pages/advanced/captcha.tsx
index 7d9bc29bd6..2e5f609136 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/captcha.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/captcha.tsx
@@ -12,8 +12,8 @@ export default function Captcha() {
const [secret, setSecret] = useSetting('captcha', 'recaptcha_secret_token');
const hasBuiltInCaptcha = useSelector('isBuiltInCaptchaSupported')();
const setErrorFlag = useAction('setErrorFlag');
- const missingToken = (type === 'recaptcha' && token.trim() === '');
- const missingSecret = (type === 'recaptcha' && secret.trim() === '');
+ const missingToken = type === 'recaptcha' && token.trim() === '';
+ const missingSecret = type === 'recaptcha' && secret.trim() === '';
useEffect(() => {
setErrorFlag(missingToken || missingSecret);
}, [missingSecret, missingToken, setErrorFlag]);
@@ -22,10 +22,9 @@ export default function Captcha() {
<>
- {t('captchaDescription')}
- {' '}
+ {t('captchaDescription')}{' '}
>
- )}
+ }
htmlFor=""
/>
@@ -48,8 +47,7 @@ export default function Captcha() {
onCheck={setType}
/>
- {t('builtInCaptcha')}
- {' '}
+ {t('builtInCaptcha')}{' '}
{!hasBuiltInCaptcha && t('disbaledBecauseExtensionMissing')}
@@ -60,9 +58,7 @@ export default function Captcha() {
checked={type === 'recaptcha'}
onCheck={setType}
/>
-
- {t('googleReCaptcha')}
-
+ {t('googleReCaptcha')}
{type === 'recaptcha' && (
@@ -100,9 +96,7 @@ export default function Captcha() {
checked={type === ''}
onCheck={setType}
/>
-
- {t('disable')}
-
+ {t('disable')}
>
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/engagement_tracking.tsx b/mailpoet/assets/js/src/settings/pages/advanced/engagement_tracking.tsx
index e558ad3a86..1df77ede2b 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/engagement_tracking.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/engagement_tracking.tsx
@@ -23,9 +23,7 @@ export function EngagementTracking(): ReactElement {
onCheck={setTrackingLevel}
automationId="tracking-basic-radio"
/>
-
- {t('engagementTrackingBasic')}
-
+ {t('engagementTrackingBasic')}
-
- {t('engagementTrackingFull')}
-
+ {t('engagementTrackingFull')}
>
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/inactive_subscribers.tsx b/mailpoet/assets/js/src/settings/pages/advanced/inactive_subscribers.tsx
index c2b0e03937..4284dbc68c 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/inactive_subscribers.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/inactive_subscribers.tsx
@@ -4,17 +4,18 @@ import { useSetting } from 'settings/store/hooks';
import { Label, Inputs } from 'settings/components';
export default function InactiveSubscribers() {
- const [duration, setDuration] = useSetting('deactivate_subscriber_after_inactive_days');
+ const [duration, setDuration] = useSetting(
+ 'deactivate_subscriber_after_inactive_days',
+ );
const [trackingLevel] = useSetting('tracking', 'level');
const sufficientTracking = trackingLevel !== 'basic';
return (
<>
- {t('inactiveSubsDescription')}
- {' '}
+ {t('inactiveSubsDescription')}{' '}
>
- )}
+ }
htmlFor=""
/>
- {!sufficientTracking && {t('disabledBecauseTrackingIs')}
}
+ {!sufficientTracking && (
+
+ {t('disabledBecauseTrackingIs')}
+
+ )}
{sufficientTracking && (
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/libs_3rd_party.tsx b/mailpoet/assets/js/src/settings/pages/advanced/libs_3rd_party.tsx
index a27d36a624..a6b2865422 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/libs_3rd_party.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/libs_3rd_party.tsx
@@ -11,10 +11,9 @@ export function Libs3rdParty() {
<>
- {t('libs3rdPartyDescription')}
- {' '}
+ {t('libs3rdPartyDescription')}{' '}
>
- )}
+ }
htmlFor=""
/>
@@ -35,9 +34,7 @@ export function Libs3rdParty() {
checked={enabled === '1'}
onCheck={setEnabled}
/>
-
- {t('yes')}
-
+ {t('yes')}
-
- {t('no')}
-
+ {t('no')}
>
);
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/logging.tsx b/mailpoet/assets/js/src/settings/pages/advanced/logging.tsx
index d03315e710..73b7fb3129 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/logging.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/logging.tsx
@@ -9,18 +9,14 @@ export default function Logging() {
<>
- {t('loggingDescription')}
- {' '}
-
+ {t('loggingDescription')}{' '}
+
{t('loggingDescriptionLink')}
>
- )}
+ }
htmlFor="logging-level"
/>
@@ -32,9 +28,15 @@ export default function Logging() {
isMinWidth
dimension="small"
>
- {t('everythingLogOption')}
- {t('errorsLogOption')}
- {t('nothingLogOption')}
+
+ {t('everythingLogOption')}
+
+
+ {t('errorsLogOption')}
+
+
+ {t('nothingLogOption')}
+
>
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/recalculate_subscriber_score.tsx b/mailpoet/assets/js/src/settings/pages/advanced/recalculate_subscriber_score.tsx
index c6700be91b..0df0767707 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/recalculate_subscriber_score.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/recalculate_subscriber_score.tsx
@@ -12,7 +12,9 @@ export function RecalculateSubscriberScore(): JSX.Element {
const { notices } = useContext(GlobalContext);
const onClick = async (): Promise => {
await recalculateSubscribersScore();
- notices.info({t('recalculateSubscribersScoreNotice')}
, { scroll: true });
+ notices.info({t('recalculateSubscribersScoreNotice')}
, {
+ scroll: true,
+ });
};
return (
<>
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/reinstall.tsx b/mailpoet/assets/js/src/settings/pages/advanced/reinstall.tsx
index 5b574d3a87..2cc54e9ae9 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/reinstall.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/reinstall.tsx
@@ -19,7 +19,10 @@ export default function Reinstall() {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const action = (await reinstall()) as any as Result;
if (action.type === 'SAVE_FAILED') {
- notices.error(action.error.map((err) => {err}
), { scroll: true });
+ notices.error(
+ action.error.map((err) => {err}
),
+ { scroll: true },
+ );
} else {
window.location.href = 'admin.php?page=mailpoet-newsletters';
}
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/roles.tsx b/mailpoet/assets/js/src/settings/pages/advanced/roles.tsx
index a35261912b..4490347363 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/roles.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/roles.tsx
@@ -15,9 +15,12 @@ export default function Roles() {
/>
- {isMembersPluginActive
- ? {t('manageUsingMembers')}
- : ReactStringReplace(
+ {isMembersPluginActive ? (
+
+ {t('manageUsingMembers')}
+
+ ) : (
+ ReactStringReplace(
t('installMembers'),
/\[link\](.*?)\[\/link\]/,
(text) => (
@@ -31,7 +34,8 @@ export default function Roles() {
{text}
),
- )}
+ )
+ )}
>
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/share_data.tsx b/mailpoet/assets/js/src/settings/pages/advanced/share_data.tsx
index 946e5b9a3b..b948ab7772 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/share_data.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/share_data.tsx
@@ -11,10 +11,9 @@ export default function ShareData() {
<>
- {t('shareDataDescription')}
- {' '}
+ {t('shareDataDescription')}{' '}
>
- )}
+ }
htmlFor=""
/>
@@ -39,9 +38,7 @@ export default function ShareData() {
}}
automationId="analytics-yes"
/>
-
- {t('yes')}
-
+ {t('yes')}
-
- {t('no')}
-
+ {t('no')}
>
);
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/task_scheduler.tsx b/mailpoet/assets/js/src/settings/pages/advanced/task_scheduler.tsx
index 6004d60cb6..d3352a6720 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/task_scheduler.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/task_scheduler.tsx
@@ -14,10 +14,9 @@ export default function TaskScheduler() {
<>
- {t('taskCronDescription')}
- {' '}
+ {t('taskCronDescription')}{' '}
>
- )}
+ }
htmlFor="cron_trigger-method"
/>
@@ -79,9 +78,7 @@ export default function TaskScheduler() {
onCheck={setMethod}
automationId="linux_cron_radio"
/>
-
- {t('serverCron')}
-
+ {t('serverCron')}
{method === 'Linux Cron' && (
)}
diff --git a/mailpoet/assets/js/src/settings/pages/advanced/transactional.tsx b/mailpoet/assets/js/src/settings/pages/advanced/transactional.tsx
index 78c6a93741..1e4bedec33 100644
--- a/mailpoet/assets/js/src/settings/pages/advanced/transactional.tsx
+++ b/mailpoet/assets/js/src/settings/pages/advanced/transactional.tsx
@@ -20,10 +20,9 @@ export default function Transactional() {
<>
- {t('transactionalDescription')}
- {' '}
+ {t('transactionalDescription')}{' '}
>
- )}
+ }
htmlFor=""
/>
@@ -73,9 +72,7 @@ export default function Transactional() {
checked={enabled === ''}
onCheck={setEnabled}
/>
-
- {t('transactionalWP')}
-
+ {t('transactionalWP')}
>
diff --git a/mailpoet/assets/js/src/settings/pages/basics/default_sender.tsx b/mailpoet/assets/js/src/settings/pages/basics/default_sender.tsx
index ed0f09dd19..2f965a7947 100644
--- a/mailpoet/assets/js/src/settings/pages/basics/default_sender.tsx
+++ b/mailpoet/assets/js/src/settings/pages/basics/default_sender.tsx
@@ -1,11 +1,6 @@
import { useEffect } from 'react';
import { Label, Inputs } from 'settings/components';
-import {
- isEmail,
- t,
- onChange,
- setLowercaseValue,
-} from 'common/functions';
+import { isEmail, t, onChange, setLowercaseValue } from 'common/functions';
import Input from 'common/form/input/input';
import { useSetting, useSelector, useAction } from 'settings/store/hooks';
import SenderEmailAddressWarning from 'common/sender_email_address_warning.jsx';
@@ -17,7 +12,7 @@ export default function DefaultSender() {
const [replyToName, setReplyToName] = useSetting('reply_to', 'name');
const [replyToEmail, setReplyToEmail] = useSetting('reply_to', 'address');
const setErrorFlag = useAction('setErrorFlag');
- const invalidSenderEmail = (senderEmail && !isEmail(senderEmail));
+ const invalidSenderEmail = senderEmail && !isEmail(senderEmail);
const invalidReplyToEmail = replyToEmail && !isEmail(replyToEmail);
useEffect(() => {
setErrorFlag(invalidSenderEmail || invalidReplyToEmail);
@@ -62,7 +57,9 @@ export default function DefaultSender() {
mssActive={isMssActive}
/>
- Reply-to
+
+ Reply-to
+
- {t('manageSubDescription1')}
- {' '}
+ {t('manageSubDescription1')}{' '}
{ReactStringReplace(
t('manageSubDescription2'),
/\[link\](.*?)\[\/link\]/,
@@ -33,7 +35,7 @@ export default function ManageSubscription() {
),
)}
>
- )}
+ }
htmlFor="subscription-manage-page"
/>
@@ -45,7 +47,12 @@ export default function ManageSubscription() {
automationId="subscription-manage-page-selection"
linkAutomationId="preview_manage_subscription_page_link"
/>
- {t('subscribersCanChooseFrom')}
+
+ {t('subscribersCanChooseFrom')}
+
-
- {t('yes')}
- {' '}
-
+
+ {t('yes')}{' '}
+
{t('no')}
diff --git a/mailpoet/assets/js/src/settings/pages/basics/shortcode.tsx b/mailpoet/assets/js/src/settings/pages/basics/shortcode.tsx
index cd02159362..40232f70e3 100644
--- a/mailpoet/assets/js/src/settings/pages/basics/shortcode.tsx
+++ b/mailpoet/assets/js/src/settings/pages/basics/shortcode.tsx
@@ -11,7 +11,9 @@ type Props = {
export default function Shortcode({ name, title, description }: Props) {
const [segments, setSegments] = useState([]);
- const shortcode = `[${name}${segments.length ? ` segments="${segments.join(',')}"` : ''}]`;
+ const shortcode = `[${name}${
+ segments.length ? ` segments="${segments.join(',')}"` : ''
+ }]`;
const selectText = (event) => {
event.target.focus();
event.target.select();
diff --git a/mailpoet/assets/js/src/settings/pages/basics/stats_notifications.tsx b/mailpoet/assets/js/src/settings/pages/basics/stats_notifications.tsx
index 9a0a50db9e..482872760c 100644
--- a/mailpoet/assets/js/src/settings/pages/basics/stats_notifications.tsx
+++ b/mailpoet/assets/js/src/settings/pages/basics/stats_notifications.tsx
@@ -1,10 +1,5 @@
import { useEffect } from 'react';
-import {
- isEmail,
- t,
- onChange,
- setLowercaseValue,
-} from 'common/functions';
+import { isEmail, t, onChange, setLowercaseValue } from 'common/functions';
import Checkbox from 'common/form/checkbox/checkbox';
import Input from 'common/form/input/input';
import { useSetting, useAction } from 'settings/store/hooks';
@@ -12,10 +7,14 @@ import { Label, Inputs } from 'settings/components';
export default function StatsNotifications() {
const [enabled, setEnabled] = useSetting('stats_notifications', 'enabled');
- const [automated, setAutomated] = useSetting('stats_notifications', 'automated');
+ const [automated, setAutomated] = useSetting(
+ 'stats_notifications',
+ 'automated',
+ );
const [email, setEmail] = useSetting('stats_notifications', 'address');
const setErrorFlag = useAction('setErrorFlag');
- const hasError = (enabled === '1' || automated === '1') && email.trim() === '';
+ const hasError =
+ (enabled === '1' || automated === '1') && email.trim() === '';
const invalidEmail = email && !isEmail(email);
useEffect(() => {
setErrorFlag(hasError || invalidEmail);
diff --git a/mailpoet/assets/js/src/settings/pages/basics/subscribe_on.tsx b/mailpoet/assets/js/src/settings/pages/basics/subscribe_on.tsx
index efedab5e97..418c7f0de5 100644
--- a/mailpoet/assets/js/src/settings/pages/basics/subscribe_on.tsx
+++ b/mailpoet/assets/js/src/settings/pages/basics/subscribe_on.tsx
@@ -42,9 +42,19 @@ export default function SubscribeOn({ title, description, event }: Props) {
value={label}
onChange={onChange(setLabel)}
/>
- {t('usersWillBeSubscribedTo')}
+
+ {t('usersWillBeSubscribedTo')}
+
-
+
>
)}
diff --git a/mailpoet/assets/js/src/settings/pages/basics/unsubscribe_page.tsx b/mailpoet/assets/js/src/settings/pages/basics/unsubscribe_page.tsx
index c03171632c..40a877d935 100644
--- a/mailpoet/assets/js/src/settings/pages/basics/unsubscribe_page.tsx
+++ b/mailpoet/assets/js/src/settings/pages/basics/unsubscribe_page.tsx
@@ -4,49 +4,50 @@ import { useSetting } from 'settings/store/hooks';
import { Label, Inputs, PagesSelect } from 'settings/components';
export default function UnsubscribePage() {
- const [unsubscribePage, setUnsubscribePage] = useSetting('subscription', 'pages', 'unsubscribe');
- const [unsubscribeConfirmationPage, setUnsubscribeConfirmationPage] = useSetting('subscription', 'pages', 'confirm_unsubscribe');
+ const [unsubscribePage, setUnsubscribePage] = useSetting(
+ 'subscription',
+ 'pages',
+ 'unsubscribe',
+ );
+ const [unsubscribeConfirmationPage, setUnsubscribeConfirmationPage] =
+ useSetting('subscription', 'pages', 'confirm_unsubscribe');
return (
<>
- {
- ReactStringReplace(
- t('unsubscribeDescription1'),
- '[mailpoet_page]',
- () => [mailpoet_page]
,
- )
- }
- {' '}
- {
- ReactStringReplace(
- t('unsubscribeDescription2'),
- /\[link\](.*?)\[\/link\]/,
- (text) => (
-
- {text}
-
- ),
- )
- }
+ {ReactStringReplace(
+ t('unsubscribeDescription1'),
+ '[mailpoet_page]',
+ () => (
+ [mailpoet_page]
+ ),
+ )}{' '}
+ {ReactStringReplace(
+ t('unsubscribeDescription2'),
+ /\[link\](.*?)\[\/link\]/,
+ (text) => (
+
+ {text}
+
+ ),
+ )}
>
- )}
+ }
htmlFor="subscription-pages-unsubscribe"
/>
- {t('confirmationPageTitle')}
- :
+ {t('confirmationPageTitle')}:
- {t('successPageTitle')}
- :
+ {t('successPageTitle')}:
Promise,
+ state: KeyActivationState,
+ showPendingApprovalNotice: boolean,
+ activationCallback: () => Promise,
) {
if (state.code === 503) {
return (
@@ -43,16 +43,14 @@ function Messages(
)}
{state.congratulatoryMssEmailSentTo && (
- {
- t('premiumTabCongratulatoryMssEmailSent')
- .replace('[email_address]', state.congratulatoryMssEmailSentTo)
- }
+ {t('premiumTabCongratulatoryMssEmailSent').replace(
+ '[email_address]',
+ state.congratulatoryMssEmailSentTo,
+ )}
)}
{state.premiumStatus !== null && (
-
+
)}
{showPendingApprovalNotice && (
@@ -60,9 +58,7 @@ function Messages(
{t('premiumTabPendingApprovalHeading')}
-
- {t('premiumTabPendingApprovalMessage')}
-
+ {t('premiumTabPendingApprovalMessage')}
)}
@@ -92,21 +88,25 @@ export default function KeyActivation() {
const verifyPremiumKey = useAction('verifyPremiumKey');
const sendCongratulatoryMssEmail = useAction('sendCongratulatoryMssEmail');
const [senderAddress, setSenderAddress] = useSetting('sender', 'address');
- const [unauthorizedAddresses, setUnauthorizedAddresses] = useSetting('authorized_emails_addresses_check');
+ const [unauthorizedAddresses, setUnauthorizedAddresses] = useSetting(
+ 'authorized_emails_addresses_check',
+ );
const [apiKeyState] = useSetting('mta', 'mailpoet_api_key_state', 'data');
const setAuthorizedAddress = async (address: string) => {
await setSenderAddress(address);
await setUnauthorizedAddresses(null);
};
- const showFromAddressModal = state.fromAddressModalCanBeShown
- && state.mssStatus === MssStatus.VALID_MSS_ACTIVE
- && (!senderAddress || unauthorizedAddresses);
+ const showFromAddressModal =
+ state.fromAddressModalCanBeShown &&
+ state.mssStatus === MssStatus.VALID_MSS_ACTIVE &&
+ (!senderAddress || unauthorizedAddresses);
- const showPendingApprovalNotice = state.inProgress === false
- && state.mssStatus === MssStatus.VALID_MSS_ACTIVE
- && apiKeyState
- && (apiKeyState as KeyState).is_approved === false;
+ const showPendingApprovalNotice =
+ state.inProgress === false &&
+ state.mssStatus === MssStatus.VALID_MSS_ACTIVE &&
+ apiKeyState &&
+ (apiKeyState as KeyState).is_approved === false;
const verifyKey = async () => {
if (!state.key) {
@@ -147,21 +147,20 @@ export default function KeyActivation() {
id="mailpoet_premium_key"
name="premium[premium_key]"
value={state.key || ''}
- onChange={(event) => setState({
- mssStatus: null,
- premiumStatus: null,
- premiumInstallationStatus: null,
- key: event.target.value.trim() || null,
- })}
+ onChange={(event) =>
+ setState({
+ mssStatus: null,
+ premiumStatus: null,
+ premiumInstallationStatus: null,
+ key: event.target.value.trim() || null,
+ })
+ }
/>
{t('premiumTabVerifyButton')}
- {state.isKeyValid !== null && Messages(
- state,
- showPendingApprovalNotice,
- activationCallback,
- )}
+ {state.isKeyValid !== null &&
+ Messages(state, showPendingApprovalNotice, activationCallback)}
{showFromAddressModal && (
void };
function MssNotActiveMessage({ activationCallback }: MssNotActiveMessageProps) {
return (
- {MailPoet.I18n.t('premiumTabMssNotActiveMessage')}
- {' '}
-
+ {MailPoet.I18n.t('premiumTabMssNotActiveMessage')}{' '}
+
{MailPoet.I18n.t('premiumTabMssActivateMessage')}
@@ -45,7 +48,9 @@ export default function MssMessages(props: Props) {
case MssStatus.VALID_MSS_ACTIVE:
return ;
case MssStatus.VALID_MSS_NOT_ACTIVE:
- return ;
+ return (
+
+ );
case MssStatus.INVALID:
return ;
default:
diff --git a/mailpoet/assets/js/src/settings/pages/key_activation/messages/premium_messages.tsx b/mailpoet/assets/js/src/settings/pages/key_activation/messages/premium_messages.tsx
index 86744de4e4..3d02e0eabe 100644
--- a/mailpoet/assets/js/src/settings/pages/key_activation/messages/premium_messages.tsx
+++ b/mailpoet/assets/js/src/settings/pages/key_activation/messages/premium_messages.tsx
@@ -21,9 +21,9 @@ function PremiumNotActiveMessage(props: PremiumNotActiveMessageProps) {
{MailPoet.I18n.t('premiumTabPremiumNotActivatedMessage')}
{props.url && (
-
- {MailPoet.I18n.t('premiumTabPremiumActivateMessage')}
-
+
+ {MailPoet.I18n.t('premiumTabPremiumActivateMessage')}
+
)}
>
);
@@ -35,9 +35,9 @@ function PremiumNotInstalledMessage(props: PremiumNotActiveMessageProps) {
{MailPoet.I18n.t('premiumTabPremiumNotInstalledMessage')}
{props.url && (
-
- {MailPoet.I18n.t('premiumTabPremiumDownloadMessage')}
-
+
+ {MailPoet.I18n.t('premiumTabPremiumDownloadMessage')}
+
)}
>
);
@@ -59,25 +59,21 @@ type Props = {
keyMessage?: string;
};
export default function PremiumMessages(props: Props) {
- const { premiumStatus: status, downloadUrl, activationUrl } = useSelector('getKeyActivationState')();
+ const {
+ premiumStatus: status,
+ downloadUrl,
+ activationUrl,
+ } = useSelector('getKeyActivationState')();
switch (status) {
case PremiumStatus.VALID_PREMIUM_PLUGIN_ACTIVE:
- return (
-
- );
+ return
;
case PremiumStatus.VALID_PREMIUM_PLUGIN_NOT_INSTALLED:
- return (
-
- );
+ return
;
case PremiumStatus.VALID_PREMIUM_PLUGIN_NOT_ACTIVE:
- return (
-
- );
+ return
;
case PremiumStatus.INVALID:
- return (
-
- );
+ return
;
default:
return null;
}
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/other/activate_or_cancel.tsx b/mailpoet/assets/js/src/settings/pages/send_with/other/activate_or_cancel.tsx
index 1d48195398..96fb960158 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/other/activate_or_cancel.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/other/activate_or_cancel.tsx
@@ -21,16 +21,10 @@ export default function ActivateOrCancel() {
};
return (
-
+
{t('activate')}
-
+
{t('orCancel')}
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/other/amazon_ses_fields.tsx b/mailpoet/assets/js/src/settings/pages/send_with/other/amazon_ses_fields.tsx
index 20193f93a9..c2c3bb4dd3 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/other/amazon_ses_fields.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/other/amazon_ses_fields.tsx
@@ -13,7 +13,10 @@ export default function AmazonSesFields() {
return (
<>
-
+
- {Object.entries(options.regions)
- .map(([label, name]) => {label} )}
+ {Object.entries(options.regions).map(([label, name]) => (
+
+ {label}
+
+ ))}
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/other/php_mail_fields.tsx b/mailpoet/assets/js/src/settings/pages/send_with/other/php_mail_fields.tsx
index b545c45b22..8f28aff61f 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/other/php_mail_fields.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/other/php_mail_fields.tsx
@@ -19,10 +19,17 @@ export default function PHPMailFields() {
isMinWidth
dimension="small"
>
- {Object.entries(hosts).map(([key, h]) =>
{h.name} )}
+ {Object.entries(hosts).map(([key, h]) => (
+
+ {h.name}
+
+ ))}
-
+
>
);
}
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/other/sendgrid_fields.tsx b/mailpoet/assets/js/src/settings/pages/send_with/other/sendgrid_fields.tsx
index 8a327b69ad..3ea87b10a2 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/other/sendgrid_fields.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/other/sendgrid_fields.tsx
@@ -9,7 +9,10 @@ export default function SendGridFields() {
const options = useSelector('getSendGridOptions')();
return (
<>
-
+
{
if (frequency === 'auto') {
setFrequencyEmails(`${recommendedEmails}`);
setFrequencyInterval(`${recommendedInterval}`);
}
- }, [frequency, recommendedEmails, recommendedInterval, setFrequencyEmails, setFrequencyInterval]);
+ }, [
+ frequency,
+ recommendedEmails,
+ recommendedInterval,
+ setFrequencyEmails,
+ setFrequencyInterval,
+ ]);
const dailyEmails = Math.floor(
- (MINUTES_PER_DAY * parseInt(frequencyEmails, 10)) / parseInt(frequencyInterval, 10),
+ (MINUTES_PER_DAY * parseInt(frequencyEmails, 10)) /
+ parseInt(frequencyInterval, 10),
);
const emailsPerSecond = Math.floor((dailyEmails / SECONDS_PER_DAY) * 10) / 10;
return (
<>
-
+
- {t('xEmails').replace('%1$s', frequencyEmails)}
- {' '}
+ {t('xEmails').replace('%1$s', frequencyEmails)}{' '}
{formatInterval(frequencyInterval)}
{'. '}
)}
{ReactStringReplace(
- t('thatsXEmailsPerDay').replace('%1$s', dailyEmails.toLocaleString()),
+ t('thatsXEmailsPerDay').replace(
+ '%1$s',
+ dailyEmails.toLocaleString(),
+ ),
/(.*?)<\/strong>/g,
- (match, i) => {match} ,
+ (match, i) => (
+ {match}
+ ),
)}
{emailsPerSecond > 1 && (
{ReactStringReplace(
- t('thatsXEmailsPerSecond').replace('%1$s', emailsPerSecond.toLocaleString()),
+ t('thatsXEmailsPerSecond').replace(
+ '%1$s',
+ emailsPerSecond.toLocaleString(),
+ ),
/(.*?)<\/strong>/g,
- (match, i) => {match} ,
+ (match, i) => (
+ {match}
+ ),
)}
@@ -114,9 +144,14 @@ export default function SendingFrequency({ recommendedEmails, recommendedInterva
{frequency === 'manual' && (
{ReactStringReplace(
- t('frequencyWarning').replace('%1$s', emailsPerSecond.toLocaleString()),
+ t('frequencyWarning').replace(
+ '%1$s',
+ emailsPerSecond.toLocaleString(),
+ ),
/(.*?)<\/strong>/g,
- (match, i) => {match} ,
+ (match, i) => (
+ {match}
+ ),
)}
)}
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/other/sending_method.tsx b/mailpoet/assets/js/src/settings/pages/send_with/other/sending_method.tsx
index 5d41ac6501..4be9ea2c02 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/other/sending_method.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/other/sending_method.tsx
@@ -26,7 +26,8 @@ export default function SendingMethod() {
setGroup('smtp');
setMethod('SendGrid');
break;
- default: setMethod('PHPMail');
+ default:
+ setMethod('PHPMail');
}
}, [provider, setGroup, setMethod]);
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/other/smtp_fields.tsx b/mailpoet/assets/js/src/settings/pages/send_with/other/smtp_fields.tsx
index 7fc5d3af3d..80d8143bd2 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/other/smtp_fields.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/other/smtp_fields.tsx
@@ -12,27 +12,61 @@ export default function SmtpFields() {
const [login, setLogin] = useSetting('mta', 'login');
const [password, setPassword] = useSetting('mta', 'password');
const [encryption, setEncryption] = useSetting('mta', 'encryption');
- const [authentication, setAuthentication] = useSetting('mta', 'authentication');
+ const [authentication, setAuthentication] = useSetting(
+ 'mta',
+ 'authentication',
+ );
return (
<>
-
+
-
+
-
+
-
+
-
+
-
+
TLS
-
+
-
- {t('yes')}
- {' '}
-
+
+ {t('yes')}{' '}
+
{t('no')}
>
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/other/spf.tsx b/mailpoet/assets/js/src/settings/pages/send_with/other/spf.tsx
index 8894812557..cd2da4bf13 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/other/spf.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/other/spf.tsx
@@ -4,10 +4,12 @@ import { Label, Inputs } from 'settings/components';
export default function SPF() {
return (
<>
-
-
- {t('spfSetup')}
-
+
+ {t('spfSetup')}
>
);
}
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/other/test_sending.tsx b/mailpoet/assets/js/src/settings/pages/send_with/other/test_sending.tsx
index 0a15811f0e..7ca3f91e83 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/other/test_sending.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/other/test_sending.tsx
@@ -18,7 +18,9 @@ interface TestSendingWindow extends Window {
declare let window: TestSendingWindow;
export default function TestSending() {
- const [email, setEmail] = useState(window.mailpoet_current_user_email);
+ const [email, setEmail] = useState(
+ window.mailpoet_current_user_email,
+ );
const [mailer] = useSetting('mta');
const { state, error } = useSelector('getTestEmailState')();
const sendTestEmail = useAction('sendTestEmail');
@@ -26,8 +28,20 @@ export default function TestSending() {
return (
<>
{state === TestEmailState.SENDING && }
- {state === TestEmailState.SUCCESS && {t('emailSent')}
}
- {state === TestEmailState.FAILURE && {error.map((message) =>
{message}
)} }
+ {state === TestEmailState.SUCCESS && (
+
+ {t('emailSent')}
+
+ )}
+ {state === TestEmailState.FAILURE && (
+
+
+ {error.map((message) => (
+
{message}
+ ))}
+
+
+ )}
{ReactStringReplace(
t('testEmailTooltip'),
@@ -67,7 +81,7 @@ export default function TestSending() {
),
)}
- )}
+ }
/>
>
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/send_with.tsx b/mailpoet/assets/js/src/settings/pages/send_with/send_with.tsx
index bd60064069..a3eef01b71 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/send_with.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/send_with.tsx
@@ -4,7 +4,5 @@ import OtherSendingMethods from './other/other_sending_methods';
export default function SendWith() {
const { subPage } = useParams<{ subPage: string }>();
- return subPage === 'other'
- ?
- : ;
+ return subPage === 'other' ? : ;
}
diff --git a/mailpoet/assets/js/src/settings/pages/send_with/send_with_choice.tsx b/mailpoet/assets/js/src/settings/pages/send_with/send_with_choice.tsx
index d510ee2705..ba0dff1ad3 100644
--- a/mailpoet/assets/js/src/settings/pages/send_with/send_with_choice.tsx
+++ b/mailpoet/assets/js/src/settings/pages/send_with/send_with_choice.tsx
@@ -17,7 +17,8 @@ export default function SendWithChoice() {
const [key] = useSetting('mta', 'mailpoet_api_key');
const { mssStatus, premiumStatus } = useSelector('getKeyActivationState')();
const isMssKeyValid = mssStatus !== null && mssStatus !== MssStatus.INVALID;
- const isPremiumKeyValid = premiumStatus !== null && premiumStatus !== PremiumStatus.INVALID;
+ const isPremiumKeyValid =
+ premiumStatus !== null && premiumStatus !== PremiumStatus.INVALID;
const freePlanUrl = window.mailpoet_free_plan_url;
const setSetting = useAction('setSetting');
const saveSettings = useAction('saveSettings');
@@ -51,7 +52,9 @@ export default function SendWithChoice() {
{t('mssTitle')}
- {isMssActive ? t('youreSendingWithMss') : t('solveSendingProblems')}
+
+ {isMssActive ? t('youreSendingWithMss') : t('solveSendingProblems')}
+
{t('mssBenefit1')}
{t('mssBenefit2')}
@@ -61,7 +64,14 @@ export default function SendWithChoice() {
{!isMssKeyValid && !isPremiumKeyValid && (
-
{t('freeUpto')}
+
+ {t('freeUpto')}
+
{t('or')}
@@ -71,16 +81,24 @@ export default function SendWithChoice() {
t('enterYourKey'),
/\[link\](.*?)\[\/link\]/g,
(match, i) => (
- {match}
+
+ {match}
+
),
)}
)}
{!isMssKeyValid && isPremiumKeyValid && (
)}
@@ -91,14 +109,13 @@ export default function SendWithChoice() {
{t('otherTitle')}
- {t('sendViaHost')}
- {' '}
- {t('notRecommended')}
- {' '}
+ {t('sendViaHost')} {t('notRecommended')} {' '}
{t('orViaThirdParty')}
- {t('configure')}
+
+ {t('configure')}
+
diff --git a/mailpoet/assets/js/src/settings/pages/signup_confirmation/email_content.tsx b/mailpoet/assets/js/src/settings/pages/signup_confirmation/email_content.tsx
index 37cd8ef523..6d44a8cbaf 100644
--- a/mailpoet/assets/js/src/settings/pages/signup_confirmation/email_content.tsx
+++ b/mailpoet/assets/js/src/settings/pages/signup_confirmation/email_content.tsx
@@ -8,7 +8,9 @@ export default function EmailContent() {
const [body, setBody] = useSetting('signup_confirmation', 'body');
if (!enabled) return null;
- const descriptionLines = t('emailContentDescription').split(' ').filter((x) => x);
+ const descriptionLines = t('emailContentDescription')
+ .split(' ')
+ .filter((x) => x);
return (
<>
-
+
- {t('enableSignupConfDescription')}
- {' '}
+ {t('enableSignupConfDescription')}{' '}
>
- )}
+ }
htmlFor="signup_confirmation-enabled"
/>
- {isMssActive ? {t('signupConfirmationIsMandatory')}
: (
+ {isMssActive ? (
+ {t('signupConfirmationIsMandatory')}
+ ) : (
<>
- {t('yes')}
- {' '}
+ {t('yes')}{' '}
{
diff --git a/mailpoet/assets/js/src/settings/pages/woo_commerce/email_customizer.tsx b/mailpoet/assets/js/src/settings/pages/woo_commerce/email_customizer.tsx
index 206c0df8ab..772f055fce 100644
--- a/mailpoet/assets/js/src/settings/pages/woo_commerce/email_customizer.tsx
+++ b/mailpoet/assets/js/src/settings/pages/woo_commerce/email_customizer.tsx
@@ -5,7 +5,10 @@ import { Label, Inputs } from 'settings/components';
import { useSetting, useAction } from 'settings/store/hooks';
export default function EmailCustomizer() {
- const [enabled, setEnabled] = useSetting('woocommerce', 'use_mailpoet_editor');
+ const [enabled, setEnabled] = useSetting(
+ 'woocommerce',
+ 'use_mailpoet_editor',
+ );
const [newsletterId] = useSetting('woocommerce', 'transactional_email_id');
const openWoocommerceCustomizer = useAction('openWoocommerceCustomizer');
const openEditor = () => openWoocommerceCustomizer(newsletterId);
diff --git a/mailpoet/assets/js/src/settings/pages/woo_commerce/subscribe_old_customers.tsx b/mailpoet/assets/js/src/settings/pages/woo_commerce/subscribe_old_customers.tsx
index cdcd6b1ac2..fefa1f77a1 100644
--- a/mailpoet/assets/js/src/settings/pages/woo_commerce/subscribe_old_customers.tsx
+++ b/mailpoet/assets/js/src/settings/pages/woo_commerce/subscribe_old_customers.tsx
@@ -4,7 +4,10 @@ import { Label, Inputs } from 'settings/components';
import Checkbox from 'common/form/checkbox/checkbox';
export default function SubscribeOldCustomers() {
- const [enabled, setEnabled] = useSetting('mailpoet_subscribe_old_woocommerce_customers', 'enabled');
+ const [enabled, setEnabled] = useSetting(
+ 'mailpoet_subscribe_old_woocommerce_customers',
+ 'enabled',
+ );
return (
<>
diff --git a/mailpoet/assets/js/src/settings/settings.tsx b/mailpoet/assets/js/src/settings/settings.tsx
index 9de63e6a96..ccbdae5743 100644
--- a/mailpoet/assets/js/src/settings/settings.tsx
+++ b/mailpoet/assets/js/src/settings/settings.tsx
@@ -29,25 +29,53 @@ export default function Settings() {
{isSaving && }
- trackTabSwitched(tabKey)}>
-
+ trackTabSwitched(tabKey)}
+ >
+
-
+
-
+
{hasWooCommerce && (
-
+
)}
-
+
-
+
diff --git a/mailpoet/assets/js/src/settings/store/actions/key_activation.ts b/mailpoet/assets/js/src/settings/store/actions/key_activation.ts
index b0a5d6ac0c..586d0ed91a 100644
--- a/mailpoet/assets/js/src/settings/store/actions/key_activation.ts
+++ b/mailpoet/assets/js/src/settings/store/actions/key_activation.ts
@@ -1,5 +1,7 @@
import { Action, KeyActivationState } from '../types';
-export function updateKeyActivationState(fields: Partial): Action {
+export function updateKeyActivationState(
+ fields: Partial,
+): Action {
return { type: 'UPDATE_KEY_ACTIVATION_STATE', fields };
}
diff --git a/mailpoet/assets/js/src/settings/store/actions/mss_and_premium.ts b/mailpoet/assets/js/src/settings/store/actions/mss_and_premium.ts
index 5306bdc6d9..16e2cfb966 100644
--- a/mailpoet/assets/js/src/settings/store/actions/mss_and_premium.ts
+++ b/mailpoet/assets/js/src/settings/store/actions/mss_and_premium.ts
@@ -3,7 +3,11 @@ import { select } from '@wordpress/data';
import MailPoet from 'mailpoet';
import { STORE_NAME } from 'settings/store/store_name';
-import { KeyActivationState, MssStatus, PremiumStatus } from 'settings/store/types';
+import {
+ KeyActivationState,
+ MssStatus,
+ PremiumStatus,
+} from 'settings/store/types';
import { updateKeyActivationState } from './key_activation';
import { setSettings, setSetting } from './settings';
@@ -52,12 +56,9 @@ export function* verifyPremiumKey(key: string) {
data: { key },
};
if (!success) {
- MailPoet.trackEvent(
- 'User has failed to validate a Premium key',
- {
- 'Premium plugin is active': !!MailPoet.premiumVersion,
- },
- );
+ MailPoet.trackEvent('User has failed to validate a Premium key', {
+ 'Premium plugin is active': !!MailPoet.premiumVersion,
+ });
return updateKeyActivationState({
premiumStatus: PremiumStatus.INVALID,
premiumMessage: error.join(' ') || null,
diff --git a/mailpoet/assets/js/src/settings/store/actions/send_test_email.ts b/mailpoet/assets/js/src/settings/store/actions/send_test_email.ts
index 9b2e6f6916..ccb1f41167 100644
--- a/mailpoet/assets/js/src/settings/store/actions/send_test_email.ts
+++ b/mailpoet/assets/js/src/settings/store/actions/send_test_email.ts
@@ -1,7 +1,10 @@
import { t } from 'common/functions';
import { Settings } from 'settings/store/types';
-export default function* sendTestEmail(recipient: string, mailer: Settings['mta']) {
+export default function* sendTestEmail(
+ recipient: string,
+ mailer: Settings['mta'],
+) {
if (!recipient) {
return { type: 'TEST_EMAIL_FAILED', error: [t('cantSendEmail')] };
}
@@ -22,7 +25,11 @@ export default function* sendTestEmail(recipient: string, mailer: Settings['mta'
subscriber: recipient,
},
};
- yield { type: 'TRACK_TEST_EMAIL_SENT', success: res.success, method: mailer.method };
+ yield {
+ type: 'TRACK_TEST_EMAIL_SENT',
+ success: res.success,
+ method: mailer.method,
+ };
if (!res.success) return { type: 'TEST_EMAIL_FAILED', error: res.error };
return { type: 'TEST_EMAIL_SUCCESS' };
}
diff --git a/mailpoet/assets/js/src/settings/store/actions/settings.ts b/mailpoet/assets/js/src/settings/store/actions/settings.ts
index 015b354cb6..d30aee36e6 100644
--- a/mailpoet/assets/js/src/settings/store/actions/settings.ts
+++ b/mailpoet/assets/js/src/settings/store/actions/settings.ts
@@ -28,7 +28,9 @@ export function* saveSettings() {
// trim all strings before saving
const stringified = JSON.stringify(data);
- const parsed = JSON.parse(stringified, (_, value) => (typeof value === 'string' ? value.trim() : value));
+ const parsed = JSON.parse(stringified, (_, value) =>
+ typeof value === 'string' ? value.trim() : value,
+ );
const { success, error, res } = yield {
type: 'CALL_API',
diff --git a/mailpoet/assets/js/src/settings/store/controls.ts b/mailpoet/assets/js/src/settings/store/controls.ts
index 0bce2e6b7a..13a322fee7 100644
--- a/mailpoet/assets/js/src/settings/store/controls.ts
+++ b/mailpoet/assets/js/src/settings/store/controls.ts
@@ -9,25 +9,27 @@ export function TRACK_SETTINGS_SAVED() {
const settings = select(STORE_NAME).getSettings();
const data = {
'Sending method type': settings.mta_group || null,
- 'Sending frequency (emails)': (
- settings.mta_group !== 'mailpoet'
- && settings.mta
- && settings.mta.frequency
- && settings.mta.frequency.emails
- ),
- 'Sending frequency (interval)': (
- settings.mta_group !== 'mailpoet'
- && settings.mta
- && settings.mta.frequency
- && settings.mta.frequency.interval
- ),
+ 'Sending frequency (emails)':
+ settings.mta_group !== 'mailpoet' &&
+ settings.mta &&
+ settings.mta.frequency &&
+ settings.mta.frequency.emails,
+ 'Sending frequency (interval)':
+ settings.mta_group !== 'mailpoet' &&
+ settings.mta &&
+ settings.mta.frequency &&
+ settings.mta.frequency.interval,
'Sending provider': settings.mta_group === 'smtp' && settings.smtp_provider,
- 'Sign-up confirmation enabled': settings.signup_confirmation && settings.signup_confirmation.enabled,
- 'Bounce email is present': settings.bounce && settings.bounce.address !== '',
- 'Newsletter task scheduler method': (settings.cron_trigger && settings.cron_trigger.method),
+ 'Sign-up confirmation enabled':
+ settings.signup_confirmation && settings.signup_confirmation.enabled,
+ 'Bounce email is present':
+ settings.bounce && settings.bounce.address !== '',
+ 'Newsletter task scheduler method':
+ settings.cron_trigger && settings.cron_trigger.method,
};
if (MailPoet.isWoocommerceActive) {
- data['WooCommerce email customizer enabled'] = settings.woocommerce && settings.woocommerce.use_mailpoet_editor;
+ data['WooCommerce email customizer enabled'] =
+ settings.woocommerce && settings.woocommerce.use_mailpoet_editor;
}
MailPoet.trackEvent('User has saved Settings', data);
}
@@ -39,21 +41,17 @@ export function TRACK_REINSTALLED() {
// eslint-disable-next-line @typescript-eslint/naming-convention
export function TRACK_TEST_EMAIL_SENT({ success, method }) {
- MailPoet.trackEvent(
- 'User has sent a test email from Settings',
- {
- 'Sending was successful': !!success,
- 'Sending method type': method,
- },
- );
+ MailPoet.trackEvent('User has sent a test email from Settings', {
+ 'Sending was successful': !!success,
+ 'Sending method type': method,
+ });
}
// eslint-disable-next-line @typescript-eslint/naming-convention
export function TRACK_UNAUTHORIZED_EMAIL({ meta }) {
if (meta !== undefined && meta.invalid_sender_address) {
- MailPoet.trackEvent(
- 'Unauthorized email used',
- { 'Unauthorized email source': 'settings' },
- );
+ MailPoet.trackEvent('Unauthorized email used', {
+ 'Unauthorized email source': 'settings',
+ });
}
}
diff --git a/mailpoet/assets/js/src/settings/store/create_reducer.ts b/mailpoet/assets/js/src/settings/store/create_reducer.ts
index f0c916a416..649fe628f9 100644
--- a/mailpoet/assets/js/src/settings/store/create_reducer.ts
+++ b/mailpoet/assets/js/src/settings/store/create_reducer.ts
@@ -1,6 +1,11 @@
import { setWith, clone } from 'lodash';
import {
- State, Action, KeyActivationState, MssStatus, PremiumStatus, TestEmailState,
+ State,
+ Action,
+ KeyActivationState,
+ MssStatus,
+ PremiumStatus,
+ TestEmailState,
} from './types';
import normalizeSettings from './normalize_settings';
@@ -12,9 +17,17 @@ export default function createReducer(defaultValue: State) {
): State => {
switch (action.type) {
case 'SET_SETTING':
- return setWith(clone(state), ['data', ...action.path], action.value, clone);
+ return setWith(
+ clone(state),
+ ['data', ...action.path],
+ action.value,
+ clone,
+ );
case 'SET_SETTINGS':
- return { ...state, data: normalizeSettings(action.value as Record) };
+ return {
+ ...state,
+ data: normalizeSettings(action.value as Record),
+ };
case 'SET_ERROR_FLAG':
return { ...state, flags: { ...state.flags, error: !!action.value } };
case 'SAVE_STARTED':
@@ -26,24 +39,38 @@ export default function createReducer(defaultValue: State) {
case 'SET_RE_ENGAGEMENT_NOTICE':
return {
...state,
- reEngagement: { showNotice: action.value.showNotice, action: action.value.action },
+ reEngagement: {
+ showNotice: action.value.showNotice,
+ action: action.value.action,
+ },
};
case 'UPDATE_KEY_ACTIVATION_STATE':
keyActivation = { ...state.keyActivation, ...action.fields };
keyActivation.isKeyValid = null;
- if (keyActivation.mssStatus !== null && keyActivation.premiumStatus !== null) {
- keyActivation.isKeyValid = (
- keyActivation.mssStatus !== MssStatus.INVALID
- || keyActivation.premiumStatus !== PremiumStatus.INVALID
- );
+ if (
+ keyActivation.mssStatus !== null &&
+ keyActivation.premiumStatus !== null
+ ) {
+ keyActivation.isKeyValid =
+ keyActivation.mssStatus !== MssStatus.INVALID ||
+ keyActivation.premiumStatus !== PremiumStatus.INVALID;
}
return { ...state, keyActivation };
case 'START_TEST_EMAIL_SENDING':
- return { ...state, testEmail: { state: TestEmailState.SENDING, error: null } };
+ return {
+ ...state,
+ testEmail: { state: TestEmailState.SENDING, error: null },
+ };
case 'TEST_EMAIL_SUCCESS':
- return { ...state, testEmail: { state: TestEmailState.SUCCESS, error: null } };
+ return {
+ ...state,
+ testEmail: { state: TestEmailState.SUCCESS, error: null },
+ };
case 'TEST_EMAIL_FAILED':
- return { ...state, testEmail: { state: TestEmailState.FAILURE, error: action.error } };
+ return {
+ ...state,
+ testEmail: { state: TestEmailState.FAILURE, error: action.error },
+ };
default:
return state;
}
diff --git a/mailpoet/assets/js/src/settings/store/hooks/types.ts b/mailpoet/assets/js/src/settings/store/hooks/types.ts
index 50c385b506..65212a6d2a 100644
--- a/mailpoet/assets/js/src/settings/store/hooks/types.ts
+++ b/mailpoet/assets/js/src/settings/store/hooks/types.ts
@@ -3,8 +3,12 @@
* Omits the first item in a tuple type
* Tail<[number, string, boolean]> gives [string, boolean]
*/
-export type Tail =
- ((...args: T) => void) extends ((_: any, ...args: infer Others) => void) ? Others : never;
+export type Tail = ((...args: T) => void) extends (
+ _: any,
+ ...args: infer Others
+) => void
+ ? Others
+ : never;
/**
* Takes a function type and returns a new function
@@ -12,7 +16,8 @@ export type Tail =
* ExcludeFirstParam<(x: number, y: string) => boolean>
* gives (y: string) => boolean
*/
-export type ExcludeFirstParam any)> =
- (...args: Tail>) => ReturnType;
+export type ExcludeFirstParam any> = (
+ ...args: Tail>
+) => ReturnType;
export type ValueAndSetter = [T, (value: T) => any];
diff --git a/mailpoet/assets/js/src/settings/store/hooks/useSelector.ts b/mailpoet/assets/js/src/settings/store/hooks/useSelector.ts
index 6bf6644805..863623add5 100644
--- a/mailpoet/assets/js/src/settings/store/hooks/useSelector.ts
+++ b/mailpoet/assets/js/src/settings/store/hooks/useSelector.ts
@@ -7,7 +7,7 @@ type Selectors = typeof selectors;
export default function useSelector(
key: Key,
- deps: any[] = [] // eslint-disable-line @typescript-eslint/no-explicit-any
+ deps: any[] = [], // eslint-disable-line @typescript-eslint/no-explicit-any
): ExcludeFirstParam {
return useSelect((select) => {
const selects = select(STORE_NAME);
diff --git a/mailpoet/assets/js/src/settings/store/hooks/useSetting.ts b/mailpoet/assets/js/src/settings/store/hooks/useSetting.ts
index 629e25cf9e..5504ab7f83 100644
--- a/mailpoet/assets/js/src/settings/store/hooks/useSetting.ts
+++ b/mailpoet/assets/js/src/settings/store/hooks/useSetting.ts
@@ -12,7 +12,9 @@ import { useAction } from './useActions';
* keyof: http://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html#keyof-and-lookup-types
* overloading functions: http://www.typescriptlang.org/docs/handbook/declaration-files/do-s-and-don-ts.html#function-overloads
*/
-export function useSetting(key1: Key1): ValueAndSetter;
+export function useSetting(
+ key1: Key1,
+): ValueAndSetter;
export function useSetting<
Key1 extends keyof Settings,
Key2 extends keyof Settings[Key1],
@@ -21,7 +23,11 @@ export function useSetting<
Key1 extends keyof Settings,
Key2 extends keyof Settings[Key1],
Key3 extends keyof Settings[Key1][Key2],
->(key1: Key1, key2: Key2, key3: Key3): ValueAndSetter;
+>(
+ key1: Key1,
+ key2: Key2,
+ key3: Key3,
+): ValueAndSetter;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
export function useSetting(...path: string[]): [any, (value: any) => any] {
diff --git a/mailpoet/assets/js/src/settings/store/index.ts b/mailpoet/assets/js/src/settings/store/index.ts
index 5c7c1c92c1..1be8bd65c3 100644
--- a/mailpoet/assets/js/src/settings/store/index.ts
+++ b/mailpoet/assets/js/src/settings/store/index.ts
@@ -7,10 +7,11 @@ import makeDefaultState from './make_default_state';
import { STORE_NAME } from './store_name';
// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const initStore = (window: any) => registerStore(STORE_NAME, {
- reducer: createReducer(makeDefaultState(window)),
- actions,
- selectors,
- controls,
- resolvers: {},
-});
+export const initStore = (window: any) =>
+ registerStore(STORE_NAME, {
+ reducer: createReducer(makeDefaultState(window)),
+ actions,
+ selectors,
+ controls,
+ resolvers: {},
+ });
diff --git a/mailpoet/assets/js/src/settings/store/make_default_state.ts b/mailpoet/assets/js/src/settings/store/make_default_state.ts
index dffc465243..bb4bd79695 100644
--- a/mailpoet/assets/js/src/settings/store/make_default_state.ts
+++ b/mailpoet/assets/js/src/settings/store/make_default_state.ts
@@ -1,7 +1,5 @@
import MailPoet from 'mailpoet';
-import {
- State, PremiumStatus, MssStatus, TestEmailState,
-} from './types';
+import { State, PremiumStatus, MssStatus, TestEmailState } from './types';
import normalizeSettings from './normalize_settings';
function getPremiumStatus(keyValid, premiumInstalled): PremiumStatus {
@@ -20,7 +18,9 @@ function getPremiumStatus(keyValid, premiumInstalled): PremiumStatus {
function getMssStatus(keyValid, data): MssStatus {
if (!keyValid) return MssStatus.INVALID;
const mssActive = data.mta.method === 'MailPoet';
- return mssActive ? MssStatus.VALID_MSS_ACTIVE : MssStatus.VALID_MSS_NOT_ACTIVE;
+ return mssActive
+ ? MssStatus.VALID_MSS_ACTIVE
+ : MssStatus.VALID_MSS_NOT_ACTIVE;
}
// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -30,7 +30,9 @@ export default function makeDefaultState(window: any): State {
const segments = window.mailpoet_segments;
const hosts = window.mailpoet_hosts;
const save = { inProgress: false, error: null };
- const data = normalizeSettings(window.mailpoet_settings as Record);
+ const data = normalizeSettings(
+ window.mailpoet_settings as Record,
+ );
const flags = {
error: false,
newUser: !!window.mailpoet_is_new_user,
@@ -49,7 +51,9 @@ export default function makeDefaultState(window: any): State {
window.mailpoet_premium_key_valid,
window.mailpoet_premium_plugin_installed,
);
- isKeyValid = mssStatus !== MssStatus.INVALID || premiumStatus !== PremiumStatus.INVALID;
+ isKeyValid =
+ mssStatus !== MssStatus.INVALID ||
+ premiumStatus !== PremiumStatus.INVALID;
}
const keyActivation = {
@@ -75,6 +79,15 @@ export default function makeDefaultState(window: any): State {
action: null,
};
return {
- data, flags, save, keyActivation, segments, pages, paths, hosts, testEmail, reEngagement,
+ data,
+ flags,
+ save,
+ keyActivation,
+ segments,
+ pages,
+ paths,
+ hosts,
+ testEmail,
+ reEngagement,
};
}
diff --git a/mailpoet/assets/js/src/settings/store/normalize_settings.ts b/mailpoet/assets/js/src/settings/store/normalize_settings.ts
index a03798dc6b..b7dcbb58da 100644
--- a/mailpoet/assets/js/src/settings/store/normalize_settings.ts
+++ b/mailpoet/assets/js/src/settings/store/normalize_settings.ts
@@ -36,10 +36,13 @@ function asEnum(choices: string[], defaultValue: string) {
function asObject(schema: T) {
return (value: unknown): SchemaResult => {
- const object = Object.keys(schema).reduce((result, field) => ({
- [field]: schema[field](value ? value[field] as string : undefined),
- ...result,
- }), {});
+ const object = Object.keys(schema).reduce(
+ (result, field) => ({
+ [field]: schema[field](value ? (value[field] as string) : undefined),
+ ...result,
+ }),
+ {},
+ );
return object as SchemaResult;
};
}
@@ -48,22 +51,35 @@ function asIs(value: T): T {
return value;
}
-export default function normalizeSettings(data: Record): Settings {
+export default function normalizeSettings(
+ data: Record,
+): Settings {
const text = asString('');
const disabledCheckbox = asBoolean('1', '0', '0');
const enabledCheckbox = asBoolean('1', '0', '1');
const disabledRadio = asBoolean('1', '', '');
const enabledRadio = asBoolean('1', '', '1');
const emptyArray = asStringArray([]);
- const smtpServer = asEnum(['server', 'manual', 'AmazonSES', 'SendGrid'], 'server');
+ const smtpServer = asEnum(
+ ['server', 'manual', 'AmazonSES', 'SendGrid'],
+ 'server',
+ );
const settingsSchema = asObject({
sender: asObject({ name: text, address: text }),
reply_to: asObject({ name: text, address: text }),
bounce: asObject({ address: text }),
subscribe: asObject({
- on_comment: asObject({ enabled: disabledCheckbox, label: asString(t('yesAddMe')), segments: emptyArray }),
- on_register: asObject({ enabled: disabledCheckbox, label: asString(t('yesAddMe')), segments: emptyArray }),
+ on_comment: asObject({
+ enabled: disabledCheckbox,
+ label: asString(t('yesAddMe')),
+ segments: emptyArray,
+ }),
+ on_register: asObject({
+ enabled: disabledCheckbox,
+ label: asString(t('yesAddMe')),
+ segments: emptyArray,
+ }),
}),
subscription: asObject({
pages: asObject({
@@ -80,7 +96,10 @@ export default function normalizeSettings(data: Record): Settin
automated: enabledCheckbox,
address: text,
}),
- subscriber_email_notification: asObject({ enabled: enabledRadio, address: text }),
+ subscriber_email_notification: asObject({
+ enabled: enabledRadio,
+ address: text,
+ }),
reEngagement: asObject({
page: text,
}),
@@ -89,7 +108,10 @@ export default function normalizeSettings(data: Record): Settin
}),
tracking: asObject({ level: asEnum(['full', 'partial', 'basic'], 'full') }),
send_transactional_emails: disabledRadio,
- deactivate_subscriber_after_inactive_days: asEnum(['', '90', '180', '365', '540'], '365'),
+ deactivate_subscriber_after_inactive_days: asEnum(
+ ['', '90', '180', '365', '540'],
+ '365',
+ ),
analytics: asObject({ enabled: disabledRadio }),
'3rd_party_libs': asObject({ enabled: disabledRadio }),
captcha: asObject({
@@ -100,13 +122,10 @@ export default function normalizeSettings(data: Record): Settin
logging: asEnum(['everything', 'errors', 'nothing'], 'errors'),
mta_group: asEnum(['mailpoet', 'website', 'smtp'], 'website'),
mta: asObject({
- method: asEnum([
- 'MailPoet',
- 'AmazonSES',
- 'SendGrid',
+ method: asEnum(
+ ['MailPoet', 'AmazonSES', 'SendGrid', 'PHPMail', 'SMTP'],
'PHPMail',
- 'SMTP',
- ], 'PHPMail'),
+ ),
frequency: asObject({
emails: asString('25'),
interval: asString('5'),
@@ -123,13 +142,10 @@ export default function normalizeSettings(data: Record): Settin
encryption: text,
authentication: asEnum(['1', '-1'], '1'),
mailpoet_api_key_state: asObject({
- state: asEnum([
- 'valid',
- 'invalid',
- 'expiring',
- 'already_used',
+ state: asEnum(
+ ['valid', 'invalid', 'expiring', 'already_used', 'check_error'],
'check_error',
- ], 'check_error'),
+ ),
data: asIs,
}),
}),
@@ -160,13 +176,10 @@ export default function normalizeSettings(data: Record): Settin
premium: asObject({
premium_key: text,
premium_key_state: asObject({
- state: asEnum([
- 'valid',
- 'invalid',
- 'expiring',
- 'already_used',
+ state: asEnum(
+ ['valid', 'invalid', 'expiring', 'already_used', 'check_error'],
'check_error',
- ], 'check_error'),
+ ),
data: asIs,
}),
}),
@@ -177,13 +190,13 @@ export default function normalizeSettings(data: Record): Settin
type Schema = {
[key: string]: ReturnType<
- | typeof asString
- | typeof asStringArray
- | typeof asBoolean
- | typeof asEnum
- | typeof asObject
+ | typeof asString
+ | typeof asStringArray
+ | typeof asBoolean
+ | typeof asEnum
+ | typeof asObject
>;
};
type SchemaResult = {
- [key in keyof T]: ReturnType
+ [key in keyof T]: ReturnType;
};
diff --git a/mailpoet/assets/js/src/settings/store/types.ts b/mailpoet/assets/js/src/settings/store/types.ts
index 75a7ac8190..795e4fbab0 100644
--- a/mailpoet/assets/js/src/settings/store/types.ts
+++ b/mailpoet/assets/js/src/settings/store/types.ts
@@ -83,12 +83,7 @@ export type Settings = {
encryption: string;
authentication: '1' | '-1';
mailpoet_api_key_state: {
- state:
- | 'valid'
- | 'invalid'
- | 'expiring'
- | 'already_used'
- | 'check_error';
+ state: 'valid' | 'invalid' | 'expiring' | 'already_used' | 'check_error';
data: Record;
};
};
@@ -119,21 +114,16 @@ export type Settings = {
premium: {
premium_key: string;
premium_key_state: {
- state:
- | 'valid'
- | 'invalid'
- | 'expiring'
- | 'already_used'
- | 'check_error';
+ state: 'valid' | 'invalid' | 'expiring' | 'already_used' | 'check_error';
data: Record;
};
};
authorized_emails_addresses_check: null | {
invalid_sender_address?: string;
invalid_senders_in_newsletters?: Array<{
- 'subject': string;
- 'sender_address': string;
- 'newsletter_id': number | string;
+ subject: string;
+ sender_address: string;
+ newsletter_id: number | string;
}>;
};
};
diff --git a/mailpoet/assets/js/src/subscribers/form.jsx b/mailpoet/assets/js/src/subscribers/form.jsx
index 343c570134..82aafd62b4 100644
--- a/mailpoet/assets/js/src/subscribers/form.jsx
+++ b/mailpoet/assets/js/src/subscribers/form.jsx
@@ -15,7 +15,10 @@ const fields = [
label: MailPoet.I18n.t('email'),
type: 'text',
disabled: function disabled(subscriber) {
- return Number(subscriber.wp_user_id > 0) || Number(subscriber.is_woocommerce_user) === 1;
+ return (
+ Number(subscriber.wp_user_id > 0) ||
+ Number(subscriber.is_woocommerce_user) === 1
+ );
},
},
{
@@ -23,7 +26,10 @@ const fields = [
label: MailPoet.I18n.t('firstname'),
type: 'text',
disabled: function disabled(subscriber) {
- return Number(subscriber.wp_user_id > 0) || Number(subscriber.is_woocommerce_user) === 1;
+ return (
+ Number(subscriber.wp_user_id > 0) ||
+ Number(subscriber.is_woocommerce_user) === 1
+ );
},
},
{
@@ -31,7 +37,10 @@ const fields = [
label: MailPoet.I18n.t('lastname'),
type: 'text',
disabled: function disabled(subscriber) {
- return Number(subscriber.wp_user_id > 0) || Number(subscriber.is_woocommerce_user) === 1;
+ return (
+ Number(subscriber.wp_user_id > 0) ||
+ Number(subscriber.is_woocommerce_user) === 1
+ );
},
},
{
@@ -66,7 +75,7 @@ const fields = [
.map((subscription) => subscription.segment_id);
},
filter: function filter(segment) {
- return (!segment.deleted_at && segment.type === 'default');
+ return !segment.deleted_at && segment.type === 'default';
},
getLabel: function getLabel(segment) {
return segment.name;
@@ -83,14 +92,15 @@ const fields = [
label = segment.name;
if (subscription.status === 'unsubscribed') {
- const unsubscribedAt = MailPoet.Date
- .format(subscription.updated_at);
+ const unsubscribedAt = MailPoet.Date.format(
+ subscription.updated_at,
+ );
label += ' (%1$s)'.replace(
'%1$s',
MailPoet.I18n.t('unsubscribedOn').replace(
'%1$s',
- unsubscribedAt
- )
+ unsubscribedAt,
+ ),
);
}
}
@@ -149,17 +159,14 @@ function beforeFormContent(subscriber) {
if (Number(subscriber.wp_user_id) > 0) {
return (
- { ReactStringReplace(
+ {ReactStringReplace(
MailPoet.I18n.t('WPUserEditNotice'),
/\[link\](.*?)\[\/link\]/g,
(match, i) => (
-
- { match }
+
+ {match}
- )
+ ),
)}
);
@@ -171,7 +178,9 @@ function afterFormContent(values) {
return (
<>
{values?.unsubscribes?.map((unsubscribe) => {
- const date = moment(unsubscribe.createdAt.date).format('dddd MMMM Do YYYY [at] h:mm:ss a');
+ const date = moment(unsubscribe.createdAt.date).format(
+ 'dddd MMMM Do YYYY [at] h:mm:ss a',
+ );
let message;
if (unsubscribe.source === 'admin') {
message = MailPoet.I18n.t('unsubscribedAdmin')
@@ -188,12 +197,15 @@ function afterFormContent(values) {
key={i}
href={`admin.php?page=mailpoet-newsletter-editor&id=${unsubscribe.newsletterId}`}
>
- { unsubscribe.newsletterSubject }
+ {unsubscribe.newsletterSubject}
- )
+ ),
);
} else {
- message = MailPoet.I18n.t('unsubscribedUnknown').replace('%1$d', date);
+ message = MailPoet.I18n.t('unsubscribedUnknown').replace(
+ '%1$d',
+ date,
+ );
}
return (
@@ -202,11 +214,8 @@ function afterFormContent(values) {
);
})}
-
- { MailPoet.I18n.t('tip') }
-
- {' '}
- { MailPoet.I18n.t('customFieldsTip') }
+ {MailPoet.I18n.t('tip')} {' '}
+ {MailPoet.I18n.t('customFieldsTip')}
>
);
@@ -223,7 +232,12 @@ function SubscriberForm({ match }) {
{MailPoet.I18n.t('subscriber')}
- {MailPoet.I18n.t('backToList')}
+
+ {MailPoet.I18n.t('backToList')}
+
diff --git a/mailpoet/assets/js/src/subscribers/heading.jsx b/mailpoet/assets/js/src/subscribers/heading.jsx
index a278286c61..2a8005ca41 100644
--- a/mailpoet/assets/js/src/subscribers/heading.jsx
+++ b/mailpoet/assets/js/src/subscribers/heading.jsx
@@ -17,7 +17,9 @@ function SubscribersHeading({ location }) {
}}
>
{plusIcon}
- {MailPoet.I18n.t('new')}
+
+ {MailPoet.I18n.t('new')}
+
{
if (!window.exportData.segments) {
return;
}
- const subscribersExportTemplate = Handlebars.compile(jQuery('#mailpoet_subscribers_export_template').html());
+ const subscribersExportTemplate = Handlebars.compile(
+ jQuery('#mailpoet_subscribers_export_template').html(),
+ );
// render template
jQuery('#mailpoet-export').html(subscribersExportTemplate(window.exportData));
@@ -66,9 +68,7 @@ jQuery(document).ready(() => {
function renderSegmentsAndFields(container, data): void {
if (container.data('select2')) {
- container
- .html('')
- .select2('destroy');
+ container.html('').select2('destroy');
}
container
.select2({
@@ -81,11 +81,8 @@ jQuery(document).ready(() => {
})
.on('select2:selecting', (selectEvent) => {
const selectedOptionId = selectEvent.params.args.data.id;
- const fieldsToExclude = [
- 'select',
- 'deselect',
- ];
- let allOptions : string[];
+ const fieldsToExclude = ['select', 'deselect'];
+ let allOptions: string[];
if (_.contains(fieldsToExclude, selectedOptionId)) {
selectEvent.preventDefault();
if (selectedOptionId === 'deselect') {
@@ -93,7 +90,7 @@ jQuery(document).ready(() => {
} else {
allOptions = [];
_.each(container.find('option'), (field) => {
- const value : string = field.value;
+ const value: string = field.value;
if (!_.contains(fieldsToExclude, value)) {
allOptions.push(value);
}
@@ -104,8 +101,12 @@ jQuery(document).ready(() => {
}
})
.on('change', () => {
- if ((window.exportData.segments && segmentsContainerElement.select2('data').length && subscriberFieldsContainerElement.select2('data').length)
- || (!window.exportData.segments && subscriberFieldsContainerElement.select2('data').length)
+ if (
+ (window.exportData.segments &&
+ segmentsContainerElement.select2('data').length &&
+ subscriberFieldsContainerElement.select2('data').length) ||
+ (!window.exportData.segments &&
+ subscriberFieldsContainerElement.select2('data').length)
) {
toggleNextStepButton('on');
} else {
@@ -115,7 +116,9 @@ jQuery(document).ready(() => {
}
window.segments.forEach((item) => {
- segmentsContainerElement.append(jQuery(' ').attr('value', item.id).text(item.name));
+ segmentsContainerElement.append(
+ jQuery(' ').attr('value', item.id).text(item.name),
+ );
});
// Select2 requires the property text, then we fill it with name
window.subscriberFieldsSelect2.forEach((group) => {
@@ -126,19 +129,24 @@ jQuery(document).ready(() => {
});
});
renderSegmentsAndFields(segmentsContainerElement, window.segments);
- renderSegmentsAndFields(subscriberFieldsContainerElement, window.subscriberFieldsSelect2);
+ renderSegmentsAndFields(
+ subscriberFieldsContainerElement,
+ window.subscriberFieldsSelect2,
+ );
- subscriberFieldsContainerElement.val([
- 'email',
- 'first_name',
- 'last_name',
- 'list_status',
- 'global_status',
- 'subscribed_ip',
- 'created_at',
- 'confirmed_at',
- 'confirmed_ip',
- ]).trigger('change');
+ subscriberFieldsContainerElement
+ .val([
+ 'email',
+ 'first_name',
+ 'last_name',
+ 'list_status',
+ 'global_status',
+ 'subscribed_ip',
+ 'created_at',
+ 'confirmed_at',
+ 'confirmed_ip',
+ ])
+ .trigger('change');
nextStepButton.on('click', (event) => {
if (jQuery(event.target).hasClass('mailpoet-disabled')) {
@@ -152,26 +160,43 @@ jQuery(document).ready(() => {
action: 'processExport',
data: JSON.stringify({
export_format_option: exportFormat,
- segments: (window.exportData.segments) ? segmentsContainerElement.val() : false,
+ segments: window.exportData.segments
+ ? segmentsContainerElement.val()
+ : false,
subscriber_fields: subscriberFieldsContainerElement.val(),
}),
- }).always(() => {
- MailPoet.Modal.loading(false);
- }).done((response) => {
- const resultMessage = MailPoet.I18n.t('exportMessage')
- .replace('%1$s', `${parseInt(response.data.totalExported as string, 10).toLocaleString()} `)
- .replace('[link]', ` `)
- .replace('[/link]', ' ');
- jQuery('#export_result_notice').html(`${resultMessage}
`).show();
- window.location.href = response.data.exportFileURL;
- MailPoet.trackEvent('Subscribers export completed', {
- 'Total exported': response.data.totalExported,
- 'File Format': exportFormat,
+ })
+ .always(() => {
+ MailPoet.Modal.loading(false);
+ })
+ .done((response) => {
+ const resultMessage = MailPoet.I18n.t('exportMessage')
+ .replace(
+ '%1$s',
+ `${parseInt(
+ response.data.totalExported as string,
+ 10,
+ ).toLocaleString()} `,
+ )
+ .replace(
+ '[link]',
+ ``,
+ )
+ .replace('[/link]', ' ');
+ jQuery('#export_result_notice').html(`${resultMessage}
`).show();
+ window.location.href = response.data.exportFileURL;
+ MailPoet.trackEvent('Subscribers export completed', {
+ 'Total exported': response.data.totalExported,
+ 'File Format': exportFormat,
+ });
+ })
+ .fail((response: ErrorResponse) => {
+ if (response.errors.length > 0) {
+ MailPoet.Notice.error(
+ response.errors.map((error) => error.message),
+ { scroll: true },
+ );
+ }
});
- }).fail((response:ErrorResponse) => {
- if (response.errors.length > 0) {
- MailPoet.Notice.error(response.errors.map((error) => error.message), { scroll: true });
- }
- });
});
});
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import.jsx b/mailpoet/assets/js/src/subscribers/importExport/import.jsx
index 2cfb747be1..a3945f612f 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import.jsx
@@ -1,8 +1,6 @@
import { useState } from 'react';
import ReactDOM from 'react-dom';
-import {
- HashRouter, Switch, Route, Redirect,
-} from 'react-router-dom';
+import { HashRouter, Switch, Route, Redirect } from 'react-router-dom';
import ScrollToTop from 'common/scroll_to_top.jsx';
import { GlobalContext, useGlobalContextValue } from 'context/index.jsx';
@@ -18,7 +16,8 @@ const container = document.getElementById('import_container');
const subscribersLimitForValidation = 100;
function ImportSubscribers() {
- const [stepMethodSelectionData, setStepMethodSelectionData] = useState(undefined);
+ const [stepMethodSelectionData, setStepMethodSelectionData] =
+ useState(undefined);
const [stepDataManipulationData, setStepDataManipulationData] = useState({});
const contextValue = useGlobalContextValue(window);
return (
@@ -29,9 +28,7 @@ function ImportSubscribers() {
(
-
- )}
+ render={(props) => }
/>
)}
/>
- }
- />
+ } />
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/clean_list.tsx b/mailpoet/assets/js/src/subscribers/importExport/import/clean_list.tsx
index 9b9d20b844..fe055781d2 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/clean_list.tsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/clean_list.tsx
@@ -12,11 +12,14 @@ export default function CleanList({ onProceed }: Props): JSX.Element {
{MailPoet.I18n.t('cleanListText2')}
{onProceed && (
-
- {MailPoet.I18n.t('listCleaningGotIt')}
-
+
+ {MailPoet.I18n.t('listCleaningGotIt')}
+
)}
-
+
{MailPoet.I18n.t('tryListCleaning')}
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/sanitize_csv_data.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/sanitize_csv_data.jsx
index 256a280b03..5f6d6871f6 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/sanitize_csv_data.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/sanitize_csv_data.jsx
@@ -2,7 +2,10 @@
// single/double quotes and convert to lowercase
import _ from 'underscore';
-const isRoleEmail = (email) => window.roleBasedEmails.findIndex((element) => email.startsWith(`${element}@`)) >= 0;
+const isRoleEmail = (email) =>
+ window.roleBasedEmails.findIndex((element) =>
+ email.startsWith(`${element}@`),
+ ) >= 0;
const detectAndCleanupEmail = (emailString) => {
let test;
@@ -69,8 +72,10 @@ function sanitizeCSVData(csvData) {
if (emailColumnPosition === null) {
Object.keys(rowData).forEach((column) => {
emailAddress = detectAndCleanupEmail(rowData[column]);
- if (emailColumnPosition === null
- && window.mailpoet_email_regex.test(emailAddress)) {
+ if (
+ emailColumnPosition === null &&
+ window.mailpoet_email_regex.test(emailAddress)
+ ) {
emailColumnPosition = column;
// add current e-mail to an object index
parsedEmails[emailAddress] = true;
@@ -78,8 +83,7 @@ function sanitizeCSVData(csvData) {
processedSubscribers[emailAddress] = rowData;
}
});
- if (emailColumnPosition === null
- && parseInt(rowCount, 10) === 0) {
+ if (emailColumnPosition === null && parseInt(rowCount, 10) === 0) {
isHeaderFound = true;
processedSubscribers[0] = rowData;
}
@@ -106,19 +110,18 @@ function sanitizeCSVData(csvData) {
// if the header options is set, there should be at least
// 2 data rows, otherwise at least 1 data row
if (
- processedSubscribers
- && (
- (isHeaderFound && processedSubscribers.length >= 2)
- || (!isHeaderFound && processedSubscribers.length >= 1)
- )
+ processedSubscribers &&
+ ((isHeaderFound && processedSubscribers.length >= 2) ||
+ (!isHeaderFound && processedSubscribers.length >= 1))
) {
// since we assume that the header line is always present, we need
// to detect the header by checking if it contains a valid e-mail address
return {
- header: (!window.mailpoet_email_regex.test(
- processedSubscribers[0][emailColumnPosition]
+ header: !window.mailpoet_email_regex.test(
+ processedSubscribers[0][emailColumnPosition],
)
- ) ? processedSubscribers.shift() : null,
+ ? processedSubscribers.shift()
+ : null,
subscribers: processedSubscribers,
subscribersCount: processedSubscribers.length,
duplicate: _.uniq(duplicateEmails),
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_clean_list.tsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_clean_list.tsx
index 847c1136f0..d6f3837795 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_clean_list.tsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_clean_list.tsx
@@ -1,6 +1,10 @@
import { RouteComponentProps } from 'react-router-dom';
import CleanList from './clean_list';
-export default function StepCleanList({ history }: RouteComponentProps): JSX.Element {
- return history.push('step_method_selection')} />;
+export default function StepCleanList({
+ history,
+}: RouteComponentProps): JSX.Element {
+ return (
+ history.push('step_method_selection')} />
+ );
}
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation.jsx
index b6a4345770..4c4fdc0f07 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation.jsx
@@ -30,17 +30,17 @@ function StepDataManipulation({
setStepDataManipulationData,
}) {
const [selectedSegments, setSelectedSegments] = useState([]);
- const [updateExistingSubscribers, setUpdateExistingSubscribers] = useState(true);
- const [newSubscribersStatus, setNewSubscribersStatus] = useState('subscribed');
- const [existingSubscribersStatus, setExistingSubscribersStatus] = useState('dontUpdate');
- useEffect(
- () => {
- if (typeof (stepMethodSelectionData) === 'undefined') {
- history.replace('step_method_selection');
- }
- },
- [stepMethodSelectionData, history],
- );
+ const [updateExistingSubscribers, setUpdateExistingSubscribers] =
+ useState(true);
+ const [newSubscribersStatus, setNewSubscribersStatus] =
+ useState('subscribed');
+ const [existingSubscribersStatus, setExistingSubscribersStatus] =
+ useState('dontUpdate');
+ useEffect(() => {
+ if (typeof stepMethodSelectionData === 'undefined') {
+ history.replace('step_method_selection');
+ }
+ }, [stepMethodSelectionData, history]);
const importSubscribers = () => {
doImport(
@@ -52,18 +52,16 @@ function StepDataManipulation({
(importResults) => {
setStepDataManipulationData(importResults);
history.push('step_results');
- }
+ },
);
};
- if (typeof (stepMethodSelectionData) === 'undefined') {
+ if (typeof stepMethodSelectionData === 'undefined') {
return null;
}
return (
-
+
0}
- onPreviousAction={() => (
+ onPreviousAction={() =>
history.push(
- getPreviousStepLink(stepMethodSelectionData, subscribersLimitForValidation)
+ getPreviousStepLink(
+ stepMethodSelectionData,
+ subscribersLimitForValidation,
+ ),
)
- )}
+ }
onNextAction={importSubscribers}
isLastStep
/>
@@ -109,12 +110,15 @@ StepDataManipulation.propTypes = {
invalid: PropTypes.arrayOf(PropTypes.string),
role: PropTypes.arrayOf(PropTypes.string),
subscribersCount: PropTypes.number,
- subscribers: PropTypes.arrayOf( // all subscribers
- PropTypes.arrayOf( // single subscribers
- PropTypes.oneOfType( // properties of a subscriber
- [PropTypes.string, PropTypes.number]
- )
- )
+ subscribers: PropTypes.arrayOf(
+ // all subscribers
+ PropTypes.arrayOf(
+ // single subscribers
+ PropTypes.oneOfType(
+ // properties of a subscriber
+ [PropTypes.string, PropTypes.number],
+ ),
+ ),
),
}),
subscribersLimitForValidation: PropTypes.number.isRequired,
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/consent_description.tsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/consent_description.tsx
index 041f53a5c6..3fa75a63c0 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/consent_description.tsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/consent_description.tsx
@@ -1,9 +1,8 @@
import MailPoet from 'mailpoet';
import ReactStringReplace from 'react-string-replace';
-export function ConsentDescription() : JSX.Element {
+export function ConsentDescription(): JSX.Element {
return (
-
{ReactStringReplace(
MailPoet.I18n.t('consentSubscribed'),
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/create_new_segment.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/create_new_segment.jsx
index 3eae116ecc..ee19de0c20 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/create_new_segment.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/create_new_segment.jsx
@@ -23,24 +23,26 @@ export default (onCreateSegment) => {
name: segmentName,
description: segmentDescription,
},
- }).done((response) => {
- onCreateSegment({
- id: response.data.id,
- name: response.data.name,
- text: response.data.name, // Required select2 property
- subscriberCount: 0,
- });
+ })
+ .done((response) => {
+ onCreateSegment({
+ id: response.data.id,
+ name: response.data.name,
+ text: response.data.name, // Required select2 property
+ subscriberCount: 0,
+ });
- MailPoet.Modal.close();
- }).fail((response) => {
- if (response.errors.length > 0) {
- MailPoet.Notice.hide();
- MailPoet.Notice.error(
- response.errors.map((error) => error.message),
- { positionAfter: '#new_segment_name' }
- );
- }
- });
+ MailPoet.Modal.close();
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ MailPoet.Notice.hide();
+ MailPoet.Notice.error(
+ response.errors.map((error) => error.message),
+ { positionAfter: '#new_segment_name' },
+ );
+ }
+ });
});
jQuery('#new_segment_cancel').on('click', () => {
MailPoet.Modal.close();
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/do_import.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/do_import.jsx
index 73053a358f..0d806d07fd 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/do_import.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/do_import.jsx
@@ -9,7 +9,7 @@ export default (
newSubscribersStatus,
existingSubscribersStatus,
updateExistingSubscribers,
- onImportComplete
+ onImportComplete,
) => {
const columns = {};
const queue = new jQuery.AsyncQueue();
@@ -24,19 +24,15 @@ export default (
};
MailPoet.Modal.loading(true);
- const splitSubscribers = (localSubscribers, size) => (
+ const splitSubscribers = (localSubscribers, size) =>
localSubscribers.reduce((res, item, index) => {
if (index % size === 0) {
res.push([]);
}
res[res.length - 1].push(item);
return res;
- }, [])
- );
- const clickSubscribers = splitSubscribers(
- subscribersToImport,
- batchSize
- );
+ }, []);
+ const clickSubscribers = splitSubscribers(subscribersToImport, batchSize);
_.each(
jQuery('select.mailpoet_subscribers_column_data_match'),
@@ -46,7 +42,7 @@ export default (
return;
}
columns[columnId] = { index: columnIndex };
- }
+ },
);
_.each(clickSubscribers, () => {
@@ -65,22 +61,25 @@ export default (
existingSubscribersStatus,
updateSubscribers: updateExistingSubscribers,
}),
- }).done((response) => {
- const added = response.data.added_to_segment_with_welcome_notification;
- importResult.created += response.data.created;
- importResult.updated += response.data.updated;
- importResult.segments = response.data.segments;
- importResult.added_to_segment_with_welcome_notification = added;
- addQueue.run();
- }).fail((response) => {
- MailPoet.Modal.loading(false);
- if (response.errors.length > 0) {
- MailPoet.Notice.error(
- response.errors.map((error) => error.message),
- { scroll: true }
- );
- }
- });
+ })
+ .done((response) => {
+ const added =
+ response.data.added_to_segment_with_welcome_notification;
+ importResult.created += response.data.created;
+ importResult.updated += response.data.updated;
+ importResult.segments = response.data.segments;
+ importResult.added_to_segment_with_welcome_notification = added;
+ addQueue.run();
+ })
+ .fail((response) => {
+ MailPoet.Modal.loading(false);
+ if (response.errors.length > 0) {
+ MailPoet.Notice.error(
+ response.errors.map((error) => error.message),
+ { scroll: true },
+ );
+ }
+ });
batchNumber += 1;
});
});
@@ -90,18 +89,17 @@ export default (
queue.onComplete(() => {
MailPoet.Modal.loading(false);
if (
- importResult.errors.length > 0
- && !importResult.updated
- && !importResult.created
+ importResult.errors.length > 0 &&
+ !importResult.updated &&
+ !importResult.created
) {
MailPoet.Notice.error(_.flatten(importResult.errors));
} else {
importResult.segments = _.map(
- _.filter(
- importResult.segments,
- (segment) => segments.includes(segment.id)
+ _.filter(importResult.segments, (segment) =>
+ segments.includes(segment.id),
),
- (data) => data.name
+ (data) => data.name,
);
onImportComplete(importResult);
}
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/existing_subscribers_status.tsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/existing_subscribers_status.tsx
index dd30bdef61..2ef84b7956 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/existing_subscribers_status.tsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/existing_subscribers_status.tsx
@@ -12,10 +12,13 @@ interface Props {
export function ExistingSubscribersStatus({
existingSubscribersStatus,
setExistingSubscribersStatus,
-}:Props) :JSX.Element {
- const handleChange = useCallback((event): void => {
- setExistingSubscribersStatus(event.target.value);
- }, [setExistingSubscribersStatus]);
+}: Props): JSX.Element {
+ const handleChange = useCallback(
+ (event): void => {
+ setExistingSubscribersStatus(event.target.value);
+ },
+ [setExistingSubscribersStatus],
+ );
return (
<>
@@ -36,7 +39,9 @@ export function ExistingSubscribersStatus({
{MailPoet.I18n.t('dontUpdate')}
{MailPoet.I18n.t('subscribed')}
{MailPoet.I18n.t('inactive')}
- {MailPoet.I18n.t('unsubscribed')}
+
+ {MailPoet.I18n.t('unsubscribed')}
+
>
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_column_selection.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_column_selection.jsx
index 409276ac6c..8045600dd4 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_column_selection.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_column_selection.jsx
@@ -19,76 +19,83 @@ export default () => {
title: MailPoet.I18n.t('addNewField'),
template: jQuery('#form_template_field_form').html(),
});
- jQuery('#form_field_new').parsley().on('form:submit', () => {
- // get data
- const data = jQuery('#form_field_new').mailpoetSerializeObject();
+ jQuery('#form_field_new')
+ .parsley()
+ .on('form:submit', () => {
+ // get data
+ const data = jQuery('#form_field_new').mailpoetSerializeObject();
- // save custom field
- MailPoet.Ajax.post({
- api_version: window.mailpoet_api_version,
- endpoint: 'customFields',
- action: 'save',
- data,
- }).done((response) => {
- const newColumnData = {
- id: response.data.id,
- name: response.data.name,
- text: response.data.name, // Required for select2 default functionality
- type: response.data.type,
- params: response.data.params,
- custom: true,
- };
- // if this is the first custom column, create an "optgroup"
- if (window.mailpoetColumnsSelect2.length === 2) {
- window.mailpoetColumnsSelect2.push({
- name: MailPoet.I18n.t('userColumns'),
- children: [],
+ // save custom field
+ MailPoet.Ajax.post({
+ api_version: window.mailpoet_api_version,
+ endpoint: 'customFields',
+ action: 'save',
+ data,
+ })
+ .done((response) => {
+ const newColumnData = {
+ id: response.data.id,
+ name: response.data.name,
+ text: response.data.name, // Required for select2 default functionality
+ type: response.data.type,
+ params: response.data.params,
+ custom: true,
+ };
+ // if this is the first custom column, create an "optgroup"
+ if (window.mailpoetColumnsSelect2.length === 2) {
+ window.mailpoetColumnsSelect2.push({
+ name: MailPoet.I18n.t('userColumns'),
+ children: [],
+ });
+ }
+ window.mailpoetColumnsSelect2[2].children.push(newColumnData);
+ window.mailpoetColumns.push(newColumnData);
+ jQuery('select.mailpoet_subscribers_column_data_match').each(
+ () => {
+ jQuery(selectElement)
+ .html('')
+ .select2('destroy')
+ .select2(select2Config);
+ },
+ );
+ jQuery(selectElement).data('column-id', newColumnData.id);
+ // close popup
+ MailPoet.Modal.close();
+ })
+ .fail((response) => {
+ if (response.errors.length > 0) {
+ MailPoet.Notice.error(
+ response.errors.map((error) => error.message),
+ { positionAfter: '#field_name' },
+ );
+ }
});
- }
- window.mailpoetColumnsSelect2[2].children.push(newColumnData);
- window.mailpoetColumns.push(newColumnData);
- jQuery('select.mailpoet_subscribers_column_data_match')
- .each(() => {
- jQuery(selectElement)
- .html('')
- .select2('destroy')
- .select2(select2Config);
- });
- jQuery(selectElement).data('column-id', newColumnData.id);
- // close popup
- MailPoet.Modal.close();
- }).fail((response) => {
- if (response.errors.length > 0) {
- MailPoet.Notice.error(
- response.errors.map((error) => error.message),
- { positionAfter: '#field_name' }
- );
- }
+ return false;
});
- return false;
- });
} else {
// CHANGE COLUMN
// check for duplicate values in all select options
- jQuery('select.mailpoet_subscribers_column_data_match')
- .each(() => {
- const element = selectElement;
- const elementId = jQuery(element).val();
- // if another column has the same value and it's not an 'ignore',
- // prompt user
- if (elementId === selectedOptionId
- && elementId !== 'ignore') {
- if (
- // eslint-disable-next-line no-restricted-globals, no-alert
- confirm(`${MailPoet.I18n.t('selectedValueAlreadyMatched')} ${MailPoet.I18n.t('confirmCorrespondingColumn')}`)
- ) {
- jQuery(element).data('column-id', 'ignore');
- } else {
- selectEvent.preventDefault();
- jQuery(selectElement).select2('close');
- }
+ jQuery('select.mailpoet_subscribers_column_data_match').each(() => {
+ const element = selectElement;
+ const elementId = jQuery(element).val();
+ // if another column has the same value and it's not an 'ignore',
+ // prompt user
+ if (elementId === selectedOptionId && elementId !== 'ignore') {
+ if (
+ // eslint-disable-next-line no-restricted-globals, no-alert
+ confirm(
+ `${MailPoet.I18n.t(
+ 'selectedValueAlreadyMatched',
+ )} ${MailPoet.I18n.t('confirmCorrespondingColumn')}`,
+ )
+ ) {
+ jQuery(element).data('column-id', 'ignore');
+ } else {
+ selectEvent.preventDefault();
+ jQuery(selectElement).select2('close');
}
- });
+ }
+ });
}
})
.on('select2:select', (selectEvent) => {
@@ -100,7 +107,9 @@ export default () => {
// see: https://github.com/select2/select2/issues/5993 and feel free to remove if the bug
// has been fixed and our select2/jQuery libraries have been updated.
.on('select2:open', () => {
- const inputs = document.querySelectorAll('.select2-search__field[aria-controls]');
+ const inputs = document.querySelectorAll(
+ '.select2-search__field[aria-controls]',
+ );
if (inputs.length === 0) {
return;
}
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_segment_selection.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_segment_selection.jsx
index e34de8be04..d1ab7c6e5e 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_segment_selection.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/generate_segment_selection.jsx
@@ -24,7 +24,9 @@ export function createSelection(segments, onSelectionChange) {
templateSelection: templateRendered,
})
.on('change', (event) => {
- const segmentSelectionNotice = jQuery('[data-id="notice_segmentSelection"]');
+ const segmentSelectionNotice = jQuery(
+ '[data-id="notice_segmentSelection"]',
+ );
if (!event.currentTarget.value) {
if (!segmentSelectionNotice.length) {
MailPoet.Notice.error(MailPoet.I18n.t('segmentSelectionRequired'), {
@@ -45,11 +47,8 @@ export function createSelection(segments, onSelectionChange) {
export function destroySelection() {
const segmentSelectElement = jQuery('select#mailpoet_segments_select');
if (segmentSelectElement.data('select2')) {
- segmentSelectElement
- .select2('destroy');
- segmentSelectElement
- .find('option')
- .remove();
+ segmentSelectElement.select2('destroy');
+ segmentSelectElement.find('option').remove();
segmentSelectElement
.off('select2:unselecting')
.off('change')
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/match_columns.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/match_columns.jsx
index dc3b405b33..f82e57cbf8 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/match_columns.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/match_columns.jsx
@@ -6,37 +6,38 @@ export default (subscribers, header) => {
let headerName;
let headerNameMatch;
// go through all elements of the first row in subscribers data
- Object
- .keys(subscribers[0])
- .forEach((i) => {
- columnData = subscribers[0][i];
- columnId = 'ignore'; // set default column type
- // if the column is not undefined and has a valid e-mail, set type as email
- if (columnData % 1 !== 0 && window.mailpoet_email_regex.test(columnData)) {
- columnId = 'email';
- } else if (header) {
- headerName = header[i];
- headerNameMatch = window.mailpoetColumns.map((el) => el.name).indexOf(headerName);
- // set column type using header
- if (headerNameMatch !== -1) {
- columnId = window.mailpoetColumns[headerNameMatch].id;
- } else if (headerName) { // set column type using header name
- if (/first|first name|given name/i.test(headerName)) {
- columnId = 'first_name';
- } else if (/last|last name/i.test(headerName)) {
- columnId = 'last_name';
- }
+ Object.keys(subscribers[0]).forEach((i) => {
+ columnData = subscribers[0][i];
+ columnId = 'ignore'; // set default column type
+ // if the column is not undefined and has a valid e-mail, set type as email
+ if (columnData % 1 !== 0 && window.mailpoet_email_regex.test(columnData)) {
+ columnId = 'email';
+ } else if (header) {
+ headerName = header[i];
+ headerNameMatch = window.mailpoetColumns
+ .map((el) => el.name)
+ .indexOf(headerName);
+ // set column type using header
+ if (headerNameMatch !== -1) {
+ columnId = window.mailpoetColumns[headerNameMatch].id;
+ } else if (headerName) {
+ // set column type using header name
+ if (/first|first name|given name/i.test(headerName)) {
+ columnId = 'first_name';
+ } else if (/last|last name/i.test(headerName)) {
+ columnId = 'last_name';
}
}
- // make sure the column id has not been previously selected
- // (e.g., subscriber_first_name shouldn't be autodetected twice),
- // except for "ignore"
- columnId = (columnId !== 'ignore'
- && displayedColumnsIds.indexOf(columnId) === -1)
+ }
+ // make sure the column id has not been previously selected
+ // (e.g., subscriber_first_name shouldn't be autodetected twice),
+ // except for "ignore"
+ columnId =
+ columnId !== 'ignore' && displayedColumnsIds.indexOf(columnId) === -1
? columnId
: 'ignore';
- displayedColumns[i] = { column_id: columnId };
- displayedColumnsIds.push(columnId);
- });
+ displayedColumns[i] = { column_id: columnId };
+ displayedColumnsIds.push(columnId);
+ });
return displayedColumns;
};
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/match_table.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/match_table.jsx
index 3be99f92eb..f1a4cbaa05 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/match_table.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/match_table.jsx
@@ -12,32 +12,33 @@ function ColumnDataMatch({ header, subscribers }) {
return (
{MailPoet.I18n.t('matchData')}
- {
- matchedColumnTypes.map((columnType, i) => (
-
- {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
-
-
- ))
- }
+ {matchedColumnTypes.map((columnType, i) => (
+
+ {/* eslint-disable-next-line jsx-a11y/control-has-associated-label */}
+
+
+ ))}
);
}
ColumnDataMatch.propTypes = {
- subscribers: PropTypes.arrayOf( // all subscribers
- PropTypes.arrayOf( // single subscribers
- PropTypes.oneOfType( // properties of a subscriber
- [PropTypes.string, PropTypes.number]
- )
- )
+ subscribers: PropTypes.arrayOf(
+ // all subscribers
+ PropTypes.arrayOf(
+ // single subscribers
+ PropTypes.oneOfType(
+ // properties of a subscriber
+ [PropTypes.string, PropTypes.number],
+ ),
+ ),
).isRequired,
header: PropTypes.arrayOf(PropTypes.string),
};
@@ -50,7 +51,9 @@ function Header({ header }) {
return (
- {header.map((headerName) => {headerName} )}
+ {header.map((headerName) => (
+ {headerName}
+ ))}
);
}
@@ -75,9 +78,10 @@ function Subscriber({ subscriber, index }) {
}
Subscriber.propTypes = {
subscriber: PropTypes.arrayOf(
- PropTypes.oneOfType( // properties of a subscriber
- [PropTypes.string, PropTypes.number]
- )
+ PropTypes.oneOfType(
+ // properties of a subscriber
+ [PropTypes.string, PropTypes.number],
+ ),
).isRequired,
index: PropTypes.node.isRequired,
};
@@ -87,52 +91,43 @@ function Subscribers({ subscribers, subscribersCount }) {
const fillerArray = Array(subscribers[0].length).fill(filler);
return (
<>
- {
- subscribers
- .slice(0, MAX_SUBSCRIBERS_SHOWN)
- .map((subscriber, i) => (
- // eslint-disable-next-line react/no-array-index-key
-
-
-
- ))
- }
- {
- subscribersCount > MAX_SUBSCRIBERS_SHOWN + 1
- ?
- : null
- }
- {
- subscribersCount > MAX_SUBSCRIBERS_SHOWN
- ? (
-
-
-
- )
- : null
- }
+ {subscribers.slice(0, MAX_SUBSCRIBERS_SHOWN).map((subscriber, i) => (
+ // eslint-disable-next-line react/no-array-index-key
+
+
+
+ ))}
+ {subscribersCount > MAX_SUBSCRIBERS_SHOWN + 1 ? (
+
+
+
+ ) : null}
+ {subscribersCount > MAX_SUBSCRIBERS_SHOWN ? (
+
+
+
+ ) : null}
>
);
}
Subscribers.propTypes = {
subscribersCount: PropTypes.number.isRequired,
- subscribers: PropTypes.arrayOf( // all subscribers
- PropTypes.arrayOf( // single subscribers
- PropTypes.oneOfType( // properties of a subscriber
- [PropTypes.string, PropTypes.number]
- )
- )
+ subscribers: PropTypes.arrayOf(
+ // all subscribers
+ PropTypes.arrayOf(
+ // single subscribers
+ PropTypes.oneOfType(
+ // properties of a subscriber
+ [PropTypes.string, PropTypes.number],
+ ),
+ ),
).isRequired,
};
-function MatchTable({
- subscribersCount,
- subscribers,
- header,
-}) {
+function MatchTable({ subscribersCount, subscribers, header }) {
useLayoutEffect(() => {
generateColumnSelection();
});
@@ -145,7 +140,10 @@ function MatchTable({
{header ? : null}
-
+
@@ -154,12 +152,15 @@ function MatchTable({
MatchTable.propTypes = {
subscribersCount: PropTypes.number,
- subscribers: PropTypes.arrayOf( // all subscribers
- PropTypes.arrayOf( // single subscribers
- PropTypes.oneOfType( // properties of a subscriber
- [PropTypes.string, PropTypes.number]
- )
- )
+ subscribers: PropTypes.arrayOf(
+ // all subscribers
+ PropTypes.arrayOf(
+ // single subscribers
+ PropTypes.oneOfType(
+ // properties of a subscriber
+ [PropTypes.string, PropTypes.number],
+ ),
+ ),
),
header: PropTypes.arrayOf(PropTypes.string),
};
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/new_subscribers_status.tsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/new_subscribers_status.tsx
index f43ffb38ab..b0dafdd355 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/new_subscribers_status.tsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/new_subscribers_status.tsx
@@ -12,15 +12,20 @@ interface Props {
export function NewSubscribersStatus({
newSubscribersStatus,
setNewSubscribersStatus,
-}:Props) :JSX.Element {
- const handleChange = useCallback((event): void => {
- setNewSubscribersStatus(event.target.value);
- }, [setNewSubscribersStatus]);
+}: Props): JSX.Element {
+ const handleChange = useCallback(
+ (event): void => {
+ setNewSubscribersStatus(event.target.value);
+ },
+ [setNewSubscribersStatus],
+ );
return (
<>
- {MailPoet.I18n.t('newSubscribersStatus')}
+
+ {MailPoet.I18n.t('newSubscribersStatus')}
+
@@ -33,7 +38,9 @@ export function NewSubscribersStatus({
>
{MailPoet.I18n.t('subscribed')}
{MailPoet.I18n.t('inactive')}
- {MailPoet.I18n.t('unsubscribed')}
+
+ {MailPoet.I18n.t('unsubscribed')}
+
>
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/select_segment.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/select_segment.jsx
index ae259408b0..dcc6fa56e0 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/select_segment.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/select_segment.jsx
@@ -5,12 +5,16 @@ import PropTypes from 'prop-types';
import { GlobalContext } from 'context/index.jsx';
import Button from 'common/button/button';
-import { createSelection, destroySelection } from './generate_segment_selection.jsx';
+import {
+ createSelection,
+ destroySelection,
+} from './generate_segment_selection.jsx';
import createNewSegment from './create_new_segment.jsx';
function SelectSegment({ setSelectedSegments }) {
const { segments: segmentsContext } = useContext(GlobalContext);
- const { all: originalSegments, updateAll: updateContextSegments } = segmentsContext;
+ const { all: originalSegments, updateAll: updateContextSegments } =
+ segmentsContext;
const [selectionSegments, setSelectionSegments] = useState(originalSegments);
useLayoutEffect(() => {
@@ -48,7 +52,10 @@ function SelectSegment({ setSelectedSegments }) {
- createNewSegment(onCreateNewSegment)}>
+ createNewSegment(onCreateNewSegment)}
+ >
{MailPoet.I18n.t('createANewList')}
diff --git a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/update_existing_subscribers.jsx b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/update_existing_subscribers.jsx
index 707740caa7..3912de0b47 100644
--- a/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/update_existing_subscribers.jsx
+++ b/mailpoet/assets/js/src/subscribers/importExport/import/step_data_manipulation/update_existing_subscribers.jsx
@@ -2,7 +2,10 @@ import MailPoet from 'mailpoet';
import PropTypes from 'prop-types';
import Radio from 'common/form/radio/radio';
-function UpdateExistingSubscribers({ updateExistingSubscribers, setUpdateExistingSubscribers }) {
+function UpdateExistingSubscribers({
+ updateExistingSubscribers,
+ setUpdateExistingSubscribers,
+}) {
return (
<>