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 contributors@expensify.com 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
• [x] iOS: Standalone
• [x] iOS: HybridApp
• [ ] iOS: mWeb Safari
• [x] MacOS: Chrome / Safari
• [ ] MacOS: Desktop

Screenshots/Videos

https://github.com/user-attachments/assets/15110240-7269-48c3-8a57-0cd438fdea6c

View all open jobs on GitHub

[melvin-bot[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. https://github.com/Expensify/App/blob/4a25c36e50b58ef9e5ba8b63cf32132f95a0b005/src/components/SettlementButton/index.tsx#L247-L250

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. https://github.com/Expensify/App/blob/4a25c36e50b58ef9e5ba8b63cf32132f95a0b005/src/components/SettlementButton/index.tsx#L247-L250

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

https://github.com/Expensify/App/blob/4a25c36e50b58ef9e5ba8b63cf32132f95a0b005/src/components/SettlementButton/index.tsx#L68

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

https://github.com/Expensify/App/blob/4a25c36e50b58ef9e5ba8b63cf32132f95a0b005/src/libs/actions/IOU.ts#L6800

        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:

https://github.com/Expensify/App/blob/4a25c36e50b58ef9e5ba8b63cf32132f95a0b005/src/components/SettlementButton/index.tsx#L246-L251

• 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:

https://github.com/Expensify/App/blob/4a25c36e50b58ef9e5ba8b63cf32132f95a0b005/src/components/SettlementButton/index.tsx#L68

• 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:

https://github.com/Expensify/App/blob/4a25c36e50b58ef9e5ba8b63cf32132f95a0b005/src/components/SettlementButton/index.tsx#L250

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

• Finally, update the useOnyx function: https://github.com/Expensify/App/blob/4a25c36e50b58ef9e5ba8b63cf32132f95a0b005/src/components/SettlementButton/index.tsx#L68

    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: https://github.com/Expensify/App/blob/4a25c36e50b58ef9e5ba8b63cf32132f95a0b005/src/libs/actions/IOU.ts#L6800 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