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

Phase 4 Stage 5: pairing UX upgrades (searching + match + targeted-wait)

Browse Source 
Searching screen: soft-prompt card reskin, pulsing-dots panel replaces
the spinner, inline 5-min timeout panel with `coba cari lagi` (resets
pairing notifier + routes to /payment/entry for a fresh funnel — the
server-side payment is failed_pairing at that point so a stale retry
isn't valid) and `kembali ke home` ghost CTA.

Bestie-found screen: S9 Match-V4 reskin — HaloOrb + status dot +
'halo, aku bestie {name}' + `mulai sesi {N} menit →` with N pulled from
the active session's duration_minutes.

Targeted-wait overlay (new) at /chat/waiting-targeted/:mitraId. Three
sub-states from pairingProvider's PairingTargetedWaitingData:
waiting (20s countdown) / accepted (routes to chat) / declined (stubbed
BestieOfflinePopup with a TODO pointing to Stage 8). Reached via
payment_screen._routeToSearchOnConfirmed when the confirm carried a
targetedMitraId — keeps the mandatory payment-before-pairing invariant.

Dev-only POST /internal/_test/force-pairing-timeout drives the 5-min
timeout shortcut for the Maestro flow without waiting live.

Maestro 05_searching_timeout.yaml + force_pairing_timeout.js helper.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
ramadhan sjamsani
2026-05-10 16:49:07 +08:00
parent 7ae8f33b2c
commit f170d54535
8 changed files with 800 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

397
client_app/lib/features/chat/screens/searching_screen.dart
View File

@@ -2,23 +2,30 @@ import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/pairing/pairing_notifier.dart';
import '../../../core/theme/halo_tokens.dart';
import '../../../core/theme/widgets/widgets.dart';
import '../widgets/bestie_unavailable_dialog.dart';
import '../widgets/targeted_waiting_overlay.dart';
/// Searching screen, also responsible for routing all downstream pairing
/// transitions:
/// Searching screen — Phase 4 Stage 5 reskin of the SSearchPrompt soft-prompt
/// + searching panel. Renders three pairing-driven phases inline:
///
/// - PairingTargetedWaitingData → render the targeted waiting overlay above
/// the searching shell (the customer sees the 20s countdown + cancel CTA).
/// - PairingTargetedUnavailableData → show the bestie-unavailable dialog
/// - `PairingSearchingData` → reflective-prompt cards + pulsing-dots panel.
/// - `PairingFailedData` (cause = noMitraAvailable / allMitrasRejected /
/// targetedMitraTimeout / targetedMitraRejected — i.e. the 5-minute blast
/// timeout) → moon panel + `coba cari lagi` / `kembali ke home` CTAs.
/// - `PairingTargetedWaitingData` → 20s targeted-wait overlay above the body.
///
/// Other transitions still route away as before:
///
/// - `PairingBestieFoundData` → `/chat/found` (S9 Match screen).
/// - `PairingActiveData` → `/chat/session/:id`.
/// - `PairingTargetedUnavailableData` → bestie-unavailable dialog overlay
/// (intermediate; payment stays confirmed; offers fallback-to-blast).
/// - PairingFailedData → terminal; route to no-bestie screen.
/// - PairingBestieFoundData → existing transition to bestie-found screen.
/// - PairingCancelledData → customer cancelled; back home.
/// - `PairingCancelledData` → `/home`.
///
/// Per project memory ("Riverpod ref.listen in build is unsafe"), we use
/// ref.listenManual in initState for one-shot side effects rather than
/// build-scoped listeners.
/// Per project memory ("Riverpod ref.listen in build is unsafe"), one-shot
/// transitions are wired through `ref.listenManual` in initState.
class SearchingScreen extends ConsumerStatefulWidget {
const SearchingScreen({super.key});
@@ -27,19 +34,12 @@ class SearchingScreen extends ConsumerStatefulWidget {
}
class _SearchingScreenState extends ConsumerState<SearchingScreen> {
/// Guard against re-firing the bestie-unavailable dialog if the notifier
/// briefly emits multiple intermediate states (e.g. WS event arrives just
/// after a 409 already opened the dialog).
bool _unavailableDialogShown = false;
@override
void initState() {
super.initState();
ref.listenManual<PairingData>(pairingProvider, _onPairingState);
// The pairing state can already be PairingTargetedUnavailableData by
// the time we mount (the payment screen awaits startTargetedSearch
// before navigating; a 409 lands while we're still on the previous
// screen). Inspect once after first frame to handle that case.
WidgetsBinding.instance.addPostFrameCallback((_) {
if (!mounted) return;
_onPairingState(null, ref.read(pairingProvider));
@@ -58,18 +58,10 @@ class _SearchingScreenState extends ConsumerState<SearchingScreen> {
}
if (next is PairingActiveData) {
// Direct route into the active chat — happens after the brief "found"
// animation if the user is already on this screen.
context.go('/chat/session/${next.sessionId}', extra: next.mitraName);
return;
}
if (next is PairingFailedData) {
// Terminal — payment_session is failed_pairing.
context.go('/chat/no-bestie');
return;
}
if (next is PairingCancelledData) {
context.go('/home');
return;
@@ -88,12 +80,6 @@ class _SearchingScreenState extends ConsumerState<SearchingScreen> {
});
return;
}
if (next is PairingErrorData) {
// Inline error UX is preferred over SnackBars (project memory:
// "Avoid SnackBars for provider errors"). The build below renders
// a banner when the state is PairingErrorData.
}
}
@override
@@ -101,6 +87,7 @@ class _SearchingScreenState extends ConsumerState<SearchingScreen> {
final pairingState = ref.watch(pairingProvider);
return Scaffold(
backgroundColor: HaloTokens.bg,
body: SafeArea(
child: Stack(
children: [
@@ -120,52 +107,314 @@ class _SearchingBody extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final isTimeout = state is PairingFailedData;
final isTargetedWaiting = state is PairingTargetedWaitingData;
final errorMessage = state is PairingErrorData ? (state as PairingErrorData).message : null;
final errorMessage =
state is PairingErrorData ? (state as PairingErrorData).message : null;
return Center(
child: Padding(
padding: const EdgeInsets.all(32),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const CircularProgressIndicator(),
const SizedBox(height: 32),
Text(
isTargetedWaiting ? 'Menghubungi bestie...' : 'Mencari Bestie...',
style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
const SizedBox(height: 8),
const Text(
'Tunggu sebentar ya, kami sedang mencarikan Bestie untukmu',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16, color: Colors.grey),
),
if (errorMessage != null) ...[
const SizedBox(height: 24),
Container(
padding: const EdgeInsets.all(12),
decoration: BoxDecoration(
color: Colors.red.shade50,
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.red.shade200),
),
child: Text(
errorMessage,
style: TextStyle(color: Colors.red.shade900),
textAlign: TextAlign.center,
),
),
],
const SizedBox(height: 48),
// The targeted-waiting overlay owns its own cancel button — only
// show the general cancel CTA when we're in a non-overlay state.
if (!isTargetedWaiting)
OutlinedButton(
onPressed: () => ref.read(pairingProvider.notifier).cancelSearch(),
child: const Text('Batalkan'),
return Padding(
padding: const EdgeInsets.fromLTRB(
HaloSpacing.s24,
HaloSpacing.s24,
HaloSpacing.s24,
HaloSpacing.s32,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Expanded(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'sambil nunggu, coba pikirin sebentar 🤍',
style: TextStyle(
fontFamily: HaloTokens.fontDisplay,
fontSize: 24,
height: 30 / 24,
fontWeight: FontWeight.w700,
color: HaloTokens.brandDark,
letterSpacing: -0.4,
),
),
SizedBox(height: HaloSpacing.s8),
Text(
'gausah dipikirin formatnya. ngalir aja gimana enaknya buat kamu.',
style: TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 14,
height: 22 / 14,
color: HaloTokens.inkSoft,
),
),
SizedBox(height: HaloSpacing.s20),
_PromptCard('apa yang lagi paling kamu rasain hari ini?'),
SizedBox(height: HaloSpacing.s8),
_PromptCard('kapan terakhir kamu ngerasa lega?'),
SizedBox(height: HaloSpacing.s8),
_PromptCard('ada satu hal yang pengen banget kamu cerita...'),
],
),
),
),
if (errorMessage != null) ...[
const SizedBox(height: HaloSpacing.s16),
_ErrorBanner(message: errorMessage),
],
const SizedBox(height: HaloSpacing.s16),
isTimeout
? const _TimeoutPanel()
: _SearchingPanel(targetedWaiting: isTargetedWaiting),
if (isTimeout) ...[
const SizedBox(height: HaloSpacing.s12),
HaloButton(
label: 'coba cari lagi',
fullWidth: true,
size: HaloButtonSize.lg,
onPressed: () {
ref.read(pairingProvider.notifier).reset();
context.go('/payment/entry');
},
),
const SizedBox(height: HaloSpacing.s8),
HaloButton(
label: 'kembali ke home',
variant: HaloButtonVariant.ghost,
fullWidth: true,
onPressed: () {
ref.read(pairingProvider.notifier).reset();
context.go('/home');
},
),
] else if (!isTargetedWaiting) ...[
const SizedBox(height: HaloSpacing.s12),
HaloButton(
label: 'batalkan',
variant: HaloButtonVariant.ghost,
fullWidth: true,
onPressed: () =>
ref.read(pairingProvider.notifier).cancelSearch(),
),
],
],
),
);
}
}
class _PromptCard extends StatelessWidget {
final String text;
const _PromptCard(this.text);
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(HaloSpacing.s16),
decoration: BoxDecoration(
color: HaloTokens.surface,
borderRadius: BorderRadius.circular(14),
border: Border.all(color: HaloTokens.border),
),
child: Text(
text,
style: const TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 13,
height: 20 / 13,
color: HaloTokens.ink,
),
),
);
}
}
class _SearchingPanel extends StatelessWidget {
final bool targetedWaiting;
const _SearchingPanel({required this.targetedWaiting});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(HaloSpacing.s20),
decoration: BoxDecoration(
color: HaloTokens.brandSofter,
borderRadius: BorderRadius.circular(18),
border: Border.all(color: HaloTokens.brandSoft),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const _PulsingDots(),
const SizedBox(width: HaloSpacing.s16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
targetedWaiting ? 'menghubungi bestie...' : 'lagi nyari bestie...',
style: const TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 13,
fontWeight: FontWeight.w600,
color: HaloTokens.brandDark,
),
),
const SizedBox(height: 2),
const Text(
'biasanya 30 detik · sambil baca prompt aja',
style: TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 11.5,
color: HaloTokens.inkSoft,
),
),
],
),
),
],
),
);
}
}
class _TimeoutPanel extends StatelessWidget {
const _TimeoutPanel();
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(HaloSpacing.s20),
decoration: BoxDecoration(
color: HaloTokens.brandSofter,
borderRadius: BorderRadius.circular(18),
border: Border.all(color: HaloTokens.brandSoft),
),
child: const Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('🌙', style: TextStyle(fontSize: 26)),
SizedBox(width: HaloSpacing.s16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'masih nyari nih...',
style: TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 13,
fontWeight: FontWeight.w600,
color: HaloTokens.brandDark,
),
),
SizedBox(height: 2),
Text(
'bestie lagi rame. coba cari lagi atau kembali nanti',
style: TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 11.5,
height: 16 / 11.5,
color: HaloTokens.inkSoft,
),
),
],
),
),
],
),
);
}
}
class _PulsingDots extends StatefulWidget {
const _PulsingDots();
@override
State<_PulsingDots> createState() => _PulsingDotsState();
}
class _PulsingDotsState extends State<_PulsingDots>
with SingleTickerProviderStateMixin {
late final AnimationController _controller;
@override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1400),
)..repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
double _scaleAt(double t, double phase) {
// Mirrors the keyframe in v3.jsx: (0,80,100) → 0.6 ; 40 → 1.
final shifted = (t - phase) % 1.0;
final eased = shifted < 0 ? shifted + 1.0 : shifted;
if (eased < 0.4) {
return 0.6 + (1.0 - 0.6) * (eased / 0.4);
} else if (eased < 0.8) {
return 1.0 - (1.0 - 0.6) * ((eased - 0.4) / 0.4);
}
return 0.6;
}
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _controller,
builder: (context, _) {
return Row(
mainAxisSize: MainAxisSize.min,
children: List.generate(3, (i) {
final scale = _scaleAt(_controller.value, i * 0.16);
return Padding(
padding: EdgeInsets.only(right: i == 2 ? 0 : 4),
child: Transform.scale(
scale: scale,
child: Container(
width: 8,
height: 8,
decoration: const BoxDecoration(
color: HaloTokens.brand,
shape: BoxShape.circle,
),
),
),
);
}),
);
},
);
}
}
class _ErrorBanner extends StatelessWidget {
final String message;
const _ErrorBanner({required this.message});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(HaloSpacing.s12),
decoration: BoxDecoration(
color: const Color(0x14D86B6B),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: HaloTokens.danger.withValues(alpha: 0.4)),
),
child: Text(
message,
textAlign: TextAlign.center,
style: const TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 13,
color: HaloTokens.danger,
),
),
);