@wazo/sdk 0.38.22 → 0.39.0-beta.10

package/README.md

@@ -57,7 +57,6 @@ 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)
@@ -600,298 +599,6 @@ 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.onCallEstablished = call => {
-  // Invoked when the call is up
-};
-
-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.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
-};
-
-Softphone.onIFrameLoaded = session => {
-  // Invoked when the iframe is loaded
-};
-```
-
 ## Advanced API
 
 ### Libraries
@@ -1742,3 +1449,65 @@ ws.updateToken(newToken: string);
 ```js
 ws.close();
 ```
+
+
+# Usage with webpack 5
+
+As webpack 5 dropped some polyfill, you have to add them:
+
+```sh
+yarn add -D assert buffer https-browserify url stream-http stream-browserify browserify-zlib process
+```
+
+If you have used `create-react-app` to create your app, you can customize the webpack configuration with `react-app-rewired` :
+
+```sh
+yarn add -D react-app-rewired
+```
+
+Create a `config-overrides.js` file :
+```js
+const webpack = require('webpack');
+module.exports = function override(config, env) {
+  config.resolve.fallback = {
+    ...config.resolve.fallback,
+    assert: require.resolve("assert"),
+    buffer: require.resolve('buffer'),
+    https: require.resolve('https-browserify'),
+    url: require.resolve('url'),
+    http: require.resolve('stream-http'),
+    stream: require.resolve('stream-browserify'),
+    zlib: require.resolve('browserify-zlib'),
+  };
+
+  config.plugins.push(
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+      Buffer: ['buffer', 'Buffer'],
+    }),
+  );
+
+  config.module.rules.push({
+    test: /\.m?js/,
+    resolve: {
+      fullySpecified: false
+    }
+  })
+
+  return config;
+}
+```
+
+Then edit in `package.json` :
+```json
+"scripts": {
+  // ...
+  "start": "react-app-rewired start",
+  "build": "react-app-rewired build",
+  "test": "react-app-rewired test",
+  "eject": "react-app-rewired eject"
+  // ...
+},
+```
+
+Please refer to https://github.com/facebook/create-react-app/issues/11756 for more details.