## Summary
We want to show lead enrichment template suggestions to cloud users that
agreed to this. This PR introduces the front-end part of this feature
- Handoff document
- Figma Hi-fi
- [How to
test](https://linear.app/n8n/issue/ADO-1549/[n8n-fe]-update-workflows-list-page-to-show-fake-door-templates#comment-b6644c99)
Tests are being worked on in a separate PR
## Related tickets and issues
Fixes ADO-1546
Fixes ADO-1549
Fixes ADO-1604
## Review / Merge checklist
- [ ] PR title and summary are descriptive. **Remember, the title
automatically goes into the changelog. Use `(no-changelog)` otherwise.**
([conventions](https://github.com/n8n-io/n8n/blob/master/.github/pull_request_title_conventions.md))
- [ ] [Docs updated](https://github.com/n8n-io/n8n-docs) or follow-up
ticket created.
- [ ] Tests included.
> A bug is not considered fixed, unless a test is added to prevent it
from happening again.
> A feature is not complete without tests.
---------
Co-authored-by: ricardo <ricardoespinoza105@gmail.com>
Moving cloud hooks and store initialization logic after users are
authenticated. This will ensure user local account is available when
their cloud plan data is being fetched.
This PR also adds the following error handling improvements:
- Added error handling to the same initialization logic
- Fixed empty `catch` clauses inside the cloud store which caused it to
silently fail and complicated debugging of this bug
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>
