From 38239cb311721564f81abdbd6b72e45eb7c5c509 Mon Sep 17 00:00:00 2001
From: Daniil Bratukhin <dantothefuture@gmail.com>
Date: Thu, 22 Aug 2024 12:13:38 -0300
Subject: [PATCH] feat(foxy-coupon-form): group customer restrictions together

---
 .../public/CouponForm/CouponForm.stories.ts   |  17 ++-
 .../public/CouponForm/CouponForm.test.ts      |  29 ++++-
 src/elements/public/CouponForm/CouponForm.ts  |  43 ++++---
 src/static/translations/coupon-form/en.json   | 114 +++++++++---------
 4 files changed, 121 insertions(+), 82 deletions(-)

diff --git a/src/elements/public/CouponForm/CouponForm.stories.ts b/src/elements/public/CouponForm/CouponForm.stories.ts
index 37eb32cc..f7551590 100644
--- a/src/elements/public/CouponForm/CouponForm.stories.ts
+++ b/src/elements/public/CouponForm/CouponForm.stories.ts
@@ -30,12 +30,21 @@ const summary: Summary = {
       'options:exclude-line-item-discounts',
       'options:is-taxable',
       'options:shared-codes-allowed',
-      'options:customer-auto-apply',
-      'customer-subscription-restrictions',
-      'customer-attribute-restrictions',
+      'customer-restrictions:customer-auto-apply',
+      'customer-restrictions:customer-subscription-restrictions',
+      'customer-restrictions:customer-attribute-restrictions',
       'attributes',
     ],
-    sections: ['timestamps', 'header', 'general', 'uses', 'timeframe', 'options', 'taxes'],
+    sections: [
+      'timestamps',
+      'header',
+      'general',
+      'uses',
+      'timeframe',
+      'options',
+      'taxes',
+      'customer-restrictions',
+    ],
     buttons: [
       'import',
       'generate',
diff --git a/src/elements/public/CouponForm/CouponForm.test.ts b/src/elements/public/CouponForm/CouponForm.test.ts
index f8ad1f88..af599d79 100644
--- a/src/elements/public/CouponForm/CouponForm.test.ts
+++ b/src/elements/public/CouponForm/CouponForm.test.ts
@@ -597,7 +597,6 @@ describe('CouponForm', () => {
     'exclude-line-item-discounts',
     'is-taxable',
     'shared-codes-allowed',
-    'customer-auto-apply',
   ] as const;
 
   for (const prop of props) {
@@ -611,13 +610,23 @@ describe('CouponForm', () => {
     });
   }
 
-  it('renders editable list control for subscription restrictions', async () => {
+  it('renders a Customer Restrictions summary control', async () => {
     const element = await fixture<CouponForm>(html`<foxy-coupon-form></foxy-coupon-form>`);
     const control = element.renderRoot.querySelector(
-      'foxy-internal-editable-list-control[infer=customer-subscription-restrictions]'
+      'foxy-internal-summary-control[infer="customer-restrictions"]'
+    );
+
+    expect(control).to.exist;
+  });
+
+  it('renders editable list control for subscription restrictions inside of the Customer Restrictions summary', async () => {
+    const element = await fixture<CouponForm>(html`<foxy-coupon-form></foxy-coupon-form>`);
+    const control = element.renderRoot.querySelector(
+      '[infer=customer-restrictions] foxy-internal-editable-list-control[infer=customer-subscription-restrictions]'
     ) as InternalEditableListControl;
 
     expect(control).to.exist;
+    expect(control).to.have.attribute('layout', 'summary-item');
 
     expect(control.getValue()).to.deep.equal([]);
     control.setValue([{ value: 'a' }, { value: 'b' }]);
@@ -627,12 +636,22 @@ describe('CouponForm', () => {
     expect(control.getValue()).to.deep.equal([{ value: 'foo' }, { value: 'bar' }]);
   });
 
-  it('renders query builder control for customer attribute restrictions', async () => {
+  it('renders query builder control for customer attribute restrictions inside of the Customer Restrictions summary', async () => {
     const element = await fixture<CouponForm>(html`<foxy-coupon-form></foxy-coupon-form>`);
     const control = element.renderRoot.querySelector(
-      'foxy-internal-query-builder-control[infer=customer-attribute-restrictions]'
+      '[infer=customer-restrictions] foxy-internal-query-builder-control[infer=customer-attribute-restrictions]'
     ) as InternalQueryBuilderControl;
 
+    expect(control).to.exist;
+    expect(control).to.have.attribute('layout', 'summary-item');
+  });
+
+  it('renders switch control for auto-apply inside of the Customer Restrictions summary', async () => {
+    const element = await fixture<CouponForm>(html`<foxy-coupon-form></foxy-coupon-form>`);
+    const control = element.renderRoot.querySelector(
+      '[infer=customer-restrictions] foxy-internal-switch-control[infer=customer-auto-apply]'
+    );
+
     expect(control).to.exist;
   });
 
diff --git a/src/elements/public/CouponForm/CouponForm.ts b/src/elements/public/CouponForm/CouponForm.ts
index 883b0525..4e685078 100644
--- a/src/elements/public/CouponForm/CouponForm.ts
+++ b/src/elements/public/CouponForm/CouponForm.ts
@@ -240,18 +240,6 @@ export class CouponForm extends Base<Data> {
       >
       </foxy-internal-async-list-control>
 
-      <foxy-internal-query-builder-control
-        infer="item-option-restrictions"
-        disable-or
-        .operators=${this.__itemOptionRestrictionsOperators}
-        .getValue=${this.__itemOptionRestrictionsGetValue}
-        .setValue=${this.__itemOptionRestrictionsSetValue}
-      >
-      </foxy-internal-query-builder-control>
-
-      <foxy-internal-query-builder-control infer="customer-attribute-restrictions">
-      </foxy-internal-query-builder-control>
-
       <foxy-internal-editable-list-control
         infer="product-code-restrictions"
         .getValue=${this.__productCodeRestrictionsGetValue}
@@ -263,12 +251,32 @@ export class CouponForm extends Base<Data> {
       >
       </foxy-internal-editable-list-control>
 
-      <foxy-internal-editable-list-control
-        infer="customer-subscription-restrictions"
-        .getValue=${this.__customerSubscriptionRestrictionsGetValue}
-        .setValue=${this.__customerSubscriptionRestrictionsSetValue}
+      <foxy-internal-query-builder-control
+        infer="item-option-restrictions"
+        disable-or
+        .operators=${this.__itemOptionRestrictionsOperators}
+        .getValue=${this.__itemOptionRestrictionsGetValue}
+        .setValue=${this.__itemOptionRestrictionsSetValue}
       >
-      </foxy-internal-editable-list-control>
+      </foxy-internal-query-builder-control>
+
+      <foxy-internal-summary-control infer="customer-restrictions">
+        <foxy-internal-query-builder-control
+          layout="summary-item"
+          infer="customer-attribute-restrictions"
+        >
+        </foxy-internal-query-builder-control>
+
+        <foxy-internal-editable-list-control
+          layout="summary-item"
+          infer="customer-subscription-restrictions"
+          .getValue=${this.__customerSubscriptionRestrictionsGetValue}
+          .setValue=${this.__customerSubscriptionRestrictionsSetValue}
+        >
+        </foxy-internal-editable-list-control>
+
+        <foxy-internal-switch-control infer="customer-auto-apply"></foxy-internal-switch-control>
+      </foxy-internal-summary-control>
 
       <foxy-internal-async-resource-link-list-control
         foreign-key-for-uri="item_category_uri"
@@ -336,7 +344,6 @@ export class CouponForm extends Base<Data> {
         </foxy-internal-switch-control>
         <foxy-internal-switch-control infer="is-taxable"></foxy-internal-switch-control>
         <foxy-internal-switch-control infer="shared-codes-allowed"></foxy-internal-switch-control>
-        <foxy-internal-switch-control infer="customer-auto-apply"></foxy-internal-switch-control>
       </foxy-internal-summary-control>
 
       <foxy-internal-async-list-control
diff --git a/src/static/translations/coupon-form/en.json b/src/static/translations/coupon-form/en.json
index 66935115..f9a51376 100644
--- a/src/static/translations/coupon-form/en.json
+++ b/src/static/translations/coupon-form/en.json
@@ -513,12 +513,6 @@
       "helper_text": "",
       "checked": "Yes",
       "unchecked": "No"
-    },
-    "customer-auto-apply": {
-      "label": "Enable auto-apply",
-      "helper_text": "",
-      "checked": "Yes",
-      "unchecked": "No"
     }
   },
   "timeframe": {
@@ -537,55 +531,6 @@
       "helper_text": "The date and time when this coupon will expire. Leave blank for no expiration."
     }
   },
-  "customer-subscription-restrictions": {
-    "label": "Subscription restrictions",
-    "placeholder": "Enter a product code and hit Enter",
-    "helper_text": "This coupon will be applied only when a subscription includes a product with one of the codes in the list. Wildcards are allowed just like in product code restrictions.",
-    "caption": "Add this code",
-    "delete": "Delete this code",
-    "v8n_too_long": "Unfortunately we are unable to store that many subscription restrictions at the moment. Please reduce the number of rules in this section until this message disappears."
-  },
-  "customer-attribute-restrictions": {
-    "label": "Customer restrictions",
-    "helper_text": "This coupon will be applied only when a customer record matches this query.",
-    "v8n_too_long": "Unfortunately we are unable to store that many customer restrictions at the moment. Please reduce the number of rules in this section until this message disappears.",
-    "query-builder": {
-      "add_or_clause": "Add OR clause",
-      "add_value": "Add value",
-      "code": "Code",
-      "date": "{{value, date}}",
-      "date_created": "Created on",
-      "date_modified": "Last updated on",
-      "delete": "Delete",
-      "field": "Field",
-      "hidden": "Hidden",
-      "is_defined_false": "Not defined",
-      "is_defined_true": "Defined",
-      "name": "Name",
-      "operator_equal": "Equal",
-      "operator_greaterthan": "Greater than",
-      "operator_greaterthanorequal": "Greater than or equal",
-      "operator_in": "One of",
-      "operator_isdefined": "Is defined",
-      "operator_lessthan": "Less than",
-      "operator_lessthanorequal": "Less than or equal",
-      "operator_not": "Not equal",
-      "or": "Or",
-      "query_builder_group": "Group of filters",
-      "query_builder_rule": "Filter",
-      "range_from": "From",
-      "range_to": "To",
-      "type": "Type",
-      "type_any": "Field of unknown type",
-      "type_attribute": "Key-value resource",
-      "type_date": "Date field",
-      "type_here": "Type here...",
-      "type_number": "Numeric field",
-      "type_string": "Text field",
-      "used_codes": "Codes used",
-      "value": "Value"
-    }
-  },
   "item-option-restrictions": {
     "label": "Item option restrictions",
     "helper_text": "This restricts the usage of a coupon code based on an item option's name and value. When defined, the coupon will only apply to items with the specified option name and value. Wildcards are allowed.",
@@ -647,6 +592,65 @@
     },
     "helper_text": "Limit which categories this coupon applies to. All changes are saved automatically."
   },
+  "customer-restrictions": {
+    "label": "Customer restrictions",
+    "helper_text": "",
+    "customer-attribute-restrictions": {
+      "label": "Customer attribute restrictions",
+      "helper_text": "This restricts the usage of the coupon based on an attribute name and value. When defined, the coupon will only apply if the customer has the specified attribute name and value. Wildcards are allowed.",
+      "v8n_too_long": "Unfortunately we are unable to store that many customer attribute restrictions at the moment. Please reduce the number of rules in this section until this message disappears.",
+      "query-builder": {
+        "add_or_clause": "Add OR clause",
+        "add_value": "Add value",
+        "code": "Code",
+        "date": "{{value, date}}",
+        "date_created": "Created on",
+        "date_modified": "Last updated on",
+        "delete": "Delete",
+        "field": "Field",
+        "hidden": "Hidden",
+        "is_defined_false": "Not defined",
+        "is_defined_true": "Defined",
+        "name": "Name",
+        "operator_equal": "Equal",
+        "operator_greaterthan": "Greater than",
+        "operator_greaterthanorequal": "Greater than or equal",
+        "operator_in": "One of",
+        "operator_isdefined": "Is defined",
+        "operator_lessthan": "Less than",
+        "operator_lessthanorequal": "Less than or equal",
+        "operator_not": "Not equal",
+        "or": "Or",
+        "query_builder_group": "Group of filters",
+        "query_builder_rule": "Filter",
+        "range_from": "From",
+        "range_to": "To",
+        "type": "Type",
+        "type_any": "Field of unknown type",
+        "type_attribute": "Key-value resource",
+        "type_date": "Date field",
+        "type_here": "Type here...",
+        "type_number": "Numeric field",
+        "type_string": "Text field",
+        "used_codes": "Codes used",
+        "value": "Value"
+      }
+    },
+    "customer-subscription-restrictions": {
+      "label": "Customer subscription restrictions",
+      "placeholder": "Enter a product code and hit Enter",
+      "helper_text": "This restricts the usage of the coupon based on product codes in the current customer's active subscriptions. When defined, the coupon will only apply if the customer has an active subscription with a matching product code. Wildcards are allowed.",
+      "caption": "Add this code",
+      "delete": "Delete this code",
+      "v8n_too_long": "Unfortunately we are unable to store that many subscription restrictions at the moment. Please reduce the number of rules in this section until this message disappears."
+    },
+    "customer-auto-apply": {
+      "label": "Auto apply coupon for matching customers",
+      "helper_text": "If enabled, when a customer authenticates on the checkout, this coupon will automatically apply if the above two customer restrictions are met.",
+      "checked": "Yes",
+      "unchecked": "No"
+    }
+  },
   "taxes": {
     "label": "Tax settings",
     "helper_text": "",