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,