@meetelise/chat 1.21.0 → 1.21.2

package/src/analytics.ts

@@ -1,3 +1,6 @@
+import axios from "axios";
+import { getCookieValue } from "./utils";
+
 declare global {
   interface Window {
     RCTPCampaign?: { CampaignDetails: { Source: string } };
@@ -9,21 +12,29 @@ export interface CampaignSources {
   yardiCampaignSource: string | null;
   realpageCampaignSource: string | null;
   utmCampaignSource: string | null;
+  bozzutoAdSource: string | null;
 }
 
 /**
- * A connection to the MeetElise API to send analytics events.
+ * A connection to the MeetElise API to send analytics events
  */
 export default class Analytics {
   private org: string;
   private building: string;
   private featureFlags?: Record<string, boolean>;
   public chatId: string;
+  private incomingProcessedLeadSource: string | null;
 
-  constructor(org: string, building: string, chatId: string) {
+  constructor(
+    org: string,
+    building: string,
+    chatId: string,
+    incomingProcessedLeadSource: string | null
+  ) {
     this.org = org;
     this.building = building;
     this.chatId = chatId;
+    this.incomingProcessedLeadSource = incomingProcessedLeadSource;
     this.featureFlags = {};
   }
 
@@ -57,6 +68,8 @@ export default class Analytics {
           referrer: document.referrer,
           featureFlags: this.featureFlags,
           campaignSources: getCampaignSources(),
+          incomingProcessedLeadSource: this.incomingProcessedLeadSource, // if we already know the lead source, send it along
+          webchatVersion: process.env.npm_package_version ?? "1.20.155",
         }),
       }
     );
@@ -64,17 +77,104 @@ export default class Analytics {
 }
 
 export const getCampaignSources = (): CampaignSources => {
-  const queryParams = new URL(window.location.href).searchParams;
-  const yardiCampaignSource =
-    window.RCTPCampaign?.CampaignDetails?.Source ?? null;
-  const entrataCampaignSource = queryParams.get("switch_cls[id]");
-  const realpageCampaignSource = queryParams.get("ilm");
-  const utmCampaignSource = queryParams.get("utm_source");
+  try {
+    const queryParams = new URL(window.location.href).searchParams;
+    const yardiCampaignSource =
+      window.RCTPCampaign?.CampaignDetails?.Source ?? null;
+    const entrataCampaignSource = queryParams.get("switch_cls[id]");
+    const realpageCampaignSource = queryParams.get("ilm");
+    const utmCampaignSource = queryParams.get("utm_source");
+    const bozzutoAdSource = getCookieValue("bozzuto_ad_source");
+
+    return {
+      entrataCampaignSource,
+      realpageCampaignSource,
+      utmCampaignSource,
+      yardiCampaignSource,
+      bozzutoAdSource,
+    };
+  } catch (e) {
+    /**
+     * Some clients have pages that overwrite the `URL` class and turn it into a string. This is a workaround for that.
+     * Example site: https://ther3.com
+     */
+    // eslint-disable-next-line no-console
+    console.warn(`Couldnt get campaign sources from url, error: ${e}`);
+    const iframe = document.createElement("iframe");
+    iframe.style.display = "none";
+    document.body.appendChild(iframe);
+    if (!iframe.contentWindow) {
+      return {
+        entrataCampaignSource: null,
+        realpageCampaignSource: null,
+        utmCampaignSource: null,
+        yardiCampaignSource: null,
+        bozzutoAdSource: null,
+      };
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const OriginalURL = (iframe.contentWindow as any).URL;
+    if (!OriginalURL) {
+      return {
+        entrataCampaignSource: null,
+        realpageCampaignSource: null,
+        utmCampaignSource: null,
+        yardiCampaignSource: null,
+        bozzutoAdSource: null,
+      };
+    }
+    const queryParams = new OriginalURL(window.location.href).searchParams;
+    const yardiCampaignSource =
+      window.RCTPCampaign?.CampaignDetails?.Source ?? null;
+    const entrataCampaignSource = queryParams.get("switch_cls[id]");
+    const realpageCampaignSource = queryParams.get("ilm");
+    const utmCampaignSource = queryParams.get("utm_source");
+    const bozzutoAdSource = getCookieValue("bozzuto_ad_source");
+
+    return {
+      entrataCampaignSource,
+      realpageCampaignSource,
+      utmCampaignSource,
+      yardiCampaignSource,
+      bozzutoAdSource,
+    };
+  }
+};
+
+export enum LogType {
+  error = "error",
+  info = "info",
+  warn = "warn",
+}
 
-  return {
-    entrataCampaignSource,
-    realpageCampaignSource,
-    utmCampaignSource,
-    yardiCampaignSource,
-  };
+export const sendLoggingEvent = async ({
+  logType,
+  buildingSlug,
+  orgSlug,
+  logTitle,
+  logData,
+}: {
+  logType?: LogType;
+  buildingSlug?: string;
+  orgSlug?: string;
+  logTitle: string;
+  logData: Record<string, unknown> | null;
+}): Promise<void> => {
+  const host = "https://app.meetelise.com";
+  await axios.post(
+    `${host}/platformApi/webchat/logging`,
+    {
+      ...logData,
+    },
+    {
+      headers: {
+        "Content-Type": "application/json",
+        "building-slug": buildingSlug ?? "",
+        "org-slug": orgSlug ?? "",
+        "log-type": logType ?? LogType.error,
+        "log-title": logTitle.toUpperCase().replace(/\s/g, "_"),
+      },
+    }
+  );
 };

package/src/assetUrls.ts

@@ -2,3 +2,5 @@ export const glowBarMp4 =
   "https://eliseusercontent.meetelise.com/webchat/HorizontalBar-Shadow.mp4";
 export const glowBarWebm =
   "https://eliseusercontent.meetelise.com/webchat/HorizontalBar-Shadow.webm";
+export const glowBackgroundMp4 =
+  "https://eliseusercontent.meetelise.com/webchat/01-EliseAI-Hero_1.mp4";

package/src/disclaimers.ts

@@ -0,0 +1,56 @@
+import { html, TemplateResult } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+
+const disclaimerStyles = {
+  container: {
+    fontSize: "10px",
+    paddingTop: "4px",
+  },
+  link: {
+    color: "#4287f5",
+  },
+};
+
+const disclaimer = ({
+  buildingName,
+  phoneNumberInput,
+  emailInput,
+}: {
+  buildingName: string;
+  phoneNumberInput?: string;
+  emailInput?: string;
+}): TemplateResult => {
+  if (phoneNumberInput) {
+    return html` <div style=${styleMap(disclaimerStyles.container)}>
+      By providing your number and clicking submit, you consent to recurring
+      marketing text messages and calls from or for
+      ${buildingName.length > 0 ? buildingName : "this building"} at this
+      number, which may be sent by an autodialer system. Replies may be AI or
+      human generated. This consent is not required to lease at this property.
+      Msg & Data rates may apply. You consent to this
+      <a
+        style=${styleMap(disclaimerStyles.link)}
+        href="http://bit.ly/me_privacy_policy"
+        target="_blank"
+        rel="noopener noreferrer"
+        >privacy policy</a
+      >, including having your communications recorded by a third party.
+    </div>`;
+  }
+  if (emailInput) {
+    return html` <div style=${styleMap(disclaimerStyles.container)}>
+      By entering your email and clicking submit, you consent to this
+      <a
+        style=${styleMap(disclaimerStyles.link)}
+        href="http://bit.ly/me_privacy_policy"
+        target="_blank"
+        rel="noopener noreferrer"
+        >privacy policy</a
+      >, including having your email address and communications collected and
+      recorded by a third party.
+    </div>`;
+  }
+  return html``;
+};
+
+export default disclaimer;

package/src/fetchBuildingABTestType.ts

@@ -2,6 +2,9 @@ import axios from "axios";
 interface BuildingABType {
   abTestType: string;
 }
+export enum abTestTypes {
+  "ConceptEmoji" = "Concept 2 (Blue/White)",
+}
 export default async function fetchBuildingABTestType(
   buildingSlug: string
 ): Promise<BuildingABType | null> {
@@ -10,6 +13,7 @@ export default async function fetchBuildingABTestType(
     const abTestTypeResponse = await axios.get(
       `${host}/platformApi/webchat/${buildingSlug}/ab-test-type`
     );
+    //return { abTestType: "Concept 2 (Blue/White)" };
     return abTestTypeResponse.data;
   } catch (_) {
     return null;

package/src/fetchBuildingInfo.ts

@@ -1,3 +1,5 @@
+import axios from "axios";
+
 export interface LabeledOption {
   label: string;
   value: string | number;
@@ -24,17 +26,21 @@ export interface Building {
   tourTypeOptions: LabeledOption[];
   chatWidgets?: string[] | null;
   chatCallUsHeader?: string;
-  unitOptionsV2: UnitV2[];
-  layoutOptionsV2: string[];
   autoOpenChatWidget: boolean;
   sgtUrl: string;
   escortedToursLink: string;
   virtualToursLink: string;
+  active: number;
+  usesDynamicScheduling: boolean;
+  textWithUsPhoneNumber: string | null;
 }
 
 export type UnitV2 = {
   name: string;
   layout: string;
+  availabilityStage: number;
+  active: number;
+  occupied: boolean;
 };
 
 /**
@@ -49,22 +55,24 @@ export default async function fetchBuildingInfo(
   buildingSlug: string
 ): Promise<Building> {
   const host = "https://app.meetelise.com";
-  const url = `${host}/api/pub/v1/organization/${orgSlug}/building/${buildingSlug}`;
-  const response = await fetch(url);
-  const building: Building = await response.json();
+  const buildingUrl = `${host}/api/pub/v1/organization/${orgSlug}/building/${buildingSlug}`;
 
-  // HACK
-  // We will fetch these units/layouts from elise-crm-api and supplement the DTO
-  const unitsResponse = await fetch(
-    `${host}/eliseCrmApi/pub/building/${buildingSlug}/units`
-  );
-  const units: UnitV2[] = await unitsResponse.json();
-  const layoutsResponse = await fetch(
-    `${host}/eliseCrmApi/pub/building/${buildingSlug}/layouts`
-  );
-  const layouts: string[] = await layoutsResponse.json();
+  const buildingResponse = await axios.get(buildingUrl);
 
-  building.unitOptionsV2 = units;
-  building.layoutOptionsV2 = layouts;
+  const building: Building = buildingResponse.data;
+  try {
+    building.welcomeMessage = replaceName(
+      building.welcomeMessage ?? "",
+      building.userFirstName
+    );
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.error(e);
+  }
   return building;
 }
+
+const replaceName = (originalText: string, newName: string) => {
+  const regex = /elise/gi;
+  return originalText.replace(regex, newName);
+};

package/src/fetchFeatureFlag.ts

@@ -0,0 +1,147 @@
+import axios from "axios";
+
+// V1 reads from the launch darkly flag
+const featureFlagEndpointV1 = (buildingSlug: string): string => {
+  const host = "https://app.meetelise.com";
+  return `${host}/platformApi/webchat/${buildingSlug}/chat-ui-feature-flag`;
+};
+
+// V2 reads from conversation flag table (preferred)
+const featureFlagEndpointV2 = (buildingSlug: string): string => {
+  const host = "https://app.meetelise.com";
+  return `${host}/platformApi/webchat/${buildingSlug}/v2/chat-ui-feature-flag`;
+};
+
+export enum FeatureFlagsShowDropdown {
+  onAttributionFailure = "on-attribution-failure",
+  never = "never", // note, the dropdown will NOT show up if there are also no lead sources (list)!
+  always = "always",
+}
+
+export async function fetchFeatureFlagShowMarketingSourceDropdown(
+  buildingSlug: string
+): Promise<FeatureFlagsShowDropdown> {
+  if (!buildingSlug) {
+    return FeatureFlagsShowDropdown.always;
+  }
+  try {
+    const featureFlagResponse = await axios.get(
+      featureFlagEndpointV1(buildingSlug),
+      {
+        params: {
+          building_slug: buildingSlug,
+          flag_type: "string",
+          feature_flag: "webchat-marketing-source-dropdown-configuration",
+          default_str: "always",
+          default_bool: true,
+        },
+      }
+    );
+    if (featureFlagResponse.data === "on-attribution-failure") {
+      return FeatureFlagsShowDropdown.onAttributionFailure;
+    }
+    if (featureFlagResponse.data === "never") {
+      return FeatureFlagsShowDropdown.never;
+    }
+    return FeatureFlagsShowDropdown.always;
+  } catch (_) {
+    return FeatureFlagsShowDropdown.always;
+  }
+}
+
+export async function fetchFeatureFlagUsePhoneNumberBySource(
+  buildingSlug: string
+): Promise<boolean> {
+  if (!buildingSlug) {
+    return false;
+  }
+  try {
+    const featureFlagResponse = await axios.get(
+      featureFlagEndpointV1(buildingSlug),
+      {
+        params: {
+          building_slug: buildingSlug,
+          flag_type: "bool",
+          feature_flag: "webchat-use-dni-phone-number-by-source",
+          default_str: null,
+          default_bool: false,
+        },
+      }
+    );
+    return featureFlagResponse.data;
+  } catch (_) {
+    return false;
+  }
+}
+
+export async function fetchFeatureFlagUseOverrideContactUsForm(
+  buildingSlug: string
+): Promise<boolean> {
+  if (!buildingSlug) {
+    return false;
+  }
+  try {
+    const featureFlagResponse = await axios.get(
+      featureFlagEndpointV1(buildingSlug),
+      {
+        params: {
+          building_slug: buildingSlug,
+          flag_type: "bool",
+          feature_flag: "webchat-use-override-contact-us-form",
+          default_str: null,
+          default_bool: false,
+        },
+      }
+    );
+    return featureFlagResponse.data;
+  } catch (_) {
+    return false;
+  }
+}
+export async function fetchFeatureFlagUsePubnub(
+  buildingSlug?: string
+): Promise<boolean> {
+  if (!buildingSlug) {
+    return false;
+  }
+  try {
+    const featureFlagResponse = await axios.get(
+      featureFlagEndpointV1(buildingSlug),
+      {
+        params: {
+          building_slug: buildingSlug,
+          flag_type: "bool",
+          feature_flag: "use-pubnub-chat-provider",
+          default_str: null,
+          default_bool: false,
+        },
+      }
+    );
+    return featureFlagResponse.data;
+  } catch (_) {
+    return false;
+  }
+}
+
+export async function fetchFeatureFlagInsertDNIWebsite(
+  buildingSlug?: string
+): Promise<boolean> {
+  if (!buildingSlug) {
+    return false;
+  }
+  try {
+    const featureFlagResponse = await axios.get(
+      featureFlagEndpointV2(buildingSlug),
+      {
+        params: {
+          building_slug: buildingSlug,
+          feature_flag_name: "insert_dni_into_website",
+          default_value: false,
+        },
+      }
+    );
+    return featureFlagResponse.data;
+  } catch (_) {
+    return false;
+  }
+}

package/src/fetchLeadSources.ts

@@ -10,8 +10,74 @@ export default async function fetchLeadSources(
     const leadSourcesResponse = await axios.get(
       `${host}/platformApi/webchat/${buildingSlug}/lead-sources`
     );
-    return leadSourcesResponse.data;
+    if (leadSourcesResponse.data) {
+      return filterOutBuildingSpecificLeadSources(
+        leadSourcesResponse.data,
+        buildingSlug
+      );
+    }
+    return [];
   } catch (_) {
     return [];
   }
 }
+
+const filterOutBuildingSpecificLeadSources = (
+  leadSources: string[],
+  buildingSlug: string
+): string[] => {
+  // Dinerstien asked to filter out some sources based on their buildings
+  let removeLeadSources: string[] = [];
+  switch (buildingSlug) {
+    case "d41619ec-0f79-11ee-8439-93855926ad58": // Infinity Lofts in the Gulch
+      removeLeadSources = [
+        "Forthea - PPC",
+        "HotPads",
+        "Forthea",
+        "Locator",
+        "Website-apartmentguide.com",
+        "Forthea - organic search",
+        "Tdc employee",
+        "University newspaper",
+        "Nashville apartment locators",
+        "Forthea - paid social",
+        "Apartment list",
+        "Off campus partners",
+        "Waze ads",
+        "Athletic event",
+        "Website-apartment guide",
+      ];
+      break;
+    case "d4160560-0f79-11ee-8438-fba837bf3a46": // Sawyer on Lincoln
+      removeLeadSources = [
+        "Forthea - PPC",
+        "Rentgrata",
+        "Website-ApartmentFinder.com",
+        "Word of Mouth",
+        "Texas A&M A-Frame on Campus",
+        "Rent.com",
+        "Website-craigslist",
+        "Apartment List",
+        "Website-apartments.com",
+        "Forthea - paid social",
+        "Forthea - organic search",
+        "Website-apartmentguide.com",
+        "Forthea",
+        "Uhomes",
+        "Phone book",
+        "Property - website",
+      ];
+      break;
+    default:
+      removeLeadSources = [];
+  }
+  leadSources.sort();
+  return leadSources.filter((leadSource) => {
+    const lowerCaseLeadSource = leadSource.toLowerCase();
+    const lowerCaseRemoveLeadSources = removeLeadSources.map((source) =>
+      source.toLowerCase()
+    );
+
+    return !lowerCaseRemoveLeadSources.includes(lowerCaseLeadSource);
+  });
+};

package/src/fetchPhoneNumberFromSource.ts

@@ -0,0 +1,31 @@
+import axios from "axios";
+import { formatPhoneNumber } from "./WebComponent/actions/formatPhoneNumber";
+
+export interface NumberForSelectedSource {
+  number: string;
+  isMatch: boolean;
+  isPropertyWebsiteCatchall: boolean;
+}
+
+export default async function fetchPhoneNumberFromSource(
+  buildingSlug: string,
+  source: string | null
+): Promise<NumberForSelectedSource | null> {
+  const host = "https://app.meetelise.com";
+  try {
+    const phoneNumberResponse = await axios.get(
+      `${host}/platformApi/webchat/${buildingSlug}/phone-number-by-source?source=${source}`
+    );
+    if (phoneNumberResponse.data) {
+      return {
+        number: formatPhoneNumber(phoneNumberResponse.data.number),
+        isMatch: phoneNumberResponse.data.match,
+        isPropertyWebsiteCatchall:
+          phoneNumberResponse.data.isPropertyWebsiteCatchall,
+      };
+    }
+    return null;
+  } catch (_) {
+    return null;
+  }
+}

package/src/fetchWebchatPreferences.ts

@@ -0,0 +1,55 @@
+import axios from "axios";
+import { camelize } from "./utils";
+
+export interface WebchatSettings {
+  config: WebchatConfigurationPreferences;
+  isInheriting: boolean;
+  isGlobalDefault: boolean;
+}
+export interface WebchatConfigurationPreferences {
+  autoOpenChat: boolean;
+  shouldShowChat: boolean;
+  shouldShowChatDesktop: boolean;
+  shouldShowChatMobile: boolean;
+  shouldShowEmail: boolean;
+  shouldShowEmailDesktop: boolean;
+  shouldShowEmailMobile: boolean;
+  shouldShowPhone: boolean;
+  shouldShowPhoneDesktop: boolean;
+  shouldShowPhoneMobile: boolean;
+  shouldShowText: boolean;
+  shouldShowTextDesktop: boolean;
+  shouldShowTextMobile: boolean;
+  shouldShowSst: boolean;
+  shouldShowSstDesktop: boolean;
+  shouldShowSstMobile: boolean;
+  displayStyle: DesignConcepts;
+  primaryColor: string;
+  backgroundColor: string;
+  requiresConsent: boolean;
+  privacyPolicyUrl: string;
+}
+
+export enum DesignConcepts {
+  EMOJI = "emoji",
+  PILLS = "pills",
+  MINIMIZED = "minimized", // this is also mobile
+}
+
+export default async function fetchWebchatPreferences(
+  buildingId: number
+): Promise<WebchatSettings | null> {
+  const host = "https://app.meetelise.com";
+  try {
+    const webchatPreferencesResponse = await axios.get(
+      `${host}/eliseCrmApi/webchat/config/building/${buildingId}`
+    );
+
+    if (webchatPreferencesResponse.data) {
+      return camelize(webchatPreferencesResponse.data);
+    }
+  } catch (_) {
+    return null;
+  }
+  return null;
+}

package/src/getAvailabilities.ts

@@ -44,9 +44,13 @@ export const getRawAvailabilities = async (
   }
   const startTime = startOfToday();
   const endTime = formatISO(endOfDay(addDays(startTime, 30)));
-  const url = `https://app.meetelise.com/api/pub/v1/buildings/${buildingIdToUse}/tour/availabilities?startTime=${formatISO(
-    startTime
-  )}&endTime=${endTime}`;
+
+  // We MUST encode the URI components because a positive timezone offset counts as a space in urls!
+  const timeParams = `startTime=${encodeURIComponent(
+    formatISO(startTime)
+  )}&endTime=${encodeURIComponent(endTime)}`;
+  const url = `https://app.meetelise.com/api/pub/v1/buildings/${buildingIdToUse}/tour/availabilities?${timeParams}`;
+
   const result = await axios.get<TourAvailabilityResponse>(url);
   availabilitiesCache.availabilities[buildingIdToUse] = result.data;
   // The endpoint INCORRECTLY states that these are returned as dates. They are, in fact, strings.

package/src/getBuildingPhoneNumber.ts

@@ -0,0 +1,26 @@
+import axios from "axios";
+import { LogType, sendLoggingEvent } from "./analytics";
+
+export const getBuildingPhoneNumber = async (
+  buildingSlug: string
+): Promise<string | null> => {
+  try {
+    const host = "https://app.meetelise.com";
+    const webchatPreferencesResponse = await axios.get(
+      `${host}/platformApi/webchat/${buildingSlug}/phone-number`
+    );
+    if (webchatPreferencesResponse.data) {
+      return webchatPreferencesResponse.data;
+    }
+  } catch (error) {
+    sendLoggingEvent({
+      logType: LogType.error,
+      buildingSlug,
+      logTitle: "[ERROR_GETTING_PHONE_NUMBERS]",
+      logData: { error },
+    });
+
+    return null;
+  }
+  return null;
+};

package/src/getShouldAllowScheduling.ts

@@ -0,0 +1,16 @@
+import axios from "axios";
+
+export const getShouldAllowScheduling = async (
+  buildingId: number,
+  isDynamicSchedulingEnabled = false
+): Promise<boolean> => {
+  const host = "https://app.meetelise.com";
+  const url = `${host}/eliseCrmApi/building/${buildingId}/scheduling_status?observe_dynamic_scheduling=${isDynamicSchedulingEnabled}`;
+
+  try {
+    const response = await axios.get(url);
+    return response.data.is_enabled;
+  } catch (e) {
+    return false;
+  }
+};