@meetelise/chat 1.22.75 → 1.22.77

package/src/WebComponent/icons/ApplyOutlineIcon.ts

@@ -0,0 +1,22 @@
+import { svg, SVGTemplateResult } from "lit";
+
+export const ApplyOutlineIcon = (
+  color = "white"
+): SVGTemplateResult => svg`<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_18382_27345)">
+<g clip-path="url(#clip1_18382_27345)">
+<path d="M9.91666 0.625V3.45833C9.91666 3.6462 9.99128 3.82636 10.1241 3.9592C10.257 4.09204 10.4371 4.16667 10.625 4.16667H13.4583" stroke="${color}" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.0417 13.375H4.95832C4.5826 13.375 4.22227 13.2257 3.95659 12.9601C3.69091 12.6944 3.54166 12.3341 3.54166 11.9583V2.04167C3.54166 1.66594 3.69091 1.30561 3.95659 1.03993C4.22227 0.774255 4.5826 0.625 4.95832 0.625H9.91666L13.4583 4.16667V11.9583C13.4583 12.3341 13.3091 12.6944 13.0434 12.9601C12.7777 13.2257 12.4174 13.375 12.0417 13.375Z" stroke="${color}" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M6.375 9.125L7.79167 10.5417L10.625 7.70833" stroke="${color}" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_18382_27345">
+<rect width="16" height="14" fill="white"/>
+</clipPath>
+<clipPath id="clip1_18382_27345">
+<rect width="17" height="17" fill="white" transform="translate(0 -1.5)"/>
+</clipPath>
+</defs>
+</svg>
+`;

package/src/WebComponent/launcher/Launcher.ts

@@ -37,6 +37,7 @@ import { EmailOutlineIcon } from "../icons/EmailOutlineIcon";
 import { PhoneOutlineIcon } from "../icons/PhoneOutlineIcon";
 import { HeyThereEmoji } from "../icons/HeyThereEmojiIcon";
 import { ContactResidentIcon } from "../icons/ContactResidentIcon";
+import { ApplyOutlineIcon } from "../icons/ApplyOutlineIcon";
 
 @customElement("meetelise-launcher")
 export class Launcher extends LitElement {
@@ -100,6 +101,12 @@ export class Launcher extends LitElement {
   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 })
@@ -191,12 +198,15 @@ export class Launcher extends LitElement {
     const isSSTEnabled = this.hasSSTEnabledDesktop || this.hasSSTEnabledMobile;
     const isTextUsEnabled =
       this.hasTextUsEnabledDesktop || this.hasTextUsEnabledMobile;
+    const isApplyNowEnabled =
+      this.hasApplyNowEnabledDesktop || this.hasApplyNowEnabledMobile;
 
     return [
       isEmailEnabled,
       isPhoneNumberEnabled,
       isSSTEnabled,
       isTextUsEnabled,
+      isApplyNowEnabled,
     ].filter((v) => v).length;
   };
 
@@ -251,6 +261,13 @@ export class Launcher extends LitElement {
     this.isCallUsWindowOpen = true;
   };
 
+  onClickApplyNowOption = (e: MouseEvent): void => {
+    e.preventDefault();
+    e.stopPropagation();
+    closeRengrataWidget();
+    window.open(this.applicationLink, "_blank");
+  };
+
   onClosePhoneWindow = (): void => {
     this.isCallUsWindowOpen = false;
   };
@@ -313,6 +330,7 @@ export class Launcher extends LitElement {
           .onClickPhoneOption=${this.onClickPhoneOption}
           .onClickSSTOption=${this.onClickSSTOption}
           .onChatTapped=${this.onChatTapped}
+          .onClickApplyNowOption=${this.onClickApplyNowOption}
           .overrideRentgrata=${this.overrideRentgrata}
           .isMobileDesign=${isMobile() ||
           this.designConcept === DesignConcepts.MINIMIZED}
@@ -341,6 +359,12 @@ export class Launcher extends LitElement {
             : this.hasHideMobileFeatures && !this.isMobileFeaturesExpanded
             ? false
             : this.hasSSTEnabledMobile}
+          .hasApplyNowEnabled=${!isMobile()
+            ? this.hasApplyNowEnabledDesktop
+            : this.hasHideMobileFeatures && !this.isMobileFeaturesExpanded
+            ? false
+            : this.hasApplyNowEnabledMobile}
+          .applicationLink=${this.applicationLink}
         ></mobile-launcher>`;
     }
 
@@ -758,6 +782,43 @@ export class Launcher extends LitElement {
               `
             : null,
       },
+      {
+        pillKey: "Apply",
+        pill:
+          this.applicationLink && this.hasApplyNowEnabledDesktop
+            ? html`
+                <div
+                  @click=${this.onClickApplyNowOption}
+                  class="inner-pill-wrapper"
+                  style=${styleMap({
+                    background: this.backgroundColor,
+                  })}
+                >
+                  <div class="vertical-pill-left">
+                    <div class="vertical-pill-icon">
+                      ${ApplyOutlineIcon(
+                        this.foregroundColorOnSecondaryBackgroundColor
+                      )}
+                    </div>
+                    <div
+                      class="vertical-pill-title"
+                      style=${styleMap({
+                        color: this.foregroundColorOnSecondaryBackgroundColor,
+                      })}
+                    >
+                      <span class="vertical-pill-bold">Apply</span>
+                      now
+                    </div>
+                  </div>
+                  <div class="chevron-right">
+                    ${ChevronRightIcon(
+                      this.foregroundColorOnSecondaryBackgroundColor
+                    )}
+                  </div>
+                </div>
+              `
+            : null,
+      },
     ];
     const pills = verticalPillListItems.filter((v) => !!v.pill);
     if (showTourAtTop) {

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

@@ -7,6 +7,7 @@ import { EmailOutlineIcon } from "../icons/EmailOutlineIcon";
 import { PhoneOutlineIcon } from "../icons/PhoneOutlineIcon";
 import { BookTourOutlineIcon } from "../icons/BookTourOutlineIcon";
 import { ChatOutlineIcon } from "../icons/ChatOutlineIcon";
+import { ApplyOutlineIcon } from "../icons/ApplyOutlineIcon";
 
 @customElement("mobile-launcher")
 export class MobileLauncher extends LitElement {
@@ -30,6 +31,10 @@ export class MobileLauncher extends LitElement {
     return;
   };
   @property({ attribute: true })
+  onClickApplyNowOption: (e: MouseEvent) => void = () => {
+    return;
+  };
+  @property({ attribute: true })
   onChatTapped: (e: MouseEvent) => void = () => {
     return;
   };
@@ -61,6 +66,12 @@ export class MobileLauncher extends LitElement {
   @property({ attribute: true })
   hasSSTEnabled = false;
 
+  @property({ attribute: true })
+  hasApplyNowEnabled = false;
+
+  @property({ attribute: true })
+  applicationLink = "";
+
   @property({ attribute: true })
   overrideRentgrata = false;
 
@@ -93,6 +104,11 @@ export class MobileLauncher extends LitElement {
   render(): TemplateResult {
     return html`<div class="typeMobile-list">
       <ul>
+        ${this.renderListElement(
+          !!(this.hasApplyNowEnabled && this.applicationLink),
+          this.onClickApplyNowOption,
+          ApplyOutlineIcon("black")
+        )}
         ${this.renderListElement(
           this.hasEmailEnabled,
           this.onClickEmailOption,

package/src/WebComponent/me-chat.ts

@@ -15,6 +15,7 @@ import {
   fetchFeatureFlagMaintenanceMode,
   fetchFeatureFlagReplaceScheduleTourCtaWebsite,
   fetchFeatureFlagShowMarketingSourceDropdown,
+  fetchFeatureFlagUseApplicationsLinkReplacement,
   fetchFeatureFlagUseOverrideContactUsForm,
   fetchFeatureFlagUsePhoneNumberBySource,
 } from "../fetchFeatureFlag";
@@ -66,6 +67,7 @@ import LeadSourceClient, {
 import noop from "lodash/noop";
 import { updateRentgrataToken } from "../rentgrata";
 import { WidgetType } from "../main/MEChat";
+import { replaceSelectButtonsWithNewLink } from "../replaceSelectButtonsWithNewLink";
 
 @customElement("me-chat")
 export class MEChat extends LitElement {
@@ -433,6 +435,7 @@ export class MEChat extends LitElement {
       featureFlagUseDNI,
       featureFlagInsertDNIWebsite,
       featureFlagReplaceScheduleTourCtaWebsite,
+      featureFlagUseApplicationsLinkReplacement,
     ] = await Promise.all([
       fetchBuildingABTestType(this.buildingSlug),
       fetchLeadSources(this.orgSlug, this.buildingSlug),
@@ -440,6 +443,7 @@ export class MEChat extends LitElement {
       fetchFeatureFlagUsePhoneNumberBySource(this.buildingSlug),
       fetchFeatureFlagInsertDNIWebsite(this.buildingSlug),
       fetchFeatureFlagReplaceScheduleTourCtaWebsite(this.buildingSlug),
+      fetchFeatureFlagUseApplicationsLinkReplacement(this.buildingSlug),
     ]);
 
     if (this.buildingWebchatView) {
@@ -594,6 +598,27 @@ export class MEChat extends LitElement {
       }
     }
     getRawAvailabilities(buildingDetails.id); // we're not using this here, just want to cache the result
+
+    if (featureFlagUseApplicationsLinkReplacement && this.buildingSlug) {
+      const totalReplacements = replaceSelectButtonsWithNewLink(
+        `https://applications.eliseai.com/building/${this.buildingSlug}`,
+        this.orgSlug,
+        this.buildingSlug
+      );
+      if (totalReplacements > 0) {
+        logSignal({
+          params: {
+            org_slug: this.orgSlug,
+            building_slug: this.buildingSlug,
+            is_application_link_replacement_success: true,
+            extra_data: {
+              total_replacements: totalReplacements,
+            },
+          },
+          sampleRate: this.sampleRateToUse,
+        });
+      }
+    }
   };
 
   private initializeChatVariables = async (): Promise<void> => {
@@ -989,6 +1014,11 @@ export class MEChat extends LitElement {
                   .hasTextUsEnabledMobile=${this.enabledChatWidgets.textMobile}
                   .hasSSTEnabledDesktop=${this.enabledChatWidgets.sstDesktop}
                   .hasSSTEnabledMobile=${this.enabledChatWidgets.sstMobile}
+                  .hasApplyNowEnabledDesktop=${this.buildingWebchatView
+                    .shouldShowApplyNowDesktop}
+                  .hasApplyNowEnabledMobile=${this.buildingWebchatView
+                    .shouldShowApplyNowMobile}
+                  .applicationLink=${this.buildingWebchatView.applicationLink}
                   .hasHideMobileFeatures=${this.hideMobileFeatures}
                   .top=${this.top}
                   .bottom=${this.bottom}

package/src/analytics.ts

@@ -187,6 +187,7 @@ interface SignalLoggerProps {
   is_any_webchat_showing?: boolean | null;
   is_form_override_success?: boolean | null;
   is_dni_insert_override_success?: boolean | null;
+  is_application_link_replacement_success?: boolean | null;
   extra_data?: Record<string, unknown> | null;
 }
 

package/src/fetchBuildingWebchatView.ts

@@ -105,6 +105,10 @@ export interface BuildingWebchatView {
   shouldShowEmailMobile: boolean | null;
   shouldShowSstDesktop: boolean | null;
   shouldShowSstMobile: boolean | null;
+  shouldShowApplyNowDesktop: boolean | null;
+  shouldShowApplyNowMobile: boolean | null;
+  applicationLink: string | null;
+  isLiveOnCollect: boolean | null;
   requiresConsentForChat: boolean | null;
   privacyPolicyUrlForChat: string | null;
   collapseMobileFeatures: boolean | null;

package/src/fetchFeatureFlag.ts

@@ -223,3 +223,28 @@ export async function fetchFeatureFlagReplaceScheduleTourCtaWebsite(
     return false;
   }
 }
+
+export async function fetchFeatureFlagUseApplicationsLinkReplacement(
+  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-applications-link-replacement",
+          default_str: null,
+          default_bool: false,
+        },
+      }
+    );
+    return featureFlagResponse.data;
+  } catch (_) {
+    return false;
+  }
+}

package/src/replaceSelectButtonsWithNewLink.ts

@@ -0,0 +1,68 @@
+/**
+ * Script to find all application links/buttons on a page and replace them with a
+ * new elise application link.
+ */
+import { LogType, sendLoggingEvent } from "./analytics";
+
+/**
+ * Script to find all "Select" buttons with specific URL patterns and replace them with a
+ * new application link.
+ */
+export const replaceSelectButtonsWithNewLink = (
+  newApplicationLink: string,
+  orgSlug: string,
+  buildingSlug?: string
+): number => {
+  const urlPatterns = [
+    /thehavenatgreenhill\.securecafe\.com\/onlineleasing\/the-haven-at-greenhill\/oleapplication\.aspx(\?.*)?$/,
+    /securecafe\.com\/onlineleasing.*\/oleapplication\.aspx(\?.*)?$/,
+    /\/onlineleasing.*\/oleapplication\.aspx(\?.*)?$/,
+  ];
+
+  const allElements = document.body.getElementsByTagName("a");
+  let totalReplacements = 0;
+
+  for (let i = 0; i < allElements.length; i++) {
+    const element = allElements[i] as HTMLAnchorElement;
+    if (element.nodeType !== Node.ELEMENT_NODE) continue;
+
+    const matchesUrlPattern = urlPatterns.some((pattern) =>
+      pattern.test(element.href)
+    );
+    const isSelectButtonWithUrl = matchesUrlPattern;
+
+    if (isSelectButtonWithUrl) {
+      const oldHref = element.getAttribute("href");
+      element.setAttribute("href", newApplicationLink);
+      totalReplacements++;
+
+      sendLoggingEvent({
+        logTitle: "SELECT_BUTTON_LINK_REPLACEMENT",
+        logData: {
+          type: "link-replacement",
+          oldHref,
+          newHref: newApplicationLink,
+          website: window.location.href,
+        },
+        logType: LogType.info,
+        buildingSlug,
+        orgSlug,
+      });
+    }
+  }
+
+  if (totalReplacements === 0) {
+    sendLoggingEvent({
+      logTitle: "SELECT_BUTTON_LINK_REPLACEMENT",
+      logData: {
+        type: "no-select-buttons-found",
+        website: window.location.href,
+      },
+      logType: LogType.warn,
+      buildingSlug,
+      orgSlug,
+    });
+  }
+
+  return totalReplacements;
+};