payment modal complated

src/widgets/fileUpload/lib/usePlagiraism.ts

@@ -30,6 +30,7 @@ export function usePlagiarismForm() {
 
   const [form, setForm] = useState<PlagiarismFormState>(INITIAL_FORM);
   const [errors, setErrors] = useState<PlagiarismFormErrors>({});
+  const [isPaymentOpen, setIsPaymentOpen] = useState(false);
   const [submission, setSubmission] =
     useState<SubmissionState>(INITIAL_SUBMISSION);
 
@@ -51,37 +52,43 @@ export function usePlagiarismForm() {
 
   // ── Submission ───────────────────────────────────────────────────────────
 
-  const handleSubmit = useCallback(
+  // 1. Wrap the form's onSubmit to intercept the event properly
+  const handleSubmitWithModal = useCallback(
     async (e: React.FormEvent) => {
       e.preventDefault();
 
+      // Run validation first
       const validationErrors = validatePlagiarismForm(form);
       if (!isFormValid(validationErrors)) {
         setErrors(validationErrors);
-        return;
+        return; // Don't open modal if invalid
       }
 
-      setSubmission({ status: 'loading', response: null, error: null });
-
-      try {
-        const response = await submitPlagiarismCheck({
-          topic: form.topic.trim(),
-          senderFullName,
-          file: form.file!,
-          withCertificate: form.withCertificate,
-        });
-
-        setSubmission({ status: 'success', response, error: null });
-        setForm(INITIAL_FORM); // Reset form on success
-      } catch (err) {
-        const message =
-          err instanceof Error ? err.message : 'An unexpected error occurred.';
-        setSubmission({ status: 'error', response: null, error: message });
-      }
+      // Validation passed → open the payment modal
+      setIsPaymentOpen(true);
     },
-    [form, senderFullName],
+    [form],
   );
 
+  const handleSubmit = useCallback(async () => {
+    setSubmission({ status: 'loading', response: null, error: null });
+    try {
+      const response = await submitPlagiarismCheck({
+        topic: form.topic.trim(),
+        senderFullName,
+        file: form.file!,
+        withCertificate: form.withCertificate,
+      });
+      setSubmission({ status: 'success', response, error: null });
+      setForm(INITIAL_FORM);
+      setIsPaymentOpen(false); // Close modal on success
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : 'An unexpected error occurred.';
+      setSubmission({ status: 'error', response: null, error: message });
+    }
+  }, [form, senderFullName]);
+
   const resetSubmission = useCallback(() => {
     setSubmission(INITIAL_SUBMISSION);
   }, []);
@@ -101,5 +108,8 @@ export function usePlagiarismForm() {
     toggleCertificate,
     handleSubmit,
     resetSubmission,
+    handleSubmitWithModal,
+    setIsPaymentOpen,
+    isPaymentOpen,
   };
 }