[SG 435 & SG-436] Reusable org Component bug fixes (#3098)

* Disable submit button of formGroup is invalid

* Fix F4E bug

* Remove duplicate validation

apps/web/src/app/settings/organization-plans.component.html

@@ -131,8 +131,6 @@
             type="number"
             name="additionalSeats"
             formControlName="additionalSeats"
-            min="1"
-            max="100000"
             placeholder="{{ 'userSeatsDesc' | i18n }}"
             required
           />
@@ -150,8 +148,6 @@
           type="number"
           name="additionalSeats"
           formControlName="additionalSeats"
-          min="0"
-          max="100000"
           placeholder="{{ 'userSeatsDesc' | i18n }}"
         />
         <small class="text-muted form-text">{{
@@ -169,8 +165,6 @@
           type="number"
           name="additionalStorageGb"
           formControlName="additionalStorage"
-          min="0"
-          max="99"
           step="1"
           placeholder="{{ 'additionalStorageGbDesc' | i18n }}"
         />
@@ -323,10 +317,9 @@
     <app-callout [type]="'error'">{{ "singleOrgBlockCreateMessage" | i18n }}</app-callout>
   </div>
   <div class="mt-4">
-    <button type="submit" class="btn btn-primary btn-submit" [disabled]="form.loading">
-      <i class="bwi bwi-spinner bwi-spin" title="{{ 'loading' | i18n }}" aria-hidden="true"></i>
-      <span>{{ "submit" | i18n }}</span>
-    </button>
+    <bit-submit-button [loading]="form.loading" [disabled]="!formGroup.valid">{{
+      "submit" | i18n
+    }}</bit-submit-button>
     <button type="button" class="btn btn-outline-secondary" (click)="cancel()" *ngIf="showCancel">
       {{ "cancel" | i18n }}
     </button>

apps/web/src/app/settings/organization-plans.component.ts

@@ -52,8 +52,8 @@ export class OrganizationPlansComponent implements OnInit {
   discount = 0;
 
   formGroup = this.formBuilder.group({
-    name: ["", [Validators.required]],
-    billingEmail: ["", [Validators.required, Validators.email]],
+    name: [""],
+    billingEmail: ["", [Validators.email]],
     businessOwned: [false],
     premiumAccessAddon: [false],
     additionalStorage: [0, [Validators.min(0), Validators.max(99)]],
@@ -96,11 +96,16 @@ export class OrganizationPlansComponent implements OnInit {
       this.changedOwnedBusiness();
     }
 
-    if (!this.createOrganization) {
+    if (!this.createOrganization || this.acceptingSponsorship) {
       this.formGroup.controls.product.setValue(ProductType.Families);
       this.changedProduct();
     }
 
+    if (this.createOrganization) {
+      this.formGroup.controls.name.addValidators(Validators.required);
+      this.formGroup.controls.billingEmail.addValidators(Validators.required);
+    }
+
     this.loading = false;
   }
 
@@ -255,6 +260,7 @@ export class OrganizationPlansComponent implements OnInit {
     }
     this.formGroup.controls.product.setValue(ProductType.Teams);
     this.formGroup.controls.plan.setValue(PlanType.TeamsAnnually);
+    this.changedProduct();
   }
 
   changedCountry() {