devops/encoach_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added the corporate user balance to the User Card

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-05-07 09:48:49 +01:00
parent b59589b855
commit 6f211d8435
1 changed files with 612 additions and 750 deletions
Download Patch File Download Diff File Expand all files Collapse all files

308
src/components/UserCard.tsx
View File

@@ -1,5 +1,5 @@
import useStats from "@/hooks/useStats";
import { EMPLOYMENT_STATUS, User } from "@/interfaces/user";
import {CorporateInformation, CorporateUser, EMPLOYMENT_STATUS, User} from "@/interfaces/user";
import {groupBySession, averageScore} from "@/utils/stats";
import {RadioGroup} from "@headlessui/react";
import axios from "axios";
@@ -8,7 +8,7 @@ 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 {BsFileEarmarkText, BsPencil, BsPerson, BsPersonAdd, BsStar} from "react-icons/bs";
import {toast} from "react-toastify";
import Button from "./Low/Button";
import Checkbox from "./Low/Checkbox";
@@ -19,17 +19,15 @@ import Select from "react-select";
import useUsers from "@/hooks/useUsers";
import {USER_TYPE_LABELS} from "@/resources/user";
import {CURRENCIES} from "@/resources/paypal";
import useCodes from "@/hooks/useCodes";
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";
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 {
@@ -70,38 +68,15 @@ const CURRENCIES_OPTIONS = CURRENCIES.map(({ label, currency }) => ({
label,
}));
const UserCard = ({
user,
loggedInUser,
onClose,
onViewStudents,
onViewTeachers,
onViewCorporate,
disabled = false,
disabledFields = {},
}: Props) => {
const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(
user.subscriptionExpirationDate,
);
const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers, onViewCorporate, disabled = false, disabledFields = {}}: 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 [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 [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
const [referralAgent, setReferralAgent] = useState(
user.type === "corporate"
? user.corporateInformation?.referralAgent
: undefined,
);
const [referralAgent, setReferralAgent] = useState(user.type === "corporate" ? user.corporateInformation?.referralAgent : undefined);
const [companyName, setCompanyName] = useState(
user.type === "corporate"
? user.corporateInformation?.companyInformation.name
@@ -109,41 +84,18 @@ const UserCard = ({
? user.agentInformation?.companyName
: undefined,
);
const [arabName, setArabName] = useState(
user.type === "agent" ? user.agentInformation?.companyArabName : undefined,
);
const [arabName, setArabName] = useState(user.type === "agent" ? user.agentInformation?.companyArabName : 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 [commissionValue, setCommission] = useState(
user.type === "corporate"
? user.corporateInformation?.payment?.commission
: undefined,
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 [commissionValue, setCommission] = useState(user.type === "corporate" ? user.corporateInformation?.payment?.commission : undefined);
const {stats} = useStats(user.id);
const {users} = useUsers();
const {codes} = useCodes(user.id);
useEffect(() => {
if (users && users.length > 0) {
@@ -159,11 +111,8 @@ const UserCard = ({
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;
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}`, {
@@ -191,9 +140,7 @@ const UserCard = ({
payment: {
value: paymentValue,
currency: paymentCurrency,
...(referralAgent === ""
? {}
: { commission: commissionValue }),
...(referralAgent === "" ? {} : {commission: commissionValue}),
},
}
: undefined,
@@ -207,34 +154,43 @@ const UserCard = ({
});
};
return (
<>
<ProfileSummary
user={user}
items={[
const generalProfileItems = [
{
icon: (
<BsFileEarmarkText className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
),
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" />
),
icon: <BsPencil className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
value: stats.length,
label: "Modules",
},
{
icon: (
<BsStar className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />
),
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",
},
]}
/>
];
const corporateProfileItems =
user.type === "corporate"
? [
{
icon: <BsPerson className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
value: codes.length,
label: "Users Used",
},
{
icon: <BsPersonAdd className="w-6 h-6 md:w-8 md:h-8 text-mti-red-light" />,
value: user.corporateInformation.companyInformation.userAmount,
label: "Number of Users",
},
]
: [];
return (
<>
<ProfileSummary user={user} items={user.type === "corporate" ? corporateProfileItems : generalProfileItems} />
{user.type === "agent" && (
<>
@@ -304,9 +260,7 @@ const UserCard = ({
disabled={disabled}
/>
<div className="flex flex-col gap-3 w-full lg:col-span-3">
<label className="font-normal text-base text-mti-gray-dim">
Pricing
</label>
<label className="font-normal text-base text-mti-gray-dim">Pricing</label>
<div className="w-full grid grid-cols-6 gap-2">
<Input
name="paymentValue"
@@ -319,13 +273,10 @@ const UserCard = ({
<Select
className={clsx(
"px-4 py-4 col-span-3 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
disabled &&
"!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
disabled && "!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
)}
options={CURRENCIES_OPTIONS}
value={CURRENCIES_OPTIONS.find(
(c) => c.value === paymentCurrency,
)}
value={CURRENCIES_OPTIONS.find((c) => c.value === paymentCurrency)}
onChange={(value) => setPaymentCurrency(value?.value)}
menuPortalTarget={document?.body}
styles={{
@@ -341,11 +292,7 @@ const UserCard = ({
}),
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused
? "#D5D9F0"
: state.isSelected
? "#7872BF"
: "white",
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
@@ -356,15 +303,12 @@ const UserCard = ({
</div>
<div className="flex gap-3 w-full">
<div className="flex flex-col gap-3 w-8/12">
<label className="font-normal text-base text-mti-gray-dim">
Country Manager
</label>
<label className="font-normal text-base text-mti-gray-dim">Country Manager</label>
{referralAgentLabel && (
<Select
className={clsx(
"px-4 py-4 w-full text-sm font-normal placeholder:text-mti-gray-cool bg-white rounded-full border border-mti-gray-platinum focus:outline-none",
(!["developer", "admin"].includes(loggedInUser.type) ||
disabledFields.countryManager) &&
(!["developer", "admin"].includes(loggedInUser.type) || disabledFields.countryManager) &&
"!bg-mti-gray-platinum/40 !text-mti-gray-dim cursor-not-allowed",
)}
options={[
@@ -395,28 +339,19 @@ const UserCard = ({
}),
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused
? "#D5D9F0"
: state.isSelected
? "#7872BF"
: "white",
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
// editing country manager should only be available for dev/admin
isDisabled={
!["developer", "admin"].includes(loggedInUser.type) ||
disabledFields.countryManager
}
isDisabled={!["developer", "admin"].includes(loggedInUser.type) || disabledFields.countryManager}
/>
)}
</div>
<div className="flex flex-col gap-3 w-4/12">
{referralAgent !== "" && loggedInUser.type !== "corporate" ? (
<>
<label className="font-normal text-base text-mti-gray-dim">
Commission
</label>
<label className="font-normal text-base text-mti-gray-dim">Commission</label>
<Input
name="commissionValue"
onChange={(e) => setCommission(e ? parseInt(e) : undefined)}
@@ -458,13 +393,8 @@ const UserCard = ({
<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}
/>
<label className="font-normal text-base text-mti-gray-dim">Country</label>
<CountrySelect disabled value={user.demographicInformation?.country} />
</div>
<Input
type="tel"
@@ -484,11 +414,7 @@ const UserCard = ({
label="Passport/National ID"
onChange={() => null}
placeholder="Enter National ID or Passport number"
value={
user.type === "student"
? user.demographicInformation?.passport_id
: undefined
}
value={user.type === "student" ? user.demographicInformation?.passport_id : undefined}
disabled
required
/>
@@ -497,14 +423,11 @@ const UserCard = ({
<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>
<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"
disabled={disabled}
>
disabled={disabled}>
{EMPLOYMENT_STATUS.map(({status, label}) => (
<RadioGroup.Option value={status} key={status}>
{({checked}) => (
@@ -515,8 +438,7 @@ const UserCard = ({
!checked
? "bg-white border-mti-gray-platinum"
: "bg-mti-purple-light border-mti-purple-dark text-white",
)}
>
)}>
{label}
</span>
)}
@@ -539,14 +461,11 @@ const UserCard = ({
)}
<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>
<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"
disabled={disabled}
>
disabled={disabled}>
<RadioGroup.Option value="male">
{({checked}) => (
<span
@@ -556,8 +475,7 @@ const UserCard = ({
!checked
? "bg-white border-mti-gray-platinum"
: "bg-mti-purple-light border-mti-purple-dark text-white",
)}
>
)}>
Male
</span>
)}
@@ -571,8 +489,7 @@ const UserCard = ({
!checked
? "bg-white border-mti-gray-platinum"
: "bg-mti-purple-light border-mti-purple-dark text-white",
)}
>
)}>
Female
</span>
)}
@@ -586,8 +503,7 @@ const UserCard = ({
!checked
? "bg-white border-mti-gray-platinum"
: "bg-mti-purple-light border-mti-purple-dark text-white",
)}
>
)}>
Other
</span>
)}
@@ -596,20 +512,11 @@ const UserCard = ({
</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>
<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,
)
}
disabled={disabled}
>
onChange={(checked) => setExpiryDate(checked ? user.subscriptionExpirationDate || new Date() : null)}
disabled={disabled}>
Enabled
</Checkbox>
</div>
@@ -618,12 +525,9 @@ const UserCard = ({
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),
!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>
@@ -639,9 +543,7 @@ const UserCard = ({
filterDate={(date) =>
moment(date).isAfter(new Date()) &&
(loggedInUser.subscriptionExpirationDate
? moment(date).isBefore(
moment(loggedInUser.subscriptionExpirationDate),
)
? moment(date).isBefore(moment(loggedInUser.subscriptionExpirationDate))
: true)
}
dateFormat="dd/MM/yyyy"
@@ -653,23 +555,18 @@ const UserCard = ({
</div>
</div>
</div>
{(loggedInUser.type === "developer" ||
loggedInUser.type === "admin") && (
{(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>
<label className="font-normal text-base text-mti-gray-dim">Status</label>
<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={USER_STATUS_OPTIONS}
menuPortalTarget={document?.body}
value={USER_STATUS_OPTIONS.find((o) => o.value === status)}
onChange={(value) =>
setStatus(value?.value as typeof user.status)
}
onChange={(value) => setStatus(value?.value as typeof user.status)}
styles={{
control: (styles) => ({
...styles,
@@ -683,11 +580,7 @@ const UserCard = ({
menuPortal: (base) => ({...base, zIndex: 9999}),
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused
? "#D5D9F0"
: state.isSelected
? "#7872BF"
: "white",
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
@@ -695,17 +588,13 @@ const UserCard = ({
/>
</div>
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">
Type
</label>
<label className="font-normal text-base text-mti-gray-dim">Type</label>
<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={USER_TYPE_OPTIONS}
menuPortalTarget={document?.body}
value={USER_TYPE_OPTIONS.find((o) => o.value === type)}
onChange={(value) =>
setType(value?.value as typeof user.type)
}
onChange={(value) => setType(value?.value as typeof user.type)}
styles={{
control: (styles) => ({
...styles,
@@ -719,11 +608,7 @@ const UserCard = ({
menuPortal: (base) => ({...base, zIndex: 9999}),
option: (styles, state) => ({
...styles,
backgroundColor: state.isFocused
? "#D5D9F0"
: state.isSelected
? "#7872BF"
: "white",
backgroundColor: state.isFocused ? "#D5D9F0" : state.isSelected ? "#7872BF" : "white",
color: state.isFocused ? "black" : styles.color,
}),
}}
@@ -738,49 +623,26 @@ const UserCard = ({
<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 && ["student", "teacher"].includes(user.type) && (
<Button
className="w-full max-w-[200px]"
variant="outline"
color="rose"
onClick={onViewCorporate}
>
<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewCorporate}>
View Corporate
</Button>
)}
{onViewStudents && ["corporate", "teacher"].includes(user.type) && (
<Button
className="w-full max-w-[200px]"
variant="outline"
color="rose"
onClick={onViewStudents}
>
<Button className="w-full max-w-[200px]" variant="outline" color="rose" onClick={onViewStudents}>
View Students
</Button>
)}
{onViewTeachers && ["student", "corporate"].includes(user.type) && (
<Button
className="w-full max-w-[200px]"
variant="outline"
color="rose"
onClick={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}
>
<Button className="w-full max-w-[200px]" variant="outline" onClick={onClose}>
Close
</Button>
<Button
disabled={disabled}
onClick={updateUser}
className="w-full max-w-[200px]"
>
<Button disabled={disabled} onClick={updateUser} className="w-full max-w-[200px]">
Update
</Button>
</div>