@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/pages/api/updateTheme.ts

@@ -0,0 +1,31 @@
+import { NextApiRequest, NextApiResponse } from "next";
+import { corsMiddleware } from "./middleware";
+import ComponentImportsGenerator from "../../scripts/generators/components";
+import PageGenerator from "../../scripts/generators/pages";
+import APIGenerator from "../../scripts/generators/api";
+import ThemeJsonGenerator from "../../scripts/generators/theme";
+
+export const updateTheme = async (
+  req: NextApiRequest,
+  res: NextApiResponse
+) => {
+  await corsMiddleware(req, res);
+  const themeJson = req.body;
+
+  ThemeJsonGenerator.generate(themeJson);
+  ComponentImportsGenerator.generate(themeJson);
+  PageGenerator.generate();
+  APIGenerator.generate();
+
+  res.statusCode = 200;
+  res.setHeader("Content-Type", "application/json");
+  res.end();
+};
+
+export const config = {
+  api: {
+    bodyParser: {
+      sizeLimit: "50mb",
+    },
+  },
+};

package/src/pages/api/uploadTheme.ts

@@ -0,0 +1,276 @@
+import fs from "fs";
+import path from "path";
+import archiver from "archiver";
+import { NextApiRequest, NextApiResponse } from "next";
+import fetch from "node-fetch";
+import axios from "axios";
+
+//@ts-ignore
+import CheckoutEN from "../../assets/translations/checkout/en.js";
+//@ts-ignore
+import CheckoutTR from "../../assets/translations/checkout/tr.js";
+
+import { corsMiddleware } from "./middleware";
+
+export const uploadTheme = async (
+  req: NextApiRequest,
+  res: NextApiResponse
+) => {
+  await corsMiddleware(req, res);
+  try {
+    const theme = await getTheme();
+
+    const localization = await readLocalizationFiles();
+    const uploadUrl = await saveTheme(theme, localization);
+
+    if (typeof uploadUrl === "string") {
+      const zipDir = await archiveThemeCode();
+      const stat = fs.statSync(zipDir);
+      const success = await _uploadTheme(
+        uploadUrl,
+        fs.readFileSync(zipDir),
+        stat.size
+      );
+      console.log(success);
+      if (success) {
+        buildTheme();
+      }
+      deleteThemeZip(zipDir);
+    }
+
+    res.statusCode = 200;
+    res.setHeader("Content-Type", "application/json");
+    res.json({ status: "ok" });
+  } catch (err) {
+    console.log(err);
+    res.statusCode = 400;
+    res.setHeader("Content-Type", "application/json");
+    res.json({ status: "failed" });
+  }
+};
+
+export const config = {};
+
+async function archiveThemeCode(): Promise<string> {
+  const themePath = path.join(process.cwd());
+
+  const filename = "theme.zip";
+  const dirname = path.join(process.cwd(), filename);
+  const output = fs.createWriteStream(dirname);
+  const archive = archiver("zip", {
+    zlib: {
+      level: 9,
+    },
+  });
+
+  archive.on("warning", function (err) {
+    if (err.code !== "ENOENT") {
+      throw err;
+    }
+  });
+
+  archive.on("error", function (err) {
+    throw err;
+  });
+
+  archive.pipe(output);
+
+  const excludedDirs = ["node_modules", ".next", "out", ".git"];
+  const files = fs.readdirSync(themePath);
+
+  files.forEach((file) => {
+    const filePath = path.join(themePath, file);
+    const stat = fs.lstatSync(filePath);
+
+    if (stat.isDirectory()) {
+      if (excludedDirs.includes(file)) return;
+      archive.directory(filePath, file);
+    } else {
+      archive.file(filePath, { name: file });
+    }
+  });
+
+  await archive.finalize();
+
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(dirname);
+    }, 2000);
+  });
+}
+
+async function saveTheme(theme: any, localization: Record<string, any>) {
+  try {
+    const locales = Object.keys(localization);
+    const defaultLocale = locales.some((l) => l === "en") ? "en" : locales[0];
+    const config = await getStorefrontConfig();
+
+    const response = await fetch(process.env.NEXT_PUBLIC_UPLOAD_GQL_URL!, {
+      method: "POST",
+      body: JSON.stringify({
+        query: /* GraphQL */ `
+          mutation saveTheme($saveThemeInput: SaveThemeInput!) {
+            saveTheme(input: $saveThemeInput) {
+              themeVersionId
+              uploadUrl
+            }
+          }
+        `,
+        variables: {
+          saveThemeInput: {
+            id: config.themeId,
+            themeJson: JSON.stringify(theme),
+            locales: Object.entries(localization).map(
+              ([locale, localeTranslations]) => ({
+                isDefaultLocale: locale === defaultLocale,
+                locale,
+                localeJson: JSON.stringify(localeTranslations),
+              })
+            ),
+          },
+        },
+      }),
+      headers: {
+        "x-api-key": config.apiKey,
+        "Content-Type": "application/json",
+      },
+    });
+    const responseJSON = await response.json();
+
+    if (responseJSON.data && responseJSON.data.saveTheme) {
+      return responseJSON.data.saveTheme.uploadUrl as string;
+    }
+  } catch (err) {
+    console.log(err);
+  }
+}
+
+async function _uploadTheme(uploadUrl: string, file: Buffer, size: number) {
+  const config = {
+    headers: {
+      "Content-Type": "application/zip",
+      "Content-Length": size + "",
+    },
+  };
+
+  try {
+    const res = await axios.put(uploadUrl, file, config);
+    return res.status === 200;
+  } catch (err) {
+    console.log(err);
+    return false;
+  }
+}
+
+async function buildTheme() {
+  try {
+    const config = await getStorefrontConfig();
+    const response = await fetch(process.env.NEXT_PUBLIC_UPLOAD_GQL_URL!, {
+      method: "POST",
+      body: JSON.stringify({
+        query: /* GraphQL */ `
+          mutation buildTheme($buildThemeThemeId: String!) {
+            buildTheme(themeId: $buildThemeThemeId)
+          }
+        `,
+        variables: {
+          buildThemeThemeId: config.themeId,
+        },
+      }),
+      headers: {
+        "x-api-key": config.apiKey,
+        "Content-Type": "application/json",
+      },
+    });
+    const responseJSON = await response.json();
+    console.log(responseJSON);
+  } catch (err) {
+    console.log(err);
+  }
+}
+
+function getTheme(): Promise<any> {
+  return new Promise((resolve, reject) => {
+    const themePath = path.join(process.cwd(), "src", "theme.json");
+    fs.readFile(themePath, function (err, file) {
+      if (err) {
+        return reject(err);
+      }
+      resolve(JSON.parse(file.toString()));
+    });
+  });
+}
+
+function getStorefrontConfig(): Promise<Record<string, any>> {
+  return new Promise((resolve, reject) => {
+    const themePath = path.join(process.cwd(), "config.json");
+    fs.readFile(themePath, function (err, file) {
+      if (err) {
+        return reject(err);
+      }
+      resolve(JSON.parse(file.toString()));
+    });
+  });
+}
+
+function deleteThemeZip(zipDir: string) {
+  fs.unlinkSync(zipDir);
+}
+
+function readLocalizationFiles(): Promise<Record<string, any>> {
+  return new Promise((resolve, reject) => {
+    const localesPath = path.join(process.cwd(), "public", "locales");
+    const stripExtension = (path: string) =>
+      path.length ? path.split(".")[0] : path;
+
+    fs.readdir(localesPath, function (err, files) {
+      if (err) {
+        return reject(err);
+      }
+
+      const localeDirs = files.filter((file) =>
+        fs.lstatSync(path.join(localesPath, file)).isDirectory()
+      );
+
+      const locales: Record<string, any> = {};
+      let hasError = false;
+
+      localeDirs.forEach((locale) => {
+        const localeDirPath = path.join(
+          process.cwd(),
+          "public",
+          "locales",
+          locale
+        );
+
+        locales[locale] = {};
+
+        try {
+          const localeFiles = fs.readdirSync(localeDirPath);
+          localeFiles.forEach((localeFile) => {
+            const file = fs.readFileSync(
+              path.join(process.cwd(), "public", "locales", locale, localeFile)
+            );
+
+            const strippedLocale = stripExtension(locale).toLowerCase();
+            const namespace = stripExtension(localeFile).toLowerCase();
+
+            locales[strippedLocale][namespace] = JSON.parse(file.toString());
+
+            if (strippedLocale === "tr") {
+              locales[strippedLocale]["checkout-page"] = CheckoutTR;
+            } else {
+              locales[strippedLocale]["checkout-page"] = CheckoutEN;
+            }
+          });
+        } catch (err) {
+          console.error(err);
+          hasError = true;
+        }
+      });
+
+      if (hasError) reject(null);
+      else resolve(locales);
+    });
+  });
+}

package/src/pages/blog/[slug].tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import { GetStaticPaths, GetStaticProps } from "next";
+import { IkasPage } from "../../components";
+import { IkasThemePageType } from "../../models";
+import { observer } from "mobx-react-lite";
+import { IkasNextPageDataProvider } from "../../providers/page-data-next";
+import { IkasPageProps } from "../../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} addOgpMetas={true} reInitOnBrowser={true} />;
+};
+
+export default observer(Page);
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  return {
+    paths: [],
+    fallback: "blocking",
+  };
+};
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  return await IkasNextPageDataProvider.getStaticProps(context, undefined, [
+    IkasThemePageType.BLOG,
+    IkasThemePageType.BLOG_CATEGORY,
+  ]);
+};

package/src/pages/blog/index.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { GetStaticProps } from "next";
+import { IkasPage } from "../../components";
+import { IkasThemePageType } from "../../models";
+import { IkasNextPageDataProvider } from "../../providers/page-data-next";
+import { IkasPageProps } from "../../components/page";
+import { observer } from "mobx-react-lite";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} addOgpMetas={true} />;
+};
+
+export default observer(Page);
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  return await IkasNextPageDataProvider.getStaticProps(
+    context,
+    IkasThemePageType.BLOG_INDEX
+  );
+};

package/src/pages/cart.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { GetStaticProps } from "next";
+import { IkasPage } from "../components";
+import { IkasThemePageType } from "../models";
+import { IkasNextPageDataProvider } from "../providers/page-data-next";
+import { observer } from "mobx-react-lite";
+import { IkasPageProps } from "../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} />;
+};
+
+export default observer(Page);
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  return await IkasNextPageDataProvider.getStaticProps(
+    context,
+    IkasThemePageType.CART
+  );
+};

package/src/pages/checkout.tsx

@@ -0,0 +1,172 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { GetStaticProps } from "next";
+import { ParsedUrlQuery } from "querystring";
+
+import IkasCheckoutPage, {
+  IkasCheckoutCustomizationProps,
+} from "../components/checkout";
+import {
+  IkasCheckout,
+  IkasMerchantSettings,
+  IkasThemePageType,
+} from "../models";
+import { IkasCheckoutAPI } from "../api";
+import { IkasCheckoutSettings } from "../models/data/checkout-settings";
+import { IkasNextPageDataProvider } from "../providers/page-data-next";
+import { IkasStorefrontConfig } from "../storefront";
+import { useRouter } from "next/router";
+import { FullscreenLoading } from "../components/checkout/components/fullscreen-loading";
+import { initIkasEvents } from "../analytics/events";
+
+type Props = {
+  merchantSettingsStr: string | null;
+  checkoutSettingsStr: string | null;
+  customizationProps: IkasCheckoutCustomizationProps;
+  returnPolicy: string;
+  privacyPolicy: string;
+  termsOfService: string;
+  queryParams: ParsedUrlQuery;
+  configJson: Record<string, any>;
+};
+
+const CheckoutPage: React.FC<Props> = ({
+  merchantSettingsStr,
+  checkoutSettingsStr,
+  customizationProps,
+  configJson,
+  ...others
+}) => {
+  const router = useRouter();
+  const [checkout, setCheckout] = React.useState<IkasCheckout | undefined>();
+
+  IkasStorefrontConfig.initWithJson(configJson);
+  const { store } = IkasStorefrontConfig;
+  const checkoutSettings = React.useMemo(
+    () =>
+      checkoutSettingsStr
+        ? new IkasCheckoutSettings(JSON.parse(checkoutSettingsStr))
+        : new IkasCheckoutSettings(),
+    [checkoutSettingsStr]
+  );
+  const merchantSettings = React.useMemo(
+    () =>
+      merchantSettingsStr
+        ? new IkasMerchantSettings(JSON.parse(merchantSettingsStr))
+        : null,
+    [merchantSettingsStr]
+  );
+
+  React.useEffect(() => {
+    document.documentElement.style.setProperty(
+      "--checkout-button-bg-color",
+      customizationProps?.buttonBgColor || "#272727"
+    );
+    document.documentElement.style.setProperty(
+      "--checkout-button-text-color",
+      customizationProps?.buttonTextColor || "#FFFFFF"
+    );
+    document.documentElement.style.setProperty(
+      "--checkout-button-disabled-bg-color",
+      customizationProps?.buttonDisabledBgColor || "#F7F7F9"
+    );
+    document.documentElement.style.setProperty(
+      "--checkout-button-disabled-text-color",
+      customizationProps?.buttonDisabledTextColor || "#8A8B94"
+    );
+
+    document.documentElement.style.setProperty(
+      "--checkout-primary-text-color",
+      customizationProps?.primaryTextColor || "#272727"
+    );
+    document.documentElement.style.setProperty(
+      "--checkout-secondary-text-color",
+      customizationProps?.secondaryTextColor || "#8A8B94"
+    );
+
+    document.documentElement.style.setProperty(
+      "--checkout-primary-bg-color",
+      customizationProps?.primaryBgColor || "#FFFFFF"
+    );
+    document.documentElement.style.setProperty(
+      "--checkout-secondary-bg-color",
+      customizationProps?.secondaryBgColor || "#F7F7F9"
+    );
+    document.documentElement.style.setProperty(
+      "--checkout-border-color",
+      customizationProps?.borderColor || "#E5E4E9"
+    );
+    document.documentElement.style.setProperty(
+      "--checkout-card-bg-color",
+      customizationProps?.cardBgColor || "#F7F7F9"
+    );
+
+    document.documentElement.style.setProperty(
+      "--checkout-error-color",
+      customizationProps?.errorColor || "#FB4E4E"
+    );
+    document.documentElement.style.setProperty(
+      "--checkout-error-light-color",
+      customizationProps?.errorLightColor || "#FCF3F4"
+    );
+    document.documentElement.style.setProperty(
+      "--checkout-warning-color",
+      customizationProps?.warningColor || "#FFBC1F"
+    );
+    document.documentElement.style.setProperty(
+      "--checkout-warning-light-color",
+      customizationProps?.warningLightColor || "#FFFAEE"
+    );
+    document.documentElement.style.setProperty(
+      "--checkout-success-color",
+      customizationProps?.successColor || "#2DCA73"
+    );
+    document.documentElement.style.setProperty(
+      "--checkout-success-light-color",
+      customizationProps?.successLightColor || "#F6FFED"
+    );
+  }, [customizationProps]);
+
+  React.useEffect(() => {
+    store.checkLocalization();
+    getCheckout();
+    initIkasEvents();
+  }, []);
+
+  const getCheckout = React.useCallback(async () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const checkoutId = urlParams.get("id");
+
+    if (!checkoutId) {
+      return router.replace("/");
+    }
+
+    const checkout = await IkasCheckoutAPI.getCheckoutById(checkoutId);
+    if (checkout) {
+      setCheckout(checkout);
+    } else {
+      router.replace("/");
+    }
+  }, []);
+
+  if (!checkout) return <FullscreenLoading />;
+
+  return (
+    <IkasCheckoutPage
+      checkout={checkout}
+      merchantSettings={merchantSettings}
+      checkoutSettings={checkoutSettings}
+      customizationProps={customizationProps}
+      {...others}
+    />
+  );
+};
+
+export default observer(CheckoutPage);
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  return await IkasNextPageDataProvider.getStaticProps(
+    context,
+    IkasThemePageType.CHECKOUT
+  );
+};

package/src/pages/editor.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import dynamic from "next/dynamic";
+import { observer } from "mobx-react-lite";
+import { IkasNextPageDataProvider } from "../providers/page-data-next";
+import { GetStaticProps } from "next";
+import { IkasStorefrontConfig } from "../storefront";
+
+const IkasPageEditor = dynamic(
+  () =>
+    import("../components/page-editor").then(
+      (mod) => mod.IkasPageEditor
+    ) as any,
+  { ssr: false }
+);
+
+type Props = {
+  configJson: Record<string, any>;
+  components?: Record<string, any>;
+};
+
+const Page: React.FC<Props> = ({ configJson, components }) => {
+  if (configJson) {
+    IkasStorefrontConfig.initWithJson(configJson);
+  }
+  if (components) {
+    IkasStorefrontConfig.currentPageComponents = components;
+  }
+  return <IkasPageEditor />;
+};
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  return await IkasNextPageDataProvider.getStaticProps(
+    context,
+    undefined,
+    undefined,
+    true
+  );
+};
+
+export default observer(Page);

package/src/pages/home.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { GetStaticProps } from "next";
+import { IkasPage } from "../components";
+import { IkasThemePageType } from "../models";
+import { IkasNextPageDataProvider } from "../providers/page-data-next";
+import { IkasPageProps } from "../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} />;
+};
+
+export default observer(Page);
+
+export const getStaticProps: GetStaticProps = async (context) => {
+  return await IkasNextPageDataProvider.getStaticProps(
+    context,
+    IkasThemePageType.INDEX
+  );
+};

package/src/pages/index.ts

@@ -0,0 +1,22 @@
+export * as IndexPage from "./home";
+export * as SlugPage from "./[slug]";
+export * as CustomPage from "./pages/[slug]";
+export * as CheckoutPage from "./checkout";
+export * as AccountPage from "./account/index";
+export * as AddressesPage from "./account/addresses";
+export * as OrdersPage from "./account/orders";
+export * as OrderDetailPage from "./account/orders/[id]";
+export * as LoginPage from "./account/login";
+export * as RegisterPage from "./account/register";
+export * as ForgotPasswordPage from "./account/forgot-password";
+export * as RecoverPasswordPage from "./account/recover-password";
+export * as CartPage from "./cart";
+export * as EditorPage from "./editor";
+export * as FavoriteProductsPage from "./account/favorite-products";
+export * as SearchPage from "./search";
+export * as NotFoundPage from "./404";
+export * as BlogPage from "./blog";
+export * as BlogSlugPage from "./blog/[slug]";
+export * as RafflePage from "./raffle/[slug]";
+export * as RafflesPage from "./raffle/index";
+export * as AccountRafflesPage from "./account/raffles";