Update

app/Helpers/FirstParty/Purchase/SubscriptionHelper.php

@@ -89,26 +89,33 @@ private static function handleSubscriptionDelete(WebhookReceived $event)
 
         if ($user) {
 
-            $plan = Plan::where('tier', 'free')->first();
+            foreach ($object['items']['data'] as $line_item) {
 
-            if ($plan) {
+                $stripe_price_id = $line_item['plan']['id'];
-                $user_plan = UserPlan::where('user_id', $user->id)->first();
 
-                if ($user_plan) {
+                $subscription_config = PurchaseHelper::getSubscriptionPlanByStripePriceID($stripe_price_id);
-                    $user_plan->update([
+
-                        'plan_id' => $plan->id,
+                if ($subscription_config['type'] == 'subscription_plans') {
-                        'current_period_end' => null,
+                    $free_plan = Plan::where('tier', 'free')->first();
-                        'cancel_at' => null,
+
-                        'canceled_at' => null,
+                    $user_plan = UserPlan::where('user_id', $user->id)->first();
-                    ]);
+
-                } else {
+                    if ($user_plan) {
-                    $user_plan = UserPlan::create([
+                        $user_plan->update([
-                        'user_id' => $user->id,
+                            'plan_id' => $free_plan->id,
-                        'plan_id' => $plan->id,
+                            'current_period_end' => null,
-                        'current_period_end' => null,
+                            'cancel_at' => null,
-                        'cancel_at' => null,
+                            'canceled_at' => null,
-                        'canceled_at' => null,
+                        ]);
-                    ]);
+                    } else {
+                        $user_plan = UserPlan::create([
+                            'user_id' => $user->id,
+                            'plan_id' => $free_plan->id,
+                            'current_period_end' => null,
+                            'cancel_at' => null,
+                            'canceled_at' => null,
+                        ]);
+                    }
                 }
             }
         }

app/Helpers/FirstParty/Purchase/WatermarkUsageHelper.php

@@ -14,6 +14,44 @@ public static function handleWatermarkUsageWebhookEvents(WebhookReceived $event)
             case 'invoice.paid':
                 self::handleInvoicePaid($event);
                 break;
+
+            case 'customer.subscription.deleted':
+                self::handleClearWatermarkCredits($event);
+                break;
+        }
+    }
+
+    private static function handleClearWatermarkCredits(WebhookReceived $event)
+    {
+        $object = StripeHelper::getEventObject($event);
+
+        $user = StripeHelper::getUserByStripeID($object['customer']);
+
+        if ($user) {
+
+            foreach ($object['items']['data'] as $line_item) {
+
+                $stripe_price_id = $line_item['plan']['id'];
+
+                $subscription_config = PurchaseHelper::getSubscriptionPlanByStripePriceID($stripe_price_id);
+
+                if ($subscription_config['type'] == 'subscription_plans') {
+                    // revert the watermark credits back to 0
+
+                    $user_usage = UserUsage::where('user_id', $user->id)->first();
+
+                    if ($user_usage) {
+                        $user_usage->update([
+                            'non_watermark_videos_left' => 0,
+                        ]);
+                    } else {
+                        $user_usage = UserUsage::create([
+                            'user_id' => $user->id,
+                            'non_watermark_videos_left' => 0,
+                        ]);
+                    }
+                }
+            }
         }
     }
 

app/Http/Controllers/UserExportController.php

@@ -0,0 +1,62 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class UserExportController extends Controller
+{
+    public function premiumExportRequest(Request $request)
+    {
+
+        $user = Auth::user();
+
+        $user->load('user_usage');
+
+        if ($user->user_usage->non_watermark_videos_left <= 0) {
+            return response()->json([
+                'error' => [
+                    'message' => 'You have no credits left to export.',
+                ],
+            ]);
+        }
+
+        return response()->json([
+            'success' => [
+                'data' => [
+                    'user_usage' => $user->user_usage,
+                ],
+            ],
+        ]);
+    }
+
+    public function premiumExportComplete(Request $request)
+    {
+        $user = Auth::user();
+
+        $user->load('user_usage');
+
+        if ($user->user_usage->non_watermark_videos_left <= 0) {
+            return response()->json([
+                'error' => [
+                    'message' => 'You have no credits left to export.',
+                ],
+            ]);
+        }
+
+        $user->user_usage->update([
+            'non_watermark_videos_left' => $user->user_usage->non_watermark_videos_left - 1,
+        ]);
+
+        $user->user_usage->refresh();
+
+        return response()->json([
+            'success' => [
+                'data' => [
+                    'user_usage' => $user->user_usage,
+                ],
+            ],
+        ]);
+    }
+}

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 = () => {
+    const handleExportWithoutWatermark = async () => {
-        setExportType('without');
+        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.

resources/js/modules/editor/partials/canvas/video-export.jsx

@@ -689,13 +689,46 @@ const useVideoExport = ({ timelineElements, dimensions, totalDuration, watermark
             const data = new Uint8Array(fileData);
 
             const blob = new Blob([data.buffer], { type: 'video/mp4' });
-            const url = URL.createObjectURL(blob);
+            const epochTimestamp = Date.now();
+            const fileName = `memeaigen-${epochTimestamp}.mp4`;
 
-            const link = document.createElement('a');
+            // Check if mobile and supports navigator.share
-            link.href = url;
+            const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-            link.download = 'exported_video.mp4';
+            const canShare = isMobile && navigator.share && navigator.canShare;
-            link.click();
+
-            URL.revokeObjectURL(url);
+            if (canShare) {
+                try {
+                    const files = [new File([blob], fileName, { type: "video/mp4" })];
+                    if (navigator.canShare({ files })) {
+                        await navigator.share({ files });
+                    } else {
+                        // Fallback to download if sharing files isn't supported
+                        const url = URL.createObjectURL(blob);
+                        const link = document.createElement('a');
+                        link.href = url;
+                        link.download = fileName;
+                        link.click();
+                        URL.revokeObjectURL(url);
+                    }
+                } catch (shareError) {
+                    console.log('Share failed, falling back to download:', shareError);
+                    // Fallback to download
+                    const url = URL.createObjectURL(blob);
+                    const link = document.createElement('a');
+                    link.href = url;
+                    link.download = fileName;
+                    link.click();
+                    URL.revokeObjectURL(url);
+                }
+            } else {
+                // Desktop or unsupported mobile - use download
+                const url = URL.createObjectURL(blob);
+                const link = document.createElement('a');
+                link.href = url;
+                link.download = fileName;
+                link.click();
+                URL.revokeObjectURL(url);
+            }
 
             setExportProgress(100);
             setExportStatus('Complete!');

resources/js/modules/editor/partials/editor-header.jsx

@@ -15,7 +15,7 @@ const EditorHeader = ({ className = '', onNavClick = () => {}, isNavActive = fal
     };
 
     return (
-        <div className={cn('flex w-full items-center justify-between rounded-xl bg-white p-2 shadow-sm dark:bg-neutral-700', className)}>
+        <div className={cn('flex w-full items-center justify-between rounded-xl bg-white p-2 shadow-sm dark:bg-neutral-800', className)}>
             <Button onClick={onNavClick} variant="outline" size="icon" className="rounded">
                 <Menu className="h-8 w-8" />
             </Button>

resources/js/modules/upgrade/upgrade-sheet.jsx

@@ -122,7 +122,7 @@ const UpgradeSheet = () => {
                         <div id="stats">
                             <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                                 {/* Non-watermark Exports */}
-                                {user_usage?.non_watermark_videos_left && (
+                                {user_usage?.non_watermark_videos_left != null && (
                                     <div className="bg-card relative overflow-hidden rounded-xl border p-6 shadow-sm">
                                         <div className="relative z-10">
                                             <div className="mb-2 flex items-center gap-2">

resources/js/stores/UserStore.js

@@ -1,5 +1,6 @@
 import axiosInstance from '@/plugins/axios-plugin';
 import { mountStoreDevtool } from 'simple-zustand-devtools';
+import { toast } from 'sonner';
 import { route } from 'ziggy-js';
 import { create } from 'zustand';
 import { devtools } from 'zustand/middleware';
@@ -56,6 +57,47 @@ const useUserStore = create(
                 set({ isLoadingUser: false });
             }
         },
+
+        premiumExportRequest: async () => {
+            try {
+                const response = await axiosInstance.post(route('api.user.premium_export.request'));
+
+                if (response?.data?.success?.data?.user_usage) {
+                    set({
+                        user_usage: response.data.success.data.user_usage,
+                    });
+                }
+
+                if (response?.data?.error?.message) {
+                    toast.error(response.data.error.message);
+                }
+                return response.data;
+            } catch (error) {
+                console.error(route('api.user.premium_export.request'));
+                console.error('Error fetching:', error);
+            }
+        },
+
+        premiumExportComplete: async () => {
+            try {
+                const response = await axiosInstance.post(route('api.user.premium_export.complete'));
+
+                if (response?.data?.success?.data?.user_usage) {
+                    set({
+                        user_usage: response.data.success.data.user_usage,
+                    });
+                }
+
+                if (response?.data?.error?.message) {
+                    toast.error(response.data.error.message);
+                }
+
+                return response.data;
+            } catch (error) {
+                console.error(route('api.user.premium_export.complete'));
+                console.error('Error fetching:', error);
+            }
+        },
     })),
     {
         name: 'UserStore',

routes/api.php

@@ -3,6 +3,7 @@
 use App\Http\Controllers\Auth\SanctumAuthController;
 use App\Http\Controllers\FrontMediaController;
 use App\Http\Controllers\UserAccountController;
+use App\Http\Controllers\UserExportController;
 use App\Http\Controllers\UserPurchaseController;
 use Illuminate\Support\Facades\Route;
 
@@ -26,6 +27,10 @@
         Route::post('/billing-portal', [UserPurchaseController::class, 'billingPortal'])->name('api.user.billing_portal');
 
         Route::post('/logout', [SanctumAuthController::class, 'logout']);
+
+        Route::post('/premium-export/request', [UserExportController::class, 'premiumExportRequest'])->name('api.user.premium_export.request');
+
+        Route::post('/premium-export/complete', [UserExportController::class, 'premiumExportComplete'])->name('api.user.premium_export.complete');
     });
 });