Midtrans-Middleware/docs/sprint_artifacts/story-payment-ux-improvements-2.md

Story 1.2: Improve Post-Payment UX

Status: ready-for-dev

---

User Story

As a non-tech-savvy user (ibu-ibu), I want clear guidance on what to do after successful payment, So that I don't get confused and press the back button which causes errors.

---

Acceptance Criteria

AC #6: Countdown Timer Display

Given user completes payment successfully
When payment success page loads
Then countdown timer shows "Anda akan diarahkan ke dashboard dalam 5 detik..."
And countdown decrements every second (5, 4, 3, 2, 1)
And timer is visible and readable on mobile devices

AC #7: Auto-Redirect After Countdown

Given countdown timer reaches 0
When timer completes
Then user is automatically redirected to dashboard/home page
And redirect happens smoothly without errors

AC #8: Manual Redirect Button

Given countdown timer is active
When user clicks "Kembali Sekarang" button
Then user is immediately redirected to dashboard/home page
And countdown is cancelled

AC #9: Mobile-First Responsive Design

Given user accesses payment flow on mobile device
When countdown and button are displayed
Then all elements are properly sized and positioned for mobile
And all text is readable without zooming
And button is easily tappable (minimum 44x44px)

AC #10: Bahasa Indonesia Throughout

Given user views success page
When text is displayed
Then all text is in Bahasa Indonesia
And language is appropriate for non-tech-savvy users
And no technical jargon is used

---

Implementation Details

Tasks / Subtasks

Phase 1: Create Countdown Component (~45 minutes)

• Create src/components/CountdownRedirect.tsx (AC: #6, #7, #8)
  • Define component props interface:
    • seconds: number - Initial countdown value (default: 5)
    • onComplete: () => void - Callback when countdown reaches 0
    • destination: string - Display name of redirect destination
  • Implement countdown timer with useEffect
    • Initialize countdown state with seconds prop
    • Use setTimeout to decrement every 1000ms
    • Call onComplete when countdown reaches 0
    • Clean up timeout on component unmount
  • Implement manual redirect button
    • "Kembali Sekarang" button
    • onClick calls onComplete immediately
    • Cancel countdown timer
  • Style with TailwindCSS
    • Mobile-first responsive design
    • Readable text (minimum 16px)
    • Tappable button (minimum 44x44px)
    • Center-aligned layout
  • Add Bahasa Indonesia text
    • "Anda akan diarahkan ke {destination} dalam {countdown} detik..."
    • "Kembali Sekarang" button label
• Write component tests for CountdownRedirect
  • Test countdown decrements every second (use fake timers)
  • Test onComplete called when countdown reaches 0
  • Test manual redirect button calls onComplete immediately
  • Test cleanup on unmount (no memory leaks)

Phase 2: Modify Payment Success Page (~45 minutes)

• Locate payment success page component (AC: #6, #7, #8, #9, #10)
  • Find payment success/status page file
  • Identify current layout and structure
• Integrate CountdownRedirect component (AC: #6, #7, #8)
  • Import CountdownRedirect
  • Add to success page layout
  • Configure props:
    • seconds={5} - 5-second countdown
    • onComplete={handleRedirect} - Navigate to dashboard
    • destination="dashboard" - Display name
  • Implement handleRedirect function
    • Use navigation to dashboard/home route
• Update page layout (AC: #9, #10)
  • Ensure mobile-first responsive design
  • Add success icon/checkmark
  • Add success message in Bahasa Indonesia
  • Position countdown timer prominently
  • Ensure all text is readable on mobile
• Verify Bahasa Indonesia throughout (AC: #10)
  • Success message: "Pembayaran Berhasil!"
  • Countdown message from component
  • Button label from component
  • No technical jargon anywhere

Phase 3: Testing & Refinement (~30 minutes)

• Manual testing on desktop
  • Test countdown timer accuracy (5, 4, 3, 2, 1, redirect)
  • Test auto-redirect works correctly
  • Test manual "Kembali Sekarang" button works
  • Test countdown cancels when manual button clicked
  • Verify redirect destination is correct
• Manual testing on mobile devices
  • Test on Chrome Android
  • Test on Safari iOS
  • Verify countdown timer is readable
  • Verify button is easily tappable
  • Verify layout is responsive
  • Verify all text is in Bahasa Indonesia
• Fix any issues found
• Code review and cleanup

Technical Summary

Approach:

• Create reusable CountdownRedirect component with countdown timer logic
• Use useEffect with setTimeout for countdown implementation
• Use useNavigate from react-router-dom for programmatic navigation
• Follow existing TailwindCSS design patterns for mobile-first responsive design
• Ensure all text is in Bahasa Indonesia appropriate for non-tech-savvy users

Key Technical Decisions:

• Countdown Duration: 5 seconds chosen to give users time to read success message while not feeling too long
• Manual Override: "Kembali Sekarang" button for impatient users who don't want to wait
• Cleanup: Proper useEffect cleanup to prevent memory leaks and errors
• Destination: Configurable destination prop for flexibility (dashboard, home, or other)

Files/Modules Involved:

• New component: CountdownRedirect.tsx
• Modified component: Payment success page (exact path TBD based on codebase exploration)
• Test files for new component

Files Modified

• src/components/CountdownRedirect.tsx
• src/pages/PaymentStatusPage.tsx

Dev Agent Record

Completion Notes

• Komponen countdown dibuat dan diintegrasikan pada halaman status ketika pembayaran sukses (settlement/capture). Auto-redirect 5 detik dan tombol "Kembali Sekarang" tersedia, responsif mobile, seluruh teks Bahasa Indonesia.
• Navigasi menggunakan helper usePaymentNavigation ke halaman riwayat sebagai pengganti "dashboard/home" sesuai arsitektur saat ini.

Project Structure Notes

• Files to modify:

  • src/features/payment/pages/PaymentSuccessPage.tsx (or equivalent - to be confirmed)

• Files to create:

  • src/components/CountdownRedirect.tsx
  • src/components/__tests__/CountdownRedirect.test.tsx

• Expected test locations:

  • src/components/__tests__/ - Component tests
  • src/features/payment/__tests__/ - Integration tests (optional)

• Estimated effort: 2 story points (~1 day)

• Prerequisites: None - This story is independent of Story 1.1 and can be implemented in parallel

Key Code References

From Tech-Spec - Relevant Existing Code:

• Payment feature module: src/features/payment/ (assumed based on feature-based architecture)
• Payment success page: src/features/payment/pages/ or src/pages/ (to be located)
• React Router integration: Check existing navigation patterns in codebase
• Existing components: src/components/ (for styling reference)

Important Functions to Locate:

1. Payment success page component
2. Current success page layout and messaging
3. Existing navigation patterns (useNavigate usage)
4. Existing TailwindCSS responsive patterns

Code Patterns to Follow:

• Functional components with TypeScript interfaces for props
• TailwindCSS utility classes for styling
• Mobile-first responsive design (sm:, md:, lg: breakpoints)
• useNavigate for programmatic navigation
• Proper useEffect cleanup

---

Context References

Tech-Spec: tech-spec.md - Primary context document containing:

• Brownfield codebase analysis (React 19, TypeScript, Vite, TailwindCSS stack)
• Framework and library details with exact versions
• Existing patterns to follow (functional components, TailwindCSS, React Router)
• Integration points (React Router navigation)
• Complete implementation guidance with code examples
• Testing strategy and acceptance criteria
• Deployment and rollback plan

Problem-Solution Analysis: problem-solution-2025-11-25.md - Root cause analysis identifying post-payment confusion as a key issue

Architecture: Feature-based modular architecture with 16 feature modules

---

Dev Agent Record

Agent Model Used

Debug Log References

Completion Notes

Files Modified

Test Results

---

Review Notes