clear lot of tickets

src/screens/cover/ChooseCoverType.js

@@ -16,6 +16,7 @@ import { useUserData } from "../../providers/UserDataProvider";
 import { gutters, Palette } from "../../styles";
 import { FONT_FAMILY } from "../../styles/Fonts";
 import { buildFullName } from "../../utils/artistName";
+import { background } from "../../assets";
 
 export const ChooseCoverType = () => {
   const [showIntro, setShowIntro] = useState(true);
@@ -26,14 +27,9 @@ export const ChooseCoverType = () => {
   const [savingChoice, setSavingChoice] = useState(false);
   const [savingPseudo, setSavingPseudo] = useState(false);
 
-  const {
-    selectedProject,
-    selectedProjectId,
-    updateProjectData,
-    currentUserData,
-    currentUID,
-  } = useUserData();
-  const { setIsLoading, setTooltip } = useMinuit();
+  const { selectedProject, selectedProjectId, currentUserData, currentUID } =
+    useUserData();
+  const { setTooltip } = useMinuit();
 
   const projectId = selectedProject?.id || selectedProjectId || null;
   const hasFinalCover = !!selectedProject?.coverUrl;
@@ -53,7 +49,7 @@ export const ChooseCoverType = () => {
       currentUserData?.firstName,
       currentUserData?.lastName,
       currentUserData?.displayName,
-    ]
+    ],
   );
 
   useEffect(() => {
@@ -73,7 +69,7 @@ export const ChooseCoverType = () => {
       setPendingAction(() => nextAction);
       setChoiceVisible(true);
     },
-    [hasArtistPreference]
+    [hasArtistPreference],
   );
 
   const runPendingAction = useCallback(async () => {
@@ -117,7 +113,7 @@ export const ChooseCoverType = () => {
         console.log("update current project userName error", error?.message);
       }
     },
-    [currentUID, projectId]
+    [currentUID, projectId],
   );
 
   // const pickUserImage = useCallback(async () => {
@@ -252,7 +248,7 @@ export const ChooseCoverType = () => {
           artistNamePreference: "CUSTOM",
           updatedAt: firebase.firestore.FieldValue.serverTimestamp(),
         },
-        { merge: true }
+        { merge: true },
       );
       await applyDisplayNameToProjects(value);
       setTooltip({ type: "success", text: "Pseudo enregistré" });
@@ -277,7 +273,7 @@ export const ChooseCoverType = () => {
 
   return (
     <Page
-      // backgroundImg={background.studioBG2}
+      backgroundImg={background.studioBG2}
       backgroundColor={"#2A2E33"}
       headerType="NONE"
     >
@@ -373,6 +369,9 @@ export const ChooseCoverType = () => {
               <Text style={styles.modalDescription}>
                 Choisis le nom qui sera visible sur tes musiques.
               </Text>
+              <Text style={styles.modalWarning}>
+                Attention : tu ne pourras plus le modifier ensuite.
+              </Text>
               <View style={styles.inputWrapper}>
                 <Input
                   placeholder="Nom d'artiste"
@@ -437,6 +436,12 @@ const styles = StyleSheet.create({
     fontFamily: FONT_FAMILY.InterRegular,
     textAlign: "center",
   },
+  modalWarning: {
+    fontSize: 13,
+    color: Palette.orange,
+    fontFamily: FONT_FAMILY.InterSemiBold,
+    textAlign: "center",
+  },
   modalButtons: {
     width: "80%",
     alignSelf: "center",

src/screens/cover/PouchReady.js

@@ -10,8 +10,7 @@ import {
   TextInput,
   View,
 } from "react-native";
-import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
-import { icons } from "../../assets";
+import { background, icons } from "../../assets";
 import alert from "../../components/Alert";
 import AppCheckbox from "../../components/AppCheckbox";
 import BorderGradientButton from "../../components/BorderGradientButton";
@@ -20,6 +19,7 @@ import MusicLandHeader from "../../components/MusicLandHeader";
 import firebase, { tasksRef } from "../../config/firebase";
 import loaderMessages from "../../config/loaderMessages";
 import { isWeb } from "../../hooks/useLayoutType";
+import useGlobalLoading from "../../hooks/useGlobalLoading";
 import Page from "../../layouts/Page";
 import { Routes } from "../../navigation";
 import { goBack, navigate } from "../../navigation/NavigationService";
@@ -38,7 +38,7 @@ const COVER_STYLE_PRESETS = [
 
 const PouchReady = () => {
   const { selectedProjectId, selectedProject, updateProjectData } = useUser();
-  const { setIsLoading } = useMinuit();
+  const { setLoading } = useGlobalLoading();
   const isGenerating = selectedProject?.coverStatus === "GENERATING";
   const coverOptions = useMemo(() => {
     if (!Array.isArray(selectedProject?.cover?.options)) {
@@ -53,21 +53,37 @@ const PouchReady = () => {
       return null;
     }
     const found = coverOptions.find(
-      (option) => option?.id === selectedOptionId
+      (option) => option?.id === selectedOptionId,
     );
     return found || coverOptions[0] || null;
   }, [coverOptions, selectedOptionId]);
   const coverBackgroundMessage = isWeb
     ? loaderMessages.pouchReadyGenerationWeb
     : "";
+  const generationLoadingMessage = useMemo(() => {
+    if (typeof coverBackgroundMessage === "string") {
+      const trimmedMessage = coverBackgroundMessage.trim();
+      if (trimmedMessage.length) {
+        return trimmedMessage;
+      }
+    }
+    return "Nous lançons la génération de ta pochette...";
+  }, [coverBackgroundMessage]);
 
   const [styleMode, setStyleMode] = useState("preset");
   const [selectedPresetStyle, setSelectedPresetStyle] = useState(
-    COVER_STYLE_PRESETS[0]
+    COVER_STYLE_PRESETS[0],
   );
   const [customStyle, setCustomStyle] = useState("");
   const [isPresetDropdownOpen, setIsPresetDropdownOpen] = useState(false);
   const [isSelecting, setIsSelecting] = useState(false);
+  const [isAwaitingGenerationStart, setIsAwaitingGenerationStart] =
+    useState(false);
+
+  const showGenerationLoading = useCallback(async () => {
+    setIsAwaitingGenerationStart(true);
+    await setLoading(true, { message: generationLoadingMessage });
+  }, [generationLoadingMessage, setLoading]);
 
   useEffect(() => {
     const projectStyle = (selectedProject?.coverStyle || "").trim();
@@ -106,12 +122,12 @@ const PouchReady = () => {
         return;
       }
       try {
-        await setIsLoading(true);
+        await showGenerationLoading();
         await updateProjectData(
           {
             coverStyle: trimmedStyle,
           },
-          { merge: true }
+          { merge: true },
         );
         await tasksRef.add({
           type: "cover",
@@ -121,11 +137,17 @@ const PouchReady = () => {
         });
       } catch (e) {
         console.log("Cover task error", e?.message);
-      } finally {
-        setIsLoading(false);
+        setIsAwaitingGenerationStart(false);
+        await setLoading(false);
       }
     },
-    [hasGeneratedOptions, selectedProjectId, setIsLoading, updateProjectData]
+    [
+      hasGeneratedOptions,
+      selectedProjectId,
+      setLoading,
+      showGenerationLoading,
+      updateProjectData,
+    ],
   );
 
   const requestCoverGeneration = useCallback(() => {
@@ -196,7 +218,7 @@ const PouchReady = () => {
       selectedOptionId,
       selectedProject?.cover,
       updateProjectData,
-    ]
+    ],
   );
 
   const onValidatePicture = useCallback(async () => {
@@ -204,7 +226,9 @@ const PouchReady = () => {
       return;
     }
     try {
-      await setIsLoading(true);
+      await setLoading(true, {
+        message: "Validation de la pochette en cours...",
+      });
       const existingCover = selectedProject?.cover || {};
       const finalUrl =
         selectedOption.finalUrl || selectedOption.generatedUrl || null;
@@ -226,7 +250,7 @@ const PouchReady = () => {
         coverUrl: finalUrl,
       };
       const playbackStage = getStageAction("director", projectForStage);
-      await setIsLoading(false);
+      await setLoading(false);
       alert(
         "Malik",
         "Super ! Ta pochette est validée. Tu peux retourner à l'accueil ou continuer avec John pour produire ton playback.",
@@ -246,19 +270,19 @@ const PouchReady = () => {
               navigate(targetRoute, params);
             },
           },
-        ]
+        ],
       );
     } catch (e) {
       console.log("PouchReady: unable to validate cover", e?.message);
     } finally {
-      await setIsLoading(false);
+      await setLoading(false);
     }
   }, [
     coverOptions,
     navigate,
     selectedOption,
     selectedProject,
-    setIsLoading,
+    setLoading,
     updateProjectData,
   ]);
 
@@ -272,8 +296,31 @@ const PouchReady = () => {
     isGenerating ||
     (hasGeneratedOptions ? !selectedOption || isSelecting : true);
 
+  useEffect(() => {
+    if (!isAwaitingGenerationStart) {
+      return;
+    }
+    if (isGenerating) {
+      setIsAwaitingGenerationStart(false);
+      setLoading(false);
+    }
+  }, [isAwaitingGenerationStart, isGenerating, setLoading]);
+
+  useEffect(
+    () => () => {
+      if (isAwaitingGenerationStart) {
+        setIsAwaitingGenerationStart(false);
+        setLoading(false);
+      }
+    },
+    [isAwaitingGenerationStart, setLoading],
+  );
+
   return (
-    <Page backgroundColor={"#2A2E33"} headerType="NONE">
+    <Page
+      backgroundImg={isWeb ? background.productionBG2 : background.studioBG}
+      headerType="NONE"
+    >
       <MusicLandHeader onPressBack={goBack} progress={72} />
       <View style={{ flex: 1, marginTop: 0 }}>
         <CreateLyricsHeader