[PM-24033]Implement Subscription Settings UI with Premium and Families Cards

[cyprain-okeke]

🎟️ Tracking

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

📔 Objective

This PR implements the subscription settings page redesign according to the Figma specifications, displaying subscription plan cards and payment modal functionality for users without Premium access through paid organizations or active individual subscriptions.

Acceptance Criteria ✅
GIVEN: ALL the following conditions are met:
✅ User is not granted Premium through a paid organization
✅ User has no active individual Premium subscription
✅ User is viewing Settings > Subscription in the web app

THEN: The implementation provides:
✅ Figma design implementation with Free, Premium, and Families cards displayed
✅ Modal launch functionality for Premium and Families card selection
✅ Payment information form within the modal

📸 Screenshots

Screen.Recording.2025-10-10.at.1.03.06.PM.mov

Screen.Recording.2025-10-10.at.1.01.06.PM.mov

Responsive Recording

Screen.Recording.2025-10-13.at.1.10.15.PM.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 – 30cb6b0e-f420-443e-bbbd-b606a781d360

Great job! No new security vulnerabilities introduced in this pull request

[codecov]

Codecov Report

❌ Patch coverage is 2.53165% with 77 lines in your changes missing coverage. Please review.
✅ Project coverage is 38.89%. Comparing base (e9cd6d2) to head (a8a6b46).
⚠️ Report is 10 commits behind head on main.

Files with missing lines	Patch %	Lines
...ling/individual/premium/premium-vnext.component.ts	0.00%	61 Missing ⚠️
...upgrade-dialog/unified-upgrade-dialog.component.ts	8.33%	11 Missing ⚠️
...ng/individual/individual-billing-routing.module.ts	0.00%	3 Missing ⚠️
...pp/billing/individual/individual-billing.module.ts	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #16822      +/-   ##
==========================================
+ Coverage   38.86%   38.89%   +0.03%     
==========================================
  Files        3420     3436      +16     
  Lines       97312    97561     +249     
  Branches    14625    14673      +48     
==========================================
+ Hits        37822    37951     +129     
- Misses      57835    57951     +116     
- Partials     1655     1659       +4     

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

🚀 New features to boost your workflow:

• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[danielleflinn]

@cyprain-okeke overall looks great! For the "You have the Bitwarden Free plan" badge, can you make sure it is using the component library secondary badge? Right now the screen recording it looks a bit larger than what is in Figma.

Could you also upload a screen recording showing the responsive behavior of the page? Similar to what Stephon did in this PR.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
8.9% Duplication on New Code

See analysis details on SonarQube Cloud

[danielleflinn]

UI looks good - badge styling now looks as expected in the responsive recording, and the responsive behavior looks great! Thanks Cy 🎉