Add basic accordion to group coupon data and free shipping field

MAILPOET-4762
This commit is contained in:
Oluwaseun Olorunsola
2023-01-17 16:34:29 +01:00
committed by Aschepikov
parent 7549ed7f0f
commit 2da4f5f3b9
2 changed files with 64 additions and 20 deletions

View File

@ -66,6 +66,10 @@ Module.CouponBlockSettingsView = base.BlockSettingsView.extend({
this.changeField, this.changeField,
'expiryDay', 'expiryDay',
), ),
'change .mailpoet_field_coupon_free_shipping': _.partial(
this.changeBoolCheckboxField,
'freeShipping',
),
'change .mailpoet_field_coupon_alignment': _.partial( 'change .mailpoet_field_coupon_alignment': _.partial(
this.changeField, this.changeField,
'styles.block.textAlign', 'styles.block.textAlign',

View File

@ -15,36 +15,76 @@
</div> </div>
<div class="mailpoet_field_coupon_source_create_new {{#ifCond model.source '===' 'useExisting'}}mailpoet_hidden{{/ifCond}}"> <div class="mailpoet_field_coupon_source_create_new {{#ifCond model.source '===' 'useExisting'}}mailpoet_hidden{{/ifCond}}">
<div class="mailpoet_form_field"> <details open>
<div class="mailpoet_form_field_type"><%= __('Discount type') %></div> <summary>
<div class="mailpoet_form_field_input_option mailpoet_form_field_input_nowrap"> <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"> <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> <option value="{{@key}}" {{#ifCond @key '==' ../model.discountType}}SELECTED{{/ifCond}}>{{ this }}</option>
{{/each}} {{/each}}
</select> </select>
</div>
</div> </div>
</div>
<div class="mailpoet_form_field"> <div class="mailpoet_form_field">
<label> <label>
<div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Coupon amount') %></div> <div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Coupon amount') %></div>
<div class="coupon_amount_wrapper"> <div class="coupon_amount_wrapper">
{{#ifCond model.amountMax '===' 100}} {{#ifCond model.amountMax '===' 100}}
<span class="amount_percentage_sign">%</span> <span class="amount_percentage_sign">%</span>
{{/ifCond}} {{/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" /> <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> </div>
</label> </label>
</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 expiry days') %></div> <div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Coupon expiry days') %></div>
<div class="mailpoet_form_field_input_option"> <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 }}" /> <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> <p class='description'><%= __('Number of days the coupon is valid after the email is sent') %></p>
</div> </div>
</label> </label>
</div> </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>
<div class="mailpoet_form_field mailpoet_field_coupon_source_use_existing {{#ifCond model.source '!==' 'useExisting'}}mailpoet_hidden{{/ifCond}}"> <div class="mailpoet_form_field mailpoet_field_coupon_source_use_existing {{#ifCond model.source '!==' 'useExisting'}}mailpoet_hidden{{/ifCond}}">