finalizing subscription moduile, ready to test

customer-spa/src/pages/Account/OrderDetails.tsx

@@ -115,9 +115,19 @@ export default function OrderDetails() {
 
       <div className="flex items-center justify-between mb-6">
         <h1 className="text-2xl font-bold">Order #{order.order_number}</h1>
-        <span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(order.status)}`}>
-          {order.status.replace('-', ' ').toUpperCase()}
-        </span>
+        <div className="flex items-center gap-3">
+          {['pending', 'failed', 'on-hold'].includes(order.status) && (
+            <Link
+              to={`/checkout/pay/${order.id}`}
+              className="px-4 py-2 bg-primary text-primary-foreground text-sm font-medium rounded-lg hover:bg-primary/90 transition-colors shadow-sm"
+            >
+              Pay Now
+            </Link>
+          )}
+          <span className={`px-3 py-1 rounded-full text-xs font-medium ${getStatusColor(order.status)}`}>
+            {order.status.replace('-', ' ').toUpperCase()}
+          </span>
+        </div>
       </div>
 
       <div className="text-sm text-gray-600 mb-6">