feat: implement header/footer visibility controls for checkout and thankyou pages

- Created LayoutWrapper component to conditionally render header/footer based on route
- Created MinimalHeader component (logo only)
- Created MinimalFooter component (trust badges + policy links)
- Created usePageVisibility hook to get visibility settings per page
- Wrapped ClassicLayout with LayoutWrapper for conditional rendering
- Header/footer visibility now controlled directly in React SPA
- Settings: show/minimal/hide for both header and footer
- Background color support for checkout and thankyou pages

admin-spa/src/App.tsx

@@ -26,7 +26,7 @@ import CustomerNew from '@/routes/Customers/New';
 import CustomerEdit from '@/routes/Customers/Edit';
 import CustomerDetail from '@/routes/Customers/Detail';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { LayoutDashboard, ReceiptText, Package, Tag, Users, Settings as SettingsIcon, Maximize2, Minimize2, Loader2 } from 'lucide-react';
+import { LayoutDashboard, ReceiptText, Package, Tag, Users, Settings as SettingsIcon, Palette, Mail, Maximize2, Minimize2, Loader2 } from 'lucide-react';
 import { Toaster } from 'sonner';
 import { useShortcuts } from "@/hooks/useShortcuts";
 import { CommandPalette } from "@/components/CommandPalette";
@@ -89,7 +89,7 @@ function useFullscreen() {
   return { on, setOn } as const;
 }
 
-function ActiveNavLink({ to, startsWith, children, className, end }: any) {
+function ActiveNavLink({ to, startsWith, end, className, children, childPaths }: any) {
   // Use the router location hook instead of reading from NavLink's className args
   const location = useLocation();
   const starts = typeof startsWith === 'string' && startsWith.length > 0 ? startsWith : undefined;
@@ -100,7 +100,13 @@ function ActiveNavLink({ to, startsWith, children, className, end }: any) {
       className={(nav) => {
         // Special case: Dashboard should also match root path "/"
         const isDashboard = starts === '/dashboard' && location.pathname === '/';
-        const activeByPath = starts ? (location.pathname.startsWith(starts) || isDashboard) : false;
+        
+        // Check if current path matches any child paths (e.g., /coupons under Marketing)
+        const matchesChild = childPaths && Array.isArray(childPaths) 
+          ? childPaths.some((childPath: string) => location.pathname.startsWith(childPath))
+          : false;
+        
+        const activeByPath = starts ? (location.pathname.startsWith(starts) || isDashboard || matchesChild) : false;
         const mergedActive = nav.isActive || activeByPath;
         if (typeof className === 'function') {
           // Preserve caller pattern: className receives { isActive }
@@ -117,33 +123,42 @@ function ActiveNavLink({ to, startsWith, children, className, end }: any) {
 function Sidebar() {
   const link = "flex items-center gap-2 rounded-md px-3 py-2 hover:bg-accent hover:text-accent-foreground shadow-none hover:shadow-none focus:shadow-none focus:outline-none focus:ring-0";
   const active = "bg-secondary";
+  
+  // Icon mapping
+  const iconMap: Record<string, any> = {
+    'layout-dashboard': LayoutDashboard,
+    'receipt-text': ReceiptText,
+    'package': Package,
+    'tag': Tag,
+    'users': Users,
+    'mail': Mail,
+    'palette': Palette,
+    'settings': SettingsIcon,
+  };
+  
+  // Get navigation tree from backend
+  const navTree = (window as any).WNW_NAV_TREE || [];
+  
   return (
     <aside className="w-56 flex-shrink-0 p-3 border-r border-border sticky top-16 h-[calc(100vh-64px)] overflow-y-auto bg-background">
       <nav className="flex flex-col gap-1">
-        <ActiveNavLink to="/dashboard" startsWith="/dashboard" className={({ isActive }: any) => `${link} ${isActive ? active : ''}`}>
-          <LayoutDashboard className="w-4 h-4" />
-          <span>{__("Dashboard")}</span>
-        </ActiveNavLink>
-        <ActiveNavLink to="/orders" startsWith="/orders" className={({ isActive }: any) => `${link} ${isActive ? active : ''}`}>
-          <ReceiptText className="w-4 h-4" />
-          <span>{__("Orders")}</span>
-        </ActiveNavLink>
-        <ActiveNavLink to="/products" startsWith="/products" className={({ isActive }: any) => `${link} ${isActive ? active : ''}`}>
-          <Package className="w-4 h-4" />
-          <span>{__("Products")}</span>
-        </ActiveNavLink>
-        <ActiveNavLink to="/coupons" startsWith="/coupons" className={({ isActive }: any) => `${link} ${isActive ? active : ''}`}>
-          <Tag className="w-4 h-4" />
-          <span>{__("Coupons")}</span>
-        </ActiveNavLink>
-        <ActiveNavLink to="/customers" startsWith="/customers" className={({ isActive }: any) => `${link} ${isActive ? active : ''}`}>
-          <Users className="w-4 h-4" />
-          <span>{__("Customers")}</span>
-        </ActiveNavLink>
-        <ActiveNavLink to="/settings" startsWith="/settings" className={({ isActive }: any) => `${link} ${isActive ? active : ''}`}>
-          <SettingsIcon className="w-4 h-4" />
-          <span>{__("Settings")}</span>
-        </ActiveNavLink>
+        {navTree.map((item: any) => {
+          const IconComponent = iconMap[item.icon] || Package;
+          // Extract child paths for matching
+          const childPaths = item.children?.map((child: any) => child.path).filter(Boolean) || [];
+          return (
+            <ActiveNavLink 
+              key={item.key} 
+              to={item.path} 
+              startsWith={item.path}
+              childPaths={childPaths}
+              className={({ isActive }: any) => `${link} ${isActive ? active : ''}`}
+            >
+              <IconComponent className="w-4 h-4" />
+              <span>{item.label}</span>
+            </ActiveNavLink>
+          );
+        })}
       </nav>
     </aside>
   );
@@ -153,33 +168,42 @@ function TopNav({ fullscreen = false }: { fullscreen?: boolean }) {
   const link = "inline-flex items-center gap-2 rounded-md px-3 py-2 hover:bg-accent hover:text-accent-foreground shadow-none hover:shadow-none focus:shadow-none focus:outline-none focus:ring-0";
   const active = "bg-secondary";
   const topClass = fullscreen ? 'top-16' : 'top-[calc(4rem+32px)]';
+  
+  // Icon mapping (same as Sidebar)
+  const iconMap: Record<string, any> = {
+    'layout-dashboard': LayoutDashboard,
+    'receipt-text': ReceiptText,
+    'package': Package,
+    'tag': Tag,
+    'users': Users,
+    'mail': Mail,
+    'palette': Palette,
+    'settings': SettingsIcon,
+  };
+  
+  // Get navigation tree from backend
+  const navTree = (window as any).WNW_NAV_TREE || [];
+  
   return (
     <div className={`border-b border-border sticky ${topClass} z-30 bg-background md:bg-background/95 md:backdrop-blur md:supports-[backdrop-filter]:bg-background/60`}>
       <div className="px-4 h-12 flex flex-nowrap overflow-auto items-center gap-2">
-        <ActiveNavLink to="/dashboard" startsWith="/dashboard" className={({ isActive }: any) => `${link} ${isActive ? active : ''}`}>
-          <LayoutDashboard className="w-4 h-4" />
-          <span>{__("Dashboard")}</span>
-        </ActiveNavLink>
-        <ActiveNavLink to="/orders" startsWith="/orders" className={({ isActive }: any) => `${link} ${isActive ? active : ''}`}>
-          <ReceiptText className="w-4 h-4" />
-          <span>{__("Orders")}</span>
-        </ActiveNavLink>
-        <ActiveNavLink to="/products" startsWith="/products" className={({ isActive }: any) => `${link} ${isActive ? active : ''}`}>
-          <Package className="w-4 h-4" />
-          <span>{__("Products")}</span>
-        </ActiveNavLink>
-        <ActiveNavLink to="/coupons" startsWith="/coupons" className={({ isActive }: any) => `${link} ${isActive ? active : ''}`}>
-          <Tag className="w-4 h-4" />
-          <span>{__("Coupons")}</span>
-        </ActiveNavLink>
-        <ActiveNavLink to="/customers" startsWith="/customers" className={({ isActive }: any) => `${link} ${isActive ? active : ''}`}>
-          <Users className="w-4 h-4" />
-          <span>{__("Customers")}</span>
-        </ActiveNavLink>
-        <ActiveNavLink to="/settings" startsWith="/settings" className={({ isActive }: any) => `${link} ${isActive ? active : ''}`}>
-          <SettingsIcon className="w-4 h-4" />
-          <span>{__("Settings")}</span>
-        </ActiveNavLink>
+        {navTree.map((item: any) => {
+          const IconComponent = iconMap[item.icon] || Package;
+          // Extract child paths for matching
+          const childPaths = item.children?.map((child: any) => child.path).filter(Boolean) || [];
+          return (
+            <ActiveNavLink 
+              key={item.key}
+              to={item.path} 
+              startsWith={item.path}
+              childPaths={childPaths}
+              className={({ isActive }: any) => `${link} ${isActive ? active : ''}`}
+            >
+              <IconComponent className="w-4 h-4" />
+              <span className="text-sm font-medium">{item.label}</span>
+            </ActiveNavLink>
+          );
+        })}
       </div>
     </div>
   );
@@ -214,7 +238,19 @@ import PushConfiguration from '@/routes/Settings/Notifications/PushConfiguration
 import EmailCustomization from '@/routes/Settings/Notifications/EmailCustomization';
 import EditTemplate from '@/routes/Settings/Notifications/EditTemplate';
 import SettingsDeveloper from '@/routes/Settings/Developer';
-import SettingsCustomerSPA from '@/routes/Settings/CustomerSPA';
+import AppearanceIndex from '@/routes/Appearance';
+import AppearanceGeneral from '@/routes/Appearance/General';
+import AppearanceHeader from '@/routes/Appearance/Header';
+import AppearanceFooter from '@/routes/Appearance/Footer';
+import AppearanceShop from '@/routes/Appearance/Shop';
+import AppearanceProduct from '@/routes/Appearance/Product';
+import AppearanceCart from '@/routes/Appearance/Cart';
+import AppearanceCheckout from '@/routes/Appearance/Checkout';
+import AppearanceThankYou from '@/routes/Appearance/ThankYou';
+import AppearanceAccount from '@/routes/Appearance/Account';
+import MarketingIndex from '@/routes/Marketing';
+import NewsletterSubscribers from '@/routes/Marketing/Newsletter';
+import EmailTemplates from '@/routes/Marketing/EmailTemplates';
 import MorePage from '@/routes/More';
 
 // Addon Route Component - Dynamically loads addon components
@@ -512,8 +548,24 @@ function AppRoutes() {
       <Route path="/settings/notifications/email-customization" element={<EmailCustomization />} />
       <Route path="/settings/notifications/edit-template" element={<EditTemplate />} />
       <Route path="/settings/brand" element={<SettingsIndex />} />
-      <Route path="/settings/customer-spa" element={<SettingsCustomerSPA />} />
       <Route path="/settings/developer" element={<SettingsDeveloper />} />
+      
+      {/* Appearance */}
+      <Route path="/appearance" element={<AppearanceIndex />} />
+      <Route path="/appearance/general" element={<AppearanceGeneral />} />
+      <Route path="/appearance/header" element={<AppearanceHeader />} />
+      <Route path="/appearance/footer" element={<AppearanceFooter />} />
+      <Route path="/appearance/shop" element={<AppearanceShop />} />
+      <Route path="/appearance/product" element={<AppearanceProduct />} />
+      <Route path="/appearance/cart" element={<AppearanceCart />} />
+      <Route path="/appearance/checkout" element={<AppearanceCheckout />} />
+      <Route path="/appearance/thankyou" element={<AppearanceThankYou />} />
+      <Route path="/appearance/account" element={<AppearanceAccount />} />
+
+      {/* Marketing */}
+      <Route path="/marketing" element={<MarketingIndex />} />
+      <Route path="/marketing/newsletter" element={<NewsletterSubscribers />} />
+      <Route path="/marketing/newsletter/template/:template" element={<EmailTemplates />} />
 
       {/* Dynamic Addon Routes */}
       {addonRoutes.map((route: any) => (