@viibe/impulse-integration-js 2.1.0 → 2.2.3

package/README.md

@@ -0,0 +1,207 @@
+# Viibe SDK
+
+Viibe SDK allows to display a call iframe directly within your host application.
+
+The call iframe allows to
+
+- initiate a call
+- schedule a call
+- display past sessions
+
+### Constructor
+
+`const viibe = new Viibe({host, source})`
+
+**Options**
+
+`host` **(string, mandatory)**
+
+The ViiBE subdomain you want to display. 
+
+i.e : [`example.viibe.pro`](http://example.viibe.pro)
+
+`source` **(string, mandatory)**
+
+The source where your want to integrate ViiBE.
+
+The source will be added to the created ticket for reference.
+
+i.e: `example`
+
+### Create a Call
+
+⚠️  You will need a ViiBE token to display our iframe without login step. 
+
+`viibe.createCallIframe(options): HTMLElement`
+
+This method will create an iframe element which will display a initialization call page of your viibe subdomain. The iframe should be appended to the host application's DOM.
+
+`viibe.createCallURL(options): string`
+
+The method will generate the URL to the call page (used by `createCallUrl` ). The host application can use this URL to display the call frame in a popin or modal instead of an iframe.
+
+#### Options
+
+Both above methods support the same options:
+
+`links[]` **(array, optional)**
+
+The list of contacts to add to the call. The contacts are only prefilled and can be removed by the user before initiating the call. Other contacts can be added by the user via an input.
+
+Each item is an object with the following format:
+
+`category` **(string, mandatory)**
+
+The type of contact (`email`, `expertise`, or `phone`)
+
+`value` **(string, mandatory)**
+
+The contact itself; 
+
+- for `email` category, should be a valid email
+- for `phone` category, should be a full phone number (including national prefix)
+- for `expertise` category, should be an `id_expertise`
+
+`ticket`
+
+Represents the host application entity the call will be attached to. Viibe calls should typically be attached to a ticket, conversation or issue within the host application 
+
+`integration`
+
+`id` **(string, mandatory)**
+
+The external ID corresponding to ticket
+
+`title` **(string, optional)**
+
+The ticket title (will overwrite any existing ticket title)
+
+`token` **(string, optional)**
+
+A valid Viibe JWT token. If none is provided or the token is invalid, a `authentication:error` event will be triggered, and a "Login" button will be displayed within the iframe.
+
+`locale` **(string, optional)**
+
+An **ISO 639-1** language code.
+
+`components` **(array, optional)**
+
+A list of visible components among `call`, `schedule` and `session` (example: `['call','schedule']`)
+
+`o2m` **(boolean, optional, default = false)**
+
+Whether or not the user can call an expertise (i.e. a group of experts)
+
+`clipboard` **(boolean, optional, default = false)**
+
+If true, the user won't be able to edit the list of callees (links)
+
+### Authentication
+
+While the iframe should contain a "Login" button if you don't pass a token or your token is invalid, the Viibe SDK allows to open an authentication popup to obtain a Viibe JWT token to be passed to the call iframe:
+
+`viibe.authenticate(provider): Promise<string>`
+
+The `provider` param depends on the third-party authentication methods setup for your Viibe domain.
+
+### Events
+
+The host application can register event listeners to react to events occuring in the call iframe
+
+`viibe.on(event, handler)`
+
+`handler` will receive the event emitted by the call iframe
+
+**Supported events**
+
+- event `resize`
+- handler payload `{height: number}`
+
+Triggered when the height of the iframe content changes. The host app should likely resize the iframe to the appropriate size
+
+- event `click:session`
+- handler payload `{uuid: string, slug: string}`
+
+Triggered when the user clicks on a past session. The host app may open a modal or popup to display the session `{host}/session/{uuid}/{slug}`
+
+- event `click:call`
+- handler payload `{uuid: string, slug: string}`
+
+Triggered when the user clicks on an ongoing call. The host app may open a modal or popup to join the call (`{host}/call/{slug}/{uuid}`)
+
+- 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
+
+- event `authentication:token`
+- handler payload: `{token: string}`
+
+Triggered when the user was successfully authenticated from an authenticate() call, or when the authentication token has changed within the app
+
+**Example**
+
+```jsx
+viibe.on('authentication:error', (error) => {
+  console.log('authentication:error', error)
+  if (error === 'not authenticated') {
+    element.innerHTML = '';
+  }
+});
+
+viibe.on('click:session', (event) => {
+  console.log('click:session', event)
+});
+
+viibe.on('click:call', (event) => {
+  console.log('click:call', event)
+});
+
+viibe.on('resize', (event) => {
+  console.log('resize', event)
+});
+```
+
+## Iframe API
+
+### Global Query Parameters
+
+*Dev note: to be handled globally, either in integration boot or in IntegrationLayout*
+
+- `locale` **(string, optional)** : language to display the app into (e.g. `fr-FR`)
+- `source` **(string, optional)** : identifier for the host application (e.g. `zendesk`, `mdynamics`, `salesforce`)
+- `token` **(string, optional)** : a Viibe token to authenticate the user
+
+**Legacy intercom parameters**
+
+To be kept for backward compatibility, but should be isolated to the `postMessage` module
+
+- `uuid` **(string)** : the UUID of the iframe, typically generated by viibe.js for interframe com
+- `data` **(boolean)** : whether the host page will send initial postMessage data to the frame
+- `resize` **(boolean)** : whether the frame should emit postMessages when its content changes size
+
+### Call Parameters
+
+*Dev note: to be handled at component level via a vue-router router* 
+
+The "call feature" is actually attached to a ticket, and allows to create, renew or schedule calls within this ticket
+
+**Ticket identifier**
+
+Tickets displayed in integration iframes are usually identified by the host id (or `thirdPartyId`). Either of the following params must be present.
+
+- `thirdPartyId` **(string)** : an identifier of the host ticket to attach the Viibe ticket to (currently via `[ticket.integration.id](http://ticket.integration.id)`)
+- `slug` **(string)** : a viibe ticket slug (currently not supported)
+
+**Call modifiers** 
+
+The following parameters are passed from the host to the iframe to alter the current ticket
+
+- `title` **(string, optional)** : the title of the ticket, saved to the viibe ticket every time a call is created or scheduled.
+- `links` **(array, optional)** : a list of links to display in the "call" and "schedule" forms (i.e. to be added to the associated session on "call", "renew" or "schedule"). The array values are separated by comma (`,`) where each value has a `category` (e.g. `email`, `phone`, `username`, `expertise`, ...) and a `value` separated by a colon (example: `links=email:clement@viibe.co,username:charles,phone:+3361867999999`)
+
+**UI options (call feature only)**
+
+- `components` **(array, optional)**: a list of strings indicating the UI components to enable among `"call"`, `"schedule"` and `"session"` (default: all, example: `components=call,schedule,session`)
+- `clipboard` **(boolean, optional)**: controls whether the "smart input" to add new links is visible or not
+- `o2m` **(boolean, optional)** : controls whether the user can make one-to-many calls (i.e. can call expertises)

package/dist/index.js

@@ -1 +1 @@
-(()=>{"use strict";var e={d:(t,o)=>{for(var r in o)e.o(o,r)&&!e.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:o[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function o(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}e.r(t),e.d(t,{default:()=>r});const r=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.host=t.host,this.origin=/^localhost/.test(this.host)?"http://".concat(this.host):"https://".concat(this.host),this.source=t.source}var t,r;return t=e,r=[{key:"createCallIframe",value:function(){var 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 t=this.createCallUrl(e),o=document.createElement("iframe");return o.style="border: 0;width: calc(100% - 1rem);margin: 0.5rem;",o.src=t,o.allow="geolocation;autoplay;microphone;camera;midi;encrypted-media;clipboard-write;",o}},{key:"createCallUrl",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.links,o=e.ticket,r=e.token,n=e.locale,a="".concat(this.origin,"/integration/features/call"),i=["resize=true"];if(i.push("source=".concat(this.source)),null!=o&&o.integration&&i.push("thirdPartyId=".concat(o.integration.id)),t){var c=t.map((function(e){return"".concat(e.category,":").concat(e.value)})).join(",");i.push("links=".concat(c))}return r&&i.push("token=".concat(r)),n&&i.push("locale=".concat(n)),a+"?"+i.join("&")}},{key:"on",value:function(e,t){var o=this;window.addEventListener("message",(function(r){var n=Boolean(r.isTrusted&&0===r.origin.indexOf(o.origin)),a=Boolean(e===r.data.event);return n&&a&&t(r.data.payload||null),null}))}}],r&&o(t.prototype,r),e}();module.exports=t})();
+(()=>{var t={579:t=>{function e(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)}}var n=function(){function t(e){!function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}(this,t),this.host=e.host,this.origin=/^localhost/.test(this.host)?"http://".concat(this.host):"https://".concat(this.host),this.source=e.source,this.handlers={},window.addEventListener("message",this.onMessage.bind(this))}var n,o;return n=t,o=[{key:"createCallIframe",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!this.host)throw new Error("fillHost");if(!this.source)throw new Error("fillSource");var e=this.createCallUrl(t),n=document.createElement("iframe");return n.style="border: 0;width: calc(100% - 1rem);margin: 0.5rem;",n.src=e,n.allow="geolocation;autoplay;microphone;camera;midi;encrypted-media;clipboard-write;",n}},{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,i=t.links,a=t.o2m,r=void 0!==a&&a,s=t.ticket,c=t.token,l=t.locale,u="".concat(this.origin,"/integration/features/call"),d=new URLSearchParams({resize:"true",source:this.source});if(null!=s&&s.title&&d.set("title",s.title),null!=s&&s.integration&&d.set("thirdPartyId",s.integration.id),i){var h=i instanceof Array?i.map((function(t){return"".concat(t.category,":").concat(t.value)})).join(","):String(i);d.set("links",h)}if(c&&d.set("token",c),l&&d.set("locale",l),o){var f=o instanceof Array?o.join(","):String(o);d.set("components",f)}return d.set("clipboard",Boolean(n)),d.set("o2m",Boolean(r)),u+"?".concat(d)}},{key:"isViibeEvent",value:function(t){return Boolean(t.isTrusted&&0===t.origin.indexOf(this.origin))}},{key:"dispatch",value:function(t,e){var n=this.handlers[t];return n?n.map((function(t){return t(e)})):null}},{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&&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){(this.handlers[t]=this.handlers[t]||[]).push(e)}},{key:"authenticate",value:function(t){var e=this,n="".concat(this.origin,"/api/auth/login/").concat(t),o=window.screen.width/2-240,i=window.screen.height/2-300,a=["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(t,o){var i=window.open(n,"Authorization",a.join(", ")),r=setInterval((function(){i.closed&&(c(),s())}),100),s=function(){o("User closed window")},c=function(){window.removeEventListener("message",l),clearInterval(r)},l=function(n){if(!e.isViibeEvent(n))return null;n.data.token&&(c(),t(n.data.token)),n.data.error&&(c(),o(n.data.error))};window.addEventListener("message",l)}))}}],o&&e(n.prototype,o),t}();"undefined"!=typeof window&&(window.Viibe=n),t.exports=n}},e={},n=function n(o){var i=e[o];if(void 0!==i)return i.exports;var a=e[o]={exports:{}};return t[o](a,a.exports,n),a.exports}(579);module.exports=n})();

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "@viibe/impulse-integration-js",
-  "version": "2.1.0",
+  "version": "2.2.3",
   "description": "ViiBE integration in js native",
   "main": "index.js",
+  "publishConfig": {
+    "access":"public"
+  },
   "scripts": {
     "build": "webpack --mode production",
     "prepublish": "npm run build",

package/src/index.js

@@ -4,6 +4,9 @@ class Viibe {
     this.host = options.host
     this.origin = /^localhost/.test(this.host) ? `http://${this.host}` : `https://${this.host}`
     this.source = options.source
+    this.handlers = {}
+
+    window.addEventListener('message', this.onMessage.bind(this))
   }
 
   createCallIframe(options = {}) {
@@ -21,45 +24,157 @@ class Viibe {
   }
 
   createCallUrl(options = {}) {
-    const { links, ticket, token, locale } = options
+    const {
+      clipboard = false,
+      components,
+      links,
+      o2m = false,
+      ticket,
+      token,
+      locale
+    } = options
 
     let src = `${this.origin}/integration/features/call`
 
-    const params = ['resize=true']
-
-    params.push(`source=${this.source}`)
+    const params = new URLSearchParams({
+      resize: 'true',
+      source: this.source,
+    });
 
-    if (ticket?.integration) params.push(`thirdPartyId=${ticket.integration.id}`)
+    if (ticket?.title) params.set('title', ticket.title)
+    if (ticket?.integration) params.set('thirdPartyId', ticket.integration.id)
 
     if (links) {
-      const linksToParams = links.map(link => `${link.category}:${link.value}`).join(',')
-      params.push(`links=${linksToParams}`)
+      let linksParams = (links instanceof Array)
+        ? links.map(link => `${link.category}:${link.value}`).join(',')
+        : String(links)
+
+      params.set('links', linksParams)
     }
 
-    if (token) params.push(`token=${token}`)
+    if (token) params.set('token', token)
+
+    if (locale) params.set('locale', locale)
+
+    if (components) {
+      let componentsParams = (components instanceof Array)
+      ? components.join(',')
+      : String(components)
+
+      params.set('components', componentsParams)
+    }
 
-    if (locale) params.push(`locale=${locale}`)
+    params.set('clipboard', Boolean(clipboard))
+    params.set('o2m', Boolean(o2m))
     
-    src += '?' + params.join('&')
+    src += `?${params}`;
 
     return src
   }
 
-  on(eventName, handler) {
+  isViibeEvent(event) {
+    return Boolean(event.isTrusted && event.origin.indexOf(this.origin) === 0)
+  }
 
-    const handlerWrapper = event => {
-      const isFromViiBE = Boolean(event.isTrusted && event.origin.indexOf(this.origin) === 0)
-      const isFromThisEvent = Boolean(eventName === event.data.event)
+  dispatch(eventName, payload) {
+    const eventHandlers = this.handlers[eventName];
+    if(!eventHandlers) {
+      return null
+    }
+    return eventHandlers.map(handler => handler(payload))
+  }
 
-      if (isFromViiBE && isFromThisEvent) handler(event.data.payload || null)
+  onMessage(event) {
+    if(!this.isViibeEvent(event)) {
       return null
     }
 
-    window.addEventListener('message', handlerWrapper)
+    if(event.data && event.data.event && event.data.payload) {
+      return this.dispatch(event.data.event, event.data.payload)
+    }
+
+    // FIXME: legacy authentication messages
+    if(event.data && event.data.token) {
+      return this.dispatch('authentication:token', event.data.token)
+    }
+    if(event.data && event.data.error) {
+      return this.dispatch('authentication:error', event.data.error)
+    }
+
+    return null
   }
 
-}
+  on(eventName, handler) {
+    const eventHandlers = this.handlers[eventName] = this.handlers[eventName] || []
+    eventHandlers.push(handler);
+  }
+  
+  authenticate(provider) {
+    const src = `${this.origin}/api/auth/login/${provider}`
+    const width = 480
+    const height = 600
+    const TWO = 2
+
+    const left = (window.screen.width / TWO) - (width / TWO)
+    const top = (window.screen.height / TWO) - (height / TWO)
+    const windowParams = [
+      'toolbar=no',
+      'location=no',
+      'directories=no',
+      'status=no',
+      'menubar=no',
+      'scrollbars=no',
+      'resizable=no',
+      'copyhistory=no',
+      `width=${width}`,
+      `height=${height}`,
+      `top=${top}`,
+      `left=${left}`,
+    ]
+
+    return new Promise((resolve, reject) => {
+      const win = window.open(src, 'Authorization', windowParams.join(', '))
+      
+      const closeCheck = setInterval(() => {
+        if(win.closed) {
+          destroy();
+          onClose();
+        }
+      }, 100)
+
+      const onClose = () => {
+        reject('User closed window')
+      }
+
+      const destroy = () => {
+        window.removeEventListener('message', onMessage)
+        clearInterval(closeCheck)
+      }
+
+      const onMessage = event => {
+        if(!this.isViibeEvent(event)) {
+          return null
+        }
+        if(event.data.token) {
+          destroy();
+          resolve(event.data.token)
+        }
+        if(event.data.error) {
+          destroy();
+          reject(event.data.error)
+        }
+      }
+      
+      window.addEventListener('message', onMessage)
+    })
+    
+  }
 
-export default Viibe
+}
 
-// window.Viibe = Viibe
+if(typeof window !== 'undefined') {
+  window.Viibe = Viibe
+}
+if(typeof module !== 'undefined') {
+  module.exports = Viibe
+}