fix(highlight) check for JaaS features before opening the dialog

react/features/recording/components/Recording/AbstractHighlightButton.js

@@ -1,11 +1,12 @@
 // @flow
 
 import { Component } from 'react';
-import { batch } from 'react-redux';
 
 import { getActiveSession, isHighlightMeetingMomentDisabled } from '../..';
 import { openDialog } from '../../../base/dialog';
 import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
+import { maybeShowPremiumFeatureDialog } from '../../../jaas/actions';
+import { FEATURES } from '../../../jaas/constants';
 import {
     hideNotification,
     NOTIFICATION_TIMEOUT_TYPE,
@@ -76,11 +77,13 @@ export default class AbstractHighlightButton<P: Props> extends Component<P> {
                 titleKey: 'recording.highlightMoment',
                 uid: PROMPT_RECORDING_NOTIFICATION_ID,
                 customActionNameKey: [ 'localRecording.start' ],
-                customActionHandler: [ () => {
-                    batch(() => {
-                        dispatch(hideNotification(PROMPT_RECORDING_NOTIFICATION_ID));
+                customActionHandler: [ async () => {
+                    dispatch(hideNotification(PROMPT_RECORDING_NOTIFICATION_ID));
+                    const dialogShown = await dispatch(maybeShowPremiumFeatureDialog(FEATURES.RECORDING));
+
+                    if (!dialogShown) {
                         dispatch(openDialog(StartRecordingDialog));
-                    });
+                    }
                 } ],
                 appearance: NOTIFICATION_TYPE.NORMAL
             }, NOTIFICATION_TIMEOUT_TYPE.MEDIUM));

react/features/recording/components/Recording/web/HighlightButton.js

@@ -10,6 +10,8 @@ import { Label } from '../../../../base/label';
 import { connect } from '../../../../base/redux';
 import { Tooltip } from '../../../../base/tooltip';
 import BaseTheme from '../../../../base/ui/components/BaseTheme';
+import { maybeShowPremiumFeatureDialog } from '../../../../jaas/actions';
+import { FEATURES } from '../../../../jaas/constants';
 import { StartRecordingDialog } from '../../../components';
 import AbstractHighlightButton, {
     _abstractMapStateToProps,
@@ -129,8 +131,13 @@ export class HighlightButton extends AbstractHighlightButton<Props, State> {
     *
     * @returns {void}
     */
-    _onOpenDialog() {
-        this.props.dispatch(openDialog(StartRecordingDialog));
+    async _onOpenDialog() {
+        const { dispatch } = this.props;
+        const dialogShown = await dispatch(maybeShowPremiumFeatureDialog(FEATURES.RECORDING));
+
+        if (!dialogShown) {
+            dispatch(openDialog(StartRecordingDialog));
+        }
     }
 
     /**