Merge pull request #48872 from VickyStash/bugfix/48866-member-details…

…-crash

[CP Staging] Fix app crash when viewing member profile after Expensify Card feature is enabled

(cherry picked from commit fda4e1b)

(CP triggered by luacmartins)

src/pages/workspace/members/WorkspaceMemberDetailsPage.tsx

@@ -23,6 +23,7 @@ import usePrevious from '@hooks/usePrevious';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CurrencyUtils from '@libs/CurrencyUtils';
+import * as PolicyUtils from '@libs/PolicyUtils';
 import Navigation from '@navigation/Navigation';
 import type {SettingsNavigatorParamList} from '@navigation/types';
 import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
@@ -50,18 +51,20 @@ type WorkspaceMemberDetailsPageProps = Omit<WithPolicyAndFullscreenLoadingProps,
     StackScreenProps<SettingsNavigatorParamList, typeof SCREENS.WORKSPACE.MEMBER_DETAILS>;
 
 function WorkspaceMemberDetailsPage({personalDetails, policy, route}: WorkspaceMemberDetailsPageProps) {
+    const policyID = route.params.policyID;
+    const workspaceAccountID = PolicyUtils.getWorkspaceAccountID(policyID);
+
     const styles = useThemeStyles();
     const {isOffline} = useNetwork();
     const {translate} = useLocalize();
     const StyleUtils = useStyleUtils();
     const currentUserPersonalDetails = useCurrentUserPersonalDetails();
-    const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${policy?.workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`);
+    const [cardsList] = useOnyx(`${ONYXKEYS.COLLECTION.WORKSPACE_CARDS_LIST}${workspaceAccountID}_${CONST.EXPENSIFY_CARD.BANK}`);
 
     const [isRemoveMemberConfirmModalVisible, setIsRemoveMemberConfirmModalVisible] = useState(false);
     const [isRoleSelectionModalVisible, setIsRoleSelectionModalVisible] = useState(false);
 
     const accountID = Number(route.params.accountID);
-    const policyID = route.params.policyID;
     const memberLogin = personalDetails?.[accountID]?.login ?? '';
     const member = policy?.employeeList?.[memberLogin];
     const prevMember = usePrevious(member);

src/pages/workspace/withPolicy.tsx

@@ -8,6 +8,7 @@ import * as Policy from '@userActions/Policy/Policy';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 
 type NavigatorsParamList = BottomTabNavigatorParamList & AuthScreensParamList & SettingsNavigatorParamList & ReimbursementAccountNavigatorParamList & FullScreenNavigatorParamList;
 
@@ -56,6 +57,7 @@ function getPolicyIDFromRoute(route: PolicyRoute): string {
 type WithPolicyOnyxProps = {
     policy: OnyxEntry<OnyxTypes.Policy>;
     policyDraft: OnyxEntry<OnyxTypes.Policy>;
+    isLoadingPolicy: boolean;
 };
 
 type WithPolicyProps = WithPolicyOnyxProps & {
@@ -65,6 +67,7 @@ type WithPolicyProps = WithPolicyOnyxProps & {
 const policyDefaultProps: WithPolicyOnyxProps = {
     policy: {} as OnyxTypes.Policy,
     policyDraft: {} as OnyxTypes.Policy,
+    isLoadingPolicy: false,
 };
 
 /*
@@ -76,8 +79,9 @@ export default function <TProps extends WithPolicyProps, TRef>(
     function WithPolicy(props: Omit<TProps, keyof WithPolicyOnyxProps>, ref: ForwardedRef<TRef>) {
         const policyID = getPolicyIDFromRoute(props.route as PolicyRoute);
 
-        const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
-        const [policyDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${policyID}`);
+        const [policy, policyResults] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
+        const [policyDraft, policyDraftResults] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_DRAFTS}${policyID}`);
+        const isLoadingPolicy = isLoadingOnyxValue(policyResults, policyDraftResults);
 
         if (policyID.length > 0) {
             Policy.updateLastAccessedWorkspace(policyID);
@@ -89,6 +93,7 @@ export default function <TProps extends WithPolicyProps, TRef>(
                 {...(props as TProps)}
                 policy={policy}
                 policyDraft={policyDraft}
+                isLoadingPolicy={isLoadingPolicy}
                 ref={ref}
             />
         );

src/pages/workspace/withPolicyAndFullscreenLoading.tsx

@@ -27,13 +27,18 @@ export default function withPolicyAndFullscreenLoading<TProps extends WithPolicy
     WrappedComponent: ComponentType<TProps & RefAttributes<TRef>>,
 ): ComponentWithPolicyAndFullscreenLoading<TProps, TRef> {
     function WithPolicyAndFullscreenLoading(
-        {policy = policyDefaultProps.policy, policyDraft = policyDefaultProps.policyDraft, ...rest}: Omit<TProps, keyof WithPolicyAndFullscreenLoadingOnyxProps>,
+        {
+            policy = policyDefaultProps.policy,
+            policyDraft = policyDefaultProps.policyDraft,
+            isLoadingPolicy = policyDefaultProps.isLoadingPolicy,
+            ...rest
+        }: Omit<TProps, keyof WithPolicyAndFullscreenLoadingOnyxProps>,
         ref: ForwardedRef<TRef>,
     ) {
         const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {initialValue: true});
         const [personalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
 
-        if (isLoadingReportData && isEmpty(policy) && isEmpty(policyDraft)) {
+        if ((isLoadingPolicy || isLoadingReportData) && isEmpty(policy) && isEmpty(policyDraft)) {
             return <FullscreenLoadingIndicator />;
         }