@meetelise/chat 1.51.0 → 1.51.1

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");
+  });
+});

package/src/internationalPhoneInput.test.ts

@@ -0,0 +1,253 @@
+import { expect } from "@esm-bundle/chai";
+import "../public/dist/index";
+import type {
+  InternationalPhoneChangeDetail,
+  InternationalPhoneInput,
+} from "./WebComponent/actions/international-phone-input";
+import type { EmailUsWindow } from "./WebComponent/actions/email-us-window";
+import type { CallUsWindow } from "./WebComponent/actions/call-us-window";
+
+describe("international-phone-input", () => {
+  let phoneInput: InternationalPhoneInput;
+
+  beforeEach(async () => {
+    if (!customElements.get("international-phone-input")) {
+      throw new Error("Expected international-phone-input to be registered");
+    }
+    phoneInput = document.createElement(
+      "international-phone-input"
+    ) as InternationalPhoneInput;
+    phoneInput.country = "US";
+    document.body.appendChild(phoneInput);
+    await phoneInput.updateComplete;
+  });
+
+  afterEach(() => {
+    phoneInput.remove();
+  });
+
+  it("infers the country and E.164 value when an international number is pasted", async () => {
+    let detail: InternationalPhoneChangeDetail | null = null;
+    phoneInput.addEventListener("phone-change", (event) => {
+      detail = (event as CustomEvent<InternationalPhoneChangeDetail>).detail;
+    });
+    const input = phoneInput.shadowRoot?.querySelector("input");
+    if (!input) throw new Error("Expected phone input");
+
+    input.value = "+44 7400 123456";
+    input.setSelectionRange(input.value.length, input.value.length);
+    input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    await phoneInput.updateComplete;
+
+    expect(phoneInput.e164).to.equal("+447400123456");
+    expect(phoneInput.isValid).to.equal(true);
+    expect(
+      phoneInput.shadowRoot?.querySelector<HTMLSelectElement>("select")?.value
+    ).to.equal("GB");
+    expect(detail).to.deep.include({
+      country: "GB",
+      e164: "+447400123456",
+      isValid: true,
+    });
+  });
+
+  it("uses the building country for national input", async () => {
+    phoneInput.country = "GB";
+    await phoneInput.updateComplete;
+    expect(
+      phoneInput.shadowRoot?.querySelector<HTMLSelectElement>("select")?.value
+    ).to.equal("GB");
+    const input = phoneInput.shadowRoot?.querySelector("input");
+    if (!input) throw new Error("Expected phone input");
+
+    input.value = "07400123456";
+    input.setSelectionRange(input.value.length, input.value.length);
+    input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    await phoneInput.updateComplete;
+
+    expect(phoneInput.value).to.equal("07400 123456");
+    expect(phoneInput.e164).to.equal("+447400123456");
+  });
+
+  it("displays a non-US building country on the first render", async () => {
+    phoneInput.remove();
+    phoneInput = document.createElement(
+      "international-phone-input"
+    ) as InternationalPhoneInput;
+    phoneInput.country = "GB";
+    document.body.appendChild(phoneInput);
+    await phoneInput.updateComplete;
+
+    expect(
+      phoneInput.shadowRoot?.querySelector<HTMLSelectElement>("select")?.value
+    ).to.equal("GB");
+  });
+
+  it("retains existing US behavior by default", async () => {
+    const input = phoneInput.shadowRoot?.querySelector("input");
+    if (!input) throw new Error("Expected phone input");
+
+    input.value = "2025550123";
+    input.setSelectionRange(input.value.length, input.value.length);
+    input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    await phoneInput.updateComplete;
+
+    expect(phoneInput.value).to.equal("(202) 555-0123");
+    expect(phoneInput.e164).to.equal("+12025550123");
+  });
+
+  it("uses a compact selected-country label while keeping full menu labels", async () => {
+    const select = phoneInput.shadowRoot?.querySelector("select");
+    if (!select) throw new Error("Expected country select");
+    select.value = "MX";
+    select.dispatchEvent(new Event("change", { bubbles: true }));
+    await phoneInput.updateComplete;
+
+    expect(
+      phoneInput.shadowRoot?.querySelector(".country-select-label")?.textContent
+    ).to.contain("🇲🇽 +52");
+    expect(select.selectedOptions[0].textContent).to.contain("🇲🇽 +52 – Mexico");
+  });
+
+  it("deletes the preceding digit when backspacing over formatting", async () => {
+    const input = phoneInput.shadowRoot?.querySelector("input");
+    if (!input) throw new Error("Expected phone input");
+    input.value = "2025550123";
+    input.setSelectionRange(input.value.length, input.value.length);
+    input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    await phoneInput.updateComplete;
+
+    input.setSelectionRange(5, 5);
+    input.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: "Backspace",
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+      })
+    );
+    await phoneInput.updateComplete;
+
+    expect(phoneInput.value).to.equal("(205) 550-123");
+    expect(input.selectionStart).to.equal(3);
+  });
+
+  it("keeps the caret at the start when input is reformatted", async () => {
+    const input = phoneInput.shadowRoot?.querySelector("input");
+    if (!input) throw new Error("Expected phone input");
+    input.value = "2025550123";
+    input.setSelectionRange(0, 0);
+
+    input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    await phoneInput.updateComplete;
+
+    expect(phoneInput.value).to.equal("(202) 555-0123");
+    expect(input.selectionStart).to.equal(0);
+  });
+
+  it("preserves an international prefix when backspacing over formatting", async () => {
+    const input = phoneInput.shadowRoot?.querySelector("input");
+    if (!input) throw new Error("Expected phone input");
+    input.value = "+44 7400 123456";
+    input.setSelectionRange(input.value.length, input.value.length);
+    input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    await phoneInput.updateComplete;
+
+    input.setSelectionRange(9, 9);
+    input.dispatchEvent(
+      new KeyboardEvent("keydown", {
+        key: "Backspace",
+        bubbles: true,
+        composed: true,
+        cancelable: true,
+      })
+    );
+    await phoneInput.updateComplete;
+
+    expect(phoneInput.value.startsWith("+")).to.equal(true);
+    expect(phoneInput.value.replace(/\D/g, "")).to.equal("44740123456");
+    expect(input.selectionStart).to.equal(6);
+  });
+
+  it("allows backspace to remove the leading international prefix", async () => {
+    const input = phoneInput.shadowRoot?.querySelector("input");
+    if (!input) throw new Error("Expected phone input");
+    input.value = "+";
+    input.setSelectionRange(1, 1);
+    const keydown = new KeyboardEvent("keydown", {
+      key: "Backspace",
+      bubbles: true,
+      composed: true,
+      cancelable: true,
+    });
+
+    input.dispatchEvent(keydown);
+
+    expect(keydown.defaultPrevented).to.equal(false);
+    input.value = "";
+    input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    await phoneInput.updateComplete;
+    expect(phoneInput.value).to.equal("");
+    expect(phoneInput.e164).to.equal(null);
+  });
+});
+
+it("normalizes international numbers through the Email Us form", async () => {
+  const emailUs = document.createElement("email-us-window") as EmailUsWindow;
+  emailUs.country = "GB";
+  document.body.appendChild(emailUs);
+  await emailUs.updateComplete;
+
+  const phoneInput = emailUs.shadowRoot?.querySelector<InternationalPhoneInput>(
+    "international-phone-input"
+  );
+  expect(phoneInput).to.exist;
+  expect(phoneInput?.country).to.equal("GB");
+  const input = phoneInput?.shadowRoot?.querySelector("input");
+  if (!phoneInput || !input) throw new Error("Expected phone input");
+
+  input.value = "07400123456";
+  input.setSelectionRange(input.value.length, input.value.length);
+  input.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+  await phoneInput.updateComplete;
+  await emailUs.updateComplete;
+
+  expect(emailUs.phoneNumber).to.equal("07400 123456");
+  expect(emailUs.phoneNumberE164).to.equal("+447400123456");
+  expect(emailUs.phoneCountry).to.equal("GB");
+
+  emailUs.firstName = "Local";
+  emailUs.lastName = "Test";
+  emailUs.email = "local.test@example.com";
+  emailUs.validateFormFields();
+  expect(emailUs.hasPhoneNumberError).to.equal(false);
+
+  emailUs.remove();
+});
+
+it("keeps Text Us on the existing US-only phone input", async () => {
+  const callUs = document.createElement("call-us-window") as CallUsWindow;
+  callUs.hasTextUsEnabled = "true";
+  document.body.appendChild(callUs);
+  await callUs.updateComplete;
+
+  expect(callUs.shadowRoot?.querySelector("international-phone-input")).to.not
+    .exist;
+  expect(
+    callUs.shadowRoot?.querySelector('[aria-label="Country calling code"]')
+  ).to.not.exist;
+
+  const input = callUs.shadowRoot?.querySelector<HTMLInputElement>(
+    'input[placeholder="Enter phone"]'
+  );
+  if (!input) throw new Error("Expected Text Us phone input");
+  input.value = "2025550123";
+  input.dispatchEvent(new KeyboardEvent("keyup", { bubbles: true }));
+  await callUs.updateComplete;
+
+  expect(callUs.phoneNumberToText).to.equal("(202) 555-0123");
+  expect(input.value).to.equal("(202) 555-0123");
+  expect(input.maxLength).to.equal(14);
+
+  callUs.remove();
+});