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.