admin/estimation-flow
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

the next step should look like this

Browse Source
This commit is contained in:
Leon Serfaty G
2025-07-17 10:31:26 +00:00
parent b07f7af30c
commit db77e86302
8 changed files with 133 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cost-estimator/cost-estimator-form.tsx
+14
View File
@@ -8,6 +8,7 @@ import { Step4DesignProcess } from './step-4-design-process';
import { Step5PageCount } from './step-5-page-count';
import { Step6Animations } from './step-6-animations';
import { Step7Illustrations } from './step-7-illustrations';
import { Step8Branding } from './step-8-branding';
import { Card, CardContent } from '@/components/ui/card';
import { AnimatePresence, motion } from 'framer-motion';
@@ -18,6 +19,8 @@ export type IllustrationSelection = {
is3dAnimated: 'static' | 'animated' | null;
};
export type BrandingSelection = 'full-cycle' | 'brush-up' | 'logo-only' | 'none' | null;
export type FormData = {
projectType: 'website' | 'mobile-app' | 'platform' | null;
serviceType: 'entire-project' | 'development' | 'ui-ux-design' | 'identity-branding' | null;
@@ -26,6 +29,7 @@ export type FormData = {
pageCount: number;
animatedElements: boolean | null;
illustrations: IllustrationSelection;
branding: BrandingSelection;
};
export function CostEstimatorForm() {
@@ -43,6 +47,7 @@ export function CostEstimatorForm() {
has3d: false,
is3dAnimated: null,
},
branding: null,
});
const [isPending, startTransition] = useTransition();
@@ -125,6 +130,15 @@ export function CostEstimatorForm() {
formData={formData}
/>
);
case 8:
return (
<Step8Branding
onNext={handleNextStep}
onBack={handlePrevStep}
onUpdateData={handleUpdateFormData}
formData={formData}
/>
);
default:
return (
<Step1ProjectType
src/components/cost-estimator/step-2-service-type.tsx
+1
View File
@@ -63,6 +63,7 @@ export function Step2ServiceType({ onNext, onBack, onUpdateData, formData }: Ste
<div className="w-12 h-2 bg-muted rounded-full" />
<div className="w-12 h-2 bg-muted rounded-full" />
<div className="w-12 h-2 bg-muted rounded-full" />
<div className="w-12 h-2 bg-muted rounded-full" />
</div>
<Button onClick={onNext} disabled={!selectedService}>
Next
src/components/cost-estimator/step-3-project-stage.tsx
+1
View File
@@ -84,6 +84,7 @@ export function Step3ProjectStage({ onNext, onBack, onUpdateData, formData }: St
<div className="w-12 h-2 bg-muted rounded-full" />
<div className="w-12 h-2 bg-muted rounded-full" />
<div className="w-12 h-2 bg-muted rounded-full" />
<div className="w-12 h-2 bg-muted rounded-full" />
</div>
<Button onClick={onNext}>
Next
src/components/cost-estimator/step-4-design-process.tsx
+1
View File
@@ -75,6 +75,7 @@ export function Step4DesignProcess({ onNext, onBack, onUpdateData, formData }: S
<div className="w-12 h-2 bg-muted rounded-full" />
<div className="w-12 h-2 bg-muted rounded-full" />
<div className="w-12 h-2 bg-muted rounded-full" />
<div className="w-12 h-2 bg-muted rounded-full" />
</div>
<Button onClick={onNext} disabled={!selectedOption}>
Next
src/components/cost-estimator/step-5-page-count.tsx
+1
View File
@@ -93,6 +93,7 @@ export function Step5PageCount({ onNext, onBack, onUpdateData, formData }: Step5
<div className="w-12 h-2 bg-primary rounded-full" />
<div className="w-12 h-2 bg-muted rounded-full" />
<div className="w-12 h-2 bg-muted rounded-full" />
<div className="w-12 h-2 bg-muted rounded-full" />
</div>
<Button onClick={onNext}>
Next
src/components/cost-estimator/step-6-animations.tsx
+1
View File
@@ -79,6 +79,7 @@ export function Step6Animations({ onNext, onBack, onUpdateData, formData }: Step
<div className="w-12 h-2 bg-primary rounded-full" />
<div className="w-12 h-2 bg-primary rounded-full" />
<div className="w-12 h-2 bg-muted rounded-full" />
<div className="w-12 h-2 bg-muted rounded-full" />
</div>
<Button onClick={onNext} disabled={selectedOption === null}>
Next
src/components/cost-estimator/step-7-illustrations.tsx
+1
View File
@@ -180,6 +180,7 @@ export function Step7Illustrations({ onNext, onBack, onUpdateData, formData }: S
<div className="w-12 h-2 bg-primary rounded-full" />
<div className="w-12 h-2 bg-primary rounded-full" />
<div className="w-12 h-2 bg-primary rounded-full" />
<div className="w-12 h-2 bg-muted rounded-full" />
</div>
<Button onClick={onNext} disabled={isNextDisabled}>
Next
src/components/cost-estimator/step-8-branding.tsx
+113
View File
@@ -0,0 +1,113 @@
"use client";
import type { FormData, BrandingSelection } from './cost-estimator-form';
import { Button } from '@/components/ui/button';
import { Card, CardContent } from '@/components/ui/card';
import { Gauge, Compass, PaintBrush, Zap, X } from 'lucide-react';
import React, { useState, useMemo } from 'react';
type Step8Props = {
onNext: () => void;
onBack: () => void;
onUpdateData: (data: Partial<FormData>) => void;
formData: FormData;
};
const brandingOptions = [
{ id: 'full-cycle', title: 'I need a full-cycle branding for my project', hours: 80, icon: <Compass className="h-10 w-10 text-primary" /> },
{ id: 'brush-up', title: 'I need to brush up on my existing project', hours: 40, icon: <PaintBrush className="h-10 w-10 text-primary" /> },
{ id: 'logo-only', title: 'I just need a logo', hours: 20, icon: <Zap className="h-10 w-10 text-primary" /> },
{ id: 'none', title: "No, I'm better off without it", hours: 0, icon: <X className="h-10 w-10 text-primary" /> },
];
const designHoursMap = { custom: 60, mockups: 30, existing: 0 };
const illustrationHours = { '2d_static': 10, '2d_animated': 25, '3d_static': 20, '3d_animated': 40 };
const calculateHours = (
formData: FormData,
branding: BrandingSelection
): number => {
const pageVal = formData.pageCount === 10 ? 50 : (formData.pageCount + 1) * 5 - 1;
const pageHours = pageVal * 6;
const stageHours = Math.round((formData.projectStage / 100) * 50);
const designHours = formData.designProcess ? designHoursMap[formData.designProcess] : 0;
const animationHours = formData.animatedElements ? 30 : 0;
let illustrationTotalHours = 0;
if (formData.illustrations.has2d) {
if (formData.illustrations.is2dAnimated === 'static') illustrationTotalHours += illustrationHours['2d_static'];
if (formData.illustrations.is2dAnimated === 'animated') illustrationTotalHours += illustrationHours['2d_animated'];
}
if (formData.illustrations.has3d) {
if (formData.illustrations.is3dAnimated === 'static') illustrationTotalHours += illustrationHours['3d_static'];
if (formData.illustrations.is3dAnimated === 'animated') illustrationTotalHours += illustrationHours['3d_animated'];
}
const brandingH = branding ? (brandingOptions.find(b => b.id === branding)?.hours ?? 0) : 0;
return pageHours + stageHours + designHours + animationHours + illustrationTotalHours + brandingH;
};
export function Step8Branding({ onNext, onBack, onUpdateData, formData }: Step8Props) {
const [selected, setSelected] = useState<BrandingSelection>(formData.branding);
const handleSelect = (option: BrandingSelection) => {
setSelected(option);
onUpdateData({ branding: option });
onNext();
};
const estimatedHours = useMemo(() => {
return calculateHours(formData, selected);
}, [selected, formData]);
return (
<div className="flex flex-col items-center text-center">
<h2 className="font-headline text-3xl font-bold tracking-tight">Have you thought about branding?</h2>
<div className="mt-8 grid w-full grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
{brandingOptions.map((option) => (
<Card
key={option.id}
onClick={() => handleSelect(option.id as BrandingSelection)}
className={`cursor-pointer transition-all duration-300 ease-in-out hover:shadow-accent/20 hover:shadow-lg hover:-translate-y-1 hover:border-primary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 ${selected === option.id ? 'border-primary shadow-lg' : ''}`}
tabIndex={0}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
handleSelect(option.id as any);
}
}}
>
<CardContent className="flex flex-col items-center justify-center p-6 gap-4">
<div className="rounded-full bg-primary/10 p-4">{option.icon}</div>
<p className="font-medium text-center">{option.title}</p>
</CardContent>
</Card>
))}
</div>
<div className="mt-16 flex w-full items-center justify-between">
<div className="flex items-center gap-2">
<Gauge className="h-6 w-6 text-primary" />
<span className="font-headline text-lg font-bold">{estimatedHours}+ hours</span>
</div>
<div className="flex items-center gap-4">
<Button variant="ghost" onClick={onBack}>Go Back</Button>
<div className="flex items-center gap-2">
<div className="w-12 h-2 bg-primary rounded-full" />
<div className="w-12 h-2 bg-primary rounded-full" />
<div className="w-12 h-2 bg-primary rounded-full" />
<div className="w-12 h-2 bg-primary rounded-full" />
<div className="w-12 h-2 bg-primary rounded-full" />
<div className="w-12 h-2 bg-primary rounded-full" />
<div className="w-12 h-2 bg-primary rounded-full" />
<div className="w-12 h-2 bg-primary rounded-full" />
</div>
<Button onClick={onNext} disabled={selected === null}>
See Results
</Button>
</div>
</div>
</div>
);
}