feat(invite-dialog) Add limit message for invite dialog

lang/main.json

@@ -477,9 +477,11 @@
         "noRoom": "No room was specified to dial-in into.",
         "numbers": "Dial-in Numbers",
         "password": "$t(lockRoomPasswordUppercase): ",
+        "reachedLimit": "you have reached the limit for you plan.",
         "sip": "SIP address",
         "title": "Share",
-        "tooltip": "Share link and dial-in info for this meeting"
+        "tooltip": "Share link and dial-in info for this meeting",
+        "upgradeOptions": "Please check the upgrade options on"
     },
     "inlineDialogFailure": {
         "msg": "We stumbled a bit.",

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

@@ -24,6 +24,7 @@ import {
 } from '../../../functions';
 
 import CopyMeetingLinkSection from './CopyMeetingLinkSection';
+import DialInLimit from './DialInLimit';
 import DialInSection from './DialInSection';
 import InviteByEmailSection from './InviteByEmailSection';
 import InviteContactsSection from './InviteContactsSection';
@@ -84,6 +85,11 @@ type Props = {
      */
     _inviteUrl: string,
 
+    /**
+     * Whether or not the current meeting belongs to a JaaS user.
+     */
+     _isVpaasMeeting: boolean,
+
     /**
      * The current known URL for a live stream in progress.
      */
@@ -121,6 +127,7 @@ function AddPeopleDialog({
     _inviteAppName,
     _inviteContactsVisible,
     _inviteUrl,
+    _isVpaasMeeting,
     _liveStreamViewURL,
     _phoneNumber,
     t,
@@ -183,6 +190,9 @@ function AddPeopleDialog({
                         && _dialInVisible
                         && <DialInSection phoneNumber = { _phoneNumber } />
                 }
+                {
+                    !_dialInVisible && _isVpaasMeeting && <DialInLimit />
+                }
             </div>
         </Dialog>
     );
@@ -222,6 +232,7 @@ function mapStateToProps(state, ownProps) {
         _inviteAppName: inviteAppName,
         _inviteContactsVisible: interfaceConfig.ENABLE_DIAL_OUT && !hideInviteContacts,
         _inviteUrl: getInviteURL(state),
+        _isVpaasMeeting: isVpaasMeeting(state),
         _liveStreamViewURL:
             currentLiveStreamingSession
                 && currentLiveStreamingSession.liveStreamViewURL,

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

@@ -0,0 +1,58 @@
+/* eslint-disable lines-around-comment */
+import { Theme } from '@mui/material';
+import React from 'react';
+import { WithTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
+
+import { translate } from '../../../../base/i18n/functions';
+import { withPixelLineHeight } from '../../../../base/styles/functions.web';
+import { UPGRADE_OPTIONS_LINK, UPGRADE_OPTIONS_TEXT } from '../../../constants';
+
+const useStyles = makeStyles()((theme: Theme) => {
+    return {
+        limitContainer: {
+            backgroundColor: theme.palette.warning01,
+            borderRadius: '6px',
+            padding: '8px 16px'
+        },
+        limitInfo: {
+            color: theme.palette.field01,
+            ...withPixelLineHeight(theme.typography.bodyShortRegular)
+        },
+        link: {
+            color: theme.palette.field01,
+            fontWeight: 'bold',
+            textDecoration: 'underline'
+        }
+    };
+});
+
+/**
+ * Component that displays a message when the dial in limit is reached.
+ * * @param {Function} t - Function which translate strings.
+ *
+ * @returns {ReactElement}
+ */
+const DialInLimit: React.FC<WithTranslation> = ({ t }) => {
+    const { classes } = useStyles();
+
+    return (
+        <div className = { classes.limitContainer }>
+            <span className = { classes.limitInfo }>
+                <b>{ `${t('info.dialInNumber')} ` }</b>
+                { `${t('info.reachedLimit')} `}
+                { `${t('info.upgradeOptions')} ` }
+                <a
+                    className = { classes.link }
+                    href = { UPGRADE_OPTIONS_LINK }
+                    rel = 'noopener noreferrer'
+                    target = '_blank'>
+                    { `${UPGRADE_OPTIONS_TEXT}` }
+                </a>
+                .
+            </span>
+        </div>
+    );
+};
+
+export default translate(DialInLimit);

react/features/invite/constants.ts

@@ -54,3 +54,6 @@ export const INVITE_TYPES = {
     USER: 'user',
     VIDEO_ROOM: 'videosipgw'
 };
+
+export const UPGRADE_OPTIONS_TEXT = 'jaas.8x8.vc';
+export const UPGRADE_OPTIONS_LINK = 'https://jaas.8x8.vc/#/plan/upgrade';