From 2b3452e9f2dbdbe75801b12baeb8185f3cef04f3 Mon Sep 17 00:00:00 2001 From: dwindown Date: Thu, 6 Nov 2025 14:44:37 +0700 Subject: [PATCH] fix: Reactive store name in header + sticky header positioning MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. Store Name Updates in Header ✅ Problem: Changing store name doesn't update topbar title Solution: Custom event system Flow: - User saves store settings - Dispatch 'woonoow:store:updated' event with store_name - Header component listens for event - Updates title in real-time Files: - App.tsx: useState + useEffect listener - Store.tsx: Dispatch event on save success 2. Sticky Header Positioning ✅ Problem 1: Sticky header hidden under submenu Solution: top-[49px] instead of top-0 Problem 2: Sticky header not edge-to-edge Solution: Negative margins to break out of container Before:
After:
Responsive: - Mobile: -mx-4 px-4 (breaks out of 16px padding) - Desktop: -mx-6 px-6 (breaks out of 24px padding) Result: ✅ Sticky header below submenu (49px offset) ✅ Edge-to-edge background ✅ Content still centered in container ✅ Works in fullscreen, standalone, and wp-admin modes 3. Layout Structure Parent: space-y-6 lg:p-6 pb-6 ├─ Sticky Header: -mx to break out, top-[49px] └─ Content: container max-w-5xl This ensures: - Sticky header spans full width - Content stays centered - Proper spacing maintained Files Modified: - App.tsx: Reactive site title - Store.tsx: Dispatch update event - SettingsLayout.tsx: Fixed sticky positioning --- admin-spa/src/App.tsx | 20 +++++++++++++++---- admin-spa/src/routes/Dashboard/index.tsx | 2 +- admin-spa/src/routes/Settings/Payments.tsx | 9 --------- admin-spa/src/routes/Settings/Store.tsx | 5 +++++ .../Settings/components/SettingsLayout.tsx | 6 +++--- 5 files changed, 25 insertions(+), 17 deletions(-) diff --git a/admin-spa/src/App.tsx b/admin-spa/src/App.tsx index fc932e2..ebe74bc 100644 --- a/admin-spa/src/App.tsx +++ b/admin-spa/src/App.tsx @@ -257,9 +257,21 @@ function AddonRoute({ config }: { config: any }) { } function Header({ onFullscreen, fullscreen, showToggle = true }: { onFullscreen: () => void; fullscreen: boolean; showToggle?: boolean }) { - const siteTitle = (window as any).wnw?.siteTitle || 'WooNooW'; + const [siteTitle, setSiteTitle] = React.useState((window as any).wnw?.siteTitle || 'WooNooW'); const isStandalone = window.WNW_CONFIG?.standaloneMode ?? false; + // Listen for store settings updates + React.useEffect(() => { + const handleStoreUpdate = (event: CustomEvent) => { + if (event.detail?.store_name) { + setSiteTitle(event.detail.store_name); + } + }; + + window.addEventListener('woonoow:store:updated' as any, handleStoreUpdate); + return () => window.removeEventListener('woonoow:store:updated' as any, handleStoreUpdate); + }, []); + const handleLogout = async () => { try { await fetch((window.WNW_CONFIG?.restUrl || '') + '/auth/logout', { @@ -406,7 +418,7 @@ function Shell() { {isDashboardRoute ? ( ) : ( - + )}
@@ -419,7 +431,7 @@ function Shell() { {isDashboardRoute ? ( ) : ( - + )}
@@ -432,7 +444,7 @@ function Shell() { {isDashboardRoute ? ( ) : ( - + )}
diff --git a/admin-spa/src/routes/Dashboard/index.tsx b/admin-spa/src/routes/Dashboard/index.tsx index 370542d..8e35cb1 100644 --- a/admin-spa/src/routes/Dashboard/index.tsx +++ b/admin-spa/src/routes/Dashboard/index.tsx @@ -281,7 +281,7 @@ export default function Dashboard() { }; return ( -
+
{/* Header */}

{__('Dashboard')}

diff --git a/admin-spa/src/routes/Settings/Payments.tsx b/admin-spa/src/routes/Settings/Payments.tsx index d8d8196..d58fc88 100644 --- a/admin-spa/src/routes/Settings/Payments.tsx +++ b/admin-spa/src/routes/Settings/Payments.tsx @@ -117,26 +117,19 @@ export default function PaymentsPage() { // Initialize order from saved order or gateways React.useEffect(() => { if (gateways.length > 0 && manualOrder.length === 0 && onlineOrder.length === 0) { - console.log('Initializing gateway order...'); - console.log('All gateways:', gateways.map((g: PaymentGateway) => ({ id: g.id, type: g.type }))); - console.log('Saved order:', savedOrder); // Use saved order if available, otherwise use gateway order if (savedOrder.manual.length > 0) { - console.log('Using saved manual order:', savedOrder.manual); setManualOrder(savedOrder.manual); } else { const manual = gateways.filter((g: PaymentGateway) => g.type === 'manual').map((g: PaymentGateway) => g.id); - console.log('Using gateway manual order:', manual); setManualOrder(manual); } if (savedOrder.online.length > 0) { - console.log('Using saved online order:', savedOrder.online); setOnlineOrder(savedOrder.online); } else { const online = gateways.filter((g: PaymentGateway) => g.type === 'provider' || g.type === 'other').map((g: PaymentGateway) => g.id); - console.log('Using gateway online order:', online); setOnlineOrder(online); } } @@ -197,7 +190,6 @@ export default function PaymentsPage() { // Save order to backend try { - console.log('Saving manual order:', newOrder); await api.post('/payments/gateways/order', { category: 'manual', order: newOrder, @@ -225,7 +217,6 @@ export default function PaymentsPage() { // Save order to backend try { - console.log('Saving online order:', newOrder); await api.post('/payments/gateways/order', { category: 'online', order: newOrder, diff --git a/admin-spa/src/routes/Settings/Store.tsx b/admin-spa/src/routes/Settings/Store.tsx index 5c3301e..a09c424 100644 --- a/admin-spa/src/routes/Settings/Store.tsx +++ b/admin-spa/src/routes/Settings/Store.tsx @@ -137,6 +137,11 @@ export default function StoreDetailsPage() { onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['store-settings'] }); toast.success('Your store details have been updated successfully.'); + + // Dispatch event to update site title in header + window.dispatchEvent(new CustomEvent('woonoow:store:updated', { + detail: { store_name: settings.storeName } + })); }, onError: () => { toast.error('Failed to save store settings'); diff --git a/admin-spa/src/routes/Settings/components/SettingsLayout.tsx b/admin-spa/src/routes/Settings/components/SettingsLayout.tsx index 53a64ed..2bc255c 100644 --- a/admin-spa/src/routes/Settings/components/SettingsLayout.tsx +++ b/admin-spa/src/routes/Settings/components/SettingsLayout.tsx @@ -34,10 +34,10 @@ export function SettingsLayout({ }; return ( -
- {/* Sticky Header with Save Button */} +
+ {/* Sticky Header with Save Button - Edge to edge */} {onSave && ( -
+

{title}