@salla.sa/twilight-components 2.14.346 → 2.14.349

package/dist/collection/components/salla-color-picker/salla-color-picker.js

@@ -2,10 +2,12 @@
  * Crafted with ❤ by Salla
  */
 import { h, Host } from "@stencil/core";
-import Picker from "vanilla-picker";
 import ArrowDown from "../../assets/svg/keyboard_arrow_down.svg";
 export class SallaColorPicker {
     constructor() {
+        /** Lazy-loaded to avoid bundling vanilla-picker (Babel polyfills) into main/hydrate bundle. */
+        this.picker = null;
+        this.pickerReady = null;
         /**
          * File input name for the native formData
          */
@@ -33,14 +35,18 @@ export class SallaColorPicker {
         this.enableAlpha = false;
     }
     colorChangeHandler(color) {
-        this.colorInput.value = color.hex;
+        if (this.colorInput)
+            this.colorInput.value = color.hex;
         this.colorChanged.emit(color);
     }
-    submittedHandler(color) {
-        this.setColorValue(color.rgbaString, true);
-        this.canvas.style.backgroundColor = color.rgbString;
-        this.colorInput.value = color.hex;
-        this.colorInput.dispatchEvent(new window.Event('change', { bubbles: true }));
+    async submittedHandler(color) {
+        await this.setColorValue(color.rgbaString, true);
+        if (this.canvas)
+            this.canvas.style.backgroundColor = color.rgbString;
+        if (this.colorInput) {
+            this.colorInput.value = color.hex;
+            this.colorInput.dispatchEvent(new window.Event('change', { bubbles: true }));
+        }
         this.submitted.emit(color);
     }
     popupOpenedHandler(color) {
@@ -51,6 +57,13 @@ export class SallaColorPicker {
         this.popupClosed.emit(color);
     }
     /** Methods */
+    async ensurePicker() {
+        if (this.picker)
+            return this.picker;
+        if (this.pickerReady)
+            return await this.pickerReady;
+        throw new Error('Color picker not initialized');
+    }
     /**
      * Set the picker options.
      *
@@ -58,7 +71,8 @@ export class SallaColorPicker {
      * @param {Object} options
      */
     async setPickerOption(options) {
-        this.picker.setOptions(options);
+        const picker = await this.ensurePicker();
+        picker.setOptions(options);
     }
     /**
      * Move the popup to a different parent, optionally opening it at the same time.
@@ -70,7 +84,8 @@ export class SallaColorPicker {
      * @param {boolean} openImmediately
      */
     async movePopUp(options, openImmediately) {
-        this.picker.movePopup(options, openImmediately);
+        const picker = await this.ensurePicker();
+        picker.movePopup(options, openImmediately);
     }
     /**
      * Set/initialize the picker's color.
@@ -82,25 +97,31 @@ export class SallaColorPicker {
      * @param {boolean} triggerEvent
      */
     async setColorValue(color, triggerEvent) {
-        this.picker.setColor(color, triggerEvent);
+        const picker = await this.ensurePicker();
+        picker.setColor(color, triggerEvent);
     }
     /**
      * Show/open the picker.
      */
     async openPicker() {
-        this.picker.show();
+        const picker = await this.ensurePicker();
+        picker.show();
     }
     /**
      * Close/Hide the picker.
      */
     async closePicker() {
-        this.picker.hide();
+        const picker = await this.ensurePicker();
+        picker.hide();
     }
     /**
      * Release all resources used by this picker instance.
      */
     async destroyPicker() {
-        this.picker.destroy();
+        const picker = await this.ensurePicker();
+        picker.destroy();
+        this.picker = null;
+        this.pickerReady = null;
     }
     componentWillLoad() {
         salla.onReady(() => {
@@ -109,7 +130,10 @@ export class SallaColorPicker {
     }
     setPopInPosition() {
         const popup = this.host.querySelector('.picker_wrapper');
-        const widgetPosition = this.host.querySelector('.s-color-picker-widget').getBoundingClientRect();
+        const widgetEl = this.host.querySelector('.s-color-picker-widget');
+        if (!popup || !widgetEl)
+            return;
+        const widgetPosition = widgetEl.getBoundingClientRect();
         const widgetToWindowEq = window.innerWidth / 2 - widgetPosition.width / 2;
         const widgetInLeft = widgetToWindowEq > widgetPosition.x;
         const widgetInRight = widgetToWindowEq < widgetPosition.x;
@@ -126,35 +150,41 @@ export class SallaColorPicker {
         }
     }
     initColorPicker() {
-        this.picker = new Picker({
-            parent: this.host,
-            color: this.color,
-            popup: 'bottom',
-            // template: string,
-            // layout: string,
-            alpha: this.enableAlpha,
-            editor: this.showTextField,
-            editorFormat: this.format,
-            cancelButton: this.showCancelButton,
-            onChange: (color) => this.colorChangeHandler(color),
-            onDone: (color) => this.submittedHandler(color),
-            onOpen: (color) => this.popupOpenedHandler(color),
-            onClose: (color) => this.popupClosedHandler(color),
+        this.pickerReady = import('vanilla-picker').then((mod) => {
+            const Picker = mod.default;
+            const picker = new Picker({
+                parent: this.host,
+                color: this.color,
+                popup: 'bottom',
+                alpha: this.enableAlpha,
+                editor: this.showTextField,
+                editorFormat: this.format,
+                cancelButton: this.showCancelButton,
+                onChange: (color) => this.colorChangeHandler(color),
+                onDone: (color) => this.submittedHandler(color),
+                onOpen: (color) => this.popupOpenedHandler(color),
+                onClose: (color) => this.popupClosedHandler(color),
+            });
+            this.picker = picker;
+            return this.picker;
         });
     }
     render() {
-        return (h(Host, { key: '8ed135a77f4664ae0820fe116c115ecde8600630', class: "s-color-picker-main" }, h("slot", { key: '9c03d6effac021a15f380b58e912556c8506df77', name: "widget" }, h("div", { key: '079346b844adf30b07ce387fd0a0ea553d6f6c3a', class: "s-color-picker-widget" }, h("div", { key: 'b585d7bb86c1e66ecf624f985482594e250f5337', class: "s-color-picker-widget-canvas", ref: dv => this.canvas = dv }), h("span", { key: '9a3029a2d447d5bcd7eeb17f4772b0c70ff6e1a5', innerHTML: ArrowDown }))), h("input", { key: '9ceac07e6277a096b1a7070d3d9ba2def7aa0839', class: "s-hidden", name: this.name, required: this.required, value: this.color, ref: color => this.colorInput = color })));
+        return (h(Host, { key: 'f6a001611bf20e8264346028c848490cf94c686a', class: "s-color-picker-main" }, h("slot", { key: '79648d165d81f200e064c8ef56a138f6b66757ed', name: "widget" }, h("div", { key: '95e7a8b7a92f5bb8f6f05b8cd39e6c91710e52a2', class: "s-color-picker-widget" }, h("div", { key: '24813d1de9a5834cfd37edf7affd4be94608f96c', class: "s-color-picker-widget-canvas", ref: dv => this.canvas = dv }), h("span", { key: '5f29f537140bc4b74431fc33229563cb1b7ce231', innerHTML: ArrowDown }))), h("input", { key: '188a9d7233388fca9a25cd5d319c0973448b07bc', class: "s-hidden", name: this.name, required: this.required, value: this.color, ref: color => this.colorInput = color })));
     }
     componentDidLoad() {
-        this.canvas.style.backgroundColor = this.color;
+        if (this.canvas)
+            this.canvas.style.backgroundColor = this.color;
         this.initColorPicker();
-        this.colorInput.addEventListener('invalid', e => {
-            this.invalidInput.emit(e);
-        });
-        this.colorInput.addEventListener('input', () => {
-            this.colorInput.setCustomValidity('');
-            this.colorInput.reportValidity();
-        });
+        if (this.colorInput) {
+            this.colorInput.addEventListener('invalid', (e) => {
+                this.invalidInput.emit(e);
+            });
+            this.colorInput.addEventListener('input', () => {
+                this.colorInput.setCustomValidity('');
+                this.colorInput.reportValidity();
+            });
+        }
     }
     static get is() { return "salla-color-picker"; }
     static get originalStyleUrls() {

package/dist/collection/components/salla-count-down/salla-count-down.js

@@ -130,6 +130,16 @@ export class SallaCountDown {
             this.normalizedPreOrder?.availability_date &&
             this.renderPreOrderToBeAvailableOn(), this.renderPreOrderCountDown()));
     }
+    renderPrefixText() {
+        if (!this.prefixText)
+            return null;
+        return h("span", { class: "s-count-down-prefix-text" }, this.prefixText);
+    }
+    renderButton() {
+        if (!this.withButton || !this.buttonText)
+            return null;
+        return h("salla-button", { color: "primary", size: "medium", href: this.buttonHref }, this.buttonIcon ? h("i", { class: this.buttonIcon }) : null, h("span", null, this.buttonText));
+    }
     renderContent() {
         if (!this.date)
             return null;
@@ -142,7 +152,7 @@ export class SallaCountDown {
         return this.renderCountDown();
     }
     render() {
-        return (h(Host, { key: '96bba6312e710673e1f249cabecfc8756fac5c0e', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''}` }, this.renderContent(), this.offerEnded && this.renderOfferEnded()));
+        return (h(Host, { key: '11e7cf7cf77bbde82d990107b7ccda8f1fc9ad6f', class: `s-count-down-wrapper ${this.preOrder && this.isValidDate(this.date) ? 's-count-down-pre-order' : ''} ${this.horizontal ? 's-count-down-horizontal' : ''} ${this.withButton ? 's-count-down-with-button' : ''}` }, this.renderPrefixText(), this.renderContent(), this.offerEnded && this.renderOfferEnded(), this.renderButton()));
     }
     static get is() { return "salla-count-down"; }
     static get originalStyleUrls() {
@@ -200,6 +210,120 @@ export class SallaCountDown {
                 "setter": false,
                 "reflect": false
             },
+            "horizontal": {
+                "type": "boolean",
+                "attribute": "horizontal",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, applies compact horizontal layout"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "withButton": {
+                "type": "boolean",
+                "attribute": "with-button",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, renders a slot for an action button alongside the countdown"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "prefixText": {
+                "type": "string",
+                "attribute": "prefix-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The prefix text to show before the countdown"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "buttonHref": {
+                "type": "string",
+                "attribute": "button-href",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The button href to show with the countdown"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "buttonText": {
+                "type": "string",
+                "attribute": "button-text",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The button text to show with the countdown"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "buttonIcon": {
+                "type": "string",
+                "attribute": "button-icon",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The button icon to show with the countdown"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
             "boxed": {
                 "type": "boolean",
                 "attribute": "boxed",

package/dist/collection/components/salla-multiple-bundle-product/components/salla-multiple-bundle-product-options-modal.js

@@ -455,22 +455,21 @@ export class SallaMultipleBundleProductOptionsModal {
         const cacheKey = this.generateCacheKey(this.sectionId, this.productIndex, productId);
         const resetToken = this.optionsResetTokens[cacheKey] || 0;
         const isDisabled = this.isLoading || optionsWithSelectedState.some(opt => opt.details.some(d => d.is_selected && d.is_out === true));
-        return (h(Host, { key: '28786c060499c9bfbacf025b75f21d0e8a2d6ab1' }, h("salla-modal", { key: '6322c0542ca2769f50ed6fc616c6d5c72d456c9c', isLoading: this.isLoading, ref: el => (this.modal = el), width: "md", centered: false, id: `s-multiple-bundle-product-options-modal-options-${productId}`, class: "s-multiple-bundle-product-options-modal-wrapper" }, h("div", { key: '812707c4108b5bdefa97e1ff7537998083e2403b', slot: "loading" }, h("salla-skeleton", { key: 'e82b875495873b66414ee4a75d845823373b4914', height: "100%", width: "100%" })), this.product?.images && this.product?.images.length > 0 && (h("salla-slider", { key: 'd3849a91153ede94ea06553cb40af29e06c916ae', id: `details-slider-${this.product?.id}`, type: "thumbs", loop: false, "auto-height": true, "listen-to-thumbnails-option": true, showThumbsControls: false, controlsOuter: false, showControls: false, class: "s-multiple-bundle-product-options-modal-slider", verticalThumbs: true, thumbsConfig: {
+        return (h(Host, { key: '28786c060499c9bfbacf025b75f21d0e8a2d6ab1' }, h("salla-modal", { key: '6322c0542ca2769f50ed6fc616c6d5c72d456c9c', isLoading: this.isLoading, ref: el => (this.modal = el), width: "md", centered: false, id: `s-multiple-bundle-product-options-modal-options-${productId}`, class: "s-multiple-bundle-product-options-modal-wrapper" }, h("div", { key: '812707c4108b5bdefa97e1ff7537998083e2403b', slot: "loading" }, h("salla-skeleton", { key: 'e82b875495873b66414ee4a75d845823373b4914', height: "100%", width: "100%" })), this.product?.images && this.product?.images.length > 0 && (h("salla-slider", { key: 'f1f3545637b182257f9107972a819ae9819de137', id: `details-slider-${this.product?.id}`, type: "thumbs", loop: false, "auto-height": true, "listen-to-thumbnails-option": true, showThumbsControls: false, controlsOuter: false, showControls: false, class: "s-multiple-bundle-product-options-modal-slider", verticalThumbs: true, thumbsConfig: {
                 centeredSlides: true,
                 centeredSlidesBounds: true,
                 slidesPerView: Math.min(5, Math.max(1, this.product?.images.length)),
                 watchOverflow: true,
-                watchSlidesVisibility: true,
                 watchSlidesProgress: true,
                 direction: 'vertical',
                 spaceBetween: 10,
-            } }, h("div", { key: 'd585f7a29cb9265c39c471876d3a0cb7d2460359', slot: "items" }, this.product?.images &&
+            } }, h("div", { key: '97b50195903a01376e057bc99ddb353fd3dfdb2b', slot: "items" }, this.product?.images &&
             this.product?.images.map((image, index) => (h("div", { key: index, class: "swiper-slide" }, h("img", { src: image.url, alt: image.alt || `${this.product?.name} - Image ${index + 1}`, loading: "lazy", onError: e => {
                     e.target.style.display = 'none';
-                } }))))), this.product?.images && this.product?.images.length > 1 && (h("div", { key: '1a6edb417a6715617303634b7d756eef0075a01a', slot: "thumbs" }, this.product?.images &&
+                } }))))), this.product?.images && this.product?.images.length > 1 && (h("div", { key: 'ff943c9c8f175ff1c0374a13153b33889c468dda', slot: "thumbs" }, this.product?.images &&
             this.product?.images.map((image, index) => (h("div", { key: index, "data-caption": `${this.product?.name} - Image ${index + 1}` }, h("img", { src: image.url, loading: "eager", class: "s-multiple-bundle-product-options-modal-slider-thumb", title: `${this.product?.name} - ${index + 1}`, alt: image.alt || `${this.product?.name} - ${index + 1}`, onError: e => {
                     e.target.style.display = 'none';
-                } })))))))), h("salla-product-options", { options: JSON.stringify(optionsWithSelectedState), key: `${cacheKey}-reset-${resetToken}`, "product-id": productId, "unique-key": `${cacheKey}-reset-${resetToken}` }), h("div", { key: '22528e7438a30feffe5987ed86974a4eecea76a1', slot: "footer" }, h("div", { key: '7a891b1cd51d2f15e08523c2a4096ea4c50eb51b', class: "s-multiple-bundle-product-options-modal-footer" }, h("salla-button", { key: '4ed19c8cfdd3f37166a61fdbd452a8f205763469', onClick: e => this.onSave(e), loading: this.isLoading, disabled: isDisabled }, this.isLoading
+                } })))))))), h("salla-product-options", { options: JSON.stringify(optionsWithSelectedState), key: `${cacheKey}-reset-${resetToken}`, "product-id": productId, "unique-key": `${cacheKey}-reset-${resetToken}` }), h("div", { key: '7555836d26018f6405bc54a1cd735b4030d4bdf1', slot: "footer" }, h("div", { key: 'a7ee5f19a4c11a1c61e4dc026fa8673e0ab74c3f', class: "s-multiple-bundle-product-options-modal-footer" }, h("salla-button", { key: '1da19964053766f3a1339ea0e77ab7aaa4d8a003', onClick: e => this.onSave(e), loading: this.isLoading, disabled: isDisabled }, this.isLoading
             ? salla.lang.get('common.elements.saving')
             : salla.lang.get('common.elements.save')))))));
     }

package/dist/collection/components/salla-multiple-bundle-product/components/salla-multiple-bundle-product-slider.js

@@ -97,7 +97,7 @@ export class SallaMultipleBundleProductSlider {
                 : KeyBoardArrowRightIcon;
             return (h("div", { class: `s-multiple-bundle-product-slide-one-third ${product.quantity == 0
                     ? 's-multiple-bundle-product-slide-one-third-disabled'
-                    : ''}`, key: product.id }, h("div", { class: "s-multiple-bundle-product-card" }, h("div", { class: "s-multiple-bundle-product-image-wrapper", onClick: () => this.handleProductClick(product, productIndex) }, h("input", { id: this.generateEventName(this.section.id, productIndex), type: "checkbox", class: "s-multiple-bundle-product-checkbox", checked: isChecked, name: this.generateEventName(this.section.id, productIndex), value: product.id }), h("img", { src: product.image.url || salla.url.cdn('images/s-empty.png'), loading: "lazy", alt: product.image.alt || product.name, class: "s-multiple-bundle-product-image" })), h("div", { class: "s-multiple-bundle-product-content-wrapper" }, h("div", { class: "s-multiple-bundle-product-content" }, h("div", { class: "s-multiple-bundle-product-details" }, h("div", { class: "s-multiple-bundle-product-title-wrapper" }, h("h2", { class: "s-multiple-bundle-product-title" }, h("a", { href: product?.url || '#', target: "_blank", rel: "noopener noreferrer" }, product.name))), h("div", { class: "s-multiple-bundle-product-price-wrapper" }, h("span", { class: "s-multiple-bundle-product-price" }, h("span", { innerHTML: salla.money(product.price) })), product.sale_price > 0 && (h("span", { class: "s-multiple-bundle-product-price-discount" }, h("span", { innerHTML: salla.money(product.sale_price) }))))), product.quantity_in_group > 0 && product.quantity !== 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.pieces'), h("span", null, product.quantity_in_group))), product.quantity === 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.quantity_in_group_finished')))), product.options?.length > 0 && (h("button", { class: "s-multiple-bundle-product-button", onClick: () => this.handleOptionsClick(product), type: "button" }, optionsButtonLabel, h("span", { class: "s-multiple-bundle-product-button-icon", innerHTML: optionsArrowIcon })))))));
+                    : ''}`, key: product.id }, h("div", { class: "s-multiple-bundle-product-card" }, h("div", { class: "s-multiple-bundle-product-image-wrapper", onClick: () => this.handleProductClick(product, productIndex) }, h("input", { id: this.generateEventName(this.section.id, productIndex), type: "checkbox", class: "s-multiple-bundle-product-checkbox", checked: isChecked, name: this.generateEventName(this.section.id, productIndex), value: product.id }), h("img", { src: product.image.url || salla.url.cdn('images/s-empty.png'), loading: "lazy", alt: product.image.alt || product.name, class: "s-multiple-bundle-product-image" })), h("div", { class: "s-multiple-bundle-product-content-wrapper" }, h("div", { class: "s-multiple-bundle-product-content" }, h("div", { class: "s-multiple-bundle-product-details" }, h("div", { class: "s-multiple-bundle-product-title-wrapper" }, h("h2", { class: "s-multiple-bundle-product-title" }, h("a", { href: product?.url || '#', target: "_blank", rel: "noopener noreferrer" }, product.name))), h("div", { class: "s-multiple-bundle-product-price-wrapper" }, h("span", { class: "s-multiple-bundle-product-price" }, h("span", { innerHTML: salla.money(product.price) })), product.sale_price > 0 && (h("span", { class: "s-multiple-bundle-product-price-discount" }, h("span", { innerHTML: salla.money(product.regular_price) }))))), product.quantity_in_group > 0 && product.quantity !== 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.pieces'), h("span", null, product.quantity_in_group))), product.quantity === 0 && (h("span", { class: "s-multiple-bundle-product-badge" }, salla.lang.get('pages.products.quantity_in_group_finished')))), product.options?.length > 0 && (h("button", { class: "s-multiple-bundle-product-button", onClick: () => this.handleOptionsClick(product), type: "button" }, optionsButtonLabel, h("span", { class: "s-multiple-bundle-product-button-icon", innerHTML: optionsArrowIcon })))))));
         })))));
     }
     static get is() { return "salla-multiple-bundle-product-slider"; }

package/dist/collection/components/salla-order-details/salla-order-details-multiple-bundle-product.js

@@ -40,16 +40,6 @@ export class SallaproductDetailsMultipleBundleProduct {
         }
         return this.productDetails?.options?.length > 0;
     }
-    renderProductPrice() {
-        if (!this.productDetails) {
-            return null;
-        }
-        const { is_on_sale, sale_price, regular_price, price } = this.productDetails;
-        if (is_on_sale && sale_price) {
-            return (h("div", null, h("span", { class: "s-order-details-product-price s-order-details-product-price-sale" }, h("span", { innerHTML: salla.money(sale_price) })), regular_price && (h("span", { class: "s-order-details-product-regular-price" }, h("span", { innerHTML: salla.money(regular_price) })))));
-        }
-        return (h("span", { class: "s-order-details-product-price" }, h("span", { innerHTML: salla.money(price) })));
-    }
     renderOptions() {
         if (!this.productDetails?.options?.length) {
             return null;

package/dist/collection/components/salla-products-slider/salla-products-slider.js

@@ -63,6 +63,9 @@ export class SallaProductsSlider {
             }
         }, 1000);
     }
+    async componentDidLoad() {
+        await Salla.hooks.registerComponent('salla-products-slider', this);
+    }
     isSourceWithoutValue() {
         return ['offers', 'latest', 'sales', 'top-rated'].includes(this.getSource());
     }

package/dist/collection/components/salla-quick-buy/salla-quick-buy.js

@@ -25,7 +25,8 @@ export class SallaQuickBuy {
         });
     }
     async quickBuyHandler() {
-        if (salla.config.isGuest()) {
+        // user guest and guest-checkout not enabled
+        if (salla.config.isGuest() && !this.isGuestCheckout()) {
             this.requireLogin.emit({ productId: this.productId });
             // todo (low) :: find a way to re-fire the method after success
             let afterLoginEvent = "salla-quick-buy::user.logged-in";
@@ -63,7 +64,7 @@ export class SallaQuickBuy {
         salla.event.dispatch('payments::apple-pay.start-transaction', {
             amount: this.amount, // 1000
             currency: this.currency || 'SAR', // SAR
-            requiredShippingContactFields: this.isRequireShipping ? ['postalAddress'] : undefined,
+            requiredShippingContactFields: this.getRequiredShippingContactFields(),
             shippingMethods: this.isRequireShipping ? [] : undefined,
             supportedNetworks: salla.config.get('store.settings.buy_now.networks'),
             supportedCountries: salla.config.get('store.settings.buy_now.countries'),
@@ -114,7 +115,10 @@ export class SallaQuickBuy {
             shippingContactSelected: this.isRequireShipping ? {
                 url: salla.url.get('checkout/{id}/address/add'),
             } : undefined,
-            oncouponcodechanged: {
+            guestContactSelected: this.isGuestCheckout() ? {
+                url: salla.url.get('checkout/{id}/customer'),
+            } : undefined,
+            onCouponCodeChanged: {
                 url: salla.url.get('checkout/{id}/coupons')
             },
             recalculateTotal: {
@@ -126,70 +130,79 @@ export class SallaQuickBuy {
             }
         });
     }
+    isGuestCheckout() {
+        return salla.config.isGuest() && salla.config.get('store.features').includes('guest-checkout');
+    }
+    getRequiredShippingContactFields() {
+        let fields = [];
+        if (this.isRequireShipping) {
+            fields.push('postalAddress');
+        }
+        if (this.isGuestCheckout()) {
+            fields.push('email', 'phone', 'name');
+        }
+        return fields;
+    }
     componentWillLoad() {
         console.log('🍏 Pay: Quick Buy Component Loaded');
-        return new Promise((resolve, reject) => {
-            salla.onReady(async () => {
-                if (!this.currency) {
-                    this.currency = salla.config.get('store.settings.buy_now.multi_currency') ? salla.config.get('user.currency_code') : 'SAR';
-                }
-                if (!this.productId && salla.config.get('page.id')) {
-                    this.productId = salla.config.get('page.id');
-                }
-                if (!this.applePayOnly && !this.productId) {
-                    salla.logger.warn('🍏 Pay: Failed load the quick buy, the product id is missing');
-                    return reject();
-                }
-                /**
-                 * We should check the product if it's required shipping
-                 * in order for apple pay sdk to show the required Shipping Contact Fields
-                 * components..
-                 */
-                if ((!this.amount || !this.isRequireShipping) && this.productId) {
-                    await salla.product.getDetails(this.productId, []).then((response) => {
-                        this.amount = response.data.price;
-                        this.isRequireShipping = response?.data?.is_require_shipping || false;
-                    }).catch((error) => {
-                        salla.logger.warn('🍏 Pay: Failed load the quick buy, get the product details failed: ', error);
-                        return reject();
-                    });
-                }
-                if (this.type == 'donate') {
-                    salla.event.on('product-options::donation-changed', (data) => {
-                        if (String(data.id) !== String(this.productId)) {
-                            return;
-                        }
-                        this.amount = data.price;
-                    });
-                }
-                else if (salla.url.is_page('product.single')) {
-                    salla.product.event?.onPriceUpdated(response => {
-                        this.amount = response.data.price;
-                    });
-                }
-                this.isApplePayActive = salla.helpers.hasApplePay()
-                    && salla.config.get('store.settings.payments')?.includes('apple_pay')
-                    && salla.config.get('store.settings.is_salla_gateway', false);
-                let applePaySdk = document.getElementById('apple-pay-sdk');
-                if (applePaySdk || !this.isApplePayActive) {
-                    salla.logger.warn('🍏 Pay: Skipped load apple pay because ' + (applePaySdk ? 'already loaded' : 'is not available in the browser'));
-                    resolve(true);
-                    return;
-                }
+        const canMakePayments = typeof window !== 'undefined' && !!window.ApplePaySession?.canMakePayments?.();
+        const storeHasApplePay = salla?.config?.get?.('store.settings.payments')?.includes?.('apple_pay') ?? true;
+        const isSallaGateway = salla?.config?.get?.('store.settings.is_salla_gateway', false) ?? true;
+        this.isApplePayActive = canMakePayments && storeHasApplePay && isSallaGateway;
+        const runInit = async () => {
+            if (!this.currency && salla?.config?.get) {
+                this.currency = salla.config.get('store.settings.buy_now.multi_currency') ? salla.config.get('user.currency_code') : 'SAR';
+            }
+            if (!this.productId && salla?.config?.get && salla.url?.is_page) {
+                this.productId = salla.config.get('page.id');
+            }
+            if (!this.applePayOnly && !this.productId) {
+                salla?.logger?.warn?.('🍏 Pay: Failed load the quick buy, the product id is missing');
+                return;
+            }
+            if ((!this.amount || !this.isRequireShipping) && this.productId && salla?.product?.getDetails) {
+                await salla.product.getDetails(this.productId, []).then((response) => {
+                    this.amount = response.data.price;
+                    this.isRequireShipping = response?.data?.is_require_shipping || false;
+                }).catch((error) => {
+                    salla?.logger?.warn?.('🍏 Pay: Failed load the quick buy, get the product details failed: ', error);
+                });
+            }
+            if (this.type === 'donate' && salla?.event?.on) {
+                salla.event.on('product-options::donation-changed', (data) => {
+                    if (String(data.id) !== String(this.productId))
+                        return;
+                    this.amount = data.price;
+                });
+            }
+            else if (salla?.url?.is_page?.('product.single') && salla?.product?.event?.onPriceUpdated) {
+                salla.product.event.onPriceUpdated(response => { this.amount = response.data.price; });
+            }
+            this.isApplePayActive = (salla?.helpers?.hasApplePay?.() ?? canMakePayments)
+                && (salla?.config?.get?.('store.settings.payments')?.includes?.('apple_pay') ?? storeHasApplePay)
+                && (salla?.config?.get?.('store.settings.is_salla_gateway', false) ?? isSallaGateway);
+            if (!document.getElementById('apple-pay-sdk') && this.isApplePayActive) {
                 const script = document.createElement('script');
                 script.src = 'https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js';
                 script.setAttribute('id', 'apple-pay-sdk');
                 script.async = true;
                 document.body.appendChild(script);
-                resolve(true);
-            });
+            }
+        };
+        return new Promise((resolve) => {
+            if (typeof salla?.onReady === 'function') {
+                salla.onReady(() => runInit().then(() => resolve(true)));
+            }
+            else {
+                runInit().then(() => resolve(true));
+            }
         });
     }
     render() {
-        return h(Host, { key: '326f9d1a5336de18e77a71cef8d4e0118acb8055' }, this.quickBuyButton());
+        return h(Host, { key: '9a36fa6b7163dae6feed474712e3d0c3003d012c' }, this.quickBuyButton());
     }
     quickBuyButton() {
-        return h("apple-pay-button", { locale: salla.config.get('user.language_code'), onClick: () => this.quickBuyHandler(), "data-quick-purchase": "applepay", class: "s-quick-buy-apple-pay", "data-is-applepay": "1", buttonstyle: "black", type: this.type });
+        return h("apple-pay-button", { locale: salla?.config?.get?.('user.language_code') || 'ar', onClick: () => this.quickBuyHandler(), "data-quick-purchase": "applepay", class: "s-quick-buy-apple-pay", "data-is-applepay": "1", buttonstyle: "black", type: this.type });
     }
     static get is() { return "salla-quick-buy"; }
     static get originalStyleUrls() {