@salla.sa/twilight-components 2.14.393 → 2.14.394

package/dist/components/salla-rating-modal.js

@@ -1,4 +1,533 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as a,proxyCustomElement as s,HTMLElement as t,h as i,Host as e}from"@stencil/core/internal/client";import{W as l}from"./star.js";import{C as n}from"./check-circle2.js";import{H as o}from"./Helper.js";import{I as r}from"./image.js";import{W as d}from"./whatsapp2.js";import{M as h}from"./mail.js";import{a as m}from"./anime.es.js";import{d as c}from"./salla-button2.js";import{d as g}from"./salla-file-upload2.js";import{d as p}from"./salla-loading2.js";import{d as u}from"./salla-modal2.js";import{d as _}from"./salla-placeholder2.js";import{d as w}from"./salla-rating-stars2.js";import{d as v}from"./salla-skeleton2.js";var f='\x3c!-- Generated by IcoMoon.io --\x3e\n<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">\n<title>shipping-fast</title>\n<path d="M10.667 14.667c0-0.737-0.597-1.333-1.333-1.333h-8c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333h8c0.736 0 1.333-0.596 1.333-1.333zM9.333 18.667c-2.941 0-5.333 2.392-5.333 5.333s2.392 5.333 5.333 5.333 5.333-2.392 5.333-5.333-2.392-5.333-5.333-5.333zM9.333 26.667c-1.471 0-2.667-1.196-2.667-2.667s1.196-2.667 2.667-2.667 2.667 1.196 2.667 2.667-1.196 2.667-2.667 2.667zM1.333 10.667h5.333c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333h-5.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333zM31.123 13.103l-3.147-3.935c-1.273-1.589-3.171-2.501-5.205-2.501h-1.437c0-2.205-1.795-4-4-4h-13.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333h13.333c0.735 0 1.333 0.597 1.333 1.333v1.333c0 0.248 0.087 0.468 0.204 0.667-0.117 0.199-0.204 0.419-0.204 0.667v5.333c0 0.737 0.597 1.333 1.333 1.333h9.333v6.667h-1.333c-0.063 0-0.117 0.028-0.179 0.036-0.583-2.313-2.664-4.036-5.155-4.036-2.941 0-5.333 2.392-5.333 5.333s2.392 5.333 5.333 5.333c2.491 0 4.572-1.723 5.155-4.036 0.061 0.008 0.116 0.036 0.179 0.036h2.667c0.736 0 1.333-0.596 1.333-1.333v-8.399c0-0.905-0.311-1.792-0.877-2.499zM21.333 13.333v-4h1.437c1.221 0 2.36 0.547 3.124 1.501l1.997 2.499zM22.667 26.667c-1.471 0-2.667-1.196-2.667-2.667s1.196-2.667 2.667-2.667 2.667 1.196 2.667 2.667-1.196 2.667-2.667 2.667z"></path>\n</svg>\n';const y=s(class extends t{constructor(a){super(),!1!==a&&this.__registerHost(),this.hasError=!1,this.showContactWidget=!0,this.images=[],this.productImages={},this.editItemImages=[],this.contact_body=(a,s,t)=>salla.lang.get("pages.rating.contact_subject",{store:a,id:s,customer:t}),this.editMode=!1,this.defaultMode=!1,this.deleteMode=!1,this.shouldOpenDeleteModal=!1,this.editItem=null,this.dragAndDropFilesLabel=salla.lang.get("common.uploader.drag_and_drop_files"),this.contactSubjectLabel=salla.lang.get("pages.rating.contact_subject"),this.editReviewLabel=salla.lang.get("pages.rating.edit_review"),this.allowedImagesTypesLabel=salla.lang.get("common.uploader.allowed_images_types"),this.addImagesLabel=salla.lang.get("pages.rating.add_images"),this.editImagesLabel=salla.lang.get("pages.rating.edit_images"),this.threeImagesMax=salla.lang.get("common.uploader.max_three_images"),this.areYouSureLabel=salla.lang.get("pages.rating.are_you_sure_you_want_to_delete_review"),this.confirmDeletionLabel=salla.lang.get("pages.rating.confirm_deletion"),this.cancelLabel=salla.lang.get("common.elements.cancel"),this.confirmDeleteBtn=salla.lang.get("common.elements.confirm_delete"),this.updatedSuccessfullyLabel=salla.lang.get("pages.rating.review_updated_successfully"),this.deletedSuccessfullyLabel=salla.lang.get("pages.rating.review_deleted_successfully"),this.contactUsLabel=salla.lang.get("blocks.footer.social"),this.allowAttachImages=salla.config.get("store.settings.rating.allow_attach_images"),this.allowContactSupport=salla.config.get("store.settings.rating.allow_contact_support"),this.contentRefs=[],this.hiddenInputs=[],this.isOpen=[],this.stepsCount=0,this.currentIndex=0,this.submitted=[],this.MAX_UPLOAD_LIMIT=3,this.onOpen=a=>new Promise((s=>{m({targets:this.contentRefs[a],duration:100,height:this.contentRefs[a].scrollHeight,opacity:[0,1],easing:"easeOutQuart",complete:()=>s()})})),this.onClose=a=>new Promise((s=>{m({targets:this.contentRefs[a],duration:100,height:0,opacity:[1,0],easing:"easeOutQuart",complete:()=>s()})})),this.toggleUploader=async a=>{this.isOpen[a]=!this.isOpen[a],o.toggleElementClassIf(this.contentRefs[a],"is-closed","is-opened",(()=>!this.isOpen[a])),await(this.isOpen[a]?this.onOpen(a):this.onClose(a)),await new Promise((a=>setTimeout(a,101))),this.body&&this.currentTab&&setTimeout((()=>this.body.setAttribute("style",`height:${this.currentTab.offsetHeight+(this.editMode?60:0)}px`)))},salla.onReady((()=>{this.orderId=salla.config.get("page.id")})),salla.lang.onLoaded((()=>{this.contactUsLabel=salla.lang.get("blocks.footer.social");const a=(a,s,t)=>new Promise((i=>{salla.helpers.setNested(salla.lang.messages[a],s,t),i(!0)}));(async()=>{await a("ar.trans","common.uploader.drag_and_drop_files","اسحب الملفات وأفلتها هنا"),await a("en.trans","common.uploader.drag_and_drop_files","Drag and drop files here"),await a("ar.trans","common.uploader.allowed_images_types"," .jpg أو jpeg أو png يُسمح بإضافة صور بصيغة"),await a("en.trans","common.uploader.allowed_images_types","Images in jpg, jpeg, or png format are allowed."),await a("ar.trans","pages.rating.add_images","اضافة صور"),await a("en.trans","pages.rating.add_images","Add Images"),await a("ar.trans","pages.rating.edit_images","تعديل الصور"),await a("en.trans","pages.rating.edit_images","Edit Images"),await a("ar.trans","pages.rating.edit_review","تعديل التقييم"),await a("en.trans","pages.rating.edit_review","Edit review"),await a("ar.trans","pages.rating.confirm_deletion","تأكيد حذف التقييم"),await a("en.trans","pages.rating.confirm_deletion","Confirm review deletion"),await a("ar.trans","pages.rating.are_you_sure_you_want_to_delete_review","هل أنت متأكد من حذف تقييمك؟"),await a("en.trans","pages.rating.are_you_sure_you_want_to_delete_review","Are you sure you want to delete your review?"),await a("ar.trans","pages.rating.review_updated_successfully","تم تعديل التقييم بنجاح"),await a("en.trans","pages.rating.review_updated_successfully","The review has been successfully updated."),await a("ar.trans","pages.rating.review_deleted_successfully","تم حذف التقييم بنجاح"),await a("en.trans","pages.rating.review_deleted_successfully","The review has been successfully deleted."),await a("ar.trans","pages.rating.images_count","الصور ( :current من أصل :total )"),await a("en.trans","pages.rating.images_count","Images ( :current of :total )"),await a("ar.trans","common.uploader.max_three_images",`.أضف ${this.MAX_UPLOAD_LIMIT} صور كحد أقصى`),await a("en.trans","common.uploader.max_three_images",`Add up to ${this.MAX_UPLOAD_LIMIT} images maximum.`),await a("ar.trans","common.elements.confirm_delete","تأكيد الحذف"),await a("en.trans","common.elements.confirm_delete","Confirm deletion"),this.dragAndDropFilesLabel=salla.lang.get("common.uploader.drag_and_drop_files"),this.allowedImagesTypesLabel=salla.lang.get("common.uploader.allowed_images_types"),this.addImagesLabel=salla.lang.get("pages.rating.add_images"),this.threeImagesMax=salla.lang.get("common.uploader.max_three_images"),this.contactSubjectLabel=salla.lang.get("pages.rating.contact_subject"),this.editReviewLabel=salla.lang.get("pages.rating.edit_review"),this.editImagesLabel=salla.lang.get("pages.rating.edit_images"),this.areYouSureLabel=salla.lang.get("pages.rating.are_you_sure_you_want_to_delete_review"),this.confirmDeletionLabel=salla.lang.get("pages.rating.confirm_deletion"),this.cancelLabel=salla.lang.get("common.elements.cancel"),this.updatedSuccessfullyLabel=salla.lang.get("pages.rating.review_updated_successfully"),this.deletedSuccessfullyLabel=salla.lang.get("pages.rating.review_deleted_successfully"),this.confirmDeleteBtn=salla.lang.get("common.elements.confirm_delete"),this.contact_body=(a,s,t)=>salla.lang.get("pages.rating.contact_body",{store:a,id:s,customer:t})})()}))}async open(){return this.defaultMode=!0,new Promise((a=>{setTimeout((()=>{this.modal.open().then((()=>this.order||salla.api.withoutNotifier((()=>salla.rating.api.order(this.orderId?this.orderId:salla.config.get("page.id")))).then((a=>this.order=a.data)))).then((()=>this.modal.setTitle(`${salla.lang.get("pages.rating.rate_order")} <span class="unicode">(#${this.order.id})</span>`))).then((()=>{const a={};if(this.order?.products)for(const s of this.order.products)a[s.product.id]=[];this.productImages=a})).then((()=>this.modal.stopLoading())).then((()=>this.stepsCount=[this.order.testimonials_enabled,this.order.products_enabled,this.order.shipping_enabled].filter((a=>a)).length)).then((()=>setTimeout((()=>this.handleWizard()),100))).catch((s=>{a(!1),this.hasError=!0,this.errorMessage=s.response?.data?.error?.message||s.response?.data,this.modal.stopLoading()})),a(!0)}),50)}))}async openEditModal(a){this.defaultMode=!1,this.editMode=!0,this.editType=a.type,this.editFeedbackId=a.feedback_id;try{await this.fetchEditItem(a.feedback_id),this.editModal.open()}catch(a){this.hasError=!0,this.errorMessage=a.response?.data?.error?.message||a.response?.data}}async fetchEditItem(a){const s=`rating/${a}/show`,t=await salla.api.request(s);this.editItem=t.data,this.allowAttachImages&&"product"==this.editType&&this.editItem.images.length&&(this.editItemImages=this.editItem.images.map((a=>({id:""+Math.floor(100+900*Math.random()),url:a}))))}async editReview(){const a={};this.editModal.querySelectorAll("[name]").forEach((s=>{const t=salla.helpers.inputData(s.name,s.value,a);a[t.name]=t.value})),a.images&&(a.images=a.images.split(","));const s="rating/"+this.editFeedbackId;await salla.api.request(s,a,"put").then((a=>{this.editModal.close(),salla.notify.success(a.message||this.updatedSuccessfullyLabel),setTimeout((()=>{window.location.reload()}),500)}))}async openDeleteModal(a){return this.defaultMode=!1,this.deleteMode=!0,this.deleteFeedbackId=a.feedback_id,this.shouldOpenDeleteModal=!0,new Promise((a=>{setTimeout((()=>{this.deleteModal.open().then((()=>a(!0)))}),50)}))}async deleteReview(){const a="rating/"+this.deleteFeedbackId;await salla.api.request(a,null,"delete").then((()=>{this.deleteModal.close(),salla.notify.success(this.deletedSuccessfullyLabel),setTimeout((()=>{window.location.reload()}),500)}))}async close(){return this.modal.close()}handleWizard(){this.steps=this.modal.querySelectorAll(".s-rating-modal-step"),this.dots=this.modal.querySelectorAll(".s-rating-modal-step-dot"),this.showActiveStep()}showActiveStep(a=null){this.currentTab=a||this.steps[this.currentIndex],o.toggleClassIf(".s-rating-modal-step-dot","s-rating-modal-bg-gray","s-rating-modal-bg-primary",(a=>a!=this.dots[this.currentIndex])).toggleClassIf(".s-rating-modal-step","s-rating-modal-active","s-rating-modal-hidden",(a=>a==this.currentTab)),0!==this.currentIndex&&(o.toggleElementClassIf(this.currentTab,"s-rating-modal-unactive","s-rating-modal-hidden",(()=>!0)),setTimeout((()=>o.toggleElementClassIf(this.currentTab,"s-rating-modal-active","s-rating-modal-unactive",(()=>!0))),300));const s=this.steps[this.currentIndex+1]?.dataset.type;this.nextBtn?.setText(s?`${salla.lang.get("pages.rating.rate")} ${salla.lang.get("pages.rating."+s)}`:salla.lang.get("pages.rating.send_ratings")),setTimeout((()=>this.body?.setAttribute("style",`height:${this.currentTab?.offsetHeight}px`)))}previousTab(){this.currentIndex>0&&this.currentIndex--,o.toggleElementClassIf(this.backBtn,"s-rating-modal-unvisiable","block",(()=>0==this.currentIndex)),this.showActiveStep()}submit(){this.submittedBefore()||this.validate(),salla.config.canLeave=!1,this.nextBtn.load().then((()=>this.submittedBefore()||this.sendFeedback())).then((()=>this.currentTab.querySelectorAll("[name],.s-rating-modal-btn-star").forEach((a=>a.setAttribute("disabled",""))))).then((()=>this.currentIndex<this.stepsCount&&this.currentIndex++)).then((()=>this.showActiveStep())).then((()=>o.toggleClassIf("#prev-btn","block","s-rating-modal-unvisiable",(()=>!0)))).finally((()=>{this.nextBtn.stop(),salla.config.canLeave=!0,this.currentIndex==this.stepsCount&&(this.showThankYou(),this.showContactWidget=!1)}))}submittedBefore(){return this.submitted.includes(this.currentIndex)}validate(a=null,s=null){if(!a&&"products"===this.currentTab.dataset.type)return void this.currentTab.querySelectorAll(".rating-outer-form").forEach((a=>this.validate(a,"product")));const t=(a=a||this.currentTab).querySelector(".rating_hidden_input").value,i=a.querySelector(".s-rating-modal-validation-msg");if(s=s||a.dataset.type,!t)throw i.innerHTML=salla.lang.get(`pages.rating.rate_${s}_stars`).replace(" (:item)",""),Error(i.innerHTML);i.innerHTML=""}sendFeedback(){const a={};if(this.currentTab.querySelectorAll("[name]").forEach((s=>{const t=salla.helpers.inputData(s.name,s.value,a);a[t.name]=t.value})),this.allowAttachImages&&a.products)for(let s in a.products)a.products[s].images&&(a.products[s].images=a.products[s].images.split(","));if(0!=Object.keys(a).length)return a.order_id=this.orderId,a.type=this.currentTab.dataset.type,salla.rating.api[this.currentTab.dataset.type](a).then((a=>(this.submitted.push(this.currentIndex),a)))}showThankYou(){let a=10,s=setInterval((()=>{this.thanksTime.innerHTML="00:0"+a--,a>0||(clearInterval(s),this.thanksTime.remove(),this.close().then((()=>window.location.reload())))}),1e3);this.modal.querySelector(".s-rating-modal-footer").classList.add("s-rating-modal-unvisiable"),this.showActiveStep(this.thanksTab)}getFilepondPlaceholder(){return`<div class="s-rating-modal-filepond-placeholder"><span class="s-rating-modal-filepond-placeholder-icon">${r}</span><p class="s-rating-modal-filepond-placeholder-text">${this.dragAndDropFilesLabel}<br>\n    <span> ${this.allowedImagesTypesLabel} <br> ${this.threeImagesMax} </span></p></div>`}getCustomerName(){return`${salla.config.get("user.first_name")||salla.storage.get("user.first_name")||""} ${salla.config.get("user.last_name")||salla.storage.get("user.last_name")||""}`}handleSendEmail(){const a=`${this.contactSubjectLabel} #${this.order.id}`,s=this.contact_body(salla.config.get("store.name"),this.order.id,this.getCustomerName()),t=`mailto:${salla.config.get("store.contacts.email")}?subject=${encodeURIComponent(a)}&body=${encodeURIComponent(s)}`;window.open(t,"_blank")}handleSendWhatsApp(){const a=this.contact_body(salla.config.get("store.name"),this.order.id,this.getCustomerName()),s=`https://wa.me/${salla.config.get("store.contacts.whatsapp")}?text=${encodeURIComponent(a)}`;window.open(s,"_blank")}resetData(a){a.detail||(this.modal?.close(),this.editItem=null,this.editItemImages=[],this.hiddenInputs[1]&&(this.hiddenInputs[1].value=""),this.deleteFeedbackId=null,this.editFeedbackId=null,this.shouldOpenDeleteModal=!1,this.editMode=!1,this.deleteMode=!1,this.defaultMode=!1)}getDeleteModal(){return i("salla-modal",{ref:a=>this.deleteModal=a,width:"xs",onModalVisibilityChanged:a=>this.resetData(a)},i("div",{class:"s-rating-modal-delete-wrapper",ref:a=>this.body=a},i("h3",null,this.confirmDeletionLabel),i("p",null,this.areYouSureLabel),i("div",{class:"s-rating-modal-delete-actions"},i("salla-button",{loaderPosition:"center",onClick:()=>this.deleteReview()},this.confirmDeleteBtn),i("salla-button",{color:"danger",fill:"outline",onClick:()=>this.deleteModal.close()},this.cancelLabel))))}renderUploadedImagesCount(a){const s=this.editMode?this.editItemImages.length:(this.productImages[a]||[]).length;return i("span",{class:"s-rating-modal-upload-count"},salla.lang.choice("pages.rating.images_count",s,{current:s,total:this.MAX_UPLOAD_LIMIT}))}getEditModal(){return i("salla-modal",{ref:a=>this.editModal=a,width:"md",onModalVisibilityChanged:a=>this.resetData(a)},i("div",{class:"s-rating-modal-edit-wrapper",ref:a=>this.body=a},"store"===this.editType&&this.editItem?i("div",{class:"rating-outer-form s-rating-modal-step-wrap s-rating-modal-step","data-type":"store",ref:a=>this.currentTab=a},i("div",{class:"s-rating-modal-rounded-icon"},i("img",{src:salla.config.get("store.logo","https://assets.salla.sa/cp/assets/images/logo-new.png"),alt:"store name",class:"s-rating-modal-store-logo"})),i("h2",{class:"s-rating-modal-title"},salla.lang.get("pages.rating.rate_the_store")),i("div",{class:"s-rating-modal-stars-company"},i("salla-rating-stars",{withLabel:!0,size:"large",editable:!0,value:this.editItem.stars})),i("textarea",{name:"content",value:this.editItem.content,class:"s-rating-modal-comment",placeholder:salla.lang.get("pages.rating.write_store_rate")}),i("small",{class:"s-rating-modal-validation-msg"})):null,"shipping"===this.editType&&this.editItem?i("div",{class:"rating-outer-form s-rating-modal-step-wrap s-rating-modal-step","data-type":"shipping",ref:a=>this.currentTab=a},this.editItem.shipping.logo?i("div",{class:"s-rating-modal-rounded-icon"},i("img",{src:this.editItem.shipping.logo,class:"s-rating-modal-shipping-logo",alt:this.editItem.shipping.name})):i("span",{class:"s-rating-modal-icon",innerHTML:f}),i("div",{class:"s-rating-modal-title"}," ",`${salla.lang.get("pages.rating.rate_shipping")} ${this.editItem.shipping.name}`),i("div",{class:"s-rating-modal-stars-company"},i("salla-rating-stars",{withLabel:!0,size:"large",editable:!0,value:this.editItem.stars})),i("textarea",{name:"content",class:"s-rating-modal-comment",value:this.editItem.content,placeholder:salla.lang.get("pages.rating.write_shipping_rate")}),i("small",{class:"s-rating-modal-validation-msg"})):null,"product"==this.editType&&this.editItem?i("section",{class:"s-rating-modal-step","data-type":"products",ref:a=>this.currentTab=a},i("div",{class:"s-rating-modal-product"},i("div",{class:"rating-outer-form","data-stars-error":salla.lang.get("pages.rating.rate_product_stars")},i("div",{class:"s-rating-modal-product-img-wrap"},i("img",{src:this.editItem.product.image.url,alt:this.editItem.product.name,class:"s-rating-modal-product-img"})),i("div",{class:"s-rating-modal-product-details"},i("div",{class:"s-rating-modal-product-details-main"},i("div",null,i("h3",{class:"s-rating-modal-product-title"}," ",this.editItem.product.name),i("div",{class:"s-rating-modal-stars-product"},i("salla-rating-stars",{withLabel:!0,size:"small",editable:!0,value:this.editItem.stars}))),this.allowAttachImages&&i("salla-button",{class:"s-comments-item-like-btn mt-0",loaderPosition:"center",fill:"outline",size:"small",onClick:()=>this.toggleUploader(1)},i("span",null,this.editItemImages.length?this.editImagesLabel:this.addImagesLabel),i("span",{innerHTML:r}))),i("textarea",{value:this.editItem.content,placeholder:salla.lang.get("pages.rating.write_product_rate"),name:"content",class:"s-rating-modal-comment"}),i("small",{class:"s-rating-modal-validation-msg"}))),this.allowAttachImages&&i("div",{class:"s-rating-modal-uploader is-closed",ref:a=>this.contentRefs[1]=a},i("salla-file-upload",{name:"images",allowMultiple:!0,maxFilesCount:this.MAX_UPLOAD_LIMIT,imagePreviewHeight:117,filePosterHeight:117,"instant-upload":!0,type:"feedback",files:JSON.stringify(this.editItemImages),payloadName:"files[]",id:"file-"+this.editItem.product.id,title:this.editItem.product.name,instantUpload:!0,accept:"image/png, image/jpeg, image/jpg",url:salla.url.api("upload"),onUploaded:a=>{this.editItemImages=[...this.editItemImages,a.detail],this.hiddenInputs[1].value=this.editItemImages.map((a=>a.url)).join()},onRemoved:a=>{const s=a.detail;s&&(this.editItemImages=this.editItemImages.filter((a=>a.id!==s)),this.hiddenInputs[1].value=this.editItemImages.map((a=>a.url)).join())},labelIdle:this.getFilepondPlaceholder()}),i("input",{type:"hidden",name:"images",value:this.editItem.images.join(","),ref:a=>this.hiddenInputs[1]=a}),this.renderUploadedImagesCount(this.editItem.product.id)))):null,i("div",{class:"s-rating-modal-footer s-rating-modal-footer-end"},i("salla-button",{"loader-position":"center",onClick:()=>this.editReview()},this.editReviewLabel))))}render(){return this.deleteMode?i(e,{class:"s-rating-modal"},this.getDeleteModal()):this.editMode?i(e,{class:"s-rating-modal"},this.getEditModal()):this.defaultMode?i(e,{class:"s-rating-modal"},i("salla-modal",{class:"s-rating-modal-wrap",onModalVisibilityChanged:a=>this.resetData(a),isLoading:!0,width:"md",ref:a=>this.modal=a},i("div",{slot:"loading"},i("div",{class:"s-rating-modal-skeleton"},i("salla-skeleton",{type:"circle",height:"80px",width:"80px"}),i("salla-skeleton",{height:"15px",width:"60%"}),i("salla-skeleton",{height:"10px",width:"30%"}),i("div",{class:"s-rating-modal-skeleton-stars"},[...[,,,,,]].map((a=>i("div",{key:a,innerHTML:l})))),i("salla-skeleton",{height:"100px",width:"100%"}),i("div",{class:"s-rating-modal-skeleton-footer"},i("salla-skeleton",{height:"40px",width:"30%"})))),!this.hasError&&this.order?[i("div",{class:"s-rating-modal-wrapper",ref:a=>this.body=a},this.order?.testimonials_enabled?i("div",{class:"rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden","data-type":"store"},i("div",{class:"s-rating-modal-rounded-icon"},i("img",{src:salla.config.get("store.logo","https://assets.salla.sa/cp/assets/images/logo-new.png"),alt:"store name",class:"s-rating-modal-store-logo"})),i("h2",{class:"s-rating-modal-title"},salla.lang.get("pages.rating.rate_the_store")),i("div",{class:"s-rating-modal-stars-company"},i("salla-rating-stars",{withLabel:!0,size:"large"})),i("textarea",{name:"comment",class:"s-rating-modal-comment",placeholder:salla.lang.get("pages.rating.write_store_rate")}),i("small",{class:"s-rating-modal-validation-msg"})):"",this.order.products_enabled?i("section",{class:"s-rating-modal-step s-rating-modal-hidden","data-type":"products"},this.order.products.map(((a,s)=>i("div",{class:"s-rating-modal-product",key:s},i("div",{class:"rating-outer-form","data-stars-error":salla.lang.get("pages.rating.rate_product_stars")},i("div",{class:"s-rating-modal-product-img-wrap"},i("img",{src:a.product.thumbnail,alt:a.product.name,class:"s-rating-modal-product-img"})),i("div",{class:"s-rating-modal-product-details"},i("div",{class:"s-rating-modal-product-details-main"},i("div",null,i("h3",{class:"s-rating-modal-product-title"}," ",a.product.name),i("div",{class:"s-rating-modal-stars-product"},i("salla-rating-stars",{withLabel:!0,size:"small",name:`products[${s}][rating]`}))),this.allowAttachImages&&i("salla-button",{class:"s-comments-item-like-btn mt-0",loaderPosition:"center",fill:"outline",size:"small",onClick:()=>this.toggleUploader(s)},i("span",null,this.addImagesLabel),i("span",{innerHTML:r}))),i("input",{type:"hidden",name:`products[${s}][product_id]`,value:a.product.id}),i("textarea",{placeholder:salla.lang.get("pages.rating.write_product_rate"),name:`products[${s}][comment]`,class:"s-rating-modal-comment"}),i("small",{class:"s-rating-modal-validation-msg"}))),this.allowAttachImages&&i("div",{class:"s-rating-modal-uploader is-closed",ref:a=>this.contentRefs[s]=a},i("salla-file-upload",{name:"image",maxFilesCount:this.MAX_UPLOAD_LIMIT,imagePreviewHeight:117,"instant-upload":!0,type:"feedback",payloadName:"files[]",id:"file-"+a.product.id,title:a.product.name,allowMultiple:!0,instantUpload:!0,accept:"image/png, image/jpeg, image/jpg",url:salla.url.api("upload"),onUploaded:t=>{this.productImages={...this.productImages,[a.product.id]:[...this.productImages[a.product.id]||[],t.detail]},this.hiddenInputs[s].value=this.productImages[a.product.id].map((a=>a.url)).join(",")},onRemoved:t=>{const i=t.detail;i&&this.productImages[a.product.id]&&(this.productImages={...this.productImages,[a.product.id]:this.productImages[a.product.id].filter((a=>a.id!==i))},this.hiddenInputs[s].value=this.productImages[a.product.id].map((a=>a.url)).join(","))},labelIdle:this.getFilepondPlaceholder()}),i("input",{type:"hidden",name:`products[${s}][images]`,value:(this.productImages[a.product.id]||[]).map((a=>a.url)).join(","),ref:a=>this.hiddenInputs[s]=a}),this.renderUploadedImagesCount(a.product.id)))))):"",this.order.shipping_enabled&&this.order.shipping?.company?i("div",{class:"rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden","data-type":"shipping"},i("input",{type:"hidden",name:"shipping_company_id",value:this.order.shipping.company.id}),this.order.shipping.company.logo?i("div",{class:"s-rating-modal-rounded-icon"},i("img",{src:this.order.shipping.company.logo,class:"s-rating-modal-shipping-logo",alt:this.order.shipping.company.name})):i("span",{class:"s-rating-modal-icon",innerHTML:f}),i("div",{class:"s-rating-modal-title"}," ",`${salla.lang.get("pages.rating.rate_shipping")} ${this.order.shipping.company.name}`),i("div",{class:"s-rating-modal-stars-company"},i("salla-rating-stars",{withLabel:!0,size:"large"})),i("textarea",{name:"comment",class:"s-rating-modal-comment",placeholder:salla.lang.get("pages.rating.write_shipping_rate")}),i("small",{class:"s-rating-modal-validation-msg"})):"",i("div",{class:"s-rating-modal-thanks s-rating-modal-hidden",ref:a=>this.thanksTab=a},i("span",{class:"s-rating-modal-icon",innerHTML:n}),i("h3",{class:"s-rating-modal-thanks-title"},salla.lang.get("pages.rating.thanks")),i("div",{class:"s-rating-modal-thanks-msg",innerHTML:this.order.thanks_message}),i("time",{class:"s-rating-modal-thanks-time",ref:a=>this.thanksTime=a}))),this.allowContactSupport&&this.showContactWidget&&(salla.config.get("store.contacts.whatsapp")||salla.config.get("store.contacts.email"))?i("div",{class:"s-rating-modal-contact"},i("p",null,this.contactUsLabel),i("div",{class:"s-rating-modal-contact-icons"},salla.config.get("store.contacts.whatsapp")&&i("span",{onClick:()=>this.handleSendWhatsApp(),innerHTML:d}),salla.config.get("store.contacts.email")&&i("span",{onClick:()=>this.handleSendEmail(),innerHTML:h}))):"",i("div",{class:"s-rating-modal-footer"},i("button",{ref:a=>this.backBtn=a,onClick:()=>this.previousTab(),class:"s-rating-modal-btn s-rating-modal-unvisiable"},salla.lang.get("common.elements.back")),this.stepsCount>1?i("ul",{class:"s-rating-modal-dots"},[0,1,2].slice(0,this.stepsCount).map((a=>i("li",{key:a,class:"s-rating-modal-bg-gray s-rating-modal-step-dot"})))):"",i("salla-button",{"loader-position":"center",ref:a=>this.nextBtn=a,onClick:()=>this.submit()},salla.lang.get("common.elements.next")))]:i("salla-placeholder",{alignment:"center"}))):void 0}componentWillLoad(){salla.event.on("rating::open",(()=>this.open())),salla.event.on("rating::edit",(a=>this.openEditModal(a))),salla.event.on("rating::delete",(a=>this.openDeleteModal(a)))}componentDidLoad(){salla.event.dispatch("rating::ready",this)}get host(){return this}static get style(){return""}},[0,"salla-rating-modal",{orderId:[2,"order-id"],order:[32],hasError:[32],showContactWidget:[32],errorMessage:[32],images:[32],productImages:[32],editItemImages:[32],contact_body:[32],editMode:[32],defaultMode:[32],deleteMode:[32],shouldOpenDeleteModal:[32],editType:[32],editFeedbackId:[32],deleteFeedbackId:[32],editItem:[32],open:[64],close:[64]}]);function b(){"undefined"!=typeof customElements&&["salla-rating-modal","salla-button","salla-file-upload","salla-loading","salla-modal","salla-placeholder","salla-rating-stars","salla-skeleton"].forEach((s=>{switch(s){case"salla-rating-modal":customElements.get(a(s))||customElements.define(a(s),y);break;case"salla-button":customElements.get(a(s))||c();break;case"salla-file-upload":customElements.get(a(s))||g();break;case"salla-loading":customElements.get(a(s))||p();break;case"salla-modal":customElements.get(a(s))||u();break;case"salla-placeholder":customElements.get(a(s))||_();break;case"salla-rating-stars":customElements.get(a(s))||w();break;case"salla-skeleton":customElements.get(a(s))||v()}}))}b();const k=y,M=b;export{k as SallaRatingModal,M as defineCustomElement}
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { W as WishListIcon } from './star.js';
+import { C as CheckCircle2 } from './check-circle2.js';
+import { H as Helper } from './Helper.js';
+import { I as ImageIcon } from './image.js';
+import { W as WhatsappIcon } from './whatsapp2.js';
+import { M as MailIcon } from './mail.js';
+import { a as anime } from './anime.es.js';
+import { d as defineCustomElement$8 } from './salla-button2.js';
+import { d as defineCustomElement$7 } from './salla-file-upload2.js';
+import { d as defineCustomElement$6 } from './salla-loading2.js';
+import { d as defineCustomElement$5 } from './salla-modal2.js';
+import { d as defineCustomElement$4 } from './salla-placeholder2.js';
+import { d as defineCustomElement$3 } from './salla-rating-stars2.js';
+import { d as defineCustomElement$2 } from './salla-skeleton2.js';
+
+var ShippingFast = `<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+<title>shipping-fast</title>
+<path d="M10.667 14.667c0-0.737-0.597-1.333-1.333-1.333h-8c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333h8c0.736 0 1.333-0.596 1.333-1.333zM9.333 18.667c-2.941 0-5.333 2.392-5.333 5.333s2.392 5.333 5.333 5.333 5.333-2.392 5.333-5.333-2.392-5.333-5.333-5.333zM9.333 26.667c-1.471 0-2.667-1.196-2.667-2.667s1.196-2.667 2.667-2.667 2.667 1.196 2.667 2.667-1.196 2.667-2.667 2.667zM1.333 10.667h5.333c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333h-5.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333zM31.123 13.103l-3.147-3.935c-1.273-1.589-3.171-2.501-5.205-2.501h-1.437c0-2.205-1.795-4-4-4h-13.333c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333h13.333c0.735 0 1.333 0.597 1.333 1.333v1.333c0 0.248 0.087 0.468 0.204 0.667-0.117 0.199-0.204 0.419-0.204 0.667v5.333c0 0.737 0.597 1.333 1.333 1.333h9.333v6.667h-1.333c-0.063 0-0.117 0.028-0.179 0.036-0.583-2.313-2.664-4.036-5.155-4.036-2.941 0-5.333 2.392-5.333 5.333s2.392 5.333 5.333 5.333c2.491 0 4.572-1.723 5.155-4.036 0.061 0.008 0.116 0.036 0.179 0.036h2.667c0.736 0 1.333-0.596 1.333-1.333v-8.399c0-0.905-0.311-1.792-0.877-2.499zM21.333 13.333v-4h1.437c1.221 0 2.36 0.547 3.124 1.501l1.997 2.499zM22.667 26.667c-1.471 0-2.667-1.196-2.667-2.667s1.196-2.667 2.667-2.667 2.667 1.196 2.667 2.667-1.196 2.667-2.667 2.667z"></path>
+</svg>
+`;
+
+const sallaRatingModalCss = "";
+
+const SallaRatingModal$1 = /*@__PURE__*/ proxyCustomElement(class SallaRatingModal extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.hasError = false;
+        this.showContactWidget = true;
+        this.images = [];
+        this.productImages = {};
+        this.editItemImages = [];
+        this.contact_body = (store, id, customer) => salla.lang.get('pages.rating.contact_subject', { store, id, customer });
+        this.editMode = false;
+        this.defaultMode = false;
+        this.deleteMode = false;
+        this.shouldOpenDeleteModal = false;
+        this.editItem = null;
+        this.dragAndDropFilesLabel = salla.lang.get('common.uploader.drag_and_drop_files');
+        this.contactSubjectLabel = salla.lang.get('pages.rating.contact_subject');
+        this.editReviewLabel = salla.lang.get('pages.rating.edit_review');
+        this.allowedImagesTypesLabel = salla.lang.get('common.uploader.allowed_images_types');
+        this.addImagesLabel = salla.lang.get('pages.rating.add_images');
+        this.editImagesLabel = salla.lang.get('pages.rating.edit_images');
+        this.threeImagesMax = salla.lang.get('common.uploader.max_three_images');
+        this.areYouSureLabel = salla.lang.get('pages.rating.are_you_sure_you_want_to_delete_review');
+        this.confirmDeletionLabel = salla.lang.get('pages.rating.confirm_deletion');
+        this.cancelLabel = salla.lang.get('common.elements.cancel');
+        this.confirmDeleteBtn = salla.lang.get('common.elements.confirm_delete');
+        this.updatedSuccessfullyLabel = salla.lang.get("pages.rating.review_updated_successfully");
+        this.deletedSuccessfullyLabel = salla.lang.get("pages.rating.review_deleted_successfully");
+        this.contactUsLabel = salla.lang.get('blocks.footer.social');
+        this.allowAttachImages = salla.config.get('store.settings.rating.allow_attach_images');
+        this.allowContactSupport = salla.config.get('store.settings.rating.allow_contact_support');
+        this.contentRefs = [];
+        this.hiddenInputs = [];
+        this.isOpen = [];
+        this.stepsCount = 0;
+        this.currentIndex = 0;
+        this.submitted = [];
+        this.MAX_UPLOAD_LIMIT = 3;
+        this.onOpen = (index) => {
+            return new Promise((resolve) => {
+                anime({
+                    targets: this.contentRefs[index],
+                    duration: 100,
+                    height: this.contentRefs[index].scrollHeight,
+                    opacity: [0, 1],
+                    easing: 'easeOutQuart',
+                    complete: () => resolve(),
+                });
+            });
+        };
+        this.onClose = (index) => {
+            return new Promise((resolve) => {
+                anime({
+                    targets: this.contentRefs[index],
+                    duration: 100,
+                    height: 0,
+                    opacity: [1, 0],
+                    easing: 'easeOutQuart',
+                    complete: () => resolve(),
+                });
+            });
+        };
+        this.toggleUploader = async (index) => {
+            this.isOpen[index] = !this.isOpen[index];
+            Helper.toggleElementClassIf(this.contentRefs[index], 'is-closed', 'is-opened', () => !this.isOpen[index]);
+            await (this.isOpen[index] ? this.onOpen(index) : this.onClose(index));
+            await new Promise((resolve) => setTimeout(resolve, 101));
+            if (this.body && this.currentTab) {
+                setTimeout(() => this.body.setAttribute('style', `height:${this.currentTab.offsetHeight + (this.editMode ? 60 : 0)}px`));
+            }
+        };
+        salla.onReady(() => {
+            this.orderId = salla.config.get('page.id');
+        });
+        salla.lang.onLoaded(() => {
+            this.contactUsLabel = salla.lang.get('blocks.footer.social');
+            const setNestedAsync = (lang, key, value) => {
+                return new Promise((resolve) => {
+                    salla.helpers.setNested(salla.lang.messages[lang], key, value);
+                    resolve(true);
+                });
+            };
+            const setTranslations = async () => {
+                await setNestedAsync('ar.trans', 'common.uploader.drag_and_drop_files', 'اسحب الملفات وأفلتها هنا');
+                await setNestedAsync('en.trans', 'common.uploader.drag_and_drop_files', 'Drag and drop files here');
+                await setNestedAsync('ar.trans', 'common.uploader.allowed_images_types', ' .jpg أو jpeg أو png يُسمح بإضافة صور بصيغة');
+                await setNestedAsync('en.trans', 'common.uploader.allowed_images_types', 'Images in jpg, jpeg, or png format are allowed.');
+                await setNestedAsync('ar.trans', 'pages.rating.add_images', 'اضافة صور');
+                await setNestedAsync('en.trans', 'pages.rating.add_images', 'Add Images');
+                await setNestedAsync('ar.trans', 'pages.rating.edit_images', 'تعديل الصور');
+                await setNestedAsync('en.trans', 'pages.rating.edit_images', 'Edit Images');
+                await setNestedAsync('ar.trans', 'pages.rating.edit_review', 'تعديل التقييم');
+                await setNestedAsync('en.trans', 'pages.rating.edit_review', 'Edit review');
+                await setNestedAsync('ar.trans', 'pages.rating.confirm_deletion', 'تأكيد حذف التقييم');
+                await setNestedAsync('en.trans', 'pages.rating.confirm_deletion', 'Confirm review deletion');
+                await setNestedAsync('ar.trans', 'pages.rating.are_you_sure_you_want_to_delete_review', 'هل أنت متأكد من حذف تقييمك؟');
+                await setNestedAsync('en.trans', 'pages.rating.are_you_sure_you_want_to_delete_review', 'Are you sure you want to delete your review?');
+                await setNestedAsync('ar.trans', 'pages.rating.review_updated_successfully', 'تم تعديل التقييم بنجاح');
+                await setNestedAsync('en.trans', 'pages.rating.review_updated_successfully', 'The review has been successfully updated.');
+                await setNestedAsync('ar.trans', 'pages.rating.review_deleted_successfully', 'تم حذف التقييم بنجاح');
+                await setNestedAsync('en.trans', 'pages.rating.review_deleted_successfully', 'The review has been successfully deleted.');
+                await setNestedAsync('ar.trans', 'pages.rating.images_count', 'الصور ( :current من أصل :total )');
+                await setNestedAsync('en.trans', 'pages.rating.images_count', 'Images ( :current of :total )');
+                await setNestedAsync('ar.trans', 'common.uploader.max_three_images', `.أضف ${this.MAX_UPLOAD_LIMIT} صور كحد أقصى`);
+                await setNestedAsync('en.trans', 'common.uploader.max_three_images', `Add up to ${this.MAX_UPLOAD_LIMIT} images maximum.`);
+                await setNestedAsync('ar.trans', 'common.elements.confirm_delete', 'تأكيد الحذف');
+                await setNestedAsync('en.trans', 'common.elements.confirm_delete', 'Confirm deletion');
+                this.dragAndDropFilesLabel = salla.lang.get('common.uploader.drag_and_drop_files');
+                this.allowedImagesTypesLabel = salla.lang.get('common.uploader.allowed_images_types');
+                this.addImagesLabel = salla.lang.get('pages.rating.add_images');
+                this.threeImagesMax = salla.lang.get('common.uploader.max_three_images');
+                this.contactSubjectLabel = salla.lang.get('pages.rating.contact_subject');
+                this.editReviewLabel = salla.lang.get('pages.rating.edit_review');
+                this.editImagesLabel = salla.lang.get('pages.rating.edit_images');
+                this.areYouSureLabel = salla.lang.get('pages.rating.are_you_sure_you_want_to_delete_review');
+                this.confirmDeletionLabel = salla.lang.get('pages.rating.confirm_deletion');
+                this.cancelLabel = salla.lang.get("common.elements.cancel");
+                this.updatedSuccessfullyLabel = salla.lang.get("pages.rating.review_updated_successfully");
+                this.deletedSuccessfullyLabel = salla.lang.get("pages.rating.review_deleted_successfully");
+                this.confirmDeleteBtn = salla.lang.get("common.elements.confirm_delete");
+                this.contact_body = (store, id, customer) => salla.lang.get('pages.rating.contact_body', { store, id, customer });
+            };
+            setTranslations();
+        });
+    }
+    /**
+     * Show the rating modal
+     */
+    async open() {
+        this.defaultMode = true;
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                this.modal.open().then(() => this.order || salla.api.withoutNotifier(() => salla.rating.api.order(this.orderId ? this.orderId : salla.config.get('page.id'))).then(res => this.order = res.data))
+                    .then(() => this.modal.setTitle(`${salla.lang.get('pages.rating.rate_order')} <span class="unicode">(#${this.order.id})</span>`))
+                    .then(() => {
+                    // Initialize productImages for all products
+                    const initialImages = {};
+                    if (this.order?.products) {
+                        for (const item of this.order.products) {
+                            initialImages[item.product.id] = [];
+                        }
+                    }
+                    this.productImages = initialImages;
+                })
+                    .then(() => this.modal.stopLoading())
+                    .then(() => this.stepsCount = [this.order.testimonials_enabled, this.order.products_enabled, this.order.shipping_enabled].filter(enabled => enabled).length)
+                    .then(() => setTimeout(() => this.handleWizard(), 100))
+                    .catch(e => {
+                    resolve(false);
+                    this.hasError = true;
+                    this.errorMessage = e.response?.data?.error?.message || e.response?.data;
+                    this.modal.stopLoading();
+                });
+                resolve(true);
+            }, 50);
+        });
+    }
+    async openEditModal(params) {
+        this.defaultMode = false;
+        this.editMode = true;
+        this.editType = params.type;
+        this.editFeedbackId = params.feedback_id;
+        try {
+            await this.fetchEditItem(params.feedback_id);
+            this.editModal.open();
+        }
+        catch (e) {
+            this.hasError = true;
+            this.errorMessage = e.response?.data?.error?.message || e.response?.data;
+        }
+    }
+    async fetchEditItem(feedbackId) {
+        const endpoint = `rating/${feedbackId}/show`;
+        const response = await salla.api.request(endpoint);
+        this.editItem = response.data;
+        if (this.allowAttachImages && this.editType == "product" && this.editItem.images.length) {
+            this.editItemImages = this.editItem.images.map(img => {
+                return { id: `${Math.floor(100 + Math.random() * 900)}`, url: img };
+            });
+        }
+    }
+    async editReview() {
+        const data = {};
+        this.editModal.querySelectorAll('[name]').forEach((input) => {
+            const inputData = salla.helpers.inputData(input.name, input.value, data);
+            data[inputData.name] = inputData.value;
+        });
+        data.images && (data.images = data.images.split(','));
+        const endpoint = `rating/${this.editFeedbackId}`;
+        await salla.api.request(endpoint, data, 'put').then((res) => {
+            this.editModal.close();
+            salla.notify.success(res.message || this.updatedSuccessfullyLabel);
+            setTimeout(() => {
+                window.location.reload();
+            }, 500);
+        });
+    }
+    async openDeleteModal(params) {
+        this.defaultMode = false;
+        this.deleteMode = true;
+        this.deleteFeedbackId = params.feedback_id;
+        this.shouldOpenDeleteModal = true;
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                this.deleteModal.open().then(() => resolve(true));
+            }, 50);
+        });
+    }
+    async deleteReview() {
+        const endpoint = `rating/${this.deleteFeedbackId}`;
+        await salla.api.request(endpoint, null, 'delete').then(() => {
+            this.deleteModal.close();
+            salla.notify.success(this.deletedSuccessfullyLabel);
+            setTimeout(() => {
+                window.location.reload();
+            }, 500);
+        });
+    }
+    /**
+     * Show the rating modal
+     */
+    async close() {
+        return this.modal.close();
+    }
+    // handle wizard
+    handleWizard() {
+        this.steps = this.modal.querySelectorAll(".s-rating-modal-step");
+        this.dots = this.modal.querySelectorAll(".s-rating-modal-step-dot");
+        this.showActiveStep();
+    }
+    showActiveStep(current = null) {
+        this.currentTab = current || this.steps[this.currentIndex];
+        Helper.toggleClassIf('.s-rating-modal-step-dot', 's-rating-modal-bg-gray', 's-rating-modal-bg-primary', dot => dot != this.dots[this.currentIndex])
+            .toggleClassIf('.s-rating-modal-step', 's-rating-modal-active', 's-rating-modal-hidden', tab => tab == this.currentTab);
+        if (this.currentIndex !== 0) {
+            // the animation
+            Helper.toggleElementClassIf(this.currentTab, 's-rating-modal-unactive', 's-rating-modal-hidden', () => true);
+            setTimeout(() => Helper.toggleElementClassIf(this.currentTab, 's-rating-modal-active', 's-rating-modal-unactive', () => true), 300);
+        }
+        // Btn text
+        const nextType = this.steps[this.currentIndex + 1]?.dataset.type;
+        this.nextBtn?.setText(nextType ? `${salla.lang.get('pages.rating.rate')} ${salla.lang.get(`pages.rating.${nextType}`)}`
+            : salla.lang.get('pages.rating.send_ratings'));
+        setTimeout(() => this.body?.setAttribute('style', `height:${this.currentTab?.offsetHeight}px`));
+    }
+    previousTab() {
+        this.currentIndex > 0 && this.currentIndex--;
+        Helper.toggleElementClassIf(this.backBtn, 's-rating-modal-unvisiable', 'block', () => this.currentIndex == 0);
+        this.showActiveStep();
+    }
+    submit() {
+        this.submittedBefore() || this.validate();
+        salla.config.canLeave = false;
+        this.nextBtn.load()
+            .then(() => this.submittedBefore() || this.sendFeedback())
+            .then(() => this.currentTab.querySelectorAll('[name],.s-rating-modal-btn-star').forEach(el => el.setAttribute('disabled', '')))
+            .then(() => this.currentIndex < this.stepsCount && this.currentIndex++)
+            .then(() => this.showActiveStep())
+            .then(() => Helper.toggleClassIf('#prev-btn', 'block', 's-rating-modal-unvisiable', () => true))
+            .finally(() => {
+            this.nextBtn.stop();
+            salla.config.canLeave = true;
+            if (this.currentIndex == this.stepsCount) {
+                this.showThankYou();
+                this.showContactWidget = false;
+            }
+            // this.modal.isClosable = false;
+        });
+    }
+    submittedBefore() {
+        return this.submitted.includes(this.currentIndex);
+    }
+    validate(rating = null, type = null) {
+        if (!rating && this.currentTab.dataset.type === 'products') {
+            const ratingForms = this.currentTab.querySelectorAll('.rating-outer-form');
+            ratingForms.forEach(ratingForm => this.validate(ratingForm, 'product'));
+            return;
+        }
+        rating = rating || this.currentTab;
+        const stars = rating.querySelector('.rating_hidden_input').value;
+        const validationMessage = rating.querySelector('.s-rating-modal-validation-msg');
+        type = type || rating.dataset.type;
+        if (!stars) {
+            validationMessage.innerHTML = salla.lang.get(`pages.rating.rate_${type}_stars`).replace(' (:item)', '');
+            throw new Error(validationMessage.innerHTML);
+        }
+        validationMessage.innerHTML = '';
+    }
+    sendFeedback() {
+        const data = {};
+        this.currentTab.querySelectorAll('[name]').forEach((input) => {
+            //decode names like `<input name="jamal[inner]" value="hi">` to be {name:jamal, value: {inner:"hi"}}
+            const inputData = salla.helpers.inputData(input.name, input.value, data);
+            data[inputData.name] = inputData.value;
+        });
+        if (this.allowAttachImages && data.products) {
+            for (let productIndex in data.products) {
+                if (data.products[productIndex].images) {
+                    data.products[productIndex].images = data.products[productIndex].images.split(',');
+                }
+            }
+        }
+        if (Object.keys(data).length == 0) {
+            return;
+        }
+        data.order_id = this.orderId;
+        data.type = this.currentTab.dataset.type;
+        return salla.rating.api[this.currentTab.dataset.type](data).then((res) => {
+            this.submitted.push(this.currentIndex);
+            return res;
+        });
+    }
+    showThankYou() {
+        let seconds = 10;
+        let timeToClose = setInterval(() => {
+            this.thanksTime.innerHTML = `00:0${seconds--}`;
+            if (seconds > 0) {
+                return;
+            }
+            clearInterval(timeToClose);
+            this.thanksTime.remove();
+            this.close().then(() => window.location.reload());
+        }, 1000);
+        this.modal.querySelector('.s-rating-modal-footer').classList.add('s-rating-modal-unvisiable');
+        this.showActiveStep(this.thanksTab);
+    }
+    getFilepondPlaceholder() {
+        return `<div class="s-rating-modal-filepond-placeholder"><span class="s-rating-modal-filepond-placeholder-icon">${ImageIcon}</span><p class="s-rating-modal-filepond-placeholder-text">${this.dragAndDropFilesLabel}<br>
+    <span> ${this.allowedImagesTypesLabel} <br> ${this.threeImagesMax} </span></p></div>`;
+    }
+    getCustomerName() {
+        let firstName = salla.config.get('user.first_name') || salla.storage.get('user.first_name') || '';
+        let lasName = salla.config.get('user.last_name') || salla.storage.get('user.last_name') || '';
+        return `${firstName} ${lasName}`;
+    }
+    handleSendEmail() {
+        const subject = `${this.contactSubjectLabel} #${this.order.id}`;
+        const body = this.contact_body(salla.config.get('store.name'), this.order.id, this.getCustomerName());
+        const mailtoLink = `mailto:${salla.config.get('store.contacts.email')}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
+        window.open(mailtoLink, '_blank');
+    }
+    handleSendWhatsApp() {
+        const body = this.contact_body(salla.config.get('store.name'), this.order.id, this.getCustomerName());
+        const whatsappLink = `https://wa.me/${salla.config.get('store.contacts.whatsapp')}?text=${encodeURIComponent(body)}`;
+        window.open(whatsappLink, '_blank');
+    }
+    resetData(isOpen) {
+        if (isOpen.detail) {
+            return;
+        }
+        this.modal?.close();
+        this.editItem = null;
+        this.editItemImages = [];
+        this.hiddenInputs[1] && (this.hiddenInputs[1].value = '');
+        this.deleteFeedbackId = null;
+        this.editFeedbackId = null;
+        this.shouldOpenDeleteModal = false;
+        this.editMode = false;
+        this.deleteMode = false;
+        this.defaultMode = false;
+    }
+    getDeleteModal() {
+        return (h("salla-modal", { ref: modal => this.deleteModal = modal, width: "xs", onModalVisibilityChanged: (isOpen) => this.resetData(isOpen) }, h("div", { class: "s-rating-modal-delete-wrapper", ref: el => this.body = el }, h("h3", null, this.confirmDeletionLabel), h("p", null, this.areYouSureLabel), h("div", { class: "s-rating-modal-delete-actions" }, h("salla-button", { loaderPosition: 'center', onClick: () => this.deleteReview() }, this.confirmDeleteBtn), h("salla-button", { color: 'danger', fill: 'outline', onClick: () => this.deleteModal.close() }, this.cancelLabel)))));
+    }
+    renderUploadedImagesCount(productId) {
+        // In edit mode, use editItemImages; in default mode, use productImages
+        const imageCount = this.editMode ? this.editItemImages.length : (this.productImages[productId] || []).length;
+        return (h("span", { class: "s-rating-modal-upload-count" }, salla.lang.choice("pages.rating.images_count", imageCount, { current: imageCount, total: this.MAX_UPLOAD_LIMIT })));
+    }
+    getEditModal() {
+        return (h("salla-modal", { ref: modal => this.editModal = modal, width: "md", onModalVisibilityChanged: (isOpen) => this.resetData(isOpen) }, h("div", { class: "s-rating-modal-edit-wrapper", ref: el => this.body = el }, this.editType === "store" && this.editItem ? (h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step", "data-type": "store", ref: currentTab => this.currentTab = currentTab }, h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-modal-store-logo" })), h("h2", { class: "s-rating-modal-title" }, salla.lang.get('pages.rating.rate_the_store')), h("div", { class: "s-rating-modal-stars-company" }, h("salla-rating-stars", { withLabel: true, size: "large", editable: true, value: this.editItem.stars })), h("textarea", { name: "content", value: this.editItem.content, class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }), h("small", { class: "s-rating-modal-validation-msg" }))) : null, this.editType === "shipping" && this.editItem ? (h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step", "data-type": "shipping", ref: currentTab => this.currentTab = currentTab }, this.editItem.shipping.logo
+            ? h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: this.editItem.shipping.logo, class: "s-rating-modal-shipping-logo", alt: this.editItem.shipping.name }))
+            : h("span", { class: "s-rating-modal-icon", innerHTML: ShippingFast }), h("div", { class: "s-rating-modal-title" }, " ", `${salla.lang.get('pages.rating.rate_shipping')} ${this.editItem.shipping.name}`), h("div", { class: "s-rating-modal-stars-company" }, h("salla-rating-stars", { withLabel: true, size: "large", editable: true, value: this.editItem.stars })), h("textarea", { name: "content", class: "s-rating-modal-comment", value: this.editItem.content, placeholder: salla.lang.get('pages.rating.write_shipping_rate') }), h("small", { class: "s-rating-modal-validation-msg" }))) : null, this.editType == "product" && this.editItem ? h("section", { class: "s-rating-modal-step", "data-type": "products", ref: currentTab => this.currentTab = currentTab }, h("div", { class: "s-rating-modal-product" }, h("div", { class: "rating-outer-form", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') }, h("div", { class: "s-rating-modal-product-img-wrap" }, h("img", { src: this.editItem.product.image.url, alt: this.editItem.product.name, class: "s-rating-modal-product-img" })), h("div", { class: "s-rating-modal-product-details" }, h("div", { class: "s-rating-modal-product-details-main" }, h("div", null, h("h3", { class: "s-rating-modal-product-title" }, " ", this.editItem.product.name), h("div", { class: "s-rating-modal-stars-product" }, h("salla-rating-stars", { withLabel: true, size: "small", editable: true, value: this.editItem.stars }))), this.allowAttachImages && h("salla-button", { class: "s-comments-item-like-btn mt-0", loaderPosition: 'center', fill: 'outline', size: 'small', onClick: () => this.toggleUploader(1) }, h("span", null, this.editItemImages.length ? this.editImagesLabel : this.addImagesLabel), h("span", { innerHTML: ImageIcon }))), h("textarea", { value: this.editItem.content, placeholder: salla.lang.get('pages.rating.write_product_rate'), name: "content", class: "s-rating-modal-comment" }), h("small", { class: "s-rating-modal-validation-msg" }))), this.allowAttachImages && (h("div", { class: "s-rating-modal-uploader is-closed", ref: (el) => (this.contentRefs[1] = el) }, h("salla-file-upload", { name: "images", allowMultiple: true, maxFilesCount: this.MAX_UPLOAD_LIMIT, imagePreviewHeight: 117, filePosterHeight: 117, "instant-upload": true, type: "feedback", files: JSON.stringify(this.editItemImages), payloadName: "files[]", id: `file-${this.editItem.product.id}`, title: this.editItem.product.name, instantUpload: true, accept: "image/png, image/jpeg, image/jpg", url: salla.url.api('upload'), onUploaded: (e) => {
+                this.editItemImages = [...this.editItemImages, e.detail];
+                this.hiddenInputs[1].value = this.editItemImages.map(img => img.url).join();
+            }, onRemoved: (e) => {
+                const removedId = e.detail;
+                if (!removedId)
+                    return;
+                this.editItemImages = this.editItemImages.filter(img => img.id !== removedId);
+                this.hiddenInputs[1].value = this.editItemImages.map(img => img.url).join();
+            }, labelIdle: this.getFilepondPlaceholder() }), h("input", { type: "hidden", name: "images", value: this.editItem.images.join(','), ref: (el) => (this.hiddenInputs[1] = el) }), this.renderUploadedImagesCount(this.editItem.product.id)))))
+            : null, h("div", { class: "s-rating-modal-footer s-rating-modal-footer-end" }, h("salla-button", { "loader-position": 'center', onClick: () => this.editReview() }, this.editReviewLabel)))));
+    }
+    render() {
+        if (this.deleteMode) {
+            return h(Host, { class: "s-rating-modal" }, this.getDeleteModal());
+        }
+        if (this.editMode) {
+            return h(Host, { class: "s-rating-modal" }, this.getEditModal());
+        }
+        if (this.defaultMode) {
+            return (h(Host, { class: "s-rating-modal" }, h("salla-modal", { class: "s-rating-modal-wrap", onModalVisibilityChanged: (isOpen) => this.resetData(isOpen), isLoading: true, width: "md", ref: modal => this.modal = modal }, h("div", { slot: 'loading' }, h("div", { class: "s-rating-modal-skeleton" }, h("salla-skeleton", { type: 'circle', height: '80px', width: '80px' }), h("salla-skeleton", { height: '15px', width: '60%' }), h("salla-skeleton", { height: '10px', width: '30%' }), h("div", { class: "s-rating-modal-skeleton-stars" }, [...Array(5)].map((v) => h("div", { key: v, innerHTML: WishListIcon }))), h("salla-skeleton", { height: '100px', width: '100%' }), h("div", { class: "s-rating-modal-skeleton-footer" }, h("salla-skeleton", { height: '40px', width: '30%' })))), !this.hasError && this.order
+                ? [h("div", { class: "s-rating-modal-wrapper", ref: el => this.body = el }, this.order?.testimonials_enabled ?
+                        h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "store" }, h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: salla.config.get('store.logo', 'https://assets.salla.sa/cp/assets/images/logo-new.png'), alt: "store name", class: "s-rating-modal-store-logo" })), h("h2", { class: "s-rating-modal-title" }, salla.lang.get('pages.rating.rate_the_store')), h("div", { class: "s-rating-modal-stars-company" }, h("salla-rating-stars", { withLabel: true, size: "large" })), h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_store_rate') }), h("small", { class: "s-rating-modal-validation-msg" }))
+                        : '', this.order.products_enabled
+                        ? h("section", { class: "s-rating-modal-step s-rating-modal-hidden", "data-type": "products" }, this.order.products.map((item, index) => h("div", { class: "s-rating-modal-product", key: index }, h("div", { class: "rating-outer-form", "data-stars-error": salla.lang.get('pages.rating.rate_product_stars') }, h("div", { class: "s-rating-modal-product-img-wrap" }, h("img", { src: item.product.thumbnail, alt: item.product.name, class: "s-rating-modal-product-img" })), h("div", { class: "s-rating-modal-product-details" }, h("div", { class: "s-rating-modal-product-details-main" }, h("div", null, h("h3", { class: "s-rating-modal-product-title" }, " ", item.product.name), h("div", { class: "s-rating-modal-stars-product" }, h("salla-rating-stars", { withLabel: true, size: "small", name: `products[${index}][rating]` }))), this.allowAttachImages && h("salla-button", { class: "s-comments-item-like-btn mt-0", loaderPosition: 'center', fill: 'outline', size: 'small', onClick: () => this.toggleUploader(index) }, h("span", null, this.addImagesLabel), h("span", { innerHTML: ImageIcon }))), h("input", { type: "hidden", name: `products[${index}][product_id]`, value: item.product.id }), h("textarea", { placeholder: salla.lang.get('pages.rating.write_product_rate'), name: `products[${index}][comment]`, class: "s-rating-modal-comment" }), h("small", { class: "s-rating-modal-validation-msg" }))), this.allowAttachImages && (h("div", { class: "s-rating-modal-uploader is-closed", ref: (el) => (this.contentRefs[index] = el) }, h("salla-file-upload", { name: "image", maxFilesCount: this.MAX_UPLOAD_LIMIT, imagePreviewHeight: 117, "instant-upload": true, type: "feedback", payloadName: "files[]", id: `file-${item.product.id}`, title: item.product.name, allowMultiple: true, instantUpload: true, accept: "image/png, image/jpeg, image/jpg", url: salla.url.api('upload'), onUploaded: (e) => {
+                                this.productImages = {
+                                    ...this.productImages,
+                                    [item.product.id]: [...(this.productImages[item.product.id] || []), e.detail]
+                                };
+                                this.hiddenInputs[index].value = this.productImages[item.product.id].map(img => img.url).join(',');
+                            }, onRemoved: (e) => {
+                                const removedId = e.detail;
+                                if (!removedId || !this.productImages[item.product.id])
+                                    return;
+                                this.productImages = {
+                                    ...this.productImages,
+                                    [item.product.id]: this.productImages[item.product.id].filter(img => img.id !== removedId)
+                                };
+                                this.hiddenInputs[index].value = this.productImages[item.product.id].map(img => img.url).join(',');
+                            }, labelIdle: this.getFilepondPlaceholder() }), h("input", { type: "hidden", name: `products[${index}][images]`, value: (this.productImages[item.product.id] || []).map(img => img.url).join(','), ref: (el) => (this.hiddenInputs[index] = el) }), this.renderUploadedImagesCount(item.product.id))))))
+                        : '', this.order.shipping_enabled && this.order.shipping?.company
+                        ? h("div", { class: "rating-outer-form s-rating-modal-step-wrap s-rating-modal-step s-rating-modal-hidden", "data-type": "shipping" }, h("input", { type: "hidden", name: "shipping_company_id", value: this.order.shipping.company.id }), this.order.shipping.company.logo
+                            ? h("div", { class: "s-rating-modal-rounded-icon" }, h("img", { src: this.order.shipping.company.logo, class: "s-rating-modal-shipping-logo", alt: this.order.shipping.company.name }))
+                            : h("span", { class: "s-rating-modal-icon", innerHTML: ShippingFast }), h("div", { class: "s-rating-modal-title" }, " ", `${salla.lang.get('pages.rating.rate_shipping')} ${this.order.shipping.company.name}`), h("div", { class: "s-rating-modal-stars-company" }, h("salla-rating-stars", { withLabel: true, size: "large" })), h("textarea", { name: "comment", class: "s-rating-modal-comment", placeholder: salla.lang.get('pages.rating.write_shipping_rate') }), h("small", { class: "s-rating-modal-validation-msg" }))
+                        : '', h("div", { class: "s-rating-modal-thanks s-rating-modal-hidden", ref: el => this.thanksTab = el }, h("span", { class: "s-rating-modal-icon", innerHTML: CheckCircle2 }), h("h3", { class: "s-rating-modal-thanks-title" }, salla.lang.get('pages.rating.thanks')), h("div", { class: "s-rating-modal-thanks-msg", innerHTML: this.order.thanks_message }), h("time", { class: "s-rating-modal-thanks-time", ref: el => this.thanksTime = el }))), this.allowContactSupport && this.showContactWidget && (salla.config.get('store.contacts.whatsapp') || salla.config.get('store.contacts.email')) ? h("div", { class: "s-rating-modal-contact" }, h("p", null, this.contactUsLabel), h("div", { class: "s-rating-modal-contact-icons" }, salla.config.get('store.contacts.whatsapp') && h("span", { onClick: () => this.handleSendWhatsApp(), innerHTML: WhatsappIcon }), salla.config.get('store.contacts.email') && h("span", { onClick: () => this.handleSendEmail(), innerHTML: MailIcon }))) : '', h("div", { class: "s-rating-modal-footer" }, h("button", { ref: el => this.backBtn = el, onClick: () => this.previousTab(), class: "s-rating-modal-btn s-rating-modal-unvisiable" }, salla.lang.get('common.elements.back')), this.stepsCount > 1 ? h("ul", { class: "s-rating-modal-dots" }, [0, 1, 2].slice(0, this.stepsCount).map((v) => h("li", { key: v, class: 's-rating-modal-bg-gray s-rating-modal-step-dot' }))) : '', h("salla-button", { "loader-position": 'center', ref: el => this.nextBtn = el, onClick: () => this.submit() }, salla.lang.get('common.elements.next')))]
+                : h("salla-placeholder", { alignment: "center" }))));
+        }
+    }
+    componentWillLoad() {
+        salla.event.on('rating::open', () => this.open());
+        salla.event.on('rating::edit', (params) => this.openEditModal(params));
+        salla.event.on('rating::delete', (params) => this.openDeleteModal(params));
+    }
+    componentDidLoad() {
+        salla.event.dispatch('rating::ready', this);
+    }
+    get host() { return this; }
+    static get style() { return sallaRatingModalCss; }
+}, [0, "salla-rating-modal", {
+        "orderId": [2, "order-id"],
+        "order": [32],
+        "hasError": [32],
+        "showContactWidget": [32],
+        "errorMessage": [32],
+        "images": [32],
+        "productImages": [32],
+        "editItemImages": [32],
+        "contact_body": [32],
+        "editMode": [32],
+        "defaultMode": [32],
+        "deleteMode": [32],
+        "shouldOpenDeleteModal": [32],
+        "editType": [32],
+        "editFeedbackId": [32],
+        "deleteFeedbackId": [32],
+        "editItem": [32],
+        "open": [64],
+        "close": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-rating-modal", "salla-button", "salla-file-upload", "salla-loading", "salla-modal", "salla-placeholder", "salla-rating-stars", "salla-skeleton"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-rating-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaRatingModal$1);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "salla-file-upload":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-placeholder":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-rating-stars":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-skeleton":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaRatingModal = SallaRatingModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaRatingModal, defineCustomElement };

package/dist/components/salla-rating-stars.js

@@ -1,4 +1,9 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{S as s,d as a}from"./salla-rating-stars2.js";const r=s,t=a;export{r as SallaRatingStars,t as defineCustomElement}
+import { S as SallaRatingStars$1, d as defineCustomElement$1 } from './salla-rating-stars2.js';
+
+const SallaRatingStars = SallaRatingStars$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaRatingStars, defineCustomElement };