@meetelise/chat 1.20.24 → 1.20.25

package/src/WebComponent/Launcher.ts

@@ -143,9 +143,12 @@ export class Launcher extends LitElement {
     sstWindowRef.onCloseClicked = this.onCloseSSTWindow;
   };
 
-  onClickEmailOption = (e: MouseEvent): void => {
-    e.preventDefault();
-    e.stopPropagation();
+  onClickEmailOption = (e?: MouseEvent): void => {
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
     this.isEmailWindowOpen = true;
   };
 

package/src/WebComponent/me-chat.ts

@@ -44,6 +44,38 @@ export class MEChat extends LitElement {
       width: 100%;
       height: 100px;
     }
+    .contactBttnPopup {
+      position: absolute;
+      bottom: 24px;
+      right: 0px;
+      width: 155px;
+      height: 56px;
+      padding-left: 20px;
+      padding-right: 20px;
+
+      border: none;
+      background: rgba(0, 0, 0, 0.9);
+      box-shadow: 0px 0px 14px 5px rgba(0, 0, 0, 0.25);
+      backdrop-filter: blur(5px);
+
+      border-radius: 10px 0px 0px 10px;
+
+      font-family: "Poppins";
+      font-style: normal;
+      font-weight: 600;
+      font-size: 14px;
+      line-height: 22px;
+
+      color: #ffffff;
+
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .contactBttnPopup:hover {
+      background: rgba(0, 0, 0, 0.8);
+      cursor: pointer;
+    }
   `;
   static session: Promise<Talk.Session> = Talk.ready.then(() => {
     const me = new Talk.User({
@@ -283,59 +315,88 @@ export class MEChat extends LitElement {
     this.initializeInstanceVariables();
   };
 
+  handleContactClicked = (): void => {
+    this.popup?.hide();
+    this.hideLauncher = false;
+
+    this.launcherRef.value?.onClickEmailOption();
+  };
+
   render(): TemplateResult {
     installLauncher();
 
     return html`
-      <div
-        class=${classMap({
-          launcherContainer: true,
-          ["launcher__mobile"]: this.isMobile,
-          ["launcher__desktop"]: !this.isMobile,
-          ["meetelise-chat"]: true,
-          launcher: true,
-          shouldBeVisible: true,
-        })}
-      >
-        ${this.building
-          ? html`<meetelise-launcher
-              ${ref(this.launcherRef)}
-              .isMobile=${this.isMobile}
-              .isFirstMount=${!this.hasMounted}
-              .isMini=${this.useMiniWidget}
-              .buildingId=${this.building?.id ?? 0}
-              .layoutOptions=${this.building?.layoutOptionsV2 ?? []}
-              .unitOptions=${this.building?.unitOptionsV2 ?? []}
-              .tourTypeOptions=${this.building?.tourTypeOptions ?? []}
-              .launcherStyles=${this.launcherStyles}
-              .autoOpenChatWidget=${this.building.autoOpenChatWidget ?? false}
-              chatCallUsHeader=${this.building?.chatCallUsHeader ?? "Call us"}
-              phoneNumber="${this.building?.phoneNumber ?? ""}"
-              textColor="${this.theme.chatHeader.textColor}"
-              backgroundColor="${this.theme.chatPaneBackgroundColor}"
-              orgSlug="${this.orgSlug}"
-              buildingSlug="${this.buildingSlug}"
-              sgtUrl="${this.building?.sgtUrl ?? ""}"
-              escortedToursLink="${this.building?.escortedToursLink ?? ""}"
-              virtualToursLink="${this.building?.virtualToursLink ?? ""}"
-              ?hidden=${this.hideLauncher}
-              ?hasCallUsEnabled=${!this.building?.chatWidgets
-                ? true
-                : this.building?.chatWidgets.includes("CALL")}
-              ?hasChatEnabled=${!this.building?.chatWidgets
-                ? true
-                : this.building?.chatWidgets.includes("CHAT")}
-              ?hasEmailEnabled=${!this.building?.chatWidgets
-                ? true
-                : this.building?.chatWidgets.includes("EMAIL")}
-              ?hasTextUsEnabled=${!this.building?.chatWidgets
-                ? true
-                : this.building?.chatWidgets.includes("SMS")}
-              ?hasSSTEnabled=${!this.building?.chatWidgets
-                ? true
-                : this.building?.chatWidgets.includes("SST")}
+      <div>
+        <div
+          class=${classMap({
+            launcherContainer: true,
+            ["launcher__mobile"]: this.isMobile,
+            ["launcher__desktop"]: !this.isMobile,
+            ["meetelise-chat"]: true,
+            launcher: true,
+            shouldBeVisible: true,
+          })}
+        >
+          ${this.building
+            ? html`<meetelise-launcher
+                ${ref(this.launcherRef)}
+                .isMobile=${this.isMobile}
+                .isFirstMount=${!this.hasMounted}
+                .isMini=${this.useMiniWidget}
+                .buildingId=${this.building?.id ?? 0}
+                .layoutOptions=${this.building?.layoutOptionsV2 ?? []}
+                .unitOptions=${this.building?.unitOptionsV2 ?? []}
+                .tourTypeOptions=${this.building?.tourTypeOptions ?? []}
+                .launcherStyles=${this.launcherStyles}
+                .autoOpenChatWidget=${this.building.autoOpenChatWidget ?? false}
+                chatCallUsHeader=${this.building?.chatCallUsHeader ?? "Call us"}
+                phoneNumber="${this.building?.phoneNumber ?? ""}"
+                textColor="${this.theme.chatHeader.textColor}"
+                backgroundColor="${this.theme.chatPaneBackgroundColor}"
+                orgSlug="${this.orgSlug}"
+                buildingSlug="${this.buildingSlug}"
+                sgtUrl="${this.building?.sgtUrl ?? ""}"
+                escortedToursLink="${this.building?.escortedToursLink ?? ""}"
+                virtualToursLink="${this.building?.virtualToursLink ?? ""}"
+                ?hidden=${this.hideLauncher}
+                ?hasCallUsEnabled=${!this.building?.chatWidgets
+                  ? true
+                  : this.building?.chatWidgets.includes("CALL")}
+                ?hasChatEnabled=${!this.building?.chatWidgets
+                  ? true
+                  : this.building?.chatWidgets.includes("CHAT")}
+                ?hasEmailEnabled=${!this.building?.chatWidgets
+                  ? true
+                  : this.building?.chatWidgets.includes("EMAIL")}
+                ?hasTextUsEnabled=${!this.building?.chatWidgets
+                  ? true
+                  : this.building?.chatWidgets.includes("SMS")}
+                ?hasSSTEnabled=${!this.building?.chatWidgets
+                  ? true
+                  : this.building?.chatWidgets.includes("SST")}
+              >
+              </meetelise-launcher>`
+            : ""}
+        </div>
+        ${this.hideLauncher
+          ? html` <button
+              class="contactBttnPopup"
+              @click=${this.handleContactClicked}
             >
-            </meetelise-launcher>`
+              <svg
+                width="24"
+                height="23"
+                viewBox="0 0 24 23"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M17.2816 8.04964H5.78216C5.47717 8.04964 5.18468 8.1708 4.96902 8.38646C4.75336 8.60211 4.63221 8.89461 4.63221 9.19959C4.63221 9.50458 4.75336 9.79707 4.96902 10.0127C5.18468 10.2284 5.47717 10.3495 5.78216 10.3495H17.2816C17.5866 10.3495 17.8791 10.2284 18.0948 10.0127C18.3104 9.79707 18.4316 9.50458 18.4316 9.19959C18.4316 8.89461 18.3104 8.60211 18.0948 8.38646C17.8791 8.1708 17.5866 8.04964 17.2816 8.04964ZM12.6819 12.6494H5.78216C5.47717 12.6494 5.18468 12.7706 4.96902 12.9863C4.75336 13.2019 4.63221 13.4944 4.63221 13.7994C4.63221 14.1044 4.75336 14.3969 4.96902 14.6125C5.18468 14.8282 5.47717 14.9493 5.78216 14.9493H12.6819C12.9868 14.9493 13.2793 14.8282 13.495 14.6125C13.7106 14.3969 13.8318 14.1044 13.8318 13.7994C13.8318 13.4944 13.7106 13.2019 13.495 12.9863C13.2793 12.7706 12.9868 12.6494 12.6819 12.6494ZM11.5319 0C10.0218 0 8.52642 0.297443 7.13124 0.875347C5.73605 1.45325 4.46836 2.3003 3.40054 3.36812C1.24396 5.5247 0.0324129 8.44964 0.0324129 11.4995C0.0223598 14.1549 0.941784 16.7301 2.6313 18.7787L0.3314 21.0786C0.171835 21.2403 0.0637445 21.4456 0.0207662 21.6687C-0.0222121 21.8918 0.00184785 22.1226 0.0899103 22.332C0.185423 22.5389 0.340259 22.7128 0.534764 22.8315C0.72927 22.9503 0.954673 23.0086 1.18236 22.999H11.5319C14.5818 22.999 17.5067 21.7874 19.6633 19.6309C21.8198 17.4743 23.0314 14.5493 23.0314 11.4995C23.0314 8.44964 21.8198 5.5247 19.6633 3.36812C17.5067 1.21155 14.5818 0 11.5319 0ZM11.5319 20.6991H3.95374L5.02319 19.6296C5.23737 19.4142 5.35759 19.1227 5.35759 18.8189C5.35759 18.5151 5.23737 18.2237 5.02319 18.0082C3.51743 16.5041 2.57975 14.5245 2.3699 12.4066C2.16006 10.2887 2.69103 8.1635 3.87235 6.39317C5.05368 4.62284 6.81227 3.31687 8.84851 2.69775C10.8848 2.07863 13.0727 2.18468 15.0395 2.99782C17.0063 3.81096 18.6304 5.28088 19.6349 7.15716C20.6395 9.03343 20.9625 11.2 20.5488 13.2877C20.1351 15.3754 19.0104 17.255 17.3662 18.6065C15.722 19.9579 13.6602 20.6974 11.5319 20.6991Z"
+                  fill="white"
+                />
+              </svg>
+              <p>Contact us</p>
+            </button>`
           : ""}
       </div>
     `;