ENCOA-128: Display the position of the Corporate in the topbar

src/components/Navbar.tsx

@@ -19,17 +19,7 @@ import TicketSubmission from "./High/TicketSubmission";
 import {Module} from "@/interfaces";
 import Badge from "./Low/Badge";
 
-import {
+import {BsArrowRepeat, BsBook, BsCheck, BsCheckCircle, BsClipboard, BsHeadphones, BsMegaphone, BsPen, BsXCircle} from "react-icons/bs";
-  BsArrowRepeat,
-  BsBook,
-  BsCheck,
-  BsCheckCircle,
-  BsClipboard,
-  BsHeadphones,
-  BsMegaphone,
-  BsPen,
-  BsXCircle,
-} from "react-icons/bs";
 interface Props {
 	user: User;
 	navDisabled?: boolean;
@@ -39,13 +29,7 @@ interface Props {
 }
 
 /* eslint-disable @next/next/no-img-element */
-export default function Navbar({
+export default function Navbar({user, path, navDisabled = false, focusMode = false, onFocusLayerMouseEnter}: Props) {
-  user,
-  path,
-  navDisabled = false,
-  focusMode = false,
-  onFocusLayerMouseEnter,
-}: Props) {
 	const [isMenuOpen, setIsMenuOpen] = useState(false);
 	const [disablePaymentPage, setDisablePaymentPage] = useState(true);
 	const [isTicketOpen, setIsTicketOpen] = useState(false);
@@ -58,12 +42,9 @@ export default function Navbar({
 		const momentDate = moment(date);
 		const today = moment(new Date());
 
-    if (today.add(1, "days").isAfter(momentDate))
+		if (today.add(1, "days").isAfter(momentDate)) return "!bg-mti-red-ultralight border-mti-red-light";
-      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(3, "days").isAfter(momentDate))
+		if (today.add(7, "days").isAfter(momentDate)) return "!bg-mti-orange-ultralight border-mti-orange-light";
-      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 showExpirationDate = () => {
@@ -76,11 +57,8 @@ export default function Navbar({
 	};
 
 	useEffect(() => {
-    if (user.type !== "student" && user.type !== "teacher")
+		if (user.type !== "student" && user.type !== "teacher") return setDisablePaymentPage(false);
-      return setDisablePaymentPage(false);
+		isUserFromCorporate(user.id).then((result) => setDisablePaymentPage(result));
-    isUserFromCorporate(user.id).then((result) =>
-      setDisablePaymentPage(result)
-    );
 	}, [user]);
 
 	const badges = [
@@ -114,32 +92,15 @@ export default function Navbar({
 
 	return (
 		<>
-      <Modal
+			<Modal isOpen={isTicketOpen} onClose={() => setIsTicketOpen(false)} title="Submit a ticket">
-        isOpen={isTicketOpen}
+				<TicketSubmission user={user} page={router.asPath} onClose={() => setIsTicketOpen(false)} />
-        onClose={() => setIsTicketOpen(false)}
-        title="Submit a ticket"
-      >
-        <TicketSubmission
-          user={user}
-          page={router.asPath}
-          onClose={() => setIsTicketOpen(false)}
-        />
 			</Modal>
 
 			{user && (
-        <MobileMenu
+				<MobileMenu disableNavigation={disableNavigation} path={path} isOpen={isMenuOpen} onClose={() => setIsMenuOpen(false)} user={user} />
-          disableNavigation={disableNavigation}
-          path={path}
-          isOpen={isMenuOpen}
-          onClose={() => setIsMenuOpen(false)}
-          user={user}
-        />
 			)}
 			<header className="-md:justify-between -md:px-4 relative flex w-full items-center bg-transparent py-2 md:gap-12 md:py-4">
-        <Link
+				<Link href={disableNavigation ? "" : "/"} className=" flex items-center gap-8 md:px-8">
-          href={disableNavigation ? "" : "/"}
-          className=" flex items-center gap-8 md:px-8"
-        >
 					<img src="/logo.png" alt="EnCoach's Logo" className="w-8 md:w-12" />
 					<h1 className="-md:hidden w-1/6 text-2xl font-bold">EnCoach</h1>
 				</Link>
@@ -148,8 +109,9 @@ export default function Navbar({
 						badges.map((badge) => (
 							<div
 								key={badge.module}
-                className={`${badge.achieved ? `bg-ielts-${badge.module}`: 'bg-mti-gray-anti-flash'} flex h-8 w-8 items-center justify-center rounded-full`}
+								className={`${
-              >
+									badge.achieved ? `bg-ielts-${badge.module}` : "bg-mti-gray-anti-flash"
+								} flex h-8 w-8 items-center justify-center rounded-full`}>
 								{badge.icon()}
 							</div>
 						))}
@@ -157,21 +119,16 @@ export default function Navbar({
 					<button
 						className={clsx(
 							"border-mti-purple-light tooltip tooltip-bottom flex h-8 w-8 flex-col items-center justify-center rounded-full border p-1",
-              "hover:bg-mti-purple-light transition duration-300 ease-in-out hover:text-white z-20"
+							"hover:bg-mti-purple-light transition duration-300 ease-in-out hover:text-white z-20",
 						)}
 						data-tip="Submit a help/feedback ticket"
-            onClick={() => setIsTicketOpen(true)}
+						onClick={() => setIsTicketOpen(true)}>
-          >
 						<BsQuestionCircleFill />
 					</button>
 
 					{showExpirationDate() && (
 						<Link
-              href={
+							href={!!user.subscriptionExpirationDate && !disablePaymentPage ? "/payment" : ""}
-                !!user.subscriptionExpirationDate && !disablePaymentPage
-                  ? "/payment"
-                  : ""
-              }
 							data-tip="Expiry date"
 							className={clsx(
 								"flex w-fit cursor-pointer justify-center rounded-full border px-6 py-2 text-sm font-normal focus:outline-none",
@@ -179,40 +136,27 @@ export default function Navbar({
 								!user.subscriptionExpirationDate
 									? "bg-mti-green-ultralight border-mti-green-light"
 									: expirationDateColor(user.subscriptionExpirationDate),
-                "border-mti-gray-platinum bg-white"
+								"border-mti-gray-platinum bg-white",
-              )}
+							)}>
-            >
 							{!user.subscriptionExpirationDate && "Unlimited"}
-              {user.subscriptionExpirationDate &&
+							{user.subscriptionExpirationDate && moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
-                moment(user.subscriptionExpirationDate).format("DD/MM/YYYY")}
 						</Link>
 					)}
-          <Link
+					<Link href={disableNavigation ? "" : "/profile"} className="-md:hidden flex items-center justify-end gap-6">
-            href={disableNavigation ? "" : "/profile"}
+						<img src={user.profilePicture} alt={user.name} className="h-10 w-10 rounded-full object-cover" />
-            className="-md:hidden flex items-center justify-end gap-6"
-          >
-            <img
-              src={user.profilePicture}
-              alt={user.name}
-              className="h-10 w-10 rounded-full object-cover"
-            />
 						<span className="-md:hidden text-right">
-              {user.type === "corporate"
+							{user.type === "corporate" ? `${user.corporateInformation?.companyInformation.name} |` : ""} {user.name} |{" "}
-                ? `${user.corporateInformation?.companyInformation.name} |`
+							{USER_TYPE_LABELS[user.type]}
-                : ""}{" "}
+							{user.type === "corporate" &&
-              {user.name} | {USER_TYPE_LABELS[user.type]}
+								!!user.demographicInformation?.position &&
+								` | ${user.demographicInformation?.position || "N/A"}`}
 						</span>
 					</Link>
-          <div
+					<div className="cursor-pointer md:hidden" onClick={() => setIsMenuOpen(true)}>
-            className="cursor-pointer md:hidden"
-            onClick={() => setIsMenuOpen(true)}
-          >
 						<BsList className="text-mti-purple-light h-8 w-8" />
 					</div>
 				</div>
-        {focusMode && (
+				{focusMode && <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />}
-          <FocusLayer onFocusLayerMouseEnter={onFocusLayerMouseEnter} />
-        )}
 			</header>
 		</>
 	);