@meetelise/chat 1.14.0 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meetelise/chat",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "",
   "main": "public/dist/index.js",
   "type": "module",

package/public/dist/index.js

@@ -430,14 +430,14 @@ var e={8005:function(e,t,n){var i,r=this&&this.__extends||(i=function(e,t){retur
     .option.active {
       background-color: var(--active-option-color);
     }
-  `,Gt([oe({attribute:!1})],zt.prototype,"options",void 0),Gt([oe({type:String})],zt.prototype,"placeholder",void 0),Gt([oe({type:String})],zt.prototype,"value",void 0),Gt([ae()],zt.prototype,"activeOption",void 0),Gt([ae()],zt.prototype,"isOpen",void 0),Gt([se("#select",!0)],zt.prototype,"meSelect",void 0),zt=Gt([ie("me-select")],zt);var $t=n(9669),Xt=n.n($t),Qt=n(9991),Kt=n(7739),Zt=n.n(Kt);const Yt={buildingId:null,availabilities:{}},en=async e=>{e&&(Yt.buildingId=e);const t=Yt.buildingId;if(!t)throw new Error("No buildingId was provided to getRawAvailabilities and there is no buildingId cached.");const n=Yt.availabilities;if(n[t])return n[t];const i=function(e){Ee(1,arguments);var t=Fe(e);return t.setHours(0,0,0,0),t}(Date.now()),r=Vt(function(e){Ee(1,arguments);var t=Fe(e);return t.setHours(23,59,59,999),t}(function(e,t){Ee(2,arguments);var n=Fe(e),i=$e(t);return isNaN(i)?new Date(NaN):i?(n.setDate(n.getDate()+i),n):n}(i,30))),o=`https://app.meetelise.com/api/pub/v1/buildings/${t}/tour/availabilities?startTime=${Vt(i)}&endTime=${r}`,a=await Xt().get(o);return Yt.availabilities[t]=a.data,a.data},tn=async(e,t)=>{var n,i;const r=await en(t),o=(null===(n=r.availability)||void 0===n?void 0:n[e])?null===(i=r.availability)||void 0===i?void 0:i[e].availableTourStartTimes:[];return r.availability?{...r.availability[e],availableTourStartTimes:o}:null},nn=async(e,t)=>{var n,i;const r=await tn(e,t);if(!r)return{};const o={availableTourStartTimes:null===(n=r.availableTourStartTimes?r.availableTourStartTimes:[])||void 0===n?void 0:n.map((e=>rn(e)))};return Zt()(null!==(i=o.availableTourStartTimes)&&void 0!==i?i:[],(e=>Pt(new Date(e.datetime),"yyyy-MM-dd")))},rn=e=>({datetime:e.slice(0,19),offset:e.slice(19)});n(7294);const on=()=>window.matchMedia("(max-width: 767px)").matches;var an=n(6486),sn=function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a};let un=class extends te{constructor(){super(...arguments),this.layoutOptions=[],this.tourTypeOptions=[],this.buildingId=0,this.tourType=ln.Guided,this.shouldShowTourType={[ln.Guided]:!0,[ln.Self]:!0,[ln.Virtual]:!0},this.email="",this.phoneNumber="",this.availabilitiesGroupedByDay={},this.mobilePageIndex=0,this.tourIsBooked=!1,this.firstUpdated=async()=>{this.availabilitiesGroupedByDay=await nn(dn[this.tourType]);const e=await(async()=>{var e,t,n,i,r,o;return{[ln.Guided]:!!(null===(t=null===(e=await tn(Qt.TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.WithAgent))||void 0===e?void 0:e.availableTourStartTimes)||void 0===t?void 0:t.length),[ln.Self]:!!(null===(i=null===(n=await tn(Qt.TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.SelfGuided))||void 0===n?void 0:n.availableTourStartTimes)||void 0===i?void 0:i.length),[ln.Virtual]:!!(null===(o=null===(r=await tn(Qt.TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.VirtualShowing))||void 0===r?void 0:r.availableTourStartTimes)||void 0===o?void 0:o.length)}})();this.shouldShowTourType={[ln.Guided]:this.tourTypeOptions.map((e=>e.value)).includes("WITH_AGENT")&&e[ln.Guided],[ln.Self]:this.tourTypeOptions.map((e=>e.value)).includes("SELF_GUIDED")&&e[ln.Self],[ln.Virtual]:this.tourTypeOptions.map((e=>e.value)).includes("VIRTUAL_SHOWING")&&e[ln.Virtual]}},this.willUpdate=async e=>{e.has("tourType")&&(this.availabilitiesGroupedByDay=await nn(dn[this.tourType]))},this.handlePhoneKeydown=e=>{var t;if(!(e instanceof KeyboardEvent&&e.target instanceof HTMLInputElement&&null!==e.target.selectionStart))return;const n=e.target.selectionStart;if(1!==e.key.length||Ne(e)){if("Backspace"===e.key){if(Ne(e))return;if(this.phoneInput.selectionEnd&&this.phoneInput.selectionStart&&this.phoneInput.selectionEnd-this.phoneInput.selectionStart>0)return;const t=this.phoneNumber.length,i=this.phoneNumber.slice(0,n).replace(/\D/g,""),r=this.phoneNumber.slice(n).replace(/\D/g,""),o=`${i.slice(0,-1)}${r}`;this.phoneNumber=Ie(o),this.phoneInput.value=this.phoneNumber;const a=n-(t-this.phoneNumber.length);return this.phoneInput.setSelectionRange(a,a),e.preventDefault(),void e.stopPropagation()}if(!["ArrowLeft","ArrowRight"].includes(e.key)||Ne(e)||e.shiftKey)return;if("ArrowLeft"===e.key){const e=((null===(t=this.phoneNumber.slice(0,n).split(/\d+/).at(-1))||void 0===t?void 0:t.length)||0)+1,i=n-e>-1?n-e:0;this.phoneInput.setSelectionRange(i,i)}if("ArrowRight"===e.key){const e=(this.phoneNumber.slice(n).split(/\d+/)[0].length||0)+1,t=n+e<this.phoneNumber.length?n+e:this.phoneNumber.length;this.phoneInput.setSelectionRange(t,t)}e.preventDefault(),e.stopPropagation()}else{e.preventDefault(),e.stopPropagation();const t=this.phoneNumber.slice(0,n)+e.key+this.phoneNumber.slice(n);this.phoneNumber=Ie(t.replace(/\D/g,"")),this.phoneInput.value=this.phoneNumber}},this.handlePhoneKeyup=e=>{var t;if(!e.key)return;if(e.key.includes("Arrow")||["Meta","Shift","Control","Alt"].includes(e.key))return;const n=this.phoneInput.selectionStart,i=n?this.phoneInput.value.slice(n).replace(/\D/g,""):"";this.phoneNumber=Ie(this.phoneInput.value);let r=0,o=i.length;for(;o;)(null===(t=this.phoneNumber.at(r))||void 0===t?void 0:t.match(/\d/))&&o--,r++;const a=this.phoneInput.value.length-r+1;this.phoneInput.setSelectionRange(a,a)},this.onChangeEmail=e=>{e.target&&(this.email=e.target.value)},this.validators={tourType:()=>!isNaN(this.tourType),dateAndTime:()=>!!this.selectedDate&&!!this.selectedTime,leadInfo:()=>{var e,t,n;return(!!(null===(e=this.firstNameInput)||void 0===e?void 0:e.value)||!!(null===(t=this.lastNameInput)||void 0===t?void 0:t.value))&&(null===(n=this.emailInput)||void 0===n?void 0:n.value.includes("@"))&&!!this.phoneNumber&&14===this.phoneNumber.length}},this.formIsValidForSubmission=()=>this.validators.tourType()&&this.validators.dateAndTime()&&this.validators.leadInfo(),this.timeStringToHoursAndMinutes=e=>{const[t,n]=e.split(/\D/g);return[parseInt(t)+(e.toLowerCase().includes("pm")?12:0),parseInt(n)]},this.submit=async()=>{var e;if(!this.selectedDate||!this.selectedTime)return;const t={email_address:this.email,phone_number:`+1${null===(e=this.phoneNumber.match(/\d/g))||void 0===e?void 0:e.join("")}`,building_id:this.buildingId,first_name:this.firstNameInput.value,last_name:this.lastNameInput.value,tour_type:cn[this.tourType],tour_time:`${this.selectedTime.datetime}${this.selectedTime.offset}`};200===(await Xt().post("https://app.meetelise.com/platformApi/state/create/scheduleMe",t,{headers:{"X-SecurityKey":"JRL8jV4VcSCwOSir5gWkpgNLfKghmhBG"}})).status&&(this.tourIsBooked=!0)},this.mobilePages=[{validate:this.validators.tourType,nextButtonText:"Next",nextButtonAction:()=>{this.mobilePageIndex++},render:()=>D`${this.tourTypeMenu()}`},{validate:this.validators.dateAndTime,nextButtonText:"Next",nextButtonAction:()=>{this.mobilePageIndex++},render:()=>D`${this.dateAndTimeMenu(!0)}`},{validate:()=>this.validators.leadInfo(),nextButtonText:"Schedule tour",nextButtonAction:this.submit,render:()=>D`${this.userInfoAndLayoutMenu()}`}]}tourTypeMenu(){return D`<h2 id="tourType">Tour Type</h2>
+  `,Gt([oe({attribute:!1})],zt.prototype,"options",void 0),Gt([oe({type:String})],zt.prototype,"placeholder",void 0),Gt([oe({type:String})],zt.prototype,"value",void 0),Gt([ae()],zt.prototype,"activeOption",void 0),Gt([ae()],zt.prototype,"isOpen",void 0),Gt([se("#select",!0)],zt.prototype,"meSelect",void 0),zt=Gt([ie("me-select")],zt);var $t=n(9669),Xt=n.n($t),Qt=n(9991),Kt=n(7739),Zt=n.n(Kt);const Yt={buildingId:null,availabilities:{}},en=async e=>{e&&(Yt.buildingId=e);const t=Yt.buildingId;if(!t)throw new Error("No buildingId was provided to getRawAvailabilities and there is no buildingId cached.");const n=Yt.availabilities;if(n[t])return n[t];const i=function(e){Ee(1,arguments);var t=Fe(e);return t.setHours(0,0,0,0),t}(Date.now()),r=Vt(function(e){Ee(1,arguments);var t=Fe(e);return t.setHours(23,59,59,999),t}(function(e,t){Ee(2,arguments);var n=Fe(e),i=$e(t);return isNaN(i)?new Date(NaN):i?(n.setDate(n.getDate()+i),n):n}(i,30))),o=`https://app.meetelise.com/api/pub/v1/buildings/${t}/tour/availabilities?startTime=${Vt(i)}&endTime=${r}`,a=await Xt().get(o);return Yt.availabilities[t]=a.data,a.data},tn=async(e,t)=>{var n,i;const r=await en(t),o=(null===(n=r.availability)||void 0===n?void 0:n[e])?null===(i=r.availability)||void 0===i?void 0:i[e].availableTourStartTimes:[];return r.availability?{...r.availability[e],availableTourStartTimes:o}:null},nn=async(e,t)=>{var n,i;const r=await tn(e,t);if(!r)return{};const o={availableTourStartTimes:null===(n=r.availableTourStartTimes?r.availableTourStartTimes:[])||void 0===n?void 0:n.map((e=>rn(e)))};return Zt()(null!==(i=o.availableTourStartTimes)&&void 0!==i?i:[],(e=>Pt(new Date(e.datetime),"yyyy-MM-dd")))},rn=e=>({datetime:e.slice(0,19),offset:e.slice(19)});n(7294);const on=()=>window.matchMedia("(max-width: 767px)").matches;var an=n(6486),sn=n(4184),un=n.n(sn),ln=function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a};let dn=class extends te{constructor(){super(...arguments),this.layoutOptions=[],this.tourTypeOptions=[],this.buildingId=0,this.tourType=cn.Guided,this.shouldShowTourType={[cn.Guided]:!0,[cn.Self]:!0,[cn.Virtual]:!0},this.email="",this.phoneNumber="",this.availabilitiesGroupedByDay={},this.waitingForAvailabilities=!0,this.mobilePageIndex=0,this.tourIsBooked=!1,this.firstUpdated=async()=>{this.availabilitiesGroupedByDay=await nn(pn[this.tourType]),this.waitingForAvailabilities=!1;const e=await(async()=>{var e,t,n,i,r,o;return{[cn.Guided]:!!(null===(t=null===(e=await tn(Qt.TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.WithAgent))||void 0===e?void 0:e.availableTourStartTimes)||void 0===t?void 0:t.length),[cn.Self]:!!(null===(i=null===(n=await tn(Qt.TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.SelfGuided))||void 0===n?void 0:n.availableTourStartTimes)||void 0===i?void 0:i.length),[cn.Virtual]:!!(null===(o=null===(r=await tn(Qt.TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.VirtualShowing))||void 0===r?void 0:r.availableTourStartTimes)||void 0===o?void 0:o.length)}})();this.shouldShowTourType={[cn.Guided]:this.tourTypeOptions.map((e=>e.value)).includes("WITH_AGENT")&&e[cn.Guided],[cn.Self]:this.tourTypeOptions.map((e=>e.value)).includes("SELF_GUIDED")&&e[cn.Self],[cn.Virtual]:this.tourTypeOptions.map((e=>e.value)).includes("VIRTUAL_SHOWING")&&e[cn.Virtual]}},this.willUpdate=async e=>{e.has("tourType")&&(this.availabilitiesGroupedByDay=await nn(pn[this.tourType]))},this.handlePhoneKeydown=e=>{var t;if(!(e instanceof KeyboardEvent&&e.target instanceof HTMLInputElement&&null!==e.target.selectionStart))return;const n=e.target.selectionStart;if(1!==e.key.length||Ne(e)){if("Backspace"===e.key){if(Ne(e))return;if(this.phoneInput.selectionEnd&&this.phoneInput.selectionStart&&this.phoneInput.selectionEnd-this.phoneInput.selectionStart>0)return;const t=this.phoneNumber.length,i=this.phoneNumber.slice(0,n).replace(/\D/g,""),r=this.phoneNumber.slice(n).replace(/\D/g,""),o=`${i.slice(0,-1)}${r}`;this.phoneNumber=Ie(o),this.phoneInput.value=this.phoneNumber;const a=n-(t-this.phoneNumber.length);return this.phoneInput.setSelectionRange(a,a),e.preventDefault(),void e.stopPropagation()}if(!["ArrowLeft","ArrowRight"].includes(e.key)||Ne(e)||e.shiftKey)return;if("ArrowLeft"===e.key){const e=((null===(t=this.phoneNumber.slice(0,n).split(/\d+/).at(-1))||void 0===t?void 0:t.length)||0)+1,i=n-e>-1?n-e:0;this.phoneInput.setSelectionRange(i,i)}if("ArrowRight"===e.key){const e=(this.phoneNumber.slice(n).split(/\d+/)[0].length||0)+1,t=n+e<this.phoneNumber.length?n+e:this.phoneNumber.length;this.phoneInput.setSelectionRange(t,t)}e.preventDefault(),e.stopPropagation()}else{e.preventDefault(),e.stopPropagation();const t=this.phoneNumber.slice(0,n)+e.key+this.phoneNumber.slice(n);this.phoneNumber=Ie(t.replace(/\D/g,"")),this.phoneInput.value=this.phoneNumber}},this.handlePhoneKeyup=e=>{var t;if(!e.key)return;if(e.key.includes("Arrow")||["Meta","Shift","Control","Alt"].includes(e.key))return;const n=this.phoneInput.selectionStart,i=n?this.phoneInput.value.slice(n).replace(/\D/g,""):"";this.phoneNumber=Ie(this.phoneInput.value);let r=0,o=i.length;for(;o;)(null===(t=this.phoneNumber.at(r))||void 0===t?void 0:t.match(/\d/))&&o--,r++;const a=this.phoneInput.value.length-r+1;this.phoneInput.setSelectionRange(a,a)},this.onChangeEmail=e=>{e.target&&(this.email=e.target.value)},this.validators={tourType:()=>!isNaN(this.tourType),dateAndTime:()=>!!this.selectedDate&&!!this.selectedTime,leadInfo:()=>{var e,t,n;return(!!(null===(e=this.firstNameInput)||void 0===e?void 0:e.value)||!!(null===(t=this.lastNameInput)||void 0===t?void 0:t.value))&&(null===(n=this.emailInput)||void 0===n?void 0:n.value.includes("@"))&&!!this.phoneNumber&&14===this.phoneNumber.length}},this.formIsValidForSubmission=()=>this.validators.tourType()&&this.validators.dateAndTime()&&this.validators.leadInfo(),this.timeStringToHoursAndMinutes=e=>{const[t,n]=e.split(/\D/g);return[parseInt(t)+(e.toLowerCase().includes("pm")?12:0),parseInt(n)]},this.submit=async()=>{var e;if(!this.selectedDate||!this.selectedTime)return;const t={email_address:this.email,phone_number:`+1${null===(e=this.phoneNumber.match(/\d/g))||void 0===e?void 0:e.join("")}`,building_id:this.buildingId,first_name:this.firstNameInput.value,last_name:this.lastNameInput.value,tour_type:fn[this.tourType],tour_time:`${this.selectedTime.datetime}${this.selectedTime.offset}`};200===(await Xt().post("https://app.meetelise.com/platformApi/state/create/scheduleMe",t,{headers:{"X-SecurityKey":"JRL8jV4VcSCwOSir5gWkpgNLfKghmhBG"}})).status&&(this.tourIsBooked=!0)},this.mobilePages=[{validate:this.validators.tourType,nextButtonText:"Next",nextButtonAction:()=>{this.mobilePageIndex++},render:()=>D`${this.tourTypeMenu()}`},{validate:this.validators.dateAndTime,nextButtonText:"Next",nextButtonAction:()=>{this.mobilePageIndex++},render:()=>D`${this.dateAndTimeMenu(!0)}`},{validate:()=>this.validators.leadInfo(),nextButtonText:"Schedule tour",nextButtonAction:this.submit,render:()=>D`${this.userInfoAndLayoutMenu()}`}]}tourTypeMenu(){return D`<h2 id="tourType">Tour Type</h2>
       <div id="tourTypeMenu">
-        ${this.shouldShowTourType[ln.Guided]?D` <tour-type-option
+        ${this.shouldShowTourType[cn.Guided]?D` <tour-type-option
               heading="Guided tour"
               subtitle="with an agent"
-              @click="${()=>{this.tourType=ln.Guided}}"
-              @keydown="${e=>{[" ","Enter"].includes(e.key)&&(e.preventDefault(),this.tourType=ln.Guided)}}"
-              ?selected="${this.tourType===ln.Guided}"
+              @click="${()=>{this.tourType=cn.Guided}}"
+              @keydown="${e=>{[" ","Enter"].includes(e.key)&&(e.preventDefault(),this.tourType=cn.Guided)}}"
+              ?selected="${this.tourType===cn.Guided}"
             >
               <svg
                 slot="icon"
@@ -449,16 +449,16 @@ var e={8005:function(e,t,n){var i,r=this&&this.__extends||(i=function(e,t){retur
               >
                 <path
                   d="M0.833252 30.1666C0.833252 27.1608 2.0273 24.2782 4.15271 22.1527C6.27812 20.0273 9.1608 18.8333 12.1666 18.8333C15.1724 18.8333 18.0551 20.0273 20.1805 22.1527C22.3059 24.2782 23.4999 27.1608 23.4999 30.1666H0.833252ZM12.1666 17.4166C7.47034 17.4166 3.66659 13.6129 3.66659 8.91663C3.66659 4.22038 7.47034 0.416626 12.1666 0.416626C16.8628 0.416626 20.6666 4.22038 20.6666 8.91663C20.6666 13.6129 16.8628 17.4166 12.1666 17.4166ZM22.5975 20.58C24.7645 21.137 26.7006 22.3634 28.13 24.0846C29.5595 25.8059 30.4096 27.9342 30.5592 30.1666H26.3333C26.3333 26.4691 24.9166 23.1031 22.5975 20.58ZM19.7316 17.3557C20.9187 16.2939 21.8681 14.9932 22.5175 13.5388C23.167 12.0845 23.5017 10.5094 23.4999 8.91663C23.5029 6.9807 23.0078 5.07657 22.062 3.38738C23.6666 3.70979 25.11 4.5779 26.1469 5.84415C27.1838 7.1104 27.7502 8.69666 27.7499 10.3333C27.7503 11.3426 27.5349 12.3404 27.1182 13.2597C26.7016 14.179 26.0932 14.9986 25.3339 15.6636C24.5746 16.3285 23.6819 16.8236 22.7157 17.1154C21.7495 17.4072 20.7321 17.4892 19.7316 17.3557V17.3557Z"
-                  fill="${this.tourType===ln.Guided?"#ffffff":"#202020"}"
+                  fill="${this.tourType===cn.Guided?"#ffffff":"#202020"}"
                 />
               </svg>
             </tour-type-option>`:""}
-        ${this.shouldShowTourType[ln.Self]?D`<tour-type-option
+        ${this.shouldShowTourType[cn.Self]?D`<tour-type-option
               heading="Take a tour"
               subtitle="on your own"
-              @click="${()=>{this.tourType=ln.Self}}"
-              @keydown="${e=>{[" ","Enter"].includes(e.key)&&(e.preventDefault(),this.tourType=ln.Self)}}"
-              ?selected="${this.tourType===ln.Self}"
+              @click="${()=>{this.tourType=cn.Self}}"
+              @keydown="${e=>{[" ","Enter"].includes(e.key)&&(e.preventDefault(),this.tourType=cn.Self)}}"
+              ?selected="${this.tourType===cn.Self}"
             >
               <svg
                 slot="icon"
@@ -470,16 +470,16 @@ var e={8005:function(e,t,n){var i,r=this&&this.__extends||(i=function(e,t){retur
               >
                 <path
                   d="M14.8334 19.1903V30.1667H0.666687C0.666248 28.4367 1.06183 26.7297 1.82311 25.1763C2.58439 23.6229 3.69118 22.2644 5.05866 21.2049C6.42614 20.1453 8.01802 19.4129 9.71232 19.0637C11.4066 18.7145 13.1584 18.7578 14.8334 19.1903ZM12 17.4167C7.30377 17.4167 3.50002 13.6129 3.50002 8.91666C3.50002 4.22041 7.30377 0.416656 12 0.416656C16.6963 0.416656 20.5 4.22041 20.5 8.91666C20.5 13.6129 16.6963 17.4167 12 17.4167ZM20.5 23.0833V18.125L27.5834 24.5L20.5 30.875V25.9167H16.25V23.0833H20.5Z"
-                  fill="${this.tourType===ln.Self?"#ffffff":"#202020"}"
+                  fill="${this.tourType===cn.Self?"#ffffff":"#202020"}"
                 />
               </svg>
             </tour-type-option>`:""}
-        ${this.shouldShowTourType[ln.Virtual]?D`<tour-type-option
+        ${this.shouldShowTourType[cn.Virtual]?D`<tour-type-option
               heading="Virtual tour"
               subtitle="over video"
-              @click="${()=>{this.tourType=ln.Virtual}}"
-              @keydown="${e=>{[" ","Enter"].includes(e.key)&&(e.preventDefault(),this.tourType=ln.Virtual)}}"
-              ?selected="${this.tourType===ln.Virtual}"
+              @click="${()=>{this.tourType=cn.Virtual}}"
+              @keydown="${e=>{[" ","Enter"].includes(e.key)&&(e.preventDefault(),this.tourType=cn.Virtual)}}"
+              ?selected="${this.tourType===cn.Virtual}"
             >
               <svg
                 slot="icon"
@@ -491,7 +491,7 @@ var e={8005:function(e,t,n){var i,r=this&&this.__extends||(i=function(e,t){retur
               >
                 <path
                   d="M15.6 19.5V22.1L18.2 23.4V24.7H7.80004L7.79484 23.4052L10.4 22.1V19.5H1.28965C1.11894 19.4989 0.950113 19.4642 0.792841 19.3979C0.635568 19.3315 0.492943 19.2347 0.373141 19.1131C0.253339 18.9915 0.158715 18.8474 0.0946936 18.6892C0.0306718 18.5309 -0.00148955 18.3616 5.29696e-05 18.1909V1.3091C5.29696e-05 0.586299 0.591552 0 1.28965 0H24.7104C25.4228 0 26 0.583699 26 1.3091V18.1909C26 18.9137 25.4085 19.5 24.7104 19.5H15.6ZM2.60005 14.3V16.9H23.4V14.3H2.60005Z"
-                  fill="${this.tourType===ln.Virtual?"#ffffff":"#202020"}"
+                  fill="${this.tourType===cn.Virtual?"#ffffff":"#202020"}"
                 />
               </svg>
             </tour-type-option>`:""}
@@ -533,37 +533,49 @@ var e={8005:function(e,t,n){var i,r=this&&this.__extends||(i=function(e,t){retur
       </svg>
     </button>`}userInfoAndLayoutMenu(){return D`<h2 id="yourInformation">Your information</h2>
       <div id="yourInformationMenu">
-        <input
-          type="text"
-          placeholder="First name"
-          id="firstName"
-          @input=${()=>this.requestUpdate()}
-        />
-        <input
-          type="text"
-          placeholder="Last name"
-          id="lastName"
-          @input=${()=>this.requestUpdate()}
-        />
-        <input
-          type="email"
-          inputmode="email"
-          placeholder="Email"
-          id="email"
-          .value=${this.email}
-          @input=${this.onChangeEmail}
-        />
-        <input
-          type="tel"
-          inputmode="tel"
-          placeholder="Phone"
-          id="phone"
-          maxlength="14"
-          .value=${this.phoneNumber}
-          @keydown=${this.handlePhoneKeydown}
-          @keyup=${this.handlePhoneKeyup}
-          @input=${e=>{e.target&&(this.phoneNumber=Ie(e.target.value))}}
-        />
+        <div class="inputContainer" id="firstName">
+          <input
+            type="text"
+            placeholder="First name"
+            name="firstName"
+            autocomplete="given-name"
+            @input=${()=>this.requestUpdate()}
+          />
+        </div>
+        <div class="inputContainer" id="lastName">
+          <input
+            type="text"
+            placeholder="Last name"
+            name="lastName"
+            autocomplete="family-name"
+            @input=${()=>this.requestUpdate()}
+          />
+        </div>
+        <div class="inputContainer" id="email">
+          <input
+            type="email"
+            inputmode="email"
+            placeholder="Email"
+            name="email"
+            autocomplete="email"
+            .value=${this.email}
+            @input=${this.onChangeEmail}
+          />
+        </div>
+        <div class="inputContainer" id="phone">
+          <input
+            type="tel"
+            inputmode="tel"
+            placeholder="Phone"
+            name="phone"
+            autocomplete="tel-national"
+            maxlength="14"
+            .value=${this.phoneNumber}
+            @keydown=${this.handlePhoneKeydown}
+            @keyup=${this.handlePhoneKeyup}
+            @input=${e=>{e.target&&(this.phoneNumber=Ie(e.target.value))}}
+          />
+        </div>
       </div>
       <!--
         Layout dropdown would go here, but has been removed pending backend support.
@@ -587,7 +599,7 @@ var e={8005:function(e,t,n){var i,r=this&&this.__extends||(i=function(e,t){retur
           Thank you!
           <br />
           Your
-          ${{[ln.Guided]:"guided",[ln.Self]:"self-guided",[ln.Virtual]:"virtual"}[this.tourType]}
+          ${{[cn.Guided]:"guided",[cn.Self]:"self-guided",[cn.Virtual]:"virtual"}[this.tourType]}
           tour is scheduled for ${e}.
         </p>
         <p>
@@ -595,24 +607,44 @@ var e={8005:function(e,t,n){var i,r=this&&this.__extends||(i=function(e,t){retur
         </p>
         <p>You can make changes at any time, just reply to the email.</p>
       </div>
-    `}render(){if(on()){const e=this.mobilePages[this.mobilePageIndex];return D`
-        <div class="tour-scheduler">
+    `}loadingIcon(){return D`<svg
+      id="loadingIcon"
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.835 13.1045C18.4839 11.5628 18.6332 9.85647 18.2621 8.22548C17.8909 6.5945 17.018 5.12084 15.7659 4.0117C14.5139 2.90256 12.9457 2.21372 11.2818 2.04201C9.618 1.87031 7.94218 2.22438 6.49 3.05445L5.498 1.31745C7.01563 0.450066 8.73419 -0.00418222 10.4822 2.90165e-05C12.2302 0.00424025 13.9466 0.466764 15.46 1.34145C19.95 3.93345 21.67 9.48345 19.577 14.1115L20.919 14.8855L16.754 17.0995L16.589 12.3855L17.835 13.1045ZM3.085 6.89845C2.43614 8.44015 2.28678 10.1464 2.65792 11.7774C3.02905 13.4084 3.90201 14.8821 5.15407 15.9912C6.40613 17.1003 7.97432 17.7892 9.63816 17.9609C11.302 18.1326 12.9778 17.7785 14.43 16.9485L15.422 18.6855C13.9044 19.5528 12.1858 20.0071 10.4378 20.0029C8.68979 19.9987 6.97344 19.5361 5.46 18.6615C0.97 16.0695 -0.75 10.5195 1.343 5.89145L0 5.11845L4.165 2.90445L4.33 7.61845L3.084 6.89945L3.085 6.89845Z"
+        fill="#1E1E1E"
+      />
+    </svg>`}render(){if(on()){const e=this.mobilePages[this.mobilePageIndex];return D`
+        <div
+          class="${un()("tour-scheduler",{loading:this.waitingForAvailabilities})}"
+        >
           <div id="topControls">
-            <h1 id="scheduleATour">Schedule a tour</h1>
+            <h1 id="scheduleATour">
+              ${this.waitingForAvailabilities?D`${this.loadingIcon()} Searching availabilities...`:"Schedule a tour"}
+            </h1>
             ${this.closeButton()}
           </div>
           ${this.tourIsBooked?this.confirmationMessage():D`${e.render()}
                 <button
                   id="next"
                   @click=${e.nextButtonAction}
-                  ?disabled=${!e.validate()}
+                  ?disabled=${(()=>!e.validate()||this.waitingForAvailabilities)()}
                 >
                   ${e.nextButtonText}
                 </button>`}
         </div>
       `}return D`
-        <div class="tour-scheduler">
-          <h1 id="scheduleATour">Schedule a tour</h1>
+        <div
+          class="${un()("tour-scheduler",{loading:this.waitingForAvailabilities})}"
+        >
+          <h1 id="scheduleATour">
+            ${this.waitingForAvailabilities?D`${this.loadingIcon()} Searching availabilities...`:"Schedule a tour"}
+          </h1>
           ${this.closeButton()}
           ${this.tourIsBooked?D`
                 <div class="tour-scheduler">${this.confirmationMessage()}</div>
@@ -631,7 +663,7 @@ var e={8005:function(e,t,n){var i,r=this&&this.__extends||(i=function(e,t){retur
                   Schedule tour
                 </button>`}
         </div>
-      `}};var ln;un.styles=a`
+      `}};var cn;dn.styles=a`
     * {
       box-sizing: border-box;
     }
@@ -746,7 +778,7 @@ var e={8005:function(e,t,n){var i,r=this&&this.__extends||(i=function(e,t){retur
       gap: 12px;
     }
 
-    #yourInformationMenu > input {
+    #yourInformationMenu input {
       width: 305px;
       height: 49px;
       border: 1px solid #83818e;
@@ -758,7 +790,7 @@ var e={8005:function(e,t,n){var i,r=this&&this.__extends||(i=function(e,t){retur
       color: #202020;
     }
 
-    #yourInformationMenu > input::placeholder {
+    #yourInformationMenu input::placeholder {
       color: #202020;
     }
 
@@ -841,6 +873,81 @@ var e={8005:function(e,t,n){var i,r=this&&this.__extends||(i=function(e,t){retur
       font-size: 18px;
     }
 
+    /* Loading styles: pulsing gray overlay on all the form elements */
+
+    @keyframes spin {
+      0% {
+        transform: none;
+      }
+      50% {
+        transform: rotateZ(180deg);
+      }
+      100% {
+        transform: rotateZ(360deg);
+      }
+    }
+
+    svg#loadingIcon {
+      animation: spin 2s infinite linear;
+    }
+
+    .tour-scheduler.loading #scheduleATour {
+      display: flex;
+      gap: 10px;
+    }
+
+    @keyframes loadingPulse {
+      0% {
+        background-color: #e7e7e7;
+      }
+      50% {
+        background-color: white;
+      }
+      100% {
+        background-color: #e7e7e7;
+      }
+    }
+
+    tour-type-option,
+    date-picker,
+    #yourInformationMenu .inputContainer {
+      position: relative;
+    }
+
+    .tour-scheduler.loading
+      :is(tour-type-option, date-picker, #yourInformationMenu
+        .inputContainer)::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      z-index: 1;
+      animation: loadingPulse 2s infinite;
+    }
+
+    .tour-scheduler.loading tour-type-option::after {
+      border-radius: 10px;
+      width: 200px;
+    }
+
+    .tour-scheduler.loading date-picker::after {
+      border-radius: 10px;
+      width: 205px;
+    }
+
+    .tour-scheduler.loading #yourInformationMenu .inputContainer::after {
+      width: 100%;
+    }
+
+    .tour-scheduler.loading #yourInformationMenu .inputContainer input {
+      visibility: hidden;
+    }
+
+    .tour-scheduler.loading time-picker {
+      display: none;
+    }
+
     @media (max-width: 767px) {
       /* TODO: separate styles into general, desktop-specific, and mobile-specific.
       basically everything I have "unset" or "initial" on should become desktop-specific. the grid layout is only for desktop.
@@ -952,7 +1059,7 @@ var e={8005:function(e,t,n){var i,r=this&&this.__extends||(i=function(e,t){retur
         margin-top: 37px;
       }
     }
-  `,sn([oe({attribute:!1})],un.prototype,"layoutOptions",void 0),sn([oe({attribute:!1})],un.prototype,"tourTypeOptions",void 0),sn([oe({type:Number})],un.prototype,"buildingId",void 0),sn([oe({attribute:!1})],un.prototype,"onCloseClicked",void 0),sn([ae()],un.prototype,"tourType",void 0),sn([ae()],un.prototype,"shouldShowTourType",void 0),sn([ae()],un.prototype,"email",void 0),sn([ae()],un.prototype,"phoneNumber",void 0),sn([ae()],un.prototype,"availabilitiesGroupedByDay",void 0),sn([ae()],un.prototype,"selectedDate",void 0),sn([ae()],un.prototype,"selectedTime",void 0),sn([ae()],un.prototype,"mobilePageIndex",void 0),sn([ae()],un.prototype,"tourIsBooked",void 0),sn([se("input#firstName")],un.prototype,"firstNameInput",void 0),sn([se("input#lastName")],un.prototype,"lastNameInput",void 0),sn([se("input#email")],un.prototype,"emailInput",void 0),sn([se("input#phone")],un.prototype,"phoneInput",void 0),sn([se("me-select#unitType")],un.prototype,"unitTypeSelect",void 0),un=sn([ie("tour-scheduler")],un),function(e){e[e.Guided=0]="Guided",e[e.Self=1]="Self",e[e.Virtual=2]="Virtual"}(ln||(ln={}));const dn={[ln.Guided]:Qt.TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.WithAgent,[ln.Self]:Qt.TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.SelfGuided,[ln.Virtual]:Qt.TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.VirtualShowing},cn={[ln.Guided]:"escorted-tour",[ln.Self]:"self-guided-tour",[ln.Virtual]:"live-virtual-tour"};class pn{constructor(e,t,n){this.org=e,this.building=t,this.chatId=n,this.featureFlags={}}setFeatureFlags(e){this.featureFlags={...this.featureFlags,...e}}campaignSources(){var e,t,n;const i=new URL(window.location.href).searchParams,r=null!==(n=null===(t=null===(e=window.RCTPCampaign)||void 0===e?void 0:e.CampaignDetails)||void 0===t?void 0:t.Source)&&void 0!==n?n:null;return{entrataCampaignSource:i.get("switch_cls[id]"),realpageCampaignSource:i.get("ilm"),utmCampaignSource:i.get("utm_source"),yardiCampaignSource:r}}ping(e){fetch("https://app.meetelise.com/platformApi/connectors/talk_js/analytics",{method:"POST",credentials:"omit",keepalive:!0,headers:{"content-type":"application/json; charset=UTF-8"},body:JSON.stringify({eventType:e,chatId:this.chatId,url:location.href,org:this.org,building:this.building,referrer:document.referrer,featureFlags:this.featureFlags,campaignSources:this.campaignSources()})})}}var fn,hn=new Uint8Array(16);function mn(){if(!fn&&!(fn="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||"undefined"!=typeof msCrypto&&"function"==typeof msCrypto.getRandomValues&&msCrypto.getRandomValues.bind(msCrypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return fn(hn)}const vn=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i,gn=function(e){return"string"==typeof e&&vn.test(e)};for(var yn=[],wn=0;wn<256;++wn)yn.push((wn+256).toString(16).substr(1));const bn=function(e,t,n){var i=(e=e||{}).random||(e.rng||mn)();if(i[6]=15&i[6]|64,i[8]=63&i[8]|128,t){n=n||0;for(var r=0;r<16;++r)t[n+r]=i[r];return t}return function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=(yn[e[t+0]]+yn[e[t+1]]+yn[e[t+2]]+yn[e[t+3]]+"-"+yn[e[t+4]]+yn[e[t+5]]+"-"+yn[e[t+6]]+yn[e[t+7]]+"-"+yn[e[t+8]]+yn[e[t+9]]+"-"+yn[e[t+10]]+yn[e[t+11]]+yn[e[t+12]]+yn[e[t+13]]+yn[e[t+14]]+yn[e[t+15]]).toLowerCase();if(!gn(n))throw TypeError("Stringified UUID is invalid");return n}(i)};function Sn(e,t){const n=xn(e,t),i=bn();return localStorage.setItem(n,i),Tn(e,t),i}function Tn(e,t){const n=On(e,t),i=(new Date).toISOString();return localStorage.setItem(n,i),i}function xn(e,t){return`com.meetelise.chatID-${e}-${t}`}function On(e,t){return`com.meetelise.chatIDIssueTime-${e}-${t}`}const In="#FFFFFF",Rn="#202020",Nn={user:{textColor:In,backgroundColor:"#1990FF"},agent:{textColor:In,backgroundColor:"#1E1E1E"}},An={user:{textColor:In,backgroundColor:"#83818E"},agent:{textColor:In,backgroundColor:Rn}},Cn={Light:{chatHeader:{backgroundColor:In,textColor:Rn},chatPaneBackgroundColor:"rgba(255, 255, 255, 0.9)",message:Nn},Dark:{chatHeader:{backgroundColor:Rn,textColor:In},chatPaneBackgroundColor:"rgba(32, 32, 32, 0.9)",message:Nn},Purple:{chatHeader:{backgroundColor:"#550098",textColor:In},chatPaneBackgroundColor:"rgba(85, 0, 152, 0.6)",message:Nn},Blue:{chatHeader:{backgroundColor:"#0814E5",textColor:In},chatPaneBackgroundColor:"rgba(4, 17, 245, 0.6)",message:Nn},Teal:{chatHeader:{backgroundColor:"#6EE7ED",textColor:Rn},chatPaneBackgroundColor:"rgba(115, 247, 253, 0.8)",message:An},Green:{chatHeader:{backgroundColor:"#147B0E",textColor:In},chatPaneBackgroundColor:"rgba(13, 141, 5, 0.6)",message:Nn},Yellow:{chatHeader:{backgroundColor:"#F1E54F",textColor:Rn},chatPaneBackgroundColor:"rgba(251, 239, 80, 0.9)",message:An},Orange:{chatHeader:{backgroundColor:"#C06C31",textColor:In},chatPaneBackgroundColor:"rgba(238, 126, 49, 0.7)",message:Nn},Pink:{chatHeader:{backgroundColor:"#A24599",textColor:In},chatPaneBackgroundColor:"rgba(167, 70, 157, 0.8)",message:Nn}},_n=e=>Cn[e&&Object.keys(Cn).includes(e)?e:"Light"];function En(e,t,n,i,r,o){var a;const s=new Oe.User({id:`building_${t.id}`,name:t.userFirstName,email:null,role:"Default",welcomeMessage:t.welcomeMessage}),u=e.getOrCreateConversation(r);return u.setParticipant(e.me),u.setParticipant(s),u.subject=null!==(a=t.chatTitle)&&void 0!==a?a:t.userFirstName,u.custom={buildingId:t.id.toString(),userId:t.userId.toString(),orgId:t.orgId.toString(),subtitle:t.chatSubtitle,url:location.href,buildingName:t.name,isMobile:o.toString(),chatHeaderBackgroundColor:n.chatHeader.backgroundColor,chatHeaderTextColor:n.chatHeader.textColor,chatPaneBackgroundColor:n.chatPaneBackgroundColor,userMessageTextColor:n.message.user.textColor,userMessageBackgroundColor:n.message.user.backgroundColor,agentMessageTextColor:n.message.agent.textColor,agentMessageBackgroundColor:n.message.agent.backgroundColor,isLightTheme:(n.message===An).toString(),avatarUrl:"image"===t.avatarType&&t.avatarSrc?i:"https://s3.us-west-2.amazonaws.com/meetelise.com/looping-gradient.gif"},u}var Fn=n(4184),Mn=n.n(Fn);const Pn=a`
+  `,ln([oe({attribute:!1})],dn.prototype,"layoutOptions",void 0),ln([oe({attribute:!1})],dn.prototype,"tourTypeOptions",void 0),ln([oe({type:Number})],dn.prototype,"buildingId",void 0),ln([oe({attribute:!1})],dn.prototype,"onCloseClicked",void 0),ln([ae()],dn.prototype,"tourType",void 0),ln([ae()],dn.prototype,"shouldShowTourType",void 0),ln([ae()],dn.prototype,"email",void 0),ln([ae()],dn.prototype,"phoneNumber",void 0),ln([ae()],dn.prototype,"availabilitiesGroupedByDay",void 0),ln([ae()],dn.prototype,"waitingForAvailabilities",void 0),ln([ae()],dn.prototype,"selectedDate",void 0),ln([ae()],dn.prototype,"selectedTime",void 0),ln([ae()],dn.prototype,"mobilePageIndex",void 0),ln([ae()],dn.prototype,"tourIsBooked",void 0),ln([se(".inputContainer#firstName input")],dn.prototype,"firstNameInput",void 0),ln([se(".inputContainer#lastName input")],dn.prototype,"lastNameInput",void 0),ln([se(".inputContainer#email input")],dn.prototype,"emailInput",void 0),ln([se(".inputContainer#phone input")],dn.prototype,"phoneInput",void 0),ln([se("me-select#unitType")],dn.prototype,"unitTypeSelect",void 0),dn=ln([ie("tour-scheduler")],dn),function(e){e[e.Guided=0]="Guided",e[e.Self=1]="Self",e[e.Virtual=2]="Virtual"}(cn||(cn={}));const pn={[cn.Guided]:Qt.TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.WithAgent,[cn.Self]:Qt.TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.SelfGuided,[cn.Virtual]:Qt.TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.VirtualShowing},fn={[cn.Guided]:"escorted-tour",[cn.Self]:"self-guided-tour",[cn.Virtual]:"live-virtual-tour"};class hn{constructor(e,t,n){this.org=e,this.building=t,this.chatId=n,this.featureFlags={}}setFeatureFlags(e){this.featureFlags={...this.featureFlags,...e}}campaignSources(){var e,t,n;const i=new URL(window.location.href).searchParams,r=null!==(n=null===(t=null===(e=window.RCTPCampaign)||void 0===e?void 0:e.CampaignDetails)||void 0===t?void 0:t.Source)&&void 0!==n?n:null;return{entrataCampaignSource:i.get("switch_cls[id]"),realpageCampaignSource:i.get("ilm"),utmCampaignSource:i.get("utm_source"),yardiCampaignSource:r}}ping(e){fetch("https://app.meetelise.com/platformApi/connectors/talk_js/analytics",{method:"POST",credentials:"omit",keepalive:!0,headers:{"content-type":"application/json; charset=UTF-8"},body:JSON.stringify({eventType:e,chatId:this.chatId,url:location.href,org:this.org,building:this.building,referrer:document.referrer,featureFlags:this.featureFlags,campaignSources:this.campaignSources()})})}}var mn,vn=new Uint8Array(16);function gn(){if(!mn&&!(mn="undefined"!=typeof crypto&&crypto.getRandomValues&&crypto.getRandomValues.bind(crypto)||"undefined"!=typeof msCrypto&&"function"==typeof msCrypto.getRandomValues&&msCrypto.getRandomValues.bind(msCrypto)))throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");return mn(vn)}const yn=/^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i,wn=function(e){return"string"==typeof e&&yn.test(e)};for(var bn=[],Sn=0;Sn<256;++Sn)bn.push((Sn+256).toString(16).substr(1));const Tn=function(e,t,n){var i=(e=e||{}).random||(e.rng||gn)();if(i[6]=15&i[6]|64,i[8]=63&i[8]|128,t){n=n||0;for(var r=0;r<16;++r)t[n+r]=i[r];return t}return function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,n=(bn[e[t+0]]+bn[e[t+1]]+bn[e[t+2]]+bn[e[t+3]]+"-"+bn[e[t+4]]+bn[e[t+5]]+"-"+bn[e[t+6]]+bn[e[t+7]]+"-"+bn[e[t+8]]+bn[e[t+9]]+"-"+bn[e[t+10]]+bn[e[t+11]]+bn[e[t+12]]+bn[e[t+13]]+bn[e[t+14]]+bn[e[t+15]]).toLowerCase();if(!wn(n))throw TypeError("Stringified UUID is invalid");return n}(i)};function xn(e,t){const n=In(e,t),i=Tn();return localStorage.setItem(n,i),On(e,t),i}function On(e,t){const n=Rn(e,t),i=(new Date).toISOString();return localStorage.setItem(n,i),i}function In(e,t){return`com.meetelise.chatID-${e}-${t}`}function Rn(e,t){return`com.meetelise.chatIDIssueTime-${e}-${t}`}const Nn="#FFFFFF",An="#202020",Cn={user:{textColor:Nn,backgroundColor:"#1990FF"},agent:{textColor:Nn,backgroundColor:"#1E1E1E"}},_n={user:{textColor:Nn,backgroundColor:"#83818E"},agent:{textColor:Nn,backgroundColor:An}},En={Light:{chatHeader:{backgroundColor:Nn,textColor:An},chatPaneBackgroundColor:"rgba(255, 255, 255, 0.9)",message:Cn},Dark:{chatHeader:{backgroundColor:An,textColor:Nn},chatPaneBackgroundColor:"rgba(32, 32, 32, 0.9)",message:Cn},Purple:{chatHeader:{backgroundColor:"#550098",textColor:Nn},chatPaneBackgroundColor:"rgba(85, 0, 152, 0.6)",message:Cn},Blue:{chatHeader:{backgroundColor:"#0814E5",textColor:Nn},chatPaneBackgroundColor:"rgba(4, 17, 245, 0.6)",message:Cn},Teal:{chatHeader:{backgroundColor:"#6EE7ED",textColor:An},chatPaneBackgroundColor:"rgba(115, 247, 253, 0.8)",message:_n},Green:{chatHeader:{backgroundColor:"#147B0E",textColor:Nn},chatPaneBackgroundColor:"rgba(13, 141, 5, 0.6)",message:Cn},Yellow:{chatHeader:{backgroundColor:"#F1E54F",textColor:An},chatPaneBackgroundColor:"rgba(251, 239, 80, 0.9)",message:_n},Orange:{chatHeader:{backgroundColor:"#C06C31",textColor:Nn},chatPaneBackgroundColor:"rgba(238, 126, 49, 0.7)",message:Cn},Pink:{chatHeader:{backgroundColor:"#A24599",textColor:Nn},chatPaneBackgroundColor:"rgba(167, 70, 157, 0.8)",message:Cn}},Fn=e=>En[e&&Object.keys(En).includes(e)?e:"Light"];function Mn(e,t,n,i,r,o){var a;const s=new Oe.User({id:`building_${t.id}`,name:t.userFirstName,email:null,role:"Default",welcomeMessage:t.welcomeMessage}),u=e.getOrCreateConversation(r);return u.setParticipant(e.me),u.setParticipant(s),u.subject=null!==(a=t.chatTitle)&&void 0!==a?a:t.userFirstName,u.custom={buildingId:t.id.toString(),userId:t.userId.toString(),orgId:t.orgId.toString(),subtitle:t.chatSubtitle,url:location.href,buildingName:t.name,isMobile:o.toString(),chatHeaderBackgroundColor:n.chatHeader.backgroundColor,chatHeaderTextColor:n.chatHeader.textColor,chatPaneBackgroundColor:n.chatPaneBackgroundColor,userMessageTextColor:n.message.user.textColor,userMessageBackgroundColor:n.message.user.backgroundColor,agentMessageTextColor:n.message.agent.textColor,agentMessageBackgroundColor:n.message.agent.backgroundColor,isLightTheme:(n.message===_n).toString(),avatarUrl:"image"===t.avatarType&&t.avatarSrc?i:"https://s3.us-west-2.amazonaws.com/meetelise.com/looping-gradient.gif"},u}const Pn=a`
   :host {
     --glowBarHeight: 11.2px;
     --enterAnimationDuration: 0.5s;
@@ -1747,7 +1854,7 @@ var e={8005:function(e,t,n){var i,r=this&&this.__extends||(i=function(e,t){retur
       .call-us-window__open-times {
         text-transform: lowercase;
       }
-    `],Kn([oe({attribute:!1})],Zn.prototype,"onCloseClicked",void 0),Kn([oe()],Zn.prototype,"phoneNumber",void 0),Kn([oe({attribute:!1})],Zn.prototype,"buildingId",void 0),Kn([oe({attribute:!1})],Zn.prototype,"officeHoursTextInfo",void 0),Zn=Kn([ie("call-us-window")],Zn);const Yn={};var ei=function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a};let ti=class extends te{constructor(){super(...arguments),this.isMobile=!1,this.isFirstMount=!1,this.backgroundColor="rgba(255, 255, 255, 0.75)",this.textColor="#202020",this.isMini=!0,this.phoneNumber="",this.buildingId=0,this.hasEmailEnabled=!0,this.hasSSTEnabled=!1,this.hasTextUsEnabled=!1,this.layoutOptions=[],this.tourTypeOptions=[],this.onChatTapped=()=>{},this.launcherStyles={},this.isEmailWindowOpen=!1,this.isCallUsWindowOpen=!1,this.isSSTWindowOpen=!1,this.isTextUsWindowOpen=!1,this.getNumCallToActions=()=>[this.hasEmailEnabled,!!this.phoneNumber,this.hasSSTEnabled,this.hasTextUsEnabled].filter((e=>e)).length,this.emailUsWindowRef=be(),this.textUsWindowRef=be(),this.tourSchedulerRef=be(),this.updated=async()=>{if(this.attachOnClickToEmailUsWindow(),this.attachOnClickToTextUsWindow(),this.attachOnClickToSSTWindow(),this.buildingId){const e=await(async e=>{if(Yn[e])return Yn[e];const t=`https://app.meetelise.com/sms_management_numbers/webchat/building/${e}/numbers`,n=await Xt().get(t);return Yn[e]=n.data,n.data})(this.buildingId);this.hasTextUsEnabled=e.length>0&&4895!==this.buildingId,3660===this.buildingId&&(this.hasSSTEnabled=!0)}},this.attachOnClickToEmailUsWindow=()=>{const e=this.emailUsWindowRef.value;e&&(e.onCloseClicked=this.onCloseEmailWindow)},this.attachOnClickToTextUsWindow=()=>{const e=this.textUsWindowRef.value;e&&(e.onCloseClicked=this.onCloseTextUsWindow)},this.attachOnClickToSSTWindow=()=>{const e=this.tourSchedulerRef.value;e&&(e.onCloseClicked=this.onCloseSSTWindow)},this.onClickEmailOption=e=>{e.preventDefault(),e.stopPropagation(),this.isEmailWindowOpen=!0},this.onCloseEmailWindow=()=>{this.isEmailWindowOpen=!1},this.renderEmailOption=()=>{const e=this.getNumCallToActions()>2?"Email":"Email us";return D`
+    `],Kn([oe({attribute:!1})],Zn.prototype,"onCloseClicked",void 0),Kn([oe()],Zn.prototype,"phoneNumber",void 0),Kn([oe({attribute:!1})],Zn.prototype,"buildingId",void 0),Kn([oe({attribute:!1})],Zn.prototype,"officeHoursTextInfo",void 0),Zn=Kn([ie("call-us-window")],Zn);const Yn={};var ei=function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a};let ti=class extends te{constructor(){super(...arguments),this.isMobile=!1,this.isFirstMount=!1,this.backgroundColor="rgba(255, 255, 255, 0.75)",this.textColor="#202020",this.isMini=!0,this.phoneNumber="",this.buildingId=0,this.hasEmailEnabled=!0,this.hasSSTEnabled=!1,this.hasTextUsEnabled=!1,this.layoutOptions=[],this.tourTypeOptions=[],this.onChatTapped=()=>{},this.launcherStyles={},this.isEmailWindowOpen=!1,this.isCallUsWindowOpen=!1,this.isSSTWindowOpen=!1,this.isTextUsWindowOpen=!1,this.getNumCallToActions=()=>[this.hasEmailEnabled,!!this.phoneNumber,this.hasSSTEnabled,this.hasTextUsEnabled].filter((e=>e)).length,this.emailUsWindowRef=be(),this.textUsWindowRef=be(),this.tourSchedulerRef=be(),this.updated=async()=>{if(this.attachOnClickToEmailUsWindow(),this.attachOnClickToTextUsWindow(),this.attachOnClickToSSTWindow(),this.buildingId){const e=await(async e=>{if(Yn[e])return Yn[e];const t=`https://app.meetelise.com/sms_management_numbers/webchat/building/${e}/numbers`,n=await Xt().get(t);return Yn[e]=n.data,n.data})(this.buildingId);this.hasTextUsEnabled=e.length>0&&4895!==this.buildingId;const t=await async function(e){return!!e}(this.buildingId);3660===this.buildingId&&t&&(this.hasSSTEnabled=!0)}},this.attachOnClickToEmailUsWindow=()=>{const e=this.emailUsWindowRef.value;e&&(e.onCloseClicked=this.onCloseEmailWindow)},this.attachOnClickToTextUsWindow=()=>{const e=this.textUsWindowRef.value;e&&(e.onCloseClicked=this.onCloseTextUsWindow)},this.attachOnClickToSSTWindow=()=>{const e=this.tourSchedulerRef.value;e&&(e.onCloseClicked=this.onCloseSSTWindow)},this.onClickEmailOption=e=>{e.preventDefault(),e.stopPropagation(),this.isEmailWindowOpen=!0},this.onCloseEmailWindow=()=>{this.isEmailWindowOpen=!1},this.renderEmailOption=()=>{const e=this.getNumCallToActions()>2?"Email":"Email us";return D`
       <div
         @click=${this.onClickEmailOption}
         class="launcher__call-to-action-option"
@@ -1925,7 +2032,7 @@ var e={8005:function(e,t,n){var i,r=this&&this.__extends||(i=function(e,t){retur
         ${this.isCallToActionWindowOpen()?"":D`
               <div
                 @click=${this.onChatTapped}
-                class="${Mn()("launcher",this.isMobile?"launcher__mobile":"launcher__desktop",{firstMount:this.isFirstMount})}"
+                class="${un()("launcher",this.isMobile?"launcher__mobile":"launcher__desktop",{firstMount:this.isFirstMount})}"
                 style="background-color: ${this.backgroundColor}; color: ${this.textColor};"
               >
                 <div
@@ -1963,7 +2070,7 @@ var e={8005:function(e,t,n){var i,r=this&&this.__extends||(i=function(e,t){retur
               </div>
             `}
       </div>
-    `}};ti.styles=Pn,ei([oe({type:Boolean})],ti.prototype,"isMobile",void 0),ei([oe({type:Boolean})],ti.prototype,"isFirstMount",void 0),ei([oe()],ti.prototype,"backgroundColor",void 0),ei([oe()],ti.prototype,"textColor",void 0),ei([oe({type:Boolean})],ti.prototype,"isMini",void 0),ei([oe()],ti.prototype,"phoneNumber",void 0),ei([oe({attribute:!1})],ti.prototype,"buildingId",void 0),ei([oe({type:Boolean})],ti.prototype,"hasEmailEnabled",void 0),ei([oe({type:Boolean})],ti.prototype,"hasSSTEnabled",void 0),ei([oe({type:Boolean})],ti.prototype,"hasTextUsEnabled",void 0),ei([oe({attribute:!1})],ti.prototype,"layoutOptions",void 0),ei([oe({attribute:!1})],ti.prototype,"tourTypeOptions",void 0),ei([oe({attribute:!1})],ti.prototype,"onChatTapped",void 0),ei([oe()],ti.prototype,"launcherStyles",void 0),ei([ae()],ti.prototype,"isEmailWindowOpen",void 0),ei([ae()],ti.prototype,"isCallUsWindowOpen",void 0),ei([ae()],ti.prototype,"isSSTWindowOpen",void 0),ei([ae()],ti.prototype,"isTextUsWindowOpen",void 0),ti=ei([ie("meetelise-launcher")],ti);var ni=n(3379),ii=n.n(ni),ri=n(7795),oi=n.n(ri),ai=n(569),si=n.n(ai),ui=n(3565),li=n.n(ui),di=n(9216),ci=n.n(di),pi=n(4589),fi=n.n(pi),hi=n(3631),mi={};mi.styleTagTransform=fi(),mi.setAttributes=li(),mi.insert=si().bind(null,"head"),mi.domAPI=oi(),mi.insertStyleElement=ci(),ii()(hi.Z,mi),hi.Z&&hi.Z.locals&&hi.Z.locals;var vi,gi=function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a};let yi=vi=class extends te{constructor(){super(...arguments),this.buildingSlug="",this.orgSlug="",this.useMiniWidget=!0,this.launcherStyles={},this.popup=null,this.theme=_n(),this.chatId="",this.analytics=null,this.isMobile=on(),this.launcher=null,this.building=null,this.hasMounted=!1,this.hideLauncher=!1,this.yardiDNIScriptInterval=null,this.launcherRef=be(),this.initializeInstanceVariables=async()=>{await this.setBuildingDerivedInfo(),await this.initializeLaunchJS(),this.attachOnClickToLauncher()},this.setBuildingDerivedInfo=async()=>{var e;this.buildingSlug&&this.orgSlug&&(this.building=await async function(e,t){const n=`https://app.meetelise.com/api/pub/v1/organization/${e}/building/${t}`,i=await fetch(n);return await i.json()}(this.orgSlug,this.buildingSlug),en(this.building.id),this.chatId=function(e,t){const n=xn(e,t),i=localStorage.getItem(n);return i&&!function(e,t){const n=On(e,t),i=localStorage.getItem(n)||Tn(e,t),r=new Date(new Date(i).getTime()+864e5);return new Date>r}(e,t)?i:Sn(e,t)}(this.orgSlug,this.buildingSlug),this.avatarSrc=this.avatarSrc||this.building.avatarSrc,this.theme=_n(null!==(e=this.themeId)&&void 0!==e?e:this.building.themeId),this.analytics=new pn(this.orgSlug,this.buildingSlug,this.chatId))},this.initializeLaunchJS=async()=>{if(!this.building||!this.theme)return;if(this.popup&&this.launcher)return;const[e,t,n,i]=await Promise.all([this.building,this.theme,this.avatarSrc,vi.session]);if(e.conversationMaintenanceMode)return new Promise((()=>{console.warn("MeetElise Chat is in maintenance mode. Chat icon will not appear.")}));await this.configureTalkJSPopup(e,t,i,n),this.configureLauncherElement(),this.yardiDNIScriptInterval=setInterval((()=>this.pollForYardiCampaignSource()),1e3),setTimeout(clearInterval,15e3,this.yardiDNIScriptInterval)},this.configureLauncherElement=()=>{this.popup&&this.launcherRef.value&&(this.launcher=this.launcherRef.value)},this.configureTalkJSPopup=async(e,t,n,i)=>{const r=n.createPopup(En(n,e,t,i||e.avatarSrc,this.chatId,this.isMobile),{launcher:"never",showCloseInHeader:!0,messageField:{placeholder:"Ask a question..."}});await r.mount({show:!1}),r.on("close",(()=>{this.hideLauncher=!1}));const o=document.querySelector(".__talkjs_popup");if(!o)throw new Error("Failed to find chat window");o.classList.add("meetelise-chat","pane"),this.isMobile||o.classList.add("launcher__desktop"),o.style.zIndex="99999999999",this.popup=r},this.firstUpdated=()=>{this.initializeInstanceVariables()},this.attachOnClickToLauncher=()=>{const e=this.launcherRef.value;e&&(e.onChatTapped=async()=>{var e;this.popup&&(this.popup.show(),null===(e=this.analytics)||void 0===e||e.ping("open"),this.hideLauncher=!0,this.hasMounted=!0)})}}pollForYardiCampaignSource(){var e,t,n;(null===(t=null===(e=window.RCTPCampaign)||void 0===e?void 0:e.CampaignDetails)||void 0===t?void 0:t.Source)&&(null===(n=this.analytics)||void 0===n||n.ping("yardi-DNI-init"),this.yardiDNIScriptInterval&&clearInterval(this.yardiDNIScriptInterval))}async restartConversation(){if(!(this.analytics&&this.analytics.chatId&&this.building&&this.popup&&vi.session))return;this.chatId=Sn(this.orgSlug,this.buildingSlug);const e=await vi.session;this.analytics.chatId=this.chatId,this.popup.select(En(e,this.building,this.theme,this.avatarSrc||this.building.avatarSrc,this.chatId,this.isMobile))}remove(){var e;null===(e=this.popup)||void 0===e||e.destroy()}open(){var e;null===(e=this.popup)||void 0===e||e.show()}close(){var e;null===(e=this.popup)||void 0===e||e.hide()}show(){this.launcher&&(this.launcher.style.display="")}hide(){this.launcher&&(this.launcher.style.display="none")}render(){var e,t,n,i,r,o,a,s,u,l;return 182===(null===(e=this.building)||void 0===e?void 0:e.orgId)||4930===(null===(t=this.building)||void 0===t?void 0:t.id)?D``:(window.customElements.get("meetelise-launcher")||window.customElements.define("meetelise-launcher",ti),D`
+    `}};ti.styles=Pn,ei([oe({type:Boolean})],ti.prototype,"isMobile",void 0),ei([oe({type:Boolean})],ti.prototype,"isFirstMount",void 0),ei([oe()],ti.prototype,"backgroundColor",void 0),ei([oe()],ti.prototype,"textColor",void 0),ei([oe({type:Boolean})],ti.prototype,"isMini",void 0),ei([oe()],ti.prototype,"phoneNumber",void 0),ei([oe({attribute:!1})],ti.prototype,"buildingId",void 0),ei([oe({type:Boolean})],ti.prototype,"hasEmailEnabled",void 0),ei([oe({type:Boolean})],ti.prototype,"hasSSTEnabled",void 0),ei([oe({type:Boolean})],ti.prototype,"hasTextUsEnabled",void 0),ei([oe({attribute:!1})],ti.prototype,"layoutOptions",void 0),ei([oe({attribute:!1})],ti.prototype,"tourTypeOptions",void 0),ei([oe({attribute:!1})],ti.prototype,"onChatTapped",void 0),ei([oe({attribute:!1})],ti.prototype,"launcherStyles",void 0),ei([ae()],ti.prototype,"isEmailWindowOpen",void 0),ei([ae()],ti.prototype,"isCallUsWindowOpen",void 0),ei([ae()],ti.prototype,"isSSTWindowOpen",void 0),ei([ae()],ti.prototype,"isTextUsWindowOpen",void 0),ti=ei([ie("meetelise-launcher")],ti);var ni=n(3379),ii=n.n(ni),ri=n(7795),oi=n.n(ri),ai=n(569),si=n.n(ai),ui=n(3565),li=n.n(ui),di=n(9216),ci=n.n(di),pi=n(4589),fi=n.n(pi),hi=n(3631),mi={};mi.styleTagTransform=fi(),mi.setAttributes=li(),mi.insert=si().bind(null,"head"),mi.domAPI=oi(),mi.insertStyleElement=ci(),ii()(hi.Z,mi),hi.Z&&hi.Z.locals&&hi.Z.locals;var vi,gi=function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a};let yi=vi=class extends te{constructor(){super(...arguments),this.buildingSlug="",this.orgSlug="",this.useMiniWidget=!0,this.launcherStyles={},this.popup=null,this.theme=Fn(),this.chatId="",this.analytics=null,this.isMobile=on(),this.launcher=null,this.building=null,this.hasMounted=!1,this.hideLauncher=!1,this.yardiDNIScriptInterval=null,this.launcherRef=be(),this.initializeInstanceVariables=async()=>{await this.setBuildingDerivedInfo(),await this.initializeLaunchJS(),this.attachOnClickToLauncher()},this.setBuildingDerivedInfo=async()=>{var e;this.buildingSlug&&this.orgSlug&&(this.building=await async function(e,t){const n=`https://app.meetelise.com/api/pub/v1/organization/${e}/building/${t}`,i=await fetch(n);return await i.json()}(this.orgSlug,this.buildingSlug),en(this.building.id),this.chatId=function(e,t){const n=In(e,t),i=localStorage.getItem(n);return i&&!function(e,t){const n=Rn(e,t),i=localStorage.getItem(n)||On(e,t),r=new Date(new Date(i).getTime()+864e5);return new Date>r}(e,t)?i:xn(e,t)}(this.orgSlug,this.buildingSlug),this.avatarSrc=this.avatarSrc||this.building.avatarSrc,this.theme=Fn(null!==(e=this.themeId)&&void 0!==e?e:this.building.themeId),this.analytics=new hn(this.orgSlug,this.buildingSlug,this.chatId))},this.initializeLaunchJS=async()=>{if(!this.building||!this.theme)return;if(this.popup&&this.launcher)return;const[e,t,n,i]=await Promise.all([this.building,this.theme,this.avatarSrc,vi.session]);if(e.conversationMaintenanceMode)return new Promise((()=>{console.warn("MeetElise Chat is in maintenance mode. Chat icon will not appear.")}));await this.configureTalkJSPopup(e,t,i,n),this.configureLauncherElement(),this.yardiDNIScriptInterval=setInterval((()=>this.pollForYardiCampaignSource()),1e3),setTimeout(clearInterval,15e3,this.yardiDNIScriptInterval)},this.configureLauncherElement=()=>{this.popup&&this.launcherRef.value&&(this.launcher=this.launcherRef.value)},this.configureTalkJSPopup=async(e,t,n,i)=>{const r=n.createPopup(Mn(n,e,t,i||e.avatarSrc,this.chatId,this.isMobile),{launcher:"never",showCloseInHeader:!0,messageField:{placeholder:"Ask a question..."}});await r.mount({show:!1}),r.on("close",(()=>{this.hideLauncher=!1}));const o=document.querySelector(".__talkjs_popup");if(!o)throw new Error("Failed to find chat window");o.classList.add("meetelise-chat","pane"),this.isMobile||o.classList.add("launcher__desktop"),o.style.zIndex="99999999999",this.popup=r},this.firstUpdated=()=>{this.initializeInstanceVariables()},this.attachOnClickToLauncher=()=>{const e=this.launcherRef.value;e&&(e.onChatTapped=async()=>{var e;this.popup&&(this.popup.show(),null===(e=this.analytics)||void 0===e||e.ping("open"),this.hideLauncher=!0,this.hasMounted=!0)})}}pollForYardiCampaignSource(){var e,t,n;(null===(t=null===(e=window.RCTPCampaign)||void 0===e?void 0:e.CampaignDetails)||void 0===t?void 0:t.Source)&&(null===(n=this.analytics)||void 0===n||n.ping("yardi-DNI-init"),this.yardiDNIScriptInterval&&clearInterval(this.yardiDNIScriptInterval))}async restartConversation(){if(!(this.analytics&&this.analytics.chatId&&this.building&&this.popup&&vi.session))return;this.chatId=xn(this.orgSlug,this.buildingSlug);const e=await vi.session;this.analytics.chatId=this.chatId,this.popup.select(Mn(e,this.building,this.theme,this.avatarSrc||this.building.avatarSrc,this.chatId,this.isMobile))}remove(){var e;null===(e=this.popup)||void 0===e||e.destroy()}open(){var e;null===(e=this.popup)||void 0===e||e.show()}close(){var e;null===(e=this.popup)||void 0===e||e.hide()}show(){this.launcher&&(this.launcher.style.display="")}hide(){this.launcher&&(this.launcher.style.display="none")}render(){var e,t,n,i,r,o,a,s,u,l;return 182===(null===(e=this.building)||void 0===e?void 0:e.orgId)||4930===(null===(t=this.building)||void 0===t?void 0:t.id)?D``:(window.customElements.get("meetelise-launcher")||window.customElements.define("meetelise-launcher",ti),D`
       <div
         class=${ce({launcherContainer:!0,launcher__mobile:this.isMobile,launcher__desktop:!this.isMobile,"meetelise-chat":!0,launcher:!0,shouldBeVisible:!0})}
       >

package/src/WebComponent/Launcher.ts

@@ -50,7 +50,7 @@ export class Launcher extends LitElement {
   onChatTapped: () => void = () => {
     return;
   };
-  @property()
+  @property({ attribute: false })
   launcherStyles: StyleInfo = {};
 
   @state()
@@ -85,7 +85,13 @@ export class Launcher extends LitElement {
       );
       this.hasTextUsEnabled =
         registeredPhoneNumbers.length > 0 && this.buildingId !== 4895;
-      if (this.buildingId === 3660) {
+      // TODO: replace this with a real API call once the endpoint exists
+      const schedulingIsEnabled = await (async function putApiCallHere(
+        buildingId: number
+      ) {
+        return !!buildingId;
+      })(this.buildingId);
+      if (this.buildingId === 3660 && schedulingIsEnabled) {
         this.hasSSTEnabled = true;
       }
     }

package/src/WebComponent/Scheduler/tour-scheduler.ts

@@ -23,6 +23,7 @@ import { LabeledOption } from "../../fetchBuildingInfo";
 import { isMobile } from "../../utils";
 import axios from "axios";
 import { mapValues } from "lodash";
+import classnames from "classnames";
 
 @customElement("tour-scheduler")
 export class TourScheduler extends LitElement {
@@ -52,6 +53,8 @@ export class TourScheduler extends LitElement {
     [day: string]: DateWithTimeZoneOffset[];
   } = {};
   @state()
+  private waitingForAvailabilities = true;
+  @state()
   private selectedDate?: Date;
   @state()
   private selectedTime?: DateWithTimeZoneOffset | null;
@@ -60,13 +63,13 @@ export class TourScheduler extends LitElement {
   @state()
   private tourIsBooked = false;
 
-  @query("input#firstName")
+  @query(".inputContainer#firstName input")
   firstNameInput!: HTMLInputElement;
-  @query("input#lastName")
+  @query(".inputContainer#lastName input")
   lastNameInput!: HTMLInputElement;
-  @query("input#email")
+  @query(".inputContainer#email input")
   emailInput!: HTMLInputElement;
-  @query("input#phone")
+  @query(".inputContainer#phone input")
   phoneInput!: HTMLInputElement;
   @query("me-select#unitType")
   unitTypeSelect!: MESelect;
@@ -75,6 +78,7 @@ export class TourScheduler extends LitElement {
     this.availabilitiesGroupedByDay = await getAvailabilitiesGroupedByDay(
       tourTypeMap[this.tourType]
     );
+    this.waitingForAvailabilities = false;
 
     // Show a tour type only if it is supported by the building and has
     // time slots available.
@@ -427,7 +431,7 @@ export class TourScheduler extends LitElement {
       gap: 12px;
     }
 
-    #yourInformationMenu > input {
+    #yourInformationMenu input {
       width: 305px;
       height: 49px;
       border: 1px solid #83818e;
@@ -439,7 +443,7 @@ export class TourScheduler extends LitElement {
       color: #202020;
     }
 
-    #yourInformationMenu > input::placeholder {
+    #yourInformationMenu input::placeholder {
       color: #202020;
     }
 
@@ -522,6 +526,81 @@ export class TourScheduler extends LitElement {
       font-size: 18px;
     }
 
+    /* Loading styles: pulsing gray overlay on all the form elements */
+
+    @keyframes spin {
+      0% {
+        transform: none;
+      }
+      50% {
+        transform: rotateZ(180deg);
+      }
+      100% {
+        transform: rotateZ(360deg);
+      }
+    }
+
+    svg#loadingIcon {
+      animation: spin 2s infinite linear;
+    }
+
+    .tour-scheduler.loading #scheduleATour {
+      display: flex;
+      gap: 10px;
+    }
+
+    @keyframes loadingPulse {
+      0% {
+        background-color: #e7e7e7;
+      }
+      50% {
+        background-color: white;
+      }
+      100% {
+        background-color: #e7e7e7;
+      }
+    }
+
+    tour-type-option,
+    date-picker,
+    #yourInformationMenu .inputContainer {
+      position: relative;
+    }
+
+    .tour-scheduler.loading
+      :is(tour-type-option, date-picker, #yourInformationMenu
+        .inputContainer)::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      height: 100%;
+      z-index: 1;
+      animation: loadingPulse 2s infinite;
+    }
+
+    .tour-scheduler.loading tour-type-option::after {
+      border-radius: 10px;
+      width: 200px;
+    }
+
+    .tour-scheduler.loading date-picker::after {
+      border-radius: 10px;
+      width: 205px;
+    }
+
+    .tour-scheduler.loading #yourInformationMenu .inputContainer::after {
+      width: 100%;
+    }
+
+    .tour-scheduler.loading #yourInformationMenu .inputContainer input {
+      visibility: hidden;
+    }
+
+    .tour-scheduler.loading time-picker {
+      display: none;
+    }
+
     @media (max-width: 767px) {
       /* TODO: separate styles into general, desktop-specific, and mobile-specific.
       basically everything I have "unset" or "initial" on should become desktop-specific. the grid layout is only for desktop.
@@ -841,44 +920,56 @@ export class TourScheduler extends LitElement {
   userInfoAndLayoutMenu(): TemplateResult {
     return html`<h2 id="yourInformation">Your information</h2>
       <div id="yourInformationMenu">
-        <input
-          type="text"
-          placeholder="First name"
-          id="firstName"
-          @input=${() => this.requestUpdate()}
-        />
-        <input
-          type="text"
-          placeholder="Last name"
-          id="lastName"
-          @input=${() => this.requestUpdate()}
-        />
-        <input
-          type="email"
-          inputmode="email"
-          placeholder="Email"
-          id="email"
-          .value=${this.email}
-          @input=${this.onChangeEmail}
-        />
-        <input
-          type="tel"
-          inputmode="tel"
-          placeholder="Phone"
-          id="phone"
-          maxlength="14"
-          .value=${this.phoneNumber}
-          @keydown=${this.handlePhoneKeydown}
-          @keyup=${this.handlePhoneKeyup}
-          @input=${(e: Event) => {
-            if (!e.target) {
-              return;
-            }
-            this.phoneNumber = formatToPhone(
-              (e.target as HTMLInputElement).value
-            );
-          }}
-        />
+        <div class="inputContainer" id="firstName">
+          <input
+            type="text"
+            placeholder="First name"
+            name="firstName"
+            autocomplete="given-name"
+            @input=${() => this.requestUpdate()}
+          />
+        </div>
+        <div class="inputContainer" id="lastName">
+          <input
+            type="text"
+            placeholder="Last name"
+            name="lastName"
+            autocomplete="family-name"
+            @input=${() => this.requestUpdate()}
+          />
+        </div>
+        <div class="inputContainer" id="email">
+          <input
+            type="email"
+            inputmode="email"
+            placeholder="Email"
+            name="email"
+            autocomplete="email"
+            .value=${this.email}
+            @input=${this.onChangeEmail}
+          />
+        </div>
+        <div class="inputContainer" id="phone">
+          <input
+            type="tel"
+            inputmode="tel"
+            placeholder="Phone"
+            name="phone"
+            autocomplete="tel-national"
+            maxlength="14"
+            .value=${this.phoneNumber}
+            @keydown=${this.handlePhoneKeydown}
+            @keyup=${this.handlePhoneKeyup}
+            @input=${(e: Event) => {
+              if (!e.target) {
+                return;
+              }
+              this.phoneNumber = formatToPhone(
+                (e.target as HTMLInputElement).value
+              );
+            }}
+          />
+        </div>
       </div>
       <!--
         Layout dropdown would go here, but has been removed pending backend support.
@@ -927,11 +1018,35 @@ export class TourScheduler extends LitElement {
     `;
   }
 
+  loadingIcon(): TemplateResult {
+    return html`<svg
+      id="loadingIcon"
+      width="21"
+      height="21"
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.835 13.1045C18.4839 11.5628 18.6332 9.85647 18.2621 8.22548C17.8909 6.5945 17.018 5.12084 15.7659 4.0117C14.5139 2.90256 12.9457 2.21372 11.2818 2.04201C9.618 1.87031 7.94218 2.22438 6.49 3.05445L5.498 1.31745C7.01563 0.450066 8.73419 -0.00418222 10.4822 2.90165e-05C12.2302 0.00424025 13.9466 0.466764 15.46 1.34145C19.95 3.93345 21.67 9.48345 19.577 14.1115L20.919 14.8855L16.754 17.0995L16.589 12.3855L17.835 13.1045ZM3.085 6.89845C2.43614 8.44015 2.28678 10.1464 2.65792 11.7774C3.02905 13.4084 3.90201 14.8821 5.15407 15.9912C6.40613 17.1003 7.97432 17.7892 9.63816 17.9609C11.302 18.1326 12.9778 17.7785 14.43 16.9485L15.422 18.6855C13.9044 19.5528 12.1858 20.0071 10.4378 20.0029C8.68979 19.9987 6.97344 19.5361 5.46 18.6615C0.97 16.0695 -0.75 10.5195 1.343 5.89145L0 5.11845L4.165 2.90445L4.33 7.61845L3.084 6.89945L3.085 6.89845Z"
+        fill="#1E1E1E"
+      />
+    </svg>`;
+  }
+
   render(): TemplateResult {
     if (!isMobile()) {
       return html`
-        <div class="tour-scheduler">
-          <h1 id="scheduleATour">Schedule a tour</h1>
+        <div
+          class="${classnames("tour-scheduler", {
+            loading: this.waitingForAvailabilities,
+          })}"
+        >
+          <h1 id="scheduleATour">
+            ${this.waitingForAvailabilities
+              ? html`${this.loadingIcon()} Searching availabilities...`
+              : "Schedule a tour"}
+          </h1>
           ${this.closeButton()}
           ${this.tourIsBooked
             ? html`
@@ -956,9 +1071,17 @@ export class TourScheduler extends LitElement {
     } else {
       const currentPage = this.mobilePages[this.mobilePageIndex];
       return html`
-        <div class="tour-scheduler">
+        <div
+          class="${classnames("tour-scheduler", {
+            loading: this.waitingForAvailabilities,
+          })}"
+        >
           <div id="topControls">
-            <h1 id="scheduleATour">Schedule a tour</h1>
+            <h1 id="scheduleATour">
+              ${this.waitingForAvailabilities
+                ? html`${this.loadingIcon()} Searching availabilities...`
+                : "Schedule a tour"}
+            </h1>
             ${this.closeButton()}
           </div>
           ${this.tourIsBooked
@@ -968,7 +1091,9 @@ export class TourScheduler extends LitElement {
                   id="next"
                   @click=${currentPage.nextButtonAction}
                   ?disabled=${(() => {
-                    return !currentPage.validate();
+                    return (
+                      !currentPage.validate() || this.waitingForAvailabilities
+                    );
                   })()}
                 >
                   ${currentPage.nextButtonText}