Revamp the price addition workflow

[raphodn]

Story

After some extensive scanning with Justin this weekend, I'm thinking of many small changes to apply to the main "proof+price(s) addition" workflow

Why

• less text
• clearer separation of fields
• homogenize actions (too many buttons, chips, actions... displayed)
• make everything fit into the screen (avoid scrolling as much as possible)
• be closer to a mobile experience

Current workflow

Step 1: proof	Step 2: price(s)

Ideas

• when adding a new price, automatically scroll down to the form: refactor(UI): On new price, scroll UI to the form #1072
• right-align submit buttons: refactor(UI): right-align all submit buttons. change color of Done buttons #1068
• required fields: turn the * from red to green when the field is valid ?
• move help under [ℹ] icons ? or create a global [ℹ] modal
• Proof image: hide the "Select a proof" line
• Proof image: allow drag-and-drop: Add ability to drag and drop images #1084
• Proof location: hide the "Select a location" line
• Product: seperate product type & details ? move type choice up (on the right of the label) ?
• Price: move discount toggle up (on the right of the label) ?
• Price: add the missing "receipt_quantity" field (see Proof: manage new consumption-related fields (Receipt upload form, Proof display) #974)
• ...

Related issues

• More compact display (reduce padding & card size ?) #930
• Proof: manage new consumption-related fields (Receipt upload form, Proof display) #974

Things to keep in mind

In the long run we will be splitting proof addition and price addition (see discussion here: openfoodfacts/open-prices#526 (comment))

• to have AI extract automatically info from proof images
• to allow any user to add prices on "Price tag" proofs
• but this workflow would still be used for "Receipt" proofs

[thibaultmol]

Another thing I was thinking of: I actually would love to be able to upload proofs at once. just dump them all in so I no longer need to worry about those files on my pc/phone. And then do the tagging later

In the current flow I have to remember which images i've already uploaded and which I haven't. to the point where i just open multiple tabs and upload all the images. so that I don't have to worry about it.

[serpico]

did you try https://prices.openfoodfacts.org/proofs/add/multiple ? ( it's in the side menu > Experiments > Add multiple proofs )

[raphodn]

@serpico ok so you're not going to be happy with the new layout i guess ^^

• it's only half done (i need to take some time for the "normal" form fields)
• and we can think of an expert mode to save some clicks (i know, the new UI adds some clicks, I tried it quite a bit this weekend)

Current workflow (WIP)

Step 1: proof	Step 2: price(s)

[thibaultmol]

I like the change of 'find the product' instead of whatever barcode it was before.
i really like how the barcode is already prefilled in the 'type the barcode' field, not sure if that was the case before

one thing i would like to ask: could we have the cropped image of the product, very large, above the 'type the barcode' field.

right above this i would like to see the price time image massive, so i can easily read it.

Another thing it'd like to ask: since EAN13 has a builtin checksum. is it possible to re-run the ocr a second or third time slightly differently somehow, until it finds a correct barcode OR it hits 3 tries?

[thibaultmol]

also, i know this will increase the amount of api calls maybe. but having it automatically check the api for products anytime it matches a common barcode char amount like 13. it shows that it found a product inside the 'type a barcode' screen. without having to submit it. so i can see if i typed it correct before having to close the window

[serpico]

@serpico ok so you're not going to be happy with the new layout i guess ^^

* it's only half done (i need to take some time for the "normal" form fields)

* and we can think of an expert mode to save some clicks (i know, the new UI adds some clicks, I tried it quite a bit this weekend)

Don't worry, try away

[raphodn]

thanks for the feedback @thibaultmol ! indeed i share your following points :

1. the "type a barcode" could display the image above (or below) ; note that it's used elsewhere like the "Multiple add price" so it will have the full proof image, not just the cropped one.
2. an intermediate "validation" step could be nice, so that you stay on the modal until you've found the correct barcode 👌
3. the EAN check result could also be displayed somewhere (it is already display on the "product card", if 2. is done then it'll come with it

[raphodn]

2 new changes on the barcode scanner :

• I added a result feedback for the "type" mode, the result is displayed below, and the user simply needs to click on the product card to confirm : refactor(Price add): On barcode manual input, show result confirmation before send #1108
• I also added a new settings, to allow customising the default tab. So that on your laptop you can set it to "type" and save a click 😍 : feat(Settings): new Barcode scanner default mode settings (scan or type) #1111 (soon to be deployed)

edit :

• extra settings, this time for the location finder: feat(Settings): new Location selector default mode settings (recent, physical or online) #1143

[raphodn]

New screenshots after some additional changes (in the price addition section)

proof type	Step 1: proof	Step 2: price(s)
receipt

and the new settings

[raphodn]

extra todo following feedback:

• Proof form: fix a bug where users can upload proofs without locations
• Location finder: show a (dismissable) message informing users they can set the default tab in the settings
• Location finder: pre-select last location + better display it ?
• Barcode scanner: show a (dismissable) message informing users they can set the default tab in the settings
• Barcode scanner > type: hide the numeric stepper on the right
• Barcode scanner > type: find a way to allow users to skip the validation step
• after the barcode scanner, when the product is selected, if the price is still empty, focus directly on the field
• allow translation of the "Organic" checkbox (category label). add new labels ?
• Receipt-only "personal data" fields: find a way to inform users + settings to hide them completely ?

also

• rename "Add multiple prices" to "Add prices" to simplify & homogenize (sidebar, header, breacrumb)

[raphodn]

@TTalex following feedback that for some fields (especially the "currency" where you need to go to your settings to change them) we would need to add a Help icon or link/popup, I've been thinking of changing the look and feel of our input fields..

• one option is what I've started in this PR - refactor(Proof add): change look & feel of input fields #1329 - put back the label above, have an outline, makes it a bit similar to the buttons above, and allows to define a border green/red. will also allow to put a dedicated help. got the inspiration from https://vuetifyjs.com/en/components/text-fields/#login-form
• another option (can be complementary) is to have a ❓ icon in the top right of the card, with a dialog explaining in more details how to upload

[TTalex]

For the specific case of currency, maybe the solution is in the drop-down. Add a "more" option to display all available currencies, and upon user selection add the currency to favorites.
Because even with a tutorial / good explanation, I find it a bit odd to have to go to settings for this.

[raphodn]

The "best" solution would be an onboarding page to select your language, country & currency