Added more information for the Agent User

src/components/DemographicInformationInput.tsx

@@ -12,16 +12,20 @@ import {KeyedMutator} from "swr";
 import CountrySelect from "./Low/CountrySelect";
 
 interface Props {
+	user: User;
 	mutateUser: KeyedMutator<User>;
 }
 
-export default function DemographicInformationInput({mutateUser}: Props) {
+export default function DemographicInformationInput({user, mutateUser}: Props) {
 	const [country, setCountry] = useState<string>();
 	const [phone, setPhone] = useState<string>();
 	const [gender, setGender] = useState<Gender>();
 	const [employment, setEmployment] = useState<EmploymentStatus>();
 	const [isLoading, setIsLoading] = useState(false);
 
+	const [companyName, setCompanyName] = useState<string>();
+	const [commercialRegistration, setCommercialRegistration] = useState<string>();
+
 	const save = (e?: FormEvent) => {
 		if (e) e.preventDefault();
 		setIsLoading(true);
@@ -34,6 +38,7 @@ export default function DemographicInformationInput({mutateUser}: Props) {
 					gender,
 					employment,
 				},
+				agentInformation: user.type === "agent" ? {companyName, commercialRegistration} : undefined,
 			})
 			.then((response) => mutateUser((response.data as {user: User}).user))
 			.catch(() => {
@@ -53,6 +58,18 @@ export default function DemographicInformationInput({mutateUser}: Props) {
 				about yourself.
 			</h2>
 			<form className="flex flex-col items-center justify-items-center gap-6 w-full h-full -md:px-4 lg:w-1/2 mb-32" onSubmit={save}>
+				{user.type === "agent" && (
+					<div className="w-full flex gap-8">
+						<Input type="text" onChange={setCompanyName} name="companyName" label="Company Name" required />
+						<Input
+							type="text"
+							onChange={setCommercialRegistration}
+							name="commercialRegistration"
+							label="Commercial Registration"
+							required
+						/>
+					</div>
+				)}
 				<div className="relative flex flex-col gap-3 w-full">
 					<label className="font-normal text-base text-mti-gray-dim">Country *</label>
 					<CountrySelect value={country} onChange={setCountry} />
@@ -125,7 +142,14 @@ export default function DemographicInformationInput({mutateUser}: Props) {
 					className="lg:mt-8 max-w-[400px] w-full self-end"
 					color="purple"
 					onClick={save}
-					disabled={isLoading || !country || !phone || !gender || !employment}>
+					disabled={
+						isLoading ||
+						!country ||
+						!phone ||
+						!gender ||
+						!employment ||
+						(user.type === "agent" ? !companyName || !commercialRegistration : false)
+					}>
 					{!isLoading && "Save information"}
 					{isLoading && (
 						<div className="flex items-center justify-center">