@ikas/storefront 1.0.21 → 2.0.0-alpha.1

package/src/components/page-editor/model.ts

@@ -0,0 +1,505 @@
+import { makeAutoObservable, runInAction } from "mobx";
+import { NextRouter } from "next/router";
+import {
+  IkasThemePage,
+  IkasThemePageComponent,
+  IkasTheme,
+  IkasThemeComponentPropType,
+  IkasThemeComponent,
+  IkasThemeSettings,
+} from "../../models";
+import { IkasPageDataProvider } from "../../providers/page-data-get";
+import { IkasPageDataInit } from "../../providers/page-data-init";
+import { apollo } from "../../api";
+import {
+  IkasThemePageSpecification,
+  IkasThemePageType,
+} from "../../models/theme/page";
+import { IkasStorefrontConfig } from "../../storefront";
+import { IkasStorefront } from "../../models/data/storefront";
+
+const PACKAGE_VERSION = "0.2.0";
+// import { version as PACKAGE_VERSION } from "../../../package.json";
+
+export default class IkasPageEditorViewModel {
+  theme?: IkasTheme | null = null;
+  page?: IkasThemePage | null = null;
+  selectedPageComponentId?: string | null = null;
+  hoveredPageComponentId?: string | null = null;
+  componentRefs: any = {};
+  isLoading = false;
+
+  // Sent from dashboard for localization (handleUpdateFrameData)
+  locale = "en";
+  translations?: Record<string, any>;
+
+  pageParams: Record<string, any> = {};
+  queryParams: Record<string, any> = {};
+  apiKey?: string | null = null;
+  pageDataProvider?: IkasPageDataProvider | null = null;
+
+  router: NextRouter;
+
+  constructor(router: NextRouter) {
+    this.router = router;
+
+    makeAutoObservable(this);
+    this.startMessaging();
+  }
+
+  get specification() {
+    const selectedPage = this.page;
+    let specification: IkasThemePageSpecification | undefined;
+
+    if (selectedPage?.type === IkasThemePageType.PRODUCT) {
+      specification = selectedPage.specifications?.find(
+        (s) => s.id === this.pageParams?.productId
+      );
+    }
+    if (selectedPage?.type === IkasThemePageType.CATEGORY) {
+      specification = selectedPage.specifications?.find(
+        (s) => s.id === this.pageParams?.categoryId
+      );
+    }
+    if (selectedPage?.type === IkasThemePageType.BRAND) {
+      specification = selectedPage.specifications?.find(
+        (s) => s.id === this.pageParams?.brandId
+      );
+    }
+    if (selectedPage?.type === IkasThemePageType.BLOG) {
+      specification = selectedPage.specifications?.find(
+        (s) => s.id === this.pageParams?.blogId
+      );
+    }
+    if (selectedPage?.type === IkasThemePageType.BLOG_CATEGORY) {
+      specification = selectedPage.specifications?.find(
+        (s) => s.id === this.pageParams?.blogCategoryId
+      );
+    }
+    if (selectedPage?.type === IkasThemePageType.RAFFLE_DETAIL) {
+      specification = selectedPage.specifications?.find(
+        (s) => s.id === this.pageParams?.raffleId
+      );
+    }
+
+    return specification;
+  }
+
+  get pageComponents() {
+    if (this.specification) return this.specification.components;
+    return this.page?.components || [];
+  }
+
+  get selectedPageComponent() {
+    return this.pageComponents.find(
+      (pc) => pc.id === this.selectedPageComponentId
+    );
+  }
+
+  get selectedComponent() {
+    return this.theme?.components.find(
+      (c) => c.id === this.selectedPageComponent?.componentId
+    );
+  }
+
+  startMessaging = () => {
+    window.addEventListener("message", this.onMessage, false);
+    this.sendMessage(BridgeMessageType.FRAME_DID_LOAD, PACKAGE_VERSION);
+  };
+
+  onMessage = async (event: MessageEvent) => {
+    const type = event.data.type;
+    const data = event.data.data;
+
+    switch (type) {
+      case BridgeMessageType.UPDATE_FRAME_DATA:
+        await this.handleUpdateFrameData(data);
+        break;
+
+      case BridgeMessageType.UPDATE_PROP_VALUE:
+        await this.handleUpdatePropValue(data);
+        break;
+
+      case BridgeMessageType.UPDATE_PAGE_PARAMS:
+        await this.handleUpdatePageParams(data);
+        break;
+
+      case BridgeMessageType.UPDATE_PAGE_COMPONENT_ORDER:
+        await this.handleUpdatePageComponentOrder(data);
+        break;
+
+      case BridgeMessageType.ADD_COMPONENT:
+        this.handleAddNewComponent(data);
+        break;
+
+      case BridgeMessageType.DELETE_COMPONENT:
+        this.handleDeleteComponent(data);
+        break;
+
+      case BridgeMessageType.UPDATE_COMPONENT:
+        this.handleUpdateComponent(data);
+        break;
+
+      case BridgeMessageType.ADD_PAGE_COMPONENT:
+        await this.handleAddNewPageComponent(data);
+        break;
+
+      case BridgeMessageType.DELETE_PAGE_COMPONENT:
+        this.handleDeletePageComponent(data);
+        break;
+
+      case BridgeMessageType.SET_SELECTED_COMPONENT:
+        this.handleSetSelectedComponent(data);
+        break;
+
+      case BridgeMessageType.SET_HOVERED_COMPONENT:
+        this.handleSetHoveredComponent(data);
+        break;
+
+      case BridgeMessageType.SCROLL_TO_COMPONENT:
+        this.handleScrollToComponent(data);
+        break;
+
+      case BridgeMessageType.UPDATE_THEME_SETTINGS:
+        this.updateThemeSettings(data);
+        break;
+
+      default:
+        break;
+    }
+  };
+
+  onClick = (id: string) => {
+    this.sendMessage(BridgeMessageType.COMPONENT_CLICK, {
+      componentId: id,
+    });
+  };
+
+  onMouseOver = (id: string) => {
+    this.sendMessage(BridgeMessageType.COMPONENT_MOUSE_OVER, {
+      componentId: id,
+    });
+  };
+
+  onMouseLeave = (id: string) => {
+    this.sendMessage(BridgeMessageType.COMPONENT_MOUSE_LEAVE, {
+      componentId: id,
+    });
+  };
+
+  sendMessage = (type: BridgeMessageType, data?: any) => {
+    window.parent.postMessage(
+      {
+        type,
+        data,
+      },
+      "*"
+    );
+  };
+
+  getPagePropValues = async () => {
+    const pageDataProvider = new IkasPageDataProvider(
+      this.theme!,
+      this.pageParams,
+      this.page?.type
+    );
+
+    if (this.pageParams?.blogId || this.pageParams?.blogCategoryId) {
+      pageDataProvider.possiblePageTypes = [
+        IkasThemePageType.BLOG,
+        IkasThemePageType.BLOG_CATEGORY,
+      ];
+    }
+
+    if (this.pageParams?.raffleId) {
+      pageDataProvider.possiblePageTypes = [IkasThemePageType.RAFFLE_DETAIL];
+    }
+
+    this.isLoading = true;
+    await pageDataProvider.getPageData();
+
+    if (pageDataProvider.pageSpecificData) {
+      IkasPageDataInit.setPageSpecificData(
+        JSON.stringify(pageDataProvider.pageSpecificData),
+        this.page!.type,
+        true
+      );
+    }
+
+    pageDataProvider.pageComponentPropValues = IkasPageDataInit.initPropValues(
+      JSON.stringify(pageDataProvider.pageComponentPropValues),
+      this.router,
+      JSON.stringify(this.theme!.settings),
+      false
+    );
+
+    runInAction(() => {
+      this.pageDataProvider = pageDataProvider;
+      this.isLoading = false;
+    });
+  };
+
+  setComponentRef = (
+    element: React.ElementType,
+    component: IkasThemePageComponent
+  ) => {
+    this.componentRefs[component.id] = element;
+  };
+
+  isScrolledIntoView = (el: HTMLElement): boolean => {
+    const rect = el.getBoundingClientRect();
+    const elemTop = rect.top;
+    const elemBottom = rect.bottom;
+
+    const isVisible =
+      elemTop < window.innerHeight &&
+      elemBottom >= 0 &&
+      elemBottom < window.innerHeight &&
+      elemTop > 0;
+    return isVisible;
+  };
+
+  // Message Handlers
+
+  handleUpdateFrameData = async (data: any) => {
+    this.theme = new IkasTheme(data.theme);
+    this.page = this.theme.pages.find((p) => p.id === data.selectedPage.id);
+    this.pageParams = data.pageParams;
+    this.queryParams = data.queryParams;
+    this.apiKey = data.apiKey;
+    this.locale = data.locale || "en";
+    this.translations = data.translations || undefined;
+
+    // Production editor mode
+    const storefront = data.storefront;
+    if (storefront) {
+      const _storefront = new IkasStorefront(storefront);
+      const routing = _storefront.routings.find(
+        (sr) => sr.locale === this.locale
+      );
+
+      IkasStorefrontConfig.storefrontId = _storefront.id;
+      IkasStorefrontConfig.storefrontRoutingId = routing?.id;
+
+      if (_storefront.mainStorefrontThemeId)
+        IkasStorefrontConfig.storefrontThemeId =
+          _storefront.mainStorefrontThemeId;
+
+      if (_storefront.salesChannelId)
+        IkasStorefrontConfig.salesChannelId = _storefront.salesChannelId;
+
+      if (routing?.priceListId)
+        IkasStorefrontConfig.priceListId = routing.priceListId;
+
+      IkasStorefrontConfig.routings = _storefront.routings;
+      IkasStorefrontConfig.stockPreference = this.theme.settings.stockPreference;
+    }
+
+    // Production editor mode
+    if (this.translations)
+      IkasStorefrontConfig.translations = this.translations;
+
+    IkasStorefrontConfig.isEditor = true;
+
+    apollo.createApolloClient(this.apiKey || undefined);
+    (window as any).editorApiKey = data.apiKey;
+
+    await this.getPagePropValues();
+  };
+
+  handleUpdatePropValue = async (data: any) => {
+    const propName = data.propName;
+    const value = data.value;
+    const prop = this.selectedComponent?.props?.find(
+      (p) => p.name === propName
+    );
+
+    if (!prop || !this.selectedPageComponent) return;
+
+    const pageComponentPropValues = this.pageDataProvider?.pageComponentPropValues.find(
+      (pv) => pv.pageComponent.id === this.selectedPageComponentId
+    );
+
+    this.selectedPageComponent.propValues[propName] = value;
+
+    if (!this.pageDataProvider) return;
+
+    const propValue = await this.pageDataProvider.getPageComponentPropValue(
+      this.selectedPageComponent,
+      prop
+    );
+
+    runInAction(() => {
+      if (pageComponentPropValues) {
+        pageComponentPropValues.propValues[propName] = propValue;
+
+        if (prop.type === IkasThemeComponentPropType.CUSTOM) {
+          IkasPageDataInit.initCustomDataPropValue(
+            prop,
+            propValue,
+            pageComponentPropValues,
+            this.router,
+            this.theme!.settings,
+            true
+          );
+        } else if (prop.type === IkasThemeComponentPropType.COMPONENT) {
+          IkasPageDataInit.initComponentPropValue(
+            prop,
+            propValue,
+            pageComponentPropValues,
+            this.router,
+            this.theme!.settings,
+            true
+          );
+        } else if (prop.type === IkasThemeComponentPropType.COMPONENT_LIST) {
+          IkasPageDataInit.initComponentListPropValue(
+            prop,
+            propValue,
+            pageComponentPropValues,
+            this.router,
+            this.theme!.settings,
+            true
+          );
+        }
+      }
+    });
+  };
+
+  handleUpdatePageParams = async (data: any) => {
+    this.pageParams = data.pageParams;
+    this.queryParams = data.queryParams;
+    await this.getPagePropValues();
+  };
+
+  handleUpdatePageComponentOrder = async (data: any) => {
+    if (this.specification)
+      this.specification.components = data.pageComponents.map(
+        (c: IkasThemePageComponent) => new IkasThemePageComponent(c)
+      );
+    else
+      this.page!.components = data.pageComponents.map(
+        (c: IkasThemePageComponent) => new IkasThemePageComponent(c)
+      );
+  };
+
+  handleAddNewComponent = (data: any) => {
+    const component = new IkasThemeComponent(data.component);
+    this.theme?.components.push(component);
+  };
+
+  handleDeleteComponent = (data: any) => {
+    if (this.theme?.components) {
+      this.theme.components = this.theme.components.filter(
+        (c) => c.id !== data.componentId
+      );
+    }
+
+    const newPageComponents =
+      this.pageComponents.filter((pC) => pC.componentId !== data.componentId) ||
+      [];
+
+    if (this.specification && this.specification.components) {
+      this.specification.components = newPageComponents;
+    }
+    if (!this.specification && this.page?.components) {
+      this.page.components = newPageComponents;
+    }
+  };
+
+  handleUpdateComponent = (data: any) => {
+    const index = this.theme!.components.findIndex(
+      (c) => c.id === data.component.id
+    );
+    if (index !== -1)
+      this.theme!.components[index] = new IkasThemeComponent(data.component);
+  };
+
+  handleAddNewPageComponent = async (data: any) => {
+    const pageComponent = new IkasThemePageComponent(data.pageComponent);
+    if (this.pageComponents.some((pc) => pc.id === pageComponent.id)) return;
+
+    const pageComponentPropValues = await this.pageDataProvider!.getPageComponentPropValues(
+      pageComponent
+    );
+    runInAction(() => {
+      const customDataProps = pageComponentPropValues.component.props.filter(
+        (p) => p.type === IkasThemeComponentPropType.CUSTOM
+      );
+
+      customDataProps.forEach((customDataProp) => {
+        IkasPageDataInit.initCustomDataPropValue(
+          customDataProp,
+          pageComponentPropValues.propValues[customDataProp.name],
+          pageComponentPropValues,
+          this.router,
+          this.theme!.settings,
+          true
+        );
+      });
+
+      this.pageDataProvider!.pageComponentPropValues.push(
+        pageComponentPropValues
+      );
+      this.pageComponents.push(pageComponent);
+    });
+  };
+
+  handleDeletePageComponent = (data: any) => {
+    if (this.specification)
+      this.specification.components = this.pageComponents.filter(
+        (pc) => pc.id !== data.pageComponentId
+      );
+    else
+      this.page!.components = this.pageComponents.filter(
+        (pc) => pc.id !== data.pageComponentId
+      );
+  };
+
+  handleSetSelectedComponent = (data: any) => {
+    this.selectedPageComponentId = data.componentId;
+  };
+
+  handleSetHoveredComponent = (data: any) => {
+    this.hoveredPageComponentId = data.componentId;
+  };
+
+  handleScrollToComponent = (data: any) => {
+    const componentId = data.componentId;
+    const element = this.componentRefs[componentId];
+    if (element) {
+      if (!this.isScrolledIntoView(element))
+        window.scrollTo({
+          top: element.offsetTop,
+          behavior: "smooth",
+        });
+    }
+  };
+
+  updateThemeSettings = (data: any) => {
+    const settings = data.settings;
+
+    if (this.theme) {
+      this.theme.settings = new IkasThemeSettings(settings);
+    }
+  };
+}
+
+export enum BridgeMessageType {
+  FRAME_DID_LOAD = "FRAME_DID_LOAD",
+  UPDATE_FRAME_DATA = "UPDATE_FRAME_DATA",
+  UPDATE_PROP_VALUE = "UPDATE_PROP_VALUE",
+  UPDATE_PAGE_PARAMS = "UPDATE_PAGE_PARAMS",
+  UPDATE_PAGE_COMPONENT_ORDER = "UPDATE_PAGE_COMPONENT_ORDER",
+  ADD_COMPONENT = "ADD_COMPONENT",
+  DELETE_COMPONENT = "DELETE_COMPONENT",
+  UPDATE_COMPONENT = "UPDATE_COMPONENT",
+  ADD_PAGE_COMPONENT = "ADD_PAGE_COMPONENT",
+  DELETE_PAGE_COMPONENT = "DELETE_PAGE_COMPONENT",
+  COMPONENT_MOUSE_OVER = "COMPONENT_MOUSE_OVER",
+  COMPONENT_MOUSE_LEAVE = "COMPONENT_MOUSE_LEAVE",
+  COMPONENT_CLICK = "COMPONENT_CLICK",
+  SET_SELECTED_COMPONENT = "SET_SELECTED_COMPONENT",
+  SET_HOVERED_COMPONENT = "SET_HOVERED_COMPONENT",
+  SCROLL_TO_COMPONENT = "SCROLL_TO_COMPONENT",
+  UPDATE_THEME_SETTINGS = "UPDATE_THEME_SETTINGS",
+}

package/src/index.ts

@@ -0,0 +1,8 @@
+export * from "./api";
+export * from "./components";
+export * from "./models";
+export * from "./pages";
+export * from "./store";
+export * from "./storefront";
+export * from "./utils";
+export * from "./analytics";

package/src/models/data/blog/index.ts

@@ -0,0 +1,154 @@
+import { makeAutoObservable } from "mobx";
+import { IkasImage } from "../image";
+
+export class IkasBlog {
+  id: string;
+  createdAt: number;
+  updatedAt: number;
+  categoryId: string | null;
+  category: IkasBlogCategory | null;
+  imageId: string | null;
+  title: string | null;
+  shortDescription: string | null;
+  isPublished: boolean;
+  storefrontId: string;
+  tagIds: string[] | null;
+  tags: IkasBlogTag[] | null;
+  writer: IkasBlogWriter;
+  blogContent: IkasBlogContent;
+  metadata: IkasBlogMetaData | null;
+
+  image: IkasImage | null;
+
+  constructor(data: Partial<IkasBlog> = {}) {
+    this.id = data.id || Date.now() + "";
+    this.createdAt = data.createdAt || Date.now();
+    this.updatedAt = data.updatedAt || Date.now();
+    this.categoryId = data.categoryId || null;
+    this.category = data.category ? new IkasBlogCategory(data.category) : null;
+    this.imageId = data.imageId || null;
+    this.title = data.title || null;
+    this.shortDescription = data.shortDescription || null;
+    this.isPublished = data.isPublished || false;
+    this.storefrontId = data.storefrontId || "";
+    this.tagIds = data.tagIds || [];
+    this.tags = data.tags?.map((t) => new IkasBlogTag(t)) || [];
+    this.writer = data.writer
+      ? new IkasBlogWriter(data.writer)
+      : new IkasBlogWriter();
+    this.blogContent = data.blogContent
+      ? new IkasBlogContent(data.blogContent)
+      : new IkasBlogContent();
+    this.metadata = data.metadata ? new IkasBlogMetaData(data.metadata) : null;
+    this.image = data.imageId ? new IkasImage(data.imageId) : null;
+
+    makeAutoObservable(this);
+  }
+
+  get href() {
+    if (!this.metadata?.slug) return "";
+    return `/blog/${this.metadata.slug}`;
+  }
+}
+
+export class IkasBlogContent {
+  id: string;
+  createdAt: number;
+  updatedAt: number;
+  content: string;
+
+  constructor(data: Partial<IkasBlogContent> = {}) {
+    this.id = data.id || Date.now() + "";
+    this.createdAt = data.createdAt || Date.now();
+    this.updatedAt = data.updatedAt || Date.now();
+    this.content = data.content || "";
+
+    makeAutoObservable(this);
+  }
+}
+
+export class IkasBlogWriter {
+  firstName: string;
+  lastName: string;
+
+  constructor(data: Partial<IkasBlogWriter> = {}) {
+    this.firstName = data.firstName || "";
+    this.lastName = data.lastName || "";
+
+    makeAutoObservable(this);
+  }
+}
+
+export enum IkasBlogMetadataTargetType {
+  BLOG = "BLOG",
+  BLOG_CATEGORY = "BLOG_CATEGORY",
+}
+
+export class IkasBlogMetaData {
+  id: string;
+  createdAt: number;
+  updatedAt: number;
+  pageTitle: string | null = null;
+  description: string | null = null;
+  slug: string;
+  targetId: string;
+  targetType: IkasBlogMetadataTargetType;
+
+  constructor(data: Partial<IkasBlogMetaData> = {}) {
+    this.id = data.id || Date.now() + "";
+    this.createdAt = data.createdAt || Date.now();
+    this.updatedAt = data.updatedAt || Date.now();
+    this.description = data.description || "";
+    this.pageTitle = data.pageTitle || "";
+    this.slug = data.slug || "";
+    this.targetId = data.targetId || "";
+    this.targetType = data.targetType || IkasBlogMetadataTargetType.BLOG;
+
+    makeAutoObservable(this);
+  }
+}
+
+export class IkasBlogCategory {
+  id: string;
+  createdAt: number;
+  updatedAt: number;
+  deleted: boolean;
+  name: string;
+  imageId: string;
+  metadata: IkasBlogMetaData | null;
+
+  constructor(data: Partial<IkasBlogCategory> = {}) {
+    this.id = data.id || "";
+    this.createdAt = data.createdAt || Date.now();
+    this.updatedAt = data.updatedAt || Date.now();
+    this.deleted = data.deleted || false;
+    this.name = data.name || "";
+    this.imageId = data.imageId || "";
+    this.metadata = data.metadata ? new IkasBlogMetaData(data.metadata) : null;
+
+    makeAutoObservable(this);
+  }
+
+  get href() {
+    if (!this.metadata?.slug) return "";
+    return `/blog/${this.metadata.slug}`;
+  }
+}
+
+export class IkasBlogTag {
+  id: string;
+  createdAt: number;
+  updatedAt: number;
+  deleted: boolean;
+  name: string | null;
+
+  constructor(data: Partial<IkasBlogTag> = {}) {
+    this.id = data.id || Date.now() + "";
+    this.createdAt = data.createdAt || Date.now();
+    this.updatedAt = data.updatedAt || Date.now();
+    this.deleted = data.deleted || false;
+    this.name = data.name || "";
+
+    makeAutoObservable(this);
+  }
+}