hey-pharmacist-ecommerce 1.1.28 → 1.1.29

package/package.json

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

@@ -102,7 +102,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?.productMedia?.[0]?.file || '/placeholder-product.jpg'}
+                                                    src={item?.productVariantData?.media?.[0]?.file || '/placeholder-product.jpg'}
                                                     alt={item?.productVariantData?.name || 'Product image'}
                                                     fill
                                                     className="object-cover"

package/src/components/AccountSettingsTab.tsx

@@ -1,17 +1,42 @@
 'use client';
 
 import React, { useState } from 'react';
-import { Bell, Lock, Trash2 } from 'lucide-react';
+import { Bell, Lock, Trash2, AlertTriangle } from 'lucide-react';
 import { Button } from './ui/Button';
+import { Modal } from './ui/Modal';
 import { useRouter } from 'next/navigation';
 import { useBasePath } from '@/providers/BasePathProvider';
+import { useAuth } from '@/providers/AuthProvider';
+import { UsersApi } from '@/lib/Apis/apis/users-api';
+import { AXIOS_CONFIG } from '@/lib/Apis/sharedConfig';
 
 export function AccountSettingsTab() {
     const router = useRouter();
     const { buildPath } = useBasePath();
+    const { logout } = useAuth();
     const [emailNotifications, setEmailNotifications] = useState(true);
     const [orderUpdates, setOrderUpdates] = useState(true);
     const [promotionalEmails, setPromotionalEmails] = useState(false);
+    const [showDeleteModal, setShowDeleteModal] = useState(false);
+    const [isDeleting, setIsDeleting] = useState(false);
+    const [deleteError, setDeleteError] = useState<string | null>(null);
+
+    const handleDeleteAccount = async () => {
+        setIsDeleting(true);
+        setDeleteError(null);
+        try {
+            const usersApi = new UsersApi(AXIOS_CONFIG);
+            await usersApi.deleteMyProfile();
+            // Logout and redirect to home
+            logout();
+            router.push(buildPath('/'));
+        } catch (error: any) {
+            setDeleteError(
+                error?.response?.data?.message || 'Failed to delete account. Please try again.'
+            );
+            setIsDeleting(false);
+        }
+    };
 
     return (
         <div className="p-6 space-y-6">
@@ -99,11 +124,7 @@ export function AccountSettingsTab() {
                             variant="outline-solid"
                             size="sm"
                             className="border-red-200 text-red-600 hover:bg-red-50"
-                            onClick={() => {
-                                if (confirm('Are you sure you want to delete your account? This action cannot be undone.')) {
-                                    alert('Account deletion functionality coming soon');
-                                }
-                            }}
+                            onClick={() => setShowDeleteModal(true)}
                         >
                             <Trash2 className="h-4 w-4" />
                             Delete
@@ -111,6 +132,67 @@ export function AccountSettingsTab() {
                     </div>
                 </div>
             </div>
+
+            {/* Delete Account Confirmation Modal */}
+            <Modal
+                isOpen={showDeleteModal}
+                onClose={() => {
+                    setShowDeleteModal(false);
+                    setDeleteError(null);
+                }}
+                title="Delete Account"
+            >
+                <div className="space-y-4">
+                    <div className="flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-4">
+                        <AlertTriangle className="h-5 w-5 text-red-600 mt-0.5 flex-shrink-0" />
+                        <div>
+                            <p className="text-sm font-semibold text-red-900">Warning: This action is permanent</p>
+                            <p className="text-sm text-red-700 mt-1">
+                                Deleting your account will permanently remove all your data, including:
+                            </p>
+                            <ul className="text-sm text-red-700 mt-2 ml-4 list-disc space-y-1">
+                                <li>Personal information and profile</li>
+                                <li>Order history and tracking</li>
+                                <li>Saved addresses and payment methods</li>
+                                <li>Wishlist items</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    {deleteError && (
+                        <div className="rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
+                            <span className="font-semibold">Error: </span>
+                            {deleteError}
+                        </div>
+                    )}
+
+                    <p className="text-sm text-slate-600">
+                        Are you absolutely sure you want to delete your account? This action cannot be undone.
+                    </p>
+
+                    <div className="flex gap-3 pt-2">
+                        <Button
+                            variant="outline-solid"
+                            onClick={() => {
+                                setShowDeleteModal(false);
+                                setDeleteError(null);
+                            }}
+                            disabled={isDeleting}
+                            className="flex-1"
+                        >
+                            Cancel
+                        </Button>
+                        <Button
+                            onClick={handleDeleteAccount}
+                            isLoading={isDeleting}
+                            disabled={isDeleting}
+                            className="flex-1 bg-red-600 hover:bg-red-700 text-white"
+                        >
+                            {isDeleting ? 'Deleting...' : 'Delete Account'}
+                        </Button>
+                    </div>
+                </div>
+            </Modal>
         </div>
     );
 }

package/src/components/CartItem.tsx

@@ -55,7 +55,7 @@ export function CartItem({ item }: CartItemProps) {
         {/* Product Image */}
         <div className="w-28 h-28 rounded-[16px] overflow-hidden bg-gray-50 shrink-0">
           <Image
-            src={item.productVariantData.productMedia[0]?.file || '/placeholder-product.jpg'}
+            src={item.productVariantData.media[0]?.file || '/placeholder-product.jpg'}
             alt={item.productVariantData.name}
             className="w-full h-full object-cover"
             height={112}

package/src/components/Header.tsx

@@ -101,13 +101,19 @@ export function Header() {
                         value={searchQuery}
                         onChange={(e) => setSearchQuery(e.target.value)}
                         onKeyDown={(e) => {
-                          if (e.key === 'Enter' && searchQuery.trim()) {
-                            window.location.href = buildPath(`/search?q=${encodeURIComponent(searchQuery.trim())}`);
+                          if (e.key === 'Enter') {
+                            const sanitized = searchQuery.trim().replace(/\s+/g, ' ');
+                            if (sanitized) {
+                              router.push(buildPath(`/search?q=${encodeURIComponent(sanitized)}`));
+                              setIsSearchOpen(false);
+                              setSearchQuery('');
+                            }
                           }
                         }}
                         placeholder="Search products..."
                         className="w-full outline-hidden text-gray-700"
                         autoFocus
+                        autoComplete="off"
                       />
                       {searchQuery && (
                         <button

package/src/components/OrderCard.tsx

@@ -15,9 +15,9 @@ interface OrderCardProps {
 export function OrderCard({ order }: OrderCardProps) {
   const config = order.orderStatus;
   const itemCount = order.items?.length || 0;
-  const showPriceBreakdown = (order.shippingCost && order.shippingCost > 0) || 
-                             (order.tax && order.tax > 0) || 
-                             (order.discountedAmount && order.discountedAmount > 0);
+  const showPriceBreakdown = (order.shippingCost && order.shippingCost > 0) ||
+    (order.tax && order.tax > 0) ||
+    (order.discountedAmount && order.discountedAmount > 0);
 
   return (
     <motion.div
@@ -55,7 +55,7 @@ export function OrderCard({ order }: 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?.productMedia?.[0]?.file || '/placeholder-product.jpg'}
+                    src={item?.productVariantData?.media?.[0]?.file || '/placeholder-product.jpg'}
                     alt={item?.productVariantData?.name || 'Product image'}
                     fill
                     className="object-cover"

package/src/components/ProductCard.tsx

@@ -1,9 +1,9 @@
 'use client';
 
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { motion, AnimatePresence } from 'framer-motion';
+import { motion } from 'framer-motion';
 import { Star, ShoppingCart, Eye } from 'lucide-react';
-import { ExtendedProductDTO, } from '@/lib/Apis';
+import { Product, } from '@/lib/Apis';
 import { formatPrice } from '@/lib/utils/format';
 import { useWishlist } from '@/providers/WishlistProvider';
 import { useCart } from '@/providers/CartProvider';
@@ -12,11 +12,12 @@ import { useRouter } from 'next/navigation';
 import { useBasePath } from '@/providers/BasePathProvider';
 import { QuickViewModal } from './QuickViewModal';
 import { useNotification } from '@/providers/NotificationProvider';
+import { useAuth } from '@/providers/AuthProvider';
 
 interface ProductCardProps {
-  product: ExtendedProductDTO;
-  onClickProduct?: (product: ExtendedProductDTO) => void;
-  onFavorite?: (product: ExtendedProductDTO) => void;
+  product: Product;
+  onClickProduct?: (product: Product) => void;
+  onFavorite?: (product: Product) => void;
   isFavorited?: boolean;
   showFavoriteButton?: boolean;
 }
@@ -30,6 +31,7 @@ export function ProductCard({
   className
 }: ProductCardProps & { className?: string }) {
   const router = useRouter();
+  const { isAuthenticated } = useAuth();
   const { buildPath } = useBasePath();
   const [isFavorite, setIsFavorite] = useState(isFavorited);
   const { addToWishlist, removeFromWishlist, isInWishlist } = useWishlist();
@@ -65,7 +67,7 @@ export function ProductCard({
           `${product.name} was removed from your wishlist.`
         );
       } else {
-        await addToWishlist(product as unknown as ExtendedProductDTO);
+        await addToWishlist(product as unknown as Product);
         setIsFavorite(true);
         notification.success(
           'Added to wishlist',
@@ -95,14 +97,14 @@ export function ProductCard({
     setIsImageLoaded(false);
 
     // Auto-select first variant if available
-    if (product.productVariants && product.productVariants.length > 0) {
-      const firstVariant = product.productVariants[0];
-      if (firstVariant.productMedia && firstVariant.productMedia.length > 0) {
-        setSelectedVariantImage(firstVariant.productMedia[0].file);
+    if (product.variants && product.variants.length > 0) {
+      const firstVariant = product.variants[0];
+      if (firstVariant.media && firstVariant.media.length > 0) {
+        setSelectedVariantImage(firstVariant.media[0].file);
         setSelectedVariantId(firstVariant.id || firstVariant._id || null);
       }
     }
-  }, [product._id, product.productVariants]);
+  }, [product._id, product.variants]);
 
   // Handle keyboard navigation
   const handleKeyDown = (e: React.KeyboardEvent) => {
@@ -115,58 +117,53 @@ export function ProductCard({
 
   // Get variant images (first image from each variant that has images)
   const variantImages = useMemo(() => {
-    if (!product.productVariants || product.productVariants.length === 0) {
+    if (!product.variants || product.variants.length === 0) {
       return [];
     }
-    return product.productVariants
-      .filter((variant) => variant.productMedia && variant.productMedia.length > 0)
+    return product.variants
+      .filter((variant) => variant.media && variant.media.length > 0)
       .map((variant) => ({
         variantId: variant.id || variant._id,
         variantName: variant.name,
-        image: variant.productMedia[0].file,
+        image: variant.media[0].file,
       }));
-  }, [product.productVariants]);
+  }, [product.variants]);
 
   // Get selected variant
   const selectedVariant = useMemo(() => {
-    if (!selectedVariantId || !product.productVariants) return null;
-    return product.productVariants.find(
+    if (!selectedVariantId || !product.variants) return null;
+    return product.variants.find(
       (variant) => (variant.id || variant._id) === selectedVariantId
     );
-  }, [selectedVariantId, product.productVariants]);
-
-  // Get display name (variant name if selected, otherwise product name)
-  const displayName = useMemo(() => {
-    return selectedVariant?.name || product.name;
-  }, [selectedVariant, product.name]);
+  }, [selectedVariantId, product.variants]);
 
   const displayFinalPrice = useMemo(() => {
-    return selectedVariant?.finalPrice ?? product.finalPrice;
-  }, [selectedVariant, product.finalPrice]);
+    return selectedVariant?.finalPrice ?? product.variants?.[0]?.finalPrice ?? 0;
+  }, [selectedVariant, product.variants]);
 
   const displayPriceBeforeDiscount = useMemo(() => {
-    return selectedVariant?.retailPrice ?? product.priceBeforeDiscount;
-  }, [selectedVariant, product.priceBeforeDiscount]);
+    return selectedVariant?.retailPrice ?? product.variants?.[0]?.retailPrice ?? 0;
+  }, [selectedVariant, product.variants]);
 
   const displayIsDiscounted = useMemo(() => {
-    return selectedVariant ? selectedVariant.isDiscounted : product.isDiscounted;
-  }, [selectedVariant, product.isDiscounted]);
+    return selectedVariant ? selectedVariant.isDiscounted : product.variants?.[0]?.isDiscounted;
+  }, [selectedVariant, product.variants]);
 
   const displayDiscountAmount = useMemo(() => {
-    return selectedVariant ? selectedVariant.discountAmount : product.discountAmount;
-  }, [selectedVariant, product.discountAmount]);
+    return selectedVariant ? selectedVariant.discountAmount : product.variants?.[0]?.discountAmount;
+  }, [selectedVariant, product.variants]);
 
   const displayInventoryCount = useMemo(() => {
-    return selectedVariant ? selectedVariant.inventoryCount : product.inventoryCount;
-  }, [selectedVariant, product.inventoryCount]);
+    return selectedVariant ? selectedVariant.inventoryCount : product.variants?.[0]?.inventoryCount;
+  }, [selectedVariant, product.variants]);
 
   const imageSource = useMemo(() => {
-    const src = selectedVariantImage || product.productMedia?.[0]?.file || '/placeholder-product.jpg';
+    const src = selectedVariantImage || selectedVariant?.media?.[0]?.file || product.media?.[0]?.file || '/placeholder-product.jpg';
     return {
       src,
       alt: product.name || 'Product image'
     };
-  }, [product.productMedia, product.name, selectedVariantImage]);
+  }, [product.media, product.name, selectedVariantImage]);
 
   // Reset image loaded state when image source changes
   useEffect(() => {
@@ -261,24 +258,29 @@ export function ProductCard({
 
             <div className="h-[40px] mb-3">
               <h3 className="text-sm font-['Poppins',sans-serif] font-semibold text-[#2B4B7C] line-clamp-2">
-                {displayName}
+                {product.name}
               </h3>
+              {selectedVariant && (
+                <p className="text-xs font-['Poppins',sans-serif] text-[#676c80]">
+                  {selectedVariant.name}
+                </p>
+              )}
             </div>
             {/* Rating */}
-            <div className="flex items-center gap-1.5 mb-2">
+            <div className="flex items-center gap-1.5 ">
               <div className="flex items-center gap-0.5">
                 {[...Array(5)].map((_, i) => (
                   <Star
                     key={i}
-                    className={`size-4 ${i < Math.floor(product.rating ? product.rating : 0)
+                    className={`size-4 ${i < Math.floor(product.summary?.averageRating || 0)
                       ? 'text-[#E67E50] fill-[#E67E50]'
                       : 'text-gray-300'
                       }`}
                   />
                 ))}
               </div>
-              <span className="font-['Poppins',sans-serif] text-[10px] text-[#676c80]">
-                ({product.reviews?.length || 0})
+              <span className="font-['Poppins',sans-serif] text-[10px] text-[#676c80] mt-4">
+                ({product.summary?.reviewCount || 0})
               </span>
             </div>
 
@@ -289,7 +291,7 @@ export function ProductCard({
               </span>
               {displayIsDiscounted && (
                 <span className="font-['Poppins',sans-serif] text-sm text-[#676c80] line-through">
-                  ${formatPrice(displayPriceBeforeDiscount)}
+                  ${displayPriceBeforeDiscount.toFixed(2)}
                 </span>
               )}
             </div>
@@ -342,6 +344,21 @@ export function ProductCard({
                 );
                 return;
               }
+              if (displayInventoryCount === 0) {
+                notification.error(
+                  'Out of Stock',
+                  'This item is currently out of stock.'
+                );
+                return;
+              }
+              if (!isAuthenticated) {
+                notification.error(
+                  'Sign-in required',
+                  'Please sign in to add items to your cart.'
+                );
+                router.push(buildPath(`/login?redirect=${encodeURIComponent(window.location.pathname + window.location.search)}`));
+                return;
+              }
               try {
                 await addToCart(
                   product._id || product.id,

package/src/components/QuickViewModal.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { X, ShoppingCart, Check, Star, Package, ExternalLink, Minus, Plus } from 'lucide-react';
-import { ExtendedProductDTO, Product } from '@/lib/Apis';
+import { Product } from '@/lib/Apis';
 import { useCart } from '@/providers/CartProvider';
 import Image from 'next/image';
 import { ProductVariantInventoryStatusEnum } from '@/lib/Apis';
@@ -8,7 +8,7 @@ import { useNotification } from '@/providers/NotificationProvider';
 import Link from 'next/link';
 
 interface QuickViewModalProps {
-  product: ExtendedProductDTO;
+  product: Product;
   onClose: () => void;
   onNavigateToProduct?: (productId: string) => void;
 }
@@ -28,8 +28,8 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
       setQuantity(newQuantity);
     }
   };
-  const selectedVariant = product.productVariants[selectedVariantIndex];
-  const selectedSize = selectedVariant.productMedia[selectedSizeIndex];
+  const selectedVariant = product.variants[selectedVariantIndex];
+  const selectedSize = selectedVariant.media[selectedSizeIndex];
   const displayPrice = selectedVariant.finalPrice;
   const displayOriginalPrice = selectedVariant.retailPrice;
   const isDiscounted = selectedVariant.isDiscounted;
@@ -75,7 +75,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
           <div className="flex items-start justify-between mb-6">
             <div>
               <p className="font-['Poppins',sans-serif] text-[11px] text-primary uppercase tracking-wide font-medium mb-2">
-                {product.brand} • {product.parentCategories?.[0]?.name || 'Uncategorized'}
+                {product.brand}
               </p>
               <h2 className="font-['Poppins',sans-serif] font-semibold text-secondary tracking-[-1px]">
                 {displayName}
@@ -87,7 +87,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                   {[...Array(5)].map((_, i) => (
                     <Star
                       key={i}
-                      className={`size-4 ${i < Math.floor(product.rating ? product.rating : 0)
+                      className={`size-4 ${i < Math.floor(product.summary?.averageRating || 0)
                         ? 'text-accent fill-accent'
                         : 'text-gray-300'
                         }`}
@@ -95,7 +95,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                   ))}
                 </div>
                 <span className="font-['Poppins',sans-serif] text-[13px] text-muted">
-                  {product.rating} ({product.reviews ? product.reviews.length : 0} reviews)
+                  {product.summary?.averageRating || 0} ({product.summary?.reviewCount || 0} reviews)
                 </span>
               </div>
             </div>
@@ -112,7 +112,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
             <div className="space-y-4">
               <div className="relative aspect-3/4 rounded-[24px] overflow-hidden bg-gray-50">
                 <img
-                  src={selectedVariant.productMedia[selectedImageIndex]?.file || selectedVariant.productMedia[0]?.file}
+                  src={selectedVariant.media[selectedImageIndex]?.file || selectedVariant.media[0]?.file}
                   alt={product.name}
                   className="w-full h-full object-contain"
                 />
@@ -136,9 +136,9 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
               </div>
 
               {/* Thumbnail Images */}
-              {selectedVariant.productMedia.length > 1 && (
+              {selectedVariant.media.length > 1 && (
                 <div className="grid grid-cols-4 gap-3">
-                  {selectedVariant.productMedia.map((image: any, index: any) => (
+                  {selectedVariant.media.map((image: any, index: any) => (
                     <div
                       key={index}
                       className={`aspect-square rounded-xl overflow-hidden cursor-pointer transition-opacity ${selectedImageIndex === index ? 'ring-2 ring-primary' : 'bg-gray-50 hover:opacity-75'}`}
@@ -197,10 +197,10 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
               {/* Color Selection */}
               <div className="mb-6">
                 <h3 className="font-['Poppins',sans-serif] font-semibold text-[13px] text-secondary mb-3">
-                  Selected Variant: <span className="font-normal text-muted">{product.productVariants[selectedVariantIndex].name}</span>
+                  Selected Variant: <span className="font-normal text-muted">{product.variants[selectedVariantIndex].name}</span>
                 </h3>
                 <div className="flex flex-wrap gap-3">
-                  {product.productVariants.map((variant: any, index: any) => (
+                  {product.variants.map((variant: any, index: any) => (
                     <button
                       key={variant.id}
                       onClick={() => {
@@ -216,7 +216,7 @@ export function QuickViewModal({ product, onClose, onNavigateToProduct }: QuickV
                       title={variant.color}
                     >
                       <Image
-                        src={variant.productMedia?.[0]?.file || ''}
+                        src={variant.media?.[0]?.file || ''}
                         alt={variant.color || `Variant ${index + 1}`}
                         className="object-cover"
                         height={32}

package/src/hooks/useAddresses.ts

@@ -34,7 +34,10 @@ export function useAddresses(): UseAddressesReturn {
   const sortedAddresses = useMemo(() => {
     return [...addresses].sort((a, b) => {
       if (a.isDefault === b.isDefault) {
-        return (b.updatedAt.toISOString() || '').localeCompare(a.updatedAt.toISOString() || '');
+        // updatedAt is already a string from the API, so we can compare directly
+        const dateA = a.updatedAt || '';
+        const dateB = b.updatedAt || '';
+        return dateB.toString().localeCompare(dateA.toString());
       }
       return a.isDefault ? -1 : 1;
     });

package/src/hooks/usePaymentMethods.ts

@@ -1,47 +1,42 @@
 import { useState, useEffect, useCallback } from 'react';
-import { PaymentMethodsApi } from '@/lib/Apis';
-import { getApiConfiguration } from '@/lib/api-adapter';
-import { PaymentMethod } from '@/lib/Apis/models';
+
+// NOTE: PaymentMethodsApi and PaymentMethod were removed in the API refactoring.
+// This hook is stubbed out until the API is restored.
+// The AccountPaymentTab component will display an empty state.
+
+interface PaymentMethod {
+    id: string;
+    type: string;
+    last4?: string;
+    brand?: string;
+    expiryMonth?: number;
+    expiryYear?: number;
+    isDefault?: boolean;
+}
 
 export function usePaymentMethods() {
     const [paymentMethods, setPaymentMethods] = useState<PaymentMethod[]>([]);
-    const [isLoading, setIsLoading] = useState(true);
+    const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState<Error | null>(null);
 
     const fetchPaymentMethods = useCallback(async () => {
-        setIsLoading(true);
+        // Stubbed: API not available
+        setIsLoading(false);
+        setPaymentMethods([]);
         setError(null);
-        try {
-            const response = await new PaymentMethodsApi(getApiConfiguration()).getPaymentMethods();
-            setPaymentMethods(response.data.paymentMethods || []);
-        } catch (err) {
-            setError(err as Error);
-        } finally {
-            setIsLoading(false);
-        }
     }, []);
 
     const deletePaymentMethod = useCallback(async (paymentMethodId: string) => {
-        try {
-            await new PaymentMethodsApi(getApiConfiguration()).detachPaymentMethod({
-                paymentMethodId,
-            });
-            await fetchPaymentMethods();
-        } catch (err) {
-            throw err;
-        }
-    }, [fetchPaymentMethods]);
+        // Stubbed: API not available
+        console.warn('PaymentMethodsApi not available - deletePaymentMethod stubbed');
+        throw new Error('Payment methods API is not available');
+    }, []);
 
     const setDefaultPaymentMethod = useCallback(async (paymentMethodId: string) => {
-        try {
-            await new PaymentMethodsApi(getApiConfiguration()).changeDefaultPayment({
-                paymentMethodId,
-            });
-            await fetchPaymentMethods();
-        } catch (err) {
-            throw err;
-        }
-    }, [fetchPaymentMethods]);
+        // Stubbed: API not available
+        console.warn('PaymentMethodsApi not available - setDefaultPaymentMethod stubbed');
+        throw new Error('Payment methods API is not available');
+    }, []);
 
     useEffect(() => {
         fetchPaymentMethods();