@meetelise/chat 1.30.4 → 1.31.0

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

@@ -42,6 +42,7 @@ import { getShouldAllowScheduling } from "../../getShouldAllowScheduling";
 import { TourVirtuallyIcon } from "../icons/TourVirtuallyIcon";
 import { TourSelfGuidedIcon } from "../icons/TourSelfGuidedIcon";
 import { TourWithAgentIcon } from "../icons/TourWithAgentIcon";
+import { shouldOpenTourLink } from "../../fetchBuildingWebchatView";
 
 @customElement("tour-scheduler")
 export class TourScheduler extends LitElement {
@@ -64,6 +65,8 @@ export class TourScheduler extends LitElement {
   @property({ attribute: true })
   virtualToursLink = "";
   @property({ attribute: true })
+  virtualToursTypeOffered = "";
+  @property({ attribute: true })
   orgSlug = "";
   @property({ attribute: true })
   hasDynamicSchedulingEnabled = false;
@@ -620,8 +623,10 @@ export class TourScheduler extends LitElement {
                 this.tourType = TourType.Self;
                 if (
                   this.sgtUrl &&
-                  this.selfGuidedToursTypeOffered !==
-                    "SCHEDULED_BY_ME_MANAGED_BY_ME"
+                  shouldOpenTourLink(
+                    TourType.Self,
+                    this.selfGuidedToursTypeOffered
+                  )
                 ) {
                   window.open(this.sgtUrl, "_blank");
                 }
@@ -689,7 +694,13 @@ export class TourScheduler extends LitElement {
               .backgroundColor=${this.backgroundColor}
               @click="${async () => {
                 this.tourType = TourType.Virtual;
-                if (this.virtualToursLink) {
+                if (
+                  this.virtualToursLink &&
+                  shouldOpenTourLink(
+                    TourType.Virtual,
+                    this.virtualToursTypeOffered
+                  )
+                ) {
                   window.open(this.virtualToursLink, "_blank");
                 }
                 this.availabilitiesGroupedByDay =
@@ -719,7 +730,7 @@ export class TourScheduler extends LitElement {
     if (
       this.tourType === TourType.Self &&
       this.sgtUrl &&
-      this.selfGuidedToursTypeOffered !== "SCHEDULED_BY_ME_MANAGED_BY_ME"
+      shouldOpenTourLink(this.tourType, this.selfGuidedToursTypeOffered)
     ) {
       return html`<h2 class="journey-header">Date and Time</h2>
         <div id="dateAndTimeMenu">
@@ -745,8 +756,10 @@ export class TourScheduler extends LitElement {
               if (
                 this.tourType === TourType.Self &&
                 this.sgtUrl &&
-                this.selfGuidedToursTypeOffered !==
-                  "SCHEDULED_BY_ME_MANAGED_BY_ME"
+                shouldOpenTourLink(
+                  this.tourType,
+                  this.selfGuidedToursTypeOffered
+                )
               ) {
                 window.open(this.sgtUrl, "_blank");
                 return;
@@ -755,7 +768,11 @@ export class TourScheduler extends LitElement {
                 window.open(this.escortedToursLink, "_blank");
                 return;
               }
-              if (this.tourType === TourType.Virtual && this.virtualToursLink) {
+              if (
+                this.tourType === TourType.Virtual &&
+                this.virtualToursLink &&
+                shouldOpenTourLink(this.tourType, this.virtualToursTypeOffered)
+              ) {
                 window.open(this.virtualToursLink, "_blank");
                 return;
               }

package/src/WebComponent/icons/DollarOutlineIcon.ts

@@ -1,7 +1,15 @@
 import { svg, SVGTemplateResult } from "lit";
 
-const DollarOutlineIcon = (color = "#347FF7"): SVGTemplateResult => svg`
-  <svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+type DollarOutlineIconProps = {
+  color?: string;
+  size?: number;
+};
+
+const DollarOutlineIcon = ({
+  color = "#347FF7",
+  size = 24,
+}: DollarOutlineIconProps = {}): SVGTemplateResult => svg`
+  <svg width="${size}" height="${size}" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
       <g id="Frame" clip-path="url(#clip0_18718_332018)">
       <path id="Vector" d="M3 12.5C3 13.6819 3.23279 14.8522 3.68508 15.9442C4.13738 17.0361 4.80031 18.0282 5.63604 18.864C6.47177 19.6997 7.46392 20.3626 8.55585 20.8149C9.64778 21.2672 10.8181 21.5 12 21.5C13.1819 21.5 14.3522 21.2672 15.4442 20.8149C16.5361 20.3626 17.5282 19.6997 18.364 18.864C19.1997 18.0282 19.8626 17.0361 20.3149 15.9442C20.7672 14.8522 21 13.6819 21 12.5C21 11.3181 20.7672 10.1478 20.3149 9.05585C19.8626 7.96392 19.1997 6.97177 18.364 6.13604C17.5282 5.30031 16.5361 4.63738 15.4442 4.18508C14.3522 3.73279 13.1819 3.5 12 3.5C10.8181 3.5 9.64778 3.73279 8.55585 4.18508C7.46392 4.63738 6.47177 5.30031 5.63604 6.13604C4.80031 6.97177 4.13738 7.96392 3.68508 9.05585C3.23279 10.1478 3 11.3181 3 12.5Z" stroke="${color}" stroke-linecap="round" stroke-linejoin="round"/>
       <path id="Vector_2" d="M14.8 9.50016C14.6188 9.18592 14.3557 8.92686 14.0386 8.75071C13.7215 8.57456 13.3625 8.48795 13 8.50016H11C10.4696 8.50016 9.96086 8.71087 9.58579 9.08594C9.21071 9.46102 9 9.96972 9 10.5002C9 11.0306 9.21071 11.5393 9.58579 11.9144C9.96086 12.2894 10.4696 12.5002 11 12.5002H13C13.5304 12.5002 14.0391 12.7109 14.4142 13.0859C14.7893 13.461 15 13.9697 15 14.5002C15 15.0306 14.7893 15.5393 14.4142 15.9144C14.0391 16.2894 13.5304 16.5002 13 16.5002H11C10.6375 16.5124 10.2785 16.4258 9.96142 16.2496C9.64435 16.0735 9.38115 15.8144 9.2 15.5002" stroke="${color}" stroke-linecap="round" stroke-linejoin="round"/>
@@ -9,7 +17,7 @@ const DollarOutlineIcon = (color = "#347FF7"): SVGTemplateResult => svg`
     </g>
     <defs>
       <clipPath id="clip0_18718_332018">
-        <rect width="24" height="24" fill="white" transform="translate(0 0.5)"/>
+        <rect width="${size}" height="${size}" fill="white" transform="translate(0 0.5)"/>
       </clipPath>
     </defs>
   </svg>

package/src/WebComponent/launcher/Launcher.ts

@@ -96,6 +96,8 @@ export class Launcher extends LitElement {
   escortedToursLink = "";
   @property({ attribute: true })
   virtualToursLink = "";
+  @property({ attribute: true })
+  virtualToursTypeOffered = "";
 
   @property({ type: Boolean })
   hasChatEnabledDesktop = false;
@@ -1193,6 +1195,7 @@ export class Launcher extends LitElement {
                 selfGuidedToursTypeOffered="${this.selfGuidedToursTypeOffered}"
                 escortedToursLink="${this.escortedToursLink}"
                 virtualToursLink="${this.virtualToursLink}"
+                virtualToursTypeOffered="${this.virtualToursTypeOffered}"
                 currentLeadSource="${this.currentLeadSource}"
                 .hasDynamicSchedulingEnabled=${this.hasDynamicSchedulingEnabled}
                 .leadSources="${this.leadSources}"

package/src/WebComponent/loaders/index.ts

@@ -0,0 +1,7 @@
+export * from "./skeleton-loader";
+export * from "./skeleton-card";
+export * from "./mega-loader";
+export {
+  skeletonLoaderStyles,
+  skeletonCardStyles,
+} from "./skeleton-loader-styles";

package/src/WebComponent/loaders/skeleton-card.ts

@@ -0,0 +1,31 @@
+import { LitElement, html, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { skeletonCardStyles } from "./skeleton-loader-styles";
+
+@customElement("skeleton-card")
+export class SkeletonCard extends LitElement {
+  static styles = skeletonCardStyles;
+
+  @property({ type: Number })
+  rows = 2;
+
+  @property({ type: Boolean })
+  header = true;
+
+  render(): TemplateResult {
+    return html`
+      <div class="skeleton-card">
+        ${this.header ? html`<div class="skeleton-header"></div>` : ""}
+        ${Array(this.rows)
+          .fill(0)
+          .map(() => html`<div class="skeleton-row"></div>`)}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "skeleton-card": SkeletonCard;
+  }
+}

package/src/WebComponent/loaders/skeleton-loader-styles.ts

@@ -0,0 +1,112 @@
+import { css } from "lit";
+
+const skeletonBase = css`
+  :host {
+    --skeleton-bg-color: #eaeaea;
+    --skeleton-highlight-color: #f5f5f5;
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: -200px 0;
+    }
+    100% {
+      background-position: 200px 0;
+    }
+  }
+`;
+
+export const skeletonCardStyles = css`
+  ${skeletonBase}
+
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .skeleton-card {
+    background-color: white;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    padding: 16px;
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .skeleton-header {
+    height: 24px;
+    width: 40%;
+    margin-bottom: 20px;
+    background: var(--skeleton-bg-color);
+    border-radius: 4px;
+    position: relative;
+    overflow: hidden;
+    animation: shimmer 2s infinite ease-in-out;
+  }
+
+  .skeleton-row {
+    height: 16px;
+    width: 100%;
+    background: var(--skeleton-bg-color);
+    border-radius: 4px;
+    margin-bottom: 12px;
+    position: relative;
+    overflow: hidden;
+    animation: shimmer 2s infinite ease-in-out;
+  }
+
+  .skeleton-row:last-child {
+    width: 70%;
+  }
+
+  .skeleton-header::after,
+  .skeleton-row::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      90deg,
+      var(--skeleton-bg-color),
+      var(--skeleton-highlight-color),
+      var(--skeleton-bg-color)
+    );
+    background-size: 200px 100%;
+    animation: shimmer 2s infinite ease-in-out;
+  }
+
+  @media (max-width: 768px) {
+    .skeleton-card {
+      margin-bottom: 10px;
+    }
+  }
+`;
+
+export const skeletonLoaderStyles = css`
+  ${skeletonBase}
+
+  :host {
+    display: block;
+    width: 100%;
+  }
+
+  .skeleton-loader {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    box-sizing: border-box;
+  }
+
+  @media (max-width: 768px) {
+    .skeleton-loader {
+      width: 100%;
+      padding: 0 10px;
+      box-sizing: border-box;
+    }
+  }
+`;
+
+export default skeletonLoaderStyles;

package/src/WebComponent/loaders/skeleton-loader.ts

@@ -0,0 +1,34 @@
+import { LitElement, html, TemplateResult } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { skeletonLoaderStyles } from "./skeleton-loader-styles";
+import "./skeleton-card";
+
+@customElement("skeleton-loader")
+export class SkeletonLoader extends LitElement {
+  static styles = skeletonLoaderStyles;
+
+  @property({ type: Number })
+  cards = 3;
+
+  @property({ type: Array })
+  rowsPerCard = [3, 2, 1];
+
+  render(): TemplateResult {
+    return html`
+      <div class="skeleton-loader">
+        ${Array.from({ length: this.cards }, (_, i) => {
+          const rowCount = Array.isArray(this.rowsPerCard)
+            ? this.rowsPerCard[i] || 2
+            : this.rowsPerCard;
+          return html`<skeleton-card .rows=${rowCount}></skeleton-card>`;
+        })}
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "skeleton-loader": SkeletonLoader;
+  }
+}

package/src/WebComponent/me-chat.ts

@@ -926,6 +926,8 @@ export class MEChat extends LitElement {
                     ?.escortedToursLink ?? ""}"
                   virtualToursLink="${this.buildingWebchatView
                     ?.virtualToursLink ?? ""}"
+                  virtualToursTypeOffered="${this.buildingWebchatView
+                    .virtualToursTypeOffered ?? ""}"
                   .showTourNextToChat="${this.showTourNextToChat ?? ""}"
                   @closeShowTourNextToChat=${() => {
                     this.showTourNextToChat = false;

package/src/fetchBuildingWebchatView.ts

@@ -28,6 +28,26 @@ enum TourAccessType {
   SCHEDULED_BY_ME_MANAGED_BY_CONCIERGE = "scheduled_by_ME_managed_by_concierge",
 }
 
+export const shouldOpenTourLink = (
+  tourType: string,
+  tourTypeOffered: string
+): boolean => {
+  if (tourType === "self") {
+    const shouldntOpenTourTypesOffered = [
+      "SCHEDULED_BY_ME_MANAGED_BY_ME",
+      "SCHEDULED_BY_ME_MANAGED_BY_CONCIERGE",
+    ];
+    return !shouldntOpenTourTypesOffered.includes(tourTypeOffered);
+  }
+
+  if (tourType === "virtual") {
+    const shouldntOpenTourTypesOffered = ["SCHEDULED_BY_ME_MANAGED_BY_CLIENT"];
+    return !shouldntOpenTourTypesOffered.includes(tourTypeOffered);
+  }
+
+  return true;
+};
+
 export interface LayoutOption {
   value: number;
   label: string;

package/src/services/fees/fetchBuildingFees.ts

@@ -3,10 +3,12 @@ import { LogType, sendLoggingEvent } from "../../analytics";
 import { BASE_DOMAIN } from "../../globals";
 import { BuildingFee } from "../../WebComponent/FeeCalculator/model/building-fee";
 import { camelize } from "../../utils";
+import { IncentiveV2 } from "../../types/incentive-v2";
 
 type BuildingFeeResponse = {
   fees: BuildingFee[];
   rentableItems: RentableItemSummary[];
+  buildingIncentives: IncentiveV2[];
 };
 
 export type RentFrequency = "monthly" | "annually";
@@ -41,6 +43,7 @@ const fetchBuildingFees = async (
       return {
         fees: data.fees.map(toBuildingFeeClass),
         rentableItems: data.rentableItems,
+        buildingIncentives: data.buildingIncentives,
       };
     }
   } catch (error) {
@@ -55,6 +58,7 @@ const fetchBuildingFees = async (
   return {
     fees: [],
     rentableItems: [],
+    buildingIncentives: [],
   };
 };
 

package/src/types/incentive-v2.ts

@@ -0,0 +1,24 @@
+export type UnitData = {
+  unitIds: number[];
+  unitNumbers: string[];
+  layouts: number[];
+  floorplanNames: string[];
+};
+
+export type IncentiveV2 = {
+  id: number;
+  originalIncentiveString: string;
+  startDate: Date;
+  endDate: Date;
+  incentiveStatus: string;
+  source: string;
+  timeCreated: Date;
+  nofee: boolean;
+  numberOfFreeMonths: number;
+  leaseLength: number;
+  typeOfCustomerItAppliesTo: number;
+  typeOfIncentive: number;
+  numberOfMonthsOwnerPays: number;
+  unitData: UnitData;
+  qualifier: string;
+};