diff --git a/app/frontend/src/app/pay/PaymentPageClient.tsx b/app/frontend/src/app/pay/PaymentPageClient.tsx index ae9c506f7..efddc2a18 100644 --- a/app/frontend/src/app/pay/PaymentPageClient.tsx +++ b/app/frontend/src/app/pay/PaymentPageClient.tsx @@ -23,6 +23,10 @@ type PaymentLinkStatus = { expiresAt: string | null; transactionHash: string | null; paidAt: string | null; + receiptHash?: string | null; + contractId?: string | null; + network?: string | null; + correlationId?: string | null; swapOptions?: Array<{ sourceAmount: string; sourceAsset: string; diff --git a/app/frontend/src/components/payment-states/ActivePaymentState.tsx b/app/frontend/src/components/payment-states/ActivePaymentState.tsx index 6ca91f092..af633ae78 100644 --- a/app/frontend/src/components/payment-states/ActivePaymentState.tsx +++ b/app/frontend/src/components/payment-states/ActivePaymentState.tsx @@ -35,6 +35,10 @@ interface PaymentLinkStatus { acceptedAssets: string[] | null; userMessage: string; availableActions: string[]; + receiptHash?: string | null; + contractId?: string | null; + network?: string | null; + correlationId?: string | null; } interface ActivePaymentStateProps { diff --git a/app/frontend/src/components/payment-states/ExpiredPaymentState.tsx b/app/frontend/src/components/payment-states/ExpiredPaymentState.tsx index eb6858bf8..6674674fc 100644 --- a/app/frontend/src/components/payment-states/ExpiredPaymentState.tsx +++ b/app/frontend/src/components/payment-states/ExpiredPaymentState.tsx @@ -9,6 +9,10 @@ interface PaymentLinkStatus { memo: string | null; expiresAt: string | null; userMessage: string; + receiptHash?: string | null; + contractId?: string | null; + network?: string | null; + correlationId?: string | null; } interface ExpiredPaymentStateProps { diff --git a/app/frontend/src/components/payment-states/PaidPaymentState.tsx b/app/frontend/src/components/payment-states/PaidPaymentState.tsx index 13f5ead1f..21b2c6bc4 100644 --- a/app/frontend/src/components/payment-states/PaidPaymentState.tsx +++ b/app/frontend/src/components/payment-states/PaidPaymentState.tsx @@ -10,6 +10,10 @@ interface PaymentLinkStatus { transactionHash: string | null; paidAt: string | null; userMessage: string; + receiptHash?: string | null; + contractId?: string | null; + network?: string | null; + correlationId?: string | null; } interface PaidPaymentStateProps { @@ -23,6 +27,30 @@ export function PaidPaymentState({ status }: PaidPaymentStateProps) { return (
+ {/* Status Timeline */} +
+
+
+ +
+ Initiated +
+
+
+
+ +
+ Pending +
+
+
+
+ +
+ Success +
+
+ {/* Header */}
{ - navigator.clipboard.writeText(status.transactionHash!); + const debugData = `--- Support Receipt Data ---\nStatus: SUCCESS\nTx Hash: ${status.transactionHash}\nReceipt Hash: ${status.receiptHash || 'N/A'}\nContract: ${status.contractId || 'N/A'}\nNetwork: ${status.network || 'N/A'}\nCorrelation ID: ${status.correlationId || 'N/A'}\nPaid To: @${status.username}\nAmount: ${status.amount} ${status.asset}\nTime: ${status.paidAt || 'N/A'}`; + navigator.clipboard.writeText(debugData); }} - className="w-full py-3 bg-surface-strong hover:bg-surface-strong rounded-xl font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-300 focus-visible:ring-offset-2 focus-visible:ring-offset-background" + className="w-full py-3 bg-surface-strong hover:bg-surface-strong rounded-xl font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-300 focus-visible:ring-offset-2 focus-visible:ring-offset-background flex items-center justify-center gap-2" > - Copy Transaction Hash + + Share Receipt Data )}
+ + {/* Technical Details for Support */} +
+
+ + Technical Details (Support) + + + + +
+
+ Receipt Hash: + {status.receiptHash || 'N/A'} +
+
+ Contract ID: + {status.contractId || 'N/A'} +
+
+ Network: + {status.network || 'N/A'} +
+
+ Correlation ID: + {status.correlationId || 'N/A'} +
+
+
+
); } diff --git a/app/frontend/src/components/payment-states/RefundedPaymentState.tsx b/app/frontend/src/components/payment-states/RefundedPaymentState.tsx index 24039b775..8d44c3032 100644 --- a/app/frontend/src/components/payment-states/RefundedPaymentState.tsx +++ b/app/frontend/src/components/payment-states/RefundedPaymentState.tsx @@ -10,6 +10,10 @@ interface PaymentLinkStatus { transactionHash: string | null; paidAt: string | null; userMessage: string; + receiptHash?: string | null; + contractId?: string | null; + network?: string | null; + correlationId?: string | null; } interface RefundedPaymentStateProps { @@ -19,6 +23,30 @@ interface RefundedPaymentStateProps { export function RefundedPaymentState({ status }: RefundedPaymentStateProps) { return (
+ {/* Status Timeline */} +
+
+
+ +
+ Initiated +
+
+
+
+ +
+ Pending +
+
+
+
+ +
+ Refunded +
+
+ {/* Header */}
window.history.back()} - className="w-full py-3 bg-surface-strong hover:bg-surface-strong rounded-xl font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-300 focus-visible:ring-offset-2 focus-visible:ring-offset-background" + aria-label="Share receipt data for support" + onClick={() => { + const debugData = `--- Support Receipt Data ---\nStatus: REFUNDED\nTx Hash: ${status.transactionHash || 'N/A'}\nReceipt Hash: ${status.receiptHash || 'N/A'}\nContract: ${status.contractId || 'N/A'}\nNetwork: ${status.network || 'N/A'}\nCorrelation ID: ${status.correlationId || 'N/A'}\nOriginal Recipient: @${status.username}\nAmount: ${status.amount} ${status.asset}\nTime: ${status.paidAt || 'N/A'}`; + navigator.clipboard.writeText(debugData); + }} + className="w-full py-3 bg-surface-strong hover:bg-surface-strong rounded-xl font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-300 focus-visible:ring-offset-2 focus-visible:ring-offset-background flex items-center justify-center gap-2" > - Go Back + + Share Receipt Data
+ + {/* Technical Details for Support */} +
+
+ + Technical Details (Support) + + + + +
+
+ Receipt Hash: + {status.receiptHash || 'N/A'} +
+
+ Contract ID: + {status.contractId || 'N/A'} +
+
+ Network: + {status.network || 'N/A'} +
+
+ Correlation ID: + {status.correlationId || 'N/A'} +
+
+
+
); }