203 lines
7.8 KiB
TypeScript
203 lines
7.8 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {
|
|
RefreshCw,
|
|
LogOut,
|
|
Building2,
|
|
Clock,
|
|
ArrowLeft,
|
|
Sparkles,
|
|
} from 'lucide-react';
|
|
import { PfmPartnerLogo } from '../common/PfmPartnerLogo';
|
|
import { AuthUserProfile, UserClaims } from '../../auth/AuthProvider';
|
|
import { cancelSessionExpiration, dismissSubordinateModals } from '../../services/sessionExpiration';
|
|
|
|
interface AccountActivationModalProps {
|
|
user: AuthUserProfile | null;
|
|
claims: UserClaims;
|
|
sub: string;
|
|
onSync: (force?: boolean) => Promise<{ success: boolean; isUnauthorized?: boolean; errorMessage?: string }>;
|
|
onLogout: () => Promise<void>;
|
|
initialError?: string | null;
|
|
}
|
|
|
|
const formatLockoutMessage = (msg?: string | null): string | null => {
|
|
if (!msg) return null;
|
|
const trimmed = msg.trim();
|
|
if (/^network\s*error$/i.test(trimmed)) {
|
|
return 'Permission Check';
|
|
}
|
|
return trimmed.replace(/network\s*error/gi, 'Permission Check');
|
|
};
|
|
|
|
export const AccountActivationModal: React.FC<AccountActivationModalProps> = ({
|
|
user,
|
|
claims,
|
|
onSync,
|
|
onLogout,
|
|
initialError,
|
|
}) => {
|
|
const navigate = useNavigate();
|
|
const [isSyncing, setIsSyncing] = useState(false);
|
|
const [errorMessage, setErrorMessage] = useState<string | null>(formatLockoutMessage(initialError) || null);
|
|
|
|
useEffect(() => {
|
|
if (initialError !== undefined) {
|
|
setErrorMessage(formatLockoutMessage(initialError));
|
|
}
|
|
}, [initialError]);
|
|
|
|
useEffect(() => {
|
|
cancelSessionExpiration();
|
|
dismissSubordinateModals();
|
|
}, []);
|
|
|
|
const displayName =
|
|
user?.name ||
|
|
(claims.name as string) ||
|
|
(claims.preferred_username as string) ||
|
|
'Partner';
|
|
|
|
const tenant = user?.tenant || (claims.tenant as string) || (claims.org as string) || 'Partner Organisation';
|
|
|
|
const handleSyncClick = async () => {
|
|
if (isSyncing) return;
|
|
setIsSyncing(true);
|
|
setErrorMessage(null);
|
|
|
|
try {
|
|
const result = await onSync(true);
|
|
|
|
if (result.isUnauthorized) {
|
|
await onLogout();
|
|
navigate('/', { replace: true });
|
|
return;
|
|
}
|
|
|
|
if (!result.success) {
|
|
setErrorMessage(
|
|
formatLockoutMessage(
|
|
result.errorMessage ||
|
|
'Activation is still being reviewed by your funding administrator. Please check back shortly.'
|
|
)
|
|
);
|
|
}
|
|
} catch (err: unknown) {
|
|
const errObj = err as { response?: { status?: number }; message?: string };
|
|
if (errObj?.response?.status === 401) {
|
|
await onLogout();
|
|
navigate('/', { replace: true });
|
|
return;
|
|
}
|
|
setErrorMessage('Permission Check: Unable to verify activation right now. Please try again in a few moments.');
|
|
} finally {
|
|
setIsSyncing(false);
|
|
}
|
|
};
|
|
|
|
const handleSignOut = async () => {
|
|
await onLogout();
|
|
navigate('/', { replace: true });
|
|
};
|
|
|
|
const handleNavigateLanding = () => {
|
|
navigate('/');
|
|
};
|
|
|
|
const modalContent = (
|
|
<div
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-labelledby="activation-modal-title"
|
|
className="fixed inset-0 z-[9999] flex items-center justify-center p-4 sm:p-6 bg-slate-950/80 backdrop-blur-2xl animate-in fade-in duration-300 select-none overflow-y-auto"
|
|
>
|
|
{/* Background ambient lighting matching LandingPage */}
|
|
<div className="pointer-events-none absolute inset-0 overflow-hidden">
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[500px] h-[500px] bg-gradient-to-tr from-emerald-500/15 via-teal-500/10 to-cyan-500/15 blur-[120px] rounded-full" />
|
|
</div>
|
|
|
|
<div
|
|
className="relative w-full max-w-md rounded-3xl border border-white/10 bg-slate-900/85 backdrop-blur-xl shadow-[0_25px_60px_rgba(0,0,0,0.85),inset_0_1px_1px_rgba(255,255,255,0.15)] overflow-hidden flex flex-col items-center text-center p-8 sm:p-10 my-auto space-y-6"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{/* Glowing Brand Icon Lockup */}
|
|
<div className="relative flex items-center justify-center pt-2">
|
|
<div className="absolute -inset-3 rounded-full bg-emerald-500/20 blur-xl animate-pulse" />
|
|
<PfmPartnerLogo className="h-16 w-16 drop-shadow-[0_8px_24px_rgba(16,185,129,0.35)] relative z-10" />
|
|
</div>
|
|
|
|
{/* Title & Organization Pill */}
|
|
<div className="space-y-2">
|
|
<div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-[11px] font-semibold text-emerald-300">
|
|
<Clock className="w-3.5 h-3.5 text-emerald-400" />
|
|
<span>Activation Pending</span>
|
|
</div>
|
|
<h2 id="activation-modal-title" className="text-2xl font-bold tracking-tight text-white">
|
|
Welcome,{' '}
|
|
<span className="bg-gradient-to-r from-emerald-300 via-teal-200 to-cyan-300 bg-clip-text text-transparent">
|
|
{displayName}
|
|
</span>
|
|
</h2>
|
|
<div className="inline-flex items-center gap-1.5 text-xs text-slate-400 font-medium">
|
|
<Building2 className="w-3.5 h-3.5 text-teal-400 shrink-0" />
|
|
<span>{tenant}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Core Friendly Message */}
|
|
<p className="text-sm text-slate-300 leading-relaxed max-w-sm">
|
|
Your credentials have been authenticated. Your funding administrator is finalizing your portfolio access.
|
|
</p>
|
|
|
|
{/* Notice badge if check returned not yet ready */}
|
|
{errorMessage && (
|
|
<div className="w-full rounded-2xl bg-amber-500/10 border border-amber-500/20 p-3 text-xs text-amber-300/90 leading-relaxed text-center flex items-center justify-center gap-2">
|
|
<Sparkles className="w-4 h-4 text-amber-400 shrink-0" />
|
|
<span>{formatLockoutMessage(errorMessage)}</span>
|
|
</div>
|
|
)}
|
|
|
|
{/* Action Button matching Specular / Landing styling */}
|
|
<div className="w-full space-y-3 pt-2">
|
|
<button
|
|
onClick={handleSyncClick}
|
|
disabled={isSyncing}
|
|
type="button"
|
|
id="activation-sync-btn"
|
|
className="w-full py-3.5 px-6 rounded-2xl bg-gradient-to-r from-emerald-600 via-teal-600 to-emerald-500 hover:from-emerald-500 hover:to-teal-500 active:scale-[0.99] disabled:opacity-60 disabled:pointer-events-none text-white font-bold text-sm tracking-wide shadow-[0_12px_30px_rgba(16,185,129,0.35),inset_0_1px_1px_rgba(255,255,255,0.3)] hover:shadow-[0_16px_36px_rgba(16,185,129,0.5)] transition-all flex items-center justify-center gap-2 cursor-pointer"
|
|
>
|
|
<RefreshCw className={`w-4 h-4 text-emerald-100 ${isSyncing ? 'animate-spin' : ''}`} />
|
|
<span>{isSyncing ? 'Checking Status...' : 'Check Account Status'}</span>
|
|
</button>
|
|
|
|
{/* Minimal Secondary Actions */}
|
|
<div className="flex items-center justify-center gap-4 text-xs pt-1">
|
|
<button
|
|
onClick={handleNavigateLanding}
|
|
type="button"
|
|
className="inline-flex items-center gap-1.5 text-slate-400 hover:text-slate-200 transition-colors py-1 cursor-pointer"
|
|
>
|
|
<ArrowLeft className="w-3.5 h-3.5" />
|
|
<span>Landing Page</span>
|
|
</button>
|
|
<span className="text-slate-700">•</span>
|
|
<button
|
|
onClick={handleSignOut}
|
|
type="button"
|
|
className="inline-flex items-center gap-1.5 text-slate-400 hover:text-rose-400 transition-colors py-1 cursor-pointer"
|
|
>
|
|
<LogOut className="w-3.5 h-3.5" />
|
|
<span>Sign Out</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
return typeof document !== 'undefined'
|
|
? createPortal(modalContent, document.body)
|
|
: modalContent;
|
|
};
|