@viibe/impulse-integration-js 2.3.5-alpha1 → 2.3.6

package/README.md

@@ -132,7 +132,7 @@ Triggered when the user clicks on an ongoing call. The host app may open a modal
 - event `authentication:error`
 - handler payload: `error: string`
 
-Triggered when the user is not authenticated. The host app may display a login button in place of the iframe (`{host}/api/auth/login/{provider}`). Otherwise the iframe should display a "login" button with username / password method
+Triggered when the user is not authenticated. The host app may display a login button in place of the iframe (`api-{host}/auth/login/{provider}`). Otherwise the iframe should display a "login" button with username / password method
 
 - event `authentication:token`
 - handler payload: `{token: string}`

package/dist/index.js

@@ -1 +1 @@
-(()=>{var t={579:t=>{function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function o(t,e,o){return e&&n(t.prototype,e),o&&n(t,o),t}function a(t){return function(e){return Boolean(e.isTrusted&&0===e.origin.indexOf(t))}}function i(t){var e=new URL(t),n="".concat(e.protocol,"//").concat(e.host),o=window.screen.width/2-240,i=window.screen.height/2-300,r=["toolbar=no","location=no","directories=no","status=no","menubar=no","scrollbars=no","resizable=no","copyhistory=no","width=".concat(480),"height=".concat(600),"top=".concat(i),"left=".concat(o)];return new Promise((function(e,o){var i=window.open(t,"Authorization",r.join(", "));i||o("Failed to open window");var c=setInterval((function(){i.closed&&(s(),o("User closed window"))}),100);function s(){window.removeEventListener("message",u),clearInterval(c)}function u(t){if(!a(n)(t))return null;if(t.data.token&&(s(),e(t.data.token)),t.data.error&&(s(),o(t.data.error)),t.data&&t.data.event&&t.data.payload)switch(t.data.event){case"authentication:success":return s(),e(t.data);case"authentication:failure":return s(),o(t.data)}}window.addEventListener("message",u)}))}var r,c,s,u=function(){function t(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"auth.viibe.tech";e(this,t),this.host=n}return o(t,[{key:"loginZendesk",value:function(t){return i("https://".concat(this.host,"/auth/zendesk/login?subdomain=").concat(t))}}]),t}(),l=function(){function t(n){e(this,t),this.handlers=[],this.host=n.host,this.origin=/^localhost/.test(this.host)?"http://".concat(this.host):"https://".concat(this.host),this.source=n.source,this.isViibeEvent=a(this.origin),window.addEventListener("message",this.onMessage.bind(this))}return o(t,[{key:"createNotificationIframe",value:function(){if(!this.host)throw new Error("fillHost");if(!this.source)throw new Error("fillSource");var t=document.createElement("iframe");return t.name="viibe-"+Math.floor(1e4*Math.random()),t.style="border: 0;width: 0;",t.src="".concat(this.origin,"/integration/features/notifications"),t}},{key:"createCallIframe",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!this.host)throw new Error("fillHost");if(!this.source)throw new Error("fillSource");var n=this.createCallUrl(e),o=document.createElement("iframe");return o.name="viibe-"+Math.floor(1e4*Math.random()),o.style="border: 0;width: calc(100% - 1rem);margin: 0.5rem;",o.src=n,o.allow="geolocation;autoplay;microphone;camera;midi;encrypted-media;clipboard-write;",this.on(o,"document",(function(e){return t.onDocument(e)})),o}},{key:"createCallUrl",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.clipboard,n=void 0!==e&&e,o=t.components,a=t.links,i=t.o2m,r=void 0!==i&&i,c=t.ticket,s=t.token,u=t.locale,l=t.standalone,d="".concat(this.origin,"/integration/features/call"),h=new URLSearchParams({resize:"true",source:this.source});if(c&&c.title&&h.set("title",c.title),c&&c.integration&&h.set("thirdPartyId",c.integration.id),a){var f=a instanceof Array?a.map((function(t){return"".concat(t.category,":").concat(t.value)})).join(","):String(a);h.set("links",f)}if(s&&h.set("token",s),u&&h.set("locale",u),o){var v=o instanceof Array?o.join(","):String(o);h.set("components",v)}return l&&h.set("standalone",Boolean(l)),h.set("clipboard",Boolean(n)),h.set("o2m",Boolean(r)),d+"?".concat(h)}},{key:"dispatch",value:function(t,e,n){return this.handlers.filter((function(e){return e.eventName===t&&(!e.windowName||e.windowName===n)})).map((function(t){return t.func(e)}))}},{key:"onMessage",value:function(t){return this.isViibeEvent(t)?t.data&&t.data.event&&t.data.payload?this.dispatch(t.data.event,t.data.payload,t.data.windowName):t.data&&t.data.token?this.dispatch("authentication:token",t.data.token):t.data&&t.data.error?this.dispatch("authentication:error",t.data.error):null:null}},{key:"on",value:function(t,e,n){"string"==typeof t&&"function"==typeof e&&void 0===n&&(n=e,e=t,t=null);var o={eventName:e,windowName:t?t.name:null,func:n};this.handlers.push(o)}},{key:"onDocument",value:function(t){window.open(t.signed_url,"_blank")}},{key:"authenticate",value:function(t){return i("".concat(this.origin,"/api/auth/login/").concat(t))}}]),t}();s=u,(c="Auth")in(r=l)?Object.defineProperty(r,c,{value:s,enumerable:!0,configurable:!0,writable:!0}):r.Auth=s,"undefined"!=typeof window&&(window.Viibe=l),t.exports=l}},e={},n=function n(o){var a=e[o];if(void 0!==a)return a.exports;var i=e[o]={exports:{}};return t[o](i,i.exports,n),i.exports}(579);module.exports=n})();
+(()=>{var t={579:t=>{function e(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function n(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function o(t,e,o){return e&&n(t.prototype,e),o&&n(t,o),t}function a(t){return function(e){return Boolean(e.isTrusted&&0===e.origin.indexOf(t))}}function i(t){var e=new URL(t),n="".concat(e.protocol,"//").concat(e.host),o=window.screen.width/2-240,i=window.screen.height/2-300,r=["toolbar=no","location=no","directories=no","status=no","menubar=no","scrollbars=no","resizable=no","copyhistory=no","width=".concat(480),"height=".concat(600),"top=".concat(i),"left=".concat(o)];return new Promise((function(e,o){var i=window.open(t,"Authorization",r.join(", "));i||o("Failed to open window");var c=setInterval((function(){i.closed&&(s(),o("User closed window"))}),100);function s(){window.removeEventListener("message",u),clearInterval(c)}function u(t){if(!a(n)(t))return null;if(t.data.token&&(s(),e(t.data.token)),t.data.error&&(s(),o(t.data.error)),t.data&&t.data.event&&t.data.payload)switch(t.data.event){case"authentication:success":return s(),e(t.data);case"authentication:failure":return s(),o(t.data)}}window.addEventListener("message",u)}))}var r,c,s,u="auth.viibe.pro",l=function(){function t(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:u;e(this,t),this.host=n}return o(t,[{key:"loginZendesk",value:function(t){return i("https://".concat(this.host,"/auth/zendesk/login?subdomain=").concat(t))}}]),t}(),d=function(){function t(n){e(this,t),this.handlers=[],this.host=n.host,this.origin=/^localhost/.test(this.host)?"http://".concat(this.host):"https://".concat(this.host),this.source=n.source,this.isViibeEvent=a(this.origin),window.addEventListener("message",this.onMessage.bind(this))}return o(t,[{key:"createNotificationIframe",value:function(){if(!this.host)throw new Error("fillHost");if(!this.source)throw new Error("fillSource");var t=document.createElement("iframe");return t.name="viibe-"+Math.floor(1e4*Math.random()),t.style="border: 0;width: 0;",t.src="".concat(this.origin,"/integration/features/notifications"),t}},{key:"createCallIframe",value:function(){var t=this,e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!this.host)throw new Error("fillHost");if(!this.source)throw new Error("fillSource");var n=this.createCallUrl(e),o=document.createElement("iframe");return o.name="viibe-"+Math.floor(1e4*Math.random()),o.style="border: 0;width: calc(100% - 1rem);margin: 0.5rem;",o.src=n,o.allow="geolocation;autoplay;microphone;camera;midi;encrypted-media;clipboard-write;",this.on(o,"document",(function(e){return t.onDocument(e)})),o}},{key:"createCallUrl",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.clipboard,n=void 0!==e&&e,o=t.components,a=t.links,i=t.o2m,r=void 0!==i&&i,c=t.ticket,s=t.token,u=t.locale,l=t.standalone,d="".concat(this.origin,"/integration/features/ticket"),h=new URLSearchParams({resize:"true",source:this.source});if(c&&c.title&&h.set("title",c.title),c&&c.integration&&h.set("thirdPartyId",c.integration.id),a){var f=a instanceof Array?a.map((function(t){return"".concat(t.category,":").concat(t.value)})).join(","):String(a);h.set("links",f)}if(s&&h.set("token",s),u&&h.set("locale",u),o){var v=o instanceof Array?o.join(","):String(o);h.set("components",v)}return l&&h.set("standalone",Boolean(l)),h.set("clipboard",Boolean(n)),h.set("o2m",Boolean(r)),d+"?".concat(h)}},{key:"dispatch",value:function(t,e,n){return this.handlers.filter((function(e){return e.eventName===t&&(!e.windowName||e.windowName===n)})).map((function(t){return t.func(e)}))}},{key:"onMessage",value:function(t){return this.isViibeEvent(t)?t.data&&t.data.event&&t.data.payload?this.dispatch(t.data.event,t.data.payload,t.data.windowName):t.data&&t.data.token?this.dispatch("authentication:token",t.data.token):t.data&&t.data.error?this.dispatch("authentication:error",t.data.error):null:null}},{key:"on",value:function(t,e,n){"string"==typeof t&&"function"==typeof e&&void 0===n&&(n=e,e=t,t=null);var o={eventName:e,windowName:t?t.name:null,func:n};this.handlers.push(o)}},{key:"onDocument",value:function(t){window.open(t.signed_url,"_blank")}},{key:"authenticate",value:function(t){return i("".concat(this.origin,"/api/auth/login/").concat(t))}}]),t}();s=l,(c="Auth")in(r=d)?Object.defineProperty(r,c,{value:s,enumerable:!0,configurable:!0,writable:!0}):r.Auth=s,"undefined"!=typeof window&&(window.Viibe=d),t.exports=d}},e={},n=function n(o){var a=e[o];if(void 0!==a)return a.exports;var i=e[o]={exports:{}};return t[o](i,i.exports,n),i.exports}(579);module.exports=n})();

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@viibe/impulse-integration-js",
-  "version": "2.3.5-alpha1",
+  "version": "2.3.6",
   "description": "ViiBE integration in js native",
   "main": "index.js",
   "publishConfig": {
-    "access":"public"
+    "access": "public"
   },
   "scripts": {
     "build": "webpack --mode production",
     "prepublish": "npm run build",
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "npm run build && jest",
     "publish:dev": "npm publish --tag dev"
   },
   "author": "Viibe",
@@ -17,8 +17,11 @@
   "devDependencies": {
     "@babel/core": "^7.15.8",
     "@babel/preset-env": "^7.15.8",
+    "@types/jest": "^28.1.3",
     "babel-loader": "^8.2.2",
     "core-js": "^3.18.2",
+    "jest": "^28.1.1",
+    "jest-environment-jsdom": "^28.1.1",
     "webpack": "^5.58.1",
     "webpack-cli": "^4.9.0"
   }

package/src/index.js

@@ -89,15 +89,17 @@ function openAuthPopup(src) {
   })
 }
 
+const DEFAULT_AUTH_HOST = 'auth.viibe.pro'
+
 class ViibeAuth {
 
-  // FIXME
-  constructor(host = 'auth.viibe.tech') {
+  constructor(host = DEFAULT_AUTH_HOST) {
     this.host = host;
   }
 
   loginZendesk(subdomain) {
-    const url = `https://${this.host}/auth/zendesk/login?subdomain=${subdomain}`;
+    const { origin } = document.location
+    const url = `https://${this.host}/auth/zendesk/login?subdomain=${subdomain}&origin=${origin}`;
     return openAuthPopup(url);
   }
 }
@@ -114,6 +116,12 @@ class Viibe {
    * @property {Function} func The function to trigger when an event is received
    */
 
+  /**
+   *
+   * @param {object} options
+   * @param {string} options.host Target ViiBE subdomain (e.g. test.viibe.tech)
+   * @param {string} options.source Integration source (e.g. zendesk)
+   */
   constructor(options) {
     /**
      * @type {Handler[]}
@@ -121,6 +129,7 @@ class Viibe {
     this.handlers = []
     this.host = options.host
     this.origin = /^localhost/.test(this.host) ? `http://${this.host}` : `https://${this.host}`
+    this.apiOrigin = /^localhost/.test(this.host) ? `http://${this.host}` : `https://api-${this.host}`
     this.source = options.source
 
     this.isViibeEvent = isFromOrigin(this.origin);
@@ -143,7 +152,7 @@ class Viibe {
     if (!this.host) throw new Error('fillHost')
     if (!this.source) throw new Error('fillSource')
 
-    const src = this.createCallUrl(options)
+    const src = this.generateIframeSrc(options)
 
     const iframe = document.createElement('iframe')
     iframe.name = 'viibe-' + Math.floor(Math.random() * 10000)
@@ -156,7 +165,7 @@ class Viibe {
     return iframe
   }
 
-  createCallUrl(options = {}) {
+  generateIframeSrc(options = {}) {
     const {
       clipboard = false,
       components,
@@ -168,11 +177,12 @@ class Viibe {
       standalone,
     } = options
 
-    let src = `${this.origin}/integration/features/call`
+    let src = `${this.origin}/integration/features/ticket`
 
     const params = new URLSearchParams({
       resize: 'true',
       source: this.source,
+      origin: document.location.origin,
     });
 
     if (ticket && ticket.title) params.set('title', ticket.title)
@@ -288,7 +298,8 @@ class Viibe {
    * @returns
    */
   authenticate(provider) {
-    const src = `${this.origin}/api/auth/login/${provider}`
+    const { protocol, host } = document.location
+    const src = `${protocol}//api-${host}/auth/login/${provider}?origin=${origin}`
 
     return openAuthPopup(src);
   }

package/test/dist.test.js

@@ -0,0 +1,67 @@
+/**
+ * @jest-environment jsdom
+ */
+
+const Viibe = require('../dist');
+
+describe('dist', () => {
+  test('exposes Viibe constructor', () => {
+    expect(typeof Viibe).toBe('function')
+    expect(() => new Viibe()).toThrowError()
+    expect(new Viibe({})).toBeInstanceOf(Viibe)
+  });
+
+  test('throws errors when host or source are not defined', () => {
+    const viibe = new Viibe({});
+    expect(() => viibe.createNotificationIframe()).toThrow('fillHost')
+    expect(() => viibe.createCallIframe()).toThrow('fillHost')
+
+    const viibeWithHost = new Viibe({host: 'clement.viibe.tech'})
+    expect(() => viibeWithHost.createNotificationIframe()).toThrow('fillSource')
+    expect(() => viibeWithHost.createCallIframe()).toThrow('fillSource')
+  })
+
+  test('constructor', () => {
+    const viibe = new Viibe({
+        host: 'clement.viibe.tech',
+        source: 'jest'
+    })
+    expect(viibe.host).toBe('clement.viibe.tech')
+    expect(viibe.source).toBe('jest')
+    expect(viibe.origin).toBe('https://clement.viibe.tech')
+
+    const viibeLocalhost = new Viibe({
+        host: 'localhost:6666'
+    })
+    expect(viibeLocalhost.origin).toBe('http://localhost:6666')
+  });
+
+  test('createNotificationIframe', () => {
+    const viibe = new Viibe({
+        host: 'clement.viibe.tech',
+        source: 'jest',
+    })
+    const iframe = viibe.createNotificationIframe()
+    expect(iframe).toBeInstanceOf(HTMLIFrameElement)
+    expect(iframe.name).toMatch(/^viibe-[0-9]{1,4}$/)
+    expect(iframe.style.border).toBe('0px')
+    expect(iframe.style.width).toBe('0px')
+    expect(iframe.src).toBe('https://clement.viibe.tech/integration/features/notifications')
+  })
+
+  test('createCallIframe', () => {
+    const viibe = new Viibe({
+        host: 'clement.viibe.tech',
+        source: 'jest',
+    })
+    const iframe = viibe.createCallIframe()
+    const callUrl = viibe.createCallUrl()
+    expect(iframe).toBeInstanceOf(HTMLIFrameElement)
+    expect(iframe.name).toMatch(/^viibe-[0-9]{1,4}$/)
+    expect(iframe.allow).toBe('geolocation;autoplay;microphone;camera;midi;encrypted-media;clipboard-write;')
+    expect(iframe.style.border).toBe('0px')
+    expect(iframe.style.margin).toBe('0.5rem')
+    expect(iframe.style.width).toBe('calc(100% - 1rem)')
+    expect(iframe.src).toEqual(callUrl)
+  })
+});

package/.vscode/settings.json

@@ -1,2 +0,0 @@
-{
-}