https://vatdi.com/build/assets/PrechatSettings-DI7rpzvA.js

1import{r as i,j as e}from"./react-CgBY0Ze-.js";import{P as W}from"./PageHeader-B2uLUomX.js";import{S as O}from"./SettingsLoadError-GrdfL2Sc.js";import{S as H}from"./SettingsSaveBar-030ESsDx.js";import{a as V,b as z,d as B,u as $,L as J,A as Y,F as j,I as L}from"./main-Cyy5nyiT.js";import{S as x}from"./SectionCard-B--lq_JY.js";import{ae as G,bG as K,c2 as Q,aE as P}from"./vendor-NlgW4Nml.js";import"./renderIcon-CWUPWWi0.js";import"./http-BCn5QfZZ.js";const w=[{key:"name",label:"Name"},{key:"email",label:"Email"},{key:"phone",label:"Phone"},{key:"subject",label:"Subject"},{key:"message",label:"Message"}],U=[{key:"name",label:"Name"},{key:"email",label:"Email"},{key:"phone",label:"Phone"},{key:"subject",label:"Subject"},{key:"company",label:"Company"},{key:"message",label:"Message"}],ce=()=>{const{activeStoreId:n}=V(),[D,k]=i.useState(!0),[R,N]=i.useState(!1),[f,v]=i.useState(!1),[S,o]=i.useState(null),[h,A]=i.useState(!1),F=z(s=>s.addToast),T=B(),p=i.useRef(null),b=i.useRef(n),[u,g]=i.useState(!1),[t,l]=i.useState({prechat_enabled:!1,pre_chat_welcome_title:"",pre_chat_welcome_description:"",pre_chat_form_message:"",pre_chat_fields_widget:{name:!0,email:!0,phone:!1,subject:!1,message:!1},pre_chat_required_fields:{name:!1,email:!0,phone:!1,subject:!1,message:!1},lead_form_fields:{name:!0,email:!0,phone:!0,subject:!0,company:!1,message:!0}});i.useEffect(()=>{if(b.current!==n&&u){T({title:"Discard unsaved pre-chat changes?",message:"You have unsaved changes on this page. Switching stores will discard them.",confirmText:"Discard changes",variant:"danger",action:async()=>{g(!1),b.current=n,await y()}});return}b.current=n,y()},[n]),i.useEffect(()=>{if(!p.current)return;const s=JSON.stringify(p.current)!==JSON.stringify(t);g(s)},[t]),i.useEffect(()=>{if(!u)return;const s=a=>(a.preventDefault(),a.returnValue="","");return window.addEventListener("beforeunload",s),()=>window.removeEventListener("beforeunload",s)},[u]);const y=async()=>{var s;try{k(!0),N(!1),o(null);const a=await $.settings.getPrechat(),r=((s=a.data)==null?void 0:s.data)||a.data||{},d=r.pre_chat_fields_widget||{},m=r.pre_chat_required_fields||{},c=r.lead_form_fields||{},E={prechat_enabled:r.prechat_enabled??!1,pre_chat_welcome_title:r.pre_chat_welcome_title||"",pre_chat_welcome_description:r.pre_chat_welcome_description||"",pre_chat_form_message:r.pre_chat_form_message||"",pre_chat_fields_widget:{name:d.name??!0,email:d.email??!0,phone:d.phone??!1,subject:d.subject??!1,message:d.message??!1},pre_chat_required_fields:{name:m.name??!1,email:m.email??!0,phone:m.phone??!1,subject:m.subject??!1,message:m.message??!1},lead_form_fields:{name:c.name??!0,email:c.email??!0,phone:c.phone??!0,subject:c.subject??!0,company:c.company??!1,message:c.message??!0}};p.current=E,l(E),g(!1)}catch(a){N(!0),o(a.message||"Failed to load pre-chat settings")}finally{k(!1)}},_=(s,a)=>{l(r=>({...r,[s]:a}))},C=(s,a)=>{l(r=>({...r,pre_chat_fields_widget:{...r.pre_chat_fields_widget,[s]:a}})),a||l(r=>({...r,pre_chat_required_fields:{...r.pre_chat_required_fields,[s]:!1}}))},q=(s,a)=>{l(r=>({...r,pre_chat_required_fields:{...r.pre_chat_required_fields,[s]:a}}))},I=(s,a)=>{l(r=>({...r,lead_form_fields:{...r.lead_form_fields,[s]:a}}))},M=async s=>{s.preventDefault();try{v(!0),o(null),await $.settings.updatePrechat(t),p.current=t,g(!1),F("Pre-chat settings updated successfully","success")}catch(a){o(a.message||"Failed to update pre-chat settings"),F(a.message||"Failed to update pre-chat settings","error")}finally{v(!1)}};return D?e.jsx("div",{className:"flex items-center justify-center min-h-screen",children:e.jsx(J,{size:"lg"})}):R?e.jsx(O,{what:"pre-chat settings",onRetry:()=>y()}):e.jsxs("div",{className:"space-y-6",children:[e.jsx(W,{title:"Pre-Chat Settings",description:"Configure the welcome screen and form shown before chat begins",icon:e.jsx(G,{className:"w-5 h-5"}),iconAccent:"indigo"}),S&&e.jsx(Y,{type:"error",message:S,onClose:()=>o(null)}),e.jsxs("form",{onSubmit:M,children:[e.jsxs("div",{className:"grid grid-cols-1 lg:grid-cols-2 gap-6",children:[e.jsxs("div",{className:"space-y-6",children:[e.jsx(x,{id:"pre-chat-form",icon:e.jsx(K,{className:"w-4 h-4"}),iconAccent:"violet",title:e.jsx(e.Fragment,{children:"Pre-Chat Form"}),description:e.jsx(e.Fragment,{children:"Show a form before the chat session starts."}),headerRight:e.jsx(e.Fragment,{children:e.jsx("button",{type:"button",role:"switch","aria-checked":t.prechat_enabled,"aria-label":"Enable pre-chat form",onClick:()=>_("prechat_enabled",!t.prechat_enabled),className:`relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 ${t.prechat_enabled?"bg-primary-600":"bg-gray-200"}`,children:e.jsx("span",{className:`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out ${t.prechat_enabled?"translate-x-5":"translate-x-0"}`})})}),bodyClassName:"card-body space-y-4"}),t.prechat_enabled&&e.jsxs(e.Fragment,{children:[e.jsxs(x,{id:"welcome-screen",icon:e.jsx(Q,{className:"w-4 h-4"}),iconAccent:"sky",title:e.jsx(e.Fragment,{children:"Welcome Screen"}),bodyClassName:"card-body space-y-6",children:[e.jsx(j,{label:"Welcome Title",name:"pre_chat_welcome_title",type:"text",value:t.pre_chat_welcome_title,onChange:s=>_("pre_chat_welcome_title",s.target.value),placeholder:"e.g. Welcome! How can we help?"}),e.jsx(j,{label:"Welcome Description",name:"pre_chat_welcome_description",children:e.jsx("textarea",{id:"pre_chat_welcome_description",name:"pre_chat_welcome_description",value:t.pre_chat_welcome_description,onChange:s=>_("pre_chat_welcome_description",s.target.value),className:"input",rows:3,placeholder:"Brief description shown below the title"})}),e.jsx(j,{label:"Form Message",name:"pre_chat_form_message",children:e.jsx("textarea",{id:"pre_chat_form_message",name:"pre_chat_form_message",value:t.pre_chat_form_message,onChange:s=>_("pre_chat_form_message",s.target.value),className:"input",rows:3,placeholder:"Optional message shown above the form fields"})})]}),e.jsx(x,{id:"form-fields",icon:e.jsx(P,{className:"w-4 h-4"}),iconAccent:"indigo",title:e.jsx(e.Fragment,{children:"Form Fields"}),description:e.jsx(e.Fragment,{children:"Configure which fields are visible and required in the pre-chat form."}),bodyClassName:"card-body space-y-6",children:e.jsxs("div",{className:"space-y-3",children:[e.jsxs("div",{className:"hidden sm:grid grid-cols-3 gap-2 text-xs font-medium text-gray-500 uppercase tracking-wider px-3",children:[e.jsx("span",{children:"Field"}),e.jsxs("span",{className:"text-center flex items-center justify-center gap-1",children:["Visible ",e.jsx(L,{text:"Show this field in the pre-chat form. Visitors can skip it.",iconSize:"sm"})]}),e.jsxs("span",{className:"text-center flex items-center justify-center gap-1",children:["Required ",e.jsx(L,{text:"Visitors must fill this in before starting a chat.",iconSize:"sm"})]})]}),w.map(s=>e.jsxs("div",{className:"p-3 bg-gray-50 rounded-lg",children:[e.jsxs("div",{className:"sm:hidden space-y-2",children:[e.jsx("div",{className:"text-sm font-medium text-gray-700",children:s.label}),e.jsxs("div",{className:"flex items-center justify-between pt-1",children:[e.jsxs("label",{htmlFor:`visible_${s.key}`,className:"flex items-center gap-2 text-sm text-gray-600",children:[e.jsx("input",{type:"checkbox",id:`visible_${s.key}`,checked:t.pre_chat_fields_widget[s.key]??!1,onChange:a=>C(s.key,a.target.checked),"aria-label":`Show ${s.label}

1 field in pre-chat form`,className:"h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"}),e.jsx("span",{children:"Visible"})]}),e.jsxs("label",{htmlFor:`required_${s.key}`,className:"flex items-center gap-2 text-sm text-gray-600",children:[e.jsx("input",{type:"checkbox",id:`required_${s.key}`,checked:t.pre_chat_required_fields[s.key]??!1,onChange:a=>q(s.key,a.target.checked),disabled:!t.pre_chat_fields_widget[s.key],"aria-label":`Make ${s.label} field required`,className:"h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 disabled:opacity-40"}),e.jsx("span",{children:"Required"})]})]})]}),e.jsxs("div",{className:"hidden sm:flex items-center",children:[e.jsx("div",{className:"flex-1",children:e.jsx("span",{className:"text-sm font-medium text-gray-700",children:s.label})}),e.jsx("div",{className:"flex-1 text-center",children:e.jsx("input",{type:"checkbox",id:`visible_${s.key}_desktop`,checked:t.pre_chat_fields_widget[s.key]??!1,onChange:a=>C(s.key,a.target.checked),"aria-label":`Show ${s.label} field in pre-chat form`,className:"h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"})}),e.jsx("div",{className:"flex-1 text-center",children:e.jsx("input",{type:"checkbox",id:`required_${s.key}_desktop`,checked:t.pre_chat_required_fields[s.key]??!1,onChange:a=>q(s.key,a.target.checked),disabled:!t.pre_chat_fields_widget[s.key],"aria-label":`Make ${s.label} field required`,className:"h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 disabled:opacity-40"})})]})]},s.key))]})}),e.jsx(x,{id:"lead-capture-fields",icon:e.jsx(P,{className:"w-4 h-4"}),iconAccent:"indigo",title:e.jsx(e.Fragment,{children:"Lead Capture Fields"}),description:e.jsx(e.Fragment,{children:"Fields collected when the chat is exported as a lead. Independent of what shows in the pre-chat form."}),bodyClassName:"card-body space-y-4",children:e.jsx("div",{className:"grid grid-cols-1 sm:grid-cols-2 gap-3",children:U.map(s=>e.jsxs("label",{htmlFor:`lead_${s.key}`,className:"flex items-center gap-3 p-3 bg-gray-50 rounded-lg cursor-pointer",children:[e.jsx("input",{type:"checkbox",id:`lead_${s.key}`,checked:t.lead_form_fields[s.key]??!1,onChange:a=>I(s.key,a.target.checked),"aria-label":`Capture ${s.label} as lead field`,className:"h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500"}),e.jsx("span",{className:"text-sm font-medium text-gray-700",children:s.label})]},s.key))})})]}),e.jsx("div",{className:"flex justify-end",children:e.jsx("button",{type:"submit",disabled:f,className:"btn-primary",children:f?"Saving…":"Save changes"})})]}),e.jsxs("div",{className:"lg:sticky lg:top-6 lg:self-start",children:[e.jsx("div",{className:"lg:hidden mb-3",children:e.jsxs("button",{type:"button",onClick:()=>A(s=>!s),"aria-expanded":h,"aria-controls":"prechat-preview-panel",className:"btn-secondary w-full justify-between",children:[e.jsx("span",{children:h?"Hide Preview":"Show Preview"}),e.jsx("svg",{className:`h-4 w-4 transform transition-transform ${h?"rotate-180":""}`,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]})}),e.jsxs("div",{id:"prechat-preview-panel",className:`${h?"block":"hidden"} lg:block card p-6`,children:[e.jsx("h3",{className:"text-lg font-semibold text-gray-900 mb-4",children:"Preview"}),e.jsx("div",{className:"border rounded-lg p-6 bg-gray-50",children:e.jsxs("div",{className:"max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden",children:[e.jsxs("div",{className:"bg-primary-600 p-4 text-white",children:[e.jsx("h4",{className:"font-semibold text-lg",children:t.pre_chat_welcome_title||"Welcome!"}),t.pre_chat_welcome_description&&e.jsx("p",{className:"text-primary-100 text-sm mt-1",children:t.pre_chat_welcome_description})]}),e.jsxs("div",{className:"p-4 space-y-3",children:[t.pre_chat_form_message&&e.jsx("p",{className:"text-sm text-gray-600 mb-2",children:t.pre_chat_form_message}),!t.prechat_enabled&&e.jsx("p",{className:"text-xs text-gray-400 text-center py-4",children:"Enable pre-chat form to see preview"}),t.prechat_enabled&&e.jsxs(e.Fragment,{children:[w.map(s=>{if(!t.pre_chat_fields_widget[s.key])return null;const a=t.pre_chat_required_fields[s.key],r=s.key==="message";return e.jsxs("div",{children:[e.jsxs("label",{className:"block text-xs font-medium text-gray-600 mb-1",children:[s.label,a&&e.jsx("span",{className:"text-red-500 ml-1",children:"*"})]}),r?e.jsx("div",{className:"w-full h-16 bg-gray-100 rounded border text-xs flex items-start p-2 text-gray-400",children:"How can we help?"}):e.jsx("div",{className:"w-full h-8 bg-gray-100 rounded border text-xs flex items-center px-2 text-gray-400",children:s.key==="email"?"[email protected]":s.key==="phone"?"+1 (555) 000-0000":s.key==="subject"?"Subject":`Your ${s.label.toLowerCase()}`})]},s.key)}),!w.some(s=>t.pre_chat_fields_widget[s.key])&&e.jsx("p",{className:"text-xs text-gray-400 text-center py-4",children:"Enable some fields to see preview"})]}),e.jsx("button",{type:"button",className:"btn-primary w-full mt-2",disabled:!0,children:"Start Chat"})]})]})})]})]})]}),e.jsx(H,{dirty:u,saving:f})]})]})};export{ce as default};