@meetelise/chat 1.12.1 → 1.12.4

package/src/WebComponent/Scheduler/tour-type-option.ts

@@ -18,8 +18,6 @@ export class TourTypeOption extends LitElement {
 
   static styles = [
     css`
-      @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
-
       .tour-type-option {
         height: 90px;
         width: 200px;
@@ -40,7 +38,6 @@ export class TourTypeOption extends LitElement {
         display: flex;
         align-items: center;
         justify-content: center;
-        /* TODO: may need to use grid, or something else, to get the icons/text to align */
         gap: 15px;
         width: 100%;
         position: absolute;

package/src/WebComponent/actions/ActionConfirmButton.ts

@@ -5,7 +5,6 @@ import { customElement, property } from "lit/decorators.js";
 export class ActionConfirmButton extends LitElement {
   static styles = [
     css`
-      @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
       .action-confirm-button {
         background: #1e1e1e;
         border: 2px solid #ffffff;

package/src/WebComponent/actions/CallUsWindow.ts

@@ -20,6 +20,11 @@ export class CallUsWindow extends LitElement {
         line-height: 24px;
       }
 
+      .call-us-window__call-us-text > a {
+        color: unset;
+        text-decoration: none;
+      }
+
       .call-us-window__office-hours-header {
         text-decoration: underline;
         font-size: 12px;
@@ -65,6 +70,21 @@ export class CallUsWindow extends LitElement {
     | { dayOfWeek: string; startTime: string; endTime: string }
   )[] = [];
 
+  getCallLink = (phoneNumber: string): TemplateResult => {
+    const rawNumber = (phoneNumber.match(/\d+/g) || []).join("");
+    const rawInternationalNumber =
+      rawNumber.length < 11 ? `1${rawNumber}` : rawNumber;
+    const formattedInternationalNumber = `+${
+      rawInternationalNumber[0]
+    }-${rawInternationalNumber.slice(1, 4)}-${rawInternationalNumber.slice(
+      4,
+      7
+    )}-${rawInternationalNumber.slice(7)}`;
+    return html`<a href="tel:${formattedInternationalNumber}"
+      >${phoneNumber}</a
+    >`;
+  };
+
   render = (): TemplateResult => {
     return html`
       <details-window
@@ -74,7 +94,9 @@ export class CallUsWindow extends LitElement {
       >
         <div class="call-us-window__content-wrapper">
           <div class="call-us-window__call-us-text">
-            Contact our leasing team at <br />${this.phoneNumber}
+            Contact our leasing team at <br />${this.getCallLink(
+              this.phoneNumber
+            )}
           </div>
           <div class="call-us-window__office-hours-wrapper">
             <div class="call-us-window__office-hours-header">Office hours</div>

package/src/WebComponent/actions/DetailsWindow.ts

@@ -6,7 +6,6 @@ import { isMobile } from "../../utils";
 @customElement("details-window")
 export class DetailsWindow extends LitElement {
   static styles = css`
-    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
     .details-window-wrapper {
       background: rgba(255, 255, 255, 0.75);
       box-shadow: 0px 0px 14px 5px rgba(0, 0, 0, 0.25);

package/src/WebComponent/actions/EmailUsWindow.ts

@@ -16,7 +16,6 @@ import axios from "axios";
 export class EmailUsWindow extends LitElement {
   static styles = [
     css`
-      @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
       .email-us__name-input {
         width: 134px;
         height: 49px;

package/src/WebComponent/actions/InputStyles.ts

@@ -1,7 +1,6 @@
 import { css } from "lit";
 
 export const InputStyles = css`
-  @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
   .webchat-input {
     border: 1px solid #83818e;
     outline: none;

package/src/WebComponent/actions/TextUsWindow.ts

@@ -16,7 +16,6 @@ import axios from "axios";
 export class TextUsWindow extends LitElement {
   static styles = [
     css`
-      @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
       .text-us-wrapper {
         font-family: "Poppins";
         color: #202020;

package/src/WebComponent/actions/formatPhoneNumber.ts

@@ -3,18 +3,18 @@
  */
 export const formatToPhone = (phoneNumber: string): string => {
   const input = phoneNumber.replace(/\D/g, "").substring(0, 10);
-  const zip = input.substring(0, 3);
+  const areaCode = input.substring(0, 3);
   const middle = input.substring(3, 6);
   const last = input.substring(6, 10);
 
-  if (input.length > 6) {
-    return `(${zip}) ${middle}-${last}`;
+  if (input.length > 5) {
+    return `(${areaCode}) ${middle}-${last}`;
   }
-  if (input.length > 3) {
-    return `(${zip}) ${middle}`;
+  if (input.length > 2) {
+    return `(${areaCode}) ${middle}`;
   }
   if (input.length > 0) {
-    return `(${zip}`;
+    return `(${areaCode}`;
   }
   return "";
 };
@@ -24,11 +24,22 @@ export const isNumericInput = (event: KeyboardEvent): boolean => {
   return (key >= 48 && key <= 57) || (key >= 96 && key <= 105);
 };
 
+export const isPrintableCharacter = (event: KeyboardEvent): boolean =>
+  event.key.length === 1;
+
+/** Returns true if any key is pressed whose only function when typing text would be as part of a keyboard shortcut.
+ * For example, `Shift` or `f` would not suffice, because these are used for typing text.
+ * But `Command` or `Control` would.
+ */
+export const shortcutKeyIsPressed = (event: KeyboardEvent): boolean =>
+  event.altKey || event.ctrlKey || event.metaKey;
+
 export const isModifierKey = (event: KeyboardEvent): boolean => {
   const key = event.keyCode;
-  // Allow left, up, right, down, Backspace, Tab, Enter, Delete, Ctrl/Command + A,C,V,X,Z, Shift, Home, End
+  // TODO: whitelisting specific keyboard shortcuts is brittle (e.g. this is missing Cmd + R to reload)
+  // Allow left, up, right, down, Backspace, Tab, Enter, Delete, Ctrl/Command + A,C,L,V,X,Z, Shift, Home, End
   return (
-    event.shiftKey === true ||
+    event.shiftKey ||
     key === 35 ||
     key === 36 || // Allow
     key === 8 ||
@@ -36,7 +47,12 @@ export const isModifierKey = (event: KeyboardEvent): boolean => {
     key === 13 ||
     key === 46 ||
     (key > 36 && key < 41) ||
-    ((event.ctrlKey === true || event.metaKey === true) &&
-      (key === 65 || key === 67 || key === 86 || key === 88 || key === 90))
+    ((event.ctrlKey || event.metaKey) &&
+      (key === 65 ||
+        key === 67 ||
+        key === 76 ||
+        key === 86 ||
+        key === 88 ||
+        key === 90))
   );
 };

package/src/WebComponent/inHouseLauncherStyles.ts

@@ -1,7 +1,6 @@
 import { css } from "lit";
 
-export const inHousLauncherStyles = css`
-  @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
+export const inHouseLauncherStyles = css`
   :host {
     --glowBarHeight: 11.2px;
     --enterAnimationDuration: 0.5s;

package/src/fetchBuildingInfo.ts

@@ -1,3 +1,8 @@
+export interface LabeledOption {
+  label: string;
+  value: string | number;
+}
+
 /**
  * The response from the API.
  */
@@ -15,6 +20,8 @@ export interface Building {
   conversationMaintenanceMode: boolean;
   orgId: number;
   phoneNumber: string;
+  layoutOptions: LabeledOption[];
+  tourTypeOptions: LabeledOption[];
 }
 
 /**

package/src/getAvailabilities.ts

@@ -69,3 +69,13 @@ export const getAvailabilitiesGroupedByDay = async (
     (startTime) => format(startTime, "yyyy-MM-dd")
   );
 };
+
+// TODO: if cache is empty, observe it and wait for it to be filled in.
+// TODO: alternative to this: cache the building id when getRawAvailabilities is called. Then I can call the normal methods.
+export const getAvailabilitiesGroupedByDayCached = async (
+  tourType: TourAvailabilityResponseRankOrderedSupportedTourTypesEnum
+): ReturnType<typeof getAvailabilitiesGroupedByDay> =>
+  getAvailabilitiesGroupedByDay(
+    Object.keys(availabilitiesCache).map(Number)[0],
+    tourType
+  );

package/src/getRegisteredPhoneNumbers.ts

@@ -0,0 +1,56 @@
+import axios from "axios";
+
+export interface ManagementSmsNumber {
+  id: number;
+  userId: number;
+  timeCreated: string;
+  active: number;
+  phoneNumber: string;
+  phoneNumberType: string;
+  description: string;
+  api: string;
+  buildingIds: number[];
+  source: string;
+  deleted: number;
+  buildingGroupId: number;
+  ivrRecordLink: number;
+  ivrFlowType: number;
+  numberToForwardTo: string | null;
+  customTimeout: number;
+  customOptionsRecording: string | null;
+  customOptionsUrl: string | null;
+  voiceMailRecipient: string | null;
+  callCenterNumber: string | null;
+  initialPauseInSeconds: number;
+  voiceUrl: string;
+  alternativeBuildingId: string | null;
+  timezone: string | null;
+  buildingId: number;
+  ivrFlowConfiguration: {
+    flowName: string;
+    callCenterNumber: string;
+    leasingOfficeNumber: string;
+    marketingSourceCallCenterNumber: string | null;
+    globalCallCenterNumber: string | null;
+    buildingIntroMp3Url: string | null;
+    buildingOptionsMp3Url: string | null;
+    textYouShortlyMp3Url: string | null;
+  };
+  v2Number: boolean;
+}
+
+const registeredPhoneNumbersCache: {
+  [buildingId: number]: ManagementSmsNumber[];
+} = {};
+
+export const getRegisteredPhoneNumbers = async (
+  buildingId: number
+): Promise<ManagementSmsNumber[]> => {
+  if (registeredPhoneNumbersCache[buildingId]) {
+    return registeredPhoneNumbersCache[buildingId];
+  }
+  const url = `http://ivr.internal-meetelise.com/sms_management_numbers/webchat/building/${buildingId}/numbers`;
+  const result = await axios.get<ManagementSmsNumber[]>(url);
+  registeredPhoneNumbersCache[buildingId] = result.data;
+  return result.data;
+};