refactor(foxy-coupon-code-form): ongoing ui improvements

Foxy · Oct 16, 2024 · 0dbedff · 0dbedff
1 parent b431519
commit 0dbedff
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 18 deletions.
diff --git a/src/elements/public/CouponCodeForm/CouponCodeForm.stories.ts b/src/elements/public/CouponCodeForm/CouponCodeForm.stories.ts
@@ -13,7 +13,7 @@ const summary: Summary = {
   configurable: {
     sections: ['timestamps', 'header'],
     buttons: ['delete', 'create', 'submit', 'undo', 'header:copy-id', 'header:copy-json'],
-    inputs: ['code'],
+    inputs: ['general', 'general:code'],
   },
 };
 

diff --git a/src/elements/public/CouponCodeForm/CouponCodeForm.test.ts b/src/elements/public/CouponCodeForm/CouponCodeForm.test.ts
@@ -11,6 +11,10 @@ describe('foxy-coupon-code-form', () => {
     expect(customElements.get('foxy-internal-async-list-control')).to.exist;
   });
 
+  it('imports and defines foxy-internal-summary-control', () => {
+    expect(customElements.get('foxy-internal-summary-control')).to.exist;
+  });
+
   it('imports and defines foxy-internal-text-control', () => {
     expect(customElements.get('foxy-internal-text-control')).to.exist;
   });
@@ -83,12 +87,29 @@ describe('foxy-coupon-code-form', () => {
     expect(renderHeaderMethod).to.have.been.called;
   });
 
-  it('renders a text control for code', async () => {
+  it('renders a general summary control', async () => {
+    const element = await fixture<CouponCodeForm>(
+      html`<foxy-coupon-code-form></foxy-coupon-code-form>`
+    );
+
+    const control = element.renderRoot.querySelector(
+      'foxy-internal-summary-control[infer="general"]'
+    );
+
+    expect(control).to.exist;
+  });
+
+  it('renders a text control for code in the general summary', async () => {
     const element = await fixture<CouponCodeForm>(
       html`<foxy-coupon-code-form></foxy-coupon-code-form>`
     );
-    const control = element.renderRoot.querySelector('foxy-internal-text-control[infer="code"]');
+
+    const control = element.renderRoot.querySelector(
+      '[infer="general"] foxy-internal-text-control[infer="code"]'
+    );
+
     expect(control).to.exist;
+    expect(control).to.have.attribute('layout', 'summary-item');
   });
 
   it('renders a list of transactions', async () => {

diff --git a/src/elements/public/CouponCodeForm/CouponCodeForm.ts b/src/elements/public/CouponCodeForm/CouponCodeForm.ts
@@ -56,7 +56,10 @@ export class CouponCodeForm extends Base<Data> {
     return html`
       ${this.renderHeader()}
 
-      <foxy-internal-text-control infer="code"></foxy-internal-text-control>
+      <foxy-internal-summary-control infer="general">
+        <foxy-internal-text-control layout="summary-item" infer="code"></foxy-internal-text-control>
+      </foxy-internal-summary-control>
+
       <foxy-internal-async-list-control
         first=${ifDefined(transactions)}
         infer="transactions"

diff --git a/src/elements/public/CouponCodeForm/index.ts b/src/elements/public/CouponCodeForm/index.ts
@@ -1,4 +1,5 @@
 import '../../internal/InternalAsyncListControl/index';
+import '../../internal/InternalSummaryControl/index';
 import '../../internal/InternalTextControl/index';
 import '../../internal/InternalForm/index';
 import '../TransactionCard/index';

diff --git a/src/static/translations/coupon-code-form/en.json b/src/static/translations/coupon-code-form/en.json
@@ -16,13 +16,17 @@
       "done": "Copied to clipboard"
     }
   },
-  "code": {
-    "label": "Code",
-    "placeholder": "Required",
-    "helper_text": "The string value of this coupon code which your customer will add to their cart to use this coupon.",
-    "v8n_required": "Please enter a coupon code",
-    "v8n_too_long": "Coupon code must be 50 characters or less",
-    "v8n_has_spaces": "Please remove spaces from the coupon code"
+  "general": {
+    "label": "",
+    "helper_text": "",
+    "code": {
+      "label": "Code",
+      "placeholder": "Required",
+      "helper_text": "",
+      "v8n_required": "Please enter a coupon code",
+      "v8n_too_long": "Coupon code must be 50 characters or less",
+      "v8n_has_spaces": "Please remove spaces from the coupon code"
+    }
   },
   "transactions": {
     "label": "Transactions",

diff --git a/src/static/translations/coupon-form/en.json b/src/static/translations/coupon-form/en.json
@@ -207,13 +207,17 @@
             "done": "Copied to clipboard"
           }
         },
-        "code": {
-          "label": "Code",
-          "placeholder": "Required",
-          "helper_text": "The string value of this coupon code which your customer will add to their cart to use this coupon.",
-          "v8n_required": "Please enter a coupon code",
-          "v8n_too_long": "Coupon code must be 50 characters or less",
-          "v8n_has_spaces": "Please remove spaces from the coupon code"
+        "general": {
+          "label": "",
+          "helper_text": "",
+          "code": {
+            "label": "Code",
+            "placeholder": "Required",
+            "helper_text": "",
+            "v8n_required": "Please enter a coupon code",
+            "v8n_too_long": "Coupon code must be 50 characters or less",
+            "v8n_has_spaces": "Please remove spaces from the coupon code"
+          }
         },
         "transactions": {
           "label": "Transactions",