From 7cfe862aa6c7d4342c762d4653024d5af87204fd Mon Sep 17 00:00:00 2001 From: Alex Morask <144709477+amorask-bitwarden@users.noreply.github.com> Date: Thu, 29 Feb 2024 08:18:47 -0500 Subject: [PATCH] [PM-5971] Fix Payment Method Warning Bugs (#7923) * Rework implementation of payment method warnings * Move payment-method-warnings.component to module * Moved timer/subscribe to app.component * Remove unrelated refactoring * Remaining feedback * Add paymentMethodWarningsService tests * Thomas' feedback * fix tests * Use barrel file imports * Make banner work with new vault navigation * Matt's feedback --- .../organization-layout.component.html | 7 +- .../layouts/organization-layout.component.ts | 12 +- apps/web/src/app/app.component.ts | 24 ++- .../shared/adjust-payment.component.ts | 6 +- apps/web/src/app/billing/shared/index.ts | 1 + .../payment-method-warnings.component.html | 15 ++ .../payment-method-warnings.component.ts | 33 ++++ .../payment-method-warnings.module.ts | 14 ++ .../payment-method-banners.component.html | 15 -- .../payment-method-banners.component.ts | 76 ------- .../app/layouts/user-layout.component.html | 7 +- .../src/app/layouts/user-layout.component.ts | 12 +- .../src/app/shared/loose-components.module.ts | 4 +- .../providers/providers-layout.component.html | 7 +- .../providers/providers-layout.component.ts | 12 +- .../providers/providers.module.ts | 4 +- .../providers/setup/setup.component.html | 4 +- .../providers/setup/setup.component.ts | 8 + .../src/services/jslib-services.module.ts | 16 +- .../organization-api.service.abstraction.ts | 2 - .../organization/organization-api.service.ts | 15 -- .../billilng-api.service.abstraction.ts | 2 + .../billing-banner.service.abstraction.ts | 6 - ...ent-method-warnings-service.abstraction.ts | 31 +++ .../src/billing/models/billing-keys.state.ts | 13 ++ .../models/domain/payment-method-warning.ts | 6 + .../organization-billing-status.response.ts | 15 ++ .../billing/services/billing-api.service.ts | 13 ++ .../services/billing-banner.service.ts | 44 ----- .../payment-method-warnings.service.spec.ts | 186 ++++++++++++++++++ .../payment-method-warnings.service.ts | 74 +++++++ libs/common/src/enums/feature-flag.enum.ts | 1 + .../src/platform/state/state-definitions.ts | 4 +- 33 files changed, 495 insertions(+), 194 deletions(-) create mode 100644 apps/web/src/app/billing/shared/payment-method-warnings/payment-method-warnings.component.html create mode 100644 apps/web/src/app/billing/shared/payment-method-warnings/payment-method-warnings.component.ts create mode 100644 apps/web/src/app/billing/shared/payment-method-warnings/payment-method-warnings.module.ts delete mode 100644 apps/web/src/app/components/payment-method-banners/payment-method-banners.component.html delete mode 100644 apps/web/src/app/components/payment-method-banners/payment-method-banners.component.ts delete mode 100644 libs/common/src/billing/abstractions/billing-banner.service.abstraction.ts create mode 100644 libs/common/src/billing/abstractions/payment-method-warnings-service.abstraction.ts create mode 100644 libs/common/src/billing/models/billing-keys.state.ts create mode 100644 libs/common/src/billing/models/domain/payment-method-warning.ts create mode 100644 libs/common/src/billing/models/response/organization-billing-status.response.ts delete mode 100644 libs/common/src/billing/services/billing-banner.service.ts create mode 100644 libs/common/src/billing/services/payment-method-warnings.service.spec.ts create mode 100644 libs/common/src/billing/services/payment-method-warnings.service.ts diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html index ef35b3c2b4..348c410075 100644 --- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html +++ b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html @@ -115,10 +115,9 @@ > {{ "accessingUsingProvider" | i18n: organization.providerName }} - + diff --git a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts index efbcaf292d..81b1ca142b 100644 --- a/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts +++ b/apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts @@ -15,10 +15,12 @@ import { OrganizationService, } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction"; import { Organization } from "@bitwarden/common/admin-console/models/domain/organization"; +import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; +import { ConfigServiceAbstraction as ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; import { BannerModule, IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components"; -import { PaymentMethodBannersComponent } from "../../../components/payment-method-banners/payment-method-banners.component"; +import { PaymentMethodWarningsModule } from "../../../billing/shared"; import { OrgSwitcherComponent } from "../../../layouts/org-switcher/org-switcher.component"; import { AdminConsoleLogo } from "../../icons/admin-console-logo"; @@ -35,7 +37,7 @@ import { AdminConsoleLogo } from "../../icons/admin-console-logo"; NavigationModule, OrgSwitcherComponent, BannerModule, - PaymentMethodBannersComponent, + PaymentMethodWarningsModule, ], }) export class OrganizationLayoutComponent implements OnInit, OnDestroy { @@ -48,10 +50,16 @@ export class OrganizationLayoutComponent implements OnInit, OnDestroy { private _destroy = new Subject(); + protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$( + FeatureFlag.ShowPaymentMethodWarningBanners, + false, + ); + constructor( private route: ActivatedRoute, private organizationService: OrganizationService, private platformUtilsService: PlatformUtilsService, + private configService: ConfigService, ) {} async ngOnInit() { diff --git a/apps/web/src/app/app.component.ts b/apps/web/src/app/app.component.ts index f9479a92ce..77f6fd6f1f 100644 --- a/apps/web/src/app/app.component.ts +++ b/apps/web/src/app/app.component.ts @@ -4,16 +4,18 @@ import { DomSanitizer } from "@angular/platform-browser"; import { NavigationEnd, Router } from "@angular/router"; import * as jq from "jquery"; import { IndividualConfig, ToastrService } from "ngx-toastr"; -import { Subject, takeUntil } from "rxjs"; +import { Subject, switchMap, takeUntil, timer } from "rxjs"; import { EventUploadService } from "@bitwarden/common/abstractions/event/event-upload.service"; import { NotificationsService } from "@bitwarden/common/abstractions/notifications.service"; import { SearchService } from "@bitwarden/common/abstractions/search.service"; import { SettingsService } from "@bitwarden/common/abstractions/settings.service"; import { VaultTimeoutService } from "@bitwarden/common/abstractions/vault-timeout/vault-timeout.service"; +import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction"; import { InternalPolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction"; import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service"; import { KeyConnectorService } from "@bitwarden/common/auth/abstractions/key-connector.service"; +import { PaymentMethodWarningsServiceAbstraction as PaymentMethodWarningService } from "@bitwarden/common/billing/abstractions/payment-method-warnings-service.abstraction"; import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service"; import { ConfigServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction"; import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service"; @@ -45,6 +47,7 @@ import { RouterService } from "./core"; const BroadcasterSubscriptionId = "AppComponent"; const IdleTimeout = 60000 * 10; // 10 minutes +const PaymentMethodWarningsRefresh = 60000; // 1 Minute @Component({ selector: "app-root", @@ -55,6 +58,7 @@ export class AppComponent implements OnDestroy, OnInit { private idleTimer: number = null; private isIdle = false; private destroy$ = new Subject(); + private paymentMethodWarningsRefresh$ = timer(0, PaymentMethodWarningsRefresh); constructor( @Inject(DOCUMENT) private document: Document, @@ -85,6 +89,8 @@ export class AppComponent implements OnDestroy, OnInit { private configService: ConfigServiceAbstraction, private dialogService: DialogService, private biometricStateService: BiometricStateService, + private paymentMethodWarningService: PaymentMethodWarningService, + private organizationService: OrganizationService, ) {} ngOnInit() { @@ -238,6 +244,21 @@ export class AppComponent implements OnDestroy, OnInit { new DisableSendPolicy(), new SendOptionsPolicy(), ]); + + this.paymentMethodWarningsRefresh$ + .pipe( + switchMap(() => this.organizationService.memberOrganizations$), + switchMap( + async (organizations) => + await Promise.all( + organizations.map((organization) => + this.paymentMethodWarningService.update(organization.id), + ), + ), + ), + takeUntil(this.destroy$), + ) + .subscribe(); } ngOnDestroy() { @@ -260,6 +281,7 @@ export class AppComponent implements OnDestroy, OnInit { this.passwordGenerationService.clear(), this.keyConnectorService.clear(), this.biometricStateService.logout(userId as UserId), + this.paymentMethodWarningService.clear(), ]); this.searchService.clearIndex(); diff --git a/apps/web/src/app/billing/shared/adjust-payment.component.ts b/apps/web/src/app/billing/shared/adjust-payment.component.ts index 595566b11d..7452344141 100644 --- a/apps/web/src/app/billing/shared/adjust-payment.component.ts +++ b/apps/web/src/app/billing/shared/adjust-payment.component.ts @@ -2,7 +2,7 @@ import { Component, EventEmitter, Input, Output, ViewChild } from "@angular/core import { ApiService } from "@bitwarden/common/abstractions/api.service"; import { OrganizationApiServiceAbstraction } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction"; -import { BillingBannerServiceAbstraction } from "@bitwarden/common/billing/abstractions/billing-banner.service.abstraction"; +import { PaymentMethodWarningsServiceAbstraction as PaymentMethodWarningService } from "@bitwarden/common/billing/abstractions/payment-method-warnings-service.abstraction"; import { PaymentMethodType } from "@bitwarden/common/billing/enums"; import { PaymentRequest } from "@bitwarden/common/billing/models/request/payment.request"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; @@ -34,7 +34,7 @@ export class AdjustPaymentComponent { private platformUtilsService: PlatformUtilsService, private logService: LogService, private organizationApiService: OrganizationApiServiceAbstraction, - private billingBannerService: BillingBannerServiceAbstraction, + private paymentMethodWarningService: PaymentMethodWarningService, ) {} async submit() { @@ -59,7 +59,7 @@ export class AdjustPaymentComponent { }); await this.formPromise; if (this.organizationId) { - await this.billingBannerService.setPaymentMethodBannerState(this.organizationId, false); + await this.paymentMethodWarningService.removeSubscriptionRisk(this.organizationId); } this.platformUtilsService.showToast( "success", diff --git a/apps/web/src/app/billing/shared/index.ts b/apps/web/src/app/billing/shared/index.ts index ae28e45f78..edaf3a1199 100644 --- a/apps/web/src/app/billing/shared/index.ts +++ b/apps/web/src/app/billing/shared/index.ts @@ -3,3 +3,4 @@ export * from "./payment-method.component"; export * from "./payment.component"; export * from "./sm-subscribe.component"; export * from "./tax-info.component"; +export * from "./payment-method-warnings/payment-method-warnings.module"; diff --git a/apps/web/src/app/billing/shared/payment-method-warnings/payment-method-warnings.component.html b/apps/web/src/app/billing/shared/payment-method-warnings/payment-method-warnings.component.html new file mode 100644 index 0000000000..59dbc5f976 --- /dev/null +++ b/apps/web/src/app/billing/shared/payment-method-warnings/payment-method-warnings.component.html @@ -0,0 +1,15 @@ + + + {{ "maintainYourSubscription" | i18n: warning.organizationName }} + {{ "addAPaymentMethod" | i18n }}. + + diff --git a/apps/web/src/app/billing/shared/payment-method-warnings/payment-method-warnings.component.ts b/apps/web/src/app/billing/shared/payment-method-warnings/payment-method-warnings.component.ts new file mode 100644 index 0000000000..d811961c0d --- /dev/null +++ b/apps/web/src/app/billing/shared/payment-method-warnings/payment-method-warnings.component.ts @@ -0,0 +1,33 @@ +import { Component } from "@angular/core"; +import { map, Observable } from "rxjs"; + +import { PaymentMethodWarningsServiceAbstraction as PaymentMethodWarningService } from "@bitwarden/common/billing/abstractions/payment-method-warnings-service.abstraction"; + +type Warning = { + organizationId: string; + organizationName: string; +}; + +@Component({ + selector: "app-payment-method-warnings", + templateUrl: "payment-method-warnings.component.html", +}) +export class PaymentMethodWarningsComponent { + constructor(private paymentMethodWarningService: PaymentMethodWarningService) {} + + protected warnings$: Observable = + this.paymentMethodWarningService.paymentMethodWarnings$.pipe( + map((warnings) => + Object.entries(warnings ?? []) + .filter(([_, warning]) => warning.risksSubscriptionFailure && !warning.acknowledged) + .map(([organizationId, { organizationName }]) => ({ + organizationId, + organizationName, + })), + ), + ); + + protected async closeWarning(organizationId: string): Promise { + await this.paymentMethodWarningService.acknowledge(organizationId); + } +} diff --git a/apps/web/src/app/billing/shared/payment-method-warnings/payment-method-warnings.module.ts b/apps/web/src/app/billing/shared/payment-method-warnings/payment-method-warnings.module.ts new file mode 100644 index 0000000000..c6303c878c --- /dev/null +++ b/apps/web/src/app/billing/shared/payment-method-warnings/payment-method-warnings.module.ts @@ -0,0 +1,14 @@ +import { NgModule } from "@angular/core"; + +import { BannerModule } from "@bitwarden/components"; + +import { SharedModule } from "../../../shared"; + +import { PaymentMethodWarningsComponent } from "./payment-method-warnings.component"; + +@NgModule({ + imports: [BannerModule, SharedModule], + declarations: [PaymentMethodWarningsComponent], + exports: [PaymentMethodWarningsComponent], +}) +export class PaymentMethodWarningsModule {} diff --git a/apps/web/src/app/components/payment-method-banners/payment-method-banners.component.html b/apps/web/src/app/components/payment-method-banners/payment-method-banners.component.html deleted file mode 100644 index 1820525ee8..0000000000 --- a/apps/web/src/app/components/payment-method-banners/payment-method-banners.component.html +++ /dev/null @@ -1,15 +0,0 @@ - - - {{ "maintainYourSubscription" | i18n: banner.organizationName }} - {{ "addAPaymentMethod" | i18n }}. - - diff --git a/apps/web/src/app/components/payment-method-banners/payment-method-banners.component.ts b/apps/web/src/app/components/payment-method-banners/payment-method-banners.component.ts deleted file mode 100644 index 1a7e3730db..0000000000 --- a/apps/web/src/app/components/payment-method-banners/payment-method-banners.component.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { Component } from "@angular/core"; -import { combineLatest, Observable, switchMap } from "rxjs"; - -import { OrganizationApiServiceAbstraction as OrganizationApiService } from "@bitwarden/common/admin-console/abstractions/organization/organization-api.service.abstraction"; -import { - canAccessAdmin, - OrganizationService, -} from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction"; -import { BillingBannerServiceAbstraction } from "@bitwarden/common/billing/abstractions/billing-banner.service.abstraction"; -import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; -import { BannerModule } from "@bitwarden/components"; - -import { SharedModule } from "../../shared/shared.module"; - -type PaymentMethodBannerData = { - organizationId: string; - organizationName: string; - visible: boolean; -}; - -@Component({ - standalone: true, - selector: "app-payment-method-banners", - templateUrl: "payment-method-banners.component.html", - imports: [BannerModule, SharedModule], -}) -export class PaymentMethodBannersComponent { - constructor( - private billingBannerService: BillingBannerServiceAbstraction, - private i18nService: I18nService, - private organizationService: OrganizationService, - private organizationApiService: OrganizationApiService, - ) {} - - private organizations$ = this.organizationService.memberOrganizations$.pipe( - canAccessAdmin(this.i18nService), - ); - - protected banners$: Observable = combineLatest([ - this.organizations$, - this.billingBannerService.paymentMethodBannerStates$, - ]).pipe( - switchMap(async ([organizations, paymentMethodBannerStates]) => { - return await Promise.all( - organizations.map(async (organization) => { - const matchingBanner = paymentMethodBannerStates.find( - (banner) => banner.organizationId === organization.id, - ); - if (matchingBanner !== null && matchingBanner !== undefined) { - return { - organizationId: organization.id, - organizationName: organization.name, - visible: matchingBanner.visible, - }; - } - const response = await this.organizationApiService.risksSubscriptionFailure( - organization.id, - ); - await this.billingBannerService.setPaymentMethodBannerState( - organization.id, - response.risksSubscriptionFailure, - ); - return { - organizationId: organization.id, - organizationName: organization.name, - visible: response.risksSubscriptionFailure, - }; - }), - ); - }), - ); - - protected async closeBanner(organizationId: string): Promise { - await this.billingBannerService.setPaymentMethodBannerState(organizationId, false); - } -} diff --git a/apps/web/src/app/layouts/user-layout.component.html b/apps/web/src/app/layouts/user-layout.component.html index 3593390113..397e95d485 100644 --- a/apps/web/src/app/layouts/user-layout.component.html +++ b/apps/web/src/app/layouts/user-layout.component.html @@ -33,9 +33,8 @@ > - + diff --git a/apps/web/src/app/layouts/user-layout.component.ts b/apps/web/src/app/layouts/user-layout.component.ts index 886069c580..1f116ee76e 100644 --- a/apps/web/src/app/layouts/user-layout.component.ts +++ b/apps/web/src/app/layouts/user-layout.component.ts @@ -5,13 +5,15 @@ import { RouterModule } from "@angular/router"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { ApiService } from "@bitwarden/common/abstractions/api.service"; import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction"; +import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service"; +import { ConfigServiceAbstraction as ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; import { StateService } from "@bitwarden/common/platform/abstractions/state.service"; import { SyncService } from "@bitwarden/common/vault/abstractions/sync/sync.service.abstraction"; import { IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components"; -import { PaymentMethodBannersComponent } from "../components/payment-method-banners/payment-method-banners.component"; +import { PaymentMethodWarningsModule } from "../billing/shared"; import { PasswordManagerLogo } from "./password-manager-logo"; @@ -28,7 +30,7 @@ const BroadcasterSubscriptionId = "UserLayoutComponent"; LayoutComponent, IconModule, NavigationModule, - PaymentMethodBannersComponent, + PaymentMethodWarningsModule, ], }) export class UserLayoutComponent implements OnInit, OnDestroy { @@ -36,6 +38,11 @@ export class UserLayoutComponent implements OnInit, OnDestroy { hasFamilySponsorshipAvailable: boolean; hideSubscription: boolean; + protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$( + FeatureFlag.ShowPaymentMethodWarningBanners, + false, + ); + constructor( private broadcasterService: BroadcasterService, private ngZone: NgZone, @@ -44,6 +51,7 @@ export class UserLayoutComponent implements OnInit, OnDestroy { private stateService: StateService, private apiService: ApiService, private syncService: SyncService, + private configService: ConfigService, ) {} async ngOnInit() { diff --git a/apps/web/src/app/shared/loose-components.module.ts b/apps/web/src/app/shared/loose-components.module.ts index 770a862eab..586f207962 100644 --- a/apps/web/src/app/shared/loose-components.module.ts +++ b/apps/web/src/app/shared/loose-components.module.ts @@ -58,8 +58,8 @@ import { UpdatePasswordComponent } from "../auth/update-password.component"; import { UpdateTempPasswordComponent } from "../auth/update-temp-password.component"; import { VerifyEmailTokenComponent } from "../auth/verify-email-token.component"; import { VerifyRecoverDeleteComponent } from "../auth/verify-recover-delete.component"; +import { PaymentMethodWarningsModule } from "../billing/shared"; import { DynamicAvatarComponent } from "../components/dynamic-avatar.component"; -import { PaymentMethodBannersComponent } from "../components/payment-method-banners/payment-method-banners.component"; import { SelectableAvatarComponent } from "../components/selectable-avatar.component"; import { FrontendLayoutComponent } from "../layouts/frontend-layout.component"; import { HeaderModule } from "../layouts/header/header.module"; @@ -106,12 +106,12 @@ import { SharedModule } from "./shared.module"; PipesModule, PasswordCalloutComponent, DangerZoneComponent, - PaymentMethodBannersComponent, LayoutComponent, NavigationModule, HeaderModule, OrganizationLayoutComponent, UserLayoutComponent, + PaymentMethodWarningsModule, ], declarations: [ AcceptFamilySponsorshipComponent, diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html index 4748374511..333ea66e26 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html +++ b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html @@ -24,9 +24,8 @@ *ngIf="showSettingsTab" > - + diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts index 3ed9acf4d2..5f45379442 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts +++ b/bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts @@ -5,9 +5,11 @@ import { ActivatedRoute, RouterModule } from "@angular/router"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { ProviderService } from "@bitwarden/common/admin-console/abstractions/provider.service"; import { Provider } from "@bitwarden/common/admin-console/models/domain/provider"; +import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; +import { ConfigServiceAbstraction as ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction"; import { IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components"; import { ProviderPortalLogo } from "@bitwarden/web-vault/app/admin-console/icons/provider-portal-logo"; -import { PaymentMethodBannersComponent } from "@bitwarden/web-vault/app/components/payment-method-banners/payment-method-banners.component"; +import { PaymentMethodWarningsModule } from "@bitwarden/web-vault/app/billing/shared"; @Component({ selector: "providers-layout", @@ -20,7 +22,7 @@ import { PaymentMethodBannersComponent } from "@bitwarden/web-vault/app/componen LayoutComponent, IconModule, NavigationModule, - PaymentMethodBannersComponent, + PaymentMethodWarningsModule, ], }) // eslint-disable-next-line rxjs-angular/prefer-takeuntil @@ -30,9 +32,15 @@ export class ProvidersLayoutComponent { provider: Provider; private providerId: string; + protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$( + FeatureFlag.ShowPaymentMethodWarningBanners, + false, + ); + constructor( private route: ActivatedRoute, private providerService: ProviderService, + private configService: ConfigService, ) {} ngOnInit() { diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/providers.module.ts b/bitwarden_license/bit-web/src/app/admin-console/providers/providers.module.ts index 2a6de3137c..512053d032 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/providers/providers.module.ts +++ b/bitwarden_license/bit-web/src/app/admin-console/providers/providers.module.ts @@ -5,7 +5,7 @@ import { FormsModule } from "@angular/forms"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { SearchModule } from "@bitwarden/components"; import { OrganizationPlansComponent } from "@bitwarden/web-vault/app/billing"; -import { PaymentMethodBannersComponent } from "@bitwarden/web-vault/app/components/payment-method-banners/payment-method-banners.component"; +import { PaymentMethodWarningsModule } from "@bitwarden/web-vault/app/billing/shared"; import { OssModule } from "@bitwarden/web-vault/app/oss.module"; import { AddOrganizationComponent } from "./clients/add-organization.component"; @@ -33,9 +33,9 @@ import { SetupComponent } from "./setup/setup.component"; JslibModule, ProvidersRoutingModule, OrganizationPlansComponent, - PaymentMethodBannersComponent, SearchModule, ProvidersLayoutComponent, + PaymentMethodWarningsModule, ], declarations: [ AcceptProviderComponent, diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.html b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.html index 80dee03174..1e7146bb58 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.html +++ b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.html @@ -1,4 +1,6 @@ - +

{{ "setupProvider" | i18n }}

diff --git a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.ts b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.ts index 5b1f6d1cb4..35e3a8bad3 100644 --- a/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.ts +++ b/bitwarden_license/bit-web/src/app/admin-console/providers/setup/setup.component.ts @@ -4,6 +4,8 @@ import { first } from "rxjs/operators"; import { ApiService } from "@bitwarden/common/abstractions/api.service"; import { ProviderSetupRequest } from "@bitwarden/common/admin-console/models/request/provider/provider-setup.request"; +import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum"; +import { ConfigServiceAbstraction as ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service.abstraction"; import { CryptoService } from "@bitwarden/common/platform/abstractions/crypto.service"; import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; @@ -27,6 +29,11 @@ export class SetupComponent implements OnInit { name: string; billingEmail: string; + protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$( + FeatureFlag.ShowPaymentMethodWarningBanners, + false, + ); + constructor( private router: Router, private platformUtilsService: PlatformUtilsService, @@ -36,6 +43,7 @@ export class SetupComponent implements OnInit { private apiService: ApiService, private syncService: SyncService, private validationService: ValidationService, + private configService: ConfigService, ) {} ngOnInit() { diff --git a/libs/angular/src/services/jslib-services.module.ts b/libs/angular/src/services/jslib-services.module.ts index a08b75ff57..6f6f3745b6 100644 --- a/libs/angular/src/services/jslib-services.module.ts +++ b/libs/angular/src/services/jslib-services.module.ts @@ -91,11 +91,11 @@ import { BadgeSettingsService, } from "@bitwarden/common/autofill/services/badge-settings.service"; import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions/billilng-api.service.abstraction"; -import { BillingBannerServiceAbstraction } from "@bitwarden/common/billing/abstractions/billing-banner.service.abstraction"; import { OrganizationBillingServiceAbstraction } from "@bitwarden/common/billing/abstractions/organization-billing.service"; +import { PaymentMethodWarningsServiceAbstraction } from "@bitwarden/common/billing/abstractions/payment-method-warnings-service.abstraction"; import { BillingApiService } from "@bitwarden/common/billing/services/billing-api.service"; -import { BillingBannerService } from "@bitwarden/common/billing/services/billing-banner.service"; import { OrganizationBillingService } from "@bitwarden/common/billing/services/organization-billing.service"; +import { PaymentMethodWarningsService } from "@bitwarden/common/billing/services/payment-method-warnings.service"; import { AppIdService as AppIdServiceAbstraction } from "@bitwarden/common/platform/abstractions/app-id.service"; import { BroadcasterService as BroadcasterServiceAbstraction } from "@bitwarden/common/platform/abstractions/broadcaster.service"; import { ConfigApiServiceAbstraction } from "@bitwarden/common/platform/abstractions/config/config-api.service.abstraction"; @@ -920,11 +920,6 @@ import { ModalService } from "./modal.service"; DerivedStateProvider, ], }, - { - provide: BillingBannerServiceAbstraction, - useClass: BillingBannerService, - deps: [StateProvider], - }, { provide: OrganizationBillingServiceAbstraction, useClass: OrganizationBillingService, @@ -933,6 +928,8 @@ import { ModalService } from "./modal.service"; EncryptService, I18nServiceAbstraction, OrganizationApiServiceAbstraction, + OrganizationServiceAbstraction, + StateProvider, ], }, { @@ -969,6 +966,11 @@ import { ModalService } from "./modal.service"; useClass: BillingApiService, deps: [ApiServiceAbstraction], }, + { + provide: PaymentMethodWarningsServiceAbstraction, + useClass: PaymentMethodWarningsService, + deps: [BillingApiServiceAbstraction, StateProvider], + }, ], }) export class JslibServicesModule {} diff --git a/libs/common/src/admin-console/abstractions/organization/organization-api.service.abstraction.ts b/libs/common/src/admin-console/abstractions/organization/organization-api.service.abstraction.ts index dd1e0c1e91..ddf2fc5c01 100644 --- a/libs/common/src/admin-console/abstractions/organization/organization-api.service.abstraction.ts +++ b/libs/common/src/admin-console/abstractions/organization/organization-api.service.abstraction.ts @@ -9,7 +9,6 @@ import { OrganizationTaxInfoUpdateRequest } from "../../../billing/models/reques import { PaymentRequest } from "../../../billing/models/request/payment.request"; import { SecretsManagerSubscribeRequest } from "../../../billing/models/request/sm-subscribe.request"; import { BillingResponse } from "../../../billing/models/response/billing.response"; -import { OrganizationRisksSubscriptionFailureResponse } from "../../../billing/models/response/organization-risks-subscription-failure.response"; import { OrganizationSubscriptionResponse } from "../../../billing/models/response/organization-subscription.response"; import { PaymentResponse } from "../../../billing/models/response/payment.response"; import { TaxInfoResponse } from "../../../billing/models/response/tax-info.response"; @@ -79,6 +78,5 @@ export class OrganizationApiServiceAbstraction { id: string, request: OrganizationCollectionManagementUpdateRequest, ) => Promise; - risksSubscriptionFailure: (id: string) => Promise; enableCollectionEnhancements: (id: string) => Promise; } diff --git a/libs/common/src/admin-console/services/organization/organization-api.service.ts b/libs/common/src/admin-console/services/organization/organization-api.service.ts index edb8dbc83b..4e482112a8 100644 --- a/libs/common/src/admin-console/services/organization/organization-api.service.ts +++ b/libs/common/src/admin-console/services/organization/organization-api.service.ts @@ -10,7 +10,6 @@ import { OrganizationTaxInfoUpdateRequest } from "../../../billing/models/reques import { PaymentRequest } from "../../../billing/models/request/payment.request"; import { SecretsManagerSubscribeRequest } from "../../../billing/models/request/sm-subscribe.request"; import { BillingResponse } from "../../../billing/models/response/billing.response"; -import { OrganizationRisksSubscriptionFailureResponse } from "../../../billing/models/response/organization-risks-subscription-failure.response"; import { OrganizationSubscriptionResponse } from "../../../billing/models/response/organization-subscription.response"; import { PaymentResponse } from "../../../billing/models/response/payment.response"; import { TaxInfoResponse } from "../../../billing/models/response/tax-info.response"; @@ -344,20 +343,6 @@ export class OrganizationApiService implements OrganizationApiServiceAbstraction return data; } - async risksSubscriptionFailure( - id: string, - ): Promise { - const r = await this.apiService.send( - "GET", - "/organizations/" + id + "/risks-subscription-failure", - null, - true, - true, - ); - - return new OrganizationRisksSubscriptionFailureResponse(r); - } - async enableCollectionEnhancements(id: string): Promise { await this.apiService.send( "POST", diff --git a/libs/common/src/billing/abstractions/billilng-api.service.abstraction.ts b/libs/common/src/billing/abstractions/billilng-api.service.abstraction.ts index 24a61e7dc6..3982fa917b 100644 --- a/libs/common/src/billing/abstractions/billilng-api.service.abstraction.ts +++ b/libs/common/src/billing/abstractions/billilng-api.service.abstraction.ts @@ -1,4 +1,5 @@ import { SubscriptionCancellationRequest } from "../../billing/models/request/subscription-cancellation.request"; +import { OrganizationBillingStatusResponse } from "../../billing/models/response/organization-billing-status.response"; export abstract class BillingApiServiceAbstraction { cancelOrganizationSubscription: ( @@ -6,4 +7,5 @@ export abstract class BillingApiServiceAbstraction { request: SubscriptionCancellationRequest, ) => Promise; cancelPremiumUserSubscription: (request: SubscriptionCancellationRequest) => Promise; + getBillingStatus: (id: string) => Promise; } diff --git a/libs/common/src/billing/abstractions/billing-banner.service.abstraction.ts b/libs/common/src/billing/abstractions/billing-banner.service.abstraction.ts deleted file mode 100644 index ef32b9c4d6..0000000000 --- a/libs/common/src/billing/abstractions/billing-banner.service.abstraction.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { Observable } from "rxjs"; - -export class BillingBannerServiceAbstraction { - paymentMethodBannerStates$: Observable<{ organizationId: string; visible: boolean }[]>; - setPaymentMethodBannerState: (organizationId: string, visible: boolean) => Promise; -} diff --git a/libs/common/src/billing/abstractions/payment-method-warnings-service.abstraction.ts b/libs/common/src/billing/abstractions/payment-method-warnings-service.abstraction.ts new file mode 100644 index 0000000000..d7ba522c60 --- /dev/null +++ b/libs/common/src/billing/abstractions/payment-method-warnings-service.abstraction.ts @@ -0,0 +1,31 @@ +import { Observable } from "rxjs"; + +import { PaymentMethodWarning } from "../models/domain/payment-method-warning"; + +export abstract class PaymentMethodWarningsServiceAbstraction { + /** + * An {@link Observable} record in the {@link ActiveUserState} of the user's organization IDs each mapped to their respective {@link PaymentMethodWarning}. + */ + paymentMethodWarnings$: Observable>; + /** + * Updates the {@link ActiveUserState} by setting `acknowledged` to `true` for the {@link PaymentMethodWarning} represented by the provided organization ID. + * @param organizationId - The ID of the organization whose warning you'd like to acknowledge. + */ + acknowledge: (organizationId: string) => Promise; + /** + * Updates the {@link ActiveUserState} by setting `risksSubscriptionFailure` to `false` for the {@link PaymentMethodWarning} represented by the provided organization ID. + * @param organizationId - The ID of the organization whose subscription risk you'd like to remove. + */ + removeSubscriptionRisk: (organizationId: string) => Promise; + /** + * Clears the {@link PaymentMethodWarning} record from the {@link ActiveUserState}. + */ + clear: () => Promise; + /** + * Tries to retrieve the {@link PaymentMethodWarning} for the provided organization ID from the {@link ActiveUserState}. + * If the warning does not exist, or if the warning has been in state for longer than a week, fetches the current {@link OrganizationBillingStatusResponse} for the organization + * from the API and uses it to update the warning in state. + * @param organizationId - The ID of the organization whose {@link PaymentMethodWarning} you'd like to update. + */ + update: (organizationId: string) => Promise; +} diff --git a/libs/common/src/billing/models/billing-keys.state.ts b/libs/common/src/billing/models/billing-keys.state.ts new file mode 100644 index 0000000000..8367ff7fbe --- /dev/null +++ b/libs/common/src/billing/models/billing-keys.state.ts @@ -0,0 +1,13 @@ +import { BILLING_DISK, KeyDefinition } from "../../platform/state"; +import { PaymentMethodWarning } from "../models/domain/payment-method-warning"; + +export const PAYMENT_METHOD_WARNINGS_KEY = KeyDefinition.record( + BILLING_DISK, + "paymentMethodWarnings", + { + deserializer: (warnings) => ({ + ...warnings, + savedAt: new Date(warnings.savedAt), + }), + }, +); diff --git a/libs/common/src/billing/models/domain/payment-method-warning.ts b/libs/common/src/billing/models/domain/payment-method-warning.ts new file mode 100644 index 0000000000..dd3f0f8581 --- /dev/null +++ b/libs/common/src/billing/models/domain/payment-method-warning.ts @@ -0,0 +1,6 @@ +export type PaymentMethodWarning = { + organizationName: string; + risksSubscriptionFailure: boolean; + acknowledged: boolean; + savedAt: Date; +}; diff --git a/libs/common/src/billing/models/response/organization-billing-status.response.ts b/libs/common/src/billing/models/response/organization-billing-status.response.ts new file mode 100644 index 0000000000..916bebe4bc --- /dev/null +++ b/libs/common/src/billing/models/response/organization-billing-status.response.ts @@ -0,0 +1,15 @@ +import { BaseResponse } from "../../../models/response/base.response"; + +export class OrganizationBillingStatusResponse extends BaseResponse { + organizationId: string; + organizationName: string; + risksSubscriptionFailure: boolean; + + constructor(response: any) { + super(response); + + this.organizationId = this.getResponseProperty("OrganizationId"); + this.organizationName = this.getResponseProperty("OrganizationName"); + this.risksSubscriptionFailure = this.getResponseProperty("RisksSubscriptionFailure"); + } +} diff --git a/libs/common/src/billing/services/billing-api.service.ts b/libs/common/src/billing/services/billing-api.service.ts index b135b6f154..677e500619 100644 --- a/libs/common/src/billing/services/billing-api.service.ts +++ b/libs/common/src/billing/services/billing-api.service.ts @@ -1,6 +1,7 @@ import { ApiService } from "../../abstractions/api.service"; import { BillingApiServiceAbstraction } from "../../billing/abstractions/billilng-api.service.abstraction"; import { SubscriptionCancellationRequest } from "../../billing/models/request/subscription-cancellation.request"; +import { OrganizationBillingStatusResponse } from "../../billing/models/response/organization-billing-status.response"; export class BillingApiService implements BillingApiServiceAbstraction { constructor(private apiService: ApiService) {} @@ -21,4 +22,16 @@ export class BillingApiService implements BillingApiServiceAbstraction { cancelPremiumUserSubscription(request: SubscriptionCancellationRequest): Promise { return this.apiService.send("POST", "/accounts/churn-premium", request, true, false); } + + async getBillingStatus(id: string): Promise { + const r = await this.apiService.send( + "GET", + "/organizations/" + id + "/billing-status", + null, + true, + true, + ); + + return new OrganizationBillingStatusResponse(r); + } } diff --git a/libs/common/src/billing/services/billing-banner.service.ts b/libs/common/src/billing/services/billing-banner.service.ts deleted file mode 100644 index a2867333e3..0000000000 --- a/libs/common/src/billing/services/billing-banner.service.ts +++ /dev/null @@ -1,44 +0,0 @@ -import { map, Observable } from "rxjs"; - -import { - ActiveUserState, - BILLING_BANNERS_DISK, - KeyDefinition, - StateProvider, -} from "../../platform/state"; -import { BillingBannerServiceAbstraction } from "../abstractions/billing-banner.service.abstraction"; - -const PAYMENT_METHOD_BANNERS_KEY = KeyDefinition.record( - BILLING_BANNERS_DISK, - "paymentMethodBanners", - { - deserializer: (b) => b, - }, -); - -export class BillingBannerService implements BillingBannerServiceAbstraction { - private paymentMethodBannerStates: ActiveUserState>; - paymentMethodBannerStates$: Observable<{ organizationId: string; visible: boolean }[]>; - - constructor(private stateProvider: StateProvider) { - this.paymentMethodBannerStates = this.stateProvider.getActive(PAYMENT_METHOD_BANNERS_KEY); - this.paymentMethodBannerStates$ = this.paymentMethodBannerStates.state$.pipe( - map((billingBannerStates) => - !billingBannerStates - ? [] - : Object.entries(billingBannerStates).map(([organizationId, visible]) => ({ - organizationId, - visible, - })), - ), - ); - } - - async setPaymentMethodBannerState(organizationId: string, visibility: boolean): Promise { - await this.paymentMethodBannerStates.update((states) => { - states ??= {}; - states[organizationId] = visibility; - return states; - }); - } -} diff --git a/libs/common/src/billing/services/payment-method-warnings.service.spec.ts b/libs/common/src/billing/services/payment-method-warnings.service.spec.ts new file mode 100644 index 0000000000..55e72d3d72 --- /dev/null +++ b/libs/common/src/billing/services/payment-method-warnings.service.spec.ts @@ -0,0 +1,186 @@ +import { any, mock, MockProxy } from "jest-mock-extended"; +import { firstValueFrom } from "rxjs"; + +import { FakeAccountService, FakeStateProvider, mockAccountServiceWith } from "../../../spec"; +import { FakeActiveUserState } from "../../../spec/fake-state"; +import { Utils } from "../../platform/misc/utils"; +import { UserId } from "../../types/guid"; +import { BillingApiServiceAbstraction as BillingApiService } from "../abstractions/billilng-api.service.abstraction"; +import { PAYMENT_METHOD_WARNINGS_KEY } from "../models/billing-keys.state"; +import { PaymentMethodWarning } from "../models/domain/payment-method-warning"; +import { OrganizationBillingStatusResponse } from "../models/response/organization-billing-status.response"; + +import { PaymentMethodWarningsService } from "./payment-method-warnings.service"; + +describe("Payment Method Warnings Service", () => { + let paymentMethodWarningsService: PaymentMethodWarningsService; + let billingApiService: MockProxy; + + const mockUserId = Utils.newGuid() as UserId; + let accountService: FakeAccountService; + let stateProvider: FakeStateProvider; + let activeUserState: FakeActiveUserState>; + + function getPastDate(daysAgo: number) { + const date = new Date(); + date.setDate(date.getDate() - daysAgo); + return date; + } + + const getBillingStatusResponse = (organizationId: string) => + new OrganizationBillingStatusResponse({ + OrganizationId: organizationId, + OrganizationName: "Teams Organization", + RisksSubscriptionFailure: true, + }); + + beforeEach(() => { + accountService = mockAccountServiceWith(mockUserId); + stateProvider = new FakeStateProvider(accountService); + activeUserState = stateProvider.activeUser.getFake(PAYMENT_METHOD_WARNINGS_KEY); + + billingApiService = mock(); + paymentMethodWarningsService = new PaymentMethodWarningsService( + billingApiService, + stateProvider, + ); + }); + + it("acknowledge", async () => { + const organizationId = "1"; + const state: Record = { + [organizationId]: { + organizationName: "Teams Organization", + risksSubscriptionFailure: true, + acknowledged: false, + savedAt: getPastDate(3), + }, + }; + activeUserState.nextState(state); + await paymentMethodWarningsService.acknowledge(organizationId); + expect(await firstValueFrom(paymentMethodWarningsService.paymentMethodWarnings$)).toEqual({ + [organizationId]: { + ...state[organizationId], + acknowledged: true, + }, + }); + }); + + it("clear", async () => { + const state: Record = { + "1": { + organizationName: "Teams Organization", + risksSubscriptionFailure: true, + acknowledged: false, + savedAt: getPastDate(3), + }, + }; + activeUserState.nextState(state); + await paymentMethodWarningsService.clear(); + expect(await firstValueFrom(paymentMethodWarningsService.paymentMethodWarnings$)).toEqual({}); + }); + + it("removeSubscriptionRisk", async () => { + const organizationId = "1"; + const state: Record = { + [organizationId]: { + organizationName: "Teams Organization", + risksSubscriptionFailure: true, + acknowledged: false, + savedAt: getPastDate(3), + }, + }; + activeUserState.nextState(state); + await paymentMethodWarningsService.removeSubscriptionRisk(organizationId); + expect(await firstValueFrom(paymentMethodWarningsService.paymentMethodWarnings$)).toEqual({ + [organizationId]: { + ...state[organizationId], + risksSubscriptionFailure: false, + }, + }); + }); + + describe("update", () => { + it("Does nothing if the stored payment method warning is less than a week old", async () => { + const organizationId = "1"; + const state: Record = { + [organizationId]: { + organizationName: "Teams Organization", + risksSubscriptionFailure: true, + acknowledged: false, + savedAt: getPastDate(3), + }, + }; + activeUserState.nextState(state); + await paymentMethodWarningsService.update(organizationId); + expect(billingApiService.getBillingStatus).not.toHaveBeenCalled(); + }); + + it("Retrieves the billing status from the API and uses it to update the state if the state is null", async () => { + const organizationId = "1"; + activeUserState.nextState(null); + billingApiService.getBillingStatus.mockResolvedValue( + getBillingStatusResponse(organizationId), + ); + await paymentMethodWarningsService.update(organizationId); + expect(await firstValueFrom(paymentMethodWarningsService.paymentMethodWarnings$)).toEqual({ + [organizationId]: { + organizationName: "Teams Organization", + risksSubscriptionFailure: true, + acknowledged: false, + savedAt: any(), + }, + }); + expect(billingApiService.getBillingStatus).toHaveBeenCalledTimes(1); + }); + + it("Retrieves the billing status from the API and uses it to update the state if the stored warning is null", async () => { + const organizationId = "1"; + activeUserState.nextState({ + [organizationId]: null, + }); + billingApiService.getBillingStatus.mockResolvedValue( + getBillingStatusResponse(organizationId), + ); + await paymentMethodWarningsService.update(organizationId); + expect(await firstValueFrom(paymentMethodWarningsService.paymentMethodWarnings$)).toEqual({ + [organizationId]: { + organizationName: "Teams Organization", + risksSubscriptionFailure: true, + acknowledged: false, + savedAt: any(), + }, + }); + expect(billingApiService.getBillingStatus).toHaveBeenCalledTimes(1); + }); + + it("Retrieves the billing status from the API and uses it to update the state if the stored warning is older than a week", async () => { + const organizationId = "1"; + activeUserState.nextState({ + [organizationId]: { + organizationName: "Teams Organization", + risksSubscriptionFailure: false, + acknowledged: false, + savedAt: getPastDate(10), + }, + }); + billingApiService.getBillingStatus.mockResolvedValue( + new OrganizationBillingStatusResponse({ + OrganizationId: organizationId, + OrganizationName: "Teams Organization", + RisksSubscriptionFailure: true, + }), + ); + await paymentMethodWarningsService.update(organizationId); + expect(await firstValueFrom(paymentMethodWarningsService.paymentMethodWarnings$)).toEqual({ + [organizationId]: { + organizationName: "Teams Organization", + risksSubscriptionFailure: true, + acknowledged: false, + savedAt: any(), + }, + }); + expect(billingApiService.getBillingStatus).toHaveBeenCalledTimes(1); + }); + }); +}); diff --git a/libs/common/src/billing/services/payment-method-warnings.service.ts b/libs/common/src/billing/services/payment-method-warnings.service.ts new file mode 100644 index 0000000000..ad9cd02618 --- /dev/null +++ b/libs/common/src/billing/services/payment-method-warnings.service.ts @@ -0,0 +1,74 @@ +import { firstValueFrom, map, Observable } from "rxjs"; + +import { ActiveUserState, StateProvider } from "../../platform/state"; +import { BillingApiServiceAbstraction as BillingApiService } from "../abstractions/billilng-api.service.abstraction"; +import { PaymentMethodWarningsServiceAbstraction } from "../abstractions/payment-method-warnings-service.abstraction"; +import { PAYMENT_METHOD_WARNINGS_KEY } from "../models/billing-keys.state"; +import { PaymentMethodWarning } from "../models/domain/payment-method-warning"; + +export class PaymentMethodWarningsService implements PaymentMethodWarningsServiceAbstraction { + private paymentMethodWarningsState: ActiveUserState>; + paymentMethodWarnings$: Observable>; + + constructor( + private billingApiService: BillingApiService, + private stateProvider: StateProvider, + ) { + this.paymentMethodWarningsState = this.stateProvider.getActive(PAYMENT_METHOD_WARNINGS_KEY); + this.paymentMethodWarnings$ = this.paymentMethodWarningsState.state$; + } + + async acknowledge(organizationId: string): Promise { + await this.paymentMethodWarningsState.update((state) => { + const current = state[organizationId]; + state[organizationId] = { + ...current, + acknowledged: true, + }; + return state; + }); + } + + async removeSubscriptionRisk(organizationId: string): Promise { + await this.paymentMethodWarningsState.update((state) => { + const current = state[organizationId]; + state[organizationId] = { + ...current, + risksSubscriptionFailure: false, + }; + return state; + }); + } + + async clear(): Promise { + await this.paymentMethodWarningsState.update(() => ({})); + } + + async update(organizationId: string): Promise { + const warning = await firstValueFrom( + this.paymentMethodWarningsState.state$.pipe( + map((state) => (!state ? null : state[organizationId])), + ), + ); + if (!warning || warning.savedAt < this.getOneWeekAgo()) { + const { organizationName, risksSubscriptionFailure } = + await this.billingApiService.getBillingStatus(organizationId); + await this.paymentMethodWarningsState.update((state) => { + state ??= {}; + state[organizationId] = { + organizationName, + risksSubscriptionFailure, + acknowledged: false, + savedAt: new Date(), + }; + return state; + }); + } + } + + private getOneWeekAgo = (): Date => { + const date = new Date(); + date.setDate(date.getDate() - 7); + return date; + }; +} diff --git a/libs/common/src/enums/feature-flag.enum.ts b/libs/common/src/enums/feature-flag.enum.ts index f875e8ad25..8ca80759b2 100644 --- a/libs/common/src/enums/feature-flag.enum.ts +++ b/libs/common/src/enums/feature-flag.enum.ts @@ -8,6 +8,7 @@ export enum FeatureFlag { KeyRotationImprovements = "key-rotation-improvements", FlexibleCollectionsMigration = "flexible-collections-migration", AC1607_PresentUserOffboardingSurvey = "AC-1607_present-user-offboarding-survey", + ShowPaymentMethodWarningBanners = "show-payment-method-warning-banners", } // Replace this with a type safe lookup of the feature flag values in PM-2282 diff --git a/libs/common/src/platform/state/state-definitions.ts b/libs/common/src/platform/state/state-definitions.ts index 6b9761481d..03269b6808 100644 --- a/libs/common/src/platform/state/state-definitions.ts +++ b/libs/common/src/platform/state/state-definitions.ts @@ -19,8 +19,6 @@ import { StateDefinition } from "./state-definition"; export const ACCOUNT_MEMORY = new StateDefinition("account", "memory"); -export const BILLING_BANNERS_DISK = new StateDefinition("billingBanners", "disk"); - export const CRYPTO_DISK = new StateDefinition("crypto", "disk"); export const CRYPTO_MEMORY = new StateDefinition("crypto", "memory"); @@ -42,6 +40,8 @@ export const ORGANIZATIONS_DISK = new StateDefinition("organizations", "disk"); export const POLICIES_DISK = new StateDefinition("policies", "disk"); export const PROVIDERS_DISK = new StateDefinition("providers", "disk"); +export const BILLING_DISK = new StateDefinition("billing", "disk"); + export const FOLDER_DISK = new StateDefinition("folder", "disk", { web: "memory" }); export const SYNC_STATE = new StateDefinition("sync", "disk", { web: "memory" });