https://app.snapto.ai/assets/Webhook-C7hfI5zM.js

1import{b3 as z,r as n,aj as l,q as G,p as s,L as b,T as k,B as x,ag as g,S as Q,v as X,af as Z,x as I,bF as ee,y as H,z as te}from"./index-C9IH3k-2.js";import{N as se,J as O,g as ae}from"./TemplateUtil-D1DzmWLm.js";import{P as oe}from"./MainApp-BoiAvjMg.js";import{P as re}from"./PageDescription-BrOUsEZE.js";import{F as ne}from"./Table-isZ0WXp4.js";import{S as P}from"./index-8jSYgZzf.js";import{P as ie}from"./index-C0dhduHx.js";import"./Wrapper-ChjuDa3w.js";import"./HelperMethods-C-ewwU_x.js";import"./index-BOwvFOZJ.js";import"./Pagination-D1z-xPUv.js";import"./HolderOutlined-YOHjCGKZ.js";const A=[{value:"metaWebhook",label:"Meta Webhooks"},{value:"messageSent",label:"Out message"}],le=A.reduce((u,c)=>(u[c.value]=c.label,u),{}),ve=()=>{const u=z(),[c,f]=n.useState([]),[R,T]=n.useState(!1),[v,S]=n.useState(!1),[W,N]=n.useState({}),[r]=l.useForm(),[D,U]=n.useState([]),V=G(e=>e.selectedPhoneRec),[w,L]=n.useState(!0),[m,y]=n.useState(!1),[p,d]=n.useState([{key:"",value:""}]),q=[{title:"Name",dataIndex:"name",key:"name"},{title:"Phone Number Id",dataIndex:"phoneNumberId",key:"phoneNumberId"},{title:"Type",dataIndex:"type",key:"type",render:e=>le[e]||e},{title:"Active",dataIndex:"active",key:"active",render:(e,t)=>s.jsx(P,{checked:e,disabled:!0})},{title:"URL",dataIndex:"url",key:"url"},{title:"Creation Time",dataIndex:"creationTime",key:"creationTime",sorter:(e,t)=>e.creationTime-t.creationTime,defaultSortOrder:"descend",render:(e,t)=>s.jsx(k.Text,{children:ae(t.creationTime)})},{title:"Action",dataIndex:"Action",key:"Action",render:(e,t)=>s.jsxs(b,{gap:"small",children:[s.jsx(x,{onClick:()=>M(t.id),children:s.jsx(ee,{})}),s.jsx(ie,{title:"Delete Webhook",description:"Are you sure you want to delete this webhook?",onConfirm:()=>_(t.id),okText:"Yes",cancelText:"No",children:s.jsx(x,{children:s.jsx(O,{})})})]})}],M=e=>{const t=c.findIndex(a=>a.id===e);if(t!==-1){const a={...c[t]};N(a),E("EDIT",a)}else u.error({title:"Error",description:"Error Record Not Found!"})},_=async e=>{await te(`/api/v1/webhook/deleteWebhook/${e}`)&&(f(a=>a.filter(o=>o.id!==e)),u.success({title:"Success",description:"Item deleted successfully."}))},B=()=>{r.resetFields(),N({}),S(!1),T(!1),y(!1),d([{key:"",value:""}])},E=async(e,t)=>{if(e==="CREATE")j(!0),r.setFieldsValue({active:!0}),y(!1),d([{key:"",value:""}]);else if(e==="EDIT"){if(r.setFieldsValue({name:t.name}),r.setFieldsValue({active:t.active}),r.setFieldsValue({url:t.url}),r.setFieldsValue({phoneNumberId:t.phoneNumberId}),r.setFieldsValue({type:t.type}),j(t.active),t.headers&&Object.keys(t.headers).length>0){y(!0);const a=Object.entries(t.headers).map(([o,i])=>({key:o,value:i}));d(a)}else y(!1),d([{key:"",value:""}]);S(!0)}T(!0)},C=()=>{B()};n.useEffect(()=>{(async()=>{try{const t=await I("/api/v1/onboard/getPhones");U(t.data.map(a=>({key:a.phoneNumberId,label:a.displayPhoneNumber})))}catch{}})()},[]),n.useEffect(()=>{(async()=>{try{const t=await I("/api/v1/webhook/listWebhooks");f(t?.data)}catch{}})()},[V]);const K=async e=>{let t={};m&&p.forEach(o=>{const i=o.key?.trim(),h=o.value?.trim();i&&h&&(t[i]=h)});const a={...e,...m&&Object.keys(t).length>0&&{headers:t}};if(v){const o={name:e.name,active:e.active,id:W.id,phoneNumberId:e.phoneNumberId,type:e.type,url:e.url,...m&&Object.keys(t).length>0&&{headers:t}};try{await H("/api/v1/webhook/addUpdateWebhook",o);const i=c.findIndex(h=>h.id===W.id);if(i!==-1){const h=[...c];h[i]={...h[i],active:e.active,phoneNumberId:e.phoneNumberId,type:e.type,url:e.url,name:e.name,...m&&Object.keys(t).length>0&&{headers:t}},f(h)}u.success({title:"Success",description:"Item updated successfully!"})}catch{}}else try{await H("/api/v1/webhook/addUpdateWebhook",a);try{const o=await I("/api/v1/webhook/listWebhooks");f(o.data)}catch{}u.success({title:"Success",description:"Item created successfully!"})}catch{}C()},j=e=>{L(e)},J=e=>{y(e),e||d([{key:"",value:""}])},Y=()=>{d([...p,{key:"",value:""}])},$=e=>{const t=p.filter((a,o)=>o!==e);d(t.length===0?[{key:"",value:""}]:t)},F=(e,t,a)=>{const o=[...p];o[e][t]=a,d(o)};return s.jsxs(b,{vertical:!0,gap:"large",children:[s.jsxs(b,{justify:"space-between",wrap:!0,children:[s.jsx(k.Title,{level:4,style:{margin:0},children:"Webhooks"}),s.jsx(x,{type:"primary",onClick:()=>E("CREATE"),children:"Create Webhook"})]}),s.jsx(re,{description:"What are Webhooks?",children:"Webhooks allow you to receive real-time notifications when specific WhatsApp events occur, such as message delivery, new messages from customers, or status updates. Configure webhooks by providing a name, selecting a phone number, and specifying a URL endpoint that will receive HTTP PO

1ST requests with event data. Use webhooks to integrate WhatsApp with your existing systems, automate responses, or track conversation metrics in external platforms."}),s.jsx(ne,{columns:q,dataSource:c,scroll:{x:"max-content"}}),s.jsx(se,{title:v?"Update Webhook":"Create New Webhook",open:R,onOk:()=>r.submit(),onCancel:C,width:600,okText:v?"Update":"Create",children:s.jsxs(l,{form:r,onFinish:K,layout:"vertical",children:[s.jsx(l.Item,{name:"name",label:"Webhook Name",rules:[{required:!0,message:"Please enter webhook name"}],children:s.jsx(g,{placeholder:"Enter a descriptive name for your webhook"})}),s.jsx(l.Item,{name:"type",label:"Type",rules:[{required:!0,message:"Please select a webhook type"}],children:s.jsx(Q,{placeholder:"Select webhook type",options:A})}),s.jsx(l.Item,{name:"phoneNumberId",label:"Phone Number",rules:[{required:!0,message:"Please select a phone number"}],children:s.jsx(oe,{phones:D.map(e=>({value:e.key,label:e.label})),placeholder:"Select phone number",style:{width:"100%"}})}),s.jsx(l.Item,{label:"Custom Headers",children:s.jsxs(b,{align:"center",gap:"small",children:[s.jsx(P,{checked:m,onChange:J}),s.jsx(k.Text,{type:"secondary",children:"Add custom HTTP headers to webhook requests"})]})}),m&&s.jsx(l.Item,{children:s.jsxs(X,{orientation:"vertical",size:"middle",style:{width:"100%"},children:[s.jsx(k.Text,{strong:!0,children:"Header Key-Value Pairs"}),p.map((e,t)=>s.jsxs(b,{gap:"middle",align:"center",children:[s.jsx(g,{placeholder:"Header Key",value:e.key,onChange:a=>F(t,"key",a.target.value),style:{flex:1}}),s.jsx(g,{placeholder:"Header Value",value:e.value,onChange:a=>F(t,"value",a.target.value),style:{flex:1}}),s.jsx(x,{type:"text",danger:!0,icon:s.jsx(O,{}),onClick:()=>$(t),disabled:p.length===1})]},t)),s.jsx(x,{type:"dashed",onClick:Y,icon:s.jsx(Z,{}),style:{width:"100%"},children:"Add Header"})]})}),s.jsx(l.Item,{name:"url",label:"Webhook URL",rules:[{required:!0,message:"Please enter webhook URL"},{type:"url",message:"Please enter a valid URL"}],children:s.jsx(g,{placeholder:"https://your-domain.com/webhook"})}),s.jsx(l.Item,{name:"active",label:"Active",valuePropName:"checked",children:s.jsxs(b,{align:"center",gap:"small",children:[s.jsx(P,{checked:w,onChange:e=>{j(e),r.setFieldsValue({active:e})}}),s.jsx(k.Text,{type:w?"success":"secondary",children:w?"Active":"Inactive"})]})})]})})]})};export{ve as default};