Update

resources/js/modules/editor/partials/canvas/video-download/video-download-modal.jsx

@@ -4,6 +4,7 @@ import { Progress } from '@/components/ui/progress';
 import { Textarea } from '@/components/ui/textarea';
 import { Clock10Icon, Download, Droplets } from 'lucide-react';
 import { useEffect, useRef, useState } from 'react';
+import useUserStore from '@/stores/UserStore';
 
 const VideoDownloadModal = ({
     nonWatermarkVideosLeft = 0,
@@ -16,32 +17,47 @@ const VideoDownloadModal = ({
     exportStatus,
 }) => {
     const [showDebug, setShowDebug] = useState(false);
-    const [exportType, setExportType] = useState(null);
+    const [isPremiumExport, setIsPremiumExport] = useState(false);
     const [estimatedTimeRemaining, setEstimatedTimeRemaining] = useState(null);
     const [status, setStatus] = useState('start'); // 'start', 'processing', 'complete'
 
     const exportStartTime = useRef(null);
     const lastProgressTime = useRef(null);
     const lastProgress = useRef(0);
+    
+    const { premiumExportRequest, premiumExportComplete } = useUserStore();
 
-    const handleExportWithoutWatermark = () => {
-        setExportType('without');
+    const handleExportWithoutWatermark = async () => {
+        setIsPremiumExport(true);
         setEstimatedTimeRemaining(null);
-        setStatus('processing');
-        handleDownloadButton();
+        
+        // Call premiumExportRequest and check response
+        const response = await premiumExportRequest();
+        
+        if (response?.error) {
+            // Halt the process if there's an error
+            setIsPremiumExport(false);
+            return;
+        }
+        
+        if (response?.success) {
+            // Continue with export if successful
+            setStatus('processing');
+            handleDownloadButton();
+        }
     };
 
     const handleExportWithWatermark = () => {
-        setExportType('with');
+        setIsPremiumExport(false);
         setEstimatedTimeRemaining(null);
         setStatus('processing');
         handleDownloadButton();
     };
 
-    const handleClose = () => {
+    const handleClose = async () => {
         onClose();
         setTimeout(() => {
-            setExportType(null);
+            setIsPremiumExport(false);
             setEstimatedTimeRemaining(null);
             setStatus('start');
             exportStartTime.current = null;
@@ -54,8 +70,12 @@ const VideoDownloadModal = ({
     useEffect(() => {
         if (status === 'processing' && exportProgress >= 100) {
             setStatus('complete');
+            // Call premiumExportComplete immediately when export completes
+            if (isPremiumExport) {
+                premiumExportComplete();
+            }
         }
-    }, [exportProgress, status]);
+    }, [exportProgress, status, isPremiumExport, premiumExportComplete]);
 
     // Calculate estimated time remaining based on progress speed
     useEffect(() => {
@@ -183,7 +203,7 @@ const VideoDownloadModal = ({
                                     className="h-14 w-full text-base font-medium shadow-md transition-all duration-200 hover:shadow-lg"
                                     size="lg"
                                 >
-                                    Export without watermark ({nonWatermarkVideosLeft} left)
+                                    Premium Export, no watermark ({nonWatermarkVideosLeft} left)
                                 </Button>
                             )}
                             <Button
@@ -207,14 +227,14 @@ const VideoDownloadModal = ({
                     <div className="space-y-8 py-4">
                         <div className="space-y-4 text-center">
                             <div className="bg-muted mx-auto flex h-16 w-16 items-center justify-center rounded-full">
-                                {exportType === 'without' ? (
+                                {isPremiumExport ? (
                                     <Download className="h-8 w-8 animate-pulse" />
                                 ) : (
                                     <Droplets className="h-8 w-8 animate-pulse" />
                                 )}
                             </div>
                             <div className="space-y-2">
-                                <h3 className="text-xl font-semibold">Exporting {exportType === 'without' ? 'without watermark' : ''}</h3>
+                                <h3 className="text-xl font-semibold">Exporting {isPremiumExport ? 'without watermark' : ''}</h3>
 
                                 <p className="text-muted-foreground text-sm text-wrap">
                                     Please do not close this window while the export is in progress.