feat: add support for full row spanning in form fields and conditionally display notification checkbox based on billing status

Accounts/src/Pages/Register.tsx

@@ -32,6 +32,7 @@ import Reseller from "Common/Models/DatabaseModels/Reseller";
 import User from "Common/Models/DatabaseModels/User";
 import React, { useState } from "react";
 import useAsyncEffect from "use-async-effect";
+import { IsBillingEnabled } from "Common/Server/EnvironmentConfig";
 
 const RegisterPage: () => JSX.Element = () => {
   const apiUrl: URL = SIGNUP_API_URL;
@@ -198,19 +199,7 @@ const RegisterPage: () => JSX.Element = () => {
         title: "Phone Number",
         dataTestId: "selfHostedPhoneNumber",
         showEvenIfPermissionDoesNotExist: true,
-      },
-      {
-        overrideField: {
-          notifySelfHosted: true,
-        },
-        overrideFieldKey: "notifySelfHosted",
-        fieldType: FormFieldSchemaType.Checkbox,
-        required: false,
-        defaultValue: true,
-        title: "Notify me about security patches and new releases",
-        dataTestId: "notifySelfHosted",
-        showEvenIfPermissionDoesNotExist: true,
-      },
+      }
     ]);
   }
 
@@ -248,6 +237,25 @@ const RegisterPage: () => JSX.Element = () => {
     },
   ]);
 
+  if(!IsBillingEnabled){
+    formFields = formFields.concat([
+      {
+        overrideField: {
+          notifySelfHosted: true,
+        },
+        overrideFieldKey: "notifySelfHosted",
+
+        fieldType: FormFieldSchemaType.Checkbox,
+        required: false,
+        defaultValue: true,
+        title: "Notify me about security patches and new releases",
+        dataTestId: "notifySelfHosted",
+        showEvenIfPermissionDoesNotExist: true,
+        spanFullRow: true,
+      },
+    ]);
+  }
+
   if (isCaptchaEnabled) {
     formFields = formFields.concat([
       {

Common/UI/Components/Forms/BasicForm.tsx

@@ -646,7 +646,7 @@ const BasicForm: ForwardRefExoticComponent<any> = forwardRef(
                         })
                         .map((field: Field<T>, i: number) => {
                           return (
-                            <div key={getFieldName(field)}>
+                            <div key={getFieldName(field)} className={field.spanFullRow ? `md:col-span-${props.showAsColumns || 1}` : undefined}>
                               {
                                 <FormField<T>
                                   field={field}

Common/UI/Components/Forms/Types/Field.ts

@@ -124,4 +124,7 @@ export default interface Field<TEntity> {
   disableSpellCheck?: boolean | undefined;
 
   getSummaryElement?: (item: FormValues<TEntity>) => ReactElement | undefined;
+
+  // If true, this field will span the full row in multi-column layouts.
+  spanFullRow?: boolean | undefined;
 }