37 - Add tracker type choice as first onboarding step
This commit is contained in:
parent
c6a1681876
commit
dd5f1c514e
1 changed files with 139 additions and 134 deletions
|
|
@ -1,9 +1,47 @@
|
|||
import { useState, useEffect } from 'react';
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import AssetSetupForm from '@/components/Assets/AssetSetupForm';
|
||||
import AddPurchaseForm from '@/components/Transactions/AddPurchaseForm';
|
||||
import AddMilestoneForm from '@/components/Milestones/AddMilestoneForm';
|
||||
import UpdatePriceForm from '@/components/Pricing/UpdatePriceForm';
|
||||
|
||||
type TrackerType = 'simple' | 'asset';
|
||||
|
||||
function TrackerTypeSelector({ onSelect }: { onSelect: (type: TrackerType) => void }) {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<p className="text-red-400 font-mono text-sm uppercase tracking-wider">
|
||||
[SELECT] What do you want to track?
|
||||
</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<button
|
||||
onClick={() => onSelect('simple')}
|
||||
className="text-left border-2 border-red-500/50 bg-black p-6 hover:bg-red-950/30 hover:border-red-400 hover:shadow-[0_0_20px_rgba(239,68,68,0.3)] transition-all"
|
||||
>
|
||||
<span className="block text-red-400 font-mono text-lg font-bold uppercase tracking-wider mb-3">
|
||||
[01] Simple counter
|
||||
</span>
|
||||
<p className="text-red-400/60 font-mono text-xs">
|
||||
Track anything you accumulate — no price tracking, no asset setup.
|
||||
</p>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => onSelect('asset')}
|
||||
className="text-left border-2 border-red-500/50 bg-black p-6 hover:bg-red-950/30 hover:border-red-400 hover:shadow-[0_0_20px_rgba(239,68,68,0.3)] transition-all"
|
||||
>
|
||||
<span className="block text-red-400 font-mono text-lg font-bold uppercase tracking-wider mb-3">
|
||||
[02] Asset tracker
|
||||
</span>
|
||||
<p className="text-red-400/60 font-mono text-xs">
|
||||
Track holdings with price tracking and P&L.
|
||||
</p>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function PriceTrackingStep({ onEnable, onSkip }: { onEnable: () => void; onSkip?: () => void }) {
|
||||
const [enabled, setEnabled] = useState(false);
|
||||
|
||||
|
|
@ -50,77 +88,48 @@ interface OnboardingStep {
|
|||
required: boolean;
|
||||
}
|
||||
|
||||
const ASSET_STEPS: OnboardingStep[] = [
|
||||
{ id: 'asset', title: 'SET ASSET', description: 'Choose the asset you want to track', completed: false, required: true },
|
||||
{ id: 'purchases', title: 'ADD PURCHASES', description: 'Enter your current holdings', completed: false, required: true },
|
||||
{ id: 'milestones', title: 'SET MILESTONES', description: 'Define your goals', completed: false, required: true },
|
||||
{ id: 'price', title: 'CURRENT PRICE', description: 'Set current asset price (optional)', completed: false, required: false },
|
||||
];
|
||||
|
||||
const SIMPLE_STEPS: OnboardingStep[] = [
|
||||
{ id: 'purchases', title: 'STARTING AMOUNT', description: 'Enter your starting amount', completed: false, required: true },
|
||||
{ id: 'milestones', title: 'SET MILESTONES', description: 'Define your goals', completed: false, required: true },
|
||||
];
|
||||
|
||||
interface OnboardingFlowProps {
|
||||
onComplete?: () => void;
|
||||
}
|
||||
|
||||
export default function OnboardingFlow({ onComplete }: OnboardingFlowProps) {
|
||||
const [trackerType, setTrackerType] = useState<TrackerType | null>(null);
|
||||
const [currentStep, setCurrentStep] = useState(0);
|
||||
const [steps, setSteps] = useState<OnboardingStep[]>([
|
||||
{
|
||||
id: 'asset',
|
||||
title: 'SET ASSET',
|
||||
description: 'Choose the asset you want to track',
|
||||
completed: false,
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
id: 'purchases',
|
||||
title: 'ADD PURCHASES',
|
||||
description: 'Enter your current holdings',
|
||||
completed: false,
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
id: 'milestones',
|
||||
title: 'SET MILESTONES',
|
||||
description: 'Define your goals',
|
||||
completed: false,
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
id: 'price',
|
||||
title: 'CURRENT PRICE',
|
||||
description: 'Set current asset price (optional)',
|
||||
completed: false,
|
||||
required: false,
|
||||
},
|
||||
const [steps, setSteps] = useState<OnboardingStep[]>([]);
|
||||
|
||||
const checkOnboardingStatus = useCallback(async (currentSteps: OnboardingStep[]) => {
|
||||
try {
|
||||
const [purchaseData, milestonesData, assetData, priceData] = await Promise.all([
|
||||
fetch('/purchases/summary').then(r => r.json()),
|
||||
fetch('/milestones').then(r => r.json()),
|
||||
fetch('/assets/current').then(r => r.json()),
|
||||
fetch('/pricing/current').then(r => r.json()),
|
||||
]);
|
||||
|
||||
// Check onboarding status on mount
|
||||
useEffect(() => {
|
||||
checkOnboardingStatus();
|
||||
}, []);
|
||||
|
||||
const checkOnboardingStatus = async () => {
|
||||
try {
|
||||
// Check asset
|
||||
const assetResponse = await fetch('/assets/current');
|
||||
const assetData = await assetResponse.json();
|
||||
const hasAsset = !!assetData.asset;
|
||||
|
||||
// Check purchases
|
||||
const purchaseResponse = await fetch('/purchases/summary');
|
||||
const purchaseData = await purchaseResponse.json();
|
||||
const hasPurchases = purchaseData.total_shares > 0;
|
||||
|
||||
// Check milestones
|
||||
const milestonesResponse = await fetch('/milestones');
|
||||
const milestonesData = await milestonesResponse.json();
|
||||
const hasMilestones = milestonesData.length > 0;
|
||||
|
||||
// Check current price
|
||||
const priceResponse = await fetch('/pricing/current');
|
||||
const priceData = await priceResponse.json();
|
||||
const hasAsset = !!assetData.asset;
|
||||
const hasPrice = !!priceData.current_price;
|
||||
|
||||
const freshSteps = steps.map(step => ({
|
||||
const freshSteps = currentSteps.map(step => ({
|
||||
...step,
|
||||
completed:
|
||||
(step.id === 'asset' && hasAsset) ||
|
||||
(step.id === 'purchases' && hasPurchases) ||
|
||||
(step.id === 'milestones' && hasMilestones) ||
|
||||
(step.id === 'price' && hasPrice)
|
||||
(step.id === 'price' && hasPrice),
|
||||
}));
|
||||
|
||||
setSteps(freshSteps);
|
||||
|
|
@ -129,24 +138,31 @@ export default function OnboardingFlow({ onComplete }: OnboardingFlowProps) {
|
|||
|
||||
if (firstIncompleteRequired !== -1) {
|
||||
setCurrentStep(firstIncompleteRequired);
|
||||
} else {
|
||||
if (onComplete) {
|
||||
} else if (onComplete) {
|
||||
onComplete();
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to check onboarding status:', error);
|
||||
}
|
||||
};
|
||||
}, [onComplete]);
|
||||
|
||||
useEffect(() => {
|
||||
if (trackerType === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const initialSteps = trackerType === 'simple' ? SIMPLE_STEPS : ASSET_STEPS;
|
||||
setSteps(initialSteps);
|
||||
setCurrentStep(0);
|
||||
checkOnboardingStatus(initialSteps);
|
||||
}, [trackerType, checkOnboardingStatus]);
|
||||
|
||||
const handleStepComplete = async () => {
|
||||
// Mark current step as completed
|
||||
setSteps(prev => prev.map((step, index) =>
|
||||
const updatedSteps = steps.map((step, index) =>
|
||||
index === currentStep ? { ...step, completed: true } : step
|
||||
));
|
||||
|
||||
// Refresh onboarding status — handles setCurrentStep and onComplete
|
||||
await checkOnboardingStatus();
|
||||
);
|
||||
setSteps(updatedSteps);
|
||||
await checkOnboardingStatus(updatedSteps);
|
||||
};
|
||||
|
||||
const handleStepSelect = (stepIndex: number) => {
|
||||
|
|
@ -155,33 +171,19 @@ export default function OnboardingFlow({ onComplete }: OnboardingFlowProps) {
|
|||
|
||||
const renderStepContent = () => {
|
||||
const step = steps[currentStep];
|
||||
if (!step) {
|
||||
return null;
|
||||
}
|
||||
|
||||
switch (step.id) {
|
||||
case 'asset':
|
||||
return (
|
||||
<AssetSetupForm
|
||||
onSuccess={handleStepComplete}
|
||||
/>
|
||||
);
|
||||
return <AssetSetupForm onSuccess={handleStepComplete} />;
|
||||
case 'purchases':
|
||||
return (
|
||||
<AddPurchaseForm
|
||||
onSuccess={handleStepComplete}
|
||||
/>
|
||||
);
|
||||
return <AddPurchaseForm onSuccess={handleStepComplete} />;
|
||||
case 'milestones':
|
||||
return (
|
||||
<AddMilestoneForm
|
||||
onSuccess={handleStepComplete}
|
||||
/>
|
||||
);
|
||||
return <AddMilestoneForm onSuccess={handleStepComplete} />;
|
||||
case 'price':
|
||||
return (
|
||||
<PriceTrackingStep
|
||||
onEnable={handleStepComplete}
|
||||
onSkip={onComplete}
|
||||
/>
|
||||
);
|
||||
return <PriceTrackingStep onEnable={handleStepComplete} onSkip={onComplete} />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
|
|
@ -190,19 +192,22 @@ export default function OnboardingFlow({ onComplete }: OnboardingFlowProps) {
|
|||
return (
|
||||
<div className="min-h-screen bg-black flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-4xl">
|
||||
{/* Terminal-style border with red glow */}
|
||||
<div className="border-2 border-red-500 bg-black shadow-[0_0_20px_rgba(239,68,68,0.3)] p-8">
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h1 className="text-red-400 font-mono text-2xl font-bold uppercase tracking-wider mb-2">
|
||||
[SYSTEM] ONBOARDING SEQUENCE
|
||||
</h1>
|
||||
<p className="text-red-400/60 font-mono text-sm">
|
||||
Set up your tracker
|
||||
{trackerType === null ? 'Choose how you want to track' : 'Set up your tracker'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Progress indicator */}
|
||||
{trackerType === null ? (
|
||||
<div className="border border-red-500/30 bg-black/50 p-6">
|
||||
<TrackerTypeSelector onSelect={setTrackerType} />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
{steps.map((step, index) => (
|
||||
|
|
@ -224,7 +229,7 @@ export default function OnboardingFlow({ onComplete }: OnboardingFlowProps) {
|
|||
|
||||
<div className="text-center">
|
||||
<p className="text-red-400 font-mono text-sm">
|
||||
{steps[currentStep].description}
|
||||
{steps[currentStep]?.description}
|
||||
</p>
|
||||
<p className="text-red-400/60 font-mono text-xs mt-1">
|
||||
STEP {currentStep + 1}/{steps.length}
|
||||
|
|
@ -232,12 +237,10 @@ export default function OnboardingFlow({ onComplete }: OnboardingFlowProps) {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{/* Step content */}
|
||||
<div className="border border-red-500/30 bg-black/50 p-6">
|
||||
{renderStepContent()}
|
||||
</div>
|
||||
|
||||
{/* Status footer */}
|
||||
<div className="mt-6 pt-4 border-t border-red-500/30">
|
||||
<div className="flex justify-between items-center">
|
||||
<p className="text-red-400/60 font-mono text-xs">
|
||||
|
|
@ -248,6 +251,8 @@ export default function OnboardingFlow({ onComplete }: OnboardingFlowProps) {
|
|||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue