fix(react-compiler): expose triggerKYCFlow via onWorkspacePolicySelect

Author: TMisiukiewicz

Mobile-Expensify

@@ -2,7 +2,7 @@ import {useRoute} from '@react-navigation/native';
 import {delegateEmailSelector, isUserValidatedSelector} from '@selectors/Account';
 import {hasSeenTourSelector} from '@selectors/Onboarding';
 import truncate from 'lodash/truncate';
-import React, {useContext, useEffect, useRef} from 'react';
+import React, {useContext} from 'react';
 import type {StyleProp, ViewStyle} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu';
@@ -39,7 +39,7 @@ import useTransactionThreadReport from '@hooks/useTransactionThreadReport';
 import {search} from '@libs/actions/Search';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {getTotalAmountForIOUReportPreviewButton} from '@libs/MoneyRequestReportUtils';
-import type {KYCFlowEvent, TriggerKYCFlow} from '@libs/PaymentUtils';
+import type {KYCFlowEvent, TriggerKYCFlow, WorkspacePolicyPaymentOption} from '@libs/PaymentUtils';
 import {handleUnvalidatedAccount, selectPaymentType} from '@libs/PaymentUtils';
 import {sortPoliciesByName} from '@libs/PolicyUtils';
 import {hasRequestFromCurrentAccount} from '@libs/ReportActionsUtils';
@@ -53,7 +53,6 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {Route} from '@src/ROUTES';
-import type * as OnyxTypes from '@src/types/onyx';
 import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 
 const PAYMENT_ICONS = ['Send', 'ThumbsUp', 'Cash', 'ArrowRight', 'Building'] as const;
@@ -136,15 +135,6 @@ function MoneyReportHeaderSelectionDropdown({reportID, primaryAction, isReportIn
 
     const {showConfirmModal} = useConfirmModal();
 
-    const isSelectionModePaymentRef = useRef(false);
-
-    useEffect(() => {
-        if (selectedTransactionIDs.length !== 0) {
-            return;
-        }
-        isSelectionModePaymentRef.current = false;
-    }, [selectedTransactionIDs.length]);
-
     const expensifyIcons = useMemoizedLazyExpensifyIcons(PAYMENT_ICONS);
 
     const {beginExportWithTemplate, showOfflineModal, showDownloadErrorModal} = useExportActions({
@@ -229,7 +219,6 @@ function MoneyReportHeaderSelectionDropdown({reportID, primaryAction, isReportIn
         if (!type || !chatReport) {
             return;
         }
-        isSelectionModePaymentRef.current = true;
 
         if (isDelegateAccessRestricted) {
             showDelegateNoAccessModal();
@@ -318,25 +307,26 @@ function MoneyReportHeaderSelectionDropdown({reportID, primaryAction, isReportIn
             ? sortPoliciesByName(activeAdminPolicies, localeCompare)
             : [];
 
-    const buildPaymentSubMenuItems = (onWorkspaceSelected: (workspacePolicy: OnyxTypes.Policy) => void): PopoverMenuItem[] => {
-        if (!workspacePolicyOptions.length) {
-            return Object.values(paymentButtonOptions);
-        }
-        const result: PopoverMenuItem[] = [];
+    // Workspace-policy entries carry the policy as data with no onSelected.
+    // MoneyReportHeaderKYCDropdown picks them up via onSubItemSelected where triggerKYCFlow is in scope
+    const paymentSubMenuItems: PopoverMenuItem[] = [];
+    if (!workspacePolicyOptions.length) {
+        paymentSubMenuItems.push(...Object.values(paymentButtonOptions));
+    } else {
         for (const opt of Object.values(paymentButtonOptions)) {
-            result.push(opt);
+            paymentSubMenuItems.push(opt);
             if (opt.value === CONST.IOU.PAYMENT_TYPE.EXPENSIFY) {
                 for (const wp of workspacePolicyOptions) {
-                    result.push({
+                    const workspacePolicyItem: WorkspacePolicyPaymentOption = {
                         text: translate('iou.payWithPolicy', truncate(wp.name, {length: CONST.ADDITIONAL_ALLOWED_CHARACTERS}), ''),
                         icon: expensifyIcons.Building,
-                        onSelected: () => onWorkspaceSelected(wp),
-                    });
+                        workspacePolicy: wp,
+                    };
+                    paymentSubMenuItems.push(workspacePolicyItem);
                 }
             }
         }
-        return result;
-    };
+    }
 
     const showDeleteModal = () => {
         showConfirmModal({
@@ -385,10 +375,7 @@ function MoneyReportHeaderSelectionDropdown({reportID, primaryAction, isReportIn
                             text: translate('iou.approve'),
                             icon: expensifyIcons.ThumbsUp,
                             value: CONST.REPORT.PRIMARY_ACTIONS.APPROVE,
-                            onSelected: () => {
-                                isSelectionModePaymentRef.current = true;
-                                confirmApproval(true);
-                            },
+                            onSelected: () => confirmApproval(true),
                         },
                     ]
                   : []),
@@ -400,16 +387,7 @@ function MoneyReportHeaderSelectionDropdown({reportID, primaryAction, isReportIn
                             value: CONST.REPORT.PRIMARY_ACTIONS.PAY as string,
                             rightIcon: expensifyIcons.ArrowRight,
                             backButtonText: translate('iou.settlePayment', totalAmount),
-                            subMenuItems: buildPaymentSubMenuItems((wp) => {
-                                isSelectionModePaymentRef.current = true;
-                                if (checkForNecessaryAction()) {
-                                    return;
-                                }
-                                kycWallRef.current?.continueAction?.({policy: wp});
-                            }),
-                            onSelected: () => {
-                                isSelectionModePaymentRef.current = true;
-                            },
+                            subMenuItems: paymentSubMenuItems,
                         },
                     ]
                   : []),
@@ -446,7 +424,6 @@ function MoneyReportHeaderSelectionDropdown({reportID, primaryAction, isReportIn
     const hasPayInSelectionMode = allExpensesSelected && hasPayAction && hasActualPaymentOptions;
 
     const onSelectionModePaymentSelect = (event: KYCFlowEvent, iouPaymentType: PaymentMethodType, triggerKYCFlow: TriggerKYCFlow) => {
-        isSelectionModePaymentRef.current = true;
         if (checkForNecessaryAction(iouPaymentType)) {
             return;
         }
@@ -473,10 +450,7 @@ function MoneyReportHeaderSelectionDropdown({reportID, primaryAction, isReportIn
         });
     };
 
-    const selectionModeKYCSuccess = (type?: PaymentMethodType) => {
-        isSelectionModePaymentRef.current = true;
-        confirmPayment({paymentType: type});
-    };
+    const selectionModeKYCSuccess = (type?: PaymentMethodType) => confirmPayment({paymentType: type});
 
     if (!selectedTransactionsOptions.length || transactionThreadReportID) {
         return null;
@@ -501,6 +475,12 @@ function MoneyReportHeaderSelectionDropdown({reportID, primaryAction, isReportIn
                     chatReportID={chatReport?.reportID}
                     iouReport={moneyRequestReport}
                     onPaymentSelect={onSelectionModePaymentSelect}
+                    onWorkspacePolicySelect={(selectedPolicy, triggerKYCFlow) => {
+                        if (checkForNecessaryAction()) {
+                            return;
+                        }
+                        triggerKYCFlow({policy: selectedPolicy});
+                    }}
                     onSuccessfulKYC={selectionModeKYCSuccess}
                     primaryAction={primaryAction}
                     applicableSecondaryActions={selectedTransactionsOptions}

src/components/MoneyReportHeaderActions/MoneyReportHeaderSelectionDropdown.tsx

@@ -9,6 +9,7 @@ import type {KYCFlowEvent, TriggerKYCFlow} from '@libs/PaymentUtils';
 import shouldPopoverUseScrollView from '@libs/shouldPopoverUseScrollView';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
+import type {Policy} from '@src/types/onyx';
 import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 import ButtonWithDropdownMenu from './ButtonWithDropdownMenu';
 import type {ButtonWithDropdownMenuRef, DropdownOption} from './ButtonWithDropdownMenu/types';
@@ -22,6 +23,12 @@ type MoneyReportHeaderKYCDropdownProps = Omit<KYCWallProps, 'children' | 'enable
 
     onPaymentSelect: (event: KYCFlowEvent, iouPaymentType: PaymentMethodType, triggerKYCFlow: TriggerKYCFlow) => void;
 
+    /**
+     * Called when a workspace-policy sub-item is picked. The parent owns the full flow (guards, telemetry,
+     * then invoking `triggerKYCFlow({policy})` when ready). If omitted, defaults to `triggerKYCFlow({policy})`.
+     */
+    onWorkspacePolicySelect?: (policy: Policy, triggerKYCFlow: TriggerKYCFlow) => void;
+
     customText?: string;
 
     shouldShowSuccessStyle?: boolean;
@@ -40,6 +47,7 @@ function MoneyReportHeaderKYCDropdown({
     applicableSecondaryActions,
     iouReport,
     onPaymentSelect,
+    onWorkspacePolicySelect,
     customText,
     shouldShowSuccessStyle,
     dropdownMenuRef,
@@ -75,9 +83,13 @@ function MoneyReportHeaderKYCDropdown({
                     ref={dropdownMenuRef}
                     success={shouldShowSuccessStyle ?? false}
                     onPress={() => {}}
-                    onSubItemSelected={(item, index, event) => {
+                    onSubItemSelected={(item, _index, event) => {
                         if (isSecondaryActionAWorkspacePolicyOption(item)) {
-                            triggerKYCFlow({policy: item.workspacePolicy});
+                            if (onWorkspacePolicySelect) {
+                                onWorkspacePolicySelect(item.workspacePolicy, triggerKYCFlow);
+                            } else {
+                                triggerKYCFlow({policy: item.workspacePolicy});
+                            }
                             return;
                         }
                         if (!isSecondaryActionAPaymentOption(item)) {