@ikas/storefront 2.0.0-alpha.1 → 2.0.0-alpha.10

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

@@ -1,505 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,154 +0,0 @@
-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);
-  }
-}