diff --git a/website/public/images/options/3030-pcb-mount.png b/website/public/images/options/3030-pcb-mount.png new file mode 100644 index 0000000..d17c7c3 Binary files /dev/null and b/website/public/images/options/3030-pcb-mount.png differ diff --git a/website/src/components/steps/OptionsStep.jsx b/website/src/components/steps/OptionsStep.jsx index e0d900e..44abad8 100644 --- a/website/src/components/steps/OptionsStep.jsx +++ b/website/src/components/steps/OptionsStep.jsx @@ -34,7 +34,7 @@ export default function OptionsStep({ config, updateConfig, buildType }) { const handleStandCrossbarSupportToggle = (option) => { const currentSupports = config.standCrossbarSupports || []; const isSelected = currentSupports.some((opt) => opt.id === option.id); - + if (isSelected) { updateConfig({ standCrossbarSupports: currentSupports.filter((opt) => opt.id !== option.id), @@ -62,7 +62,7 @@ export default function OptionsStep({ config, updateConfig, buildType }) { const getSelectedOptionsForSubSection = (mainSectionId, subSectionId, subSection = null) => { const key = `${mainSectionId}.${subSectionId}`; - + switch (key) { case 'actuator.mounts': return config.mount ? [config.mount] : []; @@ -88,36 +88,36 @@ export default function OptionsStep({ config, updateConfig, buildType }) { const isMainSectionComplete = (mainSectionId, mainSection) => { const subSections = Object.entries(mainSection.sections || {}); - + // Check if all sub-sections with options are complete for (const [subSectionId, subSection] of subSections) { // Skip if no options available if (!subSection.options || subSection.options.length === 0) { continue; } - + const selectedOptions = getSelectedOptionsForSubSection(mainSectionId, subSectionId, subSection); - + // All sub-sections (both single-select and multi-select) require at least one selection // Multi-select means you can select multiple items, but you still need at least one if (selectedOptions.length === 0) { return false; } } - + return true; }; // Auto-collapse main sections when they become complete useEffect(() => { const mainSections = partsData.options ? Object.entries(partsData.options) : []; - + mainSections.forEach(([mainSectionId, mainSection]) => { // Skip toyMounts and remoteControl sections (now in their own steps) if (mainSectionId === 'toyMounts' || mainSectionId === 'remoteControl') { return; } - + if (isMainSectionComplete(mainSectionId, mainSection)) { setExpandedMainSections((prev) => { // Only auto-collapse if the section is currently expanded (undefined or true) @@ -135,7 +135,7 @@ export default function OptionsStep({ config, updateConfig, buildType }) { const handleOptionClick = (option, mainSectionId, subSectionId) => { const key = `${mainSectionId}.${subSectionId}`; - + switch (key) { case 'actuator.mounts': handleMountSelect(option); @@ -167,11 +167,10 @@ export default function OptionsStep({ config, updateConfig, buildType }) {