Files
halobestie-clone/requirement/flow_customer.md
ramadhan sjamsani 8c212cb464 Phase 4 PRD + plan: customer-flow redesign (Figma alignment)
Adds the Phase 4 requirement docs that align the customer app with the new
HaloBestie Figma design dump.

- requirement/flow_customer.md: source-of-truth numbered flow (input)
- requirement/flow_customer.mermaid.md: 6 mermaid diagrams + Figma cross-ref
- requirement/phase4-customer-flow.md: PRD (15 functional sections)
- requirement/phase4-customer-flow-plan.md: 10-stage implementation plan
- .gitignore: exclude requirement/Figma.zip + extracted Figma/ folder

Resolved product decisions: no free trial (replaced by configurable
first-session discount), pricing has independent chat/call groups,
voice-call mode is chat-with-badge (mitra shares Meet link manually),
social login is server-driven via /api/shared/auth-providers, ESP tags
are info-only (not used for matching).

No code changes; implementation starts at plan stage 0 (design system).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-09 23:21:26 +08:00

4.8 KiB

Application Flow for Customer App

We are defining customer flow along with the app referenced on the claude design

Customer App Flow:

  1. Splash screen -> S1 - Splash
  2. Show home screen -> Home
  3. Check for session existence (through JWT):
    1. when No session found, show login panel on top -> Home (1st time)
    2. when session found, show profil panel on top -> Home (returning)
  4. Check for notification allowance
    1. If not allowed -> shows Home + notif banner
    2. If allowed, go to next step
  5. CTA Of, Aku mau Curhat -> New User (1) | Curhat Sama Bestie Baru -> Existing user (2)
    1. New User

      1. Check for user call sign existence

        1. Not Exist -> Shows S2 - Nama
      2. Verification request (OTP)

        1. Verify phone number

          1. ESP Screen -> Shows S5 (selection)
          2. USP Screen -> Shows S5b. USP Screen
          3. Phone number input -> show S3a · Input WhatsApp
          4. Phone number OTP => show S3b · OTP verification
          5. One time Paywal -> Shows s6 - paywall Rp.2000
          6. Payment Screen -> Only QRIS
        2. Stay anonymous

          1. ESP Screen -> Shows S5 (selection)
          2. USP Screen -> Shows S5b. USP Screen
          3. Curhat method -> shows Pilih cara curhat
          4. Duration selection -> shows Pemilihan harga (full screen)
          5. Payment Screen -> Shows Cara bayar (QRIS-first)
      3. Xendit payment screen (webview or other view)

      4. Check for payment status status:

        1. 20 minutes -> Payment set to expired. Shows Pembayaran expired
        2. Pay -> Go to next step
      5. Check for notification allowance

        1. If not allowed -> shows Aktifkan notifikasi
          1. if Izinkan Notifikasi CTA -> Navigate to enable notification in system
          2. else (Nanti Saja) -> Go to next step
        2. If allowed, go to next step
      6. Soft Prompt Searching -> Show S7 · Searching state . CTA Aku ngerti, Lanjut

      7. Blast chat session pair request -> Show S7 · Timeout 5 menit without CTA

      8. Blast chat session timeout status (5 minutes timeout):

        1. Before timeout -> Show S7 · Timeout 5 menit without CTA
        2. Timeout -> Show S7 · Timeout 5 menit with CTA Coba Cari Lagi and ghost CTA button Coba cari lagi nanti that navigate to home
        3. No Timeout -> Go to next step
      9. Match Found -> Shows S9 · Match found

    2. Returning User

      1. CTA Curhat sama Bestie Baru -> Shows Bestie Choice Sheet · returning user
        1. Bestie yang udah kenal CTA -> Shows Bestie History List · pilih bestie lama
          1. Bestie offline -> Shows Bestie Offline Popup · returning user
            1. Cari Bestie Lain CTA -> Go to Bestie Baru CTA of returning user
            2. Tanya admin CTA -> Shows Sheet · tanya admin
          2. Bestie online
            1. Request chat session pair -> Shows Menunggu bestie tertentu
        2. Bestie Baru CTA
          1. Soft Prompt Searching -> Show S7 · Searching state . CTA Aku ngerti, Lanjut
          2. Blast chat session pair request -> Show S7 · Timeout 5 menit without CTA
          3. Blast chat session timeout status (5 minutes timeout):
            1. Before timeout -> Show S7 · Timeout 5 menit without CTA
            2. Timeout -> Show S7 · Timeout 5 menit with CTA Coba Cari Lagi and ghost CTA button Coba cari lagi nanti that navigate to home
            3. No Timeout -> Go to next step
          4. Match Found -> Shows S9 · Match found
    3. Chat Room -> S10 · Last 2 Minutes Chat without snackbar reminder

    4. 3 minutes left -> Shows S10 · Snackbar reminder

    5. 2 minutes left -> Shows S10 · Last 2 Minutes Chat

    6. Times up -> Shows S10 · Floating banner expired

    7. CTA Perpanjang -> Shows Time-up sheet (5 opsi)

    8. Shows Time Topup bottom sheet -> Shows Time-up sheet (5 opsi)

      1. Perpanjang CTA -> Go to Payment Screen, but now without blast but instead asking same Mitra for approval.
      2. Cukup, Akhiri Sesi CTA -> Popup · konfirmasi akhiri (1)
        1. Lanjut Akhiri CTA -> Shows Popup · konfirmasi akhiri (2)
          1. Tulis Pesan Penutup CTA -> Shows Pesan penutup sheet
            1. Kirim & Akhiri sesi CTA -> Shows S11 · Terima kasih udah cerita
              1. Mitra reject -> Shows Bestie Offline Popup · returning user
            2. Lewat - Langusng akhiri CTA -> Shows S11 · Terima kasih udah cerita
          2. Lewati Saja CTA -> Shows S11 · Terima kasih udah cerita
        2. Gak Jadi, Balik CTA -> Go to Shows Time Topup Bottom Sheet