feat: add public payment invoice flow

[Tybravo]

Overview

This PR implements the foundational public payment experience for customer-facing invoice payments in the Shade frontend application.

The implementation introduces a clean hosted-payment style layout, reusable invoice summary UI, and invalid invoice handling flow using mock async data patterns for future backend integration readiness.

---

Features Implemented

✅ Public Payment Page Wrapper

• Added a dedicated public payment layout
• Removed merchant dashboard/sidebar dependencies from payment flow
• Added minimal Shade-branded header
• Implemented centered and isolated payment experience
• Added responsive neutral background layout

✅ Payment Invoice Summary Card

• Created reusable invoice summary component

• Displays:

  • Merchant logo
  • Merchant name
  • Invoice description
  • Large formatted amount + token display

• Added graceful merchant logo fallback handling

• Structured component for future API/smart contract integration

✅ Invalid Invoice Error State

• Added reusable invalid/expired invoice state component

• Includes:

  • Warning visual state
  • Clear error messaging
  • “Try Another Reference” CTA

• Supports invalid and expired invoice scenarios

✅ Mock Async Invoice Flow

• Added mock async invoice retrieval flow

• Implemented:

  • loading state
  • success state
  • invalid state

• Structured to support future backend integration with minimal refactor

---

Technical Notes

• MVP-focused implementation
• No overengineering introduced
• Reused existing frontend patterns and styling conventions
• Fully responsive layout
• Future-ready component architecture
• Clean prop typing and modular structure

---

Testing

Tested:

• Valid invoice rendering
• Invalid invoice rendering
• Expired invoice rendering
• Responsive layout behavior
• Loading state transitions

---

Future Integration Ready

The implementation is structured for future integration with:

• Backend invoice APIs
• Smart contract payment validation
• Wallet connection/payment execution
• Real merchant metadata sources

Related Issues

Closes #45
Closes #47
Closes #48

[drips-wave]

@Tybravo Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[codebestia]

LGTM!
Thanks