@shipfox/client-invitations 3.0.1 → 5.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-invitations",
   "license": "MIT",
-  "version": "3.0.1",
+  "version": "5.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -31,11 +31,11 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-query": "^5.101.0",
-    "@shipfox/api-auth-dto": "6.0.0",
+    "@shipfox/api-auth-dto": "7.1.0",
     "@shipfox/api-workspaces-dto": "6.0.0",
-    "@shipfox/client-api": "1.0.0",
-    "@shipfox/client-auth": "3.0.1",
-    "@shipfox/client-shell": "3.0.1",
+    "@shipfox/client-api": "4.0.0",
+    "@shipfox/client-shell": "5.0.0",
+    "@shipfox/client-ui": "4.0.0",
     "@shipfox/react-ui": "0.3.5"
   },
   "peerDependencies": {
@@ -44,25 +44,6 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "devDependencies": {
-    "@tanstack/react-query": "^5.101.0",
-    "@tanstack/react-router": "^1.170.16",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.2",
-    "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^19.1.11",
-    "@types/react-dom": "^19.1.7",
-    "jsdom": "^29.0.0",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "@shipfox/biome": "1.8.2",
-    "@shipfox/client-test-setup": "0.0.3",
-    "@shipfox/swc": "1.2.6",
-    "@shipfox/ts-config": "1.3.8",
-    "@shipfox/typescript": "1.1.7",
-    "@shipfox/vite": "1.2.5",
-    "@shipfox/vitest": "1.2.3"
-  },
   "scripts": {
     "build": "shipfox-swc",
     "check": "shipfox-biome-check",

package/src/complete-acceptance.ts

@@ -8,7 +8,7 @@ import type {NavigateOptions} from '@tanstack/react-router';
  * routes the user into the workspace home.
  *
  * `refreshAuth` is passed in so this helper stays a plain function (no hook).
- * Call sites construct it via `useRefreshAuth()` from `@shipfox/client-auth`.
+ * Call sites construct it via `useRefreshAuth()` from `@shipfox/client-shell/runtime`.
  */
 export async function completeInvitationAcceptance(params: {
   workspaceId: string;

package/src/core/invitation-preview.ts

@@ -0,0 +1,18 @@
+export type InvitationPreview =
+  | {
+      status: 'pending';
+      workspaceId: string;
+      workspaceName: string;
+      email: string;
+      invitedByDisplay?: string;
+      expiresAt: string;
+    }
+  | {status: 'expired'; workspaceName: string; expiresAt: string}
+  | {status: 'already_used'; workspaceName: string}
+  | {status: 'invalid'};
+
+export function pendingInvitation(
+  preview: InvitationPreview | undefined,
+): Extract<InvitationPreview, {status: 'pending'}> | undefined {
+  return preview?.status === 'pending' ? preview : undefined;
+}

package/src/hooks/api/invitation-preview-mapper.test.ts

@@ -0,0 +1,36 @@
+import {describe, expect, it} from '@shipfox/vitest/vi';
+import {toInvitationPreview} from './invitation-preview-mapper.js';
+
+describe('toInvitationPreview', () => {
+  it.each([
+    [
+      {
+        status: 'pending' as const,
+        workspace_id: '11111111-1111-4111-8111-111111111111',
+        workspace_name: 'Acme',
+        email: 'member@example.com',
+        invited_by_display: 'Owner',
+        expires_at: '2026-08-01T00:00:00.000Z',
+      },
+      {
+        status: 'pending',
+        workspaceId: '11111111-1111-4111-8111-111111111111',
+        workspaceName: 'Acme',
+        email: 'member@example.com',
+        invitedByDisplay: 'Owner',
+        expiresAt: '2026-08-01T00:00:00.000Z',
+      },
+    ],
+    [
+      {status: 'expired' as const, workspace_name: 'Acme', expires_at: '2026-08-01T00:00:00.000Z'},
+      {status: 'expired', workspaceName: 'Acme', expiresAt: '2026-08-01T00:00:00.000Z'},
+    ],
+    [
+      {status: 'already_used' as const, workspace_name: 'Acme'},
+      {status: 'already_used', workspaceName: 'Acme'},
+    ],
+    [{status: 'invalid' as const}, {status: 'invalid'}],
+  ])('maps %s previews into the invitation domain', (dto, expected) => {
+    expect(toInvitationPreview(dto)).toEqual(expected);
+  });
+});

package/src/hooks/api/invitation-preview-mapper.ts

@@ -0,0 +1,22 @@
+import type {PreviewInvitationResponseDto} from '@shipfox/api-workspaces-dto';
+import type {InvitationPreview} from '#core/invitation-preview.js';
+
+export function toInvitationPreview(dto: PreviewInvitationResponseDto): InvitationPreview {
+  switch (dto.status) {
+    case 'pending':
+      return {
+        status: dto.status,
+        workspaceId: dto.workspace_id,
+        workspaceName: dto.workspace_name,
+        email: dto.email,
+        ...(dto.invited_by_display ? {invitedByDisplay: dto.invited_by_display} : {}),
+        expiresAt: dto.expires_at,
+      };
+    case 'expired':
+      return {status: dto.status, workspaceName: dto.workspace_name, expiresAt: dto.expires_at};
+    case 'already_used':
+      return {status: dto.status, workspaceName: dto.workspace_name};
+    case 'invalid':
+      return {status: dto.status};
+  }
+}

package/src/hooks/api/preview-invitation.ts

@@ -1,23 +1,38 @@
-import type {PreviewInvitationResponseDto} from '@shipfox/api-workspaces-dto';
-import {apiRequest} from '@shipfox/client-api';
-import {useQuery} from '@tanstack/react-query';
+import {previewInvitationResponseSchema} from '@shipfox/api-workspaces-dto';
+import {checkedApiRequest} from '@shipfox/client-api';
+import {type FetchQueryOptions, queryOptions, useQuery} from '@tanstack/react-query';
+import type {InvitationPreview} from '#core/invitation-preview.js';
+import {toInvitationPreview} from './invitation-preview-mapper.js';
 
 export const previewInvitationQueryKey = (token: string) =>
   ['invitations', 'preview', token] as const;
 
-async function previewInvitation(token: string): Promise<PreviewInvitationResponseDto> {
+type PreviewInvitationQueryOptions = FetchQueryOptions<
+  InvitationPreview,
+  Error,
+  InvitationPreview,
+  ReturnType<typeof previewInvitationQueryKey>
+>;
+
+async function previewInvitation(token: string): Promise<InvitationPreview> {
   const params = new URLSearchParams({token});
-  return await apiRequest<PreviewInvitationResponseDto>(
+  const response = await checkedApiRequest(
+    previewInvitationResponseSchema,
     `/invitations/preview?${params.toString()}`,
   );
+  return toInvitationPreview(response);
 }
 
-export function usePreviewInvitation(token: string | undefined) {
-  return useQuery({
-    queryKey: previewInvitationQueryKey(token ?? ''),
-    queryFn: () => previewInvitation(token as string),
+export function previewInvitationQueryOptions(token: string): PreviewInvitationQueryOptions {
+  return queryOptions({
+    queryKey: previewInvitationQueryKey(token),
+    queryFn: () => previewInvitation(token),
     enabled: Boolean(token),
     retry: false,
     staleTime: 30_000,
   });
 }
+
+export function usePreviewInvitation(token: string | undefined) {
+  return useQuery(previewInvitationQueryOptions(token ?? ''));
+}

package/src/index.ts

@@ -1,7 +1,9 @@
+export {type InvitationPreview, pendingInvitation} from '#core/invitation-preview.js';
 export {completeInvitationAcceptance} from './complete-acceptance.js';
 export {useAcceptInvitation} from './hooks/api/accept-invitation.js';
 export {
   previewInvitationQueryKey,
+  previewInvitationQueryOptions,
   usePreviewInvitation,
 } from './hooks/api/preview-invitation.js';
 export {InvitationAcceptPage} from './pages/invitation-accept-page.js';

package/src/pages/invitation-accept-page.tsx

@@ -1,4 +1,5 @@
-import {AuthShell, useAuthState, useRefreshAuth} from '@shipfox/client-auth';
+import {AuthShell, useAuthState, useRefreshAuth} from '@shipfox/client-shell/runtime';
+import {createSingleFlight} from '@shipfox/client-ui';
 import {Button} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
 import {ShipfoxLoader} from '@shipfox/react-ui/loader';
@@ -11,9 +12,7 @@ import {completeInvitationAcceptance} from '#complete-acceptance.js';
 import {useAcceptInvitation} from '#hooks/api/accept-invitation.js';
 import {usePreviewInvitation} from '#hooks/api/preview-invitation.js';
 
-// Module-scoped guard so React StrictMode's double-mount in dev does not
-// fire the accept mutation twice for the same token.
-const inFlightAccepts = new Set<string>();
+const invitationAccepts = createSingleFlight<string, void>();
 const toastedTerminals = new Set<string>();
 const TOASTED_TERMINALS_MAX = 32;
 
@@ -65,7 +64,6 @@ export function InvitationAcceptPage() {
     if (!token) return;
     if (auth.isLoading) return;
     if (hasKickedAccept.current) return;
-    if (inFlightAccepts.has(token)) return;
     const data = preview.data;
     if (!data) return;
     if (data.status !== 'pending') return;
@@ -75,15 +73,11 @@ export function InvitationAcceptPage() {
     if (authedEmail !== data.email.toLowerCase()) return;
 
     hasKickedAccept.current = true;
-    inFlightAccepts.add(token);
-
-    runAccept({token, workspaceName: data.workspace_name})
+    invitationAccepts
+      .run(token, async () => await runAccept({token, workspaceName: data.workspaceName}))
       .catch(() => {
         // The mutation surfaces its error via accept.error; the UI re-renders
         // into the auth-match-error state below.
-      })
-      .finally(() => {
-        inFlightAccepts.delete(token);
       });
   }, [auth.isAuthenticated, auth.isLoading, auth.user?.email, preview.data, runAccept, token]);
 
@@ -143,7 +137,7 @@ export function InvitationAcceptPage() {
     return (
       <AuthShell title="Invitation expired" description="The link is no longer accepting joins.">
         <Callout role="alert" type="error">
-          This invitation expired on {formatDate(data.expires_at)}. Ask your administrator to send a
+          This invitation expired on {formatDate(data.expiresAt)}. Ask your administrator to send a
           new one.
         </Callout>
         <GoHomeButton navigate={navigate} />
@@ -156,12 +150,12 @@ export function InvitationAcceptPage() {
       toast.info(`This invitation has already been accepted.`),
     );
     return (
-      <AuthShell title="Invitation already used" description={data.workspace_name}>
+      <AuthShell title="Invitation already used" description={data.workspaceName}>
         <Callout role="alert" type="info">
           This invitation has already been accepted.{' '}
           {auth.isAuthenticated
-            ? `Open your dashboard to access ${data.workspace_name} if your account is a member.`
-            : `Log in to access ${data.workspace_name}.`}
+            ? `Open your dashboard to access ${data.workspaceName} if your account is a member.`
+            : `Log in to access ${data.workspaceName}.`}
         </Callout>
         {auth.isAuthenticated ? null : (
           <Button asChild className="w-full">
@@ -174,8 +168,8 @@ export function InvitationAcceptPage() {
   }
 
   const inviterLine =
-    data.invited_by_display != null
-      ? `Invited by ${data.invited_by_display} to join as ${data.email}.`
+    data.invitedByDisplay != null
+      ? `Invited by ${data.invitedByDisplay} to join as ${data.email}.`
       : `Invited to join as ${data.email}.`;
 
   if (!auth.isAuthenticated) {
@@ -183,7 +177,7 @@ export function InvitationAcceptPage() {
     const signupHref = `/auth/signup?redirect=${encodeURIComponent(redirect)}`;
     const loginHref = `/auth/login?redirect=${encodeURIComponent(redirect)}`;
     return (
-      <AuthShell title={data.workspace_name} description={inviterLine}>
+      <AuthShell title={data.workspaceName} description={inviterLine}>
         <div className="flex flex-col gap-16">
           <Button asChild className="w-full">
             <Link to={signupHref}>Create account</Link>
@@ -205,7 +199,7 @@ export function InvitationAcceptPage() {
     const redirect = `/invitations/accept?token=${encodeURIComponent(token)}`;
     const logoutHref = `/auth/logout?redirect=${encodeURIComponent(redirect)}`;
     return (
-      <AuthShell title={data.workspace_name} description={inviterLine}>
+      <AuthShell title={data.workspaceName} description={inviterLine}>
         <Callout role="alert" type="warning">
           You're signed in as {auth.user?.email}, but this invitation is for {data.email}.
         </Callout>
@@ -229,15 +223,15 @@ export function InvitationAcceptPage() {
   // result. Show either the pending state or the error state.
   if (accept.isError) {
     return (
-      <AuthShell title={data.workspace_name} description={inviterLine}>
+      <AuthShell title={data.workspaceName} description={inviterLine}>
         <Callout role="alert" type="error">
-          We couldn't add you to {data.workspace_name}. Try again in a moment.
+          We couldn't add you to {data.workspaceName}. Try again in a moment.
         </Callout>
         <Button
           className="w-full"
           isLoading={accept.isPending}
           onClick={() => {
-            runAccept({token, workspaceName: data.workspace_name}).catch(() => {
+            runAccept({token, workspaceName: data.workspaceName}).catch(() => {
               // The mutation state drives the rendered error; avoid an
               // unhandled rejection from the click handler.
             });
@@ -250,11 +244,11 @@ export function InvitationAcceptPage() {
   }
 
   return (
-    <AuthShell title={data.workspace_name} description={inviterLine}>
+    <AuthShell title={data.workspaceName} description={inviterLine}>
       <div className="flex flex-col items-center gap-12" aria-live="polite">
         <ShipfoxLoader />
         <Text size="sm" className="text-foreground-neutral-subtle">
-          Adding you to {data.workspace_name}…
+          Adding you to {data.workspaceName}…
         </Text>
       </div>
     </AuthShell>