@mesub/react 0.1.2 → 0.1.3

package/README.md

@@ -214,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,
@@ -245,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(
@@ -2185,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.";
@@ -2210,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);
@@ -2225,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");
@@ -2233,6 +2245,7 @@ function useSubscriptions() {
       if (!alive.current || id !== read.current) return;
       if (signedOut(failure)) {
         setRows([]);
+        setHasMore(false);
         setError(null);
         setState("signed-out");
         return;
@@ -2286,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",
@@ -2418,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) {
@@ -2453,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) => {
@@ -2515,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
+      ]
     }
   );
 }
@@ -2587,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({
@@ -2596,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);
@@ -2620,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";
@@ -2629,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)}` : "";
@@ -2680,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" }),
@@ -2702,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) => {