@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/analytics/ikas.ts

@@ -0,0 +1,545 @@
+import { CheckoutStep } from "../components/checkout/model";
+import {
+  IkasBrand,
+  IkasCategory,
+  IkasCheckout,
+  IkasOrderLineItem,
+  IkasProductDetail,
+  IkasThemePageType,
+} from "../models";
+import { IkasCart } from "../models/data/cart";
+import { IkasStorefrontConfig } from "../storefront";
+import { v4 as uuidv4 } from "uuid";
+
+enum StorefrontEventType {
+  SESSION_START = 1,
+  PAGE_VIEW = 2,
+  PRODUCT_VIEW = 3,
+  ADD_TO_CART = 4,
+  VIEW_CART = 5,
+  ORDER_SUCCESS = 6,
+  BEGIN_CHECKOUT = 7,
+  CHECKOUT_STEP = 8,
+  CUSTOMER_REGISTER = 9,
+  CUSTOMER_VISIT = 10,
+  CUSTOMER_LOGIN = 11,
+  BRAND_VIEW = 12,
+  CATEGORY_VIEW = 13,
+}
+
+interface CloudFrontEvent {
+  sid: string; // sessionId
+  vid: string; // visitorId
+  sfid: string; // storefrontId
+  scid: string; // salesChannelId
+  cid?: string; // customerId
+  e: Event[]; // events
+}
+
+enum StorefrontEventPageType {
+  INDEX = 1,
+  CATEGORY = 2,
+  BRAND = 3,
+  PRODUCT = 4,
+  CUSTOM = 5,
+  ACCOUNT = 6,
+  ADDRESSES = 7,
+  ORDERS = 8,
+  ORDER_DETAIL = 9,
+  LOGIN = 10,
+  REGISTER = 11,
+  FORGOT_PASSWORD = 12,
+  RECOVER_PASSWORD = 13,
+  CART = 14,
+  FAVORITE_PRODUCTS = 15,
+  SEARCH = 16,
+  NOT_FOUND = 17,
+  BLOG = 18,
+  BLOG_INDEX = 19,
+  BLOG_CATEGORY = 20,
+  CHECKOUT = 21,
+}
+
+interface Event {
+  t: StorefrontEventType; // type
+  d: EventPayload; // data
+  ts: number; // timestamp
+}
+
+interface EventPayload {
+  u: string; // url
+  r?: string; // referer
+  utm?: UTMData;
+  pt?: StorefrontEventPageType; // pageType
+  d?: EventPayloadDetail; // detail
+  m?: Record<string, string>; // metadata
+}
+
+interface UTMData {
+  ca?: string; // campaign
+  c?: string; // content
+  m?: string; // medium
+  s?: string; // source
+  t?: string; // term
+}
+
+interface EventPayloadDetail {
+  br?: BrandDetail; // brand
+  ctg?: CategoryDetail; // category
+  pr?: ProductDetail; // product
+  crt?: CartDetail; // cart
+  crtItm?: CartItemDetail; // cartItem
+  chk?: CheckoutDetail; // checkout
+  cst?: CustomerDetail; // customer
+}
+
+interface BrandDetail {
+  id: string;
+}
+
+interface CategoryDetail {
+  id: string;
+}
+
+interface ProductDetail {
+  id: string;
+  vid: string; // variantId
+}
+
+interface CartDetail {
+  id: string;
+  c: number; // count
+}
+
+interface CartItemDetail {
+  id: string;
+  c: number; // count
+}
+
+interface CheckoutDetail {
+  id: string;
+  s?: string; // step
+}
+
+interface CustomerDetail {
+  id?: string;
+  e?: string; // email
+  c?: boolean; // consent
+}
+
+type IdWithExpiry = {
+  id: string;
+  expiry: number;
+};
+
+const ANALYTICS_URL = process.env.NEXT_PUBLIC_ANALYTICS_URL
+  ? `${process.env.NEXT_PUBLIC_ANALYTICS_URL}/sendEvent`
+  : "https://0.myikas.com/sendEvent";
+
+export default class IkasAnalytics {
+  static SESSION_ID_KEY = "ikas_session_id";
+  static VISITOR_ID_KEY = "ikas_visitor_id";
+  static EXPIRY_LENGTH = 1000 * 60 * 30; // ms - 30mins
+
+  static sessionId?: string | null;
+  static visitorId?: string | null;
+
+  static createSessionId() {
+    try {
+      const idWithExpiry: IdWithExpiry = {
+        id: uuidv4(),
+        expiry: Date.now() + this.EXPIRY_LENGTH,
+      };
+
+      localStorage.setItem(this.SESSION_ID_KEY, JSON.stringify(idWithExpiry));
+      this.sessionId = idWithExpiry.id;
+
+      this.sessionStart();
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static checkSessionId() {
+    try {
+      const existingSessionIdData = localStorage.getItem(this.SESSION_ID_KEY);
+
+      if (existingSessionIdData) {
+        const idWithExpiry = JSON.parse(existingSessionIdData) as IdWithExpiry;
+
+        if (idWithExpiry.expiry < Date.now()) {
+          this.createSessionId();
+        } else {
+          // Extend the duration of the sessionId
+          idWithExpiry.expiry = Date.now() + this.EXPIRY_LENGTH;
+          localStorage.setItem(
+            this.SESSION_ID_KEY,
+            JSON.stringify(idWithExpiry)
+          );
+          this.sessionId = idWithExpiry.id;
+        }
+      } else {
+        this.createSessionId();
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static checkVisitorId() {
+    try {
+      const existingVisitorId = localStorage.getItem(this.VISITOR_ID_KEY);
+
+      if (existingVisitorId) {
+        this.visitorId = existingVisitorId;
+      } else {
+        this.visitorId = uuidv4();
+        localStorage.setItem(this.VISITOR_ID_KEY, this.visitorId);
+      }
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  static getPageType(
+    pageType: IkasThemePageType
+  ): StorefrontEventPageType | undefined {
+    switch (pageType) {
+      case IkasThemePageType.INDEX:
+        return StorefrontEventPageType.INDEX;
+
+      case IkasThemePageType.CATEGORY:
+        return StorefrontEventPageType.CATEGORY;
+
+      case IkasThemePageType.BRAND:
+        return StorefrontEventPageType.BRAND;
+
+      case IkasThemePageType.PRODUCT:
+        return StorefrontEventPageType.PRODUCT;
+
+      case IkasThemePageType.CUSTOM:
+        return StorefrontEventPageType.CUSTOM;
+
+      case IkasThemePageType.ACCOUNT:
+        return StorefrontEventPageType.ACCOUNT;
+
+      case IkasThemePageType.ADDRESSES:
+        return StorefrontEventPageType.ADDRESSES;
+
+      case IkasThemePageType.ORDERS:
+        return StorefrontEventPageType.ORDERS;
+
+      case IkasThemePageType.ORDER_DETAIL:
+        return StorefrontEventPageType.ORDER_DETAIL;
+
+      case IkasThemePageType.LOGIN:
+        return StorefrontEventPageType.LOGIN;
+
+      case IkasThemePageType.REGISTER:
+        return StorefrontEventPageType.REGISTER;
+
+      case IkasThemePageType.FORGOT_PASSWORD:
+        return StorefrontEventPageType.FORGOT_PASSWORD;
+
+      case IkasThemePageType.RECOVER_PASSWORD:
+        return StorefrontEventPageType.RECOVER_PASSWORD;
+
+      case IkasThemePageType.CART:
+        return StorefrontEventPageType.CART;
+
+      case IkasThemePageType.FAVORITE_PRODUCTS:
+        return StorefrontEventPageType.FAVORITE_PRODUCTS;
+
+      case IkasThemePageType.SEARCH:
+        return StorefrontEventPageType.SEARCH;
+
+      case IkasThemePageType.NOT_FOUND:
+        return StorefrontEventPageType.NOT_FOUND;
+
+      case IkasThemePageType.BLOG:
+        return StorefrontEventPageType.BLOG;
+
+      case IkasThemePageType.BLOG_INDEX:
+        return StorefrontEventPageType.BLOG_INDEX;
+
+      case IkasThemePageType.BLOG_CATEGORY:
+        return StorefrontEventPageType.BLOG_CATEGORY;
+
+      case IkasThemePageType.CHECKOUT:
+        return StorefrontEventPageType.CHECKOUT;
+
+      default:
+        break;
+    }
+  }
+
+  static getCustomerData() {
+    const customer = IkasStorefrontConfig.store.customerStore.customer;
+
+    return {
+      id: customer?.id,
+      e: customer?.email,
+      c: IkasStorefrontConfig.store.customerStore.customerConsentGranted,
+    };
+  }
+
+  static getCommonEventData() {
+    return {
+      u: window.location.href,
+      r: document.referrer,
+      pt: IkasStorefrontConfig.store.currentPageType
+        ? this.getPageType(IkasStorefrontConfig.store.currentPageType)
+        : undefined,
+    };
+  }
+
+  static async sendEvents(events: Event[]) {
+    try {
+      this.checkSessionId();
+      this.checkVisitorId();
+
+      const cloudFrontEvent: CloudFrontEvent = {
+        e: events,
+        scid: IkasStorefrontConfig.salesChannelId!,
+        sfid: IkasStorefrontConfig.storefrontId!,
+        sid: this.sessionId!,
+        vid: this.visitorId!,
+        cid: IkasStorefrontConfig.store.customerStore.customer?.id,
+      };
+
+      await fetch(ANALYTICS_URL, {
+        method: "POST",
+        body: JSON.stringify(cloudFrontEvent),
+        headers: {
+          "Content-Type": "application/json",
+          "x-api-key": IkasStorefrontConfig.config.apiKey,
+        },
+      });
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  // EVENTS
+
+  static async sessionStart() {
+    const event: Event = {
+      t: StorefrontEventType.SESSION_START,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async pageView(pageType: IkasThemePageType) {
+    const event: Event = {
+      t: StorefrontEventType.PAGE_VIEW,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        pt: this.getPageType(pageType),
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async productView(productDetail: IkasProductDetail) {
+    const event: Event = {
+      t: StorefrontEventType.PRODUCT_VIEW,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          pr: {
+            id: productDetail.product.id,
+            vid: productDetail.selectedVariant.id,
+          },
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async addToCart(
+    item: IkasOrderLineItem,
+    quantity: number,
+    cart: IkasCart
+  ) {
+    const event: Event = {
+      t: StorefrontEventType.ADD_TO_CART,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          crt: {
+            id: cart.id,
+            c: cart.itemCount,
+          },
+          crtItm: {
+            id: item.id,
+            c: quantity,
+          },
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async viewCart(cart: IkasCart) {
+    const event: Event = {
+      t: StorefrontEventType.VIEW_CART,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          crt: {
+            id: cart.id,
+            c: cart.itemCount,
+          },
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async orderSuccess(checkout: IkasCheckout) {
+    const event: Event = {
+      t: StorefrontEventType.ORDER_SUCCESS,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          chk: {
+            id: checkout.id!,
+            s: "success",
+          },
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async beginCheckout(checkout: IkasCheckout) {
+    const event: Event = {
+      t: StorefrontEventType.BEGIN_CHECKOUT,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          chk: {
+            id: checkout.id!,
+          },
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async checkoutStep(checkout: IkasCheckout, step: CheckoutStep) {
+    const event: Event = {
+      t: StorefrontEventType.CHECKOUT_STEP,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          chk: {
+            id: checkout.id!,
+            s: step,
+          },
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async customerRegister() {
+    const event: Event = {
+      t: StorefrontEventType.CUSTOMER_REGISTER,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          cst: this.getCustomerData(),
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async customerLogin() {
+    const event: Event = {
+      t: StorefrontEventType.CUSTOMER_LOGIN,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          cst: this.getCustomerData(),
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async customerVisit() {
+    const event: Event = {
+      t: StorefrontEventType.CUSTOMER_VISIT,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          cst: this.getCustomerData(),
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async viewBrand(brand: IkasBrand) {
+    const event: Event = {
+      t: StorefrontEventType.BRAND_VIEW,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          cst: this.getCustomerData(),
+          br: {
+            id: brand.id,
+          },
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+
+  static async viewCategory(category: IkasCategory) {
+    const event: Event = {
+      t: StorefrontEventType.CATEGORY_VIEW,
+      ts: Date.now(),
+      d: {
+        ...this.getCommonEventData(),
+        d: {
+          cst: this.getCustomerData(),
+          ctg: {
+            id: category.id,
+          },
+        },
+      },
+    };
+
+    await this.sendEvents([event]);
+  }
+}

package/{build/analytics/index.d.ts → src/analytics/index.ts}

@@ -1,2 +1,2 @@
-export { Analytics } from "./analytics";
-export * from "./head/index";
+export { Analytics } from "./analytics";
+export * from "./head";

package/src/api/apollo.ts

@@ -0,0 +1,91 @@
+import {
+  InMemoryCache,
+  ApolloClient,
+  createHttpLink,
+  NormalizedCacheObject,
+} from "@apollo/client";
+import { onError } from "@apollo/client/link/error";
+import { setContext } from "@apollo/client/link/context";
+import { IkasStorefrontConfig } from "../storefront";
+
+class Apollo {
+  private _client?: ApolloClient<NormalizedCacheObject>;
+  static customerToken?: string;
+
+  createApolloClient = (apiKey?: string) => {
+    const errorLink = onError(({ graphQLErrors, networkError, operation }) => {
+      if (graphQLErrors) console.log(graphQLErrors);
+
+      const isUnauthorized = graphQLErrors?.some(
+        (ge) => ge.extensions?.code === "UNAUTHORIZED"
+      );
+
+      if (
+        isUnauthorized &&
+        typeof window !== "undefined" &&
+        operation.operationName !== "refreshToken"
+      ) {
+        window.location.href =
+          "/account/login?redirect=" +
+          encodeURIComponent(window.location.pathname);
+      }
+    });
+
+    const authLink = setContext((_request, { headers }) => {
+      const newHeaders = {
+        ...headers,
+        "x-api-key": apiKey || IkasStorefrontConfig.config.apiKey,
+        "x-sfid": IkasStorefrontConfig.storefrontId,
+        "x-sfrid": IkasStorefrontConfig.storefrontRoutingId,
+      };
+
+      if (Apollo.customerToken) {
+        newHeaders.Authorization = "Bearer " + Apollo.customerToken;
+      }
+
+      return {
+        headers: newHeaders,
+      };
+    });
+
+    const customFetch = (uri: string, options: any) => {
+      const { operationName } = JSON.parse(options.body);
+      return fetch(`${uri}?op=${operationName}`, options);
+    };
+
+    const httpLink = createHttpLink({
+      uri:
+        IkasStorefrontConfig.apiUrlOverride || process.env.NEXT_PUBLIC_GQL_URL,
+      fetch: customFetch,
+    });
+
+    this._client = new ApolloClient({
+      link: authLink.concat(errorLink).concat(httpLink),
+      cache: new InMemoryCache({
+        addTypename: false,
+      }),
+      defaultOptions: {
+        watchQuery: {
+          fetchPolicy: "no-cache",
+          errorPolicy: "ignore",
+        },
+        query: {
+          fetchPolicy: "no-cache",
+          errorPolicy: "all",
+        },
+      },
+    });
+  };
+
+  setCustomerToken = (customerToken?: string) => {
+    Apollo.customerToken = customerToken;
+    if (this._client) this.createApolloClient();
+  };
+
+  getClient = () => {
+    if (!this._client) this.createApolloClient();
+    return this._client!;
+  };
+}
+
+export const apollo = new Apollo();

package/src/api/back-in-stock-reminder/__generated__/listProductBackInStockRemind.ts

@@ -0,0 +1,36 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { StringFilterInput, DateFilterInput } from "./../../../__generated__/global-types";
+
+// ====================================================
+// GraphQL query operation: listProductBackInStockRemind
+// ====================================================
+
+export interface listProductBackInStockRemind_listProductBackInStockRemind {
+  __typename: "ProductBackInStockRemind";
+  createdAt: any | null;
+  customerId: string;
+  deleted: boolean | null;
+  email: string;
+  id: string;
+  productId: string;
+  storefrontId: string;
+  updatedAt: any | null;
+  variantId: string;
+}
+
+export interface listProductBackInStockRemind {
+  listProductBackInStockRemind: listProductBackInStockRemind_listProductBackInStockRemind[];
+}
+
+export interface listProductBackInStockRemindVariables {
+  id?: StringFilterInput | null;
+  updatedAt?: DateFilterInput | null;
+  includeDeleted?: boolean | null;
+  email?: StringFilterInput | null;
+  productId?: StringFilterInput | null;
+  variantId?: StringFilterInput | null;
+}

package/src/api/back-in-stock-reminder/__generated__/saveProductBackInStockRemind.ts

@@ -0,0 +1,31 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { ProductBackInStockRemindInput } from "./../../../__generated__/global-types";
+
+// ====================================================
+// GraphQL mutation operation: saveProductBackInStockRemind
+// ====================================================
+
+export interface saveProductBackInStockRemind_saveProductBackInStockRemind {
+  __typename: "ProductBackInStockRemind";
+  createdAt: any | null;
+  customerId: string;
+  deleted: boolean | null;
+  email: string;
+  id: string;
+  productId: string;
+  storefrontId: string;
+  updatedAt: any | null;
+  variantId: string;
+}
+
+export interface saveProductBackInStockRemind {
+  saveProductBackInStockRemind: saveProductBackInStockRemind_saveProductBackInStockRemind;
+}
+
+export interface saveProductBackInStockRemindVariables {
+  input: ProductBackInStockRemindInput;
+}