send a custom event to amplitude to indicate that participant status …

…in waiting area was changed

fix a bug in shouldShowPreCallMessage function

react/features/analytics/AnalyticsEvents.js

@@ -1,4 +1,5 @@
-import _ from "lodash";
+import _ from 'lodash';
+
 /**
  * The constant for the event type 'track'.
  * TODO: keep these constants in a single place. Can we import them from
@@ -801,9 +802,25 @@ export function createConnectionQualityChangedEvent(strength, stats) {
  * Remove the track id from the ConnectionQualityChangedEvent property.
  * If we don't want to send the trackId along with the property to amplitude.
  *
- * @param {Object} event - event object.
- * @returns {Object|number|string|undefined} property.
+ * @param {Object} event - Event object.
+ * @returns {Object|number|string|undefined} Property.
  */
 function removeTrackIdFromEventPropertyObject(event) {
     return event && _.isObject(event) && Object.values(event)[0];
 }
+
+/**
+ * Creates an event for an action on the waiting area page.
+ *
+ * @param {string} action - The action that the event represents.
+ * @param {boolean} attributes - Additional attributes to attach to the event.
+ * @returns {Object} The event in a format suitable for sending via
+ * sendAnalytics.
+ */
+export function createWaitingAreaPageEvent(action, attributes = {}) {
+    return {
+        action,
+        attributes,
+        source: 'waiting.area'
+    };
+}

react/features/base/conference/actions.js

@@ -69,9 +69,6 @@ import {
 } from './functions';
 import logger from './logger';
 import { Linking } from 'react-native';
-import {
-    updateParticipantReadyStatus
-} from '../../jane-waiting-area-native';
 
 declare var APP: Object;
 
@@ -419,7 +416,6 @@ export function conferenceWillLeave(conference: Object) {
             // eslint-disable-next-line no-mixed-operators
             if (url && surveyUrl) {
 
-                updateParticipantReadyStatus(jwt, 'left');
                 Linking.openURL(surveyUrl).then(() => {
                     sendBeaconToJaneRN(url, data).then(r => {
                         console.log(r, 'response');

react/features/base/react/components/functions.js

@@ -18,9 +18,12 @@ export function getFieldValue(fieldParameter: Object | string) {
 
 // eslint-disable-next-line require-jsdoc
 export function shouldShowPreCallMessage(state: Object) {
+    const participantType = getLocalParticipantType(state);
+    const { remoteParticipantsStatuses } = state['features/jane-waiting-area-native'];
 
     if (isJaneWaitingAreaEnabled(state)) {
-        return getLocalParticipantType(state) !== 'StaffMember' && !checkLocalParticipantCanJoin(state);
+        return participantType !== 'StaffMember'
+            && !checkLocalParticipantCanJoin(remoteParticipantsStatuses, participantType);
     }
 
     return true;

react/features/jane-waiting-area-native/components/DialogBox.native.js

@@ -2,7 +2,7 @@
 /* eslint-disable require-jsdoc, react/no-multi-comp, react/jsx-handler-names*/
 
 import React, { Component } from 'react';
-import { Image, Linking, Text, View } from 'react-native';
+import { Image, Linking, Text, View, Clipboard } from 'react-native';
 import { connect } from '../../base/redux';
 import {
     checkLocalParticipantCanJoin,
@@ -22,6 +22,7 @@ import styles from './styles';
 import { ActionButton } from './ActionButton.native';
 import { WebView } from 'react-native-webview';
 import _ from 'lodash';
+import { createWaitingAreaPageEvent, sendAnalytics } from '../../analytics';
 
 type DialogTitleProps = {
     participantType: string,
@@ -85,9 +86,32 @@ class DialogBox extends Component<DialogBoxProps> {
         this._onMessageUpdate = this._onMessageUpdate.bind(this);
     }
 
+    componentDidMount() {
+        const { jwt } = this.props;
+
+        Clipboard.setString('');
+        sendAnalytics(
+            createWaitingAreaPageEvent('loaded', undefined));
+        updateParticipantReadyStatus(jwt, 'waiting');
+    }
+
+
     _webviewOnError(error) {
-        console.log(error, 'webview error');
-        this._joinConference();
+        try {
+            throw new Error(error);
+        } catch (e) {
+            sendAnalytics(
+                createWaitingAreaPageEvent('webview.error', {
+                    error
+                }));
+            this._joinConference();
+        }
+    }
+
+    componentWillUnmount(): * {
+        const { updateRemoteParticipantsStatusesAction } = this.props;
+
+        updateRemoteParticipantsStatusesAction([]);
     }
 
     _joinConference() {
@@ -163,6 +187,10 @@ class DialogBox extends Component<DialogBoxProps> {
         const { jwtPayload, jwt } = this.props;
         const leaveWaitingAreaUrl = _.get(jwtPayload, 'context.leave_waiting_area_url') ?? '';
 
+        sendAnalytics(
+            createWaitingAreaPageEvent('return.button', {
+                event: 'clicked'
+            }));
         updateParticipantReadyStatus(jwt, 'left');
         Linking.openURL(leaveWaitingAreaUrl);
     }
@@ -187,6 +215,10 @@ class DialogBox extends Component<DialogBoxProps> {
         }
 
         if (webViewEvent && webViewEvent.error) {
+            sendAnalytics(
+                createWaitingAreaPageEvent('webview.error', {
+                    error: webViewEvent.error
+                }));
             if (webViewEvent.error.error === 'Signature has expired') {
                 setJaneWaitingAreaAuthStateAction('failed');
             } else {
@@ -215,7 +247,7 @@ class DialogBox extends Component<DialogBoxProps> {
                     </View>
                     <View style = { styles.messageWrapper }>
                         {
-                            <DialogTitle
+                            <DialogTitleHeader
                                 authState = { authState }
                                 localParticipantCanJoin = { localParticipantCanJoin }
                                 participantType = { participantType } />
@@ -304,8 +336,7 @@ const mapDispatchToProps = {
 
 export default connect(mapStateToProps, mapDispatchToProps)(DialogBox);
 
-
-const DialogTitle = (props: DialogTitleProps) => {
+const DialogTitleHeader = (props: DialogTitleProps) => {
     const { participantType, authState, localParticipantCanJoin } = props;
     const tokenExpiredHeader = 'Your appointment booking has expired';
     let header;
@@ -328,16 +359,16 @@ const DialogTitle = (props: DialogTitleProps) => {
 
 const DialogTitleMsg = (props: DialogTitleProps) => {
     const { participantType, authState, localParticipantCanJoin } = props;
-    let title;
+    let message;
 
     if (!localParticipantCanJoin) {
-        title = 'Test your audio and video while you wait.';
+        message = 'Test your audio and video while you wait.';
     } else if (participantType === 'StaffMember') {
-        title = 'When you are ready to begin, click on button below to admit your client into the video session.';
+        message = 'When you are ready to begin, click on button below to admit your client into the video session.';
     } else {
-        title = '';
+        message = '';
     }
 
     return (<Text
-        style = { styles.titleMsg }>{ authState === 'failed' ? '' : title }</Text>);
+        style = { styles.titleMsg }>{ authState === 'failed' ? '' : message }</Text>);
 };

react/features/jane-waiting-area-native/components/JaneWaitingArea.native.js

@@ -4,19 +4,13 @@ import React, { Component } from 'react';
 import { connect } from '../../base/redux';
 import { translate } from '../../base/i18n';
 import DialogBox from './DialogBox.native';
-import { updateParticipantReadyStatus } from '../functions';
 
 type Props = {
     appstate: Object,
     jwt: string
 };
 
 class JaneWaitingAreaNative extends Component<Props, State> {
-    componentDidMount() {
-        const { jwt } = this.props;
-
-        updateParticipantReadyStatus(jwt, 'waiting');
-    }
 
     render() {
         return (this.props.appstate && this.props.appstate.appState === 'active'

react/features/jane-waiting-area-native/functions.js

@@ -2,6 +2,10 @@
 /* eslint-disable require-jsdoc,max-len, no-undef*/
 import jwtDecode from 'jwt-decode';
 import _ from 'lodash';
+import {
+    createWaitingAreaPageEvent,
+    sendAnalytics
+} from '../analytics';
 
 export function isJaneWaitingAreaEnabled(state: Object): boolean {
     const { jwt } = state['features/base/jwt'];
@@ -17,7 +21,10 @@ export function updateParticipantReadyStatus(jwt: string, status: string): void
         const updateParticipantStatusUrl = _.get(jwtPayload, 'context.update_participant_status_url') ?? '';
         const info = { status };
 
-        // sendAnalytics(createWaitingAreaParticipantStatusChangedEvent(status));
+        sendAnalytics(createWaitingAreaPageEvent(
+            'participant.status.changed',
+           { status }
+        ));
 
         return fetch(updateParticipantStatusUrl, {
             method: 'POST',
@@ -30,11 +37,12 @@ export function updateParticipantReadyStatus(jwt: string, status: string): void
             })
         }).then(res => {
             if (!res.ok) {
-                throw Error('Can Not Update Current Participant\'s Status.');
+                throw Error('Can not update current participant\'s status.');
             }
         });
-    } catch (e) {
-        console.error(e);
+    } catch (error) {
+        sendAnalytics(createWaitingAreaPageEvent('error', { error }));
+        console.error(error);
     }
 }