root
/
Midtrans-Middleware
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(payments): implement Story 1.1 - Add error messages utility, loading overlay, and update BankTransferPanel 

- Created src/lib/errorMessages.ts for user-friendly Bahasa Indonesia error messages
- Created src/components/LoadingOverlay.tsx with Framer Motion animations
- Updated BankTransferPanel with LoadingOverlay and mapErrorToUserMessage
- All 4 error catch blocks now use user-friendly messages
- GoPayPanel imports restored (ready for next iteration)

Story: 1.1 - Prevent Duplicate VA/QR/Code Generation & Improve Feedback
Status: Partial (BankTransferPanel complete, GoPayPanel & CStorePanel pending)
This commit is contained in:
CIFO Dev 2025-11-25 14:04:41 +07:00
parent 9a0f6d85f8
commit 4eccff2c03
4 changed files with 286 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/LoadingOverlay.tsx Normal file
View File

@ -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>
)
}

17
src/features/payments/components/BankTransferPanel.tsx
View File

@ -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,6 +136,8 @@ export function BankTransferPanel({ orderId, amount, locked, onChargeInitiated,
}, [selected])
return (
<>
<LoadingOverlay isLoading={busy} message="Sedang membuat kode pembayaran..." />
<div className="space-y-3">
<div className="font-medium">Transfer Bank</div>
{selected && (
@ -230,8 +232,7 @@ export function BankTransferPanel({ orderId, amount, locked, onChargeInitiated,
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.'
const msg = mapErrorToUserMessage(e)
setErrorMessage(msg)
} finally {
setBusy(false)
@ -266,8 +267,7 @@ export function BankTransferPanel({ orderId, amount, locked, onChargeInitiated,
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.'
const msg = mapErrorToUserMessage(e)
setErrorMessage(msg)
} finally {
setBusy(false)
@ -296,6 +296,7 @@ export function BankTransferPanel({ orderId, amount, locked, onChargeInitiated,
</Button>
</div>
</div>
</>
)
}

10
src/features/payments/components/GoPayPanel.tsx
View File

@ -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">

81
src/lib/errorMessages.ts Normal file
View File

@ -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'
}