fix(billing): Let backend handle dynamic validation (#103977)

Follow up to getsentry/getsentry#18924

Rather than duplicating validation for dynamically required fields on
both the frontend and backend, we will only handle validation for fields
required for all cases on both, and then handle validation for fields
conditionally required on the backend (displaying those errors on the
frontend on failed submission).

<img width="795" height="746" alt="Screenshot 2025-11-25 at 12 06 13 PM"
src="https://github.com/user-attachments/assets/bfac32fb-f78c-4b43-a0b4-7fb403c7734e"
/>

Author: isabellaenriquez

static/gsApp/components/billingDetails/form.tsx

@@ -190,15 +190,10 @@ function BillingDetailsForm({
     form.setValue('countryCode', data.value.address.country);
     form.setValue('postalCode', data.value.address.postal_code);
     updateCountryCodeState(data.value.address.country ?? '');
-
-    // XXX(isabella): temp fix specific to UAE, remove this when we have a proper fix
-    if (data.value.address.country === 'AE') {
-      form.setValue('city', data.value.address.state);
-    }
   };
 
   useEffect(() => {
-    const requiredFields = ['addressLine1', 'city', 'countryCode'];
+    const requiredFields = ['addressLine1', 'countryCode'];
     requiredFields.forEach(field => {
       form.setFieldDescriptor(field, {
         required: true,
@@ -212,18 +207,6 @@ function BillingDetailsForm({
     };
   }, [form]);
 
-  useEffect(() => {
-    if (countryHasRegionChoices(state.countryCode)) {
-      form.setFieldDescriptor('region', {required: true});
-    } else {
-      form.setFieldDescriptor('region', {required: false});
-    }
-
-    return () => {
-      form.removeField('region');
-    };
-  }, [state.countryCode, form]);
-
   if (!organization.access.includes('org:billing')) {
     return null;
   }
@@ -276,7 +259,7 @@ function BillingDetailsForm({
       submitLabel={submitLabel}
       onPreSubmit={onPreSubmit}
       onSubmitSuccess={handleSubmit}
-      onSubmitError={onSubmitError}
+      onSubmitError={err => onSubmitError?.(err)}
       initialData={transformedInitialData}
       footerStyle={footerStyle}
       extraButton={extraButton}

static/gsApp/components/billingDetails/panel.tsx

@@ -1,6 +1,8 @@
 import {Fragment, useEffect, useState} from 'react';
 import * as Sentry from '@sentry/react';
 
+import {Alert} from '@sentry/scraps/alert';
+
 import {Button} from 'sentry/components/core/button';
 import {Flex} from 'sentry/components/core/layout';
 import {Heading, Text} from 'sentry/components/core/text';
@@ -58,6 +60,7 @@ function BillingDetailsPanel({
 }) {
   const [isEditing, setIsEditing] = useState(false);
   const [expandInitially, setExpandInitially] = useState(shouldExpandInitially);
+  const [formError, setFormError] = useState<string | null>(null);
   const {
     data: billingDetails,
     isLoading,
@@ -179,6 +182,7 @@ function BillingDetailsPanel({
         <Heading as="h2" size="lg">
           {t('Business address')}
         </Heading>
+        {formError && <Alert type="error">{formError}</Alert>}
         {!isEditing && !!subscription.accountBalance && (
           <Text>
             {tct('Account balance: [balance]', {
@@ -193,12 +197,22 @@ function BillingDetailsPanel({
             onSubmitSuccess={() => {
               fetchBillingDetails();
               setIsEditing(false);
+              setFormError(null);
+            }}
+            onSubmitError={error => {
+              setFormError(
+                Object.values(error.responseJSON || {}).join(' ') ||
+                  t('An unknown error occurred.')
+              );
             }}
             extraButton={
               <Button
                 priority="default"
                 size="sm"
-                onClick={() => setIsEditing(false)}
+                onClick={() => {
+                  setIsEditing(false);
+                  setFormError(null);
+                }}
                 aria-label={t('Cancel editing business address')}
               >
                 {t('Cancel')}
@@ -219,7 +233,7 @@ function BillingDetailsPanel({
               billingDetails.region ||
               billingDetails.postalCode) && (
               <Text>
-                {`${billingDetails.city}${billingDetails.region ? `, ${billingDetails.region}` : ''}${billingDetails.postalCode ? ` ${billingDetails.postalCode}` : ''}`}
+                {`${billingDetails.city || ''}${billingDetails.region ? `${billingDetails.city ? ', ' : ''}${billingDetails.region}` : ''}${billingDetails.postalCode ? ` ${billingDetails.postalCode}` : ''}`}
               </Text>
             )}
             {billingDetails.countryCode && (