Discrepancy in Add Funds Modal in Collective Pages

[SudharakaP]

There seems to be a discrepancy in the Add Funds Modal in the collective homepage and it's expenses page. On the Collective page (i.e: https://staging.opencollective.com/webpack) we see,

whereas on the expenses page for the same collective (https://staging.opencollective.com/webpack/expenses) we see,

so it seems that on the first page the host fee can be specified whereas on the expenses page we cannot specify the host fee. I believe that we should make the modal behave same everywhere. 🤔

[Betree]

Related: some pages like /transactions don't have the add funds modal at all because they're not fetching the host (see this Slack report).

We'll need to solve this through multiple actions:

1. AddFundsModal should be completely independent and fetch its own data.

• [x] We already have a addFundsAccountQuery query, all required fields should be moved there
• [x] Remove the host prop
• [ ] Make sure we only use the collective prop for its id (to fetch the right account) and name/image (to render the header while loading)

2. Introduce an account.permissions.canAddFunds field to check for this permission the same way across all pages. This specific item can be moved to its own issue if it looks out of scope. https://github.com/opencollective/opencollective-api/pull/7743

[SudharakaP]

@Betree : I've opened a PR for this. While the first two points that you mentioned is fine, I am having trouble doing the third point;

Make sure we only use the collective prop for its id (to fetch the right account) and name/image (to render the header while loading)

I am not sure if this is possible or necessary as we are relaying on slug for multiple queries and changing it to id seemed a bit complicated. For example in the following query we specifically need the slug;

https://github.com/opencollective/opencollective-frontend/blob/2747b68ff2e761533cc519ed00c4e84246fbd107/components/host-dashboard/AddFundsModal.js#L293-L295

So if there's no objection to this I am suggesting we keep the collective.slug as it is.

[Betree]

@SudharakaP good point, we need to keep using the slug there.

[SudharakaP]

@Betree : On a related note, I've found that there's a problem with the API code for getting the addFunds permissions. I've opened a PR to fix it; https://github.com/opencollective/opencollective-api/pull/7769. Here the issue is that, https://github.com/opencollective/opencollective-api/pull/7769/files#r925464366

[alanna]

Is this still being worked on?

[Betree]

There's a PR open, we still need to review & merge for this issue to be resolved: https://github.com/opencollective/opencollective-frontend/pull/8035