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

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