# 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

<!-- Additional context XML paths will be added here if story-context workflow is run -->

---

## Dev Agent Record

### Agent Model Used

<!-- Will be populated during dev-story execution -->

### Debug Log References

<!-- Will be populated during dev-story execution -->

### Completion Notes

<!-- Will be populated during dev-story execution -->

### Files Modified

<!-- Will be populated during dev-story execution -->

### Test Results

<!-- Will be populated during dev-story execution -->

---

## Review Notes

<!-- Will be populated during code review -->
