Implemented launcher screen design and fixed iOS issue

src/components/DeeplinkWrapper/DeeplinkWrapper.website.js

@@ -4,15 +4,23 @@ import PropTypes from 'prop-types';
 import React, {PureComponent} from 'react';
 import deeplinkRoutes from './deeplinkRoutes';
 import FullScreenLoadingIndicator from '../FullscreenLoadingIndicator';
-import Button from '../Button';
+import TextLink from '../TextLink';
+import * as Illustrations from '../Icon/Illustrations';
+import LogoWordmark from '../../../assets/images/expensify-wordmark.svg';
+import withLocalize, {withLocalizePropTypes} from '../withLocalize';
 import Text from '../Text';
 import styles from '../../styles/styles';
 import CONST from '../../CONST';
 import CONFIG from '../../CONFIG';
+import * as FontFamily from '../../styles/fontFamily';
+import Icon from '../Icon';
+import colors from '../../styles/colors';
 
 const propTypes = {
  /** Children to render. */
  children: PropTypes.node.isRequired,
+
+ ...withLocalizePropTypes,
 };
 
 class DeeplinkWrapper extends PureComponent {
@@ -65,9 +73,22 @@ class DeeplinkWrapper extends PureComponent {
  window.location = `${CONST.DEEPLINK_BASE_URL}${expensifyUrl.host}${pathname}`;
  }
 
+ isiOSWeb() {
+ return [
+ 'iPad Simulator',
+ 'iPhone Simulator',
+ 'iPod Simulator',
+ 'iPad',
+ 'iPhone',
+ 'iPod',
+ ].includes(navigator.platform)
+ || (navigator.userAgent.includes('Mac') && 'ontouchend' in document)
+ }
+
  isMacOSWeb() {
  if (
- typeof navigator === 'object'
+ !this.isiOSWeb()
+ && typeof navigator === 'object'
  && typeof navigator.userAgent === 'string'
  && /Mac/i.test(navigator.userAgent)
  && !/Electron/i.test(navigator.userAgent)
@@ -88,19 +109,37 @@ class DeeplinkWrapper extends PureComponent {
  && this.state.appInstallationCheckStatus === 'installed'
  ) {
  return (
- <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
- <Text>It looks like you have the desktop app installed. How do you wish to proceed?</Text>
-
- <Button
- text="Open in App"
- style={{marginTop: 20}}
- onPress={this.openRouteInDesktopApp}
- />
- <Button
- style={{marginTop: 20}}
- text="Continue in Browser"
- onPress={() => this.setState({deeplinkMatch: false})}
- />
+ <View style={styles.deeplinkWrapperContainer}>
+ <View style={styles.deeplinkWrapperInfoSection}>
+ <View style={styles.mb2}>
+ <Icon
+ width={200}
+ height={164}
+ src={Illustrations.RocketBlue}
+ />
+ </View>
+ <Text style={[styles.textXXLarge, {fontFamily: FontFamily.newKansas.NEW_KANSAS_MEDIUM}]}>
+ {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}>
+ <LogoWordmark
+ width={154}
+ height={34}
+ fill={colors.green}
+ />
+ </View>
  </View>
  );
  }
@@ -110,4 +149,4 @@ class DeeplinkWrapper extends PureComponent {
 }
 
 DeeplinkWrapper.propTypes = propTypes;
-export default DeeplinkWrapper;
+export default withLocalize(DeeplinkWrapper);

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,

src/languages/en.js

@@ -139,6 +139,12 @@ export default {
  updateApp: 'Update app',
  updatePrompt: 'A new version of this app is available.\nUpdate now or restart the app at a later time to download the latest changes.',
  },
+ deeplinkWrapper: {
+ launching: 'Launching Expensify',
+ redirectedToDesktopApp: 'We\'ve redirected you to the desktop app.',
+ youCanAlso: 'You can also',
+ openLinkInBrowser: 'open this link in your browser',
+ },
  iOUConfirmationList: {
  whoPaid: 'WHO PAID?',
  whoWasThere: 'WHO WAS THERE?',

src/pages/ErrorPage/GenericErrorPage.js

@@ -14,6 +14,7 @@ import styles from '../../styles/styles';
 import ErrorBodyText from './ErrorBodyText';
 import TextLink from '../../components/TextLink';
 import CONST from '../../CONST';
+import colors from '../../styles/colors';
 
 const propTypes = {
  ...withLocalizePropTypes,
@@ -71,7 +72,7 @@ const GenericErrorPage = props => (
  </View>
  <View styles={styles.alignSelfEnd}>
  <View style={[styles.flex1, styles.flexRow, styles.justifyContentCenter]}>
- <LogoWordmark height={30} width={80} />
+ <LogoWordmark height={30} width={80} fill={colors.white} />
  </View>
  </View>
  </View>

src/pages/signin/TermsAndLicenses.js

@@ -7,6 +7,7 @@ import TextLink from '../../components/TextLink';
 import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
 import LogoWordmark from '../../../assets/images/expensify-wordmark.svg';
 import LocalePicker from '../../components/LocalePicker';
+import colors from '../../styles/colors';
 
 const TermsAndLicenses = props => (
  <>
@@ -31,7 +32,7 @@ const TermsAndLicenses = props => (
  .
  </Text>
  <View style={[styles.mt4, styles.alignItemsCenter, styles.mb2, styles.flexRow, styles.justifyContentBetween]}>
- <LogoWordmark height={30} width={80} />
+ <LogoWordmark height={30} width={80} fill={colors.white} />
  <LocalePicker size="small" />
  </View>
  </>

src/styles/fontFamily/index.js

@@ -13,4 +13,14 @@ const fontFamily = {
  EMOJI_TEXT_FONT: emojiFont,
 };
 
+const newKansas = {
+ NEW_KANSAS_MEDIUM: 'ExpensifyNewKansas-Meduim',
+ NEW_KANSAS_MEDIUM_ITALIC: 'ExpensifyNewKansas-MediumItalic',
+};
+
 export default fontFamily;
+
+export {
+ fontFamily,
+ newKansas,
+};

src/styles/styles.js

@@ -2832,6 +2832,25 @@ const styles = {
  paddingLeft: 18,
  paddingRight: 18,
  },
+
+ deeplinkWrapperContainer: {
+ padding: 20,
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ backgroundColor: themeColors.appBG,
+ },
+
+ deeplinkWrapperInfoSection: {
+ flex: 1,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+
+ deeplinkWrapperFooter: {
+ paddingTop: 80,
+ paddingBottom: 45,
+ },
 };
 
 export default styles;