@meetelise/chat 1.51.0 → 1.51.2

package/src/WebComponent/LeadSourceClient.ts

@@ -32,8 +32,6 @@ class LeadSourceClient {
 
   private apiHost = "https://app.meetelise.com";
   public leadSource: string | null = null;
-  // UTM params associated with the resolved lead source (e.g. switch_code=<code>
-  // for AMLI). Forwarded onto external tour-vendor links (e.g. Tour24).
   public leadSourceParams: { [key: string]: string } | null = null;
   private localStorageTTLDays = 30;
 
@@ -152,26 +150,11 @@ class LeadSourceClient {
       campaign_sources: campaignSources,
     };
     try {
-      // Only AMLI (org 52) needs the resolved source's params forwarded to its
-      // self-guided tour vendor (Tour24); every other org uses the original
-      // endpoint that returns just the source string.
-      if (this.orgId !== 52) {
-        const response = await axios.post(
-          `${this.apiHost}/platformApi/webchat/current-parsed-lead-source`,
-          requestBody
-        );
-        return response.data;
-      }
       const response = await axios.post(
-        `${this.apiHost}/platformApi/webchat/current-parsed-lead-source-with-params`,
+        `${this.apiHost}/platformApi/webchat/current-parsed-lead-source`,
         requestBody
       );
-      const data = response.data as {
-        source: string | null;
-        utm_params: { [key: string]: string } | null;
-      };
-      this.leadSourceParams = data?.utm_params ?? null;
-      return data?.source ?? null;
+      return response.data;
     } catch (_) {
       return null;
     }

package/src/WebComponent/Scheduler/tour-scheduler.ts

@@ -1,11 +1,8 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { html, LitElement, PropertyValueMap, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
-import {
-  shortcutKeyIsPressed,
-  formatToPhoneInput,
-  isPrintableCharacter,
-} from "../actions/formatPhoneNumber";
+import "../actions/international-phone-input";
+import type { InternationalPhoneChangeDetail } from "../actions/international-phone-input";
 import "./tour-type-option.ts";
 import "./date-picker.ts";
 import "./time-picker.ts";
@@ -30,12 +27,7 @@ import { MESelect } from "../me-select";
 import { TimePicker } from "./time-picker";
 import { LabeledOption } from "../../fetchBuildingInfo";
 import { LayoutOption } from "../../fetchBuildingWebchatView";
-import {
-  isMobile,
-  isValidEmail,
-  isValidPhoneNumber,
-  snakify,
-} from "../../utils";
+import { isMobile, isValidEmail, snakify } from "../../utils";
 import axios, { AxiosError } from "axios";
 import mapValues from "lodash/mapValues";
 import classnames from "classnames";
@@ -44,7 +36,10 @@ import compareAsc from "date-fns/compareAsc";
 import { InputStyles } from "../actions/InputStyles";
 import { classMap } from "lit/directives/class-map.js";
 import { FeatureFlagsShowDropdown } from "../../fetchFeatureFlag";
-import { appendParamsToUrl } from "../../postLeadSources";
+import {
+  appendParamsToUrl,
+  getUrlQueryParameters,
+} from "../../postLeadSources";
 import { pushGtmEvent } from "../../gtm";
 import formDisclaimer from "../../disclaimers";
 import { tourSchedulerStyles } from "./tourSchedulerStyles";
@@ -87,13 +82,12 @@ export class TourScheduler extends LitElement {
   }
 
   // Open the configured self-guided tour (e.g. Tour24) link. For org 52 (AMLI)
-  // we forward the resolved lead source's params (e.g. switch_code=<code>) onto
-  // the link so the vendor can attribute the lead; every other org opens the
-  // link unchanged.
+  // we read URL params fresh at open-time so returning visitors (cached lead
+  // source) still get the current page's query string forwarded.
   private openSelfGuidedTour(): void {
     const url =
       this.orgId === 52
-        ? appendParamsToUrl(this.sgtUrl, this.leadSourceParams)
+        ? appendParamsToUrl(this.sgtUrl, getUrlQueryParameters())
         : this.sgtUrl;
     window.open(url, "_blank");
   }
@@ -155,6 +149,14 @@ export class TourScheduler extends LitElement {
   @state()
   private phoneNumber = "";
   @state()
+  private phoneNumberE164: string | null = null;
+  @state()
+  private phoneCountry: string | null = null;
+  @state()
+  private phoneNumberIsValid = false;
+  @state()
+  private phoneNumberHasBlurred = false;
+  @state()
   private availabilitiesGroupedByDay: {
     [day: string]: DateWithTimeZoneOffset[];
   } = {};
@@ -217,8 +219,6 @@ export class TourScheduler extends LitElement {
   lastNameInput!: HTMLInputElement;
   @query(".inputContainer#email input")
   emailInput!: HTMLInputElement;
-  @query(".inputContainer#phone input")
-  phoneInput!: HTMLInputElement;
   @query("me-select#leadSource")
   selectedLeadSource!: MESelect;
   @query("me-select#layout")
@@ -630,147 +630,13 @@ export class TourScheduler extends LitElement {
     }
   };
 
-  handlePhoneKeydown = (e: Event): void => {
-    // these should always be true, this is just here to help TypeScript
-    if (
-      !(e instanceof KeyboardEvent) ||
-      !(e.target instanceof HTMLInputElement) ||
-      e.target.selectionStart === null
-      // !e.target.selectionStart
-    )
-      return;
-
-    const cursorPosition = e.target.selectionStart;
-
-    if (isPrintableCharacter(e) && !shortcutKeyIsPressed(e)) {
-      // If e.key is a character, and no modifier key is pressed, insert it at the cursor, filter out non-numbers, and auto-format
-      e.preventDefault();
-      e.stopPropagation();
-      const updated =
-        this.phoneNumber.slice(0, cursorPosition) +
-        e.key +
-        this.phoneNumber.slice(cursorPosition);
-      this.phoneNumber = formatToPhoneInput(updated.replace(/\D/g, ""));
-      this.phoneInput.value = this.phoneNumber;
-    } else if (e.key === "Backspace") {
-      /*
-      Handling backspace:
-      - A single backspace should delete the last digit before the cursor, not just a punctuation character; the user shouldn't interact directly with the punctuation
-      - Let the OS handle backspace combos like `Alt + Backspace`, then re-autoformat if necessary (in keyup)
-      - If the user wants to select and backspace a range of text, let them, then auto-format the remainder
-      */
-
-      // backspace combos
-      if (shortcutKeyIsPressed(e)) {
-        return;
-      }
-
-      // backspace selection
-      if (
-        this.phoneInput.selectionEnd &&
-        this.phoneInput.selectionStart &&
-        this.phoneInput.selectionEnd - this.phoneInput.selectionStart > 0
-      ) {
-        return;
-      }
-
-      // regular backspace
-      const originalCharacterCount = this.phoneNumber.length;
-      const digitsBeforeCursor = this.phoneNumber
-        .slice(0, cursorPosition)
-        .replace(/\D/g, "");
-      const digitsAfterCursor = this.phoneNumber
-        .slice(cursorPosition)
-        .replace(/\D/g, "");
-      const updatedDigits = `${digitsBeforeCursor.slice(
-        0,
-        -1
-      )}${digitsAfterCursor}`;
-      this.phoneNumber = formatToPhoneInput(updatedDigits);
-      this.phoneInput.value = this.phoneNumber;
-      const numOfCharactersDeleted =
-        originalCharacterCount - this.phoneNumber.length;
-      const newCursorPosition = cursorPosition - numOfCharactersDeleted;
-      this.phoneInput.setSelectionRange(newCursorPosition, newCursorPosition);
-      e.preventDefault();
-      e.stopPropagation();
-      return;
-    } else if (
-      ["ArrowLeft", "ArrowRight"].includes(e.key) &&
-      !shortcutKeyIsPressed(e) &&
-      !e.shiftKey
-    ) {
-      // when navigating with arrow keys, skip punctuation
-      if (e.key === "ArrowLeft") {
-        const charactersBeforeCursor = this.phoneNumber.slice(
-          0,
-          cursorPosition
-        );
-        const numberOfNonDigitsBeforeCursor =
-          charactersBeforeCursor.split(/\d+/).at(-1)?.length || 0;
-        const moveLeftBy = numberOfNonDigitsBeforeCursor + 1;
-        const newCursorPosition =
-          cursorPosition - moveLeftBy > -1 ? cursorPosition - moveLeftBy : 0;
-        this.phoneInput.setSelectionRange(newCursorPosition, newCursorPosition);
-      }
-      if (e.key === "ArrowRight") {
-        const charactersAfterCursor = this.phoneNumber.slice(cursorPosition);
-        const numberOfNonDigitsAfterCursor =
-          charactersAfterCursor.split(/\d+/)[0].length || 0;
-        const moveRightBy = numberOfNonDigitsAfterCursor + 1;
-        const newCursorPosition =
-          cursorPosition + moveRightBy < this.phoneNumber.length
-            ? cursorPosition + moveRightBy
-            : this.phoneNumber.length;
-        this.phoneInput.setSelectionRange(newCursorPosition, newCursorPosition);
-      }
-      e.preventDefault();
-      e.stopPropagation();
-    } else {
-      // Let browser/OS handle anything else. We'll handle any changes to the phone input in the `keyup` handler.
-      // Could be a keyboard shortcut that modifies the input (like `Cmd/Ctrl + V`, which we'll handle in `keyup`),
-      // or a keyboard shortcut that doesn't (like `Cmd + L` to jump to URL bar or `Cmd + R` to reload the page),
-      // or Tab, an arrow key, etc.
-      return;
-    }
-  };
-
-  handlePhoneKeyup = (e: KeyboardEvent): void => {
-    if (!e.key) {
-      return;
-    }
-    // After formatting, place the cursor where it was before, defined as "before the digit that followed it before formatting, if any, otherwise at the end".
-    // (We never want the cursor to be before a punctuation mark because the next digit typed will appear after the punctuation mark, not before.)
-    // If we don't do this, the cursor automatically goes to the end when we set `this.phoneNumber`.
-    // This is sometimes undesired: for example, if we've ended up here because a Mac user typed `Alt + Backspace` in the middle.
-
-    // Arrow keys are intended to change the cursor position, so don't get in their way
-    if (
-      e.key.includes("Arrow") ||
-      ["Meta", "Shift", "Control", "Alt"].includes(e.key)
-    ) {
-      return;
-    }
-
-    const cursorPosition = this.phoneInput.selectionStart;
-    // find the numbers it's before and count backward from end after formatting
-    const numbersAfterCursor = cursorPosition
-      ? this.phoneInput.value.slice(cursorPosition).replace(/\D/g, "")
-      : "";
-    this.phoneNumber = formatToPhoneInput(this.phoneInput.value);
-
-    // EXAMPLES: (123)| 4            numbersAfterCursor will be '4'.
-    let cursorNegativeIndex = 0;
-    let numbersLeft = numbersAfterCursor.length;
-    while (numbersLeft) {
-      if (this.phoneNumber.at(cursorNegativeIndex)?.match(/\d/)) {
-        numbersLeft--;
-      }
-      cursorNegativeIndex++;
-    }
-    const cursorPositiveIndex =
-      this.phoneInput.value.length - cursorNegativeIndex + 1;
-    this.phoneInput.setSelectionRange(cursorPositiveIndex, cursorPositiveIndex);
+  onChangePhoneNumber = (
+    event: CustomEvent<InternationalPhoneChangeDetail>
+  ): void => {
+    this.phoneNumber = event.detail.formattedValue;
+    this.phoneNumberE164 = event.detail.e164;
+    this.phoneCountry = event.detail.country;
+    this.phoneNumberIsValid = event.detail.isValid;
   };
 
   onChangeEmail = (e: Event): void => {
@@ -788,10 +654,8 @@ export class TourScheduler extends LitElement {
       return (
         (!!this.firstNameInput?.value || !!this.lastNameInput?.value) &&
         isValidEmail(this.emailInput?.value ?? "") &&
-        // TODO: deleting phone number doesn't cause validation to fail, at least on mobile
         !!this.phoneNumber &&
-        this.phoneNumber.length === 14 &&
-        isValidPhoneNumber(this.phoneNumber)
+        !!this.phoneNumberE164
       );
     },
   };
@@ -822,6 +686,11 @@ export class TourScheduler extends LitElement {
     if (!this.selectedDate || !this.selectedTime || this.tourType === null) {
       return;
     }
+    const phoneNumber = this.phoneNumberE164;
+    if (!phoneNumber) {
+      this.phoneNumberIsValid = false;
+      return;
+    }
     const queryParams = new URLSearchParams(window.location.search);
 
     let parsedLeadSource = null;
@@ -860,7 +729,7 @@ export class TourScheduler extends LitElement {
       this.selectedUnitEl?.value || this.selectedUnitValue || null;
     pushGtmEvent("scheduleTourSubmitted", {
       email: this.email,
-      phone: `+1${this.phoneNumber.match(/\d/g)?.join("")}`,
+      phone: phoneNumber,
       firstName: this.firstNameInput?.value ?? this.firstNameInputValue,
       lastName: this.lastNameInput?.value ?? this.lastNameInputValue,
       tourType: tourTypeForSubmission[this.tourType],
@@ -874,7 +743,7 @@ export class TourScheduler extends LitElement {
     const data = {
       referrer: document.referrer,
       email_address: this.email,
-      phone_number: `+1${this.phoneNumber.match(/\d/g)?.join("")}`, // e.g. +12125555555
+      phone_number: phoneNumber,
       building_id: this.buildingId,
       first_name: this.firstNameInput?.value ?? this.firstNameInputValue,
       last_name: this.lastNameInput?.value ?? this.lastNameInputValue,
@@ -1414,35 +1283,16 @@ export class TourScheduler extends LitElement {
             : ""}
         </div>
         <div class="inputContainer" id="phone">
-          <input
-            class=${classMap({
-              ["webchat-input"]: true,
-              ["webchat-font__desktop"]: !isMobile(),
-              ["webchat-font__mobile"]: isMobile(),
-              ["webchat-input__error"]:
-                this.phoneNumber.length === 14 &&
-                !isValidPhoneNumber(this.phoneNumber),
-            })}
-            type="tel"
-            inputmode="tel"
-            placeholder="Phone"
-            name="phone"
-            autocomplete="tel-national"
-            maxlength="14"
+          <international-phone-input
+            .country=${this.phoneCountry ?? this.country}
             .value=${this.phoneNumber}
-            @keydown=${this.handlePhoneKeydown}
-            @keyup=${this.handlePhoneKeyup}
-            @input=${(e: Event) => {
-              if (!e.target) {
-                return;
-              }
-              this.phoneNumber = formatToPhoneInput(
-                (e.target as HTMLInputElement).value
-              );
+            .invalid=${this.phoneNumberHasBlurred && !this.phoneNumberIsValid}
+            @phone-change=${this.onChangePhoneNumber}
+            @phone-blur=${() => {
+              this.phoneNumberHasBlurred = true;
             }}
-          />
-          ${this.phoneNumber.length === 14 &&
-          !isValidPhoneNumber(this.phoneNumber)
+          ></international-phone-input>
+          ${this.phoneNumberHasBlurred && !this.phoneNumberIsValid
             ? html`<p class="error-message">Invalid phone number</p>`
             : ""}
         </div>
@@ -1777,7 +1627,7 @@ export class TourScheduler extends LitElement {
                     changes.
                     ${formDisclaimer({
                       buildingName: this.buildingName,
-                      phoneNumberInput: this.phoneInput?.value,
+                      phoneNumberInput: this.phoneNumber,
                       emailInput: this.emailInput?.value,
                       orgLegalName: this.orgLegalName,
                       orgSlug: this.orgSlug,
@@ -1832,7 +1682,7 @@ export class TourScheduler extends LitElement {
                     changes.
                     ${formDisclaimer({
                       buildingName: this.buildingName,
-                      phoneNumberInput: this.phoneInput?.value,
+                      phoneNumberInput: this.phoneNumber,
                       emailInput: this.emailInput?.value,
                       orgLegalName: this.orgLegalName,
                       orgSlug: this.orgSlug,
@@ -1942,7 +1792,7 @@ export class TourScheduler extends LitElement {
               ? html`
                   ${formDisclaimer({
                     buildingName: this.buildingName,
-                    phoneNumberInput: this.phoneInput?.value,
+                    phoneNumberInput: this.phoneNumber,
                     emailInput: this.emailInput?.value,
                     orgLegalName: this.orgLegalName,
                     orgSlug: this.orgSlug,

package/src/WebComponent/actions/call-us-window.ts

@@ -17,7 +17,7 @@ import {
 
 import { getOfficeHourText } from "../OfficeHours";
 import {
-  formatToPhoneInput,
+  formatToUsPhoneInput,
   isModifierKey,
   isNumericInput,
 } from "./formatPhoneNumber";
@@ -279,7 +279,7 @@ export class CallUsWindow extends LitElement {
     }
     const inputElement = e.target as HTMLInputElement;
 
-    this.phoneNumberToText = formatToPhoneInput(inputElement.value);
+    this.phoneNumberToText = formatToUsPhoneInput(inputElement.value);
 
     this.phoneNumberInputRef.value.value = this.phoneNumberToText;
   };

package/src/WebComponent/actions/email-us-window.ts

@@ -2,16 +2,12 @@ import { css, html, LitElement, TemplateResult } from "lit";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { customElement, property, query, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
-import { createRef, ref, Ref } from "lit/directives/ref.js";
 import { installActionConfirmButton } from "./action-confirm-button";
 import { installDetailsWindow } from "./details-window";
 import "../me-select.ts";
 import { MESelect } from "../me-select";
-import {
-  formatToPhoneInput,
-  isModifierKey,
-  isNumericInput,
-} from "./formatPhoneNumber";
+import "./international-phone-input";
+import type { InternationalPhoneChangeDetail } from "./international-phone-input";
 import { InputStyles } from "./InputStyles";
 import axios from "axios";
 import { FeatureFlagsShowDropdown } from "../../fetchFeatureFlag";
@@ -135,8 +131,6 @@ export class EmailUsWindow extends LitElement {
   @property({ attribute: true })
   featureFlagShowDropdown = "";
 
-  phoneNumberInputRef: Ref<HTMLInputElement> = createRef();
-
   @property()
   privatePolicyUrl = "https://www.meetelise.com/privacy";
   @property()
@@ -151,6 +145,10 @@ export class EmailUsWindow extends LitElement {
   @state()
   phoneNumber = "";
   @state()
+  phoneNumberE164: string | null = null;
+  @state()
+  phoneCountry: string | null = null;
+  @state()
   message = "";
 
   @query("me-select#leadSource")
@@ -200,18 +198,12 @@ export class EmailUsWindow extends LitElement {
     this.email = (e.target as HTMLInputElement).value;
   };
 
-  onChangePhoneNumber = (e: Event): void => {
-    if (!e.target || !this.phoneNumberInputRef.value) {
-      return;
-    }
-    if (isModifierKey(e as KeyboardEvent)) {
-      return;
-    }
-    const inputElement = e.target as HTMLInputElement;
-
-    this.phoneNumber = formatToPhoneInput(inputElement.value);
-
-    this.phoneNumberInputRef.value.value = this.phoneNumber;
+  onChangePhoneNumber = (
+    e: CustomEvent<InternationalPhoneChangeDetail>
+  ): void => {
+    this.phoneNumber = e.detail.formattedValue;
+    this.phoneNumberE164 = e.detail.e164;
+    this.phoneCountry = e.detail.country;
   };
 
   onChangeMessage = (e: Event): void => {
@@ -222,12 +214,6 @@ export class EmailUsWindow extends LitElement {
     this.message = (e.target as HTMLTextAreaElement).value;
   };
 
-  enforceFormat = (e: KeyboardEvent): void => {
-    if (!isNumericInput(e) && !isModifierKey(e)) {
-      e.preventDefault();
-    }
-  };
-
   validateFormFields = (): void => {
     this.hasNameError = false;
     this.hasEmailError = false;
@@ -240,7 +226,7 @@ export class EmailUsWindow extends LitElement {
     if (!this.email || !isValidEmail(this.email)) {
       this.hasEmailError = true;
     }
-    if (!this.phoneNumber || this.phoneNumber.length !== 14) {
+    if (!this.phoneNumberE164) {
       this.hasPhoneNumberError = true;
     }
     this.windowHeight = 525 + 30 * this.getNumErrors();
@@ -259,6 +245,11 @@ export class EmailUsWindow extends LitElement {
     ) {
       return;
     }
+    const phoneNumber = this.phoneNumberE164;
+    if (!phoneNumber) {
+      this.hasPhoneNumberError = true;
+      return;
+    }
     try {
       this.isSubmitting = true;
       // Height of the button when it's in the loading state
@@ -271,7 +262,7 @@ export class EmailUsWindow extends LitElement {
         this.firstName,
         this.lastName,
         this.email,
-        this.phoneNumber,
+        phoneNumber,
         this.message,
         this.buildingId,
         this.orgSlug,
@@ -427,23 +418,12 @@ export class EmailUsWindow extends LitElement {
               `
             : ""}
           <div class="email-us__vertical-spacer"></div>
-          <input
-            ${ref(this.phoneNumberInputRef)}
-            type="text"
-            placeholder="Phone"
-            autocomplete="tel-national"
-            inputmode="tel"
-            class=${classMap({
-              ["webchat-input"]: true,
-              ["email-us__contact-input"]: true,
-              ["webchat-font__desktop"]: !isMobile(),
-              ["webchat-font__mobile"]: isMobile(),
-            })}
+          <international-phone-input
+            .country=${this.phoneCountry ?? this.country}
             .value=${this.phoneNumber}
-            maxlength="14"
-            @keydown=${this.enforceFormat}
-            @keyup=${this.onChangePhoneNumber}
-          />
+            .invalid=${this.hasPhoneNumberError}
+            @phone-change=${this.onChangePhoneNumber}
+          ></international-phone-input>
           ${this.hasPhoneNumberError
             ? html`
                 <div class="email-us__error-text">
@@ -527,7 +507,7 @@ const createEmail = async (
   firstName: string,
   lastName: string,
   email: string,
-  rawPhoneNumber: string,
+  phoneNumber: string,
   message: string,
   buildingId: number,
   orgSlug: string,
@@ -536,13 +516,6 @@ const createEmail = async (
   chatId?: string | null,
   leadSourcesWithTimestamps?: LeadSourceSubmittedListItem[]
 ) => {
-  const formattedPhoneNumber =
-    "+1" +
-    rawPhoneNumber
-      .replace("(", "")
-      .replace(")", "")
-      .replace(" ", "")
-      .replace("-", "");
   const queryParams = new URLSearchParams(window.location.search);
   const requestBody = {
     email_address: email,
@@ -551,7 +524,7 @@ const createEmail = async (
     first_message: message,
     first_name: firstName,
     last_name: lastName,
-    phone_number: formattedPhoneNumber,
+    phone_number: phoneNumber,
     referrer: document.referrer,
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
@@ -565,7 +538,7 @@ const createEmail = async (
     firstName,
     lastName,
     email,
-    phone: formattedPhoneNumber,
+    phone: phoneNumber,
     message,
     originatingSource:
       leadSources.find((i) => i !== "property-website") || null,