@salla.sa/twilight-components/dist/twilight/p-729d862b.entry.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import{r as t,c as s,h as e,H as i,a as n}from"./p-BQQ2x3w_.js";import{A as o,a as l}from"./p-Vqpj4CWE.js";const a=class{constructor(e){t(this,e),this.optionsSaved=s(this,"optionsSaved"),this.productSelected=s(this,"productSelected"),this.product=null,this.sectionId=null,this.sectionIndex=0,this.productIndex=0,this.selectedOptions={},this.optionsResetTokens={},this.isLoading=!1,this.hasUnsavedChanges=!1,this.validationErrors=[]}generateCacheKey(t,s,e){return`${t||"unknown"}-${s||0}-${e||"unknown"}`}handleProductChange(t){setTimeout((()=>{this.modal&&t&&this.modal.setTitle(t.name||"")}),100),this.validationErrors=[],this.hasUnsavedChanges=!1}async open(){this.modal?(this.isLoading=!0,this.product?.name&&this.modal.setTitle(this.product.name),this.modal.open(),setTimeout((async()=>{this.product?.id&&await this.initializeSelectedOptions(),this.product?.name&&this.modal.setTitle(this.product.name),this.modal.stopLoading(),this.isLoading=!1}),300)):requestAnimationFrame((()=>this.open()))}async close(){this.modal&&this.modal.close()}async refreshOptionsState(){this.selectedOptions={...this.selectedOptions}}componentDidLoad(){this.modalOpenListener=t=>{this.product=t.product,this.sectionId=t.sectionId||null,this.sectionIndex=t.sectionIndex||0,this.productIndex=t.productIndex||0,this.open()},salla.event.on("multiple-bundle-product-modal::open",this.modalOpenListener),this.clearOptionsListener=t=>{t&&t.productId&&this.clearProductOptions(t.productId,t.sectionId,t.productIndex)},salla.event.on("multiple-bundle-product-modal::clear-options",this.clearOptionsListener),this.optionChangeListener=t=>{const s=t.detail||t,{option:e,detail:i}=s,n=e||s.option_id&&this.product?.options?.find((t=>t.id===s.option_id||String(t.id)===String(s.option_id))),o=i||(s.id?s:null);this.product?.id&&n&&this.handleOptionChange(Number(this.product.id),n,o)},salla.event.on("product-options::change",this.optionChangeListener),this.checkboxChangeListener=t=>{const s=t.target;if(s&&"checkbox"===s.type&&s.name&&s.name.includes("bundle[")&&s.name.includes("][id]")){const t=s.name.match(/^bundle\[([^\]]+)\]\[([^\]]+)\]\[id\]$/);if(t&&!s.checked){const[,e,i]=t,n=s.value,o=this.host.closest("form");this.cleanupProductDeselection({sectionId:e,productIndex:parseInt(i,10),productId:n,form:o,uncheckedInput:s})}}},document.addEventListener("change",this.checkboxChangeListener)}disconnectedCallback(){this.checkboxChangeListener&&document.removeEventListener("change",this.checkboxChangeListener),this.optionChangeListener&&salla.event.off("product-options::change",this.optionChangeListener),this.modalOpenListener&&salla.event.off("multiple-bundle-product-modal::open",this.modalOpenListener),this.clearOptionsListener&&salla.event.off("multiple-bundle-product-modal::clear-options",this.clearOptionsListener)}cleanupProductDeselection(t){const{sectionId:s,productIndex:e,productId:i,form:n,uncheckedInput:o}=t;if(this.clearProductOptions(i,s,e),n){const t=`bundle[${s}][${e}]`;Array.from(n.querySelectorAll(`input[name^="${t}"]`)).forEach((s=>{if(s===o)return;const e="hidden"===s.type,n=s.getAttribute("data-product-id")===String(i)&&s.name?.startsWith(t);(e||n)&&s.remove()})),requestAnimationFrame((()=>{const t=new window.Event("change",{bubbles:!0});n.dispatchEvent(t)}))}}generateFormInputName(t,s,e){return`bundle[${t}][${s}][options][${e}]`}async initializeSelectedOptions(){if(!this.product?.id)return;const t=this.product.id,s=this.generateCacheKey(this.sectionId,this.productIndex,t),e=document.querySelector(`salla-product-options[product-id="${t}"]`);if(e)try{const t=await e.getSelectedOptions();t&&t.length>0&&(this.selectedOptions={...this.selectedOptions,[s]:t})}catch(t){console.warn("Could not initialize selected options:",t)}}clearProductOptions(t,s,e){const i={...this.selectedOptions};if(null==s||null==e||Number.isNaN(e)){const s=`-${String(t)}`,e=[];Object.keys(i).forEach((t=>{t.endsWith(s)&&(delete i[t],e.push(t))})),e.forEach((t=>this.bumpOptionsResetToken(t)))}else{const n=this.generateCacheKey(s,e,t);delete i[n],this.bumpOptionsResetToken(n)}this.selectedOptions=i,this.validationErrors=[],this.hasUnsavedChanges=!1}bumpOptionsResetToken(t){t&&(this.optionsResetTokens={...this.optionsResetTokens,[t]:(this.optionsResetTokens[t]||0)+1})}async handleOptionChange(t,s,e){const i=this.generateCacheKey(this.sectionId,this.productIndex,t),n=document.querySelector(`salla-product-options[product-id="${t}"]`);let o=[];if(n)try{o=await n.getSelectedOptions()||[]}catch(t){console.warn("Could not get current selections from component:",t)}if(o.length>0)this.selectedOptions={...this.selectedOptions,[i]:o};else if(this.selectedOptions[i]&&this.selectedOptions[i].length>0){const t=[...this.selectedOptions[i]||[]],n=t.findIndex((t=>t.option_id===s.id));n>-1?e&&null!=e.id?t[n]={...e,option_id:s.id}:t.splice(n,1):e&&null!=e.id&&t.push({...e,option_id:s.id}),this.selectedOptions={...this.selectedOptions,[i]:t}}else e&&null!=e.id&&(this.selectedOptions={...this.selectedOptions,[i]:[{...e,option_id:s.id}]});this.hasUnsavedChanges=!0,this.validationErrors=[]}async validateOptions(){if(!this.product?.options)return!0;const t=[],s=this.product.id,e=this.generateCacheKey(this.sectionId,this.productIndex,s),i=document.querySelector(`salla-product-options[product-id="${s}"]`);let n=[];if(i)try{n=await i.getSelectedOptions()||[];const t=this.selectedOptions[e]||[];(t.length>n.length||0===n.length&&t.length>0)&&(n=t)}catch(t){n=this.selectedOptions[e]||[]}else n=this.selectedOptions[e]||[];return 0===n.length&&t.push(salla.lang.get("pages.products.no_options_selected")),this.product.options.forEach((s=>{s.required&&(n.some((t=>t.option_id==s.id))||t.push(salla.lang.get("pages.products.required_option_missing",{option:s.name})))})),this.validationErrors=t,0===t.length}async onSave(t){t.preventDefault();const s=this.product?.id;if(!s)return;const e=this.generateCacheKey(this.sectionId,this.productIndex,s);if(await new Promise((t=>setTimeout(t,100))),await this.validateOptions()){this.isLoading=!0;try{const t=document.querySelector(`salla-product-options[product-id="${s}"]`);let i=await(t?.getSelectedOptions());if((!i||0===i.length)&&this.selectedOptions[e]?.length>0&&(i=this.selectedOptions[e]),!i||0===i.length)return void(this.isLoading=!1);this.selectedOptions={...this.selectedOptions,[e]:i};const n=this.host.closest("form");if(!n)return void(this.isLoading=!1);const o=`bundle[${this.sectionId}][${this.productIndex}]`;Array.from(n.querySelectorAll(`input[name^="${o}"][type="hidden"]`)).forEach((t=>t.remove())),Array.from(n.querySelectorAll(`[data-product-id="${s}"][name^="${o}"]`)).forEach((t=>t.remove()));const l=`bundle[${this.sectionId}][${this.productIndex}][id]`,a=document.getElementById(l);if(a)a.checked=!0;else{const t=document.createElement("input");t.type="hidden",t.name=`bundle[${this.sectionId}][${this.productIndex}][id]`,t.value=String(s),t.dataset.productId=String(s),n.appendChild(t)}i.forEach((t=>{const e=t.option_id,i=document.createElement("input");i.type="hidden",i.name=this.generateFormInputName(this.sectionId,this.productIndex??0,e),i.value=String(t.id),i.dataset.productId=String(s),n.appendChild(i)}));const d=new window.Event("change",{bubbles:!0});n.dispatchEvent(d),this.optionsSaved.emit({productId:Number(s),selectedOptions:i,sectionId:this.sectionId,productIndex:this.productIndex}),this.sectionId&&this.productSelected.emit({productId:Number(s),sectionId:this.sectionId,product:this.product,fromModal:!0}),salla.notify.success(salla.lang.get("pages.products.options_saved")),this.hasUnsavedChanges=!1,this.validationErrors=[],this.modal.close()}catch(t){salla.notify.error(salla.lang.get("pages.products.options_save_error"))}finally{this.isLoading=!1}}else salla.notify.error(this.validationErrors.join(", "))}getOptionsWithSelectedState(){if(!this.product?.options)return[];const t=this.generateCacheKey(this.sectionId,this.productIndex,this.product.id),s=this.selectedOptions[t]||[];return this.product.options.map((t=>({...t,details:t.details.map((t=>{const e=s.some((s=>s.id===t.id));return{...t,is_selected:e}}))})))}render(){const t=this.product?.id,s=this.getOptionsWithSelectedState(),n=this.generateCacheKey(this.sectionId,this.productIndex,t),o=this.optionsResetTokens[n]||0,l=this.isLoading||s.some((t=>t.details.some((t=>t.is_selected&&!0===t.is_out))));return e(i,{key:"357005ce9302183eeeec3238ebde74b99c5f7d88"},e("salla-modal",{key:"95e4f37061229e8359a269b031942d507a43ea25",isLoading:this.isLoading,ref:t=>this.modal=t,width:"md",centered:!1,id:`s-multiple-bundle-product-options-modal-options-${t}`,class:"s-multiple-bundle-product-options-modal-wrapper"},e("div",{key:"b1525824f938c5af85a9ca043d2acf86e8773e6a",slot:"loading"},e("salla-skeleton",{key:"7e71698646e7ec119afbed2fca9dab79c4fe2991",height:"100%",width:"100%"})),this.product?.images&&this.product?.images.length>0&&e("salla-slider",{key:"cd9042d00b0a237afd8dfe7ad4ed7032e298eb39",id:`details-slider-${this.product?.id}`,type:"thumbs",loop:!1,"auto-height":!0,"listen-to-thumbnails-option":!0,showThumbsControls:!1,controlsOuter:!1,showControls:!1,class:"s-multiple-bundle-product-options-modal-slider",verticalThumbs:!0,thumbsConfig:{centeredSlides:!0,centeredSlidesBounds:!0,slidesPerView:Math.min(5,Math.max(1,this.product?.images.length)),watchOverflow:!0,watchSlidesProgress:!0,direction:"vertical",spaceBetween:10}},e("div",{key:"81773392ee6167f0daf780637e15bef9b7b2f2c7",slot:"items"},this.product?.images&&this.product?.images.map(((t,s)=>e("div",{key:s,class:"swiper-slide"},e("img",{src:t.url,alt:t.alt||`${this.product?.name} - Image ${s+1}`,loading:"lazy",onError:t=>{t.target.style.display="none"}}))))),this.product?.images&&this.product?.images.length>1&&e("div",{key:"2942ab32e0e28e6213b2a1d177e36c84136beaef",slot:"thumbs"},this.product?.images&&this.product?.images.map(((t,s)=>e("div",{key:s,"data-caption":`${this.product?.name} - Image ${s+1}`},e("img",{src:t.url,loading:"eager",class:"s-multiple-bundle-product-options-modal-slider-thumb",title:`${this.product?.name} - ${s+1}`,alt:t.alt||`${this.product?.name} - ${s+1}`,onError:t=>{t.target.style.display="none"}})))))),e("salla-product-options",{options:JSON.stringify(s),key:`${n}-reset-${o}`,"product-id":t,"unique-key":`${n}-reset-${o}`}),e("div",{key:"e3658d39d7462e1ba8c2099625d9a659541f6b2a",slot:"footer"},e("div",{key:"8e03e9230c55b9ac6143e37629946e66daf47835",class:"s-multiple-bundle-product-options-modal-footer"},e("salla-button",{key:"feca5790f828f7b29de3cba4e3a54d772a7a94c5",onClick:t=>this.onSave(t),loading:this.isLoading,disabled:l},this.isLoading?salla.lang.get("common.elements.saving"):salla.lang.get("common.elements.save"))))))}get host(){return n(this)}static get watchers(){return{product:["handleProductChange"]}}};a.style=":host{display:block}";const d=class{constructor(e){t(this,e),this.productSelected=s(this,"productSelected"),this.productOptionsSelected=s(this,"productOptionsSelected"),this.selectedProducts={},this.savedOptionsByInstance={},this.handleProductClick=(t,s)=>{const e=this.generateEventName(this.section.id,s),i=document.getElementById(e);if(i){if(i){const e=!i.checked;e||(this.dispatchClearOptionsEvent(t,s),this.clearSavedOptionsState(this.section.id,s)),i.checked=e,requestAnimationFrame((()=>{const t=new window.Event("change",{bubbles:!0});i.dispatchEvent(t)}))}this.productSelected.emit({product:t,sectionId:this.section.id})}},this.handleOptionsClick=t=>{this.productOptionsSelected.emit({product:t,sectionId:this.section.id})}}getProductInstanceKey(t,s){return`${t}::${s}`}dispatchClearOptionsEvent(t,s){salla.event.dispatch("multiple-bundle-product-modal::clear-options",{productId:t.id,sectionId:this.section.id,sectionIndex:this.sectionIndex,productIndex:s})}handleOptionsSaved(t){const s=t.detail;if(!s)return;const{sectionId:e,productIndex:i,selectedOptions:n}=s;if(null==e||e!==this.section?.id)return;if(null==i||Number.isNaN(i))return;const o=this.getProductInstanceKey(e,i);if(n?.length)this.savedOptionsByInstance={...this.savedOptionsByInstance,[o]:!0};else if(this.savedOptionsByInstance[o]){const t={...this.savedOptionsByInstance};delete t[o],this.savedOptionsByInstance=t}}clearSavedOptionsState(t,s){const e=this.getProductInstanceKey(t,s);if(!this.savedOptionsByInstance[e])return;const i={...this.savedOptionsByInstance};delete i[e],this.savedOptionsByInstance=i}generateEventName(t,s){return`bundle[${t}][${s}][id]`}render(){return e(i,{key:"336a3bcf504a178ee207b40b3b7fac5d26e00f91"},e("salla-slider",{key:"004d1c3f644bfd015efe2ffc21a78e912c5d0647",type:"carousel",controlsOuter:!1,showControls:!1,id:`accordion-multiple-bundle-product-${this.section.id}`,pagination:!0,class:"s-multiple-bundle-product-wrapper-slider",sliderConfig:{spaceBetween:0}},e("div",{key:"fda4544764b9bf2eb95d408179c1abc252f50243",slot:"items"},this?.section?.products?.map(((t,s)=>{const i=this.selectedProducts[this.section.id]?.has(t.id)||!1,n=this.savedOptionsByInstance[this.getProductInstanceKey(this.section.id,s)]?salla.lang.getWithDefault("pages.products.edit_selected_options","تعديل الخيارات"):salla.lang.get("pages.products.choose_from_options");let a=salla.config.get("theme.is_rtl",!0)?o:l;return e("div",{class:"s-multiple-bundle-product-slide-one-third "+(0==t.quantity?"s-multiple-bundle-product-slide-one-third-disabled":""),key:t.id},e("div",{class:"s-multiple-bundle-product-card"},e("div",{class:"s-multiple-bundle-product-image-wrapper",onClick:()=>this.handleProductClick(t,s)},e("input",{id:this.generateEventName(this.section.id,s),type:"checkbox",class:"s-multiple-bundle-product-checkbox",checked:i,name:this.generateEventName(this.section.id,s),value:t.id}),e("img",{src:t.image.url||salla.url.cdn("images/s-empty.png"),loading:"lazy",alt:t.image.alt||t.name,class:"s-multiple-bundle-product-image"})),e("div",{class:"s-multiple-bundle-product-content-wrapper"},e("div",{class:"s-multiple-bundle-product-content"},e("div",{class:"s-multiple-bundle-product-details"},e("div",{class:"s-multiple-bundle-product-title-wrapper"},e("h2",{class:"s-multiple-bundle-product-title"},e("a",{href:t?.url||"#",target:"_blank",rel:"noopener noreferrer"},t.name))),e("div",{class:"s-multiple-bundle-product-price-wrapper"},e("span",{class:"s-multiple-bundle-product-price"},e("span",{innerHTML:salla.money(t.price)})),t.sale_price>0&&e("span",{class:"s-multiple-bundle-product-price-discount"},e("span",{innerHTML:salla.money(t.regular_price)})))),t.quantity_in_group>0&&0!==t.quantity&&e("span",{class:"s-multiple-bundle-product-badge"},salla.lang.get("pages.products.pieces"),e("span",null,t.quantity_in_group)),0===t.quantity&&e("span",{class:"s-multiple-bundle-product-badge"},salla.lang.get("pages.products.quantity_in_group_finished"))),t.options?.length>0&&e("button",{class:"s-multiple-bundle-product-button",onClick:()=>this.handleOptionsClick(t),type:"button"},n,e("span",{class:"s-multiple-bundle-product-button-icon",innerHTML:a})))))})))))}get host(){return n(this)}};d.style="";export{a as salla_multiple_bundle_product_options_modal,d as salla_multiple_bundle_product_slider}