Todd/gate-quote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Swing gate changes: LA500 1 op + secondary arm, CSW24UL optional second operator

Browse Source
This commit is contained in:
Todd
2026-05-25 21:59:15 -04:00
parent da5323776e
commit 5ce5f6ddee
4 changed files with 122 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
client/src/components/StepOperator.jsx
View File

@ -7,8 +7,16 @@ const categoryLabels = {
tilt: 'Tilt Gate Operators',
};
export default function StepOperator({ operators, selected, onSelect }) {
export default function StepOperator({
operators,
selected,
optionalParts,
onSelect,
onToggleOptionalPart,
onNext,
}) {
const categories = [...new Set(operators.map((o) => o.category))];
const selectedOp = operators.find((o) => o.id === selected);
return (
<div>
@ -83,6 +91,71 @@ export default function StepOperator({ operators, selected, onSelect }) {
</div>
</div>
))}
{selectedOp?.optionalParts && selectedOp.optionalParts.length > 0 && (
<div className="mt-8 pt-6 border-t border-gray-200">
<h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">
Optional Add-Ons for {selectedOp.model}
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{selectedOp.optionalParts.map((part) => {
const isSelected = optionalParts.includes(part.id);
return (
<button
key={part.id}
onClick={() => onToggleOptionalPart(part.id)}
className={`text-left p-4 rounded-xl border-2 transition-all ${
isSelected
? '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 justify-between">
<div className="min-w-0">
<div className="font-semibold text-gray-900">{part.name}</div>
<div className="text-sm text-gray-500 mt-1">Qty: {part.qty}</div>
</div>
<div className="text-right shrink-0 ml-4">
<div className="text-lg font-bold text-blue-600">
C${part.unitPrice.toLocaleString('en-CA')}
</div>
<div
className={`shrink-0 w-5 h-5 rounded border-2 flex items-center justify-center ml-auto 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>
</div>
</button>
);
})}
</div>
</div>
)}
{selected && (
<div className="flex items-center justify-between pt-6 border-t border-gray-200 mt-8">
<div className="text-sm text-gray-500">
{selectedOp?.optionalParts?.length > 0
? `${optionalParts.length} optional add-on${optionalParts.length !== 1 ? 's' : ''} selected`
: 'Operator selected'}
</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>
);
}

20
client/src/components/Wizard.jsx
View File

@ -7,6 +7,7 @@ import QuoteSummary from './QuoteSummary';
const initialState = {
step: 1,
operator: null,
optionalParts: [],
groundLoops: {
needed: false,
style: null,
@ -21,7 +22,17 @@ const initialState = {
function reducer(state, action) {
switch (action.type) {
case 'SELECT_OPERATOR':
return { ...state, operator: action.payload, step: 2 };
return { ...state, operator: action.payload, optionalParts: [], step: 2 };
case 'TOGGLE_OPTIONAL_PART': {
const id = action.payload;
const exists = state.optionalParts.includes(id);
return {
...state,
optionalParts: exists
? state.optionalParts.filter((p) => p !== id)
: [...state.optionalParts, id],
};
}
case 'SET_GROUND_LOOPS_NEEDED':
return {
...state,
@ -94,7 +105,7 @@ function reducer(state, action) {
export default function Wizard({ pricing, onLogout }) {
const [state, dispatch] = useReducer(reducer, initialState);
const { step, operator, groundLoops, accessControl, remoteButtons, remoteQuantity } = state;
const { step, operator, optionalParts, groundLoops, accessControl, remoteButtons, remoteQuantity } = state;
const steps = [
{ num: 1, label: 'Operator' },
@ -171,7 +182,10 @@ export default function Wizard({ pricing, onLogout }) {
<StepOperator
operators={pricing.operators}
selected={operator}
optionalParts={optionalParts}
onSelect={(id) => dispatch({ type: 'SELECT_OPERATOR', payload: id })}
onToggleOptionalPart={(id) => dispatch({ type: 'TOGGLE_OPTIONAL_PART', payload: id })}
onNext={() => dispatch({ type: 'NEXT_STEP' })}
/>
)}
@ -209,7 +223,7 @@ export default function Wizard({ pricing, onLogout }) {
{step === 4 && (
<QuoteSummary
pricing={pricing}
selections={{ operator, groundLoops, accessControl, remoteButtons, remoteQuantity }}
selections={{ operator, optionalParts, groundLoops, accessControl, remoteButtons, remoteQuantity }}
onBack={() => dispatch({ type: 'PREV_STEP' })}
onNew={() => dispatch({ type: 'RESET' })}
/>

24
client/src/utils/quoteCalculator.js
View File

@ -1,5 +1,5 @@
export function calculateQuote(pricing, selections) {
const { operator, groundLoops, accessControl } = selections;
const { operator, optionalParts, groundLoops, accessControl } = selections;
const items = [];
let subtotal = 0;
@ -34,6 +34,28 @@ export function calculateQuote(pricing, selections) {
});
}
}
// Optional add-on parts for selected operator
if (optionalParts && optionalParts.length > 0) {
const op = typeof operator === 'string' && pricing.operators.find((o) => o.id === operator);
if (op?.optionalParts) {
optionalParts.forEach((partId) => {
const part = op.optionalParts.find((p) => p.id === partId);
if (part) {
const lineTotal = part.qty * part.unitPrice;
items.push({
type: 'optionalPart',
category: 'Optional Add-Ons',
name: part.name,
qty: part.qty,
unitPrice: part.unitPrice,
lineTotal,
});
subtotal += lineTotal;
}
});
}
}
}
if (groundLoops?.needed) {

12
server/data/pricing.json
View File

@ -11,11 +11,12 @@
"model": "LA500",
"category": "swing",
"description": "24V DC Swing Gate Linear Operator ",
"basePrice": 2495,
"basePrice": 1732.50,
"image": "swing",
"imageFile": "liftmaster-la500-bundle.jpg",
"requiredParts": [
{ "id": "op-unit-swing", "name": "Operator Unit (LA500)", "qty": 2, "unitPrice": 1247.50 },
{ "id": "op-unit-swing", "name": "Operator Unit (LA500)", "qty": 1, "unitPrice": 1247.50 },
{ "id": "secondary-arm", "name": "Secondary Arm Kit (LA500)", "qty": 1, "unitPrice": 485 },
{ "id": "mounting-post", "name": "Mounting Post", "qty": 1, "unitPrice": 85 },
{ "id": "prep-cost", "name": "In House Prep Cost", "qty": 1, "unitPrice": 150 },
{ "id": "shipping", "name": "Shipping Cost", "qty": 1, "unitPrice": 200 }
@ -27,15 +28,18 @@
"model": "CSW24UL",
"category": "swing",
"description": "24V DC Heavy Duty Swing Gate Operator",
"basePrice": 3995,
"basePrice": 2442.50,
"image": "swing",
"imageFile": "liftmaster-csw24.jpg",
"requiredParts": [
{ "id": "op-unit-swing-hd", "name": "Heavy Duty Operator Unit (CSW24UL)", "qty": 2, "unitPrice": 1997.50 },
{ "id": "op-unit-swing-hd", "name": "Heavy Duty Operator Unit (CSW24UL)", "qty": 1, "unitPrice": 1997.50 },
{ "id": "mount-pad", "name": "Mounting Pad", "qty": 2, "unitPrice": 145 },
{ "id": "prep-cost", "name": "In House Prep Cost", "qty": 1, "unitPrice": 150 },
{ "id": "shipping", "name": "Shipping Cost", "qty": 1, "unitPrice": 200 },
{ "id": "mounting-post", "name": "Mounting Post", "qty": 2, "unitPrice": 85 }
],
"optionalParts": [
{ "id": "second-op-csw", "name": "Second Heavy Duty Operator Unit (CSW24UL)", "qty": 1, "unitPrice": 1997.50 }
]
},
{