@wildix/xbees-connect 1.0.4-alpha.0

package/README.md

@@ -0,0 +1,11 @@
+# `xbees-connect`
+
+> TODO: description
+
+## Usage
+
+```
+const xbeesConnect = require('xbees-connect');
+
+// TODO: DEMONSTRATE API....
+```

package/dist-es/index.js

@@ -0,0 +1,6 @@
+import { Client } from './src/Client';
+(function () {
+    // @ts-expect-error window.xBeesConnect will be used inside another app
+    window.xBeesConnect = Client;
+})();
+export default Client;

package/dist-es/package.json

@@ -0,0 +1,34 @@
+{
+    "name": "xbees-connect",
+    "version": "1.0.0",
+    "description": "This library provides easy communication between x-bees and integrated web applications",
+    "author": "dimitri.chernykh <dimitri.chernykh@wildix.com>",
+    "homepage": "",
+    "license": "UNLICENSED",
+    "main": "./dist-cjs/index.js",
+    "types": "./dist-types/index.d.ts",
+    "module": "./dist-es/index.js",
+    "type": "module",
+    "scripts": {
+        "build:es": "tsc -p tsconfig.es.json",
+        "build:types": "tsc -p tsconfig.types.json",
+        "build:docs": "typedoc",
+        "clean": "rimraf ./dist-* && rimraf *.tsbuildinfo"
+    },
+    "files": [
+        "dist-*/**"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git@git.wildix.com:dimitri.chernykh/sdk-ui.git"
+    },
+    "engines": {
+        "node": ">=18"
+    },
+    "dependencies": {
+        "typescript": "^5.2.2"
+    },
+    "devDependencies": {
+        "rimraf": "^5.0.5"
+    }
+}

package/dist-es/src/Client.js

@@ -0,0 +1,169 @@
+import { ClientEventType, EventType, } from './types';
+import PostMessageControllerNative from './PostMessageControllerNative';
+import PostMessageControllerWeb from './PostMessageControllerWeb';
+import packageJson from '../package.json';
+/**
+ * Client provides functionality of communication between xBees and integrated web applications via iFrame or ReactNative WebView
+ * integration creates na instance with new Client()
+ * */
+export class Client {
+    static getInstance() {
+        if (!this.instance) {
+            this.instance = new Client();
+        }
+        return this.instance;
+    }
+    constructor() {
+        this.listeners = [];
+        this.useSubscription = false;
+        this.iframeId = null;
+        this.variant = null;
+        const params = new URLSearchParams(window.location.search);
+        this.iframeId = params.get('iframeId');
+        this.variant = params.get('variant');
+        // @ts-expect-error window.ReactNativeWebView will be provided by ReactNative WebView
+        this.worker = window.ReactNativeWebView ? new PostMessageControllerNative() : new PostMessageControllerWeb();
+    }
+    async sendAsync(data) {
+        return this.worker.sendAsync({
+            ...data,
+            iframeId: this.iframeId,
+        });
+    }
+    parseMessage(message) {
+        try {
+            const data = message?.data && JSON.parse(message?.data);
+            if (!data?.type) {
+                return null;
+            }
+            return data;
+        }
+        catch (e) {
+            return null;
+        }
+    }
+    onMessage(message) {
+        const data = this.parseMessage(message);
+        if (!data) {
+            return;
+        }
+        const { type, payload } = data;
+        this.listeners.forEach(({ eventName, callback }) => {
+            if (eventName === type) {
+                if (type === EventType.ADD_CALL) {
+                    const cb = callback;
+                    cb(payload);
+                }
+                else {
+                    // @ts-expect-error TODO: check the type for Callback<?>
+                    const cb = callback;
+                    cb(payload);
+                }
+            }
+        });
+    }
+    async ready() {
+        return this.sendAsync({ type: ClientEventType.READY, payload: { version: this.version() } });
+    }
+    version() {
+        return packageJson.version;
+    }
+    isDaemon() {
+        return this.variant === 'daemon';
+    }
+    showsUi() {
+        return !this.isDaemon();
+    }
+    async getContext() {
+        return this.sendAsync({ type: ClientEventType.CONTEXT });
+    }
+    async getCurrentContact() {
+        return this.sendAsync({ type: ClientEventType.CURRENT_CONTACT });
+    }
+    async getThemeMode() {
+        return this.sendAsync({ type: ClientEventType.THEME_MODE });
+    }
+    async getTheme() {
+        return this.sendAsync({ type: ClientEventType.THEME });
+    }
+    async startCall(phoneNumber) {
+        return this.sendAsync({ type: ClientEventType.START_CALL, payload: { phoneNumber } });
+    }
+    async reboot() {
+        return this.sendAsync({ type: ClientEventType.REBOOT });
+    }
+    async setViewport(payload) {
+        return this.sendAsync({ type: ClientEventType.VIEW_PORT, payload });
+    }
+    async toClipboard(payload) {
+        return this.sendAsync({ type: ClientEventType.TO_CLIPBOARD, payload });
+    }
+    async isNotAuthorized(payload) {
+        return this.sendAsync({ type: ClientEventType.NOT_AUTHORIZED, payload });
+    }
+    async isAuthorized(payload) {
+        return this.sendAsync({ type: ClientEventType.AUTHORIZED, payload });
+    }
+    async getContactsAutoSuggest(payload) {
+        return this.sendAsync({
+            type: ClientEventType.CONTACTS_AUTO_SUGGEST,
+            payload: payload,
+        });
+    }
+    addEventListener(eventName, callback) {
+        if (!this.useSubscription) {
+            this.useSubscription = true;
+            window.addEventListener('message', this.onMessage.bind(this));
+        }
+        const foundThisEvent = this.listeners.find(({ eventName: _eventName, callback: _callback }) => eventName === _eventName && Object.is(callback, _callback));
+        if (!foundThisEvent) {
+            this.listeners.push({ eventName, callback });
+        }
+        return () => { this.removeEventListener(eventName, callback); };
+    }
+    removeEventListener(eventName, callback) {
+        this.listeners = this.listeners.filter(({ eventName: _eventName, callback: _callback }) => !(Object.is(callback, _callback) && (!eventName ? true : eventName === _eventName)));
+        if (this.useSubscription && !this.listeners.length) {
+            this.useSubscription = false;
+            window.removeEventListener('message', this.onMessage.bind(this));
+        }
+    }
+    off(callback) {
+        this.removeEventListener(null, callback);
+    }
+    onCallEnded(callback) {
+        this.addEventListener(EventType.TERMINATE_CALL, callback);
+    }
+    onCallStarted(callback) {
+        this.addEventListener(EventType.ADD_CALL, callback);
+    }
+    onPbxTokenChange(callback) {
+        this.addEventListener(EventType.PBX_TOKEN, callback);
+    }
+    onSuggestContacts(callback) {
+        return this.addEventListener(EventType.GET_CONTACTS_AUTO_SUGGEST, (query) => {
+            const resolve = (contacts) => {
+                return this.sendAsync({
+                    type: ClientEventType.CONTACTS_AUTO_SUGGEST,
+                    payload: {
+                        contacts,
+                        query
+                    },
+                });
+            };
+            const reject = (reason) => {
+                console.debug(reason);
+            };
+            try {
+                callback(query, resolve, reject);
+            }
+            catch (e) {
+                reject(e.toString());
+            }
+        });
+    }
+    onThemeChange(callback) {
+        this.addEventListener(EventType.USE_THEME, callback);
+    }
+}
+Client.instance = null;

package/dist-es/src/PostMessageControllerNative.js

@@ -0,0 +1,43 @@
+export default class PostMessageControllerNative {
+    constructor() {
+        this.timeout = 10000;
+        // @ts-expect-error window.ReactNativeWebView will be provided by ReactNative WebView
+        this.target = window.ReactNativeWebView;
+    }
+    async sendAsync(data) {
+        if (!this.target) {
+            return Promise.reject('xBeesConnect should be wrapped within iframe to perform the connection');
+        }
+        return this.send(this.target, data);
+    }
+    send(target, payload) {
+        return new Promise((res, rej) => {
+            const channel = new MessageChannel();
+            const listener = (event) => {
+                try {
+                    const parsedData = JSON.parse(event.data);
+                    if (parsedData?.type === payload.type) {
+                        clearTimeout(timeout);
+                        window.removeEventListener('message', listener);
+                        if (!parsedData.errorMessage) {
+                            res(parsedData);
+                        }
+                        else {
+                            rej(parsedData);
+                        }
+                    }
+                }
+                catch (e) {
+                    console.error("on receive response Error", e);
+                }
+            };
+            window.addEventListener('message', listener);
+            const timeout = setTimeout(() => {
+                channel.port1.close();
+                window.removeEventListener('message', listener);
+                rej({ errorMessage: 'timeout', type: payload.type });
+            }, this.timeout);
+            target.postMessage(JSON.stringify(payload));
+        });
+    }
+}

package/dist-es/src/PostMessageControllerWeb.js

@@ -0,0 +1,32 @@
+export default class PostMessageControllerWeb {
+    constructor() {
+        this.timeout = 10000;
+        this.target = parent;
+    }
+    async sendAsync(data) {
+        if (!this.target || this.target === window) {
+            return Promise.reject('xBeesConnect should be wrapped within iframe to perform the connection');
+        }
+        return this.send(this.target, data);
+    }
+    send(target, payload) {
+        return new Promise((res, rej) => {
+            const channel = new MessageChannel();
+            const timeout = setTimeout(() => {
+                channel.port1.close();
+                rej({ errorMessage: 'timeout', type: payload.type });
+            }, this.timeout);
+            channel.port1.onmessage = ({ data }) => {
+                clearTimeout(timeout);
+                channel.port1.close();
+                if (!data.errorMessage) {
+                    res(data);
+                }
+                else {
+                    rej(data);
+                }
+            };
+            target.postMessage(payload, '*', [channel.port2]);
+        });
+    }
+}

package/dist-es/src/types.js

@@ -0,0 +1,23 @@
+export var EventType;
+(function (EventType) {
+    EventType["GET_CONTACTS_AUTO_SUGGEST"] = "xBeesGetContactsAutoSuggest";
+    EventType["ADD_CALL"] = "xBeesAddCall";
+    EventType["TERMINATE_CALL"] = "xBeesTerminateCall";
+    EventType["USE_THEME"] = "xBeesUseTheme";
+    EventType["PBX_TOKEN"] = "xBeesPbxToken";
+})(EventType || (EventType = {}));
+export var ClientEventType;
+(function (ClientEventType) {
+    ClientEventType["READY"] = "xBeesReady";
+    ClientEventType["CONTEXT"] = "xBeesContext";
+    ClientEventType["CURRENT_CONTACT"] = "xBeesCurrentContact";
+    ClientEventType["THEME_MODE"] = "xBeesThemeMode";
+    ClientEventType["THEME"] = "xBeesTheme";
+    ClientEventType["START_CALL"] = "xBeesStartCall";
+    ClientEventType["VIEW_PORT"] = "xBeesViewPort";
+    ClientEventType["REBOOT"] = "xBeesReboot";
+    ClientEventType["TO_CLIPBOARD"] = "xBeesToClipboard";
+    ClientEventType["NOT_AUTHORIZED"] = "xBeesNotAuthorized";
+    ClientEventType["AUTHORIZED"] = "xBeesAuthorized";
+    ClientEventType["CONTACTS_AUTO_SUGGEST"] = "xBeesContactsAutoSuggest";
+})(ClientEventType || (ClientEventType = {}));

package/dist-types/index.d.ts

@@ -0,0 +1,2 @@
+import { Client } from './src/Client';
+export default Client;

package/dist-types/src/Client.d.ts

@@ -0,0 +1,44 @@
+import { AutoSuggestResult, Callback, ClientConnect, EventType, Reject, RemoveEventListener, Resolve, Response } from './types';
+/**
+ * Client provides functionality of communication between xBees and integrated web applications via iFrame or ReactNative WebView
+ * integration creates na instance with new Client()
+ * */
+export declare class Client implements ClientConnect {
+    private static instance;
+    static getInstance(): Client;
+    private worker;
+    private listeners;
+    private useSubscription;
+    private readonly iframeId;
+    private readonly variant;
+    constructor();
+    private sendAsync;
+    private parseMessage;
+    private onMessage;
+    ready(): Promise<Response>;
+    version(): string;
+    isDaemon(): boolean;
+    showsUi(): boolean;
+    getContext(): Promise<Response>;
+    getCurrentContact(): Promise<Response>;
+    getThemeMode(): Promise<Response>;
+    getTheme(): Promise<Response>;
+    startCall(phoneNumber: string): Promise<Response>;
+    reboot(): Promise<Response>;
+    setViewport(payload: {
+        height: number;
+        width: number;
+    }): Promise<Response>;
+    toClipboard(payload: string): Promise<Response>;
+    isNotAuthorized(payload: string): Promise<Response>;
+    isAuthorized(payload: string): Promise<Response>;
+    getContactsAutoSuggest(payload: AutoSuggestResult): Promise<Response>;
+    addEventListener<T extends EventType = EventType>(eventName: T, callback: Callback<T>): RemoveEventListener;
+    removeEventListener<T extends EventType = EventType>(eventName: T | null, callback: Callback<T>): void;
+    off(callback: Callback): void;
+    onCallEnded(callback: Callback<EventType.TERMINATE_CALL>): void;
+    onCallStarted(callback: Callback<EventType.ADD_CALL>): void;
+    onPbxTokenChange(callback: Callback<EventType.PBX_TOKEN>): void;
+    onSuggestContacts(callback: (query: string, resolve: Resolve, reject: Reject) => void): RemoveEventListener;
+    onThemeChange(callback: Callback<EventType.USE_THEME>): void;
+}

package/dist-types/src/PostMessageControllerNative.d.ts

@@ -0,0 +1,8 @@
+import { SendData, Response } from './types';
+export default class PostMessageControllerNative implements SendData {
+    private readonly target;
+    private timeout;
+    constructor();
+    sendAsync(data: any): Promise<Response>;
+    private send;
+}

package/dist-types/src/PostMessageControllerWeb.d.ts

@@ -0,0 +1,8 @@
+import { SendData, Response } from './types';
+export default class PostMessageControllerWeb implements SendData {
+    private readonly target;
+    private timeout;
+    constructor();
+    sendAsync(data: any): Promise<Response>;
+    private send;
+}

package/dist-types/src/types.d.ts

@@ -0,0 +1,183 @@
+interface ContactShape {
+    id: string;
+    name: string;
+    email?: string;
+    phone?: string;
+    mobileNumber?: string;
+    officeNumber?: string;
+    faxNumber?: string;
+    homeNumber?: string;
+    homeMobileNumber?: string;
+    extension?: string;
+    organization?: string;
+}
+export type Contact = ContactShape & {
+    email: string;
+} | ContactShape & {
+    phone: string;
+};
+export type Message<T extends EventType = EventType> = {
+    type: T;
+    payload: EventPayload<T>;
+};
+export type Response = {
+    type?: string;
+    message?: string;
+    errorMessage?: string;
+    payload?: any;
+};
+export declare enum EventType {
+    GET_CONTACTS_AUTO_SUGGEST = "xBeesGetContactsAutoSuggest",
+    ADD_CALL = "xBeesAddCall",
+    TERMINATE_CALL = "xBeesTerminateCall",
+    USE_THEME = "xBeesUseTheme",
+    PBX_TOKEN = "xBeesPbxToken"
+}
+export declare enum ClientEventType {
+    READY = "xBeesReady",
+    CONTEXT = "xBeesContext",
+    CURRENT_CONTACT = "xBeesCurrentContact",
+    THEME_MODE = "xBeesThemeMode",
+    THEME = "xBeesTheme",
+    START_CALL = "xBeesStartCall",
+    VIEW_PORT = "xBeesViewPort",
+    REBOOT = "xBeesReboot",
+    TO_CLIPBOARD = "xBeesToClipboard",
+    NOT_AUTHORIZED = "xBeesNotAuthorized",
+    AUTHORIZED = "xBeesAuthorized",
+    CONTACTS_AUTO_SUGGEST = "xBeesContactsAutoSuggest"
+}
+export type MessageType = ClientEventType | EventType;
+export type ThemeChangePayload = {
+    mode: "light" | "dark";
+    themeOptions?: {
+        typography?: unknown;
+        palette?: unknown;
+    };
+};
+export type ThemeChangeListenerCallback = (payload: ThemeChangePayload | unknown) => void;
+export type ListenerCallback = (payload: unknown) => void;
+export type DefaultCallback = (...args: unknown[]) => void;
+type CallStartInfo = {
+    destination: string;
+    video: boolean;
+};
+type EventPayload<T extends EventType> = T extends EventType.GET_CONTACTS_AUTO_SUGGEST ? string : T extends EventType.ADD_CALL ? CallStartInfo : T extends EventType.USE_THEME ? string : T extends EventType.PBX_TOKEN ? string : never;
+export type EventPayloadMap = {
+    [EventType.GET_CONTACTS_AUTO_SUGGEST]: string;
+    [EventType.ADD_CALL]: CallStartInfo;
+    [EventType.USE_THEME]: string;
+    [EventType.PBX_TOKEN]: string;
+};
+export type EventCallbackMap = {
+    [EventType.GET_CONTACTS_AUTO_SUGGEST]: (query: EventPayloadMap[EventType.GET_CONTACTS_AUTO_SUGGEST]) => void;
+    [EventType.ADD_CALL]: (callStartInfo: EventPayloadMap[EventType.ADD_CALL]) => void;
+    [EventType.USE_THEME]: (themeName: EventPayloadMap[EventType.USE_THEME]) => void;
+    [EventType.PBX_TOKEN]: (token: EventPayloadMap[EventType.PBX_TOKEN]) => void;
+};
+export type ClientEventCallbackMap = {
+    [ClientEventType.READY]: () => void;
+    [ClientEventType.CONTEXT]: (context: any) => void;
+    [ClientEventType.CURRENT_CONTACT]: (contact: Contact) => void;
+    [ClientEventType.THEME_MODE]: (themeMode: string) => void;
+    [ClientEventType.REBOOT]: () => void;
+    [ClientEventType.TO_CLIPBOARD]: (text: string) => void;
+    [ClientEventType.NOT_AUTHORIZED]: () => void;
+    [ClientEventType.AUTHORIZED]: () => void;
+    [ClientEventType.CONTACTS_AUTO_SUGGEST]: (suggestions: string[]) => void;
+};
+export interface ReactNativeWebView {
+    postMessage: (payload: unknown, origin?: string, d?: unknown[]) => void;
+}
+export interface Listener<T extends EventType = EventType> {
+    eventName: T;
+    callback: Callback<T>;
+}
+export type WorkVariants = 'info-frame' | 'daemon' | 'dialog';
+export interface AutoSuggestResult {
+    contacts: Contact[];
+    query: string;
+}
+export interface SendData {
+    sendAsync(data: any): Promise<Response>;
+}
+export type Resolve = (contacts: Contact[]) => void;
+export type Reject = (reason: string) => void;
+export type Callback<T extends EventType = EventType> = T extends keyof EventCallbackMap ? EventCallbackMap[T] : DefaultCallback;
+export type RemoveEventListener = () => void;
+export interface ClientConnect {
+    /**
+     * Sends to x-bees signal that iFrame is ready to be shown. iFrame should send it when the application starts and ready */
+    ready: () => Promise<Response>;
+    /**
+     * Retrieves the version of xBeesConnect */
+    version: () => string;
+    /**
+     * Determines x-bees is using this connect for messages only and this integration will not be shown on UI */
+    isDaemon: () => boolean;
+    /**
+     * Determines x-bees is using this connect for representation on UI and this integration will be shown on UI
+     * this opposite to {@link isDaemon} */
+    showsUi: () => boolean;
+    /**
+     * Retrieves current x-bees context data */
+    getContext: () => Promise<Response>;
+    /**
+     * Retrieves current opened in x-bees contact data */
+    getCurrentContact: () => Promise<Response>;
+    /**
+     * Retrieves current theme mode (light or dark) */
+    getThemeMode: () => Promise<Response>;
+    /**
+     * Retrieves current theme with mode (light or dark) and theme options like typography settings and palette */
+    getTheme: () => Promise<Response>;
+    /**
+     * Sends request to x-bees to start a call with the number */
+    startCall: (phoneNumber: string) => Promise<Response>;
+    /**
+     * Sends request to x-bees to restart the iFrame, reload with actual params and token */
+    reboot: () => Promise<Response>;
+    /**
+     * Sends request to x-bees about current frame size change */
+    setViewport: (payload: {
+        height: number;
+        width: number;
+    }) => Promise<Response>;
+    /**
+     * Sends request to x-bees to put string to the users clipboard */
+    toClipboard: (payload: string) => Promise<Response>;
+    /**
+     * Sends a response to x-bees for contacts autoSuggest */
+    getContactsAutoSuggest: (payload: AutoSuggestResult) => Promise<Response>;
+    /**
+     * pushes to x-bees message that user is authorized and no more actions required */
+    isAuthorized: (payload: string) => Promise<Response>;
+    /**
+     * pushes to x-bees message that user actions required */
+    isNotAuthorized: (payload: string) => Promise<Response>;
+    /**
+     * Starts listen for one of the events of the x-bees and handle with the provided callback */
+    addEventListener: <T extends EventType = EventType>(eventName: T, callback: Callback<T>) => RemoveEventListener;
+    /**
+     * Stops listen for one of the events of the x-bees with this particular callback */
+    removeEventListener: <T extends EventType = EventType>(eventName: T, callback: Callback<T>) => void;
+    /**
+     * Starts listen for the events of changing theme and handle with the provided callback */
+    onThemeChange: (callback: Callback<EventType.USE_THEME>) => void;
+    /**
+     * Starts listen for the events of changing pbx token and handle with the provided callback */
+    onPbxTokenChange: (callback: Callback<EventType.PBX_TOKEN>) => void;
+    /**
+     * Starts listen for the events of searching contacts and handle autosuggestion with the provided callback */
+    onSuggestContacts: (callback: (query: string, resolve: Resolve, reject: Reject) => void) => RemoveEventListener;
+    /**
+     * Starts listen for the events of starting the call and handle with the provided callback */
+    onCallStarted: (callback: Callback<EventType.ADD_CALL>) => void;
+    /**
+     * Starts listen for the events of ending the call and handle with the provided callback */
+    onCallEnded: (callback: Callback<EventType.TERMINATE_CALL>) => void;
+    /**
+     * Removes particular callback from handling events */
+    off: (callback: Callback) => void;
+}
+export {};

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@wildix/xbees-connect",
+  "version": "1.0.4-alpha.0",
+  "description": "This library provides easy communication between x-bees and integrated web applications",
+  "author": "dimitri.chernykh <dimitri.chernykh@wildix.com>",
+  "homepage": "",
+  "license": "MIT",
+  "main": "./dist-cjs/index.js",
+  "types": "./dist-types/index.d.ts",
+  "module": "./dist-es/index.js",
+  "type": "module",
+  "scripts": {
+    "build:es": "tsc -p tsconfig.es.json",
+    "build:types": "tsc -p tsconfig.types.json",
+    "build:docs": "typedoc",
+    "clean": "rimraf ./dist-* && rimraf *.tsbuildinfo"
+  },
+  "files": [
+    "dist-*/**"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git@git.wildix.com:dimitri.chernykh/sdk-ui.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "typescript": "^5.2.2"
+  },
+  "devDependencies": {
+    "rimraf": "^5.0.5"
+  },
+  "gitHead": "88d4593f7ab0adcff767df0f6297531a632558aa"
+}