@meetelise/chat 1.21.0 → 1.21.2

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

@@ -1,8 +1,8 @@
-import { css, html, LitElement, PropertyValueMap, TemplateResult } from "lit";
+import { html, LitElement, PropertyValueMap, TemplateResult } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import {
   shortcutKeyIsPressed,
-  formatToPhone,
+  formatToPhoneInput,
   isPrintableCharacter,
 } from "../actions/formatPhoneNumber";
 import "./tour-type-option.ts";
@@ -19,39 +19,28 @@ import { format } from "date-fns";
 import { DatePicker } from "./date-picker";
 import { MESelect } from "../me-select";
 import { TimePicker } from "./time-picker";
-import { LabeledOption, UnitV2 } from "../../fetchBuildingInfo";
-import { isMobile } from "../../utils";
-import axios from "axios";
-import { isNumber, isString, mapValues } from "lodash";
+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 postLeadSources from "../../postLeadSources";
-
-const getHumanReadableLayout = (layout: string) => {
-  if (layout == "studio") return "Studio";
-  return {
-    "1br": "1 bedroom",
-    "2br": "2 bedroom",
-    "3br": "3 bedroom",
-    "4br": "4 bedroom",
-    "5br": "5 bedroom",
-    "6br": "6 bedroom",
-    "7br": "7 bedroom",
-    "8br": "8 bedroom",
-    "9br": "9 bedroom",
-    "10br": "10 bedroom",
-  }[layout];
-};
+import { FeatureFlagsShowDropdown } from "../../fetchFeatureFlag";
+import { pushGtmEvent } from "../../gtm";
+import disclaimer from "../../disclaimers";
+import { tourSchedulerStyles } from "./tourSchedulerStyles";
+import { defaultBrandColor, defaultBackgroundColor } from "../../themes";
+import { LogType, sendLoggingEvent } from "../../analytics";
+import LeadSourceClient, {
+  getDefaultLeadSourceAttribution,
+} from "../LeadSourceClient";
+import { getShouldAllowScheduling } from "../../getShouldAllowScheduling";
 
 @customElement("tour-scheduler")
 export class TourScheduler extends LitElement {
-  @property({ attribute: false })
-  layoutOptions: string[] = [];
-  @property({ attribute: false })
-  unitOptions: UnitV2[] = [];
   @property({ attribute: false })
   tourTypeOptions: LabeledOption[] = [];
   @property({ attribute: true })
@@ -68,6 +57,15 @@ export class TourScheduler extends LitElement {
   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()
@@ -98,12 +96,32 @@ export class TourScheduler extends LitElement {
   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 })
-  currentLeadSource = ""; // the default lead source based on referrer and query params
+  currentLeadSource = ""; // the default lead source based on referrer and query params.
+
+  @property({ attribute: true })
+  featureFlagShowDropdown = "";
+
+  @property({ attribute: true })
+  compactDesign = false;
+
+  @property({ attribute: true })
+  brandColor: string = defaultBrandColor;
+
+  @property({ attribute: true })
+  backgroundColor: string = defaultBackgroundColor;
 
   @query(".nameContainer#firstName input")
   firstNameInput!: HTMLInputElement;
@@ -113,35 +131,118 @@ export class TourScheduler extends LitElement {
   emailInput!: HTMLInputElement;
   @query(".inputContainer#phone input")
   phoneInput!: HTMLInputElement;
-  @query("me-select#unitType")
-  unitTypeSelect!: MESelect;
-  @query("me-select#layoutType")
-  layoutTypeSelect!: MESelect;
   @query("me-select#leadSource")
   selectedLeadSource!: MESelect;
 
+  @state()
+  firstNameInputValue = "";
+  @state()
+  lastNameInputValue = "";
+  @state()
+  leadSourceInputValue = "";
+
+  @state()
+  errorGettingAvailabilities = false;
+
   firstUpdated = async (): Promise<void> => {
-    const availabilitiesExistForTourType =
-      await getExistenceOfAvailabilitiesByTourType();
-    this.shouldShowTourType = {
-      [TourType.Guided]:
-        this.tourTypeOptions.map((o) => o.value).includes("WITH_AGENT") &&
-        availabilitiesExistForTourType[TourType.Guided],
-      [TourType.Self]:
-        this.tourTypeOptions.map((o) => o.value).includes("SELF_GUIDED") &&
-        availabilitiesExistForTourType[TourType.Self],
-      [TourType.Virtual]:
-        this.tourTypeOptions.map((o) => o.value).includes("VIRTUAL_SHOWING") &&
-        availabilitiesExistForTourType[TourType.Virtual],
-    };
-    if (this.tourType === null) {
+    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;
-      return;
+    } 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,
+      });
     }
-    this.availabilitiesGroupedByDay = await getAvailabilitiesGroupedByDay(
-      tourTypeMap[this.tourType]
-    );
-    this.waitingForAvailabilities = false;
   };
 
   protected willUpdate = async (
@@ -176,7 +277,7 @@ export class TourScheduler extends LitElement {
         this.phoneNumber.slice(0, cursorPosition) +
         e.key +
         this.phoneNumber.slice(cursorPosition);
-      this.phoneNumber = formatToPhone(updated.replace(/\D/g, ""));
+      this.phoneNumber = formatToPhoneInput(updated.replace(/\D/g, ""));
       this.phoneInput.value = this.phoneNumber;
     } else if (e.key === "Backspace") {
       /*
@@ -212,7 +313,7 @@ export class TourScheduler extends LitElement {
         0,
         -1
       )}${digitsAfterCursor}`;
-      this.phoneNumber = formatToPhone(updatedDigits);
+      this.phoneNumber = formatToPhoneInput(updatedDigits);
       this.phoneInput.value = this.phoneNumber;
       const numOfCharactersDeleted =
         originalCharacterCount - this.phoneNumber.length;
@@ -283,7 +384,7 @@ export class TourScheduler extends LitElement {
     const numbersAfterCursor = cursorPosition
       ? this.phoneInput.value.slice(cursorPosition).replace(/\D/g, "")
       : "";
-    this.phoneNumber = formatToPhone(this.phoneInput.value);
+    this.phoneNumber = formatToPhoneInput(this.phoneInput.value);
 
     // EXAMPLES: (123)| 4            numbersAfterCursor will be '4'.
     let cursorNegativeIndex = 0;
@@ -316,19 +417,17 @@ export class TourScheduler extends LitElement {
         this.emailInput?.value.includes("@") &&
         // TODO: deleting phone number doesn't cause validation to fail, at least on mobile
         !!this.phoneNumber &&
-        this.phoneNumber.length === 14
+        this.phoneNumber.length === 14 &&
+        isValidPhoneNumber(this.phoneNumber)
       );
     },
-    leadSource: (): boolean =>
-      this.leadSources.length > 0 ? !!this.selectedLeadSource?.value : true,
   };
 
   formIsValidForSubmission = (): boolean => {
     const isValid =
       this.validators.tourType() &&
       this.validators.dateAndTime() &&
-      this.validators.leadInfo() &&
-      this.validators.leadSource();
+      this.validators.leadInfo();
     return isValid;
   };
 
@@ -347,36 +446,62 @@ export class TourScheduler extends LitElement {
   };
 
   submit = async (): Promise<void> => {
-    if (!this.selectedDate || !this.selectedTime || this.tourType === null)
+    if (!this.selectedDate || !this.selectedTime || this.tourType === null) {
       return;
+    }
     const queryParams = new URLSearchParams(window.location.search);
+
+    const parsedLeadSource =
+      this.selectedLeadSource && this.selectedLeadSource.value
+        ? this.selectedLeadSource.value
+        : this.leadSourceInputValue ?? 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,
-      last_name: this.lastNameInput.value,
+      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"
-      layouts: this.layoutTypeSelect.value
-        ? [this.layoutTypeSelect.value]
-        : null,
-      unit_numbers:
-        this.unitTypeSelect && this.unitTypeSelect.value
-          ? [this.unitTypeSelect.value]
-          : null,
-      lead_sources:
-        this.selectedLeadSource && this.selectedLeadSource.value
-          ? [this.selectedLeadSource.value, "property-website"]
-          : ["property-website"],
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
+      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/scheduleMe`;
+    const url = `https://app.meetelise.com/platformApi/state/create/v2/scheduleMe`;
     this.isSubmitting = true;
-
     try {
       await axios.post(url, data, {
         headers: {
@@ -385,496 +510,134 @@ export class TourScheduler extends LitElement {
           ["org-slug"]: this.orgSlug,
         },
       });
-      await postLeadSources({
-        chatId: this.chatId,
-        website: window.location.origin,
-        referrer: document.referrer,
-        buildingSlug: this.buildingSlug,
-        selectedLeadSource:
-          this.selectedLeadSource && this.selectedLeadSource.value
-            ? this.selectedLeadSource.value
-            : "",
+
+      this.leadSourceClient?.checkAndHandleForLogLeadSource({
+        webchatAction: "tour-scheduler",
+        stateId: null,
       });
       this.isSubmitting = false;
       this.tourIsBooked = true;
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (e: any) {
-      const message = e.response.data["detail"] || "Failed to book tour";
+    } 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
+      ) {
+        this.promptForReschedule = true;
+        this.isSubmitting = false;
+        this.tourIsBooked = false;
+        return;
+      }
       alert(message);
       this.isSubmitting = false;
       this.tourIsBooked = false;
     }
   };
 
-  static styles = [
-    css`
-      * {
-        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 25px 0 27px;
-
-        /* grid stuff */
-        display: grid;
-        grid-template-columns: 229px 432px 305px;
-        grid-template-rows: 44px 54px 32px 245px 117px 1px;
-      }
-
-      @media screen and (max-width: 1000px) {
-        .tour-scheduler {
-          transform: translate(-50%, -50%) scale(0.8, 0.6);
-        }
-      }
-
-      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;
-        z-index: 1; // idk why, but it's invisible on the confirmation page otherwise
-      }
-
-      button#closeButton {
-        grid-row: 1 / 2;
-        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 {
-        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: 100%;
-        height: 49px;
-      }
-
-      .unitLayoutChoices {
-        grid-row: 5 / 6;
-        grid-column: 3;
-        align-self: start;
-        display: flex;
-        flex-direction: column;
-      }
-      .unitLayoutChoicesDropdowns {
-        display: flex;
-        justify-content: space-between;
-        gap: 6px;
-      }
-
-      .unitLayoutChoice {
-        margin-bottom: 12px;
-        width: -webkit-fill-available;
-      }
-
-      h2.unitLayoutChoice {
-        margin-bottom: 7px;
-      }
-
-      .unitLayoutOptions {
-        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;
-      }
-
-      #schedule {
-        width: 145px;
-        height: 50px;
-        grid-row: 7;
-        grid-column: 3;
-        justify-self: end;
-        align-self: start;
-        margin-top: 18px;
-      }
-
-      #confirmationMessage {
-        grid-row: 3;
-        width: 625px;
-      }
-
-      #confirmationMessage > p {
-        font-size: 18px;
-      }
-
-      /* Loading styles: pulsing gray overlay on all the form elements */
-
-      @keyframes spin {
-        0% {
-          transform: none;
-        }
-        50% {
-          transform: rotateZ(180deg);
-        }
-        100% {
-          transform: rotateZ(360deg);
-        }
-      }
-
-      svg#loadingIcon {
-        animation: spin 2s infinite linear;
-      }
-
-      .tour-scheduler.loading #scheduleATour {
-        display: flex;
-        gap: 10px;
-      }
-
-      @keyframes loadingPulse {
-        0% {
-          background-color: #e7e7e7;
-        }
-        50% {
-          background-color: white;
-        }
-        100% {
-          background-color: #e7e7e7;
-        }
-      }
-
-      tour-type-option,
-      date-picker,
-      #yourInformationMenu .inputContainer {
-        position: relative;
-      }
-
-      .tour-scheduler.loading
-        :is(tour-type-option, date-picker, #yourInformationMenu
-          .inputContainer)::after {
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        z-index: 1;
-        animation: loadingPulse 2s infinite;
-      }
-
-      .tour-scheduler.loading tour-type-option::after {
-        border-radius: 10px;
-        width: 200px;
-      }
-
-      .tour-scheduler.loading date-picker::after {
-        border-radius: 10px;
-        width: 205px;
-      }
-
-      .tour-scheduler.loading #yourInformationMenu .inputContainer input {
-        visibility: hidden;
-      }
-
-      .tour-scheduler.loading time-picker {
-        display: none;
-      }
-
-      #namesWrapper {
-        display: flex;
-        justify-content: space-between;
-      }
-
-      .nameContainer {
-        width: 48%;
-      }
-
-      .nameInput {
-        width: 100%;
-      }
-
-      @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;
-        }
-      }
-    `,
-    InputStyles,
-  ];
+  static styles = [tourSchedulerStyles, InputStyles];
 
   tourTypeMenu(): TemplateResult {
-    return html`<h2 id="tourType">Tour Type</h2>
-      <div id="tourTypeMenu">
-        ${this.shouldShowTourType[TourType.Guided]
+    return html`<h2 class="journey-header">Tour Type</h2>
+      <div id="tour-type-menu">
+        ${this.shouldShowTourType[TourType.Self]
           ? html` <tour-type-option
-              heading="Guided tour"
-              subtitle="with an agent"
+              heading="Take a tour"
+              subtitle="on your own"
+              .brandColor=${this.brandColor}
+              .backgroundColor=${this.backgroundColor}
               @click="${async () => {
-                this.tourType = TourType.Guided;
-
-                if (this.escortedToursLink) {
-                  window.open(this.escortedToursLink, "_blank");
+                this.tourType = TourType.Self;
+                if (this.sgtUrl) {
+                  window.open(this.sgtUrl, "_blank");
                 }
                 this.availabilitiesGroupedByDay =
                   await getAvailabilitiesGroupedByDay(
-                    tourTypeMap[TourType.Guided]
+                    tourTypeMap[TourType.Self]
                   );
               }}"
               @keydown="${(e: KeyboardEvent) => {
                 if ([" ", "Enter"].includes(e.key)) {
                   e.preventDefault();
-                  this.tourType = TourType.Guided;
+                  this.tourType = TourType.Self;
                 }
               }}"
-              ?selected="${this.tourType === TourType.Guided}"
+              ?selected="${this.tourType === TourType.Self}"
             >
               <svg
                 slot="icon"
-                width="31"
+                width="28"
                 height="31"
-                viewBox="0 0 31 31"
+                viewBox="0 0 28 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
+                  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.shouldShowTourType[TourType.Self]
-          ? html`<tour-type-option
-              heading="Take a tour"
-              subtitle="on your own"
+        ${this.shouldShowTourType[TourType.Guided]
+          ? html` <tour-type-option
+              heading="Guided tour"
+              subtitle="with an agent"
+              .brandColor=${this.brandColor}
+              .backgroundColor=${this.backgroundColor}
               @click="${async () => {
-                this.tourType = TourType.Self;
-                if (this.sgtUrl) {
-                  window.open(this.sgtUrl, "_blank");
+                this.tourType = TourType.Guided;
+
+                if (this.escortedToursLink) {
+                  window.open(this.escortedToursLink, "_blank");
                 }
                 this.availabilitiesGroupedByDay =
                   await getAvailabilitiesGroupedByDay(
-                    tourTypeMap[TourType.Self]
+                    tourTypeMap[TourType.Guided]
                   );
               }}"
               @keydown="${(e: KeyboardEvent) => {
                 if ([" ", "Enter"].includes(e.key)) {
                   e.preventDefault();
-                  this.tourType = TourType.Self;
+                  this.tourType = TourType.Guided;
                 }
               }}"
-              ?selected="${this.tourType === TourType.Self}"
+              ?selected="${this.tourType === TourType.Guided}"
             >
               <svg
                 slot="icon"
-                width="28"
+                width="31"
                 height="31"
-                viewBox="0 0 28 31"
+                viewBox="0 0 31 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
+                  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"}"
                 />
@@ -882,9 +645,11 @@ export class TourScheduler extends LitElement {
             </tour-type-option>`
           : ""}
         ${this.shouldShowTourType[TourType.Virtual]
-          ? html`<tour-type-option
+          ? html` <tour-type-option
               heading="Virtual tour"
               subtitle="over video"
+              .brandColor=${this.brandColor}
+              .backgroundColor=${this.backgroundColor}
               @click="${async () => {
                 this.tourType = TourType.Virtual;
                 if (this.virtualToursLink) {
@@ -923,8 +688,19 @@ export class TourScheduler extends LitElement {
       </div>`;
   }
 
-  dateAndTimeMenu(horizontal = false): TemplateResult {
-    return html`<h2 id="dateAndTime">Date and Time</h2>
+  dateAndTimeMenu(): TemplateResult {
+    if (this.tourType === TourType.Self && this.sgtUrl) {
+      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
@@ -933,54 +709,70 @@ export class TourScheduler extends LitElement {
               (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) {
+                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>
-          <time-picker
-            ?selecteddateexists=${!!this.selectedDate}
-            ?horizontal=${horizontal}
-            .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
+          <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))
                     )
-                  : null;
-                this.selectedTime =
-                  index !== null ? daysAvailabilities[index] : null;
-              }
-            }}
-          ></time-picker>
+                    .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="closeButton" @click=${this.onCloseClicked}>
+    return html` <button id="close-button" @click=${this.onCloseClicked}>
       <svg
         width="19"
         height="19"
@@ -1023,15 +815,15 @@ export class TourScheduler extends LitElement {
         this.mobilePageIndex++;
       },
       render: (): TemplateResult => {
-        return html`${this.dateAndTimeMenu(true)}`;
+        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"
+      renderNextButton: (): TemplateResult => html` <action-confirm-button
+        id="schedule-bttn"
         .onClick=${this.submit}
         .isLoading=${this.isSubmitting}
         height="50px"
@@ -1047,7 +839,7 @@ export class TourScheduler extends LitElement {
   ];
 
   userInfoAndLayoutMenu(): TemplateResult {
-    return html`<h2 id="yourInformation">Your information</h2>
+    return html`<h2 class="journey-header">Your Information</h2>
       <div id="yourInformationMenu">
         <div id="namesWrapper">
           <div class="nameContainer" id="firstName">
@@ -1055,6 +847,8 @@ export class TourScheduler extends LitElement {
               class=${classMap({
                 ["webchat-input"]: true,
                 ["nameInput"]: true,
+                ["webchat-font__desktop"]: !isMobile(),
+                ["webchat-font__mobile"]: isMobile(),
               })}
               type="text"
               placeholder="First name"
@@ -1068,6 +862,8 @@ export class TourScheduler extends LitElement {
               class=${classMap({
                 ["webchat-input"]: true,
                 ["nameInput"]: true,
+                ["webchat-font__desktop"]: !isMobile(),
+                ["webchat-font__mobile"]: isMobile(),
               })}
               type="text"
               placeholder="Last name"
@@ -1078,125 +874,74 @@ export class TourScheduler extends LitElement {
           </div>
         </div>
 
-          <div class="inputContainer" id="email">
-            <input
-              class="webchat-input"
-              type="email"
-              inputmode="email"
-              placeholder="Email"
-              name="email"
-              autocomplete="email"
-              .value=${this.email}
-              @input=${this.onChangeEmail}
-            />
-          </div>
-          <div class="inputContainer" id="phone">
-            <input
-              class="webchat-input"
-              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 = formatToPhone(
-                  (e.target as HTMLInputElement).value
-                );
-              }}
-            />
-          </div>
-          ${
-            this.leadSources.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 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="unitLayoutChoices">
-        ${
-          this.layoutOptions.length > 0
-            ? html`<h2 class="unitLayoutChoice">
-                What would you like to view?
-              </h2>`
-            : ""
-        }
-        <div class="unitLayoutChoicesDropdowns">
-          ${
-            this.layoutOptions.length > 0
-              ? html`<div class="unitLayoutChoice">
-                  <div class="unitLayoutOptions">
-                    <me-select
-                      id="layoutType"
-                      placeholder="Select layout"
-                      .options="${sortedLayouts(this.layoutOptions).map(
-                        (i) => ({
-                          label: getHumanReadableLayout(i),
-                          value: i,
-                        })
-                      )}"
-                      defaultOption="Studio"
-                      @change=${() => {
-                        // to revalidate the form.
-                        this.requestUpdate();
-                      }}
-                      >Studio
-                    </me-select>
-                  </div>
-                </div>`
-              : ""
-          }
-          ${
-            this.unitOptions.filter(
-              (i) =>
-                !this.layoutTypeSelect ||
-                i.layout === this.layoutTypeSelect.value
-            ).length > 0
-              ? html`
-                  <me-select
-                    id="unitType"
-                    placeholder="Select unit"
-                    .options="${this.unitOptions
-                      .filter(
-                        (i) =>
-                          !this.layoutTypeSelect ||
-                          i.layout === this.layoutTypeSelect.value
-                      )
-                      .map((i) => ({
-                        label: i.name,
-                        value: i.name,
-                      }))}"
-                    defaultOption="Studio"
-                    @change=${() => {
-                      // to revalidate the form
-                      this.requestUpdate();
-                    }}
-                    >Studio
-                  </me-select>
-                `
-              : ""
-          }
-          </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> `;
   }
 
@@ -1208,6 +953,28 @@ export class TourScheduler extends LitElement {
       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
@@ -1222,16 +989,17 @@ export class TourScheduler extends LitElement {
             fill="#202020"
           />
         </svg>
+        <p>Thank you!</p>
         <p>
-          Thank you!
-          <br />
           Your
           ${{
             [TourType.Guided]: "guided",
             [TourType.Self]: "self-guided",
             [TourType.Virtual]: "virtual",
           }[this.tourType]}
-          tour is scheduled for ${readableDateAndTime}.
+          tour is
+          ${this.promptForReschedule ? html`rescheduled` : html`scheduled`} for
+          ${readableDateAndTime}.
         </p>
         <p>
           Look for an email confirmation along with instructions and directions.
@@ -1241,11 +1009,11 @@ export class TourScheduler extends LitElement {
     `;
   }
 
-  loadingIcon(): TemplateResult {
-    return html`<svg
+  loadingIcon(size = 21): TemplateResult {
+    return html` <svg
       id="loadingIcon"
-      width="21"
-      height="21"
+      width=${size}
+      height=${size}
       viewBox="0 0 21 21"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -1258,75 +1026,277 @@ export class TourScheduler extends LitElement {
   }
 
   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">
+          <h1>Sorry, there are currently no tour availabilities!</h1>
+          <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>`;
+    }
     if (!isMobile()) {
       return html`
         <div
-          class="${classnames("tour-scheduler", {
-            loading: this.waitingForAvailabilities,
+          class="${classnames({
+            "tour-scheduler-full": !this.compactDesign,
+            "tour-scheduler-compact": this.compactDesign,
+            loading: isLoading,
           })}"
           @leadsource="${(e: CustomEvent) =>
             (this.selectedLeadSource = e.detail.selectedLeadSource)}"
         >
-          <h1 id="scheduleATour">
-            ${this.waitingForAvailabilities
-              ? html`${this.loadingIcon()} Searching availabilities...`
-              : "Schedule a tour"}
-          </h1>
-          ${this.closeButton()}
-          ${this.tourIsBooked
+          <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>
               `
-            : 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>
-                <action-confirm-button
-                  id="schedule"
-                  .onClick=${this.submit}
-                  .isLoading=${this.isSubmitting}
-                  height="50px"
-                  width="145px"
-                  text="Schedule tour"
-                  ?disabled=${!this.formIsValidForSubmission()}
-                ></action-confirm-button>`}
+            : 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.
+                    ${disclaimer({
+                      buildingName: this.buildingName,
+                      phoneNumberInput: this.phoneInput?.value,
+                      emailInput: this.emailInput?.value,
+                    })}
+                  </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.
+                    ${disclaimer({
+                      buildingName: this.buildingName,
+                      phoneNumberInput: this.phoneInput?.value,
+                      emailInput: this.emailInput?.value,
+                    })}
+                  </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", {
-            loading: this.waitingForAvailabilities,
+          class="${classnames("tour-scheduler-mobile", {
+            loading: isLoading,
           })}"
         >
-          <div id="topControls">
+          <div id="top-header">
             <h1 id="scheduleATour">
-              ${this.waitingForAvailabilities
+              ${isLoading
                 ? html`${this.loadingIcon()} Searching availabilities...`
                 : "Schedule a tour"}
             </h1>
             ${this.closeButton()}
           </div>
-          ${this.tourIsBooked
-            ? this.confirmationMessage()
-            : html` ${currentPage.render()}
-              ${!currentPage.renderNextButton
-                ? html` <button
-                    id="next"
-                    @click=${currentPage.nextButtonAction}
-                    ?disabled=${(() => {
-                      return (
-                        !currentPage.validate() || this.waitingForAvailabilities
-                      );
-                    })()}
-                  >
-                    ${currentPage.nextButtonText}
-                  </button>`
-                : currentPage.renderNextButton()}`}
+          <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,
+                  })}
+                `
+              : html``}
+          </div>
         </div>
       `;
     }
@@ -1353,43 +1323,3 @@ const tourTypeForSubmission = {
   [TourType.Self]: "self-guided-tour",
   [TourType.Virtual]: "live-virtual-tour",
 };
-
-const getLayoutOrder = (layout: string) => {
-  return {
-    studio: 0,
-    "1br": 1,
-    "2br": 2,
-    "3br": 3,
-    "4br": 4,
-    "5br": 5,
-    "6br": 6,
-    "7br": 7,
-    "8br": 8,
-    "9br": 9,
-    "10br": 10,
-  }[layout];
-};
-
-const getLayoutFromOrder = (order: number) => {
-  return {
-    0: "studio",
-    1: "1br",
-    2: "2br",
-    3: "3br",
-    4: "4br",
-    5: "5br",
-    6: "6br",
-    7: "7br",
-    8: "8br",
-    9: "9br",
-    10: "10br",
-  }[order];
-};
-
-const sortedLayouts = (layouts: string[]) => {
-  const layoutOrder = layouts
-    .map((layout) => getLayoutOrder(layout))
-    .filter(isNumber)
-    .sort();
-  return layoutOrder.map((order) => getLayoutFromOrder(order)).filter(isString);
-};