236 lines
9.9 KiB
JavaScript
236 lines
9.9 KiB
JavaScript
export default function StepGroundLoops({
|
|
detectors,
|
|
styles,
|
|
sizes,
|
|
types,
|
|
value,
|
|
onSetNeeded,
|
|
onSetStyle,
|
|
onToggleType,
|
|
onSetSize,
|
|
onNext,
|
|
onBack,
|
|
}) {
|
|
const { needed, style, types: selectedTypes, typeSizes } = value;
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-6">
|
|
<button
|
|
onClick={onBack}
|
|
className="p-1.5 rounded-lg hover:bg-gray-100 text-gray-500 transition-colors"
|
|
>
|
|
<svg className="w-5 h-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-gray-900">
|
|
Step 2: Ground Loops
|
|
</h2>
|
|
<p className="text-gray-500">
|
|
Are ground loop detectors required for this installation?
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4 mb-8">
|
|
<button
|
|
onClick={() => onSetNeeded(false)}
|
|
className={`flex-1 p-5 rounded-xl border-2 text-center transition-all ${
|
|
!needed
|
|
? 'border-blue-600 bg-blue-50 shadow-md'
|
|
: 'border-gray-200 bg-white hover:border-blue-300 hover:shadow-sm'
|
|
}`}
|
|
>
|
|
<div className="text-3xl mb-2">❌</div>
|
|
<div className="font-semibold text-gray-900">No Ground Loops</div>
|
|
<div className="text-sm text-gray-500 mt-1">Skip this section</div>
|
|
</button>
|
|
<button
|
|
onClick={() => onSetNeeded(true)}
|
|
className={`flex-1 p-5 rounded-xl border-2 text-center transition-all ${
|
|
needed
|
|
? 'border-blue-600 bg-blue-50 shadow-md'
|
|
: 'border-gray-200 bg-white hover:border-blue-300 hover:shadow-sm'
|
|
}`}
|
|
>
|
|
<div className="text-3xl mb-2">🕵</div>
|
|
<div className="font-semibold text-gray-900">Yes, Loops Needed</div>
|
|
<div className="text-sm text-gray-500 mt-1">Configure below</div>
|
|
</button>
|
|
</div>
|
|
|
|
{needed && (
|
|
<div className="space-y-8">
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">
|
|
Installation Style
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{styles.map((s) => (
|
|
<button
|
|
key={s.id}
|
|
onClick={() => onSetStyle(s.id)}
|
|
className={`text-left p-4 rounded-xl border-2 transition-all ${
|
|
style === s.id
|
|
? 'border-blue-600 bg-blue-50 shadow-md'
|
|
: 'border-gray-200 bg-white hover:border-blue-300 hover:shadow-sm'
|
|
}`}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div
|
|
className={`shrink-0 w-5 h-5 rounded-full border-2 flex items-center justify-center mt-0.5 ${
|
|
style === s.id
|
|
? 'border-blue-600'
|
|
: 'border-gray-300'
|
|
}`}
|
|
>
|
|
{style === s.id && (
|
|
<div className="w-2.5 h-2.5 rounded-full bg-blue-600" />
|
|
)}
|
|
</div>
|
|
<div>
|
|
<div className="font-semibold text-gray-900">{s.name}</div>
|
|
<div className="text-sm text-gray-500 mt-1">
|
|
{s.description}
|
|
</div>
|
|
{s.additionalCost > 0 && (
|
|
<div className="mt-1 text-sm font-medium text-blue-600">
|
|
+C${s.additionalCost.toLocaleString('en-CA')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider">
|
|
Loop Types Needed
|
|
</h3>
|
|
{selectedTypes.length > 0 && (
|
|
<span className="text-xs text-blue-600 font-medium">
|
|
{selectedTypes.length} selected
|
|
</span>
|
|
)}
|
|
</div>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{types.map((t) => {
|
|
const isSelected = selectedTypes.includes(t.id);
|
|
const currentSize = typeSizes[t.id];
|
|
return (
|
|
<div
|
|
key={t.id}
|
|
className={`rounded-xl border-2 transition-all ${
|
|
isSelected
|
|
? 'border-blue-600 bg-blue-50'
|
|
: 'border-gray-200 bg-white hover:border-blue-300 hover:shadow-sm'
|
|
}`}
|
|
>
|
|
<button
|
|
onClick={() => onToggleType(t.id)}
|
|
className={`text-left w-full p-4 ${isSelected ? 'pb-3' : ''}`}
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div className="min-w-0">
|
|
<div className="font-semibold text-gray-900">
|
|
{t.name}
|
|
</div>
|
|
<div className="text-sm text-gray-500 mt-1">
|
|
{t.description}
|
|
</div>
|
|
<div className="mt-2 text-lg font-bold text-blue-600">
|
|
C${t.price.toLocaleString('en-CA')}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`shrink-0 w-5 h-5 rounded border-2 flex items-center justify-center mt-1 transition-colors ${
|
|
isSelected
|
|
? 'border-blue-600 bg-blue-600'
|
|
: 'border-gray-300'
|
|
}`}
|
|
>
|
|
{isSelected && (
|
|
<svg className="w-3 h-3 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={3} d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
{isSelected && (
|
|
<div className="px-4 pb-4 border-t border-blue-200 pt-3 mt-0 space-y-3">
|
|
<div className="flex items-center gap-2 text-xs text-blue-700 bg-blue-100 rounded-md px-3 py-2">
|
|
<svg className="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
|
|
</svg>
|
|
<span>Includes 1 Loop Detector (+C${(detectors?.[0]?.price ?? 250).toLocaleString('en-CA')})</span>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-500 mb-2">
|
|
Loop Size
|
|
</label>
|
|
<div className="flex gap-2">
|
|
{sizes.map((s) => {
|
|
const isSizeSelected = currentSize === s.id;
|
|
return (
|
|
<button
|
|
key={s.id}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onSetSize(t.id, s.id);
|
|
}}
|
|
className={`flex-1 px-3 py-2 text-sm rounded-lg border-2 transition-all ${
|
|
isSizeSelected
|
|
? 'border-blue-600 bg-white shadow-sm'
|
|
: 'border-gray-200 bg-white hover:border-gray-300'
|
|
}`}
|
|
>
|
|
<div className={`font-medium ${isSizeSelected ? 'text-blue-700' : 'text-gray-700'}`}>
|
|
{s.name}
|
|
</div>
|
|
{s.additionalCost > 0 && (
|
|
<div className={`text-xs mt-0.5 ${isSizeSelected ? 'text-blue-500' : 'text-gray-400'}`}>
|
|
+C${s.additionalCost.toLocaleString('en-CA')}
|
|
</div>
|
|
)}
|
|
{s.additionalCost === 0 && (
|
|
<div className="text-xs mt-0.5 text-gray-400">Standard</div>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between pt-6 border-t border-gray-200 mt-8">
|
|
<div className="text-sm text-gray-500">
|
|
{needed
|
|
? `${selectedTypes.length} loop type${selectedTypes.length !== 1 ? 's' : ''} selected`
|
|
: 'Ground loops not required'}
|
|
</div>
|
|
<button
|
|
onClick={onNext}
|
|
className="px-6 py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
|
|
>
|
|
Continue
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|