Phase 5/6 polish: end-session flow, notif sound on API 33+, Xendit webview
Customer end-of-session (figma §6):
- PricingBottomSheet: ghost "cukup, akhiri sesi" CTA + dedup divider
- chat_screen._runEndSessionFlow chains ConfirmEndStep1 → ConfirmEndStep2
→ ClosingMessageSheet (or "lewati saja" → close + /home). The four
popup/sheet widgets already existed; this commit just wires them
- showModalBottomSheet: showDragHandle=false to suppress the Material 3
auto-injected handle that was stacking with our own pill
Notification sound on API 33+:
- Bump channel halobestie_chat_v1 → halobestie_chat_v2, created from
native Kotlin in MainActivity.kt with AudioAttributes contentType
CONTENT_TYPE_SONIFICATION. flutter_local_notifications' default of
CONTENT_TYPE_UNKNOWN was causing Android 13 to silently drop audio
focus while the notification still posted (isNoisy=true). Both apps
- Backend FCM payload channelId updated to v2
- AndroidManifest meta-data: default_notification_icon + color → brand
silhouette tinted pink instead of generic Android bell. Both apps
Customer pairing reliability:
- pairing_notifier: applyPairedFromPush({sessionId, mitraName}) unsticks
searching screen when WS push failed and FCM/active-session-poll is
the first signal. Idempotent across PairingSearchingData,
PairingTargetedWaitingData, PairingErrorData (covers ALREADY_ACTIVE)
- notification_service: dispatches every FCM data payload to an
onDataMessage callback (foreground + tap + cold-start). main.dart
wires that to applyPairedFromPush on type=='paired'. Foreground
'paired' no longer renders a local banner — screen self-advances
- main.dart activeSession listener also calls applyPairedFromPush when
a session appears server-side while pairing is in a waiting state.
Covers stale ALREADY_ACTIVE recovery without a full page refresh
Auth refresh token race:
- auth_notifier._refreshFromStorage shares a single in-flight Future
across all callers (Auth.build + 401-retry path). Backend rotates
refresh tokens, so concurrent callers using the same stored token
would race → loser 401s → catch wipes flutter_secure_storage → user
appears logged out after kill+reopen
Polish:
- method_pick_screen: resizeToAvoidBottomInset=false — prevents the
one-frame overflow when entering with the previous screen's keyboard
still animating out
- bestie_history: BestieHistoryItem now carries `status` (backend
already returns it). Removed _rawHistoryProvider that fetched the
same endpoint just to read status; the two providers could go out
of sync mid-rebuild and throw RangeError(length) on indexing
Xendit Stage 8 (carried from WIP):
- xendit_checkout_screen: embedded webview hosting Xendit's invoice
page (intercepts halobestie:// deeplink + return-page URLs for
deterministic pop)
- waiting_payment_screen: auto-pushes the webview when the backend
payload includes xendit_invoice_url; spinner card + "Buka ulang
halaman pembayaran" CTA for the QR-fallback path
- pubspec: webview_flutter ^4.13.0
Maestro infra:
- subflows/onboarding_returning_user: drop the "Mulai" carousel wait
(splash auto-advances since 2026-05-26); tap phone-field hint
instead of point; drop hideKeyboard (sends BACK → /home when the
IME isn't actually up)
- New flow ts-customer-06-01-end_session_via_timeup_sheet: drives
the full path to the chat-expired banner. Last step blocked by a
Maestro+Flutter gesture quirk on the perpanjang ElevatedButton
(raw `adb input tap` works at the same coords). Documented in
memory; deeplink fixture or manual verify recommended
- ChatExpiredBanner button wrapped with Semantics(identifier:
'chat_extend_button', button: true, onTap: …) — good hygiene for
future tests even though it doesn't fix the dadb tap issue
.dev/: tracked wsl_emulator_bridge.ps1 + wsl_tcp_relay.py for
Maestro-on-WSL setup (Windows-side netsh portproxy + WSL-side
loopback relays). Both referenced from existing CLAUDE.md notes.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -10,6 +10,9 @@ import '../../../core/theme/halo_tokens.dart';
|
||||
import '../../../core/theme/widgets/halo_snackbar.dart';
|
||||
import '../widgets/bestie_unavailable_dialog.dart';
|
||||
import '../widgets/chat_expired_banner.dart';
|
||||
import '../widgets/closing_message_sheet.dart';
|
||||
import '../widgets/confirm_end_step1.dart';
|
||||
import '../widgets/confirm_end_step2.dart';
|
||||
import '../widgets/pricing_bottom_sheet.dart';
|
||||
|
||||
/// S10 Chat Room — strict Figma implementation (Phase 4, 2026-05-12).
|
||||
@@ -509,7 +512,14 @@ class _TimerBanner extends ConsumerWidget {
|
||||
return _BannerKind.none;
|
||||
}));
|
||||
void onExtend() {
|
||||
PricingBottomSheet.showForExtension(context, sessionId: sessionId);
|
||||
PricingBottomSheet.showForExtension(
|
||||
context,
|
||||
sessionId: sessionId,
|
||||
// Figma 28→29→30→31: time-up sheet → confirm popup 1 → confirm popup
|
||||
// 2 → closing-message sheet (or skip → home). The sheet pops itself
|
||||
// before this fires, so the first dialog stacks on the chat route.
|
||||
onEndSession: () => _runEndSessionFlow(context, ref, sessionId),
|
||||
);
|
||||
}
|
||||
switch (kind) {
|
||||
case _BannerKind.lowTime:
|
||||
@@ -522,6 +532,44 @@ class _TimerBanner extends ConsumerWidget {
|
||||
}
|
||||
}
|
||||
|
||||
// Orchestrates the two-step confirm popup chain that follows the time-up
|
||||
// sheet's "cukup, akhiri sesi" CTA. ConfirmEndStep1/2 already pop themselves
|
||||
// before invoking the action callback (see HaloPopup), so we can chain
|
||||
// without manual Navigator.pop calls. The skip path closes the session via
|
||||
// the closure notifier and routes home; the "tulis pesan" path delegates to
|
||||
// the ClosingMessageSheet which calls closeSession itself in its onCompleted.
|
||||
Future<void> _runEndSessionFlow(
|
||||
BuildContext context,
|
||||
WidgetRef ref,
|
||||
String sessionId,
|
||||
) async {
|
||||
await ConfirmEndStep1.show(
|
||||
context,
|
||||
onConfirm: () async {
|
||||
if (!context.mounted) return;
|
||||
await ConfirmEndStep2.show(
|
||||
context,
|
||||
onWriteMessage: () {
|
||||
if (!context.mounted) return;
|
||||
ClosingMessageSheet.show(
|
||||
context,
|
||||
sessionId: sessionId,
|
||||
onCompleted: () {
|
||||
if (context.mounted) context.go('/home');
|
||||
},
|
||||
);
|
||||
},
|
||||
onSkip: () async {
|
||||
await ref
|
||||
.read(sessionClosureProvider.notifier)
|
||||
.closeSession(sessionId);
|
||||
if (context.mounted) context.go('/home');
|
||||
},
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
// ─── Header (back · orb · name+status · timer pill) + progress bar ──────────
|
||||
|
||||
class _ChatHeader extends ConsumerStatefulWidget {
|
||||
|
||||
@@ -57,22 +57,35 @@ class ChatExpiredBanner extends StatelessWidget {
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
ElevatedButton(
|
||||
onPressed: onExtend,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: Colors.white,
|
||||
foregroundColor: HaloTokens.brand,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(999)),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
||||
minimumSize: const Size(0, 32),
|
||||
elevation: 0,
|
||||
textStyle: const TextStyle(
|
||||
fontFamily: HaloTokens.fontBody,
|
||||
fontSize: 11.5,
|
||||
fontWeight: FontWeight.w700,
|
||||
// Semantics wrapper exposes the button via Android's resource-id so
|
||||
// maestro can find it via `id:` selector AND triggers onExtend
|
||||
// directly on a11y CLICK action (instead of synthesized coord-tap
|
||||
// which doesn't reliably fire this ElevatedButton's onPressed —
|
||||
// confirmed: raw `adb input tap` works, maestro's tap does not).
|
||||
// `onTap: onExtend` makes the Semantics node itself clickable so
|
||||
// Android's UiAutomator routes node.performAction(ACTION_CLICK)
|
||||
// → onExtend without needing the child button's gesture detector.
|
||||
Semantics(
|
||||
identifier: 'chat_extend_button',
|
||||
button: true,
|
||||
onTap: onExtend,
|
||||
child: ElevatedButton(
|
||||
onPressed: onExtend,
|
||||
style: ElevatedButton.styleFrom(
|
||||
backgroundColor: Colors.white,
|
||||
foregroundColor: HaloTokens.brand,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(999)),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
||||
minimumSize: const Size(0, 32),
|
||||
elevation: 0,
|
||||
textStyle: const TextStyle(
|
||||
fontFamily: HaloTokens.fontBody,
|
||||
fontSize: 11.5,
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
child: const Text('perpanjang'),
|
||||
),
|
||||
child: const Text('perpanjang'),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
@@ -21,21 +21,42 @@ class PricingBottomSheet extends ConsumerStatefulWidget {
|
||||
/// Required — the in-progress chat session id this extension targets.
|
||||
final String extensionSessionId;
|
||||
|
||||
const PricingBottomSheet({super.key, required this.extensionSessionId});
|
||||
/// Optional — fired when the customer chooses the "cukup, akhiri sesi"
|
||||
/// ghost CTA. The sheet pops itself before invoking the callback so the
|
||||
/// downstream confirm-end popup chain can stack on a clean route.
|
||||
final VoidCallback? onEndSession;
|
||||
|
||||
const PricingBottomSheet({
|
||||
super.key,
|
||||
required this.extensionSessionId,
|
||||
this.onEndSession,
|
||||
});
|
||||
|
||||
/// Show for session extension (from chat screen).
|
||||
static Future<void> showForExtension(BuildContext context, {required String sessionId}) {
|
||||
static Future<void> showForExtension(
|
||||
BuildContext context, {
|
||||
required String sessionId,
|
||||
VoidCallback? onEndSession,
|
||||
}) {
|
||||
return showModalBottomSheet(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
backgroundColor: HaloTokens.surface,
|
||||
// Material 3 auto-injects a drag-handle widget above the sheet when
|
||||
// the theme has one configured. We render our own pill inside
|
||||
// `_Body` to control its exact tint/size — explicitly disable the
|
||||
// auto one so the user doesn't see two stacked horizontal lines.
|
||||
showDragHandle: false,
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(24),
|
||||
topRight: Radius.circular(24),
|
||||
),
|
||||
),
|
||||
builder: (_) => PricingBottomSheet(extensionSessionId: sessionId),
|
||||
builder: (_) => PricingBottomSheet(
|
||||
extensionSessionId: sessionId,
|
||||
onEndSession: onEndSession,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -72,6 +93,11 @@ class _PricingBottomSheetState extends ConsumerState<PricingBottomSheet> {
|
||||
);
|
||||
}
|
||||
|
||||
void _onEndSession() {
|
||||
Navigator.of(context).pop();
|
||||
widget.onEndSession?.call();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final pricingAsync = ref.watch(chatPricingProvider);
|
||||
@@ -105,6 +131,7 @@ class _PricingBottomSheetState extends ConsumerState<PricingBottomSheet> {
|
||||
}),
|
||||
onTierTap: _onTierTap,
|
||||
onConfirm: _onConfirm,
|
||||
onEndSession: widget.onEndSession != null ? _onEndSession : null,
|
||||
),
|
||||
),
|
||||
);
|
||||
@@ -122,6 +149,7 @@ class _Body extends StatelessWidget {
|
||||
final ValueChanged<PaymentMode> onModeChanged;
|
||||
final ValueChanged<PriceTier> onTierTap;
|
||||
final ValueChanged<PriceTier> onConfirm;
|
||||
final VoidCallback? onEndSession;
|
||||
|
||||
const _Body({
|
||||
required this.pricing,
|
||||
@@ -132,6 +160,7 @@ class _Body extends StatelessWidget {
|
||||
required this.onModeChanged,
|
||||
required this.onTierTap,
|
||||
required this.onConfirm,
|
||||
required this.onEndSession,
|
||||
});
|
||||
|
||||
@override
|
||||
@@ -206,21 +235,35 @@ class _Body extends StatelessWidget {
|
||||
},
|
||||
),
|
||||
),
|
||||
Container(
|
||||
Padding(
|
||||
// No top border here — the drag handle is the only top "divider"
|
||||
// the figma shows. A second border above the action bar reads as a
|
||||
// duplicate line stacked under the list separator visuals.
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
HaloSpacing.s24,
|
||||
HaloSpacing.s8,
|
||||
HaloSpacing.s24,
|
||||
HaloSpacing.s12,
|
||||
HaloSpacing.s24,
|
||||
HaloSpacing.s16,
|
||||
),
|
||||
decoration: const BoxDecoration(
|
||||
border: Border(top: BorderSide(color: HaloTokens.border)),
|
||||
),
|
||||
child: HaloButton(
|
||||
label: ctaLabel,
|
||||
size: HaloButtonSize.lg,
|
||||
fullWidth: true,
|
||||
onPressed: hasSelection ? () => onConfirm(selectedTier) : null,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
HaloButton(
|
||||
label: ctaLabel,
|
||||
size: HaloButtonSize.lg,
|
||||
fullWidth: true,
|
||||
onPressed: hasSelection ? () => onConfirm(selectedTier) : null,
|
||||
),
|
||||
if (onEndSession != null) ...[
|
||||
const SizedBox(height: HaloSpacing.s8),
|
||||
HaloButton(
|
||||
label: 'cukup, akhiri sesi',
|
||||
variant: HaloButtonVariant.ghost,
|
||||
fullWidth: true,
|
||||
onPressed: onEndSession,
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
|
||||
@@ -10,6 +10,10 @@ class BestieHistoryItem {
|
||||
final List<String> topics;
|
||||
final int sessionsCount;
|
||||
final bool mitraIsOnline;
|
||||
// Raw session status — needed by the picker screen to distinguish the
|
||||
// closing-row branch (one-time grace path into the goodbye composer) from
|
||||
// a regular re-pair tap.
|
||||
final String? status;
|
||||
|
||||
const BestieHistoryItem({
|
||||
required this.sessionId,
|
||||
@@ -19,6 +23,7 @@ class BestieHistoryItem {
|
||||
required this.topics,
|
||||
required this.sessionsCount,
|
||||
required this.mitraIsOnline,
|
||||
required this.status,
|
||||
});
|
||||
|
||||
factory BestieHistoryItem.fromJson(Map<String, dynamic> json) {
|
||||
@@ -38,6 +43,7 @@ class BestieHistoryItem {
|
||||
_ => 1,
|
||||
},
|
||||
mitraIsOnline: json['mitra_is_online'] as bool? ?? false,
|
||||
status: json['status'] as String?,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
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';
|
||||
import '../../../core/theme/halo_tokens.dart';
|
||||
import '../../../core/theme/widgets/widgets.dart';
|
||||
@@ -36,7 +35,6 @@ class BestieHistoryListScreen extends ConsumerWidget {
|
||||
@override
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
final historyAsync = ref.watch(bestieHistoryProvider);
|
||||
final rawAsync = ref.watch(_rawHistoryProvider);
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: HaloTokens.bg,
|
||||
@@ -81,7 +79,6 @@ class BestieHistoryListScreen extends ConsumerWidget {
|
||||
return RefreshIndicator(
|
||||
onRefresh: () async {
|
||||
ref.invalidate(bestieHistoryProvider);
|
||||
ref.invalidate(_rawHistoryProvider);
|
||||
await ref.read(bestieHistoryProvider.future);
|
||||
},
|
||||
child: ListView.separated(
|
||||
@@ -110,8 +107,7 @@ class BestieHistoryListScreen extends ConsumerWidget {
|
||||
);
|
||||
}
|
||||
final item = items[index - 1];
|
||||
final raw = rawAsync.valueOrNull?[index - 1];
|
||||
final isClosing = raw?['status'] == SessionStatus.closing;
|
||||
final isClosing = item.status == SessionStatus.closing;
|
||||
return _BestieRow(
|
||||
item: item,
|
||||
isClosing: isClosing,
|
||||
@@ -157,16 +153,6 @@ class BestieHistoryListScreen extends ConsumerWidget {
|
||||
}
|
||||
}
|
||||
|
||||
/// Raw history payload — used to read fields the v4 `BestieHistoryItem`
|
||||
/// model doesn't surface (currently `status`, for the closing-row branch).
|
||||
final _rawHistoryProvider =
|
||||
FutureProvider<List<Map<String, dynamic>>>((ref) async {
|
||||
final api = ref.read(apiClientProvider);
|
||||
final response = await api.get('/api/client/chat/history');
|
||||
return ((response['data']['items'] as List?) ?? const [])
|
||||
.cast<Map<String, dynamic>>();
|
||||
});
|
||||
|
||||
class _BestieRow extends StatelessWidget {
|
||||
final BestieHistoryItem item;
|
||||
final bool isClosing;
|
||||
|
||||
@@ -19,6 +19,11 @@ class MethodPickScreen extends ConsumerWidget {
|
||||
Widget build(BuildContext context, WidgetRef ref) {
|
||||
return Scaffold(
|
||||
backgroundColor: HaloTokens.bg,
|
||||
// No text inputs on this screen — but the previous screen
|
||||
// (display_name) leaves the soft keyboard up for a frame or two after
|
||||
// navigation. The default resize behavior shrinks the body during
|
||||
// that window and triggers a brief overflow on the two-card column.
|
||||
resizeToAvoidBottomInset: false,
|
||||
appBar: AppBar(
|
||||
backgroundColor: HaloTokens.bg,
|
||||
elevation: 0,
|
||||
|
||||
@@ -4,11 +4,11 @@ import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:go_router/go_router.dart';
|
||||
import 'package:qr_flutter/qr_flutter.dart';
|
||||
import 'package:url_launcher/url_launcher.dart';
|
||||
import '../../../core/api/api_client_provider.dart';
|
||||
import '../../../core/constants.dart';
|
||||
import '../../../core/theme/halo_tokens.dart';
|
||||
import '../state/payment_draft_provider.dart';
|
||||
import 'xendit_checkout_screen.dart';
|
||||
|
||||
/// "Waiting payment" — placeholder QR + 20-minute countdown header. Polls the
|
||||
/// backend every 3 seconds for status changes. On `confirmed` the payment is
|
||||
@@ -34,10 +34,17 @@ class _WaitingPaymentScreenState extends ConsumerState<WaitingPaymentScreen>
|
||||
DateTime? _expiresAt;
|
||||
int _amount = 0;
|
||||
String? _qrPayload;
|
||||
// Phase 5 (Xendit on): when the backend's payment session payload includes
|
||||
// `xendit_invoice_url` (or legacy `invoice_url`), we host it inside the app
|
||||
// via [XenditCheckoutScreen] instead of rendering the QR mock. The QR path
|
||||
// still applies when XENDIT_ENABLED=false (dev/Maestro).
|
||||
String? _invoiceUrl;
|
||||
bool _initialLoading = true;
|
||||
bool _terminal = false;
|
||||
String? _error;
|
||||
bool _invoiceUrlLaunched = false; // Phase 5: only auto-launch the Custom Tab once
|
||||
// Auto-push the embedded WebView once on first load. The "Buka ulang
|
||||
// halaman pembayaran" button can re-push manually after that.
|
||||
bool _invoiceUrlLaunched = false;
|
||||
|
||||
Duration get _remaining {
|
||||
final exp = _expiresAt;
|
||||
@@ -76,37 +83,49 @@ class _WaitingPaymentScreenState extends ConsumerState<WaitingPaymentScreen>
|
||||
if (!mounted || session == null) return;
|
||||
final expiresAtRaw = session['expires_at'] as String?;
|
||||
final expiresAt = expiresAtRaw != null ? DateTime.tryParse(expiresAtRaw) : null;
|
||||
final invoiceUrl =
|
||||
(session['xendit_invoice_url'] as String?) ?? (session['invoice_url'] as String?);
|
||||
setState(() {
|
||||
_amount = (session['amount'] as int?) ?? 0;
|
||||
_expiresAt = expiresAt;
|
||||
_qrPayload = (session['qr_string'] as String?) ?? widget.paymentId;
|
||||
_invoiceUrl = (invoiceUrl != null && invoiceUrl.isNotEmpty) ? invoiceUrl : null;
|
||||
_initialLoading = false;
|
||||
});
|
||||
// Phase 5: when Xendit is on, the backend returns an `xendit_invoice_url`
|
||||
// (Xendit's hosted checkout). Open it in a Custom Tab (Android) /
|
||||
// SFSafariViewController (iOS) so the customer stays inside the app's
|
||||
// browser context. Fire-and-forget — polling continues regardless.
|
||||
// When Xendit is off (dev/Maestro), invoice_url is null and the QR fallback below is used.
|
||||
await _maybeLaunchInvoiceUrl(session);
|
||||
// Phase 5: when Xendit is on, host the invoice page inside the app via
|
||||
// an embedded WebView (XenditCheckoutScreen). Auto-push once on first
|
||||
// load; the "Buka ulang halaman pembayaran" button re-pushes manually if
|
||||
// the customer accidentally closed it. When Xendit is off (dev/Maestro),
|
||||
// _invoiceUrl is null and the QR fallback is rendered instead.
|
||||
_maybeOpenCheckoutScreen();
|
||||
_maybeHandleStatus(session);
|
||||
_startTicker();
|
||||
_resumePolling();
|
||||
}
|
||||
|
||||
Future<void> _maybeLaunchInvoiceUrl(Map<String, dynamic> session) async {
|
||||
if (_invoiceUrlLaunched) return;
|
||||
final url = (session['xendit_invoice_url'] as String?) ?? (session['invoice_url'] as String?);
|
||||
if (url == null || url.isEmpty) return;
|
||||
/// Opens the embedded Xendit WebView. Auto-called once on first load when
|
||||
/// `_invoiceUrl` is non-null; also wired to the "Buka ulang halaman
|
||||
/// pembayaran" button (which forces a re-push regardless of the flag).
|
||||
Future<void> _maybeOpenCheckoutScreen({bool force = false}) async {
|
||||
final url = _invoiceUrl;
|
||||
if (url == null) return;
|
||||
if (!force && _invoiceUrlLaunched) return;
|
||||
_invoiceUrlLaunched = true;
|
||||
try {
|
||||
await launchUrl(
|
||||
Uri.parse(url),
|
||||
mode: LaunchMode.inAppBrowserView, // Custom Tab on Android, SFVC on iOS
|
||||
);
|
||||
} catch (e) {
|
||||
// Silent — polling will eventually resolve to expired if the customer can't pay.
|
||||
// Don't surface an error toast; the user might have a non-Custom-Tab-capable env
|
||||
// and url_launcher falls back to the system browser automatically.
|
||||
if (!mounted) return;
|
||||
final result = await Navigator.of(context).push<String>(
|
||||
MaterialPageRoute(
|
||||
builder: (_) => XenditCheckoutScreen(
|
||||
invoiceUrl: url,
|
||||
paymentId: widget.paymentId,
|
||||
),
|
||||
),
|
||||
);
|
||||
// Pop result is mostly informational — the polling loop is still the
|
||||
// source of truth for terminal status. We just trigger an immediate poll
|
||||
// so the user doesn't have to wait for the next 3s tick.
|
||||
if (!mounted) return;
|
||||
if (result == 'success' || result == 'failure' || result == 'deeplink') {
|
||||
_pollOnce();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -261,52 +280,9 @@ class _WaitingPaymentScreenState extends ConsumerState<WaitingPaymentScreen>
|
||||
borderRadius: HaloRadius.xl,
|
||||
border: Border.all(color: HaloTokens.border),
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
const Text(
|
||||
'scan QRIS untuk bayar',
|
||||
style: TextStyle(fontSize: 12, color: HaloTokens.inkSoft),
|
||||
),
|
||||
const SizedBox(height: HaloSpacing.s12),
|
||||
Container(
|
||||
padding: const EdgeInsets.all(HaloSpacing.s12),
|
||||
decoration: BoxDecoration(
|
||||
color: HaloTokens.surface,
|
||||
borderRadius: HaloRadius.lg,
|
||||
border: Border.all(color: HaloTokens.border),
|
||||
),
|
||||
child: QrImageView(
|
||||
data: _qrPayload ?? widget.paymentId,
|
||||
size: 200,
|
||||
version: QrVersions.auto,
|
||||
backgroundColor: HaloTokens.surface,
|
||||
eyeStyle: const QrEyeStyle(
|
||||
eyeShape: QrEyeShape.square,
|
||||
color: HaloTokens.ink,
|
||||
),
|
||||
dataModuleStyle: const QrDataModuleStyle(
|
||||
dataModuleShape: QrDataModuleShape.square,
|
||||
color: HaloTokens.ink,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: HaloSpacing.s12),
|
||||
const Text(
|
||||
'jumlah',
|
||||
style: TextStyle(fontSize: 11.5, color: HaloTokens.inkSoft),
|
||||
),
|
||||
Text(
|
||||
formatRupiah(amount),
|
||||
style: const TextStyle(
|
||||
fontFamily: HaloTokens.fontDisplay,
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: HaloTokens.brandDark,
|
||||
letterSpacing: -0.5,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: _invoiceUrl != null
|
||||
? _buildInvoiceCard(amount)
|
||||
: _buildQrCard(amount),
|
||||
),
|
||||
const SizedBox(height: HaloSpacing.s12),
|
||||
Container(
|
||||
@@ -353,4 +329,120 @@ class _WaitingPaymentScreenState extends ConsumerState<WaitingPaymentScreen>
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// Mock QRIS card — used when `xendit_invoice_url` is absent
|
||||
/// (`XENDIT_ENABLED=false`, i.e. dev/Maestro).
|
||||
Widget _buildQrCard(int amount) {
|
||||
return Column(
|
||||
children: [
|
||||
const Text(
|
||||
'scan QRIS untuk bayar',
|
||||
style: TextStyle(fontSize: 12, color: HaloTokens.inkSoft),
|
||||
),
|
||||
const SizedBox(height: HaloSpacing.s12),
|
||||
Container(
|
||||
padding: const EdgeInsets.all(HaloSpacing.s12),
|
||||
decoration: BoxDecoration(
|
||||
color: HaloTokens.surface,
|
||||
borderRadius: HaloRadius.lg,
|
||||
border: Border.all(color: HaloTokens.border),
|
||||
),
|
||||
child: QrImageView(
|
||||
data: _qrPayload ?? widget.paymentId,
|
||||
size: 200,
|
||||
version: QrVersions.auto,
|
||||
backgroundColor: HaloTokens.surface,
|
||||
eyeStyle: const QrEyeStyle(
|
||||
eyeShape: QrEyeShape.square,
|
||||
color: HaloTokens.ink,
|
||||
),
|
||||
dataModuleStyle: const QrDataModuleStyle(
|
||||
dataModuleShape: QrDataModuleShape.square,
|
||||
color: HaloTokens.ink,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: HaloSpacing.s12),
|
||||
const Text(
|
||||
'jumlah',
|
||||
style: TextStyle(fontSize: 11.5, color: HaloTokens.inkSoft),
|
||||
),
|
||||
Text(
|
||||
formatRupiah(amount),
|
||||
style: const TextStyle(
|
||||
fontFamily: HaloTokens.fontDisplay,
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: HaloTokens.brandDark,
|
||||
letterSpacing: -0.5,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// Spinner + "Buka ulang halaman pembayaran" — used when the backend
|
||||
/// returned a Xendit invoice URL. The WebView screen is pushed
|
||||
/// automatically on first load; the button lets the customer reopen it
|
||||
/// if they accidentally closed it.
|
||||
Widget _buildInvoiceCard(int amount) {
|
||||
return Column(
|
||||
children: [
|
||||
const SizedBox(
|
||||
width: 56,
|
||||
height: 56,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 3,
|
||||
valueColor: AlwaysStoppedAnimation<Color>(HaloTokens.brand),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: HaloSpacing.s16),
|
||||
const Text(
|
||||
'Membuka halaman pembayaran…',
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
color: HaloTokens.inkSoft,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: HaloSpacing.s12),
|
||||
const Text(
|
||||
'jumlah',
|
||||
style: TextStyle(fontSize: 11.5, color: HaloTokens.inkSoft),
|
||||
),
|
||||
Text(
|
||||
formatRupiah(amount),
|
||||
style: const TextStyle(
|
||||
fontFamily: HaloTokens.fontDisplay,
|
||||
fontSize: 24,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: HaloTokens.brandDark,
|
||||
letterSpacing: -0.5,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: HaloSpacing.s16),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: OutlinedButton.icon(
|
||||
onPressed: () => _maybeOpenCheckoutScreen(force: true),
|
||||
icon: const Icon(Icons.open_in_browser, size: 18),
|
||||
label: const Text('Buka ulang halaman pembayaran'),
|
||||
style: OutlinedButton.styleFrom(
|
||||
foregroundColor: HaloTokens.brandDark,
|
||||
side: const BorderSide(color: HaloTokens.brandSoft),
|
||||
padding: const EdgeInsets.symmetric(vertical: HaloSpacing.s12),
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: HaloRadius.md,
|
||||
),
|
||||
textStyle: const TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,163 @@
|
||||
import 'package:flutter/foundation.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:webview_flutter/webview_flutter.dart';
|
||||
|
||||
import '../../../core/theme/halo_tokens.dart';
|
||||
|
||||
/// Embedded WebView host for the Xendit hosted checkout page.
|
||||
///
|
||||
/// Why embedded (vs `LaunchMode.inAppBrowserView` / Custom Tab):
|
||||
/// 1. We get full control over `NavigationDelegate`, so we can short-circuit
|
||||
/// the `halobestie://` deeplink + the backend's `/payment/return/*` HTML
|
||||
/// pages without round-tripping through the system browser intent
|
||||
/// handler.
|
||||
/// 2. Pop result tells the parent (`WaitingPaymentScreen`) to trigger an
|
||||
/// immediate poll instead of waiting up to 3s for the next tick.
|
||||
///
|
||||
/// Pop results:
|
||||
/// - `'success'` — URL matched `/payment/return/success`
|
||||
/// - `'failure'` — URL matched `/payment/return/failure`
|
||||
/// - `'deeplink'` — `halobestie://` scheme was followed (typically from the
|
||||
/// return page's button; the existing intent-filter in
|
||||
/// AndroidManifest would also handle it, but we intercept
|
||||
/// here so the WebView host pops cleanly)
|
||||
/// - `null` — user tapped the close (X) button manually
|
||||
///
|
||||
/// iOS NOTE: when shipping iOS, the dev backend at `http://192.168.88.247:3000`
|
||||
/// will be blocked by ATS. Add an `NSAppTransportSecurity > NSAllowsArbitraryLoads`
|
||||
/// (or per-domain `NSExceptionDomains`) entry to `ios/Runner/Info.plist` before
|
||||
/// the iOS dev build will let the WebView load any /payment/return/* page from
|
||||
/// the dev backend. Production (`api.halobestie.com`) is HTTPS so no exception
|
||||
/// is needed there. Not touching Info.plist now — Android-only session.
|
||||
class XenditCheckoutScreen extends ConsumerStatefulWidget {
|
||||
final String invoiceUrl;
|
||||
final String paymentId;
|
||||
|
||||
const XenditCheckoutScreen({
|
||||
super.key,
|
||||
required this.invoiceUrl,
|
||||
required this.paymentId,
|
||||
});
|
||||
|
||||
@override
|
||||
ConsumerState<XenditCheckoutScreen> createState() =>
|
||||
_XenditCheckoutScreenState();
|
||||
}
|
||||
|
||||
class _XenditCheckoutScreenState extends ConsumerState<XenditCheckoutScreen> {
|
||||
late final WebViewController _controller;
|
||||
int _progress = 0;
|
||||
|
||||
// Pre-compiled regexes for the backend's return pages. The route is defined
|
||||
// in backend `routes/payment.return.js` as `GET /payment/return/:status`
|
||||
// where :status is 'success' or 'failure'. Match anywhere in the URL so we
|
||||
// don't have to care about query strings, host, or scheme.
|
||||
static final RegExp _successPattern =
|
||||
RegExp(r'/payment/return/success(\?|$|/)');
|
||||
static final RegExp _failurePattern =
|
||||
RegExp(r'/payment/return/failure(\?|$|/)');
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
_controller = WebViewController()
|
||||
..setJavaScriptMode(JavaScriptMode.unrestricted)
|
||||
..setBackgroundColor(HaloTokens.surface)
|
||||
..setNavigationDelegate(
|
||||
NavigationDelegate(
|
||||
onProgress: (p) {
|
||||
if (!mounted) return;
|
||||
setState(() => _progress = p);
|
||||
},
|
||||
onNavigationRequest: _handleNavigationRequest,
|
||||
onWebResourceError: (error) {
|
||||
// Log only — Xendit pages routinely emit non-fatal resource errors
|
||||
// (favicons, third-party trackers blocked by adblock-style rules,
|
||||
// etc). Surfacing those as snackbars would be noisy.
|
||||
if (kDebugMode) {
|
||||
debugPrint(
|
||||
'[XenditCheckoutScreen] WebResourceError '
|
||||
'code=${error.errorCode} type=${error.errorType} '
|
||||
'desc=${error.description} url=${error.url}',
|
||||
);
|
||||
}
|
||||
},
|
||||
),
|
||||
)
|
||||
..loadRequest(Uri.parse(widget.invoiceUrl));
|
||||
}
|
||||
|
||||
NavigationDecision _handleNavigationRequest(NavigationRequest request) {
|
||||
final url = request.url;
|
||||
|
||||
// 1. Deeplink scheme — pop with informational result. The Android intent
|
||||
// filter would also catch this from a system-browser context, but
|
||||
// inside a WebView the engine surfaces it here as a navigation, and
|
||||
// if we don't block it the WebView shows an `ERR_UNKNOWN_URL_SCHEME`
|
||||
// error page.
|
||||
if (url.startsWith('halobestie://')) {
|
||||
_popWith('deeplink');
|
||||
return NavigationDecision.prevent;
|
||||
}
|
||||
|
||||
// 2. Backend's success return page.
|
||||
if (_successPattern.hasMatch(url)) {
|
||||
_popWith('success');
|
||||
return NavigationDecision.prevent;
|
||||
}
|
||||
|
||||
// 3. Backend's failure return page.
|
||||
if (_failurePattern.hasMatch(url)) {
|
||||
_popWith('failure');
|
||||
return NavigationDecision.prevent;
|
||||
}
|
||||
|
||||
return NavigationDecision.navigate;
|
||||
}
|
||||
|
||||
void _popWith(String result) {
|
||||
if (!mounted) return;
|
||||
Navigator.of(context).pop(result);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
backgroundColor: HaloTokens.surface,
|
||||
appBar: AppBar(
|
||||
backgroundColor: HaloTokens.surface,
|
||||
elevation: 0,
|
||||
leading: IconButton(
|
||||
icon: const Icon(Icons.close, color: HaloTokens.brandDark),
|
||||
tooltip: 'Tutup',
|
||||
onPressed: () => Navigator.of(context).pop(),
|
||||
),
|
||||
title: const Text(
|
||||
'Pembayaran Xendit',
|
||||
style: TextStyle(
|
||||
fontFamily: HaloTokens.fontDisplay,
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: HaloTokens.brandDark,
|
||||
),
|
||||
),
|
||||
centerTitle: true,
|
||||
bottom: _progress < 100
|
||||
? PreferredSize(
|
||||
preferredSize: const Size.fromHeight(2),
|
||||
child: LinearProgressIndicator(
|
||||
value: _progress / 100.0,
|
||||
minHeight: 2,
|
||||
backgroundColor: HaloTokens.brandSofter,
|
||||
valueColor: const AlwaysStoppedAnimation<Color>(
|
||||
HaloTokens.brand,
|
||||
),
|
||||
),
|
||||
)
|
||||
: null,
|
||||
),
|
||||
body: WebViewWidget(controller: _controller),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user