@meetelise/chat 1.20.152 → 1.20.153

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meetelise/chat",
-  "version": "1.20.152",
+  "version": "1.20.153",
   "description": "",
   "main": "public/dist/index.js",
   "type": "module",

package/public/dist/index.js

@@ -239,17 +239,22 @@ var e={8005:function(e,t,n){var i,r=this&&this.__extends||(i=function(e,t){retur
       opacity: 30%;
     }
   `,Wt([ue({attribute:"month",type:String})],Qt.prototype,"defaultMonth",void 0),Wt([ue({attribute:"year",type:Number})],Qt.prototype,"defaultYear",void 0),Wt([ue({attribute:!1})],Qt.prototype,"availabilities",void 0),Wt([ue({attribute:!1})],Qt.prototype,"selectedDate",null),Wt([le()],Qt.prototype,"monthShown",null),Wt([le()],Qt.prototype,"yearShown",void 0),Qt=Wt([ae("date-picker")],Qt);const Vt=(e,t)=>{const n=[];for(let i=0;i<t.length;i+=e)n.push(t.slice(i,i+e));return n};var Kt=function(e,t,n,i){var r,o=arguments.length,a=o<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,n):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,n,i);else for(var s=e.length-1;s>=0;s--)(r=e[s])&&(a=(o<3?r(a):o>3?r(t,n,a):r(t,n))||a);return o>3&&a&&Object.defineProperty(t,n,a),a};const Xt=(e,t)=>e.reduce((function(e,t){return e[t.displayTime]=t,e}),{})[t];let Yt=class extends re{constructor(){super(...arguments),this.options=[],this.selectedDateExists=!1}get selectedTime(){return this.selected}render(){var e,t;return 1===(null===(e=this.options)||void 0===e?void 0:e.length)&&(this.selected=Xt(this.options,this.options[0].displayTime)),(null===(t=this.options)||void 0===t?void 0:t.length)?U`
-          <div
-            id="optionContainer"
-            @click="${e=>{const t=e.target;(null==t?void 0:t.closest(".option:not(.selected)"))&&(this.selected=Xt(this.options,t.innerText)),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}"
-            @keydown="${e=>{var t;const n=e.target;[" ","Enter"].includes(e.key)&&(null==n?void 0:n.closest(".option"))&&(e.preventDefault(),this.selected=n.innerText!==(null===(t=this.selected)||void 0===t?void 0:t.displayTime)?Xt(this.options,n.innerText):void 0,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}}"
-          >
-            ${this.options.map((e=>{var t;return U`<div
-                  class="option ${fe({selected:(null===(t=this.selected)||void 0===t?void 0:t.displayTime)===e.displayTime})}"
-                  tabindex="0"
-                >
-                  <span>${e.displayTime}</span>
-                </div>`}))}
+          <div>
+            <div
+              id="optionContainer"
+              @click="${e=>{const t=e.target;(null==t?void 0:t.closest(".option:not(.selected)"))&&(this.selected=Xt(this.options,t.innerText)),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}}"
+              @keydown="${e=>{var t;const n=e.target;[" ","Enter"].includes(e.key)&&(null==n?void 0:n.closest(".option"))&&(e.preventDefault(),this.selected=n.innerText!==(null===(t=this.selected)||void 0===t?void 0:t.displayTime)?Xt(this.options,n.innerText):void 0,this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0})))}}"
+            >
+              ${this.options.map((e=>{var t;return U`<div
+                    class="option ${fe({selected:(null===(t=this.selected)||void 0===t?void 0:t.displayTime)===e.displayTime})}"
+                    tabindex="0"
+                  >
+                    <span>${e.displayTime}</span>
+                  </div>`}))}
+            </div>
+            <p class="timezone-display-text">
+              *All times displayed in ${(()=>{const e=new Date,t=Intl.DateTimeFormat().resolvedOptions().timeZone,n=(e=>{const t=new Date(e.getFullYear(),0,1),n=new Date(e.getFullYear(),6,1),i=Math.max(t.getTimezoneOffset(),n.getTimezoneOffset());return e.getTimezoneOffset()<i})(e);switch(t){case"America/New_York":case"America/Indiana/Indianapolis":return n?"EDT":"EST";case"America/Chicago":case"America/Indiana/Knox":return n?"CDT":"CST";case"America/Denver":return n?"MDT":"MST";case"America/Los_Angeles":return n?"PDT":"PST";case"America/Anchorage":return n?"AKDT":"AKST";case"America/Honolulu":return"HST";case"America/Phoenix":return"MST";default:return"Unknown"}})()}
+            </p>
           </div>
         `:U` <div id="noAvailabilityText">
           ${this.selectedDateExists?U`<p>No available appointments for this day</p>`:U`<p>
@@ -265,6 +270,11 @@ var e={8005:function(e,t,n){var i,r=this&&this.__extends||(i=function(e,t){retur
       font-family: "Helvetica Neue", Arial;
     }
 
+    .timezone-display-text {
+      font-size: 11px;
+      opacity: 0.5;
+    }
+
     #optionContainer {
       display: flex;
       flex-wrap: wrap;
@@ -981,11 +991,13 @@ otherwise there's some empty space at the bottom of the button, which interferes
             .availabilities=${qn()(this.availabilitiesGroupedByDay,(e=>e.map((e=>new Date(e.offset)))))}
             @change=${e=>{this.tourType===ai.Self&&this.sgtUrl?window.open(this.sgtUrl,"_blank"):this.tourType===ai.Guided&&this.escortedToursLink?window.open(this.escortedToursLink,"_blank"):this.tourType===ai.Virtual&&this.virtualToursLink?window.open(this.virtualToursLink,"_blank"):e.target instanceof Qt&&(this.selectedDate=e.target.selectedDate)}}
           ></date-picker>
-          <time-picker
-            ?selecteddateexists=${!!this.selectedDate}
-            .options=${this.selectedDate?null===(e=this.availabilitiesGroupedByDay[Lt(this.selectedDate,"y-MM-dd")])||void 0===e?void 0:e.sort(((e,t)=>function(e,t){Ue(2,arguments);var n=qe(e),i=qe(t),r=n.getTime()-i.getTime();return r<0?-1:r>0?1:r}(yn(e.datetime),yn(t.datetime)))).map((e=>({dateWithTimeZoneOffset:e,displayTime:Lt(yn(`${e.datetime}${e.offset}`),"h:mmaaa")}))):[]}
-            @change=${e=>{if(e.target instanceof Yt){if(!this.selectedDate)return;const t=this.availabilitiesGroupedByDay[Lt(new Date(this.selectedDate),"y-MM-dd")],n=e.target.selectedTime?t.indexOf(e.target.selectedTime.dateWithTimeZoneOffset):null;this.selectedTime=null!==n?t[n]:null}}}
-          ></time-picker>
+          <div>
+            <time-picker
+              ?selecteddateexists=${!!this.selectedDate}
+              .options=${this.selectedDate?null===(e=this.availabilitiesGroupedByDay[Lt(this.selectedDate,"y-MM-dd")])||void 0===e?void 0:e.sort(((e,t)=>function(e,t){Ue(2,arguments);var n=qe(e),i=qe(t),r=n.getTime()-i.getTime();return r<0?-1:r>0?1:r}(yn(e.datetime),yn(t.datetime)))).map((e=>({dateWithTimeZoneOffset:e,displayTime:Lt(yn(`${e.datetime}${e.offset}`),"h:mmaaa")}))):[]}
+              @change=${e=>{if(e.target instanceof Yt){if(!this.selectedDate)return;const t=this.availabilitiesGroupedByDay[Lt(new Date(this.selectedDate),"y-MM-dd")],n=e.target.selectedTime?t.indexOf(e.target.selectedTime.dateWithTimeZoneOffset):null;this.selectedTime=null!==n?t[n]:null}}}
+            ></time-picker>
+          </div>
         </div>
       </div>`}closeButton(){return U`<button id="close-button" @click=${this.onCloseClicked}>
       <svg

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

@@ -2,6 +2,7 @@ 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";
+import { getTimezoneAbbreviation } from "../../getTimezoneString";
 
 export type TimePickerOption = {
   displayTime: string;
@@ -44,6 +45,11 @@ export class TimePicker extends LitElement {
       font-family: "Helvetica Neue", Arial;
     }
 
+    .timezone-display-text {
+      font-size: 11px;
+      opacity: 0.5;
+    }
+
     #optionContainer {
       display: flex;
       flex-wrap: wrap;
@@ -113,48 +119,57 @@ export class TimePicker extends LitElement {
     }
     return this.options?.length
       ? html`
-          <div
-            id="optionContainer"
-            @click="${(e: MouseEvent) => {
-              const target = e.target as HTMLElement | undefined;
-
-              if (target?.closest(".option:not(.selected)"))
-                this.selected = getDateWithTimezoneOffset(
-                  this.options,
-                  target.innerText
-                );
-              this.dispatchEvent(
-                new Event("change", { bubbles: true, composed: true })
-              );
-            }}"
-            @keydown="${(e: KeyboardEvent) => {
-              const target = e.target as HTMLElement | undefined;
-              if (
-                [" ", "Enter"].includes(e.key) &&
-                target?.closest(".option")
-              ) {
-                e.preventDefault();
-                this.selected =
-                  target.innerText !== this.selected?.displayTime
-                    ? getDateWithTimezoneOffset(this.options, target.innerText)
-                    : undefined;
+          <div>
+            <div
+              id="optionContainer"
+              @click="${(e: MouseEvent) => {
+                const target = e.target as HTMLElement | undefined;
+
+                if (target?.closest(".option:not(.selected)"))
+                  this.selected = getDateWithTimezoneOffset(
+                    this.options,
+                    target.innerText
+                  );
                 this.dispatchEvent(
                   new Event("change", { bubbles: true, composed: true })
                 );
-              }
-            }}"
-          >
-            ${this.options.map(
-              (option) =>
-                html`<div
-                  class="option ${classMap({
-                    selected: this.selected?.displayTime === option.displayTime,
-                  })}"
-                  tabindex="0"
-                >
-                  <span>${option.displayTime}</span>
-                </div>`
-            )}
+              }}"
+              @keydown="${(e: KeyboardEvent) => {
+                const target = e.target as HTMLElement | undefined;
+                if (
+                  [" ", "Enter"].includes(e.key) &&
+                  target?.closest(".option")
+                ) {
+                  e.preventDefault();
+                  this.selected =
+                    target.innerText !== this.selected?.displayTime
+                      ? getDateWithTimezoneOffset(
+                          this.options,
+                          target.innerText
+                        )
+                      : undefined;
+                  this.dispatchEvent(
+                    new Event("change", { bubbles: true, composed: true })
+                  );
+                }
+              }}"
+            >
+              ${this.options.map(
+                (option) =>
+                  html`<div
+                    class="option ${classMap({
+                      selected:
+                        this.selected?.displayTime === option.displayTime,
+                    })}"
+                    tabindex="0"
+                  >
+                    <span>${option.displayTime}</span>
+                  </div>`
+              )}
+            </div>
+            <p class="timezone-display-text">
+              *All times displayed in ${getTimezoneAbbreviation()}
+            </p>
           </div>
         `
       : html` <div id="noAvailabilityText">

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

@@ -644,42 +644,44 @@ export class TourScheduler extends LitElement {
               }
             }}
           ></date-picker>
-          <time-picker
-            ?selecteddateexists=${!!this.selectedDate}
-            .options=${this.selectedDate
-              ? this.availabilitiesGroupedByDay[
-                  format(this.selectedDate, "y-MM-dd")
-                ]
-                  ?.sort((a, b) =>
-                    compareAsc(parseISO(a.datetime), parseISO(b.datetime))
-                  )
-                  .map((date) => {
-                    return {
-                      dateWithTimeZoneOffset: date,
-                      displayTime: format(
-                        parseISO(`${date.datetime}${date.offset}`),
-                        "h:mmaaa"
-                      ),
-                    };
-                  })
-              : []}
-            @change=${(e: Event) => {
-              if (e.target instanceof TimePicker) {
-                if (!this.selectedDate) return;
-                const daysAvailabilities =
-                  this.availabilitiesGroupedByDay[
-                    format(new Date(this.selectedDate), "y-MM-dd")
-                  ];
-                const index = e.target.selectedTime
-                  ? daysAvailabilities.indexOf(
-                      e.target.selectedTime.dateWithTimeZoneOffset
+          <div>
+            <time-picker
+              ?selecteddateexists=${!!this.selectedDate}
+              .options=${this.selectedDate
+                ? this.availabilitiesGroupedByDay[
+                    format(this.selectedDate, "y-MM-dd")
+                  ]
+                    ?.sort((a, b) =>
+                      compareAsc(parseISO(a.datetime), parseISO(b.datetime))
                     )
-                  : null;
-                this.selectedTime =
-                  index !== null ? daysAvailabilities[index] : null;
-              }
-            }}
-          ></time-picker>
+                    .map((date) => {
+                      return {
+                        dateWithTimeZoneOffset: date,
+                        displayTime: format(
+                          parseISO(`${date.datetime}${date.offset}`),
+                          "h:mmaaa"
+                        ),
+                      };
+                    })
+                : []}
+              @change=${(e: Event) => {
+                if (e.target instanceof TimePicker) {
+                  if (!this.selectedDate) return;
+                  const daysAvailabilities =
+                    this.availabilitiesGroupedByDay[
+                      format(new Date(this.selectedDate), "y-MM-dd")
+                    ];
+                  const index = e.target.selectedTime
+                    ? daysAvailabilities.indexOf(
+                        e.target.selectedTime.dateWithTimeZoneOffset
+                      )
+                    : null;
+                  this.selectedTime =
+                    index !== null ? daysAvailabilities[index] : null;
+                }
+              }}
+            ></time-picker>
+          </div>
         </div>
       </div>`;
   }

package/src/getTimezoneString.ts

@@ -0,0 +1,39 @@
+const isDaylightSavingTime = (date: Date): boolean => {
+  const jan = new Date(date.getFullYear(), 0, 1);
+  const jul = new Date(date.getFullYear(), 6, 1);
+  const stdTimezoneOffset = Math.max(
+    jan.getTimezoneOffset(),
+    jul.getTimezoneOffset()
+  );
+
+  return date.getTimezoneOffset() < stdTimezoneOffset;
+};
+
+export const getTimezoneAbbreviation = (): string => {
+  const date = new Date();
+  const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  const isDST = isDaylightSavingTime(date);
+
+  switch (timeZone) {
+    case "America/New_York":
+      return isDST ? "EDT" : "EST";
+    case "America/Chicago":
+      return isDST ? "CDT" : "CST";
+    case "America/Denver":
+      return isDST ? "MDT" : "MST";
+    case "America/Los_Angeles":
+      return isDST ? "PDT" : "PST";
+    case "America/Anchorage":
+      return isDST ? "AKDT" : "AKST";
+    case "America/Honolulu":
+      return "HST";
+    case "America/Phoenix":
+      return "MST";
+    case "America/Indiana/Indianapolis":
+      return isDST ? "EDT" : "EST";
+    case "America/Indiana/Knox":
+      return isDST ? "CDT" : "CST";
+    default:
+      return "Unknown";
+  }
+};