feat/payment-ux-story-1-1 #14
|
|
@ -0,0 +1,44 @@
|
|||
import { motion, AnimatePresence } from 'framer-motion'
|
||||
|
||||
interface LoadingOverlayProps {
|
||||
isLoading: boolean
|
||||
message?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Full-screen loading overlay with spinner and message
|
||||
* Prevents user interaction during payment code generation
|
||||
*/
|
||||
export function LoadingOverlay({ isLoading, message = 'Memproses...' }: LoadingOverlayProps) {
|
||||
return (
|
||||
<AnimatePresence>
|
||||
{isLoading && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
aria-busy="true"
|
||||
>
|
||||
<div className="bg-white rounded-lg p-6 shadow-xl max-w-sm mx-4">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
{/* Spinner */}
|
||||
<div
|
||||
className="h-12 w-12 animate-spin rounded-full border-4 border-black/20 border-t-black"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
|
||||
{/* Message */}
|
||||
<p className="text-center text-black font-medium">
|
||||
{message}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
)
|
||||
}
|
||||
|
|
@ -8,6 +8,8 @@ import { postCharge } from '../../../services/api'
|
|||
import { Alert } from '../../../components/alert/Alert'
|
||||
import { InlinePaymentStatus } from './InlinePaymentStatus'
|
||||
import { toast } from '../../../components/ui/toast'
|
||||
import { LoadingOverlay } from '../../../components/LoadingOverlay'
|
||||
import { mapErrorToUserMessage } from '../../../lib/errorMessages'
|
||||
|
||||
// Global guard to prevent duplicate auto-charge across StrictMode double-mounts
|
||||
const attemptedChargeKeys = new Set<string>()
|
||||
|
|
@ -62,8 +64,7 @@ export function BankTransferPanel({ orderId, amount, locked, onChargeInitiated,
|
|||
onChargeInitiated?.()
|
||||
}
|
||||
} catch (e) {
|
||||
const ax = e as any
|
||||
const msg = ax?.response?.data?.message || ax?.message || 'Gagal membuat VA.'
|
||||
const msg = mapErrorToUserMessage(e)
|
||||
if (!cancelled) setErrorMessage(msg)
|
||||
} finally {
|
||||
if (!cancelled) {
|
||||
|
|
@ -108,8 +109,7 @@ export function BankTransferPanel({ orderId, amount, locked, onChargeInitiated,
|
|||
onChargeInitiated?.()
|
||||
}
|
||||
} catch (e) {
|
||||
const ax = e as any
|
||||
const msg = ax?.response?.data?.message || ax?.message || 'Gagal membuat VA.'
|
||||
const msg = mapErrorToUserMessage(e)
|
||||
if (!cancelled) {
|
||||
setErrorMessage(msg)
|
||||
attemptedChargeKeys.delete(chargeKey)
|
||||
|
|
@ -136,166 +136,167 @@ export function BankTransferPanel({ orderId, amount, locked, onChargeInitiated,
|
|||
}, [selected])
|
||||
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
<div className="font-medium">Transfer Bank</div>
|
||||
{selected && (
|
||||
<div className="flex items-center gap-2 text-base">
|
||||
<span className="text-black/60">Bank:</span>
|
||||
<span className="text-black/80 font-semibold">{selected.toUpperCase()}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-sm text-black/70">VA dibuat otomatis sesuai bank pilihan Anda.</div>
|
||||
{errorMessage && (
|
||||
<Alert title="Gagal membuat VA">{errorMessage}</Alert>
|
||||
)}
|
||||
{selected && (
|
||||
<div className="pt-1">
|
||||
<div className="rounded-lg p-3 border-2 border-black/30">
|
||||
<div className="text-sm font-medium mb-2">Virtual Account</div>
|
||||
<div className="text-sm text-black/70">
|
||||
{vaCode ? (
|
||||
<span>
|
||||
Nomor VA:
|
||||
<span className="block break-all mt-1 font-mono text-xl sm:text-2xl md:text-3xl font-semibold tracking-normal text-black">{vaCode}</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-2" role="status" aria-live="polite">
|
||||
{busy && <span className="h-3 w-3 animate-spin rounded-full border-2 border-black/40 border-t-transparent" aria-hidden />}
|
||||
{busy ? 'Membuat VA…' : 'VA akan muncul otomatis setelah transaksi dibuat.'}
|
||||
</span>
|
||||
)}
|
||||
{billKey && (
|
||||
<span className="ml-3">Bill Key: <span className="font-mono text-lg font-semibold text-black">{billKey}</span></span>
|
||||
)}
|
||||
{billerCode && (
|
||||
<span className="ml-3">Biller Code: <span className="font-mono text-lg font-semibold text-black">{billerCode}</span></span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-2 flex gap-2">
|
||||
<Button variant="secondary" size="sm" onClick={() => copy(vaCode, 'VA')} disabled={!vaCode}>Copy VA</Button>
|
||||
<Button variant="secondary" size="sm" onClick={() => copy(billKey, 'Bill Key')} disabled={!billKey}>Copy Bill Key</Button>
|
||||
<>
|
||||
<LoadingOverlay isLoading={busy} message="Sedang membuat kode pembayaran..." />
|
||||
<div className="space-y-3">
|
||||
<div className="font-medium">Transfer Bank</div>
|
||||
{selected && (
|
||||
<div className="flex items-center gap-2 text-base">
|
||||
<span className="text-black/60">Bank:</span>
|
||||
<span className="text-black/80 font-semibold">{selected.toUpperCase()}</span>
|
||||
</div>
|
||||
)}
|
||||
<div className="text-sm text-black/70">VA dibuat otomatis sesuai bank pilihan Anda.</div>
|
||||
{errorMessage && (
|
||||
<Alert title="Gagal membuat VA">{errorMessage}</Alert>
|
||||
)}
|
||||
{selected && (
|
||||
<div className="pt-1">
|
||||
<div className="rounded-lg p-3 border-2 border-black/30">
|
||||
<div className="text-sm font-medium mb-2">Virtual Account</div>
|
||||
<div className="text-sm text-black/70">
|
||||
{vaCode ? (
|
||||
<span>
|
||||
Nomor VA:
|
||||
<span className="block break-all mt-1 font-mono text-xl sm:text-2xl md:text-3xl font-semibold tracking-normal text-black">{vaCode}</span>
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-2" role="status" aria-live="polite">
|
||||
{busy && <span className="h-3 w-3 animate-spin rounded-full border-2 border-black/40 border-t-transparent" aria-hidden />}
|
||||
{busy ? 'Membuat VA…' : 'VA akan muncul otomatis setelah transaksi dibuat.'}
|
||||
</span>
|
||||
)}
|
||||
{billKey && (
|
||||
<span className="ml-3">Bill Key: <span className="font-mono text-lg font-semibold text-black">{billKey}</span></span>
|
||||
)}
|
||||
{billerCode && (
|
||||
<span className="ml-3">Biller Code: <span className="font-mono text-lg font-semibold text-black">{billerCode}</span></span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-2 flex gap-2">
|
||||
<Button variant="secondary" size="sm" onClick={() => copy(vaCode, 'VA')} disabled={!vaCode}>Copy VA</Button>
|
||||
<Button variant="secondary" size="sm" onClick={() => copy(billKey, 'Bill Key')} disabled={!billKey}>Copy Bill Key</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{/* Status inline dengan polling otomatis */}
|
||||
{selected && (
|
||||
<InlinePaymentStatus orderId={orderId} method="bank_transfer" compact />
|
||||
)}
|
||||
{selected && (
|
||||
<div className="pt-2">
|
||||
{selected === 'bca' ? (
|
||||
<BcaInstructionList />
|
||||
) : (
|
||||
<div className="rounded-lg border-2 border-black/30 p-3 bg-white">
|
||||
<div className="text-sm font-medium mb-2">Instruksi pembayaran</div>
|
||||
<PaymentInstructions method="bank_transfer" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{locked && (
|
||||
<div className="text-xs text-black/60">Metode terkunci. Gunakan kode VA/bill key untuk menyelesaikan pembayaran.</div>
|
||||
)}
|
||||
<div className="pt-2 space-y-2">
|
||||
{(!vaCode || errorMessage) && (
|
||||
<Button
|
||||
aria-busy={busy}
|
||||
disabled={!selected || busy}
|
||||
onClick={async () => {
|
||||
try {
|
||||
setErrorMessage('')
|
||||
if (!selected) return
|
||||
const chargeKey = `${orderId}:${selected}`
|
||||
// Guard duplicate charges BEFORE setting busy to avoid stuck loading state
|
||||
if (lastChargeKeyRef.current === chargeKey || chargingKeyRef.current === chargeKey) return
|
||||
// If a charge is already in-flight, await it instead of starting a new one
|
||||
if (attemptedChargeKeys.has(chargeKey) && chargeTasks.has(chargeKey)) {
|
||||
)}
|
||||
{/* Status inline dengan polling otomatis */}
|
||||
{selected && (
|
||||
<InlinePaymentStatus orderId={orderId} method="bank_transfer" compact />
|
||||
)}
|
||||
{selected && (
|
||||
<div className="pt-2">
|
||||
{selected === 'bca' ? (
|
||||
<BcaInstructionList />
|
||||
) : (
|
||||
<div className="rounded-lg border-2 border-black/30 p-3 bg-white">
|
||||
<div className="text-sm font-medium mb-2">Instruksi pembayaran</div>
|
||||
<PaymentInstructions method="bank_transfer" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{locked && (
|
||||
<div className="text-xs text-black/60">Metode terkunci. Gunakan kode VA/bill key untuk menyelesaikan pembayaran.</div>
|
||||
)}
|
||||
<div className="pt-2 space-y-2">
|
||||
{(!vaCode || errorMessage) && (
|
||||
<Button
|
||||
aria-busy={busy}
|
||||
disabled={!selected || busy}
|
||||
onClick={async () => {
|
||||
try {
|
||||
setErrorMessage('')
|
||||
if (!selected) return
|
||||
const chargeKey = `${orderId}:${selected}`
|
||||
// Guard duplicate charges BEFORE setting busy to avoid stuck loading state
|
||||
if (lastChargeKeyRef.current === chargeKey || chargingKeyRef.current === chargeKey) return
|
||||
// If a charge is already in-flight, await it instead of starting a new one
|
||||
if (attemptedChargeKeys.has(chargeKey) && chargeTasks.has(chargeKey)) {
|
||||
setBusy(true)
|
||||
chargingKeyRef.current = chargeKey
|
||||
try {
|
||||
const res = await chargeTasks.get(chargeKey)!
|
||||
let va = ''
|
||||
if (Array.isArray(res?.va_numbers) && res.va_numbers.length) {
|
||||
const match = res.va_numbers.find((v: any) => v?.bank?.toLowerCase() === selected) || res.va_numbers[0]
|
||||
va = match?.va_number || ''
|
||||
}
|
||||
if (!va && typeof res?.permata_va_number === 'string') {
|
||||
va = res.permata_va_number
|
||||
}
|
||||
setVaCode(va)
|
||||
if (typeof res?.bill_key === 'string') setBillKey(res.bill_key)
|
||||
if (typeof res?.biller_code === 'string') setBillerCode(res.biller_code)
|
||||
lastChargeKeyRef.current = `${orderId}:${selected}`
|
||||
if (chargingKeyRef.current === chargeKey) chargingKeyRef.current = ''
|
||||
onChargeInitiated?.()
|
||||
} catch (e) {
|
||||
const msg = mapErrorToUserMessage(e)
|
||||
setErrorMessage(msg)
|
||||
} finally {
|
||||
setBusy(false)
|
||||
if (chargingKeyRef.current === chargeKey) chargingKeyRef.current = ''
|
||||
chargeTasks.delete(chargeKey)
|
||||
}
|
||||
return
|
||||
}
|
||||
setBusy(true)
|
||||
chargingKeyRef.current = chargeKey
|
||||
try {
|
||||
const res = await chargeTasks.get(chargeKey)!
|
||||
let va = ''
|
||||
if (Array.isArray(res?.va_numbers) && res.va_numbers.length) {
|
||||
const match = res.va_numbers.find((v: any) => v?.bank?.toLowerCase() === selected) || res.va_numbers[0]
|
||||
va = match?.va_number || ''
|
||||
}
|
||||
if (!va && typeof res?.permata_va_number === 'string') {
|
||||
va = res.permata_va_number
|
||||
}
|
||||
setVaCode(va)
|
||||
if (typeof res?.bill_key === 'string') setBillKey(res.bill_key)
|
||||
if (typeof res?.biller_code === 'string') setBillerCode(res.biller_code)
|
||||
lastChargeKeyRef.current = `${orderId}:${selected}`
|
||||
if (chargingKeyRef.current === chargeKey) chargingKeyRef.current = ''
|
||||
onChargeInitiated?.()
|
||||
} catch (e) {
|
||||
const ax = e as any
|
||||
const msg = ax?.response?.data?.message || ax?.message || 'Gagal membuat VA.'
|
||||
setErrorMessage(msg)
|
||||
} finally {
|
||||
setBusy(false)
|
||||
if (chargingKeyRef.current === chargeKey) chargingKeyRef.current = ''
|
||||
chargeTasks.delete(chargeKey)
|
||||
const payload: Record<string, any> = {
|
||||
payment_type: 'bank_transfer',
|
||||
transaction_details: { order_id: orderId, gross_amount: amount },
|
||||
bank_transfer: { bank: selected },
|
||||
}
|
||||
return
|
||||
const task = postCharge(payload)
|
||||
chargeTasks.set(chargeKey, task)
|
||||
const res = await task
|
||||
// Extract VA / bill info from response
|
||||
let va = ''
|
||||
if (Array.isArray(res?.va_numbers) && res.va_numbers.length) {
|
||||
const match = res.va_numbers.find((v: any) => v?.bank?.toLowerCase() === selected) || res.va_numbers[0]
|
||||
va = match?.va_number || ''
|
||||
}
|
||||
if (!va && typeof res?.permata_va_number === 'string') {
|
||||
va = res.permata_va_number
|
||||
}
|
||||
setVaCode(va)
|
||||
if (typeof res?.bill_key === 'string') setBillKey(res.bill_key)
|
||||
if (typeof res?.biller_code === 'string') setBillerCode(res.biller_code)
|
||||
lastChargeKeyRef.current = `${orderId}:${selected}`
|
||||
if (chargingKeyRef.current === chargeKey) chargingKeyRef.current = ''
|
||||
onChargeInitiated?.()
|
||||
} catch (e) {
|
||||
const msg = mapErrorToUserMessage(e)
|
||||
setErrorMessage(msg)
|
||||
} finally {
|
||||
setBusy(false)
|
||||
const chargeKey = `${orderId}:${selected}`
|
||||
if (chargingKeyRef.current === chargeKey) chargingKeyRef.current = ''
|
||||
chargeTasks.delete(chargeKey)
|
||||
}
|
||||
setBusy(true)
|
||||
chargingKeyRef.current = chargeKey
|
||||
const payload: Record<string, any> = {
|
||||
payment_type: 'bank_transfer',
|
||||
transaction_details: { order_id: orderId, gross_amount: amount },
|
||||
bank_transfer: { bank: selected },
|
||||
}
|
||||
const task = postCharge(payload)
|
||||
chargeTasks.set(chargeKey, task)
|
||||
const res = await task
|
||||
// Extract VA / bill info from response
|
||||
let va = ''
|
||||
if (Array.isArray(res?.va_numbers) && res.va_numbers.length) {
|
||||
const match = res.va_numbers.find((v: any) => v?.bank?.toLowerCase() === selected) || res.va_numbers[0]
|
||||
va = match?.va_number || ''
|
||||
}
|
||||
if (!va && typeof res?.permata_va_number === 'string') {
|
||||
va = res.permata_va_number
|
||||
}
|
||||
setVaCode(va)
|
||||
if (typeof res?.bill_key === 'string') setBillKey(res.bill_key)
|
||||
if (typeof res?.biller_code === 'string') setBillerCode(res.biller_code)
|
||||
lastChargeKeyRef.current = `${orderId}:${selected}`
|
||||
if (chargingKeyRef.current === chargeKey) chargingKeyRef.current = ''
|
||||
onChargeInitiated?.()
|
||||
} catch (e) {
|
||||
const ax = e as any
|
||||
const msg = ax?.response?.data?.message || ax?.message || 'Gagal membuat VA.'
|
||||
setErrorMessage(msg)
|
||||
} finally {
|
||||
setBusy(false)
|
||||
const chargeKey = `${orderId}:${selected}`
|
||||
if (chargingKeyRef.current === chargeKey) chargingKeyRef.current = ''
|
||||
chargeTasks.delete(chargeKey)
|
||||
}
|
||||
}}
|
||||
}}
|
||||
className="w-full"
|
||||
>
|
||||
{busy ? (
|
||||
<span className="inline-flex items-center justify-center gap-2" role="status" aria-live="polite">
|
||||
<span className="h-4 w-4 animate-spin rounded-full border-2 border-white/70 border-t-transparent" aria-hidden />
|
||||
Membuat VA…
|
||||
</span>
|
||||
) : 'Buat VA'}
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
disabled={busy || (!locked && !vaCode && !billKey)}
|
||||
onClick={() => nav.toStatus(orderId, 'bank_transfer')}
|
||||
>
|
||||
{busy ? (
|
||||
<span className="inline-flex items-center justify-center gap-2" role="status" aria-live="polite">
|
||||
<span className="h-4 w-4 animate-spin rounded-full border-2 border-white/70 border-t-transparent" aria-hidden />
|
||||
Membuat VA…
|
||||
</span>
|
||||
) : 'Buat VA'}
|
||||
Buka halaman status
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
disabled={busy || (!locked && !vaCode && !billKey)}
|
||||
onClick={() => nav.toStatus(orderId, 'bank_transfer')}
|
||||
>
|
||||
Buka halaman status
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -73,16 +73,16 @@ export function GoPayPanel({ orderId, amount, locked, onChargeInitiated }: { ord
|
|||
<button
|
||||
type="button"
|
||||
onClick={() => setMode('gopay')}
|
||||
aria-pressed={mode==='gopay'}
|
||||
className={`px-2 py-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#2563EB] focus-visible:ring-offset-2 focus-visible:ring-offset-white transition ${mode==='gopay' ? 'bg-black text-white' : 'bg-white text-black hover:bg-black/10'}`}
|
||||
aria-pressed={mode === 'gopay'}
|
||||
className={`px-2 py-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#2563EB] focus-visible:ring-offset-2 focus-visible:ring-offset-white transition ${mode === 'gopay' ? 'bg-black text-white' : 'bg-white text-black hover:bg-black/10'}`}
|
||||
>
|
||||
GoPay
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMode('qris')}
|
||||
aria-pressed={mode==='qris'}
|
||||
className={`px-2 py-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#2563EB] focus-visible:ring-offset-2 focus-visible:ring-offset-white transition ${mode==='qris' ? 'bg-black text-white' : 'bg-white text-black hover:bg-black/10'}`}
|
||||
aria-pressed={mode === 'qris'}
|
||||
className={`px-2 py-1 focus:outline-none focus-visible:ring-2 focus-visible:ring-[#2563EB] focus-visible:ring-offset-2 focus-visible:ring-offset-white transition ${mode === 'qris' ? 'bg-black text-white' : 'bg-white text-black hover:bg-black/10'}`}
|
||||
>
|
||||
QRIS
|
||||
</button>
|
||||
|
|
@ -135,7 +135,7 @@ export function GoPayPanel({ orderId, amount, locked, onChargeInitiated }: { ord
|
|||
className="w-full"
|
||||
aria-busy={busy}
|
||||
disabled={busy || (!locked && actions.length === 0)}
|
||||
onClick={() => { setBusy(true); onChargeInitiated?.(); setTimeout(() => { nav.toStatus(orderId, mode) ; setBusy(false) }, 250) }}
|
||||
onClick={() => { setBusy(true); onChargeInitiated?.(); setTimeout(() => { nav.toStatus(orderId, mode); setBusy(false) }, 250) }}
|
||||
>
|
||||
{busy ? (
|
||||
<span className="inline-flex items-center justify-center gap-2" role="status" aria-live="polite">
|
||||
|
|
@ -216,7 +216,7 @@ export function GoPayPanel_AutoEffect({ orderId, amount, locked, mode, setBusy,
|
|||
}
|
||||
run()
|
||||
return () => { cancelled = true }
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [mode])
|
||||
return null
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
import type { AxiosError } from 'axios'
|
||||
|
||||
/**
|
||||
* Maps technical error responses to user-friendly messages in Bahasa Indonesia
|
||||
* for non-tech-savvy users (ibu-ibu awam)
|
||||
*/
|
||||
export function mapErrorToUserMessage(error: unknown): string {
|
||||
// Handle AxiosError
|
||||
if (error && typeof error === 'object' && 'response' in error) {
|
||||
const axiosError = error as AxiosError
|
||||
const status = axiosError.response?.status
|
||||
|
||||
// HTTP 409 - Conflict (VA/QR/Code already created)
|
||||
if (status === 409) {
|
||||
return 'Kode pembayaran Anda sudah dibuat! Silakan gunakan kode yang sudah ada.'
|
||||
}
|
||||
|
||||
// HTTP 404 - Not Found
|
||||
if (status === 404) {
|
||||
return 'Terjadi kesalahan. Silakan coba lagi.'
|
||||
}
|
||||
|
||||
// HTTP 500 - Internal Server Error
|
||||
if (status === 500) {
|
||||
return 'Terjadi kesalahan server. Silakan coba lagi nanti.'
|
||||
}
|
||||
|
||||
// HTTP 503 - Service Unavailable
|
||||
if (status === 503) {
|
||||
return 'Layanan sedang sibuk. Silakan coba lagi dalam beberapa saat.'
|
||||
}
|
||||
|
||||
// Network error (no response)
|
||||
if (axiosError.message === 'Network Error' || !axiosError.response) {
|
||||
return 'Tidak dapat terhubung ke server. Periksa koneksi internet Anda.'
|
||||
}
|
||||
|
||||
// Try to get message from response data
|
||||
const responseMessage = (axiosError.response?.data as any)?.message
|
||||
if (typeof responseMessage === 'string' && responseMessage.length > 0) {
|
||||
// If it's already in Indonesian, use it
|
||||
if (/[a-zA-Z]/.test(responseMessage) === false) {
|
||||
return responseMessage
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Handle Error object
|
||||
if (error instanceof Error) {
|
||||
// Network errors
|
||||
if (error.message.includes('Network') || error.message.includes('network')) {
|
||||
return 'Tidak dapat terhubung ke server. Periksa koneksi internet Anda.'
|
||||
}
|
||||
|
||||
// Timeout errors
|
||||
if (error.message.includes('timeout') || error.message.includes('Timeout')) {
|
||||
return 'Permintaan memakan waktu terlalu lama. Silakan coba lagi.'
|
||||
}
|
||||
}
|
||||
|
||||
// Default fallback message
|
||||
return 'Terjadi kesalahan. Silakan coba lagi.'
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets recovery action suggestion based on error type
|
||||
*/
|
||||
export function getErrorRecoveryAction(error: unknown): 'retry' | 'view-existing' | 'back' {
|
||||
if (error && typeof error === 'object' && 'response' in error) {
|
||||
const axiosError = error as AxiosError
|
||||
const status = axiosError.response?.status
|
||||
|
||||
// HTTP 409 - Conflict (already exists) → view existing
|
||||
if (status === 409) {
|
||||
return 'view-existing'
|
||||
}
|
||||
}
|
||||
|
||||
// Default: allow retry
|
||||
return 'retry'
|
||||
}
|
||||
Loading…
Reference in New Issue