Ga naar inhoud

Onboarding (Frontend)

De onboarding-frontend leeft op de landingspagina (Next.js) en begeleidt een nieuwe apotheek door de zelfregistratie. Het is een formulier met meerdere stappen dat de twee onboarding-endpoints van de backend direct na elkaar aanroept. Er is geen betaalstap: de proefperiode start zonder creditcard.

UI-Architectuur & Design

De registratie is opgebouwd als een stepper met vier stappen, bijgehouden in een useReducer-state (step, alle veldwaarden, loading, error, sessionToken).

  • Stap info: KVK-nummer (met KvkAutocomplete die de bedrijfsnaam voorinvult vanuit het Handelsregister), bedrijfsnaam, factuur- en algemeen e-mailadres, en adres (met AdresAutocomplete op basis van PDOK).
  • Stap admin: voor- en achternaam, e-mailadres en telefoonnummer van de eerste beheerder.
  • Stap terms: akkoord met de algemene voorwaarden plus de Cloudflare Turnstile bot-gate. Hier wordt de registratie verzonden.
  • Stap bevestiging: succesmelding met instructies voor accountactivatie.
graph LR
    Info[info: KVK + adres + emails] --> Admin[admin: beheerder]
    Admin --> Terms[terms: voorwaarden + Turnstile]
    Terms --> Bevestiging[bevestiging: succes]

State & Data Flow

De verzending op de terms-stap doet beide backend-aanroepen achter elkaar:

  1. POST /api/onboarding/initiate/ met alle verzamelde velden plus cf_turnstile_token. De backend antwoordt met { session_token }.
  2. POST /api/onboarding/complete/ met { session_token }. De backend maakt de tenant en het beheerderaccount aan en antwoordt met { tenant_name, admin_email }.

Bij een fout op initiate wordt het Turnstile-widget gereset zodat de gebruiker opnieuw kan verzenden. Na succes toont de UI de bevestiging-stap; de beheerder rondt zijn account vervolgens af via de uitnodigingsmail.

sequenceDiagram
    participant UI as RegistrerenPage
    participant BE as Backend
    participant Stripe as Stripe API

    UI->>BE: POST /api/onboarding/initiate/ {velden, cf_turnstile_token}
    BE->>Stripe: Customer.create (provisional)
    BE-->>UI: { session_token }
    UI->>BE: POST /api/onboarding/complete/ { session_token }
    BE->>BE: Apotheek + Domain + BillingProfile + start_trial
    BE-->>UI: { tenant_name, admin_email }
    UI->>UI: toon bevestiging, beheerder ontvangt uitnodigingsmail

De registratiepagina staat op /registreren in de landing-omgeving. Na voltooiing wordt de gebruiker niet automatisch ingelogd: de beheerder ontvangt een uitnodigingsmail en rondt zijn account af in de hoofdapplicatie (app.remedice.nl).

Bestandsstructuur & Verantwoordelijkheden

  • landing/src/app/registreren/page.tsx: de hoofdcomponent met de stepper, de useReducer-state en de twee onboarding-aanroepen.
  • landing/src/app/registreren/RegistrerenPage.module.css: styling van het registratieproces.
  • landing/src/components/KvkAutocomplete/: KVK-zoekveld dat de bedrijfsnaam voorinvult.
  • landing/src/components/AdresAutocomplete/: adres-zoekveld op basis van PDOK.

Belangrijke bestanden

  • landing/src/app/registreren/page.tsx