diff --git a/static/gsApp/components/billingDetails/form.tsx b/static/gsApp/components/billingDetails/form.tsx index 09d5ebcd3acb79..6bb2f32f95d489 100644 --- a/static/gsApp/components/billingDetails/form.tsx +++ b/static/gsApp/components/billingDetails/form.tsx @@ -194,13 +194,7 @@ function BillingDetailsForm({ }; useEffect(() => { - const requiredFields = [ - 'addressLine1', - 'city', - 'region', - 'countryCode', - 'postalCode', - ]; + const requiredFields = ['addressLine1', 'city', 'countryCode']; requiredFields.forEach(field => { form.setFieldDescriptor(field, { required: true, @@ -214,6 +208,18 @@ 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; }