✨ extra gb clickable on status label

src/popup/popup.css

@@ -80,6 +80,16 @@ h1 sup {
 	color: #1b5e20;
 }
 
+.clickable-extra-gb {
+	text-decoration: underline;
+	cursor: pointer;
+}
+
+.status-normal-extra {
+	background-color: #4caf50;
+	color: white;
+}
+
 .status-throttled {
 	background-color: #fff3e0;
 	color: #e65100;

src/popup/popup.js

@@ -6,6 +6,7 @@ import {
 	getStatusClass,
 	createDataGroup,
 	checkExtraGB,
+	navigateToExtraGBGroup,
 } from '../utils/helpers.js';
 
 const USE_MOCK_DATA = __USE_MOCK_DATA__;
@@ -277,9 +278,25 @@ const updateAccountInfo = (accountId, speedStatus, combinedData) => {
 	if (speedStatusElement && speedStatus) {
 		const hasExtraGB = checkExtraGB(combinedData);
 		const formattedStatus = formatSpeedStatus(speedStatus, hasExtraGB);
-		speedStatusElement.textContent = formattedStatus;
-		speedStatusElement.className = `status-pill ${getStatusClass(speedStatus)}`;
-		console.log('Speed Status:', formattedStatus);
+		const statusClass = getStatusClass(speedStatus, hasExtraGB);
+
+		if (formattedStatus.hasClickable) {
+			speedStatusElement.innerHTML = `${formattedStatus.text}<span class="clickable-extra-gb">${formattedStatus.clickable}</span>`;
+			const clickableElement = speedStatusElement.querySelector(
+				'.clickable-extra-gb'
+			);
+			clickableElement.addEventListener('click', () => {
+				navigateToExtraGBGroup(goToPage);
+			});
+		} else {
+			speedStatusElement.textContent = formattedStatus.text;
+		}
+
+		speedStatusElement.className = `status-pill ${statusClass}`;
+		console.log(
+			'Speed Status:',
+			formattedStatus.text + (formattedStatus.clickable || '')
+		);
 
 		sendEvent('speed_status_checked', {
 			speed_status: speedStatus.toLowerCase(),

src/utils/helpers.js

@@ -52,32 +52,63 @@ export const checkExtraGB = (combinedData) => {
  * Formats the speed status into a readable string, including Extra GB information if applicable.
  * @param {string} status - The speed status to format.
  * @param {boolean} hasExtraGB - Whether the user has remaining Extra GB.
- * @returns {string} The formatted speed status.
+ * @returns {Object} An object containing the formatted status and whether it includes a clickable part.
  */
 export const formatSpeedStatus = (status, hasExtraGB = false) => {
 	const lowerStatus = status.toLowerCase();
 	if (lowerStatus === 'normal') {
-		return hasExtraGB ? 'Speed is Normal with Extra GB' : 'Speed is Normal';
+		if (hasExtraGB) {
+			return {
+				text: 'Speed is Normal with ',
+				clickable: 'Extra GB',
+				hasClickable: true,
+			};
+		}
+		return { text: 'Speed is Normal', hasClickable: false };
 	}
 	if (['throttle', 'throttled'].includes(lowerStatus)) {
-		return 'Speed is Throttled';
+		return { text: 'Speed is Throttled', hasClickable: false };
 	}
-	return `${status.charAt(0).toUpperCase()}${lowerStatus.slice(1)}`;
+	return {
+		text: `${status.charAt(0).toUpperCase()}${lowerStatus.slice(1)}`,
+		hasClickable: false,
+	};
 };
 
 /**
  * Gets the CSS class for a given speed status.
  * @param {string} status - The speed status.
+ * @param {boolean} hasExtraGB - Whether the user has remaining Extra GB.
  * @returns {string} The corresponding CSS class.
  */
-export const getStatusClass = (status) => {
+export const getStatusClass = (status, hasExtraGB = false) => {
 	const lowerStatus = status.toLowerCase();
-	if (lowerStatus === 'normal') return 'status-normal';
+	if (lowerStatus === 'normal')
+		return hasExtraGB ? 'status-normal-extra' : 'status-normal';
 	if (['throttle', 'throttled'].includes(lowerStatus))
 		return 'status-throttled';
 	return 'status-other';
 };
 
+/**
+ * Navigates to the Extra GB group in the usage data display.
+ * @param {Function} goToPage - Function to navigate to a specific page.
+ */
+export const navigateToExtraGBGroup = (goToPage) => {
+	const groups = document.querySelectorAll('.data-group');
+	let extraGBIndex = -1;
+
+	groups.forEach((group, index) => {
+		if (group.dataset.groupName === 'Extra GB') {
+			extraGBIndex = index;
+		}
+	});
+
+	if (extraGBIndex !== -1) {
+		goToPage(extraGBIndex);
+	}
+};
+
 /**
  * Creates a data group element.
  * @param {string} serviceName - The name of the service.