@sevenfold/setto-client 0.21.0 → 0.22.0

package/dist/setto-client.js

@@ -22065,6 +22065,9 @@ function SettoChat() {
   const [messages, setMessages] = useState([]);
   const [draft, setDraft] = useState("");
   const [sending, setSending] = useState(false);
+  const [leadOpen, setLeadOpen] = useState(false);
+  const [leadStatus, setLeadStatus] = useState("idle");
+  const [lead, setLead] = useState({ name: "", email: "", phone: "", interest: "", consent: false });
   const conversationId = useRef(null);
   const visitor = useRef(null);
   const logRef = useRef(null);
@@ -22101,6 +22104,18 @@ function SettoChat() {
     send: "Send",
     sending: "Svarer …",
     contact: "Kontakt teamet",
+    followUp: "Be om oppfølging",
+    followUpTitle: "La teamet følge opp",
+    followUpDetail: "Legg igjen kontaktinformasjon hvis du vil at teamet skal følge opp denne samtalen.",
+    name: "Navn",
+    email: "E-post",
+    phone: "Telefon",
+    interest: "Hva vil du ha hjelp med?",
+    consent: "Ja, teamet kan bruke opplysningene mine til å følge opp denne henvendelsen.",
+    leadSend: "Send forespørsel",
+    leadSent: "Takk — forespørselen er sendt til teamet.",
+    leadFailed: "Kunne ikke lagre forespørselen. Prøv igjen eller kontakt teamet direkte.",
+    leadConversation: "Still et spørsmål først, så kan vi knytte oppfølgingen til samtalen.",
     failed: "Jeg får ikke svart akkurat nå. Kontakt gjerne teamet direkte."
   } : {
     open: `Chat with ${settings.displayName}`,
@@ -22111,6 +22126,18 @@ function SettoChat() {
     send: "Send",
     sending: "Replying …",
     contact: "Contact the team",
+    followUp: "Ask for follow-up",
+    followUpTitle: "Let the team follow up",
+    followUpDetail: "Leave contact details if you want the team to follow up on this conversation.",
+    name: "Name",
+    email: "Email",
+    phone: "Phone",
+    interest: "What would you like help with?",
+    consent: "Yes, the team may use my details to follow up on this enquiry.",
+    leadSend: "Send request",
+    leadSent: "Thanks — your request has been sent to the team.",
+    leadFailed: "We could not save your request. Please try again or contact the team directly.",
+    leadConversation: "Ask a question first so we can link the follow-up to this conversation.",
     failed: "I cannot reply right now. Please contact the team directly."
   };
   const submit = async (event) => {
@@ -22164,6 +22191,34 @@ function SettoChat() {
       setSending(false);
     }
   };
+  const submitLead = async (event) => {
+    event.preventDefault();
+    if (leadStatus === "sending") return;
+    if (!conversationId.current || !visitor.current) {
+      setLeadStatus("failed");
+      return;
+    }
+    setLeadStatus("sending");
+    try {
+      const response = await fetch(`${config.apiUrl}/sites/${encodeURIComponent(config.siteId)}/chat/leads`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Accept: "application/json" },
+        body: JSON.stringify({
+          conversationId: conversationId.current,
+          visitorId: visitor.current,
+          consent: lead.consent,
+          name: lead.name.trim() || void 0,
+          email: lead.email.trim() || void 0,
+          phone: lead.phone.trim() || void 0,
+          interest: lead.interest.trim() || void 0
+        })
+      });
+      if (!response.ok) throw new Error(`lead_failed_${response.status}`);
+      setLeadStatus("sent");
+    } catch {
+      setLeadStatus("failed");
+    }
+  };
   return /* @__PURE__ */ jsxs("aside", { className: "setto-chat", "aria-label": labels.title, "data-setto-ui": true, children: [
     open ? /* @__PURE__ */ jsxs("section", { className: "setto-chat__panel", role: "dialog", "aria-modal": "false", "aria-labelledby": `${formId}-title`, children: [
       /* @__PURE__ */ jsxs("header", { className: "setto-chat__header", children: [
@@ -22175,11 +22230,46 @@ function SettoChat() {
         /* @__PURE__ */ jsx("button", { className: "setto-chat__close", type: "button", onClick: () => setOpen(false), "aria-label": labels.close, children: "×" })
       ] }),
       /* @__PURE__ */ jsx("div", { className: "setto-chat__log", ref: logRef, "aria-live": "polite", children: messages.map((item, index) => /* @__PURE__ */ jsx("div", { className: `setto-chat__message setto-chat__message--${item.role}`, children: item.content || /* @__PURE__ */ jsx("span", { className: "setto-chat__typing", children: "···" }) }, `${item.role}-${index}`)) }),
-      /* @__PURE__ */ jsx("div", { className: "setto-chat__contact", children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: contactTeam, children: [
-        labels.contact,
-        " ",
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "↗" })
-      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "setto-chat__contact", children: [
+        /* @__PURE__ */ jsxs("button", { type: "button", onClick: contactTeam, children: [
+          labels.contact,
+          " ",
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "↗" })
+        ] }),
+        /* @__PURE__ */ jsx("button", { type: "button", onClick: () => {
+          setLeadOpen((value) => !value);
+          setLeadStatus("idle");
+        }, children: labels.followUp })
+      ] }),
+      leadOpen ? /* @__PURE__ */ jsxs("form", { className: "setto-chat__lead", onSubmit: submitLead, children: [
+        /* @__PURE__ */ jsx("strong", { children: labels.followUpTitle }),
+        /* @__PURE__ */ jsx("p", { children: labels.followUpDetail }),
+        /* @__PURE__ */ jsxs("div", { className: "setto-chat__lead-grid", children: [
+          /* @__PURE__ */ jsxs("label", { children: [
+            labels.name,
+            /* @__PURE__ */ jsx("input", { value: lead.name, maxLength: 160, onChange: (event) => setLead((current) => ({ ...current, name: event.target.value })) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            labels.email,
+            /* @__PURE__ */ jsx("input", { type: "email", value: lead.email, maxLength: 320, onChange: (event) => setLead((current) => ({ ...current, email: event.target.value })) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            labels.phone,
+            /* @__PURE__ */ jsx("input", { type: "tel", value: lead.phone, maxLength: 64, onChange: (event) => setLead((current) => ({ ...current, phone: event.target.value })) })
+          ] }),
+          /* @__PURE__ */ jsxs("label", { children: [
+            labels.interest,
+            /* @__PURE__ */ jsx("input", { value: lead.interest, maxLength: 500, onChange: (event) => setLead((current) => ({ ...current, interest: event.target.value })) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("label", { className: "setto-chat__consent", children: [
+          /* @__PURE__ */ jsx("input", { type: "checkbox", checked: lead.consent, onChange: (event) => setLead((current) => ({ ...current, consent: event.target.checked })) }),
+          labels.consent
+        ] }),
+        leadStatus === "sent" ? /* @__PURE__ */ jsx("p", { className: "setto-chat__lead-success", children: labels.leadSent }) : null,
+        leadStatus === "failed" ? /* @__PURE__ */ jsx("p", { className: "setto-chat__lead-error", children: conversationId.current ? labels.leadFailed : labels.leadConversation }) : null,
+        leadStatus !== "sent" ? /* @__PURE__ */ jsx("button", { type: "submit", disabled: leadStatus === "sending" || !lead.consent || !lead.email.trim() && !lead.phone.trim(), children: leadStatus === "sending" ? labels.sending : labels.leadSend }) : null
+      ] }) : null,
       /* @__PURE__ */ jsxs("form", { className: "setto-chat__composer", onSubmit: submit, children: [
         /* @__PURE__ */ jsx("label", { className: "setto-chat__sr", htmlFor: `${formId}-input`, children: labels.placeholder }),
         /* @__PURE__ */ jsx(
@@ -22229,7 +22319,7 @@ function useChatStyles() {
       .setto-chat__launcher { border: 0; min-height: 54px; max-width: min(290px, calc(100vw - 32px)); border-radius: 999px; padding: 8px 18px 8px 9px; display: flex; align-items: center; gap: 10px; background: #251d16; color: #fff9ef; box-shadow: 0 14px 40px rgba(35,29,23,.28); font: 600 14px/1 Archivo, ui-sans-serif, sans-serif; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
       .setto-chat__launcher:hover { transform: translateY(-2px); box-shadow: 0 18px 46px rgba(35,29,23,.36); }
       .setto-chat__launcher-mark { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #df6540; color: #fff8eb; font-size: 18px; }
-      .setto-chat__panel { width: min(390px, calc(100vw - 32px)); height: min(590px, calc(100dvh - 104px)); margin-bottom: 12px; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto auto; border: 1px solid rgba(37,29,22,.15); border-radius: 20px; background: #fffaf1; box-shadow: 0 22px 70px rgba(35,29,23,.3); }
+      .setto-chat__panel { width: min(390px, calc(100vw - 32px)); height: min(590px, calc(100dvh - 104px)); margin-bottom: 12px; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto auto auto; border: 1px solid rgba(37,29,22,.15); border-radius: 20px; background: #fffaf1; box-shadow: 0 22px 70px rgba(35,29,23,.3); }
       .setto-chat__header { padding: 20px 20px 16px; display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid #eadfce; background: radial-gradient(circle at 0 0, #f4d4a9, transparent 52%), #fffaf1; }
       .setto-chat__eyebrow { margin: 0 0 4px; color: #b54628; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
       .setto-chat__header h2 { margin: 0; color: #211a14; font-family: "Instrument Serif", Georgia, serif; font-size: 29px; font-weight: 400; line-height: 1; }
@@ -22241,15 +22331,25 @@ function useChatStyles() {
       .setto-chat__message--visitor { align-self: flex-end; background: #2b221b; color: #fffaf1; border-bottom-right-radius: 3px; }
       .setto-chat__typing { display: inline-block; min-width: 24px; animation: setto-chat-pulse 1.1s ease-in-out infinite; letter-spacing: 2px; }
       @keyframes setto-chat-pulse { 50% { opacity: .3; } }
-      .setto-chat__contact { padding: 0 18px 12px; }
+      .setto-chat__contact { padding: 0 18px 12px; display: flex; gap: 14px; flex-wrap: wrap; }
       .setto-chat__contact button { border: 0; padding: 0; background: transparent; color: #b54628; font: 600 12px/1.4 Archivo, ui-sans-serif, sans-serif; cursor: pointer; }
+      .setto-chat__lead { display: grid; gap: 8px; max-height: 255px; overflow: auto; padding: 12px 18px; border-top: 1px solid #eadfce; background: #fff7ed; font-size: 12px; line-height: 1.4; }
+      .setto-chat__lead p { margin: 0; color: #70665a; }
+      .setto-chat__lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
+      .setto-chat__lead label { display: grid; gap: 3px; color: #5f5347; font-weight: 600; }
+      .setto-chat__lead input:not([type="checkbox"]) { width: 100%; border: 1px solid #d8ccba; border-radius: 7px; background: #fffdf8; color: #231d17; padding: 7px; font: 13px Archivo, ui-sans-serif, sans-serif; }
+      .setto-chat__lead .setto-chat__consent { grid-template-columns: auto 1fr; align-items: start; font-weight: 400; }
+      .setto-chat__lead button { justify-self: start; min-height: 34px; border: 0; border-radius: 8px; padding: 0 12px; background: #b54628; color: #fffaf1; font: 600 12px Archivo, ui-sans-serif, sans-serif; cursor: pointer; }
+      .setto-chat__lead button:disabled { opacity: .5; cursor: default; }
+      .setto-chat__lead-success { color: #30683d !important; font-weight: 600; }
+      .setto-chat__lead-error { color: #9b2f1e !important; font-weight: 600; }
       .setto-chat__composer { padding: 12px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px; border-top: 1px solid #eadfce; background: #fffdf8; }
       .setto-chat__composer textarea { width: 100%; max-height: 100px; resize: none; border: 1px solid #d8ccba; border-radius: 10px; background: #fffaf1; color: #231d17; padding: 10px; font: 14px/1.35 Archivo, ui-sans-serif, sans-serif; outline: none; }
       .setto-chat__composer textarea:focus { border-color: #b54628; box-shadow: 0 0 0 3px rgba(181,70,40,.12); }
       .setto-chat__composer button { min-height: 40px; border: 0; border-radius: 9px; padding: 0 13px; background: #b54628; color: #fffaf1; font: 600 13px Archivo, ui-sans-serif, sans-serif; cursor: pointer; }
       .setto-chat__composer button:disabled { opacity: .5; cursor: default; }
       .setto-chat__sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
-      @media (max-width: 480px) { .setto-chat { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); } .setto-chat__panel { width: calc(100vw - 24px); height: min(610px, calc(100dvh - 88px)); } .setto-chat__launcher { min-height: 50px; } }
+      @media (max-width: 480px) { .setto-chat { right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); } .setto-chat__panel { width: calc(100vw - 24px); height: min(610px, calc(100dvh - 88px)); } .setto-chat__launcher { min-height: 50px; } .setto-chat__lead-grid { grid-template-columns: 1fr; } }
       @media (prefers-reduced-motion: reduce) { .setto-chat *, .setto-chat *::before, .setto-chat *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
     `;
     document.head.appendChild(style);