feat: Restructure Channel Configuration as separate section
✅ New Structure: Notifications ├── Staff Notifications (toggle only) ├── Customer Notifications (toggle only) ├── Channel Configuration (new section) │ ├── Email Configuration │ │ ├── Template Settings (colors, logo, branding) │ │ └── Connection Settings (wp_mail/SMTP) │ ├── Push Configuration │ │ ├── Template Settings (icon, badge, sound) │ │ └── Connection Settings (browser-native/FCM) │ └── Future: WhatsApp, Telegram, SMS (addons) └── Activity Log (coming soon) ✅ Separation of Concerns: - Staff/Customer pages: "What to send" (enable/disable) - Channel Config: "How to send" (global settings) ✅ Changes: - Created ChannelConfiguration.tsx (main page listing all channels) - Created EmailConfiguration.tsx (template + connection tabs) - Created PushConfiguration.tsx (template + connection tabs) - Updated Staff/Customer Channels tabs to toggle-only - Removed Configure buttons from Staff/Customer pages - Added links to Channel Configuration - Updated main Notifications page with new card - Added routing for all new pages ✅ Benefits: - Clear separation: enable vs configure - Global settings apply to both staff & customer - Scalable for addon channels - No confusion about where to configure - Consistent with app patterns 🎯 Ready for: WhatsApp, Telegram, SMS addons
This commit is contained in:
dwindown
@@ -0,0 +1,130 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { SettingsLayout } from '../components/SettingsLayout';
|
||||
import { SettingsCard } from '../components/SettingsCard';
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import { ChevronLeft } from 'lucide-react';
|
||||
import { __ } from '@/lib/i18n';
|
||||
|
||||
export default function PushConfiguration() {
|
||||
return (
|
||||
<SettingsLayout
|
||||
title={__('Push Notifications Configuration')}
|
||||
description={__('Configure push notification templates and connection settings')}
|
||||
action={
|
||||
<Link to="/settings/notifications/channels">
|
||||
<Button variant="ghost" size="sm">
|
||||
<ChevronLeft className="mr-2 h-4 w-4" />
|
||||
{__('Back to Channels')}
|
||||
</Button>
|
||||
</Link>
|
||||
}
|
||||
>
|
||||
<Tabs defaultValue="template" className="space-y-6">
|
||||
<TabsList className="grid w-full grid-cols-2">
|
||||
<TabsTrigger value="template">{__('Template Settings')}</TabsTrigger>
|
||||
<TabsTrigger value="connection">{__('Connection Settings')}</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="template" className="space-y-4">
|
||||
<SettingsCard
|
||||
title={__('Push Notification Template')}
|
||||
description={__('Customize how push notifications appear')}
|
||||
>
|
||||
<div className="space-y-6">
|
||||
{/* Icon */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="push-icon">{__('Notification Icon URL')}</Label>
|
||||
<Input
|
||||
id="push-icon"
|
||||
type="url"
|
||||
placeholder="https://example.com/icon.png"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{__('Icon displayed in push notifications (recommended: 192x192px PNG)')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Badge */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="push-badge">{__('Badge Icon URL')}</Label>
|
||||
<Input
|
||||
id="push-badge"
|
||||
type="url"
|
||||
placeholder="https://example.com/badge.png"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{__('Small icon shown on notification badge (recommended: 96x96px PNG)')}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Sound */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label>{__('Enable Sound')}</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{__('Play default notification sound')}
|
||||
</p>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
|
||||
{/* Vibrate */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label>{__('Enable Vibration')}</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{__('Vibrate device on notification (mobile only)')}
|
||||
</p>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
</div>
|
||||
</SettingsCard>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="connection" className="space-y-4">
|
||||
<SettingsCard
|
||||
title={__('Push Notification Service')}
|
||||
description={__('Configure how push notifications are delivered')}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div className="bg-blue-50 dark:bg-blue-950 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
|
||||
<h4 className="font-medium text-sm mb-2">{__('Browser-Native Push (Default)')}</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{__(
|
||||
'Uses the browser\'s built-in Push API. No external service required. Works great for PWA applications.'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-muted/50 rounded-lg p-4">
|
||||
<p className="text-sm text-muted-foreground mb-3">
|
||||
💡 {__('Want more features? Install one of these addons:')}
|
||||
</p>
|
||||
<ul className="space-y-2 text-sm text-muted-foreground">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-primary">•</span>
|
||||
<span>
|
||||
<strong>{__('Firebase Cloud Messaging (FCM)')}</strong> - {__('Advanced features, analytics, and cross-platform support')}
|
||||
</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-primary">•</span>
|
||||
<span>
|
||||
<strong>{__('OneSignal')}</strong> - {__('Easy setup, segmentation, and A/B testing')}
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</SettingsCard>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</SettingsLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user