feat: Add entityId & appHost params

package/README.md

@@ -140,6 +140,7 @@ You can pass any of these parameters for your widget:
 | onCardClick        | Called when card is clicked                        | `(id: string) => void`                             | -         |
 | customIntegrations | Array of custom or native integrations             | `{ id: string; name: string; iconURL: string; replacedZapierAppId: string; }[]` | []        |
 
+
 ## Technical Support or Questions
 
 If you have questions or need help integrating the editor please [contact us](https://nepflow.dev/contact-us) instead of opening an issue.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nepflow/integration-widget",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",

package/src/models/IntegrationWidget.ts

@@ -8,9 +8,11 @@ interface IframeConfig {
 }
 
 export class IntegrationWidget {
+  private readonly entityId: string
   private readonly baseUrl: string
 
   constructor (elementId: string, params: IntegrationWidgetConfig, iframeParams?: IframeConfig) {
+    this.entityId = this.generateEntityId()
     this.baseUrl = iframeParams?.baseUrl ?? 'https://widget.nepflow.dev'
 
     const widgetElement = document.getElementById(elementId)
@@ -33,6 +35,12 @@ export class IntegrationWidget {
       }
     }
 
+    // Add widgetId
+    searchParams.append('entityId', this.entityId)
+
+    // Add parent window host
+    searchParams.append('appHost', window.location.host)
+
     // Create the iframe element
     const iframe = document.createElement('iframe')
     iframe.src = `${this.baseUrl}/${params.zapierAppId || ''}?${searchParams.toString()}`
@@ -52,7 +60,12 @@ export class IntegrationWidget {
         return
       }
 
-      const { action, data } = event.data
+      const { action, data, entityId: receivedEntityId } = event.data
+
+      if (receivedEntityId !== this.entityId) {
+        return
+      }
+
       console.debug('[Nepflow] Received message:', action, data)
 
       switch (action) {
@@ -61,10 +74,16 @@ export class IntegrationWidget {
           break
         case 'handleCardClick':
           if (typeof params.onCardClick === 'function') {
-            params.onCardClick(data.id)
+            params.onCardClick(data.id as string)
           };
           break
       }
     })
   }
+
+  private generateEntityId (): string {
+    const prefix = 'integration-widget-'
+    const randomSuffix = Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
+    return prefix + randomSuffix
+  }
 }

web/package.json

@@ -8,10 +8,7 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "script:transpile": "babel scripts/loader-v1.js --out-file public/loader-v1.js --presets babel-preset-es2015",
-    "script:minimize": "terser public/loader-v1.js -o public/loader-v1.js",
-    "script:compile": "npm run script:transpile && npm run script:minimize"
+    "preview": "vite preview"
   },
   "dependencies": {
     "axios": "^1.6.7",

web/src/clients/api/queries/getGuide.ts

@@ -1,8 +1,13 @@
 import apiClient from '..'
+import { appHost } from '../../../globals'
 import { type IntegrationGuide } from '../../../models/integrationGuide'
 
 async function getGuide (serviceId: string, secondServiceId: string, triggerId: string, actionId: string): Promise<IntegrationGuide> {
-  const res = await apiClient.get(`/services/${serviceId}/guide/${secondServiceId}/triggers/${triggerId}/actions/${actionId}`)
+  const res = await apiClient.get(`/services/${serviceId}/guide/${secondServiceId}/triggers/${triggerId}/actions/${actionId}`, {
+    params: {
+      appHost
+    }
+  })
   const result = await res.data
 
   return result

web/src/clients/api/queries/getService.ts

@@ -1,8 +1,13 @@
 import apiClient from '..'
+import { appHost } from '../../../globals'
 import { type Service } from '../../../models/service'
 
 async function getService (key: string): Promise<Service> {
-  const res = await apiClient.get(`/services/${key}`)
+  const res = await apiClient.get(`/services/${key}`, {
+    params: {
+      appHost
+    }
+  })
   const result = await res.data
 
   return result

web/src/clients/api/queries/getServices.ts

@@ -1,8 +1,16 @@
 import apiClient from '..'
+import { appHost } from '../../../globals'
 import { type Service } from '../../../models/service'
 
 async function getServices (search: string = '', skip: number = 0, take: number = 60): Promise<Service[]> {
-  const res = await apiClient.get(`/services?skip=${skip}&search=${search}&take=${take}`)
+  const res = await apiClient.get('/services', {
+    params: {
+      appHost,
+      skip,
+      search,
+      take
+    }
+  })
   const result = await res.data
 
   return result.services

web/src/components/ServiceCatalog/ServiceCatalog.tsx

@@ -32,13 +32,13 @@ export default function ServiceCatalog () {
   })
 
   const newCustomCardsCount = useMemo(() => {
-    return searchValue ? 0 : config.customCards?.filter(c => !c.replacedZapierAppId)?.length;
-  }, [config.customCards, searchValue]);
+    return searchValue ? 0 : config.customCards?.filter(c => !c.replacedZapierAppId)?.length
+  }, [config.customCards, searchValue])
 
   useEffect(() => {
-    setData({ services: [], loading: true });
+    setData({ services: [], loading: true })
 
-    loadServices(undefined, 0, 60 - newCustomCardsCount);
+    loadServices(undefined, 0, 60 - newCustomCardsCount)
   }, [])
 
   useEffect(() => {
@@ -88,20 +88,20 @@ export default function ServiceCatalog () {
   }
 
   const services: Service[] = useMemo(() => {
-    const services = [...data.services];
+    const services = [...data.services]
 
     if (config.customCards?.length) {
-      config.customCards.map(customCard => {
+      config.customCards.forEach(customCard => {
         if (customCard.replacedZapierAppId) {
-          const replaceableServiceIndex = services.findIndex(s => s.id === customCard.replacedZapierAppId);
+          const replaceableServiceIndex = services.findIndex(s => s.id === customCard.replacedZapierAppId)
           if (replaceableServiceIndex !== -1) {
             services[replaceableServiceIndex] = {
               id: customCard.id,
               name: customCard.name,
               iconURL: customCard.iconURL,
               isCustom: true,
               triggers: [],
-              actions: [],
+              actions: []
             }
           };
         } else if (!searchValue) {
@@ -111,14 +111,14 @@ export default function ServiceCatalog () {
             iconURL: customCard.iconURL,
             isCustom: true,
             triggers: [],
-            actions: [],
+            actions: []
           })
         }
-      });
+      })
     };
-    
-    return services;
-  }, [data.services, config.customCards]);
+
+    return services
+  }, [data.services, config.customCards])
 
   return (
     <div className={styles.container}>
@@ -139,7 +139,7 @@ export default function ServiceCatalog () {
         ))}
 
         {!data.loading && services.map(service => (
-          <div key={service.id} className={styles.listLink} onClick={() => handleServiceClick(service)}>
+          <div key={service.id} className={styles.listLink} onClick={() => { handleServiceClick(service) }}>
             <div className={styles.listItem}>
               <img src={service.iconURL} className={styles.listItemIcon} />
               <span className={styles.listItemName}>

web/src/contexts/configContext.ts

@@ -9,7 +9,7 @@ export const defaultConfig: Config = {
   cardBorderColor: configSearchParams.get('cardBorderColor') || '#fff',
   innerSpace: configSearchParams.has('innerSpace') ? parseInt(configSearchParams.get('innerSpace')!) : 24,
   autoVerticalResize: configSearchParams.get('autoVerticalResize') === 'true',
-  customCards: configSearchParams.has('customCards') ? JSON.parse(configSearchParams.get('customCards')!) : [],
+  customCards: configSearchParams.has('customCards') ? JSON.parse(configSearchParams.get('customCards')!) : []
 }
 
 const ConfigContext = createContext<Config>(defaultConfig)

web/src/globals.ts

@@ -0,0 +1,4 @@
+const configSearchParams = new URL(window.location.href).searchParams
+
+export const entityId = configSearchParams.get('entityId')!
+export const appHost = configSearchParams.get('appHost')!

web/src/models/config.ts

@@ -1,15 +1,15 @@
 interface CustomCard {
-  id: string; 
-  name: string; 
-  iconURL: string; 
-  replacedZapierAppId?: string;
+  id: string
+  name: string
+  iconURL: string
+  replacedZapierAppId?: string
 }
 
 export interface Config {
-  backgroundColor: string;
-  cardColor: string;
-  cardBorderColor: string;
-  innerSpace: number;
-  autoVerticalResize: boolean;
-  customCards: CustomCard[];
+  backgroundColor: string
+  cardColor: string
+  cardBorderColor: string
+  innerSpace: number
+  autoVerticalResize: boolean
+  customCards: CustomCard[]
 }

web/src/utils/postMessageToParent.ts

@@ -1,3 +1,5 @@
+import { entityId } from '../globals'
+
 type Action =
     | { action: 'setWidgetHeight', data: { widgetHeight: number } }
     | { action: 'handleCardClick', data: { id: string } }
@@ -6,7 +8,8 @@ type Action =
 function postMessageToParent (action: Action) {
   window.parent?.postMessage({
     action: action.action,
-    data: action.data
+    data: action.data,
+    entityId
   }, '*')
 }