dwindown/meet-hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix consulting order QR display and remove duplicate slots card

Browse Source 
1. QR Code Display Fix:
   - Removed qr_string from required condition
   - Added fallback for when QR is still processing
   - Shows payment_url button if QR string not available yet
   - Helps users pay while QR code is being generated

2. Consulting Slots Display Fix:
   - Removed duplicate "Detail Jadwal" card
   - Slots now only shown once in main session card
   - Displays as continuous time range (start to end)
   - Shows total duration (e.g., "3 blok (135 menit)")

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
dwindown
2025-12-26 22:24:21 +07:00
parent 2dae2fdc33
commit a567b683af
1 changed files with 62 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/pages/member/OrderDetail.tsx
View File

@@ -341,53 +341,73 @@ export default function OrderDetail() {
</div> </div>
{/* QR Code Display for pending QRIS payments */} {/* QR Code Display for pending QRIS payments */}
{order.payment_status === "pending" && order.payment_method === "qris" && order.qr_string && !isQrExpired && ( {order.payment_status === "pending" && order.payment_method === "qris" && !isQrExpired && (
<div className="pt-4"> <div className="pt-4">
<Alert className="mb-4"> {order.qr_string ? (
<Clock className="h-4 w-4" /> <>
<AlertDescription> <Alert className="mb-4">
Scan QR code ini dengan aplikasi e-wallet atau mobile banking Anda <Clock className="h-4 w-4" />
{timeRemaining && ( <AlertDescription>
<span className="ml-2 font-medium"> Scan QR code ini dengan aplikasi e-wallet atau mobile banking Anda
(Kadaluarsa dalam {timeRemaining}) {timeRemaining && (
</span> <span className="ml-2 font-medium">
)} (Kadaluarsa dalam {timeRemaining})
</AlertDescription> </span>
</Alert> )}
</AlertDescription>
</Alert>
<div className="bg-white p-6 rounded-lg border-2 border-border flex flex-col items-center justify-center space-y-4"> <div className="bg-white p-6 rounded-lg border-2 border-border flex flex-col items-center justify-center space-y-4">
<div className="bg-white p-2 rounded"> <div className="bg-white p-2 rounded">
<QRCodeSVG value={order.qr_string} size={200} /> <QRCodeSVG value={order.qr_string} size={200} />
</div> </div>
<div className="text-center space-y-2"> <div className="text-center space-y-2">
<p className="text-2xl font-bold">{formatIDR(order.total_amount)}</p> <p className="text-2xl font-bold">{formatIDR(order.total_amount)}</p>
<p className="text-sm text-muted-foreground"> <p className="text-sm text-muted-foreground">
Order ID: {order.id.slice(0, 8)} Order ID: {order.id.slice(0, 8)}
</p> </p>
</div> </div>
{isPolling && ( {isPolling && (
<div className="flex items-center gap-2 text-sm text-muted-foreground"> <div className="flex items-center gap-2 text-sm text-muted-foreground">
<RefreshCw className="w-4 h-4 animate-spin" /> <RefreshCw className="w-4 h-4 animate-spin" />
Menunggu pembayaran... Menunggu pembayaran...
</div>
)}
<div className="flex items-center justify-center gap-4 text-xs text-muted-foreground">
<span>🔒 Pembayaran Aman</span>
<span>⚡ QRIS Standar Bank Indonesia</span>
</div>
{order.payment_url && (
<Button asChild variant="outline" className="w-full">
<a href={order.payment_url} target="_blank" rel="noopener noreferrer">
<CreditCard className="w-4 h-4 mr-2" />
Bayar di Halaman Pembayaran
</a>
</Button>
)}
</div> </div>
)} </>
) : (
<div className="flex items-center justify-center gap-4 text-xs text-muted-foreground"> // No QR string yet - show loading or payment URL option
<span>🔒 Pembayaran Aman</span> <Alert className="border-orange-200 bg-orange-50">
<span>⚡ QRIS Standar Bank Indonesia</span> <Clock className="h-4 w-4 text-orange-600" />
</div> <AlertDescription className="text-orange-900">
Sedang memproses QR code...
{order.payment_url && ( {order.payment_url && (
<Button asChild variant="outline" className="w-full"> <Button asChild className="mt-2" variant="outline" size="sm">
<a href={order.payment_url} target="_blank" rel="noopener noreferrer"> <a href={order.payment_url} target="_blank" rel="noopener noreferrer">
<CreditCard className="w-4 h-4 mr-2" /> <CreditCard className="w-4 h-4 mr-2" />
Bayar di Halaman Pembayaran Bayar di Halaman Pembayaran
</a> </a>
</Button> </Button>
)} )}
</div> </AlertDescription>
</Alert>
)}
</div> </div>
)} )}
@@ -546,28 +566,6 @@ export default function OrderDetail() {
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
{/* Consulting Slots Detail */}
<Card className="border-2 border-border mb-6">
<CardHeader>
<CardTitle className="text-lg">Detail Jadwal</CardTitle>
</CardHeader>
<CardContent>
<div className="space-y-3">
{consultingSlots.map((slot, index) => (
<div key={slot.id} className="flex items-center justify-between py-2 border-b last:border-b-0">
<div>
<p className="text-sm text-muted-foreground">Blok {index + 1}</p>
<p className="font-medium">{slot.start_time.substring(0, 5)} - {slot.end_time.substring(0, 5)} WIB</p>
</div>
<Badge variant={slot.status === "confirmed" ? "default" : "secondary"}>
{slot.status === "confirmed" ? "Terkonfirmasi" : slot.status}
</Badge>
</div>
))}
</div>
</CardContent>
</Card>
</> </>
) : order.order_items.length > 0 ? ( ) : order.order_items.length > 0 ? (
// === Product Orders (has order_items) === // === Product Orders (has order_items) ===