# Story 1.2: Improve Post-Payment UX **Status:** Draft --- ## 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 `useNavigate()` from react-router-dom - [ ] Navigate 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 ### 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