@ikas/storefront 4.0.0-alpha.50 → 4.0.0-alpha.52

package/src/analytics/analytics.ts

@@ -1,537 +0,0 @@
-import { makeAutoObservable } from "mobx";
-import {
-  IkasProduct,
-  IkasOrderLineItem,
-  IkasCategory,
-  IkasThemeJsonPageType,
-  IkasOrderTransaction,
-  IkasBrand,
-  IkasCustomer,
-  IkasCheckout,
-  IkasContactForm,
-} from "../models";
-import { CheckoutStep } from "../components/checkout/model";
-import { FacebookPixel } from "./facebookPixel";
-import { GoogleTagManager } from "./googleTagManager";
-import { IkasCart } from "../models/data/cart";
-import { IkasEventSubscriber, IkasEventType } from "./events";
-import _cloneDeep from "lodash/cloneDeep";
-import { tryForEach } from "../utils/helper";
-import IkasAnalytics from "./ikas";
-import { GoogleAnalytics } from "./googleAnalytics";
-import { GoogleUniversal } from "./googleUniversal";
-import { TiktokPixel } from "./tiktokPixel";
-import { IkasBaseStore } from "../store";
-
-const LS_BEGIN_CHECKOUT_KEY = "gtmBeginCheckout";
-
-export class Analytics {
-  static subscribers: IkasEventSubscriber[] = [];
-
-  constructor() {
-    makeAutoObservable(this);
-  }
-
-  static async getCustomerInfo() {
-    const store = IkasBaseStore.getInstance();
-    await store.customerStore.waitUntilInitialized();
-
-    const customer = store.customerStore.customer;
-
-    if (customer) {
-      return {
-        ...customer.basicInfo,
-        consentGranted: store.customerStore.customerConsentGranted,
-      };
-    }
-
-    return null;
-  }
-
-  static async pageView(pageType: IkasThemeJsonPageType) {
-    try {
-      const url = window.location.href;
-      const customerInfo = await Analytics.getCustomerInfo();
-
-      GoogleTagManager.pageView(url);
-      GoogleUniversal.pageView(window.location.pathname);
-      IkasAnalytics.pageView(pageType);
-
-      tryForEach(Analytics.subscribers, (s) => {
-        s.callback({
-          type: IkasEventType.PAGE_VIEW,
-          data: {
-            url,
-            pageType,
-            customer: customerInfo,
-          },
-        });
-      });
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static productView(productDetail: IkasProduct) {
-    try {
-      FacebookPixel.productView(productDetail);
-      GoogleTagManager.productView(productDetail);
-      IkasAnalytics.productView(productDetail);
-      GoogleAnalytics.productView(productDetail);
-      GoogleUniversal.productView(productDetail);
-      TiktokPixel.productView(productDetail);
-
-      if (Analytics.subscribers.length) {
-        const clone = new IkasProduct(_cloneDeep(productDetail));
-
-        tryForEach(Analytics.subscribers, (s) => {
-          s.callback({
-            type: IkasEventType.PRODUCT_VIEW,
-            data: {
-              productDetail: clone,
-            },
-          });
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static addToCart(
-    item: IkasOrderLineItem,
-    quantity: number,
-    eventId: string,
-    cart: IkasCart
-  ) {
-    try {
-      FacebookPixel.addToCart(item, quantity, eventId);
-      GoogleTagManager.addToCart(item, quantity);
-      IkasAnalytics.addToCart(item, quantity, cart);
-      GoogleAnalytics.addToCart(item, quantity);
-      GoogleUniversal.addToCart(item, quantity);
-      TiktokPixel.addToCart(item, quantity);
-
-      if (Analytics.subscribers.length) {
-        const cloneItem = _cloneDeep(item);
-        const cloneCart = new IkasCart(_cloneDeep(cart));
-
-        tryForEach(Analytics.subscribers, (s) => {
-          s.callback({
-            type: IkasEventType.ADD_TO_CART,
-            data: {
-              item: cloneItem,
-              quantity,
-              cart: cloneCart,
-            },
-          });
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static removeFromCart(
-    item: IkasProduct | IkasOrderLineItem,
-    quantity: number,
-    cart: IkasCart
-  ) {
-    try {
-      GoogleTagManager.removeFromCart(item, quantity);
-      GoogleAnalytics.removeFromCart(item, quantity);
-      GoogleUniversal.removeFromCart(item, quantity);
-
-      if (Analytics.subscribers.length) {
-        const cloneItem = _cloneDeep(item);
-        const cloneCart = new IkasCart(_cloneDeep(cart));
-
-        tryForEach(Analytics.subscribers, (s) => {
-          s.callback({
-            type: IkasEventType.REMOVE_FROM_CART,
-            data: {
-              item: cloneItem,
-              quantity,
-              cart: cloneCart,
-            },
-          });
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static beginCheckout(checkout: IkasCheckout) {
-    try {
-      const beginCheckout = localStorage.getItem(LS_BEGIN_CHECKOUT_KEY);
-      if (beginCheckout && checkout.id === beginCheckout) return;
-      localStorage.setItem(LS_BEGIN_CHECKOUT_KEY, checkout.id!);
-
-      FacebookPixel.beginCheckout(checkout);
-      GoogleTagManager.beginCheckout(checkout);
-      IkasAnalytics.beginCheckout(checkout);
-      GoogleAnalytics.beginCheckout(checkout);
-      TiktokPixel.beginCheckout();
-
-      if (Analytics.subscribers.length) {
-        const cloneCheckout = new IkasCheckout(_cloneDeep(checkout));
-
-        tryForEach(Analytics.subscribers, (s) => {
-          s.callback({
-            type: IkasEventType.BEGIN_CHECKOUT,
-            data: {
-              checkout: cloneCheckout,
-            },
-          });
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static purchase(checkout: IkasCheckout, transaction: IkasOrderTransaction) {
-    try {
-      localStorage.removeItem(LS_BEGIN_CHECKOUT_KEY);
-
-      FacebookPixel.purchase(checkout, transaction.id || "");
-      GoogleTagManager.purchase(checkout, checkout.orderNumber || "");
-      IkasAnalytics.orderSuccess(checkout);
-      GoogleAnalytics.purchase(checkout, checkout.orderNumber || "");
-      GoogleUniversal.purchase(checkout, checkout.orderNumber || "");
-      TiktokPixel.purchase(checkout);
-
-      if (Analytics.subscribers.length) {
-        const cloneCheckout = new IkasCheckout(_cloneDeep(checkout));
-        const cloneTransaction = _cloneDeep(transaction);
-
-        tryForEach(Analytics.subscribers, (s) => {
-          s.callback({
-            type: IkasEventType.COMPLETE_CHECKOUT,
-            data: {
-              checkout: cloneCheckout,
-              transaction: cloneTransaction,
-            },
-          });
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static checkoutStep(checkout: IkasCheckout, step: CheckoutStep) {
-    try {
-      GoogleTagManager.checkoutStep(checkout, step);
-      IkasAnalytics.checkoutStep(checkout, step);
-      GoogleAnalytics.checkoutStep(checkout, step);
-
-      if (Analytics.subscribers.length) {
-        const cloneCheckout = new IkasCheckout(_cloneDeep(checkout));
-
-        tryForEach(Analytics.subscribers, (s) => {
-          s.callback({
-            type: IkasEventType.CHECKOUT_STEP,
-            data: {
-              checkout: cloneCheckout,
-              step,
-            },
-          });
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static disableHTML() {
-    try {
-      GoogleTagManager.disableHTML();
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static addToWishlist(productId: string) {
-    try {
-      FacebookPixel.addToWishlist(productId);
-      TiktokPixel.addToWishlist(productId);
-
-      if (Analytics.subscribers.length) {
-        tryForEach(Analytics.subscribers, (s) => {
-          s.callback({
-            type: IkasEventType.ADD_TO_WISHLIST,
-            data: {
-              productId,
-            },
-          });
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static search(searchKeyword: string) {
-    try {
-      FacebookPixel.search(searchKeyword);
-      GoogleTagManager.search(searchKeyword);
-      TiktokPixel.search(searchKeyword);
-
-      if (Analytics.subscribers.length) {
-        tryForEach(Analytics.subscribers, (s) => {
-          s.callback({
-            type: IkasEventType.SEARCH,
-            data: {
-              searchKeyword,
-            },
-          });
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static completeRegistration(customer: IkasCustomer) {
-    try {
-      FacebookPixel.completeRegistration();
-      GoogleTagManager.completeRegistration();
-      TiktokPixel.completeRegistration();
-      IkasAnalytics.customerRegister();
-
-      if (Analytics.subscribers.length) {
-        tryForEach(Analytics.subscribers, (s) => {
-          s.callback({
-            type: IkasEventType.CUSTOMER_REGISTER,
-            data: {
-              email: customer.email,
-              firstName: customer.firstName,
-              lastName: customer.lastName,
-            },
-          });
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static createEmailSubscripition(email: string) {
-    try {
-      if (Analytics.subscribers.length) {
-        tryForEach(Analytics.subscribers, (s) => {
-          s.callback({
-            type: IkasEventType.EMAIL_SUBSCRIPTION,
-            data: {
-              email,
-            },
-          });
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static async customerLogin() {
-    try {
-      const customerInfo = await Analytics.getCustomerInfo();
-      if (!customerInfo || !customerInfo.email) return;
-
-      GoogleTagManager.customerLogin(customerInfo.email);
-      IkasAnalytics.customerLogin();
-
-      if (Analytics.subscribers.length) {
-        tryForEach(Analytics.subscribers, (s) => {
-          s.callback({
-            type: IkasEventType.CUSTOMER_LOGIN,
-            data: {
-              customer: customerInfo,
-            },
-          });
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static async customerLogout() {
-    try {
-      if (Analytics.subscribers.length) {
-        tryForEach(Analytics.subscribers, (s) => {
-          s.callback({
-            type: IkasEventType.CUSTOMER_LOGOUT,
-            data: {},
-          });
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static async customerVisit() {
-    try {
-      const customerInfo = await Analytics.getCustomerInfo();
-      if (!customerInfo || !customerInfo.email) return;
-
-      GoogleTagManager.customerVisit(customerInfo.email);
-      IkasAnalytics.customerVisit();
-
-      if (Analytics.subscribers.length) {
-        tryForEach(Analytics.subscribers, (s) => {
-          s.callback({
-            type: IkasEventType.CUSTOMER_VISIT,
-            data: {
-              customer: customerInfo,
-            },
-          });
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static viewCart(cart: IkasCart | null | undefined) {
-    try {
-      if (cart) {
-        FacebookPixel.viewCart(cart);
-        IkasAnalytics.viewCart(cart);
-        GoogleAnalytics.viewCart(cart);
-
-        if (Analytics.subscribers.length) {
-          const cloneCart = new IkasCart(_cloneDeep(cart));
-
-          tryForEach(Analytics.subscribers, (s) => {
-            s.callback({
-              type: IkasEventType.VIEW_CART,
-              data: {
-                cart: cloneCart,
-              },
-            });
-          });
-        }
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static viewCategory(categoryPath: string, category: IkasCategory) {
-    try {
-      FacebookPixel.viewCategory(categoryPath);
-      GoogleTagManager.viewCategory(category, categoryPath);
-      IkasAnalytics.viewCategory(category);
-      TiktokPixel.viewCategory(category);
-
-      if (Analytics.subscribers.length) {
-        const cloneCategory = new IkasCategory(_cloneDeep(category));
-
-        tryForEach(Analytics.subscribers, (s) => {
-          s.callback({
-            type: IkasEventType.VIEW_CATEGORY,
-            data: {
-              categoryPath,
-              category: cloneCategory,
-            },
-          });
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static viewBrand(brand: IkasBrand) {
-    try {
-      IkasAnalytics.viewBrand(brand);
-
-      if (Analytics.subscribers.length) {
-        const cloneBrand = new IkasBrand(_cloneDeep(brand));
-
-        tryForEach(Analytics.subscribers, (s) => {
-          s.callback({
-            type: IkasEventType.VIEW_BRAND,
-            data: {
-              brand: cloneBrand,
-            },
-          });
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static viewSearchResults(
-    searchKeyword: string,
-    productDetails: IkasProduct[]
-  ) {
-    try {
-      if (Analytics.subscribers.length) {
-        const cloneProductDetails = _cloneDeep(productDetails).map(
-          (p) => new IkasProduct(p)
-        );
-
-        tryForEach(Analytics.subscribers, (s) => {
-          s.callback({
-            type: IkasEventType.VIEW_SEARCH_RESULTS,
-            data: {
-              searchKeyword,
-              productDetails: cloneProductDetails,
-            },
-          });
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static viewListing(productDetails: IkasProduct[]) {
-    try {
-      if (Analytics.subscribers.length) {
-        const cloneProductDetails = _cloneDeep(productDetails).map(
-          (p) => new IkasProduct(p)
-        );
-
-        tryForEach(Analytics.subscribers, (s) => {
-          s.callback({
-            type: IkasEventType.VIEW_LISTING,
-            data: {
-              productDetails: cloneProductDetails,
-            },
-          });
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-
-  static contactForm(form: IkasContactForm) {
-    try {
-      FacebookPixel.contactForm();
-      TiktokPixel.contactForm();
-
-      if (Analytics.subscribers.length) {
-        const cloneForm = _cloneDeep(form);
-
-        tryForEach(Analytics.subscribers, (s) => {
-          s.callback({
-            type: IkasEventType.CONTACT_FORM,
-            data: {
-              form: cloneForm,
-            },
-          });
-        });
-      }
-    } catch (err) {
-      console.error(err);
-    }
-  }
-}

package/src/analytics/events.ts

@@ -1,116 +0,0 @@
-import { Analytics } from "./analytics";
-
-export function IkasEvents(initialSubscribers: IkasEventSubscriber[]) {
-  // Subscriber type is "any" because this function will be called from app scripts
-  // We need to ensure type safety on runtime
-  const subscribe = (subscriber: any) => {
-    if (!isValidIkasEventSubscriber(subscriber)) return;
-
-    const existingSubscriberIndex = Analytics.subscribers.findIndex(
-      (s) => s.id === subscriber.id
-    );
-
-    if (existingSubscriberIndex !== -1) {
-      Analytics.subscribers[existingSubscriberIndex] = subscriber;
-    } else {
-      Analytics.subscribers.push(subscriber);
-    }
-  };
-
-  const unsubscribe = (id: string) => {
-    const existingSubscriberIndex = Analytics.subscribers.findIndex(
-      (s) => s.id === id
-    );
-
-    if (existingSubscriberIndex !== -1)
-      Analytics.subscribers.splice(existingSubscriberIndex, 1);
-  };
-
-  initialSubscribers.forEach(subscribe);
-
-  return {
-    subscribe,
-    unsubscribe,
-  };
-}
-
-export function initIkasEvents() {
-  //@ts-ignore
-  if (typeof window !== "undefined") {
-    let initialSubscribers: any[] = [];
-
-    try {
-      //@ts-ignore
-      const existingIkasEvents = window.IkasEvents;
-      if (
-        existingIkasEvents &&
-        existingIkasEvents.subscribers &&
-        existingIkasEvents.subscribers.length
-      ) {
-        initialSubscribers = existingIkasEvents.subscribers;
-      }
-    } catch (err) {}
-
-    //@ts-ignore
-    window.IkasEvents = IkasEvents(initialSubscribers);
-  }
-}
-
-// This is for the initial page load, a temporary object to collect subscribers from app scripts
-// until the page component mounts
-export function getIkasEventsScript() {
-  return `<script>
-    var subscribers = [];
-    var subscribe = (subscriber) => { subscribers.push(subscriber); }; 
-    var unsubscribe = () => {};
-    
-    window.IkasEvents = {
-      subscribers,
-      subscribe,
-      unsubscribe
-    };
-  </script>`;
-}
-
-export function isValidIkasEventSubscriber(data: any) {
-  return !!(
-    data &&
-    data.id &&
-    typeof data.id === "string" &&
-    data.callback &&
-    typeof data.callback === "function"
-  );
-}
-
-export enum IkasEventType {
-  PAGE_VIEW = "PAGE_VIEW",
-  PRODUCT_VIEW = "PRODUCT_VIEW",
-  ADD_TO_CART = "ADD_TO_CART",
-  REMOVE_FROM_CART = "REMOVE_FROM_CART",
-  BEGIN_CHECKOUT = "BEGIN_CHECKOUT",
-  CHECKOUT_STEP = "CHECKOUT_STEP",
-  COMPLETE_CHECKOUT = "COMPLETE_CHECKOUT",
-  ADD_TO_WISHLIST = "ADD_TO_WISHLIST",
-  SEARCH = "SEARCH",
-  CUSTOMER_REGISTER = "CUSTOMER_REGISTER",
-  CUSTOMER_LOGIN = "CUSTOMER_LOGIN",
-  CUSTOMER_LOGOUT = "CUSTOMER_LOGOUT",
-  CUSTOMER_VISIT = "CUSTOMER_VISIT",
-  VIEW_CART = "VIEW_CART",
-  VIEW_CATEGORY = "VIEW_CATEGORY",
-  VIEW_BRAND = "VIEW_BRAND",
-  VIEW_SEARCH_RESULTS = "VIEW_SEARCH_RESULTS",
-  VIEW_LISTING = "VIEW_LISTING",
-  CONTACT_FORM = "CONTACT_FORM",
-  EMAIL_SUBSCRIPTION = "EMAIL_SUBSCRIPTION",
-}
-
-export type IkasEventSubscriber = {
-  id: string;
-  callback: (event: IkasEvent) => void;
-};
-
-export type IkasEvent = {
-  type: IkasEventType;
-  data: any;
-};