From 98d7507650ffadf2e575336d261ba5eda882e34c Mon Sep 17 00:00:00 2001
From: Cy Okeke <cokeke@bitwarden.com>
Date: Wed, 24 Sep 2025 19:28:23 +0100
Subject: [PATCH] Add the validate for the inputs

---
 .../premium/upgrade-dialog.component.html     |  4 +--
 .../premium/upgrade-dialog.component.ts       | 32 +++++++++++++++----
 apps/web/src/locales/en/messages.json         |  3 ++
 3 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/app/billing/individual/premium/upgrade-dialog.component.html b/apps/web/src/app/billing/individual/premium/upgrade-dialog.component.html
index 84f5f51530f..e591db24f32 100644
--- a/apps/web/src/app/billing/individual/premium/upgrade-dialog.component.html
+++ b/apps/web/src/app/billing/individual/premium/upgrade-dialog.component.html
@@ -6,9 +6,9 @@
       @if (data.type === "Families") {
         <bit-form-field>
           <bit-label>{{ "organizationName" | i18n }}</bit-label>
-          <input bitInput type="text" formControlName="organisationName" required />
+          <input bitInput type="text" formControlName="organisationName" />
         </bit-form-field>
-        <p bitTypography="helper" class="tw-text-muted -tw-mt-3">
+        <p bitTypography="helper" class="tw-text-muted -tw-mt-3 tw-mb-6">
           {{ "organizationNameDescription" | i18n }}
         </p>
       }
diff --git a/apps/web/src/app/billing/individual/premium/upgrade-dialog.component.ts b/apps/web/src/app/billing/individual/premium/upgrade-dialog.component.ts
index 4f3d364da96..fa69f8704d6 100644
--- a/apps/web/src/app/billing/individual/premium/upgrade-dialog.component.ts
+++ b/apps/web/src/app/billing/individual/premium/upgrade-dialog.component.ts
@@ -46,7 +46,7 @@ export class UpgradeDialogComponent implements AfterViewInit {
   protected taxInformation: TaxInformation;
 
   upgradeForm = this.formBuilder.group({
-    organisationName: ["", [Validators.required]],
+    organisationName: [""],
   });
 
   constructor(
@@ -65,6 +65,12 @@ export class UpgradeDialogComponent implements AfterViewInit {
     private accountService: AccountService,
     private subscriptionPricingService: SubscriptionPricingService,
   ) {
+    // Set organization name as required only for Families upgrade
+    if (this.data.type === "Families") {
+      this.upgradeForm.get("organisationName")?.setValidators([Validators.required]);
+      this.upgradeForm.get("organisationName")?.updateValueAndValidity();
+    }
+
     // Initialize cart summary for both Premium and Families plans
     void this.initializeCartSummary();
   }
@@ -78,6 +84,24 @@ export class UpgradeDialogComponent implements AfterViewInit {
   }
 
   submit = async () => {
+    // Validate organization name for Families upgrade
+    if (this.data.type === "Families") {
+      if (this.upgradeForm.invalid) {
+        this.upgradeForm.markAllAsTouched();
+        return;
+      }
+    }
+
+    // Validate payment method for both Premium and Families
+    if (this.paymentComponent() !== undefined && !this.paymentComponent().validate()) {
+      return;
+    }
+
+    // Validate billing address (country and postal code) for both Premium and Families
+    if (this.taxInfoComponent() !== undefined && !this.taxInfoComponent().validate()) {
+      return;
+    }
+
     if (this.data.type === "Premium") {
       await this.upgradeToPremium();
     } else {
@@ -86,11 +110,7 @@ export class UpgradeDialogComponent implements AfterViewInit {
   };
 
   private upgradeToPremium = async (): Promise<void> => {
-    if (this.taxInfoComponent() !== undefined && !this.taxInfoComponent().validate()) {
-      this.taxInfoComponent().markAllAsTouched();
-      return;
-    }
-
+    // Validation is now handled in the main submit method
     try {
       const { type, token } = await this.paymentComponent().tokenize();
 
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index 11d2d8e3dd8..a91ad8d27ad 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -11494,5 +11494,8 @@
   },
   "seamlessIntegration": {
     "message": "Seamless integration"
+  },
+  "organizationNameDescription": {
+    "message": "Your organization name will appear in invitations you send to members."
   }
 }