diff --git a/frontend/src/basic/RobotPage/index.tsx b/frontend/src/basic/RobotPage/index.tsx index 963f6cd1..151c75ae 100644 --- a/frontend/src/basic/RobotPage/index.tsx +++ b/frontend/src/basic/RobotPage/index.tsx @@ -9,6 +9,7 @@ import { Typography, useTheme, AlertTitle, + Button, } from '@mui/material'; import { useParams } from 'react-router-dom'; @@ -19,6 +20,7 @@ import { TorIcon } from '../../components/Icons'; import { AppContext, type UseAppStoreType } from '../../contexts/AppContext'; import { GarageContext, type UseGarageStoreType } from '../../contexts/GarageContext'; import RecoveryDialog from '../../components/Dialogs/Recovery'; +import ClaimRewardDialog from '../../components/Dialogs/ClaimReward'; const RobotPage = (): JSX.Element => { const { torStatus, windowSize, settings, page, client } = useContext(AppContext); @@ -34,6 +36,7 @@ const RobotPage = (): JSX.Element => { const [view, setView] = useState<'welcome' | 'onboarding' | 'profile'>( garage.currentSlot !== null ? 'profile' : 'welcome', ); + const [openClaimReward, setOpenClaimReward] = useState(false); useEffect(() => { const token = urlToken ?? garage.currentSlot; @@ -106,6 +109,25 @@ const RobotPage = (): JSX.Element => { }} > + { + setOpenClaimReward(false); + }} + /> + + + + + {view === 'welcome' ? ( ) : null} diff --git a/frontend/src/components/Dialogs/ClaimReward.tsx b/frontend/src/components/Dialogs/ClaimReward.tsx new file mode 100644 index 00000000..41f1036a --- /dev/null +++ b/frontend/src/components/Dialogs/ClaimReward.tsx @@ -0,0 +1,61 @@ +import React, { useState } from 'react'; +import { useTranslation } from 'react-i18next'; +import { + Dialog, + DialogTitle, + DialogContent, + DialogActions, + Button, + TextField, + Typography, + Grid, +} from '@mui/material'; + +interface ClaimRewardDialogProps { + open: boolean; + onClose: () => void; +} + +const ClaimRewardDialog = ({ open, onClose }: ClaimRewardDialogProps): JSX.Element => { + const { t } = useTranslation(); + const [invoice, setInvoice] = useState(''); + + const handleSubmit = (): void => { + // Handle the reward claiming process here + console.log('Invoice submitted:', invoice); + onClose(); + }; + + return ( + + {t('Claim Reward')} + + + + + {t( + 'If you did not receive the payment, please contact your coordinator or the last order if known.', + )} + + + + setInvoice(e.target.value)} + /> + + + + + + + + + ); +}; + +export default ClaimRewardDialog;