data-layer.ts

// DataLayer: singleton helper for pushing structured analytics events/vars to window.dataLayer.
// On load it emits one aggregated event `pageJsonVariablesReady` with:
//   EN_PAGEJSON_* (normalized pageJson), EN_URLPARAM_*, EN_RECURRING_FREQUENCIES (donation pages),
//   and EN_SUBMISSION_SUCCESS_{PAGETYPE} when on the final page.
// User actions emit: EN_FORM_VALUE_UPDATED (field changes) and submission opt‑in/out events.
// Queued end‑of‑gift events/variables (via addEndOfGiftProcessEvent / addEndOfGiftProcessVariable)
// are replayed after a successful gift process load.
// Sensitive payment/bank fields are excluded; selected PII fields are Base64 “hashed” (btoa — not cryptographic).
// Replace with a real hash (e.g., SHA‑256) if required.

import { EngridLogger, ENGrid, EnForm, RememberMeEvents } from ".";

export class DataLayer {
  private logger: EngridLogger = new EngridLogger(
    "DataLayer",
    "#f1e5bc",
    "#009cdc",
    "📊"
  );
  private dataLayer = (window as any).dataLayer || [];
  private _form: EnForm = EnForm.getInstance();
  private static instance: DataLayer;
  private encoder = new TextEncoder();
  private endOfGiftProcessStorageKey = "ENGRID_END_OF_GIFT_PROCESS_EVENTS";

  // pageJson entries related to the gift process
  private giftFields = [
    "amount",
    "currency",
    "donationLogId",
    "feeCover",
    "giftProcess",
    "paymentType",
    "receiptNumber",
    "recurring",
    "transactionId",
    "transactionType",
  ];

  private excludedFields = [
    // Credit Card
    "transaction.ccnumber",
    "transaction.ccexpire.delimiter",
    "transaction.ccexpire",
    "transaction.ccvv",
    "supporter.creditCardHolderName",

    // Bank Account
    "supporter.bankAccountNumber",
    "supporter.bankAccountType",
    "transaction.bankname",
    "supporter.bankRoutingNumber",
  ];

  private hashedFields = [
    // Supporter Address, Phone Numbers, and Address
    "supporter.emailAddress",
    "supporter.phoneNumber",
    "supporter.phoneNumber2",
    "supporter.address1",
    "supporter.address2",
    "supporter.address3",

    // In Honor/Memory Inform Email and Address
    "transaction.infemail",
    "transaction.infadd1",
    "transaction.infadd2",
    "transaction.infadd3",

    // Billing Address
    "supporter.billingAddress1",
    "supporter.billingAddress2",
    "supporter.billingAddress3",
  ];

  private retainedEmailField = "supporter.emailAddress";
  private retainedAddressFields = [
    "supporter.address1",
    "supporter.address2",
    "supporter.address3",
  ];
  private retainedPhoneFields = [
    "supporter.phoneNumber2",
    "supporter.phoneNumber",
  ];

  constructor() {
    if (ENGrid.getOption("RememberMe")) {
      RememberMeEvents.getInstance().onLoad.subscribe((hasData) => {
        this.logger.log("Remember me - onLoad", hasData);
        this.onLoad();
      });
    } else {
      this.onLoad();
    }
    this._form.onSubmit.subscribe(() => this.onSubmit());
  }

  public static getInstance(): DataLayer {
    if (!DataLayer.instance) {
      DataLayer.instance = new DataLayer();
      (window as any)._dataLayer = DataLayer.instance;
    }

    return DataLayer.instance;
  }

  private transformJSON(value: any) {
    if (typeof value === "string") {
      return value
        .toUpperCase()
        .trim()
        .replace(/\s+/g, "-")
        .replace(/:-/g, "-");
    }
    if (typeof value === "boolean") {
      return value ? "TRUE" : "FALSE";
    }
    if (typeof value === "number") {
      return value; // Preserve numeric type for analytics platforms that infer number vs string
    }
    return "";
  }

  private onLoad() {
    // Collect all data layer variables to push at once
    const dataLayerData: { [key: string]: any } = {};
    const suppressEcardData =
      ENGrid.getPageType() === "ECARD" &&
      ENGrid.getOption("SuppressPurchaseEcard");

    if (ENGrid.getGiftProcess()) {
      // EN will chain together gift process data on the page json when redirecting from a completed donation to an ecard.
      // Since the ecard page can be embedded on the thank you page of a donation, this can cause confusion in the data layer with events
      // firing for both the donation and the ecard on the same page.
      if (suppressEcardData) {
        this.logger.log(
          "⛔ Gift process was detected BUT suppressing EN_SUCCESSFUL_DONATION event due to SuppressPurchaseEcard option enabled"
        );
        window.sessionStorage.removeItem(this.endOfGiftProcessStorageKey);
      } else {
        this.logger.log("EN_SUCCESSFUL_DONATION");
        this.addEndOfGiftProcessEventsToDataLayer();
      }
    }

    if (window.pageJson) {
      const pageJson = window.pageJson as Record<string, any>;
      for (const property in pageJson) {
        if (suppressEcardData && this.giftFields.includes(property)) {
          continue;
        }
        const key = `EN_PAGEJSON_${property.toUpperCase()}`;
        const value = pageJson[property];
        dataLayerData[key] = this.transformJSON(value);
      }
      if (ENGrid.getPageCount() === ENGrid.getPageNumber()) {
        dataLayerData[
          `EN_SUBMISSION_SUCCESS_${pageJson.pageType.toUpperCase()}`
        ] = "TRUE";
      }
    }

    const urlParams = new URLSearchParams(window.location.search);
    urlParams.forEach((value, key) => {
      dataLayerData[`EN_URLPARAM_${key.toUpperCase()}`] =
        this.transformJSON(value);
    });

    this.addRetainedHashesToDataLayer(dataLayerData);

    if (ENGrid.getPageType() === "DONATION") {
      const recurrFreqEls = document.querySelectorAll(
        '[name="transaction.recurrfreq"]'
      ) as NodeListOf<HTMLInputElement>;

      const recurrValues = [...recurrFreqEls].map((el) => el.value);

      dataLayerData[`EN_RECURRING_FREQUENCIES`] = recurrValues;
    }

    // Push all collected variables at once
    if (Object.keys(dataLayerData).length > 0) {
      dataLayerData.event = "pageJsonVariablesReady";
      this.dataLayer.push(dataLayerData);
    }

    this.attachEventListeners();
  }

  private addRetainedHashesToDataLayer(
    dataLayerData: Record<string, any>
  ): void {
    if (typeof window === "undefined" || !window.localStorage) {
      return;
    }

    ["EMAIL", "ADDRESS", "PHONE"].forEach((suffix) => {
      const storageKey = `EN_HASH_${suffix}`;
      const storedValue = window.localStorage.getItem(storageKey);
      if (storedValue) {
        dataLayerData[storageKey] = storedValue;
      }
    });
  }

  private onSubmit() {
    const optIn = document.querySelector(
      ".en__field__item:not(.en__field--question) input[name^='supporter.questions'][type='checkbox']:checked"
    );
    if (optIn) {
      this.logger.log("EN_SUBMISSION_WITH_EMAIL_OPTIN");
      this.dataLayer.push({
        event: "EN_SUBMISSION_WITH_EMAIL_OPTIN",
      });
    } else {
      this.logger.log("EN_SUBMISSION_WITHOUT_EMAIL_OPTIN");
      this.dataLayer.push({
        event: "EN_SUBMISSION_WITHOUT_EMAIL_OPTIN",
      });
    }
  }

  private attachEventListeners() {
    const textInputs = document.querySelectorAll(
      ".en__component--advrow input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([unhidden]), .en__component--advrow textarea"
    ) as NodeListOf<HTMLInputElement>;

    textInputs.forEach((el) => {
      el.addEventListener("blur", (e) => {
        this.handleFieldValueChange(e.target as HTMLInputElement);
      });
    });

    const radioAndCheckboxInputs = document.querySelectorAll(
      ".en__component--advrow input[type=checkbox], .en__component--advrow input[type=radio]"
    ) as NodeListOf<HTMLInputElement>;

    radioAndCheckboxInputs.forEach((el) => {
      el.addEventListener("change", (e) => {
        this.handleFieldValueChange(e.target as HTMLInputElement);
      });
    });

    const selectInputs = document.querySelectorAll(
      ".en__component--advrow select"
    ) as NodeListOf<HTMLInputElement>;

    selectInputs.forEach((el) => {
      el.addEventListener("change", (e) => {
        this.handleFieldValueChange(e.target as HTMLInputElement);
      });
    });
  }

  private async handleFieldValueChange(
    el: HTMLInputElement | HTMLSelectElement
  ) {
    if (el.value === "" || this.excludedFields.includes(el.name)) return;

    const value = this.hashedFields.includes(el.name)
      ? await this.hash(el.value)
      : el.value;

    if (["checkbox", "radio"].includes(el.type)) {
      if ((el as HTMLInputElement).checked) {
        if (el.name === "en__pg") {
          //Premium gift handling
          this.dataLayer.push({
            event: "EN_FORM_VALUE_UPDATED",
            enFieldName: el.name,
            enFieldLabel: "Premium Gift",
            enFieldValue: el
              .closest(".en__pg__body")
              ?.querySelector(".en__pg__name")?.textContent,
            enProductId: (
              document.querySelector(
                '[name="transaction.selprodvariantid"]'
              ) as HTMLInputElement
            )?.value,
          });
        } else {
          this.dataLayer.push({
            event: "EN_FORM_VALUE_UPDATED",
            enFieldName: el.name,
            enFieldLabel: this.getFieldLabel(el),
            enFieldValue: value,
          });
        }
      }
      return;
    }

    if (el.name === this.retainedEmailField) {
      const retainedEmailValue = this.geRetainedFieldsValue("email");
      const sha256value = await this.hash(retainedEmailValue);
      localStorage.setItem(`EN_HASH_EMAIL`, sha256value);
      this.dataLayer.push({
        event: "EN_HASH_VALUE_UPDATED",
        enFieldName: "email",
        enFieldLabel: this.getFieldLabel(el),
        enFieldValue: sha256value,
      });
      return;
    } else if (this.retainedAddressFields.includes(el.name)) {
      const retainedAddressValue = this.geRetainedFieldsValue("address");
      const sha256value = await this.hash(retainedAddressValue);
      localStorage.setItem(`EN_HASH_ADDRESS`, sha256value);
      this.dataLayer.push({
        event: "EN_HASH_VALUE_UPDATED",
        enFieldName: "address",
        enFieldLabel: "Supporter Address",
        enFieldValue: sha256value,
      });
    } else if (this.retainedPhoneFields.includes(el.name)) {
      const retainedPhoneValue = this.geRetainedFieldsValue("phone");
      const sha256value = await this.hash(retainedPhoneValue);
      localStorage.setItem(`EN_HASH_PHONE`, sha256value);
      this.dataLayer.push({
        event: "EN_HASH_VALUE_UPDATED",
        enFieldName: "phone",
        enFieldLabel: "Supporter Phone",
        enFieldValue: sha256value,
      });
    }

    this.dataLayer.push({
      event: "EN_FORM_VALUE_UPDATED",
      enFieldName: el.name,
      enFieldLabel: this.getFieldLabel(el),
      enFieldValue: value,
    });
  }

  private geRetainedFieldsValue(kind: "email" | "address" | "phone"): string {
    switch (kind) {
      case "email":
        return ENGrid.getFieldValue(this.retainedEmailField);
      case "address":
        return this.retainedAddressFields
          .map((field) => ENGrid.getFieldValue(field))
          .filter((value) => value !== "")
          .join("")
          .toLocaleLowerCase()
          .replace(/\s+/g, "");
      case "phone":
        // Only return the first phone number found - prioritize phoneNumber2 over phoneNumber and remove non-numeric characters
        for (const field of this.retainedPhoneFields) {
          const value = ENGrid.getFieldValue(field);
          if (value !== "") {
            return value.replace(/\D/g, "");
          }
        }
        return "";
      default:
        return "";
    }
  }

  private async hash(value: string): Promise<string> {
    const data = this.encoder.encode(value);
    const hashBuffer = await crypto.subtle.digest("SHA-256", data);
    return Array.from(new Uint8Array(hashBuffer))
      .map((byte) => {
        const hex = byte.toString(16);
        return hex.length === 1 ? "0" + hex : hex;
      })
      .join("");
  }

  private getFieldLabel(
    el: HTMLInputElement | HTMLSelectElement
  ): string | null {
    return el.closest(".en__field")?.querySelector("label")?.textContent || "";
  }

  public addEndOfGiftProcessEvent(
    eventName: string,
    eventProperties: object = {}
  ) {
    this.storeEndOfGiftProcessData({
      event: eventName,
      ...eventProperties,
    });
  }

  public addEndOfGiftProcessVariable(
    variableName: string,
    variableValue: any = ""
  ) {
    this.storeEndOfGiftProcessData({
      [variableName.toUpperCase()]: variableValue,
    });
  }

  private storeEndOfGiftProcessData(data: object) {
    const events = this.getEndOfGiftProcessData();
    events.push(data);
    window.sessionStorage.setItem(
      this.endOfGiftProcessStorageKey,
      JSON.stringify(events)
    );
  }

  private addEndOfGiftProcessEventsToDataLayer() {
    this.getEndOfGiftProcessData().forEach((event: object) => {
      this.dataLayer.push(event);
    });
    window.sessionStorage.removeItem(this.endOfGiftProcessStorageKey);
  }

  private getEndOfGiftProcessData(): Array<any> {
    let eventsData = window.sessionStorage.getItem(
      this.endOfGiftProcessStorageKey
    );
    return !eventsData ? [] : JSON.parse(eventsData);
  }
}