Skip to content

Invoice Expiry Date-Time Picker with Timezone Support #486

Description

@Kingsman-99

Description

The invoice creation form has a plain date-only input for expiry that ignores time zones, causing invoices to expire at unpredictable moments for creators and recipients in different regions. A date-time picker with explicit timezone selection is required.

Technical Context

src/components/invoice/ExpiryDatePicker.tsx (new) uses react-day-picker for the calendar UI paired with a time input and an IANA timezone selector built from Intl.supportedValuesOf('timeZone'). The selected value is converted to a UTC ISO 8601 string before being stored in src/hooks/useInvoiceForm.ts. src/components/invoice/ExpiryDisplay.tsx shows the expiry in the viewer's local timezone using Intl.DateTimeFormat with the timeZoneName: 'short' option.

Acceptance Criteria

  • The expiry field on the creation form opens a calendar with a time input and a timezone dropdown
  • The selected expiry is stored as a UTC timestamp in the invoice payload
  • The expiry is displayed in the viewer's local timezone on the detail and public status pages
  • Selecting a past date-time triggers an inline validation error before form submission
  • The timezone dropdown defaults to the browser's detected timezone on first render
  • All CI checks (npm test, npm run build, ESLint/TypeScript) pass and the branch has no merge conflicts

Metadata

Metadata

Assignees

Labels

Stellar WaveIssues in the Stellar wave programcomplexity: highuiUI styling and visual changes

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions