https://patterson-auto-body.vercel.app/_next/static/chunks/1627.bd52bec644545bcb.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[1627],{5005:function(e,t,a){a.r(t),a.d(t,{SignaturePad:function(){return x}});var r=a(7437),s=a(2265),l=a(8677),n=a(9076),i=a(8893),c=a(5277),o=a(7689),d=a(401),m=a(4508);function x(e){let{label:t,onSignatureChange:a,error:x,compact:u}=e,[p,g]=(0,s.useState)("draw"),[h,b]=(0,s.useState)(null),[y,f]=(0,s.useState)(""),j=(0,s.useRef)(null),N=(0,s.useCallback)(()=>{b(null),f(""),j.current&&j.current.clear(),a(null)},[a]),v=(0,s.useCallback)(()=>{if(!j.current||j.current.isEmpty())return;let e={image:j.current.toDataURL("image/png"),method:"draw",timestamp:new Date().toISOString()};b(e),a(e)},[a]),w=(0,s.useCallback)(()=>{if(!y.trim())return;let e=document.createElement("canvas");e.width=400,e.height=100;let t=e.getContext("2d");if(!t)return;t.fillStyle="#ffffff",t.fillRect(0,0,400,100),t.font='italic 36px "Brush Script MT", "Dancing Script", cursive',t.fillStyle="rgb(0, 0, 102)",t.textAlign="center",t.textBaseline="middle",t.fillText(y,200,50);let r={image:e.toDataURL("image/png"),method:"type",timestamp:new Date().toISOString()};b(r),a(r)},[y,a]),k=(0,s.useCallback)(e=>{var t;let r=null===(t=e.target.files)||void 0===t?void 0:t[0];if(!r)return;if(r.size>10485760){alert("File too large. Maximum 10MB.");return}let s=new FileReader;s.onload=()=>{let e={image:s.result,method:"upload",timestamp:new Date().toISOString()};b(e),a(e)},s.readAsDataURL(r)},[a]);return h?(0,r.jsxs)("div",{className:(0,m.cn)("border rounded-lg",u?"p-2":"p-4"),children:[(0,r.jsxs)("div",{className:"flex items-center justify-between mb-2",children:[t&&(0,r.jsx)("span",{className:"text-sm font-medium text-gray-700",children:t}),(0,r.jsxs)("button",{type:"button",onClick:N,className:"text-xs text-red-600 hover:text-red-800 flex items-center gap-1 ml-auto",children:[(0,r.jsx)(n.Z,{className:"w-3 h-3"})," Clear & Re-sign"]})]}),(0,r.jsx)("div",{className:"bg-white border rounded p-2",children:(0,r.jsx)("img",{src:h.image,alt:"Your signature",className:(0,m.cn)("mx-auto object-contain",u?"h-10":"h-16")})}),(0,r.jsxs)("p",{className:"text-xs text-gray-500 mt-1",children:["Signed via ",h.method," on ",new Date(h.timestamp).toLocaleString()]})]}):(0,r.jsxs)("div",{className:(0,m.cn)("border rounded-lg",u?"p-2":"p-4",x&&"border-red-400"),children:[t&&(0,r.jsxs)("label",{className:"block text-sm font-medium text-gray-700 mb-3",children:[t," ",(0,r.jsx)("span",{className:"text-red-500",children:"*"})]}),(0,r.jsx)("div",{className:"flex border-b mb-3",children:[{key:"draw",label:"Draw",icon:(0,r.jsx)(i.Z,{className:"w-4 h-4"})},{key:"type",label:"Type",icon:(0,r.jsx)(c.Z,{className:"w-4 h-4"})},{key:"upload",label:"Upload",icon:(0,r.jsx)(o.Z,{className:"w-4 h-4"})}].map(e=>(0,r.jsxs)("button",{type:"button",onClick:()=>{g(e.key),N()},className:(0,m.cn)("flex items-center gap-1.5 px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors",p===e.key?"border-[var(--brand-primary)] text-[var(--brand-primary)]":"border-transparent text-gray-500 hover:text-gray-700"),children:[e.icon," ",e.label]},e.key))}),"draw"===p&&(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{className:"text-xs text-gray-500 mb-2",children:"Sign using your mouse, touchpad, or touch screen"}),(0,r.jsx)("div",{className:"border rounded bg-white",style:{height:u?80:150},children:(0,r.jsx)(l.Z,{ref:j,penColor:"rgb(0, 0, 102)",canvasProps:{className:"w-full h-full",style:{width:"100%",height:"100%"}},minWidth:1,maxWidth:2.5})}),(0,r.jsxs)("div",{className:"flex gap-2 mt-2",children:[(0,r.jsxs)("button",{type:"button",onClick:()=>{var e;return null===(e=j.current)||void 0===e?void 0:e.clear()},className:"text-xs text-gray-500 hover:text-gray-700 flex items-center gap-1",children:[(0,r.jsx)(n.Z,{className:"w-3 h-3"})," Clear"]}),(0,r.jsxs)("button",{type:"button",onClick:v,className:"text-xs font-medium flex items-center gap-1 ml-auto px-3 py-1.5 rounded",style:{backgroundColor:"var(--brand-primary)",color:"white"},children:[(0,r.jsx)(d.Z,{className:"w-3 h-3"})," Accept Signature"]})]})]}),"type"===p&&(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{className:"text-xs text-gray-500 mb-2",children:"Type your full legal name to generate a signature"}),(0,r.jsx)("input",{type:"text",value:y,onChange:e=>f(e.target.value),placeholder:"Type your full name",className:"w-full px-4 py-3 border rounded-lg text-2xl italic",style:{fontFamily:'"Brush Script MT", "Dancing Script", cursive',color:"rgb(0, 0, 102)"}}),(0,r.jsx)("div",{className:"flex justify-end mt-2",children:(0,r.jsxs)("button",{type:"button",onClick:w,disabled:!y.trim(),className:"text-xs font-medium flex items-center gap-1 px-3 py-1.5 rounded disabled:opacity-50",style:{backgroundColor:"var(--brand-primary)",color:"white"},children:[(0,r.jsx)(d.Z,{className:"w-3 h-3"})," Accept Signature"]})})]}

1),"upload"===p&&(0,r.jsxs)("div",{children:[(0,r.jsx)("p",{className:"text-xs text-gray-500 mb-2",children:"Upload an image of your signature"}),(0,r.jsxs)("label",{className:"block border-2 border-dashed rounded-lg p-6 text-center cursor-pointer hover:bg-gray-50 transition-colors",children:[(0,r.jsx)(o.Z,{className:"w-8 h-8 mx-auto text-gray-400 mb-2"}),(0,r.jsx)("span",{className:"text-sm text-gray-600",children:"Click to upload or drag and drop"}),(0,r.jsx)("span",{className:"block text-xs text-gray-400 mt-1",children:"PNG, JPG up to 10MB"}),(0,r.jsx)("input",{type:"file",accept:"image/*",onChange:k,className:"hidden"})]})]}),x&&(0,r.jsx)("p",{className:"text-red-500 text-xs mt-2",children:x})]})}}}]);