[PM-24158] Add Premium Check (#16042)

* [PM-24158] Add initial premium check * [PM-24158] Add premium membership dialog fix * [PM-24158] Small updates * [PM-24158] Set hasPremium to false upon initialization * [PM-24158] Partial update to settings component tests * [PM-24158] Fix billing mocked return value and add mac OS autotype test * [PM-24158] Add missing premium checks * [PM-24158] Update provider * [PM-24158] Renamed autotype resolved value * [PM-24158] Update missed resolvedAutotypeEnabled refactor * [PM-24158] Fix tests
2025-12-06 00:13:28 +00:00 · 2025-09-04 09:33:39 -07:00
parent 10a5eba05f
commit 896f54696b
7 changed files with 122 additions and 31 deletions
--- a/apps/desktop/src/app/accounts/settings.component.html
+++ b/apps/desktop/src/app/accounts/settings.component.html
@@ -330,6 +330,33 @@
                  "enableBrowserIntegrationFingerprintDesc" | i18n
                }}</small>
              </div>
+              <div class="form-group" *ngIf="showEnableAutotype">
+                <div class="checkbox">
+                  <label for="enableAutotype">
+                    <input
+                      id="enableAutotype"
+                      type="checkbox"
+                      formControlName="enableAutotype"
+                      (change)="saveEnableAutotype()"
+                    />
+                    {{ "enableAutotypeTransitionKey" | i18n }}
+                    <button
+                      type="button"
+                      bitBadge
+                      variant="success"
+                      (click)="openPremiumDialog()"
+                      *ngIf="!hasPremium"
+                    >
+                      {{ "premium" | i18n }}
+                    </button>
+                  </label>
+                </div>
+                <small class="help-block" *ngIf="form.value.enableAutotype">
+                  <b>{{ "important" | i18n }}</b>
+                  {{ "enableAutotypeDescriptionTransitionKey" | i18n }}
+                  <b>{{ "editShortcut" | i18n }}</b></small
+                >
+              </div>
              <div class="form-group">
                <div class="checkbox">
                  <label for="enableHardwareAcceleration">
@@ -413,22 +440,6 @@
                  "enableDuckDuckGoBrowserIntegrationDesc" | i18n
                }}</small>
              </div>
-              <div class="form-group" *ngIf="showEnableAutotype">
-                <div class="checkbox">
-                  <label for="enableAutotype">
-                    <input
-                      id="enableAutotype"
-                      type="checkbox"
-                      formControlName="enableAutotype"
-                      (change)="saveEnableAutotype()"
-                    />
-                    {{ "enableAutotype" | i18n }}
-                  </label>
-                </div>
-                <small class="help-block"
-                  ><b>{{ "important" | i18n }}</b> {{ "enableAutotypeDescription" | i18n }}</small
-                >
-              </div>
              <div class="form-group">
                <label for="theme">{{ "theme" | i18n }}</label>
                <select
--- a/apps/desktop/src/app/accounts/settings.component.spec.ts
+++ b/apps/desktop/src/app/accounts/settings.component.spec.ts
@@ -11,6 +11,7 @@ import { AccountService } from "@bitwarden/common/auth/abstractions/account.serv
 import { UserVerificationService } from "@bitwarden/common/auth/abstractions/user-verification/user-verification.service.abstraction";
 import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
 import { DeviceType } from "@bitwarden/common/enums";
 import { PinServiceAbstraction } from "@bitwarden/common/key-management/pin/pin.service.abstraction";
 import {
@@ -70,6 +71,8 @@ describe("SettingsComponent", () => {
  const keyService = mock<KeyService>();
  const dialogService = mock<DialogService>();
  const desktopAutotypeService = mock<DesktopAutotypeService>();
+  const billingAccountProfileStateService = mock<BillingAccountProfileStateService>();
+  const configService = mock<ConfigService>();

  beforeEach(async () => {
    jest.clearAllMocks();
@@ -99,7 +102,7 @@ describe("SettingsComponent", () => {
        },
        { provide: AccountService, useValue: accountService },
        { provide: BiometricStateService, useValue: biometricStateService },
-        { provide: ConfigService, useValue: mock<ConfigService>() },
+        { provide: ConfigService, useValue: configService },
        {
          provide: DesktopAutofillSettingsService,
          useValue: desktopAutofillSettingsService,
@@ -127,6 +130,7 @@ describe("SettingsComponent", () => {
        { provide: MessagingService, useValue: messagingService },
        { provide: ToastService, useValue: mock<ToastService>() },
        { provide: DesktopAutotypeService, useValue: desktopAutotypeService },
+        { provide: BillingAccountProfileStateService, useValue: billingAccountProfileStateService },
      ],
      schemas: [NO_ERRORS_SCHEMA],
    }).compileComponents();
@@ -177,7 +181,9 @@ describe("SettingsComponent", () => {
    i18nService.userSetLocale$ = of("en");
    pinServiceAbstraction.isPinSet.mockResolvedValue(false);
    policyService.policiesByType$.mockReturnValue(of([null]));
-    desktopAutotypeService.autotypeEnabled$ = of(false);
+    desktopAutotypeService.resolvedAutotypeEnabled$ = of(false);
+    billingAccountProfileStateService.hasPremiumFromAnySource$.mockReturnValue(of(false));
+    configService.getFeatureFlag$.mockReturnValue(of(true));
  });

  afterEach(() => {
@@ -638,4 +644,27 @@ describe("SettingsComponent", () => {
      );
    });
  });
+
+  describe("desktop autotype", () => {
+    it("autotype should be hidden on mac os", async () => {
+      // Set OS
+      platformUtilsService.getDevice.mockReturnValue(DeviceType.MacOsDesktop);
+
+      // Recreate component to apply the correct device
+      fixture = TestBed.createComponent(SettingsComponent);
+      component = fixture.componentInstance;
+
+      await component.ngOnInit();
+      fixture.detectChanges();
+
+      // `enableAutotype` label shouldn't be found
+      const showEnableAutotypeLabelElement = fixture.debugElement.query(
+        By.css("label[for='enableAutotype']"),
+      );
+      expect(showEnableAutotypeLabelElement).toBeNull();
+
+      // `showEnableAutotype` should be false
+      expect(component.showEnableAutotype).toBe(false);
+    });
+  });
 });
--- a/apps/desktop/src/app/accounts/settings.component.ts
+++ b/apps/desktop/src/app/accounts/settings.component.ts
@@ -17,6 +17,7 @@ import { UserVerificationService as UserVerificationServiceAbstraction } from "@
 import { getUserId } from "@bitwarden/common/auth/services/account.service";
 import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
 import { DomainSettingsService } from "@bitwarden/common/autofill/services/domain-settings.service";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
 import { DeviceType } from "@bitwarden/common/enums";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { PinServiceAbstraction } from "@bitwarden/common/key-management/pin/pin.service.abstraction";
@@ -50,6 +51,7 @@ import {
  SelectModule,
  ToastService,
  TypographyModule,
+  BadgeComponent,
 } from "@bitwarden/components";
 import { KeyService, BiometricStateService, BiometricsStatus } from "@bitwarden/key-management";
 import { PermitCipherDetailsPopoverComponent } from "@bitwarden/vault";
@@ -58,6 +60,7 @@ import { SetPinComponent } from "../../auth/components/set-pin.component";
 import { SshAgentPromptType } from "../../autofill/models/ssh-agent-setting";
 import { DesktopAutofillSettingsService } from "../../autofill/services/desktop-autofill-settings.service";
 import { DesktopAutotypeService } from "../../autofill/services/desktop-autotype.service";
+import { PremiumComponent } from "../../billing/app/accounts/premium.component";
 import { DesktopBiometricsService } from "../../key-management/biometrics/desktop.biometrics.service";
 import { DesktopSettingsService } from "../../platform/services/desktop-settings.service";
 import { NativeMessagingManifestService } from "../services/native-messaging-manifest.service";
@@ -67,6 +70,7 @@ import { NativeMessagingManifestService } from "../services/native-messaging-man
  templateUrl: "settings.component.html",
  standalone: true,
  imports: [
+    BadgeComponent,
    CheckboxModule,
    CommonModule,
    FormFieldModule,
@@ -130,6 +134,8 @@ export class SettingsComponent implements OnInit, OnDestroy {

  pinEnabled$: Observable<boolean> = of(true);

+  hasPremium: boolean = false;
+
  form = this.formBuilder.group({
    // Security
    vaultTimeout: [null as VaultTimeout | null],
@@ -158,7 +164,10 @@ export class SettingsComponent implements OnInit, OnDestroy {
    sshAgentPromptBehavior: SshAgentPromptType.Always,
    allowScreenshots: false,
    enableDuckDuckGoBrowserIntegration: false,
-    enableAutotype: false,
+    enableAutotype: this.formBuilder.control<boolean>({
+      value: false,
+      disabled: true,
+    }),
    theme: [null as Theme | null],
    locale: [null as string | null],
  });
@@ -193,6 +202,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
    private validationService: ValidationService,
    private changeDetectorRef: ChangeDetectorRef,
    private toastService: ToastService,
+    private billingAccountProfileStateService: BillingAccountProfileStateService,
  ) {
    this.isMac = this.platformUtilsService.getDevice() === DeviceType.MacOsDesktop;
    this.isLinux = this.platformUtilsService.getDevice() === DeviceType.LinuxDesktop;
@@ -268,10 +278,14 @@ export class SettingsComponent implements OnInit, OnDestroy {

    // Autotype is for Windows initially
    const isWindows = this.platformUtilsService.getDevice() === DeviceType.WindowsDesktop;
-    const windowsDesktopAutotypeFeatureFlag = await this.configService.getFeatureFlag(
-      FeatureFlag.WindowsDesktopAutotype,
-    );
-    this.showEnableAutotype = isWindows && windowsDesktopAutotypeFeatureFlag;
+    if (isWindows) {
+      this.configService
+        .getFeatureFlag$(FeatureFlag.WindowsDesktopAutotype)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe((enabled) => {
+          this.showEnableAutotype = enabled;
+        });
+    }

    this.userHasMasterPassword = await this.userVerificationService.hasMasterPassword();

@@ -377,7 +391,7 @@ export class SettingsComponent implements OnInit, OnDestroy {
        this.desktopSettingsService.sshAgentPromptBehavior$,
      ),
      allowScreenshots: !(await firstValueFrom(this.desktopSettingsService.preventScreenshots$)),
-      enableAutotype: await firstValueFrom(this.desktopAutotypeService.autotypeEnabled$),
+      enableAutotype: await firstValueFrom(this.desktopAutotypeService.resolvedAutotypeEnabled$),
      theme: await firstValueFrom(this.themeStateService.selectedTheme$),
      locale: await firstValueFrom(this.i18nService.userSetLocale$),
    };
@@ -402,6 +416,19 @@ export class SettingsComponent implements OnInit, OnDestroy {
        this.form.controls.vaultTimeoutAction.setValue(action, { emitEvent: false });
      });

+    if (isWindows) {
+      this.billingAccountProfileStateService
+        .hasPremiumFromAnySource$(activeAccount.id)
+        .pipe(takeUntil(this.destroy$))
+        .subscribe((hasPremium) => {
+          this.hasPremium = hasPremium;
+
+          if (this.hasPremium) {
+            this.form.controls.enableAutotype.enable();
+          }
+        });
+    }
+
    // Form events
    this.form.controls.vaultTimeout.valueChanges
      .pipe(
@@ -865,6 +892,10 @@ export class SettingsComponent implements OnInit, OnDestroy {
    }
  }

+  async openPremiumDialog() {
+    await this.dialogService.open(PremiumComponent);
+  }
+
  async saveEnableAutotype() {
    await this.desktopAutotypeService.setAutotypeEnabledState(this.form.value.enableAutotype);
  }
--- a/apps/desktop/src/app/services/services.module.ts
+++ b/apps/desktop/src/app/services/services.module.ts
@@ -49,6 +49,7 @@ import {
 import { MasterPasswordApiService } from "@bitwarden/common/auth/abstractions/master-password-api.service.abstraction";
 import { SsoLoginServiceAbstraction } from "@bitwarden/common/auth/abstractions/sso-login.service.abstraction";
 import { AutofillSettingsServiceAbstraction } from "@bitwarden/common/autofill/services/autofill-settings.service";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
 import { ClientType } from "@bitwarden/common/enums";
 import { ProcessReloadServiceAbstraction } from "@bitwarden/common/key-management/abstractions/process-reload.service";
 import { KeyGenerationService } from "@bitwarden/common/key-management/crypto";
@@ -462,6 +463,7 @@ const safeProviders: SafeProvider[] = [
      ConfigService,
      GlobalStateProvider,
      PlatformUtilsServiceAbstraction,
+      BillingAccountProfileStateService,
    ],
  }),
 ];
--- a/apps/desktop/src/autofill/services/desktop-autotype.service.ts
+++ b/apps/desktop/src/autofill/services/desktop-autotype.service.ts
@@ -3,6 +3,7 @@ import { combineLatest, filter, firstValueFrom, map, Observable, of, switchMap }
 import { AccountService } from "@bitwarden/common/auth/abstractions/account.service";
 import { AuthService } from "@bitwarden/common/auth/abstractions/auth.service";
 import { AuthenticationStatus } from "@bitwarden/common/auth/enums/authentication-status";
+import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions";
 import { DeviceType } from "@bitwarden/common/enums";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
@@ -25,7 +26,7 @@ export const AUTOTYPE_ENABLED = new KeyDefinition<boolean>(
 export class DesktopAutotypeService {
  private readonly autotypeEnabledState = this.globalStateProvider.get(AUTOTYPE_ENABLED);

-  autotypeEnabled$: Observable<boolean> = of(false);
+  resolvedAutotypeEnabled$: Observable<boolean> = of(false);

  constructor(
    private accountService: AccountService,
@@ -34,6 +35,7 @@ export class DesktopAutotypeService {
    private configService: ConfigService,
    private globalStateProvider: GlobalStateProvider,
    private platformUtilsService: PlatformUtilsService,
+    private billingAccountProfileStateService: BillingAccountProfileStateService,
  ) {
    ipc.autofill.listenAutotypeRequest(async (windowTitle, callback) => {
      const possibleCiphers = await this.matchCiphersToWindowTitle(windowTitle);
@@ -48,23 +50,30 @@ export class DesktopAutotypeService {

  async init() {
    if (this.platformUtilsService.getDevice() === DeviceType.WindowsDesktop) {
-      this.autotypeEnabled$ = combineLatest([
+      this.resolvedAutotypeEnabled$ = combineLatest([
        this.autotypeEnabledState.state$,
        this.configService.getFeatureFlag$(FeatureFlag.WindowsDesktopAutotype),
        this.accountService.activeAccount$.pipe(
-          map((account) => account?.id),
+          map((activeAccount) => activeAccount?.id),
          switchMap((userId) => this.authService.authStatusFor$(userId)),
        ),
+        this.accountService.activeAccount$.pipe(
+          map((activeAccount) => activeAccount?.id),
+          switchMap((userId) =>
+            this.billingAccountProfileStateService.hasPremiumFromAnySource$(userId),
+          ),
+        ),
      ]).pipe(
        map(
-          ([autotypeEnabled, windowsDesktopAutotypeFeatureFlag, authStatus]) =>
+          ([autotypeEnabled, windowsDesktopAutotypeFeatureFlag, authStatus, hasPremium]) =>
            autotypeEnabled &&
            windowsDesktopAutotypeFeatureFlag &&
-            authStatus == AuthenticationStatus.Unlocked,
+            authStatus == AuthenticationStatus.Unlocked &&
+            hasPremium,
        ),
      );

-      this.autotypeEnabled$.subscribe((enabled) => {
+      this.resolvedAutotypeEnabled$.subscribe((enabled) => {
        ipc.autofill.configureAutotype(enabled);
      });
    }
--- a/apps/desktop/src/billing/app/accounts/premium.component.html
+++ b/apps/desktop/src/billing/app/accounts/premium.component.html
@@ -61,7 +61,7 @@
        >
          <b>{{ "premiumPurchase" | i18n }}</b>
        </button>
-        <button type="button" data-dismiss="modal">{{ "close" | i18n }}</button>
+        <button type="button" bitDialogClose>{{ "close" | i18n }}</button>
        <div class="right" *ngIf="!(isPremium$ | async)">
          <button
            #refreshBtn
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -4095,5 +4095,14 @@
  },
  "confirm": {
    "message": "Confirm"
+  },
+  "enableAutotypeTransitionKey": {
+    "message": "Enable autotype shortcut"
+  },
+  "enableAutotypeDescriptionTransitionKey": {
+    "message": "Be sure you are in the correct field before using the shortcut to avoid filling data into the wrong place."
+  },
+  "editShortcut": {
+    "message": "Edit shortcut"
  }
 }