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

Phase 3.7: paid pairing flow + returning chat + extension flip

Browse Source 
- Backend: payment_sessions + pairing_failures tables; payment.service.js
  and pairing-failure.service.js (new); rewritten pairing.service.js
  (payment-gated blast + targeted "Curhat lagi" + cancel + fallback);
  rewritten extension.service.js (data-driven auto-approve with offline
  safeguard, charge-at-approval); pricing.service.js (extension tiers
  without free trial); mitra-status.service.js (countAvailableMitras
  cached path); 60s sweeper for stale payment sessions
- Backend routes: client.payment.routes, client.mitra-availability.routes,
  internal/failed-pairings.routes; client.chat.routes rewritten for
  payment-gated start + /returning + /cancel + /fallback-to-blast;
  internal/config.routes adds 4 new keys with Valkey invalidate publish
- client_app: mitra-availability poll, payment screen + notifier, pairing
  notifier rewrite (PairingTargetedWaiting + PairingFailed states),
  targeted-waiting overlay + bestie-unavailable dialog, "Curhat lagi"
  CTA, failed-pairing terminal, extension via payment-session
- mitra_app: PairingRequestType enum, returning-chat 20s countdown
  auto-dismiss, extension card "otomatis disetujui" copy
- control_center: 4 new config rows in Settings, Failed Pairings page
  (filter + paginate + action menu), sidebar + route registered
- Test infrastructure: Vitest backend (7/7 pass), Playwright CC (4/4
  pass), Maestro mobile scaffold (CLI install pending)
- Bugs found via Playwright + fixed: LoginPage labels not associated
  with inputs (a11y); backend internal CORS missing PATCH/PUT/DELETE
  in allow-methods (silent settings breakage in browsers since Stage 4)
- Docs: phase3.7.md PRD, phase3.7-plan.md, phase3.7-questions.md (Q&A),
  phase3.7-testing.md (E2E checklist), phase3.7-test-run-2026-05-03.md
  (today's run results)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
ramadhan sjamsani
2026-05-03 23:02:49 +08:00
parent f3766813f3
commit d09e50af55
92 changed files with 9579 additions and 437 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
client_app/lib/features/chat/screens/chat_history_screen.dart
View File

@@ -2,7 +2,17 @@ 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';
/// Chat history with per-row "Curhat lagi" CTA.
///
/// Tapping "Curhat lagi" routes to the payment screen with the targeted
/// mitra id + display name as extras. The payment screen then:
/// 1. POSTs `/api/client/payment-sessions` with `targeted_mitra_id`
/// 2. On confirm, fires `pairingNotifier.startTargetedSearch(...)` instead
/// of the general `startSearch(...)`.
///
/// The CTA is per-row (not per-unique-mitra).
class ChatHistoryScreen extends ConsumerStatefulWidget {
const ChatHistoryScreen({super.key});
@@ -34,6 +44,19 @@ class _ChatHistoryScreenState extends ConsumerState<ChatHistoryScreen> {
}
}
void _onCurhatLagiPressed(Map<String, dynamic> session) {
// The mitra id field on the history payload is `mitra_id` per existing
// backend convention. If absent (older rows), don't render the CTA.
final mitraId = session['mitra_id'] as String?;
if (mitraId == null) return;
final mitraName = session['mitra_display_name'] as String? ?? 'Bestie';
context.push('/payment', extra: <String, dynamic>{
'targetedMitraId': mitraId,
'mitraName': mitraName,
'topicSensitivity': TopicSensitivity.regular,
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
@@ -42,11 +65,13 @@ class _ChatHistoryScreenState extends ConsumerState<ChatHistoryScreen> {
? const Center(child: CircularProgressIndicator())
: _sessions.isEmpty
? const Center(child: Text('Belum ada riwayat chat'))
: ListView.builder(
: ListView.separated(
itemCount: _sessions.length,
separatorBuilder: (_, __) => const Divider(height: 1),
itemBuilder: (context, index) {
final s = _sessions[index];
final sessionId = s['id'] as String;
final mitraId = s['mitra_id'] as String?;
final mitraName = s['mitra_display_name'] as String? ?? 'Bestie';
final status = s['status'] as String?;
final isClosing = status == 'closing';
@@ -72,7 +97,18 @@ class _ChatHistoryScreenState extends ConsumerState<ChatHistoryScreen> {
if (duration != null) '$duration menit',
if (closureMsg != null) '"$closureMsg"',
].join(' - ')),
trailing: const Icon(Icons.chevron_right),
// Curhat-lagi CTA renders inline; transcript view is
// still reachable by tapping the row body (or, for
// closing sessions, the active chat — same as before).
trailing: !isClosing && mitraId != null
? OutlinedButton(
style: OutlinedButton.styleFrom(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
),
onPressed: () => _onCurhatLagiPressed(s),
child: const Text('Curhat lagi'),
)
: const Icon(Icons.chevron_right),
onTap: () => isClosing
? context.push('/chat/session/$sessionId', extra: mitraName)
: context.push('/chat/history/$sessionId'),

80
client_app/lib/features/chat/screens/no_bestie_screen.dart
View File

@@ -1,36 +1,64 @@
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';
class NoBestieScreen extends StatelessWidget {
/// Terminal failed-pairing screen.
///
/// Reached when the pairing notifier transitions to [PairingFailedData]
/// (terminal — payment session is `failed_pairing` server-side, audit row
/// recorded). Copy is intentionally identical regardless of `cause_tag` for
/// now (the design pass will revise this later).
///
/// Single CTA "Kembali ke beranda" resets the pairing notifier and routes
/// home. PopScope falls back to home for deep-link entry per project memory
/// rule "Deep-link pop fallback".
class NoBestieScreen extends ConsumerWidget {
const NoBestieScreen({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(32),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.sentiment_dissatisfied, size: 80, color: Colors.orange),
const SizedBox(height: 24),
const Text(
'Bestie belum tersedia',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
Widget build(BuildContext context, WidgetRef ref) {
return PopScope(
canPop: true,
onPopInvokedWithResult: (didPop, _) {
if (!didPop) return;
ref.read(pairingProvider.notifier).reset();
},
child: Scaffold(
body: SafeArea(
child: Center(
child: Padding(
padding: const EdgeInsets.all(32),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.sentiment_dissatisfied, size: 80, color: Colors.orange),
const SizedBox(height: 24),
const Text(
'Belum berhasil terhubung',
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
),
const SizedBox(height: 12),
const Text(
'Maaf, kami tidak bisa menemukan bestie untuk sesimu. '
'Tim kami akan menghubungimu segera.',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16, color: Colors.grey),
),
const SizedBox(height: 48),
ElevatedButton(
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 14),
),
onPressed: () {
ref.read(pairingProvider.notifier).reset();
context.go('/home');
},
child: const Text('Kembali ke beranda'),
),
],
),
const SizedBox(height: 8),
const Text(
'Maaf, semua Bestie sedang sibuk. Coba lagi nanti ya.',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16, color: Colors.grey),
),
const SizedBox(height: 48),
ElevatedButton(
onPressed: () => context.go('/home'),
child: const Text('Kembali'),
),
],
),
),
),
),

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

@@ -2,51 +2,170 @@ 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 '../widgets/bestie_unavailable_dialog.dart';
import '../widgets/targeted_waiting_overlay.dart';
class SearchingScreen extends ConsumerWidget {
/// Searching screen, also responsible for routing all downstream pairing
/// transitions:
///
/// - PairingTargetedWaitingData → render the targeted waiting overlay above
/// the searching shell (the customer sees the 20s countdown + cancel CTA).
/// - PairingTargetedUnavailableData → show the bestie-unavailable dialog
/// (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.
///
/// 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.
class SearchingScreen extends ConsumerStatefulWidget {
const SearchingScreen({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
ref.listen(pairingProvider, (prev, next) {
if (next is PairingBestieFoundData) {
context.go('/chat/found', extra: {
'sessionId': next.sessionId,
'mitraName': next.mitraName,
});
} else if (next is PairingNoBestieData) {
context.go('/chat/no-bestie');
} else if (next is PairingCancelledData) {
context.go('/home');
}
ConsumerState<SearchingScreen> createState() => _SearchingScreenState();
}
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));
});
}
void _onPairingState(PairingData? prev, PairingData next) {
if (!mounted) return;
if (next is PairingBestieFoundData) {
context.go('/chat/found', extra: {
'sessionId': next.sessionId,
'mitraName': next.mitraName,
});
return;
}
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;
}
if (next is PairingTargetedUnavailableData && !_unavailableDialogShown) {
_unavailableDialogShown = true;
// ignore: discarded_futures
BestieUnavailableDialog.show(
context,
paymentSessionId: next.paymentSessionId,
mitraName: next.mitraName,
topicSensitivity: next.topicSensitivity,
).then((_) {
if (mounted) _unavailableDialogShown = false;
});
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
Widget build(BuildContext context) {
final pairingState = ref.watch(pairingProvider);
return Scaffold(
body: Center(
child: Padding(
padding: const EdgeInsets.all(32),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const CircularProgressIndicator(),
const SizedBox(height: 32),
const Text(
'Mencari Bestie...',
style: 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),
),
const SizedBox(height: 48),
OutlinedButton(
onPressed: () => ref.read(pairingProvider.notifier).cancelPairing(),
child: const Text('Batalkan'),
),
],
),
body: SafeArea(
child: Stack(
children: [
_SearchingBody(state: pairingState),
if (pairingState is PairingTargetedWaitingData)
TargetedWaitingOverlay(waiting: pairingState),
],
),
),
);
}
}
class _SearchingBody extends ConsumerWidget {
final PairingData state;
const _SearchingBody({required this.state});
@override
Widget build(BuildContext context, WidgetRef ref) {
final isTargetedWaiting = state is PairingTargetedWaitingData;
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'),
),
],
),
),
);

98
client_app/lib/features/chat/widgets/bestie_unavailable_dialog.dart Normal file
View File

@@ -0,0 +1,98 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/availability/mitra_availability_notifier.dart';
import '../../../core/constants.dart';
import '../../../core/pairing/pairing_notifier.dart';
/// Shown when a "Curhat lagi" attempt against a specific bestie can't proceed
/// — either a 409 `targeted_mitra_offline` response on the targeted POST, or
/// one of the intermediate WS events (`returning_chat_timeout`,
/// `returning_chat_rejected`).
///
/// CTAs:
/// - "Chat dengan bestie lain" — only rendered when
/// [mitraAvailabilityProvider] reports `available == true` at the time of
/// build. Tapping calls [Pairing.fallbackToBlast] (reuses the same payment
/// session — no double-charge) and closes the dialog. The caller is expected
/// to be the searching screen, which will transition into PairingSearchingData
/// and stay put.
/// - "Kembali" — pops dialog and routes home. Backend has already audit-logged
/// the targeted failure; payment session stays `confirmed` until the sweeper
/// expires it.
class BestieUnavailableDialog extends ConsumerWidget {
final String paymentSessionId;
final String mitraName;
final TopicSensitivity topicSensitivity;
const BestieUnavailableDialog({
super.key,
required this.paymentSessionId,
required this.mitraName,
required this.topicSensitivity,
});
/// Convenience: show this dialog and return when it closes. Per project
/// memory ("Riverpod ref.listen in build is unsafe"), callers should
/// invoke this from `ref.listenManual` callbacks in `initState`, not from
/// `build`.
static Future<void> show(
BuildContext context, {
required String paymentSessionId,
required String mitraName,
required TopicSensitivity topicSensitivity,
}) {
return showDialog<void>(
context: context,
barrierDismissible: false,
builder: (_) => BestieUnavailableDialog(
paymentSessionId: paymentSessionId,
mitraName: mitraName,
topicSensitivity: topicSensitivity,
),
);
}
@override
Widget build(BuildContext context, WidgetRef ref) {
// Snapshot at dialog-open time — we don't keep listening, we just check
// whether other bestie are around right now.
final availabilityAsync = ref.watch(mitraAvailabilityProvider);
final hasOtherAvailable = availabilityAsync.valueOrNull ?? false;
return AlertDialog(
title: const Text('Bestie sedang tidak online'),
content: Text(
'$mitraName sedang tidak bisa menerima chat saat ini. '
'Kamu bisa coba chat dengan bestie lain atau kembali ke beranda.',
),
actions: [
TextButton(
onPressed: () {
// Reset pairing state and route home. Payment session stays
// confirmed until sweeper expires it — no extra API call needed.
ref.read(pairingProvider.notifier).reset();
Navigator.of(context).pop();
context.go('/home');
},
child: const Text('Kembali'),
),
if (hasOtherAvailable)
ElevatedButton(
onPressed: () {
// Close the dialog first, then kick off the fallback. The
// searching screen will pick up the new PairingSearchingData
// state and render normally (no targeted overlay).
Navigator.of(context).pop();
// ignore: discarded_futures
ref.read(pairingProvider.notifier).fallbackToBlast(
paymentSessionId: paymentSessionId,
topicSensitivity: topicSensitivity,
);
},
child: const Text('Chat dengan bestie lain'),
),
],
);
}
}

122
client_app/lib/features/chat/widgets/pricing_bottom_sheet.dart
View File

@@ -3,27 +3,21 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/chat/chat_opening_provider.dart';
import '../../../core/chat/session_closure_notifier.dart';
import '../../../core/constants.dart';
import '../../../core/pairing/pairing_notifier.dart';
/// Extension-only pricing sheet.
///
/// Used solely for in-session extension requests; the initial pairing flow
/// goes through `/payment` instead. Free-trial is never offered for extensions.
///
/// Submit triggers [SessionClosure.requestExtension], which internally
/// runs the payment-session create+confirm and then the extend POST.
class PricingBottomSheet extends ConsumerWidget {
/// If set, the bottom sheet is in "extension" mode — selecting a tier extends the session.
final String? extensionSessionId;
/// Required — the in-progress chat session id this extension targets.
final String extensionSessionId;
/// Required when starting a new pairing. Null when in extension mode.
final TopicSensitivity? topicSensitivity;
const PricingBottomSheet({super.key, required this.extensionSessionId});
const PricingBottomSheet({super.key, this.extensionSessionId, this.topicSensitivity});
/// Show for new pairing (from home screen)
static Future<void> show(BuildContext context, {required TopicSensitivity topicSensitivity}) {
return showModalBottomSheet(
context: context,
isScrollControlled: true,
builder: (_) => PricingBottomSheet(topicSensitivity: topicSensitivity),
);
}
/// Show for session extension (from chat screen)
/// Show for session extension (from chat screen).
static Future<void> showForExtension(BuildContext context, {required String sessionId}) {
return showModalBottomSheet(
context: context,
@@ -32,19 +26,8 @@ class PricingBottomSheet extends ConsumerWidget {
);
}
String _formatPrice(int price) {
final str = price.toString();
final buffer = StringBuffer();
for (var i = 0; i < str.length; i++) {
if (i > 0 && (str.length - i) % 3 == 0) buffer.write('.');
buffer.write(str[i]);
}
return 'Rp $buffer';
}
@override
Widget build(BuildContext context, WidgetRef ref) {
final isExtension = extensionSessionId != null;
final pricingAsync = ref.watch(chatPricingProvider);
return pricingAsync.when(
@@ -52,7 +35,7 @@ class PricingBottomSheet extends ConsumerWidget {
height: 200,
child: Center(child: CircularProgressIndicator()),
),
error: (error, _) => SizedBox(
error: (error, _) => const SizedBox(
height: 200,
child: Center(child: Text('Gagal memuat harga. Coba lagi.')),
),
@@ -67,54 +50,30 @@ class PricingBottomSheet extends ConsumerWidget {
child: ListView(
controller: scrollController,
children: [
Text(
isExtension ? 'Perpanjang Durasi' : 'Pilih Durasi Curhat',
style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
const Text(
'Perpanjang Durasi',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
const SizedBox(height: 16),
if (!isExtension && pricing.freeTrialEligible) ...[
Card(
color: Colors.green.shade50,
child: ListTile(
leading: const Icon(Icons.card_giftcard, color: Colors.green),
title: Text('Free Trial (${pricing.freeTrialDurationMinutes} Menit)'),
subtitle: const Text('Gratis untuk pertama kali!'),
trailing: const Icon(Icons.arrow_forward_ios, size: 16),
onTap: () {
Navigator.of(context).pop();
_startPairing(ref, isFreeTrial: true);
},
),
),
const Divider(height: 24),
],
// No free-trial path for extensions.
...pricing.tiers.map((tier) => Card(
child: ListTile(
title: Text(tier.label),
trailing: Text(
_formatPrice(tier.price),
style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
),
onTap: () {
Navigator.of(context).pop();
if (isExtension) {
_requestExtension(
ref,
sessionId: extensionSessionId!,
durationMinutes: tier.durationMinutes,
price: tier.price,
);
} else {
_startPairing(
ref,
durationMinutes: tier.durationMinutes,
price: tier.price,
);
}
},
),
)),
child: ListTile(
title: Text(tier.label),
trailing: Text(
formatRupiah(tier.price),
style: const TextStyle(fontWeight: FontWeight.bold, fontSize: 16),
),
onTap: () {
Navigator.of(context).pop();
ref.read(sessionClosureProvider.notifier).requestExtension(
extensionSessionId,
durationMinutes: tier.durationMinutes,
price: tier.price,
);
},
),
)),
],
),
);
@@ -122,21 +81,4 @@ class PricingBottomSheet extends ConsumerWidget {
),
);
}
void _startPairing(WidgetRef ref, {bool isFreeTrial = false, int? durationMinutes, int? price}) {
ref.read(pairingProvider.notifier).requestPairingWithTier(
durationMinutes: durationMinutes,
price: price,
isFreeTrial: isFreeTrial,
topicSensitivity: topicSensitivity ?? TopicSensitivity.regular,
);
}
void _requestExtension(WidgetRef ref, {required String sessionId, required int durationMinutes, required int price}) {
ref.read(sessionClosureProvider.notifier).requestExtension(
sessionId,
durationMinutes: durationMinutes,
price: price,
);
}
}

70
client_app/lib/features/chat/widgets/targeted_waiting_overlay.dart Normal file
View File

@@ -0,0 +1,70 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/pairing/pairing_notifier.dart';
/// Full-screen modal overlay shown above the searching screen during the 20s
/// targeted-mitra wait window. The overlay reads its state directly from the
/// [PairingTargetedWaitingData] passed in by the parent — the local countdown
/// ticks are owned by the pairing notifier so the overlay just renders.
///
/// "Batalkan" calls `pairingNotifier.cancelSearch()` which posts to
/// `/api/client/chat/chat-requests/cancel` and transitions state to
/// `PairingCancelledData`. The parent screen listens for that and pops home.
class TargetedWaitingOverlay extends ConsumerWidget {
final PairingTargetedWaitingData waiting;
const TargetedWaitingOverlay({super.key, required this.waiting});
@override
Widget build(BuildContext context, WidgetRef ref) {
return Container(
// Slight scrim so the underlying searching UI is still visible but the
// overlay clearly owns the foreground.
color: Colors.black.withValues(alpha: 0.55),
child: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 32),
child: Card(
elevation: 6,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
child: Padding(
padding: const EdgeInsets.fromLTRB(24, 24, 24, 16),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const SizedBox(
width: 56,
height: 56,
child: CircularProgressIndicator(strokeWidth: 3),
),
const SizedBox(height: 20),
Text(
'Menunggu konfirmasi ${waiting.mitraName}',
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
const SizedBox(height: 8),
Text(
'${waiting.secondsRemaining}d',
style: const TextStyle(fontSize: 28, fontWeight: FontWeight.w300),
),
const SizedBox(height: 8),
const Text(
'Bestie punya 20 detik untuk merespon. Kalau tidak ada respon, kami bantu cari bestie lain.',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 13, color: Colors.grey),
),
const SizedBox(height: 16),
TextButton(
onPressed: () => ref.read(pairingProvider.notifier).cancelSearch(),
child: const Text('Batalkan'),
),
],
),
),
),
),
),
);
}
}