Mock capture preview in guest v2

resources/js/guest-v2/screens/UploadScreen.tsx

@@ -316,6 +316,39 @@ export default function UploadScreen() {
   }, []);
 
   const handleCapture = React.useCallback(async () => {
+    if (mockPreviewEnabled) {
+      const canvas = document.createElement('canvas');
+      const width = 1400;
+      const height = 1000;
+      canvas.width = width;
+      canvas.height = height;
+      const ctx = canvas.getContext('2d');
+      if (!ctx) return;
+      const gradient = ctx.createLinearGradient(0, 0, width, height);
+      gradient.addColorStop(0, '#ff6ad5');
+      gradient.addColorStop(0.5, '#8b5cf6');
+      gradient.addColorStop(1, '#38bdf8');
+      ctx.fillStyle = gradient;
+      ctx.fillRect(0, 0, width, height);
+      ctx.fillStyle = 'rgba(255,255,255,0.18)';
+      ctx.fillRect(80, 80, width - 160, height - 160);
+      ctx.strokeStyle = 'rgba(255,255,255,0.5)';
+      ctx.lineWidth = 6;
+      ctx.strokeRect(80, 80, width - 160, height - 160);
+      ctx.fillStyle = 'rgba(15, 23, 42, 0.7)';
+      ctx.font = '700 64px system-ui, sans-serif';
+      ctx.fillText('Mock Capture', 120, height - 140);
+      const blob = await new Promise<Blob | null>((resolve) => canvas.toBlob(resolve, 'image/jpeg', 0.92));
+      if (!blob) return;
+      const file = new File([blob], `mock-${Date.now()}.jpg`, { type: blob.type });
+      const url = URL.createObjectURL(file);
+      setPreviewFile(file);
+      setPreviewUrl(url);
+      stopCamera();
+      setCameraState('preview');
+      return;
+    }
+
     const video = videoRef.current;
     if (!video) return;
     if (cameraState !== 'ready') {
@@ -353,7 +386,7 @@ export default function UploadScreen() {
     setPreviewUrl(url);
     stopCamera();
     setCameraState('preview');
-  }, [cameraState, facingMode, mirror, startCamera, stopCamera, t]);
+  }, [cameraState, facingMode, mirror, mockPreviewEnabled, startCamera, stopCamera, t]);
 
   React.useEffect(() => {
     if (!mockPreviewEnabled) return;