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

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