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

Changed from employment to position for Corporate accounts

Browse Source
This commit is contained in:
Tiago Ribeiro
2023-11-28 08:21:00 +00:00
parent f354a4f4fe
commit c90234cefc
5 changed files with 134 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/components/DemographicInformationInput.tsx
View File

@@ -21,6 +21,7 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
const [phone, setPhone] = useState<string>(); const [phone, setPhone] = useState<string>();
const [gender, setGender] = useState<Gender>(); const [gender, setGender] = useState<Gender>();
const [employment, setEmployment] = useState<EmploymentStatus>(); const [employment, setEmployment] = useState<EmploymentStatus>();
const [position, setPosition] = useState<string>();
const [isLoading, setIsLoading] = useState(false); const [isLoading, setIsLoading] = useState(false);
const [companyName, setCompanyName] = useState<string>(); const [companyName, setCompanyName] = useState<string>();
@@ -36,7 +37,8 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
country, country,
phone: `+${countryCodes.findOne("countryCode" as any, country!).countryCallingCode}${phone}`, phone: `+${countryCodes.findOne("countryCode" as any, country!).countryCallingCode}${phone}`,
gender, gender,
employment, employment: user.type === "corporate" ? undefined : employment,
position: user.type === "corporate" ? position : undefined,
}, },
agentInformation: user.type === "agent" ? {companyName, commercialRegistration} : undefined, agentInformation: user.type === "agent" ? {companyName, commercialRegistration} : undefined,
}) })
@@ -116,25 +118,32 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
</RadioGroup.Option> </RadioGroup.Option>
</RadioGroup> </RadioGroup>
</div> </div>
<div className="relative flex flex-col gap-3 w-full"> {user.type === "corporate" && (
<label className="font-normal text-base text-mti-gray-dim">Employment Status *</label> <Input name="position" onChange={setPosition} type="text" label="Position" placeholder="CEO, Head of Marketing..." required />
<RadioGroup value={employment} onChange={setEmployment} className="grid grid-cols-2 items-center gap-4 place-items-center"> )}
{EMPLOYMENT_STATUS.map(({status, label}) => ( {user.type !== "corporate" && (
<RadioGroup.Option value={status} key={status}> <div className="relative flex flex-col gap-3 w-full">
{({checked}) => ( <label className="font-normal text-base text-mti-gray-dim">Employment Status *</label>
<span <RadioGroup value={employment} onChange={setEmployment} className="grid grid-cols-2 items-center gap-4 place-items-center">
className={clsx( {EMPLOYMENT_STATUS.map(({status, label}) => (
"px-6 py-4 w-44 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer", <RadioGroup.Option value={status} key={status}>
"transition duration-300 ease-in-out", {({checked}) => (
!checked ? "bg-white border-mti-gray-platinum" : "bg-mti-purple-light border-mti-purple-dark text-white", <span
)}> className={clsx(
{label} "px-6 py-4 w-44 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
</span> "transition duration-300 ease-in-out",
)} !checked
</RadioGroup.Option> ? "bg-white border-mti-gray-platinum"
))} : "bg-mti-purple-light border-mti-purple-dark text-white",
</RadioGroup> )}>
</div> {label}
</span>
)}
</RadioGroup.Option>
))}
</RadioGroup>
</div>
)}
</form> </form>
<div className="self-end flex justify-end w-full gap-8 absolute bottom-8 left-0 px-8"> <div className="self-end flex justify-end w-full gap-8 absolute bottom-8 left-0 px-8">
@@ -147,7 +156,7 @@ export default function DemographicInformationInput({user, mutateUser}: Props) {
!country || !country ||
!phone || !phone ||
!gender || !gender ||
!employment || (user.type === "corporate" ? !position : !employment) ||
(user.type === "agent" ? !companyName || !commercialRegistration : false) (user.type === "agent" ? !companyName || !commercialRegistration : false)
}> }>
{!isLoading && "Save information"} {!isLoading && "Save information"}

61
src/components/UserCard.tsx
View File

@@ -42,6 +42,7 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
const [type, setType] = useState(user.type); const [type, setType] = useState(user.type);
const [status, setStatus] = useState(user.status); const [status, setStatus] = useState(user.status);
const [referralAgentLabel, setReferralAgentLabel] = useState<string>(); 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 [referralAgent, setReferralAgent] = useState(user.type === "corporate" ? user.corporateInformation?.referralAgent : undefined);
const [companyName, setCompanyName] = useState( const [companyName, setCompanyName] = useState(
@@ -292,29 +293,43 @@ const UserCard = ({user, loggedInUser, onClose, onViewStudents, onViewTeachers}:
</div> </div>
<div className="flex flex-col md:flex-row gap-8 w-full"> <div className="flex flex-col md:flex-row gap-8 w-full">
<div className="relative flex flex-col gap-3 w-full"> {user.type !== "corporate" && (
<label className="font-normal text-base text-mti-gray-dim">Employment Status</label> <div className="relative flex flex-col gap-3 w-full">
<RadioGroup <label className="font-normal text-base text-mti-gray-dim">Employment Status</label>
value={user.demographicInformation?.employment} <RadioGroup
className="grid grid-cols-2 items-center gap-4 place-items-center"> value={user.demographicInformation?.employment}
{EMPLOYMENT_STATUS.map(({status, label}) => ( className="grid grid-cols-2 items-center gap-4 place-items-center">
<RadioGroup.Option value={status} key={status}> {EMPLOYMENT_STATUS.map(({status, label}) => (
{({checked}) => ( <RadioGroup.Option value={status} key={status}>
<span {({checked}) => (
className={clsx( <span
"px-6 py-4 w-40 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer", className={clsx(
"transition duration-300 ease-in-out", "px-6 py-4 w-40 md:w-48 flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
!checked "transition duration-300 ease-in-out",
? "bg-white border-mti-gray-platinum" !checked
: "bg-mti-purple-light border-mti-purple-dark text-white", ? "bg-white border-mti-gray-platinum"
)}> : "bg-mti-purple-light border-mti-purple-dark text-white",
{label} )}>
</span> {label}
)} </span>
</RadioGroup.Option> )}
))} </RadioGroup.Option>
</RadioGroup> ))}
</div> </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="flex flex-col gap-8 w-full">
<div className="relative flex flex-col gap-3 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>

14
src/interfaces/user.ts
View File

@@ -14,7 +14,6 @@ export interface BasicUser {
type: Type; type: Type;
bio: string; bio: string;
isVerified: boolean; isVerified: boolean;
demographicInformation?: DemographicInformation;
subscriptionExpirationDate?: null | Date; subscriptionExpirationDate?: null | Date;
registrationDate?: Date; registrationDate?: Date;
status: "active" | "disabled" | "paymentDue"; status: "active" | "disabled" | "paymentDue";
@@ -22,28 +21,34 @@ export interface BasicUser {
export interface StudentUser extends BasicUser { export interface StudentUser extends BasicUser {
type: "student"; type: "student";
demographicInformation?: DemographicInformation;
} }
export interface TeacherUser extends BasicUser { export interface TeacherUser extends BasicUser {
type: "teacher"; type: "teacher";
demographicInformation?: DemographicInformation;
} }
export interface CorporateUser extends BasicUser { export interface CorporateUser extends BasicUser {
type: "corporate"; type: "corporate";
corporateInformation: CorporateInformation; corporateInformation: CorporateInformation;
demographicInformation?: DemographicCorporateInformation;
} }
export interface AgentUser extends BasicUser { export interface AgentUser extends BasicUser {
type: "agent"; type: "agent";
agentInformation: AgentInformation; agentInformation: AgentInformation;
demographicInformation?: DemographicInformation;
} }
export interface AdminUser extends BasicUser { export interface AdminUser extends BasicUser {
type: "admin"; type: "admin";
demographicInformation?: DemographicInformation;
} }
export interface DeveloperUser extends BasicUser { export interface DeveloperUser extends BasicUser {
type: "developer"; type: "developer";
demographicInformation?: DemographicInformation;
} }
export interface CorporateInformation { export interface CorporateInformation {
@@ -73,6 +78,13 @@ export interface DemographicInformation {
employment: EmploymentStatus; employment: EmploymentStatus;
} }
export interface DemographicCorporateInformation {
country: string;
phone: string;
gender: Gender;
position: string;
}
export type Gender = "male" | "female" | "other"; export type Gender = "male" | "female" | "other";
export type EmploymentStatus = "employed" | "student" | "self-employed" | "unemployed" | "retired" | "other"; export type EmploymentStatus = "employed" | "student" | "self-employed" | "unemployed" | "retired" | "other";
export const EMPLOYMENT_STATUS: {status: EmploymentStatus; label: string}[] = [ export const EMPLOYMENT_STATUS: {status: EmploymentStatus; label: string}[] = [

20
src/pages/(admin)/Lists/UserList.tsx
View File

@@ -242,14 +242,15 @@ export default function UserList({user, filter}: {user: User; filter?: (user: Us
cell: (info) => info.getValue() || "Not available", cell: (info) => info.getValue() || "Not available",
enableSorting: true, enableSorting: true,
}), }),
columnHelper.accessor("demographicInformation.employment", { columnHelper.accessor((x) => (x.type === "corporate" ? x.demographicInformation?.position : x.demographicInformation?.employment), {
id: "employment",
header: ( header: (
<button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "employment"))}> <button className="flex gap-2 items-center" onClick={() => setSorter((prev) => selectSorter(prev, "employment"))}>
<span>Employment</span> <span>Employment/Position</span>
<SorterArrow name="employment" /> <SorterArrow name="employment" />
</button> </button>
) as any, ) as any,
cell: (info) => capitalize(info.getValue()) || "Not available", cell: (info) => (info.row.original.type === "corporate" ? info.getValue() : capitalize(info.getValue())) || "Not available",
enableSorting: true, enableSorting: true,
}), }),
columnHelper.accessor("demographicInformation.gender", { columnHelper.accessor("demographicInformation.gender", {
@@ -419,13 +420,14 @@ export default function UserList({user, filter}: {user: User; filter?: (user: Us
} }
if (sorter === "employment" || sorter === reverseString("employment")) { if (sorter === "employment" || sorter === reverseString("employment")) {
if (!a.demographicInformation?.employment && b.demographicInformation?.employment) return sorter === "employment" ? -1 : 1; const aSortingItem = a.type === "corporate" ? a.demographicInformation?.position : a.demographicInformation?.employment;
if (a.demographicInformation?.employment && !b.demographicInformation?.employment) return sorter === "employment" ? 1 : -1; const bSortingItem = b.type === "corporate" ? b.demographicInformation?.position : b.demographicInformation?.employment;
if (!a.demographicInformation?.employment && !b.demographicInformation?.employment) return 0;
return sorter === "employment" if (!aSortingItem && bSortingItem) return sorter === "employment" ? -1 : 1;
? a.demographicInformation!.employment.localeCompare(b.demographicInformation!.employment) if (aSortingItem && !bSortingItem) return sorter === "employment" ? 1 : -1;
: b.demographicInformation!.employment.localeCompare(a.demographicInformation!.employment); if (!aSortingItem && !bSortingItem) return 0;
return sorter === "employment" ? aSortingItem!.localeCompare(bSortingItem!) : bSortingItem!.localeCompare(aSortingItem!);
} }
if (sorter === "gender" || sorter === reverseString("gender")) { if (sorter === "gender" || sorter === reverseString("gender")) {

68
src/pages/profile.tsx
View File

@@ -63,6 +63,7 @@ export default function Home() {
const [phone, setPhone] = useState<string>(); const [phone, setPhone] = useState<string>();
const [gender, setGender] = useState<Gender>(); const [gender, setGender] = useState<Gender>();
const [employment, setEmployment] = useState<EmploymentStatus>(); const [employment, setEmployment] = useState<EmploymentStatus>();
const [position, setPosition] = useState<string>();
const profilePictureInput = useRef(null); const profilePictureInput = useRef(null);
@@ -86,7 +87,8 @@ export default function Home() {
setCountry(user.demographicInformation?.country); setCountry(user.demographicInformation?.country);
setPhone(user.demographicInformation?.phone); setPhone(user.demographicInformation?.phone);
setGender(user.demographicInformation?.gender); setGender(user.demographicInformation?.gender);
setEmployment(user.demographicInformation?.employment); setEmployment(user.type === "corporate" ? undefined : user.demographicInformation?.employment);
setPosition(user.type === "corporate" ? user.demographicInformation?.position : undefined);
} }
}, [user]); }, [user]);
@@ -135,7 +137,8 @@ export default function Home() {
demographicInformation: { demographicInformation: {
phone, phone,
country, country,
employment, employment: user?.type === "corporate" ? undefined : employment,
position: user?.type === "corporate" ? position : undefined,
gender, gender,
}, },
}); });
@@ -247,30 +250,43 @@ export default function Home() {
/> />
</div> </div>
<div className="flex flex-col md:flex-row gap-8 w-full"> <div className="flex flex-col md:flex-row gap-8 w-full">
<div className="relative flex flex-col gap-3 w-full"> {user.type === "corporate" && (
<label className="font-normal text-base text-mti-gray-dim">Employment Status *</label> <Input
<RadioGroup name="position"
value={employment} onChange={setPosition}
onChange={setEmployment} defaultValue={position}
className="grid grid-cols-2 items-center gap-4 place-items-center"> type="text"
{EMPLOYMENT_STATUS.map(({status, label}) => ( label="Position"
<RadioGroup.Option value={status} key={status}> placeholder="CEO, Head of Marketing..."
{({checked}) => ( required
<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", {user.type !== "corporate" && (
"transition duration-300 ease-in-out", <div className="relative flex flex-col gap-3 w-full">
!checked <label className="font-normal text-base text-mti-gray-dim">Employment Status *</label>
? "bg-white border-mti-gray-platinum" <RadioGroup
: "bg-mti-purple-light border-mti-purple-dark text-white", value={employment}
)}> onChange={setEmployment}
{label} className="grid grid-cols-2 items-center gap-4 place-items-center">
</span> {EMPLOYMENT_STATUS.map(({status, label}) => (
)} <RadioGroup.Option value={status} key={status}>
</RadioGroup.Option> {({checked}) => (
))} <span
</RadioGroup> className={clsx(
</div> "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>
)}
<div className="flex flex-col gap-8 w-full"> <div className="flex flex-col gap-8 w-full">
<div className="relative flex flex-col gap-3 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>