hey-pharmacist-ecommerce 1.1.38 → 1.1.39

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hey-pharmacist-ecommerce",
-  "version": "1.1.38",
+  "version": "1.1.39",
   "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",

package/src/components/AccountOrdersTab.tsx

@@ -9,9 +9,13 @@ import { EmptyState } from './EmptyState';
 import { Badge } from './ui/Badge';
 import { formatPrice, formatDate } from '@/lib/utils/format';
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { useBasePath } from '@/providers/BasePathProvider';
 
 export function AccountOrdersTab() {
     const { orders, isLoading, error } = useCurrentOrders();
+    const router = useRouter();
+    const { buildPath } = useBasePath();
 
     if (isLoading) {
         return (
@@ -58,7 +62,8 @@ export function AccountOrdersTab() {
                 return (
                     <div
                         key={order._id}
-                        className="rounded-xl border border-slate-200 bg-white p-6 hover:shadow-md transition-shadow"
+                        onClick={() => router.push(buildPath(`/account/orders/${order._id}`))}
+                        className="rounded-xl border border-slate-200 bg-white p-6 hover:shadow-md transition-shadow cursor-pointer"
                     >
                         {/* Order Header */}
                         <div className="flex items-start justify-between mb-4 pb-4 border-b border-slate-200">

package/src/components/AccountOverviewTab.tsx

@@ -96,7 +96,7 @@ export function AccountOverviewTab() {
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                     <div className="flex items-start gap-3">
                         <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
-                            <User className="h-5 w-5 text-[#5B9BD5]" />
+                            <User className="h-5 w-5 text-secondary" />
                         </div>
                         <div>
                             <p className="text-xs text-muted">Full Name</p>
@@ -107,7 +107,7 @@ export function AccountOverviewTab() {
                     </div>
                     <div className="flex items-start gap-3">
                         <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
-                            <Mail className="h-5 w-5 text-[#5B9BD5]" />
+                            <Mail className="h-5 w-5 text-secondary" />
                         </div>
                         <div>
                             <p className="text-xs text-muted">E-mail Address</p>
@@ -116,7 +116,7 @@ export function AccountOverviewTab() {
                     </div>
                     <div className="flex items-start gap-3">
                         <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
-                            <Phone className="h-5 w-5 text-[#5B9BD5]" />
+                            <Phone className="h-5 w-5 text-secondary" />
                         </div>
                         <div>
                             <p className="text-xs text-muted">Phone Number</p>
@@ -127,7 +127,7 @@ export function AccountOverviewTab() {
                     </div>
                     <div className="flex items-start gap-3">
                         <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-[#DBEAFE]">
-                            <MapPin className="h-5 w-5 text-[#5B9BD5]" />
+                            <MapPin className="h-5 w-5 text-secondary" />
                         </div>
                         <div>
                             <p className="text-xs text-muted">Date of Birth</p>
@@ -168,7 +168,8 @@ export function AccountOverviewTab() {
                         {recentOrders.map((order) => (
                             <div
                                 key={order._id}
-                                className="flex items-center justify-between rounded-lg bg-slate-50 p-4 hover:bg-slate-100 transition-colors"
+                                onClick={() => router.push(buildPath(`/account/orders/${order._id}`))}
+                                className="flex items-center justify-between rounded-lg bg-slate-50 p-4 hover:bg-slate-100 transition-colors cursor-pointer"
                             >
                                 <div className="flex items-center gap-3">
                                     <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-white">

package/src/components/AccountReviewsTab.tsx

@@ -76,7 +76,7 @@ export function AccountReviewsTab() {
         </div>
         <button
           onClick={() => router.push(buildPath('/reviews'))}
-          className="inline-flex items-center gap-2 px-4 py-2 border border-[#E67E50] text-[#E67E50] rounded-lg font-medium hover:bg-[#E67E50]/5 transition-colors text-sm"
+          className="inline-flex items-center gap-2 px-4 py-2 border border-secondary text-secondary rounded-lg font-medium hover:bg-secondary/5 transition-colors text-sm"
         >
           <MessageSquare className="size-4" />
           Write a Review

package/src/components/CartItem.tsx

@@ -50,7 +50,7 @@ export function CartItem({ item }: CartItemProps) {
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       exit={{ opacity: 0, x: -100 }}
-      className="bg-white border-2 border-gray-100 rounded-[24px] p-6 hover:border-[#5B9BD5]/30 transition-all duration-300"
+      className="bg-white border-2 border-gray-100 rounded-[24px] p-6 hover:border-secondary/30 transition-all duration-300"
     >
 
 
@@ -122,7 +122,7 @@ export function CartItem({ item }: CartItemProps) {
 
             {/* Price */}
             <div className="text-right">
-              <p className="font-['Poppins',sans-serif] font-bold text-[18px] text-[#E67E50]">
+              <p className="font-['Poppins',sans-serif] font-bold text-[18px] text-secondary">
                 {formatPrice(itemTotal)}
               </p>
               <p className="font-['Poppins',sans-serif] text-[11px] text-[#676c80]">

package/src/components/ProductCard.tsx

@@ -180,7 +180,7 @@ export function ProductCard({
   return (
     <>
       <motion.div
-        className="bg-white rounded-[16px] overflow-hidden border-2 border-gray-100 hover:border-[#5B9BD5] hover:shadow-lg transition-all duration-300 group h-full flex flex-col"
+        className="bg-white rounded-[16px] overflow-hidden border-2 border-gray-100 hover:border-secondary hover:shadow-lg transition-all duration-300 group h-full flex flex-col"
         whileHover={{ y: -4 }}
         onMouseEnter={() => setIsHovered(true)}
         onMouseLeave={() => setIsHovered(false)}
@@ -236,27 +236,10 @@ export function ProductCard({
                   <span className="font-['Poppins',sans-serif] font-bold text-[8px] uppercase">-{displayDiscountAmount}%</span>
                 </span>
               )}
-              {/* {product.dealOfWeek && (
-              <span className="bg-linear-to-r from-[#E67E50] to-[#d66f45] text-white rounded-full px-2 py-0.5 flex items-center gap-1">
-                <TrendingUp className="size-2.5" />
-                <span className="font-['Poppins',sans-serif] font-semibold text-[8px] uppercase">Deal</span>
-              </span>
-            )}
-            {product.bestseller && !product.dealOfWeek && (
-              <span className="bg-[#2B4B7C] text-white rounded-full px-2 py-0.5 flex items-center gap-1">
-                <TrendingUp className="size-2.5" />
-                <span className="font-['Poppins',sans-serif] font-semibold text-[8px] uppercase">Best</span>
-              </span>
-            )}
-            {product.newArrival && (
-              <span className="bg-[#5B9BD5] text-white rounded-full px-2 py-0.5 flex items-center gap-1">
-                <Sparkles className="size-2.5" />
-                <span className="font-['Poppins',sans-serif] font-semibold text-[8px] uppercase">New</span>
-              </span>
-            )} */}
+
             </div>
             <div className="mb-1">
-              <p className="font-['Poppins',sans-serif] text-xs text-[#5B9BD5] uppercase tracking-wide font-medium">
+              <p className="font-['Poppins',sans-serif] text-xs text-secondary uppercase tracking-wide font-medium">
                 {product.brand}
               </p>
             </div>
@@ -375,7 +358,7 @@ export function ProductCard({
               }
             }}
             disabled={isAddingToCart || (variantImages.length > 0 && !selectedVariantId) || displayInventoryCount === 0}
-            className="w-full font-['Poppins',sans-serif] font-medium text-[11px] px-3 py-2 rounded-full bg-[#5B9BD5] text-white hover:bg-[#4a8ac4] hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
+            className="w-full font-['Poppins',sans-serif] font-medium text-[11px] px-3 py-2 rounded-full bg-secondary text-white hover:bg-secondary/80 hover:shadow-lg transition-all duration-300 flex items-center justify-center gap-1.5 disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer"
           >
             <ShoppingCart className="h-4 w-4" />
             {displayInventoryCount === 0 ? 'Out of Stock' : 'Add to Cart'}

package/src/components/ReviewCard.tsx

@@ -19,8 +19,8 @@ export function ReviewCard({ review, showProductInfo = false }: ReviewCardProps)
     <div className="border border-gray-200 rounded-lg p-4 bg-white">
       <div className="flex items-start justify-between mb-3">
         <div className="flex items-center gap-3">
-          <div className="w-10 h-10 bg-[#E67E50]/10 rounded-full flex items-center justify-center">
-            <User className="size-5 text-[#E67E50]" />
+          <div className="w-10 h-10 bg-secondary/10 rounded-full flex items-center justify-center">
+            <User className="size-5 text-secondary" />
           </div>
           <div>
             <p className="font-medium text-gray-900">Customer Review</p>
@@ -41,9 +41,9 @@ export function ReviewCard({ review, showProductInfo = false }: ReviewCardProps)
       <p className="text-gray-700 text-sm leading-relaxed mb-3">{review.review}</p>
 
       {review.reply && (
-        <div className="mt-4 pl-4 border-l-2 border-[#E67E50] bg-gray-50 p-3 rounded">
+        <div className="mt-4 pl-4 border-l-2 border-secondary bg-gray-50 p-3 rounded">
           <div className="flex items-center gap-2 mb-2">
-            <MessageCircle className="size-4 text-[#E67E50]" />
+            <MessageCircle className="size-4 text-secondary" />
             <p className="text-xs font-medium text-gray-900">Store Response</p>
             {replyDate && (
               <p className="text-xs text-gray-500">

package/src/lib/types/index.ts

@@ -5,15 +5,13 @@ export interface EcommerceConfig {
   logo: string;
   colors: {
     primary: string;
+    primaryDark: string;
     secondary: string;
     accent: string;
+    accentDark: string;
+    textMuted: string;
   };
-  /** Optional hex colors to override header gradient */
-  headerGradient?: {
-    from: string; // hex color like #123456
-    via: string;  // hex color
-    to: string;   // hex color
-  };
+
   apiBaseUrl: string;
 }
 

package/src/providers/ThemeProvider.tsx

@@ -2,7 +2,7 @@
 
 import React, { createContext, useContext, useEffect } from 'react';
 import { EcommerceConfig } from '@/lib/types';
-import { generateColorShades, hexToRgb } from '@/lib/utils/colors';
+import { generateColorShades } from '@/lib/utils/colors';
 
 interface ThemeContextValue {
   config: EcommerceConfig;
@@ -47,20 +47,14 @@ export function ThemeProvider({ config, children }: ThemeProviderProps) {
       root.style.setProperty(`--color-accent-${shade}`, rgb);
     });
 
-    // Header gradient variables (rgb triplets)
-    if (config.headerGradient) {
-      const [fr, fg, fb] = hexToRgb(config.headerGradient.from);
-      const [vr, vg, vb] = hexToRgb(config.headerGradient.via);
-      const [tr, tg, tb] = hexToRgb(config.headerGradient.to);
-      root.style.setProperty(`--header-from`, `${fr} ${fg} ${fb}`);
-      root.style.setProperty(`--header-via`, `${vr} ${vg} ${vb}`);
-      root.style.setProperty(`--header-to`, `${tr} ${tg} ${tb}`);
-    } else {
-      // Fallback to theme shades matching existing design
-      root.style.setProperty(`--header-from`, primaryShades[700]);
-      root.style.setProperty(`--header-via`, primaryShades[600]);
-      root.style.setProperty(`--header-to`, secondaryShades[600]);
-    }
+    // Set base color variables from EcommerceConfig
+    root.style.setProperty('--color-primary', config.colors.primary);
+    root.style.setProperty('--color-primary-dark', config.colors.primaryDark);
+    root.style.setProperty('--color-secondary', config.colors.secondary);
+    root.style.setProperty('--color-accent', config.colors.accent);
+    root.style.setProperty('--color-accent-dark', config.colors.accentDark);
+    root.style.setProperty('--color-text-muted', config.colors.textMuted);
+
   }, [config]);
 
   return (

package/src/screens/CartScreen.tsx

@@ -59,7 +59,7 @@ export function CartScreen() {
                   <button
                     type="button"
                     onClick={() => router.push(buildPath('/shop'))}
-                    className="rounded-xl border-2 border-primary bg-primary text-white px-6 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2 hover:opacity-80"
+                    className="rounded-xl border-2 border-primary bg-secondary text-white px-6 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2 hover:opacity-80"
                   >
                     Discover products
                     <ArrowRight className="h-5 w-5" />
@@ -150,7 +150,7 @@ export function CartScreen() {
               transition={{ delay: 0.1 }}
               className="space-y-6 lg:sticky lg:top-24 h-fit lg:col-span-1"
             >
-              <div className="bg-linear-to-br from-[#5B9BD5]/10 to-[#2B4B7C]/10 rounded-[24px] p-8 border-2 border-[#5B9BD5]/20 sticky top-24">
+              <div className="bg-linear-to-br from-secondary/10 to-secondary/10 rounded-[24px] p-8 border-2 border-secondary/20 sticky top-24">
                 <h2 className="font-['Poppins',sans-serif] font-semibold text-secondary mb-6">Order Summary</h2>
 
                 <div className="space-y-4 mb-6">
@@ -176,7 +176,7 @@ export function CartScreen() {
                   <button
                     type="submit"
                     onClick={handleSubmit}
-                    className="w-full rounded-full border-2 border-[#E67E50] bg-[#E67E50] hover:bg-[#E67E50]/80 text-white px-4 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2"
+                    className="w-full rounded-full border-2 border-secondary bg-secondary hover:bg-secondary/80 text-white px-4 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2"
                   >
                     Proceed to Checkout
                     <ArrowRight className="h-5 w-5" />

package/src/screens/CheckoutScreen.tsx

@@ -979,8 +979,8 @@ export function CheckoutScreen() {
             className="space-y-10 lg:sticky lg:top-24 lg:col-span-1"
           >
             {/* Order Summary */}
-            <div className="bg-linear-to-br from-[#5B9BD5]/10 to-[#2B4B7C]/10 rounded-[24px] p-8 border-2 border-[#5B9BD5]/20 sticky top-24">
-              <h2 className="font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] mb-6 text-2xl">Order Summary</h2>
+            <div className="bg-linear-to-br from-secondary/10 to-secondary/10 rounded-[24px] p-8 border-2 border-secondary/20 sticky top-24">
+              <h2 className="font-['Poppins',sans-serif] font-semibold text-secondary mb-6 text-2xl">Order Summary</h2>
 
 
               {/* Cart Summary */}
@@ -998,7 +998,7 @@ export function CheckoutScreen() {
                         <p className="font-['Poppins',sans-serif] text-[11px] text-[#676c80]">
                           {item?.productVariantData?.brand} • Qty: {item.quantity}
                         </p>
-                        <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-[#E67E50] mt-1">
+                        <p className="font-['Poppins',sans-serif] font-semibold text-[12px] text-secondary mt-1">
                           {formatPrice(item.productVariantData.finalPrice * item.quantity)}
                         </p>
                       </div>
@@ -1006,7 +1006,7 @@ export function CheckoutScreen() {
                   ))}
                 </div>
 
-                <div className="h-px bg-[#5B9BD5]/20 my-4" />
+                <div className="h-px bg-secondary/20 my-4" />
 
                 {/* Coupon Code Section */}
                 <div className="mb-6">
@@ -1042,11 +1042,11 @@ export function CheckoutScreen() {
                     <span>Estimated tax</span>
                     <span className="font-semibold">{formatPrice(tax)}</span>
                   </div>
-                  <div className="h-px bg-[#5B9BD5]/20 mt-6" />
+                  <div className="h-px bg-secondary/20 mt-6" />
 
                   <div className="flex items-center justify-between mb-6">
-                    <span className="font-['Poppins',sans-serif] font-semibold text-[16px] text-[#2B4B7C]">Total</span>
-                    <span className="font-['Poppins',sans-serif] font-bold text-[24px] text-[#E67E50]">{formatPrice(total)}</span>
+                    <span className="font-['Poppins',sans-serif] font-semibold text-[16px] text-secondary">Total</span>
+                    <span className="font-['Poppins',sans-serif] font-bold text-[24px] text-secondary">{formatPrice(total)}</span>
                   </div>
                   {/* <p className="mt-1 text-xs text-slate-500">
                       Tax is estimated. Final amount confirmed after payment.
@@ -1055,7 +1055,7 @@ export function CheckoutScreen() {
 
                 <div className="bg-white/80 rounded-xl p-4">
                   <p className="font-['Poppins',sans-serif] text-[11px] text-[#676c80] leading-[1.6]">
-                    <strong className="text-[#2B4B7C]">Payment:</strong> We&apos;ll contact you to arrange payment upon pickup or delivery. We accept cash, credit cards, and all major payment methods.
+                    <strong className="text-secondary">Payment:</strong> We&apos;ll contact you to arrange payment upon pickup or delivery. We accept cash, credit cards, and all major payment methods.
                   </p>
                 </div>
               </section>
@@ -1093,7 +1093,7 @@ export function CheckoutScreen() {
               <button
                 type="submit"
                 disabled={isSubmitting}
-                className="font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-3 rounded-full text-white hover:bg-[#d66f45] hover:shadow-lg transition-all duration-300 mt-4 w-full bg-[#E67E50] hover:bg-[#2B4B7C] flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                className="font-['Poppins',sans-serif] font-medium text-[14px] px-6 py-3 rounded-full text-white hover:bg-[#d66f45] hover:shadow-lg transition-all duration-300 mt-4 w-full bg-secondary hover:bg-[#2B4B7C] flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
               >
                 <CreditCard className="h-5 w-5" />
                 {isSubmitting ? 'Placing order...' : 'Place Secure Order'}

package/src/screens/LoginScreen.tsx

@@ -99,7 +99,6 @@ export function LoginScreen() {
                       : 'border-red-200 bg-red-50 text-red-700'
                   }`}
                 >
-                  <span className=" text-base">{status.type === 'success' ? '✔' : '!'}</span>
                   <span>{status.message}</span>
                 </div>
               )}
@@ -133,14 +132,7 @@ export function LoginScreen() {
                 </button>
               </div>
 
-              <div className="flex items-center justify-between text-sm">
-                <label className="flex items-center gap-2 text-slate-600">
-                  <input
-                    type="checkbox"
-                    className="h-4 w-4 rounded-sm border-slate-300 text-primary-600 focus:ring-primary-500"
-                  />
-                  Remember me
-                </label>
+              <div className="flex items-center justify-end text-sm">
                 <Link
                   href={buildPath('/forgot-password')}
                   className="font-medium text-primary transition hover:opacity-80"

package/src/screens/OrderDetailScreen.tsx

@@ -2,7 +2,7 @@
 
 import { PLACEHOLDER_IMAGE_SRC } from '@/lib/constants/assets';
 
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import {
     ChevronLeft,
@@ -25,6 +25,8 @@ import { formatPrice, formatDate } from '@/lib/utils/format';
 import { Badge } from '@/components/ui/Badge';
 import { Button } from '@/components/ui/Button';
 import Image from 'next/image';
+import { ShippingApi } from '@/lib/Apis/apis/shipping-api';
+import { AXIOS_CONFIG } from '@/lib/Apis/wrapper';
 
 interface OrderDetailScreenProps {
     id: string;
@@ -34,6 +36,25 @@ export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
     const router = useRouter();
     const { buildPath } = useBasePath();
     const { order, isLoading, error } = useOrder(id);
+    const [storeAddress, setStoreAddress] = useState<any>(null);
+
+    // Fetch store address for pickup orders
+    useEffect(() => {
+        if (order && order.orderType !== 'Delivery' && !order.pickUpAddress) {
+            const fetchStoreAddress = async () => {
+                try {
+                    const api = new ShippingApi(AXIOS_CONFIG);
+                    const res = await api.getStoreAddress();
+                    if (res.data) {
+                        setStoreAddress(res.data);
+                    }
+                } catch (e) {
+                    console.error('Failed to fetch store address:', e);
+                }
+            };
+            fetchStoreAddress();
+        }
+    }, [order]);
 
     if (isLoading) {
         return (
@@ -76,7 +97,7 @@ export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
     };
 
     const shippingAddress = order.shippingInfo?.addressTo;
-    const pickupAddress = order.pickUpAddress;
+    const pickupAddress = order.pickUpAddress || storeAddress;
     const activeAddress = isDelivery ? shippingAddress : pickupAddress;
 
     return (

package/src/screens/ProductDetailScreen.tsx

@@ -669,7 +669,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                 </div>
 
                 {/* Benefits */}
-                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-6 bg-linear-to-br from-[#5B9BD5]/5 to-[#2B4B7C]/5 rounded-[24px]">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 p-6 bg-linear-to-br from-secondary/5 to-secondary/5 rounded-[24px]">
                   <div className="flex items-start gap-3">
                     <div className="size-10 rounded-full bg-white flex items-center justify-center shrink-0">
                       <Truck className="size-5 text-primary" />

package/src/screens/WishlistScreen.tsx

@@ -296,7 +296,7 @@ export default function WishlistScreen() {
                                                 <button
                                                     type="button"
                                                     onClick={() => router.push(buildPath('/shop'))}
-                                                    className="rounded-xl border-2 border-primary bg-primary text-white px-6 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2 hover:opacity-80"
+                                                    className="rounded-xl border-2 border-secondary bg-secondary text-white px-6 py-3 text-sm font-medium transition-colors flex items-center justify-center gap-2 hover:opacity-80"
                                                 >
                                                     Discover products
                                                 </button>

package/src/styles/globals.css

@@ -127,12 +127,7 @@
 
 @layer base {
   :root {
-    --color-primary: #5B9BD5;
-    --color-primary-dark: #4a8ac4;
-    --color-secondary: #2B4B7C;
-    --color-accent: #E67E50;
-    --color-accent-dark: #d66f45;
-    --color-text-muted: #676c80;
+    /* Base colors are set dynamically by ThemeProvider from EcommerceConfig */
   }
 
   * {