Implement setup error page

Expensify · Nov 3, 2024 · 224781c · 224781c
1 parent 6cb975c
commit 224781c
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 7 deletions.
diff --git a/src/languages/en.ts b/src/languages/en.ts
@@ -2477,6 +2477,10 @@ const translations = {
             setupPage: {
                 title: 'Open this link to connect',
                 body: 'To complete setup, open the following link on the computer where QuickBooks Desktop is running.',
+                setupErrorTitle: 'Something went wrong',
+                setupErrorBody1: "The QuickBooks Desktop connection isn't working at the moment. Please try again later or",
+                setupErrorBody2: 'if the problem persists.',
+                setupErrorBodyContactConcierge: 'reach out to Concierge',
             },
             importDescription: 'Choose which coding configurations to import from QuickBooks Desktop to Expensify.',
             classes: 'Classes',

diff --git a/src/languages/es.ts b/src/languages/es.ts
@@ -2502,6 +2502,10 @@ const translations = {
             setupPage: {
                 title: 'Abre este enlace para conectar',
                 body: 'Para completar la configuración, abre el siguiente enlace en la computadora donde se está ejecutando QuickBooks Desktop.',
+                setupErrorTitle: '¡Ups! Ha ocurrido un error',
+                setupErrorBody1: 'La conexión con QuickBooks Desktop no está funcionando en este momento. Por favor, inténtalo de nuevo más tarde o',
+                setupErrorBody2: 'si el problema persiste.',
+                setupErrorBodyContactConcierge: 'contacta a Concierge',
             },
             importDescription: 'Elige que configuraciónes de codificación son importadas desde QuickBooks Desktop a Expensify.',
             classes: 'Clases',

diff --git a/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx b/src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx
@@ -2,16 +2,19 @@ import type {StackScreenProps} from '@react-navigation/stack';
 import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
 import Computer from '@assets/images/laptop-with-second-screen-sync.svg';
-import BrokenMagnifyingGlass from '@assets/images/product-illustrations/broken-magnifying-glass.svg';
 import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
 import Button from '@components/Button';
 import CopyTextToClipboard from '@components/CopyTextToClipboard';
 import FixedFooter from '@components/FixedFooter';
 import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import Icon from '@components/Icon';
+import * as Illustrations from '@components/Icon/Illustrations';
 import ImageSVG from '@components/ImageSVG';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
+import TextLink from '@components/TextLink';
+import useEnvironment from '@hooks/useEnvironment';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -28,6 +31,7 @@ type RequireQuickBooksDesktopModalProps = StackScreenProps<SettingsNavigatorPara
 function RequireQuickBooksDesktopModal({route}: RequireQuickBooksDesktopModalProps) {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
+    const {environmentURL} = useEnvironment();
     const policyID: string = route.params.policyID;
     const [isLoading, setIsLoading] = useState(true);
     const [hasError, setHasError] = useState(false);
@@ -70,8 +74,8 @@ function RequireQuickBooksDesktopModal({route}: RequireQuickBooksDesktopModalPro
         },
     });
 
-    const shouldShowLoading = isLoading || !codatSetupLink;
-    const shouldShowError = shouldShowLoading && hasError;
+    const shouldShowLoading = isLoading || (!codatSetupLink && !hasError);
+    const shouldShowError = hasError;
 
     return (
         <ScreenWrapper
@@ -87,10 +91,23 @@ function RequireQuickBooksDesktopModal({route}: RequireQuickBooksDesktopModalPro
             <ContentWrapper>
                 {shouldShowLoading && <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />}
                 {shouldShowError && (
-                    <View style={[styles.flex1, styles.justifyContentCenter, styles.ph5]}>
-                        <View style={[styles.alignSelfCenter, styles.pendingStateCardIllustration]}>
-                            <ImageSVG src={BrokenMagnifyingGlass} />
-                        </View>
+                    <View style={[styles.flex1, styles.justifyContentCenter, styles.alignItemsCenter, styles.ph5, styles.mb9]}>
+                        <Icon
+                            src={Illustrations.BrokenMagnifyingGlass}
+                            width={116}
+                            height={168}
+                        />
+                        <Text style={[styles.textHeadlineLineHeightXXL, styles.mt3]}>{translate('workspace.qbd.setupPage.setupErrorTitle')}</Text>
+                        <Text style={[styles.textSupporting, styles.ph5, styles.mv3, styles.textAlignCenter]}>
+                            {translate('workspace.qbd.setupPage.setupErrorBody1')}{' '}
+                            <TextLink
+                                href={`${environmentURL}/${ROUTES.CONCIERGE}`}
+                                style={styles.link}
+                            >
+                                {translate('workspace.qbd.setupPage.setupErrorBodyContactConcierge')}
+                            </TextLink>{' '}
+                            {translate('workspace.qbd.setupPage.setupErrorBody2')}
+                        </Text>
                     </View>
                 )}
                 {!shouldShowLoading && !shouldShowError && (