219 lines
10 KiB
TypeScript
219 lines
10 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useNavigate, useLocation } from 'react-router-dom';
|
|
import { useAuth } from '../contexts/AuthContext';
|
|
import { useUserOrganizations } from '../contexts/UserOrganizationsContext';
|
|
import { Card, Button } from '../components/UiKit';
|
|
|
|
const OrgSelection: React.FC = () => {
|
|
const navigate = useNavigate();
|
|
const location = useLocation();
|
|
const { user } = useAuth();
|
|
const {
|
|
organizations,
|
|
loading,
|
|
selectOrganization,
|
|
createOrganization,
|
|
joinOrganization
|
|
} = useUserOrganizations();
|
|
|
|
const [showCreateOrg, setShowCreateOrg] = useState(false);
|
|
const [newOrgName, setNewOrgName] = useState('');
|
|
const [inviteCode, setInviteCode] = useState('');
|
|
const [isCreating, setIsCreating] = useState(false);
|
|
const [isJoining, setIsJoining] = useState(false);
|
|
|
|
useEffect(() => {
|
|
// Check for invite code in URL
|
|
const hashSearch = location.hash.includes('?') ? location.hash.split('?')[1] : '';
|
|
const searchParams = new URLSearchParams(hashSearch);
|
|
const queryInvite = searchParams.get('invite');
|
|
if (queryInvite) {
|
|
setInviteCode(queryInvite);
|
|
}
|
|
}, [location]);
|
|
|
|
// Auto-join organization when invite code is present
|
|
useEffect(() => {
|
|
if (inviteCode && !isJoining && !loading) {
|
|
handleJoinWithInvite();
|
|
}
|
|
}, [inviteCode, isJoining, loading]);
|
|
|
|
const handleSelectOrg = (orgId: string) => {
|
|
selectOrganization(orgId);
|
|
|
|
// Check if the organization needs onboarding completion
|
|
const selectedOrg = organizations.find(org => org.orgId === orgId);
|
|
if (selectedOrg && !selectedOrg.onboardingCompleted && selectedOrg.role === 'owner') {
|
|
navigate('/onboarding', { replace: true });
|
|
} else {
|
|
navigate('/reports', { replace: true });
|
|
}
|
|
};
|
|
|
|
const handleCreateOrg = async () => {
|
|
if (!newOrgName.trim() || isCreating) return;
|
|
|
|
setIsCreating(true);
|
|
try {
|
|
const result = await createOrganization(newOrgName);
|
|
selectOrganization(result.orgId);
|
|
|
|
// Check if subscription setup is required
|
|
if (result.requiresSubscription) {
|
|
navigate(`/subscription-setup?orgId=${result.orgId}`, { replace: true });
|
|
} else {
|
|
navigate('/onboarding', { replace: true });
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to create organization:', error);
|
|
alert('Failed to create organization. Please try again.');
|
|
} finally {
|
|
setIsCreating(false);
|
|
}
|
|
};
|
|
|
|
const handleJoinWithInvite = async () => {
|
|
if (!inviteCode.trim() || isJoining) return;
|
|
|
|
setIsJoining(true);
|
|
try {
|
|
const orgId = await joinOrganization(inviteCode);
|
|
selectOrganization(orgId);
|
|
navigate('/employee-questionnaire', { replace: true });
|
|
} catch (error) {
|
|
console.error('Failed to join organization:', error);
|
|
alert('Failed to join organization. Please check your invite code.');
|
|
} finally {
|
|
setIsJoining(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return <div className="p-8">Loading your organizations...</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[--background-primary] py-12">
|
|
<div className="max-w-md mx-auto">
|
|
<div className="text-center mb-8">
|
|
<div className="w-16 h-16 bg-[--accent] rounded-full flex items-center justify-center font-bold text-white text-2xl mx-auto mb-4">
|
|
A
|
|
</div>
|
|
<h1 className="text-3xl font-bold text-[--text-primary] mb-2">Welcome to Auditly</h1>
|
|
<p className="text-[--text-secondary]">Select an organization to continue</p>
|
|
</div>
|
|
|
|
{/* Existing Organizations */}
|
|
{organizations.length > 0 && (
|
|
<Card className="mb-6">
|
|
<h2 className="text-lg font-semibold mb-4 text-[--text-primary]">Your Organizations</h2>
|
|
<div className="space-y-3">
|
|
{organizations.map((org) => (
|
|
<div
|
|
key={org.orgId}
|
|
className="flex items-center justify-between p-3 border border-[--border-color] rounded-lg hover:bg-[--background-secondary] cursor-pointer"
|
|
onClick={() => handleSelectOrg(org.orgId)}
|
|
>
|
|
<div>
|
|
<div className="font-medium text-[--text-primary]">{org.name}</div>
|
|
<div className="text-sm text-[--text-secondary]">
|
|
{org.role} • {org.onboardingCompleted ? 'Active' : 'Setup Required'}
|
|
</div>
|
|
</div>
|
|
<Button variant="secondary" size="sm">
|
|
Enter
|
|
</Button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Join with Invite */}
|
|
{inviteCode && (
|
|
<Card className="mb-6">
|
|
<h2 className="text-lg font-semibold mb-4 text-[--text-primary]">Join Organization</h2>
|
|
<p className="text-sm text-[--text-secondary] mb-4">
|
|
You've been invited to join an organization with code: <code className="bg-[--background-tertiary] px-2 py-1 rounded text-[--text-primary]">{inviteCode}</code>
|
|
</p>
|
|
<Button onClick={handleJoinWithInvite} className="w-full" disabled={isJoining}>
|
|
{isJoining ? 'Joining...' : 'Accept Invitation'}
|
|
</Button>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Create New Organization */}
|
|
<Card>
|
|
<h2 className="text-lg font-semibold mb-4 text-[--text-primary]">Create New Organization</h2>
|
|
{!showCreateOrg ? (
|
|
<Button
|
|
onClick={() => setShowCreateOrg(true)}
|
|
variant="secondary"
|
|
className="w-full"
|
|
>
|
|
+ Create New Organization
|
|
</Button>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-sm font-medium text-[--text-primary] mb-2">
|
|
Organization Name
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={newOrgName}
|
|
onChange={(e) => setNewOrgName(e.target.value)}
|
|
placeholder="Enter organization name"
|
|
className="w-full px-3 py-2 border border-[--input-border] rounded-lg bg-[--input-bg] text-[--text-primary] placeholder-[--input-placeholder] focus:outline-none focus:ring-2 focus:ring-[--accent] focus:border-[--accent]"
|
|
/>
|
|
</div>
|
|
<div className="flex space-x-3">
|
|
<Button
|
|
onClick={handleCreateOrg}
|
|
disabled={!newOrgName.trim() || isCreating}
|
|
className="flex-1"
|
|
>
|
|
{isCreating ? 'Creating...' : 'Create Organization'}
|
|
</Button>
|
|
<Button
|
|
onClick={() => setShowCreateOrg(false)}
|
|
variant="secondary"
|
|
className="flex-1"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Card>
|
|
|
|
{/* Manual Invite Code Entry */}
|
|
{!inviteCode && (
|
|
<Card className="mt-6">
|
|
<h2 className="text-lg font-semibold mb-4 text-[--text-primary]">Have an invite code?</h2>
|
|
<div className="flex space-x-3">
|
|
<input
|
|
type="text"
|
|
value={inviteCode}
|
|
onChange={(e) => setInviteCode(e.target.value)}
|
|
placeholder="Enter invite code"
|
|
className="flex-1 px-3 py-2 border border-[--input-border] rounded-lg bg-[--input-bg] text-[--text-primary] placeholder-[--input-placeholder] focus:outline-none focus:ring-2 focus:ring-[--accent] focus:border-[--accent]"
|
|
/>
|
|
<Button
|
|
onClick={handleJoinWithInvite}
|
|
disabled={!inviteCode.trim() || isJoining}
|
|
variant="secondary"
|
|
>
|
|
{isJoining ? 'Joining...' : 'Join'}
|
|
</Button>
|
|
</div>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default OrgSelection;
|