Merge pull request #49345 from ZhenjaHorbach/fix-bug-with-payment-opt…

…ion-is-not-selected Fix bug with Payment option is not selected
Expensify · Sep 18, 2024 · 69c0358 · 69c0358
2 parents 3657a67 + 3c8ad57
commit 69c0358
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 37 deletions.
diff --git a/src/components/MoneyReportHeader.tsx b/src/components/MoneyReportHeader.tsx
@@ -145,22 +145,25 @@ function MoneyReportHeader({policy, report: moneyRequestReport, transactionThrea
     const {isDelegateAccessRestricted, delegatorEmail} = useDelegateUserDetails();
     const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);
 
-    const confirmPayment = (type?: PaymentMethodType | undefined, payAsBusiness?: boolean) => {
-        if (!type || !chatReport) {
-            return;
-        }
-        setPaymentType(type);
-        setRequestType(CONST.IOU.REPORT_ACTION_TYPE.PAY);
-        if (isDelegateAccessRestricted) {
-            setIsNoDelegateAccessMenuVisible(true);
-        } else if (isAnyTransactionOnHold) {
-            setIsHoldMenuVisible(true);
-        } else if (ReportUtils.isInvoiceReport(moneyRequestReport)) {
-            IOU.payInvoice(type, chatReport, moneyRequestReport, payAsBusiness);
-        } else {
-            IOU.payMoneyRequest(type, chatReport, moneyRequestReport, true);
-        }
-    };
+    const confirmPayment = useCallback(
+        (type?: PaymentMethodType | undefined, payAsBusiness?: boolean) => {
+            if (!type || !chatReport) {
+                return;
+            }
+            setPaymentType(type);
+            setRequestType(CONST.IOU.REPORT_ACTION_TYPE.PAY);
+            if (isDelegateAccessRestricted) {
+                setIsNoDelegateAccessMenuVisible(true);
+            } else if (isAnyTransactionOnHold) {
+                setIsHoldMenuVisible(true);
+            } else if (ReportUtils.isInvoiceReport(moneyRequestReport)) {
+                IOU.payInvoice(type, chatReport, moneyRequestReport, payAsBusiness);
+            } else {
+                IOU.payMoneyRequest(type, chatReport, moneyRequestReport, true);
+            }
+        },
+        [chatReport, isAnyTransactionOnHold, isDelegateAccessRestricted, moneyRequestReport],
+    );
 
     const confirmApproval = () => {
         setRequestType(CONST.IOU.REPORT_ACTION_TYPE.APPROVE);

diff --git a/src/components/ReportActionItem/ReportPreview.tsx b/src/components/ReportActionItem/ReportPreview.tsx
@@ -199,26 +199,29 @@ function ReportPreview({
     const [isNoDelegateAccessMenuVisible, setIsNoDelegateAccessMenuVisible] = useState(false);
 
     const stopAnimation = useCallback(() => setIsPaidAnimationRunning(false), []);
-    const confirmPayment = (type: PaymentMethodType | undefined, payAsBusiness?: boolean) => {
-        if (!type) {
-            return;
-        }
-        setPaymentType(type);
-        setRequestType(CONST.IOU.REPORT_ACTION_TYPE.PAY);
-        if (isDelegateAccessRestricted) {
-            setIsNoDelegateAccessMenuVisible(true);
-        } else if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) {
-            setIsHoldMenuVisible(true);
-        } else if (chatReport && iouReport) {
-            setIsPaidAnimationRunning(true);
-            HapticFeedback.longPress();
-            if (ReportUtils.isInvoiceReport(iouReport)) {
-                IOU.payInvoice(type, chatReport, iouReport, payAsBusiness);
-            } else {
-                IOU.payMoneyRequest(type, chatReport, iouReport);
+    const confirmPayment = useCallback(
+        (type: PaymentMethodType | undefined, payAsBusiness?: boolean) => {
+            if (!type) {
+                return;
             }
-        }
-    };
+            setPaymentType(type);
+            setRequestType(CONST.IOU.REPORT_ACTION_TYPE.PAY);
+            if (isDelegateAccessRestricted) {
+                setIsNoDelegateAccessMenuVisible(true);
+            } else if (ReportUtils.hasHeldExpenses(iouReport?.reportID)) {
+                setIsHoldMenuVisible(true);
+            } else if (chatReport && iouReport) {
+                setIsPaidAnimationRunning(true);
+                HapticFeedback.longPress();
+                if (ReportUtils.isInvoiceReport(iouReport)) {
+                    IOU.payInvoice(type, chatReport, iouReport, payAsBusiness);
+                } else {
+                    IOU.payMoneyRequest(type, chatReport, iouReport);
+                }
+            }
+        },
+        [chatReport, iouReport, isDelegateAccessRestricted],
+    );
 
     const confirmApproval = () => {
         setRequestType(CONST.IOU.REPORT_ACTION_TYPE.APPROVE);

diff --git a/src/components/SettlementButton/index.tsx b/src/components/SettlementButton/index.tsx
@@ -18,6 +18,7 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {PaymentMethodType} from '@src/types/onyx/OriginalMessage';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 import type SettlementButtonProps from './types';
 
 type KYCFlowEvent = GestureResponderEvent | KeyboardEvent | undefined;
@@ -62,7 +63,8 @@ function SettlementButton({
     const {isOffline} = useNetwork();
     // The app would crash due to subscribing to the entire report collection if chatReportID is an empty string. So we should have a fallback ID here.
     const [chatReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${chatReportID || -1}`);
-    const [lastPaymentMethod = '-1'] = useOnyx(ONYXKEYS.NVP_LAST_PAYMENT_METHOD, {selector: (paymentMethod) => paymentMethod?.[policyID]});
+    const [lastPaymentMethod = '-1', lastPaymentMethodResult] = useOnyx(ONYXKEYS.NVP_LAST_PAYMENT_METHOD, {selector: (paymentMethod) => paymentMethod?.[policyID]});
+    const isLoadingLastPaymentMethod = isLoadingOnyxValue(lastPaymentMethodResult);
     const [policy] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${policyID}`);
     const isInvoiceReport = (!isEmptyObject(iouReport) && ReportUtils.isInvoiceReport(iouReport)) || false;
     const shouldShowPaywithExpensifyOption = !shouldHidePaymentOptions && policy?.reimbursementChoice !== CONST.POLICY.REIMBURSEMENT_CHOICES.REIMBURSEMENT_MANUAL;
@@ -154,9 +156,11 @@ function SettlementButton({
             return buttonOptions.sort((method) => (method.value === lastPaymentMethod ? -1 : 0));
         }
         return buttonOptions;
-        // We don't want to reorder the options when the preferred payment method changes while the button is still visible
+        // We don't want to reorder the options when the preferred payment method changes while the button is still visible except for component initialization when the last payment method is not initialized yet.
+        // We need to be sure that onPress should be wrapped in an useCallback to prevent unnecessary updates.
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [
+        isLoadingLastPaymentMethod,
         iouReport,
         translate,
         formattedAmount,