@ikas/storefront 4.0.0-alpha.78 → 4.0.0-alpha.8

package/src/components/page/head.tsx

@@ -0,0 +1,358 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import Head from "next/head.js";
+import { useRouter } from "next/router";
+import {
+  IkasCategory,
+  IkasCustomerReviewSummary,
+  IkasMerchantSettings,
+  IkasProduct,
+  IkasThemeJsonPageType,
+} from "../../models";
+import { IkasStorefrontConfig } from "@ikas/storefront-config";
+import { IkasPageDataInit } from "../../page-data-init";
+import { IkasBaseStore } from "../..";
+
+type OgpMeta = {
+  property: string;
+  content: string;
+};
+
+type Props = {
+  pageType: IkasThemeJsonPageType;
+  pageTitle?: string | null;
+  pageDescription?: string | null;
+  canonicals?: string[] | null;
+  disableIndex?: boolean | null;
+  pageSpecificData?: any;
+  merchantSettings?: IkasMerchantSettings | null;
+  addOgpMetas?: boolean;
+  productReviewSummary?: IkasCustomerReviewSummary | null;
+};
+
+export const IkasPageHead: React.FC<Props> = observer(
+  ({
+    pageType,
+    pageTitle,
+    pageDescription,
+    canonicals,
+    disableIndex,
+    pageSpecificData,
+    merchantSettings,
+    addOgpMetas,
+    productReviewSummary,
+  }) => {
+    const router = useRouter();
+    const isBrowser = typeof window !== "undefined";
+    const isLocal = process.env.NEXT_PUBLIC_ENV === "local";
+    const currentPath = router.asPath.split("?")[0].replace("/", "");
+    const otherRoutings = IkasStorefrontConfig.getRoutings().filter(
+      (r) => r.id !== IkasStorefrontConfig.getStorefrontRoutingId()
+    );
+    const currentRouting = IkasStorefrontConfig.getCurrentRouting();
+    const currentRoutingPath = currentRouting?.path
+      ? "/" + currentRouting.path
+      : "";
+    const domain = isLocal
+      ? "http://localhost:3333"
+      : "https://" + IkasStorefrontConfig.getDomain();
+
+    // NextJS sets the lang with routing ids, this overrides it with the locale
+    React.useEffect(() => {
+      document.documentElement.lang = IkasStorefrontConfig.getCurrentLocale();
+    }, [pageType, pageSpecificData]);
+
+    const href = React.useMemo(() => {
+      if (pageSpecificData && (pageSpecificData as any).href) {
+        return `${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.getDomain(),
+        });
+
+        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.getDomain()}`,
+        });
+
+        if (pageSpecificData && pageType === IkasThemeJsonPageType.PRODUCT) {
+          const product = pageSpecificData as IkasProduct;
+          const selectedVariant = product.selectedVariant;
+          const mainImage = selectedVariant.mainImage;
+
+          if (mainImage?.image) {
+            ogpMetas.push({
+              property: "og:image",
+              content: mainImage.image.src,
+            });
+          }
+        } else if (merchantSettings?.logo) {
+          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 === IkasThemeJsonPageType.PRODUCT) {
+        const productDetail = pageSpecificData as IkasProduct;
+        const schema = createProductSchema(
+          productDetail,
+          productReviewSummary || null
+        );
+
+        if (schema) schemas.push(schema);
+        if (productDetail.categories.length) {
+          const categoryBreadcrumbSchema = createCategoryBreadcrumbSchema(
+            productDetail.categories[0]
+          );
+          if (categoryBreadcrumbSchema) schemas.push(categoryBreadcrumbSchema);
+        }
+      }
+
+      if (pageSpecificData && pageType === IkasThemeJsonPageType.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 || ""} />
+        {otherRoutings.map((routing) => (
+          <link
+            key={routing.id}
+            rel="alternate"
+            hrefLang={routing.locale}
+            href={`${
+              domain + (routing.path ? "/" + routing.path : "")
+            }/${currentPath}`}
+          />
+        ))}
+        {!!currentRouting && !!otherRoutings.length && (
+          <link
+            key={"current-routing-hreflang"}
+            rel="alternate"
+            hrefLang={currentRouting.locale}
+            href={`${domain}${currentRoutingPath}/${currentPath}`}
+          />
+        )}
+        {!!disableIndex && <meta name="robots" content="noindex" />}
+        {!!addOgpMetas &&
+          ogpMetas.map((ogpMeta, index) => (
+            <meta
+              key={`${ogpMeta.content}-${index}`}
+              property={ogpMeta.property}
+              content={ogpMeta.content}
+            />
+          ))}
+        {!!canonicals &&
+          canonicals.map((url, index) => (
+            <link
+              key={index + "url"}
+              rel="canonical"
+              href={`${domain}${currentRoutingPath}${url}`}
+            />
+          ))}
+        <link
+          rel="canonical"
+          href={`${domain}${currentRoutingPath}/${currentPath}`}
+        />
+        {!!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.getDomain(),
+  };
+}
+
+function createStoreSchema(merchantSettings: IkasMerchantSettings) {
+  const logo = merchantSettings?.logo ? merchantSettings.logo.src : undefined;
+
+  return {
+    "@context": "https://schema.org",
+    "@type": "Store",
+    name: merchantSettings?.merchantName,
+    logo: logo,
+    image: logo,
+    url: "https://" + IkasStorefrontConfig.getDomain(),
+  };
+}
+
+function createProductSchema(
+  product: IkasProduct,
+  productReviewSummary: IkasCustomerReviewSummary | null
+) {
+  try {
+    const productUrl = `https://${IkasStorefrontConfig.getDomain()}${
+      product.href
+    }`;
+
+    const selectedVariant = product.selectedVariant;
+
+    return {
+      "@context": "https://schema.org/",
+      "@type": "Product",
+      name: product.name,
+      description: product.metaData?.description,
+      image: selectedVariant.images?.map((i) => (i.image ? i.image.src : "")),
+      productId: selectedVariant.id,
+      sku: selectedVariant.sku,
+      mpn: selectedVariant.barcodeList?.length
+        ? selectedVariant.barcodeList[0]
+        : "",
+      brand: {
+        "@type": "Brand",
+        name: product.brand?.name,
+      },
+      ...(productReviewSummary && {
+        aggregateRating: {
+          "@type": "AggregateRating",
+          ratingValue: productReviewSummary.averageStar,
+          reviewCount: productReviewSummary.totalReview,
+        },
+      }),
+      offers: {
+        "@type": "Offer",
+        url: productUrl,
+        priceCurrency: selectedVariant.price.currency || "TRY",
+        price: selectedVariant.price.finalPrice,
+        priceValidUntil: "",
+        itemCondition: "https://schema.org/NewCondition",
+        availability:
+          selectedVariant.stock > 0
+            ? "https://schema.org/InStock"
+            : "https://schema.org/OutOfStock",
+      },
+    };
+  } catch (err) {}
+}
+
+function createCategorySchema(category: IkasCategory) {
+  try {
+    const categoryUrl = `https://${IkasStorefrontConfig.getDomain()}${
+      category.href
+    }`;
+
+    return {
+      "@context": "http://schema.org",
+      "@type": "CollectionPage",
+      url: categoryUrl,
+      name: category.metaData?.pageTitle,
+      description: category.metaData?.description,
+      image: category.image ? category.image.src : undefined,
+    };
+  } catch {}
+}
+
+function createCategoryBreadcrumbSchema(category: IkasCategory) {
+  try {
+    const store = IkasBaseStore.getInstance();
+    const schema = category.categoryPathItems.map((categoryPath, index) => ({
+      "@type": "ListItem",
+      position: index + 1,
+      name: categoryPath.name,
+      item: "https://" + IkasStorefrontConfig.getDomain() + categoryPath.href,
+    }));
+
+    if (store.currentPageType === IkasThemeJsonPageType.CATEGORY) {
+      schema.push({
+        "@type": "ListItem",
+        position: category.categoryPathItems.length + 1,
+        name: category.name,
+        item: "https://" + IkasStorefrontConfig.getDomain() + category.href,
+      });
+    }
+
+    return {
+      "@context": "http://schema.org",
+      "@type": "BreadcrumbList",
+      itemListElement: category.categoryPathItems.length
+        ? schema
+        : [
+            {
+              "@type": "ListItem",
+              position: 1,
+              name: category.name,
+              item:
+                "https://" + IkasStorefrontConfig.getDomain() + category.href,
+            },
+          ],
+    };
+  } catch {}
+}

package/src/components/page/index.tsx

@@ -0,0 +1,219 @@
+import * as React from "react";
+import { observer } from "mobx-react-lite";
+import { useRouter } from "next/router.js";
+
+import { IkasPageComponentPropValue } from "@ikas/storefront-providers";
+import {
+  IkasCategory,
+  IkasCustomerReviewSummary,
+  IkasMerchantSettings,
+  IkasProduct,
+  IkasThemeJsonPageType,
+  IkasThemeJsonSettings,
+} from "../../models";
+import { IkasStorefrontConfig } from "@ikas/storefront-config";
+
+import { Analytics } from "../../analytics";
+import { IkasPageHead } from "./head";
+import { ThemeComponent } from "./ThemeComponent";
+import { IkasBaseStore } from "../../store";
+import { initIkasEvents } from "../../analytics/events";
+import { IkasPageDataInit } from "../../page-data-init";
+
+export type IkasPageProps = {
+  propValues: IkasPageComponentPropValue[];
+  pageSpecificData: any;
+  pageType: IkasThemeJsonPageType;
+  pageTitle: string | null;
+  pageDescription?: string;
+  canonicals?: string[] | null;
+  disableIndex?: boolean | null;
+  settings: IkasThemeJsonSettings;
+  merchantSettings: IkasMerchantSettings;
+  configJson: Record<string, any>;
+  reInitOnBrowser?: boolean;
+  addOgpMetas?: boolean;
+  components?: Record<string, any>;
+  productReviewSummary: IkasCustomerReviewSummary | null;
+};
+
+export const IkasPage: React.FC<IkasPageProps> = observer(
+  ({
+    propValues,
+    pageType,
+    pageTitle,
+    pageDescription,
+    pageSpecificData,
+    canonicals,
+    disableIndex,
+    settings,
+    merchantSettings,
+    configJson,
+    reInitOnBrowser,
+    addOgpMetas,
+    components,
+    productReviewSummary,
+  }) => {
+    const router = useRouter();
+    const store = IkasBaseStore.getInstance();
+    store.router = router;
+
+    IkasStorefrontConfig.init({
+      ...configJson,
+      currentPageComponents: components,
+    });
+    IkasBaseStore.getInstance().router = router;
+
+    store.currentPageType = pageType;
+
+    const [isBrowser, setIsBrowser] = React.useState(false);
+    const _propValues = React.useMemo(() => {
+      IkasPageDataInit.setPageSpecificData(
+        pageSpecificData,
+        pageType,
+        isBrowser
+      );
+      return IkasPageDataInit.initPropValues(propValues, settings, isBrowser);
+    }, [isBrowser, propValues, pageType, settings, pageSpecificData]);
+
+    React.useEffect(() => {
+      if (reInitOnBrowser) setIsBrowser(typeof window !== "undefined");
+
+      store.cartStore.getCart();
+      store.checkLocalization();
+      initIkasEvents();
+    }, []);
+
+    React.useEffect(() => {
+      const handleRouteChange = () => {
+        //@ts-ignore
+        store.customerStore.routeChangeInit();
+      };
+
+      router.events.on("routeChangeStart", handleRouteChange);
+
+      return () => {
+        router.events.off("routeChangeStart", handleRouteChange);
+      };
+    }, []);
+
+    React.useEffect(() => {
+      handleAnalytics(pageType, IkasPageDataInit.pageSpecificData);
+    }, [pageType, IkasPageDataInit.pageSpecificData]);
+
+    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}
+          pageSpecificData={IkasPageDataInit.pageSpecificData}
+          canonicals={canonicals}
+          disableIndex={disableIndex}
+          merchantSettings={merchantSettings}
+          addOgpMetas={addOgpMetas}
+          productReviewSummary={productReviewSummary}
+        />
+        {renderedComponents}
+      </React.Fragment>
+    );
+  }
+);
+
+export const renderComponent = (
+  pageComponentPropValue: IkasPageComponentPropValue,
+  settings: IkasThemeJsonSettings,
+  index: number
+) => {
+  return (
+    <ThemeComponent
+      key={pageComponentPropValue.pageComponent.id}
+      index={index}
+      pageComponentPropValue={pageComponentPropValue}
+      settings={settings}
+    />
+  );
+};
+
+async function handleAnalytics(
+  pageType: IkasThemeJsonPageType,
+  pageSpecificData: any
+) {
+  const store = IkasBaseStore.getInstance();
+  Analytics.pageView(pageType);
+
+  try {
+    if (pageType === IkasThemeJsonPageType.PRODUCT) {
+      const product = pageSpecificData as IkasProduct;
+
+      const isBrowser = typeof window !== "undefined";
+      // if (isBrowser) {
+      //   IkasPageDataInit._initProductOnBrowser(product);
+      // }
+
+      Analytics.productView(product);
+
+      //@ts-ignore
+      store.customerStore.onProductView(product.id, product.selectedVariant.id);
+    }
+
+    if (pageType === IkasThemeJsonPageType.CATEGORY) {
+      const category = pageSpecificData as IkasCategory;
+
+      let categoryPath = category.categoryPathItems
+        ?.map((cat) => cat.name)
+        .join(" > ");
+      if (
+        category.categoryPathItems &&
+        category.categoryPathItems?.length > 0
+      ) {
+        categoryPath = categoryPath + " > " + category.name;
+      } else {
+        categoryPath = category.name;
+      }
+      Analytics.viewCategory(categoryPath, category);
+    }
+
+    if (pageType === IkasThemeJsonPageType.CART) {
+      await store.cartStore.waitUntilInitialized();
+      Analytics.viewCart(store.cartStore.cart);
+    }
+  } catch (err) {
+    console.error(err);
+  }
+}