## 1. Apply Logo to Standalone Login Screen ✅ **Issue:** Login page shows "WooNooW" text instead of brand logo **Fix:** - Fetch branding from `/store/settings` API - Display logo image if available - Fallback to store name text - Show tagline below logo - Use store name in footer **Result:** ```tsx {branding.logo ? ( <img src={branding.logo} alt={storeName} className="h-16" /> ) : ( <h1>{branding.storeName}</h1> )} {branding.tagline && <p>{branding.tagline}</p>} ``` --- ## 2. Fix Submenu Display Issue ✅ **Issue:** - Click Settings → redirects to Store Details ✓ - Settings submenu shows correctly ✓ - Click other settings pages → Dashboard submenu appears ✗ **Root Cause:** `useActiveSection` hook didn't recognize `/settings` path **Fix:** ```tsx // Special case: /settings should match settings section if (pathname === '/settings' || pathname.startsWith('/settings/')) { const settingsNode = navTree.find(n => n.key === 'settings'); if (settingsNode) return settingsNode; } ``` **Result:** Settings submenu now displays correctly on all settings pages --- ## 3. Apply Favicon in Standalone ✅ **Issue:** Favicon not showing in standalone mode (/admin) **Root Cause:** Standalone doesn't call `wp_head()`, so Branding class hooks don't run **Fix:** Added favicon directly to StandaloneAdmin.php ```php $icon = get_option('woonoow_store_icon', ''); if (!empty($icon)) { echo '<link rel="icon" href="' . esc_url($icon) . '">' echo '<link rel="apple-touch-icon" href="' . esc_url($icon) . '">' } ``` **Also:** Changed title to use store name dynamically --- ## 4. Notification Settings Strategy ✅ **Your Concern:** "We should not be optimistic the notification media is only email" **Agreed!** Created comprehensive strategy document: `NOTIFICATION_STRATEGY.md` ### Architecture: **Core (WooNooW):** - Notification events system - Email channel (built-in) - Addon integration framework - Settings UI with addon slots **Addons:** - WhatsApp - Telegram - SMS - Discord - Slack - Push notifications - etc. ### Settings Structure: ``` Notifications ├── Events (What to notify) │ ├── Order Placed │ │ ├── ✓ Email (to admin) │ │ ├── ✓ WhatsApp (to customer) [addon] │ │ └── ✗ Telegram [addon] │ └── Low Stock Alert │ ├── Channels (How to notify) │ ├── Email (Built-in) ✓ │ ├── WhatsApp [Addon] │ ├── Telegram [Addon] │ └── SMS [Addon] │ └── Templates ├── Email Templates └── Channel Templates [per addon] ``` ### Integration Points: ```php // Register channel add_filter('woonoow_notification_channels', function($channels) { $channels['whatsapp'] = [ 'id' => 'whatsapp', 'label' => 'WhatsApp', 'icon' => 'message-circle', ]; return $channels; }); // Send notification add_action('woonoow_notification_send_whatsapp', function($event, $data) { // Send WhatsApp message }, 10, 2); ``` ### Benefits: - ✅ Extensible (any channel via addons) - ✅ Flexible (multiple channels per event) - ✅ No bloat (core = email only) - ✅ Revenue opportunity (premium addons) - ✅ Community friendly (free addons welcome) --- ## Summary ✅ Login screen shows brand logo + tagline ✅ Settings submenu displays correctly ✅ Favicon works in standalone mode ✅ Notification strategy documented (addon-based) **Key Decision:** Notifications = Framework + Email core, everything else via addons **Ready to implement notification system!**
7.5 KiB
7.5 KiB
WooNooW Notification Strategy
Philosophy
Core Principle: WooNooW provides the notification framework and email as the default channel. Additional channels (WhatsApp, Telegram, SMS, etc.) are provided by addons.
Architecture
Core (WooNooW Plugin)
Provides:
-
Notification Events System
- Order placed
- Order status changed
- Low stock alert
- New customer registered
- etc.
-
Email Channel (Built-in)
- Default notification channel
- Always available
- Template system
- Queue system for bulk sending
-
Notification Settings UI
- Enable/disable notifications per event
- Configure which channels to use per event
- Template editor (for email)
- Channel-specific settings (provided by addons)
-
Addon Integration Points
woonoow_notification_channelsfilter - Register new channelswoonoow_notification_send_{channel}action - Send via channelwoonoow_notification_settings_{channel}filter - Channel settings UIwoonoow_notification_template_{channel}filter - Channel templates
Settings Page Structure
Notifications
├── Events (What to notify)
│ ├── Orders
│ │ ├── Order Placed
│ │ │ ├── ✓ Email (to admin)
│ │ │ ├── ✓ WhatsApp (to customer) [if addon active]
│ │ │ └── ✗ Telegram
│ │ ├── Order Completed
│ │ ├── Order Cancelled
│ │ └── Order Refunded
│ ├── Products
│ │ ├── Low Stock Alert
│ │ └── Out of Stock Alert
│ └── Customers
│ ├── New Customer
│ └── Customer Note Added
│
├── Channels (How to notify)
│ ├── Email (Built-in) ✓
│ │ ├── From Name
│ │ ├── From Email
│ │ ├── SMTP Settings (optional)
│ │ └── Templates
│ ├── WhatsApp [Addon]
│ │ ├── API Key
│ │ ├── Phone Number
│ │ └── Message Templates
│ ├── Telegram [Addon]
│ │ ├── Bot Token
│ │ ├── Chat ID
│ │ └── Message Format
│ └── SMS [Addon]
│ ├── Provider (Twilio, etc.)
│ ├── API Credentials
│ └── Message Templates
│
└── Templates
├── Email Templates
├── WhatsApp Templates [if addon active]
└── Telegram Templates [if addon active]
Implementation
1. Core Notification System
// includes/Core/Notifications/NotificationManager.php
class NotificationManager {
private $channels = [];
public function register_channel($id, $label, $callback) {
$this->channels[$id] = [
'label' => $label,
'callback' => $callback,
];
}
public function send($event, $data, $channels = ['email']) {
foreach ($channels as $channel) {
if (isset($this->channels[$channel])) {
call_user_func($this->channels[$channel]['callback'], $event, $data);
}
}
}
}
2. Email Channel (Built-in)
// includes/Core/Notifications/Channels/EmailChannel.php
class EmailChannel {
public static function init() {
add_filter('woonoow_notification_channels', [__CLASS__, 'register']);
add_action('woonoow_notification_send_email', [__CLASS__, 'send'], 10, 2);
}
public static function register($channels) {
$channels['email'] = [
'id' => 'email',
'label' => 'Email',
'icon' => 'mail',
'builtin' => true,
];
return $channels;
}
public static function send($event, $data) {
// Send email using WooNooW mail queue
}
}
3. Addon Example: WhatsApp Channel
// woonoow-whatsapp/includes/WhatsAppChannel.php
class WhatsAppChannel {
public static function init() {
add_filter('woonoow_notification_channels', [__CLASS__, 'register']);
add_action('woonoow_notification_send_whatsapp', [__CLASS__, 'send'], 10, 2);
add_filter('woonoow_notification_settings_whatsapp', [__CLASS__, 'settings']);
}
public static function register($channels) {
$channels['whatsapp'] = [
'id' => 'whatsapp',
'label' => 'WhatsApp',
'icon' => 'message-circle',
'addon' => 'woonoow-whatsapp',
];
return $channels;
}
public static function send($event, $data) {
// Send WhatsApp message via API
}
public static function settings() {
return [
'api_key' => get_option('woonoow_whatsapp_api_key'),
'phone_number' => get_option('woonoow_whatsapp_phone'),
];
}
}
Frontend (React SPA)
Notifications Settings Page
// admin-spa/src/routes/Settings/Notifications.tsx
interface NotificationChannel {
id: string;
label: string;
icon: string;
builtin?: boolean;
addon?: string;
enabled: boolean;
}
interface NotificationEvent {
id: string;
label: string;
description: string;
category: 'orders' | 'products' | 'customers';
channels: {
[channelId: string]: {
enabled: boolean;
recipient: 'admin' | 'customer' | 'both';
};
};
}
export default function NotificationsPage() {
// Fetch available channels (core + addons)
const { data: channels } = useQuery({
queryKey: ['notification-channels'],
queryFn: () => api.get('/notifications/channels'),
});
// Fetch notification events configuration
const { data: events } = useQuery({
queryKey: ['notification-events'],
queryFn: () => api.get('/notifications/events'),
});
return (
<SettingsLayout title="Notifications">
{/* Available Channels */}
<SettingsCard title="Notification Channels">
{channels?.map(channel => (
<ChannelCard key={channel.id} channel={channel} />
))}
</SettingsCard>
{/* Events Configuration */}
<SettingsCard title="Order Notifications">
{events?.filter(e => e.category === 'orders').map(event => (
<EventCard
key={event.id}
event={event}
channels={channels}
/>
))}
</SettingsCard>
{/* More categories... */}
</SettingsLayout>
);
}
Benefits
- Extensible: Addons can add any notification channel
- Flexible: Each event can use multiple channels
- User-Friendly: Clear UI showing what's available
- No Bloat: Core only includes email
- Addon Revenue: Premium channels (WhatsApp, SMS) can be paid addons
Example Addons
Free Addons
- WooNooW Telegram - Send notifications via Telegram bot
- WooNooW Discord - Send notifications to Discord channel
Premium Addons
- WooNooW WhatsApp Pro - WhatsApp Business API integration
- WooNooW SMS - SMS notifications via Twilio/Nexmo
- WooNooW Push - Browser push notifications
- WooNooW Slack - Team notifications via Slack
Migration Path
Phase 1 (Current):
- Build notification framework
- Implement email channel
- Create settings UI with addon slots
Phase 2:
- Build first addon (Telegram) as proof of concept
- Document addon API
- Create addon template
Phase 3:
- Build premium addons (WhatsApp, SMS)
- Marketplace listing
- Community addons
Key Takeaway
WooNooW Core = Framework + Email Everything Else = Addons
This keeps the core lean while providing unlimited extensibility for notification channels.