Merge pull request #35327 from paultsimura/fix/34853-settlement-button

feat: Persist the latest selected payment option

Author: marcochavezf

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);
                         },
                     }))}

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}

src/libs/actions/IOU.js

@@ -3775,6 +3775,15 @@ 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});
+}
+
 export {
     setMoneyRequestParticipants,
     createDistanceRequest,
@@ -3835,4 +3844,5 @@ export {
     getIOUReportID,
     editMoneyRequest,
     navigateToStartStepIfScanFileCannotBeRead,
+    savePreferredPaymentMethod,
 };