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 () => {
+	const expirationDateColor = (date: Date) => {
-		axios.post("/api/logout").finally(() => {
+		const momentDate = moment(date);
-			setTimeout(() => router.reload(), 500);
+		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">
+			<div className="flex justify-end gap-4 lg:w-5/6 lg:mr-8">
-				<input
+				{showExpirationDate() && (
-					type="text"
+					<Link
-					placeholder="Search..."
+						href="https://encoach.com/join"
-					className="rounded-full py-4 px-6 border border-mti-gray-platinum outline-none -lg:hidden"
+						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,6 +247,7 @@ export default function Home() {
 												))}
 											</RadioGroup>
 										</div>
+										<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">
@@ -284,6 +295,23 @@ export default function Home() {
 													</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>
 							</div>