[PM-15808]Show suspended org modals for orgs in 'unpaid' & 'canceled' status

[cyprain-okeke]

🎟️ Tracking

https://bitwarden.atlassian.net/browse/PM-15808

📔 Objective

display a modal (see figma)

there will be different versions of the modal depending on the user role and whether the organization is independent, MSP managed, or reseller managed.

For the independent org Owner

when subscription is in unpaid, keep the existing flow where they see the notice, and then they are taken to the payment method section of the admin console.

when the subscription is in canceled, then we show them the upgrade path UI.

we show them the current equivalent to their previous subscription. So, if they were on a Family, we show them Family, if they were on Enterprise 2019, we show them CURRENT Enterprise.

📸 Screenshots

Uploading Screen Recording 2024-12-20 at 16.55.32.mov…

Uploading Screen Recording 2024-12-20 at 16.56.47.mov…

Uploading Screen Recording 2024-12-20 at 17.09.00.mov…

⏰ Reminders before review

• Contributor guidelines followed
• All formatters and local linters executed and passed
• Written new unit and / or integration tests where applicable
• Protected functional changes with optionality (feature flags)
• Used internationalization (i18n) for all UI strings
• CI builds passed
• Communicated to DevOps any deployment requirements
• Updated any necessary documentation (Confluence, contributing docs) or informed the documentation team

🦮 Reviewer guidelines

• 👍 (:+1:) or similar for great changes
• 📝 (:memo:) or ℹ️ (:information_source:) for notes or general info
• ❓ (:question:) for questions
• 🤔 (:thinking:) or 💭 (:thought_balloon:) for more open inquiry that's not quite a confirmed issue and could potentially benefit from discussion
• 🎨 (:art:) for suggestions / improvements
• ❌ (:x:) or ⚠️ (:warning:) for more significant problems or concerns needing attention
• 🌱 (:seedling:) or ♻️ (:recycle:) for future improvements or indications of technical debt
• ⛏ (:pick:) for minor or nitpick changes

[github-actions]

Checkmarx One – Scan Summary & Details – 4bd97935-fb39-4fcf-be9d-88445610b2c3

Fixed Issues

Severity	Issue	Source File / Package
	Client_Privacy_Violation	/apps/browser/src/vault/popup/components/vault-v2/vault-list-items-container/vault-list-items-container.component.html: 15

[codecov]

Codecov Report

Attention: Patch coverage is 6.75676% with 69 lines in your changes missing coverage. Please review.

Project coverage is 33.80%. Comparing base (23210f4) to head (1b51596).

✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...ling/organizations/change-plan-dialog.component.ts	5.00%	38 Missing ⚠️
...web/src/app/billing/services/trial-flow.service.ts	13.63%	19 Missing ⚠️
...c/billing/services/organization-billing.service.ts	0.00%	7 Missing ⚠️
.../vault-filter/components/vault-filter.component.ts	0.00%	3 Missing ⚠️
...response/organization-billing-metadata.response.ts	0.00%	1 Missing ⚠️
...common/src/billing/services/billing-api.service.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #12507      +/-   ##
==========================================
+ Coverage   33.78%   33.80%   +0.02%     
==========================================
  Files        2912     2912              
  Lines       90701    90747      +46     
  Branches    17153    17162       +9     
==========================================
+ Hits        30641    30680      +39     
+ Misses      57674    57666       -8     
- Partials     2386     2401      +15     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.