@ikas/storefront 3.0.0-beta.1 → 4.0.0-alpha.10

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

@@ -0,0 +1,847 @@
+import { IkasStorefrontConfig } from "@ikas/storefront-config";
+import {
+  IkasBlogMetaDataTargetType,
+  IkasHTMLMetaDataTargetType,
+  IkasProduct,
+  IkasStorefront,
+  IkasThemeJson,
+  IkasThemeJsonComponent,
+  IkasThemeJsonComponentPropType,
+  IkasThemeJsonPage,
+  IkasThemeJsonPageComponent,
+  IkasThemeJsonPageSpecification,
+  IkasThemeJsonPageType,
+  IkasThemeJsonSettings,
+  IkasVariantValue,
+} from "../../models";
+import { IkasPageDataProvider } from "@ikas/storefront-providers";
+import { makeAutoObservable, reaction } from "mobx";
+import { NextRouter } from "next/router.js";
+import { IkasPageDataInit } from "../../page-data-init";
+import { IkasBaseStore } from "../..";
+import HtmlMetaDataStore from "../../store/html-meta-data";
+import BlogStore from "../../store/blog";
+import RaffleStore from "../../store/raffle";
+import ProductStore from "../../store/product";
+
+const PACKAGE_VERSION = "2.0.20";
+// import { version as PACKAGE_VERSION } from "../../../package.json";
+
+export default class IkasPageEditorViewModel {
+  theme?: IkasThemeJson | null = null;
+  page?: IkasThemeJsonPage | null = null;
+  selectedPageComponentId?: string | null = null;
+  hoveredPageComponentId?: string | null = null;
+  componentRefs: any = {};
+  isLoading = false;
+  updateId = "";
+
+  // Sent from dashboard for localization (handleUpdateFrameData)
+  locale = "en";
+  translations?: Record<string, any>;
+
+  pageParams: 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: IkasThemeJsonPageSpecification | undefined;
+
+    if (selectedPage?.type === IkasThemeJsonPageType.PRODUCT) {
+      specification = selectedPage.specifications?.find(
+        (s) => s.id === this.pageParams?.productId
+      );
+    }
+    if (selectedPage?.type === IkasThemeJsonPageType.CATEGORY) {
+      specification = selectedPage.specifications?.find(
+        (s) => s.id === this.pageParams?.categoryId
+      );
+    }
+    if (selectedPage?.type === IkasThemeJsonPageType.BRAND) {
+      specification = selectedPage.specifications?.find(
+        (s) => s.id === this.pageParams?.brandId
+      );
+    }
+    if (selectedPage?.type === IkasThemeJsonPageType.BLOG) {
+      specification = selectedPage.specifications?.find(
+        (s) => s.id === this.pageParams?.blogId
+      );
+    }
+    if (selectedPage?.type === IkasThemeJsonPageType.BLOG_CATEGORY) {
+      specification = selectedPage.specifications?.find(
+        (s) => s.id === this.pageParams?.blogCategoryId
+      );
+    }
+    if (selectedPage?.type === IkasThemeJsonPageType.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
+    );
+  }
+
+  createLoadingListener() {
+    reaction(
+      () => this.isLoading,
+      () => {
+        this.onLoadingChange();
+      }
+    );
+  }
+
+  startMessaging = () => {
+    window.addEventListener("message", this.onMessage, false);
+    this.sendMessage(BridgeMessageType.FRAME_DID_LOAD, PACKAGE_VERSION);
+    this.createLoadingListener();
+  };
+
+  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_THEME_JSON:
+        await this.handleUpdateThemeJson(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.EDITOR_RELOAD:
+        this.handleEditorReload();
+        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,
+    });
+  };
+
+  // Page changed inside the editor, clicking on a link etc
+  onPageChange = async (url: string) => {
+    let slug = url.slice(1);
+    const urlParts = slug.split("?");
+    slug = urlParts[0];
+    const queryParams = urlParts[1];
+
+    this.pageParams = {};
+
+    let pageType: IkasThemeJsonPageType | undefined;
+
+    // Order is important here
+    if (url.startsWith("/account/orders/")) {
+      pageType = IkasThemeJsonPageType.ORDER_DETAIL;
+    } else if (url.startsWith("/account/orders")) {
+      pageType = IkasThemeJsonPageType.ORDERS;
+    } else if (url.startsWith("/account/addresses")) {
+      pageType = IkasThemeJsonPageType.ADDRESSES;
+    } else if (url.startsWith("/account/favorite-products")) {
+      pageType = IkasThemeJsonPageType.FAVORITE_PRODUCTS;
+    } else if (url.startsWith("/account/forgot-password")) {
+      pageType = IkasThemeJsonPageType.FORGOT_PASSWORD;
+    } else if (url.startsWith("/account/login")) {
+      pageType = IkasThemeJsonPageType.LOGIN;
+    } else if (url.startsWith("/account/raffles")) {
+      pageType = IkasThemeJsonPageType.RAFFLE_ACCOUNT;
+    } else if (url.startsWith("/account/recover-password")) {
+      pageType = IkasThemeJsonPageType.RECOVER_PASSWORD;
+    } else if (url.startsWith("/account/register")) {
+      pageType = IkasThemeJsonPageType.REGISTER;
+    } else if (url.startsWith("/account")) {
+      pageType = IkasThemeJsonPageType.ACCOUNT;
+    } else if (url.startsWith("/blog/")) {
+      pageType = IkasThemeJsonPageType.BLOG;
+    } else if (url.startsWith("/blog")) {
+      pageType = IkasThemeJsonPageType.BLOG_INDEX;
+    } else if (url.startsWith("/pages")) {
+      pageType = IkasThemeJsonPageType.CUSTOM;
+      this.pageParams = {
+        slug: slug.split("/")[1],
+      };
+    } else if (url.startsWith("/raffle/")) {
+      pageType = IkasThemeJsonPageType.RAFFLE_DETAIL;
+    } else if (url.startsWith("/raffle")) {
+      pageType = IkasThemeJsonPageType.RAFFLE;
+    } else if (url.startsWith("/404")) {
+      pageType = IkasThemeJsonPageType.NOT_FOUND;
+    } else if (url.startsWith("/cart")) {
+      pageType = IkasThemeJsonPageType.CART;
+    } else if (url.startsWith("/checkout")) {
+      pageType = IkasThemeJsonPageType.CHECKOUT;
+    } else if (url === "/") {
+      pageType = IkasThemeJsonPageType.INDEX;
+    } else if (url.startsWith("/search")) {
+      pageType = IkasThemeJsonPageType.SEARCH;
+    } else {
+      pageType = IkasThemeJsonPageType.PRODUCT;
+    }
+
+    // product-brand-category pages use same slug structure
+    // we check meta data to determine page type
+    if (pageType === IkasThemeJsonPageType.PRODUCT) {
+      const metaDataResponse = await HtmlMetaDataStore.listHTMLMetaData({
+        slug: { eq: slug },
+      });
+
+      if (metaDataResponse.isSuccess && metaDataResponse.data?.length) {
+        const metaData = metaDataResponse.data[0];
+
+        if (metaData.targetType === IkasHTMLMetaDataTargetType.PRODUCT) {
+          const variantId = await this.getVariantIdFromParams(
+            metaData.targetId!,
+            queryParams
+          );
+
+          this.pageParams = {
+            productId: metaData.targetId,
+            variantId,
+            slug,
+          };
+        } else if (
+          metaData.targetType === IkasHTMLMetaDataTargetType.CATEGORY
+        ) {
+          pageType = IkasThemeJsonPageType.CATEGORY;
+          this.pageParams = {
+            categoryId: metaData.targetId,
+            slug,
+          };
+        } else if (metaData.targetType === IkasHTMLMetaDataTargetType.BRAND) {
+          pageType = IkasThemeJsonPageType.BRAND;
+          this.pageParams = {
+            brandId: metaData.targetId,
+            slug,
+          };
+        } else {
+          return; // UNKNOWN TARGET
+        }
+      } else {
+        return; // Metadata not found, stay on the same page
+      }
+    }
+    // blog and blog-category pages use same slug structure
+    // we check meta data to determine page type
+    if (pageType === IkasThemeJsonPageType.BLOG) {
+      const metaDataResponse = await BlogStore.listBlogMetaData({
+        slug: { eq: slug },
+      });
+
+      if (metaDataResponse.isSuccess && metaDataResponse.data?.data?.length) {
+        const metaData = metaDataResponse.data.data[0];
+
+        if (metaData.targetType === IkasBlogMetaDataTargetType.BLOG) {
+          this.pageParams = {
+            blogId: metaData.targetId,
+            slug,
+          };
+        } else if (
+          metaData.targetType === IkasBlogMetaDataTargetType.BLOG_CATEGORY
+        ) {
+          pageType = IkasThemeJsonPageType.BLOG_CATEGORY;
+          this.pageParams = {
+            blogCategoryId: metaData.targetId,
+            slug,
+          };
+        } else {
+          return; // UNKNOWN TARGET
+        }
+      } else {
+        return; // Metadata not found, stay on the same page
+      }
+    }
+    // Raffle id fetch
+    if (pageType === IkasThemeJsonPageType.RAFFLE_DETAIL) {
+      const metaDataResponse = await RaffleStore.listRaffleMetaData({
+        slug: { eq: slug },
+      });
+
+      if (metaDataResponse.isSuccess && metaDataResponse.data?.length) {
+        const metaData = metaDataResponse.data[0];
+        this.pageParams = {
+          raffleId: metaData.targetId,
+          slug,
+        };
+      } else {
+        return; // Metadata not found, stay on the same page
+      }
+    }
+
+    this.isLoading = true;
+    const pageDataProvider = await this.getPagePropValues(
+      this.theme!,
+      pageType,
+      this.pageParams
+    );
+
+    IkasBaseStore.getInstance().currentPageType = pageType;
+    this.pageDataProvider = pageDataProvider;
+
+    if (pageType === IkasThemeJsonPageType.CUSTOM)
+      this.page = this.theme?.pages.find(
+        (p) => p.type === pageType && p.slug === this.pageParams.slug
+      );
+    else this.page = this.theme?.pages.find((p) => p.type === pageType);
+
+    requestAnimationFrame(() => {
+      document.body.scrollTop = 0;
+      if (document.scrollingElement) document.scrollingElement.scrollTop = 0;
+    });
+
+    this.sendMessage(BridgeMessageType.EDITOR_PAGE_CHANGE, {
+      pageType: pageType,
+      pageParams: this.pageParams,
+      pageSpecificData: this.pageDataProvider?.pageSpecificData || null,
+    });
+
+    this.isLoading = false;
+  };
+
+  // Editor loading changed, notify dashboard
+  onLoadingChange = () => {
+    this.sendMessage(BridgeMessageType.EDITOR_LOADING_CHANGE, {
+      isLoading: this.isLoading,
+    });
+  };
+
+  async getVariantIdFromParams(productId: string, queryParamsStr: string) {
+    try {
+      const urlParams = new URLSearchParams("?" + queryParamsStr);
+      const productsResponse = await ProductStore.searchProducts({
+        input: {
+          productIdList: [productId],
+          priceListId: IkasStorefrontConfig.getPriceListId(),
+          salesChannelId: IkasStorefrontConfig.getSalesChannelId(),
+        },
+      });
+
+      if (productsResponse.isSuccess && !productsResponse?.data?.data?.length) {
+        return;
+      }
+
+      const product = productsResponse.data!.data![0];
+      const productVariantTypeSlugs = product.variantTypes.map(
+        (vt) => vt.variantType.slug
+      );
+
+      const selectedVariantValues: IkasVariantValue[] = [];
+
+      productVariantTypeSlugs.forEach((slug, vtIndex) => {
+        const productVariantType = product.variantTypes[vtIndex];
+        const variantValueSlug = urlParams.get(slug);
+
+        if (variantValueSlug) {
+          const variantValue = productVariantType.variantType.values.find(
+            (v) => v.slug === variantValueSlug
+          );
+          if (variantValue) selectedVariantValues.push(variantValue);
+        }
+      });
+
+      const variant = product.variants.find((v) =>
+        v.variantValues.every((vv) =>
+          selectedVariantValues.some((svv) => svv.id === vv.id)
+        )
+      );
+
+      if (variant) return variant.id;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  sendMessage = (type: BridgeMessageType, data?: any) => {
+    window.parent.postMessage(
+      {
+        type,
+        data: JSON.parse(JSON.stringify(data)),
+      },
+      "*"
+    );
+  };
+
+  getPagePropValues = async (
+    theme: IkasThemeJson,
+    pageType: IkasThemeJsonPageType,
+    pageParams: Record<string, any>
+  ) => {
+    const pageDataProvider = new IkasPageDataProvider(
+      theme,
+      pageParams,
+      pageType
+    );
+
+    if (pageParams.blogId || pageParams.blogCategoryId) {
+      pageDataProvider.possiblePageTypes = [
+        IkasThemeJsonPageType.BLOG,
+        IkasThemeJsonPageType.BLOG_CATEGORY,
+      ];
+    }
+
+    if (pageParams.raffleId) {
+      pageDataProvider.possiblePageTypes = [
+        IkasThemeJsonPageType.RAFFLE_DETAIL,
+      ];
+    }
+
+    await pageDataProvider.getPageData();
+
+    if (pageDataProvider.pageSpecificData) {
+      IkasPageDataInit.setPageSpecificData(
+        pageDataProvider.pageSpecificData,
+        pageType,
+        true
+      );
+
+      // Display the selected variant
+      if (
+        pageType === IkasThemeJsonPageType.PRODUCT &&
+        IkasPageDataInit.pageSpecificData
+      ) {
+        const pageSpecificData =
+          IkasPageDataInit.pageSpecificData as IkasProduct;
+        const selectedVariant = pageSpecificData.variants.find(
+          (v) => v.id === pageParams.variantId
+        );
+
+        if (selectedVariant)
+          pageSpecificData.selectedVariantValues =
+            selectedVariant.variantValues;
+      }
+    } else {
+      IkasPageDataInit.pageSpecificData = undefined;
+    }
+
+    pageDataProvider.pageComponentPropValues = IkasPageDataInit.initPropValues(
+      pageDataProvider.pageComponentPropValues,
+      theme!.settings,
+      false
+    );
+
+    return pageDataProvider;
+  };
+
+  setComponentRef = (
+    element: React.ElementType,
+    component: IkasThemeJsonPageComponent
+  ) => {
+    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 IkasThemeJson(data.theme);
+    this.page = this.theme?.pages.find((p) => p.id === data.selectedPage.id);
+    this.pageParams = data.pageParams;
+    this.apiKey = data.apiKey;
+    this.locale = data.locale || "en";
+    this.translations = data.translations || undefined;
+
+    if (!this.page) return;
+
+    // Production editor mode
+    const storefront = data.storefront
+      ? new IkasStorefront(data.storefront as IkasStorefront)
+      : null;
+    if (storefront) {
+      const routing = storefront.routings.find(
+        (sr) => sr.locale === this.locale
+      );
+
+      IkasStorefrontConfig.init({
+        storefrontId: storefront.id,
+        storefrontRoutingId: routing?.id,
+        storefrontThemeId: storefront.mainStorefrontThemeId || undefined,
+        salesChannelId: storefront.salesChannelId || undefined,
+        priceListId: routing?.priceListId || undefined,
+        routings: storefront.routings,
+        stockPreference: this.theme?.settings.stockPreference,
+        translations: this.translations || {},
+        isEditor: true,
+        apiKey: data.apiKey,
+      });
+    }
+
+    // (window as any).editorApiKey = data.apiKey;
+
+    const updateId = Date.now() + "";
+    this.updateId = updateId;
+
+    this.isLoading = true;
+    const pageDataProvider = await this.getPagePropValues(
+      this.theme!,
+      this.page.type,
+      this.pageParams || {}
+    );
+
+    // Another handleUpdateFrame message might have started, before this one finishes
+    // We check the id here to ensure this is the latest operation
+    if (this.updateId === updateId) {
+      this.pageDataProvider = pageDataProvider;
+      this.isLoading = false;
+    }
+  };
+
+  handleUpdateThemeJson = async (data: any) => {
+    this.theme = new IkasThemeJson(data.theme);
+  };
+
+  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
+    );
+
+    await this.pageDataProvider.setLinkSlugs();
+
+    if (pageComponentPropValues) {
+      pageComponentPropValues.propValues[propName] = propValue;
+
+      if (prop.type === IkasThemeJsonComponentPropType.CUSTOM) {
+        IkasPageDataInit.initCustomDataPropValue(
+          prop,
+          propValue,
+          pageComponentPropValues,
+          this.theme!.settings,
+          true
+        );
+      } else if (prop.type === IkasThemeJsonComponentPropType.COMPONENT) {
+        IkasPageDataInit.initComponentPropValue(
+          prop,
+          propValue,
+          pageComponentPropValues,
+          this.theme!.settings,
+          true
+        );
+      } else if (prop.type === IkasThemeJsonComponentPropType.COMPONENT_LIST) {
+        IkasPageDataInit.initComponentListPropValue(
+          prop,
+          propValue,
+          pageComponentPropValues,
+          this.theme!.settings,
+          true
+        );
+      } else if (prop.type === IkasThemeJsonComponentPropType.PRODUCT_DETAIL) {
+        IkasPageDataInit.initProductPropValue(
+          prop,
+          propValue,
+          pageComponentPropValues
+        );
+      } else if (prop.type === IkasThemeJsonComponentPropType.CATEGORY) {
+        IkasPageDataInit.initCategoryPropValue(
+          prop,
+          propValue,
+          pageComponentPropValues
+        );
+      } else if (prop.type === IkasThemeJsonComponentPropType.BRAND) {
+        IkasPageDataInit.initBrandPropValue(
+          prop,
+          propValue,
+          pageComponentPropValues
+        );
+      } else if (prop.type === IkasThemeJsonComponentPropType.BLOG) {
+        IkasPageDataInit.initBlogPropValue(
+          prop,
+          propValue,
+          pageComponentPropValues
+        );
+      } else if (prop.type === IkasThemeJsonComponentPropType.BLOG_CATEGORY) {
+        IkasPageDataInit.initBlogCategoryPropValue(
+          prop,
+          propValue,
+          pageComponentPropValues
+        );
+      } else if (prop.type === IkasThemeJsonComponentPropType.RAFFLE) {
+        IkasPageDataInit.initRafflePropValue(
+          prop,
+          propValue,
+          pageComponentPropValues
+        );
+      } else if (
+        prop.type === IkasThemeJsonComponentPropType.LINK ||
+        prop.type === IkasThemeJsonComponentPropType.LIST_OF_LINK
+      ) {
+        IkasPageDataInit.initLinkPropValue(
+          prop,
+          propValue,
+          pageComponentPropValues
+        );
+      }
+    }
+  };
+
+  handleUpdatePageParams = async (data: any) => {
+    this.pageParams = data.pageParams;
+    this.isLoading = true;
+    const pageDataProvider = await this.getPagePropValues(
+      this.theme!,
+      this.page!.type,
+      this.pageParams || {}
+    );
+
+    this.pageDataProvider = pageDataProvider;
+    this.isLoading = false;
+  };
+
+  handleUpdatePageComponentOrder = async (data: any) => {
+    if (this.specification)
+      this.specification.components = data.pageComponents.map(
+        (c: IkasThemeJsonPageComponent) => new IkasThemeJsonPageComponent(c)
+      );
+    else
+      this.page!.components = data.pageComponents.map(
+        (c: IkasThemeJsonPageComponent) => new IkasThemeJsonPageComponent(c)
+      );
+  };
+
+  handleAddNewComponent = (data: any) => {
+    const component = new IkasThemeJsonComponent(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 IkasThemeJsonComponent(
+        data.component
+      );
+  };
+
+  handleAddNewPageComponent = async (data: any) => {
+    const pageComponent = new IkasThemeJsonPageComponent(data.pageComponent);
+    if (this.pageComponents.some((pc) => pc.id === pageComponent.id)) return;
+
+    const pageComponentPropValues =
+      await this.pageDataProvider!.getPageComponentPropValues(pageComponent);
+
+    const customDataProps = pageComponentPropValues.component.props.filter(
+      (p) => p.type === IkasThemeJsonComponentPropType.CUSTOM
+    );
+
+    customDataProps.forEach((customDataProp) => {
+      IkasPageDataInit.initCustomDataPropValue(
+        customDataProp,
+        pageComponentPropValues.propValues[customDataProp.name],
+        pageComponentPropValues,
+        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",
+        });
+    }
+  };
+
+  handleEditorReload = () => {
+    window.location.reload();
+  };
+
+  updateThemeSettings = (data: any) => {
+    const settings = data.settings;
+
+    if (this.theme) {
+      this.theme.settings = new IkasThemeJsonSettings(settings);
+    }
+  };
+}
+
+export enum BridgeMessageType {
+  FRAME_DID_LOAD = "FRAME_DID_LOAD",
+  UPDATE_FRAME_DATA = "UPDATE_FRAME_DATA",
+  UPDATE_THEME_JSON = "UPDATE_THEME_JSON",
+  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",
+  EDITOR_PAGE_CHANGE = "EDITOR_PAGE_CHANGE",
+  EDITOR_LOADING_CHANGE = "EDITOR_LOADING_CHANGE",
+  EDITOR_RELOAD = "EDITOR_RELOAD",
+}