From 72f8a4c1261110a5514f3ce0cfc1b40f9284d4eb Mon Sep 17 00:00:00 2001 From: houseassassin Date: Thu, 7 May 2026 20:33:01 +0300 Subject: [PATCH] feat: insert order to Supabase on lead form submit Co-Authored-By: Claude Sonnet 4.6 --- src/components/LeadForm.jsx | 246 ++++++++++++++++++++++++++++++++++++ 1 file changed, 246 insertions(+) create mode 100644 src/components/LeadForm.jsx diff --git a/src/components/LeadForm.jsx b/src/components/LeadForm.jsx new file mode 100644 index 0000000..72b8348 --- /dev/null +++ b/src/components/LeadForm.jsx @@ -0,0 +1,246 @@ +import React, { useState } from 'react'; +import { motion } from 'framer-motion'; +import { Send, ShieldCheck } from 'lucide-react'; +import { supabase } from '../lib/supabase'; + +const LeadForm = () => { + const [formData, setFormData] = useState({ + name: '', + phone: '', + objectType: '' + }); + + const handleChange = (e) => { + setFormData({ ...formData, [e.target.name]: e.target.value }); + }; + + const [isSubmitting, setIsSubmitting] = useState(false); + + const handleSubmit = async (e) => { + e.preventDefault(); + setIsSubmitting(true); + + const botToken = import.meta.env.VITE_TG_BOT_TOKEN; + const chatId = import.meta.env.VITE_TG_CHAT_ID; + + if (!botToken || !chatId) { + console.warn("Telegram bot token or chat ID is missing."); + alert("ВНИМАНИЕ: Не настроена интеграция с Telegram (отсутствуют ключи в .env). Заявка показана в консоли."); + console.log("Данные заявки:", formData); + setIsSubmitting(false); + return; + } + + const text = `🚨 Новая заявка на замер и расчет!\n\n👤 Имя/Организация: ${formData.name}\n📞 Телефон: ${formData.phone}\n🏢 Тип объекта: ${formData.objectType}`; + + try { + const response = await fetch(`https://api.telegram.org/bot${botToken}/sendMessage`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + chat_id: chatId, + text: text, + }) + }); + + if (response.ok) { + // Write to Supabase (non-blocking — Telegram already succeeded) + try { + await supabase.from('orders').insert({ + name: formData.name, + phone: formData.phone, + object_type: formData.objectType, + status: 'новая', + source: 'form', + }); + } catch (dbErr) { + console.error('Supabase insert failed:', dbErr); + } + + alert("Заявка успешно отправлена! Наши специалисты свяжутся с вами в ближайшее время для согласования замера."); + setFormData({ name: '', phone: '', objectType: '' }); + } else { + alert("Произошла ошибка при отправке заявки. Пожалуйста, попробуйте позже или позвоните нам напрямую."); + } + } catch (error) { + console.error("Ошибка при отправке в Telegram:", error); + alert("Ошибка сети. Проверьте подключение к интернету и попробуйте снова."); + } finally { + setIsSubmitting(false); + } + }; + + return ( +
+ {/* Decorative Light Elements */} +
+ +
+
+ +
+ +

+ ЗАЯВКА НА ЗАМЕР +

+

+ Оставьте заявку на бесплатный выезд инженера для замера и расчета предварительной стоимости бронирования ваших окон. +

+ +
    + +
    + +
    + Анализ векторов угроз +     + +
    + +
    + Расчет необходимых материалов +     + +
    + +
    + Планирование логистики монтажа +     +
+ +
+ +
+ +
+ +
+ + e.target.style.borderColor = 'var(--accent-blue)'} + onBlur={(e) => e.target.style.borderColor = 'var(--border-light)'} + /> +
+ +
+ + e.target.style.borderColor = 'var(--accent-blue)'} + onBlur={(e) => e.target.style.borderColor = 'var(--border-light)'} + /> +
+ +
+ + +
+ + + {isSubmitting ? 'Отправка...' : 'Оставить заявку'} + + + +
+ +
+ +
+
+
+ ); +}; + +export default LeadForm;