// Multi-step quote form
//
// Two ways in, one destination. A visitor either shapes their building in the
// FabTrk 3D designer (which hands its spec over via app.jsx's postMessage
// bridge) or skips it entirely and sends us their plans. Both paths finish in
// this form and both submit to FabTrk as a real quote: the 3D path as a
// 'parametric' quote carrying its configuration, the upload path as an 'intake'
// quote carrying documents.
const QUOTE_API_URL =
(typeof window !== 'undefined' && window.FABTRK_API_URL) || 'https://api.fabtrk.com';
/**
* The org embed token, what makes a submission land in Chambliss's FabTrk
* inbox. Set explicitly in index.html; falls back to the `?org=` already on the
* designer URL so the two can't drift apart if only one is updated.
*/
function fabtrkEmbedToken() {
if (typeof window === 'undefined') return '';
if (window.FABTRK_EMBED_TOKEN) return window.FABTRK_EMBED_TOKEN;
try {
return new URL(window.FABTRK_DESIGNER_URL).searchParams.get('org') || '';
} catch (e) {
return '';
}
}
// Upload limits, matched to what the FabTrk intake route accepts. Enforced here
// too so a visitor is told immediately rather than after a 30-second upload.
const MAX_FILES = 8;
const MAX_FILE_BYTES = 32 * 1024 * 1024;
const ACCEPTED_FILES = 'image/jpeg,image/png,image/gif,image/webp,image/heic,.pdf,.dxf,.dwg';
const readFileAsDataUrl = (file) =>
new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = () => resolve(reader.result);
reader.onerror = () => reject(new Error(`Could not read ${file.name}`));
reader.readAsDataURL(file);
});
const fmtBytes = (n) => {
if (!n) return '';
if (n < 1024 * 1024) return `${Math.round(n / 1024)} KB`;
return `${(n / (1024 * 1024)).toFixed(1)} MB`;
};
const BUILDING_TYPES = [
'Agricultural', 'Aircraft Hangar', 'Auto Shop', 'Barn',
'Barndominium / Home', 'Brewery', 'Car Wash', 'Carport',
'Casino', 'Church', 'Climate Controlled Storage', 'Commercial',
'Fitness Center', 'Garage', 'Golf Cart Storage', 'Gymnasium',
'Hay Storage', 'Horse Stable', 'Industrial', 'Institutional',
'Manufacturing', 'Medical', 'Mini Storage', 'Office',
'Outbuilding', 'Rec Center', 'Retail', 'Riding Arena',
'RV Garage', 'RV Storage', 'School', 'Shed',
'Sports Facility', 'Storage', 'Strip Mall', 'Warehouse',
'Workshop', 'Other',
];
const STATES = ['Alabama','Alaska','Arizona','Arkansas','California','Colorado','Connecticut','Delaware','Florida','Georgia','Hawaii','Idaho','Illinois','Indiana','Iowa','Kansas','Kentucky','Louisiana','Maine','Maryland','Massachusetts','Michigan','Minnesota','Mississippi','Missouri','Montana','Nebraska','Nevada','New Hampshire','New Jersey','New Mexico','New York','North Carolina','North Dakota','Ohio','Oklahoma','Oregon','Pennsylvania','Rhode Island','South Carolina','South Dakota','Tennessee','Texas','Utah','Vermont','Virginia','Washington','West Virginia','Wisconsin','Wyoming'];
// The two paths have different step lists: the upload path is deliberately
// short, because someone who already has drawings shouldn't be walked through
// three screens of choices to hand them over.
const STEPS_DESIGN = [
{ n: '01', t: 'Use case' },
{ n: '02', t: 'Dimensions' },
{ n: '03', t: 'Spec' },
{ n: '04', t: 'Site' },
{ n: '05', t: 'Contact' },
];
const STEPS_UPLOAD = [
{ n: '01', t: 'Your project' },
{ n: '02', t: 'Site' },
{ n: '03', t: 'Contact' },
];
const QuoteSteps = ({ steps, current }) => {
return (
<>
{/* Desktop stepper */}
{steps.map((s, i) => (
i ? 'done' : ''}`}>
{current > i ? '✓' : s.n}{s.t}
Pick the closest fit. You can always tell us more in step five.
{BUILDING_TYPES.map(t => (
update({ buildingType: t })} />
))}
{form.buildingType === 'Other' && (
update({ otherType: e.target.value })} />
)}
);
const DimSlider = ({ label, unit, min, max, step, value, onChange, suffix }) => {
// htmlFor/id ties the visible label to the range input; aria-valuetext makes
// it announce "40 feet" rather than a bare "40".
const id = React.useId();
return (
3,500 sq ft minimum. Don't worry about exact, we'll dial it in.
update({ width: v })} suffix="W" />
update({ length: v })} suffix="L" />
update({ height: v })} suffix="H" />
{/* Visual */}
FIG. 02 / ELEVATION (NOT TO SCALE)
FOOTPRINT / {(form.width * form.length).toLocaleString()} SQ FT
{minWarning && (
⚠ BELOW 3,500 SQ FT MIN / WE'LL DISCUSS
)}
);
};
const ChipGroup = ({ label, options, value, onChange }) => {
// These chips are a single-select set, so they are exposed as a radiogroup.
// Before this the