@visns-studio/visns-components 5.11.8 → 5.11.9

package/package.json

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

package/src/components/crm/generic/GenericQuote.jsx

@@ -20,6 +20,54 @@ import SortableTableBody from './SortableQuoteItems';
 
 import styles from './styles/GenericQuote.module.scss';
 
+// Isolated Proposal Preview Component
+function ProposalPreviewFrame({ content }) {
+    const iframeRef = React.useRef(null);
+
+    React.useEffect(() => {
+        if (iframeRef.current && content) {
+            const iframe = iframeRef.current;
+            const doc = iframe.contentDocument || iframe.contentWindow.document;
+            
+            // Write the complete HTML document to iframe
+            doc.open();
+            doc.write(content);
+            doc.close();
+            
+            // Optional: Add responsive styling to iframe body
+            const style = doc.createElement('style');
+            style.textContent = `
+                body {
+                    margin: 0;
+                    padding: 20px;
+                    font-family: Arial, sans-serif;
+                    background: white;
+                    overflow-x: auto;
+                }
+                * {
+                    box-sizing: border-box;
+                }
+            `;
+            doc.head.appendChild(style);
+        }
+    }, [content]);
+
+    return (
+        <iframe
+            ref={iframeRef}
+            className={styles.proposalPreview}
+            title="Proposal Preview"
+            sandbox="allow-same-origin"
+            style={{
+                width: '100%',
+                height: '100%',
+                border: 'none',
+                background: 'white'
+            }}
+        />
+    );
+}
+
 function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
     const routeParams = useParams();
     const navigate = useNavigate();
@@ -835,7 +883,7 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
                     proposal_section_type: data.proposal_section_type || 'content',
                 },
                 template_id: parseInt(selectedTemplate),
-                filename: `proposal-${data.id || 'draft'}-${new Date().toISOString().split('T')[0]}.pdf`,
+                filename: `${(data.customer?.name || 'Customer').replace(/[/\\?%*:|"<>]/g, '-')} - Proposal #${data.id || 'draft'} - ${(data.label || 'Quote').replace(/[/\\?%*:|"<>]/g, '-')}.pdf`,
                 download: true,
                 paper: 'a4',
                 orientation: 'portrait'
@@ -844,7 +892,7 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
             // Create a form for file download
             const form = document.createElement('form');
             form.method = 'POST';
-            form.action = '/ajax/pdf/generate-proposal';
+            form.action = `/ajax/quotes/${data.id}/generate-proposal`;
             form.style.display = 'none';
 
             // Add CSRF token
@@ -1454,10 +1502,7 @@ function GenericQuote({ logo, setting, urlParam, proposalConfig = null }) {
                             <X size={16} aria-hidden="true" />
                         </button>
                     </div>
-                    <div 
-                        className={styles.proposalPreview}
-                        dangerouslySetInnerHTML={{ __html: proposalPreview }}
-                    />
+                    <ProposalPreviewFrame content={proposalPreview} />
                 </div>
             )}
 

package/src/components/crm/generic/styles/GenericQuote.module.scss

@@ -179,8 +179,10 @@
     border: 1px solid #e9ecef;
     border-radius: 8px;
     background: white;
-    max-height: 1200px; /* Double the previous height */
-    overflow: hidden;
+    height: auto;
+    min-height: 1100px;
+    max-height: none; /* Remove height restriction */
+    overflow: visible; /* Allow content to be visible */
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
@@ -213,225 +215,16 @@
 }
 
 .proposalPreview {
-    /* Container styles - only affect this container */
-    padding: 20px;
-    overflow-y: auto;
-    overflow-x: hidden;
-    max-height: 1000px;
+    /* Iframe container styles - content is completely isolated */
+    width: 100% !important;
+    height: 1000px !important;
+    min-height: 1000px !important;
+    max-height: none !important;
     background: white;
     box-sizing: border-box;
-    position: relative;
-    
-    /* Isolate content styles using descendant selectors */
-    
-    /* Reset and apply clean typography for proposal content */
-    & * {
-        font-family: inherit;
-        color: inherit;
-    }
-    
-    /* Base content styling */
-    font-family: 'Times', 'Times New Roman', serif;
-    font-size: 14px;
-    line-height: 1.6;
-    color: #333;
-    
-    /* Headings */
-    & h1, & h2, & h3, & h4, & h5, & h6 {
-        font-family: 'Arial', 'Helvetica', sans-serif;
-        font-weight: bold;
-        color: #333;
-        margin-top: 0;
-        margin-bottom: 15px;
-        line-height: 1.2;
-    }
-    
-    & h1 { 
-        font-size: 28px; 
-        margin-bottom: 20px;
-        margin-top: 0;
-    }
-    & h2 { 
-        font-size: 24px; 
-        margin-top: 30px;
-        margin-bottom: 15px;
-    }
-    & h3 { 
-        font-size: 20px; 
-        margin-top: 25px;
-        margin-bottom: 12px;
-    }
-    & h4 { font-size: 18px; margin-bottom: 12px; }
-    & h5 { font-size: 16px; margin-bottom: 10px; }
-    & h6 { font-size: 14px; margin-bottom: 10px; }
-    
-    /* Paragraphs and text */
-    & p {
-        font-family: 'Times', 'Times New Roman', serif;
-        font-size: 14px;
-        line-height: 1.6;
-        margin: 0 0 12px 0;
-        color: #333;
-    }
-    
-    /* Page breaks */
-    & .page-break, & [style*="page-break"] {
-        margin-top: 40px;
-        padding-top: 40px;
-        border-top: 2px dashed #ccc;
-    }
-    
-    /* Tables */
-    & table {
-        width: 100%;
-        border-collapse: collapse;
-        margin: 15px 0;
-        font-family: 'Arial', 'Helvetica', sans-serif;
-        border: 2px solid #333333;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-        
-        & th, & td {
-            padding: 14px;
-            border: 1px solid #333333;
-            text-align: left;
-            font-size: 14px;
-            line-height: 1.4;
-            color: #333;
-            vertical-align: middle;
-        }
-        
-        & th {
-            background: #4fbfa5 !important;
-            color: white !important;
-            font-weight: bold;
-        }
-        
-        & td {
-            background: white;
-            font-weight: 500;
-        }
-        
-        & tr:nth-child(even) td {
-            background: #f9f9f9;
-        }
-        
-        & tfoot tr {
-            background: #f3f4f6;
-            
-            & td {
-                font-weight: bold;
-                border-top: 2px solid #333333;
-            }
-            
-            &:last-child {
-                background: #333333 !important;
-                
-                & td {
-                    color: white !important;
-                    font-weight: bold;
-                }
-            }
-        }
-    }
-    
-    /* Lists */
-    & ul, & ol {
-        font-family: 'Times', 'Times New Roman', serif;
-        font-size: 14px;
-        line-height: 1.6;
-        margin: 12px 0;
-        padding-left: 25px;
-        color: #333;
-        
-        & li {
-            margin: 8px 0;
-            color: #333;
-        }
-    }
-    
-    /* Text formatting */
-    & strong, & b {
-        font-weight: bold;
-    }
-    
-    & em, & i {
-        font-style: italic;
-    }
-    
-    /* Images */
-    & img {
-        max-width: 100%;
-        height: auto;
-        margin: 10px 0;
-    }
-    
-    /* Divs and sections */
-    & div {
-        margin-bottom: 0;
-    }
-    
-    /* Override any branding classes that might interfere */
-    & .primary-bg, & .secondary-bg, & .accent-bg,
-    & .primary-text, & .secondary-text, & .accent-text {
-        color: #333 !important;
-        background: transparent !important;
-    }
-    
-    /* Terms and conditions specific styling */
-    & .terms-section, & .terms-conditions-section, & [class*="terms"] {
-        margin: 20px 0;
-        padding: 15px;
-        border: 1px solid #ddd;
-        background: #f9f9f9;
-        
-        & h1, & h2, & h3, & h4 {
-            margin-top: 15px;
-            margin-bottom: 10px;
-            color: #333;
-            
-            &:first-child {
-                margin-top: 0;
-            }
-        }
-        
-        & h1 {
-            font-size: 24px;
-            border-bottom: 2px solid #333;
-            padding-bottom: 10px;
-        }
-        
-        & h3 {
-            font-size: 16px;
-            margin-top: 20px;
-        }
-        
-        & p {
-            white-space: pre-wrap;
-            word-wrap: break-word;
-            margin-bottom: 12px;
-            text-align: justify;
-            hyphens: auto;
-        }
-        
-        & .terms-content {
-            max-width: none;
-            overflow: visible;
-        }
-    }
-    
-    /* Ensure all content is visible and not truncated */
-    & * {
-        max-height: none !important;
-        overflow: visible !important;
-        text-overflow: clip !important;
-    }
-    
-    /* Special handling for long content */
-    & div, & section {
-        overflow: visible;
-        height: auto;
-        max-height: none;
-    }
+    border: none;
+    border-radius: 4px;
+    display: block !important;
 }
 
 /* Content Editor Styles */
@@ -1419,12 +1212,18 @@
         background-color: #f3f4f6;
     }
     
+    .subtotalLabel,
+    .subtotalValue {
+        color: #333 !important;
+    }
+    
     &:last-child {
         background-color: #333333 !important;
         
         .subtotalLabel,
         .subtotalValue {
             color: white !important;
+            background-color: #333333 !important;
         }
     }
 }
@@ -1436,6 +1235,7 @@
     color: #374151;
     font-size: 14px;
     border: 1px solid #333333;
+    background: inherit;
 }
 
 .subtotalValue {
@@ -1446,6 +1246,7 @@
     font-size: 14px;
     white-space: nowrap;
     border: 1px solid #333333;
+    background: inherit;
 }
 
 /* Responsive styles */