@foxy.io/elements 1.42.0 → 1.43.0-beta.2

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

@@ -14,6 +14,16 @@ 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);
+// TODO use proper encoding when encoding API supports HTML entities
+const weakEncode = (value, checkHmacCompatibility) => {
+    if (checkHmacCompatibility) {
+        if (decode(value) !== value)
+            throw new Error('error_html_entities_present');
+        if (value.includes('"'))
+            throw new Error('error_double_quotes_present');
+    }
+    return value.replace(/"/g, '"');
+};
 /**
  * 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.
@@ -98,7 +108,7 @@ export class ExperimentalAddToCartBuilder extends Base {
         return new BooleanSelector(alwaysMatch.join(' ').trim());
     }
     renderBody() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
         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;
@@ -299,13 +309,17 @@ export class ExperimentalAddToCartBuilder extends Base {
                     <foxy-spinner
                       layout="no-label"
                       infer="unavailable"
-                      state=${(addToCartCode === null || addToCartCode === void 0 ? void 0 : addToCartCode.error) ? 'paused' : 'busy'}
+                      state=${(_f = addToCartCode === null || addToCartCode === void 0 ? void 0 : addToCartCode.error.split('_')[0]) !== null && _f !== void 0 ? _f : 'busy'}
                     >
                     </foxy-spinner>
                     <foxy-i18n
-                      class="text-tertiary text-s"
+                      class=${classMap({
+                'text-tertiary': !(addToCartCode === null || addToCartCode === void 0 ? void 0 : addToCartCode.error.startsWith('error_')),
+                'text-error': !!(addToCartCode === null || addToCartCode === void 0 ? void 0 : addToCartCode.error.startsWith('error_')),
+                'text-s': true,
+            })}
                       infer="unavailable"
-                      key="${(_f = addToCartCode === null || addToCartCode === void 0 ? void 0 : addToCartCode.error) !== null && _f !== void 0 ? _f : 'loading_busy'}"
+                      key="${(_g = addToCartCode === null || addToCartCode === void 0 ? void 0 : addToCartCode.error) !== null && _g !== void 0 ? _g : 'loading_busy'}"
                     >
                     </foxy-i18n>
                   </div>
@@ -316,7 +330,7 @@ export class ExperimentalAddToCartBuilder extends Base {
           <foxy-internal-summary-control infer="cart-settings">
             <foxy-internal-resource-picker-control
               layout="summary-item"
-              first=${ifDefined((_h = (_g = this.__storeLoader) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h._links['fx:template_sets'].href)}
+              first=${ifDefined((_j = (_h = this.__storeLoader) === null || _h === void 0 ? void 0 : _h.data) === null || _j === void 0 ? void 0 : _j._links['fx:template_sets'].href)}
               infer="template-set-uri"
               item="foxy-template-set-card"
             >
@@ -370,7 +384,7 @@ export class ExperimentalAddToCartBuilder extends Base {
       <foxy-nucleon
         class="hidden"
         infer=""
-        href=${ifDefined((_j = this.localeCodes) !== null && _j !== void 0 ? _j : void 0)}
+        href=${ifDefined((_k = this.localeCodes) !== null && _k !== void 0 ? _k : void 0)}
         id="localeCodesHelperLoader"
         @update=${() => this.requestUpdate()}
       >
@@ -379,7 +393,7 @@ export class ExperimentalAddToCartBuilder extends Base {
       <foxy-nucleon
         class="hidden"
         infer=""
-        href=${ifDefined((_k = this.form.template_set_uri) !== null && _k !== void 0 ? _k : void 0)}
+        href=${ifDefined((_l = this.form.template_set_uri) !== null && _l !== void 0 ? _l : void 0)}
         id="templateSetLoader"
         @update=${() => this.requestUpdate()}
       >
@@ -388,13 +402,13 @@ export class ExperimentalAddToCartBuilder extends Base {
       <foxy-nucleon
         class="hidden"
         infer=""
-        href=${ifDefined((_o = (_m = (_l = this.data) === null || _l === void 0 ? void 0 : _l._links['fx:store'].href) !== null && _m !== void 0 ? _m : this.store) !== null && _o !== void 0 ? _o : void 0)}
+        href=${ifDefined((_p = (_o = (_m = this.data) === null || _m === void 0 ? void 0 : _m._links['fx:store'].href) !== null && _o !== void 0 ? _o : this.store) !== null && _p !== void 0 ? _p : void 0)}
         id="storeLoaderId"
         @update=${() => this.requestUpdate()}
       >
       </foxy-nucleon>
 
-      ${(_p = this.form.items) === null || _p === void 0 ? void 0 : _p.map((product, index) => {
+      ${(_q = this.form.items) === null || _q === void 0 ? void 0 : _q.map((product, index) => {
             var _a;
             return html `
           <foxy-nucleon
@@ -505,13 +519,14 @@ export class ExperimentalAddToCartBuilder extends Base {
         const store = (_a = this.__storeLoader) === null || _a === void 0 ? void 0 : _a.data;
         if (!this.defaultDomain || !templateSet || !store || !currencyCode || !cartUrl)
             return '';
+        const isHmacOn = store.use_cart_validation;
         let hasAtLeastOneFieldset = false;
-        let output = `<form action="${encode(cartUrl)}" method="post" target="_blank">`;
+        let output = `<form action="${weakEncode(cartUrl, isHmacOn)}" 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);
+            const encodedValue = weakEncode(value, isHmacOn);
+            const encodedName = weakEncode(name, isHmacOn);
             output += `${newline()}<input type="hidden" name="${encodedName}" value="${encodedValue}">`;
         };
         if (templateSet.code !== 'DEFAULT')
@@ -551,7 +566,7 @@ export class ExperimentalAddToCartBuilder extends Base {
             addHiddenInput(`${prefix}name`, resolvedName);
             const price = `${product.price}${currencyCode}`;
             if (product.price_configurable) {
-                const encodedNoCurrencyPrice = encode(product.price.toFixed(2));
+                const encodedNoCurrencyPrice = weakEncode(product.price.toFixed(2), isHmacOn);
                 output += `${newline()}<label>`;
                 level++;
                 output += `${newline()}<span>${encode(this.t('preview.price_label'))}</span>`;
@@ -574,7 +589,7 @@ export class ExperimentalAddToCartBuilder extends Base {
                 addHiddenInput(`${prefix}code`, product.code);
             }
             else if (store.use_cart_validation) {
-                return { error: 'code_required' };
+                return { error: 'paused_code_required' };
             }
             if (product.parent_code)
                 addHiddenInput(`${prefix}parent_code`, product.parent_code);
@@ -627,15 +642,17 @@ export class ExperimentalAddToCartBuilder extends Base {
                 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))}"`;
+                const encodedName = weakEncode(`${prefix}quantity`, isHmacOn);
+                output += `${newline()}<input type="number" name="${encodedName}"`;
+                output += ` min="${weakEncode(String(resolvedMinQty), isHmacOn)}"`;
                 if (resolvedMaxQty !== Infinity)
-                    output += ` max="${encode(String(resolvedMaxQty))}"`;
+                    output += ` max="${weakEncode(String(resolvedMaxQty), isHmacOn)}"`;
                 if (store.use_cart_validation) {
-                    output += ` value="--OPEN--" data-replace="${encode(String((_e = product.quantity) !== null && _e !== void 0 ? _e : 1))}">`;
+                    const encodedQuantity = weakEncode(String((_e = product.quantity) !== null && _e !== void 0 ? _e : 1), isHmacOn);
+                    output += ` value="--OPEN--" data-replace="${encodedQuantity}">`;
                 }
                 else {
-                    output += ` value="${encode(String((_f = product.quantity) !== null && _f !== void 0 ? _f : 1))}">`;
+                    output += ` value="${weakEncode(String((_f = product.quantity) !== null && _f !== void 0 ? _f : 1), isHmacOn)}">`;
                 }
                 level--;
                 output += `${newline()}</label>`;
@@ -690,12 +707,12 @@ export class ExperimentalAddToCartBuilder extends Base {
                         output += `${newline()}<label>`;
                         level++;
                         output += `${newline()}<span>${encode(optionName)}:</span>`;
-                        output += `${newline()}<input name="${encode(name)}" `;
+                        output += `${newline()}<input name="${weakEncode(name, isHmacOn)}" `;
                         if (store.use_cart_validation) {
-                            output += `value="--OPEN--" data-replace="${encode(value)}">`;
+                            output += `value="--OPEN--" data-replace="${weakEncode(value, isHmacOn)}">`;
                         }
                         else {
-                            output += `value="${encode(value)}">`;
+                            output += `value="${weakEncode(value, isHmacOn)}">`;
                         }
                         level--;
                         output += `${newline()}</label>`;
@@ -711,12 +728,12 @@ export class ExperimentalAddToCartBuilder extends Base {
                     output += `${newline()}<select name="${prefix}${optionName}">`;
                     level++;
                     group.forEach(option => {
-                        var _a;
+                        var _a, _b;
                         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);
+                        const encodedValue = weakEncode(`${option.value}${modifiers}`, isHmacOn);
+                        const encodedCaption = encode((_b = option.value) !== null && _b !== void 0 ? _b : '');
                         output += `${newline()}<option value="${encodedValue}">${encodedCaption}</option>`;
                     });
                     level--;
@@ -777,7 +794,7 @@ export class ExperimentalAddToCartBuilder extends Base {
                 url.searchParams.set(`${prefix}code`, product.code);
             }
             else if (store.use_cart_validation) {
-                return { error: 'code_required' };
+                return { error: 'paused_code_required' };
             }
             if (product.parent_code)
                 url.searchParams.set(`${prefix}parent_code`, product.parent_code);
@@ -858,37 +875,43 @@ export class ExperimentalAddToCartBuilder extends Base {
     }
     __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;
-        if (typeof formHTML === 'object')
-            return { error: formHTML.error };
-        if (typeof linkHref === 'object')
-            return { error: linkHref.error };
-        let unsignedCode;
-        if (linkHref) {
-            const linkHTML = `<a href="${encode(linkHref)}">Add to cart</a>`;
-            unsignedCode = `${formHTML}${this.__signingSeparator}${linkHTML}`;
-        }
-        else {
-            unsignedCode = formHTML;
+        try {
+            const store = (_a = this.__storeLoader) === null || _a === void 0 ? void 0 : _a.data;
+            if (!this.encodeHelper || !store)
+                return null;
+            const checkEquality = store.use_cart_validation;
+            const formHTML = this.__getAddToCartFormHTML();
+            const linkHref = this.__getAddToCartLinkHref();
+            if (!formHTML && !linkHref)
+                return null;
+            if (typeof formHTML === 'object')
+                return { error: formHTML.error };
+            if (typeof linkHref === 'object')
+                return { error: linkHref.error };
+            let unsignedCode;
+            if (linkHref) {
+                const linkHTML = `<a href="${weakEncode(linkHref, checkEquality)}">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 };
         }
-        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,
-            };
+        catch (err) {
+            return { error: err.message };
         }
-        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)