@visns-studio/visns-components 5.13.12 → 5.13.13

package/package.json

@@ -88,7 +88,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.13.12",
+    "version": "5.13.13",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/proposal/AgreementSignatureEditor.css

@@ -87,6 +87,13 @@
     margin-bottom: 1rem;
 }
 
+.signature-editor-label-with-button {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 0.5rem;
+}
+
 .signature-btn {
     display: inline-flex;
     align-items: center;

package/src/components/proposal/AgreementSignatureEditor.jsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect } from 'react';
-import { Plus, Trash2, Move, Type, Edit3, Save, X } from 'lucide-react';
+import React, { useState, useEffect, useRef } from 'react';
+import { Plus, Trash2, Move, Type, Edit3, Save, X, Tag } 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 VariableInserter from './VariableInserter';
 import './AgreementSignatureEditor.css';
 
 const DragHandle = SortableHandle(() => (
@@ -195,6 +196,8 @@ const AgreementSignatureEditor = ({
     const [editingField, setEditingField] = useState(null);
     const [showFieldEditor, setShowFieldEditor] = useState(false);
     const [isLoading, setIsLoading] = useState(false);
+    const [showVariableInserter, setShowVariableInserter] = useState(false);
+    const bodyTextRef = useRef(null);
 
     // Helper function to replace template variables in URLs
     const buildUrlWithTemplate = (urlTemplate, params = {}) => {
@@ -399,6 +402,33 @@ const AgreementSignatureEditor = ({
         });
     };
 
+    const handleVariableInsert = (variableName) => {
+        const textarea = bodyTextRef.current;
+        if (!textarea) return;
+
+        const start = textarea.selectionStart;
+        const end = textarea.selectionEnd;
+        const text = textarea.value;
+        const before = text.substring(0, start);
+        const after = text.substring(end, text.length);
+        const variableText = `{{${variableName}}}`;
+        
+        const newText = before + variableText + after;
+        
+        setTemplate({
+            ...template,
+            bodyText: newText
+        });
+
+        // Reset cursor position after the inserted variable
+        setTimeout(() => {
+            textarea.focus();
+            textarea.setSelectionRange(start + variableText.length, start + variableText.length);
+        }, 0);
+        
+        setShowVariableInserter(false);
+    };
+
     const handleSaveTemplate = async () => {
         try {
             setIsLoading(true);
@@ -508,7 +538,7 @@ const AgreementSignatureEditor = ({
             .join('');
 
         return `
-            <div style="padding: 2rem; border: 1px solid #ddd; border-radius: 8px; background: #fff;">
+            <div style="padding: 2rem;">
                 ${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>
@@ -548,8 +578,20 @@ const AgreementSignatureEditor = ({
                 </div>
 
                 <div className="signature-editor-section">
-                    <label className="signature-editor-label">Body Text</label>
+                    <div className="signature-editor-label-with-button">
+                        <label className="signature-editor-label">Body Text</label>
+                        <button
+                            type="button"
+                            onClick={() => setShowVariableInserter(true)}
+                            className="signature-btn secondary small"
+                            title="Insert Variable"
+                        >
+                            <Tag size={16} />
+                            Insert Variable
+                        </button>
+                    </div>
                     <textarea
+                        ref={bodyTextRef}
                         value={template.bodyText}
                         onChange={(e) => setTemplate({...template, bodyText: e.target.value})}
                         placeholder="Enter the agreement text. Use {{variable_name}} for dynamic content."
@@ -557,7 +599,7 @@ const AgreementSignatureEditor = ({
                         rows="3"
                     />
                     <small className="signature-editor-help">
-                        Use variables like {'{{company_name}}'} for dynamic content
+                        Use variables like {'{{company_name}}'} for dynamic content. Click "Insert Variable" to browse available variables.
                     </small>
                 </div>
 
@@ -637,6 +679,14 @@ const AgreementSignatureEditor = ({
                     </div>
                 </div>
             )}
+
+            {showVariableInserter && (
+                <VariableInserter
+                    onInsert={handleVariableInsert}
+                    onCancel={() => setShowVariableInserter(false)}
+                    apiEndpoints={apiEndpoints}
+                />
+            )}
         </div>
     );
 };