kempo-payments 0.1.2 → 0.1.4

package/README.md

@@ -398,3 +398,7 @@ account is a suite nobody runs.
 ## License
 
 MIT
+
+## Dashboard widget
+
+Adds a **Payments** widget to the kempo admin dashboard showing money captured and refunded per currency, the payment count and any disputes, with a **View payments** button. It is declared in `widgets` in `kempo-config.json` and registered when the extension is installed or updated; people only see it if they hold its permission, and can hide, reorder or resize it from the dashboard's Customize dialog. Needs a kempo with the dashboard (see kempo's `docs/dashboard.md`); on an older kempo the entry is ignored.

package/admin/nav.global.html

@@ -1,3 +1,3 @@
-<content id="kempo-payments-nav" name="Payments" owner="kempo-payments" enabled="true" locked="true" location="admin-nav-extensions" priority="3">
-<k-aside-item icon="credit_card" href="/admin/extension/kempo-payments/" no-expand>Payments</k-aside-item>
+<content id="kempo-payments-nav" name="Payments" owner="kempo-payments" enabled="true" locked="true" location="admin-nav-extensions" priority="50">
+<k-aside-item icon="credit_card" group="Commerce" href="/admin/extension/kempo-payments/" no-expand>Payments</k-aside-item>
 </content>

package/kempo-config.json

@@ -3,6 +3,21 @@
   "git": "https://github.com/dustinpoissant/kempo-payments",
   "public-scope": "payments",
   "schema": "./server/db/schema.js",
+  "widgets": [
+    {
+      "key": "summary",
+      "title": "Payments",
+      "description": "Money captured and refunded, and how many payments there have been.",
+      "icon": "credit_card",
+      "element": "k-pay-widget",
+      "module": "/payments/components/PaymentsWidget.js",
+      "defaultWidth": 2,
+      "defaultHeight": 1,
+      "minWidth": 1,
+      "permission": "payments:view",
+      "priority": 80
+    }
+  ],
   "permissions": [
     { "name": "payments:view", "description": "See payments, what they were for, and what happened to them" },
     { "name": "payments:create", "description": "Take a payment — start a new charge over the API" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kempo-payments",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "Payment processing for kempo — provider-agnostic payment intents, capture and refunds, with Stripe built in",
   "license": "MIT",
   "author": "Dustin Poissant",

package/public/components/PaymentsWidget.js

@@ -0,0 +1,67 @@
+import DashboardWidget from '/kempo/components/DashboardWidget.js';
+import { html, nothing } from '/kempo-ui/lit-all.min.js';
+import { getSummary } from '/payments/sdk.js';
+
+/*
+  Amounts are whole numbers of the currency's smallest unit, so they are divided by what that currency
+  uses (100 for dollars, 1 for yen) before display.
+*/
+const money = (amount, currency) => {
+  const format = new Intl.NumberFormat(undefined, { style: 'currency', currency: currency.toUpperCase() });
+  return format.format(amount / 10 ** format.resolvedOptions().maximumFractionDigits);
+};
+
+/*
+  Captured and refunded money per currency, how many payments there are, and any open disputes.
+*/
+export default class PaymentsWidget extends DashboardWidget {
+  static properties = {
+    ...DashboardWidget.properties,
+    currencies: { state: true },
+    disputed: { state: true }
+  };
+
+  constructor(){
+    super();
+    this.currencies = [];
+    this.disputed = 0;
+    this.cta = { label: 'View payments', icon: 'credit_card', href: '/admin/extension/kempo-payments/' };
+  }
+
+  /*
+    Public Methods
+  */
+
+  load = async () => {
+    const { byStatus, disputed } = await this.unwrap(getSummary());
+    const totals = {};
+    byStatus.forEach(({ currency, count, captured, refunded }) => {
+      const entry = totals[currency] ??= { currency, count: 0, captured: 0, refunded: 0 };
+      entry.count += count;
+      entry.captured += captured;
+      entry.refunded += refunded;
+    });
+    this.currencies = Object.values(totals);
+    this.disputed = disputed;
+  };
+
+  /*
+    Rendering
+  */
+
+  renderContent(){
+    if(!this.currencies.length) return html`<p class="tc-muted">No payments yet.</p>`;
+    return html`
+      ${this.currencies.map(({ currency, count, captured, refunded }) => html`
+        <div class="d-f mb">
+          <div class="flex"><div class="h2 m0">${money(captured, currency)}</div><div class="small tc-muted">Captured (${currency.toUpperCase()})</div></div>
+          <div class="flex"><div class="h2 m0">${money(refunded, currency)}</div><div class="small tc-muted">Refunded</div></div>
+          <div class="flex"><div class="h2 m0">${count}</div><div class="small tc-muted">Payments</div></div>
+        </div>
+      `)}
+      ${this.disputed ? html`<p class="tc-danger" role="alert">${this.disputed} disputed</p>` : nothing}
+    `;
+  }
+}
+
+customElements.define('k-pay-widget', PaymentsWidget);