[PAYMENT 12/25 regression] [$250] Feature Request: Implement to use a 👍icon next to approved report preview

@youssef-lr

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: n/a
Reproducible in staging?: n/a
Reproducible in production?: n/a
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @youssef-lr
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1727409632797909

Action Performed:

Have an approved expense report
Open the report

Expected Result:

Should have some indication with icon for the report is approved

Actual Result:

Implement to use a 👍:skin-tone-3: icon next to approved report preview, similar to how we display a checkmark next to paid reports.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021839674890714199459
Upwork Job ID: 1839674890714199459
Last Price Increase: 2024-09-27
Automatic offers:

situchan | Reviewer | 104253538
Krishna2323 | Contributor | 104253539
DylanDylann | Contributor | 104775457

Issue Owner

Current Issue Owner: @mallenexpensify

@slafortune

Triggered auto assignment to @slafortune (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

⚠️ 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 ⚠️

@dannymcclain

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

@dubielzyk-expensify

Adding some design specs here for easier implementation:

The icon we want to use is our thumbs up icon—it can be found here: App/assets/images/thumbs-up.svg
The layout should copy what we already do for paid reports, just instead of a green checkmark icon, we want to use an icons colored thumbs up icon

Mockup:

cc @dubielzyk-expensify

@dannymcclain

Thanks @dannymcclain! That looks solid.

Edited by proposal-police: This proposal was edited at 2024-09-27 14:42:56 UTC.

Proposal 

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

Feature Request: Implement to use a 👍icon next to approved report preview

What is the root cause of that problem?

New feature

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

First we need to use isReportApproved to check if the report is approved or not. We are already using isReportApproved in ReportPreview, so we don't need to create a new variable.

App/src/libs/ReportUtils.ts

Lines 892 to 901 in 0856034

    
           /** 
        
            * Checks if the supplied report has been approved 
        
            */ 
        
           function isReportApproved(reportOrID: OnyxInputOrEntry<Report> | string, parentReportAction: OnyxEntry<ReportAction> = undefined): boolean { 
        
               const report = typeof reportOrID === 'string' ? ReportConnection.getAllReports()?.[`${ONYXKEYS.COLLECTION.REPORT}${reportOrID}`] ?? null : reportOrID; 
        
               if (!report) { 
        
                   return parentReportAction?.childStateNum === CONST.REPORT.STATE_NUM.APPROVED && parentReportAction?.childStatusNum === CONST.REPORT.STATUS_NUM.APPROVED; 
        
               } 
        
               return report?.stateNum === CONST.REPORT.STATE_NUM.APPROVED && report?.statusNum === CONST.REPORT.STATUS_NUM.APPROVED; 
        
           }

Then we can use Expensicons.ThumbsUp with specified color code and use it just like we have implemented for settled report

App/src/components/ReportActionItem/ReportPreview.tsx

Lines 489 to 496 in 53a11d7

    
           {iouSettled && ( 
        
               <Animated.View style={checkMarkStyle}> 
        
                   <Icon 
        
                       src={Expensicons.Checkmark} 
        
                       fill={theme.iconSuccessFill} 
        
                   /> 
        
               </Animated.View> 
        
           )}

We can create a new animation or we can use the similar animation used for paid icon.

We also need to make similar code changes in MoneyReportView & MoneyRequestPreview. We can also consider using checks like !isPartialHold & !isBillSplit

App/src/components/ReportActionItem/MoneyReportView.tsx

Lines 166 to 173 in 0856034

    
           {isSettled && !isPartiallyPaid && ( 
        
               <View style={[styles.defaultCheckmarkWrapper, styles.mh2]}> 
        
                   <Icon 
        
                       src={Expensicons.Checkmark} 
        
                       fill={theme.success} 
        
                   /> 
        
               </View> 
        
           )}

App/src/components/ReportActionItem/MoneyRequestPreview/MoneyRequestPreviewContent.tsx

Lines 373 to 380 in 0856034

    
           {ReportUtils.isSettled(iouReport?.reportID) && !isPartialHold && !isBillSplit && ( 
        
               <View style={styles.defaultCheckmarkWrapper}> 
        
                   <Icon 
        
                       src={Expensicons.Checkmark} 
        
                       fill={theme.iconSuccessFill} 
        
                   /> 
        
               </View> 
        
           )}

What alternative solutions did you explore? (Optional)

Result

@slafortune

@slafortune, the offer doesn't appear on my UpWork profile and I can't apply to the offer, maybe it's just created not sent to our profiles? This is my profile.

Alright - all fully paid now - Thanks everyone!!

Am I eligible for partial compensation?
I fully reviewed proposals and 🎀 here and I did first review on PR before going parental leave.

@Krishna2323

Payment Summary

Contributor: @Krishna2323 paid $125 via Upwork
Contributor+: @DylanDylann paid $125 via NewDot
Contributor+: @situchan paid $125 via NewDot

@situchan can you please accept the job below? Please reply here and tag me once you have.
https://www.upwork.com/jobs/~021976057036883323191

@mallenexpensify

@mallenexpensify there's already accepted contract - #49847 (comment). Can we use this one?

@situchan

@situchan paid but.. I paid $250 instead of $125. I requested a refund for $125. Please confirm here once the refund has been issues. Thx

How about paying $125 in #37152 instead of refund?

@mallenexpensify

I'll reassign this to @mallenexpensify since it seems like he's handling this

woah.. blast fro the past! Thanks Carlos. We're all sorted here, closing

Navigation Menu

Repository navigation

[PAYMENT 12/25 regression] [$250] Feature Request: Implement to use a 👍icon next to approved report preview #49847

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Result

85 remaining items

Payment Summary

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	/**
	* Checks if the supplied report has been approved
	*/
	function isReportApproved(reportOrID: OnyxInputOrEntry<Report> \| string, parentReportAction: OnyxEntry<ReportAction> = undefined): boolean {
	const report = typeof reportOrID === 'string' ? ReportConnection.getAllReports()?.[`${ONYXKEYS.COLLECTION.REPORT}${reportOrID}`] ?? null : reportOrID;
	if (!report) {
	return parentReportAction?.childStateNum === CONST.REPORT.STATE_NUM.APPROVED && parentReportAction?.childStatusNum === CONST.REPORT.STATUS_NUM.APPROVED;
	}
	return report?.stateNum === CONST.REPORT.STATE_NUM.APPROVED && report?.statusNum === CONST.REPORT.STATUS_NUM.APPROVED;
	}

	{iouSettled && (
	<Animated.View style={checkMarkStyle}>
	<Icon
	src={Expensicons.Checkmark}
	fill={theme.iconSuccessFill}
	/>
	</Animated.View>
	)}

	{isSettled && !isPartiallyPaid && (
	<View style={[styles.defaultCheckmarkWrapper, styles.mh2]}>
	<Icon
	src={Expensicons.Checkmark}
	fill={theme.success}
	/>
	</View>
	)}

	{ReportUtils.isSettled(iouReport?.reportID) && !isPartialHold && !isBillSplit && (
	<View style={styles.defaultCheckmarkWrapper}>
	<Icon
	src={Expensicons.Checkmark}
	fill={theme.iconSuccessFill}
	/>
	</View>
	)}

[PAYMENT 12/25 regression] [$250] Feature Request: Implement to use a 👍icon next to approved report preview #49847

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Sep 27, 2024

melvin-bot commented on Sep 27, 2024

melvin-bot commented on Sep 27, 2024

dannymcclain commented on Sep 27, 2024

JmillsExpensify commented on Sep 27, 2024

Krishna2323 commented on Sep 27, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Result

85 remaining items

Krishna2323 commented on Jan 13, 2025

slafortune commented on Jan 14, 2025

situchan commented on Oct 8, 2025

mallenexpensify commented on Oct 8, 2025

Payment Summary

situchan commented on Oct 9, 2025

mallenexpensify commented on Oct 13, 2025

situchan commented on Oct 13, 2025

luacmartins commented on Nov 7, 2025

mallenexpensify commented on Nov 8, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Proposal 

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