@metron-labs/quote-react 0.1.16 → 0.1.18

package/LICENSE

@@ -1,31 +1,31 @@
-Copyright (c) 2026 Metron Labs Ltd. All rights reserved.
-
-This software and its accompanying files, including images and stylesheets (the
-"Software"), are proprietary to Metron Labs Ltd ("Metron Labs").
-
-Metron Labs grants you a non-exclusive, non-transferable licence to install the Software and
-include it in websites and applications you operate, solely to provide Metron Labs's services
-to your own customers, for as long as you hold a current agreement with Metron Labs that
-covers the Software. That agreement governs your use of the Software and takes
-precedence over this notice.
-
-Except as that agreement expressly permits, you may not:
-
-- copy, modify, merge or create derivative works of the Software;
-- distribute, publish, sublicense, sell or otherwise make the Software available to
-  any third party, other than as part of your own website or application;
-- use the Software with any service other than Metron Labs'; or
-- reverse engineer the Software, except to the extent the law allows despite this
-  restriction.
-
-Your licence ends automatically when your agreement with Metron Labs ends. You must then stop
-using the Software and remove it from your websites, applications and systems.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
-INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
-PURPOSE AND NON-INFRINGEMENT, EXCEPT AS SET OUT IN YOUR AGREEMENT WITH Metron Labs. TO THE
-EXTENT PERMITTED BY LAW, METRON LABS IS NOT LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY
-ARISING FROM OR IN CONNECTION WITH THE SOFTWARE OR ITS USE, EXCEPT AS SET OUT IN THAT
-AGREEMENT.
-
-For licensing questions, contact your Metron Labs account manager.
+Copyright (c) 2026 Metron Labs Ltd. All rights reserved.
+
+This software and its accompanying files, including images and stylesheets (the
+"Software"), are proprietary to Metron Labs Ltd ("Metron Labs").
+
+Metron Labs grants you a non-exclusive, non-transferable licence to install the Software and
+include it in websites and applications you operate, solely to provide Metron Labs's services
+to your own customers, for as long as you hold a current agreement with Metron Labs that
+covers the Software. That agreement governs your use of the Software and takes
+precedence over this notice.
+
+Except as that agreement expressly permits, you may not:
+
+- copy, modify, merge or create derivative works of the Software;
+- distribute, publish, sublicense, sell or otherwise make the Software available to
+  any third party, other than as part of your own website or application;
+- use the Software with any service other than Metron Labs'; or
+- reverse engineer the Software, except to the extent the law allows despite this
+  restriction.
+
+Your licence ends automatically when your agreement with Metron Labs ends. You must then stop
+using the Software and remove it from your websites, applications and systems.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
+INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
+PURPOSE AND NON-INFRINGEMENT, EXCEPT AS SET OUT IN YOUR AGREEMENT WITH Metron Labs. TO THE
+EXTENT PERMITTED BY LAW, METRON LABS IS NOT LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY
+ARISING FROM OR IN CONNECTION WITH THE SOFTWARE OR ITS USE, EXCEPT AS SET OUT IN THAT
+AGREEMENT.
+
+For licensing questions, contact your Metron Labs account manager.

package/README.md

@@ -1,222 +1,222 @@
-# @metron-labs/quote-react
-
-Metron's quoting tools as React components you place in your own website:
-
-- **Quick Quote** — your customers upload a schedule, paste a materials list or photograph
-  a handwritten one. Metron matches each line to products in your catalogue, then shows
-  prices, quantities and a basket they can download as a spreadsheet.
-- **Estimating Tools** — 12 calculators (fencing, decking, brick and block, paint, timber,
-  paving and more) that turn a customer's measurements into a priced list of your products.
-
-Both widgets call Metron's API straight from the browser, so you don't need your own server.
-
-## Before you start
-
-Your Metron account manager will give you:
-
-| What             | Example     | Used for                                     |
-| ---------------- | ----------- | -------------------------------------------- |
-| Client code      | `ABCD-1234` | Identifies your catalogue. Not secret.       |
-| API key          | `boq_...`   | Authenticates the widgets with Metron's API. |
-| npm access token | `npm_...`   | Installing this package, which is private.   |
-
-Tell Metron every web address the widgets will run on: production, staging and local
-development (for example `http://localhost:3000`). The API key only works from addresses
-registered to your account (see [Security](#security)).
-
-## Requirements
-
-- React 18.3 or later, or React 19.
-- A bundler that can import images and CSS, such as Vite, Next.js, webpack 5 or Parcel.
-  The widget images ship inside the package, and your build serves them like your own.
-
-Not using React? Ask Metron for the script-tag version, which works on any website.
-
-## Install
-
-The package is private, so npm needs your access token. Add a `.npmrc` file to your
-project root:
-
-```ini
-@metron-labs:registry=https://registry.npmjs.org/
-//registry.npmjs.org/:_authToken=${NPM_TOKEN}
-```
-
-Set `NPM_TOKEN` in your shell and CI, then install:
-
-```sh
-npm install @metron-labs/quote-react
-```
-
-Don't commit the token itself; `${NPM_TOKEN}` reads it from the environment.
-
-## Quick start
-
-```tsx
-import { QuoteProvider, QuickQuote } from "@metron-labs/quote-react";
-import "@metron-labs/quote-react/styles.css";
-
-const quoteConfig = {
-  apiBaseUrl: "https://api.metronlabs.ai",
-  client: "ABCD-1234",
-  apiKey: "boq_...",
-  theme: { "--accent": "#0a7d3b" },
-};
-
-export default function QuotePage() {
-  return (
-    <QuoteProvider config={quoteConfig}>
-      <QuickQuote />
-    </QuoteProvider>
-  );
-}
-```
-
-For the calculators, render `<EstimatingTools />` in the same way.
-
-Import `styles.css` once, anywhere in your app. Without it the widgets render unstyled.
-
-### Both widgets on one site
-
-Use one `QuoteProvider` per page, and put every widget on that page inside it:
-
-```tsx
-<QuoteProvider config={quoteConfig}>{tab === "quote" ? <QuickQuote hideHeader /> : <EstimatingTools hideHeader />}</QuoteProvider>
-```
-
-The widgets don't include site navigation. To offer both, link between them from your own
-menu or tabs.
-
-### Next.js (App Router)
-
-The widgets are client components and already marked `"use client"`, so you can render them
-from a server component page. Import `styles.css` in your root `layout.tsx` or in the page
-itself.
-
-### Keeping settings per environment
-
-To use different API keys for staging and production, read the config from environment
-variables at build time. For example, with Vite:
-
-```ts
-const quoteConfig = {
-  apiBaseUrl: import.meta.env.VITE_METRON_API_URL,
-  client: import.meta.env.VITE_METRON_CLIENT,
-  apiKey: import.meta.env.VITE_METRON_API_KEY,
-};
-```
-
-## Configuration
-
-`QuoteProvider` takes a single `config` prop:
-
-| Option       | Type                     | Required | Description                                             |
-| ------------ | ------------------------ | -------- | ------------------------------------------------------- |
-| `apiBaseUrl` | `string`                 | Yes      | Metron's API address, e.g. `https://api.metronlabs.ai`. |
-| `client`     | `string`                 | Yes      | Your client code.                                       |
-| `apiKey`     | `string`                 | Yes      | Your API key.                                           |
-| `theme`      | `Record<string, string>` | No       | Colour and style overrides; see [Theming](#theming).    |
-
-## Widget props
-
-`QuickQuote` and `EstimatingTools` take the same optional props:
-
-| Prop         | Default | Description                                                                                                             |
-| ------------ | ------- | ----------------------------------------------------------------------------------------------------------------------- |
-| `hideHeader` | `false` | Hides the widget's own heading, for pages that already show one.                                                        |
-| `fullPage`   | `false` | Gives the widget its own background and full viewport height. Leave it off to place the widget inside your page layout. |
-
-## Theming
-
-Pass CSS custom properties in `config.theme` to match your brand. Anything you leave out
-keeps the default shown here.
-
-```ts
-theme: {
-  "--accent": "#0a7d3b",
-  "--accent-light": "#d3eddd",
-  "--accent-dark": "#075e2c",
-  "--accent-hover": "#eef8f2",
-  "--font-display": '"Your Font", system-ui, sans-serif',
-  "--radius": "8px",
-}
-```
-
-| Variable                    | Default                              | Used for                           |
-| --------------------------- | ------------------------------------ | ---------------------------------- |
-| `--accent`                  | `#e8622c`                            | Buttons, highlights, active states |
-| `--accent-light`            | `#fbe3d5`                            | Tinted accent backgrounds          |
-| `--accent-dark`             | `#c94f1f`                            | Accent text and pressed states     |
-| `--accent-hover`            | `#fff3ec`                            | Hover backgrounds                  |
-| `--on-accent`               | `#fff`                               | Text on accent buttons (use a dark colour for light accents) |
-| `--link`                    | same as `--accent`                   | Links                              |
-| `--navy`                    | `#10213f`                            | Dark hero panels                   |
-| `--navy-light`              | `#182c52`                            | Raised areas on dark panels        |
-| `--navy-border`             | `rgba(255, 255, 255, 0.12)`          | Borders on dark panels             |
-| `--bg`                      | `#ffffff`                            | Cards and raised panels            |
-| `--bg2`                     | `#f9fafb`                            | Widget background                  |
-| `--bg3`                     | `#f3f4f6`                            | Subtle fills                       |
-| `--border`                  | `#e5e7eb`                            | Borders                            |
-| `--border-dark`             | `#d1d5db`                            | Stronger borders                   |
-| `--text`                    | `#111827`                            | Main text                          |
-| `--text-mid`                | `#6b7280`                            | Secondary text                     |
-| `--text-dim`                | `#9ca3af`                            | Hints and placeholders             |
-| `--green` / `--green-light` | `#16a34a` / `#dcfce7`                | Matched and success states         |
-| `--red` / `--red-light`     | `#dc2626` / `#fee2e2`                | Errors                             |
-| `--amber` / `--amber-light` | `#d97706` / `#fef3c7`                | Warnings and items to review       |
-| `--font-display`            | Inter, then the system font          | All widget text                    |
-| `--font-mono`               | IBM Plex Mono, then system monospace | Product codes                      |
-| `--radius` / `--radius-sm`  | `0`                                  | Corner rounding                    |
-| `--shadow` / `--shadow-md`  | subtle drop shadows                  | Cards and popovers                 |
-
-The widgets don't load any fonts. Inter is used only if your page already loads it;
-otherwise they fall back to the system font. Set `--font-display` to match your site.
-
-### How the styles interact with your page
-
-Every rule in `styles.css` is scoped to the widget, so it won't restyle anything else on
-your page. The scoping only works one way, though: a broad rule on your site, such as one
-that targets every `button` or `input`, can still reach elements inside the widget. If a
-widget looks wrong on your site, check for global element selectors first.
-
-## Security
-
-The API key is included in your page's JavaScript, so treat it as public. Metron protects
-your account by only accepting the key from the web addresses registered to it. A copied
-key won't work from any other site.
-
-- Register each environment's address with Metron before going live. If an address isn't
-  registered, the widgets load but their requests are rejected.
-- If you think a key has been misused, ask Metron to issue a new one.
-- The npm access token is different: it's a real secret. Keep it in your CI secrets and
-  local environment, never in source code.
-
-## Troubleshooting
-
-**The widget renders unstyled.** Import `@metron-labs/quote-react/styles.css`.
-
-**Requests fail with 401 or a CORS error in the browser console.** The page's address isn't
-registered for your API key. Send Metron the exact origin, including protocol and port
-(e.g. `https://staging.example.com`).
-
-**`npm install` fails with 401, 403 or 404.** Check that `.npmrc` is in your project root and
-that `NPM_TOKEN` is set wherever you install, including CI.
-
-**The build fails on a `.webp` import.** Your bundler needs to handle image imports. Vite,
-Next.js and Parcel do this automatically. In webpack 5, add an `asset/resource` rule for
-`.webp`.
-
-## Versioning
-
-Releases follow semantic versioning. While the version is `0.x`, a minor release
-(`0.1` → `0.2`) may include breaking changes, so allow patch updates only
-(`"~0.1.0"`) and upgrade minor versions deliberately.
-
-## Support
-
-Contact your Metron account manager.
-
-## Licence
-
-Proprietary. You may use this package only under a current agreement with Metron Labs Ltd;
-see [LICENSE](LICENSE) for the terms.
+# @metron-labs/quote-react
+
+Metron's quoting tools as React components you place in your own website:
+
+- **Quick Quote** — your customers upload a schedule, paste a materials list or photograph
+  a handwritten one. Metron matches each line to products in your catalogue, then shows
+  prices, quantities and a basket they can download as a spreadsheet.
+- **Estimating Tools** — 12 calculators (fencing, decking, brick and block, paint, timber,
+  paving and more) that turn a customer's measurements into a priced list of your products.
+
+Both widgets call Metron's API straight from the browser, so you don't need your own server.
+
+## Before you start
+
+Your Metron account manager will give you:
+
+| What             | Example     | Used for                                     |
+| ---------------- | ----------- | -------------------------------------------- |
+| Client code      | `ABCD-1234` | Identifies your catalogue. Not secret.       |
+| API key          | `boq_...`   | Authenticates the widgets with Metron's API. |
+| npm access token | `npm_...`   | Installing this package, which is private.   |
+
+Tell Metron every web address the widgets will run on: production, staging and local
+development (for example `http://localhost:3000`). The API key only works from addresses
+registered to your account (see [Security](#security)).
+
+## Requirements
+
+- React 18.3 or later, or React 19.
+- A bundler that can import images and CSS, such as Vite, Next.js, webpack 5 or Parcel.
+  The widget images ship inside the package, and your build serves them like your own.
+
+Not using React? Ask Metron for the script-tag version, which works on any website.
+
+## Install
+
+The package is private, so npm needs your access token. Add a `.npmrc` file to your
+project root:
+
+```ini
+@metron-labs:registry=https://registry.npmjs.org/
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}
+```
+
+Set `NPM_TOKEN` in your shell and CI, then install:
+
+```sh
+npm install @metron-labs/quote-react
+```
+
+Don't commit the token itself; `${NPM_TOKEN}` reads it from the environment.
+
+## Quick start
+
+```tsx
+import { QuoteProvider, QuickQuote } from "@metron-labs/quote-react";
+import "@metron-labs/quote-react/styles.css";
+
+const quoteConfig = {
+  apiBaseUrl: "https://api.metronlabs.ai",
+  client: "ABCD-1234",
+  apiKey: "boq_...",
+  theme: { "--accent": "#0a7d3b" },
+};
+
+export default function QuotePage() {
+  return (
+    <QuoteProvider config={quoteConfig}>
+      <QuickQuote />
+    </QuoteProvider>
+  );
+}
+```
+
+For the calculators, render `<EstimatingTools />` in the same way.
+
+Import `styles.css` once, anywhere in your app. Without it the widgets render unstyled.
+
+### Both widgets on one site
+
+Use one `QuoteProvider` per page, and put every widget on that page inside it:
+
+```tsx
+<QuoteProvider config={quoteConfig}>{tab === "quote" ? <QuickQuote hideHeader /> : <EstimatingTools hideHeader />}</QuoteProvider>
+```
+
+The widgets don't include site navigation. To offer both, link between them from your own
+menu or tabs.
+
+### Next.js (App Router)
+
+The widgets are client components and already marked `"use client"`, so you can render them
+from a server component page. Import `styles.css` in your root `layout.tsx` or in the page
+itself.
+
+### Keeping settings per environment
+
+To use different API keys for staging and production, read the config from environment
+variables at build time. For example, with Vite:
+
+```ts
+const quoteConfig = {
+  apiBaseUrl: import.meta.env.VITE_METRON_API_URL,
+  client: import.meta.env.VITE_METRON_CLIENT,
+  apiKey: import.meta.env.VITE_METRON_API_KEY,
+};
+```
+
+## Configuration
+
+`QuoteProvider` takes a single `config` prop:
+
+| Option       | Type                     | Required | Description                                             |
+| ------------ | ------------------------ | -------- | ------------------------------------------------------- |
+| `apiBaseUrl` | `string`                 | Yes      | Metron's API address, e.g. `https://api.metronlabs.ai`. |
+| `client`     | `string`                 | Yes      | Your client code.                                       |
+| `apiKey`     | `string`                 | Yes      | Your API key.                                           |
+| `theme`      | `Record<string, string>` | No       | Colour and style overrides; see [Theming](#theming).    |
+
+## Widget props
+
+`QuickQuote` and `EstimatingTools` take the same optional props:
+
+| Prop         | Default | Description                                                                                                             |
+| ------------ | ------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `hideHeader` | `false` | Hides the widget's own heading, for pages that already show one.                                                        |
+| `fullPage`   | `false` | Gives the widget its own background and full viewport height. Leave it off to place the widget inside your page layout. |
+
+## Theming
+
+Pass CSS custom properties in `config.theme` to match your brand. Anything you leave out
+keeps the default shown here.
+
+```ts
+theme: {
+  "--accent": "#0a7d3b",
+  "--accent-light": "#d3eddd",
+  "--accent-dark": "#075e2c",
+  "--accent-hover": "#eef8f2",
+  "--font-display": '"Your Font", system-ui, sans-serif',
+  "--radius": "8px",
+}
+```
+
+| Variable                    | Default                              | Used for                           |
+| --------------------------- | ------------------------------------ | ---------------------------------- |
+| `--accent`                  | `#e8622c`                            | Buttons, highlights, active states |
+| `--accent-light`            | `#fbe3d5`                            | Tinted accent backgrounds          |
+| `--accent-dark`             | `#c94f1f`                            | Accent text and pressed states     |
+| `--accent-hover`            | `#fff3ec`                            | Hover backgrounds                  |
+| `--on-accent`               | `#fff`                               | Text on accent buttons (use a dark colour for light accents) |
+| `--link`                    | same as `--accent`                   | Links                              |
+| `--navy`                    | `#10213f`                            | Dark hero panels                   |
+| `--navy-light`              | `#182c52`                            | Raised areas on dark panels        |
+| `--navy-border`             | `rgba(255, 255, 255, 0.12)`          | Borders on dark panels             |
+| `--bg`                      | `#ffffff`                            | Cards and raised panels            |
+| `--bg2`                     | `#f9fafb`                            | Widget background                  |
+| `--bg3`                     | `#f3f4f6`                            | Subtle fills                       |
+| `--border`                  | `#e5e7eb`                            | Borders                            |
+| `--border-dark`             | `#d1d5db`                            | Stronger borders                   |
+| `--text`                    | `#111827`                            | Main text                          |
+| `--text-mid`                | `#6b7280`                            | Secondary text                     |
+| `--text-dim`                | `#9ca3af`                            | Hints and placeholders             |
+| `--green` / `--green-light` | `#16a34a` / `#dcfce7`                | Matched and success states         |
+| `--red` / `--red-light`     | `#dc2626` / `#fee2e2`                | Errors                             |
+| `--amber` / `--amber-light` | `#d97706` / `#fef3c7`                | Warnings and items to review       |
+| `--font-display`            | Inter, then the system font          | All widget text                    |
+| `--font-mono`               | IBM Plex Mono, then system monospace | Product codes                      |
+| `--radius` / `--radius-sm`  | `0`                                  | Corner rounding                    |
+| `--shadow` / `--shadow-md`  | subtle drop shadows                  | Cards and popovers                 |
+
+The widgets don't load any fonts. Inter is used only if your page already loads it;
+otherwise they fall back to the system font. Set `--font-display` to match your site.
+
+### How the styles interact with your page
+
+Every rule in `styles.css` is scoped to the widget, so it won't restyle anything else on
+your page. The scoping only works one way, though: a broad rule on your site, such as one
+that targets every `button` or `input`, can still reach elements inside the widget. If a
+widget looks wrong on your site, check for global element selectors first.
+
+## Security
+
+The API key is included in your page's JavaScript, so treat it as public. Metron protects
+your account by only accepting the key from the web addresses registered to it. A copied
+key won't work from any other site.
+
+- Register each environment's address with Metron before going live. If an address isn't
+  registered, the widgets load but their requests are rejected.
+- If you think a key has been misused, ask Metron to issue a new one.
+- The npm access token is different: it's a real secret. Keep it in your CI secrets and
+  local environment, never in source code.
+
+## Troubleshooting
+
+**The widget renders unstyled.** Import `@metron-labs/quote-react/styles.css`.
+
+**Requests fail with 401 or a CORS error in the browser console.** The page's address isn't
+registered for your API key. Send Metron the exact origin, including protocol and port
+(e.g. `https://staging.example.com`).
+
+**`npm install` fails with 401, 403 or 404.** Check that `.npmrc` is in your project root and
+that `NPM_TOKEN` is set wherever you install, including CI.
+
+**The build fails on a `.webp` import.** Your bundler needs to handle image imports. Vite,
+Next.js and Parcel do this automatically. In webpack 5, add an `asset/resource` rule for
+`.webp`.
+
+## Versioning
+
+Releases follow semantic versioning. While the version is `0.x`, a minor release
+(`0.1` → `0.2`) may include breaking changes, so allow patch updates only
+(`"~0.1.0"`) and upgrade minor versions deliberately.
+
+## Support
+
+Contact your Metron account manager.
+
+## Licence
+
+Proprietary. You may use this package only under a current agreement with Metron Labs Ltd;
+see [LICENSE](LICENSE) for the terms.

package/dist/app/EstimatingTools.js

@@ -19,7 +19,7 @@ function EstimatingToolsInner({ fullPage = false, hideHeader = false, internal =
     const [activeEstimatorId, setActiveEstimatorId] = useState(null);
     const [review, setReview] = useState(null);
     const activeEstimator = ESTIMATOR_TOOLS.find((tool) => tool.id === activeEstimatorId);
-    const { cart, updateCartQty, updateCartSellUnits, updateCartConversions, removeFromCart } = useCart();
+    const { cart, updateCartQty, updateCartSellUnits, updateCartConversions, removeFromCart, clearCart } = useCart();
     const { adding, basketError, addToBasket } = useFixedBasket(activeEstimator?.title ?? "calculator");
     const reviewOrBasket = (requirements) => {
         if (!activeEstimator)
@@ -30,5 +30,10 @@ function EstimatingToolsInner({ fullPage = false, hideHeader = false, internal =
         else
             setReview(requirements);
     };
-    return (_jsx("div", { className: `app-wrapper${fullPage ? "" : " app-wrapper--embedded"}${hideHeader ? " app-wrapper--no-header" : ""}`, style: getQuoteConfig().theme, children: _jsx("main", { className: "main-content", children: showBasket ? (_jsx(BasketStage, { cart: cart, onUpdateQty: updateCartQty, onUpdateSellUnits: updateCartSellUnits, onResolveConversions: updateCartConversions, onRemove: removeFromCart, onBack: () => 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: () => { 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))) })] })] }) })) }) }));
+    return (_jsx("div", { className: `app-wrapper${fullPage ? "" : " app-wrapper--embedded"}${hideHeader ? " app-wrapper--no-header" : ""}`, style: getQuoteConfig().theme, children: _jsx("main", { className: "main-content", children: showBasket ? (_jsx(BasketStage, { cart: cart, onUpdateQty: updateCartQty, onUpdateSellUnits: updateCartSellUnits, onResolveConversions: updateCartConversions, onRemove: removeFromCart, onBack: () => onShowBasket(false), onStartNewQuote: () => {
+                    clearCart();
+                    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: () => { 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

@@ -173,5 +173,5 @@ function QuickQuoteInner({ fullPage = false, hideHeader = false, internal = fals
         setEntryMode("schedule");
         await runScheduleMatch(file);
     }, [runScheduleMatch]);
-    return (_jsx("div", { 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 })), 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, onRemove: removeFromCart, onBack: backToResults, internal: internal }))] }) }));
+    return (_jsx("div", { 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 })), 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, onRemove: removeFromCart, onBack: backToResults, onStartNewQuote: resetToEntry, internal: internal }))] }) }));
 }

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

@@ -6,7 +6,9 @@ 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;
     internal?: boolean;
 }
-export default function BasketStage({ cart, onUpdateQty, onUpdateSellUnits, onResolveConversions, onRemove, onBack, internal }: BasketStageProps): import("react").JSX.Element;
+export default function BasketStage({ cart, onUpdateQty, onUpdateSellUnits, onResolveConversions, onRemove, onBack, onStartNewQuote, internal }: BasketStageProps): import("react").JSX.Element;
 export {};

package/dist/app/stages/BasketStage.js

@@ -34,7 +34,7 @@ function TrashIcon() {
 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, internal = false }) {
+export default function BasketStage({ cart, onUpdateQty, onUpdateSellUnits, onResolveConversions, onRemove, onBack, onStartNewQuote, internal = false }) {
     // Both widgets can render a basket on the same page, so element ids are made unique.
     const uid = useId();
     const qzaBasketLayout = !internal && getBoqClientId() === "QZA6-MRA4";
@@ -171,6 +171,7 @@ export default function BasketStage({ cart, onUpdateQty, onUpdateSellUnits, onRe
                 return;
             }
             setQuoteRequestSent(true);
+            window.scrollTo(0, 0);
         }
         catch {
             setQuoteContactError("Your request couldn't be sent. Check your connection and try again.");
@@ -192,6 +193,9 @@ export default function BasketStage({ cart, onUpdateQty, onUpdateSellUnits, onRe
     const totalPages = Math.max(1, Math.ceil(pricedItems.length / PAGE_SIZE));
     const currentPage = Math.min(page, totalPages);
     const pagedItems = pricedItems.slice((currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE);
+    if (quoteRequestSent) {
+        return (_jsx("div", { className: "wizard-step entry-stage", children: _jsxs("div", { className: "quote-request-sent", role: "status", children: [_jsx("div", { className: "quote-request-sent-icon", "aria-hidden": "true", children: _jsx("svg", { width: "40", height: "40", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "5 12.5 10 17.5 19 7" }) }) }), _jsx("h1", { children: "Quote requested" }), _jsxs("p", { children: ["You're all done. We'll email your sharper price to ", _jsx("strong", { children: reference.trim() }), ", usually within one working day."] }), _jsx("button", { type: "button", className: "cta-btn", onClick: onStartNewQuote, children: _jsx("span", { children: "Start a new quote" }) }), _jsx("p", { className: "quote-request-sent-note", children: "Nothing is charged until you approve the quote." })] }) }));
+    }
     return (_jsx("div", { className: `wizard-step entry-stage${qzaBasketLayout ? " basket-layout--qza6-mra4" : ""}`, children: _jsxs("div", { className: `quick-order-card${internal ? "" : " quick-order-card--customer"}`, children: [_jsxs("div", { className: `quick-order-hero${internal ? "" : " quick-order-hero--customer"}`, children: [internal && _jsx("div", { className: "quick-order-eyebrow", children: "Construction Services" }), _jsxs("div", { className: "basket-hero-copy", children: [qzaBasketLayout && (_jsxs("button", { type: "button", className: "cta-btn cta-btn-secondary basket-hero-back", onClick: onBack, children: [_jsx(BackArrow, {}), _jsx("span", { children: "Back to results" })] })), _jsxs("div", { className: "quick-order-hero-title-row", children: [_jsx("h1", { children: internal ? "Your Selection" : qzaBasketLayout ? "Request a quote" : "Your Basket" }), internal && (_jsxs("span", { className: "summary-chip summary-chip--scope", children: [_jsx("strong", { children: items.length }), " ", items.length === 1 ? "item" : "items"] }))] }), _jsx("p", { children: internal
                                         ? "Review the items you've added before exporting them for review."
                                         : qzaBasketLayout
@@ -220,7 +224,7 @@ export default function BasketStage({ cart, onUpdateQty, onUpdateSellUnits, onRe
                                                     setReference(e.target.value);
                                                     if (qzaBasketLayout)
                                                         setQuoteContactError("");
-                                                }, placeholder: qzaBasketLayout ? "you@example.com" : "PO number or job reference" }), qzaBasketLayout && quoteContactError && (_jsx("p", { className: "basket-quote-request-error", role: "alert", children: quoteContactError })), qzaBasketLayout ? (quoteRequestSent ? (_jsxs("div", { className: "basket-quote-request-success", role: "status", children: [_jsx("strong", { children: "Better price requested" }), _jsx("span", { children: "We'll use this email address to prepare your better price." })] })) : (_jsx("button", { type: "button", className: "cta-btn", onClick: () => void submitQuoteRequest(), disabled: quoteRequestSending, "aria-busy": quoteRequestSending, children: _jsx("span", { children: quoteRequestSending ? "Sending…" : "Request our best quote" }) }))) : (_jsx("button", { className: "cta-btn", onClick: () => void exportBasketExcel(items), "aria-label": internal ? "Download selection" : "Download basket", children: _jsx("span", { children: internal ? "Download Quote" : "Buy Now" }) })), _jsxs("p", { className: "basket-sidebar-disclaimer", children: [_jsx("span", { "aria-hidden": "true", children: "\u26A0\uFE0F" }), qzaBasketLayout
+                                                }, placeholder: qzaBasketLayout ? "you@example.com" : "PO number or job reference" }), qzaBasketLayout && quoteContactError && (_jsx("p", { className: "basket-quote-request-error", role: "alert", children: quoteContactError })), qzaBasketLayout ? (_jsx("button", { type: "button", className: "cta-btn", onClick: () => void submitQuoteRequest(), disabled: quoteRequestSending, "aria-busy": quoteRequestSending, children: _jsx("span", { children: quoteRequestSending ? "Sending…" : "Request our best quote" }) })) : (_jsx("button", { className: "cta-btn", onClick: () => void exportBasketExcel(items), "aria-label": internal ? "Download selection" : "Download basket", children: _jsx("span", { children: internal ? "Download Quote" : "Buy Now" }) })), _jsxs("p", { className: "basket-sidebar-disclaimer", children: [_jsx("span", { "aria-hidden": "true", children: "\u26A0\uFE0F" }), qzaBasketLayout
                                                         ? "This is a quote request, not an order. We'll confirm our best price, availability and delivery before you approve."
                                                         : "Prices and availability are estimates and should be confirmed before procurement."] })] })] }), _jsx("div", { className: "btn-row results-actions", children: _jsxs("button", { className: "cta-btn cta-btn-secondary", style: { flex: "0 1 30%", gap: 10, justifyContent: "center" }, onClick: onBack, "aria-label": "Back to results", children: [_jsx(BackArrow, {}), _jsx("span", { children: "Back to results" })] }) })] })) })] }) }));
 }