EnakPoint & EnakCoin wallet, PIN, outlet, order, community, reward

- Wallet EnakPoint & EnakCoin: beranda, riwayat, saldo kedaluwarsa, kode bayar, tukar EnakCoin, transfer - PIN (buat, ganti, lupa), outlet, riwayat order, game spin - Halaman community, webview, coming soon, dan ikon menu beranda baru - Redesign Reward Saya: kartu tiket, filter chip, detail kode + QR - Hapus customer point loader, menu, dan checkout lama - Base URL ke enaklo-pos-api.altru.id Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-01 01:43:22 +07:00
parent 5954510b93
commit f5e3075205
253 changed files with 47212 additions and 17437 deletions
@@ -0,0 +1,203 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_spinkit/flutter_spinkit.dart';
+
+import '../../../application/auth/auth_bloc.dart';
+import '../../../application/pin/pin_change_form/pin_change_form_bloc.dart';
+import '../../../common/theme/theme.dart';
+import '../../../domain/wallet/wallet.dart';
+import '../../../injection.dart';
+import '../../components/toast/flushbar.dart';
+import '../../router/app_router.gr.dart';
+import '../wallet/wallet_ui.dart';
+import 'pin_rules.dart';
+import 'widgets/pin_code_field.dart';
+
+enum _Step { oldPin, newPin, confirm }
+
+/// Ganti PIN (§6.3).
+@RoutePage()
+class PinChangePage extends StatefulWidget implements AutoRouteWrapper {
+  const PinChangePage({super.key});
+
+  @override
+  State<PinChangePage> createState() => _PinChangePageState();
+
+  @override
+  Widget wrappedRoute(BuildContext context) =>
+      BlocProvider(create: (_) => getIt<PinChangeFormBloc>(), child: this);
+}
+
+class _PinChangePageState extends State<PinChangePage> {
+  final TextEditingController _controller = TextEditingController();
+
+  _Step _step = _Step.oldPin;
+  String _oldPin = '';
+  String _newPin = '';
+  String? _errorText;
+  bool _isLocked = false;
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    _oldPin = '';
+    _newPin = '';
+    super.dispose();
+  }
+
+  void _goTo(_Step step, {String? error}) {
+    setState(() {
+      _step = step;
+      _errorText = error;
+    });
+    _controller.clear();
+  }
+
+  void _onCompleted(String value) {
+    switch (_step) {
+      case _Step.oldPin:
+        _oldPin = value;
+        _goTo(_Step.newPin);
+      case _Step.newPin:
+        final error = value == _oldPin
+            ? 'PIN baru harus berbeda dari PIN lama.'
+            : validateNewPin(
+                value,
+                birthDate: context.read<AuthBloc>().state.user.birthDate,
+              );
+        if (error != null) {
+          _goTo(_Step.newPin, error: error);
+          return;
+        }
+        _newPin = value;
+        _goTo(_Step.confirm);
+      case _Step.confirm:
+        if (value != _newPin) {
+          _newPin = '';
+          _goTo(_Step.newPin, error: 'PIN tidak sama. Silakan ulangi.');
+          return;
+        }
+        context.read<PinChangeFormBloc>().add(
+          PinChangeFormEvent.submitted(
+            oldPin: _oldPin,
+            pin: _newPin,
+            confirmPin: value,
+          ),
+        );
+        _controller.clear();
+    }
+  }
+
+  void _onFailure(WalletFailure failure) {
+    _oldPin = '';
+    _newPin = '';
+    failure.maybeMap(
+      pinInvalid: (_) =>
+          _goTo(_Step.oldPin, error: walletFailureMessage(failure)),
+      pinLocked: (_) {
+        _goTo(_Step.oldPin, error: walletFailureMessage(failure));
+        setState(() => _isLocked = true);
+      },
+      pinNotSet: (_) =>
+          context.router.replace(PinSetupRoute(purpose: PinOtpPurpose.setup)),
+      rejected: (_) => _goTo(
+        _Step.newPin,
+        error: 'PIN baru tidak memenuhi syarat. Coba PIN lain.',
+      ),
+      orElse: () {
+        _goTo(_Step.oldPin);
+        AppFlushbar.showError(context, walletFailureMessage(failure));
+      },
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocConsumer<PinChangeFormBloc, PinChangeFormState>(
+      listenWhen: (p, c) =>
+          p.failureOrSuccessOption != c.failureOrSuccessOption,
+      listener: (context, state) {
+        state.failureOrSuccessOption.fold(
+          () {},
+          (either) => either.fold(_onFailure, (_) {
+            _oldPin = '';
+            _newPin = '';
+            AppFlushbar.showSuccess(context, 'PIN berhasil diganti');
+            context.router.maybePop();
+          }),
+        );
+      },
+      builder: (context, state) {
+        final title = switch (_step) {
+          _Step.oldPin => 'Masukkan PIN lama',
+          _Step.newPin => 'Masukkan PIN baru',
+          _Step.confirm => 'Konfirmasi PIN baru',
+        };
+
+        return Scaffold(
+          appBar: AppBar(title: const Text('Ganti PIN')),
+          body: Padding(
+            padding: const EdgeInsets.all(20),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  title,
+                  style: AppStyle.xl.copyWith(fontWeight: FontWeight.w700),
+                ),
+                const SizedBox(height: 8),
+                Text(
+                  'PIN 6 digit, bukan angka berulang, berurutan, atau tanggal '
+                  'lahir.',
+                  style: AppStyle.md.copyWith(color: AppColor.textSecondary),
+                ),
+                const SizedBox(height: 28),
+                PinCodeField(
+                  key: ValueKey(_step),
+                  controller: _controller,
+                  enabled: !state.isSubmitting && !_isLocked,
+                  hasError: _errorText != null,
+                  onCompleted: _onCompleted,
+                ),
+                const SizedBox(height: 16),
+                if (state.isSubmitting)
+                  const Center(
+                    child: SpinKitFadingCircle(
+                      color: AppColor.primary,
+                      size: 28,
+                    ),
+                  )
+                else if (_errorText != null)
+                  Text(
+                    _errorText!,
+                    style: AppStyle.md.copyWith(
+                      color: AppColor.error,
+                      fontWeight: FontWeight.w600,
+                    ),
+                  ),
+                const SizedBox(height: 8),
+                if (_step == _Step.oldPin)
+                  Align(
+                    alignment: Alignment.centerRight,
+                    child: TextButton(
+                      onPressed: () => context.router.replace(
+                        PinSetupRoute(purpose: PinOtpPurpose.reset),
+                      ),
+                      child: Text(
+                        'Lupa PIN',
+                        style: AppStyle.md.copyWith(
+                          color: AppColor.primary,
+                          fontWeight: FontWeight.w700,
+                        ),
+                      ),
+                    ),
+                  ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
@@ -0,0 +1,96 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_spinkit/flutter_spinkit.dart';
+
+import '../../../common/theme/theme.dart';
+import '../../../domain/wallet/wallet.dart';
+import '../../../injection.dart';
+import '../../components/toast/flushbar.dart';
+import '../../router/app_router.gr.dart';
+import '../wallet/wallet_ui.dart';
+
+/// Memastikan customer siap memasukkan PIN (§6.1) sebelum aksi yang butuh PIN.
+///
+/// - Belum punya PIN: buka alur buat PIN, lalu lanjut bila berhasil dibuat.
+/// - PIN terkunci: tampilkan jam buka kunci dan tawarkan "Lupa PIN".
+///
+/// Mengembalikan `true` bila aksi boleh dilanjutkan ke input PIN.
+Future<bool> ensurePinReady(BuildContext context) async {
+  showDialog<void>(
+    context: context,
+    barrierDismissible: false,
+    builder: (_) => const Center(
+      child: SpinKitFadingCircle(color: AppColor.white, size: 40),
+    ),
+  );
+
+  final result = await getIt<IPinRepository>().getStatus();
+
+  if (!context.mounted) return false;
+  Navigator.of(context, rootNavigator: true).pop();
+
+  final failure = result.fold((f) => f, (_) => null);
+  if (failure != null) {
+    AppFlushbar.showError(context, walletFailureMessage(failure));
+    return false;
+  }
+
+  final status = result.getOrElse(() => const PinStatus(hasPin: false));
+
+  if (!status.hasPin) {
+    final created = await context.router.push<bool>(
+      PinSetupRoute(purpose: PinOtpPurpose.setup),
+    );
+    return created == true;
+  }
+
+  if (status.isLocked) {
+    await showPinLockedDialog(context, status.lockedUntil!);
+    return false;
+  }
+
+  return true;
+}
+
+Future<void> showPinLockedDialog(
+  BuildContext context,
+  DateTime lockedUntil,
+) async {
+  final forgot = await showDialog<bool>(
+    context: context,
+    builder: (dialogContext) => AlertDialog(
+      backgroundColor: AppColor.white,
+      title: Text(
+        'PIN terkunci',
+        style: AppStyle.lg.copyWith(fontWeight: FontWeight.w700),
+      ),
+      content: Text(
+        'PIN terkunci sampai ${formatWibTime(lockedUntil)}.',
+        style: AppStyle.md,
+      ),
+      actions: [
+        TextButton(
+          onPressed: () => Navigator.of(dialogContext).pop(false),
+          child: Text(
+            'Tutup',
+            style: AppStyle.md.copyWith(color: AppColor.textSecondary),
+          ),
+        ),
+        TextButton(
+          onPressed: () => Navigator.of(dialogContext).pop(true),
+          child: Text(
+            'Lupa PIN',
+            style: AppStyle.md.copyWith(
+              color: AppColor.primary,
+              fontWeight: FontWeight.w700,
+            ),
+          ),
+        ),
+      ],
+    ),
+  );
+
+  if (forgot == true && context.mounted) {
+    context.router.push(PinSetupRoute(purpose: PinOtpPurpose.reset));
+  }
+}
@@ -0,0 +1,33 @@
+/// Validasi PIN baru di app sebelum dikirim (server juga memeriksa).
+/// Mengembalikan pesan error, atau `null` bila PIN boleh dipakai.
+String? validateNewPin(String pin, {String? birthDate}) {
+  if (!RegExp(r'^\d{6}$').hasMatch(pin)) return 'PIN harus 6 digit angka.';
+
+  final digits = pin.split('').map(int.parse).toList();
+
+  if (digits.every((d) => d == digits.first)) {
+    return 'PIN tidak boleh satu angka berulang.';
+  }
+
+  bool stepsBy(int step) {
+    for (var i = 1; i < digits.length; i++) {
+      if (digits[i] - digits[i - 1] != step) return false;
+    }
+    return true;
+  }
+
+  if (stepsBy(1) || stepsBy(-1)) {
+    return 'PIN tidak boleh angka berurutan.';
+  }
+
+  final birth = birthDate == null ? null : DateTime.tryParse(birthDate);
+  if (birth != null) {
+    String two(int v) => (v % 100).toString().padLeft(2, '0');
+    final dd = two(birth.day), mm = two(birth.month), yy = two(birth.year);
+    if (pin == '$dd$mm$yy' || pin == '$yy$mm$dd') {
+      return 'PIN tidak boleh tanggal lahir kamu.';
+    }
+  }
+
+  return null;
+}
@@ -0,0 +1,166 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:dartz/dartz.dart' hide State;
+import 'package:flutter/material.dart';
+import 'package:flutter_spinkit/flutter_spinkit.dart';
+
+import '../../../common/theme/theme.dart';
+import '../../../domain/wallet/wallet.dart';
+import '../../../injection.dart';
+import '../../components/button/button.dart';
+import '../../router/app_router.gr.dart';
+import '../wallet/wallet_ui.dart';
+
+/// Menu PIN di profil: buat, ganti, dan lupa PIN.
+@RoutePage()
+class PinSettingsPage extends StatefulWidget {
+  const PinSettingsPage({super.key});
+
+  @override
+  State<PinSettingsPage> createState() => _PinSettingsPageState();
+}
+
+class _PinSettingsPageState extends State<PinSettingsPage> {
+  late Future<Either<WalletFailure, PinStatus>> _status;
+
+  @override
+  void initState() {
+    super.initState();
+    _load();
+  }
+
+  void _load() {
+    setState(() => _status = getIt<IPinRepository>().getStatus());
+  }
+
+  Future<void> _open(PageRouteInfo route) async {
+    await context.router.push(route);
+    if (mounted) _load();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: AppColor.background,
+      appBar: AppBar(title: const Text('PIN')),
+      body: FutureBuilder<Either<WalletFailure, PinStatus>>(
+        future: _status,
+        builder: (context, snapshot) {
+          if (!snapshot.hasData) {
+            return const Center(
+              child: SpinKitFadingCircle(color: AppColor.primary, size: 32),
+            );
+          }
+
+          return snapshot.data!.fold(
+            (f) => Center(
+              child: Padding(
+                padding: const EdgeInsets.all(20),
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Text(walletFailureMessage(f), textAlign: TextAlign.center),
+                    const SizedBox(height: 16),
+                    AppOutlineButton(
+                      title: 'Coba lagi',
+                      width: 160,
+                      onPressed: _load,
+                    ),
+                  ],
+                ),
+              ),
+            ),
+            (status) => ListView(
+              children: [
+                Container(
+                  margin: const EdgeInsets.all(16),
+                  padding: const EdgeInsets.all(16),
+                  decoration: BoxDecoration(
+                    color: AppColor.white,
+                    borderRadius: BorderRadius.circular(AppValue.borderRadius),
+                  ),
+                  child: Text(
+                    'PIN 6 digit dipakai untuk membuat kode bayar, tukar '
+                    'EnakCoin, dan transfer. PIN berbeda dengan password '
+                    'login dan jangan diberitahukan kepada siapa pun.',
+                    style: AppStyle.md.copyWith(color: AppColor.textSecondary),
+                  ),
+                ),
+                if (status.isLocked)
+                  _buildNotice(
+                    'PIN terkunci sampai ${formatWibTime(status.lockedUntil!)}. '
+                    'Gunakan Lupa PIN untuk membukanya.',
+                  ),
+                if (status.transferBlockedUntil != null &&
+                    status.transferBlockedUntil!.isAfter(DateTime.now()))
+                  _buildNotice(
+                    'Transfer bisa dilakukan lagi pada '
+                    '${formatWibDateTime(status.transferBlockedUntil!)}.',
+                  ),
+                Container(
+                  color: AppColor.white,
+                  child: Column(
+                    children: status.hasPin
+                        ? [
+                            _buildTile(
+                              icon: Icons.lock_reset,
+                              title: 'Ganti PIN',
+                              onTap: () => _open(const PinChangeRoute()),
+                            ),
+                            const Divider(height: 1, indent: 60),
+                            _buildTile(
+                              icon: Icons.help_outline,
+                              title: 'Lupa PIN',
+                              onTap: () => _open(
+                                PinSetupRoute(purpose: PinOtpPurpose.reset),
+                              ),
+                            ),
+                          ]
+                        : [
+                            _buildTile(
+                              icon: Icons.lock_outline,
+                              title: 'Buat PIN',
+                              onTap: () => _open(
+                                PinSetupRoute(purpose: PinOtpPurpose.setup),
+                              ),
+                            ),
+                          ],
+                  ),
+                ),
+              ],
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget _buildNotice(String text) {
+    return Container(
+      margin: const EdgeInsets.fromLTRB(16, 0, 16, 16),
+      padding: const EdgeInsets.all(12),
+      decoration: BoxDecoration(
+        color: AppColor.warningWithOpacity(0.1),
+        borderRadius: BorderRadius.circular(AppValue.borderRadius),
+        border: Border.all(color: AppColor.warning),
+      ),
+      child: Text(text, style: AppStyle.md),
+    );
+  }
+
+  Widget _buildTile({
+    required IconData icon,
+    required String title,
+    required VoidCallback onTap,
+  }) {
+    return ListTile(
+      leading: Icon(icon, color: AppColor.textSecondary),
+      title: Text(title, style: AppStyle.md),
+      trailing: const Icon(
+        Icons.arrow_forward_ios,
+        size: 16,
+        color: AppColor.textSecondary,
+      ),
+      onTap: onTap,
+    );
+  }
+}
@@ -0,0 +1,335 @@
+import 'dart:async';
+
+import 'package:auto_route/auto_route.dart';
+import 'package:dartz/dartz.dart' hide State;
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:flutter_spinkit/flutter_spinkit.dart';
+
+import '../../../application/auth/auth_bloc.dart';
+import '../../../application/pin/pin_setup_form/pin_setup_form_bloc.dart';
+import '../../../common/theme/theme.dart';
+import '../../../domain/wallet/wallet.dart';
+import '../../../injection.dart';
+import '../../components/button/button.dart';
+import '../../components/toast/flushbar.dart';
+import '../wallet/wallet_ui.dart';
+import 'pin_rules.dart';
+import 'widgets/pin_code_field.dart';
+
+enum _Step { otp, pin, confirm, done }
+
+/// Buat PIN (§6.2) atau lupa PIN (§6.4). Pop dengan `true` bila berhasil.
+@RoutePage()
+class PinSetupPage extends StatefulWidget implements AutoRouteWrapper {
+  const PinSetupPage({super.key, required this.purpose});
+
+  final PinOtpPurpose purpose;
+
+  @override
+  State<PinSetupPage> createState() => _PinSetupPageState();
+
+  @override
+  Widget wrappedRoute(BuildContext context) => BlocProvider(
+    create: (_) =>
+        getIt<PinSetupFormBloc>()..add(PinSetupFormEvent.otpRequested(purpose)),
+    child: this,
+  );
+}
+
+class _PinSetupPageState extends State<PinSetupPage> {
+  final TextEditingController _otpController = TextEditingController();
+  final TextEditingController _pinController = TextEditingController();
+
+  _Step _step = _Step.otp;
+  String _otpCode = '';
+  String _pin = '';
+  String? _errorText;
+  Timer? _ticker;
+
+  bool get _isReset => widget.purpose == PinOtpPurpose.reset;
+
+  @override
+  void initState() {
+    super.initState();
+    _ticker = Timer.periodic(const Duration(seconds: 1), (_) {
+      if (mounted) setState(() {});
+    });
+  }
+
+  @override
+  void dispose() {
+    _ticker?.cancel();
+    _otpController.dispose();
+    _pinController.dispose();
+    _pin = '';
+    super.dispose();
+  }
+
+  void _goTo(_Step step, {String? error}) {
+    setState(() {
+      _step = step;
+      _errorText = error;
+    });
+    _pinController.clear();
+  }
+
+  void _onOtpCompleted(String code) {
+    _otpCode = code;
+    _goTo(_Step.pin);
+  }
+
+  void _onPinCompleted(String value) {
+    if (_step == _Step.pin) {
+      final error = validateNewPin(
+        value,
+        birthDate: context.read<AuthBloc>().state.user.birthDate,
+      );
+      if (error != null) {
+        _goTo(_Step.pin, error: error);
+        return;
+      }
+      _pin = value;
+      _goTo(_Step.confirm);
+      return;
+    }
+
+    if (value != _pin) {
+      _pin = '';
+      _goTo(_Step.pin, error: 'PIN tidak sama. Silakan ulangi.');
+      return;
+    }
+
+    context.read<PinSetupFormBloc>().add(
+      PinSetupFormEvent.submitted(
+        otpCode: _otpCode,
+        pin: _pin,
+        confirmPin: value,
+      ),
+    );
+    _pinController.clear();
+  }
+
+  void _onSubmitResult(Either<WalletFailure, Unit> either) {
+    either.fold(
+      (f) {
+        _pin = '';
+        f.maybeMap(
+          rejected: (_) {
+            _otpController.clear();
+            _goTo(
+              _Step.otp,
+              error:
+                  'Kode OTP salah atau sudah kedaluwarsa, atau PIN tidak '
+                  'memenuhi syarat. Silakan ulangi.',
+            );
+          },
+          orElse: () {
+            _goTo(_Step.pin);
+            AppFlushbar.showError(context, walletFailureMessage(f));
+          },
+        );
+      },
+      (_) {
+        _pin = '';
+        _goTo(_Step.done);
+      },
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocConsumer<PinSetupFormBloc, PinSetupFormState>(
+      listenWhen: (p, c) =>
+          p.failureOrSuccessOption != c.failureOrSuccessOption ||
+          p.otpFailureOption != c.otpFailureOption,
+      listener: (context, state) {
+        state.failureOrSuccessOption.fold(() {}, _onSubmitResult);
+        state.otpFailureOption.fold(() {}, (f) {
+          final isRateLimited = f.maybeMap(
+            tooManyRequests: (_) => true,
+            orElse: () => false,
+          );
+          if (!isRateLimited) {
+            AppFlushbar.showError(context, walletFailureMessage(f));
+          }
+        });
+      },
+      builder: (context, state) {
+        return PopScope(
+          canPop: _step != _Step.done,
+          onPopInvokedWithResult: (didPop, _) {
+            if (!didPop && _step == _Step.done) Navigator.of(context).pop(true);
+          },
+          child: Scaffold(
+            appBar: AppBar(title: Text(_isReset ? 'Lupa PIN' : 'Buat PIN')),
+            body: SafeArea(
+              child: Padding(
+                padding: const EdgeInsets.all(20),
+                child: _step == _Step.done ? _buildDone() : _buildForm(state),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+
+  Widget _buildForm(PinSetupFormState state) {
+    final isOtp = _step == _Step.otp;
+
+    final title = switch (_step) {
+      _Step.otp => 'Masukkan kode verifikasi',
+      _Step.pin => _isReset ? 'Buat PIN baru' : 'Buat PIN',
+      _Step.confirm => 'Konfirmasi PIN',
+      _Step.done => '',
+    };
+
+    final description = switch (_step) {
+      _Step.otp =>
+        'Kami mengirim kode 6 digit ke WhatsApp nomor kamu yang terdaftar.',
+      _Step.pin =>
+        'PIN 6 digit dipakai untuk membuat kode bayar, tukar EnakCoin, dan '
+            'transfer. PIN berbeda dengan password login.',
+      _Step.confirm => 'Masukkan kembali PIN yang sama.',
+      _Step.done => '',
+    };
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        _buildStepIndicator(),
+        const SizedBox(height: 20),
+        Text(title, style: AppStyle.xl.copyWith(fontWeight: FontWeight.w700)),
+        const SizedBox(height: 8),
+        Text(
+          description,
+          style: AppStyle.md.copyWith(color: AppColor.textSecondary),
+        ),
+        const SizedBox(height: 28),
+        if (isOtp && state.otp == null)
+          Center(
+            child: state.isRequestingOtp
+                ? const SpinKitFadingCircle(color: AppColor.primary, size: 32)
+                : AppOutlineButton(
+                    title: 'Kirim kode',
+                    onPressed: _canResend(state) ? _requestOtp : null,
+                  ),
+          )
+        else
+          PinCodeField(
+            key: ValueKey(_step),
+            controller: isOtp ? _otpController : _pinController,
+            obscure: !isOtp,
+            enabled: !state.isSubmitting,
+            hasError: _errorText != null,
+            onCompleted: isOtp ? _onOtpCompleted : _onPinCompleted,
+          ),
+        const SizedBox(height: 16),
+        if (state.isSubmitting)
+          const Center(
+            child: SpinKitFadingCircle(color: AppColor.primary, size: 28),
+          )
+        else if (_errorText != null)
+          Text(
+            _errorText!,
+            style: AppStyle.md.copyWith(
+              color: AppColor.error,
+              fontWeight: FontWeight.w600,
+            ),
+          ),
+        if (isOtp && state.otp != null) ...[
+          const SizedBox(height: 16),
+          _buildResend(state),
+        ],
+      ],
+    );
+  }
+
+  bool _canResend(PinSetupFormState state) =>
+      !state.isRequestingOtp &&
+      (state.resendAvailableAt == null ||
+          DateTime.now().isAfter(state.resendAvailableAt!));
+
+  void _requestOtp() {
+    _otpController.clear();
+    setState(() => _errorText = null);
+    context.read<PinSetupFormBloc>().add(
+      PinSetupFormEvent.otpRequested(widget.purpose),
+    );
+  }
+
+  Widget _buildResend(PinSetupFormState state) {
+    final availableAt = state.resendAvailableAt;
+    if (availableAt != null && DateTime.now().isBefore(availableAt)) {
+      return Center(
+        child: Text(
+          'Kirim ulang kode dalam '
+          '${formatCountdown(availableAt.difference(DateTime.now()))}',
+          style: AppStyle.sm.copyWith(color: AppColor.textSecondary),
+        ),
+      );
+    }
+
+    return Center(
+      child: TextButton(
+        onPressed: _canResend(state) ? _requestOtp : null,
+        child: Text(
+          state.isRequestingOtp ? 'Mengirim...' : 'Kirim ulang kode',
+          style: AppStyle.md.copyWith(
+            color: AppColor.success,
+            fontWeight: FontWeight.w600,
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _buildStepIndicator() {
+    final index = _Step.values.indexOf(_step);
+    return Row(
+      children: List.generate(3, (i) {
+        return Expanded(
+          child: Container(
+            height: 4,
+            margin: EdgeInsets.only(right: i == 2 ? 0 : 6),
+            decoration: BoxDecoration(
+              color: i <= index ? AppColor.primary : AppColor.border,
+              borderRadius: BorderRadius.circular(2),
+            ),
+          ),
+        );
+      }),
+    );
+  }
+
+  Widget _buildDone() {
+    return Column(
+      children: [
+        const Spacer(),
+        const Icon(Icons.verified_user, color: AppColor.success, size: 72),
+        const SizedBox(height: 16),
+        Text(
+          _isReset ? 'PIN berhasil direset' : 'PIN berhasil dibuat',
+          style: AppStyle.xl.copyWith(fontWeight: FontWeight.w700),
+          textAlign: TextAlign.center,
+        ),
+        const SizedBox(height: 8),
+        Text(
+          _isReset
+              ? 'Demi keamanan, transfer keluar ditahan selama 24 jam. '
+                    'Kode bayar dan tukar EnakCoin tetap bisa dipakai.'
+              : 'Gunakan PIN ini untuk membuat kode bayar, tukar EnakCoin, '
+                    'dan transfer. Jangan beritahu PIN kepada siapa pun.',
+          style: AppStyle.md.copyWith(color: AppColor.textSecondary),
+          textAlign: TextAlign.center,
+        ),
+        const Spacer(),
+        AppElevatedButton(
+          title: 'Selesai',
+          onPressed: () => Navigator.of(context).pop(true),
+        ),
+      ],
+    );
+  }
+}
@@ -0,0 +1,147 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import '../../../../common/theme/theme.dart';
+
+/// Input 6 digit dengan tampilan kotak. Nilainya tidak pernah disimpan di luar
+/// [controller]; pemanggil wajib mengosongkannya setelah dipakai.
+class PinCodeField extends StatefulWidget {
+  const PinCodeField({
+    super.key,
+    required this.controller,
+    this.onCompleted,
+    this.obscure = true,
+    this.hasError = false,
+    this.enabled = true,
+    this.autofocus = true,
+  });
+
+  final TextEditingController controller;
+  final ValueChanged<String>? onCompleted;
+  final bool obscure;
+  final bool hasError;
+  final bool enabled;
+  final bool autofocus;
+
+  static const int length = 6;
+
+  @override
+  State<PinCodeField> createState() => _PinCodeFieldState();
+}
+
+class _PinCodeFieldState extends State<PinCodeField> {
+  final FocusNode _focusNode = FocusNode();
+
+  @override
+  void initState() {
+    super.initState();
+    widget.controller.addListener(_onChanged);
+    _focusNode.addListener(() => setState(() {}));
+  }
+
+  @override
+  void didUpdateWidget(covariant PinCodeField oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.controller != widget.controller) {
+      oldWidget.controller.removeListener(_onChanged);
+      widget.controller.addListener(_onChanged);
+    }
+  }
+
+  @override
+  void dispose() {
+    widget.controller.removeListener(_onChanged);
+    _focusNode.dispose();
+    super.dispose();
+  }
+
+  void _onChanged() {
+    setState(() {});
+    final value = widget.controller.text;
+    if (value.length == PinCodeField.length) {
+      widget.onCompleted?.call(value);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final value = widget.controller.text;
+
+    return GestureDetector(
+      onTap: () => _focusNode.requestFocus(),
+      child: Stack(
+        children: [
+          // Field asli tak terlihat yang menerima input keyboard.
+          Opacity(
+            opacity: 0,
+            child: SizedBox(
+              height: 52,
+              child: TextField(
+                controller: widget.controller,
+                focusNode: _focusNode,
+                enabled: widget.enabled,
+                autofocus: widget.autofocus,
+                keyboardType: TextInputType.number,
+                maxLength: PinCodeField.length,
+                enableSuggestions: false,
+                autocorrect: false,
+                enableInteractiveSelection: false,
+                inputFormatters: [FilteringTextInputFormatter.digitsOnly],
+                decoration: const InputDecoration(counterText: ''),
+              ),
+            ),
+          ),
+          IgnorePointer(
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: List.generate(PinCodeField.length, (index) {
+                final filled = index < value.length;
+                final active =
+                    widget.enabled &&
+                    _focusNode.hasFocus &&
+                    index == value.length;
+
+                return Container(
+                  width: 44,
+                  height: 52,
+                  alignment: Alignment.center,
+                  decoration: BoxDecoration(
+                    color: widget.enabled
+                        ? AppColor.white
+                        : AppColor.backgroundGradient.first,
+                    borderRadius: BorderRadius.circular(10),
+                    border: Border.all(
+                      width: active || widget.hasError ? 2 : 1,
+                      color: widget.hasError
+                          ? AppColor.error
+                          : active
+                          ? AppColor.primary
+                          : AppColor.border,
+                    ),
+                  ),
+                  child: filled
+                      ? widget.obscure
+                            ? Container(
+                                width: 12,
+                                height: 12,
+                                decoration: const BoxDecoration(
+                                  color: AppColor.textPrimary,
+                                  shape: BoxShape.circle,
+                                ),
+                              )
+                            : Text(
+                                value[index],
+                                style: AppStyle.xl.copyWith(
+                                  fontWeight: FontWeight.w700,
+                                ),
+                              )
+                      : null,
+                );
+              }),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
@@ -0,0 +1,205 @@
+import 'package:auto_route/auto_route.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter_spinkit/flutter_spinkit.dart';
+
+import '../../../../common/theme/theme.dart';
+import '../../../../domain/wallet/wallet.dart';
+import '../../../router/app_router.gr.dart';
+import '../../wallet/wallet_ui.dart';
+import 'pin_code_field.dart';
+
+/// Mengirim PIN ke server. Kembalikan `null` bila sukses, atau failure-nya.
+typedef PinSubmitCallback = Future<WalletFailure?> Function(String pin);
+
+enum _PinSheetResult { success, failed, forgotPin, pinNotSet }
+
+/// Meminta PIN lalu menjalankan [onSubmit]. Error PIN (§6.5) ditangani di dalam
+/// sheet; failure lain menutup sheet dan ditampilkan oleh halaman pemanggil.
+/// Mengembalikan `true` bila [onSubmit] sukses.
+Future<bool> showPinSheet(
+  BuildContext context, {
+  required String title,
+  String? subtitle,
+  required PinSubmitCallback onSubmit,
+}) async {
+  final result = await showModalBottomSheet<_PinSheetResult>(
+    context: context,
+    isScrollControlled: true,
+    isDismissible: false,
+    backgroundColor: AppColor.white,
+    shape: const RoundedRectangleBorder(
+      borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
+    ),
+    builder: (_) =>
+        _PinSheet(title: title, subtitle: subtitle, onSubmit: onSubmit),
+  );
+
+  if (!context.mounted) return false;
+
+  switch (result) {
+    case _PinSheetResult.success:
+      return true;
+    case _PinSheetResult.forgotPin:
+      context.router.push(PinSetupRoute(purpose: PinOtpPurpose.reset));
+      return false;
+    case _PinSheetResult.pinNotSet:
+      context.router.push(PinSetupRoute(purpose: PinOtpPurpose.setup));
+      return false;
+    case _PinSheetResult.failed:
+    case null:
+      return false;
+  }
+}
+
+class _PinSheet extends StatefulWidget {
+  const _PinSheet({required this.title, this.subtitle, required this.onSubmit});
+
+  final String title;
+  final String? subtitle;
+  final PinSubmitCallback onSubmit;
+
+  @override
+  State<_PinSheet> createState() => _PinSheetState();
+}
+
+class _PinSheetState extends State<_PinSheet> {
+  final TextEditingController _controller = TextEditingController();
+
+  bool _isSubmitting = false;
+  String? _errorText;
+
+  /// PIN terkunci atau transfer ditahan: input tidak berguna lagi.
+  bool _isBlocked = false;
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  Future<void> _submit(String pin) async {
+    if (_isSubmitting || _isBlocked) return;
+    setState(() {
+      _isSubmitting = true;
+      _errorText = null;
+    });
+
+    final failure = await widget.onSubmit(pin);
+    if (!mounted) return;
+
+    // PIN tidak disimpan lebih lama dari yang diperlukan.
+    _controller.clear();
+
+    if (failure == null) {
+      Navigator.of(context).pop(_PinSheetResult.success);
+      return;
+    }
+
+    final handled = failure.maybeMap(
+      pinNotSet: (_) {
+        Navigator.of(context).pop(_PinSheetResult.pinNotSet);
+        return true;
+      },
+      pinInvalid: (_) {
+        setState(() => _errorText = walletFailureMessage(failure));
+        return true;
+      },
+      pinLocked: (_) {
+        setState(() {
+          _errorText = walletFailureMessage(failure);
+          _isBlocked = true;
+        });
+        return true;
+      },
+      transferBlocked: (_) {
+        setState(() {
+          _errorText = walletFailureMessage(failure);
+          _isBlocked = true;
+        });
+        return true;
+      },
+      orElse: () => false,
+    );
+
+    if (!handled) {
+      Navigator.of(context).pop(_PinSheetResult.failed);
+      return;
+    }
+
+    setState(() => _isSubmitting = false);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.only(
+        left: 20,
+        right: 20,
+        top: 12,
+        bottom: MediaQuery.of(context).viewInsets.bottom + 24,
+      ),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            children: [
+              Expanded(
+                child: Text(
+                  widget.title,
+                  style: AppStyle.xl.copyWith(fontWeight: FontWeight.w700),
+                ),
+              ),
+              IconButton(
+                onPressed: _isSubmitting
+                    ? null
+                    : () => Navigator.of(context).pop(),
+                icon: const Icon(Icons.close, color: AppColor.textSecondary),
+              ),
+            ],
+          ),
+          Text(
+            widget.subtitle ?? 'Masukkan PIN 6 digit kamu',
+            style: AppStyle.md.copyWith(color: AppColor.textSecondary),
+          ),
+          const SizedBox(height: 24),
+          PinCodeField(
+            controller: _controller,
+            enabled: !_isSubmitting && !_isBlocked,
+            hasError: _errorText != null,
+            onCompleted: _submit,
+          ),
+          const SizedBox(height: 16),
+          if (_isSubmitting)
+            const Center(
+              child: SpinKitFadingCircle(color: AppColor.primary, size: 28),
+            )
+          else if (_errorText != null)
+            Text(
+              _errorText!,
+              style: AppStyle.md.copyWith(
+                color: AppColor.error,
+                fontWeight: FontWeight.w600,
+              ),
+            ),
+          const SizedBox(height: 8),
+          Align(
+            alignment: Alignment.centerRight,
+            child: TextButton(
+              onPressed: _isSubmitting
+                  ? null
+                  : () => Navigator.of(context).pop(_PinSheetResult.forgotPin),
+              child: Text(
+                'Lupa PIN',
+                style: AppStyle.md.copyWith(
+                  color: AppColor.primary,
+                  fontWeight: FontWeight.w700,
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}