x
This commit is contained in:
Your Name committed
1 parent
c6bf2f70ac
commit
d3e817d8ba
4 files changed
+556
-70
No files matched your search
@@ -4,7 +4,7 @@ import Navbar from '../components/Navbar'
|
||||
import Footer from '../components/Footer'
|
||||
import DynamicPageRenderer from '../components/DynamicPageRenderer'
|
||||
import { API_BASE, formatPrice, type Order, type StoreSettings, type Category, type PageSection } from '../types'
|
||||
import { CheckCircle2, UploadCloud, Loader2, Copy } from 'lucide-react'
|
||||
import { CheckCircle2, UploadCloud, Loader2, Copy, CreditCard, QrCode, Landmark } from 'lucide-react'
|
||||
|
||||
export default function OrderSuccessPage() {
|
||||
const { id } = useParams<{ id: string }>()
|
||||
@@ -16,6 +16,135 @@ export default function OrderSuccessPage() {
|
||||
const [uploading, setUploading] = useState(false)
|
||||
const [copied, setCopied] = useState(false)
|
||||
const [cmsSections, setCmsSections] = useState<PageSection[]>([])
|
||||
|
||||
const [paymentMethod, setPaymentMethod] = useState<'bank' | 'promptpay' | 'card'>('bank')
|
||||
const [qrCodeUrl, setQrCodeUrl] = useState<string | null>(null)
|
||||
const [generatingQr, setGeneratingQr] = useState(false)
|
||||
const [polling, setPolling] = useState(false)
|
||||
|
||||
// Card Form State
|
||||
const [cardNumber, setCardNumber] = useState('')
|
||||
const [cardName, setCardName] = useState('')
|
||||
const [cardExpiry, setCardExpiry] = useState('') // MM/YY
|
||||
const [cardCvv, setCardCvv] = useState('')
|
||||
const [payingCard, setPayingCard] = useState(false)
|
||||
const [cardError, setCardError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
let interval: any;
|
||||
if (polling && order && order.status === 'PENDING_PAYMENT') {
|
||||
interval = setInterval(() => {
|
||||
fetch(`${API_BASE}/orders/${order.id}`)
|
||||
.then(res => res.json())
|
||||
.then(updatedOrder => {
|
||||
if (updatedOrder && updatedOrder.status === 'PAID') {
|
||||
setOrder(updatedOrder);
|
||||
setPolling(false);
|
||||
clearInterval(interval);
|
||||
}
|
||||
})
|
||||
.catch(console.error);
|
||||
}, 5000);
|
||||
}
|
||||
return () => clearInterval(interval);
|
||||
}, [polling, order]);
|
||||
|
||||
const handleGeneratePromptPay = async () => {
|
||||
if (!order) return
|
||||
setGeneratingQr(true)
|
||||
try {
|
||||
const res = await fetch(`${API_BASE}/payments/charge`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
orderId: order.id,
|
||||
amount: order.totalAmount,
|
||||
type: 'promptpay'
|
||||
})
|
||||
})
|
||||
const data = await res.json()
|
||||
if (res.ok && data.success && data.qrCodeUrl) {
|
||||
setQrCodeUrl(data.qrCodeUrl)
|
||||
setPolling(true)
|
||||
} else {
|
||||
alert(data.error || 'Failed to generate PromptPay QR')
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err)
|
||||
alert('Failed to connect to payment server')
|
||||
} finally {
|
||||
setGeneratingQr(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCardPay = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
if (!order) return
|
||||
setPayingCard(true)
|
||||
setCardError(null)
|
||||
|
||||
try {
|
||||
const omise = (window as any).Omise
|
||||
if (!omise) {
|
||||
throw new Error('Omise library is loading, please try again.')
|
||||
}
|
||||
|
||||
omise.setPublicKey(import.meta.env.VITE_OMISE_PUBLIC_KEY)
|
||||
|
||||
const parts = cardExpiry.split('/')
|
||||
if (parts.length !== 2) {
|
||||
throw new Error('Expiry date must be in MM/YY format')
|
||||
}
|
||||
const expMonth = parseInt(parts[0], 10)
|
||||
let expYear = parseInt(parts[1], 10)
|
||||
if (expYear < 100) expYear += 2000
|
||||
|
||||
const cardData = {
|
||||
name: cardName,
|
||||
number: cardNumber.replace(/\s+/g, ''),
|
||||
expiration_month: expMonth,
|
||||
expiration_year: expYear,
|
||||
security_code: cardCvv
|
||||
}
|
||||
|
||||
omise.createToken('card', cardData, async (statusCode: number, response: any) => {
|
||||
if (statusCode === 200) {
|
||||
try {
|
||||
const chargeRes = await fetch(`${API_BASE}/payments/charge`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
orderId: order.id,
|
||||
amount: order.totalAmount,
|
||||
type: 'card',
|
||||
token: response.id
|
||||
})
|
||||
})
|
||||
const chargeData = await chargeRes.json()
|
||||
if (chargeRes.ok && chargeData.success) {
|
||||
if (chargeData.authorizeUri) {
|
||||
window.location.href = chargeData.authorizeUri
|
||||
} else {
|
||||
window.location.reload()
|
||||
}
|
||||
} else {
|
||||
setCardError(chargeData.error || 'Card charge request failed')
|
||||
setPayingCard(false)
|
||||
}
|
||||
} catch (err: any) {
|
||||
setCardError('Failed to verify card charge on server')
|
||||
setPayingCard(false)
|
||||
}
|
||||
} else {
|
||||
setCardError(response.message || 'Validation failed for card details')
|
||||
setPayingCard(false)
|
||||
}
|
||||
})
|
||||
} catch (err: any) {
|
||||
setCardError(err.message || 'An error occurred during payment processing')
|
||||
setPayingCard(false)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([
|
||||
@@ -159,83 +288,265 @@ export default function OrderSuccessPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Banking Details */}
|
||||
{settings && order.status === 'PENDING_PAYMENT' && (
|
||||
<div className="bg-white p-8 rounded-2xl border border-spa-stone/10 text-center space-y-6 relative overflow-hidden shadow-sm">
|
||||
<div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-transparent via-spa-forest to-transparent opacity-50" />
|
||||
|
||||
<h2 className="text-xs uppercase font-bold tracking-widest text-spa-stone/80">Payment Required</h2>
|
||||
<div className="text-3xl font-bold text-spa-forest">
|
||||
{formatPrice(order.totalAmount)}
|
||||
{order.status === 'PENDING_PAYMENT' ? (
|
||||
<div className="space-y-8">
|
||||
{/* Payment Method Selector */}
|
||||
<div className="bg-white p-4 rounded-2xl border border-spa-stone/10 shadow-sm flex flex-col md:flex-row gap-3">
|
||||
<button
|
||||
onClick={() => setPaymentMethod('bank')}
|
||||
className={`flex-1 py-4 px-6 rounded-xl font-bold flex items-center justify-center gap-3 border transition-all ${
|
||||
paymentMethod === 'bank'
|
||||
? 'bg-spa-forest text-white border-spa-forest shadow-sm'
|
||||
: 'bg-white text-spa-stone hover:bg-spa-light border-spa-stone/10'
|
||||
}`}
|
||||
>
|
||||
<Landmark className="w-5 h-5" />
|
||||
<span>โอนเงินธนาคาร</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setPaymentMethod('promptpay')}
|
||||
className={`flex-1 py-4 px-6 rounded-xl font-bold flex items-center justify-center gap-3 border transition-all ${
|
||||
paymentMethod === 'promptpay'
|
||||
? 'bg-spa-forest text-white border-spa-forest shadow-sm'
|
||||
: 'bg-white text-spa-stone hover:bg-spa-light border-spa-stone/10'
|
||||
}`}
|
||||
>
|
||||
<QrCode className="w-5 h-5" />
|
||||
<span>PromptPay QR</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setPaymentMethod('card')}
|
||||
className={`flex-1 py-4 px-6 rounded-xl font-bold flex items-center justify-center gap-3 border transition-all ${
|
||||
paymentMethod === 'card'
|
||||
? 'bg-spa-forest text-white border-spa-forest shadow-sm'
|
||||
: 'bg-white text-spa-stone hover:bg-spa-light border-spa-stone/10'
|
||||
}`}
|
||||
>
|
||||
<CreditCard className="w-5 h-5" />
|
||||
<span>บัตรเครดิต/เดบิต</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="bg-spa-light p-6 rounded-xl border border-spa-stone/20 inline-block text-left w-full max-w-md mx-auto space-y-4 shadow-inner">
|
||||
<div>
|
||||
<p className="text-xs text-spa-stone/80 uppercase tracking-widest font-bold">Bank</p>
|
||||
<p className="font-bold text-pop-black">{settings.bankName}</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xs text-spa-stone/80 uppercase tracking-widest font-bold">Account Number</p>
|
||||
<p className="font-mono text-xl font-bold tracking-widest text-spa-forest">{settings.bankAccountNumber}</p>
|
||||
{/* Bank Transfer Layout */}
|
||||
{paymentMethod === 'bank' && settings && (
|
||||
<div className="space-y-8">
|
||||
<div className="bg-white p-8 rounded-2xl border border-spa-stone/10 text-center space-y-6 relative overflow-hidden shadow-sm">
|
||||
<div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-transparent via-spa-forest to-transparent opacity-50" />
|
||||
<h2 className="text-xs uppercase font-bold tracking-widest text-spa-stone/80">Payment Required</h2>
|
||||
<div className="text-3xl font-bold text-spa-forest">{formatPrice(order.totalAmount)}</div>
|
||||
<div className="bg-spa-light p-6 rounded-xl border border-spa-stone/20 inline-block text-left w-full max-w-md mx-auto space-y-4 shadow-inner">
|
||||
<div>
|
||||
<p className="text-xs text-spa-stone/80 uppercase tracking-widest font-bold">Bank</p>
|
||||
<p className="font-bold text-pop-black">{settings.bankName}</p>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<div>
|
||||
<p className="text-xs text-spa-stone/80 uppercase tracking-widest font-bold">Account Number</p>
|
||||
<p className="font-mono text-xl font-bold tracking-widest text-spa-forest">{settings.bankAccountNumber}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={copyToClipboard}
|
||||
className="p-2 bg-white rounded-lg hover:bg-spa-stone/10 border border-spa-stone/20 transition-colors shrink-0 shadow-sm"
|
||||
title="Copy account number"
|
||||
>
|
||||
{copied ? <CheckCircle2 className="w-5 h-5 text-emerald-500" /> : <Copy className="w-5 h-5 text-spa-stone/80" />}
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-spa-stone/80 uppercase tracking-widest font-bold">Account Name</p>
|
||||
<p className="font-bold text-pop-black">{settings.bankAccountName}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-xs text-spa-stone font-medium">Please transfer the exact amount and upload your slip below.</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-8 rounded-2xl border border-spa-stone/10 space-y-6 shadow-sm">
|
||||
<h2 className="text-sm font-bold uppercase tracking-widest text-spa-forest border-b border-spa-stone/10 pb-4">Payment Slip Verification</h2>
|
||||
{order.paymentSlipUrl ? (
|
||||
<div className="flex flex-col items-center justify-center space-y-4 py-4">
|
||||
<div className="w-16 h-16 bg-emerald-500/10 rounded-full flex items-center justify-center border border-emerald-500/20">
|
||||
<CheckCircle2 className="w-8 h-8 text-emerald-500" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="font-bold text-lg text-emerald-600">Slip Uploaded Successfully</p>
|
||||
<p className="text-sm text-spa-stone mt-1 font-medium">Status: {order.status}</p>
|
||||
<p className="text-xs mt-2 text-spa-stone/80">We will verify your payment and process your order shortly.</p>
|
||||
</div>
|
||||
<img src={order.paymentSlipUrl} alt="Slip" className="w-48 rounded-xl border border-spa-stone/20 mt-4 opacity-80 hover:opacity-100 transition-opacity shadow-sm" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative border-2 border-dashed border-spa-stone/30 bg-spa-light rounded-xl p-10 hover:border-spa-forest transition-colors group cursor-pointer overflow-hidden">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleFileUpload}
|
||||
disabled={uploading}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
|
||||
/>
|
||||
<div className="text-center space-y-4">
|
||||
{uploading ? (
|
||||
<Loader2 className="w-12 h-12 text-spa-forest animate-spin mx-auto" />
|
||||
) : (
|
||||
<UploadCloud className="w-12 h-12 text-spa-stone/60 group-hover:text-spa-forest transition-colors mx-auto" />
|
||||
)}
|
||||
<div>
|
||||
<p className="font-bold text-pop-black">{uploading ? 'Uploading...' : 'Click or drag to upload slip'}</p>
|
||||
<p className="text-xs text-spa-stone font-medium mt-1">Supports JPG, PNG (Max 5MB)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
onClick={copyToClipboard}
|
||||
className="p-2 bg-white rounded-lg hover:bg-spa-stone/10 border border-spa-stone/20 transition-colors shrink-0 shadow-sm"
|
||||
title="Copy account number"
|
||||
>
|
||||
{copied ? <CheckCircle2 className="w-5 h-5 text-emerald-500" /> : <Copy className="w-5 h-5 text-spa-stone/80" />}
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs text-spa-stone/80 uppercase tracking-widest font-bold">Account Name</p>
|
||||
<p className="font-bold text-pop-black">{settings.bankAccountName}</p>
|
||||
)}
|
||||
|
||||
{/* PromptPay Layout */}
|
||||
{paymentMethod === 'promptpay' && (
|
||||
<div className="bg-white p-8 rounded-2xl border border-spa-stone/10 text-center space-y-6 relative overflow-hidden shadow-sm">
|
||||
<div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-transparent via-spa-forest to-transparent opacity-50" />
|
||||
<h2 className="text-xs uppercase font-bold tracking-widest text-spa-stone/80">PromptPay QR Code</h2>
|
||||
<div className="text-3xl font-bold text-spa-forest">{formatPrice(order.totalAmount)}</div>
|
||||
|
||||
{!qrCodeUrl ? (
|
||||
<div className="py-8">
|
||||
<button
|
||||
onClick={handleGeneratePromptPay}
|
||||
disabled={generatingQr}
|
||||
className="px-8 py-4 bg-spa-forest text-white font-bold rounded-xl tracking-widest uppercase hover:bg-spa-stone transition-all duration-300 disabled:opacity-50 flex items-center justify-center gap-3 mx-auto"
|
||||
>
|
||||
{generatingQr ? <Loader2 className="w-5 h-5 animate-spin" /> : <QrCode className="w-5 h-5" />}
|
||||
<span>สร้างคิวอาร์โค้ด PromptPay</span>
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6 max-w-sm mx-auto">
|
||||
<div className="bg-white p-4 rounded-xl border border-spa-stone/20 inline-block shadow-sm">
|
||||
<img src={qrCodeUrl} alt="PromptPay QR Code" className="w-64 h-64 object-contain mx-auto" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2 text-xs text-spa-stone font-medium">
|
||||
<p className="text-sm font-bold text-pop-black">สแกนจ่ายเงินเพื่อเสร็จสิ้นออเดอร์</p>
|
||||
<p>1. กดบันทึกรูปภาพคิวอาร์โค้ดลงในมือถือของคุณ</p>
|
||||
<p>2. เปิดแอป Mobile Banking และเลือกสแกนภาพจากอัลบั้ม</p>
|
||||
<p className="text-[10px] text-rose-500 uppercase font-bold tracking-wider animate-pulse mt-4">
|
||||
{polling ? "🔄 กำลังตรวจสอบยอดชำระเงินโดยอัตโนมัติ..." : "รอการจ่ายเงิน..."}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={qrCodeUrl}
|
||||
download={`promptpay-order-${order.id}.png`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 text-xs text-spa-forest hover:underline font-bold"
|
||||
>
|
||||
<UploadCloud className="w-4 h-4 transform rotate-180" />
|
||||
<span>ดาวน์โหลดรูปภาพ QR Code</span>
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Credit Card Layout */}
|
||||
{paymentMethod === 'card' && (
|
||||
<div className="bg-white p-8 rounded-2xl border border-spa-stone/10 space-y-6 relative overflow-hidden shadow-sm">
|
||||
<div className="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-transparent via-spa-forest to-transparent opacity-50" />
|
||||
<div className="text-center space-y-2">
|
||||
<h2 className="text-xs uppercase font-bold tracking-widest text-spa-stone/80">Credit / Debit Card</h2>
|
||||
<div className="text-3xl font-bold text-spa-forest">{formatPrice(order.totalAmount)}</div>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleCardPay} className="max-w-md mx-auto space-y-5">
|
||||
{cardError && (
|
||||
<div className="p-4 bg-rose-500/10 border border-rose-500/20 text-rose-500 font-medium rounded-lg text-sm text-center">
|
||||
{cardError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] uppercase font-bold tracking-widest text-spa-stone/80">ชื่อบนบัตร (Cardholder Name)</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={cardName}
|
||||
onChange={e => setCardName(e.target.value)}
|
||||
className="w-full bg-spa-light border border-spa-stone/20 rounded-lg p-3 text-pop-black focus:border-spa-forest outline-none transition-all placeholder:text-spa-stone/30"
|
||||
placeholder="Jane Doe"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] uppercase font-bold tracking-widest text-spa-stone/80">หมายเลขบัตร (Card Number)</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
maxLength={19}
|
||||
value={cardNumber}
|
||||
onChange={e => {
|
||||
const val = e.target.value.replace(/\D/g, '').replace(/(.{4})/g, '$1 ').trim();
|
||||
setCardNumber(val);
|
||||
}}
|
||||
className="w-full bg-spa-light border border-spa-stone/20 rounded-lg p-3 text-pop-black focus:border-spa-forest outline-none transition-all placeholder:text-spa-stone/30"
|
||||
placeholder="4242 4242 4242 4242"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] uppercase font-bold tracking-widest text-spa-stone/80">วันหมดอายุ (Expiry Date)</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
maxLength={5}
|
||||
value={cardExpiry}
|
||||
onChange={e => {
|
||||
const val = e.target.value.replace(/\D/g, '').replace(/(\d{2})(\d{1,2})/, '$1/$2').trim();
|
||||
setCardExpiry(val);
|
||||
}}
|
||||
className="w-full bg-spa-light border border-spa-stone/20 rounded-lg p-3 text-pop-black focus:border-spa-forest outline-none transition-all placeholder:text-spa-stone/30"
|
||||
placeholder="MM/YY"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] uppercase font-bold tracking-widest text-spa-stone/80">รหัส CVV / CVC</label>
|
||||
<input
|
||||
type="password"
|
||||
required
|
||||
maxLength={4}
|
||||
value={cardCvv}
|
||||
onChange={e => setCardCvv(e.target.value.replace(/\D/g, ''))}
|
||||
className="w-full bg-spa-light border border-spa-stone/20 rounded-lg p-3 text-pop-black focus:border-spa-forest outline-none transition-all placeholder:text-spa-stone/30"
|
||||
placeholder="123"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={payingCard}
|
||||
className="w-full py-4 bg-spa-forest text-white font-bold rounded-lg tracking-widest uppercase hover:bg-spa-stone transition-all duration-300 disabled:opacity-50 flex items-center justify-center gap-2 mt-4"
|
||||
>
|
||||
{payingCard ? <Loader2 className="w-5 h-5 animate-spin" /> : <CreditCard className="w-5 h-5" />}
|
||||
<span>ชำระเงิน {formatPrice(order.totalAmount)}</span>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="bg-white p-8 rounded-2xl border border-spa-stone/10 text-center space-y-6 shadow-sm">
|
||||
<div className="w-16 h-16 bg-emerald-500/10 rounded-full flex items-center justify-center border border-emerald-500/20 mx-auto">
|
||||
<CheckCircle2 className="w-8 h-8 text-emerald-500" />
|
||||
</div>
|
||||
<div className="text-center space-y-2">
|
||||
<p className="font-bold text-2xl text-emerald-600">ชำระเงินเสร็จสิ้น</p>
|
||||
<p className="text-sm text-spa-stone font-medium">ทางแบรนด์ได้รับยอดชำระของคุณเรียบร้อย ออเดอร์กำลังอยู่ระหว่างจัดเตรียมสินค้า</p>
|
||||
<p className="text-xs text-spa-stone/60">ออเดอร์สถานะปัจจุบัน: {order.status}</p>
|
||||
</div>
|
||||
<p className="text-xs text-spa-stone font-medium">Please transfer the exact amount and upload your slip below.</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Upload Status */}
|
||||
<div className="bg-white p-8 rounded-2xl border border-spa-stone/10 space-y-6 shadow-sm">
|
||||
<h2 className="text-sm font-bold uppercase tracking-widest text-spa-forest border-b border-spa-stone/10 pb-4">Payment Slip Verification</h2>
|
||||
|
||||
{order.paymentSlipUrl ? (
|
||||
<div className="flex flex-col items-center justify-center space-y-4 py-4">
|
||||
<div className="w-16 h-16 bg-emerald-500/10 rounded-full flex items-center justify-center border border-emerald-500/20">
|
||||
<CheckCircle2 className="w-8 h-8 text-emerald-500" />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="font-bold text-lg text-emerald-600">Slip Uploaded Successfully</p>
|
||||
<p className="text-sm text-spa-stone mt-1 font-medium">Status: {order.status}</p>
|
||||
<p className="text-xs mt-2 text-spa-stone/80">We will verify your payment and process your order shortly.</p>
|
||||
</div>
|
||||
<img src={order.paymentSlipUrl} alt="Slip" className="w-48 rounded-xl border border-spa-stone/20 mt-4 opacity-80 hover:opacity-100 transition-opacity shadow-sm" />
|
||||
</div>
|
||||
) : (
|
||||
<div className="relative border-2 border-dashed border-spa-stone/30 bg-spa-light rounded-xl p-10 hover:border-spa-forest transition-colors group cursor-pointer overflow-hidden">
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
onChange={handleFileUpload}
|
||||
disabled={uploading}
|
||||
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
|
||||
/>
|
||||
<div className="text-center space-y-4">
|
||||
{uploading ? (
|
||||
<Loader2 className="w-12 h-12 text-spa-forest animate-spin mx-auto" />
|
||||
) : (
|
||||
<UploadCloud className="w-12 h-12 text-spa-stone/60 group-hover:text-spa-forest transition-colors mx-auto" />
|
||||
)}
|
||||
<div>
|
||||
<p className="font-bold text-pop-black">{uploading ? 'Uploading...' : 'Click or drag to upload slip'}</p>
|
||||
<p className="text-xs text-spa-stone font-medium mt-1">Supports JPG, PNG (Max 5MB)</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
{bottomSections.length > 0 && (
|
||||
|
||||
Reference in new issue
Block a user