@foxy.io/elements 1.22.0-beta.4 → 1.22.0-beta.6

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

@@ -15,8 +15,6 @@ import { TranslatableMixin } from "../../../mixins/translatable.js";
 import { classMap } from "../../../utils/class-map.js";
 import { ifDefined } from 'lit-html/directives/if-defined';
 import { live } from 'lit-html/directives/live';
-import { operatorGreaterThanOrEqual } from "../QueryBuilder/icons/operatorGreaterThanOrEqual.js";
-import { repeat } from 'lit-html/directives/repeat';
 import { serializeDate } from "../../../utils/serialize-date.js";
 const NS = 'coupon-form';
 const Base = ScopedElementsMixin(ThemeableMixin(ConfigurableMixin(ResponsiveMixin(TranslatableMixin(NucleonElement, NS)))));
@@ -155,6 +153,7 @@ export class CouponForm extends Base {
             '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-discount-builder': customElements.get('foxy-discount-builder'),
             'foxy-query-builder': customElements.get('foxy-query-builder'),
             'foxy-form-dialog': customElements.get('foxy-form-dialog'),
             'foxy-pagination': customElements.get('foxy-pagination'),
@@ -340,258 +339,6 @@ export class CouponForm extends Base {
       </label>
     `;
     }
-    __renderRulesTierSelect({ label, value, options, onChange }) {
-        const isDisabled = !this.in('idle') || this.disabledSelector.matches('rules', true);
-        const isReadonly = this.readonlySelector.matches('rules', true);
-        const isInteractive = !isDisabled && !isReadonly;
-        return html `
-      <label
-        class=${classMap({
-            'h-xs whitespace-nowrap block ring-primary-50 rounded-s pl-s transition-colors': true,
-            'hover-bg-primary hover-text-primary-contrast focus-within-ring-2': isInteractive,
-            'bg-primary-10 text-primary': isInteractive,
-            'bg-contrast-5 text-disabled': isDisabled,
-            'bg-contrast-5 text-secondary': isReadonly && !isDisabled,
-        })}
-      >
-        <foxy-i18n class="sr-only" lang=${this.lang} key=${label} ns=${this.ns}></foxy-i18n>
-
-        <span class="relative leading-none font-medium flex items-center h-full">
-          <span class="truncate">${this.t(options[value])}</span>
-          <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) => {
-            const select = evt.currentTarget;
-            onChange(select.options[select.selectedIndex].value);
-        }}
-          >
-            ${Object.entries(options).map(([optionValue, optionKey]) => {
-            return html `
-                <option value=${optionValue} ?selected=${optionValue === value}>
-                  ${this.t(optionKey)}
-                </option>
-              `;
-        })}
-          </select>
-        </span>
-      </label>
-    `;
-    }
-    __renderRulesTierSwitch({ value, options, onChange }) {
-        const isDisabled = !this.in('idle') || this.disabledSelector.matches('rules', true);
-        const isReadonly = this.readonlySelector.matches('rules', true);
-        const isInteractive = !isDisabled && !isReadonly;
-        const name = `switch-${Math.floor(Math.random() * Math.pow(10, 10))}`;
-        const dotStyle = 'width: 0.4rem; height: 0.4rem';
-        return html `
-      <div
-        class=${classMap({
-            'h-xs px-xs space-x-xs flex items-center rounded-s transition-colors': true,
-            'hover-bg-primary hover-text-primary-contrast focus-within-ring-2': isInteractive,
-            'ring-primary-50 cursor-pointer bg-primary-10 text-primary': isInteractive,
-            'bg-contrast-5 text-disabled': isDisabled,
-            'bg-contrast-5 text-secondary': isReadonly && !isDisabled,
-        })}
-        @click=${(evt) => {
-            if (!isInteractive)
-                return;
-            const target = evt.currentTarget;
-            const firstInput = target.querySelector('input');
-            firstInput.focus();
-            onChange(value === 0 ? 1 : 0);
-        }}
-      >
-        <div class="leading-none font-medium px-xs pointer-events-none">
-          ${options.map((option, optionIndex) => {
-            return html `
-              <label>
-                <foxy-i18n
-                  class=${classMap({ 'sr-only': optionIndex !== value })}
-                  lang=${this.lang}
-                  key=${option}
-                  ns=${this.ns}
-                >
-                </foxy-i18n>
-
-                <input
-                  data-testclass="interactive editable"
-                  class="sr-only"
-                  value=${option}
-                  name=${name}
-                  type="radio"
-                  ?disabled=${!isInteractive}
-                  ?checked=${optionIndex === value}
-                  @change=${(evt) => {
-                const input = evt.currentTarget;
-                if (input.checked)
-                    onChange(optionIndex);
-            }}
-                />
-              </label>
-            `;
-        })}
-        </div>
-
-        <div class="flex justify-evenly h-full ${value ? 'flex-col-reverse' : 'flex-col'}">
-          <div style=${dotStyle} class="bg-current rounded-full"></div>
-          <div style=${dotStyle} class="border border-current rounded-full"></div>
-        </div>
-      </div>
-    `;
-    }
-    __renderRulesTierField({ value, label, onChange }) {
-        const isDisabled = !this.in('idle') || this.disabledSelector.matches('rules', true);
-        const isReadonly = this.readonlySelector.matches('rules', true);
-        const isInteractive = !isDisabled && !isReadonly;
-        return html `
-      <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-s w-xl': true,
-            'ring-primary-50 text-body bg-contrast-10': isInteractive,
-            'hover-bg-contrast-20': isInteractive,
-            'focus-outline-none focus-ring-2': isInteractive,
-            'text-disabled bg-contrast-5': isDisabled,
-            'text-secondary': isReadonly && !isDisabled,
-            'border-transparent border-solid': !isReadonly,
-            'border-dashed border-contrast-30': isReadonly,
-        })}
-          type="number"
-          min="0"
-          ?disabled=${!isInteractive}
-          .value=${value}
-          @input=${(evt) => {
-            const input = evt.currentTarget;
-            onChange(input.value);
-        }}
-        />
-      </label>
-    `;
-    }
-    __renderRulesTier(params) {
-        var _a;
-        const isDisabled = !this.in('idle') || this.disabledSelector.matches('rules', true);
-        const isReadonly = this.readonlySelector.matches('rules', true);
-        const tier = (_a = params.tier) !== null && _a !== void 0 ? _a : '0-0';
-        const sign = tier.includes('+') ? '+' : '-';
-        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': true,
-            'border border-contrast-10': true,
-            'border-dashed': !params.tier,
-        })}
-      >
-        <div
-          class=${classMap({
-            'transition-colors flex flex-wrap items-center gap-s p-s': true,
-            'text-tertiary': !isDisabled,
-            'text-disabled': isDisabled,
-        })}
-        >
-          <foxy-i18n
-            class="uppercase text-s font-medium"
-            lang=${this.lang}
-            key="tier_if"
-            ns=${this.ns}
-          >
-          </foxy-i18n>
-
-          ${this.__renderRulesTierSwitch({
-            options: ['total', 'quantity'],
-            value: params.source === 'price' ? 0 : 1,
-            onChange: i => params.onChange({ source: i ? 'quantity' : 'price' }),
-        })}
-
-          <div class="h-s w-s">${operatorGreaterThanOrEqual}</div>
-
-          ${this.__renderRulesTierField({
-            label: 'from',
-            value: String(from),
-            onChange: v => params.onChange({ tier: `${v}${sign}${adjustment}` }),
-        })}
-
-          <foxy-i18n
-            class="uppercase text-s font-medium"
-            lang=${this.lang}
-            key="tier_then"
-            ns=${this.ns}
-          >
-          </foxy-i18n>
-
-          ${this.__renderRulesTierSwitch({
-            options: ['reduce', 'increase'],
-            value: sign === '-' ? 0 : 1,
-            onChange: i => params.onChange({ tier: `${from}${i ? '+' : '-'}${adjustment}` }),
-        })}
-
-          <!---->
-
-          ${this.__renderRulesTierSelect({
-            options: {
-                incremental: 'tier_incremental',
-                allunits: 'tier_allunits',
-                repeat: 'tier_repeat',
-                single: 'tier_single',
-            },
-            value: params.method,
-            label: 'target',
-            onChange: v => params.onChange({ method: v }),
-        })}
-
-          <foxy-i18n
-            class="uppercase text-s font-medium"
-            lang=${this.lang}
-            key="tier_by"
-            ns=${this.ns}
-          >
-          </foxy-i18n>
-
-          ${this.__renderRulesTierField({
-            label: 'adjustment',
-            value: String(adjustment),
-            onChange: v => params.onChange({ tier: `${from}${sign}${v}` }),
-        })}
-
-          <!---->
-
-          ${this.__renderRulesTierSwitch({
-            value: params.units === 'percentage' ? 0 : 1,
-            options: ['%', '¤'],
-            onChange: i => params.onChange({ units: i ? 'amount' : 'percentage' }),
-        })}
-        </div>
-
-        ${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,
-                'text-tertiary hover-text-secondary focus-outline-none focus-ring-2': !isDisabled,
-                'text-disabled cursor-default': isDisabled,
-            })}
-                ?disabled=${isDisabled}
-                ?hidden=${isReadonly}
-                @click=${() => params.onDelete()}
-              >
-                <iron-icon icon="lumo:cross"></iron-icon>
-              </button>
-            `
-            : ''}
-      </div>
-    `;
-    }
     __renderRulesUrlParameter() {
         var _a, _b, _c;
         const name = (_a = this.form.name) !== null && _a !== void 0 ? _a : '';
@@ -655,14 +402,11 @@ export class CouponForm extends Base {
     `;
     }
     __renderRules() {
-        var _a, _b, _c;
+        var _a, _b;
         const isDisabled = !this.in('idle') || this.disabledSelector.matches('rules', true);
+        const isReadonly = this.readonlySelector.matches('rules', true);
         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('_');
+        const type = (_b = this.form.coupon_discount_type) !== null && _b !== void 0 ? _b : 'quantity_amount';
         return html `
       <div data-testid="rules">
         ${this.renderTemplateOrSlot('rules:before')}
@@ -684,32 +428,23 @@ export class CouponForm extends Base {
             <div class="min-w-0">${this.__renderRulesPreset()}</div>
           </div>
 
-          <div class="space-y-s">
-            ${repeat(renderedTiers, (tier, tierIndex) => {
-            const onChange = (changedParams) => {
-                var _a, _b, _c;
-                const newMethod = (_a = changedParams.method) !== null && _a !== void 0 ? _a : method;
-                const newSource = (_b = changedParams.source) !== null && _b !== void 0 ? _b : source;
-                const newUnits = (_c = changedParams.units) !== null && _c !== void 0 ? _c : units;
-                const newTier = changedParams.tier;
-                const newTiers = [...tiers];
-                if (newTier) {
-                    const newTierIndex = tier ? tierIndex : newTiers.length;
-                    const oldTiersCount = tier ? 1 : 0;
-                    newTiers.splice(newTierIndex, oldTiersCount, newTier);
-                }
-                this.edit({
-                    coupon_discount_details: `${newMethod}|${newTiers.join('|')}`,
-                    coupon_discount_type: `${newSource}_${newUnits}`,
-                });
-            };
-            const onDelete = () => {
-                const newTiers = tiers.filter((_, i) => i !== tierIndex);
-                this.edit({ coupon_discount_details: `${method}|${newTiers.join('|')}` });
-            };
-            return this.__renderRulesTier({ source, method, units, tier, onChange, onDelete });
-        })}
-          </div>
+          <foxy-discount-builder
+            data-testclass="interactive"
+            lang=${this.lang}
+            ns=${this.ns}
+            ?readonly=${isReadonly}
+            ?disabled=${isDisabled}
+            .parsedValue=${{ details, type, name: 'Rules' }}
+            @change=${(evt) => {
+            const builder = evt.currentTarget;
+            const newParsedValue = builder.parsedValue;
+            this.edit({
+                coupon_discount_details: newParsedValue.details,
+                coupon_discount_type: newParsedValue.type,
+            });
+        }}
+          >
+          </foxy-discount-builder>
 
           <div class="space-y-xs mt-m">
             ${this.__renderRulesUrlParameter()} ${this.__renderRulesDescription()}
@@ -981,10 +716,13 @@ export class CouponForm extends Base {
         ];
         if (restrictions) {
             restrictions.split(',').forEach(value => {
-                const isBlocklistValue = value.startsWith('-');
+                const trimmedValue = value.trim();
+                if (!trimmedValue)
+                    return;
+                const isBlocklistValue = trimmedValue.startsWith('-');
                 const target = isBlocklistValue ? 1 : 0;
-                const label = isBlocklistValue ? value.substring(1) : value;
-                groups[target].items.push({ label, value });
+                const label = isBlocklistValue ? trimmedValue.substring(1) : trimmedValue;
+                groups[target].items.push({ label, value: trimmedValue });
             });
         }
         return html `