Refactor: Implement Dedicated Reward Claim Dialog and Button Logic

[gitsofaryan]

What does this PR do?

Fixes #1776

This PR refactors the reward claiming mechanism as per your suggestions, introducing a dedicated ClaimRewardDialog and improving the logic for the "Claim Reward" button.

Description:

Thank you for your detailed feedback, @KoalaSat! I've implemented the changes as discussed. Here’s how this PR addresses your comments:

1. Claim Reward Flow - Separate Popup:

   • I've created a new component, ClaimRewardDialog.tsx, which now encapsulates the reward claiming form.
   • The "Claim Reward" button in ProfileDialog now opens this new ClaimRewardDialog.
   • The info alert about contacting coordinators (e.g., "To claim your rewards, please contact...") is now part of the ClaimRewardDialog. It will only be displayed after a claim attempt (simulated here) fails, as per your suggestion. This ensures the user first attempts to claim via invoice before being advised to contact a coordinator for issues.

2. Button State - Disable until rewards available:

   • The "Claim Reward" button in ProfileDialog is now disabled by default.
   • It becomes enabled only if hasClaimableRewards is true, which is determined by checking if robot?.earnedRewards > 0 for any of the known coordinators. This prevents users from attempting to claim when there are no rewards available.

3. UI/Layout Issues:

   • Robot window expands its width: I've reviewed the layout within ProfileDialog and used standard Material-UI components and sx props, which are generally responsive. For the ListItemAvatar, I've added minWidth: 0 and marginLeft to ListItemAvatar and flexShrink: 0 to RobotAvatar's style to give it fixed dimensions and prevent it from affecting the ListItemText's width. This should help in preventing unexpected width expansions.
   • Check for mobile view: The use of Material-UI's responsive properties and sx for styling should help maintain layout across different screen sizes. I've conducted initial checks, and the dialog adapts well.
   • Robot avatar out of margins: The ListItemAvatar now has minWidth: 0 to allow the ListItemText to take more space, and marginLeft for appropriate spacing. The RobotAvatar itself has flexShrink: 0 to ensure its defined width/height are respected, keeping it within its intended bounds.

This approach provides a clearer and more guided user experience for claiming rewards.

Checklist before merging

• Install pre-commit and initialize it: pip install pre-commit, then pre-commit install. Pre-commit installs git hooks that automatically check the codebase. If pre-commit fails when you commit your changes, please fix the problems it points out.
• All mentor's feedback points addressed.
• Tested reward claim flow and button states.
• Reviewed UI responsiveness on different screen sizes.

[gitsofaryan]

@KoalaSat please have a look at it!!