Add progress bar for purchase intent sending

FEATURE: Real-time Progress Bar
- Add progress tracking in PurchaseBusinessService with onProgress callback
- Update usePurchaseIntent to track and expose progress (current/total/sellerPubkey)
- Add visual progress bar in PurchaseConfirmationModal during sending
- Progress bar shows: seller count (X of Y), percentage, animated bar

UI Enhancements:
- Blue-themed progress section between modal content and buttons
- Smooth animated progress bar with transition effects
- Real-time updates as each seller receives purchase intent
- Clean percentage display and current status text

Technical Implementation:
- Modified sendPurchaseIntent() to accept optional onProgress callback
- Progress state added to UsePurchaseIntentState interface
- Real-time state updates via setState callback during send loop
- Progress bar only shows when isLoading=true and progress data exists

User Experience:
- Users can now see exactly how many sellers are being contacted
- Visual feedback shows progress instead of generic 'Sending...'
- Builds confidence that the process is working
- Transparent communication during multi-seller purchases

Author: psam21

src/components/shop/PurchaseConfirmationModal.tsx

@@ -13,6 +13,11 @@ interface PurchaseConfirmationModalProps {
   items: CartItem[];
   total: number;
   isLoading?: boolean;
+  progress?: {
+    current: number;
+    total: number;
+    sellerPubkey: string;
+  } | null;
 }
 
 interface SellerGroup {
@@ -38,6 +43,7 @@ export default function PurchaseConfirmationModal({
   items,
   total,
   isLoading = false,
+  progress = null,
 }: PurchaseConfirmationModalProps) {
   const [sellerProfiles, setSellerProfiles] = useState<Map<string, SellerProfile>>(new Map());
 
@@ -246,6 +252,31 @@ export default function PurchaseConfirmationModal({
           </div>
         </div>
 
+        {/* Progress Bar - shown during loading */}
+        {isLoading && progress && (
+          <div className="px-6 py-4 border-t border-gray-200 bg-blue-50">
+            <div className="space-y-2">
+              <div className="flex justify-between items-center text-sm">
+                <span className="font-medium text-blue-900">
+                  Sending to sellers ({progress.current} of {progress.total})
+                </span>
+                <span className="text-blue-700">
+                  {Math.round((progress.current / progress.total) * 100)}%
+                </span>
+              </div>
+              <div className="w-full bg-blue-200 rounded-full h-2.5">
+                <div
+                  className="bg-blue-600 h-2.5 rounded-full transition-all duration-300 ease-out"
+                  style={{ width: `${(progress.current / progress.total) * 100}%` }}
+                />
+              </div>
+              <p className="text-xs text-blue-700">
+                Processing seller {progress.current}...
+              </p>
+            </div>
+          </div>
+        )}
+
         {/* Footer - Buttons */}
         <div className="px-6 py-4 border-t border-gray-200 bg-gray-50">
           <div className="flex gap-3 justify-end">

src/components/shop/PurchaseIntentButton.tsx

@@ -18,7 +18,7 @@ export function PurchaseIntentButton({ disabled = false, className = '' }: Purch
   const router = useRouter();
   const [showModal, setShowModal] = useState(false);
   const { items } = useCartStore();
-  const { loading, success, error, result, sendPurchaseIntent, reset } = usePurchaseIntent();
+  const { loading, success, error, result, progress, sendPurchaseIntent, reset } = usePurchaseIntent();
 
   // Calculate total in sats
   const total = items.reduce((sum, item) => sum + (item.price * item.quantity), 0);
@@ -137,6 +137,7 @@ export function PurchaseIntentButton({ disabled = false, className = '' }: Purch
         items={items}
         total={total}
         isLoading={loading}
+        progress={progress}
       />
     </>
   );

src/hooks/usePurchaseIntent.ts

@@ -22,6 +22,11 @@ interface UsePurchaseIntentState {
   success: boolean;
   error: string | null;
   result: PurchaseIntentResult | null;
+  progress: {
+    current: number;
+    total: number;
+    sellerPubkey: string;
+  } | null;
 }
 
 interface UsePurchaseIntentReturn extends UsePurchaseIntentState {
@@ -35,6 +40,7 @@ export function usePurchaseIntent(): UsePurchaseIntentReturn {
     success: false,
     error: null,
     result: null,
+    progress: null,
   });
 
   const signer = useAuthStore(state => state.signer);
@@ -58,6 +64,7 @@ export function usePurchaseIntent(): UsePurchaseIntentReturn {
       success: false,
       error: null,
       result: null,
+      progress: null,
     });
 
     try {
@@ -89,8 +96,18 @@ export function usePurchaseIntent(): UsePurchaseIntentReturn {
         itemCount: items.length,
       });
 
-      // Send purchase intent via business service
-      const result = await purchaseBusinessService.sendPurchaseIntent(items, signer);
+      // Send purchase intent via business service with progress callback
+      const result = await purchaseBusinessService.sendPurchaseIntent(
+        items, 
+        signer,
+        (current, total, sellerPubkey) => {
+          // Update progress in real-time
+          setState(prev => ({
+            ...prev,
+            progress: { current, total, sellerPubkey }
+          }));
+        }
+      );
 
       if (result.success) {
         // Success - set state first, then clear cart
@@ -99,6 +116,7 @@ export function usePurchaseIntent(): UsePurchaseIntentReturn {
           success: true,
           error: null,
           result,
+          progress: null,
         });
 
         logger.info('Purchase intent sent successfully - will clear cart after redirect', {
@@ -129,6 +147,7 @@ export function usePurchaseIntent(): UsePurchaseIntentReturn {
           success: false,
           error: result.error || 'Failed to send purchase intent',
           result,
+          progress: null,
         });
 
         logger.warn('Purchase intent partially failed', {
@@ -151,6 +170,7 @@ export function usePurchaseIntent(): UsePurchaseIntentReturn {
         success: false,
         error: errorMessage,
         result: null,
+        progress: null,
       });
 
       logger.error('Purchase intent failed', error instanceof Error ? error : new Error('Unknown error'), {
@@ -170,6 +190,7 @@ export function usePurchaseIntent(): UsePurchaseIntentReturn {
       success: false,
       error: null,
       result: null,
+      progress: null,
     });
   }, []);
 

src/services/business/PurchaseBusinessService.ts

@@ -183,23 +183,23 @@ export class PurchaseBusinessService {
   }
 
   /**
-   * Send purchase intent to all sellers
+   * Send purchase intent to all sellers via encrypted messaging (NIP-17)
    * 
-   * @param items - Cart items
-   * @param signer - Nostr signer for message encryption
+   * @param items - Cart items to send
+   * @param signer - Nostr signer for encryption and signing
+   * @param onProgress - Optional callback for progress updates
    * @returns Result of purchase intent sends
    */
   public async sendPurchaseIntent(
     items: CartItem[],
-    signer: NostrSigner
+    signer: NostrSigner,
+    onProgress?: (current: number, total: number, sellerPubkey: string) => void
   ): Promise<PurchaseIntentResult> {
     logger.info('Sending purchase intent', {
       service: 'PurchaseBusinessService',
       method: 'sendPurchaseIntent',
       itemCount: items.length,
-    });
-
-    // Validate cart
+    });    // Validate cart
     const validation = this.validateCart(items);
     if (!validation.valid) {
       logger.error('Cart validation failed', new Error('Cart validation failed'), {
@@ -225,7 +225,9 @@ export class PurchaseBusinessService {
     let successCount = 0;
     let failureCount = 0;
 
-    for (const sellerGroup of sellerGroups) {
+    for (let i = 0; i < sellerGroups.length; i++) {
+      const sellerGroup = sellerGroups[i];
+      
       try {
         // Prepare message content
         const messageContent = this.preparePurchaseIntent(sellerGroup);
@@ -250,6 +252,11 @@ export class PurchaseBusinessService {
             sellerPubkey: sellerGroup.sellerPubkey,
             messageId: sendResult.message?.id,
           });
+          
+          // Report progress
+          if (onProgress) {
+            onProgress(i + 1, sellerGroups.length, sellerGroup.sellerPubkey);
+          }
         } else {
           failureCount++;
           results.push({
@@ -263,6 +270,11 @@ export class PurchaseBusinessService {
             method: 'sendPurchaseIntent',
             sellerPubkey: sellerGroup.sellerPubkey,
           });
+          
+          // Report progress even on failure
+          if (onProgress) {
+            onProgress(i + 1, sellerGroups.length, sellerGroup.sellerPubkey);
+          }
         }
       } catch (error) {
         failureCount++;
@@ -278,6 +290,11 @@ export class PurchaseBusinessService {
           method: 'sendPurchaseIntent',
           sellerPubkey: sellerGroup.sellerPubkey,
         });
+        
+        // Report progress even on exception
+        if (onProgress) {
+          onProgress(i + 1, sellerGroups.length, sellerGroup.sellerPubkey);
+        }
       }
     }