@salla.sa/twilight-components/dist/twilight/p-4f5aa38b.entry.js

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import{r as t,c as e,h as s,H as i,g as a}from"./p-bdd00808.js";const n=`\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>calendar-time</title>\n<path d="M22.667 17.333c-0.737 0-1.333 0.596-1.333 1.333v2.667h-2.667c-0.737 0-1.333 0.596-1.333 1.333s0.596 1.333 1.333 1.333h4c0.737 0 1.333-0.596 1.333-1.333v-4c0-0.737-0.596-1.333-1.333-1.333zM28 2.667h-2.667v-1.333c0-0.736-0.596-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333h-13.333v-1.333c0-0.736-0.596-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333h-2.667c-2.205 0-4 1.795-4 4v21.333c0 2.205 1.795 4 4 4h5.363c0.737 0 1.333-0.596 1.333-1.333s-0.596-1.333-1.333-1.333h-5.363c-0.736 0-1.333-0.597-1.333-1.333v-21.333c0-0.736 0.597-1.333 1.333-1.333h2.667v2.667c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.667h13.333v2.667c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.667h2.667c0.736 0 1.333 0.599 1.333 1.333v2.696c0 0.736 0.596 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.696c0-2.205-1.795-4-4-4zM22 12c-5.515 0-10 4.485-10 10s4.485 10 10 10 10-4.485 10-10-4.485-10-10-10zM22 29.333c-4.043 0-7.333-3.291-7.333-7.333s3.291-7.333 7.333-7.333 7.333 3.291 7.333 7.333-3.291 7.333-7.333 7.333z"></path>\n</svg>\n`;const o=`\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>calendar</title>\n<path d="M28 2.667h-2.667v-1.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333h-13.333v-1.333c0-0.736-0.597-1.333-1.333-1.333s-1.333 0.597-1.333 1.333v1.333h-2.667c-2.205 0-4 1.795-4 4v21.333c0 2.205 1.795 4 4 4h24c2.205 0 4-1.795 4-4v-21.333c0-2.205-1.795-4-4-4zM29.333 28c0 0.736-0.599 1.333-1.333 1.333h-24c-0.736 0-1.333-0.599-1.333-1.333v-13.333h26.667zM29.333 12h-26.667v-5.333c0-0.736 0.599-1.333 1.333-1.333h2.667v2.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.667h13.333v2.667c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-2.667h2.667c0.736 0 1.333 0.599 1.333 1.333z"></path>\n</svg>\n`;const l=`\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>time</title>\n<path d="M16 0c-8.823 0-16 7.177-16 16s7.177 16 16 16 16-7.177 16-16-7.177-16-16-16zM16 29.333c-7.352 0-13.333-5.981-13.333-13.333s5.981-13.333 13.333-13.333 13.333 5.981 13.333 13.333-5.981 13.333-13.333 13.333zM16 8c-0.736 0-1.333 0.596-1.333 1.333v6.667h-4c-0.736 0-1.333 0.596-1.333 1.333s0.597 1.333 1.333 1.333h5.333c0.736 0 1.333-0.596 1.333-1.333v-8c0-0.737-0.597-1.333-1.333-1.333z"></path>\n</svg>\n`;const r=":host{display:block}";const d=class{constructor(s){t(this,s);this.invalidInput=e(this,"invalidInput",7);this.option=undefined;this.productId=undefined;this.bookNowLabel=salla.lang.get("pages.cart.book_an_appointment","حجز موعد");this.editLabel=salla.lang.get("pages.cart.edit_an_appointment","تعديل الموعد");this.bookedLabel=salla.lang.get("pages.cart.booked_successfully","تمت اضافة الموعد بنجاح");this.selectDate=salla.lang.get("pages.cart.select_appointment_date","حدد تاريخ الموعد");this.bookingUrl="";this.iframeReady=false;this.reservations=[];this.reservationsInput=undefined;salla.lang.onLoaded((()=>this.setTranslations()));Salla.event.on("booking::open",(t=>this.handleBookingOpen(t)))}async setTranslations(){const t=(t,e,s)=>new Promise((i=>{salla.helpers.setNested(salla.lang.messages[t],e,s);i(true)}));await t("ar.trans","pages.cart.book_an_appointment","حجز موعد");await t("en.trans","pages.cart.book_an_appointment","Book an Appointment");await t("ar.trans","pages.cart.edit_an_appointment","تعديل الموعد");await t("en.trans","pages.cart.edit_an_appointment","Edit an Appointment");await t("ar.trans","pages.cart.booked_successfully","تمت اضافة الموعد بنجاح");await t("en.trans","pages.cart.booked_successfully","Booked Successfully");await t("ar.trans","pages.cart.select_appointment_date","حدد تاريخ الموعد");await t("en.trans","pages.cart.select_appointment_date","Select appointment date");this.bookNowLabel=salla.lang.get("pages.cart.book_an_appointment");this.editLabel=salla.lang.get("pages.cart.edit_an_appointment");this.bookedLabel=salla.lang.get("pages.cart.booked_successfully");this.selectDate=salla.lang.get("pages.cart.select_appointment_date")}openBookingModal(t,e=false){if(e&&(!t.detail||typeof t.detail!=="number"||t.detail!==this.productId)){return}if(salla.config.isGuest()){this.setAfterReloadEvent("booking::open-after-reload",this.productId);salla.event.dispatch("login::open");return}salla.booking.add(this.productId,false).then((t=>{if(t.data.redirect.to!=="booking"){throw new Error("Unexpected redirect!")}salla.event.dispatch("booking::open",{url:t.data.redirect.url,id:this.productId})})).catch((t=>{salla.error(salla.lang.get("common.errors.error_occurred"));salla.logger.error(t.response||t)}))}handleBookingOpen(t){if(t.id!==this.productId)return;this.bookingUrl=salla.url.addParamToUrl("product_id",t.id,t.url);this.iframeReady=true;setTimeout((()=>{this.modal.setTitle(this.selectDate);this.modal.open()}),100)}setAfterReloadEvent(t,e){salla.storage.set("afterReloadEvent",{event:t,payload:e})}emitAfterReloadEvent(){const t=salla.storage.get("afterReloadEvent");if(t&&t.event){const e=new CustomEvent(t.event,{detail:t.payload});window.dispatchEvent(e);salla.storage.remove("afterReloadEvent")}}componentWillLoad(){if(this.option&&this.option.details.length){this.reservations=this.option.details}}componentDidLoad(){window.addEventListener("booking::open-after-reload",(t=>this.openBookingModal(t,true)));this.emitAfterReloadEvent();window.addEventListener("message",this.handleMessageEvent.bind(this));this.reservationsInput.addEventListener("invalid",(t=>this.invalidInput.emit(t)));this.reservationsInput.addEventListener("input",(()=>{this.reservationsInput.setCustomValidity("");this.reservationsInput.reportValidity()}))}handleMessageEvent(t){var e,s;if(t.data.source!=="booking")return;const i=t.data.type;const a=t.data.message;if(localStorage.getItem("debug"))console.log(`Received an action:${i}`,t.data);if(i==="error"){if((e=a.fields)===null||e===void 0?void 0:e.reservation){salla.notify.error(a.fields.reservation[0]);return}const t=Object.values(a.fields).flat().map((t=>`<li>${t}</li>`)).join("");salla.notify.error(`<ul>${t}</ul>`)}if(i==="success"){if(Number(a.productId)!==Number(this.productId))return;this.reservations=a.data.reservations.map((t=>{if(t.time&&t.time.length>0){const e=t.time[0];return{date:t.date,day:t.day,from_timestamp:e.from,to_timestamp:e.to}}return null})).filter((t=>t!==null));salla.notify.success(this.bookedLabel);(s=this.modal)===null||s===void 0?void 0:s.close();setTimeout((()=>window.location.reload()))}if(i==="height"){this.iframe.height=(a===null||a===void 0?void 0:a.height)+"px"}}bookingModal(){return s("salla-modal",{class:"s-booking-field-modal",ref:t=>this.modal=t,width:"md",position:"middle",noPadding:true},s("iframe",{ref:t=>this.iframe=t,src:this.bookingUrl,frameborder:"0"}))}renderReservationDate(t){return s("span",{class:t.from_timestamp?"s-booking-field-reservations-has-time":""},s("i",{class:"s-booking-field-reservations-icon",innerHTML:o}),t.date)}renderReservationTime(t){if(!t.from_timestamp)return"";return s("span",{class:"s-booking-field-reservations-time"},s("i",{class:"s-booking-field-reservations-icon",innerHTML:l}),s("span",null,t.from_timestamp," - ",t.to_timestamp))}render(){return s(i,null,s("div",{class:"s-booking-field-main"},this.option.required||this.reservations.length>0?s("div",{class:"s-booking-field-price"},s("span",null,salla.money(this.option.price))):"",s("salla-button",{class:"s-booking-field-book-now",size:"small",loaderPosition:"center",fill:"outline",onClick:t=>this.openBookingModal(t,false)},s("span",{class:"s-booking-field-book-now-content"},s("span",{innerHTML:n}),this.reservations.length?this.editLabel:this.bookNowLabel))),this.reservations.length>0&&s("div",{class:"s-booking-field-reservations"},this.reservations.map(((t,e)=>s("div",{key:e,class:"s-booking-field-reservations-item"},this.renderReservationDate(t),this.renderReservationTime(t))))),s("input",{class:"s-hidden",name:this.option.name,required:this.option.required,value:JSON.stringify(this.reservations)==="[]"?"":JSON.stringify(this.reservations),ref:t=>this.reservationsInput=t}),this.iframeReady&&this.bookingModal())}get host(){return a(this)}};d.style=r;const c=class{constructor(e){t(this,e)}hideAllOptions(t){this.host.querySelectorAll(`[data-show-when^="options[${t}"]`).forEach((t=>{t.classList.add("hidden");this.hideAllOptions(t.dataset.optionId);this.disableInputs(t)}))}disableInputs(t){t.querySelectorAll("[name]").forEach((t=>{var e;t.setAttribute("disabled","");t.removeAttribute("required");if(((e=t===null||t===void 0?void 0:t.tagName)===null||e===void 0?void 0:e.toLowerCase())==="select"){t.value=""}if(["checkbox"].includes(t.getAttribute("type"))&&t.hasOwnProperty("checked")){t.checked=false}}))}changeHandler(t){var e;salla.event.emit("salla-onditional-fields::change",t);salla.log("Received the change event: ",t);if(!t.target||!["SELECT"].includes(t.target.tagName)&&!["checkbox","radio"].includes(t.target.getAttribute("type"))){salla.log("Ignore the change because is not a supported input: "+(((e=t===null||t===void 0?void 0:t.target)===null||e===void 0?void 0:e.tagName)||"N/A"));return}let s=t.target.name.replace("[]","");let i=t.target.getAttribute("type")==="checkbox";let a=t.target.getAttribute("type")==="radio";salla.log("Trying to find all elements with condition:",`[data-show-when^="${s}"]`);this.host.querySelectorAll(`[data-show-when^="${s}"]`).forEach((e=>{let s=!(e===null||e===void 0?void 0:e.dataset.showWhen.includes("!="));let n=e===null||e===void 0?void 0:e.dataset.showWhen.replace(/(.*)(=|!=)(.*)/gm,"$3").trim();let o;if(i){let e=Array.from(this.host.querySelectorAll(`input[name="${t.target.name}"]:checked`),(t=>t===null||t===void 0?void 0:t.value));o=e.includes(n.toString())}else if(a){o=t.target.checked&&t.target.value===n}else{o=n===t.target.value}salla.log("The input is ",i?"Multiple":a?"Radio":"Single"," value:",o);let l=s&&o||!s&&!o;if(l){e.classList.remove("hidden");e.querySelectorAll("[name]").forEach((t=>{t.removeAttribute("disabled");const e=t.closest(".s-product-options-option");if(e.dataset.optionRequired==="true"){t.setAttribute("required","")}if(t.getAttribute("type")==="checkbox"){const e=Array.from(document.querySelectorAll(`input[type="checkbox"][name="${t.getAttribute("name")}"]`));const s=e.some((t=>t.checked));if(s){e.forEach((t=>{t.removeAttribute("required")}))}}}))}else{this.hideAllOptions(e.dataset.optionId);e.classList.add("hidden");this.disableInputs(e)}}))}componentDidRender(){this.host.querySelectorAll(`[data-show-when]`).forEach((t=>{var e;let s=(e=t===null||t===void 0?void 0:t.dataset)===null||e===void 0?void 0:e.showWhen.replace(/(.*)(=|!=)(.*)/gm,"$1").trim();if(!s){return}this.changeHandler({target:this.host.querySelector('[name^="'+s+'"]')})}))}render(){return s(i,null,s("slot",null))}get host(){return a(this)}};export{d as salla_booking_field,c as salla_conditional_fields};
//# sourceMappingURL=p-4f5aa38b.entry.js.map