All files / src/app/(site)/(pages)/checkout error.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';

import { useEffect } from 'react';
import { ErrorPage } from '@/components/shared/ErrorPage';
import { logError } from '@/lib/errors/error-analytics';

/**
 * Checkout Error Boundary
 *
 * Handles errors during checkout with payment-aware messaging.
 */
export default function CheckoutError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    logError(error, { context: 'checkout', digest: error.digest });
  }, [error]);

  // Check if it's a payment error
  const isPaymentError = error.message.toLowerCase().includes('payment') ||
    error.message.toLowerCase().includes('card') ||
    error.message.toLowerCase().includes('stripe');

  return (
    <ErrorPage
      title={isPaymentError ? 'Payment failed' : 'Checkout error'}
      message={
        isPaymentError
          ? 'Your payment could not be processed. Please check your card details and try again.'
          : 'We encountered an issue with checkout. Your cart has been saved.'
      }
      variant="error"
      errorCode={error.digest}
      showRetry
      showBack
      showHome={false}
      onRetry={reset}
    />
  );
}