[PM 18701]Optional payment modal after signup (#15384)

* Implement the planservice

* Add the pricing component and service

* Add the change plan type service

* resolve the unit test issues

* Move the changeSubscriptionFrequency endpoint

* Rename planservice to plancardservice

* Remove unused and correct typos

* Resolve the double asignment

* resolve the unit test failing

* Remove default payment setting to card

* remove unnecessary check

* Property initialPaymentMethod has no initializer

* move the logic to service

* Move estimate tax to pricing service

* Refactor thr pricing summary component

* Resolve the lint unit test error

* Add changes for auto modal

* Remove custom role for sm

* Resolve the blank member page issue

* Changes on the pricing display

apps/web/src/app/admin-console/organizations/members/members.component.html

@@ -1,3 +1,8 @@
+<app-organization-free-trial-warning
+  [organization]="organization"
+  (clicked)="navigateToPaymentMethod()"
+>
+</app-organization-free-trial-warning>
 <app-header>
   <bit-search
     class="tw-grow"

apps/web/src/app/admin-console/organizations/members/members.component.ts

@@ -13,6 +13,7 @@ import {
   Observable,
   shareReplay,
   switchMap,
+  tap,
 } from "rxjs";
 
 import {
@@ -61,6 +62,7 @@ import {
   ChangePlanDialogResultType,
   openChangePlanDialog,
 } from "../../../billing/organizations/change-plan-dialog.component";
+import { OrganizationWarningsService } from "../../../billing/warnings/services";
 import { BaseMembersComponent } from "../../common/base-members.component";
 import { PeopleTableDataSource } from "../../common/people-table-data-source";
 import { GroupApiService } from "../core";
@@ -148,6 +150,7 @@ export class MembersComponent extends BaseMembersComponent<OrganizationUserView>
     protected deleteManagedMemberWarningService: DeleteManagedMemberWarningService,
     private configService: ConfigService,
     private organizationUserService: OrganizationUserService,
+    private organizationWarningsService: OrganizationWarningsService,
   ) {
     super(
       apiService,
@@ -247,6 +250,13 @@ export class MembersComponent extends BaseMembersComponent<OrganizationUserView>
     this.showUserManagementControls$ = organization$.pipe(
       map((organization) => organization.canManageUsers),
     );
+    organization$
+      .pipe(
+        takeUntilDestroyed(),
+        tap((org) => (this.organization = org)),
+        switchMap((org) => this.organizationWarningsService.showInactiveSubscriptionDialog$(org)),
+      )
+      .subscribe();
   }
 
   async getUsers(): Promise<OrganizationUserView[]> {
@@ -932,4 +942,14 @@ export class MembersComponent extends BaseMembersComponent<OrganizationUserView>
       .getCheckedUsers()
       .every((member) => member.managedByOrganization && validStatuses.includes(member.status));
   }
+
+  async navigateToPaymentMethod() {
+    const managePaymentDetailsOutsideCheckout = await this.configService.getFeatureFlag(
+      FeatureFlag.PM21881_ManagePaymentDetailsOutsideCheckout,
+    );
+    const route = managePaymentDetailsOutsideCheckout ? "payment-details" : "payment-method";
+    await this.router.navigate(["organizations", `${this.organization?.id}`, "billing", route], {
+      state: { launchPaymentModalAutomatically: true },
+    });
+  }
 }

apps/web/src/app/admin-console/organizations/members/members.module.ts

@@ -5,6 +5,7 @@ import { PasswordStrengthV2Component } from "@bitwarden/angular/tools/password-s
 import { PasswordCalloutComponent } from "@bitwarden/auth/angular";
 import { ScrollLayoutDirective } from "@bitwarden/components";
 
+import { OrganizationFreeTrialWarningComponent } from "../../../billing/warnings/components";
 import { LooseComponentsModule } from "../../../shared";
 import { SharedOrganizationModule } from "../shared";
 
@@ -29,6 +30,7 @@ import { MembersComponent } from "./members.component";
     ScrollingModule,
     PasswordStrengthV2Component,
     ScrollLayoutDirective,
+    OrganizationFreeTrialWarningComponent,
   ],
   declarations: [
     BulkConfirmDialogComponent,