@meetelise/chat 1.29.0 → 1.30.1

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

@@ -0,0 +1,1373 @@
+import { html, LitElement, PropertyValueMap, TemplateResult } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import {
+  shortcutKeyIsPressed,
+  formatToPhoneInput,
+  isPrintableCharacter,
+} from "../actions/formatPhoneNumber";
+import "./tour-type-option.ts";
+import "./date-picker.ts";
+import "./time-picker.ts";
+import "../me-select.ts";
+import {
+  DateWithTimeZoneOffset,
+  getAvailabilitiesGroupedByDay,
+  getExistenceOfAvailabilitiesByTourType,
+  resetAvailabilitiesCache,
+} from "../../getAvailabilities";
+import { TourAvailabilityResponseRankOrderedSupportedTourTypesEnum } from "../../types/rest-sdk.types";
+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, isValidPhoneNumber } from "../../utils";
+import axios, { AxiosError } from "axios";
+import mapValues from "lodash/mapValues";
+import classnames from "classnames";
+import parseISO from "date-fns/parseISO";
+import compareAsc from "date-fns/compareAsc";
+import { InputStyles } from "../actions/InputStyles";
+import { classMap } from "lit/directives/class-map.js";
+import { FeatureFlagsShowDropdown } from "../../fetchFeatureFlag";
+import { pushGtmEvent } from "../../gtm";
+import disclaimer from "../../disclaimers";
+import { tourSchedulerStyles } from "./tourSchedulerStyles";
+import { defaultPrimaryColor, defaultBackgroundColor } from "../../themes";
+import { LogType, sendLoggingEvent } from "../../analytics";
+import LeadSourceClient, {
+  getDefaultLeadSourceAttribution,
+} from "../LeadSourceClient";
+import { getShouldAllowScheduling } from "../../getShouldAllowScheduling";
+import { TourVirtuallyIcon } from "../icons/TourVirtuallyIcon";
+import { TourSelfGuidedIcon } from "../icons/TourSelfGuidedIcon";
+import { TourWithAgentIcon } from "../icons/TourWithAgentIcon";
+
+@customElement("tour-scheduler")
+export class TourScheduler extends LitElement {
+  @property({ attribute: false })
+  tourTypeOptions: LabeledOption[] = [];
+  @property({ attribute: true })
+  chatId = "";
+  @property({ type: Number })
+  buildingId = 0;
+  @property({ attribute: true })
+  buildingSlug = "";
+  @property({ attribute: true })
+  sgtUrl = "";
+  @property({ attribute: true })
+  selfGuidedToursTypeOffered = "";
+  @property({ attribute: true })
+  selfGuidedTourEnabled = false;
+  @property({ attribute: true })
+  escortedToursLink = "";
+  @property({ attribute: true })
+  virtualToursLink = "";
+  @property({ attribute: true })
+  orgSlug = "";
+  @property({ attribute: true })
+  hasDynamicSchedulingEnabled = false;
+
+  @property({ attribute: true })
+  private leadSourceClient: LeadSourceClient | null = null;
+
+  @property({ attribute: true })
+  buildingName = "";
+
+  onCloseClicked?: (e: MouseEvent) => void;
+
+  @state()
+  private tourType: TourType | null = null;
+  @state()
+  private shouldShowTourType = {
+    [TourType.Guided]: true,
+    [TourType.Self]: true,
+    [TourType.Virtual]: true,
+  };
+  @state()
+  private email = "";
+  @state()
+  private phoneNumber = "";
+  @state()
+  private availabilitiesGroupedByDay: {
+    [day: string]: DateWithTimeZoneOffset[];
+  } = {};
+  @state()
+  private waitingForAvailabilities = true;
+  @state()
+  private selectedDate?: Date;
+  @state()
+  private selectedTime?: DateWithTimeZoneOffset | null;
+  @state()
+  private mobilePageIndex = 0;
+  @state()
+  private isSubmitting = false;
+  @state()
+  private tourIsBooked = false;
+  @state()
+  private shouldAllowScheduling = false;
+  @state()
+  private shouldAllowScheduleLoading = true;
+  @state()
+  private promptForReschedule = false;
+  @state()
+  private canceledReschedule = false;
+
+  @property({ attribute: false })
+  leadSources: string[] = [];
+
+  @property({ attribute: true })
+  orgLegalName = "";
+
+  @property({ attribute: true })
+  currentLeadSource = ""; // the default lead source based on referrer and query params.
+
+  @property({ attribute: true })
+  featureFlagShowDropdown = "";
+
+  @property({ attribute: true })
+  compactDesign = false;
+
+  @property({ attribute: true })
+  primaryColor: string = defaultPrimaryColor;
+
+  @property({ attribute: true })
+  backgroundColor: string = defaultBackgroundColor;
+
+  @property({ attribute: true })
+  foregroundColorOnPrimaryBackgroundColor = "white";
+
+  @property({ attribute: true })
+  foregroundColorOnSecondaryBackgroundColor = "black";
+
+  @query(".nameContainer#firstName input")
+  firstNameInput!: HTMLInputElement;
+  @query(".nameContainer#lastName input")
+  lastNameInput!: HTMLInputElement;
+  @query(".inputContainer#email input")
+  emailInput!: HTMLInputElement;
+  @query(".inputContainer#phone input")
+  phoneInput!: HTMLInputElement;
+  @query("me-select#leadSource")
+  selectedLeadSource!: MESelect;
+
+  @state()
+  firstNameInputValue = "";
+  @state()
+  lastNameInputValue = "";
+  @state()
+  leadSourceInputValue = "";
+
+  @state()
+  errorGettingAvailabilities = false;
+
+  _setAvailabilities = async (): Promise<void> => {
+    try {
+      const [allowScheduling, availabilitiesExistForTourType] =
+        await Promise.all([
+          getShouldAllowScheduling(
+            this.buildingId,
+            this.hasDynamicSchedulingEnabled
+          ),
+          getExistenceOfAvailabilitiesByTourType(),
+        ]);
+
+      this.shouldAllowScheduling = allowScheduling;
+      this.shouldAllowScheduleLoading = false;
+
+      sendLoggingEvent({
+        logTitle: "AVAILABILITIES_EXIST_FOR_TOUR_TYPE",
+        logData: availabilitiesExistForTourType,
+        logType: LogType.info,
+        buildingSlug: this.buildingSlug,
+        orgSlug: this.orgSlug,
+      });
+      const allValuesAreFalse = Object.values(
+        availabilitiesExistForTourType
+      ).every((v) => v === false);
+      const hasNoTourLinks =
+        !this.sgtUrl && !this.escortedToursLink && !this.virtualToursLink;
+      if (allValuesAreFalse && hasNoTourLinks) {
+        this.errorGettingAvailabilities = true;
+        this.waitingForAvailabilities = false;
+        sendLoggingEvent({
+          logTitle: "NO_AVAILABILITIES_EXIST",
+          logData: null,
+          logType: LogType.warn,
+          buildingSlug: this.buildingSlug,
+          orgSlug: this.orgSlug,
+        });
+        return;
+      }
+      this.shouldShowTourType = {
+        [TourType.Guided]:
+          this.tourTypeOptions.map((o) => o.value).includes("WITH_AGENT") &&
+          (availabilitiesExistForTourType[TourType.Guided] ||
+            !!this.escortedToursLink),
+        [TourType.Self]:
+          this.tourTypeOptions.map((o) => o.value).includes("SELF_GUIDED") &&
+          (availabilitiesExistForTourType[TourType.Self] || !!this.sgtUrl),
+        [TourType.Virtual]:
+          this.tourTypeOptions
+            .map((o) => o.value)
+            .includes("VIRTUAL_SHOWING") &&
+          (availabilitiesExistForTourType[TourType.Virtual] ||
+            !!this.virtualToursLink),
+      };
+
+      // if there is only a single option for tour type, have that be the default
+      const hasOneShowTourType =
+        Object.values(this.shouldShowTourType).reduce((acc, cur) => {
+          if (cur === true) {
+            return acc + 1;
+          } else {
+            return acc;
+          }
+        }, 0) === 1;
+
+      if (hasOneShowTourType) {
+        this.tourType = Object.keys(this.shouldShowTourType).find(
+          (key) => this.shouldShowTourType[key as TourType]
+        ) as TourType;
+      } else {
+        // if we have multiple tour types, then check if there is a default that the client wants selected
+        // HACK: FOR DEMO, FOR https://www.sofioceanhills.com/ -
+        // THIS SHOULD BE ADDED TO WEBCHAT CONFIGURATION
+        // if (
+        //   this.buildingSlug === "1ac49f90-6150-11ed-b327-1b3f05e7b9db" &&
+        //   this.shouldShowTourType[TourType.Self]
+        // ) {
+        //   this.tourType = TourType.Self;
+        // }
+      }
+
+      if (this.tourType === null) {
+        this.waitingForAvailabilities = false;
+        return;
+      }
+      this.availabilitiesGroupedByDay = await getAvailabilitiesGroupedByDay(
+        tourTypeMap[this.tourType]
+      );
+      this.waitingForAvailabilities = false;
+    } catch (e) {
+      this.errorGettingAvailabilities = true;
+      this.waitingForAvailabilities = false;
+      sendLoggingEvent({
+        logTitle: "ERROR_LOADING_AVAILABILITIES",
+        logData: { error: e },
+        logType: LogType.error,
+        buildingSlug: this.buildingSlug,
+        orgSlug: this.orgSlug,
+      });
+    }
+  };
+
+  firstUpdated = async (): Promise<void> => {
+    await this._setAvailabilities();
+  };
+
+  protected willUpdate = async (
+    _changedProperties:
+      | PropertyValueMap<{ tourType: TourType }>
+      | Map<PropertyKey, unknown>
+  ): Promise<void> => {
+    if (_changedProperties.has("tourType") && this.tourType) {
+      this.availabilitiesGroupedByDay = await getAvailabilitiesGroupedByDay(
+        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 = formatToPhoneInput(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 = formatToPhoneInput(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 => {
+    if (!e.key) {
+      return;
+    }
+    // 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;
+    }
+
+    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 = formatToPhoneInput(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 => this.tourType !== null,
+    dateAndTime: (): boolean => !!this.selectedDate && !!this.selectedTime,
+    leadInfo: (): boolean => {
+      return (
+        (!!this.firstNameInput?.value || !!this.lastNameInput?.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 &&
+        isValidPhoneNumber(this.phoneNumber)
+      );
+    },
+  };
+
+  formIsValidForSubmission = (): boolean => {
+    const isValid =
+      this.validators.tourType() &&
+      this.validators.dateAndTime() &&
+      this.validators.leadInfo();
+    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 || this.tourType === null) {
+      return;
+    }
+    const queryParams = new URLSearchParams(window.location.search);
+
+    let parsedLeadSource = null;
+    if (
+      this.selectedLeadSource &&
+      this.selectedLeadSource.value &&
+      this.selectedLeadSource.value.length > 0
+    ) {
+      parsedLeadSource = this.selectedLeadSource.value;
+    } else if (
+      this.leadSourceInputValue &&
+      this.leadSourceInputValue.length > 0
+    ) {
+      parsedLeadSource = this.leadSourceInputValue;
+    } else {
+      parsedLeadSource = this.currentLeadSource;
+    }
+
+    const leadSources = [
+      ...new Set(
+        parsedLeadSource
+          ? [parsedLeadSource, "property-website"]
+          : ["property-website"]
+      ),
+    ];
+    if (this.firstNameInput) {
+      this.firstNameInputValue = this.firstNameInput.value;
+    }
+    if (this.lastNameInput) {
+      this.lastNameInputValue = this.lastNameInput.value;
+    }
+    this.leadSourceInputValue = parsedLeadSource;
+    pushGtmEvent("scheduleTourSubmitted", {
+      email: this.email,
+      phone: `+1${this.phoneNumber.match(/\d/g)?.join("")}`,
+      firstName: this.firstNameInput?.value ?? this.firstNameInputValue,
+      lastName: this.lastNameInput?.value ?? this.lastNameInputValue,
+      tourType: tourTypeForSubmission[this.tourType],
+      tourTime: `${this.selectedTime.datetime}${this.selectedTime.offset}`,
+      originatingSource:
+        leadSources.find((i) => i !== "property-website") || null,
+    });
+    const data = {
+      referrer: document.referrer,
+      email_address: this.email,
+      phone_number: `+1${this.phoneNumber.match(/\d/g)?.join("")}`, // e.g. +12125555555
+      building_id: this.buildingId,
+      first_name: this.firstNameInput?.value ?? this.firstNameInputValue,
+      last_name: this.lastNameInput?.value ?? this.lastNameInputValue,
+      tour_type: tourTypeForSubmission[this.tourType],
+      tour_time: `${this.selectedTime.datetime}${this.selectedTime.offset}`, // e.g., "2022-06-27T09:00:00-07:00"
+      cancel_existing_tours: this.promptForReschedule,
+      lead_sources: [
+        ...new Set(
+          parsedLeadSource
+            ? [parsedLeadSource, getDefaultLeadSourceAttribution(this.orgSlug)]
+            : [getDefaultLeadSourceAttribution(this.orgSlug)]
+        ),
+      ],
+      query_params: Object.fromEntries(queryParams.entries()),
+      conversation_tracking_id: this.leadSourceClient?.chatId,
+    };
+
+    const url = `https://app.meetelise.com/platformApi/state/create/v2/scheduleMe`;
+    this.isSubmitting = true;
+    try {
+      await axios.post(url, data, {
+        headers: {
+          ["building-slug"]: this.buildingSlug,
+          ["X-SecurityKey"]: "JRL8jV4VcSCwOSir5gWkpgNLfKghmhBG",
+          ["org-slug"]: this.orgSlug,
+        },
+      });
+
+      this.leadSourceClient?.checkAndHandleForLogLeadSource({
+        webchatAction: "tour-scheduler",
+        stateId: null,
+      });
+      this.isSubmitting = false;
+      this.tourIsBooked = true;
+    } catch (e: unknown) {
+      const typedError = e as AxiosError<{ detail: string }>;
+      const message =
+        typedError.response?.data?.["detail"] || "Failed to book tour";
+      if (
+        typedError.response &&
+        typedError.response.headers &&
+        typedError.response.headers[
+          "funnel-prospect-conflicting-appointment-error"
+        ]
+      ) {
+        if (this.selectedDate && this.selectedTime) {
+          const dateAvailabilities =
+            this.availabilitiesGroupedByDay[
+              format(this.selectedDate, "yyyy-MM-dd")
+            ];
+          if (dateAvailabilities) {
+            this.availabilitiesGroupedByDay[
+              format(this.selectedDate, "yyyy-MM-dd")
+            ] = dateAvailabilities.filter(
+              (availability) => availability !== this.selectedTime
+            );
+          }
+        }
+      } else if (
+        typedError.response?.status === 409 &&
+        !this.promptForReschedule &&
+        message === "User already has a tour scheduled for this building"
+      ) {
+        this.promptForReschedule = true;
+        this.isSubmitting = false;
+        this.tourIsBooked = false;
+        return;
+      } else if (
+        typedError.response?.status === 409 &&
+        !this.promptForReschedule
+      ) {
+        this.isSubmitting = false;
+        this.tourIsBooked = false;
+        resetAvailabilitiesCache();
+        this.availabilitiesGroupedByDay = await getAvailabilitiesGroupedByDay(
+          tourTypeMap[this.tourType],
+          this.buildingId
+        );
+        alert(
+          "This timeslot is no longer available. Please select a different time."
+        );
+        return;
+      }
+      alert(message);
+      this.isSubmitting = false;
+      this.tourIsBooked = false;
+    }
+  };
+
+  static styles = [tourSchedulerStyles, InputStyles];
+
+  tourTypeMenu(): TemplateResult {
+    return html`<h2 class="journey-header">Tour Type</h2>
+      <div id="tour-type-menu">
+        ${this.shouldShowTourType[TourType.Self]
+          ? html` <tour-type-option
+              heading="Take a tour"
+              subtitle="on your own"
+              .primaryColor=${this.primaryColor}
+              .backgroundColor=${this.backgroundColor}
+              @click="${async () => {
+                this.tourType = TourType.Self;
+                if (
+                  this.sgtUrl &&
+                  this.selfGuidedToursTypeOffered !==
+                    "SCHEDULED_BY_ME_MANAGED_BY_ME"
+                ) {
+                  window.open(this.sgtUrl, "_blank");
+                }
+                this.availabilitiesGroupedByDay =
+                  await getAvailabilitiesGroupedByDay(
+                    tourTypeMap[TourType.Self]
+                  );
+              }}"
+              @keydown="${(e: KeyboardEvent) => {
+                if ([" ", "Enter"].includes(e.key)) {
+                  e.preventDefault();
+                  this.tourType = TourType.Self;
+                }
+              }}"
+              ?selected="${this.tourType === TourType.Self}"
+            >
+              ${TourSelfGuidedIcon(
+                this.tourType === TourType.Self
+                  ? this.foregroundColorOnPrimaryBackgroundColor
+                  : this.foregroundColorOnSecondaryBackgroundColor
+              )}
+            </tour-type-option>`
+          : ""}
+        ${this.shouldShowTourType[TourType.Guided]
+          ? html` <tour-type-option
+              heading="Guided tour"
+              subtitle="with an agent"
+              .primaryColor=${this.primaryColor}
+              .backgroundColor=${this.backgroundColor}
+              .foregroundColorOnPrimaryBackgroundColor=${this
+                .foregroundColorOnPrimaryBackgroundColor}
+              .foregroundColorOnSecondaryBackgroundColor=${this
+                .foregroundColorOnSecondaryBackgroundColor}
+              @click="${async () => {
+                this.tourType = TourType.Guided;
+
+                if (this.escortedToursLink) {
+                  window.open(this.escortedToursLink, "_blank");
+                }
+                this.availabilitiesGroupedByDay =
+                  await getAvailabilitiesGroupedByDay(
+                    tourTypeMap[TourType.Guided]
+                  );
+              }}"
+              @keydown="${(e: KeyboardEvent) => {
+                if ([" ", "Enter"].includes(e.key)) {
+                  e.preventDefault();
+                  this.tourType = TourType.Guided;
+                }
+              }}"
+              ?selected="${this.tourType === TourType.Guided}"
+            >
+              ${TourWithAgentIcon(
+                this.tourType === TourType.Guided
+                  ? this.foregroundColorOnPrimaryBackgroundColor
+                  : this.foregroundColorOnSecondaryBackgroundColor
+              )}
+            </tour-type-option>`
+          : ""}
+        ${this.shouldShowTourType[TourType.Virtual]
+          ? html` <tour-type-option
+              heading="Virtual tour"
+              subtitle="over video"
+              .primaryColor=${this.primaryColor}
+              .backgroundColor=${this.backgroundColor}
+              @click="${async () => {
+                this.tourType = TourType.Virtual;
+                if (this.virtualToursLink) {
+                  window.open(this.virtualToursLink, "_blank");
+                }
+                this.availabilitiesGroupedByDay =
+                  await getAvailabilitiesGroupedByDay(
+                    tourTypeMap[TourType.Virtual]
+                  );
+              }}"
+              @keydown="${(e: KeyboardEvent) => {
+                if ([" ", "Enter"].includes(e.key)) {
+                  e.preventDefault();
+                  this.tourType = TourType.Virtual;
+                }
+              }}"
+              ?selected="${this.tourType === TourType.Virtual}"
+            >
+              ${TourVirtuallyIcon(
+                this.tourType === TourType.Virtual
+                  ? this.foregroundColorOnPrimaryBackgroundColor
+                  : this.foregroundColorOnSecondaryBackgroundColor
+              )}
+            </tour-type-option>`
+          : ""}
+      </div>`;
+  }
+
+  dateAndTimeMenu(): TemplateResult {
+    if (
+      this.tourType === TourType.Self &&
+      this.sgtUrl &&
+      this.selfGuidedToursTypeOffered !== "SCHEDULED_BY_ME_MANAGED_BY_ME"
+    ) {
+      return html`<h2 class="journey-header">Date and Time</h2>
+        <div id="dateAndTimeMenu">
+          <button
+            id="self-guided-redirect-bttn"
+            @click=${() => window.open(this.sgtUrl, "_blank")}
+          >
+            View Self Guided Tour Times
+          </button>
+        </div>`;
+    }
+    return html`<h2 class="journey-header">Date and Time</h2>
+      <div id="dateAndTimeMenu">
+        <div id="datePicker">
+          <date-picker
+            .availabilities=${mapValues(
+              this.availabilitiesGroupedByDay,
+              (dates) => dates.map((date) => new Date(date.offset))
+            )}
+            @change=${(e: Event) => {
+              // if the user clicked a tour type that is suppose to redirect, we redirect that use when they select a date
+              //  This can happen if the user clicks, is redirect, and then comes back to the webchat
+              if (
+                this.tourType === TourType.Self &&
+                this.sgtUrl &&
+                this.selfGuidedToursTypeOffered !==
+                  "SCHEDULED_BY_ME_MANAGED_BY_ME"
+              ) {
+                window.open(this.sgtUrl, "_blank");
+                return;
+              }
+              if (this.tourType === TourType.Guided && this.escortedToursLink) {
+                window.open(this.escortedToursLink, "_blank");
+                return;
+              }
+              if (this.tourType === TourType.Virtual && this.virtualToursLink) {
+                window.open(this.virtualToursLink, "_blank");
+                return;
+              }
+
+              if (e.target instanceof DatePicker) {
+                this.selectedDate = e.target.selectedDate;
+              }
+            }}
+          ></date-picker>
+          <div>
+            <time-picker
+              ?selecteddateexists=${!!this.selectedDate}
+              .options=${this.selectedDate
+                ? this.availabilitiesGroupedByDay[
+                    format(this.selectedDate, "y-MM-dd")
+                  ]
+                    ?.sort((a, b) =>
+                      compareAsc(parseISO(a.datetime), parseISO(b.datetime))
+                    )
+                    .map((date) => {
+                      return {
+                        dateWithTimeZoneOffset: date,
+                        displayTime: format(
+                          parseISO(`${date.datetime}${date.offset}`),
+                          "h:mmaaa"
+                        ),
+                      };
+                    })
+                : []}
+              @change=${(e: Event) => {
+                if (e.target instanceof TimePicker) {
+                  if (!this.selectedDate) return;
+                  const daysAvailabilities =
+                    this.availabilitiesGroupedByDay[
+                      format(new Date(this.selectedDate), "y-MM-dd")
+                    ];
+                  const index = e.target.selectedTime
+                    ? daysAvailabilities.indexOf(
+                        e.target.selectedTime.dateWithTimeZoneOffset
+                      )
+                    : null;
+                  this.selectedTime =
+                    index !== null ? daysAvailabilities[index] : null;
+                }
+              }}
+            ></time-picker>
+          </div>
+        </div>
+      </div>`;
+  }
+
+  closeButton(): TemplateResult {
+    return html` <button
+      id="close-button"
+      @click=${this.onCloseClicked}
+      aria-label="Close"
+      aria-describedby="close-button"
+    >
+      <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()}`;
+      },
+    },
+    {
+      validate: (): boolean => this.validators.leadInfo(),
+      // last page gets <action-confirm-button> instead of the regular button
+      nextButtonText: null,
+      renderNextButton: (): TemplateResult => html` <action-confirm-button
+        id="schedule-bttn"
+        .onClick=${this.submit}
+        .isLoading=${this.isSubmitting}
+        height="50px"
+        width="145px"
+        text="Schedule tour"
+        ?disabled=${!this.formIsValidForSubmission()}
+      ></action-confirm-button>`,
+      nextButtonAction: null,
+      render: (): TemplateResult => {
+        return html`${this.userInfoAndLayoutMenu()}`;
+      },
+    },
+  ];
+
+  userInfoAndLayoutMenu(): TemplateResult {
+    return html`<h2 class="journey-header">Your Information</h2>
+      <div id="yourInformationMenu">
+        <div id="namesWrapper">
+          <div class="nameContainer" id="firstName">
+            <input
+              class=${classMap({
+                ["webchat-input"]: true,
+                ["nameInput"]: true,
+                ["webchat-font__desktop"]: !isMobile(),
+                ["webchat-font__mobile"]: isMobile(),
+              })}
+              type="text"
+              placeholder="First name"
+              name="firstName"
+              autocomplete="given-name"
+              @input=${() => this.requestUpdate()}
+            />
+          </div>
+          <div class="nameContainer" id="lastName">
+            <input
+              class=${classMap({
+                ["webchat-input"]: true,
+                ["nameInput"]: true,
+                ["webchat-font__desktop"]: !isMobile(),
+                ["webchat-font__mobile"]: isMobile(),
+              })}
+              type="text"
+              placeholder="Last name"
+              name="lastName"
+              autocomplete="family-name"
+              @input=${() => this.requestUpdate()}
+            />
+          </div>
+        </div>
+
+        <div class="inputContainer" id="email">
+          <input
+            class=${classMap({
+              ["webchat-input"]: true,
+              ["webchat-font__desktop"]: !isMobile(),
+              ["webchat-font__mobile"]: isMobile(),
+            })}
+            type="email"
+            inputmode="email"
+            placeholder="Email"
+            name="email"
+            autocomplete="email"
+            .value=${this.email}
+            @input=${this.onChangeEmail}
+          />
+        </div>
+        <div class="inputContainer" id="phone">
+          <input
+            class=${classMap({
+              ["webchat-input"]: true,
+              ["webchat-font__desktop"]: !isMobile(),
+              ["webchat-font__mobile"]: isMobile(),
+              ["webchat-input__error"]:
+                this.phoneNumber.length === 14 &&
+                !isValidPhoneNumber(this.phoneNumber),
+            })}
+            type="tel"
+            inputmode="tel"
+            placeholder="Phone"
+            name="phone"
+            autocomplete="tel-national"
+            maxlength="14"
+            .value=${this.phoneNumber}
+            @keydown=${this.handlePhoneKeydown}
+            @keyup=${this.handlePhoneKeyup}
+            @input=${(e: Event) => {
+              if (!e.target) {
+                return;
+              }
+              this.phoneNumber = formatToPhoneInput(
+                (e.target as HTMLInputElement).value
+              );
+            }}
+          />
+          ${this.phoneNumber.length === 14 &&
+          !isValidPhoneNumber(this.phoneNumber)
+            ? html`<p class="error-message">Invalid phone number</p>`
+            : ""}
+        </div>
+        ${this.leadSources.length > 0 &&
+        (this.featureFlagShowDropdown === FeatureFlagsShowDropdown.always ||
+          (this.featureFlagShowDropdown ===
+            FeatureFlagsShowDropdown.onAttributionFailure &&
+            this.currentLeadSource.length === 0))
+          ? html` <me-select
+              id="leadSource"
+              value="${this.currentLeadSource}"
+              placeholder="How did you hear about us?"
+              .options="${this.leadSources.map((i) => ({
+                label: i,
+                value: i,
+              }))}"
+              @change=${() => {
+                this.requestUpdate();
+              }}
+            >
+            </me-select>`
+          : ""}
+      </div> `;
+  }
+
+  confirmationMessage(): TemplateResult {
+    if (!this.selectedDate || !this.selectedTime || this.tourType === null)
+      return html``;
+    // format example: "November 9th, 2022 at 11:00pm"
+    const readableDateAndTime = format(
+      parseISO(`${this.selectedTime.datetime}${this.selectedTime.offset}`),
+      "h:mmaaa"
+    );
+
+    if (this.canceledReschedule) {
+      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!</p>
+          <p>We'll see you at your originally schedule tour time.</p>
+        </div>
+      `;
+    }
+
+    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!</p>
+        <p>
+          Your
+          ${{
+            [TourType.Guided]: "guided",
+            [TourType.Self]: "self-guided",
+            [TourType.Virtual]: "virtual",
+          }[this.tourType]}
+          tour is
+          ${this.promptForReschedule ? html`rescheduled` : html`scheduled`} for
+          ${readableDateAndTime}.
+        </p>
+        <p>
+          Look for an email confirmation along with instructions and directions.
+        </p>
+        <p>You can make changes at any time, just reply to the email.</p>
+      </div>
+    `;
+  }
+
+  loadingIcon(size = 21): TemplateResult {
+    return html` <svg
+      id="loadingIcon"
+      width=${size}
+      height=${size}
+      viewBox="0 0 21 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M17.835 13.1045C18.4839 11.5628 18.6332 9.85647 18.2621 8.22548C17.8909 6.5945 17.018 5.12084 15.7659 4.0117C14.5139 2.90256 12.9457 2.21372 11.2818 2.04201C9.618 1.87031 7.94218 2.22438 6.49 3.05445L5.498 1.31745C7.01563 0.450066 8.73419 -0.00418222 10.4822 2.90165e-05C12.2302 0.00424025 13.9466 0.466764 15.46 1.34145C19.95 3.93345 21.67 9.48345 19.577 14.1115L20.919 14.8855L16.754 17.0995L16.589 12.3855L17.835 13.1045ZM3.085 6.89845C2.43614 8.44015 2.28678 10.1464 2.65792 11.7774C3.02905 13.4084 3.90201 14.8821 5.15407 15.9912C6.40613 17.1003 7.97432 17.7892 9.63816 17.9609C11.302 18.1326 12.9778 17.7785 14.43 16.9485L15.422 18.6855C13.9044 19.5528 12.1858 20.0071 10.4378 20.0029C8.68979 19.9987 6.97344 19.5361 5.46 18.6615C0.97 16.0695 -0.75 10.5195 1.343 5.89145L0 5.11845L4.165 2.90445L4.33 7.61845L3.084 6.89945L3.085 6.89845Z"
+        fill="#1E1E1E"
+      />
+    </svg>`;
+  }
+
+  render(): TemplateResult {
+    const isLoading =
+      this.waitingForAvailabilities || this.shouldAllowScheduleLoading;
+    if (!this.shouldAllowScheduling && !isLoading) {
+      return html` <div
+        id="tour-scheduler-inner-form"
+        class="${classnames({
+          "tour-scheduler-full": !this.compactDesign && !isMobile(),
+          "tour-scheduler-compact": this.compactDesign && !isMobile(),
+          "tour-scheduler-mobile": isMobile(),
+        })}"
+      >
+        <div id="top-header">
+          <div></div>
+          ${this.closeButton()}
+        </div>
+        <div class="center-tour-not-avail">
+          <h1>Sorry, there are currently no tour availabilities</h1>
+          <p>Please check back again later</p>
+        </div>
+      </div>`;
+    }
+    if (isLoading) {
+      return html` <div
+        id="tour-scheduler-inner-form"
+        class="${classnames({
+          "tour-scheduler-full": !this.compactDesign && !isMobile(),
+          "tour-scheduler-compact": this.compactDesign && !isMobile(),
+          "tour-scheduler-mobile": isMobile(),
+        })}"
+      >
+        <div class="center-tour-not-avail">
+          <h1>Searching for availabilities...</h1>
+          <div class="loading-entire-tour-icon">${this.loadingIcon(48)}</div>
+        </div>
+      </div>`;
+    }
+    if (this.errorGettingAvailabilities) {
+      return html` <div
+        class="${classnames({
+          "tour-scheduler-full": !this.compactDesign && !isMobile(),
+          "tour-scheduler-compact": this.compactDesign && !isMobile(),
+          "tour-scheduler-mobile": isMobile(),
+        })}"
+      >
+        <div id="top-header">
+          <div></div>
+          ${this.closeButton()}
+        </div>
+        <div class="center-tour-not-avail">
+          <div>
+            <p>Sorry, there are currently no tour availabilities!</p>
+            <p>
+              We apologize, but there are currently no tours available. This
+              could be due to all slots being filled, off-season periods, or
+              maintenance.
+            </p>
+            <p>
+              We understand that this may be disappointing and we apologize for
+              any inconvenience. We recommend checking back soon as our schedule
+              frequently updates.
+            </p>
+            <p>
+              In the meantime, feel free to explore our website for other
+              information and attractions. Thank you for your understanding and
+              patience!
+            </p>
+          </div>
+        </div>
+      </div>`;
+    }
+    if (!isMobile()) {
+      return html`
+        <div
+          class="${classnames({
+            "tour-scheduler-full": !this.compactDesign,
+            "tour-scheduler-compact": this.compactDesign,
+            loading: isLoading,
+          })}"
+          @leadsource="${(e: CustomEvent) =>
+            (this.selectedLeadSource = e.detail.selectedLeadSource)}"
+        >
+          <div id="top-header">
+            <h1 id="tour-header-title">
+              ${isLoading
+                ? html`${this.loadingIcon()} Searching availabilities...`
+                : "Schedule a Tour"}
+            </h1>
+            ${this.closeButton()}
+          </div>
+
+          ${this.tourIsBooked || this.canceledReschedule
+            ? html`
+                <div class="tour-scheduler">${this.confirmationMessage()}</div>
+              `
+            : this.promptForReschedule
+            ? html`
+                <div id="scheduler-container">
+                  <div>
+                    <h2 class="journey-header">Reschedule Tour</h2>
+                    <p class="explanation">
+                      You already have a tour scheduled. Would you like to
+                      reschedule?
+                    </p>
+                  </div>
+                </div>
+                <div id="tour-scheduler-footer">
+                  <p class="explanation">
+                    We'll send a confirmation and any follow-ups to your email
+                    address, please reply to the email to make any appointment
+                    changes.
+                    ${disclaimer({
+                      buildingName: this.buildingName,
+                      phoneNumberInput: this.phoneInput?.value,
+                      emailInput: this.emailInput?.value,
+                      orgLegalName: this.orgLegalName,
+                    })}
+                  </p>
+
+                  <div class="reschedule-buttons-wrapper">
+                    <action-confirm-button
+                      id="cancel-reschedule-bttn"
+                      .onClick=${() => {
+                        this.canceledReschedule = true;
+                      }}
+                      .isLoading=${this.isSubmitting}
+                      height="50px"
+                      width="145px"
+                      text="Cancel"
+                      ?disabled=${!this.formIsValidForSubmission()}
+                    ></action-confirm-button>
+                    <action-confirm-button
+                      id="reschedule-button"
+                      .onClick=${this.submit}
+                      .isLoading=${this.isSubmitting}
+                      height="50px"
+                      width="145px"
+                      text="Reschedule"
+                      ?disabled=${!this.formIsValidForSubmission()}
+                    ></action-confirm-button>
+                  </div>
+                </div>
+              `
+            : html`
+                <div id="scheduler-container">
+                  <div id="book-tour-journey-items">
+                    <div id="tour-type-menu-outer-container">
+                      ${this.tourTypeMenu()}
+                    </div>
+                    <div id="date-and-time-menu-outer-container">
+                      ${this.dateAndTimeMenu()}
+                    </div>
+
+                    <div id="user-info-and-layout-menu-outer-container">
+                      ${this.userInfoAndLayoutMenu()}
+                    </div>
+                  </div>
+                </div>
+                <div id="tour-scheduler-footer">
+                  <p class="explanation">
+                    We'll send a confirmation and any follow-ups to your email
+                    address, please reply to the email to make any appointment
+                    changes.
+                    ${disclaimer({
+                      buildingName: this.buildingName,
+                      phoneNumberInput: this.phoneInput?.value,
+                      emailInput: this.emailInput?.value,
+                      orgLegalName: this.orgLegalName,
+                    })}
+                  </p>
+
+                  <action-confirm-button
+                    id="schedule-bttn"
+                    .onClick=${this.submit}
+                    .isLoading=${this.isSubmitting}
+                    height="50px"
+                    width="145px"
+                    text="Schedule tour"
+                    ?disabled=${!this.formIsValidForSubmission()}
+                  ></action-confirm-button>
+                </div>
+              `}
+        </div>
+      `;
+    } else {
+      const currentPage = this.mobilePages[this.mobilePageIndex];
+      return html`
+        <div
+          class="${classnames("tour-scheduler-mobile", {
+            loading: isLoading,
+          })}"
+        >
+          <div id="top-header">
+            <h1 id="scheduleATour">
+              ${isLoading
+                ? html`${this.loadingIcon()} Searching availabilities...`
+                : "Schedule a tour"}
+            </h1>
+            ${this.closeButton()}
+          </div>
+          <div id="mobile-body-container">
+            ${this.canceledReschedule
+              ? 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!</p>
+                    <p>We'll see you at your originally schedule tour time.</p>
+                  </div>
+                `
+              : this.tourIsBooked
+              ? this.confirmationMessage()
+              : this.promptForReschedule
+              ? html` <div id="scheduler-container">
+                    <div>
+                      <h2 class="journey-header">Reschedule Tour</h2>
+                      <p class="explanation">
+                        You already have a tour scheduled. Would you like to
+                        reschedule?
+                      </p>
+                    </div>
+                  </div>
+                  <div id="tour-scheduler-footer">
+                    <div class="reschedule-buttons-wrapper">
+                      <action-confirm-button
+                        id="cancel-reschedule-bttn"
+                        .onClick=${() => {
+                          this.canceledReschedule = true;
+                        }}
+                        .isLoading=${this.isSubmitting}
+                        height="50px"
+                        width="145px"
+                        text="Cancel"
+                        ?disabled=${!this.formIsValidForSubmission()}
+                      ></action-confirm-button>
+                      <action-confirm-button
+                        id="reschedule-button"
+                        .onClick=${this.submit}
+                        .isLoading=${this.isSubmitting}
+                        height="50px"
+                        width="145px"
+                        text="Reschedule"
+                        ?disabled=${!this.formIsValidForSubmission()}
+                      ></action-confirm-button>
+                    </div>
+                  </div>`
+              : html` ${currentPage.render()}
+                ${!currentPage.renderNextButton
+                  ? html` <button
+                      id="mobile-next-bttn"
+                      @click=${currentPage.nextButtonAction}
+                      ?disabled=${(() => {
+                        return !currentPage.validate() || isLoading;
+                      })()}
+                    >
+                      ${currentPage.nextButtonText}
+                    </button>`
+                  : currentPage.renderNextButton()}`}
+            ${this.mobilePageIndex + 1 === this.mobilePages.length
+              ? html`
+                  ${disclaimer({
+                    buildingName: this.buildingName,
+                    phoneNumberInput: this.phoneInput?.value,
+                    emailInput: this.emailInput?.value,
+                    orgLegalName: this.orgLegalName,
+                  })}
+                `
+              : html``}
+          </div>
+        </div>
+      `;
+    }
+  }
+}
+
+export enum TourType {
+  Guided = "guided",
+  Self = "self",
+  Virtual = "virtual",
+}
+
+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",
+};