Merge pull request #50052 from software-mansion-labs/@cdOut/guided-se…

…tup-vbba

[Guided Setup Stage 3] Onboarding message not sent when VBBA selected

src/components/AddPaymentMethodMenu.tsx

@@ -2,26 +2,22 @@ import type {RefObject} from 'react';
 import React, {useEffect, useState} from 'react';
 import type {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
-import {withOnyx} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import useLocalize from '@hooks/useLocalize';
+import {completePaymentOnboarding} from '@libs/actions/IOU';
 import * as ReportActionsUtils from '@libs/ReportActionsUtils';
 import * as ReportUtils from '@libs/ReportUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {AnchorPosition} from '@src/styles';
-import type {Report, Session} from '@src/types/onyx';
+import type {Report} from '@src/types/onyx';
 import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
 import * as Expensicons from './Icon/Expensicons';
 import type {PaymentMethod} from './KYCWall/types';
 import type BaseModalProps from './Modal/types';
 import PopoverMenu from './PopoverMenu';
 
-type AddPaymentMethodMenuOnyxProps = {
-    /** Session info for the currently logged-in user. */
-    session: OnyxEntry<Session>;
-};
-
-type AddPaymentMethodMenuProps = AddPaymentMethodMenuOnyxProps & {
+type AddPaymentMethodMenuProps = {
     /** Should the component be visible? */
     isVisible: boolean;
 
@@ -58,11 +54,11 @@ function AddPaymentMethodMenu({
     anchorRef,
     iouReport,
     onItemSelected,
-    session,
     shouldShowPersonalBankAccountOption = false,
 }: AddPaymentMethodMenuProps) {
     const {translate} = useLocalize();
     const [restoreFocusType, setRestoreFocusType] = useState<BaseModalProps['restoreFocusType']>();
+    const [session] = useOnyx(ONYXKEYS.SESSION);
 
     // Users can choose to pay with business bank account in case of Expense reports or in case of P2P IOU report
     // which then starts a bottom up flow and creates a Collect workspace where the payer is an admin and payee is an employee.
@@ -80,6 +76,7 @@ function AddPaymentMethodMenu({
             return;
         }
 
+        completePaymentOnboarding(CONST.PAYMENT_SELECTED.PBA);
         onItemSelected(CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT);
     }, [isPersonalOnlyOption, isVisible, onItemSelected]);
 
@@ -108,6 +105,7 @@ function AddPaymentMethodMenu({
                               text: translate('common.personalBankAccount'),
                               icon: Expensicons.Bank,
                               onSelected: () => {
+                                  completePaymentOnboarding(CONST.PAYMENT_SELECTED.PBA);
                                   onItemSelected(CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT);
                               },
                           },
@@ -118,7 +116,10 @@ function AddPaymentMethodMenu({
                           {
                               text: translate('common.businessBankAccount'),
                               icon: Expensicons.Building,
-                              onSelected: () => onItemSelected(CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT),
+                              onSelected: () => {
+                                  completePaymentOnboarding(CONST.PAYMENT_SELECTED.BBA);
+                                  onItemSelected(CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT);
+                              },
                           },
                       ]
                     : []),
@@ -140,8 +141,4 @@ function AddPaymentMethodMenu({
 
 AddPaymentMethodMenu.displayName = 'AddPaymentMethodMenu';
 
-export default withOnyx<AddPaymentMethodMenuProps, AddPaymentMethodMenuOnyxProps>({
-    session: {
-        key: ONYXKEYS.SESSION,
-    },
-})(AddPaymentMethodMenu);
+export default AddPaymentMethodMenu;