@salla.sa/twilight-components 2.14.514 → 2.14.515

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

@@ -46,6 +46,17 @@ export class SallaCartSummaryCard {
             'cart::coupon.deleted',
         ];
         this.cartEventHandler = (payload) => this.applyCartData(this.extractCart(payload));
+        // Failed submit → release the pinned loading right away instead of waiting
+        // out the 10s safety timeout next to the error toast.
+        this.releaseSubmitLoading = () => {
+            this.submitObserver?.disconnect();
+            this.submitObserver = null;
+            if (this.submitObserverTimeout) {
+                clearTimeout(this.submitObserverTimeout);
+                this.submitObserverTimeout = undefined;
+            }
+            this.host.querySelector('#s-cart-summary-card-submit')?.removeAttribute?.('loading');
+        };
         this.toggleSheet = () => {
             if (!this.isDesktop)
                 this.isOpen = !this.isOpen;
@@ -65,7 +76,7 @@ export class SallaCartSummaryCard {
                 return;
             }
             const btn = this.host.querySelector('#s-cart-summary-card-submit');
-            if (typeof salla !== 'undefined' && salla.config?.get?.('user.type') !== 'guest' && btn) {
+            if (btn) {
                 btn.load?.();
                 // Pin loading across re-renders; auto-clear after 10s so a failed submit
                 // doesn't lock the button forever.
@@ -84,8 +95,8 @@ export class SallaCartSummaryCard {
                 }, 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.
+            // Release after submit kicks off: success navigates away. Short delay
+            // blocks the double-tap race without a long lock.
             window.setTimeout(() => { this.isSubmitting = false; }, 1500);
         };
     }
@@ -105,6 +116,7 @@ export class SallaCartSummaryCard {
         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));
+        salla.event.on('cart::submit.failed', this.releaseSubmitLoading);
         this.fetchCart();
     }
     loadTranslations() {
@@ -221,6 +233,7 @@ export class SallaCartSummaryCard {
             }
             this.mediaQueryList = null;
             this.cartEventNames.forEach(name => salla.event.off(name, this.cartEventHandler));
+            salla.event.off('cart::submit.failed', this.releaseSubmitLoading);
         });
     }
     fetchCart() {

package/dist/collection/components/salla-user-menu/salla-user-menu.js

@@ -43,6 +43,10 @@ export class SallaUserMenu {
             pending_orders: salla.helpers.number(salla.storage.get('user.pending_orders') || 0),
         };
         this.sallaAccountEnabled = false;
+        this.walletBalance = '';
+        this.walletBalanceLoading = false;
+        // Fetched once per page load; resets on remount (page refresh), not on open.
+        this.walletBalanceLoaded = false;
         this.hasBadges = Number(salla.storage.get('user.pending_orders')) > 0 ||
             Number(salla.storage.get('user.notifications')) > 0;
         /**
@@ -122,6 +126,28 @@ export class SallaUserMenu {
         this.loyalty_points = Salla.lang.get('pages.loyalty_program.loyalty_points');
         this.logout = Salla.lang.get('blocks.header.logout');
     }
+    async loadWalletBalance() {
+        // Live balance instead of the cached (stale) config; light skips transactions.
+        if (Salla.config.isGuest())
+            return;
+        this.walletBalanceLoading = true;
+        try {
+            // withoutNotifier: a failed background fetch must not toast the shopper.
+            const resp = await salla.api.withoutNotifier(() => salla.api.request('/balance/wallet?light=1'));
+            const balance = Number(resp?.data?.balance) || 0;
+            // Currency stays from config — it doesn't go stale like the amount.
+            this.walletBalance = balance
+                ? Salla.money({ amount: Number(balance.toFixed(2)), currency: Salla.config.get('user.currency_code') })
+                : '';
+            this.walletBalanceLoaded = true; // cache for the rest of this page load
+        }
+        catch {
+            // keep the last value on failure (retries on next open)
+        }
+        finally {
+            this.walletBalanceLoading = false;
+        }
+    }
     initiate() {
         if (Salla.config.isGuest()) {
             return this.autoMountLoginModal();
@@ -183,6 +209,10 @@ export class SallaUserMenu {
         this.opened = !this.opened;
         e.stopPropagation();
         if (this.opened) {
+            // Fetch once per page load; reuse the cached value on later opens.
+            if (window.can_access_wallet && !this.walletBalanceLoaded && !this.walletBalanceLoading) {
+                this.loadWalletBalance();
+            }
             window.addEventListener('click', this.onClickOutside);
         }
     }
@@ -225,7 +255,7 @@ export class SallaUserMenu {
         return (h("li", { class: {
                 's-user-menu-dropdown-item': true,
                 's-user-menu-dropdown-item-logout': i + 1 === Object.entries(this.items).length,
-            } }, h("a", { ...this.getItemAnchorLinkAttrs(itemKey), class: "s-user-menu-dropdown-item-link", onClick: event => this.menuItemClicked(event, itemKey) }, h("i", { class: "s-user-menu-dropdown-item-prefix", innerHTML: itemValue }), h("span", { class: "s-user-menu-dropdown-item-title" }, this[itemKey]), !['٠', '0', undefined].includes(this.badges[itemKey]) ? (h("span", { class: "s-user-menu-dropdown-item-badge" }, this.badges[itemKey])) : (''))));
+            } }, h("a", { ...this.getItemAnchorLinkAttrs(itemKey), class: "s-user-menu-dropdown-item-link", onClick: event => this.menuItemClicked(event, itemKey) }, h("i", { class: "s-user-menu-dropdown-item-prefix", innerHTML: itemValue }), h("span", { class: "s-user-menu-dropdown-item-title" }, this[itemKey]), itemKey === 'wallet' && !this.inline && (this.walletBalance || this.walletBalanceLoading) ? (h("span", { class: "s-user-menu-dropdown-item-balance", style: { display: 'inline-flex', alignItems: 'center', gap: '4px' } }, this.walletBalance ? h("span", { innerHTML: this.walletBalance }) : '', this.walletBalanceLoading ? h("salla-loading", { size: "14" }) : '')) : (''), !['٠', '0', undefined].includes(this.badges[itemKey]) ? (h("span", { class: "s-user-menu-dropdown-item-badge" }, this.badges[itemKey])) : (''))));
     }
     componentShouldUpdate() {
         if (!this.opened) {
@@ -387,6 +417,8 @@ export class SallaUserMenu {
             "is_loggedIn": {},
             "badges": {},
             "sallaAccountEnabled": {},
+            "walletBalance": {},
+            "walletBalanceLoading": {},
             "hasBadges": {},
             "profileUrl": {},
             "OrderUpdate": {}