@meetelise/chat 1.9.1 → 1.12.0

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

@@ -0,0 +1,383 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import "./tour-type-option.ts";
+import "./date-picker.ts";
+import "./time-picker.ts";
+import "./me-select.ts";
+
+@customElement("tour-scheduler")
+export class TourScheduler extends LitElement {
+  @property({ attribute: false })
+  availability?: Availability; // TODO: shouldn't be optional?
+
+  @property({ attribute: false })
+  onSchedule?: (tour: Tour) => void;
+
+  // state: type, date, time, name, email, phone, unit type, layout type
+  @state()
+  private tourType = TourType.Guided;
+
+  static styles = css`
+    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
+
+    * {
+      box-sizing: border-box;
+    }
+
+    .tour-scheduler {
+      position: fixed;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 1018px;
+      height: 573px;
+      background: #ffffff;
+      box-shadow: 0px 16px 18px 10px rgba(21, 21, 21, 0.4);
+      border-radius: 10px;
+      font-family: "Poppins";
+      color: #202020;
+      padding: 0 27px 0 25px;
+
+      /* grid stuff */
+      display: grid;
+      grid-template-columns: 225px 400px 330px;
+      grid-template-rows: 44px 54px 32px 195px 152px 1px;
+    }
+
+    h1,
+    h2 {
+      margin: 0;
+    }
+
+    .tour-scheduler > :is(h1, h2) {
+      align-self: end;
+    }
+
+    h1 {
+      font-size: 14px;
+      font-weight: 700;
+    }
+
+    h1#scheduleATour {
+      grid-row: 1 / 2;
+      grid-column: 1;
+      align-self: end;
+    }
+
+    button#closeButton {
+      grid-row: 1 / 2;
+      grid-column: -1;
+      height: max-content;
+      aspect-ratio: 1;
+      background: none;
+      border: none;
+      align-self: end;
+    }
+
+    #tourTypeMenu {
+      grid-row: 4 / 5;
+      grid-column: 1;
+      align-self: start;
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+    }
+
+    h2 {
+      font-weight: 600;
+      font-size: 14px;
+      grid-row: label-row;
+    }
+
+    h2#tourType {
+      grid-column: 1;
+      grid-row: 2;
+    }
+
+    h2#dateAndTime {
+      grid-column: 2;
+      grid-row: 2;
+    }
+
+    h2#yourInformation {
+      grid-column: 3;
+      grid-row: 2;
+    }
+
+    #datePicker {
+      display: flex;
+    }
+
+    #dateAndTimeMenu {
+      grid-row: 4 / 5;
+      grid-column: 2;
+      align-self: start;
+      display: flex;
+      flex-direction: column;
+    }
+
+    #yourInformationMenu {
+      grid-row: 4 / 5;
+      grid-column: 3;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    #yourInformationMenu > input {
+      width: 305px;
+      height: 49px;
+      border: 1px solid #83818e;
+      padding: 13px 11px 14px 11px;
+    }
+
+    #yourInformationMenu > input::placeholder {
+      font-family: "Poppins";
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      color: #202020;
+    }
+
+    #unitChoiceMenu {
+      grid-row: 5 / 6;
+      grid-column: 3;
+      align-self: start;
+      display: flex;
+      flex-direction: column;
+    }
+
+    h2#unitChoice {
+      margin-bottom: 7px;
+    }
+
+    #unitOptions {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    hr {
+      grid-row: 6;
+      grid-column: 1 / 5;
+      /* remove side margins because of this
+       * (https://stackoverflow.com/questions/34365271/hr-inside-container-with-display-flex-become-corrupted)
+       * and top/bottom margins to position the line exactly at the gridline
+       */
+      margin: 0;
+    }
+
+    p {
+      font-weight: 400;
+      font-size: 12px;
+      grid-row: 7;
+      grid-column: 1 / 3;
+      align-self: start;
+      margin: 0;
+      padding-top: 32px;
+    }
+
+    /* TODO: button styling depends on disabled which depends on whether form is ready for submission */
+    button#schedule {
+      width: 145px;
+      height: 50px;
+      background: #e7e7e7;
+      border: 1px solid #ffffff;
+      border-radius: 10px;
+      grid-row: 7;
+      grid-column: 3;
+      justify-self: end;
+      align-self: start;
+      margin-top: 18px;
+      font-family: "Poppins";
+      font-weight: 700;
+      font-size: 14px;
+      color: #ffffff;
+    }
+  `;
+
+  render(): TemplateResult {
+    return html`
+      <div class="tour-scheduler">
+        <h1 id="scheduleATour">Schedule a tour</h1>
+        <button id="closeButton">
+          <svg
+            width="19"
+            height="19"
+            viewBox="0 0 19 19"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <line
+              x1="0.986863"
+              y1="18.2746"
+              x2="18.2929"
+              y2="0.968593"
+              stroke="#202020"
+              stroke-width="2"
+            />
+            <path
+              d="M1.01394 0.999997L18.0103 18.0243"
+              stroke="#202020"
+              stroke-width="2"
+            />
+          </svg>
+        </button>
+
+        <h2 id="tourType">Tour Type</h2>
+        <div id="tourTypeMenu">
+          <tour-type-option
+            tourtype="guided"
+            heading="Guided tour"
+            subtitle="with an agent"
+            @click="${() => {
+              this.tourType = TourType.Guided;
+            }}"
+            @keydown="${(e: KeyboardEvent) => {
+              if ([" ", "Enter"].includes(e.key)) {
+                e.preventDefault();
+                this.tourType = TourType.Guided;
+              }
+            }}"
+            ?selected="${this.tourType === TourType.Guided}"
+          >
+            <svg
+              slot="icon"
+              width="31"
+              height="31"
+              viewBox="0 0 31 31"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0.833252 30.1666C0.833252 27.1608 2.0273 24.2782 4.15271 22.1527C6.27812 20.0273 9.1608 18.8333 12.1666 18.8333C15.1724 18.8333 18.0551 20.0273 20.1805 22.1527C22.3059 24.2782 23.4999 27.1608 23.4999 30.1666H0.833252ZM12.1666 17.4166C7.47034 17.4166 3.66659 13.6129 3.66659 8.91663C3.66659 4.22038 7.47034 0.416626 12.1666 0.416626C16.8628 0.416626 20.6666 4.22038 20.6666 8.91663C20.6666 13.6129 16.8628 17.4166 12.1666 17.4166ZM22.5975 20.58C24.7645 21.137 26.7006 22.3634 28.13 24.0846C29.5595 25.8059 30.4096 27.9342 30.5592 30.1666H26.3333C26.3333 26.4691 24.9166 23.1031 22.5975 20.58ZM19.7316 17.3557C20.9187 16.2939 21.8681 14.9932 22.5175 13.5388C23.167 12.0845 23.5017 10.5094 23.4999 8.91663C23.5029 6.9807 23.0078 5.07657 22.062 3.38738C23.6666 3.70979 25.11 4.5779 26.1469 5.84415C27.1838 7.1104 27.7502 8.69666 27.7499 10.3333C27.7503 11.3426 27.5349 12.3404 27.1182 13.2597C26.7016 14.179 26.0932 14.9986 25.3339 15.6636C24.5746 16.3285 23.6819 16.8236 22.7157 17.1154C21.7495 17.4072 20.7321 17.4892 19.7316 17.3557V17.3557Z"
+                fill="${this.tourType === TourType.Guided
+                  ? "#ffffff"
+                  : "#202020"}"
+              />
+            </svg>
+          </tour-type-option>
+          <tour-type-option
+            tourtype="self"
+            heading="Take a tour"
+            subtitle="on your own"
+            @click="${() => {
+              this.tourType = TourType.Self;
+            }}"
+            @keydown="${(e: KeyboardEvent) => {
+              if ([" ", "Enter"].includes(e.key)) {
+                e.preventDefault();
+                this.tourType = TourType.Self;
+              }
+            }}"
+            ?selected="${this.tourType === TourType.Self}"
+          >
+            <svg
+              slot="icon"
+              width="28"
+              height="31"
+              viewBox="0 0 28 31"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M14.8334 19.1903V30.1667H0.666687C0.666248 28.4367 1.06183 26.7297 1.82311 25.1763C2.58439 23.6229 3.69118 22.2644 5.05866 21.2049C6.42614 20.1453 8.01802 19.4129 9.71232 19.0637C11.4066 18.7145 13.1584 18.7578 14.8334 19.1903ZM12 17.4167C7.30377 17.4167 3.50002 13.6129 3.50002 8.91666C3.50002 4.22041 7.30377 0.416656 12 0.416656C16.6963 0.416656 20.5 4.22041 20.5 8.91666C20.5 13.6129 16.6963 17.4167 12 17.4167ZM20.5 23.0833V18.125L27.5834 24.5L20.5 30.875V25.9167H16.25V23.0833H20.5Z"
+                fill="${this.tourType === TourType.Self
+                  ? "#ffffff"
+                  : "#202020"}"
+              />
+            </svg>
+          </tour-type-option>
+          <tour-type-option
+            tourtype="guided"
+            heading="Virtual tour"
+            subtitle="over video"
+            @click="${() => {
+              this.tourType = TourType.Virtual;
+            }}"
+            @keydown="${(e: KeyboardEvent) => {
+              if ([" ", "Enter"].includes(e.key)) {
+                e.preventDefault();
+                this.tourType = TourType.Virtual;
+              }
+            }}"
+            ?selected="${this.tourType === TourType.Virtual}"
+          >
+            <svg
+              slot="icon"
+              width="26"
+              height="25"
+              viewBox="0 0 26 25"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.6 19.5V22.1L18.2 23.4V24.7H7.80004L7.79484 23.4052L10.4 22.1V19.5H1.28965C1.11894 19.4989 0.950113 19.4642 0.792841 19.3979C0.635568 19.3315 0.492943 19.2347 0.373141 19.1131C0.253339 18.9915 0.158715 18.8474 0.0946936 18.6892C0.0306718 18.5309 -0.00148955 18.3616 5.29696e-05 18.1909V1.3091C5.29696e-05 0.586299 0.591552 0 1.28965 0H24.7104C25.4228 0 26 0.583699 26 1.3091V18.1909C26 18.9137 25.4085 19.5 24.7104 19.5H15.6ZM2.60005 14.3V16.9H23.4V14.3H2.60005Z"
+                fill="${this.tourType === TourType.Virtual
+                  ? "#ffffff"
+                  : "#202020"}"
+              />
+            </svg>
+          </tour-type-option>
+        </div>
+
+        <h2 id="dateAndTime">Date and Time</h2>
+        <div id="dateAndTimeMenu">
+          <!-- TODO: pass currently selected date as attribute if any -->
+          <div id="datePicker">
+            <date-picker></date-picker>
+            <time-picker></time-picker>
+          </div>
+        </div>
+
+        <h2 id="yourInformation">Your information</h2>
+        <div id="yourInformationMenu">
+          <input type="text" placeholder="Name" />
+          <input type="email" placeholder="Email" />
+          <input type="tel" placeholder="Phone" />
+        </div>
+        <div id="unitChoiceMenu">
+          <h2 id="unitChoice">What would you like to view?</h2>
+          <div id="unitOptions">
+            <me-select
+              id="unitType"
+              placeholder="Select type"
+              .options="${["Studio", "1 Bedroom", "2 Bedroom", "3 Bedroom"]}"
+              defaultOption="Studio"
+              >Studio
+            </me-select>
+            <me-select
+              id="layout"
+              placeholder="Select layout"
+              .options="${["Standard layout", "Weird layout"]}"
+            >
+            </me-select>
+          </div>
+        </div>
+        <hr />
+        <p id="explanation">
+          We’ll send a confirmation and any follow-ups to your email address.
+        </p>
+        <button id="schedule">Schedule tour</button>
+      </div>
+    `;
+  }
+}
+
+// TODO: what should this look like? what date format? etc.
+interface Availability {
+  [date: string]: { time: Date }[];
+}
+
+export enum TourType {
+  Guided,
+  Self,
+  Virtual,
+}
+
+interface Tour {
+  start: Date;
+  type: TourType;
+  // TODO: enum? or leave as string for flexibility? or autogen from backend?
+  layout: string;
+}

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

@@ -0,0 +1,92 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { TourType } from "./tour-scheduler";
+
+@customElement("tour-type-option")
+export class TourTypeOption extends LitElement {
+  @property({ type: String })
+  tourtype = "";
+  @property({ type: String })
+  heading = "";
+  @property({ type: String })
+  subtitle = "";
+  @property({ type: Boolean })
+  selected = false;
+
+  @property({ attribute: false })
+  onClick?: (tourType: TourType) => void;
+
+  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;
+        background: #e7e7e7;
+        border: 1px solid #ffffff;
+        border-radius: 10px;
+        position: relative;
+        user-select: none;
+        box-sizing: border-box;
+      }
+
+      :host([selected]) .tour-type-option {
+        background: #202020;
+        border: 3px solid #83818e;
+      }
+
+      .content {
+        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;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .text {
+        display: flex;
+        flex-direction: column;
+        color: #202020;
+        font-family: "Poppins";
+      }
+
+      :host([selected]) .text {
+        color: #ffffff;
+      }
+
+      h1,
+      h2 {
+        font-size: 15px;
+        margin: 0;
+      }
+
+      h1 {
+        font-weight: 600;
+      }
+
+      h2 {
+        font-weight: 400;
+      }
+    `,
+  ];
+
+  render(): TemplateResult {
+    return html`
+      <div class="tour-type-option" tabindex="0">
+        <div class="content">
+          <slot name="icon"></slot>
+          <div class="text">
+            <h1>${this.heading}</h1>
+            <h2>${this.subtitle}</h2>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+}

package/src/WebComponent/actions/ActionConfirmButton.ts

@@ -0,0 +1,94 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+@customElement("action-confirm-button")
+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;
+        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+        border-radius: 10px;
+        color: #ffffff;
+        font-family: "Poppins";
+        font-style: normal;
+        font-weight: 700;
+        font-size: 14px;
+        line-height: 22px;
+        padding-left: 20px;
+        padding-right: 20px;
+        padding-top: 12px;
+        padding-bottom: 12px;
+        cursor: pointer;
+      }
+
+      .action-confirm-button:active {
+        transform: translateY(2px);
+        box-shadow: 0px 0px 0px rgba(36, 53, 141, 0.25);
+      }
+
+      .lds-ring {
+        display: inline-block;
+        position: relative;
+        width: 48px;
+        height: 48px;
+      }
+      .lds-ring div {
+        box-sizing: border-box;
+        display: block;
+        position: absolute;
+        width: 32px;
+        height: 32px;
+        margin: 8px;
+        border: 8px solid #fff;
+        border-radius: 50%;
+        animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+        border-color: #fff transparent transparent transparent;
+      }
+      .lds-ring div:nth-child(1) {
+        animation-delay: -0.45s;
+      }
+      .lds-ring div:nth-child(2) {
+        animation-delay: -0.3s;
+      }
+      .lds-ring div:nth-child(3) {
+        animation-delay: -0.15s;
+      }
+      @keyframes lds-ring {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+    `,
+  ];
+  @property()
+  onClick?: () => void;
+  @property()
+  text = "Submit";
+  @property({ attribute: false })
+  isLoading = false;
+
+  render = (): TemplateResult => {
+    return html`<button class="action-confirm-button" @click=${this.onClick}>
+      ${!this.isLoading
+        ? this.text
+        : html`<div class="lds-ring">
+            <div></div>
+            <div></div>
+            <div></div>
+            <div></div>
+          </div>`}
+    </button>`;
+  };
+}
+
+export const installActionConfirmButton = (): void => {
+  if (!window.customElements.get("action-confirm-button")) {
+    window.customElements.define("action-confirm-button", ActionConfirmButton);
+  }
+};

package/src/WebComponent/actions/CallUsWindow.ts

@@ -0,0 +1,110 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+import { getOfficeHourText } from "../OfficeHours";
+
+@customElement("call-us-window")
+export class CallUsWindow extends LitElement {
+  static styles = [
+    css`
+      .call-us-window__content-wrapper {
+        font-family: Poppins;
+        color: 11ee1e;
+      }
+
+      .call-us-window__call-us-text {
+        margin-top: 54px;
+        margin-bottom: 28px;
+        font-family: "Poppins";
+        font-size: 18px;
+        line-height: 24px;
+      }
+
+      .call-us-window__office-hours-header {
+        text-decoration: underline;
+        font-size: 12px;
+        margin-bottom: 10px;
+      }
+
+      .call-us-window__day-of-week {
+        width: 112px;
+        text-transform: Capitalize;
+      }
+
+      .call-us-window__day-of-week-wrapper {
+        display: flex;
+        align-items: center;
+        margin-bottom: 10px;
+        font-size: 12px;
+      }
+
+      .call-us-window__open-times {
+        text-transform: lowercase;
+      }
+    `,
+  ];
+
+  @property({ attribute: false })
+  onCloseClicked?: (e: MouseEvent) => void;
+
+  @property()
+  phoneNumber = "1-855-531-5131";
+  @property({ attribute: false })
+  buildingId = 0;
+
+  firstUpdated = async (): Promise<void> => {
+    if (!this.buildingId) {
+      return;
+    }
+    this.officeHoursTextInfo = await getOfficeHourText(this.buildingId);
+  };
+
+  @property({ attribute: false })
+  officeHoursTextInfo: (
+    | string
+    | { dayOfWeek: string; startTime: string; endTime: string }
+  )[] = [];
+
+  render = (): TemplateResult => {
+    return html`
+      <details-window
+        height="443px"
+        headerText="Call us"
+        .onCloseClick=${this.onCloseClicked}
+      >
+        <div class="call-us-window__content-wrapper">
+          <div class="call-us-window__call-us-text">
+            Contact our leasing team at <br />${this.phoneNumber}
+          </div>
+          <div class="call-us-window__office-hours-wrapper">
+            <div class="call-us-window__office-hours-header">Office hours</div>
+          </div>
+          ${this.officeHoursTextInfo.map((oh) => {
+            if (typeof oh === "string") {
+              return html`
+                <div class="call-us-window__day-of-week-wrapper">
+                  <div class="call-us-window__day-of-week">${oh}</div>
+                  <div class="call-us-window__closed">Closed</div>
+                </div>
+              `;
+            }
+            return html`
+              <div class="call-us-window__day-of-week-wrapper">
+                <div class="call-us-window__day-of-week">${oh.dayOfWeek}</div>
+                <div class="call-us-window__open-times">
+                  ${oh.startTime}&nbsp;&ndash;&nbsp;${oh.endTime}
+                </div>
+              </div>
+            `;
+          })}
+        </div>
+      </details-window>
+    `;
+  };
+}
+
+export const installCallUsWindow = (): void => {
+  if (!window.customElements.get("call-us-window")) {
+    window.customElements.define("call-us-window", CallUsWindow);
+  }
+};