Ramadhan Sjamsani
1f6d8e09ae
Payment catalog (Phase 5.x — see requirement/phase5-payment-catalog-plan.md):
- New tables payment_method_groups + payment_methods with seed (3 groups,
10 methods; GoPay seeded inactive pending Xendit channel confirmation).
- payment-catalog.service.js with two-layer cache (60s in-process + 1h
Valkey) and config:invalidate pub/sub fanout. Mutator API + casing-
tolerant findActiveMethodByCode for downstream validation.
- App-facing GET /api/client/payment-methods returns pre-grouped JSON,
active-only, empty groups dropped server-side.
- POST /api/client/payment-requests now validates `method` against the
catalog (INVALID_PAYMENT_METHOD 422) and stamps
product_metadata.preferred_payment_code (upper-cased).
- Control-center /internal/payment-{groups,methods}{,/:id,/reorder}
endpoints (full CRUD + idempotent reorder). New Payment Catalog page
wired into the CC nav.
- Customer app renders the catalog as collapsible groups (first expanded)
via paymentCatalogProvider; QRIS-only hardcoded fallback on 5xx so
checkout never hard-fails. Replaces the hardcoded _PayMethod enum.
- 10 brand SVGs (~63KB) bundled in client_app/assets/payment_icons/ from
github.com/hafidznoor/idn-finlogos. Xendit's per-channel media-asset
pages were planned but found decommissioned during implementation —
switched to idn-finlogos with the standard "channels-we-accept"
trademark posture. See assets/payment_icons/README.md for the workflow
to add new methods.
- 16 vitest cases covering the service + cache; full backend suite green
(162/162).
Customer-app splash + register polish:
- Splash rewritten per figma S1: warm vertical gradient, two ImageFiltered
radial orbs, 96×96 rounded-square logo tile, "HaloBestie" + "kamu gak
harus ngerasain ini sendirian." Self-driving navigation via context.go
after a 2.5s post-frame timer (native Android splash burns ~1-1.5s
before Flutter paints — 1s timer yielded near-zero visible duration).
Router early-returns null for isSplash so it never moves us off /splash
on its own.
- 3-page onboarding carousel removed: user clarified the new splash
REPLACES that carousel. Dropped /onboarding route, OnboardingScreen,
onboardingDoneProvider + gating, dead splash_{1,2,3}.png + the
splash_chat_hebat.png Flutter asset. Phase 4 /onboarding/* subroutes
untouched; Android-native launch_background drawable left alone.
- Register screen (login-by-phone) polished: circular pink back button +
72×72 logo badge (same brandLogoBg pink as splash, Transform.scale 1.4
to fill the tile). Step-dots indicator removed.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
445 lines
15 KiB
Dart
445 lines
15 KiB
Dart
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_catalog_provider.dart';
|
|
import '../state/payment_draft_provider.dart';
|
|
import '../widgets/payment_icon.dart';
|
|
|
|
/// "Cara bayar" — catalog-driven payment method picker. Methods are grouped
|
|
/// into collapsible sections sourced from `paymentCatalogProvider`; the user
|
|
/// picks one, then taps `bayar` which:
|
|
/// 1. POSTs `/api/client/payment-requests` with the draft + chosen
|
|
/// `payment_code`.
|
|
/// 2. Pushes `/payment/waiting/:paymentId`.
|
|
///
|
|
/// First group is expanded by default; the rest are collapsed. Empty groups
|
|
/// are hidden by the backend before they reach this screen.
|
|
class PaymentMethodScreen extends ConsumerStatefulWidget {
|
|
const PaymentMethodScreen({super.key});
|
|
|
|
@override
|
|
ConsumerState<PaymentMethodScreen> createState() => _PaymentMethodScreenState();
|
|
}
|
|
|
|
class _PaymentMethodScreenState extends ConsumerState<PaymentMethodScreen> {
|
|
String? _selectedCode;
|
|
bool _submitting = false;
|
|
String? _error;
|
|
|
|
/// Track which groups are expanded. Keyed by group id; default-expanded for
|
|
/// the first group is applied lazily inside `build` when we first see the
|
|
/// catalog (we don't know the group ids until then).
|
|
final Set<String> _expandedGroupIds = {};
|
|
bool _initialExpansionDone = false;
|
|
|
|
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;
|
|
}
|
|
if (_selectedCode == null) {
|
|
setState(() => _error = 'Pilih metode pembayaran dulu.');
|
|
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': _selectedCode,
|
|
if (draft.targetedMitraId != null) 'targeted_mitra_id': draft.targetedMitraId,
|
|
};
|
|
final response = await api.post('/api/client/payment-requests/', 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 (code == 'INVALID_PAYMENT_METHOD') {
|
|
return 'Metode pembayaran tidak tersedia.';
|
|
}
|
|
if (status == 403) return 'Sesi tidak diizinkan.';
|
|
if (status == 404) return 'Sesi pembayaran tidak ditemukan.';
|
|
return 'Gagal membuat sesi pembayaran.';
|
|
}
|
|
|
|
void _applyInitialExpansion(PaymentCatalog catalog) {
|
|
if (_initialExpansionDone || catalog.groups.isEmpty) return;
|
|
_expandedGroupIds.add(catalog.groups.first.id);
|
|
_initialExpansionDone = true;
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final draft = ref.watch(paymentDraftNotifierProvider);
|
|
final catalogAsync = ref.watch(paymentCatalogProvider);
|
|
final amount = draft.priceIDR ?? 0;
|
|
final durationLabel = draft.durationMinutes != null
|
|
? 'sesi ${draft.durationMinutes} menit'
|
|
: 'sesi';
|
|
final amountLabel = formatRupiah(amount);
|
|
|
|
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: [
|
|
// Amount summary card (unchanged from the pre-catalog version).
|
|
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,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
// Catalog body — collapsible groups.
|
|
Expanded(
|
|
child: catalogAsync.when(
|
|
data: (catalog) {
|
|
_applyInitialExpansion(catalog);
|
|
return ListView(
|
|
padding: const EdgeInsets.fromLTRB(
|
|
HaloSpacing.s20,
|
|
HaloSpacing.s8,
|
|
HaloSpacing.s20,
|
|
HaloSpacing.s16,
|
|
),
|
|
children: catalog.groups.map((g) {
|
|
return _GroupSection(
|
|
group: g,
|
|
expanded: _expandedGroupIds.contains(g.id),
|
|
selectedCode: _selectedCode,
|
|
onToggle: () => setState(() {
|
|
if (!_expandedGroupIds.add(g.id)) {
|
|
_expandedGroupIds.remove(g.id);
|
|
}
|
|
}),
|
|
onSelect: (code) => setState(() {
|
|
_selectedCode = code;
|
|
_error = null;
|
|
}),
|
|
);
|
|
}).toList(),
|
|
);
|
|
},
|
|
loading: () => const Center(child: CircularProgressIndicator()),
|
|
error: (_, __) =>
|
|
const Center(child: Text('Gagal memuat metode pembayaran.')),
|
|
),
|
|
),
|
|
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 || _selectedCode == null) ? null : _onPay,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _GroupSection extends StatelessWidget {
|
|
final PaymentMethodGroup group;
|
|
final bool expanded;
|
|
final String? selectedCode;
|
|
final VoidCallback onToggle;
|
|
final ValueChanged<String> onSelect;
|
|
|
|
const _GroupSection({
|
|
required this.group,
|
|
required this.expanded,
|
|
required this.selectedCode,
|
|
required this.onToggle,
|
|
required this.onSelect,
|
|
});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Padding(
|
|
padding: const EdgeInsets.only(bottom: HaloSpacing.s12),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: [
|
|
InkWell(
|
|
onTap: onToggle,
|
|
borderRadius: HaloRadius.md,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(
|
|
vertical: HaloSpacing.s8,
|
|
horizontal: HaloSpacing.s4,
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: Text(
|
|
group.name.toLowerCase(),
|
|
style: const TextStyle(
|
|
fontSize: 12,
|
|
fontWeight: FontWeight.w700,
|
|
color: HaloTokens.brandDark,
|
|
letterSpacing: 0.4,
|
|
),
|
|
),
|
|
),
|
|
AnimatedRotation(
|
|
duration: HaloMotion.fast,
|
|
turns: expanded ? 0.5 : 0,
|
|
child: const Icon(
|
|
Icons.keyboard_arrow_down,
|
|
color: HaloTokens.brandDark,
|
|
size: 20,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
AnimatedCrossFade(
|
|
duration: HaloMotion.normal,
|
|
firstChild: const SizedBox(height: 0),
|
|
secondChild: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.stretch,
|
|
children: group.methods
|
|
.map((m) => _MethodTile(
|
|
method: m,
|
|
selected: selectedCode == m.paymentCode,
|
|
onTap: () => onSelect(m.paymentCode),
|
|
))
|
|
.toList(),
|
|
),
|
|
crossFadeState:
|
|
expanded ? CrossFadeState.showSecond : CrossFadeState.showFirst,
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _MethodTile extends StatelessWidget {
|
|
final PaymentMethodEntry method;
|
|
final bool selected;
|
|
final VoidCallback onTap;
|
|
|
|
const _MethodTile({
|
|
required this.method,
|
|
required this.selected,
|
|
required this.onTap,
|
|
});
|
|
|
|
@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: const EdgeInsets.all(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: 40,
|
|
height: 40,
|
|
decoration: BoxDecoration(
|
|
color: HaloTokens.surface,
|
|
borderRadius: HaloRadius.md,
|
|
border: Border.all(color: HaloTokens.border),
|
|
),
|
|
alignment: Alignment.center,
|
|
child: PaymentIcon(
|
|
slug: method.icon,
|
|
size: 22,
|
|
color: HaloTokens.brandDark,
|
|
),
|
|
),
|
|
const SizedBox(width: HaloSpacing.s12),
|
|
Expanded(
|
|
child: Text(
|
|
method.displayName,
|
|
style: const TextStyle(
|
|
fontSize: 14,
|
|
fontWeight: FontWeight.w600,
|
|
color: HaloTokens.ink,
|
|
),
|
|
),
|
|
),
|
|
Container(
|
|
width: 20,
|
|
height: 20,
|
|
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: 8,
|
|
height: 8,
|
|
decoration: const BoxDecoration(
|
|
shape: BoxShape.circle,
|
|
color: Colors.white,
|
|
),
|
|
),
|
|
)
|
|
: null,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|