@salla.sa/twilight-components 2.14.592 → 2.14.594

package/dist/components/salla-add-product-button2.js

@@ -5,6 +5,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { P as PendingOrdersIcon } from './cart.js';
 import { H as Helper } from './Helper.js';
 import { i as injectFreeProductsIntoPayload, d as defineCustomElement$3, c as canCompleteApplePay, a as isApplePayHostedRedirect } from './salla-quick-buy2.js';
+import { e as ensureOrderOptionsModal, a as appendOrderOptionsToPayload } from './apple-pay-order-options.js';
 import { d as defineCustomElement$h } from './salla-attachment-view2.js';
 import { d as defineCustomElement$g } from './salla-booking-field2.js';
 import { d as defineCustomElement$f } from './salla-button2.js';
@@ -257,7 +258,7 @@ class FastCheckoutGate {
     }
 }
 
-const sallaAddProductButtonCss = "/*!twlt*/:host{display:block}salla-add-product-button[width=wide]{width:100%}.sticky{position:sticky}.hidden{display:none}.w-full{width:100%}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.s-hidden{display:none}.btn{display:inline-flex;flex:1 1 0%;align-items:center;justify-content:center;white-space:nowrap;border-radius:0.375rem;padding-left:1.5rem;padding-right:1.5rem;padding-bottom:0.625rem;padding-top:0.5rem;font-size:0.875rem;line-height:1.25rem;font-weight:700;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.btn:hover{opacity:0.8}.s-hidden{display:none}.s-add-product-button-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.s-add-product-button-with-quick-buy{display:flex}@media (min-width: 640px){.s-add-product-button-with-quick-buy{flex-direction:column}}.s-add-product-button-with-quick-buy:not(.s-add-product-button-with-sticky-bar){flex-direction:column !important}.s-add-product-button-main{display:flex;width:66.666667%;column-gap:0.375rem}@media (min-width: 640px){.s-add-product-button-main{width:100%;column-gap:0.625rem}}.s-add-product-button-with-sticky-bar salla-quick-buy{width:33.333333%}@media (min-width: 640px){.s-add-product-button-with-sticky-bar salla-quick-buy{width:100%}}.s-add-product-button-with-quick-buy:not(.s-add-product-button-with-sticky-bar) .s-add-product-button-main{width:100%}.s-add-product-button-with-quick-buy:not(.s-add-product-button-with-apple-pay) .s-add-product-button-main{width:100%}.s-add-product-button-main:not(.w-full)>salla-button{width:50% !important}.s-add-product-button-main .s-add-product-button-mini-checkout{--salla-fast-checkout-button-border-radius:.75rem;width:50%}.s-add-product-button-with-sticky-bar{width:100% !important}@media (min-width: 640px){.s-add-product-button-with-sticky-bar{width:auto}}.s-add-product-button-with-apple-pay{column-gap:0.375rem}@media (min-width: 640px){.s-add-product-button-with-apple-pay{column-gap:unset}}.s-add-product-button-with-apple-pay:not(.s-add-product-button-with-sticky-bar) salla-quick-buy apple-pay-button{margin-top:0.625rem}.s-add-product-button-with-sticky-bar salla-quick-buy .s-quick-buy-button .s-button-text span{display:none}@media (min-width: 768px){.s-add-product-button-with-sticky-bar salla-quick-buy .s-quick-buy-button .s-button-text span{display:block}}.s-add-product-button-mini-checkout-content{display:flex;flex-shrink:0;align-items:center;white-space:nowrap;font-size:.8rem}@media (min-width: 640px){.s-add-product-button-mini-checkout-content{font-size:0.875rem;line-height:1.25rem}}.s-add-product-button-mini-checkout-content:where([dir=\"rtl\"],[dir=\"rtl\"] *){flex-direction:row-reverse}.s-add-product-button-mini-checkout-content svg{margin-right:0.375rem;height:1rem;width:1rem;fill:currentColor}.s-add-product-button-mini-checkout-content svg:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-right:0px;margin-left:0.375rem}.s-add-product-button-busy{pointer-events:none;position:relative}.s-add-product-button-busy::after{position:absolute;top:50%;left:50%;z-index:10;height:1rem;width:1rem;--tw-translate-x:-50%;content:var(--tw-content);--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{content:var(--tw-content);transform:rotate(360deg)}}.s-add-product-button-busy::after{animation:spin 1s linear infinite;border-radius:9999px;border-width:2px;border-style:solid;border-top-color:var(--color-primary);border-left-color:var(--color-primary);border-bottom-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-border-opacity:1;border-right-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-content:'';content:var(--tw-content)}";
+const sallaAddProductButtonCss = "/*!twlt*/:host{display:block}salla-add-product-button[width=wide]{width:100%}.s-add-product-button-buy-now{display:block;font-family:'PingARLT';font-weight:normal}.s-add-product-button-buy-now .s-fast-checkout-button{display:flex;align-items:center;justify-content:center;height:var(--salla-fast-checkout-button-height, 2.5rem);width:var(--salla-fast-checkout-button-width, 100%);border-radius:var(--salla-fast-checkout-button-border-radius, 0.375rem);font-size:0.875rem;font-weight:bold;text-transform:uppercase;cursor:pointer;transition:all 0.3s ease-in-out;border:none;font-family:'PingARLT';gap:5px;direction:ltr;border-width:1px;border-color:var(--color-primary);background-color:var(--color-primary);color:var(--color-primary-reverse);padding:1px 6px;line-height:normal;letter-spacing:normal;outline:none}.s-add-product-button-buy-now .s-fast-checkout-button:focus-visible{outline:auto}.s-add-product-button-buy-now .s-fast-checkout-button:hover{background-color:var(--color-primary)}.s-add-product-button-buy-now .s-fast-checkout-button.outline{background-color:transparent;border:1px solid var(--color-primary);color:var(--color-primary)}.s-add-product-button-buy-now .s-fast-checkout-button.rtl{flex-direction:row-reverse}.s-add-product-button-buy-now .s-fast-checkout-button:disabled{cursor:progress;opacity:0.7}.sticky{position:sticky}.hidden{display:none}.w-full{width:100%}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.s-hidden{display:none}.btn{display:inline-flex;flex:1 1 0%;align-items:center;justify-content:center;white-space:nowrap;border-radius:0.375rem;padding-left:1.5rem;padding-right:1.5rem;padding-bottom:0.625rem;padding-top:0.5rem;font-size:0.875rem;line-height:1.25rem;font-weight:700;transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms}.btn:hover{opacity:0.8}.s-hidden{display:none}.s-add-product-button-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}.s-add-product-button-with-quick-buy{display:flex}@media (min-width: 640px){.s-add-product-button-with-quick-buy{flex-direction:column}}.s-add-product-button-with-quick-buy:not(.s-add-product-button-with-sticky-bar){flex-direction:column !important}.s-add-product-button-main{display:flex;width:66.666667%;column-gap:0.375rem}@media (min-width: 640px){.s-add-product-button-main{width:100%;column-gap:0.625rem}}.s-add-product-button-with-sticky-bar salla-quick-buy{width:33.333333%}@media (min-width: 640px){.s-add-product-button-with-sticky-bar salla-quick-buy{width:100%}}.s-add-product-button-with-quick-buy:not(.s-add-product-button-with-sticky-bar) .s-add-product-button-main{width:100%}.s-add-product-button-with-quick-buy:not(.s-add-product-button-with-apple-pay) .s-add-product-button-main{width:100%}.s-add-product-button-main:not(.w-full)>salla-button{width:50% !important}.s-add-product-button-main .s-add-product-button-mini-checkout{--salla-fast-checkout-button-border-radius:.75rem;width:50%}.s-add-product-button-with-sticky-bar{width:100% !important}@media (min-width: 640px){.s-add-product-button-with-sticky-bar{width:auto}}.s-add-product-button-with-apple-pay{column-gap:0.375rem}@media (min-width: 640px){.s-add-product-button-with-apple-pay{column-gap:unset}}.s-add-product-button-with-apple-pay:not(.s-add-product-button-with-sticky-bar) salla-quick-buy apple-pay-button{margin-top:0.625rem}.s-add-product-button-with-sticky-bar salla-quick-buy .s-quick-buy-button .s-button-text span{display:none}@media (min-width: 768px){.s-add-product-button-with-sticky-bar salla-quick-buy .s-quick-buy-button .s-button-text span{display:block}}.s-add-product-button-mini-checkout-content{display:flex;flex-shrink:0;align-items:center;white-space:nowrap;font-size:.8rem}@media (min-width: 640px){.s-add-product-button-mini-checkout-content{font-size:0.875rem;line-height:1.25rem}}.s-add-product-button-mini-checkout-content:where([dir=\"rtl\"],[dir=\"rtl\"] *){flex-direction:row-reverse}.s-add-product-button-mini-checkout-content svg{margin-right:0.375rem;height:1rem;width:1rem;fill:currentColor}.s-add-product-button-mini-checkout-content svg:where([dir=\"rtl\"],[dir=\"rtl\"] *){margin-right:0px;margin-left:0.375rem}.s-add-product-button-busy{pointer-events:none;position:relative}.s-add-product-button-busy::after{position:absolute;top:50%;left:50%;z-index:10;height:1rem;width:1rem;--tw-translate-x:-50%;content:var(--tw-content);--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes spin{to{content:var(--tw-content);transform:rotate(360deg)}}.s-add-product-button-busy::after{animation:spin 1s linear infinite;border-radius:9999px;border-width:2px;border-style:solid;border-top-color:var(--color-primary);border-left-color:var(--color-primary);border-bottom-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-border-opacity:1;border-right-color:rgb(243 244 246 / var(--tw-border-opacity, 1));--tw-content:'';content:var(--tw-content)}";
 
 const SallaAddProductButton = /*@__PURE__*/ proxyCustomElement(class SallaAddProductButton extends HTMLElement {
     constructor() {
@@ -266,6 +267,11 @@ const SallaAddProductButton = /*@__PURE__*/ proxyCustomElement(class SallaAddPro
         this.success = createEvent(this, "success", 7);
         this.failed = createEvent(this, "failed", 7);
         this.hostAttributes = {};
+        this.buyNowBusy = false;
+        /** Latest buy-now click; an older click still waiting on Bullet Delivery drops out. */
+        this.buyNowToken = 0;
+        this.buyNowLastClick = 0;
+        this.buyNowLivePrice = 0;
         /**
          * Has Pre Order
          */
@@ -280,6 +286,7 @@ const SallaAddProductButton = /*@__PURE__*/ proxyCustomElement(class SallaAddPro
         this.productType = 'product';
         this.selectedOptions = [];
         this.buyNowText = salla.lang.get('pages.products.buy_now');
+        this.buyNowLoading = false;
         /** Use matchMedia instead of window.innerWidth to avoid forced reflow (Lighthouse/PageSpeed) */
         this.isDesktopViewport = typeof window !== 'undefined' ? window.matchMedia('(min-width: 768px)').matches : true;
         this.viewportMediaQuery = null;
@@ -287,6 +294,9 @@ const SallaAddProductButton = /*@__PURE__*/ proxyCustomElement(class SallaAddPro
         this.orderOptionsGateAttached = false;
         /** Guards one-time attachment of the fast-checkout Bullet Delivery gate (logic lives in FastCheckoutGate). */
         this.fastCheckoutGateAttached = false;
+        this.onBuyNowPriceUpdated = (response) => {
+            this.buyNowLivePrice = Number(response?.data?.price) || this.buyNowLivePrice;
+        };
         this.onViewportChange = (e) => {
             this.isDesktopViewport = e.matches;
             this.btn?.setText((e.matches && !!this.passedLabel) ? this.passedLabel : this.getLabel());
@@ -414,6 +424,105 @@ const SallaAddProductButton = /*@__PURE__*/ proxyCustomElement(class SallaAddPro
             type: this.supportStickyBar && !this.isDesktopViewport ? 'plain' : this.productType == 'donating' ? 'donate' : 'buy'
         };
     }
+    // Store setting: quick-buy skips the mini-checkout popup and goes straight to the checkout page.
+    get redirectsToCheckout() {
+        return salla.config.get('store.settings.buy_now.redirect_to_checkout') === true;
+    }
+    /** The fast-checkout slot renders and the store redirects, so the buy-now button is on the page. */
+    get showsBuyNowButton() {
+        return this.showQuickBuy
+            && !!document.getElementById('fast-checkout-js')
+            && !['financial_support', 'donating'].includes(this.productType)
+            && this.redirectsToCheckout;
+    }
+    buyNowButton() {
+        return h("div", { class: "s-add-product-button-mini-checkout s-mini-checkout hide-scroll s-add-product-button-buy-now" }, h("button", { type: "button", class: `s-fast-checkout-button outline ${salla.lang.locale == 'ar' ? 'rtl' : 'ltr'}`, disabled: this.buyNowLoading, onClick: () => this.buyNowRedirect() }, h("div", { class: "s-add-product-button-mini-checkout-content" }, h("span", { innerHTML: WalletIcon }), this.buyNowText)));
+    }
+    async buyNowRedirect() {
+        // A double-click would reach Bullet Delivery twice, which stalls its guest gate.
+        const now = Date.now();
+        if (this.buyNowBusy || now - this.buyNowLastClick < 500) {
+            return;
+        }
+        this.buyNowLastClick = now;
+        const token = ++this.buyNowToken;
+        const optionsEl = document.querySelector(`salla-product-options[product-id="${this.productId}"]`);
+        if (optionsEl?.validateAndScroll && !(await optionsEl.validateAndScroll())) {
+            return;
+        }
+        // Bullet Delivery's address gate, as the widget runs it; stays pending if the shopper backs out.
+        await salla.cart.event.beforeStartFastCheckout();
+        if (token !== this.buyNowToken || this.buyNowBusy) {
+            return;
+        }
+        this.buyNowBusy = true;
+        let leaving = false;
+        try {
+            this.buyNowLoading = true;
+            const form = document.querySelector('form.product-form');
+            const data = form ? new FormData(form) : new FormData();
+            data.set('id', String(this.productId));
+            data.set('source', 'buy_now');
+            if (!(await this.collectOrderOptions(data))) {
+                return;
+            }
+            const resp = await salla.api.request('checkout/mini', data, 'post');
+            if (resp.data?.url) {
+                leaving = this.openCheckout(resp.data.url);
+            }
+            else if (resp.data?.to === 'login') {
+                salla.event.dispatch('login::open');
+            }
+        }
+        catch (error) {
+            this.failed.emit(error);
+        }
+        finally {
+            if (!leaving) {
+                this.buyNowBusy = false;
+                this.buyNowLoading = false;
+            }
+        }
+    }
+    /** Order options and free offer products, as the widget collects them; false when the modal is dismissed. */
+    async collectOrderOptions(data) {
+        let resp;
+        try {
+            resp = await salla.api.withoutNotifier(() => salla.product.api.getOrderOptions([{ id: this.productId, quantity: Number(data.get('quantity')) || 1 }]));
+        }
+        catch (error) {
+            salla?.logger?.warn?.('order-options: fetch failed', error);
+            return true;
+        }
+        const orderOptions = resp?.data?.order_options || [];
+        const freeProducts = (Array.isArray(resp?.data?.advance_free_product) ? resp.data.advance_free_product : [])
+            .filter((entry) => Array.isArray(entry?.options) && entry.options.length);
+        if (!orderOptions.length && !freeProducts.length) {
+            return true;
+        }
+        try {
+            const result = await ensureOrderOptionsModal().open({
+                orderOptions,
+                freeProducts,
+                basePrice: this.buyNowLivePrice || Number(resp?.data?.products?.[0]?.price?.amount) || 0,
+            });
+            appendOrderOptionsToPayload(data, result?.orderOptions || []);
+            injectFreeProductsIntoPayload(data, result?.freeProducts || []);
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }
+    /** Native SPA webviews own the checkout screen; returns true when this page navigates away. */
+    openCheckout(url) {
+        if (salla.mobile?.isSpaWebview?.() && salla.mobile.openCheckout) {
+            salla.mobile.openCheckout(url);
+            return false;
+        }
+        window.location.href = url;
+        return true;
+    }
     miniCheckoutWidget() {
         let storeId = salla.config.get('store.id');
         if (!storeId) {
@@ -466,11 +575,14 @@ const SallaAddProductButton = /*@__PURE__*/ proxyCustomElement(class SallaAddPro
             } }, h("div", { class: {
                 's-add-product-button-main': this.showQuickBuy,
                 'w-full': !document.getElementById('fast-checkout-js') || ['financial_support', 'donating'].includes(this.productType) // This is a temporary fix until all themes fully support the fast checkout -- To be removed later
-            } }, h("salla-button", { color: this.productStatus === 'sale' ? 'primary' : 'light', type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', ref: el => this.btn = el, onClick: event => this.addProductToCart(event), disabled: this.productStatus !== 'sale', "aria-label": this.isIconOnlyLabel ? this.addToCartLabel : undefined, ...this.getBtnAttributes(), "loader-position": "center" }, h("slot", null)), this.showQuickBuy && !!document.getElementById('fast-checkout-js') && !['financial_support', 'donating'].includes(this.productType) ? this.miniCheckoutWidget() : ''), this.showQuickBuy && this.isApplePayActive ? h("salla-quick-buy", { ...this.getQuickBuyBtnAttributes() }) : '');
+            } }, h("salla-button", { color: this.productStatus === 'sale' ? 'primary' : 'light', type: "button", fill: this.productStatus === 'sale' ? 'solid' : 'outline', ref: el => this.btn = el, onClick: event => this.addProductToCart(event), disabled: this.productStatus !== 'sale', "aria-label": this.isIconOnlyLabel ? this.addToCartLabel : undefined, ...this.getBtnAttributes(), "loader-position": "center" }, h("slot", null)), this.showQuickBuy && !!document.getElementById('fast-checkout-js') && !['financial_support', 'donating'].includes(this.productType) ? (this.redirectsToCheckout ? this.buyNowButton() : this.miniCheckoutWidget()) : ''), this.showQuickBuy && this.isApplePayActive ? h("salla-quick-buy", { ...this.getQuickBuyBtnAttributes() }) : '');
     }
     async componentDidLoad() {
         // Register this component for hooks system, already on it logic to run componentDidLoad trigger
         await Salla.hooks.registerComponent('salla-add-product-button', this);
+        if (this.showsBuyNowButton) {
+            salla.product?.event?.onPriceUpdated?.(this.onBuyNowPriceUpdated);
+        }
         if (!this.notifyOptionsAvailability) {
             return;
         }
@@ -519,6 +631,7 @@ const SallaAddProductButton = /*@__PURE__*/ proxyCustomElement(class SallaAddPro
     }
     disconnectedCallback() {
         this.viewportMediaQuery?.removeEventListener('change', this.onViewportChange);
+        salla.product?.event?.offPriceUpdated?.(this.onBuyNowPriceUpdated);
     }
     get host() { return this; }
     static get style() { return sallaAddProductButtonCss; }
@@ -540,6 +653,7 @@ const SallaAddProductButton = /*@__PURE__*/ proxyCustomElement(class SallaAddPro
         "showQuickBuy": [32],
         "isApplePayActive": [32],
         "buyNowText": [32],
+        "buyNowLoading": [32],
         "isDesktopViewport": [32]
     }]);
 function defineCustomElement() {