Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[QBD] Offline mode for RequireQuickBooksDesktopModal #50915

Merged
merged 10 commits into from
Oct 21, 2024
Merged

[QBD] Offline mode for RequireQuickBooksDesktopModal #50915

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
71f4258
refactor RequireQuickBooksDesktopModal to use FullPageOfflineBlocking…
ZhenjaHorbach Oct 16, 2024
0054c86
refactor screen
ZhenjaHorbach Oct 16, 2024
8eed560
fix bug with loader
ZhenjaHorbach Oct 18, 2024
6bb8d2c
fix bug with loader v2
ZhenjaHorbach Oct 18, 2024
2e8d995
remove useEffect
ZhenjaHorbach Oct 18, 2024
a51b13d
fix bug with empty codatSetupLink
ZhenjaHorbach Oct 18, 2024
bdae84a
fix bug with empty codatSetupLink v2.0
ZhenjaHorbach Oct 18, 2024
eb5e6b3
refactor code
ZhenjaHorbach Oct 18, 2024
4fa4a7b
fix conflicts
ZhenjaHorbach Oct 18, 2024
bd740de
fix eslint issue
ZhenjaHorbach Oct 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 51 additions & 35 deletions src/pages/workspace/accounting/qbd/QuickBooksDesktopSetupPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
const ContentWrapper = codatSetupLink ? ({children}: React.PropsWithChildren) => children : FullPageOfflineBlockingView;
const ContentWrapper = codatSetupLink ? View : FullPageOfflineBlockingView;

I think it's simpler

Copy link
Contributor Author

@ZhenjaHorbach ZhenjaHorbach Oct 18, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In this case we will have to pass flex: 1 for this View
So the current implementation is the simplest


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);

Expand All @@ -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
Expand All @@ -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>
);
}
Expand Down
Loading