hey-pharmacist-ecommerce 1.1.30 → 1.1.31

package/src/providers/NotificationCenterProvider.tsx

@@ -0,0 +1,436 @@
+'use client';
+
+import React, { createContext, useContext, useState, useEffect, useCallback, useRef } from 'react';
+import { NotificationsApi } from '@/lib/Apis/apis/notifications-api';
+import { getApiConfiguration, getAuthToken, getCurrentConfig } from '@/lib/api-adapter/config';
+import { useAuth } from './AuthProvider';
+import { PreferenceUpdateItemTypeEnum, UpdateNotificationSettingsDto } from '@/lib/Apis/models';
+
+// Re-export the enum for convenience
+export type NotificationType = PreferenceUpdateItemTypeEnum;
+export const NotificationType = PreferenceUpdateItemTypeEnum;
+export { PreferenceUpdateItemTypeEnum };
+
+export interface NotificationData {
+    _id: string;
+    type: NotificationType;
+    title: string;
+    body: string;
+    isRead: boolean;
+    createdAt: string;
+    data?: {
+        orderId?: string;
+        productId?: string;
+        [key: string]: any;
+    };
+}
+
+export interface NotificationSettings {
+    _id?: string;
+    userId?: string;
+    preferences: Array<{
+        type: NotificationType;
+        settings: {
+            email?: boolean;
+            push?: boolean;
+            inApp?: boolean;
+        };
+    }>;
+}
+
+interface NotificationCenterContextValue {
+    notifications: NotificationData[];
+    unreadCount: number;
+    isLoading: boolean;
+    isDrawerOpen: boolean;
+    settings: NotificationSettings | null;
+    openDrawer: () => void;
+    closeDrawer: () => void;
+    markAsRead: (id: string) => Promise<void>;
+    markAllAsRead: () => Promise<void>;
+    deleteNotification: (id: string) => Promise<void>;
+    loadMore: () => Promise<void>;
+    hasMore: boolean;
+    refreshNotifications: () => Promise<void>;
+    updateSettings: (settings: NotificationSettings) => Promise<void>;
+}
+
+const NotificationCenterContext = createContext<NotificationCenterContextValue | undefined>(undefined);
+
+export function useNotificationCenter() {
+    const context = useContext(NotificationCenterContext);
+    if (!context) {
+        throw new Error('useNotificationCenter must be used within NotificationCenterProvider');
+    }
+    return context;
+}
+
+interface NotificationCenterProviderProps {
+    children: React.ReactNode;
+}
+
+export function NotificationCenterProvider({ children }: NotificationCenterProviderProps) {
+    const { isAuthenticated } = useAuth();
+    const [notifications, setNotifications] = useState<NotificationData[]>([]);
+    const [unreadCount, setUnreadCount] = useState(0);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+    const [settings, setSettings] = useState<NotificationSettings | null>(null);
+    const [page, setPage] = useState(1);
+    const [hasMore, setHasMore] = useState(true);
+    const eventSourceRef = useRef<EventSource | null>(null);
+    const notificationsApi = useRef(new NotificationsApi(getApiConfiguration()));
+
+    // Fetch unread count
+    const fetchUnreadCount = useCallback(async () => {
+        if (!isAuthenticated) return;
+
+        try {
+            const response = await notificationsApi.current.getUnreadCount();
+            setUnreadCount((response.data as any)?.unreadCount || 0);
+        } catch (error) {
+            console.error('Failed to fetch unread count:', error);
+        }
+    }, [isAuthenticated]);
+
+    // Fetch notifications
+    const fetchNotifications = useCallback(async (pageNum: number = 1, append: boolean = false) => {
+        if (!isAuthenticated) return;
+
+        setIsLoading(true);
+        try {
+            const response = await notificationsApi.current.getNotifications(pageNum, 20, false);
+            console.log('Raw API response:', {
+                fullResponse: response,
+                data: response.data,
+                dataType: typeof response.data,
+                isArray: Array.isArray(response.data),
+                keys: (response.data as any) ? Object.keys(response.data as any) : [],
+            });
+
+            const data = response.data as any;
+            let rawNotifications = [];
+
+            if (Array.isArray(data)) {
+                rawNotifications = data;
+            } else if (data?.notifications && Array.isArray(data.notifications)) {
+                rawNotifications = data.notifications;
+            } else if (data?.data && Array.isArray(data.data)) {
+                rawNotifications = data.data;
+            }
+
+
+            // Map API response to our NotificationData interface
+            const newNotifications = rawNotifications.map((n: any) => ({
+                _id: n.id || n._id, // API returns 'id', we use '_id' internally
+                type: n.type,
+                title: n.title,
+                body: n.body,
+                isRead: n.isRead,
+                createdAt: n.createdAt,
+                data: n.data,
+            }));
+
+            console.log('Fetched and mapped notifications:', {
+                pageNum,
+                append,
+                rawCount: rawNotifications.length,
+                mappedCount: newNotifications.length,
+                firstNotification: newNotifications[0],
+            });
+
+            if (append) {
+                setNotifications(prev => [...prev, ...newNotifications]);
+            } else {
+                setNotifications(newNotifications);
+            }
+
+            setHasMore(newNotifications.length === 20);
+            setPage(pageNum);
+        } catch (error) {
+            console.error('Failed to fetch notifications:', error);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [isAuthenticated]);
+
+    // Fetch settings
+    const fetchSettings = useCallback(async () => {
+        if (!isAuthenticated) return;
+
+        setIsLoading(true);
+        try {
+            const response = await notificationsApi.current.getSettings();
+            console.log('Settings API response raw:', response);
+
+            const rawData = response.data as any;
+
+            // Handle different API response structures robustly
+            let finalSettings: NotificationSettings | null = null;
+
+            if (rawData) {
+                if (Array.isArray(rawData)) {
+                    // Raw array [ { type: '...', settings: { ... } } ]
+                    finalSettings = { preferences: rawData };
+                } else if (rawData.preferences) {
+                    if (Array.isArray(rawData.preferences)) {
+                        // Standard nested preferences array
+                        finalSettings = rawData;
+                    } else if (typeof rawData.preferences === 'object') {
+                        // Backend returned preferences as an object { TYPE: { email: true } }
+                        // Convert to our expected array format
+                        const preferences = Object.entries(rawData.preferences).map(([type, settings]) => ({
+                            type: type as any,
+                            settings: settings as any
+                        }));
+                        finalSettings = { ...rawData, preferences };
+                    }
+                } else if (rawData.data) {
+                    const d = rawData.data;
+                    if (d.preferences) {
+                        if (Array.isArray(d.preferences)) {
+                            finalSettings = d;
+                        } else if (typeof d.preferences === 'object') {
+                            const preferences = Object.entries(d.preferences).map(([type, settings]) => ({
+                                type: type as any,
+                                settings: settings as any
+                            }));
+                            finalSettings = { ...d, preferences };
+                        }
+                    } else if (Array.isArray(d)) {
+                        finalSettings = { preferences: d };
+                    }
+                } else if (typeof rawData === 'object' && !rawData.preferences) {
+                    // Maybe it's just the preferences object directly { TYPE: { email: true } }
+                    const preferences = Object.entries(rawData).map(([type, settings]) => ({
+                        type: type as any,
+                        settings: settings as any
+                    }));
+                    if (preferences.length > 0 && preferences[0].settings && typeof preferences[0].settings === 'object') {
+                        finalSettings = { preferences };
+                    } else {
+                        finalSettings = rawData;
+                    }
+                } else {
+                    finalSettings = rawData;
+                }
+            }
+
+            console.log('Parsed settings:', finalSettings);
+            setSettings(finalSettings);
+        } catch (error) {
+            console.error('Failed to fetch settings:', error);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [isAuthenticated]);
+
+    // SSE Connection for real-time notifications
+    useEffect(() => {
+        if (!isAuthenticated) {
+            // Close existing connection if user logs out
+            if (eventSourceRef.current) {
+                eventSourceRef.current.close();
+                eventSourceRef.current = null;
+            }
+            return;
+        }
+
+        const token = getAuthToken();
+        if (!token) return;
+
+        try {
+            const config = getCurrentConfig();
+            const sseUrl = `${config.apiBaseUrl}/notifications/stream?token=${encodeURIComponent(token)}`;
+
+            const eventSource = new EventSource(sseUrl);
+            eventSourceRef.current = eventSource;
+
+            eventSource.onmessage = (event) => {
+                try {
+                    const rawNotification = JSON.parse(event.data);
+
+                    // Map API response to our NotificationData interface
+                    const notification: NotificationData = {
+                        _id: rawNotification.id || rawNotification._id,
+                        type: rawNotification.type,
+                        title: rawNotification.title,
+                        body: rawNotification.body,
+                        isRead: rawNotification.isRead || false,
+                        createdAt: rawNotification.createdAt,
+                        data: rawNotification.data,
+                    };
+
+                    // Add to top of list
+                    setNotifications(prev => [notification, ...prev]);
+
+                    // Increment unread count
+                    setUnreadCount(prev => prev + 1);
+
+                    // Show browser notification if supported and drawer is closed
+                    if ('Notification' in window && Notification.permission === 'granted' && !isDrawerOpen) {
+                        new Notification(notification.title, {
+                            body: notification.body,
+                            icon: '/icon.png', // Add your app icon
+                        });
+                    }
+                } catch (error) {
+                    console.error('Failed to parse SSE notification:', error);
+                }
+            };
+
+            eventSource.onerror = (error) => {
+                console.error('SSE connection error:', error);
+                eventSource.close();
+
+                // Attempt to reconnect after 5 seconds
+                setTimeout(() => {
+                    if (isAuthenticated && getAuthToken()) {
+                        // Trigger re-render to recreate connection
+                        fetchUnreadCount();
+                    }
+                }, 5000);
+            };
+
+            return () => {
+                eventSource.close();
+            };
+        } catch (error) {
+            console.error('Failed to establish SSE connection:', error);
+        }
+    }, [isAuthenticated, isDrawerOpen, fetchUnreadCount]);
+
+    // Initial data fetch
+    useEffect(() => {
+        if (isAuthenticated) {
+            fetchUnreadCount();
+            fetchNotifications(1);
+            fetchSettings();
+        } else {
+            // Reset state when logged out
+            setNotifications([]);
+            setUnreadCount(0);
+            setSettings(null);
+            setPage(1);
+            setHasMore(true);
+        }
+    }, [isAuthenticated, fetchUnreadCount, fetchNotifications, fetchSettings]);
+
+    // Request notification permission
+    useEffect(() => {
+        if ('Notification' in window && Notification.permission === 'default') {
+            Notification.requestPermission();
+        }
+    }, []);
+
+    const openDrawer = useCallback(() => {
+        setIsDrawerOpen(true);
+    }, []);
+
+    const closeDrawer = useCallback(() => {
+        setIsDrawerOpen(false);
+    }, []);
+
+    const markAsRead = useCallback(async (id: string) => {
+        try {
+            await notificationsApi.current.markAsRead(id);
+
+            // Update local state
+            setNotifications(prev =>
+                prev.map(n => (n._id === id ? { ...n, isRead: true } : n))
+            );
+
+            // Decrement unread count
+            setUnreadCount(prev => Math.max(0, prev - 1));
+        } catch (error) {
+            console.error('Failed to mark notification as read:', error);
+        }
+    }, []);
+
+    const markAllAsRead = useCallback(async () => {
+        try {
+            await notificationsApi.current.markAllAsRead();
+
+            // Update local state
+            setNotifications(prev => prev.map(n => ({ ...n, isRead: true })));
+            setUnreadCount(0);
+        } catch (error) {
+            console.error('Failed to mark all as read:', error);
+        }
+    }, []);
+
+    const deleteNotification = useCallback(async (id: string) => {
+        try {
+            await notificationsApi.current.deleteNotification(id);
+
+            // Update local state
+            const notification = notifications.find(n => n._id === id);
+            setNotifications(prev => prev.filter(n => n._id !== id));
+
+            // Decrement unread count if notification was unread
+            if (notification && !notification.isRead) {
+                setUnreadCount(prev => Math.max(0, prev - 1));
+            }
+        } catch (error) {
+            console.error('Failed to delete notification:', error);
+        }
+    }, [notifications]);
+
+    const loadMore = useCallback(async () => {
+        if (!hasMore || isLoading) return;
+        await fetchNotifications(page + 1, true);
+    }, [hasMore, isLoading, page, fetchNotifications]);
+
+    const refreshNotifications = useCallback(async () => {
+        await fetchNotifications(1, false);
+        await fetchUnreadCount();
+    }, [fetchNotifications, fetchUnreadCount]);
+
+    const updateSettings = useCallback(async (newSettings: NotificationSettings) => {
+        try {
+            // Clean the settings object to match UpdateNotificationSettingsDto
+            // and remove any frontend-only fields that might cause validation errors
+            const payload: UpdateNotificationSettingsDto = {
+                _id: newSettings._id,
+                preferences: newSettings.preferences.map(p => ({
+                    type: p.type,
+                    settings: {
+                        email: p.settings?.email,
+                        push: p.settings?.push,
+                        inApp: p.settings?.inApp,
+                    }
+                }))
+            };
+
+            console.log('Updating settings with payload:', payload);
+            await notificationsApi.current.updateSettings(payload);
+            setSettings(newSettings);
+        } catch (error) {
+            console.error('Failed to update settings:', error);
+            throw error;
+        }
+    }, []);
+
+    const value: NotificationCenterContextValue = {
+        notifications,
+        unreadCount,
+        isLoading,
+        isDrawerOpen,
+        settings,
+        openDrawer,
+        closeDrawer,
+        markAsRead,
+        markAllAsRead,
+        deleteNotification,
+        loadMore,
+        hasMore,
+        refreshNotifications,
+        updateSettings,
+    };
+
+    return (
+        <NotificationCenterContext.Provider value={value}>
+            {children}
+        </NotificationCenterContext.Provider>
+    );
+}

package/src/screens/CartScreen.tsx

@@ -88,7 +88,7 @@ export function CartScreen() {
     );
   }
 
-  const subtotal = cart.cartBody.items.reduce((total, item) => total + item.productVariantData.finalPrice * item.quantity, 0);
+  const subtotal = Math.round(cart.cartBody.items.reduce((total, item) => total + item.productVariantData.finalPrice * item.quantity, 0) * 100) / 100;
   const shipping = 0;
   const tax = 0;
   const total = subtotal + shipping + tax;

package/src/screens/CheckoutScreen.tsx

@@ -36,6 +36,8 @@ import { useBasePath } from '@/providers/BasePathProvider';
 import { addressSchema } from '@/lib/validations/address';
 import Image from 'next/image';
 import { useNotification } from '@/providers/NotificationProvider';
+import { CouponCodeInput } from '@/components/CouponCodeInput';
+import { useDiscounts } from '@/hooks/useDiscounts';
 
 const checkoutSchema = z.object({
   shipping: addressSchema,
@@ -89,7 +91,7 @@ export function CheckoutScreen() {
   const [editingAddress, setEditingAddress] = useState<any | null>(null);
   const [shippingPrice, setShippingPrice] = useState(0);
   const notification = useNotification();
-
+  const { appliedCoupon, calculateCouponDiscount } = useDiscounts();
 
   // Use the addresses hook
   const {
@@ -183,19 +185,19 @@ export function CheckoutScreen() {
         name: user ? `${user.firstname} ${user.lastname}` : '',
         phone: user?.phoneNumber || '',
         country: 'United States',
-        // street1: '',
-        // city: '',
-        // state: '',
-        // zip: '',
+        street1: '',
+        city: '',
+        state: '',
+        zip: '',
       },
       billing: {
         name: user ? `${user.firstname} ${user.lastname}` : '',
         phone: user?.phoneNumber || '',
         country: 'United States',
-        // street1: '',
-        // city: '',
-        // state: '',
-        // zip: '',
+        street1: '',
+        city: '',
+        state: '',
+        zip: '',
       },
     },
   });
@@ -443,6 +445,7 @@ export function CheckoutScreen() {
         orderRemindingDates: [],
         shippingAddress: data.shipping,
         billingAddress: sameAsShipping ? data.shipping : data.billing,
+        ...(appliedCoupon && { discountId: appliedCoupon._id || appliedCoupon.id }),
         ...(manualShipping && { manualShipping }),
       };
 
@@ -521,13 +524,23 @@ export function CheckoutScreen() {
     }
   };
 
+  // Redirect if cart is empty - use useEffect to avoid rendering during render
+  React.useEffect(() => {
+    if (!cart || cart?.cartBody?.items?.length === 0 || !cart?.cartBody?.items) {
+      router.push(buildPath('/cart'));
+    }
+  }, [cart, router]);
+
   if (!cart || cart?.cartBody?.items?.length === 0 || !cart?.cartBody?.items) {
-    router.push(buildPath('/cart'));
     return null;
   }
-  const subtotal = cart.cartBody.items.reduce((total, item) => total + item.productVariantData.finalPrice * item.quantity, 0);
+
+  const subtotal = Math.round(cart.cartBody.items.reduce((total, item) => total + item.productVariantData.finalPrice * item.quantity, 0) * 100) / 100;
+  const discountAmount = appliedCoupon ? calculateCouponDiscount(subtotal) : 0;
+  const subtotalAfterDiscount = subtotal - discountAmount;
   const tax = 0;
-  const total = subtotal + shippingPrice + tax;
+  const total = subtotalAfterDiscount + shippingPrice + tax;
+
 
   return (
     <div className="min-h-screen bg-white pb-16">
@@ -993,6 +1006,14 @@ export function CheckoutScreen() {
 
                 <div className="h-px bg-[#5B9BD5]/20 my-4" />
 
+                {/* Coupon Code Section */}
+                <div className="mb-6">
+                  <CouponCodeInput 
+                    userId={user?.id} 
+                    className="mb-4"
+                  />
+                </div>
+
                 {/* Totals */}
                 <div className="text-sm text-slate-600 space-y-3 py-4">
                   <div className="flex items-center justify-between">
@@ -1001,6 +1022,12 @@ export function CheckoutScreen() {
                       {formatPrice(subtotal)}
                     </span>
                   </div>
+                  {discountAmount > 0 && (
+                    <div className="flex items-center justify-between text-green-600">
+                      <span>Discount ({appliedCoupon?.code})</span>
+                      <span className="font-semibold">-{formatPrice(discountAmount)}</span>
+                    </div>
+                  )}
                   {isDelivery && (
                     <div className="flex items-center justify-between">
                       <span>Shipping</span>