@salla.sa/twilight-components/dist/esm-es5/salla-booking-field_2.entry.js

Salla Web Component

var __awaiter=this&&this.__awaiter||function(e,n,t,i){function a(e){return e instanceof t?e:new t((function(n){n(e)}))}return new(t||(t=Promise))((function(t,o){function s(e){try{c(i.next(e))}catch(e){o(e)}}function r(e){try{c(i["throw"](e))}catch(e){o(e)}}function c(e){e.done?t(e.value):a(e.value).then(s,r)}c((i=i.apply(e,n||[])).next())}))};var __generator=this&&this.__generator||function(e,n){var t={label:0,sent:function(){if(o[0]&1)throw o[1];return o[1]},trys:[],ops:[]},i,a,o,s;return s={next:r(0),throw:r(1),return:r(2)},typeof Symbol==="function"&&(s[Symbol.iterator]=function(){return this}),s;function r(e){return function(n){return c([e,n])}}function c(r){if(i)throw new TypeError("Generator is already executing.");while(s&&(s=0,r[0]&&(t=0)),t)try{if(i=1,a&&(o=r[0]&2?a["return"]:r[0]?a["throw"]||((o=a["return"])&&o.call(a),0):a.next)&&!(o=o.call(a,r[1])).done)return o;if(a=0,o)r=[r[0]&2,o.value];switch(r[0]){case 0:case 1:o=r;break;case 4:t.label++;return{value:r[1],done:false};case 5:t.label++;a=r[1];r=[0];continue;case 7:r=t.ops.pop();t.trys.pop();continue;default:if(!(o=t.trys,o=o.length>0&&o[o.length-1])&&(r[0]===6||r[0]===2)){t=0;continue}if(r[0]===3&&(!o||r[1]>o[0]&&r[1]<o[3])){t.label=r[1];break}if(r[0]===6&&t.label<o[1]){t.label=o[1];o=r;break}if(o&&t.label<o[2]){t.label=o[2];t.ops.push(r);break}if(o[2])t.ops.pop();t.trys.pop();continue}r=n.call(e,t)}catch(e){r=[6,e];a=0}finally{i=o=0}if(r[0]&5)throw r[1];return{value:r[0]?r[1]:void 0,done:true}}};
/*!
 * Crafted with ❤ by Salla
 */import{r as registerInstance,c as createEvent,h,H as Host,g as getElement}from"./index-DWStDVKB.js";var BookingTime='\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';var Calendar='\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';var TimeIcon='\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';var sallaBookingFieldCss=":host{display:block}";var SallaBookingField=function(){function e(e){var n=this;registerInstance(this,e);this.invalidInput=createEvent(this,"invalidInput");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=[];salla.lang.onLoaded((function(){return n.setTranslations()}));Salla.event.on("booking::open",(function(e){return n.handleBookingOpen(e)}))}e.prototype.setTranslations=function(){return __awaiter(this,void 0,void 0,(function(){var e;return __generator(this,(function(n){switch(n.label){case 0:e=function(e,n,t){return new Promise((function(i){salla.helpers.setNested(salla.lang.messages[e],n,t);i(true)}))};return[4,e("ar.trans","pages.cart.book_an_appointment","حجز موعد")];case 1:n.sent();return[4,e("en.trans","pages.cart.book_an_appointment","Book an Appointment")];case 2:n.sent();return[4,e("ar.trans","pages.cart.edit_an_appointment","تعديل الموعد")];case 3:n.sent();return[4,e("en.trans","pages.cart.edit_an_appointment","Edit an Appointment")];case 4:n.sent();return[4,e("ar.trans","pages.cart.booked_successfully","تمت اضافة الموعد بنجاح")];case 5:n.sent();return[4,e("en.trans","pages.cart.booked_successfully","Booked Successfully")];case 6:n.sent();return[4,e("ar.trans","pages.cart.select_appointment_date","حدد تاريخ الموعد")];case 7:n.sent();return[4,e("en.trans","pages.cart.select_appointment_date","Select appointment date")];case 8:n.sent();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");return[2]}}))}))};e.prototype.openBookingModal=function(e,n){var t=this;if(n===void 0){n=false}if(n&&(!e.detail||typeof e.detail!=="number"||e.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((function(e){if(e.data.redirect.to!=="booking"){throw new Error("Unexpected redirect!")}salla.event.dispatch("booking::open",{url:e.data.redirect.url,id:t.productId})})).catch((function(e){salla.error(salla.lang.get("common.errors.error_occurred"));salla.logger.error(e.response||e)}))};e.prototype.handleBookingOpen=function(e){var n=this;if(e.id!==this.productId)return;this.bookingUrl=salla.url.addParamToUrl("product_id",e.id,e.url);this.iframeReady=true;setTimeout((function(){n.modal.setTitle(n.selectDate);n.modal.open()}),100)};e.prototype.setAfterReloadEvent=function(e,n){salla.storage.set("afterReloadEvent",{event:e,payload:n})};e.prototype.emitAfterReloadEvent=function(){var e=salla.storage.get("afterReloadEvent");if(e&&e.event){var n=new CustomEvent(e.event,{detail:e.payload});window.dispatchEvent(n);salla.storage.remove("afterReloadEvent")}};e.prototype.componentWillLoad=function(){if(this.option&&this.option.details.length){this.reservations=this.option.details}};e.prototype.componentDidLoad=function(){var e=this;window.addEventListener("booking::open-after-reload",(function(n){return e.openBookingModal(n,true)}));this.emitAfterReloadEvent();window.addEventListener("message",this.handleMessageEvent.bind(this));this.reservationsInput.addEventListener("invalid",(function(n){return e.invalidInput.emit(n)}));this.reservationsInput.addEventListener("input",(function(){e.reservationsInput.setCustomValidity("");e.reservationsInput.reportValidity()}))};e.prototype.handleMessageEvent=function(e){var n,t;if(e.data.source!=="booking")return;var i=e.data.type;var a=e.data.message;if(localStorage.getItem("debug"))console.log("Received an action:".concat(i),e.data);if(i==="error"){if((n=a.fields)===null||n===void 0?void 0:n.reservation){salla.notify.error(a.fields.reservation[0]);return}var o=Object.values(a.fields||[a.message]).flat().map((function(e){return"<li>".concat(e,"</li>")})).join("");salla.notify.error("<ul>".concat(o,"</ul>"))}if(i==="success"){if(Number(a.productId)!==Number(this.productId))return;this.reservations=a.data.reservations.map((function(e){if(e.time&&e.time.length>0){var n=e.time[0];return{date:e.date,day:e.day,from_timestamp:n.from,to_timestamp:n.to}}return null})).filter((function(e){return e!==null}));salla.notify.success(this.bookedLabel);(t=this.modal)===null||t===void 0?void 0:t.close();setTimeout((function(){return window.location.reload()}))}if(i==="height"){this.iframe.height=(a===null||a===void 0?void 0:a.height)+"px"}};e.prototype.bookingModal=function(){var e=this;return h("salla-modal",{class:"s-booking-field-modal",ref:function(n){return e.modal=n},width:"md",position:"middle",noPadding:true},h("iframe",{ref:function(n){return e.iframe=n},src:this.bookingUrl,frameborder:"0"}))};e.prototype.renderReservationDate=function(e){return h("span",{class:e.from_timestamp?"s-booking-field-reservations-has-time":""},h("i",{class:"s-booking-field-reservations-icon",innerHTML:Calendar}),e.date)};e.prototype.renderReservationTime=function(e){if(!e.from_timestamp)return"";return h("span",{class:"s-booking-field-reservations-time"},h("i",{class:"s-booking-field-reservations-icon",innerHTML:TimeIcon}),h("span",null,e.from_timestamp," - ",e.to_timestamp))};e.prototype.render=function(){var e=this;return h(Host,{key:"9c5755ca98a3a3a1340414de0109133ffb6617c4"},h("div",{key:"dabd37fc3a9a1879fb0c5cb3899c28971d8724ef",class:"s-booking-field-main"},this.option.required||this.reservations.length>0?h("div",{class:"s-booking-field-price"},h("span",{innerHTML:salla.money(this.option.price)})):"",h("salla-button",{key:"7fbe8ff75abac48b86b7992c261ba0439514c786",class:"s-booking-field-book-now",size:"small",loaderPosition:"center",fill:"outline",onClick:function(n){return e.openBookingModal(n,false)}},h("span",{key:"496907083ce40b1618c8a1b2228f91c70b83f60a",class:"s-booking-field-book-now-content"},h("span",{key:"e4455c6205055349b3137397f039125e0b3a6cf1",innerHTML:BookingTime}),this.reservations.length?this.editLabel:this.bookNowLabel))),this.reservations.length>0&&h("div",{key:"de68930ac2cab061c7f9b268f8887342528ba8e7",class:"s-booking-field-reservations"},this.reservations.map((function(n,t){return h("div",{key:t,class:"s-booking-field-reservations-item"},e.renderReservationDate(n),e.renderReservationTime(n))}))),h("input",{key:"f148bc7110984389035474c47fcc963a9fa14607",class:"s-hidden",name:this.option.name,required:this.option.required,value:JSON.stringify(this.reservations)==="[]"?"":JSON.stringify(this.reservations),ref:function(n){return e.reservationsInput=n}}),this.iframeReady&&this.bookingModal())};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();SallaBookingField.style=sallaBookingFieldCss;var SallaConditionalFields=function(){function e(e){registerInstance(this,e)}e.prototype.hideAllOptions=function(e){var n=this;this.host.querySelectorAll('[data-show-when^="options['.concat(e,'"]')).forEach((function(e){e.classList.add("hidden");n.hideAllOptions(e.dataset.optionId);n.disableInputs(e)}))};e.prototype.disableInputs=function(e){e.querySelectorAll("[name]").forEach((function(e){var n;e.setAttribute("disabled","");e.removeAttribute("required");if(((n=e===null||e===void 0?void 0:e.tagName)===null||n===void 0?void 0:n.toLowerCase())==="select"){e.value=""}if(["checkbox"].includes(e.getAttribute("type"))&&e.hasOwnProperty("checked")){e.checked=false}}))};e.prototype.changeHandler=function(e){var n=this;var t;salla.event.emit("salla-onditional-fields::change",e);salla.log("Received the change event: ",e);if(!e.target||!["SELECT"].includes(e.target.tagName)&&!["checkbox","radio"].includes(e.target.getAttribute("type"))){salla.log("Ignore the change because is not a supported input: "+(((t=e===null||e===void 0?void 0:e.target)===null||t===void 0?void 0:t.tagName)||"N/A"));return}var i=e.target.name.replace("[]","");var a=e.target.getAttribute("type")==="checkbox";var o=e.target.getAttribute("type")==="radio";salla.log("Trying to find all elements with condition:",'[data-show-when^="'.concat(i,'"]'));this.host.querySelectorAll('[data-show-when^="'.concat(i,'"]')).forEach((function(t){var i=!(t===null||t===void 0?void 0:t.dataset.showWhen.includes("!="));var s=t===null||t===void 0?void 0:t.dataset.showWhen.replace(/(.*)(=|!=)(.*)/gm,"$3").trim();var r;if(a){var c=Array.from(n.host.querySelectorAll('input[name="'.concat(e.target.name,'"]:checked')),(function(e){return e===null||e===void 0?void 0:e.value}));r=c.includes(s.toString())}else if(o){r=e.target.checked&&e.target.value===s}else{r=s===e.target.value}salla.log("The input is ",a?"Multiple":o?"Radio":"Single"," value:",r);var l=i&&r||!i&&!r;if(l){t.classList.remove("hidden");t.querySelectorAll("[name]").forEach((function(e){e.removeAttribute("disabled");var n=e.closest(".s-product-options-option");if(n.dataset.optionRequired==="true"){e.setAttribute("required","")}if(e.getAttribute("type")==="checkbox"){var t=Array.from(document.querySelectorAll('input[type="checkbox"][name="'.concat(e.getAttribute("name"),'"]')));var i=t.some((function(e){return e.checked}));if(i){t.forEach((function(e){e.removeAttribute("required")}))}}}))}else{n.hideAllOptions(t.dataset.optionId);t.classList.add("hidden");n.disableInputs(t)}}))};e.prototype.componentDidRender=function(){var e=this;this.host.querySelectorAll("[data-show-when]").forEach((function(n){var t;var i=(t=n===null||n===void 0?void 0:n.dataset)===null||t===void 0?void 0:t.showWhen.replace(/(.*)(=|!=)(.*)/gm,"$1").trim();if(!i){return}e.changeHandler({target:e.host.querySelector('[name^="'+i+'"]')})}))};e.prototype.render=function(){return h(Host,{key:"f2c9836cd5e5667efd13ade5d4e064551c89d569"},h("slot",{key:"980eef852261b13f477a2c2ad140e7c3e96e737f"}))};Object.defineProperty(e.prototype,"host",{get:function(){return getElement(this)},enumerable:false,configurable:true});return e}();export{SallaBookingField as salla_booking_field,SallaConditionalFields as salla_conditional_fields};
//# sourceMappingURL=salla-booking-field_2.entry.js.map