Auth/PM-13318 - AnonLayoutWrapperData Refactor to add full Translation support (#11513)

* PM-13318 - AnonLayoutWrapperData refactor to support all possible string scenarios (untranslated string, translated string, and translated string with placeholders)

* PM-13318 - Fix accidental check in

* PM-13318 - Revert the correct change.

* PM-13318 - Fix test failures

apps/web/src/app/auth/trial-initiation/complete-trial-initiation/resolver/free-trial-text.resolver.spec.ts

@@ -14,22 +14,24 @@ describe("freeTrialTextResolver", () => {
   it("shows password manager text", () => {
     route.queryParams.product = `${ProductType.PasswordManager}`;
 
-    expect(freeTrialTextResolver(route, routerStateSnapshot)).toBe(
-      "continueSettingUpFreeTrialPasswordManager",
-    );
+    expect(freeTrialTextResolver(route, routerStateSnapshot)).toEqual({
+      key: "continueSettingUpFreeTrialPasswordManager",
+    });
   });
 
   it("shows secret manager text", () => {
     route.queryParams.product = `${ProductType.SecretsManager}`;
 
-    expect(freeTrialTextResolver(route, routerStateSnapshot)).toBe(
-      "continueSettingUpFreeTrialSecretsManager",
-    );
+    expect(freeTrialTextResolver(route, routerStateSnapshot)).toEqual({
+      key: "continueSettingUpFreeTrialSecretsManager",
+    });
   });
 
   it("shows default text", () => {
     route.queryParams.product = `${ProductType.PasswordManager},${ProductType.SecretsManager}`;
 
-    expect(freeTrialTextResolver(route, routerStateSnapshot)).toBe("continueSettingUpFreeTrial");
+    expect(freeTrialTextResolver(route, routerStateSnapshot)).toEqual({
+      key: "continueSettingUpFreeTrial",
+    });
   });
 });

apps/web/src/app/auth/trial-initiation/complete-trial-initiation/resolver/free-trial-text.resolver.ts

@@ -1,10 +1,11 @@
 import { ActivatedRouteSnapshot, ResolveFn } from "@angular/router";
 
 import { ProductType } from "@bitwarden/common/billing/enums";
+import { Translation } from "@bitwarden/components";
 
-export const freeTrialTextResolver: ResolveFn<string | null> = (
+export const freeTrialTextResolver: ResolveFn<Translation | null> = (
   route: ActivatedRouteSnapshot,
-): string | null => {
+): Translation | null => {
   const { product } = route.queryParams;
   const products: ProductType[] = (product ?? "").split(",").map((p: string) => parseInt(p));
 
@@ -13,10 +14,16 @@ export const freeTrialTextResolver: ResolveFn<string | null> = (
 
   switch (true) {
     case onlyPasswordManager:
-      return "continueSettingUpFreeTrialPasswordManager";
+      return {
+        key: "continueSettingUpFreeTrialPasswordManager",
+      };
     case onlySecretsManager:
-      return "continueSettingUpFreeTrialSecretsManager";
+      return {
+        key: "continueSettingUpFreeTrialSecretsManager",
+      };
     default:
-      return "continueSettingUpFreeTrial";
+      return {
+        key: "continueSettingUpFreeTrial",
+      };
   }
 };

apps/web/src/app/oss-routing.module.ts

@@ -228,7 +228,9 @@ const routes: Routes = [
         path: "signup",
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
         data: {
-          pageTitle: "createAccount",
+          pageTitle: {
+            key: "createAccount",
+          },
           titleId: "createAccount",
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
         children: [
@@ -250,8 +252,12 @@ const routes: Routes = [
         path: "finish-signup",
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
         data: {
-          pageTitle: "setAStrongPassword",
-          pageSubtitle: "finishCreatingYourAccountBySettingAPassword",
+          pageTitle: {
+            key: "setAStrongPassword",
+          },
+          pageSubtitle: {
+            key: "finishCreatingYourAccountBySettingAPassword",
+          },
           titleId: "setAStrongPassword",
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
         children: [
@@ -264,7 +270,9 @@ const routes: Routes = [
       {
         path: "send/:sendId/:key",
         data: {
-          pageTitle: "viewSend",
+          pageTitle: {
+            key: "viewSend",
+          },
           showReadonlyHostname: true,
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
         children: [
@@ -284,15 +292,21 @@ const routes: Routes = [
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification)],
         component: SetPasswordJitComponent,
         data: {
-          pageTitle: "joinOrganization",
-          pageSubtitle: "finishJoiningThisOrganizationBySettingAMasterPassword",
+          pageTitle: {
+            key: "joinOrganization",
+          },
+          pageSubtitle: {
+            key: "finishJoiningThisOrganizationBySettingAMasterPassword",
+          },
         } satisfies AnonLayoutWrapperData,
       },
       {
         path: "signup-link-expired",
         canActivate: [canAccessFeature(FeatureFlag.EmailVerification), unauthGuardFn()],
         data: {
-          pageTitle: "expiredLink",
+          pageTitle: {
+            key: "expiredLink",
+          },
         } satisfies AnonLayoutWrapperData,
         children: [
           {
@@ -308,7 +322,9 @@ const routes: Routes = [
         path: "sso",
         canActivate: [unauthGuardFn()],
         data: {
-          pageTitle: "enterpriseSingleSignOn",
+          pageTitle: {
+            key: "enterpriseSingleSignOn",
+          },
           titleId: "enterpriseSingleSignOn",
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
         children: [
@@ -338,7 +354,9 @@ const routes: Routes = [
           },
         ],
         data: {
-          pageTitle: "logIn",
+          pageTitle: {
+            key: "logIn",
+          },
         },
       },
       ...extensionRefreshSwap(
@@ -354,7 +372,9 @@ const routes: Routes = [
             },
           ],
           data: {
-            pageTitle: "yourVaultIsLockedV2",
+            pageTitle: {
+              key: "yourVaultIsLockedV2",
+            },
             pageIcon: LockIcon,
             showReadonlyHostname: true,
           } satisfies AnonLayoutWrapperData,
@@ -369,7 +389,9 @@ const routes: Routes = [
             },
           ],
           data: {
-            pageTitle: "yourAccountIsLocked",
+            pageTitle: {
+              key: "yourAccountIsLocked",
+            },
             pageIcon: LockIcon,
             showReadonlyHostname: true,
           } satisfies AnonLayoutWrapperData,
@@ -390,7 +412,9 @@ const routes: Routes = [
           },
         ],
         data: {
-          pageTitle: "verifyIdentity",
+          pageTitle: {
+            key: "verifyIdentity",
+          },
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
       },
       {
@@ -408,7 +432,9 @@ const routes: Routes = [
           },
         ],
         data: {
-          pageTitle: "recoverAccountTwoStep",
+          pageTitle: {
+            key: "recoverAccountTwoStep",
+          },
           titleId: "recoverAccountTwoStep",
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
       },
@@ -416,7 +442,9 @@ const routes: Routes = [
         path: "accept-emergency",
         canActivate: [deepLinkGuard()],
         data: {
-          pageTitle: "emergencyAccess",
+          pageTitle: {
+            key: "emergencyAccess",
+          },
           titleId: "acceptEmergency",
           doNotSaveUrl: false,
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
@@ -434,7 +462,9 @@ const routes: Routes = [
         path: "recover-delete",
         canActivate: [unauthGuardFn()],
         data: {
-          pageTitle: "deleteAccount",
+          pageTitle: {
+            key: "deleteAccount",
+          },
           titleId: "deleteAccount",
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
         children: [
@@ -453,7 +483,9 @@ const routes: Routes = [
         path: "verify-recover-delete",
         canActivate: [unauthGuardFn()],
         data: {
-          pageTitle: "deleteAccount",
+          pageTitle: {
+            key: "deleteAccount",
+          },
           titleId: "deleteAccount",
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
         children: [
@@ -468,7 +500,9 @@ const routes: Routes = [
         component: RemovePasswordComponent,
         canActivate: [authGuard],
         data: {
-          pageTitle: "removeMasterPassword",
+          pageTitle: {
+            key: "removeMasterPassword",
+          },
           titleId: "removeMasterPassword",
         } satisfies RouteDataProperties & AnonLayoutWrapperData,
       },

apps/web/src/app/tools/send/access.component.ts

@@ -157,8 +157,8 @@ export class AccessComponent implements OnInit {
     if (this.creatorIdentifier != null) {
       this.layoutWrapperDataService.setAnonLayoutWrapperData({
         pageSubtitle: {
-          subtitle: this.i18nService.t("sendAccessCreatorIdentifier", this.creatorIdentifier),
-          translate: false,
+          key: "sendAccessCreatorIdentifier",
+          placeholders: [this.creatorIdentifier],
         },
       });
     }