fix of the day, payment + sub + music generation

src/screens/Studio/ComposeSong.web.js

@@ -32,6 +32,7 @@ const { width: windowWidth } = Dimensions.get("window");
 const MUSIC_GENERATION_COIN_COST = 8;
 const CONFIRM_MODAL_MAX_WIDTH = 540;
 const FUNCTIONS_REGION = "europe-west1";
+const VOICE_SECTION_TITLES = ["BASE", "SENSIBILITÉ", "TECHNIQUE"];
 
 const ComposeSong = () => {
   const scrollRef = useRef(null);
@@ -71,20 +72,68 @@ const ComposeSong = () => {
     return 0;
   }, [currentUserData?.coins]);
 
+  const steps = useMemo(
+    () => [
+      {
+        key: "genres",
+        render: () => <ChooseGenre selected={genres} setSelected={setGenres} />,
+      },
+      ...VOICE_SECTION_TITLES.map((section) => ({
+        key: `voice-${section}`,
+        render: () => (
+          <CustomizeVoice
+            category={section}
+            selected={voice}
+            setSelected={setVoice}
+          />
+        ),
+      })),
+      {
+        key: "instruments",
+        render: () => (
+          <ChooseInstruments
+            selected={instruments}
+            setSelected={setInstruments}
+          />
+        ),
+      },
+      {
+        key: "rhythm",
+        render: () => (
+          <ChooseRhythm selected={rhythm} setSelected={setRhythm} />
+        ),
+      },
+    ],
+    [genres, voice, instruments, rhythm]
+  );
+
+  const totalSteps = steps.length;
+  const lastStepIndex = totalSteps - 1;
+  const instrumentStepIndex = Math.max(lastStepIndex - 1, 0);
+
   const isStepValid = useMemo(() => {
-    switch (selectedIndex) {
-      case 0:
-        return Array.isArray(genres) && genres.length > 0;
-      case 1:
-        return !!(voice && typeof voice === "object" && voice.BASE);
-      case 2:
-        return Array.isArray(instruments) && instruments.length > 0;
-      case 3:
-        return !!rhythm;
-      default:
-        return true;
+    if (selectedIndex === 0) {
+      return Array.isArray(genres) && genres.length > 0;
     }
-  }, [selectedIndex, genres, voice, instruments, rhythm]);
+    if (selectedIndex === 1) {
+      return !!(voice && typeof voice === "object" && voice.BASE);
+    }
+    if (selectedIndex === instrumentStepIndex) {
+      return Array.isArray(instruments) && instruments.length > 0;
+    }
+    if (selectedIndex === lastStepIndex) {
+      return !!rhythm;
+    }
+    return true;
+  }, [
+    selectedIndex,
+    genres,
+    voice,
+    instruments,
+    rhythm,
+    instrumentStepIndex,
+    lastStepIndex,
+  ]);
 
   const musicConfig = useMemo(() => {
     let lyricsArr = [];
@@ -114,36 +163,6 @@ const ComposeSong = () => {
     };
   }, [selectedProject, genres, voice, instruments, rhythm, selectedProjectId]);
 
-  const steps = useMemo(
-    () => [
-      {
-        key: "genres",
-        render: () => <ChooseGenre selected={genres} setSelected={setGenres} />,
-      },
-      {
-        key: "voice",
-        render: () => (
-          <CustomizeVoice selected={voice} setSelected={setVoice} />
-        ),
-      },
-      {
-        key: "instruments",
-        render: () => (
-          <ChooseInstruments
-            selected={instruments}
-            setSelected={setInstruments}
-          />
-        ),
-      },
-      {
-        key: "rhythm",
-        render: () => (
-          <ChooseRhythm selected={rhythm} setSelected={setRhythm} />
-        ),
-      },
-    ],
-    [genres, voice, instruments, rhythm]
-  );
 
   useEffect(() => {
     const nextProgress = 18 + selectedIndex * 9;