@metron-labs/quote-react 0.1.64 → 0.1.66

package/dist/app/EstimatingTools.js

@@ -5,11 +5,11 @@ import { assetUrl } from "../lib/assets";
 import { getQuoteConfig } from "../lib/config";
 import { TrackContext, useTracker } from "../lib/analytics";
 import { ESTIMATOR_TOOLS } from "../components/estimators/registry";
-import BasketStage from "./stages/BasketStage";
-import EstimatorReviewStage from "../components/estimators/EstimatorReviewStage";
 import { fixedBasketLines } from "../lib/estimators/fixedProducts";
 import { EstimatorBasketLoading, useFixedBasket } from "../components/estimators/useFixedBasket";
 import { CartProvider, useCart } from "../lib/cart/CartContext";
+import BasketStage from "./stages/BasketStage";
+import EstimatorReviewStage from "../components/estimators/EstimatorReviewStage";
 export default function EstimatingTools(props) {
     // Held above the provider so "Add to basket", several layers down inside an estimator,
     // can bring the basket up without every estimator having to thread a callback through.
@@ -28,7 +28,7 @@ function EstimatingToolsInner({ fullPage = false, hideHeader = false, internal =
         track("viewed");
     }, [track]);
     // Every screen change, forward or back, lands at the top.
-    const view = showBasket ? "basket" : adding ? "adding" : review ? "review" : activeEstimatorId ?? "list";
+    const view = showBasket ? "basket" : adding ? "adding" : review ? "review" : (activeEstimatorId ?? "list");
     const scrolledView = useRef(view);
     useEffect(() => {
         if (scrolledView.current === view)
@@ -51,5 +51,9 @@ function EstimatingToolsInner({ fullPage = false, hideHeader = false, internal =
                         setActiveEstimatorId(null);
                         setReview(null);
                         onShowBasket(false);
-                    }, internal: internal })) : adding && activeEstimator ? (_jsx(EstimatorBasketLoading, { toolTitle: activeEstimator.title })) : activeEstimator ? (_jsxs(_Fragment, { children: [_jsx("div", { hidden: review !== null, children: _jsx(activeEstimator.Component, { onBack: () => setActiveEstimatorId(null), onReview: reviewOrBasket }) }), basketError && _jsx("p", { className: "results-empty-hint estimator-products__error", children: basketError }), review !== null && (_jsx(EstimatorReviewStage, { toolId: activeEstimator.id, toolTitle: activeEstimator.title, requirements: review, onBack: () => setReview(null) }))] })) : (_jsx(_Fragment, { children: _jsxs("div", { className: "quick-order-card", children: [_jsxs("div", { className: "quick-order-hero", children: [_jsx("div", { className: "quick-order-eyebrow", children: "Construction Services" }), _jsx("h1", { children: "Estimating Tools" }), _jsx("p", { children: "Trade-specific calculators for trusses, fencing, decking, masonry and painting. Dial in your specs and get an instant material estimate." })] }), _jsxs("div", { className: "quick-order-alt", children: [_jsx("div", { className: "quick-order-alt-title", children: "Choose a Calculator" }), _jsx("div", { className: "estimator-tools-grid", children: ESTIMATOR_TOOLS.map((tool) => (_jsxs("button", { type: "button", className: "estimator-tool-card", onClick: () => { track("calculator_selected", { calculator: tool.id }); setActiveEstimatorId(tool.id); setReview(null); }, children: [_jsx("span", { className: "estimator-tool-card__image-wrap", children: _jsx("img", { className: "fill-img estimator-tool-card__image", src: assetUrl(tool.imageUrl), alt: "" }) }), _jsxs("span", { className: "estimator-tool-card__content", children: [_jsx("span", { className: "estimator-tool-card__title", children: tool.title }), _jsx("span", { className: "estimator-tool-card__desc", children: tool.desc })] })] }, tool.id))) })] })] }) })) }) }) }));
+                    }, internal: internal })) : adding && activeEstimator ? (_jsx(EstimatorBasketLoading, { toolTitle: activeEstimator.title })) : activeEstimator ? (_jsxs(_Fragment, { children: [_jsx("div", { hidden: review !== null, children: _jsx(activeEstimator.Component, { onBack: () => setActiveEstimatorId(null), onReview: reviewOrBasket }) }), basketError && _jsx("p", { className: "results-empty-hint estimator-products__error", children: basketError }), review !== null && _jsx(EstimatorReviewStage, { toolId: activeEstimator.id, toolTitle: activeEstimator.title, requirements: review, onBack: () => setReview(null) })] })) : (_jsx(_Fragment, { children: _jsxs("div", { className: "quick-order-card", children: [_jsxs("div", { className: "quick-order-hero", children: [_jsx("div", { className: "quick-order-eyebrow", children: "Construction Services" }), _jsx("h1", { children: "Estimating Tools" }), _jsx("p", { children: "Trade-specific calculators for trusses, fencing, decking, masonry and painting. Dial in your specs and get an instant material estimate." })] }), _jsxs("div", { className: "quick-order-alt", children: [_jsx("div", { className: "quick-order-alt-title", children: "Choose a Calculator" }), _jsx("div", { className: "estimator-tools-grid", children: ESTIMATOR_TOOLS.map((tool) => (_jsxs("button", { type: "button", className: "estimator-tool-card", onClick: () => {
+                                                track("calculator_selected", { calculator: tool.id });
+                                                setActiveEstimatorId(tool.id);
+                                                setReview(null);
+                                            }, children: [_jsx("span", { className: "estimator-tool-card__image-wrap", children: _jsx("img", { className: "fill-img estimator-tool-card__image", src: assetUrl(tool.imageUrl), alt: "" }) }), _jsxs("span", { className: "estimator-tool-card__content", children: [_jsx("span", { className: "estimator-tool-card__title", children: tool.title }), _jsx("span", { className: "estimator-tool-card__desc", children: tool.desc })] })] }, tool.id))) })] })] }) })) }) }) }));
 }

package/dist/app/QuickQuote.js

@@ -5,12 +5,12 @@ import { getQuoteConfig } from "../lib/config";
 import { TrackContext, useTracker } from "../lib/analytics";
 import { submitSchedule, pollScheduleJob } from "../lib/api/fetchSchedule";
 import { pollJob } from "../lib/api/pollJob";
-import EntryStage from "./stages/EntryStage";
 import { ENTRY_DRAFT_KEY } from "./stages/EntryStage";
-import ScheduleResultsStage from "./stages/ScheduleResultsStage";
-import BasketStage from "./stages/BasketStage";
 import { CartProvider, useCart } from "../lib/cart/CartContext";
 import { installQuoteHistory, setStep, stepBack } from "../lib/quoteHistory";
+import BasketStage from "./stages/BasketStage";
+import EntryStage from "./stages/EntryStage";
+import ScheduleResultsStage from "./stages/ScheduleResultsStage";
 const SAVED_QUOTE_KEY = "metron-quick-quote";
 // A tab left open for days shouldn't come back with old matches and old prices.
 // ponytail: counts from the last edit, not from matching. Stamp the match time instead if
@@ -241,7 +241,7 @@ function QuickQuoteInner({ fullPage = false, hideHeader = false, internal = fals
         setEntryMode("schedule");
         await runScheduleMatch(file);
     }, [runScheduleMatch]);
-    return (_jsx(TrackContext.Provider, { value: track, children: _jsx("div", { ref: rootRef, className: `app-wrapper${fullPage ? "" : " app-wrapper--embedded"}${hideHeader ? " app-wrapper--no-header" : ""}${!fullPage && stage === "processing" ? " app-wrapper--loading" : ""}`, style: getQuoteConfig().theme, children: _jsxs("main", { className: "main-content", children: [error && (_jsxs("div", { className: "error-box", role: "alert", children: [_jsx("strong", { children: "Error:" }), " ", error] })), stage === "entry" && _jsx(EntryStage, { onPasteSchedule: handlePasteSchedule, onUploadSchedule: handleUploadSchedule, onEntryModeChange: setEntryMode, draft: entryDraft, onSubmitDraft: setEntryDraft, onCancelMatch: cancelMatch }), stage === "results" && entryMode === "schedule" && scheduleResult && (_jsx(ScheduleResultsStage, { scheduleResult: scheduleResult, onStartOver: resetToEntry, cart: cart, onAddToCart: addToCart, onRemoveFromCart: removeFromCart, onGoToBasket: goToBasket, cartSeeded: cartSeeded, onCartSeeded: () => setCartSeeded(true), reviewGateComplete: scheduleReviewGateComplete, onReviewGateComplete: () => setScheduleReviewGateComplete(true), internal: internal })), stage === "basket" && (_jsx(BasketStage, { cart: cart, onUpdateQty: updateCartQty, onUpdateSellUnits: updateCartSellUnits, onResolveConversions: updateCartConversions, onRemove: removeFromCart, onBack: backToResults, onStartNewQuote: resetToEntry, onQuoteRequested: () => {
+    return (_jsx(TrackContext.Provider, { value: track, children: _jsx("div", { ref: rootRef, className: `app-wrapper${fullPage ? "" : " app-wrapper--embedded"}${hideHeader ? " app-wrapper--no-header" : ""}${!fullPage && stage === "processing" ? " app-wrapper--loading" : ""}`, style: getQuoteConfig().theme, children: _jsxs("main", { className: "main-content", children: [error && (_jsxs("div", { className: "error-box", role: "alert", children: [_jsx("strong", { children: "Error:" }), " ", error] })), stage === "entry" && (_jsx(EntryStage, { onPasteSchedule: handlePasteSchedule, onUploadSchedule: handleUploadSchedule, onEntryModeChange: setEntryMode, draft: entryDraft, onSubmitDraft: setEntryDraft, onCancelMatch: cancelMatch })), stage === "results" && entryMode === "schedule" && scheduleResult && (_jsx(ScheduleResultsStage, { scheduleResult: scheduleResult, onStartOver: resetToEntry, cart: cart, onAddToCart: addToCart, onRemoveFromCart: removeFromCart, onGoToBasket: goToBasket, cartSeeded: cartSeeded, onCartSeeded: () => setCartSeeded(true), reviewGateComplete: scheduleReviewGateComplete, onReviewGateComplete: () => setScheduleReviewGateComplete(true), internal: internal })), stage === "basket" && (_jsx(BasketStage, { cart: cart, onUpdateQty: updateCartQty, onUpdateSellUnits: updateCartSellUnits, onResolveConversions: updateCartConversions, onRemove: removeFromCart, onBack: backToResults, onStartNewQuote: resetToEntry, onQuoteRequested: () => {
                             setScheduleResult(null);
                             setScheduleReviewGateComplete(false);
                             setCartSeeded(false);

package/dist/app/stages/BasketStage.d.ts

@@ -6,9 +6,7 @@ interface BasketStageProps {
     onResolveConversions?: (conversions: Record<string, Partial<CartItem>>) => void;
     onRemove: (lineId: string) => void;
     onBack: () => void;
-    /** Clears the basket and returns to the start, from the quote-request confirmation page. */
     onStartNewQuote: () => void;
-    /** Called once the quote request is sent; the confirmation stays up whatever it clears. */
     onQuoteRequested?: () => void;
     internal?: boolean;
 }

package/dist/app/stages/BasketStage.js

@@ -2,17 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useId, useRef, useState } from "react";
 import { apiUrl } from "../../lib/config";
 import { useTrack } from "../../lib/analytics";
-import BackArrow from "../../components/BackArrow";
 import { fmtCurrency } from "../../lib/formatters";
-import { productImageSrc } from "../../lib/productImage";
 import { getCartSubtotal, getPricingBreakdown } from "../../util/pricing";
 import { exportBasketExcel } from "../../util/exportScheduleExcel";
 import { renderDisplayUnit, unitDisplayText } from "../components/UnitDisplay";
 import { clientHeaders, getBoqClientId, readJson } from "../../lib/api/boqClient";
 import { MAX_ORDER_QTY } from "../../lib/boq/inputLimits";
 import { conversionInputKey } from "../../lib/cart/CartContext";
-// ponytail: flat UK VAT rate, matching fmtCurrency's GBP-only assumption elsewhere in this app.
-const VAT_RATE = 0.2;
+import BackArrow from "../../components/BackArrow";
+import ChevronIcon from "../../components/ChevronIcon";
+import TrashIcon from "../../components/TrashIcon";
+import ProductImage from "../../lib/ProductImage";
+const VAT_RATE = 0.2; //Flat UK VAT rate, matching fmtCurrency's GBP-only assumption elsewhere in this app.
 const PAGE_SIZE = 10;
 const INVALID_EMAIL_MESSAGE = "Enter a valid email address so we can send your quote.";
 const orderSummary = (item, pricing) => {
@@ -32,24 +33,19 @@ const reviewMessage = (pricing) => {
         return "Pack size needed to calculate the order quantity.";
     return `This product is sold by ${unitDisplayText(pricing.sellUnit, 1)}.`;
 };
-function TrashIcon() {
-    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("polyline", { points: "3 6 5 6 21 6" }), _jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }), _jsx("line", { x1: "10", y1: "11", x2: "10", y2: "17" }), _jsx("line", { x1: "14", y1: "11", x2: "14", y2: "17" })] }));
-}
-function ChevronIcon() {
-    return (_jsx("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "none", children: _jsx("path", { d: "M1 4L4 1L7 4", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-}
 export default function BasketStage({ cart, onUpdateQty, onUpdateSellUnits, onResolveConversions, onRemove, onBack, onStartNewQuote, onQuoteRequested, internal = false, }) {
     // Both widgets can render a basket on the same page, so element ids are made unique.
     const uid = useId();
+    const track = useTrack();
     // Every customer sends the basket to the merchant (POST /v1/quote-requests). Materials Market
     // calls it a quote request and keeps its own layout; every other client calls it a basket.
     const qzaBasketLayout = !internal && getBoqClientId() === "QZA6-MRA4";
     const sendsRequest = !internal;
     const items = Object.values(cart);
+    const resolvedConversionInputs = useRef(new Map());
     const [reference, setReference] = useState("");
     const [quoteRequestSent, setQuoteRequestSent] = useState(false);
     const [quoteRequestSending, setQuoteRequestSending] = useState(false);
-    const track = useTrack();
     const [quoteContactError, setQuoteContactError] = useState("");
     const [qtyDrafts, setQtyDrafts] = useState({});
     const [sellUnitsDrafts, setSellUnitsDrafts] = useState({});
@@ -58,7 +54,6 @@ export default function BasketStage({ cart, onUpdateQty, onUpdateSellUnits, onRe
     const [wasteEnabled, setWasteEnabled] = useState(false);
     const [wastePercent, setWastePercent] = useState("0");
     const [resolvingConversionInputs, setResolvingConversionInputs] = useState({});
-    const resolvedConversionInputs = useRef(new Map());
     useEffect(() => {
         if (!onResolveConversions)
             return;
@@ -252,12 +247,13 @@ export default function BasketStage({ cart, onUpdateQty, onUpdateSellUnits, onRe
     const total = subtotal == null ? null : subtotal * (1 + VAT_RATE);
     const unpriced = pricedItems.filter(({ pricing }) => pricing.lineTotal == null).length;
     const resolvingCount = Object.keys(resolvingConversionInputs).length;
-    const waitingForConversions = !!onResolveConversions && items.some((item) => {
-        if (item.productId === "-" || getPricingBreakdown(item).requiredSellUnits != null)
-            return false;
-        const input = conversionInputKey(item);
-        return resolvedConversionInputs.current.get(item.lineId) !== input || resolvingConversionInputs[item.lineId] === input;
-    });
+    const waitingForConversions = !!onResolveConversions &&
+        items.some((item) => {
+            if (item.productId === "-" || getPricingBreakdown(item).requiredSellUnits != null)
+                return false;
+            const input = conversionInputKey(item);
+            return resolvedConversionInputs.current.get(item.lineId) !== input || resolvingConversionInputs[item.lineId] === input;
+        });
     // Once per visit to the basket, with the figures it opened with.
     const openedWith = useRef({ items: pricedItems.length, ...(total == null ? {} : { total: Math.round(total * 100) / 100 }) });
     useEffect(() => {
@@ -281,7 +277,7 @@ export default function BasketStage({ cart, onUpdateQty, onUpdateSellUnits, onRe
                                                     const requestedQtyValue = qtyDrafts[item.lineId] ?? String(pricing.requestedAmount);
                                                     const requestedLocked = pricing.requestedUnit === pricing.sellUnit || pricing.costingMode === "review";
                                                     const rawDiffersFromOrder = pricing.requiredSellUnits == null || pricing.requestedAmount !== pricing.requiredSellUnits || pricing.requestedUnit !== pricing.sellUnit;
-                                                    return (_jsxs("article", { className: "basket-card", children: [_jsxs("div", { className: "basket-card-top", children: [_jsx("img", { className: "basket-card-thumb", src: productImageSrc(item.description, item.productId, item.pdpPhotoUrl), alt: "", width: 48, height: 48 }), _jsxs("div", { className: "basket-card-info", children: [_jsx("div", { className: "bom-component-name", children: item.description }), rawDiffersFromOrder && pricing.costingMode !== "review" && (_jsxs("button", { type: "button", className: "basket-calc-toggle", onClick: () => setCalcOpen((prev) => ({
+                                                    return (_jsxs("article", { className: "basket-card", children: [_jsxs("div", { className: "basket-card-top", children: [_jsx(ProductImage, { className: "basket-card-thumb", description: item.description, photoUrl: item.pdpPhotoUrl, width: 48, height: 48 }), _jsxs("div", { className: "basket-card-info", children: [_jsx("div", { className: "bom-component-name", children: item.description }), rawDiffersFromOrder && pricing.costingMode !== "review" && (_jsxs("button", { type: "button", className: "basket-calc-toggle", onClick: () => setCalcOpen((prev) => ({
                                                                                     ...prev,
                                                                                     [item.lineId]: !prev[item.lineId],
                                                                                 })), "aria-expanded": !!calcOpen[item.lineId], children: ["How we calculated this", _jsx("span", { className: `basket-calc-toggle-chevron${calcOpen[item.lineId] ? " basket-calc-toggle-chevron--open" : ""}`, children: _jsx(ChevronIcon, {}) })] }))] }), _jsx("div", { className: "basket-card-actions", children: _jsx("button", { type: "button", className: "mf-remove-small-btn basket-card-remove", onClick: () => onRemove(item.lineId), "aria-label": `Remove ${item.description}`, children: _jsx(TrashIcon, {}) }) })] }), internal && (_jsxs("div", { className: "results-detail-block basket-internal-detail", children: [_jsxs("dl", { className: "results-detail-grid", children: [_jsxs("div", { children: [_jsx("dt", { children: "Conversion type" }), _jsx("dd", { children: item.conversionType ?? "-" })] }), _jsxs("div", { children: [_jsx("dt", { children: "Conversion confidence" }), _jsx("dd", { children: item.conversionConfidence ?? "-" })] }), _jsxs("div", { children: [_jsx("dt", { children: "Sales unit" }), _jsx("dd", { children: item.salesUnitSize != null ? (_jsxs(_Fragment, { children: [item.salesUnitSize, " ", renderDisplayUnit(item.salesUnitSizeUom, item.salesUnitSize)] })) : ("-") })] }), _jsxs("div", { children: [_jsx("dt", { children: "Coverage" }), _jsx("dd", { children: item.coverageQty != null ? (_jsxs(_Fragment, { children: [item.coverageQty, " ", renderDisplayUnit(item.coverageUom, item.coverageQty)] })) : ("-") })] }), _jsxs("div", { children: [_jsx("dt", { children: "Waste factor" }), _jsx("dd", { children: item.wasteFactorDefault ?? "-" })] }), _jsxs("div", { children: [_jsx("dt", { children: "Rounding rule" }), _jsx("dd", { children: item.roundingRule ?? "-" })] })] }), item.conversionNotes && _jsx("p", { className: "results-rerank-note", children: item.conversionNotes })] })), pricing.costingMode === "review" ? (_jsxs("p", { className: "basket-calc-text basket-calc-text--review", children: [_jsx("strong", { children: resolvingConversionInputs[item.lineId] === conversionInputKey(item) ? "Calculating order quantity…" : "Quantity needs confirmation." }), " ", reviewMessage(pricing)] })) : rawDiffersFromOrder && calcOpen[item.lineId] ? (_jsx("p", { className: "basket-calc-text", children: orderSummary(item, pricing) })) : null, _jsxs("div", { className: "basket-card-stats", children: [_jsxs("div", { className: "basket-stat", children: [_jsx("span", { className: "basket-stat-label", children: "Requested qty" }), _jsxs("div", { className: "basket-stat-value", children: [_jsxs("div", { className: "basket-qty-field", children: [_jsx("input", { className: "bom-qty-edit", type: "number", inputMode: "decimal", min: "0", placeholder: "-", value: requestedQtyValue, disabled: requestedLocked, onChange: (e) => setQtyDrafts((prev) => ({

package/dist/app/stages/EntryStage.d.ts

@@ -3,10 +3,8 @@ interface EntryStageProps {
     onPasteSchedule: (text: string, providedLines?: PhotoExtractedLine[], archiveSource?: boolean) => Promise<void> | void;
     onUploadSchedule: (file: File) => Promise<void> | void;
     onEntryModeChange: (mode: EntryMode) => void;
-    /** The last submitted input, so stepping back from the matches reopens the dialog with it. */
     draft?: EntryDraft | null;
     onSubmitDraft?: (draft: EntryDraft) => void;
-    /** Browser back out of the dialog mid-match - drop the match in flight. */
     onCancelMatch?: () => void;
 }
 type QuickOrderTab = "paste" | "upload";

package/dist/app/stages/EntryStage.js

@@ -2,12 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useEffect, useRef, useState } from "react";
 import { assetUrl } from "../../lib/assets";
 import { useTrack } from "../../lib/analytics";
-import ForwardArrow from "../../components/ForwardArrow";
-import CloseIcon from "../../components/CloseIcon";
 import { FILE_EXTENSIONS, isPhotoFile, shrinkPhoto, validateLines, validateUploadFile } from "../../lib/boq/inputLimits";
 import { ProcessingContent } from "./ProcessingStage";
 import { useEscapeKey } from "../../lib/useEscapeKey";
 import { setStep, stepBack } from "../../lib/quoteHistory";
+import ForwardArrow from "../../components/ForwardArrow";
+import CloseIcon from "../../components/CloseIcon";
 const UPLOAD_ACCEPT = [...FILE_EXTENSIONS.schedule, ...FILE_EXTENSIONS.photo].join(",");
 const STEPS = {
     paste: [
@@ -25,18 +25,17 @@ const STEPS = {
 const DIALOG_HASH = "#quote-entry";
 export const ENTRY_DRAFT_KEY = "metron-quick-quote-entry";
 export default function EntryStage({ onPasteSchedule, onUploadSchedule, onEntryModeChange, draft, onSubmitDraft, onCancelMatch }) {
-    const [activeTab, setActiveTab] = useState(() => (draft && typeof window !== "undefined" && window.location.hash === DIALOG_HASH ? draft.tab : null));
+    const fileInputRef = useRef(null);
     const track = useTrack();
+    const dragDepth = useRef(0);
+    const matchRun = useRef(0); // Bumped on each submit and on cancel; a match that finds it moved on was cancelled.
+    const [activeTab, setActiveTab] = useState(() => (draft && typeof window !== "undefined" && window.location.hash === DIALOG_HASH ? draft.tab : null));
     const [pastedText, setPastedText] = useState(draft?.text ?? "");
     const [uploadFile, setUploadFile] = useState(draft?.file ?? null);
     const [uploadError, setUploadError] = useState("");
     const [matching, setMatching] = useState(false);
     const [pageDragOver, setPageDragOver] = useState(false);
     const [photoPreviewUrl, setPhotoPreviewUrl] = useState(null);
-    const dragDepth = useRef(0);
-    // Bumped on each submit and on cancel; a match that finds it moved on was cancelled.
-    const matchRun = useRef(0);
-    const fileInputRef = useRef(null);
     const lineCount = pastedText.split("\n").filter((line) => line.trim()).length;
     const pasteLineProblem = validateLines(pastedText);
     const hasWorkflowInput = activeTab === "paste" ? Boolean(pastedText) : Boolean(uploadFile);
@@ -201,6 +200,14 @@ export default function EntryStage({ onPasteSchedule, onUploadSchedule, onEntryM
         applyUploadFile(event.dataTransfer.files);
         openWorkflow("upload");
     };
-    return (_jsxs("div", { className: "wizard-step entry-stage", onDragEnter: onPageDragEnter, onDragOver: (event) => isFileDrag(event) && event.preventDefault(), onDragLeave: onPageDragLeave, onDrop: onPageDrop, children: [pageDragOver && _jsx("div", { className: "entry-drop-overlay", "aria-hidden": "true", children: "Drop your file to upload" }), _jsxs("div", { className: "quick-order-card", children: [_jsxs("div", { className: "quick-order-alt", children: [_jsxs("div", { className: "quick-order-entry-copy", children: [_jsx("div", { className: "quick-order-alt-title", children: "How would you like to get started?" }), _jsx("p", { className: "quick-order-alt-intro", children: "Upload a file or type a list of items and quantities. We'll match them to our products and help you build a quote." })] }), _jsxs("div", { className: "entry-options entry-options--workflow entry-options--two", children: [_jsxs("button", { type: "button", className: `entry-option-card entry-option-card--paste${activeTab === "paste" ? " entry-option-card--active" : ""}`, onClick: () => openWorkflow("paste"), children: [_jsxs("span", { className: "entry-option-content", children: [_jsx("span", { className: "entry-option-title", children: "Type or paste a list" }), _jsx("span", { className: "entry-option-desc", children: "Enter your materials and quantities" })] }), _jsx("span", { className: "entry-option-media entry-option-media--paste", "aria-hidden": "true", children: _jsx("img", { className: "fill-img", src: assetUrl("/quick-order/paste-list.webp"), alt: "" }) })] }), _jsxs("button", { type: "button", className: `entry-option-card entry-option-card--upload${activeTab === "upload" ? " entry-option-card--active" : ""}`, onClick: () => openWorkflow("upload"), children: [_jsxs("span", { className: "entry-option-content", children: [_jsx("span", { className: "entry-option-title", children: "Upload a file" }), _jsx("span", { className: "entry-option-desc", children: "A photo, spreadsheet, Word document or PDF" })] }), _jsx("span", { className: "entry-option-media entry-option-media--upload", "aria-hidden": "true", children: _jsx("img", { className: "fill-img", src: assetUrl("/quick-order/photo-list.webp"), alt: "" }) })] })] })] }), activeTab && (_jsx("div", { className: "modal-backdrop quick-order-modal-backdrop", role: "dialog", "aria-modal": "true", "aria-labelledby": "quick-order-workflow-title", onClick: () => !hasWorkflowInput && closeWorkflow(), children: _jsxs("section", { className: `quick-order-workflow-modal${matching ? " quick-order-workflow-modal--matching" : ""}`, onClick: (event) => event.stopPropagation(), children: [_jsxs("header", { className: "quick-order-workflow-modal-header", children: [_jsx("h2", { id: "quick-order-workflow-title", children: activeTab === "paste" ? "Type or paste a list" : "Upload a file" }), _jsx("button", { type: "button", className: "quick-order-workflow-close", onClick: closeWorkflow, "aria-label": "Close", children: _jsx(CloseIcon, {}) })] }), _jsxs("div", { className: "quick-order-panel", children: [_jsxs("div", { className: "quick-order-body", "aria-hidden": matching, children: [_jsx("div", { className: "quick-order-body-main", children: activeTab === "paste" ? (_jsxs(_Fragment, { children: [_jsx("textarea", { className: "paste-textarea", placeholder: "Paste your line items here, one per line, e.g.\ninsulated plasterboard 50mm\nC24 timber 4.8m", value: pastedText, onChange: (event) => setPastedText(event.target.value), "aria-label": "Paste schedule line items" }), pasteLineProblem && _jsxs("div", { className: "error-box", role: "alert", children: [_jsx("strong", { children: "Error:" }), " ", pasteLineProblem] }), _jsxs("div", { className: "quick-order-hint", children: [_jsx("strong", { children: "Tip:" }), "\u00A0Paste one line per item. Include a count, e.g. \"x10\", to help us find the right stock and pricing."] }), _jsx("div", { className: "quick-order-actions", children: _jsxs("button", { type: "button", className: "cta-btn", disabled: !lineCount || Boolean(pasteLineProblem), onClick: () => { track("list_submitted", { method: "paste", lines: lineCount }); void startMatching(() => onPasteSchedule(pastedText)); }, "aria-label": "Match pasted lines", children: [_jsx("span", { children: "Match line items" }), _jsx("span", { className: "arrow", children: _jsx(ForwardArrow, {}) })] }) })] })) : (_jsxs(_Fragment, { children: [uploadError && _jsxs("div", { className: "error-box", role: "alert", children: [_jsx("strong", { children: "Error:" }), " ", uploadError] }), _jsxs("div", { className: `upload-zone${uploadFile ? " has-file" : ""}`, onClick: () => fileInputRef.current?.click(), onDragOver: (event) => event.preventDefault(), onDrop: onPageDrop, role: "button", tabIndex: 0, onKeyDown: (event) => (event.key === "Enter" || event.key === " ") && fileInputRef.current?.click(), "aria-label": "Upload zone: click or drag a list or image file here", children: [photoPreviewUrl ? _jsx("img", { src: photoPreviewUrl, alt: uploadFile?.name ?? "Selected photo", className: "upload-zone-photo-preview" }) : _jsx("div", { className: "upload-zone-icon", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), _jsx("polyline", { points: "14,2 14,8 20,8" }), _jsx("polyline", { points: "9,15 11,17 15,13" })] }) }), uploadFile ? _jsxs(_Fragment, { children: [_jsx("div", { className: "upload-zone-subtext", children: uploadFile.name }), _jsx("button", { type: "button", className: "link-btn link-btn--underline", onClick: (event) => { event.stopPropagation(); setUploadFile(null); setUploadError(""); if (fileInputRef.current)
-                                                                                    fileInputRef.current.value = ""; }, children: "Remove" })] }) : _jsxs(_Fragment, { children: [_jsx("div", { className: "upload-zone-text", children: "Drop a photo, spreadsheet, Word document or PDF" }), _jsx("div", { className: "upload-zone-subtext", children: "or click to choose a file" })] }), _jsx("input", { ref: fileInputRef, type: "file", accept: UPLOAD_ACCEPT, className: "visually-hidden", onChange: (event) => applyUploadFile(event.target.files), tabIndex: -1, "aria-hidden": "true" })] }), _jsx("div", { className: "quick-order-actions", children: _jsxs("button", { type: "button", className: "cta-btn", disabled: !uploadFile, onClick: () => void matchUpload(), "aria-label": "Match uploaded items", children: [_jsx("span", { children: "Match items" }), _jsx("span", { className: "arrow", children: _jsx(ForwardArrow, {}) })] }) })] })) }), _jsx("aside", { className: "quick-order-sidebar", children: STEPS[activeTab].map((step, index) => _jsxs("div", { className: "quick-order-step quick-order-step--rail", children: [_jsx("span", { className: "quick-order-step-dot", children: index + 1 }), _jsxs("div", { children: [_jsx("div", { className: "quick-order-step-title", children: step.title }), _jsx("div", { className: "quick-order-step-desc", children: step.desc })] })] }, step.title)) })] }), matching && _jsx("div", { className: "quick-order-matching-overlay", children: _jsx(ProcessingContent, {}) })] })] }) }))] })] }));
+    return (_jsxs("div", { className: "wizard-step entry-stage", onDragEnter: onPageDragEnter, onDragOver: (event) => isFileDrag(event) && event.preventDefault(), onDragLeave: onPageDragLeave, onDrop: onPageDrop, children: [pageDragOver && (_jsx("div", { className: "entry-drop-overlay", "aria-hidden": "true", children: "Drop your file to upload" })), _jsxs("div", { className: "quick-order-card", children: [_jsxs("div", { className: "quick-order-alt", children: [_jsxs("div", { className: "quick-order-entry-copy", children: [_jsx("div", { className: "quick-order-alt-title", children: "How would you like to get started?" }), _jsx("p", { className: "quick-order-alt-intro", children: "Upload a file or type a list of items and quantities. We'll match them to our products and help you build a quote." })] }), _jsxs("div", { className: "entry-options entry-options--workflow entry-options--two", children: [_jsxs("button", { type: "button", className: `entry-option-card entry-option-card--paste${activeTab === "paste" ? " entry-option-card--active" : ""}`, onClick: () => openWorkflow("paste"), children: [_jsxs("span", { className: "entry-option-content", children: [_jsx("span", { className: "entry-option-title", children: "Type or paste a list" }), _jsx("span", { className: "entry-option-desc", children: "Enter your materials and quantities" })] }), _jsx("span", { className: "entry-option-media entry-option-media--paste", "aria-hidden": "true", children: _jsx("img", { className: "fill-img", src: assetUrl("/quick-order/paste-list.webp"), alt: "" }) })] }), _jsxs("button", { type: "button", className: `entry-option-card entry-option-card--upload${activeTab === "upload" ? " entry-option-card--active" : ""}`, onClick: () => openWorkflow("upload"), children: [_jsxs("span", { className: "entry-option-content", children: [_jsx("span", { className: "entry-option-title", children: "Upload a file" }), _jsx("span", { className: "entry-option-desc", children: "A photo, spreadsheet, Word document or PDF" })] }), _jsx("span", { className: "entry-option-media entry-option-media--upload", "aria-hidden": "true", children: _jsx("img", { className: "fill-img", src: assetUrl("/quick-order/photo-list.webp"), alt: "" }) })] })] })] }), activeTab && (_jsx("div", { className: "modal-backdrop quick-order-modal-backdrop", role: "dialog", "aria-modal": "true", "aria-labelledby": "quick-order-workflow-title", onClick: () => !hasWorkflowInput && closeWorkflow(), children: _jsxs("section", { className: `quick-order-workflow-modal${matching ? " quick-order-workflow-modal--matching" : ""}`, onClick: (event) => event.stopPropagation(), children: [_jsxs("header", { className: "quick-order-workflow-modal-header", children: [_jsx("h2", { id: "quick-order-workflow-title", children: activeTab === "paste" ? "Type or paste a list" : "Upload a file" }), _jsx("button", { type: "button", className: "quick-order-workflow-close", onClick: closeWorkflow, "aria-label": "Close", children: _jsx(CloseIcon, {}) })] }), _jsxs("div", { className: "quick-order-panel", children: [_jsxs("div", { className: "quick-order-body", "aria-hidden": matching, children: [_jsx("div", { className: "quick-order-body-main", children: activeTab === "paste" ? (_jsxs(_Fragment, { children: [_jsx("textarea", { className: "paste-textarea", placeholder: "Paste your line items here, one per line, e.g.\ninsulated plasterboard 50mm\nC24 timber 4.8m", value: pastedText, onChange: (event) => setPastedText(event.target.value), "aria-label": "Paste schedule line items" }), pasteLineProblem && (_jsxs("div", { className: "error-box", role: "alert", children: [_jsx("strong", { children: "Error:" }), " ", pasteLineProblem] })), _jsxs("div", { className: "quick-order-hint", children: [_jsx("strong", { children: "Tip:" }), "\u00A0Paste one line per item. Include a count, e.g. \"x10\", to help us find the right stock and pricing."] }), _jsx("div", { className: "quick-order-actions", children: _jsxs("button", { type: "button", className: "cta-btn", disabled: !lineCount || Boolean(pasteLineProblem), onClick: () => {
+                                                                        track("list_submitted", { method: "paste", lines: lineCount });
+                                                                        void startMatching(() => onPasteSchedule(pastedText));
+                                                                    }, "aria-label": "Match pasted lines", children: [_jsx("span", { children: "Match line items" }), _jsx("span", { className: "arrow", children: _jsx(ForwardArrow, {}) })] }) })] })) : (_jsxs(_Fragment, { children: [uploadError && (_jsxs("div", { className: "error-box", role: "alert", children: [_jsx("strong", { children: "Error:" }), " ", uploadError] })), _jsxs("div", { className: `upload-zone${uploadFile ? " has-file" : ""}`, onClick: () => fileInputRef.current?.click(), onDragOver: (event) => event.preventDefault(), onDrop: onPageDrop, role: "button", tabIndex: 0, onKeyDown: (event) => (event.key === "Enter" || event.key === " ") && fileInputRef.current?.click(), "aria-label": "Upload zone: click or drag a list or image file here", children: [photoPreviewUrl ? (_jsx("img", { src: photoPreviewUrl, alt: uploadFile?.name ?? "Selected photo", className: "upload-zone-photo-preview" })) : (_jsx("div", { className: "upload-zone-icon", children: _jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), _jsx("polyline", { points: "14,2 14,8 20,8" }), _jsx("polyline", { points: "9,15 11,17 15,13" })] }) })), uploadFile ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "upload-zone-subtext", children: uploadFile.name }), _jsx("button", { type: "button", className: "link-btn link-btn--underline", onClick: (event) => {
+                                                                                    event.stopPropagation();
+                                                                                    setUploadFile(null);
+                                                                                    setUploadError("");
+                                                                                    if (fileInputRef.current)
+                                                                                        fileInputRef.current.value = "";
+                                                                                }, children: "Remove" })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "upload-zone-text", children: "Drop a photo, spreadsheet, Word document or PDF" }), _jsx("div", { className: "upload-zone-subtext", children: "or click to choose a file" })] })), _jsx("input", { ref: fileInputRef, type: "file", accept: UPLOAD_ACCEPT, className: "visually-hidden", onChange: (event) => applyUploadFile(event.target.files), tabIndex: -1, "aria-hidden": "true" })] }), _jsx("div", { className: "quick-order-actions", children: _jsxs("button", { type: "button", className: "cta-btn", disabled: !uploadFile, onClick: () => void matchUpload(), "aria-label": "Match uploaded items", children: [_jsx("span", { children: "Match items" }), _jsx("span", { className: "arrow", children: _jsx(ForwardArrow, {}) })] }) })] })) }), _jsx("aside", { className: "quick-order-sidebar", children: STEPS[activeTab].map((step, index) => (_jsxs("div", { className: "quick-order-step quick-order-step--rail", children: [_jsx("span", { className: "quick-order-step-dot", children: index + 1 }), _jsxs("div", { children: [_jsx("div", { className: "quick-order-step-title", children: step.title }), _jsx("div", { className: "quick-order-step-desc", children: step.desc })] })] }, step.title))) })] }), matching && (_jsx("div", { className: "quick-order-matching-overlay", children: _jsx(ProcessingContent, {}) }))] })] }) }))] })] }));
 }

package/dist/app/stages/ProcessingStage.js

@@ -28,8 +28,8 @@ function shuffle(arr) {
     return a;
 }
 export function ProcessingContent() {
-    const orderRef = useRef(shuffle(BANTER_MESSAGES.map((_, i) => i)));
     const posRef = useRef(0);
+    const orderRef = useRef(shuffle(BANTER_MESSAGES.map((_, i) => i)));
     const [message, setMessage] = useState(BANTER_MESSAGES[orderRef.current[0]]);
     const [visible, setVisible] = useState(true);
     useEffect(() => {

package/dist/app/stages/ScheduleResultsStage.js

@@ -1,19 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Fragment, useEffect, useRef, useState } from "react";
-import BackArrow from "../../components/BackArrow";
-import RefreshIcon from "../../components/RefreshIcon";
-import ForwardArrow from "../../components/ForwardArrow";
-import CloseIcon from "../../components/CloseIcon";
 import { apiUrl, getQuoteConfig } from "../../lib/config";
 import { useTrack } from "../../lib/analytics";
 import { renderDisplayUnit, formatPriceBasis } from "../components/UnitDisplay";
 import { fmtCurrency, fmtQty } from "../../lib/formatters";
-import { productImageSrc } from "../../lib/productImage";
 import { candidateToCartItem } from "../../lib/boq/toCartItem";
 import { apiHeaders, getBoqClientId, readJson } from "../../lib/api/boqClient";
 import { exportScheduleExcel } from "../../util/exportScheduleExcel";
 import { useEscapeKey } from "../../lib/useEscapeKey";
 import { getCartSubtotal, getPricingBreakdown } from "../../util/pricing";
+import BackArrow from "../../components/BackArrow";
+import RefreshIcon from "../../components/RefreshIcon";
+import ForwardArrow from "../../components/ForwardArrow";
+import CloseIcon from "../../components/CloseIcon";
+import ProductImage from "../../lib/ProductImage";
 const NO_SELECTION = "__none__";
 const PAGE_SIZE = 24;
 const SORT_OPTIONS = [
@@ -702,7 +702,7 @@ export default function ScheduleResultsStage({ scheduleResult, onStartOver, cart
                                                                             display: "flex",
                                                                             gap: 8,
                                                                             flexWrap: "wrap",
-                                                                        }, children: [debugEnabled && (_jsx("button", { type: "button", className: "bom-toolbar-btn", onClick: () => setDetailMode((mode) => (mode === "simple" ? "detailed" : "simple")), children: detailMode === "detailed" ? "Hide detailed info" : "Show detailed info" })), _jsx("div", { className: "results-review-searchbar", children: _jsx("input", { type: "text", className: "results-search-input", placeholder: "Search products in catalogue...", value: reviewSearch, onChange: (e) => setReviewSearch(e.target.value), "aria-label": "Search database candidates" }) }), _jsx("div", { className: "results-candidate-actions", children: _jsx("button", { type: "button", className: "bom-toolbar-btn", onClick: () => clearPickedProduct(activeReviewRow.item.line_id), children: "Clear selected product" }) })] })] }), _jsxs("div", { className: "results-review-page__hero", children: [_jsx("div", { className: "results-review-page__image-wrap", children: _jsx("img", { className: "fill-img results-review-page__image", src: productImageSrc(previewCandidate(activeReviewRow)?.description || activeReviewRow.item.description_original, previewCandidate(activeReviewRow)?.product_id, previewCandidate(activeReviewRow)?.pdp_photo_url), alt: "" }) }), _jsxs("div", { className: "results-review-page__summary", children: [_jsx("h2", { children: displayLineLabel(activeReviewRow.item, lineItems) }), _jsxs("p", { className: "results-review-page__meta", children: [fmtQty(activeReviewRow.qty), " ", renderDisplayUnit(activeReviewRow.item.unit, activeReviewRow.qty)] }), activeReviewRow.best ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "results-review-page__product", children: activeReviewRow.best.description }), activeReviewRow.best.price != null ? (_jsx("div", { className: "results-row-meta", children: fmtPrice(activeReviewRow.best.price, activeReviewRow.best.price_basis) })) : null] })) : previewCandidate(activeReviewRow) ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "results-review-page__product", children: previewCandidate(activeReviewRow)?.description }), previewCandidate(activeReviewRow)?.price != null ? (_jsx("div", { className: "results-row-meta", children: fmtPrice(previewCandidate(activeReviewRow)?.price ?? null, previewCandidate(activeReviewRow)?.price_basis ?? null) })) : null, _jsx("div", { className: "results-row-meta", children: "Best reviewed alternative - not yet selected" })] })) : (_jsx("div", { className: "results-empty-hint", children: "No product currently selected for this line item." })), hasVisibleLinkedGroup(activeReviewRow.item) ? (_jsxs("div", { style: {
+                                                                        }, children: [debugEnabled && (_jsx("button", { type: "button", className: "bom-toolbar-btn", onClick: () => setDetailMode((mode) => (mode === "simple" ? "detailed" : "simple")), children: detailMode === "detailed" ? "Hide detailed info" : "Show detailed info" })), _jsx("div", { className: "results-review-searchbar", children: _jsx("input", { type: "text", className: "results-search-input", placeholder: "Search products in catalogue...", value: reviewSearch, onChange: (e) => setReviewSearch(e.target.value), "aria-label": "Search database candidates" }) }), _jsx("div", { className: "results-candidate-actions", children: _jsx("button", { type: "button", className: "bom-toolbar-btn", onClick: () => clearPickedProduct(activeReviewRow.item.line_id), children: "Clear selected product" }) })] })] }), _jsxs("div", { className: "results-review-page__hero", children: [_jsx("div", { className: "results-review-page__image-wrap", children: _jsx(ProductImage, { className: "fill-img results-review-page__image", description: previewCandidate(activeReviewRow)?.description || activeReviewRow.item.description_original, photoUrl: previewCandidate(activeReviewRow)?.pdp_photo_url }) }), _jsxs("div", { className: "results-review-page__summary", children: [_jsx("h2", { children: displayLineLabel(activeReviewRow.item, lineItems) }), _jsxs("p", { className: "results-review-page__meta", children: [fmtQty(activeReviewRow.qty), " ", renderDisplayUnit(activeReviewRow.item.unit, activeReviewRow.qty)] }), activeReviewRow.best ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "results-review-page__product", children: activeReviewRow.best.description }), activeReviewRow.best.price != null ? (_jsx("div", { className: "results-row-meta", children: fmtPrice(activeReviewRow.best.price, activeReviewRow.best.price_basis) })) : null] })) : previewCandidate(activeReviewRow) ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "results-review-page__product", children: previewCandidate(activeReviewRow)?.description }), previewCandidate(activeReviewRow)?.price != null ? (_jsx("div", { className: "results-row-meta", children: fmtPrice(previewCandidate(activeReviewRow)?.price ?? null, previewCandidate(activeReviewRow)?.price_basis ?? null) })) : null, _jsx("div", { className: "results-row-meta", children: "Best reviewed alternative - not yet selected" })] })) : (_jsx("div", { className: "results-empty-hint", children: "No product currently selected for this line item." })), hasVisibleLinkedGroup(activeReviewRow.item) ? (_jsxs("div", { style: {
                                                                                     display: "flex",
                                                                                     alignItems: "center",
                                                                                     gap: 8,
@@ -735,10 +735,10 @@ export default function ScheduleResultsStage({ scheduleResult, onStartOver, cart
                                                                                             ? `Select the option you want to add to your ${customerCollection}.`
                                                                                             : "Search the catalogue to choose a product." })] }) }), !reviewQuery && reviewDisplayCandidates.length > 0 ? (_jsx("div", { className: "customer-review-option-grid", children: reviewOptionCandidates.map((candidate) => {
                                                                             const selected = candidate.product_id === activeReviewRow.best?.product_id;
-                                                                            return (_jsxs("button", { type: "button", className: `customer-review-option${selected ? " is-selected" : ""}`, onClick: () => handlePickProduct(activeReviewRow.item.line_id, candidate), "aria-pressed": selected, children: [_jsx("img", { className: "customer-review-option__image", src: productImageSrc(candidate.description, candidate.product_id, candidate.pdp_photo_url), alt: "", width: 64, height: 64 }), _jsx("span", { className: "customer-review-option__copy", children: _jsx("strong", { children: candidate.description }) }), _jsx("span", { className: "customer-review-option__price", children: candidate.price != null ? `£${fmtPrice(candidate.price, candidate.price_basis)}` : "-" }), _jsx("span", { className: "customer-review-option__state", children: selected ? "Selected" : "Choose" })] }, candidate.product_id));
+                                                                            return (_jsxs("button", { type: "button", className: `customer-review-option${selected ? " is-selected" : ""}`, onClick: () => handlePickProduct(activeReviewRow.item.line_id, candidate), "aria-pressed": selected, children: [_jsx(ProductImage, { className: "customer-review-option__image", description: candidate.description, photoUrl: candidate.pdp_photo_url, width: 64, height: 64 }), _jsx("span", { className: "customer-review-option__copy", children: _jsx("strong", { children: candidate.description }) }), _jsx("span", { className: "customer-review-option__price", children: candidate.price != null ? `£${fmtPrice(candidate.price, candidate.price_basis)}` : "-" }), _jsx("span", { className: "customer-review-option__state", children: selected ? "Selected" : "Choose" })] }, candidate.product_id));
                                                                         }) })) : null, reviewDisplayCandidates.length > 0 && (_jsx("div", { className: "customer-review-divider", children: _jsx("span", { children: "or" }) })), _jsxs("label", { className: "customer-review-search", children: [_jsx("span", { children: "Search our full catalogue" }), _jsx("input", { type: "text", className: "results-search-input", placeholder: "Search products...", value: reviewSearch, onChange: (e) => setReviewSearch(e.target.value), "aria-label": "Search catalogue" })] }), reviewQuery && catalogueSearchLoading ? _jsx("div", { className: "results-empty-card", children: "Searching catalogue\u2026" }) : null, reviewQuery && !catalogueSearchLoading && catalogueSearchError ? _jsx("div", { className: "results-empty-card", children: catalogueSearchError }) : null, reviewQuery && !catalogueSearchLoading && !catalogueSearchError && reviewDisplayCandidates.length === 0 ? (_jsx("div", { className: "results-empty-card", children: "No products match this search." })) : null, reviewQuery && !catalogueSearchLoading && !catalogueSearchError && reviewDisplayCandidates.length > 0 ? (_jsx("div", { className: "customer-review-option-grid", children: reviewOptionCandidates.map((candidate) => {
                                                                             const selected = candidate.product_id === activeReviewRow.best?.product_id;
-                                                                            return (_jsxs("button", { type: "button", className: `customer-review-option${selected ? " is-selected" : ""}`, onClick: () => handlePickProduct(activeReviewRow.item.line_id, candidate), "aria-pressed": selected, children: [_jsx("img", { className: "customer-review-option__image", src: productImageSrc(candidate.description, candidate.product_id, candidate.pdp_photo_url), alt: "", width: 64, height: 64 }), _jsx("span", { className: "customer-review-option__copy", children: _jsx("strong", { children: candidate.description }) }), _jsx("span", { className: "customer-review-option__price", children: candidate.price != null ? `£${fmtPrice(candidate.price, candidate.price_basis)}` : "-" }), _jsx("span", { className: "customer-review-option__state", children: selected ? "Selected" : "Choose" })] }, candidate.product_id));
+                                                                            return (_jsxs("button", { type: "button", className: `customer-review-option${selected ? " is-selected" : ""}`, onClick: () => handlePickProduct(activeReviewRow.item.line_id, candidate), "aria-pressed": selected, children: [_jsx(ProductImage, { className: "customer-review-option__image", description: candidate.description, photoUrl: candidate.pdp_photo_url, width: 64, height: 64 }), _jsx("span", { className: "customer-review-option__copy", children: _jsx("strong", { children: candidate.description }) }), _jsx("span", { className: "customer-review-option__price", children: candidate.price != null ? `£${fmtPrice(candidate.price, candidate.price_basis)}` : "-" }), _jsx("span", { className: "customer-review-option__state", children: selected ? "Selected" : "Choose" })] }, candidate.product_id));
                                                                         }) })) : null] }), activeReviewRow.best ? (activeReviewHasPendingUpdate ? (_jsxs("div", { style: { display: "grid", gap: 8 }, children: [_jsx("button", { type: "button", className: "cta-btn customer-review-add", onClick: () => {
                                                                             addReviewedProduct();
                                                                         }, children: _jsx("span", { children: "Update product" }) }), _jsx("button", { type: "button", className: "cta-btn cta-btn-secondary customer-review-add", onClick: () => onRemoveFromCart(activeReviewRow.item.line_id), children: _jsx("span", { children: `Remove from ${customerCollection}` }) })] })) : (_jsx("button", { type: "button", className: `cta-btn customer-review-add${activeReviewCartMatches ? " cta-btn-secondary" : ""}`, onClick: () => {
@@ -759,7 +759,7 @@ export default function ScheduleResultsStage({ scheduleResult, onStartOver, cart
                                                                                                 fontSize: 12,
                                                                                                 fontWeight: 700,
                                                                                                 lineHeight: 1,
-                                                                                            }, children: "Partially matched" })) : null] })) : null, _jsx("img", { className: "fill-img results-tile-card__image", src: productImageSrc(preview?.description || item.description_original, preview?.product_id, preview?.pdp_photo_url), alt: "" })] }), _jsxs("div", { className: "results-tile-card__body", children: [preview ? (_jsx(_Fragment, { children: _jsx("div", { className: "results-tile-card__heading", children: _jsx("div", { className: "results-tile-card__title", children: preview.description }) }) })) : (_jsx("div", { className: "results-empty-hint", children: "No product currently selected for this line item." })), _jsx("div", { className: "results-tile-card__match", children: preview ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "results-tile-card__match-label", children: isPartial ? "↳ partially matched from" : "↳ matched from" }), _jsx("div", { className: "results-tile-card__match-name", children: displayLineLabel(item, lineItems) }), hasVisibleLinkedGroup(item) ? _jsx("div", { className: "results-row-meta", children: linkedGroupSummary(item) }) : null] })) : (_jsx("span", { className: "results-empty-hint", children: "No matched product selected." })) })] }), _jsx("span", { className: "results-tile-card__hover-prompt", "aria-hidden": "true", children: "Click to view options" })] }), _jsxs("div", { className: "results-tile-card__actions", children: [internal && (_jsx("button", { type: "button", className: "bom-toolbar-btn", onClick: () => openReview(item.line_id), children: "Review" })), _jsx("button", { type: "button", className: `bom-toolbar-btn${cart[item.line_id] ? " bom-toolbar-btn--added" : " bom-toolbar-btn--accent"}`, onClick: () => {
+                                                                                            }, children: "Partially matched" })) : null] })) : null, _jsx(ProductImage, { className: "fill-img results-tile-card__image", description: preview?.description || item.description_original, photoUrl: preview?.pdp_photo_url })] }), _jsxs("div", { className: "results-tile-card__body", children: [preview ? (_jsx(_Fragment, { children: _jsx("div", { className: "results-tile-card__heading", children: _jsx("div", { className: "results-tile-card__title", children: preview.description }) }) })) : (_jsx("div", { className: "results-empty-hint", children: "No product currently selected for this line item." })), _jsx("div", { className: "results-tile-card__match", children: preview ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "results-tile-card__match-label", children: isPartial ? "↳ partially matched from" : "↳ matched from" }), _jsx("div", { className: "results-tile-card__match-name", children: displayLineLabel(item, lineItems) }), hasVisibleLinkedGroup(item) ? _jsx("div", { className: "results-row-meta", children: linkedGroupSummary(item) }) : null] })) : (_jsx("span", { className: "results-empty-hint", children: "No matched product selected." })) })] }), _jsx("span", { className: "results-tile-card__hover-prompt", "aria-hidden": "true", children: "Click to view options" })] }), _jsxs("div", { className: "results-tile-card__actions", children: [internal && (_jsx("button", { type: "button", className: "bom-toolbar-btn", onClick: () => openReview(item.line_id), children: "Review" })), _jsx("button", { type: "button", className: `bom-toolbar-btn${cart[item.line_id] ? " bom-toolbar-btn--added" : " bom-toolbar-btn--accent"}`, onClick: () => {
                                                                                 if (cart[item.line_id])
                                                                                     onRemoveFromCart(item.line_id);
                                                                                 else {

package/dist/components/ChevronIcon.d.ts

@@ -0,0 +1 @@
+export default function ChevronIcon(): import("react").JSX.Element;

package/dist/components/ChevronIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ChevronIcon() {
+    return (_jsx("svg", { width: "8", height: "5", viewBox: "0 0 8 5", fill: "none", children: _jsx("path", { d: "M1 4L4 1L7 4", stroke: "currentColor", strokeWidth: "1.4", strokeLinecap: "round", strokeLinejoin: "round" }) }));
+}

package/dist/components/InsulationPlaceholder.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export default function InsulationPlaceholder(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/components/InsulationPlaceholder.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Stands in for an insulation product with no photo. slice crops it the way object-fit: cover
+// crops the photos beside it.
+export default function InsulationPlaceholder(props) {
+    return (_jsxs("svg", { viewBox: "0 0 640 420", preserveAspectRatio: "xMidYMid slice", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", ...props, children: [_jsx("rect", { width: "640", height: "420", fill: "#fbf1cf" }), _jsx("rect", { x: "88", y: "78", width: "432", height: "264", rx: "16", fill: "#f0c43f" }), _jsx("rect", { x: "120", y: "110", width: "368", height: "200", rx: "10", fill: "#ffd95e" }), _jsxs("g", { stroke: "#e2b12e", strokeWidth: "8", opacity: "0.75", children: [_jsx("line", { x1: "140", y1: "140", x2: "468", y2: "140" }), _jsx("line", { x1: "140", y1: "190", x2: "468", y2: "190" }), _jsx("line", { x1: "140", y1: "240", x2: "468", y2: "240" })] })] }));
+}

package/dist/components/ProductPlaceholder.d.ts

@@ -0,0 +1,2 @@
+import type { SVGProps } from "react";
+export default function ProductPlaceholder(props: SVGProps<SVGSVGElement>): import("react").JSX.Element;

package/dist/components/ProductPlaceholder.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Stands in for any product with no photo. slice crops it the way object-fit: cover crops the
+// photos beside it.
+export default function ProductPlaceholder(props) {
+    return (_jsxs("svg", { viewBox: "0 0 640 420", preserveAspectRatio: "xMidYMid slice", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", ...props, children: [_jsx("rect", { width: "640", height: "420", fill: "#edf1f5" }), _jsx("rect", { x: "132", y: "108", width: "376", height: "204", rx: "18", fill: "#d5dde6" }), _jsx("rect", { x: "168", y: "144", width: "304", height: "24", rx: "12", fill: "#9aa6b2" }), _jsx("rect", { x: "168", y: "188", width: "250", height: "24", rx: "12", fill: "#aab5c0" }), _jsx("rect", { x: "168", y: "232", width: "220", height: "24", rx: "12", fill: "#aab5c0" })] }));
+}

package/dist/components/TrashIcon.d.ts

@@ -0,0 +1 @@
+export default function TrashIcon(): import("react").JSX.Element;

package/dist/components/TrashIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function TrashIcon() {
+    return (_jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("polyline", { points: "3 6 5 6 21 6" }), _jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }), _jsx("line", { x1: "10", y1: "11", x2: "10", y2: "17" }), _jsx("line", { x1: "14", y1: "11", x2: "14", y2: "17" })] }));
+}

package/dist/components/estimators/EstimatorResults.js

@@ -9,7 +9,7 @@ import { useOptionalCart } from "../../lib/cart/CartContext";
 import { candidateToCartItem } from "../../lib/boq/toCartItem";
 import { estimateRequestUnit, fetchCatalogueStatus, resolveRequirements, searchCatalogue } from "../../lib/estimators/resolveProducts";
 import { fmtCurrency, fmtQty } from "../../lib/formatters";
-import { productImageSrc } from "../../lib/productImage";
+import ProductImage from "../../lib/ProductImage";
 import { getPricingBreakdown } from "../../util/pricing";
 const SORT_OPTIONS = [
     { dir: "asc", label: "Description (A-Z)" },
@@ -278,7 +278,7 @@ export default function EstimatorResults({ toolId, requirements, ready, onBack,
                                                         setSortConfig(active ? null : option.dir);
                                                         sortMenuRef.current?.removeAttribute("open");
                                                     }, children: [_jsx("span", { className: "sort-menu-item__check", children: active ? "✓" : "" }), option.label] }, option.dir));
-                                            }) })] })] }) }))] })), reviewRow && (_jsxs("div", { className: "results-review-page", children: [_jsxs("div", { className: "results-review-page__top", children: [_jsxs("button", { type: "button", className: "bom-toolbar-btn bom-toolbar-btn--accent", onClick: closeReview, children: [_jsx(BackArrow, {}), "Back to results"] }), _jsxs("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [_jsx("div", { className: "results-review-searchbar", children: _jsx("input", { type: "text", className: "results-search-input", placeholder: "Search products in catalogue...", value: reviewSearch, onChange: (event) => setReviewSearch(event.target.value), "aria-label": `Search a product for ${reviewRow.requirement.label}` }) }), reviewRow.chosen && (_jsx("div", { className: "results-candidate-actions", children: _jsx("button", { type: "button", className: "bom-toolbar-btn", onClick: () => clearChosen(reviewRow.requirement.key), children: "Clear selected product" }) }))] })] }), _jsxs("div", { className: "results-review-page__hero", children: [_jsx("div", { className: "results-review-page__image-wrap", children: _jsx("img", { className: "fill-img results-review-page__image", src: productImageSrc(reviewRow.chosen?.description || reviewRow.requirement.label, reviewRow.chosen?.product_id, reviewRow.chosen?.pdp_photo_url), alt: "" }) }), _jsxs("div", { className: "results-review-page__summary", children: [_jsx("h2", { children: reviewRow.requirement.label }), _jsxs("p", { className: "results-review-page__meta", children: [fmtQty(reviewRow.requirement.qty), " ", renderDisplayUnit(reviewRow.requirement.unit, reviewRow.requirement.qty)] }), reviewRow.chosen ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "results-review-page__product", children: reviewRow.chosen.description }), _jsxs("div", { className: "results-row-meta", children: [reviewRow.chosen.product_id, reviewRow.chosen.price != null ? ` · ${fmtPrice(reviewRow.chosen.price, reviewRow.chosen.price_basis)}` : ""] })] })) : (_jsx("div", { className: "results-empty-hint", children: "No product currently selected for this line." })), _jsx("div", { className: "results-review-page__actions", children: _jsx("button", { type: "button", className: `bom-toolbar-btn${cart?.cart[lineIdFor(reviewRow.requirement.key)] ? " bom-toolbar-btn--added" : " bom-toolbar-btn--accent"}`, onClick: () => toggleInCart(reviewRow), disabled: !reviewRow.chosen || !cart, children: cart?.cart[lineIdFor(reviewRow.requirement.key)] ? "✓ Added" : "+ Add to basket" }) })] })] }), reviewCandidates.length === 0 ? (_jsx("p", { className: "results-empty-hint", children: "No matching products." })) : (_jsxs("table", { className: "score-breakdown-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Product" }), _jsx("th", { children: "Dims (mm)" }), _jsx("th", { children: "Price" }), _jsx("th", { "aria-label": "Actions" })] }) }), _jsx("tbody", { children: reviewCandidates.map((candidate) => {
+                                            }) })] })] }) }))] })), reviewRow && (_jsxs("div", { className: "results-review-page", children: [_jsxs("div", { className: "results-review-page__top", children: [_jsxs("button", { type: "button", className: "bom-toolbar-btn bom-toolbar-btn--accent", onClick: closeReview, children: [_jsx(BackArrow, {}), "Back to results"] }), _jsxs("div", { style: { display: "flex", gap: 8, flexWrap: "wrap" }, children: [_jsx("div", { className: "results-review-searchbar", children: _jsx("input", { type: "text", className: "results-search-input", placeholder: "Search products in catalogue...", value: reviewSearch, onChange: (event) => setReviewSearch(event.target.value), "aria-label": `Search a product for ${reviewRow.requirement.label}` }) }), reviewRow.chosen && (_jsx("div", { className: "results-candidate-actions", children: _jsx("button", { type: "button", className: "bom-toolbar-btn", onClick: () => clearChosen(reviewRow.requirement.key), children: "Clear selected product" }) }))] })] }), _jsxs("div", { className: "results-review-page__hero", children: [_jsx("div", { className: "results-review-page__image-wrap", children: _jsx(ProductImage, { className: "fill-img results-review-page__image", description: reviewRow.chosen?.description || reviewRow.requirement.label, photoUrl: reviewRow.chosen?.pdp_photo_url }) }), _jsxs("div", { className: "results-review-page__summary", children: [_jsx("h2", { children: reviewRow.requirement.label }), _jsxs("p", { className: "results-review-page__meta", children: [fmtQty(reviewRow.requirement.qty), " ", renderDisplayUnit(reviewRow.requirement.unit, reviewRow.requirement.qty)] }), reviewRow.chosen ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "results-review-page__product", children: reviewRow.chosen.description }), _jsxs("div", { className: "results-row-meta", children: [reviewRow.chosen.product_id, reviewRow.chosen.price != null ? ` · ${fmtPrice(reviewRow.chosen.price, reviewRow.chosen.price_basis)}` : ""] })] })) : (_jsx("div", { className: "results-empty-hint", children: "No product currently selected for this line." })), _jsx("div", { className: "results-review-page__actions", children: _jsx("button", { type: "button", className: `bom-toolbar-btn${cart?.cart[lineIdFor(reviewRow.requirement.key)] ? " bom-toolbar-btn--added" : " bom-toolbar-btn--accent"}`, onClick: () => toggleInCart(reviewRow), disabled: !reviewRow.chosen || !cart, children: cart?.cart[lineIdFor(reviewRow.requirement.key)] ? "✓ Added" : "+ Add to basket" }) })] })] }), reviewCandidates.length === 0 ? (_jsx("p", { className: "results-empty-hint", children: "No matching products." })) : (_jsxs("table", { className: "score-breakdown-table", children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Product" }), _jsx("th", { children: "Dims (mm)" }), _jsx("th", { children: "Price" }), _jsx("th", { "aria-label": "Actions" })] }) }), _jsx("tbody", { children: reviewCandidates.map((candidate) => {
                                     const isCurrent = candidate.product_id === reviewRow.chosen?.product_id;
                                     return (_jsxs("tr", { className: isCurrent ? "score-breakdown-row--best" : "", children: [_jsxs("td", { children: [_jsx("div", { children: candidate.description }), _jsx("div", { className: "results-row-meta", children: candidate.product_id })] }), _jsx("td", { children: _jsx("span", { className: "unit-badge", children: fmtMeasurements(candidate.measurements_mm) }) }), _jsx("td", { children: candidate.price != null ? fmtPrice(candidate.price, candidate.price_basis) : "-" }), _jsx("td", { children: _jsxs("label", { className: "switch-toggle", title: isCurrent ? "Currently selected" : "Use this candidate", children: [_jsx("input", { type: "checkbox", checked: isCurrent, onChange: () => {
                                                                 if (isCurrent)
@@ -290,7 +290,7 @@ export default function EstimatorResults({ toolId, requirements, ready, onBack,
                     const { requirement, chosen } = row;
                     const breakdown = chosen ? getPricingBreakdown(toCartLine(row), PRICING_OPTIONS) : null;
                     const inCart = cart ? Boolean(cart.cart[lineIdFor(requirement.key)]) : false;
-                    return (_jsxs("article", { className: "results-tile-card", children: [_jsxs("button", { type: "button", className: "results-tile-card__surface", onClick: () => openReview(row), "aria-label": `Review match for ${requirement.label}`, children: [_jsx("div", { className: "results-tile-card__media", children: _jsx("img", { className: "fill-img results-tile-card__image", src: productImageSrc(chosen?.description || requirement.label, chosen?.product_id, chosen?.pdp_photo_url), alt: "" }) }), _jsxs("div", { className: "results-tile-card__body", children: [chosen ? (_jsxs("div", { className: "results-tile-card__heading", children: [_jsx("div", { className: "results-tile-card__title", children: chosen.description }), _jsxs("div", { className: "results-tile-card__match-meta", children: [_jsx("span", { children: chosen.product_id }), chosen.price != null ? _jsx("span", { children: fmtPrice(chosen.price, chosen.price_basis) }) : null] })] })) : (_jsx("div", { className: "results-empty-hint", children: "No product matched for this line." })), _jsxs("div", { className: "results-tile-card__match", children: [_jsx("div", { className: "results-tile-card__match-label", children: "\u21B3 calculated as" }), _jsx("div", { className: "results-tile-card__match-name", children: requirement.label }), _jsxs("div", { className: "results-tile-card__meta", children: [fmtQty(requirement.qty), " ", renderDisplayUnit(requirement.unit, requirement.qty)] }), breakdown?.requiredSellUnits != null ? (_jsxs("div", { className: "results-tile-card__meta estimator-products__order", children: ["Order ", breakdown.requiredSellUnits, " ", breakdown.sellUnit, breakdown.lineTotal != null ? ` · ${fmtCurrency(breakdown.lineTotal)}` : ""] })) : chosen ? (_jsx("div", { className: "results-row-meta", children: "Quantity needs review" })) : null] })] })] }), _jsxs("div", { className: "results-tile-card__actions", children: [_jsx("button", { type: "button", className: "bom-toolbar-btn", onClick: () => openReview(row), children: "Review" }), _jsx("button", { type: "button", className: `bom-toolbar-btn${inCart ? " bom-toolbar-btn--added" : " bom-toolbar-btn--accent"}`, onClick: () => toggleInCart(row), disabled: !chosen || !cart, children: inCart ? "✓ Added" : "+ Add" })] })] }, requirement.key));
+                    return (_jsxs("article", { className: "results-tile-card", children: [_jsxs("button", { type: "button", className: "results-tile-card__surface", onClick: () => openReview(row), "aria-label": `Review match for ${requirement.label}`, children: [_jsx("div", { className: "results-tile-card__media", children: _jsx(ProductImage, { className: "fill-img results-tile-card__image", description: chosen?.description || requirement.label, photoUrl: chosen?.pdp_photo_url }) }), _jsxs("div", { className: "results-tile-card__body", children: [chosen ? (_jsxs("div", { className: "results-tile-card__heading", children: [_jsx("div", { className: "results-tile-card__title", children: chosen.description }), _jsxs("div", { className: "results-tile-card__match-meta", children: [_jsx("span", { children: chosen.product_id }), chosen.price != null ? _jsx("span", { children: fmtPrice(chosen.price, chosen.price_basis) }) : null] })] })) : (_jsx("div", { className: "results-empty-hint", children: "No product matched for this line." })), _jsxs("div", { className: "results-tile-card__match", children: [_jsx("div", { className: "results-tile-card__match-label", children: "\u21B3 calculated as" }), _jsx("div", { className: "results-tile-card__match-name", children: requirement.label }), _jsxs("div", { className: "results-tile-card__meta", children: [fmtQty(requirement.qty), " ", renderDisplayUnit(requirement.unit, requirement.qty)] }), breakdown?.requiredSellUnits != null ? (_jsxs("div", { className: "results-tile-card__meta estimator-products__order", children: ["Order ", breakdown.requiredSellUnits, " ", breakdown.sellUnit, breakdown.lineTotal != null ? ` · ${fmtCurrency(breakdown.lineTotal)}` : ""] })) : chosen ? (_jsx("div", { className: "results-row-meta", children: "Quantity needs review" })) : null] })] })] }), _jsxs("div", { className: "results-tile-card__actions", children: [_jsx("button", { type: "button", className: "bom-toolbar-btn", onClick: () => openReview(row), children: "Review" }), _jsx("button", { type: "button", className: `bom-toolbar-btn${inCart ? " bom-toolbar-btn--added" : " bom-toolbar-btn--accent"}`, onClick: () => toggleInCart(row), disabled: !chosen || !cart, children: inCart ? "✓ Added" : "+ Add" })] })] }, requirement.key));
                 }) })), !reviewRow && !loading && !error && viewMode === "list" && matchedVisibleRows.length > 0 && (_jsx("div", { className: "bom-table-wrap", children: _jsxs("table", { className: "bom-table results-table", "aria-label": "Matched materials", children: [_jsxs("colgroup", { children: [_jsx("col", { style: { width: "56px" } }), _jsx("col", { className: "col-item" }), _jsx("col", { style: { width: "90px" } }), _jsx("col", { style: { width: "80px" } }), _jsx("col", { style: { width: "220px" } }), _jsx("col", { style: { width: "110px" } })] }), _jsx("thead", { children: _jsxs("tr", { className: "bom-col-header", children: [_jsx("th", { "aria-label": "Expand" }), _jsx("th", { style: { textAlign: "left" }, children: "Description" }), _jsx("th", { style: { textAlign: "center" }, children: "Qty" }), _jsx("th", { style: { textAlign: "center" }, children: "Unit" }), _jsx("th", { style: { textAlign: "center" }, children: "Product Matched" }), _jsx("th", { style: { textAlign: "center" }, children: "Basket" })] }) }), _jsx("tbody", { children: matchedVisibleRows.map((row) => {
                                 const { requirement, chosen } = row;
                                 const breakdown = chosen ? getPricingBreakdown(toCartLine(row), PRICING_OPTIONS) : null;