'use client'; import React, { useState, useRef, useEffect, useCallback } from 'react'; import styles from './QuickActionsMenu.module.css'; interface QuickActionsMenuProps { onStartSupport: () => void; onEditDNS: () => void; onRegeneratePages: () => void; onReindexGSC?: () => void; stripeCustomerId: string | null; hasSubdomain: boolean; canReindexGSC?: boolean; isStartingSupport?: boolean; isRegenerating?: boolean; isReindexingGSC?: boolean; } // Menu item IDs for aria-activedescendant const MENU_ITEMS = [ 'menu-support', 'menu-stripe', 'menu-dns', 'menu-regenerate', 'menu-reindex-gsc', ] as const; export function QuickActionsMenu({ onStartSupport, onEditDNS, onRegeneratePages, onReindexGSC, stripeCustomerId, hasSubdomain, canReindexGSC, isStartingSupport, isRegenerating, isReindexingGSC, }: QuickActionsMenuProps) { const [isOpen, setIsOpen] = useState(false); const [activeIndex, setActiveIndex] = useState(-1); const menuRef = useRef(null); const triggerRef = useRef(null); // Helper to close menu and reset state const closeMenu = useCallback(() => { setIsOpen(false); setActiveIndex(-1); }, []); // Helper to toggle menu const toggleMenu = useCallback(() => { setIsOpen((prev) => { if (!prev) setActiveIndex(-1); // Reset on open return !prev; }); }, []); // Handle keyboard navigation const handleKeyDown = useCallback( (event: KeyboardEvent) => { if (!isOpen) return; switch (event.key) { case 'Escape': closeMenu(); triggerRef.current?.focus(); break; case 'ArrowDown': event.preventDefault(); setActiveIndex((prev) => { const next = prev + 1; return next >= MENU_ITEMS.length ? 0 : next; }); break; case 'ArrowUp': event.preventDefault(); setActiveIndex((prev) => { const next = prev - 1; return next < 0 ? MENU_ITEMS.length - 1 : next; }); break; case 'Enter': case ' ': if (activeIndex >= 0) { event.preventDefault(); const activeItem = document.getElementById(MENU_ITEMS[activeIndex]); if (activeItem && !activeItem.hasAttribute('disabled')) { activeItem.click(); } } break; case 'Home': event.preventDefault(); setActiveIndex(0); break; case 'End': event.preventDefault(); setActiveIndex(MENU_ITEMS.length - 1); break; } }, [isOpen, activeIndex, closeMenu] ); // Close menu when clicking outside useEffect(() => { function handleClickOutside(event: MouseEvent) { if (menuRef.current && !menuRef.current.contains(event.target as Node)) { closeMenu(); } } if (isOpen) { document.addEventListener('mousedown', handleClickOutside); document.addEventListener('keydown', handleKeyDown); } return () => { document.removeEventListener('mousedown', handleClickOutside); document.removeEventListener('keydown', handleKeyDown); }; }, [isOpen, handleKeyDown, closeMenu]); // Build Stripe dashboard URL const getStripeCustomerUrl = (customerId: string) => { const isTestMode = process.env.NEXT_PUBLIC_STRIPE_TEST_MODE === 'true'; const basePath = isTestMode ? '/test' : ''; return `https://dashboard.stripe.com${basePath}/customers/${customerId}`; }; // Get active class for menu item const getMenuItemClass = (index: number) => { return activeIndex === index ? `${styles.menuItem} ${styles.menuItemActive}` : styles.menuItem; }; return (

{isOpen && ( ); }