97 lines
3.1 KiB
JavaScript
97 lines
3.1 KiB
JavaScript
import React, { Component } from "react";
|
|
import { Box, Typography, Button } from "@mui/material";
|
|
|
|
class PaymentConfirmationDialog extends Component {
|
|
render() {
|
|
const {
|
|
paymentCompletionData,
|
|
isCompletingOrder,
|
|
completionError,
|
|
orderCompleted,
|
|
onContinueShopping,
|
|
onViewOrders,
|
|
} = this.props;
|
|
|
|
if (!paymentCompletionData) return null;
|
|
|
|
return (
|
|
<Box sx={{
|
|
mb: 3,
|
|
p: 3,
|
|
border: '2px solid',
|
|
borderColor: paymentCompletionData.isSuccessful ? '#2e7d32' : '#d32f2f',
|
|
borderRadius: 2,
|
|
bgcolor: paymentCompletionData.isSuccessful ? '#e8f5e8' : '#ffebee'
|
|
}}>
|
|
<Typography variant="h5" sx={{
|
|
mb: 2,
|
|
color: paymentCompletionData.isSuccessful ? '#2e7d32' : '#d32f2f',
|
|
fontWeight: 'bold'
|
|
}}>
|
|
{paymentCompletionData.isSuccessful ? 'Zahlung erfolgreich!' : 'Zahlung fehlgeschlagen'}
|
|
</Typography>
|
|
|
|
{paymentCompletionData.isSuccessful ? (
|
|
<>
|
|
{orderCompleted ? (
|
|
<Typography variant="body1" sx={{ mt: 2, color: '#2e7d32' }}>
|
|
🎉 Ihre Bestellung wurde erfolgreich abgeschlossen! Sie können jetzt Ihre Bestellungen einsehen.
|
|
</Typography>
|
|
) : (
|
|
<Typography variant="body1" sx={{ mt: 2, color: '#2e7d32' }}>
|
|
Ihre Zahlung wurde erfolgreich verarbeitet. Die Bestellung wird automatisch abgeschlossen.
|
|
</Typography>
|
|
)}
|
|
</>
|
|
) : (
|
|
<Typography variant="body1" sx={{ mt: 2, color: '#d32f2f' }}>
|
|
Ihre Zahlung konnte nicht verarbeitet werden. Bitte versuchen Sie es erneut oder wählen Sie eine andere Zahlungsmethode.
|
|
</Typography>
|
|
)}
|
|
|
|
{isCompletingOrder && (
|
|
<Typography variant="body2" sx={{ mt: 2, color: '#2e7d32', p: 2, bgcolor: '#e8f5e8', borderRadius: 1 }}>
|
|
Bestellung wird abgeschlossen...
|
|
</Typography>
|
|
)}
|
|
|
|
{completionError && (
|
|
<Typography variant="body2" sx={{ mt: 2, color: '#d32f2f', p: 2, bgcolor: '#ffcdd2', borderRadius: 1 }}>
|
|
{completionError}
|
|
</Typography>
|
|
)}
|
|
|
|
{orderCompleted && (
|
|
<Box sx={{ mt: 3, display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
|
|
<Button
|
|
onClick={onContinueShopping}
|
|
variant="outlined"
|
|
sx={{
|
|
color: '#2e7d32',
|
|
borderColor: '#2e7d32',
|
|
'&:hover': {
|
|
backgroundColor: 'rgba(46, 125, 50, 0.04)',
|
|
borderColor: '#1b5e20'
|
|
}
|
|
}}
|
|
>
|
|
Weiter einkaufen
|
|
</Button>
|
|
<Button
|
|
onClick={onViewOrders}
|
|
variant="contained"
|
|
sx={{
|
|
bgcolor: '#2e7d32',
|
|
'&:hover': { bgcolor: '#1b5e20' }
|
|
}}
|
|
>
|
|
Zu meinen Bestellungen
|
|
</Button>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default PaymentConfirmationDialog;
|