Rewards Card not clickable

[djnattyd]

It's not possible to claim any rewards using the Rewards card. The entire card has no interactions.

[gregcsw]

Experienced this too.

[etymotic]

I am trying to figure this out as well. Got ice cream tonight and need to cash those points in!

[etymotic]

I did find a pretty easy workaround, or maybe it's designed to work this way... but I just added the Choremander Points card which lets you manually add or remove points. I just remove redeemed points with that card, and the Rewards card shows the updated amount.

[johnmackinnon2889-sudo]

There is a few issues with the rewards .js file. I have fixed them and added some confirmations and checks. It works great now.

1. There was no redeem button at all. The _renderRewardRow method renders the cost badge, reward details, progress bar, child badges, and the reward icon container — but there was no button, click handler, or service call anywhere in the card.
   The approvals card had _handleApprove / _handleReject / _callService methods, but the rewards card had none of those equivalents. The reward row was purely display-only.

2. Once it was clickable, I noticed there was no confirmation box to confirm a redemption. I don't want a reward to be accidentally claimed. Added _pendingReward to the properties and updated the constructor, then updated the render method and _handleRedeem.

• Tapping the reward icon sets _pendingReward and shows the dialog — no service call yet
• Dialog shows the reward name, a Cancel and a Claim! button, and clicking the overlay backdrop also cancels
• Claim! button calls choremander.claim_reward and dismisses the dialog
• Cancel clears _pendingReward and the dialog disappears

3. There was no code to prevent the claim button being pressed when there was insufficient points/stars. The card already calculates currentStars and displayCost per reward in _renderRewardRow, so I just needed to pass that through to disable the click when currentStars < displayCost. When currentStars < displayCost the reward icon will be dimmed to 40% opacity, the cursor changes to default, and the click handler is nulled out so nothing happens. When they have enough points, it lights up fully and is clickable as before.

4. Add a popup to celebrate claiming a reward.

5. Reconfigured the claim popup to show the child's current points and the cost in the dialog so they can see exactly what they're spending, e.g. "You have 25 ⭐. This costs 20 ⭐. You'll have 5 ⭐ left."

6. Add points shortfall under the rewards. Instead of just dimming the icon, show how many more points are needed, e.g. "5 more ⭐ needed" as a small label under the progress bar.

7. Sort claimable rewards to the top — currently sorted jackpot-first then by cost. Rewards the child can actually afford could bubble up above unaffordable ones.

The file below contains all of the changes above. Replace the choremander-rewards-card.js file in the /config/custom_components/choremander/www folder

choremander-rewards-card.js