490 lines
17 KiB
TypeScript
490 lines
17 KiB
TypeScript
import useStats from "@/hooks/useStats";
|
|
import {EMPLOYMENT_STATUS, User} from "@/interfaces/user";
|
|
import {groupBySession, averageScore} from "@/utils/stats";
|
|
import {RadioGroup} from "@headlessui/react";
|
|
import axios from "axios";
|
|
import clsx from "clsx";
|
|
import moment from "moment";
|
|
import {Divider} from "primereact/divider";
|
|
import {useEffect, useState} from "react";
|
|
import ReactDatePicker from "react-datepicker";
|
|
import {BsFileEarmarkText, BsPencil, BsStar} from "react-icons/bs";
|
|
import {toast} from "react-toastify";
|
|
import Button from "./Low/Button";
|
|
import Checkbox from "./Low/Checkbox";
|
|
import CountrySelect from "./Low/CountrySelect";
|
|
import Input from "./Low/Input";
|
|
import ProfileSummary from "./ProfileSummary";
|
|
import Select from "react-select";
|
|
import useUsers from "@/hooks/useUsers";
|
|
import {USER_TYPE_LABELS} from "@/resources/user";
|
|
import {CURRENCIES} from "@/resources/paypal";
|
|
|
|
const expirationDateColor = (date: Date) => {
|
|
const momentDate = moment(date);
|
|
const today = moment(new Date());
|
|
|
|
if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
|
|
if (today.add(3, "days").isAfter(momentDate)) return "!bg-mti-rose-ultralight border-mti-rose-light";
|
|
if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
|
|
};
|
|
|
|
interface Props {
|
|
user: User;
|
|
loggedInUser: User;
|
|
onClose: (reload?: boolean) => void;
|
|
onViewStudents?: () => void;
|
|
onViewTeachers?: () => void;
|
|
onViewCorporate?: () => void;
|
|
}
|
|
|
|
const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers, onViewCorporate}: Props) => {
|
|
const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
|
|
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(
|
|
user.type === "corporate"
|
|
? user.corporateInformation?.companyInformation.name
|
|
: user.type === "agent"
|
|
? user.agentInformation.companyName
|
|
: undefined,
|
|
);
|
|
const [commercialRegistration, setCommercialRegistration] = useState(
|
|
user.type === "agent" ? user.agentInformation.commercialRegistration : undefined,
|
|
);
|
|
const [userAmount, setUserAmount] = useState(user.type === "corporate" ? user.corporateInformation?.companyInformation.userAmount : undefined);
|
|
const [paymentValue, setPaymentValue] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.value : undefined);
|
|
const [paymentCurrency, setPaymentCurrency] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.currency : "EUR");
|
|
const [monthlyDuration, setMonthlyDuration] = useState(user.type === "corporate" ? user.corporateInformation?.monthlyDuration : undefined);
|
|
|
|
const {stats} = useStats(user.id);
|
|
const {users} = useUsers();
|
|
|
|
useEffect(() => {
|
|
if (users && users.length > 0) {
|
|
if (!referralAgent) {
|
|
setReferralAgentLabel("No manager");
|
|
return;
|
|
}
|
|
|
|
const agent = users.find((x) => x.id === referralAgent);
|
|
setReferralAgentLabel(`${agent?.name} - ${agent?.email}`);
|
|
}
|
|
}, [users, referralAgent]);
|
|
|
|
const updateUser = () => {
|
|
if (user.type === "corporate" && (!paymentValue || paymentValue < 0))
|
|
return toast.error("Please set a price for the user's package before updating!");
|
|
if (!confirm(`Are you sure you want to update ${user.name}'s account?`)) return;
|
|
|
|
axios
|
|
.post<{user?: User; ok?: boolean}>(`/api/users/update?id=${user.id}`, {
|
|
...user,
|
|
subscriptionExpirationDate: expiryDate,
|
|
type,
|
|
status,
|
|
agentInformation:
|
|
type === "agent"
|
|
? {
|
|
companyName,
|
|
commercialRegistration,
|
|
}
|
|
: undefined,
|
|
corporateInformation:
|
|
type === "corporate"
|
|
? {
|
|
referralAgent,
|
|
monthlyDuration,
|
|
companyInformation: {
|
|
companyName,
|
|
userAmount,
|
|
},
|
|
payment: {
|
|
value: paymentValue,
|
|
currency: paymentCurrency,
|
|
},
|
|
}
|
|
: undefined,
|
|
})
|
|
.then(() => {
|
|
toast.success("User updated successfully!");
|
|
onClose(true);
|
|
})
|
|
.catch(() => {
|
|
toast.error("Something went wrong!", {toastId: "update-error"});
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<ProfileSummary
|
|
user={user}
|
|
items={[
|
|
{
|
|
icon: <BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
|
|
value: Object.keys(groupBySession(stats)).length,
|
|
label: "Exams",
|
|
},
|
|
{
|
|
icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
|
|
value: stats.length,
|
|
label: "Exercises",
|
|
},
|
|
{
|
|
icon: <BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
|
|
value: `${stats.length > 0 ? averageScore(stats) : 0}%`,
|
|
label: "Average Score",
|
|
},
|
|
]}
|
|
/>
|
|
|
|
{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={setCompanyName}
|
|
placeholder="Enter corporate name"
|
|
defaultValue={companyName}
|
|
required
|
|
/>
|
|
<Input
|
|
label="Commercial Registration"
|
|
type="text"
|
|
name="commercialRegistration"
|
|
onChange={setCommercialRegistration}
|
|
placeholder="Enter commercial registration"
|
|
defaultValue={commercialRegistration}
|
|
required
|
|
/>
|
|
</div>
|
|
<Divider className="w-full !m-0" />
|
|
</>
|
|
)}
|
|
{user.type === "corporate" && (
|
|
<>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full">
|
|
<Input
|
|
label="Corporate Name"
|
|
type="text"
|
|
name="companyName"
|
|
onChange={setCompanyName}
|
|
placeholder="Enter corporate name"
|
|
defaultValue={companyName}
|
|
/>
|
|
<Input
|
|
label="Number of Users"
|
|
type="number"
|
|
name="userAmount"
|
|
onChange={(e) => setUserAmount(e ? parseInt(e) : undefined)}
|
|
placeholder="Enter number of users"
|
|
defaultValue={userAmount}
|
|
/>
|
|
<Input
|
|
label="Monthly Duration"
|
|
type="number"
|
|
name="monthlyDuration"
|
|
onChange={(e) => setMonthlyDuration(e ? parseInt(e) : undefined)}
|
|
placeholder="Enter monthly duration"
|
|
defaultValue={monthlyDuration}
|
|
/>
|
|
|
|
<div className="flex flex-col gap-3 w-full">
|
|
<label className="font-normal text-base text-mti-gray-dim">Country Manager</label>
|
|
{referralAgentLabel && (
|
|
<Select
|
|
className="px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool disabled:bg-mti-gray-platinum/40 disabled:text-mti-gray-dim disabled:cursor-not-allowed bg-white rounded-full border border-mti-gray-platinum focus:outline-none"
|
|
options={[
|
|
{value: "", label: "No referral"},
|
|
...users.filter((u) => u.type === "agent").map((x) => ({value: x.id, label: `${x.name} - ${x.email}`})),
|
|
]}
|
|
defaultValue={{
|
|
value: referralAgent,
|
|
label: referralAgentLabel,
|
|
}}
|
|
onChange={(value) => setReferralAgent(value?.value)}
|
|
styles={{
|
|
control: (styles) => ({
|
|
...styles,
|
|
paddingLeft: "4px",
|
|
border: "none",
|
|
outline: "none",
|
|
":focus": {
|
|
outline: "none",
|
|
},
|
|
}),
|
|
option: (styles, state) => ({
|
|
...styles,
|
|
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
|
|
color: state.isFocused ? "black" : styles.color,
|
|
}),
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3 w-full lg:col-span-2">
|
|
<label className="font-normal text-base text-mti-gray-dim">Pricing</label>
|
|
<div className="w-full grid grid-cols-5 gap-2">
|
|
<Input
|
|
name="paymentValue"
|
|
onChange={(e) => setPaymentValue(e ? parseInt(e) : undefined)}
|
|
type="number"
|
|
defaultValue={paymentValue || 0}
|
|
className="col-span-3"
|
|
/>
|
|
<select
|
|
defaultValue={paymentCurrency}
|
|
onChange={(e) => setPaymentCurrency(e.target.value)}
|
|
className="p-6 col-span-2 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
|
|
{CURRENCIES.map(({label, currency}) => (
|
|
<option value={currency} key={currency}>
|
|
{label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Divider className="w-full !m-0" />
|
|
</>
|
|
)}
|
|
<section className="flex flex-col gap-4 justify-between">
|
|
<div className="flex flex-col md:flex-row gap-8 w-full">
|
|
<Input
|
|
label="Name"
|
|
type="text"
|
|
name="name"
|
|
onChange={() => null}
|
|
placeholder="Enter your name"
|
|
defaultValue={user.name}
|
|
disabled
|
|
/>
|
|
<Input
|
|
label="E-mail Address"
|
|
type="email"
|
|
name="email"
|
|
onChange={() => null}
|
|
placeholder="Enter email address"
|
|
defaultValue={user.email}
|
|
disabled
|
|
/>
|
|
</div>
|
|
|
|
<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 disabled value={user.demographicInformation?.country} />
|
|
</div>
|
|
<Input
|
|
type="tel"
|
|
name="phone"
|
|
label="Phone number"
|
|
onChange={() => null}
|
|
placeholder="Enter phone number"
|
|
defaultValue={user.demographicInformation?.phone}
|
|
disabled
|
|
/>
|
|
</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
|
|
value={user.demographicInformation?.employment}
|
|
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>
|
|
)}
|
|
{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>
|
|
<RadioGroup value={user.demographicInformation?.gender} 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">
|
|
<div className="flex justify-between items-center">
|
|
<label className="font-normal text-base text-mti-gray-dim">Expiry Date</label>
|
|
<Checkbox
|
|
isChecked={!!expiryDate}
|
|
onChange={(checked) => setExpiryDate(checked ? user.subscriptionExpirationDate || new Date() : null)}>
|
|
Enabled
|
|
</Checkbox>
|
|
</div>
|
|
{!expiryDate && (
|
|
<div
|
|
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",
|
|
!expiryDate ? "!bg-mti-green-ultralight !border-mti-green-light" : expirationDateColor(expiryDate),
|
|
"bg-white border-mti-gray-platinum",
|
|
)}>
|
|
{!expiryDate && "Unlimited"}
|
|
{expiryDate && moment(expiryDate).format("DD/MM/YYYY")}
|
|
</div>
|
|
)}
|
|
{expiryDate && (
|
|
<ReactDatePicker
|
|
className={clsx(
|
|
"p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
|
|
"hover:border-mti-purple tooltip",
|
|
expirationDateColor(expiryDate),
|
|
"transition duration-300 ease-in-out",
|
|
)}
|
|
filterDate={(date) =>
|
|
moment(date).isAfter(new Date()) &&
|
|
(loggedInUser.subscriptionExpirationDate
|
|
? moment(date).isBefore(moment(loggedInUser.subscriptionExpirationDate))
|
|
: true)
|
|
}
|
|
dateFormat="dd/MM/yyyy"
|
|
selected={moment(expiryDate).toDate()}
|
|
onChange={(date) => setExpiryDate(date)}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{(loggedInUser.type === "developer" || loggedInUser.type === "admin") && (
|
|
<>
|
|
<Divider className="w-full !m-0" />
|
|
<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">Status</label>
|
|
<select
|
|
defaultValue={user.status}
|
|
onChange={(e) => setStatus(e.target.value as typeof user.status)}
|
|
className="p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
|
|
<option value="active">Active</option>
|
|
<option value="disabled">Disabled</option>
|
|
<option value="paymentDue">Payment Due</option>
|
|
</select>
|
|
</div>
|
|
<div className="flex flex-col gap-3 w-full">
|
|
<label className="font-normal text-base text-mti-gray-dim">Type</label>
|
|
<select
|
|
defaultValue={user.type}
|
|
onChange={(e) => setType(e.target.value as typeof user.type)}
|
|
className="p-6 w-full min-h-[70px] flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer bg-white">
|
|
{Object.keys(USER_TYPE_LABELS).map((type) => (
|
|
<option key={type} value={type}>
|
|
{USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS]}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</section>
|
|
|
|
<div className="flex gap-4 justify-between mt-4 w-full">
|
|
<div className="self-start flex gap-4 justify-start items-center w-full">
|
|
{onViewCorporate && (
|
|
<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewCorporate}>
|
|
View Corporate
|
|
</Button>
|
|
)}
|
|
{onViewStudents && (
|
|
<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewStudents}>
|
|
View Students
|
|
</Button>
|
|
)}
|
|
{onViewTeachers && (
|
|
<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewTeachers}>
|
|
View Teachers
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<div className="self-end flex gap-4 w-full justify-end">
|
|
<Button className="w-full max-w-[200px]" variant="outline" onClick={onClose}>
|
|
Close
|
|
</Button>
|
|
<Button onClick={updateUser} className="w-full max-w-[200px]">
|
|
Update
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default UserCard;
|