@worthai/onboarding-sdk 2.0.0

package/README.md

@@ -0,0 +1,282 @@
+# @joinworth/onboarding-sdk
+
+A TypeScript SDK for seamless cross-origin communication between parent and child sites using iframe postMessage API. This SDK provides type-safe utilities for building onboarding flows with secure message passing between applications.
+
+## 📦 Installation
+
+### Within the monorepo
+
+```bash
+# Add as workspace dependency
+pnpm add @joinworth/onboarding-sdk@workspace:*
+```
+
+### External projects
+
+```bash
+# Using npm
+npm install @joinworth/onboarding-sdk
+
+# Using pnpm
+pnpm install @joinworth/onboarding-sdk
+```
+
+## 🛠️ API Reference
+
+### Onboarding-Specific Utilities
+
+#### `createOnboardingApp(args)`
+
+Creates an onboarding app instance for parent-to-child communication with type-safe onboarding messages.
+
+> **Note**: The following example is illustrative code for vanilla TypeScript. Adapt to your framework's patterns when using React or other JavaScript frameworks.
+
+```typescript
+import { createOnboardingApp } from '@joinworth/onboarding-sdk';
+
+// Create an onboarding app instance and communicate with it
+const onboardingApp = createOnboardingApp({
+  origin: 'https://onboarding-app.com',
+  inviteToken: 'YOUR_INVITE_TOKEN',
+  mode: 'embedded',
+});
+
+// Listen for onboarding messages
+const subscription = onboardingApp.subscribe((event) => {
+  if (event.data.type === 'ROUTE_URL') {
+    console.log('Current route:', event.data.payload.url);
+  }
+});
+
+// ⚠️ Important: Remember to unsubscribe when component unmounts or cleanup is needed
+// subscription.unsubscribe();
+
+// Append the onboarding app iframe
+document
+  .getElementById('onboarding-container')
+  .appendChild(onboardingApp.iframe);
+
+// Adding event listeners to Prev and Next buttons (for vanilla JS)
+
+const prevButton = document.getElementById('onboarding-prev');
+const nextButton = document.getElementById('onboarding-next');
+
+// Next stage navigation command
+prevButton && prevButton.addEventListener('click', () => onboardingApp.prev());
+
+// Prev stage navigation command
+nextButton && nextButton.addEventListener('click', () => onboardingApp.next());
+
+// In your HTML:
+// <div id="onboarding-container"></div>
+// <button id="onboarding-prev">Back</button>
+// <button id="onboarding-next">Next</button>
+```
+
+#### `createOnboardingConsumerApp(args)`
+
+Creates an onboarding consumer app instance for child-to-parent communication with type-safe onboarding messages.
+
+> **Note**: The following example is illustrative code for vanilla TypeScript. Adapt to your framework's patterns when using React or other JavaScript frameworks.
+
+```typescript
+import { createOnboardingConsumerApp } from '@joinworth/onboarding-sdk';
+
+// Create an onboarding consumer app instance for child-to-parent communication
+const consumerApp = createOnboardingConsumerApp({
+  allowedOrigins: ["http://localhost:6006", "http://localhost:7003"],
+});
+
+// Send onboarding messages to parent
+consumerApp.postMessage({
+    type: "ROUTE_URL";
+    payload: {
+        url: '/getting-started';
+    };
+});
+
+// Listen for messages from parent
+const subscription = consumerApp.subscribe((event) => {
+  if (event.data.type === 'NEXT_STAGE') {
+    // Navigate to next stage
+  }
+});
+
+// ⚠️ Important: Remember to unsubscribe when component unmounts or cleanup is needed
+// subscription.unsubscribe();
+```
+
+## 📋 Message Types
+
+### OnboardingAppMessage Events (Child → Parent)
+
+| Event Type           | Description                                                            |
+| -------------------- | ---------------------------------------------------------------------- |
+| `ROUTE_URL`          | Notifies parent site of current route changes in onboarding app        |
+| `IFRAME_RESIZE`      | Notifies parent site when the iframe needs to resize (includes height) |
+| `IFRAME_INITIALIZED` | Notifies parent site when the iframe has finished initializing         |
+
+### OnboardingConsumerAppMessage Events (Parent → Child)
+
+| Event Type                       | Description                                                                    |
+| -------------------------------- | ------------------------------------------------------------------------------ |
+| `NEXT_STAGE`                     | Navigates the onboarding app to the next stage                                 |
+| `PREV_STAGE`                     | Navigates the onboarding app to the previous stage                             |
+| `SKIP_STAGE`                     | Skips the current stage in the onboarding app                                  |
+| `INVITE_TOKEN_SENT`              | Notifies child site that an invite token has been sent (includes token)        |
+| `IFRAME_RENDERED_ON_PARENT_SITE` | Notifies child site that the iframe has been rendered on the parent site       |
+| `REFRESH_SIZE`                   | Requests the child site to refresh its size                                    |
+| `IFRAME_INITIALIZED`             | Notifies child site that the iframe has been initialized (includes mode)       |
+| `SET_CUSTOM_CSS`                 | Sets custom CSS styles for the iframe (includes CSS string)                    |
+| `SET_IFRAME_MODE`                | Sets the iframe mode (includes mode: 'embedded', 'non-embedded', or undefined) |
+
+## 🔧 Usage Examples
+
+> **Note**: The following examples are illustrative code for vanilla TypeScript. If you're using React or other JavaScript frameworks, the code should be adapted to the corresponding framework patterns (hooks, lifecycle methods, etc.).
+
+### Parent Site Implementation
+
+```typescript
+import { createOnboardingApp } from '@joinworth/onboarding-sdk';
+
+// Initialize the onboarding app
+const onboardingApp = createOnboardingApp({
+  origin: 'https://onboarding.example.com',
+});
+
+// Mount the iframe
+document
+  .getElementById('onboarding-container')
+  ?.appendChild(onboardingApp.iframe);
+
+// Listen for route changes
+const subscription = onboardingApp.subscribe((event) => {
+  if (event.data.type === 'ROUTE_URL') {
+    //Some logic here...
+  }
+});
+
+// ⚠️ Important: Remember to unsubscribe when component unmounts or cleanup is needed
+// subscription.unsubscribe();
+
+// Next stage navigation command
+onboardingApp.next();
+
+// Prev stage navigation command
+onboardingApp.prev();
+```
+
+### Child Site Implementation
+
+```typescript
+import { createOnboardingConsumerApp } from '@joinworth/onboarding-sdk';
+
+// Initialize the consumer app
+const consumerApp = createOnboardingConsumerApp({
+  allowedOrigins: ['https://parent.example.com'],
+});
+
+// Listen for parent commands
+const subscription = consumerApp.subscribe((event) => {
+  if (event.data.type === 'NEXT_STAGE') {
+    // Add some logic here...
+  }
+});
+
+// ⚠️ Important: Remember to unsubscribe when component unmounts or cleanup is needed
+// subscription.unsubscribe();
+
+// Send form data to parent
+onboardingConsumerApp.postMessage({
+  type: 'ROUTE_URL',
+  payload: { url: '/some-route-here' },
+});
+```
+
+### Custom Raw CSS
+
+The SDK allows parent sites to inject custom CSS styles into the child iframe. This is useful for customizing the appearance of the onboarding flow to match your brand or design requirements.
+
+#### Parent Site: Sending Custom CSS
+
+```typescript
+import { createOnboardingApp } from '@joinworth/onboarding-sdk';
+
+const onboardingApp = createOnboardingApp({
+  origin: 'https://onboarding.example.com',
+});
+
+// Send custom CSS to the child iframe
+onboardingApp.postMessage({
+  type: 'SET_CUSTOM_CSS',
+  payload: {
+    css: `
+      body {
+        background: #f0f0f0;
+        font-family: 'Custom Font', sans-serif;
+      }
+      .onboarding-container {
+        padding: 20px;
+        border-radius: 8px;
+      }
+    `,
+  },
+});
+```
+
+#### Child Site: Receiving and Applying Custom CSS
+
+```typescript
+import { createOnboardingConsumerApp } from '@joinworth/onboarding-sdk';
+
+const consumerApp = createOnboardingConsumerApp({
+  allowedOrigins: ['https://parent.example.com'],
+});
+
+// Listen for custom CSS messages
+const subscription = consumerApp.subscribe((event) => {
+  if (event.data.type === 'SET_CUSTOM_CSS') {
+    // Create or update a style element
+    let styleElement = document.getElementById('custom-css-injection');
+
+    if (!styleElement) {
+      styleElement = document.createElement('style');
+      styleElement.id = 'custom-css-injection';
+      document.head.appendChild(styleElement);
+    }
+
+    // Apply the custom CSS
+    styleElement.innerHTML = event.data.payload.css;
+  }
+});
+
+// ⚠️ Important: Remember to unsubscribe when component unmounts or cleanup is needed
+// subscription.unsubscribe();
+```
+
+> **Note**: The child site should handle CSS injection securely and validate that the CSS doesn't contain malicious content. Consider sanitizing the CSS string before applying it in production environments.
+
+## 🔒 Security
+
+The SDK includes built-in security measures:
+
+- **Origin validation**: All messages are validated against the specified origin
+- **Type safety**: TypeScript ensures message structure integrity
+
+## 🧪 Development
+
+### Building the SDK
+
+```bash
+pnpm build
+```
+
+### Running Storybook
+
+```bash
+pnpm storybook
+```
+
+## 📝 License
+
+Private package - All rights reserved.

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './interfaces';
+export * from './utils';

package/dist/index.js

@@ -0,0 +1,200 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+const createChildSite = /* @__PURE__ */ __name((args) => {
+  const { origin, initialRoute = "", mode } = args;
+  const queryParams = args.queryParams;
+  const iframe = document.createElement("iframe");
+  const setMode = /* @__PURE__ */ __name((mode2) => {
+    postMessage({
+      type: "SET_IFRAME_MODE",
+      payload: { mode: mode2 }
+    });
+  }, "setMode");
+  const refreshSize = /* @__PURE__ */ __name(() => {
+    postMessage({ type: "REFRESH_SIZE" });
+  }, "refreshSize");
+  const buildIframeSrc = /* @__PURE__ */ __name(() => {
+    let srcUrl;
+    if (initialRoute) {
+      srcUrl = new URL(initialRoute.replace(/^\//, ""), origin);
+    } else {
+      srcUrl = new URL(origin);
+    }
+    for (const [key, value] of Object.entries(queryParams || {})) {
+      if (typeof value === "string") {
+        srcUrl.searchParams.set(key, value);
+      }
+    }
+    return srcUrl;
+  }, "buildIframeSrc");
+  const subscribe = /* @__PURE__ */ __name((callback) => {
+    const handler = /* @__PURE__ */ __name((event) => {
+      if (event.origin !== origin) {
+        console.warn("Blocked message from unauthorized origin:", event.origin);
+        return;
+      }
+      callback(event);
+    }, "handler");
+    window.addEventListener("message", handler);
+    return {
+      unsubscribe: /* @__PURE__ */ __name(() => window.removeEventListener("message", handler), "unsubscribe")
+    };
+  }, "subscribe");
+  const initializeChildSite = /* @__PURE__ */ __name(() => {
+    iframe.style.width = "100%";
+    iframe.style.height = "100%";
+    iframe.style.border = "none";
+    iframe.src = buildIframeSrc().toString();
+    subscribe((event) => {
+      switch (event.data.type) {
+        case "IFRAME_RESIZE":
+          iframe.style.border = "none";
+          iframe.style.height = `${event.data.payload.height}px`;
+          break;
+        case "IFRAME_INITIALIZED":
+          setMode(mode);
+          postMessage({
+            type: "IFRAME_RENDERED_ON_PARENT_SITE"
+          });
+          break;
+      }
+    });
+  }, "initializeChildSite");
+  const postMessage = /* @__PURE__ */ __name((message, transfer) => {
+    iframe.contentWindow?.postMessage(message, origin, transfer);
+  }, "postMessage");
+  initializeChildSite();
+  return { iframe, subscribe, postMessage, setMode, refreshSize };
+}, "createChildSite");
+const createOnboardingApp = /* @__PURE__ */ __name((args) => {
+  const queryParams = {};
+  const { inviteToken, ...restArgs } = args;
+  const childApp = createChildSite({
+    ...restArgs,
+    queryParams
+  });
+  const postMessage = /* @__PURE__ */ __name((message) => {
+    childApp.postMessage(message);
+  }, "postMessage");
+  const subscribe = /* @__PURE__ */ __name((callback) => {
+    return childApp.subscribe(callback);
+  }, "subscribe");
+  const skip = /* @__PURE__ */ __name(() => {
+    postMessage({ type: "SKIP_STAGE" });
+  }, "skip");
+  const next = /* @__PURE__ */ __name(() => {
+    postMessage({ type: "NEXT_STAGE" });
+  }, "next");
+  const prev = /* @__PURE__ */ __name(() => {
+    postMessage({ type: "PREV_STAGE" });
+  }, "prev");
+  const setMode = /* @__PURE__ */ __name((mode) => {
+    postMessage({ type: "SET_IFRAME_MODE", payload: { mode } });
+  }, "setMode");
+  const setCustomCss = /* @__PURE__ */ __name((css) => {
+    postMessage({ type: "SET_CUSTOM_CSS", payload: { css } });
+  }, "setCustomCss");
+  const onIframeInitialized = /* @__PURE__ */ __name(() => {
+    const subscription = subscribe((event) => {
+      if (event.data.type === "IFRAME_INITIALIZED") {
+        postMessage({ type: "INVITE_TOKEN_SENT", payload: { inviteToken } });
+        subscription.unsubscribe();
+      }
+    });
+  }, "onIframeInitialized");
+  onIframeInitialized();
+  return {
+    subscribe,
+    setMode,
+    setCustomCss,
+    iframe: childApp.iframe,
+    next,
+    prev,
+    skip,
+    refreshSize: childApp.refreshSize
+  };
+}, "createOnboardingApp");
+const getURLQueryParams = /* @__PURE__ */ __name(() => {
+  const urlSearchParams = new URLSearchParams(window.location.search);
+  const queryParams = {};
+  urlSearchParams.forEach((value, key) => {
+    queryParams[key] = value;
+  });
+  return queryParams;
+}, "getURLQueryParams");
+const createParentSite = /* @__PURE__ */ __name((args) => {
+  const { allowedOrigins } = args;
+  const queryParams = getURLQueryParams();
+  const notifyHeight = /* @__PURE__ */ __name(() => {
+    const height = document.body.scrollHeight;
+    postMessage({
+      type: "IFRAME_RESIZE",
+      payload: { height }
+    });
+  }, "notifyHeight");
+  const postMessage = /* @__PURE__ */ __name((message) => {
+    for (const origin of allowedOrigins) {
+      window.parent.postMessage(message, origin);
+    }
+  }, "postMessage");
+  const subscribe = /* @__PURE__ */ __name((callback) => {
+    const handler = /* @__PURE__ */ __name((event) => {
+      if (!allowedOrigins.includes(event.origin)) {
+        console.warn("Blocked message from unauthorized origin:", event.origin);
+        return;
+      }
+      callback(event);
+    }, "handler");
+    window.addEventListener("message", handler);
+    return {
+      unsubscribe: /* @__PURE__ */ __name(() => window.removeEventListener("message", handler), "unsubscribe")
+    };
+  }, "subscribe");
+  const notifySize = /* @__PURE__ */ __name(() => {
+    notifyHeight();
+  }, "notifySize");
+  const initializeParentSite = /* @__PURE__ */ __name(() => {
+    const observer = new ResizeObserver(notifySize);
+    observer.observe(document.body);
+    subscribe((event) => {
+      switch (event.data.type) {
+        case "SET_IFRAME_MODE":
+          const mode = event.data.payload.mode;
+          document.body.style.overflow = mode === "embedded" ? "hidden" : "auto";
+          break;
+        case "REFRESH_SIZE":
+          notifySize();
+          break;
+      }
+    });
+    postMessage({ type: "IFRAME_INITIALIZED" });
+  }, "initializeParentSite");
+  initializeParentSite();
+  return {
+    notifySize,
+    subscribe,
+    postMessage,
+    queryParams
+  };
+}, "createParentSite");
+const createOnboardingConsumerApp = /* @__PURE__ */ __name((args) => {
+  const parentApp = createParentSite(args);
+  const postMessage = /* @__PURE__ */ __name((message) => {
+    parentApp.postMessage(message);
+  }, "postMessage");
+  const subscribe = /* @__PURE__ */ __name((callback) => {
+    return parentApp.subscribe(callback);
+  }, "subscribe");
+  return {
+    postMessage,
+    subscribe,
+    notifySize: parentApp.notifySize
+  };
+}, "createOnboardingConsumerApp");
+export {
+  createChildSite,
+  createOnboardingApp,
+  createOnboardingConsumerApp,
+  createParentSite
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/utils/createChildSite/index.ts","../src/utils/createOnboardingApp/index.ts","../src/utils/getURLQueryParams/index.ts","../src/utils/createParentSite/index.ts","../src/utils/createOnboardingConsumerApp/index.ts"],"sourcesContent":["import type { AnyMessage } from '@/interfaces/AnyMessage';\nimport type { IframeMode } from '@/interfaces/IframeMode';\nimport type { IframeQueryParams } from '@/interfaces/IframeQueryParams';\nimport type { ParentSiteMessage } from '@/interfaces/ParentSiteMessage';\n\nexport const createChildSite = (args: {\n  origin: string;\n  initialRoute?: string;\n  queryParams?: IframeQueryParams;\n  mode?: IframeMode;\n}) => {\n  const { origin, initialRoute = '', mode } = args;\n  const queryParams = args.queryParams;\n  const iframe = document.createElement('iframe');\n\n  const setMode = (mode: IframeMode) => {\n    postMessage<ParentSiteMessage>({\n      type: 'SET_IFRAME_MODE',\n      payload: { mode },\n    });\n  };\n\n  const refreshSize = () => {\n    postMessage<ParentSiteMessage>({ type: 'REFRESH_SIZE' });\n  };\n\n  const buildIframeSrc = () => {\n    let srcUrl: URL;\n    if (initialRoute) {\n      srcUrl = new URL(initialRoute.replace(/^\\//, ''), origin);\n    } else {\n      srcUrl = new URL(origin);\n    }\n\n    for (const [key, value] of Object.entries(queryParams || {})) {\n      if (typeof value === 'string') {\n        srcUrl.searchParams.set(key, value);\n      }\n    }\n\n    return srcUrl;\n  };\n\n  const subscribe = <T extends AnyMessage>(\n    callback: (event: MessageEvent<T>) => void\n  ) => {\n    const handler = (event: MessageEvent<T>) => {\n      if (event.origin !== origin) {\n        console.warn('Blocked message from unauthorized origin:', event.origin);\n        return;\n      }\n      callback(event);\n    };\n\n    window.addEventListener('message', handler);\n    return {\n      unsubscribe: () => window.removeEventListener('message', handler),\n    };\n  };\n\n  const initializeChildSite = () => {\n    iframe.style.width = '100%';\n    iframe.style.height = '100%';\n    iframe.style.border = 'none';\n    iframe.src = buildIframeSrc().toString();\n\n    subscribe((event) => {\n      switch (event.data.type) {\n        case 'IFRAME_RESIZE':\n          iframe.style.border = 'none';\n          iframe.style.height = `${event.data.payload.height}px`;\n          break;\n        case 'IFRAME_INITIALIZED':\n          setMode(mode);\n          postMessage<ParentSiteMessage>({\n            type: 'IFRAME_RENDERED_ON_PARENT_SITE',\n          });\n          break;\n      }\n    });\n  };\n\n  const postMessage = <TMessage extends AnyMessage>(\n    message: TMessage,\n    transfer?: Transferable[]\n  ) => {\n    iframe.contentWindow?.postMessage(message, origin, transfer);\n  };\n\n  initializeChildSite();\n\n  return { iframe, subscribe, postMessage, setMode, refreshSize };\n};\n","import type { AnyMessage } from '@/interfaces/AnyMessage';\nimport type { IframeQueryParams } from '@/interfaces/IframeQueryParams';\nimport type { OnboardingAppMessage } from '@/interfaces/OnboardingAppMessage';\nimport type { OnboardingAppMode } from '@/interfaces/OnboardingAppMode';\nimport type { OnboardingConsumerAppMessage } from '@/interfaces/OnboardingConsumerAppMessage';\nimport { createChildSite } from '@/utils/createChildSite';\n\nexport const createOnboardingApp = (args: {\n  origin: string;\n  inviteToken: string;\n  mode?: OnboardingAppMode;\n}) => {\n  const queryParams: IframeQueryParams = {};\n  const { inviteToken, ...restArgs } = args;\n  const childApp = createChildSite({\n    ...restArgs,\n    queryParams,\n  });\n\n  const postMessage = (message: OnboardingConsumerAppMessage) => {\n    childApp.postMessage(message as unknown as AnyMessage);\n  };\n\n  const subscribe = (\n    callback: (event: MessageEvent<OnboardingAppMessage>) => void\n  ) => {\n    return childApp.subscribe(callback);\n  };\n\n  const skip = () => {\n    postMessage({ type: 'SKIP_STAGE' });\n  };\n\n  const next = () => {\n    postMessage({ type: 'NEXT_STAGE' });\n  };\n\n  const prev = () => {\n    postMessage({ type: 'PREV_STAGE' });\n  };\n\n  const setMode = (mode: OnboardingAppMode) => {\n    postMessage({ type: 'SET_IFRAME_MODE', payload: { mode } });\n  };\n\n  const setCustomCss = (css: string) => {\n    postMessage({ type: 'SET_CUSTOM_CSS', payload: { css } });\n  };\n\n  const onIframeInitialized = () => {\n    const subscription = subscribe((event) => {\n      if (event.data.type === 'IFRAME_INITIALIZED') {\n        postMessage({ type: 'INVITE_TOKEN_SENT', payload: { inviteToken } });\n        subscription.unsubscribe();\n      }\n    });\n  };\n\n  onIframeInitialized();\n\n  return {\n    subscribe,\n    setMode,\n    setCustomCss,\n    iframe: childApp.iframe,\n    next,\n    prev,\n    skip,\n    refreshSize: childApp.refreshSize,\n  };\n};\n","import type { QueryParams } from '@/interfaces/QueryParams';\n\nexport const getURLQueryParams = <T extends QueryParams>() => {\n  const urlSearchParams = new URLSearchParams(window.location.search);\n  const queryParams: QueryParams = {};\n  urlSearchParams.forEach((value, key) => {\n    queryParams[key] = value;\n  });\n\n  return queryParams as T;\n};\n","import type { AnyMessage } from '@/interfaces/AnyMessage';\nimport type { ChildSiteMessage } from '@/interfaces/ChildSiteMessage';\nimport type { IframeMode } from '@/interfaces/IframeMode';\nimport type { IframeQueryParams } from '@/interfaces/IframeQueryParams';\nimport { getURLQueryParams } from '@/utils/getURLQueryParams';\n\nexport const createParentSite = (args: { allowedOrigins: string[] }) => {\n  const { allowedOrigins } = args;\n  const queryParams = getURLQueryParams<IframeQueryParams>();\n\n  const notifyHeight = () => {\n    const height = document.body.scrollHeight;\n    postMessage<ChildSiteMessage>({\n      type: 'IFRAME_RESIZE',\n      payload: { height },\n    });\n  };\n\n  const postMessage = <TMessage extends AnyMessage>(message: TMessage) => {\n    for (const origin of allowedOrigins) {\n      window.parent.postMessage(message, origin);\n    }\n  };\n\n  const subscribe = <T extends AnyMessage>(\n    callback: (event: MessageEvent<T>) => void\n  ) => {\n    const handler = (event: MessageEvent<T>) => {\n      if (!allowedOrigins.includes(event.origin)) {\n        console.warn('Blocked message from unauthorized origin:', event.origin);\n        return;\n      }\n      callback(event);\n    };\n\n    window.addEventListener('message', handler);\n    return {\n      unsubscribe: () => window.removeEventListener('message', handler),\n    };\n  };\n\n  const notifySize = () => {\n    notifyHeight();\n  };\n\n  const initializeParentSite = () => {\n    const observer = new ResizeObserver(notifySize);\n    observer.observe(document.body);\n\n    subscribe((event) => {\n      switch (event.data.type) {\n        case 'SET_IFRAME_MODE':\n          const mode = event.data.payload.mode as IframeMode;\n          document.body.style.overflow =\n            mode === 'embedded' ? 'hidden' : 'auto';\n          break;\n        case 'REFRESH_SIZE':\n          notifySize();\n          break;\n        default:\n          break;\n      }\n    });\n\n    postMessage<ChildSiteMessage>({ type: 'IFRAME_INITIALIZED' });\n  };\n\n  initializeParentSite();\n\n  return {\n    notifySize,\n    subscribe,\n    postMessage,\n    queryParams,\n  };\n};\n","import type { OnboardingAppMessage } from '@/interfaces/OnboardingAppMessage';\nimport type { OnboardingConsumerAppMessage } from '@/interfaces/OnboardingConsumerAppMessage';\nimport { createParentSite } from '@/utils/createParentSite';\n\nexport const createOnboardingConsumerApp = (args: {\n  allowedOrigins: string[];\n}) => {\n  const parentApp = createParentSite(args);\n\n  const postMessage = (message: OnboardingAppMessage) => {\n    parentApp.postMessage(message);\n  };\n\n  const subscribe = (\n    callback: (event: MessageEvent<OnboardingConsumerAppMessage>) => void\n  ) => {\n    return parentApp.subscribe(callback);\n  };\n\n  return {\n    postMessage,\n    subscribe,\n    notifySize: parentApp.notifySize,\n  };\n};\n"],"names":["mode"],"mappings":"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"}

package/dist/interfaces/AnyMessage.d.ts

@@ -0,0 +1,4 @@
+export type AnyMessage = {
+    type: string;
+    payload?: any;
+};

package/dist/interfaces/ChildSite.d.ts

@@ -0,0 +1,2 @@
+import { createChildSite } from '../utils/createChildSite';
+export type ChildSite = ReturnType<typeof createChildSite>;

package/dist/interfaces/ChildSiteMessage.d.ts

@@ -0,0 +1,8 @@
+export type ChildSiteMessage = {
+    type: 'IFRAME_RESIZE';
+    payload: {
+        height: number;
+    };
+} | {
+    type: 'IFRAME_INITIALIZED';
+};

package/dist/interfaces/ChildSiteSubscription.d.ts

@@ -0,0 +1,2 @@
+import { ChildSite } from './ChildSite';
+export type ChildSiteSubscription = ReturnType<ChildSite['subscribe']>;

package/dist/interfaces/IframeMode.d.ts

@@ -0,0 +1 @@
+export type IframeMode = 'embedded' | 'non-embedded' | undefined;

package/dist/interfaces/IframeQueryParams.d.ts

@@ -0,0 +1 @@
+export type IframeQueryParams = {};

package/dist/interfaces/OnboardingApp.d.ts

@@ -0,0 +1,2 @@
+import { createOnboardingApp } from '../utils/createOnboardingApp';
+export type OnboardingApp = ReturnType<typeof createOnboardingApp>;

package/dist/interfaces/OnboardingAppAppSubscription.d.ts

@@ -0,0 +1,2 @@
+import { OnboardingConsumerApp } from './OnboardingConsumerApp';
+export type OnboardingConsumerAppSubscription = ReturnType<OnboardingConsumerApp['subscribe']>;

package/dist/interfaces/OnboardingAppMessage.d.ts

@@ -0,0 +1,24 @@
+import { ChildSiteMessage } from './ChildSiteMessage';
+import { StageNavigation } from './StageNavigation';
+export type OnboardingAppMessage = {
+    type: 'ROUTE_URL';
+    payload: {
+        url: string;
+    };
+} | {
+    type: 'AUTHENTICATING';
+} | {
+    type: 'AUTHENTICATION_SUCCESS';
+} | {
+    type: 'ONBOARDING_STARTED';
+} | {
+    type: 'AUTHENTICATION_FAILED';
+    payload: {
+        error: unknown;
+    };
+} | {
+    type: 'STAGE_NAVIGATION';
+    payload: {
+        stageNavigation: StageNavigation;
+    };
+} | ChildSiteMessage;

package/dist/interfaces/OnboardingAppMode.d.ts

@@ -0,0 +1,2 @@
+import { IframeMode } from './IframeMode';
+export type OnboardingAppMode = IframeMode;

package/dist/interfaces/OnboardingAppSubscription.d.ts

@@ -0,0 +1,2 @@
+import { OnboardingApp } from './OnboardingApp';
+export type OnboardingAppSubscription = ReturnType<OnboardingApp['subscribe']>;

package/dist/interfaces/OnboardingConsumerApp.d.ts

@@ -0,0 +1,2 @@
+import { createOnboardingConsumerApp } from '../utils/createOnboardingConsumerApp';
+export type OnboardingConsumerApp = ReturnType<typeof createOnboardingConsumerApp>;

package/dist/interfaces/OnboardingConsumerAppMessage.d.ts

@@ -0,0 +1,13 @@
+import { ParentSiteMessage } from './ParentSiteMessage';
+export type OnboardingConsumerAppMessage = {
+    type: 'NEXT_STAGE';
+} | {
+    type: 'PREV_STAGE';
+} | {
+    type: 'SKIP_STAGE';
+} | {
+    type: 'INVITE_TOKEN_SENT';
+    payload: {
+        inviteToken: string;
+    };
+} | ParentSiteMessage;

package/dist/interfaces/ParentSite.d.ts

@@ -0,0 +1,2 @@
+import { createParentSite } from '../utils/createParentSite';
+export type ParentSite = ReturnType<typeof createParentSite>;

package/dist/interfaces/ParentSiteMessage.d.ts

@@ -0,0 +1,21 @@
+import { IframeMode } from './IframeMode';
+export type ParentSiteMessage = {
+    type: 'IFRAME_RENDERED_ON_PARENT_SITE';
+} | {
+    type: 'REFRESH_SIZE';
+} | {
+    type: 'IFRAME_INITIALIZED';
+    payload: {
+        mode: IframeMode;
+    };
+} | {
+    type: 'SET_CUSTOM_CSS';
+    payload: {
+        css: string;
+    };
+} | {
+    type: 'SET_IFRAME_MODE';
+    payload: {
+        mode: IframeMode;
+    };
+};

package/dist/interfaces/ParentSiteSubscription.d.ts

@@ -0,0 +1,2 @@
+import { ParentSite } from './ParentSite';
+export type ParentSiteSubscription = ReturnType<ParentSite['subscribe']>;

package/dist/interfaces/QueryParams.d.ts

@@ -0,0 +1 @@
+export type QueryParams = Record<string, string | undefined>;

package/dist/interfaces/StageNavigation.d.ts

@@ -0,0 +1,19 @@
+export type StageNavigation = {
+    stage: string | undefined;
+    nextStatus: {
+        visible: boolean;
+        disabled: boolean;
+        loading: boolean;
+        isSubmit: boolean;
+    };
+    prevStatus: {
+        visible: boolean;
+        disabled: boolean;
+        loading: boolean;
+    };
+    skipStatus: {
+        visible: boolean;
+        disabled: boolean;
+        loading: boolean;
+    };
+};

package/dist/interfaces/index.d.ts

@@ -0,0 +1,18 @@
+export * from './AnyMessage';
+export * from './ChildSite';
+export * from './ChildSiteMessage';
+export * from './ChildSiteSubscription';
+export * from './IframeMode';
+export * from './IframeQueryParams';
+export * from './OnboardingApp';
+export * from './OnboardingAppAppSubscription';
+export * from './OnboardingAppMessage';
+export * from './OnboardingAppMode';
+export * from './OnboardingAppSubscription';
+export * from './OnboardingConsumerApp';
+export * from './OnboardingConsumerAppMessage';
+export * from './ParentSite';
+export * from './ParentSiteMessage';
+export * from './ParentSiteSubscription';
+export * from './QueryParams';
+export * from './StageNavigation';

package/dist/mockServiceWorker.js

@@ -0,0 +1,349 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker.
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ */
+
+const PACKAGE_VERSION = '2.11.6'
+const INTEGRITY_CHECKSUM = '4db4a41e972cec1b64cc569c66952d82'
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+const activeClientIds = new Set()
+
+addEventListener('install', function () {
+  self.skipWaiting()
+})
+
+addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+
+addEventListener('message', async function (event) {
+  const clientId = Reflect.get(event.source || {}, 'id')
+
+  if (!clientId || !self.clients) {
+    return
+  }
+
+  const client = await self.clients.get(clientId)
+
+  if (!client) {
+    return
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: {
+          packageVersion: PACKAGE_VERSION,
+          checksum: INTEGRITY_CHECKSUM,
+        },
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
+      })
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+addEventListener('fetch', function (event) {
+  const requestInterceptedAt = Date.now()
+
+  // Bypass navigation requests.
+  if (event.request.mode === 'navigate') {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (
+    event.request.cache === 'only-if-cached' &&
+    event.request.mode !== 'same-origin'
+  ) {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been terminated (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  const requestId = crypto.randomUUID()
+  event.respondWith(handleRequest(event, requestId, requestInterceptedAt))
+})
+
+/**
+ * @param {FetchEvent} event
+ * @param {string} requestId
+ * @param {number} requestInterceptedAt
+ */
+async function handleRequest(event, requestId, requestInterceptedAt) {
+  const client = await resolveMainClient(event)
+  const requestCloneForEvents = event.request.clone()
+  const response = await getResponse(
+    event,
+    client,
+    requestId,
+    requestInterceptedAt,
+  )
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    const serializedRequest = await serializeRequest(requestCloneForEvents)
+
+    // Clone the response so both the client and the library could consume it.
+    const responseClone = response.clone()
+
+    sendToClient(
+      client,
+      {
+        type: 'RESPONSE',
+        payload: {
+          isMockedResponse: IS_MOCKED_RESPONSE in response,
+          request: {
+            id: requestId,
+            ...serializedRequest,
+          },
+          response: {
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+            body: responseClone.body,
+          },
+        },
+      },
+      responseClone.body ? [serializedRequest.body, responseClone.body] : [],
+    )
+  }
+
+  return response
+}
+
+/**
+ * Resolve the main client for the given event.
+ * Client that issues a request doesn't necessarily equal the client
+ * that registered the worker. It's with the latter the worker should
+ * communicate with during the response resolving phase.
+ * @param {FetchEvent} event
+ * @returns {Promise<Client | undefined>}
+ */
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+/**
+ * @param {FetchEvent} event
+ * @param {Client | undefined} client
+ * @param {string} requestId
+ * @param {number} requestInterceptedAt
+ * @returns {Promise<Response>}
+ */
+async function getResponse(event, client, requestId, requestInterceptedAt) {
+  // Clone the request because it might've been already used
+  // (i.e. its body has been read and sent to the client).
+  const requestClone = event.request.clone()
+
+  function passthrough() {
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
+
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
+
+    return fetch(requestClone, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const serializedRequest = await serializeRequest(event.request)
+  const clientMessage = await sendToClient(
+    client,
+    {
+      type: 'REQUEST',
+      payload: {
+        id: requestId,
+        interceptedAt: requestInterceptedAt,
+        ...serializedRequest,
+      },
+    },
+    [serializedRequest.body],
+  )
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'PASSTHROUGH': {
+      return passthrough()
+    }
+  }
+
+  return passthrough()
+}
+
+/**
+ * @param {Client} client
+ * @param {any} message
+ * @param {Array<Transferable>} transferrables
+ * @returns {Promise<any>}
+ */
+function sendToClient(client, message, transferrables = []) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+
+      resolve(event.data)
+    }
+
+    client.postMessage(message, [
+      channel.port2,
+      ...transferrables.filter(Boolean),
+    ])
+  })
+}
+
+/**
+ * @param {Response} response
+ * @returns {Response}
+ */
+function respondWithMock(response) {
+  // Setting response status code to 0 is a no-op.
+  // However, when responding with a "Response.error()", the produced Response
+  // instance will have status code set to 0. Since it's not possible to create
+  // a Response instance with status code 0, handle that use-case separately.
+  if (response.status === 0) {
+    return Response.error()
+  }
+
+  const mockedResponse = new Response(response.body, response)
+
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+    value: true,
+    enumerable: true,
+  })
+
+  return mockedResponse
+}
+
+/**
+ * @param {Request} request
+ */
+async function serializeRequest(request) {
+  return {
+    url: request.url,
+    mode: request.mode,
+    method: request.method,
+    headers: Object.fromEntries(request.headers.entries()),
+    cache: request.cache,
+    credentials: request.credentials,
+    destination: request.destination,
+    integrity: request.integrity,
+    redirect: request.redirect,
+    referrer: request.referrer,
+    referrerPolicy: request.referrerPolicy,
+    body: await request.arrayBuffer(),
+    keepalive: request.keepalive,
+  }
+}

package/dist/mocks/browser.d.ts

@@ -0,0 +1 @@
+export declare const worker: import('msw/browser').SetupWorker;

package/dist/mocks/handlers/authHandler.d.ts

@@ -0,0 +1 @@
+export declare const agencyHandler: import('msw').HttpHandler[];

package/dist/mocks/handlers/index.d.ts

@@ -0,0 +1 @@
+export * from './authHandler';

package/dist/utils/createChildSite/index.d.ts

@@ -0,0 +1,17 @@
+import { AnyMessage } from '../../interfaces/AnyMessage';
+import { IframeMode } from '../../interfaces/IframeMode';
+import { IframeQueryParams } from '../../interfaces/IframeQueryParams';
+export declare const createChildSite: (args: {
+    origin: string;
+    initialRoute?: string;
+    queryParams?: IframeQueryParams;
+    mode?: IframeMode;
+}) => {
+    iframe: HTMLIFrameElement;
+    subscribe: <T extends AnyMessage>(callback: (event: MessageEvent<T>) => void) => {
+        unsubscribe: () => void;
+    };
+    postMessage: <TMessage extends AnyMessage>(message: TMessage, transfer?: Transferable[]) => void;
+    setMode: (mode: IframeMode) => void;
+    refreshSize: () => void;
+};

package/dist/utils/createOnboardingApp/index.d.ts

@@ -0,0 +1,18 @@
+import { OnboardingAppMessage } from '../../interfaces/OnboardingAppMessage';
+import { OnboardingAppMode } from '../../interfaces/OnboardingAppMode';
+export declare const createOnboardingApp: (args: {
+    origin: string;
+    inviteToken: string;
+    mode?: OnboardingAppMode;
+}) => {
+    subscribe: (callback: (event: MessageEvent<OnboardingAppMessage>) => void) => {
+        unsubscribe: () => void;
+    };
+    setMode: (mode: OnboardingAppMode) => void;
+    setCustomCss: (css: string) => void;
+    iframe: HTMLIFrameElement;
+    next: () => void;
+    prev: () => void;
+    skip: () => void;
+    refreshSize: () => void;
+};

package/dist/utils/createOnboardingConsumerApp/index.d.ts

@@ -0,0 +1,11 @@
+import { OnboardingAppMessage } from '../../interfaces/OnboardingAppMessage';
+import { OnboardingConsumerAppMessage } from '../../interfaces/OnboardingConsumerAppMessage';
+export declare const createOnboardingConsumerApp: (args: {
+    allowedOrigins: string[];
+}) => {
+    postMessage: (message: OnboardingAppMessage) => void;
+    subscribe: (callback: (event: MessageEvent<OnboardingConsumerAppMessage>) => void) => {
+        unsubscribe: () => void;
+    };
+    notifySize: () => void;
+};

package/dist/utils/createParentSite/index.d.ts

@@ -0,0 +1,12 @@
+import { AnyMessage } from '../../interfaces/AnyMessage';
+import { IframeQueryParams } from '../../interfaces/IframeQueryParams';
+export declare const createParentSite: (args: {
+    allowedOrigins: string[];
+}) => {
+    notifySize: () => void;
+    subscribe: <T extends AnyMessage>(callback: (event: MessageEvent<T>) => void) => {
+        unsubscribe: () => void;
+    };
+    postMessage: <TMessage extends AnyMessage>(message: TMessage) => void;
+    queryParams: IframeQueryParams;
+};

package/dist/utils/getURLQueryParams/index.d.ts

@@ -0,0 +1,2 @@
+import { QueryParams } from '../../interfaces/QueryParams';
+export declare const getURLQueryParams: <T extends QueryParams>() => T;

package/dist/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './createChildSite';
+export * from './createOnboardingApp';
+export * from './createOnboardingConsumerApp';
+export * from './createParentSite';

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@worthai/onboarding-sdk",
+  "version": "2.0.0",
+  "type": "module",
+  "source": "./src",
+  "types": "./dist/index.d.ts",
+  "main": "./dist/index.js",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "bump-patch-version": "npm version patch -m 'chore: bump patch version to %s'",
+    "publish-to-github": "npm publish --access public"
+  },
+  "devDependencies": {
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/html-vite": "^9.1.10",
+    "autoprefixer": "^10.4.21",
+    "axios": "^1.13.1",
+    "msw": "^2.11.6",
+    "postcss": "^8.5.6",
+    "storybook": "^9.1.10",
+    "tailwindcss": "^3.4.18",
+    "typescript": "~5.9.3",
+    "vite": "^7.1.7",
+    "vite-plugin-checker": "^0.11.0",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748",
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
+  }
+}