Changed from employment to position for Corporate accounts

src/components/DemographicInformationInput.tsx

@@ -21,6 +21,7 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
 	const [phone, setPhone] = useState<string>();
 	const [gender, setGender] = useState<Gender>();
 	const [employment, setEmployment] = useState<EmploymentStatus>();
+	const [position, setPosition] = useState<string>();
 	const [isLoading, setIsLoading] = useState(false);
 
 	const [companyName, setCompanyName] = useState<string>();
@@ -36,7 +37,8 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
 					country,
 					phone: `+${countryCodes.findOne("countryCode" as any, country!).countryCallingCode}${phone}`,
 					gender,
-					employment,
+					employment: user.type === "corporate" ? undefined : employment,
+					position: user.type === "corporate" ? position : undefined,
 				},
 				agentInformation: user.type === "agent" ? {companyName, commercialRegistration} : undefined,
 			})
@@ -116,6 +118,10 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
 						</RadioGroup.Option>
 					</RadioGroup>
 				</div>
+				{user.type === "corporate" && (
+					<Input name="position" onChange={setPosition} type="text" label="Position" placeholder="CEO, Head of Marketing..." required />
+				)}
+				{user.type !== "corporate" && (
 					<div className="relative flex flex-col gap-3 w-full">
 						<label className="font-normal text-base text-mti-gray-dim">Employment Status *</label>
 						<RadioGroup value={employment} onChange={setEmployment} className="grid grid-cols-2 items-center gap-4 place-items-center">
@@ -126,7 +132,9 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
 											className={clsx(
 												"px-6 py-4 w-44 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
 												"transition duration-300 ease-in-out",
-											!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white",
+												!checked
+													? "bg-white border-mti-gray-platinum"
+													: "bg-mti-purple-light border-mti-purple-dark text-white",
 											)}>
 											{label}
 										</span>
@@ -135,6 +143,7 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
 							))}
 						</RadioGroup>
 					</div>
+				)}
 			</form>
 
 			<div className="self-end flex justify-end w-full gap-8 absolute bottom-8 left-0 px-8">
@@ -147,7 +156,7 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
 						!country ||
 						!phone ||
 						!gender ||
-						!employment ||
+						(user.type === "corporate" ? !position : !employment) ||
 						(user.type === "agent" ? !companyName || !commercialRegistration : false)
 					}>
 					{!isLoading && "Save information"}

src/components/UserCard.tsx

@@ -42,6 +42,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 	const [type, setType] = useState(user.type);
 	const [status, setStatus] = useState(user.status);
 	const [referralAgentLabel, setReferralAgentLabel] = useState<string>();
+	const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
 
 	const [referralAgent, setReferralAgent] = useState(user.type === "corporate" ? user.corporateInformation?.referralAgent : undefined);
 	const [companyName, setCompanyName] = useState(
@@ -292,6 +293,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 				</div>
 
 				<div className="flex flex-col md:flex-row gap-8 w-full">
+					{user.type !== "corporate" && (
 						<div className="relative flex flex-col gap-3 w-full">
 							<label className="font-normal text-base text-mti-gray-dim">Employment Status</label>
 							<RadioGroup
@@ -315,6 +317,19 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
 								))}
 							</RadioGroup>
 						</div>
+					)}
+					{user.type === "corporate" && (
+						<Input
+							name="position"
+							onChange={setPosition}
+							type="text"
+							label="Position"
+							defaultValue={position}
+							placeholder="CEO, Head of Marketing..."
+							disabled
+							required
+						/>
+					)}
 					<div className="flex flex-col gap-8 w-full">
 						<div className="relative flex flex-col gap-3 w-full">
 							<label className="font-normal text-base text-mti-gray-dim">Gender</label>

src/interfaces/user.ts

@@ -14,7 +14,6 @@ export interface BasicUser {
 	type: Type;
 	bio: string;
 	isVerified: boolean;
-	demographicInformation?: DemographicInformation;
 	subscriptionExpirationDate?: null | Date;
 	registrationDate?: Date;
 	status: "active" | "disabled" | "paymentDue";
@@ -22,28 +21,34 @@ export interface BasicUser {
 
 export interface StudentUser extends BasicUser {
 	type: "student";
+	demographicInformation?: DemographicInformation;
 }
 
 export interface TeacherUser extends BasicUser {
 	type: "teacher";
+	demographicInformation?: DemographicInformation;
 }
 
 export interface CorporateUser extends BasicUser {
 	type: "corporate";
 	corporateInformation: CorporateInformation;
+	demographicInformation?: DemographicCorporateInformation;
 }
 
 export interface AgentUser extends BasicUser {
 	type: "agent";
 	agentInformation: AgentInformation;
+	demographicInformation?: DemographicInformation;
 }
 
 export interface AdminUser extends BasicUser {
 	type: "admin";
+	demographicInformation?: DemographicInformation;
 }
 
 export interface DeveloperUser extends BasicUser {
 	type: "developer";
+	demographicInformation?: DemographicInformation;
 }
 
 export interface CorporateInformation {
@@ -73,6 +78,13 @@ export interface DemographicInformation {
 	employment: EmploymentStatus;
 }
 
+export interface DemographicCorporateInformation {
+	country: string;
+	phone: string;
+	gender: Gender;
+	position: string;
+}
+
 export type Gender = "male" | "female" | "other";
 export type EmploymentStatus = "employed" | "student" | "self-employed" | "unemployed" | "retired" | "other";
 export const EMPLOYMENT_STATUS: {status: EmploymentStatus; label: string}[] = [

src/pages/(admin)/Lists/UserList.tsx

@@ -242,14 +242,15 @@ export default function UserList({user, filter}: {user: User; filter?: (user: Us
 			cell: (info) => info.getValue() || "Not available",
 			enableSorting: true,
 		}),
-		columnHelper.accessor("demographicInformation.employment", {
+		columnHelper.accessor((x) => (x.type === "corporate" ? x.demographicInformation?.position : x.demographicInformation?.employment), {
+			id: "employment",
 			header: (
 				<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "employment"))}>
-					<span>Employment</span>
+					<span>Employment/Position</span>
 					<SorterArrow name="employment" />
 				</button>
 			) as any,
-			cell: (info) => capitalize(info.getValue()) || "Not available",
+			cell: (info) => (info.row.original.type === "corporate" ? info.getValue() : capitalize(info.getValue())) || "Not available",
 			enableSorting: true,
 		}),
 		columnHelper.accessor("demographicInformation.gender", {
@@ -419,13 +420,14 @@ export default function UserList({user, filter}: {user: User; filter?: (user: Us
 		}
 
 		if (sorter === "employment" || sorter === reverseString("employment")) {
-			if (!a.demographicInformation?.employment && b.demographicInformation?.employment) return sorter === "employment" ? -1 : 1;
+			const aSortingItem = a.type === "corporate" ? a.demographicInformation?.position : a.demographicInformation?.employment;
-			if (a.demographicInformation?.employment && !b.demographicInformation?.employment) return sorter === "employment" ? 1 : -1;
+			const bSortingItem = b.type === "corporate" ? b.demographicInformation?.position : b.demographicInformation?.employment;
-			if (!a.demographicInformation?.employment && !b.demographicInformation?.employment) return 0;
 
-			return sorter === "employment"
+			if (!aSortingItem && bSortingItem) return sorter === "employment" ? -1 : 1;
-				? a.demographicInformation!.employment.localeCompare(b.demographicInformation!.employment)
+			if (aSortingItem && !bSortingItem) return sorter === "employment" ? 1 : -1;
-				: b.demographicInformation!.employment.localeCompare(a.demographicInformation!.employment);
+			if (!aSortingItem && !bSortingItem) return 0;
+
+			return sorter === "employment" ? aSortingItem!.localeCompare(bSortingItem!) : bSortingItem!.localeCompare(aSortingItem!);
 		}
 
 		if (sorter === "gender" || sorter === reverseString("gender")) {

src/pages/profile.tsx

@@ -63,6 +63,7 @@ export default function Home() {
 	const [phone, setPhone] = useState<string>();
 	const [gender, setGender] = useState<Gender>();
 	const [employment, setEmployment] = useState<EmploymentStatus>();
+	const [position, setPosition] = useState<string>();
 
 	const profilePictureInput = useRef(null);
 
@@ -86,7 +87,8 @@ export default function Home() {
 			setCountry(user.demographicInformation?.country);
 			setPhone(user.demographicInformation?.phone);
 			setGender(user.demographicInformation?.gender);
-			setEmployment(user.demographicInformation?.employment);
+			setEmployment(user.type === "corporate" ? undefined : user.demographicInformation?.employment);
+			setPosition(user.type === "corporate" ? user.demographicInformation?.position : undefined);
 		}
 	}, [user]);
 
@@ -135,7 +137,8 @@ export default function Home() {
 			demographicInformation: {
 				phone,
 				country,
-				employment,
+				employment: user?.type === "corporate" ? undefined : employment,
+				position: user?.type === "corporate" ? position : undefined,
 				gender,
 			},
 		});
@@ -247,6 +250,18 @@ export default function Home() {
 										/>
 									</div>
 									<div className="flex flex-col md:flex-row gap-8 w-full">
+										{user.type === "corporate" && (
+											<Input
+												name="position"
+												onChange={setPosition}
+												defaultValue={position}
+												type="text"
+												label="Position"
+												placeholder="CEO, Head of Marketing..."
+												required
+											/>
+										)}
+										{user.type !== "corporate" && (
 											<div className="relative flex flex-col gap-3 w-full">
 												<label className="font-normal text-base text-mti-gray-dim">Employment Status *</label>
 												<RadioGroup
@@ -271,6 +286,7 @@ export default function Home() {
 													))}
 												</RadioGroup>
 											</div>
+										)}
 										<div className="flex flex-col gap-8 w-full">
 											<div className="relative flex flex-col gap-3 w-full">
 												<label className="font-normal text-base text-mti-gray-dim">Gender *</label>