@visns-studio/visns-components 5.10.11 → 5.11.2

package/src/components/crm/controls/DataGridSearch.jsx

@@ -2,11 +2,11 @@ import { useNavigate } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { saveAs } from 'file-saver';
 import {
-    LinkOut,
+    ExternalLink,
     Plus,
     Search,
-    Sort,
-} from 'akar-icons';
+    ArrowUpDown,
+} from 'lucide-react';
 import Download from '../Download';
 import styles from '../styles/DataGrid.module.scss';
 
@@ -100,7 +100,7 @@ const DataGridSearch = ({
             <div className={buttonClassName}>
                 {form.export && form.export.url && (
                     <button className={styles.btn} onClick={exportTrigger}>
-                        <LinkOut
+                        <ExternalLink
                             strokeWidth={2}
                             size={16}
                             style={{ marginRight: '10px' }}
@@ -110,7 +110,7 @@ const DataGridSearch = ({
                 )}
                 {form.sort && form.sort.title && (
                     <button className={styles.btn} onClick={sortTrigger}>
-                        <Sort
+                        <ArrowUpDown
                             strokeWidth={2}
                             size={16}
                             style={{ marginRight: '10px' }}

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

@@ -0,0 +1,100 @@
+import Swal from 'sweetalert2';
+import './styles/SweetAlert.module.css';
+import './styles/AlternativeActionModal.css';
+
+/**
+ * Show an alternative action modal for choosing between different workflows
+ * @param {Object} options - Configuration options
+ * @param {string} options.title - Modal title
+ * @param {string} options.message - Modal message
+ * @param {Array} options.alternatives - Array of alternative actions
+ * @param {Object} options.data - Additional data to pass to callbacks
+ * @param {Function} options.onSelect - Callback when alternative is selected
+ * @param {Function} options.onCancel - Callback when cancelled
+ */
+export const showAlternativeActionModal = async ({
+    title = 'Choose Action',
+    message = 'Please select how you would like to proceed:',
+    alternatives = [],
+    data = {},
+    onSelect,
+    onCancel
+}) => {
+    console.log('Alternative Action Modal - Configuration:', {
+        title,
+        alternatives: alternatives.map(alt => ({ id: alt.id, label: alt.label, workflow: alt.workflow })),
+        data
+    });
+
+    // Generate HTML for alternatives
+    const alternativesHtml = alternatives.map(alternative => {
+        const icon = alternative.icon || '📋';
+        const description = alternative.description || '';
+        
+        return `
+            <div class="alternative-action-option" data-alternative-id="${alternative.id}">
+                <div class="alternative-icon">${icon}</div>
+                <div class="alternative-content">
+                    <div class="alternative-label">${alternative.label}</div>
+                    ${description ? `<div class="alternative-description">${description}</div>` : ''}
+                </div>
+            </div>
+        `;
+    }).join('');
+
+    const result = await Swal.fire({
+        title: title,
+        html: `
+            <div class="alternative-action-modal">
+                <p class="alternative-message">${message}</p>
+                <div class="alternative-options">
+                    ${alternativesHtml}
+                </div>
+            </div>
+        `,
+        showConfirmButton: false,
+        showCancelButton: true,
+        cancelButtonText: 'Cancel',
+        customClass: {
+            container: 'alternative-swal-container',
+            popup: 'alternative-swal-popup',
+            content: 'alternative-swal-content',
+            cancelButton: 'alternative-swal-cancel'
+        },
+        didOpen: () => {
+            // Add click handlers for each alternative
+            const options = document.querySelectorAll('.alternative-action-option');
+            options.forEach(option => {
+                option.addEventListener('click', () => {
+                    const alternativeId = option.getAttribute('data-alternative-id');
+                    const selectedAlternative = alternatives.find(alt => alt.id === alternativeId);
+                    
+                    if (selectedAlternative) {
+                        console.log('Alternative selected:', selectedAlternative);
+                        Swal.close();
+                        
+                        // Call the onSelect callback with the selected alternative
+                        if (onSelect) {
+                            onSelect(selectedAlternative);
+                        }
+                    }
+                });
+
+                // Add hover effects
+                option.addEventListener('mouseenter', () => {
+                    option.style.backgroundColor = '#f8f9fa';
+                    option.style.borderColor = '#007bff';
+                });
+
+                option.addEventListener('mouseleave', () => {
+                    option.style.backgroundColor = '';
+                    option.style.borderColor = '';
+                });
+            });
+        }
+    });
+
+    if (result.isDismissed && onCancel) {
+        onCancel();
+    }
+};

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

@@ -0,0 +1,423 @@
+import React, { useState, useEffect } from 'react';
+import Swal from 'sweetalert2';
+import './styles/SweetAlert.module.css';
+import './styles/ContactSelectorModal.css';
+import CustomFetch from '../Fetch';
+
+/**
+ * A utility function that shows a contact selector modal using SweetAlert2
+ * Used after date selection to add/select contacts for a survey field
+ *
+ * @param {Object} options - Configuration options
+ * @param {string} options.title - The title of the dialog (default: 'Select Contacts')
+ * @param {string} options.message - The message to display in the dialog
+ * @param {string} options.confirmLabel - Label for the confirm button (default: 'Save')
+ * @param {string} options.cancelLabel - Label for the cancel button (default: 'Cancel')
+ * @param {Function} options.onConfirm - Function to call when confirmed with selected contacts
+ * @param {Function} options.onCancel - Function to call when cancelled
+ * @param {Array} options.existingContacts - Array of existing contacts for this field
+ * @param {Object} options.contactConfig - Contact selection configuration
+ * @param {Object} options.data - Optional data object to pass context
+ * @returns {Promise} - A promise that resolves when the dialog is closed
+ */
+export const showContactSelectorModal = ({
+    title = 'Select Contacts',
+    message = 'Add contacts for this survey:',
+    confirmLabel = 'Save',
+    cancelLabel = 'Cancel',
+    onConfirm = () => {},
+    onCancel = () => {},
+    existingContacts = [],
+    contactConfig = {},
+    data = null,
+    rowContext = null,
+}) => {
+    const {
+        contactsUrl = '/ajax/contacts/dropdown',
+        urlParams = {},
+        allowManualEntry = true,
+        fields = ['name', 'email'],
+        fieldTypes = {},
+        fieldLabels = {},
+        validation = {},
+        multiple = true,
+        maxContacts = 10
+    } = contactConfig;
+
+    // State management for the modal
+    let modalState = {
+        contacts: [...existingContacts],
+        availableContacts: [],
+        isAddingManual: false,
+        newContact: {}
+    };
+
+    // Initialize new contact object
+    fields.forEach(field => {
+        modalState.newContact[field] = '';
+    });
+
+    // Process URL parameters with row context substitution
+    const processUrlParams = (params, rowData) => {
+        if (!params || typeof params !== 'object') return {};
+        
+        console.log('Processing URL params:', {
+            params,
+            rowData,
+            rowDataKeys: rowData ? Object.keys(rowData) : 'no rowData'
+        });
+        
+        const processedParams = {};
+        
+        for (const [key, value] of Object.entries(params)) {
+            if (Array.isArray(value)) {
+                // Handle arrays (like 'where' parameter)
+                processedParams[key] = value.map(item => {
+                    if (typeof item === 'object' && item !== null) {
+                        const processedItem = {};
+                        for (const [itemKey, itemValue] of Object.entries(item)) {
+                            if (typeof itemValue === 'string' && itemValue.startsWith('{row.') && itemValue.endsWith('}')) {
+                                // Extract field name from {row.fieldName}
+                                const fieldName = itemValue.slice(5, -1);
+                                const actualValue = rowData?.[fieldName];
+                                console.log(`Replacing ${itemValue} with field ${fieldName}:`, actualValue);
+                                processedItem[itemKey] = actualValue !== undefined ? actualValue : itemValue;
+                            } else {
+                                processedItem[itemKey] = itemValue;
+                            }
+                        }
+                        return processedItem;
+                    }
+                    return item;
+                });
+            } else if (typeof value === 'string' && value.startsWith('{row.') && value.endsWith('}')) {
+                // Handle simple string substitution
+                const fieldName = value.slice(5, -1);
+                const actualValue = rowData?.[fieldName];
+                console.log(`Replacing ${value} with field ${fieldName}:`, actualValue);
+                processedParams[key] = actualValue !== undefined ? actualValue : value;
+            } else {
+                processedParams[key] = value;
+            }
+        }
+        
+        console.log('Processed params result:', processedParams);
+        return processedParams;
+    };
+
+    // Fetch available contacts from API
+    const fetchContacts = async () => {
+        try {
+            // Process URL parameters with row context
+            const requestParams = processUrlParams(urlParams, rowContext);
+            
+            console.log('Fetching contacts with params:', {
+                url: contactsUrl,
+                originalParams: urlParams,
+                processedParams: requestParams,
+                rowContext: rowContext
+            });
+            
+            const response = await CustomFetch(contactsUrl, 'POST', requestParams);
+            if (response.data && response.data.data) {
+                modalState.availableContacts = response.data.data.map(contact => ({
+                    value: contact.id || contact.value,
+                    label: contact.name || contact.label || contact.title,
+                    ...contact
+                }));
+                
+                console.log(`Fetched ${modalState.availableContacts.length} contacts`);
+            }
+        } catch (error) {
+            console.warn('Failed to fetch contacts:', error);
+            modalState.availableContacts = [];
+        }
+    };
+
+    // Generate HTML for the modal
+    const generateModalHTML = () => {
+        const contactsHtml = modalState.contacts.map((contact, index) => `
+            <div class="contact-item" data-index="${index}">
+                <div class="contact-info">
+                    <strong>${contact.name || 'Unknown Contact'}</strong>
+                    ${contact.email ? `<br><small>📧 ${contact.email}</small>` : ''}
+                    ${contact.notes ? `<br><small>📝 ${contact.notes.length > 50 ? contact.notes.substring(0, 50) + '...' : contact.notes}</small>` : ''}
+                    <span class="contact-type">${contact.type === 'contact' ? 'Existing Contact' : 'Manual Entry'}</span>
+                </div>
+                <button type="button" class="remove-contact-btn" data-index="${index}">×</button>
+            </div>
+        `).join('');
+
+        const availableContactsOptions = modalState.availableContacts.map(contact => 
+            `<option value="${contact.value}">${contact.label}</option>`
+        ).join('');
+
+        const manualFieldsHtml = fields.map(field => {
+            const fieldType = fieldTypes[field] || (field === 'email' ? 'email' : 'text');
+            const fieldLabel = fieldLabels[field] || field.charAt(0).toUpperCase() + field.slice(1);
+            const fieldValidation = validation[field] || {};
+            const isRequired = fieldValidation.required !== false && (field === 'name' || field === 'email');
+            const maxLength = fieldValidation.maxLength || (fieldType === 'textarea' ? 500 : 255);
+            
+            if (fieldType === 'textarea') {
+                return `
+                    <div class="form-group">
+                        <div class="form-field-row">
+                            <label for="manual-${field}">${fieldLabel}:</label>
+                            <textarea 
+                                id="manual-${field}" 
+                                class="swal2-textarea"
+                                placeholder="Enter ${fieldLabel.toLowerCase()}"
+                                rows="3"
+                                maxlength="${maxLength}"
+                                ${isRequired ? 'required' : ''}
+                            ></textarea>
+                            <small class="field-help">Max ${maxLength} characters</small>
+                        </div>
+                    </div>
+                `;
+            } else {
+                return `
+                    <div class="form-group">
+                        <div class="form-field-row">
+                            <label for="manual-${field}">${fieldLabel}:</label>
+                            <input 
+                                type="${fieldType}" 
+                                id="manual-${field}" 
+                                class="swal2-input"
+                                placeholder="Enter ${fieldLabel.toLowerCase()}"
+                                maxlength="${maxLength}"
+                                ${isRequired ? 'required' : ''}
+                            >
+                        </div>
+                    </div>
+                `;
+            }
+        }).join('');
+
+        return `
+            <div class="contact-selector-modal">
+                <div class="contact-modal-header">
+                    <p class="contact-modal-message">${message}</p>
+                    ${data ? `<small class="field-info">Field: ${data.label || data.name}</small>` : ''}
+                </div>
+
+                <div class="existing-contacts">
+                    <h4>Selected Contacts (${modalState.contacts.length})</h4>
+                    <div class="contacts-list">
+                        ${contactsHtml || '<p class="no-contacts">No contacts selected</p>'}
+                    </div>
+                </div>
+
+                <div class="add-contact-section">
+                    <h4>Add Contact</h4>
+                    
+                    ${modalState.availableContacts.length > 0 ? `
+                    <div class="existing-contact-selector">
+                        <label for="existing-contact-select">Select Existing Contact:</label>
+                        <div class="contact-select-row">
+                            <select id="existing-contact-select" class="swal2-select">
+                                <option value="">Choose a contact...</option>
+                                ${availableContactsOptions}
+                            </select>
+                            <button type="button" id="add-existing-contact" class="add-contact-btn">Add</button>
+                        </div>
+                    </div>
+                    ` : ''}
+
+                    ${allowManualEntry ? `
+                    <div class="manual-contact-section">
+                        <div class="manual-contact-toggle">
+                            <button type="button" id="toggle-manual-entry" class="toggle-manual-btn">
+                                ${modalState.isAddingManual ? 'Cancel Manual Entry' : 'Add Manual Contact'}
+                            </button>
+                        </div>
+                        
+                        <div id="manual-contact-form" class="manual-contact-form" style="display: ${modalState.isAddingManual ? 'block' : 'none'}">
+                            ${manualFieldsHtml}
+                            <button type="button" id="add-manual-contact" class="add-contact-btn">Add Manual Contact</button>
+                        </div>
+                    </div>
+                    ` : ''}
+                </div>
+
+                ${multiple && maxContacts > 1 ? `
+                <div class="contact-limits">
+                    <small>Maximum ${maxContacts} contacts allowed</small>
+                </div>
+                ` : ''}
+            </div>
+        `;
+    };
+
+    // Event handlers
+    const setupEventHandlers = () => {
+        // Remove contact handler
+        document.addEventListener('click', (e) => {
+            if (e.target.classList.contains('remove-contact-btn')) {
+                const index = parseInt(e.target.dataset.index);
+                modalState.contacts.splice(index, 1);
+                updateModalContent();
+            }
+        });
+
+        // Add existing contact handler
+        const addExistingBtn = document.getElementById('add-existing-contact');
+        if (addExistingBtn) {
+            addExistingBtn.addEventListener('click', () => {
+                const select = document.getElementById('existing-contact-select');
+                const selectedValue = select.value;
+                
+                if (selectedValue) {
+                    const selectedContact = modalState.availableContacts.find(c => c.value == selectedValue);
+                    if (selectedContact && !modalState.contacts.find(c => c.contact_id == selectedValue)) {
+                        modalState.contacts.push({
+                            type: 'contact',
+                            contact_id: selectedContact.value,
+                            name: selectedContact.label,
+                            email: selectedContact.email || ''
+                        });
+                        select.value = '';
+                        updateModalContent();
+                    }
+                }
+            });
+        }
+
+        // Toggle manual entry
+        const toggleBtn = document.getElementById('toggle-manual-entry');
+        if (toggleBtn) {
+            toggleBtn.addEventListener('click', () => {
+                modalState.isAddingManual = !modalState.isAddingManual;
+                updateModalContent();
+            });
+        }
+
+        // Add manual contact handler
+        const addManualBtn = document.getElementById('add-manual-contact');
+        if (addManualBtn) {
+            addManualBtn.addEventListener('click', () => {
+                const newContact = { type: 'manual' };
+                let isValid = true;
+
+                fields.forEach(field => {
+                    const input = document.getElementById(`manual-${field}`);
+                    const value = input ? input.value.trim() : '';
+                    const fieldValidation = validation[field] || {};
+                    const isRequired = fieldValidation.required !== false && (field === 'name' || field === 'email');
+                    
+                    // Validate email format
+                    if (field === 'email' && value && !isValidEmail(value)) {
+                        isValid = false;
+                        input.style.borderColor = '#dc2626';
+                        return;
+                    }
+                    
+                    // Validate required fields
+                    if (isRequired && !value) {
+                        isValid = false;
+                        input.style.borderColor = '#dc2626';
+                        return;
+                    }
+                    
+                    // Validate max length
+                    if (fieldValidation.maxLength && value.length > fieldValidation.maxLength) {
+                        isValid = false;
+                        input.style.borderColor = '#dc2626';
+                        return;
+                    }
+                    
+                    newContact[field] = value;
+                    if (input) input.style.borderColor = '';
+                });
+
+                if (isValid && newContact.name) {
+                    modalState.contacts.push(newContact);
+                    
+                    // Clear form
+                    fields.forEach(field => {
+                        const input = document.getElementById(`manual-${field}`);
+                        if (input) input.value = '';
+                    });
+                    
+                    modalState.isAddingManual = false;
+                    updateModalContent();
+                }
+            });
+        }
+    };
+
+    // Update modal content
+    const updateModalContent = () => {
+        const container = document.querySelector('.contact-selector-modal');
+        if (container) {
+            container.innerHTML = generateModalHTML().match(/<div class="contact-selector-modal">([\s\S]*)<\/div>/)[1];
+            setupEventHandlers();
+        }
+    };
+
+    // Email validation helper
+    const isValidEmail = (email) => {
+        return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+    };
+
+    // Validation function
+    const validateContacts = () => {
+        if (!multiple && modalState.contacts.length > 1) {
+            Swal.showValidationMessage('Only one contact is allowed for this field');
+            return false;
+        }
+        
+        if (modalState.contacts.length > maxContacts) {
+            Swal.showValidationMessage(`Maximum ${maxContacts} contacts allowed`);
+            return false;
+        }
+        
+        return true;
+    };
+
+    // Initialize and show modal
+    const showModal = async () => {
+        await fetchContacts();
+
+        const swalOptions = {
+            title: title,
+            html: generateModalHTML(),
+            showCancelButton: true,
+            confirmButtonText: confirmLabel,
+            cancelButtonText: cancelLabel,
+            confirmButtonColor: 'var(--primary-color, #4f46e5)',
+            cancelButtonColor: '#6b7280',
+            allowOutsideClick: false,
+            allowEscapeKey: true,
+            width: '600px',
+            padding: '1.25rem',
+            customClass: {
+                popup: 'contact-selector-dialog',
+                htmlContainer: 'contact-selector-content'
+            },
+            preConfirm: () => {
+                if (!validateContacts()) {
+                    return false;
+                }
+                return modalState.contacts;
+            },
+            didOpen: () => {
+                setupEventHandlers();
+            }
+        };
+
+        return Swal.fire(swalOptions).then((result) => {
+            if (result.isConfirmed && result.value) {
+                console.log('Contacts selected:', result.value);
+                onConfirm(result.value);
+            } else if (result.dismiss === Swal.DismissReason.cancel) {
+                onCancel();
+            }
+        });
+    };
+
+    return showModal();
+};
+
+export default showContactSelectorModal;