WooNooW/STANDALONE_MODE_SUMMARY.md

WooNooW Standalone Mode - Complete Summary

📋 Overview

WooNooW now supports three distinct admin interface modes, providing flexibility for different workflows and use cases.

---

🎯 Three Admin Modes

1. Normal Mode (wp-admin)

• URL: /wp-admin/admin.php?page=woonoow
• Layout: WordPress admin sidebar + WooNooW SPA
• Settings Submenu: Hidden (use WooCommerce settings)
• Use Case: Traditional WordPress admin workflow

2. Fullscreen Mode

• Toggle: Fullscreen button in header
• Layout: WooNooW SPA only (no WordPress chrome)
• Settings Submenu: Hidden
• Use Case: Focus mode for order processing

3. Standalone Mode ✨ NEW

• URL: https://yoursite.com/admin
• Layout: Complete standalone application
• Settings Submenu: Visible with SPA settings pages
• Use Case: Quick daily access, mobile-friendly

---

🔐 Standalone Mode Features

Authentication

• Custom login page: /admin#/login
• WordPress integration: Uses native WordPress authentication
• Session persistence: Login state shared across all modes
• Logout: Dedicated logout button in header

Navigation

• "WordPress" button: Quick access to wp-admin
• Admin bar link: Access standalone from wp-admin
• Settings submenu: Full settings navigation (standalone only)

Settings Structure (Option A - Everyday Use)

Settings (Standalone Only)
├── WooNooW (plugin settings)
├── General (store settings) - SPA
├── Payments (gateways) - SPA
├── Shipping (zones, methods) - SPA
├── Products (inventory) - SPA
├── Tax (rates) - SPA
├── Accounts & Privacy - SPA
├── Emails (templates) - SPA
├── Advanced - Bridge to wp-admin
├── Integration - Bridge to wp-admin
├── Status - Bridge to wp-admin
└── Extensions - Bridge to wp-admin

Strategy: Focus on most-used settings in SPA, bridge to wp-admin for advanced features.

---

🔧 Technical Implementation

Backend Files

includes/Admin/StandaloneAdmin.php

• Handles /admin and /admin/ requests
• Renders standalone HTML template
• Localizes WNW_CONFIG with standaloneMode: true
• Provides authentication state and store settings

includes/Admin/Menu.php

• Added admin bar link to standalone mode
• Icon: dashicons-store
• Capability: manage_woocommerce

includes/Api/AuthController.php

• Login endpoint: POST /wp-json/woonoow/v1/auth/login
• Authentication sequence:
  1. wp_authenticate()
  2. wp_clear_auth_cookie()
  3. wp_set_current_user()
  4. wp_set_auth_cookie()
  5. do_action('wp_login')
• Ensures session persistence

Frontend Files

admin-spa/src/App.tsx

• AuthWrapper component handles authentication
• Login/logout flow with page reload
• "WordPress" button (standalone only)
• "Logout" button (standalone only)

admin-spa/src/routes/Login.tsx

• Custom login form
• Username/password authentication
• Page reload after login to pick up cookies/nonces

admin-spa/src/nav/tree.ts

• Dynamic settings submenu using getter
• Only shows in standalone mode:

get children() {
  const isStandalone = (window as any).WNW_CONFIG?.standaloneMode;
  if (!isStandalone) return [];
  return [ /* settings items */ ];
}

admin-spa/src/routes/Settings/

• index.tsx - WooNooW settings
• General.tsx - General settings placeholder
• Payments.tsx - Payment settings placeholder
• Shipping.tsx - Shipping settings placeholder

---

🔄 Mode Switching

From wp-admin to Standalone

1. Click "WooNooW" in admin bar
2. Opens /admin in same tab
3. Session persists

From Standalone to wp-admin

1. Click "WordPress" button in header
2. Opens /wp-admin in same tab
3. Session persists

To Fullscreen

• Click fullscreen toggle in any mode
• Maximizes workspace

---

🧪 Testing Checklist

Authentication

• Login via standalone works
• Session persists to wp-admin
• Logout from standalone works
• Logout from wp-admin affects standalone

Navigation

• "WordPress" button opens wp-admin
• Admin bar link opens standalone
• Settings submenu only shows in standalone
• Dashboard path is /dashboard

Settings

• WooNooW settings page loads
• General settings page loads
• Payments settings page loads
• Shipping settings page loads
• Bridge links work (Advanced, Integration, Status, Extensions)

---

📚 Documentation Updated

1. PROJECT_BRIEF.md - Updated Phase 4 description
2. PROGRESS_NOTE.md - Added complete standalone mode section
3. SPA_ADMIN_MENU_PLAN.md - Updated settings structure
4. PROJECT_SOP.md - Added Section 7: Admin Interface Modes
5. README.md - Added three modes overview
6. STANDALONE_MODE_SUMMARY.md - This document

---

🎯 Next Steps

Phase 1: Core Settings (Priority)

1. General Settings - Store address, currency, units
2. Payment Settings - Gateway list with enable/disable
3. Shipping Settings - Zones, methods, rates

Phase 2: Product & Customer Settings

4. Product Settings - Inventory, downloadable products
5. Tax Settings - Tax rates and classes
6. Accounts Settings - Registration, privacy options

Phase 3: Communication

7. Email Settings - Email templates and settings

Phase 4: Advanced (Keep in wp-admin)

• Advanced settings
• Integration settings
• System status
• Extensions

---

💡 Design Decisions

Why Settings Submenu Only in Standalone?

• Normal mode: Users have full WordPress admin access, use WooCommerce settings
• Fullscreen mode: Focus on tasks, not configuration
• Standalone mode: Complete app experience, needs settings access

Why Option A (Everyday Use)?

• ✅ Faster development - Focus on most-used features
• ✅ Better UX - Quick access to daily tasks
• ✅ Less maintenance - Don't duplicate everything
• ✅ Coexist with WooCommerce - Users can still access advanced settings
• ✅ Extensible - 3rd party plugins can hook into settings

Why Dynamic Getter for Settings?

• Evaluated at runtime, not module load time
• Ensures correct mode detection
• Clean implementation without conditionals everywhere

---

🔍 Key Files Reference

Backend

• includes/Admin/StandaloneAdmin.php - Standalone routing and rendering
• includes/Admin/Menu.php - Admin bar link
• includes/Api/AuthController.php - Login/logout endpoints

Frontend

• admin-spa/src/App.tsx - Main app, auth wrapper, header
• admin-spa/src/routes/Login.tsx - Login form
• admin-spa/src/nav/tree.ts - Navigation structure
• admin-spa/src/routes/Settings/ - Settings pages

---

Implementation Date: November 5, 2025
Status: ✅ Production Ready
Next Milestone: Implement General/Payments/Shipping settings pages