@foxy.io/elements 1.14.2 → 1.15.0-beta.3

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

@@ -0,0 +1,1266 @@
+import { Type } from "../QueryBuilder/types.js";
+import { html } from 'lit-element';
+import { ScopedElementsMixin } from '@open-wc/scoped-elements';
+import { CategoryRestrictionsPage } from "./private/CategoryRestrictionsPage.js";
+import { Checkbox } from "../../private/Checkbox/Checkbox.js";
+import { CheckboxChangeEvent } from "../../private/Checkbox/CheckboxChangeEvent.js";
+import { ConfigurableMixin } from "../../../mixins/configurable.js";
+import { EditableList } from "../../private/EditableList/EditableList.js";
+import { Group } from "../../private/Group/Group.js";
+import { NucleonElement } from "../NucleonElement/NucleonElement.js";
+import { PropertyTable } from "../../private/PropertyTable/PropertyTable.js";
+import { ResponsiveMixin } from "../../../mixins/responsive.js";
+import { ThemeableMixin } from "../../../mixins/themeable.js";
+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)))));
+/**
+ * Form element for creating or editing coupons (`fx:coupon`).
+ *
+ * @slot name:before
+ * @slot name:after
+ *
+ * @slot rules:before
+ * @slot rules:after
+ *
+ * @slot codes:before
+ * @slot codes:after
+ *
+ * @slot usage:before
+ * @slot usage:after
+ *
+ * @slot product-restrictions:before
+ * @slot product-restrictions:after
+ *
+ * @slot category-restrictions:before
+ * @slot category-restrictions:after
+ *
+ * @slot options:before
+ * @slot options:after
+ *
+ * @slot timestamps:before
+ * @slot timestamps:after
+ *
+ * @slot delete:before
+ * @slot delete:after
+ *
+ * @slot create:before
+ * @slot create:after
+ *
+ * @element foxy-coupon-form
+ * @since 1.15.0
+ */
+export class CouponForm extends Base {
+    constructor() {
+        super(...arguments);
+        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>
+      `,
+            },
+            {
+                header: ctx => html `<foxy-i18n lang=${ctx.lang} key="date_created" ns=${ctx.ns}></foxy-i18n>`,
+                cell: ctx => html `
+        <foxy-i18n
+          options=${JSON.stringify({ value: ctx.data.date_created })}
+          class="text-tertiary"
+          lang=${ctx.lang}
+          key="date"
+          ns=${ctx.ns}
+        >
+        </foxy-i18n>
+      `,
+            },
+            {
+                hideBelow: 'sm',
+                header: c => html `<foxy-i18n lang=${c.lang} key="date_modified" ns=${c.ns}></foxy-i18n>`,
+                cell: ctx => html `
+        <foxy-i18n
+          options=${JSON.stringify({ value: ctx.data.date_modified })}
+          class="text-tertiary"
+          lang=${ctx.lang}
+          key="date"
+          ns=${ctx.ns}
+        >
+        </foxy-i18n>
+      `,
+            },
+            {
+                header: c => html `<foxy-i18n lang=${c.lang} key="used_codes" ns=${c.ns}></foxy-i18n>`,
+                cell: ctx => html `${ctx.data.number_of_uses_to_date}`,
+            },
+        ];
+        this.__codesTableQuery = null;
+        this.__itemCategories = '';
+    }
+    static get scopedElements() {
+        return {
+            'vaadin-integer-field': customElements.get('vaadin-integer-field'),
+            'vaadin-date-picker': customElements.get('vaadin-date-picker'),
+            'vaadin-text-field': customElements.get('vaadin-text-field'),
+            'vaadin-button': customElements.get('vaadin-button'),
+            'iron-dropdown': customElements.get('iron-dropdown'),
+            'iron-icon': customElements.get('iron-icon'),
+            'foxy-internal-confirm-dialog': customElements.get('foxy-internal-confirm-dialog'),
+            'foxy-internal-sandbox': customElements.get('foxy-internal-sandbox'),
+            'foxy-query-builder': customElements.get('foxy-query-builder'),
+            'foxy-form-dialog': customElements.get('foxy-form-dialog'),
+            'foxy-pagination': customElements.get('foxy-pagination'),
+            'foxy-spinner': customElements.get('foxy-spinner'),
+            'foxy-table': customElements.get('foxy-table'),
+            'foxy-i18n': customElements.get('foxy-i18n'),
+            'x-category-restrictions-page': CategoryRestrictionsPage,
+            'x-property-table': PropertyTable,
+            'x-editable-list': EditableList,
+            'x-checkbox': Checkbox,
+            'x-group': Group,
+        };
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            __codesTableQuery: { attribute: false },
+            __itemCategories: { attribute: false },
+        };
+    }
+    static get v8n() {
+        return [
+            ({ name: v }) => !!v || 'name_required',
+            ({ name: v }) => !v || v.length <= 50 || 'name_too_long',
+        ];
+    }
+    render() {
+        var _a, _b;
+        const hidden = this.hiddenSelector;
+        return html `
+      <div class="relative space-y-l">
+        ${hidden.matches('name', true) ? '' : this.__renderName()}
+        ${hidden.matches('rules', true) ? '' : this.__renderRules()}
+        ${hidden.matches('codes', true) || !this.data ? '' : this.__renderCodes()}
+        ${hidden.matches('usage', true) ? '' : this.__renderUsage()}
+        ${hidden.matches('product-restrictions', true) ? '' : this.__renderProductRestrictions()}
+        ${hidden.matches('category-restrictions', true) || !this.data
+            ? ''
+            : this.__renderCategoryRestrictions()}
+        ${hidden.matches('options', true) ? '' : this.__renderOptions()}
+        ${hidden.matches('timestamps', true) ? '' : this.__renderTimestamps()}
+        ${hidden.matches('create', true) || !!this.data ? '' : this.__renderCreate()}
+        ${hidden.matches('delete', true) || !this.data ? '' : this.__renderDelete()}
+
+        <div
+          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'),
+        })}
+        >
+          <foxy-spinner
+            layout="vertical"
+            class="m-auto p-m bg-base shadow-xs rounded-t-l rounded-b-l"
+            state=${this.in('fail') ? 'error' : this.in('busy') ? 'busy' : 'empty'}
+            lang=${this.lang}
+            ns="${this.ns} ${(_b = (_a = customElements.get('foxy-spinner')) === null || _a === void 0 ? void 0 : _a.defaultNS) !== null && _b !== void 0 ? _b : ''}"
+          >
+          </foxy-spinner>
+        </div>
+      </div>
+    `;
+    }
+    async _sendGet() {
+        const coupon = await super._sendGet();
+        const store = await super._fetch(coupon._links['fx:store'].href);
+        const categoriesURL = new URL(store._links['fx:item_categories'].href);
+        categoriesURL.searchParams.set('limit', '5');
+        this.__itemCategories = categoriesURL.toString();
+        return coupon;
+    }
+    __getErrorMessage(prefix) {
+        const error = this.errors.find(err => err.startsWith(prefix));
+        return error ? this.t(error.replace(prefix, 'v8n')).toString() : '';
+    }
+    __getValidator(prefix) {
+        return () => !this.errors.some(err => err.startsWith(prefix));
+    }
+    __renderName() {
+        return html `
+      <div>
+        ${this.renderTemplateOrSlot('name:before')}
+
+        <vaadin-text-field
+          error-message=${this.__getErrorMessage('name')}
+          helper-text=${this.t('coupon_name_helper_text')}
+          data-testid="name"
+          class="w-full"
+          label=${this.t('name')}
+          .checkValidity=${this.__getValidator('name')}
+          .value=${this.form.name}
+          ?disabled=${this.in('busy') || this.disabledSelector.matches('name', true)}
+          ?readonly=${this.readonlySelector.matches('name', true)}
+          required
+          @keydown=${(evt) => evt.key === 'Enter' && this.submit()}
+          @input=${(evt) => {
+            const newName = evt.currentTarget.value;
+            this.edit({ name: newName });
+        }}
+        >
+        </vaadin-text-field>
+
+        ${this.renderTemplateOrSlot('name:after')}
+      </div>
+    `;
+    }
+    __renderRulesPreset() {
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches('rules', true);
+        const isReadonly = this.readonlySelector.matches('rules', true);
+        const details = this.form.coupon_discount_details;
+        const type = this.form.coupon_discount_type;
+        const presets = [
+            { type: 'quantity_amount', details: 'allunits|2-2' },
+            { type: 'quantity_percentage', details: 'allunits|5-10|10-20' },
+            { type: 'quantity_amount', details: 'incremental|3-5' },
+            { type: 'quantity_percentage', details: 'incremental|11-10|51-15|101-20' },
+            { type: 'quantity_percentage', details: 'repeat|2-100' },
+            { type: 'quantity_percentage', details: 'repeat|4-50' },
+            { type: 'quantity_amount', details: 'single|5-10' },
+            { type: 'price_percentage', details: 'single|99.99-10' },
+        ];
+        const selectedPreset = presets.find(p => p.details === details && p.type === type);
+        return html `
+      <label
+        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,
+            'text-disabled': isDisabled,
+            'text-secondary': isReadonly,
+        })}
+      >
+        <foxy-i18n class="sr-only" lang=${this.lang} key="preset" ns=${this.ns}></foxy-i18n>
+
+        <span class="relative font-medium flex items-center">
+          <span class="truncate">
+            ${selectedPreset
+            ? this.t('discount_summary', { params: selectedPreset })
+            : this.t('custom_discount')}
+          </span>
+
+          <iron-icon class="icon-inline text-xl ml-xs -mr-xs" icon="icons:expand-more"></iron-icon>
+
+          <select
+            class="opacity-0 absolute inset-0 focus-outline-none"
+            ?disabled=${isDisabled || isReadonly}
+            @change=${(evt) => {
+            var _a, _b;
+            const select = evt.currentTarget;
+            const preset = presets[select.selectedIndex];
+            this.edit({
+                coupon_discount_details: (_a = preset === null || preset === void 0 ? void 0 : preset.details) !== null && _a !== void 0 ? _a : '',
+                coupon_discount_type: (_b = preset === null || preset === void 0 ? void 0 : preset.type) !== null && _b !== void 0 ? _b : 'quantity_amount',
+            });
+        }}
+          >
+            ${presets.map(option => {
+            return html `
+                <option value=${option.details} ?selected=${option === selectedPreset}>
+                  ${this.t('discount_summary', { params: option })}
+                </option>
+              `;
+        })}
+
+            <option value="custom" ?selected=${!selectedPreset}>
+              ${this.t('custom_discount')}
+            </option>
+          </select>
+        </span>
+      </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 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
+            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 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
+                  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
+          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,
+            '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
+        aria-label=${this.t('tier')}
+        class=${classMap({
+            'flex items-start justify-between rounded-t-l rounded-b-l': 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-semibold"
+            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-semibold"
+            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-semibold"
+            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
+                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 : '';
+        const type = (_b = this.form.coupon_discount_type) !== null && _b !== void 0 ? _b : 'quantity_amount';
+        const details = (_c = this.form.coupon_discount_details) !== null && _c !== void 0 ? _c : '';
+        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">
+        <span
+          class=${classMap({
+            'flex-shrink-0 transition-colors': true,
+            'text-tertiary': !isDisabled,
+            'text-disabled': isDisabled,
+        })}
+        >
+          <foxy-i18n lang=${this.lang} key="url_parameter" ns=${this.ns}></foxy-i18n>&#58;
+        </span>
+
+        <code
+          class=${classMap({
+            'bg-contrast-5 transition-colors monospace truncate rounded px-xs': true,
+            'text-secondary': !isDisabled,
+            'text-disabled': isDisabled,
+        })}
+        >
+          ${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,
+        })}
+          ?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>
+      </div>
+    `;
+    }
+    __renderRulesDescription() {
+        var _a, _b;
+        const type = (_a = this.form.coupon_discount_type) !== null && _a !== void 0 ? _a : 'quantity_amount';
+        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">
+        <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 } })}
+          class="transition-colors ${isDisabled ? 'text-disabled' : 'text-secondary'}"
+          lang=${this.lang}
+          key="discount_summary"
+          ns=${this.ns}
+        >
+        </foxy-i18n>
+      </div>
+    `;
+    }
+    __renderRules() {
+        var _a, _b, _c;
+        const isDisabled = !this.in('idle') || this.disabledSelector.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 type = (_c = this.form.coupon_discount_type) !== null && _c !== void 0 ? _c : 'quantity_amount';
+        const [source, units] = type.split('_');
+        return html `
+      <div>
+        ${this.renderTemplateOrSlot('rules:before')}
+
+        <div>
+          <div class="flex items-center justify-between space-x-m text-s mb-xs">
+            <foxy-i18n
+              class=${classMap({
+            'transition-colors font-medium flex-1': true,
+            'text-secondary': !isDisabled,
+            'text-disabled': isDisabled,
+        })}
+              lang=${this.lang}
+              key="rule_plural"
+              ns=${this.ns}
+            >
+            </foxy-i18n>
+
+            <div class="min-w-0">${this.__renderRulesPreset()}</div>
+          </div>
+
+          <div class="space-y-s">
+            ${repeat([...tiers, undefined], (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>
+
+          <div class="space-y-xs mt-m">
+            ${this.__renderRulesUrlParameter()} ${this.__renderRulesDescription()}
+          </div>
+        </div>
+
+        ${this.renderTemplateOrSlot('rules:after')}
+      </div>
+    `;
+    }
+    __renderCodes() {
+        var _a;
+        const { disabledSelector, group, data, lang, ns } = this;
+        const isDisabled = !this.in('idle') || disabledSelector.matches('codes', true);
+        const filters = this.__codesTableQuery;
+        const url = new URL(data._links['fx:coupon_codes'].href);
+        new URLSearchParams(filters !== null && filters !== void 0 ? filters : '').forEach((value, name) => url.searchParams.set(name, value));
+        url.searchParams.set('limit', '5');
+        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 ${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>
+
+      <div>
+        ${this.renderTemplateOrSlot('codes:before')}
+
+        <div class="flex items-center justify-between mb-xs space-x-s">
+          <foxy-i18n
+            class="text-s font-medium text-secondary leading-none flex-1"
+            lang=${lang}
+            key="code_plural"
+            ns=${ns}
+          >
+          </foxy-i18n>
+
+          <vaadin-button
+            theme="success tertiary small"
+            ?disabled=${isDisabled}
+            @click=${(evt) => {
+            const dialog = this.renderRoot.querySelector('#generate-codes-dialog');
+            const button = evt.currentTarget;
+            dialog === null || dialog === void 0 ? void 0 : dialog.show(button);
+        }}
+          >
+            <foxy-i18n class="text-s" lang=${lang} key="generate" ns=${ns}></foxy-i18n>
+            <iron-icon class="icon-inline text-s" icon="icons:add"></iron-icon>
+          </vaadin-button>
+
+          <vaadin-button
+            theme="contrast tertiary small"
+            ?disabled=${isDisabled}
+            @click=${(evt) => {
+            const dialog = this.renderRoot.querySelector('#import-dialog');
+            const button = evt.currentTarget;
+            dialog === null || dialog === void 0 ? void 0 : dialog.show(button);
+        }}
+          >
+            <foxy-i18n class="text-s" lang=${lang} key="import" ns=${ns}></foxy-i18n>
+            <iron-icon class="icon-inline text-s" icon="icons:open-in-browser"></iron-icon>
+          </vaadin-button>
+
+          <vaadin-button
+            theme="contrast ${filters === null ? 'tertiary' : ''} small"
+            ?disabled=${isDisabled}
+            @click=${() => (this.__codesTableQuery = filters === null ? '' : null)}
+          >
+            <foxy-i18n class="text-s" lang=${lang} key=${filterButtonLabel} ns=${ns}></foxy-i18n>
+            <iron-icon class="icon-inline text-s" icon=${filterButtonIcon}></iron-icon>
+          </vaadin-button>
+        </div>
+
+        <foxy-query-builder
+          class="bg-contrast-5 rounded-tl-l rounded-tr-s rounded-b-l p-m mb-s"
+          lang=${lang}
+          ns=${ns}
+          ?disabled=${isDisabled}
+          ?hidden=${filters === null}
+          .options=${CouponForm.__codesQueryOptions}
+          .value=${filters}
+          @change=${(evt) => {
+            const queryBuilder = evt.currentTarget;
+            this.__codesTableQuery = queryBuilder.value;
+        }}
+        >
+        </foxy-query-builder>
+
+        <foxy-pagination first=${url.toString()} lang=${lang} ns=${ns} ?disabled=${isDisabled}>
+          <foxy-table
+            class="px-m mb-s border border-contrast-10 rounded-t-l rounded-b-l"
+            group=${group}
+            lang=${lang}
+            ns=${ns}
+            .columns=${this.__codesTableColumns}
+          >
+          </foxy-table>
+        </foxy-pagination>
+
+        ${this.renderTemplateOrSlot('codes:after')}
+      </div>
+    `;
+    }
+    __renderUsage() {
+        var _a, _b, _c;
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches('usage', true);
+        const isReadonly = this.readonlySelector.matches('usage', true);
+        const usesPerCoupon = (_a = this.form.number_of_uses_allowed) !== null && _a !== void 0 ? _a : 0;
+        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) => {
+            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) => {
+            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) => {
+            const field = evt.currentTarget;
+            this.edit({ number_of_uses_allowed_per_customer: parseInt(field.value) });
+        }}
+          >
+          </vaadin-integer-field>
+        </div>
+
+        <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: 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>
+        </div>
+      </div>
+
+      ${this.renderTemplateOrSlot('usage:after')}
+    `;
+    }
+    __renderProductRestrictions() {
+        var _a;
+        const scope = 'product-restrictions';
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches(scope, true);
+        const isReadonly = this.readonlySelector.matches(scope, true);
+        const restrictions = (_a = this.form.product_code_restrictions) !== null && _a !== void 0 ? _a : '';
+        const groups = [
+            { header: 'allow', items: [] },
+            { header: 'block', items: [] },
+        ];
+        if (restrictions) {
+            restrictions.split(',').forEach(value => {
+                const isBlocklistValue = value.startsWith('-');
+                const target = isBlocklistValue ? 1 : 0;
+                const label = isBlocklistValue ? value.substring(1) : value;
+                groups[target].items.push({ label, value });
+            });
+        }
+        return html `
+      <div>
+        ${this.renderTemplateOrSlot('product-restrictions:before')}
+
+        <div class="space-y-s">
+          <x-group frame>
+            <foxy-i18n
+              class=${isDisabled ? 'text-disabled' : 'text-secondary'}
+              slot="header"
+              lang=${this.lang}
+              key="product_restrictions"
+              ns=${this.ns}
+            >
+            </foxy-i18n>
+
+            <div class="grid sm-grid-cols-2 bg-contrast-10" style="gap: 1px">
+              ${groups.map((group, index) => {
+            return html `
+                  <x-group class="bg-base pt-m">
+                    <foxy-i18n
+                      class=${isDisabled ? 'text-disabled' : 'text-tertiary'}
+                      slot="header"
+                      lang=${this.lang}
+                      key=${group.header}
+                      ns=${this.ns}
+                    >
+                    </foxy-i18n>
+
+                    <x-editable-list
+                      lang=${this.lang}
+                      ns=${this.ns}
+                      ?disabled=${isDisabled}
+                      ?readonly=${isReadonly}
+                      .items=${group.items}
+                      @change=${(evt) => {
+                const newItemsByGroup = [
+                    index === 0 ? evt.currentTarget.items : groups[0].items,
+                    index === 1 ? evt.currentTarget.items : groups[1].items,
+                ];
+                const newSanitizedItemsByGroup = newItemsByGroup
+                    .map(list => list.map(v => v.value.replace(/^[\s-]*/, '').trimEnd()))
+                    .map(list => list.filter(v => !!v))
+                    .map(list => Array.from(new Set(list)));
+                const newRestrictions = newSanitizedItemsByGroup[0]
+                    .concat(newSanitizedItemsByGroup[1].map(v => `-${v}`))
+                    .join(',');
+                this.edit({ product_code_restrictions: newRestrictions });
+            }}
+                    >
+                    </x-editable-list>
+                  </x-group>
+                `;
+        })}
+            </div>
+          </x-group>
+
+          <foxy-i18n
+            class=${classMap({
+            'block text-xs leading-s transition-colors': true,
+            'text-secondary': !isDisabled,
+            'text-disabled': isDisabled,
+        })}
+            lang=${this.lang}
+            key="product_restrictions_explainer"
+            ns=${this.ns}
+          >
+          </foxy-i18n>
+        </div>
+
+        ${this.renderTemplateOrSlot('product-restrictions:after')}
+      </div>
+    `;
+    }
+    __renderCategoryRestrictions() {
+        var _a;
+        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 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"
+            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}
+            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}
+        >
+        </foxy-i18n>
+      </div>
+
+      ${this.renderTemplateOrSlot('category-restrictions:after')}
+    `;
+    }
+    __renderOptions() {
+        const isDisabled = !this.in('idle') || this.disabledSelector.matches('options', true);
+        const isReadonly = this.readonlySelector.matches('options', true);
+        const options = [
+            { param: 'multiple_codes_allowed' },
+            { param: 'combinable' },
+            { param: 'exclude_category_discounts', label: 'combine_with_category_discounts', flip: true },
+            { param: 'exclude_line_item_discounts', label: 'combine_with_line_discounts', flip: true },
+            { param: 'is_taxable', label: 'apply_taxes_before_coupon' },
+        ];
+        return html `
+      <div>
+        ${this.renderTemplateOrSlot('options:before')}
+
+        <x-group frame>
+          <foxy-i18n
+            class="transition-colors ${isDisabled ? 'text-disabled' : 'text-secondary'}"
+            slot="header"
+            lang=${this.lang}
+            key="option_plural"
+            ns=${this.ns}
+          >
+          </foxy-i18n>
+
+          ${options.map(option => {
+            var _a;
+            const value = this.form[option.param];
+            const label = (_a = option.label) !== null && _a !== void 0 ? _a : option.param;
+            const color = isDisabled ? 'text-disabled' : 'text-secondary';
+            return html `
+              <x-checkbox
+                ?disabled=${isDisabled}
+                ?readonly=${isReadonly}
+                ?checked=${option.flip ? !value : value}
+                class="m-m"
+                @change=${(evt) => {
+                this.edit({ [option.param]: option.flip ? !evt.detail : evt.detail });
+            }}
+              >
+                <div class="flex flex-col">
+                  <foxy-i18n lang=${this.lang} key=${label} ns=${this.ns}></foxy-i18n>
+                  <foxy-i18n
+                    class="transition-colors text-xs leading-s ${color}"
+                    lang=${this.lang}
+                    key="${label}_explainer"
+                    ns=${this.ns}
+                  >
+                  </foxy-i18n>
+                </div>
+              </x-checkbox>
+
+              <div style="margin-left: calc(1.125rem + (var(--lumo-space-m) * 2))">
+                <div class="border-b border-contrast-10"></div>
+              </div>
+            `;
+        })}
+
+          <x-checkbox
+            ?disabled=${isDisabled}
+            ?readonly=${isReadonly}
+            ?checked=${this.form.start_date || this.form.end_date}
+            class="m-m"
+            @change=${(evt) => {
+            if (evt instanceof CheckboxChangeEvent) {
+                let startDate = null;
+                let endDate = null;
+                if (evt.detail) {
+                    const today = Date.now();
+                    const oneMonthFromToday = new Date(today).setMonth(new Date().getMonth() + 1);
+                    startDate = serializeDate(new Date(today));
+                    endDate = serializeDate(new Date(oneMonthFromToday));
+                }
+                // TODO: remove ts directive when sdk types are fixed
+                // @ts-expect-error sdk types don't include null
+                this.edit({ start_date: startDate, end_date: endDate });
+            }
+        }}
+          >
+            <div class="flex flex-col">
+              <foxy-i18n lang=${this.lang} key="set_time_constraints" ns=${this.ns}></foxy-i18n>
+              <foxy-i18n
+                class="text-xs leading-s ${isDisabled ? 'text-disabled' : 'text-secondary'}"
+                lang=${this.lang}
+                key="set_time_constraints_explainer"
+                ns=${this.ns}
+              >
+              </foxy-i18n>
+            </div>
+
+            ${this.form.start_date || this.form.end_date
+            ? html `
+                  <div class="grid grid-cols-2 gap-m mt-m" slot="content">
+                    ${['start_date', 'end_date'].map(property => {
+                const formValue = this.form[property];
+                const pickerValue = formValue ? serializeDate(new Date(formValue)) : '';
+                return html `
+                        <vaadin-date-picker
+                          placeholder=${this.t('select')}
+                          label=${this.t(property)}
+                          clear-button-visible
+                          ?disabled=${isDisabled}
+                          ?readonly=${isReadonly}
+                          .value=${live(pickerValue)}
+                          @change=${(evt) => {
+                    const field = evt.currentTarget;
+                    this.edit({ [property]: field.value });
+                }}
+                        >
+                        </vaadin-date-picker>
+                      `;
+            })}
+                  </div>
+                `
+            : ''}
+          </x-checkbox>
+        </x-group>
+
+        ${this.renderTemplateOrSlot('options:after')}
+      </div>
+    `;
+    }
+    __renderTimestamps() {
+        return html `
+      <div>
+        ${this.renderTemplateOrSlot('timestamps:before')}
+
+        <x-property-table
+          data-testid="timestamps"
+          .items=${['date_modified', 'date_created'].map(field => {
+            var _a;
+            return ({
+                name: this.t(field),
+                value: ((_a = this.data) === null || _a === void 0 ? void 0 : _a[field]) ? this.t('date', { value: new Date(this.data[field]) })
+                    : '',
+            });
+        })}
+        >
+        </x-property-table>
+
+        ${this.renderTemplateOrSlot('timestamps:after')}
+      </div>
+    `;
+    }
+    __renderCreate() {
+        const isCleanTemplateInvalid = this.in({ idle: { template: { clean: 'invalid' } } });
+        const isDirtyTemplateInvalid = this.in({ idle: { template: { dirty: 'invalid' } } });
+        const isCleanSnapshotInvalid = this.in({ idle: { snapshot: { clean: 'invalid' } } });
+        const isDirtySnapshotInvalid = this.in({ idle: { snapshot: { dirty: 'invalid' } } });
+        const isTemplateInvalid = isCleanTemplateInvalid || isDirtyTemplateInvalid;
+        const isSnaphotInvalid = isCleanSnapshotInvalid || isDirtySnapshotInvalid;
+        const isInvalid = isTemplateInvalid || isSnaphotInvalid;
+        const isBusy = this.in('busy');
+        return html `
+      <div>
+        ${this.renderTemplateOrSlot('create:before')}
+
+        <vaadin-button
+          data-testid="create"
+          class="w-full"
+          theme="primary success"
+          ?disabled=${isBusy || isInvalid || this.disabledSelector.matches('create', true)}
+          @click=${this.submit}
+        >
+          <foxy-i18n ns=${this.ns} key="create" lang=${this.lang}></foxy-i18n>
+        </vaadin-button>
+
+        ${this.renderTemplateOrSlot('create:after')}
+      </div>
+    `;
+    }
+    __renderDelete() {
+        return html `
+      <div>
+        <foxy-internal-confirm-dialog
+          data-testid="confirm"
+          message="delete_prompt"
+          confirm="delete"
+          cancel="cancel"
+          header="delete"
+          theme="primary error"
+          lang=${this.lang}
+          ns=${this.ns}
+          id="confirm"
+          @hide=${(evt) => !evt.detail.cancelled && this.delete()}
+        >
+        </foxy-internal-confirm-dialog>
+
+        ${this.renderTemplateOrSlot('delete:before')}
+
+        <vaadin-button
+          data-testid="delete"
+          theme="primary error"
+          class="w-full"
+          ?disabled=${this.in('busy') || this.disabledSelector.matches('delete', true)}
+          @click=${(evt) => {
+            const confirm = this.renderRoot.querySelector('#confirm');
+            confirm.show(evt.currentTarget);
+        }}
+        >
+          <foxy-i18n ns=${this.ns} key="delete" lang=${this.lang}></foxy-i18n>
+        </vaadin-button>
+
+        ${this.renderTemplateOrSlot('delete:after')}
+      </div>
+    `;
+    }
+}
+CouponForm.__codesQueryOptions = [
+    { label: 'code', path: 'code', type: Type.String },
+    { label: 'used_codes', path: 'number_of_uses_to_date', type: Type.Number },
+    { label: 'date_created', path: 'date_created', type: Type.Date },
+    { label: 'date_modified', path: 'date_modified', type: Type.Date },
+];
+//# sourceMappingURL=CouponForm.js.map