[AC-2102] [AC-2263] [AC-2264] Consolidated Secrets Manager Trial Updates (#8202)

* AC-2102: Point 'Get Started' button to SM

* AC-2263/AC-2264: Update SM trial content based on org type

* Fix copy misses

apps/web/src/app/auth/trial-initiation/content/secrets-manager-content.component.html

@@ -1,33 +1,30 @@
 <h1 class="tw-text-4xl !tw-text-alt2">{{ header }}</h1>
 <div class="tw-pt-16">
   <h2 class="tw-text-2xl tw-font-semibold">
-    Secure your business with a simpler, faster way to secure and manage secrets
+    {{ headline }}
   </h2>
 </div>
 <ul class="tw-mt-12 tw-flex tw-flex-col tw-gap-10 tw-text-2xl tw-text-main">
-  <li>Unlimited secrets, users, and projects</li>
-  <li>Simple and transparent pricing</li>
-  <li>End-to-end encryption</li>
+  <li *ngFor="let primaryPoint of primaryPoints">
+    {{ primaryPoint }}
+  </li>
 </ul>
 <div class="tw-mt-12 tw-flex tw-flex-col">
   <div class="tw-rounded-[32px] tw-bg-background">
     <div class="tw-my-8 tw-mx-6">
-      <h2 class="tw-pl-5 tw-font-semibold">Limited time offer</h2>
+      <h2 class="tw-pl-5 tw-font-semibold">{{ calloutHeadline }}</h2>
       <ul class="tw-space-y-4 tw-mt-4 tw-pl-10">
-        <li>
-          Sign up today and receive a complimentary 12-month subscription to Bitwarden Password
-          Manager
+        <li *ngFor="let callout of callouts">
+          {{ callout }}
         </li>
-        <li>Experience complete security across your organization</li>
-        <li>Secure all your sensitive credentials, from passwords to machine secrets</li>
       </ul>
     </div>
   </div>
 </div>
 <div class="tw-mt-12 tw-flex tw-flex-col tw-items-center tw-gap-5">
   <app-review-blurb
-    header="Businesses trust Bitwarden to secure their secrets"
+    header="Businesses trust Bitwarden to secure their infrastructure"
     quote="At this point, it would be almost impossible to leak our secrets. It's just one less thing we have to worry about."
-    source="Head of IT, Titanom Technologies"
+    source="Titanom Technologies"
   ></app-review-blurb>
 </div>

apps/web/src/app/auth/trial-initiation/content/secrets-manager-content.component.ts

@@ -8,6 +8,38 @@ import { Subject, takeUntil } from "rxjs";
 })
 export class SecretsManagerContentComponent implements OnInit, OnDestroy {
   header: string;
+  headline =
+    "A simpler, faster way to secure and automate secrets across code and infrastructure deployments";
+  primaryPoints: string[];
+  calloutHeadline: string;
+  callouts: string[];
+
+  private paidPrimaryPoints = [
+    "Unlimited secrets, users, and projects",
+    "Simple and transparent pricing",
+    "Zero-knowledge, end-to-end encryption",
+  ];
+
+  private paidCalloutHeadline = "Limited time offer";
+
+  private paidCallouts = [
+    "Sign up today and receive a complimentary 12-month subscription to Bitwarden Password Manager",
+    "Experience complete security across your organization",
+    "Secure all your sensitive credentials, from user applications to machine secrets",
+  ];
+
+  private freePrimaryPoints = [
+    "Unlimited secrets",
+    "Simple and transparent pricing",
+    "Zero-knowledge, end-to-end encryption",
+  ];
+
+  private freeCalloutHeadline = "Go beyond developer security!";
+
+  private freeCallouts = [
+    "Your Bitwarden account will also grant complimentary access to Bitwarden Password Manager",
+    "Extend end-to-end encryption to your personal passwords, addresses, credit cards and notes",
+  ];
 
   private destroy$ = new Subject<void>();
 
@@ -23,13 +55,22 @@ export class SecretsManagerContentComponent implements OnInit, OnDestroy {
       switch (queryParameters.org) {
         case "enterprise":
           this.header = "Secrets Manager for Enterprise";
+          this.primaryPoints = this.paidPrimaryPoints;
+          this.calloutHeadline = this.paidCalloutHeadline;
+          this.callouts = this.paidCallouts;
           break;
         case "free":
           this.header = "Bitwarden Secrets Manager";
+          this.primaryPoints = this.freePrimaryPoints;
+          this.calloutHeadline = this.freeCalloutHeadline;
+          this.callouts = this.freeCallouts;
           break;
         case "teams":
         case "teamsStarter":
           this.header = "Secrets Manager for Teams";
+          this.primaryPoints = this.paidPrimaryPoints;
+          this.calloutHeadline = this.paidCalloutHeadline;
+          this.callouts = this.paidCallouts;
           break;
       }
     });

apps/web/src/app/auth/trial-initiation/secrets-manager/secrets-manager-trial-free-stepper.component.html

@@ -41,14 +41,14 @@
       </ul>
     </div>
     <div class="tw-mb-3 tw-flex">
-      <button type="button" bitButton buttonType="primary" (click)="navigateTo('vault')">
+      <button type="button" bitButton buttonType="primary" (click)="navigateToSecretsManager()">
         {{ "getStarted" | i18n | titlecase }}
       </button>
       <button
         type="button"
         bitButton
         buttonType="secondary"
-        (click)="navigateTo('members')"
+        (click)="navigateToMembers()"
         class="tw-ml-3 tw-inline-flex tw-items-center tw-px-3"
       >
         {{ "inviteUsers" | i18n }}

apps/web/src/app/auth/trial-initiation/secrets-manager/secrets-manager-trial-free-stepper.component.ts

@@ -78,7 +78,11 @@ export class SecretsManagerTrialFreeStepperComponent implements OnInit {
     this.verticalStepper.next();
   }
 
-  async navigateTo(organizationRoute: string): Promise<void> {
-    await this.router.navigate(["organizations", this.organizationId, organizationRoute]);
+  async navigateToMembers(): Promise<void> {
+    await this.router.navigate(["organizations", this.organizationId, "members"]);
+  }
+
+  async navigateToSecretsManager(): Promise<void> {
+    await this.router.navigate(["sm", this.organizationId]);
   }
 }

apps/web/src/app/auth/trial-initiation/secrets-manager/secrets-manager-trial-paid-stepper.component.html

@@ -46,14 +46,14 @@
       [orgLabel]="organizationTypeQueryParameter"
     ></app-trial-confirmation-details>
     <div class="tw-mb-3 tw-flex">
-      <button type="button" bitButton buttonType="primary" (click)="navigateTo('vault')">
+      <button type="button" bitButton buttonType="primary" (click)="navigateToSecretsManager()">
         {{ "getStarted" | i18n | titlecase }}
       </button>
       <button
         type="button"
         bitButton
         buttonType="secondary"
-        (click)="navigateTo('members')"
+        (click)="navigateToMembers()"
         class="tw-ml-3 tw-inline-flex tw-items-center tw-px-3"
       >
         {{ "inviteUsers" | i18n }}