Merge pull request #50915 from ZhenjaHorbach/qbd-desktop-modal-offline-mode

[QBD] Offline mode for RequireQuickBooksDesktopModal

Author: lakchote

src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx

@@ -1,20 +1,22 @@
 import type {StackScreenProps} from '@react-navigation/stack';
-import React, {useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
 import {View} from 'react-native';
 import Computer from '@assets/images/laptop-with-second-screen-sync.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 ImageSVG from '@components/ImageSVG';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as QuickbooksDesktop from '@libs/actions/connections/QuickbooksDesktop';
 import Navigation from '@libs/Navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@libs/Navigation/types';
-import LoadingPage from '@pages/LoadingPage';
 import * as PolicyAction from '@userActions/Policy/Policy';
 import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
@@ -28,15 +30,18 @@ function RequireQuickBooksDesktopModal({route}: RequireQuickBooksDesktopModalPro
     const [isLoading, setIsLoading] = useState(true);
     const [codatSetupLink, setCodatSetupLink] = useState<string>('');
 
-    useEffect(() => {
-        const fetchSetupLink = () => {
-            // eslint-disable-next-line rulesdir/no-thenable-actions-in-views
-            QuickbooksDesktop.getQuickbooksDesktopCodatSetupLink(policyID).then((response) => {
-                setCodatSetupLink(String(response?.setupUrl ?? ''));
-                setIsLoading(false);
-            });
-        };
+    const ContentWrapper = codatSetupLink ? ({children}: React.PropsWithChildren) => children : FullPageOfflineBlockingView;
+
+    const fetchSetupLink = useCallback(() => {
+        setIsLoading(true);
+        // eslint-disable-next-line rulesdir/no-thenable-actions-in-views
+        QuickbooksDesktop.getQuickbooksDesktopCodatSetupLink(policyID).then((response) => {
+            setCodatSetupLink(String(response?.setupUrl ?? ''));
+            setIsLoading(false);
+        });
+    }, [policyID]);
 
+    useEffect(() => {
         // Since QBD doesn't support Taxes, we should disable them from the LHN when connecting to QBD
         PolicyAction.enablePolicyTaxes(policyID, false);
 
@@ -45,9 +50,14 @@ function RequireQuickBooksDesktopModal({route}: RequireQuickBooksDesktopModalPro
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, []);
 
-    if (isLoading) {
-        return <LoadingPage title={translate('workspace.qbd.qbdSetup')} />;
-    }
+    useNetwork({
+        onReconnect: () => {
+            if (codatSetupLink) {
+                return;
+            }
+            fetchSetupLink();
+        },
+    });
 
     return (
         <ScreenWrapper
@@ -60,29 +70,35 @@ function RequireQuickBooksDesktopModal({route}: RequireQuickBooksDesktopModalPro
                 shouldShowBackButton
                 onBackButtonPress={() => Navigation.dismissModal()}
             />
-            <View style={[styles.flex1, styles.ph5]}>
-                <View style={[styles.alignSelfCenter, styles.computerIllustrationContainer, styles.pv6]}>
-                    <ImageSVG src={Computer} />
-                </View>
+            <ContentWrapper>
+                {isLoading || !codatSetupLink ? (
+                    <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
+                ) : (
+                    <View style={[styles.flex1, styles.ph5]}>
+                        <View style={[styles.alignSelfCenter, styles.computerIllustrationContainer, styles.pv6]}>
+                            <ImageSVG src={Computer} />
+                        </View>
 
-                <Text style={[styles.textHeadlineH1, styles.pt5]}>{translate('workspace.qbd.setupPage.title')}</Text>
-                <Text style={[styles.textSupporting, styles.textNormal, styles.pt4]}>{translate('workspace.qbd.setupPage.body')}</Text>
-                <View style={[styles.qbdSetupLinkBox, styles.mt5]}>
-                    <CopyTextToClipboard
-                        text={codatSetupLink}
-                        textStyles={[styles.textSupporting]}
-                    />
-                </View>
-                <FixedFooter style={[styles.mtAuto, styles.ph0]}>
-                    <Button
-                        success
-                        text={translate('common.done')}
-                        onPress={() => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_TRIGGER_FIRST_SYNC.getRoute(policyID))}
-                        pressOnEnter
-                        large
-                    />
-                </FixedFooter>
-            </View>
+                        <Text style={[styles.textHeadlineH1, styles.pt5]}>{translate('workspace.qbd.setupPage.title')}</Text>
+                        <Text style={[styles.textSupporting, styles.textNormal, styles.pt4]}>{translate('workspace.qbd.setupPage.body')}</Text>
+                        <View style={[styles.qbdSetupLinkBox, styles.mt5]}>
+                            <CopyTextToClipboard
+                                text={codatSetupLink}
+                                textStyles={[styles.textSupporting]}
+                            />
+                        </View>
+                        <FixedFooter style={[styles.mtAuto, styles.ph0]}>
+                            <Button
+                                success
+                                text={translate('common.done')}
+                                onPress={() => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_QUICKBOOKS_DESKTOP_TRIGGER_FIRST_SYNC.getRoute(policyID))}
+                                pressOnEnter
+                                large
+                            />
+                        </FixedFooter>
+                    </View>
+                )}
+            </ContentWrapper>
         </ScreenWrapper>
     );
 }