@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/providers/page-data-next.ts

@@ -0,0 +1,422 @@
+import fs from "fs";
+import getConfig from "next/config";
+import { GetServerSidePropsContext, GetStaticPropsContext } from "next";
+import { ParsedUrlQuery } from "querystring";
+
+import {
+  IkasTheme,
+  IkasThemePageType,
+  IkasCustomerReviewSettings,
+} from "../models";
+import { IkasStorefront } from "../models/data/storefront";
+import { IkasSalesChannel } from "../models/data/sales-channel";
+import { IkasStorefrontRouting } from "../models/data/storefront/routing";
+import { IkasStorefrontConfig } from "../storefront";
+import { IkasPageDataProvider } from "./page-data-get";
+import { IkasStorefrontThemeLocalization } from "../models/data/storefront/theme-localization";
+import { IkasStorefrontAPI } from "../api/storefront";
+import { IkasThemeFavicon } from "../models/theme/settings/prop/favicon";
+import {
+  IkasThemeSettings,
+  IkasThemeStockPreference,
+} from "../models/theme/settings";
+import { I18NFileReader } from "../utils/i18n";
+import { IkasCheckoutCustomizationProps } from "../components/checkout";
+import { IkasCheckoutAPI } from "../api";
+import { IkasProductBackInStockSettings } from "../models/data/product-back-in-stock-settings";
+
+export class IkasNextPageDataProvider {
+  static readLocalTheme(): Promise<IkasTheme> {
+    return new Promise((resolve, reject) => {
+      const themeJSONPath = "./src/theme.json";
+
+      fs.readFile(
+        themeJSONPath,
+        {
+          flag: "a+",
+        },
+        function (err, file) {
+          if (err) {
+            return reject(err);
+          }
+          const result = file.length ? JSON.parse(file.toString()) : {};
+          resolve(new IkasTheme(result));
+        }
+      );
+    });
+  }
+
+  static readSettingsFile(): Promise<SettingsData | null> {
+    return new Promise((resolve) => {
+      const { serverRuntimeConfig } = getConfig();
+      const settingsPath = serverRuntimeConfig.SETTINGS;
+
+      fs.readFile(
+        settingsPath,
+        {
+          flag: "a+",
+        },
+        function (err, file) {
+          if (err) {
+            console.error("SETTINGS FILE READ ERROR!!!");
+            console.error(err);
+            return resolve(null);
+          }
+          const result = file.length ? JSON.parse(file.toString()) : {};
+          resolve(result);
+        }
+      );
+    });
+  }
+
+  static getSettings(locale: string): Promise<SettingsData | null> {
+    return new Promise(async (resolve) => {
+      const isLocal = process.env.NEXT_PUBLIC_ENV === "local";
+
+      if (isLocal) {
+        if (!IkasStorefrontConfig.storefrontId) {
+          console.error("Missing storefrontId in the config.json file!");
+          return resolve(null);
+        }
+
+        const storefrontResponse = await IkasStorefrontAPI.getStorefront(
+          IkasStorefrontConfig.storefrontId
+        );
+        if (!storefrontResponse) return resolve(null);
+
+        const storefront = storefrontResponse;
+        const localTheme = await IkasNextPageDataProvider.readLocalTheme();
+        const colorScript = IkasNextPageDataProvider.createColorScript(
+          localTheme.settings
+        );
+
+        resolve({
+          storefront,
+          themeLocalization: new IkasStorefrontThemeLocalization({
+            themeJson: localTheme,
+          }),
+          salesChannel: new IkasSalesChannel({
+            id: storefront.salesChannelId!,
+          }),
+          routing: storefront.routings.length
+            ? storefront.routings.find(
+                (r) => r.locale === locale || r.id === locale
+              ) || //storefront.routings.find((r) => !r.path && !r.domain) ||
+              storefront.routings[0]
+            : new IkasStorefrontRouting({}),
+          favicon: localTheme.settings.favicon,
+          stockPreference: localTheme.settings.stockPreference,
+          storefrontJSScripts: colorScript ? [colorScript] : [],
+          domain: "",
+          productBackInStockSettings: {
+            customerLoginRequired: true,
+          },
+          customerReviewSettings: {
+            customerLoginRequired: true,
+            customerPurchaseRequired: false,
+          },
+        });
+      } else {
+        const settings = await IkasNextPageDataProvider.readSettingsFile();
+        if (!settings || !settings.localizationMap) return resolve(null);
+
+        const storefront = new IkasStorefront(settings.storefront);
+        const salesChannel = new IkasSalesChannel(settings.salesChannel);
+        const localizationMap = settings.localizationMap;
+        const storefrontJSScripts = settings.storefrontJSScripts || [];
+        const domain = settings.domain;
+        const productBackInStockSettings: IkasProductBackInStockSettings | null = settings.productBackInStockSettings
+          ? {
+              customerLoginRequired:
+                settings.productBackInStockSettings.customerLoginRequired,
+            }
+          : null;
+        const customerReviewSettings: IkasCustomerReviewSettings | null = settings.customerReviewSettings
+          ? {
+              customerLoginRequired:
+                settings.customerReviewSettings.customerLoginRequired,
+              customerPurchaseRequired:
+                settings.customerReviewSettings.customerPurchaseRequired,
+            }
+          : null;
+
+        const themeLocalizationPath = localizationMap[locale];
+        const routing = storefront.routings.find(
+          (r) => r.id === locale || r.path === locale
+        );
+
+        if (!themeLocalizationPath || !routing) {
+          console.error("THEME LOCALIZATION PATH OR ROUTING MISSING!!!");
+          return resolve(null);
+        }
+
+        fs.readFile(
+          themeLocalizationPath,
+          {
+            flag: "a+",
+          },
+          function (err, file) {
+            if (err) {
+              console.error("THEME LOCALZIATION FILE READ ERROR!!!");
+              console.error(err);
+              return resolve(null);
+            }
+            const result = file.length ? JSON.parse(file.toString()) : {};
+            const themeLocalization = new IkasStorefrontThemeLocalization(
+              result
+            );
+            const favicon = themeLocalization.themeJson.settings.favicon;
+            const stockPreference =
+              themeLocalization.themeJson.settings.stockPreference;
+
+            if (themeLocalization.themeJson.settings) {
+              const colorScript = IkasNextPageDataProvider.createColorScript(
+                themeLocalization.themeJson.settings
+              );
+              if (colorScript) storefrontJSScripts.push(colorScript);
+            }
+
+            resolve({
+              storefront,
+              themeLocalization,
+              salesChannel,
+              routing,
+              favicon,
+              stockPreference,
+              storefrontJSScripts,
+              domain,
+              productBackInStockSettings,
+              customerReviewSettings,
+            });
+          }
+        );
+      }
+    });
+  }
+
+  static async getPageData(
+    context:
+      | GetStaticPropsContext<ParsedUrlQuery>
+      | GetServerSidePropsContext<ParsedUrlQuery>,
+    isServer: boolean,
+    pageType?: IkasThemePageType,
+    possiblePageTypes?: IkasThemePageType[],
+    isEditor?: boolean
+  ) {
+    const isLocal = process.env.NEXT_PUBLIC_ENV === "local";
+    const isProdEditor = !isLocal && isEditor;
+    const { serverRuntimeConfig } = getConfig();
+
+    // Local editor - prod deploy - local build
+    if (!isProdEditor) {
+      const locale = context.locale;
+
+      if (!locale) {
+        return {
+          props: {},
+          notFound: true,
+        };
+      }
+
+      const settings = await IkasNextPageDataProvider.getSettings(locale);
+
+      if (
+        !settings ||
+        !settings.storefront.mainStorefrontThemeId ||
+        !settings.storefront.salesChannelId
+      ) {
+        return {
+          props: {},
+          notFound: true,
+        };
+      }
+
+      const {
+        storefront,
+        themeLocalization,
+        salesChannel,
+        routing,
+        favicon,
+        stockPreference,
+        storefrontJSScripts,
+        domain,
+        productBackInStockSettings,
+        customerReviewSettings,
+      } = settings;
+
+      IkasStorefrontConfig.storefrontId = storefront.id;
+      IkasStorefrontConfig.storefrontRoutingId = routing.id;
+      IkasStorefrontConfig.storefrontThemeId = storefront.mainStorefrontThemeId!;
+      IkasStorefrontConfig.salesChannelId = storefront.salesChannelId!;
+      IkasStorefrontConfig.priceListId = routing.priceListId || undefined;
+      IkasStorefrontConfig.stockLocationIds = salesChannel.stockLocations?.map(
+        (sl) => sl.id
+      );
+      IkasStorefrontConfig.routings = storefront.routings;
+      IkasStorefrontConfig.paymentGateways = salesChannel.paymentGateways || [];
+      IkasStorefrontConfig.gtmId = storefront.gtmId || undefined;
+      IkasStorefrontConfig.fbpId = storefront.fbpId || undefined;
+      IkasStorefrontConfig.favicon = favicon || null;
+      IkasStorefrontConfig.stockPreference = stockPreference || null;
+      IkasStorefrontConfig.storefrontJSScripts = storefrontJSScripts || [];
+      IkasStorefrontConfig.domain = domain;
+      IkasStorefrontConfig.productBackInStockSettings = productBackInStockSettings;
+      IkasStorefrontConfig.customerReviewSettings = customerReviewSettings;
+
+      const provider = new IkasPageDataProvider(
+        themeLocalization.themeJson,
+        context.params,
+        pageType
+      );
+      provider.possiblePageTypes =
+        possiblePageTypes || (pageType ? [pageType] : []);
+
+      if (!isEditor) {
+        await provider.getPageData();
+        if (!provider.page) {
+          return {
+            props: {},
+            notFound: true,
+          };
+        }
+      }
+
+      const componentIds = isEditor
+        ? provider.theme.components.map((c) => c.id)
+        : provider.page!.components.map((pc) => pc.componentId);
+
+      const components = themeLocalization.themeJson.components.filter(
+        (c) => isEditor || componentIds.includes(c.id)
+      );
+
+      const namespaces = ["common", ...components.map((c) => c.dir)];
+      if (pageType === IkasThemePageType.CHECKOUT || isEditor) {
+        namespaces.push("checkout-page");
+      }
+
+      const nextI18nConf = serverRuntimeConfig.nextI18nConf;
+      const currentLocale = routing.locale;
+
+      const i18nReader = new I18NFileReader(
+        currentLocale,
+        namespaces,
+        isLocal ? undefined : nextI18nConf.localePath
+      );
+
+      const translations = await i18nReader.read();
+      IkasStorefrontConfig.translations = translations;
+
+      const extraProps: Record<string, any> = {};
+
+      if (pageType === IkasThemePageType.CHECKOUT) {
+        const checkoutComponent = provider.page?.components[0];
+
+        if (checkoutComponent) {
+          const checkoutSettings = await IkasCheckoutAPI.listCheckoutSettings();
+          const customizationProps: IkasCheckoutCustomizationProps = {
+            buttonBgColor: checkoutComponent.propValues["buttonBgColor"],
+            buttonTextColor: checkoutComponent.propValues["buttonTextColor"],
+            buttonDisabledBgColor:
+              checkoutComponent.propValues["buttonDisabledBgColor"],
+            buttonDisabledTextColor:
+              checkoutComponent.propValues["buttonDisabledTextColor"],
+
+            primaryTextColor: checkoutComponent.propValues["primaryTextColor"],
+            secondaryTextColor:
+              checkoutComponent.propValues["secondaryTextColor"],
+
+            primaryBgColor: checkoutComponent.propValues["primaryBgColor"],
+            secondaryBgColor: checkoutComponent.propValues["secondaryBgColor"],
+            borderColor: checkoutComponent.propValues["borderColor"],
+            cardBgColor: checkoutComponent.propValues["cardBgColor"],
+
+            errorColor: checkoutComponent.propValues["errorColor"],
+            errorLightColor: checkoutComponent.propValues["errorLightColor"],
+            warningColor: checkoutComponent.propValues["warningColor"],
+            warningLightColor:
+              checkoutComponent.propValues["warningLightColor"],
+            successColor: checkoutComponent.propValues["successColor"],
+            successLightColor:
+              checkoutComponent.propValues["successLightColor"],
+          };
+
+          extraProps.customizationProps = customizationProps;
+          extraProps.returnPolicy = themeLocalization.returnPolicy;
+          extraProps.privacyPolicy = themeLocalization.privacyPolicy;
+          extraProps.termsOfService = themeLocalization.termsOfService;
+          extraProps.checkoutSettingsStr = checkoutSettings?.length
+            ? JSON.stringify(checkoutSettings[0])
+            : null;
+        }
+      }
+
+      if (isServer)
+        return {
+          props: {
+            ...provider.nextPageData.props,
+            ...extraProps,
+          },
+        };
+      else
+        return {
+          props: {
+            ...provider.nextPageData.props,
+            ...extraProps,
+          },
+          revalidate: 60,
+        };
+    } else {
+      return {
+        props: {},
+      };
+    }
+  }
+
+  static async getStaticProps(
+    context: GetStaticPropsContext<ParsedUrlQuery>,
+    pageType?: IkasThemePageType,
+    possiblePageTypes?: IkasThemePageType[],
+    isEditor?: boolean
+  ) {
+    return await IkasNextPageDataProvider.getPageData(
+      context,
+      false,
+      pageType,
+      possiblePageTypes,
+      isEditor
+    );
+  }
+
+  static async getServerSideProps(
+    context: GetServerSidePropsContext<ParsedUrlQuery>,
+    pageType?: IkasThemePageType
+  ) {
+    return await IkasNextPageDataProvider.getPageData(context, true, pageType);
+  }
+
+  static createColorScript(settings: IkasThemeSettings) {
+    if (!settings.colors) return;
+
+    return `<script>${settings.colors
+      .map(
+        (sc) =>
+          `document.documentElement.style.setProperty("${sc.key}","${sc.color}");`
+      )
+      .join("\r\n")}</script> 
+    `;
+  }
+}
+
+export type SettingsData = {
+  storefront: IkasStorefront;
+  themeLocalization: IkasStorefrontThemeLocalization;
+  salesChannel: IkasSalesChannel;
+  routing: IkasStorefrontRouting;
+  localizationMap?: Record<string, any>;
+  favicon: IkasThemeFavicon;
+  stockPreference: IkasThemeStockPreference;
+  storefrontJSScripts: string[];
+  domain: string;
+  productBackInStockSettings: IkasProductBackInStockSettings | null;
+  customerReviewSettings: IkasCustomerReviewSettings | null;
+};

package/src/providers/placeholders.ts

@@ -0,0 +1,39 @@
+import {
+  IkasBlog,
+  IkasBlogCategory,
+  IkasBrand,
+  IkasCategory,
+  IkasProduct,
+  IkasProductDetail,
+  IkasProductVariant,
+  IkasRaffle,
+} from "../models";
+
+export function getPlaceholderProduct() {
+  return new IkasProductDetail(
+    new IkasProduct({
+      variants: [new IkasProductVariant()],
+    }),
+    []
+  );
+}
+
+export function getPlaceholderCategory() {
+  return new IkasCategory();
+}
+
+export function getPlaceholderBrand() {
+  return new IkasBrand();
+}
+
+export function getPlaceholderBlog() {
+  return new IkasBlog();
+}
+
+export function getPlaceholderBlogCategory() {
+  return new IkasBlogCategory();
+}
+
+export function getPlaceholderRaffle() {
+  return new IkasRaffle();
+}

package/src/providers/prop-value/attribute-list.ts

@@ -0,0 +1,73 @@
+import { IkasProductDetail } from "../../models";
+import IkasPropValueProvider from ".";
+import { IkasStorefrontConfig } from "../../storefront";
+import { IkasProductSearchAPI } from "../../api";
+import { IkasAttributeListPropValue } from "../../models/theme/page/component/prop-value/attribute-list";
+
+export class IkasAttributeListPropValueProvider
+  implements IkasPropValueProvider<IkasAttributeListPropValueData> {
+  private attributeListPropValue: IkasAttributeListPropValue;
+
+  constructor(prop: IkasAttributeListPropValue) {
+    this.attributeListPropValue = prop;
+  }
+
+  async getValue(): Promise<IkasAttributeListPropValueData> {
+    if (
+      !this.attributeListPropValue.attributeIds?.length ||
+      this.attributeListPropValue.usePageData ||
+      (!this.attributeListPropValue.usePageData &&
+        !this.attributeListPropValue.variantId)
+    ) {
+      return {
+        productDetail: null,
+        attributeListPropValue: this.attributeListPropValue,
+      };
+    }
+
+    let productDetail: IkasProductDetail | undefined;
+
+    const productSearchResponse = await IkasProductSearchAPI.searchProducts({
+      productIdList: [this.attributeListPropValue.productId!],
+      priceListId: IkasStorefrontConfig.priceListId,
+      salesChannelId: IkasStorefrontConfig.salesChannelId,
+    });
+
+    if (productSearchResponse) {
+      const productList = productSearchResponse.data;
+
+      if (productList.length) {
+        const product = productList[0];
+
+        if (product?.hasVariant) {
+          const variant = product.variants.find(
+            (v) => v.id === this.attributeListPropValue.variantId
+          );
+
+          if (variant) {
+            productDetail = new IkasProductDetail(
+              product,
+              variant.variantValues
+            );
+          }
+        } else {
+          const selectedVariant = product.variants.find((v) => v.isActive);
+          productDetail = new IkasProductDetail(
+            product,
+            (selectedVariant || product.variants[0]).variantValues
+          );
+        }
+      }
+    }
+
+    return {
+      productDetail: productDetail || null,
+      attributeListPropValue: this.attributeListPropValue,
+    };
+  }
+}
+
+export type IkasAttributeListPropValueData = {
+  productDetail: IkasProductDetail | null;
+  attributeListPropValue: IkasAttributeListPropValue;
+};

package/src/providers/prop-value/attribute.ts

@@ -0,0 +1,73 @@
+import { IkasProductDetail } from "../../models";
+import IkasPropValueProvider from ".";
+import { IkasAttributePropValue } from "../../models/theme/page/component/prop-value/attribute";
+import { IkasStorefrontConfig } from "../../storefront";
+import { IkasProductSearchAPI } from "../../api";
+
+export class IkasAttributePropValueProvider
+  implements IkasPropValueProvider<IkasAttributePropValueData> {
+  private attributePropValue: IkasAttributePropValue;
+
+  constructor(prop: IkasAttributePropValue) {
+    this.attributePropValue = prop;
+  }
+
+  async getValue(): Promise<IkasAttributePropValueData> {
+    if (
+      !this.attributePropValue.attributeId ||
+      this.attributePropValue?.usePageData ||
+      (!this.attributePropValue.usePageData &&
+        !this.attributePropValue.variantId)
+    ) {
+      return {
+        productDetail: null,
+        attributePropValue: this.attributePropValue,
+      };
+    }
+
+    let productDetail: IkasProductDetail | undefined;
+
+    const productSearchResponse = await IkasProductSearchAPI.searchProducts({
+      productIdList: [this.attributePropValue.productId!],
+      priceListId: IkasStorefrontConfig.priceListId,
+      salesChannelId: IkasStorefrontConfig.salesChannelId,
+    });
+
+    if (productSearchResponse) {
+      const productList = productSearchResponse.data;
+
+      if (productList.length) {
+        const product = productList[0];
+
+        if (product?.hasVariant) {
+          const variant = product.variants.find(
+            (v) => v.id === this.attributePropValue.variantId
+          );
+
+          if (variant) {
+            productDetail = new IkasProductDetail(
+              product,
+              variant.variantValues
+            );
+          }
+        } else {
+          const selectedVariant = product.variants.find((v) => v.isActive);
+          productDetail = new IkasProductDetail(
+            product,
+            (selectedVariant || product.variants[0]).variantValues
+          );
+        }
+      }
+    }
+
+    return {
+      productDetail: productDetail || null,
+      attributePropValue: this.attributePropValue,
+    };
+  }
+}
+
+export type IkasAttributePropValueData = {
+  productDetail: IkasProductDetail | null;
+  attributePropValue: IkasAttributePropValue;
+};

package/src/providers/prop-value/blog-category-list.ts

@@ -0,0 +1,25 @@
+import {
+  IkasBlogCategoryList,
+  IkasBlogCategoryListPropValue,
+} from "../../models";
+import IkasPropValueProvider from ".";
+
+export class IkasBlogCategoryListPropValueProvider
+  implements IkasPropValueProvider<IkasBlogCategoryList> {
+  private blogCategoryListPropValue: IkasBlogCategoryListPropValue;
+
+  constructor(blogCategoryListPropValue: IkasBlogCategoryListPropValue) {
+    this.blogCategoryListPropValue = blogCategoryListPropValue;
+  }
+
+  async getValue(): Promise<IkasBlogCategoryList> {
+    const blogCategoryList = new IkasBlogCategoryList({
+      blogCategoryListPropValue: this.blogCategoryListPropValue,
+    });
+
+    //@ts-ignore
+    await blogCategoryList.getInitial();
+
+    return blogCategoryList;
+  }
+}

package/src/providers/prop-value/blog-category.ts

@@ -0,0 +1,40 @@
+import { IkasBlogAPI } from "../../api";
+import { IkasBlogCategory, IkasBlogCategoryPropValue } from "../../models";
+import IkasPropValueProvider from ".";
+import { getPlaceholderBlogCategory } from "../placeholders";
+
+export class IkasBlogCategoryPropValueProvider
+  implements IkasPropValueProvider<IkasBlogCategoryPropValueData | null> {
+  private blogCategoryPropValue: IkasBlogCategoryPropValue;
+
+  constructor(propValue: IkasBlogCategoryPropValue) {
+    this.blogCategoryPropValue = propValue;
+  }
+
+  async getValue(): Promise<IkasBlogCategoryPropValueData | null> {
+    if (this.blogCategoryPropValue?.usePageData) {
+      return {
+        blogCategory: null,
+        blogCategoryPropValue: this.blogCategoryPropValue,
+      };
+    }
+    if (!this.blogCategoryPropValue.blogCategoryId) return null;
+
+    const blogCategory = await IkasBlogAPI.listBlogCategory({
+      idList: [this.blogCategoryPropValue.blogCategoryId],
+      page: 1,
+      limit: 1,
+    });
+
+    return {
+      blogCategory:
+        blogCategory.blogCategories[0] || getPlaceholderBlogCategory(),
+      blogCategoryPropValue: this.blogCategoryPropValue,
+    };
+  }
+}
+
+export type IkasBlogCategoryPropValueData = {
+  blogCategory: IkasBlogCategory | null;
+  blogCategoryPropValue: IkasBlogCategoryPropValue;
+};