@visns-studio/visns-components 5.13.8 → 5.13.10

package/src/components/proposal/ProposalTemplateSectionManager.jsx

@@ -1,9 +1,10 @@
 import React, { useState, useEffect } from 'react';
-import { Plus, Move, Eye, EyeOff, Trash2 } from 'lucide-react';
+import { Plus, Move, Eye, EyeOff, Trash2, Settings } from 'lucide-react';
 import { SortableContainer, SortableElement, SortableHandle } from 'react-sortable-hoc';
 import { arrayMoveImmutable } from 'array-move';
 import SectionEditor from './SectionEditor';
 import SectionTypeSelector from './SectionTypeSelector';
+import HeaderConfigEditor from './HeaderConfigEditor';
 import { toast } from 'react-toastify';
 import { buildUrl, defaultProposalApiEndpoints } from '../../utils/urlBuilder';
 import './ProposalTemplateSectionManager.css';
@@ -112,6 +113,7 @@ const ProposalTemplateSectionManager = ({
     const [isLoading, setIsLoading] = useState(false);
     const [editingSection, setEditingSection] = useState(null);
     const [showSectionTypeSelector, setShowSectionTypeSelector] = useState(false);
+    const [showHeaderConfig, setShowHeaderConfig] = useState(false);
     const [availableVariables, setAvailableVariables] = useState([]);
 
     // Helper function to replace template variables in URLs with templateId included
@@ -239,6 +241,64 @@ const ProposalTemplateSectionManager = ({
         setEditingSection(section);
     };
 
+    const handleSaveHeaderConfig = async (headerConfig) => {
+        try {
+            setIsLoading(true);
+            
+            // Prepare the updated template data
+            const updatedTemplateData = {
+                ...templateData,
+                styling: {
+                    ...templateData?.styling,
+                    header: headerConfig
+                }
+            };
+            
+            // Make API call to save the template styling
+            const requestPayload = {
+                name: templateData.name,
+                description: templateData.description,
+                styling: updatedTemplateData.styling,
+                variables: templateData.variables || [],
+                branding_profile_id: templateData.branding_profile_id
+            };
+            
+            console.log('Sending header config request:', requestPayload);
+            
+            const response = await fetch(buildUrlWithTemplate(apiEndpoints.templateData || '/ajax/proposalTemplates/{templateId}'), {
+                method: 'PUT',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
+                },
+                body: JSON.stringify(requestPayload)
+            });
+            
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            
+            const data = await response.json();
+            
+            // Check if the response indicates success (either explicit success flag or 200 status)
+            if (data.success !== false) {
+                // Update local state if onChange callback is provided
+                if (onChange) {
+                    onChange(updatedTemplateData);
+                }
+                setShowHeaderConfig(false);
+                toast.success('Header configuration saved');
+            } else {
+                throw new Error(data.message || 'Failed to save header configuration');
+            }
+        } catch (error) {
+            console.error('Error saving header configuration:', error);
+            toast.error('Failed to save header configuration');
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
     const handleSaveSection = async (sectionData) => {
         try {
             // Helper function to deeply clean objects and remove circular references
@@ -430,13 +490,23 @@ const ProposalTemplateSectionManager = ({
                         Drag and drop to reorder sections. Use variables like {`{{customer_name}}`} for dynamic content.
                     </p>
                 </div>
-                <button
-                    onClick={() => setShowSectionTypeSelector(true)}
-                    className="add-section-btn"
-                >
-                    <Plus className="w-4 h-4" />
-                    Add Section
-                </button>
+                <div className="add-section-actions">
+                    <button
+                        onClick={() => setShowHeaderConfig(true)}
+                        className="add-section-btn secondary"
+                        title="Configure proposal header"
+                    >
+                        <Settings className="w-4 h-4" />
+                        Header Settings
+                    </button>
+                    <button
+                        onClick={() => setShowSectionTypeSelector(true)}
+                        className="add-section-btn"
+                    >
+                        <Plus className="w-4 h-4" />
+                        Add Section
+                    </button>
+                </div>
             </div>
 
             {sections.length === 0 ? (
@@ -483,6 +553,15 @@ const ProposalTemplateSectionManager = ({
                 />
             )}
 
+            {showHeaderConfig && (
+                <HeaderConfigEditor
+                    config={templateData?.styling?.header}
+                    brandingProfile={templateData?.brandingProfile}
+                    onSave={handleSaveHeaderConfig}
+                    onCancel={() => setShowHeaderConfig(false)}
+                />
+            )}
+
             {editingSection && (
                 <SectionEditor
                     section={editingSection}

package/src/components/proposal/SectionEditor.css

@@ -17,7 +17,7 @@
 }
 
 .section-editor-content {
-    background: white;
+    background: var(--tertiary-color, white);
     border-radius: 8px;
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
     max-width: 1200px;
@@ -44,8 +44,8 @@
     align-items: center;
     justify-content: space-between;
     padding: 1.5rem;
-    border-bottom: 1px solid #e2e8f0;
-    background: #1b3933;
+    border-bottom: 1px solid var(--paragraph-color, #e2e8f0);
+    background: var(--primary-color, #1b3933);
     color: white;
     border-radius: 8px 8px 0 0;
 }
@@ -84,7 +84,7 @@
 }
 
 .section-editor-preview-toggle.active {
-    background: #3cbf7d;
+    background: var(--primary-color, #3cbf7d);
     color: white;
 }
 
@@ -109,7 +109,7 @@
 }
 
 .section-editor-close-btn:hover {
-    background: #3cbf7d;
+    background: var(--primary-color, #3cbf7d);
     color: white;
 }
 
@@ -132,7 +132,7 @@
 .section-editor-form-label {
     font-size: 0.875rem;
     font-weight: 600;
-    color: #374151;
+    color: var(--paragraph-color, #374151);
     margin-bottom: 0.5rem;
 }
 
@@ -154,12 +154,12 @@
     height: 1rem;
     border-radius: 4px;
     border: 2px solid #d1d5db;
-    accent-color: #3cbf7d;
+    accent-color: var(--primary-color, #3cbf7d);
 }
 
 .section-editor-checkbox label {
     font-size: 0.875rem;
-    color: #374151;
+    color: var(--paragraph-color, #374151);
     cursor: pointer;
 }
 
@@ -177,7 +177,7 @@
 .section-editor-content-label {
     font-size: 0.875rem;
     font-weight: 600;
-    color: #374151;
+    color: var(--paragraph-color, #374151);
 }
 
 .section-editor-content-actions {
@@ -193,12 +193,12 @@
     padding: 0.5rem 0.75rem;
     font-size: 0.8rem;
     font-weight: 500;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--paragraph-color, #d1d5db);
     border-radius: 6px;
     cursor: pointer;
     transition: all 0.2s ease-in-out;
-    background: white;
-    color: #374151;
+    background: var(--tertiary-color, white);
+    color: var(--paragraph-color, #374151);
     text-decoration: none;
     user-select: none;
     position: relative;
@@ -206,13 +206,13 @@
 }
 
 .section-editor-action-btn:hover {
-    background: #f9fafb;
-    border-color: #9ca3af;
+    background: var(--bg-color, #f9fafb);
+    border-color: var(--paragraph-color, #9ca3af);
 }
 
 .section-editor-action-btn.primary {
-    background: linear-gradient(135deg, #3cbf7d 0%, #2da967 100%);
-    border-color: #3cbf7d;
+    background: linear-gradient(135deg, var(--primary-color, #3cbf7d) 0%, var(--primary-color, #2da967) 100%);
+    border-color: var(--primary-color, #3cbf7d);
     color: white;
     box-shadow: 0 2px 4px rgba(60, 191, 125, 0.2);
     font-size: 0.8rem;
@@ -221,8 +221,8 @@
 }
 
 .section-editor-action-btn.primary:hover {
-    background: linear-gradient(135deg, #2da967 0%, #1b3933 100%);
-    border-color: #1b3933;
+    background: linear-gradient(135deg, var(--primary-color, #2da967) 0%, var(--header-color, #1b3933) 100%);
+    border-color: var(--header-color, #1b3933);
     box-shadow: 0 4px 8px rgba(27, 57, 51, 0.3);
     transform: translateY(-1px);
 }
@@ -233,8 +233,8 @@
 }
 
 .section-editor-preview {
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
+    background: var(--bg-color, #f8fafc);
+    border: 1px solid var(--paragraph-color, #e2e8f0);
     border-radius: 5px;
     padding: 1rem;
     min-height: 400px;
@@ -244,7 +244,7 @@
     max-width: none;
     font-size: 0.875rem;
     line-height: 1.6;
-    color: #374151;
+    color: var(--paragraph-color, #374151);
 }
 
 /* Compact HTML content styling for section editor preview */
@@ -258,14 +258,14 @@
     line-height: 1.2 !important;
     margin: 0 0 0.5rem 0 !important;
     font-weight: 600;
-    color: #1f2937 !important;
+    color: var(--header-color, #1f2937) !important;
 }
 
 .section-editor-preview .prose p {
     font-size: 0.875rem !important;
     line-height: 1.4 !important;
     margin: 0 0 0.5rem 0 !important;
-    color: #374151 !important;
+    color: var(--paragraph-color, #374151) !important;
 }
 
 .section-editor-preview .prose ul,
@@ -274,7 +274,7 @@
     line-height: 1.4 !important;
     margin: 0 0 0.5rem 1rem !important;
     padding: 0;
-    color: #374151 !important;
+    color: var(--paragraph-color, #374151) !important;
 }
 
 .section-editor-preview .prose li {
@@ -295,14 +295,14 @@
     line-height: 1.2 !important;
     margin: 0 0 0.5rem 0 !important;
     font-weight: 600;
-    color: #1f2937 !important;
+    color: var(--header-color, #1f2937) !important;
 }
 
 .section-editor-preview p {
     font-size: 0.875rem !important;
     line-height: 1.4 !important;
     margin: 0 0 0.5rem 0 !important;
-    color: #374151 !important;
+    color: var(--paragraph-color, #374151) !important;
 }
 
 .section-editor-preview ul,
@@ -311,7 +311,7 @@
     line-height: 1.4 !important;
     margin: 0 0 0.5rem 1rem !important;
     padding: 0;
-    color: #374151 !important;
+    color: var(--paragraph-color, #374151) !important;
 }
 
 .section-editor-preview li {
@@ -322,8 +322,8 @@
 }
 
 .section-editor-styling-panel {
-    background: #f8fafc;
-    border: 1px solid #e2e8f0;
+    background: var(--bg-color, #f8fafc);
+    border: 1px solid var(--paragraph-color, #e2e8f0);
     border-radius: 5px;
     padding: 1rem;
     margin-bottom: 1.5rem;
@@ -332,7 +332,7 @@
 .section-editor-styling-title {
     font-size: 0.875rem;
     font-weight: 600;
-    color: #374151;
+    color: var(--paragraph-color, #374151);
     margin-bottom: 0.75rem;
 }
 
@@ -350,7 +350,7 @@
 
 .section-editor-styling-input {
     padding: 0.5rem;
-    border: 1px solid #d1d5db;
+    border: 1px solid var(--paragraph-color, #d1d5db);
     border-radius: 4px;
     font-size: 0.875rem;
     width: 100%;
@@ -359,8 +359,8 @@
 .section-editor-styling-input:focus {
     outline: none;
     ring: 2px;
-    ring-color: #3cbf7d;
-    border-color: #3cbf7d;
+    ring-color: var(--primary-color, #3cbf7d);
+    border-color: var(--primary-color, #3cbf7d);
 }
 
 .section-editor-dynamic-notice {
@@ -368,8 +368,8 @@
 }
 
 .section-editor-dynamic-card {
-    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
-    border: 1px solid #bae6fd;
+    background: linear-gradient(135deg, var(--bg-color, #f0f9ff) 0%, var(--bg-color, #e0f2fe) 100%);
+    border: 1px solid var(--primary-color, #bae6fd);
     border-radius: 8px;
     padding: 1.5rem;
     display: flex;
@@ -379,7 +379,7 @@
 }
 
 .section-editor-dynamic-icon {
-    background: #0ea5e9;
+    background: var(--primary-color, #0ea5e9);
     color: white;
     padding: 0.75rem;
     border-radius: 8px;
@@ -397,13 +397,13 @@
 .section-editor-dynamic-title {
     font-size: 1rem;
     font-weight: 600;
-    color: #0c4a6e;
+    color: var(--primary-color, #0c4a6e);
     margin: 0 0 0.5rem 0;
 }
 
 .section-editor-dynamic-description {
     font-size: 0.875rem;
-    color: #0369a1;
+    color: var(--primary-color, #0369a1);
     line-height: 1.5;
     margin: 0 0 1rem 0;
 }
@@ -415,8 +415,8 @@
 }
 
 .section-editor-variables-summary {
-    background: #eff6ff;
-    border: 1px solid #bfdbfe;
+    background: var(--bg-color, #eff6ff);
+    border: 1px solid var(--primary-color, #bfdbfe);
     border-radius: 5px;
     padding: 1rem;
     margin-bottom: 1.5rem;
@@ -425,7 +425,7 @@
 .section-editor-variables-title {
     font-size: 0.875rem;
     font-weight: 600;
-    color: #1e40af;
+    color: var(--primary-color, #1e40af);
     margin-bottom: 0.5rem;
 }
 
@@ -439,10 +439,10 @@
     padding: 0.25rem 0.5rem;
     font-size: 0.75rem;
     font-weight: 500;
-    background: #dbeafe;
-    color: #1e40af;
+    background: var(--primary-color, #3cbf7d);
+    color: var(--tertiary-color, white);
     border-radius: 12px;
-    border: 1px solid #bfdbfe;
+    border: 1px solid var(--header-color, #2da967);
 }
 
 .section-editor-footer {
@@ -451,8 +451,8 @@
     justify-content: flex-end;
     gap: 0.75rem;
     padding: 1rem 1.5rem;
-    border-top: 1px solid #e2e8f0;
-    background: #f8fafc;
+    border-top: 1px solid var(--paragraph-color, #e2e8f0);
+    background: var(--bg-color, #f8fafc);
     border-radius: 0 0 8px 8px;
 }
 
@@ -470,25 +470,25 @@
 }
 
 .section-editor-btn.secondary {
-    background: white;
-    color: #6b7280;
-    border: 1px solid #d1d5db;
+    background: var(--tertiary-color, white);
+    color: var(--paragraph-color, #6b7280);
+    border: 1px solid var(--paragraph-color, #d1d5db);
 }
 
 .section-editor-btn.secondary:hover {
-    background: #f9fafb;
-    border-color: #9ca3af;
+    background: var(--bg-color, #f9fafb);
+    border-color: var(--paragraph-color, #9ca3af);
 }
 
 .section-editor-btn.primary {
-    background: #3cbf7d;
+    background: var(--primary-color, #3cbf7d);
     color: white;
     border: 1px solid #3cbf7d;
 }
 
 .section-editor-btn.primary:hover {
-    background: #1b3933;
-    border-color: #1b3933;
+    background: var(--header-color, #1b3933);
+    border-color: var(--header-color, #1b3933);
 }
 
 /* TinyMCE Editor Overrides */

package/src/components/proposal/SectionEditor.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { X, Save, Tag, Settings, Eye } from 'lucide-react';
 import Field from '../Field';
 import VariableInserter from './VariableInserter';
+import AgreementSignatureEditor from './AgreementSignatureEditor';
 import './SectionEditor.css';
 
 const SectionEditor = ({ section, availableVariables = [], onSave, onCancel }) => {
@@ -141,10 +142,11 @@ const SectionEditor = ({ section, availableVariables = [], onSave, onCancel }) =
         const finalFormData = {
             ...formData,
             content: currentContent,
-            variables: extractedVariables
+            variables: extractedVariables,
+            // Preserve template data for agreement signature sections
+            ...(formData.template && { template: formData.template })
         };
 
-        console.log('Final form data being saved:', finalFormData);
         onSave(finalFormData);
     };
 
@@ -267,7 +269,31 @@ const SectionEditor = ({ section, availableVariables = [], onSave, onCancel }) =
                         </div>
                     </div>
 
-                    {/* Content Editor or Preview - Only show if not dynamic */}
+                    {/* Agreement Signature Template Editor */}
+                    {formData.section_type === 'agreement_signature' ? (
+                        <AgreementSignatureEditor
+                            section={section}
+                            templateId={section?.template_id}
+                            onSave={(updatedSection) => {
+                                setFormData({
+                                    ...formData,
+                                    content: updatedSection.content,
+                                    template: updatedSection.template
+                                });
+                            }}
+                            onTemplateChange={(updatedSection) => {
+                                setFormData({
+                                    ...formData,
+                                    content: updatedSection.content,
+                                    template: updatedSection.template
+                                });
+                            }}
+                            onCancel={onCancel}
+                            hideFooter={true}
+                        />
+                    ) : (
+                        <>
+                            {/* Content Editor or Preview - Only show if not dynamic */}
                     {!formData.is_dynamic ? (
                         <div className="section-editor-content-section">
                             <div className="section-editor-content-header">
@@ -411,6 +437,8 @@ const SectionEditor = ({ section, availableVariables = [], onSave, onCancel }) =
                             </div>
                         </div>
                     )}
+                        </>
+                    )}
                 </div>
 
                 {/* Footer */}