@mesub/react 0.1.0 → 0.1.3

package/dist/index.d.cts

@@ -33,8 +33,12 @@ interface MesubPlan {
     ends_at: string | null;
 }
 type MesubSubscriptionStatus = 'pending' | 'active' | 'cancelled' | 'unpaid' | 'stopped' | 'ended' | 'failed' | 'expired' | 'superseded';
-/** Why charges are held back: the merchant's own setup by name, `mesub` for any cause of Mesub's. */
-type MesubBlockedReason = 'puller_not_allowed' | 'receiver_not_allowed' | 'receiver_account_missing' | 'receiver_account_frozen' | 'mint_gone' | 'mesub';
+/**
+ * Why charges are held back: the merchant's own setup by name (the last two
+ * the token issuer's to lift), `mesub` for any cause of Mesub's. The widget
+ * words every one the same to the subscriber.
+ */
+type MesubBlockedReason = 'puller_not_allowed' | 'receiver_not_allowed' | 'receiver_account_missing' | 'receiver_account_frozen' | 'receiver_account_needs_memo' | 'receiver_account_confidential_only' | 'mint_gone' | 'mint_paused' | 'mint_transfer_hook' | 'mesub';
 /**
  * Why a `stopped` one stopped (Mesub-io/backend#402): every retry failed, the
  * Free date to pay by passed, or the wallet closed the account that lets
@@ -59,6 +63,8 @@ interface MesubSubscription {
     current_period_end: string | null;
     next_charge_at: string | null;
     next_retry_at: string | null;
+    next_retry_number?: number | null;
+    retries_allowed?: number | null;
     retry_deadline: string | null;
     access_until: string | null;
     closable?: boolean;
@@ -125,6 +131,7 @@ interface PayNowResult {
 interface UseSubscriptionsResult {
     state: 'loading' | 'ready' | 'signed-out' | 'error';
     subscriptions: MesubHeldSubscription[];
+    hasMore: boolean;
     error: string | null;
     reload(): Promise<void>;
     payNow(id: string): Promise<PayNowResult>;

package/dist/index.d.ts

@@ -33,8 +33,12 @@ interface MesubPlan {
     ends_at: string | null;
 }
 type MesubSubscriptionStatus = 'pending' | 'active' | 'cancelled' | 'unpaid' | 'stopped' | 'ended' | 'failed' | 'expired' | 'superseded';
-/** Why charges are held back: the merchant's own setup by name, `mesub` for any cause of Mesub's. */
-type MesubBlockedReason = 'puller_not_allowed' | 'receiver_not_allowed' | 'receiver_account_missing' | 'receiver_account_frozen' | 'mint_gone' | 'mesub';
+/**
+ * Why charges are held back: the merchant's own setup by name (the last two
+ * the token issuer's to lift), `mesub` for any cause of Mesub's. The widget
+ * words every one the same to the subscriber.
+ */
+type MesubBlockedReason = 'puller_not_allowed' | 'receiver_not_allowed' | 'receiver_account_missing' | 'receiver_account_frozen' | 'receiver_account_needs_memo' | 'receiver_account_confidential_only' | 'mint_gone' | 'mint_paused' | 'mint_transfer_hook' | 'mesub';
 /**
  * Why a `stopped` one stopped (Mesub-io/backend#402): every retry failed, the
  * Free date to pay by passed, or the wallet closed the account that lets
@@ -59,6 +63,8 @@ interface MesubSubscription {
     current_period_end: string | null;
     next_charge_at: string | null;
     next_retry_at: string | null;
+    next_retry_number?: number | null;
+    retries_allowed?: number | null;
     retry_deadline: string | null;
     access_until: string | null;
     closable?: boolean;
@@ -125,6 +131,7 @@ interface PayNowResult {
 interface UseSubscriptionsResult {
     state: 'loading' | 'ready' | 'signed-out' | 'error';
     subscriptions: MesubHeldSubscription[];
+    hasMore: boolean;
     error: string | null;
     reload(): Promise<void>;
     payNow(id: string): Promise<PayNowResult>;

package/dist/index.js

@@ -41,6 +41,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));
@@ -111,7 +115,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);
@@ -119,7 +127,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(
@@ -427,6 +436,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)}`;
 }
@@ -1396,7 +1413,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__ */ jsx4(
@@ -1596,7 +1613,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",
@@ -1717,7 +1734,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.";
   }
@@ -2153,6 +2170,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.";
@@ -2178,6 +2196,7 @@ function useSubscriptions() {
   const { api, revision, manage: open } = useMesubInternal();
   const [state, setState] = useState4("loading");
   const [rows, setRows] = useState4([]);
+  const [hasMore, setHasMore] = useState4(false);
   const [error, setError] = useState4(null);
   const [now, setNow] = useState4(() => Date.now());
   const read = useRef4(0);
@@ -2193,7 +2212,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");
@@ -2201,6 +2221,7 @@ function useSubscriptions() {
       if (!alive.current || id !== read.current) return;
       if (signedOut(failure)) {
         setRows([]);
+        setHasMore(false);
         setError(null);
         setState("signed-out");
         return;
@@ -2254,7 +2275,7 @@ function useSubscriptions() {
     },
     [api, reload]
   );
-  return { state, subscriptions, error, reload, payNow, manage };
+  return { state, subscriptions, hasMore, error, reload, payNow, manage };
 }
 var STATUS = {
   active: "Active",
@@ -2386,7 +2407,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] = useState4(false);
   async function act(id) {
@@ -2421,7 +2442,7 @@ function ManageSubscriptions({ onChanged, ...rest }) {
         }
       )
     ] });
-  } else if (subscriptions.length === 0) {
+  } else if (subscriptions.length === 0 && !hasMore) {
     body = /* @__PURE__ */ jsx6("p", { "data-mesub-empty": "none", children: "You have no subscription yet." });
   } else {
     body = /* @__PURE__ */ jsx6("ul", { "data-mesub-subscription-list": "", "aria-label": "Your subscriptions", children: subscriptions.map((row) => {
@@ -2483,14 +2504,17 @@ function ManageSubscriptions({ onChanged, ...rest }) {
       ] }, row.id);
     }) });
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs5(
     "div",
     {
       ...rest,
       "data-mesub-subscriptions": "",
       "data-mesub-state": state,
       "data-mesub-theme": theme,
-      children: body
+      children: [
+        body,
+        state === "ready" && hasMore ? /* @__PURE__ */ jsx6("p", { "data-mesub-subscription-note": "", children: MORE_NOT_LISTED }) : null
+      ]
     }
   );
 }
@@ -2555,6 +2579,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({
@@ -2564,7 +2589,7 @@ function SubscriptionDialog({
   const [shown, setShown] = useState5(PAST_SHOWN);
   const titleId = useId3();
   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);
@@ -2588,7 +2613,7 @@ function SubscriptionDialog({
   } else if (!row) {
     body = /* @__PURE__ */ jsxs6(Fragment6, { children: [
       /* @__PURE__ */ jsx7("h2", { id: titleId, children: "No subscription yet" }),
-      /* @__PURE__ */ jsx7("p", { children: "You are not subscribed to this plan." })
+      /* @__PURE__ */ jsx7("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";
@@ -2597,6 +2622,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)}` : "";
@@ -2635,9 +2661,9 @@ function SubscriptionDialog({
           /* @__PURE__ */ jsx7("dt", { children: "Total paid" }),
           /* @__PURE__ */ jsx7("dd", { title: total.title, children: total.text })
         ] }) : null,
-        moment(plan?.ends_at) ? /* @__PURE__ */ jsxs6("div", { "data-mesub-row": "", children: [
+        planEnd(plan?.ends_at) ? /* @__PURE__ */ jsxs6("div", { "data-mesub-row": "", children: [
           /* @__PURE__ */ jsx7("dt", { children: "Plan ends" }),
-          /* @__PURE__ */ jsx7("dd", { children: moment(plan?.ends_at) })
+          /* @__PURE__ */ jsx7("dd", { children: planEnd(plan?.ends_at) })
         ] }) : null,
         closeFrom(row) ? /* @__PURE__ */ jsxs6("div", { "data-mesub-row": "", children: [
           /* @__PURE__ */ jsx7("dt", { children: "Close from" }),
@@ -2648,7 +2674,7 @@ function SubscriptionDialog({
           /* @__PURE__ */ jsx7("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__ */ jsxs6("details", { "data-mesub-terms": "", "data-mesub-payments": "", children: [
           /* @__PURE__ */ jsx7("summary", { children: "Payments" }),
@@ -2670,6 +2696,10 @@ function SubscriptionDialog({
               `next-${next.due_at}`
             )) })
           ] }) : null,
+          unread ? /* @__PURE__ */ jsxs6("section", { "aria-label": "Past payments", children: [
+            /* @__PURE__ */ jsx7("h3", { children: "Past" }),
+            /* @__PURE__ */ jsx7("p", { "data-mesub-payments-error": "", children: PAYMENTS_UNREAD })
+          ] }) : null,
           past.length > 0 ? /* @__PURE__ */ jsxs6("section", { "aria-label": "Past payments", children: [
             /* @__PURE__ */ jsx7("h3", { children: "Past" }),
             /* @__PURE__ */ jsx7("ul", { children: past.slice(0, shown).map((payment) => {
@@ -2752,7 +2782,7 @@ function SubscriptionDialog({
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function MesubProvider({
   endpoint,
-  chain = "solana:devnet",
+  chain = "solana:mainnet",
   fetch,
   theme,
   manageUrl,