@meetelise/chat 1.51.0 → 1.51.2

package/src/WebComponent/actions/formatPhoneNumber.ts

@@ -1,22 +1,156 @@
+import {
+  getCountries,
+  getCountryCallingCode,
+  parsePhoneNumberFromString,
+} from "libphonenumber-js/min";
+import type { CountryCode } from "libphonenumber-js/min";
+
+const DEFAULT_PHONE_COUNTRY: CountryCode = "US";
+const supportedCountries = new Set<string>(getCountries());
+
+export type PhoneCountryOption = {
+  value: CountryCode;
+  label: string;
+  compactLabel: string;
+  countryName: string;
+};
+
+export const getPhoneCountry = (
+  country: string | null | undefined
+): CountryCode => {
+  const normalizedCountry = country?.toUpperCase();
+  return normalizedCountry && supportedCountries.has(normalizedCountry)
+    ? (normalizedCountry as CountryCode)
+    : DEFAULT_PHONE_COUNTRY;
+};
+
+const getFlagEmoji = (country: CountryCode): string =>
+  String.fromCodePoint(
+    ...[...country].map((character) => character.charCodeAt(0) + 127397)
+  );
+
+const getRegionDisplayNames = (): Intl.DisplayNames | null => {
+  try {
+    return typeof Intl.DisplayNames === "function"
+      ? new Intl.DisplayNames(["en"], { type: "region" })
+      : null;
+  } catch {
+    return null;
+  }
+};
+
+const PINNED_PHONE_COUNTRIES: CountryCode[] = ["US", "CA", "MX", "GB"];
+
+export const phoneCountryOptions: PhoneCountryOption[] = (() => {
+  const displayNames = getRegionDisplayNames();
+  return getCountries()
+    .map((country) => {
+      const countryName = displayNames?.of(country) ?? country;
+      const flag = getFlagEmoji(country);
+      const callingCode = getCountryCallingCode(country);
+      return {
+        value: country,
+        label: `${flag} +${callingCode} – ${countryName}`,
+        compactLabel: `${flag} +${callingCode}`,
+        countryName,
+      };
+    })
+    .sort((left, right) => {
+      const leftPinnedIndex = PINNED_PHONE_COUNTRIES.indexOf(left.value);
+      const rightPinnedIndex = PINNED_PHONE_COUNTRIES.indexOf(right.value);
+      if (leftPinnedIndex !== -1 || rightPinnedIndex !== -1) {
+        if (leftPinnedIndex === -1) return 1;
+        if (rightPinnedIndex === -1) return -1;
+        return leftPinnedIndex - rightPinnedIndex;
+      }
+      return left.countryName.localeCompare(right.countryName, "en");
+    });
+})();
+
 /**
- * For now, only handles the US phone number case.....
- * Formats into phone number as you type
+ * Formats a phone number as the user types. Numbers beginning with `+` infer
+ * their country from the calling code; national numbers use `country`.
  */
-export const formatToPhoneInput = (phoneNumber: string): string => {
+export const formatToPhoneInput = (
+  phoneNumber: string,
+  country: string | null = DEFAULT_PHONE_COUNTRY
+): string => {
+  const selectedCountry = getPhoneCountry(country);
+  const parsedPhoneNumber = parsePhoneNumberFromString(
+    phoneNumber,
+    selectedCountry
+  );
+  if (parsedPhoneNumber?.isValid()) {
+    return phoneNumber.trim().startsWith("+")
+      ? parsedPhoneNumber.formatInternational()
+      : parsedPhoneNumber.formatNational();
+  }
+
+  if (
+    !phoneNumber.trim().startsWith("+") &&
+    (selectedCountry === "US" || selectedCountry === "CA")
+  ) {
+    return formatToUsPhoneInput(phoneNumber);
+  }
+
+  const digits = phoneNumber.replace(/\D/g, "").substring(0, 15);
+  return phoneNumber.trim().startsWith("+") ? `+${digits}` : digits;
+};
+
+export const getCountryFromPhoneInput = (
+  phoneNumber: string,
+  country: string | null = DEFAULT_PHONE_COUNTRY
+): CountryCode => {
+  const selectedCountry = getPhoneCountry(country);
+  if (!phoneNumber.trim().startsWith("+")) return selectedCountry;
+  const parsedPhoneNumber = parsePhoneNumberFromString(
+    phoneNumber,
+    selectedCountry
+  );
+  return parsedPhoneNumber?.country ?? selectedCountry;
+};
+
+export const getNationalPhoneNumber = (
+  phoneNumber: string,
+  country: string | null = DEFAULT_PHONE_COUNTRY
+): string => {
+  const parsedPhoneNumber = parsePhoneNumberFromString(
+    phoneNumber,
+    getPhoneCountry(country)
+  );
+  return parsedPhoneNumber?.nationalNumber ?? phoneNumber.replace(/\D/g, "");
+};
+
+export const getE164PhoneNumber = (
+  phoneNumber: string,
+  country: string | null = DEFAULT_PHONE_COUNTRY
+): string | null => {
+  const parsedPhoneNumber = parsePhoneNumberFromString(
+    phoneNumber,
+    getPhoneCountry(country)
+  );
+  return parsedPhoneNumber?.isValid() ? parsedPhoneNumber.number : null;
+};
+
+export const isValidInternationalPhoneNumber = (
+  phoneNumber: string,
+  country: string | null = DEFAULT_PHONE_COUNTRY
+): boolean => getE164PhoneNumber(phoneNumber, country) !== null;
+
+/**
+ * Text Us remains limited to +1 destinations because outbound SMS currently
+ * skips other calling codes. Keep its ten-digit behavior isolated from the
+ * international Tour and Email Us input.
+ */
+export const formatToUsPhoneInput = (phoneNumber: string): string => {
   const input = phoneNumber.replace(/\D/g, "").substring(0, 10);
   const areaCode = input.substring(0, 3);
   const middle = input.substring(3, 6);
   const last = input.substring(6, 10);
 
-  if (input.length > 5) {
-    return `(${areaCode}) ${middle}-${last}`;
-  }
-  if (input.length > 2) {
-    return `(${areaCode}) ${middle}`;
-  }
-  if (input.length > 0) {
-    return `(${areaCode}`;
-  }
+  if (input.length > 5) return `(${areaCode}) ${middle}-${last}`;
+  if (input.length > 2) return `(${areaCode}) ${middle}`;
+  if (input.length > 0) return `(${areaCode}`;
   return "";
 };
 

package/src/WebComponent/actions/international-phone-input.ts

@@ -0,0 +1,308 @@
+import { css, html, LitElement, PropertyValues, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { InputStyles } from "./InputStyles";
+import {
+  formatToPhoneInput,
+  getCountryFromPhoneInput,
+  getE164PhoneNumber,
+  getNationalPhoneNumber,
+  getPhoneCountry,
+  phoneCountryOptions,
+} from "./formatPhoneNumber";
+
+export type InternationalPhoneChangeDetail = {
+  country: string;
+  e164: string | null;
+  formattedValue: string;
+  isValid: boolean;
+};
+
+@customElement("international-phone-input")
+export class InternationalPhoneInput extends LitElement {
+  static styles = [
+    InputStyles,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+      }
+
+      .phone-input-container {
+        align-items: center;
+        background: #d9d9d9;
+        border: 1px solid #efefef;
+        border-radius: 100px;
+        box-sizing: border-box;
+        display: flex;
+        min-height: 44px;
+        overflow: hidden;
+        width: 100%;
+      }
+
+      .phone-input-container:focus-within {
+        border-color: #202020;
+      }
+
+      .phone-input-container--invalid {
+        border-color: #ff0000;
+      }
+
+      .country-select-wrapper {
+        align-items: center;
+        box-sizing: border-box;
+        cursor: pointer;
+        display: flex;
+        flex: 0 0 96px;
+        height: 42px;
+        justify-content: center;
+        position: relative;
+      }
+
+      .country-select-wrapper::after {
+        border-bottom: 1.5px solid #4b4b4b;
+        border-right: 1.5px solid #4b4b4b;
+        content: "";
+        height: 5px;
+        margin-left: 8px;
+        margin-top: -3px;
+        transform: rotate(45deg);
+        width: 5px;
+      }
+
+      .country-select-label {
+        color: #202020;
+        font-family: "Helvetica Neue", Arial;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+        white-space: nowrap;
+      }
+
+      select {
+        cursor: pointer;
+        inset: 0;
+        opacity: 0;
+        position: absolute;
+        width: 100%;
+      }
+
+      .phone-input-divider {
+        background: rgba(32, 32, 32, 0.18);
+        flex: 0 0 1px;
+        height: 22px;
+      }
+
+      .phone-input-container input.webchat-input {
+        background: transparent;
+        border: 0;
+        border-radius: 0;
+        box-sizing: border-box;
+        flex: 1;
+        min-width: 0;
+        padding: 10px 16px 10px 12px;
+        width: 100%;
+      }
+
+      .phone-input-container input.webchat-input:active,
+      .phone-input-container input.webchat-input:focus-within {
+        border: 0;
+      }
+
+      @media screen and (max-width: 767px) {
+        input {
+          font-size: 16px;
+        }
+
+        .country-select-wrapper {
+          flex-basis: 92px;
+        }
+      }
+    `,
+  ];
+
+  @property({ attribute: false })
+  country: string | null = null;
+
+  @property({ type: String })
+  value = "";
+
+  @property({ type: Boolean })
+  invalid = false;
+
+  @state()
+  private selectedCountry = "US";
+
+  protected willUpdate(changedProperties: PropertyValues<this>): void {
+    if (changedProperties.has("country")) {
+      this.selectedCountry = getPhoneCountry(this.country);
+    }
+  }
+
+  get e164(): string | null {
+    return getE164PhoneNumber(this.value, this.selectedCountry);
+  }
+
+  get isValid(): boolean {
+    return this.e164 !== null;
+  }
+
+  private dispatchPhoneChange(): void {
+    this.dispatchEvent(
+      new CustomEvent<InternationalPhoneChangeDetail>("phone-change", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          country: this.selectedCountry,
+          e164: this.e164,
+          formattedValue: this.value,
+          isValid: this.isValid,
+        },
+      })
+    );
+  }
+
+  private setFormattedInputValue(
+    input: HTMLInputElement,
+    rawValue: string,
+    country: string
+  ): void {
+    const selectionStart = input.selectionStart;
+    const digitsAfterCursor =
+      selectionStart === null
+        ? 0
+        : rawValue.slice(selectionStart).replace(/\D/g, "").length;
+    this.value = formatToPhoneInput(rawValue, country);
+    input.value = this.value;
+
+    let cursorPosition = selectionStart === 0 ? 0 : this.value.length;
+    let remainingDigits = digitsAfterCursor;
+    while (remainingDigits > 0 && cursorPosition > 0) {
+      cursorPosition -= 1;
+      if (/\d/.test(this.value[cursorPosition])) remainingDigits -= 1;
+    }
+    input.setSelectionRange(cursorPosition, cursorPosition);
+  }
+
+  private handleInput(event: Event): void {
+    const input = event.target as HTMLInputElement;
+    const inferredCountry = getCountryFromPhoneInput(
+      input.value,
+      this.selectedCountry
+    );
+    this.selectedCountry = inferredCountry;
+    this.setFormattedInputValue(input, input.value, inferredCountry);
+    this.dispatchPhoneChange();
+  }
+
+  private handleCountryChange(event: Event): void {
+    const previousCountry = this.selectedCountry;
+    this.selectedCountry = (event.target as HTMLSelectElement).value;
+    const nationalNumber = getNationalPhoneNumber(this.value, previousCountry);
+    this.value = formatToPhoneInput(nationalNumber, this.selectedCountry);
+    this.dispatchPhoneChange();
+  }
+
+  private handleKeydown(event: KeyboardEvent): void {
+    const input = event.target as HTMLInputElement;
+    if (
+      event.key !== "Backspace" ||
+      input.selectionStart === null ||
+      input.selectionEnd !== input.selectionStart ||
+      input.selectionStart === 0 ||
+      (input.selectionStart === 1 && input.value.startsWith("+")) ||
+      /\d/.test(input.value[input.selectionStart - 1])
+    ) {
+      return;
+    }
+
+    const digitsBeforeCursor = input.value
+      .slice(0, input.selectionStart)
+      .replace(/\D/g, "");
+    const digitsAfterCursor = input.value
+      .slice(input.selectionStart)
+      .replace(/\D/g, "");
+    const internationalPrefix = input.value.trimStart().startsWith("+")
+      ? "+"
+      : "";
+    const digitsBeforeUpdatedCursor = digitsBeforeCursor.slice(0, -1);
+    const updatedValue = `${internationalPrefix}${digitsBeforeUpdatedCursor}${digitsAfterCursor}`;
+    const updatedCursorPosition =
+      internationalPrefix.length + digitsBeforeUpdatedCursor.length;
+    const inferredCountry = getCountryFromPhoneInput(
+      updatedValue,
+      this.selectedCountry
+    );
+    event.preventDefault();
+    input.setSelectionRange(updatedCursorPosition, updatedCursorPosition);
+    this.selectedCountry = inferredCountry;
+    this.setFormattedInputValue(input, updatedValue, inferredCountry);
+    this.dispatchPhoneChange();
+  }
+
+  private handleBlur(): void {
+    this.dispatchEvent(
+      new Event("phone-blur", { bubbles: true, composed: true })
+    );
+  }
+
+  private get selectedCountryLabel(): string {
+    return (
+      phoneCountryOptions.find(
+        (option) => option.value === this.selectedCountry
+      )?.compactLabel ?? this.selectedCountry
+    );
+  }
+
+  render(): TemplateResult {
+    return html`
+      <div
+        class=${classMap({
+          "phone-input-container": true,
+          "phone-input-container--invalid": this.invalid,
+        })}
+      >
+        <div class="country-select-wrapper">
+          <span class="country-select-label" aria-hidden="true"
+            >${this.selectedCountryLabel}</span
+          >
+          <select
+            aria-label="Country calling code"
+            .value=${this.selectedCountry}
+            @change=${this.handleCountryChange}
+          >
+            ${phoneCountryOptions.map(
+              (option) =>
+                html`<option
+                  value=${option.value}
+                  ?selected=${option.value === this.selectedCountry}
+                >
+                  ${option.label}
+                </option>`
+            )}
+          </select>
+        </div>
+        <span class="phone-input-divider" aria-hidden="true"></span>
+        <input
+          class="webchat-input"
+          type="tel"
+          inputmode="tel"
+          placeholder="Phone"
+          name="phone"
+          autocomplete="tel-national"
+          maxlength="30"
+          .value=${this.value}
+          @keydown=${this.handleKeydown}
+          @input=${this.handleInput}
+          @blur=${this.handleBlur}
+        />
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "international-phone-input": InternationalPhoneInput;
+  }
+}

package/src/formatPhoneNumber.test.ts

@@ -0,0 +1,91 @@
+import { expect } from "@esm-bundle/chai";
+import {
+  formatPhoneNumber,
+  formatToPhoneInput,
+  getCountryFromPhoneInput,
+  formatToUsPhoneInput,
+  getE164PhoneNumber,
+  getPhoneCountry,
+  isValidInternationalPhoneNumber,
+  phoneCountryOptions,
+} from "./WebComponent/actions/formatPhoneNumber";
+
+describe("international phone numbers", () => {
+  it("preserves and formats a UK E.164 number instead of truncating it", () => {
+    expect(formatToPhoneInput("+44 20 7946 0958")).to.equal("+44 20 7946 0958");
+  });
+
+  it("keeps existing US formatting and E.164 output", () => {
+    expect(formatToPhoneInput("2025550123", "US")).to.equal("(202) 555-0123");
+    expect(getE164PhoneNumber("(202) 555-0123", "US")).to.equal("+12025550123");
+  });
+
+  it("normalizes national and international UK input", () => {
+    expect(getE164PhoneNumber("07400 123456", "GB")).to.equal("+447400123456");
+    expect(getE164PhoneNumber("+44 7400 123456", "US")).to.equal(
+      "+447400123456"
+    );
+  });
+
+  it("handles shared calling codes and significant leading zeroes", () => {
+    expect(getE164PhoneNumber("416 555 0123", "CA")).to.equal("+14165550123");
+    expect(getE164PhoneNumber("02 1234 5678", "IT")).to.equal("+390212345678");
+    expect(getCountryFromPhoneInput("2025550123", "CA")).to.equal("CA");
+  });
+
+  it("normalizes representative national numbers across regions", () => {
+    const samples = [
+      ["US", "2025550123", "+12025550123"],
+      ["CA", "4165550123", "+14165550123"],
+      ["MX", "5512345678", "+525512345678"],
+      ["GB", "07400123456", "+447400123456"],
+      ["IT", "0212345678", "+390212345678"],
+      ["AU", "0412345678", "+61412345678"],
+      ["DE", "030123456", "+4930123456"],
+      ["IN", "9876543210", "+919876543210"],
+      ["JP", "09012345678", "+819012345678"],
+      ["BR", "11912345678", "+5511912345678"],
+      ["ZA", "0821234567", "+27821234567"],
+    ] as const;
+
+    for (const [country, nationalNumber, expectedE164] of samples) {
+      expect(getE164PhoneNumber(nationalNumber, country)).to.equal(
+        expectedE164,
+        country
+      );
+    }
+  });
+
+  it("rejects impossible numbers", () => {
+    expect(isValidInternationalPhoneNumber("123", "GB")).to.equal(false);
+    expect(getE164PhoneNumber("123", "GB")).to.equal(null);
+  });
+
+  it("offers every supported country with common regions pinned", () => {
+    expect(phoneCountryOptions.length).to.be.greaterThan(200);
+    expect(
+      phoneCountryOptions.slice(0, 4).map(({ value }) => value)
+    ).to.deep.equal(["US", "CA", "MX", "GB"]);
+    expect(phoneCountryOptions.find(({ value }) => value === "MX")).to.include({
+      compactLabel: "🇲🇽 +52",
+      label: "🇲🇽 +52 – Mexico",
+    });
+    expect(
+      new Set(phoneCountryOptions.map(({ value }) => value)).size
+    ).to.equal(phoneCountryOptions.length);
+  });
+
+  it("falls back to the US for missing or unsupported building countries", () => {
+    expect(getPhoneCountry(null)).to.equal("US");
+    expect(getPhoneCountry("unknown")).to.equal("US");
+  });
+
+  it("does not change the separate leasing-office display formatter", () => {
+    expect(formatPhoneNumber("+12025550123")).to.equal("+1 (202) 555-0123");
+  });
+
+  it("keeps Text Us limited to its existing ten-digit US format", () => {
+    expect(formatToUsPhoneInput("2025550123")).to.equal("(202) 555-0123");
+    expect(formatToUsPhoneInput("+44 20 7946 0958")).to.equal("(442) 079-4609");
+  });
+});