show premium subscription ended message when user has archived ciphers

Author: nick-livefront

apps/web/src/app/admin-console/organizations/collections/vault-filter/vault-filter.component.ts

@@ -11,6 +11,7 @@ import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.servic
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
 import { CipherArchiveService } from "@bitwarden/common/vault/abstractions/cipher-archive.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { PremiumUpgradePromptService } from "@bitwarden/common/vault/abstractions/premium-upgrade-prompt.service";
 import { TreeNode } from "@bitwarden/common/vault/models/domain/tree-node";
 import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
 import { DialogService, ToastService } from "@bitwarden/components";
@@ -55,6 +56,7 @@ export class VaultFilterComponent
     protected restrictedItemTypesService: RestrictedItemTypesService,
     protected cipherService: CipherService,
     protected cipherArchiveService: CipherArchiveService,
+    premiumUpgradePromptService: PremiumUpgradePromptService,
   ) {
     super(
       vaultFilterService,
@@ -68,6 +70,7 @@ export class VaultFilterComponent
       restrictedItemTypesService,
       cipherService,
       cipherArchiveService,
+      premiumUpgradePromptService,
     );
   }
 

apps/web/src/app/vault/individual-vault/vault-filter/components/vault-filter.component.ts

@@ -19,8 +19,10 @@ import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { BillingApiServiceAbstraction } from "@bitwarden/common/billing/abstractions/billing-api.service.abstraction";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
+import { UserId } from "@bitwarden/common/types/guid";
 import { CipherArchiveService } from "@bitwarden/common/vault/abstractions/cipher-archive.service";
 import { CipherService } from "@bitwarden/common/vault/abstractions/cipher.service";
+import { PremiumUpgradePromptService } from "@bitwarden/common/vault/abstractions/premium-upgrade-prompt.service";
 import { CipherType } from "@bitwarden/common/vault/enums";
 import { TreeNode } from "@bitwarden/common/vault/models/domain/tree-node";
 import { RestrictedItemTypesService } from "@bitwarden/common/vault/services/restricted-item-types.service";
@@ -160,6 +162,7 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
     protected restrictedItemTypesService: RestrictedItemTypesService,
     protected cipherService: CipherService,
     protected cipherArchiveService: CipherArchiveService,
+    private premiumUpgradePromptService: PremiumUpgradePromptService,
   ) {}
 
   async ngOnInit(): Promise<void> {
@@ -242,13 +245,14 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
   };
 
   async buildAllFilters(): Promise<VaultFilterList> {
+    const userId = await firstValueFrom(this.accountService.activeAccount$.pipe(getUserId));
     const builderFilter = {} as VaultFilterList;
     builderFilter.organizationFilter = await this.addOrganizationFilter();
     builderFilter.typeFilter = await this.addTypeFilter();
     builderFilter.folderFilter = await this.addFolderFilter();
     builderFilter.collectionFilter = await this.addCollectionFilter();
     if (await firstValueFrom(this.cipherArchiveService.showArchiveFeatures$())) {
-      builderFilter.archiveFilter = await this.addArchiveFilter();
+      builderFilter.archiveFilter = await this.addArchiveFilter(userId);
     }
     builderFilter.trashFilter = await this.addTrashFilter();
     return builderFilter;
@@ -408,7 +412,17 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
     return trashFilterSection;
   }
 
-  protected async addArchiveFilter(): Promise<VaultFilterSection> {
+  protected async addArchiveFilter(userId: UserId): Promise<VaultFilterSection> {
+    const hasArchivedCiphers = await firstValueFrom(
+      this.cipherArchiveService
+        .archivedCiphers$(userId)
+        .pipe(map((archivedCiphers) => archivedCiphers.length > 0)),
+    );
+
+    const userHasPremium = await firstValueFrom(this.cipherArchiveService.userHasPremium$(userId));
+
+    const premiumPromptOnFilter = !userHasPremium && !hasArchivedCiphers;
+
     const archiveFilterSection: VaultFilterSection = {
       data$: this.vaultFilterService.buildTypeTree(
         {
@@ -431,7 +445,12 @@ export class VaultFilterComponent implements OnInit, OnDestroy {
         isSelectable: true,
       },
       action: this.applyTypeFilter as (filterNode: TreeNode<VaultFilterType>) => Promise<void>,
-      premiumFeature: true,
+      premiumOptions: {
+        showPremiumBadge: true,
+        blockFilterAction: premiumPromptOnFilter
+          ? async () => await this.premiumUpgradePromptService.promptForPremium()
+          : undefined,
+      },
     };
     return archiveFilterSection;
   }

apps/web/src/app/vault/individual-vault/vault-filter/shared/components/vault-filter-section.component.ts

@@ -1,18 +1,9 @@
 // FIXME: Update this file to be type safe and remove this and next line
 // @ts-strict-ignore
-import {
-  Component,
-  InjectionToken,
-  Injector,
-  Input,
-  OnDestroy,
-  OnInit,
-  ViewChild,
-} from "@angular/core";
+import { Component, InjectionToken, Injector, Input, OnDestroy, OnInit } from "@angular/core";
 import { firstValueFrom, Observable, Subject, takeUntil } from "rxjs";
 import { map } from "rxjs/operators";
 
-import { PremiumBadgeComponent } from "@bitwarden/angular/billing/components/premium-badge";
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
@@ -30,7 +21,6 @@ import { VaultFilter } from "../models/vault-filter.model";
 export class VaultFilterSectionComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();
   private activeUserId$ = getUserId(this.accountService.activeAccount$);
-  @ViewChild(PremiumBadgeComponent) private premiumBadgeComponent: PremiumBadgeComponent;
 
   @Input() activeFilter: VaultFilter;
   @Input() section: VaultFilterSection;
@@ -100,8 +90,8 @@ export class VaultFilterSectionComponent implements OnInit, OnDestroy {
   }
 
   async onFilterSelect(filterNode: TreeNode<VaultFilterType>) {
-    if (this.premiumFeature && this.premiumBadgeComponent) {
-      await this.premiumBadgeComponent.promptForPremium();
+    if (this.section?.premiumOptions?.blockFilterAction) {
+      await this.section.premiumOptions.blockFilterAction();
       return;
     }
 
@@ -133,7 +123,7 @@ export class VaultFilterSectionComponent implements OnInit, OnDestroy {
   }
 
   get premiumFeature() {
-    return this.section?.premiumFeature;
+    return this.section?.premiumOptions?.showPremiumBadge;
   }
 
   get divider() {

apps/web/src/app/vault/individual-vault/vault-filter/shared/models/vault-filter-section.type.ts

@@ -47,8 +47,12 @@ export type VaultFilterSection = {
     component: any;
   };
   divider?: boolean;
-  /**  When true, the premium badge will show on the filter for non-premium users. */
-  premiumFeature?: true;
+  premiumOptions?: {
+    /**  When true, the premium badge will show on the filter for non-premium users. */
+    showPremiumBadge?: true;
+    /** Action to be called instead of applying the filter. */
+    blockFilterAction?: () => Promise<void>;
+  };
 };
 
 export type VaultFilterList = {

apps/web/src/app/vault/individual-vault/vault.component.html

@@ -34,6 +34,16 @@
     <bit-callout type="warning" *ngIf="activeFilter.isDeleted">
       {{ trashCleanupWarning }}
     </bit-callout>
+    <bit-callout
+      type="info"
+      [title]="'premiumSubscriptionEnded' | i18n"
+      *ngIf="showSubscriptionEndedMessaging$ | async"
+    >
+      <p>{{ "premiumSubscriptionEndedDesc" | i18n }}</p>
+      <a routerLink="/settings/subscription/premium" bitButton buttonType="primary">{{
+        "restartPremium" | i18n
+      }}</a>
+    </bit-callout>
     <app-vault-items
       #vaultItems
       [ciphers]="ciphers"

apps/web/src/app/vault/individual-vault/vault.component.ts

@@ -79,7 +79,7 @@ import {
   CipherViewLikeUtils,
 } from "@bitwarden/common/vault/utils/cipher-view-like-utils";
 import { filterOutNullish } from "@bitwarden/common/vault/utils/observable-utilities";
-import { DialogRef, DialogService, ToastService } from "@bitwarden/components";
+import { DialogRef, DialogService, ToastService, BannerComponent } from "@bitwarden/components";
 import { CipherListView } from "@bitwarden/sdk-internal";
 import {
   AddEditFolderDialogComponent,
@@ -164,6 +164,7 @@ type EmptyStateMap = Record<EmptyStateType, EmptyStateItem>;
     VaultItemsModule,
     SharedModule,
     OrganizationWarningsModule,
+    BannerComponent,
   ],
   providers: [
     RoutedVaultFilterService,
@@ -211,13 +212,6 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
     .pipe(map((a) => a?.id))
     .pipe(switchMap((id) => this.organizationService.organizations$(id)));
 
-  protected userCanArchive$ = this.accountService.activeAccount$.pipe(
-    getUserId,
-    switchMap((userId) => {
-      return this.cipherArchiveService.userCanArchive$(userId);
-    }),
-  );
-
   emptyState$ = combineLatest([
     this.currentSearchText$,
     this.routedVaultFilterService.filter$,
@@ -276,14 +270,28 @@ export class VaultComponent<C extends CipherViewLike> implements OnInit, OnDestr
     }),
   );
 
-  protected enforceOrgDataOwnershipPolicy$ = this.accountService.activeAccount$.pipe(
-    getUserId,
+  private userId$ = this.accountService.activeAccount$.pipe(getUserId);
+
+  protected enforceOrgDataOwnershipPolicy$ = this.userId$.pipe(
     switchMap((userId) =>
       this.policyService.policyAppliesToUser$(PolicyType.OrganizationDataOwnership, userId),
     ),
   );
 
-  private userId$ = this.accountService.activeAccount$.pipe(getUserId);
+  protected userCanArchive$ = this.userId$.pipe(
+    switchMap((userId) => {
+      return this.cipherArchiveService.userCanArchive$(userId);
+    }),
+  );
+
+  protected showSubscriptionEndedMessaging$ = this.userId$.pipe(
+    switchMap((userId) =>
+      combineLatest([
+        this.routedVaultFilterBridgeService.activeFilter$,
+        this.cipherArchiveService.showSubscriptionEndedMessaging$(userId),
+      ]).pipe(map(([activeFilter, showMessaging]) => activeFilter.isArchived && showMessaging)),
+    ),
+  );
 
   constructor(
     private syncService: SyncService,

apps/web/src/locales/en/messages.json

@@ -2929,6 +2929,15 @@
       }
     }
   },
+  "premiumSubscriptionEnded": {
+    "message": "Your Premium subscription ended"
+  },
+  "premiumSubscriptionEndedDesc": {
+    "message": "To regain access to your archive, restart your Premium subscription. If you edit details for an archived item before restarting, it'll be moved back into your vault."
+  },
+  "restartPremium": {
+    "message": "Restart Premium"
+  },
   "additionalStorageGb": {
     "message": "Additional storage (GB)"
   },

libs/common/src/vault/abstractions/cipher-archive.service.ts

@@ -10,4 +10,5 @@ export abstract class CipherArchiveService {
   abstract userHasPremium$(userId: UserId): Observable<boolean>;
   abstract archiveWithServer(ids: CipherId | CipherId[], userId: UserId): Promise<void>;
   abstract unarchiveWithServer(ids: CipherId | CipherId[], userId: UserId): Promise<void>;
+  abstract showSubscriptionEndedMessaging$(userId: UserId): Observable<boolean>;
 }

libs/common/src/vault/services/default-cipher-archive.service.spec.ts

@@ -151,6 +151,51 @@ describe("DefaultCipherArchiveService", () => {
     });
   });
 
+  describe("showSubscriptionEndedMessaging$", () => {
+    it("returns true when user has archived ciphers but no premium", async () => {
+      const mockCiphers: CipherListView[] = [
+        {
+          id: "1",
+          archivedDate: "2024-01-15T10:30:00.000Z",
+          type: "identity",
+        } as unknown as CipherListView,
+      ];
+
+      mockCipherService.cipherListViews$.mockReturnValue(of(mockCiphers));
+      mockBillingAccountProfileStateService.hasPremiumFromAnySource$.mockReturnValue(of(false));
+
+      const result = await firstValueFrom(service.showSubscriptionEndedMessaging$(userId));
+
+      expect(result).toBe(true);
+    });
+
+    it("returns false when user has archived ciphers and has premium", async () => {
+      const mockCiphers: CipherListView[] = [
+        {
+          id: "1",
+          archivedDate: "2024-01-15T10:30:00.000Z",
+          type: "identity",
+        } as unknown as CipherListView,
+      ];
+
+      mockCipherService.cipherListViews$.mockReturnValue(of(mockCiphers));
+      mockBillingAccountProfileStateService.hasPremiumFromAnySource$.mockReturnValue(of(true));
+
+      const result = await firstValueFrom(service.showSubscriptionEndedMessaging$(userId));
+
+      expect(result).toBe(false);
+    });
+
+    it("returns false when user has no archived ciphers and no premium", async () => {
+      mockCipherService.cipherListViews$.mockReturnValue(of([]));
+      mockBillingAccountProfileStateService.hasPremiumFromAnySource$.mockReturnValue(of(false));
+
+      const result = await firstValueFrom(service.showSubscriptionEndedMessaging$(userId));
+
+      expect(result).toBe(false);
+    });
+  });
+
   describe("archiveWithServer", () => {
     const mockResponse = {
       data: [

libs/common/src/vault/services/default-cipher-archive.service.ts

@@ -71,6 +71,14 @@ export class DefaultCipherArchiveService implements CipherArchiveService {
       .pipe(shareReplay({ refCount: true, bufferSize: 1 }));
   }
 
+  /** Returns true when the user has previously archived ciphers but lost their premium membership. */
+  showSubscriptionEndedMessaging$(userId: UserId): Observable<boolean> {
+    return combineLatest([this.archivedCiphers$(userId), this.userHasPremium$(userId)]).pipe(
+      map(([archivedCiphers, hasPremium]) => archivedCiphers.length > 0 && !hasPremium),
+      shareReplay({ refCount: true, bufferSize: 1 }),
+    );
+  }
+
   async archiveWithServer(ids: CipherId | CipherId[], userId: UserId): Promise<void> {
     const request = new CipherBulkArchiveRequest(Array.isArray(ids) ? ids : [ids]);
     const r = await this.apiService.send("PUT", "/ciphers/archive", request, true, true);