feat(organizations): update usage limits modals and banners TASK-996

[pauloamorimbr]

🗒️ Checklist

1. run linter locally
2. update all related docs (API, README, inline, etc.), if any
3. draft PR with a title <type>(<scope>)<!>: <title> TASK-1234
4. tag PR: at least frontend or backend unless it's global
5. fill in the template below and delete template comments
6. review thyself: read the diff and repro the preview as written
7. open PR & confirm that CI passes
8. request reviewers, if needed
9. delete this section before merging

📣 Summary

Usage limits modal and banner descriptions were changed to reflect the individual, organization or team subscription.

📖 Description

Information for usage limits modal and banner was changed:

• The subject changes between "you", "your organization" and "your team" depending on the user subscription
• Texts were updated to fix translation problems, isolated in longer sentences (even if it makes the code look a bit redundant)
• A Bug was fixed where the warning limits would be displayed repeated times. (Was already fixed for non-warning messages)
• The react-markdown library was added to format markdown-like strings

👀 Preview steps

1. ℹ️ have an account and a project
2. have Stripe setup
3. Reach the usage limit or get close to the usage limit. Easiest way is to override values in useUsage.hook.ts
4. Open projects view.
5. 🟢 Banner should show up informing about the usage limit. The message will vary depending on the is_mmo flag from the organization and on the shouldUseTeamLabel from environment.
6. 🟢 For exceeded submissions limits a modal will show up having the same variants as the previous step.

💭 Notes

• The full idea behind some of the changes is to improve translation process, converting broken down texts to longer sentences with context and formatting where needed.
• At first a simpler markdown parser was implemented, but after some discussion in its PR we've decided to use react-markdown instead.
• We could now consider updating the places in Kobo where we're using HTML and it could be dangerous, so @magicznyleszek created a task for that refactor: TASK-1257 🙇🏻

[notion-workspace]

Update usage limit modals and banners

[jamesrkiger]

@pauloamorimbr I think this would probably benefit from being two PRs: One for the new tooling and one for the actual changes to the limit banners.

Also, how would you feel about putting together some unit tests for this? I see we've got a story in there (thanks for that), but this feels like the kind of thing it would be good to have actual tests for to make sure we catch edge cases.