[AC-1531] Fix SM subscribe component not showing in free org billing …

…tab (#5848) Also: * Fix spacing in layout * Send zero values for free plans
bitwarden · Jul 19, 2023 · 85aafa3 · 85aafa3
1 parent bfd267c
commit 85aafa3
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 41 deletions.
diff --git a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.html
@@ -62,7 +62,7 @@ <h1 bitTypography="h1">
     </ng-container>
   </dl>
   <ng-container *ngIf="userOrg.canEditSubscription">
-    <div class="tw-mb-7 tw-flex-col">
+    <div class="tw-flex-col">
       <strong class="tw-block tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300">{{
         "details" | i18n
       }}</strong>
@@ -98,29 +98,33 @@ <h1 bitTypography="h1">
   </ng-container>
 
   <ng-container *ngIf="userOrg.canEditSubscription">
-    <button
-      bitButton
-      buttonType="secondary"
-      type="button"
-      (click)="changePlan()"
-      *ngIf="showChangePlanButton"
-    >
-      {{ "changeBillingPlan" | i18n }}
-    </button>
-    <app-change-plan
-      [organizationId]="organizationId"
-      (onChanged)="closeChangePlan()"
-      (onCanceled)="closeChangePlan()"
-      *ngIf="showChangePlan"
-    ></app-change-plan>
+    <div class="tw-mt-7">
+      <button
+        bitButton
+        buttonType="secondary"
+        type="button"
+        (click)="changePlan()"
+        *ngIf="showChangePlanButton"
+      >
+        {{ "changeBillingPlan" | i18n }}
+      </button>
+      <app-change-plan
+        [organizationId]="organizationId"
+        (onChanged)="closeChangePlan()"
+        (onCanceled)="closeChangePlan()"
+        *ngIf="showChangePlan"
+      ></app-change-plan>
+    </div>
   </ng-container>
 
   <ng-container *ngIf="showSecretsManagerSubscribe">
-    <sm-subscribe-standalone
-      [plan]="sub.secretsManagerPlan"
-      [organization]="userOrg"
-      (onSubscribe)="subscriptionAdjusted()"
-    ></sm-subscribe-standalone>
+    <div class="tw-mt-7">
+      <sm-subscribe-standalone
+        [plan]="sub.secretsManagerPlan"
+        [organization]="userOrg"
+        (onSubscribe)="subscriptionAdjusted()"
+      ></sm-subscribe-standalone>
+    </div>
   </ng-container>
 
   <ng-container *ngIf="userOrg.canEditSubscription">

diff --git a/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts b/apps/web/src/app/billing/organizations/organization-subscription-cloud.component.ts
@@ -114,8 +114,7 @@ export class OrganizationSubscriptionCloudComponent implements OnInit, OnDestroy
     this.showSecretsManagerSubscribe =
       this.userOrg.canEditSubscription &&
       !this.userOrg.useSecretsManager &&
-      this.subscription != null &&
-      !this.subscription.cancelled &&
+      !this.subscription?.cancelled &&
       !this.subscriptionMarkedForCancel;
 
     this.showAdjustSecretsManager =

diff --git a/apps/web/src/app/billing/organizations/secrets-manager/sm-subscribe-standalone.component.ts b/apps/web/src/app/billing/organizations/secrets-manager/sm-subscribe-standalone.component.ts
@@ -30,8 +30,12 @@ export class SecretsManagerSubscribeStandaloneComponent {
 
   submit = async () => {
     const request = new SecretsManagerSubscribeRequest();
-    request.additionalSmSeats = this.formGroup.value.userSeats;
-    request.additionalServiceAccounts = this.formGroup.value.additionalServiceAccounts;
+    request.additionalSmSeats = this.plan.hasAdditionalSeatsOption
+      ? this.formGroup.value.userSeats
+      : 0;
+    request.additionalServiceAccounts = this.plan.hasAdditionalServiceAccountOption
+      ? this.formGroup.value.additionalServiceAccounts
+      : 0;
 
     await this.organizationApiService.subscribeToSecretsManager(this.organization.id, request);
 

diff --git a/apps/web/src/app/billing/organizations/secrets-manager/sm-subscribe.component.html b/apps/web/src/app/billing/organizations/secrets-manager/sm-subscribe.component.html
@@ -44,25 +44,28 @@ <h4 bitTypography="h4">{{ "secretsManagerForPlan" | i18n : planName }}</h4>
       <bit-hint *ngIf="upgradeOrganization">{{ "addSecretsManagerUpgradeDesc" | i18n }}</bit-hint>
     </bit-form-control>
 
-    <div *ngIf="formGroup.value.enabled && selectedPlan.hasAdditionalSeatsOption" class="tw-w-1/2">
-      <bit-form-field>
-        <bit-label>{{ "userSeats" | i18n }}</bit-label>
-        <input bitInput formControlName="userSeats" type="number" />
-        <bit-hint>{{ "userSeatsHowManyDesc" | i18n }}</bit-hint>
-      </bit-form-field>
-
-      <bit-form-field>
-        <bit-label>{{ "additionalServiceAccounts" | i18n }}</bit-label>
-        <input bitInput formControlName="additionalServiceAccounts" type="number" />
-        <bit-hint>{{
-          "additionalServiceAccountsDesc"
-            | i18n : serviceAccountsIncluded : (monthlyCostPerServiceAccount | currency : "$")
-        }}</bit-hint>
-      </bit-form-field>
+    <ng-container *ngIf="formGroup.value.enabled">
+      <div *ngIf="selectedPlan.hasAdditionalSeatsOption" class="tw-w-1/2">
+        <bit-form-field>
+          <bit-label>{{ "userSeats" | i18n }}</bit-label>
+          <input bitInput formControlName="userSeats" type="number" />
+          <bit-hint>{{ "userSeatsHowManyDesc" | i18n }}</bit-hint>
+        </bit-form-field>
+      </div>
+      <div *ngIf="selectedPlan.hasAdditionalServiceAccountOption" class="tw-w-1/2">
+        <bit-form-field>
+          <bit-label>{{ "additionalServiceAccounts" | i18n }}</bit-label>
+          <input bitInput formControlName="additionalServiceAccounts" type="number" />
+          <bit-hint>{{
+            "additionalServiceAccountsDesc"
+              | i18n : serviceAccountsIncluded : (monthlyCostPerServiceAccount | currency : "$")
+          }}</bit-hint>
+        </bit-form-field>
+      </div>
 
       <button *ngIf="showSubmitButton" type="submit" bitButton buttonType="primary" bitFormButton>
         {{ "save" | i18n }}
       </button>
-    </div>
+    </ng-container>
   </div>
 </div>