@salla.sa/twilight-components 2.14.480 → 2.14.482

package/dist/collection/components/salla-cart-summary-card/salla-cart-summary-card.js

@@ -0,0 +1,401 @@
+/*!
+ * Crafted with ❤ by Salla
+ */
+import { h, Host } from "@stencil/core";
+const SKELETON_ROWS = [
+    { label: '100px', value: '56px' },
+    { label: '72px', value: '64px' },
+    { label: '96px', value: '48px' },
+];
+/**
+ * Cart summary card. Inline on desktop (≥1024px), sticky bar with
+ * collapsible sheet on mobile.
+ */
+export class SallaCartSummaryCard {
+    constructor() {
+        this.validateForms = true;
+        this.cartCount = 0;
+        this.cartTotal = 0;
+        this.cartTotalDiscount = 0;
+        this.cartSubTotal = 0;
+        this.cartOptionsTotal = 0;
+        this.cartShippingCost = 0;
+        this.cartTaxAmount = 0;
+        this.cartHasShipping = false;
+        this.isOpen = false;
+        this.isDesktop = false;
+        /** True until the first cart payload (API response or cart event) arrives. */
+        this.isLoading = true;
+        // Original DOM location — needed to restore the host on the mobile→desktop flip.
+        this.originalParent = null;
+        this.originalNextSibling = null;
+        this.bodyObserver = null;
+        this.mediaQueryList = null;
+        this.submitObserver = null;
+        this.isSubmitting = false;
+        // Stable handler refs — anonymous functions can't be unbound from listeners.
+        this.mqlChangeHandler = (e) => {
+            this.isDesktop = e.matches;
+            this.applyMode();
+        };
+        this.cartEventNames = [
+            'cart::details.fetched',
+            'cart::updated',
+            'cart::latest.fetched',
+            'cart::coupon.added',
+            'cart::coupon.deleted',
+        ];
+        this.cartEventHandler = (payload) => this.applyCartData(this.extractCart(payload));
+        this.toggleSheet = () => {
+            if (!this.isDesktop)
+                this.isOpen = !this.isOpen;
+        };
+        this.handleSubmit = async (event) => {
+            // Re-entrancy guard, set before the async validation so a second tap during
+            // that window can't fire a second submit. Covers all user types.
+            if (this.isSubmitting) {
+                event.preventDefault();
+                return;
+            }
+            this.isSubmitting = true;
+            if (this.validateForms && !(await this.validateCartForms())) {
+                event.preventDefault();
+                salla.notify?.error?.(salla.lang?.get?.('common.messages.required_fields'));
+                this.isSubmitting = false; // validation failed → allow retry
+                return;
+            }
+            const btn = this.host.querySelector('#s-cart-summary-card-submit');
+            if (typeof salla !== 'undefined' && salla.config?.get?.('user.type') !== 'guest' && btn) {
+                btn.load?.();
+                // Pin loading across re-renders; auto-clear after 10s so a failed submit
+                // doesn't lock the button forever.
+                this.submitObserver?.disconnect();
+                if (this.submitObserverTimeout)
+                    clearTimeout(this.submitObserverTimeout);
+                this.submitObserver = new MutationObserver(() => {
+                    if (!btn.hasAttribute('loading'))
+                        btn.setAttribute('loading', '');
+                });
+                this.submitObserver.observe(btn, { attributes: true, attributeFilter: ['loading'] });
+                this.submitObserverTimeout = window.setTimeout(() => {
+                    this.submitObserver?.disconnect();
+                    this.submitObserver = null;
+                    btn.removeAttribute?.('loading');
+                }, 10000);
+            }
+            salla.cart?.submit?.();
+            // Release after submit kicks off: success navigates away, a guest opens the
+            // login modal. Short delay blocks the double-tap race without a long lock.
+            window.setTimeout(() => { this.isSubmitting = false; }, 1500);
+        };
+    }
+    // Sync: returning a promise would make Stencil defer first paint. init() runs async.
+    componentWillLoad() {
+        this.mediaQueryList = window.matchMedia(this.desktopMediaQuery());
+        this.isDesktop = this.mediaQueryList.matches;
+        if (this.isDesktop)
+            this.isOpen = true;
+        // isLoading is true by default → first paint is the skeleton.
+        this.init();
+    }
+    // Not awaited by componentWillLoad, so it can't block first paint.
+    async init() {
+        await salla.onReady();
+        await salla.lang.onLoaded();
+        this.loadTranslations();
+        // 'cart::updated' is in cartEventNames — don't also use onUpdated (it leaks, no off()).
+        this.cartEventNames.forEach(name => salla.event.on(name, this.cartEventHandler));
+        this.fetchCart();
+    }
+    loadTranslations() {
+        this.summaryLabel = salla.lang.get('pages.cart.summary');
+        this.itemsTotalLabel = salla.lang.get('pages.cart.items_total');
+        this.itemsTotalNoTaxLabel = salla.lang.get('pages.cart.items_total_without_tax');
+        this.optionsTotalLabel = salla.lang.get('pages.cart.order_options_total');
+        this.shippingCostLabel = salla.lang.get('pages.cart.shipping_cost');
+        this.vatTaxLabel = salla.lang.get('pages.cart.VAT_tax_amount');
+        this.savedLabel = salla.lang.get('pages.cart.discount');
+        this.discountBadge = salla.lang.get('pages.cart.saved');
+        this.finalTotalLabel = salla.lang.get('pages.cart.final_total');
+        this.pricesTaxedLabel = salla.lang.get('pages.cart.prices_taxed');
+        this.completeOrderLabel = salla.lang.get('pages.cart.complete_order');
+        this.openSummaryLabel = salla.lang.get('pages.cart.open_summary');
+        this.closeSummaryLabel = salla.lang.get('pages.cart.close_summary');
+        this.itemsCountTemplate = salla.lang.get('pages.cart.items_with_count');
+    }
+    /** Coerces PHP cart values: numbers, strings, and Money/MoneyTaxable objects. */
+    num(v) {
+        if (v === null || v === undefined)
+            return 0;
+        if (typeof v === 'number')
+            return isFinite(v) ? v : 0;
+        if (typeof v === 'string')
+            return parseFloat(v) || 0;
+        if (typeof v === 'object') {
+            if ('amount' in v)
+                return this.num(v.amount);
+            if ('value' in v)
+                return this.num(v.value);
+            if ('formatted' in v)
+                return this.num(v.formatted);
+        }
+        return 0;
+    }
+    // Desktop cutoff — must match the SCSS media queries so JS and CSS never diverge.
+    breakpointPx() {
+        return 1024;
+    }
+    desktopMediaQuery() {
+        return `(min-width: ${this.breakpointPx()}px)`;
+    }
+    componentDidLoad() {
+        // Capture original location BEFORE the portal relocates the host.
+        this.originalParent = this.host.parentElement;
+        this.originalNextSibling = this.host.nextSibling;
+        // Re-init if componentWillLoad failed to set it (rare hydration/race edge case).
+        if (!this.mediaQueryList) {
+            this.mediaQueryList = window.matchMedia(this.desktopMediaQuery());
+            this.isDesktop = this.mediaQueryList.matches;
+        }
+        this.applyMode();
+        // iOS Safari < 14 lacks addEventListener on MediaQueryList — fall back to addListener.
+        if (this.mediaQueryList.addEventListener) {
+            this.mediaQueryList.addEventListener('change', this.mqlChangeHandler);
+        }
+        else {
+            this.mediaQueryList.addListener(this.mqlChangeHandler);
+        }
+    }
+    // Mobile: portal host to <body> so position:fixed escapes any transformed
+    // ancestor. Desktop: restore to its original DOM location.
+    applyMode() {
+        if (this.isDesktop) {
+            this.isOpen = true;
+            this.bodyObserver?.disconnect();
+            this.bodyObserver = null;
+            if (this.originalParent && this.host.parentElement !== this.originalParent) {
+                // Sibling may have been removed while we were portaled — fall back
+                // to appendChild instead of letting insertBefore throw.
+                const ref = this.originalNextSibling?.parentNode === this.originalParent
+                    ? this.originalNextSibling
+                    : null;
+                this.originalParent.insertBefore(this.host, ref);
+            }
+        }
+        else {
+            this.pinToBodyEnd();
+        }
+    }
+    // Re-pin via MutationObserver so a late-mounted footer can't paint over us.
+    pinToBodyEnd() {
+        if (this.host.parentElement !== document.body || document.body.lastElementChild !== this.host) {
+            document.body.appendChild(this.host);
+        }
+        if (!this.bodyObserver) {
+            this.bodyObserver = new MutationObserver(() => {
+                if (!this.isDesktop && document.body.lastElementChild !== this.host) {
+                    document.body.appendChild(this.host);
+                }
+            });
+            this.bodyObserver.observe(document.body, { childList: true });
+        }
+    }
+    disconnectedCallback() {
+        // Fires synchronously on every removal, incl. our own reparenting — defer a
+        // microtask and bail if reconnected, else the portal loses its listeners.
+        Promise.resolve().then(() => {
+            if (this.host.isConnected)
+                return;
+            this.bodyObserver?.disconnect();
+            this.submitObserver?.disconnect();
+            if (this.submitObserverTimeout) {
+                clearTimeout(this.submitObserverTimeout);
+                this.submitObserverTimeout = undefined;
+            }
+            // Mirror the iOS-Safari-<14 path used in componentDidLoad.
+            if (this.mediaQueryList?.removeEventListener) {
+                this.mediaQueryList.removeEventListener('change', this.mqlChangeHandler);
+            }
+            else {
+                this.mediaQueryList?.removeListener(this.mqlChangeHandler);
+            }
+            this.mediaQueryList = null;
+            this.cartEventNames.forEach(name => salla.event.off(name, this.cartEventHandler));
+        });
+    }
+    fetchCart() {
+        const cartId = salla.config?.get?.('page.id');
+        const result = salla.cart?.api?.details?.(cartId);
+        if (result && typeof result.then === 'function') {
+            result
+                .then((res) => this.applyCartData(this.extractCart(res)))
+                // On failure, fall back to the cached summary instead of stranding the skeleton.
+                .catch(() => this.applyCachedSummary());
+        }
+        else {
+            this.applyCachedSummary();
+        }
+    }
+    // Cart API failed → use the SDK's cached summary (localStorage, set on
+    // cart::updated). May be stale but beats zeros; events refresh it. Clears the
+    // skeleton either way so the CTA always renders.
+    applyCachedSummary() {
+        const summary = salla.storage?.get?.('cart.summary');
+        if (summary && typeof summary === 'object')
+            this.applyCartData(summary);
+        this.isLoading = false;
+    }
+    extractCart(payload) {
+        if (!payload)
+            return null;
+        if (payload.data?.cart)
+            return payload.data.cart;
+        if (payload.cart)
+            return payload.cart;
+        return payload;
+    }
+    applyCartData(data) {
+        if (!data)
+            return;
+        // First real payload ends the skeleton.
+        this.isLoading = false;
+        if (data.count !== undefined)
+            this.cartCount = this.num(data.count);
+        if (data.total !== undefined)
+            this.cartTotal = this.num(data.total);
+        // `total_discount` is the live field (untyped); `discount` is the typed fallback.
+        const discount = data.total_discount ?? data.discount;
+        if (discount !== undefined)
+            this.cartTotalDiscount = this.num(discount);
+        if (data.sub_total !== undefined)
+            this.cartSubTotal = this.num(data.sub_total);
+        if (data.options_total !== undefined)
+            this.cartOptionsTotal = this.num(data.options_total);
+        if (data.tax_amount !== undefined)
+            this.cartTaxAmount = this.num(data.tax_amount);
+        // Shipping cost (free-shipping aware): prefer `shipping_cost`, else `real_shipping_cost`.
+        const hasFreeShipping = !!data.free_shipping_bar?.has_free_shipping;
+        if (data.shipping_cost !== undefined)
+            this.cartShippingCost = this.num(data.shipping_cost);
+        else if (data.real_shipping_cost !== undefined)
+            this.cartShippingCost = hasFreeShipping ? 0 : this.num(data.real_shipping_cost);
+        // `has_shipping` isn't in the API response — derive row visibility from the cost.
+        this.cartHasShipping = this.cartShippingCost > 0 || !!data.has_shipping;
+    }
+    // Native reportValidity() covers standard fields; custom product options
+    // validate via their own async reportValidity() (incl. multi-option required
+    // logic), so await that too — else option validation is skipped at checkout.
+    async validateCartForms() {
+        let isValid = true;
+        document
+            .querySelectorAll('form[id^="item-"]')
+            .forEach(f => {
+            if (!f.reportValidity())
+                isValid = false;
+        });
+        const optionEls = Array.from(document.querySelectorAll('form[id^="item-"] salla-product-options'));
+        for (const el of optionEls) {
+            if (typeof el.reportValidity === 'function' && !(await el.reportValidity()))
+                isValid = false;
+        }
+        return isValid;
+    }
+    money(value) {
+        try {
+            if (typeof salla !== 'undefined' && typeof salla.money === 'function') {
+                return salla.money(value);
+            }
+        }
+        catch (_) { }
+        return String(value ?? 0);
+    }
+    getItemsLabel() {
+        return this.itemsCountTemplate?.replace(':count', String(this.cartCount)) ?? '';
+    }
+    // Skeleton during the initial fetch
+    renderSkeleton() {
+        return (h(Host, { class: {
+                's-cart-summary-card': true,
+                's-cart-summary-card--loading': true,
+                's-cart-summary-card--desktop': this.isDesktop,
+                's-cart-summary-card--mobile': !this.isDesktop,
+            } }, this.isDesktop && (h("div", { class: "s-cart-summary-card-sheet-wrap s-cart-summary-card-sheet-wrap--open" }, h("div", { class: "s-cart-summary-card-sheet" }, h("header", { class: "s-cart-summary-card-sheet-header" }, h("h3", { class: "s-cart-summary-card-sheet-title" }, h("salla-skeleton", { width: "140px", height: "16px" }))), SKELETON_ROWS.map(({ label, value }, i) => (h("div", { class: "s-cart-summary-card-line", key: i }, h("salla-skeleton", { width: label, height: "16px" }), h("salla-skeleton", { width: value, height: "16px" }))))))), h("div", { class: "s-cart-summary-card-bar" }, h("div", { class: "s-cart-summary-card-bar-label" }, h("div", { class: "s-cart-summary-card-bar-label-main" }, h("salla-skeleton", { width: "90px", height: "16px" }), h("salla-skeleton", { width: "48px", height: "12px" }))), h("div", { class: "s-cart-summary-card-bar-totals" }, h("div", { class: "s-cart-summary-card-bar-totals-row" }, h("salla-skeleton", { width: "80px", height: "20px" })))), h("div", { class: "s-cart-summary-card-action" }, h("salla-skeleton", { width: "100%", height: "44px" }))));
+    }
+    render() {
+        if (this.isLoading)
+            return this.renderSkeleton();
+        const showSavings = this.cartTotalDiscount > 0;
+        const subTotalLabel = this.cartTaxAmount ? this.itemsTotalNoTaxLabel : this.itemsTotalLabel;
+        // Inline transform so sheet motion doesn't depend on SCSS load order.
+        const sheetStyle = this.isDesktop
+            ? {}
+            : {
+                transform: this.isOpen ? 'translateY(0)' : 'translateY(100%)',
+                transition: 'transform 0.4s cubic-bezier(0.32, 0.72, 0, 1)',
+            };
+        return (h(Host, { class: {
+                's-cart-summary-card': true,
+                's-cart-summary-card--open': this.isOpen,
+                's-cart-summary-card--desktop': this.isDesktop,
+                's-cart-summary-card--mobile': !this.isDesktop,
+            } }, h("div", { class: {
+                's-cart-summary-card-sheet-wrap': true,
+                's-cart-summary-card-sheet-wrap--open': this.isOpen,
+            }, "aria-hidden": this.isOpen ? 'false' : 'true' }, h("div", { class: "s-cart-summary-card-sheet", style: sheetStyle }, h("header", { class: "s-cart-summary-card-sheet-header" }, h("h3", { class: "s-cart-summary-card-sheet-title" }, this.summaryLabel)), h("div", { class: "s-cart-summary-card-line" }, h("span", null, subTotalLabel), h("b", { innerHTML: this.money(this.cartSubTotal) })), this.cartOptionsTotal > 0 && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.optionsTotalLabel), h("b", { innerHTML: this.money(this.cartOptionsTotal) }))), this.cartHasShipping && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.shippingCostLabel), h("b", { innerHTML: this.money(this.cartShippingCost) }))), this.cartTaxAmount > 0 && (h("div", { class: "s-cart-summary-card-line" }, h("span", null, this.vatTaxLabel), h("b", { innerHTML: this.money(this.cartTaxAmount) }))), showSavings && (h("div", { class: "s-cart-summary-card-line s-cart-summary-card-line--discount" }, h("span", null, this.savedLabel), h("b", null, "\u2212 ", h("span", { innerHTML: this.money(this.cartTotalDiscount) })))))), h("div", { class: "s-cart-summary-card-bar" }, h("div", { class: "s-cart-summary-card-bar-label" }, h("div", { class: "s-cart-summary-card-bar-label-main" }, h("span", { class: "s-cart-summary-card-bar-label-text" }, this.finalTotalLabel), h("span", { class: "s-cart-summary-card-bar-count" }, this.getItemsLabel())), this.cartTaxAmount > 0 && (h("div", { class: "s-cart-summary-card-bar-label-sub" }, this.pricesTaxedLabel))), h("div", { class: "s-cart-summary-card-bar-totals" }, h("div", { class: "s-cart-summary-card-bar-totals-row" }, showSavings && (h("s", { class: "s-cart-summary-card-bar-original" }, salla.helpers.number(this.cartTotal + this.cartTotalDiscount))), h("b", { class: "s-cart-summary-card-bar-total", innerHTML: this.money(this.cartTotal) }), !this.isDesktop && (h("button", { type: "button", class: "s-cart-summary-card-chevron", "aria-label": this.isOpen ? this.closeSummaryLabel : this.openSummaryLabel, "aria-expanded": this.isOpen ? 'true' : 'false', onClick: this.toggleSheet }, h("i", { class: "sicon-keyboard_arrow_up s-cart-summary-card-chevron-icon" })))), showSavings && (h("div", { class: "s-cart-summary-card-bar-savings-badge" }, h("span", { "aria-hidden": "true" }, "\uD83C\uDF89"), h("span", null, this.discountBadge, " ", h("span", { innerHTML: this.money(this.cartTotalDiscount) })))))), h("div", { class: "s-cart-summary-card-action" }, h("salla-button", { id: "s-cart-summary-card-submit", width: "wide", "loader-position": "center", onClick: this.handleSubmit }, this.completeOrderLabel))));
+    }
+    static get is() { return "salla-cart-summary-card"; }
+    static get properties() {
+        return {
+            "validateForms": {
+                "type": "boolean",
+                "attribute": "validate-forms",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "cartCount": {},
+            "cartTotal": {},
+            "cartTotalDiscount": {},
+            "cartSubTotal": {},
+            "cartOptionsTotal": {},
+            "cartShippingCost": {},
+            "cartTaxAmount": {},
+            "cartHasShipping": {},
+            "isOpen": {},
+            "isDesktop": {},
+            "isLoading": {},
+            "summaryLabel": {},
+            "itemsTotalLabel": {},
+            "itemsTotalNoTaxLabel": {},
+            "optionsTotalLabel": {},
+            "shippingCostLabel": {},
+            "vatTaxLabel": {},
+            "savedLabel": {},
+            "discountBadge": {},
+            "finalTotalLabel": {},
+            "pricesTaxedLabel": {},
+            "completeOrderLabel": {},
+            "openSummaryLabel": {},
+            "closeSummaryLabel": {},
+            "itemsCountTemplate": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+}