@meetelise/chat 1.12.1 → 1.12.4

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

@@ -1,25 +1,278 @@
 import { css, html, LitElement, TemplateResult } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { customElement, property, query, state } from "lit/decorators.js";
+import {
+  shortcutKeyIsPressed,
+  formatToPhone,
+  isPrintableCharacter,
+} from "../actions/formatPhoneNumber";
 import "./tour-type-option.ts";
 import "./date-picker.ts";
 import "./time-picker.ts";
 import "./me-select.ts";
+import { getAvailabilitiesGroupedByDayCached } from "../../getAvailabilities";
+import { TourAvailabilityResponseRankOrderedSupportedTourTypesEnum } from "@meetelise/rest-sdk";
+import { format } from "date-fns";
+import { DatePicker } from "./date-picker";
+import { MESelect } from "./me-select";
+import { TimePicker } from "./time-picker";
+import { LabeledOption } from "../../fetchBuildingInfo";
+import { isMobile } from "../../utils";
+import axios from "axios";
 
 @customElement("tour-scheduler")
 export class TourScheduler extends LitElement {
   @property({ attribute: false })
-  availability?: Availability; // TODO: shouldn't be optional?
-
+  layoutOptions: LabeledOption[] = [];
+  @property({ attribute: false })
+  tourTypeOptions: LabeledOption[] = [];
+  @property({ type: Number })
+  buildingId = 0;
   @property({ attribute: false })
-  onSchedule?: (tour: Tour) => void;
+  onCloseClicked?: (e: MouseEvent) => void;
 
-  // state: type, date, time, name, email, phone, unit type, layout type
   @state()
   private tourType = TourType.Guided;
+  @state()
+  private email = "";
+  @state()
+  private phoneNumber = "";
+  @state()
+  private hasPhoneNumberError = false;
+  @state()
+  private availabilitiesGroupedByDay: { [day: string]: Date[] } = {};
+  @state()
+  private selectedDate?: Date;
+  @state()
+  private selectedTime?: string;
+  @state()
+  private mobilePageIndex = 0;
+  @state()
+  private tourIsBooked = false;
+
+  @query("input#name")
+  nameInput!: HTMLInputElement;
+  @query("input#email")
+  emailInput!: HTMLInputElement;
+  @query("input#phone")
+  phoneInput!: HTMLInputElement;
+  @query("me-select#unitType")
+  unitTypeSelect!: MESelect;
+
+  firstUpdated = async (): Promise<void> => {
+    this.availabilitiesGroupedByDay = await getAvailabilitiesGroupedByDayCached(
+      tourTypeMap[this.tourType]
+    );
+  };
+
+  handlePhoneKeydown = (e: Event): void => {
+    // these should always be true, this is just here to mollify TypeScript
+    if (
+      !(e instanceof KeyboardEvent) ||
+      !(e.target instanceof HTMLInputElement) ||
+      e.target.selectionStart === null
+      // !e.target.selectionStart
+    )
+      return;
+
+    const cursorPosition = e.target.selectionStart;
+
+    if (isPrintableCharacter(e) && !shortcutKeyIsPressed(e)) {
+      // If e.key is a character, and no modifier key is pressed, insert it at the cursor, filter out non-numbers, and auto-format
+      e.preventDefault();
+      e.stopPropagation();
+      const updated =
+        this.phoneNumber.slice(0, cursorPosition) +
+        e.key +
+        this.phoneNumber.slice(cursorPosition);
+      this.phoneNumber = formatToPhone(updated.replace(/\D/g, ""));
+      this.phoneInput.value = this.phoneNumber;
+    } else if (e.key === "Backspace") {
+      /*
+      Handling backspace:
+      - A single backspace should delete the last digit before the cursor, not just a punctuation character; the user shouldn't interact directly with the punctuation
+      - Let the OS handle backspace combos like `Alt + Backspace`, then re-autoformat if necessary (in keyup)
+      - If the user wants to select and backspace a range of text, let them, then auto-format the remainder
+      */
+
+      // backspace combos
+      if (shortcutKeyIsPressed(e)) {
+        return;
+      }
+
+      // backspace selection
+      if (
+        this.phoneInput.selectionEnd &&
+        this.phoneInput.selectionStart &&
+        this.phoneInput.selectionEnd - this.phoneInput.selectionStart > 0
+      ) {
+        return;
+      }
+
+      // regular backspace
+      const originalCharacterCount = this.phoneNumber.length;
+      const digitsBeforeCursor = this.phoneNumber
+        .slice(0, cursorPosition)
+        .replace(/\D/g, "");
+      const digitsAfterCursor = this.phoneNumber
+        .slice(cursorPosition)
+        .replace(/\D/g, "");
+      const updatedDigits = `${digitsBeforeCursor.slice(
+        0,
+        -1
+      )}${digitsAfterCursor}`;
+      this.phoneNumber = formatToPhone(updatedDigits);
+      this.phoneInput.value = this.phoneNumber;
+      const numOfCharactersDeleted =
+        originalCharacterCount - this.phoneNumber.length;
+      const newCursorPosition = cursorPosition - numOfCharactersDeleted;
+      this.phoneInput.setSelectionRange(newCursorPosition, newCursorPosition);
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    } else if (
+      ["ArrowLeft", "ArrowRight"].includes(e.key) &&
+      !shortcutKeyIsPressed(e) &&
+      !e.shiftKey
+    ) {
+      // when navigating with arrow keys, skip punctuation
+      if (e.key === "ArrowLeft") {
+        const charactersBeforeCursor = this.phoneNumber.slice(
+          0,
+          cursorPosition
+        );
+        const numberOfNonDigitsBeforeCursor =
+          charactersBeforeCursor.split(/\d+/).at(-1)?.length || 0;
+        const moveLeftBy = numberOfNonDigitsBeforeCursor + 1;
+        const newCursorPosition =
+          cursorPosition - moveLeftBy > -1 ? cursorPosition - moveLeftBy : 0;
+        this.phoneInput.setSelectionRange(newCursorPosition, newCursorPosition);
+      }
+      if (e.key === "ArrowRight") {
+        const charactersAfterCursor = this.phoneNumber.slice(cursorPosition);
+        const numberOfNonDigitsAfterCursor =
+          charactersAfterCursor.split(/\d+/)[0].length || 0;
+        const moveRightBy = numberOfNonDigitsAfterCursor + 1;
+        const newCursorPosition =
+          cursorPosition + moveRightBy < this.phoneNumber.length
+            ? cursorPosition + moveRightBy
+            : this.phoneNumber.length;
+        this.phoneInput.setSelectionRange(newCursorPosition, newCursorPosition);
+      }
+      e.preventDefault();
+      e.stopPropagation();
+    } else {
+      // Let browser/OS handle anything else. We'll handle any changes to the phone input in the `keyup` handler.
+      // Could be a keyboard shortcut that modifies the input (like `Cmd/Ctrl + V`, which we'll handle in `keyup`),
+      // or a keyboard shortcut that doesn't (like `Cmd + L` to jump to URL bar or `Cmd + R` to reload the page),
+      // or Tab, an arrow key, etc.
+      return;
+    }
+  };
+
+  handlePhoneKeyup = (e: KeyboardEvent): void => {
+    // After formatting, place the cursor where it was before, defined as "before the digit that followed it before formatting, if any, otherwise at the end".
+    // (We never want the cursor to be before a punctuation mark because the next digit typed will appear after the punctuation mark, not before.)
+    // If we don't do this, the cursor automatically goes to the end when we set `this.phoneNumber`.
+    // This is sometimes undesired: for example, if we've ended up here because a Mac user typed `Alt + Backspace` in the middle.
+
+    // Arrow keys are intended to change the cursor position, so don't get in their way
+    if (
+      e.key.includes("Arrow") ||
+      ["Meta", "Shift", "Control", "Alt"].includes(e.key)
+    ) {
+      return;
+    }
 
-  static styles = css`
-    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700;900&display=swap");
+    const cursorPosition = this.phoneInput.selectionStart;
+    // find the numbers it's before and count backward from end after formatting
+    const numbersAfterCursor = cursorPosition
+      ? this.phoneInput.value.slice(cursorPosition).replace(/\D/g, "")
+      : "";
+    this.phoneNumber = formatToPhone(this.phoneInput.value);
+
+    // EXAMPLES: (123)| 4            numbersAfterCursor will be '4'.
+    let cursorNegativeIndex = 0;
+    let numbersLeft = numbersAfterCursor.length;
+    while (numbersLeft) {
+      if (this.phoneNumber.at(cursorNegativeIndex)?.match(/\d/)) {
+        numbersLeft--;
+      }
+      cursorNegativeIndex++;
+    }
+    const cursorPositiveIndex =
+      this.phoneInput.value.length - cursorNegativeIndex + 1;
+    this.phoneInput.setSelectionRange(cursorPositiveIndex, cursorPositiveIndex);
+  };
+
+  onChangeEmail = (e: Event): void => {
+    if (!e.target) {
+      return;
+    }
+
+    this.email = (e.target as HTMLInputElement).value;
+  };
+
+  validators = {
+    tourType: (): boolean => !isNaN(this.tourType),
+    dateAndTime: (): boolean => !!this.selectedDate && !!this.selectedTime,
+    leadInfo: (): boolean =>
+      !!this.nameInput?.value &&
+      this.emailInput?.value.includes("@") &&
+      // TODO: deleting phone number doesn't cause validation to fail, at least on mobile
+      !!this.phoneNumber &&
+      this.phoneNumber.length === 14,
+    unitType: (): boolean => !!this.unitTypeSelect.value,
+  };
+
+  formIsValidForSubmission = (): boolean => {
+    const isValid =
+      this.validators.tourType() &&
+      this.validators.dateAndTime() &&
+      this.validators.leadInfo() &&
+      this.validators.unitType();
+    return isValid;
+  };
+
+  /** E.g., `timeStringToHoursAndMinutes("4:15pm")` -> `[16, 15]`
+   */
+  timeStringToHoursAndMinutes = (
+    timeString: string
+  ): [hours: number, minutes: number] => {
+    const [hoursString, minutesString] = timeString.split(/\D/g);
+    const hours =
+      parseInt(hoursString) +
+      (timeString.toLowerCase().includes("pm") ? 12 : 0);
+    const minutes = parseInt(minutesString);
+
+    return [hours, minutes];
+  };
+
+  submit = async (): Promise<void> => {
+    if (!this.selectedDate || !this.selectedTime) return;
+    const [hours, minutes] = this.timeStringToHoursAndMinutes(
+      this.selectedTime
+    );
+    const tourTime = new Date(this.selectedDate.getTime());
+    tourTime.setHours(hours, minutes);
+    const tourTimeString = tourTime.toISOString();
+    const data = {
+      email_address: this.email,
+      phone_number: `+1${this.phoneNumber.match(/\d/g)?.join("")}`, // e.g. +12125555555
+      building_id: this.buildingId,
+      // TODO: this is very bad dumb name-splitting logic! I'm only doing it because the design had one name field and the backend expects two
+      first_name: this.nameInput.value.split(" ")[0],
+      last_name: this.nameInput.value.split(" ").slice(1).join(" "),
+      tour_type: tourTypeForSubmission[this.tourType],
+      tour_time: tourTimeString,
+    };
+    const url = `https://app.meetelise.com/platformApi/state/create/scheduleMe`;
+    const response = await axios.post(url, data);
+    if (response.status === 200) {
+      this.tourIsBooked = true;
+    }
+  };
 
+  static styles = css`
     * {
       box-sizing: border-box;
     }
@@ -36,11 +289,11 @@ export class TourScheduler extends LitElement {
       border-radius: 10px;
       font-family: "Poppins";
       color: #202020;
-      padding: 0 27px 0 25px;
+      padding: 0 25px 0 27px;
 
       /* grid stuff */
       display: grid;
-      grid-template-columns: 225px 400px 330px;
+      grid-template-columns: 229px 432px 305px;
       grid-template-rows: 44px 54px 32px 195px 152px 1px;
     }
 
@@ -62,16 +315,26 @@ export class TourScheduler extends LitElement {
       grid-row: 1 / 2;
       grid-column: 1;
       align-self: end;
+      z-index: 1; // idk why, but it's invisible on the confirmation page otherwise
     }
 
     button#closeButton {
       grid-row: 1 / 2;
-      grid-column: -1;
-      height: max-content;
-      aspect-ratio: 1;
+      grid-column: 3;
       background: none;
       border: none;
       align-self: end;
+      justify-self: end;
+      z-index: 1; // idk why, but it's invisible on the confirmation page otherwise
+    }
+
+    /*
+    makes button fit size of SVG:
+      https://stackoverflow.com/questions/45423874/button-height-is-greater-than-the-nested-contents-height
+    otherwise there's some empty space at the bottom of the button, which interferes with vertical centering
+    */
+    button#closeButton > svg {
+      vertical-align: middle;
     }
 
     #tourTypeMenu {
@@ -129,9 +392,6 @@ export class TourScheduler extends LitElement {
       height: 49px;
       border: 1px solid #83818e;
       padding: 13px 11px 14px 11px;
-    }
-
-    #yourInformationMenu > input::placeholder {
       font-family: "Poppins";
       font-style: normal;
       font-weight: 400;
@@ -139,6 +399,10 @@ export class TourScheduler extends LitElement {
       color: #202020;
     }
 
+    #yourInformationMenu > input::placeholder {
+      color: #202020;
+    }
+
     #unitChoiceMenu {
       grid-row: 5 / 6;
       grid-column: 3;
@@ -177,11 +441,10 @@ export class TourScheduler extends LitElement {
       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;
+      background: #202020;
       border: 1px solid #ffffff;
       border-radius: 10px;
       grid-row: 7;
@@ -193,180 +456,456 @@ export class TourScheduler extends LitElement {
       font-weight: 700;
       font-size: 14px;
       color: #ffffff;
+      box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+    }
+
+    button#schedule:disabled {
+      background: #e7e7e7;
+      box-shadow: none;
+    }
+
+    #confirmationMessage {
+      grid-row: 3;
+      width: 625px;
+    }
+
+    #confirmationMessage > p {
+      font-size: 18px;
+    }
+
+    @media (max-width: 767px) {
+      /* TODO: separate styles into general, desktop-specific, and mobile-specific.
+      basically everything I have "unset" or "initial" on should become desktop-specific. the grid layout is only for desktop.
+      */
+      .tour-scheduler {
+        position: fixed;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: initial;
+        height: 93vh;
+        width: 100vw;
+        background: #ffffff;
+        transform: none;
+        box-shadow: none;
+        border-radius: 0;
+        padding: 25px 20px 0 22px;
+        display: flex;
+        flex-direction: column;
+      }
+
+      #topControls {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .tour-scheduler > :is(h1, h2) {
+        align-self: unset;
+      }
+
+      /* TODO: this and :disabled is duplicated from Schedule button. make a class,
+      or better a component, for the button styles
+      */
+      button#next {
+        height: 50px;
+        /* width: 74px; */
+        padding: 13px 22px 14px 22px;
+        align-self: flex-start;
+        background: #202020;
+        border: 1px solid #ffffff;
+        border-radius: 10px;
+        font-family: "Poppins";
+        font-weight: 700;
+        font-size: 14px;
+        color: #ffffff;
+        box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+        margin-top: 22px;
+      }
+
+      button#next:disabled {
+        background: #e7e7e7;
+        box-shadow: none;
+      }
+
+      h1#scheduleATour {
+        grid-row: unset;
+        grid-column: unset;
+        align-self: unset;
+      }
+
+      button#closeButton {
+        grid-row: unset;
+        grid-column: unset;
+        align-self: unset;
+        justify-self: unset;
+      }
+
+      h2 {
+        grid-row: unset;
+        margin-top: 37px;
+        margin-bottom: 25px;
+      }
+
+      #tourTypeMenu {
+        display: flex;
+        flex-direction: column;
+        gap: 15px;
+        margin-bottom: 36px;
+      }
+
+      h2#tourType {
+        grid-column: unset;
+        grid-row: unset;
+      }
+
+      #datePicker {
+        display: flex;
+        flex-direction: column;
+        gap: 18px;
+      }
+
+      time-picker {
+        /* so the Next button doesn't jump when the date is selected and the time slots appear */
+        height: 93px;
+      }
+
+      #dateAndTimeMenu {
+        grid-row: unset;
+        grid-column: unset;
+        align-self: unset;
+        display: unset;
+        flex-direction: unset;
+      }
+
+      #confirmationMessage {
+        grid-row: unset;
+        width: 90%;
+        margin-top: 37px;
+      }
     }
   `;
 
-  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();
+  tourTypeMenu(): TemplateResult {
+    return html`<h2 id="tourType">Tour Type</h2>
+      <div id="tourTypeMenu">
+        ${this.tourTypeOptions.map((o) => o.value).includes("WITH_AGENT")
+          ? html` <tour-type-option
+              tourtype="guided"
+              heading="Guided tour"
+              subtitle="with an agent"
+              @click="${() => {
                 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"
+              }}"
+              @keydown="${(e: KeyboardEvent) => {
+                if ([" ", "Enter"].includes(e.key)) {
+                  e.preventDefault();
+                  this.tourType = TourType.Guided;
+                }
+              }}"
+              ?selected="${this.tourType === TourType.Guided}"
             >
-              <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();
+              <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>`
+          : ""}
+        ${this.tourTypeOptions.map((o) => o.value).includes("SELF_GUIDED")
+          ? html`<tour-type-option
+              tourtype="self"
+              heading="Take a tour"
+              subtitle="on your own"
+              @click="${() => {
                 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"
+              }}"
+              @keydown="${(e: KeyboardEvent) => {
+                if ([" ", "Enter"].includes(e.key)) {
+                  e.preventDefault();
+                  this.tourType = TourType.Self;
+                }
+              }}"
+              ?selected="${this.tourType === TourType.Self}"
             >
-              <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();
+              <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>`
+          : ""}
+        ${this.tourTypeOptions.map((o) => o.value).includes("SELF_GUIDED")
+          ? html`<tour-type-option
+              tourtype="guided"
+              heading="Virtual tour"
+              subtitle="over video"
+              @click="${() => {
                 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"
+              }}"
+              @keydown="${(e: KeyboardEvent) => {
+                if ([" ", "Enter"].includes(e.key)) {
+                  e.preventDefault();
+                  this.tourType = TourType.Virtual;
+                }
+              }}"
+              ?selected="${this.tourType === TourType.Virtual}"
             >
-              <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>
+              <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>
+  dateAndTimeMenu(horizontal = false): TemplateResult {
+    return html`<h2 id="dateAndTime">Date and Time</h2>
+      <div id="dateAndTimeMenu">
+        <div id="datePicker">
+          <date-picker
+            .availabilities=${this.availabilitiesGroupedByDay}
+            @change=${(e: Event) => {
+              if (e.target instanceof DatePicker) {
+                this.selectedDate = e.target.selectedDate;
+              }
+            }}
+          ></date-picker>
+          <time-picker
+            ?selecteddateexists=${!!this.selectedDate}
+            ?horizontal=${horizontal}
+            .options=${this.selectedDate
+              ? this.availabilitiesGroupedByDay[
+                  format(this.selectedDate, "y-MM-dd")
+                ]?.map((date) => format(date, "h:mmaaa"))
+              : []}
+            @change=${(e: Event) => {
+              if (e.target instanceof TimePicker) {
+                this.selectedTime = e.target.selectedTime;
+              }
+            }}
+          ></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>
+  closeButton(): TemplateResult {
+    return html`<button id="closeButton" @click=${this.onCloseClicked}>
+      <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>`;
+  }
+
+  mobilePages = [
+    {
+      validate: this.validators.tourType,
+      nextButtonText: "Next",
+      nextButtonAction: (): void => {
+        this.mobilePageIndex++;
+      },
+      render: (): TemplateResult => {
+        return html`${this.tourTypeMenu()}`;
+      },
+    },
+    {
+      validate: this.validators.dateAndTime,
+      nextButtonText: "Next",
+      nextButtonAction: (): void => {
+        this.mobilePageIndex++;
+      },
+      render: (): TemplateResult => {
+        return html`${this.dateAndTimeMenu(true)}`;
+      },
+    },
+    {
+      validate: (): boolean =>
+        this.validators.leadInfo() && this.validators.unitType(),
+      nextButtonText: "Schedule tour",
+      nextButtonAction: this.submit,
+      render: (): TemplateResult => {
+        return html`${this.userInfoAndLayoutMenu()}`;
+      },
+    },
+  ];
+
+  userInfoAndLayoutMenu(): TemplateResult {
+    return html`<h2 id="yourInformation">Your information</h2>
+      <div id="yourInformationMenu">
+        <input type="text" placeholder="Name" id="name" />
+        <input
+          type="email"
+          inputmode="email"
+          placeholder="Email"
+          id="email"
+          .value=${this.email}
+          @keyup=${this.onChangeEmail}
+        />
+        <input
+          type="tel"
+          inputmode="tel"
+          placeholder="Phone"
+          id="phone"
+          maxlength="14"
+          .value=${this.phoneNumber}
+          @keydown=${this.handlePhoneKeydown}
+          @keyup=${this.handlePhoneKeyup}
+          @change=${() => this.requestUpdate()}
+        />
+      </div>
+      <div id="unitChoiceMenu">
+        <h2 id="unitChoice">What would you like to view?</h2>
+        <div id="unitOptions">
+          <!-- TODO: display option.label, store option.value to send to backend -->
+          <me-select
+            id="unitType"
+            placeholder="Select type"
+            .options="${this.layoutOptions.map((o) => o.label)}"
+            defaultOption="Studio"
+            @change=${() => {
+              // to revalidate the form
+              this.requestUpdate();
+            }}
+            >Studio
+          </me-select>
         </div>
-        <hr />
-        <p id="explanation">
-          We’ll send a confirmation and any follow-ups to your email address.
+      </div>`;
+  }
+
+  confirmationMessage(): TemplateResult {
+    if (!this.selectedDate) return html``;
+    // format example: "November 9th, 2022 at 11:00am"
+    const readableDateAndTime = `${format(
+      this.selectedDate,
+      "MMMM Lo, y"
+    )} at ${this.selectedTime}`;
+    return html`
+      <div id="confirmationMessage">
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 20 20"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M7 0V2H13V0H15V2H19C19.2652 2 19.5196 2.10536 19.7071 2.29289C19.8946 2.48043 20 2.73478 20 3V19C20 19.2652 19.8946 19.5196 19.7071 19.7071C19.5196 19.8946 19.2652 20 19 20H1C0.734784 20 0.48043 19.8946 0.292893 19.7071C0.105357 19.5196 0 19.2652 0 19V3C0 2.73478 0.105357 2.48043 0.292893 2.29289C0.48043 2.10536 0.734784 2 1 2H5V0H7ZM18 9H2V18H18V9ZM13.036 10.136L14.45 11.55L9.5 16.5L5.964 12.964L7.38 11.55L9.501 13.672L13.037 10.136H13.036ZM5 4H2V7H18V4H15V5H13V4H7V5H5V4Z"
+            fill="#202020"
+          />
+        </svg>
+        <p>
+          Thank you!
+          <br />
+          Your guided tour is scheduled for ${readableDateAndTime}.
+        </p>
+        <p>
+          Look for an email confirmation along with instructions and directions.
         </p>
-        <button id="schedule">Schedule tour</button>
+        <p>You can make changes at any time, just reply to the email.</p>
       </div>
     `;
   }
-}
 
-// TODO: what should this look like? what date format? etc.
-interface Availability {
-  [date: string]: { time: Date }[];
+  render(): TemplateResult {
+    if (!isMobile()) {
+      return html`
+        <div class="tour-scheduler">
+          <h1 id="scheduleATour">Schedule a tour</h1>
+          ${this.closeButton()}
+          ${this.tourIsBooked
+            ? html`
+                <div class="tour-scheduler">${this.confirmationMessage()}</div>
+              `
+            : html`${this.tourTypeMenu()} ${this.dateAndTimeMenu()}
+                ${this.userInfoAndLayoutMenu()}
+                <hr />
+                <p id="explanation">
+                  We’ll send a confirmation and any follow-ups to your email
+                  address.
+                </p>
+                <button
+                  id="schedule"
+                  ?disabled=${!this.formIsValidForSubmission()}
+                  @click=${this.submit}
+                >
+                  Schedule tour
+                </button>`}
+        </div>
+      `;
+    } else {
+      const currentPage = this.mobilePages[this.mobilePageIndex];
+      return html`
+        <div class="tour-scheduler">
+          <div id="topControls">
+            <h1 id="scheduleATour">Schedule a tour</h1>
+            ${this.closeButton()}
+          </div>
+          ${this.tourIsBooked
+            ? this.confirmationMessage()
+            : html`${currentPage.render()}
+                <button
+                  id="next"
+                  @click=${currentPage.nextButtonAction}
+                  ?disabled=${(() => {
+                    return !currentPage.validate();
+                  })()}
+                >
+                  ${currentPage.nextButtonText}
+                </button>`}
+        </div>
+      `;
+    }
+  }
 }
 
 export enum TourType {
@@ -375,9 +914,19 @@ export enum TourType {
   Virtual,
 }
 
-interface Tour {
-  start: Date;
-  type: TourType;
-  // TODO: enum? or leave as string for flexibility? or autogen from backend?
-  layout: string;
-}
+// TODO: we have three UI options and five TourAvailabilityResponseRankOrderedSupportedTourTypesEnum values
+// how should they map?
+const tourTypeMap = {
+  [TourType.Guided]:
+    TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.WithAgent,
+  [TourType.Self]:
+    TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.SelfGuided,
+  [TourType.Virtual]:
+    TourAvailabilityResponseRankOrderedSupportedTourTypesEnum.VirtualShowing,
+};
+
+const tourTypeForSubmission = {
+  [TourType.Guided]: "escorted-tour",
+  [TourType.Self]: "self-guided-tour",
+  [TourType.Virtual]: "live-virtual-tour",
+};