Schedule New Message

\n\n {error && (\n

\n {error}\n

\n )}\n\n {success && (\n

\n {success}\n

\n )}\n\n

\n {/* Contact Selection */}\n

\n Contact\n

\n setFormData(prev => ({ ...prev, phoneNumber: e.target.value }))}\n className=\"form-input\"\n required\n />\n {formData.phoneNumber && (\n

\n Formatted: {formatPhoneDisplay(formData.phoneNumber)}\n

\n )}\n

\n setShowContactPicker(true)}\n className=\"px-3 py-2 bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors\"\n >\n 📞\n \n

\n\n {/* Contact Name */}\n

\n Contact Name (Optional)\n setFormData(prev => ({ ...prev, contactName: e.target.value }))}\n className=\"form-input\"\n />\n

\n\n {/* Message */}\n

\n Message\n

\n \n {formData.message.length} characters\n \n setShowTemplates(true)}\n className=\"text-xs text-green-600 dark:text-green-400 hover:underline\"\n >\n Use Template\n \n

\n setFormData(prev => ({ ...prev, message: e.target.value }))}\n className=\"form-textarea h-24\"\n required\n />\n

\n\n {/* Date and Time */}\n

\n Date\n setFormData(prev => ({ ...prev, scheduledDate: e.target.value }))}\n className=\"form-input\"\n min={new Date().toISOString().split('T')[0]}\n required\n />\n

\n Time\n setFormData(prev => ({ ...prev, scheduledTime: e.target.value }))}\n className=\"form-input\"\n required\n />\n

\n\n {/* Recurring Options */}\n

\n setFormData(prev => ({ \n ...prev, \n isRecurring: e.target.checked,\n recurrenceType: e.target.checked ? 'daily' : undefined\n }))}\n className=\"w-4 h-4 text-green-600 bg-gray-100 border-gray-300 rounded focus:ring-green-500\"\n />\n \n Repeat this message\n \n

\n\n {formData.isRecurring && (\n

\n Repeat every\n setFormData(prev => ({ \n ...prev, \n recurrenceType: e.target.value as 'daily' | 'weekly' | 'monthly'\n }))}\n className=\"form-select\"\n >\n \n \n \n \n

\n )}\n

\n\n {/* Submit Button */}\n \n {loading ? (\n <>\n

\n Scheduling...\n \n ) : (\n <>\n 📅\n Schedule Message\n \n )}\n \n \n

\n\n {/* Contact Picker Modal */}\n {showContactPicker && (\n

Select Contact

\n setShowContactPicker(false)}\n className=\"text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200\"\n >\n ✕\n \n

\n {contacts.length === 0 ? (\n

\n No contacts saved yet\n

\n ) : (\n contacts.map((contact) => (\n handleContactSelect(contact)}\n className=\"w-full p-4 text-left hover:bg-gray-50 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700 last:border-b-0\"\n >\n

{contact.name}

\n {formatPhoneDisplay(contact.phoneNumber)}\n

\n \n ))\n )}\n

\n )}\n\n {/* Template Picker Modal */}\n {showTemplates && (\n

Message Templates

\n setShowTemplates(false)}\n className=\"text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200\"\n >\n ✕\n \n

\n {templates.map((template) => (\n handleTemplateSelect(template)}\n className=\"w-full p-4 text-left hover:bg-gray-50 dark:hover:bg-gray-700 border-b border-gray-100 dark:border-gray-700 last:border-b-0\"\n >\n

{template.name}

\n {template.content}\n

\n {template.category}\n

\n \n ))}\n

\n )}\n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/w_ache/whatsapp/code/frontend/components/MessageForm.tsx","extension","actionData","errors"]