@foxy.io/elements 1.15.0-beta.8 → 1.16.0-beta.10

package/dist/elements/public/CouponForm/CouponForm.js

@@ -62,20 +62,34 @@ export class CouponForm extends Base {
         this.__codesTableColumns = [
             {
                 header: ctx => html `<foxy-i18n lang=${ctx.lang} key="code" ns=${ctx.ns}></foxy-i18n>`,
-                cell: ctx => html `
-        <vaadin-button
-          theme="tertiary contrast"
-          class="p-0"
-          @click=${(evt) => {
-                    const dialog = this.renderRoot.querySelector('#code-dialog');
-                    const button = evt.currentTarget;
-                    dialog.href = ctx.data._links.self.href;
-                    dialog.show(button);
-                }}
-        >
-          <span class="font-tnum">${ctx.data.code}</span>
-        </vaadin-button>
-      `,
+                cell: ctx => {
+                    const isDisabled = !this.in('idle') || this.disabledSelector.matches('codes', true);
+                    return html `
+          <div class="flex items-center gap-xs">
+            <vaadin-button
+              theme="tertiary-inline contrast"
+              class="p-0"
+              ?disabled=${isDisabled}
+              @click=${(evt) => {
+                        const dialog = this.renderRoot.querySelector('#code-dialog');
+                        const button = evt.currentTarget;
+                        dialog.href = ctx.data._links.self.href;
+                        dialog.show(button);
+                    }}
+            >
+              <span class="font-tnum">${ctx.data.code}</span>
+            </vaadin-button>
+
+            <foxy-copy-to-clipboard
+              ?disabled=${isDisabled}
+              text=${ctx.data.code}
+              lang=${ctx.lang}
+              ns="${ctx.ns} copy-to-clipboard"
+            >
+            </foxy-copy-to-clipboard>
+          </div>
+        `;
+                },
             },
             {
                 header: ctx => html `<foxy-i18n lang=${ctx.lang} key="date_created" ns=${ctx.ns}></foxy-i18n>`,
@@ -121,6 +135,7 @@ export class CouponForm extends Base {
             'iron-dropdown': customElements.get('iron-dropdown'),
             'iron-icon': customElements.get('iron-icon'),
             'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),
+            'foxy-copy-to-clipboard': customElements.get('foxy-copy-to-clipboard'),
             'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),
             'foxy-query-builder': customElements.get('foxy-query-builder'),
             'foxy-form-dialog': customElements.get('foxy-form-dialog'),
@@ -170,7 +185,7 @@ export class CouponForm extends Base {
           data-testid="spinner"
           class=${classMap({
             'transition duration-500 ease-in-out absolute inset-0 flex': true,
-            'opacity-0 pointer-events-none': !this.in('busy') && !this.in('fail'),
+            'opacity-0 pointer-events-none': this.in('idle'),
         })}
         >
           <foxy-spinner
@@ -213,7 +228,7 @@ export class CouponForm extends Base {
           label=${this.t('name')}
           .checkValidity=${this.__getValidator('name')}
           .value=${this.form.name}
-          ?disabled=${this.in('busy') || this.disabledSelector.matches('name', true)}
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches('name', true)}
           ?readonly=${this.readonlySelector.matches('name', true)}
           required
           @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
@@ -246,6 +261,7 @@ export class CouponForm extends Base {
         const selectedPreset = presets.find(p => p.details === details && p.type === type);
         return html `
       <label
+        data-testid="rules:preset"
         class=${classMap({
             'whitespace-nowrap block ring-primary-50 rounded px-xs -mx-xs transition-colors': true,
             'text-body hover-text-primary focus-within-ring-2': !isDisabled && !isReadonly,
@@ -258,13 +274,15 @@ export class CouponForm extends Base {
         <span class="relative font-medium flex items-center">
           <span class="truncate">
             ${selectedPreset
-            ? this.t('discount_summary', { params: selectedPreset })
+            ? this.t('discount_summary', { params: { ...selectedPreset, ns: this.ns } })
             : this.t('custom_discount')}
           </span>
 
           <iron-icon class="icon-inline text-xl ml-xs -mr-xs" icon="icons:expand-more"></iron-icon>
 
           <select
+            data-testclass="interactive editable"
+            data-testid="rules:preset:select"
             class="opacity-0 absolute inset-0 focus-outline-none"
             ?disabled=${isDisabled || isReadonly}
             @change=${(evt) => {
@@ -280,7 +298,7 @@ export class CouponForm extends Base {
             ${presets.map(option => {
             return html `
                 <option value=${option.details} ?selected=${option === selectedPreset}>
-                  ${this.t('discount_summary', { params: option })}
+                  ${this.t('discount_summary', { params: { ...option, ns: this.ns } })}
                 </option>
               `;
         })}
@@ -314,6 +332,7 @@ export class CouponForm extends Base {
           <iron-icon class="icon-inline text-xl ml-xs" icon="icons:expand-more"></iron-icon>
 
           <select
+            data-testclass="interactive editable"
             class="opacity-0 absolute inset-0 focus-outline-none"
             ?disabled=${!isInteractive}
             @change=${(evt) => {
@@ -370,6 +389,7 @@ export class CouponForm extends Base {
                 </foxy-i18n>
 
                 <input
+                  data-testclass="interactive editable"
                   class="sr-only"
                   value=${option}
                   name=${name}
@@ -402,6 +422,7 @@ export class CouponForm extends Base {
       <label>
         <foxy-i18n class="sr-only" lang=${this.lang} key=${label} ns=${this.ns}></foxy-i18n>
         <input
+          data-testclass="interactive editable"
           class=${classMap({
             'transition-colors border p-xs h-xs font-medium text-m rounded w-xl': true,
             'ring-primary-50 text-body bg-contrast-10': isInteractive,
@@ -433,6 +454,7 @@ export class CouponForm extends Base {
         const [from, adjustment] = tier.split(/[-+]/).map(v => parseFloat(v));
         return html `
       <div
+        data-testclass="rules:tier"
         aria-label=${this.t('tier')}
         class=${classMap({
             'flex items-start justify-between rounded-t-l rounded-b-l': true,
@@ -523,6 +545,7 @@ export class CouponForm extends Base {
         ${params.tier
             ? html `
               <button
+                data-testclass="interactive"
                 aria-label=${this.t('delete')}
                 class=${classMap({
                 'w-s h-s m-s flex-shrink-0 rounded transition-colors ring-primary-50': true,
@@ -548,7 +571,7 @@ export class CouponForm extends Base {
         const urlParameter = `discount_${type}=${encodeURIComponent(`${name}{${details}}`)}`;
         const isDisabled = !this.in('idle') || this.disabledSelector.matches('rules', true);
         return html `
-      <div class="text-xs flex space-x-xs leading-m">
+      <div data-testid="rules:url" class="text-xs flex space-x-xs">
         <span
           class=${classMap({
             'flex-shrink-0 transition-colors': true,
@@ -561,7 +584,7 @@ export class CouponForm extends Base {
 
         <code
           class=${classMap({
-            'bg-contrast-5 transition-colors monospace truncate rounded px-xs': true,
+            'bg-contrast-5 transition-colors font-lumo truncate rounded px-xs': true,
             'text-secondary': !isDisabled,
             'text-disabled': isDisabled,
         })}
@@ -569,25 +592,13 @@ export class CouponForm extends Base {
           ${urlParameter}
         </code>
 
-        <button
-          class=${classMap({
-            'flex-shrink-0 transition-colors font-medium rounded px-xs': true,
-            'ring-primary-50 bg-primary-10 text-primary': !isDisabled,
-            'text-disabled bg-contrast-5': isDisabled,
-            'focus-outline-none focus-ring-2': !isDisabled,
-            'hover-bg-primary hover-text-primary-contrast': !isDisabled,
-        })}
+        <foxy-copy-to-clipboard
+          text=${urlParameter}
+          lang=${this.lang}
+          ns="${this.ns} copy-to-clipboard"
           ?disabled=${isDisabled}
-          @click=${({ currentTarget }) => {
-            navigator.clipboard
-                .writeText(urlParameter)
-                .then(() => (currentTarget.textContent = this.t('copied')))
-                .catch(() => (currentTarget.textContent = this.t('error')))
-                .then(() => setTimeout(() => (currentTarget.textContent = this.t('copy')), 2000));
-        }}
         >
-          ${this.t('copy')}
-        </button>
+        </foxy-copy-to-clipboard>
       </div>
     `;
     }
@@ -597,13 +608,13 @@ export class CouponForm extends Base {
         const details = (_b = this.form.coupon_discount_details) !== null && _b !== void 0 ? _b : '';
         const isDisabled = !this.in('idle') || this.disabledSelector.matches('rules', true);
         return html `
-      <div class="text-xs leading-m">
+      <div data-testid="rules:description" class="text-xs leading-m">
         <span class="transition-colors ${isDisabled ? 'text-disabled' : 'text-tertiary'}">
           <foxy-i18n lang=${this.lang} key="description" ns=${this.ns}></foxy-i18n>&#58;
         </span>
 
         <foxy-i18n
-          options=${JSON.stringify({ params: { details, type } })}
+          options=${JSON.stringify({ params: { details, type, ns: this.ns } })}
           class="transition-colors ${isDisabled ? 'text-disabled' : 'text-secondary'}"
           lang=${this.lang}
           key="discount_summary"
@@ -619,10 +630,11 @@ export class CouponForm extends Base {
         const details = (_a = this.form.coupon_discount_details) !== null && _a !== void 0 ? _a : '';
         const tiers = details.split('|').filter(v => !!v.trim());
         const method = (_b = (/[-+]/.test(tiers[0]) ? null : tiers.shift())) !== null && _b !== void 0 ? _b : 'single';
+        const renderedTiers = method === 'repeat' ? [tiers[0]] : [...tiers, undefined];
         const type = (_c = this.form.coupon_discount_type) !== null && _c !== void 0 ? _c : 'quantity_amount';
         const [source, units] = type.split('_');
         return html `
-      <div>
+      <div data-testid="rules">
         ${this.renderTemplateOrSlot('rules:before')}
 
         <div>
@@ -643,7 +655,7 @@ export class CouponForm extends Base {
           </div>
 
           <div class="space-y-s">
-            ${repeat([...tiers, undefined], (tier, tierIndex) => {
+            ${repeat(renderedTiers, (tier, tierIndex) => {
             const onChange = (changedParams) => {
                 var _a, _b, _c;
                 const newMethod = (_a = changedParams.method) !== null && _a !== void 0 ? _a : method;
@@ -679,7 +691,7 @@ export class CouponForm extends Base {
     `;
     }
     __renderCodes() {
-        var _a;
+        var _a, _b, _c, _d, _e;
         const { disabledSelector, group, data, lang, ns } = this;
         const isDisabled = !this.in('idle') || disabledSelector.matches('codes', true);
         const filters = this.__codesTableQuery;
@@ -689,53 +701,54 @@ export class CouponForm extends Base {
         const filterButtonLabel = filters === null ? 'filter' : 'clear_filters';
         const filterButtonIcon = `icons:${filters === null ? 'filter-list' : 'clear'}`;
         return html `
-      <foxy-form-dialog
-        disabledcontrols=${disabledSelector.zoom('codes:generate:form').toString()}
-        readonlycontrols=${this.readonlySelector.zoom('codes:generate:form').toString()}
-        hiddencontrols="save-button current-balance ${this.hiddenSelector
+      <div data-testid="codes">
+        <foxy-form-dialog
+          disabledcontrols=${disabledSelector.zoom('codes:generate:form').toString()}
+          readonlycontrols=${this.readonlySelector.zoom('codes:generate:form').toString()}
+          hiddencontrols="save-button current-balance ${this.hiddenSelector
             .zoom('codes:generate:form')
             .toString()}"
-        related=${JSON.stringify([url.toString()])}
-        header="generate"
-        parent=${(_a = data === null || data === void 0 ? void 0 : data._links['fx:generate_codes'].href) !== null && _a !== void 0 ? _a : ''}
-        group=${group}
-        lang=${lang}
-        form="foxy-generate-codes-form"
-        ns=${ns}
-        id="generate-codes-dialog"
-        alert
-      >
-      </foxy-form-dialog>
-
-      <foxy-form-dialog
-        disabledcontrols=${disabledSelector.zoom('codes:form').toString()}
-        readonlycontrols=${this.readonlySelector.zoom('codes:form').toString()}
-        hiddencontrols=${this.hiddenSelector.zoom('codes:form').toString()}
-        header="code"
-        parent=${url.toString()}
-        group=${group}
-        lang=${lang}
-        form="foxy-coupon-code-form"
-        ns=${ns}
-        id="code-dialog"
-      >
-      </foxy-form-dialog>
-
-      <foxy-form-dialog
-        disabledcontrols=${disabledSelector.zoom('codes:import:form').toString()}
-        readonlycontrols=${this.readonlySelector.zoom('codes:import:form').toString()}
-        hiddencontrols="save-button ${this.hiddenSelector.zoom('codes:generate:form').toString()}"
-        header="import"
-        parent=${data._links['fx:coupon_codes'].href}
-        group=${group}
-        lang=${lang}
-        form="foxy-coupon-codes-form"
-        ns=${ns}
-        id="import-dialog"
-      >
-      </foxy-form-dialog>
+          related=${JSON.stringify([url.toString()])}
+          header="generate"
+          parent=${(_a = data === null || data === void 0 ? void 0 : data._links['fx:generate_codes'].href) !== null && _a !== void 0 ? _a : ''}
+          group=${group}
+          lang=${lang}
+          form="foxy-generate-codes-form"
+          ns=${ns}
+          id="generate-codes-dialog"
+          alert
+          .related=${[url.toString()]}
+        >
+        </foxy-form-dialog>
+
+        <foxy-form-dialog
+          disabledcontrols=${disabledSelector.zoom('codes:form').toString()}
+          readonlycontrols=${this.readonlySelector.zoom('codes:form').toString()}
+          hiddencontrols=${this.hiddenSelector.zoom('codes:form').toString()}
+          header="code"
+          parent=${url.toString()}
+          group=${group}
+          lang=${lang}
+          form="foxy-coupon-code-form"
+          ns=${ns}
+          id="code-dialog"
+        >
+        </foxy-form-dialog>
+
+        <foxy-form-dialog
+          disabledcontrols=${disabledSelector.zoom('codes:import:form').toString()}
+          readonlycontrols=${this.readonlySelector.zoom('codes:import:form').toString()}
+          hiddencontrols="save-button ${this.hiddenSelector.zoom('codes:import:form').toString()}"
+          header="import"
+          parent=${data._links['fx:coupon_codes'].href}
+          group=${group}
+          lang=${lang}
+          form="foxy-coupon-codes-form"
+          ns=${ns}
+          id="import-dialog"
+        >
+        </foxy-form-dialog>
 
-      <div>
         ${this.renderTemplateOrSlot('codes:before')}
 
         <div class="flex items-center justify-between mb-xs space-x-s">
@@ -748,6 +761,7 @@ export class CouponForm extends Base {
           </foxy-i18n>
 
           <vaadin-button
+            data-testid="codes:generate-button"
             theme="success tertiary small"
             ?disabled=${isDisabled}
             @click=${(evt) => {
@@ -761,6 +775,7 @@ export class CouponForm extends Base {
           </vaadin-button>
 
           <vaadin-button
+            data-testid="codes:import-button"
             theme="contrast tertiary small"
             ?disabled=${isDisabled}
             @click=${(evt) => {
@@ -774,6 +789,7 @@ export class CouponForm extends Base {
           </vaadin-button>
 
           <vaadin-button
+            data-testid="codes:filter-button"
             theme="contrast ${filters === null ? 'tertiary' : ''} small"
             ?disabled=${isDisabled}
             @click=${() => (this.__codesTableQuery = filters === null ? '' : null)}
@@ -786,7 +802,7 @@ export class CouponForm extends Base {
         <foxy-query-builder
           class="bg-contrast-5 rounded-tl-l rounded-tr-s rounded-b-l p-m mb-s"
           lang=${lang}
-          ns=${ns}
+          ns="${ns} ${(_c = (_b = customElements.get('foxy-query-builder')) === null || _b === void 0 ? void 0 : _b.defaultNS) !== null && _c !== void 0 ? _c : ''}"
           ?disabled=${isDisabled}
           ?hidden=${filters === null}
           .options=${CouponForm.__codesQueryOptions}
@@ -798,7 +814,12 @@ export class CouponForm extends Base {
         >
         </foxy-query-builder>
 
-        <foxy-pagination first=${url.toString()} lang=${lang} ns=${ns} ?disabled=${isDisabled}>
+        <foxy-pagination
+          first=${url.toString()}
+          lang=${lang}
+          ns="${ns} ${(_e = (_d = customElements.get('foxy-pagination')) === null || _d === void 0 ? void 0 : _d.defaultNS) !== null && _e !== void 0 ? _e : ''}"
+          ?disabled=${isDisabled}
+        >
           <foxy-table
             class="px-m mb-s border border-contrast-10 rounded-t-l rounded-b-l"
             group=${group}
@@ -821,96 +842,101 @@ export class CouponForm extends Base {
         const usesPerCustomer = (_b = this.form.number_of_uses_allowed_per_customer) !== null && _b !== void 0 ? _b : 0;
         const usesPerCouponCode = (_c = this.form.number_of_uses_allowed_per_code) !== null && _c !== void 0 ? _c : 0;
         return html `
-      ${this.renderTemplateOrSlot('usage:before')}
-
-      <div class="space-y-s">
-        <div class="grid gap-m grid-cols-3">
-          <vaadin-integer-field
-            placeholder=${this.t('unlimited')}
-            label=${this.t('uses_per_coupon')}
-            class="w-full"
-            min="0"
-            prevent-invalid-input
-            has-controls
-            .value=${usesPerCoupon || ''}
-            ?disabled=${isDisabled}
-            ?readonly=${isReadonly}
-            @change=${(evt) => {
+      <div data-testid="usage">
+        ${this.renderTemplateOrSlot('usage:before')}
+
+        <div class="space-y-s">
+          <div class="grid gap-m grid-cols-3">
+            <vaadin-integer-field
+              placeholder=${this.t('unlimited')}
+              data-testid="usage:per-coupon"
+              label=${this.t('uses_per_coupon')}
+              class="w-full"
+              min="0"
+              prevent-invalid-input
+              has-controls
+              .value=${usesPerCoupon || ''}
+              ?disabled=${isDisabled}
+              ?readonly=${isReadonly}
+              @change=${(evt) => {
             const field = evt.currentTarget;
             this.edit({ number_of_uses_allowed: parseInt(field.value) });
         }}
-          >
-          </vaadin-integer-field>
-
-          <vaadin-integer-field
-            placeholder=${this.t('unlimited')}
-            label=${this.t('uses_per_coupon_code')}
-            class="w-full"
-            min="0"
-            prevent-invalid-input
-            has-controls
-            .value=${usesPerCouponCode || ''}
-            ?disabled=${isDisabled}
-            ?readonly=${isReadonly}
-            @change=${(evt) => {
+            >
+            </vaadin-integer-field>
+
+            <vaadin-integer-field
+              placeholder=${this.t('unlimited')}
+              data-testid="usage:per-coupon-code"
+              label=${this.t('uses_per_coupon_code')}
+              class="w-full"
+              min="0"
+              prevent-invalid-input
+              has-controls
+              .value=${usesPerCouponCode || ''}
+              ?disabled=${isDisabled}
+              ?readonly=${isReadonly}
+              @change=${(evt) => {
             const field = evt.currentTarget;
             this.edit({ number_of_uses_allowed_per_code: parseInt(field.value) });
         }}
-          >
-          </vaadin-integer-field>
-
-          <vaadin-integer-field
-            placeholder=${this.t('unlimited')}
-            label=${this.t('uses_per_customer')}
-            class="w-full"
-            min="0"
-            prevent-invalid-input
-            has-controls
-            .value=${usesPerCustomer || ''}
-            ?disabled=${isDisabled}
-            ?readonly=${isReadonly}
-            @change=${(evt) => {
+            >
+            </vaadin-integer-field>
+
+            <vaadin-integer-field
+              placeholder=${this.t('unlimited')}
+              data-testid="usage:per-customer"
+              label=${this.t('uses_per_customer')}
+              class="w-full"
+              min="0"
+              prevent-invalid-input
+              has-controls
+              .value=${usesPerCustomer || ''}
+              ?disabled=${isDisabled}
+              ?readonly=${isReadonly}
+              @change=${(evt) => {
             const field = evt.currentTarget;
             this.edit({ number_of_uses_allowed_per_customer: parseInt(field.value) });
         }}
-          >
-          </vaadin-integer-field>
-        </div>
+            >
+            </vaadin-integer-field>
+          </div>
 
-        <div
-          class=${classMap({
+          <div
+            class=${classMap({
             'transition-colors text-xs leading-s': true,
             'text-secondary': !isDisabled,
             'text-disabled': isDisabled,
         })}
-        >
-          <foxy-i18n
-            options=${JSON.stringify({ count: usesPerCoupon })}
-            lang=${this.lang}
-            key="uses_per_coupon_summary${usesPerCoupon ? '' : '_0'}"
-            ns=${this.ns}
           >
-          </foxy-i18n>
+            <foxy-i18n
+              options=${JSON.stringify({ count: usesPerCoupon })}
+              lang=${this.lang}
+              key="uses_per_coupon_summary${usesPerCoupon ? '' : '_0'}"
+              ns=${this.ns}
+            >
+            </foxy-i18n>
 
-          <foxy-i18n
-            options=${JSON.stringify({ count: usesPerCouponCode })}
-            lang=${this.lang}
-            key="uses_per_coupon_code_summary${usesPerCouponCode ? '' : '_0'}"
-            ns=${this.ns}
-          >
-          </foxy-i18n>
+            <foxy-i18n
+              options=${JSON.stringify({ count: usesPerCouponCode })}
+              lang=${this.lang}
+              key="uses_per_coupon_code_summary${usesPerCouponCode ? '' : '_0'}"
+              ns=${this.ns}
+            >
+            </foxy-i18n>
 
-          <foxy-i18n
-            options=${JSON.stringify({ count: usesPerCustomer })}
-            lang=${this.lang}
-            key="uses_per_customer_summary${usesPerCustomer ? '' : '_0'}"
-            ns=${this.ns}
-          >
-          </foxy-i18n>
+            <foxy-i18n
+              options=${JSON.stringify({ count: usesPerCustomer })}
+              lang=${this.lang}
+              key="uses_per_customer_summary${usesPerCustomer ? '' : '_0'}"
+              ns=${this.ns}
+            >
+            </foxy-i18n>
+          </div>
         </div>
-      </div>
 
-      ${this.renderTemplateOrSlot('usage:after')}
+        ${this.renderTemplateOrSlot('usage:after')}
+      </div>
     `;
     }
     __renderProductRestrictions() {
@@ -932,7 +958,7 @@ export class CouponForm extends Base {
             });
         }
         return html `
-      <div>
+      <div data-testid="product-restrictions">
         ${this.renderTemplateOrSlot('product-restrictions:before')}
 
         <div class="space-y-s">
@@ -960,6 +986,7 @@ export class CouponForm extends Base {
                     </foxy-i18n>
 
                     <x-editable-list
+                      data-testid="product-restrictions:${group.header}"
                       lang=${this.lang}
                       ns=${this.ns}
                       ?disabled=${isDisabled}
@@ -1005,51 +1032,54 @@ export class CouponForm extends Base {
     `;
     }
     __renderCategoryRestrictions() {
-        var _a;
+        var _a, _b, _c;
         const scope = 'category-restrictions';
         const isDisabled = !this.in('idle') || this.disabledSelector.matches(scope, true);
         const isReadonly = this.readonlySelector.matches(scope, true);
         return html `
-      ${this.renderTemplateOrSlot('category-restrictions:before')}
+      <div data-testid="category-restrictions">
+        ${this.renderTemplateOrSlot('category-restrictions:before')}
 
-      <div class="space-y-xs">
-        <foxy-pagination
-          first=${this.__itemCategories}
-          lang=${this.lang}
-          ns=${this.ns}
-          ?disabled=${isDisabled}
-        >
-          <foxy-i18n
-            class="block text-s font-medium text-secondary leading-none mb-s"
+        <div class="space-y-xs">
+          <foxy-pagination
+            first=${this.__itemCategories}
             lang=${this.lang}
-            key="category_restrictions"
-            ns=${this.ns}
+            ns="${this.ns} ${(_b = (_a = customElements.get('foxy-pagination')) === null || _a === void 0 ? void 0 : _a.defaultNS) !== null && _b !== void 0 ? _b : ''}"
+            ?disabled=${isDisabled}
           >
-          </foxy-i18n>
+            <foxy-i18n
+              class="block text-s font-medium text-secondary leading-none mb-s"
+              lang=${this.lang}
+              key="category_restrictions"
+              ns=${this.ns}
+            >
+            </foxy-i18n>
 
-          <x-category-restrictions-page
-            coupon-item-categories=${ifDefined((_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:coupon_item_categories'].href)}
-            coupon=${this.href}
-            class="border border-contrast-10 rounded-t-l rounded-b-l mb-s"
-            group=${this.group}
+            <x-category-restrictions-page
+              coupon-item-categories=${ifDefined((_c = this.data) === null || _c === void 0 ? void 0 : _c._links['fx:coupon_item_categories'].href)}
+              data-testid="category-restrictions:page"
+              coupon=${this.href}
+              class="border border-contrast-10 rounded-t-l rounded-b-l mb-s"
+              group=${this.group}
+              lang=${this.lang}
+              ns=${this.ns}
+              ?disabled=${isDisabled}
+              ?readonly=${isReadonly}
+            >
+            </x-category-restrictions-page>
+          </foxy-pagination>
+
+          <foxy-i18n
+            class="block text-xs leading-s text-tertiary"
             lang=${this.lang}
+            key="category_restrictions_helper_text"
             ns=${this.ns}
-            ?disabled=${isDisabled}
-            ?readonly=${isReadonly}
           >
-          </x-category-restrictions-page>
-        </foxy-pagination>
+          </foxy-i18n>
+        </div>
 
-        <foxy-i18n
-          class="block text-xs leading-s text-tertiary"
-          lang=${this.lang}
-          key="category_restrictions_helper_text"
-          ns=${this.ns}
-        >
-        </foxy-i18n>
+        ${this.renderTemplateOrSlot('category-restrictions:after')}
       </div>
-
-      ${this.renderTemplateOrSlot('category-restrictions:after')}
     `;
     }
     __renderOptions() {
@@ -1063,7 +1093,7 @@ export class CouponForm extends Base {
             { param: 'is_taxable', label: 'apply_taxes_before_coupon' },
         ];
         return html `
-      <div>
+      <div data-testid="options">
         ${this.renderTemplateOrSlot('options:before')}
 
         <x-group frame>
@@ -1083,6 +1113,8 @@ export class CouponForm extends Base {
             const color = isDisabled ? 'text-disabled' : 'text-secondary';
             return html `
               <x-checkbox
+                data-testclass="inputs"
+                data-testid="options:${option.param.replace(/_/g, '-')}"
                 ?disabled=${isDisabled}
                 ?readonly=${isReadonly}
                 ?checked=${option.flip ? !value : value}
@@ -1110,6 +1142,8 @@ export class CouponForm extends Base {
         })}
 
           <x-checkbox
+            data-testclass="inputs"
+            data-testid="options:dates"
             ?disabled=${isDisabled}
             ?readonly=${isReadonly}
             ?checked=${this.form.start_date || this.form.end_date}
@@ -1147,6 +1181,8 @@ export class CouponForm extends Base {
                 const pickerValue = formValue ? serializeDate(new Date(formValue)) : '';
                 return html `
                         <vaadin-date-picker
+                          data-testclass="inputs"
+                          data-testid="options:${property.replace('_', '-')}"
                           placeholder=${this.t('select')}
                           label=${this.t(property)}
                           clear-button-visible
@@ -1201,7 +1237,7 @@ export class CouponForm extends Base {
         const isTemplateInvalid = isCleanTemplateInvalid || isDirtyTemplateInvalid;
         const isSnaphotInvalid = isCleanSnapshotInvalid || isDirtySnapshotInvalid;
         const isInvalid = isTemplateInvalid || isSnaphotInvalid;
-        const isBusy = this.in('busy');
+        const isIdle = this.in('idle');
         return html `
       <div>
         ${this.renderTemplateOrSlot('create:before')}
@@ -1210,7 +1246,7 @@ export class CouponForm extends Base {
           data-testid="create"
           class="w-full"
           theme="primary success"
-          ?disabled=${isBusy || isInvalid || this.disabledSelector.matches('create', true)}
+          ?disabled=${!isIdle || isInvalid || this.disabledSelector.matches('create', true)}
           @click=${this.submit}
         >
           <foxy-i18n ns=${this.ns} key="create" lang=${this.lang}></foxy-i18n>
@@ -1243,7 +1279,7 @@ export class CouponForm extends Base {
           data-testid="delete"
           theme="primary error"
           class="w-full"
-          ?disabled=${this.in('busy') || this.disabledSelector.matches('delete', true)}
+          ?disabled=${!this.in('idle') || this.disabledSelector.matches('delete', true)}
           @click=${(evt) => {
             const confirm = this.renderRoot.querySelector('#confirm');
             confirm.show(evt.currentTarget);