Skip to content

Create ExportDownloadStatusModal component and shared translation strings #90296

@mollfpr

Description

@mollfpr

Context

Shared modal component for the Bulk Report PDF Export and Improve Report Export
Realtime Delivery projects. Built with 4 states covering the CSV flow. Structured
so the PDF partial failure state slots in without restructuring. No user-visible
changes — not wired anywhere yet.

Mockup Image Image Image Image

Figma: https://www.figma.com/design/efrX2KvHEpMbkcjBki9DUH/Wave-8--Integration-Export-Errors?node-id=576-13571&t=aOe86IQoNs5jwavE-1

Depends on

src/components/ExportDownloadStatusModal.tsx (new file)

Props: exportID, isVisible, onClose, failedBody

Behavior:

  • Subscribes to ONYXKEYS.COLLECTION.EXPORT_DOWNLOAD + exportID
  • Uses useRef to retain last known export data after Onyx key is cleared
  • Auto-triggers fileDownload(downloadURL) on transition to ready
  • Non-dismissable during preparing state — no close button, backdrop
    press is a no-op, mobile swipe-to-dismiss disabled

Modal states:

State Title Body Buttons
preparing "Preparing download..." "You can either wait..." "Send me the file when it's ready"
shouldSendFromConcierge: true "You bet!" "Concierge will send you a message..." "Go to Concierge", "Dismiss"
ready "Your file is ready!" "If it didn't automatically download..." "Download file", "Close"
failed "Export failed" failedBody prop "Close"

failedBody is passed as a prop — PDF and CSV use different copy.
"Go to Concierge" calls onClose() then navigateToConciergeChat().

src/languages/en.ts (and other translation files)

Key Value
exportDownload.preparingTitle "Preparing download..."
exportDownload.preparingBody "You can either wait for the download to finish or Concierge can send it to you via chat."
exportDownload.sendFromConcierge "Send me the file when it's ready"
exportDownload.conciergeTitle "You bet!"
exportDownload.conciergeBody "Concierge will send you a message when the file is ready."
exportDownload.goToConcierge "Go to Concierge"
exportDownload.dismiss "Dismiss"
exportDownload.readyTitle "Your file is ready!"
exportDownload.readyBody "If it didn't automatically download, use the button below."
exportDownload.downloadFile "Download file"
exportDownload.failedTitle "Export failed"
exportDownload.close "Close"

Testing

Unit tests in tests/unit/ExportDownloadStatusModalTest.tsx:

  • Renders preparing state with spinner and Send button
  • Is non-dismissable during preparing state (backdrop + swipe-down)
  • Transitions to Concierge state on button click
  • Auto-downloads on ready state transition
  • Shows failed state with correct failedBody prop
  • Retains last state when Onyx key becomes null
  • "Go to Concierge" navigates and closes
  • Close button calls clearExportDownload
Issue OwnerCurrent Issue Owner: @truph01

Metadata

Metadata

Type

No type
No fields configured for issues without a type.

Projects

Status

HIGH

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions