[PM-21881] Manage payment details outside of checkout (#15458)

* Add billable-entity

* Add payment types

* Add billing.client

* Update stripe.service

* Add payment method components

* Add address.pipe

* Add billing address components

* Add account credit components

* Add component index

* Add feature flag

* Re-work organization warnings code

* Add organization-payment-details.component

* Backfill translations

* Set up organization FF routing

* Add account-payment-details.component

* Set up account FF routing

* Add provider-payment-details.component

* Set up provider FF routing

* Use inline component templates for re-usable payment components

* Remove errant rebase file

* Removed public accessibility modifier

* Fix failing test

bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html

@@ -31,6 +31,12 @@
       *ngIf="canAccessBilling$ | async"
     >
       <bit-nav-item [text]="'subscription' | i18n" route="billing/subscription"></bit-nav-item>
+      @if (managePaymentDetailsOutsideCheckout$ | async) {
+        <bit-nav-item
+          [text]="'paymentDetails' | i18n"
+          route="billing/payment-details"
+        ></bit-nav-item>
+      }
       <bit-nav-item [text]="'billingHistory' | i18n" route="billing/history"></bit-nav-item>
     </bit-nav-group>
     <bit-nav-item

bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts

@@ -10,6 +10,8 @@ import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
 import { ProviderStatusType, ProviderType } from "@bitwarden/common/admin-console/enums";
 import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { Icon, IconModule } from "@bitwarden/components";
 import { BusinessUnitPortalLogo } from "@bitwarden/web-vault/app/admin-console/icons/business-unit-portal-logo.icon";
 import { ProviderPortalLogo } from "@bitwarden/web-vault/app/admin-console/icons/provider-portal-logo";
@@ -32,10 +34,12 @@ export class ProvidersLayoutComponent implements OnInit, OnDestroy {
   protected canAccessBilling$: Observable<boolean>;
 
   protected clientsTranslationKey$: Observable<string>;
+  protected managePaymentDetailsOutsideCheckout$: Observable<boolean>;
 
   constructor(
     private route: ActivatedRoute,
     private providerService: ProviderService,
+    private configService: ConfigService,
   ) {}
 
   ngOnInit() {
@@ -69,6 +73,10 @@ export class ProvidersLayoutComponent implements OnInit, OnDestroy {
         provider.providerType === ProviderType.BusinessUnit ? "businessUnits" : "clients",
       ),
     );
+
+    this.managePaymentDetailsOutsideCheckout$ = this.configService.getFeatureFlag$(
+      FeatureFlag.PM21881_ManagePaymentDetailsOutsideCheckout,
+    );
   }
 
   ngOnDestroy() {

bitwarden_license/bit-web/src/app/admin-console/providers/providers-routing.module.ts

@@ -13,6 +13,7 @@ import {
   hasConsolidatedBilling,
   ProviderBillingHistoryComponent,
 } from "../../billing/providers";
+import { ProviderPaymentDetailsComponent } from "../../billing/providers/payment-details/provider-payment-details.component";
 import { SetupBusinessUnitComponent } from "../../billing/providers/setup/setup-business-unit.component";
 
 import { ClientsComponent } from "./clients/clients.component";
@@ -142,6 +143,14 @@ const routes: Routes = [
                   titleId: "subscription",
                 },
               },
+              {
+                path: "payment-details",
+                component: ProviderPaymentDetailsComponent,
+                canActivate: [providerPermissionsGuard()],
+                data: {
+                  titleId: "paymentDetails",
+                },
+              },
               {
                 path: "history",
                 component: ProviderBillingHistoryComponent,