@salla.sa/twilight-components 2.14.393 → 2.14.394

package/dist/components/salla-quick-order.js

@@ -1,4 +1,302 @@
 /*!
  * Crafted with ❤ by Salla
  */
-import{transformTag as t,proxyCustomElement as s,HTMLElement as e,createEvent as i,h as l,Host as a}from"@stencil/core/internal/client";import{M as r}from"./mail.js";import{C as o}from"./cancel.js";import{d as n}from"./salla-button2.js";import{d as h}from"./salla-loading2.js";import{d as c}from"./salla-modal2.js";import{d as u}from"./salla-tel-input2.js";const m=s(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.quickOrderSubmited=i(this,"quickOrderSubmited",7),this.quickOrderTitle="ليش تنتظر؟",this.subTitle="احصل على المنتج مباشرة الآن",this.payButtonTitle="اطلب المنتج",this.confirmPayButtonTitle="اشتر الآن",this.agreementText=salla.lang.get("pages.checkout.show_full_agreement"),this.isEmailRequired=!1,this.quickOrderStyle="default",this.isAvailable=!1,this.oneClick=!1,this.expanded=!1,this.isTermsRequired=!1,this.countryCode=salla.config.get("user.country_code","SA")||"SA",this.submitSucess=!1,this.placeHolderEmail=salla.lang.get("common.elements.email"),this.emailOptional=salla.lang.get("common.elements.optional"),this.agreementShowText=salla.lang.get("pages.checkout.show_full_agreement"),this.agreementModalHead=salla.lang.get("pages.checkout.full_agreement"),this.userNameLabel=salla.lang.get("pages.products.your_name"),this.termsChecked=!1,salla.onReady((()=>{this.productId=this.productId||salla.config.get("page.id")})),salla.lang.onLoaded((()=>{this.placeHolderEmail=salla.lang.get("common.elements.email"),this.emailOptional=salla.lang.get("common.elements.optional"),this.agreementShowText=salla.lang.get("pages.checkout.show_full_agreement"),this.agreementModalHead=salla.lang.get("pages.checkout.full_agreement"),this.userNameLabel=salla.lang.get("pages.products.your_name")}))}getBtnColor(){return"default"===this.quickOrderStyle?"light":"primary"}getErrorMessage(t,s){return"terms"==s?salla.lang.get("pages.checkout.check_agreement"):salla.lang.get("common.errors."+t,{attribute:"name"==s?this.userNameLabel:this.placeHolderEmail})}handleInvalidInput(t){let s,e=t.target,i=e.validity;i.valueMissing?(s=this.getErrorMessage("field_required",e.name),console.log(this.getErrorMessage("field_required",e.name))):i.typeMismatch&&(s=this.getErrorMessage("invalid_value",e.name)),e.setCustomValidity(s)}async setWrapperHeight(){let t=this.host.querySelector(".s-quick-order-expandable");setTimeout((()=>{t.style.maxHeight=t.style.maxHeight||this.oneClick?null:t.scrollHeight+"px"}),50)}getDarkOrLight(){return"default"===this.quickOrderStyle&&salla.config.get("theme.color.is_dark")?"dark":"light"}getStyleColor(){return{gray:"#f3f3f3",white:"#ffffff",default:salla.config.get("theme.color.primary")}[this.quickOrderStyle]||"#f3f3f3"}async submit(t,s=!1){return t.preventDefault(),s&&!this.oneClick?(this.expanded=!this.expanded,void this.setWrapperHeight()):this.submitBtn.load().then((()=>this.getPayload())).then((t=>salla.api.cart.createQuickOrder(t))).then((()=>{setTimeout((()=>{this.submitBtn.stop(),this.submitSucess=!0,this.quickOrderSubmited.emit()}),200)})).catch((t=>t&&(console.error(t),this.submitBtn.stop())))}async getPayload(){return this.oneClick?{product_ids:[this.productId],agreement:!0}:{product_ids:[this.productId],email:this.emailInput?.value,phone:Number((await(this.phoneInput?.getValues()))?.phone),country_code:(await(this.phoneInput?.getValues()))?.countryCode||this.countryCode,name:this.nameInput?.value,agreement:this.termsChecked}}formatAgreementText(t,s=150){return t?t.length<=s?t:(new DOMParser).parseFromString(t,"text/html").documentElement.innerText.substring(0,s)+"...":""}loadQuickOrderSettings(){let t=salla.config.get("store.settings.quick_order");return t?(this.user=salla.config.get("user")||salla.storage.get("user")||{},this.countryCode=this.user?.country_code||this.countryCode,this.isEmailRequired=!this.user?.email&&this.isEmailRequired,this.oneClick=this.user?.email,this.initComponentData(t),Promise.resolve()):Promise.resolve()}initComponentData(t){this.quickOrderTitle=t.title,this.subTitle=t.sub_title,this.payButtonTitle=t.order_now_button,this.isEmailRequired=t.is_email_required,this.isTermsRequired=t.show_agreement,this.agreementText=t.agreement,this.confirmPayButtonTitle=t.confirm_button,this.thanksMessage=t.thanks_message,this.quickOrderStyle=t.style,this.isAvailable=!0,this.oneClick=this.oneClick&&!this.isTermsRequired}componentWillLoad(){return new Promise((t=>salla.onReady((()=>this.loadQuickOrderSettings().then(t)))))}render(){if(this.isAvailable)return this.submitSucess?l(a,{class:"s-quick-order"},l("div",{class:"s-quick-order-confirm",style:{backgroundColor:salla.config.get("theme.color.primary")+"10",borderColor:salla.config.get("theme.color.primary")+"10",color:salla.config.get("theme.color.primary")}},l("i",{innerHTML:'\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>party-horn</title>\n<path fill="currentColor" d="M5.333 4.013c0.736 0 1.333-0.596 1.333-1.333v-0.013c0-0.737-0.597-1.327-1.333-1.327s-1.333 0.603-1.333 1.34 0.597 1.333 1.333 1.333zM11.333 10c0.341 0 0.683-0.131 0.943-0.391 1.541-1.54 2.391-3.589 2.391-5.771v-2.505c0-0.737-0.597-1.333-1.333-1.333s-1.333 0.596-1.333 1.333v2.505c0 1.468-0.572 2.848-1.609 3.885-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.601 0.391 0.943 0.391zM18.667 9.993c0.319 0 0.639-0.115 0.895-0.345 0.383-0.347 0.684-0.325 1.497-0.22 0.923 0.124 2.319 0.307 3.636-0.887 1.293-1.172 1.303-2.54 1.308-3.539 0.005-0.887 0.043-1.228 0.432-1.581 0.361-0.327 0.621-0.335 1.493-0.216 0.923 0.12 2.317 0.307 3.635-0.884 0.545-0.495 0.587-1.337 0.093-1.883-0.493-0.547-1.336-0.589-1.884-0.093-0.361 0.325-0.621 0.333-1.493 0.216-0.921-0.119-2.317-0.305-3.635 0.884-1.293 1.173-1.303 2.541-1.308 3.54-0.005 0.885-0.043 1.227-0.432 1.58-0.383 0.348-0.683 0.327-1.497 0.22-0.924-0.124-2.32-0.305-3.636 0.887-0.545 0.495-0.587 1.339-0.092 1.884 0.264 0.291 0.625 0.437 0.988 0.437zM18.667 16.013c0.736 0 1.333-0.596 1.333-1.333v-0.013c0-0.737-0.597-1.327-1.333-1.327s-1.333 0.603-1.333 1.34 0.597 1.333 1.333 1.333zM30.667 17.333h-2.505c-2.179 0-4.228 0.849-5.771 2.391-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.603 0.391 0.944 0.391s0.683-0.131 0.943-0.391c1.023-1.023 2.439-1.609 3.884-1.609h2.505c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333zM30.667 10.66c-0.736 0-1.333 0.603-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.596 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327zM29.333 26.66c-0.736 0-1.333 0.603-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.596 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327zM7.456 11.057c-0.327-0.327-0.799-0.46-1.249-0.356-0.449 0.107-0.812 0.439-0.959 0.876l-5.036 15.113c-0.487 1.457-0.113 3.037 0.973 4.125 0.772 0.771 1.792 1.183 2.84 1.183 0.428 0 0.861-0.068 1.284-0.209l15.112-5.037c0.439-0.145 0.769-0.508 0.876-0.959 0.107-0.449-0.028-0.921-0.355-1.249zM4.467 29.259c-0.503 0.163-1.023 0.043-1.395-0.329-0.373-0.373-0.497-0.896-0.329-1.396l4.355-13.065 10.436 10.435z"></path>\n</svg>\n'}),l("span",null,this.thanksMessage))):l(a,{class:"s-quick-order s-quick-order-"+this.getDarkOrLight()},l("div",{class:"s-quick-order-container s-quick-order-"+this.quickOrderStyle,style:{backgroundColor:this.getStyleColor()}},l("div",{class:"s-quick-order-button-cont"},l("div",null,l("h3",null,this.quickOrderTitle),l("p",null,this.subTitle)),l("salla-button",{class:this.expanded?"s-quick-order-btn-close":"",onClick:t=>this.submit(t,!0),color:this.getBtnColor()},this.oneClick?this.confirmPayButtonTitle:this.expanded?l("i",{innerHTML:o}):this.confirmPayButtonTitle)),l("form",{onSubmit:t=>this.submit(t),class:"s-quick-order-expandable "+(this.expanded?"s-quick-order-shown":"")},Salla.config.isGuest()&&[l("div",{class:"s-form-group"},l("span",{innerHTML:'\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>portrait</title>\n<path d="M24 1.333h-16c-3.676 0-6.667 2.991-6.667 6.667v16c0 3.028 2.041 5.561 4.811 6.371 0.004 0.001 0.008 0.003 0.012 0.004 0.591 0.172 1.2 0.292 1.844 0.292h16c0.644 0 1.253-0.12 1.843-0.292 0.004-0.001 0.008-0.003 0.012-0.004 2.771-0.809 4.812-3.343 4.812-6.371v-16c0-3.676-2.991-6.667-6.667-6.667zM8.012 28c0.121-1.915 3.363-4 7.988-4s7.868 2.085 7.988 4zM28 24c0 1.24-0.579 2.335-1.467 3.069-0.768-3.288-5.112-5.736-10.533-5.736s-9.765 2.448-10.533 5.736c-0.888-0.735-1.467-1.829-1.467-3.069v-16c0-2.205 1.795-4 4-4h16c2.205 0 4 1.795 4 4zM16 6.667c-3.308 0-6 2.692-6 6s2.692 6 6 6 6-2.692 6-6-2.692-6-6-6zM16 16c-1.839 0-3.333-1.495-3.333-3.333s1.495-3.333 3.333-3.333 3.333 1.495 3.333 3.333-1.495 3.333-3.333 3.333z"></path>\n</svg>\n'}),l("input",{type:"text",required:!0,class:"s-form-control s-quick-order-phone-field",name:"name",placeholder:this.userNameLabel,ref:t=>this.nameInput=t})),l("div",{class:"s-quick-order-flex-input"},l("div",{class:"s-form-group"},l("span",{innerHTML:'\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>iphone-x</title>\n<path d="M24 0h-16c-2.205 0-4 1.795-4 4v24c0 2.205 1.795 4 4 4h16c2.205 0 4-1.795 4-4v-24c0-2.205-1.795-4-4-4zM25.333 28c0 0.736-0.597 1.333-1.333 1.333h-16c-0.736 0-1.333-0.597-1.333-1.333v-24c0-0.735 0.597-1.333 1.333-1.333h4c0 1.471 1.196 2.667 2.667 2.667h2.667c1.471 0 2.667-1.196 2.667-2.667h4c0.736 0 1.333 0.599 1.333 1.333z"></path>\n</svg>\n'}),l("salla-tel-input",{ref:t=>this.phoneInput=t})),l("div",{class:"s-form-group"},l("span",{innerHTML:r}),l("input",{type:"email",class:"s-form-control s-quick-order-email-field",name:"email",required:this.isEmailRequired,placeholder:this.placeHolderEmail+" "+(this.isEmailRequired?"":this.emailOptional),ref:t=>this.emailInput=t})))],this.isTermsRequired&&l("label",{htmlFor:"terms",class:"s-quick-order-terms"},l("input",{type:"checkbox",required:!0,name:"terms",id:"terms",ref:t=>this.termsInput=t,onChange:()=>this.termsChecked=this.termsInput.checked,class:"s-checkbox"}),l("span",{class:"s-form-label"}," ",l("div",{innerHTML:this.formatAgreementText(this.agreementText,150)},this.agreementText.length>150&&l("salla-button",{shape:"link",onClick:()=>this.agreementModal.open()},this.agreementShowText))," ")),l("salla-button",{type:"submit",color:this.getBtnColor(),width:"wide",ref:t=>this.submitBtn=t},this.payButtonTitle)),l("salla-modal",{"modal-title":this.agreementModalHead,ref:t=>this.agreementModal=t},l("article",{innerHTML:this.agreementText}))))}componentDidLoad(){this.host.querySelectorAll("input").forEach((t=>{t.addEventListener("invalid",(t=>{this.handleInvalidInput(t)})),t.addEventListener("input",(()=>{t.setCustomValidity(""),t.reportValidity()}))}))}get host(){return this}static get style(){return".s-quick-order-expandable:not(.s-quick-order-shown){overflow:hidden}"}},[0,"salla-quick-order",{quickOrderTitle:[1025,"quick-order-title"],subTitle:[1025,"sub-title"],payButtonTitle:[1025,"pay-button-title"],confirmPayButtonTitle:[1025,"confirm-pay-button-title"],agreementText:[1025,"agreement-text"],isEmailRequired:[1028,"is-email-required"],productId:[1025,"product-id"],thanksMessage:[1025,"thanks-message"],quickOrderStyle:[1025,"quick-order-style"],user:[32],isAvailable:[32],oneClick:[32],expanded:[32],isTermsRequired:[32],countryCode:[32],submitSucess:[32],placeHolderEmail:[32],emailOptional:[32],agreementShowText:[32],agreementModalHead:[32],userNameLabel:[32],termsChecked:[32]}]);function d(){"undefined"!=typeof customElements&&["salla-quick-order","salla-button","salla-loading","salla-modal","salla-tel-input"].forEach((s=>{switch(s){case"salla-quick-order":customElements.get(t(s))||customElements.define(t(s),m);break;case"salla-button":customElements.get(t(s))||n();break;case"salla-loading":customElements.get(t(s))||h();break;case"salla-modal":customElements.get(t(s))||c();break;case"salla-tel-input":customElements.get(t(s))||u()}}))}d();const p=m,g=d;export{p as SallaQuickOrder,g as defineCustomElement}
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { M as MailIcon } from './mail.js';
+import { C as Cancel } from './cancel.js';
+import { d as defineCustomElement$5 } from './salla-button2.js';
+import { d as defineCustomElement$4 } from './salla-loading2.js';
+import { d as defineCustomElement$3 } from './salla-modal2.js';
+import { d as defineCustomElement$2 } from './salla-tel-input2.js';
+
+var CelebrationIcon = `<!-- 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>party-horn</title>
+<path fill="currentColor" d="M5.333 4.013c0.736 0 1.333-0.596 1.333-1.333v-0.013c0-0.737-0.597-1.327-1.333-1.327s-1.333 0.603-1.333 1.34 0.597 1.333 1.333 1.333zM11.333 10c0.341 0 0.683-0.131 0.943-0.391 1.541-1.54 2.391-3.589 2.391-5.771v-2.505c0-0.737-0.597-1.333-1.333-1.333s-1.333 0.596-1.333 1.333v2.505c0 1.468-0.572 2.848-1.609 3.885-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.601 0.391 0.943 0.391zM18.667 9.993c0.319 0 0.639-0.115 0.895-0.345 0.383-0.347 0.684-0.325 1.497-0.22 0.923 0.124 2.319 0.307 3.636-0.887 1.293-1.172 1.303-2.54 1.308-3.539 0.005-0.887 0.043-1.228 0.432-1.581 0.361-0.327 0.621-0.335 1.493-0.216 0.923 0.12 2.317 0.307 3.635-0.884 0.545-0.495 0.587-1.337 0.093-1.883-0.493-0.547-1.336-0.589-1.884-0.093-0.361 0.325-0.621 0.333-1.493 0.216-0.921-0.119-2.317-0.305-3.635 0.884-1.293 1.173-1.303 2.541-1.308 3.54-0.005 0.885-0.043 1.227-0.432 1.58-0.383 0.348-0.683 0.327-1.497 0.22-0.924-0.124-2.32-0.305-3.636 0.887-0.545 0.495-0.587 1.339-0.092 1.884 0.264 0.291 0.625 0.437 0.988 0.437zM18.667 16.013c0.736 0 1.333-0.596 1.333-1.333v-0.013c0-0.737-0.597-1.327-1.333-1.327s-1.333 0.603-1.333 1.34 0.597 1.333 1.333 1.333zM30.667 17.333h-2.505c-2.179 0-4.228 0.849-5.771 2.391-0.521 0.521-0.521 1.364 0 1.885 0.26 0.26 0.603 0.391 0.944 0.391s0.683-0.131 0.943-0.391c1.023-1.023 2.439-1.609 3.884-1.609h2.505c0.736 0 1.333-0.596 1.333-1.333s-0.597-1.333-1.333-1.333zM30.667 10.66c-0.736 0-1.333 0.603-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.596 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327zM29.333 26.66c-0.736 0-1.333 0.603-1.333 1.34s0.597 1.333 1.333 1.333 1.333-0.596 1.333-1.333v-0.013c0-0.736-0.597-1.327-1.333-1.327zM7.456 11.057c-0.327-0.327-0.799-0.46-1.249-0.356-0.449 0.107-0.812 0.439-0.959 0.876l-5.036 15.113c-0.487 1.457-0.113 3.037 0.973 4.125 0.772 0.771 1.792 1.183 2.84 1.183 0.428 0 0.861-0.068 1.284-0.209l15.112-5.037c0.439-0.145 0.769-0.508 0.876-0.959 0.107-0.449-0.028-0.921-0.355-1.249zM4.467 29.259c-0.503 0.163-1.023 0.043-1.395-0.329-0.373-0.373-0.497-0.896-0.329-1.396l4.355-13.065 10.436 10.435z"></path>
+</svg>
+`;
+
+var PortraitIcon = `<!-- 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>portrait</title>
+<path d="M24 1.333h-16c-3.676 0-6.667 2.991-6.667 6.667v16c0 3.028 2.041 5.561 4.811 6.371 0.004 0.001 0.008 0.003 0.012 0.004 0.591 0.172 1.2 0.292 1.844 0.292h16c0.644 0 1.253-0.12 1.843-0.292 0.004-0.001 0.008-0.003 0.012-0.004 2.771-0.809 4.812-3.343 4.812-6.371v-16c0-3.676-2.991-6.667-6.667-6.667zM8.012 28c0.121-1.915 3.363-4 7.988-4s7.868 2.085 7.988 4zM28 24c0 1.24-0.579 2.335-1.467 3.069-0.768-3.288-5.112-5.736-10.533-5.736s-9.765 2.448-10.533 5.736c-0.888-0.735-1.467-1.829-1.467-3.069v-16c0-2.205 1.795-4 4-4h16c2.205 0 4 1.795 4 4zM16 6.667c-3.308 0-6 2.692-6 6s2.692 6 6 6 6-2.692 6-6-2.692-6-6-6zM16 16c-1.839 0-3.333-1.495-3.333-3.333s1.495-3.333 3.333-3.333 3.333 1.495 3.333 3.333-1.495 3.333-3.333 3.333z"></path>
+</svg>
+`;
+
+var IphoneXIcon = `<!-- 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>iphone-x</title>
+<path d="M24 0h-16c-2.205 0-4 1.795-4 4v24c0 2.205 1.795 4 4 4h16c2.205 0 4-1.795 4-4v-24c0-2.205-1.795-4-4-4zM25.333 28c0 0.736-0.597 1.333-1.333 1.333h-16c-0.736 0-1.333-0.597-1.333-1.333v-24c0-0.735 0.597-1.333 1.333-1.333h4c0 1.471 1.196 2.667 2.667 2.667h2.667c1.471 0 2.667-1.196 2.667-2.667h4c0.736 0 1.333 0.599 1.333 1.333z"></path>
+</svg>
+`;
+
+const sallaQuickOrderCss = ".s-quick-order-expandable:not(.s-quick-order-shown){overflow:hidden}";
+
+const SallaQuickOrder$1 = /*@__PURE__*/ proxyCustomElement(class SallaQuickOrder extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.quickOrderSubmited = createEvent(this, "quickOrderSubmited", 7);
+        /**
+         * quick order title
+         */
+        this.quickOrderTitle = 'ليش تنتظر؟';
+        /**
+         * quick order sub title
+         */
+        this.subTitle = 'احصل على المنتج مباشرة الآن';
+        /**
+         * quick order pay button text
+         */
+        this.payButtonTitle = 'اطلب المنتج';
+        /**
+         * quick order confirm pay button text
+         */
+        this.confirmPayButtonTitle = 'اشتر الآن';
+        /**
+         * agreement text from server or from props
+         */
+        this.agreementText = salla.lang.get('pages.checkout.show_full_agreement');
+        /**
+         * is email required
+         */
+        this.isEmailRequired = false;
+        /**
+         * Quick Order Style
+         */
+        this.quickOrderStyle = 'default';
+        this.isAvailable = false;
+        this.oneClick = false;
+        this.expanded = false;
+        this.isTermsRequired = false;
+        this.countryCode = salla.config.get('user.country_code', 'SA') || 'SA';
+        this.submitSucess = false;
+        //Langugae states
+        this.placeHolderEmail = salla.lang.get('common.elements.email');
+        this.emailOptional = salla.lang.get('common.elements.optional');
+        this.agreementShowText = salla.lang.get('pages.checkout.show_full_agreement');
+        this.agreementModalHead = salla.lang.get('pages.checkout.full_agreement');
+        this.userNameLabel = salla.lang.get('pages.products.your_name');
+        this.termsChecked = false;
+        salla.onReady(() => {
+            this.productId = this.productId || salla.config.get('page.id');
+        });
+        salla.lang.onLoaded(() => {
+            this.placeHolderEmail = salla.lang.get('common.elements.email');
+            this.emailOptional = salla.lang.get('common.elements.optional');
+            this.agreementShowText = salla.lang.get('pages.checkout.show_full_agreement');
+            this.agreementModalHead = salla.lang.get('pages.checkout.full_agreement');
+            this.userNameLabel = salla.lang.get('pages.products.your_name');
+        });
+    }
+    getBtnColor() {
+        return this.quickOrderStyle === 'default' ? 'light' : 'primary';
+    }
+    getErrorMessage(type, name) {
+        return name == 'terms'
+            ? salla.lang.get('pages.checkout.check_agreement')
+            : salla.lang.get(`common.errors.${type}`, { attribute: name == 'name' ? this.userNameLabel : this.placeHolderEmail });
+    }
+    handleInvalidInput(e) {
+        let input = e.target;
+        let validity = input.validity;
+        let errorMessage;
+        if (validity.valueMissing) {
+            errorMessage = this.getErrorMessage('field_required', input.name);
+            console.log(this.getErrorMessage('field_required', input.name));
+        }
+        else if (validity.typeMismatch) {
+            errorMessage = this.getErrorMessage('invalid_value', input.name);
+        }
+        input.setCustomValidity(errorMessage);
+    }
+    async setWrapperHeight() {
+        let expandable = this.host.querySelector('.s-quick-order-expandable');
+        setTimeout(() => {
+            if (expandable.style.maxHeight || this.oneClick) {
+                expandable.style.maxHeight = null;
+            }
+            else {
+                expandable.style.maxHeight = expandable.scrollHeight + "px";
+            }
+        }, 50);
+    }
+    getDarkOrLight() {
+        return this.quickOrderStyle === 'default' && salla.config.get('theme.color.is_dark') ? 'dark' : 'light';
+    }
+    getStyleColor() {
+        return {
+            gray: '#f3f3f3',
+            white: '#ffffff',
+            default: salla.config.get('theme.color.primary'),
+        }[this.quickOrderStyle] || '#f3f3f3';
+    }
+    async submit(e, checkOneClick = false) {
+        e.preventDefault();
+        if (checkOneClick && !this.oneClick) {
+            this.expanded = !this.expanded;
+            this.setWrapperHeight();
+            return;
+        }
+        return this.submitBtn.load()
+            .then(() => this.getPayload())
+            .then((payload) => salla.api.cart.createQuickOrder(payload))
+            .then(() => {
+            setTimeout(() => {
+                this.submitBtn.stop();
+                this.submitSucess = true;
+                this.quickOrderSubmited.emit();
+            }, 200);
+        })
+            .catch(error => error && (console.error(error), this.submitBtn.stop()));
+    }
+    async getPayload() {
+        if (this.oneClick) {
+            return {
+                product_ids: [this.productId],
+                agreement: true,
+            };
+        }
+        return {
+            product_ids: [this.productId],
+            email: this.emailInput?.value,
+            phone: Number((await this.phoneInput?.getValues())?.phone),
+            country_code: (await this.phoneInput?.getValues())?.countryCode || this.countryCode,
+            name: this.nameInput?.value,
+            agreement: this.termsChecked,
+        };
+    }
+    formatAgreementText(agreement_text, length = 150) {
+        if (!agreement_text)
+            return '';
+        if (agreement_text.length <= length)
+            return agreement_text;
+        const parsedToDOM = new DOMParser().parseFromString(agreement_text, 'text/html');
+        return parsedToDOM.documentElement.innerText.substring(0, length) + '...';
+    }
+    loadQuickOrderSettings() {
+        let data = salla.config.get('store.settings.quick_order');
+        if (!data) {
+            return Promise.resolve();
+        }
+        this.user = salla.config.get('user') || salla.storage.get('user') || {};
+        this.countryCode = this.user?.country_code || this.countryCode;
+        // make email required if user is gust or is required from server
+        this.isEmailRequired = this.user?.email ? false : this.isEmailRequired;
+        // check if one click is available
+        this.oneClick = this.user?.email;
+        this.initComponentData(data);
+        return Promise.resolve();
+        // return salla.api.withoutNotifier(() => salla.api.cart.getQuickOrderSettings().then(res => this.initComponentData(res.data)));
+    }
+    initComponentData(data) {
+        this.quickOrderTitle = data.title;
+        this.subTitle = data.sub_title;
+        this.payButtonTitle = data.order_now_button;
+        this.isEmailRequired = data.is_email_required;
+        this.isTermsRequired = data.show_agreement;
+        this.agreementText = data.agreement;
+        this.confirmPayButtonTitle = data.confirm_button;
+        this.thanksMessage = data.thanks_message;
+        this.quickOrderStyle = data.style;
+        this.isAvailable = true;
+        // toggle oneClick if true
+        this.oneClick = this.oneClick && !this.isTermsRequired;
+    }
+    componentWillLoad() {
+        return new Promise(resolve => salla.onReady(() => this.loadQuickOrderSettings().then(resolve)));
+    }
+    render() {
+        if (!this.isAvailable) {
+            return;
+        }
+        if (this.submitSucess) {
+            return (h(Host, { class: "s-quick-order" }, h("div", { class: 's-quick-order-confirm', style: {
+                    backgroundColor: salla.config.get('theme.color.primary') + '10',
+                    borderColor: salla.config.get('theme.color.primary') + '10',
+                    color: salla.config.get('theme.color.primary')
+                } }, h("i", { innerHTML: CelebrationIcon }), h("span", null, this.thanksMessage))));
+        }
+        return (h(Host, { class: `s-quick-order s-quick-order-${this.getDarkOrLight()}` }, h("div", { class: `s-quick-order-container s-quick-order-${this.quickOrderStyle}`, style: { backgroundColor: this.getStyleColor() } }, h("div", { class: "s-quick-order-button-cont" }, h("div", null, h("h3", null, this.quickOrderTitle), h("p", null, this.subTitle)), h("salla-button", { class: this.expanded ? "s-quick-order-btn-close" : "", onClick: (e) => this.submit(e, true), color: this.getBtnColor() }, this.oneClick
+            ? this.confirmPayButtonTitle : this.expanded ? h("i", { innerHTML: Cancel }) : this.confirmPayButtonTitle)), h("form", { onSubmit: (e) => this.submit(e), class: 's-quick-order-expandable ' + (this.expanded ? 's-quick-order-shown' : '') }, Salla.config.isGuest() &&
+            [
+                h("div", { class: "s-form-group" }, h("span", { innerHTML: PortraitIcon }), h("input", { type: "text", required: true, class: "s-form-control s-quick-order-phone-field", name: 'name', placeholder: this.userNameLabel, ref: el => (this.nameInput = el) })),
+                h("div", { class: "s-quick-order-flex-input" }, h("div", { class: "s-form-group" }, h("span", { innerHTML: IphoneXIcon }), h("salla-tel-input", { ref: el => (this.phoneInput = el) })), h("div", { class: "s-form-group" }, h("span", { innerHTML: MailIcon }), h("input", { type: "email", class: "s-form-control s-quick-order-email-field", name: 'email', required: this.isEmailRequired, placeholder: this.placeHolderEmail + ' ' + (this.isEmailRequired ? '' : this.emailOptional), ref: el => (this.emailInput = el) }))),
+            ], this.isTermsRequired && (h("label", { htmlFor: "terms", class: "s-quick-order-terms" }, h("input", { type: "checkbox", required: true, name: 'terms', id: 'terms', ref: el => (this.termsInput = el), onChange: () => (this.termsChecked = this.termsInput.checked), class: "s-checkbox" }), h("span", { class: "s-form-label" }, " ", h("div", { innerHTML: this.formatAgreementText(this.agreementText, 150) }, this.agreementText.length > 150 && (h("salla-button", { shape: "link", onClick: () => this.agreementModal.open() }, this.agreementShowText))), " "))), h("salla-button", { type: "submit", color: this.getBtnColor(), width: "wide", ref: el => (this.submitBtn = el) }, this.payButtonTitle)), h("salla-modal", { "modal-title": this.agreementModalHead, ref: modal => (this.agreementModal = modal) }, h("article", { innerHTML: this.agreementText })))));
+    }
+    componentDidLoad() {
+        this.host.querySelectorAll('input').forEach(input => {
+            input.addEventListener('invalid', e => {
+                this.handleInvalidInput(e);
+            });
+            input.addEventListener('input', () => {
+                input.setCustomValidity('');
+                input.reportValidity();
+            });
+        });
+    }
+    get host() { return this; }
+    static get style() { return sallaQuickOrderCss; }
+}, [0, "salla-quick-order", {
+        "quickOrderTitle": [1025, "quick-order-title"],
+        "subTitle": [1025, "sub-title"],
+        "payButtonTitle": [1025, "pay-button-title"],
+        "confirmPayButtonTitle": [1025, "confirm-pay-button-title"],
+        "agreementText": [1025, "agreement-text"],
+        "isEmailRequired": [1028, "is-email-required"],
+        "productId": [1025, "product-id"],
+        "thanksMessage": [1025, "thanks-message"],
+        "quickOrderStyle": [1025, "quick-order-style"],
+        "user": [32],
+        "isAvailable": [32],
+        "oneClick": [32],
+        "expanded": [32],
+        "isTermsRequired": [32],
+        "countryCode": [32],
+        "submitSucess": [32],
+        "placeHolderEmail": [32],
+        "emailOptional": [32],
+        "agreementShowText": [32],
+        "agreementModalHead": [32],
+        "userNameLabel": [32],
+        "termsChecked": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["salla-quick-order", "salla-button", "salla-loading", "salla-modal", "salla-tel-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "salla-quick-order":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SallaQuickOrder$1);
+            }
+            break;
+        case "salla-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "salla-loading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "salla-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "salla-tel-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const SallaQuickOrder = SallaQuickOrder$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { SallaQuickOrder, defineCustomElement };