@metron-labs/quote-react 0.1.34 → 0.1.36

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 = (event) => {
+            leavingBasket.current = false;
             const hash = window.location.hash;
             if (hash === "#quote-request")
                 setStage("basket");
@@ -134,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;
         }