@outseta/react 0.2.5 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@outseta/react",
-  "version": "0.2.5",
+  "version": "0.3.0",
   "description": "React hooks and components for the Outseta API",
   "license": "MIT",
   "repository": {
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.0.0",
-    "@outseta/api-client": "0.2.5"
+    "@outseta/api-client": "0.3.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"

package/src/components/AuthCta.tsx

@@ -0,0 +1,35 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { useOutseta } from "./OutsetaProvider.js";
+
+export interface AuthCtaProps extends HTMLAttributes<HTMLDivElement> {
+  /** Message shown before the login/signup actions. */
+  message?: ReactNode;
+  /** Label for the signup button. */
+  signupLabel?: ReactNode;
+  /** Label for the login button. */
+  loginLabel?: ReactNode;
+}
+
+/**
+ * Generic login/signup call-to-action for gated content.
+ */
+export function AuthCta({
+  message = "Sign up or log in to continue.",
+  signupLabel = "Sign up",
+  loginLabel = "Log in",
+  ...props
+}: AuthCtaProps) {
+  const { openSignup, openLogin } = useOutseta();
+
+  return (
+    <div {...props}>
+      <p>{message}</p>
+      <button type="button" onClick={() => openSignup()}>
+        {signupLabel}
+      </button>{" "}
+      <button type="button" onClick={() => openLogin()}>
+        {loginLabel}
+      </button>
+    </div>
+  );
+}

package/src/components/ProtectedRoute.tsx

@@ -1,42 +1,56 @@
 import type { ReactNode } from "react";
 import { useOutseta } from "./OutsetaProvider.js";
+import { AuthCta } from "./AuthCta.js";
+import { UpgradeCta } from "./UpgradeCta.js";
 
 export interface ProtectedRouteProps {
-  /** Plan UIDs that grant access to this route */
+  /** Plan UIDs that grant access to this route. */
   plans: string[];
-  /** Content to render when access is granted */
+  /** Content to render when access is granted. */
   children: ReactNode;
-  /** Rendered while checking auth status (defaults to null) */
+  /** Rendered while checking auth status. Defaults to null. */
   loading?: ReactNode;
-  /** Rendered when user is logged in but lacks the right plan */
+  /** Rendered when user is logged in but lacks the right plan. */
   accessDenied?: ReactNode;
-  /** Rendered when user is not logged in */
+  /** Rendered when user is not logged in. */
   unauthenticated?: ReactNode;
+  /** Message for the default unauthenticated CTA. */
+  unauthenticatedMessage?: ReactNode;
+  /** Message for the default upgrade/manage subscription CTA. */
+  accessDeniedMessage?: ReactNode;
 }
 
 /**
  * Protects content behind plan-based access control.
  *
- * Checks the current user's subscription plan UID against the
- * provided list of allowed plan UIDs.
+ * Checks the current user's subscription plan UID against the provided list of
+ * allowed plan UIDs. If access is denied, generic login/signup or upgrade CTAs
+ * are rendered by default and can be replaced with the `unauthenticated` and
+ * `accessDenied` props.
  */
 export function ProtectedRoute({
   plans,
   children,
   loading = null,
-  accessDenied = null,
-  unauthenticated = null,
+  accessDenied,
+  unauthenticated,
+  unauthenticatedMessage,
+  accessDeniedMessage,
 }: ProtectedRouteProps) {
   const { user, isLoading } = useOutseta();
 
   if (isLoading) return <>{loading}</>;
 
-  if (!user) return <>{unauthenticated}</>;
+  if (!user) {
+    return <>{unauthenticated ?? <AuthCta message={unauthenticatedMessage} />}</>;
+  }
 
   const userPlanUid = user.Account?.CurrentSubscription?.Plan?.Uid;
   const hasAccess = userPlanUid ? plans.includes(userPlanUid) : false;
 
-  if (!hasAccess) return <>{accessDenied}</>;
+  if (!hasAccess) {
+    return <>{accessDenied ?? <UpgradeCta message={accessDeniedMessage} />}</>;
+  }
 
   return <>{children}</>;
 }

package/src/components/UpgradeCta.tsx

@@ -0,0 +1,33 @@
+import type { HTMLAttributes, ReactNode } from "react";
+import { useOutseta } from "./OutsetaProvider.js";
+import type { ProfileWidgetOptions } from "./types.js";
+
+export interface UpgradeCtaProps extends HTMLAttributes<HTMLDivElement> {
+  /** Message shown before the upgrade/manage subscription action. */
+  message?: ReactNode;
+  /** Label for the profile/upgrade button. */
+  buttonLabel?: ReactNode;
+  /** Options passed to the Outseta profile widget. */
+  profileOptions?: ProfileWidgetOptions;
+}
+
+/**
+ * Generic upgrade/manage-subscription call-to-action for gated content.
+ */
+export function UpgradeCta({
+  message = "Your current plan does not include access to this content.",
+  buttonLabel = "Manage subscription",
+  profileOptions = { tab: "planChange" },
+  ...props
+}: UpgradeCtaProps) {
+  const { openProfile } = useOutseta();
+
+  return (
+    <div {...props}>
+      <p>{message}</p>
+      <button type="button" onClick={() => openProfile(profileOptions)}>
+        {buttonLabel}
+      </button>
+    </div>
+  );
+}

package/src/components/index.ts

@@ -12,6 +12,10 @@ export { ProfileEmbed } from "./ProfileEmbed.js";
 export type { ProfileEmbedProps } from "./ProfileEmbed.js";
 export { ProtectedRoute } from "./ProtectedRoute.js";
 export type { ProtectedRouteProps } from "./ProtectedRoute.js";
+export { AuthCta } from "./AuthCta.js";
+export type { AuthCtaProps } from "./AuthCta.js";
+export { UpgradeCta } from "./UpgradeCta.js";
+export type { UpgradeCtaProps } from "./UpgradeCta.js";
 export { PurchaseAddonButton } from "./PurchaseAddonButton.js";
 export type { PurchaseAddonButtonProps } from "./PurchaseAddonButton.js";
 export { LogoutButton } from "./LogoutButton.js";

package/src/index.ts

@@ -4,5 +4,10 @@ export type { OutsetaCredentials } from "@outseta/api-client";
 // Outseta embed components and hooks
 export * from "./components/index.js";
 
-// Re-export generated React Query hooks once generated
-// export * from "./generated/index.js";
+// Generated React Query hooks and schema types
+export * from "./generated/activity/activity.js";
+export * from "./generated/billing/billing.js";
+export * from "./generated/crm/crm.js";
+export * from "./generated/email/email.js";
+export * from "./generated/support/support.js";
+export * from "./generated/outsetaAPI.schemas.js";