Update the "error uploading receipt" screen

[mjasikowski]

Coming from #69669

1. Currently the expense creation errors point to the incorrect error message ("Unexpected error creating this chat" rather than "There was an error uploading your receipt")
2. The "error uploading your receipt" screen doesn't look great, with the action buttons being hyperlinks.

Your goal here is to:

1. Implement a new design for the receipt upload error:

2. Make sure that errors in expense creations coming from the upload receipt flow show the above
3. Make sure that when this error is visible, the "delete" button is available under the "more" menu

Issue Owner

Current Issue Owner: @OlimpiaZurek

[samranahm]

@mjasikowski Is this open for external contributors?

[mjasikowski]

@samranahm thanks, but not at the moment

[PiyushChandra17]

Proposal

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

Update the "error uploading receipt" screen

What is the root cause of that problem?

Improvement

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

1. Replace the receiptError translation key here:

App/src/components/DotIndicatorMessage.tsx

Line 87 in f2b01e8

html={translate('iou.error.receiptFailureMessage')}

App/src/languages/en.ts

Line 1328 in f2b01e8

receiptFailureMessage: '<rbr>There was an error uploading your receipt. Please <a href="download">save the receipt</a> and <a href="retry">try again</a> later.</rbr>',

with receiptFailureShortMessage

App/src/languages/en.ts

Line 1329 in f2b01e8

receiptFailureMessageShort: 'There was an error uploading your receipt.',

2. Update the errorRowStyles here

App/src/components/ReportActionItem/MoneyRequestReceiptView.tsx

Line 314 in f2b01e8

errorRowStyles={[styles.mh4, !shouldShowReceiptEmptyState && styles.mt3]}

3. Instead of showing try again && save the receipt, add two Buttons below the error message > Download Receipt && Try Again with styles.flexRow

4. If the error is visible, add the Delete button in More drop down menu

What alternative solutions did you explore? (Optional)

Result:

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[mjasikowski]

Waiting for sequential queue upgrades first