@stigmer/react 1.0.4 → 2.0.1

package/src/invitation/InvitationRedemption.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { cn } from "@stigmer/theme";
-import { getUserMessage, iamRoleDisplayName } from "@stigmer/sdk";
+import { getUserMessage, iamRoleDisplayName, iamRoleDescription } from "@stigmer/sdk";
 import type { Invitation } from "@stigmer/protos/ai/stigmer/iam/invitation/v1/api_pb";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import { useInvitationPreview } from "./useInvitationPreview";
@@ -19,13 +19,26 @@ export interface InvitationRedemptionProps {
   /**
    * Whether the current user is authenticated.
    *
-   * When `false`, the component shows a "Sign in to accept" CTA
-   * instead of the accept button. When `true` or omitted, the
-   * accept button calls `redeem` directly.
+   * Controls the button's click behavior, not its label. Both
+   * states show "Accept Invitation". When `false`, clicking
+   * fires {@link onAuthRequired} to initiate the auth flow.
+   * When `true` or omitted, clicking redeems the invitation
+   * directly.
    *
    * @default true
    */
   readonly isAuthenticated?: boolean;
+  /**
+   * When `true`, automatically triggers invitation redemption
+   * on mount (requires `isAuthenticated` to also be `true`).
+   *
+   * Used by host applications to complete the acceptance flow
+   * after an OIDC redirect — the user clicked "Accept Invitation"
+   * before the redirect, so no second click should be required.
+   *
+   * @default false
+   */
+  readonly autoAccept?: boolean;
   /**
    * Fired after the invitation is successfully redeemed.
    *
@@ -35,11 +48,11 @@ export interface InvitationRedemptionProps {
    */
   readonly onAccepted?: (invitation: Invitation) => void;
   /**
-   * Fired when an unauthenticated user clicks "Sign in to accept".
+   * Fired when an unauthenticated user clicks "Accept Invitation".
    *
-   * The host application controls what "sign in" means — this
-   * callback typically triggers a redirect to the login page with
-   * a return URL back to the invite page.
+   * The host application controls what happens next — this
+   * callback typically triggers a redirect to the OIDC provider
+   * with a return URL back to the invite page.
    */
   readonly onAuthRequired?: () => void;
   /** Additional CSS class names for the root container. */
@@ -59,8 +72,14 @@ export interface InvitationRedemptionProps {
  *
  * The component is auth-agnostic: it delegates authentication
  * decisions to the host application via `isAuthenticated` and
- * `onAuthRequired` props. Platform builders who render this
- * component only for authenticated users can ignore both props.
+ * `onAuthRequired` props. The button always reads "Accept Invitation"
+ * regardless of auth state — `isAuthenticated` only controls whether
+ * clicking redeems directly or triggers the auth flow first.
+ *
+ * When `autoAccept` is `true` and the user is authenticated, the
+ * component automatically triggers redemption on mount. This enables
+ * a seamless post-OIDC-redirect flow where the user doesn't need
+ * to click "Accept Invitation" a second time.
  *
  * All visual properties flow through `--stgm-*` design tokens.
  *
@@ -74,14 +93,16 @@ export interface InvitationRedemptionProps {
  * <InvitationRedemption
  *   token={tokenFromUrl}
  *   isAuthenticated={!!currentUser}
+ *   autoAccept={shouldAutoAccept}
  *   onAccepted={(inv) => router.push(`/org/${inv.metadata?.org}`)}
- *   onAuthRequired={() => router.push(`/login?return=/invite/${token}`)}
+ *   onAuthRequired={() => redirectToLogin()}
  * />
  * ```
  */
 export function InvitationRedemption({
   token,
   isAuthenticated = true,
+  autoAccept = false,
   onAccepted,
   onAuthRequired,
   className,
@@ -89,6 +110,7 @@ export function InvitationRedemption({
   const { preview, isLoading, error: fetchError, refetch } = useInvitationPreview(token);
   const { redeem, isRedeeming, error: redeemError, clearError } = useRedeemInvitation();
   const [accepted, setAccepted] = useState<Invitation | null>(null);
+  const autoAcceptFired = useRef(false);
 
   const handleAccept = useCallback(async () => {
     clearError();
@@ -101,6 +123,20 @@ export function InvitationRedemption({
     }
   }, [token, redeem, clearError, onAccepted]);
 
+  useEffect(() => {
+    if (
+      autoAccept &&
+      isAuthenticated &&
+      preview?.isValid &&
+      !accepted &&
+      !isRedeeming &&
+      !autoAcceptFired.current
+    ) {
+      autoAcceptFired.current = true;
+      handleAccept();
+    }
+  }, [autoAccept, isAuthenticated, preview, accepted, isRedeeming, handleAccept]);
+
   // Loading state
   if (isLoading) {
     return (
@@ -141,7 +177,7 @@ export function InvitationRedemption({
     const roleName = iamRoleDisplayName(preview.role);
     return (
       <div className={cn("mx-auto max-w-sm", className)}>
-        <div className="rounded-lg border border-primary/30 bg-primary-subtle p-6 text-center">
+        <div className="rounded-lg border border-primary/30 bg-primary-subtle p-6 text-center shadow-sm">
           <SuccessIcon />
           <h2 className="mt-3 text-base font-semibold text-foreground">
             You&rsquo;ve joined {orgName}
@@ -162,17 +198,17 @@ export function InvitationRedemption({
 
   return (
     <div className={cn("mx-auto max-w-sm", className)}>
-      <div className="rounded-lg border border-border bg-card p-6">
+      <div className="rounded-lg border border-border bg-card p-6 shadow-sm">
         {/* Org identity */}
         <div className="flex flex-col items-center text-center">
           {orgLogo ? (
             <img
               src={orgLogo}
               alt={`${orgName} logo`}
-              className="size-12 rounded-full object-cover"
+              className="size-14 rounded-full object-cover"
             />
           ) : (
-            <div className="flex size-12 items-center justify-center rounded-full bg-muted text-lg font-semibold text-muted-foreground">
+            <div className="flex size-14 items-center justify-center rounded-full bg-muted text-xl font-semibold text-muted-foreground">
               {orgInitial}
             </div>
           )}
@@ -182,23 +218,25 @@ export function InvitationRedemption({
           </h2>
 
           {preview.label && (
-            <p className="mt-1 text-sm text-muted-foreground">
+            <p className="mt-1 text-sm italic text-muted-foreground">
               {preview.label}
             </p>
           )}
         </div>
 
         {/* Role + expiry details */}
-        <div className="mt-4 flex items-center justify-center gap-3 text-xs text-muted-foreground">
-          <span className="inline-flex items-center gap-1">
+        <div className="mt-4 flex flex-col items-center gap-1.5 text-center">
+          <span className="inline-flex items-center gap-1.5 rounded-md border border-border bg-muted px-2.5 py-1 text-xs font-medium text-foreground">
             <ShieldIcon />
             {roleName} access
           </span>
+          <span className="text-[0.7rem] text-muted-foreground">
+            {iamRoleDescription(preview.role)}
+          </span>
           {expiresAt && (
-            <>
-              <Separator />
-              <span>{formatExpiry(expiresAt)}</span>
-            </>
+            <span className="text-[0.7rem] text-muted-foreground">
+              {formatExpiry(expiresAt)}
+            </span>
           )}
         </div>
 
@@ -217,7 +255,7 @@ export function InvitationRedemption({
                   onClick={handleAccept}
                   disabled={isRedeeming}
                   className={cn(
-                    "w-full inline-flex items-center justify-center gap-1.5 rounded-md px-4 py-2 text-sm font-medium",
+                    "w-full inline-flex items-center justify-center gap-1.5 rounded-md px-4 py-2.5 text-sm font-medium",
                     "bg-primary text-primary-foreground hover:bg-primary-hover",
                     "disabled:pointer-events-none disabled:opacity-50",
                     "transition-colors",
@@ -237,12 +275,12 @@ export function InvitationRedemption({
                 type="button"
                 onClick={onAuthRequired}
                 className={cn(
-                  "w-full inline-flex items-center justify-center gap-1.5 rounded-md px-4 py-2 text-sm font-medium",
+                  "w-full inline-flex items-center justify-center gap-1.5 rounded-md px-4 py-2.5 text-sm font-medium",
                   "bg-primary text-primary-foreground hover:bg-primary-hover",
                   "transition-colors",
                 )}
               >
-                Sign in to accept
+                Accept Invitation
               </button>
             )}
           </div>
@@ -279,7 +317,7 @@ function ErrorCard({
   onRetry?: () => void;
 }) {
   return (
-    <div className="rounded-lg border border-destructive/30 bg-destructive-subtle p-6 text-center">
+    <div className="rounded-lg border border-destructive/30 bg-destructive-subtle p-6 text-center shadow-sm">
       <p className="text-sm text-destructive">{message}</p>
       {onRetry && (
         <button
@@ -304,17 +342,18 @@ function ErrorCard({
 
 function LoadingSkeleton() {
   return (
-    <div className="rounded-lg border border-border bg-card p-6 space-y-4">
+    <div className="rounded-lg border border-border bg-card p-6 shadow-sm space-y-4">
       <div className="flex flex-col items-center gap-3">
-        <div className="size-12 rounded-full bg-muted-subtle animate-pulse" />
+        <div className="size-14 rounded-full bg-muted-subtle animate-pulse" />
         <div className="h-5 w-40 rounded bg-muted-subtle animate-pulse" />
         <div className="h-4 w-56 rounded bg-muted-subtle animate-pulse" />
       </div>
-      <div className="flex justify-center gap-3">
-        <div className="h-4 w-24 rounded bg-muted-subtle animate-pulse" />
-        <div className="h-4 w-24 rounded bg-muted-subtle animate-pulse" />
+      <div className="flex flex-col items-center gap-1.5">
+        <div className="h-6 w-28 rounded-md bg-muted-subtle animate-pulse" />
+        <div className="h-3 w-44 rounded bg-muted-subtle animate-pulse" />
+        <div className="h-3 w-24 rounded bg-muted-subtle animate-pulse" />
       </div>
-      <div className="h-10 w-full rounded-md bg-muted-subtle animate-pulse" />
+      <div className="h-[42px] w-full rounded-md bg-muted-subtle animate-pulse" />
     </div>
   );
 }
@@ -340,18 +379,6 @@ function formatExpiry(date: Date): string {
   })}`;
 }
 
-// ---------------------------------------------------------------------------
-// Separator (internal)
-// ---------------------------------------------------------------------------
-
-function Separator() {
-  return (
-    <span className="text-border" aria-hidden="true">
-      &middot;
-    </span>
-  );
-}
-
 // ---------------------------------------------------------------------------
 // Icons
 // ---------------------------------------------------------------------------

package/src/invitation/__tests__/useCreateInvitation.test.tsx

@@ -0,0 +1,189 @@
+import { describe, it, expect, vi } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import type { ReactNode } from "react";
+import type { Stigmer, InvitationInput } from "@stigmer/sdk";
+import { create } from "@bufbuild/protobuf";
+import { InvitationSchema } from "@stigmer/protos/ai/stigmer/iam/invitation/v1/api_pb";
+import { InvitationSpecSchema } from "@stigmer/protos/ai/stigmer/iam/invitation/v1/spec_pb";
+import { ApiResourceMetadataSchema } from "@stigmer/protos/ai/stigmer/commons/apiresource/metadata_pb";
+import { IamRole } from "@stigmer/protos/ai/stigmer/iam/v1/enum_pb";
+import { timestampFromDate } from "@bufbuild/protobuf/wkt";
+import { StigmerContext } from "../../context";
+import { useCreateInvitation } from "../useCreateInvitation";
+
+function createMockInvitation(input: InvitationInput) {
+  return Object.assign(create(InvitationSchema), {
+    apiVersion: "iam.stigmer.ai/v1",
+    kind: "Invitation",
+    metadata: Object.assign(create(ApiResourceMetadataSchema), {
+      id: "inv-123",
+      name: input.name,
+      org: input.org,
+    }),
+    spec: Object.assign(create(InvitationSpecSchema), {
+      role: input.role,
+      expiresAt: timestampFromDate(
+        input.expiresAt instanceof Date
+          ? input.expiresAt
+          : new Date(input.expiresAt),
+      ),
+      label: input.label ?? "",
+    }),
+    status: { token: "tok_abc123", state: 1, redemptionCount: 0, redemptions: [] },
+  });
+}
+
+function createWrapper(mockCreate: typeof vi.fn) {
+  const mockClient = {
+    invitation: { create: mockCreate },
+  } as unknown as Stigmer;
+
+  return ({ children }: { children: ReactNode }) => (
+    <StigmerContext.Provider value={mockClient}>
+      {children}
+    </StigmerContext.Provider>
+  );
+}
+
+describe("useCreateInvitation", () => {
+  it("delegates to stigmer.invitation.create with the provided input", async () => {
+    const input: InvitationInput = {
+      name: "eng-invite",
+      org: "acme",
+      role: IamRole.viewer,
+      expiresAt: new Date("2026-06-19T00:00:00Z"),
+      label: "Engineering invite",
+    };
+
+    const mockCreate = vi.fn().mockResolvedValue(createMockInvitation(input));
+    const wrapper = createWrapper(mockCreate);
+
+    const { result } = renderHook(() => useCreateInvitation(), { wrapper });
+
+    let invitation: unknown;
+    await act(async () => {
+      invitation = await result.current.create(input);
+    });
+
+    expect(mockCreate).toHaveBeenCalledOnce();
+    expect(mockCreate).toHaveBeenCalledWith(input);
+    expect(invitation).toBeDefined();
+  });
+
+  it("sets isCreating to true during the request", async () => {
+    let resolvePromise: (value: unknown) => void;
+    const pendingPromise = new Promise((resolve) => {
+      resolvePromise = resolve;
+    });
+
+    const mockCreate = vi.fn().mockReturnValue(pendingPromise);
+    const wrapper = createWrapper(mockCreate);
+
+    const { result } = renderHook(() => useCreateInvitation(), { wrapper });
+
+    expect(result.current.isCreating).toBe(false);
+
+    let createPromise: Promise<unknown>;
+    act(() => {
+      createPromise = result.current.create({
+        name: "test",
+        org: "acme",
+        role: IamRole.viewer,
+        expiresAt: new Date(),
+      });
+    });
+
+    expect(result.current.isCreating).toBe(true);
+
+    const mockResult = createMockInvitation({
+      name: "test",
+      org: "acme",
+      role: IamRole.viewer,
+      expiresAt: new Date(),
+    });
+
+    await act(async () => {
+      resolvePromise!(mockResult);
+      await createPromise!;
+    });
+
+    expect(result.current.isCreating).toBe(false);
+  });
+
+  it("sets error state when creation fails", async () => {
+    const mockCreate = vi.fn().mockRejectedValue(new Error("permission denied"));
+    const wrapper = createWrapper(mockCreate);
+
+    const { result } = renderHook(() => useCreateInvitation(), { wrapper });
+
+    await act(async () => {
+      try {
+        await result.current.create({
+          name: "fail-test",
+          org: "acme",
+          role: IamRole.admin,
+          expiresAt: new Date(),
+        });
+      } catch {
+        // expected
+      }
+    });
+
+    expect(result.current.error).toBeInstanceOf(Error);
+    expect(result.current.error!.message).toBe("permission denied");
+  });
+
+  it("clearError resets the error state", async () => {
+    const mockCreate = vi.fn().mockRejectedValue(new Error("oops"));
+    const wrapper = createWrapper(mockCreate);
+
+    const { result } = renderHook(() => useCreateInvitation(), { wrapper });
+
+    await act(async () => {
+      try {
+        await result.current.create({
+          name: "err",
+          org: "acme",
+          role: IamRole.viewer,
+          expiresAt: new Date(),
+        });
+      } catch {
+        // expected
+      }
+    });
+
+    expect(result.current.error).not.toBeNull();
+
+    act(() => {
+      result.current.clearError();
+    });
+
+    expect(result.current.error).toBeNull();
+  });
+
+  it("accepts expiresAt as a Date matching the UI daysFromNow pattern", async () => {
+    const sevenDaysFromNow = new Date();
+    sevenDaysFromNow.setDate(sevenDaysFromNow.getDate() + 7);
+
+    const input: InvitationInput = {
+      name: "7day-link",
+      org: "acme",
+      role: IamRole.member,
+      expiresAt: sevenDaysFromNow,
+      maxRedemptions: 0,
+    };
+
+    const mockCreate = vi.fn().mockResolvedValue(createMockInvitation(input));
+    const wrapper = createWrapper(mockCreate);
+
+    const { result } = renderHook(() => useCreateInvitation(), { wrapper });
+
+    await act(async () => {
+      await result.current.create(input);
+    });
+
+    const passedInput = mockCreate.mock.calls[0][0] as InvitationInput;
+    expect(passedInput.expiresAt).toBeInstanceOf(Date);
+    expect((passedInput.expiresAt as Date).getTime()).toBe(sevenDaysFromNow.getTime());
+  });
+});