| 1 | "use client"; |
| 2 | |
| 3 | import type { OrganizationAuthClient } |
| 4 | import { useAuth, useAuthPlugin |
| 5 | import { useListUserInvitations } |
| 6 | import { Fragment } |
| 7 | |
| 8 | import { Card, CardContent |
| 9 | import { ItemGroup, ItemSeparator |
| 10 | import { organizationPlugin } |
| 11 | import { UserInvitationRow } |
| 12 | import { UserInvitationRowSkeleton } |
| 13 | import { UserInvitationsEmpty } |
| 14 | |
| 15 | export type UserInvitationsProps |
| 16 | className?: string |
| 17 | }; |
| 18 | |
| 19 | /** Organization invitations for the signed-in user. Always renders the section card; uses `UserInvitationsEmpty` when there are no pending invitations. */ |
| 20 | export function UserInvitations({ |
| 21 | const { authClient |
| 22 | const { localization: |
| 23 | useAuthPlugin(organizationPlugin); |
| 24 | const session = |
| 25 | const emailVerified = |
| 26 | |
| 27 | const { data: |
| 28 | enabled: emailVerified, |
| 29 | }); |
| 30 | |
| 31 | return ( |
| 32 | <div className={className |
| 33 | <div className="flex flex-col gap-3 |
| 34 | <h2 className="truncate text-sm font-semibold |
| 35 | {organizationLocalization.invitations} |
| 36 | </h2> |
| 37 | |
| 38 | <Card className=" |
| 39 | <CardContent className=" |
| 40 | {session.isPending || |
| 41 | <ItemGroup> |
| 42 | <UserInvitationRowSkeleton /> |
| 43 | </ItemGroup> |
| 44 | ) : !invitations?. |
| 45 | <UserInvitationsEmpty verificationRequired={ |
| 46 | ) : ( |
| 47 | <ItemGroup className=" |
| 48 | {invitations.map(( |
| 49 | <Fragment key={ |
| 50 | {index > 0 |
| 51 | <UserInvitationRow invitation={ |
| 52 | </Fragment> |
| 53 | ))} |
| 54 | </ItemGroup> |
| 55 | )} |
| 56 | </CardContent> |
| 57 | </Card> |
| 58 | </div> |
| 59 | </div> |
| 60 | ); |
| 61 | } |