Added the ability to view the expiry date on the profile page (as well as some warnings on the dashboard)

src/components/Navbar.tsx

@@ -6,6 +6,8 @@ import {useRouter} from "next/router";
 import axios from "axios";
 import {RiLogoutBoxFill} from "react-icons/ri";
 import {BsPower} from "react-icons/bs";
+import clsx from "clsx";
+import moment from "moment";
 
 interface Props {
 	user: User;
@@ -19,10 +21,22 @@ export default function Navbar({user, navDisabled = false, focusMode = false, on
 	const disableNavigation = preventNavigation(navDisabled, focusMode);
 	const router = useRouter();
 
-	const logout = async () => {
-		axios.post("/api/logout").finally(() => {
-			setTimeout(() => router.reload(), 500);
-		});
+	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";
+	};
+
+	const showExpirationDate = () => {
+		if (!user.subscriptionExpirationDate) return false;
+
+		const momentDate = moment(user.subscriptionExpirationDate);
+		const today = moment(new Date());
+
+		return today.add(7, "days").isAfter(momentDate);
 	};
 
 	return (
@@ -31,12 +45,23 @@ export default function Navbar({user, navDisabled = false, focusMode = false, on
 				<img src="/logo.png" alt="EnCoach's Logo" className="w-12" />
 				<h1 className="font-bold text-2xl w-1/6 -lg:hidden">EnCoach</h1>
 			</Link>
-			<div className="flex justify-between lg:w-5/6 lg:mr-8">
-				<input
-					type="text"
-					placeholder="Search..."
-					className="rounded-full py-4 px-6 border border-mti-gray-platinum outline-none -lg:hidden"
-				/>
+			<div className="flex justify-end gap-4 lg:w-5/6 lg:mr-8">
+				{showExpirationDate() && (
+					<Link
+						href="https://encoach.com/join"
+						data-tip="Expiry date"
+						className={clsx(
+							"py-2 px-6 w-fit flex justify-center text-sm font-normal rounded-full border focus:outline-none cursor-pointer",
+							"transition duration-300 ease-in-out tooltip tooltip-bottom",
+							!user.subscriptionExpirationDate
+								? "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")}
+					</Link>
+				)}
 				<Link href={disableNavigation ? "" : "/profile"} className="flex gap-6 items-center justify-end">
 					<img src={user.profilePicture} alt={user.name} className="w-10 h-10 rounded-full object-cover" />
 					<span className="text-right -lg:hidden">{user.name}</span>

src/pages/profile.tsx

@@ -18,6 +18,7 @@ import countryCodes from "country-codes-list";
 import {countries, TCountries} from "countries-list";
 import CountrySelect from "@/components/Low/CountrySelect";
 import {shouldRedirectHome} from "@/utils/navigation.disabled";
+import moment from "moment";
 
 export const getServerSideProps = withIronSessionSsr(({req, res}) => {
 	const user = req.session.user;
@@ -67,6 +68,15 @@ export default function Home() {
 
 	const {user, mutateUser} = useUser({redirectTo: "/login"});
 
+	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";
+	};
+
 	useEffect(() => {
 		if (user) {
 			setName(user.name);
@@ -237,52 +247,70 @@ export default function Home() {
 												))}
 											</RadioGroup>
 										</div>
-										<div className="relative flex flex-col gap-3 w-full">
-											<label className="font-normal text-base text-mti-gray-dim">Gender *</label>
-											<RadioGroup value={gender} onChange={setGender} className="flex flex-row gap-4 justify-between">
-												<RadioGroup.Option value="male">
-													{({checked}) => (
-														<span
-															className={clsx(
-																"px-6 py-4 w-28 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",
-															)}>
-															Male
-														</span>
-													)}
-												</RadioGroup.Option>
-												<RadioGroup.Option value="female">
-													{({checked}) => (
-														<span
-															className={clsx(
-																"px-6 py-4 w-28 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",
-															)}>
-															Female
-														</span>
-													)}
-												</RadioGroup.Option>
-												<RadioGroup.Option value="other">
-													{({checked}) => (
-														<span
-															className={clsx(
-																"px-6 py-4 w-28 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",
-															)}>
-															Other
-														</span>
-													)}
-												</RadioGroup.Option>
-											</RadioGroup>
+										<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>
+												<RadioGroup value={gender} onChange={setGender} className="flex flex-row gap-4 justify-between">
+													<RadioGroup.Option value="male">
+														{({checked}) => (
+															<span
+																className={clsx(
+																	"px-6 py-4 w-28 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",
+																)}>
+																Male
+															</span>
+														)}
+													</RadioGroup.Option>
+													<RadioGroup.Option value="female">
+														{({checked}) => (
+															<span
+																className={clsx(
+																	"px-6 py-4 w-28 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",
+																)}>
+																Female
+															</span>
+														)}
+													</RadioGroup.Option>
+													<RadioGroup.Option value="other">
+														{({checked}) => (
+															<span
+																className={clsx(
+																	"px-6 py-4 w-28 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",
+																)}>
+																Other
+															</span>
+														)}
+													</RadioGroup.Option>
+												</RadioGroup>
+											</div>
+											<div className="flex flex-col gap-3">
+												<label className="font-normal text-base text-mti-gray-dim">Expiry Date</label>
+												<Link
+													href="https://encoach.com/join"
+													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",
+														!user.subscriptionExpirationDate
+															? "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")}
+												</Link>
+											</div>
 										</div>
 									</div>
 								</form>