48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useQuery } from '@tanstack/react-query';
|
||
|
|
import { AlertTriangle } from 'lucide-react';
|
||
|
|
|
||
|
|
import { apiFetch } from '@/lib/api/client';
|
||
|
|
|
||
|
|
interface DevFlags {
|
||
|
|
emailRedirectTo: string | null;
|
||
|
|
isDev: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Single-line warning banner shown across the app whenever a dev-mode
|
||
|
|
* safety net is active (today: `EMAIL_REDIRECT_TO`). Sticky at the top
|
||
|
|
* of every authenticated surface so reps and admins can't miss that
|
||
|
|
* every outbound email is being rerouted to a single inbox.
|
||
|
|
*
|
||
|
|
* Production hides the banner entirely because env.ts refuses to boot
|
||
|
|
* with EMAIL_REDIRECT_TO set when NODE_ENV=production — the flag is
|
||
|
|
* only ever non-null in dev / staging.
|
||
|
|
*/
|
||
|
|
export function DevModeBanner() {
|
||
|
|
const { data } = useQuery<{ data: DevFlags }>({
|
||
|
|
queryKey: ['internal', 'dev-flags'],
|
||
|
|
queryFn: () => apiFetch<{ data: DevFlags }>('/api/v1/internal/dev-flags'),
|
||
|
|
staleTime: 5 * 60_000,
|
||
|
|
// Don't refetch on focus; the flag changes only on a restart.
|
||
|
|
refetchOnWindowFocus: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
const redirect = data?.data?.emailRedirectTo;
|
||
|
|
if (!redirect) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
role="alert"
|
||
|
|
className="flex items-center justify-center gap-2 border-b border-amber-300 bg-amber-50 px-3 py-1.5 text-xs font-medium text-amber-900"
|
||
|
|
title={`Every outbound email is rewritten so the recipient is ${redirect}. The original address is preserved in the recipient name as "(was: original@...)". Unset EMAIL_REDIRECT_TO in your env to disable.`}
|
||
|
|
>
|
||
|
|
<AlertTriangle className="size-3.5 shrink-0" aria-hidden />
|
||
|
|
<span>
|
||
|
|
Dev mode: outbound emails redirected to <code className="font-mono">{redirect}</code>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|