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

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();
}