Improve UX when pasting images and there is an error

[JmillsExpensify]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Expected Result:

Text/image gets pasted

Actual Result:

Alert pops up which is bad UX

Action Performed:

When copy/pasting something from Slack into E.cash, there is an alert() being used when there is an error pasting images. Not only is it invasive to the UX (you have to click to make it go away), but it prevents anything from getting pasted.

Suggestion:

1. Don't use an alert and use something more appropriate if there is indeed something that the user needs to know (maybe an error message down by the compose field).
2. Allow the rest of the text to be pasted if something fails with images being pasted (I think this just means not calling e.preventDefault() ).

Code is here

Workaround:

Upload images directly in E.cash

Platform:

Web
Desktop App

Version Number: 1.0.28-0
Notes/Photos/Videos:
Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/160750
Upwork job: https://www.upwork.com/jobs/~0103d5a375d57f66de

View all open jobs on Upwork

[MelvinBot]

Triggered auto assignment to @NikkiWines (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[parasharrajat]

Proposal

1. I think showing a toast message is a good option as we would be needing it to show some feedback in the future for the app.
2. Now we do have support for native toast messages on Android and IOS but web/desktop lacks it. So it's better to use a custom lib to show a uniform toast across devices.

I have a few hand-picked suggestions for the toast lib.

1. Seems a good candidate https://www.npmjs.com/package/react-native-styled-toast.
2. Minimal customization https://www.npmjs.com/package/react-native-root-toast.

• Allow the rest of the text to be pasted if something fails with images being pasted (I think this just means not calling e.preventDefault() ).

  we allow users to paste by putting a check for preventDefault() when image upload is failed.

Edit

As per NikkiWines's comment #2530 (comment), we can adopt a simple approach.

My suggestion

a Message slides up from the top edge of the composer extending the composer's look and disappearing by sliding down.

[NikkiWines]

@JmillsExpensify, I believe our current plan is to build a custom toast library instead of implementing a third party lib. I know @shawnborton has been working on the general design for that over in https://github.com/Expensify/Expensify/issues/159930. cc: @marcaaron since I know we've talked about toasts/growls before.

Since we don't want to use a lib for toasts, @parasharrajat perhaps you could implement a simpler solution by displaying an error message somewhere when this occurs (perhaps down by the compose field)? We have several areas already in E.cash where we display errors and don't use alerts.

[parasharrajat]

@NikkiWines Ok, in that case, I think showing an error over the compose box could be a good option until we have toast.

a Message slides up from the top edge of the composer extending the composer's look and disappearing by sliding down.

Let me know if that sounds a fit. Thanks.

[NikkiWines]

@parasharrajat, I'm not sure we even need to animate anything here. @Expensify/design do you have any input on whether we'd want the error message to fade out or something similar in this case?

We do have simple, static error messages throughout the product that are displayed when something has gone awry, I think following that existing precedent makes sense. If we don't do want to do any fading out maybe the error can be removed when they next interact with the compose box.

[michelle-thompson]

Agreed with Nikki! As far as I know we don't have any growls that fade in/out, so a static error message makes more sense here.

[parasharrajat]

@michelle-thompson Alright. We can just add a static message near the composer and as soon as user focus on the composer we reset the error.

[michelle-thompson]

Yeah, let's see how that looks and we can go from there :) thank you!

[JmillsExpensify]

Awesome, thanks @parasharrajat (and thanks @NikkiWines for keeping us all move forward in Upwork too!).

[parasharrajat]

So I have come across a bottleneck.

Under the composer, we have two things currently which works conditionally and only one is visible at a time.

1. you are offline status.
2. When someone is typing and there typing status.

Now we want to show the error as well.

How should we render it?

• On the same line and override the above two massages but what should be the rendering approach. Which message should take precedence over others as only one can be visible at a time.
• Show the error between composer and the typing status message row.

[shawnborton]

Is the plan to eventually move this into a custom growl? If so, should we just hold off and wait until the custom growls are in place? We'll hopefully be able to put a job up for them shortly as we just finished mocks for them.