1import{C as b,r,q as F,y as k,p as e,L as o,T as a,B as n,af as S,x as T,bj as _}from"./index-C9IH3k-2.js";import{S as v}from"./MainApp-BoiAvjMg.js";import{T as w,g as A}from"./TemplateUtil-D1DzmWLm.js";import{M as I}from"./MetaLinks-BHIxdNEZ.js";import{u as C}from"./HelperMethods-C-ewwU_x.js";import{P as L}from"./PageDescription-BrOUsEZE.js";import{R as W}from"./SyncOutlined-D8Vo-rc6.js";import{F as P}from"./Table-isZ0WXp4.js";import"./Wrapper-ChjuDa3w.js";import"./index-BOwvFOZJ.js";import"./Pagination-D1z-xPUv.js";import"./HolderOutlined-YOHjCGKZ.js";const{Title:N,Text:i}=a,Q=()=>{const u=b(),[g,l]=r.useState(!1),[m,c]=r.useState(!1),[x,f]=r.useState([]),d=C(),p=F(t=>t.selectedWabaTokenDetails);r.useEffect(()=>{h()},[]);const h=async()=>{c(!0);try{const t=await k("/api/v1/whatsapp/flow/list",{search:[],pagination:{current:1,pageSize:1e3}});t&&t.data&&f(t.data.results)}catch{}c(!1)},y=async()=>{try{l(!0),(await T("/api/v1/whatsapp/flow/sync")).status===200&&(_.success({title:"Success",description:"Flows synced successfully!"}),h())}catch{}finally{l(!1)}},j=[{title:"Flow ID",dataIndex:"flowId",key:"flowId",ellipsis:!0,render:t=>e.jsx(i,{copyable:!0,children:t})},{title:"Flow Name",dataIndex:"name",key:"name",render:(t,s)=>e.jsx(i,{strong:!0,children:t})},{title:"Categories",dataIndex:"categories",key:"categories",render:t=>!t||t.length===0?null:e.jsx(o,{wrap:"wrap",gap:"small",children:t.map(s=>e.jsx(w,{color:"blue",children:s.replace(/_/g," ")},s))})},{title:"Status",dataIndex:"status",key:"status",render:t=>{const s=t==="PUBLISHED"?"green":"red";return e.jsx(w,{color:s,children:t})}},{title:"Creation Time",dataIndex:"creationTime",key:"creationTime",sorter:!0,defaultSortOrder:"descend",render:(t,s)=>e.jsx(a.Text,{children:A(s.creationTime)})},{title:"Action",dataIndex:"action",key:"action",render:(t,s)=>e.jsx(e.Fragment,{children:s.preview_url&&e.jsx(n,{type:"link",href:s.preview_url,target:"_blank",style:{padding:0},children:"Preview Flow"})})}];return e.jsxs(o,{vertical:!0,gap:"large",children:[e.jsxs(o,{justify:"space-between",align:"center",wrap:!0,children:[e.jsx(N,{level:4,style:{margin:0},children:"Flows"}),e.jsxs(o,{gap:"middle",children:[e.jsx(n,{icon:e.jsx(v,{}),onClick:()=>u("/GoogleSheets?type=FLOW"),disabled:!d("manage_integrations"),children:"View Google Sheets"}),e.jsx(n,{icon:e.jsx(W,{}),onClick:y,loading:g,disabled:!d("manage_flow"),children:"Sync Flows"}),e.jsx(n,{target:"_blank",href:`${I.flows}?business_id=${p?.businessId}&waba_id=${p?.whatsappBusinessAccountId}`,icon:e.jsx(S,{}),type:"primary",children:"Create Flow"})]})]}),e.jsxs(L,{description:"What are WhatsApp Flows? How to create flows on WhatsApp?",defaultExpanded:!0,children:[e.jsx("p",{style:{margin:0},children:"WhatsApp Flows makes it easy for your customers to get things done within WhatsApp. Pairing Flows with your marketing campaigns can improve customer satisfaction by providing richer experiences, which can boost conversions and improve results."}),e.jsx(i,{strong:!0,children:"How to create a Flow:"}),e.jsxs("ol",{style:{margin:0},children:[e.jsxs("li",{children:["Go to the"," ",e.jsx(a.Link,{href:"https://developers.facebook.com/docs/whatsapp/flows/playground/",target:"_blank",children:"WhatsApp Flows Playground"})," ","â build your flow using a simple drag-and-drop UI (forms, buttons, inputs, checkboxes, etc.)."]}),e.jsxs("li",{children:["Once done, click ",e.jsx("b",{children:'"Copy Flow JSON"'})," to copy the generated JSON."]}),e.jsxs("li",{children:["Come back here, click ",e.jsx("b",{children:'"Create Flow"'}),", fill in the name, category & template."]}),e.jsx("li",{children:"Paste the copied JSON, save it, and publish your flow."})]}),e.jsx(i,{strong:!0,children:"Video Tutorials:"}),e.jsx("p",{style:{margin:0},children:"Introductory video tutorials to learn how to build Flows."}),e.jsxs("ol",{style:{margin:0},children:[e.jsx("li",{children:e.jsx(a.Link,{href:"https://www.youtube.com/watch?v=0s_0Y843h60",target:"_blank",children:"Creating and Sending WhatsApp Flows with Message Templates"})}),e.jsx("li",{children:e.jsx(a.Link,{href:"https://www.youtube.com/watch?v=gx_QGaSLoOA",target:"_blank",children:"Create a New WhatsApp Flows Using Flows Builder interface"})}),e.jsx("li",{children:e.jsx(a.Link,{href:"https://www.youtube.com/watch?v=QO_ngN8H5GU",target:"_blank",children:"Connecting WhatsApp Flows to an Endpoint"})})]})]}),e.jsx(P,{columns:j,dataSource:x,rowKey:"flowId",loading:m,pagination:{showSizeChanger:!0,pageSizeOptions:["10","20","50"],showTotal:t=>`Total ${t} flows`},scroll:{x:"max-content"}})]})};export{Q as default};
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.