@cartbot/vehicle-search-beta 3.0.19 → 3.0.21

package/dist/js/vehicle-search.es.js

@@ -1,5 +1,5 @@
-import { jsx as a, jsxs as A, Fragment as $e } from "react/jsx-runtime";
-import { useState as M, useEffect as B, useRef as Z, useCallback as N, useMemo as ut } from "react";
+import { jsx as a, jsxs as E, Fragment as $e } from "react/jsx-runtime";
+import { useState as A, useEffect as B, useRef as Z, useCallback as N, useMemo as ut } from "react";
 import mt from "react-dom";
 import ft from "js-cookie";
 import { Combobox as gt, ComboboxInput as bt, ComboboxButton as wt, ComboboxOptions as yt, ComboboxOption as xt } from "@headlessui/react";
@@ -23,7 +23,7 @@ function St({ className: b }) {
         width: "auto",
         height: "100%"
       },
-      children: /* @__PURE__ */ A("g", { children: [
+      children: /* @__PURE__ */ E("g", { children: [
         /* @__PURE__ */ a(
           "rect",
           {
@@ -127,7 +127,7 @@ function X({
   shouldBeActive: T = !1
   // True when parent fields are selected and this field tried to load
 }) {
-  const [re, u] = M(""), [y, C] = M(p || null), q = (s) => {
+  const [re, u] = A(""), [y, C] = A(p || null), q = (s) => {
     C(s), u(""), !(s && s.value === (p == null ? void 0 : p.value)) && U(s);
   }, ee = (s) => {
     s.preventDefault(), s.stopPropagation(), u(""), C(null), U("");
@@ -152,7 +152,7 @@ function X({
     (s, F) => s.value.localeCompare(F.value, "en", { numeric: !0 })
   ), f = D.concat(f));
   const g = !f || f.length === 0;
-  return /* @__PURE__ */ A("div", { className: "vs:relative vs:flex vs:flex-col", children: [
+  return /* @__PURE__ */ E("div", { className: "vs:relative vs:flex vs:flex-col", children: [
     O && /* @__PURE__ */ a(
       "span",
       {
@@ -160,8 +160,8 @@ function X({
         children: b
       }
     ),
-    _ && /* @__PURE__ */ A("div", { className: "vs:relative vs:flex vs:flex-col", children: [
-      /* @__PURE__ */ A(
+    _ && /* @__PURE__ */ E("div", { className: "vs:relative vs:flex vs:flex-col", children: [
+      /* @__PURE__ */ E(
         "select",
         {
           onChange: (s) => {
@@ -176,7 +176,7 @@ function X({
           value: y ? y.value : "",
           children: [
             /* @__PURE__ */ a("option", { value: "", disabled: !0, children: b }),
-            D.length > 0 ? /* @__PURE__ */ A($e, { children: [
+            D.length > 0 ? /* @__PURE__ */ E($e, { children: [
               /* @__PURE__ */ a("optgroup", { label: `Popular ${Ke(b)}`, children: D.map((s) => /* @__PURE__ */ a("option", { value: s.refinement, children: s.value }, s.value)) }),
               /* @__PURE__ */ a("optgroup", { label: `All ${Ke(b)}`, children: f.filter(
                 (s) => !D.some(
@@ -209,7 +209,7 @@ function X({
         }
       )
     ] }),
-    !_ && /* @__PURE__ */ A(
+    !_ && /* @__PURE__ */ E(
       gt,
       {
         value: y || null,
@@ -218,7 +218,7 @@ function X({
         disabled: g,
         immediate: !0,
         children: [
-          /* @__PURE__ */ A("div", { className: "vs:flex vs:h-full", children: [
+          /* @__PURE__ */ E("div", { className: "vs:flex vs:h-full", children: [
             /* @__PURE__ */ a(
               bt,
               {
@@ -231,7 +231,7 @@ function X({
                 title: b
               }
             ),
-            /* @__PURE__ */ A("div", { className: "vs:absolute vs:pointer-events-none vs:h-full vs:right-0 vs:flex vs:space-x-[calc(var(--partbot-padding)*0.25)] vs:items-center", children: [
+            /* @__PURE__ */ E("div", { className: "vs:absolute vs:pointer-events-none vs:h-full vs:right-0 vs:flex vs:space-x-[calc(var(--partbot-padding)*0.25)] vs:items-center", children: [
               (y == null ? void 0 : y.value) && /* @__PURE__ */ a(
                 "button",
                 {
@@ -285,7 +285,7 @@ function X({
                       z ? "vs:bg-[rgb(var(--partbot-theme))] vs:text-[rgb(var(--partbot-button-label-color))]" : "vs:bg-white vs:text-stone-900 vs:hover:bg-theme vs:hover:text-button-label",
                       F && "vs:font-bold!"
                     ),
-                    children: ({ selected: z }) => /* @__PURE__ */ A("div", { className: "vs:flex vs:w-full vs:items-center vs:justify-between", children: [
+                    children: ({ selected: z }) => /* @__PURE__ */ E("div", { className: "vs:flex vs:w-full vs:items-center vs:justify-between", children: [
                       /* @__PURE__ */ a(
                         "span",
                         {
@@ -328,7 +328,7 @@ function X({
     )
   ] });
 }
-const $t = "3.0.19";
+const $t = "3.0.21";
 console.info(
   `Vehicle Search v${$t} powered by Partbot https://mmyvs.partbot.io`
 );
@@ -377,7 +377,7 @@ function Mt({
   mobileButtonLabel: s = "Select Vehicle"
   // Label for mobile drawer trigger button
 }) {
-  const F = Z(null), z = Z(null), ie = Z(null), S = Z(null), K = Z(null), E = Z(null), Q = Z(null), w = Z(null), W = Z(null), j = Z(!1), x = f === "YMM", [le, ve] = M([]), [fe, ce] = M([]), [de, he] = M([]), [Le, ge] = M([]), [Ie, be] = M([]), [Ve, we] = M([]), [De, ye] = M([]), [Fe, xe] = M([]), Je = Z([]), [se, ke] = M([]), [e, Y] = M({
+  const F = Z(null), z = Z(null), ie = Z(null), S = Z(null), K = Z(null), j = Z(null), Q = Z(null), w = Z(null), W = Z(null), M = Z(!1), x = f === "YMM", [le, ve] = A([]), [fe, ce] = A([]), [de, he] = A([]), [Le, ge] = A([]), [Ie, be] = A([]), [Ve, we] = A([]), [De, ye] = A([]), [Fe, xe] = A([]), Je = Z([]), [se, ke] = A([]), [e, Y] = A({
     make: null,
     model: null,
     year: null,
@@ -386,7 +386,7 @@ function Mt({
     variant: null,
     engine: null,
     engine_capacity: null
-  }), [Xe, Me] = M(!1), Ue = Z([
+  }), [Xe, Me] = A(!1), Ue = Z([
     "body",
     "series",
     "variant",
@@ -397,7 +397,7 @@ function Mt({
       var r;
       return (r = Ue.current) == null ? void 0 : r.includes(t);
     }) : null
-  ), [J, Ge] = M(!1);
+  ), [J, Ge] = A(!1);
   B(() => {
     const t = navigator.userAgent;
     Ge(
@@ -412,7 +412,7 @@ function Mt({
       disable_session_recording: !1
     });
   }, []);
-  const [oe, et] = M({}), [Nt, tt] = M(""), Re = N(async () => {
+  const [oe, et] = A({}), [Nt, tt] = A(""), Re = N(async () => {
     if (!b)
       return;
     const r = `${D ? "https://api.cartbot.io" : "https://api.partbot.io"}/v1/vehicles/auth`;
@@ -452,7 +452,7 @@ function Mt({
       z.current = o, ie.current = (l || []).map((m) => ({
         ...m,
         refinement: m.value
-      })), G && n ? typeof n == "object" && !Array.isArray(n) ? S.current = n : Array.isArray(n) ? S.current = n.map((m) => m && m.value ? String(m.value).trim() : "").filter(Boolean) : S.current = [] : S.current = [], K.current = Array.isArray(ae) ? ae.map((m) => String(m).trim().toUpperCase()) : null, E.current = h || null, et({
+      })), G && n ? typeof n == "object" && !Array.isArray(n) ? S.current = n : Array.isArray(n) ? S.current = n.map((m) => m && m.value ? String(m.value).trim() : "").filter(Boolean) : S.current = [] : S.current = [], K.current = Array.isArray(ae) ? ae.map((m) => String(m).trim().toUpperCase()) : null, j.current = h || null, et({
         searchKey: "eeace38b64f52bf56ebb4fe8bd5837b3cd6c0ff9d7e272f76449d94b80cba86b",
         indexName: "otto_v1_vehicles_production"
       });
@@ -483,7 +483,7 @@ function Mt({
       };
     }
   }, [oe.searchKey, b]);
-  const [H, rt] = M(!1), Oe = N(() => {
+  const [H, rt] = A(!1), Oe = N(() => {
     function t(n) {
       if (!n) return "rgba(0,0,0,1)";
       var c = r(), d = window.getComputedStyle(n).backgroundColor;
@@ -565,7 +565,7 @@ function Mt({
     const r = new CustomEvent("vehicle-search-submit", {
       detail: t
     });
-    window.dispatchEvent(r), setTimeout(() => {
+    window.dispatchEvent(r), document.dispatchEvent(r), setTimeout(() => {
       Me(!1);
     }, 900);
   }, [se, q]), Te = N(() => {
@@ -573,17 +573,14 @@ function Mt({
     const t = {
       vehicle_ids: se,
       vehicle: (i = e == null ? void 0 : e.make) != null && i.value ? e : {},
-      userSelected: j.current
+      userSelected: M.current
       // Flag to indicate if user actively selected
     };
     u && u(t);
     const r = new CustomEvent("vehicle-search-change", {
       detail: t
     });
-    if (console.log(
-      "[VehicleSearch] Dispatching vehicle-search-change:",
-      t
-    ), j.current === !0) {
+    if (M.current === !0) {
       localStorage.removeItem("partbot_plate_details");
       const ae = JSON.stringify({
         description: `${((o = e.make) == null ? void 0 : o.value) || ""} ${((l = e.model) == null ? void 0 : l.value) || ""} ${((n = e.year) == null ? void 0 : n.value) || ""} ${((c = e.body) == null ? void 0 : c.value) || ""} ${((d = e.series) == null ? void 0 : d.value) || ""} ${(($ = e.variant) == null ? void 0 : $.value) || ""} ${((te = e.engine) == null ? void 0 : te.value) || ""} ${((pe = e.engine_capacity) == null ? void 0 : pe.value) || ""}`.trim(),
@@ -597,7 +594,7 @@ function Mt({
         secure: !0
       });
     }
-    window.dispatchEvent(r), console.log("[VehicleSearch] Event dispatched to window"), Je.current = se, setTimeout(() => {
+    window.dispatchEvent(r), document.dispatchEvent(r), Je.current = se, setTimeout(() => {
       Me(!1);
     }, 900);
   }, [se, u]), _e = ut(
@@ -609,11 +606,8 @@ function Mt({
   }, [se, _e]), B(() => () => {
     _e.cancel();
   }, [_e]), B(() => {
-    const t = (r) => {
-      console.log(
-        "[VehicleSearch] Received plate-search-change:",
-        r.detail
-      ), console.log("[VehicleSearch] Clearing vehicle selection"), Y({
+    const t = () => {
+      M.current = !1, Y({
         make: null,
         model: null,
         year: null,
@@ -624,9 +618,7 @@ function Mt({
         engine_capacity: null
       }), ke([]);
     };
-    return console.log(
-      "[VehicleSearch] Adding plate-search-change listener to window"
-    ), window.addEventListener("plate-search-change", t), () => {
+    return window.addEventListener("plate-search-change", t), () => {
       window.removeEventListener(
         "plate-search-change",
         t
@@ -652,7 +644,7 @@ function Mt({
   }, [Oe]);
   const Ze = N(
     (t) => {
-      j.current = !0, ce([]), !x && !g && he([]), ge([]), be([]), we([]), xe([]), ye([]), Y((r) => ({
+      M.current = !0, ce([]), !x && !g && he([]), ge([]), be([]), we([]), xe([]), ye([]), Y((r) => ({
         make: t,
         year: x || g ? r.year : null
       })), L({
@@ -679,7 +671,7 @@ function Mt({
     [L, x, g]
   ), Ye = N(
     (t) => {
-      j.current = !0, Y((r) => ({
+      M.current = !0, Y((r) => ({
         ...r,
         model: t !== "" ? t : null,
         year: x || g ? r.year : null,
@@ -705,7 +697,7 @@ function Mt({
     [L, x, g]
   ), He = N(
     (t) => {
-      j.current = !0, x ? (ve([]), ce([]), Y({
+      M.current = !0, x ? (ve([]), ce([]), Y({
         year: t !== "" ? t : null
       }), (!t || t === "") && he([])) : Y(g ? (r) => ({
         ...r,
@@ -735,7 +727,7 @@ function Mt({
     [L, x, g]
   ), it = N(
     (t) => {
-      j.current = !0, Y((r) => ({
+      M.current = !0, Y((r) => ({
         ...r,
         body: t !== "" ? t : null
       })), L({
@@ -746,7 +738,7 @@ function Mt({
     [L]
   ), st = N(
     (t) => {
-      j.current = !0, Y((r) => ({
+      M.current = !0, Y((r) => ({
         ...r,
         series: t !== "" ? t : null
       })), L({
@@ -757,7 +749,7 @@ function Mt({
     [L]
   ), lt = N(
     (t) => {
-      j.current = !0, Y((r) => ({
+      M.current = !0, Y((r) => ({
         ...r,
         variant: t !== "" ? t : null
       })), L({
@@ -768,7 +760,7 @@ function Mt({
     [L]
   ), ct = N(
     (t) => {
-      j.current = !0, Y((r) => ({
+      M.current = !0, Y((r) => ({
         ...r,
         engine: t !== "" ? t : null
       })), L({
@@ -779,7 +771,7 @@ function Mt({
     [L]
   ), dt = N(
     (t) => {
-      j.current = !0, Y((r) => ({
+      M.current = !0, Y((r) => ({
         ...r,
         engine_capacity: t !== "" ? t : null
       })), L({
@@ -867,7 +859,7 @@ function Mt({
             popularity: 0
             // Popularity will be used from PostHog for sorting
           })
-        ), o = (t = E.current) == null ? void 0 : t[r];
+        ), o = (t = j.current) == null ? void 0 : t[r];
         if (o && Array.isArray(o)) {
           const l = new Map(
             o.map((n, c) => [
@@ -932,7 +924,7 @@ function Mt({
           refinement: h.model.match(/[^>]*$/)[0].trim(),
           popularity: h.model_popularity
         }));
-        const $ = (pe = e.make) == null ? void 0 : pe.refinement, te = (ae = E.current) == null ? void 0 : ae[$];
+        const $ = (pe = e.make) == null ? void 0 : pe.refinement, te = (ae = j.current) == null ? void 0 : ae[$];
         if (te && Array.isArray(te) && te.length > 0) {
           const h = new Set(
             te.map((m) => String(m).trim().toUpperCase())
@@ -1092,13 +1084,13 @@ function Mt({
     e.year,
     g
   ]);
-  const [ze, Ee] = M(!1);
+  const [ze, Ee] = A(!1);
   return B(() => {
     if (T)
       return ze ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
         document.body.style.overflow = "";
       };
-  }, [ze, T]), /* @__PURE__ */ A($e, { children: [
+  }, [ze, T]), /* @__PURE__ */ E($e, { children: [
     T && /* @__PURE__ */ a(
       "button",
       {
@@ -1121,7 +1113,7 @@ function Mt({
         )
       }
     ),
-    /* @__PURE__ */ A(
+    /* @__PURE__ */ E(
       "div",
       {
         className: ne(
@@ -1130,9 +1122,9 @@ function Mt({
           "w-full"
         ),
         children: [
-          T && /* @__PURE__ */ A("div", { className: "vs:flex vs:justify-between vs:items-center vs:pb-4 vs:font-bold vs:text-white vs:md:hidden", children: [
+          T && /* @__PURE__ */ E("div", { className: "vs:flex vs:justify-between vs:items-center vs:pb-4 vs:font-bold vs:text-white vs:md:hidden", children: [
             /* @__PURE__ */ a("span", { children: "Select Vehicle" }),
-            /* @__PURE__ */ A(
+            /* @__PURE__ */ E(
               "button",
               {
                 onClick: () => Ee(!1),
@@ -1154,7 +1146,7 @@ function Mt({
               }
             )
           ] }),
-          /* @__PURE__ */ A(
+          /* @__PURE__ */ E(
             "div",
             {
               ref: F,
@@ -1164,7 +1156,7 @@ function Mt({
                 "vs:w-full vs:transition vs:lg:mx-auto"
               ),
               children: [
-                x ? /* @__PURE__ */ A($e, { children: [
+                x ? /* @__PURE__ */ E($e, { children: [
                   /* @__PURE__ */ a(
                     X,
                     {
@@ -1212,7 +1204,7 @@ function Mt({
                       shouldBeActive: !!e.make
                     }
                   )
-                ] }) : /* @__PURE__ */ A($e, { children: [
+                ] }) : /* @__PURE__ */ E($e, { children: [
                   /* @__PURE__ */ a(
                     X,
                     {
@@ -1352,7 +1344,7 @@ function Mt({
                   }
                   return r;
                 }),
-                C && /* @__PURE__ */ a("div", { className: "vs:flex vs:h-full vs:flex-col vs:justify-end vs:md:col-span-3 vs:lg:col-span-1", children: /* @__PURE__ */ A(
+                C && /* @__PURE__ */ a("div", { className: "vs:flex vs:h-full vs:flex-col vs:justify-end vs:md:col-span-3 vs:lg:col-span-1", children: /* @__PURE__ */ E(
                   "button",
                   {
                     className: "vehicle-search-btn",
@@ -1376,7 +1368,7 @@ function Mt({
                 I === "row" ? "vs:md:items-end vs:md:justify-end" : "vs:md:justify-center",
                 "vs:mt-4 vs:md:mt-3 vs:md:pr-1.5"
               ),
-              children: /* @__PURE__ */ A(
+              children: /* @__PURE__ */ E(
                 "a",
                 {
                   href: `https://use.partbot.io/?ref=${// append referrer to url, just the top level domain
@@ -1484,21 +1476,21 @@ const Et = "/css/vehicle-search.css", Yt = Et;
 class jt extends HTMLElement {
   connectedCallback() {
     if (!document.getElementById("vehicle-search-inter-font")) {
-      const E = document.createElement("link");
-      E.id = "vehicle-search-inter-font", E.rel = "stylesheet", E.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap", document.head.appendChild(E);
+      const j = document.createElement("link");
+      j.id = "vehicle-search-inter-font", j.rel = "stylesheet", j.href = "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap", document.head.appendChild(j);
     }
     let v = document.createElement("style");
     v.textContent = zt;
-    const p = document.createElement("div"), U = this.attachShadow({ mode: "open" }), I = (E, Q, w) => {
+    const p = document.createElement("div"), U = this.attachShadow({ mode: "open" }), I = (j, Q, w) => {
       let W;
       if (this.hasAttribute(Q)) {
-        const j = this.getAttribute(Q);
-        if (/^#[0-9A-F]{6}$/i.test(j)) {
-          const x = parseInt(j.slice(1, 3), 16), le = parseInt(j.slice(3, 5), 16), ve = parseInt(j.slice(5, 7), 16);
+        const M = this.getAttribute(Q);
+        if (/^#[0-9A-F]{6}$/i.test(M)) {
+          const x = parseInt(M.slice(1, 3), 16), le = parseInt(M.slice(3, 5), 16), ve = parseInt(M.slice(5, 7), 16);
           W = `${x} ${le} ${ve}`;
         }
       }
-      return W = W || w, `:host { --${E}: ${W}; } .partbot-mmyvs-container { --${E}: ${W}; }`;
+      return W = W || w, `:host { --${j}: ${W}; } .partbot-mmyvs-container { --${j}: ${W}; }`;
     };
     let R = I(
       "partbot-theme",
@@ -1531,8 +1523,8 @@ class jt extends HTMLElement {
     let D = "229 231 235";
     if (f)
       if (/^#[0-9A-F]{6}$/i.test(f)) {
-        const E = parseInt(f.slice(1, 3), 16), Q = parseInt(f.slice(3, 5), 16), w = parseInt(f.slice(5, 7), 16);
-        D = `${E} ${Q} ${w}`;
+        const j = parseInt(f.slice(1, 3), 16), Q = parseInt(f.slice(3, 5), 16), w = parseInt(f.slice(5, 7), 16);
+        D = `${j} ${Q} ${w}`;
       } else /^\d+\s+\d+\s+\d+$/.test(f) && (D = f);
     let g = `:host { --partbot-input-border-color: ${D}; } .partbot-mmyvs-container { --partbot-input-border-color: ${D}; }`;
     const s = this.getAttribute("data-input-border-width") || "1px";
@@ -1544,10 +1536,10 @@ class jt extends HTMLElement {
       return;
     }
     const ie = this.attributes, S = {};
-    for (let E = 0; E < ie.length; E++) {
-      const { name: Q, value: w } = ie[E];
+    for (let j = 0; j < ie.length; j++) {
+      const { name: Q, value: w } = ie[j];
       if (Q.startsWith("data-")) {
-        const W = Q.slice(5).replace(/-([a-z])/g, (j) => j[1].toUpperCase());
+        const W = Q.slice(5).replace(/-([a-z])/g, (M) => M[1].toUpperCase());
         S[W] = w === "true" ? !0 : w === "false" ? !1 : w;
       }
     }