Richiedi Preventivo - Copy this React, Tailwind Component to your project
Import React, { useState } from 'react'; import { X, ArrowLeft, User } from 'lucide react'; import { useNavigate } from 'react router dom'; import emailjs from 'emailjs com'; // Importa emailjs interface RiepilogoProps { contatto?: { nome: string; cognome: string; }; contatto2?: { nome: string; cognome: string; }; } const RiepilogoComponent: React.FC<RiepilogoProps> = ({ contatto, contatto2, }) => { const [nome, setNome] = useState(contatto ? contatto.nome : ''); const [cognome, setCognome] = useState(contatto ? contatto.cognome : ''); const [nome2, setNome2] = useState(contatto2 ? contatto2.nome : ''); const [cognome2, setCognome2] = useState(contatto2 ? contatto2.cognome : ''); const [note, setNote] = useState(''); const navigate = useNavigate(); const inviaRichiesta = () => { const templateParams = { from_name: `${nome} ${cognome}`, to_name: 'G. Gambuto', subject: 'Richiesta Preventivo', message: `Note: ${note}\nContatto aggiuntivo: ${nome2} ${cognome2}`, reply_to: 'g.gambuto@dema solutions.com', // Indirizzo di risposta }; emailjs.send('YOUR_SERVICE_ID', 'YOUR_TEMPLATE_ID', templateParams, 'YOUR_USER_ID') .then((response) => { console.log('Successo!', response.status, response.text); alert('Richiesta inviata con successo!'); }) .catch((error) => { console.log('Errore:', error); alert('Si è verificato un errore durante l\'invio della richiesta.'); }); }; return ( <div className="bg white rounded lg shadow lg max w 2xl mx auto"> <div className="bg sky 700 text white p 4 flex justify between items center rounded t lg"> <h2 className="text xl font bold flex items center"> <span className="mr 2">📄</span> Richiedi preventivo </h2> <X className="cursor pointer" /> </div> <div className="p 6"> <div className="grid grid cols 2 gap 4"> {/* Richiedente */} <div className="col span 1"> <h3 className="text lg font semibold mb 4">Richiedente</h3> <div className="bg gray 100 p 4 rounded lg flex items center"> <User className="mr 2" size={24} /> <div> <input type="text" value={nome} onChange={(e) => setNome(e.target.value)} placeholder="Nome" className="mb 2" aria label="Nome" /> <input type="text" value={cognome} onChange={(e) => setCognome(e.target.value)} placeholder="Cognome" aria label="Cognome" /> <label className="flex items center mt 2"> <input type="checkbox" className="mr 2" /> <span className="text sm">Invia file pronti a questo contatto</span> </label> </div> <X className="ml auto cursor pointer" size={20} /> </div> </div> {/* Note */} <div className="col span 1"> <h3 className="text lg font semibold mb 4">Note</h3> <div className="bg gray 100 p 4 rounded lg"> <textarea className="w full h 32 p 2 border rounded lg resize none" value={note} onChange={(e) => setNote(e.target.value)} placeholder="Inserisci eventuali note..." aria label="Note" ></textarea> </div> </div> </div> <div className="mt 6 grid grid cols 2 gap 4"> {/* Contatto aggiuntivo */} <div className="col span 1"> <h3 className="text lg font semibold mb 4">Contatto aggiuntivo</h3> <div className="bg gray 100 p 4 rounded lg flex items center"> <User className="mr 2" size={24} /> <div> <input type="text" value={nome2} onChange={(e) => setNome2(e.target.value)} placeholder="Nome" className="mb 2" aria label="Nome 2" /> <input type="text" value={cognome2} onChange={(e) => setCognome2(e.target.value)} placeholder="Cognome" aria label="Cognome 2" /> <label className="flex items center mt 2"> <input type="checkbox" className="mr 2" /> <span className="text sm">Invia file pronti a questo contatto</span> </label> </div> <X className="ml auto cursor pointer" size={20} /> </div> </div> </div> </div> <div className="bg gray 100 p 4 rounded b lg flex justify between"> <button onClick={() => navigate( 1)} className="bg orange 400 text white px 4 py 2 rounded hover:bg orange 500 flex items center" > <ArrowLeft className="mr 2" size={20} /> INDIETRO </button> <button onClick={inviaRichiesta} // Invia la richiesta className="bg green 600 text white px 4 py 2 rounded hover:bg green 700" > INVIA RICHIESTA </button> </div> </div> ); }; export default RiepilogoComponent;
