@meetelise/chat 1.20.1 → 1.20.3

package/src/WebComponent/Launcher.ts

@@ -38,6 +38,10 @@ export class Launcher extends LitElement {
   chatCallUsHeader = "Call us";
   @property({ attribute: false })
   buildingId = 0;
+  @property({ attribute: true })
+  buildingSlug = "";
+  @property({ attribute: true })
+  orgSlug = "";
   @property({ type: Boolean })
   hasCallUsEnabled = false;
   @property({ type: Boolean })
@@ -266,6 +270,8 @@ export class Launcher extends LitElement {
         ${this.isEmailWindowOpen
           ? html`<div class="launcher__window-wrapper">
               <email-us-window
+                orgSlug="${this.orgSlug}"
+                buildingSlug="${this.buildingSlug}"
                 ${ref(this.emailUsWindowRef)}
                 .buildingId=${this.buildingId}
               >
@@ -275,6 +281,8 @@ export class Launcher extends LitElement {
         ${this.isTextUsWindowOpen
           ? html`<div class="launcher__window-wrapper">
               <text-us-window
+                orgSlug="${this.orgSlug}"
+                buildingSlug="${this.buildingSlug}"
                 ${ref(this.textUsWindowRef)}
                 .buildingId=${this.buildingId}
               ></text-us-window>
@@ -283,6 +291,8 @@ export class Launcher extends LitElement {
         ${this.isSSTWindowOpen
           ? html`<div class="launcher__window-wrapper">
               <tour-scheduler
+                orgSlug="${this.orgSlug}"
+                buildingSlug="${this.buildingSlug}"
                 .layoutOptions=${this.layoutOptions}
                 .tourTypeOptions=${this.tourTypeOptions}
                 buildingId=${this.buildingId}

package/src/WebComponent/Scheduler/time-picker.ts

@@ -1,11 +1,27 @@
 import { LitElement, html, TemplateResult, css } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
+import { DateWithTimeZoneOffset } from "../../getAvailabilities";
+
+export type TimePickerOption = {
+  displayTime: string;
+  dateWithTimeZoneOffset: DateWithTimeZoneOffset;
+};
+
+const getDateWithTimezoneOffset = (
+  options: TimePickerOption[],
+  displayTime: string
+) => {
+  return options.reduce(function (map: Record<string, TimePickerOption>, obj) {
+    map[obj.displayTime] = obj;
+    return map;
+  }, {})[displayTime];
+};
 
 @customElement("time-picker")
 export class TimePicker extends LitElement {
   @property({ attribute: false })
-  options: string[] = [];
+  options: TimePickerOption[] = [];
 
   @property({ type: Boolean })
   selectedDateExists = false;
@@ -14,10 +30,10 @@ export class TimePicker extends LitElement {
   horizontal = false;
 
   @state()
-  private selected?: string;
+  private selected?: TimePickerOption;
 
   @property({ attribute: false })
-  get selectedTime(): undefined | string {
+  get selectedTime(): undefined | TimePickerOption {
     return this.selected;
   }
 
@@ -100,8 +116,12 @@ export class TimePicker extends LitElement {
             class=${this.horizontal ? "horizontal" : ""}
             @click="${(e: MouseEvent) => {
               const target = e.target as HTMLElement | undefined;
+
               if (target?.closest(".option:not(.selected)"))
-                this.selected = target.innerText;
+                this.selected = getDateWithTimezoneOffset(
+                  this.options,
+                  target.innerText
+                );
               this.dispatchEvent(
                 new Event("change", { bubbles: true, composed: true })
               );
@@ -114,8 +134,8 @@ export class TimePicker extends LitElement {
               ) {
                 e.preventDefault();
                 this.selected =
-                  target.innerText !== this.selected
-                    ? target.innerText
+                  target.innerText !== this.selected?.displayTime
+                    ? getDateWithTimezoneOffset(this.options, target.innerText)
                     : undefined;
                 this.dispatchEvent(
                   new Event("change", { bubbles: true, composed: true })
@@ -127,11 +147,11 @@ export class TimePicker extends LitElement {
               (option) =>
                 html`<div
                   class="option ${classMap({
-                    selected: this.selected === option,
+                    selected: this.selected?.displayTime === option.displayTime,
                   })}"
                   tabindex="0"
                 >
-                  <span>${option}</span>
+                  <span>${option.displayTime}</span>
                 </div>`
             )}
           </div>

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

@@ -34,7 +34,10 @@ export class TourScheduler extends LitElement {
   tourTypeOptions: LabeledOption[] = [];
   @property({ type: Number })
   buildingId = 0;
-  @property({ attribute: false })
+  @property({ attribute: true })
+  buildingSlug = "";
+  @property({ attribute: true })
+  orgSlug = "";
   onCloseClicked?: (e: MouseEvent) => void;
 
   @state()
@@ -313,7 +316,11 @@ export class TourScheduler extends LitElement {
     const url = `https://app.meetelise.com/platformApi/state/create/scheduleMe`;
     this.isSubmitting = true;
     const response = await axios.post(url, data, {
-      headers: { ["X-SecurityKey"]: "JRL8jV4VcSCwOSir5gWkpgNLfKghmhBG" },
+      headers: {
+        ["building-slug"]: this.buildingSlug,
+        ["X-SecurityKey"]: "JRL8jV4VcSCwOSir5gWkpgNLfKghmhBG",
+        ["org-slug"]: this.orgSlug,
+      },
     });
     if (response.status === 200) {
       this.isSubmitting = false;
@@ -825,9 +832,15 @@ export class TourScheduler extends LitElement {
             .options=${this.selectedDate
               ? this.availabilitiesGroupedByDay[
                   format(this.selectedDate, "y-MM-dd")
-                ]?.map((date) =>
-                  format(parseISO(`${date.datetime}${date.offset}`), "h:mmaaa")
-                )
+                ]?.map((date) => {
+                  return {
+                    dateWithTimeZoneOffset: date,
+                    displayTime: format(
+                      parseISO(`${date.datetime}${date.offset}`),
+                      "h:mmaaa"
+                    ),
+                  };
+                })
               : []}
             @change=${(e: Event) => {
               if (e.target instanceof TimePicker) {
@@ -837,9 +850,9 @@ export class TourScheduler extends LitElement {
                     format(new Date(this.selectedDate), "y-MM-dd")
                   ];
                 const index = e.target.selectedTime
-                  ? daysAvailabilities
-                      .map((date) => format(new Date(date.datetime), "h:mmaaa"))
-                      .indexOf(e.target.selectedTime)
+                  ? daysAvailabilities.indexOf(
+                      e.target.selectedTime.dateWithTimeZoneOffset
+                    )
                   : null;
                 this.selectedTime =
                   index !== null ? daysAvailabilities[index] : null;
@@ -981,10 +994,10 @@ export class TourScheduler extends LitElement {
   confirmationMessage(): TemplateResult {
     if (!this.selectedDate || !this.selectedTime) return html``;
     // format example: "November 9th, 2022 at 11:00am"
-    const readableDateAndTime = `${format(
-      new Date(this.selectedDate),
-      "MMMM do, y"
-    )} at ${format(new Date(this.selectedTime.datetime), "h:mmaaa")}`;
+    const readableDateAndTime = format(
+      parseISO(`${this.selectedTime.datetime}${this.selectedTime.offset}`),
+      "h:mmaaa"
+    );
     return html`
       <div id="confirmationMessage">
         <svg

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

@@ -88,6 +88,10 @@ export class EmailUsWindow extends LitElement {
 
   @property({ attribute: false })
   buildingId = 0;
+  @property({ attribute: true })
+  buildingSlug = "";
+  @property({ attribute: true })
+  orgSlug = "";
 
   phoneNumberInputRef: Ref<HTMLInputElement> = createRef();
 
@@ -220,7 +224,9 @@ export class EmailUsWindow extends LitElement {
         this.email,
         this.phoneNumber,
         this.message,
-        this.buildingId
+        this.buildingId,
+        this.orgSlug,
+        this.buildingSlug
       );
       this.hasSubmittedForm = true;
       this.isSubmitting = false;
@@ -403,7 +409,9 @@ const createEmail = async (
   email: string,
   rawPhoneNumber: string,
   message: string,
-  buildingId: number
+  buildingId: number,
+  orgSlug: string,
+  buildingSlug: string
 ) => {
   const formattedPhoneNumber =
     "+1" +
@@ -425,6 +433,12 @@ const createEmail = async (
   await axios.post(
     "https://app.meetelise.com/platformApi/state/create/emailMe",
     requestBody,
-    { headers: { ["X-SecurityKey"]: "JRL8jV4VcSCwOSir5gWkpgNLfKghmhBG" } }
+    {
+      headers: {
+        ["building-slug"]: buildingSlug,
+        ["org-slug"]: orgSlug,
+        ["X-SecurityKey"]: "JRL8jV4VcSCwOSir5gWkpgNLfKghmhBG",
+      },
+    }
   );
 };

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

@@ -55,6 +55,10 @@ export class TextUsWindow extends LitElement {
 
   @property({ attribute: false })
   buildingId = 0;
+  @property({ attribute: true })
+  buildingSlug = "";
+  @property({ attribute: true })
+  orgSlug = "";
 
   phoneNumberInputRef: Ref<HTMLInputElement> = createRef();
 
@@ -104,7 +108,12 @@ export class TextUsWindow extends LitElement {
     }
     try {
       this.isSubmitting = true;
-      await createTextWithUs(this.phoneNumber, this.buildingId);
+      await createTextWithUs(
+        this.phoneNumber,
+        this.buildingId,
+        this.orgSlug,
+        this.buildingSlug
+      );
       this.hasSubmittedForm = true;
       this.isSubmitting = false;
     } catch (e) {
@@ -203,7 +212,12 @@ export const installTextUsWindow = (): void => {
   }
 };
 
-const createTextWithUs = async (rawPhoneNumber: string, buildingId: number) => {
+const createTextWithUs = async (
+  rawPhoneNumber: string,
+  buildingId: number,
+  orgSlug: string,
+  buildingSlug: string
+) => {
   const formattedPhoneNumber =
     "+1" +
     rawPhoneNumber
@@ -220,6 +234,12 @@ const createTextWithUs = async (rawPhoneNumber: string, buildingId: number) => {
   await axios.post(
     "https://app.meetelise.com/platformApi/state/create/textMe",
     requestBody,
-    { headers: { ["X-SecurityKey"]: "JRL8jV4VcSCwOSir5gWkpgNLfKghmhBG" } }
+    {
+      headers: {
+        ["building-slug"]: buildingSlug,
+        ["org-slug"]: orgSlug,
+        ["X-SecurityKey"]: "JRL8jV4VcSCwOSir5gWkpgNLfKghmhBG",
+      },
+    }
   );
 };

package/src/WebComponent/me-chat.ts

@@ -292,6 +292,8 @@ export class MEChat extends LitElement {
               phoneNumber="${this.building?.phoneNumber ?? ""}"
               textColor="${this.theme.chatHeader.textColor}"
               backgroundColor="${this.theme.chatPaneBackgroundColor}"
+              orgSlug="${this.orgSlug}"
+              buildingSlug="${this.buildingSlug}"
               ?hidden=${this.hideLauncher}
               ?hasCallUsEnabled=${!this.building?.chatWidgets
                 ? true