(null)
+
+ if (!BUBBLE_URL) {
+ console.error(
+ "The environment variable VITE_BUBBLE_URL is not defined. " +
+ "Bubble iframe cannot be rendered. Please set VITE_BUBBLE_URL in your environment.",
+ )
+
+ return (
+
+ Configuration error: Bubble URL is not configured. Please contact an administrator.
+
+ )
+ }
+
+ useEffect(() => {
+ if (!client) return
+
+ clientRef.current = client
+ void client.run().catch(console.error)
+ }, [client])
+
+ useEffect(() => {
+ const iframe = iframeRef.current
+ if (!iframe) return
+
+ const service = new ParentIframeService(iframe, {
+ onInitialized: () => {
+ console.info("IframeService initialized")
+ },
+ onBadgeSet: (count) => {
+ void clientRef.current?.setBadgeCount?.(count)
+ },
+ onWidgetSet: (visible) => {
+ if (visible === true)
+ clientRef.current?.focus()
+ else if (visible === false)
+ clientRef.current?.unfocus()
+ },
+ onHyperlinkOpen: (url, target) => {
+ if (url.includes("deskpro.com/app") || url.includes("deskprotesting.com/app")) {
+ window.parent.location.replace(url)
+ return
+ }
+ window.open(url, target ?? "_blank")
+ },
+ },
+ {
+ override_hyperlink_open: true,
+ },
+ )
+
+ iframeServiceRef.current = service
+
+ return () => {
+ service.destroy?.()
+ iframeServiceRef.current = null
+ }
+ }, [])
+
+ // Not used, since there is no easy click to dial functionality in Deskpro yet.
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const startCall = useCallback(async () => {
+ const service = iframeServiceRef.current
+ if (!service) return
+
+ const response = await service.sendRequest<
+ { number: string },
+ { success: boolean; error?: string }
+ >("call", "start", {number: "+31201234567"})
+
+ if (response.payload?.success) {
+ console.log("Call started:", response.payload)
+ } else {
+ console.error("Call failed:", response.payload?.error)
+ }
+ }, [])
+
+ return (
+
+
+
+ )
+}
diff --git a/src/pages/Main/index.ts b/src/pages/Main/index.ts
new file mode 100644
index 0000000..3d4cf3d
--- /dev/null
+++ b/src/pages/Main/index.ts
@@ -0,0 +1 @@
+export { Main } from "./Main";
diff --git a/src/pages/index.ts b/src/pages/index.ts
new file mode 100644
index 0000000..3d4cf3d
--- /dev/null
+++ b/src/pages/index.ts
@@ -0,0 +1 @@
+export { Main } from "./Main";
diff --git a/src/query.ts b/src/query.ts
new file mode 100644
index 0000000..3c69e13
--- /dev/null
+++ b/src/query.ts
@@ -0,0 +1,19 @@
+import { QueryClient } from "@tanstack/react-query";
+
+const queryClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ suspense: false,
+ useErrorBoundary: true,
+ refetchOnWindowFocus: false,
+ retry: 1,
+ retryDelay: 2000,
+ },
+ },
+});
+
+const QueryKey = {
+ POSTS: "posts",
+}
+
+export { queryClient, QueryKey };
diff --git a/src/types/message.ts b/src/types/message.ts
new file mode 100644
index 0000000..60503a1
--- /dev/null
+++ b/src/types/message.ts
@@ -0,0 +1,23 @@
+import {PostMessageChannel} from "@/types/services/parentIframeService"
+
+export interface Message {
+ protocol: "bubble365";
+ version: 1;
+ id: string;
+ response_id: string | null;
+ channel: PostMessageChannel;
+ cmd: string;
+ payload?: TPayload;
+}
+
+export function isBubble365Message(parsedMsg: unknown): parsedMsg is Message {
+ const msg = parsedMsg as Message
+
+ if (!msg)
+ return false
+
+ if (msg.protocol !== "bubble365")
+ return false
+
+ return msg.version === 1
+}
diff --git a/src/types/parentHandlers.ts b/src/types/parentHandlers.ts
new file mode 100644
index 0000000..7d25bc3
--- /dev/null
+++ b/src/types/parentHandlers.ts
@@ -0,0 +1,6 @@
+export type ParentHandlers = {
+ onInitialized?: () => void;
+ onBadgeSet?: (count: number) => void;
+ onWidgetSet?: (visible?: boolean) => void;
+ onHyperlinkOpen?: (url: string, target?: "_blank" | "_self", button?: unknown) => void;
+};
diff --git a/src/types/services/parentIframeService.ts b/src/types/services/parentIframeService.ts
new file mode 100644
index 0000000..f96c9f3
--- /dev/null
+++ b/src/types/services/parentIframeService.ts
@@ -0,0 +1,156 @@
+import {isBubble365Message, Message} from "@/types/message"
+import {ParentHandlers} from "@/types/parentHandlers"
+
+export type PostMessageChannel = "initialize" | "call" | "badge" | "widget" | "hyperlink";
+
+export type Settings = { override_hyperlink_open: boolean };
+export type BadgeSetPayload = { count: number };
+export type FocusPayload = { visible?: boolean };
+export type HyperlinkOpenPayload = { url: string; target?: "_blank" | "_self"; button?: unknown };
+
+export class ParentIframeService {
+ private iframe: HTMLIFrameElement
+ private pending = new Map) => void>()
+ private handlers: ParentHandlers
+ private readonly boundOnMessage: (event: MessageEvent) => void
+ private readonly settings: Settings
+ private readonly bubbleOrigin: string
+
+ constructor(iframe: HTMLIFrameElement, handlers: ParentHandlers, settings: Settings) {
+ const bubbleUrl = import.meta.env.VITE_BUBBLE_URL
+ this.bubbleOrigin = new URL(bubbleUrl, window.location.href).origin
+
+ this.iframe = iframe
+ this.handlers = handlers
+ this.settings = settings
+
+ console.debug("[ParentIframeService] starting service..")
+
+ this.boundOnMessage = this.onMessage.bind(this)
+ window.addEventListener("message", this.boundOnMessage)
+ }
+
+ public sendMessage(channel: PostMessageChannel, cmd: string, payload?: TPayload, response_id?: string | null): void {
+ const message = this.createMessage(channel, cmd, payload, response_id)
+ console.debug("[ParentIframeService] Post message", message)
+ this.iframe.contentWindow?.postMessage(JSON.stringify(message), this.bubbleOrigin)
+ }
+
+ public sendRequest(
+ channel: PostMessageChannel,
+ cmd: string,
+ payload?: TRequest,
+ timeoutMs = 8000,
+ ): Promise> {
+ const request = this.createMessage(channel, cmd, payload, null)
+
+ return new Promise>((resolve, reject) => {
+ const timeoutHandle = window.setTimeout(() => {
+ this.pending.delete(request.id)
+ reject(new Error(`Timeout waiting for response to ${channel}/${cmd}`))
+ }, timeoutMs)
+
+ this.pending.set(request.id, (msg) => {
+ window.clearTimeout(timeoutHandle)
+ resolve(msg as Message)
+ })
+
+ this.iframe.contentWindow?.postMessage(JSON.stringify(request), this.bubbleOrigin)
+ })
+ }
+
+ public destroy(): void {
+ window.removeEventListener("message", this.boundOnMessage)
+
+ // Reject all pending requests.
+ for (const [id] of this.pending.entries()) {
+ this.pending.delete(id)
+ }
+ }
+
+ private createMessage(
+ channel: PostMessageChannel,
+ cmd: string,
+ payload?: TPayload,
+ responseId?: string | null,
+ ): Message {
+ return {
+ protocol: "bubble365",
+ version: 1,
+ channel,
+ cmd,
+ id: crypto.randomUUID(),
+ response_id: responseId ?? null,
+ payload,
+ }
+ }
+
+ private onMessage(event: MessageEvent): void {
+ if (typeof event.data !== "string") return
+ if (event.origin !== this.bubbleOrigin) return
+ if (event.source !== this.iframe.contentWindow) return
+
+ console.debug("[ParentIframeService] Received message", event.data)
+
+ let msg: unknown
+ try {
+ msg = JSON.parse(event.data)
+ } catch (error) {
+ console.error("[ParentIframeService] Error while parsing message, dropped", { event: event.data, error })
+ return
+ }
+
+ if (!isBubble365Message(msg)) {
+ console.debug("[ParentIframeService] not a Bubble365 message, dropped", event)
+ return
+ }
+
+ // response to a request
+ if (msg.response_id && this.pending.has(msg.response_id)) {
+ const resolver = this.pending.get(msg.response_id)!
+ this.pending.delete(msg.response_id)
+ resolver(msg)
+ return
+ }
+
+ if (msg.channel === "initialize" && msg.cmd === 'request') {
+ this.sendMessage("initialize", "request",
+ {
+ success: true,
+ settings: this.settings,
+ },
+ msg.id,
+ )
+
+ this.handlers.onInitialized?.()
+ return
+ }
+
+ if (msg.channel === "badge" && msg.cmd === "set") {
+ const payload = msg.payload as Partial | undefined
+ const count = typeof payload?.count === "number" ? payload.count : 0
+ this.handlers.onBadgeSet?.(count)
+ return
+ }
+
+ if (msg.channel === "widget" && msg.cmd === "set") {
+ const payload = msg.payload as Partial | undefined
+ this.handlers.onWidgetSet?.(payload?.visible)
+ return
+ }
+
+ if (msg.channel === "hyperlink" && msg.cmd === "open" && msg.response_id === null) {
+ this.handleHyperlinkOpenRequest(msg)
+ return
+ }
+ }
+
+ private handleHyperlinkOpenRequest(request: Message): void {
+ const payload = request.payload as Partial | undefined
+ const url = typeof payload?.url === "string" ? payload.url : ""
+ const target = payload?.target === "_self" ? "_self" : "_blank"
+ const button = payload?.button
+
+ this.handlers.onHyperlinkOpen?.(url, target, button)
+ }
+}
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
new file mode 100644
index 0000000..11f02fe
--- /dev/null
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+///
diff --git a/testing/index.ts b/testing/index.ts
new file mode 100644
index 0000000..f355d50
--- /dev/null
+++ b/testing/index.ts
@@ -0,0 +1 @@
+export { default as mockPosts } from "./mockPosts.json";
diff --git a/testing/mockPosts.json b/testing/mockPosts.json
new file mode 100644
index 0000000..1ef7fd8
--- /dev/null
+++ b/testing/mockPosts.json
@@ -0,0 +1,20 @@
+[
+ {
+ "userId": 1,
+ "id": 1,
+ "title": "sunt aut facere repellat",
+ "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto"
+ },
+ {
+ "userId": 1,
+ "id": 2,
+ "title": "qui est esse",
+ "body": "est rerum tempore vitae\nsequi sint nihil reprehenderit dolor beatae ea dolores neque\nfugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis\nqui aperiam non debitis possimus qui neque nisi nulla"
+ },
+ {
+ "userId": 1,
+ "id": 3,
+ "title": "ea molestias quasi",
+ "body": "et iusto sed quo iure\nvoluptatem occaecati omnis eligendi aut ad\nvoluptatem doloribus vel accusantium quis pariatur\nmolestiae porro eius odio et labore et velit aut"
+ }
+]
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..66e9018
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,26 @@
+{
+ "compilerOptions": {
+ "target": "ESNext",
+ "useDefineForClassFields": true,
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "allowJs": true,
+ "skipLibCheck": true,
+ "esModuleInterop": false,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "module": "ESNext",
+ "moduleResolution": "Node",
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "types": ["vite/client", "jest", "@testing-library/jest-dom", "@typescript/lib-dom"],
+ "baseUrl": ".",
+ "paths": {
+ "@/testing": ["testing"],
+ "@/*": ["src/*"]
+ }
+ },
+ "include": ["./src"]
+}
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..e9e85ab
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,57 @@
+import { sentryVitePlugin } from "@sentry/vite-plugin";
+import path from "path";
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import copy from "rollup-plugin-copy";
+
+const PORT = process.env.VITE_DEV_SERVER_PORT
+ ? parseInt(process.env.VITE_DEV_SERVER_PORT)
+ : undefined;
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ base: "",
+ plugins: [
+ react(),
+ ...(
+ process.env.SENTRY_DISABLED !== "true" && process.env.SENTRY_ORG && process.env.SENTRY_PROJECT
+ ? [sentryVitePlugin({
+ org: process.env.SENTRY_ORG,
+ project: process.env.SENTRY_PROJECT,
+ })] : []
+ ),
+ ],
+ server: {
+ host: true,
+ port: PORT,
+ allowedHosts: true
+ },
+ resolve: {
+ alias: {
+ "@": path.resolve(__dirname, "src"),
+ },
+ },
+ build: {
+ sourcemap: true,
+ rollupOptions: {
+ onwarn(warning, warn) {
+ if (warning.code === "MODULE_LEVEL_DIRECTIVE") {
+ return;
+ }
+ warn(warning);
+ },
+ plugins: [
+ copy({
+ hook: "writeBundle",
+ targets: [
+ { src: "./manifest.json", dest: "./dist/" },
+ { src: "./DESCRIPTION.md", dest: "./dist/" },
+ { src: "./SETUP.md", dest: "./dist/" },
+ { src: "./icon.svg", dest: "./dist/" },
+ { src: "./docs", dest: "./dist/" },
+ ],
+ }),
+ ],
+ },
+ },
+});
\ No newline at end of file
+ 
+ 
+
+
+
+