@wikicasa-dev/utilities 0.1.1 → 0.2.0

package/src/utils/DeviceDetectionUtils.ts

@@ -0,0 +1,17 @@
+declare global {
+  interface Window {
+    MSStream: any;
+  }
+}
+
+export const isiOSDevice = (): boolean =>
+  /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+
+export const isMobile = (): boolean =>
+  /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+    navigator.userAgent
+  );
+
+export const isSafari = (): boolean => {
+  return /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+};

package/src/utils/EmailUtils.ts

@@ -0,0 +1,45 @@
+import type { Nullable } from "@wikicasa-dev/types";
+
+const isGmailAddress = (email: string): boolean => email.includes("@gmail");
+
+async function hash256(string: string): Promise<string> {
+  const utf8 = new TextEncoder().encode(string);
+  const hashBuffer = await crypto.subtle.digest("SHA-256", utf8);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const hashHex = hashArray
+    .map((bytes) => bytes.toString(16).padStart(2, "0"))
+    .join("");
+  return hashHex;
+}
+
+const normalizeGmail = (email: string): string => {
+  const emailTokens = email.split("@");
+  if (emailTokens.length < 2)
+    throw new Error("The email has nothing before the '@' symbol");
+
+  const usernameAddress = emailTokens[0];
+  let normalizeUsernameAddress = "";
+
+  for (const char of usernameAddress) {
+    //Removing the dot symbol
+    if (char === ".") continue;
+    //If we come across into a sum symbol, we will break the valuation
+    if (char === "+") break;
+    normalizeUsernameAddress += char;
+  }
+  return `${normalizeUsernameAddress}@${emailTokens[1]}`;
+};
+
+export const hashEmail = (
+  emailToNormalize: Nullable<string>
+): Promise<string> => {
+  if (!emailToNormalize || !emailToNormalize.trim())
+    throw new Error("The email in null or empty");
+
+  let _emailToNormalize = emailToNormalize;
+
+  if (isGmailAddress(_emailToNormalize))
+    _emailToNormalize = normalizeGmail(emailToNormalize);
+
+  return hash256(_emailToNormalize);
+};

package/src/utils/FavoriteUtils.ts

@@ -0,0 +1,19 @@
+export const showRemoveFavoritesIcons = (id: number): void => {
+  const elems = document.querySelectorAll(`a[class^=fav][data-id='${id}']`);
+  elems.forEach((e) => {
+    if (e.classList.contains("fav-save"))
+      (e as HTMLAnchorElement).style.display = "none";
+    else if (e.classList.contains("fav-remove"))
+      (e as HTMLAnchorElement).style.display = "block";
+  });
+};
+
+export const showAddFavoritesIcon = (id: number): void => {
+  const elems = document.querySelectorAll(`a[class^=fav][data-id='${id}']`);
+  elems.forEach((e) => {
+    if (e.classList.contains("fav-save"))
+      (e as HTMLAnchorElement).style.display = "block";
+    else if (e.classList.contains("fav-remove"))
+      (e as HTMLAnchorElement).style.display = "none";
+  });
+};

package/src/utils/FunctionUtils.ts

@@ -0,0 +1,29 @@
+/**
+ * Determine whether the given `functionToCheck` is a Promise.
+ * @param {*} functionToCheck
+ * @returns a function correctly typed as Promise
+ */
+export function isPromise<T>(functionToCheck: any): Promise<T> {
+  if (!functionToCheck || !(typeof functionToCheck.then === "function"))
+    throw new Error("The provide function is not a promise");
+
+  return functionToCheck as Promise<T>;
+}
+
+
+export function debounce<T extends (...args: any[]) => any, TReturn>(timeout: {
+  id?: ReturnType<typeof setTimeout>,
+  delay: number
+}, func: T): (...args: any[]) => Promise<TReturn> {
+  return (...args: any[]): Promise<TReturn> => new Promise((resolve, reject) => {
+      timeout.id && clearTimeout(timeout.id);
+      timeout.id = setTimeout(() => {
+          try {
+              const res = func(...args) as TReturn;
+              resolve(res);
+          } catch (err) {
+              reject(err)
+          }
+      }, timeout.delay);
+  })
+}

package/src/utils/GAutocompleteUtils.ts

@@ -0,0 +1,70 @@
+import type { Place, GPlaceDetails } from "@wikicasa-dev/types";
+import { cleanASCII, formatAddress } from "@utils/StringUtils";
+import { getPlacesDetails, guessPlace } from "@services/geographyAPI";
+
+export const googlePlaceConverter = async (
+  gPlace: GPlaceDetails,
+  address: string
+): Promise<Place> => {
+  const place = {} as Place;
+
+  for (let i = 0; i < gPlace["address_components"].length; i++) {
+    if (
+      gPlace["address_components"][i].types.indexOf(
+        "administrative_area_level_3"
+      ) !== -1
+    ) {
+      place.city = gPlace["address_components"][i].long_name;
+    } else if (
+      gPlace["address_components"][i].types.indexOf("locality") !== -1
+    ) {
+      place.locality = gPlace["address_components"][i].long_name;
+    } else if (gPlace["address_components"][i].types.indexOf("route") !== -1) {
+      place.streetName = gPlace["address_components"][i].long_name;
+    } else if (
+      gPlace["address_components"][i].types.indexOf("street_number") !== -1
+    ) {
+      place.streetNumber = gPlace["address_components"][i].long_name;
+    } else if (
+      gPlace["address_components"][i].types.indexOf("postal_code") !== -1
+    ) {
+      place.zip = gPlace["address_components"][i].long_name;
+    }
+  }
+
+  place.latitude = gPlace["geometry"].location.lat;
+  place.longitude = gPlace["geometry"].location.lng;
+
+  place.address = cleanASCII(address);
+
+  if (typeof place.streetNumber === "undefined") place.streetNumber = null;
+
+  let res = await guessPlace(place.latitude, place.longitude);
+
+  delete res.city;
+  delete res.locality;
+
+  res = { ...res, ...place };
+
+  /* FIX FOR GOOGLE AUTOCOMPLETE MISSING STREET NUMBER */
+  if (!res.streetNumber) {
+    const term = parseInt(res.address.split(",")[1]);
+    const zip = parseInt(res.zip);
+
+    if (term && term !== zip) res.streetNumber = term.toString();
+  }
+
+  return res;
+};
+
+export const getPlaceFromGAutocomplete = async (
+  placeId: string,
+  label: string
+): Promise<{ place: Place; address: string }> => {
+  const gPlaceDetails = await getPlacesDetails(placeId);
+  const place = await googlePlaceConverter(gPlaceDetails, label);
+  const address = place.streetName
+    ? formatAddress(place.streetName, place.streetNumber || "", place.cityName)
+    : place.address;
+  return { place, address };
+};

package/src/utils/GenericUtils.ts

@@ -0,0 +1,37 @@
+/**
+ * @param fn - pass null to set a generic await
+ * @param timeoutMs time to wait before firing the callback function
+ **/
+export const awaitableSetTimeout = (
+  fn: (() => void) | null,
+  timeoutMs: number
+): Promise<void> =>
+  new Promise((resolve, reject) => {
+    setTimeout(() => {
+      try {
+        fn && fn(); //calling the callback function
+        resolve();
+      } catch (error) {
+        reject();
+      }
+    }, timeoutMs);
+  });
+
+export function createCustomEvent(
+  event: string,
+  params?: CustomEventInit
+): Event {
+  if (typeof window.CustomEvent === "function") {
+    return new CustomEvent(event, params);
+  }
+
+  params = params || { bubbles: false, cancelable: false, detail: undefined };
+  const evt = document.createEvent("CustomEvent");
+  evt.initCustomEvent(
+    event,
+    !!params.bubbles,
+    !!params.cancelable,
+    params.detail
+  );
+  return evt;
+}

package/src/utils/LazyLoadingBg.ts

@@ -0,0 +1,18 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const lazyImages = document.getElementsByClassName("lazy");
+    if (lazyImages.length === 0)
+        return;
+
+    for (const img of lazyImages) {
+        const lazyImage = (img as HTMLImageElement);
+        /* The lazy loading is given by the attribute loading="lazy" of images! */
+        lazyImage.onload = (): void => {
+            const {currentSrc} = lazyImage;
+            lazyImage.style.cssText = "display:none";
+            /* Retrieving the parent */
+            const parent = lazyImage.parentNode as HTMLElement;
+            parent.style.backgroundImage = "url(\"" + currentSrc + "\")";
+        }
+    }
+
+});

package/src/utils/MapUtils.ts

@@ -0,0 +1,118 @@
+import type { LatLng } from "leaflet";
+import { encode } from "google-polyline";
+
+import Leaflet_map from "../custom/leaflet_map";
+
+declare global {
+  interface Window {
+    _mapRange?: number;
+  }
+}
+
+export function parsePoints(polygonFromMap: string): Array<LatLng> | undefined {
+  if (!polygonFromMap) return;
+
+  const numbers: RegExpMatchArray | null =
+    polygonFromMap.match(/[-]?[\d]*[.]?[\d]+/g);
+
+  if (!numbers) return;
+
+  const latLngs: Array<LatLng> = [];
+
+  for (let i = 0; i < numbers.length; i++) {
+    latLngs.push({
+      lat: parseFloat(numbers[i + 1]),
+      lng: parseFloat(numbers[i]),
+    } as LatLng);
+    i++;
+  }
+
+  return latLngs;
+}
+
+/**
+ * @param polygon An array of latitude and polygon that will be used to design an area in a map
+ * @param forUrl If true, the output string will be encoded as a URI so respecting the UTF-8 encoding
+ * */
+export function encodePolygon(polygon: Array<LatLng>, forUrl = true): string {
+  const polygonArr: Array<any> = [];
+  polygon.forEach((p: LatLng) => {
+    polygonArr.push([p.lat, p.lng]);
+  });
+  const encodedPolygon = encode(polygonArr);
+  return forUrl ? encodeURIComponent(encodedPolygon) : encodedPolygon;
+}
+
+export function getMinMaxLatLng(polygon: Array<LatLng>): {
+  miny: number;
+  maxy: number;
+  minx: number;
+  maxx: number;
+} {
+  const minmax = {
+    miny: polygon[0].lat,
+    maxy: polygon[0].lat,
+    minx: polygon[0].lng,
+    maxx: polygon[0].lng,
+  };
+  polygon.forEach((p: LatLng) => {
+    minmax.miny = Math.min(minmax.miny, p.lat);
+    minmax.maxy = Math.max(minmax.maxy, p.lat);
+    minmax.minx = Math.min(minmax.minx, p.lng);
+    minmax.maxx = Math.max(minmax.maxx, p.lng);
+  });
+  return minmax;
+}
+
+export function removeDuplicatePoints(latLngs: Array<LatLng>): Array<LatLng> {
+  if (latLngs.length <= 0) return [];
+
+  const uniqueCoordinates = new Set();
+  const unique = latLngs.filter((x) => {
+    const isDuplicate = uniqueCoordinates.has(x.lat + x.lng);
+    const coordinate = x.lat + x.lng;
+    uniqueCoordinates.add(coordinate);
+    return !isDuplicate;
+  });
+
+  return unique;
+}
+
+export function calcPolygonCenter(points: Array<LatLng>): LatLng {
+  let lat = 0;
+  let lng = 0;
+
+  for (let i = 0; i < points.length; i++) {
+    const point = points[i];
+
+    lat += point.lat;
+    lng += point.lng;
+  }
+
+  return { lat: lat / points.length, lng: lng / points.length } as LatLng;
+}
+
+export function validateMap(map: Leaflet_map): boolean {
+  const mapRange = window._mapRange || 10000;
+
+  if (map) {
+    const center = map.getShape()?.getCenter();
+    const points = map.getShapePoints();
+    if (points) {
+      for (let i = 0; i < points.length; i++) {
+        if (map.getDistance(points[i], center) > mapRange) return false;
+      }
+    }
+    return true;
+  }
+  return false;
+}
+
+export function getPolygonString(shapePoints: Array<LatLng>): string {
+  let polygonString = "POLYGON((";
+  shapePoints.forEach((point: LatLng) => {
+    polygonString += `${point.lng} ${point.lat}, `;
+  });
+  polygonString += `${shapePoints[0].lng} ${shapePoints[0].lat}))`;
+  return polygonString;
+}

package/src/utils/NumberUtils.ts

@@ -0,0 +1,90 @@
+/**
+ * Parse a localized number to a float.
+ * @param stringNumber - the localized number
+ * @param locale - [optional] the locale that the number is represented in. Omit this parameter to use the current locale.
+ */
+export const parseLocaleNumber = (
+  stringNumber: string | number,
+  locale?: string
+): number | string => {
+  if (!locale) locale = navigator.language;
+
+  const thousandSeparator = Intl.NumberFormat(locale)
+    .format(1111)
+    .replace(/\p{Number}/gu, "");
+  const decimalSeparator = Intl.NumberFormat(locale)
+    .format(1.1)
+    .replace(/\p{Number}/gu, "");
+  const parsedNumber = parseFloat(
+    `${stringNumber}`
+      .replace(new RegExp("\\" + thousandSeparator, "g"), "")
+      .replace(new RegExp("\\" + decimalSeparator), ".")
+  );
+
+  /* In case the parsed number is NaN, we will return an empty string! */
+  if (isNaN(parsedNumber)) return "";
+
+  return parsedNumber;
+};
+
+export const formatLocaleNumber = (
+  numberToFormat?: number | string,
+  props?: { currency: boolean }
+): string | undefined | null => {
+  if (numberToFormat === undefined || numberToFormat === null) return;
+
+  numberToFormat = parseFloat(`${numberToFormat}`);
+
+  /* If the number to format is NaN, we won't return anything */
+  if (isNaN(numberToFormat)) return "";
+
+  const currencyOptions = {
+    style: "currency",
+    currency: "EUR",
+  };
+  const defaultOptions = {
+    maximumFractionDigits: 0,
+  };
+  let options = { ...defaultOptions };
+  if (props?.currency) options = { ...options, ...currencyOptions };
+
+  return new Intl.NumberFormat(navigator.language, {
+    ...options,
+  }).format(numberToFormat);
+};
+
+export function formatInteger(
+  value: number | undefined,
+  round: boolean = false
+): string {
+  if (value == null) return "";
+
+  return formatNumber(round ? Math.round(value) : Math.floor(value), 0);
+}
+
+export function formatNumber(
+  value: number | undefined,
+  digits?: number
+): string {
+  if (!value && value !== 0) return "";
+
+  return value.toLocaleString(
+    "it-IT", // usare una stringa tipo 'en-US' per sovrascrivere la lingua del browser
+    {
+      minimumFractionDigits: digits,
+      maximumFractionDigits: digits,
+    }
+  );
+}
+
+export function formatFloat(
+  value: number | undefined,
+  digits: number = 2
+): string {
+  return formatNumber(value, digits);
+}
+
+export const formatterNumberObj = {
+  formatFn: formatLocaleNumber,
+  unFormatFn: parseLocaleNumber,
+};

package/src/utils/ObjectUtils.ts

@@ -0,0 +1,34 @@
+export function shallowCopyObjectTo(
+  from: Record<string, any> | undefined,
+  to: Record<string, any>
+): void {
+  if (!from) return;
+
+  for (const k in from) {
+    to[k] = from[k];
+  }
+}
+
+export function isEmptyObject(obj: any): boolean {
+  return !obj || !Object.keys(obj).length;
+}
+
+/**
+ * Makes the deep copy of the input object.
+ * For performance purposes, if the values of the properties of the object to copy are all primitive types then we will use the spread operator (faster).
+ * Otherwise, to ensure the deep copy of nested objects and arrays, we will use JSON.parse and JSON.stringify (slower).
+ * */
+export function deepCopy<T>(objToCopy: T): T | null {
+  if (!objToCopy) return null;
+
+  for (const key in objToCopy) {
+    const prop = objToCopy[key];
+    if (!prop) continue;
+
+    //Sebastian R.S: If the property value is a primitive type, then we will continue!
+    if (Array.isArray(prop) || Object.keys(prop).length > 0) {
+      return JSON.parse(JSON.stringify(objToCopy));
+    }
+  }
+  return { ...objToCopy };
+}

package/src/utils/ObserverUtils.ts

@@ -0,0 +1,32 @@
+/**
+ * Observes if an element is visible in the viewport. Once it is visible, the listener is removed
+ * */
+export function observeOnce(
+  selector: string,
+  fn: (Element: Node, IntersectionObserver: IntersectionObserver) => void,
+  options?: IntersectionObserverInit
+): void {
+  const elems = [].slice.call(document.querySelectorAll(selector));
+
+  const observer = new IntersectionObserver(
+    (
+      entries: Array<IntersectionObserverEntry>,
+      observer: IntersectionObserver
+    ) => {
+      for (let i = 0; i < entries.length; i++) {
+        const entry = entries[i];
+
+        if (entry.isIntersecting) {
+          const elem = entry.target;
+          fn(elem, observer);
+          observer.unobserve(elem);
+        }
+      }
+    },
+    options
+  );
+
+  elems.forEach((elem: HTMLElement) => {
+    observer.observe(elem);
+  });
+}

package/src/utils/PermissionUtils.ts

@@ -0,0 +1,41 @@
+export type PermissionStates = "granted" | "denied" | "prompt";
+export type PermissionChangeEvent = CustomEvent<{
+  permissionState: PermissionStates;
+}>;
+export type NotificationPermissionChangeHandler = (
+  e: PermissionChangeEvent
+) => void | Promise<void>;
+
+let permissionsListenerInit = false;
+
+export const onNotificationsPermissionChange = (
+  cb: NotificationPermissionChangeHandler
+): void => {
+  // @ts-ignore
+  document.addEventListener("notification-permission-changed", cb);
+};
+
+/**
+ * Add an event listener which emits the event "notification-permission-changed" when the user changes the state of the notifications
+ * */
+export const addPermissionStateListener = (): void => {
+  if (!navigator.permissions || !navigator.permissions.query) return;
+
+  //setting the listener ONCE
+  !permissionsListenerInit &&
+    navigator.permissions
+      .query({ name: "notifications" })
+      .then(function (permission) {
+        // Initial status is available at permission.state
+        permission.onchange = function (): void {
+          // Whenever there's a change, updated status is available at this.state
+          document.dispatchEvent(
+            new CustomEvent("notification-permission-changed", {
+              detail: { permissionState: this.state },
+            })
+          );
+        };
+      });
+
+  permissionsListenerInit = true;
+};

package/src/utils/RESB_UrlBuilder.ts

@@ -0,0 +1,99 @@
+import type { RealEstateSearchBean } from "@wikicasa-dev/types";
+
+import {
+  CONTRACT,
+  searchBeanMap,
+  searchBeanMapAgencyFilter,
+} from "@wikicasa-dev/types";
+
+declare global {
+  interface Window {
+    _auctionLabel: string;
+    _rentLabel: string;
+    _saleLabel: string;
+  }
+}
+
+export function buildURL(
+  cityURL: string,
+  listingTypology: string,
+  contractType: number | undefined | null,
+  zone?: string | null,
+  seoFilter?: string | null,
+  agencyAndPlace?: string,
+  district?: string | null
+): string {
+  let URL = "/";
+
+  if (contractType) {
+    URL +=
+      (contractType == CONTRACT.AUCTION
+        ? window["_auctionLabel"]
+        : contractType == CONTRACT.RENT
+        ? window["_rentLabel"]
+        : window["_saleLabel"]) + "-";
+  }
+
+  URL += `${listingTypology}/`;
+
+  if (agencyAndPlace) URL += `${agencyAndPlace}/`;
+
+  if (cityURL) URL += `${cityURL.replace(/^-+|-+$/g, "")}/`;
+
+  if (zone) {
+    URL += `${zone.replace(/^_+|_+$/g, "")}/`;
+  }
+
+  if (!zone && district) {
+    URL += `${district.replace(/^_+|_+$/g, "")}/`;
+  }
+
+  if (seoFilter) {
+    URL += `${seoFilter.replace(/^_+|_+$/g, "")}/`;
+  }
+  return URL;
+}
+
+export function buildParams(searchBean: RealEstateSearchBean): string {
+  const params = Object.keys(searchBeanMap)
+    .map((key) => {
+      if (searchBean[key]) {
+        return (
+          encodeURIComponent(searchBeanMap[key]) +
+          "=" +
+          encodeURIComponent(searchBean[key])
+        );
+      } else return null;
+    })
+    .filter((param) => param !== null);
+
+  return params.length ? `?${params.join("&")}` : "";
+}
+
+export function buildParamsForAgency(searchBean: RealEstateSearchBean): string {
+  const params = Object.keys(searchBeanMapAgencyFilter)
+    .map((key) => {
+      if (searchBean[key]) {
+        if (Array.isArray(searchBean[key])) {
+          const arr = searchBean[key];
+          const nameField = searchBeanMapAgencyFilter[key];
+          let strToReturn = "";
+          for (let i = 0; i < arr.length; i++) {
+            strToReturn +=
+              encodeURIComponent(nameField) + "=" + encodeURIComponent(arr[i]);
+            strToReturn += i < arr.length - 1 ? "&" : "";
+          }
+          return strToReturn;
+        } else {
+          return (
+            encodeURIComponent(searchBeanMapAgencyFilter[key]) +
+            "=" +
+            encodeURIComponent(searchBean[key])
+          );
+        }
+      } else return null;
+    })
+    .filter((param) => param !== null);
+
+  return params.length ? `?${params.join("&")}` : "";
+}

package/src/utils/RequestUtils.ts

@@ -0,0 +1,20 @@
+import axios from "axios";
+
+import type { RequestGeneric } from "@wikicasa-dev/types";
+
+export function sendRequestGeneric(rg: RequestGeneric): Promise<unknown> {
+  return new Promise(
+    (
+      resolve: (...args: Array<unknown>) => void,
+      reject: (error: Error) => void
+    ) =>
+      axios
+        .post("/rest/request/addRequestGenericValuation", rg, {
+          headers: { "Content-Type": "application/json", dataType: "json" },
+        })
+        .then(() => {
+          resolve();
+        })
+        .catch((error: any) => reject(error))
+  );
+}