create-wirejs-app 2.0.111 → 2.0.112-payments

package/package.json

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

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

@@ -0,0 +1,85 @@
+import {
+	AuthenticationApi,
+	Endpoint as InternalEndpoint,
+	Setting as InternalSetting,
+	withContext,
+} from "wirejs-resources";
+
+const permanentAdmins = ['admin'];
+
+export type Setting = {
+	key: string;
+	value: string;
+	description: string;
+	isPrivate: boolean;
+	options?: string[];
+};
+
+export type Endpoint = {
+	id: string;
+	path: string;
+	url: string;
+	description: string;
+};
+
+export type SystemAttribute = {
+	name: string;
+	value: string;
+	description: string;
+};
+
+export const Admin = (auth: AuthenticationApi) => withContext(context => {
+	const api = {
+		async isAdmin() {
+			const user = await auth.getCurrentUser(context);
+			if (!user) return false;
+			return permanentAdmins.includes(user.username);
+		},
+		async requireAdmin() {
+			if (!await api.isAdmin()) throw new Error("You are not an admin.");
+		},
+		async listSettings() {
+			await api.requireAdmin();
+			let results: Setting[] = [];
+			for (const setting of InternalSetting.list()) {
+				results.push({
+					key: setting.absoluteId,
+					value: await setting.read(),
+					description: setting.description || '',
+					options: setting.options,
+					isPrivate: setting.isPrivate,
+				});
+			}
+			return results;
+		},
+		async saveSettings(settings: { key: string, value: string }[]) {
+			await api.requireAdmin();
+			for (const { key, value } of settings) {
+				const setting = InternalSetting.get(key);
+				if (setting) await setting.write(value)
+			}
+		},
+		async listEndpoints() {
+			await api.requireAdmin();
+			const endpoints: Endpoint[] = [];
+			for (const endpoint of InternalEndpoint.list()) {
+				endpoints.push({
+					id: endpoint.absoluteId,
+					description: endpoint.description || '',
+					path: endpoint.path,
+					url: await endpoint.determineUrl(),
+				});
+			}
+			return endpoints;
+		},
+		async listSystemAttributes(): Promise<SystemAttribute[]> {
+			await api.requireAdmin();
+			return context.systemInfo.map(attr => ({
+				name: attr.name,
+				value: attr.value,
+				description: attr.description
+			})).toArray();
+		},
+	};
+	return api;
+});

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

@@ -41,7 +41,7 @@ export const Chat = (auth: AuthenticationApi) => withContext(context => ({
 	},
 	async getRoom(room: string) {
 		await auth.requireCurrentUser(context);
-		return realtimeService.getStream(sanitizedRoomName(room));
+		return realtimeService.getStream(context, sanitizedRoomName(room));
 	},
 	async startCountdown(room: string, seconds: number) {
 		await auth.requireCurrentUser(context);

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

@@ -0,0 +1,105 @@
+import { AuthenticationApi, withContext } from 'wirejs-resources';
+import {
+	PaymentService,
+	OneTimeProduct,
+	SubscriptionProduct,
+	OneTimePurchaseLineItem,
+	SubscriptionLineItem,
+} from 'wirejs-module-payments-stripe';
+
+export type { Product, Transaction, SubscriptionLine, OneTimePurchaseLineItem } from 'wirejs-module-payments-stripe';
+
+const payments = new PaymentService('app', 'payments');
+
+const products: OneTimeProduct[] = [
+	{
+		id: 'something-a',
+		name: 'something a',
+		type: 'one_time',
+		currency: 'usd',
+		unitAmount: 2345,
+		metadata: {}
+	},
+	{
+		id: 'something-b',
+		name: 'something b',
+		type: 'one_time',
+		currency: 'usd',
+		unitAmount: 1234,
+		metadata: {}
+	},
+	{
+		id: 'something-c',
+		name: 'something c',
+		type: 'one_time',
+		currency: 'usd',
+		unitAmount: 999,
+		metadata: {}
+	},
+];
+
+const plans: SubscriptionProduct[] = [
+	{
+		id: 'plan-a',
+		name: 'plan a',
+		type: 'recurring',
+		currency: 'usd',
+		unitAmount: 1299,
+		interval: 'month',
+		metadata: {}
+	}
+];
+
+export const Store = (auth: AuthenticationApi) => withContext(context => ({
+	async listProducts() {
+		return [...products, ...plans];
+	},
+	async getCheckoutUrl({ cart, successUrl, cancelUrl }: {
+		cart: { id: string, quantity: number }[];
+		successUrl: string;
+		cancelUrl: string;
+	}) {
+		const user = await auth.requireCurrentUser(context);
+		return payments.createCheckoutUrl({
+			customer: {
+				id: user.id
+			},
+			lineItems: cart.map(({id, quantity}): OneTimePurchaseLineItem => {
+				return {
+					product: products.find(p => p.id === id)!,
+					quantity
+				};
+			}),
+			successUrl,
+			cancelUrl,
+		});
+	},
+	async getSubscribeUrl({ cart, successUrl, cancelUrl }: {
+		cart: { id: string }[];
+		successUrl: string;
+		cancelUrl: string;
+	}) {
+		const user = await auth.requireCurrentUser(context);
+		return payments.createCheckoutUrl({
+			customer: {
+				id: user.id
+			},
+			lineItems: cart.map(({id}): SubscriptionLineItem => {
+				return {
+					product: plans.find(p => p.id === id)!,
+					quantity: 1
+				};
+			}),
+			successUrl,
+			cancelUrl,
+		});
+	},
+	async listPayments() {
+		const user = await auth.requireCurrentUser(context);
+		return payments.listPayments(user.id);
+	},
+	async listSubscriptions() {
+		const user = await auth.requireCurrentUser(context);
+		return payments.listSubscriptions(user.id);
+	}
+}));

package/templates/default/api/index.ts

@@ -1,9 +1,13 @@
-import { AuthenticationService} from 'wirejs-resources';
+import { AuthenticationService, Endpoint } from 'wirejs-resources';
 import { Chat } from './apps/chat.js';
 import { Todos } from './apps/todos.js';
 import { Wiki } from './apps/wiki.js';
+import { Store } from './apps/store.js';
+import { Admin } from './apps/admin.js';
 
-export type { Todo } from './apps/todos.js';
+export type * from './apps/todos.js';
+export type * from './apps/store.js';
+export type * from './apps/admin.js';
 
 const authService = new AuthenticationService('app', 'core-users');
 
@@ -11,3 +15,28 @@ export const auth = authService.buildApi();
 export const chat = Chat(auth);
 export const todos = Todos(auth);
 export const wiki = Wiki(auth);
+export const store = Store(auth);
+export const admin = Admin(auth);
+
+new Endpoint('app', 'sample-endpoint', {
+	description: "Sample endpoint to show dynamic endpoint creation.",
+	handle() {
+		return "<html><body><p>Hello!</p><p><a href='/'>Back.</a></body></html>";
+	}
+});
+
+new Endpoint('app', 'sample-wildcard-endpoint', {
+	path: 'wildcard-endpoint/%',
+	description: "Sample endpoint to show dynamic wildcard endpoint creation.",
+	handle(context) {
+		return `<html>
+			<body>
+				<h2>${context.location.toString()
+					.replace(/</, '&lt;')
+					.replace(/>/, '&gt;')
+				}</h2>
+				<p><a href='/'>Back.</a>
+			</body>
+		</html>`;
+	}
+});

package/templates/default/package.json

@@ -11,19 +11,21 @@
 	"dependencies": {
 		"dompurify": "^3.2.3",
 		"marked": "^15.0.6",
-		"wirejs-dom": "^1.0.41",
-		"wirejs-resources": "^0.1.106",
-		"wirejs-components": "^0.1.49",
-		"wirejs-web-worker": "^1.0.3"
+		"wirejs-dom": "^1.0.42",
+		"wirejs-resources": "^0.1.107-payments",
+		"wirejs-components": "^0.1.50-payments",
+		"wirejs-module-payments-stripe": "^0.1.1-payments",
+		"wirejs-web-worker": "^1.0.4-payments"
 	},
 	"devDependencies": {
-		"wirejs-scripts": "^3.0.104",
+		"wirejs-scripts": "^3.0.105-payments",
 		"typescript": "^5.7.3"
 	},
 	"scripts": {
 		"prebuild": "npm run prebuild --workspaces --if-present",
 		"prestart": "npm run prestart --workspaces --if-present",
 		"start": "wirejs-scripts ws-run-parallel start",
+		"start:public": "wirejs-scripts ws-run-parallel start:public",
 		"build": "npm run build --workspaces --if-present"
 	},
 	"engines": {

package/templates/default/src/package.json

@@ -5,10 +5,11 @@
 	"type": "module",
 	"dependencies": {
 		"wirejs-dom": "*",
-		"my-api": "*"
+		"internal-api": "*"
 	},
 	"scripts": {
 		"build": "cd .. && wirejs-scripts build",
-		"start": "cd .. && wirejs-scripts start"
+		"start": "cd .. && wirejs-scripts start",
+		"start:public": "cd .. && wirejs-scripts start --public"
 	}
 }

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

@@ -0,0 +1,175 @@
+import { html, list, node, text, hydrate } from 'wirejs-dom/v2';
+import { Main } from '../layouts/main.js';
+import { admin, Endpoint, Setting, SystemAttribute } from 'internal-api';
+
+function SettingInput(setting: Setting, dirtySettings: Map<string, string>) {
+	if (setting.isPrivate) {
+		return html`<input
+			type="password"
+			value="${setting.value || ''}"
+			oninput=${(event: Event) => dirtySettings.set(
+				setting.key, (event.target as any).value
+			)}
+		/>`;
+	}
+
+	if (setting.options) {
+		return html`<select
+			oninput=${(event: Event) => dirtySettings.set(
+				setting.key, (event.target as any).value
+			)}>${setting.options.map(option =>
+			html`<option
+				value=${option}
+				${setting.value === option ? 'selected' : ''}
+			>${option}</option>`)
+		}</select>`;
+	}
+
+	return html`<input
+		type="text"
+		value="${setting.value || ''}"
+		oninput=${(event: Event) => dirtySettings.set(
+			setting.key, (event.target as any).value
+		)}
+	/>`;
+}
+
+function Admin() {
+	const dirtySettings = new Map<string, string>();
+
+	const styledLink = (endpoint: Endpoint) => {
+		const origin = endpoint.url.slice(0, endpoint.path.length);
+		return html`<span>
+			<a
+				href='${endpoint.path}'
+				style='font-weight: normal; color: gray;'
+			>${origin}<b style='color: black;'>${endpoint.path}</b></a>
+			
+		</span>`;
+	}
+
+	const copyLinkButton = (endpoint: Endpoint) => {
+		const COPY_ICON = "📋";
+		const COPIED_ICON = "✅";
+		const self = html`<span
+				style="cursor: pointer; margin-left: 0.5em; font-size: smaller;"
+				title="Copy to clipboard"
+				onclick=${() => {
+					navigator.clipboard.writeText(endpoint.url);
+					self.data.status = COPIED_ICON;
+					setTimeout(() => self.data.status = COPY_ICON, 1500);
+				}}
+			>${text('status', COPY_ICON)}
+		</span>`;
+		return self;
+	}
+
+	const copyValueButton = (value: string) => {
+		const COPY_ICON = "📋";
+		const COPIED_ICON = "✅";
+		const self = html`<span
+				style="cursor: pointer; margin-left: 0.5em; font-size: smaller;"
+				title="Copy to clipboard"
+				onclick=${() => {
+					navigator.clipboard.writeText(value);
+					self.data.status = COPIED_ICON;
+					setTimeout(() => self.data.status = COPY_ICON, 1500);
+				}}
+			>${text('status', COPY_ICON)}
+		</span>`;
+		return self;
+	}
+
+	const load = async () => {
+		self.data.settings = (await admin.listSettings(null))
+			.sort((a, b) => a.key > b.key ? 1 : -1);
+		self.data.endpoints = (await admin.listEndpoints(null))
+			.sort((a, b) => a.id > b.id ? 1 : -1);
+		self.data.attributes = (await admin.listSystemAttributes(null))
+			.sort((a, b) => a.name > b.name ? 1 : -1);
+	};
+
+	const self = html`<div>
+		<h3>Endpoints</h3>
+		<table>
+			${list('endpoints', (endpoint: Endpoint) => html`<tr>
+				<td>
+					<b>${endpoint.id}</b>
+					<br /><span style='opacity: 0.75'>${endpoint.description}</span>
+				</td>
+				<td>&rarr;</td>
+				<td>${styledLink(endpoint)}</td>
+				<td>${copyLinkButton(endpoint)}</td>
+			</tr>`)}
+		</table>
+
+		<h3>Settings</h3>
+		<form onsubmit=${async (event: Event) => {
+			event.preventDefault();
+			self.data.status = 'Saving ...';
+			const settings = [...dirtySettings
+				.entries()
+				.map(([key, value]) => ({
+					key,
+					value,
+				}))
+			];
+			dirtySettings.clear();
+			try {
+				await admin.saveSettings(null, settings);
+				await load();
+				self.data.status = 'Saved.';
+			} catch {
+				self.data.status = 'Error Saving.';
+			}
+		}}>
+			<table>
+			${list('settings', [], (setting: Setting) => html`<tr>
+				<td><b>${setting.key}</b>${setting.description
+					? `<br /><span style='opacity: 0.75;'>${setting.description}</span>`
+					: ''
+				}</td>
+				<td>${SettingInput(setting, dirtySettings)}</td>
+			</tr>`)}
+			</table>
+			<input type='submit' value='Save Settings' />
+			<span>${text('status', 'Loaded')}</span>
+		</form>
+
+		<h3>System Information</h3>
+		<table>
+			${list('attributes', (attr: SystemAttribute) => html`<tr>
+				<td>
+					<b>${attr.name}</b>
+					<br /><span style='opacity: 0.75'>${attr.description}</span>
+				</td>
+				<td>${attr.value || `<span style='opacity: 0.75;'>EMPTY</span>`}</td>
+				<td>${copyValueButton(attr.value)}</td>
+			</tr>`)}
+		</table>
+	<div>`.onadd(load);
+
+	return self;
+}
+
+async function App() {
+	const self = html`<div id='app'>
+	${node('isAdmin', false, (isAdmin: boolean | undefined) => 
+		isAdmin ?
+			html`<div><p>Your <b>are</b> an admin.</p>${Admin()}</div>`
+			: html`<p>You are <b>NOT</b> an admin.</p>`
+	)}
+	</div>`.onadd(async self => {
+		self.data.isAdmin = await admin.isAdmin(null);
+	});
+	return self;
+}
+
+export async function generate() {
+	return Main({
+		pageTitle: 'Admin',
+		content: await App(),
+	});
+}
+
+hydrate('app', App as any);

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

@@ -12,6 +12,8 @@ export async function generate() {
 				<li><a href='/simple-wiki/index.html'>Simple Wiki</a></li>
 				<li><a href='/realtime-test.html'>Realtime Test</a></li>
 				<li><a href='/web-worker-test.html'>Web Worker Test</a></li>
+				<li><a href='/storefront.html'>Storefront</a></li>
+				<li><a href='/admin.html'>Admin</a></li>
 			</ul>
 		</div>`
 	})

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

@@ -0,0 +1,174 @@
+import { html, list, attribute, hydrate } from 'wirejs-dom/v2';
+import { AuthenticatedContent } from 'wirejs-components';
+import { store, Product, Transaction, SubscriptionLine } from 'internal-api';
+import { Main } from '../layouts/main.js';
+
+type LineItem = {
+	productId: string;
+	productName: string;
+	price: string;
+	quantity: number;
+}
+
+function Storefront() {
+	const self = html`<div>
+
+		<h4>Products</h4>
+		<ol>${list('products', (p: Product) => html`<li>
+			${p.name} : <span
+				style='color: darkgreen; font-weight: bold; cursor: pointer;'
+				onclick=${() => {
+					const existing = self.data.cart.find(li => li.productId === p.id);
+					if (existing) {
+						const idx = self.data.cart.indexOf(existing);
+						self.data.cart.splice(idx, 1, {
+							...existing,
+							quantity: existing.quantity + 1
+						});
+					} else {
+						self.data.cart.push({
+							productId: p.id,
+							productName: p.name,
+							price: `\$${(p.unitAmount/100).toFixed(2)}`,
+							quantity: 1
+						});
+					}
+				}}
+			>add</span>
+		</li>`)}</ol>
+			
+		<h4>Cart</h4>
+		<ol>${list('cart', (li: LineItem) => html`<li>
+			${li.productName} x ${li.quantity} : <span
+				style='color: darkred; font-weight: bold; cursor: pointer;'
+				onclick=${() => {
+					self.data.cart.splice(self.data.cart.indexOf(li), 1);
+				}}
+			>remove</span>
+		</li>`)}</ol>
+
+		<div>
+			<form onsubmit=${async (event: Event) => {
+				event.preventDefault();
+				document.location = (await store.getCheckoutUrl(null, {
+					cart: self.data.cart.map(li => ({
+						id: li.productId,
+						quantity: li.quantity
+					})),
+					successUrl: document.location.href,
+					cancelUrl: document.location.href,
+				}))!;
+			}}>
+				<input type='submit' value='Checkout' />
+			</form>
+		</div>
+
+		<h4>Transactions</h4>
+		<table>
+			<tr>
+				<th>date</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><table>
+					${(t.items || []).map(li => html`<tr>
+						<td>${li.description}</td>
+						<td>x ${li.quantity}</td>
+						<td>= \$${(li.amount/100).toFixed(2)}</td>
+					</tr>`)}
+				</table></td>
+			</tr>`)}
+		</table>
+
+		<h4>Subscription Plans</h4>
+		<table>
+			<tr>
+				<th>Name</th>
+				<th>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
+					style='color: darkgreen; font-weight: bold; cursor: pointer;'
+					onclick=${() => {
+						self.data.planCart.push(p);
+						self.data.plans.splice(self.data.plans.indexOf(p), 1);
+					}}
+				>add</span>
+			</tr>`)}
+		</table>
+
+		<h4>Subscription Cart</h4>
+		<table>
+			<tr>
+				<th>Name</th>
+				<th>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><span
+					style='color: darkred; font-weight: bold; cursor: pointer;'
+					onclick=${() => {
+						self.data.planCart.splice(self.data.planCart.indexOf(p), 1);
+						self.data.plans.push(p);
+					}}
+				>remove</span></td>
+			</tr>`)}
+		</table>
+
+		<div>
+			<form onsubmit=${async (event: Event) => {
+				event.preventDefault();
+				document.location = (await store.getSubscribeUrl(null, {
+					cart: self.data.planCart.map(plan => ({ id: plan.id })),
+					successUrl: document.location.href,
+					cancelUrl: document.location.href,
+				}))!;
+			}}>
+				<input type='submit' value='Subscribe' />
+			</form>
+		</div>
+
+		<h4>Subscriptions</h4>
+		<table>${list('subscriptions', (s: SubscriptionLine) => html`<li>
+			${JSON.stringify(s)}
+		</li>`)}</table>
+
+	<div>`.onadd(async self => {
+		const products = await store.listProducts(null);
+		self.data.products = products.filter(p => p.type === 'one_time');
+		self.data.plans = products.filter(p => p.type !== 'one_time');
+		self.data.transactions = await store.listPayments(null);
+		self.data.subscriptions = await store.listSubscriptions(null);
+	});
+	return self;
+}
+
+async function App() {
+	const self = html`<div id='app'>
+		${await AuthenticatedContent({
+			authenticated: () => Storefront(),
+			unauthenticated: () => html`<div>
+				You need to sign in to buy things.
+			</div>`
+		})}
+	</div>`;
+
+	return self;
+}
+
+export async function generate() {
+	return Main({
+		pageTitle: 'Simple Storefront Demo',
+		content: await App(),
+	});
+}
+
+hydrate('app', App as any);

package/templates/default/static/default.css

@@ -50,7 +50,7 @@ form div {
 	margin-bottom: 1rem;
 }
 
-label, input, button {
+label, input, select, button {
 	display: inline-block;
 	width: 9rem;
 	margin: 0.25rem;
@@ -62,7 +62,7 @@ label {
 	color: var(--color-muted);
 }
 
-input {
+input, select {
 	width: 20rem;
 	border: 1px solid var(--border-color-muted);
 	margin-bottom: 0.5rem;
@@ -70,6 +70,10 @@ input {
 	font-size: medium;
 }
 
+select {
+	width: 21rem;
+}
+
 textarea {
 	width: calc(100% - 2rem);
 	height: 15rem;