@meetelise/chat 1.21.2 → 1.21.4

package/src/MEChat.ts

@@ -140,6 +140,10 @@ export default class MEChat {
       meChat.setAttribute("top", opts.position.top?.toString() || "unset");
       meChat.setAttribute("left", opts.position.left?.toString() || "unset");
     }
+    if (opts.overrideRentgrata) {
+      this.handleRentgrataOverride();
+      meChat.overrideRentgrata = true;
+    }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (window as any).eliseAi = {};
     document.body.appendChild(meChat);
@@ -198,6 +202,47 @@ export default class MEChat {
     );
   }
 
+  static async handleRentgrataOverride(): Promise<void> {
+    const rentgrataWrapperElement = await this.waitForElement(
+      "rg-widget-compact"
+    );
+    if (!rentgrataWrapperElement) {
+      return;
+    }
+    rentgrataWrapperElement.setAttribute("style", "display: none");
+  }
+
+  static async waitForElement(
+    elementId: string,
+    timeout = 5000
+  ): Promise<Element> {
+    return new Promise((resolve, reject) => {
+      const observer = new MutationObserver((mutationsList, observer) => {
+        const element = document.getElementById(elementId);
+        if (element) {
+          observer.disconnect();
+          resolve(element);
+        }
+      });
+
+      observer.observe(document.body, { childList: true, subtree: true });
+
+      const timeoutId = setTimeout(() => {
+        observer.disconnect();
+        reject(
+          new Error(`Element ${elementId} did not appear within ${timeout}ms`)
+        );
+      }, timeout);
+
+      const element = document.querySelector(elementId);
+      if (element) {
+        clearTimeout(timeoutId);
+        observer.disconnect();
+        resolve(element);
+      }
+    });
+  }
+
   static async handleSingleFamilyUrl(): Promise<void> {
     if (this.hasBuildingSlug) {
       return;
@@ -294,6 +339,7 @@ export interface Options {
   mobileStyles?: StyleInfo;
   position?: PositioningOptions;
   onWidgetLoaded?: () => void;
+  overrideRentgrata?: boolean;
 }
 
 /** You can't install a font from CSS in a shadow DOM, so we use JS to do it here in the regular DOM. */

package/src/WebComponent/launcher/Launcher.ts

@@ -21,6 +21,7 @@ import {
   ChevronIconBlack,
   ChevronIconWhite,
   ChatBlackOutlineIcon,
+  ContactResidentBlackOutlineIcon,
 } from "../../svgIcons";
 import {
   defaultBackgroundColor,
@@ -33,6 +34,12 @@ import { isMobile } from "../../utils";
 import classNames from "classnames";
 import LeadSourceClient from "../LeadSourceClient";
 
+import {
+  closeRengrataWidget,
+  hasRentgrata,
+  openRengrataWidget,
+} from "../../rentgrata";
+
 @customElement("meetelise-launcher")
 export class Launcher extends LitElement {
   static styles = css`
@@ -135,6 +142,9 @@ export class Launcher extends LitElement {
     return;
   };
 
+  @property({ attribute: true })
+  overrideRentgrata = false;
+
   @property({ attribute: false })
   launcherStyles: StyleInfo = {};
 
@@ -209,6 +219,7 @@ export class Launcher extends LitElement {
   onClickEmailOption = (e: MouseEvent): void => {
     e.preventDefault();
     e.stopPropagation();
+    closeRengrataWidget();
 
     this.isEmailWindowOpen = true;
   };
@@ -232,6 +243,7 @@ export class Launcher extends LitElement {
   onClickPhoneOption = (e: MouseEvent): void => {
     e.preventDefault();
     e.stopPropagation();
+    closeRengrataWidget();
     this.isCallUsWindowOpen = true;
   };
 
@@ -247,6 +259,7 @@ export class Launcher extends LitElement {
   onClickSSTOption = (e: MouseEvent): void => {
     e.preventDefault();
     e.stopPropagation();
+    closeRengrataWidget();
     this.isSSTWindowOpen = true;
   };
 
@@ -317,6 +330,7 @@ export class Launcher extends LitElement {
         .onClickPhoneOption=${this.onClickPhoneOption}
         .onClickSSTOption=${this.onClickSSTOption}
         .onChatTapped=${this.onChatTapped}
+        .overrideRentgrata=${this.overrideRentgrata}
         .isMobileDesign=${isMobile() ||
         this.designConcept === DesignConcepts.MINIMIZED}
         .brandColor=${this.brandColor}
@@ -460,6 +474,26 @@ export class Launcher extends LitElement {
                       </div>
                     </div>`
                 : ""}
+              ${this.overrideRentgrata && hasRentgrata()
+                ? html`
+                    <div
+                      class="type-hey__pill"
+                      @click=${() => {
+                        openRengrataWidget();
+                      }}
+                      style=${styleMap({
+                        background: this.backgroundColor,
+                      })}>
+                      <div class="type-hey__pill-left">
+                        <div class="type-hey__icon">${ContactResidentBlackOutlineIcon}</div>
+                          <div>
+                            <span class="title-bold">Contact</span> a resident
+                          </div>
+                      </div>
+                      <div class="type-gradient__icon">${ChevronIconBlack}</div>
+                      </div>
+                    </div>`
+                : ""}
             </div>
 
             <div class="type-hey__bottom-info">
@@ -680,6 +714,29 @@ export class Launcher extends LitElement {
             </div>
           `
         : ""}
+      ${this.overrideRentgrata && hasRentgrata()
+        ? html`
+            <div
+              @click=${() => {
+                openRengrataWidget();
+              }}
+              class="inner-pill-wrapper"
+              style=${styleMap({
+                background: this.backgroundColor,
+              })}
+            >
+              <div class="vertical-pill-left">
+                <div class="vertical-pill-icon">
+                  ${ContactResidentBlackOutlineIcon}
+                </div>
+                <div class="vertical-pill-title">
+                  <span class="vertical-pill-bold">Contact</span> a resident
+                </div>
+              </div>
+              <div class="chevron-right">${ChevronIconBlack}</div>
+            </div>
+          `
+        : ""}
     </div>`;
   };
 

package/src/WebComponent/launcher/mobile-launcher.ts

@@ -63,6 +63,9 @@ export class MobileLauncher extends LitElement {
   @property({ attribute: true })
   hasSSTEnabled = false;
 
+  @property({ attribute: true })
+  overrideRentgrata = false;
+
   private renderListElement = (
     isEnabled: boolean,
     onClick: (e: MouseEvent) => void,

package/src/WebComponent/launcher/typeEmojiStyles.ts

@@ -52,7 +52,7 @@ export const typeEmojiStyles = css`
     gap: 4px;
   }
   .type-hey__pill {
-    width: 130px;
+    width: 164px;
     height: 32px;
 
     background: #ffffff;

package/src/WebComponent/launcher/typeMiniStyles.ts

@@ -12,7 +12,7 @@ export const typeMiniStyles = css`
     color: #ffffff;
   }
   .inner-pill-wrapper {
-    width: 130px;
+    width: 164px;
     height: 36px;
     position: relative;
 

package/src/WebComponent/me-chat.ts

@@ -56,6 +56,7 @@ import LeadSourceClient, {
   getDefaultLeadSourceAttribution,
 } from "./LeadSourceClient";
 import noop from "lodash/noop";
+import { updateRentgrataToken } from "../rentgrata";
 
 @customElement("me-chat")
 export class MEChat extends LitElement {
@@ -179,6 +180,9 @@ export class MEChat extends LitElement {
   @property({ type: Number })
   private left = undefined;
 
+  @property({ attribute: true })
+  overrideRentgrata = false;
+
   @property()
   onWidgetLoaded: () => void = noop;
 
@@ -223,6 +227,14 @@ export class MEChat extends LitElement {
   private setupWebchat = async (): Promise<void> => {
     if (!this.buildingSlug || !this.orgSlug) return;
     const building = await fetchBuildingInfo(this.orgSlug, this.buildingSlug);
+    if (Math.random() < 0.2) {
+      try {
+        updateRentgrataToken(this.buildingSlug, this.orgSlug);
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.warn("Error updating rentgrata token", e);
+      }
+    }
     if (building.conversationMaintenanceMode) {
       // eslint-disable-next-line no-console
       console.warn(
@@ -777,6 +789,7 @@ export class MEChat extends LitElement {
                   .backgroundColor=${this.backgroundColor}
                   .isMinimized=${this.isMinimized}
                   .onClickMinimize=${this.onClickMinimize}
+                  .overrideRentgrata=${this.overrideRentgrata}
                   .autoOpenChatWidget=${this.building.autoOpenChatWidget ??
                   false}
                   .mobileStyles=${isMobile() || this.isMinimized

package/src/rentgrata.ts

@@ -0,0 +1,74 @@
+import axios from "axios";
+
+export const openRengrataWidget = (): void => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const rentgrata = (window as any).rentgrata;
+  if (!rentgrata) {
+    return;
+  }
+  const rentgrataWidget = rentgrata.Widget;
+  if (!rentgrataWidget) {
+    return;
+  }
+  if (!rentgrataWidget.openWidget) {
+    return;
+  }
+  rentgrataWidget.openWidget();
+};
+
+export const closeRengrataWidget = (): void => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const rentgrata = (window as any).rentgrata;
+  if (!rentgrata) {
+    return;
+  }
+  const rentgrataWidget = rentgrata.Widget;
+  if (!rentgrataWidget) {
+    return;
+  }
+  if (!rentgrataWidget.openWidget) {
+    return;
+  }
+  rentgrataWidget.close();
+};
+
+export const hasRentgrata = (): boolean => {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  return !!(window as any).rentgrata;
+};
+
+export const updateRentgrataToken = async (
+  buildingSlug: string,
+  orgSlug: string
+): Promise<void> => {
+  const host = "https://app.meetelise.com";
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const rentgrata = (window as any).rentgrata;
+  if (!rentgrata) {
+    return;
+  }
+  const rentgrataWidget = rentgrata.Widget;
+  if (!rentgrataWidget) {
+    return;
+  }
+  const rentgrataConfig = rentgrataWidget.config;
+  if (!rentgrataConfig) {
+    return;
+  }
+
+  const widgetKey = rentgrataConfig.widgetKey;
+  if (!widgetKey) {
+    return;
+  }
+  await axios.post(
+    `${host}/platformApi/webchat/rentgrata?token=${widgetKey}`,
+    {},
+    {
+      headers: {
+        "Content-Type": "application/json",
+        "building-slug": buildingSlug ?? "",
+        "org-slug": orgSlug ?? "",
+      },
+    }
+  );
+};

package/src/svgIcons.ts

@@ -24,6 +24,13 @@ export const BookTourBlackOutlineIcon = svg`<svg xmlns="http://www.w3.org/2000/s
 <path d="M15.689 6.11862V6.22322C15.689 6.19053 15.689 6.15131 15.6825 6.11862H15.689Z" fill="white"/>
 <path d="M4.74594 11.9562L6.56326 13.7735C6.8182 14.0285 7.23004 14.0285 7.48499 13.7735L10.9366 10.3219" stroke="black" stroke-miterlimit="10" stroke-linecap="round"/>
 </svg>`;
+
+export const ContactResidentBlackOutlineIcon = svg`<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 6C7.65685 6 9 4.65685 9 3C9 1.34315 7.65685 0 6 0C4.34315 0 3 1.34315 3 3C3 4.65685 4.34315 6 6 6ZM8 3C8 4.10457 7.10457 5 6 5C4.89543 5 4 4.10457 4 3C4 1.89543 4.89543 1 6 1C7.10457 1 8 1.89543 8 3Z" fill="black"/>
+<path d="M12 11C12 12 11 12 11 12H1C1 12 0 12 0 11C0 10 1 7 6 7C11 7 12 10 12 11ZM11 10.9965C10.9986 10.7497 10.8462 10.0104 10.1679 9.33211C9.51563 8.67985 8.2891 8 5.99999 8C3.71088 8 2.48435 8.67985 1.8321 9.33211C1.15375 10.0104 1.00142 10.7497 1 10.9965H11Z" fill="black"/>
+</svg>
+`;
+
 export const PhoneBlackOutlineIcon = svg`<svg xmlns="http://www.w3.org/2000/svg" width="14" height="17" viewBox="0 0 14 17" fill="none">
 <path fill-rule="evenodd" clip-rule="evenodd" d="M6.95487 2.54301e-07H7.04513C8.51534 -1.22821e-05 9.67985 -2.22686e-05 10.5912 0.121084C11.5292 0.24572 12.2883 0.508324 12.887 1.10005C13.4857 1.69178 13.7514 2.44211 13.8775 3.36914C14 4.26992 14 5.42089 14 6.874V10.126C14 11.5791 14 12.7301 13.8775 13.6309C13.7514 14.5579 13.4857 15.3082 12.887 15.8999C12.2883 16.4917 11.5292 16.7543 10.5912 16.8789C9.67985 17 8.51534 17 7.04513 17H6.95487C5.48466 17 4.32015 17 3.40878 16.8789C2.47084 16.7543 1.71169 16.4917 1.11299 15.8999C0.514304 15.3082 0.248611 14.5579 0.122508 13.6309C-2.25306e-05 12.7301 -1.24266e-05 11.5791 2.57292e-07 10.126V6.87399C-1.24266e-05 5.42088 -2.25306e-05 4.26992 0.122508 3.36914C0.248611 2.44211 0.514304 1.69178 1.11299 1.10005C1.71169 0.508324 2.47084 0.24572 3.40878 0.121084C4.32015 -2.22686e-05 5.48466 -1.22821e-05 6.95487 2.54301e-07ZM2.85118 1.44157C2.45996 1.55714 2.18378 1.71904 1.96152 1.93871C1.62295 2.27335 1.42002 2.73167 1.31181 3.52718C1.20127 4.33975 1.2 5.41089 1.2 6.9186V10.0814C1.2 11.5891 1.20127 12.6602 1.31181 13.4728C1.42002 14.2683 1.62295 14.7267 1.96152 15.0613C2.30009 15.3959 2.76381 15.5965 3.56868 15.7034C4.39081 15.8127 5.47454 15.814 7 15.814C8.52546 15.814 9.60919 15.8127 10.4313 15.7034C11.2362 15.5965 11.6999 15.3959 12.0385 15.0613C12.377 14.7267 12.58 14.2683 12.6882 13.4728C12.7987 12.6602 12.8 11.5891 12.8 10.0814V6.9186C12.8 5.41089 12.7987 4.33975 12.6882 3.52718C12.58 2.73167 12.377 2.27335 12.0385 1.93871C11.8162 1.71905 11.54 1.55714 11.1488 1.44157C10.6194 2.22728 10.2493 2.77349 9.69896 3.1115C9.58916 3.17894 9.47507 3.23928 9.3574 3.29217C8.76366 3.55903 8.09363 3.55868 7.12834 3.55818C7.08613 3.55816 7.04336 3.55814 7 3.55814C6.95664 3.55814 6.91387 3.55816 6.87166 3.55818C5.90637 3.55868 5.23634 3.55903 4.6426 3.29217C4.52493 3.23928 4.41084 3.17894 4.30104 3.1115C3.75069 2.77349 3.38057 2.22729 2.85118 1.44157ZM4.16103 1.2383C4.51629 1.74715 4.70232 1.96157 4.9344 2.10411C5.00028 2.14457 5.06873 2.18078 5.13933 2.21251C5.46646 2.35954 5.85406 2.37209 7 2.37209C8.14594 2.37209 8.53354 2.35954 8.86066 2.21251C8.93127 2.18078 8.99972 2.14457 9.0656 2.10411C9.29768 1.96157 9.48371 1.74715 9.83897 1.2383C9.10278 1.18681 8.18457 1.18605 7 1.18605C5.81543 1.18605 4.89722 1.18681 4.16103 1.2383ZM4 14.0349C4 13.7074 4.26863 13.4419 4.6 13.4419H9.4C9.73137 13.4419 10 13.7074 10 14.0349C10 14.3624 9.73137 14.6279 9.4 14.6279H4.6C4.26863 14.6279 4 14.3624 4 14.0349Z" fill="black"/>
 </svg>`;