(feature) - Add support for custom DID numbers page url

react/features/dynamic-branding/reducer.js

      */
     defaultBranding: true,
 
+    /**
+     * Url for a custom page for DID numbers list.
+     *
+     * @public
+     * @type {string}
+     */
+    didPageUrl: '',
+
     /**
      * The custom invite domain.
      *
             backgroundColor,
             backgroundImageUrl,
             defaultBranding,
+            didPageUrl,
             inviteDomain,
             logoClickUrl,
             logoImageUrl
             backgroundColor,
             backgroundImageUrl,
             defaultBranding,
+            didPageUrl,
             inviteDomain,
             logoClickUrl,
             logoImageUrl,

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

 // @flow
 
-import React, { useState, useEffect } from 'react';
+import React, { useEffect } from 'react';
 
 import { createInviteDialogEvent, sendAnalytics } from '../../../../analytics';
-import { getRoomName } from '../../../../base/conference';
 import { getInviteURL } from '../../../../base/connection';
 import { Dialog } from '../../../../base/dialog';
 import { translate } from '../../../../base/i18n';
 import { JitsiRecordingConstants } from '../../../../base/lib-jitsi-meet';
-import { getLocalParticipant } from '../../../../base/participants';
 import { connect } from '../../../../base/redux';
 import { isVpaasMeeting } from '../../../../billing-counter/functions';
 import EmbedMeetingTrigger from '../../../../embed-meeting/components/EmbedMeetingTrigger';
 
 type Props = {
 
-    /**
-     * The name of the current conference. Used as part of inviting users.
-     */
-    _conferenceName: string,
-
     /**
      * The object representing the dialIn feature.
      */
      */
     _embedMeetingVisible: boolean,
 
+    /**
+     * The meeting invitation text.
+     */
+    _invitationText: string,
+
     /**
      * Whether or not invite contacts should be visible.
      */
     _liveStreamViewURL: string,
 
     /**
-     * The redux representation of the local participant.
-     */
-    _localParticipantName: ?string,
-
-    /**
-     * The current location url of the conference.
+     * The default phone number.
      */
-    _locationUrl: Object,
+    _phoneNumber: ?string,
 
     /**
      * Invoked to obtain translated strings.
  * @returns {React$Element<any>}
  */
 function AddPeopleDialog({
-    _conferenceName,
     _dialIn,
     _embedMeetingVisible,
+    _invitationText,
     _inviteContactsVisible,
     _inviteUrl,
     _liveStreamViewURL,
-    _localParticipantName,
-    _locationUrl,
+    _phoneNumber,
     t,
     updateNumbers }: Props) {
-    const [ phoneNumber, setPhoneNumber ] = useState(undefined);
 
     /**
      * Updates the dial-in numbers.
         };
     }, []);
 
-    /**
-     * Updates the phone number in the state once the dial-in numbers are fetched.
-     *
-     * @returns {void}
-     */
-    useEffect(() => {
-        if (!phoneNumber && _dialIn && _dialIn.numbers) {
-            setPhoneNumber(_getDefaultPhoneNumber(_dialIn.numbers));
-        }
-    }, [ _dialIn ]);
-
-    const invite = getInviteText({
-        _conferenceName,
-        _localParticipantName,
-        _inviteUrl,
-        _locationUrl,
-        _dialIn,
-        _liveStreamViewURL,
-        phoneNumber,
-        t
-    });
     const inviteSubject = t('addPeople.inviteMoreMailSubject', {
         appName: interfaceConfig.APP_NAME
     });
                 <CopyMeetingLinkSection url = { _inviteUrl } />
                 <InviteByEmailSection
                     inviteSubject = { inviteSubject }
-                    inviteText = { invite } />
+                    inviteText = { _invitationText } />
                 { _embedMeetingVisible && <EmbedMeetingTrigger /> }
                 <div className = 'invite-more-dialog separator' />
                 {
                 }
                 {
                     _dialIn.numbers
-                        && <DialInSection
-                            conferenceName = { _conferenceName }
-                            dialIn = { _dialIn }
-                            locationUrl = { _locationUrl }
-                            phoneNumber = { phoneNumber } />
+                        && <DialInSection phoneNumber = { _phoneNumber } />
                 }
             </div>
         </Dialog>
  * {@code AddPeopleDialog} component.
  *
  * @param {Object} state - The Redux state.
+ * @param {Object} ownProps - The properties explicitly passed to the component.
  * @private
  * @returns {Props}
  */
-function mapStateToProps(state) {
-    const localParticipant = getLocalParticipant(state);
+function mapStateToProps(state, ownProps) {
     const currentLiveStreamingSession
         = getActiveSession(state, JitsiRecordingConstants.mode.STREAM);
     const { iAmRecorder } = state['features/base/config'];
     const addPeopleEnabled = isAddPeopleEnabled(state);
     const dialOutEnabled = isDialOutEnabled(state);
     const hideInviteContacts = iAmRecorder || (!addPeopleEnabled && !dialOutEnabled);
+    const dialIn = state['features/invite'];
+    const phoneNumber = dialIn && dialIn.numbers ? _getDefaultPhoneNumber(dialIn.numbers) : undefined;
 
     return {
-        _conferenceName: getRoomName(state),
-        _dialIn: state['features/invite'],
+        _dialIn: dialIn,
         _embedMeetingVisible: !isVpaasMeeting(state),
+        _invitationText: getInviteText({ state,
+            phoneNumber,
+            t: ownProps.t }),
         _inviteContactsVisible: interfaceConfig.ENABLE_DIAL_OUT && !hideInviteContacts,
         _inviteUrl: getInviteURL(state),
         _liveStreamViewURL:
             currentLiveStreamingSession
                 && currentLiveStreamingSession.liveStreamViewURL,
-        _localParticipantName: localParticipant?.name,
-        _locationUrl: state['features/base/connection'].locationURL
+        _phoneNumber: phoneNumber
     };
 }
 

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

 import React from 'react';
 
 import { translate } from '../../../../base/i18n';
+import { connect } from '../../../../base/redux';
 import { getDialInfoPageURL } from '../../../functions';
 
 import DialInNumber from './DialInNumber';
 
 type Props = {
 
-    /**
-     * The name of the current conference. Used as part of inviting users.
-     */
-    conferenceName: string,
-
     /**
      * The object representing the dialIn feature.
      */
-    dialIn: Object,
+    _dialIn: Object,
 
     /**
-     * The current location url of the conference.
+     * The url of the page containing the dial-in numbers list.
      */
-    locationUrl: Object,
+    _dialInfoPageUrl: string,
 
     /**
      * The phone number to dial to begin the process of dialing into a
  * @returns {null|ReactElement}
  */
 function DialInSection({
-    conferenceName,
-    dialIn,
-    locationUrl,
+    _dialIn,
+    _dialInfoPageUrl,
     phoneNumber,
     t
 }: Props) {
     return (
         <div className = 'invite-more-dialog dial-in-display'>
             <DialInNumber
-                conferenceID = { dialIn.conferenceID }
+                conferenceID = { _dialIn.conferenceID }
                 phoneNumber = { phoneNumber } />
             <a
                 className = 'more-numbers'
-                href = {
-                    getDialInfoPageURL(
-                        conferenceName,
-                        locationUrl
-                    )
-                }
+                href = { _dialInfoPageUrl }
                 rel = 'noopener noreferrer'
                 target = '_blank'>
                 { t('info.moreNumbers') }
     );
 }
 
-export default translate(DialInSection);
+
+/**
+ * Maps (parts of) the Redux state to the associated props for the
+ * {@code DialInLink} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {Props}
+ */
+function _mapStateToProps(state) {
+    return {
+        _dialIn: state['features/invite'],
+        _dialInfoPageUrl: getDialInfoPageURL(state)
+    };
+}
+
+export default translate(connect(_mapStateToProps)(DialInSection));

react/features/invite/functions.js

 // @flow
 
+import { getActiveSession } from '../../features/recording/functions';
+import { getRoomName } from '../base/conference';
+import { getInviteURL } from '../base/connection';
 import { i18next } from '../base/i18n';
-import { isLocalParticipantModerator } from '../base/participants';
+import { JitsiRecordingConstants } from '../base/lib-jitsi-meet';
+import { getLocalParticipant, isLocalParticipantModerator } from '../base/participants';
 import { toState } from '../base/redux';
 import { doGetJSON, parseURIString } from '../base/util';
 import { isVpaasMeeting } from '../billing-counter/functions';
  * @returns {string}
  */
 export function getInviteText({
-    _conferenceName,
-    _localParticipantName,
-    _inviteUrl,
-    _locationUrl,
-    _dialIn,
-    _liveStreamViewURL,
+    state,
     phoneNumber,
     t
 }: Object) {
-    const inviteURL = _decodeRoomURI(_inviteUrl);
-
-    let invite = _localParticipantName
-        ? t('info.inviteURLFirstPartPersonal', { name: _localParticipantName })
+    const dialIn = state['features/invite'];
+    const inviteUrl = getInviteURL(state);
+    const currentLiveStreamingSession = getActiveSession(state, JitsiRecordingConstants.mode.STREAM);
+    const liveStreamViewURL
+        = currentLiveStreamingSession
+            && currentLiveStreamingSession.liveStreamViewURL;
+    const localParticipant = getLocalParticipant(state);
+    const localParticipantName = localParticipant?.name;
+
+    const inviteURL = _decodeRoomURI(inviteUrl);
+
+    let invite = localParticipantName
+        ? t('info.inviteURLFirstPartPersonal', { name: localParticipantName })
         : t('info.inviteURLFirstPartGeneral');
 
     invite += t('info.inviteURLSecondPart', {
         url: inviteURL
     });
 
-    if (_liveStreamViewURL) {
+    if (liveStreamViewURL) {
         const liveStream = t('info.inviteLiveStream', {
-            url: _liveStreamViewURL
+            url: liveStreamViewURL
         });
 
         invite = `${invite}\n${liveStream}`;
     }
 
-    if (shouldDisplayDialIn(_dialIn)) {
+    if (shouldDisplayDialIn(dialIn)) {
         const dial = t('info.invitePhone', {
             number: phoneNumber,
-            conferenceID: _dialIn.conferenceID
+            conferenceID: dialIn.conferenceID
         });
         const moreNumbers = t('info.invitePhoneAlternatives', {
-            url: getDialInfoPageURL(
-                _conferenceName,
-                _locationUrl
-            ),
+            url: getDialInfoPageURL(state),
             silentUrl: `${inviteURL}#config.startSilent=true`
         });
 
             .catch(error =>
                 logger.error('Error fetching numbers or conferenceID', error))
             .then(defaultDialInNumber => {
-                let dialInfoPageUrl = getDialInfoPageURL(
-                    room,
-                    state['features/base/connection'].locationURL);
+                let dialInfoPageUrl = getDialInfoPageURL(state);
 
                 if (useHtml) {
                     dialInfoPageUrl
 /**
  * Generates the URL for the static dial in info page.
  *
- * @param {string} conferenceName - The conference name.
- * @param {Object} locationURL - The current location URL, the object coming
- * from state ['features/base/connection'].locationURL.
+ * @param {Object} state - The state from the Redux store.
  * @returns {string}
  */
-export function getDialInfoPageURL(
-        conferenceName: string,
-        locationURL: Object) {
-    const origin = locationURL.origin;
-    const pathParts = locationURL.pathname.split('/');
-
-    pathParts.length = pathParts.length - 1;
-
-    const newPath = pathParts.reduce((accumulator, currentValue) => {
-        if (currentValue) {
-            return `${accumulator}/${currentValue}`;
-        }
+export function getDialInfoPageURL(state: Object) {
+    const { didPageUrl } = state['features/dynamic-branding'];
+    const conferenceName = getRoomName(state);
+    const { locationURL } = state['features/base/connection'];
+    const { href } = locationURL;
+    const room = _decodeRoomURI(conferenceName);
 
-        return accumulator;
-    }, '');
+    const url = didPageUrl || `${href.substring(0, href.lastIndexOf('/'))}/static/dialInInfo.html`;
 
-    return `${origin}${newPath}/static/dialInInfo.html?room=${_decodeRoomURI(conferenceName)}`;
+    return `${url}?room=${room}`;
 }
 
 /**

react/features/no-audio-signal/components/DialInLink.js

 type Props = {
 
     /**
-     * The name of the current conference.
-     */
-    _room: string,
-
-    /**
-     * The current location url of the conference.
+     * The redux state representing the dial-in numbers feature.
      */
-    _locationURL: string,
-
+    _dialIn: Object,
 
     /**
-     * The redux state representing the dial-in numbers feature.
+     * The url of the page containing the dial-in numbers list.
      */
-    _dialIn: Object,
+    _dialInfoPageUrl: string,
 
     /**
      * Invoked to obtain translated strings.
      * @returns {ReactElement}
      */
     render() {
-        const { _room, _locationURL, _dialIn, t } = this.props;
+        const { _dialIn, _dialInfoPageUrl, t } = this.props;
 
         if (!shouldDisplayDialIn(_dialIn)) {
             return null;
         return (
             <div>{t('toolbar.noAudioSignalDialInDesc')}&nbsp;
                 <a
-                    href = {
-                        getDialInfoPageURL(
-                            _room,
-                            _locationURL
-                        )
-                    }
+                    href = { _dialInfoPageUrl }
                     rel = 'noopener noreferrer'
                     target = '_blank'>
                     {t('toolbar.noAudioSignalDialInLinkDesc')}
  *
  * @param {Object} state - The Redux state.
  * @private
- * @returns {{
-    *     _room: string,
-    *     _locationURL: string,
-    *     _dialIn: Object,
-    * }}
-    */
+ * @returns {Props}
+ */
 function _mapStateToProps(state) {
-
     return {
-        _room: state['features/base/conference'].room,
-        _locationURL: state['features/base/connection'].locationURL,
-        _dialIn: state['features/invite']
+        _dialIn: state['features/invite'],
+        _dialInfoPageUrl: getDialInfoPageURL(state)
     };
 }
 

react/features/prejoin/actions.js

 
 import uuid from 'uuid';
 
-import { getRoomName } from '../base/conference';
 import { getDialOutStatusUrl, getDialOutUrl } from '../base/config/functions';
 import { createLocalTrack } from '../base/lib-jitsi-meet';
 import {
  */
 export function openDialInPage() {
     return function(dispatch: Function, getState: Function) {
-        const state = getState();
-        const locationURL = state['features/base/connection'].locationURL;
-        const roomName = getRoomName(state);
-        const dialInPage = getDialInfoPageURL(roomName, locationURL);
+        const dialInPage = getDialInfoPageURL(getState());
 
         openURLInBrowser(dialInPage, true);
     };