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/layouts/LayoutWrapper.tsx

@@ -0,0 +1,56 @@
+import React, { ReactNode } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useCheckoutSettings, useThankYouSettings } from '../hooks/useAppearanceSettings';
+import { MinimalHeader } from '../components/Layout/MinimalHeader';
+import { MinimalFooter } from '../components/Layout/MinimalFooter';
+
+interface LayoutWrapperProps {
+  children: ReactNode;
+  header: ReactNode;
+  footer: ReactNode;
+}
+
+export function LayoutWrapper({ children, header, footer }: LayoutWrapperProps) {
+  const location = useLocation();
+  const checkoutSettings = useCheckoutSettings();
+  const thankYouSettings = useThankYouSettings();
+
+  // Determine visibility settings based on current route
+  let headerVisibility = 'show';
+  let footerVisibility = 'show';
+  let backgroundColor = '';
+
+  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 || '';
+  }
+
+  // Render appropriate header
+  const renderHeader = () => {
+    if (headerVisibility === 'hide') return null;
+    if (headerVisibility === 'minimal') return <MinimalHeader />;
+    return header;
+  };
+
+  // Render appropriate footer
+  const renderFooter = () => {
+    if (footerVisibility === 'hide') return null;
+    if (footerVisibility === 'minimal') return <MinimalFooter />;
+    return footer;
+  };
+
+  return (
+    <div className="layout-wrapper min-h-screen flex flex-col" style={backgroundColor ? { backgroundColor } : undefined}>
+      {renderHeader()}
+      <main className="flex-1">
+        {children}
+      </main>
+      {renderFooter()}
+    </div>
+  );
+}