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

Salla Web Component

/*!
 * Crafted with ❤ by Salla
 */
import{r as e,h as s}from"./p-BQQ2x3w_.js";import{G as l}from"./p-OF8QcbMM.js";const a=class{constructor(s){e(this,s),this.minAge=10,this.isEditable=!0,this.disableAction=!1,this.isLoading=!0,this.first_name_trans=salla.lang.get("pages.profile.first_name"),this.last_name_trans=salla.lang.get("pages.profile.last_name"),this.birthday_trans=salla.lang.get("pages.profile.birthday"),this.birthday_placeholder_trans=salla.lang.get("pages.profile.birthday_placeholder"),this.gender_trans=salla.lang.get("pages.profile.gender"),this.gender_placeholder_trans=salla.lang.get("pages.profile.gender_placeholder"),this.male_trans=salla.lang.get("pages.profile.male"),this.female_trans=salla.lang.get("pages.profile.female"),this.email_trans=salla.lang.get("common.elements.email"),this.mobile_trans=salla.lang.get("common.elements.mobile"),this.save_btn_trans=salla.lang.get("common.elements.save"),this.drag_and_drop_trans=salla.lang.get("common.uploader.drag_and_drop"),this.browse_trans=salla.lang.get("common.uploader.browse"),this.email_required_trans=salla.lang.get("pages.checkout.email_required"),this.invalid_email_trans=salla.lang.get("pages.error.invalid_value",{attribute:"email"}),salla.lang.onLoaded((()=>{this.first_name_trans=salla.lang.get("pages.profile.first_name"),this.last_name_trans=salla.lang.get("pages.profile.last_name"),this.birthday_trans=salla.lang.get("pages.profile.birthday"),this.birthday_placeholder_trans=salla.lang.get("pages.profile.birthday_placeholder"),this.gender_trans=salla.lang.get("pages.profile.gender"),this.gender_placeholder_trans=salla.lang.get("pages.profile.gender_placeholder"),this.male_trans=salla.lang.get("pages.profile.male"),this.female_trans=salla.lang.get("pages.profile.female"),this.email_trans=salla.lang.get("common.elements.email"),this.mobile_trans=salla.lang.get("common.elements.mobile"),this.save_btn_trans=salla.lang.get("common.elements.save"),this.drag_and_drop_trans=salla.lang.get("common.uploader.drag_and_drop"),this.browse_trans=salla.lang.get("common.uploader.browse"),this.email_required_trans=salla.lang.get("pages.checkout.email_required"),this.invalid_email_trans=salla.lang.get("pages.error.invalid_value",{attribute:"email"})}))}phoneNumberFieldEventHandler(e){e.detail.number?(this.userData.phone.number=Number.parseInt(e.detail.number),this.userData.phone.country=e.detail.country_code,this.disableAction=!1):this.disableAction=!0}handleFieldChange(e,s,l=!1){s.target.value?(this.userData[e]=s.target.value,this.disableAction=!1):l&&(this.disableAction=!0)}handleEmailInput(e,s){const l=document.getElementById("email-error"),a=s.target.value;if(!a)return this.disableAction=!0,void(l.textContent=this.email_required_trans);/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(a)||(this.disableAction=!0,l.textContent=this.invalid_email_trans),l.textContent="",this.userData[e]=a,this.disableAction=!1}submitForm(e){e.preventDefault(),this.disableAction=!0;const s=Object.assign({},this.userData);s.phone=void 0,s.phone=this.userData.phone.number,s.country_code=this.userData.phone.country,salla.api.profile.update(s).finally((()=>{this.disableAction=!1}))}getBirthDateRestriction(){const e=new Date,s=e.getFullYear()-this.minAge;return e.setFullYear(s),e}fetchData(){return salla.api.profile.info().then((e=>{this.userData=e.data})).finally((()=>{this.isLoading=!1,this.isEditable=!Salla.config.get("store.features").includes("sso-login")}))}renderLoadingSection(){return s("div",{class:"s-user-profile-skeleton-wrapper"},Array.from({length:6},((e,l)=>s("salla-skeleton",{class:"skeleton-item",width:"100%",height:"50px",key:l}))))}componentWillLoad(){Salla.onReady().then((()=>this.fetchData()))}render(){return this.isLoading?this.renderLoadingSection():s("form",{onSubmit:e=>this.submitForm(e)},s("div",{class:"s-user-profile-wrapper"},s("div",{class:"s-user-profile-field"},s("label",{htmlFor:"first-name",class:"s-user-profile-field-label"},this.first_name_trans),s("input",{disabled:!this.isEditable,type:"text",name:"first_name",value:this.userData.first_name,id:"first-name",required:!0,autocomplete:"first_name",class:"form-input",onChange:e=>this.handleFieldChange("first_name",e)})),s("div",{class:"s-user-profile-field"},s("label",{htmlFor:"last-name",class:"s-user-profile-field-label"},this.last_name_trans),s("input",{disabled:!this.isEditable,type:"text",name:"last_name",value:this.userData.last_name,id:"last-name",required:!0,autocomplete:"last_name",class:"form-input",onChange:e=>this.handleFieldChange("last_name",e)})),s("div",{class:"s-user-profile-field"},s("label",{htmlFor:"birthday",class:"s-user-profile-field-label"},this.birthday_trans),s("salla-datetime-picker",{disabled:!this.isEditable,dateFormat:"Y-m-d",value:this.userData.birthday,placeholder:this.birthday_placeholder_trans,required:!0,maxDate:this.getBirthDateRestriction(),name:"birthday",onPicked:e=>this.handleFieldChange("birthday",e)})),s("div",{class:"s-user-profile-field"},s("label",{htmlFor:"gender",class:"s-user-profile-field-label"},this.gender_trans),s("select",{disabled:!this.isEditable,class:"form-input",name:"gender",required:!0,onChange:e=>this.handleFieldChange("gender",e)},s("option",{value:""},this.gender_placeholder_trans),s("option",{value:l.Male,selected:this.userData.gender===l.Male},this.male_trans),s("option",{value:l.Female,selected:this.userData.gender===l.Female},this.female_trans))),s("div",{class:"s-user-profile-field"},s("label",{htmlFor:"email",class:"s-user-profile-field-label"},this.email_trans),s("input",{disabled:!this.isEditable,type:"email",name:"email",value:this.userData.email,id:"email",class:"form-input",required:!0,onInput:e=>this.handleEmailInput("email",e)}),s("p",{id:"email-error",class:"s-user-profile-field-error"})),s("div",{class:"s-user-profile-field"},s("label",{htmlFor:"international-mobile",class:"s-user-profile-field-label"},this.mobile_trans),s("salla-tel-input",{disabled:!this.isEditable,name:"international-mobile","country-code":this.userData.phone.country,phone:`${this.userData.phone.number}`,onPhoneEntered:e=>this.phoneNumberFieldEventHandler(e)}))),s("salla-button",{type:"submit",loading:this.disableAction,disabled:this.disableAction||!this.isEditable,"loader-position":"end",class:"s-user-profile-submit"},this.save_btn_trans))}};a.style=":host{display:block}";export{a as salla_user_profile}