Upstream
/
bitwarden-browser
mirror of https://github.com/bitwarden/browser.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

[AC-1970] Add billing navigation group to provider layout (#8941) 

* Add billing navigation item to provider layout with empty subscription page behind FF.

* Fixing tests

* Missed build error

* Addison's feedback

* Remove unused function

* Missed one get$ conversion

* Fixed background failure
This commit is contained in:
Alex Morask 2024-05-03 12:36:10 -04:00 committed by GitHub
parent 4c860e12d7
commit 0b02d2ee1c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
14 changed files with 181 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
bitwarden_license/bit-web/src/app/admin-console/providers/clients/clients.component.ts
View File

@ -1,17 +1,17 @@
import { Component } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { combineLatest, firstValueFrom, from } from "rxjs";
import { concatMap, switchMap, takeUntil } from "rxjs/operators";
import { firstValueFrom, from, map } from "rxjs";
import { switchMap, takeUntil } from "rxjs/operators";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { SearchService } from "@bitwarden/common/abstractions/search.service";
import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction";
import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
import { ProviderStatusType, ProviderUserType } from "@bitwarden/common/admin-console/enums";
import { ProviderUserType } from "@bitwarden/common/admin-console/enums";
import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
import { canAccessBilling } from "@bitwarden/common/billing/abstractions/provider-billing.service.abstraction";
import { PlanType } from "@bitwarden/common/billing/enums";
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
@ -40,10 +40,6 @@ export class ClientsComponent extends BaseClientsComponent {
manageOrganizations = false;
showAddExisting = false;
protected consolidatedBillingEnabled$ = this.configService.getFeatureFlag$(
FeatureFlag.EnableConsolidatedBilling,
);
constructor(
private router: Router,
private providerService: ProviderService,
@ -75,15 +71,10 @@ export class ClientsComponent extends BaseClientsComponent {
.pipe(
switchMap((params) => {
this.providerId = params.providerId;
return combineLatest([
this.providerService.get(this.providerId),
this.consolidatedBillingEnabled$,
]).pipe(
concatMap(([provider, consolidatedBillingEnabled]) => {
if (
consolidatedBillingEnabled &&
provider.providerStatus === ProviderStatusType.Billable
) {
return this.providerService.get$(this.providerId).pipe(
canAccessBilling(this.configService),
map((canAccessBilling) => {
if (canAccessBilling) {
return from(
this.router.navigate(["../manage-client-organizations"], {
relativeTo: this.activatedRoute,

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

@ -1,5 +1,5 @@
<bit-layout variant="secondary">
<nav slot="sidebar" *ngIf="provider">
<nav slot="sidebar" *ngIf="provider$ | async as provider">
<a routerLink="." class="tw-m-5 tw-mt-7 tw-block" [appA11yTitle]="'providerPortal' | i18n">
<bit-icon [icon]="logo"></bit-icon>
</a>
@ -7,14 +7,14 @@
<bit-nav-item
icon="bwi-bank"
[text]="'clients' | i18n"
[route]="
(enableConsolidatedBilling$ | async) &&
provider.providerStatus === ProviderStatusType.Billable
? 'manage-client-organizations'
: 'clients'
"
[route]="(canAccessBilling$ | async) ? 'manage-client-organizations' : 'clients'"
></bit-nav-item>
<bit-nav-group icon="bwi-sliders" [text]="'manage' | i18n" route="manage" *ngIf="showManageTab">
<bit-nav-group
icon="bwi-sliders"
[text]="'manage' | i18n"
route="manage"
*ngIf="showManageTab(provider)"
>
<bit-nav-item
[text]="'people' | i18n"
route="manage/people"
@ -26,13 +26,20 @@
*ngIf="provider.useEvents"
></bit-nav-item>
</bit-nav-group>
<bit-nav-group
icon="bwi-billing"
[text]="'billing' | i18n"
route="billing"
*ngIf="canAccessBilling$ | async"
>
<bit-nav-item [text]="'subscription' | i18n" route="billing/subscription"></bit-nav-item>
</bit-nav-group>
<bit-nav-item
icon="bwi-cogs"
[text]="'settings' | i18n"
route="settings"
*ngIf="showSettingsTab"
*ngIf="showSettingsTab(provider)"
></bit-nav-item>
<app-toggle-width></app-toggle-width>
</nav>
<app-payment-method-warnings

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

@ -1,11 +1,13 @@
import { CommonModule } from "@angular/common";
import { Component } from "@angular/core";
import { Component, OnDestroy, OnInit } from "@angular/core";
import { ActivatedRoute, RouterModule } from "@angular/router";
import { switchMap, Observable, Subject, filter, startWith } from "rxjs";
import { takeUntil } from "rxjs/operators";
import { JslibModule } from "@bitwarden/angular/jslib.module";
import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
import { ProviderStatusType } from "@bitwarden/common/admin-console/enums";
import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
import { canAccessBilling } from "@bitwarden/common/billing/abstractions/provider-billing.service.abstraction";
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components";
@ -28,21 +30,17 @@ import { ToggleWidthComponent } from "@bitwarden/web-vault/app/layouts/toggle-wi
ToggleWidthComponent,
],
})
// eslint-disable-next-line rxjs-angular/prefer-takeuntil
export class ProvidersLayoutComponent {
export class ProvidersLayoutComponent implements OnInit, OnDestroy {
protected readonly logo = ProviderPortalLogo;
provider: Provider;
private providerId: string;
private destroy$ = new Subject<void>();
protected provider$: Observable<Provider>;
protected canAccessBilling$: Observable<boolean>;
protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$(
FeatureFlag.ShowPaymentMethodWarningBanners,
);
protected enableConsolidatedBilling$ = this.configService.getFeatureFlag$(
FeatureFlag.EnableConsolidatedBilling,
);
constructor(
private route: ActivatedRoute,
private providerService: ProviderService,
@ -51,37 +49,30 @@ export class ProvidersLayoutComponent {
ngOnInit() {
document.body.classList.remove("layout_frontend");
// eslint-disable-next-line rxjs-angular/prefer-takeuntil, rxjs/no-async-subscribe
this.route.params.subscribe(async (params) => {
this.providerId = params.providerId;
await this.load();
});
this.provider$ = this.route.params.pipe(
switchMap((params) => this.providerService.get$(params.providerId)),
takeUntil(this.destroy$),
);
this.canAccessBilling$ = this.provider$.pipe(
filter((provider) => !!provider),
canAccessBilling(this.configService),
startWith(false),
takeUntil(this.destroy$),
);
}
async load() {
this.provider = await this.providerService.get(this.providerId);
ngOnDestroy() {
this.destroy$.next();
this.destroy$.complete();
}
get showMenuBar() {
return this.showManageTab || this.showSettingsTab;
showManageTab(provider: Provider) {
return provider.canManageUsers || provider.canAccessEventLogs;
}
get showManageTab() {
return this.provider.canManageUsers || this.provider.canAccessEventLogs;
showSettingsTab(provider: Provider) {
return provider.isProviderAdmin;
}
get showSettingsTab() {
return this.provider.isProviderAdmin;
}
get manageRoute(): string {
switch (true) {
case this.provider.canManageUsers:
return "manage/people";
case this.provider.canAccessEventLogs:
return "manage/events";
}
}
protected readonly ProviderStatusType = ProviderStatusType;
}

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

@ -7,7 +7,8 @@ import { ProvidersComponent } from "@bitwarden/web-vault/app/admin-console/provi
import { FrontendLayoutComponent } from "@bitwarden/web-vault/app/layouts/frontend-layout.component";
import { UserLayoutComponent } from "@bitwarden/web-vault/app/layouts/user-layout.component";
import { ManageClientOrganizationsComponent } from "../../billing/providers/clients/manage-client-organizations.component";
import { ProviderSubscriptionComponent, hasConsolidatedBilling } from "../../billing/providers";
import { ManageClientOrganizationsComponent } from "../../billing/providers/clients";
import { ClientsComponent } from "./clients/clients.component";
import { CreateOrganizationComponent } from "./clients/create-organization.component";
@ -68,6 +69,7 @@ const routes: Routes = [
{ path: "clients", component: ClientsComponent, data: { titleId: "clients" } },
{
path: "manage-client-organizations",
canActivate: [hasConsolidatedBilling],
component: ManageClientOrganizationsComponent,
data: { titleId: "clients" },
},
@ -99,6 +101,25 @@ const routes: Routes = [
},
],
},
{
path: "billing",
canActivate: [hasConsolidatedBilling],
data: { providerPermissions: (provider: Provider) => provider.isProviderAdmin },
children: [
{
path: "",
pathMatch: "full",
redirectTo: "subscription",
},
{
path: "subscription",
component: ProviderSubscriptionComponent,
data: {
titleId: "subscription",
},
},
],
},
{
path: "settings",
children: [

2
bitwarden_license/bit-web/src/app/admin-console/providers/providers.module.ts
View File

@ -9,6 +9,7 @@ import { OrganizationPlansComponent, TaxInfoComponent } from "@bitwarden/web-vau
import { PaymentMethodWarningsModule } from "@bitwarden/web-vault/app/billing/shared";
import { OssModule } from "@bitwarden/web-vault/app/oss.module";
import { ProviderSubscriptionComponent } from "../../billing/providers";
import {
CreateClientOrganizationComponent,
ManageClientOrganizationSubscriptionComponent,
@ -62,6 +63,7 @@ import { SetupComponent } from "./setup/setup.component";
CreateClientOrganizationComponent,
ManageClientOrganizationsComponent,
ManageClientOrganizationSubscriptionComponent,
ProviderSubscriptionComponent,
],
providers: [WebProviderService, ProviderPermissionsGuard],
})

31
bitwarden_license/bit-web/src/app/billing/providers/clients/manage-client-organizations.component.ts
View File

@ -1,17 +1,17 @@
import { Component } from "@angular/core";
import { ActivatedRoute, Router } from "@angular/router";
import { combineLatest, firstValueFrom, from, lastValueFrom } from "rxjs";
import { concatMap, switchMap, takeUntil } from "rxjs/operators";
import { firstValueFrom, from, lastValueFrom, map } from "rxjs";
import { switchMap, takeUntil } from "rxjs/operators";
import { ApiService } from "@bitwarden/common/abstractions/api.service";
import { SearchService } from "@bitwarden/common/abstractions/search.service";
import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
import { ProviderStatusType, ProviderUserType } from "@bitwarden/common/admin-console/enums";
import { ProviderUserType } from "@bitwarden/common/admin-console/enums";
import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
import { ProviderOrganizationOrganizationDetailsResponse } from "@bitwarden/common/admin-console/models/response/provider/provider-organization.response";
import { BillingApiServiceAbstraction as BillingApiService } from "@bitwarden/common/billing/abstractions/billilng-api.service.abstraction";
import { canAccessBilling } from "@bitwarden/common/billing/abstractions/provider-billing.service.abstraction";
import { PlanResponse } from "@bitwarden/common/billing/models/response/plan.response";
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
import { ValidationService } from "@bitwarden/common/platform/abstractions/validation.service";
@ -36,10 +36,6 @@ export class ManageClientOrganizationsComponent extends BaseClientsComponent {
loading = true;
manageOrganizations = false;
private consolidatedBillingEnabled$ = this.configService.getFeatureFlag$(
FeatureFlag.EnableConsolidatedBilling,
);
protected plans: PlanResponse[];
constructor(
@ -72,23 +68,16 @@ export class ManageClientOrganizationsComponent extends BaseClientsComponent {
.pipe(
switchMap((params) => {
this.providerId = params.providerId;
return combineLatest([
this.providerService.get(this.providerId),
this.consolidatedBillingEnabled$,
]).pipe(
concatMap(([provider, consolidatedBillingEnabled]) => {
if (
!consolidatedBillingEnabled ||
provider.providerStatus !== ProviderStatusType.Billable
) {
return this.providerService.get$(this.providerId).pipe(
canAccessBilling(this.configService),
map((canAccessBilling) => {
if (!canAccessBilling) {
return from(
this.router.navigate(["../clients"], {
relativeTo: this.activatedRoute,
}),
);
} else {
this.provider = provider;
this.manageOrganizations = this.provider.type === ProviderUserType.ProviderAdmin;
return from(this.load());
}
}),
@ -104,6 +93,10 @@ export class ManageClientOrganizationsComponent extends BaseClientsComponent {
}
async load() {
this.provider = await firstValueFrom(this.providerService.get$(this.providerId));
this.manageOrganizations = this.provider.type === ProviderUserType.ProviderAdmin;
this.clients = (await this.apiService.getProviderClients(this.providerId)).data;
this.dataSource.data = this.clients;

30
bitwarden_license/bit-web/src/app/billing/providers/guards/has-consolidated-billing.guard.ts Normal file
View File

@ -0,0 +1,30 @@
import { inject } from "@angular/core";
import { ActivatedRouteSnapshot, CanActivateFn, createUrlTreeFromSnapshot } from "@angular/router";
import { firstValueFrom } from "rxjs";
import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service";
import { ProviderStatusType } from "@bitwarden/common/admin-console/enums";
import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
export const hasConsolidatedBilling: CanActivateFn = async (route: ActivatedRouteSnapshot) => {
const configService = inject(ConfigService);
const providerService = inject(ProviderService);
const provider = await firstValueFrom(providerService.get$(route.params.providerId));
const consolidatedBillingEnabled = await configService.getFeatureFlag(
FeatureFlag.EnableConsolidatedBilling,
);
if (
!consolidatedBillingEnabled ||
!provider ||
!provider.isProviderAdmin ||
provider.providerStatus !== ProviderStatusType.Billable
) {
return createUrlTreeFromSnapshot(route, ["/providers", route.params.providerId]);
}
return true;
};

2
bitwarden_license/bit-web/src/app/billing/providers/index.ts Normal file
View File

@ -0,0 +1,2 @@
export * from "./guards/has-consolidated-billing.guard";
export * from "./provider-subscription.component";

1
bitwarden_license/bit-web/src/app/billing/providers/provider-subscription.component.html Normal file
View File

@ -0,0 +1 @@
<app-header></app-header>

7
bitwarden_license/bit-web/src/app/billing/providers/provider-subscription.component.ts Normal file
View File

@ -0,0 +1,7 @@
import { Component } from "@angular/core";
@Component({
selector: "app-provider-subscription",
templateUrl: "./provider-subscription.component.html",
})
export class ProviderSubscriptionComponent {}

3
libs/common/src/admin-console/abstractions/provider.service.ts
View File

@ -1,8 +1,11 @@
import { Observable } from "rxjs";
import { UserId } from "../../types/guid";
import { ProviderData } from "../models/data/provider.data";
import { Provider } from "../models/domain/provider";
export abstract class ProviderService {
get$: (id: string) => Observable<Provider>;
get: (id: string) => Promise<Provider>;
getAll: () => Promise<Provider[]>;
save: (providers: { [id: string]: ProviderData }, userId?: UserId) => Promise<any>;

19
libs/common/src/admin-console/services/provider.service.spec.ts
View File

@ -1,3 +1,5 @@
import { firstValueFrom } from "rxjs";
import { FakeAccountService, FakeStateProvider, mockAccountServiceWith } from "../../../spec";
import { FakeActiveUserState, FakeSingleUserState } from "../../../spec/fake-state";
import { Utils } from "../../platform/misc/utils";
@ -86,6 +88,7 @@ describe("ProviderService", () => {
fakeStateProvider = new FakeStateProvider(fakeAccountService);
fakeUserState = fakeStateProvider.singleUser.getFake(fakeUserId, PROVIDERS);
fakeActiveUserState = fakeStateProvider.activeUser.getFake(PROVIDERS);
providerService = new ProviderService(fakeStateProvider);
});
@ -106,6 +109,22 @@ describe("ProviderService", () => {
});
});
describe("get$()", () => {
it("Returns an observable of a single provider from state that matches the specified id", async () => {
const mockData = buildMockProviders(5);
fakeUserState.nextState(arrayToRecord(mockData));
const result = providerService.get$(mockData[3].id);
const provider = await firstValueFrom(result);
expect(provider).toEqual(new Provider(mockData[3]));
});
it("Returns an observable of undefined if the specified provider is not found", async () => {
const result = providerService.get$("this-provider-does-not-exist");
const provider = await firstValueFrom(result);
expect(provider).toBe(undefined);
});
});
describe("get()", () => {
it("Returns a single provider from state that matches the specified id", async () => {
const mockData = buildMockProviders(5);

8
libs/common/src/admin-console/services/provider.service.ts
View File

@ -1,6 +1,6 @@
import { Observable, map, firstValueFrom, of, switchMap, take } from "rxjs";
import { firstValueFrom, map, Observable, of, switchMap, take } from "rxjs";
import { UserKeyDefinition, PROVIDERS_DISK, StateProvider } from "../../platform/state";
import { PROVIDERS_DISK, StateProvider, UserKeyDefinition } from "../../platform/state";
import { UserId } from "../../types/guid";
import { ProviderService as ProviderServiceAbstraction } from "../abstractions/provider.service";
import { ProviderData } from "../models/data/provider.data";
@ -38,6 +38,10 @@ export class ProviderService implements ProviderServiceAbstraction {
);
}
get$(id: string): Observable<Provider> {
return this.providers$().pipe(mapToSingleProvider(id));
}
async get(id: string): Promise<Provider> {
return await firstValueFrom(this.providers$().pipe(mapToSingleProvider(id)));
}

25
libs/common/src/billing/abstractions/provider-billing.service.abstraction.ts Normal file
View File

@ -0,0 +1,25 @@
import { map, Observable, OperatorFunction, switchMap } from "rxjs";
import { ProviderStatusType } 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";
type MaybeProvider = Provider | undefined;
export const canAccessBilling = (
configService: ConfigService,
): OperatorFunction<MaybeProvider, boolean> =>
switchMap<MaybeProvider, Observable<boolean>>((provider) =>
configService
.getFeatureFlag$(FeatureFlag.EnableConsolidatedBilling)
.pipe(
map((consolidatedBillingEnabled) =>
provider
? provider.isProviderAdmin &&
provider.providerStatus === ProviderStatusType.Billable &&
consolidatedBillingEnabled
: false,
),
),
);