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

Phase 5/6 polish: end-session flow, notif sound on API 33+, Xendit webview

Browse Source 
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:
Ramadhan Sjamsani
2026-05-28 21:45:46 +08:00
parent 2c95fd040d
commit 3a0cdf5c4e
28 changed files with 1424 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client_app/lib/features/payment/screens/method_pick_screen.dart
View File

@@ -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,

226
client_app/lib/features/payment/screens/waiting_payment_screen.dart
View File

@@ -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,
),
),
),
),
],
);
}
}

163
client_app/lib/features/payment/screens/xendit_checkout_screen.dart Normal file
View File

@@ -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),
);
}
}