@ikas/storefront 3.0.0-beta.1 → 4.0.0-alpha.11

package/package.json

@@ -1,126 +1,68 @@
 {
   "name": "@ikas/storefront",
-  "version": "3.0.0-beta.1",
-  "main": "./build/index.js",
-  "module": "./build/index.js",
+  "version": "4.0.0-alpha.11",
+  "description": "Storefront functionality for ikas storefront themes.",
   "author": "Umut Ozan Yıldırım",
   "license": "ISC",
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
   "sideEffects": false,
   "files": [
-    "/build"
+    "./src"
   ],
-  "bin": {
-    "ikas": "./build/ikas.js"
-  },
   "type": "module",
   "scripts": {
-    "prepack": "npm run buildExecutable",
-    "lint": "eslint 'src/**/*.{js,ts,tsx}' --quiet --fix",
-    "test": "jest",
-    "buildExecutable": "rm -rf build && rollup -c",
-    "codegen": "apollo client:codegen --target typescript --watch --globalTypesFile='./src/__generated__/global-types.ts'"
-  },
-  "peerDependencies": {
-    "mobx": "^6.1.3",
-    "mobx-react-lite": "^3.1.5",
-    "next": "12.0.7",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "pack": "npm pack",
+    "release": "npm publish",
+    "build": "rm -rf build && rollup -c"
   },
   "dependencies": {
-    "@apollo/client": "3.3.7",
-    "@ikas/react-phone-number-input": "^3.1.25-alpha.2",
-    "archiver": "^5.3.0",
-    "axios": "^0.21.0",
-    "command-line-args": "^5.2.0",
-    "cors": "^2.8.5",
-    "graphql": "^15.3.0",
-    "graphql-tag": "^2.10.3",
-    "html-react-parser": "^1.4.0",
-    "lodash": "^4.17.20",
-    "lzutf8": "^0.6.0",
-    "node-fetch": "^2.6.1",
+    "@stripe/react-stripe-js": "^1.7.2",
+    "@stripe/stripe-js": "^1.29.0",
     "query-string": "^6.13.8",
     "react-tooltip": "^4.2.21",
-    "uuid": "^8.3.2"
+    "libphonenumber-js": "^1.10.6"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^17.1.0",
+    "@ikas/storefront-api": "^4.0.0-alpha.11",
+    "@ikas/storefront-config": "^4.0.0-alpha.11",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.11",
+    "@ikas/storefront-models": "^4.0.0-alpha.11",
+    "@ikas/storefront-providers": "^4.0.0-alpha.11",
+    "@rollup/plugin-commonjs": "^22.0.0",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^11.1.1",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.0.4",
-    "@types/archiver": "^5.1.0",
-    "@types/command-line-args": "^5.2.0",
-    "@types/cors": "^2.8.9",
-    "@types/jest": "^26.0.14",
-    "@types/lodash": "^4.14.168",
-    "@types/node": "^14.14.6",
-    "@types/node-fetch": "^2.5.7",
-    "@types/react": "^16.9.55",
-    "@types/react-dom": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
     "@types/react-phone-number-input": "^3.0.10",
-    "@types/testing-library__jest-dom": "^5.9.3",
-    "@types/testing-library__react": "^10.2.0",
-    "@types/uuid": "^8.3.0",
-    "@typescript-eslint/eslint-plugin": "^4.14.1",
-    "@typescript-eslint/parser": "^4.14.1",
-    "acorn-jsx": "^5.3.1",
-    "eslint": "^7.18.0",
-    "eslint-config-prettier": "^7.2.0",
-    "eslint-plugin-jest": "^24.0.2",
-    "eslint-plugin-prettier": "^3.3.1",
-    "eslint-plugin-react": "^7.21.2",
-    "jest": "^26.4.2",
     "mobx": "^6.1.3",
     "mobx-react-lite": "^3.1.5",
-    "next": "12.0.7",
-    "postcss": "^8.4.4",
+    "next": "canary",
     "prettier": "^2.2.1",
-    "rollup": "^2.38.4",
-    "rollup-plugin-copy-assets": "^2.0.3",
-    "rollup-plugin-executable": "^1.6.3",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "rollup": "^2.75.6",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-preserve-shebang": "^1.0.1",
-    "rollup-plugin-rename-node-modules": "^1.2.0",
     "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript": "^1.0.1",
-    "rollup-plugin-typescript2": "^0.31.1",
+    "rollup-plugin-typescript2": "^0.32.1",
     "sass": "^1.44.0",
-    "rollup-watch": "^4.3.1",
-    "ts-essentials": "^7.0.1",
-    "ts-jest": "^26.4.0",
-    "ts-loader": "^8.0.4",
-    "tslib": "^2.3.1",
     "ttypescript": "^1.5.12",
-    "typescript": "^4.5.4",
+    "typescript": "^4.7.2",
     "typescript-transform-paths": "^2.2.2",
-    "typings": "^2.1.1"
+    "lodash": "^4.17.20",
+    "html-react-parser": "^1.4.0"
   },
-  "eslintConfig": {
-    "parser": "@typescript-eslint/parser",
-    "extends": [
-      "plugin:@typescript-eslint/recommended",
-      "plugin:prettier/recommended"
-    ],
-    "parserOptions": {
-      "ecmaVersion": 2015,
-      "sourceType": "module"
-    },
-    "ignorePatterns": "build",
-    "rules": {
-      "getter-return": "off",
-      "@typescript-eslint/ban-ts-comment": "off",
-      "@typescript-eslint/explicit-module-boundary-types": "off",
-      "@typescript-eslint/no-var-requires": "off",
-      "@typescript-eslint/camelcase": "off",
-      "@typescript-eslint/no-empty-interface": "off",
-      "@typescript-eslint/triple-slash-reference": "off",
-      "@typescript-eslint/interface-name-prefix": "off",
-      "@typescript-eslint/no-use-before-define": "off",
-      "@typescript-eslint/explicit-function-return-type": "off",
-      "@typescript-eslint/no-useless-constructor": "off"
-    }
+  "peerDependencies": {
+    "@ikas/storefront-api": "^4.0.0-alpha.11",
+    "@ikas/storefront-config": "^4.0.0-alpha.11",
+    "@ikas/storefront-model-functions": "^4.0.0-alpha.11",
+    "@ikas/storefront-models": "^4.0.0-alpha.11",
+    "@ikas/storefront-providers": "^4.0.0-alpha.11",
+    "mobx": "^6.1.3",
+    "mobx-react-lite": "^3.1.5",
+    "next": "canary",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "lodash": "^4.17.20",
+    "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);
+    }
+  }
+}