100 lines
3.6 KiB
JavaScript
100 lines
3.6 KiB
JavaScript
import React, { Component } from "react";
|
|
import { Box, Typography, Button } from "@mui/material";
|
|
import { withI18n } from "../../i18n/withTranslation.js";
|
|
|
|
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 ?
|
|
(this.props.t ? this.props.t('payment.successful') : 'Zahlung erfolgreich!') :
|
|
(this.props.t ? this.props.t('payment.failed') : 'Zahlung fehlgeschlagen')}
|
|
</Typography>
|
|
|
|
{paymentCompletionData.isSuccessful ? (
|
|
<>
|
|
{orderCompleted ? (
|
|
<Typography variant="body1" sx={{ mt: 2, color: '#2e7d32' }}>
|
|
{this.props.t ? this.props.t('payment.orderCompleted') : '🎉 Ihre Bestellung wurde erfolgreich abgeschlossen! Sie können jetzt Ihre Bestellungen einsehen.'}
|
|
</Typography>
|
|
) : (
|
|
<Typography variant="body1" sx={{ mt: 2, color: '#2e7d32' }}>
|
|
{this.props.t ? this.props.t('payment.orderProcessing') : 'Ihre Zahlung wurde erfolgreich verarbeitet. Die Bestellung wird automatisch abgeschlossen.'}
|
|
</Typography>
|
|
)}
|
|
</>
|
|
) : (
|
|
<Typography variant="body1" sx={{ mt: 2, color: '#d32f2f' }}>
|
|
{this.props.t ? this.props.t('payment.paymentError') : '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 }}>
|
|
{this.props.t ? this.props.t('orders.processing') : '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'
|
|
}
|
|
}}
|
|
>
|
|
{this.props.t ? this.props.t('cart.continueShopping') : 'Weiter einkaufen'}
|
|
</Button>
|
|
<Button
|
|
onClick={onViewOrders}
|
|
variant="contained"
|
|
sx={{
|
|
bgcolor: '#2e7d32',
|
|
'&:hover': { bgcolor: '#1b5e20' }
|
|
}}
|
|
>
|
|
{this.props.t ? this.props.t('payment.viewOrders') : 'Zu meinen Bestellungen'}
|
|
</Button>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withI18n()(PaymentConfirmationDialog);
|