[HOLD for payment 2023-09-12] Design clean-up and consistency across expense reports and requests.

[JmillsExpensify]

We've been making a lot of fast-and-loose changes to requests and reports as part of waves3-wave5, and as a result of adding merchant names for wave4, the end result isn't what we intended. Accordingly, this is a summary of what's broken and needs to be fixed.

1. We're showing right carets for all report and request previews, when instead right carets should be removed from all request and report previews.

2. Similarly, IOU reports are showing the merchant when they should instead be showing the description (because IOUs always have the same merchant, which is Request).

3. When a merchant name exists for an expense / request preview, we only show the merchant.

4. We're missing the X requests logic on report previews in the workspace chat. More specifically, when more than one request exists on the expense report, we replace the merchantName with X requests, where X is the number of requests on the report. We also show up to three receipt images in the report preview. If more than three receipts exist, then we show an overlay in the lower right corner of the right most receipt, +X. This overlay counts the number of additional receipts (e.g. receipts over 3) that exist on the report but can't be seen. Examples for completeness.
   

[melvin-bot]

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

[mountiny]

@koko57 would you be up for this one?

[koko57]

Sorry, I'll be ooo from tomorrow till 10th Sept., so maybe someone else from my team could take it?

[JmillsExpensify]

@mountiny @luacmartins can we get someone else on this one given the OOO? I think we really need to have these items cleaned up ahead of 6th September for the product promotions.

[luacmartins]

asked here

[mountiny]

Also asked if any C+ has time to tackle this https://expensify.slack.com/archives/C02NK2DQWUX/p1693362407056109 I think Callstack might have a bit less availability now ahead of RNEU conference.

[JmillsExpensify]

Nice, thanks ya'll!

[rushatgabhane]

Hi, I can work on this if no one from callstack has bandwidth

[mountiny]

@rushatgabhane Michael should be able to, you could do c+ role here to help with the code review

[rushatgabhane]

Okay, so to be clear I'm just reviewing the PR that Michael will raise?

[rezkiy37]

Hi, I'm Michael (Mykhailo) from Callstack and I would like to work in this issue.

[rushatgabhane]

@rezkiy37 let's do this!

[rezkiy37]

@JmillsExpensify, just to clarify the 4th step. The app already handles cases with one or multiple requests and receipts. I see only one discrepancy associated with the overlay, that counts the number of additional receipts.

App/src/components/ReportActionItem/ReportPreview.js

Lines 121 to 126 in 03d13f7

	const previewSubtitle = hasOnlyOneReceiptRequest
	? transactionsWithReceipts[0].merchant
	: props.translate('iou.requestCount', {
	count: numberOfRequests,
	scanningReceipts: numberOfScanningReceipts,
	});

Example: multiple and more than 3 receipts

Example: multiple and scanning

Example: single

So, based on this investigation, I think we need to fix the overlay. Am I right? Please correct me if I am wrong 🙂

[mountiny]

We also need to fix this for a normal Cash requests, thats where it was not working and I agree with the overlay issue here
the cards are no visible

[rezkiy37]

@mountiny, do you mean this case:

Screen.Recording.2023-08-30.at.18.56.24.mov

Should we add a counter under the amount?

[JmillsExpensify]

So, based on this investigation, I think we need to fix the overlay. Am I right? Please correct me if I am wrong 🙂

@rezkiy37 Yes you're exactly right! Thank you for confirming.

[mountiny]

@rezkiy37 Yes correct, there should be the counter same as for the receipts or distance!

[rezkiy37]

@JmillsExpensify, is it possible to provide access for a design for this specific component? I am not sure, that I can do it precisely without colors, dimensions and so on. Thank you!

[mountiny]

I am actually not sure if we want that design

[mountiny]

ready for the payment

[luacmartins]

I think we're just waiting on payment here

[luacmartins]

@JmillsExpensify can you help with payment please?

[luacmartins]

Bump @JmillsExpensify for payment

[shawnborton]

Still waiting for payment?

[shawnborton]

Still waiting for payment

[mountiny]

We only need to pay $500 to @situchan here, otherwise nothing to pay and we can close this.

[JmillsExpensify]

Offer sent to @situchan.

[JmillsExpensify]

Offer accepted and paid.