adp-web-components 0.3.21 → 0.4.0

package/dist/collection/components/vehicle-lookup/{vehicle-warranty-details.js → vehicle-ssc.js}

@@ -2,35 +2,92 @@
  * Built by ShiftSoftware
  * Copyright (c)
  */
-import { Host, h } from "@stencil/core";
+import { Host, forceUpdate, h } from "@stencil/core";
 import cn from "../../global/lib/cn";
-import warrantySchema from "../../locales/vehicleLookup/warranty/type";
-import CardsContainer from "./components/CardsContainer";
-import XIcon from "~assets/x-mark.svg";
-import CheckIcon from "~assets/check.svg";
+import { revealBelow } from "../../global/lib/reveal-below";
+import { createHeightChangeAnnouncer } from "../../global/lib/flexible-parents";
+import sscSchema from "../../locales/vehicleLookup/ssc/type";
+import { SscCampaigns, openDrawerKey, panelBody, sscTraceKey } from "./components/SscCampaigns";
 import { VehicleInfoLayout } from "../../features/vehicle-info-layout/index";
 import { smartInvokable } from "../../features/blazor-ref/index";
-import { setVehicleLookupData, setVehicleLookupErrorState } from "../../features/vehicle-lookup-component/vehicle-lookup-api-integration";
+import { resolveRequestHeaders, setVehicleLookupData, setVehicleLookupErrorState, } from "../../features/vehicle-lookup-component/index";
 import { getLocaleLanguage, getSharedLocal, sharedLocalesSchema } from "../../features/multi-lingual/index";
-export class VehicleWarrantyDetails {
+const RECAPTCHA_SCRIPT_SRC = 'https://www.google.com/recaptcha/api.js?render=explicit';
+/** The --settle token (lookup-tokens.css) when the stylesheet cannot be read, as in tests. */
+const DEFAULT_SETTLE_MS = 320;
+const isAbort = (error) => (error === null || error === void 0 ? void 0 : error.name) === 'AbortError';
+/**
+ * The Special Service Campaigns (safety recalls) affecting a vehicle, and nothing else: warranty
+ * coverage lives in <vehicle-warranty-timeline>. Replaces the campaign half of the retired
+ * <vehicle-warranty-details>.
+ *
+ * A vehicle is on exactly one of two paths, and the panel must never mix them (the rule is spelled
+ * out on `panelVerdict` in ./components/SscCampaigns.tsx and in
+ * .shift/repos/adp/web-components/vehicle-lookup-invariants.md):
+ *
+ *  - authorized (in the distributor's records): the campaign list is the verdict;
+ *  - unauthorized: the distributor has no records, so the only verdict is the manufacturer's
+ *    answer to the reCAPTCHA-gated check — a yes/no, no list. Until it arrives the panel says the
+ *    vehicle is not in the records and asserts nothing else.
+ *
+ * A third state is neither: a wrapper that only counts the SSC tab's own request as a campaign
+ * check (`sscQueryString`) tells this panel through `skipLookup` that a vehicle was looked up
+ * without it. The panel then says the check was not run and offers to run it, rather than sitting
+ * blank next to a VIN as if the vehicle had no campaigns.
+ *
+ * With `show-trace`, every campaign row can open the evidence behind its repair status: the labor
+ * codes accepted for the campaign, every warranty claim on the vehicle with how it was judged, and
+ * the service-history lines that matched. The trace is fetched on first use with `?trace=ssc`, so
+ * the ordinary lookup response stays small and the host can gate the detail behind a permission.
+ *
+ * Every state change is a movement (lookup-motion.css): the outgoing content stays rendered while
+ * the body shuts over it, and the incoming content is swapped in only while the body is shut. The
+ * shared lookup helper waits a second before it asks the server, which is what guarantees the body
+ * has settled shut before a response can land.
+ */
+export class VehicleSsc {
     constructor() {
         // #region Localization
         this.language = 'en';
-        this.locale = Object.assign({ sharedLocales: sharedLocalesSchema.getDefault() }, warrantySchema.getDefault());
+        this.locale = Object.assign({ sharedLocales: sharedLocalesSchema.getDefault() }, sscSchema.getDefault());
         // #endregion
         // #region Vehicle info layout prop
         this.coreOnly = false;
         this.disableVinValidation = false;
         this.headers = {};
         this.queryString = '';
+        /**
+         * Appended to the campaign lookup request only, never to the trace request. A wrapper passes its
+         * `sscQueryString` — typically a lookup-logging flag — here rather than into `queryString`, so
+         * opening a campaign's evidence (a re-read of a lookup that was already logged) is never counted
+         * as another lookup. The host's endpoint must refuse to log traced requests as well.
+         */
+        this.lookupQueryString = '';
+        /** Name of a [JSInvokable] method on the Blazor reference that answers with the current headers. */
+        this.blazorRequestHeadersProvider = '';
         this.isError = false;
         this.isLoading = false;
+        /** The panel is on its way to empty: the sheen is on and the body is shutting over its content. */
+        this.leaving = false;
+        this.leaveGeneration = 0;
+        /**
+         * The body's last non-empty content, kept while the body is shut so the content slides away
+         * with it instead of vanishing the frame the state changes. Dropped once the body has settled.
+         */
+        this.retainedBody = 'none';
+        this.runSkippedLookup = () => {
+            const vin = this.skippedVin;
+            if (!vin)
+                return;
+            void this.fetchVin(vin);
+        };
         // #endregion
-        // #region Component Logic
-        this.showSsc = false;
+        // #region Component props
+        /** Shows a per-campaign "why this status?" control. The host gates it on its own permission check; the trace lists claim and invoice details. */
+        this.showTrace = false;
         this.recaptchaKey = '';
+        /** Renders a click-to-pass stand-in for the reCAPTCHA widget. Implied by `isDev`; the real widget is only ever used in production mode. */
         this.mockRecaptcha = false;
-        this.showWarranty = false;
         this.unauthorizedSscLookupBaseUrl = '';
         this.unauthorizedSscLookupQueryString = '';
         this.cityId = null;
@@ -44,8 +101,10 @@ export class VehicleWarrantyDetails {
         this.customerName = null;
         this.customerPhone = null;
         this.customerEmail = null;
+        // #endregion
+        // #region Manufacturer check (unauthorized vehicles)
+        /** The check is offered: the vehicle is unauthorized and the host configured a site key. */
         this.showRecaptcha = false;
-        this.unInvoicedByBrokerName = null;
         this.checkingUnauthorizedSSC = false;
         this.devRecaptchaChecked = false;
         this.recaptchaRes = null;
@@ -55,10 +114,16 @@ export class VehicleWarrantyDetails {
             if (!this.mockRecaptchaTrigger)
                 return;
             this.devRecaptchaChecked = true;
-            await this.mockRecaptchaTrigger();
+            try {
+                await this.mockRecaptchaTrigger();
+            }
+            catch (error) {
+                if (!isAbort(error))
+                    console.error('SSC manufacturer check failed', error);
+            }
         };
         this.syncRecaptchaPosition = () => {
-            if (!this.recaptchaPlaceholderRef || !this.showRecaptcha)
+            if (!this.recaptchaPlaceholderRef || !this.recaptchaPortalEl || this.recaptchaPortalEl.style.display === 'none')
                 return;
             const rect = this.recaptchaPlaceholderRef.getBoundingClientRect();
             this.recaptchaPortalEl.style.top = `${rect.top}px`;
@@ -68,29 +133,52 @@ export class VehicleWarrantyDetails {
             this.recaptchaPortalEl.style.pointerEvents = opacity < 0.1 ? 'none' : 'auto';
             this.positionRAF = requestAnimationFrame(this.syncRecaptchaPosition);
         };
+        this.traces = {};
+        this.traceLoading = false;
+        this.toggleTrace = async (key) => {
+            var _a, _b;
+            if (this.openTraceKey === key) {
+                this.openTraceKey = undefined;
+                return;
+            }
+            this.openTraceKey = key;
+            const vin = (_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.vin;
+            if (!vin)
+                return;
+            // A response that already carries traces (a host that turned the option on for this caller,
+            // or mock data) needs no second request.
+            const seeded = Object.fromEntries((((_b = this.vehicleLookup) === null || _b === void 0 ? void 0 : _b.ssc) || []).map((item, index) => [sscTraceKey(item, index), item === null || item === void 0 ? void 0 : item.trace]).filter(([, trace]) => !!trace));
+            if (this.tracesVin !== vin && Object.keys(seeded).length) {
+                this.traces = seeded;
+                this.tracesVin = vin;
+            }
+            if (this.traces[key] || this.tracesVin === vin)
+                return;
+            await this.loadTraces(vin);
+        };
     }
     async componentWillLoad() {
         await this.changeLanguage(this.language);
     }
     async changeLanguage(newLanguage) {
-        const [sharedLocales, locale] = await Promise.all([getSharedLocal(newLanguage), getLocaleLanguage(newLanguage, 'vehicleLookup.warranty', warrantySchema)]);
+        const [sharedLocales, locale] = await Promise.all([getSharedLocal(newLanguage), getLocaleLanguage(newLanguage, 'vehicleLookup.ssc', sscSchema)]);
         this.locale = Object.assign({ sharedLocales }, locale);
     }
     async setMockData(newMockData) {
         this.mockData = newMockData;
     }
     async fetchVin(newData, headers = {}) {
-        this.recaptchaRes = null;
-        this.showRecaptcha = false;
-        clearInterval(this.recaptchaIntervalRef);
+        this.leaveGeneration++;
+        this.skippedVin = undefined;
+        this.resetTraces();
+        // The check's machinery stops now; its widget stays on screen so it leaves with the body.
+        this.suspendManufacturerCheck();
         await setVehicleLookupData(this, newData, headers, {
             beforeAssignment: async (response, { scopedTimeoutRef }) => {
-                var _a, _b, _c;
-                if (((_a = response === null || response === void 0 ? void 0 : response.saleInformation) === null || _a === void 0 ? void 0 : _a.broker) !== null && ((_c = (_b = response === null || response === void 0 ? void 0 : response.saleInformation) === null || _b === void 0 ? void 0 : _b.broker) === null || _c === void 0 ? void 0 : _c.invoiceDate) === null)
-                    this.unInvoicedByBrokerName = response.saleInformation.broker.brokerName;
-                else
-                    this.unInvoicedByBrokerName = null;
-                await this.handleInitializingRecaptcha(response, scopedTimeoutRef);
+                // By now the body has settled shut (the helper's one-second wait outlasts --settle), so
+                // the previous vehicle's check can go and the next one's be prepared unseen.
+                this.resetManufacturerCheck();
+                this.prepareManufacturerCheck(response, scopedTimeoutRef);
                 return response;
             },
         });
@@ -98,30 +186,239 @@ export class VehicleWarrantyDetails {
     async setErrorMessage(message) {
         setVehicleLookupErrorState(this, message);
     }
+    /** Back to "no vehicle": the body shuts over what it holds, then the panel is emptied unseen. */
     async clearData() {
+        await this.leave();
+        this.emptyPanel();
+    }
+    /**
+     * The other panels were given a vehicle but this one's own lookup was not run for it — a wrapper
+     * with `sscQueryString` only counts the SSC tab's own request as a campaign check. The panel says
+     * so and offers to run the check itself; the VIN is kept for that.
+     */
+    async skipLookup(vin) {
+        if (!this.vehicleLookup && this.skippedVin === vin)
+            return;
+        await this.leave();
+        this.emptyPanel();
+        this.skippedVin = vin;
+    }
+    onLoadingChange(newValue) {
+        smartInvokable.bind(this)(this.loadingStateChange, newValue);
+    }
+    /** How long a state change takes to settle: the --settle token plus a margin for the frame it starts on. */
+    settleMs() {
+        const raw = typeof getComputedStyle === 'function' ? getComputedStyle(this.el).getPropertyValue('--settle') : '';
+        const parsed = parseFloat(raw);
+        return (Number.isFinite(parsed) && parsed > 0 ? parsed : DEFAULT_SETTLE_MS) + 40;
+    }
+    /**
+     * Puts the chip and lead on the sheen, shuts the body over whatever it holds, and resolves once
+     * they have settled — so the caller can swap the content while nothing is on screen. Resolves at
+     * once when there is nothing to leave. A lookup started meanwhile takes over.
+     */
+    async leave() {
+        var _a;
+        const generation = ++this.leaveGeneration;
+        if (!this.vehicleLookup && !this.skippedVin && !this.isError)
+            return;
+        clearTimeout(this.networkTimeoutRef);
+        (_a = this.abortController) === null || _a === void 0 ? void 0 : _a.abort();
+        this.suspendManufacturerCheck();
+        this.leaving = true;
+        await new Promise(resolve => setTimeout(resolve, this.settleMs()));
+        if (generation === this.leaveGeneration)
+            this.leaving = false;
+    }
+    emptyPanel() {
         this.vehicleLookup = undefined;
-        this.recaptchaRes = null;
-        this.showRecaptcha = false;
-        this.devRecaptchaChecked = false;
-        this.checkingUnauthorizedSSC = false;
         this.isError = false;
         this.errorMessage = undefined;
         this.isLoading = false;
-        clearInterval(this.recaptchaIntervalRef);
+        this.skippedVin = undefined;
+        this.resetManufacturerCheck();
+        this.resetTraces();
     }
-    onLoadingChange(newValue) {
-        smartInvokable.bind(this)(this.loadingStateChange, newValue);
+    componentDidRender() {
+        var _a, _b, _c;
+        this.followOpenDrawer();
+        const state = this.panelState();
+        const body = panelBody(state);
+        const signature = [
+            this.isLoading || this.leaving,
+            body,
+            this.retainedBody,
+            this.openTraceKey,
+            this.traceLoading,
+            this.traceError,
+            this.checkingUnauthorizedSSC,
+            this.showRecaptcha,
+            (_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.vin,
+            this.skippedVin,
+            (_b = this.recaptchaRes) === null || _b === void 0 ? void 0 : _b.status,
+        ].join('|');
+        const changed = this.layoutSignature !== undefined && this.layoutSignature !== signature;
+        this.layoutSignature = signature;
+        if (!changed)
+            return;
+        (_c = this.heightAnnouncer) !== null && _c !== void 0 ? _c : (this.heightAnnouncer = createHeightChangeAnnouncer(this.el));
+        this.heightAnnouncer.announce(this.settleMs() + 80);
+    }
+    /** Remembers what the body shows, and forgets it a settle after the body shut. */
+    retainBody(body) {
+        if (body !== 'none') {
+            this.retainedBody = body;
+            clearTimeout(this.retainTimer);
+            this.retainTimer = undefined;
+            return;
+        }
+        if (this.retainedBody !== 'none' && !this.retainTimer) {
+            this.retainTimer = setTimeout(() => {
+                this.retainTimer = undefined;
+                this.retainedBody = 'none';
+                forceUpdate(this);
+            }, this.settleMs());
+        }
     }
     async setBlazorRef(newBlazorRef) {
         this.blazorRef = newBlazorRef;
     }
+    /**
+     * Development never shows Google's widget. The stand-in is the default whenever `isDev` is on, and
+     * the real widget is created lazily, only when a production-mode lookup actually needs it — so a
+     * host that flips `isDev` after the element mounted (the dev showcase does) still gets the mock,
+     * instead of a real widget rendered at mount time sitting on top of a mock that never polls it.
+     */
     get useMockRecaptchaWidget() {
         return this.isDev || this.mockRecaptcha;
     }
+    onRecaptchaModeChange() {
+        this.syncRealRecaptchaVisibility();
+    }
+    /** Stops the check from answering — polling, the stand-in's trigger, a request in flight — without touching what is on screen. */
+    suspendManufacturerCheck() {
+        clearInterval(this.recaptchaIntervalRef);
+        this.mockRecaptchaTrigger = undefined;
+    }
+    /** Back to "nothing asked yet" — every new lookup, once the previous check has left the screen, and a cleared panel start here. */
+    resetManufacturerCheck() {
+        this.suspendManufacturerCheck();
+        clearTimeout(this.recaptchaHideTimer);
+        this.recaptchaRes = null;
+        this.showRecaptcha = false;
+        this.checkingUnauthorizedSSC = false;
+        this.devRecaptchaChecked = false;
+        this.hideRealRecaptcha();
+    }
+    /**
+     * Offers the check for an unauthorized vehicle. Not awaited by the lookup: loading Google's script
+     * must not delay the vehicle landing on screen, so the real widget is armed in the background and
+     * checked against the lookup generation before it starts polling.
+     */
+    prepareManufacturerCheck(newVehicleLookup, scopedTimeoutRef) {
+        if ((newVehicleLookup === null || newVehicleLookup === void 0 ? void 0 : newVehicleLookup.isAuthorized) !== false || this.recaptchaKey === '') {
+            this.showRecaptcha = false;
+            return;
+        }
+        this.showRecaptcha = true;
+        if (this.useMockRecaptchaWidget) {
+            this.mockRecaptchaTrigger = () => this.runUnauthorizedSscLookup(newVehicleLookup, 'mock-recaptcha-token', scopedTimeoutRef);
+            return;
+        }
+        void this.armRealRecaptcha(newVehicleLookup, scopedTimeoutRef);
+    }
+    async armRealRecaptcha(newVehicleLookup, scopedTimeoutRef) {
+        try {
+            await this.ensureRealRecaptcha();
+        }
+        catch (error) {
+            console.error('reCAPTCHA could not be loaded', error);
+            return;
+        }
+        // A newer lookup, a cleared panel or a flip to mock mode while the script loaded: this one is stale.
+        if (this.networkTimeoutRef !== scopedTimeoutRef || !this.showRecaptcha || this.useMockRecaptchaWidget)
+            return;
+        if (this.recaptchaWidgetId !== undefined)
+            grecaptcha.reset(this.recaptchaWidgetId);
+        this.syncRealRecaptchaVisibility();
+        clearInterval(this.recaptchaIntervalRef);
+        this.recaptchaIntervalRef = setInterval(async () => {
+            const recaptchaResponse = grecaptcha.getResponse(this.recaptchaWidgetId);
+            if (!recaptchaResponse)
+                return;
+            clearInterval(this.recaptchaIntervalRef);
+            try {
+                await this.runUnauthorizedSscLookup(newVehicleLookup, recaptchaResponse, scopedTimeoutRef);
+            }
+            catch (error) {
+                if (!isAbort(error))
+                    console.error('SSC manufacturer check failed', error);
+            }
+        }, 500);
+    }
+    /** Loads Google's script and renders the widget into a body-level portal, once per element. */
+    ensureRealRecaptcha() {
+        if (!this.recaptchaReady) {
+            this.recaptchaReady = new Promise((resolve, reject) => {
+                if (!this.recaptchaPortalEl) {
+                    this.recaptchaPortalEl = document.createElement('div');
+                    this.recaptchaPortalEl.style.cssText = 'position: fixed; z-index: 1; display: none;';
+                    document.body.appendChild(this.recaptchaPortalEl);
+                }
+                const renderWidget = () => grecaptcha.ready(() => {
+                    this.recaptchaWidgetId = grecaptcha.render(this.recaptchaPortalEl, { sitekey: this.recaptchaKey });
+                    resolve();
+                });
+                if (typeof grecaptcha !== 'undefined' && typeof (grecaptcha === null || grecaptcha === void 0 ? void 0 : grecaptcha.render) === 'function') {
+                    renderWidget();
+                    return;
+                }
+                const script = document.createElement('script');
+                script.src = RECAPTCHA_SCRIPT_SRC;
+                script.async = true;
+                script.defer = true;
+                script.onload = renderWidget;
+                script.onerror = () => {
+                    this.recaptchaReady = undefined;
+                    reject(new Error('reCAPTCHA script failed to load'));
+                };
+                document.head.appendChild(script);
+            });
+        }
+        return this.recaptchaReady;
+    }
+    hideRealRecaptcha() {
+        cancelAnimationFrame(this.positionRAF);
+        clearTimeout(this.recaptchaHideTimer);
+        if (this.recaptchaPortalEl)
+            this.recaptchaPortalEl.style.display = 'none';
+    }
+    /**
+     * The real widget is visible only while a production-mode check is offered and unanswered. It
+     * lives outside the shadow root, so the body cannot clip it as it shuts; instead it follows the
+     * body's opacity (see `getAncestorOpacity`) and is only taken down once the body has settled.
+     */
+    syncRealRecaptchaVisibility() {
+        if (!this.recaptchaPortalEl)
+            return;
+        if (this.showRecaptcha && !this.recaptchaRes && !this.useMockRecaptchaWidget) {
+            clearTimeout(this.recaptchaHideTimer);
+            this.recaptchaPortalEl.style.display = 'block';
+            this.syncRecaptchaPosition();
+            return;
+        }
+        clearTimeout(this.recaptchaHideTimer);
+        this.recaptchaHideTimer = setTimeout(() => this.hideRealRecaptcha(), this.settleMs());
+    }
+    onRecaptchaStateChange() {
+        this.syncRealRecaptchaVisibility();
+    }
     async runUnauthorizedSscLookup(newVehicleLookup, recaptchaToken, scopedTimeoutRef) {
         this.checkingUnauthorizedSSC = true;
         if (this.isDev) {
             await new Promise(r => setTimeout(r, 3000));
+            if (this.networkTimeoutRef !== scopedTimeoutRef)
+                return;
             this.checkingUnauthorizedSSC = false;
             const randomValue = Math.random();
             const devSscLookupStatus = randomValue < 0.33 ? 0 : randomValue > 0.33 && randomValue < 0.66 ? 2 : 1;
@@ -131,162 +428,180 @@ export class VehicleWarrantyDetails {
             smartInvokable.bind(this)(this.unauthorizedSscLookupResponse, devSscLookupStatus);
             return;
         }
+        // Resolved at call time: the token handed over with the search may have expired by the time
+        // the visitor completes the captcha.
+        const headers = await resolveRequestHeaders(this);
         const response = await fetch(`${this.unauthorizedSscLookupBaseUrl}${newVehicleLookup === null || newVehicleLookup === void 0 ? void 0 : newVehicleLookup.vin}/${newVehicleLookup === null || newVehicleLookup === void 0 ? void 0 : newVehicleLookup.sscLogId}?${this.unauthorizedSscLookupQueryString}`, {
             signal: this.abortController.signal,
-            headers: Object.assign(Object.assign({}, this.headers), { 'Ssc-Recaptcha-Token': recaptchaToken }),
+            headers: Object.assign(Object.assign({}, headers), { 'Ssc-Recaptcha-Token': recaptchaToken }),
         });
         const vinResponse = await response.json();
-        if (vinResponse && this.networkTimeoutRef === scopedTimeoutRef) {
-            this.checkingUnauthorizedSSC = false;
-            this.recaptchaRes = {
-                status: vinResponse.sscLookupStatus === 0
-                    ? 'noRecall'
-                    : vinResponse.sscLookupStatus === 1
-                        ? 'recallExists'
-                        : vinResponse.sscLookupStatus === 2
-                            ? 'noApplicableVehicleFound'
-                            : null,
-            };
-            smartInvokable.bind(this)(this.unauthorizedSscLookupResponse, vinResponse.sscLookupStatus);
-        }
-        else
-            throw new Error('wrongResponseFormat');
-    }
-    async handleInitializingRecaptcha(newVehicleLookup, scopedTimeoutRef) {
-        if ((newVehicleLookup === null || newVehicleLookup === void 0 ? void 0 : newVehicleLookup.isAuthorized) === false && this.showSsc && this.recaptchaKey !== '') {
-            this.devRecaptchaChecked = false;
-            if (this.useMockRecaptchaWidget) {
-                this.mockRecaptchaTrigger = () => this.runUnauthorizedSscLookup(newVehicleLookup, 'mock-recaptcha-token', scopedTimeoutRef);
-                this.showRecaptcha = true;
-                return;
-            }
-            if (this.recaptchaWidgetId !== undefined) {
-                grecaptcha.reset(this.recaptchaWidgetId);
-            }
-            this.recaptchaIntervalRef = setInterval(async () => {
-                const recaptchaResponse = grecaptcha.getResponse(this.recaptchaWidgetId);
-                if (recaptchaResponse) {
-                    clearInterval(this.recaptchaIntervalRef);
-                    await this.runUnauthorizedSscLookup(newVehicleLookup, recaptchaResponse, scopedTimeoutRef);
-                }
-            }, 500);
-            this.showRecaptcha = true;
-        }
-        else {
-            this.showRecaptcha = false;
-        }
-    }
-    async componentDidLoad() {
-        if (this.useMockRecaptchaWidget)
+        // A newer lookup started while the manufacturer was answering: this answer is for a vehicle no longer shown.
+        if (this.networkTimeoutRef !== scopedTimeoutRef)
             return;
-        if (this.recaptchaKey !== '') {
-            this.recaptchaPortalEl = document.createElement('div');
-            this.recaptchaPortalEl.style.cssText = 'position: fixed; z-index: 1; display: none;';
-            document.body.appendChild(this.recaptchaPortalEl);
-            const script = document.createElement('script');
-            script.src = 'https://www.google.com/recaptcha/api.js?render=explicit';
-            script.async = true;
-            script.defer = true;
-            script.onload = () => {
-                grecaptcha.ready(() => {
-                    this.recaptchaWidgetId = grecaptcha.render(this.recaptchaPortalEl, { sitekey: this.recaptchaKey });
-                });
-            };
-            document.head.appendChild(script);
-        }
+        if (!vinResponse)
+            throw new Error('wrongResponseFormat');
+        this.checkingUnauthorizedSSC = false;
+        this.recaptchaRes = {
+            status: vinResponse.sscLookupStatus === 0 ? 'noRecall' : vinResponse.sscLookupStatus === 1 ? 'recallExists' : vinResponse.sscLookupStatus === 2 ? 'noApplicableVehicleFound' : null,
+        };
+        smartInvokable.bind(this)(this.unauthorizedSscLookupResponse, vinResponse.sscLookupStatus);
     }
     disconnectedCallback() {
+        var _a, _b;
+        (_a = this.heightAnnouncer) === null || _a === void 0 ? void 0 : _a.dispose();
+        this.stopFollowingDrawer();
         cancelAnimationFrame(this.positionRAF);
         clearInterval(this.recaptchaIntervalRef);
+        clearTimeout(this.recaptchaHideTimer);
+        clearTimeout(this.retainTimer);
+        (_b = this.traceAbortController) === null || _b === void 0 ? void 0 : _b.abort();
         if (this.recaptchaPortalEl) {
             this.recaptchaPortalEl.remove();
+            this.recaptchaPortalEl = undefined;
+            this.recaptchaReady = undefined;
+            this.recaptchaWidgetId = undefined;
         }
     }
-    onShowRecaptchaChange(show) {
-        if (!this.recaptchaPortalEl)
-            return;
-        if (show) {
-            this.recaptchaPortalEl.style.display = 'block';
-            this.syncRecaptchaPosition();
+    /**
+     * How see-through the widget's place on the page is: the product of every ancestor's opacity,
+     * from the placeholder up through this shadow root (the body fading as it shuts) and on up the
+     * host page (a tab sliding out). The portal copies it, so the real widget leaves with the panel.
+     */
+    getAncestorOpacity() {
+        let opacity = 1;
+        const walk = (from, until) => {
+            for (let el = from; el && el !== until; el = el.parentElement) {
+                const own = parseFloat(getComputedStyle(el).opacity);
+                if (!Number.isNaN(own))
+                    opacity *= own;
+            }
+        };
+        walk(this.recaptchaPlaceholderRef, null);
+        walk(this.el, document.body);
+        return opacity;
+    }
+    resetTraces() {
+        var _a;
+        (_a = this.traceAbortController) === null || _a === void 0 ? void 0 : _a.abort();
+        this.stopFollowingDrawer();
+        this.openTraceKey = undefined;
+        this.traces = {};
+        this.tracesVin = undefined;
+        this.traceLoading = false;
+        this.traceError = undefined;
+    }
+    async loadTraces(vin) {
+        var _a, _b;
+        (_a = this.traceAbortController) === null || _a === void 0 ? void 0 : _a.abort();
+        this.traceAbortController = new AbortController();
+        const { signal } = this.traceAbortController;
+        this.traceLoading = true;
+        this.traceError = undefined;
+        try {
+            let response;
+            if (this.isDev) {
+                response = (_b = this.mockData) === null || _b === void 0 ? void 0 : _b[vin];
+            }
+            else {
+                if (!this.baseUrl)
+                    throw new Error('noBaseUrl');
+                // KPI integrity: built from queryString alone. lookupQueryString (a wrapper's logging flag)
+                // must never join a trace request — this is a re-read, not a lookup. vehicle-ssc.spec.tsx pins it.
+                const query = [this.queryString, 'trace=ssc'].filter(Boolean).join('&');
+                const headers = await resolveRequestHeaders(this);
+                const httpResponse = await fetch(`${this.baseUrl}${vin}?${query}`, { headers, signal });
+                if (!httpResponse.ok)
+                    throw new Error(`HTTP ${httpResponse.status}`);
+                response = (await httpResponse.json());
+            }
+            if (signal.aborted)
+                return;
+            const traces = {};
+            ((response === null || response === void 0 ? void 0 : response.ssc) || []).forEach((item, index) => {
+                if (item === null || item === void 0 ? void 0 : item.trace)
+                    traces[sscTraceKey(item, index)] = item.trace;
+            });
+            this.traces = traces;
+            this.tracesVin = vin;
+            this.traceError = Object.keys(traces).length ? undefined : this.locale.traceUnavailable;
         }
-        else {
-            this.recaptchaPortalEl.style.display = 'none';
-            cancelAnimationFrame(this.positionRAF);
+        catch (error) {
+            if (isAbort(error))
+                return;
+            console.error('SSC trace fetch failed', error);
+            this.traceError = this.locale.traceFailed;
         }
-    }
-    getAncestorOpacity() {
-        let el = this.el.parentElement;
-        while (el && el !== document.body) {
-            const opacity = parseFloat(getComputedStyle(el).opacity);
-            if (opacity < 1)
-                return opacity;
-            el = el.parentElement;
+        finally {
+            if (!signal.aborted)
+                this.traceLoading = false;
         }
-        return 1;
+    }
+    /**
+     * When a row's evidence opens, brings the row to the top of the page and keeps it there while the
+     * drawer slides open beneath it — as an expanded service-history line does — so the reader is
+     * looking at the evidence they asked for and not at the drawer's edge below the fold. Runs after
+     * every render and acts only when the open drawer changes; closing it, or leaving, lets go.
+     */
+    followOpenDrawer() {
+        var _a, _b, _c;
+        const key = openDrawerKey({
+            campaigns: (_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.ssc,
+            showTrace: this.showTrace,
+            openTraceKey: this.openTraceKey,
+            traces: this.traces,
+            traceLoading: this.traceLoading,
+        });
+        if (key === this.followedDrawer)
+            return;
+        this.stopFollowingDrawer();
+        this.followedDrawer = key;
+        if (!key)
+            return;
+        const row = Array.from((_c = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.ssc-row')) !== null && _c !== void 0 ? _c : []).find(el => el.getAttribute('data-trace-key') === key);
+        if (row)
+            this.stopFollowing = revealBelow(row, this.settleMs());
+    }
+    stopFollowingDrawer() {
+        var _a;
+        (_a = this.stopFollowing) === null || _a === void 0 ? void 0 : _a.call(this);
+        this.stopFollowing = undefined;
+        this.followedDrawer = undefined;
     }
     // #endregion
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g;
-        const tableHeaders = [
-            {
-                nowrap: true,
-                key: 'sscTableCode',
-                label: this.locale.sscTableCode,
-            },
-            {
-                key: 'sscTableDescription',
-                label: this.locale.sscTableDescription,
-            },
-            {
-                nowrap: true,
-                key: 'sscTableRepairStatus',
-                label: this.locale.sscTableRepairStatus,
-            },
-            {
-                key: 'sscTableOPCode',
-                label: this.locale.sscTableOPCode,
-            },
-            {
-                key: 'sscTablePartNumber',
-                label: this.locale.sscTablePartNumber,
-            },
-        ];
-        const rows = !((_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.ssc)
-            ? []
-            : (_b = this.vehicleLookup) === null || _b === void 0 ? void 0 : _b.ssc.map(sscItem => ({
-                sscTableCode: sscItem === null || sscItem === void 0 ? void 0 : sscItem.sscCode,
-                sscTableDescription: sscItem === null || sscItem === void 0 ? void 0 : sscItem.description,
-                sscTableRepairStatus: () => (h("div", { class: "table-cell-container" }, h("img", { class: "table-status-icon", src: (sscItem === null || sscItem === void 0 ? void 0 : sscItem.repaired) ? CheckIcon : XIcon }), " ", sscItem === null || sscItem === void 0 ? void 0 :
-                    sscItem.repairDate)),
-                sscTableOPCode: () => (h("div", { class: "table-cell-container table-cell-labors-container" }, (sscItem === null || sscItem === void 0 ? void 0 : sscItem.labors.length)
-                    ? sscItem === null || sscItem === void 0 ? void 0 : sscItem.labors.map(labor => (h("div", { key: labor === null || labor === void 0 ? void 0 : labor.laborCode, class: "success" }, labor === null || labor === void 0 ? void 0 : labor.laborCode)))
-                    : '...')),
-                sscTablePartNumber: () => (h("div", { class: "table-cell-container table-cell-parts-container" }, (sscItem === null || sscItem === void 0 ? void 0 : sscItem.parts.length)
-                    ? sscItem === null || sscItem === void 0 ? void 0 : sscItem.parts.map(part => {
-                        // Three availability states: in stock (green check), not in stock (red cross), or not checked
-                        // — no Hub stock scope, or a repaired recall — which shows neutral grey with no icon.
-                        const state = (part === null || part === void 0 ? void 0 : part.isAvailable) === true ? 'available' : (part === null || part === void 0 ? void 0 : part.isAvailable) === false ? 'unavailable' : 'unchecked';
-                        return (h("div", { key: part === null || part === void 0 ? void 0 : part.partNumber, class: cn('part-chip', state) }, state !== 'unchecked' && h("img", { class: "part-chip-icon", src: state === 'available' ? CheckIcon : XIcon }), h("span", null, part === null || part === void 0 ? void 0 : part.partNumber)));
-                    })
-                    : '...')),
-            }));
-        const templateRow = {
-            sscTableOPCode: () => h("div", { class: "h-[25px]" }),
-            sscTablePartNumber: () => h("div", { class: "h-[25px]" }),
-            sscTableRepairStatus: () => h("div", { class: "h-[25px]" }),
+    panelState() {
+        var _a, _b, _c;
+        return {
+            locale: this.locale,
+            vehicleLoaded: !!this.vehicleLookup,
+            authorized: (_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.isAuthorized,
+            campaigns: (_b = this.vehicleLookup) === null || _b === void 0 ? void 0 : _b.ssc,
+            skipped: !!this.skippedVin,
+            checkAvailable: this.recaptchaKey !== '',
+            checkStatus: (_c = this.recaptchaRes) === null || _c === void 0 ? void 0 : _c.status,
         };
-        return (h(Host, { translate: "no" }, h(VehicleInfoLayout, { isError: this.isError, coreOnly: this.coreOnly, isLoading: this.isLoading, header: (_c = this.vehicleLookup) === null || _c === void 0 ? void 0 : _c.vin, direction: this.locale.sharedLocales.direction, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard }, h("div", { class: "p-[16px]" }, this.showWarranty && (h(CardsContainer, { isLoading: this.isLoading, warrantyLocale: this.locale, vehicleInformation: this.vehicleLookup, isAuthorized: (_d = this.vehicleLookup) === null || _d === void 0 ? void 0 : _d.isAuthorized, unInvoicedByBrokerName: this.unInvoicedByBrokerName })), h("div", { class: "h-[8px]" }), h("flexible-container", { isOpened: this.showRecaptcha, classes: cn('w-fit mx-auto shift-skeleton', { loading: !this.showRecaptcha || this.isLoading }) }, h("div", { style: { height: 'auto' }, class: "recaptcha-container" }, this.useMockRecaptchaWidget ? (h("div", { ref: el => (this.recaptchaPlaceholderRef = el), onClick: this.handleDevRecaptchaClick, class: cn('dev-recaptcha', { 'dev-recaptcha-disabled': this.devRecaptchaChecked }) }, h("div", { class: cn('dev-recaptcha-checkbox', { checked: this.devRecaptchaChecked }) }, this.devRecaptchaChecked && h("span", { class: "dev-recaptcha-checkmark" }, "\u2713")), h("div", { class: "dev-recaptcha-label" }, "I'm not a robot"), h("div", { class: "dev-recaptcha-brand" }, h("div", { class: "dev-recaptcha-brand-name" }, "reCAPTCHA"), h("div", { class: "dev-recaptcha-brand-mock" }, "(dev mock)")))) : (h("div", { ref: el => (this.recaptchaPlaceholderRef = el), style: { minWidth: '302px', minHeight: '76px' } }))), this.recaptchaRes && (h("div", { class: cn('recaptcha-response', ((_e = this.recaptchaRes) === null || _e === void 0 ? void 0 : _e.status) === 'recallExists' ? 'reject-card ' : ((_f = this.recaptchaRes) === null || _f === void 0 ? void 0 : _f.status) === 'noRecall' ? 'success-card ' : 'warning-card ') }, this.locale[(_g = this.recaptchaRes) === null || _g === void 0 ? void 0 : _g.status])))), h("flexible-container", { isOpened: this.checkingUnauthorizedSSC, classes: "w-fit mx-auto" }, h("div", { class: "pt-[16px]" }, h("div", { class: "flex shift-skeleton flex-col gap-[8px]" }, h("strong", null, this.locale.checkingTMC), h("div", { class: "relative pt-[40px]" }, h("loading-spinner", { isLoading: this.checkingUnauthorizedSSC }))))), this.showSsc && (h("div", { class: "mt-[32px] w-full" }, h("div", { class: "bg-[#f6f6f6] h-[50px] flex items-center justify-center px-[16px] font-bold text-[18px]" }, this.locale.sscCampings), h("div", { class: "overflow-x-auto" }, h("information-table", { allowAutoWidth: true, isLoading: this.isLoading, templateRow: templateRow, rows: rows, headers: tableHeaders })))))));
     }
-    static get is() { return "vehicle-warranty-details"; }
+    render() {
+        var _a, _b;
+        const state = this.panelState();
+        this.retainBody(panelBody(state));
+        // The widget block for an unauthorized vehicle: the stand-in or the real widget's anchor. It
+        // stays rendered after the manufacturer has answered — the body shuts over it and it leaves
+        // with the body — and is dropped with the check on the next lookup. Rendered by the campaigns
+        // panel inside its "check" body only, so it can never sit beside a list.
+        const manufacturerCheck = this.showRecaptcha && (h("div", { key: 'dcbff9ed43160482ef7b6573ae1d59aa5daa751d', class: "ssc-check-widget" }, h("div", { key: '3e9e0f41e871b4aa60a557d1d517e9d012e04ed3', class: "recaptcha-container" }, this.useMockRecaptchaWidget ? (h("div", { ref: el => (this.recaptchaPlaceholderRef = el), onClick: this.handleDevRecaptchaClick, class: cn('dev-recaptcha', { 'dev-recaptcha-disabled': this.devRecaptchaChecked }) }, h("div", { class: cn('dev-recaptcha-checkbox', { checked: this.devRecaptchaChecked }) }, this.devRecaptchaChecked && h("span", { class: "dev-recaptcha-checkmark" }, "\u2713")), h("div", { class: "dev-recaptcha-label" }, "I'm not a robot"), h("div", { class: "dev-recaptcha-brand" }, h("div", { class: "dev-recaptcha-brand-name" }, "reCAPTCHA"), h("div", { class: "dev-recaptcha-brand-mock" }, "(dev mock)")))) : (h("div", { ref: el => (this.recaptchaPlaceholderRef = el), style: { minWidth: '302px', minHeight: '76px' } })))));
+        return (h(Host, { key: '55baf0475afa6d3f4a37c65c2ad4a5f1c177e334', translate: "no" }, h(VehicleInfoLayout, { key: '08a2eee97c9e97a0eb9d7a9bd99c0055b1a19fd0', isError: this.isError, coreOnly: this.coreOnly, isLoading: this.isLoading, header: (_b = (_a = this.vehicleLookup) === null || _a === void 0 ? void 0 : _a.vin) !== null && _b !== void 0 ? _b : this.skippedVin, direction: this.locale.sharedLocales.direction, errorMessage: this.locale.sharedLocales.errors[this.errorMessage] || this.locale.sharedLocales.errors.wildCard }, h("div", { key: '355b56a6bf16cab6b8eeaebd362fd7d0fdf37efa', class: "ssc-panel", dir: this.locale.sharedLocales.direction }, h(SscCampaigns, Object.assign({ key: '3b5ae414e28c472fad1deeaa38238cd71aee72e2' }, state, { loading: this.isLoading || this.leaving, checking: this.checkingUnauthorizedSSC, retainedBody: this.retainedBody, onRunLookup: this.runSkippedLookup, showTrace: this.showTrace, openTraceKey: this.openTraceKey, traces: this.traces, traceLoading: this.traceLoading, traceError: this.traceError, onToggleTrace: this.toggleTrace }), manufacturerCheck)))));
+    }
+    static get is() { return "vehicle-ssc"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["vehicle-warranty-details.css"]
+            "$": ["vehicle-ssc.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["vehicle-warranty-details.css"]
+            "$": ["vehicle-ssc.css"]
         };
     }
     static get properties() {
@@ -408,7 +723,7 @@ export class VehicleWarrantyDetails {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Static headers the host set on the element. The floor every request starts from."
                 },
                 "getter": false,
                 "setter": false,
@@ -434,6 +749,70 @@ export class VehicleWarrantyDetails {
                 "attribute": "query-string",
                 "defaultValue": "''"
             },
+            "lookupQueryString": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Appended to the campaign lookup request only, never to the trace request. A wrapper passes its\n`sscQueryString` \u2014 typically a lookup-logging flag \u2014 here rather than into `queryString`, so\nopening a campaign's evidence (a re-read of a lookup that was already logged) is never counted\nas another lookup. The host's endpoint must refuse to log traced requests as well."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "lookup-query-string",
+                "defaultValue": "''"
+            },
+            "requestHeadersProvider": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "RequestHeadersProvider",
+                    "resolved": "() => object | Promise<object>",
+                    "references": {
+                        "RequestHeadersProvider": {
+                            "location": "import",
+                            "path": "~features/vehicle-lookup-component",
+                            "id": "src/features/vehicle-lookup-component/index.ts::RequestHeadersProvider",
+                            "referenceLocation": "RequestHeadersProvider"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Asked for the current headers before every request this component makes itself; lets a host refresh its token on demand."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "blazorRequestHeadersProvider": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Name of a [JSInvokable] method on the Blazor reference that answers with the current headers."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "blazor-request-headers-provider",
+                "defaultValue": "''"
+            },
             "errorCallback": {
                 "type": "string",
                 "mutable": false,
@@ -550,7 +929,7 @@ export class VehicleWarrantyDetails {
                 "reflect": false,
                 "attribute": "unauthorized-ssc-lookup-response"
             },
-            "showSsc": {
+            "showTrace": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -562,12 +941,12 @@ export class VehicleWarrantyDetails {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Shows a per-campaign \"why this status?\" control. The host gates it on its own permission check; the trace lists claim and invoice details."
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "show-ssc",
+                "attribute": "show-trace",
                 "defaultValue": "false"
             },
             "recaptchaKey": {
@@ -602,7 +981,7 @@ export class VehicleWarrantyDetails {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Renders a click-to-pass stand-in for the reCAPTCHA widget. Implied by `isDev`; the real widget is only ever used in production mode."
                 },
                 "getter": false,
                 "setter": false,
@@ -610,26 +989,6 @@ export class VehicleWarrantyDetails {
                 "attribute": "mock-recaptcha",
                 "defaultValue": "false"
             },
-            "showWarranty": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": ""
-                },
-                "getter": false,
-                "setter": false,
-                "reflect": false,
-                "attribute": "show-warranty",
-                "defaultValue": "false"
-            },
             "unauthorizedSscLookupBaseUrl": {
                 "type": "string",
                 "mutable": false,
@@ -899,12 +1258,17 @@ export class VehicleWarrantyDetails {
             "errorMessage": {},
             "isLoading": {},
             "vehicleLookup": {},
+            "skippedVin": {},
+            "leaving": {},
             "blazorRef": {},
             "showRecaptcha": {},
-            "unInvoicedByBrokerName": {},
             "checkingUnauthorizedSSC": {},
             "devRecaptchaChecked": {},
-            "recaptchaRes": {}
+            "recaptchaRes": {},
+            "openTraceKey": {},
+            "traces": {},
+            "traceLoading": {},
+            "traceError": {}
         };
     }
     static get methods() {
@@ -1007,7 +1371,28 @@ export class VehicleWarrantyDetails {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Back to \"no vehicle\": the body shuts over what it holds, then the panel is emptied unseen.",
+                    "tags": []
+                }
+            },
+            "skipLookup": {
+                "complexType": {
+                    "signature": "(vin: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "vin",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "The other panels were given a vehicle but this one's own lookup was not run for it \u2014 a wrapper\nwith `sscQueryString` only counts the SSC tab's own request as a campaign check. The panel says\nso and offers to run the check itself; the VIN is kept for that.",
                     "tags": []
                 }
             },
@@ -1048,9 +1433,18 @@ export class VehicleWarrantyDetails {
             }, {
                 "propName": "isLoading",
                 "methodName": "onLoadingChange"
+            }, {
+                "propName": "isDev",
+                "methodName": "onRecaptchaModeChange"
+            }, {
+                "propName": "mockRecaptcha",
+                "methodName": "onRecaptchaModeChange"
             }, {
                 "propName": "showRecaptcha",
-                "methodName": "onShowRecaptchaChange"
+                "methodName": "onRecaptchaStateChange"
+            }, {
+                "propName": "recaptchaRes",
+                "methodName": "onRecaptchaStateChange"
             }];
     }
 }