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

Phase 5.x payment revamp + Xendit Stage-8 prep

Browse Source 
- Backend wraps idn-finlogos npm at /assets/payment-icons/<slug>.svg with
  1y immutable cache. Mobile drops bundled SVGs (only placeholder remains)
  and fetches via flutter_cache_manager. payment_methods.icon is now a
  CSV of slugs; catalog emits icon_urls[]. CARDS tile renders Visa + MC +
  JCB side by side.
- Per-method min/max amount bounds (BIGINT, nullable). Picker greys out
  out-of-range tiles with subtitle; backend gates with INVALID_PAYMENT_AMOUNT
  (422). Defense in depth against stale-catalog clients.
- Xendit channel codes corrected from authoritative docs
  (BCA_VA -> BCA_VIRTUAL_ACCOUNT, CREDIT_CARD -> CARDS, ovo -> ovo-new,
  shopeepay -> shopee-pay, ...). 18 methods x 5 groups seeded with
  Xendit-published per-channel min/max.
- Re-runnable seed (ON CONFLICT DO NOTHING on payment_code + new unique
  index on group name). Operator CC edits never clobbered across re-runs.
  One-shot reset + inspect scripts under backend/.dev/.
- Customer redirect HTML pages at /payment/return/{success,failure},
  brand-styled with "Buka HaloBestie" CTA firing halobestie:// deeplink.
  URL scheme registered on Android (intent-filter w/ BROWSABLE on
  MainActivity) and iOS (CFBundleURLTypes). Waiting-payment poller still
  owns confirmation; deeplink just brings the activity to foreground.
- Control center payment-catalog page: min/max inputs + columns. Other
  CC pages restyled with new theme tokens (separate work, bundled here).

169/169 backend tests pass. See requirement/phase5-payment-revamp-2026-05-27.md
for the full revamp doc. Stage 8 (E2E) still pending: webhook URL routing
decision + two client_app follow-ups (legacy /chat/request removal,
extension Custom Tab).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Ramadhan Sjamsani
2026-05-27 21:33:51 +08:00
parent 1f6d8e09ae
commit 2c95fd040d
53 changed files with 2389 additions and 832 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -86,6 +86,12 @@ class _PaymentMethodScreenState extends ConsumerState<PaymentMethodScreen> {
String _humanError(DioException e) {
final code = e.response?.data?['error']?['code'] as String?;
final status = e.response?.statusCode;
if (code == 'INVALID_PAYMENT_AMOUNT') {
// Server confirms the picker should have caught this — most likely a
// stale catalog. The picker's tile subtitle already explains; we just
// need to nudge the user to pick a different method.
return 'Metode pembayaran tidak cocok untuk nominal ini. Pilih metode lain.';
}
if (status == 422 || code == 'VALIDATION_ERROR' || code == 'INVALID_TIER') {
return 'Pilihan durasi tidak valid.';
}
@@ -204,6 +210,7 @@ class _PaymentMethodScreenState extends ConsumerState<PaymentMethodScreen> {
group: g,
expanded: _expandedGroupIds.contains(g.id),
selectedCode: _selectedCode,
amount: amount,
onToggle: () => setState(() {
if (!_expandedGroupIds.add(g.id)) {
_expandedGroupIds.remove(g.id);
@@ -277,6 +284,7 @@ class _GroupSection extends StatelessWidget {
final PaymentMethodGroup group;
final bool expanded;
final String? selectedCode;
final int amount;
final VoidCallback onToggle;
final ValueChanged<String> onSelect;
@@ -284,6 +292,7 @@ class _GroupSection extends StatelessWidget {
required this.group,
required this.expanded,
required this.selectedCode,
required this.amount,
required this.onToggle,
required this.onSelect,
});
@@ -334,13 +343,17 @@ class _GroupSection extends StatelessWidget {
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(),
children: group.methods.map((m) {
final disabledReason = m.disabledReason(amount);
return _MethodTile(
method: m,
selected: selectedCode == m.paymentCode,
disabledReason: disabledReason,
onTap: disabledReason == null
? () => onSelect(m.paymentCode)
: null,
);
}).toList(),
),
crossFadeState:
expanded ? CrossFadeState.showSecond : CrossFadeState.showFirst,
@@ -351,90 +364,136 @@ class _GroupSection extends StatelessWidget {
}
}
/// Visual container for one or more brand-mark icons on a payment-method tile.
///
/// Single-icon: 40×40 box with the icon at 22px. Multi-icon (e.g. credit-card
/// row showing Visa + Mastercard + JCB): box widens to fit, icons render at
/// 18px with 3px gaps. Empty list: placeholder via [PaymentIcon] in the box.
class _MethodIconBox extends StatelessWidget {
final List<String> iconUrls;
const _MethodIconBox({required this.iconUrls});
@override
Widget build(BuildContext context) {
final multi = iconUrls.length > 1;
final iconSize = multi ? 18.0 : 22.0;
final children = iconUrls.isEmpty
? <Widget>[
PaymentIcon(iconUrl: null, size: iconSize, color: HaloTokens.brandDark),
]
: [
for (var i = 0; i < iconUrls.length; i++) ...[
if (i > 0) const SizedBox(width: 3),
PaymentIcon(iconUrl: iconUrls[i], size: iconSize, color: HaloTokens.brandDark),
],
];
return Container(
height: 40,
constraints: BoxConstraints(minWidth: multi ? 0 : 40),
padding: EdgeInsets.symmetric(horizontal: multi ? 6 : 0),
decoration: BoxDecoration(
color: HaloTokens.surface,
borderRadius: HaloRadius.md,
border: Border.all(color: HaloTokens.border),
),
alignment: Alignment.center,
child: Row(mainAxisSize: MainAxisSize.min, children: children),
);
}
}
class _MethodTile extends StatelessWidget {
final PaymentMethodEntry method;
final bool selected;
final VoidCallback onTap;
final String? disabledReason;
final VoidCallback? onTap;
const _MethodTile({
required this.method,
required this.selected,
required this.disabledReason,
required this.onTap,
});
@override
Widget build(BuildContext context) {
final disabled = disabledReason != null;
return Padding(
padding: const EdgeInsets.only(bottom: HaloSpacing.s8),
child: Material(
color: selected ? HaloTokens.brandSofter : HaloTokens.surface,
borderRadius: HaloRadius.lg,
child: InkWell(
child: Opacity(
opacity: disabled ? 0.5 : 1.0,
child: Material(
color: selected ? HaloTokens.brandSofter : HaloTokens.surface,
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,
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,
),
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,
child: Row(
children: [
_MethodIconBox(iconUrls: method.iconUrls),
const SizedBox(width: HaloSpacing.s12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
method.displayName,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: HaloTokens.ink,
),
),
if (disabled)
Padding(
padding: const EdgeInsets.only(top: 2),
child: Text(
disabledReason!,
style: const TextStyle(
fontSize: 11.5,
color: HaloTokens.inkMuted,
),
),
),
)
: null,
),
],
],
),
),
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,
),
],
),
),
),
),

53
client_app/lib/features/payment/state/payment_catalog_provider.dart
View File

@@ -2,18 +2,58 @@ 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`).
///
/// `iconUrls` is the backend-resolved list of brand-SVG URLs for this method.
/// Relative paths (e.g. `/assets/payment-icons/qris.svg`) are prepended with
/// `ApiClient.baseUrl` by [PaymentIcon]. Composite tiles (e.g. credit card
/// showing Visa + Mastercard + JCB) carry multiple entries. Empty list = no
/// icon configured → the row renders the bundled placeholder.
///
/// `minAmount` / `maxAmount` are inclusive Rupiah bounds, either nullable
/// (null = no bound). The picker greys out methods the current bill misses,
/// and the backend enforces the same bounds defensively with
/// `INVALID_PAYMENT_AMOUNT`.
class PaymentMethodEntry {
final String id;
final String paymentCode;
final String displayName;
final String? icon;
final List<String> iconUrls;
final int? minAmount;
final int? maxAmount;
const PaymentMethodEntry({
required this.id,
required this.paymentCode,
required this.displayName,
this.icon,
this.iconUrls = const [],
this.minAmount,
this.maxAmount,
});
/// `null` when the method is usable at [amount]; otherwise a short reason
/// suitable as a tile subtitle (Indonesian, brand voice).
String? disabledReason(int amount) {
if (minAmount != null && amount < minAmount!) {
return 'min ${_rp(minAmount!)}';
}
if (maxAmount != null && amount > maxAmount!) {
return 'maks ${_rp(maxAmount!)}';
}
return null;
}
}
String _rp(int n) {
// Rp 10.000 (Indonesian thousand-separator). Matches the picker's other
// amount formatting via `formatRupiah` in core/constants.dart, kept local
// to avoid pulling that dependency into the catalog model.
final s = n.toString();
final buf = StringBuffer('Rp ');
for (var i = 0; i < s.length; i++) {
if (i > 0 && (s.length - i) % 3 == 0) buf.write('.');
buf.write(s[i]);
}
return buf.toString();
}
/// One group in the payment-method catalog (server-side:
@@ -50,11 +90,13 @@ const _kFallbackGroup = PaymentMethodGroup(
id: 'fallback-paling-cepat',
name: 'Paling Cepat',
methods: [
// Fallback path renders the bundled placeholder (iconUrls empty) — the
// catalog endpoint being unreachable usually means the icon endpoint is
// too, so deferring to the placeholder is the safest signal.
PaymentMethodEntry(
id: 'fallback-qris',
paymentCode: 'QRIS',
displayName: 'QRIS',
icon: 'qris',
),
],
);
@@ -74,11 +116,14 @@ final paymentCatalogProvider = FutureProvider<PaymentCatalog>((ref) async {
final gm = g as Map<String, dynamic>;
final methods = (gm['methods'] as List<dynamic>? ?? const []).map((m) {
final mm = m as Map<String, dynamic>;
final iconUrlsRaw = mm['icon_urls'] as List<dynamic>? ?? const [];
return PaymentMethodEntry(
id: mm['id'] as String,
paymentCode: mm['payment_code'] as String,
displayName: mm['display_name'] as String,
icon: mm['icon'] as String?,
iconUrls: iconUrlsRaw.cast<String>(),
minAmount: (mm['min_amount'] as num?)?.toInt(),
maxAmount: (mm['max_amount'] as num?)?.toInt(),
);
}).toList(growable: false);
return PaymentMethodGroup(

84
client_app/lib/features/payment/widgets/payment_icon.dart
View File

@@ -1,56 +1,72 @@
import 'package:flutter/material.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../../../core/api/api_client.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.
/// Renders a payment-method brand mark fetched from the backend.
///
/// 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.
/// `iconUrl` comes from `payment_methods.icon_url` on the catalog response.
/// Relative paths (the common case — `/assets/payment-icons/<slug>.svg`) are
/// resolved against [ApiClient.baseUrl]. Absolute URLs (operator override)
/// are used as-is.
///
/// First fetch hits the network; the file is then persisted to disk by
/// [DefaultCacheManager] (30-day idle LRU) and served locally on subsequent
/// renders. While the cache lookup is in flight or when [iconUrl] is null,
/// the bundled placeholder is shown so the picker never displays a spinner.
class PaymentIcon extends StatelessWidget {
final String? slug;
final String? iconUrl;
final double size;
final Color color;
const PaymentIcon({
super.key,
required this.slug,
required this.iconUrl,
this.size = 24,
this.color = HaloTokens.brandDark,
});
String? get _resolvedUrl {
final raw = iconUrl;
if (raw == null || raw.isEmpty) return null;
if (raw.startsWith('http://') || raw.startsWith('https://')) return raw;
return '${ApiClient.baseUrl}$raw';
}
@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';
final url = _resolvedUrl;
if (url == null) return _placeholder();
// 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),
return FutureBuilder<FileInfo?>(
future: DefaultCacheManager().getFileFromCache(url),
builder: (context, cachedSnap) {
final cached = cachedSnap.data?.file;
if (cached != null) {
return SvgPicture.file(cached, width: size, height: size);
}
// Cache miss: render placeholder while the download lands, then swap
// in. We fire the download in the same FutureBuilder body so the next
// rebuild picks up the freshly-cached file.
return FutureBuilder(
future: DefaultCacheManager().getSingleFile(url),
builder: (context, snap) {
if (snap.hasData) {
return SvgPicture.file(snap.data!, width: size, height: size);
}
return _placeholder();
},
);
},
);
}
Widget _placeholder() => SvgPicture.asset(
'assets/payment_icons/placeholder.svg',
width: size,
height: size,
colorFilter: ColorFilter.mode(color, BlendMode.srcIn),
);
}