/** * FloatingHelpButton Component * * A floating help button fixed in the top-right corner of the screen. * Automatically determines the help path based on the current route. */ import React from 'react'; import { Link, useLocation } from 'react-router-dom'; import { HelpCircle } from 'lucide-react'; import { useTranslation } from 'react-i18next'; // Map routes to their help paths const routeToHelpPath: Record = { '/': '/help/dashboard', '/dashboard': '/help/dashboard', '/scheduler': '/help/scheduler', '/tasks': '/help/tasks', '/customers': '/help/customers', '/services': '/help/services', '/resources': '/help/resources', '/staff': '/help/staff', '/time-blocks': '/help/time-blocks', '/my-availability': '/help/time-blocks', '/messages': '/help/messages', '/tickets': '/help/ticketing', '/payments': '/help/payments', '/contracts': '/help/contracts', '/contracts/templates': '/help/contracts', '/plugins': '/help/plugins', '/plugins/marketplace': '/help/plugins', '/plugins/my-plugins': '/help/plugins', '/plugins/create': '/help/plugins/create', '/settings': '/help/settings/general', '/settings/general': '/help/settings/general', '/settings/resource-types': '/help/settings/resource-types', '/settings/booking': '/help/settings/booking', '/settings/appearance': '/help/settings/appearance', '/settings/email': '/help/settings/email', '/settings/domains': '/help/settings/domains', '/settings/api': '/help/settings/api', '/settings/auth': '/help/settings/auth', '/settings/billing': '/help/settings/billing', '/settings/quota': '/help/settings/quota', // Platform routes '/platform/dashboard': '/help/dashboard', '/platform/businesses': '/help/dashboard', '/platform/users': '/help/staff', '/platform/tickets': '/help/ticketing', }; const FloatingHelpButton: React.FC = () => { const { t } = useTranslation(); const location = useLocation(); // Get the help path for the current route const getHelpPath = (): string => { // Exact match first if (routeToHelpPath[location.pathname]) { return routeToHelpPath[location.pathname]; } // Try matching with a prefix (for dynamic routes like /customers/:id) const pathSegments = location.pathname.split('/').filter(Boolean); if (pathSegments.length > 0) { // Try progressively shorter paths for (let i = pathSegments.length; i > 0; i--) { const testPath = '/' + pathSegments.slice(0, i).join('/'); if (routeToHelpPath[testPath]) { return routeToHelpPath[testPath]; } } } // Default to the main help guide return '/help'; }; const helpPath = getHelpPath(); // Don't show on help pages themselves if (location.pathname.startsWith('/help')) { return null; } return ( ); }; export default FloatingHelpButton;