chatbot / addons / automator / src / components / SupportModal.jsx

SupportModal.jsx in WPBot – AI ChatBot for Live Support, Lead Generation, WordPress Automation, AI Services 8.8.1, at addons/automator/src/components/SupportModal.jsx

113 lines 4.3 KB

Raw Download Zip

1	import React, { useState } from 'react';
2	import Modal from './ui/Modal';
3	import { Loader2, CheckCircle2, AlertCircle } from 'lucide-react';
4
5	export default function SupportModal({ isOpen, onClose }) {
6	const [fromEmail, setFromEmail] = useState(window.wpbotAutomator?.userEmail \|\| '');
7	const [message, setMessage] = useState('');
8	const [isLoading, setIsLoading] = useState(false);
9	const [status, setStatus] = useState(null); // 'success' or 'error'
10	const [errorMessage, setErrorMessage] = useState('');
11
12	const handleSubmit = async (e) => {
13	e.preventDefault();
14	setIsLoading(true);
15	setStatus(null);
16
17	try {
18	const response = await fetch(`${window.wpbotAutomator.apiUrl}/support/send`, {
19	method: 'POST',
20	headers: {
21	'Content-Type': 'application/json',
22	'X-WP-Nonce': window.wpbotAutomator.nonce,
23	},
24	body: JSON.stringify({ from_email: fromEmail, message }),
25	});
26
27	const data = await response.json();
28
29	if (response.ok && data.success) {
30	setStatus('success');
31	setMessage('');
32	setTimeout(() => {
33	onClose();
34	setStatus(null);
35	}, 3000);
36	} else {
37	setStatus('error');
38	setErrorMessage(data.message \|\| 'An error occurred while sending your request.');
39	}
40	} catch (error) {
41	console.error('Support request error:', error);
42	setStatus('error');
43	setErrorMessage('A network error occurred. Please try again later.');
44	} finally {
45	setIsLoading(false);
46	}
47	};
48
49	return (
50	<Modal isOpen={isOpen} onClose={onClose} title="WPBot Automator Support Request" maxWidth="max-w-md">
51	{status === 'success' ? (
52	<div className="flex flex-col items-center justify-center py-8 text-center">
53	<CheckCircle2 className="w-16 h-16 text-green-500 mb-4" />
54	<h4 className="text-xl font-semibold mb-2">Message Sent!</h4>
55	<p className="text-muted-foreground">We have received your support request and will get back to you shortly.</p>
56	</div>
57	) : (
58	<form onSubmit={handleSubmit} className="space-y-4">
59	{status === 'error' && (
60	<div className="p-3 bg-red-50 text-red-700 rounded-md flex items-start text-sm">
61	<AlertCircle className="w-5 h-5 mr-2 shrink-0" />
62	<span>{errorMessage}</span>
63	</div>
64	)}
65
66	<div>
67	<label htmlFor="fromEmail" className="block text-sm font-medium mb-1">From Email</label>
68	<input
69	id="fromEmail"
70	type="email"
71	value={fromEmail}
72	onChange={(e) => setFromEmail(e.target.value)}
73	className="w-full px-3 py-2 border border-input bg-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
74	required
75	/>
76	</div>
77
78	<div>
79	<label htmlFor="message" className="block text-sm font-medium mb-1">Message</label>
80	<textarea
81	id="message"
82	value={message}
83	onChange={(e) => setMessage(e.target.value)}
84	rows={5}
85	className="w-full px-3 py-2 border border-input bg-transparent rounded-md focus:outline-none focus:ring-2 focus:ring-ring resize-y"
86	required
87	placeholder="Describe your feature request or bug..."
88	/>
89	</div>
90
91	<div className="flex justify-end pt-2 space-x-2">
92	<button
93	type="button"
94	onClick={onClose}
95	className="px-4 py-2 text-sm text-foreground bg-secondary hover:bg-secondary/80 rounded-md transition-colors"
96	disabled={isLoading}
97	>
98	Cancel
99	</button>
100	<button
101	type="submit"
102	disabled={isLoading}
103	className="px-4 py-2 text-sm bg-primary text-primary-foreground rounded-md hover:bg-primary/90 flex items-center justify-center min-w-[100px] transition-colors"
104	>
105	{isLoading ? <Loader2 className="w-4 h-4 animate-spin" /> : 'Send Message'}
106	</button>
107	</div>
108	</form>
109	)}
110	</Modal>
111	);
112	}
113