@meetelise/chat 1.24.1 → 1.25.0

package/src/WebComponent/FeeCalculator/fee-calculator-styles.ts

@@ -0,0 +1,280 @@
+import { css } from "lit";
+
+export const feeCalculatorStyles = css`
+  :host {
+    display: block;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+      Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+    position: relative;
+  }
+
+  .fee-calculator-container {
+    background-color: var(--background-color, #ffffff);
+    border-radius: 8px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    width: 45vw;
+    max-width: 1000px;
+    margin: 0 auto;
+  }
+
+  .fee-calculator-container.compact {
+    padding: 12px;
+    max-width: 600px;
+  }
+
+  .calculator-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+  }
+
+  .calculator-header h1 {
+    font-size: 1.2rem;
+    font-weight: normal;
+    color: #333;
+  }
+
+  .calculator-header-right {
+    display: flex;
+    gap: 10px;
+  }
+
+  .calculator-header-divider {
+    height: 1px;
+    background-color: #e0e0e0;
+    margin-bottom: 20px;
+  }
+
+  .calculator-body {
+    padding: 20px 20px 5px 20px;
+    background-color: #f1f3f5;
+    max-height: 50vh;
+    overflow-y: scroll;
+  }
+
+  .close-button {
+    background: none;
+    border: none;
+    color: #6c757d;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    line-height: 1;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .close-button:hover {
+    background-color: #f0f0f0;
+    color: #000;
+  }
+
+  h1,
+  h2 {
+    margin-top: 0;
+    color: #333;
+  }
+
+  h1 {
+    font-size: 1.5rem;
+    margin: 0;
+  }
+
+  h2 {
+    font-size: 1.2rem;
+    margin-bottom: 8px;
+  }
+
+  .input-group {
+    margin-bottom: 16px;
+  }
+
+  label {
+    display: block;
+    margin-bottom: 6px;
+    font-weight: 500;
+  }
+
+  input {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    font-size: 16px;
+  }
+
+  button {
+    background-color: var(--primary-color, #007bff);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 10px 16px;
+    font-size: 16px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    transition: background-color 0.2s;
+  }
+
+  button:hover {
+    background-color: var(--primary-color-dark, #0069d9);
+  }
+
+  button:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+
+  .reset-button {
+    background-color: #6c757d;
+    margin-top: 16px;
+  }
+
+  .reset-button:hover {
+    background-color: #5a6268;
+  }
+
+  .calculation-results {
+    margin-top: 24px;
+    padding-top: 16px;
+    border-top: 1px solid #eee;
+  }
+
+  .result-item {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 8px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #eee;
+    color: #333;
+  }
+
+  .result-item:last-child {
+    border-bottom: none;
+  }
+
+  .result-item.total {
+    font-weight: bold;
+    font-size: 1.1em;
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px solid #eee;
+  }
+
+  .error-message {
+    color: #dc3545;
+    text-align: center;
+    padding: 16px;
+  }
+
+  .calculator-promos {
+    margin-bottom: 20px;
+  }
+
+  .calculator-charges {
+    margin-bottom: 20px;
+  }
+
+  .calculator-disclaimer {
+    color: #666;
+    font-size: 0.8rem;
+    text-align: center;
+  }
+
+  .close-circle-button {
+    position: absolute;
+    bottom: -50px;
+    right: 20px;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: var(--primary-color, #007bff);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    border: none;
+    font-size: 24px;
+    z-index: 10;
+  }
+
+  .close-circle-button:hover {
+    background-color: var(--primary-color-dark, #0069d9);
+  }
+
+  .additional-actions-toggle {
+    position: absolute;
+    bottom: -50px;
+    left: 20px;
+    background-color: var(--primary-color, #007bff);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    padding: 10px 16px;
+    font-size: 14px;
+    cursor: pointer;
+    z-index: 10;
+  }
+
+  .additional-actions-toggle:hover {
+    background-color: var(--primary-color-dark, #0069d9);
+  }
+
+  #calculator-additional-actions {
+    position: fixed;
+    box-sizing: border-box;
+    z-index: 1000000;
+    margin-left: -1rem;
+  }
+
+  .hideActions {
+    display: none;
+  }
+
+  .showActions {
+    display: block;
+  }
+
+  .additional-actions-container {
+    display: flex;
+    justify-content: space-around;
+    gap: 10px;
+  }
+
+  .action-button {
+    flex: 1;
+    background-color: #f8f9fa;
+    color: #333;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 12px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.2s;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .action-button:hover {
+    background-color: #e9ecef;
+    border-color: #ced4da;
+  }
+
+  .share-button {
+    color: #347ff7;
+    background-color: white;
+  }
+`;

package/src/WebComponent/FeeCalculator/fee-calculator.ts

@@ -0,0 +1,256 @@
+import { LitElement, html, TemplateResult } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { feeCalculatorStyles } from "./fee-calculator-styles";
+import fetchBuildingWebchatView, {
+  BuildingWebchatView,
+  LayoutOption,
+} from "../../fetchBuildingWebchatView";
+import { BuildingFee, RecurrenceFrequency } from "./model/building-fee";
+import fetchBuildingFees from "../../services/fees/fetchBuildingFees";
+
+import "./components";
+import "../chat-additional-actions";
+
+@customElement("fee-calculator")
+export class FeeCalculator extends LitElement {
+  static styles = feeCalculatorStyles;
+
+  @property({ attribute: true })
+  buildingSlug = "";
+
+  @property({ attribute: true })
+  orgSlug = "";
+
+  @property({ attribute: true })
+  primaryColor = "#007bff";
+
+  @property({ attribute: true })
+  backgroundColor = "#ffffff";
+
+  @property({ attribute: true, type: Boolean })
+  compactDesign = false;
+
+  @property()
+  onCloseClicked: ((e: MouseEvent) => void) | null = null;
+
+  @state()
+  private isLoading = false;
+
+  @state()
+  private buildingWebchatView: BuildingWebchatView | null = null;
+
+  @state()
+  private groupedFees: Record<RecurrenceFrequency, BuildingFee[]> = {
+    [RecurrenceFrequency.OneTime]: [],
+    [RecurrenceFrequency.Daily]: [],
+    [RecurrenceFrequency.Weekly]: [],
+    [RecurrenceFrequency.BiWeekly]: [],
+    [RecurrenceFrequency.Monthly]: [],
+    [RecurrenceFrequency.Yearly]: [],
+    [RecurrenceFrequency.Unknown]: [],
+  };
+
+  get layouts(): LayoutOption[] {
+    return this.buildingWebchatView?.layoutOptions ?? [];
+  }
+
+  @state()
+  private enabledChatWidgets: {
+    callDesktop: boolean;
+    callMobile: boolean;
+    chatMobile: boolean;
+    chatDesktop: boolean;
+    emailDesktop: boolean;
+    emailMobile: boolean;
+    textDesktop: boolean;
+    textMobile: boolean;
+    sstDesktop: boolean;
+    sstMobile: boolean;
+  } = {
+    callDesktop: false,
+    callMobile: false,
+    chatMobile: false,
+    chatDesktop: false,
+    emailDesktop: false,
+    emailMobile: false,
+    textDesktop: false,
+    textMobile: false,
+    sstDesktop: false,
+    sstMobile: false,
+  };
+
+  @query("#baseAmountInput")
+  baseAmountInput!: HTMLInputElement;
+
+  @query("#feePercentageInput")
+  feePercentageInput!: HTMLInputElement;
+
+  constructor() {
+    super();
+  }
+
+  firstUpdated = async (): Promise<void> => {
+    this.style.setProperty("--primary-color", this.primaryColor);
+    this.style.setProperty("--background-color", this.backgroundColor);
+
+    await this.setupCalculator();
+  };
+
+  setupCalculator = async (): Promise<void> => {
+    if (!this.buildingSlug || !this.orgSlug) return;
+
+    const [buildingWebchatView, fees] = await Promise.all([
+      fetchBuildingWebchatView(this.orgSlug, this.buildingSlug),
+      fetchBuildingFees(this.buildingSlug),
+    ]);
+
+    if (!buildingWebchatView || !fees) return;
+
+    this.buildingWebchatView = buildingWebchatView;
+    this.groupedFees = this.groupFees(fees);
+  };
+
+  groupFees = (
+    fees: BuildingFee[]
+  ): Record<RecurrenceFrequency, BuildingFee[]> => {
+    return fees.reduce((acc, fee) => {
+      const frequency =
+        fee.blueprint.recurrenceInfo?.frequency || RecurrenceFrequency.Unknown;
+      acc[frequency] = [...(acc[frequency] || []), fee];
+      return acc;
+    }, {} as Record<RecurrenceFrequency, BuildingFee[]>);
+  };
+
+  handleClose = (e: MouseEvent): void => {
+    e.preventDefault();
+    if (this.onCloseClicked) {
+      this.onCloseClicked(e);
+    }
+  };
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    window.addEventListener("resize", this.adjustPositionAdditionalActions);
+  }
+
+  disconnectedCallback(): void {
+    window.removeEventListener("resize", this.adjustPositionAdditionalActions);
+    super.disconnectedCallback();
+  }
+
+  updated(changedProperties: Map<string, unknown>): void {
+    if (
+      changedProperties.has("primaryColor") ||
+      changedProperties.has("backgroundColor")
+    ) {
+      this.style.setProperty("--primary-color", this.primaryColor);
+      this.style.setProperty("--background-color", this.backgroundColor);
+    }
+    this.adjustPositionAdditionalActions();
+  }
+
+  adjustPositionAdditionalActions = (): void => {
+    const additionalActionsElement = this.shadowRoot?.getElementById(
+      "calculator-additional-actions"
+    );
+    if (!additionalActionsElement) return;
+
+    const calculatorContainer = this.shadowRoot?.querySelector(
+      ".fee-calculator-container"
+    );
+
+    const containerCoords = calculatorContainer?.getBoundingClientRect();
+    if (!containerCoords) return;
+
+    additionalActionsElement.style.left = `${containerCoords.left}px`;
+    additionalActionsElement.style.top = `${containerCoords.bottom + 10}px`;
+    additionalActionsElement.style.width = `${containerCoords.width}px`;
+  };
+
+  render(): TemplateResult {
+    const containerClasses = {
+      "fee-calculator-container": true,
+      compact: this.compactDesign,
+    };
+
+    const primaryColorWithFallback = this.primaryColor || "#007bff";
+    const backgroundColorWithFallback = this.backgroundColor || "#ffffff";
+
+    return html`
+      <div class=${classMap(containerClasses)}>
+        <div class="calculator-header">
+          <h1>Estimated Cost Calculator</h1>
+
+          <div class="calculator-header-right">
+            <button class="share-button">Share</button>
+            <button class="apply-button">Apply</button>
+          </div>
+        </div>
+
+        <div class="calculator-header-divider"></div>
+
+        <floor-plan-selector
+          .primaryColor=${this.primaryColor}
+          .floorPlans=${this.layouts}
+          .selectedLayoutId=${-1}
+        ></floor-plan-selector>
+
+        <div class="calculator-body">
+          <div class="calculator-promos">
+            <promo-card
+              .primaryColor=${this.primaryColor}
+              promoAmount="(Example) $500"
+              promoDescription="off first month"
+              promoValidity="Valid through Mar 1, 2025 for all units"
+            ></promo-card>
+          </div>
+
+          <div class="calculator-charges">
+            <collapsible-fee-section
+              .primaryColor=${this.primaryColor}
+              title="Monthly Charges"
+              totalLabel="Est. Total Charge"
+              .buildingFees=${this.groupedFees[RecurrenceFrequency.Monthly]}
+            ></collapsible-fee-section>
+          </div>
+
+          <div class="calculator-charges">
+            <collapsible-fee-section
+              .primaryColor=${this.primaryColor}
+              title="Prior to Move-in"
+              totalLabel="Total Due at Signing"
+              .buildingFees=${this.groupedFees[RecurrenceFrequency.OneTime]}
+            ></collapsible-fee-section>
+          </div>
+
+          <div class="calculator-disclaimer">
+            <p>Prices subject to change. Additional fees may apply.</p>
+          </div>
+        </div>
+      </div>
+
+      <chat-additional-actions
+        id="calculator-additional-actions"
+        .showChatAdditionalActions=${!this.isLoading}
+        .buildingWebchatView=${this.buildingWebchatView}
+        .primaryColor=${primaryColorWithFallback}
+        .backgroundColor=${backgroundColorWithFallback}
+        .enabledChatWidgets=${this.enabledChatWidgets}
+        .onClickMinimize=${(): void => {
+          /* TODO */
+        }}
+        .onClickEmailOption=${(): void => {
+          /* TODO */
+        }}
+        .onClickPhoneOption=${(): void => {
+          /* TODO */
+        }}
+        .onClickSSTOption=${(): void => {
+          /* TODO */
+        }}
+        .onClose=${this.handleClose}
+      ></chat-additional-actions>
+    `;
+  }
+}

package/src/WebComponent/FeeCalculator/index.ts

@@ -0,0 +1,4 @@
+export { FeeCalculator } from "./fee-calculator";
+
+// TODO(Leo): odd import issue requires this useless function be imported
+export const installFeeCalculator = (): void => undefined;

package/src/WebComponent/FeeCalculator/model/building-fee.ts

@@ -0,0 +1,83 @@
+import { TransactionCategory } from "./transaction-category";
+
+export interface BuildingFee {
+  id: number;
+  buildingId: number;
+  blueprint: FeeBlueprint;
+  unitIds: number[] | null;
+  layoutIds: number[] | null;
+  startDate: Date | null;
+  endDate: Date | null;
+  source: string | null;
+  timeCreated: Date;
+  externalKey: string | null;
+  syncActive: boolean;
+  hiddenReason: string | null;
+  refundable: boolean | null;
+  required?: boolean;
+}
+
+interface FeeBlueprint {
+  transactionId: number | null;
+  transactionAmount: number | null;
+  flowDirection: TransactionFlow;
+  transactionDescription: string | null;
+  category: TransactionCategory;
+  recurrenceInfo: RecurrenceInfo | null;
+  adjustmentInfo: AdjustmentInfo | null;
+  triggerInfo: TriggerInfo | null;
+  addOnInfo: AddOnInfo | null;
+  priceType: PriceType;
+  handledByThirdParty: boolean;
+  handledByThirdPartyReasoning: string | null;
+  leaseStartDate: Date | null;
+  leaseEndDate: Date | null;
+}
+
+interface AdjustmentInfo {
+  reason: string;
+  percentage: number;
+}
+
+export enum RecurrenceFrequency {
+  OneTime = "OneTime",
+  Daily = "Daily",
+  Weekly = "Weekly",
+  BiWeekly = "BiWeekly",
+  Monthly = "Monthly",
+  Yearly = "Yearly",
+  Unknown = "Unknown",
+}
+
+interface RecurrenceInfo {
+  frequency: RecurrenceFrequency;
+  startDate: Date | null;
+  endDate: Date | null;
+}
+
+interface TriggerInfo {
+  triggerEvent: string;
+  maxDaysBeforeEvent: number;
+  maxDaysAfterEvent: number;
+  triggerEventEmbedding: number[] | null;
+  startDate: Date | null;
+  endDate: Date | null;
+}
+
+interface AddOnInfo {
+  addOnType: string;
+  maxUnitsCharged: number | null;
+  minUnitsCharged: number | null;
+  addOnTypeEmbedding: number[] | null;
+}
+
+enum TransactionFlow {
+  Debit = "Debit",
+  Credit = "Credit",
+}
+
+enum PriceType {
+  Fixed = "Fixed",
+  UsageBased = "UsageBased",
+  Varies = "Varies",
+}

package/src/WebComponent/FeeCalculator/model/transaction-category.ts

@@ -0,0 +1,23 @@
+export enum TransactionCategory {
+  AdminFee = "AdminFee",
+  ApplicationFee = "ApplicationFee",
+  Concession = "Concession",
+  Insurance = "Insurance",
+  LateFee = "LateFee",
+  Legal = "Legal",
+  NonSufficientFundFee = "NSF",
+  Other = "Other",
+  Parking = "Parking",
+  Penalty = "Penalty",
+  Pest = "Pest",
+  PetDeposit = "PetDeposit",
+  PetRent = "PetRent",
+  Refund = "Refund",
+  Relet = "Relet",
+  Rent = "Rent",
+  SecurityDeposit = "SecurityDeposit",
+  Storage = "Storage",
+  Trash = "Trash",
+  Utility = "Utility",
+  WaterSewer = "WaterSewer",
+}

package/src/WebComponent/chat-additional-actions.ts

@@ -78,15 +78,17 @@ export class ChatAdditionalActions extends LitElement {
   };
 
   render(): TemplateResult {
+    const primaryColorValue = this.primaryColor || defaultPrimaryColor;
+    const backgroundColorValue = this.backgroundColor || "#ffffff";
+
     const triangleDivColor =
       this.buildingWebchatView &&
       shouldUsePrimaryColorForChatFooter(
         this.buildingWebchatView.orgId,
         this.buildingWebchatView.id
       ) &&
-      this.primaryColor &&
-      this.primaryColor !== defaultPrimaryColor
-        ? hexToAlmostWhite(this.primaryColor, 0.6)
+      primaryColorValue !== defaultPrimaryColor
+        ? hexToAlmostWhite(primaryColorValue, 0.6)
         : "black";
 
     return html`
@@ -107,8 +109,8 @@ export class ChatAdditionalActions extends LitElement {
           .onClickEmailOption=${this.onClickEmailOption}
           .onClickPhoneOption=${this.onClickPhoneOption}
           .onClickSSTOption=${this.onClickSSTOption}
-          .primaryColor=${this.primaryColor}
-          .backgroundColor=${this.backgroundColor}
+          .primaryColor=${primaryColorValue}
+          .backgroundColor=${backgroundColorValue}
           .hideChat=${true}
           .hasCallUsEnabled=${this.enabledChatWidgets.callDesktop}
           .hasChatEnabled=${this.enabledChatWidgets.chatDesktop}
@@ -117,8 +119,8 @@ export class ChatAdditionalActions extends LitElement {
           .hasSSTEnabled=${this.enabledChatWidgets.sstDesktop}
         ></mobile-launcher>
         <minimize-expand-button
-          .primaryColor=${this.primaryColor}
-          .backgroundColor=${this.backgroundColor}
+          .primaryColor=${primaryColorValue}
+          .backgroundColor=${backgroundColorValue}
           .onClick=${this.onClose}
         ></minimize-expand-button>
       </div>

package/src/WebComponent/icons/CalculatorOutlineIcon.ts

@@ -0,0 +1,22 @@
+import { svg, SVGTemplateResult } from "lit";
+
+export const CalculatorOutlineIcon = (
+  color = "white"
+): SVGTemplateResult => svg`<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Frame" clip-path="url(#clip0_14068_170001)">
+<path id="Vector" d="M3.33301 4.16667C3.33301 3.72464 3.5086 3.30072 3.82116 2.98816C4.13372 2.67559 4.55765 2.5 4.99967 2.5H14.9997C15.4417 2.5 15.8656 2.67559 16.1782 2.98816C16.4907 3.30072 16.6663 3.72464 16.6663 4.16667V15.8333C16.6663 16.2754 16.4907 16.6993 16.1782 17.0118C15.8656 17.3244 15.4417 17.5 14.9997 17.5H4.99967C4.55765 17.5 4.13372 17.3244 3.82116 17.0118C3.5086 16.6993 3.33301 16.2754 3.33301 15.8333V4.16667Z" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M6.66699 6.66634C6.66699 6.44533 6.75479 6.23337 6.91107 6.07709C7.06735 5.92081 7.27931 5.83301 7.50033 5.83301H12.5003C12.7213 5.83301 12.9333 5.92081 13.0896 6.07709C13.2459 6.23337 13.3337 6.44533 13.3337 6.66634V7.49967C13.3337 7.72069 13.2459 7.93265 13.0896 8.08893C12.9333 8.24521 12.7213 8.33301 12.5003 8.33301H7.50033C7.27931 8.33301 7.06735 8.24521 6.91107 8.08893C6.75479 7.93265 6.66699 7.72069 6.66699 7.49967V6.66634Z" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M6.66699 11.667V11.6753" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M10 11.667V11.6753" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" d="M13.333 11.667V11.6753" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_6" d="M6.66699 14.167V14.1753" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_7" d="M10 14.167V14.1753" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_8" d="M13.333 14.167V14.1753" stroke=${color} stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_14068_170001">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+`;