feat(visitors): Adds notification for promotion requests. (#14316)

* feat(visitors): Adds notification for promotion requests.

* squash: fixes lint.

Author: damencho

react/features/notifications/constants.ts

@@ -103,6 +103,13 @@ export const RAISE_HAND_NOTIFICATION_ID = 'RAISE_HAND_NOTIFICATION';
  */
 export const SALESFORCE_LINK_NOTIFICATION_ID = 'SALESFORCE_LINK_NOTIFICATION';
 
+/**
+ * The identifier of the lobby notification.
+ *
+ * @type {string}
+ */
+export const VISITORS_PROMOTION_NOTIFICATION_ID = 'VISITORS_PROMOTION_NOTIFICATION';
+
 /**
  * Amount of participants beyond which no join notification will be emitted.
  */

react/features/visitors/actions.ts

@@ -36,7 +36,7 @@ export function admitMultiple(requests: Array<IPromotionRequest>): Function {
  * @param {IPromotionRequest} request - The request from the visitor.
  * @returns {Function}
  */
-export function approveRequest(request: IPromotionRequest): Function {
+export function approveRequest(request: IPromotionRequest) {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const conference = getCurrentConference(getState);
 
@@ -57,7 +57,7 @@ export function approveRequest(request: IPromotionRequest): Function {
  * @param {IPromotionRequest} request - The request from the visitor.
  * @returns {Function}
  */
-export function denyRequest(request: IPromotionRequest): Function {
+export function denyRequest(request: IPromotionRequest) {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         const conference = getCurrentConference(getState);
 

react/features/visitors/middleware.ts

@@ -1,11 +1,27 @@
+import i18n from 'i18next';
+import { batch } from 'react-redux';
+
+import { IStore } from '../app/types';
 import { CONFERENCE_JOINED, CONFERENCE_JOIN_IN_PROGRESS } from '../base/conference/actionTypes';
 import { JitsiConferenceEvents } from '../base/lib-jitsi-meet';
 import { raiseHand } from '../base/participants/actions';
 import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
-import { showNotification } from '../notifications/actions';
-import { NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
+import { BUTTON_TYPES } from '../base/ui/constants.any';
+import { hideNotification, showNotification } from '../notifications/actions';
+import {
+    NOTIFICATION_ICON,
+    NOTIFICATION_TIMEOUT_TYPE,
+    VISITORS_PROMOTION_NOTIFICATION_ID
+} from '../notifications/constants';
+import { open as openParticipantsPane } from '../participants-pane/actions';
 
-import { clearPromotionRequest, promotionRequestReceived, updateVisitorsCount } from './actions';
+import {
+    approveRequest,
+    clearPromotionRequest,
+    denyRequest,
+    promotionRequestReceived,
+    updateVisitorsCount
+} from './actions';
 import { getPromotionRequests } from './functions';
 
 MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
@@ -44,6 +60,10 @@ MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
             } else {
                 dispatch(clearPromotionRequest(request));
             }
+            _handlePromotionNotification({
+                dispatch,
+                getState
+            });
         });
 
         conference.on(JitsiConferenceEvents.VISITORS_REJECTION, () => {
@@ -66,3 +86,67 @@ MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
 
     return next(action);
 });
+
+/**
+ * Function to handle the promotion notification.
+ *
+ * @param {Object} store - The Redux store.
+ * @returns {void}
+ */
+function _handlePromotionNotification(
+        { dispatch, getState }: { dispatch: IStore['dispatch']; getState: IStore['getState']; }) {
+    const requests = getPromotionRequests(getState());
+
+    if (requests.length === 0) {
+        dispatch(hideNotification(VISITORS_PROMOTION_NOTIFICATION_ID));
+
+        return;
+    }
+
+    let notificationTitle;
+    let customActionNameKey;
+    let customActionHandler;
+    let customActionType;
+    let descriptionKey;
+    let icon;
+
+    if (requests.length === 1) {
+        const firstRequest = requests[0];
+
+        descriptionKey = 'notify.participantWantsToJoin';
+        notificationTitle = firstRequest.nick;
+        icon = NOTIFICATION_ICON.PARTICIPANT;
+        customActionNameKey = [ 'participantsPane.actions.admit', 'participantsPane.actions.reject' ];
+        customActionType = [ BUTTON_TYPES.PRIMARY, BUTTON_TYPES.DESTRUCTIVE ];
+        customActionHandler = [ () => batch(() => {
+            dispatch(hideNotification(VISITORS_PROMOTION_NOTIFICATION_ID));
+            dispatch(approveRequest(firstRequest));
+        }),
+        () => batch(() => {
+            dispatch(hideNotification(VISITORS_PROMOTION_NOTIFICATION_ID));
+            dispatch(denyRequest(firstRequest));
+        }) ];
+    } else {
+        descriptionKey = 'notify.participantsWantToJoin';
+        notificationTitle = i18n.t('notify.waitingParticipants', {
+            waitingParticipants: requests.length
+        });
+        icon = NOTIFICATION_ICON.PARTICIPANTS;
+        customActionNameKey = [ 'notify.viewLobby' ];
+        customActionType = [ BUTTON_TYPES.PRIMARY ];
+        customActionHandler = [ () => batch(() => {
+            dispatch(hideNotification(VISITORS_PROMOTION_NOTIFICATION_ID));
+            dispatch(openParticipantsPane());
+        }) ];
+    }
+
+    dispatch(showNotification({
+        title: notificationTitle,
+        descriptionKey,
+        uid: VISITORS_PROMOTION_NOTIFICATION_ID,
+        customActionNameKey,
+        customActionType,
+        customActionHandler,
+        icon
+    }, NOTIFICATION_TIMEOUT_TYPE.STICKY));
+}