feat: restart

src/screens/Writing/Lyrics.js

@@ -3,10 +3,12 @@ import { ScrollView, StyleSheet, Text, View } from "react-native";
 import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
 import { background, icons } from "../../assets";
 import alert from "../../components/Alert";
+import AppCheckbox from "../../components/AppCheckbox";
 import BorderGradientButton from "../../components/BorderGradientButton";
 import GradientButton from "../../components/GradientButton";
 import ItemContainer from "../../components/ItemContainer/ItemContainer";
 import MusicLandHeader from "../../components/MusicLandHeader";
+import Overlay from "../../components/Overlay";
 import firebase, { projectsRef } from "../../config/firebase";
 import { strings } from "../../constants/strings";
 import { isWeb } from "../../hooks/useLayoutType";
@@ -27,6 +29,9 @@ import {
 import { getStageAction } from "../../utils/projectStages";
 import CustomInput from "./components/CustomInput";
 
+const RESPONSIBILITY_CHECKBOX_LABEL =
+  "Vous êtes responsable du contenu que vous validez et Musicland ne sera en aucun cas tenu responsable du contenu que vous validez.";
+
 const Lyrics = ({ navigation }) => {
   const scrollRef = useRef(null);
   const [containerLayout, setContainerLayout] = useState(null);
@@ -34,6 +39,23 @@ const Lyrics = ({ navigation }) => {
   const { selectedProjectId, selectedProject } = useUser();
   const [isFocus, setIsFocus] = useState(null);
   const [itemsContainerLayout, setItemsContainerLayout] = useState([]);
+  const [sensitiveContentModal, setSensitiveContentModal] = useState({
+    visible: false,
+    title: "",
+    message: "",
+  });
+  const [isSensitiveContentAcknowledged, setIsSensitiveContentAcknowledged] =
+    useState(false);
+  const sensitiveContentResolverRef = useRef(null);
+
+  const closeSensitiveContentModal = useCallback((result) => {
+    setSensitiveContentModal((prev) => ({ ...prev, visible: false }));
+    setIsSensitiveContentAcknowledged(false);
+    if (sensitiveContentResolverRef.current) {
+      sensitiveContentResolverRef.current(result);
+      sensitiveContentResolverRef.current = null;
+    }
+  }, []);
 
   // Effective sources from provider only
   const projectTitle = selectedProject?.title || "";
@@ -129,24 +151,26 @@ const Lyrics = ({ navigation }) => {
     alert(title, message);
   }, []);
 
-  const confirmSensitiveContent = useCallback(
-    (title, message) =>
-      new Promise((resolve) => {
-        alert(title, message, [
-          {
-            text: "Annuler",
-            style: "cancel",
-            onPress: () => resolve(false),
-          },
-          {
-            text: "Continuer",
-            style: "destructive",
-            onPress: () => resolve(true),
-          },
-        ]);
-      }),
-    []
-  );
+  const confirmSensitiveContent = useCallback((title, message) => {
+    return new Promise((resolve) => {
+      sensitiveContentResolverRef.current = resolve;
+      setSensitiveContentModal({
+        visible: true,
+        title,
+        message,
+      });
+      setIsSensitiveContentAcknowledged(false);
+    });
+  }, []);
+
+  const handleSensitiveCancel = useCallback(() => {
+    closeSensitiveContentModal(false);
+  }, [closeSensitiveContentModal]);
+
+  const handleSensitiveConfirm = useCallback(() => {
+    if (!isSensitiveContentAcknowledged) return;
+    closeSensitiveContentModal(true);
+  }, [closeSensitiveContentModal, isSensitiveContentAcknowledged]);
 
   const onValidate = useCallback(async () => {
     try {
@@ -461,6 +485,49 @@ const Lyrics = ({ navigation }) => {
         )}
         <GradientButton title="Valider" onPress={onValidate} />
       </View>
+      <Overlay
+        isVisible={sensitiveContentModal.visible}
+        setIsVisible={(visible) => {
+          if (visible === false) {
+            handleSensitiveCancel();
+          }
+        }}
+        contentContainerStyle={{
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <View style={styles.sensitiveModal}>
+          <Text style={styles.sensitiveModalTitle}>
+            {sensitiveContentModal.title}
+          </Text>
+          <Text style={styles.sensitiveModalMessage}>
+            {sensitiveContentModal.message}
+          </Text>
+          <View style={styles.sensitiveCheckboxWrapper}>
+            <AppCheckbox
+              selected={isSensitiveContentAcknowledged}
+              onPress={() =>
+                setIsSensitiveContentAcknowledged((prev) => !prev)
+              }
+              label={RESPONSIBILITY_CHECKBOX_LABEL}
+            />
+          </View>
+          <View style={styles.sensitiveModalActions}>
+            <BorderGradientButton
+              title="Annuler"
+              onPress={handleSensitiveCancel}
+              containerStyle={{ flex: 1 }}
+            />
+            <GradientButton
+              title="Continuer"
+              onPress={handleSensitiveConfirm}
+              disabled={!isSensitiveContentAcknowledged}
+              containerStyle={{ flex: 1 }}
+            />
+          </View>
+        </View>
+      </Overlay>
     </Page>
   );
 };
@@ -513,4 +580,34 @@ const styles = StyleSheet.create({
     color: Palette.white,
     opacity: 0.8,
   },
+  sensitiveModal: {
+    width: "90%",
+    maxWidth: 460,
+    backgroundColor: Palette.lightPurple,
+    borderRadius: 18,
+    paddingVertical: 24,
+    paddingHorizontal: 20,
+    gap: 16,
+  },
+  sensitiveModalTitle: {
+    fontFamily: FONT_FAMILY.InterSemiBold,
+    fontSize: 20,
+    color: Palette.white,
+    textAlign: "center",
+  },
+  sensitiveModalMessage: {
+    fontFamily: FONT_FAMILY.InterRegular,
+    fontSize: 15,
+    color: Palette.white,
+    lineHeight: 20,
+    textAlign: "left",
+    opacity: 0.9,
+  },
+  sensitiveCheckboxWrapper: {
+    paddingVertical: 4,
+  },
+  sensitiveModalActions: {
+    flexDirection: "row",
+    gap: 12,
+  },
 });