migrating accept families for enterprise setup component (#8895)

apps/web/src/app/admin-console/organizations/sponsorships/families-for-enterprise-setup.component.html

@@ -1,51 +1,37 @@
-<div class="container page-content">
-  <div class="page-header">
-    <h1>{{ "sponsoredFamiliesOffer" | i18n }}</h1>
-  </div>
-  <div *ngIf="loading" class="mt-5 d-flex justify-content-center">
+<div class="tw-container">
+  <h1 bitTypography="h1">{{ "sponsoredFamiliesOffer" | i18n }}</h1>
+  <div *ngIf="loading" class="tw-mt-5 tw-flex tw-justify-center">
     <i
-      class="bwi bwi-spinner bwi-spin bwi-2x text-muted"
+      class="bwi bwi-spinner bwi-spin bwi-2x tw-text-muted"
       title="{{ 'loading' | i18n }}"
       aria-hidden="true"
     ></i>
-    <span class="sr-only">{{ "loading" | i18n }}</span>
+    <span class="tw-sr-only">{{ "loading" | i18n }}</span>
   </div>
-  <div *ngIf="!loading && badToken" class="mt-5 d-flex justify-content-center">
+  <div *ngIf="!loading && badToken" class="tw-mt-5 tw-flex tw-justify-center">
     <span>{{ "badToken" | i18n }}</span>
   </div>
-  <form
-    #form
-    (ngSubmit)="submit()"
-    [appApiAction]="formPromise"
-    ngNativeValidate
-    *ngIf="!loading && !badToken"
-  >
-    <p>
-      <span>{{ "acceptBitwardenFamiliesHelp" | i18n }}</span>
-    </p>
-    <div class="form-group col-6">
-      <label for="availableSponsorshipOrg">{{ "sponsoredFamiliesSelectOffer" | i18n }}</label>
-      <select
-        id="availableSponsorshipOrg"
-        name="Available Sponsorship Organization"
-        [(ngModel)]="selectedFamilyOrganizationId"
-        class="form-control"
-        required
-      >
-        <option value="" disabled>-- {{ "select" | i18n }} --</option>
-        <option value="createNew">{{ "newFamiliesOrganization" | i18n }}</option>
-        <option *ngFor="let o of existingFamilyOrganizations$ | async" [ngValue]="o.id">
-          {{ o.name }}
-        </option>
-      </select>
-    </div>
-    <div *ngIf="showNewOrganization" class="col-12">
+  <form [bitSubmit]="submit" [formGroup]="formGroup" *ngIf="!loading && !badToken">
+    <p bitTypography="body1">{{ "acceptBitwardenFamiliesHelp" | i18n }}</p>
+    <bit-form-field class="tw-w-1/2">
+      <bit-label>{{ "sponsoredFamiliesSelectOffer" | i18n }}</bit-label>
+      <bit-select formControlName="selectedFamilyOrganizationId">
+        <bit-option value="" label="-- {{ 'select' | i18n }} --" disabled></bit-option>
+        <bit-option value="createNew" label="{{ 'newFamiliesOrganization' | i18n }}"></bit-option>
+        <bit-option
+          *ngFor="let o of existingFamilyOrganizations$ | async"
+          [label]="o.name"
+          [value]="o.id"
+        >
+        </bit-option>
+      </bit-select>
+    </bit-form-field>
+    <div *ngIf="showNewOrganization">
       <app-organization-plans></app-organization-plans>
     </div>
-    <div class="form-group col-6" *ngIf="!showNewOrganization">
-      <button class="btn btn-primary mt-2 btn-submit" [disabled]="form.loading" type="submit">
-        <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-        <span>{{ "acceptOffer" | i18n }}</span>
+    <div class="w-1/2" *ngIf="!showNewOrganization">
+      <button bitButton buttonType="primary" bitFormButton type="submit">
+        {{ "acceptOffer" | i18n }}
       </button>
     </div>
   </form>

apps/web/src/app/admin-console/organizations/sponsorships/families-for-enterprise-setup.component.ts

@@ -1,4 +1,5 @@
 import { Component, OnDestroy, OnInit, ViewChild } from "@angular/core";
+import { FormBuilder, Validators } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
 import { lastValueFrom, Observable, Subject } from "rxjs";
 import { first, map, takeUntil } from "rxjs/operators";
@@ -43,7 +44,6 @@ export class FamiliesForEnterpriseSetupComponent implements OnInit, OnDestroy {
 
   loading = true;
   badToken = false;
-  formPromise: Promise<any>;
 
   token: string;
   existingFamilyOrganizations: Organization[];
@@ -54,7 +54,9 @@ export class FamiliesForEnterpriseSetupComponent implements OnInit, OnDestroy {
   _selectedFamilyOrganizationId = "";
 
   private _destroy = new Subject<void>();
-
+  formGroup = this.formBuilder.group({
+    selectedFamilyOrganizationId: ["", Validators.required],
+  });
   constructor(
     private router: Router,
     private platformUtilsService: PlatformUtilsService,
@@ -65,6 +67,7 @@ export class FamiliesForEnterpriseSetupComponent implements OnInit, OnDestroy {
     private validationService: ValidationService,
     private organizationService: OrganizationService,
     private dialogService: DialogService,
+    private formBuilder: FormBuilder,
   ) {}
 
   async ngOnInit() {
@@ -101,6 +104,9 @@ export class FamiliesForEnterpriseSetupComponent implements OnInit, OnDestroy {
         this.selectedFamilyOrganizationId = "createNew";
       }
     });
+    this.formGroup.valueChanges.pipe(takeUntil(this._destroy)).subscribe((val) => {
+      this.selectedFamilyOrganizationId = val.selectedFamilyOrganizationId;
+    });
   }
 
   ngOnDestroy(): void {
@@ -108,11 +114,9 @@ export class FamiliesForEnterpriseSetupComponent implements OnInit, OnDestroy {
     this._destroy.complete();
   }
 
-  async submit() {
-    this.formPromise = this.doSubmit(this._selectedFamilyOrganizationId);
-    await this.formPromise;
-    this.formPromise = null;
-  }
+  submit = async () => {
+    await this.doSubmit(this._selectedFamilyOrganizationId);
+  };
 
   get selectedFamilyOrganizationId() {
     return this._selectedFamilyOrganizationId;