@meetelise/chat 1.25.0 → 1.25.2

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

@@ -1,405 +0,0 @@
-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

@@ -1,190 +0,0 @@
-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>`;
-  }
-}