hey-pharmacist-ecommerce 1.1.17 → 1.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hey-pharmacist-ecommerce",
-  "version": "1.1.17",
+  "version": "1.1.18",
   "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/ProductCard.tsx

@@ -141,6 +141,26 @@ export function ProductCard({
     return selectedVariant?.name || product.name;
   }, [selectedVariant, product.name]);
 
+  const displayFinalPrice = useMemo(() => {
+    return selectedVariant?.finalPrice ?? product.finalPrice;
+  }, [selectedVariant, product.finalPrice]);
+
+  const displayPriceBeforeDiscount = useMemo(() => {
+    return selectedVariant?.retailPrice ?? product.priceBeforeDiscount;
+  }, [selectedVariant, product.priceBeforeDiscount]);
+
+  const displayIsDiscounted = useMemo(() => {
+    return selectedVariant ? selectedVariant.isDiscounted : product.isDiscounted;
+  }, [selectedVariant, product.isDiscounted]);
+
+  const displayDiscountAmount = useMemo(() => {
+    return selectedVariant ? selectedVariant.discountAmount : product.discountAmount;
+  }, [selectedVariant, product.discountAmount]);
+
+  const displayInventoryCount = useMemo(() => {
+    return selectedVariant ? selectedVariant.inventoryCount : product.inventoryCount;
+  }, [selectedVariant, product.inventoryCount]);
+
   const imageSource = useMemo(() => {
     const src = selectedVariantImage || product.productMedia?.[0]?.file || '/placeholder-product.jpg';
     return {
@@ -194,7 +214,7 @@ export function ProductCard({
             <Eye className="size-4 text-[#2B4B7C]" />
           </button>
 
-          {product.inventoryCount === 0 && (
+          {displayInventoryCount === 0 && (
             <div className="absolute inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center">
               <div className="bg-white rounded-full px-4 py-2">
                 <span className="font-['Poppins',sans-serif] font-bold text-[11px] text-[#2B4B7C] uppercase">
@@ -210,9 +230,9 @@ export function ProductCard({
           <div className="p-0 flex-1 flex flex-col">
             {/* ALL Status Badges */}
             <div className="flex items-center gap-1 mb-2 flex-wrap">
-              {product.isDiscounted && (
+              {displayIsDiscounted && (
                 <span className="bg-[#E67E50] text-white rounded-full px-2 py-0.5 flex items-center gap-1">
-                  <span className="font-['Poppins',sans-serif] font-bold text-[8px] uppercase">-{product.discountAmount}%</span>
+                  <span className="font-['Poppins',sans-serif] font-bold text-[8px] uppercase">-{displayDiscountAmount}%</span>
                 </span>
               )}
               {/* {product.dealOfWeek && (
@@ -264,11 +284,11 @@ export function ProductCard({
             {/* Price */}
             <div className="flex items-center gap-1.5 mb-3">
               <span className="font-['Poppins',sans-serif] font-bold text-md text-primary-600">
-                ${product.finalPrice.toFixed(2)}
+                ${displayFinalPrice.toFixed(2)}
               </span>
-              {product.isDiscounted && (
+              {displayIsDiscounted && (
                 <span className="font-['Poppins',sans-serif] text-sm text-[#676c80] line-through">
-                  ${formatPrice(product.priceBeforeDiscount)}
+                  ${formatPrice(displayPriceBeforeDiscount)}
                 </span>
               )}
             </div>
@@ -331,11 +351,11 @@ export function ProductCard({
                 console.error('Failed to add to cart', error);
               }
             }}
-            disabled={isAddingToCart || (variantImages.length > 0 && !selectedVariantId)}
+            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"
           >
             <ShoppingCart className="h-4 w-4" />
-            {selectedVariant?.inventoryCount === 0 ? 'Out of Stock' : 'Add to Cart'}
+            {displayInventoryCount === 0 ? 'Out of Stock' : 'Add to Cart'}
           </button>
         </div>
 

package/src/components/QuickViewModal.tsx

@@ -29,7 +29,11 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
   };
   const selectedVariant = product.productVariants[selectedVariantIndex];
   const selectedSize = selectedVariant.productMedia[selectedSizeIndex];
-  const displayPrice = product.finalPrice;
+  const displayPrice = selectedVariant.finalPrice;
+  const displayOriginalPrice = selectedVariant.retailPrice;
+  const isDiscounted = selectedVariant.isDiscounted;
+  const discountAmount = selectedVariant.discountAmount;
+  const displayName = selectedVariant.name || product.name;
 
   const handleAddToCart = async () => {
     if (!product || !selectedVariant) return;
@@ -74,7 +78,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                 {product.brand} • {product.parentCategories[0].name}
               </p>
               <h2 className="font-['Poppins',sans-serif] font-semibold text-secondary tracking-[-1px]">
-                {product.name}
+                {displayName}
               </h2>
               
               {/* Rating */}
@@ -115,10 +119,10 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                 />
                 {/* Badges */}
                 <div className="absolute top-4 left-4 flex flex-col gap-2">
-                  {product.finalPrice && (
+                  {isDiscounted && (
                     <div className="bg-accent text-white rounded-full px-3 py-1.5">
                       <span className="font-['Poppins',sans-serif] font-bold text-[11px] uppercase">
-                        -{product.discountAmount}%
+                        -{discountAmount}%
                       </span>
                     </div>
                   )}
@@ -159,9 +163,9 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                 <span className="font-['Poppins',sans-serif] font-bold text-[32px] text-accent">
                   ${displayPrice.toFixed(2)}
                 </span>
-                {product.isDiscounted && (
+                {isDiscounted && (
                   <span className="font-['Poppins',sans-serif] text-[20px] text-muted line-through">
-                    ${product.finalPrice.toFixed(2)}
+                    ${displayOriginalPrice.toFixed(2)}
                   </span>
                 )}
               </div>
@@ -173,7 +177,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                     Out of Stock
                   </span>
                 ) : selectedVariant.inventoryCount <= 10 ? (
-                  <span className="font-['Poppins',sans-serif] text-[12px] text-orange-500 font-medium flex items-center gap-1">
+                  <span className="font-['Poppins',sans-serif] text-[12px] text-primary font-medium flex items-center gap-1">
                     <Package className="size-3" />
                     Only {selectedVariant.inventoryCount} left in stock
                   </span>

package/src/screens/CartScreen.tsx

@@ -167,7 +167,7 @@ export function CartScreen() {
                   <div className="border-t border-gray-200 pt-4 mt-4">
                     <div className="flex items-center justify-between">
                       <span className="text-lg font-bold text-secondary">Total</span>
-                      <span className="text-2xl font-bold text-orange-600">{formatPrice(total)}</span>
+                      <span className="text-2xl font-bold text-primary">{formatPrice(total)}</span>
                     </div>
                   </div>
                 </div>

package/src/screens/CheckoutScreen.tsx

@@ -668,7 +668,7 @@ export function CheckoutScreen() {
                                     {rate.provider} {rate.servicelevel?.name}
                                   </h3>
                                   {isTest && (
-                                    <span className="px-2 py-1 text-xs font-medium bg-orange-100 text-orange-800 rounded-full">
+                                    <span className="px-2 py-1 text-xs font-medium bg-primary-100 text-primary-800 rounded-full">
                                       TEST
                                     </span>
                                   )}
@@ -974,7 +974,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'll contact you to arrange payment upon pickup or delivery. We accept cash, credit cards, and all major payment methods.
+                    <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.
                   </p>
                 </div>
               </section>

package/src/screens/ProductDetailScreen.tsx

@@ -381,10 +381,10 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                       ) : null}
 
                       <div className="absolute top-6 left-6 flex flex-col gap-3">
-                        {product.salePrice && (
+                        {discount > 0 && (
                           <div className="bg-[#E67E50] text-white rounded-full px-4 py-2">
                             <span className="font-['Poppins',sans-serif] font-bold text-[12px] uppercase tracking-wide">
-                              Save {product.discount}%
+                              Save {discount}%
                             </span>
                           </div>
                         )}
@@ -442,7 +442,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                     {product.brand} • {product.parentCategories?.[0].name}
                   </p>
                   <h1 className="text-3xl font-['Poppins',sans-serif] font-semibold text-secondary tracking-[-1.5px] mb-3">
-                    {product.name}
+                    {selectedVariant?.name || product.name}
                   </h1>
                     {/* Rating */}
                 <div className="flex items-center gap-3">
@@ -465,16 +465,16 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
 
                   <div className="flex items-center gap-3 mb-6 pb-6 border-b-2 border-gray-100">
                     <span className="font-['Poppins',sans-serif] font-bold text-[40px] text-[#E67E50]">
-                      {selectedVariant ? formatPrice(selectedVariant.finalPrice) : formatPrice(product.finalPrice || product.price || 0)}
+                      ${variantPrice.toFixed(2)}
                     </span>
                     {variantComparePrice && variantComparePrice > variantPrice && (
                     <>
                       <span className="font-['Poppins',sans-serif] text-[24px] text-muted line-through">
-                        ${product.price.toFixed(2)}
+                        ${variantComparePrice.toFixed(2)}
                       </span>
                       <div className="px-3 py-1 rounded-full bg-[#E67E50]/10">
                         <span className="font-['Poppins',sans-serif] font-semibold text-[13px] text-[#E67E50]">
-                          Save ${formatPrice(variantComparePrice)}
+                          Save ${formatPrice(variantComparePrice - variantPrice)}
                         </span>
                       </div>
                     </>
@@ -495,8 +495,8 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                           </>
                         ) : selectedVariant.inventoryCount <= 10 ? (
                         <>
-                          <div className="size-3 rounded-full bg-orange-500 animate-pulse" />
-                          <span className="font-['Poppins',sans-serif] text-[13px] text-orange-600 font-medium">
+                          <div className="size-3 rounded-full bg-primary animate-pulse" />
+                          <span className="font-['Poppins',sans-serif] text-[13px] text-primary font-medium">
                             Only {selectedVariant.inventoryCount} left in stock - Order soon!
                           </span>
                         </>

package/src/screens/ShopScreen.tsx

@@ -881,8 +881,8 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
           >
             {/* Orange icon and badge */}
             <div className="flex items-center justify-center gap-2 mb-4">
-              <Star className="h-5 w-5 text-orange-500 fill-orange-500" />
-              <span className="text-sm font-semibold uppercase tracking-wider text-orange-500">
+              <Star className="h-5 w-5 text-primary fill-primary" />
+              <span className="text-sm font-semibold uppercase tracking-wider text-primary">
                 COMPLETE PHARMACY SHOP
               </span>
             </div>