Improve camera functionality and integrate it into the product forms

Refactors camera modal to use a custom hook for simplified photo capture logic across NewSaleForm and NewSaleFormMultiProduct components.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c7151ec8-4e6b-4fcf-b628-65b094ac18fd
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/0715008c-7244-40f4-befc-26c014852236/c7151ec8-4e6b-4fcf-b628-65b094ac18fd/URbRU29

client/src/components/NewSaleForm.tsx

@@ -14,7 +14,7 @@ import { useSimpleCamera } from '@/hooks/useSimpleCamera';
 import { apiRequest } from '@/lib/queryClient';
 import { validateRequiredFields, validateEAN13, ARTICLE_CATEGORY_MAPPING, IDENTITY_TYPES, PAYMENT_METHODS } from '@/lib/validation';
 import { Package, User, Users, Save, Calendar, BadgeCheck, Info, Camera, Upload, Trash2 } from 'lucide-react';
-import SimpleCameraModal from '@/components/SimpleCameraModal';
+import CameraModal from '@/components/CameraModal';
 import type { PhotoType } from '@/types/sale';
 
 interface Product {
@@ -245,7 +245,7 @@ export default function NewSaleForm() {
     }
   };
 
-  const handleTakePhoto = async () => {
+  const handleCapture = async () => {
     if (!currentPhotoType) return;
     
     try {
@@ -833,14 +833,14 @@ export default function NewSaleForm() {
       </div>
       
       {/* Camera Modal */}
-      <SimpleCameraModal
+      <CameraModal
         isOpen={isCameraOpen}
         photoType={currentPhotoType}
         videoRef={videoRef}
         canvasRef={canvasRef}
         isCapturing={isCapturing}
         onClose={stopCamera}
-        onCapture={handleTakePhoto}
+        onCapture={handleCapture}
       />
     </div>
   );

client/src/components/NewSaleFormMultiProduct.tsx

@@ -11,8 +11,10 @@ import { useToast } from "@/hooks/use-toast";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { apiRequest } from "@/lib/queryClient";
 import { useStoreContext } from "@/hooks/useStoreContext";
-import { Package, User, Users, IdCard, Camera, Plus, Minus, Info, X } from "lucide-react";
+import { Package, User, Users, IdCard, Camera, Plus, Minus, Info } from "lucide-react";
 import { validateEAN13, ARTICLE_CATEGORY_MAPPING, PAYMENT_METHODS, IDENTITY_TYPES } from "@/lib/validation";
+import CameraModal from "@/components/CameraModal";
+import { useSimpleCamera } from "@/hooks/useSimpleCamera";
 
 // Types pour les photos
 type PhotoType = 'recto' | 'verso' | 'ticket';
@@ -50,9 +52,18 @@ export default function NewSaleFormMultiProduct() {
   const queryClient = useQueryClient();
   const { selectedStoreId } = useStoreContext();
   
-  // États pour les photos
+  // Hook camera qui fonctionne
-  const [currentPhotoType, setCurrentPhotoType] = useState<PhotoType | null>(null);
+  const {
-  const [isCameraOpen, setIsCameraOpen] = useState(false);
+    isOpen: isCameraOpen,
+    currentPhotoType,
+    isCapturing,
+    videoRef,
+    canvasRef,
+    startCamera,
+    capturePhoto,
+    stopCamera
+  } = useSimpleCamera();
+
   const [isSubmitting, setIsSubmitting] = useState(false);
 
   // Formulaire avec valeurs par défaut
@@ -183,28 +194,41 @@ export default function NewSaleFormMultiProduct() {
     }
   };
 
-  // Gestion des photos
+  // Gestion des photos avec le hook qui fonctionne
-  const handlePhotoCapture = (photoType: PhotoType) => {
+  const handlePhotoCapture = async (photoType: PhotoType) => {
-    setCurrentPhotoType(photoType);
+    try {
-    setIsCameraOpen(true);
+      await startCamera(photoType);
+    } catch (error) {
+      console.error('Erreur ouverture caméra:', error);
+      toast({
+        title: "Erreur caméra",
+        description: "Impossible d'accéder à la caméra. Vérifiez les autorisations.",
+        variant: "destructive",
+      });
+    }
   };
 
-  const handlePhotoTaken = (photoData: string) => {
+  const handleCapture = async () => {
-    if (currentPhotoType === 'recto') {
+    try {
-      form.setValue('photoRecto', photoData);
+      const photoData = await capturePhoto();
-    } else if (currentPhotoType === 'verso') {
+      if (currentPhotoType) {
-      form.setValue('photoVerso', photoData);
+        const fieldName = `photo${currentPhotoType.charAt(0).toUpperCase() + currentPhotoType.slice(1)}` as keyof FormData;
-    } else if (currentPhotoType === 'ticket') {
+        form.setValue(fieldName, photoData);
-      form.setValue('photoTicket', photoData);
+        
+        toast({
+          title: "Photo capturée",
+          description: `Photo ${currentPhotoType} enregistrée avec succès`,
+        });
+      }
+      stopCamera();
+    } catch (error) {
+      console.error('Erreur capture:', error);
+      toast({
+        title: "Erreur capture",
+        description: "Impossible de capturer la photo",
+        variant: "destructive",
+      });
     }
-    
-    toast({
-      title: "Photo capturée",
-      description: `Photo ${currentPhotoType} enregistrée avec succès`,
-    });
-    
-    setIsCameraOpen(false);
-    setCurrentPhotoType(null);
   };
 
   const handleRemovePhoto = (photoType: PhotoType) => {
@@ -667,60 +691,16 @@ export default function NewSaleFormMultiProduct() {
         </Form>
       </div>
 
-      {/* Modal Camera */}
+      {/* Modal Camera qui fonctionne */}
-      {isCameraOpen && (
+      <CameraModal
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+        isOpen={isCameraOpen}
-          <div className="bg-white rounded-lg p-6 max-w-md w-full mx-4">
+        photoType={currentPhotoType}
-            <div className="flex justify-between items-center mb-4">
+        videoRef={videoRef}
-              <h3 className="text-lg font-medium">
+        canvasRef={canvasRef}
-                Capturer photo {currentPhotoType}
+        isCapturing={isCapturing}
-              </h3>
+        onClose={stopCamera}
-              <Button
+        onCapture={handleCapture}
-                onClick={() => {
+      />
-                  setIsCameraOpen(false);
-                  setCurrentPhotoType(null);
-                }}
-                variant="outline"
-                size="sm"
-              >
-                <X className="h-4 w-4" />
-              </Button>
-            </div>
-            
-            <div className="space-y-4">
-              <div className="text-center">
-                <p className="text-sm text-gray-600 mb-4">
-                  La capture photo sera bientôt disponible.
-                </p>
-                <input
-                  type="file"
-                  accept="image/*"
-                  onChange={(e) => {
-                    const file = e.target.files?.[0];
-                    if (file) {
-                      const reader = new FileReader();
-                      reader.onload = (event) => {
-                        const photoData = event.target?.result as string;
-                        handlePhotoTaken(photoData);
-                      };
-                      reader.readAsDataURL(file);
-                    }
-                  }}
-                  className="hidden"
-                  id="photo-upload"
-                />
-                <label
-                  htmlFor="photo-upload"
-                  className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg cursor-pointer hover:bg-blue-700"
-                >
-                  <Camera className="h-4 w-4 mr-2" />
-                  Sélectionner une photo
-                </label>
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
     </div>
   );
 }