Desktop deeplink

config/electronBuilder.config.js

@@ -68,4 +68,8 @@ module.exports = {
  app: 'desktop',
  output: 'desktop-build',
  },
+ protocols: {
+ name: 'New Expensify',
+ schemes: ['new-expensify'],
+ },
 };

desktop/main.js

@@ -227,6 +227,9 @@ const localizeMenuItems = (browserWindow, systemMenu) => {
 };
 
 const mainWindow = (() => {
+ let deeplinkUrl;
+ let browserWindow;
+
  const loadURL = __DEV__
  ? win => win.loadURL(`http://localhost:${port}`)
  : serve({directory: `${__dirname}/www`});
@@ -238,6 +241,19 @@ const mainWindow = (() => {
  app.setName('New Expensify');
  }
 
+ app.on('will-finish-launching', () => {
+ app.on('open-url', (event, url) => {
+ event.preventDefault();
+ const urlObject = new URL(url);
+ deeplinkUrl = `${APP_DOMAIN}${urlObject.pathname}`;
+
+ if (browserWindow) {
+ browserWindow.loadURL(deeplinkUrl);
+ browserWindow.show();
+ }
+ });
+ });
+
  /*
  * Starting from Electron 20, it shall be required to set sandbox option to false explicitly.
  * Running a preload script contextBridge.js require access to nodeJS modules from the javascript code.
@@ -246,7 +262,15 @@ const mainWindow = (() => {
  * */
  return app.whenReady()
  .then(() => {
- const browserWindow = new BrowserWindow({
+ /**
+ * We only want to register the scheme this way when in dev, since
+ * when the app is bundled electron-builder will take care of it.
+ */
+ if (__DEV__) {
+ app.setAsDefaultProtocolClient('new-expensify');
+ }
+
+ browserWindow = new BrowserWindow({
  backgroundColor: '#FAFAFA',
  width: 1200,
  height: 900,
@@ -455,18 +479,26 @@ const mainWindow = (() => {
  })
 
  // After initializing and configuring the browser window, load the compiled JavaScript
- .then((browserWindow) => {
- loadURL(browserWindow);
- return browserWindow;
+ .then((browserWindowRef) => {
+ loadURL(browserWindow).then(() => {
+ if (!deeplinkUrl) {
+ return;
+ }
+
+ browserWindow.loadURL(deeplinkUrl);
+ browserWindow.show();
+ });
+
+ return browserWindowRef;
  })
 
  // Start checking for JS updates
- .then((browserWindow) => {
+ .then((browserWindowRef) => {
  if (__DEV__) {
  return;
  }
 
- checkForUpdates(electronUpdater(browserWindow));
+ checkForUpdates(electronUpdater(browserWindowRef));
  });
 });
 

src/CONST.js

@@ -155,6 +155,11 @@ const CONST = {
  AU: 'AU',
  CA: 'CA',
  },
+ DESKTOP_DEEPLINK_APP_STATE: {
+ CHECKING: 'checking',
+ INSTALLED: 'installed',
+ NOT_INSTALLED: 'not-installed',
+ },
  PLATFORM: {
  IOS: 'ios',
  ANDROID: 'android',

src/Expensify.js

@@ -23,6 +23,7 @@ import withLocalize, {withLocalizePropTypes} from './components/withLocalize';
 import * as User from './libs/actions/User';
 import NetworkConnection from './libs/NetworkConnection';
 import Navigation from './libs/Navigation/Navigation';
+import DeeplinkWrapper from './components/DeeplinkWrapper';
 
 // This lib needs to be imported, but it has nothing to export since all it contains is an Onyx connection
 // eslint-disable-next-line no-unused-vars
@@ -189,7 +190,7 @@ class Expensify extends PureComponent {
  }
 
  return (
- <>
+ <DeeplinkWrapper>
  {!this.state.isSplashShown && (
  <>
  <GrowlNotification ref={Growl.growlRef} />
@@ -213,7 +214,7 @@ class Expensify extends PureComponent {
  onReady={this.setNavigationReady}
  authenticated={this.isAuthenticated()}
  />
- </>
+ </DeeplinkWrapper>
  );
  }
 }

src/components/DeeplinkWrapper/deeplinkRoutes.js

@@ -0,0 +1,46 @@
+import ROUTES from '../../ROUTES';
+
+/** @type {Array<object>} Routes regex used for desktop deeplinking */
+export default [
+ {
+ // /reports/*
+ pattern: `/${ROUTES.REPORT}($|(//*))`,
+ },
+ {
+ // /settings/*
+ pattern: `/${ROUTES.SETTINGS}($|(//*))`,
+ },
+ {
+ // /setpassword/*
+ pattern: '/setpassword($|(//*))',
+ },
+ {
+ // /details/*
+ pattern: `/${ROUTES.DETAILS}($|(//*))`,
+ },
+ {
+ // /v/*
+ pattern: '/v($|(//*))',
+ },
+ {
+ // /bank-account/*
+ pattern: `/${ROUTES.BANK_ACCOUNT}($|(//*))`,
+ },
+ {
+ // /iou/*
+ pattern: '/iou($|(//*))',
+ },
+ {
+ // /enable-payments/*
+ pattern: `/${ROUTES.ENABLE_PAYMENTS}($|(//*))`,
+ },
+ {
+ // /statements/*
+ pattern: '/statements($|(//*))',
+ },
+ {
+ // /concierge/*
+ pattern: `/${ROUTES.CONCIERGE}($|(//*))`,
+ },
+];
+

src/components/DeeplinkWrapper/index.js

@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+import {PureComponent} from 'react';
+
+const propTypes = {
+ /** Children to render. */
+ children: PropTypes.node.isRequired,
+};
+
+class DeeplinkWrapper extends PureComponent {
+ render() {
+ return this.props.children;
+ }
+}
+
+DeeplinkWrapper.propTypes = propTypes;
+export default DeeplinkWrapper;

src/components/DeeplinkWrapper/index.website.js

@@ -0,0 +1,158 @@
+import _ from 'underscore';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import React, {PureComponent} from 'react';
+import deeplinkRoutes from './deeplinkRoutes';
+import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
+import TextLink from '../TextLink';
+import * as Illustrations from '../Icon/Illustrations';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
+import Text from '../Text';
+import styles from '../../styles/styles';
+import CONST from '../../CONST';
+import CONFIG from '../../CONFIG';
+import Icon from '../Icon';
+import * as Expensicons from '../Icon/Expensicons';
+import colors from '../../styles/colors';
+import * as Browser from '../../libs/Browser';
+
+const propTypes = {
+ /** Children to render. */
+ children: PropTypes.node.isRequired,
+
+ ...withLocalizePropTypes,
+};
+
+class DeeplinkWrapper extends PureComponent {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ appInstallationCheckStatus: this.isMacOSWeb() ? CONST.DESKTOP_DEEPLINK_APP_STATE.CHECKING : CONST.DESKTOP_DEEPLINK_APP_STATE.NOT_INSTALLED,
+ };
+ }
+
+ componentDidMount() {
+ if (!this.isMacOSWeb()) {
+ return;
+ }
+
+ let focused = true;
+
+ window.addEventListener('blur', () => {
+ focused = false;
+ });
+
+ setTimeout(() => {
+ if (!focused) {
+ this.setState({appInstallationCheckStatus: CONST.DESKTOP_DEEPLINK_APP_STATE.INSTALLED});
+ } else {
+ this.setState({appInstallationCheckStatus: CONST.DESKTOP_DEEPLINK_APP_STATE.NOT_INSTALLED});
+ }
+ }, 500);
+
+ // check if pathname matches with deeplink routes
+ const matchedRoute = _.find(deeplinkRoutes, (route) => {
+ const routeRegex = new RegExp(route.pattern);
+ return routeRegex.test(window.location.pathname);
+ });
+
+ if (matchedRoute) {
+ this.setState({deeplinkMatch: true});
+ this.openRouteInDesktopApp();
+ } else {
+ this.setState({deeplinkMatch: false});
+ }
+ }
+
+ openRouteInDesktopApp() {
+ const expensifyUrl = new URL(CONFIG.EXPENSIFY.NEW_EXPENSIFY_URL);
+ const expensifyDeeplinkUrl = `${CONST.DEEPLINK_BASE_URL}${expensifyUrl.host}${window.location.pathname}`;
+
+ // This check is necessary for Safari, otherwise, if the user
+ // does NOT have the Expensify desktop app installed, it's gonna
+ // show an error in the page saying that the address is invalid
+ if (CONST.BROWSER.SAFARI === Browser.getBrowser()) {
+ const iframe = document.createElement('iframe');
+ iframe.style.display = 'none';
+ document.body.appendChild(iframe);
+ iframe.contentWindow.location.href = expensifyDeeplinkUrl;
+
+ // Since we're creating an iframe for Safari to handle
+ // deeplink we need to give this iframe some time for
+ // it to do what it needs to do. After that we can just
+ // remove the iframe.
+ setTimeout(() => {
+ if (!iframe.parentNode) {
+ return;
+ }
+
+ iframe.parentNode.removeChild(iframe);
+ }, 100);
+ } else {
+ window.location.href = expensifyDeeplinkUrl;
+ }
+ }
+
+ isMacOSWeb() {
+ return !Browser.isMobile() && (
+ typeof navigator === 'object'
+ && typeof navigator.userAgent === 'string'
+ && /Mac/i.test(navigator.userAgent)
+ && !/Electron/i.test(navigator.userAgent)
+ );
+ }
+
+ render() {
+ if (this.state.appInstallationCheckStatus === CONST.DESKTOP_DEEPLINK_APP_STATE.CHECKING) {
+ return <FullScreenLoadingIndicator style={styles.flex1} />;
+ }
+
+ if (
+ this.state.deeplinkMatch
+ && this.state.appInstallationCheckStatus === CONST.DESKTOP_DEEPLINK_APP_STATE.INSTALLED
+ ) {
+ return (
+ <View style={styles.deeplinkWrapperContainer}>
+ <View style={styles.deeplinkWrapperMessage}>
+ <View style={styles.mb2}>
+ <Icon
+ width={200}
+ height={164}
+ src={Illustrations.RocketBlue}
+ />
+ </View>
+ <Text style={[styles.textHeadline, styles.textXXLarge]}>
+ {this.props.translate('deeplinkWrapper.launching')}
+ </Text>
+ <View style={styles.mt2}>
+ <Text style={[styles.fontSizeNormal, styles.textAlignCenter]}>
+ {this.props.translate('deeplinkWrapper.redirectedToDesktopApp')}
+ {'\n'}
+ {this.props.translate('deeplinkWrapper.youCanAlso')}
+ {' '}
+ <TextLink onPress={() => this.setState({deeplinkMatch: false})}>
+ {this.props.translate('deeplinkWrapper.openLinkInBrowser')}
+ </TextLink>
+ .
+ </Text>
+ </View>
+ </View>
+ <View style={styles.deeplinkWrapperFooter}>
+ <Icon
+ width={154}
+ height={34}
+ fill={colors.green}
+ src={Expensicons.ExpensifyWordmark}
+ />
+ </View>
+ </View>
+ );
+ }
+
+ return this.props.children;
+ }
+}
+
+DeeplinkWrapper.propTypes = propTypes;
+export default withLocalize(DeeplinkWrapper);

src/components/Icon/Expensicons.js

@@ -35,6 +35,7 @@ import Emoji from '../../../assets/images/emoji.svg';
 import Exclamation from '../../../assets/images/exclamation.svg';
 import Exit from '../../../assets/images/exit.svg';
 import ExpensifyCard from '../../../assets/images/expensifycard.svg';
+import ExpensifyWordmark from '../../../assets/images/expensify-wordmark.svg';
 import Expand from '../../../assets/images/expand.svg';
 import Eye from '../../../assets/images/eye.svg';
 import EyeDisabled from '../../../assets/images/eye-disabled.svg';
@@ -136,6 +137,7 @@ export {
  Exclamation,
  Exit,
  ExpensifyCard,
+ ExpensifyWordmark,
  Expand,
  Eye,
  EyeDisabled,

src/components/Icon/Illustrations.js

@@ -13,6 +13,7 @@ import MoneyEnvelopeBlue from '../../../assets/images/product-illustrations/mone
 import MoneyMousePink from '../../../assets/images/product-illustrations/money-mouse--pink.svg';
 import ReceiptsSearchYellow from '../../../assets/images/product-illustrations/receipts-search--yellow.svg';
 import ReceiptYellow from '../../../assets/images/product-illustrations/receipt--yellow.svg';
+import RocketBlue from '../../../assets/images/product-illustrations/rocket--blue.svg';
 import RocketOrange from '../../../assets/images/product-illustrations/rocket--orange.svg';
 import TadaYellow from '../../../assets/images/product-illustrations/tada--yellow.svg';
 import TadaBlue from '../../../assets/images/product-illustrations/tada--blue.svg';
@@ -50,6 +51,7 @@ export {
  MoneyMousePink,
  ReceiptsSearchYellow,
  ReceiptYellow,
+ RocketBlue,
  RocketOrange,
  TadaYellow,
  TadaBlue,