@metron-labs/quote-react 0.1.57 → 0.1.59

package/dist/lib/quoteHistory.d.ts

@@ -0,0 +1,6 @@
+/** Once per page; stays installed, as it only acts on our own steps. */
+export declare function installQuoteHistory(): void;
+/** Push or replace a history entry for one of our steps (or drop the hash, with url's hash empty). */
+export declare function setStep(method: "pushState" | "replaceState", state: unknown, url: URL): void;
+/** history.back() over our own step, skipping any twin a host script pushed on top of it. */
+export declare function stepBack(): void;

package/dist/lib/quoteHistory.js

@@ -0,0 +1,87 @@
+// The quote's steps are history entries on the host's own page: #quote-entry (the dialog),
+// #matched-products and #quote-request. Hosts have their own history listeners, and two of them
+// break back/forward between our steps (both seen on Materials Market):
+//
+// - Turbo (and Turbolinks) treat a step back onto the page's own entry, which holds their state,
+//   as a page visit: the page is fetched and re-rendered, the widget remounts and its open dialog
+//   is lost. With Turbo Drive off for the page, Turbo still does this.
+// - Salesfire's back-button trap pushes a copy of the current entry after a click, so every step
+//   we push gets a twin and our own back (closing the dialog) lands on the twin.
+//
+// So popstates between our steps and the page's entry on the same URL are hidden from the host:
+// a capturing listener runs before theirs (at the target, capture listeners go first) and shows
+// them an event without state, which Turbo and Salesfire ignore. The entry's real state is put back
+// afterwards. Twins are skipped in the direction of travel: known when we step back ourselves, and
+// for the browser's buttons read from the Navigation API where there is one.
+const STEPS = { "#quote-entry": "entry", "#matched-products": "results", "#quote-request": "basket" };
+let installed = false;
+// Where history was last seen. Our own pushes go through setStep, so this only goes stale when
+// the host pushes, and then the path or search has changed and nothing here applies.
+let lastUrl = "";
+let steppingBack = false;
+const navigation = () => window.navigation;
+// The index the last history move started from. currententrychange fires before popstate.
+let movedFrom = -1;
+/** -1 back, 1 forward, 0 unknown. */
+function direction() {
+    if (steppingBack)
+        return -1;
+    const now = navigation()?.currentEntry?.index;
+    if (now == null || movedFrom < 0 || now === movedFrom)
+        return 0;
+    return now < movedFrom ? -1 : 1;
+}
+function onPopState(event) {
+    const from = new URL(lastUrl || window.location.href);
+    const to = new URL(window.location.href);
+    lastUrl = to.href;
+    if (from.pathname !== to.pathname || from.search !== to.search)
+        return;
+    if (!(from.hash in STEPS) && !(to.hash in STEPS))
+        return;
+    const heading = from.href === to.href ? direction() : 0;
+    if (heading) {
+        // Landed on a twin someone pushed after our step: nothing changed, so nobody needs to hear
+        // about it. Keep going to the entry the move was meant for.
+        event.stopImmediatePropagation();
+        window.history.go(heading);
+        return;
+    }
+    steppingBack = false;
+    const real = event.state;
+    Object.defineProperty(event, "state", { value: null });
+    // Turbo answers a stateless popstate by stamping its own state on the entry. Once every
+    // listener has run, put back what was there - for our steps, our own state, so a stamp left
+    // by an older release doesn't stick.
+    setTimeout(() => {
+        if (window.location.href !== to.href)
+            return;
+        const stage = STEPS[to.hash];
+        const keep = stage && real?.turbo ? { boqQuoteStage: stage } : real;
+        // Only when it changed: history.state is a copy, so compare contents. On a host with no router
+        // of its own this never writes, and analytics watching replaceState see nothing.
+        if (JSON.stringify(window.history.state) !== JSON.stringify(keep))
+            window.history.replaceState(keep, "", to.href);
+    });
+}
+/** Once per page; stays installed, as it only acts on our own steps. */
+export function installQuoteHistory() {
+    if (installed || typeof window === "undefined")
+        return;
+    installed = true;
+    lastUrl = window.location.href;
+    window.addEventListener("popstate", onPopState, { capture: true });
+    navigation()?.addEventListener("currententrychange", (event) => {
+        movedFrom = event.from?.index ?? -1;
+    });
+}
+/** Push or replace a history entry for one of our steps (or drop the hash, with url's hash empty). */
+export function setStep(method, state, url) {
+    window.history[method](state, "", url);
+    lastUrl = window.location.href;
+}
+/** history.back() over our own step, skipping any twin a host script pushed on top of it. */
+export function stepBack() {
+    steppingBack = true;
+    window.history.back();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@metron-labs/quote-react",
-  "version": "0.1.57",
+  "version": "0.1.59",
   "description": "Metron Labs quote and estimating calculator components for React",
   "license": "UNLICENSED",
   "sideEffects": [