Skip to content

Uiux/payout ics export #562

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
OLAMIGHTY010 wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Uiux/payout ics export #562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
9755a31
design: payout ics calendar export
OLAMIGHTY010 Jul 30, 2026
97059fe
design: payout ics calendar export
OLAMIGHTY010 Jul 30, 2026
599d4a1
resolve package-lock conflict
OLAMIGHTY010 Jul 31, 2026
ed42f1a
fix: lint errors in PayoutSchedule and add PR description
OLAMIGHTY010 Jul 31, 2026
c90bfa4
Merge master into uiux/payout-ics-export and resolve RTL layout confl…
OLAMIGHTY010 Jul 31, 2026
ddd9052
Merge branch 'master' into uiux/payout-ics-export
OLAMIGHTY010 Jul 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions PR_DESCRIPTION_445.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
# PR #445: [UI/UX Design] Design an ICS calendar export UX for the Payout Schedule

## Description
This PR addresses issue #445 by introducing an ICS calendar export dialog for the Payout Schedule. Investors and issuers can now generate subscription URLs to sync their payouts to popular calendar applications (Google, Outlook, Apple).

### Key Features
- **Scope Options**: Users can choose to subscribe to a 'Single Payout', 'Per Issuer', or 'All Payouts' using the segmented tabs.
- **Subscription URL & Regeneration**: A read-only URL is provided with a robust fallback-enabled copy affordance. Users can easily regenerate a new token, invalidating the old one.
- **Client Instructions**: Clear, actionable step-by-step instructions are provided for Google Calendar, Outlook Calendar, and Apple Calendar.
- **Revocation Flow**: A secure, confirm-to-revoke state is added to prevent accidental invalidation of calendar syncs.
- **Last Used Timestamp**: Displays when the calendar URL was last synced by a client (e.g. `Last used: Today at 10:42 AM`).

## Accessibility & Edge Cases
- **Accessibility**: Full focus trap integration for the dialog (`aria-modal`, `role="dialog"`, `aria-labelledby`). All semantic tabs and tab panels utilize appropriate WAI-ARIA states (`role="tab"`, `aria-selected`). Axe testing confirms 0 violations.
- **Edge Cases Addressed**:
- Extremely long URLs are handled by keeping the input `dir="ltr"` and truncating with hidden overflow when selecting text.
- A fallback to `document.execCommand('copy')` is included for older browsers where `navigator.clipboard` is restricted.

## Validation
- ✅ Component tests passed with 100% coverage in `CalendarExportDialog.test.tsx`.
- ✅ Responsive behavior and RTL capabilities accounted for.
- ✅ Accessible per WCAG 2.1 AA (via `jest-axe`).

## Suggested Review Guidelines
Reviewers, please verify the revoke confirmation state UI and test the URL copy fallback on your specific browser configurations.
Loading