@meetelise/chat 1.35.0 → 1.35.2

package/src/WebComponent/LeadSourceClient.ts

@@ -0,0 +1,332 @@
+import axios from "axios";
+import parseISO from "date-fns/parseISO";
+import formatISO from "date-fns/formatISO";
+import { CampaignSources, getCampaignSources } from "../analytics";
+import { getUrlQueryParameters } from "../postLeadSources";
+import { isTimestampExpired } from "../utils";
+import isEmpty from "lodash/isEmpty";
+
+export interface LeadSourceInput {
+  buildingSlug: string | null;
+  queryParams: {
+    [queryKey: string]: string;
+  } | null;
+  referrer: string;
+  campaignSources: CampaignSources;
+}
+
+export function getDefaultLeadSourceAttribution(orgSlug: string): string {
+  if (orgSlug === "avb") {
+    // this is stupid and we should not do this
+    // if anything, should read from DB and give clients default ability to set this
+    return "AVB Company Website";
+  }
+  if (orgSlug === "windsor") {
+    return "Windsorcommunities.com";
+  }
+  return "property-website";
+}
+
+class LeadSourceClient {
+  chatId: string | null = null;
+
+  private apiHost = "https://app.meetelise.com";
+  public leadSource: string | null = null;
+  private localStorageTTLDays = 30;
+
+  buildingId: number | null = null;
+  orgSlug: string | null = null;
+  buildingSlug: string | null = null;
+  queryParameters: {
+    [queryKey: string]: string;
+  } | null = null;
+
+  leadSourceInput: {
+    websiteOrigin: string | null;
+    websiteSearch: string | null;
+    queryParameters: {
+      [queryKey: string]: string;
+    } | null;
+    referrer: string | null;
+    parsedUtmSource: string | null;
+    campaignSources: string[] | null;
+  } | null = null;
+
+  private updateLeadSourceLocalStorage = (
+    buildingSlug: string,
+    leadSource: string | null,
+    leadId: string,
+    ignorePost: boolean, // if we dont have lead source, we just want to still use for logging
+    isOverrideFromNewLeadSource: boolean
+  ) => {
+    const queryParameters = getUrlQueryParameters();
+    this.leadSourceInput = {
+      websiteOrigin: window.location.origin,
+      websiteSearch: window.location.search,
+      queryParameters: queryParameters,
+      referrer: document.referrer,
+      parsedUtmSource: queryParameters ? queryParameters["utm_source"] : null,
+      campaignSources: Object.values(getCampaignSources()).filter(
+        (source) => source
+      ),
+    };
+    if (ignorePost) return;
+
+    if (!isOverrideFromNewLeadSource) {
+      const existingLeadSource = this.getLeadSourceBodyIfValid(buildingSlug);
+      if (existingLeadSource) {
+        const isExpired = isTimestampExpired(
+          existingLeadSource.timestamp,
+          this.localStorageTTLDays * 24
+        );
+        if (!isExpired) {
+          return {
+            ...existingLeadSource,
+            timestamp: parseISO(existingLeadSource.timestamp),
+          };
+        }
+      }
+    }
+
+    const body = {
+      leadSource: leadSource,
+      leadId: leadId,
+      buildingSlug: buildingSlug,
+      timestamp: formatISO(new Date()),
+      leadSourceInput: this.leadSourceInput,
+    };
+    localStorage.setItem(
+      "com.elise.webchat.leadsource.slug=" + buildingSlug,
+      JSON.stringify(body)
+    );
+    return { ...body, timestamp: parseISO(body.timestamp) };
+  };
+
+  private getLeadSourceBodyIfValid = (buildingSlug: string) => {
+    const body = localStorage.getItem(
+      "com.elise.webchat.leadsource.slug=" + buildingSlug
+    );
+    if (body) {
+      try {
+        const parsedBody = JSON.parse(body);
+        const isValid =
+          parsedBody.buildingSlug === buildingSlug &&
+          parsedBody.leadSource &&
+          parsedBody.leadId &&
+          parsedBody.timestamp &&
+          !isTimestampExpired(
+            parseISO(parsedBody.timestamp),
+            this.localStorageTTLDays * 24
+          );
+        if (isValid) {
+          try {
+            this.leadSourceInput = parsedBody.leadSourceInput;
+          } catch (_) {
+            // eslint-disable-next-line no-console
+            console.error("Error parsing leadSourceInput from localStorage");
+          }
+          return parsedBody;
+        }
+      } catch (_) {
+        return null;
+      }
+    }
+    return null;
+  };
+
+  private async fetchCurrentParsedLeadSource({
+    buildingSlug,
+    queryParams,
+    referrer,
+    campaignSources,
+  }: LeadSourceInput): Promise<string | null> {
+    try {
+      const currentParsedLeadSourceResponse = await axios.post(
+        `${this.apiHost}/platformApi/webchat/current-parsed-lead-source`,
+        {
+          query_params: queryParams,
+          building_slug: buildingSlug,
+          referrer: referrer,
+          campaign_sources: campaignSources,
+        }
+      );
+      return currentParsedLeadSourceResponse.data;
+    } catch (_) {
+      return null;
+    }
+  }
+
+  async checkAndHandleForLogLeadSource({
+    webchatAction,
+    stateId,
+  }: {
+    webchatAction: string;
+    stateId: string | null;
+  }): Promise<null> {
+    try {
+      if (!this.chatId) {
+        // eslint-disable-next-line no-console
+        console.error("chatId is not set");
+        return null;
+      }
+      if (!this.orgSlug) {
+        // eslint-disable-next-line no-console
+        console.error("orgId is not set");
+        return null;
+      }
+
+      let google_analytics_client_id = null;
+      let extras = null;
+      try {
+        if (this.orgSlug === "f1ba5a20-d207-4e5a-879e-65199e7d0a53") {
+          // SCION only
+          const gaCookie = await this.getCookieValue("_ga");
+          if (gaCookie) {
+            google_analytics_client_id = gaCookie;
+          }
+          // find the object in the dataLayer that has the extras gtagApiGet
+          extras = window.dataLayer.find(
+            (obj) => obj.value?.event == "gtagApiGet"
+          )?.value;
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error("error getting cookie");
+      }
+
+      await axios.post(`${this.apiHost}/platformApi/webchat/log/lead-source`, {
+        chat_id: this.chatId,
+        webchat_action: webchatAction,
+        state_id: stateId,
+        building_id: this.buildingId,
+        org_slug: this.orgSlug,
+        building_slug: this.buildingSlug,
+        website_origin: this.leadSourceInput?.websiteOrigin,
+        website_search: this.leadSourceInput?.websiteSearch,
+        query_parameters: this.leadSourceInput?.queryParameters,
+        referrer: this.leadSourceInput?.referrer,
+        parsed_utm_source: this.leadSourceInput?.parsedUtmSource,
+        campaign_sources: this.leadSourceInput?.campaignSources,
+        lead_source_output: this.leadSource,
+        google_analytics_client_id: isEmpty(google_analytics_client_id)
+          ? null
+          : google_analytics_client_id,
+        extras: extras ?? null,
+      });
+      return null;
+    } catch (_) {
+      return null;
+    }
+  }
+
+  async getCookieValue(key: string): Promise<string | null> {
+    try {
+      const cookies = document.cookie.split(";");
+      for (let i = 0; i < cookies.length; i++) {
+        const cookie = cookies[i].trim();
+        if (cookie.startsWith(key + "=")) {
+          const value = cookie.substring(
+            (key + "=").length,
+            cookie.indexOf(";") === -1 ? undefined : cookie.indexOf(";")
+          );
+          return value;
+        }
+      }
+      return null;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error("error getting cookie value");
+    }
+    return null;
+  }
+
+  // TODO(erol): clean up this entire function
+  async generateUserLeadSource({
+    leadId,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    orgSlug,
+    buildingSlug,
+  }: {
+    leadId: string;
+    orgSlug: string;
+    buildingSlug: string | null;
+  }): Promise<string | null> {
+    try {
+      // 1. try to generate a lead source
+      // 2. if we have a match, use that
+      // 3. if we dont have a match utilize the one from local storage
+      const leadSourceInput: LeadSourceInput = {
+        queryParams: getUrlQueryParameters(),
+        buildingSlug: buildingSlug,
+        referrer: document.referrer,
+        campaignSources: getCampaignSources(),
+      };
+
+      let isOverrideFromNewLeadSource = false;
+      // We detect if there is an existing lead source in local storage
+      const isCurrentlyStoredLeadSource = buildingSlug
+        ? this.getLeadSourceBodyIfValid(buildingSlug)
+        : null;
+      if (isCurrentlyStoredLeadSource) {
+        const orgSlugsAlwaysUseMostRecentLeadSource = [
+          "test-company",
+          "daf00bd2-1ecb-482c-b6f4-e1c5511a01be", // talked w/ carbon https://meetelise.zendesk.com/agent/tickets/75095
+        ];
+        if (orgSlugsAlwaysUseMostRecentLeadSource.includes(orgSlug)) {
+          const currentParsedLeadSource =
+            await this.fetchCurrentParsedLeadSource(leadSourceInput);
+
+          if (currentParsedLeadSource) {
+            this.leadSource = currentParsedLeadSource;
+            isOverrideFromNewLeadSource = true;
+          } else {
+            this.leadSource = isCurrentlyStoredLeadSource.leadSource;
+            return this.leadSource;
+          }
+        } else {
+          this.leadSource = isCurrentlyStoredLeadSource.leadSource;
+          return this.leadSource;
+        }
+      }
+
+      const currentParsedLeadSource = await this.fetchCurrentParsedLeadSource(
+        leadSourceInput
+      );
+      this.leadSource = currentParsedLeadSource;
+
+      this.buildingId = null;
+      this.orgSlug = orgSlug;
+      this.buildingSlug = buildingSlug;
+
+      // If we do NOT detect a lead source from the current session, we check the local storage and use that
+      if (buildingSlug && !currentParsedLeadSource) {
+        const isCurrentlyStoredLeadSource =
+          this.getLeadSourceBodyIfValid(buildingSlug);
+        if (isCurrentlyStoredLeadSource) {
+          this.leadSource = isCurrentlyStoredLeadSource.leadSource;
+          return this.leadSource;
+        }
+      }
+
+      if (buildingSlug) {
+        const leadSourceExistsInLocalStorage =
+          !!currentParsedLeadSource && currentParsedLeadSource.length > 0;
+
+        this.updateLeadSourceLocalStorage(
+          buildingSlug,
+          currentParsedLeadSource,
+          leadId,
+          !leadSourceExistsInLocalStorage && !isOverrideFromNewLeadSource,
+          isOverrideFromNewLeadSource
+        );
+      }
+      return currentParsedLeadSource;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error(error);
+    }
+    return null;
+  }
+}
+
+export default LeadSourceClient;

package/src/WebComponent/MEChat.css

@@ -0,0 +1,5 @@
+@media screen and (min-width: 767px) {
+  .meetelise-chat.pane.launcher__desktop {
+    right: -32px;
+  }
+}

package/src/WebComponent/OfficeHours.ts

@@ -0,0 +1,73 @@
+import eachDayOfInterval from "date-fns/eachDayOfInterval";
+import startOfWeek from "date-fns/startOfWeek";
+import endOfWeek from "date-fns/endOfWeek";
+import setHours from "date-fns/setHours";
+import getDay from "date-fns/getDay";
+import axios from "axios";
+
+interface OfficeHourAvailabilityReponse {
+  [dayOfWeek: string]: { start: string; end: string };
+}
+
+const officeHoursCache: {
+  [buildingId: number]: OfficeHourAvailabilityReponse;
+} = {};
+
+export const getRawOfficeHours = async (
+  buildingId: number
+): Promise<OfficeHourAvailabilityReponse> => {
+  if (officeHoursCache[buildingId]) {
+    return officeHoursCache[buildingId];
+  }
+  const url = `https://app.meetelise.com/platformApi/connectors/talk_js/leasing_office_hours/${buildingId}`;
+  const result = await axios.get<OfficeHourAvailabilityReponse>(url);
+  officeHoursCache[buildingId] = result.data;
+  return result.data;
+};
+
+export const getDefaultOfficeHours = (): {
+  startTime: Date;
+  endTime: Date;
+}[] => {
+  return eachDayOfInterval({
+    start: startOfWeek(new Date()),
+    end: endOfWeek(new Date()),
+  })
+    .filter((date) => getDay(date) !== 0 && getDay(date) !== 6)
+    .map((date) => ({
+      startTime: setHours(date, 9),
+      endTime: setHours(date, 17),
+    }));
+};
+
+export const dayNamesInOrder = [
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+  "sunday",
+];
+
+/**
+ * Based on the design, we're going with monday as the first day of the week
+ */
+export const getOfficeHourText = async (
+  buildingId: number
+): Promise<
+  (string | { dayOfWeek: string; startTime: string; endTime: string })[]
+> => {
+  const rawOfficeHours = await getRawOfficeHours(buildingId);
+  return dayNamesInOrder.map((dow) => {
+    const officeHourInfo = rawOfficeHours[dow];
+    if (!officeHourInfo) {
+      return dow;
+    }
+    return {
+      dayOfWeek: dow,
+      startTime: officeHourInfo.start,
+      endTime: officeHourInfo.end,
+    };
+  });
+};