hey-pharmacist-ecommerce 1.0.5 → 1.0.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "hey-pharmacist-ecommerce",
-  "version": "1.0.5",
-  "description": "Multi-tenant e-commerce package for Next.js",
+  "version": "1.0.7",
+  "description": "Production-ready, multi-tenant e‑commerce UI + API adapter for Next.js with auth, carts, checkout, orders, theming, and pharmacist-focused UX.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -12,39 +12,42 @@
   "scripts": {
     "dev": "next dev",
     "build": "tsup",
+    "build:watch": "tsup --watch",
     "lint": "next lint",
-    "type-check": "tsc --noEmit"
+    "type-check": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.3.0",
+    "@tanstack/react-query": "^5.90.5",
     "axios": "^1.6.0",
-    "framer-motion": "^10.16.0",
+    "cookies-next": "^4.0.0",
+    "framer-motion": "^10.12.18",
     "lucide-react": "^0.294.0",
-    "zod": "^3.22.0",
-    "@hookform/resolvers": "^3.3.0",
+    "react-hook-form": "^7.0.0",
     "sonner": "^1.2.0",
-    "zustand": "^4.4.0",
-    "cookies-next": "^4.0.0",
-    "react-hook-form": "^7.48.0"
+    "zod": "^3.22.0",
+    "zustand": "^4.4.0"
   },
   "devDependencies": {
     "@types/node": "^20.0.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
-    "typescript": "^5.3.0",
-    "tailwindcss": "^3.3.0",
-    "postcss": "^8.4.0",
     "autoprefixer": "^10.4.0",
-    "tsup": "^8.0.0",
     "eslint": "^8.0.0",
     "eslint-config-next": "^14.0.0",
+    "next": "^14.0.0",
+    "postcss": "^8.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "next": "^14.0.0"
+    "tailwindcss": "^3.3.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.3.0"
   },
   "peerDependencies": {
+    "next": "^14.0.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "next": "^14.0.0",
     "react-hook-form": "^7.0.0"
   },
   "keywords": [

package/src/components/AddressFormModal.tsx

@@ -0,0 +1,171 @@
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Button } from '@/components/ui/Button';
+import { Input } from '@/components/ui/Input';
+import { Modal } from '@/components/ui/Modal';
+import { addressSchema, type AddressFormData } from '@/lib/validations/address';
+import { AddressesApi } from '@/lib/Apis/apis/addresses-api';
+import { Address } from '@/lib/Apis';
+import { AXIOS_CONFIG } from '@/lib/Apis/wrapper';
+import { toast } from 'sonner';
+
+interface AddressFormModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onAddressAdded?: (address: any) => void;
+  onAddressUpdated?: (address: any) => void;
+  initialAddress?: Address | null;
+}
+
+export function AddressFormModal({ isOpen, onClose, onAddressAdded, onAddressUpdated, initialAddress }: AddressFormModalProps) {
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const {
+    register,
+    handleSubmit,
+    reset,
+    formState: { errors }
+  } = useForm<AddressFormData>({
+    resolver: zodResolver(addressSchema),
+    defaultValues: {
+      name: initialAddress?.name || '',
+      phone: initialAddress?.phone || '',
+      street1: initialAddress?.street1 || '',
+      street2: initialAddress?.street2 || '',
+      city: initialAddress?.city || '',
+      state: initialAddress?.state || '',
+      zip: initialAddress?.zip || '',
+      country: initialAddress?.country || 'United States',
+    }
+  });
+
+  // Reset form when switching between create/edit
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useState(() => {
+    // Using useState initializer to avoid extra render; react-hook-form defaultValues handle initial load
+  });
+
+  const onSubmit = async (data: AddressFormData) => {
+    setIsSubmitting(true);
+    try {
+      const api = new AddressesApi(AXIOS_CONFIG);
+      if (initialAddress?.id) {
+        const response = await api.updateUserAddress({
+          name: data.name,
+          street1: data.street1,
+          street2: data.street2,
+          city: data.city,
+          state: data.state,
+          zip: data.zip,
+          country: data.country,
+          phone: data.phone,
+        }, initialAddress.id);
+        toast.success('Address updated successfully');
+        reset();
+        onClose();
+        if (onAddressUpdated) onAddressUpdated(response.data);
+      } else {
+        const response = await api.createAddressForUser({
+          name: data.name,
+          street1: data.street1,
+          street2: data.street2,
+          city: data.city,
+          state: data.state,
+          zip: data.zip,
+          country: data.country,
+          phone: data.phone,
+        });
+        if (response.status === 201) {
+          toast.success('Address added successfully');
+          reset();
+          onClose();
+          if (onAddressAdded) onAddressAdded(response.data);
+        } else {
+          toast.error('Failed to add address');
+        }
+      }
+    } catch (error) {
+      toast.error('Failed to add address');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={initialAddress ? 'Edit Address' : 'Add New Address'}
+      size="lg"
+    >
+      <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <Input
+            label="Full name"
+            placeholder="John Doe"
+            {...register('name')}
+            error={errors.name?.message}
+          />
+          <Input
+            label="Phone number"
+            placeholder="+1 (555) 123-4567"
+            {...register('phone')}
+            error={errors.phone?.message}
+          />
+          <div className="md:col-span-2">
+            <Input
+              label="Address line 1"
+              placeholder="123 Main St"
+              {...register('street1')}
+              error={errors.street1?.message}
+            />
+          </div>
+          <div className="md:col-span-2">
+            <Input
+              label="Address line 2 (optional)"
+              placeholder="Apt 4B"
+              {...register('street2')}
+            />
+          </div>
+          <Input
+            label="City"
+            placeholder="New York"
+            {...register('city')}
+            error={errors.city?.message}
+          />
+          <Input
+            label="State"
+            placeholder="NY"
+            {...register('state')}
+            error={errors.state?.message}
+          />
+          <Input
+            label="ZIP code"
+            placeholder="10001"
+            {...register('zip')}
+            error={errors.zip?.message}
+          />
+          <Input
+            label="Country"
+            placeholder="United States"
+            {...register('country')}
+            error={errors.country?.message}
+          />
+        </div>
+        <div className="flex justify-end gap-4">
+          <Button
+            type="button"
+            variant="outline"
+            onClick={onClose}
+          >
+            Cancel
+          </Button>
+          <Button type="submit" disabled={isSubmitting}>
+            {isSubmitting ? 'Adding Address...' : 'Add Address'}
+          </Button>
+        </div>
+      </form>
+    </Modal>
+  );
+}

package/src/components/CartItem.tsx

@@ -3,13 +3,14 @@
 import React, { useState } from 'react';
 import { motion } from 'framer-motion';
 import { Minus, Plus, Trash2 } from 'lucide-react';
-import { CartItem as CartItemType } from '@/lib/types';
 import { formatPrice } from '@/lib/utils/format';
 import { useCart } from '@/providers/CartProvider';
 import Image from 'next/image';
+import { CartItemPopulated } from '@/lib/Apis';
+
 
 interface CartItemProps {
-  item: CartItemType;
+  item: CartItemPopulated;
 }
 
 export function CartItem({ item }: CartItemProps) {
@@ -20,17 +21,17 @@ export function CartItem({ item }: CartItemProps) {
     if (newQuantity < 1) return;
     setIsUpdating(true);
     try {
-      await updateQuantity(item.productId, newQuantity);
+      await updateQuantity(item.productVariantId, newQuantity);
     } finally {
       setIsUpdating(false);
     }
   };
 
   const handleRemove = async () => {
-    await removeFromCart(item.productId);
+    await removeFromCart(item.productVariantId);
   };
 
-  const itemTotal = item.product.price * item.quantity;
+  const itemTotal = item.productVariantData.finalPrice * item.quantity;
 
   return (
     <motion.div
@@ -43,8 +44,8 @@ export function CartItem({ item }: CartItemProps) {
       {/* Product Image */}
       <div className="relative w-24 h-24 rounded-lg overflow-hidden flex-shrink-0 bg-gray-100">
         <Image
-          src={item.product.images[0] || '/placeholder-product.jpg'}
-          alt={item.product.name}
+          src={item.productVariantData.productMedia[0]?.file || '/placeholder-product.jpg'}
+          alt={item.productVariantData.name}
           fill
           className="object-cover"
         />
@@ -53,10 +54,10 @@ export function CartItem({ item }: CartItemProps) {
       {/* Product Info */}
       <div className="flex-1 min-w-0">
         <h3 className="text-lg font-semibold text-gray-900 truncate">
-          {item.product.name}
+          {item.productVariantData.name}
         </h3>
         <p className="text-sm text-gray-500 mt-1">
-          {formatPrice(item.product.price)} each
+          {formatPrice(item.productVariantData.finalPrice)} each
         </p>
 
         {/* Quantity Controls */}
@@ -64,17 +65,21 @@ export function CartItem({ item }: CartItemProps) {
           <div className="flex items-center border-2 border-gray-200 rounded-lg">
             <button
               onClick={() => handleUpdateQuantity(item.quantity - 1)}
-              disabled={isUpdating || item.quantity <= 1}
+              disabled={isUpdating || item.quantity <= 0}
               className="p-2 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               <Minus className="w-4 h-4" />
             </button>
             <span className="px-4 font-medium min-w-[3rem] text-center">
-              {item.quantity}
+              {isUpdating ? (
+                <span className="inline-block h-4 w-4 align-middle animate-spin rounded-full border-2 border-gray-300 border-t-gray-600" />
+              ) : (
+                item.quantity
+              )}
             </span>
             <button
               onClick={() => handleUpdateQuantity(item.quantity + 1)}
-              disabled={isUpdating}
+              disabled={isUpdating || item.quantity >= item.productVariantData.inventoryCount}
               className="p-2 hover:bg-gray-100 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               <Plus className="w-4 h-4" />

package/src/components/FilterChips.tsx

@@ -0,0 +1,195 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Check, Search } from 'lucide-react';
+
+interface FilterChipsProps {
+  label: string;
+  icon: React.ComponentType<{ className?: string }>;
+  filters: string[];
+  selected: string;
+  onSelect: (value: string) => void;
+  maxVisible?: number;
+  variant?: 'primary' | 'secondary';
+}
+
+export function FilterChips({
+  label,
+  icon: Icon,
+  filters,
+  selected,
+  onSelect,
+  maxVisible = 4,
+  variant = 'primary',
+}: FilterChipsProps) {
+  const [isOverflowOpen, setIsOverflowOpen] = useState(false);
+  const [filterSearchTerm, setFilterSearchTerm] = useState('');
+  const overflowMenuRef = useRef<HTMLDivElement | null>(null);
+
+  const color = variant === 'primary' ? 'primary' : 'secondary';
+
+  const { visibleFilters, overflowFilters } = useMemo(() => {
+    const basePrimary = filters.slice(0, maxVisible);
+
+    if (basePrimary.includes(selected)) {
+      return {
+        visibleFilters: basePrimary,
+        overflowFilters: filters.filter((filter) => !basePrimary.includes(filter)),
+      };
+    }
+
+    const adjustedPrimary = [
+      ...basePrimary.slice(0, maxVisible - 1),
+      selected,
+    ];
+
+    const uniquePrimary = adjustedPrimary.filter(
+      (filter, index, self) => self.indexOf(filter) === index
+    );
+
+    return {
+      visibleFilters: uniquePrimary,
+      overflowFilters: filters.filter((filter) => !uniquePrimary.includes(filter)),
+    };
+  }, [filters, maxVisible, selected]);
+
+  const filteredOverflowFilters = useMemo(() => {
+    if (!filterSearchTerm.trim()) return overflowFilters;
+    return overflowFilters.filter((filter) =>
+      filter.toLowerCase().includes(filterSearchTerm.toLowerCase())
+    );
+  }, [filterSearchTerm, overflowFilters]);
+
+  useEffect(() => {
+    if (!isOverflowOpen) {
+      setFilterSearchTerm('');
+    }
+  }, [isOverflowOpen]);
+
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (overflowMenuRef.current && !overflowMenuRef.current.contains(event.target as Node)) {
+        setIsOverflowOpen(false);
+      }
+    }
+
+    if (isOverflowOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isOverflowOpen]);
+
+  return (
+    <div className="flex flex-col gap-3 md:flex-row md:items-center md:gap-4">
+      <span className="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-600">
+        <Icon className="h-4 w-4" />
+        {label}
+      </span>
+      <div className="flex flex-col gap-2 md:flex-row md:items-center md:gap-3">
+        <div className="flex flex-wrap gap-2">
+          {visibleFilters.map((filter) => (
+            <button
+              key={filter}
+              type="button"
+              onClick={() => onSelect(filter)}
+              className={`rounded-full border px-3 py-1 text-sm font-medium transition ${
+                selected === filter
+                  ? `border-${color}-600 bg-${color}-600 text-white shadow-lg shadow-${color}-500/30`
+                  : `border-slate-200 bg-slate-50 text-slate-600 hover:border-${color}-300 hover:text-${color}-600`
+              }`}
+            >
+              {filter}
+            </button>
+          ))}
+        </div>
+
+        {overflowFilters.length > 0 && (
+          <div className="relative" ref={overflowMenuRef}>
+            <button
+              type="button"
+              onClick={() => setIsOverflowOpen((prev) => !prev)}
+              className={`flex items-center gap-2 rounded-full border px-3 py-1 text-sm font-medium transition ${
+                overflowFilters.includes(selected)
+                  ? `border-${color}-600 bg-${color}-50 text-${color}-700 shadow-lg shadow-${color}-500/20`
+                  : 'border-slate-200 bg-white text-slate-600 hover:border-slate-300'
+              }`}
+            >
+              <span>{overflowFilters.includes(selected) ? selected : 'More'}</span>
+              <span className={`inline-flex h-5 min-w-[1.5rem] items-center justify-center rounded-full bg-${color}-100 px-1 text-xs font-semibold text-${color}-600`}>
+                {overflowFilters.length}
+              </span>
+            </button>
+
+            <AnimatePresence>
+              {isOverflowOpen && (
+                <motion.div
+                  initial={{ opacity: 0, y: 8 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: 8 }}
+                  transition={{ duration: 0.15 }}
+                  className="absolute right-0 z-50 mt-2 w-64 rounded-2xl border border-slate-100 bg-white shadow-xl shadow-primary-50"
+                >
+                  <div className="border-b border-slate-100 px-4 py-3">
+                    <div className="relative">
+                      <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
+                      <input
+                        type="text"
+                        placeholder={`Search ${label.toLowerCase()}`}
+                        value={filterSearchTerm}
+                        onChange={(event) => setFilterSearchTerm(event.target.value)}
+                        className="w-full rounded-full border border-slate-200 bg-slate-50 py-2 pl-9 pr-3 text-sm text-slate-600 outline-none transition focus:border-primary-300 focus:bg-white focus:ring-2 focus:ring-primary-200"
+                      />
+                    </div>
+                  </div>
+                  <div className="max-h-60 overflow-y-auto px-2 py-2">
+                    {filteredOverflowFilters.length > 0 ? (
+                      filteredOverflowFilters.map((filter) => (
+                        <button
+                          key={filter}
+                          type="button"
+                          onClick={() => {
+                            onSelect(filter);
+                            setIsOverflowOpen(false);
+                          }}
+                          className={`flex w-full items-center justify-between rounded-xl px-3 py-2 text-sm font-medium transition ${
+                            selected === filter
+                              ? `bg-${color}-600 text-white shadow-lg shadow-${color}-500/30`
+                              : 'text-slate-600 hover:bg-slate-100'
+                          }`}
+                        >
+                          <span>{filter}</span>
+                          {selected === filter && <Check className="h-4 w-4" />}
+                        </button>
+                      ))
+                    ) : (
+                      <p className="px-3 py-4 text-sm text-slate-500">No items found.</p>
+                    )}
+                  </div>
+                  <div className="flex items-center justify-between gap-2 border-t border-slate-100 px-4 py-3">
+                    <span className="text-xs font-semibold uppercase tracking-wide text-slate-400">
+                      Quick actions
+                    </span>
+                    <button
+                      type="button"
+                      onClick={() => {
+                        onSelect('All');
+                        setIsOverflowOpen(false);
+                      }}
+                      className="text-xs font-semibold uppercase tracking-wide text-primary-600 hover:text-primary-700"
+                    >
+                      Reset to All
+                    </button>
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+