diff --git a/src/app/account/page.tsx b/src/app/account/page.tsx index 3c4e708b..a6c78bb2 100644 --- a/src/app/account/page.tsx +++ b/src/app/account/page.tsx @@ -33,12 +33,20 @@ export default function AccountPage() {
- - View recent security activity - +
+ + View recent security activity + + + View payment dashboard + +
diff --git a/src/app/payment/dashboard/PaymentDashboardContent.tsx b/src/app/payment/dashboard/PaymentDashboardContent.tsx new file mode 100644 index 00000000..00dcf3b8 --- /dev/null +++ b/src/app/payment/dashboard/PaymentDashboardContent.tsx @@ -0,0 +1,56 @@ +'use client'; + +import React from 'react'; +import { PaymentHistory } from '@/components/payment/PaymentHistory'; +import { featureFlags } from '@/config/payment'; + +/** + * Client body of /payment/dashboard (#3). Shows the not-configured banner when + * neither payment provider is set up (mirrors /payment-demo), then the user's + * transaction history plus a link to subscription management. + */ +export function PaymentDashboardContent() { + const noProvidersConfigured = + !featureFlags.stripeEnabled && !featureFlags.paypalEnabled; + + return ( +
+ {noProvidersConfigured && ( +
+ +
+

Payment providers not configured

+

+ No payments can be processed until Stripe or PayPal is set up. Set{' '} + NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY and/or{' '} + NEXT_PUBLIC_PAYPAL_CLIENT_ID in .env. + See docs/PAYMENT-DEPLOYMENT.md. +

+
+
+ )} + +
+

+ Payment History +

+ +
+
+ ); +} + +export default PaymentDashboardContent; diff --git a/src/app/payment/dashboard/page.tsx b/src/app/payment/dashboard/page.tsx new file mode 100644 index 00000000..af564043 --- /dev/null +++ b/src/app/payment/dashboard/page.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import type { Metadata } from 'next'; +import Link from 'next/link'; +import ProtectedRoute from '@/components/auth/ProtectedRoute'; +import { PaymentDashboardContent } from './PaymentDashboardContent'; + +export const metadata: Metadata = { + title: 'Payment Dashboard - ScriptHammer', + description: 'Review your payment activity and history', + robots: { + index: false, + follow: false, + googleBot: { + index: false, + follow: false, + }, + }, +}; + +/** + * /payment/dashboard — user-facing payment activity dashboard (#3). + * Behind ProtectedRoute; composes the existing PaymentHistory component, which + * reads the caller's own transactions via RLS. Mirrors the /account/audit route + * pattern (server page + client content) and the /payment-demo not-configured + * banner. + */ +export default function PaymentDashboardPage() { + return ( + +
+
+
+

Payment Dashboard

+ + Back to Account + +
+ + +
+
+
+ ); +}