From cb0f172efcff65f31898f60dee6b13dda5d72fd7 Mon Sep 17 00:00:00 2001
From: Pavlo Tsimura <paultsimura@gmail.com>
Date: Mon, 29 Jan 2024 18:58:27 +0100
Subject: [PATCH 1/2] Persist the latest selected payment option

---
 src/components/ButtonWithDropdownMenu.tsx |  5 +++++
 src/components/SettlementButton.js        | 12 ++++++++----
 src/libs/actions/IOU.js                   |  5 +++++
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/src/components/ButtonWithDropdownMenu.tsx b/src/components/ButtonWithDropdownMenu.tsx
index 466c68229a32..676912de6b60 100644
--- a/src/components/ButtonWithDropdownMenu.tsx
+++ b/src/components/ButtonWithDropdownMenu.tsx
@@ -32,6 +32,9 @@ type ButtonWithDropdownMenuProps = {
     /** Callback to execute when the main button is pressed */
     onPress: (event: GestureResponderEvent | KeyboardEvent | undefined, value: string) => void;
 
+    /** Callback to execute when a dropdown option is selected */
+    onOptionSelected?: (option: DropdownOption) => void;
+
     /** Call the onPress function on main button when Enter key is pressed */
     pressOnEnter?: boolean;
 
@@ -72,6 +75,7 @@ function ButtonWithDropdownMenu({
     buttonRef,
     onPress,
     options,
+    onOptionSelected,
 }: ButtonWithDropdownMenuProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -174,6 +178,7 @@ function ButtonWithDropdownMenu({
                     menuItems={options.map((item, index) => ({
                         ...item,
                         onSelected: () => {
+                            onOptionSelected?.(item);
                             setSelectedItemIndex(index);
                         },
                     }))}
diff --git a/src/components/SettlementButton.js b/src/components/SettlementButton.js
index 0c8e193af4cc..493b8767ee9b 100644
--- a/src/components/SettlementButton.js
+++ b/src/components/SettlementButton.js
@@ -177,8 +177,9 @@ function SettlementButton({
             return [approveButtonOption];
         }
 
-        // To achieve the one tap pay experience we need to choose the correct payment type as default,
-        // if user already paid for some request or expense, let's use the last payment method or use default.
+        // To achieve the one tap pay experience we need to choose the correct payment type as default.
+        // If the user has previously chosen a specific payment option or paid for some request or expense,
+        // let's use the last payment method or use default.
         const paymentMethod = nvp_lastPaymentMethod[policyID] || '';
         if (canUseWallet) {
             buttonOptions.push(paymentMethods[CONST.IOU.PAYMENT_TYPE.EXPENSIFY]);
@@ -192,12 +193,14 @@ function SettlementButton({
             buttonOptions.push(approveButtonOption);
         }
 
-        // Put the preferred payment method to the front of the array so its shown as default
+        // Put the preferred payment method to the front of the array, so it's shown as default
         if (paymentMethod) {
             return _.sortBy(buttonOptions, (method) => (method.value === paymentMethod ? 0 : 1));
         }
         return buttonOptions;
-    }, [currency, formattedAmount, iouReport, nvp_lastPaymentMethod, policyID, translate, shouldHidePaymentOptions, shouldShowApproveButton]);
+        // We don't want to reorder the options when the preferred payment method changes while the button is still visible
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [currency, formattedAmount, iouReport, policyID, translate, shouldHidePaymentOptions, shouldShowApproveButton]);
 
     const selectPaymentType = (event, iouPaymentType, triggerKYCFlow) => {
         if (iouPaymentType === CONST.IOU.PAYMENT_TYPE.EXPENSIFY || iouPaymentType === CONST.IOU.PAYMENT_TYPE.VBBA) {
@@ -235,6 +238,7 @@ function SettlementButton({
                     onPress={(event, iouPaymentType) => selectPaymentType(event, iouPaymentType, triggerKYCFlow)}
                     pressOnEnter={pressOnEnter}
                     options={paymentButtonOptions}
+                    onOptionSelected={(option) => IOU.savePreferredPaymentMethod(policyID, option.value)}
                     style={style}
                     buttonSize={buttonSize}
                     anchorAlignment={paymentMethodDropdownAnchorAlignment}
diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 5297d9aa4463..580053998c3c 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -3749,6 +3749,10 @@ function navigateToStartStepIfScanFileCannotBeRead(receiptFilename, receiptPath,
     FileUtils.readFileAsync(receiptPath, receiptFilename, onSuccess, onFailure);
 }
 
+function savePreferredPaymentMethod(policyID, paymentMethod) {
+    Onyx.merge(`${ONYXKEYS.NVP_LAST_PAYMENT_METHOD}`, {[policyID]: paymentMethod});
+}
+
 export {
     setMoneyRequestParticipants,
     createDistanceRequest,
@@ -3809,4 +3813,5 @@ export {
     getIOUReportID,
     editMoneyRequest,
     navigateToStartStepIfScanFileCannotBeRead,
+    savePreferredPaymentMethod,
 };

From 0b0070a636864f131d7228a5e0b6f086677f9020 Mon Sep 17 00:00:00 2001
From: Pavlo Tsimura <paultsimura@gmail.com>
Date: Mon, 29 Jan 2024 19:15:12 +0100
Subject: [PATCH 2/2] Add JSDoc

---
 src/libs/actions/IOU.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/libs/actions/IOU.js b/src/libs/actions/IOU.js
index 580053998c3c..8db42d62dab9 100644
--- a/src/libs/actions/IOU.js
+++ b/src/libs/actions/IOU.js
@@ -3749,6 +3749,11 @@ function navigateToStartStepIfScanFileCannotBeRead(receiptFilename, receiptPath,
     FileUtils.readFileAsync(receiptPath, receiptFilename, onSuccess, onFailure);
 }
 
+/**
+ * Save the preferred payment method for a policy
+ * @param {String} policyID
+ * @param {String} paymentMethod
+ */
 function savePreferredPaymentMethod(policyID, paymentMethod) {
     Onyx.merge(`${ONYXKEYS.NVP_LAST_PAYMENT_METHOD}`, {[policyID]: paymentMethod});
 }