@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/components/page/head.tsx

@@ -0,0 +1,294 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import Head from "next/head";
+import {
+  IkasBrand,
+  IkasCategory,
+  IkasMerchantSettings,
+  IkasProductDetail,
+  IkasThemePageType,
+} from "../../models";
+import { IkasStorefrontConfig } from "../../storefront";
+import { IkasPageDataInit } from "../../providers/page-data-init";
+
+type OgpMeta = {
+  property: string;
+  content: string;
+};
+
+type Props = {
+  pageType: IkasThemePageType;
+  pageTitle?: string | null;
+  pageDescription?: string | null;
+  pageSpecificDataStr?: string;
+  merchantSettingsStr?: string;
+  addOgpMetas?: boolean;
+};
+
+export const IkasPageHead: React.FC<Props> = observer(
+  ({
+    pageType,
+    pageTitle,
+    pageDescription,
+    pageSpecificDataStr,
+    merchantSettingsStr,
+    addOgpMetas,
+  }) => {
+    const isBrowser = typeof window !== "undefined";
+
+    // NextJS sets the lang with routing ids, this overrides it with the locale
+    React.useEffect(() => {
+      document.documentElement.lang =
+        IkasStorefrontConfig.routings.find(
+          (r) => r.id === IkasStorefrontConfig.storefrontRoutingId!
+        )?.locale || "tr";
+    }, [pageType]);
+
+    const merchantSettings = React.useMemo(() => {
+      if (merchantSettingsStr)
+        return new IkasMerchantSettings(JSON.parse(merchantSettingsStr));
+    }, [merchantSettingsStr]);
+
+    const pageSpecificData = React.useMemo(() => {
+      if (!pageSpecificDataStr) return pageSpecificDataStr;
+
+      const parsedData = JSON.parse(pageSpecificDataStr) as any;
+
+      switch (pageType) {
+        case IkasThemePageType.PRODUCT:
+          return new IkasProductDetail(
+            parsedData.product,
+            parsedData.selectedVariantValues
+          );
+
+        case IkasThemePageType.CATEGORY:
+          return new IkasCategory(parsedData);
+
+        case IkasThemePageType.BRAND:
+          return new IkasBrand(parsedData);
+
+        default:
+          return pageSpecificDataStr;
+      }
+    }, [pageSpecificDataStr]);
+
+    const href = React.useMemo(() => {
+      if (pageSpecificData && (pageSpecificData as any).href) {
+        return `https://${IkasStorefrontConfig.domain}${
+          (pageSpecificData as any).href
+        }`;
+      }
+    }, [pageSpecificData]);
+
+    const ogpMetas: OgpMeta[] = React.useMemo(() => {
+      const ogpMetas: OgpMeta[] = [];
+
+      if (addOgpMetas) {
+        ogpMetas.push({
+          property: "og:type",
+          content: "website",
+        });
+
+        ogpMetas.push({
+          property: "og:site_name",
+          content: "https://" + IkasStorefrontConfig.domain,
+        });
+
+        if (pageTitle) {
+          ogpMetas.push({
+            property: "og:title",
+            content: pageTitle,
+          });
+        }
+
+        if (pageDescription) {
+          ogpMetas.push({
+            property: "og:description",
+            content: pageDescription,
+          });
+        }
+
+        ogpMetas.push({
+          property: "og:url",
+          content:
+            href ||
+            (isBrowser ? window.location.href : "") ||
+            `https://${IkasStorefrontConfig.domain}`,
+        });
+
+        if (pageSpecificData && pageType === IkasThemePageType.PRODUCT) {
+          const productDetail = pageSpecificData as IkasProductDetail;
+
+          if (productDetail.selectedVariant.mainImage) {
+            ogpMetas.push({
+              property: "og:image",
+              content: productDetail.selectedVariant.mainImage?.src,
+            });
+          }
+        } else if (merchantSettings) {
+          ogpMetas.push({
+            property: "og:image",
+            content: merchantSettings.logo.src,
+          });
+        }
+      }
+
+      return ogpMetas;
+    }, [
+      pageTitle,
+      pageSpecificData,
+      href,
+      pageDescription,
+      merchantSettings,
+      addOgpMetas,
+      merchantSettings,
+    ]);
+
+    const schemas = React.useMemo(() => {
+      const schemas = [];
+
+      if (merchantSettings) {
+        const websiteSchema = createWebsiteSchema();
+        const storeSchema = createStoreSchema(merchantSettings);
+        schemas.push(websiteSchema);
+        schemas.push(storeSchema);
+      }
+
+      if (pageSpecificData && pageType === IkasThemePageType.PRODUCT) {
+        const productDetail = pageSpecificData as IkasProductDetail;
+        const schema = createProductSchema(productDetail);
+
+        if (schema) schemas.push(schema);
+      }
+
+      if (pageSpecificData && pageType === IkasThemePageType.CATEGORY) {
+        const categorySchema = createCategorySchema(
+          pageSpecificData as IkasCategory
+        );
+        const categoryBreadcrumbSchema = createCategoryBreadcrumbSchema(
+          pageSpecificData as IkasCategory
+        );
+
+        if (categorySchema) schemas.push(categorySchema);
+        if (categoryBreadcrumbSchema) schemas.push(categoryBreadcrumbSchema);
+      }
+
+      return schemas;
+    }, [pageSpecificData, merchantSettings]);
+
+    return (
+      <Head>
+        <title>{pageTitle || ""}</title>
+        <meta name="description" content={pageDescription || ""} />
+        {!!addOgpMetas &&
+          ogpMetas.map((ogpMeta, index) => (
+            <meta
+              key={`${ogpMeta.content}-${index}`}
+              property={ogpMeta.property}
+              content={ogpMeta.content}
+            />
+          ))}
+        {!!schemas.length &&
+          schemas.map((schema, index) => (
+            <script
+              key={index}
+              type="application/ld+json"
+              dangerouslySetInnerHTML={{
+                __html: JSON.stringify(schema),
+              }}
+            />
+          ))}
+      </Head>
+    );
+  }
+);
+
+function createWebsiteSchema() {
+  return {
+    "@context": "https://schema.org",
+    "@type": "Website",
+    url: "https://" + IkasStorefrontConfig.domain,
+  };
+}
+
+function createStoreSchema(merchantSettings: IkasMerchantSettings) {
+  return {
+    "@context": "https://schema.org",
+    "@type": "Store",
+    name: merchantSettings?.merchantName,
+    logo: merchantSettings?.logo?.src,
+    image: merchantSettings?.logo?.src,
+    url: "https://" + IkasStorefrontConfig.domain,
+  };
+}
+
+function createProductSchema(productDetail: IkasProductDetail) {
+  try {
+    const isBrowser = typeof window !== "undefined";
+
+    if (isBrowser) {
+      IkasPageDataInit._initProductDetailOnBrowser(productDetail);
+    }
+
+    const productUrl = `https://${IkasStorefrontConfig.domain}${productDetail.href}`;
+
+    return {
+      "@context": "https://schema.org/",
+      "@type": "Product",
+      name: productDetail.product.name,
+      description: productDetail.product.metaData?.description,
+      image: productDetail.selectedVariant.images.map((i) => i.src),
+      productId: productDetail.selectedVariant.id,
+      sku: productDetail.selectedVariant.sku,
+      mpn: productDetail.selectedVariant.barcodeList.length
+        ? productDetail.selectedVariant.barcodeList[0]
+        : "",
+      brand: {
+        "@type": "Brand",
+        name: productDetail.product.brand?.name,
+      },
+      offers: {
+        "@type": "Offer",
+        url: productUrl,
+        priceCurrency: productDetail.selectedVariant.price.currency || "TRY",
+        price: productDetail.selectedVariant.price.finalPrice,
+        priceValidUntil: "",
+        itemCondition: "https://schema.org/NewCondition",
+        availability:
+          productDetail.selectedVariant.stock > 0
+            ? "https://schema.org/InStock"
+            : "https://schema.org/OutOfStock",
+      },
+    };
+  } catch (err) {}
+}
+
+function createCategorySchema(category: IkasCategory) {
+  try {
+    const categoryUrl = `https://${IkasStorefrontConfig.domain}${category.href}`;
+
+    return {
+      "@context": "http://schema.org",
+      "@type": "CollectionPage",
+      url: categoryUrl,
+      name: category.metaData?.pageTitle,
+      description: category.metaData?.description,
+      image: category.image?.src,
+    };
+  } catch {}
+}
+
+function createCategoryBreadcrumbSchema(category: IkasCategory) {
+  try {
+    return {
+      "@context": "http://schema.org",
+      "@type": "BreadcrumbList",
+      itemListElement: category.path.map((categoryPath, index) => ({
+        "@type": "ListItem",
+        position: index + 1,
+        name: categoryPath.name,
+        item: "https://" + IkasStorefrontConfig.domain + categoryPath.href,
+      })),
+    };
+  } catch {}
+}

package/src/components/page/index.tsx

@@ -0,0 +1,216 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router";
+import {
+  IkasCategory,
+  IkasProductDetail,
+  IkasThemePageType,
+  IkasThemeSettings,
+} from "../../models";
+import { Analytics } from "../../analytics";
+import { IkasPageDataInit } from "../../providers/page-data-init";
+import { ThemeComponent } from "./ThemeComponent";
+import { IkasPageHead } from "./head";
+import { IkasStorefrontConfig } from "../../storefront";
+import { IkasBaseStore } from "../../store";
+import { initIkasEvents } from "../../analytics/events";
+import { IkasPageComponentPropValue } from "../../providers/page-data-get";
+
+export type IkasPageProps = {
+  propValuesStr: string;
+  pageSpecificDataStr: string;
+  pageType: IkasThemePageType;
+  pageTitle: string | null;
+  pageDescription?: string;
+  settingsStr: string;
+  merchantSettingsStr: string;
+  configJson: Record<string, any>;
+  reInitOnBrowser?: boolean;
+  addOgpMetas?: boolean;
+  components?: Record<string, any>;
+};
+
+export const IkasPage: React.FC<IkasPageProps> = observer(
+  ({
+    propValuesStr,
+    pageType,
+    pageTitle,
+    pageDescription,
+    pageSpecificDataStr,
+    settingsStr,
+    merchantSettingsStr,
+    configJson,
+    reInitOnBrowser,
+    addOgpMetas,
+    components,
+  }) => {
+    IkasStorefrontConfig.initWithJson(configJson);
+    IkasStorefrontConfig.currentPageComponents = components;
+
+    const { store } = IkasStorefrontConfig;
+    store.currentPageType = pageType;
+
+    const router = useRouter();
+    const [isBrowser, setIsBrowser] = React.useState(false);
+    const [settings] = React.useState(
+      new IkasThemeSettings(JSON.parse(settingsStr))
+    );
+    const propValues = React.useMemo(() => {
+      IkasPageDataInit.setPageSpecificData(
+        pageSpecificDataStr,
+        pageType,
+        isBrowser
+      );
+      return IkasPageDataInit.initPropValues(
+        propValuesStr,
+        router,
+        settingsStr,
+        true,
+        isBrowser
+      );
+    }, [isBrowser, propValuesStr, pageType, settingsStr, pageSpecificDataStr]);
+
+    React.useEffect(() => {
+      if (reInitOnBrowser) setIsBrowser(typeof window !== "undefined");
+
+      //@ts-ignore
+      store.cartStore.getCart();
+      store.checkLocalization();
+      initIkasEvents();
+    }, []);
+
+    React.useEffect(() => {
+      const handleRouteChange = () => {
+        //@ts-ignore
+        IkasStorefrontConfig.store.customerStore.routeChangeInit();
+      };
+
+      router.events.on("routeChangeStart", handleRouteChange);
+
+      return () => {
+        router.events.off("routeChangeStart", handleRouteChange);
+      };
+    }, []);
+
+    React.useEffect(() => {
+      handleAnalytics(pageType, pageSpecificDataStr, store);
+    }, [pageType, pageSpecificDataStr, propValues]); // propValues here to reinit on browser
+
+    const renderedComponents = React.useMemo(() => {
+      const headerComponentPropValue = propValues.find(
+        (pv) => pv.component.isHeader
+      );
+      const footerComponentPropValue = propValues.find(
+        (pv) => pv.component.isFooter
+      );
+      const others =
+        propValues.filter(
+          (pv) => !pv.component.isHeader && !pv.component.isFooter
+        ) || [];
+
+      const pageStyle: React.CSSProperties = {
+        position: "relative",
+        minHeight: "100vh",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+      };
+
+      return (
+        <div style={pageStyle}>
+          <div>
+            {headerComponentPropValue &&
+              renderComponent(headerComponentPropValue, settings, -1)}
+            {others.map((pageComponentPropValue, index) =>
+              renderComponent(pageComponentPropValue, settings, index)
+            )}
+          </div>
+          {footerComponentPropValue &&
+            renderComponent(footerComponentPropValue, settings, -1)}
+        </div>
+      );
+    }, [propValues, settings]);
+
+    return (
+      <React.Fragment>
+        <IkasPageHead
+          pageType={pageType}
+          pageTitle={pageTitle}
+          pageDescription={pageDescription}
+          pageSpecificDataStr={pageSpecificDataStr}
+          merchantSettingsStr={merchantSettingsStr}
+          addOgpMetas={addOgpMetas}
+        />
+        {renderedComponents}
+      </React.Fragment>
+    );
+  }
+);
+
+export const renderComponent = (
+  pageComponentPropValue: IkasPageComponentPropValue,
+  settings: IkasThemeSettings,
+  index: number
+) => {
+  return (
+    <ThemeComponent
+      key={pageComponentPropValue.pageComponent.id}
+      index={index}
+      pageComponentPropValue={pageComponentPropValue}
+      settings={settings}
+    />
+  );
+};
+
+async function handleAnalytics(
+  pageType: IkasThemePageType,
+  pageSpecificDataStr: string,
+  store: IkasBaseStore
+) {
+  Analytics.pageView(pageType);
+
+  try {
+    if (pageType === IkasThemePageType.PRODUCT) {
+      const productDetailParsed = JSON.parse(
+        pageSpecificDataStr
+      ) as IkasProductDetail;
+
+      const productDetail = new IkasProductDetail(
+        productDetailParsed.product,
+        productDetailParsed.selectedVariantValues
+      );
+
+      const isBrowser = typeof window !== "undefined";
+      if (isBrowser) {
+        IkasPageDataInit._initProductDetailOnBrowser(productDetail);
+      }
+
+      Analytics.productView(productDetail);
+
+      // @ts-ignore
+      IkasStorefrontConfig.store.customerStore.onProductView(
+        productDetail.product.id,
+        productDetail.selectedVariant.id
+      );
+    }
+
+    if (pageType === IkasThemePageType.CATEGORY) {
+      const category = JSON.parse(pageSpecificDataStr) as IkasCategory;
+
+      let categoryPath = category.path.map((cat) => cat.name).join(" > ");
+      if (category.path.length > 0) {
+        categoryPath = categoryPath + " > " + category.name;
+      } else {
+        categoryPath = category.name;
+      }
+      Analytics.viewCategory(categoryPath, category);
+    }
+
+    if (pageType === IkasThemePageType.CART) {
+      await store.cartStore.waitUntilInitialized();
+      Analytics.viewCart(store.cartStore.cart);
+    }
+  } catch (err) {
+    console.error(err);
+  }
+}