@lockerverse/react 0.2.64 → 0.2.65

package/README.md

@@ -17,7 +17,10 @@ npm install @stripe/react-stripe-js @stripe/stripe-js
 ## Use
 
 ```tsx
-import { LockerversePayment } from "@lockerverse/react/payment";
+import {
+  LockerversePayment,
+  type LockerversePaymentSelectionItem,
+} from "@lockerverse/react/payment";
 import "@lockerverse/react/payment.css";
 
 export function Checkout() {
@@ -41,6 +44,70 @@ export function Checkout() {
 
 The original `@lockerverse/react` and `@lockerverse/react/styles.css` payment imports remain supported.
 
+## Custom Product UI
+
+Use `useLockerverseWidget` to build custom Product presentation from the live
+Lockerverse catalog. This entry point does not import the payment UI or Stripe.
+
+```tsx
+import { LockerversePayment } from "@lockerverse/react/payment";
+import "@lockerverse/react/payment.css";
+import { useLockerverseWidget } from "@lockerverse/react/widget";
+import { useState } from "react";
+
+const widgetOptions = {
+  communitySlug: "auburn",
+  widgetSlug: "tailgate-party",
+};
+
+export function CustomProductCheckout() {
+  const { error, loading, products, refresh, widget } =
+    useLockerverseWidget(widgetOptions);
+  const [selection, setSelection] =
+    useState<LockerversePaymentSelectionItem | null>(null);
+
+  if (loading) {
+    return <p>Loading {widget?.name ?? "checkout"}...</p>;
+  }
+  if (error) {
+    return <button onClick={refresh}>Try again</button>;
+  }
+  if (selection) {
+    return (
+      <LockerversePayment
+        {...widgetOptions}
+        selection={[selection]}
+      />
+    );
+  }
+
+  return products
+    .filter((product) => product.pricingMode === "fixed")
+    .map((product) => (
+      <button
+        key={product.id}
+        onClick={() =>
+          setSelection(
+            product.paymentOption === "one-time"
+              ? { productSlug: product.slug, quantity: 1 }
+              : { productSlug: product.slug }
+          )
+        }
+      >
+        {product.name}
+      </button>
+    ));
+}
+```
+
+The hook returns immutable catalog data together with `status`, `loading`,
+`error`, and `refresh`. The host owns presentation and selection state. Pass the
+selected Product slugs to `LockerversePayment`; Lockerverse remains
+authoritative for availability, pricing, and payment.
+
+This small example shows fixed-price Products. For a custom-price Product, ask
+for the amount in the host UI and pass `amountCents` with `productSlug`.
+
 For a monthly or annual Product, omit quantity. The component shows the
 cadence and configures Stripe Elements for a subscription:
 

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { a as LockerversePaymentRecovery, c as LockerversePaymentTheme, i as LockerversePaymentProps, l as LockerversePaymentUncertain, n as LockerverseDonateLauncherProps, o as LockerversePaymentSelectionItem, r as LockerversePaymentBranding, s as LockerversePaymentStyle, t as LockerverseDonateLauncherPosition, u as LockerverseStripeLoader } from "./types.js";
 import { t as LockerverseDonateLauncher } from "./lockerverse-donate-launcher.js";
 import { t as LockerversePayment } from "./lockerverse-payment.js";
-export { LockerverseDonateLauncher, type LockerverseDonateLauncherPosition, type LockerverseDonateLauncherProps, LockerversePayment, type LockerversePaymentBranding, type LockerversePaymentProps, type LockerversePaymentRecovery, type LockerversePaymentSelectionItem, type LockerversePaymentStyle, type LockerversePaymentTheme, type LockerversePaymentUncertain, type LockerverseStripeLoader };
+import { n as UseLockerverseWidgetResult, r as useLockerverseWidget, t as LockerverseWidgetStatus } from "./use-lockerverse-widget.js";
+export { LockerverseDonateLauncher, type LockerverseDonateLauncherPosition, type LockerverseDonateLauncherProps, LockerversePayment, type LockerversePaymentBranding, type LockerversePaymentProps, type LockerversePaymentRecovery, type LockerversePaymentSelectionItem, type LockerversePaymentStyle, type LockerversePaymentTheme, type LockerversePaymentUncertain, type LockerverseStripeLoader, type LockerverseWidgetStatus, type UseLockerverseWidgetResult, useLockerverseWidget };

package/dist/index.js

@@ -1 +1 @@
-import{t as e}from"./lockerverse-payment.js";import{t}from"./lockerverse-donate-launcher.js";export{t as LockerverseDonateLauncher,e as LockerversePayment};
+import{t as e}from"./lockerverse-payment.js";import{t}from"./lockerverse-donate-launcher.js";import{t as n}from"./use-lockerverse-widget.js";export{t as LockerverseDonateLauncher,e as LockerversePayment,n as useLockerverseWidget};

package/dist/use-lockerverse-widget.d.ts

@@ -0,0 +1,17 @@
+import { CreateLockerverseWidgetOptions, LockerverseCatalog } from "@lockerverse/sdk/checkout";
+//#region src/use-lockerverse-widget.d.ts
+type LockerverseWidgetStatus = "error" | "loading" | "ready";
+type UseLockerverseWidgetResult = {
+  catalog: LockerverseCatalog | null;
+  community: LockerverseCatalog["community"] | null;
+  error: Error | null;
+  loading: boolean;
+  products: LockerverseCatalog["products"];
+  refresh: () => void;
+  status: LockerverseWidgetStatus;
+  widget: LockerverseCatalog["widget"] | null;
+};
+declare function useLockerverseWidget({ apiBaseUrl, communitySlug, environment, fetch, onError, requestTimeoutMs, sentryDsn, widgetSlug }: CreateLockerverseWidgetOptions): UseLockerverseWidgetResult;
+//#endregion
+export { UseLockerverseWidgetResult as n, useLockerverseWidget as r, LockerverseWidgetStatus as t };
+//# sourceMappingURL=use-lockerverse-widget.d.ts.map

package/dist/use-lockerverse-widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-lockerverse-widget.d.ts","names":[],"sources":["../src/use-lockerverse-widget.ts"],"mappings":";;KASY;KAEA;EACV,SAAS;EACT,WAAW;EACX,OAAO;EACP;EACA,UAAU;EACV;EACA,QAAQ;EACR,QAAQ;;iBAoBM,uBACd,YACA,eACA,aACA,OACA,SACA,kBACA,WACA,cACC,iCAAiC"}

package/dist/use-lockerverse-widget.js

@@ -0,0 +1,2 @@
+import{createLockerverseCheckoutClient as e}from"@lockerverse/sdk/checkout";import{useCallback as t,useEffect as n,useMemo as r,useRef as i,useState as a}from"react";const o=Object.freeze([]);function s(e){return e instanceof Error?e:Error(`Unable to load the Lockerverse widget.`)}function c({apiBaseUrl:c,communitySlug:l,environment:u,fetch:d,onError:f,requestTimeoutMs:p,sentryDsn:m,widgetSlug:h}){let g=r(()=>({...c===void 0?{}:{apiBaseUrl:c},communitySlug:l,...u===void 0?{}:{environment:u},...d===void 0?{}:{fetch:d},...p===void 0?{}:{requestTimeoutMs:p},...m===void 0?{}:{sentryDsn:m},widgetSlug:h}),[c,l,u,d,p,m,h]),[_,v]=a(0),[y,b]=a({catalog:null,configuration:null,error:null,status:`loading`}),x=i(f);x.current=f,n(()=>{let t=!0;b({catalog:null,configuration:g,error:null,status:`loading`});async function n(){try{let n=await e({...g,onError:e=>x.current?.(e)}).load();t&&b({catalog:n,configuration:g,error:null,status:`ready`})}catch(e){t&&b({catalog:null,configuration:g,error:s(e),status:`error`})}}return n(),()=>{t=!1}},[g,_]);let S=t(()=>{b({catalog:null,configuration:g,error:null,status:`loading`}),v(e=>e+1)},[g]),C=y.configuration===g?y:null,w=C?.catalog??null,T=C?.status??`loading`;return{catalog:w,community:w?.community??null,error:C?.error??null,loading:T===`loading`,products:w?.products??o,refresh:S,status:T,widget:w?.widget??null}}export{c as t};
+//# sourceMappingURL=use-lockerverse-widget.js.map

package/dist/use-lockerverse-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-lockerverse-widget.js","names":[],"sources":["../src/use-lockerverse-widget.ts"],"sourcesContent":["import type {\n  CreateLockerverseWidgetOptions,\n  LockerverseCatalog,\n} from \"@lockerverse/sdk/checkout\";\nimport { createLockerverseCheckoutClient } from \"@lockerverse/sdk/checkout\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\ntype WidgetConfiguration = Omit<CreateLockerverseWidgetOptions, \"onError\">;\n\nexport type LockerverseWidgetStatus = \"error\" | \"loading\" | \"ready\";\n\nexport type UseLockerverseWidgetResult = {\n  catalog: LockerverseCatalog | null;\n  community: LockerverseCatalog[\"community\"] | null;\n  error: Error | null;\n  loading: boolean;\n  products: LockerverseCatalog[\"products\"];\n  refresh: () => void;\n  status: LockerverseWidgetStatus;\n  widget: LockerverseCatalog[\"widget\"] | null;\n};\n\ntype WidgetLoadState = {\n  catalog: LockerverseCatalog | null;\n  configuration: WidgetConfiguration | null;\n  error: Error | null;\n  status: LockerverseWidgetStatus;\n};\n\nconst EMPTY_PRODUCTS = Object.freeze(\n  []\n) as unknown as LockerverseCatalog[\"products\"];\n\nfunction toError(error: unknown) {\n  return error instanceof Error\n    ? error\n    : new Error(\"Unable to load the Lockerverse widget.\");\n}\n\nexport function useLockerverseWidget({\n  apiBaseUrl,\n  communitySlug,\n  environment,\n  fetch,\n  onError,\n  requestTimeoutMs,\n  sentryDsn,\n  widgetSlug,\n}: CreateLockerverseWidgetOptions): UseLockerverseWidgetResult {\n  const configuration = useMemo<WidgetConfiguration>(\n    () => ({\n      ...(apiBaseUrl === undefined ? {} : { apiBaseUrl }),\n      communitySlug,\n      ...(environment === undefined ? {} : { environment }),\n      ...(fetch === undefined ? {} : { fetch }),\n      ...(requestTimeoutMs === undefined ? {} : { requestTimeoutMs }),\n      ...(sentryDsn === undefined ? {} : { sentryDsn }),\n      widgetSlug,\n    }),\n    [\n      apiBaseUrl,\n      communitySlug,\n      environment,\n      fetch,\n      requestTimeoutMs,\n      sentryDsn,\n      widgetSlug,\n    ]\n  );\n  const [revision, setRevision] = useState(0);\n  const [state, setState] = useState<WidgetLoadState>({\n    catalog: null,\n    configuration: null,\n    error: null,\n    status: \"loading\",\n  });\n  const onErrorRef = useRef(onError);\n  onErrorRef.current = onError;\n\n  useEffect(() => {\n    let active = true;\n    setState({\n      catalog: null,\n      configuration,\n      error: null,\n      status: \"loading\",\n    });\n\n    async function loadWidget() {\n      try {\n        const client = createLockerverseCheckoutClient({\n          ...configuration,\n          onError: (error) => onErrorRef.current?.(error),\n        });\n        const catalog = await client.load();\n        if (active) {\n          setState({\n            catalog,\n            configuration,\n            error: null,\n            status: \"ready\",\n          });\n        }\n      } catch (error) {\n        if (active) {\n          setState({\n            catalog: null,\n            configuration,\n            error: toError(error),\n            status: \"error\",\n          });\n        }\n      }\n    }\n\n    loadWidget();\n    return () => {\n      active = false;\n    };\n  }, [configuration, revision]);\n\n  const refresh = useCallback(() => {\n    setState({\n      catalog: null,\n      configuration,\n      error: null,\n      status: \"loading\",\n    });\n    setRevision((value) => value + 1);\n  }, [configuration]);\n  const current = state.configuration === configuration ? state : null;\n  const catalog = current?.catalog ?? null;\n  const status = current?.status ?? \"loading\";\n\n  return {\n    catalog,\n    community: catalog?.community ?? null,\n    error: current?.error ?? null,\n    loading: status === \"loading\",\n    products: catalog?.products ?? EMPTY_PRODUCTS,\n    refresh,\n    status,\n    widget: catalog?.widget ?? null,\n  };\n}\n"],"mappings":"sKA6BA,MAAM,EAAiB,OAAO,OAC5B,CAAC,CACH,EAEA,SAAS,EAAQ,EAAgB,CAC/B,OAAO,aAAiB,MACpB,EACI,MAAM,wCAAwC,CACxD,CAEA,SAAgB,EAAqB,CACnC,aACA,gBACA,cACA,QACA,UACA,mBACA,YACA,cAC6D,CAC7D,IAAM,EAAgB,OACb,CACL,GAAI,IAAe,IAAA,GAAY,CAAC,EAAI,CAAE,YAAW,EACjD,gBACA,GAAI,IAAgB,IAAA,GAAY,CAAC,EAAI,CAAE,aAAY,EACnD,GAAI,IAAU,IAAA,GAAY,CAAC,EAAI,CAAE,OAAM,EACvC,GAAI,IAAqB,IAAA,GAAY,CAAC,EAAI,CAAE,kBAAiB,EAC7D,GAAI,IAAc,IAAA,GAAY,CAAC,EAAI,CAAE,WAAU,EAC/C,YACF,GACA,CACE,EACA,EACA,EACA,EACA,EACA,EACA,CACF,CACF,EACM,CAAC,EAAU,GAAe,EAAS,CAAC,EACpC,CAAC,EAAO,GAAY,EAA0B,CAClD,QAAS,KACT,cAAe,KACf,MAAO,KACP,OAAQ,SACV,CAAC,EACK,EAAa,EAAO,CAAO,EACjC,EAAW,QAAU,EAErB,MAAgB,CACd,IAAI,EAAS,GACb,EAAS,CACP,QAAS,KACT,gBACA,MAAO,KACP,OAAQ,SACV,CAAC,EAED,eAAe,GAAa,CAC1B,GAAI,CAKF,IAAM,EAAU,MAJD,EAAgC,CAC7C,GAAG,EACH,QAAU,GAAU,EAAW,UAAU,CAAK,CAChD,CAC2B,CAAC,CAAC,KAAK,EAC9B,GACF,EAAS,CACP,UACA,gBACA,MAAO,KACP,OAAQ,OACV,CAAC,CAEL,OAAS,EAAO,CACV,GACF,EAAS,CACP,QAAS,KACT,gBACA,MAAO,EAAQ,CAAK,EACpB,OAAQ,OACV,CAAC,CAEL,CACF,CAGA,OADA,EAAW,MACE,CACX,EAAS,EACX,CACF,EAAG,CAAC,EAAe,CAAQ,CAAC,EAE5B,IAAM,EAAU,MAAkB,CAChC,EAAS,CACP,QAAS,KACT,gBACA,MAAO,KACP,OAAQ,SACV,CAAC,EACD,EAAa,GAAU,EAAQ,CAAC,CAClC,EAAG,CAAC,CAAa,CAAC,EACZ,EAAU,EAAM,gBAAkB,EAAgB,EAAQ,KAC1D,EAAU,GAAS,SAAW,KAC9B,EAAS,GAAS,QAAU,UAElC,MAAO,CACL,UACA,UAAW,GAAS,WAAa,KACjC,MAAO,GAAS,OAAS,KACzB,QAAS,IAAW,UACpB,SAAU,GAAS,UAAY,EAC/B,UACA,SACA,OAAQ,GAAS,QAAU,IAC7B,CACF"}

package/dist/widget.d.ts

@@ -0,0 +1,2 @@
+import { n as UseLockerverseWidgetResult, r as useLockerverseWidget, t as LockerverseWidgetStatus } from "./use-lockerverse-widget.js";
+export { type LockerverseWidgetStatus, type UseLockerverseWidgetResult, useLockerverseWidget };

package/dist/widget.js

@@ -0,0 +1 @@
+import{t as e}from"./use-lockerverse-widget.js";export{e as useLockerverseWidget};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lockerverse/react",
-  "version": "0.2.64",
+  "version": "0.2.65",
   "description": "Tree-shakable React payment and signup UI for Lockerverse",
   "repository": {
     "type": "git",
@@ -33,6 +33,11 @@
       "import": "./dist/signup.js",
       "default": "./dist/signup.js"
     },
+    "./widget": {
+      "types": "./dist/widget.d.ts",
+      "import": "./dist/widget.js",
+      "default": "./dist/widget.js"
+    },
     "./styles.css": {
       "types": "./dist/styles.d.ts",
       "default": "./dist/styles.css"
@@ -55,7 +60,7 @@
   "dependencies": {
     "@base-ui/react": "1.6.0",
     "valibot": "1.4.2",
-    "@lockerverse/sdk": "0.2.64"
+    "@lockerverse/sdk": "0.2.65"
   },
   "devDependencies": {
     "@size-limit/file": "13.0.3",
@@ -125,6 +130,14 @@
         "dist/contact-validation.js"
       ]
     },
+    {
+      "name": "React widget data",
+      "limit": "2 kB",
+      "path": [
+        "dist/widget.js",
+        "dist/use-lockerverse-widget.js"
+      ]
+    },
     {
       "name": "React signup styles",
       "limit": "4 kB",