[$250] IOU - Payment option not updated in IOU details when it changed on IOU preview

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: 9.0.49.0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/5087309
Issue reported by: Applause Internal Team

Action Performed:

Precondition: user B sent an IOU to user A

1. Go to https://staging.new.expensify.com/ and log in as user A
2. Navigate to 1:1 chat with user B
3. On the IOU preview select a payment option different from the default one
4. Open the IOU details

Expected Result:

The payment option is the same on both IOU preview and IOU details

Actual Result:

The payment option does get changed on the IOU details.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6635794_1729028836280.Recording__866.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021848758425092470966
• Upwork Job ID: 1848758425092470966
• Last Price Increase: 2024-10-22

Issue Owner

Current Issue Owner: @Ollyws

[melvin-bot]

Triggered auto assignment to @garrettmknight (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[IuliiaHerets]

@garrettmknight FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[FitseTLT]

Edited by proposal-police: This proposal was edited at 2024-10-16 16:24:58 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

IOU - Payment option not updated in IOU details when it changed on IOU preview

What is the root cause of that problem?

We are currently only saving the payment preference if the report is linked to some policy so it won't save the preference for a DM as in this case.

App/src/components/SettlementButton/index.tsx

Lines 247 to 250 in 4a25c36

	if (policyID === '-1') {
	return;
	}
	savePreferredPaymentMethod(policyID, option.value);

What changes do you think we should make in order to solve the problem?

We can save the payment preference with chatReportID as the key/id.

App/src/components/SettlementButton/index.tsx

Lines 247 to 250 in 4a25c36

	if (policyID === '-1') {
	return;
	}
	savePreferredPaymentMethod(policyID, option.value);

  if (policyID === '-1' && !chatReportID) {
                            return;
                        }
                        savePreferredPaymentMethod(policyID !== '-1' ? policyID : chatReportID, option.value);
                   

App/src/components/SettlementButton/index.tsx

Line 68 in 4a25c36

const [lastPaymentMethod = '-1', lastPaymentMethodResult] = useOnyx(ONYXKEYS.NVP_LAST_PAYMENT_METHOD, {selector: (paymentMethod) => paymentMethod?.[policyID]});

const [lastPaymentMethod = '-1', lastPaymentMethodResult] = useOnyx(ONYXKEYS.NVP_LAST_PAYMENT_METHOD, {
        selector: (paymentMethod) => paymentMethod?.[policyID === '-1' ? chatReportID : policyID],
    });

App/src/libs/actions/IOU.ts

Line 6800 in 4a25c36

value: {[iouReport?.policyID ?? '-1']: paymentMethodType},

        value: {[iouReport?.policyID ?? chatReport.reportID ?? '-1']: paymentMethodType},

What alternative solutions did you explore? (Optional)

We can also save one payment preference for all non-workspace chats and in that case we can save the preference with the same key for all chats and access it with the key accordingly.

[truph01]

Edited by proposal-police: This proposal was edited at 2024-10-17 12:40:22 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

The payment option does get changed on the IOU details.

What is the root cause of that problem?

• We already have a logic to save the prefered payment option method:

App/src/components/SettlementButton/index.tsx

Lines 246 to 251 in 4a25c36

	onOptionSelected={(option) => {
	if (policyID === '-1') {
	return;
	}
	savePreferredPaymentMethod(policyID, option.value);
	}}

• With the DM, the above policyID is _FAKE_, so we stored something like _FAKE_ : "Expensify".

• Then we open the IOU detail. In here, we get the saved preferred payment method:

App/src/components/SettlementButton/index.tsx

Line 68 in 4a25c36

const [lastPaymentMethod = '-1', lastPaymentMethodResult] = useOnyx(ONYXKEYS.NVP_LAST_PAYMENT_METHOD, {selector: (paymentMethod) => paymentMethod?.[policyID]});

• In here, the policyID point to the personal policy of the user B - who sent the expense. As a result, the lastPaymentMethod is undefined and we fallback to -1.

What changes do you think we should make in order to solve the problem?

• In there, introduce a new variable to check whether the report belongs to workspace:

    const policyEmployeeAccountIDs = policyID ? getPolicyEmployeeAccountIDs(policyID) : [];
    const reportBelongsToWorkspace = policyID ? ReportUtils.doesReportBelongToWorkspace(chatReport, policyEmployeeAccountIDs, policyID) : false;

• And update:

App/src/components/SettlementButton/index.tsx

Line 250 in 4a25c36

savePreferredPaymentMethod(policyID, option.value);

                        const policyIDKey = reportBelongsToWorkspace ? policyID : CONST.POLICY.ID_FAKE;
                        savePreferredPaymentMethod(policyIDKey, option.value);

• Finally, update the useOnyx function:
  

  App/src/components/SettlementButton/index.tsx

  Line 68 in 4a25c36

  const [lastPaymentMethod = '-1', lastPaymentMethodResult] = useOnyx(ONYXKEYS.NVP_LAST_PAYMENT_METHOD, {selector: (paymentMethod) => paymentMethod?.[policyID]});

    const policyEmployeeAccountIDs = policyID ? getPolicyEmployeeAccountIDs(policyID) : [];
    const reportBelongsToWorkspace = policyID ? ReportUtils.doesReportBelongToWorkspace(chatReport, policyEmployeeAccountIDs, policyID) : false;
    const policyIDKey = reportBelongsToWorkspace ? policyID : CONST.POLICY.ID_FAKE;
    const [lastPaymentMethod = '-1', lastPaymentMethodResult] = useOnyx(ONYXKEYS.NVP_LAST_PAYMENT_METHOD, {selector: (paymentMethod) => paymentMethod?.[policyIDKey]});
 

• Same logic should be applied in here:
  

  App/src/libs/actions/IOU.ts

  Line 6800 in 4a25c36

  value: {[iouReport?.policyID ?? '-1']: paymentMethodType},

  
  to make sure the paymentMethodType data is saved with the proper policy key.

What alternative solutions did you explore? (Optional)

• Beside saving the prefered payment method in case of DM to CONST.POLICY.ID_FAKE, we can also save to personal policyID of the current user or another key, such as 'default', 'dm', ...

[truph01]

Proposal updated

[melvin-bot]

@garrettmknight Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021848758425092470966

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @Ollyws (External)

[garrettmknight]

This is an inconsistency we can fix, but it's not attached to any project so if it requires any internal/backend changes, I'll close, but if we can complete entirely externally I'm cool with fixing.

[FitseTLT]

This is an inconsistency we can fix, but it's not attached to any project so if it requires any internal/backend changes, I'll close, but if we can complete entirely externally I'm cool with fixing.

It's totally about saving preference in FE @garrettmknight don't worry 👍

[Ollyws]

In here, the policyID point to the personal policy of the user B - who sent the expense. As a result, the lastPaymentMethod is undefined and we fallback to -1.

@truph01
For me the problem is occuring because the chat report has no policyID, while the IOU report for some reason does despite it not being on a workspace.
Why does the IOU report have a policyID here atall?

Screen.Recording.2024-10-23.at.15.57.08.mov