[PM-29608] [PM-29609] Premium subscription redesign cards

[amorask-bitwarden]

🎟️ Tracking

https://bitwarden.atlassian.net/browse/PM-29609
https://bitwarden.atlassian.net/browse/PM-29608

📔 Objective

This PR does some refactoring of existing @bitwarden/pricing components as well as introduces 3 new components in the @bitwarden/subscription library.

@bitwarden/pricing

cart-summary.component

1. Refactors the component to operate off a single input with the Cart type rather than separate inputs for each portion of the cart. This prepares us for this component's usage on the redesigned premium subscription page where we'll fetch an entire cart from the backend.
2. Updates the usage of this component in the upgrade-payment.component by changing input to the Cart type with the same data passed in.
3. Adds an optional header template that can be passed into the component in the case we're rendering the subscription page.
4. Adds support for cart-level Discount display

discount-badge.component

1. Refactors the component to operate off a Discount input, which is a union type of "amount-off" and "percent-off" discounts.
2. Updates the usage of this component in the user-subscription.component by changing the input to the Discount type with the same data passed in.

pricing-card.component

1. Updates the component to use changeDetection: OnPush

@bitwarden/subscription

subscription-card.component

1. Introduces a BitwardenSubscription type which will be fetched from the backend and used to render this card.
2. Implements the component operating off a BitwardenSubscription input and includes a spec file, stories and MDX file.

storage-card.component

1. Introduces a Storage type which will be fetched from the backend and used to render this card.
2. Implements the component operating off a Storage input and includes a spec file, stories and MDX file.

additional-options-card.component

1. Implements the component, spec file, stories and MDX file.

📸 Screenshots

⏰ 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 – 3745bb5d-487b-4056-94db-c170a1d27230

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

[codecov]

Codecov Report

❌ Patch coverage is 64.59627% with 57 lines in your changes missing coverage. Please review.
✅ Project coverage is 42.31%. Comparing base (2665a29) to head (4cbd2b6).
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
...iption-card/subscription-card.component.stories.ts	0.00%	21 Missing ⚠️
...nts/storage-card/storage-card.component.stories.ts	0.00%	17 Missing ⚠️
...grade/upgrade-payment/upgrade-payment.component.ts	18.18%	9 Missing ⚠️
...-card/additional-options-card.component.stories.ts	0.00%	9 Missing ⚠️
.../billing/individual/user-subscription.component.ts	0.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #18145      +/-   ##
==========================================
+ Coverage   42.28%   42.31%   +0.03%     
==========================================
  Files        3599     3606       +7     
  Lines      104552   104705     +153     
  Branches    15782    15803      +21     
==========================================
+ Hits        44208    44310     +102     
- Misses      58469    58520      +51     
  Partials     1875     1875              

☔ 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.

[vleague2]

UIF file is good!