feat: implement snapshot capture and storage for robot configurations

src/components/RobotCanvas.tsx

@@ -11,6 +11,7 @@ import {
 } from '@react-three/drei';
 import { useThree } from '@react-three/fiber';
 import { RobotModel } from './RobotModel';
+import { snapshotStore } from '@/store/useSnapshotStore';
 import type { WebGLRenderer, Scene, Camera } from 'three';
 
 function Loader() {
@@ -70,6 +71,17 @@ export function RobotCanvas() {
     glRef.current = gl;
     sceneRef.current = scene;
     cameraRef.current = camera;
+
+    // Register a programmatic capture function for the checkout snapshot
+    snapshotStore.getState().registerCapture(() => {
+      if (!glRef.current || !sceneRef.current || !cameraRef.current) return null;
+      try {
+        glRef.current.render(sceneRef.current, cameraRef.current);
+        return glRef.current.domElement.toDataURL('image/jpeg', 0.75);
+      } catch {
+        return null;
+      }
+    });
   }, []);
 
   const handleShare = useCallback(async () => {

src/components/checkout/ReviewStep.tsx

@@ -3,6 +3,7 @@
 import { useState } from 'react';
 import { useStripe, useElements } from '@stripe/react-stripe-js';
 import { useOrderStore, orderStore } from '@/store/useOrderStore';
+import { snapshotStore } from '@/store/useSnapshotStore';
 
 function formatAED(price: number): string {
   return new Intl.NumberFormat('en-AE').format(price);
@@ -25,6 +26,9 @@ export function ReviewStep() {
     setIsProcessing(true);
     setErrorMsg('');
 
+    // Capture robot snapshot before payment (canvas still rendered behind overlay)
+    const snapshotDataUrl = snapshotStore.getState().capture();
+
     const { error } = await stripe.confirmPayment({
       elements,
       clientSecret,
@@ -42,7 +46,16 @@ export function ReviewStep() {
       return;
     }
 
-    // Payment succeeded
+    // Payment succeeded — upload snapshot
+    const paymentIntentId = orderStore.getState().payment.paymentIntentId;
+    if (snapshotDataUrl && paymentIntentId) {
+      fetch('/api/snapshots/', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ paymentIntentId, imageData: snapshotDataUrl }),
+      }).catch(() => {}); // fire-and-forget
+    }
+
     orderStore.getState().setPayment({ status: 'succeeded' });
     orderStore.getState().placeOrder();
   };