opencollective
opencollective copied to clipboard
opencollective
CSV Export: Modal redesign
Overview
We are updating the experience to export the CSV file from the transactions section of the Fiscal Host dashboard...
The option to select a custom set of export fields is stressful for end-users:
- There are many fields and it can feel overwhelming to review them all as they are currently presented.
- Some fields are unclear and potentially confusing to users (eg: short ID’s and long ID’s?, amount & netAmount, isRefund, is Refunded), etc.).
- There is no clarifying documentation.
- Fields are not clearly organized/grouped.
- We need to be able to add more fields and the form is already very long.
- If a user does make an effort to select fields there is no way to save their selection for reuse in the future.
Solution
Scope 1: Improvements to the existing UI
- Better organize the fields on the screen (fields order, groups).
- Adding tooltips to the fields.
- Adding platform export presets (selected sets of fields) that enable us to provide multiple pre-saved configurations: eg:
- “Accounting 2023” would represent our current set
- “Accounting 2024” could be a modified version to account for the change in payment processor fees and taxes).
- and perhaps in the future other useful sets.
- Enable fiscal host admins to select output sets and save them as a fiscal-host set that all admins of the same fiscal host can use when exporting transactions.
Scope 2: Improved field selection
Enable a grouped-fields UI where:
- The groups themselves provide guidance and context.
- Focusing on group shows a limited set of fields (”hiding” all the other fields from view) that have shared context and are easier to navigate and select.
- The set of selected fields is clearly displayed and managed (remove fields).
- Optional: change field order
Design update
After the first two team workshops, this is the current state of the design proposal:
https://www.loom.com/share/9bc31f0f39aa40cc9bf9fa1c5eb44065?sid=46d6fe68-6c54-4088-999d-794a6d1b1495 @iamronen @znarf @kewitz
reminder @Memo-Es we have the ability and a need to incorporate changing of the export field order
Coda reference: https://coda.io/d/Make-Open-Collective_dnHLKv7oLV0/Currently_suFhs#CurrentProjects_tu75U/r145&view=modal
Todo:
- [x] Check if there's any necessary UI component missing
- [x] Check existing implementations of reordering fields
@kewitz About the pending design input:
1. Placement of the separate as columns switch
- Below the "Selected fields for export"
2. Exporting action feedback
- Loading state of the Export button
- Reference from https://ui.shadcn.com/docs/components/button
3. File is too large
- Lock the modal to take any action until different filters are set.
attn @Memo-Es copy for the backwards compatibility option:
- Delete the first part: Separate transactions compatibility
- Leave only: Export taxes and payment processor fees as columns.
- Add tooltip: Before 2024 payment processor fees and taxes were columns in transaction records. Since January 2024 they are separate transactions. Enable this option to transform separate payment processor fees and tax transactions into columns in the export.
- implementing the proposal from @kewitz to turn this on by default when selecting the 2023 platform preset (with the ability to turn it off).
Loading state of the Export button Reference from https://ui.shadcn.com/docs/components/button
Just a reminder that this export button is, in fact, a link that opens the download in a new tab. It does not export or generate anything.
Just a reminder that this export button is, in fact, a link that opens the download in a new tab. It does not export or generate anything.
Yes, the loading state is to have visual feedback on our platform parallel to the browser download
@Memo-Es this is what I'm flagging. There's no point in doing that because there will be no way to know when the download finish.
@kewitz ok I see. Then we could use a toast notification saying something like: "Your export has started"