Create coupon redemption button for digital coupon redemption

[Josue19-08]

➡️ Title

Create coupon redemption button for digital coupon redemption

📘 Description

Create a redemption button component that allows users to redeem their active coupons digitally. The button should handle the redemption process, show loading states, and provide feedback on success or failure.

Context: Users need an easy way to redeem their tourism coupons directly from the interface. The button should only be available for active coupons and provide clear feedback during the redemption process.

✅ Acceptance Criteria

Button component creation

• Create components/coupons/coupon-redeem-button.tsx
• Accept coupon ID and status as props
• Show different states based on coupon status
• Handle redemption API call and user feedback

Button states and visibility

• Show "Redeem Coupon" for active coupons
• Show "Already Redeemed" (disabled) for redeemed coupons
• Show "Expired" (disabled) for expired coupons
• Hide button completely for invalid coupons

Redemption functionality

• Call backend API endpoint POST /coupon/redeem/:id
• Show loading spinner during API call
• Handle success response with confirmation message
• Handle error responses with appropriate error messages
• Update coupon status in local state after successful redemption

Design consistency (follow existing patterns)

• Use same button styling as components/ui/button.tsx
• Follow button patterns from components/adopt-tree/adopt-tree-button.tsx
• Apply same color scheme for success/error states as existing buttons
• Use consistent loading spinner from existing components
• Match spacing and sizing with other action buttons in the app

User feedback

• Show success toast/notification after redemption
• Display error message for failed redemptions
• Provide confirmation dialog before redemption (optional)
• Update button text and state immediately after redemption

Integration requirements

• Integrate with existing authentication system
• Use existing toast/notification system if available
• Connect with coupon data fetching hook
• Refresh coupon data after successful redemption

⚠ Use kebab-case for all file and folder names.
⚠ Do not use default alias imports or relative paths like ../../components/foo.
⚠ Use alias paths with @, e.g. @/components/foo.
⚠ Structure the code with reusable components and reuse existing ones.

[DanielCotoJ]

I’d like to take on “Create coupon redemption button for digital coupon redemption.”

Plan:

• Implement @/components/coupons/coupon-redeem-button.tsx following existing button/modal patterns (see adopt-tree-button, ui/button).
• Props: couponId, status.
• States: Active → “Redeem Coupon”, Redeemed → “Already Redeemed” (disabled), Expired → “Expired” (disabled), Invalid → hidden.
• Call POST /coupon/redeem/:id with loading spinner, show success/error toasts, and update local state + refetch coupon data.
• Integrate with current auth and notification system; reuse existing spinner/colors.

Estimate: ~1-2 days.