Implement new component ReceiptEmptyState

[cead22]

• Design doc
• This will be similar to the ReceiptSelector component we have in the receipt scan flow.
• The component will just render the SVG + background + border and the onPress callback should launch the receipt selector
• The component can have a the normal border, or a red border, based on a prop hasError
• onPress callback should launch the receipt selector, like the ... > Replace menu currently does
• When selecting a receipt, we should call ReplaceReceipt with the corresponding transactionID
• The red text shown in the screenshot at the bottom "Receipt required for amounts over $100", is not part of this component
• As part of this change let's also update this code in MoneyRequestView so that if hasReceipt is false and permissions.canUseViolations() is true we show the ReceiptEmptyState component
• permissions.canUseViolations doesn't exist yet so let's add it as part of this change, and make it return true if the user is in the BETA_VIOLATIONS = 'violations' beta

Here's the red border

Here are some tests to include in the PR to make sure everything is working correctly

• permissions.canUseViolations returns true for user on the violations beta, and false otherwise
• ReceiptEmptyState shows normal border when !hasErrors and red border when hasErrors
• Open money request without a receipt, confirm ReceiptEmptyState is shown, action ReceiptEmptyState
  • Import from photo library
  • Import from Files
  • Upload receipt by taking photo
  • Confirm new receipt is attached to the money request and saved successfully

[melvin-bot]

Triggered auto assignment to @anmurali (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[cead22]

• Errr, @anmurali you can ignore this, this will be assigned to @lindboe (and others) from Infinite Red.
• @lindboe can you comment here so I can assign you? let me know if you have any questions

[cead22]

@lindboe we can break the work for this into multiple PRs, it doesn't all have to go in one. For instance, we could submit a PR for the beta, one implementing the component, and one putting the new component in MoneyRequestView based on the beta, and making sure it works with ReplaceReceipt.

Regardless, I'd love for you to share your game plan before starting the implementation :)

[lindboe]

Commenting! We'll take a look. We'll definitely prefer to break things up where we can. I'll check in with the team and see if we have any questions for you.

[cdanwards]

@cead22 I chatted with @lindboe and I'll be heading up our effort on this! I honestly think the way you laid out the division of work makes sense to me. I'll get the first of those PR's up either later this evening or first thing tomorrow!

[melvin-bot]

Triggered auto assignment to @zanyrenney (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details.

[cdanwards]

@cead22 Based on the design doc, I'm unsure what offline tests should be provided. Should this feature work offline?

[cdanwards]

Otherwise the follow-up PR should be ready soon.

[cead22]

Yeah I think it should, since nothing in there needs internet connection, right? I think every bullet in the issue description should work without a connection. Let me know what you think

[cdanwards]

@cead22 That makes sense to me! I wasn't sure if the Receipt Selector worked offline, but after testing it does work. I ended up including both the component and it's inclusion within the MoneyRequestView within the same PR. While building the component out it made more sense to include it so that I could test out visual changes.

[cead22]

This one is done and we can close right?

[cdanwards]

@cead22 yes! This one was finished. I'll ping you on the others that are finished.

[cead22]

Awesome, thanks!