Skip to content

feat: Add export overlay #218

Description

@kirillakovalenko

Title

Add export-method overlay (WhatsApp vs. file) between Results page and export confirmation

Context

Today, clicking Export on the results page (app/ui/src/app/results/page.tsxhandleExportClick) opens ExportRoutesModal directly, which lets the user pick routes and immediately downloads JSON files via downloadRoutesAsJsonFiles. A separate, already-mocked WhatsApp send flow exists in SendRoutesModal.tsx / app/api/whatsapp/send-route/route.ts, but it isn't reachable from the same entry point.

Proposal

Insert a new intermediate overlay between the Export click and the existing export overlay, asking the user how they want to export their routes:

  1. Send via WhatsApp — Sends each route directly to the driver's phone over WhatsApp, so they can open it on their device without needing a file.
  2. Export Routes File — Downloads a file per route that you can save, print, or share manually with drivers.

Selecting an option routes the user into the corresponding existing flow (SendRoutesModal or ExportRoutesModal), so this is additive — no changes to the underlying send/export logic.

Design

As part of this PR, have an AI (Claude or similar) generate the visual design of this new overlay, matching current platform branding:

  • Teal primary action color (--edit-btn-primary: #4cb599), stone/neutral grays, --edit-foreground
  • Manrope font (font-sans-manrope)
  • Existing modal pattern: white rounded-xl/shadow-lg panel, bg-black/40 backdrop, createPortal, useFocusTrap, role="dialog"/aria-modal

Acceptance Criteria

  • New overlay appears after clicking Export, before either the WhatsApp or file-export flow
  • Each option has a short description explaining what it does (copy above as a starting point)
  • Visual style matches existing modals/branding (reviewed against globals.css tokens)
  • Existing keyboard/focus-trap/ESC-to-close behavior preserved
  • No change to underlying WhatsApp-send or JSON-export logic

Assignee

@Gill87

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions