From 52454e29f0ceb035d0d6943a9573642dd68d710c Mon Sep 17 00:00:00 2001
From: Brezo Cordero <8002881+brezocordero@users.noreply.github.com>
Date: Fri, 22 Mar 2024 21:31:45 -0500
Subject: [PATCH] Add tier features

[MAILPOET-5906]
---
 .../_premium-tiers-page.scss                  | 32 +++++++++++++++++++
 mailpoet/assets/img/upgrade/check.svg         |  4 +++
 mailpoet/assets/img/upgrade/plus-orange.svg   |  3 ++
 mailpoet/assets/img/upgrade/plus.svg          |  4 +++
 mailpoet/views/upgrade_tiers.html             | 28 ++++++++++++++++
 5 files changed, 71 insertions(+)
 create mode 100644 mailpoet/assets/img/upgrade/check.svg
 create mode 100644 mailpoet/assets/img/upgrade/plus-orange.svg
 create mode 100644 mailpoet/assets/img/upgrade/plus.svg

diff --git a/mailpoet/assets/css/src/components-plugin/_premium-tiers-page.scss b/mailpoet/assets/css/src/components-plugin/_premium-tiers-page.scss
index 6119530357..62051b4f99 100644
--- a/mailpoet/assets/css/src/components-plugin/_premium-tiers-page.scss
+++ b/mailpoet/assets/css/src/components-plugin/_premium-tiers-page.scss
@@ -135,6 +135,38 @@
       }
     }
   }
+
+  p {
+    color: $color-gutenberg-grey-900;
+    font-size: 1rem;
+    line-height: 1.5;
+    margin: 0 0 8px;
+  }
+
+  ul {
+    color: $color-gutenberg-grey-900;
+    font-size: 1rem;
+    line-height: 1.5;
+    margin: 0 0 8px;
+    padding-inline-start: 24px;
+
+    li {
+      list-style-image: url('../../img/upgrade/plus.svg');
+      margin-bottom: 8px;
+    }
+
+    &.free {
+      li {
+        list-style-image: url('../../img/upgrade/check.svg');
+      }
+    }
+
+    &.business {
+      li {
+        list-style-image: url('../../img/upgrade/plus-orange.svg');
+      }
+    }
+  }
 }
 
 .mailpoet-tiers-page-price-divider {
diff --git a/mailpoet/assets/img/upgrade/check.svg b/mailpoet/assets/img/upgrade/check.svg
new file mode 100644
index 0000000000..04885ed3cf
--- /dev/null
+++ b/mailpoet/assets/img/upgrade/check.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <rect width="20" height="20" rx="4" fill="white"/>
+  <path d="M15 6.77568C15 7.20144 14.7778 7.61621 14.3341 8.02053L14.2655 8.08068L10.3806 11.6353C9.55579 12.3885 8.85201 12.9717 8.27225 13.3828C7.69249 13.7939 7.28251 14 7.0435 14C6.79245 14 6.47999 13.897 6.10673 13.6914C5.73347 13.4853 5.49265 13.2735 5.38429 13.0554C5.29278 12.8728 5.20488 12.4873 5.123 11.8974C5.03786 11.2613 4.99684 10.6213 5.00019 9.98091C5.00019 9.60588 5.1802 9.2591 5.54022 8.94109C5.90144 8.62256 6.29938 8.46303 6.73405 8.46303C7.14885 8.46303 7.39629 8.79255 7.47576 9.45159L7.49382 9.62105C7.56065 10.1268 7.63831 10.4804 7.72681 10.6797C7.81591 10.88 7.93571 10.9794 8.08622 10.9794C8.14884 10.9794 8.26623 10.9208 8.43781 10.8021C8.65214 10.6504 8.85743 10.4893 9.05309 10.3193L13.0446 6.885C13.3799 6.59366 13.6797 6.37346 13.9422 6.22439C14.2065 6.0748 14.4311 6 14.6147 6C14.7532 6 14.8519 6.04551 14.9097 6.13652C14.9687 6.22805 14.9976 6.38078 14.9976 6.59523V6.77568H15Z" fill="#071C6D"/>
+</svg>
diff --git a/mailpoet/assets/img/upgrade/plus-orange.svg b/mailpoet/assets/img/upgrade/plus-orange.svg
new file mode 100644
index 0000000000..542a83dc0b
--- /dev/null
+++ b/mailpoet/assets/img/upgrade/plus-orange.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.2077 5.79976C11.2859 5.41451 10.9685 5.01964 10.4987 4.91781C10.0289 4.81597 9.06235 5.52706 8.98412 5.91231L8.36414 9.00906L4.91241 9.28534C4.45065 9.29349 4.06768 9.76456 4.07499 10.2062C4.08229 10.6478 4.86613 11.2633 5.3279 11.2552L7.92656 11.1947L7.40007 13.8245C7.32184 14.2097 7.91749 15.2137 8.38729 15.3155C8.85709 15.4173 9.53695 13.8026 9.61518 13.4173L10.0903 11.1444L13.3113 11.0695C13.7731 11.0613 14.7655 10.3237 14.7582 9.88212C14.7509 9.44051 12.6846 8.69207 12.2228 8.70022L10.5737 8.83221L11.2077 5.79976Z" fill="#FE5301"/>
+</svg>
diff --git a/mailpoet/assets/img/upgrade/plus.svg b/mailpoet/assets/img/upgrade/plus.svg
new file mode 100644
index 0000000000..afe6e43698
--- /dev/null
+++ b/mailpoet/assets/img/upgrade/plus.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
+  <rect x="0.666504" width="19.3574" height="20" rx="4" fill="white"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M11.5407 5.79976C11.6189 5.41451 11.3015 5.01964 10.8317 4.91781C10.3619 4.81597 9.39536 5.52706 9.31713 5.91231L8.69714 9.00906L5.24542 9.28534C4.78365 9.29349 4.40069 9.76456 4.408 10.2062C4.4153 10.6478 5.19914 11.2633 5.66091 11.2552L8.25956 11.1947L7.73307 13.8245C7.65484 14.2097 8.2505 15.2137 8.7203 15.3155C9.1901 15.4173 9.86996 13.8026 9.94819 13.4173L10.4234 11.1444L13.6443 11.0695C14.1061 11.0613 15.0985 10.3237 15.0912 9.88212C15.0839 9.44051 13.0176 8.69207 12.5558 8.70022L10.9067 8.83221L11.5407 5.79976Z" fill="#071C6D"/>
+</svg>
diff --git a/mailpoet/views/upgrade_tiers.html b/mailpoet/views/upgrade_tiers.html
index 629aeac951..159aa78f70 100644
--- a/mailpoet/views/upgrade_tiers.html
+++ b/mailpoet/views/upgrade_tiers.html
@@ -52,6 +52,14 @@
           <p><%= __('Up to 500 subscribers') %></p>
         </div>
         <%= include('upgrade/upgrade_button.html', {label:__('Get Free'), button_class: 'is-secondary', tier: 0}) %>
+        <ul class="free">
+          <li><%= __('<b>1,500</b> emails per month, <b>500</b> emails per day') %></li>
+          <li><%= __('Basic email automations') %></li>
+          <li><%= __('Email and ecommerce marketing') %></li>
+          <li><%= __('Widget and popup subscription forms') %></li>
+          <li><%= __('Basic subscriber segmentation') %></li>
+          <li><%= __('Customizable  email templates') %></li>
+        </ul>
       </div>
       <div class="mailpoet-tiers-page-content__tier">
         <div class="mailpoet-tiers-page-tier-header">
@@ -83,6 +91,17 @@
           <p><%= __('for 500 subscribers') %></p>
         </div>
         <%= include('upgrade/upgrade_button.html', {label:__('Get Basic'), button_class:'is-secondary', tier: 1}) %>
+        <div>
+          <p><%= __('<b>All Free plan features</b>, plus:') %></p>
+          <ul>
+            <li><%= __('<b>5,000</b> emails per month, <b>no daily limit</b>') %></li>
+            <li><%= __('Custom email automations') %></li>
+            <li><%= __('Detailed email and automation statistics') %></li>
+            <li><%= __('Google Analytics tracking') %></li>
+            <li><%= __('No MailPoet logo in emails') %></li>
+            <li><%= __('24/7 email support') %></li>
+          </ul>
+        </div>
       </div>
       <div class="mailpoet-tiers-page-content__tier popular">
         <div class="mailpoet-tiers-page-label">
@@ -119,6 +138,15 @@
           <p><%= __('for 500 subscribers') %></p>
         </div>
         <%= include('upgrade/upgrade_button.html', {label:__('Get Pro'), button_class:'is-primary', tier: 2}) %>
+        <div>
+          <p><%= __('<b>All Basic features</b>, plus:') %></p>
+          <ul class="business">
+            <li><%= __('<b>7,500</b> emails per month, <b>no daily limit</b>') %></li>
+            <li><%= __('Email automation journeys with branching') %></li>
+            <li><%= __('Advanced subscriber segmentation') %></li>
+            <li><%= __('24/7 email support') %></li>
+          </ul>
+        </div>
       </div>
     </div>
     <figcaption>