feat(foxy-coupon-form): add stubs for controls that are active only in snapshot state

Author: pheekus

src/elements/public/CouponForm/CouponForm.test.ts

@@ -269,12 +269,18 @@ describe('CouponForm', () => {
     expect(element.hiddenSelector.matches('coupon-codes', true)).to.be.true;
     expect(element.hiddenSelector.matches('category-restrictions', true)).to.be.true;
     expect(element.hiddenSelector.matches('attributes', true)).to.be.true;
+    expect(element.hiddenSelector.matches('coupon-codes-stub', true)).to.be.false;
+    expect(element.hiddenSelector.matches('category-restrictions-stub', true)).to.be.false;
+    expect(element.hiddenSelector.matches('attributes-stub', true)).to.be.false;
 
     element.data = await getTestData('./hapi/coupons/0');
 
     expect(element.hiddenSelector.matches('coupon-codes', true)).to.be.false;
     expect(element.hiddenSelector.matches('category-restrictions', true)).to.be.false;
     expect(element.hiddenSelector.matches('attributes', true)).to.be.false;
+    expect(element.hiddenSelector.matches('coupon-codes-stub', true)).to.be.true;
+    expect(element.hiddenSelector.matches('category-restrictions-stub', true)).to.be.true;
+    expect(element.hiddenSelector.matches('attributes-stub', true)).to.be.true;
   });
 
   it('renders a form header', () => {
@@ -363,10 +369,15 @@ describe('CouponForm', () => {
       </foxy-coupon-form>
     `);
 
+    const controlStub = element.renderRoot.querySelector(
+      'foxy-internal-summary-control[infer="coupon-codes-stub"] foxy-i18n[infer=""][key="text"]'
+    );
+
     const control = element.renderRoot.querySelector(
       'foxy-internal-async-list-control[infer=coupon-codes]'
     ) as InternalAsyncListControl;
 
+    expect(controlStub).to.exist;
     expect(control).to.exist;
 
     expect(control).to.have.attribute(
@@ -460,7 +471,12 @@ describe('CouponForm', () => {
       'foxy-internal-async-resource-link-list-control[infer=category-restrictions]'
     );
 
+    const controlStub = element.renderRoot.querySelector(
+      'foxy-internal-summary-control[infer="category-restrictions-stub"] foxy-i18n[infer=""][key="text"]'
+    );
+
     expect(control).to.exist;
+    expect(controlStub).to.exist;
     await waitUntil(() => !!control?.hasAttribute('options-href'));
 
     expect(control).to.have.attribute('foreign-key-for-uri', 'item_category_uri');
@@ -683,7 +699,12 @@ describe('CouponForm', () => {
       'foxy-internal-async-list-control[infer=attributes]'
     ) as InternalAsyncListControl;
 
+    const controlStub = element.renderRoot.querySelector(
+      'foxy-internal-summary-control[infer="category-restrictions-stub"] foxy-i18n[infer=""][key="text"]'
+    );
+
     expect(control).to.exist;
+    expect(controlStub).to.exist;
     expect(control).to.have.attribute(
       'first',
       'https://demo.api/hapi/coupon_attributes?coupon_id=0'

src/elements/public/CouponForm/CouponForm.ts

@@ -203,7 +203,9 @@ export class CouponForm extends Base<Data> {
   get hiddenSelector(): BooleanSelector {
     const alwaysMatch = [super.hiddenSelector.toString()];
 
-    if (!this.data) {
+    if (this.data) {
+      alwaysMatch.push('coupon-codes-stub', 'category-restrictions-stub', 'attributes-stub');
+    } else {
       alwaysMatch.push('coupon-codes', 'category-restrictions', 'attributes');
     }
 
@@ -258,6 +260,10 @@ export class CouponForm extends Base<Data> {
       <foxy-internal-coupon-form-rules-control infer="rules">
       </foxy-internal-coupon-form-rules-control>
 
+      <foxy-internal-summary-control infer="coupon-codes-stub">
+        <p class="text-disabled"><foxy-i18n infer="" key="text"></foxy-i18n></p>
+      </foxy-internal-summary-control>
+
       <foxy-internal-async-list-control
         first=${codesUrl}
         limit="5"
@@ -306,6 +312,10 @@ export class CouponForm extends Base<Data> {
         <foxy-internal-switch-control infer="customer-auto-apply"></foxy-internal-switch-control>
       </foxy-internal-summary-control>
 
+      <foxy-internal-summary-control infer="category-restrictions-stub">
+        <p class="text-disabled"><foxy-i18n infer="" key="text"></foxy-i18n></p>
+      </foxy-internal-summary-control>
+
       <foxy-internal-async-resource-link-list-control
         foreign-key-for-uri="item_category_uri"
         foreign-key-for-id="item_category_id"
@@ -374,6 +384,10 @@ export class CouponForm extends Base<Data> {
         <foxy-internal-switch-control infer="shared-codes-allowed"></foxy-internal-switch-control>
       </foxy-internal-summary-control>
 
+      <foxy-internal-summary-control infer="attributes-stub">
+        <p class="text-disabled"><foxy-i18n infer="" key="text"></foxy-i18n></p>
+      </foxy-internal-summary-control>
+
       <foxy-internal-async-list-control
         first=${ifDefined(this.data?._links['fx:attributes'].href)}
         limit="5"

src/static/translations/coupon-form/en.json

@@ -171,6 +171,11 @@
     "description": "Description",
     "url_parameter": "URL parameter"
   },
+  "coupon-codes-stub": {
+    "label": "Codes",
+    "helper_text": "",
+    "text": "Coupon codes can be added after creating the coupon."
+  },
   "coupon-codes": {
     "label": "Codes",
     "delete_header": "Remove code?",
@@ -349,6 +354,11 @@
       "value": "Value"
     }
   },
+  "attributes-stub": {
+    "label": "Attributes",
+    "helper_text": "",
+    "text": "Attributes can be added after creating the coupon."
+  },
   "attributes": {
     "label": "Attributes",
     "delete_header": "Remove attribute?",
@@ -546,6 +556,11 @@
     "option_name": "Option name",
     "rule": "Rule"
   },
+  "category-restrictions-stub": {
+    "label": "Item category restrictions",
+    "helper_text": "",
+    "text": "Item category restrictions can be added after creating the coupon."
+  },
   "category-restrictions": {
     "label": "Item category restrictions",
     "status_saving": "Saving...",