hey-pharmacist-ecommerce 1.0.4 → 1.0.6

package/src/screens/WishlistScreen.tsx

@@ -0,0 +1,428 @@
+'use client';
+
+import React, { useEffect, useMemo, useState } from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import {
+    Grid,
+    Heart,
+    List,
+    LucideIcon,
+    Package,
+    ShieldCheck,
+    ShoppingBag,
+    Sparkles,
+    Trash2,
+} from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import { toast } from 'sonner';
+import { ProductCard } from '@/components/ProductCard';
+import { Button } from '@/components/ui/Button';
+import { useWishlist } from '@/providers/WishlistProvider';
+import { useAuth } from '@/providers/AuthProvider';
+import { useWishlistProducts } from '@/hooks/useWishlistProducts';
+import Image from 'next/image';
+import { formatPrice } from '@/lib/utils/format';
+import { ExtendedProductDTO } from '@/lib/Apis';
+
+type SortOption = 'featured' | 'price-low' | 'price-high' | 'name' | 'availability';
+
+const SORT_OPTIONS: { value: SortOption; label: string }[] = [
+    { value: 'featured', label: 'Most loved' },
+    { value: 'price-low', label: 'Price: Low to High' },
+    { value: 'price-high', label: 'Price: High to Low' },
+    { value: 'name', label: 'Name A-Z' },
+    { value: 'availability', label: 'Availability' },
+];
+
+interface InsightCardProps {
+    icon: LucideIcon;
+    title: string;
+    value: string;
+    helper?: string;
+    accentClassName: string;
+}
+
+
+export default function WishlistScreen() {
+    const router = useRouter();
+    const { isAuthenticated } = useAuth() || {};
+    const {
+        products: wishlistItems,
+        removeFromWishlist,
+        getWishlistCount,
+        clearWishlist,
+        refreshWishlist,
+    } = useWishlist();
+
+    const wishlistCount = getWishlistCount?.() ?? 0;
+    const { products: wishlistProducts, isLoading, error } = useWishlistProducts(
+        wishlistItems as string[]
+    );
+
+    const [onlyInStock, setOnlyInStock] = useState(false);
+    const [viewMode, setViewMode] = useState<'grid' | 'list'>('list');
+    const [sortOption, setSortOption] = useState<SortOption>('featured');
+
+    useEffect(() => {
+        if (error) {
+            toast.error('We had trouble loading your saved products. Please try again.');
+        }
+    }, [error]);
+
+    const handleRemoveFromWishlist = async (productId: string) => {
+        try {
+            await removeFromWishlist(productId);
+        } catch (err) {
+            console.error('Error removing from wishlist:', err);
+        }
+    };
+
+    const handleClearWishlist = async () => {
+        const confirmed = window.confirm('Clear all items from your wishlist?');
+        if (!confirmed) return;
+        try {
+            await clearWishlist();
+            await refreshWishlist();
+        } catch (err) {
+            console.error('Error clearing wishlist:', err);
+        }
+    };
+
+    const totalValue = useMemo(
+        () => wishlistProducts.reduce((sum, product) => sum + (product.finalPrice ?? 0), 0),
+        [wishlistProducts]
+    );
+
+    const totalSavings = useMemo(
+        () =>
+            wishlistProducts.reduce((sum, product) => {
+                const before = product.priceBeforeDiscount ?? product.finalPrice ?? 0;
+                const after = product.finalPrice ?? 0;
+                const savings = Math.max(before - after, 0);
+                return sum + savings;
+            }, 0),
+        [wishlistProducts]
+    );
+
+    const inStockCount = useMemo(
+        () => wishlistProducts.filter((product) => (product.inventoryCount ?? 0) > 0).length,
+        [wishlistProducts]
+    );
+
+    const processedProducts = useMemo(() => {
+        let list = [...wishlistProducts];
+
+        if (onlyInStock) {
+            list = list.filter((product) => (product.inventoryCount ?? 0) > 0);
+        }
+
+        switch (sortOption) {
+            case 'price-low':
+                list.sort((a, b) => (a.finalPrice ?? 0) - (b.finalPrice ?? 0));
+                break;
+            case 'price-high':
+                list.sort((a, b) => (b.finalPrice ?? 0) - (a.finalPrice ?? 0));
+                break;
+            case 'name':
+                list.sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+                break;
+            case 'availability':
+                list.sort((a, b) => (b.inventoryCount ?? 0) - (a.inventoryCount ?? 0));
+                break;
+            case 'featured':
+            default:
+                list.sort((a, b) => (b.totalSold ?? 0) - (a.totalSold ?? 0));
+                break;
+        }
+
+        return list;
+    }, [wishlistProducts, onlyInStock, sortOption]);
+
+    const emptyAfterFiltering = !isLoading && wishlistProducts.length > 0 && processedProducts.length === 0;
+
+    return (
+        <div className="min-h-screen bg-slate-50 pb-16">
+            <section className="relative overflow-hidden bg-gradient-to-br from-[rgb(var(--header-from))] via-[rgb(var(--header-via))] to-[rgb(var(--header-to))] pb-32 pt-16 text-white">
+                <div className="absolute inset-0 opacity-40 mix-blend-soft-light" aria-hidden="true">
+                    <div className="absolute -top-1/2 right-1/2 h-[40rem] w-[40rem] rounded-full bg-white/10 blur-3xl" />
+                    <div className="absolute left-1/4 top-1/4 h-48 w-48 rounded-full bg-white/20 blur-2xl" />
+                </div>
+                <div className="relative container mx-auto px-4">
+                    <div className="max-w-3xl space-y-6">
+                        <span className="inline-flex items-center gap-2 rounded-full bg-white/15 px-4 py-1 text-sm font-semibold uppercase tracking-[0.35em] text-white/70 backdrop-blur">
+                            <Heart className="h-4 w-4" />
+                            Wishlist
+                        </span>
+                        <h1 className="text-4xl font-bold leading-tight md:text-5xl">
+                            Curate your pharmacy must-haves in one calming space
+                        </h1>
+                        <p className="max-w-2xl text-white/80 md:text-lg">
+                            We keep your favourite products ready for reorder, refill reminders, and quick checkout—exactly when you need them.
+                        </p>
+                    </div>
+                </div>
+            </section>
+
+            <div className="relative -mt-20">
+                <div className="container mx-auto px-4">
+                    <motion.div
+                        initial={{ opacity: 0, y: 24 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        className="rounded-3xl border border-slate-100 bg-white p-6 shadow-xl shadow-primary-50"
+                    >
+                        <div className="flex flex-col gap-6">
+                            {!isAuthenticated && (
+                                <div className="flex min-h-[40vh] items-center justify-center">
+                                    <div className="max-w-lg rounded-3xl border border-slate-100 bg-white p-10 text-center shadow-lg shadow-primary-50">
+                                        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-full bg-primary-50 text-primary-600">
+                                            <Heart className="h-8 w-8" />
+                                        </div>
+                                        <h2 className="mt-6 text-3xl font-bold text-slate-900">Sign in to see your favourites</h2>
+                                        <p className="mt-3 text-slate-500">
+                                            Create your curated shelf of products and we&apos;ll keep them ready whenever you return.
+                                        </p>
+                                        <Button className="mt-6" onClick={() => router.push('/login')}>
+                                            Sign In
+                                        </Button>
+                                    </div>
+                                </div>
+                            )}
+
+                            {isAuthenticated && (
+                                <>
+                                    <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+                                        <div className="space-y-1">
+                                            <h2 className="text-2xl font-semibold text-slate-900">Your saved collection</h2>
+                                            <p className="text-sm text-slate-500">
+                                                Total value: <span className="font-semibold text-primary-600">{formatPrice(totalValue)}</span>
+                                                {onlyInStock && ' • Showing items ready to ship'}
+                                            </p>
+                                        </div>
+
+                                        <div className="flex flex-wrap items-center gap-3">
+                                            <label className="inline-flex cursor-pointer items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm font-medium text-slate-600 transition hover:border-primary-200 hover:text-primary-600">
+                                                <input
+                                                    type="checkbox"
+                                                    checked={onlyInStock}
+                                                    onChange={(event) => setOnlyInStock(event.target.checked)}
+                                                    className="h-4 w-4 rounded border-slate-300 text-primary-600 focus:ring-primary-500"
+                                                />
+                                                Only show in-stock
+                                            </label>
+
+                                            <div className="flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1.5 text-sm text-slate-600">
+                                                <span>Sort</span>
+                                                <select
+                                                    value={sortOption}
+                                                    onChange={(event) => setSortOption(event.target.value as SortOption)}
+                                                    className="bg-transparent text-sm font-medium text-slate-700 outline-none"
+                                                >
+                                                    {SORT_OPTIONS.map((option) => (
+                                                        <option key={option.value} value={option.value}>
+                                                            {option.label}
+                                                        </option>
+                                                    ))}
+                                                </select>
+                                            </div>
+
+                                            <div className="flex overflow-hidden rounded-full border border-slate-200 bg-slate-50">
+                                                <button
+                                                    type="button"
+                                                    onClick={() => setViewMode('grid')}
+                                                    className={`flex items-center gap-1 px-3 py-1.5 text-sm font-medium transition ${viewMode === 'grid'
+                                                        ? 'bg-primary-600 text-white shadow-lg shadow-primary-500/30'
+                                                        : 'text-slate-600 hover:bg-white'
+                                                        }`}
+                                                >
+                                                    <Grid className="h-4 w-4" />
+                                                    Grid
+                                                </button>
+                                                <button
+                                                    type="button"
+                                                    onClick={() => setViewMode('list')}
+                                                    className={`flex items-center gap-1 px-3 py-1.5 text-sm font-medium transition ${viewMode === 'list'
+                                                        ? 'bg-primary-600 text-white shadow-lg shadow-primary-500/30'
+                                                        : 'text-slate-600 hover:bg-white'
+                                                        }`}
+                                                >
+                                                    <List className="h-4 w-4" />
+                                                    List
+                                                </button>
+                                            </div>
+
+                                            {wishlistCount > 0 && (
+                                                <Button
+                                                    variant="ghost"
+                                                    className="text-sm font-semibold text-slate-500 hover:text-red-500"
+                                                    onClick={handleClearWishlist}
+                                                >
+                                                    <Trash2 className="h-4 w-4" />
+                                                    Clear all
+                                                </Button>
+                                            )}
+                                        </div>
+                                    </div>
+
+                                    {isLoading && (
+                                        <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
+                                            {Array.from({ length: Math.min(wishlistCount || 3, 6) }).map((_, index) => (
+                                                <div
+                                                    key={index}
+                                                    className="h-72 animate-pulse rounded-2xl border border-slate-200 bg-slate-100"
+                                                />
+                                            ))}
+                                        </div>
+                                    )}
+
+                                    {!isLoading && wishlistCount === 0 && (
+                                        <div className="flex min-h-[30vh] items-center justify-center">
+                                            <div className="max-w-2xl rounded-3xl border border-slate-100 bg-white p-12 text-center shadow-xl shadow-primary-50">
+                                                <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-primary-100 text-primary-600">
+                                                    <Sparkles className="h-10 w-10" />
+                                                </div>
+                                                <h2 className="mt-6 text-4xl font-bold text-slate-900">Start your wellness wishlist</h2>
+                                                <p className="mt-4 text-lg text-slate-500">
+                                                    Bookmark pharmacy essentials, supplements, or skincare picks and we&apos;ll keep them safe until you&apos;re ready to checkout.
+                                                </p>
+                                                <div className="mt-8 flex flex-wrap justify-center gap-3">
+                                                    <Button onClick={() => router.push('/shop')}>Discover products</Button>
+                                                    <Button variant="outline" onClick={() => router.push('/categories')}>
+                                                        Browse categories
+                                                    </Button>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )}
+      
+
+                                    {!isLoading && processedProducts.length > 0 && (
+                                <>
+                                    {viewMode === 'grid' ? (
+                                        <motion.div
+                                            layout
+                                            className="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-3"
+                                        >
+                                            <AnimatePresence>
+                                                {processedProducts.map((product) => (
+                                                    <motion.div
+                                                        key={product.id}
+                                                        layout
+                                                        initial={{ opacity: 0, y: 20 }}
+                                                        animate={{ opacity: 1, y: 0 }}
+                                                        exit={{ opacity: 0, y: -20 }}
+                                                        transition={{ duration: 0.2 }}
+                                                    >
+                                                        <ProductCard
+                                                            product={product as ExtendedProductDTO}
+                                                            onClickProduct={(p) => router.push(`/products/${p.id}`)}
+                                                            onFavorite={() => handleRemoveFromWishlist(product.id)}
+                                                            isFavorited
+                                                        />
+                                                    </motion.div>
+                                                ))}
+                                            </AnimatePresence>
+                                        </motion.div>
+                                    ) : (
+                                        <motion.div layout className="space-y-4">
+                                            <AnimatePresence>
+                                                {processedProducts.map((product) => (
+                                                    <motion.div
+                                                        key={product.id}
+                                                        layout
+                                                        initial={{ opacity: 0, y: 20 }}
+                                                        animate={{ opacity: 1, y: 0 }}
+                                                        exit={{ opacity: 0, y: -20 }}
+                                                        transition={{ duration: 0.2 }}
+                                                        className="flex flex-col gap-4 rounded-2xl border border-slate-100 bg-slate-50 p-4 shadow-sm shadow-primary-50 sm:flex-row sm:items-center"
+                                                    >
+                                                        <div className="relative h-28 w-full overflow-hidden rounded-2xl bg-white sm:w-40">
+                                                            <Image
+                                                                fill
+                                                                src={product.productMedia?.[0]?.file || '/placeholder-product.jpg'}
+                                                                alt={product.name || 'Wishlist item'}
+                                                                className="h-full w-full object-cover"
+                                                            />
+                                                        </div>
+                                                        <div className="flex flex-1 flex-col gap-2">
+                                                            <div className="flex flex-wrap items-center justify-between gap-3">
+                                                                <div>
+                                                                    <h3 className="text-lg font-semibold text-slate-900">
+                                                                        {product.name}
+                                                                    </h3>
+                                                                    <p className="text-sm text-slate-500">
+                                                                        {product.parentCategories?.map((category) => category?.name).join(', ') || 'General wellness'}
+                                                                    </p>
+                                                                </div>
+                                                                <div className="text-right">
+                                                                    <p className="text-lg font-bold text-primary-600">
+                                                                        {formatPrice(product.finalPrice ?? 0)}
+                                                                    </p>
+                                                                    {product.isDiscounted && (
+                                                                        <p className="text-xs text-emerald-500">
+                                                                            You save {formatPrice(Math.max((product.priceBeforeDiscount ?? 0) - (product.finalPrice ?? 0), 0))}
+                                                                        </p>
+                                                                    )}
+                                                                </div>
+                                                            </div>
+                                                            <div className="flex flex-wrap items-center gap-3 text-xs text-slate-500">
+                                                                <span className={`inline-flex items-center gap-1 rounded-full px-2.5 py-1 font-medium ${product.inventoryCount > 0 ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700'}`}>
+                                                                    <Package className="h-3.5 w-3.5" />
+                                                                    {product.inventoryCount > 0 ? 'In stock' : 'Backordered'}
+                                                                </span>
+                                                                {product.totalSold > 0 && (
+                                                                    <span className="inline-flex items-center gap-1 rounded-full bg-slate-200 px-2.5 py-1 font-medium text-slate-700">
+                                                                        <Sparkles className="h-3.5 w-3.5" />
+                                                                        {product.totalSold}+ purchased
+                                                                    </span>
+                                                                )}
+                                                            </div>
+                                                            <div className="flex flex-wrap gap-2">
+                                                                <Button
+                                                                    size="sm"
+                                                                    onClick={() => router.push(`/products/${product.id}`)}
+                                                                >
+                                                                    View details
+                                                                </Button>
+                                                                <Button
+                                                                    size="sm"
+                                                                    variant="outline"
+                                                                    onClick={() => handleRemoveFromWishlist(product.id)}
+                                                                    className="text-primary-600"
+                                                                >
+                                                                    Remove
+                                                                </Button>
+                                                            </div>
+                                                        </div>
+                                                    </motion.div>
+                                                ))}
+                                            </AnimatePresence>
+                                        </motion.div>
+                                    )}
+                                </>
+                            )}
+
+                            {isAuthenticated && emptyAfterFiltering && (
+                                <div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-slate-200 bg-slate-50 p-12 text-center">
+                                    <div className="flex h-16 w-16 items-center justify-center rounded-full bg-slate-200 text-slate-500">
+                                        <Package className="h-8 w-8" />
+                                    </div>
+                                    <h3 className="mt-6 text-2xl font-semibold text-slate-900">
+                                        Nothing matches those filters
+                                    </h3>
+                                    <p className="mt-2 max-w-md text-sm text-slate-500">
+                                        Try showing out-of-stock items or adjust your sort order to revisit everything you’ve saved.
+                                    </p>
+                                    <Button className="mt-6" variant="outline" onClick={() => setOnlyInStock(false)}>
+                                        Show all saved products
+                                    </Button>
+                                </div>
+                            )}
+                                </>
+                            )}
+                        </div>
+                    </motion.div>
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/lib/Apis/models/inventory-paginated-response.ts

@@ -1,75 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-/**
- * Hey Pharamcist API
- * No description provided (generated by Swagger Codegen https://github.com/swagger-api/swagger-codegen)
- *
- * OpenAPI spec version: 1.0
- * 
- *
- * NOTE: This class is auto generated by the swagger code generator program.
- * https://github.com/swagger-api/swagger-codegen.git
- * Do not edit the class manually.
- */
-import { ProductVariant } from './product-variant';
-/**
- * 
- * @export
- * @interface InventoryPaginatedResponse
- */
-export interface InventoryPaginatedResponse {
-  _id?: string;
-    /**
-     * 
-     * @type {string}
-     * @memberof InventoryPaginatedResponse
-     */
-    storeId?: string;
-    /**
-     * 
-     * @type {ProductVariant}
-     * @memberof InventoryPaginatedResponse
-     */
-    variant?: ProductVariant;
-    /**
-     * 
-     * @type {number}
-     * @memberof InventoryPaginatedResponse
-     */
-    quantity?: number;
-    /**
-     * 
-     * @type {string}
-     * @memberof InventoryPaginatedResponse
-     */
-    status?: InventoryPaginatedResponseStatusEnum;
-    /**
-     * 
-     * @type {number}
-     * @memberof InventoryPaginatedResponse
-     */
-    total: number;
-    /**
-     * 
-     * @type {number}
-     * @memberof InventoryPaginatedResponse
-     */
-    page: number;
-    /**
-     * 
-     * @type {number}
-     * @memberof InventoryPaginatedResponse
-     */
-    limit: number;
-}
-
-/**
-    * @export
-    * @enum {string}
-    */
-export enum InventoryPaginatedResponseStatusEnum {
-    INSTOCK = 'IN_STOCK',
-    OUTOFSTOCK = 'OUT_OF_STOCK',
-    LOWSTOCK = 'LOW_STOCK'
-}
-

package/src/lib/api/auth.ts

@@ -1,81 +0,0 @@
-import { authAdapter } from '@/lib/api-adapter';
-import { User, ApiResponse, LoginCredentials, RegisterData, AuthTokens } from '@/lib/types';
-
-export const authApi = {
-  /**
-   * Register a new user
-   */
-  async register(data: RegisterData): Promise<ApiResponse<{ user: User; tokens: AuthTokens }>> {
-    const response = await authAdapter.register(data);
-    return {
-      ...response,
-      data: {
-        user: response.data.user,
-        tokens: {
-          accessToken: response.data.token,
-          refreshToken: response.data.token, // Backend uses single token
-        },
-      },
-    };
-  },
-
-  /**
-   * Login user
-   */
-  async login(credentials: LoginCredentials): Promise<ApiResponse<{ user: User; tokens: AuthTokens }>> {
-    const response = await authAdapter.login(credentials);
-    return {
-      ...response,
-      data: {
-        user: response.data.user,
-        tokens: {
-          accessToken: response.data.token,
-          refreshToken: response.data.token, // Backend uses single token
-        },
-      },
-    };
-  },
-
-  /**
-   * Logout user
-   */
-  async logout(): Promise<void> {
-    await authAdapter.logout();
-  },
-
-  /**
-   * Get current user
-   */
-  async getCurrentUser(): Promise<ApiResponse<User>> {
-    return await authAdapter.getCurrentUser();
-  },
-
-  /**
-   * Update user profile
-   */
-  async updateProfile(data: Partial<User>): Promise<ApiResponse<User>> {
-    return await authAdapter.updateProfile(data);
-  },
-
-  /**
-   * Change password
-   */
-  async changePassword(currentPassword: string, newPassword: string): Promise<ApiResponse<void>> {
-    return await authAdapter.changePassword(currentPassword, newPassword);
-  },
-
-  /**
-   * Request password reset
-   */
-  async forgotPassword(email: string): Promise<ApiResponse<void>> {
-    return await authAdapter.forgotPassword(email);
-  },
-
-  /**
-   * Reset password with token
-   */
-  async resetPassword(token: string, newPassword: string): Promise<ApiResponse<void>> {
-    return await authAdapter.resetPassword(token, newPassword);
-  },
-};
-

package/src/lib/api/cart.ts

@@ -1,42 +0,0 @@
-import { cartAdapter } from '@/lib/api-adapter';
-import { Cart, ApiResponse } from '@/lib/types';
-
-export const cartApi = {
-  /**
-   * Get user's cart
-   */
-  async getCart(): Promise<ApiResponse<Cart>> {
-    return await cartAdapter.getCart();
-  },
-
-  /**
-   * Add item to cart
-   * Note: Backend uses product variants. If variant ID not provided, uses product ID as variant
-   */
-  async addToCart(productId: string, quantity: number = 1): Promise<ApiResponse<Cart>> {
-    // Use product ID as variant ID for simplified products
-    return await cartAdapter.addToCart(productId, productId, quantity);
-  },
-
-  /**
-   * Update cart item quantity
-   */
-  async updateCartItem(productId: string, quantity: number): Promise<ApiResponse<Cart>> {
-    return await cartAdapter.updateCartItem(productId, productId, quantity);
-  },
-
-  /**
-   * Remove item from cart
-   */
-  async removeFromCart(productId: string): Promise<ApiResponse<Cart>> {
-    return await cartAdapter.removeFromCart(productId, productId);
-  },
-
-  /**
-   * Clear cart
-   */
-  async clearCart(): Promise<ApiResponse<void>> {
-    return await cartAdapter.clearCart();
-  },
-};
-