@meetelise/chat 1.24.1 → 1.25.0

package/src/WebComponent/icons/DollarOutlineIcon.ts

@@ -0,0 +1,18 @@
+import { svg, SVGTemplateResult } from "lit";
+
+const DollarOutlineIcon = (color = "#347FF7"): SVGTemplateResult => svg`
+  <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g id="Frame" clip-path="url(#clip0_18718_332018)">
+      <path id="Vector" d="M3 12.5C3 13.6819 3.23279 14.8522 3.68508 15.9442C4.13738 17.0361 4.80031 18.0282 5.63604 18.864C6.47177 19.6997 7.46392 20.3626 8.55585 20.8149C9.64778 21.2672 10.8181 21.5 12 21.5C13.1819 21.5 14.3522 21.2672 15.4442 20.8149C16.5361 20.3626 17.5282 19.6997 18.364 18.864C19.1997 18.0282 19.8626 17.0361 20.3149 15.9442C20.7672 14.8522 21 13.6819 21 12.5C21 11.3181 20.7672 10.1478 20.3149 9.05585C19.8626 7.96392 19.1997 6.97177 18.364 6.13604C17.5282 5.30031 16.5361 4.63738 15.4442 4.18508C14.3522 3.73279 13.1819 3.5 12 3.5C10.8181 3.5 9.64778 3.73279 8.55585 4.18508C7.46392 4.63738 6.47177 5.30031 5.63604 6.13604C4.80031 6.97177 4.13738 7.96392 3.68508 9.05585C3.23279 10.1478 3 11.3181 3 12.5Z" stroke="${color}" stroke-linecap="round" stroke-linejoin="round"/>
+      <path id="Vector_2" d="M14.8 9.50016C14.6188 9.18592 14.3557 8.92686 14.0386 8.75071C13.7215 8.57456 13.3625 8.48795 13 8.50016H11C10.4696 8.50016 9.96086 8.71087 9.58579 9.08594C9.21071 9.46102 9 9.96972 9 10.5002C9 11.0306 9.21071 11.5393 9.58579 11.9144C9.96086 12.2894 10.4696 12.5002 11 12.5002H13C13.5304 12.5002 14.0391 12.7109 14.4142 13.0859C14.7893 13.461 15 13.9697 15 14.5002C15 15.0306 14.7893 15.5393 14.4142 15.9144C14.0391 16.2894 13.5304 16.5002 13 16.5002H11C10.6375 16.5124 10.2785 16.4258 9.96142 16.2496C9.64435 16.0735 9.38115 15.8144 9.2 15.5002" stroke="${color}" stroke-linecap="round" stroke-linejoin="round"/>
+      <path id="Vector_3" d="M12 7.5V17.5" stroke="${color}" stroke-linecap="round" stroke-linejoin="round"/>
+    </g>
+    <defs>
+      <clipPath id="clip0_18718_332018">
+        <rect width="24" height="24" fill="white" transform="translate(0 0.5)"/>
+      </clipPath>
+    </defs>
+  </svg>
+`;
+
+export default DollarOutlineIcon;

package/src/WebComponent/launcher/Launcher.ts

@@ -11,6 +11,8 @@ import {
 import { StyleInfo, styleMap } from "lit/directives/style-map.js";
 import { installCallUsWindow } from "../actions/call-us-window";
 import { TourScheduler } from "../Scheduler/tour-scheduler";
+import { FeeCalculator } from "../FeeCalculator/fee-calculator";
+import { installFeeCalculator } from "../FeeCalculator";
 import { LabeledOption } from "../../fetchBuildingInfo";
 import {
   defaultBackgroundColor,
@@ -38,6 +40,7 @@ import { PhoneOutlineIcon } from "../icons/PhoneOutlineIcon";
 import { HeyThereEmoji } from "../icons/HeyThereEmojiIcon";
 import { ContactResidentIcon } from "../icons/ContactResidentIcon";
 import { ApplyOutlineIcon } from "../icons/ApplyOutlineIcon";
+import { CalculatorOutlineIcon } from "../icons/CalculatorOutlineIcon";
 
 @customElement("meetelise-launcher")
 export class Launcher extends LitElement {
@@ -93,40 +96,53 @@ export class Launcher extends LitElement {
   escortedToursLink = "";
   @property({ attribute: true })
   virtualToursLink = "";
+
   @property({ type: Boolean })
   hasChatEnabledDesktop = false;
   @property({ type: Boolean })
   hasChatEnabledMobile = false;
+
   @property({ type: Boolean })
   hasEmailEnabledDesktop = false;
   @property({ type: Boolean })
   hasEmailEnabledMobile = false;
+
   @property({ attribute: true })
   hasApplyNowEnabledDesktop = false;
   @property({ attribute: true })
   hasApplyNowEnabledMobile = false;
   @property({ attribute: true })
   applicationLink = "";
+
   @property({ type: Boolean })
   hasCallUsEnabledDesktop = false;
   @property({ type: Boolean })
   hasCallUsEnabledMobile = false;
+
   @property({ type: Boolean })
   hasTextUsEnabledDesktop = false;
   @property({ type: Boolean })
   hasTextUsEnabledMobile = false;
+
   @property({ type: Boolean })
   hasSSTEnabledDesktop = false;
   @property({ type: Boolean })
   hasSSTEnabledMobile = false;
+
   @property({ attribute: false })
   tourTypeOptions: LabeledOption[] = [];
   @property({ attribute: true })
   hasDynamicSchedulingEnabled = false;
+
+  @property({ attribute: true })
+  hasPricingCalculatorEnabledDesktop = false;
   @property({ attribute: true })
+  hasPricingCalculatorEnabledMobile = false;
+
   onExitChat: () => void = () => {
     return;
   };
+
   @property({ attribute: false })
   hasHideMobileFeatures = false;
 
@@ -186,6 +202,9 @@ export class Launcher extends LitElement {
   isSSTWindowOpen = false;
   @state()
   isTextUsWindowOpen = false;
+  @state()
+  isCalculatorWindowOpen = false;
+
   @state()
   private isMobileFeaturesExpanded = false;
 
@@ -200,6 +219,9 @@ export class Launcher extends LitElement {
       this.hasTextUsEnabledDesktop || this.hasTextUsEnabledMobile;
     const isApplyNowEnabled =
       this.hasApplyNowEnabledDesktop || this.hasApplyNowEnabledMobile;
+    const isPricingCalculatorEnabled =
+      this.hasPricingCalculatorEnabledDesktop ||
+      this.hasPricingCalculatorEnabledMobile;
 
     return [
       isEmailEnabled,
@@ -207,15 +229,18 @@ export class Launcher extends LitElement {
       isSSTEnabled,
       isTextUsEnabled,
       isApplyNowEnabled,
+      isPricingCalculatorEnabled,
     ].filter((v) => v).length;
   };
 
   emailUsWindowRef: Ref<EmailUsWindow> = createRef();
   tourSchedulerRef: Ref<TourScheduler> = createRef();
+  calculatorWindowRef: Ref<FeeCalculator> = createRef();
 
   updated = async (): Promise<void> => {
     this.attachOnClickToEmailUsWindow();
     this.attachOnClickToSSTWindow();
+    this.attachOnClickToCalculatorWindow();
 
     // If we have the SST tour popup open next to the chat widget, we want to close it
     if (
@@ -242,6 +267,12 @@ export class Launcher extends LitElement {
     sstWindowRef.onCloseClicked = this.onCloseSSTWindow;
   };
 
+  attachOnClickToCalculatorWindow = (): void => {
+    const calculatorWindowRef = this.calculatorWindowRef.value;
+    if (!calculatorWindowRef) return;
+    calculatorWindowRef.onCloseClicked = this.onCloseCalculatorWindow;
+  };
+
   onClickEmailOption = (e: MouseEvent): void => {
     e.preventDefault();
     e.stopPropagation();
@@ -268,6 +299,13 @@ export class Launcher extends LitElement {
     window.open(this.applicationLink, "_blank");
   };
 
+  onClickPriceCalculatorOption = (e: MouseEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    closeRengrataWidget();
+    this.isCalculatorWindowOpen = true;
+  };
+
   onClosePhoneWindow = (): void => {
     this.isCallUsWindowOpen = false;
   };
@@ -290,6 +328,11 @@ export class Launcher extends LitElement {
       );
     }
   };
+
+  onCloseCalculatorWindow = (): void => {
+    this.isCalculatorWindowOpen = false;
+  };
+
   onClickTextUsOption = (e: MouseEvent): void => {
     e.preventDefault();
     e.stopPropagation();
@@ -303,6 +346,7 @@ export class Launcher extends LitElement {
         this.isCallUsWindowOpen,
         this.isSSTWindowOpen,
         this.isTextUsWindowOpen,
+        this.isCalculatorWindowOpen,
       ].filter((v) => v).length === 1
     );
   };
@@ -331,6 +375,7 @@ export class Launcher extends LitElement {
           .onClickSSTOption=${this.onClickSSTOption}
           .onChatTapped=${this.onChatTapped}
           .onClickApplyNowOption=${this.onClickApplyNowOption}
+          .onClickPriceCalculatorOption=${this.onClickPriceCalculatorOption}
           .overrideRentgrata=${this.overrideRentgrata}
           .isMobileDesign=${isMobile() ||
           this.designConcept === DesignConcepts.MINIMIZED}
@@ -365,6 +410,11 @@ export class Launcher extends LitElement {
             ? false
             : this.hasApplyNowEnabledMobile}
           .applicationLink=${this.applicationLink}
+          .hasPricingCalculatorEnabled=${!isMobile()
+            ? this.hasPricingCalculatorEnabledDesktop
+            : this.hasHideMobileFeatures && !this.isMobileFeaturesExpanded
+            ? false
+            : this.hasPricingCalculatorEnabledMobile}
         ></mobile-launcher>`;
     }
 
@@ -629,6 +679,36 @@ export class Launcher extends LitElement {
           `
           : null,
       },
+      {
+        pillKey: "Price Calculator",
+        pill: this.hasPricingCalculatorEnabledDesktop
+          ? html`
+              <div
+                @click=${this.onClickPriceCalculatorOption}
+                class="inner-pill-wrapper"
+                style=${styleMap({
+                  background: this.backgroundColor,
+                })}
+              >
+                <div class="vertical-pill-left">
+                  <div class="vertical-pill-icon">
+                    ${CalculatorOutlineIcon(
+                      this.foregroundColorOnSecondaryBackgroundColor
+                    )}
+                  </div>
+                  <div class="vertical-pill-title">
+                    <span class="vertical-pill-bold">Calculate</span> Cost
+                  </div>
+                </div>
+                <div class="chevron-right">
+                  ${ChevronRightIcon(
+                    this.foregroundColorOnSecondaryBackgroundColor
+                  )}
+                </div>
+              </div>
+            `
+          : null,
+      },
       {
         pillKey: "SST",
         pill: this.hasSSTEnabledDesktop
@@ -872,6 +952,7 @@ export class Launcher extends LitElement {
   render(): TemplateResult {
     installEmailUsWindow();
     installCallUsWindow();
+    installFeeCalculator();
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     (window as any).eliseAi.onOpenSST = (callBack?: () => void) => {
@@ -920,7 +1001,20 @@ export class Launcher extends LitElement {
         }
       };
     }
-
+    if (
+      this.hasPricingCalculatorEnabledDesktop ||
+      this.hasPricingCalculatorEnabledMobile
+    ) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (window as any).eliseAi.onOpenPriceCalculatorWindow = (
+        callBack?: () => void
+      ) => {
+        this.isCalculatorWindowOpen = true;
+        if (callBack) {
+          callBack();
+        }
+      };
+    }
     const overrideStyleWindows = {
       top:
         !isMobile() && this.top !== undefined && !isNaN(this.top)
@@ -939,6 +1033,7 @@ export class Launcher extends LitElement {
           ? `${this.right}px`
           : undefined,
     };
+
     return html`
       <div
         class=${classNames({
@@ -1065,6 +1160,24 @@ export class Launcher extends LitElement {
               </div>
             `
           : ""}
+        ${this.isCalculatorWindowOpen
+          ? html`
+              <div
+                class="launcher__window-wrapper"
+                style=${styleMap(overrideStyleWindows)}
+              >
+                <fee-calculator
+                  id="fee-calculator-window"
+                  ${ref(this.calculatorWindowRef)}
+                  buildingSlug=${this.buildingSlug}
+                  orgSlug="${this.orgSlug}"
+                  primaryColor="${this.primaryColor}"
+                  backgroundColor="${this.backgroundColor}"
+                  .compactDesign=${this.showTourNextToChat}
+                ></fee-calculator>
+              </div>
+            `
+          : ""}
         ${!this.isCallToActionWindowOpen() && !this.showTourNextToChat
           ? this.renderActionPills()
           : ""}

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

@@ -8,6 +8,7 @@ import { PhoneOutlineIcon } from "../icons/PhoneOutlineIcon";
 import { BookTourOutlineIcon } from "../icons/BookTourOutlineIcon";
 import { ChatOutlineIcon } from "../icons/ChatOutlineIcon";
 import { ApplyOutlineIcon } from "../icons/ApplyOutlineIcon";
+import { CalculatorOutlineIcon } from "../icons/CalculatorOutlineIcon";
 
 @customElement("mobile-launcher")
 export class MobileLauncher extends LitElement {
@@ -35,6 +36,10 @@ export class MobileLauncher extends LitElement {
     return;
   };
   @property({ attribute: true })
+  onClickPriceCalculatorOption: (e: MouseEvent) => void = () => {
+    return;
+  };
+  @property({ attribute: true })
   onChatTapped: (e: MouseEvent) => void = () => {
     return;
   };
@@ -69,6 +74,9 @@ export class MobileLauncher extends LitElement {
   @property({ attribute: true })
   hasApplyNowEnabled = false;
 
+  @property({ attribute: true })
+  hasPricingCalculatorEnabled = false;
+
   @property({ attribute: true })
   applicationLink = "";
 
@@ -109,6 +117,11 @@ export class MobileLauncher extends LitElement {
           this.onClickApplyNowOption,
           ApplyOutlineIcon("black")
         )}
+        ${this.renderListElement(
+          this.hasPricingCalculatorEnabled,
+          this.onClickPriceCalculatorOption,
+          CalculatorOutlineIcon("black")
+        )}
         ${this.renderListElement(
           this.hasEmailEnabled,
           this.onClickEmailOption,

package/src/WebComponent/me-chat.ts

@@ -24,7 +24,7 @@ import fetchPhoneNumberFromSource, {
 } from "../fetchPhoneNumberFromSource";
 import { defaultPrimaryColor, defaultBackgroundColor } from "../themes";
 import getShouldShowWebchat from "../getShouldShowWebchat";
-import { isMobile } from "../utils";
+import { isMobile, isTestEnv } from "../utils";
 import { installLauncher } from "./launcher/Launcher";
 import parseISO from "date-fns/parseISO";
 import isPast from "date-fns/isPast";
@@ -217,6 +217,8 @@ export class MEChat extends LitElement {
     textMobile: boolean;
     sstDesktop: boolean;
     sstMobile: boolean;
+    calcDesktop: boolean;
+    calcMobile: boolean;
   } = {
     callDesktop: false,
     callMobile: false,
@@ -228,6 +230,8 @@ export class MEChat extends LitElement {
     textMobile: false,
     sstDesktop: false,
     sstMobile: false,
+    calcDesktop: false,
+    calcMobile: false,
   };
 
   @state()
@@ -350,6 +354,15 @@ export class MEChat extends LitElement {
       ? buildingDetails.textWithUsPhoneNumber
       : await getBuildingPhoneNumber(this.buildingSlug);
 
+    const shouldShowCalcDesktop =
+      (this.buildingWebchatView?.shouldShowPricingCalculatorDesktop &&
+        isTestEnv()) ??
+      false;
+    const shouldShowCalcMobile =
+      (this.buildingWebchatView?.shouldShowPricingCalculatorMobile &&
+        isTestEnv()) ??
+      false;
+
     this.enabledChatWidgets = {
       callDesktop: this.buildingWebchatView?.shouldShowPhoneDesktop ?? false,
       callMobile: this.buildingWebchatView?.shouldShowPhoneMobile ?? false,
@@ -367,6 +380,8 @@ export class MEChat extends LitElement {
         false,
       sstDesktop: this.buildingWebchatView?.shouldShowSstDesktop ?? false,
       sstMobile: this.buildingWebchatView?.shouldShowSstMobile ?? false,
+      calcDesktop: shouldShowCalcDesktop,
+      calcMobile: shouldShowCalcMobile,
     };
 
     if (
@@ -439,6 +454,9 @@ export class MEChat extends LitElement {
       if (phoneNumberForSource && !phoneNumberForSource.isMatch) {
         phoneNumberForSource.number = buildingsPhoneNumber;
       }
+      if (!this.LeadSourceClient?.leadSource && phoneNumberForSource) {
+        phoneNumberForSource.number = buildingsPhoneNumber;
+      }
     }
     if (featureFlagInsertDNIWebsite && phoneNumberForSource?.number) {
       const totalReplacements = insertDNIIntoWebsite(
@@ -668,11 +686,13 @@ export class MEChat extends LitElement {
     headerRef.style.left = `${pubnubPopupCoords.left}px`;
     headerRef.style.top = `${pubnubPopupCoords.bottom}px`;
   };
+
   connectedCallback(): void {
     super.connectedCallback();
     window.addEventListener("resize", this.adjustPositionChatAdditionalActions);
     window.addEventListener("keydown", this.handleKeydownTab);
   }
+
   handleKeydownTab = (e: KeyboardEvent): void => {
     if (e.key === "Tab") {
       const pubnubContainerElement = this.displayPubnubChat
@@ -836,6 +856,7 @@ export class MEChat extends LitElement {
               `
             : ""
         }
+
         <div
         id='meetelise-chat-launcher-container'
           class=${classMap({
@@ -924,6 +945,10 @@ export class MEChat extends LitElement {
                   .hasApplyNowEnabledMobile=${this.buildingWebchatView
                     .shouldShowApplyNowMobile}
                   .applicationLink=${this.buildingWebchatView.applicationLink}
+                  .hasPricingCalculatorEnabledDesktop=${this.enabledChatWidgets
+                    .calcDesktop}
+                  .hasPricingCalculatorEnabledMobile=${this.enabledChatWidgets
+                    .calcMobile}
                   .hasHideMobileFeatures=${this.hideMobileFeatures}
                   .top=${this.top}
                   .bottom=${this.bottom}

package/src/fetchBuildingWebchatView.ts

@@ -28,9 +28,9 @@ enum TourAccessType {
   SCHEDULED_BY_ME_MANAGED_BY_CONCIERGE = "scheduled_by_ME_managed_by_concierge",
 }
 
-interface LayoutOption {
-  id: number;
-  name: string;
+export interface LayoutOption {
+  value: number;
+  label: string;
 }
 
 interface TourTypeOption {
@@ -107,6 +107,8 @@ export interface BuildingWebchatView {
   shouldShowSstMobile: boolean | null;
   shouldShowApplyNowDesktop: boolean | null;
   shouldShowApplyNowMobile: boolean | null;
+  shouldShowPricingCalculatorDesktop: boolean | null;
+  shouldShowPricingCalculatorMobile: boolean | null;
   applicationLink: string | null;
   isLiveOnCollect: boolean | null;
   requiresConsentForChat: boolean | null;

package/src/globals.ts

@@ -0,0 +1 @@
+export const BASE_DOMAIN = "https://app.meetelise.com";

package/src/services/fees/fetchBuildingFees.ts

@@ -0,0 +1,28 @@
+import axios from "axios";
+import { LogType, sendLoggingEvent } from "../../analytics";
+import { BASE_DOMAIN } from "../../globals";
+import { BuildingFee } from "../../WebComponent/FeeCalculator/model/building-fee";
+import { camelize } from "../../utils";
+
+const fetchBuildingFees = async (
+  buildingSlug: string
+): Promise<BuildingFee[]> => {
+  try {
+    const feesResponse = await axios.get(
+      `${BASE_DOMAIN}/platformApi/webchat/${buildingSlug}/fees`
+    );
+    if (feesResponse.data) {
+      return camelize<BuildingFee[]>(feesResponse.data);
+    }
+  } catch (error) {
+    sendLoggingEvent({
+      logType: LogType.error,
+      buildingSlug,
+      logTitle: "[ERROR_GETTING_FEES]",
+      logData: { error },
+    });
+  }
+  return [];
+};
+
+export default fetchBuildingFees;

package/src/utils.ts

@@ -5,6 +5,7 @@ import isObject from "lodash/isObject";
 import transform from "lodash/transform";
 import addHours from "date-fns/addHours";
 import isBefore from "date-fns/isBefore";
+import { BASE_DOMAIN } from "./globals";
 
 export const camelize = <T>(
   snakeCasedObject: Record<string, unknown>,
@@ -87,3 +88,34 @@ export const isContainingEmail = (message: string): boolean => {
     return false;
   }
 };
+
+/**
+ * FooBarBizzBazz -> Foo Bar Bizz Bazz
+ */
+export const sentenceTitleCase = (str: string): string => {
+  const spaced = str.replace(/([A-Z])/g, " $1").trim();
+  return spaced
+    .split(" ")
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+    .join(" ");
+};
+
+export const formatCurrency = (
+  amount: number,
+  maximumFractionDigits = 0
+): string => {
+  return Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 0,
+    maximumFractionDigits,
+  }).format(amount ?? 0);
+};
+
+export const isTestEnv = (): boolean => {
+  const href = location.href;
+  if (href.startsWith(BASE_DOMAIN + "/settings/widgets")) return true;
+  if (href.startsWith(BASE_DOMAIN + "/demo")) return true;
+  if (href.startsWith("http://localhost")) return true;
+  return false;
+};