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

Added more fields to the corporate and showcased them in the UserCard

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-11-13 19:27:11 +00:00
parent 261ba74105
commit 6056735c72
8 changed files with 127 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/UserCard.tsx
View File

@@ -15,6 +15,8 @@ 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";
const expirationDateColor = (date: Date) => {
const momentDate = moment(date);
@@ -34,7 +36,9 @@ interface Props {
const UserCard = ({user, onClose, onViewStudents, onViewTeachers}: Props) => {
const [expiryDate, setExpiryDate] = useState<Date | null | undefined>(user.subscriptionExpirationDate);
const [referralAgent, setReferralAgent] = useState(user.corporateInformation?.referralAgent);
const {stats} = useStats(user.id);
const {users} = useUsers();
const updateUser = () => {
if (!confirm(`Are you sure you want to update ${user.name}'s account?`)) return;
@@ -241,6 +245,38 @@ const UserCard = ({user, onClose, onViewStudents, onViewTeachers}: Props) => {
placeholder="Enter amount of users"
defaultValue={user.corporateInformation?.companyInformation.userAmount}
/>
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Country Agent</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={[
{value: "", label: "No referral"},
...users.filter((u) => u.type === "agent").map((x) => ({value: x.id, label: `${x.name} - ${x.email}`})),
]}
defaultValue={{
value: referralAgent,
label: referralAgent ? users.find((u) => u.id === referralAgent)?.name || "" : "No agent",
}}
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>
</>
)}

2
src/hooks/useUsers.tsx
View File

@@ -10,7 +10,7 @@ export default function useUsers() {
const getData = () => {
setIsLoading(true);
axios
.get<User[]>("/api/users/list")
.get<User[]>("/api/users/list", {headers: {page: "register"}})
.then((response) => setUsers(response.data))
.finally(() => setIsLoading(false));
};

2
src/interfaces/user.ts
View File

@@ -26,6 +26,8 @@ export interface CorporateInformation {
value: number;
currency: string;
};
monthlyDuration: number;
referralAgent?: string;
allowedUserAmount?: number;
}

84
src/pages/(register)/RegisterCorporate.tsx
View File

@@ -8,6 +8,8 @@ import {Divider} from "primereact/divider";
import {useState} from "react";
import {toast} from "react-toastify";
import {KeyedMutator} from "swr";
import Select from "react-select";
import moment from "moment";
interface Props {
isLoading: boolean;
@@ -16,14 +18,23 @@ interface Props {
sendEmailVerification: typeof sendEmailVerification;
}
const availableDurations = {
"1_month": {label: "1 Month", number: 1},
"3_months": {label: "3 Months", number: 3},
"6_months": {label: "6 Months", number: 6},
"12_months": {label: "12 Months", number: 12},
};
export default function RegisterCorporate({isLoading, setIsLoading, mutateUser, sendEmailVerification}: Props) {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const [confirmPassword, setConfirmPassword] = useState("");
const [referralAgent, setReferralAgent] = useState<string | undefined>();
const [companyName, setCompanyName] = useState("");
const [companyUsers, setCompanyUsers] = useState(0);
const [subscriptionDuration, setSubscriptionDuration] = useState(1);
const {users} = useUsers();
@@ -50,12 +61,15 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,
password,
type: "corporate",
profilePicture: "/defaultAvatar.png",
subscriptionExpirationDate: moment().add(1, "days").add(subscriptionDuration, "months").toISOString(),
corporateInformation: {
companyInformation: {
name: companyName,
userAmount: companyUsers,
},
referralAgent,
allowedUserAmount: companyUsers,
monthlyDuration: subscriptionDuration,
},
})
.then((response) => {
@@ -81,8 +95,11 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,
return (
<form className="flex flex-col items-center gap-4 w-full" onSubmit={register}>
<Input type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" defaultValue={name} required />
<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" defaultValue={email} required />
<div className="w-full flex gap-4">
<Input type="text" name="name" onChange={(e) => setName(e)} placeholder="Enter your name" defaultValue={name} required />
<Input type="email" name="email" onChange={(e) => setEmail(e)} placeholder="Enter email address" defaultValue={email} required />
</div>
<div className="w-full flex gap-4">
<Input
type="password"
@@ -110,6 +127,7 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,
name="companyName"
onChange={(e) => setCompanyName(e)}
placeholder="Institution name"
label="Institution name"
defaultValue={companyName}
required
/>
@@ -123,6 +141,68 @@ export default function RegisterCorporate({isLoading, setIsLoading, mutateUser,
/>
</div>
<div className="w-full flex gap-4">
<div className="flex flex-col gap-3 w-full">
<label className="font-normal text-base text-mti-gray-dim">Referral</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={[
{value: "", label: "No referral"},
...users.filter((u) => u.type === "agent").map((x) => ({value: x.id, label: `${x.name} - ${x.email}`})),
]}
defaultValue={{value: "", label: "No referral"}}
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">
<label className="font-normal text-base text-mti-gray-dim">Subscription Duration</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={Object.keys(availableDurations).map((value) => ({
value,
label: availableDurations[value as keyof typeof availableDurations].label,
}))}
defaultValue={{value: "1_month", label: availableDurations["1_month"].label}}
onChange={(value) =>
setSubscriptionDuration(value ? availableDurations[value.value as keyof typeof availableDurations].number : 1)
}
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>
<Button
className="lg:mt-8 w-full"
color="purple"

2
src/pages/api/register.ts
View File

@@ -104,7 +104,7 @@ async function registerCorporate(req: NextApiRequest, res: NextApiResponse) {
isFirstLogin: false,
focus: "academic",
type: "corporate",
subscriptionExpirationDate: null,
subscriptionExpirationDate: req.body.subscriptionExpirationDate || null,
status: "paymentDue",
registrationDate: new Date().toISOString(),
};

2
src/pages/api/users/list.ts
View File

@@ -10,7 +10,7 @@ const db = getFirestore(app);
export default withIronSessionApiRoute(handler, sessionOptions);
async function handler(req: NextApiRequest, res: NextApiResponse) {
if (!req.session.user) {
if (!req.session.user && !req.headers["page"] && req.headers["page"] !== "register") {
res.status(401).json({ok: false});
return;
}

4
src/pages/login.tsx
View File

@@ -84,8 +84,8 @@ export default function Login() {
<img src="/people-talking-tablet.png" alt="People smiling looking at a tablet" className="h-full aspect-auto" />
</section>
<section className="h-full w-full flex flex-col items-center justify-center gap-2">
<div className="flex flex-col gap-2 items-center relative">
<img src="/logo_title.png" alt="EnCoach's Logo" className="w-36 lg:w-64 absolute -top-36 lg:-top-64" />
<div className={clsx("flex flex-col items-center", !user && "mb-4")}>
<img src="/logo_title.png" alt="EnCoach's Logo" className="w-36 lg:w-56" />
<h1 className="font-bold text-2xl lg:text-4xl">Login to your account</h1>
<p className="self-start text-sm lg:text-base font-normal text-mti-gray-cool">with your registered Email Address</p>
</div>

4
src/pages/register.tsx
View File

@@ -36,7 +36,7 @@ export default function Register({code: queryCode}: {code: string}) {
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="w-full h-[100vh] flex bg-white text-black">
<main className="w-full min-h-[100vh] h-full flex bg-white text-black">
<ToastContainer />
<section className="h-full w-fit min-w-fit relative hidden lg:flex">
<div className="absolute h-full w-full bg-mti-rose-light z-10 bg-opacity-50" />
@@ -49,7 +49,7 @@ export default function Register({code: queryCode}: {code: string}) {
</div>
{!user && (
<>
<div className="flex flex-col gap-6 w-full -lg:px-8 lg:w-2/3">
<div className="flex flex-col gap-6 w-full -lg:px-8 lg:w-3/4">
<Tab.Group>
<Tab.List className="flex space-x-1 rounded-xl bg-mti-purple-ultralight/40 p-1">
<Tab