@visns-studio/visns-components 5.7.8 → 5.7.9

package/package.json

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

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

@@ -9,7 +9,7 @@ function ActionButtons({ actions, onActionClick }) {
                     <button
                         key={`action-${action.id}`}
                         className={styles.actionButton}
-                        onClick={() => onActionClick(action.id)}
+                        onClick={() => onActionClick(action)}
                         title={action.label}
                     >
                         {action.label}

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

@@ -1,24 +1,45 @@
 import '../../styles/global.css';
 
 import React, { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams, useNavigate } from 'react-router-dom';
+import Popup from 'reactjs-popup';
 import moment from 'moment';
 import get from 'lodash/get';
 
 import CustomFetch from '../../crm/Fetch';
 import ActionButtons from './ActionButtons';
+import Form from '../../crm/Form';
 import { formatCurrency } from './utils/formatters';
 
 import styles from './styles/GenericQuote.module.scss';
 
 function GenericQuote({ logo, setting, urlParam }) {
     const routeParams = useParams();
+    const navigate = useNavigate();
 
-    const { actions: actionItems, page, tables } = setting;
+    const { actions: actionItems, page, tables, form } = setting;
 
     const [data, setData] = useState({});
     const [actions, setActions] = useState(actionItems || []);
 
+    // Modal state variables
+    const [modalShow, setModalShow] = useState(false);
+    const [formType, setFormType] = useState('');
+    const [formId, setFormId] = useState(0);
+    const [formData, setFormData] = useState({});
+
+    // Modal functions
+    const modalOpen = (type, id) => {
+        setModalShow(true);
+        setFormType(type);
+        setFormId(id);
+        setFormData(form);
+    };
+
+    const modalClose = () => {
+        setModalShow(false);
+    };
+
     useEffect(() => {
         if (actionItems && actionItems.length > 0) {
             setActions(actionItems);
@@ -44,31 +65,74 @@ function GenericQuote({ logo, setting, urlParam }) {
         fetchData();
     }, [routeParams['*']]);
 
-    const handleActionClick = (actionId) => {
-        // Handle different actions based on actionId
-        switch (actionId) {
+    const handleActionClick = (action) => {
+        // Handle different actions based on action properties
+        console.log(`Action ${action.id} clicked:`, action);
+
+        // Check if action has a type property
+        if (action.type === 'link' && action.url) {
+            // Handle link type actions
+            let url = action.url;
+
+            // If urlParam is specified, append the corresponding data value
+            if (action.urlParam && data[action.urlParam]) {
+                url = `${url}${data[action.urlParam]}`;
+            }
+
+            // Navigate to the URL using React Router
+            navigate(url);
+            return;
+        }
+
+        // Handle editModal type
+        if (action.type === 'editModal') {
+            // Open the edit modal with the current quote data
+            modalOpen('update', data.id);
+            return;
+        }
+
+        // Handle windowOpen type - opens URL in a new browser window/tab
+        if (action.type === 'windowOpen' && action.url) {
+            // Handle window open actions
+            let url = action.url;
+
+            // If urlParam is specified, append the corresponding data value
+            if (action.urlParam && data[action.urlParam]) {
+                url = `${url}${data[action.urlParam]}`;
+            }
+
+            // Open the URL in a new window/tab
+            window.open(url, '_blank');
+            return;
+        }
+
+        // Handle other actions based on their id if no specific type is defined
+        switch (action.id) {
             case 'addItem':
                 // Handle add item action
                 console.log('Add item clicked');
                 break;
             case 'editQuote':
-                // Handle edit quote action
-                console.log('Edit quote clicked');
-                break;
-            case 'viewTicket':
-                // Handle view ticket action
-                console.log('View ticket clicked');
+                // If no type is specified but id is editQuote, default to opening the edit modal
+                if (!action.type) {
+                    modalOpen('update', data.id);
+                }
                 break;
             case 'saveAsPdf':
-                // Handle save as PDF action
-                console.log('Save as PDF clicked');
+                // If no type is specified but id is saveAsPdf, default to opening PDF in new window
+                if (!action.type) {
+                    console.log('Save as PDF clicked');
+                    // You could implement a default PDF generation here if needed
+                }
                 break;
             case 'saveToTicket':
                 // Handle save to ticket action
                 console.log('Save to ticket clicked');
                 break;
             default:
-                console.log(`Action ${actionId} clicked`);
+                console.log(
+                    `Action ${action.id} clicked with no specific handler`
+                );
         }
     };
 
@@ -345,7 +409,69 @@ function GenericQuote({ logo, setting, urlParam }) {
                             );
                         })}
                 </div>
+
+                {/* Terms and Condition Section */}
+                {data.terms_and_condition && (
+                    <div className={styles.termsSection}>
+                        <h3 className={styles.termsTitle}>
+                            Terms and Conditions
+                        </h3>
+                        <div className={styles.termsContent}>
+                            {data.terms_and_condition}
+                        </div>
+                    </div>
+                )}
             </div>
+
+            {/* Form Modal */}
+            <Popup
+                open={modalShow}
+                onClose={modalClose}
+                closeOnDocumentClick={false}
+                contentStyle={{ width: '80vw', maxWidth: '1200px' }}
+            >
+                <div className="modalwrap top--modal modalWide">
+                    <div className="modal">
+                        <Form
+                            closeModal={modalClose}
+                            columnId={formId}
+                            fetchTable={() => {
+                                // Reload the quote data after form submission
+                                const fetchData = async () => {
+                                    if (
+                                        routeParams[urlParam] &&
+                                        routeParams[urlParam] > 0
+                                    ) {
+                                        try {
+                                            const res = await CustomFetch(
+                                                `${page.fetchUrl}/${routeParams[urlParam]}`,
+                                                'GET',
+                                                {}
+                                            );
+                                            setData(res.data);
+                                        } catch (error) {
+                                            console.error(
+                                                'Error fetching data:',
+                                                error
+                                            );
+                                        }
+                                    }
+                                };
+                                fetchData();
+                            }}
+                            formSettings={formData}
+                            formType={formType}
+                            style={form.style || {}}
+                            updateForm={setFormData}
+                            paramValue={
+                                routeParams[urlParam]
+                                    ? routeParams[urlParam]
+                                    : 0
+                            }
+                        />
+                    </div>
+                </div>
+            </Popup>
         </div>
     );
 }

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

@@ -521,6 +521,30 @@
     margin-top: 30px;
 }
 
+.termsSection {
+    margin-top: 30px;
+    padding: 20px;
+    border-top: 1px solid rgba(var(--primary-rgb), 0.1);
+    background-color: rgba(var(--primary-rgb), 0.02);
+    border-radius: var(--br, 4px);
+}
+
+.termsTitle {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--primary-color);
+    margin: 0 0 15px 0;
+    padding-bottom: 8px;
+    border-bottom: 1px dashed rgba(var(--primary-rgb), 0.1);
+}
+
+.termsContent {
+    font-size: 0.9rem;
+    line-height: 1.6;
+    color: var(--paragraph-color);
+    white-space: pre-wrap;
+}
+
 .quoteTableSection {
     margin-bottom: 25px;
 }
@@ -752,4 +776,19 @@
         padding: 8px 10px;
         font-size: 0.85rem;
     }
+
+    .termsSection {
+        padding: 15px;
+        margin-top: 20px;
+    }
+
+    .termsTitle {
+        font-size: 0.9rem;
+        margin-bottom: 10px;
+    }
+
+    .termsContent {
+        font-size: 0.85rem;
+        line-height: 1.5;
+    }
 }