fix(react-compiler): tag workspace-policy PAY sub-items with policy data

Author: TMisiukiewicz

src/components/MoneyReportHeaderActions/MoneyReportHeaderSecondaryActions.tsx

@@ -36,7 +36,7 @@ import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import getPlatform from '@libs/getPlatform';
 import {getTotalAmountForIOUReportPreviewButton} from '@libs/MoneyRequestReportUtils';
 import Navigation from '@libs/Navigation/Navigation';
-import type {KYCFlowEvent, TriggerKYCFlow} from '@libs/PaymentUtils';
+import type {KYCFlowEvent, TriggerKYCFlow, WorkspacePolicyPaymentOption} from '@libs/PaymentUtils';
 import {selectPaymentType} from '@libs/PaymentUtils';
 import {sortPoliciesByName} from '@libs/PolicyUtils';
 import {getFilteredReportActionsForReportView, hasRequestFromCurrentAccount} from '@libs/ReportActionsUtils';
@@ -55,7 +55,6 @@ import {canApproveIOU, canIOUBePaid as canIOUBePaidAction} from '@userActions/IO
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Route} from '@src/ROUTES';
-import type * as OnyxTypes from '@src/types/onyx';
 import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 
 type MoneyReportHeaderSecondaryActionsProps = {
@@ -232,25 +231,26 @@ function MoneyReportHeaderSecondaryActions({reportID, primaryAction, isReportInS
 
     const expensifyIcons = useMemoizedLazyExpensifyIcons(['Info', 'Cash', 'ArrowRight', 'Building']);
 
-    const buildPaymentSubMenuItems = (onWorkspaceSelected: (workspacePolicy: OnyxTypes.Policy) => void): PopoverMenuItem[] => {
-        if (!workspacePolicyOptions.length) {
-            return Object.values(paymentButtonOptions);
-        }
-        const result: PopoverMenuItem[] = [];
+    // Build PAY action sub-items. Workspace-policy entries carry the policy as data and have 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;
-    };
+    }
 
     // Domain hooks
     const lifecycleActions = useLifecycleActions({
@@ -337,10 +337,7 @@ function MoneyReportHeaderSecondaryActions({reportID, primaryAction, isReportInS
             value: CONST.REPORT.SECONDARY_ACTIONS.PAY,
             backButtonText: translate('iou.settlePayment', totalAmount),
             sentryLabel: CONST.SENTRY_LABEL.MORE_MENU.PAY,
-            // eslint-disable-next-line react-hooks/refs -- ref is only accessed inside the callback (event handler), not during render
-            subMenuItems: buildPaymentSubMenuItems((wp) => {
-                kycWallRef.current?.continueAction?.({policy: wp});
-            }),
+            subMenuItems: paymentSubMenuItems,
         },
     };
 

src/components/MoneyReportHeaderKYCDropdown.tsx

@@ -4,7 +4,7 @@ import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
-import {isSecondaryActionAPaymentOption} from '@libs/PaymentUtils';
+import {isSecondaryActionAPaymentOption, isSecondaryActionAWorkspacePolicyOption} from '@libs/PaymentUtils';
 import type {KYCFlowEvent, TriggerKYCFlow} from '@libs/PaymentUtils';
 import shouldPopoverUseScrollView from '@libs/shouldPopoverUseScrollView';
 import CONST from '@src/CONST';
@@ -76,6 +76,10 @@ function MoneyReportHeaderKYCDropdown({
                     success={shouldShowSuccessStyle ?? false}
                     onPress={() => {}}
                     onSubItemSelected={(item, index, event) => {
+                        if (isSecondaryActionAWorkspacePolicyOption(item)) {
+                            triggerKYCFlow({policy: item.workspacePolicy});
+                            return;
+                        }
                         if (!isSecondaryActionAPaymentOption(item)) {
                             return;
                         }

src/libs/PaymentUtils.ts

@@ -284,6 +284,7 @@ type ApproveActionType = Extract<ValueOf<typeof CONST.IOU.REPORT_ACTION_TYPE>, '
 type PaymentOption = PopoverMenuItem & DropdownOption<ValueOf<typeof CONST.IOU.PAYMENT_TYPE>>;
 type PaymentOrApproveOption = Merge<PaymentOption, {value?: PaymentOption['value'] | ApproveActionType}>;
 type SecondaryActionOption = DropdownOption<ValueOf<typeof CONST.REPORT.SECONDARY_ACTIONS>>;
+type WorkspacePolicyPaymentOption = PopoverMenuItem & {workspacePolicy: Policy};
 
 const isSecondaryActionAPaymentOption = (item: PopoverMenuItem): item is PaymentOption => {
     if (!('value' in item)) {
@@ -294,6 +295,8 @@ const isSecondaryActionAPaymentOption = (item: PopoverMenuItem): item is Payment
     return isPaymentInArray.length > 0;
 };
 
+const isSecondaryActionAWorkspacePolicyOption = (item: PopoverMenuItem): item is WorkspacePolicyPaymentOption => 'workspacePolicy' in item && !!item.workspacePolicy;
+
 /**
  * Get the appropriate payment type, policy from context (policy related to payment type), policy from payment method, and whether a payment method should be selected
  * based on the provided payment method, active admin policies, and valid business bank account options.
@@ -362,7 +365,8 @@ export {
     handleUnvalidatedAccount,
     selectPaymentType,
     isSecondaryActionAPaymentOption,
+    isSecondaryActionAWorkspacePolicyOption,
     getActivePaymentType,
     getBankAccountLastFourDigits,
 };
-export type {KYCFlowEvent, TriggerKYCFlow, PaymentOrApproveOption, PaymentOption, SelectPaymentTypeParams, BusinessBankAccountOption};
+export type {KYCFlowEvent, TriggerKYCFlow, PaymentOrApproveOption, PaymentOption, SelectPaymentTypeParams, BusinessBankAccountOption, WorkspacePolicyPaymentOption};