Merge pull request #32423 from dukenv0307/fix/32228

Personal bank account option is not present in Pay with Expensify menu
Expensify · Dec 14, 2023 · 78ad3f9 · 78ad3f9
2 parents b4d1777 + eaf6d53
commit 78ad3f9
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 2 deletions.
diff --git a/src/components/AddPaymentMethodMenu.js b/src/components/AddPaymentMethodMenu.js
@@ -48,6 +48,9 @@ const propTypes = {
         /** Currently logged in user accountID */
         accountID: PropTypes.number,
     }),
+
+    /** Whether the personal bank account option should be shown */
+    shouldShowPersonalBankAccountOption: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -59,9 +62,10 @@ const defaultProps = {
     },
     anchorRef: () => {},
     session: {},
+    shouldShowPersonalBankAccountOption: false,
 };
 
-function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignment, anchorRef, iouReport, onItemSelected, session}) {
+function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignment, anchorRef, iouReport, onItemSelected, session, shouldShowPersonalBankAccountOption}) {
     const {translate} = useLocalize();
 
     // Users can choose to pay with business bank account in case of Expense reports or in case of P2P IOU report
@@ -70,6 +74,8 @@ function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignme
         ReportUtils.isExpenseReport(iouReport) ||
         (ReportUtils.isIOUReport(iouReport) && !ReportActionsUtils.hasRequestFromCurrentAccount(lodashGet(iouReport, 'reportID', 0), lodashGet(session, 'accountID', 0)));
 
+    const canUsePersonalBankAccount = shouldShowPersonalBankAccountOption || ReportUtils.isIOUReport(iouReport);
+
     return (
         <PopoverMenu
             isVisible={isVisible}
@@ -79,7 +85,7 @@ function AddPaymentMethodMenu({isVisible, onClose, anchorPosition, anchorAlignme
             anchorRef={anchorRef}
             onItemSelected={onClose}
             menuItems={[
-                ...(ReportUtils.isIOUReport(iouReport)
+                ...(canUsePersonalBankAccount
                     ? [
                           {
                               text: translate('common.personalBankAccount'),

diff --git a/src/components/KYCWall/BaseKYCWall.js b/src/components/KYCWall/BaseKYCWall.js
@@ -42,6 +42,7 @@ function KYCWall({
     source,
     userWallet,
     walletTerms,
+    shouldShowPersonalBankAccountOption,
 }) {
     const anchorRef = useRef(null);
     const transferBalanceButtonRef = useRef(null);
@@ -213,6 +214,7 @@ function KYCWall({
                     setShouldShowAddPaymentMenu(false);
                     selectPaymentMethod(item);
                 }}
+                shouldShowPersonalBankAccountOption={shouldShowPersonalBankAccountOption}
             />
             {children(continueAction, anchorRef)}
         </>

diff --git a/src/components/KYCWall/kycWallPropTypes.js b/src/components/KYCWall/kycWallPropTypes.js
@@ -62,6 +62,9 @@ const propTypes = {
 
     /** Callback for when a payment method has been selected */
     onSelectPaymentMethod: PropTypes.func,
+
+    /** Whether the personal bank account option should be shown */
+    shouldShowPersonalBankAccountOption: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -82,6 +85,7 @@ const defaultProps = {
     },
     shouldIncludeDebitCard: true,
     onSelectPaymentMethod: () => {},
+    shouldShowPersonalBankAccountOption: false,
 };
 
 export {propTypes, defaultProps};
diff --git a/src/components/MoneyRequestConfirmationList.js b/src/components/MoneyRequestConfirmationList.js
@@ -521,6 +521,7 @@ function MoneyRequestConfirmationList(props) {
                     horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT,
                     vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.BOTTOM,
                 }}
+                shouldShowPersonalBankAccountOption
             />
         ) : (
             <ButtonWithDropdownMenu

diff --git a/src/components/SettlementButton.js b/src/components/SettlementButton.js
@@ -81,6 +81,9 @@ const propTypes = {
         horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
         vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
     }),
+
+    /** Whether the personal bank account option should be shown */
+    shouldShowPersonalBankAccountOption: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -110,6 +113,7 @@ const defaultProps = {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.RIGHT, // caret for dropdown is at right, so horizontal anchor is at RIGHT
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
     },
+    shouldShowPersonalBankAccountOption: false,
 };
 
 function SettlementButton({
@@ -132,6 +136,7 @@ function SettlementButton({
     shouldHidePaymentOptions,
     shouldShowApproveButton,
     style,
+    shouldShowPersonalBankAccountOption,
 }) {
     const {translate} = useLocalize();
     const {isOffline} = useNetwork();
@@ -220,6 +225,7 @@ function SettlementButton({
             chatReportID={chatReportID}
             iouReport={iouReport}
             anchorAlignment={kycWallAnchorAlignment}
+            shouldShowPersonalBankAccountOption={shouldShowPersonalBankAccountOption}
         >
             {(triggerKYCFlow, buttonRef) => (
                 <ButtonWithDropdownMenu