@metron-labs/quote-react 0.1.44 → 0.1.45

package/dist/app/QuickQuote.js

@@ -6,6 +6,7 @@ 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";
@@ -22,11 +23,22 @@ function QuickQuoteInner({ fullPage = false, hideHeader = false, internal = fals
     const [entryMode, setEntryMode] = useState(null);
     const [error, setError] = useState("");
     const schedulePollCancelRef = useRef(null);
+    const matchRunRef = useRef(0);
     const [processingStep, setProcessingStep] = useState(0);
     const [scheduleResult, setScheduleResult] = useState(null);
     const [scheduleReviewGateComplete, setScheduleReviewGateComplete] = useState(false);
     const { cart, addToCart, addManyToCart, removeFromCart, updateCartQty, updateCartSellUnits, updateCartConversions, clearCart } = useCart();
     const [cartSeeded, setCartSeeded] = useState(false);
+    // The file is memory only - a refresh loses it (a File can't go in sessionStorage). The tab
+    // and text survive one: EntryStage keeps them under ENTRY_DRAFT_KEY.
+    const [entryDraft, setEntryDraft] = useState(null);
+    const clearEntryDraft = () => {
+        setEntryDraft(null);
+        try {
+            window.sessionStorage.removeItem(ENTRY_DRAFT_KEY);
+        }
+        catch { }
+    };
     const resolvedConversionInputs = useRef(new Map());
     const rootRef = useRef(null);
     const track = useTracker("quick-quote", rootRef);
@@ -184,8 +196,8 @@ function QuickQuoteInner({ fullPage = false, hideHeader = false, internal = fals
                     return;
                 // Our own steps always get our state back, even if a stamp slipped through earlier -
                 // otherwise it sticks and every later visit to that step is a Turbo page visit.
-                if (hash === "#quote-request" || hash === "#matched-products") {
-                    window.history.replaceState({ boqQuoteStage: hash === "#quote-request" ? "basket" : "results" }, "", href);
+                if (hash === "#quote-request" || hash === "#matched-products" || hash === "#quote-entry") {
+                    window.history.replaceState({ boqQuoteStage: hash === "#quote-request" ? "basket" : hash === "#quote-entry" ? "entry" : "results" }, "", href);
                     return;
                 }
                 if (!original?.turbo && window.history.state?.turbo)
@@ -233,12 +245,14 @@ function QuickQuoteInner({ fullPage = false, hideHeader = false, internal = fals
         setScheduleReviewGateComplete(false);
         clearCart();
         setCartSeeded(false);
+        clearEntryDraft();
     };
     // Schedule-upload path: match a schedule file's line items against the
     // catalogue on the backend. Takes the file directly, so
     // callers that have only just obtained it — e.g. the entry-page paste box —
     // don't hit a stale-closure read.
     const runScheduleMatch = useCallback(async (file, providedLines, archiveSource = true) => {
+        const run = ++matchRunRef.current;
         setError("");
         setProcessingStep(0);
         let step = 0;
@@ -248,6 +262,8 @@ function QuickQuoteInner({ fullPage = false, hideHeader = false, internal = fals
         };
         try {
             const { jobId } = await submitSchedule(file, providedLines, archiveSource);
+            if (run !== matchRunRef.current)
+                return;
             // Poll rather than hold one request open: the pipeline can take several minutes,
             // well past Azure Static Web Apps' 45s API timeout, but each individual poll is fast.
             const { promise, cancel } = pollJob(() => pollScheduleJob(jobId), 5000, advanceFakeStep, "schedule");
@@ -269,15 +285,26 @@ function QuickQuoteInner({ fullPage = false, hideHeader = false, internal = fals
             setStage("results");
         }
         catch (err) {
+            if (run !== matchRunRef.current)
+                return;
             track("error", { stage: "matching" });
             setError(err?.message || "Failed to process schedule");
             setStage("entry");
         }
         finally {
-            schedulePollCancelRef.current?.();
-            schedulePollCancelRef.current = null;
+            if (run === matchRunRef.current) {
+                schedulePollCancelRef.current?.();
+                schedulePollCancelRef.current = null;
+            }
         }
     }, [writeQuoteHistory, track, clearCart]);
+    // Browser back out of the dialog mid-match: drop the match, or its results would turn up
+    // later on a screen the user has already left. The job still finishes server-side, unread.
+    const cancelMatch = useCallback(() => {
+        matchRunRef.current++;
+        schedulePollCancelRef.current?.();
+        schedulePollCancelRef.current = null;
+    }, []);
     // Entry-page "paste your line items" shortcut: skip the upload step entirely,
     // wrap the pasted text as a .txt — verbatim, so the copy archived in blob storage reads
     // exactly as pasted — and feed it straight into the same match pipeline.
@@ -294,10 +321,11 @@ 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 }), 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, 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, onRemove: removeFromCart, onBack: backToResults, onStartNewQuote: resetToEntry, onQuoteRequested: () => {
                             setScheduleResult(null);
                             setScheduleReviewGateComplete(false);
                             setCartSeeded(false);
                             clearCart();
+                            clearEntryDraft();
                         }, internal: internal }))] }) }) }));
 }

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

@@ -3,6 +3,18 @@ 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;
 }
-export default function EntryStage({ onPasteSchedule, onUploadSchedule, onEntryModeChange }: EntryStageProps): import("react").JSX.Element;
+type QuickOrderTab = "paste" | "upload";
+export interface EntryDraft {
+    tab: QuickOrderTab;
+    text: string;
+    file: File | null;
+}
+export declare const ENTRY_DRAFT_KEY = "metron-quick-quote-entry";
+export default function EntryStage({ onPasteSchedule, onUploadSchedule, onEntryModeChange, draft, onSubmitDraft, onCancelMatch }: EntryStageProps): import("react").JSX.Element;
 export {};

package/dist/app/stages/EntryStage.js

@@ -22,16 +22,21 @@ const STEPS = {
         { title: "Review Quote", desc: "Review the matched materials for your quote." },
     ],
 };
-export default function EntryStage({ onPasteSchedule, onUploadSchedule, onEntryModeChange }) {
-    const [activeTab, setActiveTab] = useState(null);
+// The open dialog is its own history step, so browser back closes it rather than leaving the page.
+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 track = useTrack();
-    const [pastedText, setPastedText] = useState("");
-    const [uploadFile, setUploadFile] = useState(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);
@@ -45,14 +50,77 @@ export default function EntryStage({ onPasteSchedule, onUploadSchedule, onEntryM
         setPhotoPreviewUrl(url);
         return () => URL.revokeObjectURL(url);
     }, [uploadFile]);
+    // Back closes the dialog, forward reopens it on the tab it was showing.
+    const lastTab = useRef(activeTab ?? draft?.tab ?? null);
+    if (activeTab)
+        lastTab.current = activeTab;
+    // A refresh on the dialog's step reopens it with its tab and text; the file can't come back.
+    // After mount, not in the initial state, so a server-rendered host doesn't hit a hydration mismatch.
+    useEffect(() => {
+        if (draft || window.location.hash !== DIALOG_HASH)
+            return;
+        let saved = null;
+        try {
+            saved = JSON.parse(window.sessionStorage.getItem(ENTRY_DRAFT_KEY) ?? "null");
+        }
+        catch { }
+        if (!saved?.tab) {
+            // Nothing to reopen (a copied link in a new tab, or storage cleared): drop the hash, or
+            // the dialog would reuse this step and closing it would go back off the page.
+            const url = new URL(window.location.href);
+            url.hash = "";
+            window.history.replaceState(window.history.state, "", url);
+            return;
+        }
+        lastTab.current = saved.tab;
+        setActiveTab(saved.tab);
+        setPastedText(saved.text ?? "");
+    }, []);
+    // Only while the dialog is open: the closed screen's empty state would overwrite the
+    // saved draft before the effect above reads it on a StrictMode remount.
+    useEffect(() => {
+        if (!activeTab)
+            return;
+        try {
+            window.sessionStorage.setItem(ENTRY_DRAFT_KEY, JSON.stringify({ tab: activeTab, text: pastedText }));
+        }
+        catch { }
+    }, [activeTab, pastedText]);
+    useEffect(() => {
+        const onPopState = () => {
+            if (window.location.hash === DIALOG_HASH)
+                return setActiveTab(lastTab.current);
+            setActiveTab(null);
+            // Backing out of the dialog cancels a match in progress (a no-op when there isn't one);
+            // forward reopens the dialog with the input, ready to submit again.
+            matchRun.current++;
+            setMatching(false);
+            onCancelMatch?.();
+        };
+        window.addEventListener("popstate", onPopState);
+        return () => window.removeEventListener("popstate", onPopState);
+    }, []);
     const openWorkflow = (tab) => {
         track("method_selected", { method: tab });
         setActiveTab(tab);
         onEntryModeChange(null);
+        const hash = window.location.hash;
+        if (hash === DIALOG_HASH)
+            return;
+        const url = new URL(window.location.href);
+        url.hash = DIALOG_HASH;
+        // Our own state only, as in QuickQuote's writeQuoteHistory. A results/basket hash left
+        // behind by "start over" is reused, or back would land on that stale step.
+        const stale = hash === "#matched-products" || hash === "#quote-request";
+        window.history[stale ? "replaceState" : "pushState"]({ boqQuoteStage: "entry" }, "", url);
     };
     const closeWorkflow = () => {
         setActiveTab(null);
         onEntryModeChange(null);
+        // Drop the dialog's step too. Closing hides the dialog straight away, so a second
+        // Escape/click can't step back again past the page.
+        if (window.location.hash === DIALOG_HASH)
+            window.history.back();
     };
     // Like the close button, but not mid-match, where the modal is showing progress.
     useEscapeKey(Boolean(activeTab) && !matching, closeWorkflow);
@@ -70,15 +138,26 @@ export default function EntryStage({ onPasteSchedule, onUploadSchedule, onEntryM
         setUploadFile(file);
     };
     const startMatching = async (run) => {
+        // Keep only what was submitted: stepping back to an image's dialog shouldn't still
+        // hold an earlier pasted list, or the other way round.
+        if (activeTab === "paste")
+            setUploadFile(null);
+        if (activeTab === "upload")
+            setPastedText("");
+        if (activeTab)
+            onSubmitDraft?.({ tab: activeTab, text: activeTab === "paste" ? pastedText : "", file: activeTab === "upload" ? uploadFile : null });
+        const id = ++matchRun.current;
         setMatching(true);
         try {
             await run();
         }
         finally {
-            setMatching(false);
+            if (id === matchRun.current)
+                setMatching(false);
         }
     };
     const matchPhoto = async (file) => {
+        const id = matchRun.current;
         try {
             const photo = await shrinkPhoto(file);
             const problem = validateUploadFile(photo);
@@ -96,9 +175,14 @@ export default function EntryStage({ onPasteSchedule, onUploadSchedule, onEntryM
             const lines = Array.isArray(payload?.lines)
                 ? payload.lines.filter((line) => Boolean(line && typeof line === "object" && typeof line.text === "string"))
                 : undefined;
+            // Cancelled while the photo was being read - don't start matching it.
+            if (id !== matchRun.current)
+                return;
             await onPasteSchedule(text, lines, false);
         }
         catch (error) {
+            if (id !== matchRun.current)
+                return;
             track("error", { stage: "photo" });
             setUploadError(error?.message || "Failed to extract line items from image");
         }