@meetelise/chat 1.15.0 → 1.16.0

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

@@ -61,6 +61,8 @@ export class TourScheduler extends LitElement {
   @state()
   private mobilePageIndex = 0;
   @state()
+  private isSubmitting = false;
+  @state()
   private tourIsBooked = false;
 
   @query(".inputContainer#firstName input")
@@ -308,10 +310,12 @@ export class TourScheduler extends LitElement {
       tour_time: `${this.selectedTime.datetime}${this.selectedTime.offset}`, // e.g., "2022-06-27T09:00:00-07:00"
     };
     const url = `https://app.meetelise.com/platformApi/state/create/scheduleMe`;
+    this.isSubmitting = true;
     const response = await axios.post(url, data, {
       headers: { ["X-SecurityKey"]: "JRL8jV4VcSCwOSir5gWkpgNLfKghmhBG" },
     });
     if (response.status === 200) {
+      this.isSubmitting = false;
       this.tourIsBooked = true;
     }
   };
@@ -485,36 +489,14 @@ export class TourScheduler extends LitElement {
       padding-top: 32px;
     }
 
-    button#schedule {
+    #schedule {
       width: 145px;
       height: 50px;
-      background: #202020;
-      border: 1px solid #ffffff;
-      border-radius: 10px;
       grid-row: 7;
       grid-column: 3;
       justify-self: end;
       align-self: start;
       margin-top: 18px;
-      font-family: "Poppins";
-      font-weight: 700;
-      font-size: 14px;
-      color: #ffffff;
-      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
-    }
-
-    button#schedule:not(:disabled):hover {
-      opacity: 0.7;
-    }
-
-    button#schedule:not(:disabled):active {
-      box-shadow: none;
-      opacity: 1;
-    }
-
-    button#schedule:disabled {
-      background: #e7e7e7;
-      box-shadow: none;
     }
 
     #confirmationMessage {
@@ -909,8 +891,18 @@ export class TourScheduler extends LitElement {
     },
     {
       validate: (): boolean => this.validators.leadInfo(),
-      nextButtonText: "Schedule tour",
-      nextButtonAction: this.submit,
+      // last page gets <action-confirm-button> instead of the regular button
+      nextButtonText: null,
+      renderNextButton: (): TemplateResult => html`<action-confirm-button
+        id="schedule"
+        .onClick=${this.submit}
+        .isLoading=${this.isSubmitting}
+        height="50px"
+        width="145px"
+        text="Schedule tour"
+        ?disabled=${!this.formIsValidForSubmission()}
+      ></action-confirm-button>`,
+      nextButtonAction: null,
       render: (): TemplateResult => {
         return html`${this.userInfoAndLayoutMenu()}`;
       },
@@ -1059,13 +1051,15 @@ export class TourScheduler extends LitElement {
                   We’ll send a confirmation and any follow-ups to your email
                   address.
                 </p>
-                <button
+                <action-confirm-button
                   id="schedule"
+                  .onClick=${this.submit}
+                  .isLoading=${this.isSubmitting}
+                  height="50px"
+                  width="145px"
+                  text="Schedule tour"
                   ?disabled=${!this.formIsValidForSubmission()}
-                  @click=${this.submit}
-                >
-                  Schedule tour
-                </button>`}
+                ></action-confirm-button>`}
         </div>
       `;
     } else {
@@ -1086,18 +1080,20 @@ export class TourScheduler extends LitElement {
           </div>
           ${this.tourIsBooked
             ? this.confirmationMessage()
-            : html`${currentPage.render()}
-                <button
-                  id="next"
-                  @click=${currentPage.nextButtonAction}
-                  ?disabled=${(() => {
-                    return (
-                      !currentPage.validate() || this.waitingForAvailabilities
-                    );
-                  })()}
-                >
-                  ${currentPage.nextButtonText}
-                </button>`}
+            : html` ${currentPage.render()}
+              ${!currentPage.renderNextButton
+                ? html` <button
+                    id="next"
+                    @click=${currentPage.nextButtonAction}
+                    ?disabled=${(() => {
+                      return (
+                        !currentPage.validate() || this.waitingForAvailabilities
+                      );
+                    })()}
+                  >
+                    ${currentPage.nextButtonText}
+                  </button>`
+                : currentPage.renderNextButton()}`}
         </div>
       `;
     }

package/src/WebComponent/actions/action-confirm-button.ts

@@ -1,3 +1,4 @@
+import classnames from "classnames";
 import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
@@ -6,6 +7,9 @@ export class ActionConfirmButton extends LitElement {
   static styles = [
     css`
       .action-confirm-button {
+        display: flex;
+        justify-content: center;
+        align-items: center;
         background: #1e1e1e;
         border: 2px solid #ffffff;
         box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
@@ -23,11 +27,24 @@ export class ActionConfirmButton extends LitElement {
         cursor: pointer;
       }
 
-      .action-confirm-button:active {
+      .action-confirm-button:disabled {
+        background: #e7e7e7;
+        box-shadow: none;
+        cursor: initial;
+      }
+      .action-confirm-button:not(:is(:disabled, .loading)):active {
         transform: translateY(2px);
         box-shadow: 0px 0px 0px rgba(36, 53, 141, 0.25);
       }
 
+      .action-confirm-button:not(:is(:active, :disabled, .loading)):hover {
+        opacity: 0.7;
+      }
+
+      .loading {
+        cursor: initial;
+      }
+
       .lds-ring {
         display: inline-block;
         position: relative;
@@ -71,9 +88,20 @@ export class ActionConfirmButton extends LitElement {
   text = "Submit";
   @property({ attribute: false })
   isLoading = false;
+  @property({ type: Boolean })
+  disabled = false;
+  @property({ type: String })
+  height = "initial";
+  @property({ type: String })
+  width = "initial";
 
   render = (): TemplateResult => {
-    return html`<button class="action-confirm-button" @click=${this.onClick}>
+    return html`<button
+      class=${classnames("action-confirm-button", { loading: this.isLoading })}
+      @click=${!this.isLoading ? this.onClick : null}
+      ?disabled=${this.disabled}
+      style=${`height: ${this.height}; width: ${this.width};`}
+    >
       ${!this.isLoading
         ? this.text
         : html`<div class="lds-ring">

package/src/WebComponent/me-chat.ts

@@ -136,6 +136,8 @@ export class MEChat extends LitElement {
     await this.configureTalkJSPopup(building, theme, session, avatarSrc);
     this.configureLauncherElement();
 
+    this.analytics?.ping("load");
+
     this.yardiDNIScriptInterval = setInterval(
       () => this.pollForYardiCampaignSource(),
       1000
@@ -263,7 +265,7 @@ export class MEChat extends LitElement {
   };
 
   render(): TemplateResult {
-    if (this.building?.orgId === 182 || this.building?.id === 4930) {
+    if (this.building?.id === 4930) {
       return html``;
     }
     installLauncher();
@@ -321,6 +323,7 @@ declare global {
   interface HTMLElementTagNameMap {
     "me-chat": MEChat;
   }
+
   interface Window {
     RCTPCampaign?: { CampaignDetails: { Source: string } };
   }