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

106
client_app/lib/core/chat/chat_opening_provider.dart
View File

@@ -8,27 +8,97 @@ class PriceTier {
final int durationMinutes;
final int price;
final String label;
final String? id;
final String? tag;
PriceTier({required this.durationMinutes, required this.price, required this.label});
const PriceTier({
required this.durationMinutes,
required this.price,
required this.label,
this.id,
this.tag,
});
/// Phase 4 shape: `{ id, minutes, price_idr, tag }` — used by the new
/// chat/call tier groups. Falls back to the legacy free-trial-pricing shape
/// (`{ duration_minutes, price, label }`) for back-compat with the Phase 3
/// `/api/client/chat/pricing` payload still consumed by the legacy payment
/// screen + bottom sheet.
factory PriceTier.fromJson(Map<String, dynamic> json) {
final minutes = (json['minutes'] ?? json['duration_minutes']) as int;
final price = (json['price_idr'] ?? json['price']) as int;
final label = (json['label'] as String?) ?? '$minutes Menit';
return PriceTier(
durationMinutes: json['duration_minutes'] as int,
price: json['price'] as int,
label: json['label'] as String,
durationMinutes: minutes,
price: price,
label: label,
id: (json['id'] as String?) ?? minutes.toString(),
tag: json['tag'] as String?,
);
}
}
/// First-session discount block. Mirrors backend
/// `pricing.first_session_discount`. Server-authoritative — the client only
/// reads this; the actual discount price is re-validated on the backend when
/// the payment session is created.
class FirstSessionDiscount {
final bool eligible;
final int actualPriceIDR;
final int gimmickPriceIDR;
final int durationMinutes;
final List<String> modes;
const FirstSessionDiscount({
required this.eligible,
required this.actualPriceIDR,
required this.gimmickPriceIDR,
required this.durationMinutes,
required this.modes,
});
factory FirstSessionDiscount.fromJson(Map<String, dynamic> json) {
final modesRaw = json['modes'];
final modes = modesRaw is List
? modesRaw.map((e) => e.toString()).toList()
: const <String>['chat'];
return FirstSessionDiscount(
eligible: json['eligible'] as bool? ?? false,
actualPriceIDR: json['actual_price_idr'] as int? ?? 0,
gimmickPriceIDR: json['gimmick_price_idr'] as int? ?? 0,
durationMinutes: json['duration_minutes'] as int? ?? 0,
modes: modes,
);
}
}
class PricingData {
/// Legacy single-list tiers. Populated from `data.tiers` when the response
/// uses the Phase 3 shape; populated from `data.chat.tiers` when the
/// Phase 4 shape is returned (so existing callers keep working).
final List<PriceTier> tiers;
final bool freeTrialEligible;
final int freeTrialDurationMinutes;
/// Phase 4 chat-mode tiers (`pricing.chat.tiers`). Empty when the backend
/// still returns the Phase 3 shape.
final List<PriceTier> chatTiers;
/// Phase 4 call-mode tiers (`pricing.call.tiers`). Empty when the backend
/// still returns the Phase 3 shape.
final List<PriceTier> callTiers;
/// Phase 4 first-session discount block. Null when the backend still
/// returns the Phase 3 shape.
final FirstSessionDiscount? firstSessionDiscount;
const PricingData({
required this.tiers,
required this.freeTrialEligible,
this.freeTrialDurationMinutes = 5,
this.chatTiers = const [],
this.callTiers = const [],
this.firstSessionDiscount,
});
}
@@ -37,9 +107,35 @@ Future<PricingData> chatPricing(Ref ref) async {
final apiClient = ref.read(apiClientProvider);
final response = await apiClient.get('/api/client/chat/pricing');
final data = response['data'] as Map<String, dynamic>;
// Phase 4 shape — `data.chat.tiers` + `data.call.tiers` + `first_session_discount`.
// Phase 3 shape — `data.tiers` + `data.free_trial`. Detect which we got and
// populate the model accordingly.
final hasPhase4Groups = data['chat'] is Map<String, dynamic>;
if (hasPhase4Groups) {
final chat = data['chat'] as Map<String, dynamic>;
final call = (data['call'] as Map<String, dynamic>?) ?? const {};
final chatTiers = (chat['tiers'] as List<dynamic>? ?? const [])
.map((t) => PriceTier.fromJson(t as Map<String, dynamic>))
.toList();
final callTiers = (call['tiers'] as List<dynamic>? ?? const [])
.map((t) => PriceTier.fromJson(t as Map<String, dynamic>))
.toList();
final discountJson = data['first_session_discount'] as Map<String, dynamic>?;
final discount = discountJson != null ? FirstSessionDiscount.fromJson(discountJson) : null;
return PricingData(
tiers: chatTiers,
freeTrialEligible: false,
chatTiers: chatTiers,
callTiers: callTiers,
firstSessionDiscount: discount,
);
}
final tiersJson = data['tiers'] as List<dynamic>;
final tiers = tiersJson.map((t) => PriceTier.fromJson(t as Map<String, dynamic>)).toList();
final freeTrial = data['free_trial'] as Map<String, dynamic>;
final freeTrial = (data['free_trial'] as Map<String, dynamic>?) ?? const {};
return PricingData(
tiers: tiers,

2
client_app/lib/core/chat/chat_opening_provider.g.dart
View File

@@ -6,7 +6,7 @@ part of 'chat_opening_provider.dart';
// RiverpodGenerator
// **************************************************************************
String _$chatPricingHash() => r'53ca829d46f7ba3b481e7a6b54482c62f9fe3ad0';
String _$chatPricingHash() => r'6dfbdf77942a67d3da689849eda89fc1fa3e6e39';
/// See also [chatPricing].
@ProviderFor(chatPricing)

16
client_app/lib/features/home/home_screen.dart
View File

@@ -4,7 +4,6 @@ import 'package:go_router/go_router.dart';
import '../../core/auth/auth_notifier.dart';
import '../../core/availability/mitra_availability_notifier.dart';
import '../../core/chat/active_session_notifier.dart';
import '../chat/widgets/topic_selection_bottom_sheet.dart';
/// Home screen.
///
@@ -53,10 +52,17 @@ class _HomeScreenState extends ConsumerState<HomeScreen> with WidgetsBindingObse
}
}
Future<void> _onStartChatPressed(BuildContext context) async {
final topic = await TopicSelectionBottomSheet.show(context);
if (topic == null || !context.mounted) return;
context.push('/payment', extra: {'topicSensitivity': topic});
void _onStartChatPressed(BuildContext context) {
// Phase 4 Stage 2 removes the home-screen topic sensitivity prompt; the
// ESP picks collected during onboarding feed the same column server-side
// (info-only — no longer drives matching). Mitras still flip
// `topic_sensitivity` mid-session via the AppBar toggle.
//
// Phase 4 Stage 3: enter the new multi-screen payment shell. The entry
// route picks discount-paywall vs. method-pick based on first-session
// eligibility. The legacy `/payment` route is preserved for the
// chat-history "Curhat lagi" path until Stage 5 migrates it.
context.push('/payment/entry');
}
@override

2
client_app/lib/features/payment/payment_notifier.g.dart
View File

@@ -6,7 +6,7 @@ part of 'payment_notifier.dart';
// RiverpodGenerator
// **************************************************************************
String _$paymentHash() => r'63019ba794311cd36761bd6ad6f90b0abde5c747';
String _$paymentHash() => r'd98f2e7e5045ea2a39b7af0d4a9f0601dd06ce74';
/// See also [Payment].
@ProviderFor(Payment)

325
client_app/lib/features/payment/screens/discount_paywall_screen.dart Normal file
View File

@@ -0,0 +1,325 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/chat/chat_opening_provider.dart';
import '../../../core/constants.dart';
import '../../../core/theme/halo_tokens.dart';
import '../../../core/theme/widgets/halo_button.dart';
import '../state/payment_draft_provider.dart';
/// S6 first-session discount paywall.
///
/// Renders only when `chat-pricing.first_session_discount.eligible == true`.
/// Layout: struck-through gimmick price next to a prominent actual price,
/// "untuk N menit ngobrol" subtitle, and a primary CTA that seeds the payment
/// draft and routes to `/payment/method`.
class DiscountPaywallScreen extends ConsumerWidget {
const DiscountPaywallScreen({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final pricingAsync = ref.watch(chatPricingProvider);
return 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');
}
},
),
),
body: pricingAsync.when(
loading: () => const Center(child: CircularProgressIndicator()),
error: (_, __) => const Center(
child: Padding(
padding: EdgeInsets.all(HaloSpacing.s24),
child: Text(
'Gagal memuat harga. Coba lagi.',
textAlign: TextAlign.center,
),
),
),
data: (pricing) {
final discount = pricing.firstSessionDiscount;
if (discount == null || !discount.eligible) {
// Defensive: route guard normally prevents this. If we got here
// anyway (stale state), kick over to method-pick.
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!context.mounted) return;
context.go('/payment/method-pick');
});
return const SizedBox.shrink();
}
return _Body(discount: discount);
},
),
);
}
}
class _Body extends ConsumerWidget {
final FirstSessionDiscount discount;
const _Body({required this.discount});
void _onMulai(BuildContext context, WidgetRef ref) {
ref.read(paymentDraftNotifierProvider.notifier).setDiscountPlan(
durationMinutes: discount.durationMinutes,
priceIDR: discount.actualPriceIDR,
);
context.push('/payment/method');
}
@override
Widget build(BuildContext context, WidgetRef ref) {
final showModeToggle = discount.modes.length > 1;
final actual = formatRupiah(discount.actualPriceIDR);
final gimmick = formatRupiah(discount.gimmickPriceIDR);
return Column(
children: [
Expanded(
child: SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(
HaloSpacing.s24,
HaloSpacing.s8,
HaloSpacing.s24,
HaloSpacing.s16,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
if (showModeToggle) const _ModeToggleHidden(),
const Text(
'🌷',
style: TextStyle(fontSize: 38),
),
const SizedBox(height: HaloSpacing.s12),
Text(
'biar yakin yang mau cerita,\nbestie cuma minta $actual',
style: const TextStyle(
fontFamily: HaloTokens.fontDisplay,
fontSize: 26,
fontWeight: FontWeight.w700,
color: HaloTokens.brandDark,
height: 1.2,
letterSpacing: -0.5,
),
),
const SizedBox(height: HaloSpacing.s16),
const Text(
'bukan biaya — anggap aja seperti senyum hangat di awal pertemuan, biar bestie tau kamu beneran mau ngobrol.',
style: TextStyle(
fontSize: 14,
color: HaloTokens.inkSoft,
height: 1.55,
),
),
const SizedBox(height: HaloSpacing.s20),
_PriceCard(
actual: actual,
gimmick: gimmick,
durationMinutes: discount.durationMinutes,
),
const SizedBox(height: HaloSpacing.s12),
const Center(
child: Text(
'sesi-sesi berikutnya pakai harga normal, sesuai durasi yang kamu pilih.',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 12,
color: HaloTokens.inkMuted,
height: 1.5,
),
),
),
],
),
),
),
Container(
padding: const EdgeInsets.fromLTRB(
HaloSpacing.s24,
HaloSpacing.s12,
HaloSpacing.s24,
HaloSpacing.s32,
),
decoration: const BoxDecoration(
color: HaloTokens.bg,
border: Border(top: BorderSide(color: HaloTokens.border)),
),
child: Column(
children: [
HaloButton(
label: 'mulai · $actual',
size: HaloButtonSize.lg,
fullWidth: true,
onPressed: () => _onMulai(context, ref),
),
const SizedBox(height: HaloSpacing.s8),
const Text(
'QRIS · GoPay · OVO · DANA · ShopeePay',
style: TextStyle(fontSize: 11, color: HaloTokens.inkMuted),
),
],
),
),
],
);
}
}
class _PriceCard extends StatelessWidget {
final String actual;
final String gimmick;
final int durationMinutes;
const _PriceCard({
required this.actual,
required this.gimmick,
required this.durationMinutes,
});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(HaloSpacing.s20),
decoration: BoxDecoration(
gradient: const LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [HaloTokens.brandSofter, HaloTokens.surface],
),
borderRadius: HaloRadius.xl,
border: Border.all(color: HaloTokens.brandSoft),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'SESI PERTAMA',
style: TextStyle(
fontSize: 11,
color: HaloTokens.inkSoft,
fontWeight: FontWeight.w500,
letterSpacing: 0.6,
),
),
const SizedBox(height: HaloSpacing.s4),
Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text(
actual,
style: const TextStyle(
fontFamily: HaloTokens.fontDisplay,
fontSize: 36,
fontWeight: FontWeight.w700,
color: HaloTokens.brandDark,
height: 1,
letterSpacing: -1,
),
),
const SizedBox(width: HaloSpacing.s8),
Padding(
padding: const EdgeInsets.only(bottom: 4),
child: Text(
gimmick,
style: const TextStyle(
fontSize: 14,
color: HaloTokens.inkMuted,
decoration: TextDecoration.lineThrough,
),
),
),
],
),
const SizedBox(height: HaloSpacing.s4),
Text(
'untuk $durationMinutes menit ngobrol',
style: const TextStyle(
fontSize: 13,
color: HaloTokens.inkSoft,
),
),
],
),
),
Container(
padding: const EdgeInsets.symmetric(
horizontal: HaloSpacing.s12,
vertical: 6,
),
decoration: const BoxDecoration(
color: HaloTokens.mint,
borderRadius: HaloRadius.pill,
),
child: const Text(
'HANYA SEKALI',
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w700,
color: Color(0xFF1F4D34),
letterSpacing: 0.6,
),
),
),
],
),
const Padding(
padding: EdgeInsets.symmetric(vertical: HaloSpacing.s16),
child: Divider(height: 1, color: HaloTokens.border),
),
..._features.map((row) => Padding(
padding: const EdgeInsets.only(bottom: HaloSpacing.s8),
child: Row(
children: [
Text(row.$1, style: const TextStyle(fontSize: 14)),
const SizedBox(width: HaloSpacing.s8),
Expanded(
child: Text(
row.$2,
style: const TextStyle(
fontSize: 13,
color: HaloTokens.ink,
),
),
),
],
),
)),
],
),
);
}
static const List<(String, String)> _features = [
('🤍', 'menit private sama bestie kamu'),
('👤', 'manusia nyata, bukan AI'),
('🛡️', 'gak cocok? sesi gratis tanpa tanya'),
];
}
/// Placeholder for the chat|call mode toggle on the discount screen. Default
/// config is chat-only (`modes = ['chat']`) so we never render anything yet —
/// kept as a marker so the spot is reserved when ops eventually flips
/// `first_session_discount_modes` to `['chat', 'call']`.
class _ModeToggleHidden extends StatelessWidget {
const _ModeToggleHidden();
@override
Widget build(BuildContext context) => const SizedBox.shrink();
}

346
client_app/lib/features/payment/screens/duration_pick_screen.dart Normal file
View File

@@ -0,0 +1,346 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/chat/chat_opening_provider.dart';
import '../../../core/constants.dart';
import '../../../core/theme/halo_tokens.dart';
import '../../../core/theme/widgets/halo_button.dart';
import '../state/payment_draft_provider.dart';
/// "Pemilihan harga" — tier list scoped to the currently-selected mode.
/// A chat|call mode toggle at the top rebuilds the list and resets the
/// selection. Bottom CTA carries the picked tier into `/payment/method`.
class DurationPickScreen extends ConsumerWidget {
const DurationPickScreen({super.key});
List<PriceTier> _tiersForMode(PricingData pricing, PaymentMode mode) {
return mode == PaymentMode.call ? pricing.callTiers : pricing.chatTiers;
}
@override
Widget build(BuildContext context, WidgetRef ref) {
final pricingAsync = ref.watch(chatPricingProvider);
final draft = ref.watch(paymentDraftNotifierProvider);
return 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('/payment/method-pick');
}
},
),
title: const Text(
'pilih durasi',
style: TextStyle(
fontFamily: HaloTokens.fontDisplay,
fontSize: 18,
fontWeight: FontWeight.w700,
color: HaloTokens.brandDark,
),
),
centerTitle: false,
),
body: pricingAsync.when(
loading: () => const Center(child: CircularProgressIndicator()),
error: (_, __) => const Center(
child: Padding(
padding: EdgeInsets.all(HaloSpacing.s24),
child: Text(
'Gagal memuat harga. Coba lagi.',
textAlign: TextAlign.center,
),
),
),
data: (pricing) => _Body(
pricing: pricing,
mode: draft.mode,
selectedDurationId: draft.durationId,
tiers: _tiersForMode(pricing, draft.mode),
),
),
);
}
}
class _Body extends ConsumerWidget {
final PricingData pricing;
final PaymentMode mode;
final String? selectedDurationId;
final List<PriceTier> tiers;
const _Body({
required this.pricing,
required this.mode,
required this.selectedDurationId,
required this.tiers,
});
void _onModeToggle(WidgetRef ref, PaymentMode next) {
if (next == mode) return;
ref.read(paymentDraftNotifierProvider.notifier).setMode(next);
}
void _onTierTap(WidgetRef ref, PriceTier tier) {
ref.read(paymentDraftNotifierProvider.notifier).setTier(
durationId: tier.id ?? tier.durationMinutes.toString(),
durationMinutes: tier.durationMinutes,
priceIDR: tier.price,
);
}
void _onPay(BuildContext context) {
context.push('/payment/method');
}
@override
Widget build(BuildContext context, WidgetRef ref) {
final selectedTier = tiers.firstWhere(
(t) => (t.id ?? t.durationMinutes.toString()) == selectedDurationId,
orElse: () => const PriceTier(durationMinutes: 0, price: 0, label: ''),
);
final hasSelection = selectedTier.durationMinutes > 0;
final ctaLabel = hasSelection
? '${mode == PaymentMode.call ? '📞' : '💬'} bayar ${formatRupiah(selectedTier.price)}'
: 'pilih durasi dulu';
return Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(
HaloSpacing.s24,
HaloSpacing.s8,
HaloSpacing.s24,
HaloSpacing.s8,
),
child: _ModeToggle(mode: mode, onChanged: (m) => _onModeToggle(ref, m)),
),
Expanded(
child: tiers.isEmpty
? const _EmptyState()
: ListView.separated(
padding: const EdgeInsets.fromLTRB(
HaloSpacing.s24,
HaloSpacing.s12,
HaloSpacing.s24,
HaloSpacing.s24,
),
itemCount: tiers.length,
separatorBuilder: (_, __) => const SizedBox(height: HaloSpacing.s8),
itemBuilder: (context, i) {
final tier = tiers[i];
final id = tier.id ?? tier.durationMinutes.toString();
final selected = id == selectedDurationId;
return _TierCard(
tier: tier,
selected: selected,
onTap: () => _onTierTap(ref, tier),
);
},
),
),
Container(
padding: const EdgeInsets.fromLTRB(
HaloSpacing.s24,
HaloSpacing.s12,
HaloSpacing.s24,
HaloSpacing.s32,
),
decoration: const BoxDecoration(
color: HaloTokens.bg,
border: Border(top: BorderSide(color: HaloTokens.border)),
),
child: HaloButton(
label: ctaLabel,
size: HaloButtonSize.lg,
fullWidth: true,
onPressed: hasSelection ? () => _onPay(context) : null,
),
),
],
);
}
}
class _ModeToggle extends StatelessWidget {
final PaymentMode mode;
final ValueChanged<PaymentMode> onChanged;
const _ModeToggle({required this.mode, required this.onChanged});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(4),
decoration: const BoxDecoration(
color: HaloTokens.brandSofter,
borderRadius: HaloRadius.pill,
),
child: Row(
children: [
Expanded(child: _Pill(label: 'chat', selected: mode == PaymentMode.chat, onTap: () => onChanged(PaymentMode.chat))),
Expanded(child: _Pill(label: 'call', selected: mode == PaymentMode.call, onTap: () => onChanged(PaymentMode.call))),
],
),
);
}
}
class _Pill extends StatelessWidget {
final String label;
final bool selected;
final VoidCallback onTap;
const _Pill({required this.label, required this.selected, required this.onTap});
@override
Widget build(BuildContext context) {
return Material(
color: selected ? HaloTokens.surface : Colors.transparent,
borderRadius: HaloRadius.pill,
child: InkWell(
borderRadius: HaloRadius.pill,
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(vertical: HaloSpacing.s8),
alignment: Alignment.center,
child: Text(
label,
style: TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 13.5,
fontWeight: FontWeight.w600,
color: selected ? HaloTokens.brandDark : HaloTokens.inkSoft,
),
),
),
),
);
}
}
class _TierCard extends StatelessWidget {
final PriceTier tier;
final bool selected;
final VoidCallback onTap;
const _TierCard({required this.tier, required this.selected, required this.onTap});
@override
Widget build(BuildContext context) {
return Material(
color: selected ? HaloTokens.brandSofter : HaloTokens.surface,
borderRadius: HaloRadius.lg,
child: InkWell(
borderRadius: HaloRadius.lg,
onTap: onTap,
child: AnimatedContainer(
duration: HaloMotion.fast,
padding: const EdgeInsets.all(HaloSpacing.s16),
decoration: BoxDecoration(
border: Border.all(
color: selected ? HaloTokens.brand : HaloTokens.border,
width: selected ? 2 : 1,
),
borderRadius: HaloRadius.lg,
),
child: Row(
children: [
Container(
width: 44,
height: 44,
decoration: const BoxDecoration(
color: HaloTokens.surface,
borderRadius: HaloRadius.md,
),
alignment: Alignment.center,
child: Text(
'${tier.durationMinutes}',
style: const TextStyle(
fontFamily: HaloTokens.fontDisplay,
fontSize: 16,
fontWeight: FontWeight.w700,
color: HaloTokens.brandDark,
),
),
),
const SizedBox(width: HaloSpacing.s12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
'${tier.durationMinutes} menit',
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w600,
color: HaloTokens.ink,
),
),
if (tier.tag != null) ...[
const SizedBox(width: HaloSpacing.s8),
Container(
padding: const EdgeInsets.symmetric(
horizontal: HaloSpacing.s8,
vertical: 2,
),
decoration: const BoxDecoration(
color: HaloTokens.mint,
borderRadius: HaloRadius.pill,
),
child: Text(
tier.tag!,
style: const TextStyle(
fontSize: 9,
fontWeight: FontWeight.w700,
color: Color(0xFF1F4D34),
letterSpacing: 0.4,
),
),
),
],
],
),
],
),
),
Text(
formatRupiah(tier.price),
style: const TextStyle(
fontFamily: HaloTokens.fontDisplay,
fontSize: 16,
fontWeight: FontWeight.w700,
color: HaloTokens.brandDark,
),
),
],
),
),
),
);
}
}
class _EmptyState extends StatelessWidget {
const _EmptyState();
@override
Widget build(BuildContext context) {
return const Center(
child: Padding(
padding: EdgeInsets.all(HaloSpacing.s24),
child: Text(
'Belum ada paket untuk mode ini.',
style: TextStyle(color: HaloTokens.inkSoft),
),
),
);
}
}

191
client_app/lib/features/payment/screens/method_pick_screen.dart Normal file
View File

@@ -0,0 +1,191 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/theme/halo_tokens.dart';
import '../state/payment_draft_provider.dart';
/// "Pilih cara curhat" — two cards (chat / call). The "premium" call indicator
/// is visual only, no hard-coded multiplier. Tapping a card stores the mode
/// in the draft and pushes `/payment/duration-pick`.
class MethodPickScreen extends ConsumerWidget {
const MethodPickScreen({super.key});
void _onPick(BuildContext context, WidgetRef ref, PaymentMode mode) {
ref.read(paymentDraftNotifierProvider.notifier).setMode(mode);
context.push('/payment/duration-pick');
}
@override
Widget build(BuildContext context, WidgetRef ref) {
return 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');
}
},
),
),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.fromLTRB(
HaloSpacing.s24,
HaloSpacing.s8,
HaloSpacing.s24,
HaloSpacing.s24,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'pilih cara curhat',
style: TextStyle(
fontFamily: HaloTokens.fontDisplay,
fontSize: 26,
fontWeight: FontWeight.w700,
color: HaloTokens.brandDark,
letterSpacing: -0.5,
),
),
const SizedBox(height: HaloSpacing.s8),
const Text(
'mau ngobrol pakai chat atau dengar suaranya langsung?',
style: TextStyle(
fontSize: 14,
color: HaloTokens.inkSoft,
height: 1.5,
),
),
const SizedBox(height: HaloSpacing.s24),
_ModeCard(
emoji: '💬',
title: 'chat',
subtitle: 'tulis dan baca dengan tenang',
onTap: () => _onPick(context, ref, PaymentMode.chat),
),
const SizedBox(height: HaloSpacing.s12),
_ModeCard(
emoji: '📞',
title: 'call',
subtitle: 'dengar suara bestie langsung',
isPremium: true,
onTap: () => _onPick(context, ref, PaymentMode.call),
),
],
),
),
),
);
}
}
class _ModeCard extends StatelessWidget {
final String emoji;
final String title;
final String subtitle;
final VoidCallback onTap;
final bool isPremium;
const _ModeCard({
required this.emoji,
required this.title,
required this.subtitle,
required this.onTap,
this.isPremium = false,
});
@override
Widget build(BuildContext context) {
return Material(
color: HaloTokens.surface,
borderRadius: HaloRadius.lg,
child: InkWell(
borderRadius: HaloRadius.lg,
onTap: onTap,
child: Container(
padding: const EdgeInsets.all(HaloSpacing.s20),
decoration: BoxDecoration(
border: Border.all(color: HaloTokens.border),
borderRadius: HaloRadius.lg,
),
child: Row(
children: [
Container(
width: 56,
height: 56,
decoration: const BoxDecoration(
color: HaloTokens.brandSofter,
borderRadius: HaloRadius.md,
),
alignment: Alignment.center,
child: Text(emoji, style: const TextStyle(fontSize: 28)),
),
const SizedBox(width: HaloSpacing.s16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
title,
style: const TextStyle(
fontFamily: HaloTokens.fontDisplay,
fontSize: 18,
fontWeight: FontWeight.w700,
color: HaloTokens.ink,
),
),
if (isPremium) ...[
const SizedBox(width: HaloSpacing.s8),
Container(
padding: const EdgeInsets.symmetric(
horizontal: HaloSpacing.s8,
vertical: 2,
),
decoration: const BoxDecoration(
color: HaloTokens.accentSoft,
borderRadius: HaloRadius.pill,
),
child: const Text(
'PREMIUM',
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.w700,
color: Color(0xFF8C5418),
letterSpacing: 0.6,
),
),
),
],
],
),
const SizedBox(height: 2),
Text(
subtitle,
style: const TextStyle(
fontSize: 12.5,
color: HaloTokens.inkSoft,
),
),
],
),
),
const Icon(
Icons.chevron_right,
color: HaloTokens.inkMuted,
),
],
),
),
),
);
}
}

67
client_app/lib/features/payment/screens/payment_entry_screen.dart Normal file
View File

@@ -0,0 +1,67 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/chat/chat_opening_provider.dart';
import '../../../core/theme/halo_tokens.dart';
import '../state/payment_draft_provider.dart';
/// Single point of truth for the discount-vs-method-pick branch.
///
/// Reads `chat-pricing.first_session_discount.eligible`. When the customer
/// is eligible (and the discount is enabled), routes to the S6 paywall;
/// otherwise routes to the regular method-pick screen. The draft is reset
/// here so a fresh entry into the flow always starts clean.
class PaymentEntryScreen extends ConsumerStatefulWidget {
const PaymentEntryScreen({super.key});
@override
ConsumerState<PaymentEntryScreen> createState() => _PaymentEntryScreenState();
}
class _PaymentEntryScreenState extends ConsumerState<PaymentEntryScreen> {
bool _routed = false;
@override
void initState() {
super.initState();
Future.microtask(() {
if (!mounted) return;
ref.read(paymentDraftNotifierProvider.notifier).reset();
});
}
void _routeOnce(String location) {
if (_routed || !mounted) return;
_routed = true;
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!mounted) return;
context.go(location);
});
}
@override
Widget build(BuildContext context) {
final pricingAsync = ref.watch(chatPricingProvider);
return Scaffold(
backgroundColor: HaloTokens.bg,
body: pricingAsync.when(
loading: () => const Center(child: CircularProgressIndicator()),
error: (_, __) {
// Pricing fetch failed — fall through to method-pick (which fetches
// pricing again and surfaces the error there).
_routeOnce('/payment/method-pick');
return const SizedBox.shrink();
},
data: (pricing) {
if (pricing.firstSessionDiscount?.eligible ?? false) {
_routeOnce('/payment/discount-paywall');
} else {
_routeOnce('/payment/method-pick');
}
return const SizedBox.shrink();
},
),
);
}
}

94
client_app/lib/features/payment/screens/payment_expired_screen.dart Normal file
View File

@@ -0,0 +1,94 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/theme/halo_tokens.dart';
import '../../../core/theme/widgets/halo_button.dart';
/// "Pembayaran expired" — terminal screen for the timeout path. The retry CTA
/// pushes back to `/payment/method`; the draft is intentionally retained so
/// the user re-pays the same plan/mode/discount without re-picking.
class PaymentExpiredScreen extends ConsumerWidget {
final String paymentId;
const PaymentExpiredScreen({super.key, required this.paymentId});
@override
Widget build(BuildContext context, WidgetRef ref) {
return PopScope(
canPop: true,
child: Scaffold(
backgroundColor: HaloTokens.bg,
body: SafeArea(
child: Padding(
padding: const EdgeInsets.fromLTRB(
HaloSpacing.s24,
HaloSpacing.s32,
HaloSpacing.s24,
HaloSpacing.s32,
),
child: Column(
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 90,
height: 90,
decoration: const BoxDecoration(
color: Color(0xFFFFE5E5),
borderRadius: HaloRadius.xl,
),
alignment: Alignment.center,
child: const Text('⏰', style: TextStyle(fontSize: 42)),
),
const SizedBox(height: HaloSpacing.s20),
const Text(
'pembayaran kedaluwarsa',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: HaloTokens.fontDisplay,
fontSize: 22,
fontWeight: FontWeight.w700,
color: HaloTokens.brandDark,
height: 1.25,
letterSpacing: -0.5,
),
),
const SizedBox(height: HaloSpacing.s12),
const SizedBox(
width: 280,
child: Text(
'sesi pembayaran udah lewat 20 menit. coba lagi yuk, gak ada potongan apapun.',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 13.5,
color: HaloTokens.inkSoft,
height: 1.55,
),
),
),
],
),
),
HaloButton(
label: 'coba lagi',
size: HaloButtonSize.lg,
fullWidth: true,
onPressed: () => context.go('/payment/method'),
),
const SizedBox(height: HaloSpacing.s8),
HaloButton(
label: 'kembali ke home',
variant: HaloButtonVariant.ghost,
size: HaloButtonSize.md,
fullWidth: true,
onPressed: () => context.go('/home'),
),
],
),
),
),
),
);
}
}

411
client_app/lib/features/payment/screens/payment_method_screen.dart Normal file
View File

@@ -0,0 +1,411 @@
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/api/api_client_provider.dart';
import '../../../core/constants.dart';
import '../../../core/theme/halo_tokens.dart';
import '../../../core/theme/widgets/halo_button.dart';
import '../state/payment_draft_provider.dart';
/// "Cara bayar" — QRIS-first list of payment methods. On tap of `bayar`:
/// 1. POST `/api/client/payment-sessions` with the draft + chosen method.
/// 2. Push `/payment/waiting/:paymentId`.
class PaymentMethodScreen extends ConsumerStatefulWidget {
const PaymentMethodScreen({super.key});
@override
ConsumerState<PaymentMethodScreen> createState() => _PaymentMethodScreenState();
}
enum _PayMethod {
qris('qris', 'QRIS', 'semua e-wallet & m-banking', '🔲', recommended: true),
ovo('ovo', 'OVO', 'saldo OVO', '🟣'),
gopay('gopay', 'GoPay', 'saldo GoPay', '🟢'),
dana('dana', 'DANA', 'saldo DANA', '🔵'),
shopee('shopee', 'ShopeePay', 'saldo ShopeePay', '🟠');
final String id;
final String label;
final String sub;
final String icon;
final bool recommended;
const _PayMethod(
this.id,
this.label,
this.sub,
this.icon, {
this.recommended = false,
});
}
class _PaymentMethodScreenState extends ConsumerState<PaymentMethodScreen> {
_PayMethod _selected = _PayMethod.qris;
bool _submitting = false;
String? _error;
Future<void> _onPay() async {
if (_submitting) return;
final draft = ref.read(paymentDraftNotifierProvider);
if (draft.durationMinutes == null || draft.priceIDR == null) {
setState(() => _error = 'Pilih durasi dulu sebelum bayar.');
return;
}
setState(() {
_submitting = true;
_error = null;
});
final api = ref.read(apiClientProvider);
try {
final body = <String, dynamic>{
'mode': draft.mode.value,
'duration_minutes': draft.durationMinutes,
'price_idr': draft.priceIDR,
'is_first_session_discount': draft.isFirstSessionDiscount,
'method': _selected.id,
};
// Trailing slash matches the existing payment_notifier path — Fastify
// is not configured with `ignoreTrailingSlash`.
final response = await api.post('/api/client/payment-sessions/', data: body);
final data = response['data'] as Map<String, dynamic>;
final paymentId = data['id'] as String;
ref.read(paymentDraftNotifierProvider.notifier).setPaymentId(paymentId);
if (!mounted) return;
context.push('/payment/waiting/$paymentId');
} on DioException catch (e) {
if (!mounted) return;
setState(() {
_submitting = false;
_error = _humanError(e);
});
} catch (_) {
if (!mounted) return;
setState(() {
_submitting = false;
_error = 'Gagal membuat sesi pembayaran.';
});
}
}
String _humanError(DioException e) {
final code = e.response?.data?['error']?['code'] as String?;
final status = e.response?.statusCode;
if (status == 422 || code == 'VALIDATION_ERROR' || code == 'INVALID_TIER') {
return 'Pilihan durasi tidak valid.';
}
if (status == 403) return 'Sesi tidak diizinkan.';
if (status == 404) return 'Sesi pembayaran tidak ditemukan.';
return 'Gagal membuat sesi pembayaran.';
}
@override
Widget build(BuildContext context) {
final draft = ref.watch(paymentDraftNotifierProvider);
final amount = draft.priceIDR ?? 0;
final durationLabel = draft.durationMinutes != null
? 'sesi ${draft.durationMinutes} menit'
: 'sesi';
final amountLabel = formatRupiah(amount);
final recommended = _PayMethod.values.where((m) => m.recommended).toList();
final others = _PayMethod.values.where((m) => !m.recommended).toList();
return 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('/payment/duration-pick');
}
},
),
title: const Text(
'cara bayar',
style: TextStyle(
fontFamily: HaloTokens.fontDisplay,
fontSize: 18,
fontWeight: FontWeight.w700,
color: HaloTokens.brandDark,
),
),
centerTitle: false,
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(
HaloSpacing.s24,
HaloSpacing.s4,
HaloSpacing.s24,
HaloSpacing.s12,
),
child: Container(
padding: const EdgeInsets.all(HaloSpacing.s12),
decoration: BoxDecoration(
color: HaloTokens.surface,
borderRadius: HaloRadius.lg,
border: Border.all(color: HaloTokens.border),
),
child: Row(
children: [
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'total bayar',
style: TextStyle(fontSize: 11.5, color: HaloTokens.inkSoft),
),
Text(
durationLabel,
style: const TextStyle(fontSize: 11, color: HaloTokens.inkMuted),
),
],
),
),
Text(
amountLabel,
style: const TextStyle(
fontFamily: HaloTokens.fontDisplay,
fontSize: 22,
fontWeight: FontWeight.w700,
color: HaloTokens.brandDark,
letterSpacing: -0.5,
),
),
],
),
),
),
Expanded(
child: ListView(
padding: const EdgeInsets.fromLTRB(
HaloSpacing.s20,
HaloSpacing.s8,
HaloSpacing.s20,
HaloSpacing.s16,
),
children: [
const _SectionLabel('paling cepat'),
...recommended.map((m) => _MethodTile(
method: m,
selected: _selected == m,
onTap: () => setState(() => _selected = m),
large: true,
)),
const SizedBox(height: HaloSpacing.s8),
const _SectionLabel('e-wallet lain'),
...others.map((m) => _MethodTile(
method: m,
selected: _selected == m,
onTap: () => setState(() => _selected = m),
)),
],
),
),
if (_error != null)
Container(
margin: const EdgeInsets.fromLTRB(
HaloSpacing.s24,
0,
HaloSpacing.s24,
HaloSpacing.s8,
),
padding: const EdgeInsets.all(HaloSpacing.s12),
decoration: BoxDecoration(
color: const Color(0xFFFFEBEB),
borderRadius: HaloRadius.md,
border: Border.all(color: HaloTokens.danger),
),
child: Row(
children: [
const Icon(Icons.error_outline, color: HaloTokens.danger, size: 18),
const SizedBox(width: HaloSpacing.s8),
Expanded(
child: Text(
_error!,
style: const TextStyle(color: HaloTokens.danger, fontSize: 13),
),
),
],
),
),
Container(
padding: const EdgeInsets.fromLTRB(
HaloSpacing.s24,
HaloSpacing.s12,
HaloSpacing.s24,
HaloSpacing.s32,
),
decoration: const BoxDecoration(
color: HaloTokens.bg,
border: Border(top: BorderSide(color: HaloTokens.border)),
),
child: HaloButton(
label: _submitting ? 'memproses...' : 'bayar $amountLabel',
size: HaloButtonSize.lg,
fullWidth: true,
onPressed: _submitting ? null : _onPay,
),
),
],
),
);
}
}
class _SectionLabel extends StatelessWidget {
final String label;
const _SectionLabel(this.label);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.fromLTRB(4, HaloSpacing.s8, 4, HaloSpacing.s8),
child: Text(
label,
style: const TextStyle(
fontSize: 11,
fontWeight: FontWeight.w600,
color: HaloTokens.inkSoft,
letterSpacing: 0.6,
),
),
);
}
}
class _MethodTile extends StatelessWidget {
final _PayMethod method;
final bool selected;
final VoidCallback onTap;
final bool large;
const _MethodTile({
required this.method,
required this.selected,
required this.onTap,
this.large = false,
});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: HaloSpacing.s8),
child: Material(
color: selected ? HaloTokens.brandSofter : HaloTokens.surface,
borderRadius: HaloRadius.lg,
child: InkWell(
borderRadius: HaloRadius.lg,
onTap: onTap,
child: AnimatedContainer(
duration: HaloMotion.fast,
padding: EdgeInsets.all(large ? HaloSpacing.s16 : HaloSpacing.s12),
decoration: BoxDecoration(
border: Border.all(
color: selected ? HaloTokens.brand : HaloTokens.border,
width: selected ? 2 : 1,
),
borderRadius: HaloRadius.lg,
),
child: Row(
children: [
Container(
width: large ? 40 : 36,
height: large ? 40 : 36,
decoration: BoxDecoration(
color: HaloTokens.surface,
borderRadius: HaloRadius.md,
border: Border.all(color: HaloTokens.border),
),
alignment: Alignment.center,
child: Text(method.icon, style: TextStyle(fontSize: large ? 20 : 18)),
),
const SizedBox(width: HaloSpacing.s12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
method.label,
style: TextStyle(
fontSize: large ? 14.5 : 13.5,
fontWeight: FontWeight.w600,
color: HaloTokens.ink,
),
),
if (method.recommended) ...[
const SizedBox(width: HaloSpacing.s8),
Container(
padding: const EdgeInsets.symmetric(
horizontal: HaloSpacing.s8,
vertical: 2,
),
decoration: const BoxDecoration(
color: HaloTokens.mint,
borderRadius: HaloRadius.pill,
),
child: const Text(
'DIREKOMENDASIKAN',
style: TextStyle(
fontSize: 9,
fontWeight: FontWeight.w700,
color: Color(0xFF1F4D34),
letterSpacing: 0.4,
),
),
),
],
],
),
const SizedBox(height: 2),
Text(
method.sub,
style: TextStyle(
fontSize: large ? 11.5 : 11,
color: HaloTokens.inkSoft,
),
),
],
),
),
Container(
width: large ? 20 : 18,
height: large ? 20 : 18,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: selected ? HaloTokens.brand : HaloTokens.border,
width: 2,
),
color: selected ? HaloTokens.brand : HaloTokens.surface,
),
child: selected
? Center(
child: Container(
width: large ? 8 : 6,
height: large ? 8 : 6,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
),
)
: null,
),
],
),
),
),
),
);
}
}

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),
),
],
],
),
),
),
],
);
}
}

111
client_app/lib/features/payment/state/payment_draft_provider.dart Normal file
View File

@@ -0,0 +1,111 @@
import 'package:riverpod_annotation/riverpod_annotation.dart';
part 'payment_draft_provider.g.dart';
/// Session mode the customer is paying for. Mirrors backend `SessionMode`
/// (chat | call). Phase 4 introduces `call` as a future option — pricing config
/// supplies the call tier list, but no functional voice feature is built yet.
enum PaymentMode {
chat('chat'),
call('call');
final String value;
const PaymentMode(this.value);
static PaymentMode fromString(String? v) =>
values.firstWhere((e) => e.value == v, orElse: () => PaymentMode.chat);
}
/// Draft state shared across the multi-screen payment flow:
/// discount-paywall / method-pick / duration-pick / method / waiting / expired.
///
/// The state is deliberately minimal — the *source of truth* for amount and
/// duration is always the backend (server-validated tier or first-session
/// discount). The draft only carries the customer's in-flight intent across
/// the screen graph.
class PaymentDraft {
final PaymentMode mode;
final String? durationId;
final int? durationMinutes;
final int? priceIDR;
final String? paymentId;
final bool isFirstSessionDiscount;
const PaymentDraft({
this.mode = PaymentMode.chat,
this.durationId,
this.durationMinutes,
this.priceIDR,
this.paymentId,
this.isFirstSessionDiscount = false,
});
PaymentDraft copyWith({
PaymentMode? mode,
String? durationId,
int? durationMinutes,
int? priceIDR,
String? paymentId,
bool? isFirstSessionDiscount,
}) {
return PaymentDraft(
mode: mode ?? this.mode,
durationId: durationId ?? this.durationId,
durationMinutes: durationMinutes ?? this.durationMinutes,
priceIDR: priceIDR ?? this.priceIDR,
paymentId: paymentId ?? this.paymentId,
isFirstSessionDiscount: isFirstSessionDiscount ?? this.isFirstSessionDiscount,
);
}
}
@Riverpod(keepAlive: true)
class PaymentDraftNotifier extends _$PaymentDraftNotifier {
@override
PaymentDraft build() => const PaymentDraft();
void setMode(PaymentMode mode) {
// Switching mode resets the previously-picked tier — chat and call
// tier lists are independent.
state = state.copyWith(
mode: mode,
durationId: null,
durationMinutes: null,
priceIDR: null,
);
}
void setTier({
required String durationId,
required int durationMinutes,
required int priceIDR,
}) {
state = state.copyWith(
durationId: durationId,
durationMinutes: durationMinutes,
priceIDR: priceIDR,
);
}
void setDiscountPlan({
required int durationMinutes,
required int priceIDR,
}) {
state = state.copyWith(
mode: PaymentMode.chat,
durationMinutes: durationMinutes,
priceIDR: priceIDR,
isFirstSessionDiscount: true,
);
}
void setPaymentId(String paymentId) {
state = state.copyWith(paymentId: paymentId);
}
/// Wipe the draft when entering the flow fresh (e.g. tapping "Mulai Curhat"
/// from home). Keeping it across back-nav inside the flow is the default.
void reset() {
state = const PaymentDraft();
}
}

27
client_app/lib/features/payment/state/payment_draft_provider.g.dart Normal file
View File

@@ -0,0 +1,27 @@
// GENERATED CODE - DO NOT MODIFY BY HAND
part of 'payment_draft_provider.dart';
// **************************************************************************
// RiverpodGenerator
// **************************************************************************
String _$paymentDraftNotifierHash() =>
r'1c81b22f25f525cd290f54618bee0b69de792998';
/// See also [PaymentDraftNotifier].
@ProviderFor(PaymentDraftNotifier)
final paymentDraftNotifierProvider =
NotifierProvider<PaymentDraftNotifier, PaymentDraft>.internal(
PaymentDraftNotifier.new,
name: r'paymentDraftNotifierProvider',
debugGetCreateSourceHash: const bool.fromEnvironment('dart.vm.product')
? null
: _$paymentDraftNotifierHash,
dependencies: null,
allTransitiveDependencies: null,
);
typedef _$PaymentDraftNotifier = Notifier<PaymentDraft>;
// ignore_for_file: type=lint
// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member, deprecated_member_use_from_same_package

30
client_app/lib/router.dart
View File

@@ -21,6 +21,13 @@ import 'features/chat/screens/chat_screen.dart';
import 'features/chat/screens/chat_history_screen.dart';
import 'features/chat/screens/chat_transcript_screen.dart';
import 'features/payment/screens/payment_screen.dart';
import 'features/payment/screens/payment_entry_screen.dart';
import 'features/payment/screens/discount_paywall_screen.dart';
import 'features/payment/screens/method_pick_screen.dart';
import 'features/payment/screens/duration_pick_screen.dart';
import 'features/payment/screens/payment_method_screen.dart';
import 'features/payment/screens/waiting_payment_screen.dart';
import 'features/payment/screens/payment_expired_screen.dart';
import 'core/theme/_preview.dart';
class RouterNotifier extends ChangeNotifier {
@@ -150,10 +157,13 @@ GoRouter buildRouter(Ref ref) {
),
GoRoute(path: '/home', builder: (_, __) => const HomeScreen()),
GoRoute(path: '/payment', builder: (context, state) {
// Payment screen reachable from
// Legacy Phase 3.7 single-screen payment. Still reachable from
// - Home "Mulai Curhat" CTA → no extras (general blast follows confirm)
// - Chat history "Curhat lagi" CTA → extras carry targetedMitraId/mitraName
// for the returning-chat flow, plus optional topicSensitivity.
// Phase 4 Stage 3 introduces sibling routes under `/payment/*`; the new
// entry point is `/payment/entry`. This route is preserved until Stage 5
// migrates the chat-history "Curhat lagi" flow.
final extra = state.extra;
if (extra is Map<String, dynamic>) {
final topic = extra['topicSensitivity'];
@@ -165,6 +175,24 @@ GoRouter buildRouter(Ref ref) {
}
return const PaymentScreen();
}),
// Phase 4 Stage 3 — multi-screen payment shell.
GoRoute(path: '/payment/entry', builder: (_, __) => const PaymentEntryScreen()),
GoRoute(path: '/payment/discount-paywall', builder: (_, __) => const DiscountPaywallScreen()),
GoRoute(path: '/payment/method-pick', builder: (_, __) => const MethodPickScreen()),
GoRoute(path: '/payment/duration-pick', builder: (_, __) => const DurationPickScreen()),
GoRoute(path: '/payment/method', builder: (_, __) => const PaymentMethodScreen()),
GoRoute(
path: '/payment/waiting/:paymentId',
builder: (context, state) => WaitingPaymentScreen(
paymentId: state.pathParameters['paymentId']!,
),
),
GoRoute(
path: '/payment/expired/:paymentId',
builder: (context, state) => PaymentExpiredScreen(
paymentId: state.pathParameters['paymentId']!,
),
),
GoRoute(path: '/chat/searching', builder: (_, __) => const SearchingScreen()),
GoRoute(path: '/chat/found', builder: (context, state) {
final extra = state.extra as Map<String, dynamic>;