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

Phase 5.x payment catalog + customer-app splash/register polish

Browse Source 
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>
This commit is contained in:
Ramadhan Sjamsani
2026-05-26 23:06:46 +08:00
parent d60c048776
commit 1f6d8e09ae
39 changed files with 2634 additions and 370 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
client_app/lib/features/auth/screens/register_screen.dart
View File

@@ -11,7 +11,6 @@ import '../../../core/theme/widgets/widgets.dart';
/// S3a — WhatsApp input screen.
///
/// Visual contract is `Figma/screens/onboarding.jsx::S3Phone`:
/// - HaloStepDots at the top (step 3 of 4: S2 Nama → S5 ESP → S5b USP → S3a)
/// - Personalised display-title `"nomor wa-mu, {name}?"`
/// - +62 prefix as static chip; user types only the trailing digits
/// - Privacy reassurance card
@@ -137,9 +136,21 @@ class _RegisterScreenState extends ConsumerState<RegisterScreen> {
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Padding(
padding: EdgeInsets.only(top: 8, bottom: 8),
child: HaloStepDots(total: 4, current: 3),
Padding(
padding: const EdgeInsets.only(top: 4, bottom: 4),
child: Row(
children: [
_CircleBackButton(
onTap: () {
if (Navigator.of(context).canPop()) {
Navigator.of(context).pop();
} else {
context.go('/home');
}
},
),
],
),
),
Expanded(
child: LayoutBuilder(
@@ -152,6 +163,8 @@ class _RegisterScreenState extends ConsumerState<RegisterScreen> {
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Center(child: _LogoBadge()),
const SizedBox(height: 18),
Text(
'nomor wa-mu, $shownName?',
style: const TextStyle(
@@ -312,6 +325,58 @@ class _PhoneRow extends StatelessWidget {
}
}
class _CircleBackButton extends StatelessWidget {
final VoidCallback onTap;
const _CircleBackButton({required this.onTap});
@override
Widget build(BuildContext context) {
return Material(
color: HaloTokens.brand,
shape: const CircleBorder(),
elevation: 2,
shadowColor: const Color(0x1F000000),
child: InkWell(
customBorder: const CircleBorder(),
onTap: onTap,
child: const SizedBox(
width: 40,
height: 40,
child: Icon(Icons.arrow_back, color: Colors.white, size: 20),
),
),
);
}
}
class _LogoBadge extends StatelessWidget {
const _LogoBadge();
@override
Widget build(BuildContext context) {
return Container(
width: 72,
height: 72,
decoration: BoxDecoration(
color: HaloTokens.brandLogoBg,
borderRadius: BorderRadius.circular(20),
boxShadow: const [
BoxShadow(
color: Color(0x47FF69A0),
blurRadius: 18,
offset: Offset(0, 6),
),
],
),
clipBehavior: Clip.antiAlias,
child: Transform.scale(
scale: 1.4,
child: Image.asset('assets/icons/logo.png', fit: BoxFit.cover),
),
);
}
}
class _PrivacyCard extends StatelessWidget {
const _PrivacyCard();

210
client_app/lib/features/onboarding/onboarding_screen.dart
View File

@@ -1,210 +0,0 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '../../router.dart';
const _kOnboardingDone = 'onboarding_done';
const _kPink = Color(0xFFBE7C8A);
class _OnboardingPage {
final String title;
final String text;
final String image;
const _OnboardingPage({
required this.title,
required this.text,
required this.image,
});
}
const _pages = [
_OnboardingPage(
title: 'Langsung Curhat',
text: 'Tidak perlu form panjang atau janji. Masuk dan langsung ngobrol.',
image: 'assets/images/splash/splash_1.png',
),
_OnboardingPage(
title: '100% Anonim',
text: 'Identitas kamu tidak akan ditampilkan. Cerita dengan tenang, tanpa khawatir.',
image: 'assets/images/splash/splash_2.png',
),
_OnboardingPage(
title: 'Bestie yang Relevan',
text: 'Kamu akan dipasangkan dengan bestie berdasarkan topik & kondisi kamu saat ini.',
image: 'assets/images/splash/splash_3.png',
),
];
class OnboardingScreen extends ConsumerStatefulWidget {
const OnboardingScreen({super.key});
@override
ConsumerState<OnboardingScreen> createState() => _OnboardingScreenState();
}
class _OnboardingScreenState extends ConsumerState<OnboardingScreen> {
final _controller = PageController();
int _currentPage = 0;
@override
void initState() {
super.initState();
// Auto-advance: page 0 → 1 after 500ms
_scheduleAutoAdvance(0);
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
void _scheduleAutoAdvance(int fromPage) {
// Only auto-advance for pages 0 and 1
if (fromPage >= 2) return;
Future.delayed(const Duration(seconds: 1), () {
if (mounted && _currentPage == fromPage) {
_controller.nextPage(
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
);
}
});
}
void _onPageChanged(int index) {
setState(() => _currentPage = index);
_scheduleAutoAdvance(index);
}
Future<void> _finish() async {
final prefs = await SharedPreferences.getInstance();
await prefs.setBool(_kOnboardingDone, true);
ref.invalidate(onboardingDoneProvider);
if (mounted) {
context.go('/home');
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
child: Column(
children: [
Expanded(
child: PageView.builder(
controller: _controller,
itemCount: _pages.length,
onPageChanged: _onPageChanged,
physics: const NeverScrollableScrollPhysics(),
itemBuilder: (context, index) {
final page = _pages[index];
return _buildPage(page);
},
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 32),
child: Row(
children: [
// Page indicators
Row(
children: List.generate(_pages.length, (index) {
final isActive = index == _currentPage;
return Container(
margin: const EdgeInsets.only(right: 8),
width: isActive ? 32 : 12,
height: 6,
decoration: BoxDecoration(
color: isActive ? _kPink : _kPink.withValues(alpha: 0.3),
borderRadius: BorderRadius.circular(3),
),
);
}),
),
const Spacer(),
// CTA button — only show "Mulai" on last page
if (_currentPage == _pages.length - 1)
GestureDetector(
onTap: _finish,
child: Container(
height: 56,
padding: const EdgeInsets.symmetric(horizontal: 32),
decoration: BoxDecoration(
color: _kPink,
borderRadius: BorderRadius.circular(16),
),
child: const Center(
child: Text(
'Mulai',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
),
),
),
],
),
),
],
),
),
);
}
Widget _buildPage(_OnboardingPage page) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 24),
child: Column(
children: [
const Spacer(flex: 1),
// Image
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Image.asset(
page.image,
height: 280,
fit: BoxFit.contain,
),
),
const Spacer(flex: 1),
// Title
Text(
page.title,
style: const TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: _kPink,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 16),
// Description
Text(
page.text,
style: TextStyle(
fontSize: 16,
color: Colors.pink.shade300,
height: 1.5,
),
textAlign: TextAlign.center,
),
const Spacer(flex: 1),
],
),
);
}
}
/// Check if onboarding has been completed
Future<bool> isOnboardingDone() async {
final prefs = await SharedPreferences.getInstance();
return prefs.getBool(_kOnboardingDone) ?? false;
}

286
client_app/lib/features/payment/screens/payment_method_screen.dart
View File

@@ -6,11 +6,19 @@ 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" — QRIS-first list of payment methods. On tap of `bayar`:
/// 1. POST `/api/client/payment-requests` with the draft + chosen method.
/// 2. Push `/payment/waiting/:paymentId`.
/// "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});
@@ -18,33 +26,17 @@ class PaymentMethodScreen extends ConsumerStatefulWidget {
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;
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);
@@ -52,6 +44,10 @@ class _PaymentMethodScreenState extends ConsumerState<PaymentMethodScreen> {
setState(() => _error = 'Pilih durasi dulu sebelum bayar.');
return;
}
if (_selectedCode == null) {
setState(() => _error = 'Pilih metode pembayaran dulu.');
return;
}
setState(() {
_submitting = true;
_error = null;
@@ -63,15 +59,9 @@ class _PaymentMethodScreenState extends ConsumerState<PaymentMethodScreen> {
'duration_minutes': draft.durationMinutes,
'price_idr': draft.priceIDR,
'is_first_session_discount': draft.isFirstSessionDiscount,
'method': _selected.id,
// Returning-targeted "Curhat lagi" flow: backend ties the payment
// session to the picked mitra so the eventual chat request can fire
// against the same bestie. Absent on the general-blast path.
if (draft.targetedMitraId != null)
'targeted_mitra_id': draft.targetedMitraId,
'method': _selectedCode,
if (draft.targetedMitraId != null) 'targeted_mitra_id': draft.targetedMitraId,
};
// Trailing slash matches the existing payment_notifier path — Fastify
// is not configured with `ignoreTrailingSlash`.
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;
@@ -99,21 +89,29 @@ class _PaymentMethodScreenState extends ConsumerState<PaymentMethodScreen> {
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);
final recommended = _PayMethod.values.where((m) => m.recommended).toList();
final others = _PayMethod.values.where((m) => !m.recommended).toList();
return Scaffold(
backgroundColor: HaloTokens.bg,
@@ -143,6 +141,7 @@ class _PaymentMethodScreenState extends ConsumerState<PaymentMethodScreen> {
),
body: Column(
children: [
// Amount summary card (unchanged from the pre-catalog version).
Padding(
padding: const EdgeInsets.fromLTRB(
HaloSpacing.s24,
@@ -188,30 +187,39 @@ class _PaymentMethodScreenState extends ConsumerState<PaymentMethodScreen> {
),
),
),
// Catalog body — collapsible groups.
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),
)),
],
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)
@@ -256,7 +264,7 @@ class _PaymentMethodScreenState extends ConsumerState<PaymentMethodScreen> {
label: _submitting ? 'memproses...' : 'bayar $amountLabel',
size: HaloButtonSize.lg,
fullWidth: true,
onPressed: _submitting ? null : _onPay,
onPressed: (_submitting || _selectedCode == null) ? null : _onPay,
),
),
],
@@ -265,38 +273,93 @@ class _PaymentMethodScreenState extends ConsumerState<PaymentMethodScreen> {
}
}
class _SectionLabel extends StatelessWidget {
final String label;
const _SectionLabel(this.label);
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.fromLTRB(4, HaloSpacing.s8, 4, HaloSpacing.s8),
child: Text(
label,
style: const TextStyle(
fontSize: 11,
fontWeight: FontWeight.w600,
color: HaloTokens.inkSoft,
letterSpacing: 0.6,
),
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 _PayMethod method;
final PaymentMethodEntry 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
@@ -311,7 +374,7 @@ class _MethodTile extends StatelessWidget {
onTap: onTap,
child: AnimatedContainer(
duration: HaloMotion.fast,
padding: EdgeInsets.all(large ? HaloSpacing.s16 : HaloSpacing.s12),
padding: const EdgeInsets.all(HaloSpacing.s12),
decoration: BoxDecoration(
border: Border.all(
color: selected ? HaloTokens.brand : HaloTokens.border,
@@ -322,69 +385,34 @@ class _MethodTile extends StatelessWidget {
child: Row(
children: [
Container(
width: large ? 40 : 36,
height: large ? 40 : 36,
width: 40,
height: 40,
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)),
child: PaymentIcon(
slug: method.icon,
size: 22,
color: HaloTokens.brandDark,
),
),
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,
),
),
],
child: Text(
method.displayName,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: HaloTokens.ink,
),
),
),
Container(
width: large ? 20 : 18,
height: large ? 20 : 18,
width: 20,
height: 20,
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
@@ -396,8 +424,8 @@ class _MethodTile extends StatelessWidget {
child: selected
? Center(
child: Container(
width: large ? 8 : 6,
height: large ? 8 : 6,
width: 8,
height: 8,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,

99
client_app/lib/features/payment/state/payment_catalog_provider.dart Normal file
View File

@@ -0,0 +1,99 @@
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/api/api_client_provider.dart';
/// One row in the payment-method catalog (server-side: `payment_methods`).
class PaymentMethodEntry {
final String id;
final String paymentCode;
final String displayName;
final String? icon;
const PaymentMethodEntry({
required this.id,
required this.paymentCode,
required this.displayName,
this.icon,
});
}
/// One group in the payment-method catalog (server-side:
/// `payment_method_groups`). Groups are already filtered + ordered by the
/// backend — render verbatim.
class PaymentMethodGroup {
final String id;
final String name;
final List<PaymentMethodEntry> methods;
const PaymentMethodGroup({
required this.id,
required this.name,
required this.methods,
});
}
class PaymentCatalog {
final List<PaymentMethodGroup> groups;
const PaymentCatalog(this.groups);
/// Whether this came from the hardcoded fallback (catalog endpoint failed).
/// UI uses this to optionally surface a "couldn't load all methods" hint.
final bool isFallback = false;
}
class _FallbackCatalog extends PaymentCatalog {
const _FallbackCatalog() : super(const [_kFallbackGroup]);
@override
bool get isFallback => true;
}
const _kFallbackGroup = PaymentMethodGroup(
id: 'fallback-paling-cepat',
name: 'Paling Cepat',
methods: [
PaymentMethodEntry(
id: 'fallback-qris',
paymentCode: 'QRIS',
displayName: 'QRIS',
icon: 'qris',
),
],
);
const PaymentCatalog kFallbackPaymentCatalog = _FallbackCatalog();
/// App-facing catalog. Calls `GET /api/client/payment-methods`; on 5xx or
/// network error returns [kFallbackPaymentCatalog] so checkout never
/// hard-fails. See `requirement/phase5-payment-catalog-plan.md` §5.
final paymentCatalogProvider = FutureProvider<PaymentCatalog>((ref) async {
final api = ref.read(apiClientProvider);
try {
final res = await api.get('/api/client/payment-methods');
final data = res['data'] as Map<String, dynamic>?;
final raw = data?['groups'] as List<dynamic>? ?? const [];
final groups = raw.map((g) {
final gm = g as Map<String, dynamic>;
final methods = (gm['methods'] as List<dynamic>? ?? const []).map((m) {
final mm = m as Map<String, dynamic>;
return PaymentMethodEntry(
id: mm['id'] as String,
paymentCode: mm['payment_code'] as String,
displayName: mm['display_name'] as String,
icon: mm['icon'] as String?,
);
}).toList(growable: false);
return PaymentMethodGroup(
id: gm['id'] as String,
name: gm['name'] as String,
methods: methods,
);
}).toList(growable: false);
// Defensive empty-catalog guard: if every group ended up empty after
// parsing, fall back so the user always sees at least QRIS.
if (groups.isEmpty || groups.every((g) => g.methods.isEmpty)) {
return kFallbackPaymentCatalog;
}
return PaymentCatalog(groups);
} catch (_) {
return kFallbackPaymentCatalog;
}
});

56
client_app/lib/features/payment/widgets/payment_icon.dart Normal file
View File

@@ -0,0 +1,56 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../../../core/theme/halo_tokens.dart';
/// Slugs we ship SVGs for. Keep this in sync with `assets/payment_icons/`.
/// When a brand mark is added to the bundle (drop the SVG into the asset
/// dir), add its slug here. Anything not in this set renders the placeholder.
///
/// Source: idn-finlogos (github.com/hafidznoor/idn-finlogos) — see
/// `assets/payment_icons/NOTICE_IDN_FINLOGOS.txt` for licensing terms.
const Set<String> _kBundledSlugs = {
'qris',
'ovo',
'dana',
'shopeepay',
'gopay',
'bca',
'mandiri',
'bni',
'bri',
'permata',
};
/// Renders a payment-method brand mark by slug (`payment_methods.icon`).
/// Falls back to a generic credit-card placeholder when the slug isn't
/// bundled. Slugs are kept lower-case by convention.
class PaymentIcon extends StatelessWidget {
final String? slug;
final double size;
final Color color;
const PaymentIcon({
super.key,
required this.slug,
this.size = 24,
this.color = HaloTokens.brandDark,
});
@override
Widget build(BuildContext context) {
final isBundled = slug != null && _kBundledSlugs.contains(slug);
final asset = isBundled
? 'assets/payment_icons/$slug.svg'
: 'assets/payment_icons/placeholder.svg';
// Brand SVGs ship with their canonical colors and must NOT be tinted;
// the placeholder is mono-color and DOES want the brand-dark tint.
return SvgPicture.asset(
asset,
width: size,
height: size,
colorFilter: isBundled ? null : ColorFilter.mode(color, BlendMode.srcIn),
);
}
}

198
client_app/lib/features/splash/splash_screen.dart
View File

@@ -1,16 +1,200 @@
import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:ui';
class SplashScreen extends StatelessWidget {
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../core/auth/auth_notifier.dart';
import '../../core/auth/onboarding_intent_provider.dart';
import '../../core/theme/halo_tokens.dart';
/// S1 · Splash — figma-bestie/project/screens/onboarding.jsx
///
/// Self-driving: waits for both a 1s minimum hold AND the auth provider to
/// resolve, then navigates to the appropriate destination. The router's
/// redirect leaves /splash alone — see [router.dart].
class SplashScreen extends ConsumerStatefulWidget {
const SplashScreen({super.key});
@override
ConsumerState<SplashScreen> createState() => _SplashScreenState();
}
class _SplashScreenState extends ConsumerState<SplashScreen> {
bool _holdElapsed = false;
bool _navigated = false;
@override
void initState() {
super.initState();
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!mounted) return;
// 2.5s here because the native Android launch splash covers Flutter for
// ~1-1.5s on cold start. By the time the user actually sees this widget,
// ~1s has already burned — 2.5s leaves a comfortable ~1.2s of visible
// splash before we navigate.
Future.delayed(const Duration(milliseconds: 2500), () {
if (!mounted) return;
setState(() => _holdElapsed = true);
_maybeLeave();
});
});
}
void _maybeLeave() {
if (_navigated || !mounted || !_holdElapsed) return;
final authState = ref.read(authProvider);
if (authState is AsyncLoading) return;
_navigated = true;
final data = authState.valueOrNull;
if (data is AuthNeedsDisplayNameData) {
context.go('/auth/set-name');
} else if (data is AuthForceRegisterData) {
context.go('/auth/force-register');
} else if (data is AuthAuthenticatedData &&
ref.read(onboardingIntentProvider) == OnboardingIntent.onboarding) {
context.go('/payment/entry');
} else {
context.go('/home');
}
}
@override
Widget build(BuildContext context) {
ref.listen(authProvider, (_, __) => _maybeLeave());
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Image.asset(
'assets/images/splash_chat_hebat.png',
width: 200,
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0.0, 0.6, 1.0],
colors: [
HaloTokens.brandSofter,
HaloTokens.bg,
HaloTokens.accentSoft,
],
),
),
child: Stack(
children: [
const Positioned(
top: 80,
right: -40,
child: _Orb(
size: 180,
color: HaloTokens.brand,
opacity: 0.31,
blurSigma: 20,
),
),
const Positioned(
bottom: 120,
left: -40,
child: _Orb(
size: 160,
color: HaloTokens.accent,
opacity: 0.38,
blurSigma: 24,
),
),
SafeArea(
child: Padding(
padding: const EdgeInsets.fromLTRB(28, 40, 28, 40),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 96,
height: 96,
decoration: BoxDecoration(
color: HaloTokens.brandLogoBg,
borderRadius: BorderRadius.circular(24),
boxShadow: HaloShadows.soft,
),
clipBehavior: Clip.antiAlias,
// logo.png has ~25% internal whitespace around the
// glyph; scale up so the visible art reaches the edges
// of the tile. The Container clip keeps it inside the
// rounded square.
child: Transform.scale(
scale: 1.4,
child: Image.asset(
'assets/icons/logo.png',
fit: BoxFit.cover,
),
),
),
const SizedBox(height: 28),
const Text(
'HaloBestie',
style: TextStyle(
fontFamily: HaloTokens.fontDisplay,
fontSize: 44,
fontWeight: FontWeight.w700,
height: 1.05,
letterSpacing: -1.1,
color: HaloTokens.brandDark,
),
),
const SizedBox(height: 18),
ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 280),
child: const Text(
'kamu gak harus ngerasain\nini sendirian.',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 15,
height: 1.5,
color: HaloTokens.inkSoft,
),
),
),
],
),
),
),
),
],
),
),
);
}
}
class _Orb extends StatelessWidget {
const _Orb({
required this.size,
required this.color,
required this.opacity,
required this.blurSigma,
});
final double size;
final Color color;
final double opacity;
final double blurSigma;
@override
Widget build(BuildContext context) {
return IgnorePointer(
child: ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: blurSigma, sigmaY: blurSigma),
child: Container(
width: size,
height: size,
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: RadialGradient(
center: const Alignment(-0.4, -0.4),
radius: 0.7,
colors: [color.withValues(alpha: opacity), color.withValues(alpha: 0)],
),
),
),
),
);

25
client_app/lib/router.dart
View File

@@ -8,7 +8,6 @@ import 'features/auth/screens/register_screen.dart';
import 'features/auth/screens/otp_screen.dart';
import 'features/auth/screens/force_register_screen.dart';
import 'features/auth/screens/set_display_name_screen.dart';
import 'features/onboarding/onboarding_screen.dart';
import 'features/onboarding/screens/notif_gate_screen.dart';
import 'features/onboarding/screens/usp_screen.dart';
import 'features/splash/splash_screen.dart';
@@ -53,9 +52,6 @@ class RouterNotifier extends ChangeNotifier {
}
}
/// Cached onboarding status — loaded once at startup, invalidated after onboarding completes
final onboardingDoneProvider = FutureProvider<bool>((ref) => isOnboardingDone());
final routerProvider = Provider<GoRouter>((ref) => buildRouter(ref));
GoRouter buildRouter(Ref ref) {
@@ -70,7 +66,6 @@ GoRouter buildRouter(Ref ref) {
if (state.matchedLocation == '/_theme_preview') return null;
final authState = ref.read(authProvider);
final isSplash = state.matchedLocation == '/splash';
final isOnboarding = state.matchedLocation == '/onboarding';
final isAuthRoute = state.matchedLocation.startsWith('/auth');
// Phase 4 onboarding flow (Verif Choice → ESP → USP) — must transit
// freely while authState is AuthAnonymousData so the router doesn't
@@ -78,19 +73,14 @@ GoRouter buildRouter(Ref ref) {
final isOnboardingFlow =
state.matchedLocation.startsWith('/onboarding/');
// Show splash only during initial load
if (authState is AsyncLoading) {
if (isSplash || isAuthRoute || isOnboarding) return null;
return '/splash';
}
// SplashScreen is self-driving — it waits for both a 1s minimum hold and
// for `authProvider` to resolve, then navigates explicitly. The router
// must never redirect away from /splash on its own.
if (isSplash) return null;
// Check onboarding status — must complete before anything else
final onboardingDone = ref.read(onboardingDoneProvider).valueOrNull ?? false;
if (!onboardingDone) {
return isOnboarding ? null : '/onboarding';
}
if (isOnboarding) {
return '/home';
if (authState is AsyncLoading) {
if (isAuthRoute) return null;
return '/splash';
}
final data = authState.valueOrNull;
@@ -154,7 +144,6 @@ GoRouter buildRouter(Ref ref) {
if (kThemePreviewEnabled)
GoRoute(path: '/_theme_preview', builder: (_, __) => const ThemePreviewScreen()),
GoRoute(path: '/splash', builder: (_, __) => const SplashScreen()),
GoRoute(path: '/onboarding', builder: (_, __) => const OnboardingScreen()),
GoRoute(path: '/auth/display-name', builder: (_, __) => const DisplayNameScreen()),
GoRoute(path: '/auth/register', builder: (_, __) => const RegisterScreen()),
GoRoute(path: '/auth/otp', builder: (context, state) => OtpScreen(phone: state.extra as String)),