Implement package limit notification system

resources/js/guest/services/photosApi.ts

@@ -1,5 +1,11 @@
 import { getDeviceId } from '../lib/device';
 
+export type UploadError = Error & {
+  code?: string;
+  status?: number;
+  meta?: Record<string, unknown>;
+};
+
 function getCsrfToken(): string | null {
   // Method 1: Meta tag (preferred for SPA)
   const metaToken = document.querySelector('meta[name="csrf-token"]');
@@ -56,16 +62,30 @@ export async function likePhoto(id: number): Promise<number> {
   });
   
   if (!res.ok) {
-    const errorText = await res.text();
+    let payload: any = null;
+    try {
+      payload = await res.clone().json();
+    } catch {}
+
     if (res.status === 419) {
-      throw new Error('CSRF Token mismatch. This usually means:\n\n' +
-        '1. The page needs to be refreshed\n' +
-        '2. Check if <meta name="csrf-token"> is present in HTML source\n' +
-        '3. API routes might need CSRF exemption in VerifyCsrfToken middleware');
+      const error: UploadError = new Error('CSRF token mismatch. Please refresh the page and try again.');
+      error.code = 'csrf_mismatch';
+      error.status = res.status;
+      throw error;
     }
-    throw new Error(`Like failed: ${res.status} - ${errorText}`);
+
+    const error: UploadError = new Error(
+      payload?.error?.message ?? `Like failed: ${res.status}`
+    );
+    error.code = payload?.error?.code ?? 'like_failed';
+    error.status = res.status;
+    if (payload?.error?.meta) {
+      error.meta = payload.error.meta as Record<string, unknown>;
+    }
+
+    throw error;
   }
-  
+
   const json = await res.json();
   return json.likes_count ?? json.data?.likes_count ?? 0;
 }
@@ -85,15 +105,30 @@ export async function uploadPhoto(eventToken: string, file: File, taskId?: numbe
   });
 
   if (!res.ok) {
-    const errorText = await res.text();
+    let payload: any = null;
+    try {
+      payload = await res.clone().json();
+    } catch {}
+
     if (res.status === 419) {
-      throw new Error('CSRF Token mismatch during upload.\n\n' +
-        'This usually means:\n' +
-        '1. API routes need CSRF exemption in VerifyCsrfToken middleware\n' +
-        '2. Check if <meta name="csrf-token"> is present in page source\n' +
-        '3. The page might need to be refreshed');
+      const csrfError: UploadError = new Error(
+        'CSRF token mismatch during upload. Please refresh the page and try again.'
+      );
+      csrfError.code = 'csrf_mismatch';
+      csrfError.status = res.status;
+      throw csrfError;
     }
-    throw new Error(`Upload failed: ${res.status} - ${errorText}`);
+
+    const error: UploadError = new Error(
+      payload?.error?.message ?? `Upload failed: ${res.status}`
+    );
+    error.code = payload?.error?.code ?? 'upload_failed';
+    error.status = res.status;
+    if (payload?.error?.meta) {
+      error.meta = payload.error.meta as Record<string, unknown>;
+    }
+
+    throw error;
   }
 
   const json = await res.json();