@metron-labs/quote-react 0.1.33 → 0.1.35

package/dist/app/QuickQuote.js

@@ -11,6 +11,7 @@ import BasketStage from "./stages/BasketStage";
 import { CartProvider, useCart } from "../lib/cart/CartContext";
 import { clientHeaders, readJson } from "../lib/api/boqClient";
 import { getPricingBreakdown } from "../util/pricing";
+const SAVED_QUOTE_KEY = "metron-quick-quote";
 // Its own provider, separate from the estimating tools' - a quote in progress and a set
 // of calculator results are different baskets.
 export default function QuickQuote(props) {
@@ -24,7 +25,7 @@ function QuickQuoteInner({ fullPage = false, hideHeader = false, internal = fals
     const [processingStep, setProcessingStep] = useState(0);
     const [scheduleResult, setScheduleResult] = useState(null);
     const [scheduleReviewGateComplete, setScheduleReviewGateComplete] = useState(false);
-    const { cart, addToCart, removeFromCart, updateCartQty, updateCartSellUnits, updateCartConversions, clearCart } = useCart();
+    const { cart, addToCart, addManyToCart, removeFromCart, updateCartQty, updateCartSellUnits, updateCartConversions, clearCart } = useCart();
     const [cartSeeded, setCartSeeded] = useState(false);
     const resolvedConversionInputs = useRef(new Map());
     const rootRef = useRef(null);
@@ -82,13 +83,49 @@ function QuickQuoteInner({ fullPage = false, hideHeader = false, internal = fals
         })
             .catch((error) => console.error("Catalogue conversion resolution failed", error));
     }, [cart, updateCartConversions]);
+    // The quote survives the widget restarting - the host re-rendering the page under us
+    // (Turbo restoring its own entry), or a refresh. It lives in this tab's sessionStorage and
+    // the URL hash says which step to show. Restored after mount, not in the initial state, so
+    // a server-rendered host doesn't hit a hydration mismatch.
+    const [restored, setRestored] = useState(false);
     useEffect(() => {
-        if (window.location.hash !== "#matched-products" && window.location.hash !== "#quote-request")
-            return;
-        const url = new URL(window.location.href);
-        url.hash = "";
-        window.history.replaceState(window.history.state, "", url);
+        const hash = window.location.hash;
+        let saved = null;
+        try {
+            saved = JSON.parse(window.sessionStorage.getItem(SAVED_QUOTE_KEY) ?? "null");
+        }
+        catch { }
+        if (saved?.scheduleResult) {
+            setEntryMode("schedule");
+            setScheduleResult(saved.scheduleResult);
+            setScheduleReviewGateComplete(saved.reviewGateComplete);
+            setCartSeeded(saved.cartSeeded);
+            addManyToCart(Object.values(saved.cart));
+            if (hash === "#quote-request")
+                setStage("basket");
+            else if (hash === "#matched-products")
+                setStage("results");
+        }
+        else if (hash === "#matched-products" || hash === "#quote-request") {
+            const url = new URL(window.location.href);
+            url.hash = "";
+            window.history.replaceState(window.history.state, "", url);
+        }
+        setRestored(true);
     }, []);
+    useEffect(() => {
+        if (!restored)
+            return;
+        // ponytail: rewrites the whole quote on every basket edit; fine at schedule sizes,
+        // debounce it if large schedules make typing in quantities lag.
+        try {
+            if (!scheduleResult)
+                window.sessionStorage.removeItem(SAVED_QUOTE_KEY);
+            else
+                window.sessionStorage.setItem(SAVED_QUOTE_KEY, JSON.stringify({ scheduleResult, reviewGateComplete: scheduleReviewGateComplete, cartSeeded, cart }));
+        }
+        catch { }
+    }, [restored, scheduleResult, scheduleReviewGateComplete, cartSeeded, cart]);
     const writeQuoteHistory = useCallback((next) => {
         if (typeof window === "undefined")
             return;
@@ -102,8 +139,10 @@ function QuickQuoteInner({ fullPage = false, hideHeader = false, internal = fals
         const stale = next === "results" && (window.location.hash === "#matched-products" || window.location.hash === "#quote-request");
         window.history[stale ? "replaceState" : "pushState"]({ boqQuoteStage: next }, "", url);
     }, []);
+    const leavingBasket = useRef(false);
     useEffect(() => {
-        const onPopState = () => {
+        const onPopState = (event) => {
+            leavingBasket.current = false;
             const hash = window.location.hash;
             if (hash === "#quote-request")
                 setStage("basket");
@@ -112,14 +151,16 @@ function QuickQuoteInner({ fullPage = false, hideHeader = false, internal = fals
             else
                 setStage("entry");
             // Turbo's popstate listener (registered before ours, so it can't be pre-empted) stamps its
-            // restoration id over our entries. On the next back/forward it then treats them as its own
-            // page visits and reloads the page, dropping the user on entry. Put our state back once
-            // every listener has run.
+            // restoration id over any entry without one - ours, or the host's own entry for this page.
+            // On the next back/forward it then treats that entry as its page visit and re-renders the
+            // page, wiping the quote. Once every listener has run, undo the stamp.
+            const original = event.state;
+            const href = window.location.href;
             setTimeout(() => {
-                const current = window.location.hash;
-                if (current !== "#quote-request" && current !== "#matched-products")
+                if (original?.turbo || window.location.href !== href)
                     return;
-                window.history.replaceState({ boqQuoteStage: current === "#quote-request" ? "basket" : "results" }, "", window.location.href);
+                if (window.history.state?.turbo)
+                    window.history.replaceState(original, "", href);
             });
         };
         window.addEventListener("popstate", onPopState);
@@ -132,7 +173,12 @@ function QuickQuoteInner({ fullPage = false, hideHeader = false, internal = fals
     const backToResults = useCallback(() => {
         // Step back over the basket entry goToBasket pushed (popstate picks the screen), rather
         // than rewriting it: each rewrite left an extra results entry the browser back had to cross.
+        // history.back() is async: the basket stays up until popstate, so a double click would
+        // otherwise step back twice - past results to the host's entry, which re-renders the page.
         if (window.location.hash === "#quote-request") {
+            if (leavingBasket.current)
+                return;
+            leavingBasket.current = true;
             window.history.back();
             return;
         }