,
-
- /**
- * Used to obtain translations.
- */
- t: Function
-};
-
-/**
- * React component representing the deep linking page.
- *
- * @class DeepLinkingDesktopPage
- */
-class DeepLinkingDesktopPage extends Component
{
- /**
- * Initializes a new {@code DeepLinkingDesktopPage} instance.
- *
- * @param {Object} props - The read-only React {@code Component} props with
- * which the new instance is to be initialized.
- */
- constructor(props: P) {
- super(props);
-
- // Bind event handlers so they are only bound once per instance.
- this._onLaunchWeb = this._onLaunchWeb.bind(this);
- this._onTryAgain = this._onTryAgain.bind(this);
- }
-
- /**
- * Implements the Component's componentDidMount method.
- *
- * @inheritdoc
- */
- componentDidMount() {
- sendAnalytics(
- createDeepLinkingPageEvent(
- 'displayed', 'DeepLinkingDesktop', { isMobileBrowser: false }));
- }
-
- /**
- * Renders the component.
- *
- * @returns {ReactElement}
- */
- render() {
- const { t, _deeplinkingCfg: { desktop = {}, hideLogo, showImage } } = this.props;
- const { appName } = desktop;
- const rightColumnStyle
- = showImage ? null : { width: '100%' };
-
- return (
-
- // Enabling light theme because of the color of the buttons.
-
-
-
- {
- hideLogo
- ? null
- :
- }
-
-
- {
- showImage
- ?
: null
- }
-
-
-
- {
- t(`${_TNS}.title`,
- { app: appName })
- }
-
-
- {
- t(
- `${_TNS}.${isSupportedBrowser()
- ? 'description'
- : 'descriptionWithoutWeb'}`,
- { app: appName }
- )
- }
-
-
-
- {
- isSupportedBrowser()
- &&
- }
-
-
-
-
-
+
+
+ {
+ !hideLogo
+ &&
+ }
+
+
+ {
+ t(`${_TNS}.titleNew`)
+ }
+
+
{ room }
+
+ {
+ isSupportedBrowser()
+ ? translateToHTML(t, `${_TNS}.descriptionNew`, { app: desktop?.appName })
+ : t(`${_TNS}.descriptionWithoutWeb`, { app: desktop?.appName })
+ }
+
+
+
+ { isSupportedBrowser() && (
+
+ )}
+
+
+
+
{translateToHTML(t, 'deepLinking.termsAndConditions', {
+ termsAndConditionsLink: legalUrls.terms
+ })}
+
+
+
-
- {
- hideLogo
- ? null
- :
- }
-
-
-
+
+ {!hideLogo && (
+ )}
+
+
{ t(`${_TNS}.launchMeetingLabel`) }
+
{room}
+
+
+
+
{ t(`${_TNS}.noMobileApp`) }
+
+ { t(`${_TNS}.downloadMobileApp`) }
+
+ {isSupportedMobileBrowser() ? (
+
+ ) : (
+
+ {t(`${_TNS}.unsupportedBrowser`)}
+
+ )}
+
+
+
+
-
- { conferenceName }
-
-
- { t('info.dialANumber') }
-
-
- { `${t('info.dialInConferenceID')} ${_formatConferenceIDPin(conferenceID)}` }
-
-
+
+ To join the meeting via phone, dial one of these numbers and then enter the pin
+
+
+
+ { `${t('info.dialInConferenceID')} ${_formatConferenceIDPin(conferenceID ?? '')}` }
+
+
{ room }
}
+
+ : null,
@@ -161,7 +204,7 @@ class DialInSummary extends Component {
}
return (
-
+
{ contents }
);
@@ -272,4 +315,4 @@ class DialInSummary extends Component
{
}
}
-export default translate(DialInSummary);
+export default translate(withStyles(styles)(DialInSummary));
diff --git a/react/features/invite/components/dial-in-summary/web/DialInSummaryApp.js b/react/features/invite/components/dial-in-summary/web/DialInSummaryApp.js
new file mode 100644
index 0000000000..2339059de0
--- /dev/null
+++ b/react/features/invite/components/dial-in-summary/web/DialInSummaryApp.js
@@ -0,0 +1,80 @@
+// @flow
+
+import { AtlasKitThemeProvider } from '@atlaskit/theme';
+import React from 'react';
+
+import { BaseApp } from '../../../../base/app';
+import { isMobileBrowser } from '../../../../base/environment/utils';
+import GlobalStyles from '../../../../base/ui/components/GlobalStyles.web';
+import JitsiThemeProvider from '../../../../base/ui/components/JitsiThemeProvider.web';
+import { parseURLParams } from '../../../../base/util';
+import { DIAL_IN_INFO_PAGE_PATH_NAME } from '../../../constants';
+import NoRoomError from '../../dial-in-info-page/NoRoomError.web';
+
+import DialInSummary from './DialInSummary';
+
+/**
+ * Wrapper application for prejoin.
+ *
+ * @augments BaseApp
+ */
+export default class DialInSummaryApp extends BaseApp {
+ /**
+ * The deferred for the initialisation {{promise, resolve, reject}}.
+ */
+ _init: Object;
+
+ /**
+ * Navigates to {@link Prejoin} upon mount.
+ *
+ * @returns {void}
+ */
+ async componentDidMount() {
+ await super.componentDidMount();
+
+ const { room } = parseURLParams(window.location, true, 'search');
+ const { href } = window.location;
+ const ix = href.indexOf(DIAL_IN_INFO_PAGE_PATH_NAME);
+ const url = (ix > 0 ? href.substring(0, ix) : href) + room;
+
+ super._navigate({
+ component: () => (<>
+ {room
+ ?
+ : }
+ )
+ });
+ }
+
+ /**
+ * Overrides the parent method to inject {@link AtlasKitThemeProvider} as
+ * the top most component.
+ *
+ * @override
+ */
+ _createMainElement(component, props) {
+ return (
+
+
+
+ {super._createMainElement(component, props)}
+
+
+ );
+ }
+
+ /**
+ * Renders the platform specific dialog container.
+ *
+ * @returns {React$Element}
+ */
+ _renderDialogContainer() {
+ return null;
+ }
+}
diff --git a/react/features/invite/components/dial-in-summary/web/NumbersList.js b/react/features/invite/components/dial-in-summary/web/NumbersList.js
deleted file mode 100644
index c87e2fc914..0000000000
--- a/react/features/invite/components/dial-in-summary/web/NumbersList.js
+++ /dev/null
@@ -1,244 +0,0 @@
-// @flow
-
-import React, { Component } from 'react';
-
-import { translate } from '../../../../base/i18n';
-import { Icon, IconPhoneRinging } from '../../../../base/icons';
-
-type Props = {
-
- /**
- * Whether or not numbers should include links with the telephone protocol.
- */
- clickableNumbers: boolean,
-
- /**
- * The conference ID for dialing in.
- */
- conferenceID: number,
-
- /**
- * The phone numbers to display. Can be an array of number Objects or an
- * object with countries as keys and an array of numbers as values.
- */
- numbers: { [string]: Array } | Array