hey-pharmacist-ecommerce 1.1.29 → 1.1.31

package/src/screens/NotificationSettingsScreen.tsx

@@ -0,0 +1,413 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { ChevronDown, ChevronRight, Loader2, Bell, Shield, CreditCard, Package, Settings, Zap } from 'lucide-react';
+import { useNotificationCenter } from '@/providers/NotificationCenterProvider';
+import { NotificationType, PreferenceUpdateItemTypeEnum } from '@/providers/NotificationCenterProvider';
+import { motion, AnimatePresence } from 'framer-motion';
+import { Button } from '@/components/ui/Button';
+
+interface NotificationCategory {
+    name: string;
+    icon: React.ElementType;
+    types: Array<{
+        type: NotificationType;
+        label: string;
+        description: string;
+        isComingSoon?: boolean;
+    }>;
+}
+
+const NOTIFICATION_CATEGORIES: NotificationCategory[] = [
+    {
+        name: 'Order Updates',
+        icon: Package,
+        types: [
+            {
+                type: PreferenceUpdateItemTypeEnum.ORDERCONFIRMATION,
+                label: 'Order Confirmed',
+                description: 'Get notified when your order is confirmed',
+            },
+            {
+                type: PreferenceUpdateItemTypeEnum.ORDERSHIPPED,
+                label: 'Order Shipped',
+                description: 'Track your order when it ships',
+            },
+            {
+                type: PreferenceUpdateItemTypeEnum.ORDERDELIVERED,
+                label: 'Order Delivered',
+                description: 'Know when your order arrives',
+            },
+        ],
+    },
+    {
+        name: 'Payments',
+        icon: CreditCard,
+        types: [
+            {
+                type: PreferenceUpdateItemTypeEnum.PAYMENTFAILED,
+                label: 'Payment Failed',
+                description: 'Alert when a payment fails',
+            },
+            {
+                type: PreferenceUpdateItemTypeEnum.REFUNDPROCESSED,
+                label: 'Refund Processed',
+                description: 'Confirmation when refunds are issued',
+            },
+        ],
+    },
+    {
+        name: 'Security',
+        icon: Shield,
+        types: [
+            {
+                type: PreferenceUpdateItemTypeEnum.PASSWORDRESET,
+                label: 'Password Reset',
+                description: 'Security alerts for password changes',
+            },
+            {
+                type: PreferenceUpdateItemTypeEnum.NEWDEVICELOGIN,
+                label: 'New Device Login',
+                description: 'Alert when logging in from a new device',
+                isComingSoon: true,
+            },
+            {
+                type: PreferenceUpdateItemTypeEnum.TWOFACODE,
+                label: 'Two-Factor Authentication',
+                description: 'Receive 2FA codes',
+                isComingSoon: true,
+            },
+        ],
+    },
+    {
+        name: 'Marketing',
+        icon: Bell,
+        types: [
+            {
+                type: PreferenceUpdateItemTypeEnum.ABANDONEDCARTREMINDER,
+                label: 'Abandoned Cart',
+                description: 'Reminders for items left in cart',
+                isComingSoon: true,
+            },
+            {
+                type: PreferenceUpdateItemTypeEnum.PRICEDROPALERT,
+                label: 'Price Drop Alert',
+                description: 'Notify when prices drop on saved items',
+                isComingSoon: true,
+            },
+            {
+                type: PreferenceUpdateItemTypeEnum.BACKINSTOCK,
+                label: 'Back in Stock',
+                description: 'Alert when out-of-stock items return',
+                isComingSoon: true,
+            },
+        ],
+    },
+];
+
+export function NotificationSettingsScreen() {
+    const { settings, updateSettings, isLoading } = useNotificationCenter();
+    const [localSettings, setLocalSettings] = useState(settings);
+    const [expandedCategories, setExpandedCategories] = useState<Set<string>>(
+        new Set(NOTIFICATION_CATEGORIES.map(cat => cat.name))
+    );
+    const [isSaving, setIsSaving] = useState(false);
+    const [hasChanges, setHasChanges] = useState(false);
+
+    useEffect(() => {
+        console.log('NotificationSettingsScreen: settings updated:', settings);
+        if (settings) {
+            setLocalSettings(settings);
+        }
+    }, [settings]);
+
+    const toggleCategory = (categoryName: string) => {
+        setExpandedCategories(prev => {
+            const next = new Set(prev);
+            if (next.has(categoryName)) {
+                next.delete(categoryName);
+            } else {
+                next.add(categoryName);
+            }
+            return next;
+        });
+    };
+
+    const getChannelSetting = (type: NotificationType, channel: 'email' | 'push' | 'inApp'): boolean => {
+        const activeSettings = hasChanges ? localSettings : settings;
+        if (!activeSettings?.preferences || !Array.isArray(activeSettings.preferences)) {
+            return false;
+        }
+
+        const normalize = (s: any) => s?.toString().replace(/[^a-zA-Z0-9]/g, '').toUpperCase() || '';
+        const targetType = normalize(type);
+
+        const pref = activeSettings.preferences.find(p => normalize(p.type) === targetType);
+
+        if (!pref) return false;
+
+        // Handle potential boolean-like values from backend safely
+        const val = (pref.settings as any)?.[channel];
+        return val === true || val === 'true' || val === 1 || val === '1';
+    };
+
+    const updateChannelSetting = (type: NotificationType, channel: 'email' | 'push' | 'inApp', value: boolean) => {
+        setLocalSettings(prev => {
+            // If we're starting local changes, base them on the current provider settings
+            const currentSettings = prev || settings || { preferences: [] };
+            const currentPrefs = Array.isArray(currentSettings.preferences) ? currentSettings.preferences : [];
+            const preferences = [...currentPrefs];
+
+            const normalize = (s: any) => s?.toString().replace(/[^a-zA-Z0-9]/g, '').toUpperCase() || '';
+            const targetType = normalize(type);
+
+            const existingIndex = preferences.findIndex(p => normalize(p.type) === targetType);
+
+            if (existingIndex >= 0) {
+                preferences[existingIndex] = {
+                    ...preferences[existingIndex],
+                    settings: {
+                        ...preferences[existingIndex].settings,
+                        [channel]: value,
+                    },
+                };
+            } else {
+                preferences.push({
+                    type,
+                    settings: {
+                        email: channel === 'email' ? value : true,
+                        push: channel === 'push' ? value : true,
+                        inApp: channel === 'inApp' ? value : true,
+                    },
+                });
+            }
+
+            return { ...currentSettings, preferences };
+        });
+
+        setHasChanges(true);
+    };
+
+    const handleSave = async () => {
+        if (!localSettings) return;
+
+        setIsSaving(true);
+        try {
+            await updateSettings(localSettings);
+            setHasChanges(false);
+        } catch (error) {
+            console.error('Failed to save settings:', error);
+            alert('Failed to save settings. Please try again.');
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const disableAllChannel = (channel: 'email' | 'push') => {
+        setLocalSettings(prev => {
+            const currentSettings = prev || { preferences: [] };
+            const prefIsArray = Array.isArray(currentSettings.preferences);
+            const preferences = NOTIFICATION_CATEGORIES.flatMap(cat =>
+                cat.types.filter(t => !t.isComingSoon).map(t => t.type)
+            ).map(type => {
+                const existing = prefIsArray ? currentSettings.preferences.find(p => p.type === type) : undefined;
+                return {
+                    type,
+                    settings: {
+                        email: channel === 'email' ? false : (existing?.settings?.email ?? true),
+                        push: channel === 'push' ? false : (existing?.settings?.push ?? true),
+                        inApp: existing?.settings?.inApp ?? true,
+                    },
+                };
+            });
+
+            return { ...currentSettings, preferences };
+        });
+
+        setHasChanges(true);
+    };
+
+    if (isLoading && !settings) {
+        return (
+            <div className="flex flex-col items-center justify-center min-h-[400px] bg-linear-to-b from-[#F8FAFC] to-[#EBF4FB]">
+                <Loader2 className="w-10 h-10 text-primary animate-spin mb-4" />
+                <p className="text-muted font-medium">Loading preferences...</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="min-h-screen bg-linear-to-b from-[#F8FAFC] to-[#EBF4FB]">
+            {/* Header Area */}
+            <div className="container mx-auto px-4 py-8">
+                <div className="max-w-4xl mx-auto">
+                    <h1 className="text-2xl font-semibold text-secondary">Notification Preferences</h1>
+                    <p className="text-sm text-muted">
+                        Manage how you receive notifications for different events
+                    </p>
+                </div>
+            </div>
+
+            <div className="max-w-4xl mx-auto px-4 pb-32">
+
+
+                {/* Categories */}
+                <div className="space-y-4 mb-8">
+                    {NOTIFICATION_CATEGORIES.map((category) => (
+                        <div key={category.name} className="bg-white rounded-2xl border border-slate-200 shadow-xs overflow-hidden">
+                            {/* Category Header */}
+                            <button
+                                onClick={() => toggleCategory(category.name)}
+                                className="w-full flex items-center justify-between p-6 hover:bg-slate-50 transition-colors"
+                            >
+                                <div className="flex items-center gap-3">
+                                    <div className="p-2 bg-slate-100 rounded-lg group-hover:bg-white transition-colors">
+                                        <category.icon className="w-5 h-5 text-secondary" />
+                                    </div>
+                                    <h2 className="text-lg font-semibold text-secondary">{category.name}</h2>
+                                </div>
+                                {expandedCategories.has(category.name) ? (
+                                    <ChevronDown className="w-5 h-5 text-muted" />
+                                ) : (
+                                    <ChevronRight className="w-5 h-5 text-muted" />
+                                )}
+                            </button>
+
+                            <AnimatePresence>
+                                {expandedCategories.has(category.name) && (
+                                    <motion.div
+                                        initial={{ height: 0, opacity: 0 }}
+                                        animate={{ height: 'auto', opacity: 1 }}
+                                        exit={{ height: 0, opacity: 0 }}
+                                        transition={{ duration: 0.2 }}
+                                        className="border-t border-slate-100"
+                                    >
+                                        <div className="p-6 space-y-4">
+                                            {category.types.map((notifType) => (
+                                                <div
+                                                    key={notifType.type}
+                                                    className={`rounded-xl border border-slate-200 bg-slate-50 p-4 transition-all hover:bg-white hover:shadow-sm ${notifType.isComingSoon ? 'opacity-50 grayscale select-none' : ''}`}
+                                                >
+                                                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-6">
+                                                        <div className="flex-1">
+                                                            <div className="flex items-center gap-2">
+                                                                <h3 className="font-semibold text-secondary">{notifType.label}</h3>
+                                                                {notifType.isComingSoon && (
+                                                                    <span className="text-[10px] font-bold uppercase tracking-wider bg-slate-200 text-muted px-2 py-0.5 rounded-full">
+                                                                        Soon
+                                                                    </span>
+                                                                )}
+                                                            </div>
+                                                            <p className="text-xs text-muted mt-1 leading-relaxed">{notifType.description}</p>
+                                                        </div>
+
+                                                        {!notifType.isComingSoon && (
+                                                            <div className="flex items-center gap-6 sm:border-l sm:border-slate-200 sm:pl-6">
+                                                                {/* Email */}
+                                                                <label className="flex items-center gap-2 cursor-pointer group/label">
+                                                                    <input
+                                                                        type="checkbox"
+                                                                        checked={getChannelSetting(notifType.type, 'email')}
+                                                                        onChange={(e) =>
+                                                                            updateChannelSetting(notifType.type, 'email', e.target.checked)
+                                                                        }
+                                                                        className="w-4 h-4 text-primary border-slate-300 rounded-sm focus:ring-primary focus:ring-offset-0"
+                                                                    />
+                                                                    <span className="text-[10px] font-bold text-muted uppercase tracking-wider group-hover/label:text-primary transition-colors">Email</span>
+                                                                </label>
+
+                                                                {/* Push */}
+                                                                <label className="flex items-center gap-2 cursor-pointer group/label">
+                                                                    <input
+                                                                        type="checkbox"
+                                                                        checked={getChannelSetting(notifType.type, 'push')}
+                                                                        onChange={(e) =>
+                                                                            updateChannelSetting(notifType.type, 'push', e.target.checked)
+                                                                        }
+                                                                        className="w-4 h-4 text-primary border-slate-300 rounded-sm focus:ring-primary focus:ring-offset-0"
+                                                                    />
+                                                                    <span className="text-[10px] font-bold text-muted uppercase tracking-wider group-hover/label:text-primary transition-colors">Push</span>
+                                                                </label>
+
+                                                                {/* In-App */}
+                                                                <label className="flex items-center gap-2 cursor-pointer group/label">
+                                                                    <input
+                                                                        type="checkbox"
+                                                                        checked={getChannelSetting(notifType.type, 'inApp')}
+                                                                        onChange={(e) =>
+                                                                            updateChannelSetting(notifType.type, 'inApp', e.target.checked)
+                                                                        }
+                                                                        className="w-4 h-4 text-primary border-slate-300 rounded-sm focus:ring-primary focus:ring-offset-0"
+                                                                    />
+                                                                    <span className="text-[10px] font-bold text-muted uppercase tracking-wider group-hover/label:text-primary transition-colors">In-App</span>
+                                                                </label>
+                                                            </div>
+                                                        )}
+                                                    </div>
+                                                </div>
+                                            ))}
+                                        </div>
+                                    </motion.div>
+                                )}
+                            </AnimatePresence>
+                        </div>
+                    ))}
+                </div>
+
+                {/* Quick Actions */}
+                <div className="bg-white rounded-2xl p-6 border border-slate-200 mb-8 shadow-xs">
+                    <div className="flex items-center gap-2 mb-4">
+                        <Zap className="h-5 w-5 text-accent" />
+                        <h3 className="text-lg font-semibold text-secondary">Quick Actions</h3>
+                    </div>
+                    <div className="flex flex-wrap gap-3">
+                        <Button
+                            variant="outline-solid"
+                            size="sm"
+                            onClick={() => disableAllChannel('email')}
+                            className="rounded-xl border-slate-200 hover:bg-slate-50"
+                        >
+                            Disable All Emails
+                        </Button>
+                        <Button
+                            variant="outline-solid"
+                            size="sm"
+                            onClick={() => disableAllChannel('push')}
+                            className="rounded-xl border-slate-200 hover:bg-slate-50"
+                        >
+                            Disable All Push
+                        </Button>
+                    </div>
+                </div>
+
+                {/* Save Button */}
+                <AnimatePresence>
+                    {hasChanges && (
+                        <motion.div
+                            initial={{ opacity: 0, y: 100 }}
+                            animate={{ opacity: 1, y: 0 }}
+                            exit={{ opacity: 0, y: 100 }}
+                            className="fixed bottom-10 left-0 right-0 flex justify-center z-50 pointer-events-none"
+                        >
+                            <div className="pointer-events-auto px-6 py-4 bg-secondary shadow-lg rounded-3xl flex items-center gap-8 max-w-xl mx-auto transform hover:scale-[1.02] transition-all duration-300 ease-out border border-white/10">
+                                <div className="hidden sm:block">
+                                    <p className="text-sm font-bold text-white leading-tight tracking-wide italic">Changes Pending</p>
+                                    <p className="text-[11px] text-white/60 font-medium">Click to synchronize with account</p>
+                                </div>
+                                <Button
+                                    onClick={handleSave}
+                                    isLoading={isSaving}
+                                    disabled={isSaving}
+                                    variant="secondary"
+                                    className="px-8 py-3 bg-accent border-none text-white rounded-2xl font-bold text-xs uppercase tracking-widest hover:bg-accent-dark transition-all active:scale-95 shadow-lg shadow-accent/25 min-w-[180px]"
+                                >
+                                    {isSaving ? 'Saving...' : 'Sync Changes'}
+                                </Button>
+                            </div>
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            </div>
+        </div>
+    );
+}