@ikas/storefront 4.0.0-alpha.50 → 4.0.0-alpha.52

package/src/components/page/head.tsx

@@ -1,370 +0,0 @@
-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(),
-    telephone: merchantSettings?.phone,
-    address: {
-      "@type": "PostalAddress",
-      streetAddress: merchantSettings.address?.addressLine1,
-      addressLocality: merchantSettings.address?.city?.name,
-      ...(merchantSettings.address &&
-        merchantSettings.address.state && {
-          addressRegion: merchantSettings.address.state.code,
-        }),
-      postalCode: merchantSettings.address?.postalCode,
-      addressCountry: merchantSettings.address?.country?.code,
-    },
-  };
-}
-
-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

@@ -1,220 +0,0 @@
-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";
-import { setAPIClientConfig } from "@ikas/storefront-api";
-
-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();
-
-    IkasStorefrontConfig.init({
-      ...configJson,
-      currentPageComponents: components,
-    });
-    IkasBaseStore.getInstance().router = router;
-    setAPIClientConfig();
-
-    const store = IkasBaseStore.getInstance();
-    store.router = router;
-    store.currentPageType = pageType;
-
-    const [isBrowser, setIsBrowser] = React.useState(false);
-    const _propValues = React.useMemo(() => {
-      IkasPageDataInit.setPageSpecificData(
-        pageSpecificData,
-        pageType,
-        isBrowser
-      );
-      return IkasPageDataInit.initPagePropValues(
-        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, pageSpecificData]); // Not IkasPageDataInit.pageSpecificData on purpose
-
-    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;
-
-      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);
-  }
-}