/* global React, PageHero, CONTACT, MATERIALS */ /* ============================================================ Constants ============================================================ */ const ROOM_TYPES = [ { id: "kitchen", label: "Kitchen" }, { id: "bathroom", label: "Bathroom" }, { id: "utility", label: "Utility" }, { id: "fireplace", label: "Fireplace" }, { id: "memorial", label: "Memorial" }, { id: "other", label: "Something else" }, ]; const QUOTE_MATERIALS = [ { id: "quartz", label: "Quartz", cls: "stone-quartz" }, { id: "granite", label: "Granite", cls: "stone-granite" }, { id: "porcelain", label: "Porcelain", cls: "stone-porcelain" }, { id: "unsure", label: "Not sure yet", cls: "" }, ]; const THICKNESS_OPTS = [ { id: "20mm", label: "20mm" }, { id: "30mm", label: "30mm" }, ]; const EDGE_OPTS = [ { id: "square", label: "Square", sub: "Standard", photo: "/images/edge-standard.jpg" }, { id: "ogee", label: "Ogee", sub: "Shaped", photo: "/images/edge-ogee.jpg" }, { id: "bullnose", label: "Bullnose", sub: "Rounded", photo: "/images/edge-bullnose.jpg" }, ]; const GEO_TEMPLATES = [ { id: "straight", label: "Straight run", hint: "One wall run" }, { id: "l", label: "L-shape", hint: "Two joined runs" }, { id: "u", label: "U-shape", hint: "Three runs" }, { id: "island", label: "Island", hint: "Single top" }, { id: "two-runs", label: "Two runs", hint: "Opposite walls" }, ]; const TEMPLATE_BLOCKS = { straight: [ { id:"A", type:"run", name:"Run A", x:26, y:45, w:48, h:10, rotated:false, length:"3.0", depth:"0.62" }, ], l: [ // Run A is the back-wall run; Run B starts where A ends and runs // perpendicular, sitting beside A at the corner — they abut, never overlap. { id:"A", type:"run", name:"Run A", x:10, y:8, w:51, h:10, rotated:false, length:"3.2", depth:"0.62" }, { id:"B", type:"run", name:"Run B", x:10, y:18, w:10, h:43, rotated:true, length:"2.7", depth:"0.62" }, ], u: [ { id:"A", type:"run", name:"Run A", x:6, y:8, w:10, h:38, rotated:true, length:"2.4", depth:"0.62" }, { id:"B", type:"run", name:"Run B", x:16, y:36, w:32, h:10, rotated:false, length:"2.0", depth:"0.62" }, { id:"C", type:"run", name:"Run C", x:48, y:8, w:10, h:38, rotated:true, length:"2.4", depth:"0.62" }, ], island: [ { id:"A", type:"island", name:"Island", x:31, y:42, w:38, h:16, rotated:false, length:"2.4", depth:"1.0" }, ], "two-runs": [ { id:"A", type:"run", name:"Run A", x:26, y:20, w:48, h:10, rotated:false, length:"3.0", depth:"0.62" }, { id:"B", type:"run", name:"Run B", x:26, y:60, w:48, h:10, rotated:false, length:"3.0", depth:"0.62" }, ], }; const TIMELINES = [ "As soon as possible", "Within the next month", "1–3 months", "3+ months", "Just exploring", ]; const PRICING = { materials: { quartz: { min:510, max:570 }, // €316–354/lm at 0.62m depth; base €330/lm granite: { min:510, max:570 }, porcelain: { min:610, max:760 }, // from ~€380/lm unsure: { min:510, max:760 }, }, thickness: { "20mm":1.0, "30mm":1.0 }, edge: { square:0, ogee:22, bullnose:25 }, // Colour pricing tiers. The estimate uses the HIGHEST bracket the customer // picks across all selected colours. // 1 = Zeal (standard, base price) // 2 = Exo (small uplift — same quality, dearer stone) brackets: { 1:1.0, 2:1.16 }, extras: { highUpstandMetres: { min:150, max:220 }, splashbackMetres: { min:180, max:280 }, hobPanelMetres: { min:150, max:220 }, // high panel behind hob, per lm drainerGrooves: { min:85, max:140 }, waterfallEnds: { min:130, max:190 }, }, }; /* ============================================================ Utils ============================================================ */ function clamp(n, min, max) { return Math.max(min, Math.min(max, n)); } function parseMeasure(v) { const n = parseFloat(String(v || "").replace(",", ".").replace(/[^\d.]/g, "")); return Number.isFinite(n) ? n : 0; } function formatMeasure(n) { return String(Math.round(n * 100) / 100); } function totalLinearMetres(blocks) { return blocks.reduce((s, b) => s + parseMeasure(b.length), 0); } const PLAN_SCALE = 16; function sizeFromMeasures(block) { const length = parseMeasure(block.length); const depth = parseMeasure(block.depth); // Keep current visual size if length is not a valid number — prevents // the block jumping when the field is cleared or mid-edit. if (!length) return { w: block.w, h: block.h }; const long = clamp(length * PLAN_SCALE, 5, 90); const short = clamp((depth || 0.62) * PLAN_SCALE, 1.5, 40); return block.rotated ? { w: short, h: long } : { w: long, h: short }; } // Sum the real metres of marked block edges (full-height walls / waterfall sides). function sumEdges(blocks, key) { return (blocks || []).reduce((t, b) => t + (b[key] || []).reduce((s, edge) => { const isTopBottom = edge === "top" || edge === "bottom"; return s + parseMeasure(isTopBottom ? (b.rotated ? b.depth : b.length) : (b.rotated ? b.length : b.depth)); }, 0), 0); } // Highest pricing tier across the customer's selected colours (looked up in the // materials library). Multi-colour jobs are priced at the dearest stone chosen. function selectedBracketMultiplier(form) { const lib = (typeof MATERIALS !== "undefined" ? MATERIALS : []).find(m => m.id === form.material); const names = form.colours && form.colours.length ? form.colours : (form.colour ? [form.colour] : []); if (!lib || !names.length) return 1; const top = names.reduce((mx, name) => { const c = (lib.colours || []).find(x => x.name === name); return Math.max(mx, (c && c.bracket) || 1); }, 1); return PRICING.brackets[top] || 1; } function computeEstimate(form) { const lm = totalLinearMetres(form.blocks); if (!lm || !form.material || form.material === "unsure") return null; const baseP = PRICING.materials[form.material]; const bMult = selectedBracketMultiplier(form); const prices = { min: baseP.min * bMult, max: baseP.max * bMult }; const mult = PRICING.thickness[form.thickness] || 1; const edgeEx = PRICING.edge[form.edgeProfile] || 0; const sqm = lm * 0.62; let lo = sqm * prices.min * mult + lm * edgeEx; let hi = sqm * prices.max * mult + lm * edgeEx; const ex = form.extras || {}; // Full-height splashback & waterfall are marked on the layout (which walls / // which edges), so we price the real metres. If they uploaded a photo instead // of drawing, nothing is marked — fall back to a sensible default. const fhM = ex.fullHeight ? (sumEdges(form.blocks, "fullHeightEdges") || lm) : 0; lo += fhM * PRICING.extras.highUpstandMetres.min; hi += fhM * PRICING.extras.highUpstandMetres.max; if (ex.hobPanel) { lo += 0.9 * PRICING.extras.hobPanelMetres.min; hi += 0.9 * PRICING.extras.hobPanelMetres.max; } const drainers = parseMeasure(ex.drainerGrooves) || 0; lo += drainers * PRICING.extras.drainerGrooves.min; hi += drainers * PRICING.extras.drainerGrooves.max; const wfM = ex.waterfall ? (sumEdges(form.blocks, "waterfallEdges") || (0.62 * (ex.waterfallEnds || 1))) : 0; lo += wfM * 0.85 * prices.min * mult; hi += wfM * 0.85 * prices.max * mult; const sills = parseMeasure(ex.windowSill) || 0; const sillW = parseMeasure(ex.windowSillWidth) || 1; lo += sills * sillW * 0.25 * prices.min; hi += sills * sillW * 0.25 * prices.max; const splashbackTotal = fhM + (ex.hobPanel ? 0.9 : 0); return { min: Math.round(lo / 50) * 50, max: Math.round(hi / 50) * 50, splashbackTotal }; } function formatEuro(n) { return "€" + n.toLocaleString("en-IE"); } const LS_KEY = "es_quote_draft"; const LS_VER = "v4"; // Strip the uploaded file out of the saved draft — it can be a megabyte+ and // would blow the localStorage quota. It only needs to live until submit. function saveDraft(form) { try { const { planUpload, ...rest } = form; localStorage.setItem(LS_KEY, JSON.stringify({ ...rest, _v: LS_VER })); } catch(e) {} } function loadDraft() { try { const d = JSON.parse(localStorage.getItem(LS_KEY)); return d && d._v === LS_VER ? d : null; } catch(e) { return null; } } function clearDraft() { try { localStorage.removeItem(LS_KEY); } catch(e) {} } /* ============================================================ ProgressBar ============================================================ */ function ProgressBar({ step }) { const labels = ["Room", "Spec", "Layout", "Extras", "Contact"]; const pct = ((step - 1) / (labels.length - 1)) * 100; return (
{labels.map((l, i) => { const state = step > i + 1 ? " done" : step === i + 1 ? " active" : ""; return (
{l}
); })}
); } /* ============================================================ Stepper ============================================================ */ function Stepper({ value, onChange, min = 0, max = 10 }) { return (
{value}
); } /* ============================================================ Tooltip ============================================================ */ function Tip({ text }) { const [open, setOpen] = React.useState(false); return ( {open && {text}} ); } /* ============================================================ ShapeThumb ============================================================ */ function ShapeThumb({ type }) { return ( ); } /* ============================================================ Room icons ============================================================ */ function RoomIcon({ id }) { const icons = { kitchen: ( ), island: ( ), bathroom: ( ), utility: ( ), fireplace: ( ), memorial: ( ), other: ( ), }; return
{icons[id] || icons.other}
; } /* ============================================================ PlanBuilder helpers ============================================================ */ function findFreePos(blocks, w, h) { const margin = 3; for (let ty = 4; ty + h <= 95; ty += 4) { for (let tx = 4; tx + w <= 95; tx += 4) { const clear = !blocks.some(b => tx < b.x + b.w + margin && tx + w + margin > b.x && ty < b.y + b.h + margin && ty + h + margin > b.y ); if (clear) return { x: tx, y: ty }; } } const maxY = blocks.reduce((m, b) => Math.max(m, b.y + b.h), 0); return { x: 4, y: Math.min(maxY + margin, 95 - h) }; } /* ============================================================ PlanBuilder ============================================================ */ function PlanBuilder({ blocks, onBlocks }) { const [activeId, setActiveId] = React.useState(blocks[0]?.id || ""); const [interaction, setInteraction] = React.useState(null); const canvasRef = React.useRef(null); React.useEffect(() => { if (!blocks.some(b => b.id === activeId) && blocks.length > 0) { setActiveId(blocks[0].id); } }, [blocks, activeId]); const activeBlock = blocks.find(b => b.id === activeId); const updateBlock = (id, patch) => onBlocks(blocks.map(b => b.id === id ? { ...b, ...patch } : b)); // Standard stone slab: 3.2m × 1.8m. Islands larger than this need multiple // slabs and a seam, so we cap what customers can submit at slab dimensions. const ISLAND_MAX_LENGTH = 3.2; const ISLAND_MAX_DEPTH = 1.8; const capIslandString = (str, maxVal) => { const n = parseMeasure(str); if (!n || n <= maxVal) return str; return formatMeasure(maxVal); }; const updateMeasured = (id, patch) => { const src = blocks.find(b => b.id === id); if (!src) return; // Cap island dimensions to one standard slab. const p = { ...patch }; if (src.type === "island") { if (p.length !== undefined) p.length = capIslandString(p.length, ISLAND_MAX_LENGTH); if (p.depth !== undefined) p.depth = capIslandString(p.depth, ISLAND_MAX_DEPTH); } const next = { ...src, ...p }; const size = sizeFromMeasures(next); updateBlock(id, { ...p, w: size.w, h: size.h, x: clamp(next.x, 0, 100 - size.w), y: clamp(next.y, 0, 100 - size.h) }); }; const addBlock = (type) => { const id = type + "-" + Date.now(); const n = blocks.length + 1; const proto = type === "island" ? { id, type:"island", name:"Island " + n, rotated:false, length:"1.2", depth:"0.9", splashbackEdges:[] } : type === "sill" ? { id, type:"sill", name:"Window sill " + n, rotated:false, length:"1.0", depth:"0.22", splashbackEdges:[] } : { id, type:"run", name:"Run " + n, rotated:false, length:"2.0", depth:"0.62", splashbackEdges:[] }; const size = sizeFromMeasures({ ...proto, w: 0, h: 0 }); const pos = findFreePos(blocks, size.w, size.h); onBlocks([...blocks, { ...proto, ...pos, w: size.w, h: size.h }]); setActiveId(id); }; const removeActive = () => { if (!activeBlock || blocks.length === 1) return; const rest = blocks.filter(b => b.id !== activeBlock.id); onBlocks(rest); setActiveId(rest[0]?.id || ""); }; const turnBlock = (e, block) => { e.preventDefault(); e.stopPropagation(); updateBlock(block.id, { rotated: !block.rotated, w: block.h, h: block.w, x: clamp(block.x, 0, 100 - block.h), y: clamp(block.y, 0, 100 - block.w), }); }; const startInteraction = (e, block, mode) => { e.preventDefault(); e.stopPropagation(); setActiveId(block.id); setInteraction({ mode, id: block.id, startX: e.clientX, startY: e.clientY, x: block.x, y: block.y, w: block.w, h: block.h }); }; const onPointerMove = (e) => { if (!interaction) return; const rect = canvasRef.current?.getBoundingClientRect(); if (!rect) return; const dx = ((e.clientX - interaction.startX) / rect.width) * 100; const dy = ((e.clientY - interaction.startY) / rect.height) * 100; const block = blocks.find(b => b.id === interaction.id); if (!block) return; if (interaction.mode === "move") { updateBlock(interaction.id, { x: clamp(interaction.x + dx, 0, 100 - block.w), y: clamp(interaction.y + dy, 0, 100 - block.h), }); } else { const nw = clamp(interaction.w + dx, 1.5, 100 - block.x); const nh = clamp(interaction.h + dy, 1.5, 100 - block.y); const vl = block.rotated ? nh : nw; const vd = block.rotated ? nw : nh; updateBlock(interaction.id, { w: nw, h: nh, length: formatMeasure(vl / PLAN_SCALE), depth: formatMeasure(vd / PLAN_SCALE) }); } }; const lm = totalLinearMetres(blocks); return (
setInteraction(null)} onPointerLeave={() => setInteraction(null)} > {blocks.map((block, i) => (
startInteraction(e, block, "move")} onKeyDown={e => e.key === "Enter" && setActiveId(block.id)} > {block.type === "sill" ? "Sill" : String.fromCharCode(65 + i)} {block.length || "?"}m
))}
{/* Row 1: Worktop run · Island top · Remove */}
{activeBlock && (
{activeBlock.type === "island" && (
Islands are capped at 3.2m × 1.8m — one standard slab. Larger islands need multiple slabs and a seam, so those are quoted separately.
)}
)}
Total linear metres {lm > 0 ? lm.toFixed(1) + " m" : "—"}
); } /* ============================================================ Screen 1 — Room type ============================================================ */ function Screen1({ form, set, onNext }) { const toggle = (id) => { const current = form.roomTypes || []; const next = current.includes(id) ? current.filter(x => x !== id) : [...current, id]; set("roomTypes", next); }; const selected = form.roomTypes || []; const kitchenOn = selected.includes("kitchen"); return (
Step 1 of 5

What are you looking for?

Select all that apply.

{ROOM_TYPES.map(r => ( ))}
); } /* ============================================================ Screen 2 — Material & finish ============================================================ */ function Screen2({ form, set, onNext, onBack }) { const isMemorial = (form.roomTypes || []).includes("memorial"); const isFireplace = (form.roomTypes || []).includes("fireplace"); // Fireplace hearths must handle direct heat — Granite only. React.useEffect(() => { if (isFireplace && form.material !== "granite") set("material", "granite"); }, [isFireplace]); // eslint-disable-line react-hooks/exhaustive-deps // Colour choices come straight from the materials library (window.MATERIALS). const matEntry = (typeof MATERIALS !== "undefined" ? MATERIALS : []).find(x => x.id === form.material); const colours = (matEntry && matEntry.colours) || []; return (
Step 2 of 5

Material & finish

{isMemorial ? "What stone are you considering?" : "Pick your material and colour direction."}

Material
{isFireplace && (

Granite is recommended for fireplaces — it's the only one of our stones rated for direct heat.

)}
{QUOTE_MATERIALS.map(m => { const disabled = isFireplace && m.id !== "granite"; return ( ); })}
{form.material && form.material !== "unsure" && colours.length > 0 && (
Colour · pick one or more (e.g. a different colour for the island) — confirmed at the showroom
{(() => { const renderTile = c => { const picked = (form.colours || []).includes(c.name); return ( ); }; const zeal = colours.filter(c => (c.bracket || 1) === 1); const exo = colours.filter(c => c.bracket === 2); // If nothing is tier-tagged, fall back to a single grid. if (!zeal.length || !exo.length) { return
{colours.map(renderTile)}
; } return ( {zeal.length > 0 && (
Zeal
{zeal.map(renderTile)}
 )} {exo.length > 0 && (
Exo
{exo.map(renderTile)}
 )} ); })()}
)} {!isMemorial && (() => { // If the customer picked any colour we only stock at 20mm, disable the // 30mm thickness option and force-select 20mm. const only20mmNames = new Set( (colours || []).filter(c => c.only20mm).map(c => c.name) ); const has20mmOnly = (form.colours || []).some(n => only20mmNames.has(n)); if (has20mmOnly && form.thickness !== "20mm") { // side-effect via setState during render is fine in this component's flow; // the ternary keeps it idempotent. Promise.resolve().then(() => { set("thickness", "20mm"); set("edgeProfile", "square"); }); } const only20mmPicks = (form.colours || []).filter(n => only20mmNames.has(n)); return (
Thickness
{THICKNESS_OPTS.map(t => { const disabled = t.id === "30mm" && has20mmOnly; return ( ); })}
{has20mmOnly && (
{only20mmPicks.join(", ")} {only20mmPicks.length > 1 ? "are" : "is"} available in 20mm only.
)}
{form.thickness === "30mm" ? (
Edge profile · so you can see what you're picking
{EDGE_OPTS.map(e => ( ))}
) : (
Edge
20mm square edge

20mm worktops come with a clean square edge as standard. The shaped profiles — ogee and bullnose — are available on 30mm.

)} ); })()}
); } /* ============================================================ Screen 3 — Geometry ============================================================ */ function UploadZone({ fileName, onChange }) { return (
); } /* Downscale an uploaded image to a JPEG data URL — keeps the AI-extraction payload small (raster images only; PDFs are skipped). */ function fileToScaledDataUrl(file, maxDim = 1600) { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = reject; reader.onload = () => { const img = new Image(); img.onerror = reject; img.onload = () => { const scale = Math.min(1, maxDim / Math.max(img.width, img.height)); const w = Math.max(1, Math.round(img.width * scale)); const h = Math.max(1, Math.round(img.height * scale)); const canvas = document.createElement("canvas"); canvas.width = w; canvas.height = h; canvas.getContext("2d").drawImage(img, 0, 0, w, h); resolve(canvas.toDataURL("image/jpeg", 0.85)); }; img.src = reader.result; }; reader.readAsDataURL(file); }); } /* Lay the extracted runs out as canvas blocks, reproducing the real kitchen shape from the mm rectangles the AI returned (x,y,w,h on a top-down grid). The rectangles are scaled to fit the square canvas, centred, so the runs sit in their true L / U / peninsula positions. Falls back to the old template mapping when the AI didn't return geometry. */ function blocksFromGeometry(runs) { const minX = Math.min(...runs.map(r => r.x)); const minY = Math.min(...runs.map(r => r.y)); const maxX = Math.max(...runs.map(r => r.x + r.w)); const maxY = Math.max(...runs.map(r => r.y + r.h)); const span = Math.max(maxX - minX, maxY - minY) || 1; const FIT = 84; // use 84% of the canvas const scale = FIT / span; const offX = (100 - (maxX - minX) * scale) / 2; // centre the plan const offY = (100 - (maxY - minY) * scale) / 2; return runs.map((r, i) => ({ id: "ai-" + i + "-" + Date.now(), type: r.island ? "island" : "run", name: "Run " + (r.label || String.fromCharCode(65 + i)), rotated: r.h > r.w, // vertical piece length: String(Math.round(Math.max(r.w, r.h) / 10) / 100 || r.length || "2.0"), depth: String(Math.round(Math.min(r.w, r.h) / 10) / 100 || r.depth || "0.62"), x: clamp(offX + (r.x - minX) * scale, 0, 99), y: clamp(offY + (r.y - minY) * scale, 0, 99), w: clamp(r.w * scale, 1.5, 100), h: clamp(r.h * scale, 1.5, 100), splashbackEdges: [], })); } function blocksFromExtraction(shape, runs) { const list = runs || []; const haveGeom = list.length > 0 && list.every(r => ["x","y","w","h"].every(k => Number.isFinite(r[k]))); if (haveGeom) return blocksFromGeometry(list); // Fallback: position by the matching template, override measured length/depth. const tpl = TEMPLATE_BLOCKS[shape]; return list.map((r, i) => { const base = (tpl && tpl[i]) || { type: "run", rotated: false, x: 20, y: 14 + i * 24 }; const b = { id: "ai-" + i + "-" + Date.now(), type: base.type || "run", name: "Run " + (r.label || String.fromCharCode(65 + i)), rotated: !!base.rotated, length: String(r.length || base.length || "2.0"), depth: String(r.depth || base.depth || "0.62"), x: base.x != null ? base.x : 20, y: base.y != null ? base.y : 14 + i * 24, splashbackEdges: [], }; const size = sizeFromMeasures(b); return { ...b, w: size.w, h: size.h }; }); } function Screen3({ form, set, onNext, onBack }) { const isMemorial = (form.roomTypes || []).includes("memorial"); const [mode, setMode] = React.useState(form.geometryMode || (isMemorial ? "photo" : null)); const [photoData, setPhotoData] = React.useState(null); // downscaled data URL (images only) const [extracting, setExtracting] = React.useState(false); const [extractMsg, setExtractMsg] = React.useState(""); const [extractNote, setExtractNote] = React.useState(""); // post-extract "check this" banner on the canvas const selectMode = (m) => { setMode(m); set("geometryMode", m); if (m !== "photo") set("photoFileName", ""); }; const loadTemplate = (id) => { const tpl = TEMPLATE_BLOCKS[id]; if (!tpl) return; set("blocks", tpl.map(b => { const size = sizeFromMeasures(b); return { ...b, w: size.w, h: size.h }; })); set("selectedTemplate", id); selectMode("canvas"); }; const handleFile = (e) => { const f = e.target.files[0]; if (!f) return; set("photoFileName", f.name); setExtractMsg(""); setPhotoData(null); set("planUpload", null); if (/^image\//.test(f.type)) { // Downscale once: serves both the AI extraction and the office copy. // ~2000px keeps the dimension numbers legible while staying well under // Vercel's request-body limit when sent on to the office. fileToScaledDataUrl(f, 2000).then(url => { setPhotoData(url); set("planUpload", { name: f.name, type: "image/jpeg", dataUrl: url }); }).catch(() => setPhotoData(null)); } else { // PDFs / other: send the raw file to the office if it's small enough to // fit in the request body (~4.5MB cap → keep the base64 under ~3.6MB). const reader = new FileReader(); reader.onload = () => { const dataUrl = reader.result; if (typeof dataUrl === "string" && dataUrl.length < 3600000) { set("planUpload", { name: f.name, type: f.type || "application/octet-stream", dataUrl }); } else { set("planUpload", { name: f.name, type: f.type, tooLarge: true }); } }; reader.onerror = () => set("planUpload", { name: f.name, type: f.type, tooLarge: true }); reader.readAsDataURL(f); } selectMode("photo"); }; const handleExtract = async () => { if (!photoData) return; setExtracting(true); setExtractMsg(""); try { const res = await fetch("/api/extract-plan", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ image: photoData }), }); const data = await res.json(); if (data && data.ok && data.runs && data.runs.length) { set("blocks", blocksFromExtraction(data.shape, data.runs)); set("selectedTemplate", data.shape || null); // Reading dimensions off a photographed plan is never exact — always ask // the customer to check, and lean harder on it when confidence is low. const lowConf = typeof data.confidence === "number" && data.confidence < 0.75; setExtractNote(lowConf ? "We've sketched a rough starting point from your plan — please check each run's length and depth below, as photos of plans aren't always exact. Our team confirms the precise measurements at the site visit." : "We've read your plan into the canvas below — give each run a quick check and adjust anything before continuing. We confirm exact measurements at the site visit."); selectMode("canvas"); } else { setExtractNote(""); setExtractMsg((data && data.reason) || "We couldn't read the dimensions — please draw the layout manually or we'll confirm at measure."); } } catch (err) { setExtractMsg("We couldn't read the dimensions — please draw the layout manually or we'll confirm at measure."); } setExtracting(false); }; const canContinue = mode === "photo" ? !!form.photoFileName : mode === "canvas"; if (isMemorial) { return (
Step 3 of 5

Design & dimensions

Upload a photo of the design, or describe what you need below.