From 2da4f5f3b9ca4931c2ee65f1c243a306f043f1d5 Mon Sep 17 00:00:00 2001
From: Oluwaseun Olorunsola <seun@oluwaseun.com.ng>
Date: Tue, 17 Jan 2023 16:34:29 +0100
Subject: [PATCH] Add basic accordion to group coupon data and free shipping
 field

MAILPOET-4762
---
 .../js/src/newsletter_editor/blocks/coupon.ts |  4 +
 .../templates/blocks/coupon/settings.hbs      | 80 ++++++++++++++-----
 2 files changed, 64 insertions(+), 20 deletions(-)

diff --git a/mailpoet/assets/js/src/newsletter_editor/blocks/coupon.ts b/mailpoet/assets/js/src/newsletter_editor/blocks/coupon.ts
index dba9527cfd..128bd546d3 100644
--- a/mailpoet/assets/js/src/newsletter_editor/blocks/coupon.ts
+++ b/mailpoet/assets/js/src/newsletter_editor/blocks/coupon.ts
@@ -66,6 +66,10 @@ Module.CouponBlockSettingsView = base.BlockSettingsView.extend({
         this.changeField,
         'expiryDay',
       ),
+      'change .mailpoet_field_coupon_free_shipping': _.partial(
+        this.changeBoolCheckboxField,
+        'freeShipping',
+      ),
       'change .mailpoet_field_coupon_alignment': _.partial(
         this.changeField,
         'styles.block.textAlign',
diff --git a/mailpoet/views/newsletter/templates/blocks/coupon/settings.hbs b/mailpoet/views/newsletter/templates/blocks/coupon/settings.hbs
index 90c671da9a..961cd755cf 100644
--- a/mailpoet/views/newsletter/templates/blocks/coupon/settings.hbs
+++ b/mailpoet/views/newsletter/templates/blocks/coupon/settings.hbs
@@ -15,36 +15,76 @@
 </div>
 
 <div class="mailpoet_field_coupon_source_create_new {{#ifCond model.source '===' 'useExisting'}}mailpoet_hidden{{/ifCond}}">
-  <div class="mailpoet_form_field">
-      <div class="mailpoet_form_field_type"><%= __('Discount type') %></div>
-      <div class="mailpoet_form_field_input_option mailpoet_form_field_input_nowrap">
+  <details open>
+    <summary>
+      <strong> <%= __('General') %> </strong>
+    </summary>
+    <div className="content">
+      <div class="mailpoet_form_field">
+        <div class="mailpoet_form_field_type"><%= __('Discount type') %></div>
+        <div class="mailpoet_form_field_input_option mailpoet_form_field_input_nowrap">
           <select id="mailpoet_field_coupon_discount_type" name="discount-type" class="mailpoet_select mailpoet_select_full mailpoet_field_coupon_discount_type">
-          {{#each availableDiscountTypes}}
+            {{#each availableDiscountTypes}}
               <option value="{{@key}}" {{#ifCond @key '==' ../model.discountType}}SELECTED{{/ifCond}}>{{ this }}</option>
-          {{/each}}
+            {{/each}}
           </select>
+        </div>
       </div>
-  </div>
-  <div class="mailpoet_form_field">
-      <label>
+
+      <div class="mailpoet_form_field">
+        <label>
           <div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Coupon amount') %></div>
           <div class="coupon_amount_wrapper">
-              {{#ifCond model.amountMax '===' 100}}
-                  <span class="amount_percentage_sign">%</span>
-              {{/ifCond}}
-              <input type="text" name="amount"  data-parsley-validate data-parsley-validation-threshold="0" data-parsley-required data-parsley-trigger="input"  data-parsley-type="digits" {{#ifCond model.amountMax '!==' null }} data-parsley-maxlength="{{ model.amountMax }}" max="{{ model.amountMax }}" {{/ifCond}}   class="mailpoet_input mailpoet_field_coupon_amount mailpoet_input_medium" value="{{ model.amount }}" min="0" />
+            {{#ifCond model.amountMax '===' 100}}
+              <span class="amount_percentage_sign">%</span>
+            {{/ifCond}}
+            <input type="text" name="amount"  data-parsley-validate data-parsley-validation-threshold="0" data-parsley-required data-parsley-trigger="input"  data-parsley-type="digits" {{#ifCond model.amountMax '!==' null }} data-parsley-maxlength="{{ model.amountMax }}" max="{{ model.amountMax }}" {{/ifCond}}   class="mailpoet_input mailpoet_field_coupon_amount mailpoet_input_medium" value="{{ model.amount }}" min="0" />
           </div>
-      </label>
-  </div>
-  <div class="mailpoet_form_field">
-      <label>
+        </label>
+      </div>
+
+      <div class="mailpoet_form_field">
+        <label>
           <div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Coupon expiry days') %></div>
           <div class="mailpoet_form_field_input_option">
-              <input type="text" data-parsley-validate data-parsley-required data-parsley-validation-threshold="0"  name="expiry-day" data-parsley-trigger="input"  data-parsley-type="digits" class="mailpoet_input mailpoet_input_small mailpoet_field_coupon_expiry_day" value="{{ model.expiryDay }}" />
-              <p class='description'><%= __('Number of days the coupon is valid after the email is sent') %></p>
+            <input type="text" data-parsley-validate data-parsley-required data-parsley-validation-threshold="0"  name="expiry-day" data-parsley-trigger="input"  data-parsley-type="digits" class="mailpoet_input mailpoet_input_small mailpoet_field_coupon_expiry_day" value="{{ model.expiryDay }}" />
+            <p class='description'><%= __('Number of days the coupon is valid after the email is sent') %></p>
           </div>
-      </label>
-  </div>
+        </label>
+      </div>
+
+      <div class="mailpoet_form_field">
+        <div class="mailpoet_form_field_checkbox_option">
+          <label>
+            <input type="checkbox" name="free-shipping" class="mailpoet_field_coupon_free_shipping"  {{#ifCond model.freeShipping '===' true }}CHECKED{{/ifCond}}/>
+            <%= __('Allow free shipping') %>
+          </label>
+        </div>
+      </div>
+    </div>
+  </details>
+
+  <details>
+    <summary>
+      <strong> <%= __('Usage restriction') %> </strong>
+    </summary>
+    <div className="content">
+
+      Content here
+
+    </div>
+  </details>
+
+  <details>
+    <summary>
+      <strong> <%= __('Usage limits') %> </strong>
+    </summary>
+    <div className="content">
+
+      Content here
+
+    </div>
+  </details>
 </div>
 
 <div class="mailpoet_form_field mailpoet_field_coupon_source_use_existing {{#ifCond model.source '!==' 'useExisting'}}mailpoet_hidden{{/ifCond}}">