@meetelise/chat 1.30.0 → 1.30.2

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

@@ -0,0 +1,405 @@
+import { isSameMonth } from "date-fns";
+import format from "date-fns/format";
+import getDate from "date-fns/getDate";
+import getMonth from "date-fns/getMonth";
+import getYear from "date-fns/getYear";
+import { LitElement, html, TemplateResult, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import {
+  dayNames,
+  getDaysInMonth,
+  getDaysInPreviousMonth,
+  getMonthEndDay,
+  getMonthStartDay,
+  Month,
+  monthNames,
+} from "../utils";
+
+@customElement("date-picker")
+export class DatePicker extends LitElement {
+  /**
+   * Optional attribute to set the date picker's default month.
+   * The attribute will not be updated if the user changes the month shown.
+   */
+  @property({ attribute: "month", type: String })
+  defaultMonth?: Month;
+
+  /**
+   * Optional attribute to set the date picker's default year.
+   * The attribute will not be updated if the user changes the year shown.
+   */
+  @property({ attribute: "year", type: Number })
+  defaultYear?: number;
+
+  @property({ attribute: false })
+  availabilities?: {
+    [day: string]: Date[];
+  };
+
+  private _selectedDate?: Date = undefined;
+  set selectedDate(date: Date | undefined) {
+    const old = this._selectedDate;
+    this._selectedDate = date;
+    this.requestUpdate("selectedDate", old);
+    this.dispatchEvent(
+      new Event("change", {
+        composed: true,
+        bubbles: true,
+      })
+    );
+  }
+
+  @property({ attribute: false })
+  get selectedDate(): undefined | Date {
+    return this._selectedDate;
+  }
+
+  now = new Date();
+
+  private _monthShown =
+    this.defaultMonth && monthNames.indexOf(this.defaultMonth) !== -1
+      ? monthNames.indexOf(this.defaultMonth)
+      : this.now.getMonth();
+
+  // Make it easy to increment/decrement `this.monthShown` at year boundaries
+  // TODO: `willUpdate` is better: see https://lit.dev/docs/components/properties/ and https://lit.dev/docs/components/lifecycle/#willupdate
+  set monthShown(month: number) {
+    const oldMonthShown = this._monthShown;
+    if (month === 12) {
+      this._monthShown = 0;
+      this.yearShown++;
+    } else if (month === -1) {
+      this._monthShown = 11;
+      this.yearShown--;
+    } else {
+      this._monthShown = month;
+    }
+    this.requestUpdate("monthShown", oldMonthShown);
+  }
+
+  /** 0-indexed month, e.g. `0` for January */
+  @state()
+  get monthShown(): number {
+    return this._monthShown;
+  }
+
+  @state()
+  yearShown = this.defaultYear ?? this.now.getFullYear();
+
+  static styles = css`
+    :host {
+      box-sizing: border-box;
+      font-family: "Helvetica Neue", Arial;
+      color: #202020;
+      font-style: normal;
+    }
+
+    #calendar {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      user-select: none;
+      min-width: 206px;
+      width: 206px;
+      background: #e7e7e7;
+      border: 1px solid #ffffff;
+      border-radius: 10px;
+      padding: 15px 12px 15px;
+    }
+
+    #header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 13px;
+    }
+
+    h1 {
+      font-weight: 600;
+      font-size: 12px;
+      margin: 0;
+      margin-left: 0.7em;
+    }
+
+    #arrows {
+      width: 40.46px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    #rows {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 100%;
+    }
+
+    .dayNumber,
+    .dayInitial {
+      position: relative;
+      font-size: 12px;
+      text-align: center;
+      flex: 1 1 0px;
+      border: none;
+      background: none;
+      width: 24px;
+    }
+
+    .dayInitial {
+      font-weight: 400;
+    }
+
+    .dayNumber {
+      position: relative;
+      font-size: 12px;
+      text-align: center;
+      flex: 1 1 0px;
+      border: none;
+      background: none;
+      width: 24px;
+      -webkit-appearance: none;
+      appearance: none;
+      margin: 0;
+      padding: 0;
+      border-radius: 0;
+    }
+
+    .dayNumber.selected::after,
+    .dayNumber:not(.selected):hover::after {
+      content: "";
+      height: 23px;
+      aspect-ratio: 1;
+      border-radius: 50%;
+      background-color: #202020;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: -1;
+    }
+    .dayNumber.today:not(.selected)::after {
+      content: "";
+      height: 23px;
+      aspect-ratio: 1;
+      border: 1px solid #202020;
+      border-radius: 50%;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 1;
+    }
+    .dayNumber:not(.selected):hover::after {
+      background-color: lightgray;
+      z-index: -1;
+    }
+    .dayNumber.selected::after {
+      background-color: #202020;
+    }
+    .dayNumber.selected,
+    .dayNumber:not(.selected):not(.differentMonth):hover {
+      z-index: 1;
+    }
+    .dayNumber.selected {
+      color: white;
+    }
+    .dayNumber:is(.differentMonth, .past, .noAvailabilities) {
+      opacity: 30%;
+    }
+  `;
+
+  render(): TemplateResult {
+    const daysInMonth = getDaysInMonth(this.yearShown, this.monthShown);
+    const monthStartDay =
+      dayNames[getMonthStartDay(this.yearShown, this.monthShown)];
+    const daysInPreviousMonth = getDaysInPreviousMonth(
+      this.yearShown,
+      this.monthShown
+    );
+    const monthEndDay =
+      dayNames[getMonthEndDay(this.yearShown, this.monthShown)];
+    const extraDaysAtBeginningOfMonth = [];
+    if (monthStartDay !== "Sunday") {
+      const numberOfExtraDaysAtBeginningOfMonth =
+        dayNames.indexOf(monthStartDay);
+      for (let i = numberOfExtraDaysAtBeginningOfMonth; i > 0; i--) {
+        extraDaysAtBeginningOfMonth.push(daysInPreviousMonth + 1 - i);
+      }
+    }
+
+    const daysOfMonth = new Array(daysInMonth).fill(null).map((_, i) => i + 1);
+
+    const extraDaysAtEndOfMonth = [];
+    if (monthEndDay !== "Saturday") {
+      const numberOfExtraDaysAtEndOfMonth = [...dayNames]
+        .reverse()
+        .indexOf(monthEndDay);
+      for (let i = 1; i <= numberOfExtraDaysAtEndOfMonth; i++) {
+        extraDaysAtEndOfMonth.push(i);
+      }
+    }
+
+    const dayNums = [
+      ...extraDaysAtBeginningOfMonth,
+      ...daysOfMonth,
+      ...extraDaysAtEndOfMonth,
+    ];
+
+    const dayElements = dayNums.map((dayNumber, index) => {
+      const isPast =
+        this.yearShown < this.now.getFullYear() ||
+        (this.yearShown === this.now.getFullYear() &&
+          this.monthShown < this.now.getMonth()) ||
+        (this.yearShown === this.now.getFullYear() &&
+          this.monthShown === this.now.getMonth() &&
+          dayNumber < this.now.getDate());
+      const isDifferentMonth =
+        index < extraDaysAtBeginningOfMonth.length ||
+        index >= extraDaysAtBeginningOfMonth.length + daysOfMonth.length;
+      const isToday =
+        !isDifferentMonth &&
+        this.now.getMonth() === this.monthShown &&
+        this.now.getDate() === dayNumber;
+      const isSelected =
+        !!this.selectedDate &&
+        !isDifferentMonth &&
+        this.monthShown === getMonth(this.selectedDate) &&
+        this.yearShown === getYear(this.selectedDate) &&
+        dayNumber === getDate(this.selectedDate);
+      const dateString = format(
+        new Date(this.yearShown, this.monthShown, dayNumber),
+        "y-MM-dd"
+      );
+      const hasNoAvailabilities =
+        !this.availabilities?.[dateString] ||
+        this.availabilities?.[dateString]?.length === 0;
+      return html`<button
+        ?disabled=${isPast || hasNoAvailabilities || isDifferentMonth}
+        class="dayNumber ${classMap({
+          past: isPast,
+          differentMonth: isDifferentMonth,
+          today: isToday,
+          selected: isSelected,
+          noAvailabilities: hasNoAvailabilities,
+        })}"
+      >
+        ${dayNumber}
+      </button>`;
+    });
+    const rows = chunk(7, dayElements);
+
+    return html`
+      <div id="calendar">
+        <div id="header">
+          <h1>${monthNames[this.monthShown]} ${this.yearShown}</h1>
+          <div
+            id="arrows"
+            @click="${(e: MouseEvent) => {
+              if (
+                (e.target as HTMLElement)?.closest("#back") &&
+                !isSameMonth(
+                  this.now,
+                  new Date(this.yearShown, this.monthShown, 1)
+                )
+              ) {
+                this.monthShown--;
+              }
+              if ((e.target as HTMLElement)?.closest("#forward")) {
+                this.monthShown++;
+              }
+            }}"
+            @keydown="${(e: KeyboardEvent) => {
+              if (![" ", "Enter"].includes(e.key)) {
+                return;
+              }
+              if (
+                (e.target as HTMLElement)?.closest("#back") &&
+                !isSameMonth(
+                  this.now,
+                  new Date(this.yearShown, this.monthShown, 1)
+                )
+              ) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.monthShown--;
+              } else if ((e.target as HTMLElement)?.closest("#forward")) {
+                e.preventDefault();
+                e.stopPropagation();
+                this.monthShown++;
+              }
+            }}"
+          >
+            <svg
+              id="back"
+              tabindex="0"
+              width="9"
+              height="16"
+              viewBox="0 0 9 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8.67727 2.34317L7.26305 0.928955L0.192017 8.00001L7.26308 15.0711L8.6773 13.6569L3.02044 8L8.67727 2.34317Z"
+                fill="#83818E"
+              />
+            </svg>
+            <svg
+              id="forward"
+              tabindex="0"
+              width="9"
+              height="16"
+              viewBox="0 0 9 16"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0.157227 2.34315L1.57144 0.928932L8.64251 8L1.57144 15.0711L0.157227 13.6569L5.81408 8L0.157227 2.34315Z"
+                fill="#83818E"
+              />
+            </svg>
+          </div>
+        </div>
+
+        <div
+          id="rows"
+          @click="${(e: MouseEvent) => {
+            const target = e.target as HTMLElement | undefined;
+            if (target?.closest("button.dayNumber:not(.differentMonth)"))
+              this.selectedDate = new Date(
+                this.yearShown,
+                this.monthShown,
+                parseInt(target.innerText)
+              );
+          }}"
+        >
+          <div class="row">
+            <span class="dayInitial">S</span>
+            <span class="dayInitial">M</span>
+            <span class="dayInitial">T</span>
+            <span class="dayInitial">W</span>
+            <span class="dayInitial">T</span>
+            <span class="dayInitial">F</span>
+            <span class="dayInitial">S</span>
+          </div>
+          ${rows.map((row) => html`<div class="row">${row}</div>`)}
+        </div>
+      </div>
+    `;
+  }
+}
+
+const chunk = <T>(chunkLength: number, array: T[]) => {
+  const chunks = [];
+  for (let i = 0; i < array.length; i += chunkLength) {
+    chunks.push(array.slice(i, i + chunkLength));
+  }
+  return chunks;
+};

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

@@ -0,0 +1,190 @@
+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;
+  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: TimePickerOption[] = [];
+
+  @property({ type: Boolean })
+  selectedDateExists = false;
+
+  @state()
+  private selected?: TimePickerOption;
+
+  @property({ attribute: false })
+  get selectedTime(): undefined | TimePickerOption {
+    return this.selected;
+  }
+
+  static styles = css`
+    * {
+      box-sizing: border-box;
+    }
+
+    :host {
+      color: #202020;
+      font-family: "Helvetica Neue", Arial;
+    }
+
+    .timezone-display-text {
+      font-size: 12px;
+      color: #767676;
+    }
+    .select-tour-type-instructions {
+      color: #e60000;
+    }
+
+    #optionContainer {
+      display: flex;
+      flex-wrap: wrap;
+      max-width: 200px;
+      max-height: 320px;
+      overflow-y: auto;
+      gap: 8px;
+    }
+
+    .option {
+      position: relative;
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      height: 40px;
+      width: 80px;
+      padding: 11px 11px 11px 14px;
+      background: #e7e7e7;
+      border: 1px solid #ffffff;
+      border-radius: 10px;
+      font-style: normal;
+      font-size: 14px;
+      user-select: none;
+    }
+
+    .option.selected {
+      color: white;
+      background: #202020;
+      box-shadow: inset 0px 0px 0px 3px rgb(131 129 142);
+      border-radius: 10px;
+    }
+
+    #noAvailabilityText {
+      font-size: 12px;
+      margin-left: 20px;
+      line-height: 18px;
+      max-width: 170px;
+    }
+
+    #noAvailabilityText.horizontal {
+      margin-left: 0;
+    }
+
+    @media screen and (max-width: 1200px) {
+      #optionContainer {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        align-items: center;
+        max-width: none;
+        max-height: 120px;
+        overflow-x: auto;
+        gap: 8px;
+
+        width: 100%;
+      }
+    }
+  `;
+
+  render(): TemplateResult {
+    if (this.options.length === 1 && !this.selected) {
+      this.selected = getDateWithTimezoneOffset(
+        this.options,
+        this.options[0].displayTime
+      );
+      this.dispatchEvent(
+        new Event("change", { bubbles: true, composed: true })
+      );
+    }
+    return this.options?.length
+      ? html`
+          <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 })
+                );
+              }}"
+              @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 are your browser's time zone
+              (${getTimezoneAbbreviation()}). Your email confirmation will
+              reflect the converted local time for the community.
+            </p>
+          </div>
+        `
+      : html` <div id="noAvailabilityText">
+          ${this.selectedDateExists
+            ? html`<p>No available appointments for this day</p>`
+            : html`<p class="select-tour-type-instructions">
+                Please select a tour type to see available dates/times!
+              </p>`}
+        </div>`;
+  }
+}