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

Add skeleton to loading Accounting options #41980

Merged
merged 16 commits into from
May 15, 2024
Merged

Add skeleton to loading Accounting options #41980

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
e302bcd
Add skeleton to loading Accounting options
narefyev91 May 10, 2024
9f07b73
updates after design review + add logic to support offline
narefyev91 May 13, 2024
05fa9bc
updates after c+ review
narefyev91 May 13, 2024
3b02297
add more width for lines
narefyev91 May 13, 2024
d2511d6
updates after c+ review
narefyev91 May 14, 2024
18dffb0
Merge branch 'refs/heads/main' into add-skeleton-for-loading-accounting
narefyev91 May 14, 2024
6725691
updates after c+ review
narefyev91 May 14, 2024
9a5e596
updates after c+ review
narefyev91 May 14, 2024
0101ec0
Update src/pages/workspace/withPolicyConnections.tsx
narefyev91 May 14, 2024
0a5d79e
Update src/pages/workspace/withPolicyConnections.tsx
narefyev91 May 14, 2024
7f3f860
Update src/pages/workspace/withPolicyConnections.tsx
narefyev91 May 14, 2024
695c947
updates after c+ review
narefyev91 May 14, 2024
8392a21
updates after c+ review
narefyev91 May 14, 2024
83f966b
updates after c+ review
narefyev91 May 14, 2024
9e84439
Update src/pages/workspace/withPolicyConnections.tsx
narefyev91 May 14, 2024
b6dbb99
Update src/pages/workspace/withPolicyConnections.tsx
narefyev91 May 14, 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
42 changes: 28 additions & 14 deletions src/pages/workspace/accounting/PolicyAccountingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React, {useMemo, useRef, useState} from 'react';
import {ActivityIndicator, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import {useOnyx, withOnyx} from 'react-native-onyx';
import type {OnyxEntry} from 'react-native-onyx';
import CollapsibleSection from '@components/CollapsibleSection';
import ConfirmModal from '@components/ConfirmModal';
Expand All @@ -12,6 +12,7 @@ import * as Illustrations from '@components/Icon/Illustrations';
import type {LocaleContextProps} from '@components/LocaleContextProvider';
import type {MenuItemProps} from '@components/MenuItem';
import MenuItemList from '@components/MenuItemList';
import OptionsListSkeletonView from '@components/OptionsListSkeletonView';
import ScreenWrapper from '@components/ScreenWrapper';
import ScrollView from '@components/ScrollView';
import Section from '@components/Section';
Expand Down Expand Up @@ -110,6 +111,10 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting
const [threeDotsMenuPosition, setThreeDotsMenuPosition] = useState<AnchorPosition>({horizontal: 0, vertical: 0});
const [isDisconnectModalOpen, setIsDisconnectModalOpen] = useState(false);
const threeDotsMenuContainerRef = useRef<View>(null);
const [hasConnectionsDataBeenFetched] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_HAS_CONNECTIONS_DATA_BEEN_FETCHED}${policy?.id ?? '0'}`, {
initWithStoredValues: true,
});
const isConnectionDataFetched = !policy || !policy.areConnectionsEnabled || !!hasConnectionsDataBeenFetched || !!policy.connections;
narefyev91 marked this conversation as resolved.
Show resolved Hide resolved

const isSyncInProgress = !!connectionSyncProgress?.stageInProgress && connectionSyncProgress.stageInProgress !== CONST.POLICY.CONNECTIONS.SYNC_STAGE_NAME.JOB_DONE;

Expand Down Expand Up @@ -156,7 +161,7 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting
});
}

if (!connectedIntegration) {
if (!connectedIntegration || !hasConnectionsDataBeenFetched) {
return [];
}
narefyev91 marked this conversation as resolved.
Show resolved Hide resolved
const integrationData = accountingIntegrationData(connectedIntegration, policyID, translate);
Expand Down Expand Up @@ -258,6 +263,7 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting
threeDotsMenuPosition,
translate,
accountingIntegrations,
hasConnectionsDataBeenFetched,
]);

const otherIntegrationsItems = useMemo(() => {
Expand Down Expand Up @@ -334,21 +340,29 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting
titleStyles={styles.accountSettingsSectionTitle}
childrenStyles={styles.pt5}
>
<MenuItemList
menuItems={connectionsMenuItems}
shouldUseSingleExecution
/>
{otherIntegrationsItems && (
<CollapsibleSection
title={translate('workspace.accounting.other')}
wrapperStyle={styles.pr3}
titleStyle={[styles.textNormal, styles.colorMuted]}
>
{!isConnectionDataFetched ? (
<View style={styles.mnh20}>
<OptionsListSkeletonView shouldAnimate />
</View>
) : (
<>
<MenuItemList
menuItems={otherIntegrationsItems}
menuItems={connectionsMenuItems}
shouldUseSingleExecution
/>
</CollapsibleSection>
{otherIntegrationsItems && (
<CollapsibleSection
title={translate('workspace.accounting.other')}
wrapperStyle={styles.pr3}
titleStyle={[styles.textNormal, styles.colorMuted]}
>
<MenuItemList
menuItems={otherIntegrationsItems}
shouldUseSingleExecution
/>
</CollapsibleSection>
)}
</>
)}
</Section>
</View>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/workspace/withPolicyConnections.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ type WithPolicyConnectionsProps = WithPolicyProps;
function withPolicyConnections<TProps extends WithPolicyConnectionsProps>(WrappedComponent: ComponentType<TProps>) {
function WithPolicyConnections(props: TProps) {
const {isOffline} = useNetwork();
const [hasConnectionsDataBeenFetched, {status}] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_HAS_CONNECTIONS_DATA_BEEN_FETCHED}${props.policy?.id ?? '0'}`, {
const [hasConnectionsDataBeenFetched] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_HAS_CONNECTIONS_DATA_BEEN_FETCHED}${props.policy?.id ?? '0'}`, {
initWithStoredValues: false,
});

Expand All @@ -38,7 +38,7 @@ function withPolicyConnections<TProps extends WithPolicyConnectionsProps>(Wrappe
openPolicyAccountingPage(props.policy.id);
}, [hasConnectionsDataBeenFetched, props.policy, isOffline]);

if (props.policy?.areConnectionsEnabled && (!props.policy || status === 'loading' || hasConnectionsDataBeenFetched === false)) {
narefyev91 marked this conversation as resolved.
Show resolved Hide resolved
narefyev91 marked this conversation as resolved.
Show resolved Hide resolved
if (props.policy?.areConnectionsEnabled && !props.policy) {
narefyev91 marked this conversation as resolved.
Show resolved Hide resolved
return (
<FullPageOfflineBlockingView>
Copy link
Contributor

Choose a reason for hiding this comment

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

Remove <FullPageOfflineBlockingView /> The accounting pages are accessible offline. Also since we are using isConnectionDataFetchNeeded we will render this only when online afterall. However we need to disable the Set up buttons on the connections (QBO and Xero) since the setup requires connection

<FullScreenLoadingIndicator />
Expand Down
4 changes: 4 additions & 0 deletions src/styles/utils/sizing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ export default {
minHeight: '100%',
},

mnh20: {
minHeight: 80,
},

mnw2: {
minWidth: 8,
},
Expand Down
Loading