[PM-24033]Implement Subscription Settings UI with Premium and Families Cards (#16822)

* Add initial changes for thenew premium design

* Add the messages

* Add the new dialog modal

* Resolve the flag issue

* Added changes for redirect

* Fix the unitest errors

* Resolve the badge issue

* refactor the code base pr comments

libs/common/src/enums/feature-flag.enum.ts

@@ -28,6 +28,7 @@ export enum FeatureFlag {
   PM24032_NewNavigationPremiumUpgradeButton = "pm-24032-new-navigation-premium-upgrade-button",
   PM25379_UseNewOrganizationMetadataStructure = "pm-25379-use-new-organization-metadata-structure",
   PM24996_ImplementUpgradeFromFreeDialog = "pm-24996-implement-upgrade-from-free-dialog",
+  PM24033PremiumUpgradeNewDesign = "pm-24033-updat-premium-subscription-page",
 
   /* Key Management */
   PrivateKeyRegeneration = "pm-12241-private-key-regeneration",
@@ -106,6 +107,7 @@ export const DefaultFeatureFlagValue = {
   [FeatureFlag.PM24032_NewNavigationPremiumUpgradeButton]: FALSE,
   [FeatureFlag.PM25379_UseNewOrganizationMetadataStructure]: FALSE,
   [FeatureFlag.PM24996_ImplementUpgradeFromFreeDialog]: FALSE,
+  [FeatureFlag.PM24033PremiumUpgradeNewDesign]: FALSE,
 
   /* Key Management */
   [FeatureFlag.PrivateKeyRegeneration]: FALSE,

libs/pricing/src/components/pricing-card/pricing-card.component.html

@@ -14,7 +14,7 @@
   </div>
 
   <!-- Tagline with consistent height (exactly 2 lines) -->
-  <div class="tw-mb-6 tw-h-12">
+  <div class="tw-mb-6 tw-h-6">
     <p bitTypography="helper" class="tw-text-muted tw-m-0 tw-leading-relaxed tw-line-clamp-2">
       {{ tagline() }}
     </p>
@@ -25,7 +25,7 @@
     <div class="tw-mb-6">
       <div class="tw-flex tw-items-baseline tw-gap-1 tw-flex-wrap">
         <span class="tw-text-3xl tw-font-bold tw-leading-none tw-m-0">{{
-          priceValue.amount | currency: "USD" : "symbol"
+          priceValue.amount | currency: "$"
         }}</span>
         <span bitTypography="helper" class="tw-text-muted">
           / {{ priceValue.cadence }}