https://app.snapto.ai/assets/TemplateGroupAiVariation-CvdJSD7c.js

1import{C as ce,q as pe,r as i,x as me,p as e,B as f,T as ye,b7 as ue,a0 as X,a1 as V,S as ge,b2 as xe,ak as he,dw as fe,bF as je,ag as U,N as w,y as be,fJ as ve}from"./index-C9IH3k-2.js";import{u as Ce}from"./useTemplateDetails-DA6kn5sZ.js";import{P as Te}from"./PageDescription-BrOUsEZE.js";import{I as Z,Q as we,R as Se}from"./TemplateUtil-D1DzmWLm.js";import{T as Ae}from"./TemplateGroupHelpDrawer-CH-qSecM.js";import{R as ke}from"./ArrowLeftOutlined-Bixtqyn1.js";import{A as Ee}from"./Wrapper-ChjuDa3w.js";import{C as Oe}from"./index-BOwvFOZJ.js";import"./HelperMethods-C-ewwU_x.js";import"./TeamOutlined-BZ7WVDnA.js";import"./InfoCircleOutlined-B7sKwm1k.js";const{Title:Ie,Text:l}=ye,Be=(d,p,S={})=>{if(!d)return{};const A=d.find(r=>r.type==="HEADER"),k=d.find(r=>r.type==="BODY"),j=d.find(r=>r.type==="FOOTER"),G=d.find(r=>r.type==="BUTTONS"),E=d.find(r=>r.type==="CAROUSEL");return E?{isCarouselType:!0,carouselData:(E.cards||[]).map((b,O)=>S[O]===void 0?b:{...b,components:b.components.map(u=>u.type==="BODY"?{...u,text:S[O]}:u)}),body:p!==void 0?p:k?.text||"",footer:j?.text||"",templateType:"CAROUSEL"}:{header:A?.format==="TEXT"?A.text:null,body:p!==void 0?p:k?.text||"",footer:j?.text||"",buttons:G?.buttons||[],templateType:"REGULAR"}},Me=()=>{const d=ce(),p=pe(a=>a.selectedWabaTokenDetails),[S,A]=i.useState([]),[k,j]=i.useState(!1),[G,E]=i.useState(null),[r,b]=i.useState(null),[O,u]=i.useState(!1),[I,ee]=i.useState(3),[N,Y]=i.useState(!1),[$,F]=i.useState([]),[te,H]=i.useState({}),[m,B]=i.useState({}),[v,M]=i.useState({}),[R,g]=i.useState({}),[ae,W]=i.useState(!1),[se,K]=i.useState(!1),{getTemplateDetails:ne}=Ce(),_=p?.whatsappBusinessAccountId,D=Object.values(R).filter(Boolean).length;i.useEffect(()=>{oe()},[]);const oe=async()=>{j(!0);try{const a=await me("/api/v1/messageTemplate/getTemplatesForSendMessage");a?.data&&A(a.data)}catch(a){console.error(a)}finally{j(!1)}},re=S.map((a,t)=>({value:`${a.name}$${a.language}`,label:a.name,key:t})),ie=async a=>{E(a),F([]),B({}),M({}),g({}),H({});const[t,o]=a.split("$");u(!0);const x=await ne(t,o);b(x),u(!1)},le=async()=>{if(!r){w.error("Please select a template first");return}Y(!0),F([]),B({}),M({}),g({}),H({});try{const t=await be("/api/v1/proxy/ai",{url:"/api/v1/whatsapp/generate-body-variations",method:"POST",headers:{"Content-Type":"application/json"},body:{variationCount:I,template:{template:r}}},!1);let o=null;if(t?.data&&Array.isArray(t.data)?o=t.data:t?.data?.data&&Array.isArray(t.data.data)?o=t.data.data:Array.isArray(t)&&(o=t),!o?.length){w.error("No variations returned");return}F(o),g(Object.fromEntries(o.map((x,L)=>[L,!0])))}catch{w.error("Failed to generate variations")}finally{Y(!1)}},de=async()=>{const a=Object.keys(R).filter(t=>R[t]).map(Number);W(!0);try{const t=a.map(o=>{const x=$[o]?.template,{id:L,parameter_format:z,status:J,...c}=x||{},C=m[o],h=v[o]||{};return C!==void 0||Object.keys(h).length>0?{...c,components:(c?.components||[]).map(n=>n.type==="BODY"&&C!==void 0?{...n,text:C}:n.type==="CAROUSEL"&&Object.keys(h).length>0?{...n,cards:(n.cards||[]).map((T,P)=>h[P]===void 0?T:{...T,components:T.components.map(y=>y.type==="BODY"?{...y,text:h[P]}:y)})}:n)}:c});await ve.post("/api/v1/messageTemplate/aiClone",{templateName:r.name,templateLanguage:r.language,createTemplateDtos:t}),w.success("Templates created successfully"),g({})}catch{w.error("Failed to create templates")}finally{W(!1)}},q=a=>g(t=>({...t,[a]:!t[a]}));return e.jsxs("div",{style:{paddingBottom:D>0?80:0},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:24},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:12},children:[e.jsx(f,{icon:e.jsx(ke,{}),onClick:()=>d("/ListTemplate/TemplateGroupManagement")}),e.jsxs("div",{children:[e.jsx(Ie,{level:4,style:{margin:0,lineHeight:1.3},children:"Generate Variation with AI"}),e.jsx(l,{type:"secondary",style:{fontSize:13},children:"AI-powered rewrites of an existing template body"})]})]}),e.jsx(f,{icon:e.jsx(ue,{}),onClick:()=>K(!0),children:"Help"})]}),e.jsx(Te,{description:"How does AI variation work?",style:{marginBottom:16},children:e.jsx(l,{children:"Pick an approved template, choose how many variations you want, and click Generate. The AI rewrites the body text with different wording while keeping the same structure. Review, edit if needed, then clone your favourites to your account as new templates."})}),e.jsxs(Z,{style:{marginBottom:24},styles:{body:{padding:"20px 24px"}},children:[e.jsxs(X,{gutter:16,align:"bottom",wrap:!1,children:[e.jsxs(V,{flex:"auto",children:[e.jsx(l,{strong:!0,style:{display:"block",marginBottom:6},children:"Source Template"}),e.jsx(ge,{style:{width:"100%"},placeholder:"Search and select a template",loading:k,showSearch:!0,value:G,onChange:ie,options:re,filterOption:(a,t)=>(t?.label??"").toLowerCase().includes(a.toLowerCase())})]}),e.jsxs(V,{style:{flexShrink:0},children:[e.jsxs(l,{strong:!0,style:{display:"block",marginBottom:6},children:["Variations ",e.jsx(l,{type:"secondary",style:{fontWeight:400,fontSize:12},children:"(1–5)"})]}),e.jsx(xe,{min:1,max:5,value:I,onChange:a=>ee(a||1),style:{width:80}})]}),e.jsx(V,{style:{flexShrink:0,paddingTop:22},children:e.jsx(f,{type:"primary",size:"middle",loading:N,disabled:!r||O,onClick:le,children:"Generate"})})]}),_&&e.jsx(Ee,{style:{marginTop:16},type:"info",showIcon:!0,title:e.jsxs(l,{style:{fontSize:13},children:["Cloned templates will be created under WABA Phoner Number ",e.jsxs(l,{code:!0,children:[" ",p?.displayPhoneNumber]})," waba",e.jsx(l,{code:!0,children:_}),". Add them to any group afterwards."]})})]}),N&&e.jsxs("div",{style:{textAlign:"center",padding:"60px 0"},children:[e.jsx(he,{size:"large"}),e.jsx("div",{style:{marginTop:14},children:e.jsxs(l,{type:"secondary",children:["Generating ",I," variation",I>1?"s":"","…"]})})]}),!N&&$.length>0&&e.jsx(e.Fragment,{children:e.jsx(X,{gutter:[16,16],children:$.map((a,t)=>{const o=a?.template?.components,x=!!o?.find(s=>

1s.type==="CAROUSEL"),L=o?.find(s=>s.type==="CAROUSEL"),z=o?.find(s=>s.type==="BODY"),J=!!R[t],c=!!te[t],C=m[t]!==void 0||Object.keys(v[t]||{}).length>0,h=Be(o,m[t],v[t]||{});return e.jsx(V,{xs:24,sm:12,lg:8,children:e.jsxs(Z,{size:"small",style:{cursor:"pointer",height:"100%"},styles:{body:{padding:14}},onClick:()=>q(t),children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:12},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:8},children:[e.jsx(Oe,{checked:J,onChange:()=>q(t),onClick:s=>s.stopPropagation()}),e.jsxs(l,{strong:!0,style:{fontSize:13},children:["Variation ",t+1]}),C&&e.jsx("span",{style:{fontSize:10,padding:"1px 6px",borderRadius:10,background:"var(--ant-color-warning-bg, #fffbe6)",color:"var(--ant-color-warning, #faad14)",border:"1px solid var(--ant-color-warning-border, #ffe58f)",lineHeight:"16px"},children:"Edited"})]}),e.jsx(f,{size:"small",type:c?"primary":"text",icon:c?e.jsx(fe,{}):e.jsx(je,{}),onClick:s=>{s.stopPropagation(),H(n=>({...n,[t]:!n[t]}))},children:c?"Done":"Edit"})]}),e.jsx("div",{onClick:s=>s.stopPropagation(),children:e.jsx(we,{type:"template",payload:h,showInfo:!1})}),c&&e.jsx("div",{style:{marginTop:12,display:"flex",flexDirection:"column",gap:8,borderTop:"1px solid var(--ant-color-border, #e8e8e8)",paddingTop:12},onClick:s=>s.stopPropagation(),children:x?e.jsxs(e.Fragment,{children:[z&&e.jsxs("div",{children:[e.jsx(l,{type:"secondary",style:{fontSize:11,display:"block",marginBottom:3},children:"Main body"}),e.jsx(U.TextArea,{rows:2,value:m[t]!==void 0?m[t]:z.text||"",placeholder:"Main body text…",onChange:s=>B(n=>({...n,[t]:s.target.value}))})]}),e.jsx(l,{type:"secondary",style:{fontSize:11},children:"Card bodies:"}),(L?.cards||[]).map((s,n)=>{const T=s.components?.find(y=>y.type==="BODY"),P=(v[t]||{})[n]!==void 0?(v[t]||{})[n]:T?.text||"";return e.jsxs("div",{children:[e.jsxs(l,{type:"secondary",style:{fontSize:11,display:"block",marginBottom:3},children:["Card ",n+1]}),e.jsx(U.TextArea,{rows:2,value:P,placeholder:`Card ${n+1} body…`,onChange:y=>M(Q=>({...Q,[t]:{...Q[t]||{},[n]:y.target.value}}))})]},n)})]}):e.jsx(U.TextArea,{rows:3,value:m[t]!==void 0?m[t]:z?.text||"",placeholder:"Edit body text…",onChange:s=>B(n=>({...n,[t]:s.target.value}))})})]})},t)})})}),D>0&&e.jsxs("div",{style:{position:"fixed",bottom:0,left:0,right:0,zIndex:100,background:"var(--ant-color-bg-container, #fff)",borderTop:"1px solid var(--ant-color-border, #e8e8e8)",boxShadow:"0 -4px 16px rgba(0,0,0,0.08)",padding:"12px 32px",display:"flex",alignItems:"center",justifyContent:"space-between"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:16},children:[e.jsxs(l,{strong:!0,children:[D," variation",D>1?"s":""," selected"]}),e.jsx(f,{type:"link",size:"small",style:{padding:0},onClick:()=>g({}),children:"Clear"})]}),e.jsx(f,{type:"primary",size:"large",icon:e.jsx(Se,{}),loading:ae,onClick:de,children:"Clone to Account"})]}),e.jsx(Ae,{open:se,onClose:()=>K(!1),section:"aiVariation"})]})};export{Me as default};