Redesign the page to edit tiers

[Betree]

The tiers page has a lot of issues. To name some of them:

• Error messages are unclear (Validation error message if Tier description is too long #2953)
• Related to the previous, there are no frontend validations. So if something's wrong, it's up to users to find the error source.
• The form is pretty complex, with more than 10 fields. The UI doesn't tell you which ones are required or not.
• It's using a legacy design, with libraries that are deprecated in our codebase (Remove react-boostrap dependency #3223)

Best solution for this problem

We need a redesign of this page, that we'll implement as a new one using latest best practices:

• Formik
• GraphQL V2
• EditCollectiveForm: isolate child form components #1451

Figma file:

• Tier cards design
• Page to edit tiers

Documentation

We'll need to update https://docs.opencollective.com/help/collectives/tiers-goals#tiers

[Memo-Es]

Design update

---

Proposal to add a custom tier through the settings page

1. Add new tier CTA	2. New custom tier form

@Betree

[alanna]

Visually this is a big improvement @Memo-Es - looking good!

Some notes...

• I don't like how the 'custom contributions' thing is handled. It's way too complicated, and we shouldn't need all that text to explain how it works. Just make the default and only tier when someone creates a new Collective the custom contribution tier, fully editable, and allow Collectives to treat it like any other tier, including deleting it. Then we won't have to explain it or visually make it different or anything. Right now "enable custom contributions" as designed makes it look like you tick that box to then enable the admin to create custom tiers, but that's not what it means.
• We can have the action be simply add tier instead of add new custom tier - all tiers are customizable by the admin.
• What is the purpose of the pre-set tier types? Donation, membership, etc? If they select one of those, they can change all the settings anyway, right? I don't see the need for that. Just let admins create whatever tiers and call them whatever they want and change their settings to be what they need, including recurring or one-off, limited numbers, specific amounts, or to have local tax apply.
• Change force standalone page to just standalone page - forcing sounds violent. Also add a link from here to the docs page about it, because it's not too clear what it means to users who haven't seen one. If someone is trying to set up a mini-crowdfunding campaign and would like a standalone page, I'm not sure they'll realise this is how to do it.
• Suggested amounts for flexible tiers are missing? Or is it just this example only shows a fixed amount?
  *The default name should be something we will be happy for them to use if they don't change it. New Generic Tier is not a good choice for this. The word "generic" has negative connotations in English. I suggest the default name for a generic tier is Contribution.
• We should have default button text instead of a blank box, so they can leave it if they don't want to customise. It should be Contribute.

[Betree]

What is the purpose of the pre-set tier types? Donation, membership, etc?

Those are really important for us to categorize the contribution type, especially for taxes (VAT, GST) that will apply only on certain types (tickets, products, services but not donations). We also adapt the flow based on this, for example products and tickets can have a "Quantity" field, but not donations.

[Betree]

I don't like how the 'custom contributions' thing is handled. It's way too complicated, and we shouldn't need all that text to explain how it works. Just make the default and only tier when someone creates a new Collective the custom contribution tier, fully editable, and allow Collectives to treat it like any other tier, including deleting it. Then we won't have to explain it or visually make it different or anything. Right now "enable custom contributions" as designed makes it look like you tick that box to then enable the admin to create custom tiers, but that's not what it means.

I agree with this, it's the main reason why I specified #3055 that was intended to achieve that. I closed it because the complexity/benefit balance didn't seem right, but on the long term "Custom contribution" being treated as just another tier should really simplify things when it comes to customizing your ways to contribute. I'll re-open it, though I think we should treat it as a separate project because of the complexity.

---

@Memo-Es From the design, I don't see how to edit a tier?

[Memo-Es]

Design update

---

Contribution tiers tab	Create/Edit tier modal	Edit tier mockup

New update considering the latest feedback here and here

[Betree]

@Memo-Es the modal should be triggered when you click on a tier from this edit page right?

I love this modal proposal, the fact that it uses a modal allows for inline edition from other places. At some point we had a design of the collective page that included a pencil (edit) and a remove icon next to "Move":

With that issue implemented, we should be able to add that easily!

[Betree]

@Memo-Es Some interesting feedback around standalone tier pages here: #3774

[stale]

This issue has been automatically marked as stale because it has not had recent activity. We haven't had the time to address it yet, but we want to keep it open. This message is just a reminder for us to help triage issues.

[BenJam]

reviewed design from two years ago and @aminakazi already updated. Designs are pretty much ready.

• @Betree and @SudharakaP to discuss working on the skeleton

[aminakazi]

Week 2 Update:
Designed and updated the form according to the new requirements.

Week 3 Tasks

• Hand over production-ready files to the dev team (@aminakazi)
• Dev team to set up the base for breaking up the design into bounties.

[BenJam]

• @Betree and @SudharakaP to talk through building the framework for bounties to build onto.

[BenJam]

update tomrrow

[Betree]

We haven't started working on this project yet. We'll try to have it for the week.

[aminakazi]

The updated production-ready file can be found here .

[Betree]

Current status

➡️ Testing in dev environments (local, staging) & iterating.
Slack channel created on https://opencollective.slack.com/archives/C044GNQ7WBX.

We have the tiers list working:

@hdiniz added the ability to create a new tier, with proper validations and instant preview:

This form also supports editing:

And deleting:

Next steps

We have documented some issues we need to iterate on in this Slack thread. We're also looking into #5947.

Once we're happy with the resolution of this feedback, I think we'll be able to roll it out for a larger audience. I suggest doing so in multiple phases:

1. Enable the Tiers (New!) admin section for the core team & trusted partners. Collect feedback for at least two weeks.
2. If we're confident enough that it's non-breaking, hide the old Tiers menu entry and make the new one the default. This release should be synced with @opencollective/documentation to make sure we update our docs at the same time.
3. Migrate Event > Tickets admin section to the new tiers
4. After a few weeks, remove the legacy tier page

[BenJam]

prepare for next steps

• docs
• release and feedback issues

[Betree]

Let's make sure we close the following issue when we release this:

• "Enable custom contribution" should be linked to the save button #3263
• Improve error handling in tier creation #3531