@ikas/storefront-next 4.0.0-alpha.10

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

@@ -0,0 +1,618 @@
+import fs from "fs";
+import getConfig from "next/config.js";
+import { GetServerSidePropsContext, GetStaticPropsContext } from "next";
+import { ParsedUrlQuery } from "querystring";
+import {
+  IkasCustomerReviewSettings,
+  IkasMerchantSettings,
+  IkasProductBackInStockSettings,
+  IkasSalesChannel,
+  IkasStorefront,
+  IkasStorefrontRouting,
+  IkasStorefrontThemeLocalization,
+  IkasThemeJson,
+  IkasThemeJsonFavicon,
+  IkasThemeJsonPageType,
+  IkasThemeJsonSettings,
+  IkasThemeJsonStockPreference,
+} from "@ikas/storefront-models";
+import { IkasPageDataProvider } from "@ikas/storefront-providers";
+import { IkasStorefrontConfig } from "@ikas/storefront-config";
+import {
+  listCheckoutSettings,
+  listMerchantSettings,
+  IkasAPIClientConfig,
+  getStorefrontSettings,
+  IkasStorefrontSettings,
+} from "@ikas/storefront-api";
+import { getGoogleFontHref } from "../utils/google-fonts";
+import { I18NFileReader } from "../utils/i18n";
+import { createFile, deleteDirContent } from "../utils/fs";
+
+export class IkasNextPageDataProvider {
+  static startTime = Date.now();
+
+  static readLocalTheme(): Promise<IkasThemeJson> {
+    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(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 async cacheLocalSettingsFile(settings: IkasStorefrontSettings) {
+    const cacheFileFolderPath = ".ikas";
+    await deleteDirContent(cacheFileFolderPath);
+
+    const cacheFileName = `settings-${this.startTime}.json`;
+    await createFile(
+      cacheFileFolderPath,
+      cacheFileName,
+      JSON.stringify(settings, null, 2)
+    );
+  }
+
+  static readLocalSettingsFile() {
+    try {
+      const fileContent = fs.readFileSync(
+        `.ikas/settings-${this.startTime}.json`
+      );
+
+      if (fileContent && fileContent.length)
+        return JSON.parse(fileContent.toString());
+    } catch {}
+  }
+
+  static setAPIClientConfig() {
+    IkasAPIClientConfig.URL = IkasStorefrontConfig.getApiUrl() || "";
+    IkasAPIClientConfig.HEADERS = {
+      "x-api-key": IkasStorefrontConfig.getApiKey() || "",
+      "x-sfid": IkasStorefrontConfig.getStorefrontId() || "",
+      "x-sfrid": IkasStorefrontConfig.getStorefrontRoutingId() || "",
+    };
+
+    if (IkasStorefrontConfig.getCustomerToken()) {
+      IkasAPIClientConfig.TOKEN = IkasStorefrontConfig.getCustomerToken() || "";
+    }
+  }
+
+  static async getLocalSettings(locale: string): Promise<SettingsData | null> {
+    let settings: IkasStorefrontSettings =
+      await IkasNextPageDataProvider.readLocalSettingsFile();
+
+    if (!settings) {
+      const settingsResponse = await getStorefrontSettings();
+
+      if (!settingsResponse.isSuccess || !settingsResponse.data) {
+        console.error("Storefront settings fetch failed!");
+        console.error(settingsResponse);
+        return null;
+      }
+
+      settings = settingsResponse.data;
+      await this.cacheLocalSettingsFile(settings);
+    }
+
+    const storefront = settings.storefront;
+    const salesChannel = settings.salesChannel;
+    const storefrontJSScripts = []; // Not using the settings one on purpose, no need to run scripts on localhost
+    const productBackInStockSettings: IkasProductBackInStockSettings | null =
+      settings.productBackInStockSettings
+        ? {
+            customerLoginRequired:
+              settings.productBackInStockSettings.customerLoginRequired,
+          }
+        : null;
+    const customerReviewSettings: IkasCustomerReviewSettings | null =
+      settings.customerReviewSettings
+        ? {
+            customerLoginRequired:
+              settings.customerReviewSettings.customerLoginRequired || false,
+            customerPurchaseRequired:
+              settings.customerReviewSettings.customerPurchaseRequired || false,
+          }
+        : null;
+
+    const localTheme = await IkasNextPageDataProvider.readLocalTheme();
+    const colorScript = IkasNextPageDataProvider.createColorScript(
+      localTheme.settings
+    );
+    const fontScript = IkasNextPageDataProvider.createFontScript(
+      localTheme.settings
+    );
+
+    if (colorScript) storefrontJSScripts.push(colorScript);
+    if (fontScript) storefrontJSScripts.push(fontScript);
+
+    return {
+      storefront: storefront,
+      themeLocalization: {
+        id: "",
+        locale: "en",
+        privacyPolicy: null,
+        returnPolicy: null,
+        storefrontId: storefront.id,
+        storefrontThemeId: "",
+        termsOfService: null,
+        themeJson: localTheme,
+      },
+      salesChannel,
+      routing: storefront.routings.length
+        ? storefront.routings.find(
+            (r) => r.locale === locale || r.id === locale
+          ) || storefront.routings[0]
+        : {
+            countryCodes: [],
+            domain: "",
+            dynamicCurrencySettings: {
+              roundingFormat: null,
+              targetCurrencyCode: "",
+            },
+            id: "",
+            locale: "en",
+            path: null,
+            priceListId: null,
+          },
+      favicon: localTheme.settings.favicon,
+      stockPreference: localTheme.settings.stockPreference,
+      storefrontJSScripts,
+      domain: "localhost:3333",
+      productBackInStockSettings,
+      customerReviewSettings,
+      merchantSettings: settings.merchantSettings,
+    };
+  }
+
+  static async getProdSettings(locale: string): Promise<SettingsData | null> {
+    return new Promise(async (resolve) => {
+      const settings = await IkasNextPageDataProvider.readSettingsFile();
+      if (!settings || !settings.localizationMap) return resolve(null);
+
+      const storefront = settings.storefront;
+      const salesChannel = 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 || false,
+              customerPurchaseRequired:
+                settings.customerReviewSettings.customerPurchaseRequired ||
+                false,
+            }
+          : null;
+
+      let merchantSettings = settings.merchantSettings;
+      if (!merchantSettings) {
+        const response = await listMerchantSettings({});
+        if (response.isSuccess && response.data) {
+          merchantSettings = response.data;
+        } else {
+          console.error("MERCHANT SETTINGS FETCH FAILED!");
+          return resolve(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 LOCALIZATION FILE READ ERROR!!!");
+            console.error(err);
+            return resolve(null);
+          }
+          const result = file.length ? JSON.parse(file.toString()) : {};
+          const themeLocalization = result as IkasStorefrontThemeLocalization;
+          const favicon = themeLocalization.themeJson.settings.favicon;
+          const stockPreference =
+            themeLocalization.themeJson.settings.stockPreference;
+
+          if (themeLocalization.themeJson.settings) {
+            const colorScript = IkasNextPageDataProvider.createColorScript(
+              themeLocalization.themeJson.settings
+            );
+            const fontScript = IkasNextPageDataProvider.createFontScript(
+              themeLocalization.themeJson.settings
+            );
+
+            if (colorScript) storefrontJSScripts.push(colorScript);
+            if (fontScript) storefrontJSScripts.push(fontScript);
+          }
+
+          resolve({
+            storefront,
+            themeLocalization,
+            salesChannel,
+            routing,
+            favicon,
+            stockPreference,
+            storefrontJSScripts,
+            domain,
+            productBackInStockSettings,
+            customerReviewSettings,
+            merchantSettings,
+          });
+        }
+      );
+    });
+  }
+
+  static async getSettings(locale: string): Promise<SettingsData | null> {
+    const isLocal = process.env.NEXT_PUBLIC_ENV === "local";
+
+    if (isLocal) {
+      return await this.getLocalSettings(locale);
+    } else {
+      return await this.getProdSettings(locale);
+    }
+  }
+
+  static async setStorefrontConfig(settings: SettingsData) {
+    const {
+      storefront,
+      salesChannel,
+      routing,
+      favicon,
+      stockPreference,
+      storefrontJSScripts,
+      domain,
+      productBackInStockSettings,
+      customerReviewSettings,
+      merchantSettings,
+    } = settings;
+
+    IkasStorefrontConfig.init({
+      apiUrl: process.env.NEXT_PUBLIC_GQL_URL,
+      adminApiUrl: process.env.NEXT_PUBLIC_UPLOAD_GQL_URL,
+      cdnUrl: process.env.NEXT_PUBLIC_IMG_BASE_URL,
+      storefrontId: storefront.id,
+      storefrontRoutingId: routing.id,
+      storefrontThemeId: storefront.mainStorefrontThemeId!,
+      salesChannelId: storefront.salesChannelId!,
+      priceListId: routing.priceListId || undefined,
+      stockLocationIds: salesChannel.stockLocations?.map((sl) => sl.id),
+      routings: storefront.routings,
+      paymentGateways: salesChannel.paymentGateways || [],
+      gtmId: storefront.gtmId || undefined,
+      fbpId: storefront.fbpId || undefined,
+      analytics4Id: storefront.analytics4Id || undefined,
+      universalAnalyticsId: storefront.universalAnalyticsId || undefined,
+      tiktokPixelId: storefront.tiktokPixelId || undefined,
+      favicon: favicon || null,
+      pickUpStockLocationIds: storefront.pickUpStockLocationIds
+        ? storefront.pickUpStockLocationIds.length
+          ? storefront.pickUpStockLocationIds
+          : null
+        : null,
+      stockPreference: stockPreference || null,
+      storefrontJSScripts: storefrontJSScripts || [],
+      domain: domain,
+      productBackInStockSettings: productBackInStockSettings,
+      customerReviewSettings: customerReviewSettings,
+      merchantSettings,
+    });
+  }
+
+  static async setTranslations(
+    settings: SettingsData,
+    componentIds: string[],
+    pageType?: IkasThemeJsonPageType,
+    isEditor?: boolean
+  ) {
+    const { serverRuntimeConfig } = getConfig();
+    const routing = settings.routing;
+    const isLocal = process.env.NEXT_PUBLIC_ENV === "local";
+
+    const components = settings.themeLocalization.themeJson.components.filter(
+      (c) => isEditor || componentIds.includes(c.id)
+    );
+    const namespaces = ["common", ...components.map((c) => c.dir)];
+
+    if (pageType === IkasThemeJsonPageType.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.init({
+      translations,
+    });
+  }
+
+  static async getExtraProps(
+    settings: SettingsData,
+    provider: IkasPageDataProvider,
+    pageType?: IkasThemeJsonPageType
+  ) {
+    const extraProps: Record<string, any> = {};
+    const themeLocalization = settings.themeLocalization;
+
+    if (pageType === IkasThemeJsonPageType.CHECKOUT) {
+      const checkoutComponent = provider.page?.components[0];
+
+      if (checkoutComponent) {
+        const checkoutSettings = await listCheckoutSettings({});
+        const customizationProps: IkasCheckoutCustomizationProps = {
+          showTax: checkoutComponent.propValues["showTax"] ?? true,
+          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.checkoutSettings = checkoutSettings?.data?.length
+          ? checkoutSettings.data[0]
+          : null;
+      }
+    }
+
+    return extraProps;
+  }
+
+  static async getPageData(
+    context:
+      | GetStaticPropsContext<ParsedUrlQuery>
+      | GetServerSidePropsContext<ParsedUrlQuery>,
+    isServer: boolean,
+    pageType?: IkasThemeJsonPageType,
+    possiblePageTypes?: IkasThemeJsonPageType[],
+    isEditor?: boolean
+  ) {
+    const isLocal = process.env.NEXT_PUBLIC_ENV === "local";
+    const isProdEditor = !isLocal && isEditor;
+
+    IkasNextPageDataProvider.setAPIClientConfig();
+
+    IkasStorefrontConfig.init({
+      apiUrl: process.env.NEXT_PUBLIC_GQL_URL,
+      adminApiUrl: process.env.NEXT_PUBLIC_UPLOAD_GQL_URL,
+      cdnUrl: process.env.NEXT_PUBLIC_IMG_BASE_URL,
+    });
+
+    // 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,
+        };
+      }
+
+      await this.setStorefrontConfig(settings);
+
+      const themeLocalization = settings.themeLocalization;
+      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) || [];
+      await this.setTranslations(settings, componentIds, pageType, isEditor);
+
+      const extraProps = await this.getExtraProps(settings, provider, pageType);
+
+      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?: IkasThemeJsonPageType,
+    possiblePageTypes?: IkasThemeJsonPageType[],
+    isEditor?: boolean
+  ) {
+    return await IkasNextPageDataProvider.getPageData(
+      context,
+      false,
+      pageType,
+      possiblePageTypes,
+      isEditor
+    );
+  }
+
+  static async getServerSideProps(
+    context: GetServerSidePropsContext<ParsedUrlQuery>,
+    pageType?: IkasThemeJsonPageType
+  ) {
+    return await IkasNextPageDataProvider.getPageData(context, true, pageType);
+  }
+
+  static createColorScript(settings: IkasThemeJsonSettings) {
+    if (!settings.colors) return;
+
+    return `<script>${settings.colors
+      .map(
+        (sc) =>
+          `document.documentElement.style.setProperty("${sc.key}","${sc.color}");`
+      )
+      .join("\r\n")}</script> 
+    `;
+  }
+
+  static createFontScript(settings: IkasThemeJsonSettings) {
+    const fontHref = getGoogleFontHref(settings.fontFamily);
+
+    if (fontHref) {
+      return `<link id="ikas-font" rel="stylesheet" href="${fontHref}"> 
+  <style>
+    body { 
+      font-family: '${settings.fontFamily.name}', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
+    } 
+  </style>`;
+    }
+  }
+}
+
+export type SettingsData = {
+  storefront: IkasStorefront;
+  themeLocalization: IkasStorefrontThemeLocalization;
+  salesChannel: IkasSalesChannel;
+  routing: IkasStorefrontRouting;
+  localizationMap?: Record<string, any>;
+  favicon: IkasThemeJsonFavicon;
+  stockPreference: IkasThemeJsonStockPreference;
+  storefrontJSScripts: string[];
+  domain: string;
+  productBackInStockSettings: IkasProductBackInStockSettings | null;
+  customerReviewSettings: IkasCustomerReviewSettings | null;
+  merchantSettings: IkasMerchantSettings;
+};
+
+export type IkasCheckoutCustomizationProps = {
+  showTax?: boolean;
+  buttonBgColor?: string;
+  buttonTextColor?: string;
+  buttonDisabledBgColor?: string;
+  buttonDisabledTextColor?: string;
+
+  primaryTextColor?: string;
+  secondaryTextColor?: string;
+
+  primaryBgColor?: string;
+  secondaryBgColor?: string;
+  borderColor?: string;
+  cardBgColor?: string;
+
+  errorColor?: string;
+  errorLightColor?: string;
+  warningColor?: string;
+  warningLightColor?: string;
+  successColor?: string;
+  successLightColor?: string;
+};

package/src/utils/fs.ts

@@ -0,0 +1,93 @@
+import fs from "fs";
+import path from "path";
+
+/**
+ * Divides the given filePath string into directory part and fileName part
+ * @param path Path for the file
+ */
+export function getFilePathParts(path: string) {
+  const componentFilePathParts = path.split("/");
+
+  if (componentFilePathParts.length > 1) {
+    const dirParts = componentFilePathParts.slice(
+      0,
+      componentFilePathParts.length - 1
+    );
+    const filePart = componentFilePathParts[componentFilePathParts.length - 1];
+
+    return {
+      dirParts,
+      filePart,
+    };
+  }
+
+  return {
+    filePart: path,
+  };
+}
+
+/**
+ * Deletes the contents of the given directory, exluding the ignoreFiles
+ * @param dirPath Path for the directory
+ * @param ignoreFiles List of files to keep in directory. Does not accept recursive paths, only first level files
+ *
+ * @returns true for successfull operation, false otherwise
+ */
+export async function deleteDirContent(
+  dirPath: string,
+  ignoreFiles?: string[]
+) {
+  try {
+    // const fs = await import("fs-extra");
+    const files = fs.readdirSync(dirPath);
+
+    files.forEach((file) => {
+      if (!ignoreFiles?.includes(file)) {
+        fs.unlinkSync(path.join(dirPath, file));
+      }
+    });
+
+    return true;
+  } catch (err) {
+    return false;
+  }
+}
+
+/**
+ * Creates the given file and directories for the filePath
+ * @param basePath Base directory path for the file
+ * @param fileSubPath Filename or the sub directory path for the file to write
+ * @param fileStr File contents
+ *
+ * @returns true for successfull operation, false otherwise
+ */
+export async function createFile(
+  basePath: string,
+  fileSubPath: string,
+  fileStr: string
+) {
+  try {
+    // const fs = await import("fs-extra");
+    let generatedFolderPath = basePath;
+
+    const pageFilePathParts = getFilePathParts(fileSubPath);
+    if (pageFilePathParts.dirParts?.length) {
+      generatedFolderPath = path.join(
+        generatedFolderPath,
+        ...pageFilePathParts.dirParts
+      );
+    }
+
+    if (!fs.existsSync(generatedFolderPath)) {
+      fs.mkdirSync(generatedFolderPath, { recursive: true });
+    }
+
+    const filePath = path.join(generatedFolderPath, pageFilePathParts.filePart);
+    fs.writeFileSync(filePath, fileStr);
+
+    return true;
+  } catch (err) {
+    console.error(err);
+    return false;
+  }
+}