9ac09582d2
- 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
35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
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',
|
|
};
|
|
}
|