@frigear-nu/payments 0.1.1 → 0.1.2

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@frigear-nu/payments",
   "configKey": "payments",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -21,6 +21,8 @@ const module$1 = defineNuxtModule({
     "@frigear-nu/users": { version: ">=0.0.1" },
     "@frigear-nu/stripe": { version: ">=0.0.1" },
     "@frigear-nu/mcp": { version: ">=0.0.1" },
+    // `usePayments` loads through `useCachedFetch`; the widgets and the admin tab use its components and helpers.
+    "@frigear-nu/ui": { version: ">=0.0.1" },
     "@frigear-nu/widget": { version: ">=0.0.0", optional: true },
     // The admin user tab and card are built from its components, so they are only added with it.
     "@frigear-nu/admin": { version: ">=0.0.0", optional: true }

package/dist/runtime/app/composables/usePayments.d.ts

@@ -1,7 +1,5 @@
-/** The signed-in user's payments, plus a helper to resume an unpaid one. */
-export declare function usePayments(): {
-    payments: any;
-    refresh: any;
-    status: any;
-    resume: (paymentId: string) => Promise<void>;
-};
+/**
+ * The signed-in user's payments, plus a helper to resume an unpaid one. Awaitable: `await usePayments()` in a page
+ * renders them on the server. `payments` is `[]` until loaded and after an error: check `loading` and `error` first.
+ */
+export declare function usePayments(): any;

package/dist/runtime/app/composables/usePayments.js

@@ -1,14 +1,20 @@
 export function usePayments() {
   const { loggedIn } = useUserSession();
-  const { data, refresh, status } = useFetch("/api/payments", {
+  const fetched = useCachedFetch("/api/payments", {
     key: "payments:mine",
-    immediate: loggedIn.value,
-    watch: false,
-    default: () => []
+    ttl: 60 * 1e3,
+    watch: false
   });
+  const { status, error, loading, refresh, clear } = fetched;
+  watch(loggedIn, (value) => {
+    if (value) refresh();
+    else clear();
+  });
+  const payments = computed(() => fetched.data.value ?? []);
   async function resume(paymentId) {
     const { url } = await $fetch("/api/payments/resume", { method: "POST", body: { paymentId } });
     await navigateTo(url, { external: true });
   }
-  return { payments: data, refresh, status, resume };
+  const api = { payments, refresh, status, error, loading, resume };
+  return Object.assign(fetched.then(() => api), api);
 }

package/dist/runtime/app/tabs/Payments.vue

@@ -6,10 +6,11 @@ const props = defineProps({
 const t = useModuleT("payments.admin");
 const status = useModuleT("payments.status");
 const format = useFormat();
-const { data: payments, status: fetchStatus } = useLazyFetch(
+const { data: payments, status: fetchStatus, error } = useLazyFetch(
   () => `/api/admin/users/${props.user.id}/payments`,
   { key: () => `admin-payments-${props.user.id}` }
 );
+const loading = computed(() => fetchStatus.value === "pending" && !payments.value);
 const statusLabel = (value) => status(value, value);
 const columns = computed(() => [
   { accessorKey: "createdAt", header: t("date", "Date") },
@@ -22,7 +23,10 @@ const columns = computed(() => [
 </script>
 
 <template>
-  <TableCard>
+  <TableCard
+    :loading="loading"
+    :refreshing="fetchStatus === 'pending' && !loading"
+  >
     <template #header>
       <h2 class="text-highlighted text-sm font-semibold">
         {{ t("title", "Payments") }}
@@ -31,7 +35,6 @@ const columns = computed(() => [
     <UTable
       :data="payments ?? []"
       :columns="columns"
-      :loading="fetchStatus === 'pending'"
       :ui="tableUi({ tr: '' })"
     >
       <template #createdAt-cell="{ row }">
@@ -58,6 +61,14 @@ const columns = computed(() => [
       </template>
       <template #empty>
         <UEmpty
+          v-if="error"
+          icon="i-lucide-circle-alert"
+          variant="naked"
+          :title="t('loadFailed', 'The payments could not be loaded')"
+          :description="errorMessage(error, '')"
+        />
+        <UEmpty
+          v-else
           icon="i-lucide-credit-card"
           variant="naked"
           :title="t('empty', 'No payments yet')"

package/dist/runtime/i18n/lang/da.json

@@ -14,6 +14,7 @@
       "title": "Betalinger",
       "lastPayment": "Seneste betaling",
       "empty": "Ingen betalinger endnu",
+      "loadFailed": "Betalingerne kunne ikke hentes",
       "date": "Dato",
       "description": "Beskrivelse",
       "amount": "Beløb",

package/dist/runtime/i18n/lang/en.json

@@ -14,6 +14,7 @@
       "title": "Payments",
       "lastPayment": "Last payment",
       "empty": "No payments yet",
+      "loadFailed": "The payments could not be loaded",
       "date": "Date",
       "description": "Description",
       "amount": "Amount",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@frigear-nu/payments",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "One-time payments (Stripe Checkout, refunds and payment lifecycle hooks) for the frigear ecosystem, built on @frigear-nu/stripe.",
   "homepage": "https://docs.frigear.dev/modules/payments",
   "repository": {
@@ -30,12 +30,12 @@
     "playground"
   ],
   "dependencies": {
-    "@frigear-nu/auth": "0.1.2",
-    "@frigear-nu/mcp": "0.1.1",
-    "@frigear-nu/module-kit": "1.1.1",
-    "@frigear-nu/stripe": "0.1.1",
-    "@frigear-nu/ui": "0.1.1",
-    "@frigear-nu/users": "1.1.2",
+    "@frigear-nu/auth": "0.1.3",
+    "@frigear-nu/mcp": "0.1.2",
+    "@frigear-nu/module-kit": "1.1.2",
+    "@frigear-nu/stripe": "0.1.2",
+    "@frigear-nu/ui": "0.1.2",
+    "@frigear-nu/users": "1.1.3",
     "@libsql/client": "^0.18.0",
     "@nuxt/kit": "^4.6.1",
     "drizzle-kit": "^0.31.11",
@@ -46,8 +46,8 @@
     "zod": "^4.6.5"
   },
   "peerDependencies": {
-    "@frigear-nu/widget": "0.1.1",
-    "@nuxt/ui": "^4.11.2",
+    "@frigear-nu/widget": "0.1.2",
+    "@nuxt/ui": "^4.12.0",
     "@nuxthub/core": "^0.10.8"
   },
   "peerDependenciesMeta": {
@@ -59,13 +59,13 @@
     }
   },
   "devDependencies": {
-    "@frigear-nu/widget": "0.1.1",
+    "@frigear-nu/widget": "0.1.2",
     "@nuxt/devtools": "^3.4.2",
     "@nuxt/eslint-config": "^1.17.0",
     "@nuxt/module-builder": "^1.0.3",
     "@nuxt/schema": "^4.6.1",
     "@nuxt/test-utils": "^4.3.2",
-    "@nuxt/ui": "^4.11.2",
+    "@nuxt/ui": "^4.12.0",
     "@nuxthub/core": "^0.10.8",
     "@types/node": "^26.6.5",
     "changelogen": "^0.6.2",