@salla.sa/twilight-components 2.14.405 → 2.14.407

package/dist/collection/components/salla-login-modal/salla-login-modal.js

@@ -78,12 +78,14 @@ export class SallaLoginModal {
             // }
             if (action == 'ready') {
                 if (value.isPasskeyPage) {
-                    this.createPassKey.postMessage({ source: "login", type: "init_passkey_page", data: {
+                    this.createPassKey.postMessage({
+                        source: "login", type: "init_passkey_page", data: {
                             token: salla.storage.get('token'),
                             store_id: salla.config.get('store.id'),
                             locale: salla.config.get('user.language_code'),
                             redirect: salla.config.get('store.url')
-                        } }, salla.config.get('login.url'));
+                        }
+                    }, salla.config.get('login.url'));
                     return;
                 }
                 this.handleIframeReadyAction();
@@ -151,18 +153,18 @@ export class SallaLoginModal {
      * Open login component
      */
     async open(_event = null) {
+        if (Salla.config.isGuest()) {
+            return this.modal.open();
+        }
         /**
          * This is a workaround until we remove all the user objet from twig files
          * When the user is already login, let's reload the page
          */
-        if (!salla.config.isGuest()) {
-            if (!this.withoutReload) {
-                return location.reload();
-            }
-            // Fire an event if withoutReload is true
-            return;
+        if (!this.withoutReload) {
+            return location.reload();
         }
-        return this.modal.open();
+        // Fire an event if withoutReload is true
+        return;
     }
     close() {
         Salla.event.emit('salla-login::closing');
@@ -295,6 +297,10 @@ export class SallaLoginModal {
         this.modal.open();
     }
     render() {
+        //let's avoid showing the login modal if the user is already logged in
+        if (Salla.config.isUser()) {
+            return;
+        }
         if (this.inline) {
             return this.getLoginDom();
         }

package/dist/collection/components/salla-product-options/salla-product-options.js

@@ -156,8 +156,12 @@ export class SallaProductOptions {
         const requiredElements = this.host.querySelectorAll('[required]');
         let pass = true;
         for (let i = 0; i < requiredElements.length; i++) {
+            const el = requiredElements[i];
+            if (el.disabled || el.closest('.hidden')) {
+                continue;
+            }
             //if there is only one invalid option, return false
-            if ('reportValidity' in requiredElements[i] && !requiredElements[i].reportValidity()) {
+            if ('reportValidity' in el && !el.reportValidity()) {
                 pass = false;
             }
         }
@@ -280,6 +284,13 @@ export class SallaProductOptions {
             }
             return opt;
         });
+        this.pruneInvisibleConditionalSelections();
+        this.setSelectedSkus();
+        requestAnimationFrame(() => {
+            this.optionsData
+                ?.filter(o => o.type === DisplayType.MULTIPLE_OPTIONS && o.required)
+                .forEach(o => this.handleRequiredMultipleOptions(o));
+        });
         // Emit the event only if fireChangeEvent is true
         if (fireChangeEvent) {
             this.changed.emit(data);
@@ -299,9 +310,60 @@ export class SallaProductOptions {
             return;
         }
         const optionContainer = this.host.querySelector(`[data-option-id="${option.id}"]`);
+        if (!optionContainer) {
+            return;
+        }
         const hasChecked = optionContainer.querySelectorAll('input:checked').length;
         optionContainer.querySelectorAll('input').forEach(input => input.toggleAttribute('required', !hasChecked));
     }
+    pruneInvisibleConditionalSelections() {
+        const passes = Math.max(1, this.optionsData.length);
+        for (let p = 0; p < passes; p++) {
+            let clearedSomething = false;
+            for (const opt of this.optionsData) {
+                const vc = opt.visibility_condition;
+                if (!vc) {
+                    continue;
+                }
+                const selectedAtParent = this.selectedOptions
+                    .filter(s => s.option_id === vc.option)
+                    .map(s => String(s.id));
+                const targetSelected = selectedAtParent.includes(String(vc.value));
+                const shouldShow = vc.operator === '=' ? targetSelected : !targetSelected;
+                if (shouldShow) {
+                    continue;
+                }
+                if (this.clearStaleOption(opt.id)) {
+                    clearedSomething = true;
+                }
+            }
+            if (!clearedSomething) {
+                break;
+            }
+        }
+    }
+    clearStaleOption(optionId) {
+        const opt = this.optionsData.find(o => o.id === optionId);
+        if (!opt) {
+            return false;
+        }
+        const beforeLen = this.selectedOptions.length;
+        this.selectedOptions = this.selectedOptions.filter(s => s.option_id !== optionId);
+        const removedFromSelected = this.selectedOptions.length !== beforeLen;
+        const hasValue = opt.value != null && String(opt.value).length > 0;
+        const hadSelectedDetail = opt.details?.some(d => d.is_selected) ?? false;
+        if (!removedFromSelected && !hasValue && !hadSelectedDetail) {
+            return false;
+        }
+        this.optionsData = this.optionsData.map(o => o.id !== optionId
+            ? o
+            : {
+                ...o,
+                value: undefined,
+                details: o.details?.map(d => ({ ...d, is_selected: false })) ?? o.details,
+            });
+        return true;
+    }
     getLatLng(value, type) {
         return value
             ? value.split(',')[type === 'lat' ? 0 : 1]