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") {
+
{{ "organizationNameDescription" | i18n }}
} 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