// Strona: lista próśb do klienta z możliwością wypełnienia formularza // Dane zapisywane w localStorage, submit otwiera mailto z całością treści const LS_KEY = 'alukomfort-client-data-v1'; const PRICE_PRODUCTS = [ { id: 'linea', name: 'LINEA' }, { id: 'horizon-l', name: 'HORIZON L (lamelowa)' }, { id: 'horizon-s', name: 'HORIZON S (szklana)' }, { id: 'roma', name: 'ROMA' }, ]; const PRICE_SIZES = ['3×3', '4×3', '4×4', '5×4', '6×3', '6×4']; const ACCESSORY_ITEMS = [ 'Liniowe oświetlenie LED', 'Automatyka SOMFY (z czujnikami pogody)', 'Ściana — rolety screen', 'Ściana — szyby przesuwne ESG', 'Ściana — aluminiowe shuttersy', 'Kolor premium (drewnopodobny)', ]; function ClientDataPage({ onNavigate }) { usePageMeta({ title: 'Dane od klienta — formularz | ALUKOMFORT', description: 'Formularz do uzupełnienia przez PLAST-MET — dane potrzebne do rozbudowy strony ALUKOMFORT.', canonical: 'https://alukomfort.pl/#/dane-od-klienta', }); const [data, setData] = React.useState(() => { try { const stored = localStorage.getItem(LS_KEY); if (stored) return JSON.parse(stored); } catch (e) {} return { // Grupa A phone1: '', phone2: '', email: '', nip: '', regon: '', krs: '', historyText: '', photosFabrykaStatus: '', prices: {}, // np. { 'linea_3x3_min': '18000', 'linea_3x3_max': '24000' } accessoryPrices: {}, privacyPolicy: '', // Grupa B photosRealizacjeCount: '', photosRealizacjeNote: '', cadFiles: '', }; }); // Zapis do localStorage przy każdej zmianie (debounced przez useEffect) React.useEffect(() => { const t = setTimeout(() => { try { localStorage.setItem(LS_KEY, JSON.stringify(data)); } catch (e) {} }, 300); return () => clearTimeout(t); }, [data]); const update = (field, value) => setData(d => ({ ...d, [field]: value })); const updatePrice = (key, value) => setData(d => ({ ...d, prices: { ...d.prices, [key]: value } })); const updateAccessory = (key, value) => setData(d => ({ ...d, accessoryPrices: { ...d.accessoryPrices, [key]: value } })); // Procent wypełnienia const progress = React.useMemo(() => { const fields = [ data.phone1, data.email, data.nip, data.regon, data.historyText, data.photosFabrykaStatus, data.privacyPolicy, Object.keys(data.prices).filter(k => data.prices[k]).length > 0 ? 'x' : '', Object.keys(data.accessoryPrices).filter(k => data.accessoryPrices[k]).length > 0 ? 'x' : '', data.photosRealizacjeNote || data.photosRealizacjeCount, data.cadFiles, ]; const filled = fields.filter(f => f && String(f).trim()).length; return Math.round((filled / fields.length) * 100); }, [data]); const buildEmailBody = () => { const lines = []; lines.push('FORMULARZ DANYCH — ALUKOMFORT'); lines.push('============================'); lines.push(`Wypełnione w: ${progress}%`); lines.push(`Data: ${new Date().toLocaleString('pl-PL')}`); lines.push(''); lines.push('--- GRUPA A — KRYTYCZNE ---'); lines.push(`Telefon (sprzedaż): ${data.phone1 || '—'}`); lines.push(`Telefon (serwis): ${data.phone2 || '—'}`); lines.push(`E-mail biura: ${data.email || '—'}`); lines.push(`NIP: ${data.nip || '—'}`); lines.push(`REGON: ${data.regon || '—'}`); lines.push(`KRS: ${data.krs || '—'}`); lines.push(''); lines.push('Historia firmy:'); lines.push(data.historyText || '— (brak)'); lines.push(''); lines.push(`Status zdjęć fabryki: ${data.photosFabrykaStatus || '—'}`); lines.push(`Polityka prywatności: ${data.privacyPolicy || '—'}`); lines.push(''); lines.push('CENNIK PRODUKTÓW (widełki min — max, brutto):'); PRICE_PRODUCTS.forEach(p => { PRICE_SIZES.forEach(size => { const min = data.prices[`${p.id}_${size}_min`]; const max = data.prices[`${p.id}_${size}_max`]; if (min || max) { lines.push(` ${p.name} ${size} m: ${min || '?'} — ${max || '?'} zł`); } }); }); lines.push(''); lines.push('CENNIK AKCESORIÓW (orientacyjnie):'); ACCESSORY_ITEMS.forEach(a => { const price = data.accessoryPrices[a]; if (price) lines.push(` ${a}: ${price}`); }); lines.push(''); lines.push('--- GRUPA B — WAŻNE ---'); lines.push(`Liczba realizacji do galerii: ${data.photosRealizacjeCount || '—'}`); lines.push(`Uwagi do galerii realizacji: ${data.photosRealizacjeNote || '—'}`); lines.push(`Pliki CAD (DWG/DXF): ${data.cadFiles || '—'}`); return lines.join('\n'); }; const handleSubmitEmail = () => { const body = buildEmailBody(); const subject = encodeURIComponent('ALUKOMFORT — dane od klienta (formularz)'); const encoded = encodeURIComponent(body); window.location.href = `mailto:jakub.tiuchty@gmail.com?subject=${subject}&body=${encoded}`; }; const handleDownload = () => { const body = buildEmailBody(); const blob = new Blob([body], { type: 'text/plain;charset=utf-8' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `alukomfort-dane-${new Date().toISOString().split('T')[0]}.txt`; document.body.appendChild(a); a.click(); document.body.removeChild(a); URL.revokeObjectURL(url); }; const handleClear = () => { if (!window.confirm('Wyczyścić cały formularz? Tej operacji nie można cofnąć.')) return; localStorage.removeItem(LS_KEY); window.location.reload(); }; return ( <>
DOKUMENT WEWNĘTRZNY · PLAST-MET

Formularz danych od klienta

Lista wszystkich informacji potrzebnych do realizacji planu rozbudowy strony ALUKOMFORT. Wypełnione dane zapisują się automatycznie w przeglądarce.

Wypełnienie formularza
{progress}%
{/* GRUPA A */}
Grupa A · Krytyczne

Dane potrzebne do startu Etapu 1-2

Bez tych informacji prace utkną. Im szybciej je dostarczymy, tym szybciej ruszą realne zmiany na stronie.

update('phone1', e.target.value)} placeholder="+48 71 312 07 93" /> update('phone2', e.target.value)} placeholder="+48 71 387 08 30" /> update('email', e.target.value)} placeholder="trzebnica@plast-met.pl" />
update('nip', e.target.value)} placeholder="NIP" /> update('regon', e.target.value)} placeholder="REGON" /> update('krs', e.target.value)} placeholder="KRS" />