235 lines
8.4 KiB
Markdown
235 lines
8.4 KiB
Markdown
# 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
|
|
|
|
<!-- 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 -->
|