@mesub/react 0.1.0 → 0.1.3

package/README.md

@@ -16,9 +16,22 @@ part in the browser: picking one, connecting it, signing in the right order.
 
 **[Read the docs](https://docs.mesub.io/docs/react)** for the walkthrough.
 
-> **Status: early, 0.x, not on npm yet.** The API may still change between
-> minor versions. See the [board](https://github.com/orgs/Mesub-io/projects/5)
-> for what is next.
+[![npm](https://img.shields.io/npm/v/@mesub/react)](https://www.npmjs.com/package/@mesub/react)
+
+> **Status: early, 0.x.** The API may still change between minor versions:
+> `npm update` takes patches (0.1.x), a new minor (0.2.0) takes
+> `npm install @mesub/react@latest`. See the
+> [board](https://github.com/orgs/Mesub-io/projects/5) for what is next.
+
+## Install
+
+```sh
+npm install @mesub/react
+```
+
+`react` and `react-dom` 18 or later are peer dependencies. Every release is
+built by GitHub Actions from a tagged commit and published with a provenance
+statement: `npm audit signatures` verifies it.
 
 ## Requirements
 
@@ -57,7 +70,7 @@ export function App({ children }) {
 | Prop        | What it is                                                                                                                               |
 | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
 | `endpoint`  | Where you mounted the routes. A path on your site, or a full URL.                                                                        |
-| `chain`     | The network the wallet signs for: `solana:devnet` (the default) or `solana:mainnet`. It must match your plans' `network`.                |
+| `chain`     | The network the wallet signs for: `solana:mainnet` (the default, where Mesub runs). It must match your plans' `network`.                 |
 | `fetch`     | Your own `(url, init) => Promise<Response>`, to add headers or credentials.                                                              |
 | `theme`     | `light`, `dark` or `auto`, set on the widget as `data-mesub-theme`.                                                                      |
 | `manageUrl` | Where "Cancel any time" leads once subscribed: your own page (`/account`, or a full URL). Mesub's page by default; `null` for no button. |
@@ -88,8 +101,10 @@ import { SubscribeButton } from '@mesub/react';
 dialog, from the plan to the receipt:
 
 1. **The plan**: its name, price and period, from `GET /plans/:slug`, and its end
-   date when it has one. A plan that ends before a second charge can run is
-   priced `once`, with the date its access runs to.
+   when it has one. A plan ends on any second, so its end is always written
+   with its time, in UTC, the same for every subscriber: `Oct 20, 2026, 23:59 UTC`.
+   A plan that ends before a second charge can run is priced `once`, with the
+   end its access runs to.
 2. **A wallet**: the installed wallets that can sign
    ([Wallet Standard](https://github.com/wallet-standard/wallet-standard), so
    Phantom, Solflare and the others). The one picked is asked for its account.
@@ -199,6 +214,9 @@ nor past its date to pay by. What came of it is said under the button: the
 payment on its way, or why not (a short wallet spends no retry). On Free,
 where Mesub does not try again on its own, the card shows that date to pay by.
 
+When the server could not read a subscription's past payments, its window
+says so in one line rather than show none.
+
 One whose charges are held back for a cause that is not the customer's
 (`blocked_since`) says so in one line: payments are on hold, nothing is asked
 of them, and until when their access runs. The cause is never named to them,
@@ -230,6 +248,9 @@ function Mine() {
 - `subscriptions` are newest first, each with `action`: `cancel`, `resume`,
   `close` or null, and `payable`: whether **Pay now** can succeed. Checkouts
   nobody signed are left out.
+- `hasMore` is true when the customer holds more than the server listed (its
+  500 newest): older ones are missing. `ManageSubscriptions` says so under its
+  list.
 - `payNow(id)` pays that late payment now and resolves `{ ok, message }`, the
   words to show; it never throws.
 - `manage(id)` opens the dialog for that action and resolves when it closes:

package/dist/index.cjs

@@ -71,6 +71,10 @@ function paidOf(answer) {
   const whole = Array.isArray(answer.payments) && answer.payments.length < LISTED_AT_MOST;
   return whole ? read(answer.listed_paid) : null;
 }
+function paymentsErrorOf(answer) {
+  const error = answer.payments_error;
+  return isObject(error) && typeof error.code === "string" && typeof error.message === "string" ? { code: error.code, message: error.message } : null;
+}
 function createApi(options) {
   const base = options.endpoint.replace(/\/+$/, "");
   const doFetch = options.fetch ?? ((input, init) => globalThis.fetch(input, init));
@@ -141,7 +145,11 @@ function createApi(options) {
     ),
     subscriptions: async () => {
       const answer = await request("GET", "/subscriptions", void 0, REQUEST_TIMEOUT_MS);
-      return Array.isArray(answer.subscriptions) ? answer.subscriptions : [];
+      return {
+        subscriptions: Array.isArray(answer.subscriptions) ? answer.subscriptions : [],
+        // An older server does not say: read as whole.
+        has_more: answer.has_more === true
+      };
     },
     subscription: async (id) => {
       const answer = await request("GET", at(id), void 0, REQUEST_TIMEOUT_MS);
@@ -149,7 +157,8 @@ function createApi(options) {
         subscription: answer.subscription,
         upcoming: Array.isArray(answer.upcoming) ? answer.upcoming : [],
         payments: Array.isArray(answer.payments) ? answer.payments : null,
-        paid: paidOf(answer)
+        paid: paidOf(answer),
+        payments_error: paymentsErrorOf(answer)
       };
     },
     prepare: async (plan, wallet) => await request(
@@ -457,6 +466,14 @@ function moment(iso, now = Date.now()) {
 function shortMoment(iso, now = Date.now()) {
   return written(iso, { month: "short", day: "numeric" }, now);
 }
+var MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+var two = (n) => String(n).padStart(2, "0");
+function planEnd(iso) {
+  if (!iso) return null;
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return null;
+  return `${MONTHS[date.getUTCMonth()]} ${date.getUTCDate()}, ${date.getUTCFullYear()}, ${two(date.getUTCHours())}:${two(date.getUTCMinutes())} UTC`;
+}
 function shortAddress(address) {
   return `${address.slice(0, 4)}\u2026${address.slice(-4)}`;
 }
@@ -1426,7 +1443,7 @@ function planScreen(loaded, titleId, reload, close) {
 function stageScreen(props) {
   const { view, plan, chain, titleId } = props;
   const { text: price, title: exact } = briefPrice(plan);
-  const ends = moment(plan.ends_at);
+  const ends = planEnd(plan.ends_at);
   const single = view.name === "review" ? singleCharge(plan, view.prepared.terms.message) : view.name === "signing" || view.name === "subscribed" ? view.single : singleCharge(plan);
   const every = single ? "once" : cadence(plan.period_hours);
   const merchant = /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -1626,7 +1643,7 @@ function stageScreen(props) {
     };
   }
   const nextCharge = view.single ? null : moment(view.subscription.next_charge_at);
-  const accessUntil = view.single ? moment(view.subscription.access_until) ?? ends : null;
+  const accessUntil = view.single ? ends ?? moment(view.subscription.access_until) : null;
   const manage = manageLink(props.manageUrl, view.cancelUrl);
   return {
     step: "subscribed",
@@ -1747,7 +1764,7 @@ function consequence(action, subscription, planEndsAt) {
   }
   if (action === "resume") {
     if (end && until && noChargeAt(Date.parse(end), planEndsAt)) {
-      return `It runs again until ${until}, when the plan ends. Nothing more is charged.`;
+      return `It runs again until ${planEnd(planEndsAt)}, when the plan ends. Nothing more is charged.`;
     }
     return until ? `Charges start again on ${until}, as before.` : "Charges start again, as before.";
   }
@@ -2177,6 +2194,7 @@ function payableOf(row, now) {
   const deadline = Date.parse(row.retry_deadline ?? "");
   return Number.isNaN(deadline) || deadline > now;
 }
+var MORE_NOT_LISTED = "Only your most recent subscriptions are listed here.";
 var PAY_NOW_SENT = "Payment sent. It shows here once the network confirms it.";
 function payNowRefusal(failure) {
   if (!(failure instanceof MesubClientError)) return "Something went wrong.";
@@ -2202,6 +2220,7 @@ function useSubscriptions() {
   const { api, revision, manage: open } = useMesubInternal();
   const [state, setState] = (0, import_react9.useState)("loading");
   const [rows, setRows] = (0, import_react9.useState)([]);
+  const [hasMore, setHasMore] = (0, import_react9.useState)(false);
   const [error, setError] = (0, import_react9.useState)(null);
   const [now, setNow] = (0, import_react9.useState)(() => Date.now());
   const read = (0, import_react9.useRef)(0);
@@ -2217,7 +2236,8 @@ function useSubscriptions() {
     try {
       const served = await api.subscriptions();
       if (!alive.current || id !== read.current) return;
-      setRows(served.filter((row) => HELD.has(row.status)));
+      setRows(served.subscriptions.filter((row) => HELD.has(row.status)));
+      setHasMore(served.has_more);
       setNow(Date.now());
       setError(null);
       setState("ready");
@@ -2225,6 +2245,7 @@ function useSubscriptions() {
       if (!alive.current || id !== read.current) return;
       if (signedOut(failure)) {
         setRows([]);
+        setHasMore(false);
         setError(null);
         setState("signed-out");
         return;
@@ -2278,7 +2299,7 @@ function useSubscriptions() {
     },
     [api, reload]
   );
-  return { state, subscriptions, error, reload, payNow, manage };
+  return { state, subscriptions, hasMore, error, reload, payNow, manage };
 }
 var STATUS = {
   active: "Active",
@@ -2410,7 +2431,7 @@ function PayNow({ pay }) {
 }
 function ManageSubscriptions({ onChanged, ...rest }) {
   const { theme } = useMesubInternal();
-  const { state, subscriptions, error, reload, payNow, manage } = useSubscriptions();
+  const { state, subscriptions, hasMore, error, reload, payNow, manage } = useSubscriptions();
   const plans = usePlans(subscriptions.flatMap((row) => row.plan ? [row.plan] : []));
   const [retrying, setRetrying] = (0, import_react9.useState)(false);
   async function act(id) {
@@ -2445,7 +2466,7 @@ function ManageSubscriptions({ onChanged, ...rest }) {
         }
       )
     ] });
-  } else if (subscriptions.length === 0) {
+  } else if (subscriptions.length === 0 && !hasMore) {
     body = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { "data-mesub-empty": "none", children: "You have no subscription yet." });
   } else {
     body = /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { "data-mesub-subscription-list": "", "aria-label": "Your subscriptions", children: subscriptions.map((row) => {
@@ -2507,14 +2528,17 @@ function ManageSubscriptions({ onChanged, ...rest }) {
       ] }, row.id);
     }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
     "div",
     {
       ...rest,
       "data-mesub-subscriptions": "",
       "data-mesub-state": state,
       "data-mesub-theme": theme,
-      children: body
+      children: [
+        body,
+        state === "ready" && hasMore ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { "data-mesub-subscription-note": "", children: MORE_NOT_LISTED }) : null
+      ]
     }
   );
 }
@@ -2579,6 +2603,7 @@ function useDetail(row) {
   }, [api, id, revision]);
   return detail?.subscription.id === id ? detail : null;
 }
+var PAYMENTS_UNREAD = "Past payments could not be read just now.";
 var PAST_SHOWN = 5;
 var PAST_STEP = 10;
 function SubscriptionDialog({
@@ -2588,7 +2613,7 @@ function SubscriptionDialog({
   const [shown, setShown] = (0, import_react10.useState)(PAST_SHOWN);
   const titleId = (0, import_react10.useId)();
   const { chain } = useMesubInternal();
-  const { state, subscriptions, error, reload, payNow, manage } = useSubscriptions();
+  const { state, subscriptions, hasMore, error, reload, payNow, manage } = useSubscriptions();
   const row = pickSubscription(subscriptions, slug) ?? null;
   const plan = usePlan(row?.plan);
   const detail = useDetail(row);
@@ -2612,7 +2637,7 @@ function SubscriptionDialog({
   } else if (!row) {
     body = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { id: titleId, children: "No subscription yet" }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: "You are not subscribed to this plan." })
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { children: hasMore ? "None of your most recent subscriptions is to this plan." : "You are not subscribed to this plan." })
     ] });
   } else {
     const name = plan?.name ?? row.plan ?? "Subscription";
@@ -2621,6 +2646,7 @@ function SubscriptionDialog({
     const note = noteOf(row);
     const upcoming = detail?.upcoming ?? [];
     const past = detail?.payments ?? [];
+    const unread = detail?.payments === null && detail.payments_error !== null;
     const total = detail?.paid?.amount ? paidBrief(detail.paid.amount, plan, formatAmount) : null;
     const rate = plan ? briefPrice(plan) : null;
     const due = (display) => display ? `${grouped(display)}${symbolOf(plan)}` : "";
@@ -2659,9 +2685,9 @@ function SubscriptionDialog({
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("dt", { children: "Total paid" }),
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("dd", { title: total.title, children: total.text })
         ] }) : null,
-        moment(plan?.ends_at) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-mesub-row": "", children: [
+        planEnd(plan?.ends_at) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-mesub-row": "", children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("dt", { children: "Plan ends" }),
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("dd", { children: moment(plan?.ends_at) })
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("dd", { children: planEnd(plan?.ends_at) })
         ] }) : null,
         closeFrom(row) ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-mesub-row": "", children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("dt", { children: "Close from" }),
@@ -2672,7 +2698,7 @@ function SubscriptionDialog({
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("dd", { title: row.wallet, children: shortAddress(row.wallet) })
         ] })
       ] }),
-      upcoming.length > 0 || past.length > 0 ? (
+      upcoming.length > 0 || past.length > 0 || unread ? (
         // Closed until asked for, as the terms are on the checkout: same toggle.
         /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("details", { "data-mesub-terms": "", "data-mesub-payments": "", children: [
           /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("summary", { children: "Payments" }),
@@ -2694,6 +2720,10 @@ function SubscriptionDialog({
               `next-${next.due_at}`
             )) })
           ] }) : null,
+          unread ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { "aria-label": "Past payments", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { children: "Past" }),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { "data-mesub-payments-error": "", children: PAYMENTS_UNREAD })
+          ] }) : null,
           past.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("section", { "aria-label": "Past payments", children: [
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { children: "Past" }),
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("ul", { children: past.slice(0, shown).map((payment) => {
@@ -2776,7 +2806,7 @@ function SubscriptionDialog({
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function MesubProvider({
   endpoint,
-  chain = "solana:devnet",
+  chain = "solana:mainnet",
   fetch,
   theme,
   manageUrl,