@visns-studio/visns-components 5.10.10 → 5.11.1

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

@@ -0,0 +1,380 @@
+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'],
+        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>` : ''}
+                    <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 => `
+            <div class="form-group">
+                <div class="form-field-row">
+                    <label for="manual-${field}">${field.charAt(0).toUpperCase() + field.slice(1)}:</label>
+                    <input 
+                        type="${field === 'email' ? 'email' : 'text'}" 
+                        id="manual-${field}" 
+                        class="swal2-input"
+                        placeholder="Enter ${field}"
+                        ${field === 'email' ? '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() : '';
+                    
+                    if (field === 'email' && value && !isValidEmail(value)) {
+                        isValid = false;
+                        input.style.borderColor = '#dc2626';
+                        return;
+                    }
+                    
+                    if (field === 'name' && !value) {
+                        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;

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

@@ -0,0 +1,302 @@
+import React from 'react';
+import Swal from 'sweetalert2';
+import './styles/SweetAlert.module.css';
+import './styles/DatePickerDialog.css';
+import moment from 'moment';
+
+/**
+ * A utility function that shows a date picker confirmation dialog using SweetAlert2
+ *
+ * @param {Object} options - Configuration options
+ * @param {string} options.title - The title of the dialog (default: 'Select Date')
+ * @param {string} options.message - The message to display in the dialog
+ * @param {string} options.confirmLabel - Label for the confirm button (default: 'Confirm')
+ * @param {string} options.cancelLabel - Label for the cancel button (default: 'Cancel')
+ * @param {Function} options.onConfirm - Function to call when confirmed with selected date
+ * @param {Function} options.onCancel - Function to call when cancelled
+ * @param {string} options.defaultDate - Default date value (ISO string or 'now')
+ * @param {string} options.dateFormat - Date format for display (default: 'YYYY-MM-DD')
+ * @param {Object} options.data - Optional data object to pass context
+ * @param {string} options.timezone - Timezone to use ('auto', 'Australia/Perth', or specific timezone)
+ * @param {boolean} options.forcePerth - Force Australia/Perth timezone (default: false)
+ * @param {boolean} options.dateOnly - Return date string only for DATE fields (default: auto-detect)
+ * @returns {Promise} - A promise that resolves when the dialog is closed
+ */
+export const showDatePickerDialog = ({
+    title = 'Select Date',
+    message = 'Please select a date:',
+    confirmLabel = 'Confirm',
+    cancelLabel = 'Cancel',
+    onConfirm = () => {},
+    onCancel = () => {},
+    defaultDate = null,
+    dateFormat = 'YYYY-MM-DD',
+    data = null,
+    timezone = 'auto',
+    forcePerth = false,
+    dateOnly = 'auto',
+}) => {
+    // Timezone detection and handling
+    const getTargetTimezone = () => {
+        if (forcePerth) {
+            return 'Australia/Perth';
+        }
+        
+        if (timezone === 'auto') {
+            // Try to detect browser timezone
+            try {
+                return Intl.DateTimeFormat().resolvedOptions().timeZone;
+            } catch (e) {
+                console.warn('Could not detect timezone, falling back to Australia/Perth');
+                return 'Australia/Perth';
+            }
+        }
+        
+        return timezone;
+    };
+
+    const targetTimezone = getTargetTimezone();
+
+    // Auto-detect if this should be a date-only field based on field name or explicit config
+    const shouldUseDateOnly = () => {
+        if (dateOnly === true || dateOnly === false) {
+            return dateOnly; // Explicit configuration
+        }
+        
+        // Auto-detection based on field name patterns
+        const fieldName = data?.name || '';
+        const dateOnlyPatterns = [
+            /^date_/i,           // date_sent, date_delivered, etc.
+            /^quarter_/i,        // quarter_1, quarter_2, etc.
+            /_date$/i,           // send_date, delivery_date, etc.
+            /^(start|end)_/i,    // start_date, end_date, etc.
+            /^(birth|death)_/i,  // birth_date, death_date, etc.
+            /^due_/i,            // due_date, etc.
+            /^expiry/i,          // expiry_date, etc.
+        ];
+        
+        const isDateField = dateOnlyPatterns.some(pattern => pattern.test(fieldName));
+        
+        console.log(`Auto-detecting field type for "${fieldName}": ${isDateField ? 'DATE' : 'DATETIME'} field`);
+        
+        return isDateField;
+    };
+
+    const useDateOnly = shouldUseDateOnly();
+
+    // Get timezone offset in hours for a given timezone
+    const getTimezoneOffsetHours = (tz) => {
+        try {
+            // For Australia/Perth, it's UTC+8
+            if (tz === 'Australia/Perth') {
+                return 8; // +8 hours
+            }
+            
+            // For other timezones, calculate the offset
+            const now = new Date();
+            const utc = new Date(now.getTime() + (now.getTimezoneOffset() * 60000));
+            const targetTime = new Date(utc.toLocaleString("en-US", {timeZone: tz}));
+            return (targetTime.getTime() - utc.getTime()) / (1000 * 60 * 60); // Convert to hours
+        } catch (e) {
+            console.warn('Could not calculate timezone offset, using +8 for Perth:', e);
+            return 8; // Default to Perth time
+        }
+    };
+
+    // Convert UTC date to target timezone for display
+    const convertToDisplayDate = (utcDate) => {
+        if (!utcDate) return moment().format(dateFormat);
+        
+        try {
+            // If it's a UTC ISO string, convert to target timezone
+            if (typeof utcDate === 'string' && (utcDate.includes('T') || utcDate.includes('Z'))) {
+                const offsetHours = getTimezoneOffsetHours(targetTimezone);
+                // Add the offset to convert FROM UTC TO local timezone
+                return moment.utc(utcDate).add(offsetHours, 'hours').format(dateFormat);
+            }
+            // If it's already a date string (YYYY-MM-DD), treat it as local date
+            return moment(utcDate).format(dateFormat);
+        } catch (e) {
+            console.warn('Error converting date, using current date:', e);
+            return moment().format(dateFormat);
+        }
+    };
+
+    // Convert selected date for API calls
+    const convertForAPI = (localDateString) => {
+        try {
+            // If useDateOnly is true, just return the date string as-is for DATE fields
+            if (useDateOnly) {
+                console.log(`Date-only field: returning ${localDateString} as-is for DATE field`);
+                return localDateString;
+            }
+            
+            // For DATETIME fields, convert to UTC
+            const offsetHours = getTimezoneOffsetHours(targetTimezone);
+            
+            // Create a UTC moment object from the date string, then treat it as if it were in the target timezone
+            // This means: "2025-06-18" becomes "2025-06-18T00:00:00 in target timezone"
+            const naiveMoment = moment.utc(localDateString, dateFormat);
+            
+            // Now subtract the offset to get the actual UTC time
+            // If it's Perth (+8), we subtract 8 hours to get UTC
+            const utcMoment = naiveMoment.clone().subtract(offsetHours, 'hours');
+            
+            console.log(`Converting: ${localDateString} midnight in ${targetTimezone}`);
+            console.log(`Naive UTC: ${naiveMoment.toISOString()}`);
+            console.log(`Offset: -${offsetHours} hours`);
+            console.log(`Final UTC: ${utcMoment.toISOString()}`);
+            
+            return utcMoment.toISOString();
+        } catch (e) {
+            console.warn('Error converting date, using as-is:', e);
+            // Fallback: return the date string as-is
+            return localDateString;
+        }
+    };
+
+    // Get default date value with timezone handling
+    let initialDate = '';
+    if (defaultDate === 'now') {
+        initialDate = convertToDisplayDate(moment().toISOString());
+    } else if (defaultDate) {
+        initialDate = convertToDisplayDate(defaultDate);
+    } else {
+        initialDate = convertToDisplayDate(moment().toISOString());
+    }
+
+    // Enhanced message with item details if available
+    let enhancedMessage = message;
+    if (data) {
+        const identifiers = ['name', 'label', 'title', 'id'];
+        for (const id of identifiers) {
+            if (data[id] && typeof data[id] === 'string' && data[id].trim() !== '') {
+                if (!message.includes(data[id])) {
+                    enhancedMessage = `${message} (${data[id]})`;
+                }
+                break;
+            }
+        }
+    }
+
+    // Create HTML content with compact date input
+    const htmlContent = `
+        <div style="text-align: left; margin: 8px 0; max-width: 100%; overflow: hidden;">
+            <p style="margin-bottom: 8px; color: #374151; word-wrap: break-word; font-size: 14px;">${enhancedMessage}</p>
+            <div style="margin: 8px 0; width: 100%;">
+                <label for="swal-date-input" style="display: block; margin-bottom: 4px; font-weight: 500; color: #374151; font-size: 13px;">
+                    Date <span style="font-size: 11px; color: #6b7280; font-weight: normal;">(${targetTimezone})</span>:
+                </label>
+                <input 
+                    id="swal-date-input" 
+                    type="date" 
+                    value="${initialDate}" 
+                    class="swal2-input" 
+                    style="
+                        width: 100% !important; 
+                        max-width: 100% !important;
+                        box-sizing: border-box !important;
+                        padding: 8px 10px !important; 
+                        border: 1px solid #d1d5db !important; 
+                        border-radius: 4px !important; 
+                        font-size: 13px !important;
+                        font-family: inherit !important;
+                        background-color: #ffffff !important;
+                        outline: none !important;
+                        transition: border-color 0.2s ease !important;
+                        margin: 0 !important;
+                        display: block !important;
+                        height: 34px !important;
+                    "
+                    onfocus="this.style.borderColor='#4f46e5'"
+                    onblur="this.style.borderColor='#d1d5db'">
+            </div>
+        </div>
+    `;
+
+    // Configure SweetAlert2 options
+    const swalOptions = {
+        title: title,
+        html: htmlContent,
+        icon: 'question',
+        showCancelButton: true,
+        confirmButtonText: confirmLabel,
+        cancelButtonText: cancelLabel,
+        confirmButtonColor: 'var(--primary-color, #4f46e5)',
+        cancelButtonColor: '#6b7280',
+        allowOutsideClick: true,
+        allowEscapeKey: true,
+        reverseButtons: true,
+        focusCancel: false,
+        buttonsStyling: true,
+        width: 'auto',
+        padding: '0.75rem',
+        customClass: {
+            popup: 'date-picker-dialog',
+            htmlContainer: 'date-picker-content'
+        },
+        preConfirm: () => {
+            const dateInput = document.getElementById('swal-date-input');
+            const selectedDate = dateInput.value;
+            
+            if (!selectedDate) {
+                Swal.showValidationMessage('Please select a date');
+                return false;
+            }
+            
+            // Validate the date
+            if (!moment(selectedDate).isValid()) {
+                Swal.showValidationMessage('Please enter a valid date');
+                return false;
+            }
+            
+            return selectedDate;
+        },
+        didOpen: () => {
+            // Focus on the date input when dialog opens
+            const dateInput = document.getElementById('swal-date-input');
+            if (dateInput) {
+                // Additional CSS to ensure the input stays within bounds
+                dateInput.style.setProperty('width', '100%', 'important');
+                dateInput.style.setProperty('max-width', '100%', 'important');
+                dateInput.style.setProperty('box-sizing', 'border-box', 'important');
+                dateInput.style.setProperty('overflow', 'hidden', 'important');
+                
+                // Focus the input
+                dateInput.focus();
+            }
+            
+            // Apply additional container styling
+            const popup = document.querySelector('.date-picker-dialog');
+            if (popup) {
+                popup.style.setProperty('max-width', '90vw', 'important');
+                popup.style.setProperty('width', 'auto', 'important');
+                popup.style.setProperty('min-width', '320px', 'important');
+            }
+            
+            const htmlContainer = document.querySelector('.date-picker-content');
+            if (htmlContainer) {
+                htmlContainer.style.setProperty('overflow', 'hidden', 'important');
+                htmlContainer.style.setProperty('word-wrap', 'break-word', 'important');
+            }
+        }
+    };
+
+    // Show SweetAlert2 dialog
+    return Swal.fire(swalOptions).then((result) => {
+        if (result.isConfirmed && result.value) {
+            // Convert the selected date for API calls (either date string or UTC datetime)
+            const selectedDateForAPI = convertForAPI(result.value);
+            const selectedDateLocal = result.value;
+            
+            // Log for debugging
+            console.log(`Date selected: ${selectedDateLocal} (${targetTimezone}) -> ${selectedDateForAPI} (${useDateOnly ? 'DATE' : 'UTC'})`);
+            
+            onConfirm(selectedDateForAPI, selectedDateLocal, targetTimezone);
+        } else if (result.dismiss === Swal.DismissReason.cancel) {
+            onCancel();
+        }
+    });
+};
+
+export default showDatePickerDialog;