@visns-studio/visns-components 5.10.11 → 5.11.1

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;