@salla.sa/twilight-components 2.14.464 → 2.14.466

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

@@ -79,7 +79,7 @@ export class SallaProductAvailability {
             return salla.api.product.availabilitySubscribe(payload)
                 .then(() => this.isSubscribed = true);
         }
-        if (this.channels_.includes('sms')) {
+        if (this.channels_.includes('sms') || this.channels_.includes('whatsapp')) {
             let { phone, countryCode } = await this.mobileInput.getValues();
             payload['country_code'] = countryCode;
             payload['phone'] = phone;
@@ -122,7 +122,7 @@ export class SallaProductAvailability {
                     return;
                 !isEmailValid && this.validateField(this.email, salla.lang.get('common.elements.email_is_valid'));
             }
-            if (this.channels_.includes('sms')) {
+            if (this.channels_.includes('sms') || this.channels_.includes('whatsapp')) {
                 const isPhoneValid = await this.mobileInput.isValid();
                 if (isPhoneValid)
                     return;
@@ -137,7 +137,7 @@ export class SallaProductAvailability {
         field.nextElementSibling['innerText'] = '* ' + errorMsg;
     }
     render() {
-        return (h(Host, { key: '6471f72c69d8293fa49ba9478e395274af57dc6f', class: "s-product-availability-wrap" }, this.isSubscribedToProduct
+        return (h(Host, { key: '144b0687a0e527fa493aa701c334db76a7b42164', class: "s-product-availability-wrap" }, this.isSubscribedToProduct
             ? h("div", { class: "s-product-availability-subscribed" }, h("span", { innerHTML: BellRingIcon, class: "s-product-availability-subs-icon" }), salla.lang.get('pages.products.notify_availability_success'))
             :
                 h("salla-button", { width: "wide", onClick: () => this.isUser ? this.submit() : this.openModel() }, salla.lang.get('pages.products.notify_availability')), this.isUser || this.isSubscribedToProduct ? '' : this.renderModal()));
@@ -147,7 +147,7 @@ export class SallaProductAvailability {
             h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.email')),
             h("input", { class: "s-product-availability-input", onKeyDown: e => this.typing(e), placeholder: salla.lang.get('common.elements.email_placeholder') || 'your@email.com', ref: el => this.email = el, type: "email" }),
             h("span", { class: "s-product-availability-error-msg" })
-        ] : '', this.channels_.includes('sms') ? [
+        ] : '', this.channels_.includes('sms') || this.channels_.includes('whatsapp') ? [
             h("label", { class: "s-product-availability-label" }, salla.lang.get('common.elements.mobile')),
             h("salla-tel-input", { ref: el => this.mobileInput = el, onKeyDown: e => this.typing(e) })
         ] : ''), h("div", { slot: "footer", class: "s-product-availability-footer" }, h("salla-button", { class: "modal-cancel-btn", width: "wide", color: "light", fill: "outline", onClick: () => this.modal.close() }, salla.lang.get('common.elements.cancel')), h("salla-button", { class: "submit-btn", "loader-position": 'center', width: "wide", ref: btn => this.btn = btn, onClick: () => this.submit() }, salla.lang.get('common.elements.submit')))));
@@ -170,8 +170,8 @@ export class SallaProductAvailability {
                 "attribute": "channels",
                 "mutable": false,
                 "complexType": {
-                    "original": "'sms' | 'email' | 'sms,email'",
-                    "resolved": "\"email\" | \"sms\" | \"sms,email\"",
+                    "original": "'sms' | 'email' | 'sms,email' | 'whatsapp' | 'sms,whatsapp'",
+                    "resolved": "\"email\" | \"sms\" | \"sms,email\" | \"sms,whatsapp\" | \"whatsapp\"",
                     "references": {}
                 },
                 "required": false,

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

@@ -0,0 +1,3 @@
+.s-product-options-option-stock-out {
+  opacity: 0.5;
+}

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

@@ -27,6 +27,7 @@ export class SallaProductOptions {
         this.availableDigitalCardValues = [];
         this.userInitiatedValidation = false;
         this.isCartMode = false;
+        this.availabilityMap = {};
         this.outSkus = [];
         /**
        * Avoid selection of previous default or selected card value option
@@ -117,12 +118,14 @@ export class SallaProductOptions {
      */
     async setOptionsData(optionsData) {
         this.optionsData = optionsData;
-        const that = this;
-        this.optionsData[0]?.details?.forEach(function (detail) {
+        this.outSkus = [];
+        this.optionsData[0]?.details?.forEach(detail => {
             Object.entries(detail.skus_availability || {})
-                .filter(sku => !sku[1])
-                .map(sku => that.outSkus.push(Number(sku[0])));
+                .filter(([, available]) => !available)
+                .forEach(([sku]) => this.outSkus.push(Number(sku)));
         });
+        this.fillSelectedOptions();
+        this.computeAvailability();
     }
     /**
      * Get the current options state, including selected values/details.
@@ -308,8 +311,9 @@ export class SallaProductOptions {
      */
     setSelectedSkus() {
         this.selectedSkus = this.selectedOptions.map(detail => Object.keys(detail.skus_availability || {}))
-            .reduce((p, c) => p.filter(e => c.includes(e)), []) // Initialize accumulator as an empty array
+            .reduce((p, c) => p.filter(e => c.includes(e)), [])
             .map(sku => Number(sku));
+        this.computeAvailability();
     }
     handleRequiredMultipleOptions(option) {
         if (option.type !== DisplayType.MULTIPLE_OPTIONS || !option.required) {
@@ -638,6 +642,7 @@ export class SallaProductOptions {
         this.disableCardValue = false;
         this.canDisabled = true;
         this.fillSelectedOptions();
+        this.computeAvailability();
     }
     /**
      * Enable user-initiated validation mode so invalid fields will scroll into view
@@ -748,22 +753,59 @@ export class SallaProductOptions {
         //and because we are using this inside select option, we need to replace the html currency symbol with the store currency symbol
         return detailName.replace('<i class=sicon-sar></i>', salla.config.currency()?.symbol || 'ر.س');
     }
-    isOptionDetailOut(detail) {
-        if (detail.is_out || !detail.skus_availability || !this.selectedSkus?.length) {
-            return detail.is_out;
-        }
-        const isDetailSelected = this.selectedOptions.filter(option => option.id === detail.id).length;
-        //if the current options is the only selected option, so we are sure that it's not out, because there is no other options selected yet
-        if (isDetailSelected && this.selectedOptions.length === 1) {
-            return false;
+    /**
+     * Builds a per-detail availability map by intersecting SKUs across all currently
+     * selected option groups. Supports any number of option groups generically.
+     *
+     * Status values:
+     *   'available'   – at least one in-stock SKU exists for this detail + current selections
+     *   'out_of_stock'– all matching SKUs are out of stock
+     *   'impossible'  – no SKU exists for this detail + current selections (invalid combination)
+     */
+    computeAvailability() {
+        const map = {};
+        if (!this.optionsData?.length) {
+            this.availabilityMap = map;
+            return;
         }
-        //if current details has sku in the possible outSkus it's out for sure
-        if (isDetailSelected) {
-            //here we will get the possible outSkus for current selected options
-            const outSelectableSkus = this.selectedSkus.filter(sku => this.outSkus.includes(sku));
-            return Object.keys(detail.skus_availability).some(sku => outSelectableSkus.includes(Number(sku)));
+        const variantGroups = this.optionsData.filter(opt => opt.details?.some(d => d.skus_availability && Object.keys(d.skus_availability).length > 0));
+        const isSingleGroup = variantGroups.length <= 1;
+        for (const optionGroup of variantGroups) {
+            const otherSelected = this.selectedOptions.filter(s => s.option_id !== optionGroup.id);
+            for (const detail of optionGroup.details) {
+                if (detail.is_out) {
+                    map[detail.id] = 'out_of_stock';
+                    continue;
+                }
+                const skusAvail = detail.skus_availability;
+                if (!skusAvail || !Object.keys(skusAvail).length) {
+                    map[detail.id] = 'available';
+                    continue;
+                }
+                const detailSkus = Object.keys(skusAvail).map(Number);
+                // No cross-group context yet — evaluate this detail's own SKUs directly
+                if (isSingleGroup || otherSelected.length === 0) {
+                    map[detail.id] = detailSkus.some(sku => skusAvail[sku]) ? 'available' : 'out_of_stock';
+                    continue;
+                }
+                // Intersect this detail's SKUs with the SKUs of each other selected detail
+                let candidates = detailSkus;
+                for (const other of otherSelected) {
+                    const otherSkus = Object.keys(other.skus_availability || {}).map(Number);
+                    candidates = candidates.filter(sku => otherSkus.includes(sku));
+                }
+                if (!candidates.length) {
+                    map[detail.id] = 'impossible';
+                    continue;
+                }
+                map[detail.id] = candidates.some(sku => skusAvail[sku]) ? 'available' : 'out_of_stock';
+            }
         }
-        return this.selectedOptions.some(option => option.is_out && option.option_id !== detail.option_id);
+        this.availabilityMap = map;
+    }
+    isOptionDetailOut(detail) {
+        const status = this.availabilityMap[detail.id];
+        return status !== undefined ? status !== 'available' : (detail.is_out ?? false);
     }
     /**
      * Renders a single input element (radio or checkbox) for an option detail.
@@ -776,10 +818,15 @@ export class SallaProductOptions {
      */
     renderInput(type, detail, option, isRequired, name, buttonStyle) {
         const id = this.generateUniqueKey(`${type}-${option.id}-${detail.id}`);
-        const isDisabled = this.isOptionDetailOut(detail);
+        const isOutOfStock = this.isOptionDetailOut(detail);
         return (h("label", { class: {
-                "s-product-options-disabled": isDisabled,
-            } }, h("input", { id: id, type: type, name: name, value: detail.id, disabled: isDisabled, required: isRequired, checked: detail.is_selected, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("div", { class: { "s-product-options-grid-mode-span": buttonStyle, "s-product-options-disabled": isDisabled } }, this.getOptionDetailName(detail))));
+                "s-product-options-disabled": this.canDisabled && isOutOfStock,
+                "s-product-options-option-stock-out": isOutOfStock,
+            } }, h("input", { id: id, type: type, name: name, value: detail.id, disabled: this.canDisabled && isOutOfStock, required: isRequired, checked: detail.is_selected, onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("div", { class: {
+                "s-product-options-grid-mode-span": buttonStyle,
+                "s-product-options-disabled": this.canDisabled && isOutOfStock,
+                "s-product-options-option-stock-out": isOutOfStock,
+            } }, this.getOptionDetailName(detail))));
     }
     /**
      * Renders a collection of input elements for all details of an option.
@@ -852,15 +899,22 @@ export class SallaProductOptions {
     }
     //@ts-ignore
     colorOption(option) {
-        return (h("fieldset", { class: "s-product-options-colors-wrapper" }, option?.details.map((detail) => (h("div", { class: "s-product-options-colors-item", key: detail.id }, h("input", { type: "radio", value: detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), disabled: this.canDisabled && this.isOptionDetailOut(detail), id: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option), "data-img-id": detail.option_value }), h("label", { htmlFor: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), "data-img-id": detail.option_value }, h("span", { style: { backgroundColor: detail.color } }), h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) })))))));
+        return (h("fieldset", { class: "s-product-options-colors-wrapper" }, option?.details.map((detail) => {
+            const isOutOfStock = this.isOptionDetailOut(detail);
+            return (h("div", { class: {
+                    "s-product-options-colors-item": true,
+                    "s-product-options-option-stock-out": isOutOfStock,
+                }, key: detail.id }, h("input", { type: "radio", value: detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), disabled: this.canDisabled && isOutOfStock, id: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option), "data-img-id": detail.option_value }), h("label", { htmlFor: this.generateUniqueKey(`color-${this.productId}-${option.id}-${detail.id}`), "data-img-id": detail.option_value }, h("span", { style: { backgroundColor: detail.color } }), h("div", { innerHTML: this.getOptionDetailName(detail, true, option.type) }))));
+        })));
     }
     //@ts-ignore
     thumbnailOption(option) {
         return h("div", { class: "s-product-options-thumbnails-wrapper" }, option.details.map((detail) => {
-            return h("div", { key: detail.id }, h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), "data-img-id": detail.option_value, disabled: this.canDisabled && this.isOptionDetailOut(detail), id: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("label", { htmlFor: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), "data-img-id": detail.option_value, class: "go-to-slide" }, h("img", { "data-src": detail.image, src: detail.image, title: detail.name, alt: detail.name }), h("span", { innerHTML: CheckCircleIcon, class: "s-product-options-thumbnails-icon" }), this.isOptionDetailOut(detail) ?
+            const isOutOfStock = this.isOptionDetailOut(detail);
+            return h("div", { key: detail.id, class: { "s-product-options-option-stock-out": isOutOfStock } }, h("input", { type: "radio", value: detail.id, "data-itemid": detail.id, required: !option.visibility_condition && option.required, checked: detail.is_selected, name: this.generateInputName(option.id), "data-img-id": detail.option_value, disabled: this.canDisabled && isOutOfStock, id: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), onInvalid: (e) => this.invalidHandler(e, option), onChange: (e) => this.changedHandler(e, option) }), h("label", { htmlFor: this.generateUniqueKey(`option_${this.productId}-${option.id}_${detail.id}`), "data-img-id": detail.option_value, class: "go-to-slide" }, h("img", { "data-src": detail.image, src: detail.image, title: detail.name, alt: detail.name }), h("span", { innerHTML: CheckCircleIcon, class: "s-product-options-thumbnails-icon" }), isOutOfStock ?
                 [
-                    h("small", { key: detail.id, class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText),
-                    this.canDisabled ? h("div", { key: detail.id, class: "s-product-options-thumbnails-badge-overlay" }) : '',
+                    h("small", { key: `badge-${detail.id}`, class: "s-product-options-thumbnails-stock-badge" }, this.outOfStockText),
+                    this.canDisabled ? h("div", { key: `overlay-${detail.id}`, class: "s-product-options-thumbnails-badge-overlay" }) : '',
                 ]
                 : ''), h("p", null, this.getOptionDetailName(detail, false), " "));
         }));
@@ -875,7 +929,8 @@ export class SallaProductOptions {
     }
     countryOption(option) {
         return h("div", { class: "s-product-options-digital-card-wrapper" }, option.details.map((detail) => {
-            return h("label", { htmlFor: this.generateUniqueKey(detail.id.toString()), key: detail.id, class: { "s-product-options-digital-card-option": true, "s-product-options-digital-card-option-stock-out": detail.is_out } }, h("input", { id: this.generateUniqueKey(detail.id.toString()), type: "radio", class: "s-form-control s-product-options-digital-card-input", value: detail.id, name: this.generateInputName(option.id), disabled: detail.is_out, required: !option.visibility_condition && option.required, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option), onClick: () => { this.disableCardValue = false; }, ...(salla.url.is_page("cart") ? { defaultChecked: this.getSelectedDigitalCardOptions(option)?.id === detail.id } : {}) }), h("img", { loading: "lazy", alt: detail.code, height: 24, width: 24, class: "s-product-options-country-flag", src: `https://cdn.assets.salla.network/prod/admin/cp/assets/flags/1x1/${String(detail.code).toLocaleLowerCase()}.svg`, onError: e => {
+            const isOutOfStock = this.isOptionDetailOut(detail);
+            return h("label", { htmlFor: this.generateUniqueKey(detail.id.toString()), key: detail.id, class: { "s-product-options-digital-card-option": true, "s-product-options-digital-card-option-stock-out": isOutOfStock, "s-product-options-option-stock-out": isOutOfStock } }, h("input", { id: this.generateUniqueKey(detail.id.toString()), type: "radio", class: "s-form-control s-product-options-digital-card-input", value: detail.id, name: this.generateInputName(option.id), disabled: this.canDisabled && isOutOfStock, required: !option.visibility_condition && option.required, onInvalid: (e) => this.invalidHandler(e, option), onChange: e => this.changedHandler(e, option), onClick: () => { this.disableCardValue = false; }, ...(salla.url.is_page("cart") ? { defaultChecked: this.getSelectedDigitalCardOptions(option)?.id === detail.id } : {}) }), h("img", { loading: "lazy", alt: detail.code, height: 24, width: 24, class: "s-product-options-country-flag", src: `https://cdn.assets.salla.network/prod/admin/cp/assets/flags/1x1/${String(detail.code).toLocaleLowerCase()}.svg`, onError: e => {
                     e.currentTarget.onerror = null;
                     e.currentTarget.src =
                         salla.url.cdn('images/globe.svg');
@@ -1027,7 +1082,8 @@ export class SallaProductOptions {
             "disableCardValue": {},
             "availableDigitalCardValues": {},
             "userInitiatedValidation": {},
-            "isCartMode": {}
+            "isCartMode": {},
+            "availabilityMap": {}
         };
     }
     static get events() {