@ikas/storefront 4.0.0-alpha.85 → 4.0.0-alpha.9

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@ikas/storefront",
-  "version": "4.0.0-alpha.85",
+  "version": "4.0.0-alpha.9",
   "description": "Storefront functionality for ikas storefront themes.",
   "author": "Umut Ozan Yıldırım",
   "license": "ISC",
-  "main": "./build/index.js",
-  "module": "./build/index.js",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
   "sideEffects": false,
   "files": [
-    "./build"
+    "./src"
   ],
   "type": "module",
   "scripts": {
@@ -19,23 +19,23 @@
   "dependencies": {
     "@stripe/react-stripe-js": "^1.7.2",
     "@stripe/stripe-js": "^1.29.0",
+    "query-string": "^6.13.8",
     "react-tooltip": "^4.2.21",
     "libphonenumber-js": "^1.10.6"
   },
   "devDependencies": {
-    "@ikas/storefront-api": "^4.0.0-alpha.85",
-    "@ikas/storefront-config": "^4.0.0-alpha.85",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.85",
-    "@ikas/storefront-models": "^4.0.0-alpha.85",
-    "@ikas/storefront-providers": "^4.0.0-alpha.85",
+    "@ikas/storefront-api": "^4.0.0-alpha.9",
+    "@ikas/storefront-config": "^4.0.0-alpha.9",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.9",
+    "@ikas/storefront-models": "^4.0.0-alpha.9",
+    "@ikas/storefront-providers": "^4.0.0-alpha.9",
     "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.3.0",
-    "rollup-plugin-rename-node-modules": "^1.2.0",
     "@types/react-phone-number-input": "^3.0.10",
     "mobx": "^6.1.3",
     "mobx-react-lite": "^3.1.5",
-    "next": "12.2.0",
+    "next": "canary",
     "prettier": "^2.2.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -49,22 +49,20 @@
     "typescript": "^4.7.2",
     "typescript-transform-paths": "^2.2.2",
     "lodash": "^4.17.20",
-    "html-react-parser": "^1.4.0",
-    "query-string": "^6.13.8"
+    "html-react-parser": "^1.4.0"
   },
   "peerDependencies": {
-    "@ikas/storefront-api": "^4.0.0-alpha.85",
-    "@ikas/storefront-config": "^4.0.0-alpha.85",
-    "@ikas/storefront-model-functions": "^4.0.0-alpha.85",
-    "@ikas/storefront-models": "^4.0.0-alpha.85",
-    "@ikas/storefront-providers": "^4.0.0-alpha.85",
+    "@ikas/storefront-api": "^4.0.0-alpha.9",
+    "@ikas/storefront-config": "^4.0.0-alpha.9",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.9",
+    "@ikas/storefront-models": "^4.0.0-alpha.9",
+    "@ikas/storefront-providers": "^4.0.0-alpha.9",
     "mobx": "^6.1.3",
     "mobx-react-lite": "^3.1.5",
-    "next": "12.2.0",
+    "next": "canary",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "lodash": "^4.17.20",
-    "html-react-parser": "^1.4.0",
-    "query-string": "^6.13.8"
+    "html-react-parser": "^1.4.0"
   }
 }

package/src/analytics/analytics.ts

@@ -0,0 +1,536 @@
+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);
+      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, checkout.orderNumber || "");
+      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);
+    }
+  }
+}