Fix organization setup flow: redirect to onboarding for incomplete setup
This commit is contained in:
218
pages/OrgSelection.tsx
Normal file
218
pages/OrgSelection.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
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;
|
||||
Reference in New Issue
Block a user