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

Phase 4 Stage 2: onboarding redesign (client_app + mitra_app)

Browse Source 
Verif Choice Sheet on display_name_screen drives the user into either
the verified or anonymous onboarding sub-flow. ESP screen (12 chips,
multi-select, info-only) + USP screen are shared between both branches;
selections persist through to chat_sessions.topics on session start.

OTP-blocked popup (HaloPopup) listens for the four real OTP-rate-limit
error codes (OTP_RATE_LIMIT_PHONE, OTP_RATE_LIMIT_IP, OTP_COOLDOWN,
OTP_ATTEMPTS_EXCEEDED) and drops the user onto the anonymous path with
ESP/USP state preserved.

Auth-providers gating replaces the --dart-define=ENABLE_SOCIAL_AUTH
build flag with server-driven discovery. authProvidersProvider preloads
GET /api/shared/auth-providers at cold start; welcome/register/
force-register screens render Google/Apple buttons only when the
backend reports enabled:true. Falls back to phone-OTP-only when both
providers are off. social_auth_enabled.dart deleted; client_app/CLAUDE.md
updated to reflect the new gating contract.

Mitra app: chat screen renders an ESP chip strip above the first message
bubble when chat_sessions.topics is non-empty.

Backend session.service.js getSessionById SELECTs cs.topics so the mitra
side can read the customer's selected topics.

Maestro flows 02_onboarding_verified.yaml + 03_onboarding_anon.yaml.

Deviation from plan: plan referenced OTP error code 'otp_retry_exhausted';
real codes are OTP_RATE_LIMIT_*/OTP_COOLDOWN/OTP_ATTEMPTS_EXCEEDED -
popup listens for all four. Plan said 'has_paid_first_session'; live
endpoint returns 'has_consulted_before' - used the live field.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
ramadhan sjamsani
2026-05-10 16:23:57 +08:00
parent 4680c36e34
commit 2645bcd0e5
25 changed files with 1282 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client_app/lib/features/onboarding/esp_state.dart Normal file
View File

@@ -0,0 +1,12 @@
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'esp_topic.dart';
/// Ephemeral selection from the ESP screen. Survives across the
/// onboarding flow (Verif Sheet → ESP → USP → OTP / Pilih cara). Cleared
/// when a chat session is created server-side.
final espSelectionProvider = StateProvider<Set<EspTopic>>((_) => <EspTopic>{});
/// Set to `true` when the user tapped "lewati" on the ESP screen. Distinct
/// from "user picked nothing then pressed Lanjut" — the backend wants to
/// know whether the empty set was intentional or a deliberate skip.
final espSkippedProvider = StateProvider<bool>((_) => false);

34
client_app/lib/features/onboarding/esp_topic.dart Normal file
View File

@@ -0,0 +1,34 @@
/// Twelve emotional-state-pick (ESP) topic chips shown on the onboarding ESP
/// screen. Multi-select, info-only — the picks are persisted on the chat
/// session at session start and surfaced to the mitra as a chip row above
/// the first message bubble. They do NOT affect matching, pricing, or routing.
///
/// `value` is the wire-format string sent to the backend
/// (`chat_sessions.topics TEXT[]`). Lowercase snake_case to keep it stable
/// across UI label tweaks.
enum EspTopic {
relationship('relationship', 'Hubungan'),
family('family', 'Keluarga'),
work('work', 'Pekerjaan'),
study('study', 'Sekolah / Kuliah'),
finance('finance', 'Keuangan'),
health('health', 'Kesehatan'),
friendship('friendship', 'Pertemanan'),
selfWorth('self_worth', 'Self-worth'),
anxiety('anxiety', 'Kecemasan'),
loneliness('loneliness', 'Kesepian'),
grief('grief', 'Kehilangan'),
identity('identity', 'Identitas');
final String value;
final String label;
const EspTopic(this.value, this.label);
static EspTopic? fromValue(String? v) {
if (v == null) return null;
for (final t in values) {
if (t.value == v) return t;
}
return null;
}
}

132
client_app/lib/features/onboarding/screens/esp_screen.dart Normal file
View File

@@ -0,0 +1,132 @@
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/theme/halo_tokens.dart';
import '../../../core/theme/widgets/widgets.dart';
import '../esp_state.dart';
import '../esp_topic.dart';
/// Onboarding step 1 — multi-select chip grid for ESP topics. Picks are
/// persisted on the chat session at session-start time and surfaced read-only
/// to the mitra. They do NOT affect matching, pricing, or routing.
///
/// Routed under both `/onboarding/verif/esp` and `/onboarding/anon/esp` —
/// the parent flow path determines the next destination after Lanjut.
class EspScreen extends ConsumerWidget {
/// `verified` ➞ ESP → USP → OTP.
/// `anonymous` ➞ ESP → USP → /payment/method-pick (Stage 3).
final bool verified;
const EspScreen({super.key, required this.verified});
@override
Widget build(BuildContext context, WidgetRef ref) {
final selected = ref.watch(espSelectionProvider);
return Scaffold(
appBar: AppBar(
title: const Padding(
padding: EdgeInsets.only(top: HaloSpacing.s4),
child: HaloStepDots(total: 4, current: 1),
),
centerTitle: true,
actions: [
TextButton(
onPressed: () => _onSkip(context, ref),
child: const Text('lewati'),
),
],
),
body: SafeArea(
top: false,
child: Padding(
padding: const EdgeInsets.fromLTRB(
HaloSpacing.s24,
HaloSpacing.s8,
HaloSpacing.s24,
HaloSpacing.s24,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Lagi mikirin apa?',
style: TextStyle(
fontFamily: HaloTokens.fontDisplay,
fontSize: 26,
height: 30 / 26,
fontWeight: FontWeight.w700,
color: HaloTokens.ink,
),
),
const SizedBox(height: HaloSpacing.s8),
const Text(
'Pilih topik yang nyangkut sama ceritamu. Nggak ada yang nyambung pun nggak apa-apa, bisa dilewati.',
style: TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 14,
height: 20 / 14,
color: HaloTokens.inkSoft,
),
),
const SizedBox(height: HaloSpacing.s24),
Expanded(
child: SingleChildScrollView(
child: Wrap(
spacing: HaloSpacing.s8,
runSpacing: HaloSpacing.s8,
children: EspTopic.values.map((topic) {
final isOn = selected.contains(topic);
return HaloChip(
label: topic.label,
selected: isOn,
onTap: () => _toggle(ref, topic),
);
}).toList(),
),
),
),
const SizedBox(height: HaloSpacing.s16),
HaloButton(
label: 'lanjut',
fullWidth: true,
onPressed: () => _onContinue(context, ref),
),
],
),
),
),
);
}
void _toggle(WidgetRef ref, EspTopic topic) {
final current = ref.read(espSelectionProvider);
final next = Set<EspTopic>.from(current);
if (!next.add(topic)) next.remove(topic);
ref.read(espSelectionProvider.notifier).state = next;
if (ref.read(espSkippedProvider)) {
ref.read(espSkippedProvider.notifier).state = false;
}
}
void _onSkip(BuildContext context, WidgetRef ref) {
ref.read(espSelectionProvider.notifier).state = <EspTopic>{};
ref.read(espSkippedProvider.notifier).state = true;
_goNext(context);
}
void _onContinue(BuildContext context, WidgetRef ref) {
if (ref.read(espSelectionProvider).isEmpty) {
ref.read(espSkippedProvider.notifier).state = true;
} else {
ref.read(espSkippedProvider.notifier).state = false;
}
_goNext(context);
}
void _goNext(BuildContext context) {
final next =
verified ? '/onboarding/verif/usp' : '/onboarding/anon/usp';
context.push(next);
}
}

177
client_app/lib/features/onboarding/screens/usp_screen.dart Normal file
View File

@@ -0,0 +1,177 @@
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import '../../../core/theme/halo_tokens.dart';
import '../../../core/theme/widgets/widgets.dart';
/// Onboarding step 2 — static value-prop ("USP") cards. No state; just a
/// terminal CTA that routes onward to the auth/payment fork.
class UspScreen extends StatelessWidget {
/// `verified` ➞ USP → OTP (`/auth/register`).
/// `anonymous` ➞ USP → `/payment/method-pick` (Stage 3 owns this route).
final bool verified;
const UspScreen({super.key, required this.verified});
static const _cards = [
_UspCard(
icon: Icons.bolt_outlined,
title: 'Langsung Curhat',
body: 'Nggak perlu janji, nggak perlu nunggu. Buka, ngobrol, plong.',
),
_UspCard(
icon: Icons.shield_outlined,
title: 'Tetap Anonim',
body: 'Identitasmu disembunyikan. Cerita apa adanya, tanpa khawatir.',
),
_UspCard(
icon: Icons.favorite_outline,
title: 'Bestie yang Relate',
body: 'Diisi orang yang udah dilatih buat dengerin, bukan ngehakimin.',
),
_UspCard(
icon: Icons.payments_outlined,
title: 'Bayar Sesuai Pakai',
body: 'Pilih durasi yang pas. Nggak ada langganan, nggak ada jebakan.',
),
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Padding(
padding: EdgeInsets.only(top: HaloSpacing.s4),
child: HaloStepDots(total: 4, current: 2),
),
centerTitle: true,
),
body: SafeArea(
top: false,
child: Padding(
padding: const EdgeInsets.fromLTRB(
HaloSpacing.s24,
HaloSpacing.s8,
HaloSpacing.s24,
HaloSpacing.s24,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Text(
'Sebelum mulai',
style: TextStyle(
fontFamily: HaloTokens.fontDisplay,
fontSize: 26,
height: 30 / 26,
fontWeight: FontWeight.w700,
color: HaloTokens.ink,
),
),
const SizedBox(height: HaloSpacing.s8),
const Text(
'Hal-hal kecil yang bikin Halo Bestie beda.',
style: TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 14,
height: 20 / 14,
color: HaloTokens.inkSoft,
),
),
const SizedBox(height: HaloSpacing.s24),
Expanded(
child: ListView.separated(
itemCount: _cards.length,
separatorBuilder: (_, __) =>
const SizedBox(height: HaloSpacing.s12),
itemBuilder: (_, i) => _cards[i],
),
),
const SizedBox(height: HaloSpacing.s16),
HaloButton(
label: 'aku ngerti, lanjut',
fullWidth: true,
onPressed: () => _onContinue(context),
),
],
),
),
),
);
}
void _onContinue(BuildContext context) {
if (verified) {
context.push('/auth/register');
} else {
// Stage 3 owns /payment/method-pick. Until then, route there as a
// placeholder; Maestro flow 03 stops at the route arrival.
context.push('/payment/method-pick');
}
}
}
class _UspCard extends StatelessWidget {
final IconData icon;
final String title;
final String body;
const _UspCard({
required this.icon,
required this.title,
required this.body,
});
@override
Widget build(BuildContext context) {
return Container(
padding: const EdgeInsets.all(HaloSpacing.s16),
decoration: BoxDecoration(
color: HaloTokens.surface,
borderRadius: HaloRadius.lg,
border: Border.all(color: HaloTokens.border),
),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
width: 40,
height: 40,
decoration: const BoxDecoration(
color: HaloTokens.brandSofter,
shape: BoxShape.circle,
),
alignment: Alignment.center,
child: Icon(icon, color: HaloTokens.brandDark, size: 20),
),
const SizedBox(width: HaloSpacing.s12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 16,
fontWeight: FontWeight.w600,
color: HaloTokens.ink,
),
),
const SizedBox(height: HaloSpacing.s4),
Text(
body,
style: const TextStyle(
fontFamily: HaloTokens.fontBody,
fontSize: 13,
height: 18 / 13,
color: HaloTokens.inkSoft,
),
),
],
),
),
],
),
);
}
}