mirror of
https://github.com/chillpadclub/bedolaga-cabinet.git
synced 2026-07-29 18:13:47 +00:00
b59122818c
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.
38 lines
1.0 KiB
TypeScript
38 lines
1.0 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export function AnimatedCheckmark({ className }: { className?: string }) {
|
|
return (
|
|
<motion.div
|
|
initial={{ scale: 0 }}
|
|
animate={{ scale: 1 }}
|
|
transition={{ type: 'spring', stiffness: 200, damping: 15, delay: 0.1 }}
|
|
className={cn(
|
|
'flex h-20 w-20 items-center justify-center rounded-full bg-success-500/10',
|
|
className,
|
|
)}
|
|
>
|
|
<motion.svg
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
transition={{ duration: 0.4, delay: 0.3 }}
|
|
className="h-10 w-10 text-success-500"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
strokeWidth={2.5}
|
|
aria-hidden="true"
|
|
>
|
|
<motion.path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
d="M5 13l4 4L19 7"
|
|
initial={{ pathLength: 0 }}
|
|
animate={{ pathLength: 1 }}
|
|
transition={{ duration: 0.4, delay: 0.3 }}
|
|
/>
|
|
</motion.svg>
|
|
</motion.div>
|
|
);
|
|
}
|