Updated the profile of the Corporate user according to the client's instructions

src/components/DemographicInformationInput.tsx

@@ -10,6 +10,8 @@ import axios from "axios";
 import {toast} from "react-toastify";
 import {KeyedMutator} from "swr";
 import CountrySelect from "./Low/CountrySelect";
+import GenderInput from "@/components/High/GenderInput";
+import EmploymentStatusInput from "@/components/High/EmploymentStatusInput";
 
 interface Props {
 	user: User;
@@ -92,73 +94,11 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
 						required
 					/>
 				)}
-				<div className="relative flex flex-col gap-3 w-full">
-					<label className="font-normal text-base text-mti-gray-dim">Gender *</label>
-					<RadioGroup value={gender} onChange={setGender} className="flex flex-row justify-between">
-						<RadioGroup.Option value="male">
-							{({checked}) => (
-								<span
-									className={clsx(
-										"px-6 py-4 w-28 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",
-									)}>
-									Male
-								</span>
-							)}
-						</RadioGroup.Option>
-						<RadioGroup.Option value="female">
-							{({checked}) => (
-								<span
-									className={clsx(
-										"px-6 py-4 w-28 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",
-									)}>
-									Female
-								</span>
-							)}
-						</RadioGroup.Option>
-						<RadioGroup.Option value="other">
-							{({checked}) => (
-								<span
-									className={clsx(
-										"px-6 py-4 w-28 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",
-									)}>
-									Other
-								</span>
-							)}
-						</RadioGroup.Option>
-					</RadioGroup>
-				</div>
+				<GenderInput value={gender} onChange={setGender} />
 				{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">
-							{EMPLOYMENT_STATUS.map(({status, label}) => (
-								<RadioGroup.Option value={status} key={status}>
-									{({checked}) => (
-										<span
-											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",
-											)}>
-											{label}
-										</span>
-									)}
-								</RadioGroup.Option>
-							))}
-						</RadioGroup>
-					</div>
-				)}
+				{user.type !== "corporate" && <EmploymentStatusInput value={employment} onChange={setEmployment} />}
 			</form>
 
 			<div className="self-end flex justify-end w-full gap-8 absolute bottom-8 left-0 px-8">

src/components/High/EmploymentStatusInput.tsx

@@ -0,0 +1,32 @@
+import {EmploymentStatus, EMPLOYMENT_STATUS} from "@/interfaces/user";
+import {RadioGroup} from "@headlessui/react";
+import clsx from "clsx";
+
+interface Props {
+	value?: EmploymentStatus;
+	onChange: (value?: EmploymentStatus) => void;
+}
+
+export default function EmploymentStatusInput({value, onChange}: Props) {
+	return (
+		<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={value} onChange={onChange} className="grid grid-cols-2 items-center gap-4 place-items-center">
+				{EMPLOYMENT_STATUS.map(({status, label}) => (
+					<RadioGroup.Option value={status} key={status}>
+						{({checked}) => (
+							<span
+								className={clsx(
+									"px-6 py-4 w-40 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",
+								)}>
+								{label}
+							</span>
+						)}
+					</RadioGroup.Option>
+				))}
+			</RadioGroup>
+		</div>
+	);
+}

src/components/High/GenderInput.tsx

@@ -0,0 +1,54 @@
+import {Gender} from "@/interfaces/user";
+import {RadioGroup} from "@headlessui/react";
+import clsx from "clsx";
+
+interface Props {
+	value?: Gender;
+	onChange: (value?: Gender) => void;
+}
+
+export default function GenderInput({value, onChange}: Props) {
+	return (
+		<div className="relative flex flex-col gap-3 w-full">
+			<label className="font-normal text-base text-mti-gray-dim">Gender *</label>
+			<RadioGroup value={value} onChange={onChange} className="flex flex-row gap-4 justify-between">
+				<RadioGroup.Option value="male">
+					{({checked}) => (
+						<span
+							className={clsx(
+								"px-6 py-4 w-28 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",
+							)}>
+							Male
+						</span>
+					)}
+				</RadioGroup.Option>
+				<RadioGroup.Option value="female">
+					{({checked}) => (
+						<span
+							className={clsx(
+								"px-6 py-4 w-28 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",
+							)}>
+							Female
+						</span>
+					)}
+				</RadioGroup.Option>
+				<RadioGroup.Option value="other">
+					{({checked}) => (
+						<span
+							className={clsx(
+								"px-6 py-4 w-28 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",
+							)}>
+							Other
+						</span>
+					)}
+				</RadioGroup.Option>
+			</RadioGroup>
+		</div>
+	);
+}

src/pages/profile.tsx

@@ -2,7 +2,7 @@
 import Head from "next/head";
 import {withIronSessionSsr} from "iron-session/next";
 import {sessionOptions} from "@/lib/session";
-import {ChangeEvent, useEffect, useRef, useState} from "react";
+import {ChangeEvent, ReactNode, useEffect, useRef, useState} from "react";
 import useUser from "@/hooks/useUser";
 import {toast, ToastContainer} from "react-toastify";
 import Layout from "@/components/High/Layout";
@@ -13,7 +13,7 @@ import axios from "axios";
 import {ErrorMessage} from "@/constants/errors";
 import {RadioGroup} from "@headlessui/react";
 import clsx from "clsx";
-import {EmploymentStatus, EMPLOYMENT_STATUS, Gender, User} from "@/interfaces/user";
+import {CorporateUser, EmploymentStatus, EMPLOYMENT_STATUS, Gender, User} from "@/interfaces/user";
 import CountrySelect from "@/components/Low/CountrySelect";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
 import moment from "moment";
@@ -21,6 +21,10 @@ import {BsCamera, BsCameraFill} from "react-icons/bs";
 import {USER_TYPE_LABELS} from "@/resources/user";
 import useGroups from "@/hooks/useGroups";
 import useUsers from "@/hooks/useUsers";
+import {convertBase64} from "@/utils";
+import {Divider} from "primereact/divider";
+import GenderInput from "@/components/High/GenderInput";
+import EmploymentStatusInput from "@/components/High/EmploymentStatusInput";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -74,7 +78,14 @@ function UserProfile({user, mutateUser}: Props) {
 	);
 	const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
 	const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
-	const [companyName, setCompanyName] = useState<string | undefined>(user.type === "agent" ? user.agentInformation?.companyName : undefined);
+	const [corporateInformation, setCorporateInformation] = useState(user.type === "corporate" ? user.corporateInformation : undefined);
+	const [companyName, setCompanyName] = useState<string | undefined>(
+		user.type === "agent"
+			? user.agentInformation?.companyName
+			: user.type === "corporate"
+			? user.corporateInformation?.companyInformation.name
+			: undefined,
+	);
 	const [commercialRegistration, setCommercialRegistration] = useState<string | undefined>(
 		user.type === "agent" ? user.agentInformation?.commercialRegistration : undefined,
 	);
@@ -92,19 +103,6 @@ function UserProfile({user, mutateUser}: Props) {
 		if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
 	};
 
-	const convertBase64 = (file: File) => {
-		return new Promise((resolve, reject) => {
-			const fileReader = new FileReader();
-			fileReader.readAsDataURL(file);
-			fileReader.onload = () => {
-				resolve(fileReader.result);
-			};
-			fileReader.onerror = (error) => {
-				reject(error);
-			};
-		});
-	};
-
 	const uploadProfilePicture = async (event: ChangeEvent<HTMLInputElement>) => {
 		if (event.target.files && event.target.files[0]) {
 			const picture = event.target.files[0];
@@ -155,6 +153,7 @@ function UserProfile({user, mutateUser}: Props) {
 				gender,
 				passport_id,
 			},
+			...(user.type === "corporate" ? {corporateInformation} : {}),
 		});
 		if (request.status === 200) {
 			toast.success("Your profile has been updated!");
@@ -167,6 +166,93 @@ function UserProfile({user, mutateUser}: Props) {
 		setIsLoading(false);
 	};
 
+	const DoubleColumnRow = ({children}: {children: ReactNode}) => <div className="flex flex-col md:flex-row gap-8 w-full">{children}</div>;
+
+	const PasswordInput = () => (
+		<DoubleColumnRow>
+			<Input
+				label="Current Password"
+				type="password"
+				name="password"
+				onChange={(e) => setPassword(e)}
+				placeholder="Enter your password"
+				required
+			/>
+			<Input
+				label="New Password"
+				type="password"
+				name="newPassword"
+				onChange={(e) => setNewPassword(e)}
+				placeholder="Enter your new password (optional)"
+			/>
+		</DoubleColumnRow>
+	);
+
+	const NameInput = () => (
+		<Input label="Name" type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" defaultValue={name} required />
+	);
+
+	const AgentInformationInput = () => (
+		<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
+			<Input
+				label="Corporate Name"
+				type="text"
+				name="companyName"
+				onChange={() => null}
+				placeholder="Enter corporate name"
+				defaultValue={companyName}
+				disabled
+			/>
+			<Input
+				label="Commercial Registration"
+				type="text"
+				name="commercialRegistration"
+				onChange={() => null}
+				placeholder="Enter commercial registration"
+				defaultValue={commercialRegistration}
+				disabled
+			/>
+		</div>
+	);
+
+	const CountryInput = () => (
+		<div className="flex flex-col gap-3 w-full">
+			<label className="font-normal text-base text-mti-gray-dim">Country *</label>
+			<CountrySelect value={country} onChange={setCountry} />
+		</div>
+	);
+
+	const PhoneInput = () => (
+		<Input
+			type="tel"
+			name="phone"
+			label="Phone number"
+			onChange={(e) => setPhone(e)}
+			placeholder="Enter phone number"
+			defaultValue={phone}
+			required
+		/>
+	);
+
+	const ExpirationDate = () => (
+		<div className="flex flex-col gap-3 w-full">
+			<label className="font-normal text-base text-mti-gray-dim">Expiry Date (click to purchase)</label>
+			<Link
+				href="/payment"
+				className={clsx(
+					"p-6 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+					"transition duration-300 ease-in-out",
+					!user.subscriptionExpirationDate
+						? "!bg-mti-green-ultralight !border-mti-green-light"
+						: expirationDateColor(user.subscriptionExpirationDate),
+					"bg-white border-mti-gray-platinum",
+				)}>
+				{!user.subscriptionExpirationDate && "Unlimited"}
+				{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
+			</Link>
+		</div>
+	);
+
 	return (
 		<Layout user={user}>
 			<section className="w-full flex flex-col gap-4 md:gap-8 px-4 py-8">
@@ -175,16 +261,26 @@ function UserProfile({user, mutateUser}: Props) {
 					<div className="flex flex-col gap-8 w-full md:w-2/3">
 						<h1 className="text-4xl font-bold mb-6 -md:hidden">Edit Profile</h1>
 						<form className="flex flex-col items-center gap-6 w-full">
-							<div className="flex flex-col md:flex-row gap-8 w-full">
-								<Input
-									label="Name"
-									type="text"
-									name="name"
-									onChange={(e) => setName(e)}
-									placeholder="Enter your name"
-									defaultValue={name}
-									required
-								/>
+							<DoubleColumnRow>
+								{user.type !== "corporate" ? (
+									<NameInput />
+								) : (
+									<Input
+										label="Company name"
+										type="text"
+										name="name"
+										onChange={(e) =>
+											setCorporateInformation((prev) => ({
+												...prev!,
+												companyInformation: {...prev!.companyInformation, name: e},
+											}))
+										}
+										placeholder="Enter your company's name"
+										defaultValue={corporateInformation?.companyInformation.name}
+										required
+									/>
+								)}
+
 								<Input
 									label="E-mail Address"
 									type="email"
@@ -194,7 +290,9 @@ function UserProfile({user, mutateUser}: Props) {
 									defaultValue={email}
 									required
 								/>
-							</div>
+							</DoubleColumnRow>
+							<PasswordInput />
+
 							{user.type === "student" && (
 								<Input
 									type="text"
@@ -206,166 +304,123 @@ function UserProfile({user, mutateUser}: Props) {
 									required
 								/>
 							)}
-							<div className="flex flex-col md:flex-row gap-8 w-full">
-								<Input
-									label="Current Password"
-									type="password"
-									name="password"
-									onChange={(e) => setPassword(e)}
-									placeholder="Enter your password"
-									required
-								/>
-								<Input
-									label="New Password"
-									type="password"
-									name="newPassword"
-									onChange={(e) => setNewPassword(e)}
-									placeholder="Enter your new password (optional)"
-								/>
-							</div>
+							{user.type === "agent" && <AgentInformationInput />}
 
-							{user.type === "agent" && (
-								<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
-									<Input
-										label="Corporate Name"
-										type="text"
-										name="companyName"
-										onChange={() => null}
-										placeholder="Enter corporate name"
-										defaultValue={companyName}
-										disabled
-									/>
-									<Input
-										label="Commercial Registration"
-										type="text"
-										name="commercialRegistration"
-										onChange={() => null}
-										placeholder="Enter commercial registration"
-										defaultValue={commercialRegistration}
-										disabled
-									/>
-								</div>
+							<DoubleColumnRow>
+								<CountryInput />
+								<PhoneInput />
+							</DoubleColumnRow>
+
+							<Divider />
+
+							{user.type === "corporate" && (
+								<>
+									<DoubleColumnRow>
+										<Input
+											type="number"
+											name="companyUsers"
+											onChange={() => null}
+											label="Number of users"
+											defaultValue={user.corporateInformation.companyInformation.userAmount}
+											disabled
+											required
+										/>
+										<Input
+											type="text"
+											name="pricing"
+											onChange={() => null}
+											label="Pricing"
+											defaultValue={`${user.corporateInformation.payment?.value} ${user.corporateInformation.payment?.currency}`}
+											disabled
+											required
+										/>
+									</DoubleColumnRow>
+									<ExpirationDate />
+								</>
 							)}
 
-							<div className="flex flex-col md:flex-row gap-8 w-full">
-								<div className="flex flex-col gap-3 w-full">
-									<label className="font-normal text-base text-mti-gray-dim">Country *</label>
-									<CountrySelect value={country} onChange={setCountry} />
-								</div>
-								<Input
-									type="tel"
-									name="phone"
-									label="Phone number"
-									onChange={(e) => setPhone(e)}
-									placeholder="Enter phone number"
-									defaultValue={phone}
-									required
-								/>
-							</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
-											value={employment}
-											onChange={setEmployment}
-											className="grid grid-cols-2 items-center gap-4 place-items-center">
-											{EMPLOYMENT_STATUS.map(({status, label}) => (
-												<RadioGroup.Option value={status} key={status}>
-													{({checked}) => (
-														<span
-															className={clsx(
-																"px-6 py-4 w-40 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",
-															)}>
-															{label}
-														</span>
-													)}
-												</RadioGroup.Option>
-											))}
-										</RadioGroup>
+							{user.type === "corporate" && (
+								<>
+									<Divider />
+									<DoubleColumnRow>
+										<NameInput />
+										<Input
+											name="position"
+											onChange={setPosition}
+											defaultValue={position}
+											type="text"
+											label="Position"
+											placeholder="CEO, Head of Marketing..."
+											required
+										/>
+									</DoubleColumnRow>
+								</>
+							)}
+
+							{user.type === "corporate" && user.corporateInformation.referralAgent && (
+								<>
+									<Divider />
+									<DoubleColumnRow>
+										<Input
+											name="agentName"
+											onChange={() => null}
+											defaultValue={users.find((x) => x.id === user.corporateInformation.referralAgent)?.name}
+											type="text"
+											label="Country Manager's Name"
+											placeholder="Not available"
+											required
+											disabled
+										/>
+										<Input
+											name="agentEmail"
+											onChange={() => null}
+											defaultValue={users.find((x) => x.id === user.corporateInformation.referralAgent)?.email}
+											type="text"
+											label="Country Manager's E-mail"
+											placeholder="Not available"
+											required
+											disabled
+										/>
+									</DoubleColumnRow>
+									<DoubleColumnRow>
+										<div className="flex flex-col gap-2 w-full">
+											<label className="font-normal text-base text-mti-gray-dim">Country Manager&apos;s Country *</label>
+											<CountrySelect
+												value={
+													users.find((x) => x.id === user.corporateInformation.referralAgent)?.demographicInformation
+														?.country
+												}
+												onChange={() => null}
+												disabled
+											/>
+										</div>
+
+										<Input
+											type="tel"
+											name="agentPhone"
+											label="Country Manager's Phone"
+											onChange={() => null}
+											placeholder="Not available"
+											defaultValue={
+												users.find((x) => x.id === user.corporateInformation.referralAgent)?.demographicInformation?.phone
+											}
+											disabled
+											required
+										/>
+									</DoubleColumnRow>
+								</>
+							)}
+
+							{user.type !== "corporate" && (
+								<DoubleColumnRow>
+									<EmploymentStatusInput value={employment} onChange={setEmployment} />
+
+									<div className="flex flex-col gap-8 w-full">
+										<GenderInput value={gender} onChange={setGender} />
+										<ExpirationDate />
 									</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>
-										<RadioGroup value={gender} onChange={setGender} className="flex flex-row gap-4 justify-between">
-											<RadioGroup.Option value="male">
-												{({checked}) => (
-													<span
-														className={clsx(
-															"px-6 py-4 w-28 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",
-														)}>
-														Male
-													</span>
-												)}
-											</RadioGroup.Option>
-											<RadioGroup.Option value="female">
-												{({checked}) => (
-													<span
-														className={clsx(
-															"px-6 py-4 w-28 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",
-														)}>
-														Female
-													</span>
-												)}
-											</RadioGroup.Option>
-											<RadioGroup.Option value="other">
-												{({checked}) => (
-													<span
-														className={clsx(
-															"px-6 py-4 w-28 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",
-														)}>
-														Other
-													</span>
-												)}
-											</RadioGroup.Option>
-										</RadioGroup>
-									</div>
-									<div className="flex flex-col gap-3">
-										<label className="font-normal text-base text-mti-gray-dim">Expiry Date (click to purchase)</label>
-										<Link
-											href="/payment"
-											className={clsx(
-												"p-6 w-full flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
-												"transition duration-300 ease-in-out",
-												!user.subscriptionExpirationDate
-													? "!bg-mti-green-ultralight !border-mti-green-light"
-													: expirationDateColor(user.subscriptionExpirationDate),
-												"bg-white border-mti-gray-platinum",
-											)}>
-											{!user.subscriptionExpirationDate && "Unlimited"}
-											{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
-										</Link>
-									</div>
-								</div>
-							</div>
+								</DoubleColumnRow>
+							)}
 						</form>
 					</div>
 					<div className="flex flex-col gap-6 w-48">

src/utils/index.ts

@@ -12,3 +12,16 @@ export function dateSorter(a: any, b: any, direction: "asc" | "desc", key: strin
 export function env(key: string) {
 	return (window as any).__ENV[key];
 }
+
+export const convertBase64 = (file: File) => {
+	return new Promise((resolve, reject) => {
+		const fileReader = new FileReader();
+		fileReader.readAsDataURL(file);
+		fileReader.onload = () => {
+			resolve(fileReader.result);
+		};
+		fileReader.onerror = (error) => {
+			reject(error);
+		};
+	});
+};