Feature/remove sandbox

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@event-inc/embed",
-  "version": "1.0.1",
+  "name": "@integrationos/embed",
+  "version": "1.0.8",
   "description": "A React hook wrapper for Event Embed.",
   "files": [
     "dist",

src/index.ts

@@ -1,4 +1,4 @@
 export { useOauth } from './useOauth';
 export { useSourceEventLink as useSource } from './useSourceEventLink';
 export { useDestinationEventLink as useDestination } from './useDestinationEventLink';
-export { useEventLink as useLink } from './useEventLink';
+export { useEventLink as useEmbed } from './useEventLink';

src/types/index.d.ts

@@ -79,17 +79,17 @@ export interface DestinationEventLinkProps {
 }
 
 export interface EventLinkProps {
-  linkHeaders?: Record<string, unknown>;
-  linkTokenEndpoint: string;
-  environment?: "sandbox" | "production";
   baseUrl?: string;
   title?: string;
   onClose?: () => void;
-  onSuccess?: (integration?: {
-    source?: LinkIntegrationResponse;
-    destination?: LinkIntegrationResponse;
-  }) => void;
+  onSuccess?: (connection: ConnectionRecord) => void;
   onError?: (error: string) => void;
+  selectedConnection?: string;
+  showNameInput?: boolean;
+  token: {
+    url: string;
+    headers?: Record<string, unknown>;
+  }
 }
 
 export interface WindowProps {
@@ -105,12 +105,18 @@ export interface WindowProps {
 }
 
 export interface EventLinkWindowProps {
-  linkTokenEndpoint: string;
-  linkHeaders?: Record<string, unknown>;
+  // linkTokenEndpoint: string;
+  // linkHeaders?: Record<string, unknown>;
   baseUrl?: string;
   environment?: "sandbox" | "production";
   title?: string;
   onClose?: () => void;
+  selectedConnection?: string;
+  showNameInput?: boolean;
+  token: {
+    url: string;
+    headers?: Record<string, unknown>;
+  }
 }
 
 export interface LinkIntegrationResponse {
@@ -131,6 +137,48 @@ export interface LinkIntegrationResponse {
   };
 }
 
+export interface ConnectionRecord {
+  _id: string;
+  platformVersion: string;
+  connectionDefinitionId: string;
+  name: string;
+  key: string;
+  group: string;
+  environment: string;
+  platform: string;
+  secretsServiceId: string;
+  eventAccessId: string;
+  accessKey: string;
+  settings: {
+    parseWebhookBody: boolean;
+    showSecret: boolean;
+    allowCustomEvents: boolean;
+    oauth: boolean;
+  };
+  throughput: {
+    key: string;
+    limit: number;
+  };
+  ownership: {
+    buildableId: string;
+    clientId: string;
+    organizationId: string;
+    projectId: string;
+    userId: string;
+  };
+  createdAt: number;
+  updatedAt: number;
+  updated: boolean;
+  version: string;
+  lastModifiedBy: string;
+  deleted: boolean;
+  changeLog: Record<string, any>; // You can replace 'any' with a more specific type if needed
+  tags: string[];
+  active: boolean;
+  deprecated: boolean;
+}
+
+
 type XeroScopes =
   | "offline_access"
   | "accounting.transactions"

src/useEventLink.tsx

@@ -5,31 +5,31 @@ import { createWindow } from "./window/link";
 export const useEventLink = (props: EventLinkProps) => {
   const linkWindow = createWindow({ ...props });
 
-  useEffect(() => {
-    if (linkWindow) {
-      linkWindow.initialize();
-    }
-  }, [linkWindow]);
-
-  window.addEventListener("message", (event) => {
-    const iFrameWindow = document.getElementById(
-      `event-link`
-    ) as HTMLIFrameElement;
-    if (iFrameWindow?.style?.display === "block") {
-      switch (event.data?.messageType) {
-        case "EXIT_EVENT_LINK":
-          linkWindow.closeLink();
-          break;
-        case "LINK_SUCCESS":
-          props.onSuccess?.(event.data?.message);
-          break;
-        case "LINK_ERROR":
-          props.onError?.(event.data?.message);
-          break;
+   useEffect(() => {
+    const handleMessage = (event: any) => {
+      const iFrameWindow = document.getElementById(`event-link`) as HTMLIFrameElement;
+      if (iFrameWindow?.style?.display === "block") {
+        switch (event.data?.messageType) {
+          case "EXIT_EVENT_LINK":
+            linkWindow.closeLink();
+            break;
+          case "LINK_SUCCESS":
+            props.onSuccess?.(event.data?.message);
+            break;
+          case "LINK_ERROR":
+            props.onError?.(event.data?.message);
+            break;
+        }
       }
-    }
-  });
+    };
+
+    window.addEventListener("message", handleMessage);
 
+    // Clean up the event listener when the component unmounts.
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, []); // The empty dependency array ensures that the effect runs only once
   const open = () => {
     linkWindow.openLink();
   };

src/window/link.ts

@@ -4,65 +4,79 @@ export class EventLinkWindow {
   private linkTokenEndpoint: string;
   private linkHeaders?: object;
   private baseUrl?: string;
-  private environment?: string;
   private onClose?: () => void;
   private title?: string;
+  private selectedConnection?: string;
+  private showNameInput?: boolean;
 
   constructor(props: EventLinkWindowProps) {
-    this.linkTokenEndpoint = props.linkTokenEndpoint;
-    this.linkHeaders = props.linkHeaders;
+    this.linkTokenEndpoint = props.token.url;
+    this.linkHeaders = props.token.headers;
     this.baseUrl = props.baseUrl;
-    this.environment = props.environment;
     this.onClose = props.onClose;
     this.title = props.title;
+    this.selectedConnection = props.selectedConnection;
+    this.showNameInput = props.showNameInput;
   }
 
   private _getBaseUrl() {
     if (this.baseUrl) {
       return this.baseUrl;
     }
-    if (this.environment === "production") {
-      return "https://link.event.dev";
-    }
-    return "https://sandbox-link.event.dev";
+    return "https://embed.integrationos.com";
   }
 
-  public initialize() {
+  public openLink() {
     const container = document.createElement("iframe");
+
+    const jsonString = JSON.stringify({
+      linkTokenEndpoint: this.linkTokenEndpoint,
+      linkHeaders: this.linkHeaders,
+      title: this.title,
+      selectedConnection: this.selectedConnection,
+      showNameInput: this.showNameInput,
+    });
+
+    const base64Encoded = btoa(jsonString);
+    const urlParams = { data: base64Encoded };
+    const queryString = new URLSearchParams(urlParams).toString();
+
+    const url = `${this._getBaseUrl()}?${queryString}`;
+
     document.body.appendChild(container);
     container.style.height = "100%";
     container.style.width = "100%";
     container.style.position = "fixed";
-    container.style.display = "none";
+    container.style.display = "block";
     container.style.backgroundColor = "transparent";
     container.style.inset = "0px";
     container.style.borderWidth = "0px";
     container.id = `event-link`;
-    container.src = this._getBaseUrl();
+    container.src = url;
     container.style.overflow = "hidden auto";
-  }
 
-  public openLink() {
-    const iFrameWindow = document.getElementById(
-      `event-link`
-    ) as HTMLIFrameElement;
-    iFrameWindow.style.display = "block";
-
-    iFrameWindow?.contentWindow?.postMessage(
-      {
-        linkTokenEndpoint: this.linkTokenEndpoint,
-        linkHeaders: this.linkHeaders,
-        title: this.title,
-      },
-      this._getBaseUrl()
-    );
+    container.onload = () => {
+      // Now that the iframe is fully loaded, you can send the message
+      container.contentWindow?.postMessage(
+        {
+          linkTokenEndpoint: this.linkTokenEndpoint,
+          linkHeaders: this.linkHeaders,
+          title: this.title,
+          selectedConnection: this.selectedConnection,
+          showNameInput: this.showNameInput,
+        },
+        url
+      );
+    };
   }
 
   public closeLink() {
     const iFrameWindow = document.getElementById(
       `event-link`
     ) as HTMLIFrameElement;
-    iFrameWindow.style.display = "none";
+    if (iFrameWindow) {
+      iFrameWindow.remove();
+    }
     this.onClose?.();
   }
 }