https://knotcrm.com/assets/forms-builder-CWO1P2JX.js

1import{au as D,u as S,dl as E,r as p,j as e,L as I,bH as U,dm as B,dn as _,I as C,a3 as z,ad as M,B as F,bj as q,bk as W,aG as H,dp as Q,dq as G,dr as $,ds as J,f as O,P as R,dt as V,t as b,A as N,b7 as K,T as X}from"./index-D8ohhcv_.js";import{a as Y}from"./sequences-DH4GLFN7.js";import{C as Z}from"./chevron-up-B_v3I9rw.js";import{G as ee}from"./grip-vertical-DtznOl5o.js";function ie(){var r,u;const{id:t}=D(),l=S(h=>h.activeWorkspaceId),o=E(l,t??null),[c,m]=p.useState("design"),n=((r=o.data)==null?void 0:r.form)??null,x=((u=o.data)==null?void 0:u.fields)??[];return o.isLoading?e.jsx("div",{className:"px-5 py-6 text-[13px] text-[color:var(--color-muted-foreground)]",children:"Loading…"}):n?e.jsxs("div",{className:"mx-auto max-w-5xl px-4 py-5 sm:px-5 sm:py-6 lg:px-6 lg:py-8",children:[e.jsx("div",{className:"mb-4",children:e.jsxs(I,{to:"/settings/forms",className:"inline-flex items-center gap-1 text-[12px] text-[color:var(--color-muted-foreground)] hover:underline",children:[e.jsx(U,{className:"h-3 w-3"})," All forms"]})}),e.jsx(te,{form:n}),e.jsxs("div",{className:"mb-4 mt-4 flex gap-1 overflow-x-auto border-b text-[13px]",children:[e.jsx(L,{label:"Design",active:c==="design",onClick:()=>m("design")}),e.jsx(L,{label:`Submissions (${n.submissionsCount})`,active:c==="submissions",onClick:()=>m("submissions")})]}),c==="design"?e.jsx(se,{form:n,fields:x}):e.jsx(ae,{formId:n.id})]}):e.jsxs("div",{className:"px-5 py-6 text-[13px] text-[color:var(--color-muted-foreground)]",children:["Form not found."," ",e.jsx(I,{to:"/settings/forms",className:"underline",children:"Back to list"})]})}function L({label:t,active:l,onClick:o}){return e.jsx("button",{type:"button",onClick:o,className:"border-b-2 px-3 py-2 transition-colors "+(l?"border-[color:var(--color-foreground)] text-[color:var(--color-foreground)]":"border-transparent text-[color:var(--color-muted-foreground)] hover:text-[color:var(--color-foreground)]"),children:t})}function te({form:t}){var w;const l=S(a=>a.activeWorkspaceId),o=B(l,t.id),c=_(l,t.id),m=Y(l),[n,x]=p.useState(t.name),[r,u]=p.useState(t.description??""),[h,j]=p.useState(t.targetSequenceId);p.useEffect(()=>{x(t.name),u(t.description??""),j(t.targetSequenceId)},[t.id,t.updatedAt]);const f=n!==t.name||(r??"")!==(t.description??"")||h!==t.targetSequenceId;async function y(){try{await o.mutateAsync({name:n,description:r||null,targetSequenceId:h}),b.success("Form updated")}catch(a){b.error(a instanceof N?a.payload.message:"Error")}}async function g(){try{await c.mutateAsync(!t.isPublished),b.success(t.isPublished?"Form taken offline":"Form published")}catch(a){b.error(a instanceof N?a.payload.message:"Error")}}async function A(){try{await navigator.clipboard.writeText(t.publicUrl),b.success("URL copied")}catch{b.error("Unable to copy")}}return e.jsxs("section",{className:"space-y-3 rounded-md border p-3 sm:p-4",children:[e.jsxs("div",{className:"grid gap-3 sm:grid-cols-2",children:[e.jsxs("div",{children:[e.jsx("label",{className:"mb-1 block text-[11.5px] text-[color:var(--color-muted-foreground)]",children:"Name"}),e.jsx(C,{value:n,onChange:a=>x(a.target.value),maxLength:128})]}),e.jsxs("div",{children:[e.jsx("label",{className:"mb-1 block text-[11.5px] text-[color:var(--color-muted-foreground)]",children:"Auto-enroll in sequence (optional)"}),e.jsxs("select",{value:h??"",onChange:a=>j(a.target.value||null),className:"h-8 w-full rounded-md border bg-[color:var(--color-background)] px-2 text-[13px]",children:[e.jsx("option",{value:"",children:"— None —"}),(((w=m.data)==null?void 0:w.sequences)??[]).filter(a=>a.isPublished).map(a=>e.jsx("option",{value:a.id,children:a.name},a.id))]})]})]}),e.jsxs("div",{children:[e.jsx("label",{className:"mb-1 block text-[11.5px] text-[color:var(--color-muted-foreground)]",children:"Description"}),e.jsx("textarea",{value:r,onChange:a=>u(a.target.value),rows:2,maxLength:2e3,className:"w-full resize-y rounded-md border bg-[color:var(--color-background)] px-2 py-1.5 text-[12.5px]"})]}),e.jsxs("div",{className:"flex flex-wrap items-center gap-2",children:[e.jsx("code",{className:"min-w-0 max-w-full flex-1 truncate rounded bg-[color:var(--color-muted)]/40 px-2 py-1 text-[11px] sm:flex-none",children:t.publicUrl}),e.jsx("button",{type:"button",onClick:A,title:"Copy URL",className:"rounded p-1 text-[color:var(--color-muted-foreground)] hover:bg-[color:var(--color-accent)]",children:e.jsx(z,{className:"h-3.5 w-3.5"})}),t.isPublished?e.jsx("a",{href:t.publicUrl,target:"_blank",rel:"noreferrer",className:"rounded p-1 text-[color:var(--color-muted-foreground)] hover:bg-[color:var(--color-accent)]",children:e.jsx(M,{className:"h-3.5 w-3.5"})}):null,e.jsx("span",{className:"grow"}),f?e.jsxs(F,{size:"sm",variant:"outline",onClick:y,disabled:o.isPending,children:[o.isPending?e.jsx(q,{className:"mr-1 h-3.5 w-3.5 animate-spin"}):e.jsx(W,{className:"mr-1 h-3.5 w-3.5"}),"Save"]}):null,e.jsxs(F,{size:"sm",onClick:g,disabled:c.isPending,variant:t.isPublished?"outline":"default",children:[c.isPending?e.jsx(q,{className:"mr-1 h-3.5 w-3.5 animate-spin"}):null,t.isPublished?"Take offline":"Publish"]})]})]})}function se({form:t,fields:l}){var a;const o=S(s=>s.activeWorkspaceId),c=H(t.entityDefinitionApiSlug,o),m=Q(o,t.id),n=G(o,t.id),x=$(o,t.id),r=J(o,t.id),u=O(),h=p.useMemo(()=>{var i;const s=new Map;for(const d of((i=c.data)==null?void 0:i.attributes)??[])s.set(d.apiSlug,d);return s},[c.data]),j=new Set(l.map(s=>s.attributeDefinitionId).filter(s=>!!s)),f=(((a=c.data)==null?void 0:a.attributes)??[]).filter(s=>!j.has(s.id)&&s.type!=="record_reference"&&s.type!=="actor_reference"&&s.type!=="interaction"&&s.apiSlug!=="created_at"&&s.apiSlug!=="updated_at"&&s.apiSlug!=="record_id");async function y(s){try{await m.mutateAsync({attributeDefinitionId:(s==null?void 0:s.id)??null,label:(s==null?void 0:s.title)??"Free field",isRequired:(s==null?void 0:s.isRequired)??!1,insertAt:"end"})}catch(i){b.error(i instanceof N?i.payload.message:"Error")}}async function g(s,i){try{await n.mutateAsync({fieldId:s,body:i})}catch(d){b.error(d instanceof N?d.payload.message:"Error")}}async function A(s,i){if(await u({title:`Remove field "${i}"?`,confirmLabel:"Remove",tone:"destructive"}))try{await x.mutateAsync(s)}catch(v){b.error(v instanceof N?v.payload.message:"Error")}}async function w(s,i){const d=[...l],v=s+i;if(v<0||v>=d.length)return;const P=d[s],T=d[v];d[s]=T,d[v]=P;try{await r.mutateAsync({fieldIds:d.map(k=>k.id)})}catch(k){b.error(k instanceof N?k.payload.message:"Error")}}return e.jsxs("section",{className:"mt-4 grid gap-4 lg:grid-cols-3",children:[e.jsxs("div",{className:"space-y-3 lg:col-span-2",children:[e.jsx("h2",{className:"text-[14px] font-medium",children:"Form fields"}),l.length===0?e.jsx("div",{className:"rounded-md border border-dashed px-4 py-6 text-center text-[12.5px] text-[color:var(--color-muted-foreground)]",children:"No fields yet. Add an attribute from the right column to get started."}):e.jsx("ul",{className:"divide-y rounded-md border",children:l.map((s,i)=>{var d;return e.jsx(re,{field:s,attrType:s.attributeDefinitionId?((d=h.get(s.attributeApiSlug??""))==null?void 0:d.type)??null:null,onUpdate:v=>g(s.id,v),onDelete:()=>A(s.id,s.label),...i>0?{onMoveUp:()=>w(i,-1)}:{},...i<l.length-1?{onMoveDown:()=>w(i,1)}:{}},s.id)})})]}),e.jsxs("div",{className:"space-y-3",children:[e.jsx("h2",{className:"text-[14px] font-medium",children:"Add field"}),e.jsxs("div",{className:"rounded-md border p-3 text-[12.5px]",children:[e.jsxs("p",{className:"mb-2 text-[color:var(--color-muted-foreground)]",children:["Available attributes for object ",e.jsx("b",{children:t.entityDefinitionApiSlug}),":"]}),c.isLoading?e.jsx("div",{className:"text-[color:var(--color-muted-foreground)]",children:"Loading…"}):f.length===0?e.jsx("div",{className:"text-[color:var(--color-muted-foreground)]",children:"All mappable attributes are already in the form."}):e.jsx("ul",{className:"space-y-1",children:f.map(s=>e.jsx("li",{children:e.jsxs("button",{type:"button",onClick:()=>y(s),className:"flex w-full items-center gap-2 rounded-md px-2 py-1 text-left hover:bg-[color:var(--color-accent)]",children:[e.jsx(R,{className:"h-3 w-3"}),e.jsx("span",{className:"font-medium",children:s.title}),e.jsxs("span",{className:"text-[11px] text-[color:var(--color-muted-foreground)]",children:["(",s.type,")"]}),s.isRequired?e.jsx("span",{className:"text-[10.5px] text-amber-600",children:"required"}):null]})},s.id))}),e.jsx("hr",{className:"my-2 border-[color:var(--color-border)]"}),e.jsxs("button",{type:"button",onClick:()=>y(null),className:"flex w-full items-center gap-2 rounded-md px-2 py-1 text-left text-[color:var(--color-muted-foreground)] hover:bg-[color:var(--color-accent)]",children:[e.jsx(R,{className:"h-3 w-3"}),"Free field (no mapping)"]})]})]})]})}function re({field:t,attrType:l,onUpdate:o,onDelete:c,onMoveUp:m,onMoveDown:n}){const[x,r]=p.useState(t.label),[u,h]=p.useState(t.helpText??""),[j,f]=p.useState(t.isRequired);p.useEffect(()=>{r(t.label),h(t.helpText??""),f(t.isRequired)},[t.id,t.label,t.helpText,t.isRequired]);const y=x!==t.label||(u??"")!==(t.helpText??"")||j!==t.isRequired;return e.jsxs("li",{className:"flex items-start gap-2 px-3 py-3 text-[13px]",children:[e.jsxs("div",{className:"flex flex-col items-center gap-0.5 pt-1 text-[color:var(--color-muted-foreground)]",children:[e.jsx("button",{type:"button",onClick:m,disabled:!m,"aria-label":"Move up",className:"rounded p-0.5 hover:bg-[color:var(--color-accent)] disabled:opacity-30",children:e.jsx(Z,{className:"h-3 w-3"})}),e.jsx(ee,{className:"h-3 w-3"}),e.jsx("button",{type:"button",onClick:n,disabled:!n,"aria-label":"Move down",className:"rounded p-0.5 hover:bg-[color:var(--color-accent)] disabled:opacity-30",children:e.jsx(K,{className:"h-3 w-3"})})]}),e.jsxs("div",{className:"min-w-0 flex-1 space-y-2",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(C,{value:x,onChange:g=>r(g.target.value),maxLength:128,placeholder:"Field label",className:"h-7 text-[12.5px]"}),e.jsxs("span",{className:"rounded bg-[color:var(--color-muted)] px-1.5 py-0.5 text-[10.5px] text-[color:var(--color-muted-foreground)]",children:[l??"free",t.attributeApiSlug?` · ${t.attributeApiSlug}`:""]})]}),e.jsx(C,{value:u,onChange:g=>h(g.target.value),maxLength:500,placeholder:"Help text (optional)",className:"h-7 text-[12.5px]"}),e.jsxs("label",{className:"flex items-center gap-2 text-[12px]",children:[e.jsx("input",{type:"checkbox",checked:j,onChange:g=>f(g.target.checked)}),"Required"]}),y?e.jsx(F,{size:"sm",variant:"outline",className:"h-6 text-[11px]",onClick:()=>o({label:x,isRequired:j,helpText:u.trim()?u.trim():null}),children:"Save field"}):null]}),e.jsx("button",{type:"button",onClick:c,"aria-label":"Remove",className:"rounded p-1 text-[color:var(--color-muted-foreground)] hover:bg-[color:var(--color-destructive)]/10 hover:text-[color:var(--color-destructive)]",children:e.jsx(X,{className:"h-3.5 w-3.5"})})]})}function ae({formId:t}){var x;const l=S(r=>r.activeWorkspaceId),[o,c]=p.useState(void 0),m=V(l,t,o),n=((x=m.data)==null?void 0:x.submissions)??[];return e.jsxs("section",{className:"mt-4 space-y-3",children:[e.jsxs("div",{className:"flex items-center gap-2 text-[12.5px]",children:[e.jsx("span",{className:"text-[color:var(--color-muted-foreground)]",children:"Filter:"}),["all","success","spam","failed"].map(r=>{const u=o===void 0?r==="all":r===o;return e.jsx("button",{type:"button",onClick:()=>c(r==="all"?void 0:r),className:"rounded-md border px-2 py-0.5 text-[11.5px] capitalize "+(u?"border-[color:var(--color-foreground)]":"border-transparent text-[color:var(--color-muted-foreground)] hover:bg-[color:var(--color-accent)]"),children:r},r)})]}),m.isLoading?e.jsx("div",{className:"py-6 text-[12.5px] text-[color:var(--color-muted-foreground)]",children:"Loading…"}):n.length===0?e.jsx("div",{className:"rounded-md border border-dashed px-4 py-10 text-center text-[12.5px] text-[color:var(--color-muted-foreground)]",children:"No submissions yet."}):e.jsx("ul",{className:"divide-y rounded-md border",children:n.map(r=>e.jsxs("li",{className:"px-3 py-2 text-[12.5px]",children:[e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"rounded-full px-1.5 py-[1px] text-[10.5px] font-medium uppercase "+(r.status==="success"?"bg-green-500/15 text-green-700 dark:text-green-300":r.status==="spam"?"bg-amber-500/15 text-amber-700 dark:text-amber-300":"bg-red-500/15 text-red-700 dark:text-red-300"),children:r.status}),e.jsx("span",{className:"text-[11.5px] text-[color:var(--color-muted-foreground)]",children:new Date(r.submittedAt).toLocaleStr

1ing()}),r.createdRecordId?e.jsx("span",{className:"text-[11.5px] text-[color:var(--color-muted-foreground)]",children:"· record created"}):null,r.enrollmentId?e.jsx("span",{className:"text-[11.5px] text-[color:var(--color-muted-foreground)]",children:"· enrolled"}):null]}),r.errorReason?e.jsx("div",{className:"mt-1 text-[11px] text-red-600",children:r.errorReason}):null,e.jsx("pre",{className:"mt-1 overflow-x-auto rounded bg-[color:var(--color-muted)]/40 px-2 py-1 text-[11px]",children:JSON.stringify(r.payload,null,2)})]},r.id))})]})}export{ie as default};