2019-03-19 15:42:25 +00:00
|
|
|
// @flow
|
2018-04-14 00:00:40 +00:00
|
|
|
|
|
|
|
import Button, { ButtonGroup } from '@atlaskit/button';
|
|
|
|
import { AtlasKitThemeProvider } from '@atlaskit/theme';
|
|
|
|
import React, { Component } from 'react';
|
2019-03-21 16:38:29 +00:00
|
|
|
import { connect } from '../../base/redux';
|
2019-03-19 15:42:25 +00:00
|
|
|
import type { Dispatch } from 'redux';
|
2018-04-14 00:00:40 +00:00
|
|
|
|
2018-04-16 12:44:08 +00:00
|
|
|
import { createDeepLinkingPageEvent, sendAnalytics } from '../../analytics';
|
2018-04-14 00:00:40 +00:00
|
|
|
import { translate } from '../../base/i18n';
|
|
|
|
|
|
|
|
import {
|
|
|
|
openWebApp,
|
|
|
|
openDesktopApp
|
|
|
|
} from '../actions';
|
|
|
|
import { _TNS } from '../constants';
|
|
|
|
|
|
|
|
declare var interfaceConfig: Object;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The type of the React {@code Component} props of
|
|
|
|
* {@link DeepLinkingDesktopPage}.
|
|
|
|
*/
|
|
|
|
type Props = {
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Used to dispatch actions from the buttons.
|
|
|
|
*/
|
2019-03-19 15:42:25 +00:00
|
|
|
dispatch: Dispatch<any>,
|
2018-04-14 00:00:40 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Used to obtain translations.
|
|
|
|
*/
|
|
|
|
t: Function
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* React component representing the deep linking page.
|
|
|
|
*
|
|
|
|
* @class DeepLinkingDesktopPage
|
|
|
|
*/
|
|
|
|
class DeepLinkingDesktopPage<P : Props> extends Component<P> {
|
|
|
|
/**
|
|
|
|
* 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._openDesktopApp = this._openDesktopApp.bind(this);
|
|
|
|
this._onLaunchWeb = this._onLaunchWeb.bind(this);
|
|
|
|
this._onTryAgain = this._onTryAgain.bind(this);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Implements the Component's componentDidMount method.
|
|
|
|
*
|
|
|
|
* @inheritdoc
|
|
|
|
*/
|
|
|
|
componentDidMount() {
|
|
|
|
this._openDesktopApp();
|
2018-04-16 12:44:08 +00:00
|
|
|
sendAnalytics(
|
|
|
|
createDeepLinkingPageEvent(
|
|
|
|
'displayed', 'DeepLinkingDesktop', { isMobileBrowser: false }));
|
2018-04-14 00:00:40 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Renders the component.
|
|
|
|
*
|
|
|
|
* @returns {ReactElement}
|
|
|
|
*/
|
|
|
|
render() {
|
|
|
|
const { t } = this.props;
|
|
|
|
const { NATIVE_APP_NAME, SHOW_DEEP_LINKING_IMAGE } = interfaceConfig;
|
|
|
|
const rightColumnStyle
|
|
|
|
= SHOW_DEEP_LINKING_IMAGE ? null : { width: '100%' };
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
|
|
|
// Enabling light theme because of the color of the buttons.
|
|
|
|
<AtlasKitThemeProvider mode = 'light'>
|
|
|
|
<div className = 'deep-linking-desktop'>
|
|
|
|
<div className = 'header'>
|
|
|
|
<img
|
|
|
|
className = 'logo'
|
2018-04-25 15:19:41 +00:00
|
|
|
src = 'images/logo-deep-linking.png' />
|
2018-04-14 00:00:40 +00:00
|
|
|
</div>
|
|
|
|
<div className = 'content'>
|
|
|
|
{
|
|
|
|
SHOW_DEEP_LINKING_IMAGE
|
|
|
|
? <div className = 'leftColumn'>
|
|
|
|
<div className = 'leftColumnContent'>
|
|
|
|
<div className = 'image' />
|
|
|
|
</div>
|
|
|
|
</div> : null
|
|
|
|
}
|
|
|
|
<div
|
|
|
|
className = 'rightColumn'
|
|
|
|
style = { rightColumnStyle }>
|
|
|
|
<div className = 'rightColumnContent'>
|
|
|
|
<h1 className = 'title'>
|
|
|
|
{
|
|
|
|
t(`${_TNS}.title`,
|
|
|
|
{ app: NATIVE_APP_NAME })
|
|
|
|
}
|
|
|
|
</h1>
|
|
|
|
<p className = 'description'>
|
|
|
|
{
|
|
|
|
t(`${_TNS}.description`,
|
|
|
|
{ app: NATIVE_APP_NAME })
|
|
|
|
}
|
|
|
|
</p>
|
|
|
|
<div className = 'buttons'>
|
|
|
|
<ButtonGroup>
|
|
|
|
<Button
|
|
|
|
appearance = 'default'
|
|
|
|
onClick = { this._onTryAgain }>
|
|
|
|
{ t(`${_TNS}.tryAgainButton`) }
|
|
|
|
</Button>
|
|
|
|
<Button onClick = { this._onLaunchWeb }>
|
|
|
|
{ t(`${_TNS}.launchWebButton`) }
|
|
|
|
</Button>
|
|
|
|
</ButtonGroup>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</AtlasKitThemeProvider>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
_openDesktopApp: () => {}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Dispatches the <tt>openDesktopApp</tt> action.
|
|
|
|
*
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
_openDesktopApp() {
|
|
|
|
this.props.dispatch(openDesktopApp());
|
|
|
|
}
|
|
|
|
|
|
|
|
_onTryAgain: () => {}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Handles try again button clicks.
|
|
|
|
*
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
_onTryAgain() {
|
2018-04-16 12:44:08 +00:00
|
|
|
sendAnalytics(
|
|
|
|
createDeepLinkingPageEvent(
|
|
|
|
'clicked', 'tryAgainButton', { isMobileBrowser: false }));
|
2018-04-14 00:00:40 +00:00
|
|
|
this._openDesktopApp();
|
|
|
|
}
|
|
|
|
|
|
|
|
_onLaunchWeb: () => {}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Handles launch web button clicks.
|
|
|
|
*
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
_onLaunchWeb() {
|
2018-04-16 12:44:08 +00:00
|
|
|
sendAnalytics(
|
|
|
|
createDeepLinkingPageEvent(
|
|
|
|
'clicked', 'launchWebButton', { isMobileBrowser: false }));
|
2018-04-14 00:00:40 +00:00
|
|
|
this.props.dispatch(openWebApp());
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export default translate(connect()(DeepLinkingDesktopPage));
|