@visns-studio/visns-components 5.13.9 → 5.13.10

package/src/components/proposal/AgreementSignatureEditor.jsx

@@ -0,0 +1,644 @@
+import React, { useState, useEffect } from 'react';
+import { Plus, Trash2, Move, Type, Edit3, Save, X } from 'lucide-react';
+import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
+import { arrayMoveImmutable } from 'array-move';
+import { toast } from 'react-toastify';
+import { buildUrl, defaultProposalApiEndpoints } from '../../utils/urlBuilder';
+import './AgreementSignatureEditor.css';
+
+const DragHandle = SortableHandle(() => (
+    <div className="signature-drag-handle">
+        <Move size={16} />
+    </div>
+));
+
+const SortableField = SortableElement(({ field, onEdit, onDelete }) => (
+    <div className="signature-field-item">
+        <div className="signature-field-header">
+            <DragHandle />
+            <div className="signature-field-info">
+                <span className="signature-field-label">{field.label}</span>
+                <span className="signature-field-type">{field.type}</span>
+            </div>
+            <div className="signature-field-actions">
+                <button
+                    onClick={() => onEdit(field)}
+                    className="signature-field-btn edit"
+                    title="Edit field"
+                >
+                    <Edit3 size={14} />
+                </button>
+                <button
+                    onClick={() => onDelete(field.id)}
+                    className="signature-field-btn delete"
+                    title="Delete field"
+                >
+                    <Trash2 size={14} />
+                </button>
+            </div>
+        </div>
+        {field.placeholder && (
+            <div className="signature-field-placeholder">
+                Placeholder: {field.placeholder}
+            </div>
+        )}
+    </div>
+));
+
+const SortableFieldList = SortableContainer(({ fields, onEdit, onDelete }) => (
+    <div className="signature-fields-list">
+        {fields.map((field, index) => (
+            <SortableField
+                key={field.id}
+                index={index}
+                field={field}
+                onEdit={onEdit}
+                onDelete={onDelete}
+            />
+        ))}
+    </div>
+));
+
+const FieldEditor = ({ field, onSave, onCancel }) => {
+    const [formData, setFormData] = useState({
+        label: field?.label || '',
+        type: field?.type || 'text',
+        placeholder: field?.placeholder || '',
+        required: field?.required || false,
+        width: field?.width || 'full'
+    });
+
+    const fieldTypes = [
+        { value: 'text', label: 'Text Input' },
+        { value: 'signature', label: 'Signature Block' },
+        { value: 'date', label: 'Date Field' },
+        { value: 'select', label: 'Dropdown' },
+        { value: 'textarea', label: 'Text Area' }
+    ];
+
+    const fieldWidths = [
+        { value: 'full', label: 'Full Width' },
+        { value: 'half', label: 'Half Width' },
+        { value: 'third', label: 'Third Width' }
+    ];
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        if (!formData.label.trim()) {
+            toast.error('Field label is required');
+            return;
+        }
+        onSave({ ...field, ...formData });
+    };
+
+    return (
+        <div className="signature-field-editor">
+            <div className="signature-field-editor-header">
+                <h4>{field ? 'Edit Field' : 'Add New Field'}</h4>
+                <button onClick={onCancel} className="signature-field-editor-close">
+                    <X size={16} />
+                </button>
+            </div>
+            
+            <form onSubmit={handleSubmit} className="signature-field-editor-form">
+                <div className="signature-field-editor-grid">
+                    <div className="signature-field-editor-group">
+                        <label>Field Label *</label>
+                        <input
+                            type="text"
+                            value={formData.label}
+                            onChange={(e) => setFormData({...formData, label: e.target.value})}
+                            placeholder="e.g., Name, Company Name, ABN"
+                            required
+                        />
+                    </div>
+                    
+                    <div className="signature-field-editor-group">
+                        <label>Field Type</label>
+                        <select
+                            value={formData.type}
+                            onChange={(e) => setFormData({...formData, type: e.target.value})}
+                        >
+                            {fieldTypes.map(type => (
+                                <option key={type.value} value={type.value}>
+                                    {type.label}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                    
+                    <div className="signature-field-editor-group">
+                        <label>Placeholder Text</label>
+                        <input
+                            type="text"
+                            value={formData.placeholder}
+                            onChange={(e) => setFormData({...formData, placeholder: e.target.value})}
+                            placeholder="Optional placeholder text"
+                        />
+                    </div>
+                    
+                    <div className="signature-field-editor-group">
+                        <label>Field Width</label>
+                        <select
+                            value={formData.width}
+                            onChange={(e) => setFormData({...formData, width: e.target.value})}
+                        >
+                            {fieldWidths.map(width => (
+                                <option key={width.value} value={width.value}>
+                                    {width.label}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                </div>
+                
+                <div className="signature-field-editor-checkbox">
+                    <label>
+                        <input
+                            type="checkbox"
+                            checked={formData.required}
+                            onChange={(e) => setFormData({...formData, required: e.target.checked})}
+                        />
+                        Required field
+                    </label>
+                </div>
+                
+                <div className="signature-field-editor-actions">
+                    <button type="button" onClick={onCancel} className="signature-btn secondary">
+                        Cancel
+                    </button>
+                    <button type="submit" className="signature-btn primary">
+                        <Save size={16} />
+                        Save Field
+                    </button>
+                </div>
+            </form>
+        </div>
+    );
+};
+
+const AgreementSignatureEditor = ({ 
+    section, 
+    templateId,
+    onSave, 
+    onCancel,
+    apiEndpoints = defaultProposalApiEndpoints,
+    hideFooter = false,
+    onTemplateChange = null
+}) => {
+    const [template, setTemplate] = useState({
+        headerText: section?.template ? section.template.headerText || '' : 'APPROVAL TO PROCEED',
+        bodyText: section?.template?.bodyText || 'By signing the Approval to Proceed, you agree to engage {{company_name}} to complete the Scope of Works outlined within this Fee Proposal in accordance with our Terms of Engagement.',
+        fields: section?.template?.fields || []
+    });
+    
+    const [editingField, setEditingField] = useState(null);
+    const [showFieldEditor, setShowFieldEditor] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+
+    // Helper function to replace template variables in URLs
+    const buildUrlWithTemplate = (urlTemplate, params = {}) => {
+        return buildUrl(urlTemplate, { templateId, ...params });
+    };
+
+    const parseContentToTemplate = (content) => {
+        // Parse HTML content to extract template data
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(content, 'text/html');
+        
+        // Extract header text from h3 tag
+        const headerElement = doc.querySelector('h3');
+        const headerText = headerElement ? headerElement.textContent.trim() : '';
+        
+        // Extract body text from p tag
+        const bodyElement = doc.querySelector('p');
+        const bodyText = bodyElement ? bodyElement.textContent.trim() : 'By signing the Approval to Proceed, you agree to engage {{company_name}} to complete the Scope of Works outlined within this Fee Proposal in accordance with our Terms of Engagement.';
+        
+        // Extract fields from the content (basic parsing)
+        const defaultFields = [
+            { id: 1, label: 'Name', type: 'text', placeholder: '', required: true, width: 'full', order: 1 },
+            { id: 2, label: 'Company Name', type: 'text', placeholder: '', required: true, width: 'full', order: 2 },
+            { id: 3, label: 'ABN', type: 'text', placeholder: '', required: false, width: 'full', order: 3 },
+            { id: 4, label: 'Signature', type: 'signature', placeholder: '', required: true, width: 'full', order: 4 },
+            { id: 5, label: 'Date', type: 'date', placeholder: '', required: true, width: 'full', order: 5 }
+        ];
+        
+        return {
+            headerText: headerText,
+            bodyText: bodyText,
+            fields: defaultFields
+        };
+    };
+
+    useEffect(() => {
+        if (section?.template) {
+            setTemplate(section.template);
+        } else if (section?.content) {
+            // Parse existing content to extract template data
+            const parsedTemplate = parseContentToTemplate(section.content);
+            setTemplate(parsedTemplate);
+        } else {
+            loadDefaultTemplate();
+        }
+    }, [section]);
+
+    // Notify parent when template changes
+    useEffect(() => {
+        if (onTemplateChange) {
+            const updatedSection = {
+                ...section,
+                template: template,
+                content: generatePreviewContent(template)
+            };
+            onTemplateChange(updatedSection);
+        }
+    }, [template]);
+
+    const loadDefaultTemplate = async () => {
+        if (!templateId) {
+            // Load default template when no templateId is provided
+            setTemplate({
+                headerText: 'APPROVAL TO PROCEED',
+                bodyText: 'By signing the Approval to Proceed, you agree to engage {{company_name}} to complete the Scope of Works outlined within this Fee Proposal in accordance with our Terms of Engagement.',
+                fields: [
+                    { id: 1, label: 'Name', type: 'text', placeholder: '', required: true, width: 'full', order: 1 },
+                    { id: 2, label: 'Company Name', type: 'text', placeholder: '', required: true, width: 'full', order: 2 },
+                    { id: 3, label: 'ABN', type: 'text', placeholder: '', required: false, width: 'full', order: 3 },
+                    { id: 4, label: 'Signature', type: 'signature', placeholder: '', required: true, width: 'full', order: 4 },
+                    { id: 5, label: 'Date', type: 'date', placeholder: '', required: true, width: 'full', order: 5 }
+                ]
+            });
+            return;
+        }
+        
+        try {
+            setIsLoading(true);
+            const response = await fetch(buildUrlWithTemplate(apiEndpoints.agreementSignatureTemplate || '/ajax/agreement-signature-template/{templateId}'));
+            
+            // Check if the response is ok and contains JSON
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            
+            const contentType = response.headers.get('content-type');
+            if (!contentType || !contentType.includes('application/json')) {
+                // If the API doesn't exist or returns HTML, use default template
+                console.warn('Agreement signature template API not available, using default template');
+                setTemplate({
+                    headerText: 'APPROVAL TO PROCEED',
+                    bodyText: 'By signing the Approval to Proceed, you agree to engage {{company_name}} to complete the Scope of Works outlined within this Fee Proposal in accordance with our Terms of Engagement.',
+                    fields: [
+                        { id: 1, label: 'Name', type: 'text', placeholder: '', required: true, width: 'full', order: 1 },
+                        { id: 2, label: 'Company Name', type: 'text', placeholder: '', required: true, width: 'full', order: 2 },
+                        { id: 3, label: 'ABN', type: 'text', placeholder: '', required: false, width: 'full', order: 3 },
+                        { id: 4, label: 'Signature', type: 'signature', placeholder: '', required: true, width: 'full', order: 4 },
+                        { id: 5, label: 'Date', type: 'date', placeholder: '', required: true, width: 'full', order: 5 }
+                    ]
+                });
+                return;
+            }
+            
+            const data = await response.json();
+            
+            if (data.success) {
+                setTemplate(data.template);
+            } else {
+                // Use default template if none exists
+                setTemplate({
+                    headerText: 'APPROVAL TO PROCEED',
+                    bodyText: 'By signing the Approval to Proceed, you agree to engage {{company_name}} to complete the Scope of Works outlined within this Fee Proposal in accordance with our Terms of Engagement.',
+                    fields: [
+                        { id: 1, label: 'Name', type: 'text', placeholder: '', required: true, width: 'full', order: 1 },
+                        { id: 2, label: 'Company Name', type: 'text', placeholder: '', required: true, width: 'full', order: 2 },
+                        { id: 3, label: 'ABN', type: 'text', placeholder: '', required: false, width: 'full', order: 3 },
+                        { id: 4, label: 'Signature', type: 'signature', placeholder: '', required: true, width: 'full', order: 4 },
+                        { id: 5, label: 'Date', type: 'date', placeholder: '', required: true, width: 'full', order: 5 }
+                    ]
+                });
+            }
+        } catch (error) {
+            console.warn('Error loading agreement signature template, using default:', error.message);
+            // Use default template instead of showing error
+            setTemplate({
+                headerText: 'APPROVAL TO PROCEED',
+                bodyText: 'By signing the Approval to Proceed, you agree to engage {{company_name}} to complete the Scope of Works outlined within this Fee Proposal in accordance with our Terms of Engagement.',
+                fields: [
+                    { id: 1, label: 'Name', type: 'text', placeholder: '', required: true, width: 'full', order: 1 },
+                    { id: 2, label: 'Company Name', type: 'text', placeholder: '', required: true, width: 'full', order: 2 },
+                    { id: 3, label: 'ABN', type: 'text', placeholder: '', required: false, width: 'full', order: 3 },
+                    { id: 4, label: 'Signature', type: 'signature', placeholder: '', required: true, width: 'full', order: 4 },
+                    { id: 5, label: 'Date', type: 'date', placeholder: '', required: true, width: 'full', order: 5 }
+                ]
+            });
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const handleFieldsReorder = ({ oldIndex, newIndex }) => {
+        if (oldIndex === newIndex) return;
+
+        const newFields = arrayMoveImmutable(template.fields, oldIndex, newIndex);
+        const reorderedFields = newFields.map((field, index) => ({
+            ...field,
+            order: index + 1
+        }));
+
+        setTemplate({
+            ...template,
+            fields: reorderedFields
+        });
+    };
+
+    const handleAddField = () => {
+        setEditingField(null);
+        setShowFieldEditor(true);
+    };
+
+    const handleEditField = (field) => {
+        setEditingField(field);
+        setShowFieldEditor(true);
+    };
+
+    const handleSaveField = (fieldData) => {
+        if (editingField) {
+            // Update existing field
+            const updatedFields = template.fields.map(field =>
+                field.id === editingField.id ? { ...fieldData, id: editingField.id } : field
+            );
+            setTemplate({
+                ...template,
+                fields: updatedFields
+            });
+        } else {
+            // Add new field
+            const newField = {
+                ...fieldData,
+                id: Date.now(), // Temporary ID - backend will assign real ID
+                order: template.fields.length + 1
+            };
+            setTemplate({
+                ...template,
+                fields: [...template.fields, newField]
+            });
+        }
+        setShowFieldEditor(false);
+        setEditingField(null);
+    };
+
+    const handleDeleteField = (fieldId) => {
+        if (!confirm('Are you sure you want to delete this field?')) return;
+        
+        const updatedFields = template.fields
+            .filter(field => field.id !== fieldId)
+            .map((field, index) => ({ ...field, order: index + 1 }));
+        
+        setTemplate({
+            ...template,
+            fields: updatedFields
+        });
+    };
+
+    const handleSaveTemplate = async () => {
+        try {
+            setIsLoading(true);
+            
+            // For now, if no templateId or API is not available, just save locally
+            if (!templateId) {
+                // Update section with template reference
+                const updatedSection = {
+                    ...section,
+                    template: template,
+                    content: generatePreviewContent(template)
+                };
+                
+                onSave(updatedSection);
+                toast.success('Agreement signature template saved locally');
+                return;
+            }
+            
+            // Save template to backend
+            const response = await fetch(buildUrlWithTemplate(apiEndpoints.agreementSignatureTemplateSave || '/ajax/agreement-signature-template/{templateId}'), {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
+                },
+                body: JSON.stringify({
+                    template: template
+                })
+            });
+
+            // Check if the response is ok and contains JSON
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            
+            const contentType = response.headers.get('content-type');
+            if (!contentType || !contentType.includes('application/json')) {
+                // If the API doesn't exist, save locally instead
+                console.warn('Agreement signature template save API not available, saving locally');
+                const updatedSection = {
+                    ...section,
+                    template: template,
+                    content: generatePreviewContent(template)
+                };
+                
+                onSave(updatedSection);
+                toast.success('Agreement signature template saved locally');
+                return;
+            }
+
+            const data = await response.json();
+            if (data.success) {
+                // Update section with template reference
+                const updatedSection = {
+                    ...section,
+                    template: data.template,
+                    content: generatePreviewContent(data.template)
+                };
+                
+                onSave(updatedSection);
+                toast.success('Agreement signature template saved');
+            } else {
+                throw new Error(data.message || 'Failed to save template');
+            }
+        } catch (error) {
+            console.warn('Error saving template to backend, saving locally:', error.message);
+            
+            // Fallback to local save
+            const updatedSection = {
+                ...section,
+                template: template,
+                content: generatePreviewContent(template)
+            };
+            
+            onSave(updatedSection);
+            toast.success('Agreement signature template saved locally');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const generatePreviewContent = (templateData) => {
+        const fieldsHtml = templateData.fields
+            .sort((a, b) => a.order - b.order)
+            .map(field => {
+                const required = field.required ? ' *' : '';
+                const width = field.width === 'full' ? '100%' : field.width === 'half' ? '48%' : '30%';
+                
+                switch (field.type) {
+                    case 'signature':
+                        return `<div style="margin-bottom: 2rem; width: ${width}; display: inline-block; margin-right: 2%;">
+                            <strong>${field.label}${required}:</strong>
+                            <div style="border-bottom: 2px solid #0066cc; height: 3rem; margin-top: 0.5rem;"></div>
+                        </div>`;
+                    case 'date':
+                        return `<div style="margin-bottom: 2rem; width: ${width}; display: inline-block; margin-right: 2%;">
+                            <strong>${field.label}${required}:</strong>
+                            <div style="border-bottom: 2px dotted #0066cc; height: 2rem; margin-top: 0.5rem;"></div>
+                        </div>`;
+                    default:
+                        return `<div style="margin-bottom: 2rem; width: ${width}; display: inline-block; margin-right: 2%;">
+                            <strong>${field.label}${required}:</strong>
+                            <div style="border-bottom: 2px dotted #0066cc; height: 2rem; margin-top: 0.5rem;"></div>
+                        </div>`;
+                }
+            })
+            .join('');
+
+        return `
+            <div style="padding: 2rem; border: 1px solid #ddd; border-radius: 8px; background: #fff;">
+                ${templateData.headerText ? `<h3 style="margin-bottom: 1rem; color: #333;">${templateData.headerText}</h3>` : ''}
+                <p style="margin-bottom: 2rem; line-height: 1.6;">${templateData.bodyText}</p>
+                <div style="clear: both;">${fieldsHtml}</div>
+            </div>
+        `;
+    };
+
+    if (isLoading) {
+        return (
+            <div className="signature-editor-loading">
+                <div className="signature-editor-spinner"></div>
+                <p>Loading template...</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="signature-editor-container">
+            <div className="signature-editor-header">
+                <h3>Agreement Signature Template</h3>
+                <p>Customize the text and fields for your agreement signature section</p>
+            </div>
+
+            <div className="signature-editor-content">
+                <div className="signature-editor-section">
+                    <label className="signature-editor-label">Header Text (Optional)</label>
+                    <input
+                        type="text"
+                        value={template.headerText}
+                        onChange={(e) => setTemplate({...template, headerText: e.target.value})}
+                        placeholder="e.g., APPROVAL TO PROCEED (leave empty for no header)"
+                        className="signature-editor-input"
+                    />
+                    <small className="signature-editor-help">
+                        Leave empty to remove the header completely
+                    </small>
+                </div>
+
+                <div className="signature-editor-section">
+                    <label className="signature-editor-label">Body Text</label>
+                    <textarea
+                        value={template.bodyText}
+                        onChange={(e) => setTemplate({...template, bodyText: e.target.value})}
+                        placeholder="Enter the agreement text. Use {{variable_name}} for dynamic content."
+                        className="signature-editor-textarea"
+                        rows="3"
+                    />
+                    <small className="signature-editor-help">
+                        Use variables like {'{{company_name}}'} for dynamic content
+                    </small>
+                </div>
+
+                <div className="signature-editor-section">
+                    <div className="signature-editor-fields-header">
+                        <label className="signature-editor-label">Signature Fields</label>
+                        <button
+                            onClick={handleAddField}
+                            className="signature-btn primary small"
+                        >
+                            <Plus size={16} />
+                            Add Field
+                        </button>
+                    </div>
+
+                    {template.fields.length === 0 ? (
+                        <div className="signature-editor-empty">
+                            <Type size={48} />
+                            <p>No fields added yet</p>
+                            <button onClick={handleAddField} className="signature-btn primary">
+                                Add Your First Field
+                            </button>
+                        </div>
+                    ) : (
+                        <SortableFieldList
+                            fields={template.fields}
+                            onSortEnd={handleFieldsReorder}
+                            onEdit={handleEditField}
+                            onDelete={handleDeleteField}
+                            useDragHandle
+                            lockAxis="y"
+                            helperClass="signature-field-helper"
+                        />
+                    )}
+                </div>
+
+                <div className="signature-editor-preview">
+                    <h4>Preview</h4>
+                    <div 
+                        className="signature-editor-preview-content"
+                        dangerouslySetInnerHTML={{ __html: generatePreviewContent(template) }}
+                    />
+                </div>
+            </div>
+
+            {!hideFooter && (
+                <div className="signature-editor-actions">
+                    <button
+                        onClick={onCancel}
+                        className="signature-btn secondary"
+                        disabled={isLoading}
+                    >
+                        Cancel
+                    </button>
+                    <button
+                        onClick={handleSaveTemplate}
+                        className="signature-btn primary"
+                        disabled={isLoading}
+                    >
+                        <Save size={16} />
+                        {isLoading ? 'Saving...' : 'Save Section'}
+                    </button>
+                </div>
+            )}
+
+            {showFieldEditor && (
+                <div className="signature-editor-overlay">
+                    <div className="signature-editor-modal">
+                        <FieldEditor
+                            field={editingField}
+                            onSave={handleSaveField}
+                            onCancel={() => {
+                                setShowFieldEditor(false);
+                                setEditingField(null);
+                            }}
+                        />
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default AgreementSignatureEditor;