rama/halobestie-clone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Phase 4 Stage 3: payment shell (multi-screen flow)

Browse Source 
Six new screens under /payment/* + a paymentDraftProvider holding
mode/durationId/durationMinutes/priceIDR/paymentId/isFirstSessionDiscount
across the flow. PaymentEntryScreen handles the routing decision
(eligible+enabled -> /payment/discount-paywall, else /payment/method-pick)
and clears the draft on fresh entry.

Screens:
- discount_paywall_screen: S6 first-session discount with struck-through
  gimmick price + actual price + 'mulai · Rp{actual}' CTA -> /payment/method
- method_pick_screen: chat vs call cards
- duration_pick_screen: tier list with chat|call mode toggle that resets
  the selection on swap
- payment_method_screen: QRIS-first list, posts to existing
  /api/client/payment-sessions with mode/duration/price/discount/method
- waiting_payment_screen: qr_flutter QR (encodes paymentId in mock mode),
  20-min countdown header, 3s polling for status, pauses on background
  via WidgetsBindingObserver
- payment_expired_screen: retry CTA -> /payment/method with draft retained

Status mapping: real payment_sessions.status uses 'confirmed'/'consumed'
for paid (not 'paid' as in plan) and 'expired'/'abandoned' as terminal.

home_screen 'Mulai Curhat' CTA now pushes /payment/entry.

Dev-only /internal/_test/force-expire-payment endpoint to drive Maestro
flow 04_payment_expired.yaml without waiting 20 minutes. Gated behind
NODE_ENV !== 'production'.

chat_opening_provider PricingData extended to carry Phase 4 chat/call
groups + firstSessionDiscount, back-compat with the Phase 3 shape.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
ramadhan sjamsani
2026-05-10 16:28:59 +08:00
parent 2645bcd0e5
commit 706149c75e
19 changed files with 2209 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

318
client_app/lib/features/payment/screens/waiting_payment_screen.dart Normal file
View File

@@ -0,0 +1,318 @@
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:qr_flutter/qr_flutter.dart';
import '../../../core/api/api_client_provider.dart';
import '../../../core/constants.dart';
import '../../../core/theme/halo_tokens.dart';
import '../state/payment_draft_provider.dart';
/// "Waiting payment" — placeholder QR + 20-minute countdown header. Polls the
/// backend every 3 seconds for status changes. On `confirmed` the payment is
/// considered paid; on `expired` we route to the expired screen.
///
/// Polling is paused while the app is backgrounded and resumed on foreground
/// (per the `WidgetsBindingObserver` pattern used elsewhere in the app).
class WaitingPaymentScreen extends ConsumerStatefulWidget {
final String paymentId;
const WaitingPaymentScreen({super.key, required this.paymentId});
@override
ConsumerState<WaitingPaymentScreen> createState() => _WaitingPaymentScreenState();
}
class _WaitingPaymentScreenState extends ConsumerState<WaitingPaymentScreen>
with WidgetsBindingObserver {
static const Duration _pollInterval = Duration(seconds: 3);
static const Duration _tickInterval = Duration(seconds: 1);
Timer? _ticker;
Timer? _poller;
DateTime? _expiresAt;
int _amount = 0;
String? _qrPayload;
bool _initialLoading = true;
bool _terminal = false;
String? _error;
Duration get _remaining {
final exp = _expiresAt;
if (exp == null) return Duration.zero;
final left = exp.difference(DateTime.now());
return left.isNegative ? Duration.zero : left;
}
@override
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
Future.microtask(_loadInitial);
}
@override
void dispose() {
_ticker?.cancel();
_poller?.cancel();
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
@override
void didChangeAppLifecycleState(AppLifecycleState state) {
if (state == AppLifecycleState.resumed) {
_resumePolling();
} else if (state == AppLifecycleState.paused || state == AppLifecycleState.inactive) {
_poller?.cancel();
_poller = null;
}
}
Future<void> _loadInitial() async {
final session = await _fetchSession();
if (!mounted || session == null) return;
final expiresAtRaw = session['expires_at'] as String?;
final expiresAt = expiresAtRaw != null ? DateTime.tryParse(expiresAtRaw) : null;
setState(() {
_amount = (session['amount'] as int?) ?? 0;
_expiresAt = expiresAt;
_qrPayload = (session['qr_string'] as String?) ?? widget.paymentId;
_initialLoading = false;
});
_maybeHandleStatus(session);
_startTicker();
_resumePolling();
}
void _startTicker() {
_ticker?.cancel();
_ticker = Timer.periodic(_tickInterval, (_) {
if (!mounted) return;
// Trigger a rebuild to refresh the countdown label. Status routing
// happens off the polled response, not the local clock — backend is
// the source of truth for `expired`.
setState(() {});
});
}
void _resumePolling() {
if (_terminal) return;
_poller?.cancel();
_poller = Timer.periodic(_pollInterval, (_) => _pollOnce());
}
Future<void> _pollOnce() async {
final session = await _fetchSession();
if (!mounted || session == null) return;
_maybeHandleStatus(session);
}
Future<Map<String, dynamic>?> _fetchSession() async {
try {
final api = ref.read(apiClientProvider);
final response = await api.get('/api/client/payment-sessions/${widget.paymentId}');
return response['data'] as Map<String, dynamic>?;
} catch (e) {
if (!mounted) return null;
setState(() => _error = 'Gagal memeriksa status pembayaran.');
return null;
}
}
void _maybeHandleStatus(Map<String, dynamic> session) {
final status = session['status'] as String?;
if (status == PaymentSessionStatus.confirmed ||
status == PaymentSessionStatus.consumed) {
_markTerminal();
// TODO(stage4): route to `/onboarding/notif-gate` once Stage 4 lands.
// For now, drop the user back home — Stage 5 will pick the pairing flow up.
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!mounted) return;
context.go('/');
});
} else if (status == PaymentSessionStatus.expired ||
status == PaymentSessionStatus.abandoned) {
_markTerminal();
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!mounted) return;
context.go('/payment/expired/${widget.paymentId}');
});
}
}
void _markTerminal() {
_terminal = true;
_ticker?.cancel();
_poller?.cancel();
}
String _countdownLabel() {
final r = _remaining;
final mm = r.inMinutes;
final ss = r.inSeconds % 60;
return '${mm.toString().padLeft(2, '0')}:${ss.toString().padLeft(2, '0')}';
}
@override
Widget build(BuildContext context) {
return PopScope(
canPop: true,
child: Scaffold(
backgroundColor: HaloTokens.bg,
appBar: AppBar(
backgroundColor: HaloTokens.bg,
elevation: 0,
leading: IconButton(
icon: const Icon(Icons.chevron_left, color: HaloTokens.brandDark),
onPressed: () {
if (context.canPop()) {
context.pop();
} else {
context.go('/home');
}
},
),
centerTitle: true,
title: Column(
mainAxisSize: MainAxisSize.min,
children: [
const Text(
'kedaluwarsa dalam',
style: TextStyle(fontSize: 11, color: HaloTokens.inkMuted),
),
Text(
_initialLoading ? '--:--' : _countdownLabel(),
style: const TextStyle(
fontFamily: HaloTokens.fontMono,
fontSize: 16,
fontWeight: FontWeight.w700,
color: HaloTokens.brandDark,
letterSpacing: -0.5,
),
),
],
),
),
body: _initialLoading
? const Center(child: CircularProgressIndicator())
: _buildContent(),
),
);
}
Widget _buildContent() {
final draft = ref.watch(paymentDraftNotifierProvider);
final amount = _amount > 0 ? _amount : (draft.priceIDR ?? 0);
return Column(
children: [
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(
HaloSpacing.s24,
HaloSpacing.s8,
HaloSpacing.s24,
HaloSpacing.s16,
),
child: Column(
children: [
Container(
padding: const EdgeInsets.all(HaloSpacing.s24),
decoration: BoxDecoration(
color: HaloTokens.surface,
borderRadius: HaloRadius.xl,
border: Border.all(color: HaloTokens.border),
),
child: Column(
children: [
const Text(
'scan QRIS untuk bayar',
style: TextStyle(fontSize: 12, color: HaloTokens.inkSoft),
),
const SizedBox(height: HaloSpacing.s12),
Container(
padding: const EdgeInsets.all(HaloSpacing.s12),
decoration: BoxDecoration(
color: HaloTokens.surface,
borderRadius: HaloRadius.lg,
border: Border.all(color: HaloTokens.border),
),
child: QrImageView(
data: _qrPayload ?? widget.paymentId,
size: 200,
version: QrVersions.auto,
backgroundColor: HaloTokens.surface,
eyeStyle: const QrEyeStyle(
eyeShape: QrEyeShape.square,
color: HaloTokens.ink,
),
dataModuleStyle: const QrDataModuleStyle(
dataModuleShape: QrDataModuleShape.square,
color: HaloTokens.ink,
),
),
),
const SizedBox(height: HaloSpacing.s12),
const Text(
'jumlah',
style: TextStyle(fontSize: 11.5, color: HaloTokens.inkSoft),
),
Text(
formatRupiah(amount),
style: const TextStyle(
fontFamily: HaloTokens.fontDisplay,
fontSize: 24,
fontWeight: FontWeight.w700,
color: HaloTokens.brandDark,
letterSpacing: -0.5,
),
),
],
),
),
const SizedBox(height: HaloSpacing.s12),
Container(
padding: const EdgeInsets.all(HaloSpacing.s12),
decoration: BoxDecoration(
color: HaloTokens.brandSofter,
borderRadius: HaloRadius.md,
border: Border.all(color: HaloTokens.brandSoft),
),
child: Row(
children: [
Container(
width: 8,
height: 8,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: HaloTokens.brand,
),
),
const SizedBox(width: HaloSpacing.s8),
const Expanded(
child: Text(
'menunggu pembayaran kamu...',
style: TextStyle(
fontSize: 12,
color: HaloTokens.brandDark,
),
),
),
],
),
),
if (_error != null) ...[
const SizedBox(height: HaloSpacing.s8),
Text(
_error!,
style: const TextStyle(fontSize: 12, color: HaloTokens.danger),
),
],
],
),
),
),
],
);
}
}