Merge branch 'main' into ps/extension-refresh

libs/angular/src/auth/functions/unauth-ui-refresh-route-swap.ts

@@ -0,0 +1,33 @@
+import { Type, inject } from "@angular/core";
+import { Route, Routes } from "@angular/router";
+
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+
+import { componentRouteSwap } from "../../utils/component-route-swap";
+
+/**
+ * Helper function to swap between two components based on the UnauthenticatedExtensionUIRefresh feature flag.
+ * We need this because the auth teams's authenticated UI will be refreshed as part of the MVP but the
+ * unauthenticated UIs will not necessarily make the cut.
+ * Note: Even though this is primarily an extension refresh initiative, this will be used across clients
+ * as we are consolidating the unauthenticated UIs into single libs/auth components which affects all clients.
+ * @param defaultComponent - The current non-refreshed component to render.
+ * @param refreshedComponent - The new refreshed component to render.
+ * @param options - The shared route options to apply to both components.
+ */
+export function unauthUiRefreshSwap(
+  defaultComponent: Type<any>,
+  refreshedComponent: Type<any>,
+  options: Route,
+): Routes {
+  return componentRouteSwap(
+    defaultComponent,
+    refreshedComponent,
+    async () => {
+      const configService = inject(ConfigService);
+      return configService.getFeatureFlag(FeatureFlag.UnauthenticatedExtensionUIRefresh);
+    },
+    options,
+  );
+}

libs/angular/src/vault/components/premium.component.ts

@@ -3,12 +3,13 @@ import { firstValueFrom, Observable } from "rxjs";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { BillingAccountProfileStateService } from "@bitwarden/common/billing/abstractions/account/billing-account-profile-state.service";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
-import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
-import { DialogService } from "@bitwarden/components";
+import { DialogService, SimpleDialogOptions } from "@bitwarden/components";
 
 @Directive()
 export class PremiumComponent implements OnInit {
@@ -16,13 +17,14 @@ export class PremiumComponent implements OnInit {
   price = 10;
   refreshPromise: Promise<any>;
   cloudWebVaultUrl: string;
+  extensionRefreshFlagEnabled: boolean;
 
   constructor(
     protected i18nService: I18nService,
     protected platformUtilsService: PlatformUtilsService,
     protected apiService: ApiService,
+    protected configService: ConfigService,
     private logService: LogService,
-    protected stateService: StateService,
     protected dialogService: DialogService,
     private environmentService: EnvironmentService,
     billingAccountProfileStateService: BillingAccountProfileStateService,
@@ -32,6 +34,9 @@ export class PremiumComponent implements OnInit {
 
   async ngOnInit() {
     this.cloudWebVaultUrl = await firstValueFrom(this.environmentService.cloudWebVaultUrl$);
+    this.extensionRefreshFlagEnabled = await this.configService.getFeatureFlag(
+      FeatureFlag.ExtensionRefresh,
+    );
   }
 
   async refresh() {
@@ -45,11 +50,20 @@ export class PremiumComponent implements OnInit {
   }
 
   async purchase() {
-    const confirmed = await this.dialogService.openSimpleDialog({
-      title: { key: "premiumPurchase" },
-      content: { key: "premiumPurchaseAlert" },
+    const dialogOpts: SimpleDialogOptions = {
+      title: { key: "continueToBitwardenDotCom" },
+      content: {
+        key: this.extensionRefreshFlagEnabled ? "premiumPurchaseAlertV2" : "premiumPurchaseAlert",
+      },
       type: "info",
-    });
+    };
+
+    if (this.extensionRefreshFlagEnabled) {
+      dialogOpts.acceptButtonText = { key: "continue" };
+      dialogOpts.cancelButtonText = { key: "close" };
+    }
+
+    const confirmed = await this.dialogService.openSimpleDialog(dialogOpts);
 
     if (confirmed) {
       this.platformUtilsService.launchUri(