Phase 5.x payment catalog + customer-app splash/register polish
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:
@@ -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)],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user