[HOLD for payment 2024-12-20] [HOLD for payment 2024-12-19] [$250] Updating report action button in the case of held expenses

[JmillsExpensify]

Based on this internal Slack discussion, we've decided that the approve button should be grey when all expenses on a report are held. This new feature makes sense for a couple of reasons:

• We already use this grey button pattern for Submit when a workspace has automatic scheduled submit settings
• When all expenses on a report a held, then the report is not GBRed for the admin, and as a result there is no required action on their part.
• Conversely, when a report has a mix of held and non-held expenses, we do show GBR for the admin because they can (and probably should) action on the expenses that can be actioned on.

As a result, let's do the following:

1. In the report thread, let's make the Approve or Pay buttons grey when all expenses on that report are held. Here's an example.
   

2. On the Search page, let's do the exact same thing, should a user end up seeing/finding this reports there instead.
   

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021857475710560245957
• Upwork Job ID: 1857475710560245957
• Last Price Increase: 2024-11-15
• Automatic offers:
• NJ-2020 | Contributor | 105028413

Issue Owner

Current Issue Owner: @JmillsExpensify

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

Current assignee @JmillsExpensify is eligible for the NewFeature assigner, not assigning anyone new.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dubielzyk-expensify (NewFeature)

[JmillsExpensify]

Jon - please correct anything you don't agree with or would like to tweak in the OP. Once we're good, then I'll open up this issue to the community. Or @luacmartins let me know if this is better to take internal.

[daledah]

Edited by proposal-police: This proposal was edited at 2024-11-14 14:51:31 UTC.

Proposal

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

What is the root cause of that problem?

New feature

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

1. Create the new util function named areAllTransactionsOnHold, it's use isOnHold inside
2. In ReportPreview create the new variable:

const shouldDisablePayment = areAllTransactionsOnHold(transactions)

3. Pass shouldDisablePayment to AnimatedSettlementButton and SettlementButton
4. In SettlementButton, use shouldDisablePayment to disable all options in paymentButtonOptions and isDisabled

Do the same in MoneyReportHeader and other places

What alternative solutions did you explore? (Optional)

[github-actions]

[@username] Your proposal will be dismissed because you did not follow the proposal template.

[luacmartins]

I think this can be external

[dubielzyk-expensify]

Feels right to me. Just minor update to making sure the search icon is still there and the system message is correct:

[NJ-2020]

Proposal

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

Show a grey approve/pay button when all expenses on a report are held

What is the root cause of that problem?

New feature

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

• Create new variable inside ReportPreview to check if there's hold transactions using ReportUtils.hasHeldExpenses function

const hasHeldExpenses = ReportUtils.hasHeldExpenses(iouReportID);

• Create new success prop inside Settlement button to determine if we should use success style for the button
  

  App/src/components/SettlementButton/index.tsx

  Lines 238 to 239 in a6f1348

  	<ButtonWithDropdownMenu<PaymentType>
  	success

• We should use success style if there's no held expenses, else we will use the gray style

// ReportPreview.tsx
{shouldShowSettlementButton && (
    <AnimatedSettlementButton
        success={!hasHeldExpenses}
        onlyShowPayElsewhere={onlyShowPayElsewhere}


// SettlementButton.tsx
function SettlementButton({
    success = true,
    ...
}) {
    ...
    return (
        ...
        {(triggerKYCFlow, buttonRef) => (
            <ButtonWithDropdownMenu<PaymentType>
                success={success}
    )
}

And we can do the same approach for MoneyReportHeader and we will use moneyRequestReport?.reportID for iouReportID

const hasHeldExpenses = ReportUtils.hasHeldExpenses(moneyRequestReport?.reportID);

And for the Search page, we will do the same approach we will add new success prop to ActionCell component and we will pass true if it's not on hold

App/src/components/SelectionList/Search/TransactionListItemRow.tsx

Lines 442 to 443 in a6f1348

	<ActionCell
	action={item.action}

App/src/components/SelectionList/Search/ActionCell.tsx

Line 58 in a6f1348

success

// TransactionListItemRow.tsx
const isOnHold = useMemo(() => TransactionUtils.isOnHold(item), [item]);

<ActionCell
    success={!isOnHold}

// ActionCell.tsx
function ActionCell({success = true, action = CONST.SEARCH.ACTION_TYPES.VIEW, isLargeScreenWidth = true, isSelected = false, goToItem, isChildListItem = false, parentAction = ''}: ActionCellProps) {
    ...
    <Button
        text={translate(actionTranslationsMap[CONST.SEARCH.ACTION_TYPES.VIEW])}
        success={success}    

Btw i am not seeing any approve button inside the search page, but if there's we can do like the above one

Result

Screen.Recording.2024-11-14.at.21.14.41.mov

What alternative solutions did you explore? (Optional)

[bernhardoj]

Proposal

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

Show a gray approve/pay button if all the expenses are on hold.

What is the root cause of that problem?

Feature request.

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

First, create a new prop for SettlementButton called shouldUseSuccessStyle with a default value of true and use it as the success value here.

App/src/components/SettlementButton/index.tsx

Lines 238 to 239 in a6f1348

	<ButtonWithDropdownMenu<PaymentType>
	success

In MoneyReportHeader, pass !hasOnlyHeldExpenses to shouldUseSuccessStyle.

App/src/components/MoneyReportHeader.tsx

Lines 361 to 362 in a6f1348

	<SettlementButton
	onlyShowPayElsewhere={onlyShowPayElsewhere}

shouldUseSuccessStyle={!hasOnlyHeldExpenses}

If we want to apply to report preview settlement button too, we can apply it the same here.

App/src/components/ReportActionItem/ReportPreview.tsx

Lines 538 to 539 in a6f1348

	<AnimatedSettlementButton
	onlyShowPayElsewhere={onlyShowPayElsewhere}

For search page, there is no action for approve/pay.

App/src/components/SelectionList/Search/ActionCell.tsx

Lines 15 to 20 in a6f1348

	const actionTranslationsMap: Record<SearchTransactionAction, TranslationPaths> = {
	view: 'common.view',
	review: 'common.review',
	done: 'common.done',
	paid: 'iou.settledExpensify',
	};

[melvin-bot]

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

[melvin-bot]

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

[mananjadhav]

Will review this by tomorrow.

[JmillsExpensify]

Thanks, it'd be good to get this one going as it's affecting production customers.

[quinthar]

Yep, this is a good one!

[mananjadhav]

@NJ-2020's proposal looks good to me.

🎀 👀 🎀 C+ reviewed.

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.75-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] fix: grey pay button held expense for small screen  #53921

If no regressions arise, payment will be issued on 2024-12-20. 🎊

For reference, here are some details about the assignees on this issue:

• @mananjadhav requires payment through NewDot Manual Requests
• @NJ-2020 requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@mananjadhav] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@JmillsExpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[JmillsExpensify]

Payment summary:

• $125 @mananjadhav via New Expensify
• $125 @NJ-2020 via Upwork

[JmillsExpensify]

Contributor has been paid, so all that remains is the BZ checklist.

[melvin-bot]

@JmillsExpensify, @mananjadhav, @luacmartins, @NJ-2020, @dubielzyk-expensify Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@JmillsExpensify, @mananjadhav, @luacmartins, @NJ-2020, @dubielzyk-expensify Huh... This is 4 days overdue. Who can take care of this?

[mananjadhav]

Apologies, I was out sick, still getting back.

I think this would be more of a feature request than a bug. We're also reverting this in a separate issue so I think we don't need a regression test here.

@JmillsExpensify I think this was involved in a regression.

[melvin-bot]

@JmillsExpensify, @mananjadhav, @luacmartins, @NJ-2020, @dubielzyk-expensify 8 days overdue is a lot. Should this be a Weekly issue? If so, feel free to change it!

[JmillsExpensify]

@mananjadhav so you're saying that the correct payment summary is $125 each?

[mananjadhav]

Yes @JmillsExpensify. The payout should be $125 each.

[JmillsExpensify]

Updated above and processed the update via Upwork as well.

[NJ-2020]

Done

[JmillsExpensify]

Thanks so much for the quick response!

[JmillsExpensify]

@mananjadhav I'm going to close this for your part, though don't forget the BZ checklist before requesting payment.

[mananjadhav]

I think this would be more of a feature request than a bug. We're also reverting this in a separate issue so I think we don't need a regression test here.

@JmillsExpensify Considering this is more towards a feature request and also being reverted, do we need a BZ checklist here?

[garrettmknight]

$250 approved for @mananjadhav