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

package/src/components/page-editor/ThemeComponentEditor.tsx

@@ -1,281 +0,0 @@
-import * as React from "react";
-import ErrorComponent from "./error";
-import IkasPageEditorViewModel from "./model";
-import { computed, makeObservable } from "mobx";
-import { IkasCheckoutPageProps } from "../checkout";
-import IkasCheckoutPage from "../../components/checkout";
-import { Observer } from "mobx-react-lite";
-import {
-  IkasCheckoutRequirement,
-  IkasOrderLineItemStatus,
-  IkasThemeJsonComponentPropType,
-  IkasThemeJsonPageComponent,
-  IkasThemeJsonPageType,
-} from "../../models";
-import { IkasStorefrontConfig } from "@ikas/storefront-config";
-import { IkasPageDataInit } from "../../page-data-init";
-import { IkasBaseStore } from "../../store";
-import {
-  IkasCheckout,
-  IkasOrderLineItem,
-  IkasCheckoutSettings,
-} from "../../models/data";
-
-type Props = {
-  vm: IkasPageEditorViewModel;
-  pageComponent: IkasThemeJsonPageComponent;
-};
-
-export class ThemeEditorComponent extends React.Component<Props> {
-  ref: React.RefObject<HTMLDivElement>;
-  error: any;
-  state = { hasError: false };
-
-  constructor(props: Props) {
-    super(props);
-    this.ref = React.createRef();
-
-    makeObservable(this, {
-      pageComponentPropValue: computed,
-      propValues: computed,
-      isSelected: computed,
-      isHovered: computed,
-      hasNullValue: computed,
-      rendered: computed,
-      Component: computed,
-    });
-  }
-
-  componentDidMount() {
-    const { vm, pageComponent } = this.props;
-    vm.setComponentRef(this.ref.current as any, pageComponent);
-  }
-
-  componentDidUpdate() {
-    const { vm, pageComponent } = this.props;
-    vm.setComponentRef(this.ref.current as any, pageComponent);
-  }
-
-  static getDerivedStateFromError(error: any) {
-    console.error(error);
-    return { hasError: true };
-  }
-
-  get pageComponentPropValue() {
-    const { vm, pageComponent } = this.props;
-
-    return vm.initializedPropValues.find(
-      (pc) => pc.pageComponent.id === pageComponent.id
-    );
-  }
-
-  get propValues() {
-    const { vm } = this.props;
-    let propValues = this.pageComponentPropValue?.propValues;
-
-    if (vm.page?.type === IkasThemeJsonPageType.CHECKOUT) {
-      const checkoutProps: IkasCheckoutPageProps = {
-        checkout: new IkasCheckout({
-          currencyCode: "TRY",
-          currencySymbol: "₺",
-          orderLineItems: [
-            new IkasOrderLineItem({
-              id: "",
-              createdAt: 0,
-              updatedAt: 0,
-              currencyCode: "TRY",
-              currencySymbol: "₺",
-              discount: null,
-              discountPrice: null,
-              finalPrice: 100,
-              options: null,
-              originalOrderLineItemId: null,
-              price: 100,
-              quantity: 1,
-              status: IkasOrderLineItemStatus.UNFULFILLED,
-              statusUpdatedAt: null,
-              stockLocationId: null,
-              taxValue: null,
-              unitPrice: null,
-              finalUnitPrice: null,
-              variant: {
-                barcodeList: null,
-                brand: null,
-                categories: null,
-                id: null,
-                mainImageId: null,
-                name: "",
-                prices: null,
-                productId: null,
-                sku: null,
-                slug: null,
-                tagIds: null,
-                taxValue: null,
-                type: null,
-                weight: null,
-                variantValues: [],
-                baseUnit: null,
-                unit: null,
-              },
-              orderedAt: 0,
-            }),
-          ],
-        }),
-        checkoutSettings: new IkasCheckoutSettings({
-          createdAt: 0,
-          updatedAt: 0,
-          id: "",
-          giftPackagePriceList: null,
-          identityNumberRequirement: IkasCheckoutRequirement.OPTIONAL,
-          isAccountRequired: false,
-          isGiftPackageEnabled: false,
-          isShowPostalCode: true,
-          isTermsAndConditionsDefaultChecked: null,
-          options: null,
-          phoneRequirement: IkasCheckoutRequirement.OPTIONAL,
-          postalCodeRequirement: IkasCheckoutRequirement.OPTIONAL,
-          showCheckoutNote: true,
-          showTermsAndConditionsCheckbox: true,
-          storefrontId: "",
-        }),
-        customizationProps: {
-          ...propValues,
-        },
-        returnPolicy: "",
-        privacyPolicy: "",
-        termsOfService: "",
-      };
-
-      propValues = checkoutProps;
-    }
-
-    return propValues;
-  }
-
-  get isSelected() {
-    const { vm, pageComponent } = this.props;
-    return vm.selectedPageComponentId === pageComponent.id;
-  }
-
-  get isHovered() {
-    const { vm, pageComponent } = this.props;
-    return vm.hoveredPageComponentId === pageComponent.id;
-  }
-
-  get hasNullValue() {
-    return !!this.pageComponentPropValue?.component.props.some((prop) => {
-      if (prop.isRequired) {
-        const propValue = (this.propValues || {})[prop.name];
-        const requiredProp = this.pageComponentPropValue?.component.props.find(
-          (p) => p.id === prop.requiredPropId
-        );
-
-        if (requiredProp) {
-          const requiredPropValue = (this.propValues || {})[requiredProp.name];
-          if (
-            (requiredProp.type === IkasThemeJsonComponentPropType.BOOLEAN &&
-              !requiredPropValue) ||
-            (requiredProp.type === IkasThemeJsonComponentPropType.CUSTOM &&
-              requiredPropValue !== prop.requiredEnumOptionValue)
-          )
-            return false;
-        }
-
-        return propValue === null || propValue == undefined;
-      }
-    });
-  }
-
-  get rendered() {
-    const Component = this.Component;
-    const { vm } = this.props;
-
-    return this.hasNullValue || this.state.hasError ? (
-      <ErrorComponent
-        name={this.pageComponentPropValue?.component.displayName}
-      />
-    ) : (
-      <Component
-        {...this.propValues}
-        store={IkasBaseStore.getInstance()}
-        settings={vm.theme?.settings}
-        pageSpecificData={IkasPageDataInit.pageSpecificData}
-      />
-    );
-  }
-
-  get Component() {
-    const { vm, pageComponent } = this.props;
-    const currentPageComponents =
-      IkasStorefrontConfig.getCurrentPageComponents();
-
-    if (!currentPageComponents) return null;
-
-    let Component = currentPageComponents[pageComponent.componentId];
-
-    if (vm.page?.type === IkasThemeJsonPageType.CHECKOUT) {
-      Component = IkasCheckoutPage;
-    }
-
-    return Component;
-  }
-
-  onMouseEnter = () => {
-    const { vm, pageComponent } = this.props;
-    vm.onMouseOver(pageComponent.id);
-  };
-
-  onMouseLeave = () => {
-    const { vm, pageComponent } = this.props;
-    vm.onMouseLeave(pageComponent.id);
-  };
-
-  onClick = () => {
-    const { vm, pageComponent } = this.props;
-    vm.onClick(pageComponent.id);
-  };
-
-  render() {
-    return (
-      <Observer>
-        {() => {
-          if (this.state.hasError) {
-            return (
-              <div
-                ref={this.ref}
-                style={{ position: "relative" }}
-                onMouseEnter={this.onMouseEnter}
-                onMouseLeave={this.onMouseLeave}
-                onClick={this.onClick}
-              >
-                <ErrorComponent
-                  name={this.pageComponentPropValue?.component.displayName}
-                />
-                ;
-              </div>
-            );
-          }
-
-          const currentPageComponents =
-            IkasStorefrontConfig.getCurrentPageComponents();
-
-          if (!currentPageComponents) {
-            console.error("Components for the page not found.");
-            return null;
-          }
-
-          return (
-            <div
-              ref={this.ref}
-              style={{ position: "relative" }}
-              onMouseEnter={this.onMouseEnter}
-              onMouseLeave={this.onMouseLeave}
-            >
-              {this.rendered}
-            </div>
-          );
-        }}
-      </Observer>
-    );
-  }
-}

package/src/components/page-editor/error/index.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-
-function ErrorComponent({ name }: { name?: string } = {}) {
-  return (
-    <div style={style}>Error! Please fill the component {name} fields</div>
-  );
-}
-
-export default ErrorComponent;
-
-const style: React.CSSProperties = {
-  lineHeight: "50px",
-  textAlign: "center",
-  fontSize: "16px",
-  margin: "10px 0",
-  border: "2px solid rgb(255, 0, 0)",
-  backgroundColor: "rgba(255, 0, 0, 0.5)",
-};

package/src/components/page-editor/index.tsx

@@ -1,194 +0,0 @@
-import * as React from "react";
-import { Observer } from "mobx-react-lite";
-import { withRouter } from "next/router.js";
-import { ThemeEditorComponent } from "./ThemeComponentEditor";
-import IkasPageEditorViewModel from "./model";
-import { IkasPageHead } from "../page/head";
-import { IkasEditorComponentLoader } from "./loader";
-import { WithRouterProps } from "next/dist/client/with-router";
-import { computed, makeObservable, reaction } from "mobx";
-import { getGoogleFontHref } from "../../utils/google-fonts";
-import { IkasBaseStore } from "../../store";
-
-type Props = WithRouterProps;
-
-class IkasPageEditor extends React.Component<Props> {
-  vm: IkasPageEditorViewModel;
-  disposer?: () => void;
-
-  constructor(props: Props) {
-    super(props);
-    this.vm = new IkasPageEditorViewModel(props.router);
-
-    makeObservable(this, {
-      headerPageComponent: computed,
-      footerPageComponent: computed,
-      otherComponents: computed,
-    });
-  }
-
-  componentDidMount() {
-    this.props.router.events.on(
-      "routeChangeStart",
-      this.handleRouteChangeStart
-    );
-    IkasBaseStore.getInstance().router = this.props.router;
-
-    if (document.addEventListener) {
-      document.addEventListener("click", this.interceptClickEvent);
-    }
-
-    this.disposer && this.disposer();
-    this.disposer = reaction(
-      () => this.vm.theme?.settings,
-      () => {
-        this.vm.theme?.settings.colors.map((sc) =>
-          document.documentElement.style.setProperty(sc.key, sc.color)
-        );
-        this.injectFontScript();
-      }
-    );
-  }
-
-  componentWillUnmount() {
-    this.props.router.events.off(
-      "routeChangeStart",
-      this.handleRouteChangeStart
-    );
-    document.removeEventListener("click", this.interceptClickEvent);
-    this.disposer && this.disposer();
-  }
-
-  get headerPageComponent() {
-    const vm = this.vm;
-    const headerComponent = vm.theme?.components.find((c) => c.isHeader);
-    return vm.pageComponents?.find(
-      (pc) => pc.componentId === headerComponent?.id
-    );
-  }
-
-  get footerPageComponent() {
-    const vm = this.vm;
-    const footerComponent = vm.theme?.components.find((c) => c.isFooter);
-    return vm.pageComponents?.find(
-      (pc) => pc.componentId === footerComponent?.id
-    );
-  }
-
-  get otherComponents() {
-    const vm = this.vm;
-    const headerComponent = vm.theme?.components.find((c) => c.isHeader);
-    const footerComponent = vm.theme?.components.find((c) => c.isFooter);
-    return vm.pageComponents?.filter(
-      (pc) =>
-        pc.componentId !== headerComponent?.id &&
-        pc.componentId !== footerComponent?.id
-    );
-  }
-
-  interceptClickEvent = (e: MouseEvent) => {
-    let href;
-    const target = e.target as HTMLElement;
-
-    if (target.tagName === "A") {
-      href = target.getAttribute("href");
-      e.preventDefault();
-    }
-  };
-
-  handleRouteChangeStart = (url: string, params: any) => {
-    this.vm.onPageChange(url);
-    throw ``;
-  };
-
-  injectFontScript = () => {
-    if (!this.vm.theme?.settings.fontFamily.name) {
-      document.body.style.setProperty(
-        "font-family",
-        `-apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`
-      );
-      return;
-    }
-
-    const fontFamily = this.vm.theme.settings.fontFamily;
-
-    const existingScript = document.getElementById("ikas-font");
-    if (existingScript) existingScript.remove();
-
-    const href = getGoogleFontHref(fontFamily);
-    if (!href) return;
-
-    const link = document.createElement("link");
-    link.setAttribute("id", "ikas-font");
-    link.setAttribute("rel", "stylesheet");
-    link.setAttribute("href", href);
-
-    const head = document.getElementsByTagName("head")[0];
-    head.appendChild(link);
-
-    document.body.style.setProperty(
-      "font-family",
-      `'${fontFamily.name}', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif`,
-      "important"
-    );
-  };
-
-  render() {
-    const vm = this.vm;
-
-    return (
-      <Observer>
-        {() =>
-          vm.isLoading ? (
-            <IkasEditorComponentLoader isFullPage={true} />
-          ) : (
-            <React.Fragment>
-              {!!vm.page && (
-                <IkasPageHead
-                  pageType={vm.page.type}
-                  pageTitle={vm.page.pageTitle}
-                  pageDescription={vm.page.description}
-                />
-              )}
-              <div style={pageStyle}>
-                <div>
-                  {!!this.headerPageComponent && (
-                    <ThemeEditorComponent
-                      key={this.headerPageComponent.id}
-                      vm={vm}
-                      pageComponent={this.headerPageComponent}
-                    />
-                  )}
-                  {this.otherComponents?.map((pageComponent) => (
-                    <ThemeEditorComponent
-                      key={pageComponent.id}
-                      vm={vm}
-                      pageComponent={pageComponent}
-                    />
-                  ))}
-                </div>
-                {!!this.footerPageComponent && (
-                  <ThemeEditorComponent
-                    key={this.footerPageComponent.id}
-                    vm={vm}
-                    pageComponent={this.footerPageComponent}
-                  />
-                )}
-              </div>
-            </React.Fragment>
-          )
-        }
-      </Observer>
-    );
-  }
-}
-
-export default withRouter(IkasPageEditor);
-
-const pageStyle: React.CSSProperties = {
-  minHeight: "100vh",
-  width: "100vw",
-  display: "flex",
-  flexDirection: "column",
-  justifyContent: "space-between",
-};

package/src/components/page-editor/loader/index.tsx

@@ -1,18 +0,0 @@
-import * as React from "react";
-import styles from "./style.module.scss";
-
-type Props = {
-  isFullPage?: boolean;
-};
-
-export const IkasEditorComponentLoader: React.FC<Props> = ({ isFullPage }) => {
-  return (
-    <div
-      className={[styles.Container, isFullPage ? styles.fullPage : ""].join(
-        " "
-      )}
-    >
-      <div className={styles.loader}></div>
-    </div>
-  );
-};

package/src/components/page-editor/loader/style.module.scss

@@ -1,59 +0,0 @@
-
-.Container {
-  width: 100%;
-  height: 300px;
-  background-color: white;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &.fullPage {
-    height: 100vh;
-  }
-
-  .loader,
-  .loader:after {
-    border-radius: 50%;
-    width: 5em;
-    height: 5em;
-  }
-
-  .loader {
-    font-size: 6px;
-    position: relative;
-    text-indent: -9999em;
-    border-top: 0.5em solid rgba(255, 255, 255, 0.2);
-    border-right: 0.5em solid rgba(255, 255, 255, 0.2);
-    border-bottom: 0.5em solid rgba(255, 255, 255, 0.2);
-    border-left: 0.5em solid black;
-    -webkit-transform: translateZ(0);
-    -ms-transform: translateZ(0);
-    transform: translateZ(0);
-    -webkit-animation: load8 1.1s infinite linear;
-    animation: load8 1.1s infinite linear;
-  }
-
-  @-webkit-keyframes load8 {
-    0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-
-    100% {
-      -webkit-transform: rotate(360deg);
-      transform: rotate(360deg);
-    }
-  }
-
-  @keyframes load8 {
-    0% {
-      -webkit-transform: rotate(0deg);
-      transform: rotate(0deg);
-    }
-
-    100% {
-      -webkit-transform: rotate(360deg);
-      transform: rotate(360deg);
-    }
-  }
-}