Drep editing flow needs to be redesigned to be able to navigate properly

[m-i-k-e]

Context & versions

staging.sanchonet

Steps to reproduce

1. Become Drep
2. Go to dashboard
3. Click "View your DRep Details" on Drep card
4. go to your drep card
5. Click "Edit Drep Data"

Actual behavior

1. You are faced with a blank form
2. When you click "Cancel" it should have a different confirmation modal. The current one asks you if you want to Abandon registration, but this is 'canceling' changes. The user is already registered

Expected behavior

1. The form should have the existing Drep data pre-populated as per Figma file: https://www.figma.com/file/mJTBiUofLfb74Xc3W2U59o/Voltaire---GOV-TOOL?type=design&node-id=9751%3A82747&mode=design&t=YS0TICiCourCfGTj-1
2. Also see this loom video: https://www.loom.com/share/71848037d7f74f228d53ee8768d4fd93?sid=aa24b45a-c115-4616-83eb-3fccd8e0da67
3. And this one: https://www.loom.com/share/e7c1a8ae0fc24ebeaeb002accb61aedb?sid=b55fab8a-2b10-422d-87e5-8817bff648da
4. When "cancel" is clicked, the user should be taken back to their Drep detail card (where they came from)
5. There should be no "back to dashboard" link on the upper left of the screen

What needs to be done to fix this:

1. New screen for cancelling (modal) to be designed with two buttons: Yes, cancel, No, continue editing. if user clicks Cancel, they go back to the previous page, which is the drep detail page
2. remove the "back to dashboard" link on the top left
3. Pre-populate the form with the existing DRep data.

[m-i-k-e]

@MSzalowski I need to do some design work for this before it can be coded.

[kgrzonka]

I created new flow in Figma - DRep Editing Flow https://www.figma.com/file/mJTBiUofLfb74Xc3W2U59o/Voltaire---GOV-TOOL?type=design&node-id=12964%3A96709&mode=design&t=ACqzr7VudFd51p5r-1

1. I left the "back to dashboard" button in the profile view cause I think its logic and good user came from dashboard in this case so
2. I removed the return buttons from the form editing views. My flow shows that the "cancel" button works like a return. If the user has not completed/changed any data in the form, after clicking cancel, he simply returns to the profile view (without popup/info because whats the point)
3. If the user completes/changes data in the form and:
   • clicks cancel - he should receive information that all the data he entered will be lost (the form will not save changes) and the option to select "yes/no"
   • save changes - will go to the Profile view to see the changes. (Question: Does this require wallet authorization?). I skip the preview like in first registration path - its that will be ok ?

Question: Is the Deep name Field should be blocked? User can change username ?

@m-i-k-e

[kgrzonka]

@m-i-k-e https://www.figma.com/file/mJTBiUofLfb74Xc3W2U59o/branch/TFGnKNHVuBAoDKL4J9pVBA/Voltaire---GOV-TOOL?type=design&node-id=12964%3A96709&mode=design&t=5R2fTPLgoP1iaJpy-1

[m-i-k-e]

@kgrzonka https://www.loom.com/share/23b65b960895432fa0f455daf0981629?sid=27e95fe5-4742-4e89-a14a-9fbcd58b1e11

[kgrzonka]

@m-i-k-e I made changes and put my proposal for mobile ;) https://www.figma.com/file/mJTBiUofLfb74Xc3W2U59o/branch/TFGnKNHVuBAoDKL4J9pVBA/Voltaire---GOV-TOOL?type=design&node-id=13122%3A90786&mode=design&t=yqJIgA0AbJ2pKE32-1

I just have a question about the popup with the information "are you sure" - should the copy be the same in both cases? (when the user did not make any changes to the text and when he changed the text)

[m-i-k-e]

Yes, it makes sense.

[m-i-k-e]

@m-i-k-e Please check Figma.

[m-i-k-e]

Yes, the design is good. @kgrzonka

[m-i-k-e]

@MSzalowski has this been done?