https://clientserve.ai/assets/WhatConvertsConnect-BkTpelZ9.js

1import{h as q,bj as M,aO as $,r as n,bk as z,m as e,C as _,ag as D,ah as R,Z as U,y as c,R as Y,bb as G,bl as J,L as T,bc as X,bd as Z,be as Q,bf as ee,bg as se,bh as te,bi as ae,a5 as O,a6 as g,aX as ne,an as re,bm as oe,aR as i,bn as ie,bo as le}from"./index-CZNXzO70.js";import{E as ce}from"./external-link-C8yWe_0y.js";import{U as de}from"./unplug-DJZHzUJ7.js";const he=3e3,me=["From your WhatConverts dashboard, open an account (agency plans) and select a profile.","Open the Tracking menu → Integrations → API Keys.",'Click "Generate API Key" and copy the API token and secret.'];function ue(t){try{return new Date(t).toLocaleString()}catch{return t}}function xe({event:t}){return e.jsxs("div",{className:`rounded-lg border p-3 text-xs ${t.ok?"border-success/30 bg-success/5":"border-destructive/30 bg-destructive/5"}`,children:[e.jsxs("div",{className:"flex flex-wrap items-center justify-between gap-2",children:[e.jsx("p",{className:`font-medium ${t.ok?"text-success":"text-destructive"}`,children:t.ok?"Event received":"Event failed"}),e.jsx("p",{className:"text-muted-foreground",children:ue(t.received_at)})]}),e.jsx("p",{className:"mt-1 text-foreground",children:t.message}),e.jsxs("dl",{className:"mt-3 grid gap-1 text-muted-foreground sm:grid-cols-2",children:[t.lead_id?e.jsxs("div",{children:[e.jsx("dt",{className:"inline",children:"Lead ID: "}),e.jsx("dd",{className:"inline font-mono text-foreground",children:t.lead_id})]}):null,t.trigger?e.jsxs("div",{children:[e.jsx("dt",{className:"inline",children:"Trigger: "}),e.jsx("dd",{className:"inline text-foreground",children:t.trigger})]}):null,t.customer_id?e.jsxs("div",{className:"sm:col-span-2",children:[e.jsx("dt",{className:"inline",children:"Customer ID: "}),e.jsx("dd",{className:"inline font-mono text-foreground",children:t.customer_id})]}):null,t.created!=null?e.jsxs("div",{children:[e.jsx("dt",{className:"inline",children:"CRM action: "}),e.jsx("dd",{className:"inline text-foreground",children:t.created?"Created new customer":"Updated existing customer"})]}):null]}),e.jsx("pre",{className:"mt-3 max-h-48 overflow-auto rounded-md bg-muted/50 p-2 font-mono text-[11px] leading-relaxed text-foreground",children:JSON.stringify(t.payload,null,2)})]})}function F({webhookUrl:t,copied:a,onCopy:r}){return e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-medium text-foreground",children:"Webhook address"}),e.jsx("p",{className:"mt-1 text-xs text-muted-foreground",children:"Paste this URL in WhatConverts under Tracking → Integrations → Automation → Webhooks. Each workspace has its own URL."})]}),t?e.jsxs("div",{className:"flex gap-2",children:[e.jsx(g,{readOnly:!0,value:t,className:"font-mono text-xs","aria-label":"Webhook URL"}),e.jsx(c,{type:"button",variant:"outline",size:"icon",onClick:r,"aria-label":"Copy webhook URL",children:a?e.jsx(re,{className:"h-4 w-4"}):e.jsx(oe,{className:"h-4 w-4"})})]}):e.jsxs("p",{className:"text-xs text-muted-foreground",children:["Webhook URL is unavailable. Set"," ",e.jsx("code",{className:"rounded bg-muted px-1 py-0.5",children:"PUBLIC_BASE_URL"})," ","on the API server (for example"," ",e.jsx("code",{className:"rounded bg-muted px-1 py-0.5",children:"https://test-api.clientserve.ai"}),")."]}),e.jsxs("ol",{className:"list-decimal space-y-1 pl-5 text-xs text-muted-foreground",children:[e.jsx("li",{children:"In WhatConverts, open Tracking → Integrations → Automation → Webhooks."}),e.jsx("li",{children:"Click Add Webhook and paste the URL above."}),e.jsxs("li",{children:["Select lead types and trigger ",e.jsx("strong",{children:"New"})," (required for auto AI outbound calls)."]}),e.jsx("li",{children:"When a new lead arrives with a phone number, ClientServe automatically places an AI outbound call and syncs call details back to WhatConverts."})]})]})}function be(){var E;const t=q(),{config:a,connected:r,refreshConfig:j}=M(),{loading:B,locked:o}=$(),[b,d]=n.useState("credentials"),[f,v]=n.useState(!1),[y,C]=n.useState(!1),[h,N]=n.useState(""),[m,u]=n.useState(""),[k,w]=n.useState(!1),[W,x]=n.useState([]),[K,A]=n.useState(!1),S=r&&b==="webhook",I=r&&b==="credentials",p=n.useCallback(async()=>

1{if(r){A(!0);try{const{events:s}=await z(10);x(s)}catch{}finally{A(!1)}}},[r]);n.useEffect(()=>{if(!r){x([]),d("credentials");return}p();const s=window.setInterval(()=>{p()},he);return()=>window.clearInterval(s)},[r,p]);const L=async()=>{var l;const s=(l=a==null?void 0:a.webhook_url)==null?void 0:l.trim();if(s)try{await navigator.clipboard.writeText(s),w(!0),i.success("Webhook URL copied"),window.setTimeout(()=>w(!1),2e3)}catch{i.error("Could not copy webhook URL.")}},V=async s=>{if(s.preventDefault(),!o){if(!h.trim()||!m.trim()){i.error("Enter both API token and secret.");return}v(!0);try{await ie({apiToken:h.trim(),apiSecret:m.trim(),keyType:"profile"}),u(""),await j(),d("webhook"),i.success("Credentials verified. Copy your webhook URL next.")}catch(l){i.error(l instanceof Error?l.message:"Could not connect WhatConverts.")}finally{v(!1)}}},P=()=>{t("/integrations/whatconverts/settings",{replace:!0})},H=async()=>{if(!o){C(!0);try{await le(),N(""),u(""),x([]),d("credentials"),await j(),i.success("WhatConverts disconnected")}catch(s){i.error(s instanceof Error?s.message:"Could not disconnect.")}finally{C(!1)}}};return e.jsxs("div",{className:"grid gap-6 lg:grid-cols-2",children:[e.jsxs(_,{children:[e.jsx(D,{children:e.jsx(R,{className:"text-lg",children:"How to connect"})}),e.jsxs(U,{className:"space-y-4 text-sm text-muted-foreground",children:[e.jsxs("ol",{className:"list-decimal space-y-3 pl-5",children:[e.jsxs("li",{children:[e.jsx("span",{className:"font-medium text-foreground",children:"Enter API token and secret"}),e.jsx("p",{className:"mt-1",children:"Paste the credentials from your WhatConverts API Keys page."}),e.jsx("ol",{className:"mt-2 list-disc space-y-1 pl-4",children:me.map(s=>e.jsx("li",{children:s},s))})]}),e.jsxs("li",{children:[e.jsx("span",{className:"font-medium text-foreground",children:"Copy your webhook address"}),e.jsx("p",{className:"mt-1",children:"After credentials verify, copy the ClientServe webhook URL and add it in WhatConverts (Automation → Webhooks)."})]}),e.jsxs("li",{children:[e.jsx("span",{className:"font-medium text-foreground",children:"Submit to finish"}),e.jsx("p",{className:"mt-1",children:"Continue to Voice settings to configure how the AI opens WhatConverts lead calls."})]})]}),e.jsxs("a",{href:"https://www.whatconverts.com/api/",target:"_blank",rel:"noopener noreferrer",className:"inline-flex items-center text-primary hover:underline",children:["View WhatConverts API docs",e.jsx(ce,{className:"ml-1 h-3.5 w-3.5"})]})]})]}),e.jsxs(_,{children:[e.jsx(D,{children:e.jsx(R,{className:"text-lg",children:S?"Step 2 — Webhook address":I?"Connection settings":"Step 1 — API credentials"})}),e.jsx(U,{children:S?e.jsxs("div",{className:"space-y-5",children:[e.jsx("p",{className:"text-sm text-muted-foreground",children:"Credentials are saved. Copy the webhook URL into WhatConverts, then submit to open Voice settings."}),e.jsx("div",{className:"rounded-lg border p-4",children:e.jsx(F,{webhookUrl:a==null?void 0:a.webhook_url,copied:k,onCopy:()=>void L()})}),e.jsx(c,{type:"button",className:"w-full",onClick:P,children:"Submit"})]}):I?e.jsxs("div",{className:"space-y-4",children:[e.jsxs("div",{className:"rounded-lg border bg-muted/30 p-4 text-sm",children:[e.jsx("p",{className:"text-muted-foreground",children:"API token"}),e.jsx("p",{className:"mt-1 font-mono font-medium text-foreground",children:(a==null?void 0:a.api_token_hint)??"••••••••"}),e.jsx("p",{className:"mt-3 text-muted-foreground",children:"Key type"}),e.jsx("p",{className:"mt-1 capitalize text-foreground",children:((E=a==null?void 0:a.key_type)==null?void 0:E.replace("_"," "))??"Profile"}),a!=null&&a.connected_since?e.jsxs(e.Fragment,{children:[e.jsx("p",{className:"mt-3 text-muted-foreground",children:"Connected since"}),e.jsx("p",{className:"mt-1 text-foreground",children:new Date(a.connected_since).toLocaleString()})]}):null]}),e.jsxs("div",{className:"space-y-3 rounded-lg border p-4",children:[e.jsx(F,{webhookUrl:a==null?void 0:a.webhook_url,copied:k,onCopy:()=>void L()}),e.jsxs("div",{className:"space-y-2 border-t pt-3",children:[e.jsxs("div",{className:"flex items-center gap-2 text-xs text-muted-foreground",children:[e.jsx(Y,{className:`h-3.5 w-3.5 ${K?"animate-pulse text-primary":"text-primary"}`}),e.jsx("span",{children:"Listening for webhook events…"})]}),W.length===0?e.jsx("p",{className:"rounded-lg border border-dashed bg-muted/20 p-4 text-xs text-muted-foreground",children:"No events yet. Trigger a test webhook from your WhatConverts dashboard and it will show up here automatically."}):e.jsx("div",{className:"space-y-3",children:W.map(s=>e.jsx(xe,{event:s},s.id))})]})]}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx(c,{type:"button",onClick:P,children:"Open Voice settings"}),e.jsxs(G,{children:[e.jsx(J,{asChild:!0,children:e.jsxs(c,{variant:"outline",className:"text-destructive hover:text-destructive",disabled:y||o,children:[y?e.jsx(T,{className:"mr-2 h-4 w-4 animate-spin"}):e.jsx(de,{className:"mr-2 h-4 w-4"}),"Disconnect"]})}),e.jsxs(X,{children:[e.jsxs(Z,{children:[e.jsx(Q,{children:"Disconnect WhatConverts?"}),e.jsx(ee,{children:"ClientServe will stop syncing leads and tracking data. You can reconnect anytime."})]}),e.jsxs(se,{children:[e.jsx(te,{children:"Cancel"}),e.jsx(ae,{onClick:()=>void H(),children:"Disconnect"})]})]})]})]})]}):e.jsxs("form",{onSubmit:s=>void V(s),className:"space-y-5",children:[e.jsx("p",{className:"text-sm text-muted-foreground",children:"Enter your WhatConverts API token and secret. Next you will get a webhook URL to copy."}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(O,{htmlFor:"wc-api-token",children:"API token"}),e.jsx(g,{id:"wc-api-token",value:h,onChange:s=>N(s.target.value),placeholder:"Paste your WhatConverts API token",autoComplete:"off",required:!0,disabled:o})]}),e.jsxs("div",{className:"space-y-2",children:[e.jsx(O,{htmlFor:"wc-api-secret",children:"API 

1secret"}),e.jsx(g,{id:"wc-api-secret",type:"password",value:m,onChange:s=>u(s.target.value),placeholder:"Paste your WhatConverts API secret",autoComplete:"off",required:!0,disabled:o})]}),e.jsx(c,{type:"submit",className:"w-full",disabled:f||o,children:f?e.jsxs(e.Fragment,{children:[e.jsx(T,{className:"mr-2 h-4 w-4 animate-spin"}),"Verifying…"]}):"Continue"}),!B&&o?e.jsx(ne,{fullWidth:!0,className:"mt-2"}):null]})})]})]})}export{be as default};