redesgigned page
This commit is contained in:
@@ -248,7 +248,6 @@ export const MainForm = () => {
|
|||||||
|
|
||||||
{/* Name row */}
|
{/* Name row */}
|
||||||
<div className="grid grid-cols-2 gap-3">
|
<div className="grid grid-cols-2 gap-3">
|
||||||
<FormLabel>{t("first-name")}</FormLabel>
|
|
||||||
<Field
|
<Field
|
||||||
name="firstName"
|
name="firstName"
|
||||||
validators={makeFieldValidator("firstName")}
|
validators={makeFieldValidator("firstName")}
|
||||||
@@ -256,7 +255,8 @@ export const MainForm = () => {
|
|||||||
{(field) => {
|
{(field) => {
|
||||||
const errors = getErrors(field);
|
const errors = getErrors(field);
|
||||||
return (
|
return (
|
||||||
<>
|
<FormControl required>
|
||||||
|
<FormLabel>{t("first-name")}</FormLabel>
|
||||||
<Input
|
<Input
|
||||||
value={field.state.value ?? ""}
|
value={field.state.value ?? ""}
|
||||||
onBlur={field.handleBlur}
|
onBlur={field.handleBlur}
|
||||||
@@ -269,12 +269,11 @@ export const MainForm = () => {
|
|||||||
{errors[0]}
|
{errors[0]}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</>
|
</FormControl>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
<FormLabel>{t("last-name")}</FormLabel>
|
|
||||||
<Field
|
<Field
|
||||||
name="lastName"
|
name="lastName"
|
||||||
validators={makeFieldValidator("lastName")}
|
validators={makeFieldValidator("lastName")}
|
||||||
@@ -282,7 +281,8 @@ export const MainForm = () => {
|
|||||||
{(field) => {
|
{(field) => {
|
||||||
const errors = getErrors(field);
|
const errors = getErrors(field);
|
||||||
return (
|
return (
|
||||||
<>
|
<FormControl required>
|
||||||
|
<FormLabel>{t("last-name")}</FormLabel>
|
||||||
<Input
|
<Input
|
||||||
value={field.state.value ?? ""}
|
value={field.state.value ?? ""}
|
||||||
onBlur={field.handleBlur}
|
onBlur={field.handleBlur}
|
||||||
@@ -295,18 +295,18 @@ export const MainForm = () => {
|
|||||||
{errors[0]}
|
{errors[0]}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</>
|
</FormControl>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
</Field>
|
</Field>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FormLabel>{t("email")}</FormLabel>
|
|
||||||
<Field name="email" validators={makeFieldValidator("email")}>
|
<Field name="email" validators={makeFieldValidator("email")}>
|
||||||
{(field) => {
|
{(field) => {
|
||||||
const errors = getErrors(field);
|
const errors = getErrors(field);
|
||||||
return (
|
return (
|
||||||
<>
|
<FormControl required>
|
||||||
|
<FormLabel>{t("email")}</FormLabel>
|
||||||
<Input
|
<Input
|
||||||
value={field.state.value ?? ""}
|
value={field.state.value ?? ""}
|
||||||
onBlur={field.handleBlur}
|
onBlur={field.handleBlur}
|
||||||
@@ -318,12 +318,11 @@ export const MainForm = () => {
|
|||||||
{errors.length > 0 && (
|
{errors.length > 0 && (
|
||||||
<span className="text-red-500 text-sm">{errors[0]}</span>
|
<span className="text-red-500 text-sm">{errors[0]}</span>
|
||||||
)}
|
)}
|
||||||
</>
|
</FormControl>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
<FormLabel>{t("phone-number")}</FormLabel>
|
|
||||||
<Field
|
<Field
|
||||||
name="phoneNumber"
|
name="phoneNumber"
|
||||||
validators={makeFieldValidator("phoneNumber")}
|
validators={makeFieldValidator("phoneNumber")}
|
||||||
@@ -331,7 +330,8 @@ export const MainForm = () => {
|
|||||||
{(field) => {
|
{(field) => {
|
||||||
const errors = getErrors(field);
|
const errors = getErrors(field);
|
||||||
return (
|
return (
|
||||||
<>
|
<FormControl required>
|
||||||
|
<FormLabel>{t("phone-number")}</FormLabel>
|
||||||
<Input
|
<Input
|
||||||
value={field.state.value ?? ""}
|
value={field.state.value ?? ""}
|
||||||
onBlur={field.handleBlur}
|
onBlur={field.handleBlur}
|
||||||
@@ -343,7 +343,7 @@ export const MainForm = () => {
|
|||||||
{errors.length > 0 && (
|
{errors.length > 0 && (
|
||||||
<span className="text-red-500 text-sm">{errors[0]}</span>
|
<span className="text-red-500 text-sm">{errors[0]}</span>
|
||||||
)}
|
)}
|
||||||
</>
|
</FormControl>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
</Field>
|
</Field>
|
||||||
@@ -410,7 +410,6 @@ export const MainForm = () => {
|
|||||||
{t("invoice-details")}
|
{t("invoice-details")}
|
||||||
</Typography>
|
</Typography>
|
||||||
|
|
||||||
<FormLabel>{t("company-name")}</FormLabel>
|
|
||||||
<Field
|
<Field
|
||||||
name="companyName"
|
name="companyName"
|
||||||
validators={makeFieldValidator("companyName")}
|
validators={makeFieldValidator("companyName")}
|
||||||
@@ -418,7 +417,8 @@ export const MainForm = () => {
|
|||||||
{(field) => {
|
{(field) => {
|
||||||
const errors = getErrors(field);
|
const errors = getErrors(field);
|
||||||
return (
|
return (
|
||||||
<>
|
<FormControl required>
|
||||||
|
<FormLabel>{t("company-name")}</FormLabel>
|
||||||
<Input
|
<Input
|
||||||
value={field.state.value ?? ""}
|
value={field.state.value ?? ""}
|
||||||
onBlur={field.handleBlur}
|
onBlur={field.handleBlur}
|
||||||
@@ -431,13 +431,12 @@ export const MainForm = () => {
|
|||||||
{errors[0]}
|
{errors[0]}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</>
|
</FormControl>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
<div className="grid grid-cols-2 gap-3">
|
<div className="grid grid-cols-2 gap-3">
|
||||||
<FormLabel>{t("first-name")}</FormLabel>
|
|
||||||
<Field
|
<Field
|
||||||
name="cmpFirstName"
|
name="cmpFirstName"
|
||||||
validators={makeFieldValidator("cmpFirstName")}
|
validators={makeFieldValidator("cmpFirstName")}
|
||||||
@@ -445,7 +444,8 @@ export const MainForm = () => {
|
|||||||
{(field) => {
|
{(field) => {
|
||||||
const errors = getErrors(field);
|
const errors = getErrors(field);
|
||||||
return (
|
return (
|
||||||
<>
|
<FormControl required>
|
||||||
|
<FormLabel>{t("first-name")}</FormLabel>
|
||||||
<Input
|
<Input
|
||||||
value={field.state.value ?? ""}
|
value={field.state.value ?? ""}
|
||||||
onBlur={field.handleBlur}
|
onBlur={field.handleBlur}
|
||||||
@@ -458,12 +458,11 @@ export const MainForm = () => {
|
|||||||
{errors[0]}
|
{errors[0]}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</>
|
</FormControl>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
<FormLabel>{t("last-name")}</FormLabel>
|
|
||||||
<Field
|
<Field
|
||||||
name="cpmLastName"
|
name="cpmLastName"
|
||||||
validators={makeFieldValidator("cpmLastName")}
|
validators={makeFieldValidator("cpmLastName")}
|
||||||
@@ -471,7 +470,8 @@ export const MainForm = () => {
|
|||||||
{(field) => {
|
{(field) => {
|
||||||
const errors = getErrors(field);
|
const errors = getErrors(field);
|
||||||
return (
|
return (
|
||||||
<>
|
<FormControl required>
|
||||||
|
<FormLabel>{t("last-name")}</FormLabel>
|
||||||
<Input
|
<Input
|
||||||
value={field.state.value ?? ""}
|
value={field.state.value ?? ""}
|
||||||
onBlur={field.handleBlur}
|
onBlur={field.handleBlur}
|
||||||
@@ -484,18 +484,18 @@ export const MainForm = () => {
|
|||||||
{errors[0]}
|
{errors[0]}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</>
|
</FormControl>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
</Field>
|
</Field>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<FormLabel>{t("street")}</FormLabel>
|
|
||||||
<Field name="street" validators={makeFieldValidator("street")}>
|
<Field name="street" validators={makeFieldValidator("street")}>
|
||||||
{(field) => {
|
{(field) => {
|
||||||
const errors = getErrors(field);
|
const errors = getErrors(field);
|
||||||
return (
|
return (
|
||||||
<>
|
<FormControl required>
|
||||||
|
<FormLabel>{t("street")}</FormLabel>
|
||||||
<Input
|
<Input
|
||||||
value={field.state.value ?? ""}
|
value={field.state.value ?? ""}
|
||||||
onBlur={field.handleBlur}
|
onBlur={field.handleBlur}
|
||||||
@@ -508,12 +508,11 @@ export const MainForm = () => {
|
|||||||
{errors[0]}
|
{errors[0]}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</>
|
</FormControl>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
<FormLabel>{t("postal-code")}</FormLabel>
|
|
||||||
<Field
|
<Field
|
||||||
name="postalCode"
|
name="postalCode"
|
||||||
validators={makeFieldValidator("postalCode")}
|
validators={makeFieldValidator("postalCode")}
|
||||||
@@ -521,7 +520,8 @@ export const MainForm = () => {
|
|||||||
{(field) => {
|
{(field) => {
|
||||||
const errors = getErrors(field);
|
const errors = getErrors(field);
|
||||||
return (
|
return (
|
||||||
<>
|
<FormControl required>
|
||||||
|
<FormLabel>{t("postal-code")}</FormLabel>
|
||||||
<Input
|
<Input
|
||||||
value={field.state.value ?? ""}
|
value={field.state.value ?? ""}
|
||||||
onBlur={field.handleBlur}
|
onBlur={field.handleBlur}
|
||||||
@@ -534,12 +534,11 @@ export const MainForm = () => {
|
|||||||
{errors[0]}
|
{errors[0]}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</>
|
</FormControl>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
<FormLabel>{t("phone-number")}</FormLabel>
|
|
||||||
<Field
|
<Field
|
||||||
name="cpmPhoneNumber"
|
name="cpmPhoneNumber"
|
||||||
validators={makeFieldValidator("cpmPhoneNumber")}
|
validators={makeFieldValidator("cpmPhoneNumber")}
|
||||||
@@ -547,7 +546,8 @@ export const MainForm = () => {
|
|||||||
{(field) => {
|
{(field) => {
|
||||||
const errors = getErrors(field);
|
const errors = getErrors(field);
|
||||||
return (
|
return (
|
||||||
<>
|
<FormControl required>
|
||||||
|
<FormLabel>{t("phone-number")}</FormLabel>
|
||||||
<Input
|
<Input
|
||||||
value={field.state.value ?? ""}
|
value={field.state.value ?? ""}
|
||||||
onBlur={field.handleBlur}
|
onBlur={field.handleBlur}
|
||||||
@@ -561,12 +561,11 @@ export const MainForm = () => {
|
|||||||
{errors[0]}
|
{errors[0]}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</>
|
</FormControl>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
</Field>
|
</Field>
|
||||||
|
|
||||||
<FormLabel>{t("email")}</FormLabel>
|
|
||||||
<Field
|
<Field
|
||||||
name="cpmEmail"
|
name="cpmEmail"
|
||||||
validators={makeFieldValidator("cpmEmail")}
|
validators={makeFieldValidator("cpmEmail")}
|
||||||
@@ -574,7 +573,8 @@ export const MainForm = () => {
|
|||||||
{(field) => {
|
{(field) => {
|
||||||
const errors = getErrors(field);
|
const errors = getErrors(field);
|
||||||
return (
|
return (
|
||||||
<>
|
<FormControl required>
|
||||||
|
<FormLabel>{t("email")}</FormLabel>
|
||||||
<Input
|
<Input
|
||||||
value={field.state.value ?? ""}
|
value={field.state.value ?? ""}
|
||||||
onBlur={field.handleBlur}
|
onBlur={field.handleBlur}
|
||||||
@@ -588,7 +588,7 @@ export const MainForm = () => {
|
|||||||
{errors[0]}
|
{errors[0]}
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
</>
|
</FormControl>
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
</Field>
|
</Field>
|
||||||
|
|||||||
Reference in New Issue
Block a user