From c6172fd95773c98791da4d025b4f694f77280356 Mon Sep 17 00:00:00 2001
From: Leon Serfaty G <serfowi@gmail.com>
Date: Thu, 17 Jul 2025 11:04:26 +0000
Subject: [PATCH] if the user selects UI/UX design if should take them to this
 step

opti
---
 .../cost-estimator/cost-estimator-form.tsx    | 22 ++++-
 .../cost-estimator/step-11-results.tsx        | 16 +++-
 .../cost-estimator/step-12-uiux-design.tsx    | 81 +++++++++++++++++++
 3 files changed, 117 insertions(+), 2 deletions(-)
 create mode 100644 src/components/cost-estimator/step-12-uiux-design.tsx

diff --git a/src/components/cost-estimator/cost-estimator-form.tsx b/src/components/cost-estimator/cost-estimator-form.tsx
index 90e078b..65e40a9 100644
--- a/src/components/cost-estimator/cost-estimator-form.tsx
+++ b/src/components/cost-estimator/cost-estimator-form.tsx
@@ -13,6 +13,7 @@ import { Step8Branding } from './step-8-branding';
 import { Step9AdditionalFeatures } from './step-9-additional-features';
 import { Step10ShoppingCart } from './step-10-shopping-cart';
 import { Step11Results, calculateTotalHours } from './step-11-results';
+import { Step12UiUxDesign } from './step-12-uiux-design';
 import { Card, CardContent } from '@/components/ui/card';
 import { AnimatePresence, motion } from 'framer-motion';
 
@@ -41,6 +42,7 @@ export type FormData = {
   branding: BrandingSelection;
   additionalFeatures: string[];
   shoppingCart: ShoppingCartSelection;
+  uiUxDesignProcess: 'custom' | 'concepts' | null;
 };
 
 export function CostEstimatorForm() {
@@ -64,6 +66,7 @@ export function CostEstimatorForm() {
       hasCart: null,
       multiplePurchases: null,
     },
+    uiUxDesignProcess: null,
   });
   const [isPending, startTransition] = useTransition();
 
@@ -71,8 +74,12 @@ export function CostEstimatorForm() {
     startTransition(() => {
       if (currentStep === 2 && formData.serviceType === 'development') {
         setCurrentStep(5);
+      } else if (currentStep === 2 && formData.serviceType === 'ui-ux-design') {
+        setCurrentStep(12);
       } else if (currentStep === 5 && formData.serviceType === 'development') {
         setCurrentStep(9);
+      } else if (currentStep === 12) {
+        setCurrentStep(11);
       } else {
         setCurrentStep((prev) => prev + 1);
       }
@@ -85,7 +92,10 @@ export function CostEstimatorForm() {
         setCurrentStep(2);
       } else if (currentStep === 9 && formData.serviceType === 'development') {
         setCurrentStep(5);
-      } else {
+      } else if (currentStep === 12) {
+        setCurrentStep(2);
+      }
+      else {
         setCurrentStep((prev) => prev - 1);
       }
     });
@@ -115,6 +125,7 @@ export function CostEstimatorForm() {
           hasCart: null,
           multiplePurchases: null
         },
+        uiUxDesignProcess: null,
     });
     setCurrentStep(1);
   }
@@ -219,6 +230,15 @@ export function CostEstimatorForm() {
                 readyMadeHours={readyMadeHours}
             />
         )
+      case 12:
+        return (
+          <Step12UiUxDesign
+            onNext={handleNextStep}
+            onBack={handlePrevStep}
+            onUpdateData={handleUpdateFormData}
+            formData={formData}
+          />
+        );
       default:
         return (
           <Step1ProjectType
diff --git a/src/components/cost-estimator/step-11-results.tsx b/src/components/cost-estimator/step-11-results.tsx
index 0f8fbb9..300aa2b 100644
--- a/src/components/cost-estimator/step-11-results.tsx
+++ b/src/components/cost-estimator/step-11-results.tsx
@@ -35,9 +35,19 @@ const shoppingCartHoursMap = {
     simple: 60,
     multiple: 15
 };
+const uiUxDesignHoursMap = {
+    custom: 80,
+    concepts: 40,
+};
 
 
 export const calculateTotalHours = (formData: FormData) => {
+    if (formData.serviceType === 'ui-ux-design') {
+        const hours = formData.uiUxDesignProcess ? uiUxDesignHoursMap[formData.uiUxDesignProcess] : 0;
+        return { customHours: hours, readyMadeHours: Math.round(hours * 0.4) };
+    }
+
+
     const pageVal = formData.pageCount === 10 ? 50 : (formData.pageCount + 1) * 5 - 1;
     const pageHours = pageVal * 6;
     const stageHours = Math.round((formData.projectStage / 100) * 50);
@@ -68,7 +78,11 @@ export const calculateTotalHours = (formData: FormData) => {
         }
     }
 
-    const customHours = pageHours + stageHours + designHours + animationHours + illustrationTotalHours + brandingH + additionalFeaturesHours + cartHours;
+    let customHours = pageHours + stageHours + additionalFeaturesHours + cartHours;
+    if (formData.serviceType !== 'development') {
+        customHours += designHours + animationHours + illustrationTotalHours + brandingH;
+    }
+
     const readyMadeHours = Math.round(customHours * 0.4);
 
     return { customHours, readyMadeHours };
diff --git a/src/components/cost-estimator/step-12-uiux-design.tsx b/src/components/cost-estimator/step-12-uiux-design.tsx
new file mode 100644
index 0000000..931c6e8
--- /dev/null
+++ b/src/components/cost-estimator/step-12-uiux-design.tsx
@@ -0,0 +1,81 @@
+
+"use client";
+
+import type { FormData } from './cost-estimator-form';
+import { Button } from '@/components/ui/button';
+import { Gauge } from 'lucide-react';
+import React, { useState, useMemo } from 'react';
+
+type Step12Props = {
+  onNext: () => void;
+  onBack: () => void;
+  onUpdateData: (data: Partial<FormData>) => void;
+  formData: FormData;
+};
+
+const designOptions = [
+  {
+    id: 'custom',
+    title: 'Custom interface with Consultative Support',
+    hours: 80,
+  },
+  {
+    id: 'concepts',
+    title: 'I have concepts',
+    hours: 40,
+  },
+];
+
+export function Step12UiUxDesign({ onNext, onBack, onUpdateData, formData }: Step12Props) {
+  const [selectedOption, setSelectedOption] = useState<'custom' | 'concepts' | null>(formData.uiUxDesignProcess);
+
+  const handleSelect = (optionId: 'custom' | 'concepts') => {
+    setSelectedOption(optionId);
+    onUpdateData({ uiUxDesignProcess: optionId });
+  };
+
+  const estimatedHours = useMemo(() => {
+    return designOptions.find(opt => opt.id === selectedOption)?.hours ?? 0;
+  }, [selectedOption]);
+
+  return (
+    <div className="flex flex-col items-start">
+      <h2 className="font-headline text-3xl font-bold tracking-tight text-center w-full">What type of design process would you like?</h2>
+      <div className="mt-8 grid w-full grid-cols-1 gap-4">
+        {designOptions.map((option) => (
+          <Button
+            key={option.id}
+            variant={selectedOption === option.id ? 'default' : 'outline'}
+            className="w-full justify-start p-6 text-lg"
+            onClick={() => handleSelect(option.id as any)}
+          >
+            {option.title}
+          </Button>
+        ))}
+      </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}>Back</Button>
+            <div className="flex items-center gap-2">
+              <div className="w-10 h-2 bg-primary rounded-full" />
+              <div className="w-10 h-2 bg-primary rounded-full" />
+              <div className="w-10 h-2 bg-muted rounded-full" />
+              <div className="w-10 h-2 bg-muted rounded-full" />
+              <div className="w-10 h-2 bg-muted rounded-full" />
+              <div className="w-10 h-2 bg-muted rounded-full" />
+              <div className="w-10 h-2 bg-muted rounded-full" />
+              <div className="w-10 h-2 bg-muted rounded-full" />
+              <div className="w-10 h-2 bg-muted rounded-full" />
+            </div>
+            <Button onClick={onNext} disabled={!selectedOption}>
+              Next
+            </Button>
+        </div>
+      </div>
+    </div>
+  );
+}