fix(invite-dialog) adjust dial in limit display condition and styling (#12654)

react/features/base/util/uri.ts

@@ -1,6 +1,13 @@
 import { parseURLParams } from './parseURLParams';
 import { normalizeNFKC } from './strings';
 
+/**
+ * Http status codes.
+ */
+export enum StatusCode {
+    PaymentRequired = 402
+}
+
 /**
  * The app linking scheme.
  * TODO: This should be read from the manifest files later.

react/features/invite/components/add-people-dialog/web/AddPeopleDialog.tsx

@@ -10,8 +10,8 @@ import { translate } from '../../../../base/i18n/functions';
 import { JitsiRecordingConstants } from '../../../../base/lib-jitsi-meet';
 import { connect } from '../../../../base/redux/functions';
 import Dialog from '../../../../base/ui/components/web/Dialog';
+import { StatusCode } from '../../../../base/util/uri';
 import { isDynamicBrandingDataLoaded } from '../../../../dynamic-branding/functions.any';
-import { isVpaasMeeting } from '../../../../jaas/functions';
 import { getActiveSession } from '../../../../recording/functions';
 // @ts-ignore
 import { updateDialInNumbers } from '../../../actions';
@@ -80,9 +80,9 @@ interface IProps extends WithTranslation {
     _inviteUrl: string;
 
     /**
-     * Whether or not the current meeting belongs to a JaaS user.
+     * Whether the dial in limit has been exceeded.
      */
-    _isVpaasMeeting: boolean;
+    _isDialInOverLimit?: boolean;
 
     /**
      * The current known URL for a live stream in progress.
@@ -120,7 +120,7 @@ function AddPeopleDialog({
     _inviteAppName,
     _inviteContactsVisible,
     _inviteUrl,
-    _isVpaasMeeting,
+    _isDialInOverLimit,
     _liveStreamViewURL,
     _phoneNumber,
     t,
@@ -182,7 +182,7 @@ function AddPeopleDialog({
                         && <DialInSection phoneNumber = { _phoneNumber } />
                 }
                 {
-                    !_phoneNumber && _dialInVisible && _isVpaasMeeting && <DialInLimit />
+                    !_phoneNumber && _dialInVisible && _isDialInOverLimit && <DialInLimit />
                 }
             </div>
         </Dialog>
@@ -207,6 +207,7 @@ function mapStateToProps(state: IReduxState, ownProps: Partial<IProps>) {
     const hideInviteContacts = iAmRecorder || (!addPeopleEnabled && !dialOutEnabled);
     const dialIn = state['features/invite']; // @ts-ignore
     const phoneNumber = dialIn?.numbers ? _getDefaultPhoneNumber(dialIn.numbers) : undefined;
+    const isDialInOverLimit = dialIn?.error?.status === StatusCode.PaymentRequired;
 
     return {
         _dialIn: dialIn,
@@ -222,7 +223,7 @@ function mapStateToProps(state: IReduxState, ownProps: Partial<IProps>) {
         _inviteAppName: inviteAppName,
         _inviteContactsVisible: interfaceConfig.ENABLE_DIAL_OUT && !hideInviteContacts,
         _inviteUrl: getInviteURL(state),
-        _isVpaasMeeting: isVpaasMeeting(state),
+        _isDialInOverLimit: isDialInOverLimit,
         _liveStreamViewURL: currentLiveStreamingSession?.liveStreamViewURL,
         _phoneNumber: phoneNumber
     };

react/features/invite/components/add-people-dialog/web/DialInLimit.tsx

@@ -14,11 +14,11 @@ const useStyles = makeStyles()(theme => {
             padding: '8px 16px'
         },
         limitInfo: {
-            color: theme.palette.field01,
+            color: theme.palette.text.primary,
             ...withPixelLineHeight(theme.typography.bodyShortRegular)
         },
         link: {
-            color: theme.palette.field01,
+            color: `${theme.palette.text.primary} !important`,
             fontWeight: 'bold',
             textDecoration: 'underline'
         }

react/features/invite/functions.ts

@@ -9,7 +9,11 @@ import { JitsiRecordingConstants } from '../base/lib-jitsi-meet';
 import { getLocalParticipant, isLocalParticipantModerator } from '../base/participants/functions';
 import { toState } from '../base/redux/functions';
 import { parseURLParams } from '../base/util/parseURLParams';
-import { appendURLParam, parseURIString } from '../base/util/uri';
+import {
+    StatusCode,
+    appendURLParam,
+    parseURIString
+} from '../base/util/uri';
 import { isVpaasMeeting } from '../jaas/functions';
 import { getActiveSession } from '../recording/functions';
 
@@ -17,7 +21,8 @@ import { getDialInConferenceID, getDialInNumbers } from './_utils';
 import {
     DIAL_IN_INFO_PAGE_PATH_NAME,
     INVITE_TYPES,
-    SIP_ADDRESS_REGEX
+    SIP_ADDRESS_REGEX,
+    UPGRADE_OPTIONS_TEXT
 } from './constants';
 import logger from './logger';
 
@@ -514,6 +519,7 @@ export function getShareInfoText(state: IReduxState, inviteUrl: string, useHtml?
     if (includeDialInfo) {
         const { room } = parseURIString(inviteUrl);
         let numbersPromise;
+        let hasPaymentError = false;
 
         if (state['features/invite'].numbers
             && state['features/invite'].conferenceID) {
@@ -560,9 +566,19 @@ export function getShareInfoText(state: IReduxState, inviteUrl: string, useHtml?
                     i18next.t('info.dialInConferenceID')} ${
                     conferenceID}#\n\n`;
             })
-            .catch(error =>
+            .catch(error => {
-                logger.error('Error fetching numbers or conferenceID', error))
+                logger.error('Error fetching numbers or conferenceID', error);
+                hasPaymentError = error?.status === StatusCode.PaymentRequired;
+            })
             .then(defaultDialInNumber => {
+                if (hasPaymentError) {
+                    infoText += `${
+                        i18next.t('info.dialInNumber')} ${i18next.t('info.reachedLimit')} ${
+                        i18next.t('info.upgradeOptions')} ${UPGRADE_OPTIONS_TEXT}`;
+
+                    return infoText;
+                }
+
                 let dialInfoPageUrl = getDialInfoPageURL(state, room);
 
                 if (useHtml) {

react/features/invite/reducer.ts

@@ -26,7 +26,9 @@ const DEFAULT_STATE = {
 export interface IInviteState {
     calleeInfoVisible?: boolean;
     conferenceID?: string | number;
-    error?: Error;
+    error?: {
+        status: number;
+    };
     initialCalleeInfo?: Object;
     numbers?: string[];
     numbersEnabled: boolean;
@@ -73,6 +75,7 @@ ReducerRegistry.register<IInviteState>('features/invite', (state = DEFAULT_STATE
             return {
                 ...state,
                 conferenceID: action.conferenceID,
+                error: undefined,
                 numbers: action.dialInNumbers,
                 sipUri: action.sipUri,
                 numbersEnabled: true,
@@ -88,6 +91,7 @@ ReducerRegistry.register<IInviteState>('features/invite', (state = DEFAULT_STATE
         return {
             ...state,
             conferenceID: action.conferenceID,
+            error: undefined,
             numbers: action.dialInNumbers,
             numbersEnabled,
             numbersFetched: true