Commit 35325391 authored by Aral Balkan's avatar Aral Balkan

Start implementing patronage page

parent 42097141
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Your Patronage</title>
<style>
html {
color: black;
background-color: white;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Your patronage</h1>
<p>Status: <span id='status'>offline</span></p>
<div id='received'></div>
${newPatronMessage}
<p><strong>Thank you for supporting our work!</strong> If you haven’t bookmarked this page, please do so now. You can return here at any time to update, pause, or cancel your patronage. If you ever want to talk to a human being, you can contact Aral and Laura at <a href='mailto:support@small-tech.org'>support@small-tech.org</a> or at <a href='https://social.small-tech.org/support'>support@social.small-tech.org</a>.</p>
<h2>At a glance</h2>
<ul>
<li><strong>Patron since:</strong> ${patronSinceRelative} (${patronSinceAbsolute})</strong>
<li><strong>Amount:</strong> €${patronageAmount}/month</li>
<li><strong>Last payment:</strong> ${currentPeriodStartRelative} (${currentPeriodStartAbsolute})</li>
<li><strong>Next payment:</strong> ${currentPeriodEndRelative} (${currentPeriodEndAbsolute})</li>
</ul>
<h2>Update your patronage</h2>
<p>This will update your patronage amount effective immediately.</p>
<form id='update'>
<label for='amount'>Amount (€/month):<label>
<input id='patronageAmount' type='text' value='${patronageAmount}'>
<br><br>
<input type='submit' value='Update my patronage' />
</form>
<h2>Pause your patronage</h2>
<p>This will pause your patronage effective immediately. You can resume it again at any point.</p>
<form id='pause'>
<input type='submit' value='Pause my patronage' />
</form>
<h2>Cancel your patronage</h2>
<p>This will stop your monthly patronage effective immediately.</p>
<form id='cancel'>
<input type='submit' value='Cancel my patronage' />
</form>
<script>
const subscriptionId = '${subscriptionId}'
const currentAmount = ${patronageAmount}
${clientSideJavaScript}
</script>
</body>
</html>
\ No newline at end of file
window.addEventListener('load', _ => {
$ = document.querySelector.bind(document)
const socket = new WebSocket(`wss://${window.location.hostname}/patron`)
// Display the state of the connection.
socket.onopen = _ => { $('#status').innerHTML = '<span style="color: green">Online</span>' }
socket.onclose = _ => { $('#status').innerHTML = 'Offline' }
// Display received messages.
socket.onmessage = message => {
// message = JSON.parse(message.data)
$('#received').innerHTML += `<li>${message}</li>`
}
//
// Interface
//
$('#update').addEventListener('submit', event => {
event.preventDefault()
console.log('Moo')
socket.send(`Update amount to: ${$('#patronageAmount').value}`)
})
})
\ No newline at end of file
const fs = require('fs')
const moment = require('moment')
const stripe = require('stripe')('sk_test_GT9DfvDjhljTdIe3rKyEHtyU00RVQ0FCNP')
stripe.setTelemetryEnabled(false)
console.log(process.cwd())
const htmlTemplate = fs.readFileSync('.dynamic/client/patron.html')
const clientSideJavaScript = fs.readFileSync('.dynamic/client/patron.js')
// Converts a Stripe (Unix) timestamp string to a JavaScript date object.
// (JS expects the timestamp in miliseconds so we pad three decimal places).
function timestampToDate(timestamp) {
......@@ -14,13 +19,27 @@ function lowercaseFirstLetter (s) {
return s.charAt(0).toLowerCase() + s.slice(1)
}
module.exports = async (request, response) => {
module.exports = async (request, response, next) => {
function render (template) {
return eval('`' + template + '`')
}
const sessionId = request.params.id
const sessionId = request.query.id
if (sessionId === '.websocket') {
// This is a web socket request, leave it be.
next()
return
}
console.log('>>>> SESSION ID = <<<<', sessionId)
const session = await stripe.checkout.sessions.retrieve(sessionId)
const subscription = await stripe.subscriptions.retrieve(session.subscription)
console.log('subscription', subscription)
const subscriptionId = subscription.id
const subscriptionStatus = subscription.status
......@@ -56,66 +75,6 @@ module.exports = async (request, response) => {
// `
// }
const html = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Your Patronage</title>
<style>
html {
color: black;
background-color: white;
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Your patronage</h1>
${newPatronMessage}
<p><strong>Thank you for supporting our work!</strong> If you haven’t bookmarked this page, please do so now. You can return here at any time to update, pause, or cancel your patronage. If you ever want to talk to a human being, you can contact Aral and Laura at <a href='mailto:support@small-tech.org'>support@small-tech.org</a> or at <a href='https://social.small-tech.org/support'>support@social.small-tech.org</a>.</p>
<h2>At a glance</h2>
<ul>
<li><strong>Patron since:</strong> ${patronSinceRelative} (${patronSinceAbsolute})</strong>
<li><strong>Amount:</strong> €${patronageAmount}/month</li>
<li><strong>Last payment:</strong> ${currentPeriodStartRelative} (${currentPeriodStartAbsolute})</li>
<li><strong>Next payment:</strong> ${currentPeriodEndRelative} (${currentPeriodEndAbsolute})</li>
</ul>
<h2>Update your patronage</h2>
<p>This will update your patronage amount effective immediately.</p>
<form action='/patronage?action=update&id=${subscriptionId}'>
<label for='amount'>Amount (€/month):<label>
<input type='text' value='${patronageAmount}'>
<br><br>
<input type='submit' value='Update my patronage' />
</form>
<h2>Pause your patronage</h2>
<p>This will pause your patronage effective immediately. You can resume it again at any point.</p>
<form action='/patronage?action=pause&id=${subscriptionId}'>
<input type='submit' value='Pause my patronage' />
</form>
<h2>Cancel your patronage</h2>
<p>This will stop your monthly patronage effective immediately.</p>
<form action='/patronage?action=cancel&id=${subscriptionId}'>
<input type='submit' value='Cancel my patronage' />
</form>
</body>
</html>`
response.type('html').status(200).end(html)
const html = render(htmlTemplate)
response.type('html').end(html)
}
const httpsGetPatron = require('./https/get/patron')
const wssPatron = require('./wss/patron')
module.exports = app => {
app.get('/patron/:id', httpsGetPatron)
app.ws('/patron', wssPatron)
}
module.exports = (webSocket, request) => {
console.log('Socket route ready')
webSocket.on('message', (data) => {
console.log(`Received: ${data}`)
})
}
......@@ -64,7 +64,7 @@ class Payment {
get successUrl () {
return this.payment.isPatronage ?
`https://${this.host}/patronage/?id={CHECKOUT_SESSION_ID}` :
`https://${this.host}/patron/{CHECKOUT_SESSION_ID}` :
`https://${this.host}/fund-us/thank-you`
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment