@foxy.io/elements 1.34.0 → 1.35.0-beta.2

package/dist/elements/public/ExperimentalAddToCartBuilder/ExperimentalAddToCartBuilder.js

@@ -0,0 +1,887 @@
+import { TranslatableMixin } from "../../../mixins/translatable.js";
+import { ResponsiveMixin } from "../../../mixins/responsive.js";
+import { BooleanSelector } from '@foxy.io/sdk/core';
+import { decode, encode } from 'html-entities';
+import { InternalForm } from "../../internal/InternalForm/InternalForm.js";
+import { previewCSS } from './preview.css';
+import { html, svg } from 'lit-element';
+import { ifDefined } from 'lit-html/directives/if-defined';
+import { classMap } from "../../../utils/class-map.js";
+import debounce from 'lodash-es/debounce';
+const NS = 'experimental-add-to-cart-builder';
+const Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));
+/**
+ * WARNING: this element is marked as experimental and is subject to change in future releases.
+ * We will not be maintaining backwards compatibility for elements in the experimental namespace.
+ * If you are using this element, please make sure to use a fixed version of the package in your `package.json`.
+ *
+ * This element allows you to create an add-to-cart form and link for your store.
+ *
+ * @element foxy-experimental-add-to-cart-builder
+ */
+export class ExperimentalAddToCartBuilder extends Base {
+    constructor() {
+        super(...arguments);
+        /** Default host domain for stores that don't use a custom domain name, e.g. `foxycart.com`. */
+        this.defaultDomain = null;
+        /** URL of the HMAC encoder endpoint. */
+        this.encodeHelper = null;
+        /** URL of the `fx:locale_codes` property helper. This will be used to determine the currency code. */
+        this.localeCodes = null;
+        /** URL of the store this add-to-cart code is created for. */
+        this.store = null;
+        this.__signingSeparator = `--${Date.now()}${(Math.random() * 100000).toFixed(0)}--`;
+        this.__emptyOptions = [
+            { label: 'option_false', value: 'false' },
+            { label: 'option_true', value: 'true' },
+            { label: 'option_reset', value: 'reset' },
+        ];
+        this.__cartOptions = [
+            { label: 'option_add', value: 'add' },
+            { label: 'option_checkout', value: 'checkout' },
+            { label: 'option_redirect', value: 'redirect' },
+        ];
+        this.__signAsync = debounce(async (html, encodeHelper) => {
+            if (html === this.__previousUnsignedCode && this.__previousSignedCode)
+                return;
+            const isCancelled = () => html !== this.__previousUnsignedCode;
+            this.__signingState = 'busy';
+            try {
+                const res = await new ExperimentalAddToCartBuilder.API(this).fetch(encodeHelper, {
+                    headers: { 'Content-Type': 'text/plain' },
+                    method: 'POST',
+                    body: html,
+                });
+                if (!isCancelled()) {
+                    if (res.ok) {
+                        const result = (await res.json()).result;
+                        if (!isCancelled()) {
+                            this.__signingState = 'idle';
+                            this.__previousSignedCode = result.replace(/value="--OPEN--" data-replace/gi, 'value');
+                        }
+                    }
+                    else {
+                        this.__signingState = 'fail';
+                    }
+                }
+            }
+            catch (_a) {
+                if (!isCancelled())
+                    this.__signingState = 'fail';
+            }
+        }, 500);
+        this.__previousUnsignedCode = '';
+        this.__previousSignedCode = '';
+        this.__signingState = 'idle';
+        this.__openState = [];
+    }
+    static get properties() {
+        return {
+            ...super.properties,
+            defaultDomain: { attribute: 'default-domain' },
+            encodeHelper: { attribute: 'encode-helper' },
+            localeCodes: { attribute: 'locale-codes' },
+            store: {},
+            __previousUnsignedCode: { attribute: false },
+            __previousSignedCode: { attribute: false },
+            __signingState: { attribute: false },
+            __openState: { attribute: false },
+        };
+    }
+    get hiddenSelector() {
+        const alwaysMatch = [super.hiddenSelector.toString()];
+        alwaysMatch.unshift('header:copy-id', 'header:copy-json', 'undo');
+        return new BooleanSelector(alwaysMatch.join(' ').trim());
+    }
+    renderBody() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+        const addToCartCode = this.__getAddToCartCode();
+        const storeUrl = (_c = (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a._links['fx:store'].href) !== null && _b !== void 0 ? _b : this.store) !== null && _c !== void 0 ? _c : void 0;
+        const store = (_d = this.__storeLoader) === null || _d === void 0 ? void 0 : _d.data;
+        return html `
+      <div class="grid gap-m items-start sm-grid-cols-2 md-grid-cols-3 h-full overflow-auto">
+        <foxy-internal-summary-control layout="section" class="space-y-s" infer="items">
+          ${(_e = this.form.items) === null || _e === void 0 ? void 0 : _e.map((product, index) => {
+            var _a;
+            return html `
+              <foxy-internal-summary-control
+                layout="details"
+                label=${ifDefined(product.name.trim() || void 0)}
+                infer="item-group"
+                ?open=${ifDefined(this.__openState[index])}
+                @toggle=${(evt) => {
+                const details = evt.currentTarget;
+                this.__openState[index] = details.open;
+                this.__openState = [...this.__openState];
+            }}
+              >
+                <foxy-internal-experimental-add-to-cart-builder-item-control
+                  item-categories=${ifDefined(store === null || store === void 0 ? void 0 : store._links['fx:item_categories'].href)}
+                  currency-code=${ifDefined((_a = this.__resolvedCurrencyCode) !== null && _a !== void 0 ? _a : void 0)}
+                  store=${ifDefined(storeUrl)}
+                  index=${index}
+                  infer="item"
+                  .defaultItemCategory=${this.__defaultItemCategory}
+                  @remove=${() => {
+                var _a;
+                const newProducts = (_a = this.form.items) === null || _a === void 0 ? void 0 : _a.filter((_, i) => i !== index);
+                this.edit({ items: newProducts });
+                this.__openState = this.__openState.filter((_, i) => i !== index);
+            }}
+                >
+                </foxy-internal-experimental-add-to-cart-builder-item-control>
+              </foxy-internal-summary-control>
+            `;
+        })}
+
+          <vaadin-button
+            class="w-full"
+            theme="success"
+            ?disabled=${this.disabled}
+            @click=${() => {
+            var _a;
+            const newItem = { name: '', price: 0, custom_options: [], sub_frequency: '1m' };
+            const existingItems = (_a = this.form.items) !== null && _a !== void 0 ? _a : [];
+            this.edit({ items: [...existingItems, newItem] });
+            this.__openState = [...new Array(existingItems.length).fill(false), true];
+        }}
+          >
+            <foxy-i18n infer="add-product" key="caption"></foxy-i18n>
+          </vaadin-button>
+        </foxy-internal-summary-control>
+
+        <div class="space-y-m md-col-span-2 sticky top-0">
+          ${addToCartCode
+            ? html `
+                <foxy-internal-summary-control infer="preview">
+                  <div class="flex">
+                    <iframe
+                      srcdoc="${previewCSS}${addToCartCode.formHTML}"
+                      style="margin: calc(-1 * (0.625em + (var(--lumo-border-radius) / 4) - 1px))"
+                      class=${classMap({
+                'flex-1 transition-all filter': true,
+                'blur-sm': this.__signingState !== 'idle',
+            })}
+                      @load=${(evt) => {
+                var _a;
+                const iframe = evt.currentTarget;
+                const root = (_a = iframe.contentWindow) === null || _a === void 0 ? void 0 : _a.document.documentElement;
+                if (root)
+                    iframe.style.height = root.scrollHeight + 'px';
+            }}
+                    >
+                    </iframe>
+                  </div>
+
+                  <div
+                    class="flex leading-s text-s min-w-0 relative"
+                    style="gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+                  >
+                    <div
+                      style="font-family: monospace; max-height: calc(8 * (1em * var(--lumo-line-height-s)))"
+                      class=${classMap({
+                'break-all overflow-auto flex-1 min-w-0 transition-all filter': true,
+                'blur-sm': this.__signingState !== 'idle',
+            })}
+                    >
+                      <code class="whitespace-pre">${addToCartCode.formHTML}</code>
+                    </div>
+
+                    <div
+                      style="top: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px); right: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+                      class=${classMap({
+                'absolute right-0 bg-base rounded-s transition-opacity': true,
+                'opacity-0 pointer-events-none': this.__signingState !== 'busy',
+            })}
+                    >
+                      <div class="bg-contrast-10 rounded-s">
+                        <foxy-spinner infer="spinner" class="-mx-xs" style="transform: scale(0.8)">
+                        </foxy-spinner>
+                      </div>
+                    </div>
+
+                    <foxy-copy-to-clipboard
+                      infer="copy-to-clipboard"
+                      text=${addToCartCode.formHTML}
+                      class=${classMap({
+                'flex-shrink-0 text-m transition-opacity': true,
+                'opacity-0 pointer-events-none': this.__signingState === 'busy',
+            })}
+                    >
+                    </foxy-copy-to-clipboard>
+                  </div>
+
+                  <div
+                    class="flex items-start text-xs leading-xs text-secondary"
+                    style="gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+                  >
+                    ${svg `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" class="flex-shrink-0 text-contrast-70" style="width: 1.25em"><path fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0ZM9 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM6.75 8a.75.75 0 0 0 0 1.5h.75v1.75a.75.75 0 0 0 1.5 0v-2.5A.75.75 0 0 0 8.25 8h-1.5Z" clip-rule="evenodd" /></svg>`}
+                    <p>
+                      <foxy-i18n infer="" key="edits_tip"></foxy-i18n>
+                      <a
+                        target="_blank"
+                        class="rounded font-medium underline transition-colors cursor-pointer hover-opacity-80 focus-outline-none focus-ring-2 focus-ring-primary-50"
+                        href="https://wiki.foxycart.com/v/2.0/products"
+                      >
+                        <foxy-i18n infer="" key="edits_docs"></foxy-i18n>
+                      </a>
+                    </p>
+                  </div>
+                </foxy-internal-summary-control>
+
+                <foxy-internal-summary-control infer="link">
+                  ${addToCartCode.linkHref
+                ? html `
+                        <div
+                          class="flex items-center leading-s min-w-0 relative"
+                          style="gap: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+                        >
+                          <foxy-i18n infer="" key="direct_link"></foxy-i18n>
+                          <a
+                            target="_blank"
+                            style="max-width: 30rem"
+                            href=${addToCartCode.linkHref}
+                            class=${classMap({
+                    'font-medium truncate ml-auto min-w-0 rounded-s': true,
+                    'transition-all filter': true,
+                    'hover-underline': true,
+                    'focus-outline-none focus-ring-2 focus-ring-primary-50': true,
+                    'blur-sm': this.__signingState !== 'idle',
+                })}
+                          >
+                            ${addToCartCode.linkHref}
+                          </a>
+                          <div
+                            style="top: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px); right: calc(0.625em + (var(--lumo-border-radius) / 4) - 1px)"
+                            class=${classMap({
+                    'absolute right-0 bg-base rounded-s transition-opacity': true,
+                    'opacity-0 pointer-events-none': this.__signingState !== 'busy',
+                })}
+                          >
+                            <div class="bg-contrast-10 rounded-s">
+                              <foxy-spinner
+                                infer="spinner"
+                                state=${this.__signingState === 'fail' ? 'error' : 'busy'}
+                                class="-mx-xs"
+                                style="transform: scale(0.8)"
+                              >
+                              </foxy-spinner>
+                            </div>
+                          </div>
+                          <foxy-copy-to-clipboard
+                            infer="copy-to-clipboard"
+                            text=${addToCartCode.linkHref}
+                            class=${classMap({
+                    'flex-shrink-0 text-m transition-opacity': true,
+                    'opacity-0 pointer-events-none': this.__signingState === 'busy',
+                })}
+                          >
+                          </foxy-copy-to-clipboard>
+                        </div>
+                      `
+                : html `
+                        <p class="text-disabled">
+                          <foxy-i18n infer="" key="unavailable"></foxy-i18n>
+                        </p>
+                      `}
+                </foxy-internal-summary-control>
+              `
+            : html `
+                <foxy-internal-summary-control infer="preview">
+                  <div class="flex items-center justify-center p-xl">
+                    <foxy-spinner infer="unavailable"></foxy-spinner>
+                  </div>
+                </foxy-internal-summary-control>
+              `}
+
+          <foxy-internal-summary-control infer="cart-settings">
+            <foxy-internal-resource-picker-control
+              layout="summary-item"
+              first=${ifDefined((_g = (_f = this.__storeLoader) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g._links['fx:template_sets'].href)}
+              infer="template-set-uri"
+              item="foxy-template-set-card"
+            >
+            </foxy-internal-resource-picker-control>
+
+            <foxy-internal-select-control
+              layout="summary-item"
+              infer="empty"
+              .options=${this.__emptyOptions}
+            >
+            </foxy-internal-select-control>
+
+            <foxy-internal-select-control
+              layout="summary-item"
+              infer="cart"
+              .options=${this.__cartOptions}
+            >
+            </foxy-internal-select-control>
+
+            ${this.form.cart === 'redirect'
+            ? html `
+                  <foxy-internal-text-control layout="summary-item" infer="redirect">
+                  </foxy-internal-text-control>
+                `
+            : ''}
+
+            <foxy-internal-text-control layout="summary-item" infer="coupon">
+            </foxy-internal-text-control>
+          </foxy-internal-summary-control>
+        </div>
+      </div>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__defaultTemplateSetHref)}
+        id="defaultTemplateSetLoader"
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined(this.__defaultItemCategoryHref)}
+        id="defaultItemCategoryLoader"
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined((_h = this.localeCodes) !== null && _h !== void 0 ? _h : void 0)}
+        id="localeCodesHelperLoader"
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined((_j = this.form.template_set_uri) !== null && _j !== void 0 ? _j : void 0)}
+        id="templateSetLoader"
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      <foxy-nucleon
+        class="hidden"
+        infer=""
+        href=${ifDefined((_m = (_l = (_k = this.data) === null || _k === void 0 ? void 0 : _k._links['fx:store'].href) !== null && _l !== void 0 ? _l : this.store) !== null && _m !== void 0 ? _m : void 0)}
+        id="storeLoaderId"
+        @update=${() => this.requestUpdate()}
+      >
+      </foxy-nucleon>
+
+      ${(_o = this.form.items) === null || _o === void 0 ? void 0 : _o.map((product, index) => {
+            var _a;
+            return html `
+          <foxy-nucleon
+            class="hidden"
+            infer=""
+            href=${ifDefined((_a = product.item_category_uri) !== null && _a !== void 0 ? _a : void 0)}
+            id="itemCategoryLoaderProduct${index}"
+            @update=${() => this.requestUpdate()}
+          >
+          </foxy-nucleon>
+
+          ${product.custom_options.map((option, i) => {
+                var _a;
+                return html `
+              <foxy-nucleon
+                class="hidden"
+                infer=""
+                href=${ifDefined((_a = option.item_category_uri) !== null && _a !== void 0 ? _a : void 0)}
+                id="itemCategoryLoaderProduct${index}Option${i}"
+                @update=${() => this.requestUpdate()}
+              >
+              </foxy-nucleon>
+            `;
+            })}
+        `;
+        })}
+    `;
+    }
+    updated(changes) {
+        var _a, _b;
+        super.updated(changes);
+        if (this.in('idle') && !((_a = this.form.items) === null || _a === void 0 ? void 0 : _a.length)) {
+            this.edit({ items: [{ name: '', price: 0, sub_frequency: '1m', custom_options: [] }] });
+            this.__openState = [true];
+        }
+        if (((_b = this.form.items) === null || _b === void 0 ? void 0 : _b.length) && !this.__openState.length) {
+            this.__openState = [true, ...new Array(this.form.items.length - 1).fill(false)];
+        }
+    }
+    submit() {
+        // Do nothing – this form is not meant to be submitted.
+    }
+    get __defaultTemplateSetHref() {
+        var _a, _b, _c;
+        try {
+            const url = new URL((_c = (_b = (_a = this.__storeLoader) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b._links['fx:template_sets'].href) !== null && _c !== void 0 ? _c : '');
+            url.searchParams.set('code', 'DEFAULT');
+            return url.toString();
+        }
+        catch (_d) {
+            return undefined;
+        }
+    }
+    get __defaultItemCategoryHref() {
+        var _a, _b, _c;
+        try {
+            const url = new URL((_c = (_b = (_a = this.__storeLoader) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b._links['fx:item_categories'].href) !== null && _c !== void 0 ? _c : '');
+            url.searchParams.set('code', 'DEFAULT');
+            return url.toString();
+        }
+        catch (_d) {
+            return undefined;
+        }
+    }
+    get __resolvedCurrencyCode() {
+        var _a, _b, _c, _d;
+        const localeCodesLoader = this.renderRoot.querySelector('#localeCodesHelperLoader');
+        const currentLocale = (_a = this.__resolvedTemplateSet) === null || _a === void 0 ? void 0 : _a.locale_code;
+        const allLocales = (_b = localeCodesLoader === null || localeCodesLoader === void 0 ? void 0 : localeCodesLoader.data) === null || _b === void 0 ? void 0 : _b.values;
+        const localeInfo = currentLocale ? allLocales === null || allLocales === void 0 ? void 0 : allLocales[currentLocale] : void 0;
+        return localeInfo ? (_d = (_c = /Currency: ([A-Z]{3})/g.exec(localeInfo)) === null || _c === void 0 ? void 0 : _c[1]) === null || _d === void 0 ? void 0 : _d.toUpperCase() : void 0;
+    }
+    get __resolvedTemplateSet() {
+        var _a, _b, _c, _d;
+        const $ = (s) => this.renderRoot.querySelector(s);
+        return ((_b = (_a = $('#templateSetLoader')) === null || _a === void 0 ? void 0 : _a.data) !== null && _b !== void 0 ? _b : (_d = (_c = $('#defaultTemplateSetLoader')) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d._embedded['fx:template_sets'][0]);
+    }
+    get __defaultItemCategory() {
+        var _a, _b;
+        return (_b = (_a = this.renderRoot.querySelector('#defaultItemCategoryLoader')) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b._embedded['fx:item_categories'][0];
+    }
+    get __resolvedCartUrl() {
+        var _a;
+        const store = (_a = this.__storeLoader) === null || _a === void 0 ? void 0 : _a.data;
+        if (store) {
+            if (store.use_remote_domain) {
+                return `https://${store.store_domain}/cart`;
+            }
+            else if (this.defaultDomain !== null) {
+                return `https://${store.store_domain}.${this.defaultDomain}/cart`;
+            }
+        }
+        return null;
+    }
+    get __storeLoader() {
+        return this.renderRoot.querySelector('#storeLoaderId');
+    }
+    __getItemCategoryLoader(productIndex, optionIndex) {
+        const prefix = `#itemCategoryLoaderProduct${productIndex}`;
+        const selector = typeof optionIndex === 'number' ? `${prefix}Option${optionIndex}` : prefix;
+        return this.renderRoot.querySelector(selector);
+    }
+    __getAddToCartFormHTML() {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const currencyCode = this.__resolvedCurrencyCode;
+        const templateSet = this.__resolvedTemplateSet;
+        const cartUrl = this.__resolvedCartUrl;
+        const store = (_a = this.__storeLoader) === null || _a === void 0 ? void 0 : _a.data;
+        if (!this.defaultDomain || !templateSet || !store || !currencyCode || !cartUrl)
+            return '';
+        let hasAtLeastOneFieldset = false;
+        let output = `<form action="${encode(cartUrl)}" method="post" target="_blank">`;
+        let level = 1;
+        const newline = () => `\n${' '.repeat(level * 2)}`;
+        const addHiddenInput = (name, value) => {
+            const encodedValue = encode(value);
+            const encodedName = encode(name);
+            output += `${newline()}<input type="hidden" name="${encodedName}" value="${encodedValue}">`;
+        };
+        if (templateSet.code !== 'DEFAULT')
+            addHiddenInput('template_set', templateSet.code);
+        if (this.form.empty && this.form.empty !== 'false')
+            addHiddenInput('empty', this.form.empty);
+        if (this.form.cart === 'checkout')
+            addHiddenInput('cart', 'checkout');
+        if (this.form.redirect)
+            addHiddenInput('redirect', this.form.redirect);
+        if (this.form.coupon)
+            addHiddenInput('coupon', this.form.coupon);
+        const items = (_b = this.form.items) !== null && _b !== void 0 ? _b : [];
+        const hasMoreThanOneProduct = items.length > 1;
+        for (let productIndex = 0; productIndex < items.length; ++productIndex) {
+            const itemCategoryLoader = this.__getItemCategoryLoader(productIndex);
+            const itemCategory = itemCategoryLoader === null || itemCategoryLoader === void 0 ? void 0 : itemCategoryLoader.data;
+            const product = items[productIndex];
+            if (product.item_category_uri && !itemCategory)
+                return '';
+            const resolvedMinQty = Math.max(1, (_c = product.quantity_min) !== null && _c !== void 0 ? _c : 1);
+            const resolvedMaxQty = Math.max(resolvedMinQty, (_d = product.quantity_max) !== null && _d !== void 0 ? _d : Infinity);
+            const varyQty = resolvedMinQty !== resolvedMaxQty &&
+                product.expires_format !== 'minutes' &&
+                !product.hide_quantity;
+            const varyPrice = product.price_configurable;
+            const varyptions = product.custom_options.some((v, i, a) => v.value_configurable || a.findIndex(vv => vv.name === v.name) !== i);
+            const resolvedName = product.name.trim() || this.t('items.item-group.item.basics-group.name.placeholder');
+            const needsFieldset = hasAtLeastOneFieldset || (hasMoreThanOneProduct && (varyPrice || varyQty || varyptions));
+            if (needsFieldset) {
+                hasAtLeastOneFieldset = true;
+                output += `${newline()}<fieldset>`;
+                level++;
+                output += `${newline()}<legend>${encode(resolvedName)}</legend>`;
+            }
+            const prefix = productIndex === 0 ? '' : `${productIndex + 1}:`;
+            addHiddenInput(`${prefix}name`, resolvedName);
+            const price = `${product.price}${currencyCode}`;
+            if (product.price_configurable) {
+                const encodedNoCurrencyPrice = encode(product.price.toFixed(2));
+                output += `${newline()}<label>`;
+                level++;
+                output += `${newline()}<span>${encode(this.t('preview.price_label'))}</span>`;
+                if (store.use_cart_validation) {
+                    output += `${newline()}<input required name="${prefix}price" value="--OPEN--" data-replace="${encodedNoCurrencyPrice}">`;
+                }
+                else {
+                    output += `${newline()}<input required name="${prefix}price" value="${encodedNoCurrencyPrice}">`;
+                }
+                level--;
+                output += `${newline()}</label>`;
+            }
+            else {
+                addHiddenInput(`${prefix}price`, price);
+            }
+            if (itemCategory && itemCategory.code !== 'DEFAULT') {
+                addHiddenInput(`${prefix}category`, itemCategory.code);
+            }
+            if (product.code)
+                addHiddenInput(`${prefix}code`, product.code);
+            if (product.parent_code)
+                addHiddenInput(`${prefix}parent_code`, product.parent_code);
+            if (product.image) {
+                addHiddenInput(`${prefix}image`, product.image);
+                if (product.url)
+                    addHiddenInput(`${prefix}url`, product.url);
+            }
+            if (product.sub_enabled) {
+                if (product.sub_frequency) {
+                    addHiddenInput(`${prefix}sub_frequency`, product.sub_frequency);
+                    if (product.sub_startdate) {
+                        if (product.sub_startdate_format === 'yyyymmdd') {
+                            const date = new Date(product.sub_startdate);
+                            const year = date.getFullYear();
+                            const month = (date.getMonth() + 1).toString().padStart(2, '0');
+                            const day = date.getDate().toString().padStart(2, '0');
+                            addHiddenInput(`${prefix}sub_startdate`, `${year}${month}${day}`);
+                        }
+                        else {
+                            addHiddenInput(`${prefix}sub_startdate`, String(product.sub_startdate));
+                        }
+                    }
+                    if (product.sub_enddate) {
+                        if (product.sub_enddate_format === 'yyyymmdd') {
+                            const date = new Date(product.sub_enddate);
+                            const year = date.getFullYear();
+                            const month = (date.getMonth() + 1).toString().padStart(2, '0');
+                            const day = date.getDate().toString().padStart(2, '0');
+                            addHiddenInput(`${prefix}sub_enddate`, `${year}${month}${day}`);
+                        }
+                        else {
+                            addHiddenInput(`${prefix}sub_enddate`, String(product.sub_enddate));
+                        }
+                    }
+                }
+            }
+            if (product.discount_name && product.discount_type && product.discount_details) {
+                addHiddenInput(`${prefix}discount_${product.discount_type}`, `${product.discount_name}{${product.discount_details}}`);
+            }
+            if (product.expires_value) {
+                if (product.expires_format === 'timestamp') {
+                    addHiddenInput(`${prefix}expires`, product.expires_value.toFixed(0));
+                }
+                else {
+                    addHiddenInput(`${prefix}expires`, product.expires_value.toFixed(0));
+                }
+            }
+            if (varyQty) {
+                output += `${newline()}<label>`;
+                level++;
+                output += `${newline()}<span>${encode(this.t('preview.quantity_label'))}</span>`;
+                output += `${newline()}<input type="number" name="${encode(`${prefix}quantity`)}"`;
+                output += ` min="${encode(String(resolvedMinQty))}"`;
+                if (resolvedMaxQty !== Infinity)
+                    output += ` max="${encode(String(resolvedMaxQty))}"`;
+                if (store.use_cart_validation) {
+                    output += ` value="--OPEN--" data-replace="${encode(String((_e = product.quantity) !== null && _e !== void 0 ? _e : 1))}">`;
+                }
+                else {
+                    output += ` value="${encode(String((_f = product.quantity) !== null && _f !== void 0 ? _f : 1))}">`;
+                }
+                level--;
+                output += `${newline()}</label>`;
+            }
+            else if (((_g = product.quantity) !== null && _g !== void 0 ? _g : 1) > 1) {
+                addHiddenInput(`${prefix}quantity`, ((_h = product.quantity) !== null && _h !== void 0 ? _h : 1).toString());
+            }
+            if (product.expires_format !== 'minutes') {
+                if (resolvedMinQty !== 1) {
+                    addHiddenInput(`${prefix}quantity_min`, resolvedMinQty.toFixed(0));
+                }
+                if (resolvedMaxQty !== Infinity) {
+                    addHiddenInput(`${prefix}quantity_max`, resolvedMaxQty.toFixed(0));
+                }
+            }
+            if (product.length)
+                addHiddenInput(`${prefix}length`, product.length.toFixed(3));
+            if (product.width)
+                addHiddenInput(`${prefix}width`, product.width.toFixed(3));
+            if (product.height)
+                addHiddenInput(`${prefix}height`, product.height.toFixed(3));
+            if (product.weight)
+                addHiddenInput(`${prefix}weight`, product.weight.toFixed(3));
+            if (store.features_multiship) {
+                output += `${newline()}<label>`;
+                level++;
+                output += `${newline()}<span>${encode(this.t('preview.shipto_label'))}</span>`;
+                if (store.use_cart_validation) {
+                    output += `${newline()}<input name="${prefix}shipto" value="--OPEN--" data-replace="">`;
+                }
+                else {
+                    output += `${newline()}<input name="${prefix}shipto" value="">`;
+                }
+                level--;
+                output += `${newline()}</label>`;
+            }
+            const groupedCustomOptions = product.custom_options.reduce((acc, option) => {
+                if (!acc[option.name])
+                    acc[option.name] = [];
+                acc[option.name].push(option);
+                return acc;
+            }, {});
+            for (const optionName in groupedCustomOptions) {
+                const group = groupedCustomOptions[optionName];
+                if (group.length === 1) {
+                    const optionIndex = product.custom_options.indexOf(group[0]);
+                    const itemCategory = (_j = this.__getItemCategoryLoader(productIndex, optionIndex)) === null || _j === void 0 ? void 0 : _j.data;
+                    const modifiers = this.__getOptionModifiers(group[0], itemCategory !== null && itemCategory !== void 0 ? itemCategory : null, currencyCode);
+                    const value = `${group[0].value}${modifiers}`;
+                    const name = `${prefix}${optionName}`;
+                    if (group[0].value_configurable) {
+                        output += `${newline()}<label>`;
+                        level++;
+                        output += `${newline()}<span>${encode(optionName)}:</span>`;
+                        output += `${newline()}<input name="${encode(name)}" `;
+                        if (store.use_cart_validation) {
+                            output += `value="--OPEN--" data-replace="${encode(value)}">`;
+                        }
+                        else {
+                            output += `value="${encode(value)}">`;
+                        }
+                        level--;
+                        output += `${newline()}</label>`;
+                    }
+                    else {
+                        addHiddenInput(name, value);
+                    }
+                }
+                else {
+                    output += `${newline()}<label>`;
+                    level++;
+                    output += `${newline()}<span>${encode(optionName)}:</span>`;
+                    output += `${newline()}<select name="${prefix}${optionName}">`;
+                    level++;
+                    group.forEach(option => {
+                        var _a;
+                        const optionIndex = product.custom_options.indexOf(option);
+                        const itemCategory = (_a = this.__getItemCategoryLoader(productIndex, optionIndex)) === null || _a === void 0 ? void 0 : _a.data;
+                        const modifiers = this.__getOptionModifiers(option, itemCategory !== null && itemCategory !== void 0 ? itemCategory : null, currencyCode);
+                        const encodedValue = encode(`${option.value}${modifiers}`);
+                        const encodedCaption = encode(option.value);
+                        output += `${newline()}<option value="${encodedValue}">${encodedCaption}</option>`;
+                    });
+                    level--;
+                    output += `${newline()}</select>`;
+                    level--;
+                    output += `${newline()}</label>`;
+                }
+            }
+            if (needsFieldset) {
+                level--;
+                output += `${newline()}</fieldset>`;
+            }
+        }
+        const encodedSubmitCaption = encode(this.t('preview.submit_caption'));
+        output += `${newline()}<button type="submit">${encodedSubmitCaption}</button>`;
+        level--;
+        output += `${newline()}</form>`;
+        return output;
+    }
+    __getAddToCartLinkHref() {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const currencyCode = this.__resolvedCurrencyCode;
+        const templateSet = this.__resolvedTemplateSet;
+        const cartUrl = this.__resolvedCartUrl;
+        const store = (_a = this.__storeLoader) === null || _a === void 0 ? void 0 : _a.data;
+        if (!this.defaultDomain || !templateSet || !store || !currencyCode || !cartUrl)
+            return '';
+        const url = new URL(cartUrl);
+        if (templateSet.code !== 'DEFAULT')
+            url.searchParams.set('template_set', templateSet.code);
+        if (this.form.cart === 'checkout')
+            url.searchParams.set('cart', 'checkout');
+        if (this.form.redirect)
+            url.searchParams.set('redirect', this.form.redirect);
+        if (this.form.coupon)
+            url.searchParams.set('coupon', this.form.coupon);
+        if (this.form.empty && this.form.empty !== 'false') {
+            url.searchParams.set('empty', this.form.empty);
+        }
+        for (let index = 0; index < ((_c = (_b = this.form.items) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0); ++index) {
+            const product = this.form.items[index];
+            const prefix = index === 0 ? '' : `${index + 1}:`;
+            const itemCategory = (_d = this.__getItemCategoryLoader(index)) === null || _d === void 0 ? void 0 : _d.data;
+            if (product.item_category_uri && !itemCategory)
+                return '';
+            if (product.price_configurable)
+                return '';
+            if (new Set(product.custom_options.map(v => v.name)).size < product.custom_options.length) {
+                return '';
+            }
+            if (itemCategory && itemCategory.code !== 'DEFAULT') {
+                url.searchParams.set(`${prefix}category`, itemCategory.code);
+            }
+            url.searchParams.set(`${prefix}name`, product.name);
+            url.searchParams.set(`${prefix}price`, `${product.price}${currencyCode}`);
+            if (product.code)
+                url.searchParams.set(`${prefix}code`, product.code);
+            if (product.parent_code)
+                url.searchParams.set(`${prefix}parent_code`, product.parent_code);
+            if (product.image) {
+                url.searchParams.set(`${prefix}image`, product.image);
+                if (product.url)
+                    url.searchParams.set(`${prefix}url`, product.url);
+            }
+            if (product.sub_enabled) {
+                if (product.sub_frequency) {
+                    url.searchParams.set(`${prefix}sub_frequency`, product.sub_frequency);
+                    if (product.sub_startdate) {
+                        if (product.sub_startdate_format === 'yyyymmdd') {
+                            const date = new Date(product.sub_startdate);
+                            const year = date.getFullYear();
+                            const month = (date.getMonth() + 1).toString().padStart(2, '0');
+                            const day = date.getDate().toString().padStart(2, '0');
+                            url.searchParams.set(`${prefix}sub_startdate`, `${year}${month}${day}`);
+                        }
+                        else {
+                            url.searchParams.set(`${prefix}sub_startdate`, String(product.sub_startdate));
+                        }
+                    }
+                    if (product.sub_enddate) {
+                        if (product.sub_enddate_format === 'yyyymmdd') {
+                            const date = new Date(product.sub_enddate);
+                            const year = date.getFullYear();
+                            const month = (date.getMonth() + 1).toString().padStart(2, '0');
+                            const day = date.getDate().toString().padStart(2, '0');
+                            url.searchParams.set(`${prefix}sub_enddate`, `${year}${month}${day}`);
+                        }
+                        else {
+                            url.searchParams.set(`${prefix}sub_enddate`, String(product.sub_enddate));
+                        }
+                    }
+                }
+            }
+            if (product.discount_name && product.discount_type && product.discount_details) {
+                url.searchParams.set(`${prefix}discount_${product.discount_type}`, `${product.discount_name}{${product.discount_details}}`);
+            }
+            if (product.expires_value) {
+                if (product.expires_format === 'timestamp') {
+                    url.searchParams.set(`${prefix}expires`, product.expires_value.toFixed(0));
+                }
+                else {
+                    url.searchParams.set(`${prefix}expires`, product.expires_value.toFixed(0));
+                }
+            }
+            if (((_e = product.quantity) !== null && _e !== void 0 ? _e : 1) > 1) {
+                url.searchParams.set(`${prefix}quantity`, ((_f = product.quantity) !== null && _f !== void 0 ? _f : 1).toFixed(0));
+            }
+            if (product.expires_format !== 'minutes') {
+                if (product.quantity_min) {
+                    url.searchParams.set(`${prefix}quantity_min`, product.quantity_min.toString());
+                }
+                if (product.quantity_max) {
+                    url.searchParams.set(`${prefix}quantity_max`, product.quantity_max.toString());
+                }
+            }
+            if (product.weight)
+                url.searchParams.set(`${prefix}weight`, product.weight.toFixed(3));
+            if (product.length)
+                url.searchParams.set(`${prefix}length`, product.length.toFixed(3));
+            if (product.width)
+                url.searchParams.set(`${prefix}width`, product.width.toFixed(3));
+            if (product.height)
+                url.searchParams.set(`${prefix}height`, product.height.toFixed(3));
+            for (let optionIndex = 0; optionIndex < product.custom_options.length; ++optionIndex) {
+                const option = product.custom_options[optionIndex];
+                if (option.value_configurable)
+                    return '';
+                const itemCategory = (_g = this.__getItemCategoryLoader(index, optionIndex)) === null || _g === void 0 ? void 0 : _g.data;
+                const modifiers = this.__getOptionModifiers(option, itemCategory !== null && itemCategory !== void 0 ? itemCategory : null, currencyCode);
+                url.searchParams.set(`${prefix}${option.name}`, `${(_h = option.value) !== null && _h !== void 0 ? _h : ''}${modifiers}`);
+            }
+        }
+        return url.toString();
+    }
+    __getAddToCartCode() {
+        var _a;
+        const store = (_a = this.__storeLoader) === null || _a === void 0 ? void 0 : _a.data;
+        if (!this.encodeHelper || !store)
+            return null;
+        const formHTML = this.__getAddToCartFormHTML();
+        const linkHref = this.__getAddToCartLinkHref();
+        if (!formHTML && !linkHref)
+            return null;
+        let unsignedCode;
+        if (linkHref) {
+            const linkHTML = `<a href="${encode(linkHref)}">Add to cart</a>`;
+            unsignedCode = `${formHTML}${this.__signingSeparator}${linkHTML}`;
+        }
+        else {
+            unsignedCode = formHTML;
+        }
+        if (unsignedCode === this.__previousUnsignedCode && this.__previousSignedCode) {
+            const [formHTML, linkHTML] = this.__previousSignedCode.split(this.__signingSeparator);
+            return {
+                linkHref: linkHTML ? decode(linkHTML.substring(9, linkHTML.length - 17)) : '',
+                formHTML,
+            };
+        }
+        this.__previousUnsignedCode = unsignedCode;
+        this.__previousSignedCode = '';
+        if (store.use_cart_validation)
+            this.__signAsync(unsignedCode, this.encodeHelper);
+        return { formHTML, linkHref };
+    }
+    __getOptionModifiers(option, optionItemCategory, currencyCode) {
+        if (option.value_configurable)
+            return '';
+        const modifiers = [];
+        if (option.price) {
+            const operator = option.replace_price ? ':' : Math.sign(option.price) === -1 ? '-' : '+';
+            if (option.replace_price || option.price !== 0)
+                modifiers.push(`p${operator}${Math.abs(option.price)}${currencyCode}`);
+        }
+        if (option.weight) {
+            const operator = option.replace_weight ? ':' : Math.sign(option.weight) === -1 ? '-' : '+';
+            if (option.replace_weight || option.weight !== 0)
+                modifiers.push(`w${operator}${Math.abs(option.weight)}`);
+        }
+        if (option.item_category_uri && !optionItemCategory)
+            return '';
+        if (optionItemCategory)
+            modifiers.push(`y:${optionItemCategory.code}`);
+        if (option.code) {
+            const operator = option.replace_code ? ':' : '+';
+            if (option.replace_code || option.code !== '')
+                modifiers.push(`c${operator}${option.code}`);
+        }
+        return modifiers.length ? `{${modifiers.join('|')}}` : '';
+    }
+}
+//# sourceMappingURL=ExperimentalAddToCartBuilder.js.map