diff --git a/frontend/src/components/Dialogs/ClaimRewardDialog.tsx b/frontend/src/components/Dialogs/ClaimRewardDialog.tsx new file mode 100644 index 00000000..79b23a22 --- /dev/null +++ b/frontend/src/components/Dialogs/ClaimRewardDialog.tsx @@ -0,0 +1,102 @@ +import React, { useState } from 'react'; +import { + Dialog, + DialogTitle, + DialogContent, + DialogActions, + Button, + Typography, + Alert, + TextField, +} from '@mui/material'; +import RedeemIcon from '@mui/icons-material/Redeem'; + +interface Props { + open: boolean; + onClose: () => void; + t: (key: string) => string; // Pass the translation function +} + +const ClaimRewardDialog = ({ open, onClose, t }: Props): JSX.Element => { + const [invoiceAmount, setInvoiceAmount] = useState(''); + const [showFailedClaimInfo, setShowFailedClaimInfo] = useState(false); + const [claimLoading, setClaimLoading] = useState(false); + + const handleClaimSubmit = () => { + setClaimLoading(true); + setShowFailedClaimInfo(false); // Reset alert + // Simulate an API call for claiming rewards + setTimeout(() => { + setClaimLoading(false); + // In a real scenario, this would depend on the API response + const success = Math.random() > 0.5; // Simulate success/failure + if (!success) { + setShowFailedClaimInfo(true); + } else { + // Handle successful claim (e.g., show a success message, close dialog) + alert(t('Reward claimed successfully!')); + onClose(); + } + }, 1500); + }; + + return ( + + + {t('Claim Your Rewards')} + + + + {t('You have 0 Sats in compensations.')} {/* Placeholder for actual sats */} + + + {/* This would be a more complex form for invoice submission */} + setInvoiceAmount(e.target.value)} + sx={{ marginBottom: '16px' }} + /> + + {showFailedClaimInfo && ( + + {t( + 'To claim your rewards, please contact the coordinator of your last order. If the payment fails, you must contact the coordinator - do not generate a new invoice.', + )} + + )} + + + + + + + ); +}; + +export default ClaimRewardDialog;