'use client'; import React, { useState, useEffect } from 'react'; import { apiRequest } from '@/lib/api'; import { useAuth } from '@/context/auth-context'; import { Copy, Check, Send, Settings, Eye, Code, CheckCircle2, ChevronRight, ChevronLeft, Smartphone, PhoneCall, Search, MoreVertical, ArrowLeft, Paperclip, Smile, Mic, MessageSquare, Clock, Layers, RotateCcw, Megaphone, User, Users, Zap } from 'lucide-react'; interface TemplateConfig { id: string; name: string; category: string; businessName: string; isVerified: boolean; avatarLetter: string; avatarBg: string; bodyText: string; footerText?: string; buttons?: string[]; listButtonLabel?: string; listSections?: { title: string; rows: { id: string; title: string; desc: string }[]; }[]; carouselItems?: { id: string; name: string; description: string; price: number; imageUrl: string; button1: string; button2: string; }[]; } const DEFAULT_TEMPLATES: Record = { support: { id: 'support', name: 'Customer Support', category: 'Support & Utility', businessName: 'Quatrohaus', isVerified: true, avatarLetter: 'Q', avatarBg: 'bg-purple-600', bodyText: 'How would you like to contact Quatrohaus Support?', buttons: ['Call Quatrohaus', 'Message Quatrohaus', 'Exit Support'], }, lead: { id: 'lead', name: 'Lead Generation', category: 'Marketing', businessName: 'Silver Oak Bank', isVerified: true, avatarLetter: 'S', avatarBg: 'bg-emerald-700', bodyText: 'Hello, DFC Bank Welcomes You to WhatsApp Banking.\n\nHow can we assist you?', footerText: 'Secured by DFC Banking Group', listButtonLabel: 'Select options', listSections: [ { title: 'Banking Services', rows: [ { id: 'bank_acc', title: 'Bank Account', desc: 'Check balance & recent transactions' }, { id: 'credit_card', title: 'Credit Card', desc: 'View statements & pay bills' }, { id: 'loans', title: 'Loan Services', desc: 'Apply or check application status' }, ] }, { title: 'Other', rows: [ { id: 'agent_support', title: 'Customer Support', desc: 'Connect with a live agent' } ] } ] }, sale: { id: 'sale', name: 'Sale / Catalog Showcase', category: 'Sales & Marketing', businessName: 'Leaf & Grain', isVerified: true, avatarLetter: 'L', avatarBg: 'bg-amber-800', bodyText: 'Hi Afreen,\nStronger than most hardwoods, yet lightweight. Made of Eco-friendly 100% Natural Bamboo.', carouselItems: [ { id: 'c1', name: 'Cutlery Set', description: 'Reusable premium bamboo utensils', price: 18.50, imageUrl: 'https://images.unsplash.com/photo-1584269600464-37b1b58a9fe7?q=80&w=400', button1: 'Buy Now', button2: 'View details' }, { id: 'c2', name: 'Bamboo Steamer', description: 'Authentic cooking bamboo steamer', price: 24.99, imageUrl: 'https://images.unsplash.com/photo-1591821099447-06225f17a944?q=80&w=400', button1: 'Buy Now', button2: 'View details' }, { id: 'c3', name: 'Bamboo Plates', description: 'Set of 4 biodegradable plates', price: 15.00, imageUrl: 'https://images.unsplash.com/photo-1610701596007-11502861dcfa?q=80&w=400', button1: 'Buy Now', button2: 'View details' } ] }, feedback: { id: 'feedback', name: 'Customer Feedback', category: 'Utility & Retention', businessName: 'Peak Auto Care', isVerified: true, avatarLetter: 'P', avatarBg: 'bg-red-700', bodyText: 'Thank you for helping us, your feedback will help us improve our performance. How would you like to rate our services?', buttons: ['Review', 'Rating', 'Both'], }, ecocash: { id: 'ecocash', name: 'EcoCash Payment Prompt', category: 'Payments & Checkout', businessName: 'EcoStore', isVerified: true, avatarLetter: 'E', avatarBg: 'bg-emerald-600', bodyText: 'To pay via EcoCash, please enter your EcoCash mobile number below:', footerText: 'Secure EcoCash Push Payment via PesePay', buttons: [] }, quantity: { id: 'quantity', name: 'Select Quantity Prompt', category: 'Interactive Utility', businessName: 'Organic Store', isVerified: true, avatarLetter: 'O', avatarBg: 'bg-emerald-600', bodyText: 'Select Quantity\n\n*Organic Coffee Beans*\n$18.50 per unit\n\nConfirm how many units you would like to add to your chat basket.', footerText: 'Secure checkout powered by RetailBot', buttons: ['Select Quantity', 'Back to Menu'] } }; export default function TemplatesPage() { const { user } = useAuth(); const [activeTab, setActiveTab] = useState<'support' | 'lead' | 'sale' | 'feedback' | 'ecocash' | 'quantity'>('support'); const [panelTab, setPanelTab] = useState<'editor' | 'json' | 'test'>('editor'); const [showQtySheet, setShowQtySheet] = useState(false); const [previewQty, setPreviewQty] = useState(1); // Custom configurations for the templates const [configs, setConfigs] = useState>(DEFAULT_TEMPLATES); const [copied, setCopied] = useState(false); const [testPhone, setTestPhone] = useState('+263779998887'); const [sendingTest, setSendingTest] = useState(false); // Marketing Broadcast mode and states const [broadcastMessage, setBroadcastMessage] = useState(''); const [broadcasting, setBroadcasting] = useState(false); const [recipientMode, setRecipientMode] = useState<'all' | 'single'>('all'); const [customers, setCustomers] = useState([]); const [searchQuery, setSearchQuery] = useState(''); const [selectedCustomer, setSelectedCustomer] = useState(null); useEffect(() => { const fetchCustomers = async () => { if (!user || user.subscriptionStatus === 'UNSUBSCRIBED' || user.subscriptionStatus === 'EXPIRED') { return; } try { const data = await apiRequest('api/customers', 'GET'); if (Array.isArray(data)) { setCustomers(data); } } catch (err) { console.error('Failed to fetch customers for broadcast:', err); } }; fetchCustomers(); }, [user?.id, user?.subscriptionStatus]); const filteredCustomers = searchQuery.trim() === '' ? [] : customers.filter(cust => { const name = (cust.name || '').toLowerCase(); const phone = (cust.whatsappNumber || '').toLowerCase(); const query = searchQuery.toLowerCase(); return name.includes(query) || phone.includes(query); }); useEffect(() => { if (user?.phone) { setTestPhone(user.phone); } }, [user]); // Phone simulation state const [simulatedMessages, setSimulatedMessages] = useState([]); const [showListSheet, setShowListSheet] = useState(false); const [carouselIndex, setCarouselIndex] = useState(0); const [previewEcoCashPhone, setPreviewEcoCashPhone] = useState(''); // Load current template configuration const currentConfig = configs[activeTab]; // Reset chat simulation whenever template changes useEffect(() => { resetChatSimulation(); setShowListSheet(false); setShowQtySheet(false); setPreviewQty(1); setCarouselIndex(0); // eslint-disable-next-line react-hooks/exhaustive-deps }, [activeTab]); const resetChatSimulation = () => { // Generate initial prompt bubble from bot let initialMessage = { id: 'init', direction: 'outbound', body: currentConfig.bodyText, footer: currentConfig.footerText, buttons: currentConfig.buttons, listButtonLabel: currentConfig.listButtonLabel, carouselItems: currentConfig.carouselItems, }; setSimulatedMessages([initialMessage]); }; const handleEditorChange = (field: keyof TemplateConfig, value: any) => { setConfigs(prev => ({ ...prev, [activeTab]: { ...prev[activeTab], [field]: value } })); // Update the live simulation initial message dynamically setSimulatedMessages(prev => { if (prev.length > 0 && prev[0].id === 'init') { const updated = [...prev]; updated[0] = { ...updated[0], body: field === 'bodyText' ? value : currentConfig.bodyText, footer: field === 'footerText' ? value : currentConfig.footerText, buttons: field === 'buttons' ? value : currentConfig.buttons, listButtonLabel: field === 'listButtonLabel' ? value : currentConfig.listButtonLabel, carouselItems: field === 'carouselItems' ? value : currentConfig.carouselItems, }; return updated; } return prev; }); }; const handleButtonValueChange = (index: number, val: string) => { const updatedButtons = [...(currentConfig.buttons || [])]; updatedButtons[index] = val; handleEditorChange('buttons', updatedButtons); }; const handleListRowChange = (sectionIdx: number, rowIdx: number, field: 'title' | 'desc', val: string) => { const sections = JSON.parse(JSON.stringify(currentConfig.listSections || [])); sections[sectionIdx].rows[rowIdx][field] = val; handleEditorChange('listSections', sections); }; const handleCarouselItemChange = (itemIdx: number, field: string, val: any) => { const items = JSON.parse(JSON.stringify(currentConfig.carouselItems || [])); items[itemIdx][field] = val; handleEditorChange('carouselItems', items); }; // Click handler for buttons inside mockup phone const handlePhoneButtonClick = (btnLabel: string) => { // 1. Add user reply bubble const userMsg = { id: `user-${Date.now()}`, direction: 'inbound', body: btnLabel }; // 2. Add automated bot response after a short delay let botReplyText = 'Thanks! Your selection has been received.'; let responseButtons: string[] | undefined = undefined; if (activeTab === 'support') { if (btnLabel.toLowerCase().includes('call')) { botReplyText = `*Call Quatrohaus Support*\n\nYou can call our support team directly at:\n\n+2637776015100`; responseButtons = ['Message Quatrohaus', 'Exit Support']; } else if (btnLabel.toLowerCase().includes('message')) { botReplyText = `*Message Quatrohaus Support*\n\nYou can chat with us on WhatsApp here:\n\nhttps://wa.me/2637776015100`; responseButtons = ['Call Quatrohaus', 'Exit Support']; } else if (btnLabel.toLowerCase().includes('exit') || btnLabel === 'Talk to Support') { botReplyText = `*Customer Support*\n\nHow would you like to contact Quatrohaus Support?\n\n1. Call Quatrohaus\n2. Message Quatrohaus\n3. Exit Support`; responseButtons = ['Call Quatrohaus', 'Message Quatrohaus', 'Exit Support']; } else if (btnLabel === 'Shop Now') { botReplyText = `*Select a category to browse:*\n\n1. Electronics\n2. Groceries\n3. Clothing`; responseButtons = ['Electronics', 'Groceries', 'Clothing', 'Back to Menu']; } else if (btnLabel === 'Search Products') { botReplyText = `*Search Products*\n\nType the product name or details you are looking for:`; responseButtons = ['Back to Menu']; } else if (btnLabel === 'View Cart') { botReplyText = `*Your Shopping Cart:*\n\nYour cart is empty!\n\nType *1* to browse products, or *menu* to return.`; responseButtons = ['Browse Products', 'Back to Menu']; } else { botReplyText = `Confirmed! We'll see you then at your selected slot: ${btnLabel}.`; } } else if (activeTab === 'feedback') { botReplyText = `Thank you! Your feedback ("${btnLabel}") helps us deliver superior care. We have recorded your rating.`; } else if (activeTab === 'sale') { botReplyText = `Awesome selection! Added ${btnLabel.replace('Buy ', '')} to your shopping cart. Reply *3* to view cart or checkout!`; } else if (activeTab === 'ecocash') { botReplyText = `*EcoCash Payment Initiated!*\n\n` + `A push payment request of *USD $150.00* has been sent to *${btnLabel}*.\n` + `Ref: *PESEPAY-SIM-REF-1092*\n\n` + `Please check your EcoCash menu and enter your PIN to approve.\n\n` + `_You will receive a WhatsApp confirmation once payment is processed._`; } else if (activeTab === 'quantity') { if (btnLabel === 'Select Quantity') { setShowQtySheet(true); return; } botReplyText = `Confirmed! Added *${btnLabel}* to your shopping cart. Reply *3* to view cart or checkout!`; } const botMsg = { id: `bot-${Date.now()}`, direction: 'outbound', body: botReplyText, buttons: responseButtons }; setSimulatedMessages(prev => [...prev, userMsg, botMsg]); }; const handleSelectOptionsClick = () => { setShowListSheet(true); }; const handleListRowSelect = (rowTitle: string) => { setShowListSheet(false); // Add user message const userMsg = { id: `user-${Date.now()}`, direction: 'inbound', body: rowTitle }; // Add bot response const botMsg = { id: `bot-${Date.now()}`, direction: 'outbound', body: `Hello! You selected *${rowTitle}* from our list. How can we help you with this? Please type your query.` }; setSimulatedMessages(prev => [...prev, userMsg, botMsg]); }; // Generate WhatsApp Cloud API JSON Payload const generateJsonPayload = (): string => { const recipient = '{{customer_phone}}'; if (activeTab === 'ecocash') { return JSON.stringify({ messaging_product: 'whatsapp', recipient_type: 'individual', to: recipient, type: 'interactive', interactive: { type: 'flow', header: { type: 'text', text: currentConfig.businessName }, body: { text: currentConfig.bodyText }, footer: currentConfig.footerText ? { text: currentConfig.footerText } : undefined, action: { name: 'flow', parameters: { flow_token: 'ecocash_payment_flow_token', flow_id: '1092779560579318', flow_cta: 'Enter EcoCash Number', flow_action: 'navigate', flow_action_payload: { screen: 'PHONE_INPUT' } } } } }, null, 2); } if (activeTab === 'quantity') { return JSON.stringify({ messaging_product: 'whatsapp', recipient_type: 'individual', to: recipient, type: 'interactive', interactive: { type: 'flow', header: { type: 'text', text: currentConfig.businessName }, body: { text: currentConfig.bodyText }, footer: currentConfig.footerText ? { text: currentConfig.footerText } : undefined, action: { name: 'flow', parameters: { flow_token: 'quantity_selection_flow_token', flow_id: '1092779560579420', flow_cta: 'Select Quantity', flow_action: 'navigate', flow_action_payload: { screen: 'QTY_SELECTOR' } } } } }, null, 2); } if (activeTab === 'support' || activeTab === 'feedback') { return JSON.stringify({ messaging_product: 'whatsapp', recipient_type: 'individual', to: recipient, type: 'interactive', interactive: { type: 'button', header: { type: 'text', text: currentConfig.businessName }, body: { text: currentConfig.bodyText }, action: { buttons: (currentConfig.buttons || []).map((btn, idx) => ({ type: 'reply', reply: { id: `btn_${idx + 1}`, title: btn } })) } } }, null, 2); } if (activeTab === 'lead') { return JSON.stringify({ messaging_product: 'whatsapp', recipient_type: 'individual', to: recipient, type: 'interactive', interactive: { type: 'list', header: { type: 'text', text: currentConfig.businessName }, body: { text: currentConfig.bodyText }, footer: currentConfig.footerText ? { text: currentConfig.footerText } : undefined, action: { button: currentConfig.listButtonLabel || 'Select options', sections: (currentConfig.listSections || []).map((sec, sIdx) => ({ title: sec.title, rows: sec.rows.map((row, rIdx) => ({ id: row.id, title: row.title, description: row.desc })) })) } } }, null, 2); } // Carousel Multi-Product Template return JSON.stringify({ messaging_product: 'whatsapp', recipient_type: 'individual', to: recipient, type: 'interactive', interactive: { type: 'carousel', header: { type: 'text', text: `${currentConfig.businessName} Catalog` }, body: { text: currentConfig.bodyText }, action: { cards: (currentConfig.carouselItems || []).map((item, idx) => ({ header: { type: 'image', image: { link: item.imageUrl } }, body: { text: `*${item.name}* - $${item.price.toFixed(2)}\n\n${item.description}` }, action: { buttons: [ { type: 'reply', reply: { id: `buy_${item.id}`, title: item.button1 } }, { type: 'reply', reply: { id: `view_${item.id}`, title: item.button2 } } ] } })) } } }, null, 2); }; const handleCopyPayload = () => { navigator.clipboard.writeText(generateJsonPayload()); setCopied(true); setTimeout(() => setCopied(false), 2000); }; const handleSendSimulatedTemplate = async () => { if (!testPhone.trim() || !user || sendingTest) return; setSendingTest(true); try { await apiRequest('api/whatsapp/templates/simulate', 'POST', { whatsappNumber: testPhone, templateType: currentConfig.name, bodyText: currentConfig.bodyText, payload: JSON.parse(generateJsonPayload()) }); alert(`Template simulated successfully! Go to the 'WhatsApp Bot Simulator' page to check the logged message for ${testPhone}.`); } catch (err: any) { alert(`Simulation error: ${err.message}`); } finally { setSendingTest(false); } }; const handleSendBroadcast = async () => { if (!broadcastMessage.trim() || broadcasting) return; if (recipientMode === 'single' && !selectedCustomer) { alert("Please select a customer first."); return; } const confirmText = recipientMode === 'all' ? "Are you sure you want to send this broadcast message to ALL of your customers?" : `Are you sure you want to send this notification to ${selectedCustomer.name || 'this customer'}?`; const confirmSend = window.confirm(confirmText); if (!confirmSend) return; setBroadcasting(true); try { const payload: any = { message: broadcastMessage }; if (recipientMode === 'single' && selectedCustomer) { payload.recipientPhone = selectedCustomer.whatsappNumber; } const res = await apiRequest('api/whatsapp/broadcast', 'POST', payload); alert(res.message || 'Notification sent successfully!'); setBroadcastMessage(''); setSelectedCustomer(null); setSearchQuery(''); } catch (err: any) { alert(`Failed to send notification: ${err.message}`); } finally { setBroadcasting(false); } }; return (
{/* Header section */}

WhatsApp Message Templates

Build, test, and retrieve API structures for interactive marketing and support messages

{/* Marketing Broadcast Section */}

Customer Broadcast & Notifications

Send marketing announcements or single notifications to your WhatsApp chatbot customers.

{/* Recipient Mode Selection */}
{/* Single Customer Search Panel */} {recipientMode === 'single' && (
{selectedCustomer ? (
{selectedCustomer.name ? selectedCustomer.name[0].toUpperCase() : 'C'}

{selectedCustomer.name || 'WhatsApp Customer'}

+{selectedCustomer.whatsappNumber}

) : (
setSearchQuery(e.target.value)} className="w-full bg-white border border-gray-300 rounded-xl pl-10 pr-4 py-2.5 text-sm text-gray-900 placeholder-gray-400 focus:border-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500 transition-all font-sans" />
{searchQuery.trim() !== '' && (
{filteredCustomers.length > 0 ? ( filteredCustomers.map((cust) => ( )) ) : (
No customers match your search
)}
)}
)}
)} {/* Message Textbox */}