@foxy.io/elements 1.35.0-beta.1 → 1.35.0-beta.3

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

@@ -1,14 +1,19 @@
 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 { unsafeHTML } from 'lit-html/directives/unsafe-html';
 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';
+import hljsxml from 'highlight.js/lib/languages/xml.js';
+import hljs from 'highlight.js/lib/core.js';
 const NS = 'experimental-add-to-cart-builder';
 const Base = ResponsiveMixin(TranslatableMixin(InternalForm, NS));
+hljs.registerLanguage('xml', hljsxml);
 /**
  * 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.
@@ -30,6 +35,16 @@ export class ExperimentalAddToCartBuilder extends Base {
         /** 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;
@@ -77,21 +92,26 @@ export class ExperimentalAddToCartBuilder extends Base {
             __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;
+        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">
-        <div class="space-y-m">
+        <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"
+                infer="item-group"
                 ?open=${ifDefined(this.__openState[index])}
                 @toggle=${(evt) => {
                 const details = evt.currentTarget;
@@ -104,7 +124,8 @@ export class ExperimentalAddToCartBuilder extends Base {
                   currency-code=${ifDefined((_a = this.__resolvedCurrencyCode) !== null && _a !== void 0 ? _a : void 0)}
                   store=${ifDefined(storeUrl)}
                   index=${index}
-                  infer=""
+                  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);
@@ -119,10 +140,11 @@ export class ExperimentalAddToCartBuilder extends Base {
 
           <vaadin-button
             class="w-full"
+            theme="success"
             ?disabled=${this.disabled}
             @click=${() => {
             var _a;
-            const newItem = { name: '', price: 0, custom_options: [] };
+            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];
@@ -130,7 +152,7 @@ export class ExperimentalAddToCartBuilder extends Base {
           >
             <foxy-i18n infer="add-product" key="caption"></foxy-i18n>
           </vaadin-button>
-        </div>
+        </foxy-internal-summary-control>
 
         <div class="space-y-m md-col-span-2 sticky top-0">
           ${addToCartCode
@@ -166,7 +188,9 @@ export class ExperimentalAddToCartBuilder extends Base {
                 'blur-sm': this.__signingState !== 'idle',
             })}
                     >
-                      <code class="whitespace-pre">${addToCartCode.formHTML}</code>
+                      <code class="whitespace-pre"
+                        >${unsafeHTML(hljs.highlight(addToCartCode.formHTML, { language: 'xml' }).value)}</code
+                      >
                     </div>
 
                     <div
@@ -212,66 +236,71 @@ export class ExperimentalAddToCartBuilder extends Base {
                 </foxy-internal-summary-control>
 
                 <foxy-internal-summary-control infer="link">
-                  <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)"
+                  ${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-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>
+                          <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" state="empty"></foxy-spinner>
+                    <foxy-spinner infer="unavailable"></foxy-spinner>
                   </div>
                 </foxy-internal-summary-control>
               `}
 
-          <foxy-internal-summary-control infer="cart-settings-group">
+          <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)}
@@ -283,21 +312,26 @@ export class ExperimentalAddToCartBuilder extends Base {
             <foxy-internal-select-control
               layout="summary-item"
               infer="empty"
-              .options=${[
-            { label: 'option_false', value: 'false' },
-            { label: 'option_true', value: 'true' },
-            { label: 'option_reset', value: 'reset' },
-        ]}
+              .options=${this.__emptyOptions}
             >
             </foxy-internal-select-control>
 
-            <foxy-internal-switch-control
-              false-alias="add"
-              true-alias="checkout"
+            <foxy-internal-select-control
               layout="summary-item"
               infer="cart"
+              .options=${this.__cartOptions}
             >
-            </foxy-internal-switch-control>
+            </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>
@@ -314,7 +348,16 @@ export class ExperimentalAddToCartBuilder extends Base {
       <foxy-nucleon
         class="hidden"
         infer=""
-        href=${ifDefined(this.localeCodes)}
+        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()}
       >
@@ -323,7 +366,7 @@ export class ExperimentalAddToCartBuilder extends Base {
       <foxy-nucleon
         class="hidden"
         infer=""
-        href=${ifDefined((_h = this.form.template_set_uri) !== null && _h !== void 0 ? _h : void 0)}
+        href=${ifDefined((_j = this.form.template_set_uri) !== null && _j !== void 0 ? _j : void 0)}
         id="templateSetLoader"
         @update=${() => this.requestUpdate()}
       >
@@ -332,29 +375,31 @@ export class ExperimentalAddToCartBuilder extends Base {
       <foxy-nucleon
         class="hidden"
         infer=""
-        href=${ifDefined((_l = (_k = (_j = this.data) === null || _j === void 0 ? void 0 : _j._links['fx:store'].href) !== null && _k !== void 0 ? _k : this.store) !== null && _l !== void 0 ? _l : void 0)}
+        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>
 
-      ${(_m = this.form.items) === null || _m === void 0 ? void 0 : _m.map((product, index) => {
+      ${(_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(product.item_category_uri)}
+            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(option.item_category_uri)}
+                href=${ifDefined((_a = option.item_category_uri) !== null && _a !== void 0 ? _a : void 0)}
                 id="itemCategoryLoaderProduct${index}Option${i}"
                 @update=${() => this.requestUpdate()}
               >
@@ -369,7 +414,7 @@ export class ExperimentalAddToCartBuilder extends Base {
         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, custom_options: [] }] });
+            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) {
@@ -377,7 +422,7 @@ export class ExperimentalAddToCartBuilder extends Base {
         }
     }
     submit() {
-        // Do nothing – in this version of the element, this form is not meant to be submitted.
+        // Do nothing – this form is not meant to be submitted.
     }
     get __defaultTemplateSetHref() {
         var _a, _b, _c;
@@ -390,6 +435,17 @@ export class ExperimentalAddToCartBuilder extends Base {
             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');
@@ -403,6 +459,10 @@ export class ExperimentalAddToCartBuilder extends Base {
         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;
@@ -425,13 +485,14 @@ export class ExperimentalAddToCartBuilder extends Base {
         return this.renderRoot.querySelector(selector);
     }
     __getAddToCartFormHTML() {
-        var _a, _b, _c, _d, _e, _f, _g;
+        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)}`;
@@ -442,43 +503,50 @@ export class ExperimentalAddToCartBuilder extends Base {
         };
         if (templateSet.code !== 'DEFAULT')
             addHiddenInput('template_set', templateSet.code);
-        if (this.form.empty)
+        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.name || !product.price)
-                return '';
             if (product.item_category_uri && !itemCategory)
                 return '';
-            const hasConfigurableQuantity = product.quantity_min !== product.quantity_max;
-            const hasConfigurablePrice = product.price_configurable;
-            const hasConfigurableOptions = product.custom_options.some((v, i, a) => v.value_configurable || a.findIndex(vv => vv.name === v.name) !== i);
-            const useFieldset = hasMoreThanOneProduct &&
-                (hasConfigurablePrice || hasConfigurableQuantity || hasConfigurableOptions);
-            if (useFieldset) {
+            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(product.name)}</legend>`;
+                output += `${newline()}<legend>${encode(resolvedName)}</legend>`;
             }
             const prefix = productIndex === 0 ? '' : `${productIndex + 1}:`;
-            addHiddenInput(`${prefix}name`, product.name);
+            addHiddenInput(`${prefix}name`, resolvedName);
             const price = `${product.price}${currencyCode}`;
             if (product.price_configurable) {
-                const encodedPrice = encode(price);
+                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="${encodedPrice}">`;
+                    output += `${newline()}<input required name="${prefix}price" value="--OPEN--" data-replace="${encodedNoCurrencyPrice}">`;
                 }
                 else {
-                    output += `${newline()}<input required name="${prefix}price" value="${encodedPrice}">`;
+                    output += `${newline()}<input required name="${prefix}price" value="${encodedNoCurrencyPrice}">`;
                 }
                 level--;
                 output += `${newline()}</label>`;
@@ -522,7 +590,7 @@ export class ExperimentalAddToCartBuilder extends Base {
                             addHiddenInput(`${prefix}sub_enddate`, `${year}${month}${day}`);
                         }
                         else {
-                            addHiddenInput(`${prefix}sub_enddate`, product.sub_enddate);
+                            addHiddenInput(`${prefix}sub_enddate`, String(product.sub_enddate));
                         }
                     }
                 }
@@ -532,41 +600,38 @@ export class ExperimentalAddToCartBuilder extends Base {
             }
             if (product.expires_value) {
                 if (product.expires_format === 'timestamp') {
-                    addHiddenInput(`${prefix}expires`, (product.expires_value / 1000).toFixed(0));
+                    addHiddenInput(`${prefix}expires`, product.expires_value.toFixed(0));
                 }
                 else {
                     addHiddenInput(`${prefix}expires`, product.expires_value.toFixed(0));
                 }
             }
-            if (product.quantity_min || product.quantity_max) {
+            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`)}"`;
-                if (product.expires_format !== 'minutes') {
-                    if (product.quantity_min)
-                        output += ` min="${encode(String(product.quantity_min))}"`;
-                    if (product.quantity_max)
-                        output += ` max="${encode(String(product.quantity_max))}"`;
-                }
+                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((_c = product.quantity) !== null && _c !== void 0 ? _c : 1))}">`;
+                    output += ` value="--OPEN--" data-replace="${encode(String((_e = product.quantity) !== null && _e !== void 0 ? _e : 1))}">`;
                 }
                 else {
-                    output += ` value="${encode(String((_d = product.quantity) !== null && _d !== void 0 ? _d : 1))}">`;
+                    output += ` value="${encode(String((_f = product.quantity) !== null && _f !== void 0 ? _f : 1))}">`;
                 }
                 level--;
                 output += `${newline()}</label>`;
             }
-            else if (((_e = product.quantity) !== null && _e !== void 0 ? _e : 1) > 1) {
-                addHiddenInput(`${prefix}quantity`, ((_f = product.quantity) !== null && _f !== void 0 ? _f : 1).toString());
+            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 (product.quantity_min) {
-                    addHiddenInput(`${prefix}quantity_min`, product.quantity_min.toFixed(0));
+                if (resolvedMinQty !== 1) {
+                    addHiddenInput(`${prefix}quantity_min`, resolvedMinQty.toFixed(0));
                 }
-                if (product.quantity_max) {
-                    addHiddenInput(`${prefix}quantity_max`, product.quantity_max.toFixed(0));
+                if (resolvedMaxQty !== Infinity) {
+                    addHiddenInput(`${prefix}quantity_max`, resolvedMaxQty.toFixed(0));
                 }
             }
             if (product.length)
@@ -600,7 +665,7 @@ export class ExperimentalAddToCartBuilder extends Base {
                 const group = groupedCustomOptions[optionName];
                 if (group.length === 1) {
                     const optionIndex = product.custom_options.indexOf(group[0]);
-                    const itemCategory = (_g = this.__getItemCategoryLoader(productIndex, optionIndex)) === null || _g === void 0 ? void 0 : _g.data;
+                    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}`;
@@ -643,19 +708,20 @@ export class ExperimentalAddToCartBuilder extends Base {
                     output += `${newline()}</label>`;
                 }
             }
-            if (useFieldset) {
+            if (needsFieldset) {
                 level--;
                 output += `${newline()}</fieldset>`;
             }
         }
-        const encodedSubmitCaption = encode(this.t('preview.submit_caption'));
+        const submitCaptionSuffix = this.form.cart === 'checkout' ? 'checkout' : 'cart';
+        const encodedSubmitCaption = encode(this.t(`preview.submit_caption_${submitCaptionSuffix}`));
         output += `${newline()}<button type="submit">${encodedSubmitCaption}</button>`;
         level--;
         output += `${newline()}</form>`;
         return output;
     }
     __getAddToCartLinkHref() {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         const currencyCode = this.__resolvedCurrencyCode;
         const templateSet = this.__resolvedTemplateSet;
         const cartUrl = this.__resolvedCartUrl;
@@ -665,16 +731,26 @@ export class ExperimentalAddToCartBuilder extends Base {
         const url = new URL(cartUrl);
         if (templateSet.code !== 'DEFAULT')
             url.searchParams.set('template_set', templateSet.code);
-        if (this.form.empty)
-            url.searchParams.set('empty', this.form.empty);
         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);
             }
@@ -713,7 +789,7 @@ export class ExperimentalAddToCartBuilder extends Base {
                             url.searchParams.set(`${prefix}sub_enddate`, `${year}${month}${day}`);
                         }
                         else {
-                            url.searchParams.set(`${prefix}sub_enddate`, product.sub_enddate);
+                            url.searchParams.set(`${prefix}sub_enddate`, String(product.sub_enddate));
                         }
                     }
                 }
@@ -723,7 +799,7 @@ export class ExperimentalAddToCartBuilder extends Base {
             }
             if (product.expires_value) {
                 if (product.expires_format === 'timestamp') {
-                    url.searchParams.set(`${prefix}expires`, (product.expires_value / 1000).toFixed(0));
+                    url.searchParams.set(`${prefix}expires`, product.expires_value.toFixed(0));
                 }
                 else {
                     url.searchParams.set(`${prefix}expires`, product.expires_value.toFixed(0));
@@ -748,12 +824,14 @@ export class ExperimentalAddToCartBuilder extends Base {
                 url.searchParams.set(`${prefix}width`, product.width.toFixed(3));
             if (product.height)
                 url.searchParams.set(`${prefix}height`, product.height.toFixed(3));
-            product.custom_options.forEach((option, optionIndex) => {
-                var _a, _b;
-                const itemCategory = (_a = this.__getItemCategoryLoader(index, optionIndex)) === null || _a === void 0 ? void 0 : _a.data;
+            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}`, `${(_b = option.value) !== null && _b !== void 0 ? _b : ''}${modifiers}`);
-            });
+                url.searchParams.set(`${prefix}${option.name}`, `${(_h = option.value) !== null && _h !== void 0 ? _h : ''}${modifiers}`);
+            }
         }
         return url.toString();
     }
@@ -764,15 +842,21 @@ export class ExperimentalAddToCartBuilder extends Base {
             return null;
         const formHTML = this.__getAddToCartFormHTML();
         const linkHref = this.__getAddToCartLinkHref();
-        if (!formHTML || !linkHref)
+        if (!formHTML && !linkHref)
             return null;
-        const linkHTML = `<a href="${encode(linkHref)}">Add to cart</a>`;
-        const unsignedCode = `${formHTML}${this.__signingSeparator}${linkHTML}`;
+        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 signedCode = this.__previousSignedCode.split(this.__signingSeparator);
+            const [formHTML, linkHTML] = this.__previousSignedCode.split(this.__signingSeparator);
             return {
-                formHTML: signedCode[0],
-                linkHref: decode(signedCode[1].substring(9, signedCode[1].length - 17)),
+                linkHref: linkHTML ? decode(linkHTML.substring(9, linkHTML.length - 17)) : '',
+                formHTML,
             };
         }
         this.__previousUnsignedCode = unsignedCode;