[PM-8161] Payment optional trial MVP

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

@@ -46,7 +46,7 @@
     protected formBuilder: UntypedFormBuilder,
     protected i18nService: I18nService,
     protected organizationBillingService: OrganizationBillingService,
-    private router: Router,
+    protected router: Router,
   ) {}
 
   ngOnInit(): void {

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

@@ -22,12 +22,29 @@
       bitButton
       buttonType="primary"
       [disabled]="formGroup.get('name').invalid"
+      [loading]="createOrganizationLoading"
+      (click)="createOrganizationOnTrial()"
+      *ngIf="enableTrialPayment$ | async"
+    >
+      {{ "startTrial" | i18n }}
+    </button>
+    <button
+      type="button"
+      bitButton
+      buttonType="primary"
+      [disabled]="formGroup.get('name').invalid"
+      [loading]="createOrganizationLoading"
       cdkStepperNext
+      *ngIf="!(enableTrialPayment$ | async)"
     >
       {{ "next" | i18n }}
     </button>
   </app-vertical-step>
-  <app-vertical-step label="{{ 'billing' | i18n | titlecase }}" [subLabel]="billingSubLabel">
+  <app-vertical-step
+    label="{{ 'billing' | i18n | titlecase }}"
+    [subLabel]="billingSubLabel"
+    *ngIf="!(enableTrialPayment$ | async)"
+  >
     <app-trial-billing-step
       *ngIf="stepper.selectedIndex === 2"
       [organizationInfo]="{

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

@@ -1,6 +1,14 @@
-import { Component, Input, ViewChild } from "@angular/core";
+import { Component, Input, OnInit, ViewChild } from "@angular/core";
+import { UntypedFormBuilder } from "@angular/forms";
+import { ActivatedRoute, Router } from "@angular/router";
+import { Subject, takeUntil } from "rxjs";
 
-import { ProductTierType } from "@bitwarden/common/billing/enums";
+import { OrganizationBillingServiceAbstraction as OrganizationBillingService } from "@bitwarden/common/billing/abstractions/organization-billing.service";
+import { PlanType, ProductTierType } from "@bitwarden/common/billing/enums";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
+import { ReferenceEventRequest } from "@bitwarden/common/models/request/reference-event.request";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 
 import {
   OrganizationCreatedEvent,
@@ -9,18 +17,64 @@
 } from "../../../billing/accounts/trial-initiation/trial-billing-step.component";
 import { VerticalStepperComponent } from "../../trial-initiation/vertical-stepper/vertical-stepper.component";
 import { SecretsManagerTrialFreeStepperComponent } from "../secrets-manager/secrets-manager-trial-free-stepper.component";
+import { ValidOrgParams } from "../trial-initiation.component";
+
+const trialFlowOrgs = [
+  ValidOrgParams.teams,
+  ValidOrgParams.teamsStarter,
+  ValidOrgParams.enterprise,
+  ValidOrgParams.families,
+];
 
 @Component({
   selector: "app-secrets-manager-trial-paid-stepper",
   templateUrl: "secrets-manager-trial-paid-stepper.component.html",
 })
-export class SecretsManagerTrialPaidStepperComponent extends SecretsManagerTrialFreeStepperComponent {
+export class SecretsManagerTrialPaidStepperComponent
+  extends SecretsManagerTrialFreeStepperComponent
+  implements OnInit
+{
   @ViewChild("stepper", { static: false }) verticalStepper: VerticalStepperComponent;
   @Input() organizationTypeQueryParameter: string;
 
+  plan: PlanType;
+  createOrganizationLoading = false;
   billingSubLabel = this.i18nService.t("billingTrialSubLabel");
   organizationId: string;
 
+  private destroy$ = new Subject<void>();
+  protected enableTrialPayment$ = this.configService.getFeatureFlag$(
+    FeatureFlag.TrialPaymentOptional,
+  );
+
+  constructor(
+    private route: ActivatedRoute,
+    private configService: ConfigService,
+    protected formBuilder: UntypedFormBuilder,
+    protected i18nService: I18nService,
+    protected organizationBillingService: OrganizationBillingService,
+    protected router: Router,
+  ) {
+    super(formBuilder, i18nService, organizationBillingService, router);
+  }
+
+  async ngOnInit(): Promise<void> {
+    this.referenceEventRequest = new ReferenceEventRequest();
+    this.referenceEventRequest.initiationPath = "Secrets Manager trial from marketing website";
+
+    this.route.queryParams.pipe(takeUntil(this.destroy$)).subscribe((qParams) => {
+      if (trialFlowOrgs.includes(qParams.org)) {
+        if (qParams.org === ValidOrgParams.teamsStarter) {
+          this.plan = PlanType.TeamsStarter;
+        } else if (qParams.org === ValidOrgParams.teams) {
+          this.plan = PlanType.TeamsAnnually;
+        } else if (qParams.org === ValidOrgParams.enterprise) {
+          this.plan = PlanType.EnterpriseAnnually;
+        }
+      }
+    });
+  }
+
   organizationCreated(event: OrganizationCreatedEvent) {
     this.organizationId = event.organizationId;
     this.billingSubLabel = event.planDescription;
@@ -31,6 +85,29 @@
     this.verticalStepper.previous();
   }
 
+  async createOrganizationOnTrial(): Promise<void> {
+    this.createOrganizationLoading = true;
+    const response = await this.organizationBillingService.purchaseSubscriptionNoPaymentMethod({
+      organization: {
+        name: this.formGroup.get("name").value,
+        billingEmail: this.formGroup.get("email").value,
+        initiationPath: "Secrets Manager trial from marketing website",
+      },
+      plan: {
+        type: this.plan,
+        subscribeToSecretsManager: true,
+        isFromSecretsManagerTrial: true,
+        passwordManagerSeats: 1,
+        secretsManagerSeats: 1,
+      },
+    });
+
+    this.organizationId = response?.id;
+    this.subLabels.organizationInfo = response?.name;
+    this.createOrganizationLoading = false;
+    this.verticalStepper.next();
+  }
+
   get createAccountLabel() {
     const organizationType =
       this.productType === ProductTierType.TeamsStarter

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

@@ -91,12 +91,17 @@ <h2 class="tw-pb-4 tw-pl-4 tw-pt-5 tw-text-base tw-font-bold tw-uppercase">
                   bitButton
                   buttonType="primary"
                   [disabled]="orgInfoFormGroup.get('name').invalid"
-                  cdkStepperNext
+                  [loading]="loading"
+                  (click)="createOrganizationOnTrial()"
                 >
-                  {{ "next" | i18n }}
+                  {{ (enableTrialPayment$ | async) ? ("startTrial" | i18n) : ("next" | i18n) }}
                 </button>
               </app-vertical-step>
-              <app-vertical-step label="Billing" [subLabel]="billingSubLabel">
+              <app-vertical-step
+                label="Billing"
+                [subLabel]="billingSubLabel"
+                *ngIf="!(enableTrialPayment$ | async)"
+              >
                 <app-trial-billing-step
                   *ngIf="stepper.selectedIndex === 2"
                   [organizationInfo]="{

apps/web/src/app/auth/trial-initiation/trial-initiation.component.spec.ts

@@ -13,7 +13,9 @@ import { PolicyApiServiceAbstraction } from "@bitwarden/common/admin-console/abs
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { MasterPasswordPolicyOptions } from "@bitwarden/common/admin-console/models/domain/master-password-policy-options";
 import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
+import { OrganizationBillingServiceAbstraction as OrganizationBillingService } from "@bitwarden/common/billing/abstractions/organization-billing.service";
 import { PlanType } from "@bitwarden/common/billing/enums";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 import { StateService } from "@bitwarden/common/platform/abstractions/state.service";
@@ -39,6 +41,8 @@ describe("TrialInitiationComponent", () => {
   let policyServiceMock: MockProxy<PolicyService>;
   let routerServiceMock: MockProxy<RouterService>;
   let acceptOrgInviteServiceMock: MockProxy<AcceptOrganizationInviteService>;
+  let organizationBillingServiceMock: MockProxy<OrganizationBillingService>;
+  let configServiceMock: MockProxy<ConfigService>;
 
   beforeEach(() => {
     // only define services directly that we want to mock return values in this component
@@ -47,6 +51,8 @@ describe("TrialInitiationComponent", () => {
     policyServiceMock = mock<PolicyService>();
     routerServiceMock = mock<RouterService>();
     acceptOrgInviteServiceMock = mock<AcceptOrganizationInviteService>();
+    organizationBillingServiceMock = mock<OrganizationBillingService>();
+    configServiceMock = mock<ConfigService>();
 
     // FIXME: Verify that this floating promise is intentional. If it is, add an explanatory comment and ensure there is proper error handling.
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -92,6 +98,14 @@ describe("TrialInitiationComponent", () => {
           provide: AcceptOrganizationInviteService,
           useValue: acceptOrgInviteServiceMock,
         },
+        {
+          provide: OrganizationBillingService,
+          useValue: organizationBillingServiceMock,
+        },
+        {
+          provide: ConfigService,
+          useValue: configServiceMock,
+        },
       ],
       schemas: [NO_ERRORS_SCHEMA], // Allows child components to be ignored (such as register component)
     }).compileComponents();

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

@@ -9,8 +9,15 @@
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { MasterPasswordPolicyOptions } from "@bitwarden/common/admin-console/models/domain/master-password-policy-options";
 import { Policy } from "@bitwarden/common/admin-console/models/domain/policy";
+import {
+  OrganizationInformation,
+  PlanInformation,
+  OrganizationBillingServiceAbstraction as OrganizationBillingService,
+} from "@bitwarden/common/billing/abstractions/organization-billing.service";
 import { PlanType, ProductTierType } from "@bitwarden/common/billing/enums";
+import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ReferenceEventRequest } from "@bitwarden/common/models/request/reference-event.request";
+import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/platform/abstractions/log.service";
 
@@ -25,7 +32,7 @@
 import { RouterService } from "./../../core/router.service";
 import { VerticalStepperComponent } from "./vertical-stepper/vertical-stepper.component";
 
-enum ValidOrgParams {
+export enum ValidOrgParams {
   families = "families",
   enterprise = "enterprise",
   teams = "teams",
@@ -69,6 +76,7 @@
   productTier: ProductTierType;
   accountCreateOnly = true;
   useTrialStepper = false;
+  loading = false;
   policies: Policy[];
   enforcedPolicyOptions: MasterPasswordPolicyOptions;
   trialFlowOrgs: string[] = [
@@ -115,6 +123,9 @@
   }
 
   private destroy$ = new Subject<void>();
+  protected enableTrialPayment$ = this.configService.getFeatureFlag$(
+    FeatureFlag.TrialPaymentOptional,
+  );
 
   constructor(
     private route: ActivatedRoute,
@@ -127,6 +138,8 @@
     private i18nService: I18nService,
     private routerService: RouterService,
     private acceptOrgInviteService: AcceptOrganizationInviteService,
+    private organizationBillingService: OrganizationBillingService,
+    private configService: ConfigService,
   ) {}
 
   async ngOnInit(): Promise<void> {
@@ -215,6 +228,30 @@
     }
   }
 
+  async createOrganizationOnTrial() {
+    this.loading = true;
+    const organization: OrganizationInformation = {
+      name: this.orgInfoFormGroup.get("name").value,
+      billingEmail: this.orgInfoFormGroup.get("email").value,
+      initiationPath: "Password Manager trial from marketing website",
+    };
+
+    const plan: PlanInformation = {
+      type: this.plan,
+      passwordManagerSeats: 1,
+    };
+
+    const response = await this.organizationBillingService.purchaseSubscriptionNoPaymentMethod({
+      organization,
+      plan,
+    });
+
+    this.orgId = response?.id;
+    this.billingSubLabel = `${this.i18nService.t("annual")} ($0/${this.i18nService.t("yr")})`;
+    this.loading = false;
+    this.verticalStepper.next();
+  }
+
   createdAccount(email: string) {
     this.email = email;
     this.orgInfoFormGroup.get("email")?.setValue(email);

apps/web/src/app/billing/organizations/change-plan-dialog.component.html

@@ -345,16 +345,22 @@ <h2 bitTypography="h4">{{ "paymentMethod" | i18n }}</h2>
           <a></a>
         </p>
         <app-payment
-          *ngIf="(upgradeRequiresPaymentMethod || showPayment) && !deprecateStripeSourcesAPI"
+          *ngIf="
+            (upgradeRequiresPaymentMethod || showPayment || isPaymentSourceEmpty()) &&
+            !deprecateStripeSourcesAPI
+          "
           [hideCredit]="true"
         ></app-payment>
         <app-payment-v2
-          *ngIf="(upgradeRequiresPaymentMethod || showPayment) && deprecateStripeSourcesAPI"
+          *ngIf="
+            (upgradeRequiresPaymentMethod || showPayment || isPaymentSourceEmpty()) &&
+            deprecateStripeSourcesAPI
+          "
           [showAccountCredit]="false"
         >
         </app-payment-v2>
         <app-tax-info
-          *ngIf="showPayment || upgradeRequiresPaymentMethod"
+          *ngIf="showPayment || upgradeRequiresPaymentMethod || isPaymentSourceEmpty()"
           (onCountryChanged)="changedCountry()"
         ></app-tax-info>
         <div id="price" class="tw-mt-4">

apps/web/src/app/billing/organizations/change-plan-dialog.component.ts

@@ -282,6 +282,12 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
       : this.discountPercentageFromSub + this.discountPercentage;
   }
 
+  isPaymentSourceEmpty() {
+    return this.deprecateStripeSourcesAPI
+      ? this.paymentSource === null || this.paymentSource === undefined
+      : this.billing?.paymentSource === null || this.billing?.paymentSource === undefined;
+  }
+
   isSecretsManagerTrial(): boolean {
     return (
       this.sub?.subscription?.items?.some((item) =>
@@ -723,7 +729,7 @@ export class ChangePlanDialogComponent implements OnInit, OnDestroy {
     // Secrets Manager
     this.buildSecretsManagerRequest(request);
 
-    if (this.upgradeRequiresPaymentMethod || this.showPayment) {
+    if (this.upgradeRequiresPaymentMethod || this.showPayment || this.isPaymentSourceEmpty()) {
       if (this.deprecateStripeSourcesAPI) {
         const tokenizedPaymentSource = await this.paymentV2Component.tokenize();
         const updatePaymentMethodRequest = new UpdatePaymentMethodRequest();

apps/web/src/app/billing/organizations/organization-billing.module.ts

@@ -1,5 +1,6 @@
 import { NgModule } from "@angular/core";
 
+import { BannerModule } from "../../../../../../libs/components/src/banner/banner.module";
 import { UserVerificationModule } from "../../auth/shared/components/user-verification";
 import { LooseComponentsModule } from "../../shared";
 import { BillingSharedModule } from "../shared";
@@ -28,6 +29,7 @@
     BillingSharedModule,
     OrganizationPlansComponent,
     LooseComponentsModule,
+    BannerModule,
   ],
   declarations: [
     AdjustSubscription,

apps/web/src/app/billing/organizations/payment-method/organization-payment-method.component.html

@@ -1,3 +1,22 @@
+<bit-banner
+  id="free-trial-banner"
+  class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
+  bannerType="premium"
+  icon="bwi-billing"
+  [showClose]="false"
+  *ngIf="freeTrialData?.shownBanner"
+>
+  {{ freeTrialData.message }}
+  <a
+    bitLink
+    linkType="contrast"
+    (click)="changePayment()"
+    class="tw-cursor-pointer"
+    rel="noreferrer noopener"
+  >
+    {{ "routeToPaymentMethodTrigger" | i18n }}
+  </a>
+</bit-banner>
 <app-header></app-header>
 <bit-container>
   <ng-container *ngIf="loading">