@meetelise/chat 1.29.0 → 1.30.1

package/src/services/fees/calculateQuote.ts

@@ -0,0 +1,135 @@
+import axios from "axios";
+
+import { LogType, sendLoggingEvent } from "../../analytics";
+import { BASE_DOMAIN } from "../../globals";
+import { RentableItemSummary } from "./fetchBuildingFees";
+import {
+  camelize,
+  formatCurrency,
+  sentenceTitleCase,
+  snakify,
+} from "../../utils";
+
+type CalculateQuoteRequest = {
+  buildingSlug: string;
+  unitId: number;
+  addons: DesiredAddon[];
+  rentableItems: DesiredRentableItem[];
+  leaseTerm: number;
+  moveInDate: string;
+};
+
+export type DesiredAddon = {
+  id: number;
+  quantity: number;
+  type: string;
+};
+
+export type DesiredRentableItem = {
+  id: number;
+  quantity: number;
+  type: string;
+};
+
+export type CalculateQuoteResponse = {
+  units: UnitFeeBundle[];
+};
+
+type UnitFeeBundle = {
+  unitId: number;
+  unitNumber: string;
+  rent: number;
+  fees: FeeEstimate[];
+  feeTotal: number;
+  rentableItems: RentableItemSummary[];
+  rentableItemTotal: number;
+};
+
+export class FeeEstimate {
+  name: string;
+  description?: string | null;
+  amount: number;
+  frequency: string;
+  addOnType?: string;
+  applicable?: boolean;
+  required?: boolean;
+  adjustments?: FeeAdjustment[];
+  comment?: string;
+
+  constructor(data: FeeEstimate) {
+    this.name = data.name;
+    this.description = data.description;
+    this.amount = data.amount;
+    this.frequency = data.frequency;
+    this.addOnType = data.addOnType;
+    this.applicable = data.applicable;
+    this.required = data.required;
+    this.adjustments = data.adjustments;
+    this.comment = data.comment;
+  }
+
+  get displayAmount(): string {
+    return formatCurrency(this.amount);
+  }
+
+  get displayName(): string {
+    return sentenceTitleCase(this.name);
+  }
+
+  get isAddOn(): boolean {
+    return !!this.addOnType;
+  }
+}
+
+type FeeAdjustment = {
+  reason: string;
+  amount: number;
+};
+
+export const calculateQuote = async ({
+  buildingSlug,
+  unitId,
+  addons,
+  rentableItems,
+  leaseTerm,
+  moveInDate,
+}: CalculateQuoteRequest): Promise<CalculateQuoteResponse> => {
+  try {
+    const feesResponse = await axios.post(
+      `${BASE_DOMAIN}/platformApi/webchat/${buildingSlug}/fees/calculate`,
+      snakify({
+        unitId,
+        addons,
+        rentableItems,
+        leaseTerm,
+        moveInDate,
+      })
+    );
+
+    if (feesResponse.data) {
+      const data = camelize<CalculateQuoteResponse>(feesResponse.data);
+      return {
+        ...data,
+        units: data.units.map((unit) => ({
+          ...unit,
+          fees: unit.fees.map(toFeeEstimateClass),
+        })),
+      };
+    }
+  } catch (error) {
+    sendLoggingEvent({
+      logType: LogType.error,
+      buildingSlug,
+      logTitle: "[ERROR_CALCULATING_QUOTE]",
+      logData: { error },
+    });
+  }
+
+  return {
+    units: [],
+  };
+};
+
+const toFeeEstimateClass = (fee: FeeEstimate) => new FeeEstimate(fee);
+
+export default calculateQuote;

package/src/services/fees/fetchBuildingFees.ts

@@ -0,0 +1,63 @@
+import axios from "axios";
+import { LogType, sendLoggingEvent } from "../../analytics";
+import { BASE_DOMAIN } from "../../globals";
+import { BuildingFee } from "../../WebComponent/FeeCalculator/model/building-fee";
+import { camelize } from "../../utils";
+
+type BuildingFeeResponse = {
+  fees: BuildingFee[];
+  rentableItems: RentableItemSummary[];
+};
+
+export type RentFrequency = "monthly" | "annually";
+
+type RentableItem = {
+  id: string;
+  description: string;
+  rent: number;
+  rentFrequency: RentFrequency;
+  available: boolean;
+  reservedUntil?: Date;
+};
+
+export type RentableItemSummary = {
+  description: string;
+  type: string;
+  minAvailableItem?: RentableItem;
+  maxAvailableItem?: RentableItem;
+  allItems: RentableItem[];
+  rent?: number;
+};
+
+const fetchBuildingFees = async (
+  buildingSlug: string
+): Promise<BuildingFeeResponse> => {
+  try {
+    const feesResponse = await axios.get(
+      `${BASE_DOMAIN}/platformApi/webchat/${buildingSlug}/fees`
+    );
+    if (feesResponse.data) {
+      const data = camelize<BuildingFeeResponse>(feesResponse.data);
+      return {
+        fees: data.fees.map(toBuildingFeeClass),
+        rentableItems: data.rentableItems,
+      };
+    }
+  } catch (error) {
+    sendLoggingEvent({
+      logType: LogType.error,
+      buildingSlug,
+      logTitle: "[ERROR_GETTING_FEES]",
+      logData: { error },
+    });
+  }
+
+  return {
+    fees: [],
+    rentableItems: [],
+  };
+};
+
+const toBuildingFeeClass = (fee: BuildingFee) => new BuildingFee(fee);
+
+export default fetchBuildingFees;

package/src/services/fees/fetchBuildingFloorplans.ts

@@ -0,0 +1,74 @@
+import axios from "axios";
+import { LogType, sendLoggingEvent } from "../../analytics";
+import { BASE_DOMAIN } from "../../globals";
+import { camelize } from "../../utils";
+
+export type Floorplan = {
+  unitId: number;
+  name: string;
+  bedrooms: number;
+  bathrooms: number;
+  numAvailable: number;
+  startingPrice: number;
+  maxPrice: number;
+  earliestAvailable: string;
+  latestAvailable: string;
+  squareFeet: number;
+  url: string | null;
+};
+
+type FetchFloorplansParams = {
+  buildingSlug: string;
+  numBedrooms?: number;
+  moveInDateEarliest?: Date;
+  moveInDateLatest?: Date;
+};
+
+const fetchBuildingFloorplans = async ({
+  buildingSlug,
+  numBedrooms,
+  moveInDateEarliest,
+  moveInDateLatest,
+}: FetchFloorplansParams): Promise<Floorplan[]> => {
+  try {
+    const params = new URLSearchParams();
+    if (numBedrooms) {
+      params.append("num_bedrooms", numBedrooms.toString());
+    }
+    if (moveInDateEarliest) {
+      params.append(
+        "move_in_date_earliest",
+        moveInDateEarliest.toISOString().split("T")[0]
+      );
+    }
+    if (moveInDateLatest) {
+      params.append(
+        "move_in_date_latest",
+        moveInDateLatest.toISOString().split("T")[0]
+      );
+    }
+
+    const queryString = params.toString() ? `?${params.toString()}` : "";
+    const floorplansResponse = await axios.get(
+      `${BASE_DOMAIN}/platformApi/webchat/${buildingSlug}/floorplans${queryString}`
+    );
+
+    if (floorplansResponse.data) {
+      return camelize<Floorplan[]>(floorplansResponse.data);
+    }
+  } catch (error) {
+    sendLoggingEvent({
+      logType: LogType.error,
+      buildingSlug,
+      logTitle: "[ERROR_GETTING_FLOORPLANS]",
+      logData: {
+        error,
+        params: { numBedrooms, moveInDateEarliest, moveInDateLatest },
+      },
+    });
+  }
+
+  return [];
+};
+
+export default fetchBuildingFloorplans;

package/src/services/fees/utils.ts

@@ -0,0 +1,4 @@
+export const layoutToBedrooms = (layout: number): number => {
+  if (layout === 0) return 0; // Studio
+  return Math.floor(layout / 10);
+};

package/src/svgIcons.ts

@@ -0,0 +1,14 @@
+import { svg } from "lit";
+
+/**
+ * TODO(erol): PLEASE MOVE INTO EACH OWN ICON FILE UNDER /ICONS
+ */
+
+export const CheckboxEmpty = svg`<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+<rect x="1" y="1" width="22" height="22" stroke="black" stroke-width="2" rx="2"/>
+</svg>
+`;
+export const CheckboxChecked = svg`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none">
+<rect y="0.09375" width="16" height="16" rx="2" fill="#4719CD"/>
+<path d="M12 5.09375L6.5 10.5938L4 8.09375" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>`;

package/src/themes.ts

@@ -0,0 +1,65 @@
+export const defaultPrimaryColor = "#646987"; // we have a brand color defined in the BE too, but this is a fallback
+export const defaultBackgroundColor = "#ffffff"; // default background color for the chat widget
+
+export const tintColor = (
+  originalColor: string,
+  tintOpacity: number
+): string => {
+  const originalRgb = hexToRgb(originalColor);
+  const tintRgb = { r: 0, g: 0, b: 0 };
+
+  const newRgb = {
+    r: originalRgb.r + Math.round((tintRgb.r - originalRgb.r) * tintOpacity),
+    g: originalRgb.g + Math.round((tintRgb.g - originalRgb.g) * tintOpacity),
+    b: originalRgb.b + Math.round((tintRgb.b - originalRgb.b) * tintOpacity),
+  };
+
+  return rgbToHex(newRgb.r, newRgb.g, newRgb.b);
+};
+
+const hexToRgb = (hex: string): { r: number; g: number; b: number } => {
+  const r = parseInt(hex.substring(1, 3), 16);
+  const g = parseInt(hex.substring(3, 5), 16);
+  const b = parseInt(hex.substring(5, 7), 16);
+  return { r, g, b };
+};
+
+const rgbToHex = (r: number, g: number, b: number): string => {
+  return (
+    "#" +
+    [r, g, b]
+      .map((c) => {
+        const hex = c.toString(16);
+        return hex.length === 1 ? "0" + hex : hex;
+      })
+      .join("")
+  );
+};
+
+export const hexToAlmostWhite = (hexColor: string, ratio: number): string => {
+  let r = parseInt(hexColor.substr(1, 2), 16);
+  let g = parseInt(hexColor.substr(3, 2), 16);
+  let b = parseInt(hexColor.substr(5, 2), 16);
+
+  // the ratio of white to add (1 = white, 0 = no change)
+  r = Math.round(r * (1 - ratio) + 255 * ratio);
+  g = Math.round(g * (1 - ratio) + 255 * ratio);
+  b = Math.round(b * (1 - ratio) + 255 * ratio);
+
+  return (
+    "#" +
+    r.toString(16).padStart(2, "0") +
+    g.toString(16).padStart(2, "0") +
+    b.toString(16).padStart(2, "0")
+  );
+};
+
+export const shouldUsePrimaryColorForChatFooter = (
+  orgId: number,
+  buildingId: number
+): boolean => {
+  // Some clients are complaining that we are NOT ADA compliant with our black, default chat footer
+  // So we are temporarily adding this flag to allow them to use their brand color for the chat footer
+  // Don't want to suddenly change it for our clients so added this flag
+  return orgId === 2 || buildingId === 70392;
+};

package/src/types/rest-sdk.types.ts

@@ -0,0 +1,13 @@
+/**
+ * Redeclare enum from rest-sdk to avoid pulling in entire module.
+ */
+export enum TourAvailabilityResponseRankOrderedSupportedTourTypesEnum {
+  Unknown = "UNKNOWN",
+  SelfGuided = "SELF_GUIDED",
+  VirtualShowing = "VIRTUAL_SHOWING",
+  WithAgent = "WITH_AGENT",
+  MediaTour = "MEDIA_TOUR",
+}
+
+// Types are safe to re-export as they are not included in runtime code.
+export type { TourAvailabilityResponse } from "@meetelise/rest-sdk";

package/src/types/webchat-no-show-reason.ts

@@ -0,0 +1,6 @@
+export type WebchatNoShowReason =
+  | "building_does_not_exist"
+  | "building_not_launched"
+  | "building_not_active"
+  | "building_in_maintenance_mode"
+  | "building_not_webchat_scope_configured";

package/src/utils.ts

@@ -0,0 +1,121 @@
+import camelCase from "lodash/camelCase";
+import snakeCase from "lodash/snakeCase";
+import isArray from "lodash/isArray";
+import isObject from "lodash/isObject";
+import transform from "lodash/transform";
+import addHours from "date-fns/addHours";
+import isBefore from "date-fns/isBefore";
+import { BASE_DOMAIN } from "./globals";
+
+export const camelize = <T>(
+  snakeCasedObject: Record<string, unknown>,
+  keysToExclude?: (string | number | symbol)[]
+): T =>
+  transform(
+    snakeCasedObject,
+    (acc: Record<string, unknown>, value, key, target) => {
+      const camelKey = keysToExclude?.includes(key)
+        ? key
+        : isArray(target)
+        ? key
+        : camelCase(String(key));
+
+      acc[camelKey] = isObject(value)
+        ? camelize(value as Record<string, unknown>, keysToExclude)
+        : value;
+    }
+  ) as T;
+
+export const snakify = <T>(
+  snakeCasedObject: Record<string, unknown>,
+  keysToExclude?: (string | number | symbol)[]
+): T =>
+  transform(
+    snakeCasedObject,
+    (acc: Record<string, unknown>, value, key, target) => {
+      const snakeKey = keysToExclude?.includes(key)
+        ? key
+        : isArray(target)
+        ? key
+        : snakeCase(String(key));
+
+      acc[snakeKey] = isObject(value)
+        ? snakify(value as Record<string, unknown>, keysToExclude)
+        : value;
+    }
+  ) as T;
+
+export const isMobile = (): boolean =>
+  window.matchMedia("(max-width: 767px)").matches ||
+  window.matchMedia("(max-height: 400px)").matches;
+
+export const isTimestampExpired = (
+  timestamp: Date,
+  ttlHours: number
+): boolean => {
+  const expirationDate = addHours(timestamp, ttlHours);
+  return isBefore(expirationDate, Date.now());
+};
+
+export const getCookieValue = (name: string): string | null => {
+  try {
+    const cookies = document.cookie.split("; ");
+    const cookiePair = cookies
+      .map((cookie) => cookie.split("="))
+      .find(([cookieName]) => cookieName === name);
+
+    return cookiePair ? decodeURIComponent(cookiePair[1]) : null;
+  } catch (e) {
+    // For debugging purposes if something happens on a client website
+    // eslint-disable-next-line no-console
+    console.warn(`Error getting cookie value for name=${name}`, e);
+    return null;
+  }
+};
+
+export const isValidPhoneNumber = (phoneNumber: string): boolean => {
+  const phoneNumberRegex = /^\([2-9][0-8][0-9]\) [2-9][0-9][0-9]-[0-9]{4}$/;
+  return phoneNumberRegex.test(phoneNumber);
+};
+
+export const isContainingEmail = (message: string): boolean => {
+  try {
+    const emailRegex = /\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Z|a-z]{2,7}\b/;
+    return emailRegex.test(message);
+  } catch (e) {
+    // eslint-disable-next-line no-console
+    console.warn(`Error checking if message contains email`, e);
+    return false;
+  }
+};
+
+/**
+ * FooBarBizzBazz -> Foo Bar Bizz Bazz
+ */
+export const sentenceTitleCase = (str: string): string => {
+  const spaced = str.replace(/([A-Z])/g, " $1").trim();
+  return spaced
+    .split(" ")
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1).toLowerCase())
+    .join(" ");
+};
+
+export const formatCurrency = (
+  amount: number,
+  maximumFractionDigits = 0
+): string => {
+  return Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 0,
+    maximumFractionDigits,
+  }).format(amount ?? 0);
+};
+
+export const isTestEnv = (): boolean => {
+  const href = location.href;
+  if (href.startsWith(BASE_DOMAIN + "/settings/widgets")) return true;
+  if (href.startsWith(BASE_DOMAIN + "/demo")) return true;
+  if (href.startsWith("http://localhost")) return true;
+  return false;
+};