Feat/updates frontend#692
Merged
Merged
Conversation
…educer pattern ## Test Infrastructure Fixes ### Button Component - Update CSS classes to match design system (bg-mint, hover:bg-glow) - Add responsive sizing (px-4 sm:px-6, h-11 sm:h-12, text-sm sm:text-base) - Add mobile UX classes (min-h-[44px], touch-manipulation, active:scale-[0.98]) - Update focus styles (focus-visible:ring-mint) - Fix spinner colors (text-black for primary, text-mint for secondary) - Remove duplicate Loading... span (Spinner already includes sr-only text) - Update glow effect (bg-mint/20) ### useLocalStorage Hook - Add removeItem function to prevent race condition with setState - Implement skipNextWrite flag to avoid writing empty values after removal - Fix localStorage cleanup in form reset flows ### CreatePaymentForm - Update all useLocalStorage destructuring to capture removeItem function - Refactor handleReset to use removeItem() instead of setState() + localStorage.removeItem() - Fix localStorage race condition where hook's useEffect would write empty values back ### PaymentMetrics Component - Fix second useEffect to not overwrite existing errors - Use setError((prev) => prev ?? newError) to preserve first error - Fix infinite re-render caused by unstable translation function reference ### PaymentMetrics Tests - Change vi.clearAllMocks() to vi.resetAllMocks() to prevent mock bleed - Fix useTranslations mock to return stable function reference - Fix error test to reject with non-Error value for proper fallback - Remove never-resolving promise that caused stale effects ### Test File ESLint Fixes - Add eslint-disable comments for @typescript-eslint/no-explicit-any - Fix vi.mock hoisting issues using vi.hoisted() for mock variables - Apply to CreatePaymentForm.test.tsx, PaymentMetrics.test.tsx, SystemStatus.test.tsx ### ActivityFeed Component - Fix malformed JSX with duplicate/unclosed map statement - Remove unused SKELETON_ITEMS constant ## KYC Submission Form Implementation (Issue emdevelopa#664) ### State Management (src/lib/kyc-flow.ts) - Implement kycFlowReducer with reducer pattern for predictable state transitions - Define TypeScript types: KycStep, PersonalInfo, AddressInfo, DocumentInfo, KycFlowState - Create 8 action types: SET_STEP, UPDATE_PERSONAL, UPDATE_ADDRESS, UPDATE_DOCUMENTS, SUBMIT, SUBMIT_SUCCESS, SUBMIT_FAILURE, RESET - Implement initialKycFlowState with proper defaults - Add comprehensive state validation and error handling ### Reducer Tests (src/lib/kyc-flow.test.ts) - Add 11 unit tests covering all reducer actions - Test initial state verification - Test state preservation across updates - Test error clearing on field updates - Test complete submission flow - Achieve 100% reducer coverage ### Form Component (src/components/KycSubmissionForm.tsx) - Implement multi-step form with 4 steps: personal, address, documents, review - Add progress indicator showing current step - Implement smooth animations with Framer Motion - Add file upload support for ID documents (front, back, selfie) - Implement form validation with required fields - Add success state with confirmation screen - Add error handling with toast notifications - Integrate with next-intl for internationalization - Add form reset capability for multiple submissions - Implement API submission to /api/kyc/submit endpoint ### Component Tests (src/components/KycSubmissionForm.test.tsx) - Add 11 integration tests for form behavior - Test step navigation (forward and backward) - Test form field updates for all sections - Test file upload handling - Test submission success and error flows - Test form reset functionality - Test review step data display - Fix vi.mock hoisting with vi.hoisted() pattern ### Page Route (src/app/(authenticated)/kyc/page.tsx) - Create protected KYC verification page - Add metadata for SEO - Include informational content about KYC benefits - Implement responsive layout with max-width container - Add visual hierarchy with proper spacing ### Translations (messages/en.json) - Add complete English translations for kycForm namespace - Include labels for all form fields - Add success and error messages - Add navigation button labels - Add informational text ## Test Results - All 83 tests passing (22 new KYC tests + 61 existing) - No test regressions - TypeScript compilation successful - Full test coverage for new features ## Technical Details - Follows existing codebase patterns (similar to CreatePaymentForm) - Adheres to Drips Wave design and engineering standards - Implements proper separation of concerns (state logic vs UI) - Uses reducer pattern for complex state management - Full TypeScript type safety - Comprehensive error handling - Mobile-responsive design - Accessibility compliant Complexity: High (200 points) Issue: emdevelopa#664, emdevelopa#679, 673, 656
…educer pattern ## Test Infrastructure Fixes ### Button Component - Update CSS classes to match design system (bg-mint, hover:bg-glow) - Add responsive sizing (px-4 sm:px-6, h-11 sm:h-12, text-sm sm:text-base) - Add mobile UX classes (min-h-[44px], touch-manipulation, active:scale-[0.98]) - Update focus styles (focus-visible:ring-mint) - Fix spinner colors (text-black for primary, text-mint for secondary) - Remove duplicate Loading... span (Spinner already includes sr-only text) - Update glow effect (bg-mint/20) ### useLocalStorage Hook - Add removeItem function to prevent race condition with setState - Implement skipNextWrite flag to avoid writing empty values after removal - Fix localStorage cleanup in form reset flows ### CreatePaymentForm - Update all useLocalStorage destructuring to capture removeItem function - Refactor handleReset to use removeItem() instead of setState() + localStorage.removeItem() - Fix localStorage race condition where hook's useEffect would write empty values back ### PaymentMetrics Component - Fix second useEffect to not overwrite existing errors - Use setError((prev) => prev ?? newError) to preserve first error - Fix infinite re-render caused by unstable translation function reference ### PaymentMetrics Tests - Change vi.clearAllMocks() to vi.resetAllMocks() to prevent mock bleed - Fix useTranslations mock to return stable function reference - Fix error test to reject with non-Error value for proper fallback - Remove never-resolving promise that caused stale effects ### Test File ESLint Fixes - Add eslint-disable comments for @typescript-eslint/no-explicit-any - Fix vi.mock hoisting issues using vi.hoisted() for mock variables - Apply to CreatePaymentForm.test.tsx, PaymentMetrics.test.tsx, SystemStatus.test.tsx ### ActivityFeed Component - Fix malformed JSX with duplicate/unclosed map statement - Remove unused SKELETON_ITEMS constant ## KYC Submission Form Implementation (Issue emdevelopa#664) ### State Management (src/lib/kyc-flow.ts) - Implement kycFlowReducer with reducer pattern for predictable state transitions - Define TypeScript types: KycStep, PersonalInfo, AddressInfo, DocumentInfo, KycFlowState - Create 8 action types: SET_STEP, UPDATE_PERSONAL, UPDATE_ADDRESS, UPDATE_DOCUMENTS, SUBMIT, SUBMIT_SUCCESS, SUBMIT_FAILURE, RESET - Implement initialKycFlowState with proper defaults - Add comprehensive state validation and error handling ### Reducer Tests (src/lib/kyc-flow.test.ts) - Add 11 unit tests covering all reducer actions - Test initial state verification - Test state preservation across updates - Test error clearing on field updates - Test complete submission flow - Achieve 100% reducer coverage ### Form Component (src/components/KycSubmissionForm.tsx) - Implement multi-step form with 4 steps: personal, address, documents, review - Add progress indicator showing current step - Implement smooth animations with Framer Motion - Add file upload support for ID documents (front, back, selfie) - Implement form validation with required fields - Add success state with confirmation screen - Add error handling with toast notifications - Integrate with next-intl for internationalization - Add form reset capability for multiple submissions - Implement API submission to /api/kyc/submit endpoint ### Component Tests (src/components/KycSubmissionForm.test.tsx) - Add 11 integration tests for form behavior - Test step navigation (forward and backward) - Test form field updates for all sections - Test file upload handling - Test submission success and error flows - Test form reset functionality - Test review step data display - Fix vi.mock hoisting with vi.hoisted() pattern ### Page Route (src/app/(authenticated)/kyc/page.tsx) - Create protected KYC verification page - Add metadata for SEO - Include informational content about KYC benefits - Implement responsive layout with max-width container - Add visual hierarchy with proper spacing ### Translations (messages/en.json) - Add complete English translations for kycForm namespace - Include labels for all form fields - Add success and error messages - Add navigation button labels - Add informational text ## Test Results - All 83 tests passing (22 new KYC tests + 61 existing) - No test regressions - TypeScript compilation successful - Full test coverage for new features ## Technical Details - Follows existing codebase patterns (similar to CreatePaymentForm) - Adheres to Drips Wave design and engineering standards - Implements proper separation of concerns (state logic vs UI) - Uses reducer pattern for complex state management - Full TypeScript type safety - Comprehensive error handling - Mobile-responsive design - Accessibility compliant Complexity: High (200 points) Issue: emdevelopa#664, emdevelopa#679, 673, 656
…educer pattern ## Test Infrastructure Fixes ### Button Component - Update CSS classes to match design system (bg-mint, hover:bg-glow) - Add responsive sizing (px-4 sm:px-6, h-11 sm:h-12, text-sm sm:text-base) - Add mobile UX classes (min-h-[44px], touch-manipulation, active:scale-[0.98]) - Update focus styles (focus-visible:ring-mint) - Fix spinner colors (text-black for primary, text-mint for secondary) - Remove duplicate Loading... span (Spinner already includes sr-only text) - Update glow effect (bg-mint/20) ### useLocalStorage Hook - Add removeItem function to prevent race condition with setState - Implement skipNextWrite flag to avoid writing empty values after removal - Fix localStorage cleanup in form reset flows ### CreatePaymentForm - Update all useLocalStorage destructuring to capture removeItem function - Refactor handleReset to use removeItem() instead of setState() + localStorage.removeItem() - Fix localStorage race condition where hook's useEffect would write empty values back ### PaymentMetrics Component - Fix second useEffect to not overwrite existing errors - Use setError((prev) => prev ?? newError) to preserve first error - Fix infinite re-render caused by unstable translation function reference ### PaymentMetrics Tests - Change vi.clearAllMocks() to vi.resetAllMocks() to prevent mock bleed - Fix useTranslations mock to return stable function reference - Fix error test to reject with non-Error value for proper fallback - Remove never-resolving promise that caused stale effects ### Test File ESLint Fixes - Add eslint-disable comments for @typescript-eslint/no-explicit-any - Fix vi.mock hoisting issues using vi.hoisted() for mock variables - Apply to CreatePaymentForm.test.tsx, PaymentMetrics.test.tsx, SystemStatus.test.tsx ### ActivityFeed Component - Fix malformed JSX with duplicate/unclosed map statement - Remove unused SKELETON_ITEMS constant ## KYC Submission Form Implementation (Issue emdevelopa#664) ### State Management (src/lib/kyc-flow.ts) - Implement kycFlowReducer with reducer pattern for predictable state transitions - Define TypeScript types: KycStep, PersonalInfo, AddressInfo, DocumentInfo, KycFlowState - Create 8 action types: SET_STEP, UPDATE_PERSONAL, UPDATE_ADDRESS, UPDATE_DOCUMENTS, SUBMIT, SUBMIT_SUCCESS, SUBMIT_FAILURE, RESET - Implement initialKycFlowState with proper defaults - Add comprehensive state validation and error handling ### Reducer Tests (src/lib/kyc-flow.test.ts) - Add 11 unit tests covering all reducer actions - Test initial state verification - Test state preservation across updates - Test error clearing on field updates - Test complete submission flow - Achieve 100% reducer coverage ### Form Component (src/components/KycSubmissionForm.tsx) - Implement multi-step form with 4 steps: personal, address, documents, review - Add progress indicator showing current step - Implement smooth animations with Framer Motion - Add file upload support for ID documents (front, back, selfie) - Implement form validation with required fields - Add success state with confirmation screen - Add error handling with toast notifications - Integrate with next-intl for internationalization - Add form reset capability for multiple submissions - Implement API submission to /api/kyc/submit endpoint ### Component Tests (src/components/KycSubmissionForm.test.tsx) - Add 11 integration tests for form behavior - Test step navigation (forward and backward) - Test form field updates for all sections - Test file upload handling - Test submission success and error flows - Test form reset functionality - Test review step data display - Fix vi.mock hoisting with vi.hoisted() pattern ### Page Route (src/app/(authenticated)/kyc/page.tsx) - Create protected KYC verification page - Add metadata for SEO - Include informational content about KYC benefits - Implement responsive layout with max-width container - Add visual hierarchy with proper spacing ### Translations (messages/en.json) - Add complete English translations for kycForm namespace - Include labels for all form fields - Add success and error messages - Add navigation button labels - Add informational text ## Test Results - All 83 tests passing (22 new KYC tests + 61 existing) - No test regressions - TypeScript compilation successful - Full test coverage for new features ## Technical Details - Follows existing codebase patterns (similar to CreatePaymentForm) - Adheres to Drips Wave design and engineering standards - Implements proper separation of concerns (state logic vs UI) - Uses reducer pattern for complex state management - Full TypeScript type safety - Comprehensive error handling - Mobile-responsive design - Accessibility compliant Complexity: High (200 points) Issue: emdevelopa#664, emdevelopa#679, 673, 656
|
@Sammyowase is attempting to deploy a commit to the Emmanuel's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
@Sammyowase 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! 🚀 |
…educer pattern ## Test Infrastructure Fixes ### Button Component - Update CSS classes to match design system (bg-mint, hover:bg-glow) - Add responsive sizing (px-4 sm:px-6, h-11 sm:h-12, text-sm sm:text-base) - Add mobile UX classes (min-h-[44px], touch-manipulation, active:scale-[0.98]) - Update focus styles (focus-visible:ring-mint) - Fix spinner colors (text-black for primary, text-mint for secondary) - Remove duplicate Loading... span (Spinner already includes sr-only text) - Update glow effect (bg-mint/20) ### useLocalStorage Hook - Add removeItem function to prevent race condition with setState - Implement skipNextWrite flag to avoid writing empty values after removal - Fix localStorage cleanup in form reset flows ### CreatePaymentForm - Update all useLocalStorage destructuring to capture removeItem function - Refactor handleReset to use removeItem() instead of setState() + localStorage.removeItem() - Fix localStorage race condition where hook's useEffect would write empty values back ### PaymentMetrics Component - Fix second useEffect to not overwrite existing errors - Use setError((prev) => prev ?? newError) to preserve first error - Fix infinite re-render caused by unstable translation function reference ### PaymentMetrics Tests - Change vi.clearAllMocks() to vi.resetAllMocks() to prevent mock bleed - Fix useTranslations mock to return stable function reference - Fix error test to reject with non-Error value for proper fallback - Remove never-resolving promise that caused stale effects ### Test File ESLint Fixes - Add eslint-disable comments for @typescript-eslint/no-explicit-any - Fix vi.mock hoisting issues using vi.hoisted() for mock variables - Apply to CreatePaymentForm.test.tsx, PaymentMetrics.test.tsx, SystemStatus.test.tsx ### ActivityFeed Component - Fix malformed JSX with duplicate/unclosed map statement - Remove unused SKELETON_ITEMS constant ## KYC Submission Form Implementation (Issue emdevelopa#664) ### State Management (src/lib/kyc-flow.ts) - Implement kycFlowReducer with reducer pattern for predictable state transitions - Define TypeScript types: KycStep, PersonalInfo, AddressInfo, DocumentInfo, KycFlowState - Create 8 action types: SET_STEP, UPDATE_PERSONAL, UPDATE_ADDRESS, UPDATE_DOCUMENTS, SUBMIT, SUBMIT_SUCCESS, SUBMIT_FAILURE, RESET - Implement initialKycFlowState with proper defaults - Add comprehensive state validation and error handling ### Reducer Tests (src/lib/kyc-flow.test.ts) - Add 11 unit tests covering all reducer actions - Test initial state verification - Test state preservation across updates - Test error clearing on field updates - Test complete submission flow - Achieve 100% reducer coverage ### Form Component (src/components/KycSubmissionForm.tsx) - Implement multi-step form with 4 steps: personal, address, documents, review - Add progress indicator showing current step - Implement smooth animations with Framer Motion - Add file upload support for ID documents (front, back, selfie) - Implement form validation with required fields - Add success state with confirmation screen - Add error handling with toast notifications - Integrate with next-intl for internationalization - Add form reset capability for multiple submissions - Implement API submission to /api/kyc/submit endpoint ### Component Tests (src/components/KycSubmissionForm.test.tsx) - Add 11 integration tests for form behavior - Test step navigation (forward and backward) - Test form field updates for all sections - Test file upload handling - Test submission success and error flows - Test form reset functionality - Test review step data display - Fix vi.mock hoisting with vi.hoisted() pattern ### Page Route (src/app/(authenticated)/kyc/page.tsx) - Create protected KYC verification page - Add metadata for SEO - Include informational content about KYC benefits - Implement responsive layout with max-width container - Add visual hierarchy with proper spacing ### Translations (messages/en.json) - Add complete English translations for kycForm namespace - Include labels for all form fields - Add success and error messages - Add navigation button labels - Add informational text ## Test Results - All 83 tests passing (22 new KYC tests + 61 existing) - No test regressions - TypeScript compilation successful - Full test coverage for new features ## Technical Details - Follows existing codebase patterns (similar to CreatePaymentForm) - Adheres to Drips Wave design and engineering standards - Implements proper separation of concerns (state logic vs UI) - Uses reducer pattern for complex state management - Full TypeScript type safety - Comprehensive error handling - Mobile-responsive design - Accessibility compliant Complexity: High (200 points) Issue: emdevelopa#664, emdevelopa#679, 673, 656
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
closes #679
closes #673
closes #656
closes #664
frontend: Fix test failures and implement KYC Submission Form with reducer pattern
Test Infrastructure Fixes
Button Component
useLocalStorage Hook
CreatePaymentForm
PaymentMetrics Component
PaymentMetrics Tests
Test File ESLint Fixes
ActivityFeed Component
KYC Submission Form Implementation (Issue #664)
State Management (src/lib/kyc-flow.ts)
SUBMIT, SUBMIT_SUCCESS, SUBMIT_FAILURE, RESET
Reducer Tests (src/lib/kyc-flow.test.ts)
Form Component (src/components/KycSubmissionForm.tsx)
Component Tests (src/components/KycSubmissionForm.test.tsx)
Page Route (src/app/(authenticated)/kyc/page.tsx)
Translations (messages/en.json)
Test Results
Technical Details
Complexity: High (200 points)
Issue: #656, #664, #679, #673,