create-wirejs-app 2.0.130-payments → 2.0.131-payments

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "create-wirejs-app",
-	"version": "2.0.130-payments",
+	"version": "2.0.131-payments",
 	"description": "Initializes a wirejs package.",
 	"author": "Jon Wire",
 	"license": "MIT",

package/templates/default/api/apps/store.ts

@@ -100,6 +100,18 @@ export const Store = (auth: AuthenticationApi) => withContext(context => ({
 	},
 	async listSubscriptions() {
 		const user = await auth.requireCurrentUser(context);
-		return payments.listSubscriptions(user.id);
+		const subs = await payments.listSubscriptions(user.id);
+		return subs.filter(s => s.status === 'active').map(s => ({
+			...s,
+			name: plans.find(p => p.id === s.productId)!.name
+		}));
+	},
+	async cancelSubscription(subscriptionLineId: string) {
+		const user = await auth.requireCurrentUser(context);
+		const existing = await payments.getSubscriptionLine(subscriptionLineId);
+		if (existing?.customerId !== user.id) {
+			throw new Error("Subscription doesn't exist for this user.");
+		}
+		await payments.cancelSubscriptionLine(subscriptionLineId)
 	}
 }));

package/templates/default/package.json

@@ -12,13 +12,13 @@
 		"dompurify": "^3.2.3",
 		"marked": "^15.0.6",
 		"wirejs-dom": "^1.0.42",
-		"wirejs-resources": "^0.1.125-payments",
-		"wirejs-components": "^0.1.68-payments",
-		"wirejs-module-payments-stripe": "^0.1.19-payments",
-		"wirejs-web-worker": "^1.0.22-payments"
+		"wirejs-resources": "^0.1.126-payments",
+		"wirejs-components": "^0.1.69-payments",
+		"wirejs-module-payments-stripe": "^0.1.20-payments",
+		"wirejs-web-worker": "^1.0.23-payments"
 	},
 	"devDependencies": {
-		"wirejs-scripts": "^3.0.123-payments",
+		"wirejs-scripts": "^3.0.124-payments",
 		"typescript": "^5.7.3"
 	},
 	"scripts": {

package/templates/default/src/ssg/storefront.ts

@@ -1,6 +1,6 @@
 import { html, list, attribute, hydrate } from 'wirejs-dom/v2';
 import { AuthenticatedContent } from 'wirejs-components';
-import { store, Product, Transaction, SubscriptionLine } from 'internal-api';
+import { store, Product, Transaction } from 'internal-api';
 import { Main } from '../layouts/main.js';
 
 type LineItem = {
@@ -10,6 +10,14 @@ type LineItem = {
 	quantity: number;
 }
 
+type SubscriptionLine = Awaited<ReturnType<
+	typeof store.listSubscriptions>
+>[number];
+
+function renderAmount(inCents: number) {
+	return `$${(inCents/100).toFixed(2)}`;
+}
+
 function Storefront() {
 	const self = html`<div>
 
@@ -29,7 +37,7 @@ function Storefront() {
 						self.data.cart.push({
 							productId: p.id,
 							productName: p.name,
-							price: `\$${(p.unitAmount/100).toFixed(2)}`,
+							price: `${renderAmount(p.unitAmount)}`,
 							quantity: 1
 						});
 					}
@@ -67,17 +75,17 @@ function Storefront() {
 		<table>
 			<tr>
 				<th>date</th>
-				<th>amount<th>
+				<th>amount</th>
 				<th>items</th>
 			</tr>
 			${list('transactions', (t: Transaction) => html`<tr>
 				<td>${new Date(t.createdAt).toLocaleDateString()}</td>
-				<td>\$${(t.amount/100).toFixed(2)}</td>
+				<td>${renderAmount(t.amount)}</td>
 				<td><table>
 					${(t.items || []).map(li => html`<tr>
 						<td>${li.description}</td>
 						<td>x ${li.quantity}</td>
-						<td>= \$${(li.amount/100).toFixed(2)}</td>
+						<td>= ${renderAmount(li.amount)}</td>
 					</tr>`)}
 				</table></td>
 			</tr>`)}
@@ -87,12 +95,13 @@ function Storefront() {
 		<table>
 			<tr>
 				<th>Name</th>
-				<th>Price</th>
+				<th colspan='2'>Price</th>
 				<th></th>
 			</tr>
 			${list('plans', (p: Product) => html`<tr>
 				<td>${p.name}</td>
-				<td>${(p.unitAmount/100).toFixed(2)}/${p.interval}</td>
+				<td>${renderAmount(p.unitAmount)}</td>
+				<td>per ${p.interval}</td>
 				<td
 					style='color: darkgreen; font-weight: bold; cursor: pointer;'
 					onclick=${() => {
@@ -107,12 +116,13 @@ function Storefront() {
 		<table>
 			<tr>
 				<th>Name</th>
-				<th>Price</th>
+				<th colspan='2'>Price</th>
 				<th></th>
 			</tr>
 			${list('planCart', (p: Product) => html`<tr>
 				<td>${p.name}</td>
-				<td>${(p.unitAmount/100).toFixed(2)}/${p.interval}</td>
+				<td>${renderAmount(p.unitAmount)}</td>
+				<td>per ${p.interval}</td>
 				<td><span
 					style='color: darkred; font-weight: bold; cursor: pointer;'
 					onclick=${() => {
@@ -136,10 +146,37 @@ function Storefront() {
 			</form>
 		</div>
 
-		<h4>Subscriptions</h4>
-		<table>${list('subscriptions', (s: SubscriptionLine) => html`<li>
-			${JSON.stringify(s)}
-		</li>`)}</table>
+		<h4>Active Subscriptions</h4>
+		<table>
+			<tr>
+				<th>Plan</th>
+				<th colspan='2'>Quantity</th>
+				<th colspan='2'>Amount</th>
+				<th></th>
+			</tr>
+			${list('subscriptions', (s: SubscriptionLine) => html`<tr>
+				<td>${s.name}</td>
+				<td>${s.quantity}</td>
+				<td>x</td>
+				<td>${renderAmount(s.amount)}</td>
+				<td>per ${s.interval}</td>
+				<td><span
+					style='color: darkred; font-weight: bold; cursor: pointer;'
+					onclick=${async () => {
+						const yes = confirm("Are you sure?");
+						if (!yes) return;
+						try {
+							await store.cancelSubscription(null, s.id);
+							self.data.subscriptions.splice(
+								self.data.subscriptions.indexOf(s), 1
+							);
+						} catch (error) {
+							alert(error);
+						}
+					}}
+				>cancel</span></td>
+			</tr>`)}
+		</table>
 
 	<div>`.onadd(async self => {
 		const products = await store.listProducts(null);