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

Added a field for the agent where they can put their arab name

Browse Source
This commit is contained in:
Tiago Ribeiro
2024-04-20 16:01:35 +01:00
parent 36b861266f
commit a958e2ff0d
3 changed files with 1585 additions and 1203 deletions
Download Patch File Download Diff File Expand all files Collapse all files

298
src/components/UserCard.tsx
View File

@@ -24,9 +24,12 @@ 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 {
@@ -59,17 +62,42 @@ const USER_TYPE_OPTIONS = Object.keys(USER_TYPE_LABELS).map((type) => ({
label: USER_TYPE_LABELS[type as keyof typeof USER_TYPE_LABELS],
}));
const CURRENCIES_OPTIONS = CURRENCIES.map(({label, currency}) => ({value: currency, label}));
const CURRENCIES_OPTIONS = CURRENCIES.map(({ label, currency }) => ({
value: currency,
label,
}));
const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers, onViewCorporate, disabled = false}: Props) => {
const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
const UserCard = ({
user,
loggedInUser,
onClose,
onViewStudents,
onViewTeachers,
onViewCorporate,
disabled = false,
}: 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
@@ -77,14 +105,39 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
? user.agentInformation?.companyName
: undefined,
);
const [commercialRegistration, setCommercialRegistration] = useState(
user.type === "agent" ? user.agentInformation?.commercialRegistration : undefined,
const [arabName, setArabName] = useState(
user.type === "agent" ? user.agentInformation?.arabName : 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,
);
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();
@@ -102,8 +155,11 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
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}`, {
@@ -116,6 +172,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
? {
companyName,
commercialRegistration,
arabName,
}
: undefined,
corporateInformation:
@@ -130,7 +187,9 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
payment: {
value: paymentValue,
currency: paymentCurrency,
...(referralAgent === "" ? {} : {commission: commissionValue}),
...(referralAgent === ""
? {}
: { commission: commissionValue }),
},
}
: undefined,
@@ -150,17 +209,23 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
user={user}
items={[
{
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",
},
@@ -169,13 +234,23 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
{user.type === "agent" && (
<>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 w-full">
<Input
label="Corporate Name"
label="Arab Name"
type="text"
name="arabName"
onChange={setArabName}
placeholder="Enter their arab name"
defaultValue={arabName}
required
disabled={disabled}
/>
<Input
label="Company Name"
type="text"
name="companyName"
onChange={setCompanyName}
placeholder="Enter corporate name"
placeholder="Enter their company's name"
defaultValue={companyName}
required
disabled={disabled}
@@ -225,7 +300,9 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
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"
@@ -238,10 +315,13 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
<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={{
@@ -257,7 +337,11 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
}),
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,
}),
}}
@@ -268,7 +352,9 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
</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(
@@ -278,7 +364,12 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
)}
options={[
{ value: "", label: "No referral" },
...users.filter((u) => u.type === "agent").map((x) => ({value: x.id, label: `${x.name} - ${x.email}`})),
...users
.filter((u) => u.type === "agent")
.map((x) => ({
value: x.id,
label: `${x.name} - ${x.email}`,
})),
]}
defaultValue={{
value: referralAgent,
@@ -299,19 +390,27 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
}),
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)}
isDisabled={
!["developer", "admin"].includes(loggedInUser.type)
}
/>
)}
</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)}
@@ -353,8 +452,13 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
<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"
@@ -374,7 +478,11 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
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
/>
@@ -383,11 +491,14 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
<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 }) => (
@@ -398,7 +509,8 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
!checked
? "bg-white border-mti-gray-platinum"
: "bg-mti-purple-light border-mti-purple-dark text-white",
)}>
)}
>
{label}
</span>
)}
@@ -421,11 +533,14 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
)}
<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
@@ -435,7 +550,8 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
!checked
? "bg-white border-mti-gray-platinum"
: "bg-mti-purple-light border-mti-purple-dark text-white",
)}>
)}
>
Male
</span>
)}
@@ -449,7 +565,8 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
!checked
? "bg-white border-mti-gray-platinum"
: "bg-mti-purple-light border-mti-purple-dark text-white",
)}>
)}
>
Female
</span>
)}
@@ -463,7 +580,8 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
!checked
? "bg-white border-mti-gray-platinum"
: "bg-mti-purple-light border-mti-purple-dark text-white",
)}>
)}
>
Other
</span>
)}
@@ -472,11 +590,20 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
</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>
@@ -485,9 +612,12 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
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>
@@ -503,7 +633,9 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
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"
@@ -515,18 +647,23 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
</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,
@@ -540,7 +677,11 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
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,
}),
}}
@@ -548,13 +689,17 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
/>
</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,
@@ -568,7 +713,11 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
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,
}),
}}
@@ -583,26 +732,49 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers,
<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>

37
src/interfaces/user.ts
View File

@@ -1,7 +1,13 @@
import { Module } from ".";
import { InstructorGender } from "./exam";
export type User = StudentUser | TeacherUser | CorporateUser | AgentUser | AdminUser | DeveloperUser;
export type User =
| StudentUser
| TeacherUser
| CorporateUser
| AgentUser
| AdminUser
| DeveloperUser;
export type UserStatus = "active" | "disabled" | "paymentDue";
export interface BasicUser {
@@ -71,6 +77,7 @@ export interface CorporateInformation {
export interface AgentInformation {
companyName: string;
commercialRegistration: string;
arabName?: string;
}
export interface CompanyInformation {
@@ -96,8 +103,15 @@ export interface DemographicCorporateInformation {
}
export type Gender = "male" | "female" | "other";
export type EmploymentStatus = "employed" | "student" | "self-employed" | "unemployed" | "retired" | "other";
export const EMPLOYMENT_STATUS: {status: EmploymentStatus; label: string}[] = [
export type EmploymentStatus =
| "employed"
| "student"
| "self-employed"
| "unemployed"
| "retired"
| "other";
export const EMPLOYMENT_STATUS: { status: EmploymentStatus; label: string }[] =
[
{ status: "student", label: "Student" },
{ status: "employed", label: "Employed" },
{ status: "unemployed", label: "Unemployed" },
@@ -146,5 +160,18 @@ export interface Code {
passport_id?: string;
}
export type Type = "student" | "teacher" | "corporate" | "admin" | "developer" | "agent";
export const userTypes: Type[] = ["student", "teacher", "corporate", "admin", "developer", "agent"];
export type Type =
| "student"
| "teacher"
| "corporate"
| "admin"
| "developer"
| "agent";
export const userTypes: Type[] = [
"student",
"teacher",
"corporate",
"admin",
"developer",
"agent",
];

317
src/pages/profile.tsx
View File

@@ -2,7 +2,15 @@
import Head from "next/head";
import { withIronSessionSsr } from "iron-session/next";
import { sessionOptions } from "@/lib/session";
import {ChangeEvent, Dispatch, ReactNode, SetStateAction, useEffect, useRef, useState} from "react";
import {
ChangeEvent,
Dispatch,
ReactNode,
SetStateAction,
useEffect,
useRef,
useState,
} from "react";
import useUser from "@/hooks/useUser";
import { toast, ToastContainer } from "react-toastify";
import Layout from "@/components/High/Layout";
@@ -12,7 +20,13 @@ import Link from "next/link";
import axios from "axios";
import { ErrorMessage } from "@/constants/errors";
import clsx from "clsx";
import {CorporateUser, 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";
@@ -64,7 +78,9 @@ interface Props {
mutateUser: Function;
}
const DoubleColumnRow = ({children}: {children: ReactNode}) => <div className="flex flex-col md:flex-row gap-8 w-full">{children}</div>;
const DoubleColumnRow = ({ children }: { children: ReactNode }) => (
<div className="flex flex-col lg:flex-row gap-8 w-full">{children}</div>
);
function UserProfile({ user, mutateUser }: Props) {
const [bio, setBio] = useState(user.bio || "");
@@ -75,32 +91,72 @@ function UserProfile({user, mutateUser}: Props) {
const [isLoading, setIsLoading] = useState(false);
const [profilePicture, setProfilePicture] = useState(user.profilePicture);
const [desiredLevels, setDesiredLevels] = useState<{[key in Module]: number} | undefined>(
["developer", "student"].includes(user.type) ? user.desiredLevels : undefined,
const [desiredLevels, setDesiredLevels] = useState<
{ [key in Module]: number } | undefined
>(
["developer", "student"].includes(user.type)
? user.desiredLevels
: undefined,
);
const [country, setCountry] = useState<string>(user.demographicInformation?.country || "");
const [phone, setPhone] = useState<string>(user.demographicInformation?.phone || "");
const [gender, setGender] = useState<Gender | undefined>(user.demographicInformation?.gender || undefined);
const [country, setCountry] = useState<string>(
user.demographicInformation?.country || "",
);
const [phone, setPhone] = useState<string>(
user.demographicInformation?.phone || "",
);
const [gender, setGender] = useState<Gender | undefined>(
user.demographicInformation?.gender || undefined,
);
const [employment, setEmployment] = useState<EmploymentStatus | undefined>(
user.type === "corporate" ? undefined : user.demographicInformation?.employment,
user.type === "corporate"
? undefined
: user.demographicInformation?.employment,
);
const [passport_id, setPassportID] = useState<string | undefined>(
user.type === "student"
? user.demographicInformation?.passport_id
: undefined,
);
const [passport_id, setPassportID] = useState<string | undefined>(user.type === "student" ? user.demographicInformation?.passport_id : undefined);
const [preferredGender, setPreferredGender] = useState<InstructorGender | undefined>(
user.type === "student" || user.type === "developer" ? user.preferredGender || "varied" : undefined,
const [preferredGender, setPreferredGender] = useState<
InstructorGender | undefined
>(
user.type === "student" || user.type === "developer"
? user.preferredGender || "varied"
: undefined,
);
const [preferredTopics, setPreferredTopics] = useState<string[] | undefined>(
user.type === "student" || user.type === "developer" ? user.preferredTopics : undefined,
user.type === "student" || user.type === "developer"
? user.preferredTopics
: undefined,
);
const [position, setPosition] = useState<string | undefined>(user.type === "corporate" ? user.demographicInformation?.position : undefined);
const [corporateInformation, setCorporateInformation] = useState(user.type === "corporate" ? user.corporateInformation : undefined);
const [companyName, setCompanyName] = useState<string | undefined>(user.type === "agent" ? user.agentInformation?.companyName : undefined);
const [commercialRegistration, setCommercialRegistration] = useState<string | undefined>(
user.type === "agent" ? user.agentInformation?.commercialRegistration : undefined,
const [position, setPosition] = useState<string | undefined>(
user.type === "corporate"
? user.demographicInformation?.position
: undefined,
);
const [corporateInformation, setCorporateInformation] = useState(
user.type === "corporate" ? user.corporateInformation : undefined,
);
const [companyName, setCompanyName] = useState<string | undefined>(
user.type === "agent" ? user.agentInformation?.companyName : undefined,
);
const [commercialRegistration, setCommercialRegistration] = useState<
string | undefined
>(
user.type === "agent"
? user.agentInformation?.commercialRegistration
: undefined,
);
const [arabName, setArabName] = useState<string | undefined>(
user.type === "agent" ? user.agentInformation?.arabName : undefined,
);
const [timezone, setTimezone] = useState<string>(
user.demographicInformation?.timezone || moment.tz.guess(),
);
const [timezone, setTimezone] = useState<string>(user.demographicInformation?.timezone || moment.tz.guess());
const [isPreferredTopicsOpen, setIsPreferredTopicsOpen] = useState(false);
@@ -112,9 +168,12 @@ function UserProfile({user, mutateUser}: Props) {
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";
};
const uploadProfilePicture = async (event: ChangeEvent<HTMLInputElement>) => {
@@ -134,15 +193,20 @@ function UserProfile({user, mutateUser}: Props) {
}
if (newPassword && !password) {
toast.error("To update your password you need to input your current one!");
toast.error(
"To update your password you need to input your current one!",
);
setIsLoading(false);
return;
}
if (email !== user?.email) {
const userAdmins = groups.filter((x) => x.participants.includes(user.id)).map((x) => x.admin);
const userAdmins = groups
.filter((x) => x.participants.includes(user.id))
.map((x) => x.admin);
const message =
users.filter((x) => userAdmins.includes(x.id) && x.type === "corporate").length > 0
users.filter((x) => userAdmins.includes(x.id) && x.type === "corporate")
.length > 0
? "If you change your e-mail address, you will lose all benefits from your university/institute. Are you sure you want to continue?"
: "Are you sure you want to update your e-mail address?";
@@ -173,6 +237,15 @@ function UserProfile({user, mutateUser}: Props) {
timezone,
},
...(user.type === "corporate" ? { corporateInformation } : {}),
...(user.type === "agent"
? {
agentInformation: {
companyName,
commercialRegistration,
arabName,
},
}
: {}),
})
.then((response) => {
if (response.status === 200) {
@@ -193,7 +266,9 @@ function UserProfile({user, mutateUser}: Props) {
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>
<label className="font-normal text-base text-mti-gray-dim">
Expiry Date (click to purchase)
</label>
<Link
href="/payment"
className={clsx(
@@ -203,21 +278,29 @@ function UserProfile({user, mutateUser}: Props) {
? "!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")}
{user.subscriptionExpirationDate &&
moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
</Link>
</div>
);
const TimezoneInput = () => (
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Timezone</label>
<label className="font-normal text-base text-mti-gray-dim">
Timezone
</label>
<TimezoneSelect value={timezone} onChange={setTimezone} />
</div>
);
const manualDownloadLink = ["student", "teacher", "corporate"].includes(user.type) ? `/manuals/${user.type}.pdf` : "";
const manualDownloadLink = ["student", "teacher", "corporate"].includes(
user.type,
)
? `/manuals/${user.type}.pdf`
: "";
return (
<Layout user={user}>
@@ -230,7 +313,7 @@ function UserProfile({user, mutateUser}: Props) {
<DoubleColumnRow>
{user.type !== "corporate" ? (
<Input
label="Name"
label={user.type === "agent" ? "English name" : "Name"}
type="text"
name="name"
onChange={(e) => setName(e)}
@@ -246,7 +329,10 @@ function UserProfile({user, mutateUser}: Props) {
onChange={(e) =>
setCorporateInformation((prev) => ({
...prev!,
companyInformation: {...prev!.companyInformation, name: e},
companyInformation: {
...prev!.companyInformation,
name: e,
},
}))
}
placeholder="Enter your company's name"
@@ -255,6 +341,18 @@ function UserProfile({user, mutateUser}: Props) {
/>
)}
{user.type === "agent" && (
<Input
label="Arab name"
type="text"
name="arabName"
onChange={(e) => setArabName(e)}
placeholder="Enter your arab name"
defaultValue={arabName}
required
/>
)}
<Input
label="E-mail Address"
type="email"
@@ -285,11 +383,11 @@ function UserProfile({user, mutateUser}: Props) {
{user.type === "agent" && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full">
<Input
label="Corporate Name"
label="Company Name"
type="text"
name="companyName"
onChange={() => null}
placeholder="Enter corporate name"
placeholder="Enter your company's name"
defaultValue={companyName}
disabled
/>
@@ -307,7 +405,9 @@ function UserProfile({user, mutateUser}: Props) {
<DoubleColumnRow>
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Country *</label>
<label className="font-normal text-base text-mti-gray-dim">
Country *
</label>
<CountrySelect value={country} onChange={setCountry} />
</div>
<Input
@@ -340,25 +440,44 @@ function UserProfile({user, mutateUser}: Props) {
<Divider />
{desiredLevels && ["developer", "student"].includes(user.type) && (
{desiredLevels &&
["developer", "student"].includes(user.type) && (
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Desired Levels</label>
<label className="font-normal text-base text-mti-gray-dim">
Desired Levels
</label>
<ModuleLevelSelector
levels={desiredLevels}
setLevels={setDesiredLevels as Dispatch<SetStateAction<{[key in Module]: number}>>}
setLevels={
setDesiredLevels as Dispatch<
SetStateAction<{ [key in Module]: number }>
>
}
/>
</div>
)}
{preferredGender && ["developer", "student"].includes(user.type) && (
{preferredGender &&
["developer", "student"].includes(user.type) && (
<>
<Divider />
<DoubleColumnRow>
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Speaking Instructor&apos;s Gender</label>
<label className="font-normal text-base text-mti-gray-dim">
Speaking Instructor&apos;s Gender
</label>
<Select
value={{value: preferredGender, label: capitalize(preferredGender)}}
onChange={(value) => (value ? setPreferredGender(value.value as InstructorGender) : null)}
value={{
value: preferredGender,
label: capitalize(preferredGender),
}}
onChange={(value) =>
value
? setPreferredGender(
value.value as InstructorGender,
)
: null
}
options={[
{ value: "male", label: "Male" },
{ value: "female", label: "Female" },
@@ -371,12 +490,18 @@ function UserProfile({user, mutateUser}: Props) {
Preferred Topics{" "}
<span
className="tooltip"
data-tip="These topics will be considered for speaking and writing modules, aiming to include at least one exercise containing of the these in the selected exams.">
data-tip="These topics will be considered for speaking and writing modules, aiming to include at least one exercise containing of the these in the selected exams."
>
<BsQuestionCircleFill />
</span>
</label>
<Button className="w-full" variant="outline" onClick={() => setIsPreferredTopicsOpen(true)}>
Select Topics ({preferredTopics?.length || "All"} selected)
<Button
className="w-full"
variant="outline"
onClick={() => setIsPreferredTopicsOpen(true)}
>
Select Topics ({preferredTopics?.length || "All"}{" "}
selected)
</Button>
</div>
</DoubleColumnRow>
@@ -388,10 +513,10 @@ function UserProfile({user, mutateUser}: Props) {
selectTopics={setPreferredTopics}
initialTopics={preferredTopics || []}
/>
</>
)}
<Divider />
</>
)}
{user.type === "corporate" && (
<>
@@ -401,7 +526,9 @@ function UserProfile({user, mutateUser}: Props) {
name="companyUsers"
onChange={() => null}
label="Number of users"
defaultValue={user.corporateInformation.companyInformation.userAmount}
defaultValue={
user.corporateInformation.companyInformation.userAmount
}
disabled
required
/>
@@ -445,14 +572,20 @@ function UserProfile({user, mutateUser}: Props) {
</>
)}
{user.type === "corporate" && user.corporateInformation.referralAgent && (
{user.type === "corporate" &&
user.corporateInformation.referralAgent && (
<>
<Divider />
<DoubleColumnRow>
<Input
name="agentName"
onChange={() => null}
defaultValue={users.find((x) => x.id === user.corporateInformation.referralAgent)?.name}
defaultValue={
users.find(
(x) =>
x.id === user.corporateInformation.referralAgent,
)?.name
}
type="text"
label="Country Manager's Name"
placeholder="Not available"
@@ -462,7 +595,12 @@ function UserProfile({user, mutateUser}: Props) {
<Input
name="agentEmail"
onChange={() => null}
defaultValue={users.find((x) => x.id === user.corporateInformation.referralAgent)?.email}
defaultValue={
users.find(
(x) =>
x.id === user.corporateInformation.referralAgent,
)?.email
}
type="text"
label="Country Manager's E-mail"
placeholder="Not available"
@@ -472,11 +610,16 @@ function UserProfile({user, mutateUser}: Props) {
</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>
<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
users.find(
(x) =>
x.id ===
user.corporateInformation.referralAgent,
)?.demographicInformation?.country
}
onChange={() => null}
disabled
@@ -490,7 +633,10 @@ function UserProfile({user, mutateUser}: Props) {
onChange={() => null}
placeholder="Not available"
defaultValue={
users.find((x) => x.id === user.corporateInformation.referralAgent)?.demographicInformation?.phone
users.find(
(x) =>
x.id === user.corporateInformation.referralAgent,
)?.demographicInformation?.phone
}
disabled
required
@@ -501,7 +647,10 @@ function UserProfile({user, mutateUser}: Props) {
{user.type !== "corporate" && (
<DoubleColumnRow>
<EmploymentStatusInput value={employment} onChange={setEmployment} />
<EmploymentStatusInput
value={employment}
onChange={setEmployment}
/>
<div className="flex flex-col gap-8 w-full">
<GenderInput value={gender} onChange={setGender} />
@@ -514,37 +663,62 @@ function UserProfile({user, mutateUser}: Props) {
<div className="flex flex-col gap-6 w-48">
<div
className="flex flex-col gap-3 items-center h-fit cursor-pointer group"
onClick={() => (profilePictureInput.current as any)?.click()}>
onClick={() => (profilePictureInput.current as any)?.click()}
>
<div className="relative overflow-hidden h-48 w-48 rounded-full">
<div
className={clsx(
"absolute top-0 left-0 bg-mti-purple-light/60 w-full h-full z-20 flex items-center justify-center opacity-0 group-hover:opacity-100",
"transition ease-in-out duration-300",
)}>
)}
>
<BsCamera className="text-6xl text-mti-purple-ultralight/80" />
</div>
<img src={profilePicture} alt={user.name} className="aspect-square drop-shadow-xl self-end object-cover" />
<img
src={profilePicture}
alt={user.name}
className="aspect-square drop-shadow-xl self-end object-cover"
/>
</div>
<input type="file" className="hidden" onChange={uploadProfilePicture} accept="image/*" ref={profilePictureInput} />
<input
type="file"
className="hidden"
onChange={uploadProfilePicture}
accept="image/*"
ref={profilePictureInput}
/>
<span
onClick={() => (profilePictureInput.current as any)?.click()}
className="cursor-pointer text-mti-purple-light text-sm">
className="cursor-pointer text-mti-purple-light text-sm"
>
Change picture
</span>
<h6 className="font-normal text-base text-mti-gray-taupe">{USER_TYPE_LABELS[user.type]}</h6>
<h6 className="font-normal text-base text-mti-gray-taupe">
{USER_TYPE_LABELS[user.type]}
</h6>
</div>
{user.type === "agent" && (
<div className="flag items-center h-fit">
<img
alt={user.demographicInformation?.country.toLowerCase() + "_flag"}
alt={
user.demographicInformation?.country.toLowerCase() + "_flag"
}
src={`https://flagcdn.com/w320/${user.demographicInformation?.country.toLowerCase()}.png`}
width="320"
/>
</div>
)}
{manualDownloadLink && (
<a href={manualDownloadLink} className="max-w-[200px] self-end w-full" download>
<Button color="purple" variant="outline" className="max-w-[200px] self-end w-full">
<a
href={manualDownloadLink}
className="max-w-[200px] self-end w-full"
download
>
<Button
color="purple"
variant="outline"
className="max-w-[200px] self-end w-full"
>
Download Manual
</Button>
</a>
@@ -563,11 +737,20 @@ function UserProfile({user, mutateUser}: Props) {
<div className="self-end flex justify-between w-full gap-8 absolute bottom-8 left-0 px-8">
<Link href="/" className="max-w-[200px] self-end w-full">
<Button color="purple" variant="outline" className="max-w-[200px] self-end w-full">
<Button
color="purple"
variant="outline"
className="max-w-[200px] self-end w-full"
>
Back
</Button>
</Link>
<Button color="purple" className="max-w-[200px] self-end w-full" onClick={updateUser} disabled={isLoading}>
<Button
color="purple"
className="max-w-[200px] self-end w-full"
onClick={updateUser}
disabled={isLoading}
>
Save Changes
</Button>
</div>