Skip to main content

Page: Send

Page Spec: Send Money

Route

/send

Architecture Status

Core

Implementation Status

SPEC DOCUMENTS STEP 1 ONLY. The actual implementation has a 4-step flow:

  1. Select Recipient (documented below) — search recipients, add new
  2. Enter Amount (NOT DOCUMENTED) — amount input + exchange rate display
  3. Confirm (NOT DOCUMENTED) — review transfer details, fee breakdown
  4. Success (NOT DOCUMENTED) — confirmation screen + receipt

This spec covers ONLY step 1. Steps 2-4 need separate specs or this spec needs expansion.

Figma Reference

send.png

Visual Description from Figma

The Send Money page is the first step in the money transfer flow:

  • Top bar: Left side has a back arrow (thin left arrow) icon in muted gray. Center has "Send penger" heading in bold sans-serif font. Below the heading, centered, is "1/4" step indicator in muted text.
  • Background: Light gray (#EEEEEE).
  • Search input: Large white rounded input field with:
    • Magnifying glass icon on the left (gray)
    • Placeholder text "Søk mottakere..." in gray
    • Full width with rounded corners
  • Empty state message: Centered text below search input:
    • "Ingen mottakere funnet" in muted gray text (#6B7280)
    • Indicates no recipients have been added yet
  • Add recipient button: White rounded button at bottom of content area:
    • "+" icon on left in dark color
    • "Ny mottaker" text in dark color
    • Full width, white rounded, no visible border (contrast against gray bg)
    • Positioned well above bottom navigation
  • Bottom navigation: Visible but all tabs inactive (no green highlight).

The page has a clean, minimal design with large touch targets and plenty of whitespace.

Page Layout

App page WITH bottom nav
├── Top Bar
│   ├── Left: Back arrow (chevron)
│   ├── Center: "Send penger" heading
│   └── Right: "1/4" step indicator
├── Content Area (light gray bg)
│   ├── Search Input
│   │   ├── Search icon (left)
│   │   └── "Søk mottakere..." placeholder
│   ├── Empty State
│   │   └── "Ingen mottakere funnet" message
│   └── Add Recipient Button
│       ├── "+" icon
│       └── "Ny mottaker" label
└── Bottom Nav (all tabs inactive)

Components

Top Bar

<div className="flex items-center justify-between px-6 pt-6 pb-4">
  <button onClick={() => router.back()} className="rounded-lg p-2 hover:bg-white/80">
    <ChevronLeft className="h-6 w-6 text-[#1A1A1A]" />
  </button>
  <h1 className="font-[family-name:var(--font-fraunces)] text-xl font-bold text-[#1A1A1A]">Send penger</h1>
  <span className="text-sm text-[#6B7280]">1/4</span>
</div>

Search Input

<div className="relative">
  <Search className="absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9CA3AF]" />
  <input
    type="text"
    placeholder="Søk mottakere..."
    className="h-14 w-full rounded-2xl border border-[#E5E7EB] bg-white pl-12 pr-4 text-[#1A1A1A] placeholder:text-[#9CA3AF] focus:border-[#0B6E35] focus:outline-none focus:ring-2 focus:ring-[#0B6E35]/20"
    value={searchQuery}
    onChange={(e) => setSearchQuery(e.target.value)}
  />
</div>

Empty State

<div className="py-12 text-center">
  <p className="text-sm text-[#6B7280]">Ingen mottakere funnet</p>
</div>

Add Recipient Button

<button
  onClick={() => router.push('/send/add-recipient')}
  className="flex h-14 w-full items-center justify-center gap-2 rounded-2xl border border-[#E5E7EB] bg-white text-sm font-medium text-[#1A1A1A] transition-colors hover:bg-[#F9FAFB]"
>
  <Plus className="h-5 w-5" />
  Ny mottaker
</button>

Recipient List (when populated)

<div className="space-y-3">
  {recipients.map((recipient) => (
    <button
      key={recipient.id}
      onClick={() => handleSelectRecipient(recipient)}
      className="flex w-full items-center justify-between rounded-2xl bg-white p-4 text-left transition-colors hover:bg-[#F9FAFB]"
    >
      <div className="flex items-center gap-3">
        <div className="flex h-10 w-10 items-center justify-center rounded-full bg-[#0B6E35]/10">
          <User className="h-5 w-5 text-[#0B6E35]" />
        </div>
        <div>
          <p className="text-sm font-semibold text-[#1A1A1A]">{recipient.name}</p>
          <p className="text-xs text-[#6B7280]">{recipient.country} • {recipient.accountNumber}</p>
        </div>
      </div>
      <ChevronRight className="h-5 w-5 text-[#9CA3AF]" />
    </button>
  ))}
</div>

Data Displayed

Data Source API
Saved recipients User's recipient list GET /api/recipients
Search results Filtered recipient list Client-side filtering
Step indicator Flow state Static (1/4)

User Interactions

Element Action Result
Back arrow Click Navigate back to previous page (dashboard)
Search input Type Filter recipient list in real-time
Add recipient button Click Navigate to /send/add-recipient (step 2)
Recipient card Click Select recipient, navigate to amount input (step 3)
Bottom nav tabs Click Navigate to respective page (exits send flow)

Norwegian Labels

Element Norwegian Text
Page title Send penger
Step indicator 1/4
Search placeholder Søk mottakere...
Empty state Ingen mottakere funnet
Add recipient button Ny mottaker

Design Tokens

Token Value
Page bg #EEEEEE
Card bg #FFFFFF
Input bg #FFFFFF
Primary #0B6E35
Primary hover #095C2C
Text primary #1A1A1A
Text muted #6B7280
Text light #9CA3AF
Border #E5E7EB
Brand font font-[family-name:var(--font-fraunces)]
Card radius rounded-2xl
Button radius rounded-2xl
Input radius rounded-2xl
Avatar/Icon circle rounded-full
Icon circle bg #0B6E35]/10 (10% opacity green)

Bottom Navigation

Yes — All tabs inactive (gray, outline icons). User is in the send flow but not on a main tab page.

Flow Context

This is step 1 of 4 in the send money flow:

  1. Select Recipient (this page) — choose from saved recipients or add new
  2. Add Recipient — enter recipient details (name, country, account)
  3. Enter Amount — specify amount and currency
  4. Review & Confirm — review details, initiate PISP payment from user's bank account

Pass-through model reminder: Drop initiates payment via PISP from user's linked bank account. No money is held by Drop.

Back to top