processing step and voice details store

packages/fakeyou.com/src/hooks/useVoiceDetailsStore.ts

@@ -0,0 +1,27 @@
+import { create } from "zustand";
+
+interface VoiceDetailsState {
+  name: string;
+  vocalType: any;
+  tags: any;
+  description: string;
+  visibility: any;
+  setName: (name: string) => void;
+  setVocalType: (vocalType: any) => void;
+  setTags: (tags: any) => void;
+  setDescription: (description: string) => void;
+  setVisibility: (visibility: any) => void;
+}
+
+export const useVoiceDetailsStore = create<VoiceDetailsState>((set) => ({
+  name: "",
+  vocalType: null,
+  tags: null,
+  description: "",
+  visibility: null,
+  setName: (name) => set({ name }),
+  setVocalType: (vocalType) => set({ vocalType }),
+  setTags: (tags) => set({ tags }),
+  setDescription: (description) => set({ description }),
+  setVisibility: (visibility) => set({ visibility }),
+}));

packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerPage.tsx

@@ -11,12 +11,18 @@ import { container } from "data/animation";
 import { UploadSamples } from "./components/steps/UploadSamples";
 import { VoiceDetails } from "./components/steps/VoiceDetails";
 import { Complete } from "./components/steps/Complete";
+import { Processing } from "./components/steps/Processing";
 
 function VoiceDesignerPage() {
   usePrefixedDocumentTitle("Voice Designer");
 
   const [currentStep, setCurrentStep] = useState(0);
-  const steps = ["Upload Samples", "Voice Details", "Complete"];
+  const steps = [
+    "Upload Samples",
+    "Voice Details",
+    "Process Voice",
+    "Complete",
+  ];
 
   const displayStep = (step: any) => {
     switch (step) {
@@ -25,6 +31,8 @@ function VoiceDesignerPage() {
       case 1:
         return <VoiceDetails />;
       case 2:
+        return <Processing />;
+      case 3:
         return <Complete />;
       default:
     }
@@ -36,8 +44,16 @@ function VoiceDesignerPage() {
     }
   };
 
-  const handleNext = () => {
-    if (currentStep < steps.length - 1) {
+  const handleNext = async () => {
+    if (currentStep === 1) {
+      // When moving from Voice Details to Processing
+      setCurrentStep(2); // Move to processing step immediately
+
+      // Simulating a 3-second delay to mimic API call
+      setTimeout(() => {
+        setCurrentStep(3);
+      }, 3000);
+    } else if (currentStep < steps.length - 1) {
       setCurrentStep(currentStep + 1);
     }
   };

packages/fakeyou.com/src/v2/view/pages/voice_designer/components/StepperControls.tsx

@@ -15,17 +15,17 @@ const StepperControls: React.FC<StepperControlsProps> = ({
 }) => {
   return (
     <>
-      {currentStep !== steps.length - 1 && (
+      {currentStep !== 3 && (
         <div className="p-3 pb-4 px-lg-4 pt-0 d-flex gap-3">
-          {currentStep !== 0 && (
+          {currentStep !== 0 && currentStep !== 2 && (
             <button className="btn btn-secondary w-100" onClick={onBack}>
               Back
             </button>
           )}
 
-          {currentStep !== steps.length - 1 && (
+          {currentStep < steps.length - 2 && (
             <button className="btn btn-primary w-100" onClick={onNext}>
-              {currentStep !== steps.length - 2 ? "Continue" : "Create Voice"}
+              {currentStep !== steps.length - 3 ? "Continue" : "Create Voice"}
             </button>
           )}
         </div>

packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/Processing.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
+
+function Processing() {
+  return (
+    <div className="d-flex justify-content-center align-items-center py-5">
+      <FontAwesomeIcon icon={faSpinner} spin size="3x" />
+      <p className="ms-3">Processing your voice data...</p>
+    </div>
+  );
+}
+
+export { Processing };

packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/VoiceDetails.tsx

@@ -4,6 +4,7 @@ import {
   faTags,
 } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useVoiceDetailsStore } from "hooks/useVoiceDetailsStore";
 import React from "react";
 import Select from "react-select";
 
@@ -23,6 +24,19 @@ export const SearchFieldClass = {
 };
 
 function VoiceDetails() {
+  const {
+    name,
+    vocalType,
+    tags,
+    description,
+    visibility,
+    setName,
+    setVocalType,
+    setTags,
+    setDescription,
+    setVisibility,
+  } = useVoiceDetailsStore();
+
   return (
     <div className="d-flex flex-column gap-4">
       <div className="row gy-4">
@@ -32,6 +46,8 @@ function VoiceDetails() {
             className="form-control"
             type="text"
             placeholder="Voice name"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
           />
         </div>
         <div className="col-12 col-md-4">
@@ -40,7 +56,11 @@ function VoiceDetails() {
             <span className="form-control-feedback">
               <FontAwesomeIcon icon={faMicrophoneLines} />
             </span>
-            <Select classNames={SearchFieldClass} />
+            <Select
+              classNames={SearchFieldClass}
+              value={vocalType}
+              onChange={(e) => setVocalType(e.target.value)}
+            />
           </div>
         </div>
       </div>
@@ -51,7 +71,11 @@ function VoiceDetails() {
           <span className="form-control-feedback">
             <FontAwesomeIcon icon={faTags} />
           </span>
-          <Select classNames={SearchFieldClass} />
+          <Select
+            classNames={SearchFieldClass}
+            value={tags}
+            onChange={(e) => setTags(e.target.value)}
+          />
         </div>
       </div>
 
@@ -60,6 +84,8 @@ function VoiceDetails() {
         <textarea
           className="form-control"
           placeholder="Describe the voice - eg. Squeaky male cartoon character voice"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
         />
       </div>
 
@@ -69,7 +95,11 @@ function VoiceDetails() {
           <span className="form-control-feedback">
             <FontAwesomeIcon icon={faEye} />
           </span>
-          <Select classNames={SearchFieldClass} />
+          <Select
+            classNames={SearchFieldClass}
+            value={visibility}
+            onChange={(e) => setVisibility(e.target.value)}
+          />
         </div>
       </div>
     </div>