This PR introduces banner framework overhaul:
First version of the banner framework was built to allow multiple
banners to be shown at the same time. Since that proven to be the case
we don't need and it turned out to be pretty messy keeping only one
banner visible in such setup, this PR reworks it so it renders only one
banner at a time, based on [this priority
list](https://www.notion.so/n8n/Banner-stack-60948c4167c743718fde80d6745258d5?pvs=4#6afd052ec8d146a1b0fab8884a19add7)
that is assembled together with our product & design team.
### How to test banner stack:
1. Available banners and their priorities are registered
[here](f9f122d46d/packages/editor-ui/src/components/banners/BannerStack.vue (L14))
2. Banners are pushed to stack using `pushBannerToStack` action, for
example:
```
useUIStore().pushBannerToStack('TRIAL');
```
4. Try pushing different banners to stack and check if only the one with
highest priorities is showing up
### How to test the _Email confirmation_ banner:
1. Comment out [this
line](b80d2e3bec/packages/editor-ui/src/stores/cloudPlan.store.ts (L59)),
so cloud data is always fetched
2. Create an
[override](https://chrome.google.com/webstore/detail/resource-override/pkoacgokdfckfpndoffpifphamojphii)
(URL -> File) that will serve user data that triggers this banner:
- **URL**: `*/rest/cloud/proxy/admin/user/me`
- **File**:
```
{
"confirmed": false,
"id": 1,
"email": "test@test.com",
"username": "test"
}
```
3. Run n8n
* Add ExecutionsUsage component
* set $sidebar-expanded-width back to 200px
* add days using interpolation
* Rename PlanData type to CloudPlanData
* Rename Metadata type to PlanMetadata
* Make prop block in the update button
* Use variable in line-height
* Remove progressBarSection class
* fix trial expiration calculation
* mock expirationDate and fix issue with days left
* Remove unnecesary property from class .container
* inject component data via props
* Check for plan data during app mounting and keep data in the store
* Remove mounted hook
* redirect when upgrade plan is clicked
* Remove computed properties
* Remove instance property as it's not needed anymore
* Flatten plan object
* remove console.log
* Add all cloud types within its own namespace
* keep redirection inside component
* get computed properties back
* Improve polling logic
* Move cloudData to its own store
* Remove commented interfaces
* remove cloudPlan from user store
* fix imports
* update logic for userIsTrialing method
* centralize userIsTrialing method
* redirect to production change plan page always
* Call staging or production cloud api depending on base URL
* remove setting store form ExecutionUsage.vue
* fix linting issue
* Add trial group to PlanMetadata group
* Move helpers into the store
* make staging url check more specific
* make cloud state nullable
* fix linting issue
* swap mockup date for endpoint
* Make getCurrentPlan async
* asas
* Improvements
* small improvements
* chore: resolve conflicts
* make sure there is data before calculating trial expiration
* Fix issue with component not loading on first page load
* type safety improvements
* apply component ui feedback
* fix linting issue
* chore: clean up unnecessary change from merge conflict
* feat: Block api feature using licenses, show notice page for trial cloud users (#6187)
* rename planSpec to plan
* Remove instance property as it's not needed anymore
* Flatten plan object
* remove console.log
* feat: disable api using license
* feat: add api page
* chore: resolve conflicts
* chore: resolve conflicts
* feat: update and refactor a bit
* fix: update endpoints
* fix: update endpoints
* fix: use host
* feat: update copy
* fix linting issues
---------
Co-authored-by: ricardo <ricardoespinoza105@gmail.com>
* add pluralization to days left text
---------
Co-authored-by: Mutasem <mutdmour@gmail.com>
Co-authored-by: Mutasem Aldmour <4711238+mutdmour@users.noreply.github.com>
