[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: @slafortune

[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

[Nodebrute]

Edited by proposal-police: This proposal was edited at 2024-09-27 15:15:07 UTC.

Proposal

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

Implement to use a 👍icon next to approved report preview

What is the root cause of that problem?

Feature request

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

If we want to show animation for thumbsUp similar to CheckMark we can do something like this in ReportPreview.tsx

   const ThumbsUpScale = useSharedValue(isApproved ? 1 : 0);
    const ThumbsUpStyle = useAnimatedStyle(() => ({
        ...styles.defaultCheckmarkWrapper,
        transform: [{scale: ThumbsUpStyle.value}],
    }));

And then we need to create a useEffect to give it spring-based Animation. We can pass the duration of our choice. I am passing 200 here the default is 2000

    useEffect(() => {
        if (!isApproved) {
            return;
        }

        checkMarkScale1.value = withSpring(1,{duration: 200});

    }, [isApproved]);

Lastly, here We can use the thumbsUp icon

 {isApproved && (
                                                    <Animated.View style={checkMarkStyle1}>
                                                        <Icon
                                                            src={Expensicons.ThumbsUp}
                                                            fill={theme.icon}
                                                        />
                                                    </Animated.View>
                                                )}

Other minor styling can be adjusted in the PR

Screen.Recording.2024-09-30.at.3.29.14.PM.mov

What alternative solutions did you explore? (Optional)

[melvin-bot]

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

[melvin-bot]

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

[Krishna2323]

Proposal Updated

• Proposal updated to include similar places which requires similar code changes.

[situchan]

Should we animate 👍 similar to ✔️ in #49438?
cc: @Expensify/design

[Nodebrute]

Proposal Updated
Added Implementation if we want to Animate

[dannymcclain]

Yeah I think we should animate the 👍 if possible! The transition to the approved state I think will typically be pretty subtle, so a little animation would be good IMO.

cc @dubielzyk-expensify in case he disagrees.

[dubielzyk-expensify]

100% agree. That'd be great!

[situchan]

@Nodebrute can you please elaborate the meaningful difference from previous proposal?
And now that we want to animate, please remove deprecated proposal which is confusing.

[Nodebrute]

@situchan I've removed the outdated code. Since this is a feature request, I believe the selected proposal should be more thoroughly researched. Ultimately, it’s your decision, and I'm happy with whoever you choose.

[DylanDylann]

@youssef-lr @slafortune I can help to complete the PR

[melvin-bot]

📣 @DylanDylann 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[slafortune]

Thanks for volunteering @DylanDylann

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

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

• Feat: Implement to use a 👍icon next to approved report preview #50387

If no regressions arise, payment will be issued on 2024-11-29. 🎊

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

• @Krishna2323 requires payment automatic offer (Contributor)
• @DylanDylann 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:

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

[Krishna2323]

The PR was reverted due to causing #52873. I will open a new PR by the end of tomorrow.

[DylanDylann]

@Krishna2323 Let's prioritize this PR before creating new proposals

[Krishna2323]

I tried yesterday but failed to build the app on my physical device and the bug only appears on physical android device. Will try again in a moment.

[melvin-bot]

@dannymcclain, @youssef-lr, @slafortune, @Krishna2323, @DylanDylann Whoops! This issue is 2 days overdue. Let's get this updated quick!

[melvin-bot]

@dannymcclain, @youssef-lr, @slafortune, @Krishna2323, @DylanDylann Eep! 4 days overdue now. Issues have feelings too...

[slafortune]

not overdue, waiting on PR

[slafortune]

deployed to production today