[Feature]: Governance UI Onboarding components

[L03TJ3]

Short description of the new GoodWidget

We are going to extend the existing/being worked on dashboard components for our governance widget with 'onboarding flow components'.
This is an onboarding flow to get a user into the DAO/Governance membership.

its wizard/step-based flow that lets users:

1. verify their identity
2. choose a house to register in
3. provide profile data
   3a. fill in metadata fields
   3b. confirm and stake a displayed G$ amount
4. and a succesmodal with one or more CTA/redirects

We only want to create the UI components, no real functionality or mapping back to actual transactions or smart-contracts are expected to be done.

Components that would be needed additionally and can be created as generic component in the ui package:
PageWizard.tsx

A component that can be used to create a in-widget paged stepper.

---

Which repos and packages the AI should work with

All work should be branched out and started on from copilot/plan-governance-homepage-components

(Governance UI styling reference)
For the latest version and dashboard UI components you can reference: #54 and the remote branch: edehvictor:fix/finalize-governance-widget-50
the work itself does not have to be replicated but design styling and component setup should be mimicked.

(Transaction stepper reference)
The onboarding flow includes a 'transaction progress tracking'. we should duplicate the transaction stepper as worked on in pull-request: #43 (Stepper.tsx)
it should be an exact duplicate and should be build as part of the generic ui package.

(Page-wizard manager)
https://gist.github.com/L03TJ3/b8dfb1d6d2da91a4f82293bcd632fb06

(Smart-contract reference)
The task is for skeleton components and they don't yet have to be actively wired to a smart-contract or a particular interface.
The following has to be used just as reference so that expected input shape can be taken into consideration when creating the components.
The following pullrequest is a draft for the smart-contract that will provide most of the input of the components: GoodDollar/GoodProtocol#299

---

UI implementation reference

Once the wizard page stepper (supporting an horizontal tracker) is finished.
The following pages should be build in order.

Page 1: Welcome screen and identity verification

Page 2: Select House user wants to get membership for

Both page 3 screens should support
Depending on choice (House of citizenship/house of alignment) it should show either
Page 3: House of alignment profile data

or
Page 3: House of citizenship profile data

Page 4: Stake transaction progress tracker:

Page 5: success screen/modal/card

---

User flows, states and behaviours

The page-wizard comes with a horizontal stepper that shows all the steps from a flow.
it should clearly indicate which page/step is currently active. it should act as wrapper and is shown on all pages.
So structure:

<Title and subtitle for page>
<page-content> (all pages should support a 'CTA/Next step button/confirm')
<Footer>

== Page 1: Verify identity
Title: Welcome
Subtitle: lorem ipsum

Card:

• Identity icon
• Connected wallet-address
• Identity status: Verified with green indicators and checkmark / Unverified, should show a primary color blue indicator, yellow/orange warning icon, and a 'verify' button'
• Next-step/confirm button: Proceed to membership (disabled if unverified)

== Page 2: House Selection
Title: Choose your house
Subtitle: lorem ipsum

Card:

• Two separate cards. Content vertifcal stacked. one of the options should be selectable.
  Row 1
  -- Round selection bulletpoint
  -- house name: Either House of Citizenship or House of Alignment

Row 2
-- pill for house label/indicator
-- pill for amount to stake for this house

Row 3:
-- CTA: Continue

== Page 3:
Title: Apply for membership
subtitle: lorem ipsum

-- Main card
-- Inner-card: Staking amount + red hued warning section with the following copy:
Please ensure you have the
required G$ in your wallet.
Staked tokens are locked for
the duration of active
governance cycles.

-- configurable input fields. it should support: Link fields, Short description/naming fields, draggable/extendable long description fields

== Page 4:
Transaction progress tracking, using the Stepper.tsx reference from the following PR: #43

== Final screen/success modal
use design reference

---

Create the plan

Based on the above description, create an execution plan in a new sub-issue and preserve the original issue content unchanged.
Do not execute the plan until given instructions to do so.

Sub-issue requirements:

• Title format: [DRAFT][PLAN] <what issue is being planned>
• Type: Task
• Description must start with: <sub-issue title>
• Link the sub-issue back to this parent issue.

Instructions when creating the plan:

• Map relevant files that are too be used as reference from all repos mentioned
• import existing @GoodDollar packages
• Map new components that should be created. Assess when a new component should be created in the new savings widget package or made part of the reusable packages/ui

Plan specification required sections:

• Required states, flows, and behaviors
• Execution plan
• acceptance criteria
• human-reviewer checklist

[Godbrand0]

I would like to work on this issue given my experience with the good dollar ecosystem, I am looking forward to your response

[L03TJ3]

@Godbrand0 Hey, the way bounties are structured, at least in the GoodWidget repository is: Feature > AI Task > Contributor bounty, following our new goodbounties structure

As you see there are 2 sub-issues, one of which is the [GoodBounty] which is already assigned.
more bounties expected this week, so keep an eye on the board: GoodBounties (view)