https://nwb-webapp-bedrijfsportaal.lovable.app/assets/FormPage-CBzq0HBH.js

1import{r as x,A as M,j as s,L as w,C as Y,g as Z,B as y,I as j,ae as ee,n as te,h as se,i as ne,k as ae,l as re,m as ie,G as N,s as h,x as le,a as oe}from"./index-BWYXbCDk.js";import{T as me}from"./textarea-CNNz8Eh1.js";import{C as ce}from"./circle-check-DuWgpWTO.js";import{a as ue,C as de}from"./chevron-right-C5Bwh-pi.js";import{P as he}from"./plus-BS97ruWX.js";function pe({formId:m,slug:p,onSuccess:b,className:S}){const[i,C]=x.useState({}),[f,E]=x.useState(!1),[W,A]=x.useState(!1),[V,k]=x.useState([]),[l,T]=x.useState(0),[G,z]=x.useState(!1),{data:n,isLoading:H}=M({queryKey:["form-definition",m,p],queryFn:async()=>{let e=h.from("form_definitions").select("*").eq("active",!0);m?e=e.eq("id",m):p&&(e=e.eq("slug",p));const{data:t,error:a}=await e.single();if(a)throw a;return t},enabled:!!(m||p)});if(H)return s.jsx("div",{className:"flex items-center justify-center py-8",children:s.jsx(w,{className:"h-6 w-6 animate-spin text-muted-foreground"})});if(!n)return null;if(W&&!b)return s.jsxs("div",{className:"flex flex-col items-center justify-center py-12 text-center space-y-3",children:[s.jsx(ce,{className:"h-12 w-12 text-primary"}),s.jsx("h3",{className:"text-lg font-medium",children:n.settings?.success_message||"Bedankt voor je inzending!"})]});const v=n.steps&&n.steps.length>1,g=n.steps||[{id:"default",title:""}],q=g.length,D=(e=>v?n.fields.filter(t=>(t.step??0)===e):n.fields)(l),c=V.filter(e=>e.date&&e.time),L=n.fields.some(e=>e.type==="time-slots"&&e.required),P=f||n.type==="demo_booking"&&L&&c.length===0,d=(e,t)=>{C(a=>({...a,[e]:t}))},I=()=>{k(e=>[...e,{date:"",time:""}])},R=(e,t,a)=>{k(o=>o.map((u,r)=>r===e?{...u,[t]:a}:u))},Q=e=>{k(t=>t.filter((a,o)=>o!==e))},$=()=>{z(!0)},B=()=>{for(const e of D){if(e.type==="time-slots"&&e.required){if(c.length===0)return N.error("Selecteer minimaal één tijdblok met datum én tijd"),!1;continue}if(e.required&&!i[e.name]&&e.type!=="checkbox")return N.error(`${e.label} is verplicht`),!1}return!0},K=()=>{B()&&T(e=>Math.min(e+1,q-1))},U=()=>{T(e=>Math.max(e-1,0))},X=e=>{const t=e.name;if(e.type==="hidden")return null;switch(e.type){case"textarea":return s.jsx(me,{value:i[t]||"",onChange:a=>d(t,a.target.value),placeholder:e.placeholder,required:e.required,rows:4});case"select":return s.jsxs(se,{value:i[t]||"",onValueChange:a=>d(t,a),children:[s.jsx(ne,{children:s.jsx(ae,{placeholder:e.placeholder||"Selecteer..."})}),s.jsx(re,{children:(e.options||[]).map(a=>s.jsx(ie,{value:a,children:a},a))})]});case"checkbox":return s.jsxs("div",{className:"flex items-center gap-2",children:[s.jsx(te,{checked:!!i[t],onCheckedChange:a=>d(t,a)}),s.jsx("span",{className:"text-sm",children:e.placeholder||e.label})]});case"time-slots":return s.jsxs("div",{className:"space-y-2",children:[V.map((a,o)=>s.jsxs("div",{className:"flex items-center gap-2",children:[s.jsx(j,{type:"date",value:a.date,onChange:u=>R(o,"date",u.target.value),className:"flex-1"}),s.jsx(j,{type:"time",value:a.time,onChange:u=>R(o,"time",u.target.value),className:"w-32"}),s.jsx(y,{variant:"ghost",size:"icon",onClick:()=>Q(o),type:"button",children:s.jsx(ee,{className:"h-4 w-4"})})]},o)),s.jsxs(y,{variant:"outline",size:"sm",onClick:I,type:"button",children:[s.jsx(he,{className:"h-4 w-4 mr-1"})," Tijdblok toevoegen"]})]});case"number":return s.jsx(j,{type:"number",value:i[t]||"",onChange:a=>d(t,a.target.value),placeholder:e.placeholder,required:e.required});case"url":return s.jsx(j,{type:"url",value:i[t]||"",onChange:a=>d(t,a.target.value),placeholder:e.placeholder||"https://...",required:e.required});case"date":return s.jsx(j,{type:"date",value:i[t]||"",onChange:a=>d(t,a.target.value),required:e.required});default:return s.jsx(j,{type:e.type,value:i[t]||"",onChange:a=>d(t,a.target.value),placeholder:e.placeholder,required:e.required})}},J=async e=>{if(e.preventDefault(),!!G){if(z(!1),v&&l<q-1){K();return}if(B()){if(n.type==="demo_booking"&&L&&c.length===0){N.error("Selecteer minimaal één tijdblok met datum én tijd");return}E(!0);try{const t={...i};for(const r of n.fields)r.type==="hidden"&&r.defaultValue&&!t[r.name]&&(t[r.name]=r.defaultValue);const a={form_name:n.slug,form_definition_id:n.id,name:t.name||t.naam||null,email:t.email||t["e-mail"]||null,phone:t.phone||t.telefoon||null,subject:n.name,message:t.message||t.bericht||null,metadata:{...t,time_slots:c.length>0?c:void 0},status:"new"},{error:o}=await h.from("form_submissions").insert(a);if(o)throw o;if(n.type==="demo_booking"&&c.length>0){const{error:r}=await h.from("demo_bookings").insert({customer_email:t.email||t["e-mail"]||"",customer_name:t.name||t.naam||null,product_interest:t.product_interest?[t.product_interest]:[],proposed_slots:c,status:"pending",duration_minutes:n.settings?.calendar_duration_minutes||30});if(r)throw r}if(n.type==="newsletter"){const r=t.email||t["e-mail"];if(r){const{error:_}=await h.from("newsletter_subscribers").upsert({email:r,name:t.name||t.naam||null,source:"form",form_definition_id:n.id,odoo_list_id:n.settings?.newsletter_odoo_list_id||null,metadata:t},{onConflict:"email"});if(_)throw _}}const u={...t,time_slots:c.length>0?c:void 0};if(n.settings?.recipient_email)try{await h.functions.invoke("send-form-notification",{body:{recipientEmail:n.settings.recipient_email,formName:n.name,submissionData:u}})}catch(r){console.error("Failed to send form notification email:",r)}if(n.type==="demo_booking"){const r=t.email||t["e-mail"];if(r)try{await h.functions.invoke("send-form-notification",{body:{recipientEmail:r,formName:n.name,submissionData:u,customerConfirmation:!0,customerName:t.name||t.naam||null}})}catch(_){console.error("Failed to send customer confirmation email:",_)}}A(!0),b?.(),n.settings?.redirect_url&&(window.location.href=n.settings.redirect_url)}

1catch(t){N.error("Er ging iets mis: "+t.message)}finally{E(!1)}}}},O=e=>e.width==="half",F=n.style_config?.layout||"single";return s.jsxs("form",{onSubmit:J,className:S,children:[v&&s.jsxs("div",{className:"mb-6",children:[s.jsx("div",{className:"flex items-center justify-between mb-2",children:g.map((e,t)=>s.jsxs("div",{className:"flex items-center gap-2 flex-1",children:[s.jsx("div",{className:`w-8 h-8 rounded-full flex items-center justify-center text-sm font-medium shrink-0 ${t===l?"bg-primary text-primary-foreground":t<l?"bg-primary/20 text-primary":"bg-muted text-muted-foreground"}`,children:t<l?"✓":t+1}),t<g.length-1&&s.jsx("div",{className:`h-0.5 flex-1 ${t<l?"bg-primary/40":"bg-muted"}`})]},e.id))}),s.jsx("h3",{className:"font-medium text-lg",children:g[l]?.title}),g[l]?.description&&s.jsx("p",{className:"text-sm text-muted-foreground",children:g[l].description})]}),n.type==="payment"&&n.settings?.payment_amount_cents&&s.jsxs(Y,{className:"p-4 mb-4 bg-primary/5 border-primary/20",children:[s.jsxs("p",{className:"text-sm font-medium",children:[n.settings.payment_product_name||"Betaling"," — €",(n.settings.payment_amount_cents/100).toFixed(2),n.settings.payment_currency&&n.settings.payment_currency!=="EUR"&&` ${n.settings.payment_currency}`]}),s.jsx("p",{className:"text-xs text-muted-foreground mt-1",children:"Na het invullen wordt u doorgestuurd naar de betaalpagina."})]}),s.jsx("div",{className:F==="two-column"?"grid grid-cols-2 gap-4":"space-y-4",children:D.map(e=>s.jsxs("div",{className:e.type==="hidden"?"hidden":F==="two-column"&&O(e)?"":F==="two-column"?"col-span-2":"",children:[e.type!=="checkbox"&&e.type!=="hidden"&&s.jsxs(Z,{className:"mb-1.5 block",children:[e.label,e.required&&s.jsx("span",{className:"text-destructive ml-1",children:"*"})]}),X(e)]},e.id))}),v?s.jsxs("div",{className:"flex items-center justify-between mt-6",children:[s.jsxs(y,{type:"button",variant:"outline",onClick:U,disabled:l===0,children:[s.jsx(ue,{className:"h-4 w-4 mr-1"})," Vorige"]}),l<q-1?s.jsxs(y,{type:"button",onClick:K,children:["Volgende ",s.jsx(de,{className:"h-4 w-4 ml-1"})]}):s.jsx(y,{type:"submit",onClick:$,disabled:P,children:f?s.jsxs(s.Fragment,{children:[s.jsx(w,{className:"h-4 w-4 mr-2 animate-spin"})," Verzenden..."]}):n.style_config?.button_text||"Versturen"})]}):s.jsx(y,{type:"submit",onClick:$,className:"mt-6 w-full",disabled:P,children:f?s.jsxs(s.Fragment,{children:[s.jsx(w,{className:"h-4 w-4 mr-2 animate-spin"})," Verzenden..."]}):n.style_config?.button_text||"Versturen"})]})}function ve(){const{slug:m}=le(),p=oe(),{data:b,isLoading:S}=M({queryKey:["form-definition-meta",m],queryFn:async()=>{const{data:C,error:f}=await h.from("form_definitions").select("name, slug, settings").eq("slug",m).eq("active",!0).single();if(f)throw f;return C},enabled:!!m});if(S)return s.jsx("div",{className:"flex items-center justify-center min-h-[60vh]",children:s.jsx(w,{className:"h-8 w-8 animate-spin text-muted-foreground"})});if(!b)return s.jsx("div",{className:"flex items-center justify-center min-h-[60vh]",children:s.jsx("p",{className:"text-muted-foreground",children:"Formulier niet gevonden."})});const i=()=>{p(`/formulier/${m}/verzonden`)};return s.jsxs("div",{className:"container max-w-2xl mx-auto py-12 px-4",children:[s.jsx("h1",{className:"text-3xl font-heading font-bold mb-8",children:b.name}),s.jsx(pe,{slug:m,onSuccess:i})]})}export{ve as default};