@wazo/sdk 0.38.0 → 0.38.3

package/README.md

@@ -57,6 +57,7 @@ Wazo's Javascript SDK allows you to use these features :
       - [Participant](#participant)
       - [Participant events](#participant-events)
       - [Stream](#stream)
+    + [Softphone integration](#softphone-integration)
   * [Advanced API](#advanced-api)
     + [Libraries](#libraries)
       - [Require / Import](#require--import)
@@ -599,6 +600,298 @@ Detaches a stream from an existing htmlElement.
 
 - `htmlElement`: htmlElement.
 
+### Softphone integration
+
+To be able to integrate Wazo softphone in any web page, you can add :
+
+```js
+Wazo.Softphone.init({ 
+  url, //  Url of the softphone to be loaded in the iframe (optional).
+  width, // Width (in px) of the softphone (optional).
+  height, // Height (in px) of the softphone (optional).
+  server, // Stack host where the softphone should connect user  (optional).
+  port, // Stack port where the softphone should connect user  (optional).
+  language, // Softphone language (optional).
+  wrapUpDuration, // How long (in seconds) should the softphone display the card after the call (optional).
+  // When the user changes anything on the card, this timeout is canceled
+  enableAgent, // display the agent tab in the tab bar (defaults to true).
+  tenantId, // Tenant id used for LDAP connection
+  debug, // Set to `true` to display wording customization labels
+});
+```
+
+#### Methods
+
+##### Making a call
+```js
+Wazo.Softphone.makeCall(number);
+```
+- `number`: Number to call through the softphone
+
+##### Showing / hidding the softphone
+```js
+Wazo.Softphone.toggleSoftphoneDisplay();
+Wazo.Softphone.displaySoftphone();
+Wazo.Softphone.hideSoftphone();
+```
+
+##### Parsing links on the page
+```js
+Wazo.Softphone.parseLinks();
+```
+
+Each link with a `href="tel:"` or  `href="callto:"` will make a call through the softphone.
+
+#### Sending search results to the softphone:
+```js
+Wazo.Softphone.onOptionsResults(fieldId, results);
+```
+
+`onOptionsResults` is used to populate Autocomplete fields
+
+#### Updating card value:
+```js
+Wazo.Softphone.setCardValue(field, value);
+```
+
+#### Customizing page style
+
+You can inspect the iframe with your dev tool console to figure out how to override styles.
+
+```js
+Wazo.Softphone.injectCss(`
+  # Reduce dialer number font size
+  .keypad-number, .keypad-number::placeholder {
+    font-size: 20px;
+  }
+`);
+```
+
+#### Override appearance
+```js
+Softphone.customizeAppearance({
+  // Theme, default values :
+  primary: '#203890',
+  button: '#292C87',
+  black: '#000',
+  white: '#fff',
+  greenButton: '#7ed865',
+  greenButtonHover: '#6ebf5a',
+  redButton: '#FA5846',
+  redButtonHover: '#FF604F',
+  buttonText: '#fff',
+  error: '#E80539',
+  secondary: '#203890',
+  grey: '#8A95A0',
+  secondGrey: '#eee',
+  headerColor: '#888',
+  avatar: '#bdbdbd',
+  divider: 'rgba(0, 0, 0, 0.12)',
+  placeholder: 'rgba(22, 44, 66, 0.5)',
+  hovered: '#6181F4',
+}, {
+  // Translation
+  // Set `debug: true` to know where to change translations, eg:
+  en: {
+    user: {
+      login: 'My login button', // will be displayed as `user:login` in the button when settings `debug: true` in the init() method
+    },
+  },
+}, {
+  // Assets
+  // logo: [url to your logo],
+});
+```
+
+`onOptionsResults` is used to populate Autocomplete fields
+
+#### Customizing card form
+
+You can use [JSON schema](http://json-schema.org/) to customize the card form with `Softphone.setFormSchema(schema, uiSchema)`,
+the Softphone uses [React Json schema form](https://react-jsonschema-form.readthedocs.io) internally to display card form :
+
+```js
+Softphone.setFormSchema({
+  type: 'object',
+  required: ['title', 'phone'],
+  properties: {
+    title: { type: 'string', title: 'Title' },
+    phone: { type: 'string', title: 'Phone' },
+    note: { type: 'string', title: 'Note' },
+  },
+}, {
+  note: { 'ui:widget': 'textarea' },
+});
+```
+
+##### Auto complete
+We can use an `autocomplete` widget to search on fields in the `uiSchema`:
+
+```js
+{
+  note :{ 'ui:widget': 'textarea'},
+  clientId :{ 'ui:field': 'autocomplete'},
+};
+```
+
+In the `schema` field, we can customize if we want to display a `+` button :
+```js
+clientId: {
+  type: 'object',
+  title: 'Client id',
+  // triggers the `onDisplayLinkedOption` event when changing the value
+  triggerDisplay: true,
+  // createForm is another JSON schema the description the add option form.
+  createForm: {
+    optionLabel: '%firstname% %lastname%',
+    schema: {
+      type: 'object',
+      required: ['phone'],
+      properties: {
+        firstname: { type: 'string', title: 'Firstname' },
+        lastname: { type: 'string', title: 'Lastname' },
+        phone: { type: 'string', title: 'Phone' },
+      }
+    },
+    uiSchema: {}
+  },
+}
+```
+
+#### Callbacks
+
+You can listen to softphone callback, with :
+
+```js
+Wazo.Softphone.onLinkEnabled = link => {
+  // link is `<a>` html tag in the page with a href="tel:xx" (or callto:xxx) beeing processed
+  // You can make change here, like addind className, etc ...
+};
+
+Softphone.onCallIncoming = call => {
+  // Invoked when a call is incoming in the softphone
+  // You can make action here like redirecting to the contact page (by using `call.number).
+};
+
+Softphone.onCallLocallyAnswered = call => {
+  // Invoked when the user accepts the call locally
+};
+
+Softphone.onCallRemotelyAnswered = call => {
+  // Invoked when the other party accepts the call
+};
+
+Softphone.onOutgoingCallMade = call => {
+  // Invoked when the user makes a call
+};
+
+Softphone.onCallRejected = call => {
+  // Invoked when the user rejects an incoming call
+};
+
+Softphone.onCallEnded = (call, card, direction) => {
+  // Invoked when the call is ended
+};
+
+Softphone.onCardSaved = card => {
+  // Invoked when the user save the card at the end of the call
+};
+
+Softphone.onCallMade = call => {
+  // Invoked when an outgoing call is made
+};
+
+Softphone.onSearchOptions = (fieldId: string, query: string) => {
+  // Invoked when the user is making a search from an Autocomplete field in the card form
+  // We need to call `onOptionsResults` here to send results to the softphone
+};
+
+Softphone.onDisplayLinkedOption = (optionId: string) => {
+  // Invoked when the user is selecting a value in a Autocomplete widget
+  // useful to display this entity in your application
+};
+
+Softphone.onWazoContactSearch = (query: string) => {
+  // Invoked when the user is searching from contact page
+};
+
+Softphone.onAgentLoggedIn = () => {
+  // Invoked when the agent logs in
+};
+
+Softphone.onAgentLoggedOut = () => {
+  // Invoked when the agent logs out
+};
+
+Softphone.onAgentPaused = () => {
+  // Invoked when the agent is paused
+};
+
+Softphone.onLanguageChanged = (language: string) => {
+  // Invoked when the user changed the softphone language
+};
+
+Softphone.onCallHeld = () => {
+  // Invoked when the current call is held
+};
+
+Softphone.onCallResumed = () => {
+  // Invoked when the current call is resumed
+};
+
+Softphone.onCallMuted = () => {
+  // Invoked when the current call is muted
+};
+
+Softphone.onCallUnMuted = () => {
+  // Invoked when the current call is un muted
+};
+
+Softphone.onDtmfSent = (tone: string) => {
+  // Invoked when the user is sending a DTMF in the current call
+};
+
+Softphone.onDirectTransfer = (number: string) => {
+  // Invoked when the user is transfers the current call directly
+};
+
+Softphone.onCreateIndirectTransfer = (number: string) => {
+  // Invoked when the user initiates an indirect transfer for the current call
+};
+
+Softphone.onCancelIndirectTransfer = () => {
+  // Invoked when the user cancels the current indirect transfer
+};
+
+Softphone.onConfirmIndirectTransfer = () => {
+  // Invoked when the user confirms the current indirect transfer
+};
+
+Softphone.onIndirectCallMade = (call: Object) => {
+  // Invoked when the current indirect transfer is made
+};
+
+Softphone.onIndirectTransferDone = (call: Object) => {
+  // Invoked when the current indirect transfer is over
+};
+
+Softphone.onStartRecording = () => {
+  // Invoked when the user records the current call
+};
+
+Softphone.onStopRecording = () => {
+  // Invoked when the user stops recording the current call
+};
+
+Softphone.onAuthenticated = session => {
+  // Invoked when the user is authenticated in the softphone
+};
+
+Softphone.onLoggedOut = session => {
+  // Invoked when the user is is logged out in the softphone
+};
+```
+
 ## Advanced API
 
 ### Libraries