@ikas/storefront 4.0.0-alpha.7 → 4.0.0-alpha.70

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

@@ -1,847 +0,0 @@
-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",
-}