"use client"; import React, { useState } from "react"; import axios from "axios"; export default function UI({ data }) { if (!data) return null; const contacts = Array.isArray(data.items) ? data.items : []; const [form, setForm] = useState({ name: '', phone: '', email: '', department: '', message: '' }); const [submitting, setSubmitting] = useState(false); const [modal, setModal] = useState({ open: false, message: '', type: 'success' }); function handleInputChange(e) { const { name, value } = e.target; setForm(prev => ({ ...prev, [name]: value })); } async function handleSubmit(e) { e.preventDefault(); setSubmitting(true); try { const content = [ `Name: ${form.name}`, `Phone: ${form.phone}`, `Email: ${form.email}`, `Department: ${form.department}`, `Message:${form.message.replace(/\n/g, '')}` ].join(""); const res = await axios.post('/api/send-email', { subject: `Website Contact Form: ${form.name}`, content }); if (res.data.success) { const message = typeof res.data.message === 'string' ? res.data.message : 'Email sent successfully!'; setModal({ open: true, message, type: 'success' }); setForm({ name: '', phone: '', email: '', department: '', message: '' }); } else { const errorMessage = typeof res.data.error === 'string' ? res.data.error : 'Failed to send email'; setModal({ open: true, message: errorMessage, type: 'error' }); } } catch (err) { let errorMessage = 'Failed to send email'; if (err?.response?.data?.error) { errorMessage = typeof err.response.data.error === 'string' ? err.response.data.error : 'Failed to send email'; } else if (err?.message) { errorMessage = typeof err.message === 'string' ? err.message : 'Failed to send email'; } setModal({ open: true, message: errorMessage, type: 'error' }); } finally { setSubmitting(false); } } function closeModal() { setModal({ open: false, message: '', type: 'success' }); } return ( {contacts.map((item, idx) => ( {(item.item_html_code || item.item_icon) && ( {item.item_html_code ? ( ) : ( )} )} {item.item_title} {/(mail)/i.test(item.item_title) ? ( {item.item_subtitle || item.item_value || ''} ) : /(phone)/i.test(item.item_title) ? ( {item.item_subtitle || item.item_value || ''} ) : ( {item.item_subtitle || item.item_value || ''} )} ))} {data.title} {data.description} {modal.open && ( {modal.message} OK )} Name * Looks good! Please enter your first name. Phone Looks good! Please enter your phone number. Email * Looks good! Please provide a valid email address. Select a department Sales Marketing Customer Support Looks good! Please select a department. Message * Looks good! Please enter your messsage. ); }
{data.description}