Add form validation

src/customers/components/CustomerCreatePage/CustomerCreatePage.tsx

@@ -9,6 +9,7 @@ import Form from "@saleor/components/Form";
 import Grid from "@saleor/components/Grid";
 import PageHeader from "@saleor/components/PageHeader";
 import SaveButtonBar from "@saleor/components/SaveButtonBar";
+import useAddressValidation from "@saleor/hooks/useAddressValidation";
 import { sectionNames } from "@saleor/intl";
 import createSingleAutocompleteSelectHandler from "@saleor/utils/handlers/singleAutocompleteSelectChangeHandler";
 import { UserError } from "../../../types";
@@ -67,12 +68,16 @@ const CustomerCreatePage: React.FC<CustomerCreatePageProps> = ({
     label: country.country,
     value: country.code
   }));
+  const {
+    errors: validationErrors,
+    submit: handleSubmit
+  } = useAddressValidation(onSubmit);
 
   return (
     <Form
       initial={initialForm}
-      onSubmit={onSubmit}
+      onSubmit={handleSubmit}
-      errors={errors}
+      errors={[...errors, ...validationErrors]}
       confirmLeave
     >
       {({ change, data, errors: formErrors, hasChanged, submit }) => {

src/hooks/useAddressValidation.ts

@@ -8,14 +8,14 @@ import { UserError } from "@saleor/types";
 import { AddressInput } from "@saleor/types/globalTypes";
 import { add, remove } from "@saleor/utils/lists";
 
-interface UseAddressValidation {
+interface UseAddressValidation<T> {
   errors: UserError[];
-  submit: (data: AddressTypeInput) => void;
+  submit: (data: T & AddressTypeInput) => void;
 }
 
-function useAddressValidation(
+function useAddressValidation<T>(
-  onSubmit: (address: AddressInput) => void
+  onSubmit: (address: T & AddressInput) => void
-): UseAddressValidation {
+): UseAddressValidation<T> {
   const intl = useIntl();
   const [validationErrors, setValidationErrors] = useState<UserError[]>([]);
 
@@ -26,7 +26,7 @@ function useAddressValidation(
 
   return {
     errors: validationErrors,
-    submit: (data: AddressTypeInput) => {
+    submit: (data: T & AddressTypeInput) => {
       try {
         setValidationErrors(
           remove(

src/misc.ts

@@ -339,9 +339,9 @@ export function capitalize(s: string) {
   return s.charAt(0).toLocaleUpperCase() + s.slice(1);
 }
 
-export function transformFormToAddress(
+export function transformFormToAddress<T>(
-  address: AddressTypeInput
+  address: T & AddressTypeInput
-): AddressInput {
+): T & AddressInput {
   return {
     ...address,
     country: findInEnum(address.country, CountryCode)