Skip to content

feat(send): wire confirm step to /api/send and computeAllocation#494

Open
Wetshakat wants to merge 1 commit into
Remitwise-Org:mainfrom
Wetshakat:feat/connect-send-money-api-flow
Open

feat(send): wire confirm step to /api/send and computeAllocation#494
Wetshakat wants to merge 1 commit into
Remitwise-Org:mainfrom
Wetshakat:feat/connect-send-money-api-flow

Conversation

@Wetshakat

Copy link
Copy Markdown

closed #456

Summary

feat(send): Wire confirm step to real /api/send endpoint and compute allocation

Description

This PR replaces the simulated transaction flow in the Send Money feature with a production-ready implementation. It wires the Review step directly to the /api/send endpoint, integrates the remittance split logic client-side, and introduces robust error handling, pending states, and i18n support.

Changes Included

🏗 Backend & Typings

  • Strict API Typings: Added SendTransactionRequest, SendTransactionResponse, and SendTransactionResult to lib/types/api.ts to enforce a unified contract across the frontend and backend.
  • Endpoint Validation: Tightened the /api/send stub (app/api/send/route.ts) to validate the request payload (checks for amount > 0 and missing recipients) before returning a typed placeholder payload.

🖥 Frontend & UX

  • Removed Mocks: Removed the hardcoded "Maria Santos", fabricated hashes, and inline split math (amount * 0.5) from app/send/page.tsx.
  • Real API Integration: The submission flow now uses apiClient.post, gracefully handling session expirations, 4xx/5xx API failures, and network timeouts.
  • Dynamic Split Breakdown: We now use computeAllocation() (imported from lib/remittance/split.ts) to generate integer-safe allocation splits dynamically based on the sent amount.
  • Pending States & Accessibility: Updated ReviewStep.tsx to accept an isPending prop. The Confirm button now disables during flight, shows a spinning loader, and uses aria-busy / dynamic aria-labels for screen readers.
  • Receipt Component Fix: Updated TransactionSuccessReceipt to accept splits.spending rather than the mismatched dailySpending property.

🌍 Localization

  • Externalized all user-facing strings (success/error toasts, confirm button text, loading states) to the send namespace in en.json and es.json.

🧪 Testing & Documentation

  • Unit Tests: Added tests/unit/send-handler.test.ts (Vitest-compatible) which asserts:
    • Input validation boundaries (empty amount, missing recipient)
    • Happy path verification (proper split math, fallback recipient truncation)
    • Error path execution (4xx, 5xx, and generic network failures)
  • README Update: Appended a new "Send Flow Integration" section to README_SPLIT_TRANSACTIONS.md outlining why the app calculates the split breakdown client-side.

Testing Instructions

  1. Check out this branch locally: git checkout feat/connect-send-money-api-flow.
  2. Start the dev server (npm run dev) and navigate to the Send flow.
  3. Advance to the Review step and confirm a transaction. Observe the loading state and the real success receipt populated with proper hash and splits.
  4. Try to submit with your network throttled/offline to verify the new error toast handlers.
  5. Run unit tests (vitest run tests/unit/send-handler.test.ts) to verify coverage.

Replaces mocked hash/recipient/splits in handleConfirm with a typed
/api/send call and computeAllocation()-derived breakdown feeding
TransactionSuccessReceipt. Adds pending + error states.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Wire the Send Money confirm step to the real /api/send build flow instead of the mocked hash in app/send/page.tsx

1 participant