@salla.sa/twilight-components 2.14.482 → 2.14.483

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

@@ -1,401 +0,0 @@
-/*!
- * 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"; }
-}

package/dist/components/salla-cart-summary-card.d.ts

@@ -1,11 +0,0 @@
-import type { Components, JSX } from "../types/components";
-
-interface SallaCartSummaryCard extends Components.SallaCartSummaryCard, HTMLElement {}
-export const SallaCartSummaryCard: {
-    prototype: SallaCartSummaryCard;
-    new (): SallaCartSummaryCard;
-};
-/**
- * Used to define this component and all nested components recursively.
- */
-export const defineCustomElement: () => void;