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

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"