hey-pharmacist-ecommerce 1.1.35 → 1.1.36

package/package.json

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

@@ -1,5 +1,7 @@
 'use client';
 
+import { PLACEHOLDER_IMAGE_SRC } from '@/lib/constants/assets';
+
 import React from 'react';
 import { Package, Truck } from 'lucide-react';
 import { useCurrentOrders } from '@/hooks/useOrders';
@@ -102,7 +104,7 @@ export function AccountOrdersTab() {
                                         <div key={item.productVariantId || index} className="flex items-center gap-3">
                                             <div className="relative w-12 h-12 rounded-lg bg-slate-100 shrink-0 overflow-hidden">
                                                 <Image
-                                                    src={item?.productVariantData?.media?.[0]?.file || '/placeholder-product.png'}
+                                                    src={item?.productVariantData?.media?.[0]?.file || PLACEHOLDER_IMAGE_SRC}
                                                     alt={item?.productVariantData?.name || 'Product image'}
                                                     fill
                                                     className="object-cover"

package/src/components/CartItem.tsx

@@ -1,8 +1,11 @@
 'use client';
 
+import { PLACEHOLDER_IMAGE_SRC } from '@/lib/constants/assets';
+
 import React, { useState } from 'react';
 import { motion } from 'framer-motion';
 import { Minus, Plus, Trash2 } from 'lucide-react';
+
 import { formatPrice } from '@/lib/utils/format';
 import { useCart } from '@/providers/CartProvider';
 import Image from 'next/image';
@@ -52,10 +55,11 @@ export function CartItem({ item }: CartItemProps) {
 
 
       <div className="flex gap-4 pr-8">
-        {/* Product Image */}
+
+
         <div className="w-28 h-28 rounded-[16px] overflow-hidden bg-gray-50 shrink-0">
           <Image
-            src={item.productVariantData.media[0]?.file || '/placeholder-product.png'}
+            src={item.productVariantData.media[0]?.file || PLACEHOLDER_IMAGE_SRC}
             alt={item.productVariantData.name}
             className="w-full h-full object-cover"
             height={112}

package/src/components/OrderCard.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { PLACEHOLDER_IMAGE_SRC } from '@/lib/constants/assets';
+
 import React, { useRef, useState } from 'react';
 import { motion, useMotionValue, useTransform } from 'framer-motion';
 import { CreditCard, Star, Trash2 } from 'lucide-react';
@@ -106,7 +108,7 @@ export function OrderCard({ order, onDelete }: OrderCardProps) {
                 <div key={item.productVariantId || item._id} className="flex items-center gap-2 text-sm">
                   <div className="relative w-12 h-12 rounded-sm bg-gray-100 shrink-0 overflow-hidden">
                     <Image
-                      src={item?.productVariantData?.media?.[0]?.file || '/placeholder-product.png'}
+                      src={item?.productVariantData?.media?.[0]?.file || PLACEHOLDER_IMAGE_SRC}
                       alt={item?.productVariantData?.name || 'Product image'}
                       fill
                       className="object-cover"

package/src/components/ProductCard.tsx

@@ -13,6 +13,7 @@ import { useBasePath } from '@/providers/BasePathProvider';
 import { QuickViewModal } from './QuickViewModal';
 import { useNotification } from '@/providers/NotificationProvider';
 import { useAuth } from '@/providers/AuthProvider';
+import { PLACEHOLDER_IMAGE_SRC } from '@/lib/constants/assets';
 
 interface ProductCardProps {
   product: Product;
@@ -157,8 +158,12 @@ export function ProductCard({
     return selectedVariant ? selectedVariant.inventoryCount : product.variants?.[0]?.inventoryCount;
   }, [selectedVariant, product.variants]);
 
+
+
+  // ... (inside component)
+
   const imageSource = useMemo(() => {
-    const src = selectedVariantImage || selectedVariant?.media?.[0]?.file || product.media?.[0]?.file || '/placeholder-product.png';
+    const src = selectedVariantImage || selectedVariant?.media?.[0]?.file || product.media?.[0]?.file || PLACEHOLDER_IMAGE_SRC;
     return {
       src,
       alt: product.name || 'Product image'

package/src/lib/constants/assets.ts

@@ -0,0 +1 @@
+export const PLACEHOLDER_IMAGE_SRC = `data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAwIiBoZWlnaHQ9IjQwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZjNmNGY2Ii8+CiAgPHRleHQgeD0iNTAlIiB5PSI1MCUiIGZvbnQtZmFtaWx5PSJBcmlhbCIgZm9udC1zaXplPSIyNCIgZmlsbD0iIzljYTNhZiIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSI+Tm8gSW1hZ2U8L3RleHQ+CiAgPHJlY3QgeD0iMTUwIiB5PSIxMjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBzdHJva2U9IiM5Y2EzYWYiIHN0cm9rZS13aWR0aD0iNCIgZmlsbD0ibm9uZSIgcng9IjgiLz4KICA8cGF0aCBkPSJNMTUwIDE4MCBMMTcwIDE2MCBMMjAwIDE5MCBMMjIwIDE3MCBMMjUwIDIwMCBMMjUwIDIyMCBMMTUwIDIyMCBaIiBmaWxsPSIjOWNhM2FmIiBvcGFjaXR5PSIwLjUiLz4KPC9zdmc+`;

package/src/screens/CheckoutScreen.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { PLACEHOLDER_IMAGE_SRC } from '@/lib/constants/assets';
+
 import React, { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { useForm } from 'react-hook-form';
@@ -868,7 +870,7 @@ export function CheckoutScreen() {
                               {/* Provider Logo */}
                               <div className="shrink-0">
                                 <Image
-                                  src={rate.providerImage75 || '/placeholder-product.png'}
+                                  src={rate.providerImage75 || PLACEHOLDER_IMAGE_SRC}
                                   alt={rate.provider}
                                   className="w-12 h-12 rounded-lg object-contain bg-white border border-gray-200 p-1"
                                   onError={(e: any) => {
@@ -987,7 +989,7 @@ export function CheckoutScreen() {
                   {cart?.cartBody?.items?.map((item: any) => (
                     <div key={item.productVariantId || item.id} className="flex gap-3">
                       <div className="w-16 h-16 rounded-xl overflow-hidden bg-white shrink-0">
-                        <Image src={item.productVariantData?.media?.[0]?.file || '/placeholder-product.png'} alt={item.productVariantData.name} className="w-full h-full object-cover" height={200} width={200} />
+                        <Image src={item.productVariantData?.media?.[0]?.file || PLACEHOLDER_IMAGE_SRC} alt={item.productVariantData.name} className="w-full h-full object-cover" height={200} width={200} />
                       </div>
                       <div className="flex-1 min-w-0">
                         <p className="font-['Poppins',sans-serif] font-medium text-[12px] text-[#2B4B7C] mb-1">
@@ -1008,8 +1010,8 @@ export function CheckoutScreen() {
 
                 {/* Coupon Code Section */}
                 <div className="mb-6">
-                  <CouponCodeInput 
-                    userId={user?.id} 
+                  <CouponCodeInput
+                    userId={user?.id}
                     className="mb-4"
                   />
                 </div>

package/src/screens/OrderDetailScreen.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { PLACEHOLDER_IMAGE_SRC } from '@/lib/constants/assets';
+
 import React from 'react';
 import { motion } from 'framer-motion';
 import {
@@ -143,9 +145,11 @@ export function OrderDetailScreen({ id }: OrderDetailScreenProps) {
                         <div className="divide-y divide-slate-100">
                             {items.map((item, idx) => (
                                 <div key={item._id || idx} className="p-6 flex gap-6 group hover:bg-slate-50/50 transition-colors">
+
+
                                     <div className="relative w-20 h-20 bg-slate-100 rounded-2xl overflow-hidden shrink-0 border border-slate-100 group-hover:scale-105 transition-transform duration-300">
                                         <Image
-                                            src={item.productVariantData?.media?.[0]?.file || '/placeholder-product.png'}
+                                            src={item.productVariantData?.media?.[0]?.file || PLACEHOLDER_IMAGE_SRC}
                                             alt={item.productVariantData?.name || 'Item'}
                                             fill
                                             className="object-cover"

package/src/screens/ProductDetailScreen.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { PLACEHOLDER_IMAGE_SRC } from '@/lib/constants/assets';
+
 import React, { useEffect, useState, useMemo } from 'react';
 import { motion } from 'framer-motion';
 import {
@@ -555,7 +557,7 @@ export function ProductDetailScreen({ productId }: ProductDetailScreenProps) {
                           const variantImage = variant.media?.[0]?.file
                             || product.media?.[0]?.file
                             || product.images?.[0]
-                            || '/placeholder-product.png';
+                            || PLACEHOLDER_IMAGE_SRC;
                           return (
                             <button
                               key={variant._id}

package/src/screens/ShopScreen.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { PLACEHOLDER_IMAGE_SRC } from '@/lib/constants/assets';
+
 import {
   useCallback,
   useEffect,
@@ -1126,7 +1128,7 @@ export function ShopScreen({ initialFilters = {}, categoryName }: ShopScreenProp
                             >
                               <div className="relative h-48 w-full overflow-hidden rounded-2xl bg-gray-100 md:h-40 md:w-40">
                                 <Image
-                                  src={product.media?.[0]?.file || '/placeholder-product.png'}
+                                  src={product.media?.[0]?.file || PLACEHOLDER_IMAGE_SRC}
                                   alt={product.name}
                                   fill
                                   className="object-cover transition duration-500 group-hover:scale-105"

package/src/screens/WishlistScreen.tsx

@@ -1,5 +1,7 @@
 'use client';
 
+import { PLACEHOLDER_IMAGE_SRC } from '@/lib/constants/assets';
+
 import React, { useEffect, useMemo, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
@@ -347,7 +349,7 @@ export default function WishlistScreen() {
                                                             <div className="relative h-28 w-full overflow-hidden rounded-2xl bg-white sm:w-40">
                                                                 <Image
                                                                     fill
-                                                                    src={product.media?.[0]?.file || '/placeholder-product.png'}
+                                                                    src={product.media?.[0]?.file || PLACEHOLDER_IMAGE_SRC}
                                                                     alt={product.name || 'Wishlist item'}
                                                                     className="h-full w-full object-cover"
                                                                 />