@outseta/react 0.3.7 → 0.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@outseta/react",
-  "version": "0.3.7",
+  "version": "0.4.1",
   "description": "React hooks and components for the Outseta API",
   "license": "MIT",
   "repository": {
@@ -18,15 +18,21 @@
     }
   },
   "dependencies": {
-    "@tanstack/react-query": "^5.0.0",
-    "@outseta/api-client": "0.3.6"
+    "@outseta/api-client": "0.3.7"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/react": "^16.1.0",
     "@types/react": "^19.0.0",
-    "typescript": "^5.7.0"
+    "@types/react-dom": "^19.0.0",
+    "jsdom": "^26.0.0",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "typescript": "^5.7.0",
+    "vitest": "^3.2.0"
   },
   "sideEffects": false,
   "files": [
@@ -40,6 +46,8 @@
   "scripts": {
     "build": "rimraf dist && bun build src/index.ts --outdir dist --target browser --format esm --packages external",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint src --ignore-pattern generated"
+    "lint": "eslint src --ignore-pattern generated",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
 }

package/src/components/AuthButton.tsx

@@ -0,0 +1,33 @@
+import type { ButtonHTMLAttributes } from "react";
+import { useOutseta } from "./OutsetaProvider.js";
+import type { AuthWidgetOptions } from "./types.js";
+import { composeButtonClick } from "./utils.js";
+
+export interface AuthButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Options passed to `Outseta.auth.open`. */
+  options?: AuthWidgetOptions;
+}
+
+/**
+ * Unstyled button that opens the Outseta auth widget.
+ */
+export function AuthButton({
+  children = "Continue",
+  options,
+  onClick,
+  type = "button",
+  ...props
+}: AuthButtonProps) {
+  const { openAuth } = useOutseta();
+
+  return (
+    <button
+      type={type}
+      {...props}
+      onClick={composeButtonClick(onClick, () => openAuth(options))}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/AuthEmbed.tsx

@@ -5,6 +5,8 @@ export interface AuthEmbedProps extends HTMLAttributes<HTMLDivElement> {
   widgetMode?: "login" | "register" | "login|register";
   /** Registration defaults as a JSON string or object */
   registrationDefaults?: string | Record<string, unknown>;
+  /** Props applied to the element Outseta mounts into. */
+  widgetProps?: HTMLAttributes<HTMLDivElement>;
 }
 
 /**
@@ -16,6 +18,7 @@ export interface AuthEmbedProps extends HTMLAttributes<HTMLDivElement> {
 export function AuthEmbed({
   widgetMode = "login|register",
   registrationDefaults,
+  widgetProps,
   ...props
 }: AuthEmbedProps) {
   const defaults =
@@ -28,6 +31,7 @@ export function AuthEmbed({
   return (
     <div key={widgetMode} {...props}>
       <div
+        {...widgetProps}
         data-o-auth="1"
         data-mode="embed"
         data-widget-mode={widgetMode}

package/src/components/EmailListButton.tsx

@@ -0,0 +1,38 @@
+import type { ButtonHTMLAttributes } from "react";
+import { useOutseta } from "./OutsetaProvider.js";
+import type { EmailListWidgetOptions } from "./types.js";
+import { composeButtonClick } from "./utils.js";
+
+export interface EmailListButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** The Outseta email list UID to subscribe to. */
+  emailListUid: string;
+  /** Options passed to `Outseta.emailList.open`. */
+  options?: Omit<EmailListWidgetOptions, "emailListUid">;
+}
+
+/**
+ * Unstyled button that opens the Outseta email list widget.
+ */
+export function EmailListButton({
+  children = "Subscribe",
+  emailListUid,
+  options,
+  onClick,
+  type = "button",
+  ...props
+}: EmailListButtonProps) {
+  const { openEmailList } = useOutseta();
+
+  return (
+    <button
+      type={type}
+      {...props}
+      onClick={composeButtonClick(onClick, () =>
+        openEmailList({ mode: "popup", ...options, emailListUid }),
+      )}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/EmailListEmbed.tsx

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from "react";
+
+export interface EmailListEmbedProps extends HTMLAttributes<HTMLDivElement> {
+  /** The Outseta email list UID to subscribe to. */
+  emailListUid: string;
+  /** Props applied to the element Outseta mounts into. */
+  widgetProps?: HTMLAttributes<HTMLDivElement>;
+}
+
+/**
+ * Renders an embedded Outseta email list widget.
+ */
+export function EmailListEmbed({
+  emailListUid,
+  widgetProps,
+  ...props
+}: EmailListEmbedProps) {
+  return (
+    <div key={emailListUid} {...props}>
+      <div
+        {...widgetProps}
+        data-o-email-list="1"
+        data-mode="embed"
+        data-email-list-uid={emailListUid}
+      />
+    </div>
+  );
+}

package/src/components/EmailListForm.tsx

@@ -0,0 +1,34 @@
+import type { FormHTMLAttributes } from "react";
+
+export interface EmailListFormProps extends FormHTMLAttributes<HTMLFormElement> {
+  /** Your Outseta domain, e.g. "your-company.outseta.com". */
+  domain: string;
+  /** The Outseta email list UID to subscribe to. */
+  emailListUid: string;
+}
+
+function getSubscribeAction(domain: string, emailListUid: string): string {
+  const hasProtocol = domain.startsWith("http://") || domain.startsWith("https://");
+  const baseUrl = hasProtocol ? domain : `https://${domain}`;
+  return `${baseUrl.replace(/\/$/, "")}/email/lists/${emailListUid}/subscribe`;
+}
+
+/**
+ * Headless native form wrapper for Outseta email list subscriptions.
+ * Provide your own fields and styling; Outseta expects an `Email` input.
+ */
+export function EmailListForm({
+  domain,
+  emailListUid,
+  action,
+  method = "post",
+  ...props
+}: EmailListFormProps) {
+  return (
+    <form
+      action={action ?? getSubscribeAction(domain, emailListUid)}
+      method={method}
+      {...props}
+    />
+  );
+}

package/src/components/LeadCaptureButton.tsx

@@ -0,0 +1,38 @@
+import type { ButtonHTMLAttributes } from "react";
+import { useOutseta } from "./OutsetaProvider.js";
+import type { LeadCaptureWidgetOptions } from "./types.js";
+import { composeButtonClick } from "./utils.js";
+
+export interface LeadCaptureButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** The Outseta lead capture form UID to show. */
+  formUid: string;
+  /** Options passed to `Outseta.leadCapture.open`. */
+  options?: Omit<LeadCaptureWidgetOptions, "formUid">;
+}
+
+/**
+ * Unstyled button that opens the Outseta lead capture widget.
+ */
+export function LeadCaptureButton({
+  children = "Get in touch",
+  formUid,
+  options,
+  onClick,
+  type = "button",
+  ...props
+}: LeadCaptureButtonProps) {
+  const { openLeadCapture } = useOutseta();
+
+  return (
+    <button
+      type={type}
+      {...props}
+      onClick={composeButtonClick(onClick, () =>
+        openLeadCapture({ mode: "popup", ...options, formUid }),
+      )}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/LeadCaptureEmbed.tsx

@@ -0,0 +1,28 @@
+import type { HTMLAttributes } from "react";
+
+export interface LeadCaptureEmbedProps extends HTMLAttributes<HTMLDivElement> {
+  /** The Outseta lead capture form UID to show. */
+  formUid: string;
+  /** Props applied to the element Outseta mounts into. */
+  widgetProps?: HTMLAttributes<HTMLDivElement>;
+}
+
+/**
+ * Renders an embedded Outseta lead capture widget.
+ */
+export function LeadCaptureEmbed({
+  formUid,
+  widgetProps,
+  ...props
+}: LeadCaptureEmbedProps) {
+  return (
+    <div key={formUid} {...props}>
+      <div
+        {...widgetProps}
+        data-o-lead-capture="1"
+        data-mode="embed"
+        data-form-uid={formUid}
+      />
+    </div>
+  );
+}

package/src/components/LoginButton.tsx

@@ -0,0 +1,18 @@
+import { AuthButton, type AuthButtonProps } from "./AuthButton.js";
+
+export type LoginButtonProps = AuthButtonProps;
+
+/**
+ * Unstyled button that opens the Outseta auth widget in login mode.
+ */
+export function LoginButton({
+  children = "Log in",
+  options,
+  ...props
+}: LoginButtonProps) {
+  return (
+    <AuthButton options={{ ...options, widgetMode: "login" }} {...props}>
+      {children}
+    </AuthButton>
+  );
+}

package/src/components/LogoutButton.tsx

@@ -1,17 +1,24 @@
 import type { ButtonHTMLAttributes } from "react";
 import { useOutseta } from "./OutsetaProvider.js";
+import { composeButtonClick } from "./utils.js";
 
 /**
  * Button that logs the user out of Outseta.
  */
 export function LogoutButton({
   children = "Logout",
+  onClick,
+  type = "button",
   ...props
 }: ButtonHTMLAttributes<HTMLButtonElement>) {
   const { logout } = useOutseta();
 
   return (
-    <button onClick={logout} {...props}>
+    <button
+      type={type}
+      {...props}
+      onClick={composeButtonClick(onClick, logout)}
+    >
       {children}
     </button>
   );

package/src/components/OutsetaProvider.tsx

@@ -8,18 +8,25 @@ import {
 } from "react";
 import type {
   AuthWidgetOptions,
+  EmailListWidgetOptions,
+  LeadCaptureWidgetOptions,
   OutsetaEmbed,
   OutsetaUser,
   ProfileWidgetOptions,
+  SupportWidgetOptions,
 } from "./types.js";
 
 export interface OutsetaContextValue {
   user: OutsetaUser | null;
   isLoading: boolean;
   logout: () => void;
+  openAuth: (options?: AuthWidgetOptions) => void;
   openLogin: (options?: AuthWidgetOptions) => void;
   openSignup: (options?: AuthWidgetOptions) => void;
   openProfile: (options?: ProfileWidgetOptions) => void;
+  openSupport: (options?: SupportWidgetOptions) => void;
+  openEmailList: (options: EmailListWidgetOptions) => void;
+  openLeadCapture: (options: LeadCaptureWidgetOptions) => void;
 }
 
 const OutsetaContext = createContext<OutsetaContextValue | null>(null);
@@ -39,6 +46,11 @@ function getOutseta(): OutsetaEmbed | null {
   return null;
 }
 
+function getCurrentUrl(): string | undefined {
+  if (typeof window === "undefined") return undefined;
+  return window.location.href;
+}
+
 export function OutsetaProvider({ children }: { children: ReactNode }) {
   const [status, setStatus] = useState<"init" | "ready">("init");
   const [user, setUser] = useState<OutsetaUser | null>(null);
@@ -114,35 +126,52 @@ export function OutsetaProvider({ children }: { children: ReactNode }) {
     outseta.logout();
   };
 
-  const openLogin = (options: AuthWidgetOptions = {}) => {
+  const openAuth = (options: AuthWidgetOptions = {}) => {
     outsetaRef.current?.auth.open({
       widgetMode: "login|register",
-      authenticationCallbackUrl: window.location.href,
+      mode: "popup",
+      authenticationCallbackUrl: getCurrentUrl(),
       ...options,
     });
   };
 
+  const openLogin = (options: AuthWidgetOptions = {}) => {
+    openAuth({ ...options, widgetMode: "login" });
+  };
+
   const openSignup = (options: AuthWidgetOptions = {}) => {
-    outsetaRef.current?.auth.open({
-      widgetMode: "register",
-      authenticationCallbackUrl: window.location.href,
-      ...options,
-    });
+    openAuth({ ...options, widgetMode: "register" });
   };
 
   const openProfile = (options: ProfileWidgetOptions = {}) => {
     outsetaRef.current?.profile.open({ tab: "profile", ...options });
   };
 
+  const openSupport = (options: SupportWidgetOptions = {}) => {
+    outsetaRef.current?.support?.open({ mode: "popup", ...options });
+  };
+
+  const openEmailList = (options: EmailListWidgetOptions) => {
+    outsetaRef.current?.emailList?.open({ mode: "popup", ...options });
+  };
+
+  const openLeadCapture = (options: LeadCaptureWidgetOptions) => {
+    outsetaRef.current?.leadCapture?.open({ mode: "popup", ...options });
+  };
+
   return (
     <OutsetaContext.Provider
       value={{
         user,
         isLoading: status !== "ready",
         logout,
+        openAuth,
         openLogin,
         openSignup,
         openProfile,
+        openSupport,
+        openEmailList,
+        openLeadCapture,
       }}
     >
       {children}

package/src/components/ProfileButton.tsx

@@ -0,0 +1,35 @@
+import type { ButtonHTMLAttributes } from "react";
+import { useOutseta } from "./OutsetaProvider.js";
+import type { ProfileWidgetOptions } from "./types.js";
+import { composeButtonClick } from "./utils.js";
+
+export interface ProfileButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Options passed to `Outseta.profile.open`. */
+  options?: ProfileWidgetOptions;
+}
+
+/**
+ * Unstyled button that opens the Outseta profile widget.
+ */
+export function ProfileButton({
+  children = "Profile",
+  options,
+  onClick,
+  type = "button",
+  ...props
+}: ProfileButtonProps) {
+  const { openProfile } = useOutseta();
+
+  return (
+    <button
+      type={type}
+      {...props}
+      onClick={composeButtonClick(onClick, () =>
+        openProfile({ mode: "popup", ...options }),
+      )}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/ProfileEmbed.tsx

@@ -9,6 +9,8 @@ export interface ProfileEmbedProps extends HTMLAttributes<HTMLDivElement> {
     | "purchaseAddOn"
     | "passwordChange"
     | "teamMembers";
+  /** Props applied to the element Outseta mounts into. */
+  widgetProps?: HTMLAttributes<HTMLDivElement>;
 }
 
 /**
@@ -17,10 +19,14 @@ export interface ProfileEmbedProps extends HTMLAttributes<HTMLDivElement> {
  * Uses `key={tab}` internally so React re-mounts the widget
  * when the tab changes.
  */
-export function ProfileEmbed({ tab = "profile", ...props }: ProfileEmbedProps) {
+export function ProfileEmbed({
+  tab = "profile",
+  widgetProps,
+  ...props
+}: ProfileEmbedProps) {
   return (
     <div key={tab} {...props}>
-      <div data-o-profile="1" data-mode="embed" data-tab={tab} />
+      <div {...widgetProps} data-o-profile="1" data-mode="embed" data-tab={tab} />
     </div>
   );
 }

package/src/components/PurchaseAddonButton.tsx

@@ -1,5 +1,6 @@
 import type { ButtonHTMLAttributes } from "react";
 import { useOutseta } from "./OutsetaProvider.js";
+import { composeButtonClick } from "./utils.js";
 
 export interface PurchaseAddonButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -17,20 +18,23 @@ export function PurchaseAddonButton({
   addonUid,
   billingRenewalTerm = 4,
   children = "Buy Add-on",
+  onClick,
+  type = "button",
   ...props
 }: PurchaseAddonButtonProps) {
   const { openProfile } = useOutseta();
 
   return (
     <button
-      onClick={() =>
+      type={type}
+      {...props}
+      onClick={composeButtonClick(onClick, () =>
         openProfile({
           mode: "popup",
           tab: "purchaseAddOn",
           stateProps: { addOnUid: addonUid, billingRenewalTerm },
-        })
-      }
-      {...props}
+        }),
+      )}
     >
       {children}
     </button>

package/src/components/SignupButton.tsx

@@ -0,0 +1,18 @@
+import { AuthButton, type AuthButtonProps } from "./AuthButton.js";
+
+export type SignupButtonProps = AuthButtonProps;
+
+/**
+ * Unstyled button that opens the Outseta auth widget in registration mode.
+ */
+export function SignupButton({
+  children = "Sign up",
+  options,
+  ...props
+}: SignupButtonProps) {
+  return (
+    <AuthButton options={{ ...options, widgetMode: "register" }} {...props}>
+      {children}
+    </AuthButton>
+  );
+}

package/src/components/SupportButton.tsx

@@ -0,0 +1,35 @@
+import type { ButtonHTMLAttributes } from "react";
+import { useOutseta } from "./OutsetaProvider.js";
+import type { SupportWidgetOptions } from "./types.js";
+import { composeButtonClick } from "./utils.js";
+
+export interface SupportButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Options passed to `Outseta.support.open`. */
+  options?: SupportWidgetOptions;
+}
+
+/**
+ * Unstyled button that opens the Outseta support widget.
+ */
+export function SupportButton({
+  children = "Contact support",
+  options,
+  onClick,
+  type = "button",
+  ...props
+}: SupportButtonProps) {
+  const { openSupport } = useOutseta();
+
+  return (
+    <button
+      type={type}
+      {...props}
+      onClick={composeButtonClick(onClick, () =>
+        openSupport({ mode: "popup", ...options }),
+      )}
+    >
+      {children}
+    </button>
+  );
+}

package/src/components/SupportEmbed.tsx

@@ -0,0 +1,17 @@
+import type { HTMLAttributes } from "react";
+
+export interface SupportEmbedProps extends HTMLAttributes<HTMLDivElement> {
+  /** Props applied to the element Outseta mounts into. */
+  widgetProps?: HTMLAttributes<HTMLDivElement>;
+}
+
+/**
+ * Renders an embedded Outseta support widget.
+ */
+export function SupportEmbed({ widgetProps, ...props }: SupportEmbedProps) {
+  return (
+    <div {...props}>
+      <div {...widgetProps} data-o-support="1" data-mode="embed" />
+    </div>
+  );
+}

package/src/components/index.ts

@@ -1,15 +1,42 @@
 export type {
   OutsetaUser,
   OutsetaEmbed,
+  OutsetaWidgetMode,
+  AuthWidgetMode,
   AuthWidgetOptions,
   ProfileWidgetOptions,
+  SupportWidgetOptions,
+  EmailListWidgetOptions,
+  LeadCaptureWidgetOptions,
 } from "./types.js";
 export { OutsetaProvider, useOutseta } from "./OutsetaProvider.js";
 export type { OutsetaContextValue } from "./OutsetaProvider.js";
 export { AuthEmbed } from "./AuthEmbed.js";
 export type { AuthEmbedProps } from "./AuthEmbed.js";
+export { AuthButton } from "./AuthButton.js";
+export type { AuthButtonProps } from "./AuthButton.js";
+export { LoginButton } from "./LoginButton.js";
+export type { LoginButtonProps } from "./LoginButton.js";
+export { SignupButton } from "./SignupButton.js";
+export type { SignupButtonProps } from "./SignupButton.js";
 export { ProfileEmbed } from "./ProfileEmbed.js";
 export type { ProfileEmbedProps } from "./ProfileEmbed.js";
+export { ProfileButton } from "./ProfileButton.js";
+export type { ProfileButtonProps } from "./ProfileButton.js";
+export { SupportEmbed } from "./SupportEmbed.js";
+export type { SupportEmbedProps } from "./SupportEmbed.js";
+export { SupportButton } from "./SupportButton.js";
+export type { SupportButtonProps } from "./SupportButton.js";
+export { EmailListEmbed } from "./EmailListEmbed.js";
+export type { EmailListEmbedProps } from "./EmailListEmbed.js";
+export { EmailListButton } from "./EmailListButton.js";
+export type { EmailListButtonProps } from "./EmailListButton.js";
+export { EmailListForm } from "./EmailListForm.js";
+export type { EmailListFormProps } from "./EmailListForm.js";
+export { LeadCaptureEmbed } from "./LeadCaptureEmbed.js";
+export type { LeadCaptureEmbedProps } from "./LeadCaptureEmbed.js";
+export { LeadCaptureButton } from "./LeadCaptureButton.js";
+export type { LeadCaptureButtonProps } from "./LeadCaptureButton.js";
 export { ProtectedRoute } from "./ProtectedRoute.js";
 export type { ProtectedRouteProps } from "./ProtectedRoute.js";
 export { AuthCta } from "./AuthCta.js";