386 lines
14 KiB
TypeScript
386 lines
14 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useOrg } from '../contexts/OrgContext';
|
|
import { EnhancedFigmaQuestion, FigmaQuestionCard, EnhancedFigmaInput } from '../components/figma/EnhancedFigmaQuestion';
|
|
import { FigmaInput, FigmaSelect } from '../components/figma/FigmaInput';
|
|
import { FigmaMultipleChoice } from '../components/figma/FigmaMultipleChoice';
|
|
import { StoredImage } from '../services/imageStorageService';
|
|
|
|
interface OnboardingData {
|
|
// Step 0: Company Details
|
|
companyName: string;
|
|
yourName: string;
|
|
|
|
// Step 1: Company Size
|
|
companySize: string;
|
|
|
|
// Step 2: Mission
|
|
mission: string;
|
|
|
|
// Later steps
|
|
industry: string;
|
|
description: string;
|
|
vision: string;
|
|
values: string[];
|
|
foundingYear: string;
|
|
evolution: string;
|
|
majorMilestones: string;
|
|
advantages: string;
|
|
vulnerabilities: string;
|
|
competitors: string;
|
|
marketPosition: string;
|
|
currentChallenges: string[];
|
|
shortTermGoals: string;
|
|
longTermGoals: string;
|
|
keyMetrics: string;
|
|
cultureDescription: string;
|
|
workEnvironment: string;
|
|
leadershipStyle: string;
|
|
communicationStyle: string;
|
|
additionalContext: string;
|
|
}
|
|
|
|
const Onboarding: React.FC = () => {
|
|
const { org, upsertOrg, generateCompanyWiki } = useOrg();
|
|
const navigate = useNavigate();
|
|
|
|
useEffect(() => {
|
|
if (org?.onboardingCompleted) {
|
|
navigate('/reports', { replace: true });
|
|
}
|
|
}, [org, navigate]);
|
|
|
|
const [step, setStep] = useState(0);
|
|
const [isGeneratingReport, setIsGeneratingReport] = useState(false);
|
|
const [companyLogo, setCompanyLogo] = useState<StoredImage | null>(null);
|
|
const [formData, setFormData] = useState<OnboardingData>({
|
|
companyName: org?.name || '',
|
|
yourName: '',
|
|
companySize: '',
|
|
mission: '',
|
|
industry: '',
|
|
description: '',
|
|
vision: '',
|
|
values: [],
|
|
foundingYear: '',
|
|
evolution: '',
|
|
majorMilestones: '',
|
|
advantages: '',
|
|
vulnerabilities: '',
|
|
competitors: '',
|
|
marketPosition: '',
|
|
currentChallenges: [],
|
|
shortTermGoals: '',
|
|
longTermGoals: '',
|
|
keyMetrics: '',
|
|
cultureDescription: '',
|
|
workEnvironment: '',
|
|
leadershipStyle: '',
|
|
communicationStyle: '',
|
|
additionalContext: ''
|
|
});
|
|
|
|
const steps = [
|
|
{
|
|
title: 'Company Details',
|
|
description: 'Basic information about your company'
|
|
},
|
|
{
|
|
title: 'Company Size',
|
|
description: 'How many people work at your company'
|
|
},
|
|
{
|
|
title: 'Mission Statement',
|
|
description: 'What is the mission of your company'
|
|
},
|
|
{
|
|
title: 'Vision & Values',
|
|
description: 'Your company\'s vision and core values'
|
|
},
|
|
{
|
|
title: 'Company History',
|
|
description: 'How your company has evolved'
|
|
},
|
|
{
|
|
title: 'Market Position',
|
|
description: 'Your competitive landscape'
|
|
},
|
|
{
|
|
title: 'Goals & Challenges',
|
|
description: 'Current objectives and obstacles'
|
|
},
|
|
{
|
|
title: 'Team & Culture',
|
|
description: 'Your work environment and culture'
|
|
}
|
|
];
|
|
|
|
const handleNext = async () => {
|
|
if (isGeneratingReport) return;
|
|
|
|
if (step < steps.length - 1) {
|
|
setStep(prev => prev + 1);
|
|
return;
|
|
}
|
|
|
|
// Final step: persist org & generate report
|
|
setIsGeneratingReport(true);
|
|
try {
|
|
const newOrgData = {
|
|
name: formData.companyName,
|
|
industry: formData.industry,
|
|
size: formData.companySize,
|
|
description: formData.description,
|
|
mission: formData.mission,
|
|
vision: formData.vision,
|
|
values: formData.values.join(','),
|
|
foundingYear: formData.foundingYear,
|
|
evolution: formData.evolution,
|
|
majorMilestones: formData.majorMilestones,
|
|
advantages: formData.advantages,
|
|
vulnerabilities: formData.vulnerabilities,
|
|
competitors: formData.competitors,
|
|
marketPosition: formData.marketPosition,
|
|
currentChallenges: formData.currentChallenges.join(','),
|
|
shortTermGoals: formData.shortTermGoals,
|
|
longTermGoals: formData.longTermGoals,
|
|
keyMetrics: formData.keyMetrics,
|
|
cultureDescription: formData.cultureDescription,
|
|
workEnvironment: formData.workEnvironment,
|
|
leadershipStyle: formData.leadershipStyle,
|
|
communicationStyle: formData.communicationStyle,
|
|
additionalContext: formData.additionalContext,
|
|
onboardingCompleted: true
|
|
};
|
|
|
|
await upsertOrg(newOrgData);
|
|
await generateCompanyWiki({ ...newOrgData, orgId: org!.orgId });
|
|
|
|
setTimeout(() => {
|
|
navigate('/reports', { replace: true });
|
|
}, 100);
|
|
} catch (error) {
|
|
console.error('Error completing onboarding:', error);
|
|
const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
|
|
alert(`There was an error completing the setup: ${errorMessage}. Please check the console for more details and try again.`);
|
|
} finally {
|
|
setIsGeneratingReport(false);
|
|
}
|
|
};
|
|
|
|
const handleBack = () => {
|
|
if (step > 0) setStep(step - 1);
|
|
};
|
|
|
|
const updateFormData = (field: keyof OnboardingData, value: string) => {
|
|
setFormData(prev => ({ ...prev, [field]: value }));
|
|
};
|
|
|
|
const handleImageUploaded = (image: StoredImage | null) => {
|
|
setCompanyLogo(image);
|
|
};
|
|
|
|
const canProceed = () => {
|
|
switch (step) {
|
|
case 0: // Company Details
|
|
return formData.companyName.trim().length > 0 && formData.yourName.trim().length > 0;
|
|
case 1: // Company Size
|
|
return formData.companySize.length > 0;
|
|
case 2: // Mission
|
|
return formData.mission.trim().length > 0;
|
|
case 3: // Vision & Values
|
|
return formData.vision.trim().length > 0;
|
|
case 4: // History
|
|
return formData.evolution.trim().length > 0;
|
|
case 5: // Market Position
|
|
return formData.advantages.trim().length > 0;
|
|
case 6: // Goals
|
|
return formData.shortTermGoals.trim().length > 0;
|
|
case 7: // Culture
|
|
return formData.cultureDescription.trim().length > 0;
|
|
default:
|
|
return false;
|
|
}
|
|
};
|
|
|
|
const renderStepContent = () => {
|
|
switch (step) {
|
|
case 0: // Company Details
|
|
return (
|
|
<div className="self-stretch flex flex-col justify-start items-start gap-6">
|
|
<FigmaInput
|
|
label="Your Name"
|
|
placeholder="John Doe"
|
|
value={formData.yourName}
|
|
onChange={(e) => updateFormData('yourName', e.target.value)}
|
|
required
|
|
/>
|
|
<FigmaInput
|
|
label="Company Name"
|
|
placeholder="Doe Enterprises"
|
|
value={formData.companyName}
|
|
onChange={(e) => updateFormData('companyName', e.target.value)}
|
|
required
|
|
/>
|
|
</div>
|
|
);
|
|
|
|
case 1: // Company Size
|
|
return (
|
|
<FigmaMultipleChoice
|
|
options={['1-10', '10-25', '25-50', '50-100', '100+']}
|
|
selectedValue={formData.companySize}
|
|
onSelect={(value) => updateFormData('companySize', value)}
|
|
/>
|
|
);
|
|
|
|
case 2: // Mission
|
|
return (
|
|
<FigmaQuestionCard
|
|
question="What is the mission of your company?"
|
|
description="Description about the question"
|
|
>
|
|
<EnhancedFigmaInput
|
|
placeholder="Type your answer...."
|
|
value={formData.mission}
|
|
onChange={(value) => updateFormData('mission', value)}
|
|
multiline
|
|
rows={6}
|
|
/>
|
|
</FigmaQuestionCard>
|
|
);
|
|
|
|
case 3: // Vision & Values
|
|
return (
|
|
<div className="space-y-6">
|
|
<FigmaQuestionCard
|
|
question="What is your company's vision?"
|
|
description="Where do you see your company in the future?"
|
|
>
|
|
<EnhancedFigmaInput
|
|
placeholder="Type your answer...."
|
|
value={formData.vision}
|
|
onChange={(value) => updateFormData('vision', value)}
|
|
multiline
|
|
rows={4}
|
|
/>
|
|
</FigmaQuestionCard>
|
|
</div>
|
|
);
|
|
|
|
case 4: // History
|
|
return (
|
|
<FigmaQuestionCard
|
|
question="How has your company evolved?"
|
|
description="Tell us about your company's journey and evolution"
|
|
>
|
|
<EnhancedFigmaInput
|
|
placeholder="Type your answer...."
|
|
value={formData.evolution}
|
|
onChange={(value) => updateFormData('evolution', value)}
|
|
multiline
|
|
rows={6}
|
|
/>
|
|
</FigmaQuestionCard>
|
|
);
|
|
|
|
case 5: // Market Position
|
|
return (
|
|
<FigmaQuestionCard
|
|
question="What are your competitive advantages?"
|
|
description="What gives your company a competitive edge?"
|
|
>
|
|
<EnhancedFigmaInput
|
|
placeholder="Type your answer...."
|
|
value={formData.advantages}
|
|
onChange={(value) => updateFormData('advantages', value)}
|
|
multiline
|
|
rows={6}
|
|
/>
|
|
</FigmaQuestionCard>
|
|
);
|
|
|
|
case 6: // Goals
|
|
return (
|
|
<FigmaQuestionCard
|
|
question="What are your short-term goals?"
|
|
description="What are your priorities for the next 6-12 months?"
|
|
>
|
|
<EnhancedFigmaInput
|
|
placeholder="Type your answer...."
|
|
value={formData.shortTermGoals}
|
|
onChange={(value) => updateFormData('shortTermGoals', value)}
|
|
multiline
|
|
rows={6}
|
|
/>
|
|
</FigmaQuestionCard>
|
|
);
|
|
|
|
case 7: // Culture
|
|
return (
|
|
<FigmaQuestionCard
|
|
question="Describe your company culture"
|
|
description="What's it like to work at your company?"
|
|
>
|
|
<EnhancedFigmaInput
|
|
placeholder="Type your answer...."
|
|
value={formData.cultureDescription}
|
|
onChange={(value) => updateFormData('cultureDescription', value)}
|
|
multiline
|
|
rows={6}
|
|
/>
|
|
</FigmaQuestionCard>
|
|
);
|
|
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
// Question text for each step
|
|
const getQuestionText = () => {
|
|
switch (step) {
|
|
case 0: return 'Company Details';
|
|
case 1: return `How many people work at ${formData.companyName || '[Company Name]'}?`;
|
|
case 2: return 'What is the mission of your company?';
|
|
case 3: return 'What is your company\'s vision?';
|
|
case 4: return 'How has your company evolved?';
|
|
case 5: return 'What are your competitive advantages?';
|
|
case 6: return 'What are your short-term goals?';
|
|
case 7: return 'Describe your company culture';
|
|
default: return 'Onboarding';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[--Neutrals-NeutralSlate0] flex items-center justify-center">
|
|
<EnhancedFigmaQuestion
|
|
question={getQuestionText()}
|
|
currentStep={step + 1}
|
|
totalSteps={steps.length}
|
|
stepTitle={steps[step].title}
|
|
onBack={handleBack}
|
|
onNext={handleNext}
|
|
nextDisabled={!canProceed() || isGeneratingReport}
|
|
backDisabled={step === 0}
|
|
showBackButton={step > 0}
|
|
nextText={
|
|
isGeneratingReport
|
|
? 'Generating...'
|
|
: step === steps.length - 1
|
|
? 'Complete Setup'
|
|
: 'Next'
|
|
}
|
|
// Image upload props
|
|
orgId={org?.orgId}
|
|
onImageUploaded={handleImageUploaded}
|
|
currentImage={companyLogo}
|
|
>
|
|
{renderStepContent()}
|
|
</EnhancedFigmaQuestion>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Onboarding;
|