hey-pharmacist-ecommerce 1.1.30 → 1.1.32

package/src/screens/NotificationSettingsScreen.tsx

@@ -0,0 +1,321 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Loader2 } 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;
+    types: Array<{
+        type: NotificationType;
+        label: string;
+        description: string;
+        isComingSoon?: boolean;
+    }>;
+}
+
+const NOTIFICATION_CATEGORIES: NotificationCategory[] = [
+    {
+        name: 'Order Updates',
+        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',
+        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',
+        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',
+        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,
+            },
+        ],
+    },
+];
+
+// Custom Minimal Switch Component
+const Switch = ({ checked, onChange, disabled }: { checked: boolean; onChange: (checked: boolean) => void; disabled?: boolean }) => (
+    <button
+        onClick={() => !disabled && onChange(!checked)}
+        className={`relative w-9 h-5 rounded-full transition-colors duration-200 ease-in-out focus:outline-none ${checked ? 'bg-black' : 'bg-slate-200'
+            } ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
+    >
+        <span
+            className={`absolute top-0.5 left-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-200 ease-in-out ${checked ? 'translate-x-4' : 'translate-x-0'
+                }`}
+        />
+    </button>
+);
+
+export function NotificationSettingsScreen() {
+    const { settings, updateSettings, isLoading } = useNotificationCenter();
+    const [localSettings, setLocalSettings] = useState(settings);
+    const [isSaving, setIsSaving] = useState(false);
+    const [hasChanges, setHasChanges] = useState(false);
+
+    useEffect(() => {
+        if (settings) {
+            setLocalSettings(settings);
+        }
+    }, [settings]);
+
+    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;
+
+        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 => {
+            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);
+        }
+    };
+
+    if (isLoading && !settings) {
+        return (
+            <div className="flex h-[50vh] flex-col items-center justify-center">
+                <Loader2 className="h-6 w-6 animate-spin text-slate-400" />
+            </div>
+        );
+    }
+
+    return (
+        <div className="mx-auto max-w-4xl px-6 py-8">
+
+            {/* Header */}
+            <div className="mb-6 flex items-end justify-between border-b border-slate-100 pb-4">
+                <div>
+                    <h1 className="text-2xl font-semibold tracking-tight text-slate-900">Notifications</h1>
+                    <p className="mt-2 text-sm text-slate-500">
+                        Manage your notification preferences across all channels.
+                    </p>
+                </div>
+            </div>
+
+            {/* Notification Table Header */}
+            <div className="hidden grid-cols-12 gap-4 border-b border-slate-100 pb-3 text-xs font-medium uppercase tracking-wider text-slate-400 sm:grid">
+                <div className="col-span-8">Topic</div>
+                <div className="col-span-2 text-center">Email</div>
+                <div className="col-span-2 text-center">Push</div>
+                {/* <div className="col-span-2 text-center">In-App</div> */}
+            </div>
+
+            {/* Content */}
+            <div className="space-y-8 py-4">
+                {NOTIFICATION_CATEGORIES.map((category) => (
+                    <section key={category.name}>
+                        <h2 className="mb-6 text-sm font-semibold text-slate-900">{category.name}</h2>
+
+                        <div className="space-y-4">
+                            {category.types.map((notifType) => (
+                                <div key={notifType.type} className="group grid grid-cols-1 sm:grid-cols-12 gap-y-3 sm:gap-x-4 items-start sm:items-center">
+                                    {/* Info */}
+                                    <div className="col-span-8 pr-4">
+                                        <div className="flex items-center gap-2">
+                                            <span className={`text-sm font-medium ${notifType.isComingSoon ? 'text-slate-400' : 'text-slate-700'}`}>
+                                                {notifType.label}
+                                            </span>
+                                            {notifType.isComingSoon && (
+                                                <span className="rounded bg-slate-100 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-slate-500">
+                                                    Soon
+                                                </span>
+                                            )}
+                                        </div>
+                                        <p className="mt-0.5 text-xs text-slate-500">{notifType.description}</p>
+                                    </div>
+
+                                    {/* Toggles */}
+                                    <div className="col-span-4 grid grid-cols-2 gap-4">
+                                        <div className="flex items-center justify-between sm:justify-center">
+                                            <span className="sm:hidden text-xs text-slate-400">Email</span>
+                                            <Switch
+                                                checked={getChannelSetting(notifType.type, 'email')}
+                                                onChange={(checked) => updateChannelSetting(notifType.type, 'email', checked)}
+                                                disabled={notifType.isComingSoon}
+                                            />
+                                        </div>
+                                        <div className="flex items-center justify-between sm:justify-center">
+                                            <span className="sm:hidden text-xs text-slate-400">Push</span>
+                                            <Switch
+                                                checked={getChannelSetting(notifType.type, 'push')}
+                                                onChange={(checked) => updateChannelSetting(notifType.type, 'push', checked)}
+                                                disabled={notifType.isComingSoon}
+                                            />
+                                        </div>
+                                        {/* 
+                                        <div className="flex items-center justify-between sm:justify-center col-span-1">
+                                            <span className="sm:hidden text-xs text-slate-400">In-App</span>
+                                            <Switch
+                                                checked={getChannelSetting(notifType.type, 'inApp')}
+                                                onChange={(checked) => updateChannelSetting(notifType.type, 'inApp', checked)}
+                                                disabled={notifType.isComingSoon}
+                                            />
+                                        </div> 
+                                        */}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </section>
+                ))}
+            </div>
+
+            <div className="mt-12 border-t border-slate-100 pt-8 text-center sm:text-left">
+                <Button
+                    variant="ghost"
+                    className="text-xs text-slate-400 hover:text-red-600 px-0"
+                    onClick={() => {
+                        if (confirm('Are you sure you want to disable all notifications?')) {
+                            // Iterate and disable all settings (reuse logic from before or keep it simple)
+                            // For brevity in this redesign, keeping it out or implementing simple logic:
+                            const newPrefs = localSettings?.preferences ? [...localSettings.preferences] : [];
+                            // Logic to clear all would go here or call a batch update
+                            alert("Feature to disable all coming in next update");
+                        }
+                    }}
+                >
+                    Disable all notifications
+                </Button>
+            </div>
+
+            {hasChanges && (
+                <div className="bg-white/80 backdrop-blur-sm fixed bottom-6 left-1/2 -translate-x-1/2 z-50 rounded-xl shadow-lg border border-slate-200 p-2 px-4 flex items-center gap-4 animate-in slide-in-from-bottom-2 fade-in duration-300">
+                    <span className="text-xs font-medium text-slate-600">Unsaved changes</span>
+                    <div className="h-4 w-px bg-slate-200" />
+                    <Button
+                        onClick={handleSave}
+                        isLoading={isSaving}
+                        disabled={isSaving}
+                        variant="primary"
+                        className="h-8 rounded-lg px-4 text-xs font-medium bg-black text-white bg-slate-800 hover:bg-slate-700"
+                    >
+                        Save
+                    </Button>
+                </div>
+            )}
+        </div>
+    );
+}

package/src/screens/OrderDetailScreen.tsx

@@ -0,0 +1,283 @@
+'use client';
+
+import React from 'react';
+import { motion } from 'framer-motion';
+import {
+    ChevronLeft,
+    Package,
+    Truck,
+    MapPin,
+    CreditCard,
+    Calendar,
+    ExternalLink,
+    Printer,
+    CheckCircle2,
+    Clock,
+    AlertCircle,
+    Info
+} from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { useOrder } from '@/hooks/useOrders';
+import { useBasePath } from '@/providers/BasePathProvider';
+import { formatPrice, formatDate } from '@/lib/utils/format';
+import { Badge } from '@/components/ui/Badge';
+import { Button } from '@/components/ui/Button';
+import Image from 'next/image';
+
+interface OrderDetailScreenProps {
+    id: string;
+}
+
+export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
+    const router = useRouter();
+    const { buildPath } = useBasePath();
+    const { order, isLoading, error } = useOrder(id);
+
+    if (isLoading) {
+        return (
+            <div className="min-h-screen bg-slate-50 flex flex-col items-center justify-center p-4">
+                <div className="w-16 h-16 border-4 border-primary/20 border-t-primary rounded-full animate-spin mb-4" />
+                <p className="text-muted font-medium animate-pulse">Retrieving order details...</p>
+            </div>
+        );
+    }
+
+    if (error || !order) {
+        return (
+            <div className="min-h-screen bg-slate-50 flex flex-col items-center justify-center p-4">
+                <div className="p-4 bg-red-50 rounded-full mb-4">
+                    <AlertCircle className="w-10 h-10 text-red-500" />
+                </div>
+                <h1 className="text-xl font-bold text-secondary mb-2">Order Not Found</h1>
+                <p className="text-muted mb-6">We couldn't find the order you're looking for.</p>
+                <Button onClick={() => router.push(buildPath('/account'))}>
+                    Back to Account
+                </Button>
+            </div>
+        );
+    }
+
+    const items = order.items || [];
+    const status = order.orderStatus || 'Pending';
+    const isDelivery = order.orderType === 'Delivery';
+
+    const getStatusVariant = (status: string): 'success' | 'warning' | 'primary' | 'danger' | 'gray' => {
+        switch (status.toLowerCase()) {
+            case 'pending': return 'warning';
+            case 'delivered':
+            case 'fulfilled':
+            case 'picked up': return 'success';
+            case 'shipped': return 'primary';
+            case 'cancelled': return 'danger';
+            default: return 'gray';
+        }
+    };
+
+    const shippingAddress = order.shippingInfo?.addressTo;
+    const pickupAddress = order.pickUpAddress;
+    const activeAddress = isDelivery ? shippingAddress : pickupAddress;
+
+    return (
+        <div className="min-h-screen bg-linear-to-b from-[#F8FAFC] to-[#EBF4FB] pb-20">
+            {/* Header / Navigation */}
+            <div className="container mx-auto px-4 pt-8 max-w-6xl">
+                <button
+                    onClick={() => router.back()}
+                    className="group flex items-center gap-2 text-muted hover:text-secondary transition-colors mb-6"
+                >
+                    <div className="p-1.5 rounded-full bg-white shadow-xs group-hover:shadow-md transition-all">
+                        <ChevronLeft className="w-4 h-4" />
+                    </div>
+                    <span className="text-sm font-semibold">Back to History</span>
+                </button>
+
+                <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-8">
+                    <div>
+                        <div className="flex items-center gap-3 mb-2">
+                            <h1 className="text-3xl font-bold text-secondary">Order Details</h1>
+                            <Badge variant={getStatusVariant(status)}>{status}</Badge>
+                            <Badge variant="primary" className="bg-primary-100 text-primary-700 border-primary-200">
+                                {order.orderType || 'Pickup'}
+                            </Badge>
+                        </div>
+                        <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-muted">
+                            <span className="flex items-center gap-1.5 font-medium">
+                                <span className="opacity-60 text-xs uppercase tracking-widest font-bold">ID:</span>
+                                <span className="text-secondary font-mono tracking-tight">#{id.toUpperCase()}</span>
+                            </span>
+                            <span className="flex items-center gap-1.5 font-medium">
+                                <Calendar className="w-4 h-4 opacity-60" />
+                                {formatDate(order.createdAt || new Date(), 'long')}
+                            </span>
+                        </div>
+                    </div>
+                    <div className="flex gap-3">
+                        {order.payment?.hostedInvoiceUrl && (
+                            <Button size="sm" onClick={() => window.open(order.payment?.hostedInvoiceUrl, '_blank')} className="bg-accent hover:bg-accent-dark border-none">
+                                <ExternalLink className="w-4 h-4" />
+                                Payment Details
+                            </Button>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            <div className="container mx-auto px-4 max-w-6xl grid grid-cols-1 lg:grid-cols-3 gap-8">
+                {/* Left Column: Order Tracking & Items */}
+                <div className="lg:col-span-2 space-y-6">
+                    {/* Items Section */}
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        className="bg-white rounded-3xl border border-slate-200 shadow-xs overflow-hidden"
+                    >
+                        <div className="p-6 border-b border-slate-100 bg-slate-50/50 flex items-center justify-between">
+                            <div className="flex items-center gap-2">
+                                <Package className="w-5 h-5 text-secondary" />
+                                <h2 className="font-bold text-secondary">Order Items</h2>
+                            </div>
+                            <span className="text-xs font-bold bg-slate-200 text-muted px-2.5 py-1 rounded-full">
+                                {items.length} {items.length === 1 ? 'Product' : 'Products'}
+                            </span>
+                        </div>
+                        <div className="divide-y divide-slate-100">
+                            {items.map((item, idx) => (
+                                <div key={item._id || idx} className="p-6 flex gap-6 group hover:bg-slate-50/50 transition-colors">
+                                    <div className="relative w-20 h-20 bg-slate-100 rounded-2xl overflow-hidden shrink-0 border border-slate-100 group-hover:scale-105 transition-transform duration-300">
+                                        <Image
+                                            src={item.productVariantData?.media?.[0]?.file || '/placeholder-product.jpg'}
+                                            alt={item.productVariantData?.name || 'Item'}
+                                            fill
+                                            className="object-cover"
+                                            sizes="80px"
+                                        />
+                                    </div>
+                                    <div className="flex-1 flex flex-col justify-between py-1">
+                                        <div>
+                                            <h3 className="font-bold text-secondary text-lg group-hover:text-primary transition-colors leading-snug mb-1">
+                                                {item.productVariantData?.name}
+                                            </h3>
+                                            <div className="flex flex-wrap gap-x-4 gap-y-1 text-sm text-muted">
+                                                <span className="flex items-center gap-1.5">
+                                                    <span className="w-1.5 h-1.5 rounded-full bg-slate-300" />
+                                                    Quantity: <span className="text-secondary font-bold">{item.quantity}</span>
+                                                </span>
+                                            </div>
+                                        </div>
+                                        <div className="flex items-center justify-between">
+                                            <span className="text-muted text-sm">{formatPrice(item.productVariantData?.finalPrice || 0)} per unit</span>
+                                            <span className="font-black text-secondary">{formatPrice((item.productVariantData?.finalPrice || 0) * item.quantity)}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+                    </motion.div>
+
+                    {/* Order Meta / Info */}
+                    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                        <div className="bg-white p-6 rounded-3xl border border-slate-200 shadow-xs">
+                            <div className="flex items-center gap-2 mb-4">
+                                <MapPin className="w-5 h-5 text-accent" />
+                                <h3 className="font-bold text-secondary">{isDelivery ? 'Shipping Address' : 'Pickup Location'}</h3>
+                            </div>
+                            {activeAddress ? (
+                                <div className="text-sm text-muted leading-relaxed">
+                                    <p className="font-bold text-secondary text-base mb-1">
+                                        {activeAddress.name}
+                                    </p>
+                                    <p>{activeAddress.street1}</p>
+                                    {activeAddress.street2 && <p>{activeAddress.street2}</p>}
+                                    <p>{activeAddress.city}, {activeAddress.state} {activeAddress.zip}</p>
+                                    <p>{activeAddress.country}</p>
+                                </div>
+                            ) : (
+                                <p className="text-sm text-muted italic">No address recorded</p>
+                            )}
+                        </div>
+                        <div className="bg-white p-6 rounded-3xl border border-slate-200 shadow-xs">
+                            <div className="flex items-center gap-2 mb-4">
+                                <CreditCard className="w-5 h-5 text-accent" />
+                                <h3 className="font-bold text-secondary">Payment Method</h3>
+                            </div>
+                            <div className="text-sm text-muted leading-relaxed">
+                                <p className="font-bold text-secondary text-base mb-1">
+                                    {order.payment?.paymentMethod ? order.payment.paymentMethod.replace('_', ' ').toUpperCase() : 'N/A'}
+                                </p>
+                                <p className="flex items-center gap-2 mt-2">
+                                    <span className="opacity-60">Status:</span>
+                                    <Badge variant={order.payment?.paymentStatus === 'Paid' ? 'success' : 'warning'}>
+                                        {order.payment?.paymentStatus || 'Processing'}
+                                    </Badge>
+                                </p>
+                                {order.payment?.transactionId && (
+                                    <p className="mt-3 text-[10px] font-bold text-slate-400 uppercase tracking-tighter">
+                                        Ref: {order.payment.transactionId}
+                                    </p>
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Right Column: Order Summary */}
+                <div className="space-y-6">
+                    <motion.div
+                        initial={{ opacity: 0, x: 20 }}
+                        animate={{ opacity: 1, x: 0 }}
+                        className="bg-secondary p-8 rounded-[2rem] text-white shadow-xl shadow-secondary/20 sticky top-8"
+                    >
+                        <h2 className="text-xl font-bold mb-6 flex items-center gap-2">
+                            Summary View
+                        </h2>
+
+                        <div className="space-y-4 mb-8">
+                            <div className="flex justify-between items-center text-white/70">
+                                <span className="text-sm font-medium">Subtotal</span>
+                                <span className="font-bold text-white">{formatPrice(order.subTotal || 0)}</span>
+                            </div>
+                            <div className="flex justify-between items-center text-white/70">
+                                <span className="text-sm font-medium">Shipping</span>
+                                <span className="font-bold text-white">{formatPrice(order.shippingCost || 0)}</span>
+                            </div>
+                            <div className="flex justify-between items-center text-white/70">
+                                <span className="text-sm font-medium">Tax</span>
+                                <span className="font-bold text-white">{formatPrice(order.tax || 0)}</span>
+                            </div>
+                            {order.discountedAmount !== undefined && order.discountedAmount > 0 && (
+                                <div className="flex justify-between items-center text-primary">
+                                    <span className="text-sm font-medium">Discount</span>
+                                    <span className="font-bold">-{formatPrice(order.discountedAmount)}</span>
+                                </div>
+                            )}
+
+                            <div className="pt-4 border-t border-white/10 mt-4">
+                                <div className="flex justify-between items-end">
+                                    <div>
+                                        <p className="text-xs font-black uppercase tracking-[0.2em] text-white/40 mb-1">Grand Total</p>
+                                        <p className="text-3xl font-black">{formatPrice(order.grandTotal || 0)}</p>
+                                    </div>
+                                    <div className="px-3 py-1 bg-white/10 rounded-lg text-[10px] font-black uppercase tracking-wider text-white/60">
+                                        USD
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        {order.orderStatus === 'Pending' && (
+                            <div className="p-4 bg-white/5 rounded-2xl border border-white/10 mb-8">
+                                <div className="flex items-start gap-3">
+                                    <Info className="w-5 h-5 text-primary shrink-0 mt-0.5" />
+                                    <div>
+                                        <p className="text-xs font-bold mb-1">Order is processing</p>
+                                        <p className="text-[11px] text-white/60 leading-relaxed">We've received your request and our pharmacists are reviewing it for safety and accuracy.</p>
+                                    </div>
+                                </div>
+                            </div>
+                        )}
+                    </motion.div>
+                </div>
+            </div>
+        </div>
+    );
+}