Skip to content

Commit

Permalink
Merge pull request #35327 from paultsimura/fix/34853-settlement-button
Browse files Browse the repository at this point in the history
feat: Persist the latest selected payment option
  • Loading branch information
marcochavezf authored Feb 1, 2024
2 parents dc3c396 + 3d850af commit ba6c19a
Show file tree
Hide file tree
Showing 3 changed files with 23 additions and 4 deletions.
5 changes: 5 additions & 0 deletions src/components/ButtonWithDropdownMenu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -72,6 +75,7 @@ function ButtonWithDropdownMenu({
buttonRef,
onPress,
options,
onOptionSelected,
}: ButtonWithDropdownMenuProps) {
const theme = useTheme();
const styles = useThemeStyles();
Expand Down Expand Up @@ -174,6 +178,7 @@ function ButtonWithDropdownMenu({
menuItems={options.map((item, index) => ({
...item,
onSelected: () => {
onOptionSelected?.(item);
setSelectedItemIndex(index);
},
}))}
Expand Down
12 changes: 8 additions & 4 deletions src/components/SettlementButton.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
Expand All @@ -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) {
Expand Down Expand Up @@ -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}
Expand Down
10 changes: 10 additions & 0 deletions src/libs/actions/IOU.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -3835,4 +3844,5 @@ export {
getIOUReportID,
editMoneyRequest,
navigateToStartStepIfScanFileCannotBeRead,
savePreferredPaymentMethod,
};

0 comments on commit ba6c19a

Please sign in to comment.