Improve UX for claiming rewards

scratch work

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<UseAppStoreType>(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<boolean>(false);
 
   useEffect(() => {
     const token = urlToken ?? garage.currentSlot;
@@ -106,6 +109,25 @@ const RobotPage = (): JSX.Element => {
         }}
       >
         <RecoveryDialog setInputToken={setInputToken} setView={setView} />
+        <ClaimRewardDialog
+          open={openClaimReward}
+          onClose={() => {
+            setOpenClaimReward(false);
+          }}
+        />
+        <Grid container direction='column' alignItems='center' spacing={1} padding={2}>
+          <Grid item>
+            <Button
+              variant='contained'
+              color='primary'
+              onClick={() => {
+                setOpenClaimReward(true);
+              }}
+            >
+              {t('Claim Reward')}
+            </Button>
+          </Grid>
+        </Grid>
         {view === 'welcome' ? (
           <Welcome setView={setView} width={width} setInputToken={setInputToken} />
         ) : null}

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<string>('');
+
+  const handleSubmit = (): void => {
+    // Handle the reward claiming process here
+    console.log('Invoice submitted:', invoice);
+    onClose();
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose}>
+      <DialogTitle>{t('Claim Reward')}</DialogTitle>
+      <DialogContent>
+        <Grid container direction='column' spacing={2}>
+          <Grid item>
+            <Typography>
+              {t(
+                'If you did not receive the payment, please contact your coordinator or the last order if known.',
+              )}
+            </Typography>
+          </Grid>
+          <Grid item>
+            <TextField
+              label={t('Reward Invoice')}
+              fullWidth
+              value={invoice}
+              onChange={(e) => setInvoice(e.target.value)}
+            />
+          </Grid>
+        </Grid>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>{t('Cancel')}</Button>
+        <Button onClick={handleSubmit} color='primary' variant='contained'>
+          {t('Submit')}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+};
+
+export default ClaimRewardDialog;