Function AddPaymentMethodMenu

src/components/AddPaymentMethodMenu.tsx:49–147

({
    isVisible,
    onClose,
    anchorPosition,
    anchorAlignment = {
        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
    },
    anchorRef,
    iouReport,
    onItemSelected,
    shouldShowPersonalBankAccountOption = false,
}: AddPaymentMethodMenuProps)

};

function AddPaymentMethodMenu({
    isVisible,
    onClose,
    anchorPosition,
    anchorAlignment = {
        horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
        vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
    },
    anchorRef,
    iouReport,
    onItemSelected,
    shouldShowPersonalBankAccountOption = false,
}: AddPaymentMethodMenuProps) {
    const icons = useMemoizedLazyExpensifyIcons(['Building', 'Bank']);
    const {translate} = useLocalize();
    const [restoreFocusType, setRestoreFocusType] = useState<BaseModalProps['restoreFocusType']>();
    const [session] = useOnyx(ONYXKEYS.SESSION);
    const [introSelected, introSelectedStatus] = useOnyx(ONYXKEYS.NVP_INTRO_SELECTED);
    const [isSelfTourViewed = false] = useOnyx(ONYXKEYS.NVP_ONBOARDING, {selector: hasSeenTourSelector});
    const [betas] = useOnyx(ONYXKEYS.BETAS);
    const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();

    // 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.
    const isIOU = isIOUReport(iouReport);
    const canUseBusinessBankAccount = isExpenseReport(iouReport) || (isIOU && !hasRequestFromCurrentAccount(iouReport, session?.accountID ?? CONST.DEFAULT_NUMBER_ID));

    const canUsePersonalBankAccount = shouldShowPersonalBankAccountOption || isIOU;

    const isPersonalOnlyOption = canUsePersonalBankAccount && !canUseBusinessBankAccount;

    const isLoadingIntroSelected = isLoadingOnyxValue(introSelectedStatus);

    // We temporarily disabled P2P debit cards so we will automatically select the personal bank account option if there is no other option to select.
    useEffect(() => {
        if (!isVisible || !isPersonalOnlyOption || isLoadingIntroSelected) {
            return;
        }

        completePaymentOnboarding(CONST.PAYMENT_SELECTED.PBA, introSelected, isSelfTourViewed, betas, currentUserAccountID);
        onItemSelected(CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT);
    }, [betas, currentUserAccountID, introSelected, isLoadingIntroSelected, isPersonalOnlyOption, isVisible, onItemSelected, isSelfTourViewed]);

    if (isPersonalOnlyOption) {
        return null;
    }

    return (
        <PopoverMenu
            isVisible={isVisible}
            onClose={() => {
                setRestoreFocusType(undefined);
                onClose();
            }}
            anchorPosition={anchorPosition}
            anchorAlignment={anchorAlignment}
            anchorRef={anchorRef}
            onItemSelected={() => {