Merge pull request #6856 from mananjadhav/feat/error-page

src/components/Button.js

@@ -23,6 +23,9 @@ const propTypes = {
     /** Large sized button */
     large: PropTypes.bool,
 
+    /** medium sized button */
+    medium: PropTypes.bool,
+
     /** Indicates whether the button should be disabled and in the loading state */
     isLoading: PropTypes.bool,
 
@@ -79,6 +82,7 @@ const defaultProps = {
     isDisabled: false,
     small: false,
     large: false,
+    medium: false,
     onPress: () => {},
     onLongPress: () => {},
     onPressIn: () => {},
@@ -142,6 +146,7 @@ class Button extends Component {
                 style={[
                     styles.buttonText,
                     this.props.small && styles.buttonSmallText,
+                    this.props.medium && styles.buttonMediumText,
                     this.props.large && styles.buttonLargeText,
                     this.props.success && styles.buttonSuccessText,
                     this.props.danger && styles.buttonDangerText,
@@ -189,6 +194,7 @@ class Button extends Component {
                         style={[
                             styles.button,
                             this.props.small ? styles.buttonSmall : undefined,
+                            this.props.medium ? styles.buttonMedium : undefined,
                             this.props.large ? styles.buttonLarge : undefined,
                             this.props.success ? styles.buttonSuccess : undefined,
                             this.props.danger ? styles.buttonDanger : undefined,

src/components/ErrorBoundary/BaseErrorBoundary.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import BootSplash from '../../libs/BootSplash';
+import GenericErrorPage from '../../pages/GenericErrorPage';
 
 const propTypes = {
     /* A message posted to `logError` (along with error data) when this component intercepts an error */
@@ -26,6 +27,7 @@ class BaseErrorBoundary extends React.Component {
     constructor(props) {
         super(props);
         this.state = {hasError: false};
+        this.clearError = this.clearError.bind(this);
     }
 
     static getDerivedStateFromError() {
@@ -40,10 +42,13 @@ class BaseErrorBoundary extends React.Component {
         BootSplash.hide({fade: true});
     }
 
+    clearError() {
+        this.setState({hasError: false});
+    }
+
     render() {
         if (this.state.hasError) {
-            // For the moment we've decided not to render any fallback UI
-            return null;
+            return <GenericErrorPage onRefresh={this.clearError} />;
         }
 
         return this.props.children;

src/languages/en.js

@@ -896,4 +896,13 @@ export default {
         screenShare: 'Screen share',
         screenShareRequest: 'Expensify is inviting you to a screen share',
     },
+    genericErrorPage: {
+        title: 'Uh-oh, something went wrong!',
+        body: {
+            helpTextMobile: 'Please try closing and reopening the app or switching to',
+            helpTextWeb: 'web.',
+            helpTextConcierge: 'If the problem persists, reach out to',
+        },
+        refresh: 'Refresh',
+    },
 };

src/languages/es.js

@@ -898,4 +898,13 @@ export default {
         screenShare: 'Compartir pantalla',
         screenShareRequest: 'Expensify te está invitando a compartir la pantalla',
     },
+    genericErrorPage: {
+        title: '¡Uh-oh, algo salió mal!',
+        body: {
+            helpTextMobile: 'Intente cerrar y volver a abrir la aplicación o cambiar a la',
+            helpTextWeb: 'web.',
+            helpTextConcierge: 'Si el problema persiste, comuníquese con',
+        },
+        refresh: 'Refresh',
+    },
 };

src/pages/GenericErrorPage/ErrorBodyText/index.js

@@ -0,0 +1 @@
+export default () => null;

src/pages/GenericErrorPage/ErrorBodyText/index.native.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Text from '../../../components/Text';
+import withLocalize, {withLocalizePropTypes} from '../../../components/withLocalize';
+import TextLink from '../../../components/TextLink';
+import CONST from '../../../CONST';
+import styles from '../../../styles/styles';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+};
+
+const ErrorBodyText = props => (
+    <Text>
+        {`${props.translate('genericErrorPage.body.helpTextMobile')} `}
+        <TextLink href={CONST.NEW_EXPENSIFY_URL} style={[styles.link]}>
+            {props.translate('genericErrorPage.body.helpTextWeb')}
+        </TextLink>
+    </Text>
+);
+
+ErrorBodyText.displayName = 'ErrorBodyText';
+ErrorBodyText.propTypes = propTypes;
+export default withLocalize(ErrorBodyText);

src/pages/GenericErrorPage/index.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {View} from 'react-native';
+import Icon from '../../components/Icon';
+import defaultTheme from '../../styles/themes/default';
+import * as Expensicons from '../../components/Icon/Expensicons';
+import Text from '../../components/Text';
+import Button from '../../components/Button';
+import LogoWordmark from '../../../assets/images/expensify-wordmark.svg';
+import withLocalize, {withLocalizePropTypes} from '../../components/withLocalize';
+import * as Session from '../../libs/actions/Session';
+import variables from '../../styles/variables';
+import styles from '../../styles/styles';
+import ErrorBodyText from './ErrorBodyText';
+import TextLink from '../../components/TextLink';
+import CONST from '../../CONST';
+
+const propTypes = {
+    ...withLocalizePropTypes,
+
+    /** Callback to call on refresh button click */
+    onRefresh: PropTypes.func.isRequired,
+};
+
+const GenericErrorPage = props => (
+    <View style={[styles.flex1, styles.pv10, styles.ph5, styles.errorPageContainer]}>
+        <View style={[styles.flex1, styles.alignItemsCenter, styles.justifyContentCenter]}>
+            <View style={styles.alignItemsStart}>
+                <View style={styles.mb5}>
+                    <Icon
+                        src={Expensicons.Bug}
+                        height={variables.componentSizeNormal}
+                        width={variables.componentSizeNormal}
+                        fill={defaultTheme.iconSuccessFill}
+                    />
+                </View>
+                <View style={styles.mb5}>
+                    <Text style={[styles.headerText, styles.textXXLarge]}>
+                        {props.translate('genericErrorPage.title')}
+                    </Text>
+                </View>
+                <View style={styles.mb5}>
+                    <ErrorBodyText />
+                    <Text>
+                        {`${props.translate('genericErrorPage.body.helpTextConcierge')} `}
+                        <TextLink href={`mailto:${CONST.EMAIL.CONCIERGE}`} style={[styles.link]}>
+                            {CONST.EMAIL.CONCIERGE}
+                        </TextLink>
+                    </Text>
+                </View>
+                <View style={[styles.dFlex, styles.flexRow, styles.w100]}>
+                    <View style={[styles.flex1, styles.flexRow]}>
+                        <Button
+                            success
+                            medium
+                            onPress={props.onRefresh}
+                            text={props.translate('genericErrorPage.refresh')}
+                            style={styles.mr3}
+                        />
+                        <Button
+                            medium
+                            onPress={() => {
+                                Session.signOut();
+                                props.onRefresh();
+                            }}
+                            text={props.translate('initialSettingsPage.signOut')}
+                        />
+                    </View>
+                </View>
+            </View>
+        </View>
+        <View styles={styles.alignSelfEnd}>
+            <View style={[styles.flex1, styles.flexRow, styles.justifyContentCenter]}>
+                <LogoWordmark height={30} width={80} />
+            </View>
+        </View>
+    </View>
+);
+
+GenericErrorPage.propTypes = propTypes;
+GenericErrorPage.displayName = 'GenericErrorPage';
+
+export default withLocalize(GenericErrorPage);

src/styles/styles.js

@@ -237,6 +237,10 @@ const styles = {
         fontSize: variables.fontSizeLarge,
     },
 
+    textXXLarge: {
+        fontSize: variables.fontSizeXXLarge,
+    },
+
     textXXXLarge: {
         color: themeColors.heading,
         fontFamily: fontFamily.GTA_BOLD,
@@ -324,13 +328,24 @@ const styles = {
         backgroundColor: themeColors.buttonDefaultBG,
     },
 
+    buttonMedium: {
+        borderRadius: variables.componentBorderRadiusNormal,
+        height: variables.componentSizeNormal,
+        paddingTop: 6,
+        paddingRight: 12,
+        paddingBottom: 6,
+        paddingLeft: 12,
+        backgroundColor: themeColors.buttonDefaultBG,
+    },
+
     buttonLarge: {
         borderRadius: variables.componentBorderRadius,
         height: variables.componentSizeLarge,
         paddingTop: 8,
         paddingRight: 12,
         paddingBottom: 8,
         paddingLeft: 12,
+        backgroundColor: themeColors.buttonDefaultBG,
     },
 
     buttonSmallText: {
@@ -340,6 +355,13 @@ const styles = {
         textAlign: 'center',
     },
 
+    buttonMediumText: {
+        fontSize: variables.fontSizeLabel,
+        fontFamily: fontFamily.GTA_BOLD,
+        fontWeight: fontWeightBold,
+        textAlign: 'center',
+    },
+
     buttonLargeText: {
         fontSize: variables.fontSizeNormal,
         fontFamily: fontFamily.GTA_BOLD,
@@ -2367,6 +2389,9 @@ const styles = {
         flex: 1,
     },
 
+    errorPageContainer: {
+        backgroundColor: themeColors.componentBG,
+    },
     transferBalancePayment: {
         borderWidth: 2,
         borderRadius: variables.componentBorderRadiusNormal,

src/styles/utilities/spacing.js

@@ -220,6 +220,10 @@ export default {
         paddingVertical: 20,
     },
 
+    pv10: {
+        paddingVertical: 40,
+    },
+
     ph0: {
         paddingHorizontal: 0,
     },

src/styles/variables.js

@@ -19,6 +19,7 @@ export default {
     fontSizeLarge: 17,
     fontSizeHero: 36,
     fontSizeh1: 19,
+    fontSizeXXLarge: 28,
     fontSizeXXXLarge: 32,
     fontSizeNormalHeight: 20,
     lineHeightHero: 40,