Add Activepieces integration for workflow automation
- Add Activepieces fork with SmoothSchedule custom piece - Create integrations app with Activepieces service layer - Add embed token endpoint for iframe integration - Create Automations page with embedded workflow builder - Add sidebar visibility fix for embed mode - Add list inactive customers endpoint to Public API - Include SmoothSchedule triggers: event created/updated/cancelled - Include SmoothSchedule actions: create/update/cancel events, list resources/services/customers 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
poduck
302
frontend/src/components/EditAppointmentModal.tsx
Normal file
302
frontend/src/components/EditAppointmentModal.tsx
Normal file
@@ -0,0 +1,302 @@
|
||||
/**
|
||||
* EditAppointmentModal Component
|
||||
*
|
||||
* Modal for editing existing appointments, including participant management.
|
||||
* Extracted from OwnerScheduler for reusability and enhanced with participant selector.
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { X, User as UserIcon, Mail, Phone } from 'lucide-react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import { Appointment, AppointmentStatus, Resource, Service, ParticipantInput } from '../types';
|
||||
import { ParticipantSelector } from './ParticipantSelector';
|
||||
|
||||
interface EditAppointmentModalProps {
|
||||
appointment: Appointment & {
|
||||
customerEmail?: string;
|
||||
customerPhone?: string;
|
||||
};
|
||||
resources: Resource[];
|
||||
services: Service[];
|
||||
onSave: (updates: {
|
||||
startTime?: Date;
|
||||
resourceId?: string | null;
|
||||
durationMinutes?: number;
|
||||
status?: AppointmentStatus;
|
||||
notes?: string;
|
||||
participantsInput?: ParticipantInput[];
|
||||
}) => void;
|
||||
onClose: () => void;
|
||||
isSaving?: boolean;
|
||||
}
|
||||
|
||||
export const EditAppointmentModal: React.FC<EditAppointmentModalProps> = ({
|
||||
appointment,
|
||||
resources,
|
||||
services,
|
||||
onSave,
|
||||
onClose,
|
||||
isSaving = false,
|
||||
}) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
// Form state
|
||||
const [editDateTime, setEditDateTime] = useState('');
|
||||
const [editResource, setEditResource] = useState('');
|
||||
const [editDuration, setEditDuration] = useState(15);
|
||||
const [editStatus, setEditStatus] = useState<AppointmentStatus>('SCHEDULED');
|
||||
const [editNotes, setEditNotes] = useState('');
|
||||
const [participants, setParticipants] = useState<ParticipantInput[]>([]);
|
||||
|
||||
// Initialize form state from appointment
|
||||
useEffect(() => {
|
||||
if (appointment) {
|
||||
// Convert Date to datetime-local format
|
||||
const startTime = appointment.startTime;
|
||||
const localDateTime = new Date(startTime.getTime() - startTime.getTimezoneOffset() * 60000)
|
||||
.toISOString()
|
||||
.slice(0, 16);
|
||||
setEditDateTime(localDateTime);
|
||||
setEditResource(appointment.resourceId || '');
|
||||
setEditDuration(appointment.durationMinutes || 15);
|
||||
setEditStatus(appointment.status || 'SCHEDULED');
|
||||
setEditNotes(appointment.notes || '');
|
||||
|
||||
// Initialize participants from existing appointment participants
|
||||
if (appointment.participants) {
|
||||
const existingParticipants: ParticipantInput[] = appointment.participants.map(p => ({
|
||||
role: p.role,
|
||||
userId: p.userId ? parseInt(p.userId) : undefined,
|
||||
resourceId: p.resourceId ? parseInt(p.resourceId) : undefined,
|
||||
externalEmail: p.externalEmail,
|
||||
externalName: p.externalName,
|
||||
}));
|
||||
setParticipants(existingParticipants);
|
||||
}
|
||||
}
|
||||
}, [appointment]);
|
||||
|
||||
// Get service name
|
||||
const serviceName = useMemo(() => {
|
||||
const service = services.find(s => s.id === appointment.serviceId);
|
||||
return service?.name || 'Unknown Service';
|
||||
}, [services, appointment.serviceId]);
|
||||
|
||||
// Check if appointment is unassigned (pending)
|
||||
const isUnassigned = !appointment.resourceId;
|
||||
|
||||
// Handle save
|
||||
const handleSave = () => {
|
||||
const startTime = new Date(editDateTime);
|
||||
|
||||
onSave({
|
||||
startTime,
|
||||
resourceId: editResource || null,
|
||||
durationMinutes: editDuration,
|
||||
status: editStatus,
|
||||
notes: editNotes,
|
||||
participantsInput: participants,
|
||||
});
|
||||
};
|
||||
|
||||
// Validation
|
||||
const canSave = useMemo(() => {
|
||||
if (isUnassigned) {
|
||||
// For unassigned appointments, require resource and valid duration
|
||||
return editResource && editDuration >= 15;
|
||||
}
|
||||
return true;
|
||||
}, [isUnassigned, editResource, editDuration]);
|
||||
|
||||
const modalContent = (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-lg bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden max-h-[90vh] flex flex-col"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-r from-brand-50 to-brand-100 dark:from-brand-900/30 dark:to-brand-800/30">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{isUnassigned ? t('scheduler.scheduleAppointment') : t('scheduler.editAppointment')}
|
||||
</h3>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="p-1 text-gray-400 hover:bg-white/50 dark:hover:bg-gray-700/50 rounded-full transition-colors"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Scrollable content */}
|
||||
<div className="overflow-y-auto flex-1 p-6 space-y-4">
|
||||
{/* Customer Info */}
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-brand-100 dark:bg-brand-900/50 flex items-center justify-center">
|
||||
<UserIcon size={20} className="text-brand-600 dark:text-brand-400" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-500 dark:text-gray-400">
|
||||
{t('customers.title', 'Customer')}
|
||||
</p>
|
||||
<p className="text-lg font-semibold text-gray-900 dark:text-white">
|
||||
{appointment.customerName}
|
||||
</p>
|
||||
{appointment.customerEmail && (
|
||||
<div className="flex items-center gap-2 mt-1 text-sm text-gray-600 dark:text-gray-300">
|
||||
<Mail size={14} />
|
||||
<span>{appointment.customerEmail}</span>
|
||||
</div>
|
||||
)}
|
||||
{appointment.customerPhone && (
|
||||
<div className="flex items-center gap-2 mt-1 text-sm text-gray-600 dark:text-gray-300">
|
||||
<Phone size={14} />
|
||||
<span>{appointment.customerPhone}</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Service & Status */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<p className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1">
|
||||
{t('services.title', 'Service')}
|
||||
</p>
|
||||
<p className="text-sm font-semibold text-gray-900 dark:text-white">{serviceName}</p>
|
||||
</div>
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<label className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1 block">
|
||||
{t('scheduler.status', 'Status')}
|
||||
</label>
|
||||
<select
|
||||
value={editStatus}
|
||||
onChange={(e) => setEditStatus(e.target.value as AppointmentStatus)}
|
||||
className="w-full px-2 py-1 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded text-sm font-semibold text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-500"
|
||||
>
|
||||
<option value="SCHEDULED">{t('scheduler.confirmed', 'Scheduled')}</option>
|
||||
<option value="EN_ROUTE">En Route</option>
|
||||
<option value="IN_PROGRESS">In Progress</option>
|
||||
<option value="COMPLETED">{t('scheduler.completed', 'Completed')}</option>
|
||||
<option value="AWAITING_PAYMENT">Awaiting Payment</option>
|
||||
<option value="CANCELLED">{t('scheduler.cancelled', 'Cancelled')}</option>
|
||||
<option value="NO_SHOW">{t('scheduler.noShow', 'No Show')}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Editable Fields */}
|
||||
<div className="space-y-4 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-800">
|
||||
<h4 className="text-sm font-semibold text-gray-900 dark:text-white">
|
||||
{t('scheduler.scheduleDetails', 'Schedule Details')}
|
||||
</h4>
|
||||
|
||||
{/* Date & Time Picker */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{t('scheduler.selectDate', 'Date')} & {t('scheduler.selectTime', 'Time')}
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={editDateTime}
|
||||
onChange={(e) => setEditDateTime(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Resource Selector */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{t('scheduler.selectResource', 'Assign to Resource')}
|
||||
{isUnassigned && <span className="text-red-500 ml-1">*</span>}
|
||||
</label>
|
||||
<select
|
||||
value={editResource}
|
||||
onChange={(e) => setEditResource(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-500"
|
||||
>
|
||||
<option value="">Unassigned</option>
|
||||
{resources.map(resource => (
|
||||
<option key={resource.id} value={resource.id}>
|
||||
{resource.name}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Duration Input */}
|
||||
<div>
|
||||
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-2">
|
||||
{t('scheduler.duration', 'Duration')} (minutes)
|
||||
{isUnassigned && <span className="text-red-500 ml-1">*</span>}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="15"
|
||||
step="15"
|
||||
value={editDuration || 15}
|
||||
onChange={(e) => {
|
||||
const value = parseInt(e.target.value);
|
||||
setEditDuration(value >= 15 ? value : 15);
|
||||
}}
|
||||
className="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-500"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Participants Section */}
|
||||
<div className="p-4 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<ParticipantSelector
|
||||
value={participants}
|
||||
onChange={setParticipants}
|
||||
allowedRoles={['STAFF', 'CUSTOMER', 'OBSERVER']}
|
||||
allowExternalEmail={true}
|
||||
existingParticipants={appointment.participants}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Notes */}
|
||||
<div className="p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
|
||||
<label className="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-1 block">
|
||||
{t('scheduler.notes', 'Notes')}
|
||||
</label>
|
||||
<textarea
|
||||
value={editNotes}
|
||||
onChange={(e) => setEditNotes(e.target.value)}
|
||||
rows={3}
|
||||
className="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-brand-500 resize-none"
|
||||
placeholder={t('scheduler.notesPlaceholder', 'Add notes about this appointment...')}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer with action buttons */}
|
||||
<div className="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3 bg-white dark:bg-gray-800">
|
||||
<button
|
||||
onClick={onClose}
|
||||
disabled={isSaving}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 bg-gray-100 dark:bg-gray-700 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{t('scheduler.cancel', 'Cancel')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={!canSave || isSaving}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-brand-600 rounded-lg hover:bg-brand-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
{isSaving ? t('common.saving', 'Saving...') : (
|
||||
isUnassigned ? t('scheduler.scheduleAppointment', 'Schedule Appointment') : t('scheduler.saveChanges', 'Save Changes')
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return createPortal(modalContent, document.body);
|
||||
};
|
||||
|
||||
export default EditAppointmentModal;
|
||||
Reference in New Issue
Block a user