@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/scripts/generators/store/content.ts

@@ -0,0 +1,14 @@
+export const STORE_CONTENT = `import { IkasBaseStore } from "@ikas/storefront";
+
+export default class Store extends IkasBaseStore {
+  // Add your own stores here if needed
+  // ex: yourStore: YourStore;
+
+  constructor() {
+    super();
+
+    // Init your own stores here
+    // ex: this.yourStore = new YourStore();
+  }
+}
+`;

package/src/scripts/generators/store/index.ts

@@ -0,0 +1,22 @@
+import path from "path";
+import fs from "fs-extra";
+import { createFile } from "../../../utils/fs";
+import { STORE_CONTENT } from "./content";
+
+export default class StoreGenerator {
+  static generate() {
+    const fileExists = fs.existsSync(
+      path.join(process.cwd(), "src", "store", "index.ts")
+    );
+
+    if (!fileExists) {
+      return createFile(
+        path.join(process.cwd(), "src", "store"),
+        "index.ts",
+        STORE_CONTENT
+      );
+    }
+
+    return true;
+  }
+}

package/src/scripts/generators/theme/index.ts

@@ -0,0 +1,37 @@
+import fs from "fs-extra";
+import path from "path";
+import { createFile } from "../../../utils/fs";
+import { IkasTheme } from "../../../models/theme/theme";
+import { IkasThemePage, IkasThemePageType } from "../../../models/theme/page";
+
+export default class ThemeJsonGenerator {
+  static generate(themeJson: IkasTheme) {
+    return createFile(
+      path.join(process.cwd(), "src", "theme.json"),
+      "",
+      JSON.stringify(themeJson, null, 2)
+    );
+  }
+
+  static generateInitialThemeJsonFile() {
+    const themeJson = new IkasTheme();
+
+    themeJson.pages.push(
+      new IkasThemePage({
+        type: IkasThemePageType.INDEX,
+      })
+    );
+
+    return ThemeJsonGenerator.generate(themeJson);
+  }
+
+  static getTheme() {
+    try {
+      const themePath = path.join(process.cwd(), "src", "theme.json");
+      const fileBuffer = fs.readFileSync(themePath);
+      return fileBuffer.length ? JSON.parse(fileBuffer.toString()) : null;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+}

package/src/scripts/ikas.ts

@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+
+import commandLineArgs from "command-line-args";
+import APIGenerator from "./generators/api";
+import ConfigGenerator, { ENV } from "./generators/config";
+import ThemeJsonGenerator from "./generators/theme";
+import ComponentImportsGenerator from "./generators/components";
+import PageGenerator from "./generators/pages";
+import StoreGenerator from "./generators/store";
+
+function run() {
+  const optionDefinitions = [
+    { name: "generate", alias: "g", type: Boolean },
+    { name: "dev", alias: "d", type: Boolean },
+  ];
+
+  const options = commandLineArgs(optionDefinitions);
+
+  if (options.generate) {
+    const isDev = !!options.dev;
+    const isSuccess = generate(isDev ? "dev" : "prod");
+
+    if (isSuccess) {
+      console.log("Project files generated successfully!");
+    } else {
+      console.log("Project files generate failed!");
+    }
+  }
+}
+
+function generate(env: ENV) {
+  let themeJson = ThemeJsonGenerator.getTheme();
+
+  if (!themeJson) ThemeJsonGenerator.generateInitialThemeJsonFile();
+  themeJson = ThemeJsonGenerator.getTheme();
+
+  return (
+    ThemeJsonGenerator.generate(themeJson) &&
+    ComponentImportsGenerator.generate(themeJson) &&
+    PageGenerator.generate(themeJson) &&
+    APIGenerator.generate() &&
+    StoreGenerator.generate() &&
+    ConfigGenerator.generate(env)
+  );
+}
+
+run();

package/src/store/base.ts

@@ -0,0 +1,143 @@
+import { configure, makeObservable, observable } from "mobx";
+import { v4 as uuidv4 } from "uuid";
+import _sortBy from "lodash/sortBy";
+import _flatten from "lodash/flatten";
+
+import { IkasCartStore } from "./cart";
+import { IkasCustomerStore } from "./customer";
+import { IkasThemePageType, IkasThemeSettings } from "../models";
+import { IkasCountryAPI } from "../api";
+import { IkasStorefrontConfig } from "../storefront";
+import { IkasStorefrontRouting } from "../models/data/storefront/routing";
+
+configure({
+  enforceActions: "never",
+});
+
+export class IkasBaseStore {
+  readonly customerStore: IkasCustomerStore;
+  readonly cartStore: IkasCartStore;
+
+  currentPageType?: IkasThemePageType | null = null;
+  localeOptions: IkasLocaleOption[] = [];
+  showLocaleOptions = false;
+  currentCountryCode?: string | null = null;
+  private localeChecked = false;
+  private settingsSet = false;
+
+  constructor() {
+    this.customerStore = new IkasCustomerStore(this);
+    this.cartStore = new IkasCartStore(this);
+
+    makeObservable(this, {
+      currentPageType: observable,
+      localeOptions: observable,
+      showLocaleOptions: observable,
+      currentCountryCode: observable,
+    });
+  }
+
+  async checkLocalization() {
+    if (this.localeChecked) return;
+    if (typeof window === undefined) {
+      console.warn("checkLocalization should be called on the client side!");
+      return;
+    }
+
+    const myCountryCode = await IkasCountryAPI.getMyCountry();
+    const currentRouting = IkasStorefrontConfig.routings.find(
+      (r) => r.id === IkasStorefrontConfig.storefrontRoutingId
+    );
+    this.currentCountryCode = myCountryCode;
+
+    if (currentRouting && myCountryCode) {
+      let isCorrectLocale = true;
+
+      const myCountryRouting = IkasStorefrontConfig.routings.find((r) =>
+        r.countryCodes?.includes(myCountryCode)
+      );
+      const otherCountriesRouting = IkasStorefrontConfig.routings.find(
+        (r) => !r.countryCodes?.length
+      );
+
+      // Current country has spefic routing
+      if (myCountryRouting) {
+        if (currentRouting.id !== myCountryRouting.id) {
+          isCorrectLocale = false;
+        }
+      }
+      // Current country does not have specific routing
+      else {
+        if (
+          otherCountriesRouting &&
+          currentRouting.id !== otherCountriesRouting.id
+        ) {
+          isCorrectLocale = false;
+        }
+      }
+
+      const iso2Codes = _flatten(
+        IkasStorefrontConfig.routings.map((r) => r.countryCodes || [])
+      );
+      const countries = await IkasCountryAPI.listCountries(iso2Codes);
+      const localeOptions: IkasLocaleOption[] = [];
+
+      IkasStorefrontConfig.routings.map((r) => {
+        if (r.countryCodes?.length) {
+          r.countryCodes.forEach((countryCode) => {
+            const country = countries.find((c) => c.iso2 === countryCode);
+            localeOptions.push({
+              id: uuidv4(),
+              countryName: country?.native || country?.name || "",
+              routing: r,
+              isRecommended: r.countryCodes?.includes(myCountryCode) || false,
+            });
+          });
+        } else {
+          localeOptions.push({
+            id: uuidv4(),
+            routing: r,
+            isRecommended: !IkasStorefrontConfig.routings.some((r) =>
+              r.countryCodes?.includes(myCountryCode)
+            ),
+          });
+        }
+      });
+
+      this.localeOptions = _sortBy(localeOptions, "countryName");
+
+      if (!isCorrectLocale) {
+        this.showLocaleOptions = true;
+      }
+
+      this.localeChecked = true;
+    }
+  }
+
+  setLocalization(localeOption: IkasLocaleOption) {
+    if (localeOption.routing.domain) {
+      window.location.replace("https://" + localeOption.routing.domain);
+    } else {
+      window.location.replace(
+        window.location.origin +
+          (localeOption.routing.path ? "/" + localeOption.routing.path : "")
+      );
+    }
+  }
+
+  private setSettings(settingsStr: string) {
+    if (this.settingsSet) return;
+
+    const settings = new IkasThemeSettings(JSON.parse(settingsStr));
+    settings.colors.map((sc) =>
+      document.documentElement.style.setProperty(sc.key, sc.color)
+    );
+  }
+}
+
+type IkasLocaleOption = {
+  readonly id: string;
+  readonly countryName?: string;
+  readonly routing: IkasStorefrontRouting;
+  readonly isRecommended: boolean;
+};

package/src/store/cart.ts

@@ -0,0 +1,311 @@
+import { IkasCart, IkasSaveItemToCartInput } from "../models/data/cart";
+import { IkasCartAPI, IkasCheckoutAPI } from "../api";
+import { makeAutoObservable } from "mobx";
+import { IkasProductVariant, IkasOrderLineItem, IkasProduct } from "../models";
+import { IkasBaseStore } from "./base";
+import { Analytics } from "../analytics";
+import { IkasStorefrontConfig } from "../storefront";
+import { IkasProductCartLineOption } from "../models/data/product-cart-item-options";
+
+export const CART_LS_KEY = "cartId";
+export const CHECKOUT_LS_KEY = "checkoutId";
+
+export class IkasCartStore {
+  cart?: IkasCart | null = null;
+  private baseStore: IkasBaseStore;
+  private _checkoutId?: string | null = null;
+  private _isLoadingCart = false;
+  private _cartLoadFinished = false;
+
+  constructor(baseStore: IkasBaseStore) {
+    this.baseStore = baseStore;
+
+    makeAutoObservable(this);
+  }
+
+  get isBrowser() {
+    return typeof localStorage !== "undefined";
+  }
+
+  get isLoadingCart() {
+    return this._isLoadingCart;
+  }
+
+  get cartLoadFinished() {
+    return this._cartLoadFinished;
+  }
+
+  get checkoutId() {
+    return this._checkoutId;
+  }
+
+  get checkoutUrl() {
+    if (this._checkoutId) return `/checkout?id=${this._checkoutId}&step=info`;
+  }
+
+  private getCart = async () => {
+    if (!this.isBrowser) return;
+    try {
+      this._isLoadingCart = true;
+
+      const customerId = this.baseStore.customerStore.customer?.id;
+      const cartId = this.cart?.id || localStorage.getItem(CART_LS_KEY);
+      if (!cartId && !customerId) return;
+
+      const cart = await IkasCartAPI.getCart(cartId || undefined);
+      if (cart) await this.setCart(cart);
+      else this.removeCart();
+    } catch (err) {
+      console.log(err);
+    } finally {
+      this._isLoadingCart = false;
+      this._cartLoadFinished = true;
+    }
+  };
+
+  private setCart = async (cart: IkasCart) => {
+    localStorage.setItem(CART_LS_KEY, cart.id);
+    this.cart = cart;
+
+    if (!this._checkoutId)
+      this._checkoutId = localStorage.getItem(CHECKOUT_LS_KEY) || undefined;
+
+    if (!this._checkoutId) {
+      const checkoutId = await IkasCheckoutAPI.getCheckoutId(cart.id);
+      this._checkoutId = checkoutId;
+      if (checkoutId) localStorage.setItem(CHECKOUT_LS_KEY, checkoutId);
+    }
+  };
+
+  private beforeCartOperationCheck = async () => {
+    const cartId = localStorage.getItem(CART_LS_KEY);
+
+    if (this.cart && !cartId) {
+      this.removeCart();
+    } else if (!this.cart && !!cartId) {
+      await this.getCart();
+    }
+  };
+
+  private findExistingItem = (
+    variant: IkasProductVariant,
+    product: IkasProduct
+  ) => {
+    if (!product.productOptionSetId) {
+      return this.cart?.items.find((item) => item.variant.id === variant.id);
+    }
+
+    const optionValues = this.getOptionValues(product);
+    const existingItems =
+      this.cart?.items.filter(
+        (item) =>
+          item.variant.id === variant.id &&
+          item.options?.length === optionValues.length
+      ) || [];
+
+    for (const item of existingItems) {
+      if (item.options) {
+        let hasSameOptionValues = true;
+
+        for (const option of item.options) {
+          const existingOptionValues = option.values.map((v) => v.value);
+          const productOptionValues = product.productOptionSet?.options?.find(
+            (o) => o.id === option.productOptionId
+          )?.values;
+
+          hasSameOptionValues =
+            hasSameOptionValues &&
+            existingOptionValues.length === productOptionValues?.length &&
+            existingOptionValues.every((val) =>
+              productOptionValues?.includes(val)
+            );
+
+          if (!hasSameOptionValues) break;
+        }
+
+        if (hasSameOptionValues) return item;
+      }
+    }
+  };
+
+  private createCartLineOptions = (item: IkasOrderLineItem) => {
+    if (item && item.options) {
+      const options: IkasProductCartLineOption[] = [];
+
+      for (const option of item.options) {
+        const data = new IkasProductCartLineOption({});
+
+        data.productOptionId = option.productOptionId;
+        data.productOptionsSetId = option.productOptionsSetId;
+        data.values = option.values.map((val) => val.value);
+        options.push(data);
+      }
+
+      return options;
+    } else {
+      return null;
+    }
+  };
+
+  private getOptionValues = (product: IkasProduct) => {
+    const optionValues: IkasProductCartLineOption[] = [];
+
+    product.productOptionSet?.options.forEach((o) => {
+      if (o.values.length) {
+        optionValues.push(
+          new IkasProductCartLineOption({
+            productOptionId: o.id,
+            productOptionsSetId: o.productOptionSetId,
+            values: o.values,
+          })
+        );
+      }
+    });
+
+    return optionValues;
+  };
+
+  addItem = async (
+    variant: IkasProductVariant,
+    product: IkasProduct,
+    initialQuantity = 1
+  ) => {
+    try {
+      if (!product.canAddToCart) return false;
+
+      await this.beforeCartOperationCheck();
+
+      if (this.cart) {
+        const existingItem = this.findExistingItem(variant, product);
+
+        if (existingItem) {
+          product.productOptionSet?.initOptionValues();
+
+          return this.changeItemQuantity(
+            existingItem,
+            existingItem.quantity + 1
+          );
+        }
+      }
+
+      const optionValues = this.getOptionValues(product);
+
+      const cartId = this.cart?.id || localStorage.getItem(CART_LS_KEY);
+      const input: IkasSaveItemToCartInput = {
+        cartId: cartId,
+        customerId:
+          this.cart?.customerId ||
+          this.baseStore.customerStore.customer?.id ||
+          null,
+        item: {
+          id: null,
+          quantity: initialQuantity,
+          variant: {
+            id: variant.id,
+            name: product.name,
+          },
+        },
+        options: optionValues.length ? optionValues : null,
+        priceListId: IkasStorefrontConfig.priceListId || null,
+        salesChannelId: IkasStorefrontConfig.salesChannelId!,
+        storefrontId: IkasStorefrontConfig.storefrontId!,
+        storefrontRoutingId: IkasStorefrontConfig.storefrontRoutingId!,
+        storefrontThemeId: IkasStorefrontConfig.storefrontThemeId!,
+      };
+
+      const cart = await IkasCartAPI.saveItemToCart(input);
+      if (cart) await this.setCart(cart);
+
+      if (this.cart) {
+        const eventId = `${this.cart.id}-${this.cart.updatedAt}`;
+        const item = this.cart.items.find((i) => i.variant.id);
+
+        if (item) {
+          Analytics.addToCart(item, initialQuantity, eventId, this.cart);
+        }
+      }
+
+      product.productOptionSet?.initOptionValues();
+
+      return true;
+    } catch (err) {
+      console.log(err);
+      return false;
+    }
+  };
+
+  changeItemQuantity = async (item: IkasOrderLineItem, quantity: number) => {
+    try {
+      await this.beforeCartOperationCheck();
+
+      const input: IkasSaveItemToCartInput = {
+        cartId: this.cart?.id || null,
+        customerId:
+          this.cart?.customerId ||
+          this.baseStore.customerStore.customer?.id ||
+          null,
+        item: {
+          id: item.id,
+          quantity: quantity,
+          variant: {
+            id: item.variant.id,
+            name: item.variant.name,
+          },
+        },
+        options: this.createCartLineOptions(item),
+        priceListId: IkasStorefrontConfig.priceListId || null,
+        salesChannelId: IkasStorefrontConfig.salesChannelId!,
+        storefrontId: IkasStorefrontConfig.storefrontId!,
+        storefrontRoutingId: IkasStorefrontConfig.storefrontRoutingId!,
+        storefrontThemeId: IkasStorefrontConfig.storefrontThemeId!,
+      };
+      const cart = await IkasCartAPI.saveItemToCart(input);
+      if (cart) await this.setCart(cart);
+
+      this.removeCardIfEmpty();
+
+      if (this.cart) {
+        const eventId = `${this.cart.id}-${this.cart.updatedAt}`;
+
+        const oldQuantity = item.quantity;
+        if (oldQuantity > quantity) {
+          Analytics.removeFromCart(item, oldQuantity - quantity, this.cart);
+        } else {
+          Analytics.addToCart(item, quantity - oldQuantity, eventId, this.cart);
+        }
+      }
+      return true;
+    } catch (err) {
+      console.log(err);
+      return false;
+    }
+  };
+
+  removeItem = async (item: IkasOrderLineItem) => {
+    await this.changeItemQuantity(item, 0);
+  };
+
+  removeCardIfEmpty = () => {
+    if (this.cart?.itemCount === 0) {
+      this.removeCart();
+    }
+  };
+
+  removeCart = () => {
+    localStorage.removeItem(CART_LS_KEY);
+    localStorage.removeItem(CHECKOUT_LS_KEY);
+    this.cart = undefined;
+    this._checkoutId = undefined;
+  };
+
+  waitUntilInitialized = () => {
+    return new Promise((resolve) => {
+      const interval = setInterval(() => {
+        if (this.cartLoadFinished) {
+          clearInterval(interval);
+          resolve(null);
+        }
+      }, 100);
+    });
+  };
+}