Implement post-implementation refinements
Features implemented: 1. Expired QRIS order handling with dual-path approach - Product orders: QR regeneration button - Consulting orders: Immediate cancellation with slot release 2. Standardized status badge wording to "Pending" 3. Fixed TypeScript error in MemberDashboard 4. Dynamic badge colors from branding settings 5. Dynamic page title from branding settings 6. Logo/favicon file upload with auto-delete 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
58
src/components/UnpaidOrderAlert.tsx
Normal file
58
src/components/UnpaidOrderAlert.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { AlertCircle } from "lucide-react";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
interface UnpaidOrderAlertProps {
|
||||
orderId: string;
|
||||
expiresAt: string; // ISO timestamp
|
||||
}
|
||||
|
||||
export function UnpaidOrderAlert({ orderId, expiresAt }: UnpaidOrderAlertProps) {
|
||||
// Non-dismissable alert - NO onDismiss prop
|
||||
// Alert will auto-hide when QR expires via Dashboard logic
|
||||
|
||||
const formatExpiryTime = (isoString: string) => {
|
||||
try {
|
||||
return new Date(isoString).toLocaleTimeString('id-ID', {
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
} catch {
|
||||
return isoString;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Alert className="bg-gradient-to-r from-orange-50 to-amber-50 border-orange-200 border-2">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="bg-orange-100 p-2 rounded-full flex-shrink-0">
|
||||
<AlertCircle className="w-5 h-5 text-orange-600" />
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<h4 className="font-semibold text-orange-900 mb-1 flex items-center gap-2">
|
||||
Pembayaran Belum Selesai
|
||||
<span className="text-xs bg-orange-200 text-orange-800 px-2 py-0.5 rounded">
|
||||
Segera
|
||||
</span>
|
||||
</h4>
|
||||
<AlertDescription className="text-orange-700">
|
||||
Anda memiliki pesanan konsultasi yang menunggu pembayaran. QRIS kode akan kedaluwarsa pada{" "}
|
||||
<strong>{formatExpiryTime(expiresAt)}</strong>.
|
||||
</AlertDescription>
|
||||
|
||||
<Button
|
||||
asChild
|
||||
size="sm"
|
||||
className="mt-3 bg-orange-600 hover:bg-orange-700 text-white shadow-md"
|
||||
>
|
||||
<Link to={`/orders/${orderId}`}>
|
||||
Lihat & Bayar Sekarang →
|
||||
</Link>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Alert>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user