@ikas/storefront 4.0.0-alpha.59 → 4.0.0-alpha.6

package/src/pages/404.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import Error from "next/error.js";
+import { IkasPage, IkasPageProps } from "../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  if (!props.propValues) return <Error statusCode={404} />;
+  return <IkasPage {...props} />;
+};
+
+export default Page;

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { IkasPage, IkasPageProps } from "../../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} addOgpMetas={true} reInitOnBrowser={true} />;
+};
+
+export default observer(Page);

package/src/pages/account/addresses.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+
+import { IkasPage, IkasPageProps } from "../../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} />;
+};
+
+export default observer(Page);

package/src/pages/account/favorite-products.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { IkasPage, IkasPageProps } from "../../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} />;
+};
+
+export default observer(Page);

package/src/pages/account/forgot-password.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { IkasPage, IkasPageProps } from "../../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} />;
+};
+
+export default observer(Page);

package/src/pages/account/index.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { IkasPage, IkasPageProps } from "../../components/page";
+import { observer } from "mobx-react-lite";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} />;
+};
+
+export default observer(Page);

package/src/pages/account/login.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { IkasPage, IkasPageProps } from "../../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} />;
+};
+
+export default observer(Page);

package/src/pages/account/orders/[id].tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { IkasPage, IkasPageProps } from "../../../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} />;
+};
+
+export default observer(Page);

package/src/pages/account/orders/index.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { IkasPage, IkasPageProps } from "../../../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} addOgpMetas={true} />;
+};
+
+export default observer(Page);

package/src/pages/account/raffles.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { IkasPage, IkasPageProps } from "../../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} />;
+};
+
+export default observer(Page);

package/src/pages/account/recover-password.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { IkasPage, IkasPageProps } from "../../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} />;
+};
+
+export default observer(Page);

package/src/pages/account/register.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { IkasPage, IkasPageProps } from "../../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} />;
+};
+
+export default observer(Page);

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { IkasPage, IkasPageProps } from "../../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} addOgpMetas={true} reInitOnBrowser={true} />;
+};
+
+export default observer(Page);

package/src/pages/blog/index.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { IkasPage, 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);

package/src/pages/cart.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { IkasPage, IkasPageProps } from "../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} />;
+};
+
+export default observer(Page);

package/src/pages/checkout.tsx

@@ -0,0 +1,163 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { ParsedUrlQuery } from "querystring";
+
+import IkasCheckoutPage, {
+  IkasCheckoutCustomizationProps,
+} from "../components/checkout";
+
+import { useRouter } from "next/router.js";
+import { FullscreenLoading } from "../components/checkout/components/fullscreen-loading";
+import { CheckoutStep } from "../components/checkout/model";
+import { getCartById } from "@ikas/storefront-api";
+import { IkasStorefrontConfig } from "@ikas/storefront-config";
+import { IkasBaseStore } from "..";
+import { IkasCheckout, IkasCheckoutSettings } from "../models/data";
+import { initIkasEvents } from "../analytics/events";
+
+type Props = {
+  checkoutSettings: IkasCheckoutSettings;
+  customizationProps: IkasCheckoutCustomizationProps;
+  returnPolicy: string;
+  privacyPolicy: string;
+  termsOfService: string;
+  queryParams: ParsedUrlQuery;
+  configJson: Record<string, any>;
+};
+
+const CheckoutPage: React.FC<Props> = ({
+  checkoutSettings,
+  customizationProps,
+  configJson,
+  ...others
+}) => {
+  const router = useRouter();
+  const [checkout, setCheckout] = React.useState<IkasCheckout | undefined>();
+
+  IkasStorefrontConfig.init(configJson);
+
+  React.useEffect(() => {
+    setCustomizationProps(customizationProps);
+  }, [customizationProps]);
+
+  React.useEffect(() => {
+    IkasBaseStore.getInstance().checkLocalization();
+    getCheckout();
+    initIkasEvents();
+  }, []);
+
+  const getCheckout = React.useCallback(async () => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const cartId = urlParams.get("id");
+    const queryStep = urlParams.get("step");
+
+    if (!cartId) {
+      return router.replace("/");
+    }
+
+    let getCompletedCart = false;
+
+    if (queryStep) {
+      const step = queryStep as CheckoutStep;
+      if (step === CheckoutStep.SUCCESS) {
+        getCompletedCart = true;
+      }
+    }
+
+    const getCartResponse = await getCartById({
+      id: cartId,
+      getCompletedCart,
+    });
+    if (getCartResponse.isSuccess && getCartResponse.data) {
+      const checkout = getCartResponse.data;
+      setCheckout(new IkasCheckout(checkout));
+    } else {
+      router.replace("/");
+    }
+  }, []);
+
+  if (!checkout) return <FullscreenLoading />;
+
+  return (
+    <IkasCheckoutPage
+      checkout={checkout}
+      checkoutSettings={checkoutSettings}
+      customizationProps={customizationProps}
+      {...others}
+    />
+  );
+};
+
+export default observer(CheckoutPage);
+
+function setCustomizationProps(
+  customizationProps: IkasCheckoutCustomizationProps
+) {
+  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"
+  );
+}

package/src/pages/editor.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import dynamic from "next/dynamic.js";
+import { IkasStorefrontConfig } from "@ikas/storefront-config";
+
+const IkasPageEditor = dynamic(
+  () => import("../components/page-editor").then((mod) => mod.default) as any,
+  { ssr: false }
+);
+
+type Props = {
+  configJson: Record<string, any>;
+  components?: Record<string, any>;
+};
+
+export default class Page extends React.Component<Props> {
+  componentDidMount() {
+    const { configJson, components } = this.props;
+
+    if (configJson) {
+      IkasStorefrontConfig.init({
+        ...configJson,
+        currentPageComponents: components || {},
+      });
+    }
+  }
+
+  render() {
+    return <IkasPageEditor />;
+  }
+}

package/src/pages/home.tsx

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+
+import { IkasPage, IkasPageProps } from "../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} />;
+};
+
+export default observer(Page);

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";

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { IkasPage, IkasPageProps } from "../../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} />;
+};
+
+export default observer(Page);

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

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { IkasPage, IkasPageProps } from "../../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} />;
+};
+
+export default observer(Page);

package/src/pages/raffle/index.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { IkasPage, 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);

package/src/pages/search.tsx

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { IkasPage, IkasPageProps } from "../components/page";
+
+const Page: React.FC<IkasPageProps> = (props) => {
+  return <IkasPage {...props} addOgpMetas={true} reInitOnBrowser={true} />;
+};
+
+export default observer(Page);

package/src/store/base.ts

@@ -0,0 +1,238 @@
+import { configure, makeObservable, observable } from "mobx";
+import { enableStaticRendering } from "mobx-react-lite";
+import _sortBy from "lodash/sortBy";
+import _flatten from "lodash/flatten";
+
+import { IkasCartStore } from "./cart";
+import { IkasCustomerStore } from "./customer";
+
+import { IkasStorefrontRouting } from "../models/data/storefront/routing";
+import LocationStore from "./location";
+import { IkasThemeJsonPageType } from "@ikas/storefront-models";
+import { IkasStorefrontConfig } from "@ikas/storefront-config";
+import { NextRouter } from "next/router";
+import ProductStore from "./product";
+import { IkasCustomerReviewList } from "../models/ui";
+import { IkasCustomerReviewSummaryList } from "../models/ui";
+import { IkasProduct } from "../models/data";
+
+configure({
+  enforceActions: "never",
+});
+enableStaticRendering(typeof window === "undefined");
+
+export class IkasBaseStore {
+  readonly customerStore: IkasCustomerStore;
+  readonly cartStore: IkasCartStore;
+
+  currentPageType?: IkasThemeJsonPageType | null = null;
+  localeOptions: IkasLocaleOption[] = [];
+  showLocaleOptions = false;
+  currentCountryCode?: string | null = null;
+  spaLinksDisabled = false;
+  private localeChecked = false;
+  private static _instance: IkasBaseStore;
+  router?: NextRouter;
+
+  private constructor() {
+    this.customerStore = new IkasCustomerStore(this);
+    this.cartStore = new IkasCartStore(this);
+
+    if (typeof window !== "undefined") {
+      this.spaLinksDisabled = navigator.userAgent.includes("Instagram");
+    }
+
+    this.init();
+
+    makeObservable(this, {
+      currentPageType: observable,
+      localeOptions: observable,
+      showLocaleOptions: observable,
+      currentCountryCode: observable,
+      spaLinksDisabled: observable,
+    });
+  }
+
+  static getInstance() {
+    if (this._instance) return this._instance;
+    this._instance = new IkasBaseStore();
+    return this._instance;
+  }
+
+  async checkLocalization() {
+    if (this.localeChecked) return;
+    if (typeof window === "undefined") {
+      console.warn("checkLocalization should be called on the client side!");
+      return;
+    }
+
+    const getMyCountryResponse = await LocationStore.getMyCountry();
+    if (!getMyCountryResponse.isSuccess) return;
+
+    const myCountryCode = getMyCountryResponse.data;
+
+    const currentRouting = IkasStorefrontConfig.getCurrentRouting();
+    this.currentCountryCode = myCountryCode;
+
+    if (currentRouting && myCountryCode) {
+      let isCorrectLocale = true;
+
+      const myCountryRouting = IkasStorefrontConfig.getRoutings().find((r) =>
+        r.countryCodes?.includes(myCountryCode)
+      );
+      const otherCountriesRouting = IkasStorefrontConfig.getRoutings().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 localeOptions: IkasLocaleOption[] = [];
+      const iso2Codes = _flatten(
+        IkasStorefrontConfig.getRoutings().map((r) => r.countryCodes || [])
+      );
+      const countriesResponse = await LocationStore.listCountry({
+        iso2: { in: iso2Codes },
+      });
+
+      if (!countriesResponse.isSuccess) return;
+
+      const countries = countriesResponse.data || [];
+      IkasStorefrontConfig.getRoutings().map((r) => {
+        if (r.countryCodes?.length) {
+          r.countryCodes.forEach((countryCode) => {
+            const country = countries.find((c) => c.iso2 === countryCode);
+            localeOptions.push({
+              id: country?.iso2 || country?.iso3 || Date.now() + "",
+              countryName: country?.native || country?.name || "",
+              iso2: country?.iso2 || undefined,
+              iso3: country?.iso3 || undefined,
+              routing: r,
+              isRecommended: countryCode === myCountryCode,
+            });
+          });
+        } else {
+          localeOptions.push({
+            id: r.id,
+            routing: r,
+            isRecommended: !IkasStorefrontConfig.getRoutings().some((r) =>
+              r.countryCodes?.includes(myCountryCode)
+            ),
+          });
+        }
+      });
+
+      this.localeOptions = _sortBy(localeOptions, "countryName");
+
+      if (!isCorrectLocale) {
+        this.showLocaleOptions = true;
+      }
+
+      this.localeChecked = true;
+    }
+  }
+
+  downloadOrderLineFile = async (url: string) => {
+    const response = await ProductStore.getOrderLineFile({
+      input: {
+        url,
+      },
+    });
+    return response.data;
+  };
+
+  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 : "")
+      );
+    }
+  }
+
+  async getCustomerReviews(
+    product: IkasProduct,
+    params?: { limit?: number; page?: number }
+  ) {
+    const customerReviews = new IkasCustomerReviewList({
+      productId: product.id,
+      limit: params?.limit,
+      page: params?.page,
+    });
+
+    await customerReviews.getInitial();
+
+    return customerReviews;
+  }
+
+  async getCustomerReviewsSummary(
+    product: IkasProduct,
+    params?: { limit?: number; page?: number }
+  ) {
+    const customerReviewsSummary = new IkasCustomerReviewSummaryList({
+      productId: product.id,
+      limit: params?.limit,
+      page: params?.page,
+    });
+
+    await customerReviewsSummary.getInitial();
+
+    return customerReviewsSummary;
+  }
+
+  async getProductCampaigns(product: IkasProduct) {
+    const store = IkasBaseStore.getInstance();
+    const customer = store.customerStore.customer;
+    const customerGroupIds = customer ? customer.customerGroupIds : null;
+    const variantIds = product.variants.map((variant) => variant.id);
+
+    const response = await ProductStore.getProductCampaigns({
+      input: {
+        customerGroupIds: customerGroupIds,
+        salesChannelId: IkasStorefrontConfig.getSalesChannelId() || "",
+        variantIds: variantIds,
+      },
+    });
+
+    product.campaigns = response.data;
+
+    if (product.campaigns) {
+      product.campaigns.map((campaign) => {
+        product.variants.map((variant) => {
+          if (campaign.variantIds.some((vr) => vr === variant.id)) {
+            variant.campaigns?.push(campaign);
+          }
+        });
+      });
+    }
+  }
+
+  private init() {
+    //@ts-ignore
+    this.customerStore.init();
+  }
+}
+
+type IkasLocaleOption = {
+  readonly id: string;
+  readonly countryName?: string;
+  readonly iso2?: string;
+  readonly iso3?: string;
+  readonly routing: IkasStorefrontRouting;
+  readonly isRecommended: boolean;
+};