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

[m-natarajan]

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:

1. Have an approved expense report
2. 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?

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

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

[melvin-bot]

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.

[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 - @dannymcclain (NewFeature)

[dannymcclain]

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

[JmillsExpensify]

Thanks @dannymcclain! That looks solid.

[Krishna2323]

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