@pradip1995/create-storefront 1.0.1

package/templates/storefront/src/modules/account/templates/return-request-template.tsx

@@ -0,0 +1,300 @@
+"use client"
+
+import { useActionState, useEffect, useState } from "react"
+import { HttpTypes } from "@medusajs/types"
+import { createReturnRequest } from "@core/data/returns"
+import { listPaymentDetails, createPaymentDetail, makeDefaultPaymentDetail } from "@core/data/payment-details"
+import { enhanceItemsWithReturnStatus } from "@core/util/returns"
+import ReturnItemSelector from "../components/return-item-selector"
+import ReturnShippingSelector from "../components/return-shipping-selector"
+import { Button, Heading, Text, Label, Input } from "@medusajs/ui"
+import LocalizedClientLink from "@modules/common/components/localized-client-link"
+
+type ReturnRequestTemplateProps = {
+    order: HttpTypes.StoreOrder & { cart_id?: string }
+    shippingOptions: HttpTypes.StoreShippingOption[]
+    returnReasons: HttpTypes.StoreReturnReason[]
+}
+
+const initialState = {
+    success: false,
+    error: null,
+    return: null,
+}
+
+const ReturnRequestTemplate = ({
+    order,
+    shippingOptions,
+    returnReasons,
+}: ReturnRequestTemplateProps) => {
+    // 1. ABSOLUTE GUEST DETECTION
+    const isGuest = !order.customer_id || order.customer_id === ""
+
+    const [items, setItems] = useState(enhanceItemsWithReturnStatus(order.items || []))
+    const [selectedItems, setSelectedItems] = useState<Array<{
+        id: string
+        quantity: number
+        return_reason_id?: string
+    }>>([])
+    const [selectedShippingOption, setSelectedShippingOption] = useState<string | null>(null)
+
+    const [paymentMethods, setPaymentMethods] = useState<any[]>([])
+    const [isLoadingPayments, setIsLoadingPayments] = useState(!isGuest)
+    const [selectedPaymentId, setSelectedPaymentId] = useState<string | null>(null)
+
+    const [state, formAction] = useActionState(createReturnRequest, initialState)
+    const [isLinkingPayment, setIsLinkingPayment] = useState(false)
+    const [paymentLinked, setPaymentLinked] = useState(false)
+    const [showRefundPopup, setShowRefundPopup] = useState(false)
+
+    // DIRECT SUBMIT FOR EVERYONE
+    const handleFormSubmit = async (formData: FormData) => {
+        formData.append("order_id", order.id)
+        formData.append("items", JSON.stringify(selectedItems))
+        if (selectedShippingOption) formData.append("return_shipping_option_id", selectedShippingOption)
+        const locId = formData.get("location_id") || (order as any).fulfillments?.[0]?.location_id
+        if (locId) formData.set("location_id", locId.toString())
+
+        formAction(formData)
+    }
+
+    const handleLinkPayment = async (paymentId: string) => {
+        if (!state.return?.id) return
+        setIsLinkingPayment(true)
+        setSelectedPaymentId(paymentId)
+        try {
+            const { updateReturnPayment } = await import("@core/data/returns")
+            const res = await updateReturnPayment(state.return.id, paymentId)
+            if (res.success) {
+                setPaymentLinked(true)
+                setTimeout(() => setShowRefundPopup(false), 1500)
+            }
+        } catch (e) {
+            console.error("Link fail", e)
+        } finally {
+            setIsLinkingPayment(false)
+        }
+    }
+
+    // ONLY FETCH PAYMENTS AFTER SUCCESSFUL RETURN (For Registered Users)
+    useEffect(() => {
+        if (state.success && state.return) {
+            // Scroll to top when success happens
+            window.scrollTo({ top: 0, behavior: 'smooth' })
+
+            if (!isGuest && !paymentLinked) {
+                // First fetch the methods
+                listPaymentDetails().then(methods => {
+                    setPaymentMethods(methods)
+                    const defaultMethod = methods.find((p: any) => p.is_default) || methods[0]
+                    if (defaultMethod) setSelectedPaymentId(defaultMethod.id)
+
+                    // Then show the popup
+                    const timer = setTimeout(() => setShowRefundPopup(true), 800)
+                    return () => clearTimeout(timer)
+                }).catch(() => {
+                    // If payment fetch fails, still show the finish screen
+                    console.error("Could not load payment methods")
+                })
+            }
+        }
+    }, [state.success, state.return, isGuest, paymentLinked])
+
+    // SCROLL TO TOP ON INITIAL MOUNT
+    useEffect(() => {
+        window.scrollTo({ top: 0, behavior: 'instant' as ScrollBehavior })
+    }, [])
+
+    const backToOrdersLink = isGuest ? `/orders/${order.id}` : "/account/orders"
+
+    if (state.success && state.return) {
+        return (
+            <div className="relative">
+        <div className="max-w-md mx-auto pt-16 sm:pt-20 pb-6 sm:pb-8 px-4 animate-in fade-in slide-in-from-bottom-4 duration-500">
+          <div className="bg-white border border-gray-200 rounded-2xl shadow-sm p-5 sm:p-6 space-y-4">
+            <div className="flex flex-col items-center text-center space-y-2">
+              <div className="w-14 h-14 bg-green-50 rounded-full flex items-center justify-center shadow-sm border border-green-200">
+                <svg className="w-7 h-7 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
+                  <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
+                </svg>
+              </div>
+              <Heading level="h1" className="text-2xl sm:text-3xl font-extrabold text-[#0D1B3E] tracking-tight">Return Requested!</Heading>
+              <Text className="text-gray-500 text-sm sm:text-base max-w-sm leading-snug">
+                Your return for order <span className="text-[#0D1B3E] font-bold">#{order.display_id}</span> has been submitted and is under review.
+              </Text>
+            </div>
+
+            <div className="space-y-3">
+              {!isGuest && !paymentLinked && !showRefundPopup && (
+                <Button 
+                  variant="secondary" 
+                  onClick={() => setShowRefundPopup(true)} 
+                  className="w-full rounded-xl h-11 font-bold text-brand-accent border border-brand-accent/30 bg-white hover:bg-brand-accent-muted transition-all text-sm"
+                >
+                  Link Refund Bank Account
+                </Button>
+              )}
+
+              {paymentLinked && (
+                <div className="bg-green-50/50 rounded-xl px-3 py-2.5 flex items-center gap-2.5 border border-green-200 animate-in zoom-in-95">
+                  <div className="w-7 h-7 bg-green-500 rounded-lg flex items-center justify-center text-inverse shrink-0">
+                    <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="3"><path d="M5 13l4 4L19 7" /></svg>
+                  </div>
+                  <div className="text-left min-w-0">
+                    <p className="text-green-900 font-bold text-sm leading-tight">Refund Method Linked</p>
+                    <p className="text-green-700/70 text-xs leading-snug">Funds will be credited to your selected account.</p>
+                  </div>
+                </div>
+              )}
+
+              <div className="bg-gray-50/50 rounded-xl px-4 py-3 flex flex-col items-center gap-1 border border-gray-200">
+                <span className="text-[10px] font-bold text-gray-400 uppercase tracking-[0.15em]">Request ID</span>
+                <span className="text-xs font-mono font-bold text-[#0D1B3E] break-all text-center select-all">{state.return.id}</span>
+              </div>
+
+              <LocalizedClientLink href={backToOrdersLink} className="block">
+                <Button className="w-full rounded-xl bg-[#0D1B3E] hover:bg-black text-inverse h-11 font-bold text-sm shadow-md shadow-gray-200/80 transition-all active:scale-95">
+                  Go to My Orders
+                </Button>
+              </LocalizedClientLink>
+            </div>
+          </div>
+        </div>
+
+                {/* REFUND POPUP FOR LOGIN USERS ONLY */}
+                {showRefundPopup && (
+                    <div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
+                        <div className="absolute inset-0 bg-gray-900/60 backdrop-blur-xl animate-in fade-in" onClick={() => setShowRefundPopup(false)} />
+                        <div className="relative w-full max-w-lg bg-page-bg rounded-[32px] sm:rounded-[40px] shadow-2xl p-6 sm:p-10 animate-in zoom-in-95 duration-300">
+                            <button onClick={() => setShowRefundPopup(false)} className="absolute top-5 right-5 sm:top-8 sm:right-8 text-gray-400 hover:text-heading"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5"><path d="M18 6L6 18M6 6l12 12" /></svg></button>
+
+                            <div className="text-center mb-6 sm:mb-8">
+                                <Heading level="h2" className="text-2xl sm:text-3xl font-black text-[#0D1B3E] tracking-tight">Refund Destination</Heading>
+                                <p className="text-gray-500 text-sm font-medium mt-2">Where should we send your money?</p>
+                            </div>
+
+                            <div className="space-y-3 sm:space-y-4 max-h-[40vh] overflow-y-auto px-1 custom-scrollbar mb-6 sm:mb-8">
+                                {paymentMethods.map(pm => (
+                                    <div key={pm.id} onClick={() => setSelectedPaymentId(pm.id)} className={`p-4 sm:p-6 rounded-2xl sm:rounded-3xl border-2 cursor-pointer transition-all ${selectedPaymentId === pm.id ? 'border-brand-accent bg-brand-accent-muted/50' : 'border-gray-50 bg-gray-50/50'}`}>
+                                        <div className="flex items-center justify-between">
+                                            <div className="flex flex-col">
+                                                <span className="font-bold text-[#0D1B3E] text-sm sm:text-base">{pm.type.toUpperCase()}: {pm.type === "upi" ? pm.detail_json?.upi_id : pm.detail_json?.bank_name}</span>
+                                            </div>
+                                            <div className={`w-6 h-6 sm:w-7 sm:h-7 rounded-full border-2 flex items-center justify-center shrink-0 ml-3 ${selectedPaymentId === pm.id ? 'border-brand-accent bg-brand-accent' : 'border-gray-200'}`}>
+                                                {selectedPaymentId === pm.id && <svg className="w-3 h-3 sm:w-4 sm:h-4 text-inverse" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="4"><path d="M5 13l4 4L19 7" /></svg>}
+                                            </div>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+
+                            <div className="flex flex-col gap-3 sm:gap-4">
+                                <Button
+                                    onClick={() => selectedPaymentId && handleLinkPayment(selectedPaymentId)}
+                                    disabled={!selectedPaymentId || isLinkingPayment || paymentLinked}
+                                    className={`w-full h-14 sm:h-16 rounded-2xl font-black text-base sm:text-lg transition-all ${paymentLinked ? 'bg-green-500' : 'bg-[#0D1B3E] hover:bg-black'} text-inverse`}
+                                >
+                                    {isLinkingPayment ? "Linking..." : paymentLinked ? "Linked Successfully!" : "Confirm & Link Account"}
+                                </Button>
+                                <button onClick={() => setShowRefundPopup(false)} className="text-gray-400 font-black uppercase text-[10px] tracking-widest hover:text-brand-accent">Skip for now</button>
+                            </div>
+                        </div>
+                    </div>
+                )}
+            </div>
+        )
+    }
+
+    return (
+        <div className="max-w-4xl mx-auto py-8 sm:py-12 px-4 sm:px-6">
+            <div className="mb-8 sm:mb-12">
+                <LocalizedClientLink href={`/orders/${order.id}`} className="text-[10px] sm:text-xs text-gray-400 hover:text-brand-accent mb-6 inline-flex gap-2 items-center font-bold tracking-[0.2em] transition-colors">
+                    <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.5"><path d="M15 19l-7-7 7-7" /></svg>
+                    BACK TO ORDER #{order.display_id}
+                </LocalizedClientLink>
+                <Heading level="h1" className="text-3xl sm:text-4xl md:text-5xl font-extrabold tracking-tight text-[#0D1B3E]">Return Request</Heading>
+                <p className="text-gray-400 font-medium text-sm sm:text-base mt-2">Follow the steps below to return items from your order.</p>
+            </div>
+
+            <form action={handleFormSubmit} className="space-y-6 sm:space-y-10 pb-12">
+                {state.error && (
+                    <div className="p-4 bg-red-50 text-red-700 rounded-2xl text-xs sm:text-sm font-bold border border-red-100 flex items-center gap-3 animate-in shake duration-500">
+                        <svg className="w-5 h-5 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.5"><path strokeLinecap="round" strokeLinejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>
+                        {state.error}
+                    </div>
+                )}
+
+                {/* STEP 1: SELECT ITEMS */}
+                <div className="space-y-4">
+                    <div className="flex items-center gap-3 px-2">
+                        <div className="w-6 h-6 rounded-lg bg-brand-accent text-inverse flex items-center justify-center font-bold text-[10px]">1</div>
+                        <h2 className="text-sm font-bold text-[#0D1B3E] uppercase tracking-wider">Select items to return</h2>
+                    </div>
+                    <div className="bg-white rounded-[2.5rem] border border-gray-100 shadow-sm p-4 sm:p-8">
+                        <ReturnItemSelector items={items} returnReasons={returnReasons} selectedItems={selectedItems} onItemSelectionChange={setSelectedItems} currencyCode={order.currency_code} />
+                    </div>
+                </div>
+
+                {/* STEP 2: SHIPPING METHOD (only if admin has return shipping options) */}
+                {selectedItems.length > 0 && shippingOptions.length > 0 && (
+                    <div className="space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-500">
+                        <div className="flex items-center gap-3 px-2">
+                            <div className="w-6 h-6 rounded-lg bg-brand-accent text-inverse flex items-center justify-center font-bold text-[10px]">2</div>
+                            <h2 className="text-sm font-bold text-[#0D1B3E] uppercase tracking-wider">Return Shipping</h2>
+                        </div>
+                        <div className="bg-white rounded-[2.5rem] border border-gray-100 shadow-sm p-4 sm:p-8">
+                            <ReturnShippingSelector shippingOptions={shippingOptions} selectedOption={selectedShippingOption} onOptionSelect={setSelectedShippingOption} cartId={order.cart_id || ""} currencyCode={order.currency_code} />
+                        </div>
+                        <input type="hidden" name="location_id" value={(order as any).fulfillments?.[0]?.location_id || "default_location"} />
+                    </div>
+                )}
+                {/* CONDITIONAL ADDITIONAL DETAILS SECTION */}
+                {selectedItems.length > 0 && (shippingOptions.length === 0 || selectedShippingOption) && (
+                    <div className="space-y-4 animate-in fade-in slide-in-from-bottom-4 duration-500">
+                        <div className="flex items-center gap-3 px-2">
+                            <div className="w-6 h-6 rounded-lg bg-brand-accent text-inverse flex items-center justify-center font-bold text-[10px]">
+                                {shippingOptions.length > 0 ? "3" : "2"}
+                            </div>
+                            <h2 className="text-sm font-bold text-[#0D1B3E] uppercase tracking-wider">Additional Details (Optional)</h2>
+                        </div>
+                        <div className="bg-white rounded-[2.5rem] border border-gray-100 shadow-sm p-4 sm:p-8">
+                            <textarea
+                                name="note"
+                                placeholder="Tell us more about the reason for your return..."
+                                className="w-full min-h-[120px] rounded-2xl border-gray-100 bg-gray-50/50 p-4 text-sm font-medium text-gray-700 outline-none focus:border-brand-accent/30 focus:ring-0 transition-all placeholder:text-gray-300 resize-none font-sans"
+                            />
+                        </div>
+                    </div>
+                )}
+
+                <div className="flex flex-col sm:flex-row items-center justify-end gap-3 pt-8 border-t border-gray-100 mt-8">
+                    <LocalizedClientLink href={`/orders/${order.id}`} className="w-full sm:w-auto">
+                        <Button variant="secondary" type="button" className="w-full h-11 rounded-3xl px-10 font-bold text-gray-400 border-none hover:bg-gray-50 transition-all uppercase tracking-widest text-[10px]">
+                            Cancel
+                        </Button>
+                    </LocalizedClientLink>
+                    
+                    <Button
+                        type="submit"
+                        disabled={
+                            selectedItems.length === 0 ||
+                            selectedItems.some(i => !i.return_reason_id) ||
+                            (shippingOptions.length > 0 && !selectedShippingOption)
+                        }
+                        className="w-full sm:w-auto h-11 rounded-3xl bg-[#0D1B3E] hover:bg-black text-inverse px-12 font-black text-xs uppercase tracking-widest shadow-lg shadow-gray-200 transition-all active:scale-95 disabled:opacity-20"
+                    >
+                        {selectedItems.length === 0
+                            ? "Select items"
+                            : selectedItems.some(i => !i.return_reason_id)
+                                ? "Select reasons"
+                                : shippingOptions.length > 0 && !selectedShippingOption
+                                    ? "Choose shipping"
+                                    : "Confirm Return Request"}
+                    </Button>
+                </div>
+            </form>
+        </div>
+    )
+}
+
+export default ReturnRequestTemplate

package/templates/storefront/src/modules/cart/components/abandoned-carts/ScrollToPendingOrdersButton.tsx

@@ -0,0 +1,21 @@
+"use client"
+
+export default function ScrollToPendingOrdersButton() {
+  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault()
+    const element = document.getElementById("abandoned-carts-section")
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth", block: "start" })
+    }
+  }
+
+  return (
+    <button
+      onClick={handleClick}
+      className="w-full min-[600px]:w-auto px-6 py-2.5 min-[600px]:px-4 min-[600px]:py-1.5 whitespace-nowrap bg-[#8B5AB1] hover:bg-[#7a4f9b] text-white text-[11px] sm:text-xs font-bold rounded-full shadow-sm transition-all duration-200 cursor-pointer active:scale-[0.98] flex items-center justify-center gap-2"
+    >
+      Complete Your Orders ✅
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M7 13l5 5 5-5M7 6l5 5 5-5" /></svg>
+    </button>
+  )
+}

package/templates/storefront/src/modules/cart/components/abandoned-carts/index.tsx

@@ -0,0 +1,335 @@
+"use client"
+
+import { HttpTypes } from "@medusajs/types"
+import { Button, Heading, Text } from "@medusajs/ui"
+import Link from "next/link"
+import { ShoppingBag, ArrowRight, Zap, RefreshCw, Loader2 } from "lucide-react"
+import { Trash } from "@medusajs/icons"
+import { useState, useTransition, useEffect } from "react"
+import { resumeAbandonedCart, deleteCart } from "@core/data/cart"
+import Modal from "@modules/common/components/modal"
+
+type AbandonedCartsProps = {
+  abandonedCarts?: {
+    buyNowCarts: HttpTypes.StoreCart[]
+    reorderCarts: HttpTypes.StoreCart[]
+  }
+  countryCode: string
+}
+
+export default function AbandonedCarts({ abandonedCarts, countryCode }: AbandonedCartsProps) {
+  const [dismissed, setDismissed] = useState<Record<string, boolean>>({})
+  const [isPending, startTransition] = useTransition()
+  const [resumingId, setResumingId] = useState<string | null>(null)
+  const [deletingId, setDeletingId] = useState<string | null>(null)
+  const [isDeleting, setIsDeleting] = useState(false)
+  const [expandedCarts, setExpandedCarts] = useState<Record<string, boolean>>({})
+  const [activeTab, setActiveTab] = useState<"buy_now" | "reorder">("buy_now")
+
+  const buyNowCarts = abandonedCarts?.buyNowCarts ?? []
+  const reorderCarts = abandonedCarts?.reorderCarts ?? []
+
+  const activeBuyNowCarts = buyNowCarts.filter(cart => !dismissed[cart.id])
+  const activeReorderCarts = reorderCarts.filter(cart => !dismissed[cart.id])
+
+  useEffect(() => {
+    if (activeBuyNowCarts.length === 0 && activeReorderCarts.length > 0 && activeTab === "buy_now") {
+      setActiveTab("reorder")
+    } else if (activeReorderCarts.length === 0 && activeBuyNowCarts.length > 0 && activeTab === "reorder") {
+      setActiveTab("buy_now")
+    }
+  }, [activeBuyNowCarts.length, activeReorderCarts.length, activeTab])
+
+  if (!abandonedCarts) return null
+
+  if (activeBuyNowCarts.length === 0 && activeReorderCarts.length === 0) return null
+
+  const handleDelete = async () => {
+    if (!deletingId) return
+    
+    setIsDeleting(true)
+    const result = await deleteCart(deletingId)
+    
+    if (result.success) {
+      setDismissed(prev => ({ ...prev, [deletingId]: true }))
+      setDeletingId(null)
+    }
+    setIsDeleting(false)
+  }
+
+  const handleResume = (cartId: string) => {
+    setResumingId(cartId)
+    startTransition(() => {
+      resumeAbandonedCart(cartId, countryCode)
+    })
+  }
+
+  const renderCartCard = (cart: HttpTypes.StoreCart, type: "buy_now" | "reorder") => {
+    const itemCount = cart.items?.reduce((acc, item) => acc + item.quantity, 0) || 0
+    const items = cart.items || []
+    const total = items.reduce((acc, item) => acc + (item.total || 0), 0).toFixed(2)
+    
+    const isBuyNow = type === "buy_now"
+    const isResuming = isPending && resumingId === cart.id
+
+    return (
+      <div key={cart.id} className="relative group bg-white border border-purple-100/80 rounded-xl p-3 md:p-4 shadow-sm hover:shadow-md hover:border-purple-200 transition-all duration-300">
+        <button
+          onClick={(e) => {
+            e.preventDefault()
+            e.stopPropagation()
+            setDeletingId(cart.id)
+          }}
+          className="absolute top-1.5 right-1.5 text-gray-400 hover:text-gray-900 bg-transparent hover:bg-purple-50/60 rounded-full p-2 transition-colors z-20 cursor-pointer"
+          title="Delete this cart"
+          disabled={isResuming || (isDeleting && deletingId === cart.id)}
+        >
+          {isDeleting && deletingId === cart.id ? (
+            <Loader2 className="w-4 h-4 animate-spin" />
+          ) : (
+            <Trash className="w-4 h-4 pointer-events-none" />
+          )}
+        </button>
+
+        <div className="flex flex-col gap-2 relative z-10">
+          {/* Badge */}
+          <div className="flex items-center gap-2">
+            <span className="text-[10px] font-bold uppercase tracking-wider text-[#8B5AB1] bg-[#8B5AB1]/10 px-2 py-0.5 rounded-md">
+              {isBuyNow ? "Buy Now Order" : "Reorder Order"}
+            </span>
+          </div>
+
+          {/* Items List */}
+          <div className="flex flex-col gap-2">
+            {(expandedCarts[cart.id] ? items : items.slice(0, 1)).map((item, index) => (
+              <div key={item.id} className={`flex items-center gap-3 ${index > 0 ? 'pt-2 border-t border-gray-100' : ''}`}>
+                <div className="w-16 h-16 rounded-lg bg-purple-50/60 flex items-center justify-center flex-shrink-0 overflow-hidden border border-purple-100/60">
+                  {item.thumbnail ? (
+                    <img src={item.thumbnail} alt={item.title} className="w-full h-full object-cover" />
+                  ) : (
+                    <ShoppingBag className="w-4 h-4 text-purple-200" />
+                  )}
+                </div>
+                <div className="flex-1 min-w-0">
+                  <h3 className="font-semibold text-gray-900 text-xs md:text-sm line-clamp-1">{item.title}</h3>
+                  <p className="text-gray-500 text-[11px] mt-0.5 font-medium">
+                    Qty: {item.quantity} &nbsp;•&nbsp; <span className="text-gray-900 font-semibold">₹{item.total?.toFixed(2) || '0.00'}</span>
+                  </p>
+                </div>
+              </div>
+            ))}
+            
+            {items.length > 1 && (
+              <div className="flex items-center gap-2.5 mt-1">
+                <button 
+                  onClick={(e) => {
+                    e.preventDefault()
+                    setExpandedCarts(prev => ({ ...prev, [cart.id]: !prev[cart.id] }))
+                  }}
+                  className="text-[10px] font-bold text-[#8B5AB1] hover:text-[#7a4f9b] transition-colors flex items-center gap-1.5 w-fit uppercase tracking-tight whitespace-nowrap"
+                >
+                  {expandedCarts[cart.id] ? "Show Less" : `+ View ${items.length - 1} more`}
+                </button>
+                
+                {!expandedCarts[cart.id] && (
+                  <div className="flex -space-x-1.5">
+                    {items.slice(1, 4).map((item, idx) => {
+                      const bgColors = ['bg-[#0D9488]', 'bg-[#1E293B]', 'bg-[#0891B2]']
+                      return (
+                        <div 
+                          key={item.id} 
+                          className={`w-5 h-5 rounded-full border border-white flex items-center justify-center overflow-hidden shadow-sm ${bgColors[idx % 3]}`}
+                          title={item.title}
+                        >
+                          {item.thumbnail ? (
+                            <img src={item.thumbnail} alt={item.title} className="w-full h-full object-cover" />
+                          ) : (
+                            <span className="text-[7px] font-bold text-white">
+                              {item.title?.split(' ').map(n => n[0]).join('').slice(0, 2).toUpperCase()}
+                            </span>
+                          )}
+                        </div>
+                      )
+                    })}
+                    {items.length > 4 && (
+                      <div className="w-5 h-5 rounded-full border border-white bg-purple-100 flex items-center justify-center text-[7px] font-bold text-[#8B5AB1] shadow-sm">
+                        +{items.length - 4}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          {/* Footer: Total + Resume Button */}
+          <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2 pt-2 border-t border-purple-100/40">
+            <p className="text-gray-600 text-xs font-medium">
+              {itemCount} {itemCount === 1 ? 'item' : 'items'} &nbsp;•&nbsp; Total: <span className="text-gray-900 font-bold text-sm">₹{total}</span>
+            </p>
+            <Button 
+              variant="primary"
+              onClick={() => handleResume(cart.id)}
+              disabled={isResuming || isDeleting}
+              className="w-full sm:w-auto rounded-xl bg-[#8B5AB1] hover:bg-[#7a4f9b] text-white shadow-[#8B5AB1]/20 hover:shadow-[#8B5AB1]/30 transition-all font-semibold flex items-center justify-center gap-2 h-9 px-4 text-sm group/btn"
+            >
+              {isResuming ? (
+                <>
+                  <Loader2 className="w-4 h-4 animate-spin" />
+                  Processing...
+                </>
+              ) : (
+                <>
+                  {isBuyNow ? "Continue Checkout" : "Continue Reorder"}
+                  <ArrowRight className="w-4 h-4 group-hover/btn:translate-x-1 transition-transform" />
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  const buyNowTotalItems = activeBuyNowCarts.reduce((acc, cart) => acc + (cart.items?.reduce((a, i) => a + i.quantity, 0) || 0), 0)
+  const reorderTotalItems = activeReorderCarts.reduce((acc, cart) => acc + (cart.items?.reduce((a, i) => a + i.quantity, 0) || 0), 0)
+
+  return (
+    <>
+      <div id="abandoned-carts-section" className="w-full flex flex-col gap-3 animate-in fade-in duration-500 scroll-mt-24 min-[1024px]:scroll-mt-32">
+        
+        {/* Tabs Navigation */}
+        {(activeBuyNowCarts.length > 0 && activeReorderCarts.length > 0) && (
+          <div className="flex items-center gap-1 bg-purple-50/50 p-1 rounded-2xl border border-purple-100/60 w-fit mx-auto">
+            <button
+              onClick={() => setActiveTab("buy_now")}
+              className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all ${activeTab === "buy_now" ? "bg-white text-[#8B5AB1] shadow-md shadow-purple-200/50" : "text-gray-500 hover:text-gray-900"}`}
+            >
+              Buy Now ({activeBuyNowCarts.length})
+            </button>
+            <button
+              onClick={() => setActiveTab("reorder")}
+              className={`px-6 py-2.5 rounded-xl text-sm font-bold transition-all ${activeTab === "reorder" ? "bg-white text-[#8B5AB1] shadow-md shadow-purple-200/50" : "text-gray-500 hover:text-gray-900"}`}
+            >
+              Reorder ({activeReorderCarts.length})
+            </button>
+          </div>
+        )}
+
+        {/* BUY NOW SECTION */}
+        {activeTab === "buy_now" && activeBuyNowCarts.length > 0 && (
+          <div className="bg-white rounded-2xl border border-purple-100/80 shadow-sm overflow-hidden relative">
+            <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-purple-50/50 to-purple-100/20 rounded-bl-[100px] -z-10 pointer-events-none" />
+            
+            <div className="p-3 md:p-4 border-b border-purple-100/60 flex items-start justify-between gap-3 md:gap-4">
+              <div className="flex items-start gap-2.5">
+                <div className="bg-[#8B5AB1]/10 p-1.5 rounded-lg shadow-sm border border-purple-100/50 flex-shrink-0">
+                  <Zap className="w-4 h-4 text-[#8B5AB1] fill-purple-100" />
+                </div>
+                <div>
+                  <h2 className="text-base font-bold text-gray-900 tracking-tight leading-tight">Pending Buy Now Order</h2>
+                  <p className="text-xs text-gray-500 mt-0.5 leading-relaxed">
+                    Your Buy Now items are pending. Proceed to checkout to complete your order.
+                  </p>
+                </div>
+              </div>
+              <div className="hidden sm:flex items-center mt-0.5">
+                <span className="text-[#8B5AB1] font-bold bg-[#8B5AB1]/10 px-2.5 py-1 rounded-full text-[11px] whitespace-nowrap border border-purple-100">
+                  {buyNowTotalItems} {buyNowTotalItems === 1 ? 'Item' : 'Items'} Pending
+                </span>
+              </div>
+            </div>
+            <div className={`p-3 md:p-4 grid gap-3 bg-purple-50/10 ${activeBuyNowCarts.length === 1 ? 'grid-cols-1' : 'grid-cols-1 md:grid-cols-2'}`}>
+              {/* Mobile items count */}
+              <div className="sm:hidden mb-1">
+                 <span className="text-[#8B5AB1] font-bold bg-[#8B5AB1]/10 px-3 py-1 rounded-full text-xs whitespace-nowrap border border-purple-100 inline-block">
+                  {buyNowTotalItems} {buyNowTotalItems === 1 ? 'Item' : 'Items'} Pending
+                </span>
+              </div>
+              {activeBuyNowCarts.map(cart => renderCartCard(cart, "buy_now"))}
+            </div>
+          </div>
+        )}
+
+        {/* REORDER SECTION */}
+        {(activeTab === "reorder" || activeBuyNowCarts.length === 0) && activeReorderCarts.length > 0 && (
+          <div className="bg-white rounded-2xl border border-purple-100/80 shadow-sm overflow-hidden relative">
+            <div className="absolute top-0 right-0 w-64 h-64 bg-gradient-to-br from-purple-50/50 to-purple-100/20 rounded-bl-[100px] -z-10 pointer-events-none" />
+            
+            <div className="p-3 md:p-4 border-b border-purple-100/60 flex items-start justify-between gap-3 md:gap-4">
+              <div className="flex items-start gap-2.5">
+                <div className="bg-[#8B5AB1]/10 p-1.5 rounded-lg shadow-sm border border-purple-100/50 flex-shrink-0">
+                  <RefreshCw className="w-4 h-4 text-[#8B5AB1]" />
+                </div>
+                <div>
+                  <h2 className="text-base font-bold text-gray-900 tracking-tight leading-tight">Pending Reorder Order</h2>
+                  <p className="text-xs text-gray-500 mt-0.5 leading-relaxed">
+                    Your reorder items are pending. Proceed to checkout to complete your order.
+                  </p>
+                </div>
+              </div>
+              <div className="hidden sm:flex items-center mt-0.5">
+                <span className="text-[#8B5AB1] font-bold bg-[#8B5AB1]/10 px-2.5 py-1 rounded-full text-[11px] whitespace-nowrap border border-purple-100">
+                  {reorderTotalItems} {reorderTotalItems === 1 ? 'Item' : 'Items'} Pending
+                </span>
+              </div>
+            </div>
+            <div className={`p-3 md:p-4 grid gap-3 bg-purple-50/10 ${activeReorderCarts.length === 1 ? 'grid-cols-1' : 'grid-cols-1 md:grid-cols-2'}`}>
+               {/* Mobile items count */}
+               <div className="sm:hidden mb-1">
+                 <span className="text-[#8B5AB1] font-bold bg-[#8B5AB1]/10 px-3 py-1 rounded-full text-xs whitespace-nowrap border border-purple-100 inline-block">
+                  {reorderTotalItems} {reorderTotalItems === 1 ? 'Item' : 'Items'} Pending
+                </span>
+              </div>
+              {activeReorderCarts.map(cart => renderCartCard(cart, "reorder"))}
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Confirmation Modal */}
+      <Modal isOpen={!!deletingId} close={() => setDeletingId(null)} size="xsmall">
+        <div className="p-7 md:p-9">
+          <div className="flex flex-col items-center text-center">
+            {/* Icon Container */}
+            <div className="w-13 h-13 rounded-full bg-[#FFF5F5] flex items-center justify-center mb-5">
+              <Trash className="w-6 h-6 text-[#F34E4E]" />
+            </div>
+            
+            {/* Title */}
+            <h2 className="text-xl md:text-2xl font-extrabold text-[#111827] mb-2 tracking-tight">
+              Remove Order?
+            </h2>
+            
+            {/* Description */}
+            <p className="text-[#6B7280] text-sm md:text-base leading-relaxed mb-7 max-w-[280px]">
+              Are you sure you want to remove this pending order? This action cannot be undone.
+            </p>
+            
+            {/* Actions */}
+            <div className="flex flex-row gap-3 w-full">
+              <button 
+                onClick={() => setDeletingId(null)}
+                disabled={isDeleting}
+                className="flex-1 bg-white hover:bg-gray-50 text-[#111827] font-bold h-[48px] rounded-xl text-sm md:text-base transition-all active:scale-[0.98] border-2 border-[#E5E7EB] disabled:opacity-70 disabled:cursor-not-allowed"
+              >
+                Cancel
+              </button>
+              <button 
+                onClick={handleDelete} 
+                disabled={isDeleting}
+                className="flex-1 bg-[#F34E4E] hover:bg-[#E03E3E] text-white font-bold h-[48px] rounded-xl text-sm md:text-base transition-all active:scale-[0.98] flex items-center justify-center border-2 border-[#111827] disabled:opacity-70 disabled:cursor-not-allowed"
+              >
+                {isDeleting ? (
+                  <Loader2 className="w-4 h-4 animate-spin text-white" />
+                ) : (
+                  "Yes, Remove"
+                )}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Modal>
+    </>
+  )
+}