@meetelise/chat 1.51.0 → 1.51.1

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";
@@ -155,6 +147,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 +217,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 +628,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 +652,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 +684,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 +727,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 +741,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 +1281,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 +1625,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 +1680,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 +1790,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,

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