feat: Persist the latest selected payment option

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

@@ -3751,6 +3751,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,
@@ -3811,4 +3820,5 @@ export {
  getIOUReportID,
  editMoneyRequest,
  navigateToStartStepIfScanFileCannotBeRead,
+ savePreferredPaymentMethod,
 };