[Ultra-Tech-code]

Summary

This pull request addresses UX enhancements, responsiveness, accessibility, bundle footprint optimization, and test coverage for the Withdrawal Request Modal and Merchant Profile Card modules.

Key Changes

1. Withdrawal Request Modal Responsive Drawer & Touch Gestures ([Frontend] Add responsive drawer view and touch gesture support to Withdrawal Request Modal #1672):

   • Implemented responsive mobile drawer view (items-end sm:items-center, rounded-t-3xl sm:rounded-3xl, max-h-[90vh] sm:max-h-[85vh]).
   • Added touch gesture support (onTouchStart and onTouchEnd) with swipe-down dismissal (deltaY > 50px).
   • Added visual drag handle indicator for mobile viewports.
   • Enforced WCAG 2.1 AA accessibility: focus trap with Tab/Shift+Tab, Escape key dismissal, body scroll locking, and accessible ARIA attributes (role="dialog", aria-modal="true", aria-labelledby, aria-describedby).

2. Withdrawal Request Modal Snapshot & User Interaction Test Suite ([Frontend] Add comprehensive snapshot tests and user interaction test suite for Withdrawal Request Modal #1675):

   • Added comprehensive test suite in WithdrawalModal.test.tsx covering rendering, asset selection, anchor input updates, submit flow, error handling, touch swipe-down gestures, focus trapping, and flow states (IDLE, AUTH, READY).
   • Generated snapshot tests for all modal states.

3. Merchant Profile Card Bundle Footprint & Dynamic Imports ([Frontend] Optimize bundle footprint and code splitting via dynamic imports for Merchant Profile Card #1669):

   • Code-split the heavy dropdown menu into MerchantProfileDropdown.tsx and dynamically imported it using next/dynamic with ssr: false and a lightweight skeleton placeholder.
   • Created MerchantProfileCard.lazy.tsx for whole-component code splitting.
   • Improved WCAG 2.1 AA accessibility: Escape key closure, focus return to trigger button, ARIA orientation, and role semantics.

4. Merchant Profile Card Snapshot & User Interaction Test Suite ([Frontend] Add comprehensive snapshot tests and user interaction test suite for Merchant Profile Card #1670):

   • Added comprehensive tests in MerchantProfileCard.test.tsx and MerchantProfileCard.lazy.test.tsx covering unhydrated skeleton state, logged-out login link, authenticated menu toggle, link navigation, logout action, keyboard navigation, and snapshots.

---

Verification

• Unit & snapshot tests executed with vitest:

  npm --prefix frontend run test:unit -- src/components/WithdrawalModal.test.tsx src/components/MerchantProfileCard.lazy.test.tsx src/components/MerchantProfileCard.test.tsx

  Result: 3 passed, 48/48 tests passed.

---

Closes #1675
Closes #1672
Closes #1670
Closes #1669

[vercel]

@Ultra-Tech-code is attempting to deploy a commit to the Emmanuel's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@Ultra-Tech-code 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