@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/store/customer.ts

@@ -0,0 +1,510 @@
+import { makeAutoObservable } from "mobx";
+
+import { apollo } from "../api/apollo";
+import {
+  IkasCustomer,
+  IkasFavoriteProduct,
+  IkasOrderRefundSettings,
+  IkasOrderTransaction,
+  IkasProduct,
+} from "../models";
+import {
+  IkasContactFormAPI,
+  IkasCustomerAPI,
+  IkasFavoriteProductAPI,
+  IkasProductSearchAPI,
+  IkasRaffleAPI,
+  IkasCustomerReviewAPI,
+} from "../api";
+import { IkasBaseStore } from "./base";
+import { Analytics } from "../analytics";
+import { IkasStorefrontConfig } from "../storefront";
+import { IkasCustomerEmailSubscriptionStatus } from "../models/data/customer";
+import _uniqBy from "lodash/uniqBy";
+
+const isServer = typeof localStorage === "undefined";
+const LS_TOKEN_KEY = "customerToken";
+const LS_TOKEN_EXPIRY = "customerTokenExpiry";
+const LS_CUSTOMER_SUB_KEY = "customerEmailSubscription";
+const LS_LAST_VIEWED_PRODUCTS_KEY = "lastViewedProducts";
+const LS_CUSTOMER_CONSENT = "customerConsent";
+
+export class IkasCustomerStore {
+  customer?: IkasCustomer | null = null;
+  token?: string | null = null;
+  tokenExpiry?: number | null = null;
+  private baseStore?: IkasBaseStore | null = null;
+  private _initialized = false;
+  private _visitorSubscribedEmail = false;
+  private _lastViewedProducts: LastViewedProduct[] = [];
+  private _customerConsentGranted = false;
+  private _refundSettings?: IkasOrderRefundSettings | null = null;
+
+  constructor(baseStore?: IkasBaseStore) {
+    this.baseStore = baseStore;
+    this.init();
+
+    makeAutoObservable(this);
+  }
+
+  get initialized() {
+    return this._initialized;
+  }
+
+  get canCreateEmailSubscription() {
+    if (this.customer?.isSubscribed || isServer || this._visitorSubscribedEmail)
+      return false;
+
+    const alreadySubbed = window.localStorage.getItem(LS_CUSTOMER_SUB_KEY);
+    return !alreadySubbed;
+  }
+
+  get customerConsentGranted() {
+    return this._customerConsentGranted;
+  }
+
+  login = async (email: string, password: string) => {
+    const response = await IkasCustomerAPI.login(email, password);
+
+    if (response) {
+      this.setToken(response.token, response.tokenExpiry);
+      this.setCustomer(response.customer);
+
+      if (this.customer) Analytics.customerLogin();
+
+      // Set cart's customer
+      const cart = this.baseStore?.cartStore.cart;
+      if (cart) {
+        await this.baseStore!.cartStore.changeItemQuantity(
+          cart.items[0],
+          cart.items[0].quantity
+        );
+      }
+
+      this.saveLocalLastViewedProducts();
+
+      return true;
+    }
+
+    return false;
+  };
+
+  register = async (
+    firstName: string,
+    lastName: string,
+    email: string,
+    password: string,
+    isMarketingAccepted?: boolean
+  ) => {
+    const response = await IkasCustomerAPI.register(
+      email,
+      password,
+      firstName,
+      lastName,
+      isMarketingAccepted
+    );
+
+    if (response) {
+      this.setToken(response.token, response.tokenExpiry);
+      this.setCustomer(response.customer);
+      this.saveLocalLastViewedProducts();
+      return true;
+    }
+
+    return false;
+  };
+
+  saveContactForm = async (input: IkasContactForm) => {
+    Analytics.contactForm(input);
+    return await IkasContactFormAPI.sendContactFormToMerchant(input);
+  };
+
+  checkEmail = async (email: string) => {
+    return await IkasCustomerAPI.checkEmail(email);
+  };
+
+  forgotPassword = async (email: string) => {
+    return await IkasCustomerAPI.forgotPassword(email);
+  };
+
+  recoverPassword = async (
+    password: string,
+    passwordAgain: string,
+    token: string
+  ) => {
+    return await IkasCustomerAPI.recoverPassword(
+      password,
+      passwordAgain,
+      token
+    );
+  };
+
+  logout = () => {
+    this.clearLocalData();
+    this.baseStore?.cartStore.removeCart();
+    Analytics.customerLogout();
+  };
+
+  saveCustomer = async (customer: IkasCustomer) => {
+    const savedCustomer = await IkasCustomerAPI.saveCustomer(customer);
+    if (savedCustomer) {
+      this.setCustomer(savedCustomer);
+      return true;
+    }
+    return false;
+  };
+
+  getOrders = async () => {
+    return await IkasCustomerAPI.getOrders();
+  };
+
+  getOrder = async (id: string) => {
+    const orders = await IkasCustomerAPI.getOrders(id);
+
+    if (!Array.isArray(orders) || !orders.length) return null;
+
+    const order = orders[0];
+
+    //@ts-ignore
+    order._refundSettings = this._refundSettings;
+
+    return order;
+  };
+
+  getOrderTransactions = async (
+    params: {
+      checkoutId?: string;
+      id?: string;
+      orderId?: string;
+    } = {}
+  ): Promise<IkasOrderTransaction[]> => {
+    return await IkasCustomerAPI.getOrderTransactions(params);
+  };
+
+  getFavoriteProductsIds = async (): Promise<IkasFavoriteProduct[]> => {
+    try {
+      const favoriteProductsResult = await IkasFavoriteProductAPI.listFavoriteProducts();
+      return favoriteProductsResult;
+    } catch {
+      return [];
+    }
+  };
+
+  getFavoriteProducts = async (): Promise<IkasProduct[]> => {
+    try {
+      const favoriteProductsResult = await IkasFavoriteProductAPI.listFavoriteProducts();
+      if (!favoriteProductsResult.length) return [];
+
+      const productsResult = await IkasProductSearchAPI.searchProducts({
+        productIdList: favoriteProductsResult.map((fP) => fP.productId),
+        priceListId: IkasStorefrontConfig.priceListId,
+        salesChannelId: IkasStorefrontConfig.salesChannelId,
+      });
+      return productsResult?.data || [];
+    } catch {
+      return [];
+    }
+  };
+
+  getOrderRefundSettings = async () => {
+    if (!this._refundSettings)
+      this._refundSettings = await IkasCustomerAPI.getOrderRefundSettings();
+  };
+
+  addItemToFavorite = async (productId: string) => {
+    const customerId = this.customer?.id;
+    if (!customerId) throw Error("Unauthorized");
+
+    try {
+      const result = await IkasFavoriteProductAPI.saveFavoriteProduct(
+        true,
+        productId
+      );
+      Analytics.addToWishlist(productId);
+      return result;
+    } catch {
+      return false;
+    }
+  };
+
+  removeItemFromFavorite = async (productId: string) => {
+    const customerId = this.customer?.id;
+    if (!customerId) throw Error("Unauthorized");
+
+    try {
+      const result = await IkasFavoriteProductAPI.saveFavoriteProduct(
+        false,
+        productId
+      );
+      return result;
+    } catch {
+      return false;
+    }
+  };
+
+  isProductFavorite = async (productId: string) => {
+    const customerId = this.customer?.id;
+    if (!customerId) throw Error("Unauthorized");
+
+    return await IkasFavoriteProductAPI.isFavoriteProduct(productId);
+  };
+
+  createEmailSubscription = async (email: string) => {
+    const isSuccess = await IkasCustomerAPI.createCustomerEmailSubscription(
+      email
+    );
+
+    if (isSuccess) {
+      window.localStorage.setItem(LS_CUSTOMER_SUB_KEY, "true");
+      if (this.customer)
+        this.customer.subscriptionStatus ===
+          IkasCustomerEmailSubscriptionStatus.SUBSCRIBED;
+      else this._visitorSubscribedEmail = true;
+    }
+
+    return isSuccess;
+  };
+
+  sendReview = async (input: IkasCustomerReviewForm) => {
+    try {
+      const { customerReviewSettings, salesChannelId } = IkasStorefrontConfig;
+      if (!customerReviewSettings) return;
+
+      const customerId = this.customer?.id;
+
+      if (!customerId && customerReviewSettings.customerLoginRequired)
+        throw Error("Unauthorized");
+
+      const response = await IkasCustomerReviewAPI.createCustomerReview({
+        ...input,
+        customerId: customerReviewSettings.customerLoginRequired
+          ? customerId
+          : undefined,
+        salesChannelId: salesChannelId || "",
+      });
+
+      return response;
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  onCustomerConsentGrant = () => {
+    this.saveCustomerConsent();
+  };
+
+  waitUntilInitialized = () => {
+    return new Promise((resolve) => {
+      const interval = setInterval(() => {
+        if (this.initialized) {
+          clearInterval(interval);
+          resolve(null);
+        }
+      }, 100);
+    });
+  };
+
+  getRaffles = async () => {
+    return await IkasRaffleAPI.getRafflesByCustomerId();
+  };
+
+  private async init() {
+    this.loadToken();
+    this.loadLastViewedProducts();
+    this.loadCustomerConsent();
+    await this.refreshToken();
+    await this.getCustomer();
+    await this.getOrderRefundSettings();
+    this._initialized = true;
+
+    if (this.customer) Analytics.customerVisit();
+  }
+
+  private routeChangeInit() {
+    if (!this.customer) {
+      this.loadToken();
+      this.getCustomer();
+    }
+  }
+
+  private async getCustomer() {
+    if (isServer || !this.token) return;
+    const customer = await IkasCustomerAPI.getCustomer();
+    if (customer) this.setCustomer(customer);
+  }
+
+  private async refreshToken() {
+    if (!this.token) return;
+    const response = await IkasCustomerAPI.refreshToken(this.token);
+    if (response?.token || response?.tokenExpiry)
+      this.setToken(response.token, response.tokenExpiry);
+    else {
+      this.token = null;
+      this.tokenExpiry = null;
+      this.clearLocalData();
+    }
+  }
+
+  private setCustomer(customer: IkasCustomer) {
+    this.customer = new IkasCustomer(customer);
+  }
+
+  private async getLastViewedProducts() {
+    if (this.customer) {
+      this._lastViewedProducts = await IkasCustomerAPI.getLastViewedProducts(
+        this.customer.id
+      );
+    } else {
+      this.loadLastViewedProducts();
+    }
+
+    return this._lastViewedProducts;
+  }
+
+  private saveLastViewedProducts() {
+    if (isServer) return;
+    window.localStorage.setItem(
+      LS_LAST_VIEWED_PRODUCTS_KEY,
+      JSON.stringify(this._lastViewedProducts)
+    );
+  }
+
+  private loadLastViewedProducts() {
+    if (isServer) return;
+    try {
+      const lvpStr = window.localStorage.getItem(LS_LAST_VIEWED_PRODUCTS_KEY);
+      if (lvpStr) {
+        this._lastViewedProducts = JSON.parse(lvpStr);
+        this._lastViewedProducts = this._lastViewedProducts.reverse();
+        this._lastViewedProducts = _uniqBy(
+          this._lastViewedProducts,
+          "variantId"
+        );
+      }
+    } catch (err) {}
+  }
+
+  private removeLastViewedProducts() {
+    if (isServer) return;
+    window.localStorage.removeItem(LS_LAST_VIEWED_PRODUCTS_KEY);
+  }
+
+  private async onProductView(productId: string, variantId: string) {
+    if (this.customer) {
+      const existingItem = this._lastViewedProducts.find(
+        (lvp) => lvp.productId === productId
+      );
+      if (existingItem) {
+        return;
+      }
+
+      const isSuccess = await IkasCustomerAPI.saveLastViewedProducts({
+        customerId: this.customer.id,
+        products: [
+          {
+            productId,
+            variantId,
+          },
+        ],
+      });
+
+      if (isSuccess) this._lastViewedProducts.push({ productId, variantId });
+    } else {
+      this._lastViewedProducts.push({ productId, variantId });
+      this._lastViewedProducts = this._lastViewedProducts.slice(0, 20);
+      this._lastViewedProducts = _uniqBy(this._lastViewedProducts, "variantId");
+      this.saveLastViewedProducts();
+    }
+  }
+
+  private async saveLocalLastViewedProducts() {
+    if (isServer) return;
+    try {
+      this.loadLastViewedProducts();
+      if (this._lastViewedProducts.length) {
+        const isSuccess = await IkasCustomerAPI.saveLastViewedProducts({
+          customerId: this.customer!.id,
+          products: this._lastViewedProducts,
+        });
+
+        if (isSuccess) {
+          this.removeLastViewedProducts();
+        }
+      }
+    } catch (err) {}
+  }
+
+  private saveCustomerConsent() {
+    if (isServer) return;
+    this._customerConsentGranted = true;
+    window.localStorage.setItem(LS_CUSTOMER_CONSENT, "true");
+  }
+
+  private loadCustomerConsent() {
+    if (isServer) return;
+    this._customerConsentGranted = !!window.localStorage.getItem(
+      LS_CUSTOMER_CONSENT
+    );
+  }
+
+  private removeCustomerConsent() {
+    if (isServer) return;
+    window.localStorage.removeItem(LS_CUSTOMER_CONSENT);
+  }
+
+  private setToken(token: string, tokenExpiry: number) {
+    if (isServer) return;
+
+    this.token = token;
+    this.tokenExpiry = tokenExpiry;
+
+    localStorage.setItem(LS_TOKEN_KEY, token);
+    localStorage.setItem(LS_TOKEN_EXPIRY, tokenExpiry + "");
+
+    apollo.setCustomerToken(token);
+  }
+
+  private loadToken() {
+    if (isServer) return;
+
+    const token = localStorage.getItem(LS_TOKEN_KEY);
+    const tokenExpiry = localStorage.getItem(LS_TOKEN_EXPIRY);
+
+    if (token && tokenExpiry) {
+      this.setToken(token, parseInt(tokenExpiry));
+    }
+  }
+
+  private clearLocalTokenData() {
+    localStorage.removeItem(LS_TOKEN_KEY);
+    localStorage.removeItem(LS_TOKEN_EXPIRY);
+    this.token = undefined;
+    this.tokenExpiry = undefined;
+  }
+
+  private clearLocalData() {
+    this.clearLocalTokenData();
+
+    this.customer = undefined;
+    apollo.setCustomerToken();
+  }
+}
+
+export type IkasContactForm = {
+  firstName: string;
+  lastName: string;
+  email: string;
+  message: string;
+};
+
+type LastViewedProduct = {
+  productId: string;
+  variantId: string;
+};
+
+export type IkasCustomerReviewForm = {
+  comment?: string;
+  productId: string;
+  star: number;
+  title?: string;
+};

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

@@ -1 +1 @@
-export { IkasBaseStore } from "./base";
+export { IkasBaseStore } from "./base";

package/src/storefront/index.ts

@@ -0,0 +1,96 @@
+import { IkasProductBackInStockSettings } from "../models/data/product-back-in-stock-settings";
+import { IkasSalesChannelPaymentGateway } from "../models/data/sales-channel";
+import { IkasStorefrontRouting } from "../models/data/storefront/routing";
+import { IkasThemeStockPreference } from "../models/theme/settings";
+import { IkasThemeFavicon } from "../models/theme/settings/prop/favicon";
+import { IkasBaseStore } from "../store";
+import { IkasCustomerReviewSettings } from "../models";
+
+export class IkasStorefrontConfig {
+  static store: IkasBaseStore;
+  static config: Record<string, any> = {};
+  static apiUrlOverride: string | null = null;
+
+  static domain: string;
+  static storefrontId?: string;
+  static storefrontRoutingId?: string;
+  static storefrontThemeId?: string;
+  static salesChannelId?: string;
+  static priceListId?: string;
+  static stockLocationIds?: string[];
+  static routings: IkasStorefrontRouting[] = [];
+  static paymentGateways: IkasSalesChannelPaymentGateway[] = [];
+  static gtmId?: string;
+  static fbpId?: string;
+  static favicon: IkasThemeFavicon;
+  static stockPreference: IkasThemeStockPreference;
+  static translations: Record<string, any> = {};
+  static storefrontJSScripts: string[] = [];
+  static isEditor = false;
+  static customerReviewSettings: IkasCustomerReviewSettings | null;
+  static productBackInStockSettings: IkasProductBackInStockSettings | null;
+
+  static currentPageComponents?: Record<string, any>;
+
+  static init(
+    store: IkasBaseStore,
+    config: Record<string, any>,
+    apiUrlOverride?: string
+  ) {
+    IkasStorefrontConfig.store = store;
+    IkasStorefrontConfig.config = config;
+    IkasStorefrontConfig.apiUrlOverride = apiUrlOverride || null;
+
+    if (process.env.NEXT_PUBLIC_ENV === "local") {
+      this.storefrontId = config.storefrontId;
+    }
+  }
+
+  static initWithJson(json: Record<string, any>) {
+    try {
+      Object.entries(json).forEach(([key, value]) => {
+        //@ts-ignore
+        IkasStorefrontConfig[key] = value;
+      });
+    } catch (err) {
+      console.log(err);
+    }
+  }
+
+  static getCurrentLocale() {
+    return (
+      IkasStorefrontConfig.routings.find(
+        (r) => r.id === IkasStorefrontConfig.storefrontRoutingId
+      )?.locale || "en"
+    );
+  }
+
+  static getJson() {
+    return {
+      domain: IkasStorefrontConfig.domain,
+      storefrontId: IkasStorefrontConfig.storefrontId || null,
+      storefrontRoutingId: IkasStorefrontConfig.storefrontRoutingId || null,
+      storefrontThemeId: IkasStorefrontConfig.storefrontThemeId || null,
+      salesChannelId: IkasStorefrontConfig.salesChannelId || null,
+      priceListId: IkasStorefrontConfig.priceListId || null,
+      stockLocationIds: IkasStorefrontConfig.stockLocationIds || null,
+      routings:
+        JSON.parse(JSON.stringify(IkasStorefrontConfig.routings)) || null,
+      paymentGateways:
+        JSON.parse(JSON.stringify(IkasStorefrontConfig.paymentGateways)) ||
+        null,
+      gtmId: IkasStorefrontConfig.gtmId || null,
+      fbpId: IkasStorefrontConfig.fbpId || null,
+      favicon: JSON.parse(JSON.stringify(IkasStorefrontConfig.favicon)),
+      stockPreference: IkasStorefrontConfig.stockPreference || null,
+      storefrontJSScripts: IkasStorefrontConfig.storefrontJSScripts || [],
+      translations: this.translations,
+      customerReviewSettings: IkasStorefrontConfig.customerReviewSettings,
+      productBackInStockSettings: IkasStorefrontConfig.productBackInStockSettings
+        ? JSON.parse(
+            JSON.stringify(IkasStorefrontConfig.productBackInStockSettings)
+          )
+        : null,
+    };
+  }
+}

package/src/typings/global.d.ts

@@ -0,0 +1,7 @@
+declare module "*.scss" {
+  interface IClassNames {
+    [className: string]: string;
+  }
+  const classNames: IClassNames;
+  export = classNames;
+}