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

customer-spa/src/hooks/usePageVisibility.ts

@@ -0,0 +1,34 @@
+import { useLocation } from 'react-router-dom';
+import { useCheckoutSettings, useThankYouSettings } from './useAppearanceSettings';
+
+export function usePageVisibility() {
+  const location = useLocation();
+  const checkoutSettings = useCheckoutSettings();
+  const thankYouSettings = useThankYouSettings();
+
+  // Default visibility
+  let headerVisibility = 'show';
+  let footerVisibility = 'show';
+  let backgroundColor = '';
+
+  // Check current route and get visibility settings
+  if (location.pathname === '/checkout') {
+    headerVisibility = checkoutSettings.layout.header_visibility || 'minimal';
+    footerVisibility = checkoutSettings.layout.footer_visibility || 'minimal';
+    backgroundColor = checkoutSettings.layout.background_color || '';
+  } else if (location.pathname.startsWith('/order-received/')) {
+    headerVisibility = thankYouSettings.headerVisibility || 'show';
+    footerVisibility = thankYouSettings.footerVisibility || 'minimal';
+    backgroundColor = thankYouSettings.backgroundColor || '';
+  }
+
+  return {
+    headerVisibility,
+    footerVisibility,
+    backgroundColor,
+    shouldShowHeader: headerVisibility !== 'hide',
+    shouldShowFooter: footerVisibility !== 'hide',
+    isMinimalHeader: headerVisibility === 'minimal',
+    isMinimalFooter: footerVisibility === 'minimal',
+  };
+}