{__('Payment Instructions')}
{['pending', 'on-hold', 'failed'].includes(order.status) && (
)}
```
**Features:**
- ✅ Only shows for pending/on-hold/failed orders
- ✅ Confirmation dialog before retry
- ✅ Loading state with spinner
- ✅ Disabled during processing
- ✅ Success/error toast notifications
- ✅ Auto-refresh order data after retry
- ✅ Full i18n support
---
### 📊 How It Works
**Flow:**
```
1. Admin views order with pending payment
↓
2. Payment Instructions card shows "Retry Payment" button
↓
3. Admin clicks button → Confirmation dialog
↓
4. Frontend calls POST /orders/{id}/retry-payment
↓
5. Backend validates order status & payment method
↓
6. Backend adds order note
↓
7. Backend calls process_payment_gateway()
↓
8. Gateway creates new transaction/payment
↓
9. Frontend shows success toast
↓
10. Order data refreshes with new payment metadata
```
---
### 🎯 Use Cases
**When to use Retry Payment:**
1. **Payment Gateway Timeout**
- Initial payment failed due to network issue
- Gateway API was temporarily down
- Retry creates new transaction
2. **Expired Payment**
- VA number expired
- QR code expired
- Retry generates new payment code
3. **Failed Transaction**
- Customer payment failed
- Need to generate new payment link
- Retry creates fresh transaction
4. **Admin Error**
- Wrong payment method selected initially
- Need to regenerate payment instructions
- Retry with correct gateway
---
### 📊 Example Display
**Order Detail - Pending Payment:**
```
┌─────────────────────────────────────────────────┐
│ 🎫 Payment Instructions [🔄 Retry Payment] │
├─────────────────────────────────────────────────┤
│ Payment Code 8808123456789012 (expired) │
│ Reference T1234567890 │
│ Expires At Oct 28, 2025 3:47 PM (past) │
│ Amount Rp137.000 │
└─────────────────────────────────────────────────┘
```
**After clicking Retry Payment:**
```
✅ Payment processing retried
┌─────────────────────────────────────────────────┐
│ 🎫 Payment Instructions [🔄 Retry Payment] │
├─────────────────────────────────────────────────┤
│ Payment Code 8808987654321098 (new!) │
│ Reference T9876543210 │
│ Expires At Oct 29, 2025 11:59 PM │
│ Amount Rp137.000 │
└─────────────────────────────────────────────────┘
```
---
### 📊 Features Summary
**Backend:**
- ✅ New `/orders/{id}/retry-payment` endpoint
- ✅ Status validation (pending/on-hold/failed only)
- ✅ Payment method validation
- ✅ Order note for audit trail
- ✅ Reuses existing payment gateway logic
- ✅ Full error handling
**Frontend:**
- ✅ Retry Payment button in Payment Instructions card
- ✅ Conditional display (only for eligible statuses)
- ✅ Confirmation dialog
- ✅ Loading states
- ✅ Toast notifications
- ✅ Auto-refresh after retry
**UX:**
- ✅ Clear button placement
- ✅ Icon + text label
- ✅ Hover states
- ✅ Disabled state during processing
- ✅ Responsive design
---
### 📚 Files Changed
**Backend:**
- `includes/Api/OrdersController.php` (lines 100-105, 1676-1726)
**Frontend:**
- `admin-spa/src/routes/Orders/Detail.tsx` (lines 7, 113-130, 234-253)
---
### 🎯 Next Steps
**Phase 3 Remaining Features:**
- [ ] "Cancel Payment" button
- [ ] Manual payment status sync
- [ ] Payment status webhooks
- [ ] Real-time payment updates
---
**Last synced:** 2025‑10‑28 23:20 GMT+7
**Next milestone:** Complete Phase 3 (Cancel Payment + Status Sync) OR Dashboard module.
---
## 🔧 Phase 3: Fixes & Polish — October 28, 2025 (Night)
### ✅ Retry Payment Improvements - COMPLETE
**Issues Found During Testing:**
1. **❌ Native confirm() dialog** - Not consistent with app design
2. **❌ 20-30 second delay** when retrying payment (Test 2 & 3)
3. **❌ Success toast on error** - Shows green even when payment fails (Test 6)
---
### 🎯 Fixes Implemented
#### **1. Replace confirm() with Shadcn Dialog**
**File:** `admin-spa/src/routes/Orders/Detail.tsx`
**Added Dialog component** (lines 9-10, 60, 124-132, 257-283):
```tsx
// Import Dialog components
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
// State
const [showRetryDialog, setShowRetryDialog] = useState(false);
// Handlers
function handleRetryPayment() {
if (!id) return;
setShowRetryDialog(true); // Show dialog instead of confirm()
}
function confirmRetryPayment() {
setShowRetryDialog(false);
retryPaymentMutation.mutate();
}
// Dialog UI