Givewp: IMPORTER: Required fields should be more obvious

[mathetos]

Issue Overview

We should make it obvious which fields are required in order for the import to work. Potentially, the "Import" button would also be greyed out until all required fields have been chosen as well. Doing an alert upon submission is not an awesome user experience.

[raftaar1191]

@mathetos

1. Potentially, the "Import" button would also be greyed out until all required fields have been chosen as well
   -> But how come Admin come to know that these fields are required. What should I do to show the required fields

2. how would Amin come to know that these fields are compulsory unless the Admin press the submit button?
   -> I think ajax check is good and if error comes scroll to the error message

Video Link: https://screencast-o-matic.com/watch/cFVUqsovwN

[mathetos]

The general idea is that they shouldn't have to select everything and hit submit only to find out AFTER a page refresh that they didn't configure a required field.

1) The Submit button should be disabled until all required fields are configured.
2) We should have a dark red asterisk in front of the field labels that are required.
3) If one or more required fields are not configured and they hover over the greyed out Submit button, a tooltip should appear saying "Please configure all required fields to start the import process."

Showing an alert only after the submit button is pressed and a page refresh happens, and having the alert be far away from the fields that are required is not an optimal user experience. Similar to our front-end forms, the validation happens directly on the field, and submission is not possible until required fields are configured.

I hope that clarifies. Thanks!

[kevinwhoffman]

We should have a dark red asterisk in front of the field labels that are required.

Two recommendations:

1. Place the asterisk after the field label per convention and for better accessibility.
2. Add * denotes required field. to the table description where the marker points below.

[mathetos]

AFter discussing with @raftaar1191 in depth, I realize that what is required is not the items in the "Column name" column; but the "Map to field" column; which complicates the issue a bit. So the user is required to MAP some fields that perhaps on first page-load are not obvious.

So based on our conversation, we felt that adding a visual checklist of sorts of the required fields would help. Essentially, when the user maps one of the required fields, the checkmark turns green.

Also discussed fixing the Submit button to the bottom similar to how we do WP Rollback, and greying out that button. So with all those ideas in mind, here's a rough mock-up:

[DevinWalker]

Nice concept. The gray/green icons make it really clear which fields are required. Let's also ensure the field labels for those four fields have the * label after the text just to further reinforce it.

[raftaar1191]

Really awesome @mathetos Thanks will do like in the CSV
@DevinWalker noted your point as well

Will start working on this once done with https://github.com/WordImpress/Give/issues/2744