@forbespro/lead-agent
Version:
Lead Chat Agent React Component
115 lines (114 loc) • 4.85 kB
JavaScript
import { jsxs as f, jsx as l } from "react/jsx-runtime";
import * as r from "react";
import { useDebounce as P } from "./index19.js";
import { Input as D } from "./index6.js";
import T from "./index20.js";
import U from "./index21.js";
import $ from "./index22.js";
const B = r.forwardRef(
({ id: I, name: N, value: b, onChange: y, onSelect: C, placeholder: S = "Search for an address...", children: L, onKeyDown: k }, A) => {
const [g, a] = r.useState(!1), [w, v] = r.useState(""), [n] = P(w, 500), [d, c] = r.useState(!1), [i, p] = r.useState([]), [m, x] = r.useState(null), u = r.useRef(null), j = (e) => {
v(e.target.value), y(e.target.value), x(null), e.target.value && a(!0);
};
r.useEffect(() => {
async function e() {
if (!n) {
p([]);
return;
}
c(!0);
try {
const t = await fetch(`/api/address?query=${encodeURIComponent(n)}`);
if (!t.ok)
throw new Error("Failed to fetch addresses");
const s = await t.json();
p(s.Items || []);
} catch (t) {
console.error("Failed to fetch addresses:", t), p([]);
} finally {
c(!1);
}
}
e();
}, [n]);
const R = async (e) => {
c(!0);
try {
let t;
if (e.Type === "Postcode" ? t = await fetch(`/api/address?postcodeId=${encodeURIComponent(e.Id)}`) : t = await fetch(`/api/address?id=${encodeURIComponent(e.Id)}`), !t.ok)
throw new Error("Failed to retrieve address");
const s = await t.json();
if (s.Items && s.Items.length > 1)
p(s.Items), a(!0);
else if (s.Items && s.Items.length === 1) {
const o = s.Items[0];
x(o);
const h = E(o);
v(h), y(h);
const F = {
street: [o.Line1, o.Line2].filter(Boolean).join(", "),
city: o.City || "",
state: o.ProvinceName || "",
postalCode: o.PostalCode || "",
country: o.CountryName || ""
};
C(h, F), a(!1);
}
} catch (t) {
console.error("Failed to retrieve address:", t);
} finally {
c(!1);
}
}, E = (e) => [e.Line1, e.Line2, e.City, e.PostalCode].filter(Boolean).join(", ");
return r.useEffect(() => {
const e = (t) => {
u.current && !u.current.contains(t.target) && a(!1);
};
return document.addEventListener("mousedown", e), () => {
document.removeEventListener("mousedown", e);
};
}, []), /* @__PURE__ */ f("div", { className: "fpl-relative fpl-w-full", ref: u, children: [
/* @__PURE__ */ f("div", { className: "fpl-flex fpl-items-center fpl-gap-2", children: [
/* @__PURE__ */ l(
D,
{
id: I,
name: N,
ref: A,
value: w || b,
onKeyDown: k,
onChange: j,
placeholder: S,
onFocus: () => n && a(!0),
className: "fpl-w-full fpl-mb-2"
}
),
L
] }),
g && (i.length > 0 || d) && /* @__PURE__ */ l("div", { className: "fpl-max-h-60 fpl-overflow-y-auto fpl-border fpl-rounded-md fpl-bg-gray-50 fpl-mt-1", children: d ? /* @__PURE__ */ f("div", { className: "fpl-flex fpl-items-center fpl-justify-center fpl-p-4 fpl-text-gray-500", children: [
/* @__PURE__ */ l(T, { className: "fpl-h-4 fpl-w-4 fpl-mr-2 fpl-animate-spin" }),
/* @__PURE__ */ l("span", { children: "Loading addresses..." })
] }) : i.map((e) => /* @__PURE__ */ f(
"button",
{
onClick: () => R(e),
className: "fpl-w-full fpl-px-4 fpl-py-2 fpl-text-left hover:bg-gray-100 fpl-border-b focus:border-b-0 fpl-flex fpl-items-center",
children: [
(m == null ? void 0 : m.Id) === e.Id && /* @__PURE__ */ l(U, { className: "fpl-h-4 fpl-w-4 fpl-mr-2 fpl-text-primary fpl-flex-shrink-0" }),
/* @__PURE__ */ f("div", { className: "fpl-flex-grow", children: [
/* @__PURE__ */ l("span", { className: "fpl-block", children: e.Text }),
e.Description && /* @__PURE__ */ l("span", { className: "fpl-block fpl-text-xs fpl-text-gray-500", children: e.Description })
] }),
e.Type === "Postcode" && /* @__PURE__ */ l($, { className: "fpl-h-4 fpl-w-4 fpl-ml-2 fpl-text-gray-400 fpl-flex-shrink-0" })
]
},
e.Id
)) }),
g && i.length === 0 && n && !d && /* @__PURE__ */ l("div", { className: "fpl-max-h-60 fpl-overflow-y-auto fpl-border fpl-rounded-md fpl-bg-gray-50 fpl-mt-1", children: /* @__PURE__ */ l("div", { className: "fpl-p-4 fpl-text-gray-500 fpl-text-center", children: "No addresses found" }) })
] });
}
);
B.displayName = "AddressSearch";
export {
B as AddressSearch
};