feat: implement WebRTC warning badge

dev-server/containers/AppView/index.js

@@ -1,22 +1,39 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
+import callingModes from 'ringcentral-integration/modules/CallingSettings/callingModes';
 import OfflineModeBadge from '../../../src/components/OfflineModeBadge';
+import WebphoneBadge from '../../../src/components/WebphoneBadge';
 import Environment from '../../../src/components/Environment';
 import withPhone from '../../../src/lib/withPhone';
 
 import styles from './styles.scss';
 
 function AppView(props) {
-  return (
-    <div className={styles.root}>
-      {props.children}
-
+  const {
+    offline,
+    webphoneUnavailable,
+    onWebphoneBadgeClicked,
+  } = props;
+  let badge = null;
+  if (offline) {
+    badge = (
       <OfflineModeBadge
         offline={props.offline}
         showOfflineAlert={props.showOfflineAlert}
         currentLocale={props.currentLocale}
-      />
+      />);
+  } else if (webphoneUnavailable) {
+    badge = (
+      <WebphoneBadge
+        currentLocale={props.currentLocale}
+        onClick={onWebphoneBadgeClicked}
+      />);
+  }
+  return (
+    <div className={styles.root}>
+      {props.children}
+      {badge}
       <Environment
         server={props.server}
         enabled={props.enabled}
@@ -35,6 +52,8 @@ AppView.propTypes = {
   currentLocale: PropTypes.string.isRequired,
   offline: PropTypes.bool.isRequired,
   showOfflineAlert: PropTypes.func.isRequired,
+  webphoneUnavailable: PropTypes.bool.isRequired,
+  onWebphoneBadgeClicked: PropTypes.func.isRequired,
 };
 
 AppView.defaultProps = {
@@ -48,9 +67,12 @@ export default withPhone(connect((state, {
   phone: {
     locale,
     auth,
+    webphone,
+    audioSettings,
     environment,
     connectivityMonitor,
     rateLimiter,
+    callingSettings,
   },
 }) => ({
   currentLocale: locale.currentLocale,
@@ -61,11 +83,26 @@ export default withPhone(connect((state, {
     auth.proxyRetryCount > 0 ||
     rateLimiter.throttling
   ),
+  webphoneUnavailable: (
+    auth.ready &&
+    audioSettings.ready &&
+    webphone.ready &&
+    auth.loggedIn && (
+      callingSettings.callingMode === callingModes.webphone &&
+      (
+        !audioSettings.userMedia ||
+        !!webphone.errorCode
+      )
+    )
+  ),
 }), (dispatch, {
   phone: {
+    webphone,
     environment,
+    audioSettings,
     connectivityMonitor,
     rateLimiter,
+    callingSettings,
   },
 }) => ({
   onSetData: (options) => {
@@ -75,4 +112,19 @@ export default withPhone(connect((state, {
     rateLimiter.showAlert();
     connectivityMonitor.showAlert();
   },
+  onWebphoneBadgeClicked: () => {
+    // Only works for webphone mode
+    if (callingSettings.callingMode !== callingModes.webphone) {
+      return;
+    }
+    if (audioSettings && audioSettings.ready) {
+      audioSettings.showAlert();
+      audioSettings.getUserMedia();
+    }
+    if (webphone && webphone.ready) {
+      // Trigger reconnect
+      webphone.connect();
+      webphone.showAlert();
+    }
+  },
 }))(AppView));

dev-server/webpack.config.js

@@ -36,7 +36,7 @@ const base = {
         use: [
           'babel-loader',
           'react-svg-loader'
-        ],
+        ]
       },
       {
         test: /\.png|\.jpg|\.gif|\.svg/,

src/components/ActionMenuList/i18n/de-DE.js

@@ -0,0 +1,7 @@
+export default {
+  sureToDeleteVoiceMail: 'Soll diese Voicemail wirklich gelöscht werden?',
+  doNotAskAgain: 'Mich nicht nochmals fragen',
+};
+
+// @key: @#@"sureToDeleteVoiceMail"@#@ @source: @#@"Are you sure you want to delete this voicemail?"@#@
+// @key: @#@"doNotAskAgain"@#@ @source: @#@"Don't ask me again"@#@

src/components/ActionMenuList/i18n/en-AU.js

@@ -0,0 +1,7 @@
+export default {
+  sureToDeleteVoiceMail: 'Are you sure you want to delete this voicemail?',
+  doNotAskAgain: 'Don\'t ask me again',
+};
+
+// @key: @#@"sureToDeleteVoiceMail"@#@ @source: @#@"Are you sure you want to delete this voicemail?"@#@
+// @key: @#@"doNotAskAgain"@#@ @source: @#@"Don't ask me again"@#@

src/components/ActionMenuList/i18n/en-CA.js

@@ -0,0 +1,7 @@
+export default {
+  sureToDeleteVoiceMail: 'Are you sure you want to delete this voicemail?',
+  doNotAskAgain: 'Don\'t ask me again',
+};
+
+// @key: @#@"sureToDeleteVoiceMail"@#@ @source: @#@"Are you sure you want to delete this voicemail?"@#@
+// @key: @#@"doNotAskAgain"@#@ @source: @#@"Don't ask me again"@#@

src/components/ActionMenuList/i18n/en-GB.js

@@ -0,0 +1,7 @@
+export default {
+  sureToDeleteVoiceMail: 'Are you sure you want to delete this voicemail?',
+  doNotAskAgain: 'Don\'t ask me again',
+};
+
+// @key: @#@"sureToDeleteVoiceMail"@#@ @source: @#@"Are you sure you want to delete this voicemail?"@#@
+// @key: @#@"doNotAskAgain"@#@ @source: @#@"Don't ask me again"@#@

src/components/ActionMenuList/i18n/es-419.js

@@ -0,0 +1,7 @@
+export default {
+  sureToDeleteVoiceMail: '\xBFSeguro que desea eliminar este mensaje de voz?',
+  doNotAskAgain: 'No preguntar de nuevo',
+};
+
+// @key: @#@"sureToDeleteVoiceMail"@#@ @source: @#@"Are you sure you want to delete this voicemail?"@#@
+// @key: @#@"doNotAskAgain"@#@ @source: @#@"Don't ask me again"@#@

src/components/ActionMenuList/i18n/es-ES.js

@@ -0,0 +1,7 @@
+export default {
+  sureToDeleteVoiceMail: '\xBFSeguro que desea eliminar este mensaje de voz?',
+  doNotAskAgain: 'No volver a preguntar',
+};
+
+// @key: @#@"sureToDeleteVoiceMail"@#@ @source: @#@"Are you sure you want to delete this voicemail?"@#@
+// @key: @#@"doNotAskAgain"@#@ @source: @#@"Don't ask me again"@#@

src/components/ActionMenuList/i18n/fr-CA.js

@@ -0,0 +1,7 @@
+export default {
+  sureToDeleteVoiceMail: 'Voulez-vous vraiment supprimer ce message vocal?',
+  doNotAskAgain: 'Ne plus voir ce message',
+};
+
+// @key: @#@"sureToDeleteVoiceMail"@#@ @source: @#@"Are you sure you want to delete this voicemail?"@#@
+// @key: @#@"doNotAskAgain"@#@ @source: @#@"Don't ask me again"@#@

src/components/ActionMenuList/i18n/fr-FR.js

@@ -0,0 +1,7 @@
+export default {
+  sureToDeleteVoiceMail: 'Voulez-vous vraiment supprimer ce message vocal\xA0?',
+  doNotAskAgain: 'Ne plus afficher ce message à l\'avenir',
+};
+
+// @key: @#@"sureToDeleteVoiceMail"@#@ @source: @#@"Are you sure you want to delete this voicemail?"@#@
+// @key: @#@"doNotAskAgain"@#@ @source: @#@"Don't ask me again"@#@

src/components/ActionMenuList/i18n/it-IT.js

@@ -0,0 +1,7 @@
+export default {
+  sureToDeleteVoiceMail: 'Eliminare questo messaggio vocale?',
+  doNotAskAgain: 'Non chiedermelo più',
+};
+
+// @key: @#@"sureToDeleteVoiceMail"@#@ @source: @#@"Are you sure you want to delete this voicemail?"@#@
+// @key: @#@"doNotAskAgain"@#@ @source: @#@"Don't ask me again"@#@

src/components/ActionMenuList/i18n/ja-JP.js

@@ -0,0 +1,7 @@
+export default {
+  sureToDeleteVoiceMail: 'ボイスメールを削除しますか\uFF1F',
+  doNotAskAgain: '次回から通知しない',
+};
+
+// @key: @#@"sureToDeleteVoiceMail"@#@ @source: @#@"Are you sure you want to delete this voicemail?"@#@
+// @key: @#@"doNotAskAgain"@#@ @source: @#@"Don't ask me again"@#@

src/components/ActionMenuList/i18n/pt-BR.js

@@ -0,0 +1,7 @@
+export default {
+  sureToDeleteVoiceMail: 'Tem certeza de que deseja excluir esta caixa postal?',
+  doNotAskAgain: 'Não perguntar novamente',
+};
+
+// @key: @#@"sureToDeleteVoiceMail"@#@ @source: @#@"Are you sure you want to delete this voicemail?"@#@
+// @key: @#@"doNotAskAgain"@#@ @source: @#@"Don't ask me again"@#@

src/components/ActiveCallDialPad/i18n/en-AU.js

@@ -0,0 +1,9 @@
+export default {
+  hide: 'Hide',
+  end: 'End',
+  keypad: 'Keypad',
+};
+
+// @key: @#@"hide"@#@ @source: @#@"Hide"@#@
+// @key: @#@"end"@#@ @source: @#@"End"@#@
+// @key: @#@"keypad"@#@ @source: @#@"Keypad"@#@

src/components/ActiveCallItem/i18n/de-DE.js

@@ -20,6 +20,9 @@ export default {
   outboundCall: 'Ausgehend',
   from: 'Von',
   to: 'An',
+  hangup: 'Auflegen',
+  accept: 'Annehmen',
+  toVoicemail: 'An Voicemail weiterleiten',
 };
 
 // @key: @#@"logging"@#@ @source: @#@"Logging..."@#@
@@ -43,3 +46,6 @@ export default {
 // @key: @#@"outboundCall"@#@ @source: @#@"Outbound"@#@
 // @key: @#@"from"@#@ @source: @#@"From"@#@
 // @key: @#@"to"@#@ @source: @#@"To"@#@
+// @key: @#@"hangup"@#@ @source: @#@"Hangup"@#@
+// @key: @#@"accept"@#@ @source: @#@"Accept"@#@
+// @key: @#@"toVoicemail"@#@ @source: @#@"Send to Voicemail"@#@

src/components/ActiveCallItem/i18n/en-AU.js

@@ -0,0 +1,51 @@
+export default {
+  logging: 'Logging...',
+  logCall: 'Log Call',
+  editLog: 'Edit Log',
+  select: 'Select a matching record',
+  OnHold: 'On Hold',
+  Ringing: 'Ringing',
+  CallConnected: 'Call Connected',
+  unknownUser: 'Unknown User',
+  unknownNumber: 'Anonymous',
+  unavailable: 'Unavailable',
+  viewDetails: 'View Details',
+  addEntity: 'Create New',
+  addLog: 'Log',
+  text: 'Text',
+  call: 'Call',
+  addContact: 'Add contact',
+  missedCall: 'Missed',
+  inboundCall: 'Inbound',
+  outboundCall: 'Outbound',
+  from: 'From',
+  to: 'To',
+  hangup: 'Hang up',
+  accept: 'Accept',
+  toVoicemail: 'Send to voicemail',
+};
+
+// @key: @#@"logging"@#@ @source: @#@"Logging..."@#@
+// @key: @#@"logCall"@#@ @source: @#@"Log Call"@#@
+// @key: @#@"editLog"@#@ @source: @#@"Edit Log"@#@
+// @key: @#@"select"@#@ @source: @#@"Select a matching record"@#@
+// @key: @#@"OnHold"@#@ @source: @#@"On Hold"@#@
+// @key: @#@"Ringing"@#@ @source: @#@"Ringing"@#@
+// @key: @#@"CallConnected"@#@ @source: @#@"Call Connected"@#@
+// @key: @#@"unknownUser"@#@ @source: @#@"Unknown User"@#@
+// @key: @#@"unknownNumber"@#@ @source: @#@"Anonymous"@#@
+// @key: @#@"unavailable"@#@ @source: @#@"Unavailable"@#@
+// @key: @#@"viewDetails"@#@ @source: @#@"View Details"@#@
+// @key: @#@"addEntity"@#@ @source: @#@"Create New"@#@
+// @key: @#@"addLog"@#@ @source: @#@"Log"@#@
+// @key: @#@"text"@#@ @source: @#@"Text"@#@
+// @key: @#@"call"@#@ @source: @#@"Call"@#@
+// @key: @#@"addContact"@#@ @source: @#@"Add Contact"@#@
+// @key: @#@"missedCall"@#@ @source: @#@"Missed"@#@
+// @key: @#@"inboundCall"@#@ @source: @#@"Inbound"@#@
+// @key: @#@"outboundCall"@#@ @source: @#@"Outbound"@#@
+// @key: @#@"from"@#@ @source: @#@"From"@#@
+// @key: @#@"to"@#@ @source: @#@"To"@#@
+// @key: @#@"hangup"@#@ @source: @#@"Hangup"@#@
+// @key: @#@"accept"@#@ @source: @#@"Accept"@#@
+// @key: @#@"toVoicemail"@#@ @source: @#@"Send to Voicemail"@#@

src/components/ActiveCallItem/i18n/en-CA.js

@@ -20,6 +20,9 @@ export default {
   outboundCall: 'Outbound',
   from: 'From',
   to: 'To',
+  hangup: 'Hangup',
+  accept: 'Accept',
+  toVoicemail: 'Send to Voicemail',
 };
 
 // @key: @#@"logging"@#@ @source: @#@"Logging..."@#@
@@ -43,3 +46,6 @@ export default {
 // @key: @#@"outboundCall"@#@ @source: @#@"Outbound"@#@
 // @key: @#@"from"@#@ @source: @#@"From"@#@
 // @key: @#@"to"@#@ @source: @#@"To"@#@
+// @key: @#@"hangup"@#@ @source: @#@"Hangup"@#@
+// @key: @#@"accept"@#@ @source: @#@"Accept"@#@
+// @key: @#@"toVoicemail"@#@ @source: @#@"Send to Voicemail"@#@

src/components/ActiveCallItem/i18n/en-GB.js

@@ -20,6 +20,9 @@ export default {
   outboundCall: 'Outbound',
   from: 'From',
   to: 'To',
+  hangup: 'Hang up',
+  accept: 'Accept',
+  toVoicemail: 'Send to voicemail',
 };
 
 // @key: @#@"logging"@#@ @source: @#@"Logging..."@#@
@@ -43,3 +46,6 @@ export default {
 // @key: @#@"outboundCall"@#@ @source: @#@"Outbound"@#@
 // @key: @#@"from"@#@ @source: @#@"From"@#@
 // @key: @#@"to"@#@ @source: @#@"To"@#@
+// @key: @#@"hangup"@#@ @source: @#@"Hangup"@#@
+// @key: @#@"accept"@#@ @source: @#@"Accept"@#@
+// @key: @#@"toVoicemail"@#@ @source: @#@"Send to Voicemail"@#@

src/components/ActiveCallItem/i18n/es-419.js

@@ -20,6 +20,9 @@ export default {
   outboundCall: 'Saliente',
   from: 'De',
   to: 'Para',
+  hangup: 'Colgar',
+  accept: 'Aceptar',
+  toVoicemail: 'Enviar al buzón de voz',
 };
 
 // @key: @#@"logging"@#@ @source: @#@"Logging..."@#@
@@ -43,3 +46,6 @@ export default {
 // @key: @#@"outboundCall"@#@ @source: @#@"Outbound"@#@
 // @key: @#@"from"@#@ @source: @#@"From"@#@
 // @key: @#@"to"@#@ @source: @#@"To"@#@
+// @key: @#@"hangup"@#@ @source: @#@"Hangup"@#@
+// @key: @#@"accept"@#@ @source: @#@"Accept"@#@
+// @key: @#@"toVoicemail"@#@ @source: @#@"Send to Voicemail"@#@

src/components/ActiveCallItem/i18n/es-ES.js

@@ -16,10 +16,13 @@ export default {
   call: 'Llamar',
   addContact: 'Añadir contacto',
   missedCall: 'Perdida',
-  inboundCall: 'Entrantes',
-  outboundCall: 'Salientes',
+  inboundCall: 'Entrante',
+  outboundCall: 'Saliente',
   from: 'De',
   to: 'Para',
+  hangup: 'Colgar',
+  accept: 'Aceptar',
+  toVoicemail: 'Enviar al buzón de voz',
 };
 
 // @key: @#@"logging"@#@ @source: @#@"Logging..."@#@
@@ -43,3 +46,6 @@ export default {
 // @key: @#@"outboundCall"@#@ @source: @#@"Outbound"@#@
 // @key: @#@"from"@#@ @source: @#@"From"@#@
 // @key: @#@"to"@#@ @source: @#@"To"@#@
+// @key: @#@"hangup"@#@ @source: @#@"Hangup"@#@
+// @key: @#@"accept"@#@ @source: @#@"Accept"@#@
+// @key: @#@"toVoicemail"@#@ @source: @#@"Send to Voicemail"@#@

src/components/ActiveCallItem/i18n/fr-CA.js

@@ -20,6 +20,9 @@ export default {
   outboundCall: 'Sortant',
   from: 'De',
   to: 'À',
+  hangup: 'Raccrocher',
+  accept: 'Accepter',
+  toVoicemail: 'Envoyer vers la messagerie vocale',
 };
 
 // @key: @#@"logging"@#@ @source: @#@"Logging..."@#@
@@ -43,3 +46,6 @@ export default {
 // @key: @#@"outboundCall"@#@ @source: @#@"Outbound"@#@
 // @key: @#@"from"@#@ @source: @#@"From"@#@
 // @key: @#@"to"@#@ @source: @#@"To"@#@
+// @key: @#@"hangup"@#@ @source: @#@"Hangup"@#@
+// @key: @#@"accept"@#@ @source: @#@"Accept"@#@
+// @key: @#@"toVoicemail"@#@ @source: @#@"Send to Voicemail"@#@