haikal/static/js/tours/help-button.js

/**
 * Help Button Component
 * Provides context-aware help based on the current page
 */
class HelpButton {
    constructor(options = {}) {
        this.options = Object.assign({
            position: 'bottom-right',
            icon: 'question-circle',
            text: 'Help',
            autoDetect: true
        }, options);

        this.pageToTourMap = {
            '/inventory/': 'inventory_overview',
            '/inventory/add/': 'add_new_car',
            '/inventory/edit/': 'edit_car',
            '/finance/invoices/': 'manage_invoices',
            '/finance/invoices/create/': 'create_new_invoice',
            '/customers/': 'manage_customers',
            '/customers/add/': 'add_new_customer'
        };

        this.render();
        this.attachEvents();
    }

    render() {
        // Create the help button
        const button = document.createElement('div');
        button.className = `help-button ${this.options.position}`;
        button.innerHTML = `
            <button class="btn btn-outline-warning" id="context-help-btn" 
                    data-bs-toggle="tooltip" title="Get help for this page">
                <i class="bi bi-${this.options.icon}"></i>
                <i class="fa fa-question-circle" aria-hidden="true"></i>
                Help
            </button>
        `;

        // Add styles
        const style = document.createElement('style');
        style.textContent = `
            .help-button {
                position: fixed;
                z-index: 1000;
            }
            .help-button.bottom-right {
                bottom: 20px;
                right: 20px;
            }
            .help-button.bottom-left {
                bottom: 20px;
                left: 20px;
            }
            .help-button.top-right {
                top: 20px;
                right: 20px;
            }
            .help-button.top-left {
                top: 20px;
                left: 20px;
            }
        `;

        document.head.appendChild(style);
        document.body.appendChild(button);
    }

    attachEvents() {
        const helpButton = document.getElementById('context-help-btn');
        if (!helpButton) return;

        helpButton.addEventListener('click', () => {
            this.showContextHelp();
        });

        // Initialize tooltip
        new bootstrap.Tooltip(helpButton);
    }

    showContextHelp() {
        // Detect current page and show appropriate tour
        if (this.options.autoDetect) {
            const currentPath = window.location.pathname;
            let tourSlug = null;

            // Find the best match for the current path
            for (const [path, slug] of Object.entries(this.pageToTourMap)) {
                if (currentPath.includes(path)) {
                    tourSlug = slug;
                    break;
                }
            }

            if (tourSlug) {
                window.tourManager.loadTour(tourSlug);
                return;
            }
        }

        // If no specific tour found or autoDetect is off, show help menu
        this.showHelpMenu();
    }

    showHelpMenu() {
        // Create a modal with available help options
        const modal = document.createElement('div');
        modal.className = 'modal fade';
        modal.id = 'helpModal';
        modal.setAttribute('tabindex', '-1');

        modal.innerHTML = `
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Help & Guides</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="list-group">
                            <a href="#" class="list-group-item list-group-item-action" 
                               onclick="window.tourManager.loadTour('add_new_car');">
                                <i class="bi bi-plus-circle me-2"></i> How to Add a New Car
                            </a>
                            <a href="#" class="list-group-item list-group-item-action"
                               onclick="window.tourManager.loadTour('create_new_invoice');">
                                <i class="bi bi-file-text me-2"></i> How to Create an Invoice
                            </a>
                            <a href="#" class="list-group-item list-group-item-action"
                               onclick="window.tourManager.loadTour('manage_customers');">
                                <i class="bi bi-people me-2"></i> How to Manage Customers
                            </a>
                            <div class="dropdown-divider"></div>
                            <a href="/tours/" class="list-group-item list-group-item-action">
                                <i class="bi bi-collection me-2"></i> View All Guides
                            </a>
                            <a href="/support/" class="list-group-item list-group-item-action">
                                <i class="bi bi-headset me-2"></i> Contact Support
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        `;

        document.body.appendChild(modal);

        const modalInstance = new bootstrap.Modal(modal);
        modalInstance.show();

        // Remove modal from DOM after it's hidden
        modal.addEventListener('hidden.bs.modal', () => {
            modal.remove();
        });
    }
}

// Initialize help button on all pages
document.addEventListener('DOMContentLoaded', () => {
    window.helpButton = new HelpButton();
});

// export { HelpButton };