diff --git a/package-lock.json b/package-lock.json index 7368180..20600f5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { - "name": "@event-inc/link", - "version": "1.0.7", + "name": "@integrationos/embed", + "version": "1.0.8", "lockfileVersion": 2, "requires": true, "packages": { "": { - "name": "@event-inc/link", - "version": "1.0.7", + "name": "@integrationos/embed", + "version": "1.0.8", "license": "MIT", "devDependencies": { "@babel/cli": "^7.12.10", @@ -3546,6 +3546,12 @@ "pako": "~1.0.5" } }, + "node_modules/browserify-zlib/node_modules/pako": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", + "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==", + "dev": true + }, "node_modules/browserslist": { "version": "4.21.5", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz", @@ -9197,12 +9203,6 @@ "node": ">=6" } }, - "node_modules/pako": { - "version": "1.0.11", - "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", - "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==", - "dev": true - }, "node_modules/parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", @@ -13606,6 +13606,14 @@ "dev": true, "requires": { "pako": "~1.0.5" + }, + "dependencies": { + "pako": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", + "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==", + "dev": true + } } }, "browserslist": { @@ -17654,12 +17662,6 @@ "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", "dev": true }, - "pako": { - "version": "1.0.11", - "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz", - "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==", - "dev": true - }, "parent-module": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz", diff --git a/package.json b/package.json index 913412a..300ca30 100644 --- a/package.json +++ b/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", diff --git a/src/index.ts b/src/index.ts index 548c65c..77ecccf 100644 --- a/src/index.ts +++ b/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'; \ No newline at end of file +export { useEventLink as useEmbed } from './useEventLink'; \ No newline at end of file diff --git a/src/types/index.d.ts b/src/types/index.d.ts index b2e825c..5870276 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -79,17 +79,17 @@ export interface DestinationEventLinkProps { } export interface EventLinkProps { - linkHeaders?: Record; - 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; + } } export interface WindowProps { @@ -105,12 +105,18 @@ export interface WindowProps { } export interface EventLinkWindowProps { - linkTokenEndpoint: string; - linkHeaders?: Record; + // linkTokenEndpoint: string; + // linkHeaders?: Record; baseUrl?: string; environment?: "sandbox" | "production"; title?: string; onClose?: () => void; + selectedConnection?: string; + showNameInput?: boolean; + token: { + url: string; + headers?: Record; + } } 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; // You can replace 'any' with a more specific type if needed + tags: string[]; + active: boolean; + deprecated: boolean; +} + + type XeroScopes = | "offline_access" | "accounting.transactions" diff --git a/src/useEventLink.tsx b/src/useEventLink.tsx index 912cf2b..2ae179c 100644 --- a/src/useEventLink.tsx +++ b/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(); }; diff --git a/src/window/link.ts b/src/window/link.ts index 23fa2b1..68bb539 100644 --- a/src/window/link.ts +++ b/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?.(); } }