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
2025-12-25 22:20:48 +07:00
parent c37ecb8e96
commit 9ac09582d2
104 changed files with 14801 additions and 1213 deletions
--- a/SETTINGS-RESTRUCTURE.md
+++ b/SETTINGS-RESTRUCTURE.md
@@ -0,0 +1,217 @@
+# WooNooW Settings Restructure
+
+## Problem with Current Approach
+- ❌ Predefined "themes" (Classic, Modern, Boutique, Launch) are too rigid
+- ❌ Themes only differ in minor layout tweaks
+- ❌ Users can't customize to their needs
+- ❌ Redundant with page-specific settings
+
+## New Approach: Granular Control
+
+### Global Settings (Appearance > General)
+
+#### 1. SPA Mode
+```
+○ Disabled (Use WordPress default)
+○ Checkout Only (SPA for checkout flow only)
+○ Full SPA (Entire customer-facing site)
+```
+
+#### 2. Typography
+**Option A: Predefined Pairs (GDPR-compliant, self-hosted)**
+- Modern & Clean (Inter)
+- Editorial (Playfair Display + Source Sans)
+- Friendly (Poppins + Open Sans)
+- Elegant (Cormorant + Lato)
+
+**Option B: Custom Google Fonts**
+- Heading Font: [Google Font URL or name]
+- Body Font: [Google Font URL or name]
+- ⚠️ Warning: "Using Google Fonts may not be GDPR compliant"
+
+**Font Scale**
+- Slider: 0.8x - 1.2x (default: 1.0x)
+
+#### 3. Colors
+- Primary Color
+- Secondary Color
+- Accent Color
+- Text Color
+- Background Color
+
+---
+
+### Layout Settings (Appearance > [Component])
+
+#### Header Settings
+- **Layout**
+  - Style: Classic / Modern / Minimal / Centered
+  - Sticky: Yes / No
+  - Height: Compact / Normal / Tall
+  
+- **Elements**
+  - ☑ Show logo
+  - ☑ Show navigation menu
+  - ☑ Show search bar
+  - ☑ Show account link
+  - ☑ Show cart icon with count
+  - ☑ Show wishlist icon
+  
+- **Mobile**
+  - Menu style: Hamburger / Bottom nav / Slide-in
+  - Logo position: Left / Center
+
+#### Footer Settings
+- **Layout**
+  - Columns: 1 / 2 / 3 / 4
+  - Style: Simple / Detailed / Minimal
+  
+- **Elements**
+  - ☑ Show newsletter signup
+  - ☑ Show social media links
+  - ☑ Show payment icons
+  - ☑ Show copyright text
+  - ☑ Show footer menu
+  - ☑ Show contact info
+  
+- **Content**
+  - Copyright text: [text field]
+  - Social links: [repeater field]
+
+---
+
+### Page-Specific Settings (Appearance > [Page])
+
+Each page submenu has its own layout controls:
+
+#### Shop Page Settings
+- **Layout**
+  - Grid columns: 2 / 3 / 4
+  - Product card style: Card / Minimal / Overlay
+  - Image aspect ratio: Square / Portrait / Landscape
+  
+- **Elements**
+  - ☑ Show category filter
+  - ☑ Show search bar
+  - ☑ Show sort dropdown
+  - ☑ Show sale badges
+  - ☑ Show quick view
+  
+- **Add to Cart Button**
+  - Position: Below image / On hover overlay / Bottom of card
+  - Style: Solid / Outline / Text only
+  - Show icon: Yes / No
+
+#### Product Page Settings
+- **Layout**
+  - Image position: Left / Right / Top
+  - Gallery style: Thumbnails / Dots / Slider
+  - Sticky add to cart: Yes / No
+  
+- **Elements**
+  - ☑ Show breadcrumbs
+  - ☑ Show related products
+  - ☑ Show reviews
+  - ☑ Show share buttons
+  - ☑ Show product meta (SKU, categories, tags)
+
+#### Cart Page Settings
+- **Layout**
+  - Style: Full width / Boxed
+  - Summary position: Right / Bottom
+  
+- **Elements**
+  - ☑ Show product images
+  - ☑ Show continue shopping button
+  - ☑ Show coupon field
+  - ☑ Show shipping calculator
+
+#### Checkout Page Settings
+- **Layout**
+  - Style: Single column / Two columns
+  - Order summary: Sidebar / Collapsible / Always visible
+  
+- **Elements**
+  - ☑ Show order notes field
+  - ☑ Show coupon field
+  - ☑ Show shipping options
+  - ☑ Show payment icons
+
+#### Thank You Page Settings
+- **Elements**
+  - ☑ Show order details
+  - ☑ Show continue shopping button
+  - ☑ Show related products
+  - Custom message: [text field]
+
+#### My Account / Customer Portal Settings
+- **Layout**
+  - Navigation: Sidebar / Tabs / Dropdown
+  
+- **Elements**
+  - ☑ Show dashboard
+  - ☑ Show orders
+  - ☑ Show downloads
+  - ☑ Show addresses
+  - ☑ Show account details
+
+---
+
+## Benefits of This Approach
+
+✅ **Flexible**: Users control every aspect
+✅ **Simple**: No need to understand "themes"
+✅ **Scalable**: Easy to add new options
+✅ **GDPR-friendly**: Default to self-hosted fonts
+✅ **Page-specific**: Each page can have different settings
+✅ **No redundancy**: One source of truth per setting
+
+---
+
+## Implementation Plan
+
+1. ✅ Remove theme presets (Classic, Modern, Boutique, Launch)
+2. ✅ Create Global Settings component
+3. ✅ Create Page Settings components for each page
+4. ✅ Add font loading system with @font-face
+5. ✅ Create Tailwind plugin for dynamic typography
+6. ✅ Update Customer SPA to read settings from API
+7. ✅ Add settings API endpoints
+8. ✅ Test all combinations
+
+---
+
+## Settings API Structure
+
+```typescript
+interface WooNooWSettings {
+  spa_mode: 'disabled' | 'checkout_only' | 'full';
+  
+  typography: {
+    mode: 'predefined' | 'custom_google';
+    predefined_pair?: 'modern' | 'editorial' | 'friendly' | 'elegant';
+    custom?: {
+      heading: string; // Google Font name or URL
+      body: string;
+    };
+    scale: number; // 0.8 - 1.2
+  };
+  
+  colors: {
+    primary: string;
+    secondary: string;
+    accent: string;
+    text: string;
+    background: string;
+  };
+  
+  pages: {
+    shop: ShopPageSettings;
+    product: ProductPageSettings;
+    cart: CartPageSettings;
+    checkout: CheckoutPageSettings;
+    thankyou: ThankYouPageSettings;
+    account: AccountPageSettings;
+  };
+}
+```