Add: link in popup to unlock advanced tasks

src/pages/content/getProjectData.ts

@@ -22,14 +22,26 @@ function isQuizAvailable(): boolean {
 	return false;
 }
 
+function isAdvancedTasksLocked(): boolean {
+	// Check if a form to unlock advanced tasks is present on the page
+	const unlockForm = document.querySelector("form.button_to[action$='/unlock_optionals']");
+
+	return !!unlockForm;
+}
+
 function getProjectData(
-	sendResponse: (data: { remainingTimeInMs: number; quizAvailable: boolean }) => void
+	sendResponse: (data: {
+		remainingTimeInMs: number;
+		quizAvailable: boolean;
+		advancedTasksLocked: boolean;
+	}) => void
 ): void {
 	if (document.querySelector("#project-metadata")) {
 		const remainingTimeInMs = getRemainingTime();
 		const quizAvailable = isQuizAvailable();
+		const advancedTasksLocked = isAdvancedTasksLocked();
 
-		sendResponse({ remainingTimeInMs, quizAvailable });
+		sendResponse({ remainingTimeInMs, quizAvailable, advancedTasksLocked });
 	}
 }
 

src/pages/content/index.ts

@@ -5,6 +5,7 @@ import runCheckedTasks from "./runCheckedTasks";
 import scrollToTask from "./scrollToTask";
 import copyCmdFiles from "./scrapeFilesNames";
 import checkerRunning from "./checkerRunning";
+import unlockAdvancedTasks from "./unlockAdvancedTasks";
 import { LocalStorage } from "@src/shared/storages/localStorage";
 import { setBtnCollapseTask, toggleCollapseTasks } from "./collapseTasks";
 
@@ -38,6 +39,8 @@ chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
 		getProjectData(sendResponse);
 	} else if (request.message === "get-task-status") {
 		getTaskData(sendResponse);
+	} else if (request.message === "unlock-advanced-tasks") {
+		unlockAdvancedTasks(sendResponse);
 	} else if (request.message === "run-checker") {
 		runCheckedTasks(request, sendResponse);
 	} else if (request.message === "scrape-file-names") {

src/pages/content/unlockAdvancedTasks.ts

@@ -0,0 +1,14 @@
+const unlockAdvancedTasks = (sendResponse) => {
+	try {
+		const unlockForm = document.querySelector("form.button_to[action$='/unlock_optionals']");
+
+		(unlockForm?.querySelector("input[type='submit']") as HTMLElement).click();
+
+		sendResponse({ success: true });
+	} catch (err) {
+		console.warn(err);
+		sendResponse({ success: false });
+	}
+};
+
+export default unlockAdvancedTasks;

src/pages/popup/Popup.css

@@ -44,13 +44,17 @@ button:focus:enabled {
 	box-shadow: rgba(94, 218, 11, 0.7) 0 80px 0px 2px inset;
 }
 
-.github {
-	text-align: center;
-	position: fixed;
-	bottom: 0;
-	width: 100%;
-}
-
-.github a {
-	color: white;
+#unlock-advanced-tasks {
+	text-decoration: none;
+	color: #ccc;
+	font-size: 0.9rem;
+	color: #ffffffac;
+	background-color: #77777730;
+	padding-inline: 0.25rem;
+	border-radius: 5px;
+}
+#unlock-advanced-tasks .icon {
+	font-size: 1.1rem;
+	vertical-align: bottom;
+	margin-left: 0.125rem;
 }

src/pages/popup/Popup.tsx

@@ -5,25 +5,44 @@ import { Checker } from "./components/Checker";
 import { DataProvider } from "./context/DataContext";
 import { Collapse } from "./components/Collapse";
 import Socials from "./components/Socials";
+import { sendMessageToContent } from "@src/shared/utils/messages";
+import { TbRefresh } from "react-icons/tb";
 import "@pages/popup/Popup.css";
 
 export const Popup: React.FC = () => {
 	const [isWindowLoaded, setIsWindowLoaded] = useState(false);
+	const [advancedTasksLocked, setAdvancedTasksLocked] = useState(false);
 
 	useEffect(() => {
 		chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
 			if (tabs[0].status === "complete") {
 				setIsWindowLoaded(true);
 			}
 		});
+
+		sendMessageToContent({ message: "get-project-data" }, (response) => {
+			setAdvancedTasksLocked(response.advancedTasksLocked);
+		});
 	}, []);
 
 	if (!isWindowLoaded) {
 		// ADD: screen loader
 	}
 
+	const handleUnlockClick = () => {
+		sendMessageToContent({ message: "unlock-advanced-tasks" }, (response) => {
+			response.success && window.close(); // close the popup
+		});
+	};
+
 	return (
 		<>
+			{advancedTasksLocked && (
+				<a id="unlock-advanced-tasks" className="badge" href="#" onClick={handleUnlockClick}>
+					Unlock Advanced Tasks
+					<TbRefresh className="icon" />
+				</a>
+			)}
 			<Socials />
 			<GetFiles />
 			<DataProvider>