v2.0

Co-authored-by: Cursor <[email protected]>

client/src/hooks/useConfiguratorUI.js

@@ -0,0 +1,126 @@
+import { useState, useEffect, useCallback } from 'react';
+
+const SESSION_STEP_KEY = 'apex_wardrobe_step';
+const PLANS_OPEN_KEY = 'apex.plans.open';
+
+function readPlansOpenFlag() {
+  try {
+    if (localStorage.getItem(PLANS_OPEN_KEY) === '1') return true;
+    if (sessionStorage.getItem(PLANS_OPEN_KEY) === '1') {
+      localStorage.setItem(PLANS_OPEN_KEY, '1');
+      sessionStorage.removeItem(PLANS_OPEN_KEY);
+      return true;
+    }
+  } catch {
+    // ignore
+  }
+  return false;
+}
+
+export default function useConfiguratorUI() {
+  const [activeStep, setActiveStep] = useState(() => {
+    try { return Number(sessionStorage.getItem(SESSION_STEP_KEY)) || 1; } catch { return 1; }
+  });
+  const [expandedColumn, setExpandedColumn] = useState(null);
+
+  useEffect(() => {
+    try { sessionStorage.setItem(SESSION_STEP_KEY, String(activeStep)); } catch {}
+  }, [activeStep]);
+
+  // Modal visibility
+  const [showMaterialPicker, setShowMaterialPicker] = useState(false);
+  const [showMaterialModal, setShowMaterialModal] = useState(false);
+  const [showColorPicker, setShowColorPicker] = useState(false);
+  const [showRoomUpload, setShowRoomUpload] = useState(false);
+  const [showPlansView, setShowPlansView] = useState(readPlansOpenFlag);
+
+  useEffect(() => {
+    try {
+      if (showPlansView) {
+        localStorage.setItem(PLANS_OPEN_KEY, '1');
+        sessionStorage.removeItem(PLANS_OPEN_KEY);
+      } else {
+        localStorage.removeItem(PLANS_OPEN_KEY);
+        sessionStorage.removeItem(PLANS_OPEN_KEY);
+      }
+    } catch {
+      // ignore
+    }
+  }, [showPlansView]);
+  const [showAIRender, setShowAIRender] = useState(false);
+
+  // Material picker state
+  const [selectedMaterial, setSelectedMaterial] = useState(null);
+  const [materialFilter, setMaterialFilter] = useState('');
+  const [selectedCollection, setSelectedCollection] = useState('all');
+
+  // Color picker state
+  const [colorPickerElement, setColorPickerElement] = useState(null);
+
+  // Room visualization
+  const [roomConfig, setRoomConfig] = useState(null);
+  const [roomAnalysis, setRoomAnalysis] = useState(null);
+  const [roomViewActive, setRoomViewActive] = useState(false);
+
+  // Order form
+  const [orderForm, setOrderForm] = useState({ email: '', name: '', phone: '', notes: '' });
+  const [orderSent, setOrderSent] = useState(false);
+  const [lastOrderId, setLastOrderId] = useState(null);
+
+  // Module click from 3D view
+  const handleModuleClick = useCallback((moduleIndex) => {
+    setExpandedColumn(prev => prev === moduleIndex ? null : moduleIndex);
+    setActiveStep(2); // jump to columns step when clicking a module
+  }, []);
+
+  // Element click from 3D view
+  const openColorPicker = useCallback((elementType, label) => {
+    setColorPickerElement({ type: elementType, label });
+    setShowColorPicker(true);
+    setActiveStep(4); // jump to materials step
+  }, []);
+
+  const closeColorPicker = useCallback(() => {
+    setShowColorPicker(false);
+    setColorPickerElement(null);
+  }, []);
+
+  // Material handlers
+  const openMaterialDetail = useCallback((material) => {
+    setSelectedMaterial(material);
+    setShowMaterialModal(true);
+  }, []);
+
+  const handleVariantSwitch = useCallback((variant, finishes) => {
+    const variantMaterial = finishes.find(f => f.code === variant.variant_code);
+    if (variantMaterial) {
+      setSelectedMaterial(variantMaterial);
+    }
+  }, []);
+
+  return {
+    activeStep, setActiveStep,
+    expandedColumn, setExpandedColumn,
+    showMaterialPicker, setShowMaterialPicker,
+    showMaterialModal, setShowMaterialModal,
+    showColorPicker, setShowColorPicker,
+    showRoomUpload, setShowRoomUpload,
+    showPlansView, setShowPlansView,
+    showAIRender, setShowAIRender,
+    selectedMaterial, setSelectedMaterial,
+    materialFilter, setMaterialFilter,
+    selectedCollection, setSelectedCollection,
+    colorPickerElement, setColorPickerElement,
+    roomConfig, setRoomConfig,
+    roomAnalysis, setRoomAnalysis,
+    roomViewActive, setRoomViewActive,
+    orderForm, setOrderForm,
+    orderSent, setOrderSent,
+    lastOrderId, setLastOrderId,
+    handleModuleClick,
+    openColorPicker,
+    closeColorPicker,
+    openMaterialDetail,
+    handleVariantSwitch,
+  };
+}