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

Add arm length options for MAT (12ft/17ft) and Techna (12ft/14ft)

Browse Source
This commit is contained in:
Todd
2026-05-25 22:06:16 -04:00
parent 5ce5f6ddee
commit b696c5054d
4 changed files with 90 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,8 +10,10 @@ const categoryLabels = {
export default function StepOperator({
operators,
selected,
armChoice,
optionalParts,
onSelect,
onSetArmChoice,
onToggleOptionalPart,
onNext,
}) {
@ -92,6 +94,44 @@ export default function StepOperator({
</div>
))}
{selectedOp?.armOptions && selectedOp.armOptions.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">
Select Arm Length
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{selectedOp.armOptions.map((opt) => {
const isSelected = armChoice === opt.id;
return (
<button
key={opt.id}
onClick={() => onSetArmChoice(opt.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 gap-3">
<div className={`shrink-0 w-5 h-5 rounded-full border-2 flex items-center justify-center mt-0.5 ${
isSelected ? 'border-blue-600' : 'border-gray-300'
}`}>
{isSelected && <div className="w-2.5 h-2.5 rounded-full bg-blue-600" />}
</div>
<div>
<div className="font-semibold text-gray-900">{opt.name}</div>
<div className="mt-1 text-lg font-bold text-blue-600">
C${opt.price.toLocaleString('en-CA')}
</div>
</div>
</div>
</button>
);
})}
</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">

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

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

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

@ -1,5 +1,5 @@
export function calculateQuote(pricing, selections) {
const { operator, optionalParts, groundLoops, accessControl } = selections;
const { operator, armChoice, optionalParts, groundLoops, accessControl } = selections;
const items = [];
let subtotal = 0;
@ -32,28 +32,41 @@ export function calculateQuote(pricing, selections) {
});
subtotal += lineTotal;
});
}
}
// 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;
// Selected arm option (barrier operators)
if (armChoice && op.armOptions) {
const arm = op.armOptions.find((a) => a.id === armChoice);
if (arm) {
items.push({
type: 'optionalPart',
category: 'Optional Add-Ons',
name: part.name,
qty: part.qty,
unitPrice: part.unitPrice,
lineTotal,
type: 'armOption',
category: 'Required Equipment',
name: arm.name,
qty: 1,
unitPrice: arm.price,
lineTotal: arm.price,
});
subtotal += lineTotal;
subtotal += arm.price;
}
});
}
// Optional add-on parts
if (optionalParts && optionalParts.length > 0 && 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;
}
});
}
}
}
}