-
-
- Map Columns for Device Claiming
-
-
- File: {filePreview.fileName}
-
+
+
+
+ Map Columns for Device Claiming
+
+
+ File: {filePreview.fileName}
+
+
+
@@ -178,6 +180,7 @@ export const FileUploadParser: React.FC
= ({ onFilesParse
const [isImporting, setIsImporting] = useState(false);
const [filePreview, setFilePreview] = useState(null);
const fileInputRef = useRef(null);
+ const { showBanner } = useBanner();
const handleFileImport = async (e: React.ChangeEvent) => {
const file = e.target.files?.[0];
@@ -185,16 +188,13 @@ export const FileUploadParser: React.FC = ({ onFilesParse
const fileExtension = file.name.split('.').pop()?.toLowerCase();
if (!['csv', 'xlsx', 'xls'].includes(fileExtension || '')) {
- ReusableToast({
- message: 'Invalid file format. Please upload a CSV or Excel file.',
- type: 'ERROR',
- });
+ showBanner({ severity: 'error', message: 'Invalid file format. Please upload a CSV or Excel file.', scoped: true });
e.target.value = '';
return;
}
if (file.size > 5 * 1024 * 1024) {
- ReusableToast({ message: 'File too large. Maximum size is 5MB.', type: 'ERROR' });
+ showBanner({ severity: 'error', message: 'File too large. Maximum size is 5MB.', scoped: true });
e.target.value = '';
return;
}
@@ -221,10 +221,7 @@ export const FileUploadParser: React.FC = ({ onFilesParse
setIsImporting(false);
},
error: (error) => {
- ReusableToast({
- message: `Error parsing CSV: ${error.message}`,
- type: 'ERROR',
- });
+ showBanner({ severity: 'error', message: `Error parsing CSV: ${error.message}`, scoped: true });
setIsImporting(false);
},
});
@@ -247,16 +244,13 @@ export const FileUploadParser: React.FC = ({ onFilesParse
setIsImporting(false);
};
reader.onerror = () => {
- ReusableToast({ message: 'Error reading Excel file', type: 'ERROR' });
+ showBanner({ severity: 'error', message: 'Error reading Excel file', scoped: true });
setIsImporting(false);
};
reader.readAsBinaryString(file);
}
} catch {
- ReusableToast({
- message: 'Error importing file. Please ensure papaparse and xlsx libraries are installed.',
- type: 'ERROR',
- });
+ showBanner({ severity: 'error', message: 'Error importing file. Please ensure papaparse and xlsx libraries are installed.', scoped: true });
setIsImporting(false);
}
@@ -285,10 +279,7 @@ export const FileUploadParser: React.FC = ({ onFilesParse
.filter((device) => device.device_name.length > 0 && device.claim_token.length > 0);
if (devices.length === 0) {
- ReusableToast({
- message: 'No valid devices found in the selected columns',
- type: 'ERROR',
- });
+ showBanner({ severity: 'error', message: 'No valid devices found in the selected columns', scoped: true });
return;
}
@@ -307,6 +298,7 @@ export const FileUploadParser: React.FC = ({ onFilesParse
filePreview={filePreview}
onConfirm={handleConfirmImport}
onCancel={handleCancelImport}
+ showBanner={showBanner}
/>
)}
diff --git a/src/vertex/components/features/cohorts/cohort-detail-card.tsx b/src/vertex/components/features/cohorts/cohort-detail-card.tsx
index 76a4d0ca87..e895f87a91 100644
--- a/src/vertex/components/features/cohorts/cohort-detail-card.tsx
+++ b/src/vertex/components/features/cohorts/cohort-detail-card.tsx
@@ -4,6 +4,7 @@ import ReusableButton from "@/components/shared/button/ReusableButton";
import { AqCopy01, AqEdit01 } from "@airqo/icons-react";
import { Switch } from "@/components/ui/switch";
import { useBanner } from "@/context/banner-context";
+import { useClipboard } from "@/core/hooks/useClipboard";
import { getApiErrorMessage } from "@/core/utils/getApiErrorMessage";
import { useBannerWithDelay } from "@/core/hooks/useBannerWithDelay";
import { useEffect, useState } from "react";
@@ -44,6 +45,7 @@ const CohortDetailsCard: React.FC = ({
);
const { showBanner } = useBanner();
+ const { handleCopy } = useClipboard({ successMessage: 'Cohort ID copied to clipboard' });
const { showBannerWithDelay } = useBannerWithDelay();
const { mutateAsync: updateCohort, isPending } = useUpdateCohortDetails();
const { data: originalData } = useOriginalCohort(id, { enabled: !!isDuplicate });
@@ -197,15 +199,7 @@ const CohortDetailsCard: React.FC = ({
-
-
-
Download for Windows
-
-
+
+
+
Download for Windows
+
+
diff --git a/src/vertex/core/auth/authProvider.tsx b/src/vertex/core/auth/authProvider.tsx
index 37126e0e46..2d695e813a 100644
--- a/src/vertex/core/auth/authProvider.tsx
+++ b/src/vertex/core/auth/authProvider.tsx
@@ -19,7 +19,7 @@ import {
} from '@/core/redux/slices/userSlice';
import { users } from '@/core/apis/users';
import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage';
-import ReusableToast from '@/components/shared/toast/ReusableToast';
+import { useBanner } from '@/context/banner-context';
import SessionLoadingState from '@/components/layout/loading/session-loading';
import {
getLastActiveGroupId,
@@ -209,6 +209,7 @@ function UserDataFetcher({ children }: { children: React.ReactNode }) {
const { data: session } = useSession();
const dispatch = useAppDispatch();
const isOnline = useOnlineStatus();
+ const { showBanner } = useBanner();
const {
activeGroup,
isInitialized,
@@ -263,12 +264,9 @@ function UserDataFetcher({ children }: { children: React.ReactNode }) {
// Reset toast flag when back online
if (isOnline && hasShownOfflineToastRef.current) {
hasShownOfflineToastRef.current = false;
- ReusableToast({
- message: 'Connection restored.',
- type: 'SUCCESS',
- });
+ showBanner({ severity: 'success', message: 'Connection restored.', scoped: false });
}
- }, [isOnline, cachedUser, fetchStatus]);
+ }, [isOnline, cachedUser, fetchStatus, showBanner]);
// Handle errors (only real errors, not offline state)
useEffect(() => {
@@ -285,13 +283,10 @@ function UserDataFetcher({ children }: { children: React.ReactNode }) {
if (cachedUser) {
// ignore
} else {
- ReusableToast({
- message: `Could not load user details: ${getApiErrorMessage(error)}`,
- type: 'ERROR',
- });
+ showBanner({ severity: 'error', message: `Could not load user details: ${getApiErrorMessage(error)}`, scoped: false });
}
}
- }, [isError, error, isOnline, cachedUser, fetchStatus]);
+ }, [isError, error, isOnline, cachedUser, fetchStatus, showBanner]);
// Handle successful data fetching
useEffect(() => {
@@ -377,6 +372,7 @@ function AuthWrapper({ children }: { children: React.ReactNode }) {
const pathname = usePathname();
const isLoggingOut = useAppSelector((state) => state.user.isLoggingOut);
const logout = useLogout();
+ const { showBanner } = useBanner();
const [hasHandledUnauthorized, setHasHandledUnauthorized] = useState(false);
const [backendSessionAttempted, setBackendSessionAttempted] = useState(false);
const hasStartedLogoutRef = useRef(false);
@@ -446,10 +442,7 @@ function AuthWrapper({ children }: { children: React.ReactNode }) {
}
logger.info('[AuthWrapper] Account deletion detected, logging out...');
- ReusableToast({
- message: 'Your account has been deleted. You have been logged out.',
- type: 'ERROR',
- });
+ showBanner({ severity: 'error', message: 'Your account has been deleted. You have been logged out.', scoped: false });
logout();
return true;
}
@@ -610,10 +603,7 @@ function AuthWrapper({ children }: { children: React.ReactNode }) {
'[AuthWrapper] Multiple 401s with valid session - possible account deletion'
);
setHasHandledUnauthorized(true);
- ReusableToast({
- message: 'Your session has expired. Please log in again.', // more user-friendly message
- type: 'ERROR',
- });
+ showBanner({ severity: 'error', message: 'Your session has expired. Please log in again.', scoped: false });
logout();
return;
}
@@ -630,17 +620,14 @@ function AuthWrapper({ children }: { children: React.ReactNode }) {
// Session refresh failed - token expired
logger.info('[AuthWrapper] Session expired, logging out');
setHasHandledUnauthorized(true);
- ReusableToast({
- message: 'Your session has expired. Please log in again.',
- type: 'ERROR',
- });
+ showBanner({ severity: 'error', message: 'Your session has expired. Please log in again.', scoped: false });
logout();
} catch (error) {
logger.error('[AuthWrapper] Error handling unauthorized event', { error });
setHasHandledUnauthorized(true);
logout();
}
- }, [logout, update, isPublicRoute, hasHandledUnauthorized, isLoggingOut, checkAccountDeletionFlag]);
+ }, [logout, update, isPublicRoute, hasHandledUnauthorized, isLoggingOut, checkAccountDeletionFlag,showBanner]);
// Listen for auth token expiration events
useEffect(() => {
diff --git a/src/vertex/core/hooks/useClipboard.ts b/src/vertex/core/hooks/useClipboard.ts
index 82a1624e15..2a8f3fda95 100644
--- a/src/vertex/core/hooks/useClipboard.ts
+++ b/src/vertex/core/hooks/useClipboard.ts
@@ -1,4 +1,5 @@
import { useBanner } from '@/context/banner-context';
+import { toast } from '@/components/shared/toast/ReusableToast';
interface UseClipboardOptions {
successMessage?: string;
@@ -17,7 +18,7 @@ export const useClipboard = (options?: UseClipboardOptions) => {
const handleCopy = async (text: string) => {
try {
await navigator.clipboard.writeText(text);
- showBanner({ severity: 'success', message: successMessage, scoped });
+ toast.success(successMessage);
} catch {
showBanner({ severity: 'error', message: errorMessage, scoped });
}
diff --git a/src/vertex/core/hooks/useRecentlyVisited.ts b/src/vertex/core/hooks/useRecentlyVisited.ts
index 2e54d5b349..93676120d1 100644
--- a/src/vertex/core/hooks/useRecentlyVisited.ts
+++ b/src/vertex/core/hooks/useRecentlyVisited.ts
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
import { useAppSelector } from '@/core/redux/hooks';
import { usePathname } from 'next/navigation';
import { ROUTE_LINKS } from '@/core/routes';
-import ReusableToast from '@/components/shared/toast/ReusableToast';
+import { useBanner } from '@/context/banner-context';
export interface RecentPage {
label: string;
@@ -45,6 +45,7 @@ export const useRecentlyVisited = () => {
const [isLoaded, setIsLoaded] = useState(false);
const userDetails = useAppSelector((state) => state.user.userDetails);
const userId = userDetails?._id;
+ const { showBanner } = useBanner();
const storageKey = userId ? `${STORAGE_KEY}_${userId}` : null;
@@ -63,11 +64,11 @@ export const useRecentlyVisited = () => {
setVisitedPages([]);
}
} catch (error) {
- ReusableToast({ message: "Failed to load recently visited pages", type: "ERROR" });
+ showBanner({ severity: 'error', message: 'Failed to load recently visited pages', scoped: false });
} finally {
setIsLoaded(true);
}
- }, [storageKey]);
+ }, [storageKey,showBanner]);
// Update visited pages on pathname change
useEffect(() => {