[HOLD for payment 2024-07-26] [$250] Billable - Unable to adjust billable toggle for split scan and toggle is always disabled after split

[lanitochka17]

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.4-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/4695791
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

• "Re-bill expenses to clients" settings is set to "Default to billable" on Old Dot

1. Go to staging.new.expensify.com
2. Go to workspace chat
3. Go to + > Split expense > Scan
4. Submit a split scan expense
5. While the receipt is scanning, click on the split preview
6. Click on the billable toggle
7. Enter the required info and split the expense with billable enabled
8. Click on the split preview

Expected Result:

In Step 6, user should be able to toggle off and on the billable toggle
In Step 8, the split preview will show that billable is enabled because the expense is split with billable enabled

Actual Result:

In Step 6, user is unable to toggle off and on the billable toggle
In Step 8, the split preview shows that billable is disabled when the expense is split with billable enabled

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6533372_1720119370817.20240705_024926.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01126e533e614fb9eb
• Upwork Job ID: 1810482612250493622
• Last Price Increase: 2024-07-09
• Automatic offers:
• nkdengineer | Contributor | 103082578
• nyomanjyotisa | Contributor | 103348168

Issue Owner

Current Issue Owner: @parasharrajat

[melvin-bot]

Triggered auto assignment to @mallenexpensify (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.

[lanitochka17]

@mallenexpensify 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

[nyomanjyotisa]

Proposal

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

Problem 1: Unable to adjust billable toggle for split scan
Problem 2: Toggle is always disabled after split

What is the root cause of that problem?

• Problem 1 root cause
  We didn't define the onToggleBillable on MoneyRequestConfirmationList here:
  

  App/src/pages/iou/SplitBillDetailsPage.tsx

  Line 124 in c5eafd3

  <MoneyRequestConfirmationList

  
  So no action was performed on the billable toggle clicked

• Problem 2 root cause
  No billable param on CompleteSplitBill API request here

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

• Problem 1 solution
  Create setBillable function here to update the draft split transaction

    const setBillable = useCallback(
        (billable: boolean) => {
            const transactionID = transaction?.transactionID;
            if (transactionID) {
                IOU.setDraftSplitTransaction(transactionID, {billable});
            }
        },
        [reportID],
    );

Add onToggleBillable={setBillable} to the MoneyRequestConfirmationList here

RESULT

New-Expensify.6.mp4

• Problem 2 solution

Add billable on the param type here

    billable?: boolean;

Extract the billable field from the updatedTransaction object using the ReportUtils.getTransactionDetails function, just like the other fields. then include the billable field in the parameters object when constructing the CompleteSplitBillParams here

 billable: transactionBillable,

RESULT

What alternative solutions did you explore? (Optional)

[nkdengineer]

Proposal

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

In Step 6, user is unable to toggle off and on the billable toggle
In Step 8, the split preview shows that billable is disabled when the expense is split with billable enabled

What is the root cause of that problem?

1. We don't pass onToggleBillable to update the billable in draft transaction when we toggle billable in SplitBillDetailsPage as we do in IOURequestStepConfirmation here

App/src/pages/iou/SplitBillDetailsPage.tsx

Line 124 in b0947e0

<MoneyRequestConfirmationList

2. We don't pass billable param to CompleteSplitBill API and then BE returns billable as false by default.

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

1. Pass onToggleBillable prop to MoneyRequestConfirmationList to update the billable of draft transaction

onToggleBillable={(billable) => {
    IOU.setDraftSplitTransaction(transaction?.transactionID ?? '-1', {billable})
}}

App/src/pages/iou/SplitBillDetailsPage.tsx

Line 124 in b0947e0

<MoneyRequestConfirmationList

2. Get the billable here and pass it as parameter of CompleteSplitBill API here. I tested and when we pass the correct billable param, BE returns billable correctly as the value that we passed in the API.

What alternative solutions did you explore? (Optional)

NA

[melvin-bot]

@mallenexpensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

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

[melvin-bot]

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