feat: add dedicated TopUpResult page for payment return flow

Replace toast-based payment return with animated result page showing
pending/success/failed/timeout states. Extract shared Spinner,
AnimatedCheckmark and AnimatedCrossmark components. Add sessionStorage
persistence with validation and TTL for cross-redirect payment data.
Unify ProtectedRoute with withLayout prop, add aria-live accessibility.
This commit is contained in:
Fringg
2026-03-09 03:58:40 +03:00
parent d7b1ff1052
commit b59122818c
14 changed files with 608 additions and 130 deletions

View File

@@ -687,6 +687,19 @@
"paymentSuccess": {
"title": "Payment Successful",
"message": "Your balance has been topped up successfully. The funds are now available."
},
"topUpResult": {
"awaitingPayment": "Awaiting Payment",
"awaitingPaymentDesc": "We are waiting for your payment confirmation. This may take a few minutes.",
"topUpAmount": "Top-up amount",
"success": "Balance Topped Up!",
"successDesc": "Your balance has been topped up successfully. The funds are now available.",
"failed": "Payment Failed",
"failedDesc": "Unfortunately, the payment was not completed. Please try again or choose a different payment method.",
"timeout": "Taking Longer Than Expected",
"timeoutDesc": "Payment processing is taking longer than usual. You can try checking the status again.",
"goToBalance": "Go to Balance",
"tryAgain": "Try Again"
}
},
"referral": {