@wikicasa-dev/utilities 0.1.0 → 0.1.2

package/src/utils/DOMUtils.ts

@@ -0,0 +1,28 @@
+import type { Nullable } from "@wikicasa-dev/types";
+
+export const getSingleElement = (selector: string): HTMLElement => {
+  const el = document.querySelector(selector) as HTMLElement;
+  if (!el) throw new Error(`No element found with the id: ${selector}`);
+  return el;
+};
+
+export const emptyElem = (selectorOrElem: string | Element): void => {
+  if (typeof selectorOrElem === "string")
+    getSingleElement(selectorOrElem).textContent = "";
+  else selectorOrElem.textContent = "";
+};
+
+export const showElem = (
+  elem: Nullable<HTMLElement>,
+  displayValue: "block" | "d-flex" = "block"
+): void => {
+  if (!elem) return;
+
+  elem.style.display = displayValue;
+};
+
+export const hideElem = (elem: Nullable<HTMLElement>): void => {
+  if (!elem) return;
+
+  elem.style.display = "none";
+};

package/src/utils/DateUtils.ts

@@ -0,0 +1,9 @@
+export function formatDate(date: Date, display: boolean = false): string {
+  const day = date.getDate();
+  const month = date.getMonth() + 1;
+  const year = date.getFullYear();
+
+  return display
+    ? `${("0" + day).slice(-2)}-${("0" + month).slice(-2)}-${year}`
+    : `${year}-${("0" + month).slice(-2)}-${("0" + day).slice(-2)}`;
+}

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 Function, 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/GAEvents.ts

@@ -0,0 +1,414 @@
+import type {
+  Nullable,
+  GA3Props,
+  GA4Props,
+  GAEvent,
+  GaPhoneShowPayload,
+  GaRequestPayload,
+  GaValuationPayload,
+  GaValuationSellingPayload,
+  GenericPayload,
+  ValuationEventObject,
+} from "@wikicasa-dev/types";
+
+const createBaseGAEvent = (
+  GA3_props: Nullable<GA3Props>,
+  GA4_props: GA4Props
+): Partial<GA3Props> & GA4Props => {
+  return GA3_props ? { ...GA3_props, ...GA4_props } : { ...GA4_props };
+};
+
+const sendValuationGAEvent = (payload: GaValuationPayload): void => {
+  const eventObject: ValuationEventObject = {
+    event: "GAevent",
+    eventCategory: "Valutazione immobile",
+    eventAction: payload.eventAction,
+    eventLabel: "Pagina valutazione",
+    //GA4
+    event_name:
+      payload.eventAction === "Share"
+        ? "valuation_share"
+        : "valuation_share_modal",
+    event_location: "Valutazione",
+  };
+
+  if (payload.social) eventObject.social = payload.social;
+
+  //@ts-ignore
+  window["dataLayer"].push(eventObject);
+};
+const sendRequestGAEvent = (data: GaRequestPayload): void => {
+  //@ts-ignore
+  window["dataLayer"].push({
+    event: "GAevent",
+    eventCategory: data.id ? "Richiesta specifica" : "Richiesta agenzia",
+    eventAction: "Invio richiesta",
+    // eslint-disable-next-line max-len
+    eventLabel:
+      (data.franchise
+        ? `${data.franchise} / AG_${data.agencyId}`
+        : `AG_${data.agencyId}`) +
+      (data.id
+        ? ` / WK_${data.id} (${data.pageName}: ${
+            data.sale ? "vendita" : "affitto"
+          } / ${data.premium ? "premium" : data.lite ? "lite" : "free"})`
+        : ` (${data.pageName}: ${
+            data.premium ? "premium" : data.lite ? "lite" : "free"
+          })`),
+    franchise: data.franchise ? data.franchise : undefined,
+    agent_id: data.agentId ? `${data.agentId}` : undefined,
+    agent_email: data.agentEmail,
+    product_price: data.productPrice,
+    email: data.email,
+    //GA4
+    event_name: data.id ? "specific_request_lead" : "generic_request_lead",
+    event_location: `${data.pageName}`,
+    real_estate_id: data.id,
+    product_id: `WK_${data.id}`,
+    contract_type: data.id
+      ? data.auction
+        ? "auction"
+        : data.rent
+        ? "rent"
+        : "sale"
+      : undefined,
+    price: data.price,
+    typology_name: data.typologyName,
+    agency_id: data.agencyId,
+    agency_name: data.agencyName,
+    franchise_id: data.franchise_id,
+    franchise_name: data.franchise_name,
+    subscription_type: data.premium ? "premium" : data.lite ? "lite" : "free",
+    premium: data.premium,
+  });
+};
+const sendMortgageGAEvent = (): void => {
+  //@ts-ignore
+  window["dataLayer"].push({
+    event: "GAevent",
+    eventCategory: "Preventivo Mutuo",
+    eventAction: "Invio richiesta",
+    eventLabel: "Popup - Richiesta specifica",
+    //GA4
+    event_name: "mortgage_lead",
+    event_location: "Modale Richiesta Specifica",
+  });
+};
+const sendMailAlertSaveGAEvent = (): void => {
+  //@ts-ignore
+  window["dataLayer"].push({
+    event: "GAevent",
+    eventCategory: "Mail alert",
+    eventAction: "Ricerca salvata",
+    eventLabel: "Popup - Richiesta specifica",
+    //GA4
+    event_name: "mail_alert_save",
+    event_location: "Modale Richiesta Specifica",
+  });
+};
+const sendGenericRequestLead = (): void => {
+  //@ts-ignore
+  window["dataLayer"].push({
+    event: "GAevent",
+    eventCategory: "Richiesta generica",
+    eventAction: "Invio richiesta",
+    eventLabel: "Popup - Richiesta specifica",
+    //GA4
+    event_name: "generic_request_lead",
+    event_location: "Modale Richiesta Specifica",
+  });
+};
+const sendNewsletterSubscribeGAEvent = (): void => {
+  //@ts-ignore
+  window["dataLayer"].push({
+    event: "GAevent",
+    eventCategory: "Newsletter",
+    eventAction: "Iscrizione",
+    eventLabel: "Popup - Richiesta specifica",
+    //GA4
+    event_name: "newsletter_subscribe",
+    event_location: "Modale Richiesta Specifica",
+  });
+};
+const sendPhoneShowGAEvent = (agencyData: GaPhoneShowPayload): void => {
+  //@ts-ignore
+  window["dataLayer"].push({
+    event: "GAevent",
+    eventCategory: "Telefono",
+    eventAction: "Mostra telefono",
+    // eslint-disable-next-line max-len
+    eventLabel:
+      (agencyData.franchise
+        ? `${agencyData.franchise} / AG_${agencyData.agencyId}`
+        : `AG_${agencyData.agencyId}`) +
+      // eslint-disable-next-line max-len
+      (agencyData.id
+        ? ` / WK_${agencyData.id} (${agencyData.pageName}: ${
+            agencyData.sale ? "vendita" : "affitto"
+          } / ${
+            agencyData.premium ? "premium" : agencyData.lite ? "lite" : "free"
+          })`
+        : ` (${agencyData.pageName}: ${
+            agencyData.premium ? "premium" : agencyData.lite ? "lite" : "free"
+          })`),
+    franchise: agencyData.franchise ? agencyData.franchise : undefined,
+    product_id: agencyData.id ? `WK_${agencyData.id}` : undefined,
+    product_price: agencyData.product_price,
+    //GA4
+    event_name: "phone_show",
+    real_estate_id: `${agencyData.id}`,
+    contract_type: agencyData.auction
+      ? "auction"
+      : agencyData.rent && !agencyData.sale
+      ? "rent"
+      : "sale",
+    price: agencyData.price,
+    typology_name: agencyData.typologyName,
+    agency_id: agencyData.agencyId,
+    agency_name: agencyData?.agencyName,
+    franchise_id: agencyData.franchise ? agencyData.franchise_id : "",
+    franchise_name: agencyData.franchise,
+    premium: agencyData.premium,
+    subscription_type: agencyData.premium
+      ? "premium"
+      : agencyData.lite
+      ? "lite"
+      : "free",
+    event_location: agencyData.pageName,
+  });
+};
+const sendPublicUserLoginGAEvent = (): void => {
+  //@ts-ignore
+  window["dataLayer"].push({
+    event: "GAevent",
+    eventCategory: "Utenti pubblici",
+    eventAction: "Login",
+    eventLabel: "Modale Login",
+    //GA4
+    event_name: "login",
+    event_location: "login_modal",
+  });
+};
+
+const sendNotificationOpenedGAEvent = (): void => {
+  const GAEventObj = createBaseGAEvent(
+    {
+      event: "GAevent",
+      eventCategory: "Mail alert",
+      eventAction: "Apertura notifica push",
+      eventLabel: "Notifica Push - Salva ricerca",
+    },
+    {
+      event: "GAevent",
+      event_name: "push_notification_opened",
+      event_location: "Notifica Push - Android_or_Web",
+    }
+  );
+  //@ts-ignore
+  window["dataLayer"].push({ event_location: "save_searches", ...GAEventObj });
+};
+const sendSignUpGAEvent = (): void => {
+  //@ts-ignore
+  window["dataLayer"].push(
+    createBaseGAEvent(
+      {
+        event: "GAevent",
+        eventCategory: "Utenti pubblici",
+        eventAction: "Registrazione",
+        eventLabel: "Modale registrazione",
+      },
+      {
+        event: "GAevent",
+        event_name: "public_user_sign_up",
+        event_location: "Modale Registrazione",
+      }
+    )
+  );
+};
+
+const sendErrorRequestGAEvent = (): void => {
+  //@ts-ignore
+  window["dataLayer"].push({
+    event: "GAevent",
+    eventCategory: "Richiesta Specifica",
+    eventAction: "Errore Richiesta",
+    eventLabel: "Richiesta gia effettuata - 409",
+    //GA4
+    event_name: "specific_request_error",
+    event_location: "Modale Richiesta Specifica",
+    code_error: "request_already_made_409",
+  });
+};
+const sendPremiumInfoGAEvent = (): void => {
+  //@ts-ignore
+  window["dataLayer"].push(
+    createBaseGAEvent(
+      {
+        event: "GAevent",
+        eventCategory: "Premium",
+        eventAction: "Richiesta Informazioni",
+      },
+      {
+        event: "GAevent",
+        event_name: "premium_info",
+        event_location: "Pagina Premium",
+      }
+    )
+  );
+};
+
+const sendValuationComplete = (): void => {
+  //@ts-ignore
+  window["dataLayer"].push(
+    createBaseGAEvent(
+      {
+        event: "GAevent",
+        eventCategory: "Valutazione immobile",
+        eventAction: "Invio richiesta",
+        eventLabel: "Pagina valutazione",
+      },
+      {
+        event: "GAevent",
+        event_name: "valuation_complete",
+        event_location: "Valutazione - Step 3",
+      }
+    )
+  );
+};
+
+const sendValuationLead = (
+  sellingPayload: GaValuationSellingPayload = {
+    isSelling: false,
+  }
+): void => {
+  //@ts-ignore
+  window["dataLayer"].push(
+    createBaseGAEvent(null, {
+      event: "GAevent",
+      event_name: "valuation_lead",
+      event_location: "Valutazione - Step 3",
+      valuation_type: sellingPayload.isSelling ? "selling" : "valuation",
+    })
+  );
+};
+
+const sendDownloadPDF = (): void => {
+  //@ts-ignore
+  window["dataLayer"].push(
+    createBaseGAEvent(
+      {
+        event: "GAevent",
+        eventCategory: "Valutazione immobile",
+        eventAction: "Download PDF",
+        eventLabel: "Pagina valutazione",
+      },
+      {
+        event: "GAevent",
+        //GA4
+        event_name: "valuation_pdf_download",
+        event_location: "Valutazione",
+      }
+    )
+  );
+};
+
+const sendRequestModalInteractionGAEvent = (props: {
+  pageName: string;
+}): void => {
+  const gaEvent = createBaseGAEvent(null, {
+    event: "GAevent",
+    event_name: "specific_request_interaction",
+    event_location: props.pageName,
+  });
+  //@ts-ignore
+  window["dataLayer"].push(gaEvent);
+};
+
+const copyAVMwidgetGAEvent = (): void => {
+  //@ts-ignore
+  window["dataLayer"].push(
+    createBaseGAEvent(
+      {
+        event: "GAevent",
+        eventCategory: "Widget AVM",
+        eventAction: "Copia Widget AVM",
+      },
+      {
+        event: "GAevent",
+        event_name: "copy_avm_widget",
+        event_location: "Pagina Widget AVM",
+      }
+    )
+  );
+};
+
+const copyTrendWidgetGAEvent = (): void => {
+  //@ts-ignore
+  window["dataLayer"].push(
+    createBaseGAEvent(
+      {
+        event: "GAevent",
+        eventCategory: "Widget Quotazioni",
+        eventAction: "Copia Widget Quotazioni",
+      },
+      {
+        event: "GAevent",
+        event_name: "copy_trend_widget",
+        event_location: "Pagina Widget Quotazioni",
+      }
+    )
+  );
+};
+
+const sendAVMwidgetRequest = (): void => {
+  //@ts-ignore
+  window["dataLayer"].push(
+    createBaseGAEvent(
+      {
+        event: "GAevent",
+        eventCategory: "Widget AVM",
+        eventAction: "Invio Richiesta Widget AVM",
+      },
+      {
+        event: "GAevent",
+        event_name: "send_request_avm_widget",
+        event_location: "Pagina Widget AVM",
+      }
+    )
+  );
+};
+
+const GAEventHandler: Record<GAEvent, (...args: any[]) => void> = {
+  valuation: sendValuationGAEvent,
+  request: sendRequestGAEvent,
+  mortgage: sendMortgageGAEvent,
+  mailAlertSave: sendMailAlertSaveGAEvent,
+  generic_request_lead: sendGenericRequestLead,
+  newsletter_subscribe: sendNewsletterSubscribeGAEvent,
+  phone_show: sendPhoneShowGAEvent,
+  public_user_login: sendPublicUserLoginGAEvent,
+  pushNotificationOpened: sendNotificationOpenedGAEvent,
+  public_user_sign_up: sendSignUpGAEvent,
+  premium_info: sendPremiumInfoGAEvent,
+  valuation_complete: sendValuationComplete,
+  valuation_lead: sendValuationLead,
+  valuation_pdf_download: sendDownloadPDF,
+  error_request_409: sendErrorRequestGAEvent,
+  specific_request_interaction: sendRequestModalInteractionGAEvent,
+  copy_avm_widget: copyAVMwidgetGAEvent,
+  copy_trend_widget: copyTrendWidgetGAEvent,
+  send_avm_widget_request: sendAVMwidgetRequest,
+};
+
+// eslint-disable-next-line max-len
+export function sendGAEvent<
+  T extends
+    | GaValuationPayload
+    | GaRequestPayload
+    | GaPhoneShowPayload
+    | GenericPayload
+    | GaValuationSellingPayload
+>(GAEvent: GAEvent, payload?: T): void {
+  const handler = GAEventHandler[GAEvent];
+  payload ? handler(payload) : handler();
+}

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 + "\")";
+        }
+    }
+
+});