https://vatdi.com/build/assets/WhatsApp-DKYMcXvE.js

1import{r as m,j as e,L}from"./react-CgBY0Ze-.js";import{P as oe}from"./PageHeader-CnUIzDOJ.js";import{b as ae,u as A,c as le,L as ce,f as O}from"./main-B4Jc9IaJ.js";import{a_ as ne,ah as de,ak as he,C as me,bx as re,by as pe,aD as H,bm as ue,T as xe,bz as ge,aB as be,b0 as X,aA as ye,ax as fe,bA as we,aX as Z,au as je,aj as ee,z as ve,bB as ke}from"./vendor-NlgW4Nml.js";import"./renderIcon-CWUPWWi0.js";import"./http-BCn5QfZZ.js";const Ne=["#25D366","#FFFFFF"],_e=[{key:"launcher",title:"Floating button on every page",description:"A WhatsApp bubble stacked with your chat launcher, on every page the widget loads. The most visible option, and the one visitors recognise without reading."},{key:"header",title:"Icon in the chat header",description:"A small WhatsApp icon next to the menu, for someone already in the chat who would rather carry on from their phone."},{key:"welcome",title:"Card at the start of a chat",description:"A card under the starter questions — and on the pre-chat form, which is where a visitor is most likely to give up."},{key:"menu",title:"Entry in the chat menu",description:'Sits with "Talk to a representative" in the ⋮ menu. Quiet, and there when someone goes looking for it.'}];function S({label:s,hint:n,children:x,htmlFor:y}){return e.jsxs("div",{children:[e.jsx("label",{className:"label",htmlFor:y,children:s}),x,n&&e.jsx("p",{className:"mt-1 text-xs text-gray-500 dark:text-gray-400",children:n})]})}function te({checked:s,onChange:n,label:x,description:y,id:r}){return e.jsxs("label",{className:"flex items-start gap-3 cursor-pointer",htmlFor:r,children:[e.jsx("input",{id:r,type:"checkbox",checked:s,onChange:g=>n(g.target.checked),className:"mt-0.5 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"}),e.jsxs("span",{className:"min-w-0",children:[e.jsx("span",{className:"block text-sm font-medium text-gray-900 dark:text-gray-100",children:x}),y&&e.jsx("span",{className:"block text-xs text-gray-500 dark:text-gray-400 mt-0.5",children:y})]})]})}function Ce({launcher:s,chatLauncher:n,iconPreview:x}){const y=Math.min(120,Math.max(30,Number(n==null?void 0:n.desktop_icon_size)||60)),r=Math.min(96,Math.max(36,Number(s.size)||Math.round(y*.82))),g=s.style==="pill",f=Math.min(60,Math.max(0,Number(s.gap??12))),h=/^#[0-9a-fA-F]{6}$/.test(s.background||"")?s.background:"#25D366",d=Math.round(r*(g?.46:.56)),o=e.jsxs("div",{className:"flex items-center justify-center shadow-md shrink-0",style:{height:r,width:g?"auto":r,borderRadius:g?r/2:"50%",background:h,padding:g?`0 ${Math.round(r*.32)}px`:0,gap:g?Math.round(r*.18):0,color:"#fff"},children:[x?e.jsx("img",{src:x,alt:"",style:{width:d,height:d,objectFit:"contain",borderRadius:4}}):e.jsx("svg",{width:d,height:d,viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":"true",children:e.jsx("path",{d:"M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"})}),g&&e.jsx("span",{style:{fontSize:Math.max(12,Math.round(r*.28)),fontWeight:600},children:(s.label||"").trim()||"WhatsApp"})]}),w=e.jsx("div",{className:"flex items-center justify-center bg-primary-600 text-white shadow-md shrink-0",style:{height:y,width:y,borderRadius:"50%"},title:"Your chat launcher",children:e.jsx("svg",{width:Math.round(y*.45),height:Math.round(y*.45),viewB

1ox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:e.jsx("path",{d:"M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"})})}),b=!String((n==null?void 0:n.desktop_position)||"bottom-right").includes("left");return e.jsxs("div",{className:"rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/40 p-4",children:[e.jsx("p",{className:"text-xs font-medium text-gray-500 dark:text-gray-400 mb-3",children:"Preview — how the corner of your site will look"}),e.jsxs("div",{className:"flex flex-col",style:{gap:f,alignItems:b?"flex-end":"flex-start"},children:[o,w]}),e.jsxs("p",{className:"mt-3 text-xs text-gray-500 dark:text-gray-400",children:["Corner and chat-button size come from"," ",e.jsx(L,{to:"/app/settings/appearance",className:"font-medium text-primary-600 dark:text-primary-400 hover:underline",children:"Appearance"})," ","— currently ",String((n==null?void 0:n.desktop_position)||"bottom-right").replace("-"," ")," on desktop."]})]})}function Se({connection:s}){const n=ae(),x=m.useRef(null),[y,r]=m.useState(!0),[g,f]=m.useState(!1),[h,d]=m.useState(null),[o,w]=m.useState(null),[b,v]=m.useState(null),[z,E]=m.useState(null),[D,T]=m.useState(null),[M,N]=m.useState(null),[c,k]=m.useState(!1),W=m.useCallback(()=>{r(!0),A.whatsapp.entryPoint().then(t=>{var u,P,B;const a=((u=t.data)==null?void 0:u.data)||{};d(a.settings||null),w(a.resolved||null),v(a.connected||null),E(a.chat_launcher||null),N(((B=(P=a.settings)==null?void 0:P.launcher)==null?void 0:B.custom_icon)||null),T(null),k(!1)}).catch(()=>n.error("Could not load the website button settings.")).finally(()=>r(!1))},[]);m.useEffect(()=>{W()},[W,s==null?void 0:s.display_phone,s==null?void 0:s.is_live]);const F=t=>d(a=>({...a,...t})),C=t=>d(a=>({...a,launcher:{...a.launcher||{},...t}})),V=(t,a)=>{const u=(h==null?void 0:h.placements)||[];F({placements:a?[...new Set([...u,t])]:u.filter(P=>P!==t)})},U=t=>{if(!t)return;if(t.size>1024*1024){n.error("That image is over 1 MB. Please use a smaller one.");return}T(t),k(!1);const a=new FileReader;a.onload=u=>N(u.target.result),a.readAsDataURL(t)},$=()=>{T(null),N(null),k(!0),x.current&&(x.current.value="")},I=async()=>{var t,a,u,P,B,J,K,Q;f(!0);try{const _=h.launcher||{},j=new FormData;j.append("enabled",h.enabled?"1":"0"),h.number&&j.append("number",h.number),(h.placements||[]).forEach(ie=>j.append("placements[]",ie)),j.append("show_when",h.show_when||"always"),j.append("prefill",h.prefill||""),j.append("launcher_gap",String(_.gap??12)),_.size&&j.append("launcher_size",String(_.size)),j.append("launcher_style",_.style||"icon"),j.append("launcher_label",_.label||""),j.append("launcher_background",_.background||"#25D366"),D&&j.append("launcher_icon",D),c&&j.append("remove_launcher_icon","1");const Y=await A.whatsapp.updateEntryPoint(j),q=(a=(t=Y.data)==null?void 0:t.data)==null?void 0:a.settings;q&&(d(q),N(((u=q.launcher)==null?void 0:u.custom_icon)||null)),w(((B=(P=Y.data)==null?void 0:P.data)==null?void 0:B.resolved)||null),T(null),k(!1),n.success(((J=Y.data)==null?void 0:J.message)||"Saved.")}catch(_){n.error(((Q=(K=_==null?void 0:_.response)==null?void 0:K.data)==null?void 0:Q.message)||"Could not save that.")}finally{f(!1)}};if(y||!h)return e.jsxs("div",{className:"card p-5 text-sm text-gray-500 inline-flex items-center gap-2",children:[e.jsx(ne,{className:"w-4 h-4 animate-spin"})," Loading website button settings…"]});const G=(o==null?void 0:o.answered_by)==="assistant",l=h.placements||[],i=h.launcher||{},p=l.includes("launcher");return e.jsxs("div",{className:"card p-5 space-y-6",children:[e.jsxs("div",{children:[e.jsxs("h3",{className:"font-semibold text-gray-900 dark:text-gray-100 inline-flex items-center gap-2",children:[e.jsx(de,{className:"w-4 h-4 text-primary-600"})," Show WhatsApp on your website"]}),e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-300 mt-1",children:"Put a WhatsApp button on your site so visitors can reach you there. They tap it, WhatsApp opens on their phone with your number and a first message already filled in — and the reply comes back here, in your inbox."})]}),e.jsxs("div",{className:"grid gap-3 md:grid-cols-2",children:[e.jsxs("div",{className:"rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2.5",children:[e.jsxs("p",{className:"text-xs font-medium text-gray-500 dark:text-gray-400 inline-flex items-center gap-1.5",children:[e.jsx(he,{className:"w-3.5 h-3.5"})," Connected to your AI"]}),b?e.jsxs(e.Fragment,{children:[e.jsx("p",{className:"mt-1 font-mono text-sm text-gray-900 dark:text-gray-100",children:b.display_phone||"—"}),e.jsxs("p",{className:"text-xs text-gray-500 dark:text-gray-400 mt-0.5",children:[b.verified_name?`${b.verified_name} · `:"",b.mode==="tech_provider"?"via Vatdi":"your own Meta app"]}),e.jsx("p",{className:`text-xs mt-1 inline-flex items-center gap-1 font-medium ${b.is_live&&b.status==="connected"?"text-emerald-700 dark:text-emerald-400":"text-amber-700 dark:text-amber-400"}`,children:b.is_live&&b.status==="connected"?e.jsxs(e.Fragment,{children:[e.jsx(me,{className:"w-3.5 h-3.5"})," The assistant is answering on this number"]}):e.jsxs(e.Fragment,{children:[e.jsx(re,{className:"w-3.5 h-3.5"})," ",b.status==="connected"?"Paused — messages are kept, nobody answers":"Not verified yet"]})})]}):e.jsx("p",{className:"mt-1 text-sm text-gray-500 dark:text-gray-400",children:"No number connected. Connect one above and the assistant answers there too."})]}),e.jsxs("div",{className:`rounded-lg border px-3 py-2.5 ${o?"border-emerald-200 bg-emerald-50/60 dark:bg-emerald-900/20 dark:border-emerald-900/40":"border-amber-200 bg-amber-50 dark:bg-amber-900/20 dark:border-amber-900/40"}`,children:[e.jsxs("p",{className:"text-xs font-medium text-gray-500 dark:text-gray-400 inline-flex items-center gap-1.5",children:[e.jsx(pe,{className:"w-3.5 h-3.5"})," The button sends visitors to"]}),o?e.jsxs(e.Fragment,{children:[e.jsx("p",{className:"mt-1 font-mono text-sm text-gray-900 dark:text-gray-100",children:o.display}),e.jsx("p",{className:"text-xs text-gray-600 dark:text-gray-300 mt-1",children:G?"Same number as above, so the button promises an answer straight away.":"Nobody answers this one automatically, so the button says your team will get back to them."})]}):e.jsxs("p",{className:"mt-1 text-sm text-amber-900 dark:text-amber-200 inline-flex items-start gap-1.5",children:[e.jsx(H,{className:"w-4 h-4 shrink-0 mt-0.5"}),"Nothing yet. Connect a number above, or type one below. Until then the button stays hidden however this is set."]})]})]}),e.jsx(te,{id:"wa-enabled",checked:!!h.enabled,onChange:t=>F({enabled:t}),label:"Show a WhatsApp button on my website",description:"Nothing appears on your site until this is on and at least one place is chosen below."}),h.enabled&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-medium text-gray-900 dark:text-gray-100 mb-1",children:"Where it appears"}),e.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400 mb-3",children:"Pick as many as you like. Each one is a different moment in a visitor's journey."}),e.jsx("div",{className:"space-y-3",children:_e.map(t=>e.jsx(te,{id:`wa-place-${t.key}`,checked:l.includes(t.key),onChange:a=>

1V(t.key,a),label:t.title,description:t.description},t.key))}),l.length===0&&e.jsx("p",{className:"text-xs text-rose-600 mt-2",children:"Pick at least one, or the button has nowhere to show."})]}),p&&e.jsxs("div",{className:"rounded-lg border border-gray-200 dark:border-gray-700 p-4 space-y-4",children:[e.jsxs("div",{children:[e.jsx("p",{className:"text-sm font-medium text-gray-900 dark:text-gray-100",children:"The floating button"}),e.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400 mt-0.5",children:"It sits just clear of your chat launcher, on the side away from the screen edge — the only side with room, so the two can never overlap. Which corner they live in, and how big the chat button is, come from Appearance."})]}),e.jsxs("div",{className:"grid gap-4 md:grid-cols-2",children:[e.jsx(S,{label:"Space between the two",htmlFor:"wa-gap",hint:"In pixels, 0 to 60.",children:e.jsx("input",{id:"wa-gap",type:"number",min:0,max:60,value:i.gap??12,onChange:t=>C({gap:t.target.value===""?"":Number(t.target.value)}),className:"input w-full"})}),e.jsx(S,{label:"Size",htmlFor:"wa-size",hint:"In pixels, 36 to 96. Leave empty to track your chat button's size.",children:e.jsx("input",{id:"wa-size",type:"number",min:36,max:96,value:i.size??"",placeholder:"Match the chat button",onChange:t=>C({size:t.target.value===""?null:Number(t.target.value)}),className:"input w-full"})}),e.jsx(S,{label:"Shape",htmlFor:"wa-style",hint:"A round bubble is discreet; a pill says what it is.",children:e.jsxs("select",{id:"wa-style",value:i.style||"icon",onChange:t=>C({style:t.target.value}),className:"input w-full",children:[e.jsx("option",{value:"icon",children:"Round bubble, icon only"}),e.jsx("option",{value:"pill",children:"Pill with a label"})]})}),i.style==="pill"&&e.jsx(S,{label:"Label",htmlFor:"wa-label",hint:"Up to 40 characters. Empty uses “WhatsApp”.",children:e.jsx("input",{id:"wa-label",value:i.label||"",maxLength:40,onChange:t=>C({label:t.target.value}),placeholder:"WhatsApp",className:"input w-full"})}),e.jsxs(S,{label:"Colour",htmlFor:"wa-bg",hint:M?"Your own icon, so the button can be any colour that suits your site.":"Meta allows its mark on green or on white, and nothing else. Pick another colour and the button falls back to green — or upload your own icon and the colour is yours.",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("input",{id:"wa-bg",type:"color",value:i.background||"#25D366",onChange:t=>C({background:t.target.value}),className:"h-9 w-12 rounded border border-gray-300 dark:border-gray-600 bg-transparent p-0.5"}),e.jsx("input",{value:i.background||"#25D366",onChange:t=>C({background:t.target.value}),className:"input w-32 font-mono text-sm"}),i.background!=="#25D366"&&e.jsx("button",{type:"button",onClick:()=>C({background:"#25D366"}),className:"btn-link text-xs",children:"Reset"})]}),!M&&!Ne.includes((i.background||"#25D366").toUpperCase())&&e.jsx("p",{className:"mt-1.5 text-xs text-amber-700 dark:text-amber-400",children:"This colour will show as WhatsApp green on your site. Meta does not permit its mark on any other background."})]})]}),e.jsx(S,{label:"Icon",hint:"PNG, JPG, WEBP or SVG up to 1 MB. Leave it empty for the WhatsApp mark, which is what most visitors recognise fastest.",children:e.jsxs("div",{className:"flex flex-wrap items-center gap-2",children:[e.jsx("input",{ref:x,type:"file",accept:"image/png,image/jpeg,image/webp,image/svg+xml",onChange:t=>{var a;return U((a=t.target.files)==null?void 0:a[0])},className:"hidden",id:"wa-icon-file"}),e.jsxs("button",{type:"button",onClick:()=>{var t;return(t=x.current)==null?void 0:t.click()},className:"btn-secondary btn-sm inline-flex items-center gap-1.5",children:[e.jsx(ue,{className:"w-3.5 h-3.5"})," ",M?"Replace icon":"Upload an icon"]}),M&&e.jsxs("button",{type:"button",onClick:$,className:"btn-secondary btn-sm inline-flex items-center gap-1.5 text-rose-600",children:[e.jsx(xe,{className:"w-3.5 h-3.5"})," Use the WhatsApp mark"]})]})}),e.jsx(Ce,{launcher:i,chatLauncher:z,iconPreview:M})]}),e.jsx(S,{label:"When to show it",htmlFor:"wa-when",hint:"“Only when no one is available” keeps website chat primary during your hours, and offers WhatsApp exactly when a visitor would otherwise be left waiting. Availability follows your agent hours in AI Training.",children:e.jsxs("select",{id:"wa-when",value:h.show_when||"always",onChange:t=>F({show_when:t.target.value}),className:"input w-full max-w-md",children:[e.jsx("option",{value:"always",children:"Always"}),e.jsx("option",{value:"offline",children:"Only when no one is available to take over the chat"})]})}),e.jsx(S,{label:"First message (optional)",htmlFor:"wa-prefill",hint:"Filled into WhatsApp for the visitor; they can still edit it before sending. {store_name} and {page_url} are replaced — {page_url} tells you which page they were on. Leave empty and they write their own.",children:e.jsx("input",{id:"wa-prefill",value:h.prefill||"",maxLength:300,onChange:t=>F({prefill:t.target.value}),placeholder:"Hi! I have a question about {store_name}.",className:"input w-full"})}),e.jsx(S,{label:"Send visitors to a different number (optional)",htmlFor:"wa-number",hint:"Leave empty to use your connected number, which is the one the assistant answers. Set this only if your team answers WhatsApp on a different line — then replies will not come into your Vatdi inbox.",children:e.jsx("input",{id:"wa-number",value:h.number||"",onChange:t=>F({number:t.target.value}),className:"input w-full max-w-md font-mono",placeholder:"+49 151 23456789"})})]}),e.jsxs("div",{className:"flex items-center gap-3 pt-1 border-t border-gray-100 dark:border-gray-700",children:[e.jsxs("button",{onClick:I,disabled:g,className:"btn-primary inline-flex items-center gap-2 mt-4",children:[e.jsx(ge,{className:"w-4 h-4"})," ",g?"Saving…":"Save"]}),e.jsxs("span",{className:"text-xs text-gray-500 dark:text-gray-400 mt-4 inline-flex items-center gap-1",children:[e.jsx(be,{className:"w-3.5 h-3.5"})," Your site caches settings for a few minutes, so allow a moment before checking."]})]})]})}const Ae=async(s,n)=>{try{await navigator.clipboard.writeText(s),n.success("Copied.")}catch{n.error("Could not copy — select it and copy by hand.")}};function R({label:s,hint:n,children:x}){return e.jsxs("label",{className:"block",children:[e.jsx("span",{className:"label",children:s}),x,n&&e.jsx("span",{className:"mt-1 block text-xs text-gray-500 dark:text-gray-400",children:n})]})}function se({label:s,value:n,toast:x}){return e.jsxs("div",{children:[e.jsx("div",{className:"text-xs font-medium text-gray-500 dark:text-gray-400 mb-1",children:s}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("code",{className:"flex-1 min-w-0 truncate rounded bg-gray-100 dark:bg-gray-800 px-2.5 py-1.5 text-xs text-gray-900 dark:text-gray-100",children:n}),e.jsxs("button",{type:"button",onClick:()=>Ae(n,x),className:"btn-secondary btn-sm inline-flex items-center gap-1",title:"Copy",children:[e.jsx(ke,{className:"w-3.5 h-3.5"})," Copy"]})]})]})}function Me({appId:s,configId:n,graphVersion:x,onDone:y}){const[r,g]=m.useState(!1),f=m.useRef({});return m.useEffect(()=>{if(!s)return;const d=o=>{var w,b;

1if(/facebook\.com$/.test(new URL(o.origin).hostname))try{const v=typeof o.data=="string"?JSON.parse(o.data):o.data;(v==null?void 0:v.type)==="WA_EMBEDDED_SIGNUP"&&v.event==="FINISH"&&(f.current={phone_number_id:(w=v.data)==null?void 0:w.phone_number_id,waba_id:(b=v.data)==null?void 0:b.waba_id})}catch{}};if(window.addEventListener("message",d),!window.FB&&!document.getElementById("facebook-jssdk")){window.fbAsyncInit=()=>window.FB.init({appId:s,autoLogAppEvents:!0,xfbml:!1,version:x||"v22.0"});const o=document.createElement("script");o.id="facebook-jssdk",o.async=!0,o.defer=!0,o.crossOrigin="anonymous",o.src="https://connect.facebook.net/en_US/sdk.js",document.body.appendChild(o)}return()=>window.removeEventListener("message",d)},[s,x]),{start:()=>{window.FB&&(g(!0),f.current={},window.FB.login(d=>{var w;const o=(w=d==null?void 0:d.authResponse)==null?void 0:w.code;if(!o){g(!1);return}setTimeout(()=>{y({code:o,...f.current}).finally(()=>g(!1))},400)},{config_id:n,response_type:"code",override_default_response_type:!0,extras:{setup:{},featureType:"",sessionInfoVersion:"3"}}))},busy:r}}function Be(){const s=ae(),n=le(),[x,y]=m.useState(!0),[r,g]=m.useState(null),[f,h]=m.useState("own_app"),[d,o]=m.useState({phone_number_id:"",waba_id:"",access_token:"",app_secret:""}),[w,b]=m.useState(!1),[v,z]=m.useState(""),[E,D]=m.useState(!1),[T,M]=m.useState(!1),N=async()=>{var l,i,p;try{const t=await A.whatsapp.status();g(((l=t.data)==null?void 0:l.data)||null)}catch(t){s.error(((p=(i=t==null?void 0:t.response)==null?void 0:i.data)==null?void 0:p.message)||"Could not load WhatsApp status.")}finally{y(!1)}};m.useEffect(()=>{N()},[]);const c=r==null?void 0:r.connection,k=(r==null?void 0:r.tech_provider)||{},W=Me({appId:k.app_id,configId:k.config_id,graphVersion:k.graph_version,onDone:async({code:l,phone_number_id:i,waba_id:p})=>{var t,a;if(!i||!p){s.error("Meta did not report which number was connected. Please try again.");return}try{await A.whatsapp.embeddedSignup({code:l,phone_number_id:i,waba_id:p}),s.success("WhatsApp connected."),await N()}catch(u){s.error(((a=(t=u==null?void 0:u.response)==null?void 0:t.data)==null?void 0:a.message)||"Connection failed.")}}}),F=async l=>{var i,p,t,a;l.preventDefault(),b(!0);try{const u=await A.whatsapp.connect(d);s.success(((i=u.data)==null?void 0:i.message)||"Number verified."),o({phone_number_id:"",waba_id:"",access_token:"",app_secret:""}),g(((p=u.data)==null?void 0:p.data)||null)}catch(u){s.error(((a=(t=u==null?void 0:u.response)==null?void 0:t.data)==null?void 0:a.message)||"Meta rejected those details.")}finally{b(!1)}},C=async()=>{var l,i,p;D(!0);try{const t=await A.whatsapp.testMessage({to:v});s.success(((l=t.data)==null?void 0:l.message)||"Sent."),N()}catch(t){s.error(((p=(i=t==null?void 0:t.response)==null?void 0:i.data)==null?void 0:p.message)||"Meta did not accept the message.")}finally{D(!1)}},V=async l=>{var i,p,t;M(!0);try{const a=await A.whatsapp.setLive(l);s.success((i=a.data)==null?void 0:i.message),N()}catch(a){s.error(((t=(p=a==null?void 0:a.response)==null?void 0:p.data)==null?void 0:t.message)||"Could not change that.")}finally{M(!1)}},U=async()=>{var l,i,p;try{const t=await A.whatsapp.regenerateVerifyToken();s.success((l=t.data)==null?void 0:l.message),N()}catch(t){s.error(((p=(i=t==null?void 0:t.response)==null?void 0:i.data)==null?void 0:p.message)||"Could not regenerate.")}},$=async()=>{var i,p;if(await n({title:"Disconnect WhatsApp?",message:"The assistant stops answering on this number. Past conversations are kept. You can connect again any time.",confirmText:"Disconnect",confirmVariant:"danger"}))try{await A.whatsapp.disconnect(),s.success("Disconnected."),N()}catch(t){s.error(((p=(i=t==null?void 0:t.response)==null?void 0:i.data)==null?void 0:p.message)||"Could not disconnect.")}};if(x)return e.jsx("div",{className:"flex items-center justify-center h-64",children:e.jsx(ce,{size:"lg"})});const I=(c==null?void 0:c.status)==="connected",G=(r==null?void 0:r.plan_allows)!==!1;return e.jsxs("div",{className:"space-y-6",children:[e.jsx(oe,{title:"WhatsApp",description:"The same assistant, trained on the same knowledge, answering on your WhatsApp Business number",icon:e.jsx(X,{className:"w-5 h-5"}),iconAccent:"emerald"}),!G&&e.jsxs("div",{className:"flex items-start gap-3 rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 dark:border-amber-800 dark:bg-amber-900/20",children:[e.jsx(X,{className:"w-5 h-5 text-amber-600 dar

1k:text-amber-400 shrink-0 mt-0.5"}),e.jsxs("div",{className:"text-sm text-amber-800 dark:text-amber-200",children:[e.jsx("p",{className:"font-semibold",children:"Your plan does not include the WhatsApp channel."}),e.jsxs("p",{className:"mt-0.5",children:[I?"Your number stays connected and your settings are kept, but the assistant is not answering on it right now.":"Upgrade to connect a WhatsApp Business number and let the assistant answer on it."," ",e.jsx(L,{to:"/app/billing",className:"underline font-medium",children:"See plans"})]})]})]}),c?e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"card p-5",children:[e.jsxs("div",{className:"flex flex-wrap items-start justify-between gap-4",children:[e.jsxs("div",{className:"min-w-0",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[I?e.jsxs("span",{className:"inline-flex items-center gap-1.5 rounded-full bg-emerald-50 dark:bg-emerald-900/30 px-2.5 py-0.5 text-xs font-medium text-emerald-700 dark:text-emerald-300",children:[e.jsx(ye,{className:"w-3.5 h-3.5"})," Webhook verified"]}):c.status==="error"?e.jsxs("span",{className:"inline-flex items-center gap-1.5 rounded-full bg-red-50 dark:bg-red-900/30 px-2.5 py-0.5 text-xs font-medium text-red-700 dark:text-red-300",children:[e.jsx(H,{className:"w-3.5 h-3.5"})," Error"]}):e.jsxs("span",{className:"inline-flex items-center gap-1.5 rounded-full bg-amber-50 dark:bg-amber-900/30 px-2.5 py-0.5 text-xs font-medium text-amber-700 dark:text-amber-300",children:[e.jsx(fe,{className:"w-3.5 h-3.5"})," Waiting for Meta to verify the webhook"]}),e.jsx("span",{className:"text-xs text-gray-500 dark:text-gray-400",children:c.mode==="tech_provider"?"Connected through Vatdi":"Your own Meta app"})]}),e.jsx("div",{className:"mt-2 text-lg font-semibold text-gray-900 dark:text-gray-100",children:c.display_phone||c.phone_number_id}),c.verified_name&&e.jsx("div",{className:"text-sm text-gray-600 dark:text-gray-300",children:c.verified_name}),e.jsxs("div",{className:"mt-2 text-xs text-gray-500 dark:text-gray-400 space-x-3",children:[e.jsxs("span",{children:["Token ",c.token_hint]}),c.last_inbound_at&&e.jsxs("span",{children:["Last message received ",new Date(c.last_inbound_at).toLocaleString()]}),c.last_outbound_at&&e.jsxs("span",{children:["Last sent ",new Date(c.last_outbound_at).toLocaleString()]})]}),c.last_error&&e.jsxs("p",{className:"mt-2 text-sm text-red-700 dark:text-red-300 inline-flex items-start gap-1.5",children:[e.jsx(H,{className:"w-4 h-4 mt-0.5 shrink-0"})," ",c.last_error]})]}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsxs("button",{onClick:()=>V(!c.is_live),disabled:T||!c.is_live&&!I,className:c.is_live?"btn-secondary inline-flex items-center gap-2":"btn-primary inline-flex items-center gap-2",title:!I&&!c.is_live?"Verify the webhook first":"",children:[e.jsx(re,{className:"w-4 h-4"})," ",c.is_live?"Pause the assistant":"Switch the assistant on"]}),e.jsx("button",{onClick:$,className:"btn-icon-danger",title:"Disconnect",children:e.jsx(we,{className:"w-4 h-4"})})]})]}),r.stats&&e.jsxs("div",{className:"mt-4 grid grid-cols-3 gap-3 text-sm",children:[e.jsxs("div",{className:"rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2",children:[e.jsx("div",{className:"text-xs text-gray-500",children:"WhatsApp chats"}),e.jsx("div",{className:"font-semibold tabular-nums",children:O(r.stats.conversations_total)})]}),e.jsxs("div",{className:"rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2",children:[e.jsx("div",{className:"text-xs text-gray-500",children:"Last 30 days"}),e.jsx("div",{className:"font-semibold tabular-nums",children:O(r.stats.conversations_30d)})]}),e.jsxs("div",{className:"rounded-lg border border-gray-200 dark:border-gray-700 px-3 py-2",children:[e.jsx("div",{className:"text-xs text-gray-500",children:"Open now"}),e.jsx("div",{className:"font-semibold tabular-nums",children:O(r.stats.open_now)})]})]}),e.jsx("p",{className:"mt-3 text-sm text-gray-600 dark:text-gray-300",children:c.is_live?e.jsxs(e.Fragment,{children:["The assistant is answering. ",e.jsx(L,{to:"/app/conversations?channel=whatsapp",className:"font-medium text-primary-600 dark:text-primary-400 hover:underline",children:"See WhatsApp conversations"}),"."]}):"Paused: messages are received and kept in your inbox, but nobody answers them."})]}),c.mode==="own_app"&&e.jsxs("div",{className:"card p-5 space-y-4",children:[e.jsxs("div",{children:[e.jsx("h3",{className:"font-semibold text-gray-900 dark:text-gray-100",children:"2. Point Meta at Vatdi"}),e.jsxs("p",{className:"text-sm text-gray-600 dark:text-gray-300 mt-1",children:["In your Meta app: ",e.jsx("b",{children:"WhatsApp → Configuration → Webhook → E

1dit"}),". Paste both values, click ",e.jsx("b",{children:"Verify and save"}),", then under ",e.jsx("b",{children:"Webhook fields"})," subscribe to ",e.jsx("b",{children:"messages"}),". The status above turns green the moment Meta's verification reaches us."]})]}),e.jsx(se,{label:"Callback URL",value:r.webhook_url,toast:s}),e.jsx(se,{label:"Verify token",value:r.verify_token,toast:s}),e.jsxs("button",{onClick:U,className:"btn-link text-xs inline-flex items-center gap-1",children:[e.jsx(Z,{className:"w-3.5 h-3.5"})," Generate a new verify token"]})]}),e.jsxs("div",{className:"card p-5 space-y-3",children:[e.jsxs("div",{children:[e.jsxs("h3",{className:"font-semibold text-gray-900 dark:text-gray-100",children:[c.mode==="own_app"?"3.":"2."," Send a test message"]}),e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-300 mt-1",children:"Goes through the exact path a customer reply takes. Then answer it from that phone — with the assistant switched on, you'll see it reply within a few seconds, and the exchange appears in your inbox. If you're on Meta's free test number, the recipient must be one of the up-to-five numbers you added in Meta."}),e.jsxs("p",{className:"text-sm text-gray-600 dark:text-gray-300 mt-1",children:[e.jsx("b",{children:"First send any message from that phone to your WhatsApp number."})," Meta only lets a business start a conversation with an approved template, so a test to a phone that has never written to you is refused; a message from the phone opens a 24-hour window in which this test goes through."]})]}),e.jsxs("div",{className:"flex flex-wrap gap-2",children:[e.jsx("input",{value:v,onChange:l=>z(l.target.value),placeholder:"Recipient, with country code, e.g. 4915123456789",className:"input flex-1 min-w-[16rem] font-mono"}),e.jsxs("button",{onClick:C,disabled:E||!v.trim(),className:"btn-primary inline-flex items-center gap-2",children:[e.jsx(je,{className:"w-4 h-4"})," ",E?"Sending…":"Send test"]})]})]}),e.jsxs("div",{className:"card p-5 text-sm text-gray-600 dark:text-gray-300 space-y-1.5",children:[e.jsxs("p",{children:[e.jsx("b",{children:"How replies work."})," WhatsApp lets a business reply freely for 24 hours after the customer's last message. The assistant always replies straight away, so it is always inside that window. If ",e.jsx("i",{children:"you"})," reply from the inbox later than that, you'll be offered an approved ",e.jsx(L,{to:"/app/whatsapp/templates",className:"font-medium text-primary-600 dark:text-primary-400 hover:underline",children:"template"})," instead."]}),e.jsxs("p",{children:[e.jsx("b",{children:"What Meta charges."})," Meta bills your business directly for WhatsApp conversations according to its current pricing; nothing is added by Vatdi. Messages count toward your Vatdi plan the same way widget chats do."]}),e.jsxs("p",{children:[e.jsx("b",{children:"Sending beyond your test numbers"})," requires your business to be verified by Meta (Business Settings → Security Centre)."]})]})]}):e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"grid gap-4 md:grid-cols-2",children:[e.jsxs("button",{type:"button",onClick:()=>h("tech_provider"),disabled:!k.available,className:`card p-5 text-left transition ${f==="tech_provider"?"ring-2 ring-primary-500":""} ${k.available?"hover:border-primary-300":"opacity-60 cursor-not-allowed"}`,children:[e.jsxs("div",{className:"flex items-center gap-2 font-semibold text-gray-900 dark:text-gray-100",children:[e.jsx(ee,{className:"w-4 h-4 text-primary-600"})," Connect through Vatdi"]}),e.jsx("p",{className:"mt-1 text-sm text-gray-600 dark:text-gray-300",children:"One click. Log in with Facebook, pick or create the number, done. No developer account, no tokens to copy."}),!k.available&&e.jsx("p",{className:"mt-2 text-xs text-amber-700 dark:text-amber-300",children:"Not enabled on this installation yet — use your own Meta app below."})]}),e.jsxs("button",{type:"button",onClick:()=>h("own_app"),className:`card p-5 text-left transition hover:border-primary-300 ${f==="own_app"?"ring-2 ring-primary-500":""}`,children:[e.jsxs("div",{className:"flex items-center gap-2 font-semibold text-gray-900 dark:text-gray-100",children:[e.jsx(Z,{className:"w-4 h-4 text-primary-600"})," Use your own Meta app"]}),e.jsx("p",{className:"mt-1 text-sm text-gray-600 dark:text-gray-300",children:"You keep full control of the app and its billing. About ten minutes in Meta's developer console, then paste four values here."})]})]}),f==="tech_provider"&&k.available&&e.jsxs("div",{className:"card p-5 space-y-3",children:[e.jsx("h3",{className:"font-semibold text-gray-900 dark:text-gray-100",children:"Connect with Facebook"}),e.jsx("p",{className:"text-sm text-gray-600 dark:text-gray-300",children:"A Meta window opens. Log in with the Facebook account that manages your business, choose or create the WhatsApp number, and finish. Vatdi is added to that number automatically."}),e.jsxs("button",{onClick:W.start,disabled:W.busy,className:"btn-primary inline-flex items-center gap-2",children:[W.busy?e.jsx(ne,{className:"w-4 h-4 animate-spin"}):e.jsx(ee,{className:"w-4 h-4"})," ",W.busy?"Waiting for Meta…":"Connect with Facebook"]})]}),f==="own_app"&&e.jsxs(e.Fragment,{children:[e.jsxs("div",{className:"card p-5 space-y-3",children:[e.jsx("h3",{className:"font-semibold text-gray-900 dark:text-gray-100",children:"1. Get four values from Meta"}),e.jsxs("ol",{className:"list-decimal pl-5 text-sm text-gray-700 dark:text-gray-200 space-y-2",children:[e.jsxs("li",{children:["Go to ",e.jsxs("a",{href:"https://developers.facebook.com/apps/",target:"_blank",rel:"noopener noreferrer",className:"text-primary-600 dark:text-primary-400 hover:underline inline-flex items-center gap-0.5",children:["Meta for Developers ",e.jsx(ve,{className:"w-3 h-3"})]})," → ",e.jsx("b",{children:"Create app"})," → type ",e.jsx("b",{children:"Business"})," → add the ",e.jsx("b",{children:"WhatsApp"})," product."]}),e.jsxs("li",{children:["Under ",e.jsx("b",{children:"WhatsApp → API Setup"})," copy the ",e.jsx("b",{children:"Phone number ID"})," and ",e.jsx("b",{children:"WhatsApp Business Account ID"}),". Meta gives you a free test number here — use it first; add your real number later."]}),e.jsxs("li",{children:["Make a token that does not expire: ",e.jsx("b",{children:"Business Settings → Users → System users → Add"}),", assign the app, then ",e.jsx("b",{children:"Generate token"})," with ",e.jsx("code",{children:"whatsapp_business_messaging"})," and ",e.jsx("code",{children:"whatsapp_business_management"}),". ",e.jsx("span",{className:"text-amber-700 dark:text-amber-300",children:"The temporary token on the API Setup page expires in 24 hours — do not use it."})]}),e.jsxs("li",{children:["Under ",e.jsx("b",{children:"App settings → Basic"})," copy the ",e.jsx("b",{children:"App secret"}),". It lets Vatdi confirm each message really came from Meta."]})]})]}),e.jsxs("form",{onSubmit:F,className:"card p-5 space-y-4",children:[e.jsx("h3",{className:"font-semibold text-gray-900 dark:text-gray-100",children:"Paste them here"}),e.jsxs("div",{className:"grid gap-4 md:grid-cols-2",children:[e.jsx(R,{label:"Phone number ID",children:e.jsx("input",{required:!0,value:d.phone_number_id,onChange:l=>o({...d,phone_number_id:l.target.value}),className:"input w-full font-mono",placeholder:"e.g. 1055…"})}),e.jsx(R,{label:"WhatsApp Business Account ID",hint:"Needed for templates and for subscribing the app to your number.",children:e.jsx("input",{value:d.waba_id,onChange:l=>o({...d,waba_id:l.target.value}),className:"input w-full font-mono"})}),e.jsx(R,{label:"Permanent access token",children:e.jsx("input",{required:!0,type:"password",value:d.access_token,onChange:l=>o({...d,access_token:l.target.value}),className:"input w-full font-mono",autoComplete:"off"})}),e.jsx(R,{label:"App secret",children:e.jsx("input",{required:!0,type:"password",value:d.app_secret,onChange:l=>o({...d,app_secret:l.target.value}),className:"input w-full font-mono",autoComplete:"off"})})]}),e.jsx("p",{className:"text-xs text-gray-500 dark:text-gray-400",children:"Stored encrypted. Vatdi checks the number answers to this token before saving anything, so a wrong value is caught now."}),e.jsx("button",{type:"submit",disabled:w,className:"btn-primary inline-flex items-center gap-2",children:w?"Checking with Meta…":"Verify and save"})]})]})]}),e.jsx(Se,{connection:c})]})}export{Be as default};