diff --git a/PROJECT_BRIEF.md b/PROJECT_BRIEF.md index 072ae52..217f9ac 100644 --- a/PROJECT_BRIEF.md +++ b/PROJECT_BRIEF.md @@ -82,8 +82,119 @@ WooNooW settings act as a **"better wardrobe"** for WooCommerce configuration: --- -## 6. Strategic Goal +## 6. Community Addon Support Strategy + +WooNooW leverages the irreplaceable strength of the WooCommerce ecosystem through a three-tier support model: + +### **Tier A: Automatic Integration** βœ… +**Addons that respect WooCommerce bone structure work automatically.** + +- Payment gateways extending `WC_Payment_Gateway` +- Shipping methods extending `WC_Shipping_Method` +- Plugins using WooCommerce hooks and filters +- HPOS-compatible plugins + +**Examples:** +- Stripe for WooCommerce +- WooCommerce Subscriptions +- WooCommerce Bookings +- Any plugin following WooCommerce standards + +**Result:** Zero configuration needed. If it works in WooCommerce, it works in WooNooW. + +--- + +### **Tier B: Bridge Snippets** πŸŒ‰ +**For addons with custom injection that partially or fully don't integrate.** + +We provide bridge snippet code to help users connect non-standard addons: + +**Use Cases:** +- Addons that inject custom fields via JavaScript +- Addons that bypass WooCommerce hooks +- Addons with custom session management (e.g., Rajaongkir) +- Addons with proprietary UI injection + +**Approach:** +```php +// Bridge snippet example +add_filter('woonoow_before_shipping_calculate', function($data) { + // Convert WooNooW data to addon format + if ($data['country'] === 'ID') { + CustomAddon::set_session_data($data); + } + return $data; +}); +``` + +**Distribution:** +- Documentation with code snippets +- Community-contributed bridges +- Optional bridge plugin packages + +**Philosophy:** We help users leverage ALL WooCommerce addons, not rebuild them. + +--- + +### **Tier C: Essential WooNooW Addons** ⚑ +**We build our own addons only for critical/essential features.** + +**Criteria for building:** +- βœ… Essential for store operations +- βœ… Significantly enhances WooCommerce +- βœ… Provides unique value in WooNooW context +- βœ… Cannot be adequately bridged + +**Examples:** +- WooNooW Indonesia Shipping (Rajaongkir, Biteship integration) +- WooNooW Advanced Reports +- WooNooW Inventory Management +- WooNooW Multi-Currency + +**NOT building:** +- Generic features already available in WooCommerce ecosystem +- Features that can be bridged +- Niche functionality with low demand + +**Goal:** Save energy, focus on core experience, leverage community strength. + +--- + +### **Why This Approach?** + +**Leverage WooCommerce Ecosystem:** +- 10,000+ plugins available +- Proven, tested solutions +- Active community support +- Regular updates and maintenance + +**Avoid Rebuilding Everything:** +- Save development time +- Focus on core WooNooW experience +- Let specialists maintain their domains +- Reduce maintenance burden + +**Provide Flexibility:** +- Users choose their preferred addons +- Bridge pattern for edge cases +- Essential addons for critical needs +- No vendor lock-in + +**Community Strength:** +> "We use WooCommerce, not PremiumNooW as WooCommerce Alternative. We must take the irreplaceable strength of the WooCommerce community." + +--- + +## 7. Strategic Goal Position WooNooW as the **"WooCommerce for Now"** β€” a paid addon that delivers the speed and UX of modern SaaS platforms while retaining the ecosystem power and self‑hosted freedom of WooCommerce. +**Key Differentiators:** +- ⚑ Lightning-fast performance +- 🎨 Modern, intuitive UI +- πŸ”Œ Full WooCommerce ecosystem compatibility +- πŸŒ‰ Bridge support for any addon +- βš™οΈ Essential addons for critical features +- πŸš€ No data migration needed + --- \ No newline at end of file diff --git a/SETTINGS_PAGES_PLAN.md b/SETTINGS_PAGES_PLAN.md new file mode 100644 index 0000000..0cd6189 --- /dev/null +++ b/SETTINGS_PAGES_PLAN.md @@ -0,0 +1,578 @@ +# Settings Pages Implementation Plan + +## Overview + +Build 4 missing settings pages to complete WooNooW Settings: +1. **WooNooW** - Main settings/preferences +2. **Checkout** - Checkout page configuration +3. **Customer Accounts** - Account creation and management +4. **Brand & Appearance** - Store branding and customization + +--- + +## 1. WooNooW Settings Page + +**File:** `admin-spa/src/routes/Settings/index.tsx` + +**Purpose:** Main WooNooW plugin settings and preferences + +### Sections: + +#### A. General Settings +```tsx +- Plugin Version: 1.0.0 (read-only) +- Enable SPA Mode: [Toggle] (default: ON) +- Admin Theme: [Select: Light | Dark | Auto] +- Items per page: [Number: 20] +``` + +#### B. Performance +```tsx +- Enable caching: [Toggle] (default: ON) +- Cache duration: [Number: 3600] seconds +- Preload data: [Toggle] (default: ON) +``` + +#### C. Features +```tsx +- Enable quick edit: [Toggle] (default: ON) +- Enable bulk actions: [Toggle] (default: ON) +- Enable keyboard shortcuts: [Toggle] (default: ON) +- Enable auto-save: [Toggle] (default: ON) +``` + +#### D. Developer +```tsx +- Debug mode: [Toggle] (default: OFF) +- Show API logs: [Toggle] (default: OFF) +- Enable React DevTools: [Toggle] (default: OFF) +``` + +### API Endpoints: + +```php +// GET /woonoow/v1/settings +// POST /woonoow/v1/settings + +// Options stored: +- woonoow_enable_spa +- woonoow_admin_theme +- woonoow_items_per_page +- woonoow_enable_caching +- woonoow_cache_duration +- woonoow_enable_quick_edit +- woonoow_enable_bulk_actions +- woonoow_enable_shortcuts +- woonoow_enable_autosave +- woonoow_debug_mode +``` + +### Implementation: + +```tsx +// admin-spa/src/routes/Settings/index.tsx + +import { SettingsLayout } from './components/SettingsLayout'; +import { SettingsSection } from './components/SettingsSection'; +import { ToggleField } from './components/ToggleField'; + +export default function WooNooWSettings() { + const [settings, setSettings] = useState({ + enable_spa: true, + admin_theme: 'auto', + items_per_page: 20, + enable_caching: true, + // ... + }); + + return ( + + + setSettings({ ...settings, enable_spa: checked })} + /> + + setSettings({ ...settings, admin_theme: value })} + /> + + + + {/* ... */} + + + + {/* ... */} + + + ); +} +``` + +--- + +## 2. Checkout Settings Page + +**File:** `admin-spa/src/routes/Settings/Checkout.tsx` + +**Purpose:** Configure checkout page behavior and options + +### Sections: + +#### A. Checkout Options +```tsx +- Enable guest checkout: [Toggle] +- Require account creation: [Toggle] +- Allow customers to create account during checkout: [Toggle] +- Allow customers to login during checkout: [Toggle] +``` + +#### B. Checkout Fields +```tsx +- Company name: [Select: Required | Optional | Hidden] +- Address line 2: [Select: Required | Optional | Hidden] +- Phone: [Select: Required | Optional | Hidden] +- Order notes: [Toggle] Enable order notes +``` + +#### C. Terms & Conditions +```tsx +- Enable terms and conditions: [Toggle] +- Terms page: [Page Select] +- Privacy policy page: [Page Select] +``` + +#### D. Order Processing +```tsx +- Default order status: [Select: Pending | Processing | On Hold] +- Auto-complete virtual orders: [Toggle] +- Auto-complete downloadable orders: [Toggle] +``` + +### API Endpoints: + +```php +// GET /woonoow/v1/settings/checkout +// POST /woonoow/v1/settings/checkout + +// WooCommerce options: +- woocommerce_enable_guest_checkout +- woocommerce_enable_signup_and_login_from_checkout +- woocommerce_enable_checkout_login_reminder +- woocommerce_checkout_company_field +- woocommerce_checkout_address_2_field +- woocommerce_checkout_phone_field +- woocommerce_enable_order_notes_field +- woocommerce_terms_page_id +- woocommerce_privacy_policy_page_id +``` + +### Implementation: + +```tsx +// admin-spa/src/routes/Settings/Checkout.tsx + +export default function CheckoutSettings() { + const { data: settings, isLoading } = useQuery({ + queryKey: ['settings', 'checkout'], + queryFn: () => api.get('/settings/checkout'), + }); + + const mutation = useMutation({ + mutationFn: (data) => api.post('/settings/checkout', data), + onSuccess: () => { + toast.success('Checkout settings saved'); + }, + }); + + return ( + + + { + mutation.mutate({ ...settings, enable_guest_checkout: checked }); + }} + /> + {/* ... */} + + + + + {/* ... */} + + + ); +} +``` + +--- + +## 3. Customer Accounts Settings Page + +**File:** `admin-spa/src/routes/Settings/Customers.tsx` + +**Purpose:** Configure customer account creation and management + +### Sections: + +#### A. Account Creation +```tsx +- Allow customers to create account on "My Account" page: [Toggle] +- Allow customers to create account during checkout: [Toggle] +- Automatically generate username from email: [Toggle] +- Automatically generate password: [Toggle] +``` + +#### B. Account Security +```tsx +- Require strong passwords: [Toggle] +- Minimum password length: [Number: 8] +- Enable two-factor authentication: [Toggle] +``` + +#### C. Privacy +```tsx +- Privacy policy page: [Page Select] +- Remove personal data on request: [Toggle] +- Allow personal data export: [Toggle] +- Personal data retention: [Number: 365] days +``` + +#### D. Account Dashboard +```tsx +- Enable account dashboard: [Toggle] +- Show recent orders: [Toggle] +- Show downloads: [Toggle] +- Show addresses: [Toggle] +- Show account details: [Toggle] +``` + +### API Endpoints: + +```php +// GET /woonoow/v1/settings/customers +// POST /woonoow/v1/settings/customers + +// WooCommerce options: +- woocommerce_enable_myaccount_registration +- woocommerce_enable_signup_and_login_from_checkout +- woocommerce_registration_generate_username +- woocommerce_registration_generate_password +- woocommerce_privacy_policy_page_id +``` + +### Implementation: + +```tsx +// admin-spa/src/routes/Settings/Customers.tsx + +export default function CustomerAccountsSettings() { + return ( + + + + + + + + + + + + + + + + + + + + + + ); +} +``` + +--- + +## 4. Brand & Appearance Settings Page + +**File:** `admin-spa/src/routes/Settings/Brand.tsx` + +**Purpose:** Customize store branding and visual appearance + +### Sections: + +#### A. Store Identity +```tsx +- Store logo: [Image Upload] +- Store icon/favicon: [Image Upload] +- Store tagline: [Text Input] +``` + +#### B. Brand Colors +```tsx +- Primary color: [Color Picker: #3b82f6] +- Secondary color: [Color Picker: #8b5cf6] +- Accent color: [Color Picker: #10b981] +- Success color: [Color Picker: #22c55e] +- Warning color: [Color Picker: #f59e0b] +- Error color: [Color Picker: #ef4444] +``` + +#### C. Typography +```tsx +- Heading font: [Font Select: Inter, Roboto, etc.] +- Body font: [Font Select: Inter, Roboto, etc.] +- Font size: [Select: Small | Medium | Large] +``` + +#### D. Admin UI +```tsx +- Sidebar position: [Select: Left | Right] +- Sidebar collapsed by default: [Toggle] +- Show breadcrumbs: [Toggle] +- Compact mode: [Toggle] +``` + +#### E. Custom CSS +```tsx +- Custom CSS: [Code Editor] +``` + +### API Endpoints: + +```php +// GET /woonoow/v1/settings/brand +// POST /woonoow/v1/settings/brand + +// Custom options: +- woonoow_store_logo +- woonoow_store_icon +- woonoow_store_tagline +- woonoow_primary_color +- woonoow_secondary_color +- woonoow_accent_color +- woonoow_heading_font +- woonoow_body_font +- woonoow_font_size +- woonoow_sidebar_position +- woonoow_sidebar_collapsed +- woonoow_custom_css +``` + +### Implementation: + +```tsx +// admin-spa/src/routes/Settings/Brand.tsx + +export default function BrandAppearanceSettings() { + return ( + + + updateSetting('store_logo', url)} + /> + + updateSetting('store_icon', url)} + /> + + updateSetting('store_tagline', value)} + /> + + + +
+ updateSetting('primary_color', color)} + /> + + updateSetting('secondary_color', color)} + /> + + updateSetting('accent_color', color)} + /> +
+ + + + + + + + updateSetting('custom_css', code)} + /> + + + ); +} +``` + +--- + +## Implementation Steps + +### Phase 1: Create Components (Week 1) +1. Create `ColorPickerField.tsx` +2. Create `ImageUploadField.tsx` +3. Create `CodeEditorField.tsx` +4. Create `PageSelectField.tsx` +5. Create `NumberField.tsx` + +### Phase 2: Backend API (Week 1) +1. Create `SettingsController.php` +2. Add endpoints for each settings page +3. Add validation and sanitization +4. Test API endpoints + +### Phase 3: Frontend Pages (Week 2) +1. Build WooNooW settings page +2. Build Checkout settings page +3. Build Customer Accounts settings page +4. Build Brand & Appearance settings page + +### Phase 4: Integration (Week 2) +1. Connect frontend to API +2. Add loading states +3. Add error handling +4. Add success notifications +5. Test all settings + +### Phase 5: Polish (Week 3) +1. Add help text and tooltips +2. Add preview for brand colors +3. Add validation messages +4. Add keyboard shortcuts +5. Final testing + +--- + +## File Structure + +``` +admin-spa/src/routes/Settings/ +β”œβ”€β”€ index.tsx (WooNooW Settings) βœ… Update +β”œβ”€β”€ Checkout.tsx (NEW) +β”œβ”€β”€ Customers.tsx (NEW) +β”œβ”€β”€ Brand.tsx (NEW) +β”œβ”€β”€ Store.tsx (Existing βœ…) +β”œβ”€β”€ Payments.tsx (Existing βœ…) +β”œβ”€β”€ Shipping.tsx (Existing βœ…) +β”œβ”€β”€ Tax.tsx (Existing βœ…) +β”œβ”€β”€ Notifications.tsx (Existing βœ…) +└── components/ + β”œβ”€β”€ SettingsLayout.tsx (Existing βœ…) + β”œβ”€β”€ SettingsSection.tsx (Existing βœ…) + β”œβ”€β”€ SettingsCard.tsx (Existing βœ…) + β”œβ”€β”€ ToggleField.tsx (Existing βœ…) + β”œβ”€β”€ ColorPickerField.tsx (NEW) + β”œβ”€β”€ ImageUploadField.tsx (NEW) + β”œβ”€β”€ CodeEditorField.tsx (NEW) + β”œβ”€β”€ PageSelectField.tsx (NEW) + └── NumberField.tsx (NEW) +``` + +``` +includes/Api/ +β”œβ”€β”€ SettingsController.php (NEW) +└── OrdersController.php (Existing βœ…) +``` + +--- + +## Priority + +1. **High Priority:** WooNooW Settings, Checkout Settings +2. **Medium Priority:** Customer Accounts Settings +3. **Low Priority:** Brand & Appearance Settings + +--- + +## Estimated Timeline + +- **Week 1:** Components + Backend API +- **Week 2:** Frontend Pages + Integration +- **Week 3:** Polish + Testing + +**Total: 3 weeks** diff --git a/admin-spa/src/nav/tree.ts b/admin-spa/src/nav/tree.ts index 58c59b0..429aa09 100644 --- a/admin-spa/src/nav/tree.ts +++ b/admin-spa/src/nav/tree.ts @@ -116,12 +116,6 @@ function getStaticFallbackTree(): MainNode[] { { label: 'Customer Accounts', mode: 'spa' as const, path: '/settings/customers' }, { label: 'Notifications', mode: 'spa' as const, path: '/settings/notifications' }, { label: 'Brand & Appearance', mode: 'spa' as const, path: '/settings/brand' }, - - // Advanced (Bridge to WP Admin) - { label: 'Advanced', mode: 'bridge' as const, href: `${admin}?page=wc-settings&tab=advanced` }, - { label: 'Integrations', mode: 'bridge' as const, href: `${admin}?page=wc-settings&tab=integration` }, - { label: 'System Status', mode: 'bridge' as const, href: `${admin}?page=wc-status` }, - { label: 'Extensions', mode: 'bridge' as const, href: `${admin}?page=wc-addons` }, ], }, ];