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

onthis step, "No" is preselected and I have to click on that "No " optio

Browse Source
This commit is contained in:
Leon Serfaty G
2025-07-18 04:41:27 +00:00
parent de13810f4d
commit c64a5a3d00
1 changed files with 42 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/cost-estimator/step-7-illustrations.tsx
+37 -26
View File
@@ -1,3 +1,4 @@
"use client";
import type { FormData, IllustrationSelection } from './cost-estimator-form';
@@ -56,20 +57,32 @@ const calculateHours = (
export function Step7Illustrations({ onNext, onBack, onUpdateData, formData }: Step7Props) {
const [selections, setSelections] = useState<IllustrationSelection>(formData.illustrations);
const [noIllustrations, setNoIllustrations] = useState(false);
const [noIllustrations, setNoIllustrations] = useState(
!formData.illustrations.has2d && !formData.illustrations.has3d
);
useEffect(() => {
const no2d = !selections.has2d || selections.is2dAnimated === null;
const no3d = !selections.has3d || selections.is3dAnimated === null;
const noIllustrationsSelected = !selections.has2d && !selections.has3d;
setNoIllustrations(noIllustrationsSelected);
}, [selections]);
onUpdateData({ illustrations: selections });
}, [selections, onUpdateData]);
const handleUpdate = (newSelections: Partial<IllustrationSelection>) => {
const updated = { ...selections, ...newSelections };
setSelections(updated);
onUpdateData({ illustrations: updated });
if(updated.has2d || updated.has3d) {
const handle2dCheck = (checked: boolean) => {
setSelections(prev => ({
...prev,
has2d: checked,
is2dAnimated: checked ? prev.is2dAnimated || 'static' : null,
}));
if (checked) {
setNoIllustrations(false);
}
};
const handle3dCheck = (checked: boolean) => {
setSelections(prev => ({
...prev,
has3d: checked,
is3dAnimated: checked ? prev.is3dAnimated || 'static' : null,
}));
if (checked) {
setNoIllustrations(false);
}
};
@@ -77,24 +90,22 @@ export function Step7Illustrations({ onNext, onBack, onUpdateData, formData }: S
const handleNoIllustrationsChange = (checked: boolean) => {
setNoIllustrations(checked);
if (checked) {
const resetSelections = {
setSelections({
has2d: false,
is2dAnimated: null,
has3d: false,
is3dAnimated: null,
};
setSelections(resetSelections);
onUpdateData({ illustrations: resetSelections });
});
}
}
const handle2dCheck = (checked: boolean) => {
handleUpdate({ has2d: checked, is2dAnimated: checked ? selections.is2dAnimated || 'static' : null });
};
const handle3dCheck = (checked: boolean) => {
handleUpdate({ has3d: checked, is3dAnimated: checked ? selections.is3dAnimated || 'static' : null });
};
const handleUpdateRadio = (type: '2d' | '3d', value: 'static' | 'animated') => {
if (type === '2d') {
setSelections(prev => ({...prev, is2dAnimated: value}));
} else {
setSelections(prev => ({...prev, is3dAnimated: value}));
}
}
const estimatedHours = useMemo(() => {
return calculateHours(
@@ -115,13 +126,13 @@ export function Step7Illustrations({ onNext, onBack, onUpdateData, formData }: S
<div className="space-y-4 rounded-lg border p-4">
<div className="flex items-center space-x-2">
<Checkbox id="2d-illustrations" checked={selections.has2d} onCheckedChange={handle2dCheck} disabled={noIllustrations} />
<Checkbox id="2d-illustrations" checked={selections.has2d} onCheckedChange={handle2dCheck} />
<Label htmlFor="2d-illustrations" className="text-lg">Yes, I need eye-catching 2D illustrations</Label>
</div>
{selections.has2d && (
<RadioGroup
value={selections.is2dAnimated || undefined}
onValueChange={(value: 'static' | 'animated') => handleUpdate({ is2dAnimated: value })}
onValueChange={(value: 'static' | 'animated') => handleUpdateRadio('2d', value)}
className="ml-6 space-y-2"
>
<div className="flex items-center space-x-2">
@@ -138,13 +149,13 @@ export function Step7Illustrations({ onNext, onBack, onUpdateData, formData }: S
<div className="space-y-4 rounded-lg border p-4">
<div className="flex items-center space-x-2">
<Checkbox id="3d-illustrations" checked={selections.has3d} onCheckedChange={handle3dCheck} disabled={noIllustrations} />
<Checkbox id="3d-illustrations" checked={selections.has3d} onCheckedChange={handle3dCheck} />
<Label htmlFor="3d-illustrations" className="text-lg">Yes, let's add some gorgeous 3D illustrations</Label>
</div>
{selections.has3d && (
<RadioGroup
value={selections.is3dAnimated || undefined}
onValueChange={(value: 'static' | 'animated') => handleUpdate({ is3dAnimated: value })}
onValueChange={(value: 'static' | 'animated') => handleUpdateRadio('3d', value)}
className="ml-6 space-y-2"
>
<div className="flex items-center space-x-2">