[FEATURE]

[Josue19-08]

➡️ Title

Integrate redemption logic with contract to connect frontend and backend

📘 Description

Connect the frontend coupon redemption flow with the backend API and Soroban contract. Ensure that when users redeem coupons from the UI, the entire flow works seamlessly from frontend to contract validation and database updates.

Context: Complete the integration between the coupon redemption button component, backend redemption endpoint, and Soroban contract redeem_coupon() function. Validate responses and update state globally across the application.

✅ Acceptance Criteria

Frontend integration

• Connect coupon redemption button to backend API endpoint
• Handle API responses and update local coupon state
• Show loading states during redemption process
• Display success/error feedback to user
• Refresh coupon list after successful redemption

API integration

• Ensure redemption API calls include proper authentication
• Handle different response scenarios: success, expired, already redeemed
• Implement proper error handling for network failures
• Validate API responses before updating UI state

State management

• Update coupon status in global state after redemption
• Invalidate and refetch coupon data when needed
• Ensure UI reflects real-time coupon status changes
• Handle concurrent redemption attempts gracefully

Contract integration validation

• Verify that frontend receives contract transaction hashes
• Ensure contract call results are properly handled
• Validate that blockchain state matches UI state
• Handle contract call failures appropriately

User experience flow

• Test complete redemption flow from UI button click to success message
• Ensure consistent feedback throughout the process
• Validate that redeemed coupons show correct status immediately
• Test error scenarios and recovery paths

Error handling scenarios

• Network connection failures during redemption
• Backend API errors or timeouts
• Contract call failures or reverts
• Invalid coupon states or authorization errors

⚠ 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.