# 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) - [x] Create `src/components/CountdownRedirect.tsx` (AC: #6, #7, #8) - [x] Define component props interface: - [x] `seconds: number` - Initial countdown value (default: 5) - [x] `onComplete: () => void` - Callback when countdown reaches 0 - [x] `destination: string` - Display name of redirect destination - [x] Implement countdown timer with useEffect - [x] Initialize countdown state with `seconds` prop - [x] Use setTimeout to decrement every 1000ms - [x] Call `onComplete` when countdown reaches 0 - [x] Clean up timeout on component unmount - [x] Implement manual redirect button - [x] "Kembali Sekarang" button - [x] onClick calls `onComplete` immediately - [x] Cancel countdown timer - [x] Style with TailwindCSS - [x] Mobile-first responsive design - [x] Readable text (minimum 16px) - [x] Tappable button (minimum 44x44px) - [x] Center-aligned layout - [x] Add Bahasa Indonesia text - [x] "Anda akan diarahkan ke {destination} dalam {countdown} detik..." - [x] "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) - [x] Locate payment success page component (AC: #6, #7, #8, #9, #10) - [x] Find payment success/status page file - [x] Identify current layout and structure - [x] Integrate CountdownRedirect component (AC: #6, #7, #8) - [x] Import CountdownRedirect - [x] Add to success page layout - [x] Configure props: - [x] `seconds={5}` - 5-second countdown - [x] `onComplete={handleRedirect}` - Navigate to dashboard - [x] `destination="dashboard"` - Display name - [x] Implement `handleRedirect` function - [x] Use navigation to dashboard/home route - [x] Update page layout (AC: #9, #10) - [x] Ensure mobile-first responsive design - [x] Add success icon/checkmark - [x] Add success message in Bahasa Indonesia - [x] Position countdown timer prominently - [x] Ensure all text is readable on mobile - [x] Verify Bahasa Indonesia throughout (AC: #10) - [x] Success message: "Pembayaran Berhasil!" - [x] Countdown message from component - [x] Button label from component - [x] 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](../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](../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